/*
 * AutoCMS – Haupt-Stylesheet
 *
 * Aufbau:
 *   1. CSS Custom Properties (Design-Tokens, Light + Dark)
 *   2. Reset & Basis
 *   3. Typografie
 *   4. Layout (Sidebar + Main)
 *   5. Topbar
 *   6. Navigation
 *   7. Komponenten (Karten, Tabellen, Formulare, Buttons, Badges, Alerts)
 *   8. Login-Seite
 *   9. Utility-Klassen
 */

/* ═══════════════════════════════════════════════════════
   1. DESIGN-TOKENS
   ═══════════════════════════════════════════════════════ */

:root {
    /* Farben – Light */
    --farbe-hintergrund:        #EDE8DC;
    --farbe-hintergrund-karte:  #FFFFFF;
    --farbe-hintergrund-sektion:#DFDACD;
    --farbe-rahmen:             rgba(0,0,0,0.09);
    --farbe-rahmen-stark:       rgba(0,0,0,0.16);
    --farbe-text-primaer:       #1A1917;
    --farbe-text-sekundaer:     #5F5E5A;
    --farbe-text-tertiaer:      #888780;
    --farbe-akzent:             #0E7A50;
    --farbe-akzent-hell:        #E3F3EB;
    --farbe-akzent-dunkel:      #0A5537;

    /* Statussfarben */
    --farbe-erfolg:             #2D9B4E;
    --farbe-erfolg-hell:        #E3F5EB;
    --farbe-warnung:            #F5C842;
    --farbe-warnung-hell:       #FFFBE6;
    --farbe-warnung-text:       #7A5C00;
    --farbe-fehler:             #C0392B;
    --farbe-fehler-hell:        #FCEBEB;
    --farbe-info:               #378ADD;
    --farbe-info-hell:          #E6F1FB;

    /* Typografie */
    --schrift-sans:  'Inter', system-ui, -apple-system, sans-serif;
    --schrift-mono:  'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    --schrift-gr-xs: 11px;
    --schrift-gr-sm: 12px;
    --schrift-gr-md: 13px;
    --schrift-gr-lg: 15px;
    --schrift-gr-xl: 18px;

    /* Abstände */
    --abstand-xs:  4px;
    --abstand-sm:  8px;
    --abstand-md: 14px;
    --abstand-lg: 20px;
    --abstand-xl: 32px;

    /* Radien */
    --radius-sm: 20px;
    --radius-md: 20px;
    --radius-lg: 10px;

    /* Sidebar */
    --sidebar-breite: 220px;
    --topbar-hoehe:    48px;

    /* Schatten */
    --schatten-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --schatten-md: 0 4px 12px rgba(0,0,0,0.10);
    --schatten-lg: 0 8px 24px rgba(0,0,0,0.12);
}

/* Dark Mode */
[data-thema="dunkel"] {
    --farbe-hintergrund:        #0D0D10;
    --farbe-hintergrund-karte:  #1B1B23;
    --farbe-hintergrund-sektion:#2E2E3A;
    --farbe-rahmen:             #38384A;
    --farbe-rahmen-stark:       #47475C;
    --farbe-text-primaer:       #E8E8F2;
    --farbe-text-sekundaer:     #BDBDCE;
    --farbe-text-tertiaer:      #9292A6;
    --farbe-akzent:             #2FD98F;
    --farbe-akzent-hell:        #0C2E20;
    --farbe-akzent-dunkel:      #22C486;
    --farbe-erfolg:             #4ADE80;
    --farbe-fehler:             #FF6B6B;
    --farbe-warnung:            #FBBF24;
    --farbe-warnung-text:       #FBBF24;
    --farbe-erfolg-hell:        #0F2418;
    --farbe-warnung-hell:       #2E2800;
    --farbe-fehler-hell:        #2A0F0F;
}

/* ═══════════════════════════════════════════════════════
   2. RESET & BASIS
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    font-family:      var(--schrift-sans);
    font-size:        var(--schrift-gr-md);
    color:            var(--farbe-text-primaer);
    background-color: var(--farbe-hintergrund);
    line-height:      1.5;
    min-height:       100vh;
}

a { color: var(--farbe-akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Formelemente systemweit auf Akzentfarbe (Checkboxen, Radios, Number-Spinner,
   Range, Progress) – passt sich via --farbe-akzent automatisch an Hell/Dunkel an */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
select,
progress {
    accent-color: var(--farbe-akzent);
    color-scheme: light;
}

[data-thema="dunkel"] input[type="checkbox"],
[data-thema="dunkel"] input[type="radio"],
[data-thema="dunkel"] input[type="range"],
[data-thema="dunkel"] input[type="number"],
[data-thema="dunkel"] input[type="date"],
[data-thema="dunkel"] input[type="time"],
[data-thema="dunkel"] input[type="datetime-local"],
[data-thema="dunkel"] input[type="month"],
[data-thema="dunkel"] input[type="week"],
[data-thema="dunkel"] select,
[data-thema="dunkel"] progress {
    accent-color: var(--farbe-akzent);
    color-scheme: dark;
}

img, svg { display: block; max-width: 100%; }

/* ═══════════════════════════════════════════════════════
   3. LAYOUT – Sidebar + Hauptbereich
   ═══════════════════════════════════════════════════════ */

.cms-layout {
    display: grid;
    grid-template-columns: var(--sidebar-breite) 1fr;
    grid-template-rows: var(--topbar-hoehe) 1fr;
    min-height: 100vh;
}

/* Sidebar */
.cms-sidebar {
    grid-row: 1 / 3;
    background:   var(--bg-sidebar, var(--farbe-hintergrund-karte));
    border-right: 0.5px solid var(--farbe-rahmen);
    display:      flex;
    flex-direction: column;
    position:     sticky;
    top:          0;
    height:       100vh;
    overflow-y:   auto;
}

.cms-sidebar__logo {
    padding:       18px var(--abstand-md) 14px;
    border-bottom: 0.5px solid var(--farbe-rahmen);
    flex-shrink:   0;
}

.cms-sidebar__logo-name {
    font-size:   14px;
    font-weight: 600;
    color:       var(--farbe-text-primaer);
    letter-spacing: 0.01em;
}

.cms-sidebar__logo-sub {
    font-size:  10px;
    color:      var(--farbe-text-tertiaer);
    margin-top: 1px;
}

.cms-sidebar__fuss {
    margin-top:    auto;
    padding:       var(--abstand-sm) var(--abstand-md);
    border-top:    0.5px solid var(--farbe-rahmen);
    flex-shrink:   0;
}

/* Hauptbereich */
.cms-haupt {
    grid-column: 2;
    grid-row:    2;
    overflow-y:  auto;
    padding:     var(--abstand-lg);
}

/* ═══════════════════════════════════════════════════════
   4. TOPBAR
   ═══════════════════════════════════════════════════════ */

.cms-topbar {
    grid-column:   2;
    grid-row:      1;
    height:        var(--topbar-hoehe);
    background:    var(--farbe-hintergrund-karte);
    border-bottom: 0.5px solid var(--farbe-rahmen);
    display:       flex;
    align-items:   center;
    padding:       0 var(--abstand-lg);
    gap:           var(--abstand-sm);
    position:      sticky;
    top:           0;
    z-index:       10;
}

.cms-topbar__titel {
    font-size:   14px;
    font-weight: 500;
    color:       var(--farbe-text-primaer);
    flex:        1;
}

/* Dark/Light Toggle */
.thema-toggle {
    width:        34px;
    height:       34px;
    border-radius: 20px;
    border:       0.5px solid var(--farbe-rahmen-stark);
    background:   var(--farbe-hintergrund-sektion);
    display:      flex;
    align-items:  center;
    justify-content: center;
    cursor:       pointer;
    color:        var(--farbe-text-sekundaer);
    transition:   background 0.15s;
    flex-shrink:  0;
}
.thema-toggle:hover { background: var(--farbe-hintergrund); }
.thema-toggle svg   { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════
   5. NAVIGATION (Sidebar)
   ═══════════════════════════════════════════════════════ */

.nav-sektion { padding: 10px 0 2px; }

.nav-sektion__label {
    font-size:      9px;
    font-weight:    500;
    color:          var(--farbe-text-tertiaer);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding:        0 var(--abstand-md) 5px;
    display:        block;
}

.nav-link {
    display:     flex;
    align-items: center;
    gap:         9px;
    padding:     6px var(--abstand-md);
    font-size:   var(--schrift-gr-sm);
    color:       var(--farbe-text-sekundaer);
    border-left: 2px solid transparent;
    transition:  background 0.12s, color 0.12s;
    text-decoration: none;
}
.nav-link:hover {
    background: var(--farbe-hintergrund-sektion);
    color:      var(--farbe-text-primaer);
    text-decoration: none;
}
.nav-link--aktiv {
    color:            var(--farbe-akzent);
    background:       var(--farbe-akzent-hell);
    border-left-color:var(--farbe-akzent);
    font-weight:      500;
}
.nav-link i { font-size: 15px; flex-shrink: 0; }

/* Tool-Bezeichnung unter Systemeinstellungen */
.nav-tool-name {
    margin:        4px var(--abstand-md) 6px;
    padding:       8px 10px;
    border-radius: var(--radius-md);
    background:    var(--farbe-hintergrund-sektion);
    border:        0.5px solid var(--farbe-rahmen);
}
.nav-tool-name__label {
    font-size:      9px;
    font-weight:    500;
    color:          var(--farbe-text-tertiaer);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    display:        block;
    margin-bottom:  3px;
}
.nav-tool-name__wert {
    font-size:   var(--schrift-gr-sm);
    font-weight: 500;
    color:       var(--farbe-text-primaer);
    display:     flex;
    align-items: center;
    justify-content: space-between;
}
.nav-tool-name__edit {
    font-size: 12px;
    color:     var(--farbe-akzent);
    cursor:    pointer;
}

/* Nutzer-Info im Sidebar-Fuss */
.sidebar-nutzer {
    display:     flex;
    align-items: center;
    gap:         9px;
}
.sidebar-nutzer__avatar {
    width:           30px;
    height:          30px;
    border-radius:   50%;
    background:      var(--farbe-akzent-hell);
    color:           var(--farbe-akzent);
    font-size:       11px;
    font-weight:     500;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.sidebar-nutzer__name {
    font-size:   var(--schrift-gr-sm);
    font-weight: 500;
    color:       var(--farbe-text-primaer);
}

/* ═══════════════════════════════════════════════════════
   6. KOMPONENTEN
   ═══════════════════════════════════════════════════════ */

/* Seitenheader */
.seiten-kopf {
    display:       flex;
    align-items:   flex-start;
    justify-content: space-between;
    margin-bottom: var(--abstand-lg);
    gap:           var(--abstand-md);
}
.seiten-kopf__titel {
    font-size:   18px;
    font-weight: 600;
    color:       var(--farbe-text-primaer);
    line-height: 1.2;
}
.seiten-kopf__sub {
    font-size:  var(--schrift-gr-sm);
    color:      var(--farbe-text-tertiaer);
    margin-top: 2px;
}

/* Karte */
.karte {
    background:    var(--farbe-hintergrund-karte);
    border:        0.5px solid var(--farbe-rahmen);
    border-radius: var(--radius-lg);
    padding:       var(--abstand-md);
    box-shadow:    0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.08);
    position:      relative;
}
.karte::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: inherit;
    background:    none;
    pointer-events: none;
}
[data-thema="dunkel"] .karte {
    box-shadow:    0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.10);
}
[data-thema="dunkel"] .karte::before {
    background:    none;
}
.karte--ohne-polster { padding: 0; overflow: hidden; }

/* ── Stat-Cards: gleiche Fläche wie alle Karten ── */
.dash-stat, .st-card, .cd-card {
    background: var(--farbe-hintergrund-karte);
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.08);
}
[data-thema="dunkel"] .dash-stat,
[data-thema="dunkel"] .st-card,
[data-thema="dunkel"] .cd-card {
    background: var(--farbe-hintergrund-karte);
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.10);
}
.karte__kopf {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--abstand-md);
    border-bottom:   0.5px solid var(--farbe-rahmen);
}
.karte__titel {
    font-size:   var(--schrift-gr-md);
    font-weight: 500;
    color:       var(--farbe-text-primaer);
}

/* Tabelle */
.tabelle-wrapper { overflow-x: auto; }

.tabelle {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--schrift-gr-sm);
}
.tabelle th {
    font-size:      10px;
    font-weight:    500;
    color:          var(--farbe-text-tertiaer);
    text-align:     left;
    padding:        7px var(--abstand-md);
    border-bottom:  0.5px solid var(--farbe-rahmen);
    background:     var(--farbe-hintergrund-sektion);
    white-space:    nowrap;
}
.tabelle td {
    padding:       9px var(--abstand-md);
    border-bottom: 0.5px solid var(--farbe-rahmen);
    color:         var(--farbe-text-primaer);
    vertical-align:middle;
}
.tabelle tr:last-child td { border-bottom: none; }
.tabelle tbody tr:hover td { background: var(--farbe-hintergrund-sektion); }

/* Avatar in Tabelle */
.avatar {
    width:           30px;
    height:          30px;
    border-radius:   50%;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-size:       10px;
    font-weight:     500;
    flex-shrink:     0;
}
.avatar--blau { background: var(--farbe-akzent-hell);  color: var(--farbe-akzent-dunkel); }
.avatar--gruen { background: var(--farbe-erfolg-hell);  color: var(--farbe-erfolg); }
.avatar--gelb { background: var(--farbe-warnung-hell); color: var(--farbe-warnung-text); }
.avatar--grau { background: var(--farbe-hintergrund-sektion); color: var(--farbe-text-sekundaer); }

/* Badges / Pills */
.badge {
    display:       inline-flex;
    align-items:   center;
    gap:           3px;
    font-size:     10px;
    font-weight:   500;
    padding:       2px 8px;
    border-radius: 6px;
    white-space:   nowrap;
}
.badge--blau { background: var(--farbe-akzent-hell);  color: var(--farbe-akzent-dunkel); }
.badge--gruen { background: var(--farbe-erfolg-hell);  color: var(--farbe-erfolg); }
.badge--gelb { background: var(--farbe-warnung-hell); color: var(--farbe-warnung-text); }
.badge--rot { background: var(--farbe-fehler-hell);  color: var(--farbe-fehler); }
.badge--grau { background: var(--farbe-hintergrund-sektion); color: var(--farbe-text-sekundaer); }

/* Buttons */
.btn {
    display:      inline-flex;
    align-items:  center;
    gap:          6px;
    font-size:    var(--schrift-gr-sm);
    font-weight:  500;
    padding:      6px 14px;
    border-radius: 8px;
    border:       0.5px solid transparent;
    cursor:       pointer;
    transition:   background 0.12s, border-color 0.12s;
    text-decoration: none;
    white-space:  nowrap;
}
.btn i { font-size: 15px; }

.btn--primaer {
    background:   var(--farbe-akzent);
    color:        #fff;
    border-color: var(--farbe-akzent-dunkel);
}
.btn--primaer:hover { background: var(--farbe-akzent-dunkel); text-decoration: none; }

.btn--sekundaer {
    background:   var(--farbe-hintergrund-karte);
    color:        var(--farbe-text-primaer);
    border-color: var(--farbe-rahmen-stark);
}
.btn--sekundaer:hover { background: var(--farbe-hintergrund-sektion); text-decoration: none; }

.btn--gefahr {
    background:   var(--farbe-fehler-hell);
    color:        var(--farbe-fehler);
    border-color: rgba(192,57,43,0.3);
}
.btn--gefahr:hover { background: var(--farbe-fehler); color: #fff; text-decoration: none; }

.btn--klein { padding: 4px 10px; font-size: var(--schrift-gr-xs); }
.btn--icon { padding: 5px; }

/* Icon-Buttons (Aktionen in Tabellenzeilen) */
.ico-btn {
    width:         28px;
    height:        28px;
    border-radius: 20px;
    border:        0.5px solid var(--farbe-rahmen);
    background:    var(--farbe-hintergrund-karte);
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    cursor:        pointer;
    color:         var(--farbe-text-sekundaer);
    transition:    background 0.12s;
    font-size:     14px;
}
.ico-btn:hover { background: var(--farbe-hintergrund-sektion); color: var(--farbe-text-primaer); }
.ico-btn--gefahr:hover { background: var(--farbe-fehler-hell); color: var(--farbe-fehler); border-color: rgba(192,57,43,0.3); }
.ico-btn--erfolg { color: var(--farbe-erfolg); border-color: rgba(45,155,78,0.3); }

/* Aktionsgruppe in Tabellenzeile */
.aktionen { display: flex; gap: 4px; align-items: center; }

/* Formulare */
.formular-raster {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--abstand-md);
}
.formular-raster--voll { grid-template-columns: 1fr; }

.feld { display: flex; flex-direction: column; gap: 4px; }
.feld--voll { grid-column: 1 / -1; }

.feld__label {
    font-size:   var(--schrift-gr-xs);
    font-weight: 500;
    color:       var(--farbe-text-sekundaer);
}
.feld__pflicht { color: var(--farbe-fehler); margin-left: 2px; }

.feld__eingabe,
.feld__auswahl,
.feld__textarea {
    font-size:     var(--schrift-gr-sm);
    color:         var(--farbe-text-primaer);
    background:    var(--farbe-hintergrund-karte);
    border:        0.5px solid var(--farbe-rahmen-stark);
    border-radius: 8px;
    padding:       7px 10px;
    width:         100%;
    transition:    border-color 0.12s, box-shadow 0.12s;
}
.feld__eingabe:focus,
.feld__auswahl:focus,
.feld__textarea:focus {
    outline:      none;
    border-color: var(--farbe-akzent);
    box-shadow:   0 0 0 3px rgba(24,95,165,0.12);
}
.feld__textarea { resize: vertical; min-height: 80px; }

.feld__kopf {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}
.feld__link {
    font-size: var(--schrift-gr-xs);
    color:     var(--farbe-akzent);
}

.feld__passwort-wrapper { position: relative; }
.feld__passwort-wrapper .feld__eingabe { padding-right: 38px; }
.feld__sichtbarkeit {
    position:   absolute;
    right:      8px;
    top:        50%;
    transform:  translateY(-50%);
    background: none;
    border:     none;
    cursor:     pointer;
    color:      var(--farbe-text-tertiaer);
    padding:    2px;
}
.feld__sichtbarkeit:hover { color: var(--farbe-text-primaer); }

.feld__hinweis {
    font-size: var(--schrift-gr-xs);
    color:     var(--farbe-text-tertiaer);
}

/* Checkbox-Gruppe */
.checkbox-gruppe { display: flex; flex-direction: column; gap: 6px; }
.checkbox-item { display: flex; align-items: center; gap: 8px; font-size: var(--schrift-gr-sm); }
.checkbox-item input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--farbe-akzent); cursor: pointer; }

/* Filterleiste */
.filter-leiste {
    display:       flex;
    gap:           var(--abstand-sm);
    flex-wrap:     wrap;
    align-items:   flex-end;
    padding:       var(--abstand-sm) var(--abstand-md);
    background:    var(--farbe-hintergrund-sektion);
    border-bottom: 0.5px solid var(--farbe-rahmen);
}
.filter-leiste .feld { min-width: 140px; }

/* Meldungen / Flash-Nachrichten */
.nachricht {
    padding:       10px var(--abstand-md);
    border-radius: 8px;
    font-size:     var(--schrift-gr-sm);
    border:        0.5px solid transparent;
    margin-bottom: var(--abstand-sm);
    display:       flex;
    align-items:   center;
    gap:           8px;
}
.nachricht--erfolg { background: var(--farbe-erfolg-hell); color: var(--farbe-erfolg); border-color: rgba(45,155,78,0.3); }
.nachricht--fehler { background: var(--farbe-fehler-hell); color: var(--farbe-fehler); border-color: rgba(192,57,43,0.3); }
.nachricht--hinweis { background: var(--farbe-info-hell);   color: var(--farbe-info);   border-color: rgba(55,138,221,0.3); }
.nachricht--warnung { background: var(--farbe-warnung-hell);color: var(--farbe-warnung-text); border-color: rgba(245,200,66,0.4); }

/* Pagination */
.pagination {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--abstand-sm) var(--abstand-md);
    font-size:       var(--schrift-gr-xs);
    color:           var(--farbe-text-tertiaer);
    border-top:      0.5px solid var(--farbe-rahmen);
}
.pagination__btns { display: flex; gap: 4px; }

/* Trennlinie */
.trennlinie { border: none; border-top: 0.5px solid var(--farbe-rahmen); margin: var(--abstand-md) 0; }

/* Leerer Zustand */
.leer-zustand {
    text-align: center;
    padding:    var(--abstand-xl) var(--abstand-lg);
    color:      var(--farbe-text-tertiaer);
}
.leer-zustand i    { font-size: 32px; margin-bottom: var(--abstand-sm); }
.leer-zustand p    { font-size: var(--schrift-gr-sm); }

/* ═══════════════════════════════════════════════════════
   7. LOGIN-SEITE
   ═══════════════════════════════════════════════════════ */

.login-seite {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    min-height:       100vh;
    padding:          var(--abstand-lg);
    position:         relative;
    overflow:         hidden;
    background:        #0A0E14;
    background-image:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(29,184,122,.22), transparent 60%),
        radial-gradient(ellipse 50% 50% at 85% 110%, rgba(14,122,80,.20), transparent 55%),
        radial-gradient(ellipse 40% 40% at 10% 90%, rgba(29,184,122,.10), transparent 50%),
        linear-gradient(160deg, #0A0E14 0%, #0C1620 55%, #0A1A14 100%);
}
/* Feines Gitternetz */
.login-seite::before {
    content:    '';
    position:   absolute;
    inset:      -2px;
    background-image:
        linear-gradient(rgba(29,184,122,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,184,122,.06) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
    pointer-events: none;
}
/* Sanfter Lichtschimmer oben */
.login-seite::after {
    content:    '';
    position:   absolute;
    top: -40%; left: 50%;
    width: 120%; height: 80%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(29,184,122,.10), transparent 65%);
    filter: blur(40px);
    pointer-events: none;
}
.login-wrapper {
    position: relative;
    z-index:  1;
    width:     100%;
    max-width: 380px;
    display:   flex;
    flex-direction: column;
    gap:       var(--abstand-md);
}

.login-logo { text-align: center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.login-logo-bild {
    width: 56px; height: 56px; border-radius: 14px;
    box-shadow: 0 6px 24px rgba(29,184,122,.35), 0 0 0 1px rgba(29,184,122,.2);
}
.login-logo-text {
    display:     block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size:   26px;
    font-weight: 700;
    color:       #ffffff;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.login-logo-text .login-logo-akzent { color: #2FD98F; }
.login-logo-sub {
    font-size: var(--schrift-gr-xs);
    color:     rgba(255,255,255,.55);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-card {
    background:    rgba(255,255,255,.92);
    border:        0.5px solid rgba(255,255,255,.3);
    border-radius: var(--radius-lg);
    padding:       var(--abstand-lg);
    box-shadow:    0 8px 32px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(12px);
}
.login-card__titel {
    font-size:     18px;
    font-weight:   600;
    margin-bottom: var(--abstand-md);
    color:         var(--farbe-text-primaer);
}

.login-formular { display: flex; flex-direction: column; gap: var(--abstand-sm); }

.btn--voll { width: 100%; justify-content: center; margin-top: var(--abstand-xs); }

.login-datenschutz {
    font-size:  10px;
    color:      rgba(255,255,255,.75);
    text-align: center;
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.login-datenschutz a {
    color: rgba(255,255,255,.9);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════
   8. UTILITY
   ═══════════════════════════════════════════════════════ */

.text-tertiaer { color: var(--farbe-text-tertiaer); }
.text-klein { font-size: var(--schrift-gr-xs); }
.text-mittel { font-size: var(--schrift-gr-sm); }
.fett { font-weight: 500; }
.abstand-unten { margin-bottom: var(--abstand-md); }
.abstand-oben { margin-top: var(--abstand-md); }
.flex { display: flex; }
.flex-mitte { display: flex; align-items: center; }
.flex-zwischen { display: flex; justify-content: space-between; align-items: center; }
.gap-xs { gap: var(--abstand-xs); }
.gap-sm { gap: var(--abstand-sm); }
.gap-md { gap: var(--abstand-md); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Dark-Mode: Button-Overrides für Cyan-Akzent */
[data-thema="dunkel"] .btn--primaer {
    color: #000;
    border-color: var(--farbe-akzent-dunkel);
}
[data-thema="dunkel"] .nav-link--aktiv {
    color: var(--farbe-akzent);
    background: var(--farbe-akzent-hell);
    border-left-color: var(--farbe-akzent);
}
[data-thema="dunkel"] .badge--blau {
    background: var(--farbe-akzent-hell);
    color: var(--farbe-akzent);
}
[data-thema="dunkel"] .feld__eingabe:focus,
[data-thema="dunkel"] .feld__auswahl:focus {
    border-color: var(--farbe-akzent);
    box-shadow: 0 0 0 3px rgba(0,171,255,.15);
}
[data-thema="dunkel"] a {
    color: var(--farbe-akzent);
}

/* ── Dark Mode: Boxen & Karten ── */
[data-thema="dunkel"] .nachricht--hinweis {
    background: #001F3D;
    color: #2FD98F;
    border-color: rgba(0,171,255,.25);
}
[data-thema="dunkel"] .nachricht--erfolg {
    background: #0F2418;
    color: #4ADE80;
    border-color: rgba(74,222,128,.2);
}
[data-thema="dunkel"] .nachricht--warnung {
    background: #2E2800;
    color: #F5C842;
    border-color: rgba(245,200,66,.25);
}
[data-thema="dunkel"] .nachricht--fehler {
    background: #2A0F0F;
    color: #F87171;
    border-color: rgba(248,113,113,.25);
}
[data-thema="dunkel"] .feld__eingabe,
[data-thema="dunkel"] .feld__auswahl,
[data-thema="dunkel"] .feld__textarea {
    background: #252525;
    border-color: rgba(255,255,255,.12);
    color: #E8E8F2;
}
[data-thema="dunkel"] .filter-leiste {
    background: #1A1A1A;
    border-color: rgba(255,255,255,.06);
}
[data-thema="dunkel"] .tabelle th {
    background: #1A1A1A;
    color: #73726C;
}
[data-thema="dunkel"] .tabelle td {
    color: #E8E8F2;
}
[data-thema="dunkel"] .tabelle tbody tr:hover td {
    background: #252525;
}
[data-thema="dunkel"] select option {
    background: #1B1B23;
    color: #E8E8F2;
}

/* ── Dark Mode: Labels & kleine Texte ── */
[data-thema="dunkel"] .feld__label {
    color: #B4B2A9;
}
[data-thema="dunkel"] label {
    color: #B4B2A9;
}
[data-thema="dunkel"] .nav-sektion__label {
    color: #606878;
}
[data-thema="dunkel"] .seiten-kopf__sub {
    color: #73726C;
}
[data-thema="dunkel"] .feld__hinweis {
    color: #73726C;
}
[data-thema="dunkel"] .text-tertiaer {
    color: #73726C;
}
[data-thema="dunkel"] .karte__titel {
    color: #E8E8F2;
}
[data-thema="dunkel"] th {
    color: #73726C;
}

/* ── Dark Mode: Interaktive Elemente ── */
[data-thema="dunkel"] .ico-btn {
    background: #2E2E3A;
    border-color: rgba(255,255,255,.14);
    color: #B4B2A9;
}
[data-thema="dunkel"] .ico-btn:hover {
    background: #363636;
    color: #E8E8F2;
}
[data-thema="dunkel"] .ico-btn--gefahr {
    color: #F87171;
    border-color: rgba(248,113,113,.35);
    background: #2A1515;
}
[data-thema="dunkel"] .ico-btn--gefahr:hover {
    background: #C0392B;
    color: #fff;
    border-color: #C0392B;
}
[data-thema="dunkel"] .ico-btn--erfolg {
    color: #4ADE80;
    border-color: rgba(74,222,128,.35);
    background: #0F2418;
}
[data-thema="dunkel"] .btn--sekundaer {
    background: #2E2E3A;
    border-color: rgba(255,255,255,.14);
    color: #E8E8F2;
}
[data-thema="dunkel"] .btn--sekundaer:hover {
    background: #363636;
}
[data-thema="dunkel"] .btn--gefahr {
    background: #2A1515;
    color: #F87171;
    border-color: rgba(248,113,113,.3);
}
[data-thema="dunkel"] .btn--gefahr:hover {
    background: #C0392B;
    color: #fff;
}
/* Tabellen-Zeilen im Dark-Mode */
[data-thema="dunkel"] .tabelle td {
    color: #E8E8F2;
    border-color: rgba(255,255,255,.06);
}
[data-thema="dunkel"] .tabelle tr:last-child td {
    border-bottom: none;
}
/* Pagination */
[data-thema="dunkel"] .pagination {
    border-color: rgba(255,255,255,.06);
    color: #73726C;
}
/* Karte Kopf */
[data-thema="dunkel"] .karte__kopf {
    border-color: rgba(255,255,255,.06);
}
/* Filter Dropdowns */
[data-thema="dunkel"] .filter-leiste .feld__eingabe,
[data-thema="dunkel"] .filter-leiste .feld__auswahl,
[data-thema="dunkel"] .filter-leiste select,
[data-thema="dunkel"] .filter-leiste input {
    background: #252525;
    border-color: rgba(255,255,255,.12);
    color: #E8E8F2;
}
/* Thema-Toggle sichtbar */
[data-thema="dunkel"] .thema-toggle {
    background: #2E2E3A;
    border-color: rgba(255,255,255,.14);
    color: #B4B2A9;
}
[data-thema="dunkel"] .thema-toggle:hover {
    background: #363636;
    color: #E8E8F2;
}
/* Sidebar Logo + Fuss */
[data-thema="dunkel"] .cms-sidebar__logo-name {
    color: #E8E8F2;
}
[data-thema="dunkel"] .sidebar-nutzer__name {
    color: #E8E8F2;
}
/* Text in Tabellen-Zellen */
[data-thema="dunkel"] .tabelle .fett {
    color: #E8E8F2;
}
[data-thema="dunkel"] .tabelle .text-klein {
    color: #B4B2A9;
}
[data-thema="dunkel"] .tabelle .text-tertiaer {
    color: #73726C;
}