/* FahrLotse – heller Arbeitsbereich mit grüner Marke (gleiches Grün wie die Website, akzent-500 #18794e). Aufbau: Tokens → Grundlagen → Kopfleiste → Bausteine → Bereiche. */
:root {
  /* Flächen & Text */
  --bg: #f3f5f8;              /* Seitenhintergrund */
  --flaeche: #ffffff;         /* Karten, Dialoge, Panels */
  /* Diagramme (Betreiber-Ansicht): kategoriale Reihenfolge, „Übrige“ grau */
  --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100; --viz-5: #e87ba4; --viz-rest: #9a9ca3;
  --flaeche-2: #f7f8fa;       /* leicht abgesetzt (Zeilen, Kennzahlen) */
  --flaeche-3: #eceff3;       /* Spuren: Fortschrittsbalken, Segment-Hintergrund */
  --ink: #101828;             /* Text primär */
  --muted: #5b6474;           /* Text sekundär (≥ 5:1 auf Weiß) */
  --muted-2: #667085;         /* Beschriftungen, Zeitachse (≥ 4.5:1 auf Weiß) */
  --linie: #e4e7ec;           /* Rahmen, Trennlinien */
  --linie-control: #7b8492;   /* Feldgrenzen: mindestens 3:1 auf Weiß */
  --linie-2: #d0d5dd;         /* Rahmen von Eingabefeldern */
  --hover: #f2f4f7;           /* Hover-Fläche */
  /* Marke: freundliches Grün (wie die Website: akzent-500/600/700/200/50) – Kopfleiste und Hauptaktion; Schrift darauf immer Weiß (5,4:1) */
  --marke: #18794e;           /* Kopfleiste, Hauptaktion („+ Termin“, Speichern …) */
  --marke-dunkel: #146641;    /* Hover der Hauptaktion */
  --marke-tief: #0f5135;      /* gewählte Zustände (Chips, Skalen), Text auf hellem Grün */
  --marke-hell: #b2dfc4;      /* helle Hervorhebung auf der grünen Kopfleiste */
  --marke-bg: #edf7f1;        /* grün getönte Flächen (Zweitaktion, Auswahl) */
  --auf-marke: #ffffff;       /* Schrift auf Grün */
  --marke-wort: #e0f5ea;      /* „Lotse“ der Wortmarke auf der Kopfleiste (≥ 4,5:1 auf --marke) */
  --auf-marke-warn: #fff0cf;  /* Warnhinweis (Verbindungsproblem) auf der Kopfleiste (≥ 4,5:1) */
  --kopf-aktiv: rgb(0 0 0 / 0.18); /* aktiver Bereich in der Kopfleiste: dunklere Fläche, Weiß ≥ 4,5:1 */
  --kopf-hover: rgb(255 255 255 / 0.08);
  --blau: #2563eb;            /* Auswahl, Fokus, Links, aktive Navigation */
  --blau-bg: #eef3ff;
  /* Statusfarben – nur mit fester Bedeutung (Erfolg, Warnung, Fehler, Info, neutral) */
  --gruen: #0b7a45;   --gruen-bg: #e8f6ee;
  --warn: #8a5a00;    --warn-akzent: #d97706; --warn-bg: #fdf4dc;
  --rot: #c0262d;     --rot-bg: #fdeded;
  --info: #1d4ed8;    --info-bg: #eef3ff;
  --neutral: #5b6474; --neutral-bg: #eef0f3;
  /* Terminarten – feste Farben, überall gleich (Kalender, Filter, Menüs, Dialoge, Kartei). Bewusst ohne Rot/Gelb/Grün. */
  --typ-fahrstunde: #3f5873;  /* Fahrstunde, Doppelstunde */
  --typ-sonderfahrt: #7c3aed; /* Überland, Autobahn, Dämmerung */
  --typ-pruefung: #db2777;    /* Theorie- und Praxisprüfung */
  --typ-theorie: #0891b2;     /* Theoriestunden */
  --typ-ersttermin: #4f46e5;  /* Beratung, Probefahrt, Chat-Termine der Website */
  --typ-kurs: #b45309;        /* Aufbauseminar, Erste Hilfe */
  --typ-blocker: #8b8d93;     /* blockierte Zeit */
  /* Form */
  --schatten: 0 1px 2px rgb(16 24 40 / 0.05);
  --schatten-hover: 0 4px 12px -4px rgb(16 24 40 / 0.16);
  --schatten-gross: 0 24px 64px -16px rgb(10 16 32 / 0.4);
  --r-karte: 0.75rem;
  --r-control: 0.5rem;
  --r-klein: 0.375rem;
  --h-control: 36px;          /* Höhe von Knöpfen, Eingabefeldern, Auswahlfeldern */
  --h-klein: 30px;
  /* Typografie */
  --schrift: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--schrift);  /* Überschriften und Kennzahlen: dieselbe Schrift, klare Gewichte statt Versalien */
  --marke-schrift: "Oswald", "Arial Narrow", system-ui, sans-serif; /* nur Logo */
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-seite: 22px;           /* Seitentitel */
  --fs-abschnitt: 15px;       /* Abschnitts- und Kartenüberschriften */
  --fs-text: 14px;
  --fs-klein: 12.5px;         /* Sekundärinfos */
  --fs-label: 11.5px;         /* Beschriftungen, Badges */
  --fs-min: 12px;             /* kleinste Schrift im Alltags-UI (WCAG/Material) */
  --fs-kennzahl: 22px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: var(--fs-text)/1.5 var(--schrift); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11"; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--blau); }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--marke); color: var(--auf-marke); padding: 8px 14px; border-radius: var(--r-control); font-weight: 600; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Kopfleiste: grün (Markenelement), eine Zeile; Höhe 56 px, alle Elemente 34 px hoch. Schrift Weiß bzw. Weiß 88 % (≥ 4,5:1 auf Grün) */
.kopf { position: sticky; top: 0; z-index: 30; background: var(--marke); color: var(--auf-marke); }
.kopf-in { max-width: 1480px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 0 20px; min-height: 56px; }
/* Logo: Kompassnadel (Markenzeichen) direkt auf der grünen Fläche + Wortmarke „FahrLotse“ */
.marke { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 8px 0 6px; margin-left: -6px; color: var(--auf-marke); text-decoration: none; flex: none; border-radius: var(--r-control); transition: background 120ms; }
.marke:hover { background: var(--kopf-hover); }
.marke-zeichen { flex: none; display: block; width: 26px; height: 26px; color: var(--auf-marke); }
.marke-wort { font: 600 17px/1 var(--schrift); letter-spacing: -0.02em; white-space: nowrap; }
.marke-wort b { font-weight: 400; color: var(--marke-wort); }
.tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; align-self: stretch; align-items: center; }
.tabs::-webkit-scrollbar { display: none; }
.nav-kurz { display: none; }
@media (max-width: 520px) { .nav-kurz { display: inline; } .nav-lang { display: none; } }
.tabs a { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; white-space: nowrap; flex: none; border-radius: var(--r-control); color: rgb(255 255 255 / 0.88); text-decoration: none; font-weight: 600; font-size: 14px; }
.tabs a:hover { color: #fff; background: var(--kopf-hover); }
.tabs a[aria-current="page"] { color: #fff; background: var(--kopf-aktiv); box-shadow: inset 0 -2px 0 #fff; }
.tabs a:focus-visible, .kopf :focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.zahl { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--marke); color: var(--auf-marke); font-size: var(--fs-min); font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.kopf .zahl { background: var(--auf-marke); color: var(--marke-tief); }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.konto-name { color: rgb(255 255 255 / 0.9); font-size: 13px; font-weight: 500; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.sync { display: inline-flex; align-items: center; gap: 8px; height: 30px; max-width: 280px; border: 1px solid rgb(255 255 255 / 0.28); background: var(--kopf-aktiv); color: #fff; border-radius: 999px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.sync span:last-child { overflow: hidden; text-overflow: ellipsis; }
.sync:hover { border-color: rgb(255 255 255 / 0.55); color: #fff; }
.sync .punkt { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / 0.55); flex: none; }
.sync.ok .punkt { background: #8ff0b8; box-shadow: 0 0 0 3px rgb(143 240 184 / 0.28); }
/* Verbindungsproblem = Warnung (Statusfarbe, kein Markenorange) */
.sync.fehler { border-color: rgb(255 196 110 / 0.7); color: var(--auf-marke-warn); }
.sync.fehler .punkt { background: #ffc46e; }
.sync.laeuft .punkt { animation: puls 1s infinite; }
@keyframes puls { 50% { opacity: 0.3; } }
@media (max-width: 1100px) { .konto-name { display: none; } }

main { max-width: 1480px; margin: 0 auto; padding: 20px 20px 48px; outline: none; }
.laden { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 80px 0; color: var(--muted); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dreh 0.7s linear infinite; display: inline-block; }
@keyframes dreh { to { transform: rotate(360deg); } }

/* ---- Bausteine ---- */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--schatten); }
/* Knöpfe: primär (Orange), dunkel (wichtige Zweitaktion), leise (Standard-Zweitaktion), gefahr; .klein = kompakt */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--h-control); padding: 6px 14px; border-radius: var(--r-control); border: 1px solid transparent; background: var(--marke); color: var(--auf-marke); font-weight: 600; font-size: 14px; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: background 0.12s, border-color 0.12s, box-shadow 0.12s; }
.knopf:hover { background: var(--marke-dunkel); }
.knopf:disabled { opacity: 0.55; cursor: default; }
/* „dunkel“ = wichtige Zweitaktion: grün getönt statt schwarz (klar unter der Hauptaktion) */
.knopf.dunkel { background: var(--marke-bg); color: var(--marke-tief); border-color: color-mix(in srgb, var(--marke) 35%, transparent); }
.knopf.dunkel:hover { background: color-mix(in srgb, var(--marke) 16%, var(--flaeche)); }
.knopf.leise { background: var(--flaeche); color: var(--ink); border-color: var(--linie-2); box-shadow: var(--schatten); }
.knopf.leise:hover { background: var(--hover); border-color: #b9c0cc; }
.kopf .knopf.leise { background: transparent; color: rgb(255 255 255 / 0.92); border-color: rgb(255 255 255 / 0.35); box-shadow: none; min-height: 30px; padding: 4px 12px; font-size: 13px; }
.kopf .knopf.leise:hover { color: #fff; border-color: rgb(255 255 255 / 0.7); background: rgb(255 255 255 / 0.1); }
.knopf.gefahr { background: var(--flaeche); color: var(--rot); border-color: color-mix(in srgb, var(--rot) 35%, transparent); }
.knopf.gefahr:hover { background: var(--rot-bg); }
.knopf.klein { min-height: var(--h-klein); padding: 4px 11px; font-size: 13px; }
.knopf svg { flex: none; }
.icon { width: var(--h-control); height: var(--h-control); display: inline-grid; place-items: center; border-radius: var(--r-control); border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--muted); box-shadow: var(--schatten); }
.icon:hover { color: var(--ink); background: var(--hover); }
@media (pointer: coarse) { .knopf { min-height: 42px; } .knopf.klein { min-height: 36px; } .icon { width: 42px; height: 42px; } }
/* Eingabefelder und Auswahlfelder: gleiche Höhe, gleicher Rahmen, gleicher Fokus */
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px !important; }
select:disabled { opacity: 0.6; }
.feld input:focus, .feld select:focus, .feld textarea:focus, textarea.notiz:focus, .suche input:focus, .steuer:focus, .leiste select:focus, .fl-wahl select:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 18%, transparent); }
.steuer { min-height: var(--h-control); border: 1px solid var(--linie-2); border-radius: var(--r-control); background-color: var(--flaeche); padding: 6px 10px; font-size: 13.5px; font-weight: 500; box-shadow: var(--schatten); }
/* Filterchips: aktiv = Rahmen + Fläche + Punkt in Farbe; inaktiv = grau, Punkt hohl */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; border: 1px solid var(--linie-2); background: var(--flaeche); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: background 0.12s, border-color 0.12s; }
.chip:hover { color: var(--ink); border-color: #b9c0cc; }
.chip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--f, var(--marke-tief)) 55%, transparent); background: color-mix(in srgb, var(--f, var(--marke-tief)) 9%, var(--flaeche)); color: var(--ink); }
.chip .n { font-size: var(--fs-min); color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.punkt-f { width: 8px; height: 8px; border-radius: 50%; background: var(--f); flex: none; }
.chip[aria-pressed="false"] .punkt-f { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--f) 70%, transparent); }
/* Segment-Umschalter (Ansicht, Kontaktart, Führerscheinart): aktive Wahl weiß und erhaben */
.seg { display: inline-flex; background: var(--flaeche-3); padding: 3px; border-radius: var(--r-control); gap: 2px; }
.seg button { border: 0; background: transparent; min-height: 28px; padding: 3px 11px; border-radius: 6px; font-weight: 600; font-size: 13px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--flaeche); color: var(--ink); box-shadow: 0 1px 2px rgb(16 24 40 / 0.12), 0 0 0 1px rgb(16 24 40 / 0.04); }
.seg .n { font-size: var(--fs-min); color: var(--muted); font-variant-numeric: tabular-nums; }
/* Badges: neutral oder mit Farbe (--f) bzw. Statusklasse */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-label); font-weight: 600; line-height: 1.5; padding: 1px 8px; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, var(--f, var(--muted)) 12%, transparent); color: color-mix(in srgb, var(--f, var(--muted)) 82%, #000); }
.tag.ok { background: var(--gruen-bg); color: var(--gruen); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.fehler { background: var(--rot-bg); color: var(--rot); }
.tag.info { background: var(--info-bg); color: var(--info); }
.tag.neutral { background: var(--neutral-bg); color: var(--neutral); }
.tag svg { flex: none; }
.av { width: 34px; height: 34px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--f, var(--muted)) 13%, var(--flaeche)); color: color-mix(in srgb, var(--f, var(--muted)) 55%, var(--ink)); }
/* Leer-, Lade- und Fehlerzustände */
.leer { padding: 28px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--linie-2); border-radius: var(--r-karte); background: var(--flaeche); }
.hinweis { padding: 10px 14px; border-radius: var(--r-control); font-size: 13.5px; background: var(--warn-bg); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn-akzent) 28%, transparent); }
.hinweis.fehler { background: var(--rot-bg); color: var(--rot); border-color: color-mix(in srgb, var(--rot) 25%, transparent); }
.klein-text { font-size: var(--fs-klein); color: var(--muted); }
.titel { font-family: var(--display); font-weight: 650; font-size: var(--fs-seite); letter-spacing: -0.01em; line-height: 1.2; }
.seitenkopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.seitenkopf p { color: var(--muted); margin-top: 2px; font-size: var(--fs-klein); }
/* Fortschrittsbalken: überall gleich (6 px, Spur grau, Füllung in Farbe --f) */
.balken { display: block; height: 6px; border-radius: 3px; background: var(--flaeche-3); overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--f, var(--blau)); border-radius: 3px; }

/* ---- Kalender ---- */
/* Im Kalender nutzt die Oberfläche den sichtbaren Fensterbereich; das Raster selbst scrollt nicht. */
body.kalender-voll { height: 100vh; overflow: hidden; }
body.kalender-voll main { height: calc(100vh - 56px); min-height: 0; display: flex; flex-direction: column; padding: 8px 14px; overflow: hidden; }
body.kalender-voll .kal-layout { flex: 1; min-height: 0; }
body.kalender-voll .kal-karte { height: 100%; display: flex; flex-direction: column; min-height: 0; }
body.kalender-voll .leiste { padding: 6px 10px; gap: 6px 10px; }
body.kalender-voll .filter { padding: 5px 10px; gap: 4px 10px; }
body.kalender-voll .chipreihe { gap: 4px; }
body.kalender-voll .chip { min-height: 24px; padding: 1px 8px; font-size: 11.5px; }
body.kalender-voll .kal-scroll { flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; max-height: none; }
body.kalender-voll .kal-kopf.kk-tagkopf { min-height: 48px; padding: 3px 4px; }
body.kalender-voll .kal-kopf .kk-tag { width: 25px; height: 25px; margin: 0; font-size: 15px; }
body.kalender-voll .kk-wt, body.kalender-voll .kk-n { font-size: 10px; }
body.kalender-voll .legende { padding: 4px 10px; gap: 4px 12px; font-size: 11px; }
body.kalender-voll #inhalt > .hinweis { flex: none; margin-bottom: 4px !important; padding: 4px 8px; font-size: var(--fs-min); }
.kal-layout { display: grid; gap: 16px; align-items: start; }
.kal-layout > * { min-width: 0; }
.kal-karte { overflow: hidden; }
/* Werkzeugleiste: Blättern · Titel · Ansicht · Fahrlehrer · „+ Termin” – alles 32–36 px hoch */
.leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.kal-nav { display: inline-flex; align-items: center; gap: 3px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: calc(var(--r-control) + 2px); padding: 3px; }
.kal-nav .icon { width: 32px; height: 32px; border: 0; background: transparent; box-shadow: none; }
.kal-nav .icon:hover { background: var(--hover); }
.kal-nav .knopf.klein { min-height: 30px; background: var(--flaeche); border-color: var(--linie-2); }
.leiste .woche { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 0 2px; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kal-kw { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.leiste .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.leiste .rechts .seg button { min-height: 28px; }
/* Filterzeile: Terminarten (Farbe = Terminart) links, Farbwahl rechts */
.filter { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--linie); background: var(--flaeche-2); }
.chipreihe { display: flex; gap: 6px; flex-wrap: wrap; }
.kal-farbe { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.kal-farbe .seg { padding: 2px; }
.kal-farbe .seg button { min-height: 24px; padding: 2px 9px; font-size: 12px; }
/* Raster */
.kal-scroll { overflow: auto; max-height: calc(100vh - 250px); min-height: 460px; position: relative; background: var(--flaeche); }
.kal { display: grid; grid-template-columns: 56px repeat(var(--spalten), minmax(var(--min, 120px), 1fr)); min-width: calc(56px + var(--spalten) * var(--min, 120px)); position: relative; }
.kal-kopf { position: sticky; top: 0; z-index: 6; background: var(--flaeche); border-bottom: 1px solid var(--linie); border-left: 1px solid var(--linie); padding: 8px 10px; min-height: 52px; display: grid; align-content: center; gap: 1px; }
.kal-kopf:first-child { border-left: 0; position: sticky; left: 0; z-index: 7; }
.kal-kopf b { font-size: 13.5px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.kal-kopf span { font-size: 11.5px; color: var(--muted-2); }
/* Wochenkopf: Wochentag, Tageszahl, Anzahl – heute nur mit blauem Kreis markiert, die Spalte bleibt ruhig */
.kal-kopf.kk-tagkopf { justify-items: center; text-align: center; gap: 0; padding: 6px 4px; min-height: 62px; }
.kk-wt { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.kal-kopf .kk-tag { width: 32px; height: 32px; margin: 1px 0; border-radius: 50%; display: grid; place-items: center; font: 600 18px/1 var(--schrift); color: var(--ink); font-variant-numeric: tabular-nums; }
.kk-n { white-space: nowrap; }
.kk-tagkopf.vergangen .kk-tag { color: var(--muted-2); }
.kk-tagkopf.heute .kk-wt, .kk-tagkopf.heute .kk-n { color: var(--blau); }
.kk-tagkopf.heute .kk-tag { background: var(--blau); color: #fff; }
.kal-kopf.wochenende { background: var(--flaeche-2); }
/* Zeitachse: eigene Spalte mit Trennlinie; aktuelle Uhrzeit als rote Marke */
.kal-zeiten { position: sticky; left: 0; z-index: 5; background: var(--flaeche); height: var(--h); box-shadow: inset -1px 0 0 var(--linie); }
.kal-zeiten span { position: absolute; right: 8px; font: 500 11px var(--mono); color: var(--muted-2); transform: translateY(-7px); }
.kal-zeiten .jetzt-zeit { right: 4px; transform: translateY(-50%); padding: 1px 4px; border-radius: 4px; background: var(--rot); color: #fff; font-weight: 600; z-index: 1; box-shadow: 0 0 0 3px var(--flaeche); }
/* Spalten: Stunden durchgezogen, halbe Stunden zart; Wochenende leicht abgesetzt */
.kal-spalte {
  position: relative; height: var(--h); border-left: 1px solid var(--linie); cursor: cell;
  background-image:
    repeating-linear-gradient(180deg, var(--linie) 0 1px, transparent 1px var(--stunde)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--stunde) / 2), color-mix(in srgb, var(--linie) 55%, transparent) calc(var(--stunde) / 2) calc(var(--stunde) / 2 + 1px), transparent calc(var(--stunde) / 2 + 1px) var(--stunde));
}
.kal-zeiten + .kal-spalte { border-left: 0; }
.kal-spalte.wochenende { background-color: var(--flaeche-2); }
.kal-spalte .zu { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--linie) 80%, transparent) 6px 7px); pointer-events: none; }
.kal-spalte .vorbei { position: absolute; left: 0; right: 0; top: 0; background: rgb(247 248 250 / 0.5); pointer-events: none; }
.jetzt-linie { position: absolute; left: 0; right: 0; height: 2px; margin-top: -1px; background: var(--rot); z-index: 4; pointer-events: none; }
.jetzt-linie.mit-punkt::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 2px var(--flaeche); }
/* Termine: Farbstreifen links (Terminart oder Fahrlehrer), ruhige Fläche; Name zuerst, darunter Zeit · Art, bei Platz der Fahrlehrer */
.ev { position: absolute; z-index: 2; container-type: inline-size; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; text-align: left; padding: 3px 6px 3px 9px; border: 0; border-radius: 6px; color: var(--ink); font-size: 12px; line-height: 1.3;
  background: color-mix(in srgb, var(--f) 10%, var(--flaeche)); box-shadow: inset 3px 0 0 var(--f), inset 0 0 0 1px color-mix(in srgb, var(--f) 20%, transparent); }
.ev:hover { z-index: 3; box-shadow: inset 3px 0 0 var(--f), inset 0 0 0 1px color-mix(in srgb, var(--f) 50%, transparent), var(--schatten-hover); }
.ev:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; z-index: 4; }
.ev-titel { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12.5px; font-weight: 650; color: color-mix(in srgb, var(--f) 25%, var(--ink)); }
.ev-titel svg { flex: none; color: var(--f); }
.ev-best-status { flex: none; display: inline-grid; place-items: center; min-width: 15px; height: 15px; margin-left: auto; border-radius: 50%; background: var(--neutral-bg); color: var(--muted); font-size: 11px; line-height: 1; font-weight: 800; }
.ev-best-status.ok { background: var(--gruen-bg); color: var(--gruen); }
.ev-best-status.offen { background: var(--warn-bg); color: var(--warn); }
.ev-best-status.lehrer-wartet { min-width: 0; height: 18px; padding: 0 6px; border-radius: 5px; background: color-mix(in srgb, var(--warn) 20%, white); color: color-mix(in srgb, var(--warn) 75%, #382300); font-size: var(--fs-min); letter-spacing: .01em; white-space: nowrap; }
.ev-best-status.nein { background: var(--rot-bg); color: var(--rot); }
.ev.tb-bestaetigt { box-shadow: inset 4px 0 0 var(--gruen), inset 0 0 0 2px color-mix(in srgb, var(--gruen) 48%, transparent); }
.ev.tb-offen { box-shadow: inset 4px 0 0 var(--warn), inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
.ev.tb-lehrer_offen { border: 2px solid var(--warn); background: color-mix(in srgb, var(--warn) 17%, var(--flaeche)); box-shadow: inset 5px 0 0 var(--warn), 0 0 0 2px color-mix(in srgb, var(--warn) 22%, transparent); }
.ev.tb-lehrer_offen:hover { box-shadow: inset 5px 0 0 var(--warn), 0 0 0 2px color-mix(in srgb, var(--warn) 35%, transparent), var(--schatten-hover); }
.ev.tb-passt_nicht { box-shadow: inset 4px 0 0 var(--rot), inset 0 0 0 2px color-mix(in srgb, var(--rot) 48%, transparent); }
.ev-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-kurz { display: none; }
.ev-zeile { min-width: 0; color: var(--muted-2); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ev-fl { display: flex; align-items: center; gap: 5px; min-width: 0; margin-top: 1px; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-fl i { width: 7px; height: 7px; border-radius: 50%; background: var(--fl); flex: none; }
.ev-serie { font-style: normal; opacity: 0.75; }
/* Wenig Höhe: eine Zeile mit Name und genauer Start-/Endzeit */
.ev.kurz { flex-direction: row; align-items: center; gap: 5px; padding-top: 0; padding-bottom: 0; }
.ev.kurz .ev-titel { flex: 0 1 auto; }
.ev.kurz .ev-zeile { flex: none; }
.ev.kurz .ev-art { display: none; }
/* Viel Höhe: Name darf zweizeilig sein; in der Tagesansicht steht der Fahrlehrer schon im Spaltenkopf */
.kal-tag .ev-fl { display: none; }
.ev.gross .ev-name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* Theorie ist auf einen Blick als Theorie plus Lektion erkennbar; Thema und vollständige Angaben stehen darunter/im Tooltip. */
.ev.theorie .ev-titel { font-weight: 750; }
.ev.theorie .ev-art { color: color-mix(in srgb, var(--f) 35%, var(--ink)); }
/* Schmale Termine (mehrere nebeneinander): Vorname + Initial, nur der Beginn; ganz schmal nur der Name */
@container (max-width: 125px) {
  .ev-lang:has(+ .ev-kurz) { display: none; }
  .ev-kurz { display: inline; }
  .ev-bis, .ev-art { display: none; }
}
@container (max-width: 108px) {
  .ev.kurz .ev-zeile { display: none; }
}
@container (max-width: 76px) {
  .ev .ev-name, .ev.gross .ev-name { display: block; white-space: nowrap; overflow-wrap: normal; -webkit-line-clamp: none; line-clamp: none; }
  .ev-titel svg { display: none; }
}
/* Markierungen: ✦ von Sarah, ✓/✕ Antwort auf die Erinnerung, Punkt = ungelesen; schraffiert = Website-Termin bzw. Blocker */
.ev.per-wa .ev-titel::before, .ev.chat .ev-titel::before { content: "✦"; color: var(--f); font-size: 11px; flex: none; }
.ev.er-ok .ev-titel::after { content: "✓"; color: var(--gruen); flex: none; }
.ev.er-nein .ev-titel::after { content: "✕"; color: var(--rot); flex: none; }
.ev.neu::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 2px var(--flaeche); }
.ev.chat { background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--f) 7%, transparent) 7px 14px); }
/* Abwesenheit (Urlaub, Pause, Werkstatt …): kein Termin, sondern eine leichte Tönung hinter den Terminen in der Farbe des
   Fahrlehrers (--fl; für alle/Büro grau) – teilt die Spalte nicht, Klicks gehen durch in die freie Zeit. */
.kal-spalte .abw { position: absolute; left: 0; right: 0; pointer-events: none; container-type: inline-size;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--fl) 8%, transparent) 0 7px, color-mix(in srgb, var(--fl) 3.5%, transparent) 7px 14px);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--fl) 35%, transparent); }
.kal-spalte .abw:not(.ganz) { border-block: 1px dashed color-mix(in srgb, var(--fl) 30%, transparent); }
/* Beschriftung nur bei Teil-Zeiten mit Platz (ganztägige und von Terminen verdeckte stehen im Tageskopf) */
.abw-label { pointer-events: auto; display: inline-flex; align-items: baseline; gap: 5px; max-width: calc(100% - 10px); margin: 3px 0 0 6px; padding: 1px 6px; border: 0; border-radius: 4px;
  background: color-mix(in srgb, var(--fl) 12%, var(--flaeche)); color: color-mix(in srgb, var(--fl) 55%, var(--ink)); font: 600 11px/1.45 var(--schrift); text-align: left; cursor: pointer; }
.abw-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abw-label small { flex: none; font-size: var(--fs-min); font-weight: 500; color: color-mix(in srgb, var(--fl) 40%, var(--muted)); font-variant-numeric: tabular-nums; }
.abw-label:hover, .abw-chip:hover { background: color-mix(in srgb, var(--fl) 22%, var(--flaeche)); }
@container (max-width: 130px) { .abw-label small { display: none; } }
/* Ganztägig: kleiner Hinweis im Tageskopf (Woche) bzw. im Kopf der Fahrlehrer-Spalte (Tagesansicht) */
.abw-kopf { display: grid; gap: 2px; width: 100%; min-width: 0; margin-top: 3px; }
.abw-chip { display: flex; align-items: center; gap: 5px; min-width: 0; width: 100%; padding: 1px 6px; border: 0; border-radius: 4px; cursor: pointer;
  background: color-mix(in srgb, var(--fl) 12%, var(--flaeche)); color: color-mix(in srgb, var(--fl) 55%, var(--ink)); font: 600 11px/1.5 var(--schrift); text-align: left; }
.abw-chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--fl); }
.abw-chip span, .kal-kopf .abw-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: inherit; color: inherit; }
.kk-tagkopf .abw-chip { justify-content: center; }
.kal-kopf .abw-mehr { font-size: var(--fs-min); color: var(--muted); }
/* Legende */
.legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 8px 12px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--linie); }
.leg-gruppe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.legende span { display: inline-flex; align-items: center; gap: 5px; }
.legende .leg-titel { font-weight: 600; color: var(--ink); }
.legende .punkt-f { width: 9px; height: 9px; border-radius: 3px; }
.leg-sym { font-weight: 700; font-size: 12px; color: var(--muted); }
.leg-sym.leg-sarah { color: var(--typ-ersttermin); }
.leg-sym.ok { color: var(--gruen); }
.leg-sym.fehler { color: var(--rot); }
.leg-pille { display: inline-flex; align-items: center; border-radius: 4px; padding: 1px 5px; font-size: var(--fs-min); line-height: 1.35; font-weight: 800; }
.leg-pille-fl { background: color-mix(in srgb, var(--warn) 20%, white); color: color-mix(in srgb, var(--warn) 75%, #382300); }
.leg-abw { width: 14px; height: 10px; border-radius: 3px; display: inline-block; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--typ-blocker) 22%, var(--flaeche)) 0 3px, color-mix(in srgb, var(--typ-blocker) 9%, var(--flaeche)) 3px 6px); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--typ-blocker) 50%, transparent); }
.leg-schraffur { width: 14px; height: 10px; border-radius: 3px; display: inline-block; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--typ-ersttermin) 22%, var(--flaeche)) 0 3px, var(--flaeche) 3px 6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--typ-ersttermin) 30%, transparent); }
.leg-hinweis { margin-left: auto; color: var(--muted-2); }
/* Tablet: die ganze Woche (7 Tage) passt ohne seitliches Scrollen */
@media (max-width: 1100px) {
  .kal.kal-woche { grid-template-columns: 50px repeat(var(--spalten), minmax(86px, 1fr)); min-width: calc(50px + var(--spalten) * 86px); }
  .kal.kal-woche .ev { padding: 2px 4px 2px 7px; }
}

/* Seitenspalte Kalender */
.seite { display: grid; gap: 16px; }
.seite .karte { padding: 14px; }
.seite h2 { font-size: var(--fs-abschnitt); font-weight: 650; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.seite h2 a, .seite h2 button { font-family: var(--schrift); font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.liste { display: grid; gap: 6px; }
.eintrag { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; text-align: left; width: 100%; border: 1px solid var(--linie); background: var(--flaeche); border-radius: 8px; padding: 8px 10px; }
.eintrag:hover { border-color: var(--linie-2); background: var(--flaeche-2); }
.eintrag b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eintrag span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eintrag > span:last-child { min-width: 0; }

/* Kontakte */
/* Filterleiste: Suche · Kontaktart · Führerscheinart · Fahrlehrer · Zurücksetzen – eine Zeile, gleiche Höhen */
.werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.werkzeuge > * { min-width: 0; }
.werkzeuge .seg { padding: 3px; }
.werkzeuge .seg button { min-height: 28px; }
.suche { position: relative; flex: 0 1 280px; }
.suche input { width: 100%; min-height: var(--h-control); padding: 6px 12px 6px 34px; border: 1px solid var(--linie-2); border-radius: var(--r-control); background: var(--flaeche); box-shadow: var(--schatten); font-size: 13.5px; }
.suche svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; }
.filter-weg .n { color: var(--muted-2); font-weight: 500; }
@media (max-width: 700px) {
  .suche { flex: 1 1 100%; }
  .werkzeuge .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .werkzeuge .seg::-webkit-scrollbar { display: none; }
  .werkzeuge .seg button { flex: none; }
  .seitenkopf:has(+ .werkzeuge) p { display: none; }
}
.tabelle { overflow: hidden; }
.zeile-kopf, .zeile { display: grid; grid-template-columns: minmax(200px, 1.6fr) 150px 70px 130px minmax(150px, 1fr) 110px; gap: 14px; align-items: center; padding: 10px 16px; }
.zeile-kopf { font-size: var(--fs-min); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); background: var(--flaeche-2); border-bottom: 1px solid var(--linie); }
.zeile { width: 100%; border: 0; border-bottom: 1px solid var(--linie); background: transparent; text-align: left; }
.zeile:last-child { border-bottom: 0; }
.zeile:hover { background: var(--flaeche-2); }
.zeile > * { min-width: 0; }
.name-zelle { display: flex; align-items: center; gap: 10px; }
.name-zelle > span:last-child { min-width: 0; }
.name-zelle b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.name-zelle b span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.name-zelle small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.neu-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--rot); flex: none; }
.zelle-klein { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quelle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
@media (max-width: 1000px) {
  .zeile-kopf { display: none; }
  .zeile { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .zeile .z-klasse, .zeile .z-fl, .zeile .z-quelle { display: none; }
  .zeile .z-naechst { grid-column: 1 / -1; padding-left: 44px; }
}

/* Schublade (Kontakt-Detail) & Dialoge */
.schleier { position: fixed; inset: 0; z-index: 50; background: rgb(16 24 40 / 0.4); display: flex; justify-content: flex-end; }
.schublade { background: var(--flaeche); width: min(660px, 100%); height: 100%; overflow-y: auto; box-shadow: var(--schatten-gross); display: grid; align-content: start; grid-template-columns: minmax(0, 1fr); animation: rein 0.18s ease-out; }
@keyframes rein { from { transform: translateX(24px); opacity: 0.6; } }
/* Kopf: Avatar, Name, eine Meta-Zeile (Art · Klasse · Fahrlehrer), Herkunft; darunter die Reiter */
.schublade-kopf { position: sticky; top: 0; z-index: 2; background: var(--flaeche); border-bottom: 1px solid var(--linie); padding: 14px 20px 12px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.schublade-kopf:has(.s-tabs) { padding-bottom: 0; }
.sk-av { width: 40px; height: 40px; font-size: 14px; border-radius: 10px; background: var(--neutral-bg); color: var(--neutral); }
.sk-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.schublade-kopf h2 { font-family: var(--display); font-size: 19px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; outline: none; overflow-wrap: anywhere; }
.sk-meta { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 13px; color: var(--muted); }
.sk-meta span + span::before { content: "·"; margin-right: 6px; color: var(--muted-2); }
.schublade-kopf .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.schublade-kopf .tags:empty { display: none; }
.schublade-kopf .tag .punkt-f { width: 6px; height: 6px; }
.schublade-inhalt { padding: 16px 20px 28px; display: grid; gap: 20px; }
/* Abschnitte: Überschrift in normaler Schreibweise, Zahl daneben gedämpft */
.abschnitt { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.abschnitt > h3 { font-size: 13.5px; font-weight: 650; color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.kontaktreihe { display: flex; flex-wrap: wrap; gap: 8px; }
.kopie { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border-radius: var(--r-control); background: var(--flaeche-2); border: 1px solid var(--linie); font-weight: 600; font-size: 13.5px; max-width: 100%; }
.kopie svg { color: var(--muted-2); flex: none; }
.kopie a { color: var(--ink); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.kopie a:hover { text-decoration: underline; }
.kopie button { border: 1px solid var(--linie); background: var(--flaeche); border-radius: var(--r-klein); padding: 3px 9px; font-size: 12px; font-weight: 600; color: var(--muted); }
.kopie button:hover { color: var(--ink); }
.statuswahl { display: flex; flex-wrap: wrap; gap: 6px; }
.box { border: 1px solid var(--linie); background: var(--flaeche-2); border-radius: var(--r-control); padding: 12px 14px; }
.box.chat { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 18%, var(--linie)); }
.terminbox { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border: 1px solid var(--linie); box-shadow: inset 3px 0 0 var(--f); border-radius: var(--r-control); padding: 10px 12px 10px 14px; }
.terminbox > div { flex: 1; min-width: 180px; }
.terminbox b { display: block; }
.terminbox span { font-size: 13px; color: var(--muted); }
.terminbox.abgesagt { opacity: 0.6; border-style: dashed; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.raster div { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r-control); padding: 8px 10px; min-width: 0; }
.raster span { display: block; font-size: var(--fs-min); color: var(--muted); }
.raster b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.nachrichten { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nachrichten li { padding: 8px 12px; border-radius: 10px 10px 10px 3px; background: var(--info-bg); font-size: 14px; overflow-wrap: anywhere; }
.verlauf { display: grid; gap: 6px; max-height: 360px; overflow-y: auto; margin-top: 10px; font-size: 13px; }
.verlauf div { padding: 6px 10px; border-radius: var(--r-control); background: var(--flaeche-2); overflow-wrap: anywhere; }
.verlauf div.u { background: var(--info-bg); }
.verlauf b { display: block; font-size: var(--fs-min); color: var(--muted-2); }
details summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.stand { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.stand div { background: var(--flaeche-2); border-radius: var(--r-control); padding: 10px 12px; display: grid; gap: 4px; }
.stand span { font-size: 12px; font-weight: 600; color: var(--muted); }
.stand b { font-size: var(--fs-kennzahl); font-weight: 650; font-variant-numeric: tabular-nums; }
.stand b small { font-size: 13px; color: var(--muted); font-weight: 500; }
/* Terminliste (Kartei, Theorie, Prüfungen): Streifen in der Farbe der Terminart, ruhige Fläche */
.terminliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.terminliste li { display: flex; gap: 10px; align-items: center; min-height: 38px; padding: 6px 10px 6px 13px; border-radius: var(--r-control); background: var(--flaeche-2); border: 1px solid var(--linie); box-shadow: inset 3px 0 0 var(--f, var(--linie-2)); font-size: 13.5px; }
.terminliste li b { font-family: var(--mono); font-weight: 500; font-size: 12.5px; white-space: nowrap; }
.terminliste li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.terminliste li span em { font-style: normal; color: var(--warn); font-weight: 600; }
.terminliste li button { border: 0; background: none; color: var(--blau); font-weight: 600; font-size: 12.5px; padding: 4px 6px; border-radius: var(--r-klein); }
.terminliste li button:hover { background: var(--blau-bg); }
textarea.notiz { width: 100%; min-height: 100px; padding: 10px 12px; border: 1px solid var(--linie-2); border-radius: var(--r-control); background: var(--flaeche); resize: vertical; }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.dialog > .aktionen:last-child { padding-top: 14px; border-top: 1px solid var(--linie); }
.dialog > .aktionen:last-child .knopf.gefahr { margin-left: auto; }

.dialog-schleier { position: fixed; inset: 0; z-index: 60; background: rgb(16 24 40 / 0.45); display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .dialog-schleier { align-items: center; padding: 24px; } }
.dialog { background: var(--flaeche); width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: 20px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); box-shadow: var(--schatten-gross); }
@media (min-width: 640px) { .dialog { border-radius: 14px; padding: 22px 24px 24px; } }
.dialog.breit { max-width: 760px; }
/* Hauptaktion bleibt am unteren Dialogrand sichtbar, der Inhalt scrollt darüber (Handy: eigene Regeln unten) */
@media (min-width: 640px) {
  .dialog > .aktionen:last-child { position: sticky; bottom: -24px; z-index: 4; margin: 0 -24px -24px; padding: 14px 24px 24px; background: var(--flaeche); border-top: 1px solid var(--linie); }
}
.dialog-kopf { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--linie); }
.dialog-kopf h2 { flex: 1; font-family: var(--display); font-size: 18px; font-weight: 650; letter-spacing: -0.01em; outline: none; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.felder .ganz { grid-column: 1 / -1; }
.felder > * { min-width: 0; }
@media (max-width: 480px) { .felder { grid-template-columns: 1fr; } }
.feld { display: grid; gap: 5px; align-content: start; }
.feld label, .feld .label { font-size: 13px; font-weight: 600; }
.feld label small { font-weight: 400; color: var(--muted); }
.th-frei:not([hidden]) { display: grid; gap: 4px; margin-top: 6px; }
.feld input, .feld select, .feld textarea { width: 100%; min-height: var(--h-control); padding: 6px 11px; border: 1px solid var(--linie-control); border-radius: var(--r-control); background-color: var(--flaeche); }
.feld textarea { padding: 8px 11px; }
.feld [aria-invalid="true"] { border-color: var(--rot); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--blau); flex: none; }
.arten { display: flex; flex-wrap: wrap; gap: 6px; }
.fehlertext { color: var(--rot); background: var(--rot-bg); padding: 10px 12px; border-radius: var(--r-control); font-size: 13.5px; font-weight: 500; }
@media (pointer: coarse) { .feld input, .feld select { min-height: 44px; } }

/* CSV-Import */
.ablage { border: 2px dashed var(--linie-2); border-radius: var(--r-karte); padding: 26px 16px; text-align: center; background: var(--flaeche-2); display: grid; gap: 8px; justify-items: center; }
.ablage.drueber { border-color: var(--blau); background: color-mix(in srgb, var(--blau) 6%, var(--flaeche)); }
.zuordnung { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.vorschau { overflow-x: auto; border: 1px solid var(--linie); border-radius: 8px; }
.vorschau table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.vorschau th, .vorschau td { padding: 6px 10px; border-bottom: 1px solid var(--linie); text-align: left; white-space: nowrap; }
.vorschau th { background: var(--flaeche-2); font-weight: 700; }

/* Anmeldung */
.anmelden { max-width: 380px; margin: 60px auto; padding: 28px; display: grid; gap: 16px; }

/* Meldungen */
.toast-ort { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: #f3f5f9; border-radius: 10px; padding: 12px 16px; box-shadow: var(--schatten-gross); font-size: 14px; border-left: 4px solid var(--marke); animation: hoch 0.2s ease-out; }
.toast button { background: none; border: 0; color: var(--marke-hell); font-weight: 600; padding: 0; margin-top: 4px; }
.toast b { display: block; }
@keyframes hoch { from { transform: translateY(8px); opacity: 0; } }

@media (max-width: 700px) {
  .kopf-in { gap: 8px 10px; padding: 8px 12px 0; }
  .marke { font-size: 17px; }
  .tabs a { flex: 1 0 auto; justify-content: center; }
  .sync { max-width: 150px; }
  main { padding: 14px 12px 48px; }
  .kal-scroll { max-height: calc(100vh - 230px); }
  .kal-filter { flex-direction: column; align-items: stretch; gap: 8px; }
  .kal-filter .chipreihe { flex-wrap: wrap; min-width: 0; }
  .kal-filter .chip { flex: 0 1 auto; max-width: 100%; }
  .kal-farbe { margin-left: 0; }
  .kal-nav { order: 1; }
  .kal-neu { order: 2; margin-left: auto; }
  .leiste .woche { order: 3; flex-basis: 100%; margin: 2px 0 0; }
  .leiste .rechts { order: 4; margin-left: 0; flex-basis: 100%; flex-wrap: nowrap; }
  .leiste .rechts select { flex: 1 1 auto; min-width: 0; }
  .leg-hinweis { margin-left: 0; }
  .schublade-kopf, .schublade-inhalt { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===== Kontakte als Board (vier Spalten im Ablauf; jede bündelt mehrere Stände) ===== */
.titel-n { font-size: 14px; font-weight: 600; color: var(--muted-2); margin-left: 4px; font-variant-numeric: tabular-nums; }
/* Vier Spalten (Interessenten · Theorie · Praxis · Bestanden) teilen sich die Breite; erst wenn es zu
   eng wird, greift wieder das seitliche Scrollen über die Mindestbreite von `.bspalte`. */
.board { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 14px; align-items: flex-start; overscroll-behavior-x: contain; }
.board > .bspalte { flex: 1 1 262px; width: auto; max-width: 420px; min-width: 262px; }
/* Gruppenebene (Interessenten / Theorie / Praxis als Überschrift über mehreren Spalten): seit der
   Zusammenfassung auf vier Spalten nicht mehr gezeichnet – Regeln bleiben für eine Rückkehr stehen. */
.bgruppe { display: flex; flex-direction: column; gap: 8px; flex: none; }
.bg-titel { display: flex; align-items: baseline; gap: 6px; padding: 0 4px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.bg-titel span { letter-spacing: 0; font-variant-numeric: tabular-nums; }
.bg-spalten { display: flex; gap: 10px; align-items: flex-start; }
.bspalte { flex: 0 0 262px; width: 262px; background: var(--flaeche-3); border: 1px solid transparent; border-radius: var(--r-karte); display: flex; flex-direction: column; max-height: calc(100vh - 264px); min-height: 140px; transition: background 0.12s, border-color 0.12s, box-shadow 0.12s; }
.bs-kopf { display: flex; align-items: center; gap: 8px; padding: 9px 12px 7px; min-height: 38px; }
.bs-kopf h2 { font-size: 13px; font-weight: 600; margin: 0; line-height: 1.3; min-width: 0; }
.bs-kopf .n { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--flaeche); display: inline-grid; place-items: center; font-size: var(--fs-min); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.bs-liste { padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1; overscroll-behavior-y: contain; }
.bs-leer { margin: 2px 0; font-size: 12px; color: var(--muted); text-align: center; border: 1px dashed var(--linie-2); border-radius: var(--r-control); padding: 14px 8px; }
/* Drag & Drop: Zielspalte blau umrandet, gezogene Karte blass, abgelegte Karte kurz hervorgehoben */
.bspalte.drop { background: var(--blau-bg); border-color: color-mix(in srgb, var(--blau) 55%, transparent); border-style: dashed; }
.bspalte.drop .bs-leer { border-color: color-mix(in srgb, var(--blau) 45%, transparent); color: var(--blau); }
/* Kompakte Karten: Details bei Hover oder per nativem Schalter; Hinweise bleiben sichtbar. */
.bk { position: relative; min-width: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-control); padding: 9px 10px 10px; cursor: grab; box-shadow: var(--schatten); display: grid; gap: 8px; transition: border-color 0.12s, box-shadow 0.12s, opacity 0.12s; }
.bk > * { min-width: 0; }
/* Vergrößerte Tippflächen (Touch) dürfen nicht über den Kartenrand hinaus wirken; Fokusringe bleiben sichtbar */
.bk { overflow: clip; overflow-clip-margin: 4px; }
.bk:hover { border-color: var(--linie-2); box-shadow: var(--schatten-hover); }
.bk.zieht { opacity: 0.4; box-shadow: none; }
.bk.abgelegt { animation: abgelegt 1.6s ease-out; }
@keyframes abgelegt { 0%, 30% { box-shadow: 0 0 0 2px var(--blau), var(--schatten-hover); } 100% { box-shadow: var(--schatten); } }
.bk-oben { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: start; }
.bk-kopf { display: flex; gap: 9px; align-items: flex-start; min-width: 0; width: 100%; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; border-radius: var(--r-klein); color: inherit; }
.bk .av { width: 28px; height: 28px; font-size: var(--fs-min); border-radius: 7px; background: var(--neutral-bg); color: var(--neutral); }
.bk-text { display: grid; min-width: 0; gap: 1px; padding-top: 1px; }
.bk-text b { overflow-wrap: anywhere; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.bk-text small { overflow-wrap: anywhere; font-size: 12px; color: var(--muted); line-height: 1.4; }
.bk .av { position: relative; }
.bk .av .neu-punkt { position: absolute; top: -3px; right: -3px; box-shadow: 0 0 0 2px var(--flaeche); }
/* „Stand ändern“: fester Knopf, das native Auswahlfeld liegt unsichtbar darüber (Klick, Tastatur, Screenreader) */
.bk-wahl { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-klein); color: var(--muted); border: 1px solid transparent; }
.bk-wahl:hover { background: var(--hover); color: var(--ink); border-color: var(--linie); }
.bk-wahl:focus-within { outline: 2px solid var(--blau); outline-offset: 1px; }
.bk-wahl-text { display: none; }
.bk-wahl select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; margin: 0; padding: 0; border: 0; }
/* Fortschritt: Bezeichnung links, Werte rechts (dürfen umbrechen) */
.bk-fort { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 10px; row-gap: 7px; margin: 0; padding-top: 8px; border-top: 1px solid var(--linie); }
.bk-fort dt { font-size: 11px; font-weight: 600; color: var(--muted-2); line-height: 18px; }
.bk-fort dd { margin: 0; min-width: 0; display: grid; gap: 3px; font-size: 12px; line-height: 18px; }
.bk-wert { overflow-wrap: anywhere; }
.bk-wert b { font-weight: 650; font-variant-numeric: tabular-nums; }
.bk-sub { font-size: var(--fs-min); line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bk-sub:empty { display: none; }
.bk-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.bk-zeile .balken { flex: 1 1 48px; min-width: 48px; }
.bk-mess { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.bk-mess .ampel { font-size: var(--fs-min); padding: 0 7px; font-style: normal; font-variant-numeric: tabular-nums; }
.bk-info { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted-2); cursor: pointer; }
.bk-info::after { content: ""; position: absolute; inset: -1px; } /* Trefferfläche ≥ 24 px, ohne sichtbare Größe zu ändern */
.bk-info:hover { color: var(--ink); background: var(--hover); }
.bk-pr { display: inline-flex; align-items: flex-start; gap: 4px; font-size: var(--fs-min); font-weight: 600; color: var(--info); }
.bk-pr svg, .bk-fertig svg { flex: none; margin-top: 3px; }
.bk-fertig { display: inline-flex; align-items: flex-start; gap: 4px; font-weight: 600; color: var(--gruen); }
.bk-leer { color: var(--muted); }
.bk-termin { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12px; line-height: 18px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.bk-termin .punkt-f { flex: none; margin-top: 5px; }
.bk-termin.leer-termin { color: var(--muted); }
.bk-termin svg { color: var(--muted-2); flex: none; margin-top: 2px; }
.bk-hinweise { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.bk-hinweise .tag { max-width: 100%; align-items: flex-start; font-size: var(--fs-min); padding: 2px 8px; border-radius: 6px; white-space: normal; line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
.bk-hinweise .tag svg { margin-top: 2px; }
.leise-text { color: var(--muted-2); }
@media (hover: none) { .bk { cursor: default; } }
@media (max-width: 640px) { .bspalte { flex-basis: 82vw; width: 82vw; max-height: none; } }

.fl-wahl select.aktiv { border-color: color-mix(in srgb, var(--blau) 55%, transparent); background-color: var(--blau-bg); color: var(--info); }
.fs-vorher { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 4px; }
.fs-vorher input { width: 84px; min-height: 34px; padding: 4px 8px; border: 1px solid var(--linie-2); border-radius: var(--r-klein); font-size: 14px; }

/* Kalender: Termine ziehen (linke Maustaste) und Zeit blocken (rechte Maustaste) */
.ev[data-zieh] { cursor: grab; }
body.kal-zieht, body.kal-zieht * { cursor: grabbing !important; user-select: none; }
body.kal-markiert, body.kal-markiert * { cursor: row-resize !important; user-select: none; }
.ev.zieht-quelle { opacity: 0.35; }
.ev.geist { pointer-events: none; z-index: 6; box-shadow: inset 3px 0 0 var(--f), 0 10px 24px -8px rgb(10 16 32 / 0.45); outline: 2px solid var(--f); }
.kal-spalte .auswahl { position: absolute; left: 2px; right: 2px; z-index: 5; pointer-events: none; border: 2px dashed var(--marke); border-radius: 6px; background: color-mix(in srgb, var(--marke) 14%, transparent); }
.kal-spalte .auswahl span { position: absolute; top: -1px; left: -1px; background: var(--marke); color: var(--auf-marke); border-radius: 4px 0 4px 0; padding: 1px 6px; font-size: var(--fs-min); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kal-menu { position: fixed; z-index: 70; width: 250px; background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: 10px; box-shadow: var(--schatten-gross); padding: 10px; display: grid; gap: 6px; font-size: 13.5px; animation: hoch 0.12s ease-out; }
.kal-menu .km-kopf { margin: 0 0 2px; display: grid; }
.kal-menu .km-kopf span { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kal-menu .km-titel { margin: 4px 0 0; font-size: var(--fs-min); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.kal-menu .km-fl { display: flex; align-items: center; gap: 8px; }
.kal-menu .km-fl span { color: var(--muted); }
.kal-menu .km-fl select { flex: 1; min-width: 0; min-height: 32px; border: 1px solid var(--linie-2); border-radius: var(--r-control); background: var(--flaeche); padding: 4px 8px; }
.kal-menu .km-liste { display: grid; }
.kal-menu .km-liste button { display: flex; align-items: center; gap: 6px; text-align: left; background: none; border: 0; border-radius: 6px; padding: 6px 8px; font-weight: 600; }
.kal-menu .km-liste button:hover:not(:disabled), .kal-menu .km-liste button:focus-visible { background: var(--flaeche-3); }
.kal-menu .km-liste button:disabled { opacity: 0.45; cursor: default; }
.kal-menu .km-trenner { height: 1px; background: var(--linie); margin: 2px 0; }
.kal-menu .km-sarah { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); padding: 2px 8px 0; }

/* Kartei: zuständiger Fahrlehrer + Praxisdokumentation */
.fl-zustaendig { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; }
.fl-zustaendig label { font-size: 13px; font-weight: 700; }
.fl-zustaendig select { min-height: 40px; border: 1px solid var(--linie-2); border-radius: var(--r-control); background: var(--flaeche); padding: 6px 10px; font-weight: 600; min-width: 0; }
.px-raster b .punkt-f { display: inline-block; }
.link-knopf { border: 0; background: none; padding: 0; font: inherit; font-weight: inherit; color: var(--blau); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }
.link-knopf:hover { color: var(--marke-tief); }
.px-zitat { border: 1px solid var(--linie); box-shadow: inset 3px 0 0 var(--typ-fahrstunde); background: var(--flaeche-2); border-radius: var(--r-control); padding: 8px 12px 8px 14px; }
.px-zitat span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.px-zitat p { margin: 2px 0 0; }
.px-summe { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.px-kpi-text { font-family: var(--schrift) !important; font-size: 16px !important; font-weight: 700 !important; color: color-mix(in srgb, var(--f) 85%, #000); padding-top: 6px; }
.px-eckdaten { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche); }
.px-eckdaten > div { padding: 8px 12px; min-width: 0; }
.px-eckdaten > div + div { border-left: 1px solid var(--linie); }
.px-eckdaten dt { font-size: var(--fs-min); color: var(--muted); }
.px-eckdaten dd { margin: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
/* Sonderfahrten: gefahren / Pflicht je Art mit Balken */
.px-sonder { display: grid; gap: 8px; }
.px-sonder-titel { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; }
.px-sonder-titel span { font-size: 12.5px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.px-sonder ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.px-sonder li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 5px 8px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: var(--r-control); background: var(--flaeche-2); }
.px-sonder li > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.px-sonder li b { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.px-sonder li b small { font-size: 12px; font-weight: 500; color: var(--muted); }
.px-sonder li .balken { grid-column: 1 / -1; }
.px-sonder li.fertig b::after { content: " ✓"; color: var(--gruen); }
/* Gefahrene, aber noch nicht dokumentierte Stunde aus dem Kalender – gleiche Spalten wie eine Protokoll-Zeile */
.px-timeline li.px-offen { display: grid; grid-template-columns: 56px minmax(90px, 1fr) 52px minmax(0, 2fr) auto; align-items: center; gap: 10px; padding: 9px 10px; font-size: 13px; background: color-mix(in srgb, var(--warn-akzent) 6%, var(--flaeche)); box-shadow: inset 3px 0 0 var(--warn-akzent); }
.px-offen .px-p-kurz { grid-column: 4; }
.px-offen .link-knopf { font-size: 12.5px; font-weight: 600; }
.px-offen em { font-style: normal; color: var(--warn); font-size: 12px; font-weight: 600; margin-left: 4px; }
.px-timeline { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
.px-timeline > li + li { border-top: 1px solid var(--linie); }
/* Protokoll-Zeile: erst nur Datum · Fahrlehrer · Dauer · was gemacht wurde + Bewertungspunkt; Details erst beim Aufklappen. */
.px-protokoll { background: var(--flaeche); }
.px-protokoll:not([open]) .px-p-zeile:hover { background: var(--flaeche-2); }
.px-protokoll[open] { background: var(--flaeche-2); }
.px-p-zeile { list-style: none; cursor: pointer; padding: 9px 10px; display: grid; grid-template-columns: 56px minmax(90px, 1fr) 52px minmax(0, 2fr) 24px 14px; align-items: center; gap: 10px; font-weight: 500; font-size: 13px; }
.px-p-zeile::-webkit-details-marker { display: none; }
.px-p-zeile::after { content: "›"; justify-self: end; color: var(--muted-2); font-size: 17px; line-height: 1; transform: rotate(90deg); transition: transform 0.15s; }
.px-protokoll[open] .px-p-zeile::after { transform: rotate(-90deg); }
.px-p-datum { color: var(--muted); font-size: 12px; white-space: nowrap; }
.px-p-datum small { display: block; color: var(--muted-2); font-size: var(--fs-min); font-variant-numeric: tabular-nums; }
.px-p-fl { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-p-dauer { color: var(--muted); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.px-p-kurz { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-p-note { justify-self: center; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--f) 18%, transparent); color: var(--f); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.px-p-note.ohne { background: transparent; color: var(--muted-2); font-weight: 500; }
.px-protokoll-inhalt { padding: 2px 12px 12px; border-top: 1px solid var(--linie); display: grid; gap: 6px; font-size: 13.5px; }
.px-meta { margin: 0; color: var(--muted); font-size: 12.5px; }
.px-zeile { margin: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.px-zeile > span:first-child { color: var(--muted); font-size: 12.5px; }
.px-haken { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.px-haken i { font-style: normal; color: var(--gruen); font-weight: 600; }
.px-bereiche-chips { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.px-bereiche-chips i { font-style: normal; font-weight: 600; color: var(--f); }
.px-protokoll-inhalt blockquote { margin: 0; padding: 6px 10px; border-left: 3px solid var(--linie-2); color: var(--ink); font-style: italic; }
.px-vorher summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.px-vorher[open] summary { margin-bottom: 8px; }

/* Dokumentations-Formular (für schnelle Eingabe am Smartphone) */
.px-block { border: 0; border-top: 1px solid var(--linie); margin: 0; padding: 12px 0 0; display: grid; gap: 10px; min-width: 0; }
.px-block legend { font-size: var(--fs-min); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); padding: 0 0 6px; }
.px-block legend small { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; }
.pflicht { color: var(--rot); text-decoration: none; font-weight: 700; }
.px-felder { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: start; }
.px-chip { min-height: 38px; padding: 6px 13px; font-size: 13.5px; }
.px-chip[aria-pressed="true"] { --f: var(--marke-tief); background: var(--marke-tief); color: #fff; border-color: var(--marke-tief); }
.px-chip[aria-pressed="true"]::before { content: "✓"; font-weight: 700; color: var(--marke-hell); }
.px-dauer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.px-dauer .px-chip { padding: 6px 10px; }
.px-dauer .px-chip::after { content: " Min."; font-weight: 500; }
.px-dauer output { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.px-gruppe { display: grid; gap: 6px; }
.px-gruppe > span { font-size: 13px; font-weight: 700; }
.px-kompetenz { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linie); }
.px-kompetenz > span { font-size: 13px; }
.px-kompetenz .chipreihe { flex: 0 0 auto; gap: 5px; }
.px-kompetenz .px-chip { min-width: 34px; min-height: 34px; padding: 4px 9px; }
.px-kompetenz .px-chip[aria-pressed="true"]::before { content: ""; }
@media (max-width: 640px) { .px-kompetenz { align-items: flex-start; flex-direction: column; gap: 6px; } }
.px-skala { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.px-skala button, .px-note button { border: 1px solid var(--linie-2); background: var(--flaeche); border-radius: 8px; font-weight: 600; }
.px-skala button { min-height: 58px; padding: 6px 4px; display: grid; gap: 1px; place-content: center; font-size: 12px; line-height: 1.2; color: var(--muted); }
.px-skala button b { font-family: var(--display); font-size: 18px; color: var(--ink); }
.px-skala button[aria-checked="true"], .px-note button[aria-checked="true"] { background: var(--marke-tief); border-color: var(--marke-tief); color: #fff; }
.px-skala button[aria-checked="true"] b { color: var(--marke-hell); }
.px-bereiche summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 0; }
.px-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--linie); font-size: 13.5px; }
.px-note > div { display: flex; gap: 4px; }
.px-note button { width: 38px; height: 38px; }
.px-text { position: relative; }
.px-text textarea { padding-right: 46px; resize: vertical; }
.px-mic { position: absolute; right: 6px; top: 6px; }
.px-mic.an { color: var(--rot); background: var(--rot-bg); }
.px-fuss { position: sticky; bottom: -20px; margin: 0 -20px -20px; padding: 12px 20px; background: var(--flaeche); border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
@media (min-width: 640px) { .px-fuss { bottom: -24px; margin: 0 -24px -24px; padding: 12px 24px; } }
.px-status { margin: 0; font-size: 12.5px; color: var(--muted); }
.px-status[data-art="ok"] { color: var(--gruen); }
.px-status[data-art="fehler"] { color: var(--rot); font-weight: 600; }
@media (pointer: coarse) { .px-chip { min-height: 44px; } .px-note button { width: 44px; height: 44px; } }
@media (max-width: 520px) {
  .px-felder { grid-template-columns: 1fr 1fr; }
  .px-skala { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .px-skala button { font-size: var(--fs-min); min-height: 62px; }
  .px-eckdaten { grid-template-columns: 1fr; }
  .px-eckdaten > div + div { border-left: 0; border-top: 1px solid var(--linie); }
  .px-eckdaten > div { display: flex; justify-content: space-between; gap: 10px; }
  .px-timeline li.px-offen { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "datum fl knopf" "datum kurz knopf"; row-gap: 2px; }
  .px-offen .px-p-datum { grid-area: datum; }
  .px-offen .px-p-fl { grid-area: fl; }
  .px-offen .px-p-kurz { grid-area: kurz; }
  .px-offen .knopf { grid-area: knopf; }
  .px-zeile { grid-template-columns: 1fr; gap: 0; }
  .fl-zustaendig { grid-template-columns: 1fr; gap: 6px; }
  .px-p-zeile { grid-template-columns: 40px minmax(0, 1fr) 22px; grid-template-areas: "datum fl note" "dauer kurz kurz"; row-gap: 3px; }
  .px-p-datum { grid-area: datum; }
  .px-p-fl { grid-area: fl; }
  .px-p-note { grid-area: note; }
  .px-p-dauer { grid-area: dauer; }
  .px-p-kurz { grid-area: kurz; font-size: 12.5px; color: var(--muted); }
  .px-p-zeile::after { display: none; }
}

/* Termin-Dialog: Kontakt suchen */
.ksuche { position: relative; }
.ksuche-liste { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: 10px; box-shadow: var(--schatten-gross); max-height: 300px; overflow-y: auto; }
.ksuche-liste li[data-k] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer; min-height: 44px; }
.ksuche-liste li[aria-selected="true"], .ksuche-liste li[data-k]:hover { background: var(--flaeche-3); }
.ksuche-liste li b { display: block; font-size: 14px; }
.ksuche-liste li small { display: block; font-size: 12px; color: var(--muted); }
.ksuche-liste .av { width: 30px; height: 30px; font-size: var(--fs-min); flex: none; }
.ksuche-liste .leer { padding: 10px; font-size: 13px; color: var(--muted); }
/* Touch: Termin „angehoben“ nach kurzem Halten */
.ev[data-zieh] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ev.angehoben { transform: scale(1.03); box-shadow: inset 3px 0 0 var(--f), 0 10px 24px -8px rgb(10 16 32 / 0.45); z-index: 6; }

/* ================= Theorie- und Kurs-Seiten ================= */
.zurueck { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 13.5px; margin-bottom: 10px; min-height: 32px; }
.zurueck:hover { color: var(--ink); }
a.eintrag { color: inherit; text-decoration: none; }
.hinweis.ok { background: var(--gruen-bg); color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 25%, transparent); }
.hinweis.neutral { background: var(--neutral-bg); color: var(--neutral); border-color: color-mix(in srgb, var(--neutral) 18%, transparent); }
/* Anzahl neben Überschriften */
.th-h2 .n, .th-kz-liste .n, .th-protokoll .n, .ku-abschnitt .n { font-size: 12.5px; font-weight: 600; color: var(--muted-2); font-variant-numeric: tabular-nums; }

/* Zu erledigen: nur was Handlung braucht (Nullen entfallen); antippen zeigt die Namen */
.th-todo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.th-todo-eintrag, .th-todo-still { display: inline-flex; align-items: center; gap: 7px; min-height: var(--h-control); padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--ink); font-size: var(--fs-text); font-weight: 500; box-shadow: none; transition: background .12s, border-color .12s; }
.th-todo-eintrag b, .th-todo-still b { font-weight: 650; font-variant-numeric: tabular-nums; }
.th-todo-eintrag:hover, .th-todo-still:hover { background: var(--flaeche-2); border-color: var(--muted-2); }
/* Warnung: sanftes Gelb, Rand und Zahl in Warnfarbe, Text bleibt dunkel (Kontrast) */
.th-todo-eintrag.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn-akzent) 45%, var(--warn-bg)); }
.th-todo-eintrag.warn b { color: var(--warn); }
.th-todo-eintrag.warn:hover { background: color-mix(in srgb, var(--warn-akzent) 14%, var(--warn-bg)); border-color: var(--warn-akzent); }
/* Zahlen ohne Handlungsbedarf: gleiche Form, aber ruhig */
.th-todo-still { color: var(--muted); background: transparent; }
.th-todo-still b { color: var(--ink); }
/* Geöffnet: Rahmen + Tönung in der Auswahlfarbe, kein Schatten */
.th-todo [aria-expanded="true"] { background: var(--blau-bg); border-color: var(--blau); color: var(--ink); box-shadow: none; }
.th-todo .warn[aria-expanded="true"] { background: color-mix(in srgb, var(--warn-akzent) 20%, var(--warn-bg)); border-color: var(--warn-akzent); }
.th-todo-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--gruen); font-weight: 600; font-size: var(--fs-text); }
.th-kz-liste { padding: 12px 14px 14px; margin-bottom: 16px; }
.th-kz-liste h2 { font-size: var(--fs-abschnitt); font-weight: 650; margin-bottom: 10px; display: flex; gap: 8px; align-items: baseline; }
.th-kz-liste h2 .link-knopf { margin-left: auto; font-size: 13px; font-weight: 600; }
.th-kz-liste .liste { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Heute / Demnächst / Zuletzt */
.th-agenda { display: grid; gap: 18px; margin-bottom: 20px; }
.th-agenda .th-leer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; width: 100%; }
.th-agenda .th-leer p { margin: 0; }
.th-woche { font-size: var(--fs-label); font-weight: 600; color: var(--muted); margin: 2px 2px -2px; }
.th-archiv > summary { cursor: pointer; list-style: none; min-height: var(--h-control); }
.th-archiv > summary::-webkit-details-marker { display: none; }
.th-archiv > summary::before { content: "▸"; color: var(--muted); }
.th-archiv[open] > summary::before { content: "▾"; }
.th-archiv[open] > summary { margin-bottom: 8px; }
.th-spalte { display: grid; gap: 8px; min-width: 0; align-content: start; }
.th-spalte > .th-h2:not(:first-child) { margin-top: 10px; }
.th-h2 { font-size: var(--fs-abschnitt); font-weight: 650; display: flex; gap: 8px; align-items: center; }
.th-h2.warn { color: var(--warn); }
.th-h2.warn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warn-akzent); flex: none; }
.th-leer { padding: 18px; }
.th-heute { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 14px 16px 14px 18px; box-shadow: inset 4px 0 0 var(--f), var(--schatten); }
.th-h-zeit { display: grid; text-align: center; min-width: 58px; font-variant-numeric: tabular-nums; }
.th-h-zeit b { font-size: 20px; font-weight: 650; line-height: 1.2; }
.th-h-zeit span { font-size: 12px; color: var(--muted); }
.th-h-text { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.th-h-text > b { font-size: 15px; font-weight: 650; line-height: 1.3; }
.th-h-text > span { font-size: 13px; color: var(--muted); }
.th-h-text > .tag { margin-top: 2px; }
@media (max-width: 560px) { .th-heute { grid-template-columns: auto minmax(0, 1fr); } .th-heute .knopf { grid-column: 1 / -1; width: 100%; } }

/* Terminliste (Theorie und Kurse): Datum · Inhalt · Status – Zeilen in einer Karte, durch Linien getrennt */
.ag-liste { display: grid; overflow: hidden; }
.ag-zeile { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 9px 14px 9px 12px; color: inherit; text-decoration: none; border-top: 1px solid var(--linie); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--f) 75%, transparent); }
.ag-zeile:first-child { border-top: 0; }
.ag-zeile:hover { background: var(--flaeche-2); }
.ag-zeile:focus-visible { outline-offset: -2px; }
.ag-text { display: grid; gap: 1px; min-width: 0; }
.ag-text b { overflow-wrap: anywhere; font-size: 13.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-text > span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-text > span:empty { display: none; }
.ag-leer { padding: 2px 2px 6px; }
.dat-block { display: grid; justify-items: center; line-height: 1.25; font-variant-numeric: tabular-nums; }
.dat-block small { font-size: var(--fs-min); font-weight: 600; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.04em; }
.dat-block b { font-size: 15px; font-weight: 650; }
.dat-block span { font-size: 12px; color: var(--muted); }
@media (max-width: 560px) {
  .ag-zeile { grid-template-columns: 52px minmax(0, 1fr); }
  .ag-zeile > .tag { grid-column: 2; justify-self: start; }
}

/* Alle Stunden: Filter + Tabelle */
.th-alle { overflow: hidden; }
.th-alle-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 14px 0; }
.th-alle-kopf .link-knopf { margin-left: auto; font-size: 13px; font-weight: 600; }
.th-filter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; padding: 10px 14px 12px; border-bottom: 1px solid var(--linie); }
.th-filter label { display: grid; gap: 4px; font-size: var(--fs-label); font-weight: 600; color: var(--muted); min-width: 0; }
.th-filter input, .th-filter select { min-height: var(--h-control); border: 1px solid var(--linie-2); border-radius: var(--r-control); background-color: var(--flaeche); padding: 6px 10px; font-size: 13.5px; font-weight: 500; color: var(--ink); width: 100%; min-width: 0; box-shadow: var(--schatten); }
.th-filter input:focus, .th-filter select:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 18%, transparent); }
.th-filter select.aktiv { border-color: color-mix(in srgb, var(--blau) 55%, transparent); background-color: var(--blau-bg); color: var(--info); }
.th-tabelle-rahmen { overflow-x: auto; }
.th-tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.th-tabelle th { text-align: left; font-size: var(--fs-label); font-weight: 600; color: var(--muted-2); padding: 8px 14px; border-bottom: 1px solid var(--linie); white-space: nowrap; background: var(--flaeche-2); }
.th-tabelle abbr { text-decoration: none; cursor: help; }
.th-tabelle td { padding: 9px 14px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.th-tabelle tbody tr:last-child td { border-bottom: 0; }
.th-tabelle td:nth-child(3) { white-space: normal; min-width: 220px; }
.th-tabelle td:nth-child(3) b { font-weight: 600; }
.th-tabelle td:nth-child(5), .th-tabelle td:nth-child(6) { font-variant-numeric: tabular-nums; }
.th-tabelle tbody tr { cursor: pointer; }
.th-tabelle tbody tr:hover, .th-tabelle tbody tr:focus-visible { background: var(--flaeche-2); }
.th-tabelle tbody tr:focus-visible { outline-offset: -2px; }
.th-tabelle tr.abgesagt td { color: var(--muted-2); }
.th-tabelle tr.abgesagt b { text-decoration: line-through; }
.th-tabelle .punkt-f { display: inline-block; vertical-align: middle; margin-right: 2px; }
@media (max-width: 760px) {
  .th-tabelle thead { display: none; }
  .th-tabelle, .th-tabelle tbody, .th-tabelle tr, .th-tabelle td { display: block; width: 100%; }
  .th-tabelle tr { padding: 10px 14px; border-bottom: 1px solid var(--linie); display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
  .th-tabelle tbody tr:last-child { border-bottom: 0; }
  .th-tabelle td { border: 0; padding: 0; white-space: normal; min-width: 0 !important; font-size: 13px; }
  .th-tabelle td:nth-child(3) { order: -1; grid-column: 1 / -1; font-size: 13.5px; }
  .th-tabelle td:nth-child(7) { order: 10; grid-column: 1 / -1; margin-top: 4px; }
  .th-tabelle td::before { content: attr(data-l) ": "; color: var(--muted-2); font-size: 12px; }
  .th-tabelle td:nth-child(3)::before, .th-tabelle td:nth-child(7)::before { content: none; }
}

/* Eine Theoriestunde / ein Kurs: Kopf, Teilnehmerliste, Abschluss, Protokoll */
.th-seite { display: grid; gap: 14px; max-width: 1000px; margin: 0 auto; }
.th-seite > .zurueck { margin-bottom: -6px; justify-self: start; }
.th-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.th-kopf-text { display: grid; gap: 4px; min-width: 0; }
.th-ueber { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: var(--fs-klein); font-weight: 600; color: var(--muted); }
.th-ueber a { color: var(--blau); text-decoration: none; }
.th-ueber a:hover { text-decoration: underline; }
.th-ueber > span[aria-hidden] { color: var(--muted-2); font-weight: 400; }
.th-meta { color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13.5px; }
.th-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.th-meta > span + span::before { content: "·"; color: var(--muted-2); margin-right: 2px; }
.th-kopf .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.th-notiz-anzeige { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-control); padding: 8px 12px; font-size: 13.5px; white-space: pre-line; }
.th-ergebnis ul { margin: 6px 0 0; padding-left: 18px; columns: 2 220px; }
.th-leiste { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--linie); }
.th-zahlen { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 13.5px; color: var(--muted); }
.th-zahlen > b { font-size: var(--fs-kennzahl); font-weight: 650; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.th-zahlen > span:not(.th-z) { margin-right: 4px; }
.th-z { align-self: center; font-size: var(--fs-label); font-weight: 600; line-height: 1.5; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--f) 12%, var(--flaeche)); color: color-mix(in srgb, var(--f) 82%, #000); }
/* Anwesenheit/Teilnahme: anwesend = Erfolg, abwesend = Fehler, entschuldigt = Info (bekannt, mit Grund), offen = neutral */
[data-a="anwesend"] { --f: var(--gruen); } [data-a="abwesend"] { --f: var(--rot); } [data-a="entschuldigt"] { --f: var(--info); } [data-a="offen"] { --f: var(--neutral); } [data-a="abgesagt"] { --f: var(--typ-blocker); }
.th-massen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.th-korr-hinweis { margin: 10px 14px 0; }
.th-tn-liste, .ku-tn-liste { list-style: none; margin: 0; padding: 0; }
.th-tn { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto auto; grid-template-areas: "name fort seg extra" "notiz notiz notiz notiz"; gap: 6px 14px; align-items: center; padding: 7px 14px 7px 12px; border-bottom: 1px solid var(--linie); box-shadow: inset 3px 0 0 var(--f); }
.th-tn[data-a="offen"], .ku-tn[data-a="offen"] { box-shadow: inset 3px 0 0 var(--linie-2); }
.th-name { grid-area: name; display: flex; gap: 10px; align-items: center; border: 0; background: none; padding: 0; text-align: left; min-width: 0; min-height: 40px; color: inherit; }
button.th-name:hover b { color: var(--blau); }
.th-name-text { display: grid; min-width: 0; }
.th-name-text b { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.th-name-text small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.th-name-text em { color: var(--warn); font-style: normal; }
.th-fort { grid-area: fort; display: flex; gap: 8px; align-items: center; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--muted); }
.th-fort b { font-weight: 600; color: var(--ink); }
.th-fort .balken, .blick .balken { flex: 1; min-width: 30px; }
/* Anwesenheit als Segment-Umschalter: gewählte Option in ihrer Statusfarbe mit Symbol */
.th-seg { grid-area: seg; display: inline-flex; background: var(--flaeche-3); padding: 3px; border-radius: var(--r-control); gap: 2px; }
.th-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 4px 11px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; }
.th-seg button i { font-style: normal; font-weight: 800; font-size: 13px; width: 14px; text-align: center; }
.th-seg button:hover { color: var(--ink); background: var(--flaeche); }
.th-seg button[aria-checked="true"] { background: var(--f); color: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 0.2); }
@media (pointer: coarse) { .th-seg button { min-height: 40px; } }
/* Abgeschlossene/abgesagte Stunde: nur der Stand, kein Umschalter */
/* feste Spalte, damit Fortschritt und Stand in allen Zeilen untereinander stehen */
.th-tn:has(> .th-a-tag) { grid-template-columns: minmax(0, 1fr) 110px 128px auto; }
.th-a-tag { grid-area: seg; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--f) 12%, var(--flaeche)); color: color-mix(in srgb, var(--f) 85%, #000); }
.th-a-tag i { font-style: normal; font-weight: 800; }
.th-extra { grid-area: extra; display: flex; gap: 4px; }
.th-extra .icon, .ku-weg { width: 32px; height: 32px; box-shadow: none; }
.th-extra .icon[aria-pressed="true"] { color: var(--blau); border-color: color-mix(in srgb, var(--blau) 50%, transparent); background: var(--blau-bg); }
@media (pointer: coarse) { .th-extra .icon, .ku-weg { width: 40px; height: 40px; } }
.th-tn-notiz { grid-area: notiz; min-height: var(--h-control); padding: 6px 11px; border: 1px solid var(--linie-2); border-radius: var(--r-control); background: var(--flaeche); width: 100%; font-size: 13.5px; }
.th-tn-notiz:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 18%, transparent); }
.th-leer-tn { padding: 18px 14px; color: var(--muted); }
/* Tablet hochkant: Anwesenheit in eigener Zeile über die volle Breite (große Tippflächen), Name bekommt Platz */
@media (max-width: 960px) {
  .th-tn { grid-template-columns: minmax(0, 1fr) 110px auto; grid-template-areas: "name fort extra" "seg seg seg" "notiz notiz notiz"; }
  .th-tn:has(> .th-a-tag) { grid-template-areas: "name fort seg extra" "notiz notiz notiz notiz"; }
  .th-seg { width: 100%; }
  .th-seg button { flex: 1; }
}
@media (max-width: 760px) {
  .th-tn, .th-tn:has(> .th-a-tag) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name extra" "fort fort" "seg seg" "notiz notiz"; }
  .th-seg { width: 100%; }
  .th-seg button { flex: 1; padding: 4px; }
  .th-a-tag { justify-self: start; }
}
@media (max-width: 420px) { .th-seg button span { font-size: 12px; } }
/* Teilnehmer hinzufügen */
.th-hinzu-leiste { padding: 10px 14px; }
.th-hinzu { padding: 0 14px 14px; display: grid; gap: 10px; }
.th-hinzu > .knopf { justify-self: start; }
.th-hinzu .suche { flex: none; max-width: 520px; }
.th-hinzu-kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.th-wahl { margin-top: 16px; border-top: 1px solid var(--linie); padding-top: 12px; display: grid; gap: 8px; }
.th-wahl-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.th-wahl-kopf h3 { margin: 0; font-size: 15px; }
.th-wahl-kopf .link-knopf { margin-left: auto; }
.th-wahl-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); max-height: 260px; overflow-y: auto; }
.th-wahl-liste .check { align-items: center; border: 1px solid var(--linie); border-radius: 8px; padding: 7px 10px; min-height: 48px; background: var(--flaeche); cursor: pointer; }
.th-wahl-liste .check:has(input:checked) { border-color: var(--marke); background: var(--marke-bg); }
.th-wahl-text { display: grid; min-width: 0; }
.th-wahl-text b, .th-wahl-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-wahl-text small { font-size: 12px; color: var(--muted); }
.th-wahl-mehr summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 4px 0; }
.th-wahl-mehr .th-wahl-liste { margin-top: 6px; }
.th-kand { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); max-height: 360px; overflow-y: auto; }
.th-kand button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--linie); background: var(--flaeche); border-radius: var(--r-control); padding: 7px 10px; min-height: 48px; }
.th-kand button:hover { border-color: var(--linie-2); background: var(--hover); }
.th-kand-text { display: grid; min-width: 0; flex: 1; }
.th-kand-text b, .th-kand-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-kand-text b { font-weight: 600; }
.th-kand-text small { font-size: 12px; color: var(--muted); }
.th-plus { color: var(--muted-2); display: grid; }
.th-kand button:hover .th-plus { color: var(--marke); }
/* Abschluss: Theorie immer unten angeheftet; orange erst, wenn alles erfasst ist (Kurse: wenn der letzte Termin da ist) */
.th-abschluss { position: sticky; bottom: 12px; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 10px 14px; box-shadow: 0 -8px 24px -12px rgb(10 16 32 / 0.25), var(--schatten); }
.th-abschluss.bereit { border-color: color-mix(in srgb, var(--marke) 55%, var(--linie)); }
.th-abschluss.ruhig { position: static; box-shadow: var(--schatten); }
.th-abschluss textarea { min-height: var(--h-control); padding: 7px 11px; border: 1px solid var(--linie-2); border-radius: var(--r-control); background: var(--flaeche); resize: vertical; width: 100%; font-size: 13.5px; }
.th-abschluss textarea:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 18%, transparent); }
.th-abschluss > p { grid-column: 1 / -1; }
.ku-abschluss > p { grid-column: auto; }
.th-fertig { min-height: 40px; padding: 8px 18px; }
@media (max-width: 560px) {
  .th-abschluss { grid-template-columns: 1fr; bottom: 0; margin: 0 -8px; border-radius: 12px 12px 0 0; }
  .th-abschluss.ruhig { margin: 0; border-radius: var(--r-karte); }
  .th-fertig { width: 100%; }
}
.th-protokoll summary { font-weight: 600; cursor: pointer; padding: 11px 14px; }
.th-protokoll ol { list-style: none; margin: 0; padding: 0 14px 10px; display: grid; gap: 6px; }
.th-protokoll > p { padding: 0 14px 12px; }
.th-protokoll li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 10px; font-size: 13px; }
.th-protokoll time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.th-protokoll small { color: var(--muted); }
@media (max-width: 560px) { .th-protokoll li { grid-template-columns: 1fr; gap: 0; } }
.th-bilanz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.th-bilanz div { background: var(--flaeche-2); border-radius: 10px; padding: 12px; display: grid; text-align: center; border-top: 3px solid var(--f, var(--marke-tief)); }
.th-bilanz b { font-size: 28px; font-weight: 650; font-variant-numeric: tabular-nums; }
.th-bilanz span { font-size: 12.5px; color: var(--muted); }

/* Kartei: Reiter (aktiver Reiter blau unterstrichen) */
.s-tabs { flex-basis: 100%; display: flex; gap: 4px; overflow-x: auto; margin: 2px -4px 0; scrollbar-width: none; }
.s-tabs button { border: 0; background: none; padding: 8px 10px; font-weight: 600; font-size: 13.5px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; min-height: 40px; border-radius: 0; }
.s-tabs button:hover { color: var(--ink); border-bottom-color: var(--linie-2); }
.s-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blau); }
.s-panel { display: grid; gap: 20px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.blick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.blick button { display: grid; gap: 3px; align-content: start; text-align: left; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r-control); padding: 10px 12px; min-width: 0; }
.blick button:hover { border-color: var(--linie-2); }
.blick span { font-size: 12px; font-weight: 600; color: var(--muted); }
.blick b { font-size: var(--fs-kennzahl); font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.blick b small { font-size: 13px; font-weight: 500; color: var(--muted); }
.blick b.blick-text { font-size: 14px; font-weight: 700; color: color-mix(in srgb, var(--f) 85%, #000); }
.blick small { font-size: 12px; color: var(--muted); }
/* Kennzahlen-Gruppe: zusammengehörige Werte in einer Karte, durch Linien getrennt (Theorie: Gesamt/Grundstoff/Klasse; Praxis: Stunden/Stand/Zuletzt) */
.kz-gruppe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; }
.kz-gruppe > div { background: var(--flaeche); padding: 11px 14px 12px; display: grid; gap: 5px; align-content: start; min-width: 0; }
.kz-gruppe > div > span:first-child { font-size: 12px; font-weight: 600; color: var(--muted); }
.kz-gruppe b { display: flex; align-items: baseline; gap: 2px; font-size: var(--fs-kennzahl); font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kz-gruppe b small { font-size: 13px; font-weight: 500; color: var(--muted); }
.kz-gruppe b em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
.kz-gruppe b.px-kpi-text { font-size: 15px; font-weight: 700; color: color-mix(in srgb, var(--f) 80%, #000); padding-top: 4px; }
.kz-gruppe > div > small { font-size: 12px; color: var(--muted); }
@media (max-width: 480px) { .kz-gruppe { grid-template-columns: 1fr; } }
/* Lehrplan: Kapitel umbrechen statt abschneiden; besucht = grüner Haken + Datum, eingetragen = Termin, offen = Nummer */
/* Besuchte Stunden: Symbol (✓/✕/E) in der Farbe der Anwesenheit */
.th-hist { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; }
.th-hist li + li { border-top: 1px solid var(--linie); }
.th-hist li { background: var(--flaeche); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--f) 70%, transparent); }
.th-hist button { width: 100%; display: grid; grid-template-columns: 20px 46px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 10px 7px 12px; border: 0; background: none; text-align: left; }
.th-hist button:hover { background: var(--hover); }
.th-hist time { font: 500 12.5px var(--mono); color: var(--muted); }
.th-hist i { font-style: normal; font-weight: 800; color: var(--f); text-align: center; font-size: 14px; }
.th-hist b { display: block; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.th-hist small { display: block; font-size: 12px; color: var(--muted); }

/* Prüfungen: Stand zuerst (Symbol + Farbe nach Bedeutung), dann Ablauf, Aktionen, Einschätzung, Verlauf */
.pr-status { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-control); border: 1px solid; }
.pr-status > div { display: grid; gap: 1px; min-width: 0; }
.pr-status b { font-size: 14px; }
.pr-status span { font-size: 13px; color: var(--muted); }
.pr-symbol { display: grid; place-items: center; flex: none; margin-top: 1px; }
.pr-status.neutral { background: var(--neutral-bg); border-color: color-mix(in srgb, var(--neutral) 18%, transparent); }
.pr-status.neutral .pr-symbol { color: var(--neutral); }
.pr-status.info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 20%, transparent); }
.pr-status.info .pr-symbol, .pr-status.info b { color: var(--info); }
.pr-status.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn-akzent) 30%, transparent); }
.pr-status.warn .pr-symbol, .pr-status.warn b { color: var(--warn); }
.pr-status.fehler { background: var(--rot-bg); border-color: color-mix(in srgb, var(--rot) 25%, transparent); }
.pr-status.fehler .pr-symbol, .pr-status.fehler b { color: var(--rot); }
.pr-status.ok { background: var(--gruen-bg); border-color: color-mix(in srgb, var(--gruen) 22%, transparent); }
.pr-status.ok .pr-symbol, .pr-status.ok b { color: var(--gruen); }
.pr-schritte, .spur-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; counter-reset: pr; }
.pr-schritte li, .spur-schritte li { counter-increment: pr; font-size: var(--fs-min); font-weight: 600; line-height: 1.25; color: var(--muted-2); padding-top: 7px; border-top: 4px solid var(--flaeche-3); }
.pr-schritte li::before { content: counter(pr) ". "; }
.pr-schritte li.fertig, .spur-schritte li.fertig { border-top-color: var(--gruen); color: var(--muted); }
.pr-schritte li.jetzt, .spur-schritte li.jetzt { border-top-color: var(--blau); color: var(--ink); }
.pr-schritte li.rot, .spur-schritte li.rot { border-top-color: var(--rot); color: var(--rot); }
.pr-voraus { font-size: 12.5px; color: var(--muted); }
.pr-verlauf-box { display: grid; gap: 6px; }
.pr-verlauf-titel { font-size: 12px; font-weight: 600; color: var(--muted); }
.knopf.pr-gut { background: var(--gruen); color: #fff; }
.knopf.pr-gut:hover { background: color-mix(in srgb, var(--gruen) 85%, #000); }
.pr-verlauf li { font-size: 13px; }

/* Lehrplan-Dialog */
.lp-summe { font-size: 13px; background: var(--flaeche-2); border-radius: 8px; padding: 8px 10px; line-height: 1.6; }
.lp-kopf, .lp-zeile { display: grid; grid-template-columns: 58px minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1.4fr) 44px 36px; gap: 6px; align-items: center; }
.lp-kopf { font-size: var(--fs-min); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
.lp-liste { display: grid; gap: 6px; max-height: 52vh; overflow-y: auto; }
.lp-zeile input:not([type="checkbox"]), .lp-zeile select { min-height: 36px; padding: 6px 8px; border: 1px solid var(--linie-2); border-radius: var(--r-control); background: var(--flaeche); width: 100%; min-width: 0; font-size: 13.5px; }
.lp-zeile.aus input:not([type="checkbox"]), .lp-zeile.aus select { color: var(--muted-2); background: var(--flaeche-2); }
.lp-aktiv { display: grid; place-items: center; }
.lp-aktiv input { width: 18px; height: 18px; accent-color: var(--marke); }
.lp-zeile .icon { width: 32px; height: 32px; }
@media (max-width: 640px) {
  .lp-kopf { display: none; }
  .lp-zeile { grid-template-columns: 58px minmax(0, 1fr) 36px; padding: 8px; border: 1px solid var(--linie); border-radius: 8px; }
  .lp-zeile [data-lp="kategorie"], .lp-zeile [data-lp="klassen"] { grid-column: 1 / -1; }
  .lp-zeile [data-lp="titel"] { grid-column: 2 / 4; }
}

/* Karten: kein content-visibility – geschätzte Höhen ändern sich beim Scrollen und lassen das Board springen */
/* Kopfleiste: auf schmalen Tablets und Handys zweizeilig (Bereiche in der zweiten Zeile, aktiver Bereich unterstrichen) */
@media (max-width: 860px) {
  .kopf-in { flex-wrap: wrap; row-gap: 6px; padding-top: 8px; }
  .kopf-rechts { order: 2; }
  .tabs { order: 3; width: 100%; padding-bottom: 6px; }
  .sync { max-width: 190px; }
}

/* Theorie und Praxis parallel + Bewertungssystem */
.bw-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .bw-raster { grid-template-columns: 1fr; } }
.bw { display: grid; gap: 6px; align-content: start; text-align: left; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-control); padding: 10px 12px; min-width: 0; width: 100%; }
.bw:hover { border-color: var(--linie-2); background: var(--flaeche-2); }
.bw-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.bw-kopf > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.bw-kopf em { font-style: normal; }
.bw > b { font-size: var(--fs-kennzahl); font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bw > b small { font-size: 13px; font-weight: 500; color: var(--muted); }
.bw > small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.status-spur { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.status-spur small { font-weight: 500; color: var(--muted-2); }
.per-chat { display: inline-flex; align-items: center; gap: 3px; color: var(--info); font-weight: 600; }
.wa-tn-fehler { display: inline-flex; align-items: center; gap: 3px; color: var(--rot); font-weight: 600; }

/* Aufbauseminar & DRK-Lehrgang: Liste wie die Theorie-Termine (.ag-liste), Belegung rechts in Kursfarbe */
.ku-seite { display: grid; gap: 20px; }
.ku-seite > section { display: grid; gap: 8px; }
.ku-zeile { grid-template-columns: 58px minmax(0, 1fr) auto 150px; }
.ku-zeile.abgesagt > :not(.tag) { opacity: 0.6; }
.ku-belegung { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; font-variant-numeric: tabular-nums; }
.ku-belegung b { font-size: 13px; font-weight: 600; }
.ku-belegung small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .ku-zeile { grid-template-columns: 52px minmax(0, 1fr); }
  .ku-zeile > .tag { grid-column: 2; justify-self: start; }
  .ku-zeile > .ku-belegung { grid-column: 2; max-width: 240px; }
  .ag-platz { display: none; }
}
/* Kurs: Termine als kleine Karten (vorbei = Haken, heute = blau) */
.ku-termine { padding: 12px 14px 14px; display: grid; gap: 10px; }
.ku-abschnitt { font-size: var(--fs-abschnitt); font-weight: 650; display: flex; gap: 8px; align-items: center; }
.ku-termine ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; }
.ku-termine li { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--linie); border-radius: var(--r-control); background: var(--flaeche-2); min-width: 0; }
.ku-termine li b { display: block; font-size: 13.5px; font-weight: 600; }
.ku-termine li small { display: block; font-size: 12px; color: var(--muted); }
.ku-t-nr { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 700; background: var(--flaeche); border: 1px solid var(--linie-2); color: var(--muted); }
.ku-termine li.vorbei { background: var(--flaeche); }
.ku-termine li.vorbei b { color: var(--muted); font-weight: 500; }
.ku-termine li.vorbei .ku-t-nr { background: var(--gruen-bg); border-color: transparent; color: var(--gruen); }
.ku-termine li.heute { border-color: color-mix(in srgb, var(--blau) 45%, transparent); background: var(--blau-bg); }
/* Kurs-Teilnehmer: Name · Bezahlt · Teilnahme · Bescheinigung · Abmelden */
.ku-tn { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; padding: 7px 14px 7px 12px; border-bottom: 1px solid var(--linie); box-shadow: inset 3px 0 0 var(--f); }
.ku-tn .th-name { grid-area: auto; }
.ku-felder { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.ku-felder .th-a-tag { min-height: 30px; }
@media (max-width: 860px) {
  .ku-tn { grid-template-columns: minmax(0, 1fr) auto; }
  .ku-felder { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .ku-tn .ku-weg { grid-column: 2; grid-row: 1; }
}
@media (max-width: 480px) { .ku-felder .ku-seg { order: -1; width: 100%; } .ku-seg button { flex: 1; } }
/* Schalter-Chip (Bezahlt, Bescheinigung): echtes Kontrollkästchen; an = grün mit Haken, aus = Rahmen mit leerem Kreis */
.schalter-chip { position: relative; display: inline-flex; cursor: pointer; }
.schalter-chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.schalter-chip span { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 11px 3px 9px; border: 1px solid var(--linie-2); border-radius: 999px; background: var(--flaeche); font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: background 0.12s, border-color 0.12s; }
.schalter-chip span svg { display: none; }
.schalter-chip input:not(:checked) + span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.7; }
.schalter-chip:hover span { border-color: #b9c0cc; color: var(--ink); }
.schalter-chip input:checked + span { background: var(--gruen-bg); border-color: color-mix(in srgb, var(--gruen) 35%, transparent); color: var(--gruen); }
.schalter-chip input:checked + span svg { display: block; }
.schalter-chip input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: 2px; }
.schalter-chip input:disabled { cursor: default; }
.schalter-chip input:disabled + span { opacity: 0.6; }
@media (pointer: coarse) { .schalter-chip span { min-height: 38px; } }

.ku-extern { border: 1px dashed var(--linie-2); border-radius: 10px; padding: 8px 12px; max-width: 620px; }
.ku-extern summary { cursor: pointer; font-weight: 600; font-size: 13.5px; min-height: 32px; display: flex; align-items: center; }
.ku-extern[open] { display: grid; gap: 10px; padding-bottom: 12px; }
.ku-extern .knopf { justify-self: start; }
.ku-terminliste { display: grid; gap: 6px; }
.ku-termin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ku-termin input { min-height: 40px; padding: 6px 9px; border: 1px solid var(--linie-2); border-radius: var(--r-control); background: var(--flaeche); }
.ku-termin input[type="date"] { flex: 1 1 150px; }
.ku-termin input[type="time"] { width: 104px; }
.ku-nr { width: 22px; color: var(--muted); font-weight: 600; font-size: 13px; }
.ku-terminliste + .knopf { justify-self: start; margin-top: 4px; }

.stand-aendern { border: 1px solid var(--linie); border-radius: var(--r-control); padding: 10px 12px; }
.stand-aendern > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.stand-aendern[open] > summary { margin-bottom: 10px; }
.stand-aendern + .stand-aendern { margin-top: -8px; }

/* Admin-Zugang */
.admin-marke { background: var(--auf-marke); color: var(--marke-tief); font-weight: 800; font-size: var(--fs-min); letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.admin-wechsel { color: #f3f5f9; border-color: rgb(255 255 255 / 0.25); background: transparent; white-space: nowrap; }
.admin-wechsel:hover { border-color: #fff; color: #fff; background: rgb(255 255 255 / 0.1); }
body.admin-ansicht .kopf { box-shadow: inset 0 -3px 0 var(--marke-hell); }
.admin-auswahl { max-width: 640px; }
.admin-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.admin-konto { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--linie); background: var(--flaeche); border-radius: 10px; padding: 10px 12px; min-height: 60px; color: inherit; }
.admin-konto:hover, .admin-konto:focus-visible { border-color: var(--marke); background: var(--marke-bg); }
.admin-konto[aria-current="true"] { border-color: var(--marke-tief); }
.admin-konto-text { display: grid; flex: 1; min-width: 0; }
.admin-konto-text b { font-size: 15px; }
.admin-konto-text small { font-size: 12.5px; color: var(--muted); }
.admin-konto-text em { color: var(--warn); font-style: normal; font-weight: 600; }
.admin-pfeil { color: var(--muted-2); }
@media (max-width: 640px) {
  .admin-wechsel { padding: 5px 8px; font-size: 12.5px; }
  .kopf-rechts { min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  body.admin-ansicht .sync { max-width: 120px; }
}

/* Neu im Kalender: Auswahl am Termin-Knopf */
#neuTermin .pfeil { font-size: var(--fs-min); margin-left: -2px; opacity: 0.8; }
.neu-menu { position: fixed; z-index: 70; width: min(580px, calc(100vw - 16px)); background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: 12px; box-shadow: var(--schatten-gross); padding: 12px; overflow-y: auto; overscroll-behavior: contain; animation: hoch 0.12s ease-out; }
.nm-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.nm-spalte { display: grid; gap: 12px; align-content: start; }
.nm-gruppe { display: grid; gap: 2px; }
.nm-kopf { font-size: var(--fs-min); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 2px 8px; }
.nm-eintrag { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none; border-radius: 8px; padding: 7px 8px; min-height: 48px; color: inherit; }
.nm-eintrag:hover, .nm-link:hover { background: color-mix(in srgb, var(--f, var(--marke-tief)) 9%, var(--flaeche)); }
.nm-eintrag:focus-visible, .nm-link:focus-visible { outline: none; background: color-mix(in srgb, var(--f, var(--marke-tief)) 9%, var(--flaeche)); box-shadow: 0 0 0 2px var(--blau) inset; }
.nm-punkt { width: 12px; height: 12px; border-radius: 4px; background: var(--f); flex: none; }
.nm-text { display: grid; min-width: 0; }
.nm-text b { font-size: 14px; }
.nm-text small { font-size: 12px; color: var(--muted); }
.nm-link { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13.5px; min-height: 40px; }
.nm-link svg { color: var(--muted); flex: none; }
.nm-hinweis { margin: 10px 4px 0; padding-top: 10px; border-top: 1px solid var(--linie); font-size: 12.5px; color: var(--muted); }
.neu-menu.blatt { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 85vh; border-radius: 16px 16px 0 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.neu-menu.blatt .nm-spalten { grid-template-columns: 1fr; }

/* Art-Auswahl oben in den Neu-Dialogen */
.arten-trenner { flex-basis: 100%; margin-top: 4px; font-size: var(--fs-min); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }

/* Wiederholen (Serien) */
.wh { gap: 8px; }
.wh-eigen:not([hidden]) { display: grid; gap: 10px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche-2); }
.wh-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.feld .wh-zeile input { width: 76px; }
.feld .wh-zeile select, .feld #whMonat { width: auto; min-width: 150px; }
.wh-tage:not([hidden]) { display: flex; gap: 6px; flex-wrap: wrap; }
.wh-tag { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linie-2); background: var(--flaeche); font-weight: 700; font-size: 13px; color: var(--muted); }
.wh-tag[aria-pressed="true"] { background: var(--marke-tief); border-color: var(--marke-tief); color: #fff; }
.wh-ende:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13.5px; }
.wh-ende-titel { font-weight: 600; }
.wh-radio { display: inline-flex; align-items: center; gap: 6px; }
.feld .wh-radio input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--marke); }
.feld .wh-radio input[type="number"] { width: 76px; }
.feld .wh-radio input[type="date"] { width: auto; }
.wh-vorschau { font-size: 13.5px; background: color-mix(in srgb, var(--blau) 6%, var(--flaeche)); border: 1px solid color-mix(in srgb, var(--blau) 20%, transparent); border-radius: 10px; padding: 8px 12px; }
.wh-vorschau p { margin: 0; }
.wh-vorschau summary { cursor: pointer; font-size: 12.5px; color: var(--blau); font-weight: 600; margin-top: 4px; }
.wh-liste { margin: 6px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 3px 14px; max-height: 190px; overflow-y: auto; font-size: 12.5px; }
.wh-liste small { color: var(--muted); }
.wh-konflikt:not([hidden]) { display: grid; gap: 6px; margin-top: 12px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 9%, var(--flaeche)); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.wh-konflikt p { margin: 0; }
.wh-konflikt ul { margin: 0; padding-left: 18px; }
.wh-umfang { border: 1px solid var(--linie); border-radius: 10px; padding: 8px 12px 10px; margin: 12px 0 0; display: grid; gap: 4px; }
.wh-umfang legend { font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 0 4px; }
.wh-umfang .check input:disabled + span { color: var(--muted-2); }

/* ================= Sarah (WhatsApp) ================= */
.wa-schalter { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px; cursor: pointer; user-select: none; }
.wa-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wa-schalter > span { width: 40px; height: 24px; border-radius: 999px; background: var(--linie-2); position: relative; flex: none; transition: background 0.15s; }
.wa-schalter > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(10 16 32 / 0.25); transition: transform 0.15s; }
.wa-schalter input:checked + span { background: var(--gruen); }
.wa-schalter input:checked + span::after { transform: translateX(16px); }
.wa-schalter input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: 2px; }
.wa-schalter input:disabled + span { opacity: 0.5; }

.wa-einrichtung { margin-bottom: 14px; }
.wa-einrichtung summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; cursor: pointer; list-style: none; }
.wa-einrichtung summary::-webkit-details-marker { display: none; }
.wa-einrichtung summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted-2); border-bottom: 2px solid var(--muted-2); transform: rotate(45deg); transition: transform 0.15s; }
.wa-einrichtung[open] summary::after { transform: rotate(-135deg); }
.wa-punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted-2); }
.wa-punkt.gruen { background: #22b16a; box-shadow: 0 0 0 3px color-mix(in srgb, #22b16a 20%, transparent); }
.wa-punkt.gelb { background: var(--warn-akzent); }
.wa-punkt.rot { background: var(--rot); }
.wa-einrichtung-in { padding: 0 16px 16px; display: grid; gap: 12px; border-top: 1px solid var(--linie); padding-top: 14px; }
.wa-check { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.wa-check li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; }
.wa-check li b { font-weight: 600; }
.wa-haken { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--flaeche-3); color: var(--muted); font-size: 12px; font-weight: 700; }
.wa-check li.ok .wa-haken { background: var(--gruen-bg); color: var(--gruen); }
.wa-check li.offen .wa-haken { background: var(--warn-bg); color: var(--warn); }
.wa-check code, .wa-einrichtung code { font-family: var(--mono); font-size: 12px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 4px; padding: 0 4px; }
.wa-einrichtung-fuss { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.wa-einrichtung-fuss .feld { flex: 1 1 360px; min-width: 0; }
.wa-adresse { display: flex; gap: 8px; align-items: center; min-width: 0; }
.wa-adresse code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 10px !important; font-size: 12.5px !important; }

/* Höhe bis zum unteren Fensterrand: --wa-oben = Beginn des Rasters (misst app.js → waHoeheMessen) */
.wa-raster { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px; align-items: stretch; height: max(400px, calc(100dvh - var(--wa-oben, 260px) - 16px)); min-height: 0; }
/* position: relative – sonst verlängern die unsichtbaren Screenreader-Texte (.sr) im Verlauf die ganze Seite nach unten */
.wa-seite { overflow-y: auto; min-height: 0; position: relative; }
.wa-leer { padding: 28px 18px; text-align: center; color: var(--muted); display: grid; gap: 6px; }
.wa-liste { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; }
.wa-eintrag { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 8px; color: inherit; text-decoration: none; }
.wa-eintrag:hover { background: var(--flaeche-2); }
.wa-eintrag[aria-current="true"] { background: var(--marke-bg); box-shadow: inset 3px 0 0 var(--marke); }
.wa-eintrag-text { min-width: 0; flex: 1; display: grid; gap: 2px; }
.wa-eintrag-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.wa-eintrag-kopf b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-eintrag-kopf time { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.wa-vorschau { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-vorschau.fehler { color: var(--rot); }
.wa-eintrag-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wa-art { font-size: var(--fs-min); font-weight: 600; color: var(--gruen); }
.wa-art.unbekannt { color: var(--muted-2); }

.wa-verlauf { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--schatten); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wa-verlauf-leer { display: grid; place-items: center; text-align: center; padding: 30px; }
.wa-verlauf-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linie); }
.wa-verlauf-titel { min-width: 0; flex: 1; display: grid; }
.wa-verlauf-titel b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-zurueck { display: none !important; }
.wa-nachrichten { list-style: none; margin: 0; padding: 16px; flex: 1; overflow-y: auto; position: relative; min-height: 0; display: flex; flex-direction: column; gap: 8px; background: #efeae2; }
.wa-tag { align-self: center; font-size: 12px; color: var(--muted); }
.wa-tag span { background: rgb(255 255 255 / 0.85); padding: 3px 10px; border-radius: 6px; box-shadow: 0 1px 1px rgb(10 16 32 / 0.06); }
.wa-blase { max-width: min(78%, 560px); padding: 7px 10px 6px; border-radius: 9px; box-shadow: 0 1px 1px rgb(10 16 32 / 0.1); display: grid; gap: 2px; }
.wa-blase p { white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-blase.ein { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.wa-blase.aus { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.wa-blase.aus.team { background: #dbe8ff; }
.wa-blase.fehler { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rot) 45%, transparent); }
.wa-von { font-size: var(--fs-min); font-weight: 700; color: var(--warn); }
.wa-blase.team .wa-von { color: var(--blau); }
.wa-meta { display: flex; justify-content: flex-end; gap: 6px; font-size: var(--fs-min); color: var(--muted-2); }
.wa-status.gelesen { color: #1d9bf0; }
.wa-status.fehler { color: var(--rot); font-weight: 700; }
.wa-fehler { font-size: 12px; color: var(--rot); }
.wa-antwort { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 12px 14px; border-top: 1px solid var(--linie); background: var(--flaeche); }
.wa-antwort textarea { width: 100%; min-height: 44px; max-height: 160px; padding: 10px 12px; border: 1px solid var(--linie-2); border-radius: var(--r-control); background: var(--flaeche); resize: vertical; }
.wa-antwort textarea:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 18%, transparent); }
.wa-antwort textarea:disabled { background: var(--flaeche-2); }
.wa-antwort .knopf { align-self: stretch; }
.wa-fenster { grid-column: 1 / -1; }

.wa-verlauf-titel .klein-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sarahs KI (Stufe 2/3): Status, Übergabe ans Team, Kalender-Hinweise, Knöpfe, „Sarah schreibt …“ */
.zahl.achtung { background: var(--rot); color: #fff; }
.wa-einrichtung summary::after { margin-left: 4px; }
.wa-ki-chip { margin-left: auto; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--flaeche-3); color: var(--muted); white-space: nowrap; }
.wa-ki-chip.an { background: var(--gruen-bg); color: var(--gruen); }
.wa-ki-chip.fehler { background: var(--rot-bg); color: var(--rot); }
.wa-eintrag.achtung:not([aria-current="true"]) { box-shadow: inset 3px 0 0 var(--rot); }
.wa-eintrag-marken { display: inline-flex; align-items: center; gap: 6px; }
.wa-marke { font-size: var(--fs-min); font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--flaeche-3); color: var(--muted); white-space: nowrap; }
.wa-marke.achtung { background: var(--rot-bg); color: var(--rot); }
.wa-vorschau.tippt { color: var(--gruen); font-style: italic; }
.wa-modus { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--linie); }
.wa-modus > span { min-width: 0; flex: 1 1 240px; }
.wa-modus .knopf { flex: none; }
.wa-modus.sarah { background: color-mix(in srgb, var(--gruen) 7%, var(--flaeche)); }
.wa-modus.sarah b { color: var(--gruen); }
.wa-modus.mensch { background: color-mix(in srgb, var(--blau) 7%, var(--flaeche)); }
.wa-modus.mensch b { color: var(--blau); }
.wa-modus.achtung { background: var(--rot-bg); }
.wa-modus.achtung b { color: var(--rot); }
.wa-aktion { align-self: center; max-width: 92%; text-align: center; font-size: 12px; color: var(--warn); }
.wa-aktion > span { display: inline-block; padding: 4px 10px; border-radius: 8px; background: #fff7e0; border: 1px solid #f1e0ae; line-height: 1.45; }
.wa-aktion.verschieben, .wa-aktion.buchen, .wa-aktion.absagen { color: var(--gruen); }
.wa-aktion.verschieben > span, .wa-aktion.buchen > span, .wa-aktion.absagen > span { background: #eaf8ef; border-color: #bfe6cf; }
.wa-aktion.uebergabe { color: var(--rot); }
.wa-aktion.uebergabe > span { background: var(--rot-bg); border-color: color-mix(in srgb, var(--rot) 22%, transparent); }
.wa-aktion.modus { color: var(--muted); }
.wa-aktion.modus > span { background: rgb(255 255 255 / 0.85); border-color: transparent; }
.wa-aktion time { color: var(--muted-2); font-size: var(--fs-min); }
.wa-aktion svg { vertical-align: -2px; margin-right: 2px; }
.wa-aktion time { margin-left: 4px; }
.wa-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wa-knoepfe span { font-size: 12.5px; font-weight: 600; color: #027eb5; background: rgb(255 255 255 / 0.9); border-radius: 7px; padding: 5px 10px; box-shadow: 0 1px 1px rgb(10 16 32 / 0.08); }
.wa-knopf-antwort { font-size: var(--fs-min); color: var(--muted-2); }
.wa-punkte { display: inline-flex; gap: 4px; padding: 5px 2px 3px; }
.wa-punkte i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); animation: waPunkt 1.2s infinite ease-in-out; }
.wa-punkte i:nth-child(2) { animation-delay: 0.15s; }
.wa-punkte i:nth-child(3) { animation-delay: 0.3s; }
@keyframes waPunkt { 0%, 80%, 100% { opacity: 0.35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .wa-punkte i { animation: none; } }
.wa-termin-hinweis { margin-bottom: 12px; background: var(--gruen-bg); color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 25%, transparent); font-size: 13px; }
.wa-termin-hinweis a { color: inherit; font-weight: 600; }

/* Stufe 4: Erinnerungen, feste Adressen, Löschen */
.wa-schalter-gruppe { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.wa-adressen { flex: 1 1 420px; min-width: 0; display: grid; gap: 10px; }
.wa-adressen .feld { min-width: 0; }
.wa-adresse a.knopf { text-decoration: none; }
.wa-aktion.bestaetigt { color: var(--gruen); }
.wa-aktion.bestaetigt > span { background: #eaf8ef; border-color: #bfe6cf; }
.wa-aktion.kann_nicht { color: var(--rot); }
.wa-aktion.kann_nicht > span { background: var(--rot-bg); border-color: color-mix(in srgb, var(--rot) 22%, transparent); }
.wa-loeschen { color: var(--rot) !important; }

@media (max-width: 760px) {
  .wa-bereich.mit-gespraech > .seitenkopf, .wa-bereich.mit-gespraech > .wa-oben, .wa-bereich.mit-gespraech > .hinweis { display: none; }
  .wa-raster { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .wa-raster.mit-gespraech { height: max(420px, calc(100dvh - var(--wa-oben, 160px) - 12px)); }
  .wa-raster.mit-gespraech .wa-seite { display: none; }
  .wa-raster:not(.mit-gespraech) .wa-verlauf { display: none; }
  .wa-verlauf { height: 100%; min-height: 0; }
  .wa-zurueck { display: inline-flex !important; }
  .wa-blase { max-width: 88%; }
  .wa-verlauf-kopf .knopf:not(.wa-zurueck) { padding: 5px 9px; }
}

/* ---- Sarah: Chef-Modus (Team-Nummern mit vollen Rechten) ---- */
.wa-chef { margin-bottom: 14px; }
.wa-chef summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; cursor: pointer; list-style: none; }
.wa-chef summary::-webkit-details-marker { display: none; }
.wa-chef summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted-2); border-bottom: 2px solid var(--muted-2); transform: rotate(45deg); transition: transform 0.15s; }
.wa-chef[open] summary::after { transform: rotate(-135deg); }
.wa-chef-zeichen { width: 22px; height: 22px; border-radius: 6px; background: var(--marke-tief); color: var(--marke-hell); display: grid; place-items: center; font-size: 12px; flex: none; }
.wa-chef-in { padding: 14px 16px 16px; border-top: 1px solid var(--linie); display: grid; gap: 12px; }
.wa-chef-in > .klein-text { max-width: 78ch; }
.wa-chef-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wa-chef-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: var(--r-control); background: var(--flaeche-2); }
.wa-chef-wer { display: grid; flex: 1; min-width: 0; }
.wa-chef-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.wa-chef-form .feld { flex: 1 1 200px; display: grid; gap: 4px; }
.wa-chef-form .knopf { min-height: 40px; }
.wa-marke.chef { background: var(--marke-tief); color: #fff; }
.wa-modus.chef { background: var(--marke-bg); }
.wa-modus.chef b { color: var(--marke-tief); }
@media (max-width: 760px) {
  .wa-chef-form .knopf { width: 100%; }
}

/* ---- Reiter Sarah: Kopf in einer Zeile, Chat bis zum unteren Rand, kompakte Nachrichten (mind. ~10 auf einen Blick) ---- */
main:has(> .wa-bereich) { padding-top: 12px; padding-bottom: 12px; }
.wa-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 10px; }
.wa-kopf .titel { flex: none; font-size: 24px; }
.wa-kopf .wa-schalter-gruppe { flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.wa-oben { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
/* Aufgeklappte Einstellungen bekommen eine eigene, volle Zeile */
.wa-oben:has(> details[open]) { flex-basis: 100%; }
.wa-oben > details { margin-bottom: 0; min-width: 0; }
.wa-oben > details[open] { grid-column: 1 / -1; }
/* Zugeklappt eine Zeile: Zusatztext wird bei wenig Platz gekürzt (aufgeklappt steht alles im Inhalt) */
.wa-oben > details > summary { flex-wrap: nowrap; min-width: 0; padding: 8px 12px; }
.wa-oben > details > summary > b { flex: none; white-space: nowrap; }
.wa-oben > details > summary::after { flex: none; }
.wa-oben > details > summary > .klein-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-oben .wa-ki-chip { margin-left: 0; flex: none; }

/* Chat: schlanker Kopf mit Statuszeile (Sarah antwortet / übergeben / Team) und Eingabe */
.wa-verlauf-kopf { padding: 6px 12px; gap: 6px 8px; flex-wrap: wrap; }
.wa-verlauf-kopf .av { width: 32px; height: 32px; font-size: 12px; }
.wa-verlauf-titel b { font-size: 14px; }
.wa-verlauf-kopf .wa-modus { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; gap: 8px; padding: 2px 3px 2px 10px; border: 0; border-radius: 999px; font-size: 12.5px; }
.wa-verlauf-kopf .wa-modus > span { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-modus .klein-text { display: none; }
.wa-verlauf-kopf .wa-modus .knopf { min-height: 26px; padding: 2px 10px; font-size: 12.5px; }
.wa-antwort { padding: 6px 12px; gap: 3px 8px; }
.wa-antwort textarea { min-height: 34px; padding: 6px 10px; font-size: 13px; line-height: 1.4; }
.wa-antwort .knopf { min-height: 34px; }
.wa-fenster { font-size: var(--fs-min); }

/* Nachrichten kompakt: Absender in der ersten Zeile, Uhrzeit rechts in der letzten Zeile (wie bei WhatsApp) */
.wa-nachrichten { padding: 6px 12px; gap: 3px; }
.wa-tag { margin: 2px 0; font-size: var(--fs-min); }
.wa-tag span { padding: 1px 8px; }
.wa-blase { --blase: #fff; display: block; position: relative; max-width: min(80%, 720px); padding: 3px 8px; font-size: 13px; line-height: 1.35; }
.wa-blase.aus { --blase: #d9fdd3; }
.wa-blase.aus.team { --blase: #dbe8ff; }
.wa-text { overflow-wrap: anywhere; }
.wa-text::after { content: ""; display: inline-block; width: 64px; height: 1px; }
.wa-blase.lang .wa-text::after { width: 124px; }
.wa-von { display: inline; margin-right: 4px; font-size: var(--fs-min); }
.wa-blase p { display: inline; }
.wa-meta { position: absolute; right: 7px; bottom: 3px; display: flex; align-items: center; gap: 5px; font-size: var(--fs-min); line-height: 1.2; padding-left: 16px; background: linear-gradient(to right, transparent, var(--blase) 14px); border-radius: 0 0 8px 0; }
.wa-knoepfe { gap: 5px; margin-top: 3px; }
.wa-knoepfe span { font-size: 12px; padding: 3px 9px; }
.wa-knopf-antwort, .wa-fehler { display: block; }
/* Mit Knöpfen oder Fehlertext steht die Uhrzeit in einer eigenen Zeile */
.wa-blase:has(.wa-knoepfe, .wa-fehler, .wa-knopf-antwort) .wa-meta { position: static; justify-content: flex-end; padding-left: 0; background: none; margin-top: 2px; }
.wa-blase:has(.wa-knoepfe, .wa-fehler, .wa-knopf-antwort) .wa-text::after { width: 0; }
/* Kompakte Ansicht: lange Nachrichten auf 2 Zeilen – Klick (oder „mehr“) klappt auf */
.wa-kompakt .wa-blase.lang:not(.auf) .wa-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.wa-kompakt .wa-blase.lang { cursor: pointer; }
.wa-mehr { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--blau); cursor: pointer; }
.wa-mehr:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 3px; }
.wa-aktion { font-size: var(--fs-min); max-width: 100%; }
.wa-aktion > span { padding: 1px 8px; line-height: 1.35; }
.wa-kompakt .wa-aktion > span { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }

/* Tablet: schmalere Liste */
@media (min-width: 761px) and (max-width: 1100px) { .wa-raster { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); } }
@media (max-width: 760px) {
  .wa-oben { grid-template-columns: minmax(0, 1fr); flex-basis: 100%; }
  .wa-kopf .wa-schalter-gruppe { flex-direction: column; align-items: flex-start; gap: 8px; }
  .wa-blase { max-width: 88%; }
  /* Name bekommt Platz, die Statuszeile rutscht bei Bedarf in die zweite Reihe */
  .wa-verlauf-titel { flex: 1 1 140px; }
}

/* Übergabe von Sarah: alle Infos fürs Team direkt über dem Verlauf (zuklappbar) */
.wa-uebergabe { flex: none; margin: 0; padding: 6px 14px 8px; background: var(--rot-bg); border-bottom: 1px solid color-mix(in srgb, var(--rot) 22%, transparent); font-size: 12.5px; max-height: 38%; overflow-y: auto; }
.wa-uebergabe > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; list-style-position: inside; }
.wa-uebergabe > summary b { color: var(--rot); }
.wa-uebergabe > summary span { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.wa-uebergabe dl { margin: 6px 0 0; display: grid; gap: 3px; }
.wa-uebergabe dl > div { display: grid; grid-template-columns: 112px 1fr; gap: 8px; }
.wa-uebergabe dt { color: var(--muted); }
.wa-uebergabe dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .wa-uebergabe dl > div { grid-template-columns: 1fr; gap: 0; } }
.px-freigabe { margin: 4px 0 0; }

/* =====================================================================================================================
 * Mobil (Handy) – nach Material Design 3 und web.dev (Mobil-Überarbeitung 10.10.2026)
 * Breiten wie Material „Window Size Classes“: kompakt < 600 px · mittel 600–839 px · groß ab 840 px.
 * Neue Mobil-Regeln nur mit diesen Grenzen (bzw. pointer: coarse = Touch). Ab 840 px mit Maus bleibt alles wie oben.
 * Touch: jede Tippfläche mind. 48 × 48 px (--tipp), Eingabefelder 16 px (sonst zoomt iOS beim Antippen).
 * Kompakt: Kopfleiste 56 px, Navigationsleiste unten (--nav-h), kein Text unter 12 px, lange Dialoge im Vollbild.
 * Ältere Grenzen (520/560/640/700/760/860/900/960/1000/1100 px) bleiben vorerst; neue Regeln nur mit 600/840.
 * ===================================================================================================================== */
:root {
  --tipp: 48px;                                  /* Mindestgröße einer Tippfläche (Material, web.dev) */
  --rand-oben: env(safe-area-inset-top, 0px);    /* Notch / Statusleiste (iPhone, App-Modus) */
  --rand-unten: env(safe-area-inset-bottom, 0px);/* Home-Balken */
  --rand-links: env(safe-area-inset-left, 0px);
  --rand-rechts: env(safe-area-inset-right, 0px);
  --nav-h: 0px;                                  /* Navigationsleiste unten (nur kompakt) */
  --vv-h: 100dvh;                                /* sichtbare Höhe; bei offener Tastatur kleiner (app.js → visualViewport) */
}
.nav-symbol, .kopf-menue { display: none; }

/* Sichtbare Höhe statt 100vh (mobile Browserleisten); auf dem Desktop ist dvh = vh */
body { min-height: 100dvh; }
body.kalender-voll { height: 100dvh; }
body.kalender-voll main { height: calc(100dvh - 56px); }
.kal-scroll { max-height: calc(100dvh - 250px); }
.bspalte { max-height: calc(100dvh - 264px); }
.dialog { max-height: 92dvh; }
.neu-menu.blatt { max-height: 85dvh; }

/* ---- Touch: Tippflächen 48 px, Eingabefelder 16 px ---- */
@media (pointer: coarse) {
  :root { --h-control: var(--tipp); --h-klein: var(--tipp); }
  .knopf, .knopf.klein, .kal-nav .knopf.klein { min-height: var(--tipp); }
  .icon, .kal-nav .icon, .lp-zeile .icon, .th-extra .icon, .ku-weg { width: var(--tipp); height: var(--tipp); }
  .feld input, .feld select, .steuer, .suche input, .th-filter input, .th-filter select, .lp-zeile input:not([type="checkbox"]), .lp-zeile select { min-height: var(--tipp); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea { font-size: 16px !important; }
  .chip, .seg button, .leiste .rechts .seg button, .werkzeuge .seg button, .kal-farbe .seg button, .th-seg button, .px-chip, .schalter-chip span { min-height: var(--tipp); }
  .chip { padding: 2px 14px; }
  .px-note button { width: var(--tipp); height: var(--tipp); }
  .wh-tag { width: var(--tipp); height: var(--tipp); }
  .nm-link { min-height: var(--tipp); }
  .kopie button, .terminliste li button, .link-knopf { min-height: var(--tipp); padding: 4px 12px; }
  .check { align-items: center; min-height: var(--tipp); }
  .check input { width: 22px; height: 22px; margin-top: 0; }
  details > summary { padding-block: 12px; }
  /* Kein „hängender“ Hover auf Touch */
  .ev:hover { box-shadow: inset 3px 0 0 var(--f), inset 0 0 0 1px color-mix(in srgb, var(--f) 20%, transparent); }
}

/* ---- Mittel und kompakt (< 840 px) sowie Handy quer: Kopfleiste einzeilig – Sync als Punkt, Konto-Menü statt „Abmelden“ ---- */
@media (max-width: 839px), (pointer: coarse) and (max-height: 479px) {
  .kopf-in { flex-wrap: nowrap; row-gap: 0; padding: var(--rand-oben) max(4px, var(--rand-rechts)) 0 max(16px, var(--rand-links)); gap: 8px; min-height: calc(56px + var(--rand-oben)); }
  .kopf-rechts { order: 0; gap: 0; flex-wrap: nowrap; margin-left: auto; }
  .tabs { order: 0; width: auto; padding-bottom: 0; }
  .tabs a { flex: none; height: 40px; }
  .sync { width: var(--tipp); height: var(--tipp); max-width: none; padding: 0; justify-content: center; border: 0; background: none; border-radius: 50%; }
  .sync:hover { background: rgb(255 255 255 / 0.12); }
  .sync .punkt { width: 10px; height: 10px; }
  #syncText { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #abmelden, #adminWechseln, .konto-name { display: none !important; }
  .kopf-menue { display: inline-grid; place-items: center; width: var(--tipp); height: var(--tipp); border: 0; border-radius: 50%; background: none; color: var(--auf-marke); flex: none; }
  .kopf-menue:hover { background: rgb(255 255 255 / 0.12); }
  .admin-marke { margin-right: 4px; }
}

/* ---- Kompakt (< 600 px): Navigationsleiste unten (Material „Navigation bar“), Inhalt darüber ---- */
@media (max-width: 599px) {
  :root { --nav-h: 64px; --fs-label: 12px; --fs-klein: 13px; }
  body:is(.tastatur, .ohne-nav) { --nav-h: 0px; }
  .kopf-in { gap: 4px; padding-left: max(12px, var(--rand-links)); }
  .marke { font-size: 17px; min-height: var(--tipp); }
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: visible; align-self: auto;
    height: calc(var(--nav-h) + var(--rand-unten)); padding: 0 var(--rand-rechts) var(--rand-unten) var(--rand-links); background: var(--flaeche); border-top: 1px solid var(--linie); box-shadow: 0 -2px 8px rgb(16 24 40 / 0.04); }
  body:is(.tastatur, .ohne-nav) .tabs { display: none; }
  .tabs a { flex-direction: column; justify-content: center; gap: 2px; height: var(--nav-h); padding: 0; border-radius: 0; color: var(--muted); font-size: 12px; font-weight: 600; background: none; box-shadow: none; }
  .tabs a:hover { color: var(--ink); background: none; }
  .tabs a[aria-current="page"] { color: var(--marke-tief); background: none; box-shadow: none; }
  .tabs a:focus-visible { outline: 2px solid var(--blau); outline-offset: -4px; border-radius: 12px; }
  .nav-symbol { display: block; width: 56px; height: 30px; padding: 3px 16px; border-radius: 15px; flex: none; transition: background 0.15s; }
  .tabs a[aria-current="page"] .nav-symbol { background: var(--marke-bg); color: var(--marke-tief); }
  .tabs .zahl { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 12px; background: var(--rot); color: #fff; box-shadow: 0 0 0 2px var(--flaeche); }
  main { padding: 12px max(12px, var(--rand-rechts)) calc(var(--nav-h) + var(--rand-unten) + 24px) max(12px, var(--rand-links)); }
  .toast-ort { left: 12px; right: 12px; max-width: none; bottom: calc(var(--nav-h) + var(--rand-unten) + 12px); }
}

/* ---- Auswahlblätter (Konto-Menü, Filter, Stand ändern …): Blatt von unten auf dem Handy, sonst kleiner Dialog ---- */
.dialog.blatt, .dialog.klein { max-width: 460px; }
.blatt-titel { flex: 1; min-width: 0; display: grid; gap: 2px; }
.blatt-titel h2 { font-family: var(--display); font-size: 18px; font-weight: 650; outline: none; overflow-wrap: anywhere; }
.blatt-liste { display: grid; gap: 2px; margin: -6px -8px 0; }
.blatt-eintrag { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; text-align: left; color: var(--ink); }
.blatt-eintrag:hover { background: var(--hover); }
.blatt-eintrag:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
.blatt-eintrag > span:last-child { display: grid; min-width: 0; }
.blatt-eintrag b { font-weight: 600; font-size: 15px; }
.blatt-eintrag small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blatt-eintrag.gefahr { color: var(--rot); }
.blatt-eintrag[aria-current="true"] { background: var(--marke-bg); color: var(--marke-tief); }
.blatt-symbol { width: 24px; height: 24px; display: grid; place-items: center; flex: none; color: var(--muted); }
.blatt-eintrag.gefahr .blatt-symbol { color: var(--rot); }
.sync-symbol .punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--muted-2); }
.sync-symbol.ok .punkt { background: #22b16a; box-shadow: 0 0 0 4px color-mix(in srgb, #22b16a 20%, transparent); }
.sync-symbol.fehler .punkt { background: var(--warn-akzent); }
.blatt-abschnitt { display: grid; gap: 8px; }
.blatt-abschnitt > .label { font-size: 13px; font-weight: 600; color: var(--muted); }
.blatt-abschnitt .seg { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
.blatt-abschnitt .seg button { flex: 1 0 auto; justify-content: center; }
.blatt-abschnitt .chipreihe { gap: 8px; }
.blatt-abschnitt select { width: 100%; }

@media (max-width: 599px) {
  /* Blatt von unten mit Griff; die Aktionen bleiben unten erreichbar */
  .dialog.blatt, .dialog.klein { max-height: min(85dvh, var(--vv-h)); padding: 8px 16px calc(16px + var(--rand-unten)); border-radius: 20px 20px 0 0; }
  .dialog.blatt::before, .dialog.klein::before { content: ""; justify-self: center; width: 32px; height: 4px; border-radius: 2px; background: var(--linie-2); margin-bottom: -4px; }
  .dialog.blatt > .dialog-kopf, .dialog.klein > .dialog-kopf { border-bottom: 0; padding-bottom: 0; }

  /* Lange Dialoge: Vollbild (Material „Full-screen dialog“) – Kopf oben und Aktionen unten angeheftet */
  .dialog-schleier:not(.mit-blatt):has(> .dialog:not(.klein)) { align-items: stretch; }
  .dialog:not(.blatt):not(.klein) { max-width: none; height: var(--vv-h); max-height: var(--vv-h); border-radius: 0; padding: 0 16px; gap: 16px; align-content: start; animation: hoch 0.18s ease-out; overscroll-behavior: contain; }
  .dialog:not(.blatt):not(.klein) > .dialog-kopf { position: sticky; top: 0; z-index: 5; margin: 0 -16px; padding: calc(4px + var(--rand-oben)) 4px 4px 16px; min-height: calc(56px + var(--rand-oben)); background: var(--flaeche); }
  .dialog:not(.blatt):not(.klein) > .dialog-kopf .icon { border: 0; box-shadow: none; order: 2; }
  .dialog:not(.blatt):not(.klein) > .aktionen:last-child { position: sticky; bottom: 0; z-index: 5; margin: auto -16px 0; padding: 12px 16px calc(12px + var(--rand-unten)); background: var(--flaeche); box-shadow: 0 -4px 12px -8px rgb(16 24 40 / 0.2); }
  .dialog:not(.blatt):not(.klein) > :last-child:not(.aktionen):not(.px-fuss) { margin-bottom: calc(24px + var(--rand-unten)); }
  .dialog:not(.blatt):not(.klein) .px-fuss { bottom: 0; margin: auto -16px 0; padding: 12px 16px calc(12px + var(--rand-unten)); }
  .dialog > .aktionen:last-child .knopf { flex: 1 1 auto; }
  .dialog > .aktionen:last-child .knopf.gefahr { margin-left: 0; }
}

/* ---- Kalender auf dem Handy (kompakt und quer): Leiste, Liste (Agenda), Raster mit fester Zeilenhöhe, „+“ unten rechts ---- */
.kal-mobil { overflow: hidden; }
.kal-leiste-m { display: grid; grid-template-columns: var(--tipp) minmax(0, 1fr) var(--tipp) var(--tipp); grid-template-areas: "zurueck titel vor filter" "ansicht ansicht heute heute"; align-items: center; gap: 6px 8px; padding: 6px 8px 8px; }
.kal-leiste-m #zurueck { grid-area: zurueck; }
.kal-leiste-m #vor { grid-area: vor; }
.kal-leiste-m .icon { border: 0; box-shadow: none; background: none; }
.kal-leiste-m .icon:hover { background: var(--hover); }
.kal-titel-m { grid-area: titel; min-width: 0; margin: 0; font-size: inherit; }
.kal-datum { display: inline-grid; grid-template-columns: minmax(0, auto) auto; grid-template-areas: "datum pfeil" "kw pfeil"; align-items: center; column-gap: 4px; width: 100%; min-height: var(--tipp); padding: 2px 6px; border: 0; border-radius: var(--r-control); background: none; color: var(--ink); text-align: left; justify-content: center; }
.kal-datum:hover { background: var(--hover); }
.kal-datum span { grid-area: datum; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; font-variant-numeric: tabular-nums; }
.kal-datum small { grid-area: kw; font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.2; }
.kal-datum svg { grid-area: pfeil; color: var(--muted); }
.kal-datum-wahl { position: absolute; left: 50%; top: 56px; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.kal-ansicht-m { grid-area: ansicht; display: flex; min-width: 0; }
.kal-ansicht-m button { flex: 1 1 0; justify-content: center; padding-inline: 6px; }
.kal-leiste-m #heute { grid-area: heute; min-height: var(--tipp); }
.kal-filter-knopf { grid-area: filter; position: relative; }
.kal-filter-knopf.aktiv { color: var(--blau); }
.kal-filter-knopf.aktiv::after { content: ""; position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--blau); box-shadow: 0 0 0 2px var(--flaeche); }
.kal-scroll.kal-scroll-m { min-height: 0; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--linie); }
.kal-scroll-m::after { content: ""; display: block; height: 76px; } /* Platz unter dem letzten Eintrag für den „+“-Knopf */
.kal.kal-m { grid-template-columns: 44px repeat(var(--spalten), minmax(0, 1fr)); min-width: 0; }
.kal-m .kal-zeiten span { right: 6px; }
.kal-m .kal-kopf.kk-tagkopf { min-height: 52px; padding: 4px 2px; }
.kal-m .kal-kopf .kk-tag { width: 28px; height: 28px; font-size: 16px; }
.kal-m .kk-n { display: none; }
.kal-1 > .kal-kopf { display: none; }
/* Ein Tag (Handy): ohne Tageskopf – Abwesenheiten aber als schmale Zeile über dem Raster (wie „ganztägig“ in Kalender-Apps) */
.kal-1:has(.abw-kopf) > .kal-kopf { display: grid; min-height: 0; padding: 4px 6px; }
.kal-1 > .kal-kopf.kk-tagkopf > :not(.abw-kopf) { display: none; }
.kal-1 .abw-kopf { margin-top: 0; }
.kal-1 .kk-tagkopf .abw-chip { justify-content: flex-start; }
.kal-m .ev { padding: 2px 4px 2px 7px; }
@keyframes reinRechts { from { transform: translateX(28px); opacity: 0.35; } }
@keyframes reinLinks { from { transform: translateX(-28px); opacity: 0.35; } }
.rein-rechts { animation: reinRechts 0.18s ease-out; }
.rein-links { animation: reinLinks 0.18s ease-out; }
/* Liste (Agenda): Tag links (heute blau), Termine als Karten in der Farbe der Terminart */
.agd { padding: 2px 10px 8px 6px; }
.agd-tag { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.agd-tag:last-child { border-bottom: 0; }
.agd-kopf { position: sticky; top: 6px; align-self: start; display: grid; justify-items: center; gap: 2px; font-size: inherit; font-weight: 400; }
.agd-wt { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
.agd-zahl { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.agd-tag.heute .agd-wt { color: var(--blau); }
.agd-tag.heute .agd-zahl { background: var(--blau); color: #fff; }
.agd-tag.vergangen :is(.agd-wt, .agd-zahl) { color: var(--muted-2); }
.agd-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.agd-eintrag { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; min-height: 56px; padding: 8px 10px 8px 12px; border: 0; border-radius: 10px; text-align: left; color: var(--ink);
  background: color-mix(in srgb, var(--f) 9%, var(--flaeche)); box-shadow: inset 4px 0 0 var(--f), inset 0 0 0 1px color-mix(in srgb, var(--f) 16%, transparent); }
.agd-eintrag:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.agd-eintrag.vorbei { opacity: 0.62; }
.agd-eintrag.chat { background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--f) 7%, transparent) 7px 14px); }
/* Abwesenheit in der Liste: ruhige, getönte Zeile über den Terminen des Tages */
.agd-abw { display: grid; gap: 4px; }
.abw-zeile { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 10px; text-align: left; cursor: pointer;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--fl) 11%, var(--flaeche)) 0 7px, color-mix(in srgb, var(--fl) 5%, var(--flaeche)) 7px 14px);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--fl) 45%, transparent); color: color-mix(in srgb, var(--fl) 55%, var(--ink)); font: 600 14px/1.3 var(--schrift); }
.abw-zeile span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abw-zeile small { margin-left: auto; flex: none; font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.abw-zeile:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.agd-zeit { display: grid; font-variant-numeric: tabular-nums; line-height: 1.3; }
.agd-zeit b { font-size: 14px; font-weight: 650; }
.agd-zeit small { font-size: 12px; color: var(--muted); }
.agd-text { display: grid; gap: 2px; min-width: 0; }
.agd-text b { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: color-mix(in srgb, var(--f) 22%, var(--ink)); }
.agd-text b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agd-text b svg { flex: none; color: var(--f); }
.agd-text small { font-size: 13px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agd-sarah { font-style: normal; color: var(--typ-ersttermin); flex: none; }
.agd-status { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.agd-leer { display: flex; align-items: center; min-height: 48px; padding: 0 4px; color: var(--muted-2); font-size: 14px; }
.agd-jetzt { position: relative; display: flex; align-items: center; height: 14px; margin: 2px 0; }
.agd-jetzt::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--rot); }
.agd-jetzt span { position: relative; padding: 0 6px; border-radius: 4px; background: var(--rot); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* „+“ – Neuer Termin (Material „FAB“), über der Navigationsleiste */
.fab { position: fixed; z-index: 35; right: calc(16px + var(--rand-rechts)); bottom: calc(var(--nav-h) + var(--rand-unten) + 16px); width: 56px; height: 56px; display: grid; place-items: center; border: 0; border-radius: 16px; background: var(--marke); color: var(--auf-marke); box-shadow: 0 8px 18px -6px rgb(16 24 40 / 0.45), 0 2px 4px rgb(16 24 40 / 0.14); }
.fab:hover { background: var(--marke-dunkel); }
.fab:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
body.tastatur .fab { display: none; }
body:has(.fab) .toast-ort { bottom: calc(var(--nav-h) + var(--rand-unten) + 84px); }
.legende-m { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; font-size: 13px; color: var(--muted); }
.legende-m li { display: flex; align-items: center; gap: 6px; }
.legende-m .punkt-f { width: 10px; height: 10px; border-radius: 3px; }
.legende-m .leg-pille { flex: none; white-space: nowrap; }
/* Handy quer: Leiste in einer Zeile */
@media (pointer: coarse) and (max-height: 479px) and (min-width: 600px) {
  .kal-leiste-m { grid-template-columns: var(--tipp) minmax(0, 1fr) var(--tipp) auto auto var(--tipp); grid-template-areas: "zurueck titel vor ansicht heute filter"; padding: 4px 8px; }
  .kal-ansicht-m button { flex: none; padding-inline: 12px; }
  main:has(> .kal-mobil) { padding-top: 6px; }
}
@media (max-width: 599px) { main:has(> .kal-mobil) { padding-bottom: 0; } }

/* ---- Kontakte auf dem Handy: Liste statt Board (Suche + Filter oben angeheftet, Stände als Chips, „+ Kontakt“) ---- */
.kl-kopf { flex-wrap: nowrap; margin-bottom: 4px; }
.kl-menue { border: 0; box-shadow: none; background: none; }
.kl-werkzeuge { position: sticky; top: calc(56px + var(--rand-oben)); z-index: 6; display: flex; gap: 8px; margin: 0 -12px; padding: 8px 12px; background: var(--bg); }
.kl-werkzeuge .suche { flex: 1 1 auto; }
.kl-filter { position: relative; flex: none; }
.kl-filter.aktiv { color: var(--blau); border-color: color-mix(in srgb, var(--blau) 45%, transparent); background: var(--blau-bg); }
.kl-filter .zahl { background: var(--blau); color: #fff; }
.kl-staende { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 12px; padding: 2px 12px 6px; }
.kl-staende::-webkit-scrollbar { display: none; }
.kl-staende .chip { flex: none; }
.kl-liste { display: grid; gap: 20px; }
.kl-gruppe { display: grid; gap: 8px; }
.kl-gruppe-kopf { display: flex; align-items: center; gap: 8px; padding: 0 2px; font-size: 13px; font-weight: 500; color: var(--muted); }
.kl-gruppe-kopf b { color: var(--ink); font-weight: 650; }
.kl-gruppe-kopf .n { margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--flaeche-3); display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.kl-karten { display: grid; gap: 8px; }
.kl-karten .bk { cursor: default; padding: 10px 12px; gap: 8px; }
.kl-karten .bk-kopf { min-height: var(--tipp); align-items: center; }
.kl-karten .bk .av { width: 36px; height: 36px; font-size: 12px; }
.kl-karten .bk-text b { font-size: 15px; }
.kl-karten .bk-text small { font-size: 13px; }
.kl-karten .bk-termin { font-size: 13px; }
.kl-karten .bk-oben { grid-template-columns: minmax(0, 1fr); }
.kl-karten .bk-wahl, .kl-karten .bk-wahl:hover { display: block; width: auto; height: auto; margin: 0; border: 0; background: none; }
.kl-karten .bk-wahl-symbol { display: none; }
.kl-karten .bk-wahl select { position: static; display: block; width: 100%; opacity: 1; min-height: var(--tipp); font-size: 16px; padding: 6px 12px; border: 1px solid var(--linie-2); border-radius: var(--r-klein); background-color: var(--flaeche-2); }
.fab.fab-text { width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 20px 0 16px; font-weight: 600; font-size: 15px; }
@media (max-width: 599px) { main:has(> .fab-text) { padding-bottom: calc(var(--nav-h) + var(--rand-unten) + 96px); } }
.neu-menu.blatt { box-shadow: 0 0 0 100vmax rgb(16 24 40 / 0.45); }
.kal.kal-m { grid-template-columns: 48px repeat(var(--spalten), minmax(0, 1fr)); }
.kal-m .kal-zeiten .jetzt-zeit { right: 2px; padding: 1px 3px; }
/* Vollbild-Dialog mit Hauptaktion oben rechts: X links, Titel, „Speichern“; unten die übrigen Aktionen (nicht angeheftet) */
@media (max-width: 599px) {
  .dialog:not(.blatt):not(.klein) > .dialog-kopf { gap: 8px; padding-left: 4px; padding-right: 12px; }
  .dialog:not(.blatt):not(.klein) > .dialog-kopf [data-dialog-zu].icon { order: -1; width: var(--tipp); min-width: var(--tipp); height: var(--tipp); flex: none; }
  .dialog:not(.blatt):not(.klein) > .dialog-kopf h2, .dialog:not(.blatt):not(.klein) > .dialog-kopf > div { flex: 1 1 auto; min-width: 0; font-size: 17px; overflow-wrap: anywhere; }
  .kopf-aktion { flex: 0 1 auto; max-width: 48%; min-height: 40px !important; padding: 6px 16px; border-radius: 999px; line-height: 1.2; }
  .dialog.mit-kopf-aktion:not(.blatt):not(.klein) > :is(.aktionen, .px-fuss):last-child { position: static; box-shadow: none; margin-top: 4px; margin-bottom: 0; padding-bottom: calc(16px + var(--rand-unten)); }
  .mit-kopf-aktion .im-kopf, .dialog:not(.blatt):not(.klein) > .aktionen > [data-dialog-zu].knopf { display: none; }
  .dialog:not(.blatt):not(.klein) > .aktionen:last-child:not(:has(> .knopf:not(.im-kopf):not([data-dialog-zu]))) { display: none; }
  .dialog:not(.blatt):not(.klein):has(> .aktionen:last-child:not(:has(> .knopf:not(.im-kopf):not([data-dialog-zu]))))::after { content: ""; height: calc(8px + var(--rand-unten)); }
  .dialog-kopf .kopf-aktion:disabled { opacity: 0.5; }
}
@media (min-width: 600px) { .kopf-aktion { display: none; } }
/* Kartei auf dem Handy und mit Touch: Reiter und Zeilen 48 px */
@media (pointer: coarse) {
  .s-tabs button { min-height: var(--tipp); }
  .px-p-zeile { min-height: var(--tipp); }
}

/* ---- Sarah auf dem Handy: Einstellungen zugeklappt, Gespräch im Vollbild (ohne Navigationsleiste), Eingabe über der Tastatur ---- */
.wa-menue { display: none !important; }
.wa-neu { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--marke); color: #fff; font-weight: 600; font-size: 14px; box-shadow: var(--schatten-hover); }
.wa-verlauf { position: relative; }
.wa-mehr { position: relative; }
.wa-mehr::after { content: ""; position: absolute; inset: -14px -10px; }
.wa-einst-m { flex-basis: 100%; }
.wa-einst-m > summary { display: flex; align-items: center; gap: 10px; min-height: var(--tipp); padding: 8px 14px; cursor: pointer; list-style: none; }
.wa-einst-m > summary::-webkit-details-marker { display: none; }
.wa-einst-m > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted-2); border-bottom: 2px solid var(--muted-2); transform: rotate(45deg); transition: transform 0.15s; flex: none; }
.wa-einst-m[open] > summary::after { transform: rotate(-135deg); }
.wa-einst-text { display: grid; min-width: 0; }
.wa-einst-text .klein-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-einst-m-in { display: grid; gap: 12px; padding: 4px 12px 14px; border-top: 1px solid var(--linie); }
.wa-einst-m-in .wa-schalter-gruppe { flex-direction: column; align-items: stretch; gap: 0; padding-top: 6px; }
.wa-einst-m-in .wa-schalter { min-height: var(--tipp); justify-content: space-between; flex-direction: row-reverse; }
.wa-einst-m-in .wa-oben { grid-template-columns: minmax(0, 1fr); }
@media (pointer: coarse) {
  .wa-schalter { min-height: var(--tipp); }
  .wa-oben > details > summary, .wa-chef summary, .wa-einrichtung summary { min-height: var(--tipp); }
  .wa-verlauf-kopf .knopf, .wa-verlauf-kopf .wa-modus .knopf { min-height: 40px; }
}
@media (max-width: 599px) {
  .wa-kopf { flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
  .wa-kopf .titel { font-size: 22px; }
  .wa-menue { display: inline-grid !important; border: 0; box-shadow: none; background: none; flex: none; }
  .wa-verlauf-kopf [data-wa-kompakt], .wa-verlauf-kopf [data-wa-kontakt], .wa-verlauf-kopf [data-wa-loeschen] { display: none !important; }
  .wa-eintrag { min-height: 72px; padding: 12px 10px; }
  /* Gespräch: randlos über die ganze Höhe (sichtbarer Bereich, bei offener Tastatur kleiner) */
  main:has(> .wa-bereich.mit-gespraech) { padding: 0; }
  .wa-bereich.mit-gespraech .wa-raster { height: calc(var(--vv-h) - var(--wa-oben, 56px)); min-height: 280px; gap: 0; }
  .wa-bereich.mit-gespraech .wa-verlauf { border: 0; border-radius: 0; box-shadow: none; }
  .wa-verlauf-kopf { padding: 4px 4px 4px 4px; gap: 4px 6px; }
  .wa-verlauf-kopf .wa-zurueck { border: 0; box-shadow: none; background: none; min-width: var(--tipp); min-height: var(--tipp); }
  .wa-verlauf-kopf .wa-modus { order: 10; flex: 1 1 100%; justify-content: space-between; border-radius: 10px; margin: 0 6px 4px; padding: 4px 4px 4px 12px; }
  .wa-verlauf-kopf .wa-modus > span { white-space: normal; }
  .wa-antwort { padding: 8px 8px calc(8px + var(--rand-unten)); gap: 8px; }
  .wa-antwort textarea { min-height: var(--tipp); border-radius: 22px; padding: 11px 16px; }
  .wa-antwort .knopf { min-width: var(--tipp); border-radius: 999px; }
  .wa-blase { max-width: 86%; font-size: 15px; }
}

/* ---- Theorie- und Kurs-Seiten auf dem Handy/Touch: Tippflächen, Kennzahlen als Raster ---- */
@media (pointer: coarse) {
  .zurueck { min-height: var(--tipp); padding-right: 12px; margin-bottom: 4px; }
  .th-ueber a, .ku-ueber a { display: inline-flex; align-items: center; min-height: var(--tipp); margin: -14px 0; }
  .th-name { min-height: var(--tipp); }
  details > summary { padding-block: 14px; }
  .kopf-aktion { position: relative; }
  .kopf-aktion::after { content: ""; position: absolute; inset: -4px -2px; }
  .wa-verlauf-kopf .wa-modus .knopf { min-height: var(--tipp); }
}
@media (max-width: 599px) {
  .wa-kompakt .wa-blase.lang:not(.auf) .wa-meta { position: static; background: none; padding-left: 0; justify-content: flex-end; margin-top: 2px; }
  .wa-kompakt .wa-blase.lang:not(.auf) .wa-text::after { width: 0; }
}

/* Kein sichtbarer Text unter 12 px (Lighthouse „Legible font sizes“): Handy hochkant und alle Touch-Geräte */
@media (max-width: 599px), (pointer: coarse) {
  small { font-size: max(12px, 0.85em); }
  .zahl, .chip .n, .seg .n, .kal-kopf span, .kk-wt, .kal-zeiten span, .ev-best-status, .ev-zeile, .ev-fl, .zeile-kopf, .raster span, .verlauf b,
  .bs-kopf .n, .bk .av, .bk-fort dt, .bk-sub, .bk-pr, .bk-mess .ampel, .bk-hinweise .tag, .kal-spalte .auswahl span, .kal-menu .km-titel, .px-eckdaten dt, .px-p-datum small,
  .px-block legend, .px-skala button, .ksuche-liste .av, .dat-block small, .th-lp li > i, .pr-schritte li, .spur-schritte li, .lp-kopf, .abs-art,
  .admin-marke, #neuTermin .pfeil, .nm-kopf, .arten-trenner, .wa-art, .wa-von, .wa-meta, .wa-marke, .wa-aktion, .wa-aktion time, .wa-knopf-antwort,
  .wa-fenster, .wa-tag, .tag, .kk-n, .legende, .leg-pille, .ev.per-wa .ev-titel::before, .ev.chat .ev-titel::before { font-size: 12px; }
  :root { --fs-label: 12px; --fs-klein: 13px; }
  body.kalender-voll :is(.chip, .kk-wt, .kk-n, .legende, #inhalt > .hinweis) { font-size: 12px; }
  .px-p-datum small, .wa-meta { font-size: 12px; }
  .abw-chip, .abw-label, .abw-label small, .kal-kopf .abw-mehr { font-size: 12px; }
}
/* Touch: weitere Tippflächen auf 48 px (auch Tablet und Handy quer) */
@media (pointer: coarse) {
  .abw-chip { min-height: 28px; font-size: 12px; }
  .abw-label { min-height: 22px; align-items: center; font-size: 12px; }
  .abw-label small { font-size: 12px; }
  .abw-zeile { min-height: var(--tipp); }
  body.kalender-voll .chip { min-height: var(--tipp); }
  .marke { min-height: var(--tipp); }
  .bk-kopf { min-height: var(--tipp); align-items: center; }
  .bk-wahl { width: var(--tipp); height: var(--tipp); margin: -10px -8px -10px 0; }
  .bk-info::after { inset: -13px; }
  .abw-chip, .abw-label { position: relative; }
  .abw-chip::after, .abw-label::after { content: ""; position: absolute; inset: -8px 0; }
  .abw-label::after { inset: -11px 0; }
  .wa-chef-form .knopf { min-height: var(--tipp); }
  .seg button { min-width: var(--tipp); justify-content: center; }
  .th-ueber a { min-width: var(--tipp); justify-content: center; }
  details > summary { min-height: var(--tipp); }
  .px-bereiche summary, .th-protokoll summary { display: flex; align-items: center; min-height: var(--tipp); padding-block: 0; }
  .link-knopf { display: inline-flex; align-items: center; min-height: var(--tipp); }
  .wa-verlauf-kopf .knopf { min-height: var(--tipp); }
  .kopf-aktion { min-height: var(--tipp) !important; }
  .nm-eintrag { min-height: 56px; }
}
@media (pointer: coarse) and (min-width: 600px) { .tabs a { height: var(--tipp); } }
/* Wischen im Kalender blättert – der Browser soll waagerechte Gesten dort nicht als „Zurück“ deuten */
.kal-scroll-m { touch-action: pan-y pinch-zoom; overscroll-behavior: contain; }

/* =====================================================================================================================
 * Brain Lab (nur Admin): Reiter „Chatbot“ · „KI-Anbieter“ · „Nutzung“ · „Kalender“ – je Fahrschule
 * ===================================================================================================================== */
:root {
  --bl-tip: #101828;           /* Tooltip im Diagramm */
  --bl-schraffur: #d0d5dd;     /* Tage ohne Erfassung */
}
.admin-brain-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 8px 4px 4px 12px; flex-wrap: wrap; }
.bl { display: grid; gap: 16px; max-width: 1180px; margin: 0 auto; }
.bl-kopf { margin-bottom: 0; }
.bl-marke { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; padding: 2px 8px; border-radius: 999px; background: var(--marke-bg); color: var(--marke-tief); font-size: var(--fs-label); font-weight: 650; letter-spacing: 0.02em; }
.bl-reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; }
.bl-reiter a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; color: var(--muted); font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bl-reiter a:hover { color: var(--ink); }
.bl-reiter a[aria-current="page"] { color: var(--blau); border-bottom-color: var(--blau); }
.bl-reiter a:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; border-radius: 6px; }
.bl-inhalt { display: grid; gap: 16px; min-width: 0; }
.bl-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bl-spalte { display: grid; gap: 16px; min-width: 0; }
.bl-karte { padding: 16px; display: grid; gap: 12px; min-width: 0; }
.bl-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.bl-karte-kopf h2 { font-size: var(--fs-abschnitt); font-weight: 650; }
.bl-karte textarea, .bl-karte input:not([type="radio"]), .bl-karte select { width: 100%; }
.bl-karte textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.bl-zaehler { justify-self: end; font-variant-numeric: tabular-nums; }
.bl-ungespeichert { align-self: center; color: var(--warn); font-weight: 600; }
.bl-karte a:not(.knopf) { color: var(--blau); }
/* Wo gilt was? */
.bl-kanaele { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }
.bl-kanaele li { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--linie); }
.bl-kanaele li:first-child { border-top: 0; padding-top: 0; }
.bl-kanaele small { color: var(--muted); font-size: var(--fs-klein); }
.bl-jn-reihe { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.bl-jn { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-klein); font-weight: 600; }
.bl-jn.ja { color: var(--gruen); }
.bl-jn.nein { color: var(--muted-2); font-weight: 500; }
.bl-details summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 4px 0; }
.bl-pre { margin-top: 8px; max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.5 var(--mono); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r-control); padding: 12px; }
.bl-schritte { display: grid; gap: 6px; padding-left: 18px; margin: 8px 0 0; font-size: var(--fs-klein); color: var(--muted); }
.bl-schritte code, .bl-karte code { font-family: var(--mono); font-size: 12px; background: var(--flaeche-3); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
/* Status-Zeile (aktiver Anbieter) */
.bl-status { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-karte); border: 1px solid; }
.bl-status > svg { flex: none; margin-top: 2px; }
.bl-status > div { display: grid; gap: 2px; min-width: 0; }
.bl-status small { font-size: var(--fs-klein); }
.bl-status.ok { background: var(--gruen-bg); color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 25%, transparent); }
.bl-status.warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn-akzent) 30%, transparent); }
/* Anbieter-Auswahl */
.bl-anbieter { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bl-anbieter-karte { display: flex; gap: 10px; align-items: center; min-height: 56px; padding: 8px 12px; border: 1px solid var(--linie-2); border-radius: var(--r-control); background: var(--flaeche); cursor: pointer; }
.bl-anbieter-karte:hover { background: var(--hover); }
.bl-anbieter-karte:has(input:checked) { border-color: var(--blau); background: var(--blau-bg); box-shadow: 0 0 0 1px var(--blau); }
.bl-anbieter-karte:has(input:focus-visible) { outline: 2px solid var(--blau); outline-offset: 2px; }
.bl-anbieter-karte input { width: 18px; height: 18px; accent-color: var(--blau); flex: none; }
.bl-anbieter-karte span { display: grid; gap: 1px; min-width: 0; }
.bl-anbieter-karte small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-klein); }
.bl-modell { display: flex; gap: 8px; }
.bl-modell input { flex: 1; min-width: 0; }
.bl-modell .knopf { flex: none; }
.bl-schluessel { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linie); }
.bl-schluessel > div:first-child { display: grid; gap: 2px; }
.bl-schluessel small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-klein); }
.bl-schluessel-form { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-schluessel-form input { flex: 1 1 200px; min-width: 0; min-height: var(--h-control); padding: 6px 11px; border: 1px solid var(--linie-2); border-radius: var(--r-control); background-color: var(--flaeche); }
.bl-schluessel-form input:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 18%, transparent); }
/* Nutzung */
.bl-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.bl-kz > div small { color: var(--muted); font-size: var(--fs-klein); }
.bl-diagramme { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.bl-diagramm { margin: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 14px 16px 10px; display: grid; gap: 12px; min-width: 0; }
.bl-diagramm figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: var(--fs-abschnitt); }
.bl-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-klein); color: var(--muted); }
.bl-legende span { display: inline-flex; align-items: center; gap: 6px; }
.bl-legende i { width: 10px; height: 10px; border-radius: 3px; background: var(--f); }
.bl-legende i.schraffur, .bl-tag.ohne .bl-saeule { background: repeating-linear-gradient(45deg, var(--bl-schraffur) 0 2px, transparent 2px 6px); }
.bl-plot { --plot-h: 160px; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.bl-achse { display: flex; flex-direction: column; justify-content: space-between; height: var(--plot-h); font-size: 12px; color: var(--muted-2); text-align: right; font-variant-numeric: tabular-nums; line-height: 1; }
.bl-achse span:first-child { transform: translateY(-50%); }
.bl-achse span:last-child { transform: translateY(50%); }
.bl-saeulen { position: relative; display: flex; align-items: stretch; gap: 2px; min-width: 0; }
/* Raster: Linie oben und in der Mitte, Grundlinie unten – hinter den Säulen */
.bl-saeulen::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--plot-h); background: linear-gradient(var(--linie) 1px, transparent 1px) 0 0 / 100% 50%; border-bottom: 1px solid var(--linie-2); pointer-events: none; }
.bl-tag { position: relative; flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: var(--plot-h) auto; justify-items: center; gap: 6px; }
.bl-saeule { width: min(24px, 70%); height: var(--plot-h); display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.bl-tag.ohne .bl-saeule { width: 100%; border-radius: 4px 4px 0 0; opacity: 0.8; }
.bl-saeule span { display: block; background: var(--f); min-height: 2px; }
.bl-saeule span:first-child { border-radius: 4px 4px 0 0; }
.bl-tag small { font-size: 12px; color: var(--muted-2); white-space: nowrap; font-variant-numeric: tabular-nums; min-height: 1.3em; }
.bl-saeulen.viele .bl-tag small { overflow: visible; }
.bl-tag:hover .bl-saeule span { filter: brightness(1.08); }
.bl-tip { position: absolute; top: -8px; transform: translate(-50%, -100%); background: var(--bl-tip); color: #fff; font-size: 12px; line-height: 1.4; padding: 6px 10px; border-radius: 6px; pointer-events: none; width: max-content; max-width: min(320px, 100%); z-index: 5; box-shadow: var(--schatten-hover); }
.bl-tabelle-rahmen { overflow-x: auto; }
/* Hinweis auf verdeckte Spalten, gesetzt von ueberlaufMarkieren() (nur bei echtem Überlauf) */
:is(.bl-tabelle-rahmen, .bl-tabelle-scroll).ueberlauf::after { content: "Seitlich scrollen für mehr"; display: block; position: sticky; left: 0; width: max-content; max-width: 100%; padding: 6px 10px 2px; font-size: var(--fs-min, 12px); color: var(--muted); }
:is(.bl-tabelle-rahmen, .bl-tabelle-scroll).ueberlauf.ueberlauf-rest { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
@media (pointer: coarse) { :is(.bl-tabelle-rahmen, .bl-tabelle-scroll).ueberlauf::after { content: "Seitlich wischen für mehr"; } }
.bl-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.bl-tabelle th, .bl-tabelle td { padding: 8px 10px; border-top: 1px solid var(--linie); text-align: right; white-space: nowrap; }
.bl-tabelle th[scope="row"], .bl-tabelle thead th:first-child { text-align: left; font-weight: 600; white-space: normal; }
.bl-tabelle thead th { border-top: 0; font-size: 12px; color: var(--muted); font-weight: 600; }
.bl-fuss { max-width: 72ch; }
/* Kalender */
.bl-vergleich { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; }
.bl-vergleich > div { background: var(--flaeche); padding: 12px 16px; display: grid; gap: 4px; }
.bl-vergleich b { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 899px) { .bl-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  /* Navigationsleiste unten: 4 Ziele für den Admin, sonst 3 */
  .tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .bl-karte { padding: 14px; }
  .bl-reiter { margin: 0 -12px; padding: 0 8px; }
  .bl-reiter a { min-height: var(--tipp); padding: 0 12px; }
  .bl-modell { flex-wrap: wrap; }
  .bl-modell input { flex: 1 1 100%; }
  .bl-modell .knopf, .bl-schluessel-form .knopf { flex: 1 1 auto; }
  .bl-diagramme { grid-template-columns: minmax(0, 1fr); }
  .bl-plot { --plot-h: 140px; }
  .bl-kz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-brain-zeile .knopf { min-height: var(--tipp); }
}
@media (pointer: coarse) { .bl-reiter a { min-height: var(--tipp); } .bl-anbieter-karte { min-height: var(--tipp); } }

/* Brain Lab: KI und Verbrauch gemeinsam, Auswahl des Kunden im Seitenkopf. */
.bl-schulwahl { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:12px 0; }
.bl-schulwahl label { font-weight:600; }
.bl-schulwahl select { min-width:240px; max-width:100%; padding:10px 12px; font:inherit; }
.bl-schulwahl .hinweis { flex-basis:100%; }
.bl-ki-kompakt { grid-template-columns:minmax(0, 1.5fr) minmax(280px, 1fr); }
.bl-ki-kompakt .bl-anbieter { grid-template-columns:repeat(4,minmax(0,1fr)); }
.bl-ki-kompakt .bl-anbieter-karte { padding:12px; }
.bl-key-details > summary { cursor:pointer; font-weight:600; display:flex; flex-wrap:wrap; gap:8px; }
.bl-key-inhalt { display:grid; gap:12px; padding-top:16px; }
.bl-auswahl-hinweis { color:var(--blau); }
.bl-verbrauch { display:grid; gap:12px; padding-top:12px; border-top:1px solid var(--linie); }
#blNutzungInhalt { display:grid; gap:12px; }
.bl-diagramm-einzeln { grid-template-columns:minmax(0,1fr); }
.bl-verbrauch .bl-plot { height:140px; }
.bl-alter-fehler { padding:10px 14px; background:var(--flaeche); border:1px solid var(--linie); border-radius:8px; }
@media(max-width:1100px) { .bl-ki-kompakt .bl-anbieter { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:899px) { .bl-ki-kompakt { grid-template-columns:minmax(0,1fr); } }
@media(max-width:599px) { .bl-schulwahl select { width:100%; font-size:16px; min-height:48px; } }

.bl-ki-kompakt { grid-template-columns:minmax(0,1fr); gap:10px; }
.bl-ki-kompakt #blKiForm { gap:10px; }
.bl-ki-kompakt .bl-anbieter-karte { min-height:60px; }
.bl-ki-kompakt .bl-key-details { padding:12px 16px; }
.bl-ki-kompakt .bl-modell { max-width:780px; }
.bl-schulwahl { padding:6px 0; }

/* Kontextübersicht: lange Regeln und JSON auf jeder Bildschirmgröße lesbar. */
.bl-kontext-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32rem; overflow: auto; font: inherit; font-size: .875rem; line-height: 1.6; padding: .75rem; background: var(--hintergrund, #f5f7fa); border-radius: .5rem; }
.bl-tabelle-scroll { max-width: 100%; overflow-x: auto; }
.bl-reiter { flex-wrap: wrap; }

.bl-kontext-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.bl-kontext-zahlen > div { padding: .8rem; border: 1px solid #dfe5ec; border-radius: .65rem; background: #f7faf9; }
.bl-kontext-zahlen span, .bl-kontext-zahlen b, .bl-kontext-zahlen small { display: block; }
.bl-kontext-zahlen b { font-size: 1.5rem; margin: .25rem 0; }
.bl-kontext-zahlen small { color: #64748b; }
@media (max-width: 600px) { .bl-kontext-zahlen { grid-template-columns: 1fr; } }

.bl-kontext-karte { grid-template-columns: minmax(0, 1fr); }
.bl-kontext-karte > * { min-width: 0; overflow-wrap: anywhere; }

/* Schulangebote und verständliche Kontextquellen */
.bl-auswahl-reihe { display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin:.75rem 0; }
.bl-auswahl { display:flex; align-items:center; gap:.4rem; font-size:.875rem; }
.bl-auswahl input { width:1rem; height:1rem; accent-color:var(--marke, #187b52); }
/* Buchungsvorlauf: kleines Zahlenfeld, Einheit daneben (auch auf dem Handy) */
.bl-vorlauf { display:flex; align-items:center; gap:8px; }
.bl-karte .bl-vorlauf input { width:88px; flex:none; }
.bl-vorlauf span { font-size:.875rem; white-space:nowrap; overflow-wrap:normal; }
.bl-kontext-karte fieldset { border:1px solid #dce2e9; border-radius:.5rem; margin:.75rem 0; min-width:0; }
.bl-funktionen { list-style:none; padding:0; }
.bl-funktionen li { padding:.8rem 0; border-bottom:1px solid #e5e9ef; }
.bl-funktionen p { margin:.35rem 0 0; }

.bl-lehrer-info { display:block; font-size:.8rem; line-height:1.5; color:var(--muted, #687386); margin:.25rem 0; }

.bl-kontext-karte .bl-tabelle td:first-child { text-align:left; white-space:normal; }

/* Dokumentationen: Monatsgruppen und zweizeilige, kompakte Einträge. */
.px-monat { margin: 10px 0; border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
.px-monat > summary { cursor: pointer; padding: 12px; font-weight: 650; background: var(--flaeche-2); }
.px-monat > summary > span { float: right; font-size: 12px; font-weight: 500; color: var(--muted); }
.px-monat .px-timeline { border: 0; border-radius: 0; }
.px-p-zeile { grid-template-areas: none; grid-template-columns: 64px minmax(0, 1fr) auto 14px; gap: 4px 12px; }
.px-p-zeile .px-p-datum { grid-column: 1; grid-row: 1 / 3; }
.px-p-zeile .px-p-kurz { grid-column: 2; grid-row: 1; font-weight: 650; }
.px-p-zeile .px-p-fl { grid-column: 2; grid-row: 2; font-size: 12px; font-weight: 400; color: var(--muted); }
.px-p-zeile .px-p-dauer { grid-column: 3; grid-row: 1; }
.px-p-bewertungen { grid-column: 3; grid-row: 2; color: var(--muted); font-size: var(--fs-min); }
.px-p-zeile::after { grid-column: 4; grid-row: 1 / 3; }
.px-doku-leer { padding: 20px; border: 1px dashed var(--linie); border-radius: 10px; color: var(--muted); }
@media (max-width: 600px) {
 .px-p-zeile { grid-template-columns: 50px minmax(0, 1fr) 14px; }
 .px-p-zeile .px-p-dauer { grid-column: 2; grid-row: 3; }
 .px-p-bewertungen { grid-column: 2; grid-row: 4; }
 .px-p-zeile::after { grid-column: 3; }
 .px-monat > summary > span { float: none; display: block; margin-top: 3px; }
}

/* Jahresübersicht mit direkt wählbaren Tagen. */
.kal-jahr { display:flex; flex-direction:column; min-height:0; height:100%; }
.jahr-scroll { overflow:auto; min-height:0; padding:16px; }
.jahr-wahl { display:flex; gap:8px; align-items:center; font-weight:600; }
.jahr-wahl input { width:90px; padding:8px; border:1px solid var(--linie); border-radius:8px; font:inherit; }
.jahr-auswahl { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0 20px; padding:12px; border:1px solid var(--linie); border-radius:10px; background:var(--flaeche-2); }
.jahr-auswahl > span { color:var(--muted); margin-right:auto; }
.jahr-raster { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.jahr-monat { padding:12px; border:1px solid var(--linie); border-radius:12px; background:var(--flaeche); }
.jahr-monat h2 { font-size:16px; margin:0 0 12px; }
.jahr-tage { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.jahr-wt { display:contents; }
.jahr-wt span { font-size: var(--fs-min); text-align:center; color:var(--muted); padding-bottom:6px; }
.jahr-tag { border:0; background:transparent; border-radius:8px; padding:6px 0; min-height:36px; font:inherit; font-size:13px; cursor:pointer; position:relative; }
.jahr-tag small { display:block; font-size: var(--fs-min); color:var(--blau); line-height:1; }
.jahr-tag:hover { background:var(--flaeche-2); }
.jahr-tag.heute { box-shadow:inset 0 0 0 1px var(--marke); font-weight:700; }
.jahr-tag.gewaehlt { background:var(--blau); color:white; }
.jahr-tag.gewaehlt small { color:white; }
.jahr-tag.abw::after { content:""; position:absolute; left:22%; right:22%; bottom:3px; height:3px; border-radius:2px; background:color-mix(in srgb, var(--fl) 55%, transparent); }
@media(max-width:1100px){.jahr-raster{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:800px){.jahr-raster{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:500px){.jahr-raster{grid-template-columns:minmax(0,1fr);}.jahr-tag{min-height:44px;}.kal-jahr .leiste{flex-wrap:wrap;}.jahr-scroll{padding:10px;}}

.bl-tabelle input[type="number"] {width:105px;max-width:100%;padding:8px;border:1px solid var(--linie);border-radius:6px;font:inherit;}
.bl-leiste input[type="month"]{padding:8px;border:1px solid var(--linie);border-radius:6px;font:inherit;}

.bl-kosten-chart{position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:18px 18px 20px 75px;margin:16px 0;}
.bl-kosten-chart figcaption{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;margin-bottom:20px;}.bl-kosten-chart figcaption span{font-size:12px;color:var(--muted);}
.bl-kosten-balken{height:200px;display:flex;gap:5px;align-items:stretch;}.bl-kosten-tag{position:relative;flex:1;min-width:0;background:none;border:0;border-bottom:1px solid var(--linie);padding:0;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;}
.bl-kosten-bar{display:block;background:var(--blau);width:80%;border-radius:4px 4px 0 0;}.bl-kosten-tag small{position:absolute;top:100%;font-size: var(--fs-min);line-height:24px;color:var(--muted);}.bl-kosten-tag.fehlend{background:repeating-linear-gradient(135deg,transparent,transparent 5px,var(--flaeche-2) 5px,var(--flaeche-2) 7px);}
.bl-kosten-achse{position:absolute;left:12px;bottom:20px;top:75px;display:flex;flex-direction:column;justify-content:space-between;font-size: var(--fs-min);color:var(--muted);}
@media(max-width:600px){.bl-kosten-chart{padding-left:55px;padding-right:10px;}.bl-kosten-balken{gap:2px;}.bl-kosten-tag:nth-child(even) small{visibility:hidden;}}
#blNutzungInhalt { min-width:0; }
#blNutzungInhalt .seg { flex-wrap:wrap; max-width:100%; }
#blNutzungInhalt .seg button { white-space:normal; min-width:0; }
#blNutzungInhalt .bl-kz { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:600px){#blNutzungInhalt .bl-kz{grid-template-columns:minmax(0,1fr);}#blNutzungInhalt .bl-leiste{min-width:0;}#blNutzungInhalt .seg{width:100%;}#blNutzungInhalt .seg button{flex:1 1 100px;}}

/* Anbieter-Abrechnung: Einrichtungsformular bleibt auch auf dem Handy innerhalb der Karte. */
.bl-abrechnung form { margin-top:16px; }
.bl-abrechnung input { min-width:0; max-width:100%; }
.bl-abrechnung p, .bl-abrechnung li { overflow-wrap:anywhere; }
.bl-abrechnung .haken-zeile { display:flex; align-items:flex-start; gap:10px; margin:16px 0; }
.bl-abrechnung .haken-zeile input { flex:0 0 auto; margin-top:4px; }
.bl-kosten-bar.gutschrift { background:#b96613; }

/* Praxisprotokoll: dieselben Formularbausteine, mobile Auswahl ohne Hover. */
.px-kompetenz-v3, .px-extra { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--linie); border-radius: var(--r-control); margin: 8px 0; }
.px-kompetenz-v3.vorgeschlagen { border-color: var(--blau); background: var(--flaeche-2); }
.px-kompetenz-v3 label, .px-extra label { display: grid; gap: 6px; min-width: 0; }
.px-kompetenz-v3 textarea, .px-extra textarea, .px-extra select { width: 100%; min-width: 0; box-sizing: border-box; }
.px-kompetenz-gruppe summary, .px-verlauf summary, .px-legende summary { min-height: var(--tipp); cursor: pointer; padding: 10px 0; overflow-wrap: anywhere; }
.px-kompetenz-v3 .chip { min-height: var(--tipp); white-space: normal; }
.px-kompetenz-v3 .chipreihe { flex-wrap: wrap; }
.px-kompetenz-v3 [hidden] { display: none; }
.px-audit { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-klein); max-height: 320px; overflow: auto; }
.px-legende p { font-size: var(--fs-klein); margin: 6px 0; }
.px-block label textarea { max-width: 100%; }
@media (max-width: 599px), (pointer: coarse) {
  .px-extra select, .px-kompetenz-v3 select { min-height: var(--tipp); font-size: 16px; }
  .px-block textarea { font-size: 16px; }
  .px-kompetenz-v3, .px-extra { padding: 10px; }
  .px-fuss .aktionen { flex-wrap: wrap; }
}

/* Kompakte Bewertung: feste Skala, zusätzliche Beobachtungen bei Bedarf. */
.px-kompetenz-kopf { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.px-kompetenz-kopf strong { font-size:14px; }
.px-kompetenz-wert { color:var(--muted-2); font-size:12px; white-space:nowrap; }
.px-bewertung { display:grid; grid-template-columns:minmax(130px,1.7fr) repeat(5,minmax(44px,1fr)); gap:6px; }
.px-bewertung .px-chip { border-radius:8px; width:100%; padding:8px; min-height:44px; font-weight:650; }
.px-bewertung .px-chip[aria-pressed="true"]::before { content:none; }
.px-bewertung .px-chip[data-wert=""][aria-pressed="true"] { background:var(--flaeche-2); color:var(--muted-2); border-color:var(--linie); }
.px-kompetenz-v3 { padding:16px; gap:10px; background:var(--flaeche); border-radius:12px; }
.px-kompetenz-v3.vorgeschlagen { background:var(--flaeche); border-color:var(--linie); box-shadow:inset 3px 0 var(--blau); }
.px-kompetenz-v3 p { margin:0; line-height:1.5; }
.px-beobachtung summary { cursor:pointer; color:var(--gruen, #18794e); font-size:13px; padding:8px 0; min-height:36px; }
.px-kompetenz-v3 :is(textarea,select) { border:1px solid var(--linie); border-radius:8px; background:var(--flaeche); color:inherit; padding:10px 12px; font:inherit; width:100%; box-sizing:border-box; }
.px-kompetenz-v3 [data-vier] { display:grid; gap:12px; padding:14px; background:var(--flaeche-2); border-radius:8px; }
.px-kompetenz-v3 [data-vier][hidden] { display:none; }
.px-kompetenz-gruppe > summary { font-weight:650; border-bottom:1px solid var(--linie); }
.px-fuss { z-index:3; box-shadow:0 -6px 20px #102a1910; }
.px-fuss .aktionen { width:100%; justify-content:flex-end; }
.px-fuss #pxEntwurf { order:-1; }
.px-mehr { position:relative; }
.px-mehr > summary { list-style:none; cursor:pointer; }
.px-mehr > summary::-webkit-details-marker { display:none; }
.px-mehr > button { position:absolute; right:0; bottom:calc(100% + 10px); white-space:nowrap; background:var(--flaeche); box-shadow:0 8px 24px #102a1920; }
.px-fuss [hidden] { display:none !important; }
@media(max-width:599px) {
  .px-kompetenz-kopf { align-items:flex-start; }
  .px-kompetenz-wert { font-size: var(--fs-min); }
  .px-bewertung { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .px-bewertung .px-chip[data-wert=""] { grid-column:1 / -1; min-height:40px; }
  .px-fuss .aktionen { gap:8px; }
  .px-fuss #pxFertig, .px-fuss #pxEntwurf { flex:1 1 160px; }
}

/* Lernziele und Abschluss: konsistente Felder und ruhige Zusammenfassung. */
.px-block > label { display:grid; gap:8px; min-width:0; font-size:14px; font-weight:600; }
.px-block > label > :is(textarea, select) { width:100%; box-sizing:border-box; min-width:0; border:1px solid var(--linie); border-radius:8px; padding:12px; font:inherit; font-weight:400; background:var(--flaeche); color:inherit; }
.px-block > label > select { min-height:44px; }
.px-block > label > .klein-text { font-weight:400; margin-top:-4px; }
.px-block .px-rueckmeldung { margin-top:8px; }
.px-leer { border:1px dashed var(--linie); border-radius:10px; background:var(--flaeche-2); padding:14px 16px; color:var(--muted-2); font-size:13px; line-height:1.6; margin:0; }
.px-leer[hidden] { display:none; }
#pxVorZiele:empty, #pxZiele:empty { display:none; }
.px-altfokus { border-bottom:1px solid var(--linie); padding:4px 0 12px; }
.px-altfokus > summary { cursor:pointer; font-size:13px; color:var(--muted-2); min-height:44px; display:flex; align-items:center; }
.px-altfokus > summary::before { content:'▸'; margin-right:8px; }
.px-altfokus[open] > summary::before { content:'▾'; }
#pxZusammenfassung { border:1px solid var(--linie); border-radius:12px; background:var(--flaeche-2); padding:16px; }
.px-abschluss-kopf { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.px-abschluss-kopf > div { display:grid; gap:4px; }
.px-abschluss-kopf strong { font-size:15px; }
.px-abschluss-kopf span { font-size:12px; color:var(--muted-2); }
.px-abschluss-status { background:var(--flaeche); border:1px solid var(--linie); border-radius:20px; padding:5px 10px; }
.px-kennzahlen { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.px-kennzahlen > div { display:grid; gap:4px; }
.px-kennzahlen b { font-size:22px; line-height:1.2; }
.px-kennzahlen span { font-size:12px; color:var(--muted-2); overflow-wrap:anywhere; }
.px-block [aria-invalid="true"] { border-color:#c52e35; outline:2px solid #c52e3520; }
.px-extra :is(textarea,select) { border:1px solid var(--linie); border-radius:8px; padding:10px 12px; font:inherit; color:inherit; background:var(--flaeche); min-height:44px; }
.px-extra > label { font-size:13px; font-weight:600; }
.px-fuss .px-status { flex:1 1 100%; margin:0; line-height:1.5; font-size:13px; }
.px-fuss .px-konflikt { flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.px-konflikt[hidden] { display:none; }
.px-konflikt p { margin:0; flex:1 1 260px; }
@media(max-width:599px) {
  .px-kennzahlen { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .px-block > label > :is(textarea,select), .px-extra :is(textarea,select) { font-size:16px; }
  #pxZusammenfassung { padding:14px; }
  .px-block > .aktionen { display:flex; flex-wrap:wrap; gap:8px; }
  .px-block > .aktionen > button { flex:1 1 150px; white-space:normal; }
}

/* ===== Theorie vor Ort / online / hybrid (16.10.2026) ===== */
.form-tag { --f: var(--typ-theorie); }
.form-tag i { font-style: normal; }
.form-tag[data-form="online"] { --f: var(--info); }
.form-tag[data-form="hybrid"] { --f: var(--typ-kurs); }
.th-zugang { padding: 14px 16px; display: grid; gap: 6px; margin-bottom: 12px; }
.th-zugang-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.th-zugang-kopf .th-h2 { margin: 0; }
.th-zugang p { margin: 0; }
.th-zugang-link { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
/* Unterrichtsform: noch nicht freigeschaltete Formen bleiben sichtbar (mit Schloss) und erklären sich beim Antippen */
.th-form-wahl [data-gesperrt] { color: var(--muted); }
.th-form-schloss { font-size: 11px; }
.th-form-sperre { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.th-form-fehler { color: var(--rot); }
/* E-Mail-Einladung: drei Wege, deutlich getrennt */
.th-mail-weg { border-top: 1px solid var(--linie); padding-top: 12px; margin-top: 12px; display: grid; gap: 8px; }
.th-mail-weg h3 { margin: 0; font-size: var(--fs-text); }
.th-mail-weg h3 small { font-weight: 400; color: var(--muted); }
.th-mail-weg p { margin: 0; }
.th-mail-weg textarea { width: 100%; font: inherit; font-size: var(--fs-klein); padding: 8px 10px; border: 1px solid var(--linie-control); border-radius: var(--r-control); background: var(--flaeche); resize: vertical; }
.th-mail-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r-control); overflow: hidden; max-height: 240px; overflow-y: auto; }
.th-mail-liste li { background: var(--flaeche); padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.th-mail-liste small { display: block; font-size: var(--fs-klein); color: var(--muted); }
.th-mail-aktionen { margin: 0; flex-wrap: wrap; }
.th-nachr { white-space: normal; }
.th-nachr .tag, .th-versand { font-size: var(--fs-min); padding: 0 6px; }
.th-beitritt { color: var(--muted); text-decoration: underline dotted; }
.th-teilnahme button { min-height: 28px; font-size: 12px; padding: 2px 8px; }
@media (pointer: coarse) { .th-teilnahme button { min-height: var(--tipp); padding: 2px 12px; } }
.th-d-h3 { font-size: var(--fs-text); margin: 14px 0 6px; }
.th-versand-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: var(--r-control); }
.th-versand-liste li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--linie); }
.th-versand-liste li:last-child { border-bottom: 0; }
.th-versand-liste li > span:first-child { display: grid; min-width: 0; }
.th-versand-liste small { color: var(--muted); overflow-wrap: anywhere; }
.th-form-wahl { flex-wrap: wrap; }
.th-form-wahl button { min-height: 34px; font-size: 14px; }
@media (pointer: coarse) { .th-form-wahl button { min-height: var(--tipp); } }
.th-online-felder { display: grid; gap: 6px; }
.th-mehr { border: 1px solid var(--linie); border-radius: var(--r-control); padding: 8px 12px; }
.th-mehr > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.th-mehr > .felder { margin-top: 8px; }
.feld-label { display: block; font-weight: 600; font-size: var(--fs-klein); margin-bottom: 4px; }
.th-ziel, .th-einst-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linie); border-radius: 999px; padding: 4px 10px; font-size: var(--fs-klein); cursor: pointer; min-height: 32px; }
.chip-check:has(input:checked) { border-color: color-mix(in srgb, var(--blau) 55%, transparent); background: var(--blau-bg); }
@media (pointer: coarse) { .chip-check { min-height: var(--tipp); } }
.th-einst { border: 1px solid var(--linie); border-radius: var(--r-control); padding: 10px 12px; margin: 0 0 12px; display: grid; gap: 8px; }
.th-einst legend { font-weight: 650; padding: 0 4px; }
.th-einst-mehr { margin-top: 12px; }
.th-einst-mehr > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.th-check { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.th-check li { display: grid; grid-template-columns: 20px 1fr; gap: 6px; font-size: var(--fs-klein); }
.th-check li.ok > span:first-child { color: var(--gruen); font-weight: 700; }
.th-check li.offen > span:first-child { color: var(--warn); font-weight: 700; }
.th-recht { margin-top: 10px; }
.th-meta > .form-tag::before, .th-meta > .form-tag + span::before { content: none; }
.th-meta > .form-tag { gap: 4px; }

/* ---- Fahrstunde einsprechen (Sprachbewertung) – mobil zuerst, große Tippflächen, kein seitliches Scrollen ---- */
:root { --sb-mic: 112px; --sb-aufnahme: #d92d20; }
.sb-start { display: none; }
@media (max-width: 839px) {
  .sb-start { display: grid; gap: 6px; margin: 4px 0 12px; }
  .sb-start .sb-start-knopf { width: 100%; min-height: var(--tipp, 48px); justify-content: center; font-size: 16px; }
  .praxis > .aktionen #pxSprache { display: none; }
}
.sb-kopf .sb-wer { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.sb-kopf .sb-wer b { color: var(--ink); font-weight: 600; }
.sb-schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: sb; }
.sb-schritte li { counter-increment: sb; display: grid; gap: 4px; font-size: 12px; color: var(--muted-2); text-align: center; min-width: 0; overflow-wrap: anywhere; }
.sb-schritte li::before { content: ""; height: 4px; border-radius: 2px; background: var(--linie); }
.sb-schritte li.fertig::before { background: var(--marke); }
.sb-schritte li.aktiv { color: var(--ink); font-weight: 600; }
.sb-schritte li.aktiv::before { background: var(--blau); }
.sb-inhalt { min-width: 0; }
.sb-inhalt section { display: grid; gap: 12px; min-width: 0; }
.sb-h { font-size: 16px; font-weight: 650; margin: 0; }
.sb-h4 { font-size: 14px; font-weight: 650; margin: 8px 0 0; }
.sb-h4 small { font-weight: 400; color: var(--muted); }
.sb-liste, .sb-kriterien, .sb-liste-text { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sb-liste-text li { font-size: 13.5px; }
.sb-option { display: grid; gap: 2px; width: 100%; min-height: var(--tipp, 48px); padding: 10px 14px; text-align: left; border: 1px solid var(--linie-2); border-radius: var(--r-control); background: var(--flaeche); color: var(--ink); }
.sb-option:hover { background: var(--hover); }
.sb-option:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.sb-option-datum { font-weight: 600; }
.sb-frei { display: grid; gap: 10px; }
.sb-frei[open] { padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--r-control); }
.sb-frei summary { cursor: pointer; font-weight: 600; min-height: var(--tipp, 48px); display: flex; align-items: center; }
.sb-aufnahme { justify-items: center; text-align: center; padding: 8px 0; }
.sb-mic { display: grid; justify-items: center; gap: 10px; border: 0; background: none; color: var(--ink); font: inherit; padding: 8px; border-radius: 20px; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sb-mic:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.sb-mic-kreis { width: var(--sb-mic); height: var(--sb-mic); border-radius: 50%; display: grid; place-items: center; background: var(--marke); color: var(--auf-marke); box-shadow: var(--schatten-gross); transition: transform 0.12s; }
.sb-mic:active .sb-mic-kreis { transform: scale(0.96); }
.sb-mic.an .sb-mic-kreis { background: var(--sb-aufnahme); box-shadow: 0 0 0 10px color-mix(in srgb, var(--sb-aufnahme) 18%, transparent); animation: sb-puls 1.4s ease-in-out infinite; }
.sb-mic[disabled] .sb-mic-kreis { background: var(--neutral-bg); color: var(--muted); box-shadow: none; }
.sb-mic .spinner { width: 34px; height: 34px; border-width: 3px; }
.sb-mic-text { font-size: 17px; font-weight: 650; }
@keyframes sb-puls { 50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--sb-aufnahme) 8%, transparent); } }
@media (prefers-reduced-motion: reduce) { .sb-mic.an .sb-mic-kreis { animation: none; } }
.sb-zeit { margin: 0; font-family: var(--mono); font-size: 28px; font-variant-numeric: tabular-nums; color: var(--muted-2); }
.sb-zeit.an { color: var(--sb-aufnahme); }
.sb-hinweis { margin: 0; font-size: 14px; color: var(--muted); }
.sb-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sb-aufnahme); vertical-align: 0; }
.sb-tipp { text-align: left; justify-self: stretch; }
.sb-tipp summary { cursor: pointer; font-weight: 600; font-size: 13.5px; min-height: 36px; display: flex; align-items: center; }
.sb-meldung { justify-self: stretch; text-align: left; margin: 0; }
.sb-meldung:not([data-art="fehler"]) { color: var(--info); background: var(--info-bg); }
.sb-transkript textarea { font-size: 16px; line-height: 1.5; }
.sb-block { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--linie); border-radius: var(--r-karte); }
.sb-block textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--linie-2); border-radius: var(--r-control); font: inherit; }
.sb-rueckfragen { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn-akzent) 30%, transparent); color: var(--warn); }
.sb-rueckfragen ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.sb-rueckfragen a { color: inherit; }
.sb-krit { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche); min-width: 0; }
.sb-krit.offen { border-color: var(--warn-akzent); box-shadow: inset 3px 0 0 var(--warn-akzent); }
.sb-krit p { margin: 0; }
.sb-krit textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--linie-2); border-radius: var(--r-control); font: inherit; }
.sb-krit-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sb-krit-kopf strong { margin-right: auto; }
.sb-zitat { margin: 0; padding: 6px 10px; border-left: 3px solid var(--blau); background: var(--blau-bg); border-radius: 0 var(--r-klein) var(--r-klein) 0; font-size: 13.5px; overflow-wrap: anywhere; }
.sb-ohne-zitat { font-size: 13px; color: var(--warn); }
.sb-beob { font-size: 13.5px; }
.sb-frage { font-size: 13.5px; color: var(--warn); font-weight: 500; display: flex; gap: 6px; align-items: flex-start; }
.sb-frage svg { flex: none; margin-top: 2px; }
.sb-stufen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sb-stufe { display: grid; gap: 1px; justify-items: center; align-content: center; min-height: var(--tipp, 48px); padding: 4px 2px; border: 1px solid var(--linie-2); border-radius: var(--r-control); background: var(--flaeche); color: var(--ink); font-size: 12px; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.sb-stufe b { font-size: 16px; }
.sb-stufe.nein { grid-column: 1 / -1; font-size: 13px; }
.sb-stufe[aria-checked="true"] { border-color: var(--blau); background: var(--blau-bg); color: var(--blau); box-shadow: inset 0 0 0 1px var(--blau); font-weight: 600; }
.sb-stufe.nein[aria-checked="true"] { border-color: var(--linie-2); background: var(--neutral-bg); color: var(--ink); box-shadow: none; }
.sb-stufe:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
@media (min-width: 600px) { .sb-stufen { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); } .sb-stufe.nein { grid-column: auto; } }
.sb-skala { color: var(--muted); }
.sb-lernstand { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.sb-lernstand > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche-2); }
.sb-lernstand span { font-size: 12.5px; color: var(--muted); }
.sb-lernstand b { font-size: 20px; font-variant-numeric: tabular-nums; }
.sb-lernstand small { font-size: 12.5px; color: var(--muted); }
.sb-bericht { white-space: pre-wrap; font-size: 13.5px; overflow-wrap: anywhere; }
.sb-fuss:empty { display: none; }
.sb-fuss .px-status { margin: 0; font-size: 13px; color: var(--muted); }
.knopf.leise.gefahr-text { color: var(--rot); }
@media (max-width: 599px) {
  .sb-fuss .aktionen { display: grid; grid-template-columns: 1fr 1fr; }
  .sb-fuss .aktionen > .knopf { min-height: var(--tipp, 48px); justify-content: center; }
  .sb-fuss .aktionen > .knopf:first-child { grid-column: 1 / -1; }
  .sb-fuss .aktionen > .knopf:only-child { grid-column: 1 / -1; }
  .sb-fuss .px-status:empty { display: none; }
}
@media (pointer: coarse) { .sb-stufe { font-size: 12px; } .sb-krit .check input { width: 22px; height: 22px; } .sb-krit .check { min-height: var(--tipp, 48px); align-items: center; } }
@media (max-width: 599px) {
  /* Aktionen auch bei kurzem Inhalt unten am Daumen (Vollbild-Dialog) */
  .dialog:has(> .sb-fuss):not(.blatt):not(.klein) { display: flex; flex-direction: column; }
  .dialog:has(> .sb-fuss) > * { flex-shrink: 0; }
  .dialog:has(> .sb-fuss) > .sb-fuss { margin-top: auto; }
}

/* ================= Navigation neu (Phase U2): Heute · Kalender · Schüler · Unterricht · Nachrichten ================= */
.nav-mehr { display: none; }
.wa-titel-sub { font-size: var(--fs-klein); font-weight: 500; color: var(--muted); margin-left: 6px; }
.blatt-gruppe { font-size: var(--fs-label); font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 12px 2px; }
/* Mittel (600–839 px): gleiche Kopfleiste wie am Desktop, enger gesetzt, damit nichts seitlich schiebt */
@media (min-width: 600px) and (max-width: 839px) {
  .tabs { gap: 0; }
  .tabs a { padding: 0 9px; gap: 6px; }
  .kopf-in { gap: 6px; }
}
@media (min-width: 600px) and (max-width: 719px) { .marke-wort { display: none; } }
@media (min-width: 840px) and (max-width: 1099px) { .konto-name { display: none; } }
/* Kompakt: Fahrschule = Heute · Kalender · Schüler · Nachrichten · Mehr; Admin in einer Fahrschule hat 4 Ziele (Kalender · Schüler · Nachrichten · Einstellungen) */
@media (max-width: 599px) {
  #navUnterricht { display: none; }
  body.admin-ansicht :is(#navHeute, #navMehr) { display: none; }
  .tabs .nav-mehr { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: var(--nav-h); padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.2; min-width: 0; }
  .tabs .nav-mehr:hover { color: var(--ink); }
  .tabs .nav-mehr[aria-current="page"] { color: var(--marke-tief); }
  .tabs .nav-mehr[aria-current="page"] .nav-symbol { background: var(--marke-bg); color: var(--marke-tief); }
  .tabs .nav-mehr:focus-visible { outline: 2px solid var(--blau); outline-offset: -4px; border-radius: 12px; }
  .tabs a { min-width: 0; }
  /* Beschriftung wird nie gekürzt („Nachrichten“ passt bei 320–390 px knapp): leicht enger gesetzt, gleiches Gewicht aktiv/inaktiv, bei Bedarf zentriert über den Rand hinaus */
  .tabs .nav-text { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; letter-spacing: -0.015em; font-weight: 600; }
  .wa-titel-sub { display: none; }
}

/* Unterreiter Unterricht (Theorie & Lehrplan · Aufbauseminar · Erste-Hilfe-Lehrgang) */
.unter-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; }
.unter-tabs::-webkit-scrollbar { display: none; }
.unter-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; color: var(--muted); font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.unter-tabs a:hover { color: var(--ink); }
.unter-tabs a[aria-current="page"] { color: var(--blau); border-bottom-color: var(--blau); font-weight: 700; }
.unter-tabs a:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; border-radius: 6px; }
@media (pointer: coarse) { .unter-tabs a { min-height: var(--tipp); } }
@media (max-width: 599px) { .unter-tabs { margin: 0 -12px 12px; padding: 0 8px; } }

/* Startseite „Heute“ */
.hz-seite { max-width: 1180px; margin: 0 auto; }
.hz-seite h2 { font-size: var(--fs-abschnitt); font-weight: 650; }
.hz-kopf-seite { margin-bottom: 16px; }

/* Stat-Kacheln: die wichtigsten Zahlen des Tages */
.hz-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.hz-stat { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--schatten); padding: 14px 16px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.hz-stat b { font-size: var(--fs-kennzahl); font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hz-stat span { font-size: var(--fs-label); color: var(--muted); }
@media (max-width: 640px) { .hz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Eine Spalte, große Karten */
.hz-raster { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.hz-raster > section { min-width: 0; }
.hz-sektion { overflow: hidden; }
.hz-sektionkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px 10px; }
.hz-sektionkopf h2 { margin: 0; }
.hz-sektionkopf > div { min-width: 0; }
.hz-sektionkopf .n { font-size: 12.5px; font-weight: 600; color: var(--muted-2); font-variant-numeric: tabular-nums; align-self: center; }
.hz-leer { padding: 16px; }
.hz-leer-text { padding: 0 16px 16px; }
.hz-link { font-size: var(--fs-klein); font-weight: 600; color: var(--blau); }
.hz-liste { list-style: none; padding: 0; }
.hz-aufgabe { position: relative; }
.hz-aufgabe + .hz-aufgabe { border-top: 1px solid var(--linie); }
.hz-aufgabe.alarm { box-shadow: inset 3px 0 0 var(--ton); background: color-mix(in srgb, var(--ton) 5%, transparent); }
.hz-icon { width: 34px; height: 34px; border-radius: 9px; display: inline-grid; place-items: center; flex: none; color: var(--ton); background: color-mix(in srgb, var(--ton) 14%, transparent); }
.hz-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px; }
.hz-kopf b { flex: 1; min-width: 0; font-weight: 650; }
.hz-unter { list-style: none; padding: 0 0 4px; }
.hz-zeile { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; background: none; color: inherit; text-align: left; text-decoration: none; }
.hz-zeile:hover { background: var(--flaeche-2); }
.hz-zeile:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
.hz-klein { padding-left: 24px; min-height: 44px; }
.hz-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.hz-text b { font-weight: 600; overflow-wrap: anywhere; }
.hz-text small { font-size: var(--fs-klein); color: var(--muted); overflow-wrap: anywhere; }
.hz-zahl { flex: none; background: var(--marke-bg); color: var(--marke-tief); font-size: var(--fs-label); }
.hz-zahl.achtung { background: var(--rot); color: #fff; }
.hz-oeffnen { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-klein); font-weight: 600; color: var(--blau); }
.hz-mehr .hz-text b { font-weight: 600; color: var(--muted); }
.hz-termine { list-style: none; padding: 0; }
.hz-termine li { display: block; }
.hz-ev { width: 100%; border: 0; border-top: 1px solid var(--linie); background: none; text-align: left; min-height: 48px; }
.hz-termine li:first-child .hz-ev { border-top: 0; }
.hz-ev.vorbei { opacity: 0.72; }
.hz-ev .dat-block { min-width: 0; }
.hz-ev .dat-block b { font-size: 15px; }
.hz-ev .ag-text > span { white-space: normal; }
.hz-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.hz-abwesend { list-style: none; padding: 0; margin-top: 8px; display: grid; gap: 4px; }
.hz-abw { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; min-height: 44px; padding: 6px 12px; text-align: left; border: 1px dashed var(--linie-2); border-radius: var(--r-control); background: var(--flaeche-2); color: var(--ink); }
.hz-abw small { margin-left: auto; color: var(--muted); font-size: var(--fs-klein); }
.hz-abw:hover { background: var(--hover); }
.hz-abw:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.hz-next .ag-liste, .hz-kal .ag-liste { margin-top: 0; }
@media (pointer: coarse) { .hz-zeile, .hz-ev, .hz-abw { min-height: var(--tipp); } }
@media (max-width: 599px) { .hz-klein { padding-left: 18px; } }

/* ================= Einstellungen (Phase U3): Fahrlehrer & Zuständigkeiten, Einrichtungsassistent ================= */
:root { --es-farbfeld: 40px; --es-karte-min: 300px; }
.es-seite { max-width: 1180px; margin: 0 auto; }
.es-bereich { display: grid; gap: 14px; align-content: start; }
.es-titelzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.es-titelzeile h2 { font-size: var(--fs-abschnitt); font-weight: 650; }
.es-karten { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--es-karte-min)), 1fr)); }
.es-karte { padding: 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.es-karte.inaktiv { background: var(--flaeche-2); }
.es-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.es-punkt { width: 14px; height: 14px; }
.es-name { display: grid; min-width: 0; flex: 1; }
.es-name b { font-size: var(--fs-text); font-weight: 650; overflow-wrap: anywhere; }
.es-name span { font-size: var(--fs-klein); color: var(--muted); overflow-wrap: anywhere; }
.es-emoji { font-size: 22px; line-height: 1; }
.es-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.es-tags:empty { display: none; }
.es-tags .tag { white-space: normal; }
.es-offen { margin: 0; }
.es-leer { display: grid; gap: 8px; justify-items: start; }
.es-inaktiv { border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche); padding: 0 14px 14px; }
.es-inaktiv > summary { cursor: pointer; font-weight: 650; min-height: 44px; display: flex; align-items: center; }
.es-inaktiv > summary:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 6px; }
.es-inaktiv > .klein-text { margin-bottom: 10px; }
/* Dialog: Formular */
.es-form { display: grid; gap: 14px; align-content: start; min-width: 0; }
.es-form h3 { font-size: var(--fs-abschnitt); font-weight: 650; outline: none; }
.es-form fieldset.th-einst { min-width: 0; }
.es-farben { display: grid; gap: 10px 6px; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.es-farbe { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; cursor: pointer; padding: 4px 0; }
.es-farbe input { position: absolute; opacity: 0; width: var(--es-farbfeld); height: var(--es-farbfeld); top: 4px; margin: 0; cursor: pointer; }
.es-farbfeld { display: grid; place-items: center; width: var(--es-farbfeld); height: var(--es-farbfeld); border-radius: 50%; background: var(--f); color: #fff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); }
.es-farbfeld svg { display: none; }
.es-farbe input:checked + .es-farbfeld { outline: 3px solid var(--blau); outline-offset: 2px; }
.es-farbe input:checked + .es-farbfeld svg { display: block; }
.es-farbe input:focus-visible + .es-farbfeld { outline: 3px solid var(--blau); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
.es-farbname { font-size: var(--fs-label); color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.es-farbe input:checked ~ .es-farbname { color: var(--ink); font-weight: 650; }
.es-klassen-knoepfe { display: flex; gap: 8px; margin-bottom: 8px; }
.es-verweise { list-style: none; padding: 0; margin: 0; border: 1px solid var(--linie); border-radius: var(--r-control); max-height: 280px; overflow: auto; }
.es-verweise li { display: grid; gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--linie); min-width: 0; }
.es-verweise li:last-child { border-bottom: 0; }
.es-verweise b { font-size: var(--fs-text); }
.es-verweise span { font-size: var(--fs-klein); color: var(--muted); overflow-wrap: anywhere; }
/* Assistent */
.es-schritte { display: grid; gap: 6px; }
.es-schritt-text { font-size: var(--fs-klein); font-weight: 650; color: var(--muted); }
.es-schritte .balken i { background: var(--marke); transition: width 0.2s; }
.es-fertig, .es-weiter { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.es-fertig li { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--linie); border-radius: var(--r-control); background: var(--flaeche-2); }
.es-fertig span { font-size: var(--fs-klein); color: var(--muted); }
.es-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--linie); border-radius: var(--r-control); color: inherit; text-decoration: none; background: var(--flaeche); }
.es-link > span { display: grid; flex: 1; min-width: 0; }
.es-link small { color: var(--muted); font-size: var(--fs-klein); }
.es-link:hover { background: var(--hover); }
.es-link:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
/* Zeilen (Theorie, Nachrichten, Konto) und feste Werte */
.es-zeilen { list-style: none; padding: 0; margin: 0; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche); box-shadow: var(--schatten); }
.es-zeilen > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--linie); min-height: 56px; }
.es-zeilen > li:last-child { border-bottom: 0; }
.es-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 240px; }
.es-text span { font-size: var(--fs-klein); color: var(--muted); overflow-wrap: anywhere; }
.es-fest-raster { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
.es-fest { padding: 14px; }
.es-fest h3 { font-size: var(--fs-text); font-weight: 650; margin-bottom: 6px; }
.es-fest ul { list-style: none; padding: 0; margin: 0; }
.es-fest li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.es-fest li:last-child { border-bottom: 0; }
.es-fest li span { color: var(--muted); font-size: var(--fs-klein); text-align: right; overflow-wrap: anywhere; }
/* Heute: Willkommen für neue Konten; Brain Lab: Personen nur lesend */
.hz-willkommen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px; margin-bottom: 20px; border-left: 4px solid var(--marke); }
.hz-willkommen > div { flex: 1 1 280px; min-width: 0; }
.hz-willkommen h2 { margin-bottom: 4px; }
.hz-willkommen p { color: var(--muted); font-size: var(--fs-klein); }
.bl-lehrer-lese { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.bl-lehrer-lese li { display: grid; gap: 2px; }
@media (pointer: coarse) {
  .es-inaktiv > summary { min-height: var(--tipp); }
  .es-farbe { padding-block: 6px; }
  .es-farbe input { width: var(--tipp); height: var(--tipp); top: 0; left: 50%; transform: translateX(-50%); }
  .es-klassen-knoepfe .knopf, .es-karte .aktionen .knopf { min-height: var(--tipp); }
  .es-farbname { font-size: 12px; }
}
@media (max-width: 599px) {
  .es-titelzeile > .knopf { width: 100%; justify-content: center; }
  .es-zeilen > li > .knopf { width: 100%; justify-content: center; }
  .es-form { padding-bottom: 8px; }
  .dialog:not(.blatt):not(.klein):has(#asInhalt) { display: flex; flex-direction: column; }
  .dialog:has(#asInhalt) > * { flex-shrink: 0; }
  .dialog:has(#asInhalt) > .aktionen { margin-top: auto; }
}
/* Kompakt: Einstellungen steht für Fahrschulen im Blatt „Mehr“, für den Admin (kein „Mehr“) als viertes Ziel unten */
@media (max-width: 599px) { body:not(.admin-ansicht) #navEinstellungen { display: none; } }
@media (max-width: 599px) { #navFahrzeuge { display: none; } }
/* Unten sind nur 5 Plaetze: Buchhaltung steht kompakt im Blatt „Mehr“, nicht in der Leiste. */
@media (max-width: 599px) { #navBuchhaltung { display: none; } }

/* ================= U3-Nacharbeit: Kopfleiste ohne seitlichen Überlauf, Tippflächen ================= */
/* Die Bereiche schrumpfen und scrollen in sich; Marke und rechte Gruppe behalten ihre Größe. */
.kopf-in > * { min-width: 0; }
.kopf-in > .marke, .kopf-rechts { flex: none; }
.kopf-rechts > * { flex: none; }
.tabs { flex: 0 1 auto; }
/* Mittel (600–839 px): nur das Zeichen als Marke, engere Ziele (Schrift bleibt ≥ 12 px) */
@media (min-width: 600px) and (max-width: 839px) {
  .marke-wort { display: none; }
  .tabs { flex: 1 1 0; }
  .tabs a { padding: 0 6px; font-size: 13px; }
}
/* 861–1099 px: einzeilig, Wortmarke und Abgleich-Text weichen, Bereiche füllen den Rest und scrollen bei Bedarf */
@media (min-width: 861px) and (max-width: 1099px) {
  .kopf-in { gap: 10px; }
  .marke-wort { display: none; }
  .tabs { flex: 1 1 0; }
  .tabs a { padding: 0 9px; }
  .kopf-rechts { gap: 8px; }
  .sync { width: var(--h-klein); padding: 0; justify-content: center; }
  #syncText { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-kurz { display: inline; }
  .nav-lang { display: none; }
}
/* Hinweis auf weitere Ziele (Fade rechts), gesetzt von navSichtbar() */
@media (min-width: 600px) {
  .tabs.mehr-rechts { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
}
/* Admin in einer Fahrschule (6 Ziele): 1100–1439 px wie 861–1099 verdichten, damit alle Ziele ohne Scrollen passen */
@media (min-width: 1100px) and (max-width: 1439px) {
  body.admin-ansicht .kopf-in { gap: 10px; }
  body.admin-ansicht .marke-wort, body.admin-ansicht .konto-name { display: none; }
  body.admin-ansicht .tabs { flex: 1 1 0; }
  body.admin-ansicht .tabs a { padding: 0 9px; }
  body.admin-ansicht .kopf-rechts { gap: 8px; }
  body.admin-ansicht .sync { width: var(--h-klein); padding: 0; justify-content: center; }
  body.admin-ansicht #syncText { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.admin-ansicht .nav-kurz { display: inline; }
  body.admin-ansicht .nav-lang { display: none; }
}
/* Unterreiter (Einstellungen, Betreiber, Unterricht): Fade-Rand nur bei echtem Überlauf (gesetzt von untertabsSichtbar) */
.unter-tabs.mehr-rechts { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.unter-tabs.mehr-links { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.unter-tabs.mehr-links.mehr-rechts { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
/* Zähler im aktiven Chip/Segment: Kontrast ≥ 4,5:1 auf grün getöntem Grund */
.chip.aktiv .n, .chip[aria-pressed="true"] .n, .seg .aktiv .n, .seg [aria-pressed="true"] .n, .seg [aria-selected="true"] .n { color: var(--marke-tief); }
/* Touch: Abgleich-Knopf mindestens 48 × 48 px, schrumpft nie */
@media (pointer: coarse) {
  .sync { flex: none; min-width: var(--tipp); min-height: var(--tipp); }
}

/* Fahrlehrerverwaltung: Hilfetexte und Abwesenheit (21.10.2026) */
.es-sarah-hilfe { margin: 2px 0 0 28px; }
.es-weitere { margin: 0 0 12px; }
.es-weitere > summary { padding: 6px 0 10px; }

/* Touch: Inline-Links und kleine Bedienelemente auf 48 px (Desktop unverändert) */
@media (pointer: coarse) {
  a[href^="tel:"], a.hz-link, a.hz-inline { display: inline-flex; align-items: center; min-height: var(--tipp); }
  .px-beobachtung summary { min-height: var(--tipp); display: flex; align-items: center; }
  .fs-vorher input, input#fsVorher { min-height: var(--tipp); font-size: 16px; }
  .es-karte .aktionen .knopf { min-height: var(--tipp); }
  .es-karte .aktionen .link-knopf { min-height: var(--tipp); padding: 0 8px; }
}

/* Sarah & WhatsApp (Einstellungen) und Schnellschalter im Reiter Nachrichten (Paket 2) */
.wa-schnell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.wa-problem { margin: 0 0 10px; }
.es-zeilen .wa-schalter { flex: none; }
.wa-status { align-items: center; }
.wa-chef { margin-bottom: 0; }
.wa-chef .wa-chef-in { border-top: 0; padding: 14px 16px 16px; }
.wa-chef-in h3 { font-size: var(--fs-text); font-weight: 650; }
.bl-details > .wa-einrichtung-in { border-top: 0; padding: 8px 0 0; }
.bl-details > .klein-text { margin: 4px 0 0; }
@media (max-width: 599px) {
  .wa-schnell { flex: 1 1 100%; justify-content: space-between; }
}

/* ================= Darstellung robust (Paket 3b) ================= */
/* Lange Namen/Meldungen brechen um, statt abzuschneiden oder seitlich zu schieben */
.hinweis, .fehlertext, .toast, .box, .es-fertig li, .es-verweise b, .es-link small, .es-fest li > :first-child, .bk-oben > *, .abschnitt > h3 { min-width: 0; overflow-wrap: anywhere; }
.dialog [role="alert"], .dialog .fehlertext, .dialog .hinweis { overflow-wrap: anywhere; }
.es-fest li > :first-child { flex: 1 1 auto; }
/* Touch und schmale Fenster: Tippflächen und Eingabefelder (Betreiber-Seiten, Jahr, Kopfleiste) */
@media (max-width: 599px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea { font-size: 16px; }
}
@media (pointer: coarse) {
  #abmelden, #adminWechseln { min-height: var(--tipp); }
  #blSchule, #blMonat, #jahrWahl, .bl-leiste select, .bl-leiste input:not([type="checkbox"]):not([type="radio"]) { min-height: var(--tipp); }
  /* Logo-Link: Trefferfläche mindestens 48 × 48 px, Optik unverändert */
  /* Das Element selbst ist 48 px breit (Polster innen, gleicher Betrag Außenabstand negativ → Optik unverändert) */
  a.marke { box-sizing: content-box; padding-inline: 11px; margin-inline: -11px; min-width: 26px; min-height: var(--tipp); justify-content: center; }
  #kMenue { min-width: var(--tipp); flex: none; }
  .bl-auswahl { min-height: var(--tipp); min-width: var(--tipp); }
  .klein-text a:not(.knopf), .bl-karte p a:not(.knopf) { display: inline-flex; align-items: center; min-height: var(--tipp); }
}

/* Schülerkarten: kompakte Übersicht, Details per Maus, Tastatur oder Touch. */

/* Vergangene Fehlzeiten im Lehrplan: orange-rot, zusätzlich als Text erkennbar. */

/* Praxis: kurze Übersicht, ausführliche Zahlen und Erklärungen auf Abruf. */
.px-auswertung { border: 1px solid var(--linie); border-radius: var(--r-control); padding: 10px 12px; }
.px-auswertung > summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.px-auswertung[open] > summary { margin-bottom: 12px; }
.px-sicherheit-kurz { color: var(--fehler, #b42318); font-weight: 600; }

/* Schülerübersicht: kompakte Karten, vollständige Ausbildungsdetails in der Kartei. */
:is(.board, .kl-karten) .bk { padding: 7px 9px; gap: 5px; box-shadow: none; }
:is(.board, .kl-karten) .bk-kopf { gap: 7px; }
:is(.board, .kl-karten) .bk .av { width: 26px; height: 26px; font-size: 12px; }
:is(.board, .kl-karten) .bk-text b { font-size: 13.5px; }
:is(.board, .kl-karten) .bk-text small { font-size: 12px; line-height: 1.3; }
:is(.board, .kl-karten) .bk-fort { padding-top: 5px; column-gap: 7px; row-gap: 3px; }
:is(.board, .kl-karten) .bk-fort dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; line-height: 17px; }
:is(.board, .kl-karten) .bk-fort dt { line-height: 17px; }
:is(.board, .kl-karten) .bk-sub,
:is(.board, .kl-karten) .bk-zeile > .balken { display: none; }
:is(.board, .kl-karten) .bk-zeile { gap: 2px; }
:is(.board, .kl-karten) .bk-pr { flex-basis: 100%; }
:is(.board, .kl-karten) .bk-termin { font-size: 12px; line-height: 16px; }
:is(.board, .kl-karten) .bk-hinweise { gap: 3px; }
:is(.board, .kl-karten) .bk-hinweise .tag { padding: 1px 5px; line-height: 1.35; }
.board .bs-liste { padding: 2px 5px 5px; gap: 4px; }
/* Auf Touch bleiben die bisherigen großen Bedienflächen erhalten. */
@media (pointer: coarse) {
  :is(.board, .kl-karten) .bk-kopf { min-height: var(--tipp); }
}

/* Karten starten geschlossen: weitere Angaben erst nach einem Klick auf Details. */
.bk-details { min-width: 0; }
.bk-details > summary { width: fit-content; min-height: 28px; display: flex; align-items: center; gap: 5px; padding: 2px 6px; border: 1px solid var(--linie); border-radius: var(--r-klein); color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.bk-details > summary::-webkit-details-marker { display: none; }
.bk-details > summary::before { content: "›"; font-size: 16px; line-height: 1; }
.bk-details[open] > summary::before { transform: rotate(90deg); }
.bk-details > summary:hover { background: var(--hover); color: var(--ink); }
.bk-details > summary:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.bk-details-inhalt { display: grid; gap: 6px; padding-top: 6px; min-width: 0; }
@media (pointer: coarse) { .bk-details > summary { min-height: var(--tipp); padding-inline: 10px; } }

:is(.board, .kl-karten) .bk-details .bk-fort dd { display: grid; gap: 3px; }
:is(.board, .kl-karten) .bk-details .bk-sub { display: block; }
:is(.board, .kl-karten) .bk-details .bk-sub:empty { display: none; }
:is(.board, .kl-karten) .bk-details .bk-zeile > .balken { display: block; }

@media (pointer: coarse) { .th-todo-eintrag, .th-todo-still, .th-archiv > summary { min-height: var(--tipp); } }

/* Kopfleiste ab 840 px: Fahrschule wechseln und Abmelden wohnen im Konto-Menü, der Abgleich ist ein Punkt (Text nur bei Fehler) */
@media (min-width: 840px) {
  #abmelden, #adminWechseln { display: none !important; }
  .kopf-menue { display: inline-grid; place-items: center; width: var(--h-control); height: var(--h-control); border: 0; border-radius: 50%; background: none; color: var(--auf-marke); flex: none; }
  .kopf-menue:hover { background: rgb(255 255 255 / 0.12); }
  .sync { width: var(--h-klein); padding: 0; justify-content: center; }
  #syncText { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sync.fehler { width: auto; padding: 0 12px; }
  .sync.fehler #syncText { position: static; width: auto; height: auto; clip: auto; }
}

/* Scrollen: hinter geöffneten Fenstern bleibt die Seite stehen; Scrollen im Fenster zieht sie nicht mit */
html { scrollbar-gutter: stable; }
body:has(.dialog-schleier, #schublade) { overflow: hidden; }
.dialog-schleier, .schleier, .dialog, .schublade { overscroll-behavior: contain; }
.dialog-schleier, .schleier { touch-action: none; }
.dialog, .schublade { touch-action: pan-y; }

/* Verpasst & abgesagt: wer hat welche Theoriestunde nicht besucht – Zeile je Schüler und Stunde */
.th-ausfall { padding: 14px 16px 12px; margin-bottom: 16px; display: grid; gap: 8px; }
.th-ausfall .th-h2 { margin: 0; }
.th-ausfall-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.th-ausfall-zeile { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linie); }
.th-ausfall-zeile:first-child { border-top: 0; }
.th-ausfall-zeile.ruhig { opacity: .72; }
.th-ausfall-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-align: left; background: none; border: 0; padding: 0; font-weight: 600; color: var(--ink); }
.th-ausfall-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.th-ausfall-name:hover b { text-decoration: underline; }
.th-ausfall-stunde { display: grid; min-width: 0; color: inherit; text-decoration: none; }
.th-ausfall-stunde b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-ausfall-stunde span { font-size: 12.5px; color: var(--muted); }
.th-ausfall-stunde:hover b { text-decoration: underline; }
.th-ausfall-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.th-ausfall-grund { grid-column: 2 / -1; font-size: 12.5px; color: var(--muted); font-style: italic; }
.th-ausfall-mehr > summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; min-height: var(--h-klein); display: flex; align-items: center; }
.th-ausfall-hinweis { color: var(--warn) !important; font-weight: 600; }
@media (max-width: 720px) {
  .th-ausfall-zeile { grid-template-columns: minmax(0, 1fr); }
  .th-ausfall-tags { justify-content: flex-start; }
  .th-ausfall-grund { grid-column: 1; }
}

/* In Theorieausbildung: alle aktiven Schüler mit Fortschritt; wer hinterherhängt, steht vorn und zeigt die fehlende Lektion */
.th-schueler { padding: 14px 16px 16px; margin-bottom: 16px; display: grid; gap: 12px; }
.th-schueler .th-h2 { margin: 0; }
.th-schueler-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.th-schueler-karte { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-control); min-width: 0; color: var(--ink); }
.th-schueler-karte:hover { background: var(--flaeche-2); border-color: var(--linie-2); }
.th-schueler-karte.hinterher { border-color: color-mix(in srgb, var(--warn-akzent) 45%, var(--linie)); box-shadow: inset 3px 0 0 var(--warn-akzent); }
.th-schueler-text { display: grid; gap: 4px; min-width: 0; flex: 1; }
.th-schueler-text b { font-size: 14px; font-weight: 600; }
.th-schueler-text small { font-size: 12.5px; color: var(--muted); }
.th-schueler-lag { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--warn); }
.th-schueler-rest { font-size: 12.5px; color: var(--muted); }

/* Einklappbare Blöcke (In Theorieausbildung, Verpasst & abgesagt, Alle Theoriestunden): Kennzahl im Summary bleibt sichtbar */
.th-klapp { margin-bottom: 16px; overflow: hidden; }
.th-klapp.th-schueler, .th-klapp.th-ausfall { display: block; padding: 0; gap: 0; }
.th-klapp > summary { cursor: pointer; list-style: none; padding: 12px 16px; min-height: var(--h-control); }
.th-klapp > summary::-webkit-details-marker { display: none; }
.th-klapp > summary::after { content: "▸"; margin-left: auto; color: var(--muted); font-weight: 400; font-size: 13px; }
.th-klapp[open] > summary::after { content: "▾"; }
.th-klapp[open] > summary { border-bottom: 1px solid var(--linie); }
.th-klapp.th-schueler > :not(summary) { padding: 12px 16px 16px; }
.th-klapp.th-ausfall > :not(summary) { padding: 4px 16px; }
.th-klapp.th-ausfall > :last-child { padding-bottom: 12px; }
@media (pointer: coarse) { .th-klapp > summary { min-height: var(--tipp); } }

/* Belegung als Füllbalken mit Betonung der freien Plätze */
.th-beleg { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.th-beleg .balken { width: 48px; flex: none; }
.th-frei { font-size: var(--fs-min); color: var(--muted); white-space: nowrap; }
.th-frei.voll { color: var(--muted-2); }

/* ---- Kartei kompakt: Einschätzung (Ampel-Kacheln), Lehrplan-Raster, Kompetenz-Raster ---- */
.kx-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.kx-kachel { --a: var(--neutral); display: grid; gap: 4px; align-content: start; text-align: left; min-width: 0; padding: 10px 12px 11px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-control); box-shadow: inset 0 3px 0 var(--a); color: var(--ink); }
.kx-kachel:hover { background: var(--flaeche-2); border-color: var(--linie-2); }
.kx-kachel.ok { --a: var(--gruen); } .kx-kachel.warn { --a: var(--warn-akzent); } .kx-kachel.fehler { --a: var(--rot); } .kx-kachel.info { --a: var(--blau); } .kx-kachel.neutral { --a: var(--linie-2); }
.kx-titel { font-size: var(--fs-label); font-weight: 600; color: var(--muted); }
.kx-kachel > b { display: flex; align-items: baseline; gap: 2px; font-size: var(--fs-kennzahl); font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--a) 55%, var(--ink)); }
.kx-kachel > b small { font-size: 13px; font-weight: 500; color: var(--muted); }
.kx-kachel > b svg { color: var(--gruen); }
.kx-kachel .balken i { background: var(--a); }
.kx-kachel > small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.kx-warn { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
@media (max-width: 599px) { .kx-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lehrplan als Kachel-Raster: eine Kachel je Lektion, Farbe = Zustand */
.th-kat { display: grid; gap: 6px; margin-top: 12px; }
.th-kat-titel { font-size: var(--fs-label); font-weight: 600; color: var(--muted); display: flex; gap: 6px; }
.th-kat-titel span { color: var(--ink); font-variant-numeric: tabular-nums; }
.th-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.th-kachel { width: 100%; min-height: 44px; display: grid; place-items: center; align-content: center; gap: 0; padding: 4px 2px; border-radius: var(--r-control); border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--muted); font-variant-numeric: tabular-nums; }
.th-kachel b { font-size: 12.5px; font-weight: 650; line-height: 1.2; }
.th-kachel i { font-style: normal; font-size: 12px; font-weight: 800; line-height: 1; min-height: 12px; }
button.th-kachel:hover { filter: brightness(.96); }
.th-kachel[data-z="besucht"] { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.th-kachel[data-z="eingetragen"] { background: var(--blau-bg); border-color: var(--blau); color: var(--blau); }
.th-kachel[data-z="entschuldigt"] { background: var(--warn-bg); border-color: var(--warn-akzent); color: var(--warn); }
.th-kachel[data-z="verpasst"] { background: var(--rot-bg); border-color: var(--rot); color: var(--rot); }
.th-kachel[data-z="offen"] { border-style: dashed; }
.th-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.th-legende span { display: inline-flex; align-items: center; gap: 5px; }
.th-legende span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--linie-2); }
.th-legende [data-z="besucht"]::before { background: var(--gruen); border-color: var(--gruen); }
.th-legende [data-z="eingetragen"]::before { background: var(--blau-bg); border-color: var(--blau); }
.th-legende [data-z="verpasst"]::before { background: var(--rot-bg); border-color: var(--rot); }
.th-legende [data-z="offen"]::before { border-style: dashed; }
.th-tun-box { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
.th-tun { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.th-tun li { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; min-height: 34px; padding: 4px 10px; border-radius: var(--r-control); background: var(--flaeche-2); font-size: 13px; }
.th-tun li.verpasst { background: var(--rot-bg); }
.th-tun li > span { min-width: 0; overflow-wrap: anywhere; }
.th-tun small { color: var(--muted); font-size: 12px; }
.th-tun li.verpasst small { color: var(--rot); font-weight: 600; }
.th-verlauf > summary, .px-auswertung > summary { cursor: pointer; font-weight: 650; min-height: var(--h-control); display: flex; align-items: center; gap: 8px; }
.th-verlauf[open] > summary { margin-bottom: 8px; }

/* Praxis: Eckdaten in einer Fläche, Kompetenzen als Raster mit Stufen-Punkten */
.px-eckdaten-5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.px-eckdaten-5 > div + div { border-left: 0; }
.px-eckdaten-5 > div { border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin: 0 -1px -1px 0; }
.px-komp { display: grid; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche); overflow: hidden; }
.px-komp-titel { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 9px 12px; font-weight: 650; font-size: 13.5px; border-bottom: 1px solid var(--linie); background: var(--flaeche-2); }
.px-komp-titel span { font-weight: 500; font-size: 12px; color: var(--muted); }
.px-k + .px-k { border-top: 1px solid var(--linie); }
.px-k > summary, .px-k.leer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(96px, auto); gap: 10px; align-items: center; padding: 7px 12px; min-height: 36px; font-size: 13px; list-style: none; }
.px-k > summary { cursor: pointer; }
.px-k > summary::-webkit-details-marker { display: none; }
.px-k > summary:hover { background: var(--hover); }
.px-k.leer { color: var(--muted); }
.px-k-name { min-width: 0; overflow-wrap: anywhere; }
.px-k-wert { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.px-k-wert .tag { margin-left: 4px; }
.px-k-punkte { --p: var(--linie-2); display: inline-flex; gap: 3px; }
.px-k-punkte i { width: 14px; height: 8px; border-radius: 2px; background: var(--flaeche-3); }
.px-k-punkte i.an { background: var(--p); }
.px-k-punkte[data-w="0"], .px-k-punkte[data-w="1"] { --p: var(--rot); }
.px-k-punkte[data-w="2"] { --p: var(--warn-akzent); }
.px-k-punkte[data-w="3"], .px-k-punkte[data-w="4"] { --p: var(--gruen); }
.px-k-inhalt { padding: 2px 12px 10px; display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 480px) { .px-k > summary, .px-k.leer { grid-template-columns: minmax(0, 1fr) auto; } .px-k-wert { grid-column: 1 / -1; text-align: left; } }
@media (pointer: coarse) { .th-kachel, .px-k > summary, .px-k.leer, .th-tun li { min-height: var(--tipp); } }

/* ================= Buchhaltung ================= */
/* Nur bestehende Tokens – keine neuen Farben, keine neuen Größen. */
.bh-seite { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 16px; padding-bottom: 24px; }
.bh-bereich { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 16px; }
.bh-bereich > * { min-width: 0; }
.bh-aktionen, .bh-speichern { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bh-leiste { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.bh-leiste h3 { margin: 0; }

/* Kennzahlen */
.bh-kz-leiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0; }
.bh-kz { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 12px 14px; display: grid; gap: 2px;
  /* Ohne min-width: 0 wachsen die Rasterspalten auf die Mindestbreite ihres Textes – bei 320 px
     schob das die ganze Seite nach rechts (gemessen 332 px). Lange Woerter brechen lieber um. */
  min-width: 0; }
/* Nur echte Ueberlaeufe umbrechen – `anywhere` wuerde auch Betraege mitten in der Zahl trennen. */
.bh-kz dd, .bh-kz .klein-text { overflow-wrap: break-word; }
.bh-kz dt { font-size: var(--fs-label); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bh-kz dd { margin: 0; font-size: var(--fs-kennzahl); font-weight: 650; font-variant-numeric: tabular-nums; }
.bh-kz .klein-text { margin: 0; }
.bh-kz.warn { border-color: var(--warn-akzent); background: var(--warn-bg); }
.bh-kz-gruppe { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0 0 12px; }
.bh-kz-gruppe dt { font-size: var(--fs-label); color: var(--muted); }
.bh-kz-gruppe dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Offene Einrichtung */
.bh-offen { border-color: var(--warn-akzent); background: var(--warn-bg); }
.bh-offen h2, .bh-offen h3 { margin: 0 0 4px; font-size: var(--fs-abschnitt); }
.bh-offen-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.bh-offen-liste li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; font-size: var(--fs-text); }
.bh-blitz { outline: 2px solid var(--blau); outline-offset: 3px; transition: outline-color 0.3s; }

/* Rechnungsliste */
.bh-zeile:hover { background: var(--hover); }
/* Die ganze Zeile ist anklickbar, der Treffer ist aber der Link darin (echtes <a>: neuer Tab, Mittelklick) */
.bh-zeile-link { font-weight: 650; color: var(--ink); text-decoration: none; }
.bh-zeile-link::after { content: ""; position: absolute; inset: 0; }
.bh-zeile-link:hover { text-decoration: underline; }
.bh-zeile:has(.bh-zeile-link) { position: relative; }
/* Knöpfe in der Zeile müssen über der Trefferfläche des Links liegen, sonst sind sie nicht erreichbar */
.bh-zeile .knopf, .bh-zeile a.knopf { position: relative; z-index: 1; }
.bh-zeile:focus-within { outline: 2px solid var(--blau); outline-offset: -2px; }
.bh-offen-betrag { font-variant-numeric: tabular-nums; color: var(--muted-2); white-space: nowrap; }
/* Kennzahl als Link: sieht aus wie die Kachel, verhält sich wie ein Link */
a.bh-kz { text-decoration: none; color: inherit; }
a.bh-kz:hover { border-color: var(--blau); background: var(--hover); }
a.bh-kz:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
/* Suchleiste der Rechnungsliste: Suche darf wachsen, die Datumsfelder bleiben schmal */
.bh-suchleiste { justify-content: flex-start; align-items: flex-end; margin-top: 12px; }
.bh-suchleiste .feld { margin: 0; }
.bh-suchleiste .feld:first-child { flex: 1 1 240px; min-width: 0; }
.bh-suchleiste .knopf { margin-bottom: 2px; }
.bh-zeile-rechts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin-left: auto; }
/* Zahl und Waehrungszeichen gehoeren zusammen – ein Umbruch dazwischen liest sich wie zwei Angaben. */
.bh-betrag { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.bh-zurueck { margin: 0; }
.bh-zurueck a { display: inline-flex; align-items: center; gap: 6px; color: var(--blau); text-decoration: none; min-height: var(--h-klein); }

/* Rechnungskopf */
.bh-kopf-oben { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.bh-kopf-oben h2 { margin: 0; }
.bh-kopf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bh-empfaenger { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.bh-empfaenger h3 { margin: 0 0 4px; font-size: var(--fs-label); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bh-empfaenger p { margin: 0; }

/* Tabellen */
.bh-tabelle-rahmen { overflow-x: auto; }
.bh-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-text); }
.bh-tabelle th, .bh-tabelle td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
.bh-tabelle thead th { font-size: var(--fs-label); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom-color: var(--linie-2); }
.bh-tabelle .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bh-tabelle td small { display: block; color: var(--muted); font-size: var(--fs-klein); }
.bh-tabelle tfoot th { font-weight: 500; color: var(--muted); }
.bh-tabelle .bh-gesamt th, .bh-tabelle .bh-gesamt td { font-weight: 700; font-size: var(--fs-abschnitt); border-bottom: 0; }
.bh-arten input[type="number"], .bh-arten input[type="text"] { width: 100%; min-width: 90px; }
.bh-arten select { width: 100%; min-width: 110px; }

/* Verlauf */
.bh-verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bh-verlauf li { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; font-size: var(--fs-text); padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
.bh-verlauf li:last-child { border-bottom: 0; }
.bh-verlauf span { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Leistungen auswählen */
.bh-wahl { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; }
.bh-wahl li.gesperrt { opacity: 0.6; }
.bh-wahl .schalter-chip { width: 100%; align-items: flex-start; }
.bh-wahl small { display: block; color: var(--muted); font-size: var(--fs-klein); }
.bh-gesperrt { color: var(--warn); }
.bh-zeitraum { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bh-frei { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
.bh-frei h3 { margin: 0 0 8px; font-size: var(--fs-abschnitt); }
.bh-frei ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.bh-frei-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 84px 104px auto; gap: 8px; align-items: center; }
.bh-saetze { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.bh-saetze li { display: grid; grid-template-columns: minmax(0, 1fr) 104px 140px auto; gap: 8px; align-items: center; }

/* Zugänge */
.bh-zugaenge { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bh-zugang.gesperrt { opacity: 0.7; }
.bh-zugang-kopf { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: space-between; }
.bh-zugang-kopf b { display: block; }
.bh-zugang-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bh-rechte { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-klein); color: var(--muted); }
.bh-rechte li { padding-left: 16px; position: relative; }
.bh-rechte li::before { content: "·"; position: absolute; left: 6px; font-weight: 700; }

/* Kanzlei-Ansicht */
.bh-seite.kanzlei { max-width: 860px; }
.kanzlei-fuss { border-top: 1px solid var(--linie); padding-top: 12px; }
.unter-tabs .zahl.warn { background: var(--warn-akzent); color: var(--auf-marke-warn); }

@media (max-width: 599px) {
  .bh-zeitraum, .bh-kz-gruppe { grid-template-columns: 1fr; }
  .bh-frei-zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel weg" "menge preis"; }
  .bh-frei-zeile input[type="text"] { grid-area: titel; }
  .bh-frei-zeile button { grid-area: weg; }
  .bh-saetze li { grid-template-columns: minmax(0, 1fr) auto; }
  .bh-kz-leiste { grid-template-columns: 1fr 1fr; }
  .bh-zeile-rechts { width: 100%; justify-content: flex-start; }
  /* Tippflächen auf dem Handy */
  .bh-zeile, .bh-offen-liste li .knopf, .bh-rechte li, .bh-zeile .knopf { min-height: var(--tipp); }
  .bh-suchleiste .feld, .bh-suchleiste .feld:first-child { flex: 1 1 100%; }
  .bh-suchleiste input { min-height: var(--tipp); }
  /* Sechs Filter passen nebeneinander nicht auf 320 px – umbrechen statt die Seite breiter machen.
     Die Leiste ist kein Umschalter mit fester Reihenfolge, Umbruch ist hier unschaedlich. */
  .bh-leiste .seg { flex-wrap: wrap; max-width: 100%; }
  .bh-leiste .seg button { min-height: var(--tipp); flex: 1 0 auto; justify-content: center; }
  .bh-zeile { align-items: center; }
}

/* Rechnungsadresse im Kontaktdialog: zugeklappt, bis sie gebraucht wird */
.k-adresse { margin-top: 4px; border-top: 1px solid var(--linie); padding-top: 10px; }
.k-adresse > summary { cursor: pointer; min-height: var(--h-klein); display: flex; align-items: center; gap: 6px; font-weight: 600; }
.k-adresse > summary small { font-weight: 400; color: var(--muted); }
.k-adresse[open] > summary { margin-bottom: 10px; }
@media (pointer: coarse) { .k-adresse > summary { min-height: var(--tipp); } }

/* Buchhaltung: Aktualitätsstand im Seitenkopf (28.10.2026) */
.bh-stand { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
@media (max-width: 599px) { .bh-stand { width: 100%; margin-left: 0; } .bh-stand .knopf { min-height: var(--tipp); } }

/* Eingangsbelege: nutzbare Dateiauswahl, lange Dateinamen und sichtbarer nativer Datumsfokus. */
.feld:has(input[type="date"]:focus-within), .bh-seite input[type="date"]:focus-within { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: var(--r-control); }
.be-liste > li { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px; border-bottom: 1px solid var(--linie); min-width: 0; }
.be-daten { display: grid; gap: 4px; flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.be-daten small { color: var(--muted); font-size: var(--fs-klein); }
.be-daten .tag { width: fit-content; }
.be-betrag { white-space: nowrap; font-variant-numeric: tabular-nums; }
.be-dateiname { overflow-wrap: anywhere; }
.be-einwilligung { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--linie-control); border-radius: var(--r-control); cursor: pointer; }
.be-einwilligung input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--marke); }
.be-einwilligung:focus-within { outline: 2px solid var(--blau); outline-offset: 2px; }
.be-einwilligung span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .be-liste > li { padding: 12px; }
  .be-liste .aktionen { width: 100%; }
  .be-liste .knopf { min-height: var(--tipp); white-space: normal; text-align: center; }
  .be-einwilligung { min-height: var(--tipp); }
}

/* Ausgangsrechnungen: Jahre → Monate → Belege. Jede Kachel ist ein echter Link. */
.bh-archiv { display: grid; gap: 16px; min-width: 0; }
.bh-brotkrumen { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); }
.bh-brotkrumen a { min-height: var(--h-control); display: inline-flex; align-items: center; }
.bh-archiv-titel { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.bh-archiv-titel > div { flex: 1 1 260px; min-width: 0; }
.bh-archiv-titel p { margin-top: 6px; }
.bh-archiv-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.bh-archiv-raster > li { min-width: 0; }
.bh-archiv-kachel { display: flex; flex-direction: column; gap: 16px; min-height: 220px; height: 100%; padding: 20px; color: var(--ink); background: var(--flaeche); border: 1px solid var(--linie-control); border-radius: var(--r-karte); box-shadow: var(--schatten); text-decoration: none; overflow-wrap: anywhere; }
.bh-archiv-kachel:hover { border-color: var(--blau); background: var(--blau-bg); box-shadow: var(--schatten-hover); }
.bh-archiv-kopf { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.bh-archiv-kopf > strong { font-size: var(--fs-kennzahl); font-weight: 650; line-height: 1.2; }
.bh-archiv-anzahl { color: var(--muted); font-size: var(--fs-klein); }
.bh-archiv-summe { display: grid; gap: 3px; }
.bh-archiv-summe > span { color: var(--muted); font-size: var(--fs-klein); }
.bh-archiv-summe > strong { font-size: var(--fs-abschnitt); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bh-archiv-oeffnen { color: var(--blau); font-weight: 600; margin-top: auto; }
.bh-archiv-gesamt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); }
.bh-gesamt-kopf { margin-top: 20px; }
@media (max-width: 840px) { .bh-archiv-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .bh-archiv-raster { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bh-archiv-kachel { min-height: 190px; padding: 16px; gap: 12px; }
  .bh-brotkrumen a, .bh-archiv-titel .knopf { min-height: var(--tipp); }
}

/* Website-Richtwerte sind eine Quellenansicht; die manuellen Preisfelder bleiben daneben eigenständig. */
.bh-web-kopf { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.bh-website-preise > p { overflow-wrap: anywhere; }
.bh-web-klassen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bh-web-klasse { min-width: 0; border: 1px solid var(--linie); border-radius: var(--r-control); padding: 16px; }
.bh-web-klasse h4, .bh-web-klasse h5, .bh-web-fremd h5 { font-size: var(--fs-abschnitt); }
.bh-web-preise { margin: 8px 0 0; }
.bh-web-preise > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.bh-web-preise > div:last-child { border-bottom: 0; }
.bh-web-preise dt { min-width: 0; overflow-wrap: anywhere; }
.bh-web-preise dt small { display: block; color: var(--muted); font-size: var(--fs-klein); }
.bh-web-preise dd { margin: 0; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.bh-web-hinweise { margin: 8px 0 0; padding-left: 20px; }
.bh-web-fremd { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linie); }
.bh-web-angebote { display: grid; gap: 12px; }
@media (max-width: 600px) {
  .bh-web-klassen { grid-template-columns: minmax(0, 1fr); }
  .bh-web-kopf .knopf { min-height: var(--tipp); white-space: normal; }
  .bh-web-klasse { padding: 12px; }
  .bh-web-preise > div { flex-wrap: wrap; gap: 4px 12px; }
}

.bh-website-preise, .bh-website-preise > *, .bh-web-klassen, .bh-web-angebote, .bh-web-fremd { min-width: 0; max-width: 100%; }
.bh-website-preise { overflow-wrap: anywhere; }
/* Lange Einstellungs-Schalter umbrechen innerhalb der Karte; die native Checkbox bleibt als
   bedienbare Trefferfläche über dem gesamten Label. Preis-Tabellen scrollen nur im Rahmen. */
.bh-bereich .schalter-chip { min-width: 0; max-width: 100%; }
.bh-bereich .schalter-chip > span { min-width: 0; max-width: 100%; white-space: normal; flex-wrap: wrap; overflow-wrap: anywhere; }
.bh-bereich .schalter-chip > span > * { min-width: 0; overflow-wrap: anywhere; }
.bh-bereich .schalter-chip > span::before { flex-shrink: 0; }
.bh-tabelle-rahmen { width: 100%; max-width: 100%; min-width: 0; }

/* ================= Betreiber-Übersicht (Admin, 07.11.2026) =================
   Baut auf vorhandenen Bausteinen auf: .karte, .knopf, .tag, .av, .seitenkopf, .bh-leiste, .feld.
   Nur Tokens aus :root – keine festen Farbwerte. */
.ad-seite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ad-kopf-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.ad-kz-leiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0; }
.ad-kz { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 12px 14px; display: grid; gap: 2px; min-width: 0; }
.ad-kz dt { font-size: var(--fs-label); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ad-kz dd { margin: 0; font-size: var(--fs-kennzahl); font-weight: 650; font-variant-numeric: tabular-nums; }
.ad-kz .klein-text { margin: 0; overflow-wrap: break-word; }
.ad-kz.warn { border-color: var(--warn-akzent); background: var(--warn-bg); }
.ad-filter { justify-content: flex-start; align-items: flex-end; gap: 16px; }
.ad-filter .feld { margin: 0; flex: 1 1 260px; min-width: 0; }

.ad-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ad-karte { display: grid; gap: 10px; padding: 14px 16px; }
.ad-karte.ad-kaputt { border-color: var(--rot); }
.ad-kopf { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.ad-kopf-text { min-width: 0; flex: 1; }
.ad-kopf-text h3 { margin: 0; font-size: var(--fs-abschnitt); overflow-wrap: break-word; }
.ad-kopf-text p { margin: 2px 0 0; }
.ad-kopf-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.ad-hinweise { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ad-ruhig { margin: 0; color: var(--muted-2); }
/* Vier Kennzahlengruppen nebeneinander; sie brechen früh um, statt die Seite zu verbreitern */
.ad-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; border-top: 1px solid var(--linie); padding-top: 10px; }
.ad-gruppe { min-width: 0; }
.ad-gruppe h4 { margin: 0 0 4px; font-size: var(--fs-label); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ad-gruppe dl { margin: 0; display: grid; gap: 2px; }
.ad-gruppe dl > div { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; }
.ad-gruppe dt { color: var(--muted-2); font-size: var(--fs-klein); min-width: 0; overflow-wrap: break-word; }
.ad-gruppe dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Zugangsdaten einer neu angelegten Fahrschule – einmalig sichtbar, deshalb gut lesbar */
.ad-zugang { display: grid; gap: 8px; margin: 12px 0; }
.ad-zugang > div { display: grid; gap: 2px; background: var(--flaeche-2); border-radius: var(--r-control); padding: 8px 10px; }
.ad-zugang dt { font-size: var(--fs-label); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ad-zugang dd { margin: 0; font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.ad-details { margin-top: 8px; }
.ad-pre { background: var(--flaeche-3); border-radius: var(--r-control); padding: 10px; overflow-x: auto; font-family: var(--mono); font-size: var(--fs-klein); margin: 8px 0 0; }

/* ---- Kosten & Verbrauch (Betreiber, 07.11.2026) ----
 * Nur bestehende Tokens. Geldspalten brechen nie um (tabular-nums + nowrap), damit Beträge
 * untereinander vergleichbar bleiben; die Tabelle scrollt stattdessen waagerecht (.bl-tabelle-rahmen). */
.ad-seiten { flex: 0 0 auto; }
.ad-monat { margin: 0; display: flex; align-items: center; gap: 6px; }
.ad-monat span { font-size: var(--fs-label); color: var(--muted); }
.ad-monat input { min-width: 0; }

.ad-kosten-tabelle caption { caption-side: top; text-align: left; color: var(--muted); padding: 0 0 8px; }
.ad-kosten-tabelle td, .ad-kosten-tabelle tfoot th { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-kosten-tabelle th[scope="row"] { white-space: normal; min-width: 0; overflow-wrap: break-word; }
.ad-kosten-tabelle tfoot { border-top: 2px solid var(--linie); font-weight: 650; }
.ad-kosten-tabelle tr.ad-kaputt td { color: var(--rot); white-space: normal; }

/* Anteilsbalken: rein schmückend (aria-hidden), die Prozentzahl daneben trägt die Aussage */
.ad-anteil-zelle { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ad-anteil { background: var(--flaeche-3); border-radius: var(--r-control); height: 8px; width: 72px; flex: 0 0 auto; overflow: hidden; }
.ad-anteil > span { display: block; height: 100%; background: var(--marke); border-radius: inherit; }
.ad-anteil-wert { min-width: 4.5em; text-align: right; }

.ad-detail { margin-top: 12px; padding: 12px; }
.ad-detail summary { cursor: pointer; font-weight: 650; }
.ad-detail h4 { margin: 12px 0 4px; font-size: var(--fs-label); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 599px) {
  .ad-kopf-knoepfe, .ad-kopf-aktionen { width: 100%; margin-left: 0; }
  .ad-kopf-knoepfe .knopf, .ad-kopf-aktionen .knopf { flex: 1 1 auto; min-height: var(--tipp); }
  .ad-kz-leiste { grid-template-columns: 1fr 1fr; }
  .ad-gruppen { grid-template-columns: 1fr; }
  .ad-filter .feld { flex: 1 1 100%; }
  .ad-filter input { min-height: var(--tipp); }
  .ad-seiten { width: 100%; }
  /* Drei Bereiche nebeneinander: gleich breit, Text darf umbrechen – sonst schiebt der Umschalter die Seite */
  .ad-seiten button { flex: 1 1 0; min-width: 0; min-height: var(--tipp); padding: 4px 6px; white-space: normal; line-height: 1.2; }
  .ad-monat { width: 100%; }
  .ad-monat input { flex: 1 1 auto; min-height: var(--tipp); }
  .ad-anteil { width: 48px; }
}


/* ================= Diagrammfarben (Betreiber-Ansicht) =================
 * Geprüfte kategoriale Reihenfolge (farbfehlsicht-tauglich in dieser Reihenfolge); Farbe gehört zur Fahrschule,
 * nicht zum Rang. „Übrige“ ist bewusst grau. Legende mit Zahlen = Tabellenansicht (Farbe nie allein). */
/* Die Farben selbst stehen als Tokens --viz-1 … --viz-rest ganz oben in :root. */

/* ================= Aufklapp-Menüs der Kopfleiste (Desktop mit Maus) ================= */
.tabs a.hat-menue::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.75; flex: none; }
.nav-menue { position: fixed; z-index: 60; min-width: 232px; max-width: min(320px, calc(100vw - 16px)); padding: 6px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.08); display: grid; gap: 2px; animation: navMenueAuf 0.12s ease-out; }
/* unsichtbare Brücke zwischen Hauptpunkt und Menü, damit der Zeiger auf dem Weg nach unten nichts verliert */
.nav-menue::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav-menue a { display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--r-control); color: var(--ink); text-decoration: none; }
.nav-menue a b { font-weight: 600; font-size: var(--fs-text); }
.nav-menue a span { font-size: var(--fs-klein); color: var(--muted); }
.nav-menue a:hover { background: var(--hover); }
.nav-menue a:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
.nav-menue a[aria-current="page"] { background: var(--marke-bg); }
.nav-menue a[aria-current="page"] b { color: var(--marke-tief); }
@keyframes navMenueAuf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-menue { animation: none; } }
/* „Einstellungen“ am Desktop nur als Zahnrad-Symbol (spart Platz für „Fahrzeuge“); der Name bleibt für Screenreader und als Tooltip */
@media (min-width: 840px) {
  #navEinstellungen .nav-symbol { display: block; width: 20px; height: 20px; }
  #navEinstellungen .nav-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ================= Betreiber: Verlauf als Diagramm, Sarah-Regeln ================= */
.ad-verlauf { padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.ad-verlauf-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ad-verlauf-kopf h2 { font-size: var(--fs-abschnitt); margin: 0; }
.ad-diagramme { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.ad-diagramm { margin: 0; min-width: 0; display: grid; gap: 8px; align-content: start; }
.ad-diagramm figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ad-diagramm figcaption strong { font-size: var(--fs-text); font-weight: 650; }
.ad-diagramm figcaption span { font-size: var(--fs-klein); color: var(--muted); }
.ad-d-flaeche { position: relative; }
.ad-d-flaeche svg { display: block; width: 100%; height: auto; overflow: visible; }
.ad-d-linie { stroke: var(--linie); stroke-width: 1; }
.ad-d-linie.basis { stroke: var(--linie-2, var(--muted-2)); }
.ad-d-achse { font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.ad-d-schraffur { stroke: var(--muted-2); stroke-width: 1.5; opacity: 0.45; }
.ad-d-treffer { fill: transparent; }
.ad-d-treffer.an { fill: rgba(15, 23, 42, 0.06); }
.ad-d-tipp { position: absolute; top: 4px; z-index: 2; min-width: 170px; max-width: 260px; padding: 8px 10px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-control); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14); font-size: var(--fs-klein); pointer-events: none; }
.ad-d-tipp ul { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 3px; }
.ad-d-tipp li, .ad-d-legende li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; }
.ad-d-tipp p { margin: 4px 0 0; color: var(--muted); }
.ad-d-tipp b, .ad-d-legende b { font-variant-numeric: tabular-nums; color: var(--ink); }
.ad-d-punkt { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ad-d-legende { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; font-size: var(--fs-klein); }
.ad-d-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ad-d-fehlt-muster { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; border-radius: 3px; background: repeating-linear-gradient(45deg, var(--muted-2) 0 1.5px, transparent 1.5px 5px); opacity: 0.6; }
.ad-regeln-karte { padding: 16px; display: grid; gap: 12px; max-width: 900px; }
.ad-regeln-karte h2 { font-size: var(--fs-abschnitt); margin: 0; }
.ad-regeln-karte textarea { width: 100%; min-height: 240px; font-family: var(--schrift); line-height: 1.5; }
.ad-regeln-beispiele { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ad-regeln-beispiele li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: var(--r-control); background: var(--flaeche-2); }
@media (max-width: 599px) { .ad-regeln-beispiele li { flex-direction: column; align-items: stretch; } }

/* ================= Chef-Modus: Stufen und Infos an Fahrlehrer ================= */
.wa-chef-wer b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wa-chef-form .feld { flex: 1 1 170px; min-width: 0; }
.wa-chef-infos { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linie); }
.wa-chef-infos h4 { margin: 0; font-size: var(--fs-text); }
.wa-chef-protokoll { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-klein); }

/* ================= Fahrtenbuch und Fahrzeuge ================= */
/* minmax(0, 1fr): sonst wächst die Spalte auf die Breite der Tabelle und die Seite scrollt auf dem Handy seitlich */
.fb-seite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.fb-kopf-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-leiste { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.fb-leiste .feld { min-width: 0; flex: 0 1 280px; }
.fb-leiste select { width: 100%; }
.fb-verwalten { margin-left: auto; padding-bottom: 8px; }
.fb-kz { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fb-kz > div { min-width: 0; }
.fb-kz dd { margin-left: 0; }
.fb-kz .fb-warn dd { color: var(--warn); }
/* position: relative – sonst verlängert der unsichtbare Spaltentitel (.sr, absolut) am rechten Tabellenrand die ganze Seite */
.fb-rahmen { position: relative; }
.fb-tabelle td, .fb-tabelle th { vertical-align: top; }
.fb-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-datum b, .fb-datum span, .fb-neben { display: block; }
.fb-datum span, .fb-neben { font-size: var(--fs-klein); color: var(--muted); font-weight: 400; }
.fb-datum { white-space: nowrap; }
.fb-auffaellig { background: var(--warn-bg); }
.fb-aktion { text-align: right; white-space: nowrap; }
.es-fz-symbol { width: 34px; height: 34px; border-radius: 10px; background: var(--marke-bg); color: var(--marke-tief); display: grid; place-items: center; flex: none; }
/* Monat blättern: ‹ Auswahl › in einer Zeile */
.fb-monat { display: flex; align-items: center; gap: 6px; }
.fb-monat select { flex: 1 1 auto; min-width: 0; }
.fb-monat .icon { flex: none; }
.fb-pruefen-link { font-size: var(--fs-kennzahl); font-weight: 650; line-height: 1.15; color: var(--warn); }
/* Tageskopf in der Tabelle – gliedert die Liste, ohne sie in viele Tabellen zu zerlegen */
.fb-tagzeile th { background: var(--flaeche-2); text-align: left; white-space: normal; padding: 7px 10px; font-size: var(--fs-klein); }
.fb-tagzeile b { font-size: var(--fs-text); }
.fb-tagzeile span { color: var(--muted); font-weight: 400; }
.fb-tagzeile b + span::before { content: " · "; }
.fb-filter .chip { gap: 6px; }
.chip-zahl { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.chip[aria-pressed="true"] .chip-zahl { color: inherit; }
.chip:disabled { opacity: 0.5; cursor: default; }
/* Fahrstunden ohne Fahrzeug: stehen in keinem Fahrtenbuch – sichtbar machen, nicht verschweigen */
.fb-offen { border-left: 3px solid var(--warn); display: grid; gap: 8px; }
.fb-offen h2 { margin: 0; font-size: var(--fs-abschnitt); }
.fb-offen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r-control); overflow: hidden; }
.fb-offen-liste li { background: var(--flaeche); padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fb-fuss { max-width: 80ch; }
/* Fahrzeug und Kilometerstand im Praxisprotokoll: eigener Block, damit die Verknüpfung zum Fahrtenbuch sichtbar ist */
.px-fahrzeug { margin-top: 10px; padding: 10px 12px; background: var(--flaeche-2); border-radius: var(--r-control); display: grid; gap: 6px; }
.px-km-aus { margin: 0; color: var(--muted); }
.px-km-aus.px-km-warn { color: var(--warn); font-weight: 600; }
@media (max-width: 599px) {
  .fb-leiste .feld { flex: 1 1 100%; }
  .fb-verwalten { margin-left: 0; }
  .fb-kopf-knoepfe { width: 100%; }
  .fb-kopf-knoepfe > * { flex: 1 1 auto; justify-content: center; }
  /* Acht Spalten sind auf dem Handy nicht lesbar: aus jeder Zeile wird eine Karte, die Spaltentitel stehen an den
     Zellen (data-sp). Die Tabellenstruktur bleibt für Screenreader und den Export unverändert. */
  .fb-rahmen { overflow: visible; }
  .fb-tabelle { border-collapse: separate; border-spacing: 0 8px; }
  .fb-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fb-tabelle tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 10px 12px; }
  .fb-tabelle tbody tr.fb-tagzeile { display: block; background: none; border: 0; padding: 10px 0 0; }
  .fb-tabelle td, .fb-tabelle th { border-top: 0; padding: 1px 0; white-space: normal; text-align: left; }
  .fb-tabelle td[data-sp]::before { content: attr(data-sp) ": "; color: var(--muted); font-size: var(--fs-klein); }
  .fb-tabelle td.fb-datum, .fb-tabelle td[data-sp="Art"] { grid-column: 1 / -1; }
  .fb-tabelle td.fb-datum::before, .fb-tabelle td[data-sp="Art"]::before, .fb-tabelle td[data-sp="Fahrer"]::before, .fb-tabelle td[data-sp="Prüfung"]::before { content: none; }
  .fb-tabelle td.fb-datum { display: flex; align-items: baseline; gap: 8px; font-weight: 600; }
  .fb-tabelle td.fb-datum span { font-weight: 400; }
  .fb-tabelle td[data-sp="Fahrer"], .fb-tabelle td[data-sp="Prüfung"] { grid-column: 1 / -1; }
  .fb-tabelle td[data-sp="km Start"], .fb-tabelle td[data-sp="km Ende"], .fb-tabelle td[data-sp="Strecke"] { text-align: left; }
  .fb-tabelle td.fb-aktion { grid-column: 1 / -1; text-align: left; padding-top: 6px; }
  .fb-auffaellig { background: var(--warn-bg); }
}