/* ============================================================
   AUFWIND — seitenspezifisches Layout des Grav-Themes.

   Farben, Schriften, Radien, Buttons, Karten, Badges, Leiste, Ring
   und der Reveal-Takt kommen aus css/tokens.css (Kopie von
   design/tokens.css). HIER STEHT KEIN EINZIGER HEXWERT — jede Farbe
   ist eine var(). Ein neuer Hexwert wäre ein Review-Blocker
   (design-system.md §13.2), eine box-shadow ein doppelter.

   Aufbau nach der Referenzseite design/prototypes/marketing.html:
     1 Navbar & mobiles Menü      7 Sky-Band
     2 Hero & Szene               8 FAQ
     3 Schein-Leiste              9 Final-CTA & Fehlerseite
     4 Sektionsköpfe             10 Seitenkopf & Fließtext
     5 Karten (Trio/Schein/Artikel) 11 Footer
     6 Readiness                 12 Scroll-Choreografie
   ============================================================ */

/* ---------- 1 · Navbar & mobiles Menü ---------- */
.brand{white-space:nowrap}
.brand .brand-mark{height:38px;width:auto;display:block;flex:none}
.navbar .bar{gap:16px}
.navbar nav.nav-desktop{display:flex;gap:24px;margin-left:auto}
.navbar .nav-cta{flex:none}

/* Das mobile Menü ist ein <details>: es klappt ohne JavaScript auf, ist
   mit der Tastatur bedienbar und braucht kein aria-expanded von Hand.
   Navigation darf nicht davon abhängen, dass ein Skript lädt. */
.mnav{display:none;position:relative;flex:none}
.mnav>summary{
  list-style:none;cursor:pointer;display:grid;place-items:center;
  width:44px;height:44px;border:2px solid var(--border);border-radius:var(--r);
  background:var(--white);
}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary::marker{content:''}
.mnav-icon{display:grid;gap:4px;width:20px}
.mnav-icon i{display:block;height:2.5px;border-radius:var(--r-pill);background:var(--text)}
.navbar nav.mnav-panel{
  position:absolute;right:0;top:calc(100% + 12px);z-index:60;
  display:none;flex-direction:column;gap:2px;min-width:min(74vw,260px);
  background:var(--white);border:2px solid var(--border);border-radius:var(--r-lg);padding:10px;
}
/* Muss die tokens.css-Regel `.navbar nav{display:none}` (≤700 px) schlagen,
   sonst bliebe das geöffnete Menü genau dort unsichtbar, wo es gebraucht wird. */
.navbar .mnav[open] nav.mnav-panel{display:flex}
.navbar .mnav-panel a{
  color:var(--muted);padding:11px 14px;border-radius:var(--r);
  font-weight:800;font-size:15.5px;white-space:normal;
}
.navbar .mnav-panel a:hover{background:var(--cloud);color:var(--text);text-decoration:none}
.navbar .mnav-panel a[aria-current]{color:var(--text);background:var(--sky-tint)}
.mnav-panel .btn{margin-top:8px}

@media(max-width:900px){
  .navbar nav.nav-desktop{display:none}
  .mnav{display:block;margin-left:auto}
}
@media(max-width:520px){
  .brand{font-size:18px;gap:8px}
  .brand .brand-mark{height:30px}
  .navbar .bar{gap:10px;padding:12px 20px}
}
/* Ganz schmal (≤400 px) verschwindet der Navbar-CTA: Wortmarke, Button und
   Menütaste passen dort nicht nebeneinander. Der CTA steht im Menü. */
@media(max-width:400px){.navbar .nav-cta{display:none}}

/* ---------- Baustellen-Band ---------- */
/* Sky-Tint, weil „wir sind im Aufbau“ eine Fortschritts-Aussage ist —
   Sky heißt Marke und Fortschritt (§1.3). Sun bliebe dem CTA vorbehalten,
   Grass hieße „bestanden“. Text steht in Charcoal. */
.baustellen-band{background:var(--sky-tint);border-bottom:2px solid var(--border)}
.baustellen-band p{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 0;font-size:14.5px;font-weight:700;color:var(--text);
}
.baustellen-band i{
  width:9px;height:9px;border-radius:50%;background:var(--sky);flex:none;margin-top:7px;
}

/* ---------- 2 · Hero ---------- */
.hero{padding:64px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:24px}}
@media(max-width:720px){.hero{padding:40px 0 28px}}
.hero .t-lead{margin:22px 0 30px;max-width:30em}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn-row-zentriert{justify-content:center}
.trust-note{margin-top:24px;font-size:14.5px;font-weight:700;color:var(--muted);max-width:34em}

/* Hero-Szene: Figur frei im Weißraum, eine Sky-Tint-Scheibe dahinter (§12.1) */
.scene{position:relative;min-height:400px;display:grid;place-items:center}
.scene .disc{position:absolute;width:min(380px,90%);aspect-ratio:1;border-radius:50%;background:var(--sky-tint)}
.scene .sun-svg{position:absolute;top:5%;right:7%}
.scene .cloud{position:absolute;background:var(--white);border-radius:var(--r-pill)}
.scene .c1{width:90px;height:30px;left:4%;top:22%}
.scene .c2{width:60px;height:22px;right:2%;bottom:26%}
.scene .dot{position:absolute;width:14px;height:14px;border-radius:50%}
.scene .mascot{position:relative;width:min(300px,74%);height:auto;display:block}
/* Das Video trägt die Scheibe selbst, deshalb 380 px und kreisrund
   beschnitten. `height:auto` ist PFLICHT — das height-Attribut des <video>
   ist ein Presentational Hint und schlüge sonst aspect-ratio, die Scheibe
   würde zur Ellipse. */
.scene .mascot-video{
  width:min(380px,90%);height:auto;aspect-ratio:1;
  border-radius:50%;object-fit:cover;background:var(--sky-tint);
}
.scene .tag{position:absolute;max-width:min(58%,240px)}
.scene .tag svg{width:17px;height:17px;flex:none}
@media(max-width:860px){.scene{min-height:330px}}
@media(max-width:480px){.scene .tag{font-size:12.5px;padding:6px 11px}}

/* Hero-Loop „Aufwind“: die Möwe segelt eine flache Kreisbahn.
   §9-Zusatz — Dauerbewegung ist der FIGUR erlaubt, solange sie EINE
   Handlung wiederholt (segeln), 2–4 s, letzter Frame = erster, kein Drift.
   Acht Stützpunkte auf einer Ellipse plus `linear` ergeben eine
   gleichförmige Bewegung; mit `ease` säße in jedem Viertel ein Stillstand. */
@keyframes mw-segeln{
    0%,100%{transform:translate(0,0)          rotate(0)}
  12.5%    {transform:translate(4.2px,-2.2px) rotate(-1.7deg)}
  25%      {transform:translate(6px,-7.5px)   rotate(-2.4deg)}
  37.5%    {transform:translate(4.2px,-12.8px)rotate(-1.7deg)}
  50%      {transform:translate(0,-15px)      rotate(0)}
  62.5%    {transform:translate(-4.2px,-12.8px)rotate(1.7deg)}
  75%      {transform:translate(-6px,-7.5px)  rotate(2.4deg)}
  87.5%    {transform:translate(-4.2px,-2.2px)rotate(1.7deg)}
}
.scene .mascot{animation:mw-segeln 4s linear infinite;will-change:transform}
/* Das Video trägt seine Bewegung selbst (Flügelschlag, Blinzeln). Der
   CSS-Segelloop obendrauf wären zwei Handlungen gleichzeitig — bar.md 4
   erlaubt eine. Der Loop bleibt für den PNG-Fallback definiert. */
.scene .mascot-video{animation:none}
[data-hp],[data-vp]{will-change:transform}

/* ---------- 3 · Schein-Leiste ---------- */
.lb{margin-top:40px}
.lb-inner{justify-content:center;gap:8px}
.lb-item svg{width:20px;height:20px;flex:none}

/* ---------- 4 · Sektionsköpfe ---------- */
.sec-head{max-width:640px;margin-bottom:40px}
.sec-head p{color:var(--muted);margin-top:12px}
.section-cloud .sec-head p{color:var(--muted-2)}
.wrap-schmal{max-width:760px}

/* ---------- 5 · Karten ---------- */
.why-head{display:flex;gap:36px;align-items:center;justify-content:space-between;margin-bottom:40px}
.why-head .sec-head{margin-bottom:0}
/* Zwei verschachtelte Kästen: der Auftritt sitzt auf dem Elter (.leser),
   der Ruhe-Loop auf dem Kind (.leser-in). Zwei Animationen auf EINER
   transform-Eigenschaft würden einander überschreiben. */
.why-head .leser{width:120px;flex:none;display:block;transform-origin:50% 100%}
.why-head .leser-in{display:block;transform-origin:50% 100%}
.why-head img{width:100%;height:auto;display:block}
@media(max-width:700px){.why-head{gap:20px}.why-head .leser{width:84px}}
/* Ruhe-Loop „lesen“: EINE Handlung — sie sinkt beim Lesen leicht ins Buch
   und richtet sich wieder auf (bar.md 4). 4 s, letzter Frame = erster. */
@keyframes mw-lesen{
  0%,100%{transform:translateY(0)     rotate(0)}
  34%    {transform:translateY(-2.4px)rotate(-1.2deg)}
  52%    {transform:translateY(-3.1px)rotate(-1.5deg)}
  78%    {transform:translateY(-1.1px)rotate(-.6deg)}
}
.why-head .leser-in{animation:mw-lesen 4s ease-in-out infinite}

.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.cards3{grid-template-columns:1fr}}
.cards3 .card{display:flex;flex-direction:column;gap:12px}
.cards3 .ico svg{width:30px;height:30px}
/* Der Kartentext kommt aus Markdown und kann mehrere Absätze haben.
   tokens.css setzt alle Abstände auf 0 — ohne diese Regel klebten sie
   aneinander. Dasselbe gilt für die Abschnitts-Intros. */
.cards3 p{font-size:15px;color:var(--muted);margin:0}
.cards3 .card p+p{margin-top:10px}
.sec-head p+p{margin-top:12px}

.cards-scheine{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.cards-artikel{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
@media(max-width:640px){
  .cards-scheine,.cards-artikel{grid-template-columns:1fr}
}

/* Karten sind Links. Die Farbe kommt NICHT vom a-Default (Link-Blau),
   sondern bleibt Charcoal — sonst stünde die Überschrift der Karte in
   einer Farbe, die „hier klicken“ bedeutet, und die ganze Karte tut das. */
.karte-schein,.karte-artikel{
  display:flex;flex-direction:column;gap:12px;color:var(--text);
  transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease);
}
.karte-schein:hover,.karte-artikel:hover{border-color:var(--sky);text-decoration:none}
.karte-schein p,.karte-artikel p{margin:0}
.ks-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ks-kopf .t-h3{flex:1;min-width:0}
.ks-fakten{color:var(--muted);font-weight:800}
.ks-text,.ka-text{font-size:15px;color:var(--muted)}
.ks-quelle{margin-top:auto}
.ka-mehr{margin-top:auto;font-weight:800;font-size:15px;color:var(--link)}
.karte-artikel .t-caption{margin:0}
.section-cloud .ks-text,.section-cloud .ka-text,.section-cloud .ks-fakten{color:var(--muted-2)}

/* Statuspille für Zustände vor „benutzbar“. Neutral, weil kein
   Farbfamilien-Sinn passt: Grass hieße „bestanden“, Heart „Fehler“. */
.tag-status{border-color:var(--border);color:var(--muted)}
/* „Live“/„Beta“ tragen Sky — Marke und Fortschritt (§1.3). */
.badge-sky{background:var(--sky-tint)}
.badge-sky i{background:var(--sky)}

/* ---------- Preisblock: das sichtbare Ergebnis der Preis-Regel ---------- */
.preisblock{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:auto;padding-top:18px;border-top:2px solid var(--border);
}
.preis{display:flex;align-items:baseline;gap:8px;margin:0;flex-wrap:wrap}
.preis b{font-family:var(--display);font-weight:600;font-size:30px;line-height:1;color:var(--text)}
.preis span{font-size:14px;font-weight:700;color:var(--muted)}
.preis .preis-steuer{font-weight:600}
.preis-hinweis{margin:0;font-size:15px;font-weight:800;color:var(--muted)}
.preisblock--karte .preis-mehr{margin-left:auto}
.preisblock--detail{border-top:none;padding-top:0;margin-top:24px}
.preisblock--detail .preis b{font-size:38px}
.section-cloud .preis span,.section-cloud .preis-hinweis{color:var(--muted-2)}

/* ---------- 6 · Readiness ---------- */
.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:860px){.path-grid{grid-template-columns:1fr;gap:36px}}
.ready-side{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.ready-side .ring{--size:220px}
@media(max-width:480px){.ready-side .ring{--size:180px}}
.path-copy ul{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:26px}
.path-copy li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.path-copy li::before{
  content:"";width:10px;height:10px;border-radius:50%;background:var(--sky);
  flex:none;margin-top:8px;
}

/* ---------- 7 · Sky-Band (genau eines pro Seite) ---------- */
.section-sky{position:relative;overflow:hidden}
/* Wolken: Pille plus zwei aufgesetzte Kuppen — eine nackte Pille liest als
   liegengebliebener Platzhalter, nicht als Wolke. Deckkraft sitzt am Elter,
   die Kuppen erben sie, damit keine Kanten zwischen den Teilformen entstehen. */
.section-sky .cloudbg{position:absolute;z-index:0;background:var(--white);opacity:.42;border-radius:var(--r-pill)}
.section-sky .cloudbg::before,.section-sky .cloudbg::after{content:"";position:absolute;background:var(--white);border-radius:50%}
.section-sky .cloudbg::before{width:56%;height:118%;left:9%;bottom:34%}
.section-sky .cloudbg::after{width:40%;height:86%;right:11%;bottom:38%}
@media(max-width:860px){.section-sky .cloudbg{display:none}}
.band-inner{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;position:relative;z-index:1}
@media(max-width:760px){.band-inner{grid-template-columns:1fr;gap:24px}}
.band-inner p{margin-top:12px;font-weight:700;max-width:38em;color:var(--text)}

/* ---------- 8 · FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--white);border:2px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:18px 22px;font-family:var(--display);font-weight:600;font-size:18px;color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:''}
.faq-item summary span{flex:1}
/* Plus/Minus aus zwei Strichen — kein Zeichen aus einer Icon-Schrift,
   das erst nachgeladen werden müsste. */
.faq-item summary::after{
  content:"";width:14px;height:14px;flex:none;
  background:
    linear-gradient(var(--sky),var(--sky)) center/14px 2.5px no-repeat,
    linear-gradient(var(--sky),var(--sky)) center/2.5px 14px no-repeat;
  transition:transform var(--t-micro) var(--ease);
}
.faq-item[open] summary::after{transform:rotate(45deg);background-size:14px 2.5px,0 0}
.faq-item:hover{border-color:var(--sky)}
.faq-antwort{padding:0 22px 20px}
.faq-antwort p{margin:0;color:var(--muted)}
.faq-antwort p+p{margin-top:12px}

/* ---------- 9 · Final-CTA & Fehlerseite ---------- */
.final{text-align:center}
/* display:block ist Pflicht — als inline-Element ignoriert der span Breite,
   Höhe und margin:auto, und transform-origin bezöge sich auf eine Textzeile. */
.final .jubel-in{display:block;width:150px;margin:0 auto 20px;transform-origin:50% 100%}
.final .jubler{display:block;position:relative;width:150px;height:150px}
.final .mascot{width:150px;height:auto;display:block}
.final .a-blink{position:absolute;left:0;top:0;width:150px;height:auto;opacity:0}
/* Jubel-Loop: ein Hüpfer mit Squash & Stretch — Anticipation, Streckung,
   Scheitel, Aufprall-Squash, Overshoot, Settle (bar.md 6). 2,8 s. */
@keyframes mw-jubeln{
  0%,100%{transform:translateY(0)     scale(1,1)}
  12%    {transform:translateY(2px)   scale(1.035,.965)}
  34%    {transform:translateY(-9px)  scale(.975,1.03)}
  50%    {transform:translateY(-12px) scale(1,1)}
  70%    {transform:translateY(-2px)  scale(1.02,.98)}
  82%    {transform:translateY(1px)   scale(1.035,.965)}
  92%    {transform:translateY(-2px)  scale(.99,1.01)}
}
@keyframes mw-blinzeln{0%,81.99%{opacity:0}82%,87.99%{opacity:1}88%,100%{opacity:0}}
.final .jubler{transform-origin:50% 100%;animation:mw-jubeln 2.8s var(--ease) infinite}
.final .a-blink{animation:mw-blinzeln 2.8s linear infinite}
.final p,.final .final-text{color:var(--muted);margin:14px auto 30px;max-width:34em}
.final .final-text p{margin:0}
.final .final-text p+p{margin-top:10px}
.notify-form{display:flex;gap:12px;max-width:460px;margin:0 auto;flex-wrap:wrap}
.notify-form .input{flex:1 1 100%;min-width:200px}
.notify-form .btn{flex:1 1 100%}
/* Honigtopf: nicht display:none — das überspringen viele Bots gezielt.
   Aus dem Fluss genommen und unsichtbar, aber im DOM ausfüllbar. */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.notify-ok{display:flex;gap:10px;align-items:flex-start;text-align:left;
  font-size:14px;line-height:1.5;color:var(--muted);flex:1 1 100%}
.notify-ok input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--sky)}
/* Rückmeldung nach dem Absenden (Grav setzt form.message). */
.form-echo{max-width:34em;margin:0 auto 20px;padding:12px 16px;border-radius:14px;
  background:var(--sky-tint);color:var(--text);font-weight:700}
/* Abwahl der Reichweitenmessung auf /datenschutz (partials/messung-abwahl).
   Sitzt mitten im Fließtext von §4 und muss sich als Schalter davon
   abheben, ohne wie ein CTA auszusehen — deshalb Tint-Fläche und der
   ruhige Weiß-Button, nicht der Sonnen-Button (design-system.md §11:
   ein Sonnen-Button je Seitenabschnitt, und der gehört dem Angebot). */
.abwahl{margin:20px 0;padding:16px 18px;border-radius:var(--r-lg);
  background:var(--cloud);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.abwahl-stand{flex:1 1 16em;margin:0;font-size:15px;color:var(--muted-2)}
/* display:flex schlägt die Browserregel für [hidden] — ohne diese Zeile
   stünde der Block ohne JavaScript sichtbar da. */
.abwahl[hidden]{display:none}

.fehler .mascot{width:180px;height:auto;margin:0 auto 20px;display:block}
.fehler .kicker{margin-bottom:6px}
.fehler p{color:var(--muted);margin:14px auto 28px;max-width:32em}

/* ---------- 9b · Artikelbilder ---------- */
/* Frei auf Weiß, kein Rahmen, kein Schlagschatten (bar.md 3 und 1).
   Die Tint-Scheibe hinter der Figur bringt die Grafik selbst mit —
   das Theme legt keine Fläche darunter. */
.section-aufmacher{padding:0 0 8px}
.aufmacher{display:block;width:100%;height:auto;border-radius:var(--r-lg)}
/* Kartenbild: fester Ausschnitt, damit drei Karten nebeneinander nicht
   unterschiedlich hoch werden. `cover` schneidet zu, statt zu verzerren. */
.ka-bild{display:block;width:100%;height:150px;object-fit:cover;
  border-radius:var(--r);margin-bottom:14px;background:var(--sky-tint)}

/* ---------- 9c · Lernweg (So funktioniert's) ---------- */
/* Ein Schritt ist ein PAAR: Text und Bild nebeneinander, die Seiten
   tauschen von Schritt zu Schritt. `lw-paar-gedreht` dreht nur die
   VISUELLE Reihenfolge — im Quelltext steht der Text immer zuerst, damit
   Vorlesehilfen und Suchmaschinen die Erklärung vor der Illustration
   bekommen. */
.lw-paar{display:grid;grid-template-columns:1fr .82fr;gap:56px;align-items:center}
.lw-paar-gedreht .lw-text{order:2}
.lw-paar-gedreht .lw-visual{order:1}
.lw-paar-solo{grid-template-columns:1fr;max-width:760px}

/* Die Schrittmarke ersetzt die lose Ziffer: Pille auf Sky-Tint, die Zahl
   als kräftige Auszeichnung davor. */
.lw-marke{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--sky-tint);color:var(--muted);
  border-radius:var(--r-pill);padding:6px 14px 6px 6px;
  font-size:13.5px;font-weight:800;letter-spacing:.01em;margin-bottom:16px;
}
.lw-marke b{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--sky);color:var(--white);font-family:var(--display);
  font-size:15px;line-height:1;
}
.lw-schritt .lw-text .t-h2{margin-bottom:16px}

/* Bildplatz: Figur frei auf dem Grund, dahinter EINE Tint-Scheibe
   (bar.md 3). Kein Rahmen, kein Schatten. */
.lw-visual{position:relative;display:grid;place-items:center;margin:0;gap:16px}
.lw-scheibe{
  position:absolute;width:min(340px,94%);aspect-ratio:1;border-radius:50%;
  background:var(--sky-tint);
}
.section-cloud .lw-scheibe{background:var(--white)}
.lw-bild{position:relative;width:min(330px,92%);height:auto;display:block}
.lw-visual .ring{--size:190px;position:relative}
.lw-visual .badge{position:relative}

/* Ruhe-Loop: EINE Handlung, nahtlos, ohne Drift (bar.md 4 und 5).
   Die gedrehten Schritte schwingen gegenläufig — das hält den Wechsel
   auch in Bewegung lesbar. */
@keyframes lw-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.lw-bild{animation:lw-schweben 3.6s var(--ease) infinite;will-change:transform}
.lw-paar-gedreht .lw-bild{animation-delay:-1.8s}
@media(prefers-reduced-motion:reduce){.lw-bild{animation:none}}

@media(max-width:980px){
  .lw-paar{grid-template-columns:1fr;gap:28px;max-width:760px}
  /* Auf einer Spalte steht das Bild IMMER unter dem Text — ein Wechsel
     ohne zweite Spalte wäre nur Zappeln. */
  .lw-paar-gedreht .lw-text{order:0}
  .lw-paar-gedreht .lw-visual{order:0}
}
@media(max-width:620px){
  .lw-bild{width:min(260px,78%)}
  .lw-scheibe{width:min(270px,88%)}
}

/* ---------- 9d · Artikel-Rhythmus ---------- */
/* Der Auftakt trägt den Einstieg etwas größer als den Rest — er ist die
   Brücke vom Seitenkopf in den Text. */
.inhalt-lead{font-size:18.5px}
/* Aufeinanderfolgende Abschnitte gleicher Fläche sollen nicht doppelt
   polstern: der obere Abstand entfällt, wenn der Grund derselbe bleibt. */
.artikel-block{padding-top:34px;padding-bottom:34px}
.artikel-auftakt{padding-bottom:10px}
.artikel-block .t-h2{margin-bottom:16px}

/* Kopflose Wertetabellen („Das Wichtigste in Kürze"): Markdown erzeugt für
   `| | |` eine leere Kopfzeile, die sonst als leerer Streifen mit Linie
   dasteht. Leere Zellen tragen deshalb weder Polster noch Linie. */
.inhalt th:empty{padding:0;border-bottom:none}
/* Grav rendert Markdown vor Twig: Eine Zeile, die nur eine Twig-Steuerklammer
   trägt (so schaltet /datenschutz seinen Analytics-Abschnitt), wird erst zum
   Absatz und dann zu einem LEEREN Absatz. Ohne diese Zeile klafft im Text
   eine Lücke, für die niemand eine Ursache findet. */
.inhalt p:empty{display:none}
/* Erste Spalte ist die Bezeichnung — sie darf nicht umbrechen wie Fließtext. */
.inhalt td:first-child{width:38%;color:var(--muted)}
.inhalt tr:last-child td{border-bottom:none}
/* Breite Tabellen dürfen scrollen statt die Seite zu sprengen. */
.inhalt table{display:block;overflow-x:auto}

/* ---------- 10 · Seitenkopf & Fließtext ---------- */
.seitenkopf{padding:44px 0 40px}
.seitenkopf .t-lead{margin-top:14px;color:var(--muted-2)}
.krumen{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;font-weight:700;margin-bottom:16px;color:var(--muted-2)}
.krumen a{color:var(--muted-2)}
.krumen a:hover{color:var(--text)}
.krumen-hier{color:var(--text)}
.schein-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.artikel-meta{margin-top:16px;color:var(--muted-2)}
.liste-intro{margin:0 0 40px;padding:0}

/* Fließtext aus Markdown. tokens.css setzt alle Abstände auf 0 und
   formatiert nur .t-*-Klassen — der Markdown-Renderer gibt aber nackte
   h2/h3/p/ul aus. Hier bekommen sie ihren Rhythmus. */
.inhalt{font-size:17px;line-height:1.7}
.inhalt>*+*{margin-top:20px}
.inhalt h2,.inhalt h3,.inhalt h4{font-family:var(--display);font-weight:600;color:var(--text);line-height:1.25}
.inhalt h2{font-size:clamp(24px,3vw,30px);margin-top:44px}
.inhalt h3{font-size:20px;margin-top:32px}
.inhalt h4{font-size:18px;margin-top:26px}
.inhalt>h2:first-child,.inhalt>h3:first-child{margin-top:0}
.inhalt ul,.inhalt ol{padding-left:22px;display:flex;flex-direction:column;gap:10px}
.inhalt li{padding-left:4px}
.inhalt ul{list-style:disc}
.inhalt ol{list-style:decimal}
.inhalt li::marker{color:var(--sky)}
.inhalt blockquote{
  border-left:4px solid var(--sky);background:var(--sky-tint);
  border-radius:0 var(--r) var(--r) 0;padding:18px 22px;
}
.inhalt blockquote>*+*{margin-top:12px}
.inhalt hr{border:none;border-top:2px solid var(--border);margin:36px 0}
.inhalt img{border-radius:var(--r-lg);display:block}
.inhalt table{width:100%;border-collapse:collapse;font-size:15.5px}
.inhalt th,.inhalt td{text-align:left;padding:11px 14px;border-bottom:2px solid var(--border)}
.inhalt th{font-weight:800}
/* Der CTA am Textende: aus einem Markdown-Link wird der Sonnen-Button
   (aufwind.php setzt die Klasse). Er steht allein am Fuß der Seite,
   dort ist er der eine Sonnen-CTA des Viewports (§11). */
.inhalt .cta-inhalt{margin-top:32px}
.inhalt p:has(>.cta-inhalt){margin-top:32px}

/* ---------- 11 · Footer ---------- */
.footer-big{padding:48px 0 32px}
.f-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:32px}
@media(max-width:700px){.f-cols{grid-template-columns:1fr;gap:22px}}
.f-head{display:block;font-family:var(--display);font-weight:600;font-size:17px;color:var(--text);margin-bottom:12px}
.f-cols ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.f-unten{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:2px solid var(--border);padding-top:22px;
}

/* ---------- Hilfsklassen ---------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   12 · SCROLL-CHOREOGRAFIE (design-system.md §9-Zusatz 30.08.2026)
   ------------------------------------------------------------
   1. SICHTBAR IST DER GRUNDZUSTAND. tokens.css definiert `.rv` mit
      `opacity:0` — das ist für eine Seite gedacht, die ihr Skript
      sicher bekommt. Hier wird der Startzustand an `.js-anim` auf
      <html> gehängt, das erst das Skript setzt, und nur dann, wenn
      IntersectionObserver da ist und Bewegung nicht abbestellt wurde.
      Ohne Skript, ohne Beobachter, bei `prefers-reduced-motion`
      steht die Seite vollständig da. Das ist der klassische Fehler
      bei Scroll-Reveals, und er ist hier ausgeschlossen.
   2. JEDE GRUPPE RÄUMT IHREN STARTZUSTAND SELBST AB. `.rv-done` und
      `.anim-done` kommen von einem Timer auf der WANDUHR, nicht aus
      einem Frame: Liefert ein Renderer keine Frames, laufen
      Transition und Keyframes nie durch — der Timer feuert trotzdem.
   3. NUR transform UND opacity. Kein Keyframe rührt Geometrie an,
      deshalb verschiebt keine Bewegung die CTA-Abstände aus §11.
   ============================================================ */
.rv{opacity:1;transform:none}
.js-anim .rv{opacity:0;transform:translateY(var(--ry,18px))}
.js-anim .rv.is-in{opacity:1;transform:none}
/* Ring-Auftritt: kein Weg, sondern ein Maßstabswechsel. */
.js-anim .rv-pop{transform:scale(.93)}
/* Sicherung. Muss `.js-anim .rv` schlagen, deshalb zweiklassig notiert —
   eine einklassige Regel wäre schwächer und der Inhalt bliebe unsichtbar. */
.js-anim .rv.rv-done{opacity:1;transform:none;transition:none}

/* Staffeln als nth-child-Tabelle statt als 20 einzelne --d-Attribute im
   Markup: Die Reihenfolge steckt ohnehin in der DOM-Reihenfolge, und so
   kann beim Umsortieren niemand eine Nummer vergessen. Takt 45–80 ms. */
.lb-inner .rv{--ry:10px}
.lb-inner .rv:nth-child(2){--d:.045s} .lb-inner .rv:nth-child(3){--d:.09s}
.lb-inner .rv:nth-child(4){--d:.135s} .lb-inner .rv:nth-child(5){--d:.18s}
.lb-inner .rv:nth-child(6){--d:.225s} .lb-inner .rv:nth-child(7){--d:.27s}
.cards3 .rv:nth-child(2){--d:.08s}    .cards3 .rv:nth-child(3){--d:.16s}
.cards-scheine .rv:nth-child(2){--d:.08s} .cards-scheine .rv:nth-child(3){--d:.16s}
.cards-artikel .rv:nth-child(2){--d:.06s} .cards-artikel .rv:nth-child(3){--d:.12s}
.cards-artikel .rv:nth-child(4){--d:.18s} .cards-artikel .rv:nth-child(5){--d:.24s}
.cards-artikel .rv:nth-child(6){--d:.3s}  .cards-artikel .rv:nth-child(7){--d:.36s}
.cards-artikel .rv:nth-child(8){--d:.42s} .cards-artikel .rv:nth-child(9){--d:.48s}
.cards-artikel .rv:nth-child(10){--d:.54s}
.faq .rv:nth-child(2){--d:.05s} .faq .rv:nth-child(3){--d:.1s}
.faq .rv:nth-child(4){--d:.15s} .faq .rv:nth-child(5){--d:.2s}
.faq .rv:nth-child(6){--d:.25s}

/* Der Swoosh zeichnet sich, statt einzublenden. Über scaleX statt
   stroke-dashoffset: dieselbe Lesart, aber es bleibt bei transform. */
@keyframes swooshZieh{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js-anim .swoosh svg{transform:scaleX(0);transform-origin:0 50%}
.js-anim .is-seen .swoosh svg{animation:swooshZieh .55s var(--ease) .26s both}
.js-anim .anim-done .swoosh svg{animation:none;transform:none}

/* Charakter-Auftritte: der eine Bewegungstyp, der NICHT Reveal ist — eine
   Figur kommt an. Nach bar.md 6 mit Anticipation (sie duckt sich noch
   tiefer), Overshoot (sie schießt über die Ruhelage hinaus) und Settle. */
@keyframes mw-auftritt{
  0%  {opacity:0;transform:translateY(18px) scale(.84)}
  18% {opacity:1;transform:translateY(20px) scale(.82)}
  56% {opacity:1;transform:translateY(-6px) scale(1.05)}
  78% {opacity:1;transform:translateY(2px)  scale(.982)}
  100%{opacity:1;transform:translateY(0)    scale(1)}
}
.js-anim .leser,.js-anim .jubel-in{opacity:0}
.js-anim .is-seen .leser,.js-anim .is-seen .jubel-in{animation:mw-auftritt .62s var(--ease) both}
.js-anim .anim-done .leser,.js-anim .anim-done .jubel-in{animation:none;opacity:1;transform:none}
/* Die Dauer-Loops warten auf ihren Auftritt: pausiert statt ausgeschaltet —
   `animation-play-state` rührt Deckkraft und Position nicht an, das Bild
   steht also auch dann vollständig da, wenn der Auslöser nie kommt. */
.js-anim [data-reveal]:not(.is-seen) .leser-in,
.js-anim [data-reveal]:not(.is-seen) .jubler,
.js-anim [data-reveal]:not(.is-seen) .a-blink{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
  .scene .mascot,.why-head .leser-in,.final .jubler,.final .a-blink{animation:none!important}
  .rv,.js-anim .rv{opacity:1!important;transform:none!important}
}

/* Die Prüfung in Kürze (partials/pruefung-kurz.html.twig) — Werte aus config/scheine.yaml */
.section-pruefung-kurz{padding-top:0}
.pruefung-kurz{background:var(--cloud);border-radius:var(--r-lg);padding:20px 24px}
.pruefung-kurz h2{margin:0 0 8px}
.pruefung-kurz .pk-eintrag + .pk-eintrag{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.pruefung-kurz p{margin:4px 0}
.pruefung-kurz .pk-teile{margin:4px 0 4px 20px;padding:0}
.pruefung-kurz .pk-beleg a{overflow-wrap:anywhere}