:root {
  --tinte: #16232c;
  --papier: #fff;
  --nebel: #eef2f4;
  --nebel-dunkel: #e2e9ec;
  --rand: #c2ccd3;
  --rand-stark: #2b3a44;
  --wacht-blau: #045c8f;
  --wacht-blau-hell: #0d74ad;
  --wacht-blau-dunkel: #023249;
  --wacht-rot: #c8102e;
  --wacht-rot-bg: #fbe9ec;
  --sidebar-bg: #121a21;
  --sidebar-bg-hell: #1e2933;
  --ok: #2f7d5c;
  --ok-bg: rgba(47, 125, 92, 0.12);
  --warn: #b5790a;
  --warn-bg: rgba(181, 121, 10, 0.14);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  /* Bewusst kantig statt weich (Formensprache von Rettungsmitteln/DIN-Beschriftung, siehe
     Wasserwacht-Kontext): keine Radien, keine Blur-Schatten - Abgrenzung läuft über harte
     1px-Kanten. Der eine verbliebene Schatten (Modal) ist ein harter Versatz ohne Weichzeichner. */
  --schatten-hart: 6px 6px 0 rgba(2, 50, 73, 0.16);
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --sidebar-breite: 248px;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  color: var(--tinte);
  background: var(--papier);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
h1 { font-size: 1.55rem; margin: 0 0 1.25rem; }
/* Kennstreifen: kurzer roter Balken unter jeder Seitenüberschrift, wie der Markierungsstreifen
   auf Wasserwacht-Gerät - das eine wiedererkennbare Element, alles andere bleibt ruhig. */
h1::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 4px;
  background: var(--wacht-rot);
  margin-top: 0.45rem;
}
h2 { font-size: 1.15rem; }

a { color: var(--wacht-blau); }

:focus-visible {
  outline: 2px solid var(--wacht-blau);
  outline-offset: 2px;
}

.icon { width: 18px; height: 18px; flex-shrink: 0; }
.logo { display: block; flex-shrink: 0; }

/* --- App-Shell: feste Sidebar + Inhalt --- */

body.app-shell {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  background: var(--nebel);
}

.nav-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-breite);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.4rem 1.25rem 1rem;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: #fff;
}
.sidebar-brand .logo { width: 28px; height: 28px; }

.sidebar .wave-divider { color: var(--wacht-rot); opacity: 0.8; }
.sidebar .wave-divider svg { height: 6px; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 1rem 0.75rem;
  flex: 1;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem 0.55rem 0.65rem;
  border-left: 4px solid transparent;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.89rem;
}
.sidebar-nav a:hover { background: var(--sidebar-bg-hell); color: #fff; }
.sidebar-nav a.active {
  background: var(--sidebar-bg-hell);
  border-left-color: var(--wacht-rot);
  color: #fff;
  font-weight: 700;
}

.sidebar-lager {
  margin: 0.5rem 0.75rem 1.1rem;
  padding: 0.65rem 0.8rem;
  background: var(--sidebar-bg-hell);
  border-left: 4px solid var(--wacht-rot);
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

/* Kleine Versionskennung ganz unten in der Sidebar (release-... bzw. ref-<hash>). margin-top:
   auto schiebt sie im Flex-Spalten-Layout an den unteren Rand. */
.sidebar-version {
  margin-top: auto;
  padding: 0.6rem 1.25rem 0.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.4);
  word-break: break-all;
}

.mobile-topbar { display: none; }
.nav-toggle-btn {
  display: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle-btn:hover { background: rgba(255, 255, 255, 0.12); }
.nav-toggle-btn span,
.nav-toggle-btn span::before,
.nav-toggle-btn span::after {
  display: block;
  width: 1.3rem;
  height: 2px;
  background: currentColor;
}
.nav-toggle-btn span { position: relative; }
.nav-toggle-btn span::before,
.nav-toggle-btn span::after { content: ""; position: absolute; left: 0; }
.nav-toggle-btn span::before { top: -6px; }
.nav-toggle-btn span::after { top: 6px; }

.nav-overlay { display: none; }

.app-main { flex: 1; min-width: 0; }

main {
  background: var(--papier);
  border: 1px solid var(--rand);
  padding: 1.75rem;
  /* Breite Tabellen (Notfallliste, Steckbriefe) sollen auf Breitbild die Fläche nutzen statt
     horizontal zu scrollen - Formulare bleiben über .form-grid (max-width 900px) trotzdem
     lesbar schmal. Deckel bei 1600px, damit es auf Ultrawide nicht endlos aufreißt. */
  max-width: 1600px;
  margin: 1.75rem auto;
}

.pin-anzeige {
  font-size: clamp(2.2rem, 11vw, 5rem);
  font-weight: 800;
  letter-spacing: 0.35em;
  text-align: center;
  font-family: var(--mono);
  background: var(--wacht-rot);
  color: #fff;
  padding: 0.75rem 0.5rem;
  border-radius: var(--radius);
  margin: 0 0 1rem;
  max-width: 100%;
  overflow-wrap: break-word;
}

.pin-qr {
  background: #fff;
  border: 1px solid var(--rand);
  padding: 1rem;
  border-radius: var(--radius);
  margin: 0 0 1rem;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}
.pin-qr svg { display: block; width: 100%; height: auto; }

.flashes { list-style: none; padding: 0; margin: 0 0 1rem; }
.flashes li {
  padding: 0.6rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--nebel);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--rand-stark);
}
.flashes li.error { background: var(--wacht-rot-bg); border-color: var(--wacht-rot); color: var(--wacht-rot); }
.flashes li.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }

/* --- Tabellen --- */

table { border-collapse: collapse; width: 100%; margin: 0; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--rand); }
/* Harte Linie unter der Kopfzeile - der Tabellenkopf soll wie eine Beschriftungsleiste vom
   Inhalt abgesetzt sein, nicht weich hineinlaufen. */
th { background: var(--nebel); white-space: nowrap; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: #38474f; border-bottom: 2px solid var(--rand-stark); }
tbody tr:nth-child(even) td { background: #fafcfd; }
tbody tr:hover td { background: var(--nebel); }

tr.zeile-klickbar { cursor: pointer; }
tr.zeile-klickbar:hover td { background: var(--nebel-dunkel); }

th[onclick] { cursor: pointer; user-select: none; }
th[onclick]:hover { color: var(--wacht-rot); }
th[data-sort-richtung="auf"]::after { content: " \25B2"; }
th[data-sort-richtung="ab"]::after { content: " \25BC"; }

/* Spaltenfilter-Zeile (automatisch erzeugt für table.mit-spaltenfilter, siehe tabellen.js).
   Bewusst nicht sticky: beide Kopfzeilen bei top:0 würden sich überlagern - die Überschrift
   bleibt kleben, die Filterzeile darf mitscrollen. */
tr.spaltenfilter th { position: static; padding: 0.25rem 0.35rem; background: var(--papier); }
tr.spaltenfilter input {
  width: 100%;
  min-width: 5rem;
  min-height: 30px;
  padding: 0.2rem 0.4rem;
  font-size: 0.82rem;
  border: 1px solid var(--rand);
}

.btn-zelle {
  display: block; width: 100%; text-align: center; background: none; border: none;
  padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
}
.btn-zelle:hover { color: var(--wacht-rot); text-decoration: underline; }

/* --- Plan-Raster (Wochenplan): Stecktafel-Metapher. Jede Zelle ist ein Steckplatz: belegt =
   Karte mit farbigem Kennstreifen (rot = Termin für alle/Pflicht, blau = eigener Eintrag bzw.
   Buchung), frei = gestrichelter Einschub mit "+" als Einlade-Fläche statt eines toten "–".
   Zeilen-Zebra/-Hover sind hier abgeschaltet: nicht die Zeile reagiert, sondern der Steckplatz;
   Spalten-Haarlinien machen die Tagesabschnitte zu sichtbaren Fächern. --- */
table.plan-raster td { vertical-align: top; padding: 0.35rem 0.4rem; text-align: center; }
table.plan-raster td:first-child { white-space: nowrap; font-weight: 600; padding: 0.6rem 0.75rem; }
table.plan-raster td + td { border-left: 1px solid var(--nebel-dunkel); }
table.plan-raster tbody tr:nth-child(even) td,
table.plan-raster tbody tr:hover td { background: none; }

/* Verfügbarkeits-Gegenüberstellung (Terminfindung, siehe funktion_plan): freie gemeinsame Slots
   grün hinterlegt. !important, weil die (spezifischere) Zebra-/Hover-Regel oben sonst gewinnt. */
table.plan-raster td.slot-beide-frei { background: var(--ok-bg) !important; }
.plan-vergleich { margin-top: 0.3rem; font-size: 0.72rem; text-align: center; color: #5b6b74; }
.plan-vergleich.frei { color: var(--ok); font-weight: 600; }
.plan-vergleich-hinweis { font-size: 0.85rem; color: #4c5c66; margin: 0.3rem 0 0; }

.plan-slot {
  display: block; width: 100%; min-height: 2.6rem; text-align: left;
  background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
}
.plan-karte {
  background: var(--papier);
  border: 1px solid var(--rand);
  padding: 0.3rem 0.55rem;
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: center;
}
.plan-karte + .plan-karte { margin-top: 0.3rem; }
/* "Für alle"-Termine (Pflicht, in jeden Plan übernommen) fett, gruppen-/funktionsspezifische
   Einträge normal - so unterscheidet der Wochenplan die beiden ohne "Alle:"-Präfix. */
.plan-karte.alle { font-weight: 700; }
.plan-karte .plan-zeit { display: block; font-family: var(--mono); font-size: 0.72rem; font-weight: 400; color: #5b6b74; }
.plan-slot:hover .plan-karte, .plan-slot:focus-visible .plan-karte { border-color: var(--wacht-blau); background: var(--nebel); }

/* Karte mit direktem Löschen: das × sitzt in der oberen rechten Ecke der Karte (eigenes
   Mini-Formular als Geschwister, NICHT im Karten-Element - sonst Button-im-Button). Ein Klick
   löscht nach einer einzigen Rückfrage, ohne den Umweg übers Modal. */
.plan-karte-wrap { position: relative; }
.plan-karte-wrap + .plan-karte-wrap { margin-top: 0.3rem; }
.plan-karte-wrap .plan-karte { padding-right: 1.35rem; }
.plan-karte-x { position: absolute; top: 0; right: 0; margin: 0; line-height: 0; }
.plan-karte-x button {
  border: none; background: none; cursor: pointer;
  color: #93a2ab; font-size: 1.05rem; line-height: 1; padding: 0.15rem 0.35rem;
}
.plan-karte-x button:hover, .plan-karte-x button:focus-visible { color: var(--wacht-rot); }

/* Steckplatz-Öffner: leerer Slot als gestrichelter "+"-Einschub, belegter Slot als schmale
   "+ Eintrag"-Zeile unter den Karten - beide öffnen dasselbe Bearbeiten-/Anlegen-Modal. */
.plan-slot-add {
  display: block; width: 100%;
  background: none; border: none; cursor: pointer;
  color: #7a8992; font: inherit; text-align: center; padding: 0;
}
.plan-karte-wrap + .plan-slot-add { margin-top: 0.3rem; }
.plan-slot-add .plan-add-plus { display: block; font-size: 0.78rem; font-weight: 600; padding: 0.15rem; }
.plan-slot-add:hover .plan-add-plus { color: var(--wacht-blau); }
.plan-slot-add:hover .plan-frei, .plan-slot-add:focus-visible .plan-frei {
  border-color: var(--wacht-blau); color: var(--wacht-blau); background: var(--nebel);
}

/* Freier Steckplatz - auch in Dienstplan-/Nachtwache-Zellen (dort in .btn-zelle) statt "–".
   inline-flex statt flex: atomare Inline-Box, damit der Hover-Unterstrich von .btn-zelle nicht
   durch das "+" durchschlägt. */
.plan-frei {
  display: inline-flex; width: 100%; align-items: center; justify-content: center;
  min-height: 2.5rem;
  border: 1px dashed var(--rand);
  color: #93a2ab;
  font-size: 1.05rem;
  font-weight: 600;
}
.plan-frei::before { content: "+"; }
.plan-slot:hover .plan-frei, .plan-slot:focus-visible .plan-frei,
.btn-zelle:hover .plan-frei, .btn-zelle:focus-visible .plan-frei {
  border-color: var(--wacht-blau); color: var(--wacht-blau); background: var(--nebel);
}
/* In nicht-editierbaren Ansichten (z.B. Dienstplan für eingeschränkte Rollen) steht .plan-frei
   ohne Knopf drumherum: gleiche Leere-Kennzeichnung, nur ohne Hover-Einladung. */
tr.zeile-aktiv td { background: var(--ok-bg); }
tr.zeile-aktiv:nth-child(even) td { background: var(--ok-bg); }

.table-scroll {
  width: 100%;
  overflow: auto;
  /* Lange Tabellen scrollen IN diesem Container (max-height), nicht mit der Seite - nur so
     bleibt die sticky-Kopfzeile (th unten) beim Scrollen tatsächlich sichtbar. Der frühere
     Versuch über "overflow-y: visible" gegen die Seite funktionierte nicht: sobald overflow-x
     auf auto steht, rechnet der Browser visible ohnehin zu auto um (CSS-Spec-Regel für
     gemischte overflow-Werte), und der Header klebte nur innerhalb eines nie scrollenden
     Blocks. */
  max-height: calc(100vh - 220px);
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
  border: 1px solid var(--rand);
}
.table-scroll th { position: sticky; top: 0; z-index: 1; }

.table-scroll.sticky-col td:first-child,
.table-scroll.sticky-col th:first-child {
  position: sticky;
  left: 0;
  background: var(--papier);
  border-right: 2px solid var(--rand-stark);
}
.table-scroll.sticky-col tbody tr:nth-child(even) td:first-child { background: #fafcfd; }
.table-scroll.sticky-col th:first-child { background: var(--nebel); z-index: 2; }

form.inline { display: inline; }

/* --- Formulare --- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem 1.5rem;
  max-width: 900px;
}
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.92rem; }

input, select, textarea, button { font: inherit; }
input[type="text"], input[type="email"], input[type="date"], input[type="tel"],
input[type="number"], input[type="password"], select, textarea {
  border: 1px solid var(--rand);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.65rem;
  min-height: 44px;
  background: var(--papier);
  color: var(--tinte);
}
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; }
textarea { min-height: unset; }
input[type="checkbox"] { width: 1.2rem; height: 1.2rem; vertical-align: middle; }

fieldset { border: 1px solid var(--rand); border-radius: var(--radius); margin: 1rem 0; padding: 1rem 1.1rem; min-width: 0; }
fieldset.sensibel { border-color: var(--wacht-rot); background: var(--wacht-rot-bg); }
fieldset.sensibel legend { color: var(--wacht-rot); }
/* Legenden im selben Beschriftungsstil wie Tabellenköpfe - Formularblöcke lesen sich so wie
   beschriftete Geräteabschnitte, nicht wie Karten. */
legend { font-weight: 700; padding: 0 0.4rem; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.04em; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--wacht-blau);
  background: var(--wacht-blau);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
}
.btn:hover { background: var(--wacht-blau-dunkel); border-color: var(--wacht-blau-dunkel); }
.btn.secondary { background: #fff; color: var(--wacht-blau); }
.btn.secondary:hover { background: var(--nebel); }
.btn.danger { background: var(--wacht-rot); border-color: var(--wacht-rot); }
.btn.danger:hover { background: #a30d26; border-color: #a30d26; }

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color 0.12s ease; }
  .sidebar { transition: transform 0.2s ease; }
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: 0.01em;
  background: var(--nebel);
  border: 1px solid var(--rand);
}
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }

/* Nachtwachenbericht: ein Eintrag je Karte - Verantwortlicher + Uhrzeit im Kopf, der Text
   darunter als nicht editierbarer Block; Bearbeiten/Löschen als kleine Knöpfe am rechten
   Rand. Die beiden Schichten liegen auf Reitern (Optik der Personen-Tabs, nur als <button>
   mit clientseitigem Umschalten) - beim Drucken erscheinen beide untereinander (siehe
   nachtwache/bericht.html). */
.tabs button.tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
.bericht-schicht.versteckt { display: none; }
@media print {
  .bericht-schicht.versteckt { display: block; }
  h3.bericht-schicht-titel.nur-druck { display: block; }
}
.bericht-schicht-titel { margin-top: 1.5rem; }
.bericht-eintrag {
  border: 1px solid var(--rand);
  background: var(--nebel);
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
}
.bericht-eintrag-kopf {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}
.bericht-eintrag-zeit { font-family: var(--mono); font-size: 0.85rem; opacity: 0.75; }
.bericht-eintrag-aktionen { margin-left: auto; display: flex; gap: 0.25rem; }
.btn-eintrag-aktion {
  border: 1px solid var(--rand);
  background: transparent;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
}
.btn-eintrag-aktion:hover { background: var(--nebel); border-color: currentColor; }
.btn-eintrag-aktion.gefahr:hover { color: #a30d26; }
.bericht-leer { opacity: 0.7; }
.bericht-formular { margin-bottom: 1rem; }

/* Diktier-Knopf während laufender Aufnahme (siehe diktat.js) - pulsiert, damit auf einen
   Blick erkennbar ist, dass das Mikrofon gerade offen ist. */
.diktat-knopf { margin-top: 0.35rem; }
.btn.diktat-laeuft { background: #a30d26; border-color: #a30d26; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .btn.diktat-laeuft { animation: diktat-puls 1.2s ease-in-out infinite; }
  @keyframes diktat-puls { 50% { opacity: 0.6; } }
}

.filterbar { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: end; }
.filterbar .voll { flex-basis: 100%; }

/* Gestapeltes Eingabeformular (Modale, Bearbeitungs-Fieldsets): ein Feld pro Zeile in fester
   Leserichtung wie auf einem Formularblatt, Aktionen am Ende hinter einer Haarlinie -
   .filterbar bleibt echten horizontalen Filter-/Auswahlzeilen vorbehalten und ist KEIN
   Formular-Layout (mischbreite Felder brechen dort willkürlich um). */
.form-stapel { display: flex; flex-direction: column; gap: 0.85rem; max-width: 480px; margin: 0 0 1rem; }
.form-stapel label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.3rem; }
.form-stapel input:not([type="checkbox"]), .form-stapel select, .form-stapel textarea { width: 100%; }
/* Zwei zusammengehörige Kurzfelder (Von/Bis) teilen sich eine Zeile - ein Zeitraum ist EIN
   Konzept, kein Grund für zwei Zeilen. */
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-aktionen { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; padding-top: 0.85rem; border-top: 1px solid var(--rand); }
/* Destruktive Aktion an die Gegenkante, weg vom Speichern-Knopf - Abstand als Fehlgriffschutz. */
.form-aktionen .danger { margin-left: auto; }

/* Reine Lese-Ansicht von Stammdaten (z.B. Personen-Detail): Beschriftung wie eine Tabellen-
   Kopfzeile (klein, grau, Versalien) über dem Wert - dieselbe Legende-/th-Formensprache wie
   der Rest der App, nur ohne Eingabefeld dahinter. Ersetzt fortlaufende "Label: Wert · Label:
   Wert"-Fließtextzeilen, die bei vielen Feldern (Telefon, Handy, E-Mail, ...) unübersichtlich
   werden. */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.9rem 1.5rem;
}
.info-grid .info-feld { min-width: 0; }
.info-grid .info-feld.voll { grid-column: 1 / -1; }
.info-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5b6b74;
  margin-bottom: 0.2rem;
}
.info-nebenwert { color: #5b6b74; font-size: 0.88rem; }
.info-status-form { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--rand); }

hr { border: 0; border-top: 1px solid var(--rand); margin: 1.25rem 0; }

/* Einheitliche Kopfzeile unter jeder h1: Aktionen links, Suche rechts - genau EINE .toolbar
   pro Seite statt gestapelter <p>-Zeilen mit Knöpfen, Suchfeldern und Anlege-Fieldsets. */
.toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0 0 1.25rem; }
/* Zwischentitel in einer Blätter-Toolbar (z.B. "Nacht Mo–Di" zwischen Vor/Zurück-Knöpfen) -
   ohne eigenen Absatzabstand, damit er auf der Knopfzeile mittig sitzt. */
.toolbar h2 { margin: 0; }
.toolbar .toolbar-suche { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }
.toolbar .toolbar-suche label { font-weight: 600; font-size: 0.92rem; }
@media (max-width: 600px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .toolbar-suche { margin-left: 0; }
  .toolbar .toolbar-suche input { flex: 1; }
  /* min-width: 0 hebt die Min-Content-Untergrenze der Selects auf - ein Dropdown mit langem
     Optionstext (z.B. "Gruppe 0 – Betreuerkinder & Minis") würde sonst die ganze gestapelte
     Toolbar über den main-Rahmen hinausdrücken statt den Text abzuschneiden. */
  .toolbar select, .toolbar input:not([type="checkbox"]) { width: 100%; min-width: 0; }
}

.tabs {
  display: flex;
  gap: 1.25rem;
  border-bottom: 1px solid var(--rand);
  margin: 0 0 1.1rem;
}
.tabs .tab {
  padding: 0.5rem 0.1rem 0.7rem;
  border-bottom: 3px solid transparent;
  color: #4c5c66;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
}
.tabs .tab:hover { color: var(--tinte); }
.tabs .tab.active { color: var(--wacht-rot); border-bottom-color: var(--wacht-rot); }

.checkbox-liste {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  /* Im Modal (Dienstplan-/Nachtwache-Zuweisung) deutlich höher als in Inline-Formularen:
     mindestens 12 Einträge sollen ohne Scrollen sichtbar sein (12 Zeilen à ~21px + Abstände
     + Innenabstand ≈ 340px), gedeckelt über 60vh für kleine Bildschirme. */
  max-height: 190px;
  min-width: 200px;
  overflow-y: auto;
  border: 1px solid var(--rand);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  background: var(--papier);
  margin-top: 0.35rem;
}
.checkbox-liste label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
  font-size: 0.9rem;
  margin: 0;
}
.modal .checkbox-liste { max-height: min(340px, 60vh); }

.medizin-block { white-space: pre-wrap; }

.jahreslogo-thumb {
  display: block;
  height: 52px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rand);
  background: var(--papier);
  cursor: pointer;
  padding: 0.2rem;
}
.jahreslogo-thumb:hover { border-color: var(--wacht-blau); }
.jahreslogo-platzhalter { min-height: 44px; padding: 0.4rem 0.8rem; }

.sidebar-lager .jahreslogo-thumb-sidebar {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #fff;
  vertical-align: middle;
  margin-right: 0.5rem;
}

/* --- Jahres-Logo: Ansicht/Bearbeitung im Modal --- */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 20, 30, 0.55);
  z-index: 30;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal.offen { display: flex; }
.modal-inhalt {
  background: var(--papier);
  border: 2px solid var(--rand-stark);
  padding: 1.75rem;
  max-width: 480px;
  width: 100%;
  position: relative;
  box-shadow: var(--schatten-hart);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
.modal-inhalt h2 { margin-top: 0; }
.modal-schliessen {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--tinte);
  padding: 0.2rem 0.4rem;
}
/* --- Eintrags-Modale der Planungsansichten (Wochenplan, Gesamtplan): Kicker-Zeile über der
   Überschrift + Auswahl-Bausteine. Die Formensprache folgt der Stecktafel: ein wählbarer
   Abschnitt/eine Gruppe ist ein Steckplatz-Chip ("+" = frei, gefüllt = gesteckt), nicht eine
   generische Checkbox-Zeile. --- */

.modal-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wacht-blau);
}
.modal-eyebrow + h2 { margin-top: 0; }
/* Abschnitts-Zwischentitel im Modal (z.B. "Eintrag bearbeiten" / "Neuer Termin"), im selben
   Beschriftungsstil wie Tabellenköpfe/Legenden - trennt gestapelte Formulare per Haarlinie. */
.modal-inhalt h3 {
  margin: 1.4rem 0 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5b6b74;
}

/* Zwei-Wege-Umschalter (z.B. "Gruppen buchen" / "Eigener Eintrag"): echte Radios, nur visuell
   als Segmente. Das Radio liegt unsichtbar ÜBER seinem Segment (inset: 0), bleibt also klick-
   und fokussierbar - kein display:none, sonst bricht die Tastaturbedienung. */
.segment-schalter {
  display: flex;
  border: 1px solid var(--rand-stark);
  background: var(--papier);
}
.segment-schalter label { flex: 1 1 0; position: relative; margin: 0; }
.segment-schalter input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segment-schalter .segment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.4rem 0.6rem;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  text-align: center;
  color: #4c5c66;
}
.segment-schalter label + label .segment { border-left: 1px solid var(--rand-stark); }
.segment-schalter label:hover input:not(:checked) + .segment { background: var(--nebel); }
.segment-schalter input:checked + .segment { background: var(--wacht-blau); color: #fff; }
/* Roter Fokusrahmen statt blauem: auf dem blau gefüllten aktiven Segment wäre Blau unsichtbar. */
.segment-schalter input:focus-visible + .segment { outline: 2px solid var(--wacht-rot); outline-offset: -4px; }

/* Steckplatz-Chips: Mehrfachauswahl kurzer Einheiten (Tagesabschnitte, Gruppen). Zustände wie
   auf der Stecktafel: "+" = frei wählbar, "✓" auf Blau = gesteckt, ausgegraut mit "×" und
   Begründung = nicht verfügbar. */
.chip-auswahl { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.35rem; }
.chip-auswahl label { position: relative; margin: 0; }
.chip-auswahl input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip-auswahl .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rand);
  background: var(--papier);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  user-select: none;
}
.chip-auswahl .chip::before { content: "+"; color: #93a2ab; }
.chip-auswahl .chip small { font-weight: 400; font-size: 0.75rem; letter-spacing: 0.01em; }
.chip-auswahl label:hover .chip { border-color: var(--wacht-blau); }
.chip-auswahl input:checked + .chip { background: var(--wacht-blau); border-color: var(--wacht-blau); color: #fff; }
.chip-auswahl input:checked + .chip::before { content: "\2713"; color: #fff; }
.chip-auswahl input:focus-visible + .chip { outline: 2px solid var(--wacht-blau); outline-offset: 2px; }
.chip-auswahl input:disabled + .chip {
  background: var(--nebel);
  border-color: var(--rand);
  color: #93a2ab;
  cursor: not-allowed;
}
.chip-auswahl input:disabled + .chip::before { content: "\00d7"; }
.chip-auswahl input:disabled { cursor: not-allowed; }

/* Erläuterung unter einem Feld/einer Auswahl - kleiner, grauer Einzeiler statt Klammerzusatz
   in der Beschriftung. */
.feld-hinweis { margin: 0.35rem 0 0; font-size: 0.8rem; color: #5b6b74; }

/* Verfügbarkeits-Zeilen im Gruppenplan ("welche Funktionen sind in diesem Slot noch buchbar")
   sind standardmäßig aus und werden über den Knopf "Freie Slots anzeigen" zugeschaltet
   (Klasse auf #gruppen-wochenplan, siehe gruppenliste.html) - dauerhaft eingeblendet machen
   sie das Raster unruhig. */
.frei-optionen { display: none; }
.freie-slots-sichtbar .frei-optionen { display: block; }

/* Buchungsliste im Gruppenplan-Modal: je buchbarer Funktion ein Knopf, belegte Funktionen als
   ausgegraute Zeile mit Begründung statt eines Knopfs, der serverseitig sowieso abgelehnt
   würde. Der Zusatz "gemeinsam mit ..." steht neben dem Knopf: eine Funktion kann mehrere
   Gruppen im selben Slot nehmen, das soll man vor dem Buchen sehen. */
.buchen-liste { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.35rem; }
.buchen-liste form { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.buchen-zusatz { font-size: 0.8rem; color: #5b6b74; }
.buchen-belegt {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rand);
  background: var(--nebel);
  color: #93a2ab;
  font-weight: 600;
  font-size: 0.9rem;
}
.buchen-belegt small { font-weight: 400; font-size: 0.8rem; }

/* Hinweisblock im Modal (z.B. "Gesamtplan-Termin belegt diesen Abschnitt") - gleiche Sprache
   wie die Flash-Meldungen, aber ohne deren Listen-Kontext. */
.hinweis-block {
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--nebel);
  border-left: 4px solid var(--rand-stark);
  font-size: 0.88rem;
}

.jahreslogo-gross {
  display: block;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  margin: 0 auto 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rand);
}
.logo-aktionen { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

/* --- Nachtwachenplan (Ausfüll-/Druckübersicht) --- */

.nw-plan { table-layout: fixed; }
.nw-plan th, .nw-plan td {
  padding: 0.3rem 0.4rem;
  vertical-align: top;
  font-size: 0.82rem;
  line-height: 1.3;
  text-align: center;
}
.nw-plan th { white-space: normal; }
.nw-plan .nw-nacht { font-weight: 700; white-space: nowrap; vertical-align: middle; }
.nw-plan .nw-zelle { padding: 0.15rem 0.4rem; }
.nw-slot {
  min-height: 1.3em;
  padding: 0.1rem 0.15rem;
  border-bottom: 1px dotted var(--rand);
}
.nw-slot:last-child { border-bottom: none; }

@media print {
  .nw-plan th, .nw-plan td { font-size: 10pt; }
  .nw-slot { border-bottom-color: #999; }
}

.zugang-card { max-width: 420px; margin: 3rem auto; }
.zugang-logo { width: 84px; height: 84px; margin: 0 auto 1rem; }

/* --- Mobile: Sidebar wird zur Slide-in-Schublade --- */

@media (max-width: 900px) {
  body.app-shell { display: block; }

  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--sidebar-bg);
    color: #fff;
    padding: 0.7rem 1rem;
    position: sticky;
    top: 0;
    z-index: 12;
  }
  .mobile-topbar .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
  .mobile-topbar .brand-label { display: none; }
  .mobile-topbar .icon { width: 22px; height: 22px; }
  .mobile-topbar .logo { width: 24px; height: 24px; }
  .mobile-topbar .spacer { flex: 1; }
  .mobile-topbar .aktives-lager {
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.18);
    padding: 0.25rem 0.6rem;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-toggle-btn { display: flex; color: #fff; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 78vw;
    max-width: 300px;
    transform: translateX(-100%);
    z-index: 20;
    border-right: 2px solid var(--wacht-rot);
  }
  .nav-toggle:checked ~ .sidebar { transform: translateX(0); }

  .nav-toggle:checked ~ .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(6, 20, 30, 0.45);
    z-index: 15;
  }

  .app-main { width: 100%; }
  main { margin: 1rem; padding: 1.1rem; border-radius: var(--radius); }
  h1 { font-size: 1.35rem; }
}

@media (max-width: 600px) {
  main { margin: 0.6rem; padding: 1rem; }
  .filterbar { flex-direction: column; align-items: stretch; }
  .filterbar > div { width: 100%; }
  .filterbar select, .filterbar input:not([type="checkbox"]) { width: 100%; }
  th, td { padding: 0.5rem 0.55rem; font-size: 0.92rem; }
}

/* Umkehrung von .no-print: nur beim Drucken sichtbar (z.B. Klartext-Fallback für ein Feld,
   das am Bildschirm als Formular/Dropdown editierbar ist, siehe betreuereinteilung.html). */
.nur-druck { display: none; }

@media print {
  .nur-druck { display: inline; }
  /* Block-Container (z.B. die gruppierte Druckansicht der Betreuereinteilung) brauchen beim
     Drucken echtes Block-Layout, sonst zerlegt display:inline die enthaltenen Tabellen. */
  div.nur-druck { display: block; }

  /* Standardgröße für alle Seiten: A4 Hochformat. Einzelne Vorlagen mit breiten Tabellen
     (Notfallliste, Gruppen-Steckbrief, Wochenplanung) überschreiben das gezielt über ein
     eigenes {% block extra_head %}<style>@page{size:A4 landscape}</style>{% endblock %} in
     ihrem Template statt über CSS Named Pages hier - Named Pages (page: quer) werden von
     Firefox nicht zuverlässig unterstützt, ein simples @page{size:landscape} pro Dokument
     funktioniert dagegen browserübergreifend, weil jede dieser Seiten ohnehin als einzelnes
     Dokument gedruckt wird (kein Mischbetrieb Hoch-/Querformat innerhalb einer Druckausgabe
     nötig). */
  @page { size: A4 portrait; margin: 14mm; }

  /* min-height: 100vh vom Bildschirm-Layout würde beim Drucken eine volle (ggf. leere) Seite
     erzwingen, auch wenn der Inhalt kürzer ist - genauso schiebt der 1.5rem-Restabstand unter
     einer seitenfüllenden Tabelle sonst eine leere Folgeseite an. */
  body.app-shell { display: block !important; min-height: 0; }
  .sidebar, .mobile-topbar, .nav-overlay, .no-print { display: none !important; }
  .app-main { width: 100%; }
  main { padding: 0; margin: 0; max-width: none; border: none; }
  h1::after { display: none; }
  .table-scroll { overflow: visible; border: none; max-height: none; margin-bottom: 0; }

  /* Kompaktere Tabellen beim Drucken (Vorbild: Nachtwachenplan) - deutlich engeres Padding und
     kleinere Schrift als am Bildschirm, damit z.B. 15 Kinder pro Gruppe im Steckbrief locker
     auf eine A4-Seite passen, statt auf Seite 2 überzulaufen. */
  h1 { font-size: 1.2rem; margin-bottom: 0.6rem; }
  h2 { font-size: 1rem; margin: 0 0 0.4rem; }
  table { font-size: 9pt; }
  th, td { padding: 0.2rem 0.35rem; line-height: 1.25; }
  th { font-size: 8pt; }

  /* Plan-Raster auf Papier = Wandplan: Karten mit Kennstreifen drucken mit, freie Steckplätze
     bleiben leere Fächer (kein "+", kein "–"). */
  .plan-frei { display: none; }
  .plan-karte { break-inside: avoid; font-size: 8.5pt; padding: 0.15rem 0.35rem; }
  .plan-karte .plan-zeit { font-size: 7pt; }
  /* Verfügbarkeits-Markierung ist eine Bildschirm-Planungshilfe - nicht mitdrucken. */
  table.plan-raster td.slot-beide-frei { background: none !important; }

  /* Seitenumbruch VOR jedem weiteren Steckbrief statt NACH jedem: die frühere
     page-break-after-Variante mit :last-child-Ausnahme erzeugte eine leere Schlussseite,
     sobald nach dem letzten Block noch irgendein Geschwister-Element (z.B. ein <script>)
     folgte und :last-child dadurch ins Leere lief. */
  .steckbrief-block + .steckbrief-block { break-before: page; }
}