/*
 * Startseite wunschplan.app (17.09.2026, Tokens aktualisiert 22.09.2026,
 * Variablen umbenannt 22.09.2026, auf Designsystem „Wunschplan x Impec"
 * umgestellt 22.09.2026 – Details siehe web/src/style.css und
 * PROJEKTNOTIZEN.md).
 *
 * Dieselbe Palette wie die App (web/src/style.css) – bewusst als Kopie,
 * nicht als Import: Die Startseite ist eine eigene statische Seite ohne
 * Build und soll auch dann stehen, wenn die App einmal anders gebaut
 * wird. Was hier abweicht, ist nur die Größenstaffel: Die App-Stufen
 * gelten für eine Werkzeugoberfläche; eine Seite zum Lesen braucht eine
 * Grundgröße von 17 px und eine Überschrift, die von weitem trägt.
 *
 * --info/--info-soft/--info-line sind entfallen (kein Hinweis-Blau mehr):
 * das Beta-Band ist ein eingeschalteter Zustand (--brand/--brand-soft),
 * die „wünscht sich"-Markierungen sind Wunschfarbe (--warn-ink/--warn-soft).
 * --brand ist nur die gefüllte Fläche; Ränder/Konturen/Unterstreichungen
 * nehmen --brand-line, Text --brand-ink (dunkel erreicht --brand als Text
 * nur 3.6:1, --brand-ink 7.2:1).
 *
 * Größenstaffel (22.09.2026): die zwölf Textstile aus dem Designsystem
 * ersetzen die rem-Werte, die vorher frei im Text standen (1.15rem,
 * clamp(...) usw.) - die Landingpage teilt sich jetzt dieselben Stile wie
 * die App (display-xl ist NUR die h1, alles andere nutzt dieselben Namen
 * wie style.css). rem bezog sich immer auf die 16px-Vorgabe des Browsers
 * (html hat keine eigene font-size), nicht auf die 17px von body - die
 * Werte unten sind deshalb keine 1:1-Umrechnung, sondern die Zuordnung
 * zum passenden Stil.
 */

:root {
  --surface: #f6f6fb;
  --surface-raised: #ffffff;
  --surface-sunken: #ecedf6;
  --surface-overlay: #ffffff;
  --surface-hover: #eeeef7;
  --border: #dcdcea;
  --border-strong: #7f7fa2;
  --ink: #15132b;
  --ink-muted: #56537a;
  --ink-subtle: #67648c;
  --on-brand: #ffffff;
  --brand: #5238db;
  --brand-strong: #3d29a8;
  --brand-line: var(--brand);
  --brand-soft: #e9e6fc;
  --brand-ink: #4b35c9;
  --focus-ring: var(--brand-strong);
  --selection: var(--brand-soft);
  --warn: #f0a020;
  --on-warn: #2b1c00;
  --warn-ink: #8a5200;
  --warn-soft: #fdf0d8;
  --success: #0b7058;
  --success-soft: #dcf2ea;
  --on-success: #ffffff;
  --danger: #c4283c;
  --danger-soft: #fce9eb;
  --on-danger: #ffffff;
  --board: #2a2841;
  --board-ink: #f2f1fa;
  --grid-line: #dfe0ee;
  --scrim: #15132baa;

  --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --display: "Unbounded", "Instrument Sans", system-ui, sans-serif;
  --mono: "Wunschplan Mono", ui-monospace, SFMono-Regular, monospace;

  --display-xl: 40px;
  --display-lg: 30px;
  --display-md: 22px;
  --lead: 20px;
  --title-md: 17px;
  --body: 15px;
  --body-sm: 13px;
  --label: 13px;
  --mono-sm: 13px;
  --mono-xs: 11px;

  --shadow-sm: 0 1px 2px 0 #15132b14, 0 2px 6px -2px #15132b14;
  --shadow-md: 0 4px 12px -2px #15132b1f, 0 2px 4px -2px #15132b14;
  --shadow-lg: 0 16px 40px -8px #15132b26, 0 4px 12px -4px #15132b1a;

  --radius-sm: 6px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --easing-out: cubic-bezier(.2, .7, .3, 1);
  --duration-fast: 120ms;
  --duration-mid: 180ms;

  --gutter: 16px;
  --measure: 62ch;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #131320;
    --surface-raised: #1c1c2e;
    --surface-sunken: #0d0d17;
    --surface-overlay: #24243a;
    --surface-hover: #23233a;
    --border: #32324e;
    --border-strong: #6b6b92;
    --ink: #f2f1fa;
    --ink-muted: #a5a2c4;
    --ink-subtle: #8b88ad;
    --brand: #6a52f0;
    --brand-strong: #5a42e0;
    --brand-line: #7f6cff;
    --brand-soft: #2a2352;
    --brand-ink: #a294ff;
    --focus-ring: var(--brand-ink);
    --warn: #f5b73f;
    --warn-ink: #f5c169;
    --warn-soft: #3a2a0c;
    --success: #3ecf9e;
    --success-soft: #10322a;
    --on-success: #06211a;
    --danger: #ff8b95;
    --danger-soft: #3a1a20;
    --on-danger: #2b0a0f;
    --board: #08080f;
    --board-ink: #d9d7ea;
    --grid-line: #262640;
    --scrim: #05050ccc;
    --shadow-sm: 0 1px 2px 0 #00000066, 0 2px 6px -2px #00000059;
    --shadow-md: 0 4px 14px -2px #00000080, 0 1px 3px 0 #00000059;
    --shadow-lg: 0 18px 44px -8px #00000099, 0 4px 12px -4px #00000073;
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------ Grundlagen */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 23px;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--selection); color: var(--ink); }
:root { accent-color: var(--brand); caret-color: var(--brand-ink); }
* { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }

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

a {
  color: var(--brand-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--brand-line);
  transition: text-decoration-color var(--duration-fast) var(--easing-out);
}
a:hover { text-decoration-color: currentColor; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-size: var(--display-lg);
  line-height: 34px;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
h3 {
  font-size: var(--display-md);
  line-height: 28px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.lead {
  font-size: var(--lead);
  line-height: 26px;
  font-weight: 400;
  letter-spacing: -0.008em;
  color: var(--ink-muted);
}
.muted { color: var(--ink-muted); }
code, .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
b, strong { font-weight: 600; }

.wrap {
  width: min(100% - 2 * var(--gutter), 1120px);
  margin-inline: auto;
}

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

/* ------------------------------------------------------------ Kopfzeile */

/* Seit 22.09.2026 klebt die Kopfzeile oben: halb durchscheinend, und
   sobald gescrollt wurde, mit Linie darunter (Klasse per landing.js). */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-mid) var(--easing-out), box-shadow var(--duration-mid) var(--easing-out);
}
.kopf.gescrollt {
  border-bottom-color: var(--border);
  box-shadow: 0 6px 20px -14px rgba(27, 29, 42, .25);
}
.kopf .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--display-md);
  line-height: 1;
  letter-spacing: -0.01em;
}
.marke svg { color: var(--brand-ink); }
.kopf__app {
  font-weight: 600;
  font-size: var(--body);
  padding: 8px 16px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out), transform var(--duration-fast) var(--easing-out);
}
.kopf__app:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ------------------------------------------------------------ Knöpfe */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: var(--radius-lg);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background var(--duration-mid) var(--easing-out),
    color var(--duration-mid) var(--easing-out),
    border-color var(--duration-mid) var(--easing-out),
    box-shadow var(--duration-mid) var(--easing-out),
    transform var(--duration-mid) var(--easing-out);
}
.knopf svg { flex: none; }
.knopf--voll {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-md);
}
.knopf--voll:hover {
  background: var(--brand-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.knopf--voll:active {
  background: var(--brand-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}
.knopf--leise {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.knopf--leise:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.knopf--leise:active { background: var(--surface-hover); }

/* ------------------------------------------------------------ Kopfbereich */

.held .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding: 40px 0 72px;
  align-items: center;
}
@media (min-width: 900px) {
  .held .wrap {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 56px;
    padding: 56px 0 96px;
  }
}
.held { position: relative; overflow: hidden; }
/* Ein weicher Indigo-Schein hinter der Tafel, damit der Kopf nicht auf
   flachem Grau steht. */
.held::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60vw; max-width: 900px;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.held .wrap { position: relative; z-index: 1; }
.held h1 {
  font-size: var(--display-xl);
  line-height: 44px;
  letter-spacing: -0.01em;
}
/* Unbounded läuft breit: unter 400px sonst bis zu dreizeilig ohne Luft
   (Designsystem „Wunschplan x Impec", eingeplant). */
@media (max-width: 399px) {
  .held h1, .text-seite h1 { font-size: 32px; line-height: 36px; }
}
/* Gestaffelter Einstieg: Überschrift, Text, Knöpfe, Kleingedrucktes,
   dann die Tafel – nur wenn Bewegung erlaubt ist. */
@media (prefers-reduced-motion: no-preference) {
  .held__text > * { animation: auftauchen .7s var(--easing-out) both; }
  .held__text > :nth-child(1) { animation-delay: .05s; }
  .held__text > :nth-child(2) { animation-delay: .15s; }
  .held__text > :nth-child(3) { animation-delay: .25s; }
  .held__text > :nth-child(4) { animation-delay: .35s; }
  .held__bild { animation: tafel-auftauchen .9s var(--easing-out) .2s both; }
  @keyframes auftauchen {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes tafel-auftauchen {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
    to { opacity: 1; transform: none; }
  }
}
.held__bild { position: relative; display: grid; gap: 18px; }
.held h1 em {
  font-style: normal;
  color: var(--brand-ink);
}
.held .lead {
  max-width: var(--measure);
  margin-top: 22px;
}
.held__handlung {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
@media (max-width: 599px) {
  .held__handlung .knopf { flex: 1 1 100%; }
}
.held__klein {
  margin-top: 16px;
  font-size: var(--body-sm);
  line-height: 19px;
  color: var(--ink-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
}
.held__klein span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.held__klein svg { color: var(--success); flex: none; }
/* Schmal: untereinander mit Haken. Breit: in einer Zeile mit Punkten –
   ein umbrechender Punkt am Zeilenanfang sähe verrutscht aus. */
@media (max-width: 599px) {
  .held__klein { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 600px) {
  .held__klein svg { display: none; }
  .held__klein span + span::before {
    content: "·";
    margin-inline: 10px;
    color: var(--border-strong);
  }
}

/* Die zwei Arten von Wünschen – im Kopf des Abschnitts „Was Wunschplan
   anders macht" (auf Wunsch des Nutzers dorthin, nicht in den Seitenkopf). */
.wuensche {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: var(--measure);
}
.wuensche li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: var(--body);
  color: var(--ink-muted);
}
.wuensche strong { color: var(--ink); }
.wuensche__zeichen {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
}

/* Die Magnettafel – die Illustration im Kopf. Eine SVG-Zeichnung, die
   ihre Farben aus denselben Tokens liest wie die App. */
.tafel-bild {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 40px rgba(27, 29, 42, .14));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tafel-bild { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
}
.tafel-bild .board { fill: var(--surface-hover); }
.tafel-bild .grid { fill: var(--grid-line); }
.tafel-bild .brett { fill: var(--board); }
.tafel-bild .brett-text { fill: var(--board-ink); font-family: var(--sans); font-size: 13px; letter-spacing: .22em; font-weight: 600; }
.tafel-bild .platte { fill: var(--border); }
.tafel-bild .sitz { fill: var(--surface-raised); }
.tafel-bild .sitz--frei { fill: var(--surface-hover); }
.tafel-bild .sitz--ziel { fill: var(--brand-soft); stroke: var(--brand-line); stroke-width: 1.5; stroke-dasharray: 3 3; }
.tafel-bild .vor { fill: var(--ink); font-family: var(--sans); font-weight: 600; font-size: 13px; }
/* .nach entfiel 18.09.2026 – die Demo trägt nur Vornamen. */
.tafel-bild .zettel { fill: var(--surface-raised); }
.tafel-bild .zettel-rand { fill: none; stroke: var(--border); }
.tafel-bild .zettel-titel { fill: var(--ink-subtle); font-family: var(--sans); font-weight: 600; font-size: 13px; }
.tafel-bild .npille { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.tafel-bild .npille--marke { fill: var(--brand-soft); stroke: var(--brand-line); }
.tafel-bild .npille-text { fill: var(--ink); font-family: var(--sans); font-weight: 600; font-size: 13px; }
.tafel-bild .npille-text--marke { fill: var(--brand); }
.tafel-bild .rz { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tafel-bild .rz--ok { stroke: var(--success); }
.tafel-bild .rz--bad { stroke: var(--danger); }
.tafel-bild .rz--info { stroke: var(--warn-ink); }
.tafel-bild .sitz-bg { fill: var(--surface-hover); stroke: transparent; stroke-width: 1.5; transition: fill .3s var(--easing-out), stroke .3s var(--easing-out); }
.tafel-bild .sitz-bg.ziel { fill: var(--brand-soft); stroke: var(--brand-line); stroke-dasharray: 3 3; }

/* Die Magnete: Position auf dem äußeren <g> per transform (setzt
   landing.js), Anfassen und Flug auf dem inneren. */
.tafel-bild .magnet { transform-box: fill-box; transform-origin: center; }
.tafel-bild .magnet__k {
  filter: url(#sitzschatten);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .25s var(--easing-out);
}
.tafel-bild .magnet:hover .magnet__k { transform: translateY(-2px) scale(1.03); filter: url(#magnetschatten); }
.tafel-bild .magnet--fliegt .magnet__k { filter: url(#magnetschatten); transform: scale(1.06); }
.tafel-bild .magnet--fliegt { pointer-events: none; }

/* Die Regeln auf dem Zettel sind anklickbar: heller Grund, wenn sie
   gerade spielen; ein Haken, wenn sie aufgegangen sind. */
.tafel-bild .regel-z { cursor: pointer; outline: none; }
.tafel-bild .regel-z__bg { fill: transparent; transition: fill .3s var(--easing-out); }
.tafel-bild .regel-z:hover .regel-z__bg, .tafel-bild .regel-z:focus-visible .regel-z__bg { fill: var(--surface-hover); }
.tafel-bild .regel-z.an .regel-z__bg { fill: var(--brand-soft); }
.tafel-bild .regel-z:focus-visible .regel-z__bg { stroke: var(--brand); stroke-width: 1.5; }
.tafel-bild .regel-z.erledigt .npille { stroke: var(--success); }
.tafel-bild .regel-z__k { transform-box: fill-box; transform-origin: center; transition: opacity .4s var(--easing-out), transform .4s var(--easing-out); }
.tafel-bild .regel-z.weg .regel-z__k { opacity: 0; transform: translateY(8px); }
.tafel-bild .regel-z.weg { pointer-events: none; }

/* Die Phasen der Tafel (22.09.2026): Tische, Zettel und Magnete tragen
   „weg", solange ihr Schritt noch nicht dran war. Ohne Skript steht
   nichts auf „weg". Mit .tafel--sofort schaltet das Skript die Übergänge
   kurz ab, um einen Zustand ohne Bewegung zu setzen. */
.tafel-bild .tische > g { transform-box: fill-box; transform-origin: center; transition: opacity .45s var(--easing-out), transform .45s var(--easing-out); }
.tafel-bild .tische > g.weg { opacity: 0; transform: scale(.6); }
.tafel-bild .zettel-g { transform-box: fill-box; transform-origin: center; transition: opacity .5s var(--easing-out), transform .5s var(--easing-out); }
.tafel-bild .zettel-g.weg { opacity: 0; transform: translate(28px, 14px) rotate(3deg); }
.tafel-bild .magnet.weg .magnet__k { opacity: 0; transform: scale(.4); }
.tafel-bild .magnet__k { transition: transform .3s var(--easing-out), opacity .3s var(--easing-out); }
.tafel-bild.tafel--sofort *, .tafel-bild.tafel--sofort { transition: none !important; }

/* „Alle sitzen" oben rechts – erscheint, wenn die dritte Regel sitzt. */
.tafel-bild .tafel-ok { opacity: 0; transform-box: fill-box; transform-origin: center; transform: translateY(-6px) scale(.96); transition: opacity .45s var(--easing-out), transform .45s var(--easing-out); }
.tafel-bild .tafel-ok.an { opacity: 1; transform: none; }
.tafel-bild .tafel-ok__bg { fill: var(--success-soft); stroke: var(--success); }
.tafel-bild .tafel-ok__haken { fill: none; stroke: var(--success); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tafel-bild .tafel-ok__text { fill: var(--success); font-family: var(--sans); font-weight: 600; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .tafel-bild .magnet__k, .tafel-bild .tafel-ok, .tafel-bild .sitz-bg, .tafel-bild .regel-z__bg { transition: none; }
}

/* ------------------------------------------------------------ Abschnitte */

.abschnitt {
  padding: 72px 0;
}
.abschnitt--hell {
  background: var(--surface-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 900px) {
  .abschnitt { padding: 96px 0; }
}
.abschnitt__kopf {
  max-width: var(--measure);
  margin-bottom: 40px;
}
.abschnitt__kopf .lead { margin-top: 0; }

/* Die vier Punkte – keine gleich großen Kacheln, sondern vier Zeilen:
   links der Satz, rechts das Beispiel, und in jeder zweiten Zeile
   umgekehrt. */
.punkt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 48px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--border);
}
.punkt:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 760px) {
  .punkt {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    padding: 40px 0;
  }
  /* Jede zweite Zeile umgekehrt – ausdrücklich per Klasse, nicht per
     nth-child: der Abschnittskopf zählt sonst mit. */
  .punkt--umgekehrt .punkt__text { order: 2; }
}
.punkt__text { max-width: 44ch; }
.punkt__text p { color: var(--ink-muted); }
.punkt__nr {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: var(--mono-sm);
  line-height: 18px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink-subtle);
  padding: 2px 8px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
}
.punkt:hover .punkt__nr { background: var(--brand); color: var(--on-brand); border-color: var(--brand-line); }
.punkt__nr { transition: background var(--duration-mid) var(--easing-out), color var(--duration-mid) var(--easing-out), border-color var(--duration-mid) var(--easing-out); }

/* Einblenden beim Scrollen (22.09.2026): landing.js setzt html.js und
   beobachtet [data-reveal]; ohne Skript ist alles sofort da. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--easing-out), transform .7s var(--easing-out); }
  html.js [data-reveal].sichtbar { opacity: 1; transform: none; }
  html.js .punkt.sichtbar .punkt__text > * { animation: auftauchen .6s var(--easing-out) both; }
  html.js .punkt.sichtbar .punkt__text > :nth-child(2) { animation-delay: .08s; }
  html.js .punkt.sichtbar .punkt__text > :nth-child(3) { animation-delay: .16s; }
}

/* ---- Beispiele: gebaut aus denselben Bausteinen wie in der App */

.beispiel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.beispiel--spalte {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.pille {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  font-size: var(--body);
  white-space: nowrap;
}
.pille--frei {
  background: transparent;
  color: var(--ink-muted);
  border-style: dashed;
  box-shadow: none;
  font-weight: 500;
}

.regel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  font-size: var(--label);
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.006em;
  border: 1px solid;
}
.regel svg { flex: none; }
.regel--bad { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
.regel--ok { color: var(--success); background: var(--success-soft); border-color: var(--success); }
.regel--info { color: var(--warn-ink); background: var(--warn-soft); border-color: var(--warn-ink); }
.regel--warn { color: var(--warn-ink); background: var(--warn-soft); border-color: var(--warn-ink); }

.regelzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.regelzeile .zwischen {
  flex-basis: 100%;
  color: var(--ink-subtle);
  font-size: var(--body-sm);
  line-height: 16px;
  font-weight: 400;
}

/* Der Boden aus der App: Chips mit Zahlen, die Regel klappt darunter auf */
.boden {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.abschnitt--hell .boden { background: var(--surface); }
.boden__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  font-size: var(--body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip--bad {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--danger);
}
.chip--warn { color: var(--warn-ink); background: var(--warn-soft); border-color: var(--warn-ink); }
.boden__satz {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger);
  font-size: var(--body-sm);
  line-height: 19px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.boden__satz svg { flex: none; align-self: center; }

/* Der vereinfachte Sitzplan im Boden: neun Zweiertische, 18 Namen. Die
   Plättchen liegen absolut und wandern beim Blättern an ihren neuen Platz –
   deshalb Übergänge auf left/top statt eines Neuaufbaus. */
.miniplan {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-sunken);
  overflow: hidden;
  user-select: none;
  /* Die Namen richten sich nach der Breite des Plans, nicht nach der der
     Seite: auf dem Telefon ist die Karte halb so breit, „Tomasz" und
     „Zeynep" würden sonst abgeschnitten. */
  container-type: inline-size;
}
.miniplan:empty { display: none; }
.miniplan__tafel {
  position: absolute;
  left: 36%; top: 2%; width: 28%; height: 9%;
  border-radius: 4px;
  background: var(--board);
  display: grid;
  place-items: center;
  font-size: clamp(11px, 1.7cqw, 13px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--board-ink);
}
.miniplan__tisch {
  position: absolute;
  border-radius: 6px;
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
}
.miniplan__name {
  position: absolute;
  width: 13%; height: 18%;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  font-size: clamp(11px, 3.2cqw, var(--body-sm));
  line-height: 1;
  color: var(--ink);
  overflow: hidden;
  white-space: nowrap;
  transition: left .5s var(--easing-out), top .5s var(--easing-out),
              background var(--duration-fast) var(--easing-out),
              border-color var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out);
}
/* Das Paar aus dem Satz darunter – in derselben Farbe wie der Satz. */
.miniplan__name--bad { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); font-weight: 600; }
.miniplan__name--warn { background: var(--warn-soft); border-color: var(--warn-ink); color: var(--warn-ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .miniplan__name { transition: none; } }

/* Vorschläge durchblättern – im Boden unter den Chips */
.boden__blaettern {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.blaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
}
.blaettern__pfeil {
  width: 36px; height: 36px;
  padding: 0;
  cursor: pointer;
  font: inherit;
  transition: border-color var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out);
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  display: inline-grid;
  place-items: center;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.punkte {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.punkte button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: background var(--duration-mid) var(--easing-out);
}
.punkte button.an { background: var(--brand); width: 20px; }
.blaettern__pfeil:hover, .mini:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.mini { cursor: pointer; font-family: inherit; transition: background var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out); }
.mini--voll:hover { background: var(--brand-strong); }
.boden__satz--warn { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-ink); }
.boden__satz--ok { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.chip[hidden] { display: none; }
/* Wechsel des Vorschlags: kurz ausblenden und wieder her – die Bewegung
   aus Designsystem 09, hier in klein. */
@media (prefers-reduced-motion: no-preference) {
  .boden.wechsel .boden__zeile, .boden.wechsel .boden__satz { animation: boden-wechsel .42s var(--easing-out); }
  @keyframes boden-wechsel { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }
}
.blaettern__label {
  font-size: var(--body-sm);
  line-height: 16px;
  font-weight: 400;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.blaettern__knoepfe {
  display: inline-flex;
  gap: 8px;
  flex-basis: 100%;
  justify-content: center;
}
.mini {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--label);
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.006em;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--ink);
}
.mini--voll {
  background: var(--brand);
  color: var(--on-brand);
  border-color: transparent;
}

/* Der Zettel: eine Eingabezeile, darunter, was daraus wurde */
.boden, .zettel, .matrix-karte, .auswahl__feld { transition: box-shadow var(--duration-mid) var(--easing-out), transform var(--duration-mid) var(--easing-out); }
.punkt:hover .zettel, .punkt:hover .matrix-karte, .punkt:hover .auswahl__feld { box-shadow: var(--shadow-md); }
.zettel {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.zettel__eingabe {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: var(--mono-sm);
  line-height: 18px;
  font-weight: 500;
  color: var(--ink);
}
.zettel__eingabe input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
}
.zettel__eingabe input::placeholder { color: var(--ink-subtle); opacity: 1; }
.zettel__eingabe:focus-within { box-shadow: inset 0 -2px 0 var(--brand-strong); }
.zettel__eingabe.fehler { box-shadow: inset 0 -2px 0 var(--danger); }
.zettel__liste li.neu { animation: zeile-neu .3s var(--easing-out); }
@keyframes zeile-neu { from { background: var(--brand-soft); } to { background: transparent; } }
.zettel__eingabe:focus-within::after { display: none; }
.zettel__eingabe::after {
  content: "";
  width: 1.5px; height: 1.15em;
  background: var(--brand);
  animation: caret 1.1s steps(2, jump-none) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .zettel__eingabe input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
}
.zettel__eingabe input::placeholder { color: var(--ink-subtle); opacity: 1; }
.zettel__eingabe:focus-within { box-shadow: inset 0 -2px 0 var(--brand-strong); }
.zettel__eingabe.fehler { box-shadow: inset 0 -2px 0 var(--danger); }
.zettel__liste li.neu { animation: zeile-neu .3s var(--easing-out); }
@keyframes zeile-neu { from { background: var(--brand-soft); } to { background: transparent; } }
.zettel__eingabe::after { animation: none; } }
.zettel__liste {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.zettel__liste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
}
.zettel__liste li + li { border-top: 1px solid var(--border); }
.zettel__liste code { font-size: var(--mono-sm); }
.zettel__liste .bedeutung {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--body-sm);
  line-height: 19px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.zettel__liste .bedeutung svg { color: var(--ink); }
@media (max-width: 420px) {
  .zettel__liste li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .zettel__liste .bedeutung { white-space: normal; }
}

/* Die Wunschmatrix, verkleinert: Reiter je Regelart, schräge Namen oben,
   ein Klick pro Paar – dieselben Zellen wie in der App (ui/panels.css). */
.matrix-karte {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 12px 14px 14px;
  overflow: hidden;
}
.matrix-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.matrix-tabs button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--label);
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.006em;
  color: var(--ink-muted);
}
.matrix-tabs .an {
  background: var(--surface-hover);
  color: var(--ink);
  font-weight: 600;
}
.matrix-karte--ok .matrix-tabs .an svg { color: var(--success); }
.matrix-karte--bad .matrix-tabs .an svg { color: var(--danger); }
.matrix-karte--warn .matrix-tabs .an svg { color: var(--warn-ink); }
.matrix {
  border-collapse: separate;
  border-spacing: 3px;
  font-size: var(--body-sm);
}
.matrix th { font-weight: 500; color: var(--ink); text-align: left; padding: 0 8px 0 0; white-space: nowrap; }
.matrix tr:first-child th { height: 58px; width: 30px; vertical-align: bottom; padding: 0; }
.matrix tr:first-child th span {
  display: block;
  width: 30px;
  transform: translateX(12px) rotate(-60deg);
  transform-origin: left bottom;
  white-space: nowrap;
  font-size: var(--body-sm);
  line-height: 16px;
  font-weight: 500;
}
.matrix td {
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
  text-align: center;
  vertical-align: middle;
  padding: 0;
}
.matrix td button {
  width: 100%; height: 100%;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  border-radius: 5px;
}
/* Nur ein Punkt, kein Regel-Icon – wie in der App (Nutzer, 20.09.2026):
   welche Art gesetzt wird, sagt der Reiter; die Zelle muss nur zeigen,
   DASS etwas gesetzt ist. Der Punkt erbt `color` – transparent, beim
   Überfahren blass, gesetzt in der Reiterfarbe. */
.matrix__punkt { display: block; margin: auto; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.matrix td:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.matrix td:hover button { color: var(--border-strong); }
.matrix td.matrix__selbst { background: var(--surface-hover); border-color: transparent; }
.matrix-karte--ok td.an { background: var(--success-soft); border-color: var(--success); }
.matrix-karte--ok td.an button { color: var(--success); }
.matrix-karte--bad td.an { background: var(--danger-soft); border-color: var(--danger); }
.matrix-karte--bad td.an button { color: var(--danger); }
.matrix-karte--warn td.an { background: var(--warn-soft); border-color: var(--warn-ink); }
.matrix-karte--warn td.an button { color: var(--warn-ink); }

/* Die fünf Raumanordnungen als Miniaturen – aus denselben Zahlen wie
   ROOM_TEMPLATES in der App gezeichnet. */
.vorlagen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 480px) {
  .vorlagen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vorlage {
  display: grid;
  gap: 8px;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-size: var(--label);
  line-height: 16px;
  font-weight: 600;
  color: var(--ink-muted);
}
.vorlage__knopf {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.vorlage__bild {
  width: 100%;
  aspect-ratio: 5 / 4;
  height: auto;
  background: var(--surface-hover);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  padding: 6%;
  box-sizing: border-box;
  transition: border-color var(--duration-mid) var(--easing-out), background var(--duration-mid) var(--easing-out), transform var(--duration-mid) var(--easing-out);
}
.vorlage__knopf:hover .vorlage__bild { border-color: var(--border-strong); transform: translateY(-2px); }
.vorlage__knopf[aria-pressed="true"] .vorlage__bild { border-color: var(--brand); background: var(--brand-soft); }
.vorlage__knopf[aria-pressed="true"] span { color: var(--ink); font-weight: 600; }
.vorlage__knopf:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
.vorlage .v-tafel { fill: var(--board); }
.vorlage .v-tisch { fill: var(--surface-raised); stroke: var(--border-strong); stroke-width: 6; }

/* Die Bühne über den Miniaturen (22.09.2026): dieselbe Anordnung groß,
   die Tische gleiten beim Wechsel an ihren neuen Platz. Gebaut von
   landing.js aus den Miniaturen. */
/* Etwas schmaler als die Spalte (22.09.2026): Der Raum ist der leichteste
   der sechs Punkte und braucht nicht die volle Breite. Die Begrenzung sitzt
   am ganzen Block, damit die Zeichnung und die Knoepfe darunter buendig
   bleiben; die Tische stehen in Prozent und schrumpfen mit. */
.vorlagen-block { display: grid; gap: 14px; width: 86%; margin-inline: auto; }
/* Auf schmalen Geraeten ist die Spalte selbst schon schmal. */
@media (max-width: 600px) { .vorlagen-block { width: 100%; } }
.buehne {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-hover);
  background-image: radial-gradient(var(--grid-line) 1px, transparent 1.2px);
  background-size: 18px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.buehne:empty { display: none; }
.buehne__tafel, .buehne__tisch {
  position: absolute;
  border-radius: 14%;
  transition: left .6s var(--easing-out), top .6s var(--easing-out), width .6s var(--easing-out), height .6s var(--easing-out), opacity .4s var(--easing-out), transform .6s var(--easing-out);
}
.buehne__tafel { background: var(--board); border-radius: 6px; }
.buehne__tisch { background: var(--surface-raised); border: 1.5px solid var(--border-strong); box-shadow: var(--shadow-sm); border-radius: 6px; }
.buehne__tisch.weg { opacity: 0; transform: scale(.5); }
@media (prefers-reduced-motion: reduce) { .buehne__tafel, .buehne__tisch { transition: none; } }

/* Klassen und Räume: zwei Auswahlfelder mit ihren Listen, wie der
   EntityPicker in der App */
.auswahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.auswahl__feld {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 12px 12px 6px;
}
.auswahl__label {
  display: block;
  font-size: var(--label);
  line-height: 16px;
  font-weight: 600;
  color: var(--ink-subtle);
  letter-spacing: 0.006em;
  margin-bottom: 6px;
}
.auswahl__wert {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: var(--body);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out);
}
.auswahl__wert:hover { border-color: var(--border-strong); }
.auswahl__wert[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.auswahl__wert svg { color: var(--ink-muted); flex: none; transition: transform var(--duration-mid) var(--easing-out); }
.auswahl__wert[aria-expanded="true"] svg { transform: rotate(180deg); }
.auswahl__liste {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
/* Mit Skript zugeklappt, öffnet sich auf Klick; ohne Skript immer offen. */
html.js .auswahl__liste { display: none; }
html.js .auswahl__liste.offen { display: block; animation: liste-auf .2s var(--easing-out); }
@keyframes liste-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.auswahl__liste li {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--body);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-out), color var(--duration-fast) var(--easing-out);
}
.auswahl__liste li:hover { background: var(--surface-hover); color: var(--ink); }
.auswahl__liste li.an {
  color: var(--ink);
  background: var(--brand-soft);
  font-weight: 600;
}

/* ------------------------------------------------------------ Daten */

.daten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) {
  .daten { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; }
}
.daten__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.daten__liste li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.daten__liste li:last-child { border-bottom: 1px solid var(--border); }
.daten__liste .zeichen {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
}
.daten__liste strong {
  display: block;
  margin-bottom: 2px;
}
.daten__liste p { color: var(--ink-muted); font-size: var(--body); }

/* Bauweise als Grafik (05.10.2026): gestrichelte Grenze ums Gerät, darunter
   was aus dem Netz kommt und was auf dem Server liegt. Steht auf der
   Startseite unter dem Datentext und in der FAQ bei „Wo liegen meine Daten?“. */
.bauweise { margin: 32px 0 0; display: grid; gap: 12px; color: var(--ink); }
.faq__antwort .bauweise { margin: 16px 0 4px; }
.bauweise__rand {
  border: 2px dashed var(--brand-line);
  border-radius: var(--radius-xl);
  padding: 12px 14px 14px;
  display: grid;
  gap: 10px;
}
.bauweise__etikett {
  font: 500 var(--mono-xs)/16px var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.bauweise__geraet {
  background: var(--brand-soft);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: grid;
  gap: 12px;
}
.bauweise__kopf { display: flex; align-items: center; gap: 10px; }
.bauweise__kopf strong { display: block; font-size: var(--title-md); line-height: 22px; }
.bauweise__kopf small { display: block; font-size: var(--body-sm); line-height: 18px; color: var(--ink-muted); }
.bauweise__zeichen {
  flex: none;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--on-brand);
  display: grid;
  place-items: center;
}
.bauweise__zeichen--still { background: var(--surface-sunken); color: var(--ink-muted); }
.bauweise__kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.bauweise__kachel {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font-size: var(--body-sm);
  line-height: 17px;
  font-weight: 500;
}
.bauweise__kachel svg { flex: none; color: var(--brand-ink); }
.bauweise__kachel--loeser { grid-column: 1 / -1; background: var(--brand); color: var(--on-brand); }
.bauweise__kachel--loeser svg { color: var(--on-brand); }
.bauweise__draussen { display: grid; gap: 8px; }
.bauweise__zeile {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  font-size: var(--body-sm);
  line-height: 19px;
  color: var(--ink-muted);
}
.bauweise__zeile strong { display: block; color: var(--ink); font-size: var(--body); line-height: 21px; }
.bauweise figcaption { font-size: var(--body-sm); line-height: 19px; color: var(--ink-subtle); }

/* ------------------------------------------------------------ Bild */

.bild {
  margin: 0;
}
.bild__rahmen {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--surface-raised);
}
.bild img {
  display: block;
  width: 100%;
  height: auto;
}
.bild figcaption {
  margin-top: 14px;
  color: var(--ink-muted);
  font-size: var(--body-sm);
  line-height: 19px;
  text-align: center;
  text-wrap: balance;
  max-width: 65ch;
  margin-inline: auto;
}

/* ------------------------------------------------------------ Schluss */

.schluss .wrap {
  text-align: center;
  padding: 88px 0;
}
.schluss h2 { margin-bottom: 14px; }
.schluss .lead {
  max-width: 54ch;
  margin-inline: auto;
}
.schluss .held__handlung {
  justify-content: center;
}
.schluss__mail {
  margin-top: 28px;
  color: var(--ink-muted);
}
.schluss__mail a { font-weight: 600; }

/* ------------------------------------------------------------ Fuß */

.fuss {
  border-top: 1px solid var(--border);
  padding: 28px 0 40px;
  color: var(--ink-subtle);
  font-size: var(--body-sm);
  line-height: 19px;
}
.fuss .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 48px;
}
.fuss__marke { padding-top: 2px; }
.fuss__spalten {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 16px 48px;
}
.fuss__titel {
  margin: 0 0 4px;
  font-size: var(--body-sm);
  font-weight: 600;
  color: var(--ink);
}
.fuss__gruppe ul { list-style: none; margin: 0; padding: 0; }
.fuss a {
  color: var(--ink-muted);
  text-decoration-color: var(--border-strong);
  padding: 4px 0;
  display: inline-block;
}
.fuss a:hover { color: var(--ink); }
@media (max-width: 560px) {
  .fuss__spalten { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); width: 100%; }
}

/* ------------------------------------------------------------ Unterseiten */

.text-seite .wrap {
  max-width: 72ch;
  padding: 32px 0 80px;
}
.text-seite h1 {
  font-size: var(--display-xl);
  line-height: 44px;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  hyphens: auto; /* „Datenschutzerklärung“ passt auf 375 px gerade so; schmaler bricht das Wort */
  overflow-wrap: anywhere;
}
.text-seite h2 {
  font-size: var(--display-md);
  line-height: 28px;
  letter-spacing: -0.01em;
  margin: 36px 0 10px;
}
.text-seite ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.text-seite li { margin-bottom: 8px; }

/* „Was ist neu" (18.09.2026): ein Eintrag je Update, das Datum als
   Vorzeile über der Überschrift, die Einträge durch Linien getrennt. */
.neu .lead { margin-bottom: 8px; }
.neu__eintrag { padding: 28px 0; border-top: 1px solid var(--border); }
.neu__eintrag:first-of-type { margin-top: 24px; }
.neu__datum { display: block; font-size: var(--label); line-height: 16px; font-weight: 600; color: var(--brand-ink); letter-spacing: 0.006em; }
.neu .neu__eintrag h2 { margin: 6px 0 12px; }
.neu__eintrag ul { margin-bottom: 0; }

/* FAQ (18.09.2026): Abschnitte in Leserichtung des Arbeitsablaufs, jede
   Frage als aufklappbare Zeile – 36 Antworten am Stück wären eine Wand.
   Ein Direktlink (#matrix) klappt die Frage per Skript auf. */
.faq .lead { margin-bottom: 20px; }
.faq__inhalt {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.faq__inhalt a {
  font-size: var(--label);
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.006em;
  color: var(--brand-ink);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
  transition: background var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out);
}
.faq__inhalt a:hover { background: #e4e5f8; border-color: var(--brand-line); }
.faq__abschnitt { padding-top: 12px; }
.faq .faq__abschnitt h2 { margin: 36px 0 8px; }
.faq__frage { border-top: 1px solid var(--border); }
.faq__frage:last-child { border-bottom: 1px solid var(--border); }
.faq__frage summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__frage summary::-webkit-details-marker { display: none; }
.faq__frage summary::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 2px;
  border-right: 2px solid var(--brand-ink);
  border-bottom: 2px solid var(--brand-ink);
  transform: rotate(-45deg);
  transition: transform var(--duration-mid) var(--easing-out);
}
.faq__frage[open] summary::before { transform: rotate(45deg); }
.faq__frage summary:hover { color: var(--brand-ink); }
.faq__antwort { padding: 0 0 18px 20px; color: var(--ink-muted); }
.faq__antwort p { margin: 0 0 12px; }
.faq__antwort p:last-child { margin-bottom: 0; }
.faq__antwort strong { color: var(--ink); }
/* Dasselbe Zeichenformat auch im Changelog (20.09.2026). */
.faq__antwort code,
.neu__eintrag code {
  font-family: var(--mono);
  font-size: .9em;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--surface-hover);
  color: var(--ink);
  white-space: pre;
}
.faq__antwort ul, .faq__antwort ol { margin: 0 0 12px; padding-left: 22px; }
/* Lizenzhinweise im Impressum (24.09.2026, „Verwendete Software" – Plan
   Wünsche einsammeln, Entscheidung des Nutzers: eigener Abschnitt im
   Impressum statt eigener Seite). Derselbe Aufklapper wie in der FAQ
   (Regel „ein System"), aber eigene Klasse statt `.faq__frage`, weil hier
   Lizenztexte stehen, keine Antworten. */
.lizenz__eintrag { border-top: 1px solid var(--border); }
.lizenz__eintrag:last-child { border-bottom: 1px solid var(--border); }
.lizenz__eintrag summary {
  display: flex; align-items: baseline; gap: 12px; padding: 14px 0;
  font-weight: 600; cursor: pointer; list-style: none;
}
.lizenz__eintrag summary::-webkit-details-marker { display: none; }
.lizenz__eintrag summary::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 2px;
  border-right: 2px solid var(--brand-ink); border-bottom: 2px solid var(--brand-ink);
  transform: rotate(-45deg); transition: transform var(--duration-mid) var(--easing-out);
}
.lizenz__eintrag[open] summary::before { transform: rotate(45deg); }
.lizenz__inhalt { padding: 0 0 18px 20px; color: var(--ink-muted); }
.lizenz__inhalt p { margin: 0 0 10px; }
.lizenz__text {
  font-family: var(--mono); font-size: .8em; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--surface-hover); color: var(--ink);
  padding: 14px 16px; border-radius: 8px; margin: 0;
}

/* Zeichentabelle der Texteingabe (20.09.2026): drei Spalten, in schmalen
   Fenstern scrollt sie seitwärts statt umzubrechen. */
.faq__tabelle { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: var(--body-sm); }
.faq__tabelle th, .faq__tabelle td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border); }
.faq__tabelle th { font-size: var(--label); line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.faq__tabelle td:first-child { white-space: nowrap; }
@media (max-width: 600px) {
  .faq__tabelle { display: block; overflow-x: auto; }
}
.faq__antwort li { margin-bottom: 6px; }
.faq__antwort li:last-child { margin-bottom: 0; }
.faq__antwort a { color: var(--brand-ink); }
.faq__offen { font-style: italic; color: var(--ink-subtle); }

/* Platzhalter, bis die Screenshots da sind – im Entwurf sichtbar als
   gestrichelter Rahmen mit Bildunterschrift. */
.faq__bild { margin: 12px 0 4px; }
.faq__bild img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
}
.faq__bild picture { display: block; }
.faq__bild img[width="488"] { width: 244px; }
.faq__bild img[width="1120"] { width: 560px; }
.faq__bild img[width="1000"] { width: 500px; }
.faq__bild figcaption { margin-top: 6px; font-size: var(--body-sm); line-height: 19px; color: var(--ink-subtle); }
.faq__bild--fehlt {
  padding: 28px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}
.faq__bild--fehlt figcaption { margin: 0; }


/* ------------------------------------------------------------ Schrittband (22.09.2026) */

/* Vier Schritte unter der Tafel: der laufende in brand-soft/brand-ink
   (eingeschalteter Zustand), erledigte mit Haken in success, offene in
   ink-subtle. Jeder Schritt ist ein Knopf und springt die Phase an. */
.schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.schritt {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--label);
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.006em;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-mid) var(--easing-out), border-color var(--duration-mid) var(--easing-out), color var(--duration-mid) var(--easing-out), box-shadow var(--duration-mid) var(--easing-out);
}
.schritt:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.schritt__nr {
  flex: none;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-hover);
  color: var(--ink-subtle);
  font-size: var(--body-sm);
  line-height: 16px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  transition: background var(--duration-mid) var(--easing-out), color var(--duration-mid) var(--easing-out);
}
.schritt__text { min-width: 0; }
.schritt.an { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }
.schritt.an .schritt__nr { background: var(--brand); color: var(--on-brand); }
.schritt.fertig { color: var(--ink); }
.schritt.fertig .schritt__nr { background: var(--success-soft); color: var(--success); }
.schritt--plan.fertig { border-color: var(--success); }
/* Laufende Phase: der Punkt pulsiert leise. */
@media (prefers-reduced-motion: no-preference) {
  .schritt.an .schritt__nr { animation: schritt-puls 1.2s var(--easing-out) infinite alternate; }
  @keyframes schritt-puls { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 35%, transparent); } to { box-shadow: 0 0 0 5px transparent; } }
}
/* Unter 1100px ist die Tafel-Spalte zu schmal für vier Kästen nebeneinander. */
@media (max-width: 1099px) {
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 399px) {
  .schritt__text { font-size: var(--body-sm); line-height: 19px; font-weight: 400; }
}

/* ------------------------------------------------------------ Segment-Umschalter */

/* Lehrkraft/Klasse, Werkzeug, Ansicht: nebeneinander liegende Reiter in
   einer Schiene; der eingeschaltete in brand-soft mit brand-line. */
.segment {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.segment button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--label);
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.006em;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-out), color var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out);
}
.segment button:hover { background: var(--surface-hover); color: var(--ink); }
.segment button.an { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }
.segment button svg { flex: none; }
.segment--klein button { min-height: 30px; padding: 4px 10px; }
.segment--klein { padding: 3px; border-radius: 10px; }
.segment--klein button { border-radius: 7px; }

/* ------------------------------------------------------------ Zeile 1: zwei Ebenen */

.ebenen {
  display: grid;
  gap: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-md);
}
.ebenen .segment { justify-self: start; }
.ebenen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.ebenen__liste[hidden] { display: none; }
.ebenen__liste li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: var(--body);
}
.ebenen__liste li:first-child { border-top: 0; }
.ebenen__liste strong { color: var(--ink); font-weight: 600; }
.regelzeichen {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-hover);
  color: var(--ink);
}
.gewicht {
  font-size: var(--label);
  line-height: 16px;
  font-weight: 600;
  color: var(--ink-subtle);
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.ebenen__schalter { grid-template-columns: 1fr !important; }
.ebenen__schalter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 18px;
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
}
.ebenen__schalter input { width: 18px; height: 18px; margin: 0; }
.ebenen__schalter small { color: var(--ink-subtle); font-size: var(--body-sm); font-weight: 400; }
.ebenen__satz { grid-template-columns: 1fr !important; font-size: var(--body-sm); color: var(--ink-subtle); }
@media (prefers-reduced-motion: no-preference) {
  .ebenen__liste:not([hidden]) li { animation: auftauchen .35s var(--easing-out) both; }
  .ebenen__liste:not([hidden]) li:nth-child(2) { animation-delay: .05s; }
  .ebenen__liste:not([hidden]) li:nth-child(3) { animation-delay: .1s; }
  .ebenen__liste:not([hidden]) li:nth-child(4) { animation-delay: .15s; }
  .ebenen__liste:not([hidden]) li:nth-child(5) { animation-delay: .2s; }
}

/* ------------------------------------------------------------ Zeile 3: Zettel-Kopf, Matrix-Kopf */

.zettel__kopf, .matrix-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.zettel__kopf { padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.matrix-kopf { margin-bottom: 10px; }
.matrix-hinweis { font-size: var(--body-sm); line-height: 19px; color: var(--ink-subtle); font-weight: 400; }
.matrix-tabs { flex-wrap: wrap; }
.matrix-tabs button[hidden] { display: none; }
.matrix-karte--warn .matrix-tabs .an svg { color: var(--warn-ink); }
.matrix-karte--ok .matrix-tabs .an svg { color: var(--success); }
.punkt__text code { font-family: var(--mono); font-size: .92em; padding: 1px 6px; border-radius: 5px; background: var(--surface-hover); color: var(--ink); }

/* ------------------------------------------------------------ Zeile 4: Drehen auf der Bühne */

/* Die Möbelkästchen (Pult, Schrank, Tür, Fenster) sind am 22.09.2026 aus der
   Bühne geflogen – der Abschnitt zeigt nur noch Tische und Tafel. */
.buehne__tisch { cursor: pointer; }
.buehne__tisch:hover { border-color: var(--brand-line); }
.punkt__tipp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--body-sm) !important;
  line-height: 19px;
  color: var(--ink-subtle) !important;
}
.punkt__tipp svg { flex: none; }

/* ------------------------------------------------------------ Zeile 5: Plätze im Raum */

.plaetze {
  display: grid;
  gap: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-md);
}
.plaetze .segment { justify-self: start; }
.plaetze__raum {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 44px 12px 14px;
  background: var(--surface-sunken);
  background-image: radial-gradient(var(--grid-line) 1px, transparent 1.2px);
  background-size: 18px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.plaetze__brett {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  padding: 2px 18px;
  border-radius: 5px;
  background: var(--board);
  color: var(--board-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.plaetze__tisch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: var(--border);
}
.platz {
  min-height: 44px;
  border: 1.5px solid transparent;
  border-radius: 6px;
  background: var(--surface-raised);
  cursor: pointer;
  padding: 0;
  transition: background var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out), transform var(--duration-fast) var(--easing-out);
}
.platz:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.platz.gesperrt {
  background: repeating-linear-gradient(135deg, var(--surface-hover) 0 5px, var(--border-strong) 5px 6px);
  border-color: var(--border-strong);
}
.platz.bereich { background: var(--brand-soft); border: 1.5px dashed var(--brand-line); }
.platz.gesperrt.bereich { border-style: solid; }
.plaetze--bereich .platz.gesperrt { opacity: .55; cursor: not-allowed; }
.plaetze__hinweis { margin: 0; font-size: var(--body-sm); line-height: 19px; color: var(--ink-muted); }
.plaetze__hinweis b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ Zeile 6: Ergebnis */

.ergebnis {
  display: grid;
  gap: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-md);
  position: relative;
}
.ergebnis .segment { justify-self: start; }
.blatt {
  aspect-ratio: 297 / 190;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 6px;
  background: #fff;
  color: #15132b;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: background var(--duration-page) var(--easing-out), color var(--duration-page) var(--easing-out);
}
.blatt__kopf, .blatt__fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: var(--body-sm);
  line-height: 16px;
  font-weight: 400;
  color: #56537a;
  transition: opacity var(--duration-mid) var(--easing-out);
}
.blatt__fuss { justify-content: flex-start; gap: 6px; font-family: var(--display); font-weight: 600; font-size: 11px; color: #4b35c9; }
.blatt__raum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  align-content: center;
}
.blatt__tisch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border-radius: 6px;
  background: #dcdcea;
  transition: background var(--duration-page) var(--easing-out);
}
.blatt__tisch span {
  display: grid;
  place-items: center;
  min-height: 28px;
  border-radius: 4px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: font-size var(--duration-page) var(--easing-out), background var(--duration-page) var(--easing-out), color var(--duration-page) var(--easing-out);
}
/* Präsentation: dunkle Fläche, nur die Namen, groß. */
.blatt--praesentation { background: var(--board); color: var(--board-ink); border-color: var(--board); }
.blatt--praesentation .blatt__kopf, .blatt--praesentation .blatt__fuss { opacity: 0; }
.blatt--praesentation .blatt__tisch { background: #3b3b5a; }
.blatt--praesentation .blatt__tisch span { background: #2f2f4c; color: #f2f1fa; font-size: 13px; }
/* Gruppen: drei Gruppen als Ziffer auf dem Tisch, Namen ausgegraut. */
.blatt--gruppen .blatt__tisch { position: relative; }
.blatt--gruppen .blatt__tisch::before {
  content: "Gruppe " attr(data-gruppe);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #4b35c9;
  background: #e9e6fc;
  border: 1.5px solid #5238db;
  animation: auftauchen .35s var(--easing-out) both;
}
.blatt--gruppen .blatt__tisch[data-gruppe="2"]::before { animation-delay: .08s; }
.blatt--gruppen .blatt__tisch[data-gruppe="3"]::before { animation-delay: .16s; }
.ergebnis__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.ergebnis__knoepfe .mini { gap: 6px; }
.toast {
  position: absolute;
  left: 50%; bottom: 66px;
  transform: translateX(-50%);
  max-width: calc(100% - 28px);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: var(--body-sm);
  line-height: 19px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: toast-auf var(--duration-mid) var(--easing-out);
}
.toast[hidden] { display: none; }
@keyframes toast-auf { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translateX(-50%); } }

/* ================= Seite „Wunschplan Plus“ (plus.html, 05.10.2026) ================= */
/* ------------------------------------------------ Plus-Seite */
.preise { padding: 32px 0 80px; }
.preise h1 {
  font-size: var(--display-xl);
  line-height: 44px;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  max-width: 22ch;
}
.preise > .lead { max-width: 56ch; margin-bottom: 36px; }
.preise h2 { margin: 72px 0 8px; }
.preise h2 + .lead { margin-bottom: 24px; max-width: 56ch; }
@media (max-width: 399px) {
  .preise h1 { font-size: var(--display-lg); line-height: 34px; }
}

/* Karten */
.stufen {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) {
  .stufen { grid-template-columns: 1fr 1fr 1.15fr; }
}
.stufe {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: border-color var(--duration-mid) var(--easing-out), box-shadow var(--duration-mid) var(--easing-out);
}
/* Ganze Karte klickbar (06.10.2026): Der Hauptknopf (.stufe__ziel) legt eine unsichtbare Fläche über die
   Karte. Er bleibt das eigentliche Element (Tastatur, Screenreader); andere Links und Knöpfe liegen darüber.
   In Ruhe flach wie ein Infoblatt, erst beim Darüberfahren zeigt die Karte, dass sie klickbar ist. */
.stufe__ziel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
}
.stufe .stufe__ziel:hover, .stufe .stufe__ziel:active { transform: none; }
.stufe a:not(.stufe__ziel), .stufe button:not(.stufe__ziel), .stufe input, .stufe details { position: relative; z-index: 1; }
.stufe:has(.stufe__ziel:hover) { border-color: var(--brand-line); box-shadow: var(--shadow-md); }
.stufe__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.stufe h3 { margin: 0; }
.stufe__wer {
  font-size: var(--label);
  line-height: 16px;
  font-weight: 600;
  color: var(--ink-subtle);
  white-space: nowrap;
}
.stufe--plus .stufe__wer {
  color: var(--brand-ink);
  background: var(--brand-soft);
  padding: 4px 10px;
  border-radius: 999px;
}
.preis {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
}
.preis__betrag {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--display-lg);
  line-height: 34px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.preis__zusatz { color: var(--ink-subtle); font-size: var(--body-sm); line-height: 19px; }
.stufe__satz { color: var(--ink-muted); margin: 0; }
.stufe__punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: var(--body);
}
.stufe__punkte li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.stufe__punkte svg { margin-top: 3px; color: var(--success); }
.stufe--plus .stufe__punkte svg { color: var(--brand-ink); }
.stufe__handlung { margin-top: auto; display: grid; gap: 10px; padding-top: 6px; }
.stufe__handlung .knopf { width: 100%; }
.knopf__preis {
  font-weight: 500;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.stufe__klein { margin: 0; font-size: var(--body-sm); line-height: 19px; color: var(--ink-subtle); }

.preise__hinweis {
  margin: 16px 0 0;
  font-size: var(--body-sm);
  line-height: 19px;
  color: var(--ink-subtle);
}

/* Schulbereich und Bestätigungskarte (05.10.2026): Sie-Form, zwei Wege nebeneinander. */
.feld {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
}
.feld::placeholder { color: var(--ink-subtle); opacity: 1; }
select.feld { appearance: auto; }
.knopf--voll .knopf__preis { color: inherit; opacity: .85; }
.schule { margin-top: 56px; scroll-margin-top: 24px; }
.schule h2 { margin-top: 0; }
.schule > .lead { max-width: 56ch; margin-bottom: 24px; }
.schule__domain { display: grid; gap: 6px; max-width: 420px; margin-bottom: 24px; }
.schule__domain label, .schule__feld label, .schule__groesse legend { font-weight: 600; font-size: var(--body); }
.schule__wege { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .schule__wege { grid-template-columns: 1fr 1fr; } }
.schule__rechnung > summary { list-style: none; cursor: pointer; }
.schule__rechnung > summary::-webkit-details-marker { display: none; }
.schule__rechnung[open] > summary { display: none; }
.schule__form { display: grid; gap: 14px; margin-top: 4px; }
.schule__feld { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.schule__zeile { display: grid; gap: 14px; grid-template-columns: 110px 1fr; }
.schule__groesse { gap: 8px; }
.schule__groesse legend { padding: 0; margin-bottom: 6px; }
.schule__wahl { display: flex; align-items: center; gap: 10px; font-weight: 500; min-height: 36px; }
.schule__wahl input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.schule__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.schule__fehler {
  margin: 0;
  padding: 10px 14px;
  font-size: var(--body);
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--radius-lg);
}
.schule__fehler[hidden] { display: none; }
.kauf__vorschlag-knopf { display: inline; padding: 0; margin: 0; font: inherit; font-weight: 600; color: var(--brand-ink); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.kauf__zurueck { display: block; margin-top: 10px; }
/* Ausgeblendete Kaufknöpfe (während der Frage „Weiter zu Paddle“): .knopf setzt display, das schlägt sonst [hidden]. */
.knopf[hidden] { display: none; }
.schule__erfolg { display: grid; gap: 8px; padding: 14px 16px; background: var(--success-soft); border-radius: var(--radius-lg); }
.schule__erfolg[hidden], .schule__form[hidden] { display: none; }
.schule__erfolg h4, .schule__erfolg p { margin: 0; }
.schule__erfolg h4 { font-size: var(--title-md); }
.bestaetigung {
  display: grid;
  gap: 12px;
  justify-items: start;
  max-width: 560px;
  margin: 0 0 32px;
  padding: 20px 24px;
  background: var(--surface-raised);
  border: 2px solid var(--brand-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.bestaetigung[hidden] { display: none; }
.bestaetigung h2 { margin: 0; font-size: var(--display-md); line-height: 28px; }
.bestaetigung p { margin: 0; color: var(--ink-muted); }
.bestaetigung .knopf[hidden] { display: none; }

/* Vergleichstabelle */
.vergleich-rahmen {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 8px 20px 12px;
}
.vergleich {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--body);
}
.vergleich thead th {
  font-size: var(--label);
  line-height: 16px;
  font-weight: 600;
  color: var(--ink-muted);
  text-align: center;
  padding: 14px 4px;
  width: 108px;
  border-bottom: 1px solid var(--border-strong);
}
.vergleich thead th:first-child { text-align: left; width: auto; }
.vergleich thead th.spalte-plus { color: var(--brand-ink); }
.vergleich tbody th, .vergleich tbody td {
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.vergleich tbody tr:last-child th, .vergleich tbody tr:last-child td { border-bottom: 0; }
.vergleich tbody th { text-align: left; font-weight: 600; }
.vergleich tbody th small {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: var(--body-sm);
  line-height: 19px;
  color: var(--ink-muted);
  max-width: 52ch;
}
.vergleich td { text-align: center; }
.vergleich td svg { display: inline-block; vertical-align: -3px; }
.vergleich .ja { color: var(--success); }
.vergleich .ja--plus { color: var(--brand-ink); }
.vergleich .nein { color: var(--border-strong); }
.vergleich .gruppe th {
  padding: 28px 4px 8px;
  font-family: var(--display);
  font-size: var(--title-md);
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--border-strong);
}
.vergleich .gruppe th span {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: var(--body-sm);
  line-height: 19px;
  font-weight: 400;
  color: var(--ink-subtle);
}
.vergleich__legende {
  margin: 12px 0 0;
  font-size: var(--body-sm);
  line-height: 19px;
  color: var(--ink-subtle);
}
.nur-schmal { display: none; }
@media (max-width: 599px) {
  .vergleich-rahmen { padding: 4px 12px 8px; border-radius: var(--radius-lg); }
  .vergleich thead th { width: 46px; padding-inline: 2px; }
  .vergleich tbody th, .vergleich tbody td { padding-inline: 2px; }
  .vergleich tbody th { font-size: var(--body-sm); line-height: 19px; }
  .nur-breit {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .nur-schmal { display: inline; }
}

/* Versprechen */
.versprechen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .versprechen { grid-template-columns: 1fr 1fr; } }
.versprechen li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.versprechen svg { color: var(--brand-ink); margin-top: 1px; }
.versprechen strong { display: block; margin-bottom: 2px; }
.versprechen p { margin: 0; color: var(--ink-muted); }

.preise .faq__frage:first-of-type { border-top: 1px solid var(--border); }
.preise__faq { max-width: 72ch; }

/* ------------------------------------------------------------ Ratgeber (05.10.2026) */

/* Fließtext der Ratgeberseiten unter /ratgeber/: Zeilenlänge begrenzt, Listen
   eingerückt, Skizzen als Inline-SVG aus den Tokens (Tafel, Tisch, Platz). */
.ratgeber h2 { margin: 40px 0 8px; font-size: var(--display-md); line-height: 28px; letter-spacing: -0.01em; }
.ratgeber h3 { margin: 36px 0 10px; font-size: var(--title-md); line-height: 24px; }
.ratgeber .lead { margin-bottom: 20px; }
.ratgeber p, .ratgeber ul, .ratgeber ol { max-width: 66ch; }
.ratgeber ul, .ratgeber ol { margin: 0 0 16px; padding-left: 22px; }
.ratgeber li { margin-bottom: 8px; }
.ratgeber .zettel-hinweis {
  padding: 16px 20px; max-width: 66ch;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-xl); margin: 0 0 16px;
}
.ratgeber .zettel-hinweis p { margin: 0 0 10px; }
.ratgeber .zettel-hinweis p:last-child { margin: 0; }
.ratgeber .weiter, .ratgeber .nachbarn { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }
.ratgeber .weiter h2, .ratgeber .nachbarn h2 { margin-top: 0; }
.ratgeber .faq__bild { max-width: 100%; margin: 16px 0 20px; }
.ratgeber .faq__bild img[width="1400"] { width: 100%; max-width: 640px; }
.ratgeber .faq__bild img[width="576"] { width: 288px; }
.ratgeber .faq__bild img[width="840"] { width: 380px; }
.ratgeber .faq__bild-paar { display: flex; flex-wrap: wrap; gap: 16px; }
.ratgeber .faq__bild-paar picture { flex: 0 0 auto; }
.ratgeber .faq__bild-paar img[width="780"] { width: 260px; }
/* Steckbrief-Tabelle und Glossar der Seite „Was ist Wunschplan?“ (09.10.2026). */
.ratgeber .steckbrief { width: 100%; max-width: 66ch; margin: 0 0 16px; border-collapse: collapse; }
.ratgeber .steckbrief th, .ratgeber .steckbrief td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.ratgeber .steckbrief th { width: 30%; font-weight: 600; color: var(--ink-muted); }
.ratgeber .glossar { max-width: 66ch; margin: 0 0 16px; }
.ratgeber .glossar dt { margin: 16px 0 2px; font-weight: 600; }
.ratgeber .glossar dd { margin: 0; }
/* Vergleichstabellen der Ratgeber (09.10.2026): auf schmalen Geräten seitwärts scrollen. */
.ratgeber .stand { color: var(--ink-subtle); font-size: var(--body-sm); margin: 0 0 20px; }
.tabelle-scroll { overflow-x: auto; margin: 0 0 20px; }
.ratgeber .vergleich { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--body-sm); }
.ratgeber .vergleich th, .ratgeber .vergleich td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.ratgeber .vergleich thead th { font-size: var(--label); font-weight: 600; color: var(--ink-muted); }
.ratgeber .vergleich tbody th { font-weight: 600; }
.ratgeber .vergleich.werkzeugliste thead th:first-child { width: 22%; }
.tabelle-scroll.matrix-rahmen { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 4px 16px 8px; }
.ratgeber .vergleich.matrix { min-width: 900px; border-collapse: separate; border-spacing: 0; }
.ratgeber .vergleich.matrix th, .ratgeber .vergleich.matrix td { padding: 10px 10px; }
.ratgeber .vergleich.matrix thead th { text-align: center; white-space: normal; overflow-wrap: anywhere; line-height: 16px; padding: 16px 8px 12px; vertical-align: bottom; }
.ratgeber .vergleich.matrix thead th:first-child { text-align: left; }
.ratgeber .vergleich.matrix tbody th, .ratgeber .vergleich.matrix thead th:first-child { width: 230px; min-width: 230px; max-width: 230px; white-space: normal; overflow-wrap: break-word; font-weight: 500; color: var(--ink); line-height: 19px; }
.ratgeber .vergleich.matrix tbody th, .ratgeber .vergleich.matrix thead th:first-child { position: sticky; left: 0; background: var(--surface-raised); z-index: 1; box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.12); }
.ratgeber .vergleich.matrix td { min-width: 112px; text-align: center; vertical-align: middle; }
.ratgeber .vergleich.matrix td svg { display: inline-block; vertical-align: -3px; }
.ratgeber .vergleich.matrix .ja { color: var(--success); }
.ratgeber .vergleich.matrix .ja--plus { color: var(--brand-ink); }
.ratgeber .vergleich.matrix .ka { color: var(--ink-subtle); }
.ratgeber .vergleich.matrix .nein { color: var(--ink-muted); }
.ratgeber .vergleich.matrix .zelle__text { display: block; font-size: var(--label); line-height: 15px; color: var(--ink-muted); margin-top: 2px; }
.ratgeber .vergleich.matrix .ja--plus .zelle__text { color: var(--brand-ink); font-weight: 600; }
.ratgeber .vergleich.matrix .spalte-wp { background: var(--brand-soft); }
.ratgeber .vergleich.matrix thead th.spalte-wp { color: var(--brand-ink); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.ratgeber .vergleich.matrix tbody tr:last-child .spalte-wp { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.ratgeber .vergleich.matrix .gruppe th { position: static; padding: 26px 10px 8px; font-family: var(--display); font-size: var(--title-md); line-height: 22px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); background: var(--surface-raised); border-bottom: 1px solid var(--border-strong); box-shadow: none; }
.ratgeber .vergleich.matrix tbody tr:last-child th, .ratgeber .vergleich.matrix tbody tr:last-child td { border-bottom: 0; }
.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; }
.ratgeber__liste { list-style: none; padding-left: 0; }
.ratgeber .ratgeber__liste li { margin: 0 0 20px; }
.ratgeber__liste a { font-weight: 600; display: block; }
.ratgeber__liste span { display: block; color: var(--ink-muted); }
.skizze { margin: 0 0 14px; max-width: 320px; }
.skizze svg { display: block; width: 100%; height: auto; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sk-tafel { fill: var(--board); }
.sk-tisch { fill: var(--surface-raised); stroke: var(--border-strong); stroke-width: 1.2; }
.sk-platz { fill: var(--brand-ink); }
.skizze--breit { max-width: 460px; }
.sk-zahl { fill: var(--on-brand); font: 700 8px var(--sans); }
.sk-label { fill: var(--ink-muted); font: 600 8px var(--sans); }
.sk-kopf { fill: var(--ink); font: 700 10px var(--sans); }
.sk-pfeil { stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }