…Logo…
Das Markup wurde entsprechend umgestellt: #logoGitisDiv liegt jetzt in
#header vor #bar_g. Die Logozeile darunter traegt nur noch das Kundenlogo.
========================================================================== */
#header {
display: flex;
align-items: center;
}
/* .group ist ein Clearfix ueber :before/:after mit display:table. In einem
Flex-Container wuerden daraus zwei leere Flex-Elemente. */
#header:before,
#header:after {
display: none;
}
/* Flaeche und Unterkante sitzen jetzt auf #header selbst, damit sie die
volle Breite inklusive Logo tragen. */
#header .right {
background-color: transparent;
border-bottom: none;
box-shadow: none;
float: none;
flex: 1;
width: auto;
}
.bar p {
margin-right: 0;
}
/* Die Logozeile enthaelt jetzt nur noch das Kundenlogo. Auf den Seiten
ohne Kundenlogo waere sie leer - dort faellt sie weg. */
#logoRow:not(:has(#logoCustomerDiv)) {
display: none;
}
/* ==========================================================================
20. Offizielles GITIS-Logo als SVG
--------------------------------------------------------------------------
logo-gitis.svg von gitis.it bringt das gruene Quadrat selbst mit:
darauf die weissen Pfade. Damit entfaellt hier beides - die Einfaerbung
wuerde die komplette Flaeche weiss machen, und ein Innenabstand wuerde
einen Ring in einem leicht anderen Gruen sichtbar machen
(Kachel #18a54c gegen Logo #00a44b).
Die PNG-Marken der OEM- und Haendlerkunden behalten Kachel und
Einfaerbung, weil sie keinen eigenen Grund mitbringen.
========================================================================== */
#logo_gitis[src*="logo-gitis.svg"],
#footerGitisLogoImg[src*="logo-gitis.svg"] {
filter: none;
}
#logoGitisDiv:has(#logo_gitis[src*="logo-gitis.svg"]),
#footerGitisLogo:has(#footerGitisLogoImg[src*="logo-gitis.svg"]) {
padding: 0;
}
/* ==========================================================================
21. Senkrechte Ausrichtung in der hohen Leiste
--------------------------------------------------------------------------
Im Bestand ist die Navigation gefloatet und traegt #nav{margin-top:16px}.
Das war fuer den 53px-Balken gedacht - in einer 115px hohen Leiste klebt
sie damit oben statt mittig zu sitzen. Statt der Floats richtet jetzt
Flexbox aus.
========================================================================== */
#header .right {
display: flex;
align-items: center;
justify-content: flex-end;
}
.bar p {
float: none;
}
#nav {
margin-top: 0;
}
/* ==========================================================================
22. Rangfolge der Schaltflaechen
--------------------------------------------------------------------------
Bisher sah jede Aktion gleich aus: gruener Umriss auf Weiss. Aktuelle
Oberflaechen zeigen pro Ansicht genau eine gefuellte Hauptaktion, alles
Weitere bleibt zurueckhaltend. Das ist der groesste Gewinn an Klarheit -
man sieht sofort, was der naechste Schritt ist.
========================================================================== */
.btnGeneral {
min-height: 40px;
font-weight: 600;
}
/* Hauptaktionen: berechnen, Angebot anfordern, Ergebnis uebernehmen */
#btnCalc,
#btnRequestQuotation,
#btnFastRequestQuotation,
#btnORingAccept {
background-color: var(--gitis-green);
border-color: var(--gitis-green);
color: #fff;
box-shadow: 0 1px 2px rgba(16, 24, 32, 0.08);
}
/* Das Icon des Rechnen-Buttons war gruen - auf gefuellter Flaeche weiss. */
#btnCalc:before {
color: #fff;
}
#btnCalc:hover,
#btnRequestQuotation:hover,
#btnFastRequestQuotation:hover,
#btnORingAccept:hover,
#btnCalc:focus,
#btnRequestQuotation:focus,
#btnFastRequestQuotation:focus,
#btnORingAccept:focus {
background-color: var(--gitis-green-dark);
border-color: var(--gitis-green-dark);
color: #fff;
box-shadow: var(--gitis-elev-2);
}
#btnCalc:active,
#btnRequestQuotation:active,
#btnFastRequestQuotation:active,
#btnORingAccept:active {
box-shadow: inset 0 2px 4px rgba(16, 24, 32, 0.18);
}
/* ==========================================================================
23. Fussbereich unten halten, Login mittig
--------------------------------------------------------------------------
Im Bestand steht html,body{height:100%}. Damit ist die Seite exakt so
hoch wie das Fenster und laengerer Inhalt laeuft darueber hinaus - der
Fussbereich rutscht bei kurzen Seiten nach oben und laesst Weissraum
darunter stehen.
Loesung ohne Umbau des Seitenlayouts: min-height statt fester Hoehe,
dazu position:sticky mit top:100vh auf dem Fussbereich. Ist der Inhalt
kuerzer als der Bildschirm, haftet er am unteren Rand; ist er laenger,
laeuft er ganz normal mit.
Bewusst KEIN Flex- oder Grid-Layout auf : die Popup-Container auf
index.html tragen Bootstrap-Spaltenklassen (#userInfoPopup mit
col-xl-6 ...). Als Flex-Elemente einer Spalte wuerde deren flex-basis
auf die Hoehe wirken und die Seite zerreissen.
========================================================================== */
html {
height: auto;
min-height: 100%;
}
body {
height: auto;
min-height: 100vh;
}
#kontakt_home {
position: sticky;
top: 100vh;
}
/* Der Anmeldebereich fuellt den Bildschirm unterhalb der Kopfleiste.
Deren Hoehe (60px, ab 1400px 115px) wird abgezogen, damit nichts
ueber den sichtbaren Bereich hinausragt. */
.mainCalculatorDiv:has(#loginForm) {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - 60px);
margin-top: 0;
}
@media (min-width: 1400px) {
.mainCalculatorDiv:has(#loginForm) {
min-height: calc(100vh - 115px);
}
}
@media (max-width: 991px) {
.mainCalculatorDiv:has(#loginForm) {
min-height: 0;
}
}
/* ==========================================================================
24. Anmeldeseite: Formular links, Produktvideo rechts
--------------------------------------------------------------------------
login.html wurde umgebaut: die leere Platzhalterspalte links traegt keine
col-Klassen mehr (Breite 0), das Formular steht auf col-xl-5, die vormals
leere rechte Spalte auf col-xl-7 und nimmt das Video auf.
Die Reihenfolge im Formular stellt hier CSS her, ohne das Markup weiter
anzufassen: im DOM folgt der Anmelde-Button auf die Checkbox, erst danach
der Link "Passwort vergessen". Ueber order stehen Checkbox und Link
nebeneinander in einer Zeile, der Button darunter.
========================================================================== */
#loginForm {
background-color: #fff;
color: var(--gitis-ink);
max-width: 430px;
margin: 0 auto;
padding: 28px 26px;
border: 1px solid var(--gitis-hairline);
box-shadow: var(--gitis-elev-2);
}
#loginHeaderOne {
font-size: 22px;
font-weight: 700;
color: var(--gitis-ink);
margin-bottom: 4px;
}
#loginHeaderTwo {
font-size: 13px;
color: var(--gitis-ink-mute);
margin-bottom: 18px;
}
/* Die drei Regeln aus dem Bestand setzen weisse Schrift - sie waren fuer
den dunklen Kasten gedacht und wuerden auf Weiss unsichtbar. */
#checkBoxLogin {
color: var(--gitis-ink);
}
#pwDivForget a {
color: var(--gitis-green);
}
#pwDivForget a:hover {
color: var(--gitis-green-dark);
}
/* Zeile 2 des Formulars neu ordnen */
#loginForm .loginTextBoxes > div {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#textBoxPassword { flex: 0 0 100%; order: 1; }
#checkBoxLogin { flex: 0 0 50%; order: 2; }
#pwDivForget { flex: 0 0 50%; order: 3; text-align: right; font-size: 13px; }
#loginForm .loginBtn { flex: 0 0 100%; order: 4; margin-top: 18px; }
#divAcceptTermsOfUse { flex: 0 0 100%; order: 5; font-size: 12px; color: var(--gitis-ink-mute); }
/* Anmelde-Button ueber die volle Breite, gefuellt - die Hauptaktion. */
#btnLogin {
width: 100%;
background-color: var(--gitis-green);
border-color: var(--gitis-green);
color: #fff;
}
#btnLogin:hover,
#btnLogin:focus {
background-color: var(--gitis-green-dark);
border-color: var(--gitis-green-dark);
color: #fff;
}
/* --- Bild rechts, ueber die volle Bildschirmhoehe ---------------------- */
.sideImage {
height: 100%;
}
/* 942x825, also fast quadratisch - cover fuellt die Spalte ohne Verzerrung.
Kantig wie der Rest - passend zu --gitis-radius: 0. */
/* Nur links runden - rechts sitzt das Bild buendig an der Fensterkante.
overflow:hidden beschneidet das Bild auf diese Form, deshalb genuegt
die Angabe am Container. */
.sideImage {
overflow: hidden;
border-radius: 12px 0 0 12px;
}
.sideImage img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Die Zeile spannt sich ueber die verbleibende Hoehe, damit das Bild sie
ausfuellen kann. Das Formular sitzt darin mittig. */
.mainCalculatorDiv:has(#loginForm) > #divParameters {
flex: 1;
align-items: stretch;
}
#form-login {
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 991px) {
}
/* ==========================================================================
25. Anmeldeseite auf kleinen Bildschirmen
--------------------------------------------------------------------------
Die Spalten stapeln ab 991px (col-md-12), das Bild bekommt dort eine feste
Hoehe statt der vollen Bildschirmhoehe - sonst wuerde es auf dem Handy die
ganze Seite einnehmen. Darunter wird die Karte randlos und die Typografie
kleiner.
========================================================================== */
@media (max-width: 991px) {
/* Unterhalb von 992px faellt das Bild weg - es erscheint erst ab
Tablet quer beziehungsweise Desktop. */
.sideImage {
display: none;
}
#form-login {
justify-content: center;
}
}
@media (max-width: 767px) {
/* Die Karte nutzt die volle Breite, die feste Maximalbreite wuerde
sonst einen unnoetig schmalen Streifen erzeugen. */
#loginForm {
max-width: none;
padding: 20px 16px;
}
#loginHeaderOne {
font-size: 19px;
}
#loginHeaderTwo {
margin-bottom: 14px;
}
/* Checkbox und Vergessen-Link untereinander statt nebeneinander -
auf schmalen Geraeten wird der Link sonst umgebrochen. */
#checkBoxLogin,
#pwDivForget {
flex: 0 0 100%;
text-align: left;
}
#pwDivForget {
margin-top: 6px;
}
/* Der Fussbereich rueckt naeher an den Rand. */
#footerGitisLogo {
width: 88px;
height: 88px;
}
.contact_left_home,
.contact_right_home {
padding-left: 14px;
}
}
@media (max-width: 479px) {
#loginForm {
padding: 16px 12px;
}
}
/* ==========================================================================
26. Kopfzeile auf schmalen Bildschirmen
--------------------------------------------------------------------------
Die Logokachel haengt ueber align-self:stretch an der Leistenhoehe und
folgt damit automatisch. Auf Telefonen muessen aber Leistenhoehe,
Innenabstand und Navigation kleiner werden - sonst draengen Logo,
Sprachwahl und Links gegeneinander und werden von overflow:hidden
abgeschnitten.
========================================================================== */
@media (max-width: 767px) {
#header {
padding-right: 12px;
}
.bar a {
margin-left: 12px;
}
#nav {
font-size: 12px;
letter-spacing: 0.04em;
}
#logoGitisDiv {
padding: 8px;
margin-right: 12px;
}
}
@media (max-width: 479px) {
:root {
--gitis-bar-h: 52px;
}
#logoGitisDiv {
padding: 7px;
margin-right: 8px;
}
.bar a {
margin-left: 9px;
}
#nav {
font-size: 11px;
}
}
/* ==========================================================================
27. Passwort-Seiten im selben Design
--------------------------------------------------------------------------
forgotpassword.html und changepassword.html spiegeln den Aufbau der
Anmeldeseite exakt: Karte, HeaderOne/HeaderTwo, ein Button. Nur die
Namen unterscheiden sich, deshalb reicht CSS - kein Markup-Eingriff.
Die Karten standen noch auf dem dunklen Grund aus Abschnitt 11; die
Regel hier laedt spaeter und stellt sie auf Weiss.
========================================================================== */
#forgotpasswordForm,
#changepasswordForm {
background-color: #fff;
color: var(--gitis-ink);
max-width: 430px;
margin: 0 auto;
padding: 28px 26px;
border: 1px solid var(--gitis-hairline);
box-shadow: var(--gitis-elev-2);
}
#forgotpasswordHeaderOne,
#changepasswordHeaderOne {
font-size: 22px;
font-weight: 700;
color: var(--gitis-ink);
margin-bottom: 4px;
}
#forgotpasswordHeaderTwo,
#changepasswordHeaderTwo {
font-size: 13px;
color: var(--gitis-ink-mute);
margin-bottom: 18px;
}
/* Hauptaktion: gefuellt und ueber die volle Breite, wie der Anmelde-Button. */
#btnForgotpassword,
#btnChangepassword {
width: 100%;
background-color: var(--gitis-green);
border-color: var(--gitis-green);
color: #fff;
margin-top: 18px;
}
#btnForgotpassword:hover,
#btnForgotpassword:focus,
#btnChangepassword:hover,
#btnChangepassword:focus {
background-color: var(--gitis-green-dark);
border-color: var(--gitis-green-dark);
color: #fff;
}
/* Karte mittig auf der Seite. changepassword.html nutzt .mainCalculatorDiv,
forgotpassword.html eine eigene Klasse. */
.mainCalculatorDiv:has(#changepasswordForm),
.mainForgotpasswordDiv:has(#forgotpasswordForm) {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - 60px);
}
@media (min-width: 1400px) {
.mainCalculatorDiv:has(#changepasswordForm),
.mainForgotpasswordDiv:has(#forgotpasswordForm) {
min-height: calc(100vh - 115px);
}
}
@media (max-width: 767px) {
#forgotpasswordForm,
#changepasswordForm {
max-width: none;
padding: 20px 16px;
}
#forgotpasswordHeaderOne,
#changepasswordHeaderOne {
font-size: 19px;
}
.mainCalculatorDiv:has(#changepasswordForm),
.mainForgotpasswordDiv:has(#forgotpasswordForm) {
min-height: 0;
}
}
/* ==========================================================================
28. Anmeldeseite: Bild buendig am rechten Rand
--------------------------------------------------------------------------
Die Bildspalte verliert ihre rechte Bootstrap-Polsterung. Das genuegt,
weil die Zeile (.row, margin-right: -15px) die Polsterung des
container-fluid bereits aufhebt - das Bild reicht damit exakt bis zum
Fensterrand.
========================================================================== */
#divParameters > div:has(.sideImage) {
padding-right: 0;
}
/* ==========================================================================
29. Bild auch auf den Passwort-Seiten
--------------------------------------------------------------------------
forgotpassword.html und changepassword.html nutzen .container statt
.container-fluid. .container hat eine Maximalbreite und zentrierende
Aussenabstaende - damit koennte das Bild den Fensterrand nicht erreichen.
Deshalb wird die Begrenzung auf diesen beiden Seiten aufgehoben.
========================================================================== */
.mainForgotpasswordDiv:has(#forgotpasswordForm),
.mainCalculatorDiv:has(#changepasswordForm) {
max-width: none;
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
/* Die Formularspalte zentriert die Karte senkrecht, wie bei der Anmeldung. */
#form-forgotpassword,
#form-changepassword {
display: flex;
flex-direction: column;
justify-content: center;
}
.mainForgotpasswordDiv:has(#forgotpasswordForm) > #divParameters,
.mainCalculatorDiv:has(#changepasswordForm) > #divParameters {
flex: 1;
align-items: stretch;
}
/* ==========================================================================
30. Meldungen mittig ueber der Karte
--------------------------------------------------------------------------
Die Meldungscontainer tragen die Bootstrap-Klasse .container und liefen
damit ueber die volle Spaltenbreite, dazu ein Abstand von 40px (Anmeldung)
beziehungsweise 5% (Passwort-Seiten) nach oben. Hier bekommen sie
dieselbe Breite wie die Karte, sitzen mittig darueber und der Text ist
zentriert.
========================================================================== */
#loginMessageDiv,
#forgotpasswordMessageDiv,
#changepasswordMessageDiv {
max-width: 430px;
margin: 0 auto 14px;
padding: 0;
text-align: center;
}
@media (max-width: 767px) {
#loginMessageDiv,
#forgotpasswordMessageDiv,
#changepasswordMessageDiv {
max-width: none;
}
}