/* Loewenbande - Stylesheet. Reihenfolge: Tokens, Grundschrift, Geruest,
   Bausteine, Bereiche, Druck. */
/* Hausschrift Outfit - lokal aus src/vendor/, nicht von fonts.googleapis.com.
   Damit braucht die Content-Security-Policy keine Fremdhosts mehr, und es
   gehen keine Besucher-IPs an Google. Die @font-face-Regeln samt
   unicode-range stehen unveraendert in vendor/outfit.css. */
@import "vendor/outfit.css";
/* Der frühere Import von invoice.css ist entfallen: Die Datei wurde in be9814f
   gelöscht, weil ihre Regeln längst in dieser Datei stehen (.invoice-* weiter
   unten, @page im Druckabschnitt). Der Import blieb aber stehen und ließ jeden
   Seitenaufruf eine Datei anfordern, die es nicht mehr gibt - die .htaccess
   antwortet darauf mit index.html, und der Browser meldet einen MIME-Fehler. */

/* --------------------------------------------------------------------------
   TOKENS - die einzige Stelle, an der Farbe, Mass und Ebene entschieden wird.
   Jede Farbe hat hier eine Rolle, keine Dekoration (siehe DESIGN.md):
   --primary ist die einzige Handlungsfarbe, --gold gehoert der Bildmarke,
   --danger/--success/--warn/--info sagen etwas ueber den Zustand aus.
   Darunter stehen die alten Namen als Alias. Sie werden NICHT geloescht:
   admin.js allein setzt ueber 1.400 Inline-Stile, die auf ihnen aufbauen -
   sie zeigen nur ab jetzt auf die neuen Werte.
   -------------------------------------------------------------------------- */
:root {
  /* Handlung, Auswahl, aktiver Reiter. Dunkler als frueher, damit Weiss
     darauf WCAG AA besteht (das alte 58%-Pink tat das nicht). */
  --primary:       hsl(328, 52%, 48%);
  --primary-soft:  hsl(328, 60%, 95%);
  --primary-ink:   hsl(328, 50%, 34%);
  --primary-hover: hsl(328, 52%, 42%);

  /* Waerme und Marke. Nur fuer Bildmarken, "heute" und Leerzustaende -
     NIE fuer Knoepfe, sonst konkurrieren zwei Handlungsfarben. */
  --gold:      hsl(44, 92%, 50%);
  --gold-soft: hsl(44, 90%, 93%);

  --danger:      hsl(0, 60%, 48%);
  --danger-soft: hsl(0, 70%, 95%);
  --danger-ink:  hsl(0, 60%, 34%);

  --success:      hsl(122, 35%, 38%);
  --success-soft: hsl(120, 40%, 93%);
  --success-ink:  hsl(122, 45%, 24%);

  --warn:      hsl(36, 85%, 42%);
  --warn-soft: hsl(40, 90%, 92%);
  --warn-ink:  hsl(35, 80%, 30%);

  --info:      hsl(200, 55%, 42%);
  --info-soft: hsl(200, 60%, 94%);
  --info-ink:  hsl(200, 60%, 30%);

  /* Grund und Linien - warmes Creme, wie bisher */
  --bg:      hsl(36, 40%, 98%);
  --bg-2:    hsl(36, 30%, 95%);
  --surface: #ffffff;
  --line:        hsl(36, 20%, 88%);
  --line-strong: hsl(36, 16%, 78%);

  /* Schrift. --ink-3 nur fuer Nebentext ab 0.85rem, darunter reicht der
     Kontrast nicht mehr. */
  --ink:   hsl(200, 20%, 20%);
  --ink-2: hsl(200, 12%, 38%);
  --ink-3: hsl(200, 10%, 50%);

  /* Bereichsfarben: nur in der Navigation, nur als Tonung von Symbol und
     Marker des aktiven Bereichs - nie als Flaeche. Sie zitieren den
     Regenbogen des Logos und beantworten die Frage "wo bin ich gerade". */
  --ton-primary: var(--primary);
  --ton-blau:    hsl(205, 55%, 45%);
  --ton-gruen:   hsl(122, 35%, 40%);
  --ton-orange:  hsl(28, 80%, 46%);
  --ton-primary-soft: var(--primary-soft);
  --ton-blau-soft:    hsl(205, 60%, 94%);
  --ton-gruen-soft:   hsl(122, 40%, 93%);
  --ton-orange-soft:  hsl(28, 85%, 94%);

  /* Radien. Vier Stufen statt der bisherigen zwoelf Freihandwerte. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --r-pill: var(--radius-pill);

  /* Abstaende, 8er-Raster */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Schriftskala. Sieben Stufen decken ab, wofuer die Datei frueher ueber
     30 verschiedene rem-Werte hatte. */
  --fs-xs:  0.75rem;
  --fs-sm:  0.85rem;
  --fs-md:  0.95rem;
  --fs-lg:  1.05rem;
  --fs-xl:  1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.85rem;

  /* Schatten. Karten springen bei Hover nicht mehr hoch, deshalb braucht
     es keine zweite "Hover"-Stufe. */
  --shadow-1: 0 1px 2px rgba(60, 40, 20, 0.06), 0 1px 3px rgba(60, 40, 20, 0.04);
  --shadow-2: 0 6px 20px rgba(60, 40, 20, 0.10);
  --shadow-3: 0 16px 40px rgba(60, 40, 20, 0.18);

  /* Geruestmasse */
  --header-h: 56px;
  --sidebar-w: 248px;
  --bottombar-h: 60px;
  --inhalt-max: 1120px;

  /* Z-Ebenen: bisher standen 100/1000/1200/2000/9999/99999 verstreut im
     Code, ohne dass irgendwo die Reihenfolge aufgeschrieben war. */
  --z-header: 100;
  --z-sheet: 900;
  --z-modal: 1000;
  --z-dropdown: 1200;
  --z-toast: 2000;
  --z-overlay: 9999;

  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Auszeichnung der Angebote. Stand frueher als eigener :root-Block mitten
     im Angebote-Abschnitt (Z. ~7999) - Tokens gehoeren nach oben, sonst
     sucht sie niemand. Premium heisst nicht "aufwendiger", sondern so tief
     durchdacht, dass die Ausfuehrung einfach wird: ein ruhiger Bernsteinton.
     --ans ist der Schieferton fuer Angebote ausserhalb von Montessori -
     leise, weil sie nicht schlechter sind, sondern anders begruendet. */
  --prem:      hsl(38, 64%, 38%);
  --prem-hell: hsl(40, 82%, 95%);
  --prem-rand: hsl(38, 58%, 76%);
  --ans:      hsl(212, 26%, 40%);
  --ans-hell: hsl(212, 38%, 96%);
  --ans-rand: hsl(212, 26%, 78%);

  /* ---- Alte Namen, neue Werte. Nicht loeschen: hunderte Verweise in JS. -- */
  --bg-primary: var(--bg);
  --bg-secondary: var(--bg-2);
  --white: var(--surface);
  --border-color: var(--line);
  --text-main: var(--ink);
  --text-muted: var(--ink-2);

  --primary-light: var(--primary-soft);
  --primary-dark: var(--primary-ink);
  --primary-text: var(--primary-ink);

  /* Terracotta ist keine Handlungsfarbe mehr. Der Token bleibt, zeigt aber
     auf einen zurueckgenommenen Ton - so verlieren die vielen
     Terracotta-Inline-Stile ihre Lautstaerke, ohne dass jemand sie anfasst. */
  --accent:       hsl(24, 45%, 52%);
  --accent-light: hsl(24, 50%, 94%);
  --accent-dark:  hsl(24, 45%, 38%);
  --accent-text:  hsl(24, 50%, 32%);

  --accent-blue: var(--info);
  --accent-blue-light: var(--info-soft);

  --danger-light: var(--danger-soft);
  --danger-text: var(--danger-ink);
  --success-light: var(--success-soft);
  --success-text: var(--success-ink);

  --border: var(--line);
  --text: var(--ink);

  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-1);
  --shadow-lg: var(--shadow-3);
}

/* Global Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Ohne das hier vergroessert Mobile Safari die Schrift eigenmaechtig in
   schmalen Spalten (seine Textautogroesse), ohne die Zeilenhoehe
   nachzuziehen - genau in engen Reihen wie .ang-karte-fuss lief das der
   Angebots-Karte die Zeilen ineinander (ueberlappende Schrift unten links).
   width=device-width im Viewport-Meta reicht dafuer nicht aus. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-md);
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  /* Ein einzelnes langes Wort darf die Seite nicht sprengen (UI-005).
     Am Handy gemessen: ein Wort wie "Selbstwirksamkeitserfahrung" in einer
     Lerngeschichte schob die Seite um 70 px hinaus, ein langer Text ohne
     Umbruchstelle um 855 px. Zusammen mit dem overflow-x: hidden darueber
     hiess das nicht "es rutscht", sondern "der Text ist weg" - abgeschnitten
     und fuer die Leserin unerreichbar. Deutsche Zusammensetzungen werden in
     paedagogischen Texten leicht so lang, und eine eingetippte Adresse
     ebenso. break-word bricht NUR, wenn es sonst ueberlaufen wuerde; normale
     Zeilen bleiben unberuehrt, und wo white-space: nowrap gilt (etwa die
     Segmentknoepfe), greift es ohnehin nicht. */
  overflow-wrap: break-word;
}

/* Ueberschriften: eine Skala statt fuenf Freihandgroessen je Bereich. */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

/* Verweise ohne eigene Klasse waren nackte pinke Woerter - als
   Bedienelement nicht erkennbar. Die Unterstreichung macht sie wieder zu
   Verweisen, ohne dass jemand das Markup anfasst. */
a:not([class]) {
  color: var(--primary-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Auswahlkaestchen im Kind-Formular waren 13px gross - unter dem Finger
   nicht zu treffen und kaum zu sehen, ob sie gesetzt sind. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
  width: 18px;
  height: 18px;
  /* Sitzt das Kaestchen in einem Flex-Label mit langem Text, darf es als
     Flex-Element nicht schrumpfen - sonst wird aus 18px schnell 16px. */
  flex-shrink: 0;
}

/* Sichtbarer Fokusring fuer Tastatur-Bedienung: greift ueberall, wo eine
   Komponente keinen eigenen :focus-visible-Ring definiert. Nur bei
   Tastatur-Fokus (nicht bei Maus-Klick), damit es optisch ruhig bleibt. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* App Container */
#app-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Alte Kopfzeile. Sie steht nur noch auf Fehlerseiten; das Geruest weiter
   unten (.app-header) hat sie sonst abgeloest. Der Glaseffekt ist weg: eine
   halbdurchsichtige, weichgezeichnete Leiste liess den Inhalt darunter
   durchschimmern und machte Namen und Warnungen schlechter lesbar. */
.main-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  min-height: var(--header-h);
  padding: 0 var(--s-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  /* Darf nie horizontal ueberlaufen, auch wenn Name/Rolle in der Kopfzeile lang werden */
  min-width: 0;
  overflow-wrap: break-word;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

/* Bildmarke in der Kopfzeile: weisser Kreis, damit der Löwe auch auf dem
   farbigen Terminal-Kopf sauber steht. */
.logo-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo-icon img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 3px;
  box-sizing: border-box;
  object-fit: contain;
}

.logo-text {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}

.logo-text span {
  color: var(--accent);
}

.user-nav-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Versalien und Sperrung sind weg: "TAGESPFLEGEPERSON" in Grossbuchstaben
   war die lauteste Zeile der ganzen Kopfzeile, obwohl sie nichts zu tun gibt. */
.role-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px var(--s-2);
  border-radius: var(--radius-pill);
  line-height: 1.6;
  white-space: nowrap;
}

.role-badge.admin {
  background-color: var(--primary-light);
  color: var(--primary-text);
}

.role-badge.parent {
  background-color: var(--accent-light);
  color: var(--accent-text);
}

/* Layout-Strukturen. .main-content bleibt fuer die Fehlerseiten in
   parent.js und bekommt dieselben Innenabstaende wie .app-main. */
.main-content {
  flex: 1;
  padding: var(--s-5);
  max-width: var(--inhalt-max);
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .main-content {
    padding: var(--s-4);
  }
  .main-header {
    padding: 0 var(--s-4);
  }
  /* Kopfzeile Verwaltung: Auf dem Handy bekommt das Logo die erste Zeile,
     die Knoepfe (Rolle, Ein-/Auschecken, Glocke, Abmelden) die zweite - und
     brechen dort weiter um, wenn es eng wird. Vorher standen alle vier
     rechts neben dem Logo untereinander, die Kopfzeile war 213px hoch. */
  .main-header {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .user-nav-info {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
  }
}

/* Raster in Modal-Formularen (Vertragsbeginn/-ende, Notfallkontakte ...):
   Datumsfelder haben eine feste Mindestbreite, mit der zwei 1fr-Spalten auf
   einem 375px-Handy ueber den Rand des Modals hinauslaufen und einen
   waagerechten Rollbalken erzeugen. min-width: 0 laesst die Spalten
   schrumpfen, das Feld selbst bleibt per width: 100% im Rahmen. */
#modal-wrapper [style*="grid-template-columns"] > * { min-width: 0; }
#modal-wrapper .modal-content { max-width: 100%; }

/* Karten. Kein Hover-Sprung mehr: die Karten dieser App tragen Tabellen,
   Formulare und Kindernamen - sie sind kein Angebot zum Anklicken, und das
   Hochhuepfen unter dem Mauszeiger versprach eine Aktion, die es nicht gibt. */
.card {
  background-color: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
}

/* Handy-Innenabstand der Karte: DESIGN.md schreibt s-4 am Handy vor (statt
   s-5) - derselbe Breakpoint wie beim Dialog weiter unten. */
@media (max-width: 700px) {
  .card {
    padding: var(--s-4);
  }
}

.card-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink);
}

.card-title i,
.card-title svg {
  width: 18px;
  height: 18px;
  color: var(--ink-2);
}

/* Knoepfe. Vier Rollen, drei Groessen, ein Radius - vorher standen auf einer
   Seite vier verschiedene Rundungen fuer gleichartige Knoepfe.
   Der Uebergang laeuft nur noch ueber Farben statt ueber "all": sonst
   animiert der Browser bei jeder Zustandsaenderung auch Groesse und
   Position mit, was auf dem Handy sichtbar ruckelt. */
.btn {
  font-family: var(--font-family);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.2;
  min-height: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
}

.btn i,
.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn[disabled],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--surface);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-secondary {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn-secondary:hover {
  background-color: var(--bg-2);
}

/* Der leise Knopf: fuer Nebenwege in der Kopfzeile und in Kartenkoepfen,
   die erreichbar sein muessen, aber nicht um Aufmerksamkeit werben. */
.btn-ghost {
  background-color: transparent;
  color: var(--ink-2);
  border-color: transparent;
}

.btn-ghost:hover {
  background-color: var(--bg-2);
  color: var(--ink);
}

/* Terracotta war eine zweite Handlungsfarbe neben Pink - zwei Farben, die
   beide "hier klicken" sagen, heben sich gegenseitig auf. .btn-accent sieht
   deshalb aus wie .btn-secondary; das JS muss dafuer nichts aendern. */
.btn-accent {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn-accent:hover {
  background-color: var(--bg-2);
}

.btn-danger {
  background-color: var(--danger-soft);
  color: var(--danger-ink);
  border-color: var(--danger-soft);
}

.btn-danger:hover {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--surface);
}

.btn-sm {
  min-height: 34px;
  padding: 0 var(--s-3);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
}

.btn-xs {
  min-height: 28px;
  padding: 0 var(--s-2);
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
}

/* Quadratischer Knopf fuer ein Symbol allein (Glocke, Menue, Schliessen). */
.btn-icon {
  width: 40px;
  padding: 0;
}

.btn-icon i,
.btn-icon svg {
  width: 20px;
  height: 20px;
}

.btn-icon.btn-sm {
  width: 34px;
}

/* Ein Knopf, der wie ein Verweis aussieht - dann soll er auch unterstrichen
   sein, sonst ist er ein pinkes Wort ohne erkennbare Funktion. */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  /* UI-020: WCAG 2.5.8 Zielgroesse verlangt mind. 24x24px CSS-Pixel, auch
     ohne Touch-Geraet (die Media-Query weiter unten deckt nur (pointer:
     coarse) ab). Textgroesse bleibt gleich, nur die Klickflaeche waechst. */
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  color: var(--primary-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Tippflaechen auf Touch-Geraeten: diese Knoepfe sind mit der Maus gut
   klickbar, unter dem Finger auf dem Handy aber zu klein. Textgroesse
   bleibt unveraendert - nur die klickbare Flaeche waechst. */
@media (hover: none) and (pointer: coarse) {
  .btn-xs,
  .btn-sm,
  .poll-delete-btn,
  .modal-close,
  .rb-week-edit,
  .eg-stufe,
  .eg-tag-zeile,
  .eg-aufgabe,
  .eg-kind-zeile,
  .print-single-story-btn,
  .segment-btn,
  .app-nav-item,
  .app-bottombar-item,
  .app-menu-item,
  .btn-ghost,
  .btn-icon,
  .pedagogy-area-tab {
    min-height: 44px;
    min-width: 44px;
  }
  .btn-xs,
  .btn-sm {
    padding: 0 var(--s-3);
  }
  .btn-icon {
    width: 44px;
    padding: 0;
  }
}

/* ==========================================================================
   GERUEST UND GEMEINSAME BAUSTEINE (02.09.2026)
   Alles, was auf jeder Seite gilt: der Seitenkopf, das Segment (ein einziges
   Umschaltmuster fuer Tag/Woche/Monat, Plan/Bausteine, Bibliothek/Ziele),
   Chips, Leerzustand, Hinweiskasten - und darunter das Seitengeruest aus
   shell.js (Kopfzeile, Seitenleiste, untere Leiste, Sheet, Menue).
   Die Bereichsabschnitte weiter unten fuehren ihre Sonderformen auf diese
   Klassen zurueck; die alten Klassennamen stehen deshalb in denselben
   Selektorlisten und sehen ab jetzt genauso aus.
   ========================================================================== */

/* --- Seitenkopf ---------------------------------------------------------
   Steht an der Spitze jedes Reiters: Titel, optional ein Satz darunter,
   rechts die Aktionen. .section-header/.section-title sind die alten Namen
   und bleiben gueltig - admin.js schreibt sie an hunderten Stellen. */
.seite-kopf,
.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.seite-titel,
.section-title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.seite-untertitel {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-md);
  color: var(--ink-2);
}

.seite-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

/* --- Segment: der eine Umschalter ---------------------------------------
   Bisher gab es drei byte-gleiche Pillenreihen (Speiseplan, Rueckblick,
   Angebote) und dazu die Unterreiter. Sie sehen ab jetzt gleich aus, weil
   sie dieselben Regeln benutzen. Die aktive Flaeche ist weiss auf grauem
   Grund, nicht mehr voll pink: eine Ansicht zu waehlen ist keine Handlung,
   die so laut sein muss wie "Speichern". */
.segment,
.meal-viewswitch,
.rb-viewswitch,
.ang-modus,
.nav-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-2);
  border-radius: var(--radius-pill);
  max-width: 100%;
  overflow-x: auto;
}

.segment-btn,
.meal-viewswitch-btn,
.rb-viewswitch-btn,
.ang-modus-knopf,
.nav-tab-link {
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  text-decoration: none;
  /* Nicht schrumpfen (UI-003). Ohne diese Zeile gilt der Flex-Standard
     0 1 auto: Die Knoepfe geben nach, sobald sie zu fuenft nicht mehr
     nebeneinander passen - mit white-space: nowrap heisst das, die
     Beschriftungen laufen ineinander und werden links und rechts
     abgeschnitten, statt dass die Leiste scrollt. Am Handy gemessen
     (375px, Finanzen): "Monatsabschluss" wurde zu "lonatsabschlu", drei von
     fuenf Knoepfen abgeschnitten, scrollWidth == clientWidth - die Leiste
     merkte gar nicht, dass sie zu schmal war. Der Behaelter hat bereits
     overflow-x: auto; er kann erst scrollen, wenn der Inhalt seine volle
     Breite behaelt. Wer eine Leiste ausdruecklich aufteilen will, ueber-
     schreibt es gezielt (siehe .entw-reiter .segment-btn). */
  flex: 0 0 auto;
}

.segment-btn i, .segment-btn svg,
.meal-viewswitch-btn i, .meal-viewswitch-btn svg,
.rb-viewswitch-btn i, .rb-viewswitch-btn svg,
.ang-modus-knopf i, .ang-modus-knopf svg,
.nav-tab-link i, .nav-tab-link svg {
  width: 16px;
  height: 16px;
}

.segment-btn:hover,
.meal-viewswitch-btn:hover,
.rb-viewswitch-btn:hover,
.ang-modus-knopf:hover,
.nav-tab-link:hover {
  color: var(--ink);
}

.segment-btn[aria-selected="true"],
.segment-btn[aria-pressed="true"],
.segment-btn.active,
.segment-btn.aktiv,
.meal-viewswitch-btn.active,
.rb-viewswitch-btn.active,
.ang-modus-knopf.aktiv,
.nav-tab-link.active {
  background: var(--surface);
  color: var(--primary-ink);
  box-shadow: var(--shadow-1);
}

/* --- Chips: ein kleines farbiges Label --------------------------------
   Vorher 14 eigene Klassen fuer dieselbe Sache. Versalien und Sperrung sind
   weg - "ABGESCHLOSSEN" in Grossbuchstaben schreit lauter als der
   Kindername daneben. */
.chip,
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

.chip-primary, .badge-primary { background-color: var(--primary-soft); color: var(--primary-ink); }
.chip-success, .badge-success { background-color: var(--success-soft); color: var(--success-ink); }
.chip-warn,    .badge-warning { background-color: var(--warn-soft);    color: var(--warn-ink); }
.chip-danger,  .badge-danger  { background-color: var(--danger-soft);  color: var(--danger-ink); }
.chip-info,    .badge-info    { background-color: var(--info-soft);    color: var(--info-ink); }
.chip-accent,  .badge-accent  { background-color: var(--accent-light); color: var(--accent-text); }
.chip-neutral                 { background-color: var(--bg-2);         color: var(--ink-2); }

/* --- Chip-Knoepfe: Filter und Umschalter, die keine Ansicht wechseln ----
   Sechs Klassen mit demselben Grundmuster bekommen eine Sprache: Pille mit
   Linie, aktiv als weiche Flaeche statt als voll gefuellter Farbklecks. */
.chip-btn,
.btn-filter,
.ang-schalter-knopf,
.rb-chip-btn,
.rb-quelle-btn,
.pedagogy-area-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 34px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-family);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.chip-btn i, .chip-btn svg,
.btn-filter i, .btn-filter svg,
.ang-schalter-knopf i, .ang-schalter-knopf svg,
.rb-chip-btn i, .rb-chip-btn svg,
.rb-quelle-btn i, .rb-quelle-btn svg {
  width: 16px;
  height: 16px;
}

.chip-btn:hover,
.btn-filter:hover,
.ang-schalter-knopf:hover,
.rb-chip-btn:hover,
.rb-quelle-btn:hover,
.pedagogy-area-tab:hover {
  background: var(--bg-2);
  color: var(--ink);
}

.chip-btn.active,
.chip-btn.aktiv,
.btn-filter.active,
.ang-schalter-knopf.aktiv,
.rb-chip-btn.active,
.rb-quelle-btn.active,
.pedagogy-area-tab.btn-primary {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-ink);
}

/* --- Leerzustand --------------------------------------------------------
   Ersetzt die elf verschiedenen "Keine ... vorhanden"-Absaetze. Kursiv ist
   weg: Kursivschrift liest sich als Zitat, nicht als Auskunft. */
.leer {
  text-align: center;
  padding: var(--s-6) var(--s-4);
  color: var(--ink-2);
}

.leer-symbol {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-3);
}

.leer-symbol i,
.leer-symbol svg {
  width: 26px;
  height: 26px;
}

.leer-titel {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-1);
}

.leer .btn {
  margin-top: var(--s-4);
}

/* --- Hinweiskasten ------------------------------------------------------ */
.hinweis {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--info);
  background: var(--info-soft);
  color: var(--ink);
  font-size: var(--fs-sm);
}

.hinweis-warn    { border-color: var(--warn);    background: var(--warn-soft); }
.hinweis-danger  { border-color: var(--danger);  background: var(--danger-soft); }
.hinweis-success { border-color: var(--success); background: var(--success-soft); }

/* ==========================================================================
   Das Seitengeruest (src/shell.js zeichnet dieses Markup)
   Kopfzeile 56px, am Rechner eine Seitenleiste, am Handy eine untere Leiste
   mit "Mehr"-Sheet. Vorher belegten Kopfzeile und Navigation auf dem Handy
   560-610px, bevor der erste Inhalt kam.
   ========================================================================== */

.app-shell {
  min-height: 100vh;
}

/* Das Raster gilt nur am Bildschirm. Auf Papier faellt .app-shell auf
   display:block zurueck - sonst klebte der Inhalt in der zweiten Spalte
   eines Rasters, dessen erste Spalte (die ausgeblendete Seitenleiste)
   248px Papier verschenkt. Das kommt ohne einen weiteren @media
   print-Block aus, der die 13 bestehenden Druckbloecke stoeren wuerde. */
@media screen {
  .app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--header-h) 1fr;
  }

  /* Anmelde-, Anfrage- und Fehlerseiten haben keine Bereiche - dort steht
     nur die Kopfzeile ueber einer einzigen Spalte. */
  .app-shell-ohne-nav {
    grid-template-columns: 1fr;
  }
}

.app-header {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-5);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  min-width: 0;
  /* Projektregel: mindestens 44px Tippflaeche. Auf dem Tablet gemessen
     36px (Hoehe des Logo-Kreises) - hier nachgezogen; passt unter die
     56px hohe Kopfzeile (--header-h). Gemessen 15.09.2026. */
  min-height: 44px;
}

/* Weisser Kreis mit Linie - derselbe Traeger wie in .logo-icon, damit der
   Loewe auf jedem Grund sauber steht. */
.app-brand-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.app-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 3px;
  object-fit: contain;
}

.app-brand-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.app-header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
}

/* --- Seitenleiste (ab 1024px) ------------------------------------------- */
.app-sidebar {
  grid-column: 1;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: var(--s-4) var(--s-3);
}

.app-nav-group + .app-nav-group {
  margin-top: var(--s-5);
}

/* Kein Versalien-Label: die Gruppennamen sind Woerter, keine Ueberschriften
   eines Beipackzettels. */
.app-nav-group-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  padding: 0 var(--s-3) var(--s-2);
  letter-spacing: 0;
}

.app-nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
}

.app-nav-item i,
.app-nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--ink-3);
}

.app-nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-nav-item:hover {
  background: var(--bg-2);
  color: var(--ink);
}

/* Der aktive Bereich: weiche Flaeche, dunkelpinke Schrift und links ein
   3px-Balken als inset-Schatten - ein echter border-left wuerde alle
   anderen Eintraege um 3px verschieben. */
.app-nav-item[aria-current="page"] {
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary);
}

.app-nav-item[aria-current="page"] i,
.app-nav-item[aria-current="page"] svg {
  color: var(--primary);
}

/* Bereichsfarben: nur Symbol und Balken, nie die Flaeche. */
[data-ton="blau"] .app-nav-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ton-blau); }
[data-ton="blau"] .app-nav-item[aria-current="page"] i,
[data-ton="blau"] .app-nav-item[aria-current="page"] svg { color: var(--ton-blau); }
[data-ton="gruen"] .app-nav-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ton-gruen); }
[data-ton="gruen"] .app-nav-item[aria-current="page"] i,
[data-ton="gruen"] .app-nav-item[aria-current="page"] svg { color: var(--ton-gruen); }
[data-ton="orange"] .app-nav-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ton-orange); }
[data-ton="orange"] .app-nav-item[aria-current="page"] i,
[data-ton="orange"] .app-nav-item[aria-current="page"] svg { color: var(--ton-orange); }

.app-nav-badge:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}

/* --- Inhaltsspalte ------------------------------------------------------ */
.app-main {
  grid-column: 2;
  padding: var(--s-5);
  max-width: var(--inhalt-max);
  width: 100%;
  margin: 0 auto;
  min-width: 0;
}

.app-shell-ohne-nav .app-main {
  grid-column: 1;
}

/* --- Untere Leiste (unter 1024px) --------------------------------------- */
.app-bottombar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-header);
  height: calc(var(--bottombar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(5, 1fr);
}

.app-bottombar-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: none;
  font-family: var(--font-family);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
}

.app-bottombar-item i,
.app-bottombar-item svg {
  width: 22px;
  height: 22px;
}

.app-bottombar-item[aria-current="page"],
.app-bottombar-item.aktiv {
  color: var(--primary);
  font-weight: 600;
}

.app-bottombar-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* In der unteren Leiste sitzt die Zahl am Symbol, nicht am Zeilenende. */
.app-bottombar-item .app-nav-badge:not([hidden]) {
  position: absolute;
  top: 4px;
  right: 50%;
  margin-left: 0;
  margin-right: -22px;
  min-width: 16px;
  height: 16px;
  /* 10px waren zu klein zum Ablesen. 11px ist das Groesste, das in den
     16px-Kreis passt, ohne dass eine zweistellige Zahl anstoesst -
     nachgemessen 20.09.2026 mit "1" und "18". */
  font-size: 11px;
}

/* --- Sheet von unten ("Mehr") ------------------------------------------- */
.app-sheet-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(30 20 10 / 0.35);
  z-index: var(--z-sheet);
}

.app-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-sheet) + 1);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-2);
  padding: var(--s-4) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
  transform: translateY(0);
  transition: transform var(--transition-normal);
}

/* [hidden] setzt display:none, also gibt es beim ersten Aufbau keine
   Animation - das reicht: das Sheet ist ein Werkzeug, keine Vorstellung. */
.app-sheet[hidden] {
  transform: translateY(100%);
}

.app-sheet-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.app-sheet-titel {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}

.app-sheet .app-nav-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-2);
}

/* Auf sehr schmalen Handys reicht den zwei Spalten der Platz nicht ganz -
   ein langer Name wie "Schwarzes Brett" wird abgeschnitten. Eine Spalte
   gibt jedem Namen die volle Breite. */
@media (max-width: 400px) {
  .app-sheet .app-nav-group {
    grid-template-columns: 1fr;
  }
}

.app-sheet .app-nav-group-label {
  grid-column: 1 / -1;
}

.app-sheet .app-nav-item {
  background: var(--bg);
}

.app-sheet .app-nav-item[aria-current="page"] {
  background: var(--primary-soft);
}

/* Solange das Sheet offen ist, soll die Seite darunter nicht mitrollen. */
body.app-sheet-offen {
  overflow: hidden;
}

/* --- Kopfzeilen-Menue (drei Punkte) und Glocke -------------------------- */
.app-menu-wrapper,
.notification-bell-wrapper {
  position: relative;
}

.app-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  z-index: var(--z-dropdown);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: var(--s-2);
}

.app-menu-rolle {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-2);
}

.app-menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 10px var(--s-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--font-family);
  font-size: var(--fs-md);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.app-menu-item i,
.app-menu-item svg {
  width: 18px;
  height: 18px;
}

.app-menu-item:hover {
  background: var(--bg-2);
}

/* --- Breakpoints des Geruests ------------------------------------------- */

/* Unter 1024px verschwindet die Seitenleiste, die untere Leiste uebernimmt. */
@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .app-sidebar {
    display: none;
  }
  .app-main {
    grid-column: 1;
    padding: var(--s-4);
    padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom) + var(--s-5));
  }
  .app-bottombar {
    display: grid;
  }
  /* WCAG 2.4.11: Ohne das scrollt z. B. Tab auf das Notizfeld des letzten
     Kindes auf der Heute-Seite so weit, dass es genau hinter der festen
     Bottombar verschwindet - der Browser kennt die Ueberlagerung sonst nicht,
     nur die sichtbare Fensterhoehe. Gemessen 15.09.2026 (UI-020). */
  html {
    scroll-padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom) + var(--s-3));
  }
}

@media (max-width: 700px) {
  .app-header {
    padding: 0 var(--s-4);
  }
  /* Der Terminal-Knopf behaelt sein Symbol, verliert aber die Beschriftung -
     zwei Woerter in einer 56px-Leiste kosten die Haelfte der Breite. */
  .app-header-cta-label {
    display: none;
  }
  .app-header-actions .btn {
    width: 40px;
    padding: 0;
  }
  .seite-titel,
  .section-title {
    font-size: var(--fs-xl);
  }
  .seite-aktionen {
    width: 100%;
  }
  .seite-aktionen > .btn:only-child {
    width: 100%;
  }
}

@media (max-width: 400px) {
  .app-header {
    padding: 0 var(--s-3);
  }
  /* Auf sehr schmalen Geraeten zaehlt der Loewe, nicht der Schriftzug. */
  .app-brand-name {
    display: none;
  }
  .app-main,
  .main-content {
    padding: var(--s-3);
  }
  .app-main {
    padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom) + var(--s-5));
  }
}

/* Das Sicherheitsnetz fuer [hidden] steht seit dem 14.09.2026 am DATEIENDE,
   nicht mehr hier. Grund siehe dort. */

/* Inputs & Formulare */
.form-group {
  margin-bottom: var(--s-4);
}

.form-label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--s-1);
  color: var(--ink-2);
}

/* Ein Symbol im Label - fuer Felder, bei denen ein Wort allein den
   Unterschied nicht traegt (etwa das Schloss an der privaten Tagesnotiz,
   die direkt unter der Notiz FUER die Eltern steht). */
.form-label:has(> i, > svg) {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.form-label > i,
.form-label > svg {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Kleiner Hilfstext unter einem Feld: erklaert, was das Feld bedeutet, ohne
   den Platz eines .hinweis-Kastens zu beanspruchen. */
.form-hinweis {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-xs, 0.8rem);
  line-height: 1.4;
  color: var(--text-muted);
}

.form-control {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem var(--s-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  font-family: var(--font-family);
  font-size: var(--fs-md);
  background-color: var(--surface);
  color: var(--ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Login-Layout */
.login-wrapper {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  text-align: center;
}

/* Die beiden Verweise unter dem Anmeldeformular ("Unverbindlich anfragen",
   "Wie die Eingewoehnung ablaeuft") standen ohne eigene Regel als Fliesstext
   hintereinander - untereinander mit Abstand liest sich jeder als eigener
   Verweis. */
.login-fuss {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* Rechtsseiten unter dem Anmeldeformular (Stufe 0): unauffaellig, aber
   jede Tippflaeche mindestens 44 px hoch. */
.login-rechts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--s-3);
  margin-top: var(--s-3);
  font-size: 0.85em;
}
.login-rechts a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
}

/* Breites Logo auf Anmelde- und Anfrageseite. Der Schriftzug steckt bereits im
   Bild, deshalb steht darunter kein zusätzlicher Name. */
.login-header h1.brand-lockup {
  margin: 0 0 1.1rem;
  line-height: 0;
}

.brand-lockup-img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
}

.login-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.login-header p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

/* Dashboard-Layouts */
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (max-width: 992px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* .section-header und .section-title stehen jetzt oben beim Seitenkopf
   (.seite-kopf/.seite-titel) - hier stuenden sonst zwei Wahrheiten. */

/* --------------------------------------------------------------------------
   Tagesprotokoll: Kinderkarten
   Eine Karte je Kind, drei Zonen, getrennt durch Linien statt durch
   Kaesten-in-Kaesten (das Audit vom 03.09.2026 zaehlte 50 Rahmen in bis zu
   3 Ebenen - hier bleibt nur eine Aussenkontur je Karte).
   Kurzzeilen statt Laschen: vier Reiter nebeneinander ("Essen/Schlaf/
   Wickeln/Notiz") haetten am Handy je nur neun Zeichen Platz gehabt und
   nichts vom Inhalt verraten, bevor man tippt - eine Kurzzeile zeigt auf
   einen Blick, was heute schon eingetragen ist, und die Karte bleibt
   zugeklappt uebersichtlich. Die Werkzeugleiste ist leise (keine Rahmen,
   keine Flaeche, ink-2 statt Primaerfarbe): Chat, Foto, Portfolio, Notfall,
   Medikamente und Unfall sind Nebenwege, keine Hauptaktion der Karte - die
   ist das Ausfuellen der Abschnitte selbst.
   -------------------------------------------------------------------------- */
.kids-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--s-4);
  align-items: start;
}
/* Gleich hohe Karten je Reihe, solange keine Karte aufgeklappt ist:
   Allergie-Chips (null bis zwei Zeilen) und umgebrochene Nachnamen liessen
   die Karten sonst um 20-40px gegeneinander wackeln, obwohl alle Kinder im
   selben Zustand sind. Sobald ein Abschnitt offen ist, faellt das Raster
   zurueck auf Inhaltshoehe - sonst bekaemen die Nachbarkarten den ganzen
   aufgeklappten Bereich als Leerraum dazu. */
.kids-grid:not(:has(.abschnitt-inhalt:not([hidden]))) {
  align-items: stretch;
}
/* Ausnahme: Sind an einem Tag manche Kinder da und andere nicht, hat die
   abwesende Karte nur zwei Zeilen, die anwesende vier Abschnitte. Die
   abwesende auf deren Hoehe zu ziehen ergaebe 400px Leerraum - sie behaelt
   deshalb ihre eigene Hoehe. Sind alle Kinder abwesend (keine Karte hat
   Abschnitte), greift die Ausnahme nicht und alle bleiben gleich hoch. */
.kids-grid:has(.kind-abschnitte) .kind-karte:not(:has(.kind-abschnitte)) {
  align-self: start;
}
@media (max-width: 420px) {
  /* Bei 375px Breite wuerde minmax(340px, 1fr) sonst ueberlaufen. */
  .kids-grid {
    grid-template-columns: 1fr;
  }
}

/* .status-dot wird von der Heute-Tabelle weiter benutzt (admin.js, Zeile
   ~3303 und ~9568, parent.js Zeile ~1461) - unveraendert aus dem alten
   Block uebernommen. */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.present { background-color: var(--success); }
.status-dot.absent { background-color: var(--text-muted); }
.status-dot.sick { background-color: var(--danger); }
/* Urlaub ist eine Information, kein Terracotta-Sonderfall. */
.status-dot.vacation { background-color: var(--info); }

/* --- Zone 1: Kopf --------------------------------------------------------- */
.kind-karte {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
/* data-status auf .kind-karte steht nur fuer den Avatar-Punkt (siehe
   .kind-avatar[data-status] unten) - die Karte selbst dunkelt bei Abwesenheit
   nicht ab, sonst sind abwesende Kinder auf einen Blick schwerer zu finden,
   nicht leichter. */

.kind-kopf {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.kind-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-lg);
  flex-shrink: 0;
  position: relative;
}
/* Anwesenheits-Punkt am Avatar statt einer zweiten Avatarfarbe je Kind -
   die alten nth-child-Farbvarianten sagten nichts ueber das Kind aus, nur
   ueber seine Position im Raster. */
.kind-avatar::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--ink-3);
}
.kind-avatar[data-status="present"]::after { background: var(--success); }
.kind-avatar[data-status="sick"]::after { background: var(--danger); }
.kind-avatar[data-status="vacation"]::after { background: var(--info); }

.kind-titel {
  flex: 1;
  min-width: 0;
}

.kind-name {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
  color: var(--ink);
  /* Der Name darf umbrechen: Bei drei Spalten am Rechner ist die Karte
     ~280px breit, und "Jonas Bergmann" wuerde sonst zu "Jonas Bergm..." -
     der Nachname ist bei fuenf Kindern die Information, nicht die Zierde. */
  overflow-wrap: anywhere;
}

.kind-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-1);
}

.kind-status {
  width: auto;
  flex-shrink: 0;
  font-size: var(--fs-sm);
  padding-left: var(--s-3);
}

.kind-zeiten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.kind-zeit .form-label {
  margin-bottom: var(--s-1);
}
.kind-zeit .form-control {
  width: 100%;
}

.kind-abwesend {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* Betriebslisten (ALL-007). Eine Liste ist eine Karte mit aufklappbarem
   Inhalt - dasselbe Muster wie die Abschnitte der Kinderkarte, damit sich das
   Aufklappen ueberall gleich anfuehlt. Die Tippflaechen sind durchgehend
   44px hoch: Diese Liste wird im Laden mit einer Hand bedient. */
.liste-karte {
  padding: 0;
  overflow: hidden;
}
.liste-kopf {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  flex-wrap: wrap;
}
.liste-schalter {
  flex: 1 1 12rem;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font: inherit;
}
.liste-name {
  font-weight: 600;
  font-size: var(--fs-lg);
  overflow-wrap: anywhere;
}
.liste-zahl {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  white-space: nowrap;
}
.liste-werkzeuge {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--line);
}
.liste-inhalt {
  padding: 0 var(--s-3) var(--s-3);
  border-top: 1px solid var(--line);
}
.liste-eintraege {
  list-style: none;
  margin: 0 0 var(--s-3) 0;
  padding: 0;
}
.liste-eintrag {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--line);
}
.liste-eintrag:last-child {
  border-bottom: 0;
}
.liste-haken {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.liste-haken input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}
/* Erledigtes bleibt lesbar, tritt aber zurueck - durchgestrichen UND blass
   waere doppelt gemoppelt und auf kleinen Bildschirmen kaum noch zu lesen. */
.liste-eintrag.ist-erledigt .liste-haken span {
  text-decoration: line-through;
  color: var(--ink-2);
}
/* Ein Knopf, der nur aus seinem Symbol besteht - fuer Nebensaechliches neben
   der eigentlichen Handlung. Die Tippflaeche bleibt 44px, sichtbar ist nur
   das Symbol. */
.btn-still {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.btn-still:hover,
.btn-still:focus-visible {
  background: var(--danger-soft, var(--bg-2, transparent));
  color: var(--danger-ink, var(--ink));
}

.liste-neuer-eintrag {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
.liste-neuer-eintrag .form-control {
  flex: 1;
  min-width: 0;
}

/* Ein Link im Fliesstext (UI-006). Traegt EXAKT den Wortlaut, der bisher
   siebenmal als Inline-Stil im Markup stand - kein Pixel Unterschied, nur
   nicht mehr in der Zeile. Fuer eine Rufnummer gibt es .tel-link daneben:
   die hat zusaetzlich eine 44px-Tippflaeche, weil dort gewaehlt wird. */
.text-link {
  color: var(--primary);
  text-decoration: none;
}
.text-link:hover,
.text-link:focus-visible {
  text-decoration: underline;
}

/* Leerzustand im Elternbereich (UI-006). Auch hier der vorhandene Wortlaut,
   nicht die Skala: `.leer` daneben setzt 32px/16px und ist nicht kursiv -
   ein Ersatz durch .leer wuerde das Bild an sechzehn Stellen aendern. */
.leer-hinweis {
  text-align: center;
  font-style: italic;
  color: var(--text-muted);
  padding: 2rem;
}

/* Eine Zelle, die die ganze Rasterzeile einnimmt (UI-006, sechs Stellen). */
.u-volle-zeile {
  grid-column: 1 / -1;
}

/* Link auf ein hinterlegtes Dokument, mit kleinem Symbol davor (UI-006).
   Wieder der vorhandene Wortlaut, unveraendert: 0.8rem ist keine Stufe der
   Skala (--fs-xs ist 0.75rem, --fs-sm 0.85rem) - wer hier auf die Skala
   zieht, aendert das Bild an vier Stellen. */
.dokument-link {
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
/* Zwei der vier Stellen standen mit einem Hauch Abstand darueber. */
.dokument-link-abstand {
  margin-top: 0.1rem;
}

/* Telefon- und E-Mail-Link (ALL-006). Bisher stand dieses Muster viermal als
   Inline-Stil in admin.js (Elternnummer, Kinderarzt, Abholperson, Anfrage) -
   die Klasse ist der Ort, an den die vier gehoeren, wenn UI-006 sie einsammelt.
   Die Tippflaeche ist bewusst 44px hoch: Auf dem Telefon wird hier gewaehlt,
   nicht gelesen. */
.tel-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 44px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.tel-link:hover,
.tel-link:focus-visible {
  text-decoration: underline;
}

/* Schmale Aktionsspalte in Listen - vorher als style="width: 130px" je Tabelle. */
.spalte-aktion {
  width: 130px;
}

/* Tagesfazit (ALL-002): der Satz, den die Tagespflegeperson beim Abholen
   vorliest. Er steht oben auf der Karte, wo beim Abholen hingesehen wird,
   und traegt deshalb eine Akzentlinie statt eines eigenen Kastens - ein
   weiterer Rahmen in einer Karte, die schon vier Abschnitte hat, wuerde die
   Gliederung flach machen. */
.kind-fazit {
  margin: var(--s-3) 0 0 0;
  padding-left: var(--s-3);
  border-left: 3px solid var(--primary);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.kind-konflikt {
  align-items: center;
}
.kind-konflikt i,
.kind-konflikt svg {
  width: 18px;
  height: 18px;
  color: var(--danger);
  flex-shrink: 0;
}

/* --- Zone 2: Abschnitte ---------------------------------------------------
   Essen / Schlaf / Wickeln / Stimmung & Notiz als aufklappbare Zeilen,
   getrennt nur durch eine Linie - keine eigene Flaeche, kein eigener
   Rahmen je Abschnitt. */
.kind-abschnitte {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.abschnitt {
  border-bottom: 1px solid var(--line);
}
.abschnitt:last-child {
  border-bottom: 0;
}

.abschnitt-kopf {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.abschnitt-schalter {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 18px 1fr 18px;
  grid-template-rows: auto auto;
  column-gap: var(--s-2);
  row-gap: var(--s-1);
  align-items: center;
  min-height: 52px;
  padding: var(--s-2) 0;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.abschnitt-schalter > i:not(.abschnitt-pfeil),
.abschnitt-schalter > svg:not(.abschnitt-pfeil) {
  grid-column: 1;
  grid-row: 1;
  width: 18px;
  height: 18px;
  color: var(--ink-2);
}
.abschnitt-titel {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-md);
  font-weight: 600;
}
.abschnitt-pfeil {
  grid-column: 3;
  grid-row: 1;
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  transition: transform var(--transition-fast);
}
.abschnitt-schalter[aria-expanded="true"] .abschnitt-pfeil {
  transform: rotate(180deg);
}
.abschnitt-kurz {
  grid-column: 2 / -1;
  grid-row: 2;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  /* Der Uebergang steht auf der Grundregel, nicht auf .ist-frisch: sonst
     springt die Farbe beim Entfernen der Klasse hart zurueck. */
  transition: color var(--transition-fast);
}
.abschnitt-kurz.ist-leer {
  color: var(--ink-3);
}
.abschnitt-kurz.ist-frisch {
  color: var(--success-ink);
}
.abschnitt-schalter:hover .abschnitt-titel {
  color: var(--primary-ink);
}
.abschnitt-schalter:focus-visible {
  outline: 3px solid var(--primary-soft);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.abschnitt-aktion {
  flex-shrink: 0;
}

/* Wichtig: display darf hier NICHT auf .abschnitt-inhalt ohne Weiteres
   stehen - [hidden] und eine Klasse haben dieselbe Selektor-Spezifitaet,
   und eine spaeter im Stylesheet stehende .abschnitt-inhalt{display:flex}
   wuerde die [hidden]-Regel des Browsers aushebeln und den Abschnitt
   sichtbar lassen, obwohl das JS ihn zugeklappt hat. Deshalb der Zusatz
   :not([hidden]). */
.abschnitt-inhalt:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 0 0 var(--s-4) 26px;
}
@media (max-width: 420px) {
  /* Gleiche Spezifitaet wie oben (:not([hidden]) zaehlt wie eine Klasse) -
     sonst verliert diese Regel gegen die Kurzform padding oben und die
     Einrueckung bleibt am Handy stehen. */
  .abschnitt-inhalt:not([hidden]) {
    padding-left: 0;
  }
}
.abschnitt-inhalt .form-group {
  margin: 0;
}
.abschnitt-hinweis,
.abschnitt-leer {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* Schlaf-Kurzzeile mit laufender Stoppuhr */
.schlaf-laeuft {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--info-ink);
  font-weight: 600;
}
.schlaf-laeuft .pulse-dot {
  width: 8px;
  height: 8px;
  background-color: var(--info);
}

/* Umschalter in voller Kartenbreite (Essverhalten, Stimmung): vier Woerter
   wie "Fröhlich/Müde/Verspielt/Quengelig" muessen in rund 311px passen
   (Karte 340px minus Innenabstand). */
.segment-voll {
  display: flex;
  width: 100%;
}
.segment-voll .segment-btn {
  flex: 1;
  min-width: 0;
  padding: 0 var(--s-2);
}
@media (max-width: 420px) {
  .segment-voll .segment-btn {
    font-size: var(--fs-xs);
    padding: 0 var(--s-1);
  }
}

.wahl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.kind-karte .chip-btn[aria-pressed="true"] {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-ink);
}

.wickel-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wickel-eintrag {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 40px;
  border-bottom: 1px dashed var(--line);
  font-size: var(--fs-sm);
}
.wickel-eintrag:last-child {
  border-bottom: 0;
}
.wickel-zeit {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.wickel-status {
  flex: 1;
  min-width: 0;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wickel-neu {
  display: grid;
  grid-template-columns: auto 1fr 40px;
  gap: var(--s-2);
  align-items: center;
}
.wickel-neu input[type="time"] {
  width: auto;
}
/* min-width:0 auf dem Textfeld: sonst zaehlt bei der intrinsischen Messung
   der Spur die Eigenbreite des <input> (Standard-size 20, ~178px min.) statt
   width:100% aus .form-control - die 1fr-Spur koennte sonst nicht unter
   diese Breite schrumpfen und die Zeile ragt aus der Karte. */
.wickel-neu .form-control {
  min-width: 0;
}
.wickel-neu .btn-icon {
  width: 40px;
  /* min-width aus der generischen Touch-Regel (.btn-icon { min-width:44px })
     gewinnt sonst immer gegen width - der Knopf waere auf Touch 44px in
     einer 40px-Spur. */
  min-width: 40px;
}

/* --- Zone 3: Werkzeuge -----------------------------------------------------
   Sechs beschriftete, leise Knoepfe - keine Flaeche, kein Rahmen, ink-2
   statt Primaerfarbe. Das sind Nebenwege (Chat, Foto, Portfolio, Notfall,
   Medikamente, Unfall), keine Hauptaktion der Karte. */
.kind-werkzeuge {
  display: grid;
  /* minmax(0,1fr) statt 1fr: sonst kann die Spur nicht unter die
     min-content-Breite ihres Inhalts schrumpfen und "Medikamente" reisst
     die Zeile auf (Gegenprobe: scrollWidth > clientWidth auf jeder Karte). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-1);
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  /* Sitzt bei gleich hohen Karten unten, damit auch die Trennlinien einer
     Reihe auf einer Hoehe liegen - ohne das stuende die Werkzeugleiste je
     nach Anzahl der Chips versetzt. */
  margin-top: auto;
}
/* Symbol ueber der Beschriftung, nicht daneben: Eine Drittelspur ist bei
   375px rund 100px breit, "Medikamente" mit Symbol daneben braucht 114px -
   nebeneinander wuerde das Wort abgeschnitten ("Medikam..."), untereinander
   passt es in jeder Kartenbreite ohne Kuerzung. */
.werkzeug-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  min-width: 0;
  padding: var(--s-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-family);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.werkzeug-btn:hover {
  background: var(--bg-2);
  color: var(--ink);
}
.werkzeug-btn i,
.werkzeug-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* .chat-badge sitzt absolut in der Ecke - hier oben rechts am Symbol, das
   in der Zelle zentriert steht (Symbol 18px breit, also endet es bei 50% +
   9px). So bleibt das Kennzeichen in der Rasterzelle statt herauszuragen
   (Audit: "Chat-Knopf 67px in 61px"). */
.werkzeug-btn .chat-badge {
  top: 2px;
  right: auto;
  left: calc(50% + 6px);
}

/* --- Seitenkopf/Tafel ------------------------------------------------------
   .krank-tafel braucht keine eigene Regel - sie ist nur der Namens-Haken auf
   .card (class="card u-mt-5 krank-tafel"), das Aussehen kommt vollstaendig
   von dort. */
.protokoll-datum {
  width: auto;
}
.krank-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.krank-hinweis {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* --- Touch: Tippflaechen mindestens 44px auf dem Handy ---------------------
   Die generische Touch-Liste bei ~578 wird nicht erweitert (dort arbeitet
   eine andere Sitzung) - eigene Regel fuer die neuen Klassen dieser Karte.
   .segment-btn und .btn-sm/.btn-icon stehen zwar schon in der generischen
   Liste, werden hier trotzdem ueber die Kartenklassen mitgefuehrt, damit
   diese Regel unabhaengig von der generischen Liste vollstaendig bleibt. */
@media (hover: none) and (pointer: coarse) {
  .werkzeug-btn,
  .abschnitt-schalter,
  .kind-karte .chip-btn,
  .kind-karte .segment-btn,
  .abschnitt-aktion,
  .wickel-eintrag .btn-icon {
    min-height: 44px;
  }
}

/* Alerts / Banners */
.alert {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--s-4);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 500;
  border-left: 3px solid var(--info);
  background-color: var(--info-soft);
  color: var(--ink);
}
/* Feedback-Meldungen als Toast, damit sie auch über offenen Modals (.modal-overlay, z-index 1000) sichtbar sind */
#alert-box,
#parent-alert {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  margin-bottom: 0;
  max-width: min(560px, calc(100vw - 32px));
  box-shadow: var(--shadow-2);
}

/* Dieselben Toene wie .hinweis - eine Meldung sieht ueberall gleich aus,
   egal ob sie als Toast oben einschwebt oder im Text steht. */
.alert-success {
  border-left-color: var(--success);
  background-color: var(--success-soft);
  color: var(--success-ink);
}
.alert-danger {
  border-left-color: var(--danger);
  background-color: var(--danger-soft);
  color: var(--danger-ink);
}
.alert-warning {
  border-left-color: var(--warn);
  background-color: var(--warn-soft);
  color: var(--warn-ink);
}
.alert-info {
  border-left-color: var(--info);
  background-color: var(--info-soft);
  color: var(--info-ink);
}

/* Lade-Spinner Animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin {
  animation: spin 1s linear infinite;
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(30 20 10 / 0.45);
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
  overflow-y: auto;
  padding: var(--s-6) var(--s-4);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
  display: flex !important;
}

.modal-container {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  width: 100%;
  max-width: 500px;
  margin: var(--s-5) auto;
  box-shadow: var(--shadow-3);
  border: 1px solid var(--line);
  transform: scale(0.95);
  transition: transform var(--transition-normal);
}

.modal-overlay.open .modal-container {
  transform: scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.modal-header h2,
.modal-header h3 {
  font-size: var(--fs-xl);
  margin: 0;
}

/* Am Handy kommt der Dialog als Blatt von unten und darf die volle Breite
   nehmen. Vorher war das lange Kind-Formular eine 335px schmale Box mit
   3.500px Rollhoehe mitten auf dem Bildschirm. */
@media (max-width: 700px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal-container {
    margin: 0;
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92vh;
    overflow-y: auto;
    padding: var(--s-4);
  }
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--ink-2);
  /* 44px Tippflaeche, auch am Desktop - das Kreuz ist sonst die kleinste
     klickbare Flaeche im ganzen Modal */
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Unterreiter. Aussehen und Verhalten kommen jetzt vom .segment weiter oben
   (dieselbe Selektorliste) - hier bleibt nur, was das Segment nicht regelt:
   der Abstand nach unten und die Rollrichtung auf schmalen Bildschirmen. */
.nav-tabs {
  display: inline-flex;
  margin-bottom: var(--s-5);
  border-bottom: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .nav-tab-link {
    padding: 0 var(--s-3);
  }
}

/* Redesigned Grouped Navigation Menu */
.nav-menu-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 2rem;
  background-color: var(--white);
  padding: 1.2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.nav-main-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  border-bottom: 1.5px solid var(--border-color);
  padding-bottom: 1rem;
}

.nav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.2rem;
  font-family: var(--font-family);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.nav-group-btn i, .nav-group-btn svg {
  width: 18px;
  height: 18px;
}

/* Kein Hochspringen beim Ueberfahren mehr: Hover zeigt sich als Flaeche,
   nicht als Bewegung - sonst wandert die ganze Reihe unter der Maus. */
.nav-group-btn:hover {
  color: var(--ink);
  background: var(--bg-2);
}

.nav-group-btn.active {
  color: var(--primary-ink);
  background: var(--primary-soft);
  border-color: var(--primary);
}

.nav-sub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.2rem;
}

.nav-sub-tab-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.nav-sub-tab-link i, .nav-sub-tab-link svg {
  width: 16px;
  height: 16px;
  stroke-width: 2px;
}

/* Frueher Terracotta - die zweite "aktiv"-Farbe der App. Es gibt nur eine. */
.nav-sub-tab-link:hover {
  color: var(--ink);
  background: var(--bg-2);
}

.nav-sub-tab-link.active {
  color: var(--primary-ink);
  background: var(--primary-soft);
  font-weight: 600;
  border-color: var(--primary);
}

/* Schwarzes Brett */
.announcement-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.announcement-card {
  border-left: 4px solid var(--accent);
  background-color: var(--bg-primary);
  padding: 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.announcement-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.announcement-title {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

/* Schwarzes Brett V1.22: Banner für wichtige, noch unbestätigte Mitteilungen.
   Er bleibt sichtbar, bis die Eltern die Lesebestätigung erteilt haben. */
.board-important-banner {
  border: 2px solid var(--danger);
  background: var(--danger-light);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.board-important-banner-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--danger);
}

.board-important-banner-head svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.board-important-item {
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 1px solid var(--danger);
  padding: 0.8rem 1rem;
}

/* Zielgruppen- und Wichtig-Marker sollen neben dem Text nicht schreien */
.announcement-card .badge {
  text-transform: none;
  letter-spacing: 0;
}

/* Table styles */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-4);
}

.table th, .table td {
  padding: var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.table th {
  background-color: var(--bg-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
}

/* Erste Spalte traegt fast immer den Kindernamen - die soll man beim
   Querlesen sofort finden, besonders wenn die Tabelle am Handy rollt. */
.table td:first-child {
  font-weight: 600;
}

/* Parent view specific styles */
.parent-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .parent-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Karten in diesem Raster koennen ein eigenes Inline-Raster enthalten (z. B.
   zwei Datumsfelder bei "Abwesenheit melden"). 1fr allein hat als Minimum
   die natuerliche Breite des Inhalts - min-width: 0 laesst die Spalte
   schrumpfen, dieselbe Schutzregel wie fuer Dialoge weiter oben. */
.parent-grid [style*="grid-template-columns"] > * {
  min-width: 0;
}

.daily-log-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.timeline-item {
  border: 1px solid var(--border-color);
  background: var(--white);
  padding: 1.2rem;
  border-radius: var(--radius-sm);
  position: relative;
}

.timeline-date {
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

/* Tagesfazit im Elternbereich (ALL-002): derselbe Satz wie auf der Karte der
   Tagespflegeperson. Er steht ueber den Einzelheiten und ist etwas groesser
   als sie - er ist die Antwort, die Kaestchen darunter sind die Belege. */
.tages-fazit {
  margin: 0 0 0.8rem 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-main);
  text-wrap: pretty;
}

.timeline-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.8rem;
  font-size: 0.9rem;
}

.detail-block {
  background-color: var(--bg-primary);
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
}

.detail-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.detail-value {
  font-weight: 600;
  margin-top: 0.1rem;
}

/* ==========================================================================
   PRINT STYLES FOR Abrechnungs- & Entwicklungsberichte
   ========================================================================== */

/* Seitenformat und Raender fuer JEDEN Ausdruck der App.
   Stammt aus der frueheren src/invoice.css. Die war ueber ein @import in
   Zeile 3 dieser Datei eingebunden und hat sehr wohl gewirkt - hier steht
   also fort, was vorher schon galt, nichts Neues. (Eine fruehere Fassung
   dieses Kommentars behauptete das Gegenteil; sie beruhte auf einem
   Suchlauf, der CSS-Dateien nicht mit durchsucht hatte.)
   Kein @media print noetig: @page gilt ausschliesslich fuer paginierte
   Medien, am Bildschirm ist die Regel wirkungslos.
   Ohne diese Angabe entscheidet der Druckdialog des jeweiligen Browsers
   ueber die Raender - je nach Browser und Spracheinstellung zwischen etwa
   1 und 2 cm. Der Block darunter setzt body/html auf margin: 0, der
   Weissraum kommt also allein von hier. Fest gesetzt, damit ein
   Stundennachweis beim Jugendamt ueberall gleich aussieht. */
@page {
  size: A4 portrait;
  margin: 1.5cm;
}

@media print {
  body, html {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Chrome/Navigations-Elemente ausblenden. Die .app-*-Zeilen kamen mit dem
     neuen Geruest dazu - ohne sie stuenden Seitenleiste und untere Leiste
     auf jeder Rechnung und jedem Stundennachweis. */
  .main-header,
  .app-header,
  .app-sidebar,
  .app-bottombar,
  .app-sheet,
  .app-sheet-backdrop,
  .app-menu,
  .nav-tabs,
  .no-print,
  #alert-box,
  #parent-alert,
  button,
  select,
  .form-group,
  .btn,
  .abschnitt-inhalt,
  .abschnitt-aktion,
  .kind-werkzeuge,
  .section-header,
  #logout-btn {
    display: none !important;
  }

  /* Ausnahme von der Zeile "button" darueber (UI-004).
     Der Abschnittskopf im Tagesprotokoll IST ein <button> - er traegt den
     Titel ("Essen", "Schlaf") und die Kurzzeile mit der Zusammenfassung des
     Tages. Die pauschale Knopfregel hat ihn mitgenommen, und weil
     .abschnitt-inhalt ebenfalls verborgen wird, blieb vom ganzen Abschnitt
     auf dem Papier NICHTS uebrig - kein Titel, keine Zusammenfassung. Der
     Kopf bleibt deshalb stehen, nur ohne Knopf-Aussehen; der Aufklappfeil
     verschwindet, weil er auf Papier keine Bedeutung hat. Die Eingabefelder
     (.abschnitt-inhalt) bleiben bewusst weg: gedruckt wird die
     Zusammenfassung, nicht das Formular. */
  .abschnitt-schalter {
    display: flex !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100%;
  }

  .abschnitt-pfeil {
    display: none !important;
  }

  /* Ein Fortschrittsbalken sagt auf Papier nichts - er zeigt einen Zustand,
     den man nur am Bildschirm weiterfuehren kann. Bisher war er nur beim
     Aufnahmebogen ausgenommen (body.printing-intake weiter unten), stand
     aber in jedem anderen Ausdruck als grauer Streifen. */
  .fortschritt {
    display: none !important;
  }

  /* .app-main ist die Inhaltsspalte des neuen Geruests und braucht denselben
     Nullabstand wie .main-content - sonst rutscht jeder Ausdruck um den
     Bildschirm-Innenabstand ein. */
  .main-content,
  .app-main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Druckbereich-Borders/Borders und Box-Shadows neutralisieren */
  .print-area {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    width: 100% !important;
  }

  .print-only {
    display: block !important;
  }

  /* Tabellen optimal für A4 Druck stylen */
  .print-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 1rem !important;
  }

  .print-table th, 
  .print-table td {
    border: 1px solid #000000 !important;
    padding: 6px 10px !important;
    font-size: 9.5pt !important;
    color: #000000 !important;
  }

  .print-table th {
    background-color: #f0f0f0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-weight: bold !important;
  }

  /* Keine Zeile ueber die Blattkante hinweg zerreissen. Der Vorgabewert ist
     'auto', ein Umbruch mitten in einer Zeile also erlaubt. Bei den kurzen
     Zeilen des Stundennachweises tritt er nicht auf, bei mehrzeiligen
     Statustexten kann er es. break-inside ist die aktuelle Schreibweise,
     page-break-inside die aeltere - beide gesetzt, weil nicht absehbar ist,
     welcher Browser das Blatt erzeugt. */
  .print-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .status-dot {
    display: none !important;
  }

  /* Unterschriftenbereiche am Seitenende halten */
  .print-signatures {
    margin-top: 50px !important;
  }

  /* Pagebreak Helpers */
  .page-break-before {
    page-break-before: always !important;
  }

  .page-break-inside-avoid {
    page-break-inside: avoid !important;
  }

  .print-only img {
    max-width: 80% !important;
    max-height: 400px !important;
    display: block !important;
    margin: 1.5rem auto !important;
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    object-fit: contain !important;
  }
}

/* Puls-Animation für laufenden Schlaf-Timer */
@keyframes timerPulse {
  0% { opacity: 1; }
  50% { opacity: 0.35; }
  100% { opacity: 1; }
}

.pulse-timer {
  animation: timerPulse 2s infinite ease-in-out;
}

/* DSGVO-Messenger Chat-System */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 450px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: #faf8f5;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.chat-bubble {
  max-width: 75%;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  position: relative;
  word-wrap: break-word;
}

.chat-bubble.sent {
  align-self: flex-end;
  background: var(--accent);
  color: white;
  border-bottom-right-radius: 2px;
}

.chat-bubble.received {
  align-self: flex-start;
  background: #e8e3d9;
  color: var(--text-main);
  border-bottom-left-radius: 2px;
}

.chat-time {
  font-size: 0.7rem;
  margin-top: 0.25rem;
  text-align: right;
  opacity: 0.8;
}

.chat-bubble.sent .chat-time {
  color: rgba(255, 255, 255, 0.9);
}

.chat-bubble.received .chat-time {
  color: var(--text-muted);
}

.chat-input-area {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

/* Die Zahl an der Glocke: Pink, nicht Rot oder Terracotta - eine Zahl sagt
   "hier ist etwas Neues", nicht "hier ist Gefahr". */
.chat-badge {
  background: var(--primary);
  color: var(--surface);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5px;
  right: -5px;
}

/* Abfragen an die Eltern (V1.8.2) */
.polls-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media(min-width: 768px) {
  .polls-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

.poll-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.poll-question {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
}

.poll-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.poll-option-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.poll-option-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 500;
}

.poll-option-bar-container {
  background: var(--bg-secondary);
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.poll-option-bar {
  background: var(--primary);
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease-out;
}

.poll-option-bar.user-voted {
  background: var(--accent);
}

.poll-vote-btn {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--primary);
  background: var(--white);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.poll-vote-btn:hover {
  background: var(--primary-light);
  color: var(--primary-hover);
}

.poll-delete-btn {
  color: var(--danger);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: auto;
  align-self: flex-end;
  transition: var(--transition-fast);
}

.poll-delete-btn:hover {
  color: hsl(0, 50%, 45%);
}

.poll-details-toggle {
  font-size: 0.8rem;
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
  border: none;
  background: none;
  padding: 0;
  margin-top: 0.5rem;
}

.poll-details-toggle:hover {
  text-decoration: underline;
}

.poll-details-content {
  font-size: 0.8rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.8rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.poll-details-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.poll-details-list li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed var(--border-color);
  padding-bottom: 0.2rem;
}

.poll-details-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ==========================================================================
   WARTELISTE STYLES (V1.10)
   ========================================================================== */

/* Die .badge-Familie steht jetzt oben bei den Chips (.chip/.chip-*) - sie
   sieht dort genauso aus, nur ohne Versalien und Sperrung. */

/* Honigtopf im öffentlichen Anfrageformular (V1.23).
   Bewusst nicht display:none oder hidden - beides erkennen Formular-Ausfüller
   und lassen das Feld dann aus. Stattdessen aus dem sichtbaren Bereich
   geschoben: für Menschen unsichtbar, für ein Skript ein ganz normales Feld. */
.inquiry-hp {
  position: absolute;
  left: -5000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Warteliste Filter Buttons */
.inquiry-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

/* .btn-filter gehoert zur Chip-Knopf-Familie weiter oben - Aussehen und
   Aktivzustand stehen dort. */

/* --- V1.11 Dokumenten-Center UIs --- */
.doc-center-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .doc-center-layout {
    grid-template-columns: 1fr;
  }
}

.doc-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.doc-preview-pane {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 2rem;
  min-height: 600px;
  display: flex;
  justify-content: center;
}

.doc-preview-paper {
  background: var(--white);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-radius: 4px;
  width: 100%;
  max-width: 700px;
  min-height: 800px;
  padding: 3rem;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  color: #333;
  line-height: 1.5;
  font-size: 10.5pt;
  position: relative;
}

.doc-preview-paper h1, 
.doc-preview-paper h2, 
.doc-preview-paper h3 {
  color: var(--primary-dark);
}

/* --- V1.11 Lerngeschichten Custom UIs --- */
.story-timeline-card {
  border-left: 5px solid var(--primary) !important;
  background: var(--bg-primary);
  position: relative;
}

.story-timeline-card.is-story {
  border-left: 5px solid #cf5997 !important;
  background: #fff5f8;
}

.story-bubble {
  border: 1px solid #fbcfe8;
  border-radius: var(--radius-md);
  padding: 1.25rem;
  background: var(--white);
  margin-top: 0.5rem;
  box-shadow: 0 2px 5px rgba(207, 89, 151, 0.05);
}

.story-bubble-title {
  color: #cf5997;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.story-section-box {
  margin-top: 1rem;
  padding: 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.story-section-box.reflection {
  background-color: #fff0f6;
  border-left: 3px solid #cf5997;
  color: #86184a;
}

.story-section-box.next-steps {
  background-color: #fdf2f8;
  border-left: 3px solid #f472b6;
  color: #9d174d;
}

/* ======================================================================
   Entwicklung - Kind-Detailseite (1.73)
   Drei Unterreiter (Bogen/Bild/Geschichten), ein Wortschatz fuer die drei
   Zustaende, zwei Knoepfe statt Durchschalten, das Rad statt der Spirale.
   Ansichten (.entw-ansicht ...) erscheinen in Verwaltung, Elternbereich und
   Jahresbuch-Druck - dieselben Klassen ueberall. Bereichsfarbe kommt NUR
   ueber die Custom Property --entw-farbe (Inline-Stil am Markup), hier wird
   sie nur als Fallback auf --primary/--ink gelesen.
   ====================================================================== */

.entw-ansicht {
  /* Anker fuer die drei Ansichten (Kette/Liste/Rad) - kein eigener Stil noetig */
}

.entw-kopf {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--s-1);
}

.entw-kopf-zusatz {
  font-weight: 400;
  color: var(--ink-3);
}

.entw-hinweis {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin: 0 0 var(--s-3);
  line-height: 1.5;
}

.entw-fussnote {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.5;
  margin: var(--s-4) 0 0;
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}

/* Rad: sechs Sektoren (Bereiche), je sechs bogenfoermige Plaetze - tippbar
   ueber bindeEntwicklungsAnsicht(). Groesse/Schrift der Beschriftungen setzt
   das SVG selbst in viewBox-Einheiten (px waeren hier falsch, sie skalieren
   nicht mit der Huelle). */
.entw-rad-huelle {
  max-width: 440px;
  margin: 0 auto;
}

.entw-rad {
  display: block;
  width: 100%;
  height: auto;
}

.entw-rad-zelle {
  transition: stroke-width .15s;
}

.entw-rad[data-entw-gebunden] .entw-rad-zelle {
  cursor: pointer;
}

.entw-rad-zelle.ist-gewaehlt {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-opacity: 1;
}

.entw-rad-label {
  font-family: var(--font-family), system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
}

.entw-rad-mitte {
  font-family: var(--font-family), system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  fill: var(--ink-2);
}

.entw-rad-bildunterschrift {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-align: center;
  line-height: 1.45;
  min-height: 3.2em;
  margin: var(--s-2) auto 0;
  max-width: 46ch;
}

.entw-rad-bildunterschrift strong {
  color: var(--ink);
}

.entw-rad-bildunterschrift em {
  color: var(--ink-2);
}

/* Zustandssymbol (voll / halb gestrichelt / leerer Ring) - dasselbe Muster
   in der Legende, in den Rad-Plaetzen und auf den Status-Knoepfen. */
.entw-zustand {
  display: inline-block;
  vertical-align: -2px;
}

.entw-legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1) var(--s-4);
  margin: var(--s-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.entw-legende-eintrag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-2);
}

.entw-legende-eintrag .entw-zustand {
  color: var(--primary);
  flex: 0 0 auto;
}

/* Aufklapper fuer die Satzliste (intern verborgen, siehe .entw-saetze fuer
   die offene Fassung bei Eltern/Druck) - Pfeil kopiert das Muster von
   .ang-grundsaetze > summary, keine neue Farbe. */
.entw-klapp {
  margin-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.entw-klapp > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  min-height: 44px;
}

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

.entw-klapp > summary::after {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition-fast);
}

.entw-klapp[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Offene Satzliste: fuer Eltern und den Druck bleibt sie immer sichtbar. */
.entw-saetze {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.entw-saetze-titel {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 var(--s-2);
}

.entw-liste-bereich {
  margin-bottom: var(--s-4);
  break-inside: avoid;
}

.entw-liste-bereich h5 {
  font-size: var(--fs-sm);
  font-weight: 700;
  margin: 0 0 var(--s-1);
  color: var(--entw-farbe, var(--ink));
  letter-spacing: .01em;
}

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

.entw-liste-zeile {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  padding: 4px 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink);
}

.entw-liste-punkt {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%; /* ein Kreis, kein Kasten - 50% ist hier erlaubt */
  margin-top: .3em;
  background: var(--entw-farbe, var(--primary));
  border: 2px solid var(--entw-farbe, var(--primary));
}

.entw-liste-punkt.ist-offen {
  background: var(--surface);
  border-style: dashed;
}

.entw-liste-wann {
  color: var(--ink-3);
}

.entw-liste-notiz {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-style: italic;
}

.entw-liste-rest {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin: var(--s-1) 0 0;
  line-height: 1.45;
}

/* Kette: der Faden laeuft hinter den Perlen durch (Rapport 104px = eine
   Kachelhoehe, Strich bei 23-25px). Wer eine Zahl hier aendert, muss Hoehe
   der .entw-perle und den Mittelpunkt des Kreises (24px) mitziehen. */
.entw-kette {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 23px,
    var(--line) 23px, var(--line) 25px,
    transparent 25px, transparent 104px
  );
  background-position: 0 0;
}

.entw-perle {
  width: 96px;
  height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.entw-perle-kreis {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 4px 0 6px;
  box-shadow: var(--shadow-1);
  background: var(--entw-farbe, var(--primary));
  border: 2px solid var(--entw-farbe, var(--primary));
}

.entw-perle.ist-offen .entw-perle-kreis {
  background: var(--surface);
  border-style: dashed;
  opacity: .75;
}

.entw-perle-name {
  font-size: var(--fs-xs);
  line-height: 1.25;
  color: var(--ink);
  max-height: 2.5rem;
  overflow: hidden;
  padding: 0 2px;
}

.entw-perle-datum {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 2px;
}

/* --- Kind-Detailseite (admin.js) --------------------------------------- */

.entw-seite-kopf {
  align-items: flex-start;
}

.entw-seite-titelzeile {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.entw-seite-titelzeile .seite-titel {
  margin: 0;
}

.entw-seite-kopf .seite-untertitel {
  margin: 2px 0 0;
}

.entw-reiter {
  margin: 0 0 var(--s-4);
}

/* .segment scrollt am Handy schon waagerecht (overflow-x: auto); die drei
   Unterreiter-Knoepfe duerfen die Breite zusaetzlich unter sich teilen. */
.entw-reiter .segment-btn {
  flex: 1 1 auto;
  justify-content: center;
}

.entw-bereiche {
  margin: 0 0 var(--s-3);
}

/* Sechs Bereiche passen am Handy nicht nebeneinander. .segment-btn darf
   schrumpfen (flex 0 1 auto) - dann quetschen sich die Knoepfe auf 44 px und
   die Namen laufen uebereinander, statt dass die Leiste scrollt. Feste
   Breite je Knopf, und .segment scrollt von allein (overflow-x: auto). */
.entw-bereiche .segment-btn {
  flex: 0 0 auto;
}

.entw-meilensteine {
  display: flex;
  flex-direction: column;
}

.entw-meilenstein {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
}

.entw-meilenstein:first-child {
  border-top: 0;
  padding-top: var(--s-2);
}

.entw-meilenstein-titel {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.entw-meilenstein-alter {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-3);
  white-space: nowrap;
  margin-left: var(--s-2);
}

/* Zwei gleich aussehende Knoepfe statt Durchschalten - keine Ampel. */
.entw-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin: var(--s-2) 0;
}

.entw-status-btn {
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

.entw-status-btn:hover {
  border-color: var(--primary);
}

.entw-status-btn:focus-visible {
  outline: 3px solid var(--primary-soft);
  outline-offset: 1px;
}

.entw-status-btn[aria-pressed="true"] {
  background: var(--primary-soft);
  color: var(--primary-ink);
  border-color: var(--primary);
}

.entw-status-btn .entw-zustand {
  flex: 0 0 auto;
}

.entw-meilenstein-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.entw-meilenstein-stand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.entw-meilenstein-meta .btn {
  margin-left: auto;
}

.entw-gespeichert {
  color: var(--success-ink);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.entw-gespeichert svg {
  width: 12px;
  height: 12px;
}

.entw-notiz {
  margin-top: var(--s-2);
}

.entw-meilenstein .hinweis {
  margin-top: var(--s-2);
}

.entw-bild {
  /* ist eine .card - Flaeche, Linie, Radius, Schatten kommen von dort */
}

.entw-bild-fuss {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}

.entw-geschichten-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-2);
}

.entw-geschichten-kopf .card-title {
  margin: 0;
}

.entw-geschichten-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.entw-geschichten {
  /* Anker fuer die Eintragsliste - .entw-eintrag traegt Abstand und Linie */
}

.entw-eintrag {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

.entw-eintrag:last-child {
  border-bottom: 0;
}

.entw-eintrag.ist-geschichte {
  border-left: 3px solid var(--primary);
  padding-left: var(--s-3);
}

.entw-eintrag-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.entw-eintrag-datum {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.entw-eintrag-aktionen {
  margin-left: auto;
  display: flex;
  gap: var(--s-1);
}

.entw-eintrag-bild {
  margin: var(--s-2) 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
}

.entw-eintrag-bild img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
}

.entw-eintrag-titel {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin: var(--s-2) 0 var(--s-1);
}

.entw-eintrag-text {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-line;
  margin: 0;
}

.entw-eintrag-block {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.entw-eintrag-block strong {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--ink-2);
}

.entw-eintrag-block strong svg {
  width: 14px;
  height: 14px;
}

.entw-eintrag-block p {
  margin: 4px 0 0;
  white-space: pre-line;
  color: var(--ink);
}

.entw-kinder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
}

/* .entw-kind-kachel ist ein <button class="card"> - .card liefert Flaeche,
   Linie, Radius, Schatten schon mit. */
.entw-kind-kachel {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-align: left;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}

.entw-kind-kachel:hover {
  border-color: var(--line-strong);
}

.entw-kind-kachel:focus-visible {
  outline: 3px solid var(--primary-soft);
}

.entw-kind-avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
}

.entw-kind-avatar svg {
  width: 24px;
  height: 24px;
}

.entw-kind-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.entw-kind-text strong {
  font-size: var(--fs-lg);
}

.entw-kind-zusatz {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.entw-kind-doku {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.5;
}

.entw-kind-pfeil {
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  flex: 0 0 auto;
}

.entw-eltern-ansicht {
  margin-top: var(--s-3);
}

@media (max-width: 700px) {
  .entw-seite-kopf {
    flex-direction: column;
    align-items: stretch;
  }

  .entw-seite-kopf .seite-aktionen .btn {
    width: 100%;
  }

  .entw-meilenstein-meta .btn {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

@media print {
  .entw-rad-huelle {
    break-inside: avoid;
    page-break-inside: avoid;
    max-width: 130mm;
  }

  .entw-rad {
    max-width: 100%;
    height: auto;
  }

  .entw-liste-bereich {
    break-inside: avoid;
  }

  .entw-status,
  .entw-notiz,
  .entw-meilenstein-meta .btn,
  .entw-bild-fuss {
    display: none;
  }
}

/* --- V1.11 Print Styles Overrides and Specifics --- */
#single-doc-print-view {
  display: none;
}
body.printing-single-doc #single-doc-print-view,
body.printing-yearbook #single-doc-print-view {
  display: block !important;
}

@media print {
  body.printing-single-doc #app-root {
    display: none !important;
  }
  body.printing-single-doc #single-doc-print-view {
    display: block !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1.5cm !important;
    box-sizing: border-box !important;
  }

  .print-page {
    page-break-after: always;
    box-sizing: border-box;
  }
  
  .print-page:last-child {
    page-break-after: avoid;
  }
  
  .contract-print-header {
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #000;
    padding-bottom: 1rem;
  }
  
  .contract-print-header h1 {
    font-size: 20pt;
    margin: 0 0 0.5rem 0;
  }

  .contract-section {
    margin-bottom: 1.5rem;
    page-break-inside: avoid;
  }

  .contract-section h3 {
    font-size: 13pt;
    border-bottom: 1px solid #000;
    padding-bottom: 0.3rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
  }

  .contract-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 0.8rem;
  }

  .contract-row {
    margin-bottom: 0.5rem;
  }

  .contract-label {
    font-weight: bold;
    display: inline-block;
    width: 180px;
  }

  /* Story Layout */
  .story-print-card {
    border: 3px double #cf5997;
    border-radius: 15px;
    padding: 2rem;
    background: #fff !important;
    font-family: 'Outfit', 'Inter', 'Georgia', serif;
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
    page-break-inside: avoid;
  }

  .story-print-title {
    font-size: 22pt;
    color: #cf5997 !important;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: bold;
  }

  .story-print-meta {
    text-align: center;
    color: #666;
    font-size: 10pt;
    margin-bottom: 1.5rem;
    font-style: italic;
  }

  .story-print-image {
    max-width: 60% !important;
    max-height: 250px !important;
    margin: 0 auto 1.5rem auto !important;
    display: block !important;
    border-radius: 8px;
    border: 1px solid #ccc;
  }

  .story-print-letter {
    font-size: 12pt;
    line-height: 1.6;
    margin-bottom: 2rem;
    text-align: justify;
    white-space: pre-wrap;
  }

  .story-print-reflection {
    background: #fff0f6 !important;
    border-left: 4px solid #cf5997;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .story-print-reflection h4 {
    margin: 0 0 0.5rem 0;
    color: #cf5997;
    font-size: 11pt;
  }

  .story-print-nextsteps {
    background: #fdf2f8 !important;
    border-left: 4px solid #f472b6;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .story-print-nextsteps h4 {
    margin: 0 0 0.5rem 0;
    color: #db2777;
    font-size: 11pt;
  }

  /* Invoice Print Layout */
  .invoice-print-container {
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    color: #000;
  }

  .invoice-header-block {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
  }

  .invoice-address-sender {
    font-size: 8pt;
    text-decoration: underline;
    color: #444;
    margin-bottom: 0.8rem;
  }

  .invoice-address-recipient {
    font-size: 11pt;
    line-height: 1.6;
  }

  .invoice-meta-info {
    text-align: right;
    font-size: 10pt;
  }

  .invoice-meta-info h2 {
    font-size: 18pt;
    margin: 0 0 0.5rem 0;
    color: #000;
  }

  .invoice-title {
    font-size: 14pt;
    font-weight: bold;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
  }

  .invoice-text {
    font-size: 11pt;
    margin-bottom: 1.5rem;
    line-height: 1.5;
  }

  .invoice-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
  }

  .invoice-table th, .invoice-table td {
    border-bottom: 1px solid #000;
    padding: 8px 10px;
    text-align: left;
    font-size: 10pt;
  }

  .invoice-table th {
    font-weight: bold;
    background-color: #f2f2f2 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .invoice-total-row {
    font-weight: bold;
    font-size: 11pt;
    border-top: 2px solid #000;
  }

  .invoice-footer {
    margin-top: 5rem;
    border-top: 1px solid #ccc;
    padding-top: 1rem;
    font-size: 8.5pt;
    color: #444;
    text-align: center;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   Loewenbande Terminal & Check-in Styles (V1.12)
   ========================================================================== */

.terminal-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg);
  font-family: var(--font-family);
  color: var(--ink);
}

/* Kopfzeile wie im uebrigen Haus: weisse Flaeche mit Linie statt eines
   Farbverlaufs von Pink nach Terracotta. Der Verlauf war die lauteste
   Flaeche der ganzen App und stand ausgerechnet dort, wo Eltern in der
   Tuer nur wissen wollen, ob das Geraet bereit ist. */
.terminal-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--header-h);
  padding: var(--s-2) var(--s-5);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

/* Unter 600px: Logo/Titel links, Knopf rechts (erste Zeile), die Statuspille
   bekommt eine eigene zweite Zeile - drei Elemente in einer Zeile liefen sonst
   ueber den Rand eines Handybildschirms. */
@media (max-width: 600px) {
  .terminal-header {
    padding: 1rem;
  }
  /* Der leere ::after ist ein Umbruch: Er nimmt die ganze Zeilenbreite ein
     und schiebt die Statuspille in eine eigene Zeile - ohne dass die Pille
     selbst 100% breit werden muss. Eine Zustandsanzeige ueber die volle
     Breite sieht aus wie eine Warnung, ist aber nur eine Auskunft. */
  .terminal-header::after {
    content: "";
    order: 2;
    flex-basis: 100%;
    height: 0;
  }
  #terminal-status {
    order: 3;
    margin: 0 auto;
  }
  #btn-close-terminal {
    order: 2;
  }
}

.terminal-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.terminal-logo .logo-icon {
  width: 36px;
  height: 36px;
}

.terminal-logo .logo-text {
  font-size: var(--fs-lg);
  font-weight: 700;
}

/* Kleine Zustandspille, nicht mehr eine Leiste ueber die halbe Breite. */
.terminal-status {
  align-self: center;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--bg-2);
  color: var(--ink-2);
  padding: 2px var(--s-3);
  border-radius: var(--radius-pill);
  line-height: 1.8;
  white-space: nowrap;
}

.terminal-status.aktiv  { background: var(--success-soft); color: var(--success-ink); }
.terminal-status.aus    { background: var(--bg-2);         color: var(--ink-2); }
.terminal-status.startet { background: var(--warn-soft);   color: var(--warn-ink); }

/* Zustandspille: muss die Wahrheit sagen (aktiv/aus/startet), nie pauschal
   "bereit" behaupten, waehrend die Kamera in Wirklichkeit nicht laeuft. */
.terminal-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ink-3); /* Grau = aus, Startzustand bevor JS entscheidet */
}

.terminal-status.aktiv .terminal-status-dot {
  background-color: var(--success);
}

.terminal-status.aus .terminal-status-dot {
  background-color: var(--ink-3);
}

.terminal-status.startet .terminal-status-dot {
  background-color: var(--warn);
}

/* Status Indicator Pulse Animation */
.status-indicator.online,
.pulse-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: var(--success);
  border-radius: 50%;
  position: relative;
}

.status-indicator.online::after,
.pulse-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: inherit;
  animation: pulse-ring 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Terminal Grid Layout */
.terminal-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
  padding: 2rem;
  flex-grow: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 900px) {
  .terminal-grid {
    grid-template-columns: 1fr;
  }
}

/* Handy: weniger Rand aussen, Karten enger gepolstert - bei 375px Breite
   sonst zu wenig Platz fuer den QR-Reader und die Kinderliste. */
@media (max-width: 600px) {
  .terminal-grid {
    padding: 1rem;
  }
  .terminal-card {
    padding: 1.25rem;
  }
}

/* Linke Spalte des Grids (Scanner + Kinderliste gestapelt) - erlaubt zwei
   Karten in der 1.2fr-Spalte, ohne die Grid-Definition selbst anzufassen. */
.terminal-col-scan {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.terminal-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.terminal-card h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-3);
}

/* QR Scanner Container */
.qr-reader-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  background: #f8fafc;
  border-radius: 16px;
  border: 2px dashed #cbd5e1;
  overflow: hidden;
  position: relative;
}

#qr-reader__scan_region video {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* Zusaetzlich zur scan_region-Regel oben: manche Bibliotheksversionen haengen
   das <video> direkt in #qr-reader statt in #qr-reader__scan_region. */
#qr-reader video {
  width: 100% !important;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}

/* Handscanner styling */
.handscanner-wrapper {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--border-color);
  margin-top: auto;
}

.handscanner-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}

.handscanner-input {
  background: white !important;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 2px solid #e2e8f0;
  text-align: center;
  letter-spacing: 2px;
}

.handscanner-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* Volle Breite fuer die grossen Terminal-Knoepfe (Kamera starten, Foto vom
   Code machen) - generischer Helfer, bewusst nicht an .btn gekoppelt. */
.btn-block {
  width: 100%;
}

/* Vertrag: alle Knoepfe im Terminal min. 44px hoch (Handy-Treffsicherheit).
   Die Basisregel .btn liefert das nicht ueberall - hier fuer den ganzen
   Terminal-Container nachgezogen, deckt auch .terminal-foto-btn (fuehrt die
   .btn-Klasse) und #btn-close-terminal mit ab. */
.terminal-container .btn {
  min-height: 44px;
}

/* Nur sichtbar, solange die Kamera nicht laeuft: grosser Start-Knopf, darunter
   bei Bedarf die fehlerspezifische Hilfebox, dann immer der Hinweis auf die
   beiden anderen Wege (Kind antippen / Foto machen). */
.camera-start-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* [hidden] ist eine Autor-Regel, `display: flex` oben ebenso - beide haben
   dieselbe Spezifitaet, im Markup steht `hidden` zuerst und verliert daher
   gegen diese Regel weiter unten in der Kaskade. Ohne diesen Override bleibt
   der Start-Knopf sichtbar, auch wenn die Kamera laeuft. */
.camera-start-wrapper[hidden] {
  display: none;
}

.terminal-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* Kamera-Hilfebox: heller Hintergrund, kein Rot-auf-Rosa - nur die erste
   Zeile (die eigentliche Fehlermeldung) ist rot, der Rest neutral/gedaempft. */
.terminal-hilfe {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.terminal-hilfe-haupt {
  color: var(--danger);
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.terminal-hilfe-liste {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  color: var(--text-main);
}

.terminal-hilfe-liste li {
  margin-bottom: 0.4rem;
}

.terminal-hilfe-technisch {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Foto-Fallback-Knopf: wie .btn-secondary, aber als <label> um das
   versteckte Datei-Feld gelegt (iOS/Android oeffnen dann direkt die Kamera-App). */
.terminal-foto-btn {
  cursor: pointer;
}

/* "Ohne Scanner: Kind antippen" - Alternative zum alten Dropdown + "Buchen".
   Jeder Knopf mindestens 48px hoch (Vertrag), tatsaechlich 56px fuer sichere
   Treffer auf dem Handy. */
.terminal-kids-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.terminal-kind-wrapper {
  display: flex;
  flex-direction: column;
}

.terminal-kind-btn {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-family);
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.terminal-kind-btn:hover {
  border-color: var(--primary);
}

.terminal-kind-btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.terminal-kind-name {
  font-weight: 700;
  color: var(--text-main);
}

/* Der Zustand des Kindes steht nicht nur in der Farbe: davor sitzt ein
   Punkt in derselben Farbe. Farbe allein waere fuer rotgruenblinde Augen
   keine Auskunft. terminal.js setzt data-status am Wrapper. */
.terminal-kind-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  white-space: nowrap;
}

.terminal-kind-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.terminal-kind-wrapper[data-status="da"] .terminal-kind-status { color: var(--success-ink); }
.terminal-kind-wrapper[data-status="abgeholt"] .terminal-kind-status { color: var(--ink-3); }
.terminal-kind-wrapper[data-status="fehlt"] .terminal-kind-status { color: var(--warn-ink); }

/* Inline-Rueckfrage statt window.confirm() - erscheint direkt unter dem
   angetippten Kind, statt ein Browser-natives Popup zu oeffnen. */
.terminal-rueckfrage {
  margin-top: 0.4rem;
  padding: 0.9rem 1rem;
  background: var(--primary-light);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Gleicher Grund wie bei .camera-start-wrapper[hidden]: die eigene
   display:flex-Regel muss dem hidden-Attribut weichen, sonst stehen alle
   Rueckfragen dauerhaft offen und die Ja/Abbrechen-Knoepfe wirken auf eine
   leere Frage. */
.terminal-rueckfrage[hidden] {
  display: none;
}

.terminal-rueckfrage-frage {
  margin: 0;
  font-weight: 600;
  color: var(--primary-dark);
}

.terminal-rueckfrage-buttons {
  display: flex;
  gap: 0.6rem;
}

.terminal-rueckfrage-buttons .btn {
  flex: 1;
  min-height: 44px;
}

/* Activity Logs styling */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  max-height: 500px;
  padding-right: 0.25rem;
}

.no-activity {
  text-align: center;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  padding: var(--s-6) var(--s-4);
}

.activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4);
  background: var(--bg-2);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--ink-3);
}

.activity-item.check-in {
  border-left-color: var(--success);
}

.activity-item.check-out {
  border-left-color: var(--danger);
}

.activity-item-child {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.activity-item-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: var(--shadow-sm);
}

.activity-item-fallback-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border: 2px solid var(--border-color);
}

.activity-item-info h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.activity-item-info span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.activity-item-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px var(--s-2);
  border-radius: var(--radius-pill);
  line-height: 1.6;
  white-space: nowrap;
}

.activity-item-badge.check-in {
  background: var(--success-soft);
  color: var(--success-ink);
}

.activity-item-badge.check-out {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

/* Aushangbrett im Terminal - war zuvor vollstaendig ueber style-Attribute im
   Markup formatiert. Die Kamera-Fehlermeldung selbst sitzt jetzt in
   .terminal-hilfe (siehe oben, bei .camera-start-wrapper). */
#btn-close-error {
  margin-top: 1.5rem;
}

.terminal-board {
  margin-top: 1.5rem;
}

/* Muss nach '.terminal-card h2' stehen: gleiche Spezifitaet, es gewinnt die
   spaetere Regel. Ueberschrieben wird nur der untere Abstand. */
.terminal-board h2 {
  margin-bottom: 0.6rem;
}

.terminal-board-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.terminal-board-item {
  border-left: 4px solid var(--accent);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
}

/* Wichtige Aushaenge: breiterer Balken, roter Ton */
.terminal-board-item.is-important {
  border-left-width: 5px;
  border-left-color: var(--danger);
  background: var(--danger-light);
}

.terminal-board-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.terminal-board-title {
  font-size: 1rem;
  color: var(--text-main);
}

.terminal-board-item.is-important .terminal-board-title {
  color: var(--danger);
}

.terminal-board-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.terminal-board-text {
  font-size: 0.88rem;
  white-space: pre-line;
  margin-top: 0.25rem;
  line-height: 1.35;
}

.terminal-board-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.terminal-board-file {
  font-size: 0.78rem;
  color: var(--primary-dark);
  text-decoration: none;
  font-weight: 600;
}

/* Successful Scan Overlay */
.scan-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(30 20 10 / 0.45);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* Startzustand: .scan-overlay bringt display:flex mit, sichtbar wird das
   Overlay erst, wenn JavaScript display setzt. Die ID ist spezifischer als
   die Klasse, das inline gesetzte display des Skripts schlaegt beide. */
#scan-overlay {
  display: none;
}

.confetti-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.welcome-card {
  position: relative;
  z-index: 2;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  animation: slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slide-up {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.welcome-card-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.welcome-card-icon.check-out {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.welcome-card-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin: 0;
}

.welcome-card-photo {
  width: 130px;
  height: 130px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--primary-light);
  box-shadow: var(--shadow-md);
}

.welcome-card-fallback-photo {
  width: 130px;
  height: 130px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 3rem;
  border: 4px dashed var(--border-color);
}

/* Lucide baut ein <svg> mit 24px-Attributen - font-size greift darauf nicht.
   Ohne diese Regel verliert sich das Platzhalter-Icon im 130px-Kreis. */
.welcome-card-fallback-photo svg {
  width: 52px;
  height: 52px;
}

/* Fehler-Overlay: derselbe Kreis, aber in Warnrot */
.welcome-card-fallback-photo.error {
  background: var(--danger-soft);
  color: var(--danger-ink);
  border-color: var(--danger);
}

/* Kopfzeile der Willkommenskarte: "Check-In um 07:45".
   Gruen/Rot wie die Plaketten der Aktivitaetenliste daneben - beide Karten
   stehen im selben Terminalbild und sollen sich auf einen Blick unterscheiden. */
.welcome-badge {
  font-size: 1rem;
  font-weight: 700;
  color: var(--success-ink);
  background: var(--success-soft);
  padding: 0.45rem 1.25rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.welcome-card.checkout .welcome-badge {
  color: var(--danger-ink);
  background: var(--danger-soft);
}

.welcome-card-name {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.welcome-card-time {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-ink);
  background: var(--primary-soft);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-pill);
}

.welcome-card-time.check-out {
  color: var(--danger-ink);
  background: var(--danger-soft);
}

.welcome-card-msg {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Print Styles for Check-In Ausweis */
@media print {
  body.printing-single-doc .checkin-card-print {
    max-width: 380px !important;
    margin: 4cm auto !important;
    border: 3px double var(--primary) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    padding: 2.5rem 2rem !important;
    page-break-inside: avoid !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.2rem !important;
  }
}

/* Sparkasse Simulator Styles
   ---------------------------------------------------------------------------
   UI-006, 08.09.2026: Diese Regeln standen hier schon, wurden aber im Markup
   Eigenschaft fuer Eigenschaft von Inline-Stilen ueberschrieben - die Klasse
   sagte 1.25rem, das Element zeigte var(--fs-lg). Wer die Inline-Stile nur
   entfernt haette, waere auf die alten Hex- und rem-Werte zurueckgefallen und
   haette das Aussehen veraendert, ohne es zu merken.
   Deshalb tragen die Regeln jetzt die Werte, die vorher inline standen: die
   Tokens des Designsystems. Nachgemessen mit tools/design/imkontext.js am
   echten Element - Zwilling mit dem alten Inline-Stil daneben, berechnete
   Werte verglichen.
   Die drei Rot- und Grautoene der Sparkasse (#ff0000, #e5e7eb, #faf9f6)
   bleiben feste Werte: Sie zitieren eine fremde Marke und gehoeren nicht in
   die Farbtokens der Loewenbande. */
.sparkasse-panel {
  background: #faf9f6;
  border: 1px solid #e5e7eb;
  border-top: 4px solid #ff0000; /* Sparkasse Red */
  border-radius: 12px;
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.sparkasse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ff0000; /* Sparkasse Red */
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
}
.sparkasse-logo {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: #ff0000;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.sparkasse-balance {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-main);
}
.sparkasse-transactions-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-height: 180px;
  overflow-y: auto;
  margin-top: var(--s-2);
}
.sparkasse-transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s ease;
}
.sparkasse-transaction-item:hover {
  border-color: #ff0000;
  box-shadow: 0 2px 4px rgba(255, 0, 0, 0.05);
}
.sparkasse-tx-details {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.sparkasse-tx-purpose {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-main);
}
.sparkasse-tx-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.sparkasse-tx-amount {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ef4444;
}
/* Das DEMO-Schild und der Hinweisstreifen darunter. Beide sassen inline im
   Markup und tragen dieselben drei Warnfarben; als Regel stehen sie einmal. */
.sparkasse-demo-marke {
  font-size: var(--fs-xs);
  font-weight: 700;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  padding: var(--s-1) var(--s-2);
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.sparkasse-demo-hinweis {
  font-size: var(--fs-xs);
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: var(--s-1) var(--s-2);
  margin-bottom: var(--s-2);
}
/* Kopfzeile ueber der Umsatzliste und der CSV-Import-Fuss darunter. */
.sparkasse-listenkopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-2);
}
.sparkasse-import {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--border-color);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.sparkasse-import-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.sparkasse-import-feld {
  font-size: var(--fs-xs);
  width: 100%;
  color: var(--text-main);
}
.sparkasse-tx-action-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 0.25rem 0.50rem;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  font-weight: 600;
  margin-left: 1rem;
}
.sparkasse-tx-action-btn:hover {
  background: var(--primary-dark);
}
.sparkasse-tx-action-btn.booked {
  background: #10b981;
  cursor: default;
}

/* Yearbook Portfolio Keepsake Print Styles */
@media print {
  body.printing-yearbook #app-root {
    display: none !important;
  }
  body.printing-yearbook #single-doc-print-view {
    display: block !important;
    background: #ffffff !important;
    color: #000000 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  body.printing-yearbook {
    background: #fff !important;
    color: #000 !important;
    font-family: 'Outfit', sans-serif !important;
  }
  body.printing-yearbook .no-print,
  body.printing-yearbook header,
  body.printing-yearbook nav,
  body.printing-yearbook footer,
  body.printing-yearbook button,
  body.printing-yearbook .tabs {
    display: none !important;
  }
  body.printing-yearbook #app {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .yearbook-page {
    page-break-after: always !important;
    page-break-inside: avoid !important;
    padding: 2cm !important;
    box-sizing: border-box !important;
    min-height: 297mm; /* A4 height */
    position: relative;
  }
  .yearbook-cover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 297mm;
    page-break-after: always !important;
  }
  .yearbook-cover-logo {
    font-size: 3rem;
    color: var(--primary, #d946ef);
    margin-bottom: 2rem;
  }
  .yearbook-cover-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #1f2937;
  }
  .yearbook-cover-subtitle {
    font-size: 1.5rem;
    color: #4b5563;
    margin-bottom: 3rem;
  }
  .yearbook-cover-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--accent, #14b8a6);
    margin-bottom: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }
  .yearbook-entry {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    page-break-inside: avoid !important;
  }
  .yearbook-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
  }
  .yearbook-entry-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
  }
  .yearbook-entry-date {
    font-size: 0.9rem;
    color: #6b7280;
  }
  .yearbook-entry-content {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #374151;
  }
  .yearbook-entry-media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
  }
  .yearbook-entry-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
  }

  /* Polaroid-style gallery for scrapbook */
  .polaroid-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
  }
  .polaroid-frame {
    background: #ffffff !important;
    padding: 12px 12px 24px 12px !important;
    border: 1px solid #cccccc !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    text-align: center;
    page-break-inside: avoid !important;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .polaroid-frame img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border: 1px solid #eeeeee !important;
  }
  .polaroid-caption {
    font-size: 0.9rem !important;
    color: #333333 !important;
    font-style: italic !important;
    margin-top: 0.3rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
#offline-status-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--danger);
  color: var(--surface);
  text-align: center;
  padding: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  z-index: 99999;
  box-shadow: var(--shadow-1);
  animation: slideDownStatus 0.3s ease-out;
}

@keyframes slideDownStatus {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Umzugshinweis an der alten Adresse (ADR-003).
   Unten statt oben, damit er die Kopfzeile und den Offline-Hinweis nicht
   verdeckt, und mit Abstand zur unteren Leiste des Elternbereichs. */
#umzug-hinweis {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99998;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background-color: var(--surface);
  border-top: 3px solid var(--primary);
  box-shadow: 0 -2px 12px rgb(0 0 0 / .18);
}
#umzug-hinweis p {
  margin: 0;
  flex: 1 1 16rem;
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
#umzug-hinweis .umzug-knopf,
#umzug-hinweis .umzug-weg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--s-3);
  border-radius: var(--radius-md, 8px);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  white-space: nowrap;
}
#umzug-hinweis .umzug-knopf {
  background-color: var(--primary);
  color: #fff;
  border: none;
}
#umzug-hinweis .umzug-weg {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}
@media (max-width: 30rem) {
  #umzug-hinweis .umzug-knopf,
  #umzug-hinweis .umzug-weg { flex: 1 1 auto; }
}
/* Unter 1024px uebernimmt die untere Leiste die Navigation. Ist sie gerade
   sichtbar, rueckt der Hinweis genau darueber, statt sie zu verdecken - eine
   verdeckte Navigation waere schlimmer als der Umzug selbst. Ob sie sichtbar
   ist, entscheidet nicht die Fensterbreite allein (abgemeldet gibt es keine),
   deshalb setzt app.js die Klasse nach dem Messen. */
#umzug-hinweis.ueber-leiste {
  bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: var(--s-3);
}

/* BET-059: Hinweis auf eine wartende neue Fassung. Bewusst kein
   Wegklick-Knopf wie beim Umzugshinweis - "spaeter" heisst hier einfach
   ignorieren, ein dauerhaftes Merken waere falsch: die naechste Fassung soll
   wieder gemeldet werden. Knopf-Stil kommt aus .btn/.btn-primary, nur die
   Tippflaeche wird hier auf 44px angehoben (.btn liegt sonst bei 40px). */
#update-hinweis-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99998;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background-color: var(--surface);
  border-top: 3px solid var(--primary);
  box-shadow: 0 -2px 12px rgb(0 0 0 / .18);
}
#update-hinweis-banner p {
  margin: 0;
  flex: 1 1 16rem;
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
#update-hinweis-banner .btn {
  min-height: 44px;
}
@media (max-width: 30rem) {
  #update-hinweis-banner .btn { flex: 1 1 auto; }
}

/* ==========================================
   V1.14: Benachrichtigungs-Center
   ========================================== */
.notification-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 2rem);
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: var(--s-2);
  z-index: var(--z-dropdown);
}

/* Am Handy sitzt neben der Glocke noch der Menue-Knopf, die Glocke ist
   also nicht am Bildschirmrand - rechtsbuendig am Knopf verankert liefe
   das Menue links aus dem Bildschirm. Fest am Bildschirm statt am Knopf
   loest das unabhaengig davon, wo die Glocke steht. */
@media (max-width: 700px) {
  .notification-dropdown {
    position: fixed;
    top: calc(var(--header-h) + 8px);
    left: var(--s-2);
    right: var(--s-2);
    width: auto;
    max-width: none;
  }
}

.notification-item {
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem 0.5rem;
  border-radius: 8px;
  border-bottom: 1px solid var(--border-color);
}

.notification-item:last-of-type {
  border-bottom: none;
}

.notification-item.unread {
  background: var(--primary-light, #eef3ee);
}

.notification-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.notification-content {
  min-width: 0;
}

.notification-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-main);
}

.notification-message {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  word-wrap: break-word;
}

.notification-time {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.notification-empty {
  text-align: center;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  padding: var(--s-5) var(--s-3);
}

/* ==========================================
   V1.14: Eingewöhnungs-Phasenanzeige
   ========================================== */
.settling-phase-bar {
  display: flex;
  gap: 0.4rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.settling-phase-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
  min-width: 80px;
  text-align: center;
}

.settling-phase-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--bg-2);
  border: 2px solid var(--line);
  color: var(--ink-3);
}

.settling-phase-step.done .settling-phase-dot {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.settling-phase-label {
  font-size: 0.72rem;
  font-weight: 600;
  /* --ink-2, nicht --ink-3: unter 0.85rem verliert --ink-3 zu viel
     Kontrast (siehe Token-Kommentar oben in dieser Datei). */
  color: var(--ink-2);
}

.settling-phase-step.done .settling-phase-label {
  color: var(--primary-ink);
}

@media (max-width: 760px) {
  .settling-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Startseite "Alltag" (V1.69)
   Die Seite trug zwoelf Bloecke, neun davon bedingt - sie sah an jedem Tag
   anders aus und war am Handy neun Bildschirme lang. Geblieben sind vier
   feste Karten: Wetter, "Heute offen", die Heute-Tabelle und die Termine.
   Die Kinderkarten stehen jetzt im Reiter "Tagesprotokoll".
   ========================================================================== */

/* Ein Knopf, der wie ein Verweis aussieht. Fuer Nebenwege, die frueher als
   grosse Schaltflaeche in der Kopfzeile standen (Notfallblatt drucken,
   Abwesenheit planen, Schliesszeiten verwalten) - sie sind selten, aber sie
   sollen erreichbar bleiben, ohne oben Platz zu beanspruchen. */
.verweis-knopf {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Projektregel: mindestens 44px Tippflaeche (nicht nur die 24px aus WCAG
     2.5.8). Auf dem Tablet gemessen 24px - hier nachgezogen. Textgroesse
     bleibt, nur die Klickflaeche waechst. Gemessen 15.09.2026. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.verweis-knopf:hover,
.verweis-knopf:focus-visible {
  color: var(--primary-dark);
}

/* --- Karte "Heute offen" ------------------------------------------------ */
.offen-karte {
  margin-bottom: 1.5rem;
  padding: 1rem 1.2rem;
}

.offen-titel {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.7rem;
  color: var(--primary-dark);
  font-size: 1rem;
  font-weight: 700;
}

.offen-leer {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.offen-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.offen-zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary);
  background: var(--bg-secondary);
  font-size: 0.88rem;
  line-height: 1.45;
}

/* Sicherheitsrelevantes bleibt rot bzw. gelb - gebuendelt wird die Karte,
   nicht die Dringlichkeit. */
.offen-zeile.offen-warnung {
  border-left-color: var(--danger);
  background: var(--danger-light);
  color: #500;
}

.offen-zeile.offen-achtung {
  border-left-color: #d97706;
  background: #fef3c7;
  color: #713f12;
}

.offen-marke {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-muted);
  padding-top: 0.15rem;
  min-width: 5.6rem;
}

.offen-zeile.offen-warnung .offen-marke { color: var(--danger); }
.offen-zeile.offen-achtung .offen-marke { color: #b45309; }

/* Der Verweis ("Zum Monatsabschluss") traegt --primary. Auf Weiss ist das
   richtig, auf der eingefaerbten Warnzeile nicht: Pink auf dem hellen Rot
   ergibt 4,46:1 - die AA-Schwelle liegt bei 4,5:1, verfehlt um vier
   Hundertstel. Kein Schoenheitsfehler: Genau das hat axe am 19.09.2026
   gemeldet, und weil der Befund je nach Zahl der offenen Punkte die
   Zeilennummer wechselte, sah er zweimal nach Messfehler aus.
   --primary-hover ist dasselbe Pink, sechs Prozent dunkler, und kommt auf
   5,50:1. Gemessen im Pruefstand ueber getComputedStyle, nicht geschaetzt. */
.offen-zeile.offen-warnung .offen-verweis,
.offen-zeile.offen-achtung .offen-verweis { color: var(--primary-hover); }

.offen-text {
  flex: 1 1 14rem;
  min-width: 0;
}

.offen-nebensatz {
  display: block;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.offen-knopf {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.offen-titel .offen-verweis {
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}

.offen-verweis {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Am Finger gemessen 20 px hoch - zu wenig zum Treffen, und die Zeile
   daneben traegt einen zweiten Knopf ("Erledigt"), den man dabei erwischt.
   Die Tippflaeche waechst deshalb nur auf Geraeten ohne Maus; am Rechner
   bleibt der Verweis die schmale Textzeile, die er sein soll. */
@media (pointer: coarse) {
  .offen-verweis {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* --- Karte "Kommende Termine" ------------------------------------------- */
.termine-karte {
  margin-bottom: 1.5rem;
  padding: 1rem 1.2rem;
}

.termine-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.termine-titel {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--primary-dark);
  font-size: 1rem;
  font-weight: 700;
}

.termine-werkzeuge {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.termine-leer {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.termine-gruppe + .termine-gruppe {
  margin-top: 0.8rem;
}

.termine-gruppenname {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.termine-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.termin-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  font-size: 0.82rem;
}

.termin-chip-heute {
  border-color: var(--primary);
  background: var(--primary-light);
}

.termin-was {
  font-weight: 600;
  color: var(--text-main);
}

.termin-wann {
  color: var(--text-muted);
}

.termin-marke {
  color: #fff;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  /* 0,68rem waren 10,9px - unter der 12px-Lesbarkeitsgrenze des Projekts.
     Gemessen 20.09.2026 am Handy ("Abwesend" in Kommende Termine). */
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* --- Sprung von der Heute-Zeile ins Tagesprotokoll ---------------------- */
.today-sprung {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  text-align: left;
  /* Projektregel: mindestens 44px Tippflaeche (nicht nur die 24px aus WCAG
     2.5.8). Auf dem Tablet gemessen 24px - hier nachgezogen. Gemessen
     15.09.2026. */
  min-height: 44px;
}

.today-sprung:hover,
.today-sprung:focus-visible {
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.today-sprung i {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Kurzes Aufleuchten der angesprungenen Kinderkarte, damit der Blick sie
   nach dem Seitenwechsel wiederfindet. */
.kid-card-hervor {
  box-shadow: 0 0 0 3px var(--primary-soft), 0 0 0 5px var(--primary);
  transition: box-shadow 0.3s ease;
}

/* ==========================================
   V1.21: "Heute"-Übersicht im Alltag-Tab
   ========================================== */
.today-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.today-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.today-chips {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.today-chip {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.today-panel {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.today-head,
.today-row {
  display: grid;
  grid-template-columns: minmax(190px, 2.4fr) 122px 104px 104px minmax(170px, 2.2fr);
  gap: 0.6rem;
  align-items: start;
}

.today-row .today-cell-in,
.today-row .today-cell-out,
.today-row .today-cell-note {
  margin-top: 0.1rem;
}

.today-head {
  padding: 0 0.65rem 0.35rem;
  /* 0,7rem waren 11,2px. Die Spaltenkoepfe stehen ueber festen Spalten
     (122px/104px), 12px passen dort ohne Umbruch. Gemessen 20.09.2026. */
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}

.today-row {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.today-row.is-present {
  background: var(--white);
  border-color: hsl(100, 30%, 82%);
}

/* UI-018: Schnellbeobachtung an der Kinderkarte.
   Sie sitzt zwischen den Abschnitten und der Werkzeugleiste - naeher am
   Notizblock als am Werkzeug, und deshalb ohne Rahmen, nur mit einer Linie
   nach oben. */
.schnellbeob {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border-color);
}

.schnellbeob-feld {
  resize: vertical;
}

.schnellbeob-stand {
  align-self: center;
}

/* UI-017: Tippflaechen des Gruppen-Mittagsschlafs.
   Dieselbe Begruendung wie bei .today-schnell darunter: Das sind Knoepfe, die
   in der Situation gedrueckt werden - Kinder legen sich hin, eine Hand haelt
   etwas anderes.
   Der Block steht hier und nicht oben in der Sammelregel der Touch-Klassen
   (index.css ~597): .chip-btn setzt min-height 34px und steht weiter unten als
   jene Regel; bei gleicher Spezifitaet gewinnt die spaetere. Genau diese Falle
   hatte am selben Tag schon [hidden] erwischt. Gemessen am Telefon: vorher 34,
   jetzt 44. */
@media (hover: none) and (pointer: coarse) {
  .schlaf-chip,
  #schlaf-alle-start,
  #schlaf-alle-ende {
    min-height: 44px;
    min-width: 44px;
  }
}

/* UI-015: der eine Knopf "Da" / "Abgeholt".
   44px hoch, weil er an der Tuer getroffen werden muss - oft mit einer Hand,
   waehrend die andere ein Kind haelt. Er steht UEBER dem Auswahlfeld und
   ersetzt es nicht: Krank, Urlaub und abweichende Zeiten bleiben dort. */
.today-schnell {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-bottom: 0.35rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--transition-fast);
}

.today-schnell:hover:not(:disabled) {
  filter: brightness(0.95);
}

.today-schnell:disabled {
  opacity: 0.6;
  cursor: progress;
}

.today-schnell-da {
  background: var(--success);
  color: var(--white);
}

.today-schnell-weg {
  background: var(--bg-secondary);
  color: var(--text-main);
  border-color: var(--border-color);
}

/* Beide Zeiten stehen: Der Tag dieses Kindes ist abgeschlossen. Statt eines
   Knopfes ohne Wirkung steht hier, was erfasst ist. */
.today-schnell-fertig {
  display: block;
  min-height: 44px;
  margin-bottom: 0.35rem;
  padding: 0.6rem 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.today-row.is-away .today-name {
  color: var(--text-muted);
}

.today-row.has-conflict {
  background: var(--danger-light);
  border-color: var(--danger);
}

.today-cell {
  min-width: 0;
}

.today-cell-name {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.today-cell-name .status-dot {
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.today-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-main);
  line-height: 1.25;
}

.today-allergy {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  margin-top: 0.1rem;
}

.today-allergy-conflict {
  color: var(--danger);
  font-weight: 700;
}

.today-allergy-known {
  color: var(--danger);
  font-weight: 600;
}

.today-allergy-none {
  color: var(--text-muted);
}

.today-row .form-control {
  padding: 0.28rem 0.45rem;
  font-size: 0.82rem;
  width: 100%;
}

.today-row .form-control:disabled {
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .today-head {
    display: none;
  }

  .today-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem 0.6rem;
    padding: 0.7rem;
  }

  .today-cell-name,
  .today-cell-note {
    grid-column: 1 / -1;
  }

  .today-cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ink-2);
    margin-bottom: 0.2rem;
  }
}

/* Wer nicht da ist, braucht am Handy keine zwei gesperrten Zeitfelder:
   Bring- und Abholzeit sind fuer abwesende, kranke und im Urlaub befindliche
   Kinder ohnehin deaktiviert. Am Rechner bleiben sie stehen - dort kostet die
   Zeile nur eine Tabellenzeile und die Spalten sollen buendig bleiben. */
@media (max-width: 900px) {
  .today-row.is-away .today-cell-in,
  .today-row.is-away .today-cell-out {
    display: none;
  }

  .today-row.is-away .today-cell-status {
    grid-column: 1 / -1;
  }
}

/* Schmale Handys: Status ganze Breite, Bring- und Abholzeit nebeneinander */
@media (max-width: 560px) {
  .today-row {
    grid-template-columns: 1fr 1fr;
  }

  .today-cell-status {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Speiseplan (V1.26)
   Frühstück, Mittagessen und Snack bekommen jeweils eine eigene Farbe
   (--meal-color / --meal-bg / --meal-border), die die Komponenten setzen.
   Genutzt von admin.js und parent.js.
   ========================================================================== */

/* --- Kopfzeile: Ansichtswechsel und Zeitraum ---------------------------- */
.meal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

/* Tag/Woche/Monat ist ein Segment - Aussehen kommt aus der gemeinsamen
   Regel weiter oben, hier steht nichts Eigenes mehr. */

.meal-period {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.meal-period-label {
  font-weight: 700;
  color: var(--text-main);
  min-width: 12ch;
  text-align: center;
}

.meal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.meal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.meal-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.meal-today-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.8rem;
}

.meal-today-hint i {
  width: 14px;
  height: 14px;
}

/* --- Tagesansicht: drei klar getrennte Mahlzeiten ----------------------- */
.meal-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.2rem;
  /* stretch statt start: die drei Mahlzeiten stehen nebeneinander und
     sollen gleich hoch sein - sonst wirkt der Tag unruhig. */
  align-items: stretch;
}

.meal-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-top: 5px solid var(--meal-color, var(--primary));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Kopf als Raster: Icon, Titel und Knopf in einer Zeile, die Unterzeile
   darunter ueber die volle Breite. So bricht "nachmittags - 0 Gerichte"
   nicht mehr um und alle drei Koepfe sind exakt gleich hoch. */
.meal-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon title edit"
    ".    sub   sub";
  align-items: center;
  column-gap: 0.7rem;
  row-gap: 0.1rem;
  padding: 0.8rem 1rem;
  background: var(--meal-bg, var(--bg-secondary));
  border-bottom: 1px solid var(--meal-border, var(--border-color));
}

.meal-card-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--white);
  color: var(--meal-color, var(--primary));
  flex-shrink: 0;
}

.meal-card-icon i {
  width: 18px;
  height: 18px;
}

.meal-card-title {
  grid-area: title;
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--meal-color, var(--text-main));
  line-height: 1.2;
}

.meal-card-sub {
  grid-area: sub;
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.meal-card-edit {
  grid-area: edit;
  justify-self: end;
  flex-shrink: 0;
}

.meal-card-body {
  padding: 0.9rem 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.meal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  /* feste Grundhoehe: der gestrichelte Kasten ist in allen drei Mahlzeiten
     gleich gross - auch wenn der Hinweistext daneben umbricht oder eine
     Nachbarkarte voller Gerichte steht */
  flex: 0 0 auto;
  min-height: 130px;
  padding: 1.2rem 0.8rem;
  border: 2px dashed var(--meal-border, var(--border-color));
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.meal-empty small {
  font-weight: 400;
  font-size: 0.78rem;
}

.meal-empty:hover {
  background: var(--meal-bg, var(--bg-secondary));
}

/* --- Einzelnes Gericht --------------------------------------------------- */
.meal-item {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--meal-color, var(--primary));
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.meal-item-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.meal-item-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--meal-color, var(--primary));
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.meal-item-name {
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.35;
  word-break: break-word;
}

.meal-item-note {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.3rem;
}

.meal-item-note i {
  width: 13px;
  height: 13px;
}

/* --- Allergen-Chips und Etiketten --------------------------------------- */
.meal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.meal-chip {
  display: inline-block;
  /* 0,72rem waren 11,5px - unter der 12px-Grenze. Allergen-Kuerzel muessen
     lesbar sein. Gemessen 20.09.2026 in der Bibliothekstabelle. */
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  white-space: nowrap;
}

.meal-chip-ok {
  background: var(--success-light);
  color: var(--success);
  border-color: var(--success);
}

.meal-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  vertical-align: middle;
  white-space: nowrap;
}

/* --- Zusammenfassung und Konflikte -------------------------------------- */
.meal-summary {
  padding: 0.6rem 0.7rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.meal-summary-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.meal-summary-ok {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--success);
  background: var(--success-light);
  font-weight: 600;
}

.meal-summary-ok i {
  width: 15px;
  height: 15px;
}

.meal-conflict {
  padding: 0.7rem 0.8rem;
  background: var(--danger-light);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  color: var(--danger);
}

.meal-conflict-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.9rem;
}

.meal-conflict-title i {
  width: 16px;
  height: 16px;
}

.meal-conflict-list {
  list-style: none;
  margin: 0.4rem 0 0 0;
  padding: 0;
  font-size: 0.85rem;
}

.meal-conflict-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.15rem 0;
}

.meal-conflict-list li span {
  color: var(--danger);
  opacity: 0.85;
}

.meal-warning-inline {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--accent-dark);
  background: var(--accent-light);
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  margin: 0.4rem 0 0 0;
}

.meal-warning-inline i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* --- Details: Zutaten, Herkunft der Allergene, Nährwerte ---------------- */
.meal-detail-toggle {
  margin-top: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.meal-detail-box {
  margin-top: 0.5rem;
  padding: 0.7rem;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.meal-detail-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.25rem;
}

.meal-ingredients p {
  margin: 0 0 0.5rem 0;
}

.meal-detail-note {
  font-size: 0.72rem;
  font-style: italic;
}

.meal-evidence {
  list-style: none;
  margin: 0 0 0.5rem 0;
  padding: 0;
}

.meal-evidence li {
  padding: 0.1rem 0;
}

.meal-nutrition {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.4rem;
}

.meal-nutrition caption {
  caption-side: top;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
  padding-bottom: 0.25rem;
}

.meal-nutrition th,
.meal-nutrition td {
  border-bottom: 1px solid var(--border-color);
  padding: 0.2rem 0;
  font-size: 0.78rem;
  font-weight: 400;
  text-align: left;
}

.meal-nutrition td {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- Wochenansicht ------------------------------------------------------- */
.meal-week-scroll {
  overflow-x: auto;
  padding-bottom: 0.4rem;
}

/* Unter 700px (Wochenansicht: 640px, siehe unten) ist die Tabelle breiter
   als der Bildschirm und muss seitlich gescrollt werden - ohne Hinweis sieht
   das wie eine abgeschnittene Tabelle aus. Der Verlaufsschatten rechts zeigt,
   dass da noch mehr kommt. Wichtig: das Pseudo-Element haengt am scrollenden
   Container selbst (position:relative + overflow-x:auto) - es scrollt den
   Inhalt NICHT mit, sondern bleibt nur so lange rechts stehen, wie noch nicht
   gescrollt wurde. Reicht als Ersthinweis "hier geht es weiter", zeigt aber
   nicht dauerhaft an, dass noch Inhalt fehlt. */
@media (max-width: 700px) {
  .meal-month-scroll {
    position: relative;
  }
  .meal-month-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--bg-primary));
    pointer-events: none;
  }
}

/* Die Wochentabelle ist so breit, wie ihre Spalten es verlangen: 140px fuer
   die Mahlzeitenspalte plus 170px je Tag, bei fuenf Tagen also rund 990px
   (siehe .meal-week min-width: min-content weiter unten). Sie muss deshalb
   auf JEDER Breite unter etwa 1024px gescrollt werden - bis zum 20.09.2026
   stand hier 640px, weshalb auf dem Tablet gar kein Hinweis erschien,
   obwohl Donnerstag und Freitag ausserhalb des Bildes lagen. */
@media (max-width: 1024px) {
  .meal-week-scroll {
    position: relative;
  }
  .meal-week-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--bg-primary));
    pointer-events: none;
  }
}

.meal-week {
  display: grid;
  gap: 2px;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Bis 20.09.2026 stand hier ein fester Wert (640px). Das Raster wird aber
     aus admin.js/parent.js mit "140px repeat(n, minmax(170px, 1fr))"
     gesetzt und braucht bei fuenf Tagen rund 990px. Die Box blieb deshalb
     so breit wie der Scrollbehaelter, das Raster lief darueber hinaus und
     overflow: hidden hat es abgeschnitten - Donnerstag und Freitag waren
     auf Handy und Tablet nicht erreichbar, und .meal-week-scroll bekam nie
     eine Inhaltsbreite gemeldet, konnte also auch nicht scrollen.
     min-content ist genau die Summe der Mindestspalten (140 + n * 170) und
     waechst automatisch mit der Zahl der Tage mit. Als MINDEST-Breite
     bleibt das Strecken auf breiten Bildschirmen unveraendert. Bewusst
     nicht max-content: dort wuerden die 1fr-Spalten am laengsten
     Gerichtenamen haengen und die Tabelle unnoetig breit ziehen. */
  min-width: min-content;
}

.meal-week-corner {
  background: var(--bg-secondary);
}

.meal-week-dayhead {
  background: var(--bg-secondary);
  padding: 0.6rem 0.5rem;
  text-align: center;
  cursor: pointer;
  line-height: 1.25;
}

.meal-week-dayhead strong {
  display: block;
  font-size: 0.85rem;
  color: var(--text-main);
}

.meal-week-dayhead span {
  font-size: 0.75rem;
  color: var(--ink-2);
}

.meal-week-dayhead:hover {
  background: var(--primary-light);
}

.meal-week-dayhead.is-today {
  background: var(--primary-light);
  box-shadow: inset 0 -3px 0 var(--primary);
}

.meal-week-dayhead.is-closed {
  background: var(--bg-secondary);
  opacity: 0.75;
}

.meal-week-dayhead-closed {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warn-ink);
}

.meal-week-rowhead {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.7rem;
  background: var(--meal-bg, var(--bg-secondary));
  color: var(--meal-color, var(--text-main));
  font-weight: 700;
  font-size: 0.88rem;
  border-left: 4px solid var(--meal-color, var(--primary));
}

.meal-week-rowhead i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.meal-week-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
  text-align: left;
  min-height: 74px;
  padding: 0.5rem;
  background: var(--white);
  border: none;
  border-left: 3px solid transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.meal-week-cell:hover {
  background: var(--meal-bg, var(--bg-secondary));
  border-left-color: var(--meal-color, var(--primary));
}

.meal-week-cell.is-readonly {
  cursor: default;
}

.meal-week-cell.has-conflict {
  background: var(--danger-light);
  border-left-color: var(--danger);
}

.meal-week-cell.is-closed {
  background: var(--bg-secondary);
  align-items: center;
  justify-content: center;
}

.meal-week-cell.is-closed .meal-week-empty {
  font-weight: 700;
  color: var(--warn, var(--text-muted));
}

.meal-week-item {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
  word-break: break-word;
}

.meal-week-empty {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.meal-week-allergens {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: auto;
}

.meal-week-conflict {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--danger);
  line-height: 1.25;
}

/* --- Monatsansicht ------------------------------------------------------- */
.meal-month-scroll {
  overflow-x: auto;
  padding-bottom: 0.4rem;
}

.meal-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 2px;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-width: 840px;
}

.meal-month-weekday {
  background: var(--bg-secondary);
  padding: 0.4rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.meal-month-cell {
  background: var(--white);
  padding: 0.4rem;
  min-height: 92px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background var(--transition-fast);
}

.meal-month-cell:hover {
  background: var(--bg-secondary);
}

.meal-month-cell.outside {
  background: var(--bg-secondary);
  opacity: 0.55;
}

.meal-month-cell.is-today {
  box-shadow: inset 0 0 0 2px var(--primary);
}

.meal-month-cell.is-closed {
  background: var(--bg-secondary);
}

.meal-month-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.15rem;
}

.meal-month-warn {
  color: var(--danger);
  font-size: 0.85rem;
}

.meal-month-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.25;
  padding: 0.12rem 0.25rem;
  border-radius: 4px;
  background: var(--meal-bg, var(--bg-secondary));
  border-left: 3px solid var(--meal-color, var(--primary));
}

.meal-month-row.empty {
  background: transparent;
  border-left-color: var(--border-color);
  opacity: 0.6;
}

.meal-month-row.conflict {
  background: var(--danger-light);
  border-left-color: var(--danger);
}

.meal-month-row-closed {
  background: transparent;
  border-left-color: var(--warn, var(--border-color));
  font-weight: 700;
  color: var(--warn, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  padding: 0.12rem 0.25rem;
  border-left-width: 3px;
  border-left-style: solid;
}

.meal-month-tag {
  font-weight: 800;
  color: var(--meal-color, var(--text-muted));
  flex-shrink: 0;
}

.meal-month-row.conflict .meal-month-tag {
  color: var(--danger);
}

.meal-month-text {
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Editor-Dialog ------------------------------------------------------- */
.meal-editor-date {
  margin: 0 0 0.9rem 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.meal-editor-list {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.8rem;
  background: var(--bg-primary);
}

.meal-editor-list-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.meal-editor-empty {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  margin: 0.3rem 0;
}

.meal-editor-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
}

.meal-editor-row:last-of-type {
  border-bottom: none;
}

.meal-editor-note {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  padding: 0.3rem 0.5rem;
}

.meal-editor-rowbtns {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex-shrink: 0;
}

.meal-editor-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border-color);
}

/* --- Auswahlbereich im Editor ------------------------------------------- */
.meal-picker {
  margin-top: 1.2rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.meal-picker-tabs {
  display: flex;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.meal-picker-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.6rem 0.5rem;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.meal-picker-tab:hover {
  color: var(--text-main);
}

.meal-picker-tab.active {
  color: var(--primary-dark);
  background: var(--white);
  border-bottom-color: var(--primary);
}

.meal-picker-controls {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem;
  flex-wrap: wrap;
}

.meal-picker-controls .form-control {
  flex: 1;
  min-width: 180px;
}

.meal-picker-results {
  max-height: 320px;
  overflow-y: auto;
  padding: 0 0.7rem 0.7rem 0.7rem;
}

.meal-picker-count {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 0.2rem 0 0.5rem 0;
}

.meal-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.4rem;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.meal-option:hover {
  border-left-color: var(--primary);
  background: var(--primary-light);
}

.meal-option.has-conflict {
  border-left-color: var(--danger);
  background: var(--danger-light);
}

.meal-option.is-chosen {
  opacity: 0.75;
}

.meal-option-name {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-main);
  line-height: 1.3;
}

.meal-option-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.meal-option-conflict {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--danger);
  margin-top: 0.3rem;
  line-height: 1.3;
}

/* --- Freitext-Eingabe ---------------------------------------------------- */
.meal-free {
  padding: 0.8rem;
}

.meal-free-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0.4rem 0;
}

.meal-free-allergens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.35rem;
  padding: 0.6rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.meal-free-check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  cursor: pointer;
}

/* --- Eltern-Hinweis und Bausteinverwaltung ------------------------------ */
.meal-own-allergens {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--text-main);
  margin-bottom: 0.4rem;
}

.meal-own-allergens i {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--primary);
  margin-top: 0.1rem;
}

.meal-lib-intro {
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 70ch;
  margin: 0.5rem 0 1rem 0;
}

/* --- Kleine Bildschirme -------------------------------------------------- */
@media (max-width: 768px) {
  .meal-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .meal-viewswitch {
    justify-content: space-between;
  }

  .meal-viewswitch-btn {
    flex: 1;
    justify-content: center;
    padding: 0.4rem 0.5rem;
  }

  .meal-period {
    justify-content: space-between;
  }

  .meal-day-grid {
    grid-template-columns: 1fr;
  }

  .meal-card-edit span {
    display: none;
  }

  .meal-editor-actions {
    position: sticky;
    bottom: 0;
    background: var(--white);
  }
}

/* --- Druckansicht: Speiseplan zum Aushängen ----------------------------- */
@media print {
  .meal-toolbar,
  .meal-viewswitch,
  .meal-card-edit,
  .meal-detail-toggle {
    display: none !important;
  }

  .meal-card,
  .meal-week,
  .meal-month {
    box-shadow: none;
    break-inside: avoid;
  }

  .meal-week-scroll,
  .meal-month-scroll {
    overflow: visible;
  }
}

/* ---------------------------------------------------------------------------
   Textberichte (V1.30)
   Editor mit Baustein-Panel fuer Entwicklungsbericht, Lerngeschichte,
   Kita-Uebergabe und Nachweis der Bildungsdokumentation.
   --------------------------------------------------------------------------- */

/* Ein Abschnitt des Berichts im Editor */
.tb-section {
  border-top: 1px solid var(--border-color);
  padding-top: 0.9rem;
  margin-top: 0.9rem;
}
.tb-section:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.tb-section textarea {
  line-height: 1.55;
  resize: vertical;
  min-height: 4.5rem;
}

/* Die Auslassungsstelle: hier gehoert die eigene Beobachtung hin.
   Auf dem Bildschirm auffaellig, im Druck neutral - dort faellt sie
   ohnehin unangenehm auf, und eine gelbe Flaeche hilft dann nicht mehr. */
.tb-slot {
  background: #fff3cd;
  border-bottom: 1px dotted #b8860b;
  padding: 0 2px;
  border-radius: 2px;
}

/* Ein Baustein im Panel - eine ganze Zeile, damit er sich am Handy treffen laesst */
.tb-block {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  line-height: 1.55;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  padding: 0.65rem 0;
  cursor: pointer;
}
.tb-block:hover {
  color: var(--primary);
}
.tb-block:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media print {
  .tb-slot {
    background: transparent;
    border-bottom: none;
  }
}

/* ---------------------------------------------------------------------------
   Infoblatt "Die ersten Tage der Eingewoehnung" (V1.34)
   Ein Bauteil, drei Orte: die oeffentliche Seite (#/eingewoehnung), der
   Eltern-Tab "Eingewoehnung" und der Ausdruck. Deshalb sind die Regeln hier
   an die Klasse .infoblatt gebunden und nicht an eine Seite.
   --------------------------------------------------------------------------- */

/* Rahmen der oeffentlichen Seite - ohne Kopfzeile, ohne Navigation */
.infoblatt-page {
  min-height: 100vh;
  padding: 2rem 1rem 3rem;
  background: var(--bg-secondary);
  display: flex;
  justify-content: center;
}

.infoblatt-sheet {
  width: 100%;
  max-width: 780px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 2rem;
}

.infoblatt-brand {
  text-align: center;
  margin-bottom: 1.5rem;
}

.infoblatt-brand-img {
  max-width: 240px;
  height: auto;
}

/* --- Das Blatt selbst --- */

.infoblatt {
  color: var(--text-main);
  line-height: 1.6;
}

.infoblatt-head {
  border-bottom: 3px solid var(--primary-light);
  padding-bottom: 0.8rem;
  margin-bottom: 1.4rem;
}

.infoblatt-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0 0 0.25rem 0;
  line-height: 1.25;
}

.infoblatt-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
}

.infoblatt-section {
  margin-bottom: 1.8rem;
}

.infoblatt-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0 0 0.9rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Kurzer farbiger Strich vor jeder Zwischenueberschrift - gliedert das Blatt,
   ohne dass es nach Formular aussieht. */
.infoblatt-section-title::before {
  content: "";
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.infoblatt-intro {
  margin: 0 0 0.8rem 0;
  max-width: 68ch;
}

.infoblatt-intro:last-child {
  margin-bottom: 0;
}

/* --- Die fuenf Phasen --- */

.infoblatt-phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.infoblatt-phase {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
}

/* Die Phase, in der das eigene Kind gerade steht. Nur im Eltern-Bereich
   gesetzt - auf der oeffentlichen Seite gibt es kein Kind, also auch keine
   Hervorhebung. */
.infoblatt-phase.is-current {
  border-left-color: var(--primary);
  background: var(--primary-light);
}

.infoblatt-phase-no {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
}

.infoblatt-phase-body {
  flex: 1;
  min-width: 0;
}

.infoblatt-phase-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.infoblatt-phase-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0;
}

.infoblatt-phase-when {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.infoblatt-phase-now {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white);
  background: var(--primary);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}

.infoblatt-phase-what {
  margin: 0 0 0.5rem 0;
}

.infoblatt-phase-do {
  margin: 0;
  font-size: 0.93rem;
  color: var(--accent-dark);
}

.infoblatt-phase-do strong {
  color: var(--accent-dark);
}

/* --- Praktisches und Fragen --- */

.infoblatt-praxis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.8rem;
}

.infoblatt-praxis-item {
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
}

.infoblatt-praxis-item h4 {
  margin: 0 0 0.25rem 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent-dark);
}

.infoblatt-praxis-item p {
  margin: 0;
  font-size: 0.9rem;
}

.infoblatt-faq {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.infoblatt-faq-item {
  border-left: 3px solid var(--accent-blue);
  padding-left: 0.85rem;
}

.infoblatt-faq-item h4 {
  margin: 0 0 0.2rem 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.infoblatt-faq-item p {
  margin: 0;
  font-size: 0.93rem;
  max-width: 68ch;
}

.infoblatt-closing {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  max-width: 68ch;
}

/* --- Bedienelemente der oeffentlichen Seite --- */

.infoblatt-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-color);
}

.infoblatt-footer {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.infoblatt-footer a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.infoblatt-footer a:hover {
  text-decoration: underline;
}

/* --- Das Blatt im Eltern-Bereich --- */

.infoblatt-card {
  position: relative;
}

.infoblatt-card-actions {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

@media (max-width: 620px) {
  .infoblatt-card-actions {
    position: static;
    margin-bottom: 0.8rem;
  }
  .infoblatt-sheet {
    padding: 1.2rem;
  }
  .infoblatt-title {
    font-size: 1.35rem;
  }
}

/* --- Teilen-Dialog im Admin-Bereich --- */

.infoblatt-teilen-empfaenger {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.infoblatt-teilen-empfaenger strong {
  color: var(--text-main);
  font-size: 0.95rem;
}

.infoblatt-teilen-schalter {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.infoblatt-teilen-hinweis {
  margin: 0.45rem 0 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.infoblatt-teilen-hinweis:empty {
  display: none;
}

.infoblatt-teilen-aktionen {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
}

/* --- Druck ---
   Das Seitenformat (A4, 1,5 cm Rand) steht weiter oben in @page und gilt
   fuer jeden Ausdruck der App. Hier geht es nur darum, dass das Blatt allein
   auf dem Papier landet und die Kaesten nicht ueber Seitengrenzen brechen. */

.infoblatt-print-brand {
  display: none;
}

@media print {
  /* Sicherheitsnetz: Wird aus dem Eltern-Bereich gedruckt, sollen die
     Nachbarkarten (Phasenleiste, Tagebuch) nicht mitkommen - auch wenn
     dort spaeter einmal die Klasse no-print vergessen wird. */
  body.printing-infoblatt .card:not(.infoblatt-card) {
    display: none !important;
  }

  .infoblatt-page {
    padding: 0 !important;
    background: none !important;
    display: block !important;
  }

  .infoblatt-sheet {
    max-width: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .infoblatt-card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* Briefkopf nur auf dem Papier: am Bildschirm steht der Name schon in der
     Kopfzeile bzw. ueber dem Blatt. */
  .infoblatt-print-brand {
    display: block !important;
    text-align: center;
    margin-bottom: 0.8rem;
  }

  .infoblatt-print-brand img {
    max-width: 150px;
    height: auto;
  }

  .infoblatt {
    font-size: 10pt !important;
    line-height: 1.4 !important;
  }

  .infoblatt-title {
    font-size: 15pt !important;
  }

  .infoblatt-subtitle {
    font-size: 10pt !important;
  }

  .infoblatt-section {
    margin-bottom: 0.9rem !important;
  }

  .infoblatt-section-title {
    font-size: 11pt !important;
    margin-bottom: 0.5rem !important;
  }

  /* Kein Kasten darf mitten auf der Seitengrenze aufgeschnitten werden. */
  .infoblatt-phase,
  .infoblatt-praxis-item,
  .infoblatt-faq-item,
  .infoblatt-closing {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .infoblatt-phases {
    gap: 0.4rem !important;
  }

  /* Zweispaltig gesetzt spart auf Papier rund eine halbe Seite. Am Bildschirm
     bleibt es einspaltig - dort ist die Zeilenlaenge wichtiger als der Platz. */
  .infoblatt-faq,
  .infoblatt-praxis {
    columns: 2;
    column-gap: 0.9rem;
    display: block !important;
  }

  .infoblatt-faq-item,
  .infoblatt-praxis-item {
    margin-bottom: 0.5rem;
    -webkit-column-break-inside: avoid;
  }

  .infoblatt-intro {
    margin-bottom: 0.45rem !important;
  }

  .infoblatt-phase-what {
    margin-bottom: 0.3rem !important;
  }

  .infoblatt-phase {
    padding: 0.5rem 0.7rem !important;
  }

  /* Flaechige Hintergruende kosten Toner und bringen auf Papier nichts.
     Die Gliederung uebernehmen die Linien links. */
  .infoblatt-phase,
  .infoblatt-phase.is-current,
  .infoblatt-praxis-item,
  .infoblatt-closing {
    background: transparent !important;
  }

  .infoblatt-phase-no {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000;
    width: 22px;
    height: 22px;
  }

  .infoblatt-phase-now {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000;
  }

  .infoblatt-praxis-item {
    border: 1px solid #999;
    padding: 0.45rem 0.6rem !important;
  }

  .infoblatt-closing {
    border: 1px solid #999;
    padding: 0.5rem 0.7rem !important;
  }

  .infoblatt-actions,
  .infoblatt-footer,
  .infoblatt-brand {
    display: none !important;
  }
}

/* ==========================================================================
   AUFNAHMEBOGEN (V1.37)

   Zweistufiger Elternbogen im Eltern-Bereich. Bewusst ruhiger als der
   restliche Eltern-Bereich: Wer 40 Fragen beantwortet, soll lesen koennen,
   ohne dass jede Karte um Aufmerksamkeit ringt.
   ========================================================================== */

.intake-head {
  margin-bottom: 1.2rem;
}

.intake-stufen {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.intake-title {
  margin: 0 0 0.4rem 0;
  font-size: 1.35rem;
  color: var(--primary-dark);
}

.intake-lede {
  margin: 0 0 0.9rem 0;
  color: var(--text-muted);
  max-width: 62ch;
  line-height: 1.6;
}

/* Die Freiwilligkeit steht bewusst oben und optisch abgesetzt: Sie ist die
   Bedingung dafuer, dass die Einwilligung in die Gesundheitsangaben ueberhaupt
   wirksam ist (Art. 7 DSGVO, Kopplungsverbot). */
.intake-freiwillig {
  background: var(--accent-blue-light);
  border-left: 4px solid var(--accent-blue);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.intake-progress {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.intake-progress-bar {
  flex: 1 1 180px;
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 999px;
  overflow: hidden;
}

.intake-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.intake-progress-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.intake-done {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.6rem 0.8rem;
  background: var(--success-light);
  color: hsl(100, 40%, 28%);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  line-height: 1.5;
}

.intake-block {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 12px);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

.intake-block-title {
  margin: 0 0 0.3rem 0;
  font-size: 1.05rem;
  color: var(--primary-dark);
}

.intake-block-intro {
  margin: 0 0 1.1rem 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.intake-field {
  padding: 0.85rem 0;
  border-top: 1px solid var(--border-color);
}

.intake-field:first-of-type {
  border-top: none;
  padding-top: 0;
}

.intake-q {
  display: block;
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 0.5rem;
  color: var(--text-main);
}

.intake-hint {
  margin: -0.2rem 0 0.5rem 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Reine Hinweis- und Einwilligungstexte: kein Eingabefeld, aber lesbar
   abgesetzt, damit sie nicht wie uebersprungene Fragen wirken. */
.intake-note {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  margin: 0.85rem 0;
  font-size: 0.86rem;
  line-height: 1.6;
}

.intake-note p {
  margin: 0;
}

.intake-req {
  display: inline-block;
  background: var(--danger-light);
  color: hsl(0, 55%, 40%);
  /* 0,68rem waren 10,9px. "Pflichtangabe" ist eine Rechtsangabe im
     Aufnahmebogen und muss lesbar sein. Gemessen 20.09.2026. */
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 0.3rem;
}

.intake-field textarea.intake-input,
.intake-field select.intake-input,
.intake-field input[type="number"].intake-input,
.intake-field input[type="date"].intake-input {
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-main);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  resize: vertical;
}

.intake-field .intake-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.intake-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.intake-row > * {
  flex: 1 1 200px;
}

.intake-row .intake-num {
  flex: 0 0 110px;
}

.intake-choice {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.intake-radio,
.intake-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.88rem;
  line-height: 1.5;
  cursor: pointer;
  /* groessere Tippflaeche fuer die Chips im Aufnahmebogen (Handy) */
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.intake-radio:hover,
.intake-check:hover {
  border-color: var(--primary);
}

.intake-radio input,
.intake-check input {
  margin: 0.15rem 0 0 0;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.intake-check {
  display: flex;
  margin-bottom: 0.4rem;
}

.intake-multi {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Fehlender Masernnachweis - die einzige Stelle, an der der Bogen blockiert. */
.intake-missing {
  background: var(--danger-light);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  margin: 0.5rem -0.6rem;
}

.intake-foot {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  position: sticky;
  bottom: 0.5rem;
  z-index: 5;
}

.intake-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.intake-status {
  font-size: 0.82rem;
  color: var(--text-muted);
  min-height: 1.2em;
}

.intake-status.ok { color: hsl(100, 40%, 32%); }
.intake-status.err { color: var(--danger); }

@media (max-width: 640px) {
  .intake-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .intake-actions {
    margin-left: 0;
  }
  .intake-actions .btn {
    flex: 1 1 auto;
  }
}

/* Druckfassung: Der Bogen soll als Papierformular funktionieren, also mit
   sichtbaren Linien zum Ausfuellen statt leerer Eingabefelder. Das Seitenformat
   (A4, 1,5 cm Rand) steht weiter oben in @page und gilt fuer jeden Ausdruck. */
@media print {
  body.printing-intake .card:not(.intake-head) {
    display: none !important;
  }

  body.printing-intake .intake-head {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  body.printing-intake .intake-stufen,
  body.printing-intake .intake-progress,
  body.printing-intake .fortschritt,
  body.printing-intake .intake-foot {
    display: none !important;
  }

  body.printing-intake .intake-block {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 1.2rem;
    break-inside: auto;
  }

  body.printing-intake .intake-block-title {
    border-bottom: 1.5px solid #000;
    padding-bottom: 0.2rem;
    break-after: avoid;
  }

  body.printing-intake .intake-field {
    break-inside: avoid;
  }

  /* Leere Felder werden zu Schreiblinien - ein ausgedruckter leerer Kasten
     laedt niemanden zum Ausfuellen ein. */
  body.printing-intake .intake-field textarea.intake-input,
  body.printing-intake .intake-field select.intake-input,
  body.printing-intake .intake-field input[type="number"].intake-input,
  body.printing-intake .intake-field input[type="date"].intake-input {
    border: none !important;
    border-bottom: 1px dotted #666 !important;
    border-radius: 0 !important;
    background: none !important;
    padding: 0.15rem 0 !important;
    min-height: 1.6rem;
  }

  body.printing-intake .intake-radio,
  body.printing-intake .intake-check {
    border: none !important;
    background: none !important;
    padding: 0.1rem 0.5rem 0.1rem 0 !important;
  }
}

/* Aufnahmebogen - Leseansicht im Admin-Bereich (V1.37) */

.intake-admin-stufe {
  border-top: 1px solid var(--line);
  padding: 0.8rem 0;
}

.intake-admin-stufe:first-of-type {
  border-top: none;
  padding-top: 0;
}

.intake-admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* Stand je Stufe unter der Ueberschrift - Farbe nach Rolle (DESIGN.md):
   gruen = abgeschickt, gelb = in Arbeit, grau = noch nichts. */
.intake-admin-stand { font-size: var(--fs-xs); margin-top: 2px; color: var(--ink-2); }
.intake-admin-stand-fertig { color: var(--success-ink); }
.intake-admin-stand-arbeit { color: var(--warn-ink); }

.intake-admin-answers {
  margin-top: 0.9rem;
  border-top: 1px dashed var(--line);
  padding-top: 0.8rem;
}

.intake-admin-block {
  margin: 1rem 0 0.5rem 0;
  font-size: 0.9rem;
  color: var(--primary-ink);
}

.intake-admin-block:first-child {
  margin-top: 0;
}

.intake-admin-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 1.3fr;
  gap: 0.5rem 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--bg-2);
  font-size: 0.86rem;
  line-height: 1.55;
}

.intake-admin-q {
  color: var(--ink-2);
}

.intake-admin-a {
  color: var(--ink);
}

/* Unbeantwortete Fragen bleiben sichtbar: Ein halb ausgefuellter Bogen darf
   nicht wie ein vollstaendiger aussehen. */
.intake-admin-row.leer .intake-admin-a {
  color: var(--ink-2);
  font-style: italic;
}

@media (max-width: 700px) {
  .intake-admin-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* Aufnahmebogen im Druck: zwei Ausblendungen zurueckholen (V1.40)

   Die globale Druckregel oben (".no-print, button, select { display: none
   !important }") trifft den Bogen an zwei Stellen hart:

   1. Der Kopf trug frueher "no-print" und verschwand samt Titel und dem
      Hinweis auf die Freiwilligkeit - genau der Satz, der auf einem
      Papierformular am wenigsten fehlen darf. Das "no-print" ist jetzt aus
      dem Markup raus; die Bedienelemente darin (Stufenwahl, Fortschritt)
      blendet der Block weiter oben einzeln aus.

   2. "select" htte sieben Fragen unsichtbar gemacht - Schlafposition,
      Trinkgefaess, Loeffel, Sorgerecht, Wesensart, Rueckmeldungen und die
      Art des Masernnachweises. Sie werden hier gezielt zurueckgeholt.

   Die Selektoren stehen bewusst spezifischer als die globale Regel und mit
   !important, weil die globale Regel selbst !important benutzt. */
@media print {
  .intake-field select.intake-input,
  .intake-row select.intake-input {
    display: block !important;
    width: 100% !important;
    border: none !important;
    border-bottom: 1px dotted #666 !important;
    border-radius: 0 !important;
    background: none !important;
    padding: 0.15rem 0 !important;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Der Kopf bleibt im Ausdruck stehen, auch wenn ueber Strg+P statt ueber
     den Drucken-Knopf gedruckt wird (dann fehlt body.printing-intake). */
  .intake-head {
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 1rem;
  }

  .intake-head .intake-stufen,
  .intake-head .intake-progress {
    display: none !important;
  }

  /* Der Freiwilligkeitshinweis ist der wichtigste Satz auf dem Blatt. */
  .intake-freiwillig {
    border: 1px solid #000 !important;
    background: none !important;
    break-inside: avoid;
  }
}

/* ---------------------------------------------------------------------------
   Mitbringliste im Infoblatt (V1.38)
   Abhakbare Packliste. Die Haken liegen im Browser des Lesenden
   (localStorage), nicht auf dem Server - siehe src/eingewoehnung.js.
   --------------------------------------------------------------------------- */

.mitbring-hinweis {
  margin: 0 0 0.9rem 0;
  max-width: 68ch;
  font-size: 0.93rem;
}

.mitbring-leiste {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-color);
}

.mitbring-zaehler {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-dark);
}

.mitbring-reset {
  font: inherit;
  font-size: 0.8rem;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.mitbring-reset:hover {
  color: var(--primary);
}

.mitbring-gruppe {
  margin-bottom: 1.2rem;
}

.mitbring-gruppe-titel {
  margin: 0 0 0.5rem 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.mitbring-gruppe-hint {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.mitbring-gruppe-intro {
  margin: 0 0 0.6rem 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 68ch;
}

.mitbring-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mitbring-posten {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.35rem;
}

.mitbring-posten:last-child {
  border-bottom: none;
}

.mitbring-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  padding: 0.15rem 0;
}

/* Das echte Kontrollkaestchen bleibt bedienbar und fuer Vorleseprogramme
   sichtbar, wird aber nicht gezeichnet - gezeichnet wird .mitbring-kasten. */
.mitbring-haken {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.mitbring-kasten {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  border: 2px solid var(--border-color);
  border-radius: 5px;
  background: var(--white);
  position: relative;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.mitbring-haken:checked + .mitbring-kasten {
  background: var(--primary);
  border-color: var(--primary);
}

.mitbring-haken:checked + .mitbring-kasten::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.mitbring-haken:focus-visible + .mitbring-kasten {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

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

.mitbring-kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}

.mitbring-name {
  font-weight: 600;
  font-size: 0.94rem;
}

.mitbring-menge {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.mitbring-art {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.mitbring-art-bleibt {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.mitbring-art-taeglich {
  background: var(--info-soft);
  color: var(--info-ink);
}

.mitbring-art-wenn {
  background: var(--bg-secondary);
  color: var(--text-muted);
}

.mitbring-note {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* Abgehakt: durchgestrichen und zurueckgenommen, damit man auf einen Blick
   sieht, was noch fehlt. */
.mitbring-haken:checked ~ .mitbring-text .mitbring-name {
  text-decoration: line-through;
  color: var(--text-muted);
}

.mitbring-haken:checked ~ .mitbring-text {
  opacity: 0.6;
}

.mitbring-nachsatz {
  margin: 1rem 0 0 0;
  padding: 0.75rem 0.9rem;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  max-width: 68ch;
}

@media print {
  /* "Nur die Liste drucken": alles ausser der Packliste faellt weg. Der
     Briefkopf bleibt - ein Zettel ohne Absender hilft niemandem. */
  body.printing-mitbringliste .infoblatt-section:not(.infoblatt-section-mitbring),
  body.printing-mitbringliste .infoblatt-head,
  body.printing-mitbringliste .infoblatt-closing,
  body.printing-mitbringliste .card:not(.infoblatt-card) {
    display: none !important;
  }

  /* Auf Papier zaehlt die Liste, nicht die Erklaerung. Die Notizen bleiben
     drin, aber klein - sie sind der Grund, warum die Liste ueberhaupt taugt. */
  /* Eine ganze Gruppe darf umbrechen. Frueher stand hier break-inside: avoid,
     aber die Gruppen sind fast seitenhoch: Passte eine nicht mehr aufs Blatt,
     sprang sie komplett auf das naechste und liess davor eine halbe Seite
     leer - beim Infoblatt kam dadurch eine sechste Seite heraus, auf der nur
     der Schlusssatz stand. Zusammengehalten wird jetzt das, was wirklich
     zusammengehoert: der einzelne Posten (Regel darunter) und die
     Gruppenueberschrift mit dem Anfang ihrer Liste. */
  .mitbring-gruppe {
    margin-bottom: 0.6rem !important;
  }

  .mitbring-gruppe-titel {
    break-after: avoid;
    page-break-after: avoid;
  }

  .mitbring-posten {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Leeres Kaestchen zum Ankreuzen mit dem Stift. Ein gesetzter Haken wird
     auch gedruckt - wer die Liste vom Bildschirm aus abarbeitet, will ihn
     auf dem Ausdruck wiederfinden. */
  .mitbring-kasten {
    border: 1px solid #000 !important;
    border-radius: 2px;
    width: 12px;
    height: 12px;
    background: transparent !important;
  }

  .mitbring-haken:checked + .mitbring-kasten {
    background: transparent !important;
    border-color: #000 !important;
  }

  .mitbring-haken:checked + .mitbring-kasten::after {
    border-color: #000 !important;
    left: 3px;
    top: -1px;
    width: 4px;
    height: 8px;
  }

  .mitbring-haken:checked ~ .mitbring-text {
    opacity: 1 !important;
  }

  .mitbring-haken:checked ~ .mitbring-text .mitbring-name {
    text-decoration: none !important;
    color: inherit !important;
  }

  .mitbring-art {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #999;
    padding: 0 0.35rem;
  }

  .mitbring-nachsatz {
    background: transparent !important;
    border: 1px solid #999;
  }

  .mitbring-note {
    font-size: 8.5pt !important;
  }
}


/* ==========================================================================
   Angebote - die Bibliothek unter Paedagogik
   ==========================================================================
   Eigener Abschnitt statt Inline-Stilen: Die Detailseite wird gedruckt und an
   das Regal gehaengt, und ein Druckbild laesst sich nur ueber ein Stylesheet
   ordentlich hinbekommen. Die Bereichsfarbe kommt jeweils als --ang-farbe
   vom Element selbst, damit dieselbe Klasse in zwoelf Farben funktioniert. */

.ang-intro {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  /* keine Breitenbremse mehr: soll wie der Rest der Seite die volle Breite
     nutzen - bei Ersatzschrift brach der Satz sonst nach zwei Dritteln um. */
  margin: -0.4rem 0 1.6rem;
}

/* --- Die Grundsaetze, die fuer alle Angebote gelten --- */
.ang-grundsaetze {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  margin-bottom: 1.4rem;
}

.ang-grundsaetze > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--primary-dark);
  user-select: none;
}

.ang-grundsaetze > summary::-webkit-details-marker { display: none; }
.ang-grundsaetze > summary i { width: 17px; height: 17px; flex-shrink: 0; }

.ang-grundsaetze > summary::after {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition-fast);
}

.ang-grundsaetze[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.ang-grundsaetze-inhalt {
  padding: 0 1.2rem 1rem;
  border-top: 1px dashed var(--border-color);
  margin-top: 0.1rem;
}

.ang-grundsaetze-inhalt ol {
  margin: 0.9rem 0 0;
  padding-left: 1.3rem;
  columns: 2;
  column-gap: 2rem;
}

.ang-grundsaetze-inhalt li {
  margin-bottom: 0.7rem;
  line-height: 1.6;
  font-size: 0.9rem;
  break-inside: avoid;
}

.ang-grundsaetze-inhalt strong { color: var(--primary-dark); }

.ang-grundsaetze-quellen {
  margin: 0.6rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border-color);
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.ang-grundsaetze-quellen a { color: var(--text-muted); }

@media (max-width: 820px) {
  .ang-grundsaetze-inhalt ol { columns: 1; }
}

/* --- Vorschlag fuer heute --- */
.ang-heute {
  background: linear-gradient(135deg, hsl(38, 60%, 96%), hsl(28, 55%, 93%));
  border: 1px solid hsl(30, 45%, 84%);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.3rem 1.4rem;
  margin-bottom: 1.5rem;
}

.ang-heute-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.ang-heute-kopf h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0 0 0.2rem;
}

.ang-heute-kopf p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ang-heute-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

/* --- Filter --- */
.ang-filter {
  padding: 1rem 1.1rem;
  margin-bottom: 1.2rem;
}

.ang-suchzeile {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}

.ang-suchfeld {
  position: relative;
  flex: 1 1 280px;
  display: flex;
  align-items: center;
}

.ang-suchfeld > i {
  position: absolute;
  left: 0.8rem;
  width: 17px;
  height: 17px;
  color: var(--text-muted);
  pointer-events: none;
}

.ang-suchfeld input {
  width: 100%;
  padding: 0.62rem 2.4rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-primary);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text-main);
}

.ang-suchfeld input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.ang-suchfeld button {
  position: absolute;
  right: 0.55rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  /* groessere Tippflaeche zum Suchfeld-Loeschen (Handy) */
  padding: 0.5rem;
}

.ang-suchfeld button i { width: 15px; height: 15px; }

/* Schnellfilter: vier Schalter und die Altersauswahl in einer Zeile, am
   Handy umbrechend. Was hier nicht steht, liegt hinter "Mehr Filter". */
.ang-schnell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.ang-filter-zeile {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.35rem 0;
}

.ang-filter-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 5.6rem;
}

.ang-schalter {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Die Filterknoepfe der Angebote gehoeren zur Chip-Knopf-Familie weiter
   oben - hier steht nichts Eigenes mehr. */

.ang-auswahl {
  min-height: 34px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--white);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  max-width: 15rem;
}

/* Aufklapper "Mehr Filter" - darin nur noch der Ansatz (Montessori oder
   andere Schule). Vorbereitung, Material, Alter und Ort stehen als
   Schnellfilter darueber; Jahreszeit gibt es nicht mehr (313 von 364
   Angeboten sind ganzjaehrig, der Filter nahm fast nichts weg). */
.ang-mehr > summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-muted);
  user-select: none;
}

.ang-mehr > summary::-webkit-details-marker { display: none; }
.ang-mehr > summary i { width: 15px; height: 15px; }
.ang-mehr > summary b { color: var(--primary-dark); font-weight: 700; }
.ang-mehr > summary:hover { color: var(--primary-dark); }

.ang-mehr > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 0.1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition-fast);
}

.ang-mehr[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* --- Bereichskacheln --- */
.ang-bereiche {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}

.ang-bereich {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.85rem 0.9rem;
  border: 1.5px solid var(--ang-rand);
  border-radius: var(--radius-sm);
  background: var(--ang-hell);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Hover zeigt sich als Linie, nicht als Sprung - eine Kachelreihe, die
   unter der Maus wandert, ist auf einer Verwaltungsoberflaeche nur unruhig. */
.ang-bereich:hover { border-color: var(--ang-farbe); box-shadow: var(--shadow-1); }

.ang-bereich.aktiv {
  background: var(--ang-farbe);
  border-color: var(--ang-farbe);
  box-shadow: var(--shadow-sm);
}

.ang-bereich.aktiv .ang-bereich-name,
.ang-bereich.aktiv .ang-bereich-kurz,
.ang-bereich.aktiv i { color: var(--white); }

.ang-bereich.aktiv .ang-bereich-zahl {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ang-farbe);
}

.ang-bereich.leer { opacity: 0.42; }

.ang-bereich i {
  width: 19px;
  height: 19px;
  color: var(--ang-farbe);
  margin-bottom: 0.15rem;
}

.ang-bereich-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ang-farbe);
  line-height: 1.25;
}

.ang-bereich-kurz {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.ang-bereich-zahl {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  min-width: 1.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--ang-farbe);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

/* --- Ergebnisliste --- */
.ang-ergebnis-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin: 0 0 0.9rem;
}

/* Rechts in der Ergebniszeile: "Filter zuruecksetzen" (nur wenn etwas
   wirkt) und die Sortierung. Sortieren ist kein Filtern - deshalb steht
   es bei den Ergebnissen und nicht in der Filterkarte. */
.ang-ergebnis-werkzeuge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-left: auto;
}

.ang-ergebnis-kopf h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0;
}

.ang-ergebnis-kopf h3 span {
  font-weight: 500;
  color: var(--text-muted);
}

.ang-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 1.1rem;
}

.ang-gitter-klein {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.85rem;
}

/* --- Karte --- */
.ang-karte {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.ang-karte:hover,
.ang-karte:focus-visible {
  box-shadow: var(--shadow-2);
  border-color: var(--ang-rand);
}

.ang-karte:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.ang-merk:focus-visible,
.ang-schalter-knopf:focus-visible,
.ang-bereich:focus-visible,
.ang-meilenstein:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.ang-karte-bild {
  position: relative;
  background: var(--ang-hell);
  border-bottom: 1px solid var(--ang-rand);
}

.ang-karte-bild svg { display: block; width: 100%; height: auto; }

.ang-sofort {
  position: absolute;
  left: 0.55rem;
  top: 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.16rem 0.48rem;
  border-radius: 999px;
  background: var(--success);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.ang-merk {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ang-merk:hover { color: var(--primary); border-color: var(--primary); }

.ang-merk.ist-gemerkt {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

/* Tippflaeche 44px, ohne den Kreis optisch zu vergroessern: ein
   unsichtbares Pseudo-Element ueberlagert den 28px-Kreis mit einer
   44x44px-Flaeche. Klicks/Taps darin treffen weiterhin den Knopf, weil das
   Pseudo-Element Teil seiner eigenen Box ist - der Kreis selbst bleibt
   unveraendert (auch in :hover/.ist-gemerkt oben). */
.ang-merk::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.ang-karte-text {
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
  padding: 0.75rem 0.85rem 0.85rem;
  flex: 1;
}

.ang-karte-bereich {
  /* 0,7rem waren 11,2px. Die Bereichszeile steht auf jeder der 372 Karten,
     sie muss lesbar sein. Gemessen 20.09.2026. */
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ang-farbe);
}

.ang-karte-text h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  line-height: 1.25;
}

.ang-karte-text p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
  flex: 1;
}

.ang-karte-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-color);
  font-size: 0.74rem;
  color: var(--text-muted);
}

.ang-karte-fuss span { display: inline-flex; align-items: center; gap: 0.24rem; }
.ang-karte-fuss .ist-sofort { color: var(--success); font-weight: 600; }

.ang-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.ang-fussnote {
  margin: 2rem 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 70ch;
}

/* --- Detailseite --- */
.ang-detail { max-width: 1000px; }

.ang-detail-leiste {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.ang-detail-werkzeug { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Der Weg zurueck in die Bibliothek ist der meistgebrauchte Knopf der
   Detailseite - er bekommt deshalb das helle Rosa des Hauses und hebt sich
   damit von den Werkzeugen daneben ab, ohne so laut zu sein wie ein
   Hauptknopf. */
#ang-zurueck.btn-secondary {
  background-color: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
}

#ang-zurueck.btn-secondary:hover {
  background-color: hsl(328, 60%, 90%);
}
.ang-detail-werkzeug .ist-gemerkt { background: var(--primary); border-color: var(--primary); color: var(--white); }

.ang-detail-kopf {
  display: grid;
  grid-template-columns: minmax(230px, 340px) 1fr;
  gap: 1.6rem;
  align-items: start;
  margin-bottom: 1.6rem;
}

.ang-detail-bild {
  background: var(--ang-hell);
  border: 1px solid var(--ang-rand);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ang-detail-bild svg { display: block; width: 100%; height: auto; }

.ang-detail-bereich {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ang-farbe);
}

.ang-detail-titel h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0.35rem 0 0.2rem;
  line-height: 1.15;
}

.ang-detail-untertitel {
  font-size: 1.02rem;
  color: var(--text-muted);
  margin: 0 0 1.1rem;
  line-height: 1.45;
}

.ang-eckdaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 0.7rem 1rem;
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.ang-eckdaten > div { display: flex; flex-direction: column; gap: 0.1rem; }

.ang-eckdaten dt {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.ang-eckdaten dt i { width: 13px; height: 13px; }

.ang-eckdaten dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
}

.ang-block {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem 1.25rem;
  margin-bottom: 1.1rem;
}

.ang-block h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0 0 0.7rem;
}

.ang-block h3 i { width: 18px; height: 18px; color: var(--ang-farbe); }

.ang-block-nebentitel {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
}

.ang-block p { margin: 0 0 0.5rem; line-height: 1.65; color: var(--text-main); }
.ang-block p:last-child { margin-bottom: 0; }

.ang-warum {
  border-left: 4px solid var(--ang-farbe);
  background: var(--ang-hell);
}

.ang-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.1rem;
  align-items: start;
}

.ang-spalten > .ang-block { margin-bottom: 1.1rem; }

/* Material */
.ang-material { list-style: none; margin: 0; padding: 0; }

.ang-material li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0 0.5rem 1.4rem;
  border-bottom: 1px dashed var(--border-color);
  position: relative;
}

.ang-material li:last-child { border-bottom: none; }

.ang-material li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.95rem;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ang-farbe);
}

.ang-material-was { font-weight: 600; color: var(--text-main); }
.ang-material-hinweis { font-size: 0.84rem; color: var(--text-muted); line-height: 1.45; }

.ang-ersatz {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.8rem !important;
  padding: 0.65rem 0.8rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  line-height: 1.55;
}

.ang-ersatz i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.15rem; color: var(--text-muted); }
.ang-ersatz span { min-width: 0; }

/* Angebote ohne jedes Material. Steht an der Stelle, an der sonst die Liste
   steht, und soll dort nicht wie eine fehlende Angabe aussehen, sondern wie
   eine Zusage: Hier ist wirklich nichts zu holen. */
.ang-ohne-material {
  margin: 0 !important;
  padding: 0.7rem 0.85rem;
  background: var(--bg-secondary);
  border-left: 3px solid var(--ang-farbe, var(--primary));
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.6;
}

.ang-ohne-material strong { color: var(--text-main); }

/* Schritte */
.ang-schritte { list-style: none; counter-reset: ang-schritt; margin: 0; padding: 0; }

.ang-schritte li {
  counter-increment: ang-schritt;
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0;
  align-items: flex-start;
}

.ang-schritte li::before {
  content: counter(ang-schritt);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ang-hell);
  border: 1.5px solid var(--ang-rand);
  color: var(--ang-farbe);
  font-size: 0.82rem;
  font-weight: 700;
}

.ang-schritt-text { line-height: 1.6; padding-top: 0.18rem; }

.ang-darbietung { border: 1.5px solid var(--ang-rand); background: linear-gradient(180deg, var(--ang-hell), var(--white) 60%); }

.ang-darbietung-hinweis {
  font-size: 0.86rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 0.8rem !important;
  line-height: 1.55;
}

.ang-darbietung .ang-schritte li::before { background: var(--white); }

.ang-fehlerkontrolle { border-left: 4px solid var(--success); }
.ang-fehlerkontrolle h3 i { color: var(--success); }

.ang-punkte { margin: 0; padding-left: 1.2rem; }
.ang-punkte li { margin-bottom: 0.4rem; line-height: 1.6; }
.ang-punkte li:last-child { margin-bottom: 0; }

.ang-leichter { border-left: 4px solid var(--accent-blue); }
.ang-leichter h3 i { color: var(--accent-blue); }
.ang-schwerer { border-left: 4px solid var(--accent); }
.ang-schwerer h3 i { color: var(--accent); }

/* Sprache */
.ang-sprache-titel {
  font-size: 0.75rem !important;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0.9rem 0 0.4rem !important;
}

.ang-wortreihe { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.ang-wort {
  padding: 0.24rem 0.65rem;
  border-radius: 999px;
  background: var(--ang-hell);
  border: 1px solid var(--ang-rand);
  color: var(--ang-farbe);
  font-size: 0.85rem;
  font-weight: 600;
}

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

.ang-saetze li {
  padding: 0.35rem 0 0.35rem 0.9rem;
  border-left: 2.5px solid var(--ang-rand);
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-main);
}

.ang-meilenstein {
  padding: 0.24rem 0.65rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px dashed var(--primary);
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ang-meilenstein:hover { background: var(--primary); color: var(--white); border-style: solid; }

/* Sicherheit */
.ang-sicherheit { border-left: 4px solid var(--accent); background: hsl(38, 70%, 97%); }
.ang-sicherheit h3 i { color: var(--accent-dark); }
.ang-sicherheit.ton-danger { border-left-color: var(--danger); background: var(--danger-light); }
.ang-sicherheit.ton-danger h3 i { color: var(--danger); }
.ang-sicherheit.ton-normal { border-left-color: var(--border-color); background: var(--bg-secondary); }
.ang-aufsicht { font-size: 0.93rem; }

/* Quellen */
.ang-quellen ul { list-style: none; margin: 0; padding: 0; }

.ang-quellen li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--border-color);
  font-size: 0.88rem;
}

.ang-quellen li:last-child { border-bottom: none; }
.ang-quellen a { color: var(--primary-dark); font-weight: 600; text-decoration: none; }
.ang-quellen a:hover { text-decoration: underline; }
.ang-quelle-hrsg { color: var(--text-muted); font-size: 0.82rem; }
.ang-quelle-datum { color: var(--text-muted); font-size: 0.76rem; }

@media (max-width: 700px) {
  .ang-detail-kopf { grid-template-columns: 1fr; }
  .ang-filter-label { min-width: 0; }
  /* Am Handy soll die Altersauswahl eine eigene Zeile bekommen statt halb
     abgeschnitten neben einem Chip zu haengen. */
  .ang-schnell .ang-auswahl { max-width: 100%; flex: 1 1 100%; }
  .ang-ergebnis-werkzeuge { margin-left: 0; width: 100%; }
  .ang-heute { padding: 1rem 0.9rem 1.1rem; }

  /* Zwoelf Bereiche untereinander waeren auf dem Handy eine halbe Bildschirm-
     laenge nur zum Scrollen. Zwei Spalten passen bei 375 px noch gut. */
  .ang-bereiche { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .ang-bereich { padding: 0.7rem 0.7rem 0.75rem; }
  .ang-bereich-name { font-size: 0.85rem; }
  .ang-bereich-kurz { font-size: 0.7rem; }
}

/* --- Druck: die Anleitung soll ans Regal --- */
@media print {
  .ang-detail { max-width: 100%; }

  .ang-detail-kopf {
    grid-template-columns: 34% 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
    page-break-after: avoid;
  }

  .ang-detail-titel h2 { font-size: 18pt !important; }
  .ang-detail-untertitel { font-size: 11pt !important; margin-bottom: 0.6rem; }
  .ang-detail-bild { border: 1px solid #999 !important; background: #fff !important; }
  .ang-eckdaten { background: transparent !important; border: 1px solid #999; padding: 0.5rem; }

  .ang-block {
    border: none !important;
    border-left: 3px solid #999 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.3rem 0 0.3rem 0.7rem !important;
    margin-bottom: 0.7rem !important;
    page-break-inside: avoid;
  }

  .ang-block h3 { font-size: 12pt !important; color: #000 !important; margin-bottom: 0.35rem; }
  /* Die Symbole bleiben auch auf Papier: Sie gliedern das Blatt, das an der
     Regalwand haengt, schneller als jede Ueberschrift. Nur die Farbe geht raus.
     Beide Selektoren noetig - lucide ersetzt das <i> beim Zeichnen durch <svg>. */
  .ang-block h3 i, .ang-block h3 svg,
  .ang-eckdaten dt i, .ang-eckdaten dt svg { color: #000 !important; }
  .ang-warum, .ang-darbietung { background: transparent !important; }
  .ang-darbietung { border-left: 3px solid #000 !important; }
  .ang-sicherheit { border-left: 3px solid #000 !important; background: transparent !important; }
  .ang-sicherheit p { font-weight: 500; }

  .ang-schritte li::before {
    background: transparent !important;
    border: 1px solid #000 !important;
    color: #000 !important;
    width: 20px; height: 20px; font-size: 9pt;
  }

  .ang-wort, .ang-meilenstein {
    background: transparent !important;
    border: 1px solid #999 !important;
    color: #000 !important;
  }

  /* Die Meilensteine sind Schaltflaechen, und die globale Druckregel weiter
     oben blendet JEDES button aus. Auf dem Blatt fehlte dadurch unter der
     Ueberschrift "Zahlt ein auf diese Meilensteine" der Inhalt - die
     Ueberschrift stand allein da. */
  .ang-meilenstein { display: inline-block !important; }

  /* Ohne diese Regel bliebe der Kasten auf Papier ein grauer Block ohne
     Kontur - das Blatt haengt an der Regalwand und wird schwarzweiss
     gedruckt. */
  .ang-ohne-material {
    background: transparent !important;
    border-left: 2px solid #999 !important;
    padding: 0.2rem 0 0.2rem 0.6rem;
  }

  .ang-spalten { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .ang-quellen { font-size: 8.5pt; }
  .ang-quellen a { color: #000 !important; text-decoration: none !important; }
}

/* ==========================================================================
   Rückblick (V1.54) - Tages-, Wochen- und Monatsübersicht
   --------------------------------------------------------------------------
   Genutzt von src/components/rueckblick.js (Admin) und dem Reiter "Rückblick"
   in parent.js. Die Farbe eines Bildungsbereichs kommt als --rb-area /
   --rb-area-bg aus dem JavaScript (src/rueckblick.js) - so gibt es die zehn
   Bereichsfarben genau einmal im Projekt und nicht zusätzlich hier.
   ========================================================================== */

/* --- Kopfzeile: Ansichtswechsel und Zeitraum ---------------------------- */
.rb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

/* Derselbe Umschalter wie im Speiseplan - siehe .segment weiter oben. */

.rb-period {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.rb-period-label {
  font-weight: 600;
  color: var(--text-main);
  min-width: 12rem;
  text-align: center;
}

/* --- Kleinkram ---------------------------------------------------------- */
.rb-muted { color: var(--text-muted); font-size: 0.88rem; }
.rb-warn { color: var(--danger); font-weight: 600; }

.form-hint {
  display: block;
  margin-top: 0.35rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.rb-skeleton {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.2rem;
  padding: 2rem;
  justify-content: center;
  color: var(--text-muted);
  background: var(--white);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
}

.rb-skeleton i { animation: rb-spin 1.1s linear infinite; }
@keyframes rb-spin { to { transform: rotate(360deg); } }

.rb-hinweis {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.5;
}

.rb-hinweis-warn {
  background: var(--accent-light);
  border: 1px solid var(--accent);
  color: var(--accent-dark);
}

.rb-hinweis code {
  background: rgba(0, 0, 0, 0.06);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

/* --- Chips (Wetter, Stimmung, Sichtbarkeit) ----------------------------- */
.rb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.rb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  white-space: nowrap;
}

.rb-chip i { width: 13px; height: 13px; }
.rb-chip-emoji { font-size: 0.95rem; line-height: 1; }
.rb-chip-gruen { background: var(--success-light); color: hsl(100, 40%, 28%); border-color: hsl(100, 30%, 70%); }
.rb-chip-blau { background: var(--accent-blue-light); color: hsl(195, 55%, 28%); border-color: hsl(195, 40%, 72%); }
.rb-chip-grau { background: var(--bg-secondary); color: var(--text-muted); }

/* --- Bildungsbereich-Etikett -------------------------------------------- */
.rb-area-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--rb-area-bg, var(--bg-secondary));
  color: var(--rb-area, var(--text-muted));
  border: 1px solid var(--rb-area, var(--border-color));
  white-space: nowrap;
}

.rb-area-chip i { width: 13px; height: 13px; flex-shrink: 0; }
.rb-area-chip-sm { font-size: 0.75rem; padding: 0.18rem 0.5rem; }
.rb-area-chip-sm b { font-weight: 800; }

.rb-area-chip-off {
  opacity: 0.65;
  border-style: dashed;
  background: transparent;
}

/* --- Tagesansicht ------------------------------------------------------- */
.rb-day-card {
  margin-top: 1.2rem;
  padding: 1.2rem 1.3rem;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.rb-day-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.rb-day-weekday {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rb-day-date { font-size: 1.25rem; font-weight: 700; color: var(--text-main); }
.rb-day-actions { display: flex; gap: 0.4rem; }
.rb-day-title { font-size: 1.15rem; margin: 0.2rem 0 0.6rem 0; color: var(--text-main); }

.rb-day-text p { margin: 0 0 0.6rem 0; line-height: 1.65; }
.rb-day-text p:last-child { margin-bottom: 0; }

.rb-empty {
  text-align: center;
  padding: var(--s-6) var(--s-4);
  color: var(--ink-2);
}

.rb-empty i { width: 38px; height: 38px; opacity: 0.5; }
.rb-empty p { margin: 0.7rem 0 1rem 0; }

/* --- Das Besondere ------------------------------------------------------ */
.rb-highlight {
  margin: 0.9rem 0;
  padding: 0.8rem 1rem;
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.rb-highlight-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
}

.rb-highlight-title i { width: 15px; height: 15px; }
.rb-highlight p { margin: 0 0 0.4rem 0; line-height: 1.6; }
.rb-highlight p:last-child { margin-bottom: 0; }

/* --- Angebote ----------------------------------------------------------- */
.rb-acts { margin-top: 1.1rem; }

.rb-acts-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-color);
}

.rb-acts-title i { width: 16px; height: 16px; color: var(--accent); }

.rb-act {
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.55rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.rb-act-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.rb-act-title { font-size: 1rem; color: var(--text-main); }
.rb-act-text p { margin: 0 0 0.35rem 0; line-height: 1.55; font-size: 0.92rem; color: var(--text-main); }
.rb-act-text p:last-child { margin-bottom: 0; }

.rb-act-kids {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  font-size: 0.83rem;
  color: var(--text-muted);
}

.rb-act-kids i { width: 13px; height: 13px; }

/* --- "Das weiß die App schon" ------------------------------------------- */
.rb-context {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--bg-secondary);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
}

.rb-context-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-bottom: 0.6rem;
}

.rb-context-title i { width: 15px; height: 15px; }

.rb-context-row {
  display: grid;
  grid-template-columns: 22px 8.5rem 1fr;
  gap: 0.5rem;
  align-items: start;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  border-top: 1px solid var(--border-color);
}

.rb-context-row:first-of-type { border-top: none; }
.rb-context-icon i { width: 15px; height: 15px; color: var(--accent); }
.rb-context-label { font-weight: 600; color: var(--text-muted); }
.rb-context-value { color: var(--text-main); }

/* --- Wochenansicht ------------------------------------------------------ */
.rb-week { margin-top: 1rem; }

.rb-week-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 0.9rem;
  padding: 0.85rem 1rem 0.85rem 0.6rem;
  margin-bottom: 0.6rem;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.rb-week-row.is-today { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.rb-week-row.is-empty { background: var(--bg-secondary); box-shadow: none; }

.rb-week-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border-color);
  padding-right: 0.6rem;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  transition: background var(--transition-fast);
}

.rb-week-date:hover { background: var(--primary-light); }
/* 0,72rem waren 11,5px. "MO"/"SEP" brauchen in der schmalen Datumsspalte
   nur rund 24px, die 12px passen dort. Gemessen 20.09.2026. */
.rb-week-weekday { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.rb-week-day { font-size: 1.5rem; font-weight: 800; color: var(--text-main); line-height: 1.1; }
.rb-week-month { font-size: var(--fs-xs); }
.rb-week-row.is-today .rb-week-day { color: var(--primary); }

.rb-week-body { min-width: 0; }

.rb-week-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.rb-week-title { font-weight: 700; color: var(--text-main); }
.rb-week-meta { display: inline-flex; gap: 0.3rem; align-items: center; font-size: 0.95rem; }
.rb-week-text { margin: 0.3rem 0 0.5rem 0; color: var(--text-main); font-size: 0.92rem; line-height: 1.55; }

.rb-week-acts { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.rb-week-act {
  display: inline-flex;
  /* flex-start statt center: der Titel darf jetzt zwei Zeilen lang werden
     (white-space: normal), das Icon soll dabei oben bleiben statt mittig
     zu haengen. Kein -webkit-line-clamp hier - das braucht display:-webkit-box
     und wuerde die runde Pillenform mit Icon zerstoeren. Lange Titel werden
     also nicht mehr hart abgeschnitten, sondern die Pille waechst nach unten;
     .rb-week-acts umbricht ohnehin schon (flex-wrap: wrap). */
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  background: var(--rb-area-bg, var(--bg-secondary));
  color: var(--rb-area, var(--text-muted));
  border: 1px solid var(--rb-area, var(--border-color));
  white-space: normal;
}

.rb-week-act i { width: 12px; height: 12px; flex-shrink: 0; }

/* Ohne diesen Knopf fuehrt der Weg zum Bearbeiten eines schon
   beschriebenen Tages nur ueber die Tagesansicht - zwei Klicks fuer
   etwas, das man beim Durchsehen der Woche staendig braucht. */
.rb-week-edit {
  border: 1px solid var(--border-color);
  background: var(--white);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  line-height: 0;
  transition: all var(--transition-fast);
}

.rb-week-edit i { width: 13px; height: 13px; }
.rb-week-edit:hover { border-color: var(--primary); color: var(--primary); }

.rb-week-noacts { margin: 0.2rem 0 0 0; }

.rb-week-highlight {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0.5rem 0 0 0;
  font-size: 0.86rem;
  color: var(--primary-dark);
}

.rb-week-highlight i { width: 14px; height: 14px; flex-shrink: 0; margin-top: 0.15rem; }

.rb-week-empty {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  min-height: 2.2rem;
}

/* --- Kennzahlen und Balken ---------------------------------------------- */
.rb-stats {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.rb-stats-week { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.rb-stats-row { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-bottom: 1rem; }

.rb-stat { display: flex; flex-direction: column; }
.rb-stat-num { font-size: 1.6rem; font-weight: 800; color: var(--primary); line-height: 1.1; }
.rb-stat-label { font-size: 0.8rem; color: var(--text-muted); }

.rb-stat-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex: 1 1 12rem;
  justify-content: flex-end;
}

.rb-bars { margin-top: 0.4rem; }

.rb-bars-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.rb-bar-row {
  display: grid;
  grid-template-columns: 10.5rem 1fr 2rem;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.3rem;
}

.rb-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-bar-label i { width: 14px; height: 14px; flex-shrink: 0; }

.rb-bar {
  display: block;
  height: 10px;
  background: var(--bg-secondary);
  border-radius: 999px;
  overflow: hidden;
}

.rb-bar-fill { display: block; height: 100%; border-radius: 999px; min-width: 3px; }
.rb-bar-num { font-weight: 700; font-size: 0.85rem; text-align: right; color: var(--text-main); }

/* --- Was diesen Monat gefehlt hat --------------------------------------- */
.rb-missing {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.rb-missing-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.rb-missing-title i { width: 15px; height: 15px; color: var(--accent-dark); }
.rb-missing-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.rb-missing-hint {
  margin: 0.6rem 0 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.rb-missing-ok {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--success-light);
  border-color: hsl(100, 30%, 72%);
  color: hsl(100, 40%, 26%);
  font-weight: 600;
  font-size: 0.9rem;
}

.rb-missing-ok i { width: 16px; height: 16px; }

/* --- Monatsansicht ------------------------------------------------------ */
.rb-month-scroll { margin-top: 1rem; overflow-x: auto; }

.rb-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(96px, 1fr));
  gap: 4px;
  min-width: 700px;
}

.rb-month-weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 0.2rem;
}

.rb-month-cell {
  min-height: 86px;
  padding: 0.35rem 0.4rem;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
  overflow: hidden;
}

.rb-month-cell:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.rb-month-cell.outside { opacity: 0.4; }
.rb-month-cell.is-weekend { background: var(--bg-secondary); }
.rb-month-cell.is-today { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.rb-month-cell.has-entry { background: var(--white); border-left: 3px solid var(--primary); }

.rb-month-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.rb-month-icons { font-size: 0.8rem; letter-spacing: 1px; }

/* Unter 700px passt der Monat nicht mehr mit Mindestbreite + Scrollbalken
   aufs Handy - stattdessen schrumpfen die Spalten auf Tippflaechen-Breite
   und die Schrift wird kleiner. Was dann in der Zelle nicht mehr passt,
   wird abgeschnitten (.rb-month-cell hat schon overflow: hidden).
   Wichtig: dieser Block muss HINTER den Basisregeln oben stehen - eine
   Media Query erhoeht die Spezifitaet nicht, bei gleicher Spezifitaet
   gewinnt sonst die zuletzt notierte (Basis-)Regel und der Block waere tot. */
@media (max-width: 700px) {
  .rb-month {
    grid-template-columns: repeat(7, minmax(44px, 1fr));
    min-width: 0;
    gap: 2px;
  }
  .rb-month-cell {
    min-height: 60px;
    padding: 0.2rem 0.25rem;
  }
  .rb-month-weekday {
    font-size: 0.65rem;
  }
  .rb-month-date {
    font-size: 0.7rem;
  }
  .rb-month-icons {
    font-size: 0.65rem;
  }
}

.rb-month-title {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.rb-month-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 0.35rem; align-items: center; }
.rb-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.rb-month-more { font-size: 0.68rem; color: var(--text-muted); font-weight: 700; }

.rb-month-todo {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
}

/* --- Höhepunkte des Monats ---------------------------------------------- */
.rb-highlights {
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.rb-highlights-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 0.6rem;
}

.rb-highlights-title i { width: 16px; height: 16px; }
.rb-highlights-list { list-style: none; margin: 0; padding: 0; }

.rb-highlights-list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border-color);
  font-size: 0.92rem;
  line-height: 1.55;
}

.rb-highlights-list li:first-child { border-top: none; }

.rb-highlights-date {
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--primary-dark);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  cursor: pointer;
}

.rb-highlights-date:hover { background: var(--primary-light); }

/* --- Editor ------------------------------------------------------------- */
.rb-editor-date {
  margin: -0.3rem 0 1rem 0;
  color: var(--text-muted);
  font-weight: 600;
}

.rb-chipset { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* .rb-chip-btn: siehe Chip-Knopf-Familie weiter oben. */

.rb-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-main);
}

.rb-switch input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }

.rb-editor-section {
  margin: 1.2rem 0;
  padding: 0.9rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.rb-editor-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.6rem;
}

.rb-editor-section-head i { width: 16px; height: 16px; color: var(--accent); vertical-align: middle; margin-right: 0.3rem; }
.rb-editor-addrow { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.rb-editor-empty { margin: 0.3rem 0; }

.rb-editor-actions-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.rb-editor-actions-inline .form-hint { margin-top: 0; flex: 1 1 14rem; }

.rb-editor-visibility {
  padding: 0.8rem 1rem;
  background: var(--accent-blue-light);
  border-radius: var(--radius-sm);
}

.rb-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.rb-act-row {
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.6rem;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--rb-area, var(--border-color));
  border-radius: var(--radius-sm);
}

.rb-act-row-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.rb-act-index {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--rb-area-bg, var(--bg-secondary));
  color: var(--rb-area, var(--text-muted));
  font-size: 0.75rem;
  font-weight: 800;
}

.rb-act-area { flex: 1 1 auto; min-width: 0; }
.rb-act-row-btns { display: flex; gap: 0.2rem; flex-shrink: 0; }
.rb-act-row .form-control { margin-bottom: 0.4rem; }

.rb-act-kidpick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
}

.rb-act-kidpick-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; margin-right: 0.2rem; }

.rb-kid-toggle,
.rb-kid-all {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--white);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.rb-kid-toggle.active { background: var(--accent); border-color: var(--accent); color: var(--white); }
.rb-kid-all { border-style: dashed; }
.rb-kid-toggle:hover, .rb-kid-all:hover { border-color: var(--accent); }

/* --- Baustein-Auswahl im Editor ----------------------------------------- */
.rb-libpick {
  margin-top: 0.7rem;
  padding: 0.7rem;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

/* Zwei Quellen im Baustein-Waehler: die eigenen Bausteine aus der Datenbank
   und die Angebots-Bibliothek. Die Bruecke zwischen beiden Listen (V1.60). */
.rb-libpick-quellen {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
  flex-wrap: wrap;
}

/* .rb-quelle-btn: siehe Chip-Knopf-Familie weiter oben. Geblieben ist die
   Zahl im Knopf - die gibt es sonst nirgends. */
.rb-quelle-btn b {
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--bg-2);
  color: var(--ink-2);
  border-radius: var(--radius-pill);
  padding: 0 var(--s-1);
}

.rb-quelle-btn.active b { background: var(--surface); color: var(--primary-ink); }

.rb-libpick-hinweis {
  margin: 0 0 0.6rem 0;
  padding: 0.5rem 0.7rem;
  background: var(--accent-blue-light);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-main);
}

.rb-libpick-herkunft {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  color: var(--rb-area, var(--text-muted));
  font-weight: 600;
}

/* Der Weg zurueck: aus einem eingetragenen Angebot in die volle Anleitung. */
.rb-act-quelle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px dashed var(--accent);
  background: transparent;
  color: var(--accent-dark);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.rb-act-quelle i { width: 12px; height: 12px; }
.rb-act-quelle:hover { background: var(--accent-light); }

.rb-act-herkunft {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.4rem 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.rb-act-herkunft i { width: 12px; height: 12px; flex-shrink: 0; color: var(--accent); }

/* Zielauswahl im Dialog "Durchgefuehrt" der Angebots-Bibliothek */
.ang-dok-ziele {
  padding: 0.7rem 0.8rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.ang-dok-ziel {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.4rem 0;
  cursor: pointer;
}

.ang-dok-ziel + .ang-dok-ziel { border-top: 1px solid var(--border-color); }
.ang-dok-ziel input { margin-top: 0.2rem; width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.ang-dok-ziel strong { display: block; font-size: 0.9rem; color: var(--text-main); }

.ang-dok-ziel small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.79rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.ang-dok-ziel em { font-style: normal; font-weight: 600; color: var(--accent-dark); }

.rb-libpick-head { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.rb-libpick-head .form-control { flex: 1 1 9rem; margin-bottom: 0; }
.rb-libpick-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; }

.rb-libpick-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.4rem 0.6rem;
  align-items: center;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--rb-area, var(--border-color));
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.rb-libpick-item:hover { background: var(--rb-area-bg, var(--bg-secondary)); }

.rb-libpick-area {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--rb-area, var(--text-muted));
  white-space: nowrap;
}

.rb-libpick-area i { width: 12px; height: 12px; }
.rb-libpick-name { font-weight: 600; color: var(--text-main); font-size: 0.9rem; }
.rb-libpick-age { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }

.rb-libpick-desc {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* --- Unterseite: Angebots-Bausteine ------------------------------------- */
.rb-lib-intro {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 62ch;
}

.rb-lib-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.rb-lib-filter .form-control { flex: 1 1 14rem; margin-bottom: 0; }

.rb-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.8rem;
}

.rb-lib-card {
  padding: 0.9rem 1rem;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--rb-area, var(--line));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
}

.rb-lib-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.5rem; }

.rb-lib-own {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-dark);
  background: var(--accent-light);
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
}

.rb-lib-name { margin: 0 0 0.35rem 0; font-size: 1rem; color: var(--text-main); }
.rb-lib-desc { margin: 0 0 0.6rem 0; font-size: 0.87rem; line-height: 1.55; color: var(--text-main); }

.rb-lib-meta { margin: 0 0 0.7rem 0; font-size: 0.8rem; }
.rb-lib-meta > div { display: flex; gap: 0.4rem; margin-bottom: 0.15rem; }
.rb-lib-meta dt { font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.rb-lib-meta dd { margin: 0; color: var(--text-main); }

.rb-lib-card-actions { margin-top: auto; display: flex; gap: 0.35rem; justify-content: flex-end; }

/* --- Eltern-Sicht -------------------------------------------------------- */
.rb-parent-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.rb-parent-day { padding: 1.1rem 1.2rem; }

.rb-parent-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.rb-parent-head .rb-chips { margin-bottom: 0; }
.rb-parent-weekday { font-size: 0.8rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.04em; }
.rb-parent-date { font-size: 1.05rem; font-weight: 700; color: var(--text-main); }
.rb-parent-title { margin: 0.2rem 0 0.5rem 0; font-size: 1.1rem; color: var(--text-main); }
.rb-parent-text p { margin: 0 0 0.6rem 0; line-height: 1.65; }
.rb-parent-text p:last-child { margin-bottom: 0; }

/* --- Schmale Bildschirme ------------------------------------------------ */
@media (max-width: 768px) {
  /* Die Kopfzeile traegt drei Knoepfe. Ohne Umbruch quetscht sich der
     Titel darunter und die Knopfgruppe schiebt sich darueber. */
  .rb-header { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .rb-header > div { justify-content: flex-start; }

  .rb-toolbar { flex-direction: column; align-items: stretch; }
  .rb-period { justify-content: center; }
  .rb-period-label { min-width: auto; flex: 1 1 auto; font-size: 0.9rem; }
  .rb-viewswitch { justify-content: center; }

  .rb-week-row { grid-template-columns: 58px 1fr; gap: 0.6rem; }
  .rb-week-day { font-size: 1.25rem; }

  .rb-context-row { grid-template-columns: 20px 1fr; }
  .rb-context-label { grid-column: 2; }
  .rb-context-value { grid-column: 2; }

  .rb-bar-row { grid-template-columns: 7.5rem 1fr 1.6rem; }
  .rb-stats-week { gap: 1rem; }
  .rb-stat-areas { justify-content: flex-start; }

  .rb-day-head { flex-direction: column; }
  .rb-act-kidpick-label { width: 100%; }
}

/* --- Druck --------------------------------------------------------------
   Der Knopf "Drucken" öffnet ein eigenes Fenster mit einer eigenen Tabelle.
   Diese Regeln sind für den Fall, dass jemand die Seite direkt druckt. */
@media print {
  .rb-toolbar, .rb-day-actions, .rb-editor-actions, .rb-lib-filter,
  .rb-lib-card-actions, .rb-highlights-date { display: none !important; }

  .rb-day-card, .rb-week-row, .rb-stats, .rb-highlights, .rb-context {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    page-break-inside: avoid;
  }

  .rb-month { min-width: 0; }
  .rb-month-cell { min-height: 60px; }
}


/* ==========================================================================
   Angebote: die Premium-Auszeichnung
   ==========================================================================
   Premium heisst hier nicht "aufwendiger", sondern umgekehrt: so tief
   durchdacht, dass die Ausfuehrung einfach wird. Deshalb ist die Auszeichnung
   ruhig - ein Bernsteinton, der sich vom Gruen der "sofort"-Marke und vom
   Terrakotta der Hausfarbe unterscheidet, ohne zu schreien.
   Die Tokens --prem/--prem-hell/--prem-rand stehen jetzt oben im
   Token-Block; hier stand frueher ein zweiter :root-Block mitten in der
   Datei, den niemand vermutet haette. */

.ang-premium-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: var(--prem);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Auf der Karte sitzt sie an derselben Stelle wie die "sofort"-Marke -
   die beiden schliessen einander aus, weil jedes Premium-Angebot ohnehin
   ohne Vorbereitung auskommt. Die Fusszeile sagt es weiterhin. */
.ang-karte-bild > .ang-premium-marke {
  position: absolute;
  left: 0.55rem;
  top: 0.55rem;
}

.ang-karte.ist-premium { border-color: var(--prem-rand); }
.ang-karte.ist-premium:hover,
.ang-karte.ist-premium:focus-visible { border-color: var(--prem); }

/* Der Umschalter steht jetzt in der Schnellfilter-Zeile neben den Chips,
   nicht mehr in der Suchzeile - deshalb die Chip-Masse, Farben bleiben. */
.ang-premium-knopf {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  border: 1px solid var(--prem-rand);
  border-radius: 999px;
  background: var(--prem-hell);
  color: var(--prem);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.ang-premium-knopf:hover { border-color: var(--prem); }

.ang-premium-knopf.aktiv {
  background: var(--prem);
  border-color: var(--prem);
  color: var(--white);
}

.ang-premium-knopf:focus-visible { outline: 2px solid var(--prem); outline-offset: 2px; }

/* --- Ansatz: was nicht nach Montessori laeuft ----------------------------
   Die Bibliothek ist montessori-orientiert, aber nicht montessori-rein.
   Angebote aus anderen Schulen tragen eine Marke mit dem Namen des Ansatzes.
   Sie ist bewusst leise - ein Schieferton, kein Warnrot: Diese Angebote sind
   nicht schlechter, sie sind anders begruendet. Wer sie nicht will, filtert
   sie weg; wer sie nimmt, soll wissen, worauf er sich einlaesst.
   Die Tokens --ans/--ans-hell/--ans-rand stehen jetzt oben im Token-Block. */

/* Auf der Karte: Bereichszeile links, Ansatzmarke rechts. Montessori-Angebote
   tragen dort nichts - die Regel braucht keine Marke, nur die Ausnahme. */
.ang-karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.ang-ansatz-marke {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.42rem;
  border: 1px solid var(--ans-rand);
  border-radius: 999px;
  background: var(--ans-hell);
  color: var(--ans);
  /* 0,66rem waren 10,6px - die kleinste Schrift der Angebotskarten.
     Auf die 12px-Grenze angehoben, gemessen 20.09.2026. */
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-transform: none;
}

.ang-ansatz-block {
  border-left: 4px solid var(--ans);
  background: var(--ans-hell);
}

.ang-ansatz-block h3 i { color: var(--ans); }

.ang-ansatz-fuss {
  margin: 0.5rem 0 0 !important;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.ang-grundsaetze-ausnahme {
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--ans-rand);
  background: var(--ans-hell);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.ang-detail-kopfzeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Der Vorspann unter einer Ueberschrift: sagt, wofuer der Block da ist. */
.ang-block-vorspann {
  font-size: 0.87rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.55;
  margin-bottom: 0.9rem !important;
}

/* --- Warum genau so --- */
.ang-warum-so {
  border-left: 4px solid var(--prem);
  background: var(--prem-hell);
}

.ang-warum-so h3 i { color: var(--prem); }
.ang-warum-so p + p { margin-top: 0.7rem; }

/* --- Wenn es anders laeuft --- */
.ang-stolpersteine { border-left: 4px solid var(--accent); }
.ang-stolpersteine h3 i { color: var(--accent-dark); }

.ang-stolper-liste { margin: 0; }

.ang-stolper-liste > div {
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--border-color);
}

.ang-stolper-liste > div:last-child { border-bottom: none; padding-bottom: 0; }

.ang-stolper-liste dt {
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.5;
  margin-bottom: 0.25rem;
}

/* Der Pfeil macht sichtbar, dass hier die Handlung folgt, nicht ein Kommentar. */
.ang-stolper-liste dd {
  margin: 0;
  padding-left: 1.5rem;
  position: relative;
  color: var(--text-main);
  line-height: 1.6;
}

.ang-stolper-liste dd::before {
  content: "→";
  position: absolute;
  left: 0.2rem;
  color: var(--accent);
  font-weight: 700;
}

/* --- Wie es sich veraendert --- */
.ang-verlauf-block { border-left: 4px solid var(--accent-blue); }
.ang-verlauf-block h3 i { color: var(--accent-blue); }

.ang-verlauf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.ang-verlauf li {
  display: grid;
  grid-template-columns: minmax(8rem, 10rem) 1fr;
  gap: 0.3rem 1.2rem;
  align-items: baseline;
  padding-left: 1.1rem;
  border-left: 2px solid var(--border-color);
}

.ang-verlauf-wann {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--accent-blue);
}

.ang-verlauf li > span:last-child { line-height: 1.6; }

/* --- Fuer die Eltern --- */
.ang-elternsatz { border-left: 4px solid var(--primary); background: var(--primary-light); }
.ang-elternsatz h3 i { color: var(--primary); }

.ang-elternsatz p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--primary-dark);
  font-weight: 500;
}

/* --- Die Kette --- */
.ang-kette-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem 1.6rem;
}

.ang-kette-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--primary-dark);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ang-kette-link:hover { border-color: var(--primary); background: var(--primary-light); }
.ang-kette-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 620px) {
  .ang-verlauf li { grid-template-columns: 1fr; }
}

/* --- Druck --- */
@media print {
  .ang-premium-marke {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000;
  }

  .ang-ansatz-marke {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000;
  }

  .ang-warum-so, .ang-elternsatz, .ang-ansatz-block { background: transparent !important; }
  .ang-warum-so, .ang-stolpersteine, .ang-verlauf-block, .ang-elternsatz, .ang-ansatz-block {
    border-left: 3px solid #000 !important;
  }

  .ang-stolper-liste dd::before { color: #000 !important; }
  .ang-verlauf li { border-left: 1px solid #999 !important; }
  .ang-verlauf-wann { color: #000 !important; }
  .ang-block-vorspann { font-size: 9pt !important; }
}

/* --- Angebote: der Ziele-Modus (V1.65) ---------------------------------- */
/* Die zweite Sicht auf dieselbe Bibliothek: vom Kind aus statt vom Angebot
   aus. Gestalterisch bewusst ruhiger als die Bibliothek - hier wird nicht
   gestoebert, hier wird entschieden. */

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

/* Der Umschalter Bibliothek/Ziele ist dasselbe Segment wie im Rueckblick und
   im Speiseplan - Aussehen steht bei .segment weiter oben. */
.ang-modus-knopf:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Die einzige Erinnerung der ganzen Seite: eine Zahl. Kein Rot, kein Punkt,
   keine Meldung - sie verschwindet, sobald nichts mehr offen ist. */
.ang-modus-zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  margin-left: 0.15rem;
  border-radius: 999px;
  background: var(--accent-light);
  /* Fest statt var(--accent): das Terracotta der Variablen ist mit 60 %
     Helligkeit fuer eine 12-Pixel-Ziffer auf hellem Grund zu blass
     (rund 2,3:1). Derselbe Farbton, nur dunkel genug zum Lesen. */
  color: hsl(22, 60%, 32%);
  font-size: 0.74rem;
  font-weight: 700;
}

/* Auf dem aktiven, pinkfarbenen Knopf braucht die Zahl eine eigene helle
   Flaeche. Weiss auf halbdurchsichtigem Weiss ueber Pink kaeme auf einen
   Kontrast von etwa 2:1 - bei einer 12-Pixel-Ziffer zu wenig zum Lesen. */
.ang-modus-knopf.aktiv .ang-modus-zahl {
  background: var(--white);
  color: var(--primary-dark);
}

/* --- Kinderleiste ------------------------------------------------------- */
.ang-kinder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0 0.9rem;
}

.ang-kind-pille {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--white);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ang-kind-pille:hover { border-color: var(--primary); }
.ang-kind-pille:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.ang-kind-pille.aktiv {
  background: var(--primary-light);
  border-color: var(--primary);
}

.ang-kind-name { font-weight: 700; font-size: 0.95rem; color: var(--text-main); }
.ang-kind-pille.aktiv .ang-kind-name { color: var(--primary-dark); }
.ang-kind-alter { font-size: 0.78rem; color: var(--text-muted); }
/* Auf der rosa Flaeche der ausgewaehlten Pille reicht das Grau nicht mehr. */
.ang-kind-pille.aktiv .ang-kind-alter { color: var(--primary-dark); opacity: 0.85; }

.ang-kind-offen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: var(--accent-light);
  color: hsl(22, 60%, 32%);
  font-size: 0.7rem;
  font-weight: 700;
  align-self: center;
}

.ang-ziel-kopfzeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.ang-ziel-kopfzeile h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.ang-ziel-kopfzeile h3 span { font-weight: 500; color: var(--text-muted); font-size: 0.95rem; }
.ang-ziel-stand { font-size: 0.85rem; color: var(--text-muted); }

/* --- Noch offen --------------------------------------------------------- */
.ang-offen {
  border-left: 4px solid var(--accent, hsl(22, 55%, 45%));
  margin-bottom: 1.2rem;
}

.ang-offen h4 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}

.ang-offen-hinweis {
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.ang-offen-zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.6rem 0;
  border-top: 1px solid var(--border-color);
}

.ang-offen-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ang-offen-text strong { font-size: 0.95rem; color: var(--text-main); }
.ang-offen-text small { font-size: 0.8rem; color: var(--text-muted); }
.ang-offen-knoepfe { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* --- Zielkarten --------------------------------------------------------- */
.ang-ziel-ueberschrift { margin: 1.6rem 0 0.8rem; }

.ang-ziel-ueberschrift h4 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.ang-ziel-ueberschrift p {
  margin: 0;
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.ang-ziele {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  align-items: start;
}

.ang-ziel { display: flex; flex-direction: column; gap: 0.7rem; }

.ang-ziel-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border-color);
}

.ang-ziel-kopf h5 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-main);
}

.ang-ziel-lang { margin: 0.2rem 0 0; font-size: 0.83rem; color: var(--text-muted); line-height: 1.45; }
.ang-ziel-feld { margin: 0.15rem 0 0; font-size: 0.76rem; color: var(--text-muted); font-style: italic; }

.ang-ziel-status {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.ang-ziel-status.ist-arbeit   { background: var(--primary-light); color: var(--primary-dark); }
.ang-ziel-status.ist-erreicht { background: hsl(150, 45%, 92%); color: hsl(150, 45%, 28%); }
/* Das Grau der Variablen liegt auf dem hellen Grund bei rund 4,2:1 - knapp
   unter dem, was fuer eine fette 11-Pixel-Schrift noch reicht. */
.ang-ziel-status.ist-offen,
.ang-ziel-status.ist-leer     { background: var(--bg-secondary); color: hsl(200, 12%, 34%); }

.ang-ziel-angebote { display: flex; flex-direction: column; gap: 0.45rem; }

.ang-ziel-leer {
  margin: 0;
  padding: 0.6rem 0.2rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

.ang-ziel-mehr {
  align-self: flex-start;
  margin-top: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--primary);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ang-ziel-mehr:hover { color: var(--primary-hover); }

.ang-ziel-fertig { border-left: 4px solid var(--success, hsl(150, 45%, 40%)); }
.ang-ziel-fertig h4 { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.4rem; font-size: 1.05rem; }
.ang-ziel-fertig p { margin: 0; font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }

/* --- Angebotszeile in Ziel und Streifen --------------------------------- */
.ang-streifen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.5rem;
}

.ang-zeile {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.ang-zeile:hover { border-color: var(--primary); }

.ang-zeile-haupt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.55rem 0.3rem 0.55rem 0.7rem;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ang-zeile-haupt:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ang-zeile-text { display: flex; flex-direction: column; gap: 0.08rem; min-width: 0; }

.ang-zeile-titel {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-main);
  overflow: hidden;
  /* zwei Zeilen statt hartem Abschneiden - lange Angebotstitel bleiben lesbar */
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ang-zeile-unter {
  font-size: 0.77rem;
  color: var(--text-muted);
  overflow: hidden;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ang-zeile-rechts { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; }
.ang-zeile-rechts i { color: var(--primary); }

.ang-zeile-marke {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.ang-zeile-marke.ist-neu { background: var(--primary-light); color: var(--primary-dark); }
.ang-zeile-marke.ist-empfohlen { background: hsl(150, 45%, 92%); color: hsl(150, 45%, 28%); }
.ang-zeile-zeit { font-size: 0.73rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
/* Nicht var(--success): das froehliche Gruen der Variablen kommt auf Weiss nur
   auf 2,7:1 und ist bei dieser Groesse kaum zu lesen. Derselbe Ton, dunkler. */
.ang-zeile-zeit.ist-sofort { color: hsl(120, 45%, 26%); }

.ang-zeile-merken {
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  border: none;
  border-left: 1px solid var(--border-color);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.ang-zeile-merken:hover { color: var(--primary); background: var(--primary-light); }
.ang-zeile-merken:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ang-zeile-merken:disabled { opacity: 0.4; cursor: default; }

/* --- Verlauf und Regel -------------------------------------------------- */
.ang-verlauf,
.ang-regel {
  margin-top: 1.4rem;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.ang-verlauf > summary,
.ang-regel > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-main);
  cursor: pointer;
  list-style: none;
}

.ang-verlauf > summary::-webkit-details-marker,
.ang-regel > summary::-webkit-details-marker { display: none; }
.ang-verlauf > summary i,
.ang-regel > summary i { width: 16px; height: 16px; color: var(--primary); }
.ang-verlauf > summary:hover,
.ang-regel > summary:hover { color: var(--primary-dark); }

.ang-verlauf-inhalt { padding: 0 0.6rem 0.6rem; }

.ang-verlauf-zeile {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto auto;
  gap: 0.7rem;
  align-items: center;
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: none;
  border-top: 1px solid var(--border-color);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ang-verlauf-zeile:hover { background: var(--bg-primary); }
.ang-verlauf-zeile:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ang-verlauf-datum { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ang-verlauf-titel {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ang-verlauf-werte { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.ang-verlauf-punkte {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ang-regel-inhalt { padding: 0 1.1rem 1rem; }
.ang-regel-inhalt p { margin: 0 0 0.7rem; font-size: 0.87rem; color: var(--text-muted); line-height: 1.6; }
.ang-regel-inhalt ol { margin: 0; padding-left: 1.3rem; }
.ang-regel-inhalt li { margin-bottom: 0.55rem; font-size: 0.87rem; line-height: 1.6; color: var(--text-main); }
.ang-regel-inhalt strong { color: var(--primary-dark); }

/* --- Kind-Kontext auf der Detailseite ----------------------------------- */
.ang-kontext {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
  padding: 0.5rem 0.85rem;
  background: var(--primary-light);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--primary-dark);
}

.ang-kontext i { color: var(--primary); }

.ang-kontext-weg {
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.8;
}

.ang-kontext-weg:hover { opacity: 1; }

/* --- Das Eintragen-Fenster ---------------------------------------------- */
.ang-dlg-kopf { margin: 0 0 1rem; color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
.ang-dlg-kopf strong { color: var(--text-main); }
.ang-dlg-ziel { font-size: 0.83rem; color: var(--primary-dark); font-weight: 600; }
.ang-dlg-hinweis { display: block; margin-top: 0.4rem; font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }

.ang-dlg-kinder { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.ang-dlg-kind {
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--white);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ang-dlg-kind:hover { border-color: var(--primary); color: var(--text-main); }
.ang-dlg-kind:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ang-dlg-kind.aktiv { background: var(--primary); border-color: var(--primary); color: var(--white); }
.ang-dlg-kind:disabled { opacity: 0.55; cursor: default; }

/* --- Die geführte Rückmeldung ------------------------------------------- */
.ang-bew-block {
  margin: 0 0 1.1rem;
  padding: 0.9rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.ang-bew-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
}

.ang-bew-kopf h4 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-main); }

.ang-bew-umschalten {
  padding: 0;
  border: none;
  background: none;
  color: var(--primary);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ang-bew-gilt { margin: 0 0 0.6rem; font-size: 0.82rem; color: var(--text-muted); }

.ang-bew-kind {
  padding: 0.7rem 0;
  border-top: 1px solid var(--border-color);
}

.ang-bew-kind:first-of-type { border-top: none; padding-top: 0; }
.ang-bew-kind h5 { margin: 0 0 0.5rem; font-size: 0.92rem; font-weight: 700; color: var(--primary-dark); }

.ang-bew-frage { margin-bottom: 0.7rem; }

.ang-bew-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.ang-bew-stufen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
}

/* Jede Stufe traegt ihr eigenes Wort. Eine Skala, bei der nur die Enden
   beschriftet sind, zwingt zum Raten - genau das soll hier nicht passieren. */
.ang-bew-stufe {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.45rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ang-bew-stufe b { font-size: 0.82rem; font-weight: 700; color: var(--text-main); line-height: 1.25; }
.ang-bew-stufe small { font-size: 0.8rem; color: var(--text-muted); line-height: 1.3; }
.ang-bew-stufe:hover { border-color: var(--primary); }
.ang-bew-stufe:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.ang-bew-stufe.aktiv {
  background: var(--primary-light);
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.ang-bew-stufe.aktiv b { color: var(--primary-dark); }

.ang-bew-deutung {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--white);
  border-left: 4px solid var(--border-color);
}

.ang-bew-deutung strong { font-size: 0.95rem; color: var(--text-main); }
.ang-bew-deutung > span { font-size: 0.87rem; color: var(--text-muted); line-height: 1.55; }
.ang-bew-deutung.ist-leer { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }
.ang-bew-deutung.ist-schwerer { border-left-color: hsl(150, 45%, 45%); }
.ang-bew-deutung.ist-nochmal  { border-left-color: var(--primary); }
.ang-bew-deutung.ist-leichter { border-left-color: hsl(205, 55%, 50%); }
.ang-bew-deutung.ist-anderes  { border-left-color: hsl(38, 65%, 50%); }
.ang-bew-deutung.ist-pause    { border-left-color: var(--text-muted); }

/* Die Zahl steht bewusst hier unten und klein: sie ist Nachweis der Regel,
   nicht die Aussage. Dieselbe Summe kann aus entgegengesetzten Antworten
   entstehen - deshalb fuehrt immer der Satz, nie der Bruch. */
.ang-bew-regel {
  margin-top: 0.2rem;
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.ang-bew-naechst {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.ang-bew-naechst:hover { background: var(--primary); color: var(--white); }
.ang-bew-naechst:hover i { color: var(--white); }

.ang-bew-reflexion > summary {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 0.2rem 0;
}

.ang-bew-reflexion ul { margin: 0.35rem 0 0.35rem 1.1rem; padding: 0; }
.ang-bew-reflexion li { font-size: 0.83rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 0.2rem; }
.ang-bew-reflexion p { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--text-muted); font-style: italic; }

/* --- Hinweis in der Entwicklungsbeobachtung ----------------------------- */
.ang-status-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.7rem;
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--primary-dark);
}

.ang-status-hinweis i { flex-shrink: 0; margin-top: 0.1rem; }

/* --- Schmale Bildschirme ------------------------------------------------ */
@media (max-width: 700px) {
  .ang-kopf { align-items: flex-start; }
  .ang-modus { width: 100%; }
  .ang-modus-knopf { flex: 1; justify-content: center; }
  .ang-ziele { grid-template-columns: 1fr; }
  .ang-streifen { grid-template-columns: 1fr; }
  /* Vier Stufen nebeneinander sind auf dem Handy unlesbar - untereinander
     bleibt jedes Wort ganz stehen, und getroffen wird auch mit muedem Daumen. */
  .ang-bew-stufen { grid-template-columns: 1fr 1fr; }
  .ang-verlauf-zeile { grid-template-columns: 3rem 1fr auto; }
  .ang-verlauf-werte { display: none; }
  .ang-offen-zeile { align-items: flex-start; }
}

@media (max-width: 420px) {
  .ang-bew-stufen { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Zugaenglichkeit: gemeinsame Bausteine (Vertrag "Zugaenglichkeit und
   Einfachheit"), von allen Sitzungen genutzt. Standen bis 03.09.2026 mitten
   im Eingewoehnungs-Block und gingen bei dessen Neubau beinahe verloren -
   deshalb jetzt VOR dem Block, in einem eigenen Abschnitt.
   ========================================================================== */

/* Inline-Raster (Notfallkontakte, Veranstaltungen, Kopfzeile mit Wetter ...),
   die auf dem Handy nebeneinander gequetscht wuerden. Wird ZUSAETZLICH zu
   einem bestehenden Inline-style="grid-template-columns: ..." gesetzt -
   das !important gewinnt gegen den Inline-Style, ohne ihn zu entfernen. */
@media (max-width: 600px) {
  .mobil-einspaltig {
    grid-template-columns: 1fr !important;
  }
}

/* Nur fuer Screenreader sichtbarer Text (z. B. Labels zu Suchfeldern und
   Auswahllisten ohne sichtbare Beschriftung). Uebliche, unauffaellige
   Umsetzung: aus dem Bild geschoben, aber im Text-Fluss vorhanden. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Eingewoehnung - Uebersicht, Kind-Seite, Formular (03.09.2026)
   ==========================================================================
   Praefix eg-. Umbau von "alles auf einmal" zu zwei Ebenen: eine Uebersicht
   aller Kinder nach Stand, darunter je Kind eine Seite mit drei Ansichten
   Heute/Verlauf/Fahrplan - wie beim Reiter Entwicklung. Der Reiter wird im
   Stehen bedient, waehrend fuenf Kinder im Raum sind: grosse Trefferflaechen,
   genau eine Hauptaktion je Zustand, nichts hinter einem Aufklapper, das zum
   Tagesformular gehoert.
   Gliederung dieses Blocks: Uebersicht - Kind-Seite (Kopf, Ansichten-Rahmen)
   - Ansichten (Stand/Phasen/Rueckkanal/Hinweise fuer "Heute", Formular,
   Verlauf/Trennungsreife, Fahrplan/Abschluss) - Dialoge - Eltern-Bereich
   (unveraendert) - .form-abschnitt (gemeinsamer Baustein).
   Die Balken der Phasenanzeige (.settling-phase-*) sind ein eigener, aelterer
   Baustein weiter oben in der Datei und bleiben dort - der Eltern-Bereich
   benutzt sie mit. */

/* --- Uebersicht (#eg-uebersicht): Kinder nach Stand gruppiert ----------- */

.eg-gruppe { margin-top: var(--s-5); }
.eg-gruppe:first-child { margin-top: 0; }
.eg-gruppe-titel {
  margin: 0 0 var(--s-3) 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}

.eg-kind-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-4);
}

/* Karte pro Kind in "laeuft"/"geplant". Kein Hover-Huepfen (DESIGN.md) - nur
   die Linie reagiert, das reicht als Rueckmeldung fuer eine ganze Karte. */
.eg-kind-karte {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--s-4);
  cursor: pointer;
}
.eg-kind-karte:hover { border-color: var(--line-strong); }

/* Kompakte Zeilen fuer "abgeschlossen"/"offen": eine Linie zwischen den
   Zeilen traegt die Gruppe, keine eigene Kartenflaeche je Kind. */
.eg-kind-zeilen { display: flex; flex-direction: column; }
.eg-kind-zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  min-height: 48px;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.eg-kind-zeile:last-child { border-bottom: none; }

.eg-kind-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-weight: 600;
  font-size: var(--fs-md);
  overflow: hidden;
}
.eg-kind-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.eg-kind-text {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eg-kind-name { color: var(--ink); font-size: var(--fs-md); font-weight: 600; }
.eg-kind-stand { color: var(--ink-2); font-size: var(--fs-sm); }
.eg-kind-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }

/* Auf dem Handy wandert der Hauptknopf unter den Text und wird breit - im
   Stehen mit einer Hand ist eine volle Reihe leichter zu treffen als ein
   schmaler Knopf am rechten Rand. */
.eg-kind-aktion { flex-shrink: 0; margin-left: auto; }
@media (max-width: 600px) {
  .eg-kind-aktion { width: 100%; margin-left: 0; }
}

/* --- Kind-Seite (#eg-kind-seite): Kopf und Ansichten-Rahmen ------------- */

.eg-kind-kopf .eg-zurueck { margin-bottom: var(--s-2); }

.eg-zaehler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 6px;
  margin-left: var(--s-1);
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* Eine Spalte: der Reiter ist keine Dashboard-Seite mit mehreren
   Blickpfaden, sondern eine Abfolge - Karte fuer Karte. */
.eg-ansicht { margin-top: var(--s-4); max-width: 860px; }
.eg-ansicht > .card,
.eg-ansicht > .eg-hinweise,
.eg-ansicht > .eg-rueckkanal,
.eg-ansicht > #eg-aufnahmebogen,
#eg-body > .card,
#eg-body > #eg-aufnahmebogen {
  margin-bottom: var(--s-4);
}

/* .eg-stand, .eg-verlauf, .eg-reife, .eg-infoblatt, .eg-absprachen und
   .eg-abschluss-karte sind reine Karten-Hooks (Klasse zusaetzlich zu .card):
   .card deckt Flaeche, Linie, Radius und Schatten schon ab (kein farbiger
   Linksrand mehr, DESIGN.md), darum brauchen sie keine eigene Regel. */

/* --- Ansicht "Heute": Stand-Karte und Phasenleiste ---------------------- */

.eg-stand-satz { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--ink); }

/* Fuenf Punkte in einer Reihe ohne Umbruch, mit einer Verbindungslinie
   dahinter. Auf dem Handy bleibt nur der Name der aktuellen Phase stehen -
   fuenf Beschriftungen nebeneinander passen sonst auf keinen Bildschirm. */
.eg-phasen {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.eg-phase {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  text-align: center;
}
.eg-phase:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--line-strong);
  z-index: 0;
}
.eg-phase.erreicht:not(:first-child)::before { background: var(--primary); }
.eg-phase-punkt {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.eg-phase-punkt i, .eg-phase-punkt svg { width: 14px; height: 14px; }
.eg-phase.erreicht .eg-phase-punkt {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.eg-phase.aktuell .eg-phase-punkt { box-shadow: 0 0 0 3px var(--primary-soft); }
.eg-phase-name { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.eg-phase.aktuell .eg-phase-name { color: var(--primary-ink); font-weight: 600; }
@media (max-width: 600px) {
  .eg-phase-name { display: none; }
  .eg-phase.aktuell .eg-phase-name { display: block; }
}

.eg-vorschlag {
  margin: var(--s-4) 0 0 0;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink);
}
.eg-vorschlag-fuss {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  /* --ink-2, nicht --ink-3: unter 0.85rem verliert --ink-3 zu viel Kontrast. */
  color: var(--ink-2);
}

/* Absprache-Zeile: Symbol und Text wechseln sich in einem Fliesstext ab -
   der linke Abstand am Symbol traegt den Abstand zwischen den Teilen, ohne
   dass das Markup eigene Huellen fuer jeden Teil braucht. */
.eg-absprache {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.8;
}
.eg-absprache i, .eg-absprache svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin: 0 var(--s-1) 0 var(--s-4);
}
.eg-absprache i:first-child, .eg-absprache svg:first-child { margin-left: 0; }

.eg-aufgaben { list-style: none; margin: var(--s-4) 0 0 0; padding: 0; }
.eg-aufgabe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 48px;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.eg-aufgabe:last-child { border-bottom: none; }
.eg-aufgabe:hover { background: var(--bg-2); }
.eg-aufgabe-text { color: var(--ink); font-size: var(--fs-md); }
.eg-aufgabe-stand { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--s-1); color: var(--ink-3); }
.eg-aufgabe-stand i, .eg-aufgabe-stand svg { width: 16px; height: 16px; }

/* --- Rueckkanal der Eltern (Ansicht "Heute") ----------------------------- */

.eg-rueckkanal {
  background: var(--primary-soft);
  border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-4);
}
.eg-rueckkanal-kopf {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  font-weight: 600;
  color: var(--primary-ink);
}
.eg-rueckkanal-kopf i, .eg-rueckkanal-kopf svg { width: 16px; height: 16px; flex-shrink: 0; }
.eg-rueckkanal-werte { margin: var(--s-1) 0 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.eg-rueckkanal-text { margin: var(--s-2) 0 0 0; font-size: var(--fs-md); color: var(--ink); line-height: 1.55; }

/* --- Hinweise (Ansicht "Heute") ------------------------------------------ */

.eg-hinweise { display: flex; flex-direction: column; gap: var(--s-2); }
.eg-hinweise-mehr { display: flex; flex-direction: column; gap: var(--s-2); }
/* Gleicher Grund wie bei .camera-start-wrapper[hidden]: die eigene
   display:flex-Regel muss dem hidden-Attribut weichen, sonst stehen alle
   weiteren Hinweise dauerhaft offen, obwohl der Knopf "N weitere Hinweise"
   danebensteht. */
.eg-hinweise-mehr[hidden] {
  display: none;
}
.eg-hinweise .hinweis > i, .eg-hinweise .hinweis > svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Die Herkunft steht bewusst an jedem Hinweis: Es soll erkennbar bleiben, ob
   dahinter ein Modell steht oder eine Hausregel. */
.eg-quelle {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-xs);
  /* --ink-2, nicht --ink-3: unter 0.85rem verliert --ink-3 zu viel Kontrast. */
  color: var(--ink-2);
  font-style: italic;
}

.eg-bearbeiten-hinweis { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }

/* --- Das Tagesformular ---------------------------------------------------- */

/* Scroll-Ziel: wenn ein Tag aus dem Verlauf angetippt wird, soll der
   Formularkopf nicht unter der Kopfzeile verschwinden. */
.eg-tag { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }

.eg-tag-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.eg-tag-datum-text { margin-left: var(--s-2); font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2); }
.eg-datumsfeld { max-width: 190px; }
@media (max-width: 600px) { .eg-datumsfeld { max-width: none; width: 100%; } }

/* .eg-feldreihe-3 ist derselbe Zeilentyp, nur mit drei Feldern befuellt -
   beide Klassen stehen im Markup immer zusammen. */
.eg-feldreihe,
.eg-feldreihe-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
}
.eg-feldreihe .form-group { margin-bottom: 0; }
@media (max-width: 400px) {
  .eg-feldreihe,
  .eg-feldreihe-3 { grid-template-columns: 1fr; }
}

/* --ink-2, nicht --ink-3: unter 0.85rem verliert --ink-3 zu viel Kontrast. */
.eg-label-neben { margin-left: var(--s-1); font-size: var(--fs-xs); font-weight: 400; color: var(--ink-2); }

.eg-abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }

.eg-lede { margin: 0 0 var(--s-3) 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
/* Fussnoten in ink-2, nicht ink-3: unter 0.8rem verliert ink-3 zu viel
   Kontrast, um noch bequem lesbar zu sein. Bewusst ohne max-width: kein
   Einleitungssatz soll bei zwei Dritteln der Kartenbreite umbrechen. */
.eg-fussnote { margin: var(--s-2) 0 0 0; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }

.eg-merkmale { display: flex; flex-direction: column; gap: var(--s-3); }
/* .eg-merkmal ist die Huelle je Merkmal (Label + Stufen + Wortlaut) - ein
   blockweises div ohne eigene Regel, der Abstand kommt von .eg-merkmale. */
.eg-merkmal-label { display: block; margin-bottom: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.eg-merkmal-wortlaut { display: none; min-height: 1.2em; margin: var(--s-1) 0 0 0; font-size: var(--fs-xs); color: var(--ink-2); }
@media (max-width: 599px) { .eg-merkmal-wortlaut { display: block; } }

/* Drei Stufen nebeneinander, mit dem Wortlaut des Merkmals statt nur
   ja/nein - beim Eintragen zwischen Tuer und Angel liest niemand die
   Ueberschrift noch einmal mit. Ab 600px steht der lange Wortlaut auf dem
   Knopf selbst, darunter nur die kurze Fassung. */
.eg-stufen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.eg-stufe {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: var(--s-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  /* font: inherit noetig - Buttons erben ohne globalen Reset nicht die
     Hausschrift, sonst faellt der auffaelligste Formularblock aus Outfit. */
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.eg-stufe:hover { border-color: var(--primary); }
.eg-stufe-kurz { display: block; }
.eg-stufe-lang { display: none; }
@media (min-width: 600px) {
  .eg-stufe-kurz { display: none; }
  .eg-stufe-lang { display: block; }
}
.eg-stufe.gewaehlt { font-weight: 600; }
.eg-stufe-offen.gewaehlt { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-ink); }
.eg-stufe-teils.gewaehlt { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-ink); }
.eg-stufe-da.gewaehlt    { background: var(--success-soft); border-color: var(--success); color: var(--success-ink); }

.eg-schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}
.eg-schalter input { width: 20px; height: 20px; flex-shrink: 0; cursor: pointer; }

/* Fussleiste des Formulars: klebt auf schmalen Bildschirmen ueber der
   unteren Leiste, damit "Tag speichern" nicht hinter fuenfeinhalb
   Bildschirmen Formular verschwindet. */
.eg-tag-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}
/* Unter 1024px gibt es keine Seitenleiste (siehe Geruest-Breakpoint), der
   Inhalt nimmt die ganze Breite - deshalb left/right auf 0.
   position: sticky reichte nicht: die Fussleiste ist das letzte Kind der
   Karte, ihr Klebebereich endet mit der Karte. Bei einer kurzen Karte
   (erster Eingewoehnungstag) blieb sie damit am Kartenende stehen und lag
   unter der festen unteren Leiste - ein Tipp auf "Tag speichern" traf die
   Navigationsleiste. position: fixed haengt am Fenster statt an der
   Kartenhoehe und loest das unabhaengig vom Formularinhalt.
   Die Karte bekommt dafuer unten Platz, damit das letzte Feld nicht
   dauerhaft hinter der Leiste liegt. Gemessen 20.09.2026. */
@media (max-width: 1024px) {
  .eg-tag-fuss {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom));
    margin-top: 0;
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    /* Unter --z-header (100), damit Kopfzeile und untere Leiste oben
       bleiben, aber ueber dem normalen Karteninhalt. */
    z-index: 90;
  }
  .eg-tag {
    padding-bottom: calc(var(--s-7) * 2);
  }
}
.eg-tag-fuss-knoepfe { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.eg-gespeichert { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--success-ink); font-size: var(--fs-sm); }
.eg-gespeichert i, .eg-gespeichert svg { width: 16px; height: 16px; }
/* Gleicher Grund wie bei .camera-start-wrapper[hidden]: die eigene
   display:inline-flex-Regel muss dem hidden-Attribut weichen, sonst zeigt
   jedes Tagesformular staendig "Gespeichert HH:MM", auch ungespeichert. */
.eg-gespeichert[hidden] {
  display: none;
}
.eg-loeschen-frage { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--ink-2); }
/* Gleicher Grund wie bei .camera-start-wrapper[hidden]: die eigene
   display:inline-flex-Regel muss dem hidden-Attribut weichen, sonst steht die
   Loeschfrage samt rotem "Ja, loeschen" dauerhaft im Formular. */
.eg-loeschen-frage[hidden] {
  display: none;
}

/* --- Verlauf und Trennungsreife ------------------------------------------- */

.eg-reife-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.eg-reife-zeile {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.eg-reife-zeile:last-child { border-bottom: none; }
.eg-reife-zeile i, .eg-reife-zeile svg { width: 16px; height: 16px; flex-shrink: 0; }
.eg-reife-label { flex: 1; }
.eg-reife-zeile.da { color: var(--ink); font-weight: 600; }
.eg-reife-zeile.da i { color: var(--success); }
/* --ink-2, nicht --ink-3: unter 0.85rem verliert --ink-3 zu viel Kontrast. */
.eg-reife-tage { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 400; white-space: nowrap; }

.eg-verlauf-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }

.eg-tage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.eg-tag-zeile {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-3);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.eg-tag-zeile:hover { border-color: var(--primary); }
.eg-tag-zeile[aria-current="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.eg-tag-zeile-kopf { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.eg-tag-zeile-datum { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 400; }
.eg-tag-zeile-trennung {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-wrap: wrap;
  margin-top: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.eg-tag-zeile-trennung i, .eg-tag-zeile-trennung svg { width: 14px; height: 14px; flex-shrink: 0; }
.eg-tag-zeile-text {
  margin: var(--s-1) 0 0 0;
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.eg-tag-zeile-marken { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-1); }
/* --ink-2, nicht --ink-3: unter 0.85rem verliert --ink-3 zu viel Kontrast. */
.eg-marke { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-xs); color: var(--ink-2); }
.eg-marke i, .eg-marke svg { width: 13px; height: 13px; }

/* --- Fahrplan-Ansicht und Abschluss ---------------------------------------- */

.eg-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.eg-knoepfe { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.eg-daten { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; }
.eg-daten > div {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
.eg-daten > div:last-child { border-bottom: none; }
.eg-daten dt { margin: 0; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2); }
.eg-daten dd { margin: 0; color: var(--ink); }
.eg-offen { color: var(--ink-3); font-style: italic; }
@media (max-width: 600px) {
  .eg-daten > div { grid-template-columns: 1fr; gap: 0; }
}

.eg-abschluss-text { margin: var(--s-2) 0 0 0; color: var(--ink); line-height: 1.6; }

/* --- Dialoge (#modal-wrapper) ----------------------------------------------- */

.eg-dialog { max-width: 560px; }
.eg-dialog-fuss {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.eg-laden { padding: var(--s-6) 0; text-align: center; color: var(--ink-2); }

/* --- Eltern-Bereich (parent.js) ---------------------------------------------
   Diese fuenf Klassen zeichnen die Eingewoehnung auf der Elternseite, sind
   nicht Teil des Umbaus im Verwaltungsbereich und bleiben inhaltlich
   unveraendert - nur die veralteten Tokens sind auf die neuen Namen
   umgestellt (--accent-dark ist kein Alt-Token, sondern weiterhin die
   gueltige Terracotta-Farbe fuer die Trennungs-Markierung und bleibt daher
   stehen). */

.eg-eltern-stand { margin: 0 0 0.9rem 0; line-height: 1.65; font-size: 0.93rem; }
.eg-eltern-dauer { color: var(--ink-2); }
.eg-eltern-lede { color: var(--ink-2); font-size: 0.88rem; line-height: 1.6; margin: 0 0 1rem 0; max-width: 64ch; }

.eg-wahl { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.eg-wahl-knopf {
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  font-size: 0.86rem;
  cursor: pointer;
  transition: all 0.12s ease;
}
.eg-wahl-knopf:hover { border-color: var(--primary); }
.eg-wahl-knopf.gewaehlt {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

.eg-eltern-trennung {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin: 0.4rem 0 0 0;
  font-size: 0.82rem;
  color: var(--accent-dark);
  font-weight: 600;
}

.eg-eltern-echo {
  margin: 0.5rem 0 0 0;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--line);
  font-size: 0.82rem;
  color: var(--ink-2);
  font-style: italic;
}

/* --- Gliederung langer Formulare (02.09.2026) -----------------------------
   .form-abschnitt gliedert lange Formulare in erkennbare Abschnitte, statt
   sie umzubauen - ein Zwischentitel ist die kleinste Hilfe gegen das
   Gefuehl, vor einer Wand aus Feldern zu stehen. Genutzt von admin.js,
   rueckblick.js, angebote.js und (als h4.form-abschnitt) vom
   Eingewoehnungs-Tagesformular. */
.form-abschnitt {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--primary-ink);
  margin: var(--s-5) 0 var(--s-2) 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.form-abschnitt:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* --- Kasten auf "Heute" (laufende Eingewoehnungen) ----------------------
   Dieselben Zeilen wie in der Uebersicht (.eg-kind-zeile), nur in einer
   normalen Karte auf der Startseite. Der Kasten bleibt hidden, solange keine
   Eingewoehnung laeuft - das [hidden] von Zeile ~1331 greift, weil .card
   und .eg-heute-kasten kein eigenes display setzen. */
.eg-heute-kasten { margin-bottom: var(--s-5); }
.eg-heute-kasten .eg-karte-kopf { margin-bottom: var(--s-2); }
.eg-heute-kasten .eg-kind-zeile:last-child { padding-bottom: 0; }

/* Legende unter dem Monatskalender des Rueckblicks: Die 8px-Punkte in den
   Zellen tragen ihre Bedeutung sonst nur im title, das am Handy nie
   erscheint. */
.rb-month-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.rb-month-legende-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* ========================================================================
   Runde 02.09.2026 (2) - CSS-Sitzung: Formular-Schritte, Bilderrahmen-
   Einleger, Angebote-Filterchips, Legenden. Vier JS-Sitzungen bauen
   parallel gegen diese Klassennamen (Vertrag CSS2 / Gemeinsam).
   ======================================================================== */

/* --- S1: Formular-Schritte (Kind-Formular) -----------------------------
   Optik wie .segment (Pille auf grauem Grund), aber die Schritte duerfen
   umbrechen statt seitlich zu scrollen - bei acht, neun Schritten waere
   ein Scrollbalken schwerer zu finden als ein zweiter Zeilenumbruch. */
.schritt-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding: 3px;
  background: var(--bg-2);
  border-radius: var(--radius-pill);
  max-width: 100%;
}

.schritt-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.schritt-knopf[aria-selected="true"] {
  background: var(--primary);
  color: #fff;
}

.schritt-knopf.ist-erledigt {
  background: var(--success-soft);
  color: var(--success-ink);
}

.schritt-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  font-size: var(--fs-xs);
}

.schritt-knopf[aria-selected="true"] .schritt-nr,
.schritt-knopf.ist-erledigt .schritt-nr {
  background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 600px) {
  .schritt-knopf:not([aria-selected="true"]) .schritt-name {
    display: none;
  }
}

/* Ohne diese Regel hebt eine andere display-Regel spaeter im Cascade das
   hidden-Attribut wieder auf - genau der Fehler aus der Nacht im Terminal.
   !important haelt das dauerhaft fest, nicht nur bis zur naechsten Regel,
   die zufaellig auf .formular-schritt zielt. */
.formular-schritt[hidden] {
  display: none !important;
}

.formular-schritt-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  position: sticky;
  bottom: 0;
  background: var(--surface);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}

.formular-schritt-stand {
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

#child-form-zurueck[hidden],
#child-form-weiter[hidden] {
  display: none;
}

/* --- S2: Bilderrahmen-Einleger (Dokumente) ------------------------------
   Masse in mm, wie ein echter Druckbogen. Auf dem Bildschirm mit zoom:0.6
   verkleinert, damit ein A4-Blatt nicht ueber den Rand des Modals faellt;
   im Druck faellt die Verkleinerung wieder weg. */
.rahmen-blatt {
  /* Nicht fest 210mm: Die Vorschauspalte ist schmaler, und im Druck lassen
     die 1,5cm Seitenraender nur 180mm Satzspiegel - ein festes A4-Blatt
     wurde rechts abgeschnitten, beim Querformat mitten im QR-Code. */
  width: 100%;
  max-width: 210mm;
  min-height: 200mm;
  background: #fff;
  padding: 10mm;
  box-sizing: border-box;
  margin: 0 auto;
  zoom: 0.6;
}
@media (max-width: 1100px) { .rahmen-blatt { zoom: 0.45; } }
@media (max-width: 600px)  { .rahmen-blatt { zoom: 0.38; } }
/* Der Einleger hat feste Millimeter-Masse; wird die Spalte trotzdem zu eng,
   scrollt die Vorschau seitlich, statt die Seite aufzuschieben. */
.doc-preview-paper:has(.rahmen-blatt) { overflow-x: auto; }
/* Grid-Kinder duerfen nicht breiter als ihre Spalte werden (min-width: auto
   wuerde sonst den 180mm-Einleger mitnehmen und die ganze Seite aufschieben). */
.doc-preview-pane { min-width: 0; }

.rahmen-schnitt {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 3mm;
}

.rahmen-einleger {
  position: relative;
  margin: 0 auto;
  border: 0.3mm dashed #888;
  background: #fff;
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  padding: 6mm;
  gap: 6mm;
}

.rahmen-einleger[data-format="13x18"][data-ausrichtung="quer"] {
  width: 180mm;
  height: 130mm;
  flex-direction: row;
}
.rahmen-einleger[data-format="13x18"][data-ausrichtung="hoch"] {
  width: 130mm;
  height: 180mm;
  flex-direction: column;
}
.rahmen-einleger[data-format="10x15"][data-ausrichtung="quer"] {
  width: 150mm;
  height: 100mm;
  flex-direction: row;
}
.rahmen-einleger[data-format="10x15"][data-ausrichtung="hoch"] {
  width: 100mm;
  height: 150mm;
  flex-direction: column;
}

.rahmen-foto {
  flex: 1 1 55%;
  min-width: 0;
  min-height: 0;
}
.rahmen-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4mm;
  display: block;
}

.rahmen-foto-platzhalter {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border: 1mm dashed var(--line-strong);
}
.rahmen-foto-platzhalter svg {
  width: 20mm;
  height: 20mm;
}

.rahmen-seite {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3mm;
  text-align: center;
}
.rahmen-einleger[data-ausrichtung="quer"] .rahmen-seite {
  width: 60mm;
}
.rahmen-einleger[data-ausrichtung="hoch"] .rahmen-seite {
  width: 100%;
}

.rahmen-name {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 9mm;
  color: var(--ink);
  line-height: 1.1;
  word-break: break-word;
}
.rahmen-einleger[data-format="10x15"] .rahmen-name {
  font-size: 7mm;
}

.rahmen-qr {
  width: 50mm;
  height: 50mm;
  display: block;
  padding: 3mm;
  background: #fff;
}
.rahmen-einleger[data-format="10x15"] .rahmen-qr {
  width: 40mm;
  height: 40mm;
}

.rahmen-hinweis {
  font-size: 3.2mm;
  color: var(--ink-2);
  max-width: 60mm;
}

@media print {
  .rahmen-blatt {
    zoom: 1;
    width: auto;
    max-width: 180mm;
    min-height: 0;
    padding: 0;
    margin: 0 auto;
    page-break-inside: avoid;
  }
  body.printing-single-doc #single-doc-print-view.rahmen-druck {
    padding: 0 !important;
  }
  .rahmen-einleger {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Kleine Lucide-Symbole in Abzeichen und Filterknoepfen (Schwarzes Brett). */
.zielgruppe-symbol { width: 13px; height: 13px; vertical-align: -2px; }

/* --- S3: Angebote --------------------------------------------------- */
.ang-aktive-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-2) 0 var(--s-3) 0;
}

.ang-chip-weg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.ang-chip-weg:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* .ang-was-drin uebernimmt die Akkordeon-Optik von .ang-grundsaetze >
   summary (ohne den rotierenden Pfeil - das Auf/Zu zeigt hier bereits das
   Symbol im Text). details.finanz-ausnahme bekommt dieselbe Optik. */
.ang-was-drin > summary,
details.finanz-ausnahme > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--primary-dark);
  user-select: none;
}
/* Inhalt des Aufklappers "Was drin ist": dieselbe ruhige Optik wie der
   Grundsaetze-Aufklapper daneben (Zeile ~6880), sonst klebt der Text am Rand. */
.ang-was-drin-text {
  padding: 0 1.2rem 1rem;
  border-top: 1px dashed var(--border-color);
  font-size: var(--fs-md);
  color: var(--ink-2);
  line-height: 1.55;
}

.ang-was-drin > summary::-webkit-details-marker,
details.finanz-ausnahme > summary::-webkit-details-marker {
  display: none;
}
.ang-was-drin > summary i,
details.finanz-ausnahme > summary i {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* .brett-formular-knopf braucht keine eigene Regel - er traegt bereits
   eine der .btn-*-Klassen aus dem Vertrag. */

/* --- S4: Sonstiges --------------------------------------------------- */
.allergen-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.allergen-legende-item b {
  color: var(--ink);
  margin-right: 4px;
}


/* ==========================================================================
   BELEGUNG (eigener Reiter seit 04.09.2026)
   Die Jahrestabelle stand frueher als zweite Karte unter der Kinderliste und
   brachte ihre Farben als feste Hexwerte mit (#e2f0d9 & Co.). Hier sind es
   die Tokens - damit sie sich mit dem Rest der App aendert.
   ========================================================================== */
.belegung-tabelle {
  font-size: var(--fs-sm);
  border-collapse: collapse;
  min-width: 800px;
  width: 100%;
}

.belegung-tabelle th,
.belegung-tabelle td {
  border: 1px solid var(--line);
  padding: var(--s-2);
}

.belegung-tabelle thead tr {
  background: var(--bg-2);
}

.belegung-tabelle th {
  font-weight: 700;
  text-align: center;
}

.belegung-tabelle th.spalte-fest {
  width: 200px;
  text-align: left;
}

.belegung-tabelle th:not(.spalte-fest) {
  width: calc((100% - 200px) / 12);
}

.belegung-kind {
  font-weight: 600;
}

.belegung-schliesstage {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--warn, var(--ink-2));
}

.belegung-zeitraum {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  font-weight: 400;
  margin-top: 2px;
}

.belegung-monat {
  text-align: center;
  padding: var(--s-1);
}

/* Marke im Monatsfeld: "Belegt" traegt Flaeche, "Frei" bleibt still - der
   Blick soll auf den freien Feldern haengenbleiben, nicht auf beiden. */
.belegung-marke {
  display: block;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}

.belegung-belegt {
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-weight: 700;
}

.belegung-frei {
  color: var(--ink-2);
  font-style: italic;
}

.belegung-summe {
  font-weight: 700;
  border-top: 2px solid var(--line-strong);
}

.belegung-summe > td.spalte-fest {
  background: var(--bg-2);
}

.belegung-last {
  padding: var(--s-2) var(--s-1);
}

.belegung-last-frei {
  background: var(--success-soft);
  color: var(--success-ink);
}

.belegung-last-eng {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.belegung-last-voll {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.belegung-prozent {
  font-size: var(--fs-xs);
  font-weight: 400;
  margin-top: 2px;
}

/* Knopfreihe in einer Tabellenzelle. Text- und Symbolknoepfe stehen als
   inline-Elemente sonst auf der Schriftlinie: das SVG im Symbolknopf
   verschiebt dessen Grundlinie, und die Reihe steht treppenfoermig.
   flex-wrap: nowrap ist hier Absicht: die Reihe meldet der Tabelle damit
   ihre volle Breite als Mindestbreite, sonst quetscht die Spaltenrechnung
   den letzten Knopf um vier Pixel in die zweite Zeile. */
.tabellen-aktionen {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-2);
}

/* Am Handy ist die Zeile eine Karte - dort darf und muss die Reihe umbrechen,
   sonst laeuft sie aus der Karte heraus. */
@media (max-width: 700px) {
  .tabellen-aktionen {
    flex-wrap: wrap;
  }
}

/* Auswahlfeld, das nur so breit sein soll wie sein Inhalt (Planungsjahr). */
.u-breite-auto {
  width: auto;
}

/* ===========================================================================
   "Gut zu wissen" (Eltern > Verwaltung): Teil A des Vertragsbuchs
   ---------------------------------------------------------------------------
   Acht Kapitel als Aufklapper. Der haeufigste Zugriff ist kein Lesen von vorne
   bis hinten, sondern eine einzige Frage um sechs Uhr morgens ("ab wann darf
   mein Kind nach Fieber wieder kommen?") - deshalb Sprungmarken oben und alle
   Kapitel zu, statt einer langen Seite zum Scrollen.
   =========================================================================== */

.wissen-sprung {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Der Sprungknopf traegt bereits .chip (Flaeche, Radius, Schrift) und braucht
   hier nur noch das, was ein <button> von Haus aus mitbringt und stoert. */
.wissen-sprung-btn {
  border: 1px solid var(--border-color);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-xs);
}

.wissen-sprung-btn:hover,
.wissen-sprung-btn:focus-visible {
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* Der Kapitel-Aufklapper ist eine .card; die Karte bringt Flaeche, Linie und
   Radius mit. Das Padding muss hier auf 0, weil summary und Inhalt ihr eigenes
   mitbringen - sonst steht der Text doppelt eingerueckt. */
details.wissen-kapitel {
  padding: 0;
  margin-bottom: var(--s-3);
  overflow: hidden;
}

details.wissen-kapitel > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: var(--s-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--primary-dark);
}

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

details.wissen-kapitel > summary:hover {
  background: var(--bg-secondary);
}

details.wissen-kapitel > summary i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.wissen-kapitel-titel {
  font-weight: 600;
  font-size: var(--fs-md);
}

/* Die Kurzbeschreibung steht am Rechner in derselben Zeile und rutscht am
   Handy darunter - dort waere sie sonst der Grund fuer einen Umbruch mitten
   im Kapiteltitel. */
.wissen-kapitel-kurz {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  font-weight: 400;
}

@media (max-width: 640px) {
  .wissen-kapitel-kurz {
    flex-basis: 100%;
    margin-left: calc(18px + 0.6rem);
  }
}

.wissen-inhalt {
  padding: 0 var(--s-4) var(--s-4);
  border-top: 1px dashed var(--border-color);
  padding-top: var(--s-3);
}

.wissen-text {
  margin: 0 0 var(--s-3) 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink);
}

.wissen-liste,
.wissen-check {
  margin: 0 0 var(--s-3) 0;
  padding-left: 0;
  list-style: none;
  font-size: var(--fs-md);
  line-height: 1.6;
}

.wissen-liste li,
.wissen-check li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--s-2);
}

.wissen-liste li::before {
  content: "•";
  position: absolute;
  left: 0.35rem;
  color: var(--primary);
  font-weight: 700;
}

/* Kaestchen statt Punkt: Die Mitbring- und Unterlagenliste wird ausgedruckt
   und abgehakt, nicht nur gelesen. */
.wissen-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 0.85em;
  height: 0.85em;
  border: 1.5px solid var(--primary);
  border-radius: 3px;
}

.wissen-zitat {
  margin: 0 0 var(--s-3) 0;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--primary);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.6;
}

.wissen-zitat cite {
  display: block;
  margin-top: var(--s-2);
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.wissen-hinweis {
  margin-bottom: var(--s-3);
}

/* Breite Tabellen scrollen in ihrer eigenen Huelle, damit nie die Seite
   waagerecht scrollt. */
.wissen-tabelle-huelle {
  overflow-x: auto;
  margin-bottom: var(--s-3);
}

.wissen-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.wissen-tabelle th,
.wissen-tabelle td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
  line-height: 1.5;
}

.wissen-tabelle th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  white-space: nowrap;
}

.wissen-tabelle tr:last-child td {
  border-bottom: none;
}

/* Am Handy wird jede Zeile zu einem Block und holt sich die Spaltenueberschrift
   aus data-label - dasselbe Muster wie .today-cell weiter oben. */
@media (max-width: 640px) {
  .wissen-tabelle thead {
    display: none;
  }

  .wissen-tabelle tr {
    display: block;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--border-color);
  }

  .wissen-tabelle td {
    display: block;
    border-bottom: none;
    padding: 0 0 var(--s-2) 0;
  }

  .wissen-tabelle td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ink-2);
    margin-bottom: 0.2rem;
  }
}

/* Ausdruck: Der Knopf oeffnet vorher alle Aufklapper (siehe renderWissenTab).
   Hier faellt nur weg, was auf Papier nichts verloren hat, und die Kapitel
   duerfen nicht mitten im Satz umbrechen. */
@media print {
  .wissen-sprung,
  #wissen-drucken {
    display: none !important;
  }

  details.wissen-kapitel {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
  }

  .wissen-tabelle-huelle {
    overflow-x: visible;
  }
}

/* ===========================================================================
   Einwilligungs-Register (Eltern > Verwaltung > Einwilligungen und
   Verwaltung > Kinder > Einwilligungen)
   ---------------------------------------------------------------------------
   Ein Eintrag je Einwilligung: Titel und aktueller Stand oben, der Wortlaut
   darunter, dann die zwei Knoepfe. Ja und Nein sehen absichtlich gleich
   gewichtig aus - Art. 7 Abs. 3 DSGVO verlangt, dass der Widerruf so einfach
   ist wie die Erteilung, und ein blasses "Nein" neben einem kraeftigen "Ja"
   waere genau das nicht.
   =========================================================================== */

.ew-eintrag {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border-color);
}

.ew-eintrag:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ew-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  justify-content: space-between;
  font-size: var(--fs-md);
}

.ew-status-zeile {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.ew-status {
  font-weight: 700;
}

.ew-status-ja     { background: var(--success-soft); color: var(--success-ink, var(--ink)); }
.ew-status-nein   { background: var(--warn-soft);    color: var(--ink); }
.ew-status-offen  { background: var(--bg-secondary); color: var(--ink-2); }

.ew-herkunft {
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.ew-text {
  margin: var(--s-2) 0 0 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink);
}

/* Die Folge eines Neins steht nur da, wenn gerade Nein gilt - sonst waere sie
   eine Drohung statt einer Information. */
.ew-folge {
  margin: var(--s-2) 0 0 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-2);
  font-style: italic;
}

.ew-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* Die Fundstelle im Vertragsbuch schiebt sich ans Ende der Reihe und bricht am
   Handy in die naechste Zeile, statt die Knoepfe zu quetschen. */
.ew-quelle {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

@media (max-width: 640px) {
  .ew-quelle {
    margin-left: 0;
    flex-basis: 100%;
  }
}

.ew-verlauf {
  margin: var(--s-3) 0 0 0;
  padding: var(--s-3);
  list-style: none;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.6;
}

.ew-verlauf li + li {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--border-color);
}

/* Verwaltungssicht des Registers: eine Zeile je Einwilligung, Text links,
   Ja/Nein rechts. Schmaler als die Eltern-Sicht - Joana traegt hier zwei
   Dutzend Punkte von einem Papierbogen ab und braucht dabei kurze Wege,
   keinen Fliesstext. */
.ew-admin-gruppe + .ew-admin-gruppe {
  margin-top: var(--s-4);
}

.ew-admin-zeile {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border-color);
}

.ew-admin-zeile:last-child {
  border-bottom: none;
}

.ew-admin-text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.ew-admin-text .ew-quelle {
  margin-left: var(--s-2);
}

.ew-admin-knoepfe {
  display: flex;
  gap: var(--s-2);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .ew-admin-zeile {
    flex-direction: column;
    align-items: stretch;
  }

  .ew-admin-knoepfe .btn {
    flex: 1;
  }
}

/* ===========================================================================
   Vertragsunterlagen zum Ausdrucken (Verwaltung > Kinder > Blatt-Symbol)
   ---------------------------------------------------------------------------
   Fuenf A4-Seiten: Deckblatt mit Paragraf 3, dann die Anlagen A, B, C und S.
   Gerendert wird in #single-doc-print-view, das nur beim Drucken sichtbar ist
   (siehe printSingleDocument in admin.js).

   Gefuellte Werte und leere Linien muessen sich auf Papier unterscheiden -
   sonst sieht niemand, was noch von Hand nachzutragen ist. Deshalb steht ein
   Wert fett auf einer durchgezogenen Linie und ein leeres Feld auf einer
   gepunkteten.
   =========================================================================== */

.vertragsdruck {
  font-family: 'Outfit', system-ui, sans-serif;
  color: #000;
  line-height: 1.45;
}

/* Die Fussnote muss am Fuss der Seite stehen - aber sie darf nicht in die
   Unterschriften laufen, wenn ein Abschnitt laenger als eine Seite wird.
   Eine absolut positionierte Fussnote (position:absolute; bottom:0) tut genau
   das: Sie haengt am Ende des ELEMENTS, nicht am Ende des Papiers, und landete
   bei der 22 Zeilen langen Anlage S mitten auf der Ueberlaufseite quer ueber
   der Unterschriftszeile. Gemessen am 07.09.2026 im PDF-Ausdruck.
   Mit margin-top:auto in einer Spalte gilt beides: Auf einer kurzen Seite
   drueckt es die Fussnote nach unten, auf einer langen laeuft sie einfach
   hinter dem Inhalt her. */
.vd-seite {
  page-break-after: always;
  break-after: page;
  display: flex;
  flex-direction: column;
  min-height: 24cm;
}

.vd-seite:last-child {
  page-break-after: auto;
  break-after: auto;
}

.vertragsdruck h1 {
  font-size: 20pt;
  margin: 0 0 0.2cm;
}

.vertragsdruck h2 {
  font-size: 14pt;
  margin: 0.6cm 0 0.25cm;
  border-bottom: 1.5pt solid #000;
  padding-bottom: 0.1cm;
}

.vertragsdruck h3 {
  font-size: 11.5pt;
  margin: 0.5cm 0 0.15cm;
}

.vd-lede {
  margin: 0 0 0.4cm;
  font-size: 10pt;
}

.vd-hinweis {
  border-left: 2.5pt solid #000;
  padding: 0.2cm 0.3cm;
  margin: 0.3cm 0;
  font-size: 9.5pt;
  background: #f2f2f2;
}

.vd-klein {
  font-size: 8.5pt;
  color: #333;
  margin: 0.2cm 0;
}

.vd-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 0.2cm 0;
  font-size: 10pt;
}

.vd-tabelle th,
.vd-tabelle td {
  text-align: left;
  vertical-align: bottom;
  padding: 0.16cm 0.15cm;
  border-bottom: 0.5pt solid #999;
}

.vd-tabelle > tbody > tr > th,
.vd-tabelle thead th {
  font-weight: 600;
  width: 38%;
  white-space: normal;
}

.vd-zwei thead th,
.vd-zwei tbody th { width: 26%; }

/* Vier Spalten: Die 38 % aus der Grundregel fuer Zeilenkoepfe sind hier viel
   zu breit - die Telefonnummer wurde dadurch zweizeilig umbrochen. Gemessen im
   PDF am 07.09.2026 an Anlage B. */
.vd-drei > tbody > tr > th { width: 16%; }
.vd-drei td { width: auto; }
.vd-drei .vd-wert,
.vd-drei .vd-linie { min-width: 100%; white-space: nowrap; }

.vd-zeiten th,
.vd-zeiten td { width: 33%; }

.vd-einwilligung td { border-bottom: 0.5pt solid #ccc; }
.vd-einwilligung td small { color: #555; font-size: 8pt; }
.vd-jn { width: 32%; white-space: nowrap; text-align: right; }

/* Ein Wert, den die App kennt. */
.vd-wert {
  display: inline-block;
  min-width: 60%;
  font-weight: 600;
  border-bottom: 0.5pt solid #000;
}

/* Eine Linie, die von Hand zu fuellen ist. Gepunktet, damit der Unterschied
   zum gefuellten Feld auch aus einem Meter Entfernung sichtbar ist. */
.vd-linie {
  display: inline-block;
  min-width: 90%;
  height: 0.55cm;
  border-bottom: 0.5pt dotted #666;
}

.vd-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.38cm;
  height: 0.38cm;
  border: 0.75pt solid #000;
  font-size: 7pt;
  line-height: 1;
  vertical-align: -0.08cm;
  overflow: hidden;
}

.vd-box-an { font-weight: 700; }

.vd-unterschriften {
  display: flex;
  gap: 0.8cm;
  margin-top: 1.2cm;
  margin-bottom: 0.6cm;
  page-break-inside: avoid;
  break-inside: avoid;
}

.vd-unterschriften > div { flex: 1; }

.vd-sig {
  display: block;
  border-bottom: 0.75pt solid #000;
  height: 1.1cm;
}

.vd-unterschriften small {
  font-size: 8pt;
  color: #333;
}

/* --------------------------------------------------------------------------
   Downloads (Verwaltungsbereich): Ordner-Reiter (.segment) + Suche/Sortierung
   oben, darunter ein Karten-Raster je Datei. Suchfeld-Aufbau wie .ang-suchfeld
   in angebote.js - eigene Klasse, damit die beiden Reiter sich nicht
   gegenseitig beeinflussen, wenn einer seine Optik aendert.
   -------------------------------------------------------------------------- */
.dl-werkzeugleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.dl-zaehler {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.35em;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--text-muted);
  font-size: 0.78em;
  line-height: 1.5;
}
.segment-btn[aria-selected="true"] .dl-zaehler {
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
}

.dl-suchzeile {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1 1 320px;
  min-width: 0;
  justify-content: flex-end;
}

.dl-suchfeld {
  position: relative;
  flex: 1 1 220px;
  max-width: 320px;
  display: flex;
  align-items: center;
}

.dl-suchfeld > i {
  position: absolute;
  left: 0.8rem;
  width: 17px;
  height: 17px;
  color: var(--text-muted);
  pointer-events: none;
}

.dl-suchfeld input {
  width: 100%;
  padding: 0.62rem 2.4rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-primary);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text-main);
}

.dl-suchfeld input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* Eigener Leeren-Knopf statt des eingebauten (der sonst doppelt neben
   unserem eigenen erscheint, sobald etwas eingetragen ist). */
.dl-suchfeld input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.dl-suchfeld button {
  position: absolute;
  right: 0.55rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  padding: 0.5rem;
}
.dl-suchfeld button i { width: 15px; height: 15px; }

.dl-sortierung {
  width: auto;
  flex: 0 0 auto;
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
}

.dl-karte {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--s-3);
}

.dl-karte-kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.dl-karte-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary-ink);
}
.dl-karte-icon i, .dl-karte-icon svg { width: 22px; height: 22px; }

.dl-karte-info {
  flex: 1 1 auto;
  min-width: 0;
}

.dl-karte-name {
  margin: 0 0 0.3rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kurzer Hinweis unter dem Namen, z. B. dass Namen von Familien in der
   Datei stehen. Bewusst ohne line-clamp: Ein abgeschnittener Warnsatz
   waere schlimmer als eine Karte, die eine Zeile hoeher wird. */
.dl-karte-hinweis {
  margin: 0 0 0.35rem;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--text-muted);
}

.dl-karte-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.dl-karte-typ {
  font-size: 0.72rem;
  padding: 0.1rem 0.5rem;
}

.dl-karte-btn {
  width: 100%;
  justify-content: center;
}

/* Seiten ohne Anmeldung: Ausklapper ueber der Dateiliste. Zusammengeklappt
   nimmt er eine Zeile ein - er ist ein Nachschlagewerk, kein Hauptinhalt. */
.dl-oeffentlich {
  margin-bottom: var(--s-4);
  padding: 0;
}

.dl-oeffentlich-kopf {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  /* 44px Tippflaeche: 12px oben und unten plus Zeilenhoehe. */
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--text-main);
}
.dl-oeffentlich-kopf::-webkit-details-marker { display: none; }

.dl-oeffentlich-kopf i, .dl-oeffentlich-kopf svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--text-muted);
}

.dl-oeffentlich-titel {
  font-weight: 600;
  flex: 1 1 auto;
}

/* Der Pfeil sitzt rechts und dreht sich beim Aufklappen. Als ::after am
   summary statt als eigenes Icon, damit lucide.createIcons() ihn nicht bei
   jedem Neuaufbau des Reiters erneut ersetzen muss. */
.dl-oeffentlich-kopf::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}
.dl-oeffentlich[open] .dl-oeffentlich-kopf::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.dl-oeffentlich-hinweis {
  margin: 0 var(--s-4) var(--s-3);
}

.dl-link-liste {
  list-style: none;
  margin: 0;
  padding: 0 var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.dl-link-zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.dl-link-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary-ink);
}
.dl-link-icon i, .dl-link-icon svg { width: 18px; height: 18px; }

.dl-link-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dl-link-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-main);
}

.dl-link-zweck {
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--text-muted);
}

/* Die Adresse steht sichtbar da, damit man sie auch ohne Kopierknopf
   vorlesen oder abtippen kann - und damit man vor dem Verschicken sieht,
   WAS man verschickt. Umbruch an jeder Stelle: Die Adressen sind laenger
   als die Spalte auf dem Telefon. */
.dl-link-adresse {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  word-break: break-all;
  background: none;
  padding: 0;
}

.dl-link-knoepfe {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Feste Breite, damit der Knopf beim Wechsel auf "Kopiert" oder
   "Nicht moeglich" nicht springt und die Zeile umbaut. */
.dl-link-kopieren { min-width: 7.5rem; }

.dl-link-kopieren.is-kopiert {
  background: var(--ton-gruen-soft);
  border-color: var(--ton-gruen);
  color: var(--ton-gruen);
}
.dl-link-kopieren.is-fehlgeschlagen {
  background: var(--ton-orange-soft);
  border-color: var(--ton-orange);
  color: var(--ton-orange);
}

/* Ersatzweg zum Kopieren ohne Zwischenablage-API: Das Feld muss im Layout
   stehen und markierbar sein - display:none oder visibility:hidden wuerden
   select() wirkungslos machen. Deshalb aus dem Bild geschoben statt
   versteckt. */
.dl-kopierfeld {
  position: fixed;
  top: 0;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  .dl-werkzeugleiste { flex-direction: column; align-items: stretch; }
  .dl-suchzeile { justify-content: stretch; }
  .dl-suchfeld { max-width: none; }

  /* Einspaltig: Icon und Text nebeneinander, die Knoepfe darunter ueber die
     volle Breite - nebeneinander bliebe fuer die Adresse keine Spalte. */
  .dl-link-zeile { flex-wrap: wrap; }
  .dl-link-text { flex: 1 1 60%; }
  .dl-link-knoepfe { width: 100%; }
  .dl-link-kopieren { flex: 1 1 auto; justify-content: center; }
}

.vd-fuss {
  margin-top: auto;
  padding-top: 0.15cm;
  border-top: 0.5pt solid #999;
  font-size: 7.5pt;
  color: #555;
}

/* ===================================================================
   Formularanfragen (12.09.2026)
   ===================================================================
   "Formular senden" im Kinder-Reiter und die Karte, die daraus im
   Eltern-Portal wird. Beide Seiten teilen sich die Klassen, damit eine
   Anfrage oben und unten gleich aussieht.

   Die Tippflaechen sind bewusst mindestens 44px hoch: Joana bedient die
   Verwaltung am Telefon, und ein Haken neben einem Kindernamen ist genau
   die Stelle, an der ein Fehlgriff teuer waere (falsches Kind angefragt).
   ------------------------------------------------------------------- */

.formular-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.formular-chips:empty { display: none; }

.fa-kinder, .fa-formulare { display: flex; flex-direction: column; gap: 2px; }

.fa-kind, .fa-formular {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.fa-kind + .fa-kind, .fa-formular + .fa-formular { margin-top: 6px; }
.fa-kind:hover, .fa-formular:hover { background: var(--bg-2); }
.fa-kind input, .fa-formular input {
  width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--primary);
}
/* align-items: flex-start, sonst zieht sich der Chip "Geschwisterkind" ueber
   die volle Breite - in einer Spalte streckt align-items:stretch jedes Kind. */
.fa-kind > span, .fa-formular > span {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}

/* Die eigene Familie steht oben und ist abgesetzt: Bei Zwillingen ist das
   zweite Kind die eigentliche Nachricht des Dialogs. */
.fa-kind-familie { border-color: var(--primary); background: var(--primary-soft); }

.fa-knoepfe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* --- Die Karte im Eltern-Portal ------------------------------------- */

.fa-karte {
  border-left: 4px solid var(--warn-ink, #a8730f);
}
.fa-karte-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fa-karte h3 { margin: 0; font-size: 1.05rem; }
.fa-karte-notiz {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--bg-2);
  border-radius: 8px;
  font-style: italic;
}
.fa-karte-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.fa-karte-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.fa-karte-zeile > div { flex: 1 1 240px; }
.fa-karte-zeile .btn { min-height: 44px; }

/* --- Steckbrief: was ich ueber das Kind schon weiss ------------------ */

.fa-steckbrief { margin-top: 12px; }
.fa-steckbrief dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 8px 0 0;
}
.fa-steckbrief dt { font-weight: 600; color: var(--ink-2); }
.fa-steckbrief dd { margin: 0; }

@media (max-width: 640px) {
  .fa-karte-zeile { flex-direction: column; align-items: stretch; }
  /* flex-basis meint in einer Spalte die HOEHE. Ohne diese Zeile erbte jedes
     Kind der Zeile die 240px von oben als Mindesthoehe - der Knopf "Jetzt
     ausfuellen" war auf dem Telefon einen halben Bildschirm hoch (gemessen
     12.09.2026 bei 375px). */
  .fa-karte-zeile > div { flex: 0 0 auto; }
  .fa-karte-zeile .btn { width: 100%; justify-content: center; }
  .fa-steckbrief dl { grid-template-columns: 1fr; gap: 0 0; }
  .fa-steckbrief dd { margin-bottom: 6px; }
}

/* ==========================================================================
   Elternwissen (15.09.2026) - Rubrik mit Artikeln im Eltern-Bereich
   ==========================================================================
   Namensraum 'ew-'. Alles hier laeuft ueber Tokens und Klassen, keine
   Inline-Stile (UI-006). Die Schaubilder kommen als SVG aus
   src/elternwissen-bilder.js und brauchen nur eine Breitenregel - ihr
   Innenleben bringen sie selbst mit. */

.ew-bild {
  width: 100%;
  height: auto;
  display: block;
}

.ew-kopfbild {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
}

/* --- Uebersicht: Suche und Filter ---------------------------------------- */

.ew-suche {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  /* font-family muss ausgeschrieben sein: input, select und textarea erben
     die Schrift des Dokuments NICHT - ein textarea stand sonst in
     Schreibmaschinenschrift da und sah aus wie ein Codefeld.
     1rem verhindert außerdem, dass iOS beim Hineintippen zoomt. */
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 10px;
}
.ew-suche:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.ew-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Die Filterchips sind Tippflaechen, keine Beschriftungen - deshalb die
   44px aus der Tablet-Abnahme, auch wenn ein Chip sonst kleiner waere. */
.ew-filter .chip {
  min-height: 44px;
  /* Der kuerzeste Chip ("Alle") war nur 42px breit - die Hoehe stimmte, die
     Breite nicht. Gemessen 20.09.2026 auf #/eltern/ratgeber. */
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Uebersicht: Artikelkarten ------------------------------------------- */

.ew-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.ew-karte {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 120ms ease, transform 120ms ease;
}
.ew-karte:hover,
.ew-karte:focus-visible {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.ew-karte-bild {
  flex: 0 0 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--bg-2);
}
.ew-karte-bild .ew-kopfbild { max-width: 64px; }

.ew-karte-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ew-karte-bereich {
  /* 0,72rem waren 11,5px, gemessen 20.09.2026 auf den Artikelkarten. */
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.ew-karte-titel {
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.ew-karte-anriss {
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.4;
}
.ew-karte-fuss {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--ink-3);
  margin-top: 4px;
}

.ew-marke {
  background: var(--primary-soft);
  color: var(--primary-ink);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* --- Tonung je Bereich ---------------------------------------------------- */
/* Wie in der Navigation: der Ton tont Flaeche und Rand, nie die Schrift. */
.ew-ton-gruen   { background: var(--ton-gruen-soft); }
.ew-ton-blau    { background: var(--ton-blau-soft); }
.ew-ton-orange  { background: var(--ton-orange-soft); }
.ew-ton-primary { background: var(--primary-soft); }
.ew-ton-gold    { background: var(--gold-soft); }

/* --- Artikelansicht ------------------------------------------------------- */

.ew-zurueck { margin-bottom: 12px; min-height: 44px; }

.ew-kopf {
  display: flex;
  justify-content: center;
  padding: 16px;
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
}

.ew-bereichszeile {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin: 0;
}

.ew-h2 {
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 4px 0 6px;
  color: var(--ink);
}

.ew-h3 {
  font-size: 1.05rem;
  margin: 22px 0 8px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ew-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-3);
  margin: 0 0 16px;
}

/* Lesetext. 65 Zeichen Zeilenlaenge und 1.65 Zeilenabstand - die Artikel
   sind laenger als alles andere in dieser App und werden auf dem Telefon
   gelesen, oft im Stehen. */
.ew-p {
  margin: 0 0 12px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 65ch;
}

.ew-liste {
  margin: 0 0 12px;
  padding-left: 22px;
  line-height: 1.6;
  max-width: 65ch;
  color: var(--ink);
}
.ew-liste li { margin-bottom: 6px; }

.ew-figur {
  margin: 16px 0;
  padding: 12px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
}
.ew-figur figcaption {
  font-size: 0.83rem;
  color: var(--ink-2);
  margin-top: 8px;
  text-align: center;
}

/* .hinweis ist ein Flex-Kasten (Icon links, Text rechts). Hier steht aber
   eine Überschrift ÜBER dem Text - als Flex-Kind wurde daraus eine eigene
   schmale Spalte, in der ein längerer Titel Buchstabe für Buchstabe umbrach.
   Deshalb hier zurück auf block; Farbe und Rand von .hinweis bleiben. */
.ew-kasten {
  display: block;
  margin: 14px 0;
  line-height: 1.55;
  max-width: 65ch;
}
.ew-kasten strong {
  display: block;
  margin-bottom: 4px;
}

/* --- Kurz gesagt ---------------------------------------------------------- */

.ew-kurz {
  background: var(--primary-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.ew-kurz-titel {
  font-size: 0.95rem;
  margin: 0 0 8px;
  color: var(--primary-ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ew-kurz ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.55;
}
.ew-kurz li { margin-bottom: 6px; color: var(--ink); }
.ew-kurz li:last-child { margin-bottom: 0; }

/* --- "Was man oft hoert" -------------------------------------------------- */

.ew-irrtum {
  border-left: 3px solid var(--line-strong);
  padding: 2px 0 2px 14px;
  margin-bottom: 16px;
}
.ew-irrtum-satz {
  font-style: italic;
  color: var(--ink-2);
  margin: 0 0 6px;
  line-height: 1.5;
  max-width: 65ch;
}
.ew-irrtum-antwort {
  margin: 0;
  line-height: 1.6;
  color: var(--ink);
  max-width: 65ch;
}

/* --- Quellen -------------------------------------------------------------- */

.ew-quellen {
  margin-top: 26px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.ew-quellen summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink-2);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.ew-quellen ul {
  margin: 8px 0;
  padding-left: 20px;
  font-size: 0.87rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.ew-quellen li { margin-bottom: 5px; }
.ew-quellen-fuss {
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 10px 0 0;
}

/* Verweis auf die Fundstelle einer Quelle (15.09.2026).
   Eigene Zeile statt inline: In der Quellenliste stehen lange Titel, und ein
   Link mitten im Fliesstext waere auf dem Tablet kaum zu treffen. So bekommt
   er die vollen 44 px Hoehe, ohne die Titelzeile auseinanderzuziehen. */
.ew-quelle-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 2px;
  color: var(--primary-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-size: 0.85rem;
}

/* Ein Hinweis zur Quelle selbst - etwa, dass eine Leitlinie abgelaufen ist.
   Steht unter der Angabe, nicht dahinter: in einer Zeile mit dem Titel waere
   er entweder uebersehen oder wichtiger als die Quelle. */
.ew-quelle-hinweis {
  display: block;
  margin-top: 2px;
  color: var(--muted-ink);
  font-size: 0.85rem;
  line-height: 1.45;
}

.ew-weiter { margin-top: 26px; }
.ew-weiter .ew-karte { margin-bottom: 10px; }

/* --- Empfehlung an eine Familie ------------------------------------------- */

.ew-empfehlung {
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.ew-empfehlung-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--ink);
}
.ew-empfehlung-weg {
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  cursor: pointer;
}
.ew-empfehlung-weg:hover { background: rgba(0, 0, 0, 0.06); }
.ew-empfehlung-text {
  margin: 0 0 10px;
  line-height: 1.55;
  color: var(--ink);
}

/* --- Verwaltung: eigene Beitraege und Empfehlungen ------------------------ */

.ew-verwaltungsliste {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ew-zeile {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
}
.ew-zeile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ew-zeile-knoepfe {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.ew-zeile-knoepfe .btn { min-height: 44px; }

.ew-bildvorschau {
  display: flex;
  justify-content: center;
  padding: 10px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
}
.ew-bildvorschau .ew-kopfbild { max-width: 160px; }

/* Das Schreibfeld ist das Herz des Editors - es darf ruhig hoch sein, und
   die Schrift bleibt bei 1rem, damit iOS beim Hineintippen nicht zoomt. */
.ew-textfeld {
  min-height: 300px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
}

.ew-schalter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
.ew-schalter input { width: 20px; height: 20px; }

/* Erklaertext unter einer Feldbeschriftung. Eigene Klasse, weil
   .form-abschnitt seine Kinder auf fett setzt (fuer die Labels) - ein
   erklaerender Satz sah dadurch aus wie eine zweite Beschriftung. */
.ew-feldhinweis {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 8px;
}
.ew-feldhinweis code {
  background: var(--bg-2);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Empfehlungsleiste im gelesenen Artikel (nur Verwaltung). Sitzt zwischen
   Artikelkopf und Text, deshalb ein eigener Rahmen - sonst liest sie sich
   wie ein Teil des Artikels. */
.ew-empfehlen-hier {
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 4px 18px 18px;
  margin: 18px 0 24px;
}
.ew-empfehlen-hier .ew-h3 { margin-top: 16px; }

/* --- Schmal (Telefon) ----------------------------------------------------- */

@media (max-width: 640px) {
  .ew-karten { grid-template-columns: 1fr; }
  .ew-h2 { font-size: 1.2rem; }
  /* Knoepfe unter den Text statt daneben - nebeneinander bleibt fuer den
     Titel sonst eine Spalte von zwei Wortbreiten. */
  .ew-zeile { flex-direction: column; align-items: stretch; }
  .ew-zeile-knoepfe .btn { flex: 1; justify-content: center; }
  /* Das Kopfbild des Artikels darf auf dem Telefon nicht die halbe erste
     Bildschirmseite fuellen - der Titel soll ohne Scrollen sichtbar sein. */
  .ew-kopf { padding: 10px; }
  .ew-kopf .ew-kopfbild { max-width: 150px; }
}

/* ==========================================================================
   Wickeltagebuch (18.09.2026)
   Eigener Reiter unter "Kinder": Uebersicht -> Kind -> Heute/Verlauf/Vorrat.
   Markup in src/components/wickeln.js. Farben kommen ausschliesslich aus den
   Tokens oben - kein fester Farbwert in diesem Block.
   ========================================================================== */

/* --- Uebersicht --- */
.wk-uebersicht {
  display: grid;
  gap: var(--s-3);
}
.wk-kind-karte {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.wk-kind-karte:hover {
  border-color: var(--primary);
}
.wk-kind-karte:focus-visible {
  outline: 3px solid var(--primary-soft);
  outline-offset: 2px;
}
.wk-kind-kopf {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
}
.wk-kind-namen {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wk-kind-name {
  font-size: var(--fs-md);
  font-weight: 600;
}
.wk-kind-heute {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.wk-kind-heute .ist-leer {
  color: var(--ink-3);
}
.wk-pfeil {
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.wk-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex-shrink: 0;
}
.wk-avatar-leer {
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-weight: 700;
}

/* --- Hinweise (Muster) --- */
.wk-hinweis-liste {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.wk-hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.wk-hinweis > i,
.wk-hinweis > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.wk-hinweis-hinweis {
  background: var(--info-soft);
  color: var(--info-ink);
}
.wk-hinweis-achtung {
  background: var(--warn-soft);
  color: var(--warn-ink);
}
.wk-hinweis-fuss,
.wk-feld-fuss,
.wk-schnell-fuss {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.wk-hinweise .wk-hinweis-liste {
  margin-top: 0;
}

/* --- Schnelleingabe --- */
.wk-schnell-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.wk-schnell-btn,
.wk-schnell-btn-mehr {
  min-height: 44px;
}

/* --- Formular --- */
.wk-feld + .wk-feld {
  margin-top: var(--s-3);
}
.wk-feld-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: var(--s-2);
}
.wk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.wk-chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}
.wk-chip > i,
.wk-chip > svg {
  width: 16px;
  height: 16px;
}
.wk-chip.ist-aktiv {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
/* Die Windel-Chips tragen eine Zustandsfarbe (Sauber = gruen, Wunder Popo
   und Blaue Flecken = rot, Roetungen und Pusteln = gelb) - schon unausgewaehlt
   als Rand/Schrift, ausgewaehlt als Flaeche. .chip-success/-warn/-danger
   allein wuerden von .chip-btn ueberschrieben, darum eigens fuer .wk-chip. */
.wk-chip.chip-success { border-color: var(--success); color: var(--success-ink); }
.wk-chip.chip-warn    { border-color: var(--warn);    color: var(--warn-ink); }
.wk-chip.chip-danger  { border-color: var(--danger);  color: var(--danger-ink); }
.wk-chip.chip-success.ist-aktiv { background: var(--success); border-color: var(--success); color: #fff; }
.wk-chip.chip-warn.ist-aktiv    { background: var(--warn);    border-color: var(--warn);    color: #fff; }
.wk-chip.chip-danger.ist-aktiv  { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.wk-intern {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  padding: 1px var(--s-2);
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--ink-3);
}
.wk-formular-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.wk-formular-aktionen .btn {
  min-height: 44px;
}

/* --- Tagesliste --- */
.wk-tag + .wk-tag {
  margin-top: var(--s-3);
}
.wk-tag-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.wk-tag-kopf h3 {
  margin: 0;
  font-size: var(--fs-md);
}
.wk-tag-zahl {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.wk-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wk-eintrag {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
}
.wk-eintrag:first-child {
  border-top: 0;
}
.wk-eintrag-zeit {
  flex-shrink: 0;
  min-width: 3.5em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-2);
  padding-top: 2px;
}
.wk-eintrag-mitte {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.wk-eintrag-art {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-weight: 600;
}
.wk-eintrag-art > i,
.wk-eintrag-art > svg {
  width: 16px;
  height: 16px;
  color: var(--ink-2);
}
.wk-eintrag-zusatz {
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.wk-marken {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.wk-marke {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  padding: 1px var(--s-2);
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--ink-2);
}
.wk-marke > i,
.wk-marke > svg {
  width: 13px;
  height: 13px;
}
.wk-marke-leicht   { background: var(--gold-soft);   color: var(--warn-ink); }
.wk-marke-deutlich { background: var(--warn-soft);   color: var(--warn-ink); }
.wk-marke-wund     { background: var(--danger-soft); color: var(--danger-ink); }
.wk-eintrag-bemerkung {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.wk-geaendert {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-style: italic;
}
.wk-eintrag-aktionen {
  display: flex;
  gap: var(--s-1);
  flex-shrink: 0;
}
.wk-eintrag-aktionen .btn {
  min-width: 44px;
  min-height: 44px;
}

/* --- Verlauf und Sauberkeit --- */
.wk-zeitraum .segment-btn[aria-pressed="true"] {
  background: var(--surface);
  font-weight: 600;
}
.wk-wochen {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.wk-woche {
  display: grid;
  grid-template-columns: 4.5em 1fr auto;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
}
.wk-woche-name {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.wk-woche-balken {
  position: relative;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  overflow: hidden;
}
.wk-woche-fuellung,
.wk-woche-erfolg {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: var(--radius-pill);
}
.wk-woche-fuellung { background: var(--info-soft); }
.wk-woche-erfolg   { background: var(--success); }
.wk-woche-zahl {
  color: var(--ink-2);
  white-space: nowrap;
}

/* --- Windelvorrat --- */
.wk-vorrat-stand {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--radius-md);
  background: var(--bg-2);
  margin-bottom: var(--s-3);
}
.wk-vorrat-stand.ist-knapp {
  background: var(--warn-soft);
  color: var(--warn-ink);
}
.wk-vorrat-zahl {
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.wk-nachfuellen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.wk-nachfuellen .btn {
  min-height: 44px;
}
.wk-schalter {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  cursor: pointer;
}

.wk-zaehler {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.wk-laden {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  color: var(--ink-3);
}

/* --- Kurzzeile in der Tagesprotokoll-Karte ---
   Der Abschnitt "Wickeln" klappt dort seit dem 18.09.2026 nichts mehr auf: er
   zeigt den Stand und fuehrt in den eigenen Reiter. */
.abschnitt-statisch {
  cursor: default;
}
.abschnitt-schalter.abschnitt-statisch:hover .abschnitt-titel {
  color: inherit;
}

@media (max-width: 640px) {
  .wk-eintrag {
    flex-wrap: wrap;
  }
  .wk-eintrag-aktionen {
    margin-inline-start: auto;
  }
  .wk-woche {
    grid-template-columns: 4.5em 1fr;
  }
  .wk-woche-zahl {
    grid-column: 1 / -1;
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   Sicherheitsnetz fuer [hidden] - die LETZTE Regel der Datei
   --------------------------------------------------------------------------
   [hidden] ist eine Autor-Regel des Browsers mit Spezifitaet 0-1-0 - genau so
   viel wie eine Klasse. Bei Gleichstand gewinnt die SPAETERE Regel. Solange
   diese Zeile in der Mitte der Datei stand, hat sie deshalb nur fuer Klassen
   gegolten, die weiter oben stehen.

   Gemessen am 14.09.2026 im Pruefstand: #poll-details-1 trug hidden und war
   trotzdem sichtbar (display: flex aus .poll-details-content, Zeile 3058 -
   also nach dem alten Standort der Regel). Von 50 versteckten Elementen war
   es das einzige; fuer die anderen 49 aendert der Umzug nichts, weil sie
   ohnehin schon display:none hatten.

   Wer hier etwas anfuegt, fuegt es DAVOR an. */

/* ==========================================================================
   Mobil-Nachbesserung 20.09.2026: Tippflaechen und Umbrueche
   ==========================================================================
   Warum dieser Block ganz unten steht und nicht in der Touch-Regel bei
   Zeile ~602: jene Regel steht VOR den Basisregeln der Umschalter-Familie
   (.segment-btn und Verwandte, min-height 36px, Zeile ~700). Beide haben
   dieselbe Spezifitaet, bei Gleichstand gewinnt die spaetere Regel - im
   Emulator mit pointer: coarse nachgemessen: .btn-sm kam auf 44px,
   .segment-btn blieb bei 36px, obwohl beide in der Liste stehen. Von hier
   unten aus gewinnt die Regel gegen jede Basisregel der Datei.

   Die Bedingung hat zwei Teile. (hover: none) and (pointer: coarse) ist der
   eigentliche Fall: Finger statt Maus. (max-width: 900px) ist das Netz
   darunter - ein Tablet im Schreibtischbetrieb oder ein Browser, der den
   Zeigertyp falsch meldet, faellt sonst durch. Das aendert auch ein schmal
   gezogenes Desktop-Fenster; bewusst in Kauf genommen, weil eine zu grosse
   Flaeche mit der Maus nicht stoert, eine zu kleine unter dem Finger schon.

   Was hier bewusst FEHLT: .ang-merk (der Merkstern traegt seine 44px schon
   ueber ein unsichtbares ::before und wuerde als Kreis sichtbar wachsen)
   und .form-label (eine Beschriftung ist kein Bedienelement; 44px je Label
   wuerde jedes Formular auseinanderziehen, ohne dass etwas besser
   getroffen wird - das Feld darunter traegt die Flaeche). */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  .btn,
  .btn-sm,
  .btn-xs,
  .btn-link,
  .segment-btn,
  .meal-viewswitch-btn,
  .rb-viewswitch-btn,
  .ang-modus-knopf,
  .nav-tab-link,
  .chip-btn,
  .btn-filter,
  .ang-schalter-knopf,
  .rb-chip-btn,
  .rb-quelle-btn,
  .pedagogy-area-tab,
  .ang-auswahl,
  button.chip,
  .wissen-sprung-btn,
  .meal-free-check,
  .app-nav-item,
  .handscanner-label,
  .intake-field select.intake-input,
  .intake-field textarea.intake-input,
  .intake-field input[type="date"].intake-input,
  .intake-field input[type="number"].intake-input,
  .dl-suchfeld input,
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    min-height: 44px;
  }

  /* Knoepfe, die wie Text aussehen: die Flaeche waechst, die Schrift nicht.
     Ohne inline-flex saesse der Text oben in der 44px hohen Box. */
  .mitbring-reset,
  .ang-ziel-mehr,
  .offen-verweis {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Zu schmal statt zu niedrig: Symbolknoepfe und das Logo in der Kopfzeile
     (bei sehr schmalen Geraeten faellt der Schriftzug weg, uebrig bleibt
     der 36px-Kreis). */
  .btn-icon,
  .app-brand,
  .ang-zeile-merken,
  .meal-viewswitch-btn,
  .rb-viewswitch-btn,
  button.chip,
  .edit-ann-btn,
  .delete-ann-btn {
    min-width: 44px;
  }

  .ang-zeile-merken {
    justify-content: center;
  }
}

/* Lange Beschriftungen duerfen im Knopf umbrechen, statt die ganze Seite
   waagerecht aufzureissen. .btn setzt white-space: nowrap; bei
   "Unbestaetigte Eltern jetzt erinnern (Benachrichtigung + Push)" waren das
   414px Knopf in einem 375px breiten Bild. Erst unter 480px, damit auf
   Tablet und Desktop kein Knopf unnoetig zweizeilig wird. */
@media (max-width: 480px) {
  .btn {
    white-space: normal;
  }
}

/* Die Unterschriftenzeilen der Dokumentenvorschau stehen zu dritt
   nebeneinander (flex: 1 aus .u-fl-1). Am Handy passt das nicht: die
   dritte Spalte lief aus dem Papier heraus und die ganze Seite liess sich
   waagerecht schieben. Hier bekommt jede Zeile eine eigene Reihe.
   flex-basis braucht !important, weil .u-fl-1 in bausteine.css
   "flex: 1 !important" setzt - der Selektor hier ist spezifischer und
   gewinnt deshalb trotz gleicher Wichtung. */
@media (max-width: 700px) {
  .doc-preview-paper .u-d-flex.u-jc-space-between {
    flex-wrap: wrap;
  }
  .doc-preview-paper .u-d-flex.u-jc-space-between > .u-fl-1 {
    flex-basis: 100% !important;
    min-width: 0;
    overflow-wrap: break-word;
  }
}

[hidden] {
  display: none;
}