/*
Teamplan, V0.1 - 2026
(c) 2026 copyright by Frank Schwarz
Alle Rechte vorbehalten, Frank Schwarz; fs@csskoeln.de
$Id: fsv-buero.css 1 17.10.2026 @fs$
Aus der FSV (fsv/assets/css/buero.css) unveraendert uebernommen (Entscheidung 17.10.2026: Oberflaeche strikt wie FSV).
Aenderungen nur in teamplan.css.
*/
/*
*****************************************************************************
FSV - Fahrschulverwaltung, V0.4 - 2026
(c) 2026 copyright by Frank Schwarz
Alle Rechte vorbehalten, Frank Schwarz; fs@csskoeln.de
*****************************************************************************
$Id: buero.css 1 06.10.2026 @fs$
*****************************************************************************
Gestaltung des Buero-Bereichs.

Verbindliche Vorgaben (docs/new2027/21-ui-office-vorgaben.md, 33 und 82):
  - Kopfleiste ueber die ganze Breite in der Farbe --kopfleiste (Einstellungen > Fahrschule > Logo & Darstellung > Kopfleiste):
    links die Marke in der Breite des Menues, rechts davon die Kette, die Schuelersuche, das Kurzdatum und die Standortwahl
  - helle Navigation links, alle Inhalte in weissen Boxen
  - ein Hauptmenueeintrag beginnt EINSCHLIESSLICH Icon 7 px nach aktueller Vorgabe vom
    linken Menuerand (siehe .ebene1-liste > .menue-punkt > .menue-link)
  - kompakte, kontrastreiche Menues: geringe Zeilenhoehe, klare Farben,
    trotzdem ausreichend grosse Klickflaechen
  - hoechstens drei Menueebenen, gestaffelt eingerueckt
  - unten links Profil, darunter "FSV <Release>" und das Copyright
*/

.layout {
    /* Das Menue ist hell: die Variablen der Basis (dunkles Portal-Menue) werden hier ueberschrieben. */
    --menue-flaeche: #FFFFFF;
    --menue-dunkel: #F6F7FB;
    --menue-text: var(--text);
    --menue-text-hell: var(--haupt);
    --menue-aktiv: var(--haupt-hell);
    --menue-breite: 240px;

    display: grid;
    grid-template-columns: var(--menue-breite) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    align-items: stretch;
}

/* ------------------------------------------------------------ Kopfleiste */

.kopfleiste-neu {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: var(--menue-breite) minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    background: var(--kopfleiste);
    color: var(--kopfleiste-text);
    border-bottom: 1px solid var(--linie);
}

.kn-marke {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
/* Die Marke fuellt die ganze Menuebreite: Logo, Titel und Untertitel stehen in der Mitte des Menues (Ende des Menues = Ende der Marke). */
.kn-marke .marke {
    flex: 1 1 auto;
    min-width: 0;
}

/* Rechts der Marke: der Anfang steht genau ueber dem linken Rand der Boxen (die Inhaltsspalte hat 8 px Innenabstand). */
.kn-rest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-width: 0;
    padding: 8px;
}
.kn-kette {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.kopfleiste-neu .kopf-titel,
.kopfleiste-neu .kette-glied,
.kopfleiste-neu .kette-trenner {
    color: var(--kopfleiste-text);
}
.kopfleiste-neu .kette-trenner {
    opacity: .75;
}

.kn-werkzeuge {
    flex: 1 1 420px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 16px;
    min-width: 0;
}
.kn-werkzeuge .kopf-suche {
    flex: 1 1 260px;
    max-width: 640px;
}
/* Datum (Kurzform) mit Trennstrich davor und die Standortwahl stehen auf einer Linie. */
.kn-block {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.kn-datum {
    padding-left: 16px;
    border-left: 1px solid currentColor;
    font-size: 14px;
    white-space: nowrap;
}
.kopfleiste-neu .kopf-standort {
    color: var(--kopfleiste-text);
}
.kopfleiste-neu .kopf-standort-wahl select {
    min-width: 170px;
    max-width: 240px;
}

/* ------------------------------------------------------------ Menue links */

.seitenmenue {
    display: flex;
    flex-direction: column;
    background: var(--menue-flaeche);
    color: var(--menue-text);
    border-right: 1px solid var(--linie);
}

/* Die Marke steht in der Kopfleiste, daher in deren Schriftfarbe. */
.marke {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 8px 10px 7px;
    color: var(--kopfleiste-text);
}
/* Logo und Titel führen immer zur Startseite. */
a.marke { text-decoration: none; }
a.marke:hover .marke-name { text-decoration: underline; }
/* Das Logo steht mittig, Titel und Untertitel darunter. */
.marke-texte {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow-wrap: anywhere;
}
.marke-name {
    font-family: var(--schrift-titel);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .5px;
    color: var(--kopfleiste-text);
}
.marke-unter {
    font-size: 13px;
    color: var(--kopfleiste-text);
}

.menue-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ebene1-liste {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.menue-link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 4px 8px 4px 0;
    color: var(--menue-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
}
.menue-link > i {
    flex: 0 0 18px;
    width: 18px;
    text-align: center;
    font-size: 15px;
}
.menue-link:hover {
    background: var(--menue-aktiv);
    color: var(--menue-text-hell);
}

/* Aktuelle Vorgabe: 2 px mehr als zuvor: der Eintrag der obersten Ebene beginnt einschliesslich
   seines Icons genau 7 px vom linken Rand des Menues. */
.ebene1-liste > .menue-punkt > .menue-link {
    padding-left: 7px;
}

/* Gruppenabstand im Hauptmenü (Vorgabe 07.10.2026): vor dem ersten Punkt jeder neuen Gruppe eine gleich große Lücke, auch im Smartphone-Menü. */
.menue-punkt.ebene1.gruppe-neu { margin-top: 14px; }

.menue-punkt.ebene1.offen > .menue-link,
.menue-punkt.ebene1.aktiv > .menue-link {
    background: var(--menue-aktiv);
    color: var(--menue-text-hell);
}
.menue-punkt.ebene1.aktiv > .menue-link {
    box-shadow: inset 3px 0 0 var(--menue-text-hell);
}

/* Ebene 2 und 3 staffeln sich darunter; das ist von der aktuellen Abstandsvorgabe der
   obersten Ebene ausdruecklich getrennt. */
.ebene2-liste > .menue-punkt > .menue-link {
    padding-left: 24px;
    font-weight: 500;
    min-height: 30px;
}
.ebene3-liste > .menue-punkt > .menue-link {
    padding-left: 41px;
    font-weight: 400;
    min-height: 28px;
    font-size: 13px;
}
.ebene2-liste,
.ebene3-liste {
    background: var(--menue-dunkel);
}
.menue-punkt.ebene2.aktiv > .menue-link,
.menue-punkt.ebene3.aktiv > .menue-link {
    color: var(--menue-text-hell);
    background: var(--menue-aktiv);
    box-shadow: inset 3px 0 0 var(--menue-text-hell);
}
.menue-punkt.ebene2.offen > .menue-link {
    color: var(--menue-text-hell);
}

/* Profil und Abmelden stehen im selben Raster wie die Menuepunkte oben:
   gleicher Abstand links (7 px bis zum Icon), gleiche Icon-Spalte (18 px),
   gleicher Abstand zum Text (9 px), gleiche Schrift und Zeilenhoehe. */
.menue-fuss {
    flex: 0 0 auto;
    padding: 6px 0 8px;
    border-top: 1px solid var(--linie);
}
.profil,
.abmelden-knopf {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 34px;
    margin: 0;
    padding: 4px 8px 4px 7px;
    border: 0;
    background: none;
    color: var(--menue-text);
    font: 600 14px/1.25 var(--schrift-text);
    text-align: left;
}
.profil {
    color: var(--text);
    text-decoration: none;
}
a.profil:hover {
    background: var(--menue-aktiv);
    color: var(--menue-text-hell);
}
.profil-name {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Das Bild ist etwas groesser als die Icon-Spalte, nimmt aber nur ihre Breite ein. */
.profil-bild {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0 -2px;
    border-radius: 50%;
    background: var(--menue-aktiv);
    color: var(--menue-text-hell);
    font-size: 12px;
    flex: 0 0 22px;
}
.profil-foto {
    object-fit: cover;
}
.abmelden {
    margin: 0;
}
.abmelden-knopf {
    cursor: pointer;
    color: #C62828;
}
.abmelden-knopf > i {
    flex: 0 0 18px;
    width: 18px;
    text-align: center;
    font-size: 15px;
}
.abmelden-knopf:hover {
    background: var(--menue-aktiv);
    color: #C62828;
}
.menue-fuss .fussleiste {
    align-items: flex-start;
    padding: 6px 7px 0;
    color: var(--menue-text);
    text-align: left;
    font-size: 10px;
}

/* ------------------------------------------------------------ Inhalt rechts */

.inhalt-spalte {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--box-abstand);
    padding: var(--box-abstand) 8px;
    background: var(--hintergrund);
}

/* Jeder Inhaltsbereich liegt in einer weissen Box - auch Kopf und Begruessung. */
.box {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--box-rundung);
    padding: 12px 16px;
    margin: 0;
}
.box-titel {
    margin: 0 0 8px;
    font-size: 18px;
}
.box-untertitel {
    margin: 20px 0 8px;
    font-size: 16px;
}
/* Ohne Gewicht (:where), damit Abstandsregeln wie .reiter-feld > * + * den oberen Abstand setzen dürfen. */
:where(.box) p {
    margin: 0 0 10px;
}

.kopf-titel {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-family: var(--schrift-titel);
    /* so groß wie das Datum (14 px) plus 2 px, fett: ein großer Titel bringt Unruhe */
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.kopf-titel {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 2px;
    line-height: 1.25;
}
/* Die Kette in der Kopfleiste: der erste Pfeil steht ganz links ohne Einzug, jede weitere Ebene rückt nur um halb so viel ein wie früher. */
.kette-zeile { display: flex; align-items: center; gap: 3px; }
.kette-ebene-1 { padding-left: 0; }
.kette-ebene-2 { padding-left: 1.5px; }
.kette-ebene-3 { padding-left: 3px; }
.kette-ebene-4 { padding-left: 4.5px; }
.kette-glied {
    color: var(--haupt);
    text-decoration: none;
}
.kette-glied:hover {
    text-decoration: underline;
}
.kette-trenner {
    font-size: 13px;
    color: var(--text-gedaempft);
}

.kopf-suche {
    min-width: 0;
    max-width: 420px;
}
.kopf-suche input {
    width: 100%;
}

.kopf-standort {
    font-size: 14px;
    color: var(--text);
}
.kopf-standort-wahl {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
}
.kopf-standort-wahl select { min-width: 190px; max-width: 260px; }

.inhalt {
    display: flex;
    flex-direction: column;
    gap: var(--box-abstand);
}

.start-liste {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.start-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--haupt-hell);
    color: var(--haupt);
    font-weight: 600;
    text-decoration: none;
}
.start-link:hover {
    border-color: var(--haupt);
}

/* ------------------------------------------------------------ Gastseiten */

.gast-seite {
    width: 100%;
    max-width: var(--seitenbreite-anmeldung);
    margin: 0 auto;
    padding: 48px 16px 0;
}
.anmeldebox {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--box-rundung);
    padding: 24px;
}
body.fsv-gast {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.fsv-gast .fussleiste {
    margin-top: auto;
}

/* ------------------------------------------------------------ Schmale Bildschirme */

@media (max-width: 1100px) {
    .layout { --menue-breite: 220px; }
}

/* Smartphone: Marke und Menue-Schalter oben, darunter Kette und Suche untereinander, dann das aufklappbare Menue. */
@media (max-width: 760px) {
    .layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
    }
    .kopfleiste-neu {
        grid-template-columns: minmax(0, 1fr);
    }
    .kopfleiste-neu .marke {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    .kopfleiste-neu .marke-logo {
        max-height: var(--logo-max-hoehe-mobil);
        max-width: 50%;
    }
    .kopfleiste-neu .marke-name {
        font-size: 22px;
    }
    .kn-rest {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-top: 0;
    }
    .kn-werkzeuge {
        flex: 0 0 auto;
        justify-content: flex-start;
    }
    .kn-werkzeuge .kopf-suche {
        flex: 1 1 100%;
        max-width: none;
    }
    .kn-datum {
        padding-left: 0;
        border-left: 0;
    }
    .seitenmenue {
        border-right: 0;
        border-bottom: 1px solid var(--linie);
    }
}

@media (max-width: 580px) {
    .kopf-titel { font-size: 16px; }
    .kopf-suche { max-width: none; }
}

/* Logos dürfen weder die Kopfleiste noch die Inhaltsvorschau sprengen. */
/* Die Breite stellt der Inhaber ein (--logo-breite-*, Einstellungen > Logo & Darstellung); die Höhe ergibt sich aus dem Seitenverhältnis, nach oben begrenzt durch --logo-max-hoehe-*. */
.marke-logo { display: block; flex: 0 0 auto; width: var(--logo-breite-kopfleiste); height: auto; max-width: 100%; max-height: var(--logo-max-hoehe-kopfleiste); margin: 0 auto; object-fit: contain; object-position: center; }
.logo-vorschau { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 12px 0; min-width: 0; }
.logo-vorschau .logo-bild { display: block; width: auto; height: auto; max-width: min(240px,100%); max-height: 120px; object-fit: contain; }
.logo-angaben { min-width: 0; overflow-wrap: anywhere; }

.inhalt-spalte > *, .box { min-width: 0; max-width: 100%; }
.box-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Bewährte Abstände der Karten und Aktionsleisten aus dem Altprojekt. */
.box > h1, .box > h2, .box > h3, .box-kopf > h1, .box-kopf > h2, .box-kopf > h3 { font-size: 18px; margin: 0; }
.box-kopf > h1, .box-kopf > h2, .box-kopf > h3 { margin-right: auto; }
/* Filter und Knopf im Kopf einer Box als Gruppe: bleiben rechts, auch wenn sie in eine zweite Zeile umbrechen (Protokoll). */
.box-kopf > .kopf-rechts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-left: auto; min-width: 0; }
.box > h1 + form, .box > h2 + form, .box > h3 + form,
.box > h1 + p, .box > h2 + p, .box > h3 + p,
.box-kopf + form, .box-kopf + p { margin-top: 16px; }
.box > p { margin-bottom: 12px; font-size: 14px; }
.box > .aktionen { margin: 16px 0; }
.box > .aktionen:last-child { margin-bottom: 0; }
.box .feld-zeile { align-items: flex-end; gap: 12px; }
.box .feld-zeile > .aktionen { margin: 0; align-items: center; }
.box .feld-zeile .feld { flex: 0 1 360px; }
/* Filterzeile: mehrere kurze Felder und der Knopf teilen sich eine Zeile. */
.box .feld-zeile.feld-zeile-kompakt .feld { flex: 1 1 150px; }
.box .feld-zeile.feld-zeile-kompakt > .aktionen { margin-left: auto; }
/* Ein kurzes Feld (Bestaetigungswort, Auswahl) mit seinem Knopf in einer Zeile. */
.box .feld-zeile.feld-zeile-schmal .feld { flex: 0 1 260px; }
/* Zwischenueberschrift in einer Box: Abstand nach oben, auch nach Tabellen und Formularen. */
.box > .box-untertitel { margin-top: 20px; margin-bottom: 10px; }

/* ------------------------------------------------------------ Menue auf dem Smartphone */

/* Der Schalter ist unsichtbar, bleibt aber mit der Tastatur erreichbar. */
.menue-schalter { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menue-knopf { display: none; }
.menue-inhalt { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

@media (max-width: 760px) {
    /* Nur die Marke und der Menueknopf stehen oben; das Menue klappt auf Wunsch auf. */
    .menue-knopf {
        display: inline-flex; align-items: center; justify-content: center;
        flex: 0 0 44px; height: 44px; margin-right: 8px;
        border: 1px solid currentColor; border-radius: 8px;
        color: var(--kopfleiste-text); font-size: 18px; cursor: pointer;
    }
    .menue-knopf:hover { background: transparent; opacity: .8; }
    .menue-schalter:focus-visible ~ .kopfleiste-neu .menue-knopf { outline: 2px solid currentColor; outline-offset: 2px; }
    .menue-schalter:not(:checked) ~ .seitenmenue .menue-inhalt { display: none; }
    .ebene1-liste { overflow-y: visible; }
}
/* Erfolgsmeldungen blenden sich nach 5 Sekunden aus (assets/js/meldung-aus.js). */
.meldung.meldung-weg { opacity: 0; transition: opacity 0.4s ease; }

/* Hinweisboxen und Meldungen kleben nie an Text, Überschrift, Formular oder Tabelle davor und danach: mindestens 12 px Luft. */
:is(.box, .karte):not(.lauf-box) > :not(:is(.meldung, .box-hinweis, [hidden])) + :is(.meldung, .box-hinweis) { margin-top: 12px; }
:is(.box, .karte):not(.lauf-box) > :is(.meldung, .box-hinweis) + :not(:is(.meldung, .box-hinweis, [hidden])) { margin-top: 12px; }
:is(.box, .karte):not(.lauf-box) > :is(.meldung, .box-hinweis) + :is(.meldung, .box-hinweis) { margin-top: 8px; }
/* Hinweisbox nach einem Formular: Abstand, sie klebt sonst am Knopf. */
.box > form + .meldung, .box > form + .box-hinweis, .box > .tabelle-rahmen + .meldung, .box > .tabelle-rahmen + .box-hinweis { margin-top: 16px; }

/* Logo und Name auf den Anmeldeseiten */
.anmelde-logo { display: block; width: min(var(--logo-breite-anmeldung), var(--anmeldebox-innen-anmeldung), calc(100vw - var(--anmeldebox-abzug-anmeldung))); height: auto; max-height: var(--logo-max-hoehe-anmeldung); margin: 0 auto 10px; object-fit: contain; }
.anmelde-name { margin: 0 0 6px; text-align: center; font-size: 13px; color: var(--text-gedaempft); }
.marke-platz { display: contents; }

/* Zähler am Menüpunkt (fällige Aufgaben) */
.menue-text { flex: 1 1 auto; min-width: 0; }
.menue-zaehler { flex: 0 0 auto; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: #C62828; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center; }

/* Hinweis mit Knopf rechts (zum Beispiel "Keine aktuelle Sicherung") */
.meldung > .knopf { margin-left: auto; flex: none; }

/* Datensicherung: Fortschritt des Laeufers (Sichern, Pruefen, Wiederherstellen) */
/* Hinweis, Prozent, Balken und Werte stehen mit Luft untereinander. */
.lauf-box { display: flex; flex-direction: column; gap: 16px; }
.lauf-box > .meldung { margin: 0; }
.lauf-balken { display: block; width: 100%; height: 18px; border: 0; border-radius: 9px; overflow: hidden; background: var(--haupt-hell); accent-color: var(--haupt); appearance: none; }
.lauf-balken::-webkit-progress-bar { background: var(--haupt-hell); border-radius: 9px; }
.lauf-balken::-webkit-progress-value { background: var(--haupt); border-radius: 9px; }
.lauf-balken::-moz-progress-bar { background: var(--haupt); border-radius: 9px; }
.lauf-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; }
.lauf-werte .karten-wert { padding: 4px 8px; }
.lauf-prozent { font-size: 28px; font-weight: 700; color: var(--haupt); line-height: 1.2; }
.lauf-status[hidden] { display: none; }
.lauf-werte .karten-wert { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 2px; }
.lauf-werte .karten-wert > span { font-size: 12px; font-weight: 600; }
.lauf-werte .karten-wert > strong { text-align: left; }

/* Fahrtenbuch: Detailseite einer Fahrt – alle Werte gleich: Beschriftung oben, Wert linksbündig darunter (kurze und lange Werte sehen gleich aus). */
.fb-detail .karten-wert { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 2px; }
.fb-detail .karten-wert > span { font-size: 12px; font-weight: 600; }
.fb-detail .karten-wert > strong { text-align: left; }

/* Einstellungen > Logo & Darstellung > Kopfleiste: Vorauswahl-Farben als Felder (Farbwert je Klasse, keine Stilangaben im Markup). */
.farbfelder { display: flex; flex-wrap: wrap; gap: 8px; }
.farbfeld input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.farbfeld label {
    display: inline-flex; align-items: center; gap: 8px; min-height: var(--feld-hoehe); padding: 0 12px 0 8px;
    border: 1px solid var(--rahmen-eingabe); border-radius: 8px; background: var(--flaeche); color: var(--text); font-size: 14px; cursor: pointer;
}
.farbfeld label:hover { border-color: var(--haupt); }
.farbfeld input[type="radio"]:checked + label { border-color: var(--haupt); box-shadow: 0 0 0 2px var(--haupt); font-weight: 600; }
.farbfeld input[type="radio"]:focus-visible + label { outline: 2px solid var(--haupt); outline-offset: 2px; }
.farbprobe { display: inline-block; width: 22px; height: 22px; border: 1px solid var(--linie); border-radius: 50%; }
.farbprobe-000000 { background: #000000; }
.farbprobe-001a64 { background: #001A64; }
.farbprobe-000e70 { background: #000E70; }
.farbprobe-1f6b45 { background: #1F6B45; }
.farbprobe-c62828 { background: #C62828; }
.farbprobe-ffffff { background: #FFFFFF; }
.farbfelder-eigen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.farbfelder-eigen label { margin: 0; font-size: 14px; }
.farbfelder-eigen input[type="text"] { width: 120px; }

/* ------------------------------------------------------------ Bild eines Mitarbeiters (Liste, Kalenderspalte, Kopf; Auftrag 13.10.2026) */
.mitarbeiter-bild { flex: none; border-radius: 50%; object-fit: cover; vertical-align: middle; background: var(--haupt-hell); }
.mitarbeiter-bild-liste { width: 28px; height: 28px; margin-right: 8px; }
.mitarbeiter-bild-kopf { width: 20px; height: 20px; margin-right: 6px; }
.mitarbeiter-bild-mittel { width: 40px; height: 40px; margin-right: 4px; }
.mitarbeiter-bild-gross { width: 64px; height: 64px; }

/* Standort wählen nach der Anmeldung (Auftrag 14.10.2026): eine große Karte je Standort, mindestens 44 px hoch. */
/* Einstiegsseite nach der Anmeldung: die Standorte stehen untereinander, ohne Menü. */
.standort-wahl-liste { display: flex; flex-direction: column; gap: var(--box-abstand); }
.fsv-gast .standort-wahl-form { max-width: 560px; margin: 0 auto; }
/* Haken "Auswahl merken": Linienprüfung zeigte 2 px Versatz zur Textzeile (einzeiliger Haken: Haken und Text mittig auf Feldhöhe). */
.standort-wahl-form .feld > .kaestchen { align-items: center; padding-top: 0; }
.standort-wahl-form .feld > .kaestchen > input[type="checkbox"] { margin-top: 0; }
.standort-wahl-karte { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 64px; padding: 12px 16px; text-align: left; font-size: 16px; font-weight: 700; }
.standort-wahl-karte i { color: var(--haupt); font-size: 20px; }
.geraet-standort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }