:root {
            --primary: #336699;
            --primary-dark: #003757;
            /* K1: Alias fuer global erwartende Komponenten (footer.css). */
            --primary-color: var(--primary);
            --bg: #eef2f6;
            --bg-gradient-1: #e8eef5;
            --bg-gradient-2: #f5f7fa;
            --surface: #ffffff;
            --text: #2c3a4b;
            --text-muted: #6b7888;
            --border: #d8e0e8;
            --input-bg: #f7f9fb;
            /* Autofill-Tonung der GANZEN Feld-Zeile: aus Primaer + Feldflaeche
               gemischt, passt sich Dark-Mode automatisch mit an. */
            --autofill-bg: color-mix(in srgb, var(--primary) 14%, var(--input-bg));
            --shadow: 0 18px 50px -20px rgba(20, 50, 80, 0.35);
            /* von footer.css genutzt */
            --transition: all 0.3s ease;
            --secondary-color: #d2dee4;
            --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --primary: #5b9bd5;
                /* Button-Grund fuer weissen Text: --primary ist im Dark Mode
                   hell (weiss nur 2,96:1). Dunklerer Ton -> weiss ~5,3:1. Nur
                   der Submit-Button nutzt ihn; --primary bleibt als Akzent
                   (Rahmen/Fokus/Links) unveraendert. Light Mode ohne Token
                   -> Fallback auf --primary. */
                --btn-primary-bg: #2f6cab;
                --primary-dark: #4d8dff;
                --bg: #0e1622;
                --bg-gradient-1: #0c1521;
                --bg-gradient-2: #131e2d;
                --surface: #18222f;
                --text: #e7edf4;
                --text-muted: #9aa7b6;
                --border: #2a3a4d;
                --input-bg: #111b27;
                --shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
            }
        }

        * { box-sizing: border-box; }

        /* Screenreader-only Labels (U2): visuell versteckt, fuer SR lesbar. */
        .sr-only {
            position: absolute !important;
            width: 1px; height: 1px;
            padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0, 0, 0, 0);
            white-space: nowrap; border: 0;
        }

        html, body {
            margin: 0;
            min-height: 100%;
        }

        /* Tastatur-Fokus sichtbar (WCAG 2.4.7) – nur bei Tastatur, nicht Maus */
        :focus-visible {
            outline: 2px solid var(--primary, #336699) !important;
            outline-offset: 2px !important;
        }

        body {
            font-family: var(--font-sans);
            color: var(--text);
            background: radial-gradient(1200px 600px at 50% -10%, var(--bg-gradient-2), var(--bg-gradient-1) 60%, var(--bg) 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background-color: rgba(120,130,140,0.4); border-radius: 4px; }

        /* ---- Header ---- */
        .app-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 16px 24px;
            background: transparent;
        }
        .app-header img {
            height: 34px;
            width: auto;
            cursor: pointer;
        }

        /* ---- Main / Card ---- */
        .login-main {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px 16px 60px;
        }

        .login-card {
            background: var(--surface);
            width: 100%;
            max-width: 400px;
            border-radius: 18px;
            padding: 36px 32px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
        }

        .login-card .brand {
            text-align: center;
            margin-bottom: 26px;
        }
        .login-card .brand img {
            height: 40px;
            width: auto;
        }
        .login-card h2 {
            font-size: 22px;
            font-weight: 600;
            color: var(--text);
            margin: 0 0 4px;
            text-align: center;
        }
        .login-card .subtitle {
            text-align: center;
            color: var(--text-muted);
            font-size: 14px;
            margin: 0 0 24px;
        }

        .login {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .login-row {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--input-bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0 14px;
            transition: border-color .15s, box-shadow .15s;
        }
        .login-row:focus-within {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.18);
        }
        .login-row i {
            color: var(--text-muted);
            font-size: 15px;
            width: 16px;
            text-align: center;
        }
        .login-row input {
            flex: 1;
            border: none;
            background: transparent;
            padding: 14px 0;
            font-size: 15px;
            color: var(--text);
            outline: none;
        }
        .login-row input::placeholder { color: var(--text-muted); }

        /* Tastatur-Fokus: die ZEILE ist das optische Feld - ihr
           :focus-within-Ring (oben) ist der sichtbare Indikator (WCAG 2.4.7).
           Der globale :focus-visible-Ring (!important) wuerde sonst ein
           zweites, kleineres Rechteck NUR ums innere Input legen. Der
           pw-toggle behaelt als eigenes Bedienelement seinen eigenen Ring. */
        .login-row input:focus-visible {
            outline: none !important;
        }

        /* Autofill: Chrome/Safari faerben nur das innere Input ein - dadurch
           war nur ein Teilstreifen des Feldes gelb. Stattdessen die GANZE
           Zeile in der Autofill-Tonung faerben: das Input neutralisiert das
           Browser-Gelb per Inset-Schatten in derselben Farbe, die Zeile zieht
           per :has() mit. */
        .login-row input:-webkit-autofill,
        .login-row input:-webkit-autofill:hover,
        .login-row input:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg) inset;
            -webkit-text-fill-color: var(--text);
            caret-color: var(--text);
        }
        .login-row:has(input:-webkit-autofill) {
            background: var(--autofill-bg);
        }

        /* F115: Augen-Button zum Ein-/Ausblenden des Passworts.
           WICHTIG: Der Toggle ist ein dezenter Icon-Button RECHTS IM Feld – kein
           Submit-Button. Frueher erbte er wegen der hoeher spezifizierten Regel
           `.login button` (jetzt auf `[type="submit"]` eingeschraenkt) das volle
           blaue Button-Styling. Zur Sicherheit ist die Regel hier zusaetzlich
           robust/hoch spezifiziert (`.login button.pw-toggle`) und resettet alle
           Button-Eigenschaften explizit, damit keine kuenftige Button-Regel den
           Icon-Button wieder zum blauen Kasten macht. Als Flex-Kind der
           `.login-row` sitzt das Icon buendig am rechten Feldrand – ohne
           Layout-Sprung und ohne absolute Positionierung. */
        .pw-toggle,
        .login button.pw-toggle {
            background: transparent;
            border: none;
            margin: 0;                 /* kein margin-top (Submit-Button hatte 6px) */
            padding: 4px 2px;          /* klein: dezentes Icon, kein Button-Kasten */
            color: var(--text-muted);
            font-size: 15px;
            line-height: 0;
            cursor: pointer;
            border-radius: 6px;
            flex: 0 0 auto;            /* feste Breite rechts; Input (flex:1) fuellt links */
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: color .15s;
        }
        /* Hover nur leicht dunkler (nicht Primaerfarbe – die verschwaende den
           dezenten Charakter/waere je nach Feld-Hintergrund kaum sichtbar). */
        .pw-toggle:hover,
        .pw-toggle:focus { color: var(--text); }
        .pw-toggle:active { transform: none; }   /* kein Button-Press-Versatz */
        /* Icon erbt die (Hover-)Farbe des Buttons, statt von `.login-row i` fix gesetzt zu werden */
        .pw-toggle i { color: inherit; width: auto; font-size: inherit; }

        /* F115: Dezenter Caps-Lock-Hinweis unter dem Passwortfeld */
        .caps-hint {
            font-size: 12.5px;
            color: var(--text-muted);
            margin: 2px 2px 0;
            display: flex;
            gap: 6px;
            align-items: center;
        }
        .caps-hint i { font-size: 11px; }
        /* hidden-Attribut muss display:flex neutralisieren */
        .caps-hint[hidden] { display: none; }

        /* NUR Submit-Buttons bekommen das grosse Primaer-Styling. Vorher galt
           `.login button` fuer ALLE Buttons und machte den pw-toggle (Augen-
           Icon im Passwortfeld) und die .link-Buttons zu blauen Kaesten. */
        .login button[type="submit"] {
            margin-top: 6px;
            padding: 13px 16px;
            font-size: 15px;
            font-weight: 600;
            color: #fff;
            background: var(--btn-primary-bg, var(--primary));
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: background .15s, transform .05s;
        }
        .login button[type="submit"]:hover { background: var(--primary-dark); }
        .login button[type="submit"]:active { transform: translateY(1px); }

        .link {
            margin-top: 18px;
            text-align: center;
            font-size: 14px;
            color: var(--text-muted);
            cursor: pointer;
            /* U19: als <button> nutzbar machen, ohne Button-Chrome */
            background: none;
            border: none;
            display: block;
            width: 100%;
            font-family: inherit;
            transition: color .15s;
        }
        .link:hover { color: var(--primary); }

        /* ---- Spinner ---- */
        .spinner-wrapper {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg);
            z-index: 9999;
        }
        .spinner {
            border: 6px solid rgba(140,140,140,0.25);
            border-top: 6px solid var(--primary);
            border-radius: 50%;
            width: 54px;
            height: 54px;
            animation: spin 1s cubic-bezier(.65,.05,.36,1) infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        @media (max-width: 480px) {
            .login-card { padding: 28px 22px; border-radius: 14px; }
        }
        /* Mobil: 15px triggert den iOS-Fokus-Zoom – 16px verhindert ihn,
           optisch praktisch unsichtbar. Dazu echte Treffflächen für das
           Passwort-Auge und den "Passwort vergessen"-Button (waren 21×23
           bzw. 18px hoch – am Finger vorbei); nur die Hitbox wächst. */
        @media (max-width: 640px) {
            .login-row input { font-size: 16px; }
            .pw-toggle,
            .login button.pw-toggle { padding: 12px 10px; }
            .link { padding: 10px 8px; margin-top: 8px; }
        }

/* Logo: helle Variante im Dark Mode */
.brand-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
    .brand-logo-light { display: none; }
    .brand-logo-dark { display: inline-block; }
}

/* Flash-Meldungen auf der Login-Seite (Reset-Link, Fehlermeldungen) */
.login-flash {
    background: color-mix(in srgb, var(--primary-color, #369) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color, #369) 35%, transparent);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}
.login-flash p { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.login-flash p + p { margin-top: 6px; }
.login-flash i { margin-top: 2px; opacity: 0.8; }