/* ============================================================
   ERZEUGTE KOPIE - HIER NICHT BEARBEITEN

   Urschrift:  server/src/main/resources/web/oberflaeche.css
   Erneuern:   ./bauen.sh :server:webspaceAussehen
               (laeuft bei jedem :server-Bau automatisch mit)

   Aenderungen in dieser Datei sind beim naechsten Bauen weg.
   ============================================================ */

/*
 * Die gesamte Gestaltung der Weboberflaeche. Handgeschrieben, kein Rahmenwerk.
 *
 * Warum kein Bootstrap oder Tailwind: fuer ein Dutzend Seiten waere eine Bauwerkzeugkette
 * (Node, Bundler, Uebersetzungsschritt) mehr Aufwand als Nutzen - zumal auf einem
 * Rechner mit vier Kernen. Ausserdem duerfte nichts von einem fremden Netz nachgeladen
 * werden: das waere bei jedem Seitenaufruf ein Datenabfluss an Dritte (Art. 44 DSGVO)
 * und wuerde ausserdem an der Inhaltssicherheitsregel scheitern.
 *
 * Systemschriften statt Webschriften - aus demselben Grund und weil sie schneller sind.
 *
 * Die Zustandsfarben sind DIESELBEN wie in der App (ui/theme/Farben.kt). Eine gruene
 * Kachel muss am Terminal und im Browser gleich aussehen, sonst entstehen Rueckfragen.
 */

:root {
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --schrift-fest: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

    --grund: #ffffff;
    --flaeche: #f6f7f8;
    --rand: #d8dbdf;
    --text: #1a1c1e;
    --text-schwach: #5b6169;
    --betont: #1c4d80;

    /* Zustandsfarben - gleich wie in der App */
    --anwesend: #c8e6c9;
    --anwesend-rand: #5c9a60;
    --pause: #fff3c4;
    --pause-rand: #b8992e;
    --abwesend: #e3e3e3;
    --abwesend-rand: #a8a8a8;
    --urlaub: #bbdefb;
    --urlaub-rand: #4a86c4;

    /* Fehlzeitenkalender: eine Farbe je Art.
       Urlaub und Krankheit uebernehmen die vorhandenen Zustandsfarben - eine blaue
       Flaeche muss ueberall Urlaub heissen. Die uebrigen sechs Arten haben in der App
       keine eigene Farbe (dort fallen sie auf Blau bzw. Violett zurueck); sie bekommen
       hier eigene Toene, weil ein Kalender, in dem sechs Arten gleich aussehen, seinen
       Zweck verfehlt. Alle sind mit der Textfarbe kombinierbar und untereinander auch
       bei Rot-Gruen-Schwaeche zu trennen - deshalb Blau/Violett/Braun/Oliv statt einer
       Ampelreihe. */
    --fz-kind: #d8a7e0;
    --fz-sonder: #9fd3cc;
    --fz-fortbildung: #cdd39a;
    --fz-betriebsruhe: #c9c2b0;
    --fz-unbezahlt: #efc9a8;
    --fz-ausgleich: #b9c4e8;
    --krank: #e1bee7;
    --krank-rand: #9a5aa8;

    --erfolg: #1f7a3d;
    --warnung: #8a6100;
    --fehler: #b3261e;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #16181a;
        --flaeche: #1f2225;
        --rand: #34383d;
        --text: #e6e8ea;
        --text-schwach: #a0a6ad;
        --betont: #7db3e8;

        --anwesend: #1e4025;
        --anwesend-rand: #4a8050;
        --pause: #4a3e1c;
        --pause-rand: #9c8330;
        --abwesend: #2e2e2e;
        --abwesend-rand: #565656;
        --urlaub: #16324a;
        --urlaub-rand: #3f6f9e;

        --fz-kind: #4a2f52;
        --fz-sonder: #1d423d;
        --fz-fortbildung: #3d4224;
        --fz-betriebsruhe: #3a352b;
        --fz-unbezahlt: #4d3524;
        --fz-ausgleich: #2b3350;
        --krank: #3b2f4a;
        --krank-rand: #7a5a88;

        --erfolg: #7fd39a;
        --warnung: #e0bd6a;
        --fehler: #f2b8b5;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: var(--grund);
}

/* ------------------------------------------------------------ Kopfzeile */

header {
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
}

.kopf-inhalt {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.marke {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* Das Logo skaliert auf die Höhe der Menüleiste; die Breite ergibt sich
   daraus. Eine feste Breite wäre falsch — sie verzerrte jedes Bild, das
   nicht zufällig das erwartete Seitenverhältnis hat.

   Die Höhe entspricht der Zeilenhöhe der Menüpunkte samt Polsterung, damit
   die Kopfzeile mit Logo genauso hoch bleibt wie ohne. Ein Logo, das die
   Kopfzeile wachsen lässt, verschiebt bei jedem Seitenaufbau den Inhalt
   darunter.

   max-width verhindert, dass ein sehr breites Bild die Navigation aus der
   Zeile drängt. */
.marke-logo {
    height: 2rem;
    width: auto;
    max-width: 14rem;
    object-fit: contain;
    display: block;
}

/* Die Vorschau in den Einstellungen — auf hellem wie dunklem Grund sichtbar,
   damit ein Logo mit durchsichtigem Hintergrund beurteilt werden kann. */
.logo-vorschau {
    display: inline-block;
    padding: 0.6rem 1rem;
    border: 1px dashed var(--rand);
    border-radius: 8px;
    background: var(--flaeche);
}

.logo-vorschau img {
    height: 2rem;
    width: auto;
    max-width: 20rem;
    object-fit: contain;
    display: block;
}

header nav {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    flex: 1;
}

header nav a {
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    color: var(--text-schwach);
    text-decoration: none;
    font-size: 0.94rem;
}

header nav a:hover { background: var(--rand); color: var(--text); }

header nav a.aktiv {
    background: var(--betont);
    color: var(--grund);
}

/* ------------------------------------------------ Untermenü „Verwalten"

   <details>/<summary> statt eines nachgebauten Menüs: Aufklappen, Tastatur-
   bedienung und Vorlesbarkeit bringt der Browser mit. Ein Skript wäre hier
   Mehrarbeit, die ohne Skript zu einem unbedienbaren Menü führt. */

.untermenue { position: relative; }

.untermenue > summary {
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    color: var(--text-schwach);
    font-size: 0.94rem;
    cursor: pointer;
    list-style: none;          /* Das voreingestellte Dreieck ersetzen wir selbst */
    white-space: nowrap;
}

.untermenue > summary::-webkit-details-marker { display: none; }

.untermenue > summary::after {
    content: " ▾";
    font-size: 0.8em;
}

.untermenue > summary:hover { background: var(--rand); color: var(--text); }

.untermenue > summary.aktiv {
    background: var(--betont);
    color: var(--grund);
}

.untermenue-inhalt {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    margin-top: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    min-width: 11rem;
}

/* Auf schmalen Geräten kein schwebendes Feld: dort wäre es breiter als der
   Bildschirm. Es klappt einfach im Fluss auf. */
@media (max-width: 700px) {
    .untermenue-inhalt {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0.2rem 0 0.2rem 0.8rem;
    }
}

/* --------------------------------------------------------------- Reiter

   Ohne JavaScript: versteckte Radioknöpfe, und `:checked ~` schaltet Kopf und
   Blatt. Die Regelpaare lassen sich nicht erzeugen, deshalb sind sie bis
   REITER_HOECHSTZAHL ausgeschrieben. */

.reiter > input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.reiter-koepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    border-bottom: 1px solid var(--rand);
    margin-bottom: 1.2rem;
}

.reiter-koepfe label {
    padding: 0.6rem 1.1rem;
    cursor: pointer;
    color: var(--text-schwach);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}

.reiter-koepfe label:hover { color: var(--text); }

.reiter-blatt { display: none; }

/* Sichtbarer Fokusrahmen: der Radioknopf selbst ist unsichtbar, ohne diese
   Regel wüsste ein Tastaturbediener nicht, wo er steht. */
.reiter > input[type="radio"]:focus-visible + .reiter-koepfe label,
.reiter > input[type="radio"]:focus-visible ~ .reiter-koepfe label {
    outline: revert;
}

.reiter > input:nth-of-type(1):checked ~ .reiter-koepfe label:nth-child(1),
.reiter > input:nth-of-type(2):checked ~ .reiter-koepfe label:nth-child(2),
.reiter > input:nth-of-type(3):checked ~ .reiter-koepfe label:nth-child(3),
.reiter > input:nth-of-type(4):checked ~ .reiter-koepfe label:nth-child(4),
.reiter > input:nth-of-type(5):checked ~ .reiter-koepfe label:nth-child(5),
.reiter > input:nth-of-type(6):checked ~ .reiter-koepfe label:nth-child(6) {
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--betont);
}

.reiter > input:nth-of-type(1):checked ~ .reiter-blaetter > .reiter-blatt:nth-child(1),
.reiter > input:nth-of-type(2):checked ~ .reiter-blaetter > .reiter-blatt:nth-child(2),
.reiter > input:nth-of-type(3):checked ~ .reiter-blaetter > .reiter-blatt:nth-child(3),
.reiter > input:nth-of-type(4):checked ~ .reiter-blaetter > .reiter-blatt:nth-child(4),
.reiter > input:nth-of-type(5):checked ~ .reiter-blaetter > .reiter-blatt:nth-child(5),
.reiter > input:nth-of-type(6):checked ~ .reiter-blaetter > .reiter-blatt:nth-child(6) {
    display: block;
}

.benutzer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.benutzer .kuerzel { font-weight: 600; }
.benutzer .rolle { color: var(--text-schwach); }

/* ------------------------------------------------------------ Rumpf */

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

h1 { font-size: 1.5rem; margin: 0 0 1.2rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.8rem; }

/* ------------------------------------------------------------ Hinweise */

.hinweis {
    border-radius: 6px;
    padding: 0.7rem 1rem;
    margin: 0 0 1.2rem;
    border-left: 4px solid;
}
.hinweis p { margin: 0; }
.hinweis.erfolg  { background: var(--anwesend); border-color: var(--erfolg); }
.hinweis.warnung { background: var(--pause);    border-color: var(--warnung); }
.hinweis.fehler  { background: var(--krank);    border-color: var(--fehler); }
.hinweis.info    { background: var(--flaeche);  border-color: var(--betont); }

/* ------------------------------------------------------------ Formulare */

form.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 1.2rem;
    max-width: 32rem;
}

.feld { margin-bottom: 1rem; }

.feld label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.feld .erlaeuterung {
    font-size: 0.83rem;
    color: var(--text-schwach);
    margin: 0.25rem 0 0;
}

/*
 * Feld und Knopf NEBENEINANDER - fuer die kurzen Formulare in einer Tabellenzelle
 * ("Grund" + "Stornieren").
 *
 * WOZU EINE EIGENE KLASSE: .feld setzt die Aufschrift ueber das Feld und einen Abstand
 * darunter. In einer Tabellenzelle ist beides falsch - dort tragen die Spaltenkoepfe die
 * Bedeutung, und ein Aussenabstand wuerde die Zeilenhoehe der ganzen Tabelle aufblaehen.
 * Ohne irgendeine Klasse stossen Feld und Knopf aber unmittelbar aneinander, und genau
 * das war gemeldet.
 *
 * Das Feld bekommt hier eine eigene Breite: die Regel weiter unten setzt input[type=text]
 * auf width 100%, was in einer Zelle die Spalte auseinanderzieht.
 */
.feld-zeile {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.feld-zeile input[type=text], .feld-zeile input:not([type]) {
    width: auto;
    min-width: 8rem;
    flex: 1 1 auto;
}

.feld-zeile button { flex: 0 0 auto; white-space: nowrap; }

/* input[type=month] gehoert ausdruecklich dazu. Ein Attributselektor trifft den
   GESCHRIEBENEN Wert, nicht den wirksamen: dass Firefox ein Monatsfeld wie ein
   Textfeld darstellt, macht daraus kein input[type=text]. Ohne diese Zeile blieb das
   Monatsfeld als einziges Eingabefeld der Anwendung ungestaltet. */
input[type=text], input[type=password], input[type=date], input[type=month],
input[type=number], select, textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--grund);
    color: var(--text);
    font: inherit;
}

input:focus-visible, select:focus-visible, button:focus-visible,
a:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--betont);
    outline-offset: 2px;
}

button, input[type=submit] {
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--betont);
    border-radius: 6px;
    background: var(--betont);
    color: #fff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

button:hover, input[type=submit]:hover { filter: brightness(1.1); }

button.zweitrangig, input.zweitrangig {
    background: transparent;
    color: var(--betont);
}

button.gefaehrlich, input.gefaehrlich {
    background: transparent;
    color: var(--fehler);
    border-color: var(--fehler);
}

input.verknuepfung {
    background: none;
    border: none;
    color: var(--text-schwach);
    padding: 0;
    text-decoration: underline;
    font-weight: normal;
}
input.verknuepfung:hover { color: var(--text); filter: none; }

/* ------------------------------------------------------------ Tabellen */

.tabelle-rahmen { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

th, td {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--rand);
    white-space: nowrap;
}

th {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-schwach);
    font-weight: 600;
}

tbody tr:hover { background: var(--flaeche); }

/* Zahlen rechtsbuendig und in fester Breite - sonst lassen sich Spalten mit
   Zeiten und Salden nicht mit dem Auge vergleichen. */
td.zahl, th.zahl {
    text-align: right;
    font-family: var(--schrift-fest);
    font-variant-numeric: tabular-nums;
}

td.plus  { color: var(--erfolg); }
td.minus { color: var(--fehler); }

.abgeschwaecht { color: var(--text-schwach); }

/* ------------------------------------------------------------ Marken */

.marke-zustand {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    border: 1px solid;
}
.marke-zustand.anwesend { background: var(--anwesend); border-color: var(--anwesend-rand); }
.marke-zustand.pause    { background: var(--pause);    border-color: var(--pause-rand); }
.marke-zustand.abwesend { background: var(--abwesend); border-color: var(--abwesend-rand); }
.marke-zustand.urlaub   { background: var(--urlaub);   border-color: var(--urlaub-rand); }
.marke-zustand.krank    { background: var(--krank);    border-color: var(--krank-rand); }

/* ------------------------------------------------------------ Anmeldung */

body.anmeldung main {
    max-width: 24rem;
    margin-top: 12vh;
}

/* ------------------------------------------------------------ Zeitansichten */

.zeitraum-wahl {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--rand);
}

/* Nur noch das Pfeilzeichen, ohne Beschriftung. Quadratisch und groß genug,
   damit es auch mit dem Daumen zu treffen ist - ein 2,4 rem breites Feld ist
   knapp über der üblichen Mindestgröße für Berührziele. */
/* Auch neben einem Eingabefeld, nicht nur in der Zeitraumleiste: der Monatsfilter
   unter "Alle Zeiten" traegt die Pfeile unmittelbar am Feld. Ohne den zweiten
   Selektor waeren sie dort nackter Text ohne Rahmen - und pruefung/klassen-kontext.php
   meldete es zu Recht. */
.zeitraum-wahl .blaettern,
.feld-zeile .blaettern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.2rem;
    line-height: 1;
    border: 1px solid var(--rand);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
}
.zeitraum-wahl .blaettern:hover,
.feld-zeile .blaettern:hover { background: var(--flaeche); }

/* Das Monatsfeld soll die Zeile nicht auffressen - die Pfeile stehen daneben. */
.feld-zeile input[type=month] {
    width: auto;
    min-width: 9rem;
    flex: 0 1 auto;
}

.zeitraum-wahl .arten { margin-left: auto; display: flex; gap: 0.3rem; }
.zeitraum-wahl .arten a {
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-schwach);
}
.zeitraum-wahl .arten a.aktiv { background: var(--betont); color: var(--grund); }

/* Kennzahlen als Reihe von Kacheln - die wichtigste Zahl (Saldo) faellt durch die
   Farbe auf, ohne dass Farbe die einzige Unterscheidung waere: das Vorzeichen steht
   immer dabei. */
.kennzahlen {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.kennzahl {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    min-width: 8rem;
}
.kennzahl .bezeichnung {
    display: block;
    font-size: 0.8rem;
    color: var(--text-schwach);
}
.kennzahl .wert {
    display: block;
    font-size: 1.3rem;
    font-family: var(--schrift-fest);
    font-variant-numeric: tabular-nums;
}
.kennzahl .wert.plus  { color: var(--erfolg); }
.kennzahl .wert.minus { color: var(--fehler); }

table.tage tr.wochenende td { background: color-mix(in srgb, var(--flaeche) 60%, transparent); }
table.tage tr.verstoss td:first-child { border-left: 3px solid var(--fehler); }
table.tage td.anmerkung { white-space: normal; }
table.tage td.anmerkung .marke-zustand { margin-right: 0.3rem; }

tr.abgeschwaecht td { opacity: 0.55; }

textarea { font: inherit; resize: vertical; }

/* ------------------------------------------------------- Eigene Stempeluhr

   Steht über der Tafel und ist für die meisten Mitarbeiter der einzige Grund,
   die Startseite überhaupt aufzurufen. Die Knöpfe sind bewusst groß: das hier
   wird auch am Telefon bedient, mit dem Daumen, oft im Vorbeigehen. */

.stempeluhr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: none;
    margin-bottom: 1.2rem;
}

.stempeluhr-stand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.stempeluhr-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    font-size: 1.1rem;
    /* Dieselben Flächenfarben wie die Kacheln - Uhr und Tafel sollen nicht in
       verschiedenen Farben dasselbe sagen. */
    background: var(--flaeche);
    border: 1px solid var(--rand);
}

.stempeluhr-zeichen.anwesend { background: var(--anwesend); }
.stempeluhr-zeichen.pause    { background: var(--pause); }
.stempeluhr-zeichen.abwesend { background: var(--abwesend); }

.stempeluhr-knoepfe {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.stempeluhr-knoepfe input[type="submit"] {
    min-width: 8rem;
    padding: 0.75rem 1.4rem;
    font-size: 1.05rem;
}

/* ------------------------------------------------------------ Live-Tafel */

.tafel-kopf {
    font-size: 1.1rem;
    color: var(--text-schwach);
    margin: 0 0 0.8rem;
}

.tafel-alter {
    background: var(--pause);
    border-left: 4px solid var(--warnung);
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    margin: 0 0 1rem;
}

/* Die Kacheln wachsen mit dem Fenster. Anders als am Terminal wird hier NICHT
   rückwärts gerechnet: im Browser ist Scrollen zumutbar, und eine feste Kachelzahl
   pro Bildschirm wäre bei frei wählbarer Fenstergröße eine Schikane. */
.tafel-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.6rem;
}

/* Ein Knopf, der nur ein Zeichen trägt.

   Quadratisch statt breit — mit der gewöhnlichen Polsterung von 1,1 rem säße ein
   einzelnes Zeichen in einem viel zu breiten Kasten. Die Höhe bleibt die der
   übrigen Knöpfe, damit er in einer Zeile mit einem Eingabefeld nicht heraussticht.

   ZEICHEN OHNE TEXT braucht title UND aria-label: für eine Vorleseausgabe ist ein
   Knopf ohne Beschriftung stumm, und „Schaltfläche" allein hilft niemandem. */
button.zeichen {
    min-width: 2.7rem;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    font-size: 1.15rem;
    line-height: 1.25;
}

/* Der Knopf in der Filterzeile steht neben den Feldern, nicht darunter.

   Die Felder tragen ihre Beschriftung ÜBER sich; ohne Versatz säße der Knopf auf
   Höhe der Beschriftungen statt auf Höhe der Eingaben. Der Wert ist derselbe, den
   ".feld label" beansprucht: Zeilenhöhe der 0,9-rem-Schrift plus ihr Abstand nach
   unten. Ändert sich dort etwas, gehört es hier mit geändert. */
.filterzeile > button {
    align-self: flex-start;
    margin-top: calc(0.9rem * 1.5 + 0.25rem);
    margin-bottom: 0.8rem;
}

/* ------------------------------------------- Filterzeile "Alle Zeiten"

   Zwei Filter nebeneinander statt untereinander. Untereinander nahm der Kasten ein
   Drittel des Bildschirms ein, obwohl er aus zwei Angaben besteht — und die Liste,
   um die es geht, begann erst darunter.

   align-items: flex-start richtet die Beschriftungen aneinander aus statt die
   Felder auf gleiche Höhe zu strecken. Das bleibt auch dann richtig, wenn eines der
   Felder später wieder eine Erläuterung unter sich bekommt. */

.filterzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 1.6rem;
}

/* DIE KARTE WIRD NICHT BEGRENZT — zweimal daran gescheitert, hier die Rechnung.

   form.karte ist auf 32 rem begrenzt. Zwei Felder nebeneinander passen da nicht
   hinein, und weil das Auswahlfeld eine Mindestbreite hat, ist das Ergebnis kein
   Zusammenschieben, sondern ein Umbruch — die Felder stehen dann weiter
   untereinander, obwohl display:flex gesetzt ist.

   Der zweite Versuch mit 48 rem war immer noch zu eng: darin war der Knopf nicht
   mitgerechnet. 19 + 1,6 + 22 + 1,6 + 2,7 = 46,9 rem gegen 45,6 rem nutzbare
   Breite — die Lupe rutschte in die nächste Zeile.

   Statt eine dritte Zahl zu raten: keine Grenze. Die Karte nimmt die Breite des
   Inhaltsbereichs, und die Zeile bricht erst um, wenn sie wirklich nicht mehr passt.

   Nur DIESE Karte. Die 32 rem sind für einspaltige Formulare richtig — eine
   Eingabezeile über den halben Bildschirm ist schlechter zu lesen, nicht besser. */
form.filterkarte { max-width: none; }

.filterzeile > .feld { margin-bottom: 0.8rem; }

/* Das Monatsfeld wächst nicht mit: es braucht Platz für die beiden Pfeile und
   "2026-08" samt Auswahlknopf des Browsers, zusammen knapp 15 rem — mehr nicht.
   Eine Obergrenze stand hier, solange eine Erläuterung darunter den Kasten breit
   zog; ohne sie bemisst sich der Kasten an seinem Inhalt.

   0 1: darf schrumpfen, aber nicht wachsen. Mit flex-shrink 0 erzwang das
   Monatsfeld seine volle Breite und schob das Auswahlfeld in die nächste Zeile. */
.filterzeile .feld-monat { flex: 0 1 auto; }

.filterzeile .feld-monat input[type=month] {
    width: 9rem;
    min-width: 9rem;
}

/* Die Mitarbeiterliste: 15 rem statt 22 — noch einmal rund 30 % schmaler.
   Lange Namen werden dann vom Auswahlfeld gekürzt dargestellt; aufgeklappt steht
   der volle Eintrag da, und das ist der Moment, in dem man ihn lesen muss. */
.filterzeile .feld-person {
    flex: 0 1 15rem;
    min-width: 10rem;
}

.filterzeile .feld-person select { width: 100%; }

/* Auf schmalen Geräten untereinander — nebeneinander wären beide zu eng. */
@media (max-width: 700px) {
    .filterzeile > .feld { flex: 1 1 100%; max-width: none; }
}

/* --------------------------------------------------- Fehlzeitenkalender

   Links die Mitarbeiter, oben die Tage, in der Fläche ein farbiges Rechteck je
   eingetragener Fehlzeit. Zwei Raster: eines nur für Urlaub, eines für alles
   Übrige — getrennt, weil Urlaub die Frage "wer ist wann weg" beantwortet und der
   Rest die Frage "warum".

   ZELLBREITE NACH ZEITRAUM. Eine Woche hat 7 Spalten, ein Jahr 365. Mit einer festen
   Breite wäre entweder die Woche ein Streifen am linken Rand oder das Jahr sechs
   Meter breit. Die Breite steht deshalb als Variable am Rahmen und wird von der
   Seite je nach Filter gesetzt.

   WAAGERECHT SCROLLEN STATT SCHRUMPFEN: bei einem Jahr sind 365 Spalten auch mit
   4 px noch 1,5 m breit. Der Rahmen .tabelle-rahmen scrollt bereits; die
   Namensspalte bleibt dabei stehen (position: sticky), sonst weiß man nach zwei
   Bildschirmbreiten nicht mehr, in wessen Zeile man liest. */

.fz-kalender {
    --zelle: 22px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.78rem;
}

.fz-kalender th,
.fz-kalender td {
    padding: 0;
    border: 1px solid var(--rand);
    text-align: center;
    white-space: nowrap;
}

/* Die Namensspalte bleibt beim waagerechten Scrollen stehen. */
.fz-kalender .fz-name {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--grund);
    text-align: left;
    padding: 0.2rem 0.5rem;
    min-width: 11rem;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.fz-kalender thead .fz-name { z-index: 2; }

.fz-kalender .fz-monat {
    background: var(--flaeche);
    font-weight: 600;
    padding: 0.15rem 0.3rem;
}

/* Die Spaltenbreite kommt aus <colgroup>, nicht aus den Kopfzellen.

   Mit table-layout: fixed bestimmt allein die ERSTE Zeile die Breiten - und das ist
   hier die Monatszeile mit colspan. Bei Quartal und Jahr entfaellt die Zeile mit den
   Tagesziffern ganz; ohne <col> waeren die Spalten dann gleichmaessig ueber die
   Fensterbreite verteilt statt 9 bzw. 4 px schmal. */
.fz-kalender col { width: var(--zelle); }
.fz-kalender col.fz-namensspalte { width: 11rem; }

.fz-kalender .fz-tag {
    height: 1.5rem;
    color: var(--text-schwach);
    font-weight: 400;
}

.fz-kalender tbody td { height: 1.35rem; }

/* Samstag und Sonntag abgesetzt. Ohne das ist in einem Monatsraster nicht zu
   erkennen, ob eine Lücke ein freier Tag oder ein Wochenende ist. */
.fz-kalender .we { background: var(--flaeche); }

.fz-kalender tbody tr:hover td { outline: 1px solid var(--betont); outline-offset: -1px; }

/* Ein voller Tag füllt die Zelle, ein halber nur die obere linke Hälfte. Die
   Diagonale ist die übliche Darstellung dafür und braucht kein zweites Element. */
.fz-kalender td.fz { background: var(--fz-farbe); }

.fz-kalender td.fz.halb {
    background: linear-gradient(to bottom right,
        var(--fz-farbe) 0 49.5%, transparent 50.5% 100%);
}

.fz-urlaub        { --fz-farbe: var(--urlaub); }
.fz-krankheit     { --fz-farbe: var(--krank); }
.fz-kind_krank    { --fz-farbe: var(--fz-kind); }
.fz-sonderurlaub  { --fz-farbe: var(--fz-sonder); }
.fz-fortbildung   { --fz-farbe: var(--fz-fortbildung); }
.fz-betriebsruhe  { --fz-farbe: var(--fz-betriebsruhe); }
.fz-unbezahlt     { --fz-farbe: var(--fz-unbezahlt); }
.fz-freizeitausgleich { --fz-farbe: var(--fz-ausgleich); }

/* Trennstrich zwischen den Schaltern und der Zeitraumwahl. */
.zeitraum-wahl .arten .trenner {
    width: 1px;
    align-self: stretch;
    background: var(--rand);
    margin: 0.15rem 0.25rem;
}

/* Der Zellverweis füllt die Zelle aus - sonst träfe man nur den Text, den es
   hier gar nicht gibt. */
.fz-kalender td.fz a {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 1.35rem;
}

/* Die angesprungene Zeile und ihr Grundfeld werden hervorgehoben.

   :target ist die Sprungmarke aus der Adresse — damit lässt sich ohne Skript
   zeigen, welcher Eintrag gemeint war. Den Schreibzeiger ins Feld zu setzen
   ginge nur mit JavaScript; das Feld ist stattdessen umrandet und liegt einen
   Tabulatorschritt entfernt. */
.tage tr:target > td {
    background: var(--pause);
    outline: 2px solid var(--betont);
    outline-offset: -2px;
}

.tage tr:target input[name="grund"] {
    outline: 2px solid var(--betont);
    outline-offset: 1px;
}

/* ------------------------------------------------------------ Legende */

.fz-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 0.8rem 0 1.6rem;
    font-size: 0.88rem;
}

.fz-legende span {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.fz-legende i {
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--rand);
    border-radius: 3px;
    background: var(--fz-farbe, var(--grund));
    flex: 0 0 auto;
}

.fz-legende i.halb {
    background: linear-gradient(to bottom right,
        var(--text-schwach) 0 49.5%, transparent 50.5% 100%);
}

/* --------------------------------------------- Auswahl "Wer" auf der Druckseite

   Die Personenliste erscheint erst, wenn "Nur eine Person" gewählt ist. Steht die
   Auswahl auf "alle", hat sie keine Wirkung — und ein Feld ohne Wirkung ist eine
   Einladung, es doch zu bedienen und sich über das Ergebnis zu wundern.

   OHNE SKRIPT: der Geschwisterselektor unten reicht. Dafür müssen Radioknopf und
   Personenblock GESCHWISTER sein — deshalb baut Nachweis.php dieses Feld von Hand
   und nicht über Vorlage::kaestchen, das den Knopf in ein <label> in ein <div>
   einwickelt. Aus dieser Verschachtelung käme kein Selektor mehr heraus. */

.wer-wahl input.wer-schalter {
    margin-right: 0.4rem;
}

.wer-wahl .wer-zeile {
    display: inline-block;
    margin: 0.35rem 0;
    font-size: 0.95rem;
    cursor: pointer;
}

.wer-wahl > .erlaeuterung {
    font-size: 0.83rem;
    color: var(--text-schwach);
    margin: 0.15rem 0 0.6rem 1.5rem;
}

/* Eingerückt unter dem zugehörigen Knopf, damit die Zuordnung ohne Linie klar ist. */
.wer-wahl .wer-person {
    display: none;
    margin: 0.4rem 0 0 1.5rem;
}

.wer-wahl input[value="einer"]:checked ~ .wer-person {
    display: block;
}

/* ------------------------------------------------- Tafel als Tablet

   Die Kacheln stehen in einem Rahmen, der wie ein Tablet aussieht - dasselbe
   Geraet, das im Betrieb an der Wand haengt. Das ist nicht nur Zierde: wer die
   Tafel im Browser oeffnet, sieht auf einen Blick, dass er dasselbe vor sich hat
   wie am Terminal, und Rueckfragen der Art "warum sieht das hier anders aus"
   entfallen.

   GEBAUT OHNE BILDDATEI. Ein PNG waere schaerfer zu zeichnen, muesste aber in
   zwei Aufloesungen vorliegen, bei dunklem Thema getauscht werden und in beide
   Auslieferungen wandern. Rahmen, Kamera und Bedienstreifen sind hier reine
   CSS-Formen - sie skalieren beliebig und kosten keine Anfrage. */

.tafel-tablet {
    /* Die vom Auftrag verlangten 50 px Abstand nach oben. Bewusst px und nicht
       rem: der Abstand soll fest sein und nicht mit der Schriftgroesse wandern. */
    margin: 50px auto 1.2rem;
    max-width: 1100px;

    /* Das Gehaeuse. Der Farbverlauf gibt der Kante eine Rundung, ohne dass ein
       Bild noetig waere; die zwei Schatten sind Aufsetzschatten und Innenkante. */
    background: linear-gradient(160deg, #3a3f45 0%, #23272b 55%, #171a1d 100%);
    border-radius: 26px;
    padding: 44px 18px 30px;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    position: relative;
}

/* Die Kamera - ein Punkt oben mittig im Rahmen. */
.tafel-tablet::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0d0f11;
    box-shadow: inset 0 0 0 2px #4a5057;
}

/* Der Bedienstreifen unten - die flache Linie heutiger Geraete. */
.tafel-tablet::after {
    content: "";
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.22);
}

/* Der Bildschirm - fest #212121, nicht die Grundfarbe der Oberflaeche.

   Der feste Wert ist hier richtig und nicht nachlaessig: das Geraet an der Wand
   zeigt bei jedem Licht dasselbe Bild, und ein Bildschirm, der im hellen Thema
   weiss und im dunklen fast schwarz waere, saehe nicht nach Geraet aus, sondern
   nach einem Loch im Rahmen. Die Kachelfarben bleiben unberuehrt - sie muessen
   mit denen der App uebereinstimmen. */
.tafel-tablet > .tafel-raster {
    background: #212121;
    border-radius: 8px;
    padding: 0.9rem;
    /* Helle Innenkante statt dunkler: auf #212121 waere ein schwarzer Rand
       unsichtbar, und der Bildschirm verschwaende im Gehaeuse. */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Text OHNE Kachel im Bildschirm - der Fall "keine aktiven Mitarbeiter".

   Ohne diese Regel stuende .abgeschwaecht in --text-schwach da: im hellen Thema
   ein dunkles Grau auf dunklem Grund, praktisch unlesbar. Die Kacheln bringen
   ihre eigenen Farben mit und sind nicht betroffen; dieser eine Satz schon. */
.tafel-tablet > .tafel-raster > p {
    color: #b9bec4;
    grid-column: 1 / -1;
    margin: 0.4rem 0;
    text-align: center;
}

/* Auf schmalen Geraeten schrumpft der Rahmen: 44 px Fassung oben und unten
   sind auf einem Telefon verschenkte Hoehe, und die Kamera darf dann weg. */
@media (max-width: 700px) {
    .tafel-tablet {
        margin-top: 50px;
        padding: 16px 8px 16px;
        border-radius: 16px;
    }
    .tafel-tablet::before,
    .tafel-tablet::after { display: none; }
}

/* Bedienbare Kacheln - nur für Administrator und Hauptbenutzer. Der Zeiger und
   das Anheben beim Überfahren sagen "hier kann man klicken", ohne dass die Tafel
   für alle anderen anders aussieht. */
a.tafel-kachel.bedienbar {
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}

a.tafel-kachel.bedienbar:hover,
a.tafel-kachel.bedienbar:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Das Kürzel sitzt IMMER in der Mitte der Kachel — unabhängig davon, ob
   darunter noch „Urlaub", „Pause" oder eine Dauer steht.

   Vorher waren Kürzel und Zusatz zusammen zentriert; sobald ein Zusatz da war,
   rutschte das Kürzel nach oben. Auf einer Wand mit vierzig Kacheln, von denen
   nur ein Teil einen Zusatz trägt, ergibt das eine unruhige Zickzacklinie —
   und das Kürzel ist die Information, auf die das Auge zuerst springt.

   Umgesetzt, indem der Zusatz aus dem Fluss genommen wird (position: absolute).
   Er beansprucht dadurch keinen Platz mehr, den sich das Kürzel teilen müsste. */
.tafel-kachel {
    position: relative;
    border: 2px solid;
    border-radius: 10px;
    padding: 1.1rem 0.6rem 0.9rem;
    text-align: center;
    min-height: 6.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tafel-kachel .kuerzel {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.tafel-kachel .zusatz {
    position: absolute;
    left: 0.4rem;
    right: 0.4rem;
    bottom: 0.5rem;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    /* Ein langer Text („Freizeitausgleich") darf die Kachel nicht sprengen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Das Statuszeichen oben rechts - die farbunabhängige zweite Unterscheidung.
   Rund 8 % der Männer unterscheiden Grün und Gelb schlecht; die Farbe allein
   darf die Information nicht tragen. */
.tafel-kachel .zeichen {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.75;
}

.tafel-kachel.anwesend { background: var(--anwesend); border-color: var(--anwesend-rand); }
.tafel-kachel.pause    { background: var(--pause);    border-color: var(--pause-rand); }
.tafel-kachel.abwesend { background: var(--abwesend); border-color: var(--abwesend-rand); }
.tafel-kachel.urlaub   { background: var(--urlaub);   border-color: var(--urlaub-rand); }
.tafel-kachel.krank    { background: var(--krank);    border-color: var(--krank-rand); }
.tafel-kachel.feiertag {
    background: var(--urlaub);
    border-color: var(--urlaub-rand);
    border-style: dashed;
}