/* Inter self-hosted */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Inter-Regular.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/Inter-Medium.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/Inter-SemiBold.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Inter-Bold.woff2) format("woff2")}

:root{
  --bg:#f7f8fa;--surface:#fff;--surface-2:#f1f3f5;--border:#e4e7ec;
  --text:#16181d;--muted:#667085;
  --primary:#d2232a;--primary-hover:#b31d24;--on-primary:#fff;
  --success:#1a9d4a;--warning:#e8890c;--danger:#dc2626;
  --primary-solid:#d2232a;--primary-solid-hover:#b31d24;
  --success-solid:#157a39;--danger-solid:#c81e1e;
  /* Text-Varianten für Badges/Hinweise: --success/--warning sind als Flächenfarbe ok,
     als Schrift auf Weiß aber unter 4,5:1 (WCAG AA). */
  --success-text:#157a39;--warning-text:#b45309;
  --alert-text:var(--danger-solid);
  --ring:rgba(210,35,42,.35);--sidebar:#1a1d23;
  --radius:12px;--radius-sm:9px;
  /* Rahmen von Eingabefeldern: ≥3:1 zur Fläche (WCAG 1.4.11) – --border ist nur für Trennlinien */
  --input-border:#868f9f;
  color-scheme:light dark;   /* Checkboxen, Selects, Scrollbars folgen dem Dunkelmodus */
  accent-color:var(--primary);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1115;--surface:#161a21;--surface-2:#1e232c;--border:#262c36;
  --text:#e6e8ec;--muted:#9aa4b2;
  --primary:#ef4a50;--primary-hover:#ff5f64;
  --success:#34c759;--warning:#f0a13a;--danger:#f26a6a;
  --success-text:#34c759;--warning-text:#f0a13a;
  --alert-text:var(--danger);
  --ring:rgba(239,74,80,.45);--sidebar:#12151b;
  --input-border:#6b7585;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;font-size:16px}
h1{margin:0 0 16px;font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
h2{margin:0 0 12px;font-size:18px;font-weight:700;line-height:1.3;text-wrap:balance}
h3{margin:0 0 6px;font-size:16px;font-weight:700;line-height:1.35}
p,li{text-wrap:pretty}
a{color:var(--primary);text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
::placeholder{color:var(--muted);opacity:1}   /* Browser-Grau #757575 hat im Dunkelmodus nur 3,8:1 */
input,textarea{caret-color:var(--primary)}
button{font-family:inherit}   /* Knöpfe erben die Schrift nicht von selbst – sonst Ersatzschrift statt Inter */
::selection{background:color-mix(in srgb,var(--primary) 22%,transparent)}
.muted{color:var(--muted)}
.tbl,.tbl td,input,.badge{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* === Basis-Komponenten: Karten, Buttons, Inputs, Alerts, Tabellen, Tags === */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06)}
.card--narrow{max-width:680px}   /* Formularkarte: lesbare Breite, kein Schweben */
.card--login{max-width:420px;margin:8vh auto}
/* Kadenz: Abschnitte (Karten, Meldungen, Kennzahlen) halten 24 px Abstand – Karten kleben nicht aneinander. */
.wrap>*+*{margin-top:24px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.card-head h1{margin:0}
label{display:block;font-weight:500;font-size:14px;margin:16px 0 0}
label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:6px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--input-border);border-radius:var(--radius-sm);font-size:16px;background:var(--surface);color:var(--text);font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
input[type=checkbox],input[type=radio]{width:22px;height:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;min-height:44px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,transform .18s}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--primary-solid);border-color:var(--primary-solid);color:var(--on-primary)}
.btn--primary:hover{background:var(--primary-solid-hover);border-color:var(--primary-solid-hover)}
/* Gefahr: Zweitknopf mit roter Schrift – sonst ist Löschen vom roten Hauptknopf nicht zu unterscheiden. */
.btn--gefahr,.btn--danger{background:var(--surface);border-color:color-mix(in srgb,var(--alert-text) 70%,var(--surface));color:var(--alert-text)}
.btn--gefahr:hover,.btn--danger:hover{background:color-mix(in srgb,var(--danger) 10%,var(--surface));border-color:var(--alert-text)}
.btn--gruen{background:var(--success-solid);border-color:var(--success-solid);color:#fff}
.btn--klein{min-height:40px;padding:7px 12px;font-size:13px}   /* am Handy greift die 44-px-Regel unten */
.btn--gross{min-height:48px;padding:12px 22px;font-size:16px}
/* Knopfreihe: Abstand zwischen Aktionen; die Hauptaktion (.btn--gross) füllt am Handy die Breite. */
.knopfzeile{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.btn--auto{width:auto}
[hidden]{display:none!important}   /* hidden-Attribut schlägt Komponenten-Styles */
.alert{margin:0;background:color-mix(in srgb,var(--danger) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 30%,var(--surface));color:var(--alert-text);padding:12px 14px;border-radius:var(--radius-sm);font-size:15px}
.alert--info{background:var(--surface-2);border-color:var(--border);color:var(--text)}
.alert--ok{background:color-mix(in srgb,var(--success) 10%,var(--surface));border-color:color-mix(in srgb,var(--success) 35%,var(--surface));color:var(--text)}
.alert--warn{background:color-mix(in srgb,var(--warning-text) 10%,var(--surface));border-color:color-mix(in srgb,var(--warning-text) 30%,var(--surface));color:var(--text)}
.hinweis{background:color-mix(in srgb,var(--warning) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--warning) 30%,var(--surface));color:var(--text);padding:10px 12px;border-radius:var(--radius-sm);font-size:14px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--border)}
.tbl th{font-size:13px;color:var(--muted);font-weight:600}
.tbl td[data-label="E-Mail"],.tbl td[data-label="Kontakt"],.tbl td[data-label="Empfänger"]{overflow-wrap:anywhere}   /* lange Mailadressen */
.tbl tfoot th,.tbl tfoot td{font-size:15px;font-weight:700;color:var(--text);border-top:1px solid var(--border);border-bottom:0}
.tbl .zahl{text-align:right;white-space:nowrap}
.tbl tbody tr{transition:background .18s}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tr:last-child td{border-bottom:0}
/* Namen-Links in Tabellen: Schriftfarbe mit leiser Unterstreichung – Rot bleibt Handlung und Marke. */
.tbl a:not(.btn){color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.tbl a:not(.btn):hover{color:var(--primary);text-decoration-color:currentColor}
.tag{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:13px;font-weight:600}
.tag--super{background:var(--text);color:var(--surface)}
/* Status: Ampelpunkt + Wort (DESIGN „Ampel-mit-Wort“) – nie Farbe allein, nie Emoji. */
.status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;line-height:1.35;color:var(--text)}
.status::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--status,var(--muted));box-shadow:inset 0 0 0 1px rgba(16,24,40,.25)}
.status--ok{--status:var(--success)}.status--offen{--status:var(--warning)}.status--kritisch{--status:var(--danger)}.status--neutral{--status:var(--muted)}
.status--gross{font-size:15px}
/* Lage: Zustandszeile ganz oben auf einer Seite (Leitstelle: zuerst der Zustand) */
.lage{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.tabellenfilter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.tf-suche,.tf-select{min-height:44px;padding:10px 12px;border:1px solid var(--input-border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:16px}
.tf-select{width:auto;max-width:100%}
.tf-suche{min-width:200px;flex:1}
.tf-zaehler{color:var(--muted);font-size:13px;margin-left:auto;white-space:nowrap}
th[title]{cursor:help;text-decoration:underline dotted;text-underline-offset:3px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
/* Dashboard: Verlauf der Anmeldungen – Linie in Schrift-Tinte (Signalrot bleibt Handlungen vorbehalten) */
.mv-zahl{display:flex;align-items:baseline;gap:8px;margin:0}
.mv-zahl b{font-size:40px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.mv-zusatz{margin:4px 0 0;color:var(--muted);font-size:14px}
.mv-bild{margin:28px 0 0}
.mv-flaeche{position:relative;height:140px;margin-right:6px}
.mv-flaeche svg{display:block;width:100%;height:100%;overflow:visible}
.mv-linie{fill:none;stroke:var(--text);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mv-area{fill:var(--text);opacity:.08}
.mv-plaetze{stroke:var(--muted);stroke-width:1}
.mv-tag{fill:transparent}
.mv-tag:hover{fill:var(--text);fill-opacity:.06}
.mv-plaetze-text{position:absolute;left:0;transform:translateY(-100%);padding-bottom:2px;font-size:13px;color:var(--muted);pointer-events:none}
.mv-punkt{position:absolute;left:100%;width:10px;height:10px;border-radius:50%;background:var(--text);
  box-shadow:0 0 0 2px var(--surface);transform:translate(-50%,-50%);pointer-events:none}
.mv-achse{display:flex;justify-content:space-between;margin-top:6px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.mv-tabelle{margin-top:12px}
.mv-tabelle summary{cursor:pointer;color:var(--muted);font-size:14px;padding:12px 0}
.mv-tabelle td{font-variant-numeric:tabular-nums}
.stat{background:var(--surface-2);border-radius:var(--radius-sm);padding:14px 16px}
.stat b{display:block;font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat small{color:var(--muted);font-size:13px}
.badge{font-weight:600;font-size:13px}
.zeile--abgemeldet td{color:var(--muted)}
.badge--offen{color:var(--success-text)}.badge--zu{color:var(--muted)}.badge--warn{color:var(--warning-text)}
/* Bisher nirgends definiert, aber in Views verwendet: */
.pflicht{color:var(--danger);font-weight:700}
.feld--warn{border-color:var(--warning-text)!important;background:rgba(232,137,12,.08)}
.feldhinweis{display:block;color:var(--muted);font-weight:400;font-size:13px;line-height:1.45;margin-top:6px}
/* Erklärung: Anleitung zu einer Gruppe – 15 px in Schriftfarbe, lesbare Zeilenlänge */
.erklaerung{margin:0;font-size:15px;line-height:1.5;color:var(--text);max-width:60ch}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.suchleiste{display:flex;gap:8px;margin-bottom:16px}.suchleiste input{flex:1}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}

/* === Layout: Brand === */
.brand{display:inline-flex;align-items:center;color:#fff;text-decoration:none}
@media(max-width:480px){.card{padding:18px}}

/* === Formular-Sonderfälle: Grid-Label, Checkboxen, Tabellen-Wrapper === */
.grid2 label{margin:0}
.checks{display:flex;gap:18px;margin:12px 0 4px;flex-wrap:wrap}
.schnellzugriff{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.jahrespreise{border:0;border-top:1px solid var(--border);border-radius:0;padding:16px 0 0;margin:24px 0 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.jahrespreise legend{float:left;width:100%;padding:0;margin:0 0 4px;font-weight:700;font-size:16px}
.jahrespreise label{margin:0}
/* Ampel je Termin im Bedarfsformular: Chancen auf einen Platz (keine Zahlen) */
.ampel{display:inline-flex;align-items:center;margin-left:8px;font-size:13px;font-weight:400;color:var(--muted);white-space:nowrap}
.nachfrage-punkt{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ampel);box-shadow:inset 0 0 0 1px rgba(16,24,40,.3);margin:0 4px 0 2px;vertical-align:middle}
.nachfrage--gruen{--ampel:#1a9d4a}.nachfrage--gelb{--ampel:#e5c100}.nachfrage--orange{--ampel:#e8890c}.nachfrage--rot{--ampel:#dc2626}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.opt{font-weight:400;color:var(--muted)}
.pflichthinweis{margin:0;font-size:13px;color:var(--muted)}
.grid2__breit{grid-column:1/-1}
/* Bedarfsformular: Eckdaten, Gruppen, Termin-Kacheln, Prüfdialog */
/* Formularkarte (öffentlich): Info-Zone mit 16er-Abstand, Formular darunter mit 40er-Gruppen – Muster aus /bedarf */
.bedarf,.formkarte{display:flex;flex-direction:column;gap:16px}
#formfehler:focus{outline:2px solid var(--danger);outline-offset:2px}
/* Rollen im Formular: Abschnitt 18/700 · Wert 16/600 · Text 16 · Erklärung 15 · Label 14/500 · Metadaten 13.
   Abstände in Viererschritten: im Feld 6 · Gruppe innen 12 · Feld zu Feld 16 · Gruppe zu Gruppe 40. */
.bedarf__form,.formular{display:flex;flex-direction:column;gap:40px;margin-top:16px}
.formular--eng{gap:24px;margin-top:0}
/* In Formularen kommt der Abstand aus gap (Raster/Stapel), nicht aus Label-Rändern */
.formular label,.formkarte .grid2 label{margin:0}
.feldstapel{display:flex;flex-direction:column;gap:16px}
/* Startseite: Hauptaktion mit Erklärung, weitere Wege als Liste mit Linie */
.start-haupt{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.start-haupt .erklaerung{flex:1 1 20rem}
.wege{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.wege li{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--border)}
.wege a{font-size:16px;font-weight:600;align-self:flex-start;padding-block:4px}
.wege span{font-size:14px;color:var(--muted)}
.ablauf--start{border-top:1px solid var(--border);padding-top:22px}
.start-team .knopfzeile .feldhinweis{margin:0}
.formgruppe>p{margin:0}
#stb_hinweis{display:block;margin-top:4px}
.seitenlinks{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:40px;padding-top:16px;border-top:1px solid var(--border)}
.seitenlinks a{display:inline-block;padding-block:8px;font-weight:600}
.rechtsseite h2+.muted{margin-top:-6px;font-size:14px}
.rechtsseite h3{margin-top:16px}
.rechtsseite .fakten{margin-bottom:8px}
.rechtsseite>.fakten:first-child{border-top:0;padding-top:0}
.infoseite .alert{margin:12px 0}
.fakten{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin:0;padding:16px 0;border-block:1px solid var(--border)}
.fakten dt{font-size:13px;color:var(--muted)}
.fakten dd{margin:2px 0 0;font-size:16px;font-weight:600;line-height:1.35}
.fakten__zusatz{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.bedarf>.fakten:first-child,.formkarte>.fakten:first-child{border-top:0;padding-top:0}   /* Kartenrand ersetzt die obere Linie */
.honigtopf{position:absolute;left:-9999px}
.formgruppe{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:12px}
.formgruppe>legend,.ablauf h2{font-size:18px;font-weight:700;line-height:1.3;padding:0;margin:0 0 12px}
.formgruppe>.feldhinweis{max-width:56ch;margin:0;font-size:15px;line-height:1.5;color:var(--text)}
.feld{min-width:0}
.plz-ort{display:grid;grid-template-columns:7.5rem 1fr;gap:16px}
.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kachel{position:relative;display:flex;flex-direction:column;gap:2px;margin:0;padding:12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font-weight:400;cursor:pointer;transition:border-color .12s,background .12s}
.kachel input[type=checkbox]{position:absolute;top:10px;right:10px;width:20px;height:20px;margin:0;padding:0;accent-color:var(--primary)}
.kachel__datum{font-size:28px;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;padding-right:24px}
.kachel__monat{font-size:15px;font-weight:600}
.kachel .ampel{margin:8px 0 0;white-space:normal;align-items:flex-start;font-size:13px;color:var(--text)}
.kachel .ampel .nachfrage-punkt{margin-top:.3em;flex:none}
.kachel:hover{border-color:var(--muted)}
.kachel:has(input:checked){border-color:var(--primary);background:var(--surface-2);background:color-mix(in srgb,var(--primary) 8%,var(--surface))}
.kachel:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.kachel:has(input:disabled){cursor:default}
.kachel:has(input[aria-invalid="true"]){border-color:var(--danger)}
/* „Alle Termine passen uns“ ist eine Meta-Option: eigene Zeile über dem Raster, kein Termin */
.kachel--alle{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:14px 52px 14px 16px}
.kachel__alle{font-size:16px;font-weight:600;line-height:1.3}
.kachel--alle .feldhinweis{margin:0;color:var(--muted)}
.kachel--alle input[type=checkbox]{top:50%;right:16px;transform:translateY(-50%)}
.ablauf{border-top:1px solid var(--border);padding-top:24px}
.ablauf ol{list-style:none;counter-reset:schritt;margin:0;padding:0;display:grid;gap:14px;max-width:56ch}
.ablauf li{counter-increment:schritt;display:grid;grid-template-columns:2rem 1fr;gap:12px;align-items:baseline;font-size:16px;line-height:1.5}
.ablauf li::before{content:counter(schritt);font-size:26px;font-weight:700;line-height:1;color:var(--primary);font-variant-numeric:tabular-nums}
.bedarf__absenden,.absenden{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.bedarf__hinweis,.absenden__hinweis{flex:1 1 240px;margin:0;font-size:14px;max-width:60ch}
.absenden>.alert{flex-basis:100%}
/* Personengruppe (Teilnehmer): Überschrift, Erklärung, Personen-Abschnitte */
.tngruppe>h2{margin-bottom:8px}
.tngruppe>.erklaerung,.tngruppe>.alert{margin-bottom:8px}
.pruefnamen{margin:16px 0 0;padding-left:20px;font-size:16px;font-weight:600;line-height:1.6}
.pruefdialog .pruefnamen+.alert{margin-top:16px}
.pruefdialog .pruefnamen~.pruefdialog__knoepfe{margin-top:24px}
/* Wert ohne Eingabe (z. B. Datum im Antrag): wie ein Feld beschriftet, aber als Text */
.wertfeld{display:flex;flex-direction:column;gap:6px}
.wertfeld__name{font-size:14px;font-weight:500}
.wertfeld__wert{padding:12px 0;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
/* Kopfband (layout_public.php, nur Seiten mit $kopf): Logo und Titel auf der Inhaltskante der Karte
   (Rand 20 + Karte 23); die rote Grundlinie stammt aus dem Logo und trennt das Band auch im Dunkelmodus. */
.pub-top--kopf{padding:0}
/* Ohne Kopfband trägt die Logo-Leiste selbst die rote Grundlinie. */
.pub-top--linie{border-bottom:3px solid var(--primary)}
.kopfband{max-width:680px;margin:0 auto;padding-inline:43px}
.pub-top--kopf .kopfband{padding-block:12px 0}
.pub-top--linie .kopfband{padding-block:12px}
.kopfflaeche{background:var(--sidebar);border-bottom:3px solid var(--primary)}
.kopfflaeche .kopfband{padding-block:22px 30px}
.kopf__titel{margin:0;color:#fff;font-size:32px;font-weight:700;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.kopf__aufgabe{display:block;margin-top:4px;font-size:20px;font-weight:600;letter-spacing:-.01em;color:#c3c9d4}
.kopf__text{margin:12px 0 0;color:#c3c9d4;font-size:16px;line-height:1.5;max-width:56ch}
.plain>.foot{max-width:680px}
@media(max-width:1023px){.kopfband{padding-inline:37px}.plain>.foot{padding-inline:14px}}
@media(max-width:480px){.kopfband{padding-inline:33px}.kopf__titel{font-size:27px}.kopf__aufgabe{font-size:18px}}
@media (prefers-color-scheme:dark){.bedarf .feldhinweis,.fakten dt,.fakten__zusatz,.pflichthinweis,.kachel .ampel{letter-spacing:.01em}}
.pruefdialog{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);padding:22px}
.pruefdialog::backdrop{background:rgba(10,12,16,.55)}
.pruefdialog h2{margin:0 0 4px;font-size:18px}
.pruefdialog p{margin:0;font-size:15px}
.pruefliste{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:16px 0 24px;font-size:15px}
.pruefliste dt{color:var(--muted)}
.pruefliste dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.pruefliste ul{margin:0;padding-left:18px}
.pruefdialog__knoepfe{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
@media(max-width:560px){
  .fakten{gap:10px 16px}
  .kacheln{grid-template-columns:1fr 1fr}
  .pruefliste{grid-template-columns:1fr;gap:2px}
  .pruefliste dd{margin-bottom:8px}
}
/* Trainingstag (QR): Identität, Fragegruppen, offene Fragen, Namenswahl */
.identitaet{margin:0;font-size:16px}
.identitaet a{white-space:nowrap}
.fragen{gap:0}
.fragen>.erklaerung{margin-bottom:4px}
.fragen>label{margin-top:16px}
.frage--offen .jn-opt span{border-color:var(--alert-text);border-width:2px}
.frage--offen>legend::after{content:" – noch offen";color:var(--alert-text);font-weight:600}
.fehlerplatz{flex-basis:100%}
.fehlerplatz:empty{display:none}
.nebenweg{margin:0;padding-top:16px;border-top:1px solid var(--border);font-size:15px}
.auswahl-ff{margin:0 0 12px;font-size:15px;font-weight:600}
.auswahl-ff a{font-weight:400}
button.namebtn{width:100%;font:inherit;font-weight:700;text-align:left;cursor:pointer}
.namebtn:hover{border-color:var(--text)}
.namebtn__aktion{flex:none;font-size:14px;font-weight:600;color:var(--primary)}
.zahl-dezent{font-weight:400;color:var(--muted)}
.status-zeile{margin:12px 0 0;font-size:15px;min-height:1.5em}
@media(max-width:560px){.sig-flaeche{margin-right:28px}}   /* Streifen zum Scrollen neben dem Feld */
/* Stapel: Abschnitte innerhalb einer Karte – 16 zwischen Teilen, 12 unter, 24 über Überschriften */
.stapel>*{margin-block:0}
.stapel>*+*{margin-top:16px}
.stapel>h2+*,.stapel>h3+*{margin-top:12px}
.stapel>*+h2,.stapel>*+h3{margin-top:24px}
/* Training: Kennzahlen als Ziffern, Aktionen nach Phase, Liste mit Stand */
.kennzahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.kennzahlen>div{padding:12px 16px;background:var(--surface-2);border-radius:var(--radius-sm)}
.kennzahlen dt{font-size:13px;color:color-mix(in srgb,var(--muted) 85%,var(--text))}   /* gedämpft, auf der Zweitfläche trotzdem ≥ 4,5:1 */
.kennzahlen dd{margin:2px 0 0;font-size:28px;font-weight:700;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kennzahlen dd.kennzahlen__zusatz{margin:0;font-size:13px;font-weight:500;letter-spacing:0;color:color-mix(in srgb,var(--muted) 85%,var(--text))}
.kennzahlen__von{font-size:16px;font-weight:600;color:var(--muted);letter-spacing:0}
/* Training: „Zu tun" – was fehlt, mit Namen; je Punkt höchstens ein Knopf */
.zutun{list-style:none;margin:0;padding:0}
.zutun li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;min-height:48px;padding:6px 0}
.zutun li+li{border-top:1px solid var(--border)}
.zutun .status{flex:1 1 20rem;align-items:baseline;font-size:15px;font-weight:500}
.zutun .status::before{transform:translateY(1px)}
.zutun .btn,.zutun li>.muted{flex:none}
.zutun li>.muted{font-size:13px}
/* Trainingstag: links Eingabe, Fortschritt, Freigabe – rechts der QR-Code (spart am Vortag eine Bildschirmhöhe) */
.tt-raster{display:grid;gap:16px}
@media(min-width:901px){.tt-raster{grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start}
  .tt-raster>.qrbox{padding:0 0 0 24px;border-top:0;border-left:1px solid var(--border)}}
.trupp-tabelle .status,.trupp-tabelle .btn{white-space:nowrap}
.trupp-tabelle td[data-label="Feuerwehr"]{font-weight:600}
.trupp-tabelle a .status{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}   /* inline-flex erbt die Unterstreichung des Links nicht */
.trupp-fuss{margin-top:12px;max-width:none}
.aufklapper>summary .status{font-size:15px}
.phasen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:16px;border-top:1px solid var(--border)}
.phasen--karte{padding-top:0;border-top:0}
.phase h2{font-size:16px;margin:0 0 12px;color:var(--muted)}
.phase--jetzt h2{color:var(--text)}
.phase .knopfzeile{gap:8px}
.fortschritt-block .statuszeile{margin:0 0 6px}
.lage--eng{gap:4px 16px}
.tl-datum{white-space:nowrap}
.regeln p{margin:0 0 6px}
.regeln ul{margin:0;padding-left:20px}
.regeln li+li{margin-top:4px}
.check--klein{font-size:13px;font-weight:500;min-height:0;white-space:nowrap}
.check--klein input{width:18px;height:18px}
.zellaktionen .absageform{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:10px}   /* Absagen + Pool-Häkchen in einer Zeile (schlägt .inline) */
.tabellenende{display:flex;justify-content:flex-end;padding-top:12px;border-top:1px solid var(--border)}
tr.zeile--heute td{background:color-mix(in srgb,var(--success) 7%,transparent)}
@media(max-width:900px){.phasen{grid-template-columns:1fr;gap:16px}}
@media(max-width:640px){.kennzahlen{grid-template-columns:1fr 1fr}}
.check{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;margin:0}
.check input{flex:none;width:20px;height:20px;margin:0}
.tblwrap{overflow-x:auto}

/* === Mobile-first: Tabellen als gestapelte Karten am Handy === */
@media(max-width:640px){
  /* Ausnahme .tbl--fest: echte Tabelle mit Querscrollen (z. B. Akte, Beleg). */
  .tbl:not(.tbl--fest) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl:not(.tbl--fest),.tbl:not(.tbl--fest) tbody,.tbl:not(.tbl--fest) tfoot,.tbl:not(.tbl--fest) tr,.tbl:not(.tbl--fest) td,.tbl:not(.tbl--fest) tfoot th{display:block;width:100%}
  .tbl:not(.tbl--fest) tr{padding:10px 0;border-top:1px solid var(--border)}
  .tbl:not(.tbl--fest) tbody tr:first-child{border-top:0}
  .tbl:not(.tbl--fest) tbody tr:hover{background:none}
  .tbl:not(.tbl--fest) td,.tbl:not(.tbl--fest) tfoot th{position:relative;border:0;padding:4px 0;text-align:left}
  /* Beschriftung links als Float im Polster der Zelle: bricht sie um, wächst die Zelle mit (flow-root) – nichts überlappt. */
  .tbl:not(.tbl--fest) td[data-label]{--lab:7.5rem;display:flow-root;padding-left:calc(var(--lab) + 12px);min-height:28px}
  .tbl:not(.tbl--fest) td[data-label]::before{content:attr(data-label);float:left;width:var(--lab);margin-left:calc(-1 * var(--lab) - 12px);font-size:13px;font-weight:600;line-height:1.5;color:var(--muted);overflow-wrap:break-word}
  .tbl:not(.tbl--fest) td[data-label]:empty::after{content:"–";color:var(--muted)}
  .tbl:not(.tbl--fest) td[data-label="Aktionen"]:empty{display:none}   /* Karte ohne Aktion: keine leere Zeile */
  .tbl:not(.tbl--fest) .zahl{text-align:left}
  .tbl:not(.tbl--fest) tfoot tr{border-top:2px solid var(--border)}
  .tbl--fest{min-width:560px}
  .btn{min-height:44px}
  .btn--gross{width:100%}
  .card-head{flex-wrap:wrap}
  .suchleiste{flex-direction:column}
  .suchleiste .btn{width:100%}
  .tbl:not(.tbl--fest) .zellaktionen,.tbl:not(.tbl--fest) .zellaktionen .absageform{flex-wrap:wrap}
  .tbl:not(.tbl--fest) .zellaktionen>*{flex:0 1 auto;min-width:0}   /* Gruppen dürfen schrumpfen und intern umbrechen */
}

/* === Karten bei Platzmangel (Tablet, schmales Fenster) ===
   tabelle.js setzt .tbl--karten, wenn eine Tabelle nicht in ihre Karte passt. Gleiche Karte wie am Handy,
   aber nebeneinander, sobald zwei Karten Platz haben – so wird die Tablet-Breite genutzt. */
.tbl--karten thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tbl--karten,.tbl--karten tbody,.tbl--karten tfoot,.tbl--karten tr,.tbl--karten td,.tbl--karten tfoot th{display:block;width:100%}
.tbl--karten tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));column-gap:28px}
.tbl--karten tr{padding:12px 0;border-top:1px solid var(--border)}
.tbl--karten tr:has(>th[scope="rowgroup"]),.tbl--karten tr:has(>td[colspan]){grid-column:1/-1}
.tbl--karten tbody tr:hover{background:none}
.tbl--karten td,.tbl--karten tfoot th{border:0;padding:4px 0;text-align:left}
.tbl--karten td[data-label]{--lab:8.5rem;display:flow-root;padding-left:calc(var(--lab) + 12px);min-height:28px}
.tbl--karten td[data-label]::before{content:attr(data-label);float:left;width:var(--lab);margin-left:calc(-1 * var(--lab) - 12px);font-size:13px;font-weight:600;line-height:1.5;color:var(--muted);overflow-wrap:break-word}
.tbl--karten td[data-label]:empty::after{content:"–";color:var(--muted)}
.tbl--karten td[data-label="Aktionen"]:empty{display:none}
.tbl--karten .zahl{text-align:left}
.tbl--karten .zellaktionen,.tbl--karten .zellaktionen .absageform,.tbl--karten .ff-aktionen{flex-wrap:wrap}
.tbl--karten .zellaktionen>*{flex:0 1 auto;min-width:0}
.tbl--karten td :is(input,select,textarea){max-width:100%;min-width:0}
.tbl--karten .bu-rolle{flex-wrap:wrap}


/* === QR-Auswahl, Fragebogen, Unterschrift, Status === */
.namensliste{display:flex;flex-direction:column;gap:12px}
.namebtn{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px;border:1px solid var(--input-border);border-radius:var(--radius-sm);background:var(--surface);text-decoration:none;color:var(--text);font-weight:700;min-height:56px}
.namebtn .pfeil{color:var(--primary);font-size:22px}
.ident{font-size:18px;margin:6px 0 0}
.frage{padding:12px 0;margin:0;min-width:0;border:0;border-bottom:1px solid var(--border)}
.frage legend.qtext{padding:0;float:left;width:100%}   /* legend wie Absatz, ohne Rahmenlücke */
.frage .jn{clear:both}
.frage:last-child{border-bottom:0}
.qtext{margin:0 0 8px;font-weight:600}
.jn{display:flex;gap:10px}
.jn-opt{flex:1;margin:0;position:relative;cursor:pointer}
.jn-opt input{position:absolute;opacity:0;inset:0}
.jn-opt span{display:block;text-align:center;padding:12px;font-size:16px;border:1.5px solid var(--input-border);border-radius:var(--radius-sm);font-weight:700;min-height:50px;line-height:24px}
.jn-opt input:checked+span{border-color:var(--text);background:var(--text);color:var(--surface)}
.rechtstext p{font-size:15px;color:var(--text);line-height:1.55;max-width:65ch}
/* Gesperrt: nur das Feld abblenden – Hinweis und Absenden-Knopf bleiben voll lesbar. */
.unterschrift-box.gesperrt .sig-flaeche,.unterschrift-box.gesperrt .sig-clear{opacity:.45}
/* Nur das Unterschriftsfeld sperren – der Absenden-Button bleibt klickbar, damit er sagen kann, was noch fehlt. */
.unterschrift-box.gesperrt .sig-wrap{pointer-events:none}
.sig-wrap{margin:0}
/* Unterschriftsfeld mit Grundlinie (nur Anzeige, nicht im gespeicherten Bild) */
.sig-flaeche{position:relative}
.sig-flaeche::after{content:"";position:absolute;left:24px;right:24px;bottom:44px;border-bottom:1.5px solid #9aa1ad;pointer-events:none}
.sig-wrap .feldhinweis{margin-top:6px}
.sig-canvas{width:100%;height:180px;border:1.5px solid var(--input-border);border-radius:var(--radius-sm);background:#fff;touch-action:none;display:block}
/* „Löschen" unter dem Feld, nicht darüber – sonst wischt man beim Ansetzen die Unterschrift weg. */
.sig-clear{display:block;margin:12px 0 0 auto}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[aria-busy="true"]{cursor:wait}
.statuszeile{font-size:16px;margin-bottom:8px}
.fortschritt{height:12px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.fortschritt-bar{height:100%;background:var(--success);border-radius:999px;transition:width .3s}
.eingabe-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 4px}
.inline{display:inline}
.qrurl{display:inline-block;word-break:break-all;color:var(--primary);font-weight:700}
.qrbox{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:16px;border-top:1px solid var(--border)}
.qrbox h3,.qrbox p{margin:0}
.qrbox .feldhinweis,.qrurl{overflow-wrap:anywhere}
.qrbild{background:#fff;padding:12px;border-radius:var(--radius-sm);border:1px solid var(--border);min-width:160px;min-height:160px}
.inline-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.inline-form label{flex:1;min-width:220px}
.abrufliste{display:flex;flex-direction:column;gap:6px}
.abrufzeile{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border)}
.abrufurl{word-break:break-all;color:var(--primary);font-weight:600;font-size:13px}
.abrufaktion{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.zellaktionen{display:flex;gap:6px;align-items:center;flex-wrap:wrap}   /* Knöpfe nebeneinander, bei Platzmangel darunter */
.zellaktionen>*{flex:none}   /* Status und Knöpfe selbst brechen nie („nicht frei“) */
.tbl td select{max-width:180px}
tr.zeile--super td{background:color-mix(in srgb, var(--primary) 8%, transparent)}
/* Personenblock: Abschnitt mit Linie statt Karte in der Karte */
.tnblock{border:0;border-top:1px solid var(--border);border-radius:0;padding:24px 0 0;margin:24px 0 0;min-width:0}
.tnblock>legend{float:left;width:100%;padding:0;margin:0 0 4px;font-size:16px;font-weight:700;line-height:1.35}
.tnblock>legend .opt{font-size:14px}
.tnblock>legend+*{clear:both}
.stufen{border:0;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px}
.stufen legend{font-weight:600;font-size:14px;padding:0;margin-bottom:6px;width:100%}
.stufen .check{font-weight:400;min-height:44px}
.andere-ff{margin:10px 0 0}
.andere-ff summary{cursor:pointer;font-size:15px;font-weight:500;color:var(--text);min-height:44px;display:flex;align-items:center;gap:10px}
/* Aufklapper mit sichtbarem Pfeil – sonst liest er sich wie Hinweistext */
.andere-ff summary::before,.stammdaten-karte>summary::before,.aufklapper>summary::before,.trainer-auswahl>summary::before{content:"";flex:none;align-self:center;width:7px;height:7px;margin:0 3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.andere-ff[open] summary::before,.stammdaten-karte[open]>summary::before,.aufklapper[open]>summary::before,.trainer-auswahl[open]>summary::before{transform:rotate(45deg)}
.mailkarte{border-top:1px solid var(--border);padding:16px 0;margin:0}
.mailkarte:first-of-type{border-top:0;padding-top:0}
.mailkopf{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.mailan,.mailbetreff{font-size:14px;margin-bottom:4px;word-break:break-word}
.mailaktionen{display:flex;gap:8px;flex-wrap:wrap}
.mailtext{white-space:pre-wrap;word-break:break-word;background:var(--surface-2);border-radius:var(--radius-sm);padding:12px 14px;margin:12px 0 0;font-size:14px;line-height:1.55;max-width:75ch}

/* === TV-Protokoll: Läufe, Timer, Konfig === */
.head-actions{display:flex;gap:8px;flex-wrap:wrap}
/* Lauf: eigene Karte (der Läufe-Bereich ist keine Karte – keine Karte in der Karte) */
.lauf{border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;background:var(--surface)}
.lauf .f-dg{width:64px}
.abschnitte>*+*{margin-top:24px}
.laeufe-bereich>.card-head{margin-bottom:12px}
.laeufe-bereich>p{margin:0 0 12px}
/* Speicherstand + Speichern bleiben am Tablet immer im Blick */
.protoleiste{position:sticky;bottom:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;box-shadow:0 -2px 8px rgba(16,24,40,.08)}
.protoleiste .protostatus{flex:1 1 16rem;margin:0}
.lauf-top{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding-right:48px}
.lauf{position:relative}
.lauf .f-del{position:absolute;top:8px;right:8px}   /* Löschen fest oben rechts, auch wenn die Kopfzeile umbricht */
.lauf-trupp{flex:1 1 200px}   /* bricht bei schmalen Spalten unter DG um statt den Namen abzuschneiden */
/* DG 1: Gruppe – bis zu 4 Trupps, eine Uhr, dieselben Trainer; volle Breite, damit Trupp und Bemerkung nebeneinander passen */
.lauf--gruppe{grid-column:1/-1}
.gruppe-titel{flex:1 1 200px;align-self:center;margin:0;font-weight:700}
.gruppe-trupps{display:grid;gap:8px;margin-top:12px}
.uhr-info{margin-left:12px;font-size:18px;font-weight:700;vertical-align:middle}
.konfig--fest{font-weight:700}
.gruppe-zeile{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:8px}
.gruppe-trainer{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.trainer-knopf{min-height:44px;padding:8px 12px;border:1.5px solid var(--input-border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:inherit;font-weight:600;cursor:pointer}
.trainer-knopf[aria-pressed="true"]{border-color:var(--text);background:var(--text);color:var(--surface)}
.mini{margin:0}
.mini input,.mini select{margin-top:2px}
.konfig{display:flex;gap:8px;margin:10px 0}
.konf-opt{position:relative;flex:1;margin:0;cursor:pointer}
.konf-opt input{position:absolute;opacity:0;inset:0}
.konf-opt span{display:block;text-align:center;padding:10px;border:1.5px solid var(--input-border);border-radius:var(--radius-sm);font-weight:700;min-height:46px;line-height:26px}
.konf-opt input:checked+span{border-color:var(--text);background:var(--text);color:var(--surface)}
.timer{margin:12px 0;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.tbtn{width:100%;font-size:18px;font-weight:700;min-height:56px;background:var(--success-solid);color:#fff;border-color:var(--success-solid)}
.tbtn.phase1{background:var(--warning);border-color:var(--warning);color:#111}
.tbtn.phase2{background:var(--primary-solid);border-color:var(--primary-solid)}
.tbtn.fertig{background:var(--surface-2);border-color:var(--border);color:var(--text)}
.uhr{display:inline-block;min-width:4.2em;margin-left:10px;padding:2px 10px;border-radius:var(--radius-sm);font-variant-numeric:tabular-nums;font-weight:700;font-size:2rem;line-height:1.5;border:2px solid var(--border);vertical-align:middle}.uhr--warn{border-color:var(--warning);color:#111;background:var(--warning)}@media (prefers-reduced-motion:no-preference){.uhr--warn{animation:uhrpuls 1s ease-in-out infinite}}@keyframes uhrpuls{50%{opacity:.55}}
.zeiten{display:flex;gap:8px;margin-top:10px}
.zeiten .mini{flex:1}
.zeiten input{text-align:center;font-weight:700}

/* Protokoll: Status + Handy-Optimierung */
.protostatus{margin:12px 0;font-size:15px;font-weight:700;color:var(--muted);min-height:18px}
.protostatus.offen{color:var(--warning-text)}
.lauf-kurz{display:none;width:100%;text-align:left;background:none;border:0;padding:8px 4px;font:inherit;font-weight:700;cursor:pointer;min-height:44px}
.lauf--fertig .lauf-kurz{display:block}
.lauf--fertig:not(.lauf--offen)>:not(.lauf-kurz){display:none}
.lauf--offen .lauf-kurz{border-bottom:1px solid var(--border);margin-bottom:8px}
.lauf .mini{font-size:14px}
.anw-tbl .check{min-height:44px;display:inline-flex;align-items:center;gap:8px}
.anw-tbl .check input{width:22px;height:22px}
.lauf .btn,.lauf .delx{min-height:44px}
@media(min-width:641px){#laeufe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}#laeufe .lauf{margin-bottom:0}}
.protostatus.ok{color:var(--success-text);font-weight:700}
.protostatus.warn{color:var(--text);font-weight:700;background:color-mix(in srgb,var(--warning) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--warning) 35%,var(--surface));padding:8px 12px;border-radius:var(--radius-sm)}
@media(max-width:560px){
  .lauf-top{flex-wrap:wrap;align-items:stretch}
  .lauf-top .mini{flex:1 1 auto}
  .lauf-top .mini:first-child{flex:0 0 70px}
  .lauf-top .f-del{align-self:flex-start}
  .gruppe-zeile{grid-template-columns:1fr}
  .zeiten{gap:6px}
  .zeiten input{padding:10px 4px}
  .konf-opt span{padding:12px 4px}
  .head-actions{width:100%;justify-content:flex-start}
}

/* === App-Shell: Sidebar, Topbar, Drawer, Content === */
.shell{display:flex;min-height:100dvh;position:relative}
.sidebar{width:240px;flex:0 0 240px;background:var(--sidebar);color:#e6e8ec;display:flex;flex-direction:column;padding:14px 12px;position:sticky;top:0;height:100dvh}
.sidebar .brand{padding:6px 8px 16px}.brand-logo{height:32px;width:auto;display:block}
.sidenav{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.sidenav [role=group]{display:flex;flex-direction:column;gap:2px}
.sidenav-gruppe{display:block;padding:12px 12px 4px;font-size:13px;font-weight:600;color:#9aa3b2}
.sidenav a,.sidenav-foot a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-sm);color:#c3c9d4;text-decoration:none;font-weight:500;font-size:14px;min-height:44px}
.sidenav a:hover,.sidenav-foot a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidenav a.aktiv{background:rgba(210,35,42,.16);color:#fff;box-shadow:inset 3px 0 0 var(--primary)}
.sidenav-foot{margin-top:8px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px;display:flex;flex-direction:column;gap:2px}
.sidenav-foot a.aktiv{background:rgba(210,35,42,.16);color:#fff;box-shadow:inset 3px 0 0 var(--primary)}
/* Maus-Bedienung: kompaktere Zeilen, damit die gegliederte Navigation auf Laptop-Höhe passt (Touch behält 44 px) */
@media (pointer:fine){.sidenav a,.sidenav-foot a{min-height:34px;padding:7px 12px}.sidebar .brand{padding-bottom:12px}}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
html{scroll-padding-top:100px}   /* Sprungziele (#trainingstag) nicht unter der klebenden Kopfleiste */
.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:20}
/* Topbar-Titel: Orientierung beim Scrollen – leiser als die H1 der Seite */
.topbar-titel{margin:0;font-size:14px;font-weight:600;color:var(--muted)}
.hamburger{display:none;cursor:pointer;color:var(--text);min-width:44px;min-height:44px;align-items:center;justify-content:center}
.wrap{max-width:1100px;margin:0 auto;padding:24px 20px;width:100%}
.content>.wrap{flex:1 0 auto}   /* Fußzeile sitzt bei kurzen Seiten unten in der Inhaltsspalte */
.content>.foot{width:100%}      /* margin:auto in der Flex-Spalte würde sie sonst auf Textbreite schrumpfen */
.wrap--zentriert{max-width:680px}
.pub-top{background:var(--sidebar);padding:12px 18px}
.foot{max-width:1100px;margin:8px auto 24px;padding:0 20px;color:var(--muted);font-size:13px;display:flex;gap:8px 16px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.foot-nav a{display:inline-block;padding-block:8px;color:var(--muted)}
.aufgabe-neu{display:flex;gap:8px;margin:6px 0 4px}
.aufgabe-neu input[type=text]{flex:1;min-height:44px;padding:10px 12px;border:1px solid var(--input-border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:16px}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"],.feld--fehler{border-color:var(--danger)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 25%,transparent)}
/* Accessibility: sichtbarer Fokus bei Custom-Radios, größere Touch-Ziele, Skip-Link */
.jn-opt input:focus-visible+span,.konf-opt input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
.check-btn,.delx{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--surface);color:var(--text);padding:10px 14px;border-radius:0 0 8px 0;border:1px solid var(--border)}
.skip:focus{left:0}
.aufgabenliste{list-style:none;padding:0;margin:8px 0 0}
.aufgabe{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--border)}
.aufgabe-check,.aufgabe-del{margin:0}
.check-btn{background:none;border:none;cursor:pointer;font-size:20px;line-height:1;color:var(--muted);padding:0}
.check-btn:hover{color:var(--text)}
.aufgabe-text{flex:1;line-height:1.35}.aufgabe-text small{display:block}
.aufgabe--erledigt .aufgabe-text>span{text-decoration:line-through;color:var(--muted)}
.delx{background:none;border:none;color:var(--muted);cursor:pointer;font-size:20px;line-height:1;padding:0 4px}
.delx:hover{color:var(--danger)}
.kal-tag{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--border)}
.kal-tag:first-child{border-top:0}
.kal-datum{flex:0 0 64px;text-align:center;line-height:1.15}
.kal-wt{display:block;font-size:13px;color:var(--muted)}
.kal-dm{display:block;font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kal-jahr{display:block;font-size:13px;color:var(--muted)}
.kal-tag--heute .kal-dm{color:var(--success-text)}
.kal-body{flex:1;min-width:0}
.kal-kopf{display:flex;align-items:center;gap:8px}
.kal-ampel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;margin:6px 0}
.kal-aktionen{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.kal-summary{cursor:pointer;font-weight:600}
.kal-vergangen{margin-top:10px;opacity:.75}
.einteil-zeile select,.einteil-zeile input{width:100%}
.einteil-tbl td select{max-width:none;min-width:10rem}
.einteil-funktion{display:block;font-size:13px;color:var(--muted)}
.anreise-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.anreise-form input{width:6rem}
.fakten__breit{grid-column:1/-1}
.training-jetzt--heute{border-color:var(--success);background:color-mix(in srgb,var(--success) 6%,var(--surface))}
.badge-heute{display:inline-block;background:var(--success-solid);color:#fff;font-size:13px;font-weight:700;padding:2px 9px;border-radius:999px;vertical-align:middle}
.antrag-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.antrag-marke{font-size:18px;color:var(--muted)}.antrag-marke strong{color:var(--danger)}
.antrag-adressen{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px;font-size:14px;line-height:1.5}
@media(max-width:560px){.antrag-adressen{grid-template-columns:1fr}}
.antrag-text{line-height:1.6}
.antrag-hervor{font-weight:700;font-size:18px;margin:12px 0;padding:8px 12px;background:var(--surface-2);border-radius:var(--radius-sm);display:inline-block}
.rechtsseite{line-height:1.55}
.rechtsseite p,.rechtsseite li{max-width:65ch}
.rechtsseite h2{margin-top:32px;font-size:18px}
.rechtsseite .kontaktliste{list-style:none;padding:0;margin:8px 0}
.rechtsseite .kontaktliste li{margin:6px 0}
.scrim{display:none}
.drawer-toggle{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;opacity:0}
@media(max-width:1023px){
  .sidebar{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);visibility:hidden;transition:transform .2s,visibility .2s}
  .drawer-toggle:checked~.sidebar{transform:translateX(0);visibility:visible}
  .drawer-toggle:checked~.scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:30}
  .drawer-toggle:focus-visible~.content .hamburger{outline:2px solid var(--primary);outline-offset:2px}
  .hamburger{display:inline-flex}
  .wrap{padding:16px 14px}
  .content>.foot{padding-inline:14px}
}
@media(min-width:1024px){.drawer-toggle{display:none}}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:2px}
.kpi-ic{color:var(--muted)}
.kpi b{font-size:28px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi small{color:var(--muted);font-size:13px}

/* Google-Login + Benutzer-Verwaltung */
.btn--google{width:100%;background:var(--surface);color:var(--text);border:1px solid var(--border);font-weight:600}
.btn--google:hover{background:var(--surface-2)}
.oder{display:flex;align-items:center;text-align:center;color:var(--muted);font-size:13px;margin:16px 0}
.oder::before,.oder::after{content:"";flex:1;height:1px;background:var(--border)}
.oder span{padding:0 12px}
.stammdaten-karte>summary,.aufklapper>summary,.trainer-auswahl>summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer;min-height:44px;list-style:none}
.stammdaten-karte>summary::-webkit-details-marker,.aufklapper>summary::-webkit-details-marker,.trainer-auswahl>summary::-webkit-details-marker{display:none}
.trainer-auswahl>summary{gap:8px;font-size:14px;font-weight:600}
.stammdaten-karte>summary h2,.aufklapper>summary h2{display:inline;margin:0}
.stammdaten-karte__aktion{font-size:15px;color:var(--primary);font-weight:600}
.stammdaten-karte[open]>summary,.aufklapper[open]>summary{margin-bottom:16px}
.verlauf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.verlauf li{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pw-details{display:inline-block}
.pw-details summary{list-style:none;cursor:pointer}
.pw-details summary::-webkit-details-marker{display:none}
.pw-details .inline-form{margin-top:8px}

/* Eingeloggter Benutzer in der Topbar */
.topbar-titel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.topbar-user{display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}
.tu-name{font-weight:600}
.tu-rolle{background:var(--surface-2);color:var(--text)}
@media(max-width:560px){.tu-name{display:none}}

/* Mail-Freigabe: Tab-Leiste nach Mail-Typ */
.mailtabnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.mailtab.aktiv,.reiter .aktiv{background:var(--text);color:var(--surface);border-color:var(--text)}
.mailgruppe-titel{font-size:16px;margin:0 0 12px}

/* Marke „ready4fire" im Fließtext: rote „4" (Markenfarbe) */
.m4{color:var(--primary);font-weight:700}
/* Offizielles Logo in hellen Bereichen (Antrags-Kopf) */
.antrag-logo{height:46px;width:auto;display:block;max-width:60vw}
/* Druck: Bildschirm-Chrome weg, Tokens auf Schwarz/Weiß zurücksetzen – sonst kommt der Zahlungsbeleg
   im Dark Mode hellgrau auf weißem Papier aus dem Drucker. */
@media print{
  :root{--bg:#fff;--surface:#fff;--surface-2:#fff;--text:#000;--muted:#555;--border:#bbb;
        --success-text:#157a39;--warning-text:#8a4b00}
  .sidebar,.topbar,.scrim,.skip,.foot,.drawer-toggle,.no-print,.head-actions,.mailtabnav{display:none!important}
  .shell{display:block}
  .wrap{max-width:none;padding:0}
  .card{box-shadow:none;border:none;padding:0;margin:0 0 5mm;break-inside:avoid}
  a{color:#000;text-decoration:none}
  .antrag-logo{max-height:15mm}
}


/* Zahlungsbeleg (anmeldung/beleg_ansicht.php): Dokument zum Ausdrucken – am Bildschirm in den Rollen, im Druck A4 */
.belegleiste{justify-content:flex-end}
.beleg{max-width:800px}
.beleg-kopf{text-align:center;border-bottom:2px solid var(--primary);padding-bottom:12px;margin-bottom:24px}
.beleg-logo{height:auto;max-width:260px}
.beleg-an{margin:0 0 24px;line-height:1.45}
.beleg-titel{font-size:22px;margin:0 0 16px}
.beleg-tbl{width:100%;border-collapse:collapse;margin:12px 0;font-variant-numeric:tabular-nums}
.beleg-tbl th,.beleg-tbl td{border:1px solid var(--border);padding:6px 8px;text-align:left;vertical-align:top}
.beleg-tbl th:first-child,.beleg-tbl td:first-child{width:3.5rem;text-align:center}
.beleg-tbl th:nth-child(3),.beleg-tbl td:nth-child(3),.beleg-tbl th:last-child,.beleg-tbl td:last-child{width:6rem;white-space:nowrap;text-align:right}
.beleg-ust{font-size:13px;margin:6px 0 16px}
.beleg-bezahlt{margin:6px 0 16px}
.beleg-gruss{margin-top:24px}
.beleg-fuss{margin-top:24px;padding-top:12px;border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:13px;line-height:1.5}
@media(max-width:560px){.beleg-tbl{display:block;overflow-x:auto}}
/* Druck: eigene Seitenvorlage nur für den Beleg (andere Seiten behalten ihr Format) */
@page beleg{size:A4 portrait;margin:16mm}
@media print{
  .pub-top{display:none!important}
  .beleg{max-width:none;padding:0;page:beleg}
  .beleg p,.beleg li{font-size:10.5pt;line-height:1.4;margin:6px 0}
  .beleg-titel{font-size:20pt}
  .beleg-fuss{font-size:8.5pt}
  .beleg .status::before{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

/* Mail-Freigabe: Kopf je Kategorie (Titel + Sammel-Freigabe) */
.mailgruppe-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}

/* === Verwaltung: Dashboard, Kalender, Bedarf, Feuerwehren, Anliegen === */
.bedarf-link,.anliegen-link{font-size:13px;color:var(--muted);overflow-wrap:anywhere}

/* Dashboard: Gruß als H1, Training mit Datum als Ziffer, „Fällig“ als Ampel-Liste mit Sprung */
.dash-gruss{margin:0}
.training-jetzt h2{margin:0 0 12px}
.dash-training__wann{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0}
.dash-training__datum{font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dash-training__ort{margin:6px 0 0;font-size:15px}
.dash-training__knoepfe{margin-top:16px}
.faellig{list-style:none;margin:0;padding:0}
.faellig li+li{border-top:1px solid var(--border)}
.faellig__eintrag{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;min-height:56px;padding:12px 6px;margin-inline:-6px;border-radius:var(--radius-sm);color:var(--text);text-decoration:none}
.faellig__eintrag:hover{background:var(--surface-2)}
.faellig__eintrag:hover .faellig__text{text-decoration:underline;text-underline-offset:3px}
.faellig__status{flex:1 1 16rem;gap:12px;font-size:16px;font-weight:500}
.faellig__zahl{min-width:2ch;font-size:28px;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right}
.faellig__zusatz{font-size:13px;color:var(--muted)}
.faellig__pfeil{display:inline-flex;margin-left:auto;color:var(--muted)}
.dash-neu__zeile{display:flex;gap:12px;margin-top:6px}
.dash-neu__zeile input{flex:1;min-width:0}
@media(max-width:640px){.dash-training__knoepfe .btn{flex:1 1 auto}}

/* Kalender: Liste ohne Abblenden, Besetzung als Ampel mit Wort */
.kal-liste{list-style:none;margin:0;padding:0}
.kal-liste .kal-tag{gap:16px}
.kal-liste .kal-kopf{gap:12px}
.kal-meta{margin:0;font-size:14px;color:var(--muted)}
.kal-besetzung{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:6px;font-size:13px}
.kal-liste .kal-aktionen{margin-top:12px}
.kal-vorbei .kal-liste{margin-top:12px}

/* Bedarfsmeldungen: Jahr-Reiter, Nachfrage je Termin, aufklappbare Erklärungen */
.bedarf-jahre{display:flex;flex-wrap:wrap;gap:6px}
.nachfrage-termine{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:12px}
.nachfrage-termin{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-sm)}
.nachfrage-termin__datum{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.nachfrage-termin .ampel{margin:0;white-space:normal;color:var(--text)}
.nachfrage-termin__zahl{font-size:13px;color:var(--muted)}
.bedarf-herkunft>summary,.bedarf-nachtragen>summary,.anliegen-erledigt>summary{padding-block:12px;cursor:pointer;font-weight:600}
.bedarf-herkunft>summary{font-size:14px}
.bedarf-herkunft .erklaerung{margin-top:6px}
.bedarf-nachtragen__knopf{margin-top:16px}
/* Stand in der Tabelle: Punkt an der ersten Zeile, Spalte breit genug für „noch kein Platz“ */
.bedarf-tabelle .status{align-items:flex-start}
.bedarf-tabelle .status::before{margin-top:.25em}
@media(min-width:641px){.bedarf-tabelle td[data-label="Stand"]{min-width:9rem}}
@media(min-width:641px){
  .bedarf-tabelle td[data-label="Termine & Verlauf"]{min-width:15rem}   /* sonst wird die Zeile sehr hoch */
  .tn-tabelle th,.tn-tabelle td,.ff-tabelle th,.ff-tabelle td{padding-inline:6px}   /* viele Spalten: passt auch bei 1280 px */
}

/* Feuerwehren: Aktionen in eigenem Container (nicht als Flex-Zelle), Formulare mit Gruppen-Legende */
.ff-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ff-aktionen .btn{white-space:nowrap}
.ff-tabelle .status{white-space:nowrap}

.ff-form .ff-gruppe{min-width:0;margin:40px 0 0;padding:0;border:0}
.ff-form .ff-gruppe>legend{padding:0;font-size:18px;font-weight:700;line-height:1.3}
.ff-form .ff-gruppe>legend .opt{font-size:14px}
.ff-form .grid2{margin-top:16px}
.ff-knoepfe{margin-top:40px}
/* Land nur bei „Ausland“ – ohne Skript; Browser ohne :has() zeigen das Feld einfach immer. */
.ff-adresse:has(#ff_bundesland option[value="Ausland"]:not(:checked)) .ff-land{display:none}

/* Anliegen: offene zuerst, Status als Ampel mit Wort, Nachricht als Fließtext */
.anliegen-liste{list-style:none;margin:0;padding:0}
.anliegen{padding:16px 0;border-top:1px solid var(--border)}
.anliegen:first-child{padding-top:0;border-top:0}
.anliegen__kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.anliegen__titel{margin:0;font-size:16px;font-weight:700;overflow-wrap:anywhere}
.anliegen__meta{margin:6px 0 0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.anliegen__text{margin:12px 0 0;max-width:60ch;font-size:15px;white-space:pre-line;overflow-wrap:anywhere}
.anliegen__aktion{margin-top:12px}
.anliegen-erledigt .anliegen-liste{margin-top:12px}

/* Passwort */
.pw-knoepfe{margin-top:24px}

/* === Verwaltung: E-Mails, Zahlungen, Fahrtkosten, Einstellungen, Benutzer, Trainer, Aufgaben === */
/* Stapel: Abschnitte innerhalb einer Karte mit gleichmäßigem Abstand (Feld zu Feld 16) */
.v4-stapel>*{margin-block:0}
.v4-stapel>*+*{margin-top:16px}

/* --- E-Mails: Freigabe --- */
.ml-smtp code{font-family:inherit;font-weight:600}
.ml-kopftext{display:flex;flex-direction:column;gap:6px;flex:1 1 18rem;min-width:0}
.ml-kopftext p{margin:0}
.ml-kopftext .mailbetreff{font-size:15px}
.mailaktionen{align-items:flex-start}
.ml-karte>.alert{margin-top:12px}
.ml-adresse{margin-top:12px}
.ml-adresse label{margin:0}
.ml-adresse__zeile{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.ml-adresse__zeile input{flex:1 1 16rem;width:auto;min-width:0}
.ml-auf>summary{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--text)}
.ml-auf>summary::-webkit-details-marker{display:none}
.ml-auf>summary::before{content:"";flex:none;width:7px;height:7px;margin:0 3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.ml-auf[open]>summary::before{transform:rotate(45deg)}
.ml-auf>form{margin-top:6px}
.ml-text__titel{flex:none}
.ml-vorschau{flex:1;min-width:0;font-size:14px;font-weight:400;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ml-text[open] .ml-vorschau{display:none}
.ml-volltext{margin-top:6px}
.ml-verlauf-kopf{align-items:flex-end;flex-wrap:wrap}
.ml-verlauf-kopf h2{margin:0}
.ml-suche{flex:0 1 28rem;min-width:0}
.ml-suche label{margin:0}
.ml-suche__zeile{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.ml-suche__zeile input{flex:1 1 12rem;width:auto;min-width:0}
.ml-pager{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.ml-jahresabschluss{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px}
.ml-jahresabschluss label{margin:0}
.ml-jahresabschluss input{display:block;width:8rem}
.ml-verlauf .status{white-space:nowrap}
@media(max-width:640px){.ml-suche{flex-basis:100%}}

/* --- Zahlungen --- */
.zl-kennzahlen .stat{container-type:inline-size}
.zl-kennzahlen .stat b{white-space:nowrap;font-size:min(28px,17cqi)}   /* „12.840,00 €“ ohne Umbruch */
.zl-kennzahlen .stat small{display:inline-flex;align-items:center;gap:6px}
.zl-kennzahlen .stat[class*="status--"] small::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--status);box-shadow:inset 0 0 0 1px rgba(16,24,40,.25)}
.zl-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.zl-reiter{display:flex;flex-wrap:wrap;gap:12px}
.zl-erinnern,.zl-aktion,.zl-stand{margin:0}
.zl-belegnr{white-space:nowrap}
.zl-meta{display:block;margin-top:6px;font-size:13px;font-weight:400;color:var(--muted)}
.zl-personen>summary{cursor:pointer;min-height:24px}
.zl-personenliste{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.zl-personenliste li,.zl-person{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.zl-stand{display:flex;align-items:center;gap:6px}
.tbl td .zl-stand select{width:auto}

/* --- Fahrtkosten --- */
.fk-filter{display:grid;grid-template-columns:8rem minmax(10rem,14rem) auto;align-items:end;justify-content:start;gap:16px}
.fk-filter label{margin:0}
.fk-tbl .num{text-align:right;white-space:nowrap}
.fk-tbl tfoot th{border-top:2px solid var(--border)}
.fk-tbl tfoot th:last-child{font-size:18px}
@media(max-width:520px){.fk-filter{grid-template-columns:1fr 1fr}.fk-filter .btn{grid-column:1/-1}}
/* Handy: Summenzeile als Summenkarte – die Ziffer führt */
@media(max-width:640px){
  .tbl.fk-tbl .num{text-align:left}
  .tbl.fk-tbl tfoot tr{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding:16px;border:0;border-radius:var(--radius-sm);background:var(--surface-2)}
  .tbl.fk-tbl tfoot th{padding:0;border:0;font-size:15px}
  .tbl.fk-tbl tfoot th:last-child{font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
}
/* Druck: eigene Seitenvorlage im Querformat (gilt nur für die Fahrtkosten-Blätter) */
@page fahrtkosten{size:A4 landscape;margin:14mm}
@media print{
  .fk-blatt,.fk-jahr{page:fahrtkosten;break-inside:avoid}
  .fk-tbl{font-size:10pt;width:100%}
  .fk-tbl th,.fk-tbl td{border:1px solid #bbb!important;padding:1.5mm 2mm}
  .tbl.fk-tbl tfoot tr{display:table-row;background:none;padding:0}
}

/* --- Einstellungen --- */
.es-gruppe{border:0;margin:40px 0 0;padding:0;min-width:0}
.es-form>.es-gruppe:first-of-type{margin-top:24px}
.es-gruppe>legend{float:left;width:100%;padding:0;margin:0 0 12px;font-size:18px;font-weight:700;line-height:1.3}
.es-standard{display:block;color:var(--text)}
.es-gruppe>legend+*{clear:both}
.es-gruppenhinweis{margin:0}
.es-preise{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:0 16px}
.es-absenden{margin-top:40px}

/* --- Vorstand (Einstellungen) --- */
.vs-karte{max-width:960px}
.vs-periode{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:0 16px}
.vs-kopf,.vs-zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.6fr);gap:8px 12px}
.vs-gruender .vs-kopf,.vs-gruender .vs-zeile{grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr)}
.vs-kopf{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:6px}
.vs-zeile{margin-bottom:8px;clear:both}   /* Kopf ist am Handy ausgeblendet: Float der Legende trotzdem beenden */
.vs-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:599px){
  .vs-kopf{display:none}
  .vs-zeile,.vs-gruender .vs-zeile{grid-template-columns:1fr;padding-bottom:12px;border-bottom:1px solid var(--border)}
  .vs-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-size:13px;color:var(--muted)}
}

/* --- Benutzer --- */
.bu-rolle{display:flex;align-items:center;gap:6px;margin:0}
.tbl td .bu-rolle select{width:auto}
.bu-aktionen{flex-wrap:wrap}
.bu-passwort{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:12px;min-width:14rem}
.bu-passwort label{margin:0;width:100%}
.bu-passwort .feldhinweis{margin:0}
.bu-absenden{margin-top:24px}

/* --- Trainer --- */
.tr-km{white-space:nowrap}
/* Handy: Zeilenknöpfe mit echtem Abstand statt aneinanderklebender Umbrüche */
@media(max-width:640px){.tbl td.tr-aktionen,.tbl td.bu-aktionen{display:flex;flex-wrap:wrap;gap:12px}}
.tr-form .tnblock>legend{margin-bottom:12px}
.tr-knoepfe{margin-top:24px}
.v4-stapel>.tr-km-form{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:24px}
.tr-km-form .feldhinweis{margin:0}

/* --- Aufgaben --- */
.af-neu label{margin:0}
.af-neu__zeile{display:flex;gap:12px;margin-top:6px}
.af-neu__zeile input{flex:1;width:auto;min-width:0}
.af-liste{margin:0}
.af-liste>.aufgabe{gap:12px;padding-block:12px}
.af-liste>.aufgabe:first-child{border-top:0;padding-top:0}

/* --- E-Mail-Vorlagen --- */
.mv-form{display:flex;flex-direction:column;gap:24px}
.mv-form .card>.feldhinweis{margin-bottom:0}
.mv-form .feldhinweis code{font-family:inherit;font-size:13px;font-weight:600;color:var(--text)}

/* === Verwaltung: Akte, Antrag-Ansicht, Zertifikate, Teilnehmerliste === */

/* Dokument-Leiste (Akte, Antrag): Zurück und Drucken rechtsbündig über dem Dokument */
.dok-leiste{justify-content:flex-end}

/* --- Trainings-Akte: Abschnitte als Karten, Tabellen bleiben am Handy Tabellen (.tbl--fest) --- */
.akte>*+*{margin-top:24px}
.akte-logo{height:auto;max-width:240px}
.akte-meta{font-size:13px;color:var(--muted)}
.akte-dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0}
.akte-dl dt{font-size:14px;font-weight:500;color:var(--muted)}
.akte-dl dd{margin:0;overflow-wrap:anywhere}
.akte-tbl th,.akte-tbl td{padding:6px 12px;vertical-align:top}
.akte-tbl thead th{white-space:nowrap}
.akte-tbl .status{white-space:nowrap}
@media screen{.akte-tn{font-size:13px}.akte-tn .status,.akte-tn thead th{white-space:normal}.akte-tn th,.akte-tn td{padding-inline:6px}}
.akte-zusatz{display:block;font-size:13px;color:var(--muted)}
/* Fragebogen: Frage als Zeilenkopf in Fließtext-Optik, Antwort schmal und zentriert */
.akte-fragen th[scope=row]{font-size:14px;font-weight:400;color:var(--text)}
.akte-tbl .akte-antwort{width:7rem;font-weight:600}
.akte-fragen tr:last-child th{border-bottom:0}
/* Wenige Spalten: am Handy ohne Querscrollen, Text bricht um */
.akte-tbl--schmal.tbl--fest{min-width:0}
@media(max-width:640px){.akte-tbl .akte-antwort{width:5.5rem}}
.akte-auffaellig,.akte-auffaellig .status{color:var(--warning-text);font-size:14px;font-weight:700}
/* Wortlaut der Erklärungen: lesbare Zeilenlänge */
.akte-wortlaut p{max-width:65ch;margin:0;font-size:15px;line-height:1.55}
.akte-wortlaut p+p{margin-top:12px}
/* Unterschriften: dunkle Tinte braucht auch im Dunkelmodus weißes Papier */
.akte-sig{display:block;max-width:min(320px,100%);height:auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm)}

/* --- Antrag (eigene Seite und eingebettet in der Akte) --- */
.antrag-dok>*+*{margin-top:16px}
.antrag-dok--einzeln{max-width:800px}
.antrag-dok .antrag-titel{margin:0}
.antrag-werte dd{margin:0}
.antrag-dok .antrag-text p{max-width:65ch}
/* Briefkopf-Logo (dunkle Schrift): im Dunkelmodus am Bildschirm auf weißem Grund, im Druck unverändert */
@media screen and (prefers-color-scheme:dark){
  .akte-logo,.antrag-dok .antrag-logo{background:#fff;padding:6px 12px;border-radius:var(--radius-sm);box-sizing:content-box}
}
.antrag-sig{display:block;max-width:100%;height:auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm)}

/* --- Zertifikate: Meldung neben dem Sammelknopf (Live-Region, leer ohne Platzbedarf) --- */
.zert-status{margin:0;font-size:15px}

/* --- Teilnehmerliste: eine Tabelle, je Trupp ein Abschnitt (tbody mit Kopfzeile) --- */
.tl-tabelle.tbl--fest{min-width:0}   /* drei Spalten passen auch am Handy */
.tl-tabelle .status{white-space:nowrap}
.tl-tabelle .tl-gruppe th{padding:24px 12px 12px;font-size:16px;font-weight:700;color:var(--text);border-bottom:1px solid var(--border)}
.tl-tabelle tbody:first-of-type .tl-gruppe th{padding-top:12px}
.tl-tabelle .tl-gruppe:hover{background:transparent}
.tl-gruppe__name{margin-right:16px}

/* --- Druck: eigene Seitenvorlagen nur für Akte und Antrag (andere Seiten behalten ihr Format) --- */
@page akte{size:A4 portrait;margin:14mm}
@page antrag{size:A4 portrait;margin:14mm}
@media print{
  .akte{page:akte}
  .akte>*+*,.antrag-dok>*+*{margin-top:0}
  .akte .card{margin:0 0 8mm;break-inside:auto}
  .akte h2{font-size:13pt}
  .akte h3{font-size:11pt}
  .akte .tblwrap{overflow:visible}
  .akte-tbl{font-size:9.5pt}
  .akte-tbl th,.akte-tbl td{border:1px solid var(--border);padding:1.5mm 2mm}
  .akte-tbl thead{display:table-header-group}
  .akte-tbl tr{break-inside:avoid}
  .akte-auffaellig,.akte-auffaellig .status{font-size:9.5pt}
  .akte .status::before{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .akte-wortlaut p{max-width:none;font-size:10pt;line-height:1.4}
  .akte-wortlaut p+p{margin-top:2mm}
  .akte-seite{break-before:page}
  .akte-sig{max-height:35mm;width:auto}
  .akte-antrag .card{margin-bottom:4mm}
  .akte-antrag .antrag-titel{font-size:16pt}
  /* Antrag allein: alles auf eine A4-Seite, keine Umbrüche mitten im Antrag */
  .antrag-dok--einzeln{page:antrag;max-width:none}
  .antrag-dok--einzeln .card{margin:0 0 5mm;break-inside:avoid}
  .antrag-dok--einzeln .antrag-titel{font-size:17pt}
  .antrag-dok .antrag-abschnitt{font-size:12pt;margin:2mm 0 1mm}
  .antrag-dok .antrag-text p,.antrag-dok .antrag-adressen{margin:1mm 0;font-size:10.5pt;line-height:1.35}
  .antrag-dok .wertfeld__wert{padding:1mm 0}
  .antrag-dok .antrag-sig{max-height:38mm;width:auto}
}
/* === Fingerbedienung (Tablet, Handy): Ziele mind. 44 px, Häkchen 24 px (Apple HIG, WCAG 2.5.8) === */
@media (pointer:coarse){
  .btn--klein{min-height:44px}
  input[type=checkbox],input[type=radio],.check--klein input,.kachel input[type=checkbox]{width:24px;height:24px}
  .zl-personen>summary,.kal-summary{min-height:44px;padding-block:10px}
  .btn:active{filter:brightness(.92)}   /* sofort sichtbares Feedback beim Antippen, für jede Knopffarbe */
  .trupp-tabelle td a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
}