/* ═══════════════════════════════════════════════════════════════
   wingtsun-v2 — gemeinsames Mockup-Gerüst
   Alle Seiten binden diese Datei ein. Ein Gestaltungsfehler wird hier einmal behoben,
   nicht in 26 Dateien. Tokens und Bausteine stammen aus den Mockups vom 20.08.2026
   (projects/wingtsun/mockups/kurs-crashkurs-frauen.html), Farben und Schrift von divikit.
   Bedienung und Markup-Konvention: BAUANLEITUNG.md
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg-base:          #f7f1e4;
  --bg-base-soft:     #ffffff;
  --bg-base-strong:   #f2ead5;
  --bg-emph-main:     #0f1b2e;
  --bg-emph-alt:      #1f2937;

  --text-onbase:      #0f1b2e;
  --text-onbase-mut:  #6b7280;
  --text-onemph:      #ffffff;
  --line:             #e6dbc7;
  --line-strong:      #d4cbb5;

  --yellow:           #ffc107;
  --yellow-600:       #e5ac00;
  --teal:             #0aa7a7;
  --gold:             #c9a24c;

  --font-body:    'Manrope', system-ui, sans-serif;
  --font-head:    'Manrope', system-ui, sans-serif;
  --font-display: 'Manrope', system-ui, sans-serif;  /* nur Manrope — Aboreto war Template-Default */

  --h1:  clamp(1.85rem, 1.3rem + 2.2vw, 3.4rem);
  --h2:  clamp(1.5rem, 1.15rem + 1.45vw, 2.375rem);
  --h3:  clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --h4:  clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --h6:  clamp(0.75rem, 0.51vw + 0.648rem, 1.125rem);
  --body:   clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --body-s: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --body-l: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);

  --h1-ls: -0.035em; --h1-lh: 1.08em;
  --h2-ls: -0.028em; --h2-lh: 1.15em;
  --h3-ls: -0.02em;  --h3-lh: 1.25em;
  --h6-ls:  0.05em;  --h6-lh: 1.1em;
  --body-lh: 1.625em;

  --sp-xxs: clamp(0.25rem, 0.20vw + 0.20rem, 0.50rem);
  --sp-xs:  clamp(0.50rem, 0.40vw + 0.30rem, 1.00rem);
  --sp-s:   clamp(1.00rem, 0.80vw + 0.60rem, 1.50rem);
  --sp-m:   clamp(1.50rem, 1.20vw + 1.00rem, 2.00rem);
  --sp-l:   clamp(2.00rem, 1.60vw + 1.30rem, 3.00rem);
  --sp-xl:  clamp(3.00rem, 2.50vw + 2.00rem, 4.00rem);
  --sp-2xl: clamp(4.00rem, 3.50vw + 2.50rem, 6.00rem);
  --pad-lr: clamp(0.9375rem, 0.64vw + 0.811rem, 1.406rem);

  --r-s: 10px;  --r-m: 16px;  --r-l: 24px;  --r-xl: 32px;  --r-pill: 999px;

  --w-standard: 1350px;
  --w-single:   1000px;
  --measure:    62ch;   /* Lesebreite INNERHALB einer Karte */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-body); font-size: var(--body);
  line-height: var(--body-lh); color: var(--text-onbase);
  background: var(--bg-base); -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-head); margin: 0; font-weight: 700; }
h1 { font-size: var(--h1); letter-spacing: var(--h1-ls); line-height: var(--h1-lh); }
h2 { font-size: var(--h2); letter-spacing: var(--h2-ls); line-height: var(--h2-lh); }
h3 { font-size: var(--h3); letter-spacing: var(--h3-ls); line-height: var(--h3-lh); }
h4 { font-size: var(--h4); line-height: 1.3; }
p  { margin: 0 0 var(--sp-s); }
p:last-child { margin-bottom: 0; }
a  { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* ═══════════════════════════════════════════════════════════════
   DIE DREI FLÄCHEN
   Grund  = creme oder navy · Karte = immer weiß · Band = navy/gelb
   Regel: Der Grund ist NIE weiß. Dann ist eine weiße Karte immer sichtbar.
   ═══════════════════════════════════════════════════════════════ */
.kapitel { padding: var(--sp-2xl) var(--pad-lr); background: var(--bg-base); }
.kapitel--navy { background: var(--bg-emph-main); color: var(--text-onemph); }
.kapitel--navy h1, .kapitel--navy h2, .kapitel--navy h3, .kapitel--navy h4 { color: #fff; }
.bahn { max-width: var(--w-standard); margin-inline: auto; }
.bahn > * + * { margin-top: var(--sp-m); }
.bahn--eng { max-width: var(--w-single); }

/* ── BAND — Kapitelauftakt. Keine Karte, volle Breite, dunkel. ── */
.band {
  background: var(--bg-emph-main); color: var(--text-onemph);
  border-radius: var(--r-xl); padding: var(--sp-l) var(--sp-m);
  text-align: center;
}
.band h1, .band h2 { color: #fff; max-width: 26ch; margin-inline: auto; }
.band p  { color: rgba(255,255,255,.82); max-width: 60ch; margin-inline: auto; margin-top: var(--sp-s); }

/* ── ZAHLENBAND — die Zäsur mit Belegen ── */
.zahlenband {
  background: var(--bg-emph-alt); color: #fff;
  border-radius: var(--r-xl); padding: var(--sp-l) var(--sp-m);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-m);
}
.zahlenband--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .zahlenband, .zahlenband--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .zahlenband, .zahlenband--3 { grid-template-columns: 1fr; } }
.zahl { text-align: center; }
.zahl__n {
  display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05; color: var(--yellow);
}
.zahl__t { display: block; margin-top: var(--sp-xs); font-size: var(--body-s); color: rgba(255,255,255,.78); line-height: 1.45; }

/* ── HANDLUNGSBAND — das CTA-Trio, an festen Positionen ── */
.handlungsband {
  background: var(--yellow); color: var(--bg-emph-main);
  padding: var(--sp-m) var(--pad-lr);
}
.handlungsband__inner {
  max-width: var(--w-standard); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-s) var(--sp-m);
}
.handlungsband strong { font-size: var(--h4); }

/* ── KARTE — immer weiß, drei Breiten ── */
.karte {
  background: var(--bg-base-soft); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: var(--sp-l) var(--sp-m);
}
.kapitel--navy .karte {
  background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.15); color: #fff;
}
.kapitel--navy .karte p { color: rgba(255,255,255,.84); }

.reihe { display: grid; gap: var(--sp-m); }
.reihe--2 { grid-template-columns: repeat(2, 1fr); }
.reihe--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .reihe--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .reihe--2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .reihe--3 { grid-template-columns: 1fr; } }

/* Fließtext in einer breiten Karte: zweispaltig, damit die Zeile lesbar bleibt */
.fliess { columns: 2; column-gap: var(--sp-xl); }
.fliess p { break-inside: avoid; margin-bottom: var(--sp-s); }
@media (max-width: 860px) { .fliess { columns: 1; } }

.schmal { max-width: var(--measure); margin-inline: auto; }
.karte__kopf { margin-bottom: var(--sp-s); }
.karte h3 + p, .karte h4 + p { margin-top: var(--sp-xs); }

/* ── Kleinteile ── */
.eyebrow {
  font-size: var(--h6); letter-spacing: var(--h6-ls); line-height: var(--h6-lh);
  text-transform: uppercase; font-weight: 700; color: var(--teal);
  margin-bottom: var(--sp-xs);
}
.kapitel:not(.kapitel--navy) .eyebrow { color: var(--text-onbase); opacity: .55; }
/* Muss .kapitel:not(.kapitel--navy) .eyebrow schlagen (0,3,0) — sonst steht der
   Eyebrow navy auf navy und ist unsichtbar. Befund 20.08.2026. */
.kapitel .band .eyebrow, .band .eyebrow { color: var(--yellow); opacity: 1; }
.lead { font-size: var(--body-l); line-height: 1.5; }
.muted { color: var(--text-onbase-mut); font-size: var(--body-s); }
.kapitel--navy .muted { color: rgba(255,255,255,.6); }

.btn {
  display: inline-block; padding: .8em 1.6em; border-radius: var(--r-pill);
  font-weight: 700; text-decoration: none; font-size: var(--body-s);
  letter-spacing: .01em; border: 2px solid transparent; transition: .15s;
}
.btn--main    { background: var(--yellow); color: var(--bg-emph-main); }
.btn--main:hover { background: var(--yellow-600); }
.btn--dark    { background: var(--bg-emph-main); color: #fff; }
.btn--outline { border-color: currentColor; }
.kapitel--navy .btn--outline { color: #fff; }
.btn-reihe { display: flex; flex-wrap: wrap; gap: var(--sp-s); }

.nummer {
  display: inline-grid; place-items: center; width: 2.4em; height: 2.4em;
  border-radius: var(--r-pill); background: var(--yellow); color: var(--bg-emph-main);
  font-family: var(--font-display); font-weight: 800; font-size: var(--body-l); line-height: 1;
  margin-bottom: var(--sp-s);
}
.pillen { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.pillen li {
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: .45em 1.1em; font-size: var(--body-s); font-weight: 600;
  background: var(--bg-base-soft);
}
.haken { display: grid; gap: var(--sp-s); }
.haken li { padding-left: 1.7em; position: relative; }
.haken li::before {
  content: "→"; position: absolute; left: 0; top: 0; color: var(--teal); font-weight: 700;
}
.kapitel--navy .haken li::before { color: var(--yellow); }

.bild-ph {
  aspect-ratio: 4/3; border-radius: var(--r-m); background: var(--bg-base-strong);
  display: grid; place-items: center; color: var(--text-onbase-mut);
  font-family: monospace; font-size: var(--body-s); margin-bottom: var(--sp-s);
  border: 1px dashed var(--line-strong);
}
.video-ph {
  aspect-ratio: 16/9; border-radius: var(--r-m); background: var(--bg-base-strong);
  display: grid; place-items: center; color: var(--text-onbase-mut);
  font-family: monospace; font-size: var(--body-s); text-align: center; padding: var(--sp-m);
  border: 1px dashed var(--line-strong);
}

/* ── HERO ── */
.hero { background: var(--bg-emph-main); color: #fff; padding: var(--sp-2xl) var(--pad-lr); }
.hero__inner { max-width: var(--w-standard); margin-inline: auto; text-align: center; }
.hero__display {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem);
  line-height: 1.15; letter-spacing: -0.01em; margin: var(--sp-xs) 0 var(--sp-s);
}
.hero p { color: rgba(255,255,255,.85); max-width: 62ch; margin-inline: auto; }
.hero .btn-reihe { justify-content: center; margin-top: var(--sp-m); }

/* ── FAQ ── */
.faq { display: grid; gap: var(--sp-xs); }
.faq details {
  background: var(--bg-base-soft); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: var(--sp-s) var(--sp-m);
}
.faq summary { font-weight: 700; cursor: pointer; font-size: var(--h4); }
.faq details[open] summary { margin-bottom: var(--sp-xs); }

/* ═══════════════════════════════════════════════════════════════
   STRUKTUR-ANZEIGE — Umschalter unten rechts
   ═══════════════════════════════════════════════════════════════ */
[data-typ] { position: relative; }
body.struktur [data-typ]::before {
  content: attr(data-typ);
  position: absolute; top: 0; left: 0; transform: translateY(-100%);
  background: #7c3aed; color: #fff; font-family: monospace; font-size: 11px;
  line-height: 1; padding: 4px 8px; border-radius: 6px 6px 0 0;
  letter-spacing: .04em; z-index: 5; white-space: nowrap;
}
body.struktur [data-typ] { outline: 2px dashed rgba(124,58,237,.55); outline-offset: 3px; }
body.struktur .kapitel { padding-top: calc(var(--sp-2xl) + 14px); }
body.struktur [data-neu]::after {
  content: attr(data-neu);
  position: absolute; top: 0; right: 0; transform: translateY(-100%);
  background: #ea580c; color: #fff; font-family: monospace; font-size: 11px;
  line-height: 1; padding: 4px 8px; border-radius: 6px 6px 0 0; z-index: 5; white-space: nowrap;
}
body.struktur [data-neu] { outline-color: rgba(234,88,12,.6); }
.struktur-btn {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  background: #7c3aed; color: #fff; border: 0; border-radius: var(--r-pill);
  padding: .8em 1.4em; font-family: var(--font-body); font-weight: 700;
  font-size: 13px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.28);
}

/* ── ECKDATEN-KARTE — die Entscheidungsdaten, direkt unter dem Hero ── */
.eckdaten {
  background: var(--bg-base-soft); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: var(--sp-m);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-m);
  margin-top: calc(var(--sp-l) * -1 - var(--sp-s)); position: relative; z-index: 2;
  box-shadow: 0 10px 34px rgba(15,27,46,.14);
}
@media (max-width: 820px) { .eckdaten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .eckdaten { grid-template-columns: 1fr; } }
.eckdat { text-align: center; }
.eckdat__n { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 1.8vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.eckdat__t { display: block; margin-top: var(--sp-xxs); font-size: var(--body-s); color: var(--text-onbase-mut); line-height: 1.4; }

/* ── DATENKARTE — Tabelle, nie Spaltensatz ── */
.tab-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.termine { width: 100%; border-collapse: collapse; font-size: var(--body-s); min-width: 620px; }
table.termine th {
  text-align: left; padding: var(--sp-xs) var(--sp-s); border-bottom: 2px solid var(--line-strong);
  font-weight: 700; white-space: nowrap;
}
table.termine td { padding: var(--sp-xs) var(--sp-s); border-bottom: 1px solid var(--line); }
table.termine tr.jahr td {
  font-weight: 800; font-family: var(--font-display);
  font-size: var(--body); letter-spacing: .04em;
}
.frei, .voll {
  display: inline-block; border-radius: var(--r-pill); padding: .25em .9em;
  font-size: var(--body-s); font-weight: 700; white-space: nowrap;
}
.frei { background: rgba(10,167,167,.14); color: #066f6f; }
.voll { background: var(--bg-base-strong); color: var(--text-onbase-mut); }

/* ── UNTERBLOCK — die dritte Ebene innerhalb einer Karte ── */
.unter + .unter { margin-top: var(--sp-m); padding-top: var(--sp-m); border-top: 1px solid var(--line); }
.kapitel--navy .unter + .unter { border-top-color: rgba(255,255,255,.14); }
.unter h4 { color: var(--teal); margin-bottom: var(--sp-xs); }
.kapitel--navy .unter h4 { color: var(--yellow); }

/* ── HINWEIS — hervorgehobener Nachsatz ── */
.hinweis {
  border-left: 4px solid var(--yellow); padding: var(--sp-s) var(--sp-m);
  background: var(--bg-base-strong); border-radius: 0 var(--r-m) var(--r-m) 0;
}
/* display MUSS grid bleiben: in einem Flex-Container wirkt place-items nur senkrecht,
   justify-items ignoriert Flexbox — die Ziffer sitzt dann am linken Kreisrand.
   grid ist Block-Level, deshalb zentriert margin-inline:auto den Kreis selbst. */
.band .nummer { margin: 0 auto var(--sp-s); display: grid; place-items: center; }

/* ═══════════════════════════════════════════════════════════════
   ERGÄNZUNGEN wingtsun-v2
   ═══════════════════════════════════════════════════════════════ */

/* ── KOPF — Layout von divikit (Stand 17.09.2026), per mockup.js eingesetzt ──
   Infoleiste navy · Kopf creme mit Logo, Menü, Probetraining-Button · Brotkrumen */
.site-info { background: var(--bg-emph-main); color: rgba(255,255,255,.85); font-size: 12px; padding: .45rem var(--pad-lr); }
.site-info__inner { max-width: var(--w-standard); margin-inline: auto; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; align-items: center; }
.site-info__inner span:before { content: "●"; color: var(--yellow); font-size: 8px; margin-right: .5em; vertical-align: middle; }
.site-info__inner .rechts { margin-left: auto; }
.site-kopf { position: sticky; top: 0; z-index: 40; background: var(--bg-base); border-bottom: 1px solid var(--line); padding: .55rem var(--pad-lr); }
.site-kopf__inner { max-width: var(--w-standard); margin-inline: auto; display: flex; align-items: center; gap: var(--sp-s) var(--sp-m); flex-wrap: wrap; }
.site-kopf__logo img { height: 52px; width: auto; display: block; }
.site-nav { display: flex; flex-wrap: wrap; gap: .1rem .2rem; margin: 0 0 0 auto; list-style: none; padding: 0; }
.site-nav > li { position: relative; }
.site-nav > li > span {
  display: block; padding: .6em .7em; font-size: 14px; font-weight: 600; color: var(--text-onbase); cursor: default; border-radius: var(--r-s);
}
.site-nav > li > span::after { content: "⌄"; margin-left: .35em; font-size: .85em; position: relative; top: -.15em; }
.site-nav > li:hover > span, .site-nav > li:focus-within > span { color: #b58300; }
.site-nav ul {
  display: none; position: absolute; top: 100%; left: 0; min-width: 17rem; list-style: none; margin: 0;
  padding: .5rem; background: #fff; border-radius: var(--r-m); box-shadow: 0 12px 34px rgba(15,27,46,.22); border-top: 3px solid var(--yellow);
}
.site-nav li:hover > ul, .site-nav li:focus-within > ul { display: block; }
.site-nav ul a { display: block; padding: .5em .75em; color: var(--text-onbase); text-decoration: none; font-size: 14px; font-weight: 600; border-radius: var(--r-s); }
.site-nav ul a:hover, .site-nav ul a[aria-current] { background: var(--bg-base); }
.site-nav ul a[aria-current] { box-shadow: inset 3px 0 0 var(--yellow); }
.site-kopf__cta { background: var(--yellow); color: var(--bg-emph-main); text-decoration: none; font-weight: 700; font-size: 14px; text-transform: uppercase; padding: .85em 1.6em; border-radius: var(--r-s); }
.site-kopf__cta:hover { background: var(--yellow-600); }
@media (max-width: 1100px) { .site-nav { order: 3; width: 100%; margin-left: 0; } .site-kopf__cta { margin-left: auto; } .site-kopf { position: static; } }
.site-krumen { background: var(--bg-base-strong); font-size: 12px; padding: .5rem var(--pad-lr); color: var(--text-onbase-mut); }
.site-krumen__inner { max-width: var(--w-standard); margin-inline: auto; }
.site-krumen a { color: #066f6f; text-decoration: none; }
.site-schnell { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 30; display: grid; gap: 10px; }
.site-schnell span { width: 42px; height: 42px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.site-schnell svg { width: 18px; height: 18px; stroke: var(--bg-emph-main); fill: none; stroke-width: 2; }
@media (max-width: 700px) { .site-schnell { display: none; } }

/* ── HERO mit Bild — wie divikit: Foto unter navy-Verlauf, Text links ── */
.hero--bild {
  background: linear-gradient(90deg, rgba(15,27,46,.96) 0%, rgba(15,27,46,.88) 50%, rgba(15,27,46,.62) 100%), var(--hero-bild, none) center/cover no-repeat, var(--bg-emph-main);
  padding-block: clamp(4rem, 3rem + 5vw, 8rem);
}
.hero--bild .hero__inner { text-align: left; }
.hero--bild .hero__display, .hero--bild p { max-width: 38ch; margin-left: 0; }
.hero--bild p { max-width: 62ch; }
.hero--bild .btn-reihe { justify-content: flex-start; }

.site-fuss { background: var(--bg-emph-main); color: rgba(255,255,255,.8); padding: var(--sp-xl) var(--pad-lr) var(--sp-m); font-size: var(--body-s); }
.site-fuss__inner { max-width: var(--w-standard); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: var(--sp-m); }
@media (max-width: 900px) { .site-fuss__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-fuss__inner { grid-template-columns: 1fr; } }
.site-fuss h4 { color: #fff; font-size: var(--body); margin-bottom: var(--sp-xs); }
.site-fuss ul { display: grid; gap: .35em; }
.site-fuss a { color: rgba(255,255,255,.8); text-decoration: none; }
.site-fuss a:hover { color: var(--yellow); }
.site-fuss__unten { max-width: var(--w-standard); margin: var(--sp-l) auto 0; padding-top: var(--sp-s); border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-s); }

/* ── Links im Fließtext ── */
.karte a:not(.btn), .hinweis a:not(.btn), .faq a:not(.btn) { color: #066f6f; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.karte a:not(.btn):hover { color: var(--text-onbase); }
.kapitel--navy .karte a:not(.btn) { color: var(--yellow); }
.btn--outline:hover { background: rgba(15,27,46,.06); }
.kapitel--navy .btn--outline:hover, .hero .btn--outline:hover { background: rgba(255,255,255,.1); }
.btn--dark:hover { background: #1c2d47; }
.hero .btn--outline { color: #fff; }

/* ── Pillen als Listenelemente ── */
.pille { list-style: none; }

/* ── Fotos (Live-Bilder, verlinkt) ── */
.foto { display: block; width: 100%; height: auto; border-radius: var(--r-m); }
.foto--cover { aspect-ratio: 4/3; object-fit: cover; }
.bildreihe { display: grid; gap: var(--sp-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.bild-voll { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--r-m); box-shadow: 0 8px 30px rgba(15,27,46,.12); }

/* ── Video-Karte: Vorschaubild + Link, keine eingebettete Wiedergabe ── */
.video { position: relative; display: block; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 16/9; background: var(--bg-emph-main); }
.video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.video::after {
  content: "▶"; position: absolute; inset: 0; margin: auto; width: 3.6rem; height: 3.6rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--yellow); color: var(--bg-emph-main); font-size: 1.4rem;
}
.video:hover img { opacity: 1; }

/* ── Datenkarte allgemein ── */
table.daten { width: 100%; border-collapse: collapse; font-size: var(--body-s); }
table.daten th { text-align: left; padding: var(--sp-xs) var(--sp-s); border-bottom: 2px solid var(--line-strong); font-weight: 700; }
table.daten td { padding: var(--sp-xs) var(--sp-s); border-bottom: 1px solid var(--line); vertical-align: top; }
table.daten td.betrag, table.daten th.betrag { text-align: right; white-space: nowrap; font-weight: 700; }
table.daten tr.gruppe td { background: var(--bg-base-strong); font-weight: 800; }

/* ── FAQ-Gruppen ── */
.faq-gruppe + .faq-gruppe { margin-top: var(--sp-l); }
.faq-gruppe > h3 { margin-bottom: var(--sp-s); }
.faq details p, .faq details ul { margin-top: var(--sp-xs); }
.faq summary:hover { color: #066f6f; }

/* ── Formular-Platzhalter (Kontakt) ── */
.form-ph { display: grid; gap: var(--sp-xs); }
.form-ph span { display: block; border: 1px solid var(--line-strong); border-radius: var(--r-s); padding: .7em .9em; color: var(--text-onbase-mut); font-size: var(--body-s); background: var(--bg-base-soft); }
.form-ph span.gross { min-height: 7rem; }

.liste-punkte { display: grid; gap: var(--sp-xs); padding-left: 1.2em; list-style: disc; }
.liste-nummern { display: grid; gap: var(--sp-xs); padding-left: 1.4em; list-style: decimal; }

/* ═══════════════════════════════════════════════════════════════
   TEXTÄNDERUNGEN — im Normalzustand unsichtbar
   Schalter „Textänderungen" setzt body.ebene-aenderungen
   ═══════════════════════════════════════════════════════════════ */
[data-change="entfernt"] { display: none !important; }
body.ebene-aenderungen [data-change="entfernt"] {
  display: block !important; text-decoration: line-through; opacity: .75;
  background: repeating-linear-gradient(135deg, #fde2e2 0 8px, #fbd1d1 8px 16px); color: #7f1d1d;
  border-radius: 6px; padding: .3em .6em; margin: .4em 0;
}
body.ebene-aenderungen [data-change] { scroll-margin-top: 110px; }
body.ebene-aenderungen [data-change="neu"] { background: #ffedd5; box-shadow: 0 0 0 3px #fb923c; border-radius: 4px; color: #7c2d12; }
body.ebene-aenderungen .kapitel--navy [data-change="neu"], body.ebene-aenderungen .band [data-change="neu"], body.ebene-aenderungen .hero [data-change="neu"] { color: #7c2d12; }
body.ebene-aenderungen [data-change="umgestellt"] { text-decoration: underline wavy #ea580c 2px; text-underline-offset: 4px; box-shadow: 0 0 0 2px rgba(234,88,12,.45); border-radius: 4px; }
body.ebene-aenderungen [data-change="quelle"] { background: #dbeafe; box-shadow: 0 0 0 3px #3b82f6; border-radius: 4px; color: #1e3a8a; }
body.ebene-aenderungen [data-change="quelle"] * { color: #1e3a8a; }
body.ebene-aenderungen [data-change="hinweis"] { background: #fef9c3; box-shadow: 0 0 0 2px #ca8a04; border-radius: 3px; color: #713f12; }
body.ebene-aenderungen [data-nr-aenderungen] { position: relative; }
body.ebene-aenderungen [data-nr-aenderungen]::before {
  content: attr(data-nr-aenderungen); position: absolute; top: -.85em; left: -.85em; z-index: 6;
  min-width: 1.7em; height: 1.7em; padding: 0 .35em; display: grid; place-items: center;
  border-radius: 999px; background: #c2410c; color: #fff; font: 700 11px/1 monospace; text-decoration: none;
}
body.ebene-aenderungen [data-change="quelle"][data-nr-aenderungen]::before { background: #1d4ed8; }
body.ebene-aenderungen [data-change="hinweis"][data-nr-aenderungen]::before { background: #a16207; }
body.ebene-aenderungen [data-change="entfernt"][data-nr-aenderungen]::before { background: #b91c1c; }
.aenderung-blitz { animation: blitz 1.4s ease-out; }
@keyframes blitz { 0%,40% { outline: 4px solid #fb923c; outline-offset: 6px; } 100% { outline: 4px solid transparent; outline-offset: 6px; } }

/* ── Werkzeugleiste unten rechts ── */
.werkzeug { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.werkzeug button {
  border: 0; border-radius: 999px; padding: .75em 1.2em; font: 700 13px/1 var(--font-body); cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.28); color: #fff;
}
.werkzeug .w-struktur { background: #7c3aed; }
.werkzeug .w-aenderungen { background: #c2410c; }
.werkzeug button[aria-pressed="true"] { outline: 3px solid #fff; outline-offset: -6px; }

/* ── Änderungsliste mit Sprungmarken ── */
.ebenenliste {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 55; width: min(420px, 92vw);
  background: #fff; color: #1f2937; box-shadow: -10px 0 40px rgba(0,0,0,.25);
  display: none; flex-direction: column; font-family: var(--font-body); font-size: 14px; line-height: 1.45;
}
body.ebene-aenderungen .ebenenliste--aenderungen, body.ebene-quelle .ebenenliste--quelle, body.ebene-nicht .ebenenliste--nicht { display: flex; }
body.ebene-offen { padding-right: min(420px, 92vw); }
@media (max-width: 900px) { body.ebene-offen { padding-right: 0; } .ebenenliste { top: auto; height: 55vh; width: 100vw; } }
.ebenenliste__kopf { padding: 14px 16px; border-bottom: 1px solid #e5e7eb; background: #fff7ed; }
.ebenenliste__kopf strong { font-size: 15px; display: block; }
.ebenenliste__legende { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12px; }
.ebenenliste__legende span { padding: 2px 8px; border-radius: 999px; }
.ebenenliste__nav { display: flex; gap: 6px; margin-top: 10px; }
.ebenenliste__nav button { flex: 1; border: 1px solid #fdba74; background: #fff; border-radius: 8px; padding: 6px; font: 700 13px var(--font-body); cursor: pointer; }
.ebenenliste__nav button:hover { background: #ffedd5; }
.ebenenliste ol { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; }
.ebenenliste li a { display: block; padding: 10px; border-radius: 10px; text-decoration: none; color: inherit; border: 1px solid transparent; }
.ebenenliste li a:hover, .ebenenliste li a.aktiv { background: #fff7ed; border-color: #fdba74; }
.ebenenliste .al-art { font: 700 11px monospace; text-transform: uppercase; letter-spacing: .05em; }
.ebenenliste .al-text { margin-top: 3px; }
.ebenenliste .al-orig { margin-top: 6px; padding: 6px 8px; background: #f3f4f6; border-radius: 6px; font-size: 13px; color: #4b5563; }
.ebenenliste .al-orig b { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ebenenliste .al-note { margin-top: 4px; font-size: 12.5px; color: #6b7280; font-style: italic; }
.ebenenliste__leer { padding: 16px; color: #6b7280; }
.art-neu { background: #ffedd5; color: #9a3412; }
.art-umgestellt { background: #ffedd5; color: #9a3412; text-decoration: underline wavy #ea580c; }
.art-entfernt { background: #fee2e2; color: #991b1b; }
.art-quelle { background: #dbeafe; color: #1e3a8a; }
.art-hinweis { background: #fef9c3; color: #713f12; }

/* Strukturanzeige: Werkzeugleiste und Liste nicht beschriften */
body.struktur .kapitel { padding-top: calc(var(--sp-2xl) + 14px); }

/* ── Reihen auf dem Handy immer einspaltig ──
   Auch wenn eine Seite per style= ein Verhältnis setzt (z. B. 3fr 2fr) — sonst wird ein Video
   neben einer Karte zum Streifen. !important ist hier Absicht: es muss den style= schlagen. */
@media (max-width: 700px) { .reihe { grid-template-columns: 1fr !important; } }
.reihe--3-2 { grid-template-columns: 3fr 2fr; align-items: start; }
.reihe--2-3 { grid-template-columns: 2fr 3fr; align-items: start; }

/* ── Zitat im Band ── */
.band blockquote, .zitat { margin: 0 auto; max-width: 62ch; font-size: var(--body-l); line-height: 1.55; }
.band blockquote strong { color: #fff; }

/* ── Hinweis auf dunklem Grund (sonst hell auf hell, gemeldet bei 14-schulen) ── */
.kapitel--navy .hinweis, .band .hinweis { background: rgba(255,255,255,.08); color: #fff; }
.kapitel--navy .karte .hinweis { background: var(--bg-base-strong); color: var(--text-onbase); }

/* ── Werkzeugleiste auf dem Handy kleiner ── */
@media (max-width: 700px) { .werkzeug { right: 8px; bottom: 8px; gap: 6px; } .werkzeug button { padding: .6em .9em; font-size: 12px; } }

/* ── Pillen auf dunklem Grund lesbar (sonst weiß auf weiß, gemeldet bei 19-ausbildungen) ── */
.kapitel--navy .pillen li, .band .pillen li { color: var(--text-onbase); }
.kapitel--navy .karte .pillen li { background: var(--bg-base-soft); }


/* ═══════════════════════════════════════════════════════════════
   STAND 17.09.2026 NACHMITTAG — nach Abgleich und Gesprächsprotokoll
   ═══════════════════════════════════════════════════════════════ */

/* ── Karten auf navy: dunkel mit fast weißer Schrift (Entscheidung Nutzerin 17.09.2026 abends, nach Vergleich
   weiß / dunkel / gemischt). Kontrast kommt über die Schrift (94 % weiß) und einen deutlichen Rand — im ersten
   Mockup war beides zu schwach (84 % Schrift, Rand 15 %), daher die Rückmeldung „Kontrast zu gering".
   Weiße Karten auf navy wurden verworfen: Das dunkle Kapitel wird dann fast weiß und liefert keinen Hell-Dunkel-Wechsel. ── */
.kapitel--navy .karte { background: #1c2b42; border: 1px solid rgba(255,255,255,.24); color: #fff; }
.kapitel--navy .karte h1, .kapitel--navy .karte h2, .kapitel--navy .karte h3, .kapitel--navy .karte h4 { color: #fff; }
.kapitel--navy .karte p, .kapitel--navy .karte li { color: rgba(255,255,255,.94); }
.kapitel--navy .karte a:not(.btn) { color: var(--yellow); }
.kapitel--navy .karte .unter h4 { color: var(--yellow); }
.kapitel--navy .karte .haken li::before { color: var(--yellow); }
.kapitel--navy .karte .muted { color: rgba(255,255,255,.72); }

/* ── Karte mit randlosem Bild oben (Rückmeldung Startseite) ── */
.karte--bild { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.karte--bild > img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.karte--bild > .karte__text { padding: var(--sp-s) var(--sp-m) var(--sp-m); display: flex; flex-direction: column; gap: var(--sp-xs); flex: 1; }
.karte--bild > .karte__text .btn { align-self: flex-start; margin-top: auto; }

/* ── Kartenreihe 2×3 ── */
.reihe--3x2 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .reihe--3x2 { grid-template-columns: repeat(2, 1fr); } }

/* ── Großes Video ── */
.video--gross { max-width: 960px; margin-inline: auto; width: 100%; }
.video--gross::after { width: 5rem; height: 5rem; font-size: 2rem; }

/* ── Drei Buttons unter dem Hero (Protokoll 10.2) ── */
.cta-leiste { background: var(--bg-base-strong); padding: var(--sp-s) var(--pad-lr); border-bottom: 1px solid var(--line); }
.cta-leiste__inner { max-width: var(--w-standard); margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-s); justify-content: center; }

/* ── Infoleiste nach Protokoll: Telefon, Buttons Online-Buchung und Gutscheine ── */
.site-info__inner span::before { content: none; }
.site-info svg { width: 13px; height: 13px; stroke: var(--yellow); fill: none; stroke-width: 2; vertical-align: -2px; margin-right: .35em; }
.site-info__btn { background: var(--yellow); color: var(--bg-emph-main); font-weight: 700; text-decoration: none; padding: .25em .9em; border-radius: var(--r-s); }
.site-info__btn:hover { background: var(--yellow-600); }
.site-schnell a { width: 42px; height: 42px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.site-nav > li.aktiv > span { color: #b58300; }

/* ── Band über einem Kapitel mit Unterzeile (Seitentitel-Unterzeile, R4) ── */
.hero__unterzeile { font-size: var(--body-l); color: rgba(255,255,255,.85); margin-top: var(--sp-s); max-width: 60ch; }

/* ── Logo unter „Wir freuen uns auf Sie!" ── */
.abschluss-logo { display: block; max-width: 340px; width: 70%; height: auto; margin: var(--sp-s) auto 0; }

/* ── Bewertungen (Plugin-Platzhalter) ── */
.plugin-ph { border: 2px dashed var(--line-strong); border-radius: var(--r-l); padding: var(--sp-l) var(--sp-m); text-align: center; color: var(--text-onbase-mut); background: var(--bg-base-soft); font-family: monospace; font-size: var(--body-s); }
.plugin-ph__sterne { color: var(--yellow); font-size: 1.6rem; letter-spacing: .15em; display: block; margin-bottom: var(--sp-xs); }

/* ═══ Ebene TEXTQUELLE ═══ */
body.ebene-quelle main :is(h1,h2,h3,h4,p,li,summary,td,th,.eckdat__n,.eckdat__t,.zahl__n,.zahl__t,.btn) { background-color: rgba(34,197,94,.14); box-shadow: 0 0 0 2px rgba(34,197,94,.35); border-radius: 3px; }
body.ebene-quelle main [data-quelle="divikit"], body.ebene-quelle main [data-quelle="divikit"] :is(h1,h2,h3,h4,p,li,summary,td,th,.btn) { background-color: #dbeafe !important; box-shadow: 0 0 0 2px #3b82f6 !important; color: #1e3a8a !important; }
body.ebene-quelle main [data-quelle="bild"], body.ebene-quelle main [data-quelle="bild"] * { background-color: #ede9fe !important; box-shadow: none; color: #4c1d95 !important; }
body.ebene-quelle main [data-change="neu"] { background-color: #ffedd5 !important; box-shadow: 0 0 0 3px #fb923c !important; color: #7c2d12 !important; }
body.ebene-quelle main [data-divikit-anders] { outline: 3px dashed #1d4ed8; outline-offset: 3px; }
body.ebene-quelle main [data-divikit-anders]::after { content: "divikit anders"; display: inline-block; margin-left: .5em; font: 700 11px/1.4 monospace; background: #1d4ed8; color: #fff; padding: 1px 6px; border-radius: 999px; vertical-align: middle; }
body.ebene-quelle .cta-leiste .btn, body.ebene-quelle .site-kopf *, body.ebene-quelle .site-fuss * { box-shadow: none; }

/* ═══ Ebene NICHT ÜBERNOMMEN ═══ */
.nicht-uebernommen { display: none !important; }
/* Nur Quelltext zeigen, der im Entwurf fehlt — divikit-Streichungen bleiben unsichtbar (Regel 18.09.2026) */
body.ebene-nicht .nicht-uebernommen:not([data-quelle="divikit"]) {
  display: block !important; margin: var(--sp-xs) 0; padding: .6em .9em; border-radius: 8px; font-size: var(--body-s);
  background: repeating-linear-gradient(135deg, #f1f5f9 0 10px, #e2e8f0 10px 20px); color: #334155; border: 1px dashed #64748b;
}
body.ebene-nicht .nicht-uebernommen:not([data-quelle="divikit"])::before { content: "weggelassen · " attr(data-grund); display: block; font: 700 11px/1.4 monospace; color: #475569; margin-bottom: .3em; }
body.ebene-nicht .kapitel--navy > .bahn > .nicht-uebernommen:not([data-quelle="divikit"]), body.ebene-nicht .band .nicht-uebernommen:not([data-quelle="divikit"]) { color: #334155; }

/* Listen-Kennfarben */
.al-art { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 700 11px monospace; text-transform: uppercase; letter-spacing: .04em; }
.al-aenderungen-neu, .al-aenderungen-umgestellt { background: #ffedd5; color: #9a3412; }
.al-aenderungen-entfernt { background: #fee2e2; color: #991b1b; }
.al-aenderungen-hinweis { background: #fef9c3; color: #713f12; }
.al-quelle-divikit, .al-quelle-anders { background: #dbeafe; color: #1e3a8a; }
.al-quelle-bild { background: #ede9fe; color: #4c1d95; }
.al-quelle-neu { background: #ffedd5; color: #9a3412; }
.al-nicht-live, .al-nicht-divikit { background: #e2e8f0; color: #334155; }
.werkzeug .w-ebene { color: #fff; }
.ebenenliste__kopf { background: #fff; }

/* ── Hero-Slider wie divikit: Text links, Bild rechts, Pfeile und Punkte ── */
.hero-slider { background: var(--bg-emph-main); color: #fff; padding: var(--sp-xl) var(--pad-lr); position: relative; }
.hero-slider__bahn { max-width: var(--w-standard); margin-inline: auto; position: relative; }
.slide { display: none; grid-template-columns: 1fr 1fr; gap: var(--sp-l); align-items: center; }
.slide.aktiv { display: grid; }
body.ebene-quelle .slide, body.ebene-aenderungen .slide, body.ebene-nicht .slide, body.struktur .slide { display: grid; margin-bottom: var(--sp-l); }
@media (max-width: 800px) { .slide { grid-template-columns: 1fr; } }
.slide .eyebrow { color: var(--yellow); opacity: 1; }
.slide h1, .slide h2 { color: #fff; font-size: var(--h1); letter-spacing: var(--h1-ls); line-height: var(--h1-lh); }
.slide p { color: rgba(255,255,255,.88); font-size: var(--body-l); line-height: 1.5; margin: var(--sp-s) 0 var(--sp-m); max-width: 46ch; }
.slide img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-m); box-shadow: 0 0 0 3px var(--yellow); }
.slider-nav { display: flex; justify-content: center; align-items: center; gap: var(--sp-s); margin-top: var(--sp-m); }
.slider-nav button { background: transparent; border: 0; color: #fff; font-size: 1.6rem; cursor: pointer; padding: 0 .4em; }
.slider-nav .punkt { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); padding: 0; font-size: 0; }
.slider-nav .punkt.aktiv { background: var(--yellow); }

/* ── Häkchenliste dreispaltig, Quadrat-Liste (divikit „Über das …") ── */
.haekchen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xs) var(--sp-m); margin: var(--sp-s) 0; }
@media (max-width: 700px) { .haekchen { grid-template-columns: 1fr 1fr; } }
.haekchen li { padding-left: 1.6em; position: relative; font-weight: 700; }
.haekchen li::before { content: "✓"; position: absolute; left: 0; top: .05em; width: 1.15em; height: 1.15em; border: 1.5px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: .8em; }
.quadrate { display: grid; gap: var(--sp-xs); margin: var(--sp-s) 0; }
.quadrate li { padding-left: 1.6em; position: relative; }
.quadrate li::before { content: ""; position: absolute; left: 0; top: .45em; width: .75em; height: .75em; background: var(--yellow); border-radius: 2px; }

/* ── Abschlusskarten (divikit: drei Karten mit Button) ── */
.abschluss-karte { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-s); }
.abschluss-karte .btn { margin-top: auto; text-transform: uppercase; }

/* ── Gleich breite Karten in jeder Reihe ──
   Ein Grid-Spaltenanteil „1fr" heißt minmax(auto, 1fr): Die Spalte wird nie schmaler als ihr längstes
   Wort. „Entscheidungsfähigkeit" machte eine Spalte bei 600 px 100 px breiter als ihre Nachbarn
   (gemessen 17.09.2026). minmax(0, 1fr) gibt feste Anteile, lange Wörter werden getrennt. */
.reihe--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reihe--3, .reihe--3x2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reihe--3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.reihe--2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media (max-width: 900px) { .reihe--3, .reihe--3x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .reihe { grid-template-columns: minmax(0, 1fr) !important; } }
.karte :is(h3, h4) { hyphens: auto; overflow-wrap: break-word; }
.karte h2, .band :is(h1, h2), .slide :is(h1, h2), .auftakt h2 { text-wrap: balance; hyphens: manual; }
.eckdaten, .zahlenband { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .zahlenband { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .eckdaten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .zahlenband, .eckdaten { grid-template-columns: minmax(0, 1fr); } }

/* ── Kästen in einer Karte: Aufzählbares, das im Satzfluss steht („Denn auch: … sind Teile …") ── */
.kaesten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-s); margin: var(--sp-s) 0; }
@media (max-width: 760px) { .kaesten { grid-template-columns: minmax(0, 1fr); } }
.kaesten li { background: var(--bg-base); border-left: 4px solid var(--yellow); border-radius: var(--r-s); padding: var(--sp-s); font-weight: 600; hyphens: auto; }

/* ═══ Formregeln Startseite (Formplan 17.09.2026) ═══
   Block mittig, Text linksbündig. Zentriert nur kurze Überschriften, Zahlen, Buttonreihen. */
/* Bänder wie im ersten Mockup: eine Mittelachse, Überschrift ausgewogen umbrochen, nie getrennt.
   Linksbündig nur zum Vergleich (Umschalter). Der linksbündige Versuch vom 17.09.2026 ließ die rechte
   Bandhälfte leer — dasselbe „linkslastig", das der Kunde am 21.08.2026 kritisiert hatte. */
.band { text-align: center; padding: var(--sp-l) var(--sp-m); }
.band h1, .band h2 { max-width: 26ch; margin-inline: auto; text-wrap: balance; hyphens: manual; }
.band p { max-width: 60ch; margin-inline: auto; }
.band--auftakt h2 { font-size: var(--h1); letter-spacing: var(--h1-ls); line-height: var(--h1-lh); max-width: 34ch; }
body.baender-links .band { text-align: left; }
body.baender-links .band h1, body.baender-links .band h2, body.baender-links .band p { margin-inline: 0; }
/* Innere Lesespalte in einer vollbreiten Karte */
.karte .schmal { max-width: 62ch; margin-inline: auto; }
.karte .pillen--mitte { justify-content: center; margin-block: var(--sp-m); }
.werkzeug .w-baender { background: #0f766e; color: #fff; }

/* Karte mit Lesebreite, mittig — für einspaltigen Text */
.karte--mittig { max-width: calc(72ch + 2 * var(--sp-m)); margin-inline: auto; width: 100%; }
/* Kernaussage */
.kernaussage { font-size: var(--h4); line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }
.kernaussage + p, p + .kernaussage { margin-top: var(--sp-s); }
/* Kartenkopf klein */
.karte h4 + p { margin-top: var(--sp-xs); }
/* Auftakt auf navy: Überschrift zentriert, Text linksbündig im mittigen Block */
.auftakt { max-width: 72ch; margin-inline: auto; }
.auftakt h2 { text-align: center; }
.auftakt .lead { text-align: center; }
.auftakt p:not(.lead) { text-align: center; }   /* eine Achse je Block: Kopf mittig → kurzer Auftakttext auch mittig */
.abschluss-karte { text-align: left; align-items: flex-start; }
.abschluss-karte .btn { align-self: flex-start; }
.reihe--3 > .karte h4, .reihe--3 > .karte h3 { hyphens: auto; }
.zahl__vor { display: block; font-size: var(--body-s); color: rgba(255,255,255,.75); text-transform: lowercase; letter-spacing: .02em; }
.zahlenband .zahl__n { white-space: nowrap; }

/* Startseite nach erstem Mockup: Kopf in der Einleitungskarte, Kicker im Auftakt auf navy */
.karte__kopf--klein { font-size: var(--h3); letter-spacing: var(--h3-ls); line-height: var(--h3-lh); }
.auftakt .eyebrow { text-align: center; }
.band .eyebrow + h2, .band .eyebrow + h1 { margin-top: 0; }

/* Varianten: light ist Standard; „mehr“ nur über den Schalter */
body:not(.variante-mehr) [data-variante="mehr"], body.variante-mehr [data-variante="light"] { display: none !important; }
.werkzeug .w-variante { background: #be185d; color: #fff; }
body.ebene-aenderungen [data-change="umformuliert"] { box-shadow: 0 0 0 2px rgba(190,24,93,.55); background: rgba(252,231,243,.6); border-radius: 4px; }
body.ebene-varianten [data-variante] { outline: 3px dashed #be185d; outline-offset: 6px; }
.al-aenderungen-umformuliert, .al-varianten-mehr { background: #fce7f3; color: #9d174d; }

/* Stichwort-Raster statt Pillen: gleich breite Felder, in vollen Reihen (8 = 4+4, 7 = 4+3 mittig) */
.stichworte { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-xs); margin: var(--sp-m) auto; max-width: 900px; padding: 0; list-style: none; }
.stichworte li { flex: 0 0 calc((100% - 3 * var(--sp-xs)) / 4); display: grid; place-items: center; text-align: center;
  min-height: 3.2em; padding: .5em .8em; border-radius: var(--r-m); background: var(--bg-base); border: 1px solid var(--line);
  font-weight: 700; font-size: var(--body-s); line-height: 1.3; hyphens: auto; }
@media (max-width: 700px) { .stichworte li { flex-basis: calc((100% - var(--sp-xs)) / 2); } }

/* Liste im Fließtext (Variante mehr) */
.karte .haken { margin: var(--sp-s) 0; }
.band--video { padding: var(--sp-m); }
.band--video .video--gross { margin: 0 auto; }

/* Kurze Aussage in breiter Karte: breitere Spalte, damit sie nicht in viele kurze Zeilen zerfällt */
.karte .schmal--breit { max-width: 80ch; }
/* Lange Linktexte als Textlink mit Pfeil statt Button */
.textlink-pfeil { font-weight: 700; color: var(--text-onbase); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.textlink-pfeil::after { content: "→"; display: inline-block; margin-left: .45em; text-decoration: none; transition: transform .15s; }
.textlink-pfeil:hover::after { transform: translateX(4px); }

/* Variante „mehr" sichtbar kennzeichnen, sobald sie eingeschaltet ist */
body.variante-mehr [data-variante="mehr"] { position: relative; outline: 2px dashed #be185d; outline-offset: 10px; border-radius: 4px; margin-block: 2.2em 1.6em; }
body.variante-mehr [data-variante="mehr"]::before {
  content: "Variante „mehr“ · Wortlaut angepasst"; position: absolute; top: -2.3em; left: -10px;
  background: #be185d; color: #fff; font: 700 11px/1 monospace; letter-spacing: .03em; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
body.variante-mehr .umformuliert-wort { background: #fce7f3; color: #9d174d; box-shadow: 0 0 0 2px #fce7f3; border-radius: 3px; font-weight: 700; }

/* Absatz vor einem Text, der direkt auf einen Variantenblock folgt (z. B. Bewertungslink) */
[data-variante] + p { margin-top: var(--sp-s); }

/* Liste zweispaltig in einer Karte (kurze Punkte, z. B. „Sie lernen …") */
.haken--2spaltig { display: block; columns: 2; column-gap: var(--sp-l); }
.haken--2spaltig li { break-inside: avoid; margin-bottom: var(--sp-xs); }
@media (max-width: 700px) { .haken--2spaltig { columns: 1; } }
/* Stichworte in einer schmalen Textspalte: untereinander */
.stichworte--eng { margin: var(--sp-s) 0; }
.stichworte--eng li { flex-basis: 100%; }
.fliess [data-variante] { break-inside: avoid; }

/* Ergänzungen aus dem Seitendurchgang 17.09.2026 abends (Wünsche der Bau-Agenten) */
.hero .eyebrow { color: var(--yellow); }
:is(.band, .kapitel--navy) .textlink-pfeil { color: #fff; }
.kapitel--navy .stichworte li { background: #1c2b42; border-color: rgba(255,255,255,.24); color: #fff; }
.stichworte--3 li { flex-basis: calc((100% - 2 * var(--sp-xs)) / 3); }
@media (max-width: 700px) { .stichworte--3 li { flex-basis: calc((100% - var(--sp-xs)) / 2); } }
.video--datei::after { content: none; }
.band h2.lang { font-size: var(--h3); max-width: 40ch; }
/* Termintabelle in einer dunklen Karte: Linien mitziehen (Kursseiten, 17.09.2026).
   Jahreszeile ohne Hintergrund — der Farbblock war zu auffällig (Rückmeldung Nutzerin). */
.kapitel--navy .karte table.termine :is(td, th) { border-color: rgba(255,255,255,.18); }
/* Platz-Pillen in dunklen Karten (Termintabellen der Kursseiten) */
.kapitel--navy .karte .frei { background: rgba(10,167,167,.22); color: #7fe3e3; }
.kapitel--navy .karte .voll { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }

/* ── Kopf kompakt (Stand 17.09.2026 abends): Titel einmal, Bild von divikit, Live-Grafik darunter ── */
.hero--klein { padding-block: var(--sp-l); }
.hero--klein .hero__display { font-size: var(--h2); letter-spacing: var(--h2-ls); line-height: var(--h2-lh); max-width: 26ch; margin-inline: auto; }
.hero--klein .lead { font-size: var(--body); }
.hero--klein.hero--bild { padding-block: var(--sp-xl); }
.hero--klein.hero--bild .hero__display { margin-left: 0; max-width: 34ch; }
/* Textspalte im Kopf breiter, sonst wird der Block hoch (Rückmeldung 17.09.2026) */
.hero--klein.hero--bild :is(p, .lead) { max-width: 88ch; }
.hero--klein.hero--bild .muted { max-width: 88ch; }
/* Live-Grafik direkt unter dem Kopf (Plakate, Flyer — nie als Hintergrund, der Text ist eingebrannt) */
.kopfgrafik { display: block; width: 100%; max-width: 900px; margin: 0 auto; border-radius: var(--r-m); }

/* ── STUNDENPLAN — Tabelle statt Bild; schmal bricht sie nach Tagen um (Seitenliste 23) ── */
table.plan { width: 100%; border-collapse: collapse; font-size: var(--body-s); min-width: 860px; }
table.plan th { background: var(--yellow); color: var(--bg-emph-main); font-weight: 800; text-align: center; padding: var(--sp-xs) var(--sp-s); }
table.plan th[scope="row"] { background: var(--bg-base-strong); text-align: left; font-size: var(--body); min-width: 9rem; }
table.plan td { border: 1px solid var(--line); padding: var(--sp-xs); vertical-align: top; text-align: center; }
table.plan tbody tr + tr th[scope="row"] { border-top: 2px solid var(--line-strong); }
.plan__eintrag + .plan__eintrag { margin-top: var(--sp-s); }
.plan__zeit { display: block; }
.plan__was { display: block; font-weight: 700; }
.plan__zusatz { display: block; color: var(--text-onbase-mut); }
@media (max-width: 900px) {
  table.plan { min-width: 0; }
  table.plan, table.plan tbody, table.plan tr, table.plan td, table.plan th { display: block; width: auto; }
  table.plan thead { display: none; }
  table.plan tr { margin-bottom: var(--sp-m); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
  table.plan th[scope="row"] { min-width: 0; }
  table.plan td { border: 0; border-top: 1px solid var(--line); text-align: left; padding: var(--sp-s); }
  table.plan td:empty { display: none; }
  table.plan td::before { content: attr(data-tag); display: block; font-weight: 800; color: var(--text-onbase-mut); margin-bottom: var(--sp-xxs); }
  .plan__eintrag { display: flex; flex-wrap: wrap; gap: .2em .6em; }
  .plan__zeit, .plan__was, .plan__zusatz { display: inline; }
}

/* Ergänzungen aus dem Bau von 20/25/26 (17.09.2026) */
.fliess .unter { break-inside: avoid; }
.kapitel--navy .faq details { background: #1c2b42; border-color: rgba(255,255,255,.24); color: #fff; }
.kapitel--navy .faq summary { color: #fff; }
.karte blockquote.zitat { border-left: 4px solid var(--yellow); padding-left: var(--sp-m); }
.karte blockquote.zitat p + p { margin-top: var(--sp-s); }
/* Eckdaten mit Wörtern statt kurzer Zahlen (z. B. „max. zwölf Kinder") — kleinere Stufe, Umbruch erlaubt */
.zahlenband--3 .zahl__n { font-size: var(--h3); white-space: normal; }