/*
 * Gemeinsame Gestaltung aller Seiten.
 *
 * Vorher stand das CSS fuenfmal in den einzelnen PHP-Dateien - "font-family: Segoe UI" allein
 * war fuenffach definiert, Karten- und Formularstile ebenso. Eine Designaenderung bedeutete
 * damit fuenf Dateien anfassen, mit der ueblichen Folge, dass eine davon vergessen wird.
 *
 * Es gibt zwei Seitenformen, die sich bei body, input und button widersprechen. Sie werden
 * ueber eine Klasse am body-Element getrennt:
 *
 *   body.auth  zentrierte Formularseiten (Anmeldung, 2FA-Einrichtung, Passwortwechsel)
 *   body.app   Anwendungsseiten mit Kopfzeile (Auswertung, Benutzerverwaltung)
 *
 * Zusatzklassen fuer die wenigen echten Abweichungen einzelner Seiten:
 *   .box.narrow   schmalere Box (Anmeldung, ohne Untertitel)
 *   body.setup2fa Abstaende der 2FA-Einrichtung (Beschriftungen ueber den Feldern)
 *   body.admin    Benutzerverwaltung (kompaktere Kopfzeile, Tabellen oben ausgerichtet)
 *
 * ALLE FARBEN STEHEN IN VARIABLEN, keine einzige mehr direkt in einer Regel. Nur so laesst
 * sich ein zweites Thema anlegen, ohne jede Regel zu verdoppeln: Der dunkle Modus setzt
 * ausschliesslich die Variablen unten neu, die Regeln selbst bleiben unberuehrt.
 */

/* ---------- Farbwerte: helles Thema ---------- */

:root {
    /* Flaechen */
    --grund:          #f4f6f8;   /* Seitenhintergrund */
    --flaeche:        #ffffff;   /* Karten, Kacheln, Eingabefelder */
    --flaeche-leise:  #f4f6f8;   /* abgesetzte Flaechen, z.B. der Geheimnis-Kasten */
    --linie:          #d8dee6;   /* Rahmen von Eingabefeldern und Knoepfen */
    --linie-leise:    #eeeeee;   /* Trennlinien in Tabellen */
    --schatten:       rgba(0, 0, 0, 0.1);

    /*
     * Sieben Textstufen sind mehr, als eine Gestaltung normalerweise braucht. Sie stehen hier,
     * weil das helle Thema vorher genau diese sieben Grauwerte enthielt und eine Umstellung auf
     * Variablen sein Aussehen nicht veraendern soll. Das dunkle Thema unten kommt bewusst mit
     * weniger Abstufungen aus - auf dunklem Grund liegen feine Graustufen zu dicht beieinander,
     * um noch unterscheidbar zu sein.
     */
    --text:            #222222;  /* Fliesstext */
    --text-kraeftig:   #1a2332;  /* Ueberschriften und Zahlen in den Kacheln */
    --text-absatz:     #444444;  /* Absaetze auf den Formularseiten */
    --text-leise:      #555555;  /* Feldbeschriftungen */
    --text-leiser:     #666666;  /* Tabellenkoepfe, Kachelbeschriftung */
    --text-still:      #888888;  /* Hinweise und Notizen */
    --text-sehr-still: #999999;  /* Fusszeile, Unterzeile der Kacheln */
    --pfeil:           #aaaaaa;  /* Sortierpfeile in Tabellenkoepfen */

    /* Hausfarbe: die Limette aus dem Logo. Nur als Flaeche, nie als Schrift - auf hellem
       Grund ist sie nicht lesbar. */
    --marke:           #c3d600;
    --auf-marke:       #26292c;

    /* Bedienelemente */
    --akzent:          #2c7be5;
    --akzent-stark:    #1a68d1;  /* beim Ueberfahren */
    --auf-akzent:      #ffffff;
    --neutral:         #eeeeee;  /* zweitrangiger Knopf */
    --auf-neutral:     #333333;

    /* Meldungen */
    --alarm:           #b3261e;
    --alarm-hell:      #fde8e8;
    --warnung:         #a15c00;
    --warnung-hell:    #fff4e0;
    --gutmeldung:      #1c7a3c;
    --gut-hell:        #e3f7e9;

    /* Kennzeichen */
    --rolle-admin:      #3730a3;
    --rolle-admin-hell: #e0e7ff;
    --entfallen-hell:   #e8e8e8;

    /*
     * Trainingsstand. Dieselben fuenf Farben tragen das Verlaufsdiagramm, die Kennzeichen in
     * der Tabelle und die aktiven Filterknoepfe - nur dann steht ein Balken im Diagramm
     * erkennbar fuer denselben Zustand wie das Kennzeichen daneben.
     */
    --stand-sehr-gut:      #2e9e5b;
    --stand-gut:           #8bc34a;
    --stand-mittel:        #f2a93b;
    --stand-kritisch:      #b3261e;
    --stand-ausgeschieden: #888888;
    --auf-stand:           #ffffff;

    /* Diagramme (werden von report.js ausgelesen) */
    --diagramm-text:    #666666;
    --diagramm-gitter:  rgba(0, 0, 0, 0.08);
    --diagramm-klick:   #e5622c;
    --diagramm-flaeche: #ffffff;   /* Punktfuellung fuer den laufenden Zeitraum */

    /* Sieben Phishing-Level, von hell nach dunkel */
    --level-1: #dbe7f6;
    --level-2: #b9d0ee;
    --level-3: #93b6e4;
    --level-4: #6b9bd9;
    --level-5: #4a80c9;
    --level-6: #2c66b0;
    --level-7: #1a4c8b;
}

/* ---------- Farbwerte: dunkles Thema ---------- */

/*
 * Zweimal derselbe Block, und das mit Absicht. Der erste greift, wenn das Betriebssystem dunkel
 * eingestellt ist UND der Benutzer nicht ausdruecklich "hell" gewaehlt hat. Der zweite greift,
 * wenn er ausdruecklich "dunkel" gewaehlt hat - unabhaengig vom Betriebssystem. Eine gemeinsame
 * Regel liesse sich dafuer nicht schreiben: @media und Attributwaehler lassen sich in CSS nicht
 * mit ODER verbinden.
 */

@media (prefers-color-scheme: dark) {
    :root:not([data-thema="hell"]) {
        --grund:          #15171a;
        --flaeche:        #1e2228;
        --flaeche-leise:  #262b32;
        --linie:          #3b424a;
        --linie-leise:    #2f353c;
        --schatten:       rgba(0, 0, 0, 0.45);

        --text:            #e6e8ea;
        --text-kraeftig:   #f2f4f6;
        --text-absatz:     #c6cbd0;
        --text-leise:      #b2b8be;
        --text-leiser:     #9aa1a8;
        --text-still:      #8a9197;
        --text-sehr-still: #7b8288;
        --pfeil:           #6d747a;

        /* Die Limette bleibt unveraendert - sie ist die Hausfarbe und traegt auf dunklem
           Grund sogar besser als auf hellem. */
        --marke:           #c3d600;
        --auf-marke:       #26292c;

        --akzent:          #5b9df0;
        --akzent-stark:    #7ab0f5;
        --auf-akzent:      #10141a;
        --neutral:         #2f353c;
        --auf-neutral:     #d0d4d8;

        --alarm:           #f0908a;
        --alarm-hell:      #3a1f1e;
        --warnung:         #e0a458;
        --warnung-hell:    #332618;
        --gutmeldung:      #7fc894;
        --gut-hell:        #1c2b20;

        --rolle-admin:      #a9b6f0;
        --rolle-admin-hell: #242b40;
        --entfallen-hell:   #2a2f35;

        --stand-sehr-gut:      #4fb877;
        --stand-gut:           #a3d45f;
        --stand-mittel:        #e8b55c;
        --stand-kritisch:      #ef8880;
        --stand-ausgeschieden: #8b9299;
        --auf-stand:           #14181c;

        --diagramm-text:    #9aa1a8;
        --diagramm-gitter:  rgba(255, 255, 255, 0.09);
        --diagramm-klick:   #f08a5c;
        --diagramm-flaeche: #1e2228;

        --level-1: #22364d;
        --level-2: #2b4767;
        --level-3: #355880;
        --level-4: #416b9b;
        --level-5: #5081b6;
        --level-6: #6397cd;
        --level-7: #82b0dd;
    }
}

:root[data-thema="dunkel"] {
    --grund:          #15171a;
    --flaeche:        #1e2228;
    --flaeche-leise:  #262b32;
    --linie:          #3b424a;
    --linie-leise:    #2f353c;
    --schatten:       rgba(0, 0, 0, 0.45);

    --text:            #e6e8ea;
    --text-kraeftig:   #f2f4f6;
    --text-absatz:     #c6cbd0;
    --text-leise:      #b2b8be;
    --text-leiser:     #9aa1a8;
    --text-still:      #8a9197;
    --text-sehr-still: #7b8288;
    --pfeil:           #6d747a;

    --marke:           #c3d600;
    --auf-marke:       #26292c;

    --akzent:          #5b9df0;
    --akzent-stark:    #7ab0f5;
    --auf-akzent:      #10141a;
    --neutral:         #2f353c;
    --auf-neutral:     #d0d4d8;

    --alarm:           #f0908a;
    --alarm-hell:      #3a1f1e;
    --warnung:         #e0a458;
    --warnung-hell:    #332618;
    --gutmeldung:      #7fc894;
    --gut-hell:        #1c2b20;

    --rolle-admin:      #a9b6f0;
    --rolle-admin-hell: #242b40;
    --entfallen-hell:   #2a2f35;

    --stand-sehr-gut:      #4fb877;
    --stand-gut:           #a3d45f;
    --stand-mittel:        #e8b55c;
    --stand-kritisch:      #ef8880;
    --stand-ausgeschieden: #8b9299;
    --auf-stand:           #14181c;

    --diagramm-text:    #9aa1a8;
    --diagramm-gitter:  rgba(255, 255, 255, 0.09);
    --diagramm-klick:   #f08a5c;
    --diagramm-flaeche: #1e2228;

    --level-1: #22364d;
    --level-2: #2b4767;
    --level-3: #355880;
    --level-4: #416b9b;
    --level-5: #5081b6;
    --level-6: #6397cd;
    --level-7: #82b0dd;
}

/*
 * color-scheme sagt dem Browser, in welcher Richtung er das faerben soll, was ihm selbst
 * gehoert: Bildlaufleisten, das aufgeklappte Menue eines <select>, der Rahmen eines
 * Eingabefelds. Ohne diese Angabe bleiben genau diese Teile hell und stechen als weisse
 * Flaechen aus einer dunklen Seite heraus.
 */
:root { color-scheme: light; }

@media (prefers-color-scheme: dark) {
    :root:not([data-thema="hell"]) { color-scheme: dark; }
}

:root[data-thema="dunkel"] { color-scheme: dark; }
:root[data-thema="hell"]   { color-scheme: light; }

/* ---------- Grundlage ---------- */

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    background: var(--grund);
    color: var(--text);
}

/* ---------- Umschalter fuer die Darstellung ---------- */

/*
 * Die Sinnbilder sind gezeichnete Linien, keine Flaechen: so nehmen sie die Schriftfarbe des
 * Knopfes an und werden beim Ueberfahren mit dunkler.
 */
.thema-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--flaeche);
    color: var(--text-leiser);
    cursor: pointer;
    flex: none;
    text-decoration: none;
}

.thema-knopf:hover {
    background: var(--grund);
    color: var(--text);
}

[hidden] { display: none !important; }

.thema-knopf .sinnbild {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Auf den zentrierten Formularseiten gibt es kein Band, in das der Knopf passte.
   Er steht deshalb frei in der oberen rechten Ecke. */
.thema-ecke {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10;
}

/* ---------- Markenband ---------- */

/*
 * Logo links, Bereiche daneben, rechts wer angemeldet ist und die Handgriffe dazu. Darunter
 * die Hausfarbe als Linie. Aufbau wie bei Mothership.
 *
 * Das Band traegt die KARTENFARBE und nicht die Hausfarbe: Das Logo ist fuer hellen Grund
 * gestaltet, auf einer limettenen Flaeche wuerde der weisse Rand der Bilddatei als Kasten
 * sichtbar. Die Hausfarbe erscheint deshalb nur als Linie darunter und als Flaeche hinter
 * dem offenen Menuepunkt.
 */
.markenband {
    border-bottom: 3px solid var(--marke);
    background: var(--flaeche);
}

/* Dieselbe Breite und derselbe seitliche Abstand wie der Seiteninhalt darunter, damit Logo
   und Ueberschrift auf einer Flucht stehen. */
.markenband-inhalt {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 32px;
}

/* Hoehe statt Breite vorgeben: So wirken hoch- und breitformatige Logodateien gleich gross,
   ohne verzerrt zu werden. */
.logo {
    display: block;
    height: 34px;
    width: auto;
}

.menue {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    /* Schiebt das Menue vom Logo weg nach rechts. */
    margin-left: auto;
}

.menue-punkt {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    color: var(--text-leise);
    font-size: 14px;
    font-weight: 550;
    text-decoration: none;
}

.menue-punkt:hover { background: var(--grund); color: var(--text); }
.menue-punkt.aktiv { background: var(--marke); color: var(--auf-marke); font-weight: 650; }

.bandkonto {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 14px;
    border-left: 1px solid var(--linie);
    /* Haelt den Block rechts - auch in der zweiten Zeile, wenn das Band umgebrochen hat. */
    margin-left: auto;
}

/* Adresse und Rollenschild sollen zusammenbleiben, auch wenn das Band umbricht. */
.benutzer {
    color: var(--text-leise);
    font-size: 14px;
    white-space: nowrap;
}

.rolle {
    font-size: 12px;
    padding: 1px 6px;
    border: 1px solid var(--linie);
    border-radius: 10px;
}

/* ---------- Formularseiten (zentrierte Box) ---------- */

body.auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

body.auth .box {
    background: var(--flaeche);
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 1px 3px var(--schatten);
    width: 380px;
}

body.auth .box.narrow { width: 340px; }

/* Auf den zentrierten Seiten steht das Logo IM Kasten statt in einem Band darueber - ein
   Band ueber einem einzelnen, mittig stehenden Kasten wirkt wie ein abgeschnittener Kopf. */
body.auth .kastenlogo { height: 30px; margin: 0 auto 22px; }

body.auth h1 { font-size: 20px; margin: 0 0 8px; color: var(--text-kraeftig); }
body.auth .box.narrow h1 { margin-bottom: 20px; }
body.auth p { font-size: 14px; color: var(--text-absatz); line-height: 1.5; }

body.auth label {
    display: block;
    font-size: 13px;
    color: var(--text-leise);
    margin-bottom: 4px;
}

body.auth input {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--linie);
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 16px;
    box-sizing: border-box;
    background: var(--flaeche);
    color: var(--text);
}

body.auth button:not(.thema-knopf) {
    width: 100%;
    padding: 10px;
    background: var(--akzent);
    color: var(--auf-akzent);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

body.auth button:not(.thema-knopf):hover { background: var(--akzent-stark); }

/* Beschriftungen stehen hier ueber den Feldern und brauchen Luft nach oben; das Eingabefeld
   traegt deshalb keinen eigenen Abstand nach unten. */
body.setup2fa label { margin: 16px 0 4px; }
body.setup2fa input { margin-bottom: 0; }
body.setup2fa button:not(.thema-knopf) { margin-top: 16px; }

/* Der QR-Code wird als SVG auf weissem Grund gezeichnet. Im dunklen Thema braucht er einen
   eigenen hellen Rahmen - ein Code auf dunklem Grund wird von vielen Kameras nicht gelesen. */
body.auth #qrcode {
    display: flex;
    justify-content: center;
    margin: 16px 0;
    background: #ffffff;
    padding: 12px;
    border-radius: 6px;
}

body.auth .secret {
    font-family: monospace;
    background: var(--flaeche-leise);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    letter-spacing: 1px;
    word-break: break-all;
    text-align: center;
}

body.auth .who { font-size: 13px; color: var(--text-still); margin: 0 0 20px; }

body.auth .back {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    color: var(--akzent);
    text-decoration: none;
    text-align: center;
}

/* ---------- Anwendungsseiten (Kopfzeile + Inhalt) ---------- */

/*
 * Der Seitenkopf traegt seit dem Markenband nur noch Ueberschrift, Mandanten- und
 * Zeitraumwahl. Benutzer, Bereiche und Handgriffe sind ins Band gewandert, und damit gibt es
 * keinen Grund mehr fuer einen dunklen Balken: Er stand vorher fuer "hier oben ist die
 * Bedienung" - diese Aufgabe hat jetzt das Band.
 */
body.app header {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 32px 0;
    background: transparent;
    color: var(--text);
}
body.app header h1 { margin: 0; font-size: 26px; font-weight: 650; color: var(--text-kraeftig); }
body.app header p { margin: 6px 0 0; color: var(--text-leise); font-size: 14px; }
body.app header a { color: var(--akzent); text-decoration: none; font-size: 14px; }

body.app main { max-width: 1100px; margin: 0 auto; padding: 24px 32px; }

body.app .card {
    background: var(--flaeche);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px var(--schatten);
}

body.app .card h2 { margin-top: 0; font-size: 16px; color: var(--text-kraeftig); }

body.app button:not(.thema-knopf) {
    padding: 6px 12px;
    background: var(--akzent);
    color: var(--auf-akzent);
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

body.app button.danger { background: var(--alarm); color: var(--auf-akzent); }
body.app button.secondary { background: var(--neutral); color: var(--auf-neutral); }

/* Auch die Datumsfelder der Zeitraumwahl - sonst bleiben sie als weisse Kaesten in einer
   dunklen Kopfzeile stehen. */
body.app input[type=text],
body.app input[type=email],
body.app input[type=password],
body.app input[type=date] {
    padding: 7px 9px;
    border: 1px solid var(--linie);
    border-radius: 6px;
    font-size: 14px;
    background: var(--flaeche);
    color: var(--text);
}

/* Benutzerverwaltung: kompaktere Kopfzeile, schmalerer Inhalt, Tabellenzellen oben ausgerichtet
   (die Zeilen enthalten mehrzeilige Formulare). */
body.admin header { padding: 24px 32px 0; }
body.admin main { max-width: 1000px; }
body.admin .card { margin-bottom: 24px; }
body.admin th, body.admin td { vertical-align: top; }

/* ---------- Gemeinsame Bausteine ---------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie-leise); vertical-align: middle; }
th { color: var(--text-leiser); font-weight: 600; }

select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--linie);
    font-size: 14px;
    background: var(--flaeche);
    color: var(--text-kraeftig);
}

.note { font-size: 12px; color: var(--text-still); margin-top: 8px; }
.hint { font-size: 12px; color: var(--text-still); margin-top: 12px; line-height: 1.5; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Trainingsstand (Auswertung) */
.badge.great { background: var(--stand-sehr-gut); color: var(--auf-stand); }
.badge.ok { background: var(--gut-hell); color: var(--gutmeldung); }
.badge.warn { background: var(--warnung-hell); color: var(--warnung); }
.badge.bad { background: var(--alarm-hell); color: var(--alarm); }
.badge.left { background: var(--entfallen-hell); color: var(--text-leise); }
/* Kontozustand (Benutzerverwaltung) */
.badge.admin { background: var(--rolle-admin-hell); color: var(--rolle-admin); }
.badge.viewer { background: var(--gut-hell); color: var(--gutmeldung); }
.badge.inactive { background: var(--neutral); color: var(--text-still); }
.badge.locked { background: var(--alarm-hell); color: var(--alarm); }
.badge.pending { background: var(--warnung-hell); color: var(--warnung); }

/* Meldungen: auf den Formularseiten etwas kompakter als in der Anwendung. */
.error { background: var(--alarm-hell); color: var(--alarm); padding: 8px 10px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
body.setup2fa .error { margin-top: 12px; margin-bottom: 0; }

.msg { border-radius: 6px; margin-bottom: 16px; }
body.auth .msg { padding: 8px 10px; font-size: 13px; }
body.app .msg { padding: 10px 12px; font-size: 14px; }
.msg.ok { background: var(--gut-hell); color: var(--gutmeldung); }
.msg.err { background: var(--alarm-hell); color: var(--alarm); }
.msg.warn { background: var(--warnung-hell); color: var(--warnung); line-height: 1.5; }

/* ---------- Auswertung ---------- */

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.card.full { grid-column: 1 / -1; }

/* Spaltenzahl muss zur Anzahl der Kacheln in report.php passen: Eine Kachel mehr als Spalten
   rutscht allein in eine zweite Reihe. */
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }
.kpi-tile { background: var(--flaeche); border-radius: 8px; padding: 16px 20px; box-shadow: 0 1px 3px var(--schatten); }
.kpi-tile .value { font-size: 28px; font-weight: 700; color: var(--text-kraeftig); }
.kpi-tile .label { font-size: 13px; color: var(--text-leiser); margin-top: 4px; }
.kpi-tile .sub { font-size: 12px; color: var(--text-sehr-still); margin-top: 2px; }

th.sortable { cursor: pointer; user-select: none; }
/* Namen nicht umbrechen: ein zweizeiliger Name macht die Zeile hoch, und die uebrigen
   Zellen wirken dann gegenueber der ersten Zeile verrutscht. */
#employeeTableBody td:first-child { white-space: nowrap; }
/* Breite Tabellen scrollen in ihrem eigenen Kasten. Ohne das laeuft die Mitarbeitertabelle
   bei schmalem Fenster ueber den Kartenrand hinaus und die letzte Spalte wird abgeschnitten -
   gemessen bei 1024px Fensterbreite. Beim Drucken wieder aufheben, sonst fehlt im Ausdruck,
   was im Kasten rechts ausserhalb liegt. */
.table-scroll { overflow-x: auto; }
th.sortable:hover { color: var(--akzent); }
th.sortable .sort-arrow { font-size: 10px; color: var(--pfeil); margin-left: 3px; }
th.sortable.sorted .sort-arrow { color: var(--akzent); }

.toggle-btn {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--linie);
    background: var(--flaeche);
    color: var(--text-leise);
    font-size: 13px;
    cursor: pointer;
}
.toggle-btn.active { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }

/* Aktive Status-Filter in der Farbe des jeweiligen Status (gleiche Farben wie im
   Verlaufsdiagramm), damit auf einen Blick erkennbar ist, wonach gefiltert wird. */
.status-filter-btn.active[data-status="great"] { background: var(--stand-sehr-gut);      border-color: var(--stand-sehr-gut);      color: var(--auf-stand); }
.status-filter-btn.active[data-status="ok"]    { background: var(--stand-gut);           border-color: var(--stand-gut);           color: var(--auf-stand); }
.status-filter-btn.active[data-status="warn"]  { background: var(--stand-mittel);        border-color: var(--stand-mittel);        color: var(--auf-stand); }
.status-filter-btn.active[data-status="bad"]   { background: var(--stand-kritisch);      border-color: var(--stand-kritisch);      color: var(--auf-stand); }
.status-filter-btn.active[data-status="left"]  { background: var(--stand-ausgeschieden); border-color: var(--stand-ausgeschieden); color: var(--auf-stand); }

/* ---------- Benutzerverwaltung ---------- */

.checkbox-list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0; }
.checkbox-list label { font-size: 13px; font-weight: normal; display: flex; align-items: center; gap: 4px; }
form.inline { display: inline; }
.row-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }

/* ---------- Druckansicht ---------- */

@media print {
    /*
     * Ausdrucke sind immer hell, unabhaengig vom gewaehlten Thema. Ein dunkles Thema auf Papier
     * kostet Toner und wird schlecht lesbar; ausserdem drucken die meisten Browser Flaechen-
     * farben gar nicht mit, sodass helle Schrift auf weissem Papier landete.
     *
     * Deshalb hier die hellen Werte noch einmal - sie ueberschreiben beide Thema-Bloecke oben,
     * weil @media print zuletzt steht und dieselbe Spezifitaet hat.
     */
    :root, :root[data-thema="dunkel"], :root[data-thema="hell"] {
        --grund:          #ffffff;
        --flaeche:        #ffffff;
        --flaeche-leise:  #f4f6f8;
        --linie:          #cccccc;
        --linie-leise:    #eeeeee;
        --schatten:       transparent;

        --text:            #000000;
        --text-kraeftig:   #000000;
        --text-absatz:     #333333;
        --text-leise:      #333333;
        --text-leiser:     #444444;
        --text-still:      #555555;
        --text-sehr-still: #666666;
        --pfeil:           #aaaaaa;

        --marke:           #c3d600;
        --auf-marke:       #26292c;

        --akzent:          #2c7be5;
        --akzent-stark:    #1a68d1;
        --auf-akzent:      #ffffff;
        --neutral:         #eeeeee;
        --auf-neutral:     #333333;

        --alarm:           #b3261e;
        --alarm-hell:      #fde8e8;
        --warnung:         #a15c00;
        --warnung-hell:    #fff4e0;
        --gutmeldung:      #1c7a3c;
        --gut-hell:        #e3f7e9;

        --rolle-admin:      #3730a3;
        --rolle-admin-hell: #e0e7ff;
        --entfallen-hell:   #e8e8e8;

        --stand-sehr-gut:      #2e9e5b;
        --stand-gut:           #8bc34a;
        --stand-mittel:        #f2a93b;
        --stand-kritisch:      #b3261e;
        --stand-ausgeschieden: #888888;
        --auf-stand:           #ffffff;

        color-scheme: light;
    }

    /* Fuer ein archivierbares Audit-/Management-Dokument: Bedienelemente ausblenden,
       Kartenlayout entzerren (Browser-Druck kann Grid-Spalten schlecht umbrechen) und alle
       Mitarbeiterzeilen zeigen statt nur der aktuell per JS sichtbaren Seite/Filterung. */
    .no-print { display: none !important; }
    .thema-ecke, .thema-knopf, .markenband { display: none !important; }
    body { background: #fff; }
    body.app header { background: #fff !important; color: #000 !important; padding: 0 0 12px; }
    body.app header h1, body.app header p { color: #000 !important; }
    .grid { display: block; }
    .table-scroll { overflow: visible; }
    .kpi-grid { display: block; }
    .kpi-tile, .card { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; margin-bottom: 16px; }
    #employeeTableBody tr { display: table-row !important; }
    .toggle-group { display: none; }
}