@import url("/static/fonts/fonts.css");

/* ---------------------------------------------------------------------------
   Mittagessen – Design System
   Anthroposophisches Bild in Material-Struktur: warme, lasierte Erdpigmente,
   humanistische Schrift, keine rechten Winkel, weiche warme Elevation.
   Tokens 1:1 aus dem Design-System-Projekt „Mittagessen Design System".
   --------------------------------------------------------------------------- */

/* Baar Antropos (Lutz Baar, nach Steiners Formenlehre) – Display-Schrift.
   Nur ein Schnitt; Fett wird synthetisiert. Selbst gehostet, keine externen
   Dienste (siehe DATENSCHUTZ.md). */
@font-face {
  font-family: "Baar Antropos";
  src: url("/static/fonts/antropos.woff2") format("woff2"),
       url("/static/fonts/antropos.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Farbe: warmer Grund, Kirchgrün, vier Lasur-Akzente --- */
:root {
  --green-800: #1f5238;
  --green-700: #2e6b4c;
  --green-600: #3f8060;
  --green-200: #a9cdb6;
  --green-100: #dfeee2;
  --green-050: #eef6ee;

  --ochre-800: #7d5a12;
  --ochre-600: #c08a25;
  --ochre-200: #e8cd92;
  --ochre-100: #f8ecce;

  --terra-800: #8e3a2b;
  --terra-700: #ab4835;
  --terra-200: #e0aa9c;
  --terra-100: #f8e2d9;

  --lapis-700: #3a5878;
  --lapis-200: #b8c8db;
  --lapis-100: #e3eaf2;

  --plum-700: #6a4664;
  --plum-100: #efe4ee;

  --paper-050: #f6f3ec;
  --paper-075: #f1ede4;
  --paper-100: #faf7f1;
  --paper-200: #ece6d9;
  --paper-300: #ded8ca;
  --paper-400: #c6bfad;
  --paper-500: #b4ac98;
  --white: #fffdf9;

  --ink-900: #231f1a;
  --ink-800: #2f2a24;
  --ink-700: #4a443b;
  --ink-600: #6f6759;
  --ink-500: #8b8375;

  /* --- Schrift --- */
  --font-display: "Baar Antropos", "Alegreya", "Palatino Linotype", Georgia, serif;
  --font-ui: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, monospace;

  --text-display: 2rem;
  --text-h1: 1.6rem;
  --text-h2: 1.2rem;
  --text-body: 1.05rem;
  --text-kassen: 1.2rem;
  --text-checkbox: 1.25rem;
  --text-muted: 0.95rem;
  --text-small: 0.875rem;
  --text-badge: 0.8rem;
  --text-hint: 0.78rem;

  --leading-tight: 1.2;
  --leading-body: 1.55;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 600;
  --tracking-display: 0;
  --tracking-code: 0.06em;

  /* --- Maß: rem-Brüche, kein 4px-Raster --- */
  --content-max: 900px;
  --narrow-max: 480px;
  --page-pad: 1rem;
  --card-pad: 1rem;

  /* --- Form: nichts hat rechte Winkel --- */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* --- Elevation: Material-Stufen, Schatten warm-braun statt schwarz --- */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(47, 42, 36, .06), 0 1px 3px 1px rgba(47, 42, 36, .05);
  --elevation-2: 0 1px 2px rgba(47, 42, 36, .07), 0 2px 6px 2px rgba(47, 42, 36, .06);
  --elevation-3: 0 4px 8px 3px rgba(47, 42, 36, .07), 0 1px 3px rgba(47, 42, 36, .08);
  --elevation-4: 0 6px 10px 4px rgba(47, 42, 36, .08), 0 2px 3px rgba(47, 42, 36, .08);

  /* --- Bewegung: wächst und legt sich, nichts schnappt --- */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --dur-short: 150ms;
  --dur-medium: 250ms;

  /* --- Semantische Namen: diese in Komponenten benutzen --- */
  --surface-page: var(--paper-050);
  --surface-card: var(--white);
  --surface-inset: var(--paper-200);
  --surface-panel: var(--paper-100);
  --surface-brand: var(--green-700);

  --text-default: var(--ink-800);
  --text-subtle: var(--ink-600);
  --text-faint: var(--ink-500);
  --text-on-brand: var(--white);
  --text-nav-on-brand: var(--green-050);
  --text-link: var(--green-700);
  --text-link-hover: var(--green-800);
  --text-heading: var(--green-800);
  --text-positive: var(--green-700);
  --text-negative: var(--terra-700);

  --border-card: var(--paper-300);
  --border-field: var(--paper-400);
  --border-table: var(--paper-200);
  --border-cut: var(--ink-500);
  --border-focus: var(--green-600);

  --action-primary-bg: var(--green-700);
  --action-primary-fg: var(--white);
  --action-default-bg: var(--white);
  --action-default-border: var(--paper-400);
  --action-danger-fg: var(--terra-700);

  --state-layer-ink: rgba(47, 42, 36, .08);
  --state-layer-light: rgba(255, 253, 249, .14);

  --elevation-card: var(--elevation-1);
  --elevation-card-hover: var(--elevation-2);
  --elevation-bar: var(--elevation-2);
  --elevation-raised: var(--elevation-3);

  --status-ok-bg: var(--green-100);
  --status-ok-border: var(--green-200);
  --status-ok-fg: var(--green-800);
  --status-warn-bg: var(--ochre-100);
  --status-warn-border: var(--ochre-200);
  --status-warn-fg: var(--ochre-800);
  --status-error-bg: var(--terra-100);
  --status-error-border: var(--terra-200);
  --status-error-fg: var(--terra-800);
  --status-info-bg: var(--lapis-100);
  --status-info-border: var(--lapis-200);
  --status-info-fg: var(--lapis-700);
  --status-neutral-bg: var(--paper-200);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  background: var(--surface-page);
  color: var(--text-default);
  line-height: var(--leading-body);
}

main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--page-pad);
}

/* Überschriften in der Display-Schrift, im dunklen Grün */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--text-heading);
}

h1 { font-size: var(--text-h1); margin: 0.9rem 0 0.8rem; }
h2 { font-size: var(--text-h2); margin: 0 0 0.5rem; }
h3 { font-size: var(--text-body); margin: 0 0 0.4rem; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }

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

/* --- Topbar: grünes Band mit Elevation, Marke in der Display-Schrift --- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--surface-brand);
  color: var(--text-on-brand);
  padding: 0.7rem 1.15rem;
  box-shadow: var(--elevation-bar);
  position: relative;
  z-index: 1;
}

.topbar .brand {
  color: var(--text-on-brand);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-decoration: none;
}
.topbar .brand:hover { color: var(--text-on-brand); text-decoration: none; }

.topbar nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.topbar nav a { color: var(--text-nav-on-brand); text-decoration: none; }
.topbar nav a:hover { color: var(--text-nav-on-brand); text-decoration: underline; }

/* Trennt Alltag von Verwaltung, ohne eine Linie zu ziehen */
.topbar nav .nav-sep {
  width: 1px;
  height: 1.1rem;
  background: var(--state-layer-light);
}

/* --- Klappmenü der Küche ---
   Vier Oberkategorien statt zwölf gleichrangiger Links. Als <details>, damit es
   ohne JavaScript funktioniert; das name-Attribut macht daraus ein Akkordeon,
   bei dem sich die anderen schließen. */
.topbar .menue { position: relative; }
.topbar .menue > summary {
  list-style: none;
  cursor: pointer;
  color: var(--text-nav-on-brand);
  padding: 0.1rem 0.1rem;
  white-space: nowrap;
}
.topbar .menue > summary::-webkit-details-marker { display: none; }
/* Ein kleiner Winkel sagt „hier ist mehr“ – ohne eine Icon-Sprache zu erfinden */
.topbar .menue > summary::after {
  content: " ⌄";
  opacity: 0.7;
}
.topbar .menue[open] > summary { text-decoration: underline; }
.topbar .menue > summary:hover { text-decoration: underline; }

.menue-inhalt {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin-top: 0.45rem;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-raised);
}
/* .topbar nav a faerbt hellgruen fuer den gruenen Balken – im aufgeklappten
   Menue liegt der Text aber auf Weiss. Die Regel muss die Balken-Regel
   ueberbieten, sonst ist das Menue unlesbar: zwei Klassen gegen eine. */
.topbar .menue-inhalt a {
  color: var(--text-default);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}
.topbar .menue-inhalt a:hover {
  background: var(--surface-inset);
  color: var(--text-link-hover);
  text-decoration: none;
}

/* --- Navigation auf schmalen Schirmen ---
   Vorher griff die Umstellung erst unter 700px. Dazwischen – und das ist die
   Breite eines quer gehaltenen Telefons oder eines schmalen Fensters – standen
   vier Klappmenüs in mehreren Zeilen, das aufgeklappte legte sich über die
   Seite, und weil die Kopfzeile ihre Kinder auseinanderschiebt, lagen die
   Punkte über die ganze Breite verstreut.

   Jetzt wird die Navigation unter 900px zu einer Liste: untereinander, volle
   Breite, nichts überlappt. Der Schalter „Menü“ hält sie zusammengeklappt –
   sichtbar nur, wenn JavaScript ihn zeigt (siehe header.ejs). */
.nav-schalter {
  display: none;
  background: none;
  border: 1px solid var(--state-layer-light);
  border-radius: var(--radius-xs);
  color: var(--text-on-brand);
  font: inherit;
  cursor: pointer;
  padding: 0.35rem 0.7rem;
}
.nav-schalter::after { content: " ⌄"; opacity: 0.7; }
.nav-schalter[aria-expanded='true']::after { content: " ⌃"; }

@media (max-width: 900px) {
  .topbar { align-items: center; }
  /* :not([hidden]) – sonst überbietet diese Regel das hidden-Merkmal, und der
     Schalter erschiene auch ohne JavaScript, ohne etwas tun zu können. */
  .nav-schalter:not([hidden]) { display: inline-flex; }

  .topbar[data-nav='zu'] nav { display: none; }
  .topbar nav {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    margin-top: 0.3rem;
  }
  /* Fingerbreite Ziele statt Textzeilen */
  .topbar nav > a,
  .topbar .menue > summary { padding: 0.6rem 0.15rem; }
  .topbar nav .nav-sep { width: 100%; height: 1px; margin: 0.35rem 0; }
  /* Der Abmelden-Knopf ist ein Knopf und stand deshalb um seine eigene
     Polsterung eingerückt – in einer Liste fällt das auf. */
  .topbar nav form.inline { padding: 0.45rem 0; }
  .topbar nav form.inline button.linklike { padding-left: 0; padding-right: 0; }

  /* Das Untermenü schiebt die Liste auseinander, statt sich darüberzulegen */
  .menue-inhalt {
    position: static;
    box-shadow: none;
    border: none;
    background: var(--state-layer-light);
    margin: 0.1rem 0 0.4rem;
  }
  .topbar .menue-inhalt a { color: var(--text-on-brand); padding: 0.55rem 0.7rem; }
  .topbar .menue-inhalt a:hover { background: var(--state-layer-light); color: var(--text-on-brand); }
}

/* --- Karte: die eine Fläche --- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-card);
  padding: var(--card-pad);
  margin: 0 0 1rem;
  transition: box-shadow var(--dur-medium) var(--ease-standard);
}

.card.narrow, .narrow { max-width: var(--narrow-max); }

/* Anmelde-/Registrier-Panel: die größte Rundung im System */
.card.panel {
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin-top: 1.5rem;
}

/* --- Formulare: Label über dem Feld, blockweise, keine Floating Labels --- */
label { display: block; margin: 0.6rem 0; }
label.inline { display: inline-block; margin-right: 0.8rem; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"], select {
  display: block;
  width: 100%;
  padding: 0.45rem 0.55rem;
  margin-top: 0.2rem;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-default);
  font: inherit;
}

input:focus, select:focus { border-color: var(--border-focus); }

label.inline input[type="checkbox"] { display: inline; width: auto; }
input[type="checkbox"] { accent-color: var(--green-700); }

.row { display: flex; gap: 0.8rem; }
.row label { flex: 1; }

.row-form { display: flex; gap: 0.4rem; align-items: center; }
.row-form input { margin-top: 0; }
input.short { width: 9rem; }

/* --- Knöpfe: 10px Radius, warmer State-Layer, Elevation nur bei primary --- */
button {
  font: inherit;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--action-default-border);
  background: var(--action-default-bg);
  color: var(--text-default);
  cursor: pointer;
  transition:
    box-shadow var(--dur-medium) var(--ease-standard),
    background-color var(--dur-short) var(--ease-standard),
    color var(--dur-short) var(--ease-standard);
}

button:hover { background-image: linear-gradient(var(--state-layer-ink), var(--state-layer-ink)); }

button.primary {
  background: var(--action-primary-bg);
  border-color: var(--action-primary-bg);
  color: var(--action-primary-fg);
  box-shadow: var(--elevation-1);
}
button.primary:hover {
  box-shadow: var(--elevation-card-hover);
  background-image: linear-gradient(var(--state-layer-light), var(--state-layer-light));
}
button.primary:active { box-shadow: var(--elevation-1); }

button.danger {
  border-color: var(--action-danger-fg);
  color: var(--action-danger-fg);
  background: var(--action-default-bg);
}
button.danger:hover { background: var(--status-error-bg); background-image: none; }

button.linklike {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-nav-on-brand);
  padding: 0.25rem 0.35rem;
  text-decoration: none;
}
button.linklike:hover { background-image: none; text-decoration: underline; }

form.inline { display: inline-flex; gap: 0.4rem; align-items: center; }

/* --- Kassen-Tasten: ein Tipp in der Mittagsschlange --- */
.preset-row { display: inline-flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.4rem 0.6rem 0.5rem 0; }

button.preset {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 6.5rem;
  padding: 0.7rem 1.1rem;
  /* Beträge stehen in der UI-Schrift – Antropos ist dafür zu unruhig
     und kennt kein Euro-Zeichen. */
  font-size: 1.3rem;
  font-weight: var(--weight-bold);
  background: var(--action-primary-bg);
  border-color: var(--action-primary-bg);
  color: var(--action-primary-fg);
  box-shadow: var(--elevation-1);
}
button.preset:hover {
  box-shadow: var(--elevation-card-hover);
  background-image: linear-gradient(var(--state-layer-light), var(--state-layer-light));
}
button.preset:active { box-shadow: var(--elevation-1); }

button.preset small {
  font-size: var(--text-hint);
  font-weight: var(--weight-normal);
  opacity: 0.85;
}

button.preset.preset-kaution {
  background: var(--surface-card);
  border-color: var(--action-default-border);
  color: var(--text-heading);
}
button.preset.preset-kaution:hover {
  background-image: linear-gradient(var(--state-layer-ink), var(--state-layer-ink));
}

/* --- Chips: Schnellauswahl in dichten Zeilen (8px, nicht Pille) --- */
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.7rem; }

.chip {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--green-200);
  border-radius: var(--radius-xs);
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-standard), color var(--dur-short) var(--ease-standard);
}
.chip:hover { background: var(--surface-brand); color: var(--text-on-brand); text-decoration: none; }

/* --- Tabellen: nur Grundlinien, keine Zebras, keine Senkrechten --- */
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border-table);
  vertical-align: middle;
}
th { font-weight: var(--weight-semibold); }
td.num, th.num { text-align: right; }
td.checkbox-cell { font-size: var(--text-checkbox); width: 2rem; }

/* --- Flash: die einzige Rückmeldung, einmal pro Seite --- */
.flash {
  padding: 0.8rem 1.1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-card);
  margin-bottom: 1rem;
}
.flash-success { background: var(--status-ok-bg); border: 1px solid var(--status-ok-border); }
.flash-error { background: var(--status-error-bg); border: 1px solid var(--status-error-border); }
.flash-warn { background: var(--status-warn-bg); border: 1px solid var(--status-warn-border); }
.flash-info { background: var(--status-info-bg); border: 1px solid var(--status-info-border); }

/* --- Badges: Zustand als Wort, nicht als Zeichen --- */
.badge {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-badge);
  font-weight: var(--weight-medium);
  background: var(--status-neutral-bg);
  color: var(--text-default);
}
.badge-ok { background: var(--status-ok-bg); color: var(--status-ok-fg); }
.badge-warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.badge-error { background: var(--status-error-bg); color: var(--status-error-fg); }
.badge-info { background: var(--status-info-bg); color: var(--status-info-fg); }

.muted { color: var(--text-subtle); font-size: var(--text-muted); }
.neg { color: var(--text-negative); }
.pos { color: var(--text-positive); }

/* --- Tag und Kind --- */
.day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.4rem;
}
.day-head .menu { font-style: italic; }
.day.closed { opacity: 0.65; }

.child-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.25rem 0;
}
.child-name { min-width: 10rem; }


/* --- Kassen-Nummer: zum Vorzeigen und Vorlesen --- */
.kassen-nummer {
  font-family: var(--font-mono);
  font-size: var(--text-kassen);
  background: var(--surface-inset);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm);
}

.kasse-forms { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* Breite Tabellen scrollen in sich, nie die ganze Seite */
.tabellenrahmen { overflow-x: auto; }

/* Zugangszettel zum Ausdrucken und Mitgeben */
.zettel { max-width: 15cm; }
.zettel th { width: 12rem; color: var(--text-subtle); font-weight: var(--weight-normal); }
.zettel .zugang-wert { font-weight: var(--weight-semibold); }
.zettel table { margin: 0.6rem 0; }

/* --- Aufklappbares: alles Seltene liegt dahinter --- */
details { margin: 0.4rem 0; }
details summary { cursor: pointer; padding: 0.2rem 0; color: var(--text-link); }
details summary:hover { text-decoration: underline; }
details form { margin: 0.4rem 0 0.8rem; padding-left: 0.4rem; border-left: 3px solid var(--border-card); }

fieldset {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  margin: 0.5rem 0;
}
legend { color: var(--text-subtle); font-size: var(--text-muted); }

.list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.footer {
  text-align: center;
  color: var(--text-faint);
  font-size: var(--text-small);
  padding: 1.5rem 0 2rem;
}
.footer a { color: var(--text-faint); text-decoration: underline; }
.footer a:hover { color: var(--text-link-hover); }

/* --- Gutschein-Druck: gestrichelte Schnittkante bleibt --- */
.voucher-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.voucher {
  border: 1px dashed var(--border-cut);
  border-radius: var(--radius-sm);
  padding: 0.7rem;
  text-align: center;
  background: var(--surface-card);
  page-break-inside: avoid;
  break-inside: avoid;
  /* Text links, Prüf-QR rechts – der QR braucht Ruhe um sich, sonst liest
     ihn die Kamera schlecht. */
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.voucher-haupt { flex: 1 1 auto; }
.voucher-pruefung { flex: 0 0 5.4rem; }
.voucher-pruefung svg.qr { display: block; width: 100%; height: auto; }
.voucher-pruefung .voucher-hint { margin-top: 0.15rem; }

.voucher-title { font-weight: var(--weight-medium); }
.voucher-value {
  font-size: 1.3rem;
  font-weight: var(--weight-bold);
  margin: 0.2rem 0;
}
.voucher-code {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: var(--tracking-code);
}
.voucher-hint { font-size: var(--text-hint); color: var(--text-subtle); margin-top: 0.3rem; }

/* ---------------------------------------------------------------------------
   Der Monatsplan
   Eine Kreuztabelle: links die Essenstage, rechts je Kind eine Spalte. Die
   Regel für die Farbe ist eng: Grün heißt „isst mit“ – sonst nichts. Die Form
   sagt, wer entschieden hat: Quadrat die Eltern, Kreis das Nachmi-Abo.
   --------------------------------------------------------------------------- */

.zeile-guthaben {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
  align-items: baseline;
  margin: 0;
}
.zeile-guthaben b { font-size: 1.15rem; color: var(--ink-900); }
.zeile-guthaben .klein { font-size: var(--text-muted); color: var(--text-subtle); }

/* Zeitraumwahl: Monat blättern oder auf die laufende Woche springen */
.zeitraum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  background: var(--surface-panel);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
}
.zeitraum .monat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  color: var(--text-heading);
}
.zeitraum .pfeil {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--action-default-border);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-default);
  text-decoration: none;
  line-height: 1;
}
.zeitraum .pfeil:hover { background: var(--surface-inset); text-decoration: none; }
.zeitraum .chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.zeitraum .chip {
  border: 1px solid var(--action-default-border);
  background: var(--surface-card);
  color: var(--text-default);
  border-radius: var(--radius-pill);
  font-size: var(--text-muted);
}
.zeitraum .chip:hover { background: var(--surface-inset); color: var(--text-default); }
.zeitraum .chip[aria-current="page"] {
  background: var(--status-ok-bg);
  border-color: var(--status-ok-border);
  color: var(--status-ok-fg);
  font-weight: var(--weight-semibold);
}
.zeitraum .grenze { margin-left: auto; font-size: var(--text-small); color: var(--text-faint); }
.zeitraum.kindwahl { margin-top: -0.6rem; }

.plan-rahmen {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  overflow-x: auto;
  box-shadow: var(--elevation-card);
}
table.plan { font-size: var(--text-body); }
table.plan th, table.plan td { border-bottom: none; }
table.plan thead th {
  background: var(--surface-panel);
  border-bottom: 1px solid var(--border-card);
  font-size: var(--text-hint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  vertical-align: bottom;
}
table.plan thead th.kind { text-align: center; width: 7.5rem; }
table.plan thead th.kind b {
  display: block;
  font-size: var(--text-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-900);
}
table.plan thead th.kind i {
  display: block;
  font-style: normal;
  font-size: var(--text-hint);
  font-weight: var(--weight-normal);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint);
}
table.plan tr.woche th, table.plan tr.woche td {
  background: var(--paper-075);
  border-top: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-table);
  padding: 0.3rem 0.5rem;
}
table.plan tr.woche th {
  font-size: var(--text-hint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
table.plan tr.woche td { text-align: center; }
button.alle {
  font-size: var(--text-hint);
  color: var(--text-link);
  background: none;
  border: none;
  box-shadow: none;
  padding: 0.1rem 0.3rem;
  text-decoration: underline;
  min-height: 0;
}
button.alle:hover { background: none; color: var(--text-link-hover); }
table.plan tr.tag { border-top: 1px solid var(--border-table); }
table.plan tr.tag:hover { background: var(--paper-100); }
table.plan td.datum { white-space: nowrap; }
table.plan td.menu { color: var(--text-default); }
table.plan td.zelle { text-align: center; padding: 0.25rem; }
table.plan tr.heute { background: rgba(248, 236, 206, 0.45); }
table.plan tr.heute td.datum b { color: var(--ochre-800); }
table.plan tr.heute td.datum::after {
  content: "heute";
  display: block;
  font-size: var(--text-hint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ochre-800);
}
table.plan tr.abgesagt td.menu s { color: var(--text-faint); }
table.plan tr.abgesagt td.menu .grund {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: var(--text-badge);
  background: var(--status-error-bg);
  border: 1px solid var(--status-error-border);
  color: var(--status-error-fg);
  border-radius: var(--radius-pill);
  padding: 0 0.55rem;
}
.strich { color: var(--paper-500); }

/* Die Marke: eine gewöhnliche Checkbox, selbst gezeichnet. Der Haken ist ein
   eingebettetes SVG – kein externer Dienst, keine Ikonenschrift. */
input.mark {
  appearance: none;
  -webkit-appearance: none;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  border: 1.5px solid var(--action-default-border);
  background: var(--surface-card);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-standard),
    border-color var(--dur-short) var(--ease-standard),
    transform var(--dur-short) var(--ease-standard);
}
input.mark--kernzeit { border-radius: 6px; }
input.mark--abo { border-radius: 50%; border-width: 2.5px; border-color: var(--paper-500); }
input.mark:checked {
  background-color: var(--action-primary-bg);
  border-color: var(--action-primary-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fffdf9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.05rem;
}
/* Der Abo-Kreis bekommt innen einen Rand: gesetzt, aber nicht von Hand.
   Ohne ihn sind Kreis und Quadrat bei dieser Größe kaum zu unterscheiden. */
input.mark--abo:checked { box-shadow: inset 0 0 0 2.5px var(--white); }

/* „Wird noch gebucht“ gegen „ist abgerechnet“.
   Grün bleibt Grün – die Regel „isst mit“ wird nicht angetastet. Was sich
   ändert, ist die Fläche: schräg gestreift heißt, das Geld ist noch nicht
   bewegt. Die Automatik bucht erst zum Anmeldeschluss. */
input.mark--kommt:checked {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fffdf9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    repeating-linear-gradient(135deg,
      rgba(255, 253, 249, .00) 0, rgba(255, 253, 249, .00) 4px,
      rgba(255, 253, 249, .42) 4px, rgba(255, 253, 249, .42) 8px);
  background-repeat: no-repeat, repeat;
  background-position: center, center;
  background-size: 1.05rem, auto;
}
input.mark:hover:not(:disabled) { transform: scale(1.06); }
input.mark:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
input.mark:disabled { cursor: default; opacity: 0.45; border-style: dashed; }
input.mark.geaendert { box-shadow: 0 0 0 3px var(--ochre-200); }
input.mark--abo.geaendert:checked { box-shadow: inset 0 0 0 2.5px var(--white), 0 0 0 3px var(--ochre-200); }

/* Die Leiste bleibt am unteren Rand stehen, damit „speichern“ nicht wegscrollt */
.aktionsleiste {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  border: 1px solid var(--border-card);
  color: var(--text-subtle);
  box-shadow: var(--elevation-bar);
}
.aktionsleiste .bilanz { font-size: var(--text-muted); }
.aktionsleiste .knoepfe { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }
.aktionsleiste.leiste--offen {
  background: var(--green-800);
  border-color: var(--green-800);
  color: var(--green-050);
}
.aktionsleiste.leiste--offen .bilanz { color: var(--white); }
.knopf {
  border-radius: var(--radius-pill);
  padding: 0.45rem 1.2rem;
}
.knopf--haupt { background: var(--action-primary-bg); color: var(--action-primary-fg); border-color: var(--action-primary-bg); }
.leiste--offen .knopf--haupt { background: var(--white); color: var(--green-800); border-color: var(--white); }
.knopf--still { background: transparent; border-color: var(--action-default-border); }
.leiste--offen .knopf--still { color: var(--green-100); border-color: rgba(255, 253, 249, 0.35); }

/* Küchenansicht: dieselbe Monatsform, statt der Kinder die Zahlen.
   Der Rahmen darf hier nicht clippen – sonst schneidet er die ⋯-Klappe ab. */
.plan-rahmen.offen { overflow: visible; }
table.plan.tage td.menu { width: 100%; }
input.menufeld {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: var(--surface-panel);
  padding: 0.2rem 0.45rem;
  font-size: var(--text-muted);
  box-shadow: none;
}
input.menufeld:hover { border-color: var(--border-field); }
input.menufeld:focus { background: var(--surface-card); border-color: var(--border-focus); }
.mehr-spalte { width: 2.5rem; text-align: center; position: relative; }
details.mehr > summary {
  list-style: none;
  cursor: pointer;
  color: var(--text-subtle);
  padding: 0 0.4rem;
  border-radius: var(--radius-xs);
}
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr > summary:hover { background: var(--surface-inset); }
.mehr-inhalt {
  position: absolute;
  right: 0;
  z-index: 10;
  width: min(22rem, calc(100vw - 3rem));
  margin-top: 0.3rem;
  padding: 0.9rem;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-raised);
}
.mehr-inhalt hr { border: none; border-top: 1px solid var(--border-table); margin: 0.8rem 0; }
.mehr-inhalt form { margin-bottom: 0.6rem; }
.mehr-inhalt .muted { font-size: var(--text-hint); }

/* Die Ausnahme: eingeklappt und nicht einladend. Sie soll gefunden werden, wenn
   man sie sucht – nicht ins Auge fallen, wenn man die Liste liest. */
.card.ausnahme { border-color: var(--ochre-200); }
.card.ausnahme > details > summary {
  cursor: pointer;
  color: var(--ochre-800);
  font-size: var(--text-muted);
}
.card.ausnahme > details[open] > summary { margin-bottom: 0.8rem; }
.grund-text { display: block; font-size: var(--text-hint); font-style: italic; }
.ausnahmen-liste { margin: 0.5rem 0 0; padding-left: 1.2rem; font-size: var(--text-muted); }
.ausnahmen-liste li { margin: 0.2rem 0; }

/* --- Add-on Betreuung: Mitteilungen --- */
.hinweis-tage { display: grid; gap: 0.35rem; }
.hinweis-tag { padding: 0.3rem 0.5rem; border-radius: var(--radius-xs); }
.hinweis-tag.heute { background: rgba(248, 236, 206, 0.5); }
.hinweis-tag > label {
  display: grid;
  gap: 0.2rem 0.8rem;
  grid-template-columns: 1fr;
  align-items: center;
  margin: 0;
}
@media (min-width: 640px) {
  .hinweis-tag > label { grid-template-columns: 13rem 1fr; }
}
.hinweis-datum {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: var(--text-muted);
}
.hinweis-datum .muted { font-size: var(--text-hint); }
.hinweis-quelle { display: block; font-size: var(--text-hint); padding-left: 0.5rem; }
/* Auf der Tagesliste: die Mitteilung ist der wichtigste Text der Zeile, nicht
   eine Randnotiz – die Betreuung liest sie im Vorbeigehen. */
.hinweis-text {
  display: block;
  font-size: var(--text-muted);
  color: var(--lapis-700);
  font-style: italic;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Zwei Flex-Elemente je Zeile: das Zeichen und der Text. Der Text muss in ein
   eigenes span – sonst wird jedes <strong> darin zu einem eigenen Element und
   die Zeile fällt in Spalten auseinander. */
.legende p {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0.5rem 0;
  font-size: var(--text-muted);
  color: var(--text-subtle);
}
.legende p > span:last-child { flex: 1 1 auto; }
/* Erläuterungen ohne Zeichen davor sind gewöhnlicher Fließtext – im Flex-Fluss
   würde ihr <strong> zum eigenen Element und die Zeile in Spalten zerfallen. */
.legende p.muted { display: block; }
/* In der Legende sind die Marken Schaubilder, keine gesperrten Felder. Die
   Abblendung für :disabled würde genau das unsichtbar machen, worum es geht –
   die Streifung. */
.legende input.mark:disabled {
  opacity: 1;
  border-style: solid;
  cursor: default;
}
/* Im Flex-Fluss würde die Marke sonst zum Oval gequetscht */
.legende .mark { flex: 0 0 auto; }
.legende .strich { flex: 0 0 2.1rem; text-align: center; font-size: 1.3rem; }
.legende .mark-legende-form {
  flex: 0 0 2.1rem;
  text-align: center;
  font-size: 1.1rem;
  color: var(--text-faint);
  white-space: nowrap;
}

@media (max-width: 600px) {
  table.plan td.menu { font-size: var(--text-small); }
  table.plan thead th.kind { width: 4.5rem; }
  .zeitraum .grenze { margin-left: 0; width: 100%; }
}

/* --- Anwesenheit: derselbe Bogen auf Papier und auf dem Schirm ---
   Der Ausdruck muss allein als Nachweis taugen. Deshalb hat er Kästchen zum
   Ankreuzen, eine Linie für die Uhrzeit und einen Kopf mit Datum und
   Unterschrift. Wer digital abhakt, druckt denselben Bogen ausgefüllt. */
.print-only { display: none; }
table.anwesenheit th.spalte-status, table.anwesenheit td.spalte-status {
  text-align: center;
  width: 4.5rem;
}
table.anwesenheit th.spalte-ging, table.anwesenheit td.spalte-ging { width: 8rem; }
/* Kreuz und Uhrzeit gehören zusammen: „ging um 13:20“ ist eine Angabe, nicht
   zwei. Untereinander sähen sie aus wie zwei getrennte Fragen. */
.ging-paar { display: inline-flex; align-items: center; gap: 0.35rem; }
table.anwesenheit .zeitfeld { width: 4.2rem; text-align: center; font-size: var(--text-muted); }
table.anwesenheit input[type='radio'].mark { width: 1.6rem; height: 1.6rem; }
table.anwesenheit input[type='radio'].mark:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fffdf9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.9rem;
}
table.anwesenheit td .essen-marke { font-size: var(--text-hint); display: block; }
.bogen-meta { width: 100%; margin-bottom: 0.6rem; }
.bogen-meta td { border: none; padding: 0.2rem 0.5rem 0.2rem 0; }
.linie {
  display: inline-block;
  min-width: 9rem;
  border-bottom: 1px solid var(--ink-700);
}

@media print {
  .topbar, .footer, .no-print, .flash { display: none !important; }
  body { background: #fff; color: var(--ink-900); }
  .card { border: none; box-shadow: none; padding: 0.3rem 0; }
  main { max-width: none; padding: 0; }
  .voucher { box-shadow: none; }

  /* Der Bogen */
  .print-only { display: revert; }
  .bogen-kopf h1 { font-size: 1.3rem; margin: 0 0 0.4rem; }
  table.anwesenheit { font-size: 0.9rem; }
  table.anwesenheit th, table.anwesenheit td {
    border-bottom: 1px solid var(--ink-500);
    padding: 0.45rem 0.4rem;
  }
  /* Kästchen zum Ankreuzen – groß genug für einen Kugelschreiber */
  .kaestchen {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    border: 1.2px solid var(--ink-800);
    text-align: center;
    line-height: 1;
    font-weight: var(--weight-bold);
  }
  .zeit-linie, .bem-linie {
    display: inline-block;
    min-width: 3.5rem;
    border-bottom: 1px solid var(--ink-500);
  }
  .bem-linie { min-width: 11rem; }
  .bogen-fuss { margin-top: 0.8rem; font-size: 0.8rem; }
  /* Jede Gruppe auf ein eigenes Blatt: die Pavillons sind zwei Orte.
     Leere Gruppen gar nicht drucken - ein Blatt "Keine Kinder" ist Verschwendung. */
  .card.bogen { break-before: page; }
  .card.bogen:first-of-type { break-before: auto; }
  .card.bogen--leer { display: none; }
}

@media (max-width: 600px) {
  .row { flex-direction: column; gap: 0; }
  .child-name { min-width: 7rem; }
  .voucher-grid { grid-template-columns: 1fr; }
  .preset-row { display: flex; }
  button.preset { flex: 1; min-width: 5rem; }
}

/* Mitteilungen im Auftrag: kompakte Kreuztabelle Kind × Tag. Am Telefon zählt
   Übersicht, nicht Vollständigkeit – die nächsten drei Tage genügen. */
table.hinweis-tabelle { table-layout: fixed; }
table.hinweis-tabelle th { font-size: var(--text-small); }
table.hinweis-tabelle td input[type='text'] { width: 100%; font-size: var(--text-muted); }
table.hinweis-tabelle td:first-child, table.hinweis-tabelle th:first-child { width: 8rem; }

/* --- Startseite der Verwaltung: dieselben vier Bereiche wie im Klappmenü --- */
.heute-zahl { font-size: var(--text-h2); margin: 0.2rem 0 0.4rem; }
.heute-zahl strong { font-size: 1.6rem; color: var(--green-800); }
.bereiche { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .bereiche { grid-template-columns: 1fr 1fr; } }
.card.bereich ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.card.bereich li { margin: 0.3rem 0; font-size: var(--text-muted); }
.card.bereich li a { font-weight: var(--weight-semibold); }

/* --- Prüfkamera für Gutscheinkarten --- */
.pruef-video { width: 100%; max-width: 28rem; border-radius: var(--radius-md); margin-top: 0.6rem; }
.pruef-liste { display: grid; gap: 0.4rem; }
.pruef-zeile {
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-card);
  background: var(--surface-card);
  font-weight: var(--weight-semibold);
}
.pruef-offen { background: var(--status-ok-bg); border-color: var(--status-ok-border); color: var(--status-ok-fg); }
.pruef-eingeloest { background: var(--surface-inset); color: var(--text-subtle); }
.pruef-gesperrt { background: var(--status-error-bg); border-color: var(--status-error-border); color: var(--status-error-fg); }
.pruef-unbekannt { background: var(--status-warn-bg); border-color: var(--status-warn-border); color: var(--status-warn-fg); }

/* --- Anmeldezettel: fürs Papier gestaltet, am Schirm eine Vorschau --- */
.zettel-bogen {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  max-width: 46rem;
}
.zettel-kopf h1 { margin: 0 0 0.1rem; font-size: 1.35rem; }
.zettel-kopf p { margin: 0 0 0.9rem; color: var(--text-subtle); font-size: var(--text-small); }
table.zettel-felder { width: 100%; margin: 0.4rem 0; }
table.zettel-felder td { border-bottom: none; padding: 0.45rem 0.5rem 0.45rem 0; vertical-align: bottom; }
table.zettel-felder .feldname { white-space: nowrap; width: 1%; font-weight: var(--weight-semibold); }
table.zettel-felder .schmal { width: 8rem; }
.schreib-linie {
  display: inline-block;
  width: 100%;
  min-width: 6rem;
  border-bottom: 1px solid var(--ink-700);
  height: 1.3rem;
}
.schreib-linie.kurz { width: 6rem; min-width: 6rem; }
.ankreuz {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 1.2px solid var(--ink-800);
  vertical-align: text-bottom;
}
.zettel-hinweis { font-size: var(--text-hint); color: var(--text-subtle); margin: 0.3rem 0 0.8rem; }
.zettel-buero {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  background: var(--surface-panel);
  padding: 0.5rem 0.7rem;
  font-size: var(--text-small);
  margin: 0.6rem 0;
}
.zettel-schnitt {
  color: var(--text-faint);
  margin: 0.9rem 0;
  white-space: nowrap;
  overflow: hidden;
  font-size: var(--text-small);
}
.zettel-eltern h2 { font-size: 1.05rem; }
.zettel-eltern ul { margin: 0.4rem 0; padding-left: 1.2rem; }
.zettel-eltern li { margin: 0.35rem 0; font-size: var(--text-muted); }

@media print {
  .zettel-bogen { border: none; padding: 0; max-width: none; }
}

/* --- Essensausgabe: Zähler, Scanner-Feld, Liste --- */
.ausgabe-zaehler { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.zaehler { display: flex; flex-direction: column; align-items: flex-start; }
.zaehler strong { font-size: 1.9rem; line-height: 1.1; }
.zaehler span { font-size: var(--text-small); color: var(--text-subtle); }
.zaehler--bereit strong { color: var(--green-800); }
.ausgabe-scan { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; }
.ausgabe-scan .scan-feld { flex: 1; min-width: 12rem; margin: 0; }
.ausgabe-scan input[name='code'] {
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.ausgabe-suche { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.8rem; }
.ausgabe-suche input[type='search'] { flex: 1; min-width: 12rem; }
.nummer-zelle { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: var(--weight-semibold); }

/* --- Essenskarten: Scheckkartenformat, mehrere je Blatt --- */
.karten-bogen {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.essenskarte {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  padding: 0.8rem 1rem;
  break-inside: avoid;
}
.essenskarte-text { display: flex; flex-direction: column; min-width: 0; }
.essenskarte-schule { font-size: var(--text-hint); color: var(--text-subtle); }
.essenskarte-name { font-size: 1.15rem; margin: 0.15rem 0 0; }
.essenskarte-klasse { font-size: var(--text-small); color: var(--text-subtle); }
.essenskarte-code {
  font-size: 1.3rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  margin-top: 0.3rem;
}
.essenskarte-qr svg.qr { width: 6.5rem; height: 6.5rem; display: block; }

@media print {
  /* Scheckkartennähe: zwei Spalten, feste Kartenhöhe, Schnittkanten sichtbar */
  .karten-bogen { grid-template-columns: 1fr 1fr; gap: 0; }
  .essenskarte {
    border: 1px dashed var(--ink-500);
    border-radius: 0;
    height: 5.4cm;
    padding: 0.5cm;
  }
}

/* Untergeordneter Schalter in den Einstellungen (gehört zum Punkt darüber) */
.eingezogen { margin-left: 1.6rem; }

/* Klasse auf dem Anmeldezettel: einkreisen statt schreiben */
.klassen-reihe { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.klassen-zahl {
  display: inline-block;
  min-width: 1.7rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--ink-500);
  border-radius: 999px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
}
.klassen-zahl--wort { min-width: 0; padding: 0.15rem 0.7rem; }
/* Klassenzeile: das Label mittig zu den (ggf. zwei) Zeilen der Auswahl */
table.zettel-felder tr.klassen-zeile td { vertical-align: middle; }
/* Kästchen und Text bleiben zusammen, auch wenn die Zeile umbricht */
.ankreuz-reihe { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; }
.ankreuz-reihe .wahl { white-space: nowrap; }

/* Name des Kindes berichtigen: Feld und Knopf in einer Zeile */
.namensform { display: flex; gap: 0.4rem; align-items: center; }
.namensform input[type='text'] { width: 9rem; min-width: 5rem; }
.namensform button { white-space: nowrap; }
.klasse-zelle { white-space: nowrap; }

/* Sicherheitsnetz gegen seitwärts laufende Seiten: Auf schmalen Schirmen
   scrollt eine breite Tabelle in sich, nicht die ganze Seite. Gilt nur dort –
   am Schreibtisch bleibt das Tabellenlayout unberührt. Wo schon ein
   .tabellenrahmen steht, ändert sich nichts. */
@media (max-width: 700px) {
  .card > table,
  .card > form > table { display: block; overflow-x: auto; }
}