/*
Teamplan, V0.1 - 2026
(c) 2026 copyright by Frank Schwarz
Alle Rechte vorbehalten, Frank Schwarz; fs@csskoeln.de
$Id: teamplan.css 3 17.10.2026 @fs$
Nur was die FSV nicht hat. Grundlage sind die unveraenderten FSV-Stilblaetter fsv-basis.css, fsv-buero.css, fsv-karten.css,
fsv-kalender.css und fsv-kalenderblatt.css (Entscheidung 17.10.2026: Oberflaeche strikt wie FSV). Hier stehen die
Teamplan-Farben (Kopfleiste und Menue weiss, Blau nur als Schrift und Akzent) und eigene Bausteine (Matrix, Glocke, Setup).
*/

:root {
  --kopfleiste: #FFFFFF;
  --kopfleiste-text: var(--haupt);
  --hintergrund: #EAF6FE;
  --schrift: var(--schrift-text);
  --abstand-knoepfe: 16px;   /* vor jeder Knopfreihe, systemweit gleich (wie FSV 82-formulare-abstand) */
  --icon-abstand: 8px;
  --tipp-flaeche: 44px;
  --loeschen: #C62828;
}
/* Hintergrund umschaltbar (Einstellungen > Darstellung) */
html[data-hintergrund="grau"] { --hintergrund: #F6F7FB; }
html[data-hintergrund="weiss"] { --hintergrund: #FFFFFF; }

/* Kopfleiste: Glocke und Benutzer rechts */
.kn-block .glocke { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--kopfleiste-text); text-decoration: none; font-size: 17px; }
.kn-block .glocke:hover, .kn-block .glocke:focus-visible { color: var(--haupt-hover); }
.glocke-zahl { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #C62828; color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Anmeldeseiten ohne Menue */
body.ohne-menue .mitte { max-width: 440px; margin: 0 auto; padding: 48px 16px 16px; display: flex; flex-direction: column; gap: var(--box-abstand); }
body.ohne-menue .mitte:has(.fs-schritte) { max-width: 760px; }
.marke-anmeldung { display: flex; justify-content: center; }
.anmeldebox > .anmelde-name { margin: 0 0 10px; text-align: center; font-size: 28px; }

/* Knopfreihen: wie FSV .aktionen; Abstand nach oben und unten nie kleiner als --abstand-knoepfe */
.aktionen.links { justify-content: flex-start; }
.box > :is(.aktionen, form) + :not(.aktionen), .box > * + form { margin-top: var(--abstand-knoepfe); }
.box-kopf + * { margin-top: var(--abstand-knoepfe); }
.hinweis-klein { font-size: 12px; color: var(--text-gedaempft); margin: 0; }
.abschnitt { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; flex: 1 1 100%; }
.abschnitt > .gruppe-titel { flex: 1 1 100%; margin: 0; }
.abschnitt > .feld.kaestchen-feld { flex: 0 0 auto; }
.abschnitt + .abschnitt { margin-top: var(--abstand-knoepfe); }
.feld > :is(input, select, textarea, .passwort-feld) ~ :is(.knopf, button:not(.passwort-icon)) { margin-top: var(--abstand-knoepfe); }

/* Formulare wie FSV (karten-formular, karten-zeile): Felder nebeneinander; alles, was kein Feld ist, nimmt die ganze Zeile. */
.karten-zeile > :not(.feld, input[type="hidden"]) { flex: 1 1 100%; }
.karten-zeile > .feld.kaestchen-feld { flex: 1 1 100%; justify-content: flex-start; min-height: 0; }
.karten-zeile > .feld:has(textarea) { flex: 1 1 100%; }

/* Terminarten-Farben (Pillen und Matrix) */
.pille.urlaub   { background: var(--erfolg-flaeche);  color: var(--erfolg);  border-color: #B5DEC6; }
.pille.krank    { background: var(--fehler-flaeche);  color: var(--fehler);  border-color: #F3B8B4; }
.pille.feiertag { background: #EDE9F6; color: #4B3A8C; border-color: #CFC6EA; }
.pille.frei     { background: var(--warnung-flaeche); color: var(--warnung); border-color: #F5CFA0; }
.pille.schule   { background: var(--haupt-hell);      color: var(--haupt);   border-color: #C5CAE8; }
.pille.privat   { background: var(--linie-zeile);     color: var(--text-gedaempft); border-color: var(--linie-stark); }

.matrix-rahmen { overflow-x: auto; max-width: 100%; }
.matrix { border-collapse: collapse; font-size: 12px; }
.matrix th, .matrix td { border: 1px solid var(--linie); padding: 2px 4px; text-align: center; min-width: 28px; height: 28px; }
.matrix thead th { background: var(--tabellenkopf); color: var(--haupt); }
.matrix .matrix-name { position: sticky; left: 0; background: var(--flaeche); text-align: left; white-space: nowrap; min-width: 140px; z-index: 1; }
.matrix .summe { background: var(--tabellenkopf); font-weight: 700; min-width: 44px; }
.matrix .wochenende { background: var(--linie-zeile); }
.matrix .heute { outline: 2px solid var(--haupt); outline-offset: -2px; }
.matrix td.urlaub { background: var(--erfolg-flaeche); color: var(--erfolg); font-weight: 700; }
.matrix td.krank { background: var(--fehler-flaeche); color: var(--fehler); font-weight: 700; }
.matrix td.feiertag { background: #EDE9F6; color: #4B3A8C; font-weight: 700; }
.matrix td.frei { background: var(--warnung-flaeche); color: var(--warnung); font-weight: 700; }
.matrix td.schule { background: var(--haupt-hell); color: var(--haupt); font-weight: 700; }
.matrix td.privat { background: var(--linie-zeile); color: var(--text-gedaempft); font-weight: 700; }
.matrix td.offen { border-style: dashed; }
.monats-navigation { display: flex; gap: var(--knopf-abstand); align-items: center; flex-wrap: wrap; }

/* Zwei-Faktor */
.qr { max-width: 240px; margin: 0; }
.qr svg { width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 8px; }
.codes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.codes li { background: var(--linie-zeile); border-radius: 8px; padding: 8px 12px; font-size: 16px; }

/* Datensicherung (Laeufer) */
.formular-zeile { display: inline-flex; margin: 0; }

/* Einrichtung (wie FSV firstsetup): Schrittleiste, Pruefliste, Anleitung */
.fs-schritte { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0; }
.fs-schritt { display: flex; align-items: center; gap: var(--icon-abstand); color: var(--text-gedaempft); font-size: 14px; }
.fs-schritt a { display: inline-flex; align-items: center; gap: var(--icon-abstand); color: inherit; text-decoration: none; }
.fs-schritt a:hover .fs-schritt-text, .fs-schritt a:focus-visible .fs-schritt-text { text-decoration: underline; }
.fs-schritt-nummer { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--linie-stark); background: var(--flaeche); font-weight: 600; }
.fs-schritt-aktiv { color: var(--haupt); font-weight: 600; }
.fs-schritt-aktiv .fs-schritt-nummer { background: var(--haupt); border-color: var(--haupt); color: #fff; }
.fs-schritt-fertig .fs-schritt-nummer { background: var(--erfolg-flaeche); border-color: var(--erfolg); color: var(--erfolg); }
.fs-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-zeile); }
.fs-zeile { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linie-zeile); }
.fs-zeile-hinweis { grid-column: 1 / -1; font-size: 13px; color: var(--text-gedaempft); }
.fs-marke { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.fs-marke-ok { background: var(--erfolg-flaeche); color: var(--erfolg); }
.fs-marke-fehlt { background: var(--fehler-flaeche); color: var(--fehler); }
.fs-marke-warnung { background: var(--warnung-flaeche); color: var(--warnung); }
.fs-marke-info { background: var(--haupt-hell); color: var(--haupt); }
.fs-anleitung { margin: 0; padding-left: 22px; }
.fs-anleitung li { margin: 4px 0; }

/* Passwortfelder mit Auge (aus der FSV, passwort.css) */
.passwort-feld { display: flex; position: relative; width: 100%; }
.passwort-feld input { width: 100%; padding-right: 44px; }
.passwort-icon { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 40px; border: 0; border-radius: 4px; color: var(--haupt); background: #fff; cursor: pointer; }
.passwort-icon:hover, .passwort-icon:active, .passwort-icon[aria-pressed="true"] { color: #fff; background: var(--haupt); }
.passwort-icon:focus-visible { outline: 3px solid var(--haupt); outline-offset: 2px; }
.passwort-icon[hidden] { display: none; }
.eingabe-mit-knopf { display: flex; align-items: center; gap: var(--knopf-abstand); }
.eingabe-mit-knopf > :is(input, .passwort-feld) { flex: 1 1 auto; min-width: 0; }
.eingabe-mit-knopf > .knopf { flex: 0 0 auto; white-space: nowrap; }

@media print {
  .kopfleiste-neu, .seitenmenue, .monats-navigation, .aktionen { display: none !important; }
  .layout { display: block; }
  .box { border: 0; padding: 0; break-inside: avoid; }
  body { background: #fff; }
  .matrix-rahmen { overflow: visible; }
}

/* Bereich administration (aus der FSV, signatur.css: Testmail-Zeile) */
.testen-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--knopf-abstand); }
.testen-zeile .feld { flex: 1 1 260px; min-width: 0; }

/* Bereich Einstellungen */
/* Darstellung: Logo auf der Anmeldeseite wie FSV .anmelde-logo (Breite und Hoechsthoehe nur aus stil.php, nie groesser als die Box innen). */
.marke-anmeldung .marke-logo { 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; }
/* Vorschau der weissen Kopfleiste mit Linie (Entscheidung 17.10.2026). */
.logo-umgebung-kopfleiste { border-bottom: 1px solid var(--linie); }

/* Bereich Kalender */
/* Terminarten-Farben als k-art-Varianten (wie FSV .k-art-* in kalender.css: nur Variablen fuer Raster, Chips und Legende). */
.k-art-urlaub   { --k-rand: #1F6B45; --k-flaeche: #E2F3E9; }
.k-art-krank    { --k-rand: #C62828; --k-flaeche: #FDE8E7; }
.k-art-feiertag { --k-rand: #4B3A8C; --k-flaeche: #EDE9F6; }
.k-art-frei     { --k-rand: #C25E00; --k-flaeche: #FFEFD9; }
.k-art-schule   { --k-rand: #1565C0; --k-flaeche: #E3EEFF; }
.k-art-privat   { --k-rand: #6E7488; --k-flaeche: #ECEEF3; }
.k-art-einsatz  { --k-rand: #000E70; --k-flaeche: #E6E8F6; }
.k-art-entwurf  { --k-rand: #8A90A2; --k-flaeche: #FFFFFF; }
.k-termin.k-art-entwurf, .kb-chip.k-art-entwurf { border-style: dashed; }
.k-leg[class*="k-art-"] { padding: 1px 8px; border: 1px solid var(--k-rand); border-left-width: 4px; border-radius: 6px; background: var(--k-flaeche); }
.kb-aus { display: none; }
/* Matrix im FSV-Tabellenstil: Kopf wie .tabelle th, Wochenende wie kb-sa/kb-so, Feiertag gestrichelt wie kb-feiertag, Sonntag/Feiertag rot. */
.k-matrix-rahmen { overflow-x: auto; }
.tabelle.k-matrix { width: auto; min-width: 100%; font-size: 12px; }
.tabelle.k-matrix th, .tabelle.k-matrix td { padding: 4px 3px; min-width: 26px; height: 30px; text-align: center; vertical-align: middle; border-left: 1px solid var(--linie-zeile); hyphens: manual; white-space: nowrap; }
.tabelle.k-matrix tbody tr:nth-child(even) { background: transparent; }
.tabelle.k-matrix tbody tr { border-bottom: 1px solid var(--linie-zeile); }
.k-matrix .k-matrix-name { position: sticky; left: 0; z-index: 1; min-width: 150px; text-align: left; background: var(--flaeche); color: var(--text); font-weight: 600; }
.k-matrix thead .k-matrix-name { background: var(--tabellenkopf); color: var(--haupt); }
.k-matrix .kb-sa { background: #FBFBFD; }
.k-matrix .kb-so { background: var(--hintergrund); }
.k-matrix th.kb-so, .k-matrix th.kb-feiertag { color: var(--sonntag); }
.k-matrix .kb-feiertag { background: #F1F2F5; }
.k-matrix .kb-heute { box-shadow: inset 0 0 0 2px var(--haupt); }
.k-matrix .summe { background: var(--tabellenkopf); font-weight: 700; min-width: 48px; }
.k-matrix td.urlaub, .k-matrix td.krank, .k-matrix td.feiertag, .k-matrix td.frei, .k-matrix td.schule, .k-matrix td.privat { padding: 3px 1px; }
.k-balken { display: block; padding: 3px 4px; border: 1px solid var(--k-rand); border-left-width: 4px; border-radius: 6px; background: var(--k-flaeche); color: #1B2230; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.k-matrix td.urlaub .k-balken { --k-rand: #1F6B45; --k-flaeche: #E2F3E9; }
.k-matrix td.krank .k-balken { --k-rand: #C62828; --k-flaeche: #FDE8E7; }
.k-matrix td.feiertag .k-balken { --k-rand: #4B3A8C; --k-flaeche: #EDE9F6; }
.k-matrix td.frei .k-balken { --k-rand: #C25E00; --k-flaeche: #FFEFD9; }
.k-matrix td.schule .k-balken { --k-rand: #1565C0; --k-flaeche: #E3EEFF; }
.k-matrix td.privat .k-balken { --k-rand: #6E7488; --k-flaeche: #ECEEF3; }
.k-matrix td.offen .k-balken { border-style: dashed; }
.k-matrix-neu { display: block; min-height: 22px; border-radius: 4px; cursor: cell; }
.k-matrix-neu:hover, .k-matrix-neu:focus-visible { background: var(--haupt-hell); outline: 1px dashed var(--haupt); }

/* Bereich Personal, Anträge, Konten, Standorte, Auswertungen, Start (wörtlich aus FSV fsv/assets/css/personal.css, konto.css, auswertungen.css) */
.abw-zaehler { display: inline-block; margin-left: 6px; 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; }
.abw-box > .box-kopf > .knopf-primaer { margin-left: auto; }
.abw-form { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--knopf-abstand); align-items: center; margin: 0; }
.abw-form input[type="text"] { flex: 1 1 100%; min-width: 0; }
.abw-entscheidung { display: block; min-width: 230px; }
.abw-aktionen { align-items: center; }
.abw-vertrag { display: block; margin-top: 4px; }
td.spalte-aktionen .abw-entscheidung { flex-wrap: wrap; }
.abw-aktion { display: block; }
.konto-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.box > .konto-kacheln { margin-bottom: 12px; }
.konto-kachel { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); min-width: 0; }
.konto-kachel-titel { font-size: 14px; font-weight: 600; color: var(--text); }
.konto-zahl { font-family: 'Roboto Slab', serif; font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--haupt); overflow-wrap: anywhere; text-align: center; }
.konto-kachel-info { font-size: 14px; color: var(--text); }
.konto-kachel-info:empty { display: none; }
.konto-kachel.konto-gut { background: var(--erfolg-flaeche); border-color: #B5DEC6; }
.konto-kachel.konto-gut .konto-zahl { color: var(--erfolg); }
.konto-kachel.konto-knapp { background: var(--warnung-flaeche); border-color: #F5CFA0; }
.konto-kachel.konto-knapp .konto-zahl { color: var(--warnung); }
.konto-kachel.konto-fehlt { background: var(--fehler-flaeche); border-color: #F3B8B4; }
.konto-kachel.konto-fehlt .konto-zahl { color: var(--fehler); }
.aw-wahl { margin: 12px 0 0; }
.aw-wahl-felder { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.aw-wahl-felder .feld { flex: 0 1 200px; min-width: 150px; }
.aw-wahl-felder .feld input[type="date"], .aw-wahl-felder .feld select, .aw-wahl-felder .feld input[type="search"] { width: 100%; }
.aw-wahl-felder .aw-feld-knopf { flex: 0 0 auto; min-width: 0; margin-left: auto; }
.tabelle td .aw-zusatz { display: block; font-size: 14px; color: var(--text-gedaempft); }
.start-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--box-abstand); align-items: stretch; }
.start-kacheln > .box { min-width: 0; margin: 0; }
.start-kacheln .box-kopf > h2 { margin-right: 0; }
.start-kacheln .box-kopf > .knopf:first-of-type { margin-left: auto; }
.start-kachel { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.start-kachel > .box-kopf { margin-bottom: 8px; }
.start-kachel .start-zahl { font-family: 'Roboto Slab', serif; font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--haupt); }
.start-kachel .start-zahl.start-warn { color: var(--fehler); }
.start-kachel .start-text { margin: 0 0 8px; font-size: 14px; color: var(--text); }
/* Zeilen einer Kachel in festen Spalten (Wunsch 17.10.2026): alle Zeilen teilen sich dieselben Spaltenbreiten (Subgrid) */
.start-liste-zeilen { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; margin: 0; padding: 0; list-style: none; }
.start-liste-zeilen > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; column-gap: 16px; padding: 6px 8px; font-size: 14px; color: var(--text); }
.start-liste-zeilen .start-zeit { font-weight: 600; white-space: nowrap; }
.start-liste-zeilen .start-was { min-width: 0; overflow-wrap: anywhere; text-align: left; }
.start-liste-zeilen .start-rechts { color: var(--text-gedaempft); text-align: right; white-space: nowrap; }
@media (max-width: 840px) {
    .konto-kacheln { grid-template-columns: 1fr 1fr; }
    .aw-wahl-felder .feld { flex: 1 1 140px; }
    .start-kacheln { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .konto-kacheln { grid-template-columns: 1fr; }
}

/* Bereich Anträge: Farbe Homeoffice (HO, Terminart mit pille = homeoffice; Aufbau wie die übrigen Terminarten-Farben oben) */
.pille.homeoffice { background: #E0F4F3; color: #00695C; border-color: #A7DCD7; }
.k-art-homeoffice { --k-rand: #00796B; --k-flaeche: #E0F4F3; }
.matrix td.homeoffice { background: #E0F4F3; color: #00695C; font-weight: 700; }
.k-matrix td.homeoffice { padding: 3px 1px; }
.k-matrix td.homeoffice .k-balken { --k-rand: #00796B; --k-flaeche: #E0F4F3; }
/* Live-Suche (wortgleich aus FSV schueler.css) */
.live-suche { position: relative; }
.live-suche input { width: 100%; }
.kopf-filter .live-suche { width: 220px; max-width: 100%; }
.suche-treffer {
    position: absolute; top: 100%; left: 0; min-width: 100%; width: max-content; max-width: min(480px, 90vw); z-index: 40;
    margin: 4px 0 0; padding: 4px; list-style: none; background: var(--flaeche); color: var(--text);
    border: 1px solid var(--linie-stark); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 14, 112, .16);
    max-height: 70vh; overflow-y: auto; text-align: left;
}
.suche-zeile { display: flex; align-items: center; gap: 6px; border-radius: 6px; }
.suche-link { flex: 1 1 auto; display: block; min-width: 0; padding: 6px 10px; border-radius: 6px; color: var(--text); text-decoration: none; }
.suche-zeile:hover, .suche-link.gewaehlt { background: var(--haupt-hell); }
.suche-link:hover { color: var(--text); }
.suche-haupt { display: block; font-weight: 600; color: var(--haupt); }
.suche-zusatz { display: block; color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
.suche-knoepfe { display: inline-flex; gap: 6px; padding-right: 6px; }
.suche-hinweis { padding: 6px 10px; color: var(--text); font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.ansicht-klapp .suche-treffer { width: 100%; min-width: 0; max-width: 100%; }
.suche-foto { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; }
.suche-treffer [hidden], .suche-treffer[hidden] { display: none !important; }

/* Reiter: Symbol und Text immer mit Abstand wie FSV .reiter-fest */
.reiter-knopf { gap: var(--icon-abstand); }
/* Offene Antraege: Entscheidung bleibt in ihrer Zelle (Grund oben, Knoepfe nebeneinander darunter) */
td.spalte-aktionen .abw-entscheidung { min-width: 0; width: 200px; white-space: normal; }
td.spalte-aktionen .abw-form { justify-content: flex-start; }
td.spalte-aktionen .abw-form input[type="text"] { width: 100%; }

/* Infoboxen ueberall hellblau (Entscheidung 17.10.2026): Flaeche wie der Hintergrund "Himmel", Rahmen hellblau, Schrift Blau */
:root { --info-flaeche: #EAF6FE; --info-rahmen: #B6DCF5; }
.meldung-info, .box-hinweis { background: var(--info-flaeche); border-color: var(--info-rahmen); border-left-color: var(--haupt); }

/* Hintergrund-Wahl als Auswahlknoepfe wie FSV ampel-wahl/prio-wahl, mit Farbfeld */
.hintergrund-feld { display: inline-block; width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--linie-stark); }
.hintergrund-feld.hintergrund-weiss { background: #FFFFFF; }
.hintergrund-feld.hintergrund-himmel { background: #EAF6FE; }
.hintergrund-feld.hintergrund-grau { background: #F6F7FB; }

/* Wochenzeiten (FSV zeiten-tabelle): je Zeitraum eine Zeile, Standortauswahl daneben */
.zeiten-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 2px 0; }
.zeiten-ort { width: auto; min-width: 160px; }
.zeiten-zweiter > summary { margin: 4px 0; }

/* Geburtstagskalender: Party-Chip */
.k-art-geburtstag { --k-rand: #C2185B; --k-flaeche: #FCE4EC; }
.kb-chip.k-art-geburtstag i { color: #C2185B; }

/* Was auf eine Tabelle folgt (Hinweis, Text, Formular), haelt immer Abstand (Wunsch 17.10.2026, systemweit) */
.tabelle-rahmen + *, table.tabelle + *, .zeiten-tabelle + * { margin-top: var(--abstand-knoepfe); }

/* Ansicht als Mitarbeiter in der Kopfleiste: Einschalten gruen, aktiv roter Block mit rotem Ausschalten */
.ansicht-pille { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.ansicht-pille summary { list-style: none; cursor: pointer; }
.ansicht-pille summary::-webkit-details-marker { display: none; }
.ansicht-pille .knopf { height: 32px; padding: 0 12px; gap: var(--icon-abstand); font-size: 13px; border-radius: 999px; }
.knopf.knopf-gruen { background: #2E7D32; border-color: #2E7D32; color: #FFFFFF; }
.knopf.knopf-rot { background: #C62828; border-color: #FFFFFF; color: #FFFFFF; }
.ansicht-aktiv { padding: 3px 4px 3px 12px; border-radius: 999px; background: #C62828; color: #FFFFFF; font-size: 13px; font-weight: 600; }
.ansicht-aktiv .ansicht-name { display: inline-flex; align-items: center; gap: var(--icon-abstand); white-space: nowrap; }
.ansicht-aktiv .knopf.still { background: #FFFFFF; color: #C62828; border-color: #FFFFFF; }
.ansicht-form { margin: 0; display: inline-flex; }
.ansicht-klapp { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 300px; margin: 0; padding: 12px; background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.ansicht-klapp input[type="search"] { width: 100%; }
.ansicht-wechsel { position: relative; }

/* Bereich Personal: Assistent Neue Person und Alter (aus FSV fsv/assets/css/schueler.css übernommen) */
.alter-rest { color: var(--text-gedaempft); }
.alter-ausgabe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; min-height: 24px; color: var(--text); font-size: 14px; }
.ma-alter { color: var(--text); font-size: 14px; }
.hinweisband { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0 16px; padding: 12px 16px; background: var(--haupt-hell); border: 1px solid #C5CAE8; border-left: 4px solid var(--haupt); border-radius: 8px; color: var(--haupt); font-size: 14px; line-height: 1.45; }
.hinweisband[hidden] { display: none; }
.hinweisband i { flex: 0 0 auto; margin-top: 2px; font-size: 16px; }
.hinweisband p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.schritte { display: block; margin: 0 0 16px; }
.schritte-liste { display: flex; margin: 0; padding: 0; list-style: none; }
.schritt { position: relative; flex: 1 1 0; min-width: 0; }
.schritt + .schritt::before { content: ""; position: absolute; top: 21px; left: -50%; width: 100%; height: 2px; background: var(--linie-stark); }
.schritt-erledigt + .schritt::before { background: var(--erfolg); }
.schritt-knopf { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 44px; margin: 0; padding: 6px 4px; border: 0; background: none; font: 400 14px/1.3 var(--schrift-text); color: var(--text); text-align: center; }
button.schritt-knopf, a.schritt-knopf { cursor: pointer; text-decoration: none; }
.schritt-kreis { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid var(--linie-stark); border-radius: 50%; background: var(--flaeche); color: var(--text); font-size: 14px; font-weight: 700; }
.schritt-haken { display: none; font-size: 14px; }
button.schritt-knopf:hover .schritt-kreis, button.schritt-knopf:focus-visible .schritt-kreis, a.schritt-knopf:hover .schritt-kreis, a.schritt-knopf:focus-visible .schritt-kreis { border-color: var(--haupt); }
.schritt-erledigt .schritt-kreis { background: var(--erfolg-flaeche); border-color: var(--erfolg); color: var(--erfolg); }
.schritt-erledigt .schritt-nr { display: none; }
.schritt-erledigt .schritt-haken { display: inline; }
.schritt-knopf.aktiv .schritt-kreis { background: var(--haupt); border-color: var(--haupt); color: #FFFFFF; }
.schritt-knopf.aktiv .schritt-nr { display: inline; }
.schritt-knopf.aktiv .schritt-haken { display: none; }
.schritt-knopf.aktiv .schritt-name { font-weight: 700; color: var(--haupt); }
.schritt-name { min-width: 0; overflow-wrap: break-word; }
.schritt-name .pille { margin-left: 4px; }
.schritt-aus .schritt-knopf { cursor: not-allowed; color: var(--text-gedaempft); }
.schritt-aus .schritt-kreis { background: var(--tabellenkopf); color: var(--text-gedaempft); }
.schritte-text { margin: 8px 0 0; color: var(--text); font-size: 14px; font-weight: 600; }
@media (max-width: 1000px) {
    .schritte-liste { padding-bottom: 24px; }
    .schritt-name { display: none; }
    .schritt-knopf.aktiv .schritt-name { display: block; position: absolute; top: 46px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 160px; font-size: 13px; line-height: 1.2; }
    .schritt-name .pille { display: none; }
    .schritt:first-child .schritt-knopf.aktiv .schritt-name { left: 0; transform: none; }
    .schritt:last-child .schritt-knopf.aktiv .schritt-name { left: auto; right: 0; transform: none; text-align: right; }
}

/* Kalender > Woche: der Sonntag halb so breit wie die anderen Tage (wie im Kalenderblatt) */
.k-woche { max-width: 100%; overflow-x: auto; }
.k-woche .tabelle-rahmen { overflow-x: visible; }
.k-woche table.tabelle { table-layout: fixed; width: 100%; min-width: 760px; }
.k-woche table.tabelle th:first-child { width: 150px; }
.k-woche table.tabelle th { white-space: normal; }
.k-woche table.tabelle th:last-child { width: 7.5%; }
.k-woche table.tabelle td { white-space: normal; overflow-wrap: anywhere; }

/* Auswahllisten: Eintraege abwechselnd weiss und hellgrau, besser lesbar (Wunsch 17.10.2026, systemweit) */
select option { background: #FFFFFF; color: var(--text); }
select option:nth-child(even) { background: #F1F2F5; }

/* Darstellung > Anwendung > Menue: Bereiche durch dieselbe Linie trennen wie ueber dem Namen unten (schaltbar) */
[data-menue-linien] .ebene1-liste > .menue-punkt.ebene1 + .menue-punkt.ebene1 { border-top: 1px solid var(--linie); padding-top: 4px; margin-top: 4px; }

/* Smartphone: breite Tabellen scrollen in ihrem Rahmen, die Seite selbst nie seitlich */
.tabelle-rahmen { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Vorleser-Texte in Tabellenzellen bleiben im Scrollrahmen (sonst wird die ganze Seite breit) */
.tabelle td:not(.k-matrix-name), .tabelle th:not(.k-matrix-name) { position: relative; }

/* Tabellenzeilen abwechselnd weiss und hellgrau, auch in sortierbaren Listen (Entscheidung 17.10.2026, Q11) */
.tabelle tbody tr:nth-child(even), .tabelle.liste-aktiv tbody tr:nth-child(even) { background: #F1F2F5; }
.tabelle tbody tr:nth-child(odd) { background: #FFFFFF; }
.tabelle.k-matrix tbody tr:nth-child(even) td:not(.kb-sa):not(.kb-so):not(.kb-feiertag) { background: #F6F7FB; }

/* Sonntage und Feiertage immer rot (Entscheidung 17.10.2026): Kopfzellen, Tageszahlen, Datum in Listen */
th.kb-so, th.kb-feiertag, td.kb-so, td.kb-feiertag, td.kb-so a, td.kb-feiertag a,
.kb-wt.kb-so, .kb-wt.kb-feiertag, .kb-tag.kb-so .kb-nr, .kb-tag.kb-feiertag .kb-nr, .k-spalte.k-rot .k-name, .k-tag-text.k-rot { color: var(--sonntag); }

/* Vor jeder Knopfreihe immer --abstand-knoepfe (16 px): im FSV-Formular (Flex mit 12 px Luecke) fehlen 4 px, sonst voller Abstand */
.karten-formular > :is(.aktionen, .knopf-reihe) { margin-top: calc(var(--abstand-knoepfe) - 12px); }
:is(.box, .karten-flach, .karte, form:not(.karten-formular), .abschnitt) > * + :is(.aktionen, .knopf-reihe) { margin-top: var(--abstand-knoepfe); }
.box.anmeldebox > * + :is(.aktionen, .knopf-reihe), .anmeldebox form > * + :is(.aktionen, .knopf-reihe) { margin-top: var(--abstand-knoepfe); }
:is(.box, .karte):not(.lauf-box) > :is(.meldung, .box-hinweis) + :is(.aktionen, .knopf-reihe) { margin-top: var(--abstand-knoepfe); }

/* hidden verbirgt immer, auch bei Bausteinen mit eigener display-Regel (z. B. .meldung) */
[hidden] { display: none !important; }

/* Kalenderseiten: auf dem Smartphone im Hochformat Hinweis zum Drehen ins Querformat (Wunsch 17.10.2026) */
.drehen-layer { display: none; }
@media (orientation: portrait) and (max-width: 767px) {
    html:not([data-drehen-weg]) .drehen-layer { display: flex; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 14, 112, .55); }
    html:not([data-drehen-weg]) body:has(.drehen-layer) { overflow: hidden; }
}
.drehen-karte { max-width: 340px; padding: 24px 16px; border-radius: 12px; background: var(--flaeche); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.drehen-symbol { font-size: 56px; color: var(--haupt); animation: drehen-zeigen 2s ease-in-out infinite; }
.drehen-titel { margin: 16px 0 8px; font-size: 20px; color: var(--haupt); }
.drehen-text { margin: 0; color: var(--text); }
.drehen-karte .knopf { margin-top: var(--abstand-knoepfe); width: 100%; justify-content: center; }
@keyframes drehen-zeigen { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .drehen-symbol { animation: none; transform: rotate(-90deg); } }

/* Smartphone: Menue fuer den Finger (Wunsch 17.10.2026) - jede Tippflaeche mindestens 48 px hoch, groessere Schrift und Symbole */
@media (max-width: 760px) {
    .menue-knopf { flex: 0 0 48px; width: 48px; height: 48px; font-size: 22px; }
    .ebene1-liste > .menue-punkt > .menue-link,
    .ebene2-liste > .menue-punkt > .menue-link,
    .menue-fuss .profil,
    .menue-fuss .abmelden-knopf { min-height: 48px; padding-top: 10px; padding-bottom: 10px; font-size: 16px; gap: 12px; }
    .ebene1-liste > .menue-punkt > .menue-link > i,
    .ebene2-liste > .menue-punkt > .menue-link > i,
    .menue-fuss .abmelden-knopf > i { flex: 0 0 24px; width: 24px; font-size: 18px; text-align: center; }
    .ebene2-liste > .menue-punkt > .menue-link { padding-left: 24px; }
    .menue-punkt.ebene1.gruppe-neu { margin-top: 8px; }
    .menue-fuss .profil-bild { width: 28px; height: 28px; flex: 0 0 28px; }
    .fussleiste-datenschutz { display: inline-block; padding: 12px 0; font-size: 14px; }
    .ebene1-liste > .menue-punkt + .menue-punkt { border-top: 1px solid var(--linie-zeile); }
}

/* Gleiche Spalten an gleicher Stelle (Wunsch 18.10.2026): Tabellen mit gleichem Aufbau untereinander bekommen feste Spaltenbreiten */
.tabelle.tabelle-fest { table-layout: fixed; width: 100%; }
.tabelle.tabelle-fest th:first-child { width: 50%; }
.tabelle.tabelle-fest th:not(:first-child) { width: 25%; }
.tabelle.k-matrix .k-matrix-name { width: 170px; min-width: 170px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.tabelle.k-matrix th:not(.k-matrix-name), .tabelle.k-matrix td:not(.k-matrix-name) { width: 28px; min-width: 28px; }
.tabelle.k-matrix { table-layout: fixed; width: 100%; min-width: 900px; }
.k-woche .tabelle.k-matrix { min-width: 760px; }
.k-woche .tabelle.k-matrix .k-matrix-name { width: 150px; min-width: 150px; max-width: 150px; }
.k-woche .tabelle.k-matrix th:not(.k-matrix-name):not(:last-child), .k-woche .tabelle.k-matrix td:not(.k-matrix-name):not(:last-child) { width: auto; min-width: 0; }
.k-woche .tabelle.k-matrix th:last-child, .k-woche .tabelle.k-matrix td:last-child { width: 7.5%; min-width: 0; }

/* Ansichtsknoepfe und Kopfknoepfe brechen auf schmalen Bildschirmen um, statt die Seite zu verbreitern */
.box-kopf .reihe-knapp, .box-kopf .k-ansicht { flex-wrap: wrap; min-width: 0; max-width: 100%; }

/* Krankmeldung: Felder für die ausgewählten Tage in einer eigenen Zeile, Felder unten bündig (Beschriftungen ungleich lang). */
.krank-felder { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; align-items: end; margin-top: 16px; }
.krank-felder > .feld { margin: 0; }
a.k-balken { text-decoration: none; cursor: pointer; }
a.k-balken:hover { filter: brightness(.95); text-decoration: underline; }
.eintrag-loeschen { margin-top: var(--abstand-knoepfe); }