/* ==========================================================================
   FLACH BAUER & PARTNER — GWeb Login Theme  (design.css)  [Basis = Variante "Solide"]
   Überschreibt gweb.css. Wird als LETZTES geladen (/Includes/design.css).
   Nur Login-Seite (body.gw-login-page).
   ========================================================================== */

/* --- Schrift (selbst-gehostet) -------------------------------------------
   Roboto            -> Fließtext, Labels, Felder, Button
   Roboto Condensed  -> Headlines & Claim (Claim = Bold 700)
   TTF funktioniert; WOFF2 wäre fürs Live-System nur kleiner.
*/
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Light.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Bold.ttf')  format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto Condensed'; src:url('fonts/RobotoCondensed-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto Condensed'; src:url('fonts/RobotoCondensed-Bold.ttf')  format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

:root {
    --fb-petrol:        #005668;   /* Markenfarbe / Karte */
    --fb-petrol-bright: #1a7d92;   /* helleres Petrol (Akzent/Hover) */
    --fb-navy:          #102c44;   /* dunkles Marineblau (Bänder) */
    --fb-navy-deep:     #0b1f30;
    --fb-field:         #ffffff;
    --fb-field-text:    #14222e;
    --fb-warm:          #f2f1ec;
    --fb-radius:        4px;
    --fb-pill:          999px;
    --fb-card-w:        460px;
    --fb-font:          'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --fb-font-head:     'Roboto Condensed', 'Roboto', 'Segoe UI', sans-serif;
}

/* ---- Seite / Hintergrund (echtes Foto) ---------------------------------- */
body.gw-login-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: #fff;
    font-family: var(--fb-font);
    background-color: var(--fb-navy-deep);
    background-image: url('login-bg.webp');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ---- Header / Logo (frei oben links) ------------------------------------
   WICHTIG: Der Server liefert #logoPanel meist LEER (ohne <img>). Deshalb
   wird das weiße Logo als Hintergrundbild direkt auf das Panel gelegt —
   so erscheint es unabhängig davon, ob ein <img> vorhanden ist. */
body.gw-login-page .gw-header {
    position: absolute;
    top: 0; left: 0;
    width: 240px;
    height: 72px;
    border: none;
    padding: 40px 0 0 56px;
    box-sizing: content-box;
    background-image: url('logo.png');
    background-repeat: no-repeat;
    background-position: 56px 40px;
    background-size: auto 72px;
    z-index: 2;
}
body.gw-login-page .gw-header .gw-logo-left {
    /* Fallback, falls der Server doch ein <img> liefert: gegen das
       Hintergrundlogo doppeln verhindern -> img unsichtbar machen. */
    visibility: hidden;
    max-height: 72px;
    width: auto;
}

/* ---- Menüleiste auf der Login-Seite ausblenden (robust, !important) -----
   Auf der Login-Seite gibt es kein Menü. !important + ID + die inneren
   Link-Container, damit es auch dann verschwindet, wenn live andere Skripte/
   Styles (Infragistics/gweb.js) mitmischen oder beim Einfügen eine Wrapper-
   Klasse verloren geht. Betrifft u.a. die Links „Startseite"/„Anmelden". */
body.gw-login-page #menuPanel,
body.gw-login-page .gw-menu,
body.gw-login-page .gw-menu-right,
body.gw-login-page .gw-menu-generic,
body.gw-login-page .gw-menu-pages,
body.gw-login-page .gw-menu-login {
    display: none !important;
}

/* ---- Doppeltes Login-Fenster ausblenden (Sicherheitsnetz, auch ohne JS) --
   Falls versehentlich die komplette Vorschau-HTML (ein ganzes Dokument) in
   den Server-Login-Bereich eingefügt wurde, steckt INNERHALB des echten
   #loginPanel ein zweites, eingebettetes Markup. Diese verschachtelten Knoten
   gibt es im sauberen Server-Markup nicht -> wir blenden sie aus. Das echte,
   vorausgefüllte Formular bleibt sichtbar. (design.js entfernt sie zusätzlich.) */
body.gw-login-page #loginPanel #logoPanel,
body.gw-login-page #loginPanel #menuPanel,
body.gw-login-page #loginPanel .gw-content,
body.gw-login-page #loginPanel #loginPanel {
    display: none !important;
}

/* ---- Inhaltsbereich: Karte links platzieren ----------------------------- */
body.gw-login-page .gw-content {
    position: relative;
    z-index: 1;
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 140px 24px 56px 7vw;
    box-sizing: border-box;
}

/* ---- Login-Karte (solide Petrol) ---------------------------------------- */
body.gw-login-page #loginPanel.gw-form-panel {
    margin: 0;
    width: 100%;
    max-width: var(--fb-card-w);
    box-sizing: border-box;
    padding: 48px 48px 50px;
    background: var(--fb-petrol);
    color: #fff;
    border-radius: var(--fb-radius);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
}

/* Eyebrow (per JS: .fb-eyebrow) */
body.gw-login-page .fb-eyebrow {
    display: block;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
}

/* Claim-Headline: Roboto Condensed Bold 700 (per JS: .fb-claim) */
body.gw-login-page .fb-claim {
    margin: 0 0 35px;
    font-family: var(--fb-font-head);
    font-size: 27px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
    color: #fff;
}

/* ---- Labels ------------------------------------------------------------- */
body.gw-login-page #loginPanel label,
body.gw-login-page #loginPanel .gw-form-label {
    display: block;
    margin: 18px 0 7px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .3px;
    color: rgba(255,255,255,.92);
}
body.gw-login-page #loginPanel > label:first-of-type { margin-top: 0; }

/* ---- Eingabefelder ------------------------------------------------------ */
body.gw-login-page #loginPanel input[type=text],
body.gw-login-page #loginPanel input[type=password],
body.gw-login-page #loginPanel input[type=number] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    padding: 0 14px;
    background: var(--fb-field);
    color: var(--fb-field-text);
    border: 1px solid transparent;
    border-radius: var(--fb-radius);
    font-family: var(--fb-font);
    font-size: 15px;
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}
body.gw-login-page #loginPanel input::placeholder { color: #9aa7b0; }
body.gw-login-page #loginPanel input[type=text]:focus,
body.gw-login-page #loginPanel input[type=password]:focus,
body.gw-login-page #loginPanel input[type=number]:focus {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,.35);
}

/* Passwort-Feld + Auge-Toggle (per JS: .fb-pass) */
body.gw-login-page .fb-pass { position: relative; }
body.gw-login-page .fb-pass input { padding-right: 46px; }
body.gw-login-page .fb-eye {
    position: absolute;
    top: 0; right: 0;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: var(--fb-petrol);
    opacity: .6;
    transition: opacity .15s ease;
}
body.gw-login-page .fb-eye:hover { opacity: 1; }
body.gw-login-page .fb-eye svg { width: 20px; height: 20px; }

/* ---- Checkbox "Angemeldet bleiben" -------------------------------------- */
body.gw-login-page #loginPanel > div:not(.fb-pass):not(.fb-actions):not(.fb-claim) {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 22px 0 4px;
}
body.gw-login-page #loginPanel input[type=checkbox] {
    width: 18px; height: 18px;
    margin: 0;
    accent-color: #fff;
    cursor: pointer;
    flex: none;
}
body.gw-login-page #loginPanel input[type=checkbox] + label {
    display: inline;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,.92);
    cursor: pointer;
}

/* ---- Aktionszeile: Button (per JS: .fb-actions) ------------------------- */
body.gw-login-page .fb-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 32px;
}
body.gw-login-page #loginPanel input[type=submit] {
    display: inline-block;
    margin: 0;
    height: 50px;
    padding: 0 38px;
    background: transparent;
    color: #fff;
    border: 2.5px solid rgba(255,255,255,.9);
    border-radius: var(--fb-pill);     /* Pill wie auf der Website */
    font-family: var(--fb-font-head);  /* Roboto Condensed */
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
body.gw-login-page #loginPanel input[type=submit]:hover {
    background: #fff;
    color: var(--fb-petrol);
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.5);
}
body.gw-login-page #loginPanel input[type=submit]:active { transform: translateY(1px); }

/* ---- Fehler-/Statusmeldungen innerhalb der Karte ------------------------ */
body.gw-login-page #loginPanel .gw-error,
body.gw-login-page #loginPanel .gw-warn {
    display: block;
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(255,255,255,.14);
    border-radius: var(--fb-radius);
    color: #ffe2e2;
    font-size: 14px;
}

/* ---- Klein / mobil ------------------------------------------------------ */
@media (max-width: 640px) {
    body.gw-login-page { background-position: center; }
    body.gw-login-page .gw-header {
        padding: 26px 0 0 24px;
        height: 56px;
        background-position: 24px 26px;
        background-size: auto 56px;
    }
    body.gw-login-page .gw-content { padding: 104px 16px 32px; justify-content: center; }
    body.gw-login-page #loginPanel.gw-form-panel { padding: 34px 26px 38px; }
    body.gw-login-page .fb-claim { font-size: 24px; }
}