:root {
    --farbe-text: #1a1a1a;
    --farbe-hintergrund: #ffffff;
    --farbe-rand: #cccccc;
    --farbe-akzent: #2b5c8a;
    --farbe-fehler: #a6262e;
    --farbe-fehler-hintergrund: #fbeaec;
    --farbe-erfolg: #1e6b3c;
    --farbe-erfolg-hintergrund: #eaf6ee;
}

* {
    box-sizing: border-box;
}

/*
 * Die Kopfzeile bleibt oben stehen (v1.62). Ohne den Abstand hier landete
 * ein Sprung zu einem Anker - "Bearbeiten" in der Personenliste springt
 * nach #formular - mit seiner Ueberschrift UNTER der Kopfzeile, und der
 * Klick saehe wirkungslos aus.
 *
 * 5rem seit v1.91 (vorher 4rem): In mittelbreiten Fenstern steht die
 * Navigation in zwei Zeilen, die Kopfzeile ist dann rund 70 px hoch -
 * mit 64 px Abstand lag die Ueberschrift ein Stueck darunter. Aufgefallen
 * am Inhaltsverzeichnis der Hilfe.
 */
html {
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
}

/* Grundformen im Stil der Kopfzeile (v2.03). Alles unter :where() hat das
   Gewicht 0 - jede Regel weiter unten, die ein Element gezielt gestaltet
   (Erfassung, Umsatzgitter, Menue), gewinnt also ohne Zutun. Das ist
   Absicht: Die Grundformen sollen nur fuellen, was bisher Browser-Standard
   war, nichts Gestaltetes umwerfen. */

/* Links in EINER Farbe - besuchte nicht mehr lila. Ohne Linie, die kommt
   beim Hinzeigen; im Fliesstext eine leise Linie, damit ein Link im Satz
   als Link erkennbar bleibt. */
:where(a) {
    color: var(--farbe-akzent);
    text-decoration: none;
}

:where(a):hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

:where(p, li, .feld-hinweis, .meldung, dd) :where(a) {
    text-decoration: underline;
    text-decoration-color: rgba(43, 92, 138, 0.35);
    text-underline-offset: 2px;
}

:where(p, li, .feld-hinweis, .meldung, dd) :where(a):hover {
    text-decoration-color: currentColor;
}

/* Knoepfe ohne eigene Gestaltung: hell mit Rahmen. Die eine Hauptaktion
   eines Bereichs ist gefuellt (.formular-box button, .knopf-haupt). */
:where(button) {
    padding: 0.4rem 0.95rem;
    border: 1px solid #c5ced8;
    border-radius: 6px;
    background: #fff;
    color: var(--farbe-akzent);
    font: inherit;
    cursor: pointer;
}

:where(button):hover {
    background: #eef2f6;
    border-color: #aebac6;
}

:where(input[type="text"], input[type="search"], input[type="email"], input[type="password"],
       input[type="date"], input[type="time"], input[type="number"], input[type="tel"], select, textarea) {
    padding: 0.35rem 0.5rem;
    border: 1px solid #c5ced8;
    border-radius: 6px;
    background: #fff;
    color: var(--farbe-text);
    font: inherit;
}

:where(input, select, textarea, button):focus-visible {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: 1px;
}

.knopf-haupt {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--farbe-akzent);
    border-radius: 6px;
    background: var(--farbe-akzent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.knopf-haupt:hover {
    background: #234c73;
    color: #fff;
    text-decoration: none;
}

/* Kleiner heller Knopf fuer Aktionen in Tabellen ("Oeffnen"). */
.knopf-klein {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid #c5ced8;
    border-radius: 6px;
    background: #fff;
    color: var(--farbe-akzent);
    font-size: 0.85rem;
    white-space: nowrap;
    text-decoration: none;
}

.knopf-klein:hover {
    background: #e3edf7;
    border-color: #9db4cc;
    text-decoration: none;
}

/*
 * sticky statt fixed: Die Kopfzeile behaelt ihren Platz im Fluss der
 * Seite, der Inhalt rutscht also nicht darunter, und keine Seite braucht
 * einen eigenen Abstand oben. Der Hintergrund ist Pflicht - sonst
 * scheint der Inhalt beim Scrollen durch.
 *
 * Die Abstaende sind seit v1.91 knapper: Der Menuepunkt "Hilfe" kam dazu,
 * und mit den alten Abstaenden waere die Kopfzeile des Administrators
 * (zehn Punkte) schon bei 1500 px Fensterbreite zweizeilig geworden - 22 px
 * weniger fuer die Erfassung, also eine Zeile. Jetzt bleibt sie einzeilig
 * bis etwa dorthin, wo sie es vorher auch war (im Browser nachgemessen).
 */
.kopfzeile {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--farbe-hintergrund);
    display: flex;
    align-items: center;
    gap: 1.1rem;
    /* Senkrecht knapper als bis v2.00 (0.75rem): Die Menuepunkte haben
       jetzt selbst Innenabstand fuer die hinterlegte Flaeche. */
    padding: 0.35rem 1.25rem;
    border-bottom: 1px solid var(--farbe-rand);
}

/* Beim Drucken einer Seite gehoert die Kopfzeile nicht auf jedes Blatt. */
@media print {
    .kopfzeile {
        position: static;
    }
}

/* Menuefuehrung seit v2.01 (navigation.php): vier Hauptpunkte mit
   Symbol, zwei davon mit Untermenue (<details>), der aktive Punkt
   hellblau hinterlegt. Rechts Hilfe und das Benutzermenue. Die Kopfzeile
   ist nicht hoeher als vorher - die Erfassung misst sie fuer ihren
   festen Kopf, und jede Zeile mehr kostet dort eine Personenzeile. */
.kopfzeile-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--farbe-text);
    text-decoration: none;
    white-space: nowrap;
}

.kopfzeile-logo-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 7px;
    background: var(--farbe-akzent);
    color: #fff;
}

.symbol {
    flex: none;
}

/* Reicht die Breite nicht, bricht die Navigation in eine zweite Zeile um
   - ganze Punkte, nicht mitten im Wort. Mit vier Punkten passiert das
   erst weit unter der Breite, bei der es mit zehn geschah. */
.kopfzeile-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
}

.nav-punkt {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    color: #2f3a45;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.25;
}

.nav-punkt .symbol {
    color: #6b7783;
}

.nav-punkt:hover,
.nav-gruppe[open] > .nav-punkt {
    background: #eef2f6;
}

.nav-punkt:focus-visible,
.nav-untermenue a:focus-visible {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: 1px;
}

.nav-aktiv,
.nav-aktiv:hover,
.nav-gruppe[open] > .nav-aktiv {
    background: #e3edf7;
    color: var(--farbe-akzent);
    font-weight: 600;
}

.nav-aktiv .symbol {
    color: var(--farbe-akzent);
}

/* <details> als Menue: der eigene Pfeil statt des Dreiecks des Browsers. */
.nav-gruppe {
    position: relative;
}

.nav-gruppe > summary {
    list-style: none;
}

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

.nav-gruppe > summary .symbol:last-child {
    margin-left: -0.1rem;
    transition: transform 0.15s;
}

.nav-gruppe[open] > summary .symbol:last-child {
    transform: rotate(180deg);
}

.nav-untermenue {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 110;
    min-width: 12rem;
    padding: 0.3rem;
    background: #fff;
    border: 1px solid #d5dbe1;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 35, 50, 0.12), 0 2px 6px rgba(20, 35, 50, 0.08);
}

.nav-untermenue a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: 5px;
    color: #2f3a45;
    text-decoration: none;
    white-space: nowrap;
}

.nav-untermenue a:hover {
    background: #eef2f6;
}

.nav-untermenue a.nav-aktiv {
    background: #e3edf7;
    color: var(--farbe-akzent);
}

.kopfzeile-benutzer {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
}

.nav-symbol {
    padding: 0.3rem;
}

/* Der Kreis ist das hoechste Element der Zeile - sein Rahmen knapp, sonst
   waechst die Kopfzeile um ein paar Pixel, die der Erfassung fehlen. */
.nav-konto > summary {
    padding: 0.15rem 0.4rem;
}

.nav-initialen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: #e3edf7;
    color: var(--farbe-akzent);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Das Benutzermenue klappt nach links auf - es steht am rechten Rand. */
.nav-konto .nav-untermenue {
    left: auto;
    right: 0;
}

.nav-konto-name {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0.45rem 0.7rem 0.55rem;
    border-bottom: 1px solid #e6eaee;
    margin-bottom: 0.3rem;
}

.nav-konto-name span,
.nav-konto-version {
    color: #6b7783;
    font-size: 0.85rem;
}

.nav-konto-version {
    margin: 0.3rem 0 0;
    padding: 0.35rem 0.7rem 0.2rem;
    border-top: 1px solid #e6eaee;
    font-variant-numeric: tabular-nums;
}

/* Reiter unter einem Hauptpunkt (v2.01): Personen | Abwesenheiten. */
.reiter {
    display: flex;
    gap: 0.25rem;
    margin: 0 0 1.25rem;
    border-bottom: 1px solid var(--farbe-rand);
}

.reiter a {
    padding: 0.5rem 0.9rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: #4a5561;
    text-decoration: none;
}

.reiter a:hover {
    color: var(--farbe-akzent);
}

.reiter a[aria-current] {
    border-bottom-color: var(--farbe-akzent);
    color: var(--farbe-akzent);
    font-weight: 600;
}

@media print {
    .reiter {
        display: none;
    }
}

.inhalt {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Die Tageserfassung hat viele Spalten - hier ist Breite wertvoller
   als eine ruhige Textspalte. */
.inhalt-breit {
    max-width: 1500px;
}

/* Menue-Knopf (v2.02): nur am schmalen Bildschirm und nur mit Skript
   (.js-menue, gesetzt von navigation.js) - siehe die Regeln unten. */
.menue-knopf {
    display: none;
    background: none;
    border: 0;
    font: inherit;
}

.menue-knopf-zu,
.menue-offen .menue-knopf-auf {
    display: none;
}

.menue-offen .menue-knopf-zu {
    display: inline-flex;
}

/* Schmale Fenster (v1.89): Die Kopfzeile bricht in mehrere Zeilen um,
   statt die Seite seitwaerts aufzuziehen, und haftet nicht mehr oben - in
   drei Zeilen naehme sie am Handy ein Viertel des Bildschirms. Greift am
   Handy nur auf Seiten mit viewport-Angabe ("Einsatzplan teilen" und
   "Hilfe"); alle anderen zeigt es weiter in Schreibtischbreite.

   Steht HINTER den Grundregeln oben: Bei gleichem Gewicht gewinnt die
   spaetere Regel, und davor gesetzt (v1.89, v1.90) blieben Abstand und
   Breite der Navigation sowie der Rand von .inhalt wirkungslos. */
@media (max-width: 40rem) {
    .kopfzeile {
        position: static;
        flex-wrap: wrap;
        gap: 0.4rem 1rem;
        padding: 0.5rem 1rem;
    }

    .kopfzeile-nav {
        order: 3;
        flex: 1 0 100%;
        gap: 0.15rem;
    }

    .kopfzeile-benutzer {
        margin-left: auto;
    }

    /* Am Handy klappt ein Untermenue unter seinem Punkt auf, aber nie
       ueber den rechten Rand hinaus. */
    .nav-untermenue {
        max-width: calc(100vw - 2rem);
    }

    /* Mit Skript (v2.02): eine Zeile mit Logo, Hilfe, Konto und dem
       Menue-Knopf; das Menue klappt als Liste darunter auf. Die Kopfzeile
       ist dann wieder so niedrig, dass sie oben haften darf. */
    .kopfzeile.js-menue {
        position: sticky;
    }

    .js-menue .menue-knopf {
        display: flex;
        padding: 0.3rem;
    }

    .js-menue .kopfzeile-nav {
        display: none;
    }

    .js-menue.menue-offen .kopfzeile-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.1rem;
        padding: 0.3rem 0 0.4rem;
        border-top: 1px solid #e6eaee;
    }

    .js-menue .kopfzeile-nav .nav-punkt {
        padding: 0.6rem 0.7rem;
    }

    /* Im aufgeklappten Menue stehen die Unterpunkte eingerueckt darunter,
       nicht als schwebende Liste. */
    .js-menue .kopfzeile-nav .nav-untermenue {
        position: static;
        min-width: 0;
        max-width: none;
        margin: 0.1rem 0 0.2rem 1.9rem;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .js-menue .kopfzeile-nav .nav-untermenue a {
        padding: 0.55rem 0.7rem;
    }

    .inhalt {
        padding: 1rem;
    }
}

.erfassung {
    margin-bottom: 2.5rem;
}

/* Kopfdaten der Nachweisansicht (v1.86): zugeklappt eine Textzeile mit
   "entsperren" dahinter, aufgeklappt das Formular. Der Pfeil des
   <summary> faellt weg - die Zeile soll aussehen wie vorher der Absatz. */
.kopfdaten {
    margin: 1rem 0;
}

.kopfdaten summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.75rem;
    list-style: none;
    cursor: pointer;
}

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

/* Dasselbe Schloss wie in der Umsatzuebersicht: Dieselbe Form bedeutet
   dasselbe - hier laesst sich etwas erst nach dem Entsperren aendern. */
.kopfdaten-schloss {
    padding-left: 1.1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2344515e' d='M4 7V5a4 4 0 0 1 8 0v2h1v8H3V7h1zm2 0h4V5a2 2 0 0 0-4 0v2z'/%3E%3C/svg%3E") left center / 0.8rem no-repeat;
    color: var(--farbe-akzent);
    font-size: 0.82rem;
    text-decoration: underline;
}

.kopfdaten[open] .kopfdaten-schloss {
    display: none;
}

.kopfdaten-formular {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-top: 0.6rem;
    padding: 0.75rem 1rem;
    background: #fdf3dc;
    border: 1px solid #c79a2b;
    border-radius: 6px;
}

.kopfdaten-formular label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.kopfdaten-formular input[type="text"] {
    padding: 0.35rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 4px;
    font: inherit;
    font-weight: normal;
}

.kopfdaten-formular button {
    padding: 0.4rem 1rem;
    background: var(--farbe-akzent);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
}

.tag-auswahl {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f4f6f8;
    border-radius: 6px;
}

.tag-auswahl label {
    font-weight: 600;
}

/* Die Ueberschrift "Tag erfassen" steht seit v1.85 in der Zeile der
   Tagesauswahl, vor dem Auswahlfeld. Ohne Aussenabstand, sonst machte
   sie den Kasten so hoch wie vorher beide Zeilen zusammen. */
.tag-auswahl h2 {
    margin: 0 0.5rem 0 0;
    font-size: 1.25rem;
    line-height: 1.2;
}

/* Seit v2.03 erben Felder die Schrift der Seite (16 px statt der
   13 px des Browsers); damit der feste Kopf der Erfassung nicht hoeher
   wird, ist der Innenabstand hier knapper. */
.tag-auswahl select {
    padding: 0.2rem 0.35rem;
    border: 1px solid #c5ced8;
    border-radius: 6px;
}

/* Zaehler der angehakten Zeilen neben der Tagesauswahl (v1.77). Ziffern
   gleich breit, damit der Text beim Zaehlen nicht zittert. */
.tag-anzahl {
    padding: 0.2rem 0.7rem;
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
    border-radius: 999px;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Fester Kopf der Tageserfassung (v1.77): nachweis.js setzt die Hoehe
   und diese Klasse, dann scrollen nur die Personenzeilen. Ohne die Klasse
   (kein JavaScript, zu kleines Fenster) ist es ein gewoehnlicher Block. */
.erfassung-rollbereich-fest {
    overflow: auto;
    border-bottom: 1px solid var(--farbe-rand);
    /* Mit Tab angesprungene Zeilen landen sonst UNTER den Spaltenkoepfen. */
    scroll-padding-top: 2.75rem;
}

/* Die Spaltenkoepfe bleiben im Bereich oben stehen. Der Strich darunter
   als Schatten: Bei border-collapse gehoert der Rahmen zur Tabelle und
   bliebe beim Scrollen nicht an der Zelle. */
.erfassung-rollbereich-fest thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--farbe-hintergrund);
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--farbe-rand);
}

/* Auf Papier gibt es nichts zu scrollen - die Hoehe steht als
   Inline-Stil am Element, deshalb !important. */
@media print {
    .erfassung-rollbereich-fest {
        max-height: none !important;
        overflow: visible;
    }
}

/* Der Hinweistext steht immer in einer eigenen Zeile unter Tag und
   Zaehler, damit beim Ein- und Ausklappen (v1.78) nichts springt. */
.tag-hinweis {
    flex-basis: 100%;
    color: #5a5a5a;
    font-size: 0.82rem;
}

/* Sieht aus wie ein Link, ist aber ein Knopf: Er schaltet um, er fuehrt
   nirgendwohin. Rechts in der Zeile, weg von Tag und Zaehler. */
.tag-hinweis-knopf {
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    color: var(--farbe-akzent);
    font: inherit;
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
}

.tabelle-erfassung input[type="time"],
.tabelle-erfassung input[type="text"],
.tabelle-erfassung input[type="number"] {
    padding: 0.25rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 3px;
    font: inherit;
    width: 100%;
}

.tabelle-erfassung td {
    padding: 0.25rem 0.35rem;
    vertical-align: middle;
}

.tabelle-erfassung .feld-schmal {
    max-width: 5rem;
}

.zeile-ergebnis {
    white-space: nowrap;
    font-size: 0.85rem;
}

/* Unwiderrufliche Aktionen: sichtbar anders als der Rest, aber nicht
   alarmierend rot ueber die ganze Zeile. */
.link-gefahr {
    color: var(--farbe-fehler);
}

.knopf-gefahr {
    padding: 0.45rem 1.1rem;
    background: var(--farbe-fehler);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
}

.loeschen-bestaetigung {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--farbe-fehler);
    border-radius: 6px;
    background: var(--farbe-fehler-hintergrund);
}

.loeschen-bestaetigung h2 {
    margin-top: 0;
}

.loeschen-knoepfe {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Hinweis, dass ein Link einen neuen Tab oeffnet - sonst wundert man
   sich, wo die Seite geblieben ist. */
.neuer-tab {
    font-size: 0.8em;
    color: #6b6b6b;
}

.spalte-zieltag {
    text-align: center;
    white-space: nowrap;
}

/* Abweichender Buchungstag (Abendschicht am Vortag) - muss auffallen,
   ohne wie ein Fehler auszusehen. */
.hinweis-vortag {
    display: inline-block;
    padding: 0 0.35rem;
    border-radius: 3px;
    background: #fff6e0;
    color: #7a5b00;
    font-weight: 600;
}

.meldung-hinweis {
    color: var(--farbe-fehler);
    font-size: 0.85rem;
    margin-top: -0.6rem;
}

.kachel-nav {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.kachel {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
    border: 1px solid #dfe4ea;
    border-radius: 10px;
    text-decoration: none;
    color: var(--farbe-text);
    min-width: 220px;
    transition: border-color 0.15s, background 0.15s;
}

.kachel strong {
    color: var(--farbe-akzent);
}

.kachel span {
    color: #5f6b77;
    font-size: 0.9rem;
}

.kachel:hover {
    border-color: #9db4cc;
    background: #f7fafc;
    text-decoration: none;
}

.formular-box {
    max-width: 480px;
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid #dfe4ea;
    border-radius: 10px;
}

.formular-box form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.formular-box label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.feld-optional {
    font-weight: 400;
    color: #6b6b6b;
}

.feld-hinweis {
    color: #6b6b6b;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

/* Abgeleitete, nicht selbst erfasste Werte - optisch zurueckgenommen,
   damit niemand sie fuer ein Eingabefeld haelt. */
.spalte-abgeleitet {
    color: #6b6b6b;
}

.formular-box input,
.formular-box select {
    padding: 0.4rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 4px;
}

.formular-box button {
    margin-top: 0.75rem;
    align-self: flex-start;
    padding: 0.5rem 1.25rem;
    background: var(--farbe-akzent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.formular-box button:hover {
    background: #234c73;
}

.meldung {
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    margin: 0 0 1rem;
}

.meldung-fehler {
    background: var(--farbe-fehler-hintergrund);
    color: var(--farbe-fehler);
}

.meldung-erfolg {
    background: var(--farbe-erfolg-hintergrund);
    color: var(--farbe-erfolg);
}

.meldung-warnung {
    background: #fff6e0;
    color: #7a5b00;
}

.meldung ul,
ul.meldung {
    margin: 0;
    padding-left: 1.25rem;
}

.formular-box-breit {
    max-width: 720px;
}

.formular-zeile {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.formular-zeile > div {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
}

.formular-zeile-breit {
    flex: 3 !important;
}

.vorschau {
    margin: 0.75rem 0;
    padding: 0.6rem 0.9rem;
    background: #f7f7f7;
    border-radius: 4px;
    font-size: 0.9rem;
}

.vorschau-lohnarten {
    margin: 0 0 0.4rem;
    padding-left: 1.1rem;
}

.vorschau-gesamt {
    margin: 0;
}

/* Tabellen im hellen Kasten (v2.03): abgerundet, grauer Kopf, feine
   Linien. separate statt collapse, weil nur so der Rahmen Ecken haben
   kann; mit border-spacing 0 sehen die Linien aus wie vorher. Die
   Spaltenbreiten bleiben, wie sie sind. */
.tabelle {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #dfe4ea;
    border-radius: 10px;
}

.tabelle th,
.tabelle td {
    text-align: left;
    /* Abstand wie bis v2.02 - die Erfassung erbt ihn, und dort zaehlt
       jede Zeilenhoehe. */
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #e6eaee;
}

.tabelle > thead th {
    background: #f6f8fa;
    color: #4a5561;
    font-size: 0.9rem;
    font-weight: 600;
    border-bottom-color: #dfe4ea;
}

/* Die Ecken des grauen Kopfes folgen der Rundung, sonst ragen sie heraus. */
.tabelle > thead > tr:first-child > th:first-child {
    border-top-left-radius: 9px;
}

.tabelle > thead > tr:first-child > th:last-child {
    border-top-right-radius: 9px;
}

/* Keine Doppellinie am Boden: Die letzte Zeile hat den Rahmen schon. */
.tabelle > :last-child > tr:last-child > td,
.tabelle > :last-child > tr:last-child > th {
    border-bottom: 0;
}

/* Die Zeile unter der Maus leicht hinterlegt - nicht in den Eingabe-
   tabellen, dort hat die Zeile ihre eigenen Zustaende. */
.tabelle:not(.tabelle-erfassung):not(.tabelle-umsatz) > tbody > tr:hover > td {
    background: #f8fafc;
}

.zeile-inaktiv {
    opacity: 0.55;
}

.tabelle-aktionen {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.inline-form {
    display: inline;
}

.inline-form button {
    background: none;
    border: none;
    color: var(--farbe-akzent);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

.import-export {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.csv-import-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.seite-anmelden {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #f4f4f4;
}

.anmelde-box {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--farbe-rand);
    width: 320px;
}

.anmelde-box form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.anmelde-box label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.anmelde-box input {
    padding: 0.5rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 4px;
}

.anmelde-box button {
    margin-top: 1rem;
    padding: 0.6rem;
    background: var(--farbe-akzent);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Gruppenkopf in der Monatsuebersicht: fasst einen Veranstaltungstag
   zusammen (Mitarbeiterzahl, Stunden). Deutlich abgesetzt, damit die
   Zeile nicht als weitere Eintragszeile gelesen wird. */
.tabelle tr.gruppenzeile td {
    background: #eef2f7;
    border-top: 2px solid #9aa7b4;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

/* Loeschen in einer inline-form: .inline-form button faerbt sonst auch
   den Gefahrenknopf im Akzentblau ein (hoehere Spezifitaet). */
.inline-form button.knopf-gefahr {
    background: none;
    color: var(--farbe-fehler);
    text-decoration: underline;
}

/* Kontrollkaestchen im Formular: Text neben dem Kaestchen statt darueber,
   sonst steht die Beschriftung als eigene Zeile ueber einem einsamen Haken. */
.formular-box label.check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}

.formular-box label.check input {
    margin: 0;
}

/* Schichtvorlage der Leitung: abgesetzter Kasten, damit der Knopf nicht
   wie eine weitere Aktion der Monatsuebersicht darunter wirkt. */
.vorlage-box {
    max-width: 480px;
    margin: 2rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 6px;
    background: #f7f9fb;
}

.vorlage-box h2 {
    margin-top: 0;
    font-size: 1.05rem;
}

.vorlage-box button {
    margin-top: 0.75rem;
    padding: 0.5rem 1.25rem;
    background: var(--farbe-akzent);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* "Zeiten speichern" ist die leisere Aktion gegenueber "Vorlage
   uebernehmen" - sie schreibt nur an der Einstellung, legt aber selbst
   noch keine Eintragszeile an. Optisch zurueckgenommen, damit die beiden
   Knoepfe nicht wie gleichrangige Alternativen wirken. */
.vorlage-box button.knopf-nebensaechlich {
    background: none;
    color: var(--farbe-akzent);
    border: 1px solid var(--farbe-rand);
}

.vorlage-box input[type="time"] {
    padding: 0.3rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 3px;
    font: inherit;
}

.tabelle-schmal {
    width: auto;
    min-width: 18rem;
}

/* Abwesende Person in der Tageserfassung: erkennbar zurueckgenommen,
   aber nicht so blass wie eine deaktivierte Person - sie ist ja da,
   nur heute nicht einsetzbar. Die gesperrten Felder muessen lesbar
   bleiben, damit man sieht, was hinterlegt ist. */
.zeile-abwesend {
    background: #f4f4f4;
    color: #7a7a7a;
}

.zeile-abwesend input:disabled {
    background: #ececec;
    color: #8a8a8a;
    border-color: #dcdcdc;
    cursor: not-allowed;
}

/* Krank und Urlaub optisch unterscheidbar - beim Ueberfliegen einer
   Monatsliste ist die Art die erste Frage. */
.marke-abgemeldet,
.marke-krank,
.marke-urlaub {
    display: inline-block;
    padding: 0 0.35rem;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.marke-krank {
    background: #fbeaec;
    color: #a6262e;
}

.marke-urlaub {
    background: #e8f1fb;
    color: #24557f;
}

/* Umsatzuebersicht: das Gitter Veranstaltungen x Jahre.
   Zahlen rechtsbuendig, damit sich Tausender uebereinander vergleichen
   lassen - das ist der eigentliche Zweck der Tabelle. */
.tabelle-umsatz .spalte-jahr {
    text-align: right;
    white-space: nowrap;
}

.tabelle-umsatz .spalte-position {
    width: 4.5rem;
}

.tabelle-umsatz .feld-betrag {
    width: 6.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tabelle-umsatz .feld-position {
    width: 4rem;
}

.tabelle-umsatz .feld-name {
    width: 100%;
    min-width: 10rem;
}

/* Zellensperre (v1.76): Ein eingetragener Betrag ist gesperrt und sieht
   aus wie Text, nicht wie ein Eingabefeld - so ist auf einen Blick zu
   sehen, welche Zellen sich ohne Weiteres aendern lassen (die leeren)
   und welche nicht. Der Rahmen bleibt als durchsichtiger stehen, damit
   die Zahl beim Entsperren nicht um einen Pixel springt. */
.zelle-betrag {
    position: relative;
    display: inline-block;
}

.tabelle-umsatz input.feld-gesperrt {
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    cursor: default;
}

.tabelle-umsatz input.feld-gesperrt:focus {
    border-color: var(--farbe-rand);
}

/* Das Schloss sitzt links im Feld - die Zahl steht rechtsbuendig, dort
   ist Platz. Blass, damit sechzig Schloesser die Tabelle nicht
   uebertoenen; deutlich in der Zeile unter dem Mauszeiger und am Feld
   mit dem Fokus. Als Hintergrundbild statt als Emoji: Das saehe je nach
   System anders aus und waere unter Windows knallgelb. */
.zelle-schloss {
    position: absolute;
    left: 0.15rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2344515e' d='M4 7V5a4 4 0 0 1 8 0v2h1v8H3V7h1zm2 0h4V5a2 2 0 0 0-4 0v2z'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
    opacity: 0.3;
    cursor: pointer;
}

.tabelle-umsatz tr:hover .zelle-schloss,
.zelle-betrag:focus-within .zelle-schloss {
    opacity: 0.75;
}

.zelle-schloss:hover {
    opacity: 1;
    background-color: #eceff2;
}

/* Entsperrt: gelb wie die Marke "offen" in der Nachweisliste - die
   Zelle ist gerade aenderbar, und das soll man sehen, bevor man tippt. */
.tabelle-umsatz input.feld-entsperrt {
    border: 1px solid #c79a2b;
    border-radius: 3px;
    background-color: #fdf3dc;
    /* Sofort gelb, nicht ueber die 1,5 s des Gruen-Verblassens. */
    transition: none;
}

/* Die Summenzeile traegt das Gewicht des Vorbilds: dort ist "gesamt"
   die einzige Zeile mit durchgezogenem Strich darueber. */
.tabelle-umsatz tfoot th {
    border-top: 2px solid var(--farbe-rand);
    font-weight: 700;
}

/* Automatisches Speichern - genutzt von der Umsatzuebersicht
   (assets/umsatz.js) UND vom Personen-Bearbeitenformular
   (assets/person.js) und von der Tageserfassung (assets/nachweis.js,
   dort je Zeile). Die Rueckmeldung sieht an beiden Stellen gleich
   aus, weil sie dasselbe bedeutet; zwei getrennte Regelsaetze waeren
   zwei Gelegenheiten, nur einen davon zu aendern.
   Die Rueckmeldung sitzt am Feld (Rahmen) UND in der Statuszeile: Der
   Rahmen sagt WELCHES Feld, die Zeile sagt WAS passiert ist. Nur eines
   von beidem reicht nicht - ein gruener Rahmen ohne Zeitangabe laesst
   offen, ob er von eben oder von vorhin stammt. */
.umsatz-status,
.feld-status {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: var(--farbe-text-schwach, #5a6672);
}

.umsatz-status-laeuft,
.feld-status-laeuft {
    font-style: italic;
}

.umsatz-status-ok,
.feld-status-ok {
    color: #1d6b3a;
}

.umsatz-status-fehler,
.feld-status-fehler {
    color: var(--farbe-fehler);
    font-weight: 600;
}

/* Gruen verblasst nach zwei Sekunden - die Bestaetigung hat ihren
   Zweck erfuellt. Rot bleibt: Ein nicht gespeicherter Wert darf nicht
   von selbst aus dem Blick verschwinden.

   Der Uebergang steht am Grundzustand, nicht an .feld-gespeichert:
   Animiert werden soll der Weg ZURUECK ins Normale (Klasse entfernt),
   waehrend das Gruen sofort da sein muss. Andersherum bliebe die
   Bestaetigung zwei Sekunden lang unsichtbar - also genau dann, wenn
   man hinsieht. */
.tabelle-umsatz input,
.tabelle-erfassung input,
.formular-autospeichern input {
    transition: background-color 1.5s ease-out, border-color 1.5s ease-out;
}

.tabelle-umsatz input.feld-gespeichert,
.tabelle-erfassung input.feld-gespeichert,
.formular-autospeichern input.feld-gespeichert {
    border-color: #2f8a52;
    background-color: #eaf6ee;
    transition: none;
}

.tabelle-umsatz input.feld-fehlerhaft,
.tabelle-erfassung input.feld-fehlerhaft,
.formular-autospeichern input.feld-fehlerhaft {
    border-color: var(--farbe-fehler);
    background: #fdf2f3;
    outline: 2px solid var(--farbe-fehler);
}

/* Dritte Abwesenheitsart. Gedeckter als krank (rot) und Urlaub (blau):
   "abgemeldet" ist der Normalfall und soll die Liste nicht einfaerben. */
.marke-abgemeldet {
    background: #eceff2;
    color: #44515e;
}

/* Abwesenheitsliste: eine Tabelle je Monat, und alle sollen genau
   untereinanderstehen. Mit dem automatischen Layout verteilt der Browser
   die Breiten je Tabelle nach ihrem Inhalt - ein "(Fortsetzung)" im
   August machte dort die Von-Spalte breit, im April nicht, und die
   Spalten sprangen von Monat zu Monat (v1.63). Feste Breiten fuer alles
   ausser Person und Bemerkung, die sich den Rest teilen. */
.tabelle-abwesenheit {
    table-layout: fixed;
}

/* Breiten im Browser nachgemessen: "01.04.2026 (Fortsetzung)" braucht
   samt Innenabstand 177 px, "Abgemeldet" 102 px. Knapp bemessen, damit
   Person und Bemerkung genug Rest bleibt - wer eine Spalte verbreitert,
   nimmt ihnen den Platz. */
.tabelle-abwesenheit .spalte-persnr { width: 5.5rem; }
.tabelle-abwesenheit .spalte-art { width: 6.5rem; }
.tabelle-abwesenheit .spalte-datum { width: 11.25rem; }
.tabelle-abwesenheit .spalte-tage { width: 5.5rem; }
/* "Eingetragen": "07.09.2026, 20:34" braucht samt Innenabstand 121 px (im
   Browser nachgemessen). Der Zeitstempel bricht nicht um, der Name darf. */
.tabelle-abwesenheit .spalte-eingetragen { width: 7.75rem; }
.tabelle-abwesenheit .zelle-eingetragen small { white-space: nowrap; }
.tabelle-abwesenheit .spalte-aktion { width: 5.5rem; }

/* Datum und Hinweis nicht umbrechen - ein "(geht weiter)" in der
   zweiten Zeile machte die Zeile hoeher als ihre Nachbarn. */
.tabelle-abwesenheit td:nth-child(4),
.tabelle-abwesenheit td:nth-child(5),
.tabelle-abwesenheit td:nth-child(6) {
    white-space: nowrap;
}

/* Lange Namen und Bemerkungen brechen um statt ueber den Rand zu laufen. */
.tabelle-abwesenheit td {
    overflow-wrap: anywhere;
}

/* Auf schmalen Bildschirmen blieben fuer die Person mit festen Breiten
   nur 54 px (bei 900 px Fensterbreite nachgemessen), mit automatischem
   Layout 70 px. Dort geht Lesbarkeit vor Buendigkeit.
   Seit der Spalte "Eingetragen" (v1.68) belegen die festen Spalten
   852 px; Person und Bemerkung teilen sich, was davon und vom
   Seitenrand (48 px) uebrig bleibt. Bei 75rem (1200 px) sind das je
   150 px - darunter wieder automatisches Layout. */
@media (max-width: 75rem) {
    .tabelle-abwesenheit {
        table-layout: auto;
    }
}

/* Einladungslink: steht nur ein einziges Mal da (gespeichert wird nur
   sein Hash), muss sich also bequem markieren und kopieren lassen -
   deshalb umbrechend statt abgeschnitten.

   Eigener Kasten statt .meldung-hinweis: das ist im Projekt ein roter
   Kleintext unter einem Feld, kein Kasten. */
.einladungs-link {
    background: #eef2f7;
    color: var(--farbe-text);
    border-left: 4px solid var(--farbe-akzent);
}

.einladungs-link p {
    margin: 0 0 0.4rem;
}

.einladungs-link p:last-child {
    margin-bottom: 0;
}

.einladungs-link code {
    display: inline-block;
    word-break: break-all;
    font-size: 0.85rem;
    background: #fff;
    padding: 0.3rem 0.45rem;
    border-radius: 3px;
}

/* Geburtstage des laufenden Monats auf der Startseite.
   Bereits vergangene Tage bleiben stehen und werden nur gedaempft:
   Wer am 3. Geburtstag hatte, soll am 5. noch nachlesen koennen - eine
   Liste, die sich taeglich selbst leert, beantwortet die Frage
   "war da diesen Monat was?" nicht mehr. */
.geburtstage {
    margin-top: 2rem;
}

.geburtstagsliste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.geburtstagsliste li {
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--farbe-rand);
}

.geburtstag-tag {
    display: inline-block;
    min-width: 2.2rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    margin-right: 0.6rem;
    color: #6b6b6b;
}

.geburtstag-vorbei {
    opacity: 0.55;
}

.marke-heute {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.6rem;
    background: #eaf6ee;
    color: #1d6b3a;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Naechste Termine auf der Startseite (v1.87). Dieselben Marken wie in
   der Terminliste - dieselbe Form bedeutet dasselbe. Die Marke eines
   Dokuments ist zugleich der Link dorthin. */
.termine-naechste {
    margin-top: 2rem;
}

.tabelle-termine-naechste td {
    vertical-align: baseline;
}

.termin-dokument {
    text-decoration: none;
}

.termin-dokument:hover .marke-frei,
.termin-dokument:hover .marke-offen,
.termin-dokument:focus-visible .marke-frei,
.termin-dokument:focus-visible .marke-offen {
    text-decoration: underline;
}

/* "heute" steht hier allein in seiner Zelle, nicht hinter einem Namen. */
.marke-heute-termin {
    margin-left: 0;
}

/* Jahresuebersicht (v1.67): Stunden je Person ueber alle Einsatztage.
   Zahlen rechtsbuendig mit gleich breiten Ziffern, damit sich 9,25 und
   83,25 untereinander lesen lassen. Nullen gedaempft - sie sind die
   Tage ohne Einsatz und sollen die gearbeiteten Stunden nicht
   uebertoenen. Die Tabelle rollt in ihrem Kasten, nicht die Seite. */
.tabelle-rollbar {
    overflow-x: auto;
}

.tabelle-jahr th,
.tabelle-jahr td {
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
}

.tabelle-jahr .spalte-zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Die Koepfe stehen unten buendig: Traegt nur ein Teil der Termine eine
   Bezeichnung, bleiben Datum und Wochentag trotzdem in einer Zeile. */
.tabelle-jahr thead th {
    vertical-align: bottom;
}

/* Bezeichnung des Termins ueber dem Datum (v1.87). Sie darf umbrechen -
   bis zu 80 Zeichen in einer Zeile machten aus der Spalte eines
   Einsatztages die breiteste der Tabelle. */
.jahr-bezeichnung {
    display: block;
    max-width: 7rem;
    margin-left: auto;
    white-space: normal;
    overflow-wrap: break-word;
    font-size: 0.8rem;
    line-height: 1.2;
}

.tabelle-jahr .wert-null {
    color: #9aa3ab;
}

.tabelle-jahr .spalte-gesamt {
    font-weight: 700;
}

.tabelle-jahr tfoot td {
    border-top: 2px solid #9aa7b4;
}

/* Geburtstage des ganzen Jahres (v1.69): zwoelf Monatskaesten im Raster,
   auf schmalen Bildschirmen untereinander. Der laufende Monat ist farbig
   abgesetzt - nach ihm wird am haeufigsten gesucht. Listen, Tag und
   "vorbei" nutzen dieselben Klassen wie die Startseite. */
.geburtstage-jahr {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.25rem 1.75rem;
    margin-top: 1rem;
}

.geburtstage-monat h2 {
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 2px solid var(--farbe-rand);
}

.geburtstage-monat-aktuell h2 {
    color: var(--farbe-akzent);
    border-bottom-color: var(--farbe-akzent);
}

.geburtstag-wochentag {
    display: inline-block;
    min-width: 1.7rem;
    color: #6b6b6b;
    font-size: 0.8rem;
}

.geburtstag-alter {
    color: #6b6b6b;
    font-size: 0.85rem;
}

/* Nachweisliste (v1.72): je Monat eine Tabelle, je Veranstaltungstag
   eine Zeile, Einsatzplan und Monatsnachweis nebeneinander. Feste
   Breiten, damit die Monatstabellen genau untereinanderstehen (dieselbe
   Lehre wie bei den Abwesenheiten); Plan und Nachweis teilen sich den
   Rest zu gleichen Teilen. */
.nachweis-monat {
    margin: 1.5rem 0 0.4rem;
}

.tabelle-nachweise {
    table-layout: fixed;
}

/* 14.5rem seit v2.03 (vorher 8rem): Die Aktionen des Termins stehen jetzt
   in einer Zeile nebeneinander statt untereinander. */
.tabelle-nachweise .spalte-veranstaltung {
    width: 14.5rem;
}

.tabelle-nachweise td {
    vertical-align: top;
}

.nachweis-tag {
    font-weight: 600;
}

.nachweis-tag small {
    display: block;
    font-weight: normal;
    color: #6b6b6b;
}

/* Zwei Nachweise derselben Art am selben Tag (doppelt angelegt) stehen
   untereinander in ihrer Zelle, statt dass einer wegfaellt. */
.nachweis-dokument {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.75rem;
}

.nachweis-dokument + .nachweis-dokument {
    margin-top: 0.35rem;
}

.nachweis-abweichung {
    flex-basis: 100%;
}

/* Status als Marke: gruen freigegeben, gelb offen. Gleicher Zuschnitt
   wie die Abwesenheitsarten, damit dieselbe Form dasselbe bedeutet. */
.marke-frei,
.marke-offen {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.marke-frei {
    background: #eaf6ee;
    color: #1d6b3a;
}

.marke-offen {
    background: #fdf3dc;
    color: #7a5200;
}

.nachweis-deaktiviert {
    margin-top: 2rem;
}

.nachweis-deaktiviert summary {
    cursor: pointer;
    color: #6b6b6b;
    margin-bottom: 0.5rem;
}

/* Auf schmalen Bildschirmen bleibt fuer zwei Zellen neben 8rem zu wenig
   Platz fuer Marke, Zeilenzahl und Link - dort automatisches Layout. */
@media (max-width: 40rem) {
    .tabelle-nachweise {
        table-layout: auto;
    }
}

/* PDF-Ablage (v1.75): je Monat eine Tabelle, je Veranstaltungstag ein
   Block von Blaettern mit dem Tag einmal davor. Feste Breiten, damit die
   Monatstabellen genau untereinanderstehen (wie Nachweisliste und
   Abwesenheiten); der Dateiname bekommt den Rest. */
.tabelle-ablage {
    table-layout: fixed;
}

.tabelle-ablage .spalte-veranstaltung { width: 8rem; }
.tabelle-ablage .spalte-blatt { width: 8rem; }
.tabelle-ablage .spalte-groesse { width: 4.5rem; }
.tabelle-ablage .spalte-abgelegt { width: 9rem; }
.tabelle-ablage .spalte-durch { width: 10rem; }
/* "freigegeben am 07.09.2026" braucht samt Innenabstand 211 px (im Browser
   nachgemessen); mit 13rem brach es um und machte jede Zeile dreizeilig. */
.tabelle-ablage .spalte-dokument { width: 13.5rem; }

/* break-word statt anywhere: anywhere zaehlt beim automatischen Layout
   (schmale Bildschirme) als Umbruchstelle mit und quetschte die Spalten
   bis auf "Tea/m" zusammen. */
.tabelle-ablage td {
    vertical-align: top;
    overflow-wrap: break-word;
}

.tabelle-ablage .zelle-abgelegt {
    white-space: nowrap;
}

/* Der Strich ueber dem ersten Blatt eines Tages trennt die Tage; die
   Blaetter desselben Tages stehen ohne Strich zusammen. */
.tabelle-ablage tbody td {
    border-bottom: none;
}

.tabelle-ablage tbody tr.tag-beginn td {
    border-top: 1px solid var(--farbe-rand);
}

.tabelle-ablage tbody tr:first-child td {
    border-top: none;
}

.tabelle-ablage {
    border-bottom: 1px solid var(--farbe-rand);
}

/* Unter 75rem bleibt dem Dateinamen neben 53rem fester Spalten zu wenig. */
@media (max-width: 75rem) {
    .tabelle-ablage {
        table-layout: auto;
    }
}

/* E-Mail-Versand (v1.74): je Dokument und je Empfaenger eine Zeile mit
   Kaestchen davor. Normales Gewicht statt der fetten Formular-Labels -
   in einer Liste von zwanzig Empfaengern waere alles fett gleich nichts. */
.formular-box label.versand-auswahl {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
    font-weight: normal;
    font-size: 0.95rem;
}

.formular-box label.versand-auswahl input {
    margin: 0;
}

/* "alle"/"keine" sind Hilfsknoepfe, keine Aktionen: klein und ohne das
   Akzentblau, das .formular-box button sonst jedem Knopf gibt. */
.formular-box button.knopf-klein {
    margin: 0 0 0 0.35rem;
    padding: 0.05rem 0.5rem;
    background: none;
    color: inherit;
    border: 1px solid var(--farbe-rand);
    font-size: 0.78rem;
}

.formular-box textarea {
    padding: 0.4rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 4px;
    font: inherit;
}

.versand-zusammenfassung {
    margin: 0.75rem 0 0;
    font-weight: 600;
}

/* Einsatzplan teilen (v1.89). Die Seite wird am Handy benutzt: Das
   Textfeld nimmt die volle Breite, die Knoepfe sind gross genug fuer
   den Daumen. Der Text steht in gleich breiten Ziffern, damit die
   Zeiten untereinanderstehen. */
.teilen-box {
    max-width: 34rem;
}

.formular-box.teilen-box textarea {
    width: 100%;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

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

.formular-box .teilen-knoepfe button {
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
}

.formular-box .teilen-knoepfe button.knopf-zweitrangig {
    background: #fff;
    color: var(--farbe-akzent);
    border: 1px solid var(--farbe-akzent);
}

/* Der Haken "PDF mitschicken" (v1.98). :not([hidden]), weil ein
   display hier sonst das hidden-Attribut aushebelt - und der Haken soll
   erst erscheinen, wenn das Skript die Datei geholt hat. */
.formular-box .teilen-pdf-wahl:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    font-weight: normal;
}

.teilen-pdf-wahl input {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
}

.teilen-status {
    min-height: 1.4em;
    margin: 0.6rem 0 0;
    font-weight: 600;
}

/* Hilfe (v1.91): die Bedienungsanleitung als Lesetext. Schmaler als die
   Arbeitsseiten - eine Zeile ueber die volle Breite liest niemand gern -
   und mit etwas mehr Luft. Tabellen rollen in ihrem Kasten, damit die
   Seite am Handy nicht seitwaerts rutscht. */
.hilfe {
    max-width: 46rem;
    line-height: 1.55;
}

.hilfe h2 {
    margin-top: 2.2rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--farbe-rand);
}

.hilfe h3 {
    margin-top: 1.6rem;
}

.hilfe li {
    margin-bottom: 0.35rem;
}

.hilfe code {
    padding: 0.05rem 0.3rem;
    background: #f4f6f8;
    border-radius: 3px;
    font-size: 0.92em;
}

.hilfe pre {
    padding: 0.75rem 1rem;
    background: #f4f6f8;
    border-radius: 6px;
    overflow-x: auto;
    line-height: 1.4;
}

.hilfe pre code {
    padding: 0;
    background: none;
}

.hilfe .tabelle td,
.hilfe .tabelle th {
    vertical-align: top;
}

.hilfe .zelle-mittig {
    text-align: center;
}

.hilfe hr {
    border: none;
    border-top: 1px solid var(--farbe-rand);
    margin: 1.5rem 0;
}

/* Gedruckt soll die Anleitung die Blattbreite nutzen. */
@media print {
    .hilfe {
        max-width: none;
    }
}

/* Mitarbeiterliste zum Ausdrucken (v1.92): die Seite IST das Blatt. Am
   Bildschirm steht darueber eine Leiste mit "Drucken", die nicht
   mitgedruckt wird. Masse in mm und pt, weil es um Papier geht. */
.druckseite {
    background: #fff;
}

.druck-leiste {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--farbe-rand);
    background: #f4f6f8;
}

.druck-leiste button {
    padding: 0.5rem 1.5rem;
    background: var(--farbe-akzent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font: inherit;
    cursor: pointer;
}

.druck-sortierung {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: baseline;
}

.druckliste {
    max-width: 180mm;
    margin: 0 auto;
    padding: 8mm 0;
    color: #000;
    /* Benannte Seite: Raender und Format gelten nur fuer dieses Blatt,
       nicht fuer alles, was aus der Anwendung gedruckt wird. */
    page: druckliste;
}

@page druckliste {
    size: A4 portrait;
    margin: 15mm;
}

.druckliste h1 {
    margin: 0 0 6mm;
    font-size: 15pt;
}

.druck-datum {
    margin-left: 4mm;
    font-weight: normal;
}

.druckliste-zeilen {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 11pt;
}

.druckliste-zweispaltig {
    column-count: 2;
    column-gap: 10mm;
}

.druckliste-zeilen li {
    display: flex;
    align-items: center;
    gap: 3mm;
    height: 7.2mm;
    border-bottom: 0.2mm solid #999;
    /* Eine Zeile wird nie ueber Spalte oder Seite geteilt. */
    break-inside: avoid;
}

/* Das Kaestchen ist gezeichnet, kein Schriftzeichen: Ein "☐" sieht je
   nach Schrift und Drucker anders aus oder fehlt ganz. */
.druck-kasten {
    flex: none;
    width: 4mm;
    height: 4mm;
    border: 0.3mm solid #000;
    box-sizing: border-box;
}

/* Feste Namensspalte statt "nimm den Rest" (v1.93): Am rechten Rand stand
   die Zeit gut 10 cm vom Namen entfernt, und das Auge verrutschte beim
   Hinueberlesen um eine Zeile. 55 mm fassen rund 28 Zeichen; die Zeiten
   stehen so trotzdem untereinander. In der schmalen zweispaltigen Fassung
   darf die Spalte schrumpfen (dann "..."). */
.druck-name {
    flex: 0 1 55mm;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.druck-fuss {
    margin: 3mm 0 0;
    font-size: 10pt;
    /* Nie allein auf ein zweites Blatt. */
    break-before: avoid;
}

/* In 85 mm Spaltenbreite bleiben neben Kaestchen und Zeit knapp 55 mm;
   mit fester Spalte schrumpfte nur die Zeile mit dem ueberlangen Namen,
   und ihre Zeit stand einen Hauch weiter links als die anderen. */
.druckliste-zweispaltig .druck-name {
    flex-basis: 52mm;
}

.druck-zeit {
    flex: none;
    font-variant-numeric: tabular-nums;
}

@media print {
    .nicht-drucken {
        display: none !important;
    }

    .druckliste {
        max-width: none;
        padding: 0;
    }
}

/* Aktionen des Termins (v2.03): E-Mail, Teilen, Aendern in einer Zeile,
   grau mit Symbol, blau erst beim Hinzeigen - sie sollen da sein, aber
   nicht lauter als die Dokumente daneben. */
.termin-datum {
    display: block;
    font-size: 1.02rem;
}

.termin-aktionen-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.15rem;
    margin: 0.35rem 0 0 -0.3rem;
}

.nachweis-tag .nachweis-versand {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.3rem;
    border-radius: 5px;
    color: #5f6b77;
    font-weight: normal;
    font-size: 0.85rem;
    text-decoration: none;
}

.nachweis-tag .nachweis-versand:hover {
    background: #eef2f6;
    color: var(--farbe-akzent);
    text-decoration: none;
}

/* "Einsatzplan/Monatsnachweis anlegen": gestrichelt - hier fehlt noch
   etwas, und es sieht anders aus als ein fertiges Dokument. */
.inline-form button.knopf-anlegen {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border: 1px dashed #8fa6bd;
    border-radius: 6px;
    background: #fff;
    color: var(--farbe-akzent);
    font-size: 0.88rem;
    text-decoration: none;
}

.inline-form button.knopf-anlegen:hover {
    background: #e3edf7;
    border-style: solid;
}

/* Feiertagsarbeit (v1.79): Die Spalten stehen ZUSAETZLICH da und zaehlen
   nicht in die Gesamtstunden. Leicht abgesetzt, damit niemand sie beim
   Ueberschlagen der Zeile mitaddiert. */
.spalte-feiertag {
    background: #f4f6f8;
}

/* Veranstaltungstermine in der Nachweisliste (v1.86). Die Bezeichnung
   steht unter Datum und Wochentag; ein abgesagter Termin tritt zurueck,
   seine Dokumente daneben bleiben normal lesbar. */
.nachweis-tag .termin-bezeichnung {
    color: #5f6b77;
    font-weight: 600;
}

tr.termin-abgesagt td.nachweis-tag {
    color: #6b6b6b;
}

/* "+ Neuer Termin" neben der Jahresauswahl: springt zum Formular am
   Ende der Seite (v1.87). Rechts abgesetzt, damit es nicht wie ein Teil
   der Zaehlzeile aussieht. */
.termin-neu-link {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
}

.termin-aktionen {
    margin-top: 1rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.termin-bezeichnungen {
    margin-top: 1.25rem;
}

.termin-bezeichnungen summary {
    cursor: pointer;
    color: var(--farbe-akzent);
}

/* Eingabefeld und "Umbenennen" in einer Zeile. Der Knopf ist klein und
   ohne den Abstand, den .formular-box button sonst jedem Knopf gibt. */
.termin-bezeichnung-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.formular-box .termin-bezeichnung-zeile input[type="text"] {
    flex: 1;
    min-width: 10rem;
    padding: 0.3rem;
}

.formular-box .termin-bezeichnung-zeile button {
    margin: 0;
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
}

/* Personensuche der Startseite (v1.96). */
.personensuche {
    margin: 0 0 1.5rem;
}

.personensuche-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.personensuche-form label {
    font-weight: 600;
}

.personensuche-form input[type="search"] {
    flex: 0 1 22rem;
    min-width: 12rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 4px;
    font: inherit;
}

.personensuche-form button {
    padding: 0.45rem 1.1rem;
    background: var(--farbe-akzent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font: inherit;
    cursor: pointer;
}

.suchtreffer {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    max-width: 34rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 4px;
}

.suchtreffer li {
    padding: 0.35rem 0.7rem;
    border-bottom: 1px solid var(--farbe-rand);
}

.suchtreffer li:last-child {
    border-bottom: none;
}

.marke-deaktiviert {
    display: inline-block;
    padding: 0 0.35rem;
    border-radius: 3px;
    background: #eceff2;
    color: #555;
    font-size: 0.8rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Personalblatt (v1.96): zwei Kaesten nebeneinander, darunter Abwesenheiten
   und Einsaetze. Schmaler gesetzt als die Arbeitsseiten - es ist ein Blatt
   zum Lesen. */
.blatt-zurueck {
    margin: 0 0 0.3rem;
}

.blatt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem 1.5rem;
    max-width: 60rem;
    margin: 1rem 0 0.5rem;
}

.blatt-kasten {
    border: 1px solid var(--farbe-rand);
    border-radius: 6px;
    padding: 0.6rem 1rem 0.8rem;
}

.blatt-kasten h2 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.blatt-felder {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 1rem;
    margin: 0;
}

.blatt-felder dt {
    color: #6b6b6b;
}

.blatt-felder dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.blatt-jahre {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tabelle-blatt-einsaetze td {
    vertical-align: top;
}

/* Auswertung der Umsatzuebersicht (v2.00): Diagramme als SVG aus PHP
   (umsatz-diagramm.php). Die Schrift erbt die Seite; Masse sind
   viewBox-Einheiten (900 breit), das Diagramm skaliert mit. */
.umsatz-sprung {
    margin: -0.4rem 0 1rem;
}

.umsatz-auswertung {
    margin-top: 2rem;
}

.umsatz-auswertung h3 {
    margin: 1.5rem 0 0.4rem;
    font-size: 1.05rem;
}

.umsatz-diagramm {
    display: block;
    width: 100%;
    max-width: 62rem;
    height: auto;
    font-family: inherit;
}

.umsatz-diagramm .ud-gitter {
    stroke: #e3e7ec;
    stroke-width: 1;
}

.umsatz-diagramm .ud-grundlinie {
    stroke: #8a96a3;
    stroke-width: 1;
}

.umsatz-diagramm .ud-null {
    stroke: var(--farbe-akzent);
    stroke-width: 3;
}

.umsatz-diagramm text {
    fill: var(--farbe-text);
    font-size: 13px;
}

.umsatz-diagramm .ud-achse,
.umsatz-diagramm .ud-klein {
    fill: #66707a;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.umsatz-diagramm .ud-wert,
.umsatz-diagramm .ud-jahr {
    font-weight: 600;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.umsatz-diagramm .ud-balkenwert {
    font-size: 10.5px;
    fill: #3d4650;
    font-variant-numeric: tabular-nums;
}

.umsatz-diagramm .ud-leer {
    fill: #9aa3ad;
    font-size: 12px;
}

.umsatz-diagramm .ud-plus {
    fill: var(--farbe-erfolg);
}

.umsatz-diagramm .ud-minus {
    fill: var(--farbe-fehler);
}

/* Beim Hinzeigen hebt sich der Balken ab - der Betrag steht im Tooltip. */
.umsatz-diagramm g:hover rect {
    filter: brightness(0.88);
}

/* Jahreszahl im Balken (v2.04); die Farbe setzt umsatz-diagramm.php je
   nach Helligkeit des Balkens. */
.umsatz-diagramm .ud-balkenjahr {
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Handytauglich (v2.05): Seit dieser Version tragen alle Seiten die
   viewport-Angabe - das Handy zeigt sie in seiner Breite statt verkleinert
   in Schreibtischbreite. Diese Regeln stehen am Ende, damit sie die
   gleichgewichtigen Regeln weiter oben schlagen. Was breiter ist als der
   Bildschirm, rollt in sich seitwaerts; die Seite selbst nie. */
@media (max-width: 40rem) {
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    /* Breite Tabellen rollen in ihrem Kasten. max-content + max-width:
       Eine schmale Tabelle bleibt so breit wie ihr Inhalt, eine breite
       hoert am Bildschirmrand auf und rollt. Nicht die Erfassung (rollt in
       ihrem eigenen Bereich, die Spaltenkoepfe haften dort) und nicht die
       Terminliste (wird unten zu Karten). */
    .tabelle:not(.tabelle-erfassung):not(.tabelle-nachweise) {
        display: block;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
    }

    /* In einem Rollkasten (Jahresuebersicht, naechste Termine) rollt schon
       der Kasten - die Tabelle bleibt Tabelle. */
    .tabelle-rollbar .tabelle:not(.tabelle-erfassung) {
        display: table;
        width: 100%;
        max-width: none;
    }

    .erfassung-rollbereich {
        overflow-x: auto;
    }

    :where(input, select, textarea) {
        max-width: 100%;
    }

    .formular-box,
    .formular-box-breit {
        max-width: none;
    }

    .kachel {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Terminliste als Karten: je Termin ein Block, Einsatzplan und
       Monatsnachweis untereinander, der Spaltenkopf steht davor
       (data-titel). Drei Spalten nebeneinander hatten am Handy je ein
       Drittel von 340 px. */
    .tabelle-nachweise,
    .tabelle-nachweise tbody,
    .tabelle-nachweise tr,
    .tabelle-nachweise td {
        display: block;
        width: auto;
    }

    .tabelle-nachweise thead {
        display: none;
    }

    .tabelle-nachweise tr {
        padding: 0.45rem 0;
        border-bottom: 1px solid #e6eaee;
    }

    .tabelle-nachweise tbody > tr:last-child {
        border-bottom: 0;
    }

    .tabelle-nachweise td,
    .tabelle-nachweise > :last-child > tr:last-child > td {
        padding: 0.25rem 0.75rem;
        border-bottom: 0;
    }

    .tabelle-nachweise td[data-titel]::before {
        content: attr(data-titel);
        display: block;
        margin-bottom: 0.15rem;
        color: #6b7783;
        font-size: 0.78rem;
        font-weight: 600;
    }

    .tabelle:not(.tabelle-erfassung):not(.tabelle-umsatz) > tbody > tr:hover > td {
        background: none;
    }
}