/* ==========================================================================
   testCrafter — Landing Page
   Statisch, ohne Build-Schritt, ohne JavaScript, ohne externe Requests.
   Schriften liegen lokal unter fonts/ (DSGVO: keine Google-Fonts/CDN).
   ========================================================================== */

/* ---- Schriften (lokal, self-hosted) ------------------------------------- */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/sora-latin-wght-normal.woff2') format('woff2');
}

/* Ziffern-Override wie in der App: Atkinsons Null ist durchgestrichen (a11y-Glyph, hier
   unerwünscht und per font-feature nicht abschaltbar). Darum kommen U+0030–0039 aus
   Bricolage; alle anderen Zeichen bleiben Atkinson. Gewichts-variabel → die Ziffer erbt
   das Umgebungsgewicht. */
@font-face {
  font-family: 'Bricolage Digits';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0030-0039;
}

/* ---- Token --------------------------------------------------------------
   Werte kopiert aus apps/client/src/styles.css — bewusste Duplikation,
   Landing hängt nicht am App-Build.
   ------------------------------------------------------------------------- */

:root {
  /* Papier & Tinte */
  --paper: #F7F5F1;
  --card: #FFFFFF;
  --ink: #23262E;
  --muted: #5A6170;
  --line: #E6E3DC;

  /* Marke: Königsblau (Füllertinte) */
  --brand: #2F4BD0;
  --brand-d: #243CA8;
  --brand-tint: #E9EDFB;
  --on-brand: #FFFFFF;

  /* Status „richtig" aus der App — nur in den Vignetten.
     --ok trägt Flächen/Icons (Grafik, Schwelle 3:1), --ok-d den Text:
     #2E7D32 auf #E3F2E5 sind nur 4.42:1, die dunklere Stufe kommt auf 6.78:1. */
  --ok: #2E7D32;
  --ok-d: #1B5E20;
  --ok-tint: #E3F2E5;

  /* Radius & Elevation */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-full: 999px;
  --shadow-raise: 0 1px 2px rgba(30, 28, 20, .05), 0 6px 20px rgba(30, 28, 20, .09);

  /* Spacing-Skala (4px-Basis) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Typo */
  --font-body: 'Bricolage Digits', 'Atkinson Hyperlegible', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Bricolage Grotesque', var(--font-body);
  --font-logo: 'Sora', var(--font-display); /* NUR die Logo-Wortmarke „testCrafter" */
}

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

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  /* Sticky Footer: auf kurzen Seiten (danke/fehler) schob der Inhalt den Footer sonst nicht bis
     ans Fensterende — main füllt die Resthöhe, der Footer sitzt unten. Auf den langen Seiten
     (Start/Recht) wächst main ohnehin über den Viewport, also keine Änderung dort. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
h1 { font-size: clamp(32px, 6vw, 48px); font-weight: 800; }
h2 { font-size: clamp(24px, 4vw, 32px); font-weight: 800; margin-bottom: var(--s5); }
h3 { font-size: 19px; font-weight: 700; }

p { margin: 0 0 var(--s3); max-width: 72ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-d); }
a:hover { color: var(--brand); }

:focus-visible {
  outline: 3px solid var(--brand); /* Stärke wie in der App */
  outline-offset: 2px;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

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

.section { padding: var(--s8) 0; }

/* ---- Marginalie (Füllertinte) --------------------------------------------
   Eine handgezogene Anmerkung auf der Seite: der Pfeil auf die Notenskala.
   Kurvensprache und Strichstärke wie .ink-sig; dekorativ und aria-hidden.
   ------------------------------------------------------------------------- */

.ink-arrow {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}
.ink-arrow path {
  stroke: var(--brand);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ---- Wortmarke ----------------------------------------------------------- */

.wordmark {
  margin: 0;
  font-family: var(--font-logo);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}
.wm-test { color: var(--ink); }
.wm-crafter { color: var(--brand); display: inline-block; position: relative; }

/* Tinten-Signatur: sitzt als Unterstrich exakt unter „Crafter". Statisch, keine Animation. */
.ink-sig {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: auto;
  margin-top: -0.06em;
  overflow: visible;
}
.ink-sig path {
  stroke: var(--brand);
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke; /* Strichstärke bleibt bei jeder Skalierung 3px */
}

/* ---- Header (nur Rechtsseiten) --------------------------------------------
   Die Startseite hat keinen Header mehr — ihr Logo ist die Hero-Wortmarke.
   Impressum/Datenschutz behalten ihn als Weg zurück zur Startseite. */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.header-inner { padding: var(--s4) 0; }
.header-inner .wordmark { font-size: 20px; }

/* ---- Hero ---------------------------------------------------------------- */

.hero { padding: var(--s8) 0; }

.hero-grid {
  display: grid;
  gap: var(--s7);
  /* min(…, 100%): der minmax-Boden darf nie breiter sein als der Container,
     sonst reißt die Spur bei schmalen Viewports/400 % Zoom horizontales Scrollen auf (WCAG 1.4.10) */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: center;
}
/* Ab hier trägt der Screenshot die Seite — er bekommt die breitere Spur. */
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 1fr 1.1fr; }
}

.wordmark-hero {
  font-size: clamp(30px, 6vw, 44px);
  padding-bottom: 0.34em; /* Platz für die Signatur (absolut positioniert) */
  margin-bottom: var(--s4);
}

.badge {
  display: inline-block;
  margin: 0 0 var(--s4);
  padding: var(--s1) var(--s3);
  border-radius: var(--radius-full);
  background: var(--brand-tint);
  color: var(--brand-d);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.lead {
  font-size: 19px;
  color: var(--muted);
  margin-bottom: var(--s5);
}

.cta-row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.btn {
  display: inline-block;
  padding: var(--s3) var(--s5);
  border-radius: var(--radius-m);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  box-shadow: var(--shadow-raise);
  transition: background-color .15s ease;
}
.btn:hover { background: var(--brand-d); color: var(--on-brand); }
/* Ring in Buttonfarbe wäre unsichtbar (1:1) — Doppelring hebt den Fokus vom Vollton ab.
   Outline bleibt transparent stehen: forced-colors zeichnet sie, box-shadow fiele dort weg. */
.btn:focus-visible {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px var(--brand);
}
/* Zweit-Aktion neben dem CTA — gleiche Form, umrandet statt gefüllt. */
.btn-ghost {
  background: var(--card);
  color: var(--brand-d);
  border: 2px solid var(--brand);
  padding: calc(var(--s3) - 2px) calc(var(--s5) - 2px); /* Rand kompensiert → gleiche Höhe wie .btn */
}
.btn-ghost:hover { background: var(--brand-tint); color: var(--brand-d); }

/* Beta-Anfrage-Formular im Hero: E-Mail-Feld + Absenden nebeneinander, umbrechend auf Schmal.
   align-items:center hält Feld und Buttons auf einer Grundlinie, wenn sie in einer Reihe stehen. */
.cta-form { align-items: center; }
.cta-input {
  flex: 1 1 220px;
  min-width: 0; /* sonst sprengt ein langer Platzhalter die Flexzeile über 320px hinaus */
  padding: calc(var(--s3) - 1px) var(--s4);
  border: 2px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--card);
  color: var(--ink);
  font-size: 18px;
}
.cta-input::placeholder { color: var(--muted); }
.cta-input:focus-visible {
  outline: 3px solid transparent; /* forced-colors zeichnet sie; box-shadow fiele dort weg */
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.cta-hint { font-size: 15px; color: var(--muted); margin: var(--s3) 0 0; }
/* Honeypot: im DOM + absendbar, aber unsichtbar und aus der Tab-Reihenfolge. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Nur für Screenreader — sichtbares Pendant zu aria-label, wo ein Label im Layout stört. */
.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;
}

/* Screenshot des Live-Dashboards im Browser-Rahmen, leicht aus der Achse gedreht
   („aufs Papier gelegt"). Der Rahmen croppt auf den Board-Ausschnitt: das
   Vollbild ist bei Hero-Breite zu kleinteilig, um es lesen zu können. */
.shot { margin: 0; }

.browser {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-raise), 0 18px 40px rgba(30, 28, 20, .07);
  overflow: hidden;
  transform: rotate(-1deg);
}
.browser-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px var(--s3);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.browser-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #CFCBC2; /* 1.7:1 zum Papier — reine Dekoration, trägt keine Info */
}
/* Fenster auf den Board-Ausschnitt. Quelle 1440×900, gezeigt wird x 212–826,
   y 145–580 (Titel, Statuszeile, vier Zeilen bis zur Trennlinie) → Zoom
   234.5 %, Versatz −34.53 % der Breite bzw. −33.3 % der Höhe. Die
   Prozentwerte hängen am Fensterverhältnis 1.41 — nicht ohne Neurechnen ändern. */
.browser-view {
  position: relative;
  aspect-ratio: 1.41;
  overflow: hidden;
  background: var(--paper);
}
.browser-view img {
  position: absolute;
  display: block;
  width: 234.5%;
  height: auto;
  left: -34.53%;
  top: -33.3%;
}
/* Auf dem Handy ist der Rahmen nur noch ~270–340 px breit — mit dem Desktop-Crop
   wäre die Tabelle Grafik statt Inhalt. Darum enger: x 212–665, y 148–510
   (Titel, Statuszeile, Tabellenkopf, die ersten Zeilen) im 5:4-Fenster. */
@media (max-width: 640px) {
  .browser-view { aspect-ratio: 5 / 4; }
  .browser-view img { width: 317.9%; left: -46.8%; top: -40.85%; }
}

/* ---- So funktioniert's ---------------------------------------------------
   Keine Karten mehr: drei Spalten unter einer Haarlinie, die Ziffer trägt. */

.steps {
  display: grid;
  gap: var(--s5) var(--s6);
  /* min(…, 100%): der minmax-Boden darf nie breiter sein als der Container,
     sonst reißt die Spur bei schmalen Viewports/400 % Zoom horizontales Scrollen auf (WCAG 1.4.10) */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.step { border-top: 2px solid var(--line); padding-top: var(--s4); }

/* .step .step-num, nicht .step-num — sonst gewinnt das gleich spezifische `.step p` darunter */
.step .step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  color: var(--brand);
  margin: 0 0 var(--s2);
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: var(--s2); }
.step p { color: var(--muted); }

/* ---- Features: Zeig-Reihen ------------------------------------------------
   Je Reihe links/rechts abwechselnd eine gebaute Mini-UI der App.
   ------------------------------------------------------------------------- */

/* Collegeblock: Linien + Randlinie, sehr niedriger Kontrast, nur Textur.
   Die Randlinie sitzt 24 px links der Wrap-Kante (Wrap = max. 1120 px, also
   50 % − 560 px − 24 px) und wandert bei schmalen Viewports von selbst aus
   dem Bild — auf dem Handy liefe sie sonst durch den Text. */
.section-ruled { position: relative; overflow: hidden; }
.section-ruled::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(47, 75, 208, .16), rgba(47, 75, 208, .16)) calc(50% - 584px) 0 / 2px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(35, 38, 46, .06) 31px 32px);
  /* oben/unten ausblenden, damit die Textur nicht an den Sektionskanten abreißt */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 90px, #000 calc(100% - 90px), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}
.section-ruled > .wrap { position: relative; }

.rows { display: grid; gap: var(--s7); }

.row {
  display: grid;
  gap: var(--s5);
  align-items: center;
}
.row-text { position: relative; }
.row-text h3 {
  font-size: clamp(20px, 2.6vw, 26px);
  margin-bottom: var(--s2);
}
.row-text p:not(.eyebrow) { color: var(--muted); max-width: 42ch; }

.eyebrow {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand-d);
}

/* Vignetten-Grundkarte — Radius und Elevation wie in der App. */
.vig {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-raise);
  padding: var(--s4);
}
.vig p { max-width: none; }

.vig-label {
  margin: 0 0 var(--s2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.vig-q {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
}
.vig-rule { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }
.vig-meta { margin: var(--s3) 0 0; font-size: 14px; color: var(--muted); }

/* Fragetypen: Switch-Pills */
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 7px var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 700;
}
.pill .knob {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #A9A69D; /* 2.6:1 auf Weiß — nur Beiwerk neben dem Pill-Rand */
}
.pill-on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.pill-on .knob { border-color: var(--on-brand); background: var(--on-brand); }

/* Freitext + Toleranz */
.vig-input {
  margin: 0 0 var(--s3);
  padding: 9px var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper);
  font-size: 16px;
}
.vig-ok {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-s);
  background: var(--ok-tint);
  color: var(--ok-d);
  font-size: 15px;
  font-weight: 700;
}
/* Haken aus zwei Kanten eines gedrehten Rechtecks — Grafik, 4.4:1 auf dem Tint */
.tick {
  flex: 0 0 auto;
  width: 6px;
  height: 11px;
  margin-top: -3px;
  border: solid var(--ok);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
}

/* Übungsmodus */
.opt {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: 16px;
  font-weight: 700;
}
.opt-ok {
  background: var(--ok-tint);
  border-color: var(--ok);
  color: var(--ok-d);
}
.opt-tag {
  margin-left: auto;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Drei Designs */
.themes { display: grid; gap: var(--s3); grid-template-columns: repeat(3, 1fr); }
.theme {
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-raise);
  padding: var(--s3);
  min-height: 132px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.theme b { margin-top: auto; }
.theme-line { display: block; height: 6px; border-radius: 3px; background: currentColor; opacity: .28; }
.theme-line.short { width: 60%; }
/* zwei angedeutete Antwortfelder — erst damit liest sich die Kachel als Frage */
.theme-opt {
  display: block;
  height: 14px;
  border-radius: 4px;
  border: 1px solid currentColor;
  opacity: .34;
}
.theme-paper { background: var(--paper); color: var(--ink); }
.theme-forge { background: var(--line); color: var(--ink); }
.theme-term  { background: var(--ink); color: #FFFFFF; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Beamer-Modus — hell/Papier wie in der App: Code links, Beitritts-QR rechts. */
.vig-beamer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5);
}
.beamer-code { min-width: 0; }
.joincode {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 6vw, 48px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Echter QR (kodiert testcrafter.de). Das Modul-Raster ist randlos, die
   Quiet Zone kommt als weißes Padding dazu — sonst wirkt er nicht scanbar. */
.qr {
  flex: 0 0 auto;
  padding: 10px;
  border-radius: var(--radius-s);
  background: #FFFFFF;
  border: 1px solid var(--line);
}
.qr img {
  display: block;
  width: 100px;
  height: 100px;
}

/* Noten */
.vig-score {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.notes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.note {
  min-width: 32px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.note-on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
/* Die Skala läuft bis 6 weiter — die Auslassung sagt das, ohne 15 Pillen zu zeigen. */
.note-more { color: var(--muted); font-weight: 700; letter-spacing: 0.06em; }

/* Pfeil-Marginalie: zeigt aus dem Text auf die hervorgehobene Note.
   Nur im zweispaltigen Layout — gestapelt zeigt sie ins Leere. */
.ink-arrow { display: none; }

/* Druckbögen: das Blatt sitzt mittig in seiner Vignettenfläche, sonst klebt
   es links und rechts daneben steht tote Fläche. */
.sheets { width: 180px; margin-inline: auto; }
.sheet {
  aspect-ratio: 1 / 1.414;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-raise);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.sheet-head { display: block; height: 10px; width: 62%; border-radius: 3px; background: var(--ink); }
.sheet-sub  { display: block; height: 6px; width: 38%; border-radius: 3px; background: var(--brand); }
.sheet-lines {
  display: block;
  flex: 1 1 auto;
  margin-top: var(--s2);
  background: repeating-linear-gradient(to bottom, var(--line) 0 2px, transparent 2px 14px);
}
.sheet-box { display: block; height: 34px; border: 2px solid var(--line); border-radius: 4px; }

/* PDF als KI-Quelle */
.file {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper);
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.file-ico {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--brand-d);
  color: var(--on-brand);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.flow {
  margin: var(--s2) 0;
  text-align: center;
  color: var(--brand);
  font-size: 22px;
  line-height: 1;
}
.stub {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: var(--s3);
}
.stub .vig-label { margin-bottom: var(--s2); }
.stub-line { display: block; height: 8px; border-radius: 4px; background: var(--line); margin-bottom: 6px; }
.stub-line.short { width: 55%; margin-bottom: 0; }

@media (min-width: 860px) {
  .row { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  /* Vignetten hängen an der AUSSEN-Kante des Satzspiegels — so bleibt die
     linke wie die rechte Achse der Seite über alle Reihen hinweg gerade. */
  .row-media { justify-self: end; width: min(400px, 100%); }
  /* Reihenfolge im Quelltext bleibt Text → Bild; nur optisch gespiegelt. */
  .row-flip .row-media { order: -1; justify-self: start; }
}

/* Die Marginalie erst zeigen, wenn zwischen Text und Vignette wirklich Rand ist
   (ab 1200 px sind das ≥ 190 px) — sonst zeigt der Pfeil in die Karte hinein.
   Anker ist .row-media, also die Vignette selbst: `right: 100%` setzt den Pfeil
   an deren linke Kante, `margin-right` ist der Abstand der Spitze zur Karte.
   Damit sitzt er bei 1200, 1440 und 1680 identisch (die .wrap ist gedeckelt). */
@media (min-width: 1200px) {
  .row-mark .row-media { position: relative; }
  .row-mark .ink-arrow {
    display: block;
    width: 168px;
    height: 92px;
    right: 100%;
    margin-right: 16px;
    bottom: 26px;
  }
}

/* ---- Datenschutz & Schule ------------------------------------------------ */

.privacy {
  background: var(--brand-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--s7) var(--s6);
}
.privacy h2 { margin-bottom: var(--s5); }

.check-list { display: grid; gap: var(--s3); max-width: 72ch; }
.check-list li {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}
.check-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--brand);
  transform: translateY(-1px);
}
/* Forced Colors zwingt background auf Canvas — ohne Systemfarbe verschwände der
   Marker, und list-style:none lässt keinen Ersatz übrig. */
@media (forced-colors: active) {
  .check-list li::before { background: CanvasText; }
}

/* ---- FAQ ----------------------------------------------------------------- */

.faq { display: grid; gap: var(--s3); max-width: 72ch; }

.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--s4) var(--s5);
}
.faq summary {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  list-style: none; /* der Standard-Dreieck-Marker weicht dem eigenen Zeichen */
}
.faq summary::-webkit-details-marker { display: none; }
/* Eigener Marker: „+" wird im offenen Zustand zu „–". Reiner Zeichenwechsel,
   keine Animation — deshalb auch bei prefers-reduced-motion unauffällig. */
.faq summary::after {
  content: "+";
  margin-left: auto;
  color: var(--brand);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { margin-bottom: var(--s3); }
.faq details p { color: var(--muted); }

/* ---- Footer -------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--card);
  padding: var(--s7) 0;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s6);
}
.wordmark-sm {
  font-size: 18px;
  /* kein padding-bottom: in der zentrierten Flex-Zeile würde es den Text aus der Mitte
     schieben; die Signatur ragt 6px in das Footer-Padding — kollisionsfrei gemessen */
}
/* Bei 18px wirkt der non-scaling 3px-Strich zu fett — hier eine Spur dünner. */
.wordmark-sm .ink-sig path { stroke-width: 2; }

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
}
.footer-nav a { color: var(--brand-d); }

.copy {
  margin: 0;
  margin-left: auto;
  color: var(--muted);
  font-size: 15px;
}

/* ---- Rechtsseiten -------------------------------------------------------- */

/* Impressum + Datenschutzerklärung: reine Prosa in der .wrap. Die Maßhaltigkeit
   liegt auf den Kindern, nicht auf .legal selbst — ein `max-width` am Container
   würde ihn in der .wrap zentrieren und die linke Achse von Header und Footer
   brechen. So behält der Container die volle Wrap-Breite, der Text beginnt an
   der linken Wrap-Kante, und auch Überschriften und Listen halten die
   Zeilenlänge (das globale `p { max-width: 72ch }` greift nur an Absätzen). */
.legal > * { max-width: 72ch; }
/* „Datenschutzerklärung" ist länger als 320 px und riss sonst horizontales
   Scrollen auf (WCAG 1.4.10 Reflow). */
.legal h1 { font-size: clamp(28px, 5vw, 40px); overflow-wrap: break-word; hyphens: auto; }
.legal h2 { margin-top: var(--s6); margin-bottom: var(--s3); font-size: 22px; overflow-wrap: break-word; hyphens: auto; /* wie h1: „Entscheidungsfindung" reißt sonst bei 320px + WCAG-1.4.12-Text-Spacing */ }

/* Wortmarke im Header verlinkt hier auf die Startseite — Farben kommen von den
   Spans, der Fokusring vom globalen :focus-visible. Auf den Unterseiten ist der
   Link der einzige Weg zurück, darum eine sichtbare Hover-Rückmeldung: die Marke
   dunkelt ab (kein Browser-Unterstrich — der biss sich mit der Tinten-Signatur). */
.wordmark a { text-decoration: none; }
.wordmark a:hover .wm-crafter { color: var(--brand-d); }
.wordmark a:hover .ink-sig path { stroke: var(--brand-d); }
/* Header-Wortmarke (20px): der non-scaling 3px-Strich wirkt zu fett — wie im Footer dünner. */
.header-inner .ink-sig path { stroke-width: 2; }

/* <mark> markiert die Platzhalter, die vor dem Deploy durch echte Angaben zu
   ersetzen sind (Name, Anschrift). Gelb kommt vom Browser. */
.legal mark { padding: 0 var(--s1); border-radius: 4px; }

/* ---- Bewegungsreduktion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; } /* die einzige Transition der Seite — kein globaler Hammer nötig */
}