/*
 * Einsatzbuch - Oberflaeche
 *
 * Bewusst handgeschrieben und ohne Rahmenwerk. Zwei Gruende:
 *
 * 1. Die Nutzung findet auf dem Handy statt, oft im Keller eines Objekts mit
 *    einem Balken Empfang. Eine Datei von wenigen Kilobyte laedt dort, ein
 *    Rahmenwerk von mehreren Megabyte nicht.
 * 2. Bedient wird mit Arbeitshandschuhen bei schlechtem Licht. Das verlangt
 *    grosse Flaechen und harte Kontraste - nicht die feinen Grautoene, die
 *    ein Rahmenwerk voreinstellt.
 *
 * Alle Flaechen zum Antippen sind mindestens 48 Pixel hoch.
 */

/*
 * Farben und Schrift stammen aus dem Markenblatt zum Logo:
 *   Hauptfarbe      #0F7D5B
 *   Helle Variante  #D8F1E7
 *   Schrift         Inter Semibold
 *
 * Die Kopfzeile ist ein sehr dunkles Gruen aus derselben Familie, nicht
 * Schwarz und nicht Blau - so gehoert sie sichtbar zur Marke, und das weisse
 * Buchzeichen steht klar darauf.
 */
:root {
    --grund: #f4f6f5;
    --flaeche: #ffffff;
    --rand: #d5dbd8;
    --text: #16211d;
    --text-leise: #5a6763;
    --tief: #0a3428;          /* Kopfzeile, Fusszeile */
    --tief-hell: #0b5f45;
    --signal: #0f7d5b;        /* Hauptfarbe der Marke */
    --signal-dunkel: #0b5f45;
    --gut: #0f7d5b;
    --gut-flaeche: #d8f1e7;   /* helle Variante der Marke */
    --warnung: #8a5a00;
    --warnung-flaeche: #fdf3dc;
    --fehler: #a81f13;
    --fehler-flaeche: #fbeae8;

    --radius: 6px;
    --schatten: 0 1px 2px rgba(16, 40, 58, .09), 0 4px 12px rgba(16, 40, 58, .05);

    color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    /* Inter zuerst, falls sie auf dem Geraet vorhanden ist - geladen wird
       sie NICHT. Siehe partials/kopfdaten.blade.php: Google Fonts uebertraegt
       die IP des Besuchers an Google, und selbst ausliefern kostet 343 KB je
       Schnitt. Die Systemschriften dahinter sind Inter nah genug. */
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;          /* nicht 14 - das liest niemand im Halbdunkeln */
    line-height: 1.55;

    /* Die Fussleiste gehoert an den unteren Rand, auch wenn die Seite kurz
       ist. Ohne das endet sie mitten im Bild und darunter steht eine leere
       Flaeche - das sieht aus, als waere die Seite abgebrochen. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3 {
    line-height: 1.2;
    text-wrap: balance;
    margin: 0 0 .5em;
    font-weight: 600;         /* Inter Semibold, wie im Markenblatt */
}
h1 { font-size: 1.9rem; letter-spacing: -.015em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--tief-hell); }

.leise { color: var(--text-leise); }
.klein { font-size: .9rem; }
.mitte { text-align: center; }

/* ---------- Geruest ---------- */

.huelle {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.eng { max-width: 30rem; }

.kopf {
    background: var(--tief);
    color: #fff;
    padding: .75rem 0;
}

.kopf .huelle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.marke {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.01em;
}

/* Buchzeichen in der Kopfzeile. Nimmt ueber currentColor die Textfarbe an -
   auf dunklem Grund also weiss, ohne zweite Datei. */
.marke-zeichen-svg {
    display: block;
    flex: none;
    line-height: 0;
}

.marke-zeichen-svg svg {
    height: 30px;
    width: auto;
    display: block;
}

.marke-wort {
    font-weight: 600;
    letter-spacing: -.015em;
}

.marke-zeichen {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 5px;
    background: var(--signal);
    font-size: 1rem;
}

.kopf nav { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }

.kopf nav a {
    color: #dce6ee;
    text-decoration: none;
    padding: .55rem .7rem;
    border-radius: var(--radius);
    font-size: .95rem;
}

.kopf nav a:hover, .kopf nav a:focus-visible { background: rgba(255,255,255,.12); color: #fff; }
.kopf nav a[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; }

/* Abmelden muss ein Knopf sein, kein Verweis: Es aendert etwas und gehoert
   deshalb hinter ein Formular mit Sicherheitsmarke. Aussehen soll es
   trotzdem wie die Verweise daneben - sonst springt in der Kopfzeile
   plotzlich ein Bedienelement heraus, das gar nicht wichtiger ist. */
.kopf nav button.wie-verweis {
    font: inherit;
    font-size: .95rem;
    color: #dce6ee;
    background: transparent;
    border: 0;
    padding: .55rem .7rem;
    border-radius: var(--radius);
    cursor: pointer;
    min-height: auto;
}

.kopf nav button.wie-verweis:hover,
.kopf nav button.wie-verweis:focus-visible { background: rgba(255,255,255,.12); color: #fff; }

main {
    padding: 2rem 0 3rem;
    flex: 1 0 auto;           /* schiebt die Fussleiste nach unten */
}

.fuss {
    background: var(--tief);
    color: #a9bccb;
    padding: 1.5rem 0;
    font-size: .9rem;
    margin-top: 3rem;
    flex: none;
}

.fuss a { color: #cfdde7; }
.fuss .huelle { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- Flaechen ---------- */

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.5rem;
}

.karte + .karte { margin-top: 1rem; }

.raster {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

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

.feld { margin-bottom: 1.15rem; }

label {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
    font-size: .95rem;
}

/* `time` und `search` fehlten hier - und deshalb bekamen genau diese
   beiden Feldarten weder Breite noch Hoehe noch Rahmen. Auf dem iPhone
   schrumpfte ein leeres Zeitfeld damit auf eine graue Kachel von zwei
   Zentimetern, in die niemand tippt (gemeldet 16.09.2026: "von bis ist
   komische Kachel"). Wer hier eine Feldart ergaenzt, traegt sie bitte
   auch ein - eine Liste, die fast alle Arten nennt, sieht vollstaendig
   aus und ist es nicht. */
input[type=text], input[type=email], input[type=password],
input[type=tel], input[type=date], input[type=number],
input[type=time], input[type=search], input[type=datetime-local],
select, textarea {
    width: 100%;

    /* Safari gibt Datums- und Zeitfeldern eine eigene Mindestbreite, und
       die schlaegt `width: 100%`. Auf dem iPhone ragte das Tagesfeld
       deshalb ueber den Rand der Karte hinaus (gemeldet 16.09.2026:
       "Manche Felder ragen raus"). `min-width: 0` nimmt dem Browser die
       Vorgabe ab, `max-width` faengt den Rest. */
    min-width: 0;
    max-width: 100%;

    min-height: 48px;         /* Fingerkuppe mit Handschuh */
    padding: .6rem .75rem;
    font: inherit;
    color: var(--text);
    background: #fff;
    border: 2px solid var(--rand);
    border-radius: var(--radius);
}

textarea { min-height: 7rem; }

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

.hinweis-feld { font-size: .88rem; color: var(--text-leise); margin-top: .3rem; }

.haken {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-weight: 400;
    font-size: .95rem;
    line-height: 1.45;
}

.haken input { width: 24px; height: 24px; min-height: 0; flex: none; margin-top: .15rem; }

/* ---------- Schaltflaechen ---------- */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 52px;
    padding: .7rem 1.4rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--signal);
    border: 2px solid var(--signal);
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
}

.knopf:hover { background: var(--signal-dunkel); border-color: var(--signal-dunkel); }

.knopf.breit { width: 100%; }

.knopf.ruhig {
    background: transparent;
    color: var(--tief);
    border-color: var(--rand);
}

.knopf.ruhig:hover { background: #ece9e4; border-color: #bcb8b1; }

.knopf.gefahr { background: var(--fehler); border-color: var(--fehler); }

/* ---------- Meldungen ---------- */

.meldung {
    border: 1px solid;
    border-left-width: 5px;
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin-bottom: 1.25rem;
}

.meldung.gut { background: var(--gut-flaeche); border-color: var(--gut); color: #14532d; }
.meldung.warnung { background: var(--warnung-flaeche); border-color: var(--warnung); color: #6b4400; }
.meldung.fehler { background: var(--fehler-flaeche); border-color: var(--fehler); color: #7d1710; }
.meldung ul { margin: .4rem 0 0; padding-inline-start: 1.2rem; }
.meldung p:last-child { margin-bottom: 0; }

/* ---------- Werbung ----------
 * Ruhiger Platz am Fuss der Uebersicht. Nie waehrend des Stempelns, nie als
 * Einblendung, die weggeklickt werden muss.
 */

.werbung {
    margin-top: 2.5rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: #fbfaf8;
    padding: 1.1rem 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.werbung-marke {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-leise);
    display: block;
    margin-bottom: .2rem;
}

.werbung-text { flex: 1 1 16rem; }
.werbung-text strong { display: block; font-size: 1.02rem; }
.werbung-text p { margin: .15rem 0 0; font-size: .93rem; color: var(--text-leise); }

/* ---------- Kleinteile ---------- */

.marke-zeile {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 100px;
    border: 1px solid var(--rand);
    background: #fff;
}

.marke-zeile.frei { border-color: var(--gut); color: var(--gut); background: var(--gut-flaeche); }
.marke-zeile.zu { border-color: var(--rand); color: var(--text-leise); }

.trenner { border: 0; border-top: 1px solid var(--rand); margin: 1.5rem 0; }

@media (max-width: 30rem) {
    body { font-size: 16px; }
    h1 { font-size: 1.55rem; }
    .karte { padding: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---------- Stempeln ----------
 * Der eine Bildschirm, der im Halbdunkeln mit Handschuhen bedienbar sein
 * muss. Deshalb: sehr grosse Schrift fuer den Zustand, ein Knopf ueber die
 * ganze Breite, keine Feinheiten.
 */

.stempel-karte { text-align: center; }

.stempel-lage {
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--signal);
    margin-bottom: .25rem;
}

.stempel-lage.ruht { color: var(--text-leise); }

.stempel-karte.laeuft {
    border-color: var(--signal);
    border-left-width: 5px;
    background: var(--gut-flaeche);
}

.stempel-uhr {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1;
    margin: .3rem 0 .1rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.stempel-seit { color: var(--text-leise); font-size: .95rem; margin-bottom: 1.25rem; }

.stempel-form { text-align: start; max-width: 22rem; margin: 0 auto; }
.stempel-form label { margin-top: .5rem; }
.stempel-form .knopf { margin-top: 1.1rem; }

.stempel-ort-fest {
    background: #fff;
    border: 2px solid var(--signal);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    margin: .5rem 0 0;
}

/* Der Stempelknopf ist absichtlich groesser als jeder andere. */
.knopf.gross { min-height: 68px; font-size: 1.15rem; }

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

.zeitliste li {
    display: flex;
    align-items: baseline;
    gap: .9rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--rand);
}

.zeitliste li:last-child { border-bottom: 0; }

.zeitliste-zeit {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    flex: none;
    min-width: 6.4rem;
}

.zeitliste-ort { flex: 1 1 auto; min-width: 0; }

.zeitliste-dauer {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    flex: none;
}

.zeitliste li.storniert { opacity: .5; text-decoration: line-through; }

/* ---------- Dienstplan ---------- */

/* Der Umschalter zwischen Tag, drei Tagen, Woche und Monat. Als Reihe
   gleich breiter Schaltflaechen, damit kein Daumen danebengreift - und
   umbrechend, weil vier Woerter plus zwei Gruppierungen auf einem
   schmalen Telefon sonst herausragen. */
.umschalter {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.umschalter-knopf {
    flex: 1 1 auto;
    text-align: center;
    padding: .55rem .7rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    font-size: .95rem;
    white-space: nowrap;

    /* Fingerkuppe mit Handschuh - dieselbe Vorgabe wie bei den
       Eingabefeldern. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.umschalter-knopf.an {
    background: var(--signal);
    border-color: var(--signal);
    color: #fff;
    font-weight: 600;
}

.zeitraum-leiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: .6rem;
}

.zeitraum-text {
    flex: 1 1 auto;
    text-align: center;
    font-weight: 600;

    /* Ein langer Monatsname darf die Pfeile nicht aus der Zeile
       schieben. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ein Block je Mitarbeiter (oder je Objekt) innerhalb eines Tages. */
.planzeile {
    padding: .6rem 0;
    border-top: 1px solid var(--rand);
}

.planzeile:first-of-type { border-top: 0; }

.planzeile-kopf {
    display: block;
    font-weight: 600;
    margin-bottom: .25rem;
}

.planzeile-eintrag {
    display: flex;
    gap: .8rem;
    align-items: baseline;
    padding: .15rem 0;
}

.planzeile-zeit {
    font-variant-numeric: tabular-nums;
    flex: none;
    min-width: 7.5rem;
    color: var(--text-leise);
}

/* Die Monatssummen. Schmal genug fuers Telefon, und was nicht passt,
   scrollt in seinem eigenen Kasten - nie die ganze Seite. */
.plantabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

.plantabelle th,
.plantabelle td {
    padding: .6rem .7rem;

    /* `start` statt `left`: folgt der Leserichtung, statt sie
       vorzuschreiben. */
    text-align: start;
    border-bottom: 1px solid var(--rand);
    white-space: nowrap;
}

.plantabelle th {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-leise);
}

.plantabelle .zahl {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.plantabelle tfoot td { border-bottom: 0; border-top: 2px solid var(--rand); }

/* ---------- Diskreter Modus ---------- */

/* Ein Diensthandy wird im Bus herausgeholt, in der Kita, beim Kunden am
   Tresen. Wer daneben steht, liest mit - und dort stehen Namen von
   Kollegen, Arbeitszeiten und Kosten.

   DAS IST KEINE SPERRE: Wer das Geraet hat, tippt auf das Auge und
   sieht alles. Es hilft gegen Mitlesen ueber die Schulter, nicht gegen
   jemanden, der das Handy in der Hand haelt. */
html.diskret .privat {
    filter: blur(6px);

    /* Sonst laesst sich der unscharfe Text markieren und auslesen -
       das waere ein Schleier ohne Wirkung. */
    user-select: none;
    -webkit-user-select: none;
}

/* Antippen oder Tastaturfokus zeigt eine einzelne Stelle wieder -
   damit man nicht fuer einen Namen den ganzen Bildschirm aufdecken
   muss. */
html.diskret .privat:hover,
html.diskret .privat:active,
html.diskret .privat:focus-within {
    filter: none;
    user-select: auto;
    -webkit-user-select: auto;
}

@media (prefers-reduced-motion: no-preference) {
    .privat { transition: filter .15s; }
}

.diskret-knopf {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: .4rem .5rem;

    /* Fingerkuppe mit Handschuh - dieselbe Vorgabe wie ueberall. */
    min-width: 44px;
    min-height: 44px;
}

/* Nur fuer Vorleseprogramme: Das Auge allein sagt einem Screenreader
   nichts. */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Materialvorschlaege. Als Knoepfe und nicht als Liste: Man tippt einen
   an und er steht in der Zeile - lesen und abschreiben waere langsamer
   als neu tippen. */
.material-vorschlaege {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .8rem;
}

.material-vorschlaege .knopf {
    padding: .35rem .6rem;
    min-height: 38px;
}

.material-vorschlaege .leise { margin-inline-start: .3rem; }

/* ---------- Stundenzettel ---------- */

.zettel-summen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: .8rem;
    margin-top: .8rem;
}

.zettel-summen > div {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.zettel-summen strong { font-size: 1.3rem; }

/* Ein Stundenzettel wird ausgedruckt und unterschrieben. Dann stoeren
   Navigation, Schaltflaechen und Formulare - und der unscharfe Modus
   erst recht: Ein Ausdruck mit verwischten Zahlen ist kein Nachweis. */
@media print {
    .kopf,
    .fuss,
    .nicht-drucken { display: none !important; }

    html.diskret .privat {
        filter: none !important;
        user-select: auto !important;
    }

    .karte {
        box-shadow: none;
        border: 1px solid #999;
        break-inside: avoid;
    }

    body { background: #fff; }

    /* Die Kopfzeile der Tabelle auf jeder Seite wiederholen - sonst
       steht auf Blatt zwei eine Zahlenspalte ohne Beschriftung. */
    .plantabelle thead { display: table-header-group; }
}

/* ---------- Profil ---------- */

.profil-kopf {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.profil-bild {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    overflow: hidden;
    flex: none;

    background: var(--gut-flaeche);
    color: var(--signal-dunkel);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.8rem;
    font-weight: 700;
}

.profil-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Kopfzeile bleibt oben ---------- */

/* Das Menue ist der einzige Weg zu allen anderen Seiten. Wer auf einem
   langen Stundenzettel unten steht, soll nicht erst hochscrollen
   muessen, um woandershin zu kommen. */
.kopf {
    position: sticky;
    top: 0;
    z-index: 40;
}

/* Ohne das verschwindet das Ziel eines Sprungverweises hinter der
   festen Kopfzeile - man landet auf der Ueberschrift und sieht sie
   nicht. */
html { scroll-padding-top: 4.5rem; }

/* Die Klapptafel muss ueber der Kopfzeile liegen, sonst schneidet deren
   Stapelebene sie ab. */
.menue-tafel { z-index: 60; }

/* Das Logo im Support-Block. Eine feste Hoehe, damit es neben dem Text
   nicht dominiert - es ist eine Absenderangabe, keine Werbung. */
.support-logo {
    margin-bottom: .6rem;
}

.support-logo svg {
    height: 2rem;
    width: auto;
    display: block;
}

/* ---------- Navigation ---------- */

.nav {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: nowrap;

    /* Sie steht rechts neben dem Buchzeichen und darf nie umbrechen -
       genau das war der Fehler vorher. */
    margin-inline-start: auto;
}

/* Die eine Handlung, die staendig gebraucht wird. */
.nav-schnell {
    color: #fff;
    text-decoration: none;
    padding: .5rem .8rem;
    border-radius: var(--radius);
    white-space: nowrap;
    font-weight: 600;
}

.nav-schnell.an { background: rgba(255, 255, 255, .16); }

/* Der Umschalter. `<details>` klappt auch ohne JavaScript auf und wird
   von Vorleseprogrammen richtig angesagt. */
.menue { position: relative; }

.menue-knopf {
    list-style: none;
    cursor: pointer;
    color: #fff;
    padding: .5rem .7rem;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;

    /* Fingerkuppe mit Handschuh - dieselbe Vorgabe wie ueberall. */
    min-height: 44px;
}

/* Safari zeichnet sonst ein eigenes Dreieck davor. */
.menue-knopf::-webkit-details-marker { display: none; }

.menue[open] .menue-knopf { background: rgba(255, 255, 255, .16); }

/* Auf schmalen Geraeten spart das Wort Platz - das Zeichen genuegt. */
@media (max-width: 26rem) {
    .menue-wort { display: none; }
}

.menue-tafel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + .5rem);
    z-index: 50;

    background: var(--flaeche);
    color: var(--text);
    border-radius: 12px;
    box-shadow: var(--schatten);
    padding: .6rem;

    min-width: 15rem;

    /* Auf einem kleinen Bildschirm darf die Tafel nicht laenger sein als
       der Bildschirm - sonst steht das Abmelden unerreichbar darunter. */
    max-height: min(70vh, 34rem);
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.menue-gruppe {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rand);
    padding-top: .45rem;
}

.menue-gruppe:first-child { border-top: 0; padding-top: 0; }

.kopf nav .menue-titel {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-leise);
    padding: .25rem .6rem;
}

/* `.kopf nav ...` davor ist kein Zierrat: Die Tafel liegt INNERHALB der
   Navigation, und dort faerbt `.kopf nav a` alles hell - richtig auf der
   dunklen Kopfzeile, unlesbar auf der weissen Tafel. Ohne diese Stufe
   gewinnt die aeltere Regel. */
.kopf nav .menue-tafel a {
    color: var(--text);
    text-decoration: none;
    padding: .6rem;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-height: 44px;
}

.kopf nav .menue-tafel a:hover { background: var(--grund); }

/* DIE FARBE HIER AUSDRUECKLICH. `.kopf nav a[aria-current]` setzt seit
   jeher `color: #fff` - richtig auf der dunklen Kopfzeile, unsichtbar
   auf dem hellgruenen Grund der Tafel. Beide Regeln sind gleich
   spezifisch; wer gewinnt, entschiede sonst die Reihenfolge im
   Stylesheet, und die aendert sich beim naechsten Umbau. */
.kopf nav .menue-tafel a[aria-current="page"] {
    background: var(--gut-flaeche);
    color: var(--signal-dunkel);
    font-weight: 600;
}

.kopf nav .menue-abmelden {
    background: none;
    border: 0;
    color: var(--fehler);
    font: inherit;
    text-align: start;
    cursor: pointer;
    padding: .6rem;
    border-radius: var(--radius);
    min-height: 44px;
    width: 100%;
}

.kopf nav .menue-abmelden:hover { background: var(--fehler-flaeche); }

/* Was Aufmerksamkeit braucht. Eine Zahl am Eintrag und ein Punkt am
   geschlossenen Menue - sonst muesste man aufklappen, um zu sehen, ob
   sich das Aufklappen lohnt. */
.menue-zahl {
    background: var(--signal);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .1rem .45rem;
    min-width: 1.4rem;
    text-align: center;
}

.menue-punkt {
    position: absolute;
    top: .35rem;
    inset-inline-end: .35rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--warnung);
}

/* ---------- Rechts nach links ---------- */

/* Arabisch und Farsi. Der Grossteil passiert von selbst: Flex, Grid und
   Text richten sich nach dem `dir`-Merkmal am Seitenrumpf. Hier steht
   nur, was sonst in die falsche Richtung zeigt. */

/* Aufzaehlungen und Einrueckungen. `padding-left` waere links auch dann,
   wenn die Schrift von rechts kommt - `padding-inline-start` folgt der
   Leserichtung. */
[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-inline-start: 1.2rem;
    padding-inline-end: 0;
}


/* Die Pfeile zum Blaettern MEINEN eine Richtung, sie zeigen sie nicht
   nur an: "zurueck" ist in arabischer Schrift rechts. Gespiegelt statt
   ausgetauscht - so bleibt im HTML ein Pfeil ein Pfeil. */
[dir="rtl"] .zeitraum-leiste .knopf { transform: scaleX(-1); }

/* Der farbige Rand an einer Warnkarte gehoert an den Anfang der Zeile,
   nicht immer nach links. Da er im HTML als `border-left` steht, wird er
   hier umgehaengt. */
[dir="rtl"] .karte[style*="border-left"] {
    border-left: 0 !important;
    border-right: 4px solid currentColor;
}

/* Beschriftung und Wert im Terminfenster. */
[dir="rtl"] .termin-kopf { text-align: start; }

/* Der Kalender bringt eigene Ausrichtungen mit. Die Bibliothek kann
   rechts nach links, muss es aber gesagt bekommen - das passiert im
   Skript ueber `direction`. Hier nur die Beschriftungen. */
[dir="rtl"] .fc { direction: rtl; }

/* Eine Zahl bleibt eine Zahl. Uhrzeiten und Betraege werden NICHT
   gespiegelt - "15:55" ist auch in arabischer Schrift 15:55, und
   "3,5 Std" bleibt lesbar, wenn die Ziffern ihre Richtung behalten. */
.zeitliste-zeit,
.zeitliste-dauer,
.tageskarte-uhr,
.planzeile-zeit,
.plantabelle .zahl {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---------- Startseite ---------- */

.tageskarte {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.tageskarte-datum { font-size: .9rem; color: var(--text-leise); }

.tageskarte-uhr {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tageskarte-wetter {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.tageskarte-zeichen { font-size: 2.2rem; line-height: 1; }

/* Der Support steht am Ende und soll sich vom Betrieblichen abheben,
   ohne zu schreien. */
.support-karte { background: var(--grund); }

/* ---------- Terminfenster ---------- */

/* Auf dem Telefon kommt es von unten - dort ist der Daumen. Am Rechner
   steht es mittig. Beides dieselbe Tafel, nur anders verankert. */
.termin-fenster {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(10, 30, 24, .45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

.termin-tafel {
    background: var(--flaeche);
    width: 100%;
    max-width: 32rem;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.1rem;
    border-radius: 14px 14px 0 0;
    box-shadow: var(--schatten);
}

@media (min-width: 40rem) {
    .termin-fenster { align-items: center; padding: 1rem; }
    .termin-tafel { border-radius: 14px; }
}

/* Beschriftung links, Wert rechts - untereinander lesbar, ohne dass
   eine lange Anschrift die Spalte sprengt. */
.termin-zeile {
    display: flex;
    gap: .8rem;
    align-items: baseline;
    padding: .45rem 0;
    border-top: 1px solid var(--rand);
}

.termin-zeile:first-child { border-top: 0; }

.termin-kopf {
    flex: none;
    min-width: 6.5rem;
    color: var(--text-leise);
    font-size: .85rem;
}

/* Der Navigationsknopf ueber die volle Breite: Er ist der Grund, warum
   das Fenster ueberhaupt aufgemacht wurde. */
#termin-knoepfe .knopf { width: 100%; text-align: center; }

/* Die drei Navigations-Apps nebeneinander. Umbrechend, weil "Apple
   Karten" und "Google Maps" zusammen auf einem schmalen Telefon nicht
   in eine Zeile passen. */
.navi-wahl {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.navi-wahl .knopf {
    flex: 1 1 8rem;
    text-align: center;
}

/* ---------- Kalender ---------- */

/* Welche Farbe zu wem gehoert. Ohne Legende ist ein Farbblock nur
   bunt - man muss jeden einzeln antippen, um zu wissen, wer es ist. */
.kalender-legende {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .8rem;
}

.kalender-marke {
    padding: .2rem .55rem;
    border-radius: 999px;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
}

/* Die Bibliothek bringt eigene Schriftgroessen mit, die neben unseren
   zu gross wirken - und auf dem Telefon die Kopfzeile sprengen. */
.fc { font-size: .9rem; }
.fc .fc-toolbar-title { font-size: 1.05rem; }

.fc .fc-button {
    background: var(--flaeche);
    border-color: var(--rand);
    color: var(--text);
    font-size: .8rem;
    padding: .35rem .6rem;
    text-transform: none;
}

.fc .fc-button-active,
.fc .fc-button:not(:disabled):active {
    background: var(--signal);
    border-color: var(--signal);
    color: #fff;
}

/* Die Werkzeugleiste bricht auf dem Telefon sonst ueber den Rand. */
.fc .fc-toolbar {
    flex-wrap: wrap;
    gap: .5rem;
}

/* ---------- Datums- und Zeitfelder ---------- */

/* Safari haengt an diesen Feldern eine eigene Mindestbreite, die sich
   aus dem Standardaussehen ergibt - `width: 100%` und `min-width: 0`
   kommen dagegen nicht an. Auf dem iPhone ragte "von" damit ueber den
   Rand der Karte und "bis" schob sich unter "Pause" (gemeldet
   16.09.2026).

   `appearance: none` nimmt nur die Zeichnung weg. Der Waehler beim
   Antippen bleibt, und Rahmen und Polster kommen aus der Feldregel
   weiter oben. */
input[type=date],
input[type=time],
input[type=datetime-local] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;

    /* Ohne feste Hoehe fallen diese Felder sonst flacher aus als die
       Nachbarn, und die Zeile sieht wieder schief aus. */
    min-height: 48px;
}

/* ---------- Zeilen im Rapport ---------- */

/* Personen und Material standen als `flex-wrap` nebeneinander. Bei
   unterschiedlich hohen Beschriftungen rutschen die Felder dann
   gegeneinander: Auf dem iPhone sass "bis" unter "Anzahl" und schob
   sich halb unter "Pause" (gemeldet 16.09.2026: "Unsauber").

   Ein Raster mit festen Spalten kann das nicht. Zwei Spalten auf dem
   Telefon, sechs auf dem Schreibtisch - und was in eine Zeile fuer sich
   gehoert, bekommt `breit`. */
.personal-zeile,
.material-zeile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem .7rem;
    align-items: end;
    padding: .7rem 0;
    border-top: 1px solid var(--rand);
}

.personal-zeile .feld,
.material-zeile .feld { margin: 0; min-width: 0; }

/* Jedes Feld bleibt in seiner Spalte. Ein Raster faengt das nur ab,
   solange das Kind selbst nicht breiter sein will - deshalb hier
   ausdruecklich. */
.personal-zeile input,
.personal-zeile select,
.material-zeile input,
.material-zeile select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.personal-zeile .feld.breit,
.material-zeile .feld.breit { grid-column: 1 / -1; }

/* Die Beschriftung darf nicht umbrechen und damit die Nachbarzelle
   nach unten druecken - genau daraus entstand das schiefe Bild. */
.personal-zeile label,
.material-zeile label {
    display: block;
    margin-bottom: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 52rem) {
    .personal-zeile { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .material-zeile { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .personal-zeile .feld.breit { grid-column: span 2; }
    .material-zeile .feld.breit { grid-column: span 2; }
}

/* ---------- Ausgeblendetes bleibt ausgeblendet ---------- */

/* Der Browser bringt fuer `hidden` nur `display: none` ohne Nachdruck
   mit. Jede eigene Regel schlaegt das - `.zeitliste li { display: flex }`
   genuegt, und ein direktes `style="display:flex"` erst recht.

   Folge: Beide Suchfelder (Einsatzorte und Rapportformular) setzten
   brav `hidden`, und sichtbar passierte nichts. Gemeldet am 16.09.2026
   als "Suche geht nicht".

   Deshalb hier mit Nachdruck. `!important` aus dem Stylesheet schlaegt
   auch ein direktes style-Attribut - anders waere der Fall an den
   Rapportzeilen nicht zu erwischen. */
[hidden] { display: none !important; }

/* ---------- Monatsansicht ---------- */

.monatskopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.monatskopf h1 { margin: 0; font-size: 1.5rem; text-align: center; }
.monatskopf .knopf { min-width: 56px; }

.summe-karte {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--gut-flaeche);
    border-color: var(--signal);
}

.summe-karte strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

.tageskarte { padding: 1rem 1.25rem; }

.tageskopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--rand);
    margin-bottom: .3rem;
}

.tagesdatum { font-weight: 600; }
.tagessumme { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Betreiber-Ansicht ----------
 * Bewusst anders als die Mandantenoberflaeche. Wer hier arbeitet, sieht
 * fremde Daten - das muss an jeder Stelle erkennbar sein, nicht nur auf der
 * ersten Seite.
 */

.betreiber-streifen {
    background: #7a2718;
    color: #fff;
    text-align: center;
    padding: .4rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .03em;
}

body.betreiber { background: #eceeed; }
body.betreiber .kopf, body.betreiber .fuss { background: #241f1c; }

.kennzahlen {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    margin-bottom: 1.5rem;
}

.kennzahlen > div {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: .9rem 1rem;
}

.kz-wert {
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.kz-name { display: block; font-size: .82rem; color: var(--text-leise); }

/* ---------- Zugangsdaten (einmalige Anzeige) ---------- */

.zugangskarte { border-color: var(--signal); border-left-width: 5px; background: var(--gut-flaeche); }

.zugangsdaten { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 1rem 0 0; }
.zugangsdaten dt { font-weight: 600; color: var(--text-leise); }
.zugangsdaten dd { margin: 0; }

.zugangsdaten .passwort {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .04em;
    user-select: all;
}

details.karte summary { cursor: pointer; }

/* ---------- Korrekturen ---------- */

.knopf-klein {
    min-height: 36px;
    padding: .25rem .7rem;
    font-size: .85rem;
    flex: none;
}

.antrag.offen { border-left: 5px solid var(--warnung); }
.antrag.genehmigt { border-left: 5px solid var(--signal); }
.antrag.abgelehnt { border-left: 5px solid var(--rand); opacity: .75; }

/* ---------- Haeufige Fragen ---------- */

.fragen { display: grid; gap: .6rem; }

.fragen details { padding: 1rem 1.25rem; }
.fragen summary { cursor: pointer; line-height: 1.4; }
.fragen summary::marker { color: var(--signal); }
.fragen details p { margin: .8rem 0 0; color: var(--text-leise); }
.fragen details[open] summary { margin-bottom: .2rem; }

/* ---------- Auswahl mit zwei Wegen ---------- */

.wahl { border: 0; padding: 0; margin: 0 0 1.25rem; }

.wahl legend {
    font-weight: 600;
    font-size: .95rem;
    padding: 0;
    margin-bottom: .5rem;
}

.wahl-feld {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    border: 2px solid var(--rand);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    margin-bottom: .5rem;
    cursor: pointer;
    font-weight: 400;
    background: #fff;
}

.wahl-feld:has(input:checked) {
    border-color: var(--signal);
    background: var(--gut-flaeche);
}

.wahl-feld input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: .15rem; }
.wahl-feld > span { display: block; }
.wahl-feld strong { display: block; }

/* ---------- Beitrittscode ---------- */

.code-wert {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .1em;
    user-select: all;
}

/* ═══════════════ Dashboard-Startseite (db-*) ═══════════════
   Ergänzt 27.09.2026 - die dashboard.blade nutzte diese Klassen, das CSS
   fehlte (alles ungestylt). Rein additiv, im grünen Marken-Look. */
.db-uhr-karte { text-align: center; }
.db-uhr { font-size: 2.6rem; font-weight: 700; letter-spacing: .02em; margin: 0; color: var(--tief-hell); font-variant-numeric: tabular-nums; }
.db-datum { margin: .15rem 0 0; color: var(--text-leise); }
.db-himmel { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rand); }
.db-himmel-wert { flex: 1 1 7rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.db-himmel-zeichen { font-size: 1.6rem; line-height: 1; }
.db-himmel-text { font-weight: 600; }
.db-himmel-unten { font-size: .82rem; color: var(--text-leise); }

.db-raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); align-items: start; margin-top: 1rem; }
.db-raster > .karte { margin-top: 0; }

.db-stempel { text-align: center; }
.db-stempel.laeuft { border-color: var(--signal); background: var(--gut-flaeche); }
.db-stempel-lage { font-size: 1.15rem; font-weight: 700; margin: 0 0 .3rem; color: var(--signal-dunkel); }
.db-stempel-lage.ruht { color: var(--text-leise); }
.db-stempel-info { margin: 0 0 1rem; }
.db-stempel .knopf { min-width: 12rem; }

.db-freigabe { border-color: var(--signal); background: var(--gut-flaeche); }
.db-freigabe-text { margin: 0 0 .8rem; font-weight: 600; }

.db-schichten-liste { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.db-schichten-liste li { display: flex; justify-content: space-between; gap: .8rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rand); }
.db-schichten-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.db-schicht-tag { font-weight: 600; }
.db-schicht-ort { color: var(--text-leise); text-align: end; }

.db-schnell > strong { display: block; margin-bottom: .8rem; }
.db-kacheln { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.db-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; text-align: center; min-height: 5rem; padding: .9rem .5rem; background: var(--grund); border: 1px solid var(--rand); border-radius: var(--radius); text-decoration: none; color: var(--text); }
.db-kachel:hover { border-color: var(--signal); background: var(--gut-flaeche); }
.db-kachel-zeichen { font-size: 1.5rem; line-height: 1; }
.db-kachel-text { font-size: .9rem; font-weight: 600; }

/* ---------- Cookie-Hinweis (DSGVO) ---------- */
.cookie-hinweis{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--tief);color:#fff;border-top:3px solid var(--signal);padding:1rem 1.1rem calc(1rem + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:1rem;flex-wrap:wrap;box-shadow:0 -4px 16px rgba(16,40,58,.18)}
.cookie-text{margin:0;font-size:.9rem;flex:1 1 20rem;line-height:1.5}
.cookie-text a{color:#8fe0c4}
.cookie-ok{flex:0 0 auto}

/* Die Links unter "Offene Freigaben": eine Zeile je Art (Korrekturen,
   Abwesenheiten, Zeiten), die auf dem Telefon umbricht statt ueberzulaufen. */
.db-freigabe-links { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Rechts nach links: Nachtraege ---------- */

/* Farbige Randleiste am Zeilenanfang. Diese Regeln stehen oben als
   `border-left` - in Arabisch und Farsi beginnt die Zeile aber rechts.
   Umgehaengt statt die Grundregeln umzuschreiben, damit sich an der
   Darstellung von links nach rechts nichts aendert. */
[dir="rtl"] .meldung,
[dir="rtl"] .stempel-karte.laeuft,
[dir="rtl"] .zugangskarte {
    border-left-width: 1px;
    border-right-width: 5px;
}

[dir="rtl"] .antrag.offen { border-left: 0; border-right: 5px solid var(--warnung); }
[dir="rtl"] .antrag.genehmigt { border-left: 0; border-right: 5px solid var(--signal); }
[dir="rtl"] .antrag.abgelehnt { border-left: 0; border-right: 5px solid var(--rand); }

/* Einrueckungen, die im HTML als `padding-left` im style-Merkmal stehen.
   Das Merkmal schlaegt die allgemeine ul-Regel oben - deshalb hier
   ausdruecklich. */
[dir="rtl"] ul[style*="padding-left"] {
    padding-left: 0 !important;
    padding-right: 1.2rem;
}

/* Die Pfeile im Monatskopf meinen "frueher" und "spaeter" - wie in der
   Zeitraum-Leiste gespiegelt, damit "zurueck" nach rechts zeigt. */
[dir="rtl"] .monatskopf > .knopf { transform: scaleX(-1); }

/* Sprachumschalter in der Kopfzeile (partials/sprachwahl). */
.sprachwahl { position: relative; }
.sprachwahl-knopf {
    list-style: none;
    cursor: pointer;
    color: inherit;
    padding: .5rem .6rem;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 44px;
    font-weight: 600;
    white-space: nowrap;
}
.sprachwahl-knopf::-webkit-details-marker { display: none; }
.sprachwahl[open] .sprachwahl-knopf { background: rgba(255, 255, 255, .16); }
.sprachwahl-liste {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + .4rem);
    z-index: 60;
    min-width: 10rem;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    padding: .35rem;
    display: flex;
    flex-direction: column;
}
.sprachwahl-liste a {
    color: #1a1a1a;
    text-decoration: none;
    padding: .6rem .8rem;
    border-radius: calc(var(--radius) - 2px);
    min-height: 44px;
    display: flex;
    align-items: center;
}
.sprachwahl-liste a:hover, .sprachwahl-liste a:focus-visible { background: rgba(0, 0, 0, .06); }
.sprachwahl-liste a[aria-current] { font-weight: 700; background: rgba(0, 0, 0, .08); }

/* QR-Scanner auf der Stempelseite (stempeln/zeigen). */
.qr-ebene { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.qr-ebene[hidden] { display: none; }
.qr-rahmen { width: min(28rem, 100%); text-align: center; color: #fff; }
.qr-rahmen video { width: 100%; border-radius: var(--radius); background: #000; aspect-ratio: 1 / 1; object-fit: cover; }
.qr-text { margin: .8rem 0; }

/* Wie bei der Menuetafel: `.kopf nav a` faerbt Links hell - auf der weissen
   Sprachliste unlesbar (28.09.2026 live gesehen). Gleiche Spezifitaet plus
   eine Stufe mehr, damit die Reihenfolge nicht entscheidet. */
.kopf nav .sprachwahl-liste a,
.kopf nav .sprachwahl-liste a:hover,
.kopf nav .sprachwahl-liste a:focus-visible {
    color: var(--text);
    font-style: normal;
}
.kopf nav .sprachwahl-liste a:hover,
.kopf nav .sprachwahl-liste a:focus-visible { background: var(--grund); }
.kopf nav .sprachwahl-liste a[aria-current] {
    background: var(--gut-flaeche);
    color: var(--signal-dunkel);
    font-weight: 600;
}
.kopf nav .sprachwahl-knopf { color: #fff; }

/* Unbesetzt (Urlaub/Krank, keine Vertretung): faellt auf, damit Ersatz
   geplant wird. Nur die Leitung bekommt diese Zeilen. */
.db-schichten-liste li.db-schicht-unbesetzt { border-inline-start: 4px solid #B42318; padding-inline-start: .5rem; }
.db-unbesetzt-marke { color: #B42318; text-transform: uppercase; letter-spacing: .02em; }

/* ---------- Store-Knoepfe (02.10.2026) ----------
   Eigene Gestaltung, keine fremden Badge-Bilder (DSGVO). */
.store-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.store-knoepfe-start { margin-top: .8rem; }
.store-knoepfe-anmelden { justify-content: center; margin-top: .7rem; }
.store-titel { font-size: 1.05rem; margin: 1.6rem 0 0; }
.store-knopf {
    display: inline-flex; align-items: center; gap: .55rem;
    min-height: 2.75rem;                 /* Tippflaeche ~44 px */
    padding-block: .4rem;
    padding-inline: .9rem 1.1rem;
    border-radius: 999px;
    background: #111a17;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    text-decoration: none;
    line-height: 1.1;
    white-space: nowrap;
}
.store-knopf:hover { background: #000; color: #fff; text-decoration: none; }
.store-knopf:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; color: #fff; }
.store-knopf-zeichen { flex: none; font-size: 1rem; line-height: 1; }
.store-knopf-apfel { width: 1.15rem; height: 1.15rem; margin-top: -2px; }
.store-knopf-text { display: flex; flex-direction: column; font-weight: 600; font-size: .98rem; }
.store-knopf-text small { font-weight: 400; font-size: .7rem; opacity: .85; letter-spacing: .02em; }
.fuss .store-zeile { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.fuss .store-knopf, .fuss .store-knopf:hover, .fuss .store-knopf:focus-visible { color: #fff; }
.fuss .store-knopf:focus-visible { outline-color: #cfdde7; }
@media print { .store-knoepfe, .store-zeile { display: none !important; } }

/* ---------- Webseite in der App (02.10.2026, App 1.0.9) ----------
   Kopf, Menue und Fuss fehlen serverseitig (layouts/app.blade.php,
   AppEinbettung). Hier nur der Rest: weniger Rand oben, und was trotzdem
   auf Tarif, Abo oder Store zeigt, bleibt unsichtbar (Apple 3.1.1). */
.app-einbettung main { padding-top: .9rem; }
.app-einbettung .kopf,
.app-einbettung .fuss,
.app-einbettung .store-knoepfe,
.app-einbettung .store-zeile,
.app-einbettung .werbung,
.app-einbettung .cookie-hinweis,
.app-einbettung [data-nur-browser] { display: none !important; }

/* ---------- Seitenkopf und Filterzeile (04.10.2026) ----------

   Gemeldet: Auf "Rapporte" stand ein winziges, ungestyltes Monatsfeld
   tiefer als die anderen, der Schalter "Ausgeschiedene" steckte in einem
   eigenen Rahmen unter "Mitarbeiter", und "Rapport schreiben" klebte in
   derselben Zeile.

   Jetzt: Titel links, Hauptknopf rechts (.seitenkopf). Darunter EINE
   Filterzeile mit gleich hohen Feldern (.filterleiste): Monat mit ‹ ›,
   Auswahlfelder, ein Haekchen sauber darunter. Auf dem Handy untereinander.
   Dieselben Klassen nutzen Meine Zeiten, Stundenzettel, Abwesenheiten und
   Schichten. */

.seitenkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem 1rem;
    flex-wrap: wrap;
    margin-bottom: .4rem;
}

.seitenkopf h1 { margin: 0; }

.filterkarte { padding: .9rem 1rem; }

.filterleiste {
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
    align-items: end;
}

@media (min-width: 40rem) {
    /* Ab Tablet-Breite nebeneinander: gleich breite Felder, die bei Platz-
       mangel umbrechen; der Knopf "Anzeigen" nimmt nur seine eigene Breite. */
    .filterleiste {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .filterleiste .filterfeld { flex: 1 1 13rem; }
    .filterleiste .filterfeld-knopf { flex: 0 0 auto; }
}

.filterfeld { margin: 0; min-width: 0; }

/* Die Ueberschrift ueber der Monatswahl sieht aus wie jedes Label. */
.filter-titel {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
    font-size: .95rem;
}

.filterfeld select,
.filterfeld input { margin: 0; }

.filterfeld .knopf { min-height: 48px; }

/* ‹ Oktober 2026 › - genau so hoch wie ein Auswahlfeld daneben. */
.monatswahl {
    display: flex;
    align-items: stretch;
    gap: .4rem;
    min-height: 48px;
}

.monatswahl .knopf {
    min-height: 48px;
    min-width: 44px;
    padding: 0 .6rem;
    font-size: 1.3rem;
    line-height: 1;
}

.monatswahl .knopf.aus { opacity: .35; cursor: default; pointer-events: none; }

.monatswahl-text {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 .6rem;
    background: #fff;
    border: 2px solid var(--rand);
    border-radius: var(--radius);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[dir="rtl"] .monatswahl > .knopf { transform: scaleX(-1); }

/* Das Haekchen "Ausgeschiedene anzeigen": ohne eigenen Rahmen, mit
   Abstand unter der Filterzeile, Kaestchen und Text auf einer Linie. */
.filter-haken { margin-top: .7rem; }
.filter-haken .haken { align-items: center; margin: 0; cursor: pointer; }
.filter-haken .haken input { margin-top: 0; }

.haken-verweis { color: var(--text); text-decoration: none; }
.haken-verweis:hover span:last-child { text-decoration: underline; }

.haken-kasten {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border: 2px solid var(--rand);
    border-radius: 4px;
    background: #fff;
    font-weight: 700;
    color: var(--signal);
    line-height: 1;
}

.haken-verweis[aria-checked="true"] .haken-kasten { border-color: var(--signal); }

/* `month` fehlte in der Feldregel oben - deshalb war das Monatsfeld winzig
   und ungestylt. Wo es noch vorkommt, sieht es jetzt aus wie die anderen. */
input[type=month] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    padding: .6rem .75rem;
    font: inherit;
    color: var(--text);
    background: #fff;
    border: 2px solid var(--rand);
    border-radius: var(--radius);
    -webkit-appearance: none;
    appearance: none;
}

/* ---------- Mitarbeiter-Ansicht (04.10.2026) ----------
   Nachbau der S+-Ansicht. Raster selbst gebaut (FullCalendar kann
   Ressourcen-Spalten nur in der Bezahlfassung). Breite Raster scrollen
   waagerecht - auf dem Handy "nebeneinander" = Spalten zum Wischen,
   "untereinander" = Liste je Person. */

.mva-umschalter { flex-wrap: nowrap; }
.mva-umschalter .umschalter-knopf { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .3rem .6rem; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 40rem) { .filterleiste .mva-feld-breit { flex: 2 1 18rem; } }

.mva-gross { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.mva-l-spalten .mva-nur-zeilen,
.mva-l-zeilen .mva-nur-spalten { display: none; }

.mva-mobil { display: none; }

@media (max-width: 640px) {
    .mva-l-zeilen .mva-mobil { display: block; }
    .mva-l-zeilen .mva-gross { display: none; }
}

.mva-k {
    display: block;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: .78rem;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mva-k:hover { filter: brightness(1.1); }
.mva-k.klein { font-size: .74rem; margin-bottom: 3px; }
.mva-k.abs { position: absolute; white-space: normal; }
.mva-k b { font-variant-numeric: tabular-nums; }
.mva-k.abgesagt { opacity: .45; text-decoration: line-through; }
.mva-k.abwesend { color: #fff; font-style: italic; }

.mva-sp { --colw: 170px; }
.mva-sp-kopf,
.mva-sp-body {
    display: grid;
    grid-template-columns: 64px repeat(var(--n), minmax(var(--colw), 1fr));
    min-width: calc(64px + var(--n) * var(--colw));
}
.mva-pk {
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    padding: .5rem;
    text-align: center;
    border-inline-start: 1px solid rgba(255, 255, 255, .3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mva-ax {
    font-size: .72rem;
    color: var(--text-leise);
    padding: .5rem .25rem;
    position: relative;
    border-inline-end: 1px solid var(--rand);
    background: var(--grund);
}
.mva-ganz > div { padding: 4px; border-inline-start: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.mva-col { position: relative; border-inline-start: 1px solid var(--rand); }
.mva-std { position: absolute; inset-inline-start: 4px; font-size: .66rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.mva-std.h { top: 6px; }
.mva-linie { position: absolute; left: 0; right: 0; border-top: 1px solid var(--rand); }
.mva-linie.v { top: 0; bottom: 0; right: auto; left: auto; border-top: 0; border-inline-start: 1px solid var(--rand); }

.mva-zl-row { display: flex; border-bottom: 1px solid var(--rand); }
.mva-zl-row.kopf { background: var(--grund); }
.mva-zl-n {
    flex: 0 0 180px;
    padding: .4rem .5rem;
    font-weight: 700;
    font-size: .85rem;
    color: #fff;
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
}
.mva-zl-row.kopf .mva-zl-n { color: var(--text-leise); background: var(--grund); font-size: .72rem; }
.mva-zl-t { position: relative; flex: 0 0 auto; min-height: 28px; }

.mva-t { border-collapse: collapse; width: 100%; min-width: 720px; }
.mva-t th, .mva-t td { border: 1px solid var(--rand); padding: 4px; vertical-align: top; font-size: .8rem; }
.mva-t thead th { color: #fff; font-weight: 700; white-space: nowrap; }
.mva-t thead th.tagkopf { color: var(--text); background: var(--grund); }
.mva-t .ax { background: var(--grund); color: var(--text); font-weight: 600; white-space: nowrap; width: 110px; }
.mva-t tr.heute td.ax, .mva-t td.heute, .mva-t th.heute { background: rgba(240, 192, 48, .18); }

.mva-mp { padding: 0; overflow: hidden; margin-bottom: .7rem; }
.mva-mh { display: flex; justify-content: space-between; gap: .5rem; color: #fff; font-weight: 700; padding: .5rem .8rem; }
.mva-mh small { font-weight: 500; opacity: .9; }
.mva-mt { padding: .25rem .8rem; background: var(--grund); font-size: .72rem; font-weight: 700; color: var(--text-leise); text-transform: uppercase; }
.mva-mz { display: flex; gap: .5rem; padding: .5rem .8rem; border-top: 1px solid var(--rand); color: var(--text); text-decoration: none; }
.mva-mz i { width: 6px; border-radius: 3px; flex: 0 0 6px; }
.mva-mz > span { display: flex; flex-direction: column; min-width: 0; }
.mva-mz b { font-size: .8rem; font-variant-numeric: tabular-nums; }
.mva-mz em { font-style: normal; font-size: .68rem; font-weight: 700; color: var(--text-leise); }
.mva-mz em.rot { color: #b91c1c; }
.mva-mz.abgesagt { opacity: .45; text-decoration: line-through; }
.mva-mz.abwesend { font-style: italic; }

.mva-legende { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: -1px; }

@media print {
    .mva-gross { overflow: visible; }
    .mva-l-zeilen .mva-mobil { display: none !important; }
    .mva-l-zeilen .mva-gross { display: block !important; }
}

/* ---------- Hinweisfenster (05.10.2026) ----------
   Dieselbe Tafel wie das Terminfenster: auf dem Telefon von unten, am
   Rechner mittig. Ueber allem (auch ueber dem Menue), unter dem
   Cookie-Hinweis bleibt es nicht haengen, weil der erst nach dem Klick
   kommt. Knoepfe untereinander und so breit wie die Tafel - mit dem
   Daumen und mit Handschuh treffbar. */
.hinweisfenster { z-index: 70; }
.hinweisfenster .termin-tafel { padding: 1.25rem; }
.hf-bild { display: block; max-width: 100%; height: auto; border-radius: var(--radius); margin: 0 0 .9rem; }
.hf-text { line-height: 1.5; overflow-wrap: anywhere; }
.hf-text ul { margin: .4rem 0 .8rem; padding-inline-start: 1.3rem; }
.hf-text p { margin: 0 0 .7rem; }
.hf-knoepfe { display: grid; gap: .55rem; margin-top: 1rem; }
.hf-knoepfe form { margin: 0; }
.hf-hochladen { border: 1px solid var(--rand); border-radius: var(--radius); padding: .75rem; display: grid; gap: .5rem; }
.hf-hochladen input[type=file] { max-width: 100%; }
.hf-pruefung { border-color: var(--signal); border-inline-start-width: 5px; background: var(--gut-flaeche); }

/* Verwaltung: Zahlenzeile und Tabelle der Verfolgung. */
.hf-zahlen { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .5rem 0 .8rem; font-size: .92rem; }
.hf-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.hf-tabelle th, .hf-tabelle td { text-align: start; padding: .45rem .5rem; border-top: 1px solid var(--rand); vertical-align: top; }
.hf-tabelle th { color: var(--text-leise); font-weight: 600; }
.hf-knopfzeile { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); border: 1px solid var(--rand); border-radius: var(--radius); padding: .75rem; margin-bottom: .6rem; }
.hf-leiste { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.hf-leiste form { margin: 0; }