/*
 * Web-Formulare STANDBY Leuchtfeuer — Layout und Komponenten.
 * Setzt tokens.css voraus. Farben/Flächen AUSSCHLIESSLICH über die
 * semantischen Projekt-Tokens (Dark Mode in M8 = reiner Token-Tausch).
 * Mobile-first: Basisregeln gelten fürs Handy, ab 768px Tablet/Desktop.
 */

/* --- Schrift: Poppins, lokal gehostet (kein CDN) --------------------------- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Poppins/Poppins-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Poppins/Poppins-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Poppins/Poppins-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Poppins/Poppins-Bold.woff2') format('woff2');
}

/* --- Basis ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Sprungziele (#anker) nicht unter die klebende Kopfleiste schieben */
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--space-1));
  /* Kein graues Rechteck beim Antippen. Die Eigenschaft vererbt sich, deshalb
     hier einmal statt je Bedienelement einzeln. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
}

/* --- Text-Selektion: Chromes „Zum Suchen tippen" aussperren ---------------- */
/*
 * Chrome für Android schickt bei einem Tipp auf ein Wort dieses Wort samt
 * umgebendem Kontext an die Google-Suche und blendet unten eine Trefferleiste
 * ein. Die Funktion greift laut Google nur bei Text, der auswählbar und
 * weder interaktiv noch fokussierbar ist. In einer App mit Klarnamen von
 * Pflegefamilien ist das ein Datenabfluss, den wir nicht wollen.
 * Quelle: https://developer.chrome.com/blog/tap-to-search
 *
 * Stufe 1 gilt überall: auf Bedienelementen will ohnehin niemand Text
 * markieren, dort stört die Markierung nur optisch.
 */
.btn,
.ankreuz,
.nav-burger,
.nav-schliessen,
.navi-punkt,
.eintrag-loeschen,
label,
th {
  -webkit-user-select: none;
  user-select: none;
}

/*
 * Stufe 2 gilt nur auf Touch-Geräten, denn nur dort gibt es die Funktion.
 * Abgefragt wird das Zeigegerät, nicht die Fensterbreite: Ein schmal
 * gezogenes Desktop-Fenster bleibt „fine" und damit voll markierbar.
 * Bewusst nicht „any-pointer", das würde jeden Touch-Laptop mit Maus treffen.
 * Eingaben bleiben frei, dort greift die Funktion sowieso nicht.
 * `.auswaehlbar` ist das Ventil für Stellen, an denen längerer Text
 * wirklich zum Kopieren gedacht ist.
 */
@media (hover: none) and (pointer: coarse) {
  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  input,
  textarea,
  select,
  [contenteditable],
  .auswaehlbar {
    -webkit-user-select: text;
    user-select: text;
  }
}

h1, h2, h3 {
  color: var(--ueberschrift);
  line-height: 1.25;
  margin: 0 0 var(--space-2);
}

h1 { font-size: var(--text-2xl); font-weight: 700; }
h2 { font-size: var(--text-xl);  font-weight: 600; }
h3 { font-size: var(--text-lg);  font-weight: 600; }

p { margin: 0 0 var(--space-2); }

a { color: var(--link); }

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

/* --- Kopfleiste --------------------------------------------------------------- */
/*
 * Bleibt beim Scrollen am oberen Rand stehen (sticky statt fixed: der Inhalt
 * behält sein Gerüst, keine Ausgleichs-Polsterung am Body nötig). Der Wert
 * ihrer Höhe steht als --kopf-hoehe in tokens.css, weil die klebenden Köpfe
 * im Inhalt (Lagebild) darunter einrasten müssen.
 * z-index 35: über dem Seiteninhalt, aber unter Menü-Schleier (40) und
 * Slide-in-Menü (50), damit ein offenes Menü die Kopfleiste weiter abdeckt.
 */
.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 35;
  background: var(--flaeche-kopf);
  border-bottom: 1px solid var(--rahmen);
  box-shadow: var(--shadow-sm);
}

.kopfleiste-innen {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 10px var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 64px;
}

.marke {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}

.marke img {
  height: 40px;
  width: auto;
  display: block;
}

/* Dienstname neben dem Logo, durch feine Linie abgesetzt.
   Auf sehr schmalen Handys reicht das Logo (Kopfleiste wird sonst eng). */
.marke-dienst {
  display: none;
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--ueberschrift);
  border-left: 1px solid var(--rahmen);
  padding-left: 12px;
  line-height: 1.2;
}

@media (min-width: 430px) {
  .marke-dienst {
    display: block;
  }
}

/* Kurzform des Kopflinks „Formular ausfüllen", nur auf dem Tablet hochkant */
.kopf-link-kurz {
  display: none;
}

/* Tablet hochkant: vier Kopflinks plus Schalter brauchen die Breite, die
   Wortmarke tritt zurück (seit der Navigation der Startseite, 2026-09-05).
   Seit dem fünften Punkt „ToDos“ (2026-09-16) bis 1099px; der Punkt steht
   dort nur als Icon, die Links rücken etwas zusammen. */
@media (min-width: 768px) and (max-width: 1099px) {
  .marke-dienst {
    display: none;
  }
  .kopf-rechts .kopf-link {
    padding: 10px 8px;
  }
  .kopf-link-todos .kopf-link-text {
    display: none;
  }
  /* „Formular ausfüllen" wird hier zu „Ausfüllen" (2026-09-23) */
  .kopf-link-lang {
    display: none;
  }
  .kopf-link-kurz {
    display: inline;
  }
}

.kopf-link-todos {
  align-items: center;
}

@media (min-width: 1100px) {
  .kopf-link-todos svg {
    display: none;
  }
}

.kopf-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* --- Seitengerüst: Master-Detail ---------------------------------------------- */
.inhalt {
  flex: 1;
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-2);
}

.master-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  align-items: start;
}

/* Formular-Navigation: auf dem Handy zunächst gestapelt (Slide-in folgt in M3) */
.seitenleiste {
  background: var(--flaeche-karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
}

.seitenleiste-titel {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dezent);
  margin: 0 0 var(--space-1);
}

.detail {
  min-width: 0;
}

@media (min-width: 768px) {
  .inhalt {
    padding: var(--space-3);
  }
  .master-detail {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--space-3);
  }
}

/* --- Karten -------------------------------------------------------------------- */
.karte {
  background: var(--flaeche-karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.karte + .karte {
  margin-top: var(--space-2);
}

.text-dezent {
  color: var(--text-dezent);
}

/* --- Buttons ---------------------------------------------------------------------
 * Nach Marken-Baustein, für die Verwaltung dezenter dimensioniert (ca. 40px),
 * auf Touch-Flächen (öffentliche Ausfüllstrecke) mindestens 44px hoch. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 22px;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

.btn svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.btn-primaer {
  background: var(--primaer);
  color: var(--primaer-text);
  box-shadow: var(--shadow-sm);
}

.btn-primaer:hover,
.btn-primaer:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-gelb);
}

.btn-sekundaer {
  background: var(--sekundaer);
  color: var(--sekundaer-text);
  box-shadow: var(--shadow-sm);
}

.btn-sekundaer:hover,
.btn-sekundaer:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-kontur {
  background: transparent;
  color: var(--ueberschrift);
  border: 2px solid var(--rahmen-stark);
}

.btn-kontur:hover,
.btn-kontur:focus-visible {
  border-color: var(--ueberschrift);
}

/* Löschen und andere endgültige Schritte: nur dort, wo es wirklich weh tut. */
.btn-gefahr {
  background: var(--fehler);
  color: var(--gefahr-text);
  box-shadow: var(--shadow-sm);
}

.btn-gefahr:hover,
.btn-gefahr:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-gefahr-kontur {
  background: transparent;
  color: var(--fehler);
  border: 2px solid var(--fehler-rahmen);
}

.btn-gefahr-kontur:hover,
.btn-gefahr-kontur:focus-visible {
  border-color: var(--fehler);
  background: var(--fehler-flaeche);
}

/* Verwaltung: eine Stufe dezenter */
.btn-klein {
  min-height: 40px;
  padding: 7px 18px;
  font-size: var(--text-sm);
}

/* --- Mülleimer immer in der Warnfarbe ------------------------------------
 *
 * Vorgabe Holgi, 2026-09-22: Ein Mülleimer muss überall sofort als Löschen
 * zu lesen sein. Bisher erbte er die Textfarbe und war im dunklen Design
 * weiß wie jedes andere Symbol. icon() hängt jedem Inline-SVG die Klassen
 * "icon icon-<name>" an, hier greift icon-trash.
 */
.icon-trash {
  color: var(--fehler);
}

/* Auf gefülltem rotem Grund bleibt das Symbol weiß. */
.btn-gefahr .icon-trash {
  color: inherit;
}

/* Trägt ein Knopf die Beschriftung mit, ist auch sie warnfarbig (Vorgabe
   Holgi, 2026-09-22): „Löschen" soll wie das Symbol daneben aussehen, sonst
   wirkt der Knopf halb angestrichen. Ein Knopf mit Mülleimer sieht damit aus
   wie .btn-gefahr-kontur, mit einem Unterschied: Der Rahmen bleibt im
   Ruhezustand in seiner gewohnten Farbe, damit die Knöpfe einer Reihe
   zueinander passen. Erst beim Überfahren wird auch der Ring warnfarbig, und
   die Fläche färbt mit, genau wie beim runden Werkzeugknopf am Verlauf. */
.btn-kontur:has(.icon-trash) {
  color: var(--fehler);
}

.btn-kontur:has(.icon-trash):hover,
.btn-kontur:has(.icon-trash):focus-visible,
.vl-knopf:has(.icon-trash):hover,
.vl-knopf:has(.icon-trash):focus-visible {
  border-color: var(--fehler);
  background: var(--fehler-flaeche);
}

/* --- Fußleiste ---------------------------------------------------------------- */
.fussleiste {
  border-top: 1px solid var(--rahmen);
  padding: var(--space-2);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-dezent);
}

/* =============================================================================
 * Formular-Dokument (öffentliche Ausfüllstrecke und Vorschau)
 * Mobile-first; Optik nach Bewerbungsbogen-Referenz, Web-tauglich übersetzt.
 * ========================================================================== */

.inhalt-schmal {
  max-width: 860px;
}

/* --- Meldungen ------------------------------------------------------------- */
.meldung {
  border-radius: var(--radius-md);
  padding: 12px var(--space-2);
  margin-bottom: var(--space-2);
  font-weight: 500;
}

.meldung-hinweis {
  background: var(--hinweis-flaeche);
  border: 1px solid var(--hinweis-rahmen);
  color: var(--text);
}

/* --- Formular-Kopf ----------------------------------------------------------- */
.formular-kopf {
  margin: var(--space-2) 0 var(--space-3);
}

.formular-titel {
  font-size: var(--text-2xl);
  margin-bottom: 6px;
}

.formular-untertitel {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akzent-text);
  background: var(--akzent-flaeche);
  border-radius: var(--radius-full);
  padding: 3px 12px;
  margin: 0 0 var(--space-1);
}

/* Badge abgeschaltet (Definition: "badge": {"aktiv": false}) — unsichtbar,
   aber der Platz bleibt reserviert, damit der Abstand zwischen Titel und
   Einleitung derselbe ist wie bei den übrigen Formularen. */
.formular-untertitel-versteckt {
  visibility: hidden;
}

/* --- Abschnitte ---------------------------------------------------------------- */
.abschnitt {
  background: var(--flaeche-karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-sm);
}

.abschnitt-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-2);
}

.abschnitt-nummer {
  flex-shrink: 0;
  min-width: 40px;
  padding: 0 10px;
  height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(20deg, var(--farbe-navy), var(--farbe-blau) 85%);
  color: var(--farbe-weiss);
  font-size: var(--text-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.abschnitt-titel {
  margin: 0;
  font-size: var(--text-lg);
}

.abschnitt-beschreibung {
  color: var(--text-dezent);
  margin-bottom: var(--space-2);
}

/* Unterüberschrift innerhalb eines Abschnitts (Elementtyp zwischentitel) */
.element-zwischentitel {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: var(--space-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rahmen);
}

.abschnitt-kopf + .element-zwischentitel,
.abschnitt-beschreibung + .element-zwischentitel {
  margin-top: 0;
}

.zwischentitel-nummer {
  flex-shrink: 0;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--fokus);
}

.zwischentitel-text {
  margin: 0;
  font-size: var(--text-base);
  color: var(--ueberschrift);
}

.abschnitt-beschreibung p:last-child {
  margin-bottom: 0;
}

/* --- Elemente -------------------------------------------------------------------- */
.element {
  margin-bottom: var(--space-2);
}

.element:last-child {
  margin-bottom: 0;
}

.feld-label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ueberschrift);
  margin-bottom: 6px;
}

/* Eingaben: mind. 16px Schrift (verhindert iOS-Zoom), Feldoptik der Vorlage */
.eingabe {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: max(16px, 1rem);
  color: var(--feld-text);
  background: var(--feld-hintergrund);
  border: 1px solid var(--feld-rahmen);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 44px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  scroll-margin-top: 96px; /* Label bleibt beim Fokussieren mit im Bild */
}

.eingabe:focus {
  outline: none;
  border-color: var(--farbe-blau);
  box-shadow: 0 0 0 3px var(--fokus-ring);
}

/* Format-Validierung nur als sanfter Hinweis, nicht blockierend */
.eingabe:user-invalid {
  border-color: var(--fehler);
}

textarea.eingabe {
  resize: vertical;
  field-sizing: content;
  min-height: 88px;
  max-height: 40dvh; /* Label bleibt trotz offener Tastatur sichtbar */
  line-height: 1.55;
}

/* Starthöhe nach Punktlinien-Anzahl der Vorlage (field-sizing ignoriert rows) */
textarea.hoehe-md { min-height: 132px; }
textarea.hoehe-lg { min-height: 176px; }

.feld-hinweis {
  font-size: var(--text-sm);
  color: var(--text-dezent);
  margin: 6px 0 0;
}

/* Einzeilige Felder: ab Tablet Label neben dem Feld (Vorlagen-Anmutung).
   align-items: center setzte das Label mittig zum ganzen Block aus Feld UND
   Hinweis, es rutschte also unter die Oberkante des Feldes, sobald ein
   Hinweis darunter stand. Seit dem 2026-09-22 (Klick-Dummy Familienseite)
   stehen beide oben, das Label um den Innenabstand des Feldes nach unten
   geschoben. Felder ohne Hinweis sehen aus wie bisher. */
@media (min-width: 768px) {
  .element-feld {
    display: grid;
    grid-template-columns: minmax(200px, 38%) 1fr;
    gap: 12px;
    align-items: start;
  }
  .element-feld .feld-label {
    margin-bottom: 0;
  }
  .element-feld > .feld-label {
    padding-top: 10px; /* Innenabstand von .eingabe (10px 12px) */
  }
}

/* Datums- und Zahlenfelder sind so breit wie ihr Inhalt: Tag, Monat, Jahr und
   das Kalendersymbol, danach ist Schluss. Zahlenfelder bekommen dasselbe Maß,
   damit die Masken ein gemeinsames Raster behalten; kurze Klapplisten setzt
   der Renderer mit eingabe-kurz dazu. Feste Darstellungsregel seit dem
   2026-09-22, keine Option im Definitionsformat. Nur eine Höchstbreite: Auf
   dem Handy bleibt das Feld so breit wie die Karte. */
.eingabe[type="date"],
.eingabe[type="number"],
.eingabe[inputmode="numeric"],
.eingabe[inputmode="decimal"],
.eingabe.eingabe-kurz {
  max-width: 11.5rem;
}

/* Konstante: Read-only-Wert in Feldoptik */
.konstante-wert {
  background: var(--feld-hintergrund);
  border: 1px dashed var(--feld-rahmen);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--text);
}

/* --- Ankreuz-Optik (Checkboxen/Radios im Markenstil) ----------------------- */
.ankreuz {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ankreuz:hover {
  background: var(--flaeche-dezent);
}

.ankreuz input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ankreuz-box {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border: 2px solid var(--pink-700);
  border-radius: 6px;
  background: var(--flaeche-karte);
  position: relative;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.ankreuz input[type="radio"] + .ankreuz-box {
  border-radius: 50%;
}

.ankreuz input:checked + .ankreuz-box {
  background: var(--pink-700);
}

.ankreuz input:checked + .ankreuz-box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid var(--farbe-weiss);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.ankreuz input:focus-visible + .ankreuz-box {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

.ankreuz-text {
  align-self: center;
}

.ankreuz-solo {
  display: inline-flex;
  padding: 10px;
}

/* --- Auswahl-Gruppen -------------------------------------------------------- */
.element-auswahl {
  border: none;
  padding: 0;
  margin-inline: 0;
  min-inline-size: 0; /* Fieldset-Default (min-content) würde die Karte sprengen */
}

.element-auswahl legend {
  padding: 0;
}

/* Raster der Optionen: mobil 1, ab 768px 2 Spalten (Standard). Setzt ein
   Element --auswahl-spalten (JSON-Feld "spalten"), gilt dieser Wert auf allen
   Breiten, damit kurze Optionen (Ja/Nein, Zahlen) enger zusammenrücken. */
.auswahl-optionen {
  display: grid;
  grid-template-columns: repeat(var(--auswahl-spalten, 1), minmax(0, 1fr));
  gap: 2px 16px;
}

.auswahl-sonstiges {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
}

.auswahl-sonstiges .eingabe {
  margin: 0 12px 8px 48px;
  width: auto;
  min-height: 40px;
}

@media (min-width: 768px) {
  .auswahl-optionen {
    grid-template-columns: repeat(var(--auswahl-spalten, 2), minmax(0, 1fr));
  }
  .auswahl-sonstiges .eingabe {
    max-width: 420px;
  }
}

/* "inline"-Auswahl: Optik wie ein Eingabefeld. Optionen als Zeile; mobil Label
   oben / Optionen darunter, ab Tablet Label links neben den Optionen (spiegelt
   .element-feld). */
.element-auswahl-inline .auswahl-optionen {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
}

@media (min-width: 768px) {
  .element-auswahl-inline {
    display: grid;
    grid-template-columns: minmax(200px, 38%) 1fr;
    gap: 12px;
    align-items: start;
  }
  .element-auswahl-inline .feld-label {
    margin-bottom: 0;
  }
  /* Wie bei .element-feld, gleiches Raster, gleiche Ursache: das Label bleibt
     bei der ersten Optionszeile stehen, auch wenn die Optionen umbrechen
     (2026-09-22). Die 10px sind der Innenabstand von .ankreuz. */
  .element-auswahl-inline > .feld-label {
    padding-top: 10px;
  }
}

/* --- Tabellen ------------------------------------------------------------------ */
/* Handy: jede Zeile als kleine Karte (Spaltenlabel über den Werten) */
.element-tabelle table,
.element-tabelle tbody,
.element-tabelle tr,
.element-tabelle td {
  display: block;
  width: 100%;
}

.element-tabelle thead {
  display: none;
}

.element-tabelle {
  border-collapse: collapse;
}

.tabelle-zeile {
  background: var(--flaeche-karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 12px;
}

.tabelle-zeile td {
  padding: 6px 0;
}

.tabelle-zeile td::before {
  content: attr(data-spalte);
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ueberschrift);
  margin-bottom: 4px;
}

.zelle-statisch {
  font-weight: 500;
}

.zeile-hinzufuegen {
  margin-top: 4px;
}

/* Ab Tablet: echte Tabelle */
@media (min-width: 768px) {
  .element-tabelle table {
    display: table;
    border: 1px solid var(--rahmen);
    border-radius: var(--radius-md);
    border-spacing: 0;
    overflow: hidden;
  }
  .element-tabelle thead {
    display: table-header-group;
  }
  .element-tabelle tbody {
    display: table-row-group;
  }
  .element-tabelle tr {
    display: table-row;
  }
  .element-tabelle th,
  .element-tabelle td {
    display: table-cell;
    width: auto;
    vertical-align: middle;
    text-align: left;
    padding: 8px 10px;
  }
  .element-tabelle th {
    background: var(--flaeche-dezent);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ueberschrift);
    border-bottom: 1px solid var(--rahmen);
  }
  .tabelle-zeile {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .tabelle-zeile + .tabelle-zeile td {
    border-top: 1px solid var(--rahmen);
  }
  .tabelle-zeile td::before {
    display: none;
  }
  .spalte-ankreuz {
    text-align: center !important;
    width: 1%;
    white-space: nowrap;
  }
  .element-tabelle .eingabe {
    min-height: 40px;
    padding: 7px 10px;
  }
}

/* --- Hinweis-Box ------------------------------------------------------------ */
.element-hinweis {
  background: linear-gradient(135deg, rgba(237, 110, 167, 0.07) 0%, rgba(92, 160, 203, 0.07) 100%);
  border-left: 4px solid var(--farbe-pink);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px var(--space-2);
}

.element-hinweis p {
  margin: 0 0 8px;
}

.element-hinweis p:last-child {
  margin-bottom: 0;
}

/* --- Info-Text ---------------------------------------------------------------- */
.element-info p:last-child,
.element-info ul:last-child,
.element-info ol:last-child {
  margin-bottom: 0;
}

/* --- Notiz-Hervorhebung (Texte in eckigen Klammern) -------------------------- */
/* Offene Stellen wie [Name, Funktion] werden aquamarine markiert, damit sofort
   auffällt, wo noch etwas ergänzt werden muss (KONZEPT 6.2). Gilt automatisch für
   alle Definitionsinhalte (einleitung, info, hinweis, beschreibung). */
.notiz {
  color: var(--notiz-text);
  background: var(--notiz-flaeche);
  font-weight: 600;
  padding: 0.05em 0.3em;
  border-radius: var(--radius-sm);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --- Unterschriften ---------------------------------------------------------- */
.element-unterschriften {
  display: grid;
  gap: 12px;
}

@media (min-width: 768px) {
  .element-unterschriften {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* "gestapelt": Unterschriftfelder paarweise in zweispaltigen Zeilen
   untereinander (je Zeile Ort/Datum links, Unterschrift rechts) — statt des
   auto-fit-Rasters exakt zwei Spalten. Mobil bleibt es einspaltig (Basisregel),
   also Ort/Datum und Unterschrift gestapelt. */
@media (min-width: 768px) {
  .element-unterschriften-gestapelt.element-unterschriften {
    grid-template-columns: 1fr 1fr;
    /* großzügiger Abstand zwischen den Unterschrift-Zeilen (1,7 cm wie im PDF);
       der Spaltenabstand zwischen Ort/Datum und Unterschrift bleibt schmal. */
    row-gap: 1.7cm;
    column-gap: 12px;
  }
}

.unterschrift-karte {
  background: var(--feld-hintergrund);
  border: 1px solid var(--feld-rahmen);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.unterschrift-karte .feld-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  color: var(--akzent-text);
}

.unterschrift-karte .eingabe {
  background: var(--flaeche-karte);
}

.unterschrift-vermerk {
  margin: 0;
  color: var(--text-dezent);
  font-size: var(--text-sm);
}

/* Handschriftliche Unterschrift in der Karte (Modul assets/unterschrift/,
   Nachtrag 2026-09-05). Die Vorschau und das gespeicherte Bild liegen auf
   weißem "Papier", auch im Dark Mode: die Tinte ist Navy und muss lesbar
   bleiben. Zustand "unterschrieben" setzt app.js an die Karte. */
.unterschrift-zeichnen .feld-label {
  margin-bottom: 10px;
}

.unterschrift-vorschau,
.unterschrift-bild {
  display: flex;
  align-items: flex-end;
  min-height: 72px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--feld-rahmen);
  border-radius: var(--radius-sm);
}

.unterschrift-vorschau:empty {
  display: none;
}

.unterschrift-vorschau svg,
.unterschrift-bild svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 88px;
}

.unterschrift-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.unterschrieben .unterschrift-aktionen {
  margin-top: 10px;
}

.unterschrift-zeichnen .unterschrift-vermerk {
  margin-top: 8px;
}

.unterschrift-oeffnen[hidden],
.unterschrift-entfernen[hidden],
.unterschrift-text-erneut,
.unterschrieben .unterschrift-text-neu,
.unterschrieben .unterschrift-vermerk {
  display: none;
}

.unterschrieben .unterschrift-text-erneut {
  display: inline;
}

/* Beim Bearbeiten eines Eintrags: geleistete Unterschrift nur als Bild,
   gesperrt (KONZEPT 9.3, Nachtrag 2026-09-05). */
.unterschrift-geleistet .feld-label {
  margin-bottom: 10px;
}

.unterschrift-geleistet .unterschrift-vermerk {
  margin-top: 8px;
}

/* --- Aktionen am Formular-Ende ------------------------------------------------- */
.formular-aktionen {
  margin: var(--space-3) 0;
}

.formular-aktionen .btn {
  width: 100%;
}

@media (min-width: 768px) {
  .formular-aktionen .btn {
    width: auto;
    min-width: 220px;
  }
}

/* =============================================================================
 * Verwaltung: Navigation, Slide-in-Menü, Einträge, Lese-Ansicht (M3)
 * ========================================================================== */

/* --- Burger und Slide-in (Handy) -------------------------------------------- */
.nav-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -8px;
  border-radius: var(--radius-md);
  color: var(--ueberschrift);
  cursor: pointer;
}

.nav-burger:hover {
  background: var(--flaeche-dezent);
}

.nav-overlay {
  display: none;
}

.seitenleiste-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.seitenleiste-kopf .seitenleiste-titel {
  margin: 0;
}

.nav-schliessen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--text-dezent);
  cursor: pointer;
}

@media (max-width: 767px) {
  .seitenleiste {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(320px, 85vw);
    z-index: 50;
    border-radius: 0;
    border-right: 1px solid var(--rahmen);
    box-shadow: var(--shadow-xl);
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform var(--transition-base);
  }
  .nav-schalter:checked ~ main .seitenleiste {
    transform: none;
  }
  .nav-schalter:checked ~ main .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(17, 29, 61, 0.45);
  }
}

@media (min-width: 768px) {
  .nav-burger,
  .nav-schliessen {
    display: none;
  }
}

/* --- Formular-Navigation ------------------------------------------------------ */
.formular-navi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navi-punkt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
}

.navi-punkt svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--text-dezent);
}

.navi-punkt:hover {
  background: var(--flaeche-dezent);
}

.navi-punkt.aktiv {
  background: var(--nav-aktiv);
  color: var(--ueberschrift);
  font-weight: 600;
}

.navi-punkt.aktiv svg {
  color: var(--fokus);
}

.navi-titel {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.navi-anzahl {
  flex-shrink: 0;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--radius-full);
  background: var(--abzeichen-flaeche);
  color: var(--abzeichen-text);
  font-size: var(--text-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Detail-Karten ------------------------------------------------------------- */
.detail-titel {
  font-size: var(--text-xl);
  margin-bottom: var(--space-1);
}

.meta-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--space-2);
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--flaeche-dezent);
  border: 1px solid var(--rahmen);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-dezent);
}

.aktionen-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.meldung-fehler {
  background: var(--fehler-flaeche);
  border: 1px solid var(--fehler-rahmen);
  color: var(--fehler);
}

/* Zeile aus Feldern und einem Knopf, etwa die Abwesenheiten im
   Mitarbeiterverzeichnis (2026-09-12). Auf dem Handy stapeln sich die Teile,
   ab der schmalen Grenze stehen sie nebeneinander. */
.zeile-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 12px 6px;
  min-height: 44px;
}

.zeile-form .feld-label {
  margin-bottom: 0;
  flex: 0 0 auto;
}

.zeile-form .eingabe {
  width: auto;
  flex: 1 1 150px;
  min-width: 0;
}

/* Label und Feld bleiben beim Umbruch beieinander; sonst rutscht auf dem
   Handy ein „Bis" neben das Von-Feld. */
.zeile-paar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 0;
}

.zeile-form .zeile-name {
  flex: 1 1 auto;
}

.zeile-form-neu {
  border-top: 1px solid var(--rahmen);
  margin-top: 4px;
}

/* --- Eintragsliste ------------------------------------------------------------- */
.eintrag-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.eintrag-liste li + li {
  border-top: 1px solid var(--rahmen);
}

.eintrag-zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 12px 6px;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.eintrag-zeile:hover {
  background: var(--flaeche-dezent);
}

.eintrag-zeile > svg {
  margin-left: auto;
  color: var(--text-dezent);
  flex-shrink: 0;
}

.eintrag-datum {
  font-weight: 600;
  color: var(--ueberschrift);
  font-size: var(--text-sm);
}

.eintrag-email {
  font-size: var(--text-sm);
  color: var(--text-dezent);
}

/* Formularübersicht: Kennzeichnung als Hauptzeile, Datum/Quelle darunter,
   Löschknopf am Rand. Nur diese Variante ist gestapelt — die flachen
   .eintrag-zeile in Familie und Kind-Ordner bleiben unberührt. */
.eintrag-punkt {
  display: flex;
  align-items: center;
  gap: 4px;
}

.eintrag-punkt .eintrag-zeile {
  flex: 1;
  min-width: 0;          /* lange Namen umbrechen statt die Zeile zu sprengen */
  flex-wrap: nowrap;
}

.eintrag-haupt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.eintrag-bezeichnung {
  font-weight: 600;
  color: var(--ueberschrift);
  overflow-wrap: anywhere;
}

.eintrag-bezeichnung-leer {
  font-weight: 400;
  color: var(--text-dezent);
}

.eintrag-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

/* Hier trägt die Kennzeichnung die Betonung, das Datum wird zur Nebensache. */
.eintrag-haupt .eintrag-datum {
  font-weight: 400;
  color: var(--text-dezent);
}

.eintrag-loeschen {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  min-height: 44px;
  color: var(--text-dezent);
  border-radius: var(--radius-sm);
}

.eintrag-loeschen:hover,
.eintrag-loeschen:focus-visible {
  color: var(--fehler);
  background: var(--fehler-flaeche);
}

/* Auf der Eintragsseite sitzt "Löschen" abgesetzt am rechten Rand, damit es
   nicht zwischen den harmlosen PDF-Aktionen steht. */
.loeschen-abgesetzt {
  margin-left: auto;
}

/* Rückfrage vor dem Löschen: zeigt den Eintrag, den es trifft. */
.loesch-vorschau {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background: var(--flaeche-dezent);
  border-left: 3px solid var(--fehler);
  border-radius: var(--radius-sm);
}

.loesch-formular {
  font-size: var(--text-sm);
  color: var(--text-dezent);
}

.loesch-bezeichnung {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ueberschrift);
  overflow-wrap: anywhere;
}

.loesch-vorschau .meta-zeile {
  margin: 0;
}

/* --- Offene Bereitstellungen ---------------------------------------------------- */
/* Wie .eintrag-zeile aufgebaut, aber keine Verlinkung: die Zeile trägt am Rand
   nur den Papierkorb (.eintrag-loeschen), wie die Eintragszeilen (KONZEPT 10.2). */
.bereitstellung-zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 12px 6px;
  min-height: 44px;
  border-radius: var(--radius-sm);
}

.bereitstellung-status {
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--hinweis-flaeche);
  border: 1px solid var(--hinweis-rahmen);
  color: var(--ueberschrift);
}

/* Überfällig: die Zeile bleibt dauerhaft rot markiert, damit sie auch ohne
   Animation auffällt; nur das Abzeichen blinkt. */
.bereitstellung-zeile.ueberfaellig {
  background: var(--fehler-flaeche);
  box-shadow: inset 3px 0 0 var(--fehler);
}

.bereitstellung-status.blinkt {
  background: var(--fehler-flaeche);
  border-color: var(--fehler-rahmen);
  color: var(--fehler);
  animation: bereitstellung-blinken 1.4s steps(1, end) infinite;
}

/* Blinkt über die Deckkraft statt über die Farbe: --fehler ist auf Hell ein
   dunkles Rot, auf Dunkel ein helles Rosa — eine feste Gegenfarbe hätte in
   einem der beiden Themes zu wenig Kontrast. */
@keyframes bereitstellung-blinken {
  50% {
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bereitstellung-status.blinkt {
    animation: none;
  }
}

/* --- Familienverzeichnis (Grunddaten) -------------------------------------------- */
.karte-kopf-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}

.karte-kopf-zeile h1,
.karte-kopf-zeile h2 {
  margin: 0;
}

/* Zeilen mit führendem Icon: nur der Chevron am Ende rückt nach rechts */
.eintrag-zeile > svg:first-child {
  margin-left: 0;
}

.zeile-name {
  flex: 1 1 12ch;
  min-width: 0;
  font-weight: 600;
  color: var(--ueberschrift);
  font-size: var(--text-sm);
  overflow-wrap: break-word;
}

.grunddaten-abschnitt {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fokus);
}

.grunddaten-abschnitt:first-of-type {
  margin-top: 0;
}

select.eingabe {
  min-height: 44px;
}

/* Zuordnung eines Eintrags zu Familie/Kind (eintrag.php) */
.zuordnung-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.zuordnung-form .eingabe {
  flex: 1 1 220px;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.meta-chip-link {
  color: var(--fokus);
  text-decoration: none;
}

.meta-chip-link:hover {
  background: var(--nav-aktiv);
}

.seitenleiste-fuss .btn + .btn {
  margin-top: 8px;
}

/* --- Eintrags-Ansicht ----------------------------------------------------------- */
.eintrag-kopf {
  margin: var(--space-1) 0 var(--space-2);
}

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
}

.zurueck:hover {
  text-decoration: underline;
}

.umschalter {
  display: inline-flex;
  border: 1px solid var(--rahmen-stark);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
  background: var(--flaeche-karte);
  margin-bottom: var(--space-1);
}

.umschalter-punkt {
  padding: 7px 16px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-dezent);
  text-decoration: none;
}

.umschalter-punkt.aktiv {
  background: var(--sekundaer);
  color: var(--sekundaer-text);
}

/* --- Werte in der Lese-Ansicht ---------------------------------------------- */
.wert {
  background: var(--feld-hintergrund);
  border: 1px solid var(--feld-rahmen);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 44px;
}

.wert-leer {
  min-height: 44px;
}

.wert-mehrzeilig {
  white-space: normal;
}

.wert-mehrzeilig.hoehe-sm { min-height: 88px; }
.wert-mehrzeilig.hoehe-md { min-height: 132px; }
.wert-mehrzeilig.hoehe-lg { min-height: 176px; }

.wert-sonstiges {
  margin: 0 12px 8px 48px;
  min-height: 40px;
}

.tabelle-ansicht .wert {
  min-height: 40px;
  padding: 7px 10px;
}

/* --- Nur-Antworten-Ansicht: Kompakt-Modus (KONZEPT 12.3) --------------------- */
/* Werte stehen als reiner Text ohne Feldoptik und ohne Mindesthöhen, damit die
   Ansicht kompakt bleibt. Kommt ohne JS aus; app.js ergänzt den Umschalt-Klick
   (.als-feld holt die Feldoptik zurück) und je Wert einen Kopieren-Knopf. */
.ansicht-kompakt .element {
  margin-bottom: 8px;
}

.ansicht-kompakt .feld-label {
  margin-bottom: 2px;
}

.ansicht-kompakt .wert {
  background: transparent;
  border-color: transparent;
  padding: 1px 0;
  min-height: 0;
}

/* Hier hat der Wert keine Feldoptik und nur 1px Innenabstand. Das Label folgt
   ihm, sonst stünde es seit dem 2026-09-22 um den Feld-Innenabstand (10px)
   zu tief (siehe .element-feld > .feld-label). */
.ansicht-kompakt .element-feld > .feld-label {
  padding-top: 1px;
}

.ansicht-kompakt .wert-mehrzeilig.hoehe-sm,
.ansicht-kompakt .wert-mehrzeilig.hoehe-md,
.ansicht-kompakt .wert-mehrzeilig.hoehe-lg {
  min-height: 0;
}

/* Klick-Zustand: Feldoptik zurück; die großen Freitext-Mindesthöhen bleiben
   bewusst weg, das Feld ist nur so hoch wie sein Inhalt (steht nach den
   min-height-Regeln oben, damit es sie bei gleicher Spezifität überschreibt). */
.ansicht-kompakt .wert.als-feld {
  background: var(--feld-hintergrund);
  border-color: var(--feld-rahmen);
  padding: 10px 12px;
  min-height: 44px;
}

/* Nur mit JS (die .wert-zeile baut app.js): Wert ist klickbar. */
.ansicht-kompakt .wert-zeile {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ansicht-kompakt .wert-zeile .wert {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}

.wert-copy {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 32px;
  border: 1px solid var(--rahmen-stark);
  border-radius: var(--radius-sm);
  background: var(--flaeche-karte);
  color: var(--text-dezent);
  cursor: pointer;
}

.wert-copy:hover {
  color: var(--text);
  border-color: var(--fokus);
}

/* "Kopiert"-Rückmeldung: blendet über dem Knopf ein und wischt nach oben weg */
.wert-copy-feedback {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--sekundaer);
  color: var(--sekundaer-text);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.wert-copy.kopiert .wert-copy-feedback {
  animation: kopiert-hinweis 1.2s ease forwards;
}

@keyframes kopiert-hinweis {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  20%  { opacity: 1; transform: translate(-50%, 0); }
  65%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -12px); }
}

@media (prefers-reduced-motion: reduce) {
  .wert-copy.kopiert .wert-copy-feedback {
    animation: none;
    opacity: 1;
  }
}

/* Statische Ankreuz-Darstellung */
.ankreuz-ansicht {
  cursor: default;
}

.ankreuz-box.ist-angekreuzt {
  background: var(--pink-700);
}

.ankreuz-box.ist-angekreuzt::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid var(--farbe-weiss);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* Nur für Screenreader */
.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Bestätigungsseite --------------------------------------------------------- */
.bestaetigung {
  margin-top: var(--space-3);
}

/* =============================================================================
 * Mail-Versand und Einstellungen (M5)
 * ========================================================================== */
.zahnrad {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--text-dezent);
}

.zahnrad:hover {
  background: var(--flaeche-dezent);
  color: var(--ueberschrift);
}

.meldung-erfolg {
  background: var(--erfolg-flaeche);
  border: 1px solid var(--erfolg-rahmen);
  color: var(--erfolg);
}

.versand-eigene-block {
  border-top: 1px solid var(--rahmen);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}

.versand-eigene-block .ankreuz {
  margin-bottom: var(--space-1);
}

/* =============================================================================
 * Bereitstellung und Token-Strecke (M6)
 * ========================================================================== */
.kopf-link {
  display: none;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ueberschrift);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: var(--radius-md);
}

.kopf-link:hover {
  background: var(--flaeche-dezent);
}

.kopf-link-primaer {
  background: var(--primaer);
  color: var(--primaer-text);
  box-shadow: var(--shadow-sm);
}

.kopf-link-primaer:hover,
.kopf-link-primaer:focus-visible {
  background: var(--primaer);
  box-shadow: var(--shadow-gelb);
}

@media (min-width: 768px) {
  .kopf-link {
    display: inline-flex;
  }
}

.seitenleiste-fuss {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rahmen);
}

.seitenleiste-fuss .btn {
  width: 100%;
}

/* --- Sortier-Liste ------------------------------------------------------------ */
.sortier-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Sortier-Modus der Formular-Navigation (Seitenleiste) */
.seitenleiste-kopf-aktionen {
  display: flex;
  align-items: center;
}

.navi-sortier-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--text-dezent);
}

.navi-sortier-knopf:hover {
  background: var(--flaeche-dezent);
  color: var(--text);
}

.sortier-hilfe {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-dezent);
}

.sortier-titel {
  flex: 1;
  min-width: 0;
  padding: 10px 0 10px 6px;
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: var(--text-sm);
  font-weight: 500;
}

/* In der schmalen Seitenleiste bleiben die Pfeile immer untereinander */
.seitenleiste .sortier-pfeile {
  flex-direction: column;
}

.sortier-fertig {
  width: 100%;
}

.sortier-zeile {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-md);
  background: var(--flaeche-karte);
  padding: 2px 6px;
  margin-bottom: 8px;
  cursor: grab;
}

.sortier-zeile.wird-gezogen {
  opacity: 0.5;
  border-style: dashed;
}

/* Pfeile: auf dem Handy vertikal (mehr Platz für die Titel), ab Tablet nebeneinander */
.sortier-pfeile {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .sortier-pfeile {
    flex-direction: row;
    gap: 2px;
  }
}

.pfeil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--text-dezent);
  cursor: pointer;
}

.pfeil:hover:not(:disabled) {
  background: var(--flaeche-dezent);
  color: var(--ueberschrift);
}

.pfeil:disabled {
  opacity: 0.3;
  cursor: default;
}

/* --- Ergebnis: Einmal-Link ------------------------------------------------------ */
.ergebnis-liste {
  margin: 0 0 var(--space-2);
  padding-left: 24px;
}

/* Einmal-Link: read-only Block in Feld-Optik (sieht aus wie eine Textarea, ist
   aber nicht beschreibbar). Enthält den Link als echten Verweis plus die
   Hinweise für die ausfüllende Person; der Copy-Button legt den ganzen Block
   als HTML in die Zwischenablage, damit beim Einfügen in die E-Mail alles
   mitkommt und der Link klickbar bleibt. */
.link-block {
  background: var(--feld-hintergrund);
  border: 1px solid var(--feld-rahmen);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-dezent);
}

.link-block > * {
  margin: 0;
}

.link-block > * + * {
  margin-top: 10px;
}

/* Lange URL bricht im Kasten um, statt ihn zu sprengen */
.link-block a {
  overflow-wrap: anywhere;
}

/* --- Fortschritt in der Token-Strecke ----------------------------------------- */
.fortschritt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-2);
}

.fortschritt-text {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ueberschrift);
  white-space: nowrap;
}

.fortschritt-balken {
  display: flex;
  gap: 6px;
  flex: 1;
}

.fortschritt-schritt {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--rahmen);
}

.fortschritt-schritt.fertig {
  background: var(--farbe-blau);
}

.fortschritt-schritt.aktiv {
  background: var(--primaer);
}

/* --- Kiosk: dezenter Rückkehr-Link (M7) -------------------------------------- */
.mitarbeiter-bereich {
  margin-top: var(--space-8);
  text-align: center;
}

.mitarbeiter-link {
  font-size: var(--text-xs);
  color: var(--text-dezent);
  text-decoration: none;
}

.mitarbeiter-link:hover {
  text-decoration: underline;
}


/* --- Theme-Toggle (M8) --------------------------------------------------------- */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--text-dezent);
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--flaeche-dezent);
  color: var(--ueberschrift);
}

.theme-toggle .icon-sonne { display: none; }
.theme-toggle .icon-mond  { display: block; }

[data-theme="dark"] .theme-toggle .icon-sonne { display: block; }
[data-theme="dark"] .theme-toggle .icon-mond  { display: none; }


/* Logo im Dark Mode weiß-monochrom (Navy-Buchstaben säufen sonst ab) */
[data-theme="dark"] .marke img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* --- Anmeldeseite --------------------------------------------------------- */
.inhalt-anmelden {
  display: flex;
  align-items: center;
  justify-content: center;
}

.anmelden {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: 8vh; /* optisch mittig: leicht über der geometrischen Mitte */
}

.anmelden-logo {
  width: min(260px, 75%);
  margin: 0 auto var(--space-1);
  display: block;
}

[data-theme="dark"] .anmelden-logo {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.anmelden .meldung {
  margin-bottom: 0; /* Abstände regelt das gap der Spalte */
}

.anmelden-knopf {
  width: 100%;
  margin-top: var(--space-1);
}

/* Passwort anzeigen/ausblenden: das Auge sitzt rechts im Feld. Ohne JS ist
   der Knopf per hidden-Attribut aus (nutzlos), das Feld bleibt normal. */
.passwort-feld {
  position: relative;
}

.passwort-feld .eingabe {
  padding-right: 48px; /* Platz fürs Auge, Text läuft nicht darunter */
}

.passwort-auge {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-dezent);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.passwort-auge:hover {
  color: var(--ueberschrift);
}

/* Geschlossenes Auge = verborgen (Default); offenes Auge = sichtbar (.zeigt) */
.passwort-auge .icon-auge-auf { display: none; }
.passwort-auge .icon-auge-zu  { display: flex; }
.passwort-auge.zeigt .icon-auge-auf { display: flex; }
.passwort-auge.zeigt .icon-auge-zu  { display: none; }

/* Abmelden-Knopf in der Kopfzeile (Form nur als Träger für POST + CSRF) */
.abmelden-form {
  display: flex;
}

.kopf-icon-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--text-dezent);
  cursor: pointer;
}

.kopf-icon-knopf:hover {
  background: var(--flaeche-dezent);
  color: var(--ueberschrift);
}

/* --- Rechtstext (Datenschutzhinweise) -----------------------------------------
 * Fließtext-Seite ohne eigene Bausteine: nutzt die globale Typo, ergänzt nur
 * Abschnitts-Abstände, Listen und Adressblöcke.
 */
.rechtstext h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-4);
}

.rechtstext h2:first-of-type {
  margin-top: var(--space-3);
}

.rechtstext ul {
  margin: 0 0 var(--space-2);
  padding-left: 1.25em;
}

.rechtstext li {
  margin-bottom: 0.4em;
}

.rechtstext address {
  font-style: normal;
  margin-bottom: var(--space-2);
}

.rechtstext-stand {
  margin-top: var(--space-4);
  color: var(--text-dezent);
  font-size: var(--text-sm);
}

/* Hinweis am Ort der Erhebung, unter den Formular-Aktionen in f.php. */
.datenschutz-hinweis {
  margin: 0;
  color: var(--text-dezent);
  font-size: var(--text-sm);
}

/* Server-Log-Hinweis unter dem Login (bewusst ohne Datenschutz-Link). */
.anmelden-datenschutz {
  margin: var(--space-3) 0 0;
  text-align: center;
  color: var(--text-dezent);
  font-size: var(--text-xs);
  text-wrap: balance;
}

/* --- Aktualisierungs-Hinweis ------------------------------------------------ */
/*
 * Kleines Fenster unten, wenn eine offene Seite älter ist als der Stand auf
 * dem Server (app.js, Abgleich gegen /version.php). Liegt bewusst unter dem
 * Slide-in-Menü (z-index 40/50), damit es ein geöffnetes Menü nicht durchstößt.
 */
.aktualisierung {
  position: fixed;
  z-index: 30;
  left: var(--space-2);
  right: var(--space-2);
  bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  max-width: 460px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--flaeche-karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: aktualisierung-auf var(--transition-base) both;
}

@keyframes aktualisierung-auf {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .aktualisierung { animation: none; }
}

.aktualisierung-titel {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ueberschrift);
  line-height: 1.3;
}

.aktualisierung-text {
  display: block;
  margin-top: 2px;
  color: var(--text-dezent);
  font-size: var(--text-sm);
  line-height: 1.45;
  text-wrap: pretty;
}

/* Der Knopf darf nie umbrechen und nie schrumpfen, sonst zerfällt die Zeile. */
.aktualisierung .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Ab Handy-Querformat nebeneinander, darunter gestapelt mit breitem Knopf. */
@media (min-width: 420px) {
  .aktualisierung {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
}

/* --- Unterschriftenfeld: Dialog des Moduls im Projektdesign -------------------
 * Das Modul (assets/unterschrift/, Kopie von module/unterschrift/) bringt
 * bewusst neutrale Farben und Standardknöpfe mit. Hier wird nur überschrieben,
 * die Moduldateien bleiben unverändert. Gleiche Selektoren wie im Modul,
 * diese Datei kommt später im Dokument und gewinnt deshalb.
 * Die Leinwand bleibt in beiden Themes weiß: Papier, auf dem die navyblaue
 * Tinte (#20366d) lesbar ist. */
.unterschrift-dialog {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--flaeche-karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.unterschrift-dialog::backdrop {
  background: rgba(17, 29, 61, 0.6);
}

.unterschrift-kopf {
  padding: 14px 20px 8px;
}

.unterschrift-titel {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ueberschrift);
}

.unterschrift-schliessen {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-full);
  color: var(--text-dezent);
}

.unterschrift-schliessen:hover,
.unterschrift-schliessen:focus-visible {
  color: var(--ueberschrift);
  background: var(--flaeche-dezent);
}

.unterschrift-feld {
  margin: 0 20px;
  background: #fff;
  border: 1px solid var(--feld-rahmen);
  border-radius: var(--radius-md);
}

.unterschrift-linie {
  border-top: 1px dashed #b3bdd6;
}

/* Das Feld bekommt beim Öffnen den Fokus: Ring wie bei .eingabe:focus statt
   des globalen pinken Outlines. */
.unterschrift-feld:focus,
.unterschrift-feld:focus-visible {
  outline: none;
  border-color: var(--farbe-blau);
  box-shadow: 0 0 0 3px var(--fokus-ring);
}

.unterschrift-dialog .unterschrift-hinweis {
  color: #8790a8;
  font-size: var(--text-sm);
}

.unterschrift-leiste {
  gap: 10px;
  padding: 14px 20px 20px;
}

/* Knöpfe wie .btn .btn-kontur .btn-klein; Speichern wie .btn-primaer. */
.unterschrift-leiste button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 7px 18px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ueberschrift);
  background: transparent;
  border: 2px solid var(--rahmen-stark);
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

.unterschrift-leiste button:hover:not(:disabled),
.unterschrift-leiste button:focus-visible {
  border-color: var(--ueberschrift);
}

.unterschrift-leiste button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--fokus-ring);
}

.unterschrift-leiste button:disabled {
  opacity: 0.45;
  cursor: default;
}

.unterschrift-leiste .unterschrift-primaer {
  color: var(--primaer-text);
  background: var(--primaer);
  border-color: var(--primaer);
  box-shadow: var(--shadow-sm);
}

.unterschrift-leiste .unterschrift-primaer:hover:not(:disabled),
.unterschrift-leiste .unterschrift-primaer:focus-visible {
  border-color: var(--primaer);
  transform: translateY(-1px);
  box-shadow: var(--shadow-gelb);
}

.unterschrift-leiste .unterschrift-drehen {
  width: 40px;
  padding: 0;
  font-size: var(--text-xl);
}

@media (max-width: 900px), (pointer: coarse) {
  .unterschrift-dialog {
    background: var(--flaeche);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .unterschrift-kopf {
    padding: 10px 16px 6px;
  }

  .unterschrift-feld {
    margin: 0 12px;
  }

  .unterschrift-leiste {
    padding: 12px 16px;
  }

  .unterschrift-leiste button {
    min-height: 44px;
    padding: 9px 16px;
  }

  .unterschrift-leiste .unterschrift-drehen {
    display: inline-flex;
    width: 44px;
    padding: 0;
  }

  /* Umbruch in zwei Zeilen: Speichern steht rechts außen in seiner Zeile. */
  .unterschrift-leiste .unterschrift-primaer {
    margin-left: auto;
  }

  .unterschrift-gedreht .unterschrift-leiste {
    padding-left: max(16px, env(safe-area-inset-bottom));
  }
}

/* --- Fachbereich ------------------------------------------------------------ */
/*
 * Konto-Maske: Ist die Zugangsart „Vorstand“ gewählt, sind Admin-Rolle und
 * Fachbereichs-Überblick ohne Bedeutung (der Server setzt sie selbst) und
 * verschwinden. Ohne :has() bleiben sie sichtbar und werden ignoriert, kein
 * JavaScript nötig (KONZEPT-FACHBEREICH 6.4).
 */
#abschnitt-zugang:has(input[name="zugang"][value="vorstand"]:checked) .element-checkbox {
  display: none;
}

/* Überschrift und Unterzeile der Vorstands-Anmeldemaske (vorstand.php). */
.anmelden-titel {
  margin: 0;
  text-align: center;
  font-size: var(--text-xl);
}

.anmelden-unterzeile {
  margin: 0;
  text-align: center;
  color: var(--text-dezent);
  font-size: var(--text-sm);
}

/* --- Fachbereich: Überblick -------------------------------------------------- */
/*
 * Die Überblicksseite (fachbereich.php, KONZEPT-FACHBEREICH 7.3 Fassung B):
 * Kopf mit Stichtagswahl, Karte „Zu erledigen“, Kennzahlfelder, das Raster der
 * vier Chart-Karten, die Leseklasse .fb-tabelle und die Status-Abzeichen.
 * Alle Farben kommen aus tokens.css, damit das dunkle Design ein reiner
 * Token-Tausch bleibt.
 */

/* Kopf: Titel links, Stichtagswahl und Kurzbericht rechts */
.fb-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
}

.fb-kopf h1 {
  margin-bottom: 2px;
}

.fb-stand {
  margin: 0;
  color: var(--text-dezent);
  font-size: var(--text-sm);
}

.fb-stichtag {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.fb-stichtag-feld {
  display: flex;
  flex-direction: column;
}

.fb-stichtag .eingabe {
  width: auto;
  min-width: 170px;
  min-height: 40px;
  padding: 7px 10px;
}

.fb-stichtag .feld-label {
  margin-bottom: 4px;
}

/* Hinweisstreifen im Kopf (Stichtag in der Zukunft, unlesbares Datum) */
.fb-kopf-meldung {
  margin: var(--space-2) 0 0;
}

/* Zusatz rechts in einer Kartenkopfzeile („3 Köpfe, 70 Wochenstunden“) */
.fb-kopf-zusatz {
  font-size: var(--text-sm);
}

/*
 * Kennzahlfelder (7.3, Absatz „Kennzahlfelder“): füllen die Kartenbreite, ein
 * umgebrochenes Feld nimmt die ganze Zeile. Die Beschriftung ist fest zwei
 * Zeilen hoch, damit alle Felder einer Seite gleich hoch sind und die Zahlen
 * auf einer Linie stehen.
 */
.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--space-2);
}

.chart-zahl {
  flex: 1 1 130px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--kennzahl-flaeche);
  border: 1px solid var(--kennzahl-rahmen);
}

.chart-zahl b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--ueberschrift);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.chart-zahl b small {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-dezent);
}

.chart-zahl > span {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-dezent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
  margin-top: 4px;
  min-height: 2.6em;
}

.chart-zahl-notiz {
  flex-basis: 100%;
  font-size: var(--text-xs);
  color: var(--text-dezent);
  line-height: 1.4;
}

.chart-zahl-notiz strong {
  color: var(--akzent-text);
}

/* Raster der vier Chart-Karten: ab 900px zwei nebeneinander, gleiche Höhe */
.karten-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.karten-raster > .karte {
  margin-top: 0;
}

.karten-raster + .karte {
  margin-top: var(--space-2);
}

@media (min-width: 900px) {
  .karten-raster {
    grid-template-columns: 1fr 1fr;
  }

  .karten-raster > .chart-karte-breit {
    grid-column: 1 / -1;
  }
}

/* Kartenkopf luftig: Überschrift, 10px, Einleitung, 18px, Felder (7.3) */
.chart-karte {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chart-karte h2 {
  margin-bottom: 10px;
}

.chart-einleitung {
  margin: 0 0 18px;
  font-size: var(--text-sm);
  color: var(--text-dezent);
}

/* Jahresbilanz: schmale Karte in derselben Feldoptik */
.fb-bilanz-titel {
  font-size: var(--text-base);
}

.fb-bilanz-unter {
  font-size: var(--text-sm);
}

.fb-bilanz .kennzahlen {
  margin-bottom: 0;
}

/* Warnmarke: Tabler-Warnzeichen zentriert auf gelbem Kreis (E4-Nachtrag 2026-09-05) */
.fb-ausruf {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--farbe-gelb);
  color: var(--farbe-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fb-warnzeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--farbe-gelb);
  color: var(--farbe-navy);
}

/* --- Rollen und Aufgaben ------------------------------------------------------ */
.fb-rollen-text {
  columns: 1;
  column-gap: var(--space-4);
}

.fb-rollen-text p,
.fb-rollen-text ul,
.fb-rollen-text ol {
  break-inside: avoid;
  margin: 0 0 12px;
  font-size: var(--text-sm);
}

.fb-rollen-text ul,
.fb-rollen-text ol {
  padding-left: 1.2em;
}

.fb-rollen-text strong {
  color: var(--ueberschrift);
}

/* Nach den Rollen eine Leerzeile, bevor der freie Text oder sein Knopf folgt
   (Vorgabe Holgi, 2026-09-23). Zweispaltig schluckt der Spaltenumbruch den
   Absatzabstand, deshalb sitzt der Abstand außen und der letzte Absatz trägt
   keinen eigenen; so ist er in beiden Breiten gleich. */
.fb-rollen-liste {
  margin-bottom: var(--space-3);
}

.fb-rollen-liste > :last-child {
  margin-bottom: 0;
}

/* Der Knopf unter dem Text hielt nur die 12px des letzten Absatzes Abstand
   und klebte am Text (Befund Holgi, 2026-09-17). */
.fb-rollen-aktionen {
  margin-top: var(--space-2);
}

@media (min-width: 900px) {
  .fb-rollen-text {
    columns: 2;
  }

  /* Der freie Text läuft in einer Spalte: Zweispaltig riss ein kurzer Text
     die Einleitung von ihrer Liste (2026-09-17). */
  .fb-rollen-text.fb-rollen-frei {
    columns: 1;
    max-width: 75ch;
  }
}

/* --- Stift-Knopf in Kopfzeilen und Tabellenzeilen ----------------------------- */
.fb-stift {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--text-dezent);
  background: none;
  border: 0;
  text-decoration: none;
}

.fb-stift:hover,
.fb-stift:focus-visible {
  background: var(--flaeche-dezent);
  color: var(--ueberschrift);
}

/*
 * --- Übersichtstabellen -------------------------------------------------------
 * Eigene Leseklasse (7.3): unter 768px wird jede Zeile zu einer Karte, die
 * Spaltennamen kommen aus data-spalte; ab 768px eine echte Tabelle. Die
 * Formularklasse .element-tabelle wird bewusst nicht wiederverwendet, sie
 * trägt Eingabefeld-Stile.
 */
/*
 * Der Rahmen um jede Tabelle scrollt waagerecht, statt aus der Karte zu
 * laufen: Zehn Spalten passen auch in voller Breite nicht immer (KONZEPT 7.3).
 * Unter 768px ist die Tabelle eine Kartenliste und scrollt nie.
 */
.fb-tabelle-rahmen {
  overflow-x: auto;
}

.fb-tabelle {
  width: 100%;
  border-collapse: collapse;
}

.fb-tabelle,
.fb-tabelle tbody,
.fb-tabelle tr,
.fb-tabelle td {
  display: block;
  width: 100%;
}

.fb-tabelle thead {
  display: none;
}

.fb-tabelle tr {
  position: relative;
  background: var(--flaeche-karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 12px;
}

.fb-tabelle td {
  padding: 5px 0;
}

.fb-tabelle td::before {
  content: attr(data-spalte);
  display: block;
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--text-dezent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.fb-tabelle td.zelle-name {
  padding-right: 52px;
}

.fb-tabelle td.zelle-name::before,
.fb-tabelle td.zelle-aktion::before {
  display: none;
}

.fb-tabelle td.zelle-aktion {
  position: absolute;
  top: 8px;
  right: 8px;
  width: auto;
  padding: 0;
}

.fb-tabelle td.leer {
  display: none;
}

/* Zellen mit ausgeschriebenem Ersatzwert („niemand", „unbefristet"): gedämpft,
   aber in beiden Größen sichtbar. .leer bleibt den wirklich leeren Zellen. */
.fb-tabelle td.wert-dezent {
  color: var(--text-dezent);
}

.fb-tabelle .zeile-name {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--ueberschrift);
}

.fb-tabelle .zeile-name a {
  color: inherit;
}

.fb-tabelle .fb-gedaempft,
.fb-tabelle .fb-gedaempft .zeile-name {
  color: var(--text-dezent);
}

.fb-kind {
  display: block;
}

@media (min-width: 768px), print {
  /* Rahmen und Radius sitzen aussen, damit die klebende Aktionsspalte
     (weiter unten) nicht an einem zweiten Scroll-Kontext scheitert.
     Auch im Druck (E4): Auf Papier ist die Tabelle kompakter als Karten. */
  .fb-tabelle-rahmen {
    border: 1px solid var(--rahmen);
    border-radius: var(--radius-md);
  }
  .fb-tabelle {
    display: table;
    border-spacing: 0;
  }
  .fb-tabelle thead {
    display: table-header-group;
  }
  .fb-tabelle tbody {
    display: table-row-group;
  }
  .fb-tabelle tr {
    display: table-row;
    position: static;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    background: none;
  }
  .fb-tabelle th,
  .fb-tabelle td {
    display: table-cell;
    width: auto;
    vertical-align: top;
    text-align: left;
    padding: 9px 8px;
    font-size: var(--text-sm);
    border-top: 1px solid var(--rahmen);
  }
  .fb-tabelle th {
    background: var(--flaeche-dezent);
    border-top: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dezent);
    white-space: nowrap;
  }
  .fb-tabelle td::before {
    display: none;
  }
  .fb-tabelle td.zelle-name {
    padding-right: 10px;
  }
  .fb-tabelle td.zelle-aktion {
    position: static;
    width: 1%;
    padding: 4px 6px;
    white-space: nowrap;
  }
  .fb-tabelle td.leer {
    display: table-cell;
    color: var(--text-dezent);
  }
  .fb-tabelle tbody tr:hover td {
    background: var(--flaeche-dezent);
  }
  .fb-tabelle .zeile-name {
    font-size: var(--text-sm);
  }
  .fb-tabelle td.zahl,
  .fb-tabelle th.zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .fb-tabelle .nowrap {
    white-space: nowrap;
  }
  /*
   * Die Spalte „Bearbeiten“ bleibt am rechten Rand stehen, auch wenn die
   * Tabelle waagerecht scrollt: Der Stift ist der Weg in die Maske und darf
   * nie ausserhalb des Sichtfelds liegen.
   */
  .fb-tabelle th.zelle-aktion,
  .fb-tabelle td.zelle-aktion {
    position: sticky;
    right: 0;
    border-left: 1px solid var(--rahmen);
    background: var(--flaeche-karte);
  }
  .fb-tabelle th.zelle-aktion {
    background: var(--flaeche-dezent);
  }
  .fb-tabelle tbody tr:hover td.zelle-aktion {
    background: var(--flaeche-dezent);
  }
}

/* Zusatzzeile unter einem Wert („seit 01.08.2026“) */
.fb-seit {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-dezent);
  margin-top: 2px;
}

.fb-zusammenfassung {
  margin: 0 0 var(--space-2);
  color: var(--text-dezent);
}

.fb-zusammenfassung strong {
  color: var(--ueberschrift);
}

/* Eingeklappte zweite Tabelle („Abgeschlossen“) */
details.fb-details {
  margin-top: var(--space-2);
}

details.fb-details summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-weight: 600;
  color: var(--ueberschrift);
}

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

details.fb-details summary svg {
  transition: transform var(--transition-fast);
}

details.fb-details[open] summary svg {
  transform: rotate(180deg);
}

details.fb-details .fb-tabelle {
  margin-top: 8px;
}

/* Personen ohne Einsatzzeit unter der Team-Tabelle */
.fb-ohne-zeit {
  margin-top: var(--space-2);
}

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

.fb-zeitliste li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--rahmen);
  font-size: var(--text-sm);
}

.fb-zeitliste li:first-child {
  border-top: 0;
}

.fb-zeitliste .btn {
  margin-left: auto;
}

/* --- Datierte Liste ------------------------------------------------------------ */
/* Stammt aus der Karte „Ausblick 90 Tage" (entfallen 2026-09-17); heute trägt sie
 * nur noch den Verlauf einer Familie in fachbereich-familie.php. */
.fb-ausblick {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fb-ausblick li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  padding: 10px 0;
  border-top: 1px solid var(--rahmen);
}

.fb-ausblick li:first-child {
  border-top: 0;
  padding-top: 0;
}

.fb-ausblick-datum {
  min-width: 9ch;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ueberschrift);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fb-ausblick-tag {
  display: block;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--text-dezent);
}

.fb-ausblick-text {
  font-size: var(--text-sm);
}

.fb-ausblick-text strong {
  color: var(--ueberschrift);
  font-weight: 600;
}

.fb-ausblick-art {
  display: inline-block;
  margin-left: 6px;
  font-size: var(--text-xs);
  color: var(--text-dezent);
}

/* --- Verlauf einer Familie (Statushistorie) ------------------------------------ */
/* Nutzt die datierte Liste darüber; je Änderung eine eigene Zeile. */
.fb-verlauf-zeile {
  display: block;
}

/* Tabelle „Mittlere Dauer je Stufe" unter den Kennzahlen der Karte */
.fb-bilanz .fb-tabelle-rahmen {
  margin-top: 12px;
}

.fb-verlauf-beginn {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}

/* --- Status-Abzeichen --------------------------------------------------------- */
.fb-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.6;
}

/* Die fünf Status der Vereinfachung vom 2026-09-21 (KONZEPT-FACHBEREICH 13.1)
   und zwei Abzeichen ohne Status: „neutral" für Zusätze am Team, „offen" für
   eine Familie ohne Verlaufszeile. */
.fb-status.unbelegt {
  background: var(--st-bereit-flaeche);
  color: var(--st-bereit-text);
}

.fb-status.belegt {
  background: var(--st-belegt-flaeche);
  color: var(--st-belegt-text);
}

.fb-status.vorbereitung {
  background: var(--st-eignung-flaeche);
  color: var(--st-eignung-text);
}

.fb-status.neutral {
  background: var(--st-bewerbung-flaeche);
  color: var(--st-bewerbung-text);
}

.fb-status.pause {
  background: var(--st-pause-flaeche);
  color: var(--st-pause-text);
}

.fb-status.ausgeschieden,
.fb-status.ende {
  background: var(--st-ende-flaeche);
  color: var(--st-ende-text);
}

.fb-status.offen {
  background: var(--st-offen-flaeche);
  color: var(--st-offen-text);
  border: 1px dashed currentColor;
}

/* --- Verlauf auf der Familienseite (KONZEPT-FACHBEREICH 13.2, 13.8, 13.9) -----
 *
 * Die Statuskarte hat keinen Kopf: auf die Überschrift „Status" folgt sofort
 * die Liste, neueste Zeile oben. Kein Abzeichen je Zeile, die Farbe trägt der
 * Punkt links; sie kommt aus --st-punkt, das die Klasse s-<status> setzt.
 * Alles ist ohne JavaScript bedienbar, die Masken sind gewöhnliche Formulare.
 */
.s-vorbereitung  { --st-punkt: var(--st-eignung-text); }
.s-unbelegt      { --st-punkt: var(--st-bereit-text); }
.s-belegt        { --st-punkt: var(--st-belegt-text); }
.s-pause         { --st-punkt: var(--st-pause-text); }
.s-ausgeschieden { --st-punkt: var(--st-ende-text); }
.s-offen         { --st-punkt: var(--st-offen-text); }

.vl-liste {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.vl-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--rahmen);
}

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

.vl-datum {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ueberschrift);
}

.vl-datum::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--st-punkt, var(--rahmen-stark));
  transform: translateY(-1px);
}

.vl-datum small {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--text-dezent);
}

.vl-inhalt {
  grid-column: 1;
  min-width: 0;
  padding-left: 17px;
}

.vl-was {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.vl-was b {
  font-weight: 600;
  color: var(--text);
}

.vl-zusatz {
  font-size: var(--text-sm);
  color: var(--text-dezent);
}

.vl-notiz {
  display: block;
  margin-top: 3px;
  font-size: var(--text-sm);
  color: var(--text);
}

/* Von Hand eingetragene Zeilen tragen einen feinen Federstrich, automatische
   ein Zahnrad. Mehr Unterschied soll es nicht sein, beide sind gleich gültig. */
.vl-quelle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--text-dezent);
}

.vl-quelle svg {
  flex: none;
}

.vl-quelle.hand {
  color: var(--link);
}

.vl-werkzeug {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: flex;
  gap: 8px;
}

/* Runde Knöpfe in der Höhe der kleinen Knöpfe (Speichern, Abbrechen), damit
   sie auf dem Handy mit dem Daumen sicher zu treffen sind (13.8). */
.vl-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--rahmen-stark);
  border-radius: 50%;
  background: transparent;
  color: var(--ueberschrift);
  text-decoration: none;
  cursor: pointer;
}

.vl-knopf:hover,
.vl-knopf:focus-visible {
  border-color: var(--ueberschrift);
  background: var(--nav-aktiv);
}

.vl-form {
  grid-column: 1 / -1;
  margin: 10px 0 2px;
  padding: 12px 14px;
  border: 1px solid var(--rahmen-stark);
  border-radius: var(--radius-md);
  background: var(--flaeche-dezent);
}

.vl-felder {
  display: grid;
  gap: 10px;
}

@media (min-width: 640px) {
  .vl-felder {
    grid-template-columns: 11rem 13rem minmax(0, 1fr);
    align-items: end;
  }
  .vl-felder .breit {
    grid-column: 1 / -1;
  }
}

.vl-felder p {
  margin: 0;
}

/* Das Notizfeld sieht aus wie ein einzeiliges Feld und wächst mit dem Inhalt
   bis sechs Zeilen, danach scrollt es. In Browsern ohne field-sizing übernimmt
   das der Behelf in app.js. */
textarea.vl-notizfeld {
  min-height: 44px;
  max-height: calc(6 * 1.55em + 22px);
  overflow-y: auto;
  resize: none;
}

.vl-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Geplante Zeilen: Datum in der Zukunft, gilt am Tag von selbst */
.vl-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  border: 1px dashed var(--rahmen-stark);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-dezent);
}

/* Die Sonderfälle als ausklappbare Knöpfe, ohne JavaScript bedienbar.
   Zugeklappt stehen sie nebeneinander, aufgeklappt nimmt der eine die
   ganze Breite. */
.vl-sonder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-2);
}

.vl-sonder > details[open] {
  flex: 1 0 100%;
}

.vl-sonder summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 18px;
  border: 2px solid var(--rahmen-stark);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ueberschrift);
}

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

.vl-sonder summary:hover,
.vl-sonder > details[open] > summary {
  background: var(--nav-aktiv);
  border-color: var(--ueberschrift);
}

.vl-sonder-inhalt {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--rahmen-stark);
  border-radius: var(--radius-md);
  background: var(--flaeche-dezent);
}


@media (min-width: 640px) {
  .vl-zeile {
    grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  }
  .vl-datum {
    display: block;
  }
  .vl-datum::before {
    display: inline-block;
    margin-right: 8px;
  }
  .vl-datum small {
    display: block;
    padding-left: 17px;
  }
  .vl-inhalt {
    grid-column: 2;
    grid-row: 1;
    padding-left: 0;
  }
  .vl-werkzeug {
    grid-column: 3;
    grid-row: 1;
  }
  .vl-form {
    grid-column: 2 / -1;
  }
}

/* --- Familienliste der Startseite (KONZEPT-FACHBEREICH 13.8, 13.9) -----------
 *
 * Eine Zeile je Familie, eine einzige Liste ohne Gruppierung nach
 * Zuständigkeit. Von links: Name, Kinder, Stand, dann rechts der Avatar der
 * zuständigen Person und der Knopf „Formular ausfüllen". Die ganze Zeile ist
 * der Link in die Familie (das ::after des Namens deckt sie ab), der Knopf
 * liegt darüber. Auf dem Handy stapeln die Angaben in einer Karte mit
 * Trennlinien, auf dem Tablet stehen Avatar und Knopf rechts daneben, am
 * Rechner steht alles in Spalten.
 *
 * Der Stand ist standardmäßig ausgeblendet (Wunsch Holgi, 2026-09-22); die
 * Liste trägt dann die Klasse fl-ohne-status, und die Spalte entfällt ganz,
 * statt leer stehen zu bleiben.
 */
.fl-liste {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.fl-zeile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-md);
  background: var(--flaeche-karte);
  cursor: pointer;
  break-inside: avoid;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.fl-zeile[hidden] {
  display: none;
}

/* Leichte Aufhellung beim Überfahren, weicher Übergang (13.9) */
.fl-zeile:hover,
.fl-zeile:focus-within {
  background: var(--nav-aktiv);
  border-color: var(--rahmen-stark);
}

.fl-name {
  grid-column: 1;
  grid-row: 1;
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.3;
  color: var(--ueberschrift);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.fl-name:hover {
  text-decoration: underline;
}

/* Der Name ist der Link über die ganze Zeile; der Knopf liegt darüber */
.fl-name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.fl-stand {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.fl-stand .lb-plaetze {
  padding-top: 0;
}

.fl-seit {
  font-size: var(--text-xs);
  color: var(--text-dezent);
  white-space: nowrap;
}

.fl-seit.vsl {
  color: var(--st-bereit-text);
  font-weight: 600;
}

.fl-kinder {
  grid-column: 1 / -1;
  min-width: 0;
  font-size: var(--text-sm);
}

.fl-kinder.leer {
  color: var(--text-dezent);
  font-size: var(--text-xs);
}

/* Der Kindname ist ein eigener Link und braucht deshalb eine Schicht über der
   Fläche des Zeilenlinks, sonst führt ein Klick auf ihn in die Familie. */
.fl-kinder .lb-kinder a {
  position: relative;
  z-index: 1;
}

/* Der Avatar steht rechts, zwischen den Kindern und dem Knopf (13.9); ohne
   Zuständigkeit bleibt er leer (Klasse ohne, aus dem Lagebild). Er liegt über
   der Fläche des Zeilenlinks, sonst bliebe sein Kurzhinweis „Zuständig: ..."
   unsichtbar. */
.fl-avatar {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  font-size: var(--text-xs);
}

/* Nur so breit wie der Knopf darin: Das Feld liegt über dem Zeilenlink, und
   ein leeres Band daneben würde Klicks schlucken, die in die Familie gehören. */
.fl-aktionen {
  grid-column: 1 / -1;
  justify-self: start;
  position: relative;
  z-index: 1;
  display: flex;
  margin-top: 4px;
  cursor: auto;
}

.fl-aktionen .lb-formular-knopf {
  min-height: 40px;
  padding: 7px 16px;
  font-size: var(--text-sm);
  line-height: 1.2;
  white-space: nowrap;
}

/* Handy: die Zeilen sitzen in einer Karte und sind nur durch Linien getrennt,
   damit die gestapelten Angaben nicht wie Kacheln wirken. */
@media (max-width: 559.98px) {
  .fl-liste {
    gap: 0;
    border: 1px solid var(--rahmen);
    border-radius: var(--radius-md);
    background: var(--flaeche-karte);
  }
  .fl-zeile {
    border: 0;
    border-bottom: 1px solid var(--rahmen);
    border-radius: 0;
    background: transparent;
    padding: 10px 12px;
    gap: 2px 10px;
  }
  .fl-zeile:last-child {
    border-bottom: 0;
  }
  .fl-aktionen {
    margin-top: 6px;
  }
  .fl-aktionen .lb-formular-knopf {
    min-height: 34px;
    padding: 5px 12px;
    font-size: var(--text-xs);
  }
}

/* Tablet: die Angaben stapeln links, Avatar und Knopf stehen rechts daneben */
@media (min-width: 560px) and (max-width: 1023.98px) {
  .fl-zeile {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: repeat(3, auto); /* damit 1 / -1 über alle drei Zeilen reicht */
  }
  .fl-name     { grid-column: 1; grid-row: 1; }
  .fl-kinder   { grid-column: 1; grid-row: 2; }
  .fl-stand    { grid-column: 1; grid-row: 3; }
  .fl-avatar   { grid-column: 2; grid-row: 1 / -1; }
  .fl-aktionen { grid-column: 3; grid-row: 1 / -1; margin-top: 0; }
  .fl-ohne-status .fl-zeile {
    grid-template-rows: repeat(2, auto);
  }
}

/* Rechner: feste Spalten, eine Zeile bleibt eine Zeile */
@media (min-width: 1024px) {
  .fl-zeile {
    grid-template-columns: minmax(8rem, 1.2fr) minmax(0, 1.6fr) minmax(9rem, 0.9fr) auto auto;
    gap: 4px 16px;
  }
  .fl-name     { grid-column: 1; grid-row: 1; }
  .fl-kinder   { grid-column: 2; grid-row: 1; }
  .fl-stand    { grid-column: 3; grid-row: 1; }
  .fl-avatar   { grid-column: 4; grid-row: 1; }
  .fl-aktionen { grid-column: 5; grid-row: 1; margin-top: 0; justify-content: flex-end; }

  /* Ohne Status fällt die dritte Spalte weg, der Platz geht an die Kinder */
  .fl-ohne-status .fl-zeile {
    grid-template-columns: minmax(8rem, 1.2fr) minmax(0, 2.2fr) auto auto;
  }
  .fl-ohne-status .fl-avatar   { grid-column: 3; }
  .fl-ohne-status .fl-aktionen { grid-column: 4; }
}

/* Ausgeschiedene Familien untereinander und ohne Avatar (13.9) */
.fl-ende-titel {
  margin: var(--space-3) 0 6px;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ueberschrift);
}

.fl-ende-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: var(--text-sm);
}

.fl-ende-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.fl-fuss {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-dezent);
}

/* An der Tafel wird nicht geklickt */
.lb-tafel .fl-zeile {
  cursor: default;
}

.lb-tafel .fl-name::after {
  content: none;
}

/* --- Familienseite: Kopfkachel (.fs-*) ----------------------------------------
 *
 * Der aufgeräumte Kopf von familie.php (Klick-Dummy, abgenommen 2026-09-22):
 * Kinder samt Belegung stehen in der Kopfkachel. Hier steht nur das Neue;
 * Karte, Knöpfe, Chips, der Verlauf und der Knopf „Formular ausfüllen"
 * (.lb-formular-knopf, öffnet seit 2026-09-23 den Dialog) sind vorhandene
 * Komponenten.
 */

/* Ein Abschnitt innerhalb der Kopfkachel, durch eine Linie abgesetzt. */
.fs-block {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rahmen);
}

.fs-block-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}

.fs-block-titel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

/* Chip-Knopf in der Kopfzeile: sieht aus wie ein meta-chip, ist aber ein Weg.
   Gestrichelt, damit er sich von den reinen Angaben unterscheidet. */
.fs-chip-knopf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px dashed var(--rahmen-stark);
  background: transparent;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ueberschrift);
  text-decoration: none;
}

.fs-chip-knopf:hover {
  background: var(--nav-aktiv);
  border-style: solid;
}

.fs-chip-knopf svg {
  color: var(--text-dezent);
}

/* Vermerk der Familie: bisher nur in der Fachbereichsmaske sichtbar. */
.fs-vermerk {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 var(--space-2);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--hinweis-flaeche);
  border: 1px solid var(--hinweis-rahmen);
  font-size: var(--text-sm);
}

.fs-vermerk svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--st-pause-text);
}

/* --- Kinder und ihre Belegung: eine Zeile je Kind ------------------------
 * Machart der Familienübersicht (.fl-zeile): Der Name ist der Link über die
 * ganze Zeile, der Stift liegt darüber.
 */
.fs-kinder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.fs-kind {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-md);
  background: var(--flaeche-karte);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.fs-kind:hover,
.fs-kind:focus-within {
  background: var(--nav-aktiv);
  border-color: var(--rahmen-stark);
}

.fs-kind-name {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.3;
  color: var(--ueberschrift);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.fs-kind-name svg {
  flex-shrink: 0;
  color: var(--text-dezent);
}

a.fs-kind-name:hover {
  text-decoration: underline;
}

/* Der Name ist der Link über die ganze Zeile; der Stift liegt darüber. Eine
   Belegung ohne Kind-Ordner hat kein Ziel und bekommt die Fläche nicht. */
a.fs-kind-name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.fs-kind-zeit {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: baseline;
  font-size: var(--text-xs);
  color: var(--text-dezent);
}

/* Geplanter Auszug: dieselbe Auszeichnung wie in der Übersicht, dort steht
   seit dem 2026-09-22 ebenfalls nur das Datum ohne „vsl.". */
.fs-kind-zeit .vsl {
  color: var(--st-bereit-text);
  font-weight: 600;
}

/* Etwas fehlt, hier ist der Ort, es einzutragen. */
.fs-kind-zeit .fehlt {
  color: var(--akzent-text);
  font-weight: 600;
}

.fs-kind-werkzeug {
  grid-column: 2;
  grid-row: 1 / -1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Ab Tablet stehen Name, Zeitraum und Stift nebeneinander. */
@media (min-width: 560px) {
  .fs-kind {
    grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) auto;
  }

  .fs-kind-zeit {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
  }

  .fs-kind-werkzeug {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Frühere Belegungen: eingeklappt, gestrichelt, dezent. */
.fs-frueher {
  margin-top: var(--space-1);
}

.fs-frueher > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-dezent);
}

.fs-frueher > summary::-webkit-details-marker {
  display: none;
}

.fs-frueher[open] > summary svg {
  transform: rotate(180deg);
}

.fs-frueher .fs-kinder {
  margin-top: var(--space-1);
}

.fs-frueher .fs-kind {
  background: transparent;
  border-style: dashed;
}

.fs-frueher .fs-kind-name {
  font-weight: 500;
  color: var(--text);
}

/* --- Aktionen der Kopfkachel -------------------------------------------- */
.fs-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Gleiche Höhe wie die Knöpfe daneben (vgl. .fl-aktionen). */
.fs-aktionen .lb-formular-knopf {
  min-height: 40px;
  padding: 7px 16px;
  font-size: var(--text-sm);
  line-height: 1.2;
  white-space: nowrap;
}


/* --- Fachbereich: Charts ------------------------------------------------------
 *
 * Die drei Chart-Karten des Überblicks (KONZEPT-FACHBEREICH 7.3, Fassung B).
 * Das Inline-SVG kommt fertig vom Server (FachbereichChart.php); hier stehen
 * nur die Farbzuordnung, die Schriftgrößen und das Umschalten zwischen den
 * beiden Größenfassungen. Ohne JavaScript ist alles vollständig lesbar.
 */

.chart {
  margin: 0;
  min-width: 0;
  /* Bezugsgröße für die Container-Query weiter unten. */
  container-type: inline-size;
}

.chart-bild {
  position: relative;
}

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font-body);
}

/*
 * Zwei Größenfassungen desselben Charts. Ein einziges SVG müsste in einer
 * 330px breiten Handy-Karte auf 60 % schrumpfen, und die Achsenschrift mit ihm.
 * Deshalb liefert der Server beide Fassungen; die schmale nutzt eine kleinere
 * Zeichenfläche (die Schrift bleibt dadurch groß) und beschriftet nur jeden
 * zweiten Monat. Kennt der Browser keine Container-Queries, bleibt es bei der
 * breiten Fassung.
 */
.chart-svg-schmal {
  display: none;
}

@container (max-width: 459px) {
  .chart-svg-schmal {
    display: block;
  }

  .chart-svg-breit {
    display: none;
  }
}

/* Dritte Fassung nur für den Balken „Weg der Familien", der seit 2026-09-17
   auf breiten Schirmen über die volle Kartenbreite läuft. */
.chart-svg-voll {
  display: none;
}

@container (min-width: 900px) {
  .chart-bild:has(.chart-svg-voll) .chart-svg-breit {
    display: none;
  }

  .chart-svg-voll {
    display: block;
  }
}

/* Ohne Container-Queries entscheidet ersatzweise die Fensterbreite: unter 560px
   steht die Karte ohnehin allein in der Spalte, die schmale Fassung passt. */
@supports not (container-type: inline-size) {
  @media (max-width: 559px) {
    .chart-svg-schmal {
      display: block;
    }

    .chart-svg-breit {
      display: none;
    }
  }
}

/* Farbe steht ausschließlich auf den Marken, nie auf Text. */
.chart .m-blau { --marke: var(--chart-1); }
.chart .m-grau { --marke: var(--chart-grau); }
.chart .m-dezent { --marke: var(--text-dezent); }
.chart .m-weg-1 { --marke: var(--chart-blau-1); --marke-text: var(--chart-blau-1-text); }
.chart .m-weg-2 { --marke: var(--chart-blau-2); --marke-text: var(--chart-blau-2-text); }
.chart .m-weg-3 { --marke: var(--chart-blau-3); --marke-text: var(--chart-blau-3-text); }
.chart .m-weg-4 { --marke: var(--chart-blau-4); --marke-text: var(--chart-blau-4-text); }
.chart .m-weg-pause { --marke: var(--chart-3); --marke-text: var(--chart-3-text); }

.chart .linie {
  fill: none;
  stroke: var(--marke);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart .linie.gestrichelt {
  stroke-dasharray: 5 4;
}

.chart .flaeche {
  fill: var(--chart-flaeche);
  stroke: none;
}

.chart .punkt {
  fill: var(--marke);
  stroke: var(--flaeche-karte);
  stroke-width: 2;
}

.chart .punkt-hohl {
  fill: var(--flaeche-karte);
  stroke: var(--marke);
  stroke-width: 2;
}

.chart .saeule {
  fill: var(--marke);
}

.chart .balken-leer {
  fill: var(--flaeche-dezent);
  stroke: var(--rahmen);
  stroke-width: 1;
}

.chart .gitter {
  stroke: var(--rahmen);
  stroke-width: 1;
}

.chart .achse {
  fill: var(--text-dezent);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Monate hinter dem letzten festen Monat: gedämpft, nicht farbig. */
.chart .marke-heute {
  stroke: var(--rahmen-stark);
  stroke-width: 1;
}

.chart .marke-text {
  fill: var(--text-dezent);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chart .direkt {
  fill: var(--ueberschrift);
  font-size: 12px;
  font-weight: 600;
}

.chart .segment-text {
  fill: var(--marke-text);
  font-size: 12px;
  font-weight: 600;
}

/* Trefferflächen für Tooltip und Fadenkreuz; ohne JS wirkungslos. */
.chart .chart-hit {
  fill: transparent;
}

.chart .chart-kreuz {
  stroke: var(--text-dezent);
  stroke-width: 1;
  pointer-events: none;
}

/* Legende: bei zwei und mehr Reihen immer, Marke plus Beschriftung. */
.chart-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  color: var(--text-dezent);
}

.chart-legende li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-marke {
  flex-shrink: 0;
}

.chart-marke-flaeche {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--marke);
}

.chart-marke-linie {
  width: 16px;
  height: 0;
  border-top: 2px solid var(--marke);
  border-radius: 2px;
}

.chart-marke-gestrichelt {
  border-top-style: dashed;
}

/* Zahlen als Tabelle: der Weg zu jedem Wert ohne Maus und ohne JavaScript. */
details.chart-tabelle {
  margin-top: 8px;
}

details.chart-tabelle > summary {
  font-size: var(--text-xs);
  color: var(--link);
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 4px 0;
}

details.chart-tabelle > summary::-webkit-details-marker {
  display: none;
}

details.chart-tabelle > summary::before {
  content: "\25B8\00A0";
}

details.chart-tabelle[open] > summary::before {
  content: "\25BE\00A0";
}

.chart-tabelle-rolle {
  overflow-x: auto;
}

.chart-tabelle table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
  margin-top: 4px;
}

.chart-tabelle th,
.chart-tabelle td {
  padding: 3px 6px;
  border-top: 1px solid var(--rahmen);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Zahlen und Monatsnamen bleiben in einer Zeile, lange Spaltenköpfe brechen um:
   sonst wäre die Tabelle auf dem Handy breiter als die Karte. */
.chart-tabelle td,
.chart-tabelle tbody th {
  white-space: nowrap;
}

.chart-tabelle thead th {
  color: var(--text-dezent);
  font-weight: 600;
  border-top: 0;
  vertical-align: bottom;
}

.chart-tabelle thead th:first-child,
.chart-tabelle tbody th {
  text-align: left;
}

.chart-tabelle tbody th {
  font-weight: 400;
  color: var(--text);
}

.chart-fussnote {
  margin: 6px 0 0;
  font-size: var(--text-xs);
  color: var(--text-dezent);
}

/* Tooltip: reine Zugabe von app.js, deshalb hier ohne eigenen Inhalt. */
.chart-tooltip {
  position: absolute;
  z-index: 5;
  top: 4px;
  pointer-events: none;
  transform: translate(-50%, 0);
  min-width: 150px;
  padding: 8px 10px;
  border: 1px solid var(--rahmen-stark);
  border-radius: var(--radius-sm);
  background: var(--flaeche-karte);
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
  color: var(--text);
}

.chart-tooltip[hidden] {
  display: none;
}

.chart-tooltip .tt-titel {
  font-weight: 600;
  color: var(--ueberschrift);
  margin-bottom: 4px;
}

.chart-tooltip .tt-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-tooltip .tt-marke {
  width: 10px;
  height: 0;
  border-top: 2px solid var(--marke);
  flex-shrink: 0;
}

.chart-tooltip .tt-wert {
  margin-left: auto;
  font-weight: 600;
  color: var(--ueberschrift);
  font-variant-numeric: tabular-nums;
}

/* --- Fachbereich: Masken, Karten, Rückfragen ----------------------------------
 *
 * Die Bearbeitungsseiten des Moduls (fachbereich-familie.php,
 * fachbereich-belegung.php) und die beiden Karten in familie.php und kind.php
 * (KONZEPT-FACHBEREICH 7.1, 7.4, 7.5). Alles andere kommt aus dem Bestand
 * (.karte, .fb-tabelle, .fb-status, .loesch-vorschau); hier steht nur, was
 * dort gefehlt hat. Farben ausschließlich über die Tokens.
 */

/* Kurzfassung des Kontextes über jeder Maske (7.4): Name der Familie und Ort,
   nicht bearbeitbar. Kein Überschrift-Element, damit die h1 der Maske die
   Überschrift der Seite bleibt. */
.fb-kontext {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.fb-kontext-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ueberschrift);
  overflow-wrap: anywhere;
}

.fb-kontext-zusatz {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  color: var(--text-dezent);
}

/* Mehrere Meldungen einer Maske stehen gemeinsam über ihr (7.4). */
.fehler-liste {
  margin: 0;
  padding-left: 1.2em;
}

.fehler-liste li + li {
  margin-top: 4px;
}

/* Rückfrageseite: was dem Löschen im Weg steht, gezählt und verlinkt (7.5). */
.loesch-hindernisse {
  margin: 0 0 var(--space-3);
  padding-left: 1.2em;
}

.loesch-hindernisse li + li {
  margin-top: 4px;
}

.loesch-hindernisse a {
  margin-left: 6px;
}


/* --- Fachbereich: Druck (minimal, E4) -----------------------------------------
 *
 * Der Überblick lässt sich als Arbeitsblatt drucken; das Papier für den
 * Stiftungsrat ist der Kurzbericht (KONZEPT-FACHBEREICH 7.7). Hier fällt nur
 * weg, was auf Papier nichts tut: Kopfleiste, Wasserzeichen, Stichtagswahl,
 * Stifte, Knöpfe, Tooltip. Die Palette ist am Papier immer die helle
 * (tokens.css, Dark-Blöcke unter @media screen), die Tabellen nehmen die
 * Tabellenform (Breakpoint oben: „(min-width: 768px), print"). Zugeklapptes
 * bleibt zu.
 */
@media print {
  .kopfleiste,
  .dev-mode-bg,
  .fb-stichtag,
  .fb-stift,
  .fb-ohne-zeit .btn,
  .fb-tabelle .zelle-aktion,
  .karte-kopf-zeile .btn,
  .chart-tooltip,
  .aktionen-zeile,
  .formular-aktionen {
    display: none !important;
  }

  body {
    background: #fff;
  }

  /* Breite Tabellen (zehn Spalten bei den Familien) dürfen nicht scrollen,
     sie werden kleiner gesetzt und umbrechen. */
  .fb-tabelle-rahmen {
    overflow: visible;
  }

  .fb-tabelle {
    font-size: var(--text-xs);
  }

  .fb-tabelle .nowrap {
    white-space: normal;
  }

  .karte {
    box-shadow: none;
  }

  /* Zusammenhalten, was auf eine Seite passt; eine ganze Karte darf brechen,
     sonst stünde die Familientabelle allein auf einer Seite. */
  .chart-karte,
  .kennzahlen,
  .fb-tabelle tr {
    break-inside: avoid;
  }

  .fb-tabelle td.zelle-name {
    padding-right: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

/* =============================================================================
 * Navigation der Verwaltung: Slide-in-Menü auf allen Seiten (KONZEPT-STARTSEITE 6.2)
 * =============================================================================
 * Das globale Menü (ansichten/navigation.php) rendert kopf.php in jede
 * Verwaltungsseite; formulare.php hängt es vor seine Formularliste. Ab 768px
 * trägt die Kopfleiste die Punkte, dann ist das Menü weg.
 */
.navi-liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navi-punkt small {
  display: block;
  font-weight: 400;
  color: var(--text-dezent);
  font-size: var(--text-xs);
}

.navi-abschnitt {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rahmen);
}

.navi-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
}

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

.navi-details > summary:hover {
  background: var(--flaeche-dezent);
}

.navi-details > summary svg:first-child {
  flex-shrink: 0;
  color: var(--text-dezent);
}

.navi-details > summary svg:last-child {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text-dezent);
  transition: transform var(--transition-fast);
}

.navi-details[open] > summary svg:last-child {
  transform: rotate(180deg);
}

.navi-unter .navi-punkt {
  padding-left: 41px;
}

/* formulare.php: über der Formularliste, nur im Slide-in */
.navi-mobil {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rahmen);
}

.kopf-link.aktiv {
  background: var(--nav-aktiv);
}

.kopf-link-primaer.aktiv {
  background: var(--primaer);
  box-shadow: var(--shadow-gelb);
}

.zahnrad.aktiv {
  background: var(--nav-aktiv);
  color: var(--ueberschrift);
}

@media (min-width: 768px) {
  .seitenleiste.navi-global,
  .navi-mobil {
    display: none;
  }
}

/* =============================================================================
 * Suchfeld: wiederverwendbares Bauteil (2026-09-22)
 * =============================================================================
 * So baut es eine andere Seite ein:
 *
 *   <form class="suchfeld" method="get" action="/seite.php" role="search">
 *     <input type="hidden" name="filter" value="…">   <!-- was erhalten bleiben soll -->
 *     <?= icon('search', 18) ?>
 *     <input type="search" name="q" value="…" placeholder="…" aria-label="…">
 *     <a class="suchfeld-loeschen" href="<dieselbe Seite ohne q>"
 *        aria-label="Suche löschen"<?= $suche === '' ? ' hidden' : '' ?>><?= icon('x', 16) ?></a>
 *   </form>
 *
 * Außen die Klasse .suchfeld: In einer Flex-Leiste nimmt das Feld damit den
 * Platz ein, der neben den Knöpfen übrig bleibt. Innen ein
 * <input type="search"> und der Verweis .suchfeld-loeschen.
 *
 * Ohne JavaScript steht der Verweis nur da, wenn wirklich gesucht wird, und
 * setzt die Suche über den Parameter q zurück. Mit JavaScript hängt sich
 * app.js (Funktion suchfelder) an jedes .suchfeld: Der Verweis wird zum
 * Leeren-Knopf und erscheint bei Fokus oder Eingabe. Die Breite bleibt dabei
 * unverändert, damit die Leiste beim Hineinklicken stehen bleibt.
 */
.suchfeld {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Feste, kurze Breite: Das Feld aendert seine Groesse nie, deshalb kann beim
     Hineinklicken nichts in der Leiste verrutschen (Vorgabe Holgi,
     2026-09-22). Auf dem Handy fuellt es seine Zeile wie die anderen. */
  flex: 0 0 auto;
  width: 9.5rem;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  background: var(--feld-hintergrund);
  border: 1px solid var(--feld-rahmen);
  color: var(--text-dezent);
}

.suchfeld input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px; /* kein iOS-Zoom */
  color: var(--feld-text);
  outline: none;
}

.suchfeld input[type="search"]::-webkit-search-cancel-button {
  display: none; /* der eigene Schließknopf reicht */
}

/* Blau wie .eingabe:focus. Vorher stand hier die pinke Markierungsfarbe
   --fokus, womit das Suchfeld der einzige Ausreisser der App war. */
.suchfeld:focus-within {
  border-color: var(--farbe-blau);
  box-shadow: 0 0 0 3px var(--fokus-ring);
}

.suchfeld-loeschen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-right: -4px;
  border: 0;
  padding: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-dezent);
  cursor: pointer;
}

/* display: inline-flex würde das hidden-Merkmal aushebeln */
.suchfeld-loeschen[hidden] {
  display: none;
}

/* Im schmalen Fenster kürzen sich die beiden längsten Beschriftungen der
   Leiste, damit sie auch im Hochkantformat des Tablets in eine Zeile passt.
   Die lange Fassung bleibt über aria-label für Vorleseprogramme erhalten. */
@media (max-width: 1099px) {
  .lb-neu-zusatz {
    display: none;
  }
}

/* Unter Tablet quer bleibt vom Tafel-Knopf nur das Symbol. */
@media (max-width: 899px) {
  .lb-tafel-wort {
    display: none;
  }

  .suchfeld {
    width: 8.5rem;
  }
}

.suchfeld-loeschen:hover,
.suchfeld-loeschen:focus-visible {
  background: var(--flaeche-dezent);
  color: var(--ueberschrift);
}


/* Auf dem Handy bricht die Leiste ohnehin um; dort darf das Feld die Zeile
   fuellen, statt kurz in der Ecke zu stehen. */
@media (max-width: 767px) {
  .suchfeld {
    flex: 1 1 100%;
    width: auto;
  }
}

/* =============================================================================
 * Startseite: die Familien als Lagebild (KONZEPT-STARTSEITE.md)
 * =============================================================================
 * Präfix .lb-. Farben ausschließlich über die Tokens, damit das dunkle Design
 * ein reiner Token-Tausch bleibt; die Status-Abzeichen (.fb-status) und die
 * Warnmarke (.fb-ausruf) kommen aus dem Fachbereich.
 */

/* Seitenkopf */
.lb-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.lb-kopf h1 {
  margin-bottom: 2px;
}

.lb-stand {
  margin: 0;
  color: var(--text-dezent);
  font-size: var(--text-sm);
}

.lb-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.lb-umschalter {
  display: inline-flex;
  border: 2px solid var(--rahmen-stark);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.lb-umschalter a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ueberschrift);
  text-decoration: none;
}

.lb-umschalter a.aktiv {
  background: var(--nav-aktiv);
}

.lb-umschalter a + a {
  border-left: 2px solid var(--rahmen-stark);
}

/* Der Statusknopf heißt bis Tablet quer nur „Status": Ab dort wird die Leiste
   eng, und das Zusatzwort kostet den Platz, den das Suchfeld braucht. Die
   Bruchstelle ist dieselbe wie in der Kopfzeile (1099px). Vorleseprogramme
   hören weiter die lange Fassung, sie steht im aria-label des Knopfes. */
@media (max-width: 1099px) {
  .lb-status-zusatz {
    display: none;
  }
}

/* Zusammenfassung: klickbare Zähler, zugleich Filter */
.lb-summe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--space-2);
}

.lb-summe a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--rahmen);
  background: var(--flaeche-karte);
  color: var(--text);
  font-size: var(--text-sm);
  text-decoration: none;
}

.lb-summe a b {
  color: var(--ueberschrift);
  font-size: var(--text-base);
}

.lb-summe a.aktiv {
  border-color: var(--fokus);
  box-shadow: 0 0 0 2px var(--fokus-ring);
}

.lb-summe i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lb-summe .p-belegt { background: var(--st-belegt-text); }
.lb-summe .p-frei { background: var(--st-bereit-text); }
.lb-summe .p-weg { background: var(--st-schulung-text); }
.lb-summe .p-pause { background: var(--st-pause-text); }
.lb-summe .p-klaeren { background: var(--farbe-gelb); }

.lb-filter-aus {
  font-size: var(--text-sm);
}

/* Heute im Blick */
.lb-heute {
  padding: var(--space-2) var(--space-3);
}

.lb-heute > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lb-heute > summary::-webkit-details-marker {
  display: none;
}

.lb-heute > summary h2 {
  margin: 0;
  font-size: var(--text-lg);
}

/* Zahl der Einträge: kräftig wie das Abzeichen von „Zu erledigen", aber im
   Navy-Paar der Belegung, weil hier nicht nur Warnungen stehen (2026-09-16). */
.lb-heute-zahl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 3px 12px 3px 9px;
  border-radius: var(--radius-full);
  background: var(--st-belegt-text);
  color: var(--st-belegt-flaeche);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1;
}

.lb-heute > summary .lb-auf {
  margin-left: auto;
  color: var(--text-dezent);
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lb-heute > summary .lb-auf svg {
  transition: transform var(--transition-fast);
}

.lb-heute[open] > summary .lb-auf svg {
  transform: rotate(180deg);
}

.lb-heute .lb-auf-zu,
.lb-heute[open] .lb-auf-auf {
  display: none;
}

.lb-heute[open] .lb-auf-zu {
  display: inline;
}

.lb-heute-liste {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}

.lb-heute-liste a {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--flaeche-dezent);
  color: var(--text);
  text-decoration: none;
  font-size: var(--text-sm);
}

.lb-heute-liste a:hover {
  background: var(--nav-aktiv);
}

.lb-heute-liste b {
  display: block;
  color: var(--ueberschrift);
  font-weight: 600;
}

.lb-heute-liste small {
  display: block;
  color: var(--text-dezent);
  font-size: var(--text-xs);
}

.lb-heute-liste .fb-ausruf {
  width: 24px;
  height: 24px;
}

.lb-termin {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--st-belegt-flaeche);
  color: var(--st-belegt-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Blöcke nach Zuständigkeit */
.lb-block {
  margin-top: var(--space-3);
}

.lb-block-kopf {
  position: sticky;
  top: var(--kopf-hoehe);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
  margin-bottom: 6px;
  background: var(--flaeche);
}

.lb-avatar {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sekundaer);
  color: var(--sekundaer-text);
  font-weight: 600;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Im Dark Mode ein feiner Rand, sonst verschwinden die Nachthimmel der
     Motive in den Navy-Karten (Token hell transparent). */
  box-shadow: 0 0 0 1px var(--avatar-rand);
}

/* Profilbild (module/profilbild/): Das Foto füllt den Kreis (pb-foto), das
   Motiv (pb-motiv, Markup aus Motiv::markup) legt Himmel, Meer und Initialen
   übereinander. */
.lb-avatar > img,
.pb-grund,
.pb-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lb-avatar > img {
  object-fit: cover;
  display: block;
}

/* Initialen genau in der Kreismitte, größer und feiner als die Schrift des
   Kreises, mit weichem Schatten (Werte von Holgi, 2026-09-22 Abend). Der
   Schatten trägt die Schrift dort, wo die Lichtringe des Motivs den Grund
   aufhellen (Motiv.php). Bei Poppins und line-height 1 sitzen
   Großbuchstaben optisch mittig. */
.pb-kurz {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-weiss);
  font-size: 1.18em;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(17, 29, 61, 0.55);
}

/* Avatar neben einem Text oder Knopf (Einstellungen, Mitarbeiter bearbeiten). */
.avatar-zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.avatar-zeile > p {
  flex: 1 1 16ch;
  margin: 0;
}

.avatar-zeile + .aktionen-zeile {
  margin-top: var(--space-2);
}

.lb-avatar.ohne {
  background: var(--flaeche-dezent);
  color: var(--text-dezent);
  border: 1px dashed var(--text-dezent);
  box-shadow: none;
}

.lb-block-kopf h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.lb-block-meta {
  color: var(--text-dezent);
  font-size: var(--text-sm);
}

.lb-block-kopf .meta-chip {
  margin-left: 2px;
}

.lb-block-leer,
.lb-leer {
  color: var(--text-dezent);
  font-size: var(--text-sm);
  margin: 0;
}

.lb-leer[hidden] {
  display: none;
}

.lb-raster {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

/* Familienkarte */
.lb-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-2);
  background: var(--flaeche-karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.lb-karte:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--rahmen-stark);
}

.lb-karte.achtung {
  box-shadow: inset 4px 0 0 var(--farbe-gelb), var(--shadow-sm);
}

.lb-karte.achtung:hover {
  box-shadow: inset 4px 0 0 var(--farbe-gelb), var(--shadow-md);
}

.lb-karte-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: start;
}

.lb-name {
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.3;
  color: var(--ueberschrift);
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Die ganze Karte ist der Link in die Familie; alles Klickbare darin liegt darüber */
.lb-name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.lb-karte .lb-kinder a,
.lb-karte .lb-formular {
  position: relative;
  z-index: 1;
}

.lb-ort {
  grid-column: 1;
  color: var(--text-dezent);
  font-size: var(--text-xs);
}

.lb-stand-spalte {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.lb-karte-kopf .fb-status {
  white-space: nowrap;
}

.lb-seit {
  color: var(--text-dezent);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.lb-seit.vsl {
  color: var(--st-bereit-text);
  font-weight: 600;
}

.lb-belegung {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.lb-plaetze {
  display: flex;
  gap: 4px;
  padding-top: 5px;
  flex-shrink: 0;
}

.lb-plaetze i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--st-belegt-text);
  box-sizing: border-box;
}

.lb-plaetze i.voll {
  background: var(--st-belegt-text);
}

.lb-plaetze i.zu {
  border-color: var(--st-pause-text);
  border-style: dotted;
}

.lb-kinder {
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: var(--text-sm);
}

.lb-kinder li {
  display: flex;
  flex-wrap: wrap;
  gap: 1px 8px;
  align-items: baseline;
}

.lb-kinder b {
  color: var(--ueberschrift);
  font-weight: 600;
}

.lb-kinder b a {
  color: inherit;
  text-decoration: none;
}

.lb-kinder b a:hover {
  text-decoration: underline;
}

.lb-kinder span {
  color: var(--text-dezent);
  font-size: var(--text-xs);
}

.lb-kinder span.vsl {
  color: var(--st-bereit-text);
  font-weight: 600;
}

.lb-frei {
  margin: 0;
  font-size: var(--text-sm);
}

.lb-frei small {
  display: block;
  color: var(--text-dezent);
  font-size: var(--text-xs);
}

.lb-karte-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  margin-top: auto;
  font-size: var(--text-xs);
  color: var(--text-dezent);
}

.lb-unterlagen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lb-balken {
  display: inline-block;
  width: 56px;
  height: 6px;
  border-radius: 3px;
  background: var(--flaeche-dezent);
  overflow: hidden;
}

.lb-balken b {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--st-bereit-text);
}

.lb-unterlagen.fehlt .lb-balken b {
  background: var(--farbe-gelb);
}

.lb-naechstes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.lb-naechstes.bald {
  color: var(--ueberschrift);
  font-weight: 600;
}

.lb-hinweise {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: var(--text-xs);
}

.lb-hinweise li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--text);
}

.lb-hinweise .fb-ausruf {
  width: 18px;
  height: 18px;
  margin-top: 0;
}

/* Knopf „Formular ausfüllen" in der Familienübersicht, auf der Familienseite
 * und im Kind-Ordner. Seit dem 2026-09-23 ein Link, der den Dialog öffnet
 * (KONZEPT 10.3); vorher ein <details> mit aufklappender Liste. */
.lb-formular-knopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 2px solid var(--rahmen-stark);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ueberschrift);
  text-decoration: none;
}

.lb-formular-knopf:hover,
.lb-formular-knopf:focus-visible {
  background: var(--nav-aktiv);
  border-color: var(--ueberschrift);
  text-decoration: none;
}

/* --- Dialog „Formular ausfüllen" (.af-*) -------------------------------------
 * KONZEPT 10.3, Nachtrag 2026-09-23. Derselbe Inhalt steht ohne JS als Seite
 * in einer Karte (.af-seite), mit JS in einem <dialog> (.af-dialog, app.js):
 * mittig, groß, innen scrollbar, Kopf und Fuß bleiben stehen. Auf dem Handy
 * fast bildschirmfüllend.
 */
.af-dialog {
  width: min(42rem, calc(100vw - 32px));
  max-width: none;
  max-height: min(56rem, calc(100dvh - 48px));
  padding: 0;
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-lg);
  background: var(--flaeche-karte);
  color: var(--text);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.af-dialog[open] {
  display: flex;
  flex-direction: column;
}

.af-dialog::backdrop {
  background: rgba(17, 29, 61, 0.55);
}

.af-dialog .af,
.af-dialog .af-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.af-dialog .af-inhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.af-kopf {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--rahmen);
}

.af-kopf-text {
  flex: 1;
  min-width: 0;
}

.af-titel {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--ueberschrift);
}

.af-titel:focus {
  outline: none;
}

.af-fuer {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  color: var(--text-dezent);
}

.af-fuer b {
  color: var(--ueberschrift);
  font-weight: 600;
}

.af-zu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: -4px -6px 0 0;
  border: 0;
  border-radius: 50%;
  background: var(--flaeche-dezent);
  color: var(--ueberschrift);
  cursor: pointer;
}

/* display: flex würde das hidden-Merkmal aushebeln (ohne JS kein Knopf) */
.af-zu[hidden] {
  display: none;
}

.af-leiste {
  display: flex;
  gap: 8px;
  padding: 12px 20px 0;
}

.af-leiste .eingabe {
  flex: 1;
  min-width: 0;
}

.af-inhalt {
  padding: 14px 20px 18px;
}

.af-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--rahmen);
}

/* „Zurück" links, der Schritt nach vorn rechts */
.af-fuss .btn:first-child:not(:only-child) {
  margin-right: auto;
}

.af-laedt {
  padding: 32px 20px;
  color: var(--text-dezent);
}

.af-gruppe {
  margin: 16px 0 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dezent);
}

.af-inhalt > .af-gruppe:first-child {
  margin-top: 0;
}

/* Das versteckte Kästchen bleibt in seiner Zeile; ohne das läge es oben im
   Dialog, und der Klick darauf würde die Liste nach oben springen lassen. */
.af-wahl {
  position: relative;
}

.af-wahl:has(input:checked) {
  background: var(--nav-aktiv);
}

.af-wahl small,
.af-zeile small {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-dezent);
}

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

.af-zeile {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.af-zeile:hover {
  background: var(--flaeche-dezent);
  text-decoration: none;
}

.af-zeile svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--text-dezent);
}

.af-zeile-neu {
  margin-bottom: 8px;
  border: 2px dashed var(--rahmen-stark);
}

.af-zeile-neu svg {
  color: var(--fokus);
}

.af-leer {
  margin: 0;
  padding: 8px 12px;
}

.af-nebenweg {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

.af-auswahl {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--flaeche-dezent);
  font-size: var(--text-sm);
}

.af-auswahl p {
  margin: 0 0 4px;
}

.af-auswahl ul {
  margin: 0;
  padding-left: 1.2em;
}

.af-weg {
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-md);
}

.af-weg:last-child {
  margin-bottom: 0;
}

.af-weg h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: var(--text-base);
  color: var(--ueberschrift);
}

.af-weg h3 svg {
  color: var(--fokus);
}

.af-weg-wahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.af-weg-wahl + .af-weg-wahl {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--rahmen);
}

.af-weg-wahl .btn {
  flex-shrink: 0;
  min-width: 13rem;
}

.af-weg-hinweis {
  flex: 1 1 14rem;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-dezent);
}

.af-weg .element {
  margin-bottom: 12px;
}

/* Gesperrt bei gemischter Auswahl (Familie und Kind): sichtbar zurückgenommen */
.af-weg .btn:disabled,
.af-weg .eingabe:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Im Dialog steht die Beschriftung über dem Feld, nicht links daneben */
@media (min-width: 768px) {
  .af .element-feld {
    display: block;
  }
  .af .element-feld .feld-label {
    margin-bottom: 6px;
    padding-top: 0;
  }
}

.af-pdfs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Seitenfassung ohne JS: die Karte gibt den Rahmen */
.af-seite .af-kopf {
  padding: 0 0 14px;
}

.af-seite .af-leiste {
  padding: 12px 0 0;
}

.af-seite .af-inhalt {
  padding: 14px 0 0;
}

.af-seite .af-fuss {
  margin-top: 14px;
  padding: 14px 0 0;
}

@media (max-width: 599.98px) {
  .af-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: var(--radius-md);
  }

  .af-dialog .af-kopf,
  .af-dialog .af-leiste,
  .af-dialog .af-inhalt,
  .af-dialog .af-fuss {
    padding-left: 14px;
    padding-right: 14px;
  }

  .af-dialog .af-fuss {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .af-weg-wahl .btn {
    width: 100%;
    min-width: 0;
  }
}

.lb-abgeschlossen {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-dezent);
}

.lb-abgeschlossen a {
  color: var(--link);
}

.lb-abgeschlossen[hidden] {
  display: none;
}

/* Zeitleiste */
.lb-zeit {
  padding: var(--space-2) var(--space-3);
}

.lb-zeit-kopf,
.lb-zeit-zeile {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.lb-zeit-kopf {
  position: sticky;
  top: var(--kopf-hoehe);
  z-index: 3;
  background: var(--flaeche-karte);
  padding: 4px 0;
}

.lb-zeit-titel {
  color: var(--text-dezent);
  font-size: var(--text-xs);
}

.lb-zeit-monate {
  position: relative;
  font-size: var(--text-xs);
  color: var(--text-dezent);
}

.lb-zeit-monate .lb-zeit-leinwand {
  display: flex;
  padding-bottom: 22px;
}

/* Verschiebbare Zeitleiste (2026-09-23): Jeder Streifen und der Monatskopf sind
   ein Fenster auf die breitere Leinwand. --zl-breite ist die Leinwand in
   Fensterbreiten, --zl-versatz der Fensteranfang in Prozent der Leinwand; beide
   setzt index.php, --zl-versatz ändert app.js beim Ziehen. Die Ränder laufen
   weich aus: Da geht es weiter. */
.lb-zeit-leinwand {
  position: relative;
  height: 100%;
  width: calc(var(--zl-breite, 1) * 100%);
  transform: translateX(calc(var(--zl-versatz, 0) * -1%));
}

.lb-zeit-monate,
.lb-zeit-strip {
  overflow: hidden;
  overflow: clip;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

/* Ziehen mit Maus oder Finger; die Klasse setzt app.js, ohne JavaScript gibt es
   keine Hand, die etwas verspricht. touch-action lässt das Hoch- und
   Runterwischen beim Browser, waagerecht entscheidet app.js. */
.lb-zeit.zl-bereit .lb-zeit-monate,
.lb-zeit.zl-bereit .lb-zeit-strip {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.lb-zeit.zl-zieht,
.lb-zeit.zl-zieht * {
  cursor: grabbing !important;
}

.lb-zeit.zl-zieht .lb-zeit-strip {
  background: var(--flaeche-dezent);
}

.lb-zeit-monate span {
  padding: 2px 5px;
  border-left: 1px solid var(--rahmen);
  white-space: nowrap;
  overflow: hidden;
}

.lb-zeit-monate span.heute-monat {
  color: var(--ueberschrift);
  font-weight: 600;
}

.lb-zeit-heute-label {
  position: absolute;
  top: 22px;
  transform: translateX(-50%);
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--fokus);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  z-index: 4;
}

.lb-zeit-block {
  margin-top: var(--space-2);
}

/* Mehr Luft zwischen den Blöcken der Zuständigen (Holgi, 2026-09-22) */
.lb-zeit-block + .lb-zeit-block {
  margin-top: 40px;
}

/* Der Name tritt hinter das Profilbild zurück: gedämpftes Blau, Farben je
   Theme von Holgi vorgegeben (2026-09-22) */
.lb-zeit-block h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-size: var(--text-base);
  font-weight: 500;
  color: #7397ae;
}

[data-theme="dark"] .lb-zeit-block h3 {
  color: #95bcd4;
}

.lb-zeit-block h3 .lb-avatar {
  width: 28px;
  height: 28px;
  font-size: var(--text-xs);
}

.lb-zeit-block h3 small {
  color: var(--text-dezent);
  font-weight: 400;
  font-size: var(--text-xs);
}

/* Den Innenabstand oben und unten trägt seit 2026-09-23 der Streifen selbst
   (6px, siehe die Höhe in index.php): Er schneidet seitlich ab, und die
   Heute-Linie soll trotzdem von Zeile zu Zeile durchlaufen. */
.lb-zeit-zeile {
  border-top: 1px solid var(--rahmen);
}

.lb-zeit-name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 6px 0;
  font-size: var(--text-sm);
}

.lb-zeit-name a {
  font-weight: 600;
  color: var(--ueberschrift);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-zeit-strip {
  position: relative;
  height: 40px;
}

.lb-zeit-raster {
  position: absolute;
  inset: 0;
  display: flex;
}

.lb-zeit-raster i {
  display: block;
  border-left: 1px solid var(--rahmen);
}

.lb-heute-linie {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--fokus);
  z-index: 3;
}

.lb-bb {
  position: absolute;
  top: 14px;
  height: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 8px;
  /* Beginnt der Balken links außerhalb des Ausschnitts, rückt der Name an
     dessen Rand nach, sonst verschwände er beim Verschieben (2026-09-23).
     --l und --w sind Anfang und Breite des Balkens in Prozent der Leinwand,
     Prozent beim padding beziehen sich auf die Leinwand; 20px halten ihn aus
     dem weichen Rand. Höchstens so weit, wie der Balken breit ist: Sonst
     dehnte der Abstand einen beendeten Balken bis in den Ausschnitt. */
  padding-left: max(8px, min(calc((var(--zl-versatz, 0) - var(--l, 100)) * 1% + 20px), calc(var(--w, 100) * 1% - 8px)));
  border-radius: 6px;
  background: var(--st-belegt-flaeche);
  color: var(--st-belegt-text);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--rahmen-stark);
  /* Kurze Balken: der Text darf über das Ende hinauslaufen, der Hof hält ihn lesbar */
  text-shadow: 0 0 3px var(--flaeche-karte), 0 0 3px var(--flaeche-karte), 0 0 2px var(--flaeche-karte);
}

/* Dieselbe feine Kontur wie der belegt-Balken; die kräftige Linie in
   --st-belegt-text wirkte im dunklen Theme als weißer Fremdkörper (Holgi, 2026-09-22) */
/* Ragt vom Balken beim Verschieben kaum noch etwas ins Bild, tritt der Name
   zurück, statt über die Nachbarn zu laufen: unsichtbar bei 3 %, ganz da ab
   5 % sichtbarer Länge (Prozent der Leinwand). */
.lb-bb-name {
  opacity: clamp(0, calc((var(--l, 0) + var(--w, 100) - var(--zl-versatz, 0) - 3) / 2), 1);
}

.lb-bb.vsl {
  background: repeating-linear-gradient(135deg, var(--st-belegt-flaeche) 0 5px, transparent 5px 9px);
  box-shadow: inset 0 0 0 1px var(--rahmen-stark);
  border-radius: 0 6px 6px 0;
}

/* Voraussichtliches Ende hinter dem schraffierten Balken, im Blau der Links,
   das in beiden Themes gut lesbar ist (Holgi, 2026-09-22) */
.lb-bb-datum {
  position: absolute;
  z-index: 2;
  padding-left: 6px;
  color: var(--link);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  text-shadow: 0 0 3px var(--flaeche-karte), 0 0 3px var(--flaeche-karte), 0 0 2px var(--flaeche-karte);
}

.lb-bb.offen {
  background: linear-gradient(90deg, var(--st-belegt-flaeche), transparent);
  box-shadow: none;
  border-radius: 0;
}

.lb-bb.vergangen {
  opacity: .55;
  overflow: hidden;
  text-shadow: none;
}

.lb-bs {
  position: absolute;
  top: 18px;
  height: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.lb-bs.vorbereitung { background: var(--st-eignung-flaeche); color: var(--st-eignung-text); }
.lb-bs.pause { background: var(--st-pause-flaeche); color: var(--st-pause-text); }
.lb-bs.frei { background: transparent; color: var(--st-bereit-text); border: 1px dashed var(--st-bereit-text); }
.lb-bs.offen { background: var(--st-offen-flaeche); color: var(--st-offen-text); box-shadow: inset 0 0 0 1px currentColor; }

/* Vergangene Abschnitte der Statusgeschichte, zurückgenommen wie beendete Belegungen */
.lb-bs.vergangen { opacity: .55; }

/* Die Beschriftung einer Stufe steht immer rechts der Heute-Linie: dort liest man den Stand */
.lb-notiz {
  position: absolute;
  top: 19px;
  z-index: 2;
  padding-left: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  white-space: nowrap;
}

.lb-notiz.vorbereitung { color: var(--st-eignung-text); }
.lb-notiz.pause { color: var(--st-pause-text); }
.lb-notiz.frei { color: var(--st-bereit-text); }
.lb-notiz.offen { color: var(--st-offen-text); }

.lb-marke {
  position: absolute;
  top: 10px;
  z-index: 2;
  width: 0;
  height: 0;
  transform: translateX(-6px);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--st-bereit-text);
}

/* Legende: klebt am unteren Fensterrand, solange die Zeitleiste im Bild ist */
.lb-legende {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: var(--space-2) calc(-1 * var(--space-3)) calc(-1 * var(--space-2));
  padding: 10px var(--space-3) 12px;
  border-top: 1px solid var(--rahmen);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--flaeche-karte);
  font-size: var(--text-xs);
  color: var(--text-dezent);
}

.lb-legende span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lb-legende i {
  display: inline-block;
  width: 22px;
  height: 12px;
  border-radius: 3px;
}

.lb-legende .l-belegt { background: var(--st-belegt-flaeche); box-shadow: inset 0 0 0 1px var(--rahmen-stark); }
.lb-legende .l-vsl { background: repeating-linear-gradient(135deg, var(--st-belegt-flaeche) 0 4px, transparent 4px 7px); box-shadow: inset 0 0 0 1px var(--rahmen-stark); }
.lb-legende .l-offen { background: linear-gradient(90deg, var(--st-belegt-flaeche), transparent); border-radius: 0; }
.lb-legende .l-heute { width: 2px; height: 14px; border-radius: 0; background: var(--fokus); }
.lb-legende .l-vorbereitung { background: var(--st-eignung-flaeche); }
.lb-legende .l-pause { background: var(--st-pause-flaeche); }
.lb-legende .l-frei { border: 1px dashed var(--st-bereit-text); }
.lb-legende .l-marke { width: 0; height: 0; border-radius: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--st-bereit-text); }

.lb-zeit-hinweis {
  display: none;
}

/* Handy: Kopf knapp, Zähler und „Heute im Blick" als Wischleisten, Zeitleiste weg */
@media (max-width: 767px) {
  .lb-zeit {
    display: none;
  }

  .lb-zeit-hinweis {
    display: block;
  }

  .lb-umschalter,
  .lb-tafel-knopf {
    display: none;
  }

  .lb-aktionen {
    width: 100%;
  }

  .suchfeld {
    flex: 1;
  }

  .lb-summe {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-left: calc(-1 * var(--space-2));
    margin-right: calc(-1 * var(--space-2));
    padding: 0 var(--space-2) 4px;
    scrollbar-width: none;
  }

  .lb-summe a {
    flex-shrink: 0;
  }

  .lb-heute > summary .lb-block-meta {
    display: none;
  }

  /* Seit 2026-09-16 auf allen Breiten eingeklappt; aufgeklappt ist die Liste
     auf dem Handy eine Wischleiste */
  .lb-heute-liste {
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .lb-heute-liste li {
    scroll-snap-align: start;
    min-width: 0;
  }

  .lb-heute-liste a {
    height: 100%;
  }
}

/* Tafel-Modus: volle Breite, größere Schrift, Blöcke nebeneinander, keine Bedienelemente */
html.tafel {
  font-size: 17px;
}

@media (min-width: 1600px) {
  html.tafel {
    font-size: 20px;
  }
}

html.tafel .inhalt,
html.tafel .kopfleiste-innen {
  max-width: none;
}

html.tafel .inhalt {
  padding: var(--space-2) var(--space-3);
}

html.tafel .nav-burger,
html.tafel .kopf-link,
html.tafel .zahnrad {
  display: none;
}

.lb-tafel .lb-bloecke {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
  margin-top: var(--space-2);
}

.lb-tafel .lb-block {
  margin-top: 0;
}

.lb-tafel .lb-raster {
  grid-template-columns: 1fr;
  gap: 10px;
}

.lb-tafel .lb-block-kopf {
  position: static;
}

.lb-tafel .lb-karte {
  padding: 12px 14px;
  gap: 8px;
}

.lb-tafel .lb-name::after {
  content: none; /* an der Tafel wird nicht geklickt */
}

.lb-tafel .lb-heute-liste {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.lb-tafel .lb-zeit-kopf,
.lb-tafel .lb-zeit-zeile {
  grid-template-columns: 240px minmax(0, 1fr);
}

/* Druck: Blöcke untereinander, keine Knöpfe (KONZEPT-STARTSEITE 8) */
@media print {
  .lb-aktionen,
  .lb-tafel-aus,
  .lb-formular-knopf,
  .lb-summe,
  .lb-legende,
  .seitenleiste.navi-global,
  .nav-overlay {
    display: none !important;
  }

  .lb-block-kopf,
  .lb-zeit-kopf {
    position: static;
  }

  .lb-tafel .lb-bloecke {
    display: block;
  }

  .lb-karte {
    break-inside: avoid;
  }
}

/* --- ToDo-Tafel ------------------------------------------------------------------
 * Drei Spalten ab 1024px, darunter gestapelt (Handy zuerst). Farbkennung je
 * Spalte über den oberen Rand: dringend Pink, mittelfristig Gelb, einplanen Blau. */
.todo-kopf h1 {
  margin-bottom: var(--space-1);
}

.todo-kopf p {
  margin: 0;
}

.todo-tafel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-top: var(--space-2);
  align-items: start;
}

@media (min-width: 1024px) {
  .todo-tafel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.todo-spalte {
  --todo-kennung: var(--farbe-blau);
  background: var(--flaeche-dezent);
  border: 1px solid var(--rahmen);
  border-top: 4px solid var(--todo-kennung);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.todo-spalte-dringend {
  --todo-kennung: var(--farbe-pink);
}

.todo-spalte-mittelfristig {
  --todo-kennung: var(--farbe-gelb);
}

.todo-spalte-einplanen {
  --todo-kennung: var(--farbe-blau);
}

.todo-spalte-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 4px;
}

.todo-spalte-kopf h2 {
  margin: 0;
  font-size: var(--text-xl);
  display: flex;
  align-items: center;
  gap: 8px;
}

.todo-zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--todo-kennung);
  color: var(--farbe-navy);
  font-size: var(--text-sm);
  font-weight: 600;
}

.todo-spalte-unter {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  color: var(--text-dezent);
}

.todo-leer {
  margin: 0;
  padding: 10px 2px;
  font-size: var(--text-sm);
  color: var(--text-dezent);
  font-style: italic;
}

.todo-karte {
  background: var(--flaeche-karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--kopf-hoehe) + 12px);
}

.todo-karte h3 {
  margin: 0 0 6px;
  font-size: var(--text-lg);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.todo-text {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.todo-text p {
  margin: 0 0 8px;
}

.todo-meta {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  color: var(--text-dezent);
}

.todo-autor {
  font-size: var(--text-xs);
}

/* Erledigt: gedämpft und durchgestrichen, der Häkchen-Knopf bleibt kräftig */
.todo-erledigt {
  background: transparent;
  box-shadow: none;
}

.todo-erledigt h3,
.todo-erledigt .todo-text,
.todo-erledigt .todo-meta {
  color: var(--text-dezent);
  opacity: 0.75;
}

.todo-erledigt h3,
.todo-erledigt .todo-text {
  text-decoration: line-through;
}

.todo-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
}

.todo-knoepfe form {
  margin: 0;
}

.todo-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--rahmen-stark);
  background: var(--flaeche-karte);
  color: var(--ueberschrift);
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.todo-knopf svg {
  width: 18px;
  height: 18px;
}

.todo-knopf:hover,
.todo-knopf:focus-visible {
  border-color: var(--ueberschrift);
  background: var(--flaeche-dezent);
}

.todo-knopf:disabled {
  opacity: 0.35;
  cursor: default;
  border-color: var(--rahmen);
  background: transparent;
}

.todo-links svg {
  transform: rotate(-90deg);
}

.todo-rechts svg {
  transform: rotate(90deg);
}

.todo-knopf.todo-an {
  background: var(--erfolg-flaeche);
  border-color: var(--erfolg-rahmen);
  color: var(--erfolg);
}

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

.todo-knopf.todo-gefahr:hover,
.todo-knopf.todo-gefahr:focus-visible {
  border-color: var(--fehler);
  background: var(--fehler-flaeche);
}

.todo-neu {
  background: var(--primaer);
  border-color: var(--primaer);
  color: var(--primaer-text);
}

.todo-neu:hover,
.todo-neu:focus-visible {
  background: var(--primaer);
  box-shadow: var(--shadow-gelb);
}

.todo-karte-formular {
  border: 2px solid var(--todo-kennung);
}

.todo-formular .feld-label {
  margin-top: 10px;
}

.todo-formular-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.todo-formular-knoepfe form {
  margin: 0;
}

.todo-rueckfrage {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--fehler-flaeche);
  border: 1px solid var(--fehler-rahmen);
  font-size: var(--text-sm);
}

.todo-rueckfrage p {
  margin: 0;
}

.todo-unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}