/* ════════════════════════════════════════════════════════════════════════
   SCHREIBFIT — Slate & Citron, wärmer & editorial. Geteiltes Stylesheet für
   die Multipage-Site. Tokens-Basis: shared/design-tokens.json + design-system-Skill.
   Bewegung: dezent & editorial — gestaffelte Reveals, Cross-Document View-
   Transitions, Zähler, Hover-Lifts. KEINE Glow-/Gradient-Slop-Flächen.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Selbst gehostete Fonts (DSGVO) ────────────────────────────────────────
   Lokale Variable-woff2 (latin + latin-ext) statt Google-CDN — keine Nutzer-IP
   an fonts.gstatic.com (US). Quelle/Lizenz: Google Fonts, SIL OFL 1.1.
   Generiert aus css2 (Chrome-UA). font-display:swap. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/fraunces-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;
  src:url(fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;
  src:url(fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --slate:#1F2E3C; --slate2:#2C3E4E;
  --green:#2A9D66; --green-deep:#1E7E50; --green-soft:#E7EFDF; --forest:#15392B; --forest2:#102B20;
  --ember:#E0733B; --ember-soft:#F6E2D3;
  --lilac:#C9A8F5; --lilac-deep:#8B5CC7; --lilac-soft:#EFE6FB;
  --citron:#EDF0DA;
  --butter:#F2EEDC; --butter2:#EBE7D2; --cream:#FAF7EA; --card:#FFFEFB;
  --hairline:#E2DDC8; --hairline-soft:#EDE9D8;
  /* ink3 von #97A09C abgedunkelt: 2,3:1 auf Butter war unlesbar (WCAG). */
  --ink:#23303A; --ink2:#5E6A6B; --ink3:#7E8985;
  --error:#EF4444;
  --shadow:0 6px 22px rgba(20,32,26,.07);
  --shadow-lift:0 26px 60px rgba(20,32,26,.20);
  --display:'Fraunces',Georgia,serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--butter);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,.display{font-family:var(--display);letter-spacing:-.018em;color:var(--slate);font-weight:600;line-height:1.04}
.it{font-style:italic;font-weight:500}
.eyebrow{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px}
.muted{color:var(--ink2)}
.center{text-align:center}

/* ── Cross-document Page-Transitions ───────────────────────────────────── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .26s var(--ease) both}
::view-transition-new(root){animation:vt-in .34s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 26px;
  border-radius:14px;border:1.5px solid transparent;font-family:var(--body);font-weight:600;font-size:15px;
  cursor:pointer;transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s;white-space:nowrap}
.btn:active{transform:scale(.98)}
/* Volle-Breite-Buttons dürfen umbrechen — nowrap hat lange CTA-Texte
   („Diese Lücke schließen — kostenlos starten") auf 390px beidseitig geclippt. */
.btn-block{white-space:normal;height:auto;min-height:54px;padding:13px 22px;line-height:1.3}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 8px 22px rgba(42,157,102,.30)}
.btn-primary:hover{background:var(--green-deep);transform:translateY(-2px);box-shadow:0 14px 30px rgba(42,157,102,.34)}
.btn-dark{background:var(--slate);color:#fff}
.btn-dark:hover{background:var(--slate2);transform:translateY(-2px)}
.btn-cream{background:var(--cream);color:var(--slate);border-color:#0000000f}
.btn-cream:hover{background:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hairline)}
.btn-ghost:hover{border-color:var(--ink2);background:var(--cream)}
.btn-block{width:100%}
.btn svg{width:19px;height:19px}
.pillbtn{border-radius:999px}

/* ── Store badges ──────────────────────────────────────────────────────── */
.stores{display:flex;flex-wrap:wrap;gap:13px}
.store{display:inline-flex;align-items:center;gap:13px;min-height:58px;padding:0 22px;border-radius:16px;
  background:var(--slate);color:#fff;border:1px solid #ffffff14;transition:transform .12s ease, background .2s ease}
.store:hover{background:var(--slate2);transform:translateY(-2px)}
.store svg{width:26px;height:26px;flex:0 0 auto}
.store .sl{display:flex;flex-direction:column;line-height:1.05}
.store .sl small{font-size:11px;opacity:.72;font-weight:500}
.store .sl b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.store.light{background:var(--cream);color:var(--slate);border-color:#0000000f}
.store.light:hover{background:#fff}
.store.light .sl small{opacity:.6}
/* Grün statt Ember: die Pille soll den Primär-CTA begleiten, nicht mit ihm konkurrieren. */
.beta-pill{display:inline-flex;align-items:center;gap:8px;background:var(--green-soft);color:var(--green-deep);font-size:11.5px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.beta-pill .dot{width:7px;height:7px;border-radius:999px;background:var(--green);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Nav (Tab-Leiste) ──────────────────────────────────────────────────── */
header.nav{position:sticky;top:14px;z-index:60;padding:0 18px;margin-bottom:-72px}
.nav-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  height:66px;padding:0 14px 0 22px;background:rgba(250,247,234,.82);backdrop-filter:saturate(150%) blur(14px);
  border:1px solid var(--hairline);border-radius:999px;box-shadow:0 8px 30px rgba(20,32,26,.06)}
.wordmark{display:flex;align-items:center;gap:10px;font-family:var(--body);font-weight:700;font-size:21px;color:var(--ink);letter-spacing:-.03em}
.logo{height:34px;width:auto;flex:0 0 auto;display:block;transition:transform .25s var(--ease)}
.wordmark:hover .logo{transform:scale(1.06)}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{position:relative;font-size:14px;font-weight:500;color:var(--ink2);padding:9px 14px;border-radius:999px;transition:color .15s, background .15s}
.nav-links a:hover{color:var(--ink);background:#0000000a}
.nav-links a.active{color:var(--slate);font-weight:600;background:#fff;box-shadow:0 2px 8px rgba(20,32,26,.07)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-burger{display:none;width:46px;height:46px;border-radius:999px;border:1px solid var(--hairline);background:transparent;cursor:pointer;align-items:center;justify-content:center}
.nav-burger svg{width:22px;height:22px;color:var(--ink)}
@media(max-width:1100px){.nav-links{display:none}.nav-burger{display:inline-flex}}
/* Schmale Screens: Kurz-Label + engere Pille — sonst überdeckt der CTA die Wortmarke. */
.ctaS{display:none}
@media(max-width:520px){
  header.nav{padding:0 10px}
  .nav-in{padding:0 10px 0 16px}
  .nav-cta{gap:8px}
  .nav-cta .btn{padding:0 16px;font-size:14px}
  .ctaL{display:none}
  .ctaS{display:inline}
  .wordmark{font-size:19px;gap:8px}
}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:70;background:rgba(20,32,26,.34);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
.drawer.open{opacity:1;pointer-events:auto}
.drawer-panel{position:absolute;top:14px;right:14px;left:14px;background:var(--cream);border:1px solid var(--hairline);
  border-radius:24px;padding:18px;box-shadow:var(--shadow-lift);transform:translateY(-12px);opacity:0;transition:transform .3s var(--ease),opacity .3s}
.drawer.open .drawer-panel{transform:none;opacity:1}
.drawer-panel a{display:flex;align-items:center;justify-content:space-between;padding:15px 14px;border-radius:14px;font-weight:600;font-size:17px;color:var(--ink)}
.drawer-panel a.active{background:#fff;color:var(--slate)}
.drawer-panel a svg{width:18px;height:18px;color:var(--ink3)}
.drawer-panel hr{border:none;border-top:1px solid var(--hairline);margin:10px 4px}

/* ── Page hero (kompakt, für Unterseiten) ──────────────────────────────── */
.page-hero{padding:118px 0 22px}
.page-hero h1{font-size:clamp(36px,5vw,60px)}
.page-hero p{font-size:18px;color:var(--ink2);max-width:54ch;margin-top:16px}

/* ── Hero (Start) ──────────────────────────────────────────────────────────
   Bewusst kompakt gehalten: beide Spalten sollen auf üblichen Laptop-Höhen
   (~800–950px Viewport) komplett über dem Fold stehen — nichts abschneiden.
   2026-08-27 nachgezogen: Notenrechner-Chip + 3. Fehler-Check-Stufe waren
   seit dem Fold-Fix vom 2026-07-05 dazugekommen und hatten die Karte wieder
   über den Fold wachsen lassen — Rhythmus in Hero + Karte erneut gestrafft. */
/* 2026-09-02: 108 -> 124 — die Fehler-Check-Karte klebte auf normalen Bildschirmen (>900 px Höhe)
   8 px unter der Nav-Pille. Die beiden Kurz-Viewport-Stufen unten behalten ihre eigenen Werte. */
.hero{padding:124px 0 20px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);column-gap:clamp(36px,5vw,64px);
  align-items:center;position:relative;z-index:3}
/* Linke Spalte als EIN zentrierter Block: Headline-Gruppe + CTA-Gruppe rücken
   zusammen und füllen die Hero-Höhe mittig — egal welche Spalte höher ist. */
.hero-left{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2vh,24px);min-width:0}
.hero-calc-col{align-self:center}
.hero h1{font-size:clamp(40px,5.2vw,64px)}
.hero h1 .a1{color:var(--ink3);font-weight:400}
.hero h1 .a2{color:var(--slate);font-weight:600}
.hero .lede{font-size:18px;color:var(--ink2);max-width:44ch;margin-top:16px}

/* Direkte Ansprache-Chips → Fehler-Check (on-page) + Challenge (eigene Seite) */
.hero-hints{display:flex;flex-wrap:wrap;gap:10px;margin-top:13px}
.hero-hint{display:inline-flex;align-items:center;gap:9px;max-width:34ch;
  background:var(--cream);border:1px solid var(--hairline);border-radius:14px;padding:10px 14px;
  font-size:13px;font-weight:600;line-height:1.3;color:var(--ink);
  transition:transform .15s var(--ease),border-color .15s,background .15s,box-shadow .2s}
.hero-hint:hover{transform:translateY(-1px);border-color:var(--green);background:#fff;box-shadow:var(--shadow)}
.hero-hint svg{width:18px;height:18px;color:var(--green-deep);flex:0 0 auto}


.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-cta .btn{min-height:56px;padding:0 28px;font-size:16px}
.hero .avail{margin-top:9px;font-size:13.5px;color:var(--ink2);font-weight:500}
.trust{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:12px;color:var(--ink2);font-size:13px;font-weight:500}
.trust .t{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:16px;height:16px;color:var(--green)}

/* ── Beta-Warteliste (Hero) — primäre Conversion, solange Store-Links fehlen ── */
.waitlist{margin-top:18px;max-width:460px;background:var(--card);border:1px solid var(--hairline);
  border-radius:18px;padding:15px 16px 13px;box-shadow:var(--shadow)}
.waitlist.pulse{animation:wl-pulse 1.1s var(--ease)}
@keyframes wl-pulse{0%{box-shadow:0 0 0 0 rgba(42,157,102,.45)}100%{box-shadow:0 0 0 16px rgba(42,157,102,0)}}
.wl-lab{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.wl-lab svg{width:17px;height:17px;color:var(--green-deep);flex:0 0 auto;margin-top:1px}
.wl-row{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
.wl-row input{flex:1;min-width:170px;min-height:48px;border-radius:999px;border:1.5px solid var(--hairline);
  background:#fff;padding:0 16px;font-family:var(--body);font-size:15px;color:var(--ink)}
.wl-row input::placeholder{color:var(--ink3)}
.wl-row input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(42,157,102,.16)}
.wl-row .btn{min-height:48px;padding:0 20px;font-size:14.5px}
.wl-note{font-size:11.5px;color:var(--ink2);margin-top:9px}
.wl-msg{display:none;font-size:13px;font-weight:600;margin-top:9px;line-height:1.4}
.wl-msg.ok{display:block;color:var(--green-deep)}
.wl-msg.err{display:block;color:var(--error)}
.waitlist.done .wl-row,.waitlist.done .wl-note,.waitlist.done .wl-opts{display:none}

/* Band-Variante: volle Breite direkt unterm Hero — Copy links, Formular rechts. */
.wl-band{max-width:none;margin-top:0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:18px 44px;border-color:var(--green);
  border-radius:24px;padding:clamp(20px,2.6vw,28px) clamp(20px,3vw,32px);
  box-shadow:0 18px 44px rgba(42,157,102,.14)}
.wl-copy{max-width:44ch}
.wl-copy b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,24px);color:var(--slate);line-height:1.15}
.wl-copy span{display:block;font-size:14.5px;color:var(--ink2);margin-top:7px;line-height:1.45}
.wl-fields{flex:1 1 340px;max-width:520px}
.wl-fields .wl-row{margin-top:0}
.wl-opts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:10px}
.wl-opt{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none}
.wl-opt input{width:17px;height:17px;accent-color:var(--green);cursor:pointer;flex:0 0 auto}
@media(max-width:760px){.wl-band{flex-direction:column;align-items:stretch}.wl-copy{max-width:none}.wl-fields{max-width:none}}

/* ── Fehler-Check im Hero (interaktive Karte) ──────────────────────────── */
.hero-calc{position:relative;width:100%;max-width:452px;margin-left:auto;
  background:var(--card);border:1px solid var(--hairline);border-radius:26px;
  padding:clamp(15px,1.8vw,20px);box-shadow:var(--shadow-lift)}
.hero-calc.attn{animation:wl-pulse 1.1s var(--ease)}
.hero-calc .hc-head{margin-bottom:11px}
.hero-calc .hc-head h3{font-size:clamp(20px,2.3vw,24px);line-height:1.12;margin-top:8px}
.hero-calc .btn{margin-top:11px}
/* Methodik-Ausklapper unter dem CTA. Zugeklappt kostet er eine Zeile statt
   fünf — der Unterschied entscheidet auf 800er-Laptops über den Fold. */
.hc-note{margin-top:8px;font-size:11px;color:var(--ink2);line-height:1.45;text-align:center}
.hc-note>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px;
  font-weight:600;color:var(--ink2);transition:color .15s}
.hc-note>summary::-webkit-details-marker{display:none}
.hc-note>summary::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s var(--ease)}
.hc-note[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.hc-note>summary:hover{color:var(--green-deep)}
.hc-note>p{margin-top:7px}

/* Kurze Viewports (Laptops mit 768–860 px Höhe): Die Fehler-Check-Karte soll
   auch dort komplett über dem Fold stehen — sie ist der Einstiegs-Hook, halb
   abgeschnitten wirkt sie kaputt. Bewusst an die HÖHE gekoppelt (nicht an die
   Breite), denn genau die ist hier knapp; große Schirme behalten den luftigen
   Rhythmus. Gemessen mit web/_measure.html (Karte 854 px → passt sonst nicht). */
@media(min-width:961px) and (max-height:900px){
  /* Unterkante NICHT unter 78 kürzen: Die Nav endet bei 80 px, darunter
     rutscht die Karte hinter die Nav (sie liegt UNTER der Leiste, nicht
     dahinter). Nach oben ist dagegen Luft — 90 lässt spürbaren Abstand,
     ohne die 90-130 px Bodenreserve dieser Stufe zu sprengen (s. u.). Höhe
     wird bei Bedarf unten an der Karte geholt, nicht am Abstand zur Nav. */
  .hero{padding:98px 0 14px}
  .hero-calc{padding:13px 16px}
  .hero-calc .hc-head{margin-bottom:8px}
  .hero-calc .hc-head h3{font-size:20px}
  .hero-calc .btn{margin-top:9px}
  .calc-field{margin-bottom:10px}
  .calc-field .lab{margin-bottom:8px}
  .grade-input button,.grade-input input{min-height:42px}
  .calc-result{margin-top:10px;padding:12px 15px}
  .calc-result .rsum{margin-top:9px;font-size:13px}
  .fq-tier{padding:6px 11px}
  .fq-tier .ft-note{font-size:19px}
  .btn-block{min-height:48px;padding:11px 20px}
}
/* Zweite Stufe für 768er-Laptops: die erste liess dort nur 6 px Luft — zu
   wenig, ein abweichender Font-Fallback allein kippt die Karte wieder raus. */
@media(min-width:961px) and (max-height:800px){
  /* Nur +2 statt +12 wie in der Stufe drüber: die Boden-Polsterung wirkt erst
     NACH der Karte und hilft dem Fold nichts — hier zaehlt einzig, wie weit
     oben die Karte startet. Bei nur ~11 px Bodenreserve verbrennt jedes px
     Zuwachs hier direkt Fold-Puffer. */
  .hero{padding:80px 0 10px}
  .hero-calc{padding:11px 14px}
  .hero-calc .hc-head h3{font-size:18.5px}
  .hero-calc .hc-head{margin-bottom:6px}
  .hero-calc .btn{margin-top:8px}
  .calc-field{margin-bottom:9px}
  .calc-field .lab{margin-bottom:6px}
  .calc-result{margin-top:9px;padding:11px 14px}
  .calc-result .rsum{font-size:12.5px;margin-top:8px;line-height:1.45}
  .fq-tiers{gap:5px}
  .fq-tier{padding:5px 10px}
  .fq-tier .ft-lab{font-size:12px}
  .fq-tier .ft-note{font-size:18px}
  .btn-block{min-height:44px;padding:9px 18px}
}

@media(max-width:960px){
  .hero{padding:90px 0 26px}
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "calc" "bot";row-gap:26px;text-align:center}
  .hero-left{display:contents}
  .hero-top{grid-area:top}
  .hero-calc-col{grid-area:calc}
  .hero-bottom{grid-area:bot}
  .hero .lede{margin:22px auto 0}
  .hero-hint{margin-left:auto;margin-right:auto}
  .hero-calc{margin:0 auto}
  .hero-bottom .hero-cta{justify-content:center}
  .waitlist{margin-left:auto;margin-right:auto;text-align:left}
  .trust{justify-content:center}
  .page-hero{padding:104px 0 14px}
}
/* Schmale Screens: Headline so weit verkleinern, dass sie nie über den Viewport läuft
   (sonst kollabiert das .wrap-Padding und der Fließtext klebt am Rand). */
@media(max-width:470px){.hero h1{font-size:clamp(32px,8.4vw,40px)}}

/* ── Phone frame ───────────────────────────────────────────────────────── */
.phone{position:relative;width:300px;border-radius:46px;background:#0c1410;padding:9px;
  box-shadow:var(--shadow-lift), 0 0 0 1px rgba(20,32,26,.05);z-index:4}
.phone.tilt{transform:rotate(-3deg)}
.phone img{border-radius:38px;width:100%;display:block}
.phone .glare{position:absolute;inset:9px;border-radius:38px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 38%)}

/* ── Sections ──────────────────────────────────────────────────────────── */
.sec{padding:92px 0}
.sec.tight{padding:36px 0}
.sec-head{max-width:680px;margin:0 auto 54px}
.sec-head.left{margin-left:0}
.sec-head h2{font-size:clamp(32px,4vw,50px);margin-top:14px}
.sec-head p{font-size:17.5px;color:var(--ink2);margin-top:16px}
.dark .sec-head p{color:#ffffffb0}

/* ── Platform strip (Marquee) ──────────────────────────────────────────── */
.platforms{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.plat{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:999px;
  border:1.5px solid var(--hairline);background:var(--cream);font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap}
.plat svg{width:18px;height:18px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marquee 21s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── Steps ─────────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--card);border:1px solid var(--hairline);border-radius:22px;padding:30px;box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.step-shot{border-radius:18px;overflow:hidden;background:#0c1410;padding:6px;margin-bottom:20px;box-shadow:var(--shadow)}
.step-shot img{width:100%;height:188px;object-fit:cover;object-position:top center;border-radius:13px;display:block}
/* ── Schritt-Illustrationen (animiert, statt veralteter App-Screenshots) ──
   Verkörpern den Kachelinhalt abstrakt: Scan-Balken übers Papier, wachsende
   Lernfeld-Balken, sich selbst beantwortende Mini-Aufgabe. Loop ~3,6–4s;
   reduced-motion friert auf sinnvollem Endzustand ein (globaler Kill-Block). */
.step-viz{position:relative;height:188px;border-radius:14px;overflow:hidden;margin-bottom:20px;
  background:linear-gradient(160deg,var(--citron),var(--cream));border:1px solid var(--hairline)}
/* 1 · Scannen */
.viz-scan .vz-paper{position:absolute;inset:18px 22px;background:var(--card);border:1px solid var(--hairline);
  border-radius:10px;padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow)}
.vz-line{position:relative;display:block;height:9px;width:var(--w,80%);border-radius:999px;background:var(--butter2)}
.vz-line.mk::after{content:"";position:absolute;left:34%;width:26%;height:100%;border-radius:999px;
  background:var(--error);opacity:.25;animation:vz-mk 3.6s var(--ease) infinite}
.vz-line.mk2::after{left:56%;width:22%;animation-delay:.55s}
@keyframes vz-mk{0%,28%{opacity:.25}40%,88%{opacity:.85}100%{opacity:.25}}
.vz-scanline{position:absolute;left:12px;right:12px;top:-30%;height:44px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(42,157,102,.20) 55%,rgba(42,157,102,.5));
  border-bottom:2.5px solid var(--green);box-shadow:0 0 26px 3px rgba(42,157,102,.45);
  animation:vz-scan 3.6s var(--ease) infinite}
@keyframes vz-scan{0%{top:-30%}62%{top:104%}100%{top:104%}}
/* 2 · Profil */
.viz-chart .vz-bars{position:absolute;left:26px;right:26px;bottom:20px;height:112px;display:flex;align-items:flex-end;gap:12px}
.vz-bar{flex:1;height:var(--h,60%);border-radius:8px 8px 4px 4px;background:var(--green);opacity:.85;
  transform-origin:bottom;transform:scaleY(.12);
  animation:vz-grow .8s var(--ease) var(--d,0s) forwards, vz-breathe 2.8s ease-in-out calc(1s + var(--d,0s)) infinite alternate}
.vz-bar.weak{background:var(--ember);opacity:1}
@keyframes vz-grow{to{transform:scaleY(1)}}
@keyframes vz-breathe{from{transform:scaleY(1)}to{transform:scaleY(.88)}}
.vz-chip{position:absolute;top:16px;left:26px;font-size:11px;font-weight:700;color:#7a4a22;
  background:var(--ember-soft);border:1px solid #ecd0b8;padding:5px 11px;border-radius:999px}
/* 3 · Üben */
.viz-quiz .vz-card{position:absolute;inset:16px 22px;background:var(--card);border:1px solid var(--hairline);
  border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:9px;justify-content:center;box-shadow:var(--shadow)}
.vz-q{font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--slate)}
.vz-gap{display:inline-block;min-width:46px;border-bottom:2.5px dashed var(--ink3);position:relative;font-style:normal}
.vz-gap::after{content:"dass";position:absolute;left:50%;bottom:1px;transform:translateX(-50%);
  color:var(--green-deep);font-size:14px;opacity:0;animation:vz-fill 4s var(--ease) infinite}
@keyframes vz-fill{0%,44%{opacity:0}54%,88%{opacity:1}100%{opacity:0}}
.vz-opt{border:1.5px solid var(--hairline);border-radius:10px;min-height:34px;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink2);background:#fff}
.vz-opt.right{border-color:var(--green);color:var(--green-deep);animation:vz-tap 4s var(--ease) infinite}
@keyframes vz-tap{0%,36%{background:#fff;color:var(--green-deep);transform:none}
  42%{transform:scale(.96)}
  50%,88%{background:var(--green);color:#fff;transform:none}
  100%{background:#fff;color:var(--green-deep)}}

.step .row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.step .n{font-family:var(--display);font-weight:600;font-size:14px;color:#fff;background:var(--slate);
  width:32px;height:32px;border-radius:999px;display:grid;place-items:center;flex:0 0 auto}
.step .si{width:38px;height:38px;border-radius:11px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;flex:0 0 auto}
.step .si svg{width:20px;height:20px}
.step h3{font-size:22px;margin-bottom:9px}
.step p{font-size:15px;color:var(--ink2)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* ── Split feature ─────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split.flip .split-media{order:2}
.shot-card{position:relative;border-radius:26px;padding:18px;background:linear-gradient(160deg,#23323F,#16382B);box-shadow:var(--shadow-lift)}
.shot-card.plain{background:var(--butter2)}
.shot-card .phone{width:280px;margin:0 auto}
/* Hand-gezeichnete Marker-Annotationen (editorial, Stil Wispr Flow): eine
   konsistente Ember-Marker-Sprache + gekritzelte Unterstreichung statt 3 zufälliger
   Sticker-Farben. */
.anno{position:absolute;z-index:7;font-family:var(--body);font-weight:700;font-size:13.5px;line-height:1.15;
  color:#3b2512;background:var(--ember);padding:8px 15px;border-radius:13px 10px 14px 11px;
  box-shadow:0 9px 20px rgba(224,115,59,.30);transform:rotate(-3.5deg)}
.anno::after{content:"";position:absolute;left:8%;right:6%;bottom:-9px;height:9px;pointer-events:none;
  background:center/100% 100% no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 9' fill='none'%3E%3Cpath d='M2 6C20 2 31 7.5 46 4 62 .8 74 7 88 3' stroke='%23C2581F' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
.anno.b{transform:rotate(2.5deg)}
.anno.c{transform:rotate(-1.5deg)}
/* Prozess-Leiste unterm Phone-Mockup: verbundene Schritte statt lose verstreuter
   Sticker (die alte Variante überlappte das Telefon und "Übung erstellt" zeigte
   auf nichts Sichtbares im Screen). In-Fluss, zentriert, nie überlappend. */
.shot-steps{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:7px;margin-top:18px;padding-top:16px;border-top:1px solid #ffffff1f}
.shot-steps span{display:inline-flex;align-items:center;gap:6px;font-family:var(--body);
  font-weight:700;font-size:12px;letter-spacing:.01em;color:#EFE7DC;white-space:nowrap}
.shot-steps i{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:17px;height:17px;border-radius:999px;background:var(--ember);color:#3b2512;
  font-style:normal;font-weight:700;font-size:10.5px}
.shot-steps .ss-sep{color:#ffffff40;font-weight:400}
.split-copy h2{font-size:clamp(28px,3.6vw,42px)}
.split-copy p{font-size:17px;color:var(--ink2);margin-top:16px}
.split-copy .feat{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.split-copy .feat li{list-style:none;display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.split-copy .feat svg{flex:0 0 auto;width:22px;height:22px;color:var(--green);margin-top:1px}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:30px}.split.flip .split-media{order:0}}

/* ── Scan-Demo (USP: Foto → erkannte Lernfelder, live) ──────────────────────
   Linke „Papier"-Spalte mit roten Korrektur-Marken, ein Scan-Balken wandert
   durch; rechts aktivieren sich die Lernfeld-Chips der Reihe nach. Auto-Play
   bei Sichtbarkeit, respektiert prefers-reduced-motion (statischer Endzustand). */
.scan-demo{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(20px,3vw,38px);align-items:stretch;
  background:var(--card);border:1px solid var(--hairline);border-radius:28px;
  padding:clamp(20px,2.6vw,32px);box-shadow:var(--shadow-lift)}
.sd-col{display:flex;flex-direction:column}
.sd-cap{font-size:12.5px;color:var(--ink2);margin-top:13px;display:flex;align-items:center;gap:7px}
.sd-cap svg{width:15px;height:15px;color:var(--green);flex:0 0 auto}

/* Papier */
.sd-paper{position:relative;overflow:hidden;border-radius:18px;flex:1;
  background:repeating-linear-gradient(var(--cream) 0 39px, var(--hairline-soft) 39px 40px);
  border:1px solid var(--hairline);padding:20px 24px 26px}
.sd-paper-head{display:flex;align-items:center;gap:7px;margin-bottom:14px;font-size:12px;color:var(--ink3);font-weight:600}
.sd-paper-head b{margin-left:6px;font-weight:600;color:var(--ink2);font-family:var(--body)}
.sd-dot{width:9px;height:9px;border-radius:999px;background:var(--hairline);flex:0 0 auto}
.sd-lines{position:relative;z-index:2;padding-top:14px;
  font-family:var(--display);font-weight:500;font-size:clamp(16px,1.9vw,20px);line-height:2.0;color:var(--slate)}
.sd-line{position:relative;margin:0}
.sd-line.plain{color:var(--ink3)}
/* Marken */
.mk{position:relative;white-space:nowrap;border-radius:6px}
.mk.lit{animation:mk-flash 1.1s var(--ease)}
@keyframes mk-flash{0%{background:rgba(239,68,68,0)}28%{background:rgba(239,68,68,.20)}100%{background:rgba(239,68,68,0)}}
.mk s{text-decoration:line-through;text-decoration-color:var(--error);text-decoration-thickness:2px;color:var(--ink3)}
.mk u{text-decoration:underline;text-decoration-color:var(--error);text-decoration-thickness:2px;text-underline-offset:3px;color:var(--slate)}
.mk i{position:absolute;left:50%;top:-.96em;transform:translateX(-50%) scale(.4);transform-origin:bottom center;
  font-style:normal;font-size:.62em;font-weight:600;white-space:nowrap;color:var(--green-deep);opacity:0;
  transition:transform .42s var(--ease),opacity .3s}
.mk.lit i{opacity:1;transform:translateX(-50%) scale(1)}
.mk.komma{color:var(--error);font-weight:700;opacity:0;transition:opacity .3s}
.mk.komma.lit{opacity:1}
/* Scan-Balken */
.sd-scanline{position:absolute;left:-1px;right:-1px;top:-56px;height:56px;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(42,157,102,.22) 50%,rgba(42,157,102,.58));
  border-bottom:2.5px solid var(--green);box-shadow:0 0 34px 4px rgba(42,157,102,.55)}
.scan-demo.scanning .sd-scanline{opacity:1;animation:sd-sweep 2.6s var(--ease) forwards}
@keyframes sd-sweep{from{top:-52px}to{top:100%}}

/* Ausgabe (Lernfelder) */
.sd-out{display:flex;flex-direction:column}
.sd-out-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;gap:12px}
.sd-out-head .eyebrow{color:var(--green-deep)}
.sd-count{font-family:var(--display);font-size:14px;color:var(--ink3);white-space:nowrap}
.sd-count b{color:var(--green-deep);font-size:19px}
.sd-fields{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.sd-field{display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:15px;border:1px solid var(--hairline);
  background:var(--cream);opacity:.4;transform:translateY(7px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .3s,box-shadow .3s}
.sd-field.on{opacity:1;transform:none;border-color:var(--green);box-shadow:0 8px 20px rgba(42,157,102,.12)}
.sd-field .fnum{font-family:var(--display);font-weight:600;font-size:14px;color:#fff;background:var(--ink3);
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;transition:background .3s}
.sd-field.on .fnum{background:var(--green)}
.sd-field .ftxt{flex:1;min-width:0}
.sd-field .ftxt b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.sd-field .ftxt small{font-size:12.5px;color:var(--ink2)}
.sd-field .fbadge{font-size:12px;font-weight:700;color:var(--green-deep);background:var(--green-soft);
  padding:4px 9px;border-radius:999px;opacity:0;transform:scale(.7);transition:opacity .3s,transform .3s;flex:0 0 auto}
.sd-field.on .fbadge{opacity:1;transform:none}
.sd-out .btn{margin-top:22px}
@media(max-width:860px){.scan-demo{grid-template-columns:1fr;gap:22px}}

/* ── Highlight cards (Start) ───────────────────────────────────────────── */
.hl{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hlc{position:relative;background:var(--card);border:1px solid var(--hairline);border-radius:22px;padding:30px 26px;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s}
.hlc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.hlc .hi{width:46px;height:46px;border-radius:13px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;margin-bottom:18px}
.hlc .hi svg{width:23px;height:23px}
.hlc h3{font-size:21px;margin-bottom:8px}
.hlc p{font-size:15px;color:var(--ink2)}
.hlc .bn{position:absolute;top:18px;right:22px;font-family:var(--display);font-weight:600;font-size:40px;color:var(--hairline)}
@media(max-width:820px){.hl{grid-template-columns:1fr}}

/* ── Try-it ────────────────────────────────────────────────────────────── */
.try{background:var(--citron);border-radius:32px;padding:clamp(30px,4vw,60px);border:1px solid var(--hairline)}
.try-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center}
.try-copy h2{font-size:clamp(28px,3.6vw,42px)}
.try-copy p{font-size:16.5px;color:var(--ink2);margin-top:14px}
.try-progress{display:flex;gap:7px;margin-top:24px}
.try-progress i{height:6px;flex:1;border-radius:999px;background:#0000000f;transition:background .3s}
.try-progress i.on{background:var(--green)}
.try-progress i.done{background:var(--green-deep)}
.taskcard{background:var(--card);border:1px solid var(--hairline);border-radius:22px;padding:26px;box-shadow:var(--shadow-lift);animation:pop .4s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}}
.task-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--green-deep);background:var(--green-soft);padding:5px 12px;border-radius:999px;margin-bottom:16px}
.sentence{font-family:var(--display);font-weight:600;font-size:25px;line-height:1.35;color:var(--slate)}
.blank{display:inline-block;min-width:54px;text-align:center;border-bottom:2.5px dashed var(--ink3);color:var(--ink3);margin:0 3px}
.blank.filled{border-bottom-color:transparent;color:var(--green-deep)}
.blank.filled-bad{border-bottom-color:transparent;color:var(--error);text-decoration:line-through;text-decoration-thickness:2px}
.answers{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.answer{min-height:56px;border-radius:14px;border:1.5px solid var(--green);background:var(--card);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:20px;display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:transform .1s ease, background .15s, border-color .15s, color .15s}
.answer:hover{background:#fbfaf3}
.answer:active{transform:scale(.98)}
.answer[disabled]{cursor:default}
.answer.correct{background:var(--green);border-color:var(--green);color:#fff}
.answer.reveal-a{background:var(--green-soft);border-color:var(--green);color:var(--green-deep)}
.answer.wrong{background:#FBE3E0;border-color:var(--error);color:var(--error)}
.answer svg{width:18px;height:18px}
.komma-words{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-family:var(--display);font-weight:600;font-size:23px;color:var(--slate)}
.gap{width:22px;height:34px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  color:transparent;transition:background .12s,color .12s;font-size:24px;line-height:1}
.gap:hover{background:#0000000a}
.gap.sel{color:var(--ember);background:var(--card)}
.gap.right{color:var(--green-deep)}
.gap.miss{color:var(--green-deep);background:var(--green-soft)}
.gap.bad{color:var(--error);background:#FBE3E0}
.feedback{margin-top:18px;border-radius:14px;padding:15px 16px;display:flex;gap:12px;align-items:flex-start;border:1px solid;animation:pop .35s var(--ease)}
.feedback.good{background:var(--green-soft);border-color:#cfe3cf}
.feedback.bad{background:#FBE3E0;border-color:#f3cfc9}
.feedback .fi{flex:0 0 auto;width:24px;height:24px;border-radius:999px;display:grid;place-items:center;color:#fff}
.feedback.good .fi{background:var(--green)}.feedback.bad .fi{background:var(--error)}
.feedback .fi svg{width:15px;height:15px}
.feedback b{font-size:14px;color:var(--ink)}.feedback p{font-size:13.5px;color:var(--ink2);margin-top:3px}
.task-foot{margin-top:18px;display:flex;justify-content:space-between;align-items:center;min-height:24px}
.task-foot small{font-size:13px;color:var(--ink2)}
.next-btn{display:none}.next-btn.show{display:inline-flex}
.try-done{text-align:center;padding:14px 4px}
.try-done .big{font-family:var(--display);font-weight:600;font-size:30px;color:var(--slate)}
.try-done p{color:var(--ink2);margin:8px 0 20px}
@media(max-width:840px){.try-grid{grid-template-columns:1fr;gap:28px}}

/* ── Audience switcher ─────────────────────────────────────────────────── */
.dark{background:var(--slate);color:#fff;border-radius:34px;padding:clamp(38px,5vw,72px);position:relative;overflow:hidden}
.dark.forest{background:linear-gradient(165deg,var(--forest),var(--forest2))}
.dark h2,.dark h3{color:#fff}
.aud{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.aud-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;max-width:420px}
.aud-tag{padding:10px 18px;border-radius:999px;border:1.5px solid #ffffff2e;background:transparent;color:#fff;
  font-family:var(--body);font-weight:600;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .1s}
.aud-tag:hover{border-color:#ffffff66}
.aud-tag:active{transform:scale(.97)}
.aud-tag.on{background:var(--cream);color:var(--slate);border-color:var(--cream)}
.aud-panel{margin-top:30px;max-width:440px;animation:pop .35s var(--ease)}
.aud-panel h3{font-size:24px}
.aud-panel p{color:#ffffffc0;margin-top:10px;font-size:16px}
.aud-stage{display:flex;justify-content:center}
.aud-stage .phone img{transition:opacity .3s}
@media(max-width:880px){.aud{grid-template-columns:1fr;gap:30px}.aud-stage{order:-1}}

/* ── Gallery ───────────────────────────────────────────────────────────── */
/* Hand-gezeichnetes Strahlen-Doodle über Headlines (editorial, Stil Wispr Flow). */
.rays{display:block;width:104px;height:46px;margin:0 0 6px;color:var(--green-deep)}
.sec-head.center .rays,.final .rays{margin-left:auto;margin-right:auto}
.dark .rays,.final .rays{color:#7BD3A4}
.rays svg{width:100%;height:100%;display:block}

.gal{display:flex;gap:24px;overflow-x:auto;padding:8px 4px 22px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.gal::-webkit-scrollbar{height:8px}.gal::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:999px}
.gal figure{scroll-snap-align:center;flex:0 0 auto}
.gal .phone{width:248px;transition:transform .25s var(--ease)}
.gal figure:hover .phone{transform:translateY(-6px)}
.gal figcaption{text-align:center;margin-top:14px;font-size:13.5px;color:var(--ink2);font-weight:500;max-width:248px;margin-left:auto;margin-right:auto}

/* ── Lernfelder ────────────────────────────────────────────────────────── */
.fields{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;align-items:start}
.field{background:var(--card);border:1px solid var(--hairline);border-radius:16px;padding:18px 15px;transition:transform .15s var(--ease), box-shadow .2s, border-color .2s}
.field:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--green)}
.field .fn{font-family:var(--display);font-weight:600;font-size:14px;color:var(--green);margin-bottom:8px}
.field b{font-size:14px;color:var(--ink);font-weight:600;display:block;line-height:1.25}
@media(max-width:920px){.fields{grid-template-columns:repeat(2,1fr)}}

/* ── Stats band ────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .v{font-family:var(--display);font-weight:600;font-size:clamp(36px,4.4vw,54px);color:#fff;line-height:1}
.dark .stat .l{color:#ffffffa6;font-size:14px;margin-top:8px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);gap:30px}}

/* ── Testimonials ──────────────────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{background:var(--card);border:1px solid var(--hairline);border-radius:20px;padding:26px;box-shadow:var(--shadow);transition:transform .2s var(--ease)}
.quote:hover{transform:translateY(-3px)}
.quote .stars{color:var(--ember);font-size:14px;letter-spacing:2px;margin-bottom:12px}
.quote p{font-size:15.5px;color:var(--ink);font-family:var(--display);font-weight:500;line-height:1.5}
.quote .who{display:flex;align-items:center;gap:11px;margin-top:18px}
.quote .av{width:38px;height:38px;border-radius:999px;background:var(--slate);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:600}
.quote .who b{font-size:14px;display:block}.quote .who small{font-size:12.5px;color:var(--ink3)}
@media(max-width:820px){.quotes{grid-template-columns:1fr}}

/* ── „Love letters" — Testimonials als Karten-Scroll mit überlappendem Avatar
   (editorial, Stil Wispr Flow). Cream-Karten auf dunkler Sektion. ────────── */
/* Bewusst OHNE Rand-Maske: der Fade legte eine dunkle Schmiere auf die
   äußeren Karten — harte Kante am Containerrand liest sich sauberer. */
.letters{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:40px 6px 10px;margin:6px -10px 0}
.letters::-webkit-scrollbar{height:0}
.letter{position:relative;flex:0 0 300px;scroll-snap-align:center;background:var(--cream);border:1px solid #00000010;
  border-radius:24px;padding:44px 26px 26px;margin-top:24px;box-shadow:var(--shadow-lift);
  transition:transform .25s var(--ease)}
.letter:hover{transform:translateY(-5px)}
.lt-av{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:999px;
  display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:23px;color:#fff;
  border:4px solid var(--cream);box-shadow:0 8px 20px rgba(20,32,26,.22)}
.lt-av.a1{background:var(--slate)} .lt-av.a2{background:var(--green-deep)} .lt-av.a3{background:var(--ember);color:#2a1708}
.lt-av.a4{background:var(--lilac-deep)} .lt-av.a5{background:var(--forest)}
.letter blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:16.5px;line-height:1.55;color:var(--slate);text-align:center}
.letter figcaption{text-align:center;margin-top:16px}
.letter figcaption b{display:block;font-size:14px;color:var(--ink)}
.letter figcaption small{font-size:12.5px;color:var(--ink2)}
.letters-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;color:#ffffffa8;font-size:12.5px;font-weight:500}
.letters-hint svg{width:16px;height:16px}

/* ── Story / Timeline ──────────────────────────────────────────────────── */
.story{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px}
.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--hairline)}
.tl{position:relative;padding-bottom:30px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:-34px;top:3px;width:20px;height:20px;border-radius:999px;background:var(--cream);border:2.5px solid var(--green)}
.tl.now::before{background:var(--green)}
.tl .yr{font-family:var(--display);font-weight:600;font-size:15px;color:var(--green-deep)}
.tl h4{font-size:19px;margin:4px 0 6px;color:var(--slate);font-family:var(--display);font-weight:600}
.tl p{font-size:15px;color:var(--ink2)}
@media(max-width:880px){.story{grid-template-columns:1fr;gap:28px}}

/* ── Principles ────────────────────────────────────────────────────────── */
.princ{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
.pr{background:#ffffff0a;border:1px solid #ffffff18;border-radius:18px;padding:26px;display:flex;gap:16px;transition:transform .2s var(--ease),background .2s}
.pr:hover{transform:translateY(-3px);background:#ffffff12}
.pr .pi{flex:0 0 auto;width:46px;height:46px;border-radius:13px;background:#ffffff12;display:grid;place-items:center;color:#7BD3A4}
.pr .pi svg{width:23px;height:23px}
.pr h3{color:#fff;font-size:18px;margin-bottom:5px}
.pr p{color:#ffffffab;font-size:14px}
@media(max-width:820px){.princ{grid-template-columns:1fr}}

/* ── Pricing ───────────────────────────────────────────────────────────── */
.toggle{display:inline-flex;background:var(--card);border:1px solid var(--hairline);border-radius:999px;padding:5px;gap:4px;margin-top:22px}
.toggle button{border:none;background:transparent;font-family:var(--body);font-weight:600;font-size:14px;color:var(--ink2);
  padding:10px 22px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s;display:flex;align-items:center;gap:8px}
.toggle button.on{background:var(--slate);color:#fff}
.save-badge{font-size:10px;font-weight:700;background:var(--ember);color:#fff;padding:2px 7px;border-radius:999px}
.toggle button.on .save-badge{background:#ffffff26}
.web-note{display:inline-flex;align-items:center;gap:9px;margin-top:18px;background:var(--green-soft);border:1px solid #cfe3cf;
  color:var(--green-deep);font-weight:600;font-size:13.5px;padding:9px 16px;border-radius:999px}
.web-note svg{width:17px;height:17px}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;align-items:stretch}
.plan .ptag{display:inline-block;vertical-align:middle;margin-left:6px;font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);background:var(--green-soft);padding:4px 9px;border-radius:999px}
@media(max-width:1100px){.plans{grid-template-columns:repeat(2,1fr)}}
.plan{background:var(--card);border:1px solid var(--hairline);border-radius:22px;padding:28px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.plan.featured{border-color:var(--green);box-shadow:0 22px 50px rgba(42,157,102,.18);position:relative}
.plan.featured::before{content:"Beliebteste Wahl";position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:6px 15px;border-radius:999px;white-space:nowrap}
.plan .pname{font-family:var(--display);font-weight:600;font-size:23px;color:var(--slate)}
.plan .ptiny{font-size:13px;color:var(--ink2);margin-top:4px;min-height:38px}
.price{display:flex;align-items:baseline;gap:6px;margin:18px 0 4px}
.price{flex-wrap:wrap}
.price .amt{font-family:var(--display);font-weight:600;font-size:clamp(38px,3.2vw,48px);color:var(--slate);line-height:1;white-space:nowrap}
.price .per{font-size:14px;color:var(--ink2);font-weight:500}
.price-store{font-size:13px;color:var(--ink3);min-height:20px}
.price-store s{color:var(--ink3)}.price-store b{color:var(--ember);font-weight:600}
.plan ul{list-style:none;margin:22px 0;display:flex;flex-direction:column;gap:11px;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink)}
.plan li svg{flex:0 0 auto;width:18px;height:18px;color:var(--green);margin-top:1px}
.plan li.off{color:var(--ink3)}.plan li.off svg{color:var(--ink3)}
.plan .pfoot{font-size:12px;color:var(--ink3);text-align:center;margin-top:12px;min-height:16px}
@media(max-width:640px){.plans{grid-template-columns:1fr;max-width:430px;margin-left:auto;margin-right:auto}}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{max-width:780px;margin:0 auto}
.qa{border-bottom:1px solid var(--hairline)}
.qa summary{list-style:none;cursor:pointer;padding:23px 4px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:600;font-size:17px;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{flex:0 0 auto;width:27px;height:27px;border-radius:999px;border:1.5px solid var(--hairline);display:grid;place-items:center;transition:transform .2s, background .2s, border-color .2s, color .2s;color:var(--ink2)}
.qa[open] summary .pm{transform:rotate(45deg);background:var(--slate);border-color:var(--slate);color:#fff}
.qa .ans{padding:0 4px 23px;color:var(--ink2);font-size:15px;max-width:66ch}

/* ── Fehler-Check / Notenrechner (im Hero wiederverwendet) ─────────────── */
.calc-field{margin-bottom:13px}
.calc-field .lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.calc-field .lab b{font-size:14.5px;font-weight:600;color:var(--ink)}
.calc-field .lab .hint{font-size:12.5px;color:var(--ink2)}
.calc-field .lab .val{font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--green-deep)}

.grade-input{display:inline-flex;align-items:stretch;border:1.5px solid var(--hairline);border-radius:14px;overflow:hidden}
.grade-input button{width:50px;min-height:48px;border:none;background:var(--cream);color:var(--slate);font-size:22px;line-height:1;cursor:pointer;transition:background .15s}
.grade-input button:hover{background:var(--green-soft)}
.grade-input button:active{background:var(--green);color:#fff}
.grade-input input{width:84px;min-height:48px;border:none;border-left:1.5px solid var(--hairline);border-right:1.5px solid var(--hairline);
  text-align:center;font-family:var(--display);font-weight:600;font-size:22px;color:var(--slate);background:#fff}
.grade-input input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--green),0 0 0 4px rgba(42,157,102,.16)}

.calc-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;background:var(--hairline);outline:none;margin:6px 0 0}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:999px;background:var(--green);
  border:3px solid #fff;box-shadow:0 3px 10px rgba(42,157,102,.4);cursor:pointer;transition:transform .1s}
.calc-range::-webkit-slider-thumb:hover{transform:scale(1.09)}
.calc-range::-moz-range-thumb{width:30px;height:30px;border-radius:999px;background:var(--green);border:3px solid #fff;box-shadow:0 3px 10px rgba(42,157,102,.4);cursor:pointer}
.calc-scale{display:flex;justify-content:space-between;margin-top:9px;font-size:11.5px;color:var(--ink2)}

.calc-result{margin-top:13px;background:var(--slate);border-radius:18px;padding:14px 18px;color:#fff;overflow:hidden}
.calc-result .rl{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ffffff8c}
.calc-result .rrow{display:flex;align-items:flex-end;gap:14px;margin-top:10px;flex-wrap:wrap}
.calc-result .from{font-family:var(--display);font-size:24px;color:#ffffff5c;text-decoration:line-through;text-decoration-color:#ffffff3a}
.calc-result .to{font-family:var(--display);font-weight:600;font-size:clamp(40px,5.5vw,50px);line-height:.85;color:#fff}
/* Gewinn-Frame: das Delta zeigt das Potenzial nach oben — grün. */
.calc-result .delta{display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;font-weight:700;font-size:13px;padding:7px 13px;border-radius:999px;margin-bottom:4px}
.calc-result .delta svg{width:14px;height:14px}
.calc-result .rsum{margin-top:11px;font-size:14px;color:#ffffffcf;line-height:1.55}
.calc-result .rsum b{color:#fff;font-weight:600}
.calc-result.clean .to{color:#7BD3A4}

/* Fehler-Check: drei feste Abzugs-Stufen (1/3, 2/3, 3/3 Notenpunkt) statt
   einer einzelnen Schätzzahl — zeigt die Rechnung, nicht nur ein Ergebnis. */
.fq-tiers{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.fq-tier{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;background:#ffffff0d;transition:background .2s,opacity .2s}
.fq-tier .ft-frac{font-family:var(--display);font-weight:600;font-size:18px;color:#fff;min-width:34px}
.fq-tier .ft-lab{flex:1;font-size:12.5px;color:#ffffffa8;line-height:1.3}
.fq-tier .ft-note{font-family:var(--display);font-weight:600;font-size:21px;color:#fff}
.fq-tier.hit{background:var(--green)}
.fq-tier.hit .ft-lab{color:#ffffffe6}
.calc-result.clean .fq-tier.hit{background:var(--green)}
.fq-tiers.dim,.fq-tier.dim{opacity:.5}

/* ── Brotkrumen ──
   Ebenfalls bislang nur lokal je Wissen-Seite definiert (siehe Prose-Hinweis
   direkt darunter) — hier global für dieselbe Navigations-Optik. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13.5px;color:var(--ink3);margin-bottom:20px}
.crumbs a{color:var(--ink2);transition:color .15s}
.crumbs a:hover{color:var(--green-deep)}
.crumbs [aria-current]{color:var(--ink3)}

/* Sticky-Variante: bleibt beim Scrollen sichtbar direkt unter der Hauptnav —
   für lange, interaktive Rechner-Seiten, damit „einen Schritt zurück" nie
   erst Hochscrollen erfordert. Bewusst eine eigene Klasse statt .crumbs
   global zu ändern, sonst würden auch alle Wissen-Seiten sticky werden. */
.crumbs-sticky{position:sticky;top:92px;z-index:55;width:fit-content;
  background:rgba(250,247,234,.92);backdrop-filter:saturate(150%) blur(10px);
  border:1px solid var(--hairline);border-radius:999px;padding:10px 18px;
  box-shadow:0 6px 20px rgba(20,32,26,.07)}

/* ── Fließtext (Prose) ──
   Bislang nur lokal je Wissen-Seite definiert; hier global, weil die
   Notenrechner-Seiten dieselbe Erklärtext-Optik brauchen (kein Duplikat je Seite). */
.prose{max-width:66ch;color:var(--ink2);font-size:16.5px}
.prose p{margin:0 0 15px}
.prose p:last-child{margin-bottom:0}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.prose ul{margin:0 0 15px;padding-left:20px}
.prose li{margin-bottom:7px}

/* ── Notenrechner Plus (eigenständige Rechner-Unterseiten /notenrechner/…) ──
   Baut auf denselben Bausteinen wie der Hero-Fehler-Check (.calc-field,
   .grade-input, .calc-range) auf. Ergänzt: Fach-Zeilen (Zeugnisdurchschnitt),
   Schwellentabelle (Punkte-in-Noten, druckbar), Sprachanteil-Plus-Panel
   (alle drei Rechner), Bundesland-Hinweis, Teilen-Karte. ─────────────────── */

.rp-modewrap{display:flex;justify-content:flex-end;margin-bottom:14px}

/* Fach-Zeilen (Zeugnisdurchschnitt): Name, Note/Punkte, Gewichtung, Entfernen */
.gr-rows{display:flex;flex-direction:column;gap:10px;margin:20px 0}
.gr-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:10px;align-items:center;
  background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:8px 10px 8px 16px}
.gr-name{border:none;background:transparent;font-family:var(--body);font-weight:600;font-size:14.5px;
  color:var(--ink);min-width:0;width:100%;padding:8px 0}
.gr-name:focus{outline:none}
.gr-name::placeholder{color:var(--ink3);font-weight:500}
.gr-weight{display:flex;border:1.5px solid var(--hairline);border-radius:999px;overflow:hidden;flex:0 0 auto}
.gr-weight button{padding:8px 13px;border:none;background:transparent;font-family:var(--body);font-size:12px;
  font-weight:700;color:var(--ink2);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.gr-weight button.on{background:var(--slate);color:#fff}
.gr-remove{width:34px;height:34px;border-radius:999px;border:1px solid var(--hairline);background:transparent;
  color:var(--ink3);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s;flex:0 0 auto}
.gr-remove:hover{background:#FBE3E0;color:var(--error);border-color:#f3cfc9}
.gr-remove svg{width:16px;height:16px}
.gr-row .grade-input{flex:0 0 auto}
.gr-row .grade-input input{width:64px;min-height:40px;font-size:16px}
.gr-row .grade-input button{width:36px;min-height:40px;font-size:17px}
.gr-addrow{margin-top:2px}

/* Sprachanteil-Plus-Panel: erscheint NACH dem Ergebnis, eigener Abschnitt.
   Startwert immer 0 — der Nutzer stellt die Annahme selbst ein (siehe JS).
   Kein Produktname, kein Link, kein Logo in diesem Block. */
.plus-block{margin-top:36px;background:var(--citron);border:1px solid var(--hairline);
  border-radius:26px;padding:clamp(24px,3.4vw,38px)}
.plus-block .eyebrow{color:var(--forest)}
.plus-block h3{font-size:clamp(20px,2.5vw,26px);margin:8px 0 20px;max-width:26ch}
.plus-block .calc-field{margin-bottom:6px}
.plus-result{margin-top:18px;font-family:var(--display);font-weight:500;
  font-size:clamp(18px,2.3vw,23px);color:var(--slate);line-height:1.45;max-width:56ch}
.plus-result b{color:var(--green-deep);font-weight:600}
.plus-fine{margin-top:12px;font-size:12.5px;color:var(--ink3);max-width:60ch}

/* Schwellentabelle (Punkte-in-Noten) — druckbar */
.thresh-wrap{margin-top:26px;overflow-x:auto}
.thresh-table{width:100%;border-collapse:collapse;font-size:15px}
.thresh-table th{text-align:left;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);font-weight:700;padding:0 16px 10px 0;border-bottom:1px solid var(--hairline)}
.thresh-table td{padding:11px 16px 11px 0;border-bottom:1px solid var(--hairline-soft);color:var(--ink2)}
.thresh-table tr.hit td{color:var(--ink);font-weight:700;background:var(--green-soft)}
.thresh-table tr.hit td:first-child{border-radius:10px 0 0 10px}
.thresh-table tr.hit td:last-child{border-radius:0 10px 10px 0}
.thresh-foot{display:flex;justify-content:flex-end;margin-top:12px}

/* Benutzerdefinierte Notenschwellen */
.custom-thresh{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:12px;margin-top:16px}
.custom-thresh label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink2);font-weight:600}
.custom-thresh input{min-height:42px;border-radius:10px;border:1.5px solid var(--hairline);text-align:center;
  font-family:var(--display);font-weight:600;font-size:16px;color:var(--slate);background:#fff}
.custom-thresh input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(42,157,102,.14)}

/* Bundesland-/Regel-Hinweis (rechtlich verbindlich auf allen 3 Rechnern) */
.landhint{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--hairline);
  border-left:4px solid var(--ember);border-radius:14px;padding:16px 18px;margin-top:24px;font-size:14px;color:var(--ink2)}
.landhint svg{flex:0 0 auto;width:20px;height:20px;color:var(--ember);margin-top:1px}
.landhint a{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}

/* Teilen-Reihe (Bild speichern) */
.share-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

/* Rechner-Übersichtsseite: 3 Werkzeug-Karten (nutzt .hl/.hlc aus Highlights) */
.rp-note{font-size:13px;color:var(--ink2);margin-top:6px}

@media(max-width:640px){
  .gr-row{grid-template-columns:1fr;justify-items:stretch}
  .gr-row .grade-input,.gr-weight,.gr-remove{justify-self:start}
}

/* Druckansicht der Schwellentabelle: Lehrkräfte drucken nur die Tabelle. */
@media print{
  body *{visibility:hidden}
  .thresh-wrap,.thresh-wrap *{visibility:visible}
  .thresh-wrap{position:absolute;left:0;top:0;width:100%;margin:0}
  .thresh-foot{display:none}
}

/* ── Final CTA ─────────────────────────────────────────────────────────── */
.final{background:linear-gradient(165deg,#1B4736,var(--forest2));border-radius:36px;color:#fff;
  padding:clamp(46px,6vw,86px);text-align:center;position:relative;overflow:hidden}
.final h2{color:#fff;font-size:clamp(34px,4.6vw,58px)}
.final p{color:#ffffffc4;font-size:18px;margin:18px auto 32px;max-width:48ch}
.final .news{margin:0 auto;max-width:460px;justify-content:center}
.final .news button{min-height:46px}

/* ── Bubble-Glow: große, träge treibende Kreise auf dunklen Bannern ──────
   Opt-in-Klasse (.banner-glow), NICHT an .dark/.final gekoppelt — nur dort
   angehängt, wo es explizit gewünscht ist. Bewusst sehr langsam (20-30s) und
   nur Transform (kein Layout-Trigger) für „gelassene" statt hektische
   Bewegung. Inhalt braucht KEINE eigene position/z-index-Angabe: die
   Geschwister-Regel unten hebt alles außer .bg-bubbles automatisch drüber. */
.banner-glow{position:relative}
.banner-glow>*:not(.bg-bubbles){position:relative;z-index:1}
.bg-bubbles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-bubbles span{position:absolute;border-radius:50%;opacity:.28;filter:blur(2px);
  background:radial-gradient(circle at 35% 32%,var(--bb-c,var(--green)) 0%,transparent 72%);
  animation:bb-float var(--bb-dur,24s) ease-in-out infinite alternate;
  animation-delay:var(--bb-delay,0s)}
.bg-bubbles span:nth-child(1){width:38vw;max-width:420px;aspect-ratio:1;top:-14%;left:-8%;--bb-dur:26s}
.bg-bubbles span:nth-child(2){width:24vw;max-width:260px;aspect-ratio:1;bottom:-16%;right:4%;--bb-dur:20s;--bb-delay:-7s;--bb-c:var(--citron)}
.bg-bubbles span:nth-child(3){width:17vw;max-width:190px;aspect-ratio:1;top:18%;right:-6%;--bb-dur:17s;--bb-delay:-3s}
@keyframes bb-float{
  /* 2026-08-31: erste Fassung bewegte nur 3.5%/-3% — bei 190-420px großen
     Kreisen macht das 5-15px, über einen 17-26s-Zyklus praktisch unsichtbar
     (per CDP mit echten 12 Realsekunden nachgemessen, nicht nur geschätzt).
     16%/-13% ergibt 30-70px — bei dieser Zykluslänge klar wahrnehmbar,
     aber immer noch trägel, kein Wummern.
     Nachgezogen auf 21%/-17% + etwas mehr Scale-Hub — spürbar lebendiger,
     Dauer/Easing unverändert, damit es träge bleibt statt hektisch zu werden. */
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(21%,-17%) scale(1.17)}
}
@media(prefers-reduced-motion:reduce){.bg-bubbles span{animation:none}}

/* ── Footer ────────────────────────────────────────────────────────────── */
footer{background:var(--slate);color:#fff;padding:64px 0 36px;margin-top:96px;position:relative;overflow:hidden}
/* Marken-Wasserzeichen: rechts angeschnitten, sehr ruhig, rein dekorativ */
.foot-watermark{position:absolute;right:1%;bottom:-12%;height:126%;width:auto;opacity:.085;
  pointer-events:none;user-select:none;z-index:0}
@media (max-width:860px){.foot-watermark{right:-16%;height:90%;opacity:.05}}
.foot-grid{position:relative;z-index:1;display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.foot-brand{max-width:300px}
.foot-brand .wordmark{color:#fff}
.foot-brand .logo{background:var(--butter);border-radius:10px;padding:5px 8px;box-sizing:content-box;height:30px}
.foot-brand p{color:#ffffffa0;font-size:13.5px;margin-top:14px}
.news{margin-top:20px;display:flex;gap:8px;max-width:320px;flex-wrap:wrap}
.news .wl-msg{flex-basis:100%;margin:2px 2px 0}
.news .wl-msg.ok{color:#7BD3A4}
.news .wl-msg.err{color:#F1A9A0}
.news input{flex:1;min-height:46px;border-radius:12px;border:1px solid #ffffff26;background:#ffffff0d;color:#fff;padding:0 14px;font-family:var(--body);font-size:14px}
.news input::placeholder{color:#ffffff66}
.news button{min-height:46px;padding:0 16px;border-radius:12px;border:none;background:var(--green);color:#fff;font-weight:600;cursor:pointer;transition:background .2s}
.news button:hover{background:var(--green-deep)}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.fcol h5{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#ffffff70;margin-bottom:14px;font-weight:700}
.fcol a{display:block;color:#ffffffbe;font-size:14px;margin-bottom:11px;transition:color .15s}
.fcol a:hover{color:#fff}
.foot-legal{position:relative;z-index:1;margin-top:44px;padding-top:24px;border-top:1px solid #ffffff1a;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#ffffff70;font-size:13px}

/* ── Fokus-Sichtbarkeit (A11y, Tastatur-Navigation) ────────────────────────
   Sichtbarer Ring nur bei Tastatur-Fokus (:focus-visible), nicht bei Maus-Klick.
   Grün passt auf helle wie dunkle Sektionen. */
:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:8px}
.btn:focus-visible,.store:focus-visible,.pillbtn:focus-visible,.aud-tag:focus-visible,
.answer:focus-visible,.toggle button:focus-visible{outline-offset:4px}
.nav-links a:focus-visible,.drawer-panel a:focus-visible,.fcol a:focus-visible,
.qa summary:focus-visible{outline-offset:2px}
.grade-input input:focus-visible{outline:none}

/* ── Reveal-on-scroll (gestaffelt) ─────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
[data-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(2){transition-delay:.08s}
[data-stagger].in>*:nth-child(3){transition-delay:.16s}
[data-stagger].in>*:nth-child(4){transition-delay:.24s}
[data-stagger].in>*:nth-child(5){transition-delay:.32s}

/* ════════════════════════════════════════════════════════════════════════
   INTERAKTIONS-SCHICHT — lebendiger Hero, 3D-Tilt + Cursor-Spotlight,
   magnetische Buttons, Scroll-Fortschritt, gezeichnete Unterstreichung.
   Logik in chrome.js. Bricht sauber zu statisch bei reduced-motion herunter.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Scroll-Fortschritts-Leiste ────────────────────────────────────────── */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--green) 0%,var(--green-deep) 38%,var(--ember) 100%);pointer-events:none;will-change:transform}

/* ── Lebendiger Hero: Papier-Körnung ──────────────────────────────────────
   Die frühere Aurora (3 verwischte Gradient-Kreise) ist raus: widersprach der
   eigenen Gradient-Slop-Leitplanke oben in dieser Datei und war ein
   generisches SaaS-Hero-Muster (Audit 2026-08-22). Papier-Körnung bleibt,
   passt zum „Klausur"-Bildmotiv der Seite. */
.hero-aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ha-grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Gezeichnete Unterstreichung (Rotstift-Sprache) — zeichnet sich beim Laden.
   Enthüllung per clip-path statt stroke-dasharray: Die Dash-Rechnung war die
   Fehlerquelle der beiden Vorgänger-Versuche. Grund ist die Kombination aus
   preserveAspectRatio="none" (SVG wird horizontal gestreckt) und
   vector-effect:non-scaling-stroke — damit gilt das Dash-Muster im BILDSCHIRM-
   raum, die Pfadlänge (pathLength wie auch getTotalLength) aber im Nutzer-
   koordinatensystem. Jeder feste Wert ist deshalb bei irgendeiner Fensterbreite
   falsch: zu kurz → Strich endet mittendrin, zu lang → das Muster wiederholt
   sich als mehrere Striche. clip-path kennt keine Länge, sondern schiebt nur
   eine Kante über die fertige Form: breitenunabhängig und ohne Kopplung an ein
   HTML-Attribut (die letzte Fassung brach, sobald CSS und HTML aus verschiedenen
   Ständen kamen — z. B. bei gecachter CSS nach einem Deploy). */
.hero h1 .a2{position:relative;display:inline-block}
.scribble{position:absolute;left:-1.5%;bottom:-.30em;width:103%;height:.40em;overflow:visible;color:var(--ember);pointer-events:none;
  clip-path:inset(0 100% 0 0);animation:scribble-draw .5s var(--ease) .15s forwards}
.scribble path{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* Rechts über den Rand hinaus freigeben, sonst kappt der Clip die runde
   Strichkappe am Kurvenende (overflow:visible lässt das zu). */
@keyframes scribble-draw{to{clip-path:inset(0 -4% 0 0)}}

/* ── 3D-Tilt-Karten + Cursor-Spotlight ──
   chrome.js liefert --rx/--ry (Kippung) und --mx/--my (Lichtposition). Das
   Spotlight liegt auf ::after (::before ist bei .plan.featured belegt). ───── */
/* Bewusst nur auf .hlc (Highlights — der "das ist Schreibfit"-Moment):
   vorher einheitlich auf 5 Kartentypen zugleich, las sich dadurch als
   generischer Hover-Effekt statt als Hervorhebung (Audit 2026-08-22). */
.hlc[data-tilt]{position:relative;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0));
  transform-style:preserve-3d;transition:transform .45s var(--ease),box-shadow .3s;will-change:transform}
.hlc[data-tilt].tilting{--lift:-7px;transition:transform .12s linear,box-shadow .3s}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .35s var(--ease);
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(42,157,102,.14),transparent 60%)}
[data-tilt].tilting::after{opacity:1}
[data-tilt]>*{position:relative;z-index:1}

/* ── Magnetische Elemente ── (Transform kommt inline aus chrome.js) */
[data-magnetic]{transition:transform .25s var(--ease)}

/* ── Interaktiver Schnell-Test (Demo-Block, citron) ───────────────────────
   Farbige, asymmetrische Sektion gegen die Butter-Monotonie: links ein
   Vorher/Nachher-Schieber über einer Klausur, rechts ein antippbares Quiz
   mit Sofort-Feedback. Großes „?" als dekorative Tiefe. ────────────────── */
.tryout{position:relative;overflow:hidden;background:var(--citron);border:1px solid var(--hairline);
  border-radius:34px;padding:clamp(26px,4vw,56px)}
.tryout::before{content:"?";position:absolute;right:1%;bottom:-15%;z-index:0;font-family:var(--display);font-weight:600;
  font-size:clamp(260px,38vw,440px);line-height:.7;color:#1F2E3C0a;pointer-events:none}
.tryout-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,3.5vw,48px);align-items:center}
.tryout-intro{max-width:42ch;margin-bottom:22px}
.tryout-intro h2{font-size:clamp(28px,3.6vw,44px)}
.tryout-intro p{font-size:16.5px;color:var(--ink2);margin-top:14px}
@media(max-width:880px){.tryout-grid{grid-template-columns:1fr;gap:30px}}

/* Vorher/Nachher-Vergleich: Toggle statt Wisch-Regler (Sätze sind unterschiedlich
   lang, ein horizontaler Clip riss mitten im Satz und legte mal die eine, mal die
   andere Version nur teilweise frei). Beide Zustände sind jetzt immer vollständig,
   ein Klick blendet zwischen ihnen um — kein Zustand kann "halb" oder falsch beschriftet sein. */
.ba{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lift);
  border:1px solid var(--hairline);background:var(--card)}
.ba-spacer{display:block;width:100%;padding-top:60%}
.ba-pane{position:absolute;inset:0;opacity:0;transition:opacity .32s var(--ease);pointer-events:none}
.ba-pane.on{opacity:1;pointer-events:auto}
.ba-paper{position:absolute;inset:0;padding:22px clamp(18px,2.8vw,26px) 18px;
  background:repeating-linear-gradient(var(--cream) 0 33px,var(--hairline-soft) 33px 34px);
  font-family:var(--display);font-weight:500;font-size:clamp(13.5px,1.6vw,17.5px);line-height:34px;color:var(--slate)}
.ba-after .ba-paper{background:repeating-linear-gradient(#FFFFFF 0 33px,#EAF1E2 33px 34px)}
.ba-paper p{margin:0}
.ba-h{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.ba-stamp{position:absolute;right:16px;bottom:8px;font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,32px);transform:rotate(-7deg)}
.ba-before .ba-stamp{color:var(--error)}
.ba-after .ba-stamp{color:var(--green-deep)}
.ba-before .err{color:var(--error);text-decoration:underline wavy var(--error);text-decoration-thickness:2px;text-underline-offset:3px}
.ba-after .fix{color:var(--green-deep);font-weight:600}

/* Mini-Quiz: Fortschrittspunkte (Karte selbst nutzt .taskcard/.answer/.feedback) */
.quiz-dots{display:flex;gap:7px}
.quiz-dots i{width:8px;height:8px;border-radius:999px;background:#0000001a;transition:background .3s,transform .3s}
.quiz-dots i.on{background:var(--green);transform:scale(1.25)}
.quiz-dots i.done{background:var(--green-deep)}
.quiz-dots i.bad{background:var(--error)}
.quiz-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}

/* ── Lernfelder als ausklappbare Kacheln ──────────────────────────────────
   <details>-basiert (zugänglich, JS-frei). Klick öffnet Beispiel + Häufigkeit. */
details.field{padding:0;overflow:hidden}
details.field[open]{border-color:var(--green);box-shadow:var(--shadow)}
details.field:hover{transform:none;box-shadow:var(--shadow);border-color:var(--green)}
details.field>summary{list-style:none;cursor:pointer;padding:17px 44px 17px 15px;position:relative}
details.field>summary::-webkit-details-marker{display:none}
details.field>summary:focus-visible{outline:2.5px solid var(--green);outline-offset:2px;border-radius:14px}
.field-pm{position:absolute;top:15px;right:13px;width:23px;height:23px;border-radius:999px;border:1.5px solid var(--hairline);
  display:grid;place-items:center;color:var(--ink2);transition:transform .25s var(--ease),background .2s,border-color .2s,color .2s}
.field-pm svg{width:12px;height:12px}
details.field[open] .field-pm{transform:rotate(45deg);background:var(--green);border-color:var(--green);color:#fff}
.field-detail{padding:0 15px 15px;font-size:12.5px;color:var(--ink2);line-height:1.5;animation:pop .28s var(--ease)}
.field-detail .field-eg{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}
.field-stat{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.02em;
  color:var(--green-deep);background:var(--green-soft);padding:4px 11px;border-radius:999px}
.field-stat::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--green)}
/* Links in den Wissen-Katalog — die Kachel erklärt nicht, sie führt hin. */
.field-lnk{display:block;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--green-deep);
  text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:3px;transition:text-decoration-color .15s}
.field-lnk:hover{text-decoration-color:var(--green)}
.field-soon{display:block;margin-top:8px;font-size:12px;font-style:italic;color:var(--ink3)}

/* ── Lernfeld-Kacheln: richtungsbewusstes Ausklappen (Desktop, 5×2-Grid) ──
   Das Detail wird als Overlay aus dem Fluss genommen → jede Kachel behält ihre
   Höhe, keine Reihe schiebt die andere weg. Obere Reihe (1–5) öffnet nach oben,
   untere Reihe (6–10) nach unten. Unter 921px (2 Spalten) bleibt das native
   In-Fluss-Verhalten — dort ist Aufklappen nach unten richtig. */
@media(min-width:921px){
  details.field{position:relative;overflow:visible}
  details.field[open]{z-index:6}
  details.field[open] .field-detail{
    position:absolute;left:0;right:0;background:var(--card);
    border:1px solid var(--green);border-radius:16px;box-shadow:var(--shadow-lift);
    padding:13px 15px 15px}
  .fields>details.field:nth-child(-n+5)[open] .field-detail{bottom:100%;margin-bottom:7px}
  .fields>details.field:nth-child(n+6)[open] .field-detail{top:100%;margin-top:7px}
}

/* ── Rechtschreib-Challenge (eigene Seite) ── */
.challenge-wrap{max-width:600px;margin:0 auto}
.quiz-setline{margin:0 auto 14px;font-size:13px;color:var(--ink2);font-weight:600;text-align:center}
.quiz-setline b{color:var(--slate)}
.quiz-setline .quiz-setmeta{color:var(--ink3);font-weight:500}
.share-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.share-note{margin-top:12px;font-size:13px;color:var(--green-deep);font-weight:600}

/* ── App-Mockups: faux In-App-Screens statt Screenshots ───────────────────
   Screens veralten zu schnell (siehe .step-viz im Hero). Diese Mockups sind
   reines HTML/CSS im Design-System und bleiben ohne Pflege aktuell. Aufbau:
   .phone > .screen > (.scr-top + .scr-in). Ein Baukasten von Slot-Klassen
   rendert Dashboard/Lektion/Feedback/Fortschritt aus reinem Markup. */
.phone .screen{border-radius:38px;width:100%;aspect-ratio:300/650;overflow:hidden;
  background:linear-gradient(180deg,var(--cream),#F3EFDF);display:flex;flex-direction:column;
  position:relative;font-family:var(--body);color:var(--ink);text-align:left}
.screen .scr-top{display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px 2px;font-size:11px;font-weight:800;color:var(--ink3);letter-spacing:.02em}
.screen .scr-top .dots{display:flex;gap:4px}
.screen .scr-top .dots i{width:5px;height:5px;border-radius:50%;background:var(--ink3);opacity:.45}
.screen .scr-in{flex:1;min-height:0;padding:8px 18px 16px;display:flex;flex-direction:column;gap:11px}
.screen .scr-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.screen .scr-hd h4{font-family:var(--display);font-weight:600;font-size:18px;margin:0;color:var(--slate);line-height:1.12}
.screen .scr-streak{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;white-space:nowrap;
  color:var(--ember);background:var(--ember-soft);border-radius:999px;padding:4px 9px}
.screen .scr-streak svg{width:12px;height:12px}
.screen .scr-card{background:var(--card);border:1px solid var(--hairline);border-radius:16px;padding:13px 14px;
  box-shadow:0 4px 14px rgba(20,32,26,.05)}
.screen .scr-card.accent{background:var(--forest);border-color:transparent;color:#fff;box-shadow:var(--shadow-lift)}
.screen .scr-ey{display:block;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep)}
.screen .scr-card.accent .scr-ey{color:#7BD3A4}
.screen .scr-q{font-family:var(--display);font-weight:600;font-size:15px;color:var(--slate);margin:8px 0 12px;line-height:1.35}
.screen .scr-card.accent .scr-q{color:#fff}
.screen .scr-blank{display:inline-block;min-width:34px;border-bottom:2px dashed var(--ink3);vertical-align:baseline}
.screen .scr-opts{display:flex;flex-direction:column;gap:7px}
.screen .scr-opt{border:1.5px solid var(--hairline);border-radius:11px;padding:8px 11px;font-size:12.5px;font-weight:600;
  background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:8px}
.screen .scr-opt.on{border-color:var(--green);background:var(--green-soft);color:var(--green-deep)}
.screen .scr-opt.on svg{width:15px;height:15px;flex:0 0 auto}
.screen .scr-fb{display:flex;gap:9px;align-items:flex-start;background:var(--green-soft);border-radius:12px;padding:10px 12px}
.screen .scr-fb .fi{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center}
.screen .scr-fb .fi svg{width:13px;height:13px}
.screen .scr-fb b{font-size:12.5px;color:var(--green-deep)}
.screen .scr-fb p{margin:2px 0 0;font-size:11px;line-height:1.4;color:var(--ink2)}
.screen .scr-bars{display:flex;align-items:flex-end;gap:8px;height:76px;padding-top:4px}
.screen .scr-bars span{flex:1;border-radius:6px 6px 3px 3px;background:var(--green);opacity:.9;height:var(--h,50%)}
.screen .scr-bars span.weak{background:var(--ember);opacity:1}
.screen .scr-row{display:flex;align-items:center;gap:9px}
.screen .scr-row .rn{font-family:var(--display);font-weight:600;font-size:11.5px;color:var(--ink3);width:18px;flex:0 0 auto}
.screen .scr-row b{font-size:12px;font-weight:600;color:var(--slate);white-space:nowrap}
.screen .scr-meter{flex:1;height:7px;border-radius:999px;background:var(--hairline);overflow:hidden}
.screen .scr-meter i{display:block;height:100%;border-radius:999px;background:var(--green);width:var(--v,50%)}
.screen .scr-big{font-family:var(--display);font-weight:600;font-size:32px;color:var(--green-deep);line-height:1}
.screen .scr-mut{font-size:11px;color:var(--ink2);line-height:1.4}
.screen .scr-paper{background:var(--card);border:1px solid var(--hairline);border-radius:12px;padding:12px 13px;
  display:flex;flex-direction:column;gap:8px}
.screen .scr-pl{height:7px;border-radius:999px;background:var(--butter2);width:var(--w,80%);position:relative}
.screen .scr-pl.mk{background:var(--ember-soft)}
.screen .scr-pl.mk::after{content:"";position:absolute;inset:-3px -4px;border:1.5px solid var(--ember);border-radius:5px;opacity:.7}
.screen .scr-nav{margin-top:auto;display:flex;justify-content:space-around;align-items:center;
  padding-top:11px;border-top:1px solid var(--hairline)}
.screen .scr-nav i{width:19px;height:19px;border-radius:6px;background:var(--hairline)}
.screen .scr-nav i.on{background:var(--green)}

/* Der Intro-Lader steht bewusst NICHT hier, sondern inline in index.html:
   Markup, Stil und Script liegen dort in einer Datei und können nie aus
   verschiedenen Cache-Ständen kommen (genau daran ist die erste Fassung
   zerbrochen — Markup neu, Stylesheet alt = schwarzer Nib in der Ecke). */

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal,[data-stagger]>*{opacity:1;transform:none}
  .curve path.draw{stroke-dashoffset:0}
  [data-tilt]{transform:none!important}
}

/* ── App-Look für Aufgaben-Karten (Challenge, Schnell-Test) — 2026-09-02 ──────
   Kontinuität zur App: dieselbe Lektions-Anatomie wie im Übungs-Screen (Kopfzeile
   mit ×, Fortschrittslinie, grüne Lernfeld-Pille, große Inter-Satzzeile mit
   Lückenkästchen, weiße Antwortkarten mit Hairline, grüner Vollbreiten-„Weiter").
   Überschreibt die älteren .taskcard-/.answer-Regeln weiter oben bewusst am Ende. */
.taskcard{background:#FAFAF5;border:1px solid var(--hairline);border-radius:28px;padding:20px 22px 22px;box-shadow:var(--shadow-lift)}
.quiz-head{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:2px 0 14px;border-bottom:2px solid var(--slate)}
.quiz-head::before{content:"×";font-size:26px;line-height:1;font-weight:400;color:var(--ink);margin-top:-3px}
.quiz-head .task-tag{margin:0 auto 0 0;background:transparent;color:var(--ink2);padding:0;font-size:13px;font-weight:600;letter-spacing:0}
.quiz-dots i{width:9px;height:9px;background:#0000001f}
.taskcard .task-tag{font-size:13px;padding:7px 13px;margin-bottom:14px}
.sentence{font-family:var(--body);font-weight:500;font-size:clamp(24px,3vw,30px);line-height:1.42;letter-spacing:-.01em;color:var(--ink)}
.blank{display:inline-block;min-width:52px;height:1.1em;vertical-align:-.12em;border-bottom:none;border-radius:9px;background:var(--butter2);padding:0 10px;margin:0 4px;color:var(--ink3);line-height:1.1em}
.blank.filled{background:var(--green-soft);color:var(--green-deep)}
.blank.filled-bad{background:#FBE3E0;color:var(--error);text-decoration:line-through;text-decoration-thickness:2px}
.komma-words{font-family:var(--body);font-weight:500;font-size:clamp(24px,3vw,30px);color:var(--ink);gap:3px}
.gap{width:26px;height:1.1em;border-radius:8px;background:var(--butter2)}
.gap:hover{background:var(--hairline)}
.answers{gap:10px;margin-top:20px}
.answer{border:1.5px solid var(--hairline);background:#fff;color:var(--ink);font-family:var(--body);font-weight:600;font-size:18px;min-height:58px;border-radius:16px}
.answer:hover{background:#fff;border-color:var(--green)}
.answer.correct{background:var(--green);border-color:var(--green);color:#fff}
.answer.reveal-a{background:var(--green-soft);border-color:var(--green);color:var(--green-deep)}
.answer.wrong{background:#FBE3E0;border-color:#f3cfc9;color:var(--error)}
.feedback{border:none;border-radius:16px;padding:16px;margin-top:16px}
.feedback.good{background:var(--green-soft)}
.feedback.bad{background:#FBE3E0}
.feedback b{font-size:15px}.feedback p{font-size:14px;line-height:1.5}
.task-foot{flex-wrap:wrap;gap:10px;margin-top:16px}
.task-foot small{flex:1 1 100%;text-align:center;color:var(--ink3)}
.next-btn.show{flex:1 1 100%;justify-content:center;background:var(--green);color:#fff;min-height:54px!important;border-radius:16px;font-size:16px}
.next-btn.show:hover{background:var(--green-deep);transform:none}
.try-done .big{font-size:34px}
.try-done .btn-block,.try-done .share-row .btn{border-radius:16px}

/* ── Screenshot-Ausschnitte in Karten (Start, Business) ───────────────────── */
.hlc.has-shot{padding-top:0}
/* Bild randlos ueber die volle Kartenbreite; unten weich auslaufend, damit der
   Anschnitt gewollt wirkt statt abgeschnitten (wie bei .phone.cut). */
.hlc .hshot{display:block;margin:0 -26px 18px;overflow:hidden;background:#FAFAF5;aspect-ratio:4/3;
  -webkit-mask-image:linear-gradient(#000 78%,transparent 100%);mask-image:linear-gradient(#000 78%,transparent 100%)}
.hlc .hshot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.hlc.has-shot .bn{display:none}
/* Phone-Reihe auf der Startseite: mittig, sobald alle vier Geräte nebeneinander passen. */
@media(min-width:1140px){.gal.center{justify-content:center}}

/* ── Angeschnittene Phones (echte Screenshots) — 2026-09-02 ─────────────────
   Ein voller Handy-Screen ist 1:2,2 und wird im Web zu lang. Der obere Teil
   traegt die Aussage; unten wird der Rahmen weich ausgeblendet. Hoehe per
   --cut-h je Stelle (Galerie/Strip 400, Split 470). */
.phone.cut{padding-bottom:0;border-radius:46px 46px 0 0;
  -webkit-mask-image:linear-gradient(#000 72%,transparent 100%);mask-image:linear-gradient(#000 72%,transparent 100%)}
.phone.cut img{height:var(--cut-h,400px);object-fit:cover;object-position:top center;border-radius:38px 38px 0 0}
.phone.cut .glare{border-radius:38px 38px 0 0;bottom:0}
.shot-card .phone.cut{--cut-h:470px}
.gal figure:hover .phone.cut{transform:none}