/* meine-ogs 0.8.0 "Karopapier und Buntstift". Designsystem: docs/design/0.8.0/system.md, Entscheidungen: DECISIONS.md (0.8.0).
   Immer hell (color-scheme: light, kein Dunkelmodus). Nur eigene Dateien: Schriften in static/fonts (OFL), keine fremden Hosts.
   Öffentliche Seiten tragen die Identität voll (Karo, Stundenplan, Stempel); Arbeitsseiten der Leitung liegen auf weißem Blatt
   in einem getönten Rahmen, Farbe nur in Reitern, Stempeln und der einen Hauptaktion. */

@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/atkinson-hyperlegible-next-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Playwrite DE Grund"; src: url("fonts/playwrite-de-grund.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  /* Buntstifte (Grundfarben; Text nur in den "tief"-Stufen, AA auf Weiß und auf dem Hellton) */
  --tinte: #1d4ea3;          /* Königsblau wie Füllertinte: Hauptaktion, Links (7,9:1 auf Weiß) */
  --tinte-tief: #163d82;
  --tinte-hell: #e9f0fb;
  --tinte-mittel: #b9cdee;
  --gelb: #f2c230;           /* Textmarker: Notizen, Reiter, Markierung (nie Text) */
  --gelb-hell: #fff4bf;
  --gelb-tief: #6e5200;      /* Text auf Gelb-hell (6,6:1) */
  --himmel: #5aa6d8;
  --himmel-hell: #e5f2fb;
  --himmel-tief: #1b5f8e;    /* 6,8:1 auf Weiß */
  --blatt: #347f3f;          /* Blattgrün: Füllung mit weißer Schrift 4,9:1 */
  --blatt-hell: #e5f3e3;
  --blatt-tief: #276331;     /* 7,2:1 auf Weiß */
  --orange: #e07a3a;
  --orange-hell: #fdeee2;
  --orange-tief: #8a3f0d;
  --rot: #c0392b;            /* nur echte Warnungen und Löschen */
  --rot-hell: #fdecea;
  --rot-tief: #9c2a1f;       /* 7,6:1 auf Weiß */

  /* Papier und Graphit */
  --karo-grund: #f7fafc;     /* Karopapier: Seitengrund */
  --karo-linie: #e1e9f0;     /* Kästchenlinie, sehr hell */
  --papier: #ffffff;         /* Blatt, Karteikarte, Datenflächen */
  --umschlag: #eef3f8;       /* Heftumschlag: Rahmen der Leitung */
  --graphit: #22262d;        /* Text (15,2:1) */
  --grau: #525a65;           /* zweiter Text (7,0:1 auf Weiß, 6,6:1 auf Karo) */
  --bleistift: #858d98;      /* Feldrahmen, 3,3:1 auf Weiß */
  --kante: #dfe4ea;          /* Papierkante, Trennlinien */
  --linie-fein: #edf0f3;

  /* Rollen (alte Namen bleiben, damit alle Vorlagen weiter passen) */
  --ground: var(--karo-grund);
  --surface: var(--papier);
  --field: var(--papier);
  --raised: #f1f4f7;
  --text: var(--graphit);
  --muted: var(--grau);
  --accent: var(--tinte);
  --accent-hover: var(--tinte-tief);
  --on-accent: #ffffff;
  --accent-ink: var(--tinte-tief);
  --link: var(--tinte);
  --solid-neutral: var(--graphit);
  --on-solid-neutral: #ffffff;
  --accent-50: var(--tinte-hell);
  --accent-100: #dbe6f8;
  --accent-200: var(--tinte-mittel);
  --control: var(--bleistift);
  --line: var(--kante);
  --border: var(--kante);
  --rule: var(--linie-fein);
  --negative: var(--rot);
  --negative-bg: var(--rot-hell);
  --negative-ink: var(--rot-tief);
  --negative-border: #e6aaa3;
  --warn-bg: var(--gelb-hell);
  --warn-ink: var(--gelb-tief);
  --warn-dot: #d9a514;
  --info-bg: var(--himmel-hell);
  --info-ink: var(--himmel-tief);
  --info-dot: var(--himmel);
  --ok-bg: var(--blatt-hell);
  --ok-ink: var(--blatt-tief);
  --suggest-bg: var(--gelb-hell);
  --suggest-border: #b38a00;
  --test-bg: var(--gelb-hell);
  --test-ink: var(--gelb-tief);
  --nav-w: 252px;

  /* Schrift */
  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-hand: "Playwrite DE Grund", "Segoe Print", "Bradley Hand", cursive;
  --fs-title: 1.875rem;
  --fs-section: 1.3125rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-kpi: 2.125rem;

  /* Raster und Maße */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --page-max: 1280px;
  --page-pad: clamp(16px, 4vw, 48px);
  --kaestchen: 22px;
  --card-pad: 20px;
  --gap: 24px;
  --r-card: 8px;            /* Karteikarte: kleine Ecken wie Karton */
  --r-blatt: 16px;          /* Arbeitsblatt der Leitung */
  --r-control: 10px;
  --r-zettel: 3px;          /* Post-it, Stempel innen */
  --target: 44px;

  /* Bewegung */
  --t: 150ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);         /* Zustände */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* Ankommen */
  --schatten-papier: 0 1px 0 var(--kante), 0 10px 24px -18px rgb(34 38 45 / 0.28);
  --schatten-schwebt: 0 12px 32px -8px rgb(34 38 45 / 0.22), 0 2px 6px rgb(34 38 45 / 0.08);
}
@media (min-width: 700px) { :root { --fs-title: 2.125rem; --card-pad: 28px; } }
body.oeffentlich { --fs-body: 1.125rem; font-size: 1.125rem; }

/* ---------------------------------------------------------------- Grundlage */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ground); }
body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: 1.55; color: var(--text); background: var(--ground);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern" 1; }
/* Karopapier: sehr helle Kästchen, nur als Grund, nie hinter Tabellen oder langem Text (dort liegt weißes Papier darüber) */
body.oeffentlich, body.leitung, body.betrieb {
  background-color: var(--karo-grund);
  background-image: linear-gradient(var(--karo-linie) 1px, transparent 1px), linear-gradient(90deg, var(--karo-linie) 1px, transparent 1px);
  background-size: var(--kaestchen) var(--kaestchen); background-position: -1px -1px; }
::selection { background: var(--gelb-hell); color: var(--graphit); }
a { color: var(--link); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; text-underline-position: from-font; }
p a:not(.btn), li > a.inline-link, .prose a, .note a:not(.btn), .flash a, .person b > a { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
input, textarea { caret-color: var(--tinte); }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; font-weight: 700; margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 750; letter-spacing: -0.015em; }
h1 { font-size: var(--fs-title); line-height: 1.12; }
h2 { font-size: var(--fs-section); margin-bottom: var(--s3); }
h3 { font-size: var(--fs-body); margin-bottom: var(--s2); }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s3); padding-left: 1.3em; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible { box-shadow: inset 0 0 0 2px var(--papier); } /* taste-skill-ignore: Fokuszustand, nicht in Ruhe */
.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; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 40; background: var(--papier); color: var(--tinte); padding: 10px 14px; border-radius: var(--r-control); }
.skip:focus { left: 8px; }
html { scroll-padding-block-start: 72px; }
@media (min-width: 1100px) { html { scroll-padding-block-start: 16px; } }
.hand { font-family: var(--font-hand); font-weight: 400; letter-spacing: 0; }

/* ---------------------------------------------------------------- Rahmen */
.wrap { max-width: 680px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); }
.wrap.wide { max-width: var(--page-max); padding-inline: var(--page-pad); }
.wrap.voll { max-width: none; padding: 0; }
main { min-width: 0; }
.narrow { max-width: 460px; margin: 0 auto; }
footer { text-align: center; font-size: var(--fs-small); color: var(--muted); padding: var(--s4) var(--s4) var(--s6); }
footer a { color: var(--muted); }
.footlinks { display: flex; justify-content: center; gap: 4px 24px; flex-wrap: wrap; }
.footlinks a { display: inline-flex; align-items: center; min-height: var(--target); }
/* Öffentliche Fußzeile: Rückseite der Karteikarte */
footer.fuss { padding: var(--s7) var(--page-pad) var(--s6); }
.fuss-innen { max-width: var(--page-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s6);
  background: var(--papier); border-radius: var(--r-card); padding: var(--s5) var(--s6); box-shadow: var(--schatten-papier); position: relative; }
.fuss-innen::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 10px;
  background: radial-gradient(circle at 11px 10px, var(--papier) 8px, transparent 8.5px) 0 0 / 22px 10px repeat-x; }
.fuss-innen .footlinks { justify-content: flex-start; }
.fuss-innen .erstellt-mit { margin: 0; }
body.leitung footer.fuss, body.betrieb footer.fuss { padding: var(--s4) var(--s4) var(--s6); }
header.top { margin: 0 0 var(--s6); }
header.top.row-between { align-items: flex-end; }
.sub { color: var(--muted); margin: var(--s2) 0 0; max-width: 70ch; }
.lead { font-size: 1.125rem; }
.note { font-size: var(--fs-small); color: var(--muted); }
body.oeffentlich .note { font-size: 1rem; }
small { font-size: var(--fs-small); }
.center { text-align: center; }
.right { text-align: right; }
.mt { margin-top: var(--s4); }
.mt-l { margin-top: var(--s6); }
.inline { display: inline; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.row-between > h2 { margin-bottom: 0; }
.card > .row-between, .block > .row-between { margin-bottom: var(--s3); }
.btnrow { display: flex; gap: var(--s2) var(--s3); flex-wrap: wrap; align-items: center; }
.btnrow.wrap-col { flex-direction: column; align-items: stretch; }
.center-row { justify-content: center; }
.grid2, .grid3, .row2 { display: grid; grid-template-columns: 1fr; gap: 0 var(--s5); }
@media (min-width: 600px) { .grid2 { grid-template-columns: 1fr 1fr; } .row2 { grid-template-columns: 2fr 1fr; } .grid3 { grid-template-columns: repeat(3, 1fr); align-items: end; } }
.cols { display: grid; grid-template-columns: 1fr; gap: var(--gap) var(--s7); align-items: start; }
@media (min-width: 1000px) { .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cols.wide-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.cols > div > .card:last-child { margin-bottom: 0; }

/* Anmelde- und Kontoseiten: Karteikarte auf Karo, daneben auf breiten Bildschirmen eine Zeichnung (nur Schmuck) */
@media (min-width: 1100px) {
  body.auth main.wrap { max-width: 1120px; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: var(--s8); align-items: start;
    padding-top: var(--s8); }
  body.auth main.wrap > * { grid-column: 1; }
  body.auth main.wrap::after { content: ""; grid-column: 2; grid-row: 1 / span 6; align-self: start; aspect-ratio: 5 / 4; width: 100%; max-width: 520px;
    background: url("img/zeichnung-heft.svg") center / contain no-repeat; margin-top: var(--s6); }
  body.auth .narrow { max-width: none; margin: 0; }
}

/* ---------------------------------------------------------------- Marke */
.brand { display: inline-flex; align-items: center; gap: 10px; font: 750 1.1875rem/1.1 var(--font-display); letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.brand .zeichen { width: 32px; height: 32px; flex: none; }
.mono { display: none; }

/* ---------------------------------------------------------------- Leitung: getönter Rahmen (Heftumschlag), Arbeit auf weißem Blatt */
.app-head { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); min-height: 60px; background: var(--umschlag);
  position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 0 var(--kante); }
.who { font-size: var(--fs-small); color: var(--muted); }
.menu-toggle { margin-left: auto; }
.menu-toggle > summary { list-style: none; min-height: var(--target); display: inline-flex; align-items: center; gap: 8px; padding: 0 16px;
  border-radius: 999px; cursor: pointer; font-weight: 700; color: var(--text); background: var(--papier); box-shadow: inset 0 0 0 1px var(--kante); }
.menu-toggle > summary::-webkit-details-marker { display: none; }
.menu-toggle[open] > summary { background: var(--tinte-hell); color: var(--tinte-tief); }
.menu-sheet { overscroll-behavior: contain; position: fixed; left: 0; right: 0; top: 60px; bottom: 0; background: var(--umschlag); padding: var(--s3) var(--s4) var(--s6);
  overflow-y: auto; display: flex; flex-direction: column; }
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* Heftreiter: jeder Bereich hat seine Stiftfarbe; der aktive Reiter ragt als weißes Blatt heraus */
.nav-list li { --reiter: var(--tinte); --reiter-hell: var(--tinte-hell); }
.nav-list .reiter-uebersicht { --reiter: #d9a514; --reiter-hell: var(--gelb-hell); }
.nav-list .reiter-heute { --reiter: var(--himmel); --reiter-hell: var(--himmel-hell); }
.nav-list .reiter-kinder { --reiter: var(--blatt); --reiter-hell: var(--blatt-hell); }
.nav-list .reiter-speiseplan { --reiter: var(--orange); --reiter-hell: var(--orange-hell); }
.nav-list .reiter-beitraege { --reiter: #c4574b; --reiter-hell: var(--rot-hell); }
.nav-list .reiter-einstellungen { --reiter: var(--grau); --reiter-hell: var(--raised); }
.nav-list .reiter-test { --reiter: #b38a00; --reiter-hell: var(--gelb-hell); }
.nav-list a, .nav-list button { display: flex; align-items: center; gap: 12px; min-height: var(--target); padding: 0 12px; border-radius: var(--r-control);
  color: var(--text); text-decoration: none; font-weight: 600; width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease); position: relative; }
.nav-list .ico { width: 20px; height: 20px; flex: none; color: var(--reiter, var(--muted)); }
.nav-list button .ico { color: var(--muted); }
.nav-list a[aria-current="page"] { background: var(--papier); color: var(--text); font-weight: 750; box-shadow: inset 0 0 0 1px var(--kante); }
.nav-list a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 6px; border-radius: 0 4px 4px 0;
  background: var(--reiter); }
.nav-unten { margin-top: var(--s6); }
.nav-test { margin-top: var(--s5); }
.nav-test .nav-titel { display: block; font: 400 0.9375rem var(--font-hand); color: var(--muted); padding: 0 12px 6px; }
.nav-test .nav-list a { min-height: 40px; font-size: var(--fs-small); }
.side { display: none; }
@media (min-width: 1100px) {
  .app-head { display: none; }
  .side { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: var(--nav-w); padding: var(--s6) var(--s3) var(--s5) var(--s4);
    background: var(--umschlag); overflow-y: auto; overscroll-behavior: contain; }
  .side .brand { padding: 0 12px; margin-bottom: 4px; }
  .side .who { padding: 0 12px 0 54px; margin-bottom: var(--s6); display: block; }
  .side .nav-unten { margin-top: auto; padding-top: var(--s5); }
  /* aktiver Reiter verbindet sich mit dem Blatt rechts */
  .side .nav-list a[aria-current="page"] { margin-right: calc(-1 * var(--s3) - 1px); border-radius: var(--r-control) 0 0 var(--r-control);
    box-shadow: inset 1px 0 0 var(--kante), inset 0 1px 0 var(--kante), inset 0 -1px 0 var(--kante); }
  .app-body { margin-left: var(--nav-w); min-height: 100dvh; padding: 10px 10px 0 0; background: var(--umschlag); }
  .app-body > main.wrap { background: var(--papier); border-radius: var(--r-blatt); box-shadow: inset 0 0 0 1px var(--kante); min-height: calc(100vh - 80px); }
  .app-body > footer { background: var(--umschlag); }
}
/* Inhalt der Leitung nutzt die Breite neben der Navigation; Absätze bleiben lesbar */
body.leitung .wrap { max-width: none; padding: var(--s5) var(--s4) var(--s7); background: var(--papier); }
body.leitung .app-body { background: var(--umschlag); }
@media (min-width: 700px) { body.leitung .wrap { padding: var(--s6) var(--s6) var(--s8); } }
@media (min-width: 1100px) { body.leitung .wrap { padding: 40px clamp(32px, 3.5vw, 64px) var(--s8); margin: 0; } }
@media (min-width: 1100px) { body.leitung .wrap > * { max-width: 1400px; } }

/* ---------------------------------------------------------------- Karteikarten und Hinweise */
.card { background: var(--papier); border-radius: var(--r-card); padding: var(--card-pad); margin-bottom: var(--gap); box-shadow: var(--schatten-papier); }
/* Karteikarte: die erste Überschrift steht auf der roten Kopflinie */
.card > h2:first-child, .card > .row-between:first-child > h2, .card > .titel-zeile:first-child { padding-bottom: 10px; margin-bottom: var(--s4);
  border-bottom: 2px solid #f0aaa2; }
body.leitung .card { box-shadow: inset 0 0 0 1px var(--kante); }
.block { margin-bottom: var(--s7); }
.block:last-child { margin-bottom: 0; }
.card.attention { box-shadow: inset 0 0 0 2px var(--warn-dot); }
.danger-zone h2 { color: var(--negative-ink); }
.sub-form { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); }
/* Meldungen als Zettel */
.flash { border-radius: var(--r-zettel); padding: 12px 16px 12px 18px; margin-bottom: var(--s5); background: var(--blatt-hell); color: var(--blatt-tief); max-width: 75ch;
  position: relative; box-shadow: 0 1px 0 rgb(34 38 45 / 0.06); }
.flash.err { background: var(--rot-hell); color: var(--rot-tief); }
.flash.info { background: var(--himmel-hell); color: var(--himmel-tief); }
.flash.warn { background: var(--gelb-hell); color: var(--gelb-tief); }
.flash ul { margin: 0; padding-left: 18px; }
.flash a { color: inherit; font-weight: 700; }
.banner { border-radius: var(--r-card); padding: 14px 18px; margin-bottom: var(--s4); }
.banner ul { margin: 4px 0 0; padding-left: 20px; }
.banner.danger { background: var(--rot-hell); color: var(--rot-tief); box-shadow: inset 0 0 0 2px #e6aaa3; }
/* Frist: handschriftliche Notiz mit Textmarker */
.deadline { display: inline-block; font: 400 1rem/1.5 var(--font-hand); color: var(--gelb-tief); padding: 2px 10px 4px; border-radius: 2px;
  background: linear-gradient(transparent 18%, var(--gelb-hell) 18%, var(--gelb-hell) 88%, transparent 88%); }
.sub .deadline { margin-top: 6px; }
.empty { text-align: center; padding: var(--s6) var(--s3); }
.empty h2 { margin-bottom: var(--s2); }
.or { text-align: center; color: var(--muted); margin: var(--s4) 0 0; }

/* ---------------------------------------------------------------- Übersicht: Was steht an? */
.gruss { margin: 0 0 var(--s6); }
.gruss h1 { margin-bottom: var(--s1); }
.anstehend { list-style: none; padding: 0; margin: 0 0 var(--s7); display: grid; gap: var(--s4); }
@media (min-width: 760px) { .anstehend { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
.anstehend li { background: var(--papier); border-radius: var(--r-card); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: var(--s3);
  justify-content: space-between; box-shadow: inset 0 0 0 1px var(--kante); position: relative; overflow: hidden; }
.anstehend li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--tinte-mittel); }
.anstehend li.warn::before { background: var(--gelb); }
.anstehend li.info::before { background: var(--himmel); }
.anstehend p { margin: 0; }
.anstehend .btn { align-self: flex-start; }
.liste { list-style: none; padding: 0; margin: 0; }
.liste > li { display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--kante); }
.liste > li:first-child { border-top: 0; }
.liste .titel { font-weight: 700; color: var(--text); }
.liste .titel:hover { color: var(--tinte); }
.liste .meta { margin: 2px 0 0; }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { display: flex; gap: 12px; align-items: center; min-height: var(--target); }
.steps .mark { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--tinte); display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 0.875rem; color: var(--tinte); flex: none; }
.steps .done .mark { background: var(--blatt); border-color: var(--blatt); color: #fff; font-size: 0; }
.steps .done .mark::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(0, -1px) rotate(45deg); }
.steps .done span { color: var(--muted); }

/* ---------------------------------------------------------------- Aufklappen */
details > summary { cursor: pointer; color: var(--tinte); font-weight: 700; min-height: var(--target); display: flex; align-items: center; gap: 10px;
  list-style: none; width: fit-content; }
details > summary::-webkit-details-marker { display: none; }
details:not(.menu-toggle):not(.menue) > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform var(--t) var(--ease); flex: none; }
details[open]:not(.menu-toggle):not(.menue) > summary::before { transform: rotate(45deg); margin-top: -4px; }
.mehr { margin-top: var(--s5); }
.mehr > summary { color: var(--muted); }
.mehr[open] > summary { margin-bottom: var(--s3); }
.abschnitt { border-top: 1px solid var(--kante); }
.abschnitt:last-of-type { border-bottom: 1px solid var(--kante); }
.abschnitt > summary { width: 100%; min-height: 64px; color: var(--text); font: 750 var(--fs-section)/1.2 var(--font-display); letter-spacing: -0.01em; }
.abschnitt > summary .note { font: 400 var(--fs-small) var(--font); margin-left: 4px; }
.abschnitt > .inhalt { padding: 0 0 var(--s6); }
.menue { position: relative; }
.menue > summary { width: auto; }
.menue[open] > .menue-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; background: var(--papier); border-radius: var(--r-control);
  box-shadow: var(--schatten-schwebt); padding: 6px; min-width: 260px; list-style: none; margin: 0; }
.menue-liste a { display: flex; min-height: var(--target); align-items: center; padding: 0 12px; border-radius: 8px; color: var(--text); }
@media (max-width: 599px) { .menue[open] > .menue-liste { left: 0; right: auto; } }

/* ---------------------------------------------------------------- Formulare */
label.f, legend.f { display: block; font-weight: 700; margin: var(--s4) 0 6px; padding: 0; }
label.f small, legend.f small { font-weight: 400; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=tel], input[type=search], input[type=number],
select, textarea {
  width: 100%; min-height: var(--target); padding: 9px 12px; border: 1.5px solid var(--control); border-radius: var(--r-control); font-size: max(16px, 1em);
  background: var(--field); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px var(--tinte-mittel); } /* taste-skill-ignore: Fokuszustand */
input[readonly] { background: var(--raised); border-color: var(--raised); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--rot); border-width: 2px; }
.field-err { color: var(--rot-tief); font-size: var(--fs-small); font-weight: 700; margin: 6px 0 0; }
input.suggested { background: var(--gelb-hell); border-color: var(--suggest-border); }
input.short { max-width: 180px; }
input[type=file] { width: 100%; padding: 10px; border: 1.5px dashed var(--control); border-radius: var(--r-control); background: var(--field); min-height: var(--target); }
select.auto { width: auto; }
input.cell, select.cell { min-height: 40px; padding: 6px 8px; min-width: 120px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend.h2 { font: 750 var(--fs-section)/1.2 var(--font-display); margin-bottom: var(--s2); padding: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--s3); min-height: var(--target); cursor: pointer; }
.check input, .choice input, .daypick input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--tinte); flex: none; cursor: pointer; }
.check span { padding-top: 1px; }
.indent { margin-left: 34px; }
.daypick { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; }
.daypick label { display: inline-flex; gap: 8px; align-items: center; min-height: var(--target); cursor: pointer; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--kante); cursor: pointer; }
.choice:first-of-type { border-top: 0; }
.choice.disabled { cursor: default; color: var(--muted); }
.copyrow { display: flex; gap: 8px; margin-top: var(--s2); align-items: center; }
.copyrow input { min-width: 0; }
.suche { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--s5); }
.suche > div { flex: 1 1 240px; }
.suche > div.klein { flex: 0 1 200px; }
.suche label.f { margin-top: 0; }
.suche.schmal { max-width: 720px; }
.filters { display: flex; gap: 0 16px; flex-wrap: wrap; align-items: flex-end; }
.filters > div { flex: 1 1 160px; }
.filters .grow { flex: 3 1 260px; }
.filters .end { flex: 0 0 auto; }
.filters label.f { margin-top: var(--s2); }
input.big { width: 24px; height: 24px; accent-color: var(--tinte); cursor: pointer; }

/* Ja / Nein und Auswahl als Segmente */
.yn, .seg { display: flex; gap: 6px; flex-wrap: wrap; }
.yn input, .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.yn label, .seg label { min-width: 72px; min-height: var(--target); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px;
  border: 1.5px solid var(--control); background: var(--papier); cursor: pointer; font-weight: 700;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); -webkit-tap-highlight-color: transparent; }
.yn input:focus-visible + label, .seg input:focus-visible + label { outline: 3px solid var(--tinte); outline-offset: 2px; }
.yn input:checked + label.ja, .seg input:checked + label { background: var(--blatt); border-color: var(--blatt); color: #fff; }
.seg input:checked + label { background: var(--tinte); border-color: var(--tinte); }
.yn input:checked + label.nein { background: var(--graphit); border-color: var(--graphit); color: #fff; }
.yn input:checked + label.ja::before { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -2px); margin-right: 10px; }

/* ---------------------------------------------------------------- Knöpfe: eine gefüllte Hauptaktion in Tinte, sonst leise */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--target); padding: 0 22px;
  border-radius: 999px; border: 1.5px solid var(--tinte); background: var(--tinte); color: var(--on-accent); font-weight: 700; cursor: pointer;
  text-decoration: none; text-align: center; line-height: 1.2;
  transition-property: background-color, border-color, color, scale; transition-duration: var(--t); transition-timing-function: ease-out;
  -webkit-tap-highlight-color: transparent; }
.btn.sec { background: transparent; color: var(--tinte); border-color: transparent; padding: 0 12px; }
.btn.rand { background: var(--papier); color: var(--tinte-tief); border-color: var(--tinte-mittel); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 0.9688rem; }
.btn.sec.small { padding: 0 10px; }
.btn.danger { background: transparent; color: var(--rot-tief); border-color: var(--negative-border); }
.btn.full { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--raised); border-color: var(--raised); color: var(--muted); cursor: not-allowed; }
.btn.busy { opacity: .75; cursor: progress; }
@media (pointer: coarse) { .btn.small { min-height: var(--target); } }
.full-m { display: flex; width: 100%; margin-bottom: 8px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--tinte); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btns { display: flex; gap: 4px 8px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- Stempel (Status) und Etiketten */
.tag, .badge, .pill { display: inline-flex; align-items: center; min-height: 24px; padding: 1px 10px; border-radius: 6px 5px 7px 5px; font-size: 0.875rem;
  font-weight: 700; line-height: 1.3; background: var(--papier); color: var(--grau); vertical-align: middle; white-space: nowrap;
  box-shadow: inset 0 0 0 1.5px currentColor; }
.tag { color: var(--text); font-weight: 600; margin: 2px 4px 2px 0; background: var(--raised); box-shadow: none; border-radius: 999px; }
.tag.warn, .badge.warn, .pill.entwurf { color: var(--gelb-tief); background: var(--gelb-hell); }
.tag.danger, .badge.danger { color: var(--rot-tief); background: var(--rot-hell); box-shadow: inset 0 0 0 1.5px currentColor; }
.badge.ok, .pill.offen { color: var(--blatt-tief); background: var(--blatt-hell); }
.badge.info { color: var(--himmel-tief); background: var(--himmel-hell); }
.pill.geschlossen { color: var(--grau); background: var(--raised); }
.tag.warn, .choice .tag { white-space: normal; }
.count { font-size: var(--fs-small); color: var(--muted); font-weight: 700; margin-left: 4px; }
.y { color: var(--blatt-tief); font-weight: 700; }
.n { color: var(--muted); }
/* großer Stempel (Bestätigung, Startseite) */
.stempel { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 7px; border-radius: 10px 7px 11px 8px; font: 750 1.125rem/1.1 var(--font-display);
  letter-spacing: 0.01em; color: var(--blatt-tief); box-shadow: inset 0 0 0 3px currentColor; background: rgb(255 255 255 / 0.9); transform: rotate(-5deg);
  white-space: nowrap; }
.stempel.rot { color: var(--rot-tief); }
.stempel.blau { color: var(--tinte-tief); }
.stempel.grau { color: var(--grau); }

/* ---------------------------------------------------------------- Kennzahlen */
.kpis { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7); margin: 0 0 var(--s6); }
.kpi .v { font: 750 var(--fs-kpi)/1.1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .v .note { font: 500 1rem var(--font); }
.kpi .l { color: var(--muted); font-size: var(--fs-small); margin-top: 4px; }
.kpi.fehler .v { color: var(--rot-tief); }

/* ---------------------------------------------------------------- Tabellen: immer auf weißem Papier */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; position: relative; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; background: var(--papier); }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--linie-fein); text-align: left; vertical-align: top; }
th { font-size: var(--fs-small); color: var(--muted); font-weight: 700; vertical-align: bottom; border-bottom: 2px solid var(--kante); white-space: nowrap; }
tr:last-child > td { border-bottom: 0; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
td.num, th.num, .num { text-align: right; }
.c { text-align: center; }
table.small { font-size: 0.9375rem; }
tr.muted td { color: var(--muted); }
tr.muted td a { color: var(--muted); }
tr.st-fehler td { background: var(--rot-hell); }
td a b, td > a { color: var(--text); }
@media (hover: hover) { td a:hover b, td > a:hover { color: var(--tinte); } tbody tr { transition: background-color 120ms var(--ease); } tbody tr:hover { background: #fafbfc; } }
.err-text { color: var(--rot-tief); font-size: 0.875rem; }
@media (max-width: 639px) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 14px 0; border-bottom: 1px solid var(--kante); position: relative; }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: 2px 0; text-align: left; }
  table.stack td[data-l]:not(:empty)::before { content: attr(data-l) ": "; color: var(--muted); font-size: var(--fs-small); }
  table.stack td.lead-cell { font-size: 1.0625rem; }
  table.stack td.act { padding-top: 8px; }
  table.stack td.inl { display: inline-block; width: auto; margin-right: 10px; }
  table.stack td.act.top { position: absolute; right: 0; top: 10px; width: auto; padding: 0; }
  table.stack td.lead-cell.inl + td.inl::before { content: none; }
  table.stack .opt { display: none; }
  table.stack tr:has(td.act.top) td.lead-cell { padding-right: 130px; }
}
.wischen { display: none; }
@media (max-width: 899px) { .wischen { display: block; font-size: var(--fs-small); color: var(--muted); margin: 0 0 6px; } }

/* ---------------------------------------------------------------- Heftreiter (Reiter auf der Seite), Chips, Fortschritt */
.tabs { display: flex; gap: 6px; margin-bottom: var(--s6); overflow-x: auto; padding: 6px 2px 0; box-shadow: inset 0 -2px 0 var(--kante); }
.tabs a { padding: 0 16px; min-height: var(--target); display: inline-flex; align-items: center; color: var(--muted); font-weight: 700;
  border-radius: 10px 10px 0 0; white-space: nowrap; text-decoration: none; background: var(--raised); box-shadow: inset 0 -2px 0 var(--kante);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.tabs a.on, .tabs a[aria-current="page"] { color: var(--text); background: var(--papier); box-shadow: inset 0 3px 0 var(--gelb), inset 1px 0 0 var(--kante), inset -1px 0 0 var(--kante); }
.tabs .tabs-rest { margin-left: auto; display: flex; gap: 4px; }
.tabs .tabs-rest a { background: none; box-shadow: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s3); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--target); padding: 0 14px; border-radius: 999px; background: var(--raised);
  text-decoration: none; color: var(--text); font-size: 0.9688rem; transition: background-color var(--t) var(--ease); }
.chip b { font-weight: 700; color: var(--muted); white-space: nowrap; }
.chip.on { background: var(--tinte-hell); color: var(--tinte-tief); box-shadow: inset 0 0 0 1.5px var(--tinte-mittel); }
.chip.on b { color: var(--tinte-tief); }
.progress { display: flex; gap: 6px; list-style: none; padding: 0; margin: var(--s3) 0; counter-reset: s; flex-wrap: wrap; }
.progress li { counter-increment: s; font-size: var(--fs-small); color: var(--muted); padding: 4px 12px; border-radius: 999px; background: var(--raised); }
.progress li::before { content: counter(s) ". "; }
.progress li.on { background: var(--tinte); color: #fff; font-weight: 700; }
.progress li.done { background: var(--blatt-hell); color: var(--blatt-tief); }

/* ---------------------------------------------------------------- Personen, Listen */
.person, .q, .wunsch { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--kante); }
.person:first-of-type, .q:first-of-type { border-top: 0; }
.person > .btns, .q > .btns { flex: none; }
.wunsch { flex-wrap: wrap; }
@media (max-width: 479px) { .person, .q { flex-wrap: wrap; } .person > .btns, .q > .btns { flex: 1 1 100%; } }
.contacts { padding-left: 22px; margin: 0; }
.contacts li { padding: 6px 0; }
.plainlist { list-style: none; padding: 0; margin: 0; }
.plainlist > li { padding: 8px 0; }
.plainlist > li.row-between { border-top: 1px solid var(--kante); padding: 10px 0; }
.plainlist > li.row-between:first-child { border-top: 0; }
.links { padding-left: 0; list-style: none; }
.links li { padding: 4px 0; }
.links a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; }
a.tel { white-space: nowrap; text-decoration: underline; }
.cards-2 { display: grid; gap: var(--gap); }
@media (min-width: 700px) { .cards-2 { grid-template-columns: 1fr 1fr; } }
.meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); margin: 6px 0 0; }
.familien { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
@media (min-width: 800px) { .familien { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } }
.familien li { background: var(--papier); border-radius: var(--r-card); padding: 18px 20px; box-shadow: inset 0 0 0 1px var(--kante); }
.familien h3 { margin: 0 0 2px; font-size: 1.0625rem; }
.familien .btns { margin-top: var(--s3); margin-left: -10px; gap: 0 4px; }

/* ---------------------------------------------------------------- Planung pro Tag: Stundenplan-Balken in Buntstift */
.dayplan { list-style: none; margin: 0; padding: 0; }
.dayplan li { display: grid; grid-template-columns: 9.5em 1fr 4.5em; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--linie-fein); }
.dayplan li:first-child { border-top: 0; }
.dayplan .d { font-weight: 700; white-space: nowrap; }
.dayplan .d small { display: block; font-weight: 400; color: var(--gelb-tief); white-space: normal; font-size: 0.8125rem; line-height: 1.3; }
.dayplan .bar { position: relative; height: 22px; background: var(--himmel-hell); border-radius: 3px; overflow: hidden; }
.dayplan .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tinte-mittel); border-radius: 3px; }
.dayplan .bar b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tinte); border-radius: 3px 0 0 3px;
  background-image: repeating-linear-gradient(-55deg, rgb(255 255 255 / 0.16) 0 2px, transparent 2px 6px); }
.dayplan .n2 { text-align: right; font-weight: 700; white-space: nowrap; }
.dayplan .n2 small { display: block; font-weight: 400; color: var(--muted); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--fs-small); color: var(--muted); margin: 0 0 var(--s3); }
.legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--tinte-mittel); }
.legend .lv::before { background: var(--tinte); }
.matrix td.c, .matrix th.c { padding-left: 4px; padding-right: 4px; min-width: 52px; }
.matrix .ja { display: inline-block; width: 26px; height: 18px; border-radius: 4px; background: var(--blatt); position: relative; }
.matrix .ja::after { content: ""; position: absolute; left: 9px; top: 3px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.matrix .nein { display: inline-block; width: 26px; height: 18px; border-radius: 4px; border: 1.5px solid var(--control); background: var(--papier); }

/* ---------------------------------------------------------------- Eltern: Formular in Schritten */
.stepper-head { display: none; }
.js .stepper .stepper-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: var(--s4); font-size: var(--fs-small); color: var(--muted); }
.js .stepper .stepper-head .track { flex: 1; height: 8px; background: var(--tinte-hell); border-radius: 4px; overflow: hidden; }
.js .stepper .stepper-head .track i { display: block; height: 100%; background: var(--tinte); width: 33%; transition: width 300ms var(--ease-out); border-radius: 4px; }
.js .stepper .step[hidden] { display: none; }
.step-nav { display: none; }
.js .stepper .step-nav { display: flex; gap: 8px; margin-top: var(--s5); }
.js .stepper .step-nav .btn { flex: 1; }
fieldset.day { border-top: 1px solid var(--kante); margin: 0; padding: 12px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
fieldset.day:first-of-type { border-top: 0; }
fieldset.day legend { float: left; font-weight: 700; padding: 0; }
.week { margin-top: var(--s5); }
.week:first-of-type { margin-top: 0; }
.week-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; flex-wrap: wrap; }
.week-head h3 { margin: 0; font-size: 1rem; color: var(--muted); }
.allset { display: flex; gap: 6px; }
.hinweise { margin: 0; padding-left: 1.2em; }
.hinweise li { margin-bottom: 4px; }
.ok-big { text-align: center; padding: var(--s6) var(--s4); }
.ok-big .tick { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px 9px; border-radius: 12px 9px 13px 10px; background: var(--papier);
  color: var(--blatt-tief); margin: 0 auto var(--s4); box-shadow: inset 0 0 0 3px currentColor; transform: rotate(-5deg);
  font: 750 1.25rem/1.1 var(--font-display); white-space: nowrap; }
.ok-big .tick.grau { color: var(--grau); }
.ok-big .tick svg { width: 26px; height: 26px; }
.sum { text-align: left; margin-top: var(--s4); padding-top: var(--s3); }
.sum div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--kante); }

/* ---------------------------------------------------------------- Speiseplan */
.weeknav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: var(--s4); }
.weeknav b { text-align: center; }
.weeknav .btn { min-width: var(--target); }
@media (max-width: 419px) { .weeknav .kw { display: none; } }
.menu-list .menu { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0; border-top: 1px solid var(--kante); }
.menu-list .menu:first-of-type { border-top: 0; }
.menu-list .menu.today { background: var(--gelb-hell); margin: 0 calc(-1 * var(--card-pad)); padding: 14px var(--card-pad); border-top-color: transparent; }
.menu-list .menu.today + .menu { border-top-color: transparent; }
@media (min-width: 600px) { .menu-list .menu { grid-template-columns: 11em 1fr; gap: 16px; } }
.menu .d { font-size: 1.0625rem; margin: 0; }
.menu p { margin: 0 0 4px; }
.dish { font-weight: 700; }
.sp-plan { margin: 0 0 var(--s4); }
.sp-plan img, .sp-bild img { display: block; width: 100%; height: auto; background: #fff; border-radius: var(--r-control); outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px; }
.sp-bild { display: block; margin: 0 0 var(--s3); border-radius: var(--r-control); }
.sp-gross { max-width: 760px; margin: 0 auto var(--s5); }
.sp-leer { background: var(--papier); border-radius: var(--r-card); padding: var(--s7) var(--s5); text-align: center; max-width: 760px; margin: 0 auto var(--s5); box-shadow: inset 0 0 0 1px var(--kante); }
.sp-hoch { max-width: 760px; margin: 0 auto; }
.sp-hoch form { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.sp-hoch input[type=file] { flex: 1 1 260px; width: auto; min-width: 0; max-width: 100%; }
.sp-hoch .note { flex-basis: 100%; margin: 0; }
fieldset.menuday { border-top: 1px solid var(--kante); padding: 12px 0 18px; margin: 0; }
fieldset.menuday legend { font-weight: 700; padding: 12px 0 0; float: left; width: 100%; }
fieldset.menuday legend + * { clear: both; }
fieldset.menuday.today legend { color: var(--tinte-tief); }

/* ---------------------------------------------------------------- Kopf der öffentlichen Seiten */
.site-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0 var(--s5); }
.site-head .btn { min-height: 40px; }
.site-nav { display: flex; align-items: center; gap: var(--s4); }
.site-nav > a:not(.btn) { color: var(--text); font-weight: 700; text-decoration: none; min-height: var(--target); display: inline-flex; align-items: center; }
.site-nav > a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 4px; text-underline-offset: 6px; }
body.oeffentlich:not(.auth) main.wrap:not(.voll):not(.wide) > .site-head { margin-inline: 0; }

/* ---------------------------------------------------------------- Startseite und Preise: Seite als Gegenstand (Stundenplan, Karteikarten, Elternbrief) */
.band { padding: var(--s9) var(--page-pad); }
.band.papier { background: var(--papier); }
.band.leise { padding-block: var(--s8); }
.innen { max-width: var(--page-max); margin: 0 auto; }
.voll .site-head { max-width: calc(var(--page-max) + 2 * var(--page-pad)); margin: 0 auto; padding-inline: var(--page-pad); }
.start-hero { display: grid; gap: var(--s7); align-items: center; padding: var(--s5) var(--page-pad) var(--s9); max-width: calc(var(--page-max) + 2 * var(--page-pad)); margin: 0 auto; }
@media (min-width: 1000px) { .start-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 88px); } }
.start-hero > div { min-width: 0; }
.hero h1, .start-hero h1 { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 13ch; }
.hero .sub, .start-hero .sub { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); max-width: 34ch; margin-top: var(--s4); color: var(--text); }
.start-hero .btnrow { margin-top: var(--s6); }
.hero { padding: var(--s5) 0 var(--s4); }
.hero-notiz { font: 400 1.0625rem/1.5 var(--font-hand); color: var(--tinte); margin-top: var(--s4); display: flex; gap: 10px; align-items: center; }
.hero-notiz svg { width: 42px; height: 30px; flex: none; color: var(--tinte); }

/* Der Stundenplan der Ferienwoche */
.ausschnitt { margin: 0; position: relative; padding: 30px clamp(18px, 2.4vw, 32px) 24px; border-radius: 6px; }
.ausschnitt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 6px 6px 0 0;
  background: radial-gradient(circle at 11px 6px, var(--karo-grund) 4px, transparent 4.5px) 0 0 / 22px 12px repeat-x; }
.ausschnitt h2 { font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.4375rem); margin: 4px 0 var(--s4); padding-right: 7.5em; }
.wochen { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.wochen li { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "t b" "z e"; align-items: center; column-gap: var(--s4); row-gap: 4px;
  padding: 12px 0; border-top: 2px solid var(--linie-fein); }
.wochen li:first-child { border-top: 0; }
.wochen .wt { grid-area: t; font-weight: 700; color: var(--text); white-space: nowrap; }
.wochen .stift { grid-area: b; display: block; height: 22px; width: 100%; overflow: visible; }
.wochen .wz { grid-area: z; font: 750 1.3125rem/1.2 var(--font-display); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 5.4em; }
.wochen .we { grid-area: e; font-size: 1rem; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; }
.wochen .we::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blatt); flex: none; }
@media (min-width: 560px) {
  .wochen li { grid-template-columns: 5.6em minmax(60px, 1fr) auto auto; grid-template-areas: "t b z e"; }
}
.ausschnitt .stempel { position: absolute; right: clamp(14px, 2vw, 28px); top: 18px; }
.ausschnitt .zettel { position: absolute; left: clamp(-28px, -2vw, -8px); bottom: -30px; }
.beispiel { font-size: 0.9375rem; color: var(--muted); margin-top: var(--s4); padding-right: 11em; }
@media (max-width: 559px) { .beispiel { padding-right: 0; padding-bottom: 44px; } .ausschnitt .zettel { left: auto; right: 10px; bottom: -22px; } }

/* Post-it */
.zettel { display: inline-block; background: var(--gelb-hell); color: var(--gelb-tief); padding: 10px 16px 12px; border-radius: 2px; transform: rotate(-3deg);
  font: 400 1rem/1.45 var(--font-hand); box-shadow: 0 10px 14px -10px rgb(34 38 45 / 0.35); max-width: 15em; white-space: normal; }
.zettel::before { content: ""; position: absolute; left: 50%; top: -9px; width: 62px; height: 18px; margin-left: -31px; background: rgb(229 242 251 / 0.85); transform: rotate(2deg); }
.zettel { position: relative; }

/* So funktioniert es: drei Schritte mit Zeichnungen, verbunden durch einen Bleistiftstrich */
.ablauf { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s6); counter-reset: none; position: relative; }
@media (min-width: 800px) { .ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.ablauf li { position: relative; }
.ablauf .bild { display: block; width: 100%; max-width: 300px; aspect-ratio: 4 / 3; margin-bottom: var(--s4); }
.ablauf b { display: block; font: 750 1.375rem/1.2 var(--font-display); margin-bottom: 6px; letter-spacing: -0.01em; }
.ablauf p { margin: 0; max-width: 34ch; }
.band-kopf { display: grid; gap: var(--s3) var(--s7); margin-bottom: var(--s7); }
@media (min-width: 900px) { .band-kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; } }
.band-kopf h2 { font-size: clamp(1.875rem, 1.2rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0; }
.band-kopf p { margin: 0; max-width: 52ch; font-size: 1.125rem; }

/* Echte Bildschirme der App in Rahmen */
.bildschirme { display: grid; gap: var(--s7); align-items: end; }
@media (min-width: 900px) { .bildschirme { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); } }
.geraet { margin: 0; }
.geraet figcaption { font-size: 1rem; color: var(--muted); margin-top: var(--s3); }
.laptop .schirm { background: var(--graphit); border-radius: 14px 14px 4px 4px; padding: 12px 12px 14px; }
.laptop .schirm img { display: block; width: 100%; height: auto; border-radius: 4px; aspect-ratio: 1366 / 854; object-fit: cover; object-position: top; background: #fff; }
.laptop .fuss-geraet { height: 14px; background: #c9d0d8; border-radius: 0 0 14px 14px; margin: 0 -3%; }
.handy .schirm { background: var(--graphit); border-radius: 34px; padding: 12px; max-width: 300px; margin: 0 auto; }
.handy .schirm img { display: block; width: 100%; height: auto; border-radius: 24px; aspect-ratio: 390 / 780; object-fit: cover; object-position: top; background: #fff; }

/* Zwei Pakete: zwei Karteikarten und ein Vergleich wie auf einem Zettel */
.pakete { margin: 0; }
.paket-paar { display: grid; gap: var(--gap); margin: var(--s3) 0 var(--gap); }
@media (min-width: 760px) { .paket-paar { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
.paket { border-radius: var(--r-card); padding: var(--card-pad); min-width: 0; background: var(--papier); box-shadow: var(--schatten-papier); position: relative; }
.paket::after { content: ""; position: absolute; right: 22px; top: -12px; width: 74px; height: 12px; border-radius: 6px 6px 0 0; background: var(--reiter-farbe, var(--himmel)); }
.paket-link { --reiter-farbe: var(--himmel); }
.paket-portal { --reiter-farbe: var(--gelb); }
.paket h2, .paket h3 { font: 750 1.625rem/1.15 var(--font-display); margin: 0; padding-bottom: 10px; border-bottom: 2px solid #f0aaa2; }
.paket-preis { font: 750 1.375rem/1.2 var(--font-display); color: var(--tinte-tief); margin: var(--s3) 0 var(--s3); font-variant-numeric: tabular-nums; }
.haken { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: 10px; }
.haken li { padding-left: 30px; position: relative; }
.haken li::before { content: ""; position: absolute; left: 4px; top: 0.4em; width: 13px; height: 7px; border-left: 2.5px solid var(--blatt); border-bottom: 2.5px solid var(--blatt); transform: rotate(-45deg); border-radius: 1px; }
.vergleich { margin-top: var(--s7); }
.vergleich table { border-radius: var(--r-card); box-shadow: var(--schatten-papier); }
.vergleich th, .vergleich td { padding: 14px 18px; }
.vergleich th:first-child, .vergleich td:first-child { padding-left: 22px; }
.vergleich th:last-child, .vergleich td:last-child { padding-right: 22px; }
.vergleich thead th { font: 750 1.125rem var(--font-display); color: var(--text); }
.vergleich tbody th { font-size: 1.0625rem; font-weight: 400; color: var(--text); white-space: normal; vertical-align: middle; border-bottom: 1px solid var(--linie-fein); }
.vergleich td { vertical-align: middle; }
.vergleich td.c, .vergleich th.c { text-align: center; width: 22%; }
.ja-zeichen, .nein-zeichen { display: inline-block; width: 22px; height: 22px; vertical-align: middle; }
.ja-zeichen { color: var(--blatt); }
.nein-zeichen { color: var(--bleistift); }

/* Datenschutz und Fragen */
.zwei-spalten { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .zwei-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); } }
.brief { background: var(--papier); border-radius: 4px; padding: clamp(24px, 3vw, 40px); box-shadow: var(--schatten-papier); position: relative; }
.brief::after { content: ""; position: absolute; top: -12px; left: 40px; width: 96px; height: 24px; background: rgb(242 194 48 / 0.5); transform: rotate(-2deg); }
.brief h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); }
.brief .unterschrift { font: 400 1.125rem var(--font-hand); color: var(--tinte); margin-top: var(--s4); }
.band .faq h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); }
.faq details { border-top: 2px solid var(--kante); }
.faq details:last-of-type { border-bottom: 2px solid var(--kante); }
.faq details > summary { width: 100%; padding: 10px 0; font-size: 1.0625rem; color: var(--text); }
.faq details p { margin: 0 0 var(--s4); max-width: 62ch; }
.kontakt { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .kontakt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); } }
.kontakt h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.kontakt .bild { width: 100%; max-width: 380px; justify-self: center; }

/* Preise wie auf einer Speisekarte */
.preis-tabelle { width: 100%; max-width: 36rem; }
.preis-tabelle td.num, .preis-tabelle th.num { white-space: nowrap; }

/* ---------------------------------------------------------------- Texte */
.prose h2 { margin-top: var(--s6); }
.prose h3 { margin-top: var(--s4); }
.prose p, .prose li { max-width: 70ch; }
.prose table { margin: var(--s3) 0; display: block; overflow-x: auto; }
@media (min-width: 1000px) { .prose table { display: table; } }
body.oeffentlich .wrap.wide > .prose, body.oeffentlich .wrap.wide > article.prose { background: var(--papier); border-radius: var(--r-card); box-shadow: var(--schatten-papier);
  padding: clamp(20px, 4vw, 56px); }

/* ---------------------------------------------------------------- Kleinteile */
.back { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target); color: var(--muted); text-decoration: none; font-size: var(--fs-small); }
.back::before { content: ""; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 3px; }
.pfeil { width: 10px; height: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; display: inline-block; }
.pfeil.links { transform: rotate(45deg); margin-left: 4px; }
.pfeil.rechts { transform: rotate(-135deg); margin-right: 4px; }
.pfeil.hoch { transform: rotate(135deg); margin-top: 4px; }
.m-only { display: none; }
.linkrow { display: inline-flex; gap: 4px 16px; flex-wrap: wrap; }
.linkrow a { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 700; }
.kaestchen { display: inline-block; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 2px; vertical-align: -2px; }
.h2like { font: 750 1.375rem/1.2 var(--font-display); margin-bottom: var(--s2); }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; overflow-wrap: anywhere; }
table.pay tr:has(input[name=bezahlt]:not(:checked)) .paid-only { visibility: hidden; }
.schnell { display: flex; gap: 4px 8px; flex-wrap: wrap; }
@media (max-width: 639px) {
  table.pay.stack td.bez { display: inline-block; width: auto; margin-right: 12px; }
  .m-only { display: inline; }
  .check-m { display: inline-flex; gap: 8px; align-items: center; min-height: var(--target); }
  table.pay.stack td.paid-only { display: inline-block; width: auto; max-width: 48%; padding-right: 6px; }
  table.pay.stack td.paid-only:last-child { display: block; max-width: 100%; }
}

/* Tabellenziffern nur bei Zahlen, keine einzelnen Wörter in der letzten Zeile */
table, .num, .kpi .v, .dayplan, .wochen, .count, .deadline, .chip b, .sum b, .paket-preis { font-variant-numeric: tabular-nums; }
p, li, td, .note { text-wrap: pretty; }
.card > p, .card > ul { max-width: 75ch; }
a, td, .note { overflow-wrap: break-word; }
.badge, .pill, .tag:not(.warn) { white-space: nowrap; }

/* ---------------------------------------------------------------- Hover nur mit Zeiger */
@media (hover: hover) {
  a:hover { color: var(--tinte-tief); }
  p a:hover, .note a:hover { text-decoration-thickness: 2px; }
  .brand:hover { color: var(--text); }
  .nav-list a:hover, .nav-list button:hover { background: rgb(255 255 255 / 0.7); color: var(--text); }
  .menue-liste a:hover { background: var(--tinte-hell); }
  input:hover, select:hover, textarea:hover { border-color: var(--graphit); }
  input[readonly]:hover { border-color: var(--raised); }
  .yn label:hover, .seg label:hover { border-color: var(--graphit); }
  .btn:not(:disabled):hover { background: var(--tinte-tief); border-color: var(--tinte-tief); color: #fff; text-decoration: none; }
  .btn.sec:not(:disabled):hover { background: var(--tinte-hell); border-color: transparent; color: var(--tinte-tief); }
  .btn.rand:not(:disabled):hover { background: var(--tinte-hell); border-color: var(--tinte); color: var(--tinte-tief); }
  .btn.danger:not(:disabled):hover { background: var(--rot-hell); border-color: var(--rot); color: var(--rot-tief); }
  .tabs a:hover { color: var(--text); background: #e8edf2; }
  .chip:hover { color: var(--tinte-tief); background: var(--tinte-hell); }
  .back:hover { color: var(--tinte); }
  .paket, .anstehend li { transition: translate 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
}

/* ---------------------------------------------------------------- Bewegung: 150 bis 600 ms, nur ohne reduzierte Bewegung */
@media (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):active { scale: 0.96; }
  @media (hover: hover) { .paket:hover { translate: 0 -3px; box-shadow: 0 1px 0 var(--kante), 0 18px 32px -20px rgb(34 38 45 / 0.35); } }
  /* Einblenden beim Scrollen (static/app.js setzt .zeigen); ohne JavaScript bleibt alles sichtbar */
  .js [data-einblenden] { opacity: 0; translate: 0 12px; transition: opacity 400ms var(--ease-out), translate 400ms var(--ease-out); }
  .js [data-einblenden].zeigen { opacity: 1; translate: 0 0; }
  .js [data-einblenden] > * { transition: opacity 400ms var(--ease-out), translate 400ms var(--ease-out); }
  /* Stundenplan: Buntstiftstriche zeichnen sich nacheinander */
  .js .stift path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .ausschnitt.zeichnen .stift path { animation: strich 600ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js .ausschnitt .stempel { opacity: 0; }
  .js .ausschnitt.zeichnen .stempel { animation: stempeln 380ms cubic-bezier(0.3, 1.4, 0.5, 1) 900ms both; }
  .js .ausschnitt .zettel { opacity: 0; }
  .js .ausschnitt.zeichnen .zettel { animation: kleben 420ms var(--ease-out) 1150ms both; }
  /* Stempel nach dem Speichern (Bestätigung, Meldung) */
  .ok-big .tick, .flash:not(.err) { animation: stempeln 380ms cubic-bezier(0.3, 1.4, 0.5, 1) both; }
  .flash.err, .flash.info, .flash.warn { animation: einrutschen 300ms var(--ease-out) both; }
  .info-text:not([hidden]) { animation: einrutschen 200ms var(--ease-out) both; }
  .menue[open] > .menue-liste { animation: einrutschen 180ms var(--ease-out) both; }
  details.abschnitt[open] > .inhalt, .faq details[open] > p { animation: aufblenden 250ms var(--ease-out) both; }
}
@keyframes strich { to { stroke-dashoffset: 0; } }
@keyframes stempeln { 0% { opacity: 0; scale: 1.35; } 60% { opacity: 1; scale: 0.96; } 100% { opacity: 1; scale: 1; } }
@keyframes kleben { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
@keyframes einrutschen { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@keyframes aufblenden { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; } }

/* ---------------------------------------------------------------- Test-OGS: Hinweisstreifen, Feedback, Anleitung */
.testbanner { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; background: var(--gelb-hell); color: var(--gelb-tief);
  border-radius: var(--r-zettel); padding: 8px 14px; margin-bottom: var(--s5); font-size: var(--fs-small);
  background-image: repeating-linear-gradient(-45deg, rgb(242 194 48 / 0.18) 0 10px, transparent 10px 20px); }
.testbanner p { margin: 0; }
.testbanner .testdatum { font-weight: 700; font-variant-numeric: tabular-nums; }
body.test { padding-bottom: 72px; }
.feedback-box { position: fixed; right: 16px; bottom: 16px; z-index: 30; max-width: calc(100vw - 32px); }
.feedback-box summary { list-style: none; cursor: pointer; box-shadow: var(--schatten-schwebt); margin-left: auto; width: max-content; display: flex; }
.feedback-box summary::-webkit-details-marker { display: none; }
.feedback-box summary::before, .feedback-box summary::after { content: none !important; display: none !important; }
.feedback-box summary.btn { color: var(--on-accent); }
.feedback-box details[open] > summary { margin-bottom: 8px; }
.feedback-form { width: 360px; max-width: 100%; background: var(--gelb-hell); border-radius: 2px;
  padding: var(--s4) var(--s5) var(--s5); box-shadow: var(--schatten-schwebt); }
.feedback-form textarea { width: 100%; }
.feedback-form .note { color: var(--gelb-tief); }
.fb { padding: var(--s4) 0; border-top: 1px solid var(--kante); }
.fb:first-child { border-top: 0; }
.fb .meta { align-items: center; }
.fb-text { white-space: pre-line; margin: 10px 0 12px; overflow-wrap: anywhere; }
.fb.erledigt .fb-text { color: var(--muted); }
.anleitung { max-width: 46rem; }
.anleitung section { margin-bottom: var(--s5); }
.anleitung h2 { font-size: var(--fs-section); margin: var(--s5) 0 var(--s2); }
.aufgaben { padding-left: 1.4em; }
.aufgaben li { margin-bottom: 10px; }
.unterschrift { margin-top: var(--s6); }

/* ---------------------------------------------------------------- Druck */
body.print { background: #fff; padding: 20px; font-size: 0.8125rem; --ground: #ffffff; --surface: #ffffff; --text: #111111; --muted: #444444;
  --border: #cccccc; --line: #cccccc; --rule: #dddddd; --kante: #cccccc; }
body.print table { font-size: 0.7812rem; display: block; overflow-x: auto; }
body.print th, body.print td { padding: 5px 6px; }
.printbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.printbar select { width: auto; }
.printhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.printhead b { color: var(--rot-tief); }
table.notfall td { vertical-align: top; }
@media print {
  .noprint, .feedback-box { display: none !important; }
  body, html { background: #fff !important; background-image: none !important; }
  body.test { padding-bottom: 0; }
  body.print table { display: table; overflow: visible; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  @page { margin: 14mm 12mm; }
  a { color: inherit; text-decoration: none; }
  .testbanner { background: #fff; color: #000; border: 1px solid #000; }
  .anleitung { max-width: none; font-size: 11pt; }
  .anleitung h2 { font-size: 13pt; margin-top: 10pt; }
  body:has(.anleitung) .app-head, body:has(.anleitung) .side, body:has(.anleitung) footer { display: none; }
  body:has(.anleitung) .app-body { margin-left: 0; padding: 0; }
  .card, .paket, .brief { box-shadow: none; border: 1px solid #ccc; }
}
.anstehend-mehr { margin: calc(-1 * var(--s6)) 0 var(--s7); }
.anstehend-mehr .anstehend { margin-bottom: 0; }
.abstand-unten { margin-bottom: var(--s7); }

/* ---------------------------------------------------------------- 0.5.1 Ferien nach Schuljahr */
.nur-js { display: none !important; }
.js .nur-js { display: flex !important; }
.ferien-gruppe { margin-top: var(--s5); }
.ferien-gruppe h2, .ferien-gruppe h3 { margin: 0; }
.ferien-gruppe > .row-between { padding-bottom: 4px; }

/* ---------------------------------------------------------------- Info-Knopf (ⓘ) als Post-it */
.info { display: inline; }
.info-knopf { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 0 0 8px; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--tinte); background: var(--papier); color: var(--tinte); font: 400 0.875rem/1 var(--font-hand);
  cursor: pointer; vertical-align: middle; position: relative; transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.info-knopf::before { content: ""; position: absolute; inset: -10px; }
.info-knopf[aria-expanded="true"] { background: var(--tinte); color: #fff; }
.info-text:not([hidden]) { display: block; margin: 10px 0 6px; padding: 12px 16px; border-radius: 2px; background: var(--gelb-hell);
  color: var(--gelb-tief); font: 400 var(--fs-small)/1.5 var(--font); letter-spacing: 0; max-width: 60ch; text-wrap: pretty;
  box-shadow: 0 8px 14px -12px rgb(34 38 45 / 0.4); position: relative; }
.info-text:not([hidden])::after { content: ""; position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 12px 12px;
  border-color: transparent transparent var(--papier) #f0dc8a; }
.titel-zeile { display: flex; flex-wrap: wrap; align-items: center; }
.titel-zeile > .info { display: contents; }
.titel-zeile .info-text { flex-basis: 100%; }
@media (hover: hover) { .info-knopf:hover { background: var(--tinte-hell); } .info-knopf[aria-expanded="true"]:hover { background: var(--tinte-tief); } }
.begriffe { margin: 0; display: grid; gap: 0; }
.begriffe > div { display: grid; gap: 2px 24px; padding: 12px 0; border-top: 1px solid var(--kante); }
.begriffe > div:first-child { border-top: 0; }
@media (min-width: 700px) { .begriffe > div { grid-template-columns: 14rem minmax(0, 60ch); } }
.begriffe dt { font-weight: 700; }
.begriffe dd { margin: 0; color: var(--text); }

/* ---------------------------------------------------------------- Rundgang (static/tour.js) */
.rundgang-rahmen { position: fixed; z-index: 50; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--gelb), 0 0 0 9999px rgb(20 26 34 / 0.55); transition: top 250ms var(--ease-out), left 250ms var(--ease-out), width 250ms var(--ease-out), height 250ms var(--ease-out); }
.rundgang-dialog { position: fixed; z-index: 51; width: min(380px, calc(100vw - 24px)); background: var(--papier); color: var(--text);
  border-radius: var(--r-card); padding: 18px 20px 14px; box-shadow: 0 12px 36px rgb(20 26 34 / 0.3); }
.rundgang-dialog.unten { left: 12px !important; right: 12px; bottom: 12px; top: auto !important; width: auto; }
.rundgang-dialog h2 { font-size: 1.1875rem; margin: 0 0 6px; }
.rundgang-dialog h2:focus { outline: none; }
.rundgang-dialog p { margin: 0 0 10px; }
.rundgang-zahl { font: 400 var(--fs-small) var(--font-hand); color: var(--muted); }
.rundgang-knoepfe { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.rundgang-knoepfe .btn.sec { padding: 0 8px; }
html.rundgang-an .feedback-box { display: none; }
@media print { .rundgang-rahmen, .rundgang-dialog { display: none; } }
@media (prefers-reduced-motion: reduce) { .rundgang-rahmen { transition: none; } }

/* ---------------------------------------------------------------- Familienkonto */
.familie-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 var(--s5); flex-wrap: wrap; }
.familie-kopf .btns { gap: 0 4px; }
.pw-zeile { display: flex; gap: 8px; align-items: center; }
.pw-zeile input { flex: 1; min-width: 0; }
.staerke { height: 8px; border-radius: 4px; background: var(--raised); margin-top: 8px; overflow: hidden; }
.staerke i { display: block; height: 100%; width: 0; background: var(--rot); transition: width 250ms var(--ease-out), background-color 250ms var(--ease); border-radius: 4px; }
.staerke i.s2 { background: var(--warn-dot); }
.staerke i.s3, .staerke i.s4 { background: var(--blatt); }
.code-feld { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.25rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* Anmeldelink: Änderungslink mit QR-Code wie ein Abschnitt zum Abtrennen */
.qr-zeile { display: flex; gap: var(--s4); align-items: center; margin-top: var(--s3); flex-wrap: wrap; }
.qr-zeile .qr { width: 148px; height: 148px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--kante); flex: none; }
.qr-zeile .qr-text { flex: 1 1 220px; min-width: 0; }
.aenderungslink { position: relative; background-image: radial-gradient(circle, var(--bleistift) 1.2px, transparent 1.6px); background-size: 10px 4px;
  background-repeat: repeat-x; background-position: 0 0; padding-top: calc(var(--card-pad) + 6px); }
.dub-paar { align-items: center; }
.tag-liste .namen { columns: 2 14rem; margin: 0; padding-left: 1.1rem; }
.tag-liste .namen li { break-inside: avoid; padding: 2px 0; }
.erstellt-mit { margin: var(--s2) 0 0; font-size: var(--fs-small); }
.upgrade-hinweis { padding: var(--s3) var(--s4); background: var(--gelb-hell); color: var(--gelb-tief); border-radius: 2px; }
.upgrade-hinweis a { color: inherit; }

/* Betreiber */
.betrieb-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.betrieb-form select, .betrieb-form input[type=date], .betrieb-form input[type=text] { width: auto; min-width: 9rem; }
.betrieb-tabelle td { vertical-align: top; }
h2.klein { font-size: 1.0625rem; }
body.betrieb .wrap { max-width: var(--page-max); background: var(--papier); border-radius: var(--r-blatt); box-shadow: inset 0 0 0 1px var(--kante); margin-top: var(--s5); }
@media (max-width: 699px) { body.betrieb .wrap { border-radius: 0; margin-top: 0; } }
.betrieb-form input[type=text] { min-width: 12rem; }
.betrieb-tabelle td.num { white-space: nowrap; }

/* ---------------------------------------------------------------- Fehlerseiten */
.fehlerseite { display: grid; gap: var(--s6); align-items: center; padding-block: var(--s6); }
@media (min-width: 900px) { .fehlerseite { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.fehlerseite .bild { width: 100%; max-width: 420px; justify-self: center; }
.fehlerseite .code-zahl { font: 400 1.25rem var(--font-hand); color: var(--tinte); margin-bottom: var(--s2); }
.fehlerseite h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); margin-bottom: var(--s4); }

/* Rechtstexte und Preise nutzen die Breite: Karten in zwei Spalten, Kopf über beide */
@media (min-width: 1100px) {
  .wrap.wide.recht { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); align-items: start; }
  .wrap.wide.recht > .site-head, .wrap.wide.recht > header.top, .wrap.wide.recht > .flash, .wrap.wide.recht > .testbanner { grid-column: 1 / -1; }
}
.preise-kopf h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); letter-spacing: -0.03em; }
.preise .paket-paar { margin-top: var(--s6); }
.preise .zwei-spalten { margin-top: var(--s6); }
.preise .zwei-spalten > .card { margin-bottom: 0; }
.preise > .btnrow { margin-top: var(--s7); }
.druckmarke { display: flex; align-items: center; gap: 8px; font: 750 1rem var(--font-display); margin: 0 0 10px; }
.druckmarke .zeichen { width: 24px; height: 24px; }
@media (min-width: 1100px) {
  .wrap.wide.recht > .card.prose { grid-column: 1 / -1; columns: 2 28rem; column-gap: var(--s8); }
  .wrap.wide.recht > .card.prose > h2 { break-after: avoid; }
  .wrap.wide.recht > .card.prose > p, .wrap.wide.recht > .card.prose > ul { break-inside: avoid-column; }
  .wrap.wide.recht > .card.prose > .scroll { column-span: all; margin: var(--s4) 0 var(--s5); }
  .wrap.wide.recht > .bild { align-self: center; justify-self: center; width: 100%; max-width: 420px; }
}
.wrap.wide.recht > .bild { display: none; }
@media (min-width: 1100px) { .wrap.wide.recht > .bild { display: block; } }
.fehlerseite h1 { max-width: 20ch; }
.nur-druck { display: none; }
@media print { .nur-druck { display: flex; } body.leitung .wrap { padding: 0; } .app-body { background: none; } }
@media (max-width: 639px) {
  .vergleich { overflow-x: visible; }
  .vergleich th, .vergleich td { padding: 12px 6px; }
  .vergleich th:first-child, .vergleich td:first-child { padding-left: 14px; }
  .vergleich th:last-child, .vergleich td:last-child { padding-right: 14px; }
  .vergleich thead th { font-size: 0.9375rem; white-space: normal; }
  .vergleich tbody th { font-size: 0.9375rem; }
  .vergleich td.c, .vergleich th.c { width: 27%; }
}

/* Sehr breite Bildschirme: öffentliche Seiten wachsen mit (Schrift und Raster), Arbeitsseiten bleiben bei ihrer Dichte */
@media (min-width: 1800px) { html:has(body.oeffentlich) { font-size: 106.25%; } body.oeffentlich { --page-max: 1400px; } }
@media (min-width: 2300px) { html:has(body.oeffentlich) { font-size: 118.75%; } body.oeffentlich { --page-max: 1680px; } }