/* ============================================================================
   ASCENYX — Landingpage Designsystem
   Aufgebaut nach den DISERVAR-Konventionen aus Website Business/
   (WEB_GUIDELINES.md, PALETTES_AND_FONTS.md, COMPONENT_REFERENCE.md):
   Farb-Tokens in :root, eine Typo-Rolle je Elementart, Glow als eigenes System
   aus weißem Kern + Nahglow + Fernglow, Kontrast in Tag/Nacht nicht relevant
   (App ist reines Dark-Theme), Breiten-Sweep 320–2560px geprüft.

   Funktionale Farbbindung, verbindlich:
   Grün  -> ausschließlich der primäre Handlungsbutton
   Gold  -> ausschließlich XP, Belohnungen, Premium
   Rot   -> ausschließlich Warnstufen / Belastungshinweise
   ========================================================================== */

:root{
  /* ---------- Cyan / männliches Theming ---------- */
  --cy-core:#eafaff; --cy-hell:#8fdcff; --cy-basis:#3fa9ff; --cy-tief:#1e6dff;
  --cy-akzent:#7fd8ff; --cy-side-a:#16305f; --cy-side-b:#1d3d7c;
  --cy-puls-a:#1c4abe; --cy-puls-b:#0d2460; --cy-rgb:30,110,255;

  /* ---------- Pink / Magenta / weibliches Theming ---------- */
  --mg-core:#ffeafd; --mg-hell:#ff9fe8; --mg-basis:#ff3fd6; --mg-akzent:#ff8ce4;
  --mg-side-a:#5f1650; --mg-side-b:#7c1d66; --mg-puls-a:#be1c96; --mg-puls-b:#600d48;
  --mg-rgb:255,20,170;

  /* ---------- Violett / Leitfarbe, geschlechtsneutral ---------- */
  --vi-core:#f6eaff; --vi-hell:#c9a4ff; --vi-basis:#9b6bff; --vi-tief:#6a2ecc;
  --vi-akzent:#c4a2ff; --vi-side-a:#331660; --vi-side-b:#452080;
  --vi-puls-a:#602cbe; --vi-puls-b:#301260; --vi-rgb:130,80,255;

  /* ---------- Grün, nur Haupt-CTA ---------- */
  --gr-core:#b9ffcf; --gr-edge:#5cff9a; --gr-glow:#35ff7a; --gr-tief:#14dc5a;
  --gr-rgb:20,220,90;
  /* Fuellung des Haupt-Buttons: tief genug, dass weisse Schrift AA erreicht. */
  --gr-btn-a:#0a8236; --gr-btn-b:#06622a;

  /* ---------- Gold, nur XP / Belohnungen / Premium ---------- */
  --au-core:#fff6dc; --au-text:#ffe9a8; --au-glow:#ffd257; --au-tief:#ffb302;
  --au-end:#b47b06; --au-rgb:255,168,0;

  /* ---------- Rot, nur Warnstufen ---------- */
  --rd-hell:#ff5566; --rd-edge:#ff3b4d; --rd-full:#ff1f2e; --rd-glow:#e00018;
  --rd-tief:#d40010; --rd-rgb:230,0,25;

  /* ---------- Neutrale Grundlage ---------- */
  --bg:#05070c;
  --panel-a:#101625; --panel-b:#070a12;
  --gold-panel-a:#1a1508; --gold-panel-b:#0b0904;
  --ink:#d9e7ff;
  --muted:rgba(255,255,255,.45);
  --muted-strong:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.12);

  /* Original-Typografie aus dem ASCENYX-Systemreferenz (System-Scroll-Element):
     Orbitron für Displays/Headlines, Chakra Petch für Fließtext und UI-Chrom. */
  --display:"Orbitron",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Chakra Petch",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Chakra Petch",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --max:1220px;
  --ease:cubic-bezier(.16,1,.3,1);

  /* ══ TYPO-TOKENS ══ eine Größe je Rolle (Hero, Nav, Buttons, Deko ausgenommen) */
  --fs-label:11px; --fs-fine:13px; --fs-body:15.5px; --fs-lead:clamp(17px,1.35vw,19px);
  --fs-num:14px; --fs-h4:20px; --fs-h3:clamp(22px,2.6vw,28px); --fs-h2:clamp(30px,4.4vw,52px);
  --fs-h1:clamp(42px,7.4vw,86px);
}

*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:hidden gehört auf html, nicht auf body: setzt man es auf body,
   ohne overflow-y explizit zu setzen, erzwingt die CSS-Overflow-Spec dort
   berechnetes overflow-y:auto. body wird dann zum tatsächlichen Scroll-
   Container statt html, window.scrollY bleibt bei 0 und jeder an window
   gebundene scroll-Listener (Sticky-Nav-Zustand) feuert nie. Gemessen, nicht
   vermutet: window.scrollY blieb nach scrollIntoView() bei 0. */
html{scroll-behavior:smooth;overflow-x:hidden}
/* Sprungziele nicht unter die fixierte Kopfzeile schieben */
section[id],main[id]{scroll-margin-top:clamp(74px,9vh,96px)}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.62;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:rgba(var(--vi-rgb),.4);color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Skip-Link (a11y) */
.skip{position:fixed;top:-60px;left:12px;z-index:100;background:var(--vi-basis);color:#fff;
  padding:10px 16px;border-radius:8px;font-size:var(--fs-fine);transition:top .2s var(--ease)}
.skip:focus{top:12px}
:where(a,button,input,summary,[tabindex]):focus-visible{outline:2px solid var(--vi-hell);outline-offset:3px;border-radius:4px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Feinkörniges Grain-Overlay gegen banding in den dunklen Verläufen */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s}

@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.45}}
@keyframes pulse-ring{0%{transform:scale(.7);opacity:.55}100%{transform:scale(2.1);opacity:0}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ============================================================
   GLOW-SYSTEM — weißer Kern, farbiger Nahglow, weiter Fernglow
   ============================================================ */
.glow-text-v{color:var(--vi-core);text-shadow:0 0 10px rgba(var(--vi-rgb),.85),0 0 34px rgba(var(--vi-rgb),.45),0 0 90px rgba(var(--vi-rgb),.25)}
.glow-text-c{color:var(--cy-core);text-shadow:0 0 10px rgba(var(--cy-rgb),.85),0 0 34px rgba(var(--cy-rgb),.45),0 0 90px rgba(var(--cy-rgb),.25)}
.glow-text-m{color:var(--mg-core);text-shadow:0 0 10px rgba(var(--mg-rgb),.85),0 0 34px rgba(var(--mg-rgb),.45),0 0 90px rgba(var(--mg-rgb),.25)}
.glow-text-g{color:var(--au-text);text-shadow:0 0 10px rgba(var(--au-rgb),.75),0 0 30px rgba(var(--au-rgb),.4),0 0 80px rgba(var(--au-rgb),.2)}

/* Feature-Icon — dasselbe Bauteil wie der Kopf der Schriftrolle (.s-icon):
   eckiger Rahmen in der Kernfarbe, Strichsymbol, innerer und aeusserer Glow.
   Die vollflaechige Leuchtkugel von vorher kommt in der App an keiner Stelle
   vor; dieses Kaestchen ist die Form, in der die App ihre Systemsymbole
   zeigt. Gleiche Geometrie wie .s-icon, nur groesser: Rahmen 2px,
   Radius im Verhaeltnis 1:4 zur Kantenlaenge, Symbol bei 48% der Kachel. */
.icon-orb{position:relative;width:46px;height:46px;border-radius:11px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--c-core);
  background:linear-gradient(180deg,rgba(var(--c-rgb),.16),rgba(var(--c-rgb),.04));
  box-shadow:0 0 9px rgba(var(--c-rgb),.85),
             0 0 28px -4px rgba(var(--c-rgb),.55),
             0 0 70px -14px rgba(var(--c-rgb),.35),
             inset 0 0 10px rgba(var(--c-rgb),.38)}
.icon-orb svg{width:22px;height:22px;position:relative;z-index:1;
  stroke:var(--c-core);fill:none;
  filter:drop-shadow(0 0 6px rgba(var(--c-rgb),.9))}
.feat-card:hover .icon-orb{box-shadow:0 0 12px rgba(var(--c-rgb),1),
             0 0 36px -4px rgba(var(--c-rgb),.7),
             0 0 90px -14px rgba(var(--c-rgb),.45),
             inset 0 0 12px rgba(var(--c-rgb),.5)}
.icon-orb.is-cyan{--c-core:var(--cy-core);--c-basis:var(--cy-basis);--c-rgb:var(--cy-rgb)}
.icon-orb.is-magenta{--c-core:var(--mg-core);--c-basis:var(--mg-basis);--c-rgb:var(--mg-rgb)}
.icon-orb.is-violet{--c-core:var(--vi-core);--c-basis:var(--vi-basis);--c-rgb:var(--vi-rgb)}
.icon-orb.is-gold{--c-core:var(--au-core);--c-basis:var(--au-tief);--c-rgb:var(--au-rgb)}
.icon-orb.is-red{--c-core:#fff0f1;--c-basis:var(--rd-full);--c-rgb:var(--rd-rgb)}

/* ---------- Buttons ---------- */
.btn{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 27px;border-radius:100px;cursor:pointer;border:0;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease)}
/* Haupt-Handlungsbutton — 1:1 die Vorgabe aus dem App-Designsystem:
   gruen, weisser Rand, weisse Orbitron-Schrift, starker gruener Glow,
   Puls ~3,2 s. Die Flaeche ist bewusst das tiefe Gruen und nicht der helle
   Verlauf von vorher: weisse Schrift auf #35ff7a kommt auf 1,33:1 und ist
   unlesbar, auf #0a8236 auf 4,93:1 und erfuellt damit AA. Das Helle der App
   traegt hier der Rand und der Glow, nicht die Fuellung. Gemessen, nicht
   geschaetzt. */
.btn-primary{color:#fff;
  font-family:var(--display);font-weight:700;letter-spacing:.05em;
  border:1px solid rgba(255,255,255,.92);
  background:linear-gradient(180deg,var(--gr-btn-a),var(--gr-btn-b));
  text-shadow:0 0 10px rgba(var(--gr-rgb),.75),0 1px 2px rgba(0,0,0,.45);
  animation:btnPulse 3.2s ease-in-out infinite}
@keyframes btnPulse{
  0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,
                     0 0 18px -3px rgba(var(--gr-rgb),.85),
                     0 0 48px -10px rgba(var(--gr-rgb),.6),
                     0 0 120px -14px rgba(var(--gr-rgb),.35)}
  50%{box-shadow:0 1px 0 rgba(255,255,255,.5) inset,
                 0 0 28px -2px rgba(var(--gr-rgb),1),
                 0 0 74px -6px rgba(var(--gr-rgb),.8),
                 0 0 165px -8px rgba(var(--gr-rgb),.5)}}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-primary:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Regelwerk 6: bei reduzierter Bewegung steht alles Ambiente still. Der
   Button behaelt seinen vollen Glow, er pulst nur nicht mehr. */
@media(prefers-reduced-motion:reduce){
  .btn-primary{animation:none;
    box-shadow:0 1px 0 rgba(255,255,255,.45) inset,
               0 0 24px -2px rgba(var(--gr-rgb),.95),
               0 0 62px -8px rgba(var(--gr-rgb),.7),
               0 0 140px -12px rgba(var(--gr-rgb),.42)}}
.btn-ghost{color:var(--vi-core);background:rgba(155,107,255,.08);
  border:1px solid rgba(var(--vi-rgb),.5);
  box-shadow:0 0 22px -8px rgba(var(--vi-rgb),.55)}
.btn-ghost:hover{background:rgba(155,107,255,.15);transform:translateY(-2px);
  box-shadow:0 0 34px -6px rgba(var(--vi-rgb),.75)}
.btn-sm{padding:11px 20px;font-size:13px}
.btn[disabled]{opacity:.6;cursor:default;transform:none!important}

/* ---------- Navigation ---------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:22px 0;
  transition:padding .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease)}
header.nav.scrolled{padding:13px 0;background:rgba(5,7,12,.78);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.wordmark{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:600;
  font-size:19px;letter-spacing:.01em}
.wordmark .logo{height:clamp(22px,2.3vw,28px);width:auto;display:block}
.foot-brand .logo{height:24px;width:auto;display:block}
nav.links{display:flex;gap:32px;font-size:14px;color:var(--muted-strong)}
nav.links a{transition:color .25s}
nav.links a:hover{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:16px}
.langsw{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:100px;
  padding:3px;background:rgba(255,255,255,.03)}
.langsw button{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--muted);background:none;border:0;border-radius:100px;padding:6px 12px;cursor:pointer;
  transition:color .2s,background .2s}
.langsw button.on{color:#04170b;background:linear-gradient(180deg,var(--gr-core),var(--gr-glow));
  box-shadow:0 0 12px -2px rgba(var(--gr-rgb),.7)}
.langsw button:not(.on):hover{color:var(--ink)}
.mobile-menu .langsw{margin-top:6px}
.nav-burger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);cursor:pointer;position:relative}
.nav-burger span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav-burger span:nth-child(1){top:14px}
.nav-burger span:nth-child(2){top:19.5px}
.nav-burger span:nth-child(3){top:25px}
.mobile-menu{position:fixed;inset:0;z-index:59;background:rgba(5,7,12,.98);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{font-family:var(--display);font-size:26px;font-weight:600}
body.menu-open{overflow:hidden}
@media(max-width:900px){
  nav.links{display:none}
  .nav-burger{display:block}
  .nav-actions .btn-ghost-nav{display:none}
}
/* Unter 900px bleiben Sprachumschalter + Haupt-CTA neben dem Burger stehen, bis der
   Platz nicht mehr reicht. Bei 390px überlief .nav-actions den fixierten Header um
   ~45px (gemessen, nicht geschätzt: die Kinder eines position:fixed-Containers
   erzeugen keinen Dokument-Scroll, ein reiner scrollWidth-Test findet das nicht).
   Ab hier gilt nur noch der Burger, Sprache + CTA leben im mobilen Vollbildmenü. */
@media(max-width:700px){
  .nav-actions .langsw{display:none}
  .nav-actions .btn-primary{display:none}
  /* Seit v2 ist der Kopfzeilen-Button violett (Gruen nur Hero und Schluss);
     er verschwindet hier genauso, sonst drueckt er auf 320px das Logo weg. */
  .nav-actions [data-launch-cta]{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:clamp(120px,17vw,180px) 0 clamp(64px,8vw,110px);overflow:hidden}
#aurora{position:absolute;inset:0;z-index:0;background:#05070c}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,12,.1) 0%,rgba(5,7,12,.5) 62%,var(--bg) 100%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(30px,5vw,60px);align-items:start;max-width:var(--max);margin:0 auto;
  padding:0 clamp(20px,5vw,48px)}
.hero-visual{margin-top:-28px}
@media(max-width:980px){.hero-visual{margin-top:0}}
@media(max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr);text-align:center}}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);
  font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vi-akzent);margin-bottom:24px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vi-basis);
  box-shadow:0 0 8px 2px rgba(var(--vi-rgb),.9),0 0 22px 6px rgba(var(--vi-rgb),.5);
  animation:pulse-dot 2.4s ease-in-out infinite}
@media(max-width:980px){.eyebrow{justify-content:center}}

h1{font-family:var(--display);font-weight:600;font-size:var(--fs-h1);line-height:.98;
  letter-spacing:-.02em;color:#fdfdff}
h1.long{font-size:clamp(32px,4.3vw,58px);line-height:1.08;letter-spacing:-.01em;max-width:18ch}
h1 .grad{background:linear-gradient(92deg,var(--cy-hell),var(--vi-hell) 48%,var(--mg-hell));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Markenschreibweise wie im Logo: Wortmarke weiss, Y cyan, X magenta.
   i und b tragen hier keine Bedeutung, sie sind nur kurze Traeger. */
/* Wortmarke im Fliesstext und in Headlines: weiss, Y in Cyan, X in Magenta.
   Galt bisher nur unter h1 — das Regelwerk bindet sie an jede Headline, in der
   ASCENYX steht, also auch an h2/h3. */
.wm{white-space:nowrap}
.wm i,.wm b{font-style:normal;font-weight:inherit}
.wm i{color:var(--cy-hell);text-shadow:0 0 16px rgba(var(--cy-rgb),.6),0 0 40px rgba(var(--cy-rgb),.3)}
.wm b{color:var(--mg-hell);text-shadow:0 0 16px rgba(var(--mg-rgb),.6),0 0 40px rgba(var(--mg-rgb),.3)}

.hero .row{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:980px){.hero .row{justify-content:center}}

.store-row{margin-top:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.store-row.center{justify-content:center;margin-inline:auto}
@media(max-width:980px){.store-row{justify-content:center}}
.store-badge{display:inline-flex;align-items:center;gap:11px;padding:10px 18px;border-radius:14px;
  border:1px solid var(--line);background:linear-gradient(165deg,var(--panel-a),var(--panel-b));
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.store-badge:hover{border-color:rgba(var(--vi-rgb),.5);transform:translateY(-2px);
  box-shadow:0 0 26px -8px rgba(var(--vi-rgb),.55)}
.store-badge svg{width:24px;height:24px;flex:0 0 auto;color:#fff}
.store-badge .txt{display:flex;flex-direction:column;line-height:1.2}
.store-badge small{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.store-badge b{font-family:var(--display);font-size:14px;font-weight:600;color:#fff}
/* Plattform noch nicht verfuegbar: sichtbar, aber nicht anklickbar. Kein
   Button, der ins Leere fuehrt, und kein stilles Weglassen — Android startet
   zuerst, iOS folgt, und genau das sagt die Kachel. */
.store-badge.is-soon{opacity:.45;cursor:default;pointer-events:none}
.store-badge.is-soon:hover{border-color:var(--line);transform:none;box-shadow:none}
.store-badge .soon{display:inline-block;margin-left:10px;padding:3px 9px;border-radius:100px;
  border:1px solid rgba(var(--vi-rgb),.45);background:rgba(var(--vi-rgb),.12);
  font-family:var(--display);font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--vi-hell)}

/* Tagline: Punkt nach TRAIN in Cyan, Punkt nach RANK in Magenta — die
   Schreibweise aus dem App-Designsystem. */
.tl{white-space:nowrap}
.tl i{font-style:normal}
.tl i.c{color:var(--cy-basis);text-shadow:0 0 8px rgba(var(--cy-rgb),.7)}
.tl i.m{color:var(--mg-basis);text-shadow:0 0 8px rgba(var(--mg-rgb),.7)}

.trust{margin-top:56px;display:flex;gap:30px;flex-wrap:wrap}
@media(max-width:980px){.trust{justify-content:center}}
.trust .t{display:flex;align-items:center;gap:10px;font-size:var(--fs-fine);color:var(--muted)}
.trust .t b{color:var(--ink);font-weight:600;font-family:var(--display)}
.trust .dot{width:6px;height:6px;border-radius:50%;background:var(--vi-basis);
  box-shadow:0 0 8px 2px rgba(var(--vi-rgb),.7)}

/* ---------- Muskel-Rang-Board (Charakterblatt) ---------- */
.board-wrap{position:relative;display:flex;justify-content:center}
.board{position:relative;width:100%;max-width:440px;border-radius:22px;padding:18px;
  background:linear-gradient(165deg,rgba(255,210,87,.05),rgba(255,255,255,.015));
  border:1px solid rgba(var(--au-rgb),.22);
  box-shadow:0 30px 90px -40px rgba(0,0,0,.9),0 0 70px -30px rgba(var(--au-rgb),.4)}
.board-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.board-title{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--au-text)}
.board-note{font-family:var(--mono);font-size:11px;color:rgba(255,246,220,.45)}
.board-grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px}
@media(max-width:620px){
  /* Schmale Kacheln: Name über Rang statt nebeneinander, sonst brechen die
     längeren Muskelnamen ab. */
  .board-grid .m{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px}
  .board-grid .m span{white-space:normal;font-size:11px;line-height:1.25}
}
.board-grid .m{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:9px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);font-size:11.5px;color:var(--muted-strong);min-width:0}
.board-grid .m span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-grid .m b{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.04em;
  white-space:nowrap;color:var(--muted)}
/* Rang als Gold-Intensität, nicht als eigene Farbtöne (Farbregelwerk) */
.m.t1 b{color:rgba(255,233,168,.5)}
.m.t2 b{color:rgba(255,233,168,.72)}
.m.t3{border-color:rgba(var(--au-rgb),.3)}
.m.t3 b{color:var(--au-text)}
.m.t4{border-color:rgba(var(--au-rgb),.45);background:rgba(255,210,87,.05)}
.m.t4 b{color:var(--au-glow);text-shadow:0 0 8px rgba(var(--au-rgb),.6)}
.m.t5{border-color:rgba(var(--au-rgb),.7);background:rgba(255,210,87,.09);
  box-shadow:0 0 20px -6px rgba(var(--au-rgb),.7)}
.m.t5 b{color:var(--au-core);text-shadow:0 0 6px rgba(255,255,255,.6),0 0 16px rgba(var(--au-rgb),.9)}
.m.t0{opacity:.45}
.board-foot{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.08);font-family:var(--mono);font-size:11px;
  color:var(--rd-hell)}

/* ---------- Klassen-Wappen ---------- */
/* Zwoelf Klassen als Matrix: vier Spalten sind die vier Wege (Kraft blau,
   Masse rot, Ausdauer gruen, Performance violett), drei Zeilen die Stufen.
   Die Spaltenfarbe traegt die Lesart, deshalb bleiben es auf dem Tablet vier
   Spalten und erst auf dem Telefon zwei — bei drei Spalten zerfaellt die
   Zuordnung Weg-zu-Spalte, und das Raster erklaert sich nicht mehr selbst. */
/* Systemfiguren: Vorder- und Rueckseite, dieselbe Zeichnung wie im Onboarding. */
.sysfig{margin:26px 0 0;display:flex;flex-direction:column;align-items:center}
.sysfig-pair{display:flex;gap:clamp(18px,5vw,64px);align-items:flex-end;justify-content:center;width:100%}
.sysfig-pair img{width:clamp(120px,19vw,250px);height:auto;display:block;
  filter:drop-shadow(0 0 26px rgba(var(--cy-rgb),.30));transition:filter .25s var(--ease)}
/* Die Zeichnung selbst wechselt von Cyan auf Magenta, der Schein folgt ihr. */
html[data-fig="f"] .sysfig-pair img{filter:drop-shadow(0 0 26px rgba(var(--mg-rgb),.32))}
@media(max-width:560px){.sysfig-pair img{width:min(40vw,190px)}}

/* Figurenwahl ueber dem Klassenraster. Violett, weil Gruen der Handlung
   vorbehalten ist; die Auswahl ist eine Ansicht, kein Abschluss. */
.figsw{display:flex;justify-content:center;gap:2px;margin-top:40px;
  border:1px solid var(--line);border-radius:100px;padding:3px;
  background:rgba(255,255,255,.03);width:max-content;margin-left:auto;margin-right:auto}
.figsw button{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);background:none;border:0;border-radius:100px;
  padding:8px 18px;cursor:pointer;transition:color .2s,background .2s,box-shadow .2s}
.figsw button.on{color:#fff;background:linear-gradient(180deg,rgba(var(--vi-rgb),.55),rgba(var(--vi-rgb),.28));
  box-shadow:0 0 14px -3px rgba(var(--vi-rgb),.8);text-shadow:0 0 8px rgba(var(--vi-rgb),.9)}
.figsw button:not(.on):hover{color:var(--ink)}
@media (pointer:coarse){.figsw button{min-height:44px;display:inline-flex;align-items:center}}

.class-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
@media(max-width:900px){.class-grid{gap:12px}}
@media(max-width:560px){.class-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
.class-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 12px 20px;
  border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(165deg,var(--panel-a),var(--panel-b));
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.class-card img{width:clamp(78px,9vw,132px);height:auto;display:block;
  /* Hintergrund ist im Bild bereits freigestellt (Alpha aus Luminanz). */
  transition:transform .5s var(--ease),filter .5s var(--ease)}
.class-card h3{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.05em;
  text-align:center;color:#fff}
.class-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.26);
  box-shadow:0 26px 70px -36px rgba(0,0,0,.9)}
.class-card:hover img{transform:scale(1.07)}

/* ---------- Preis-Chip (Gold, laut Farbregelwerk der Preisbereich) ---------- */
.price-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:100px;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--au-core);background:rgba(255,210,87,.09);border:1px solid rgba(var(--au-rgb),.45);
  box-shadow:0 0 22px -6px rgba(var(--au-rgb),.7);
  text-shadow:0 0 6px rgba(255,255,255,.45),0 0 16px rgba(var(--au-rgb),.8)}
.price-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--au-glow);
  box-shadow:0 0 8px 2px rgba(var(--au-rgb),.9)}
.hero .price-chip{margin-top:20px}
.cta-panel .price-chip{margin-top:22px}


/* ============================================================
   SYSTEM-SCROLL — Hero-Kernstück, adaptiert aus der Nutzer-Referenz
   (ascenyx_system_scroll_v5_final.html). Mechanik unverändert
   (Kanten-Pulse, Energie-Schienen, Aufroll-Panel, Flicker, Sweep,
   Riss-Textur), auf die Seiten-Tokens (--cy-*) umgestellt und auf
   Hero-Spaltenbreite skaliert statt fixer 620px.
   ============================================================ */
.s-pretext{display:flex;align-items:center;justify-content:center;gap:2px;margin:0 0 16px;
  font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--vi-hell);min-height:1.3em;text-shadow:0 0 12px rgba(var(--vi-rgb),.5)}
.s-cursor{display:inline-block;width:7px;height:14px;margin-left:2px;background:var(--vi-basis);
  box-shadow:0 0 8px rgba(var(--vi-rgb),.85),0 0 18px rgba(var(--vi-rgb),.4);
  animation:s-blink 1s step-end infinite}
.s-cursor.done{animation:none;opacity:0}
@keyframes s-blink{0%,100%{opacity:1}50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.s-cursor{animation:none;opacity:0}}
.scroll-stage{perspective:1400px;display:flex;justify-content:center}
.scroll-tilt{transform:rotateX(7deg);transform-style:preserve-3d;width:100%;max-width:440px}
.scroll-window{position:relative;width:100%;opacity:0}
.scroll-tilt.run .scroll-window{animation:scrollMaterialize .3s ease-out forwards,scrollFloat 7s ease-in-out 2.2s infinite alternate}
@keyframes scrollMaterialize{from{opacity:0}to{opacity:1}}
@keyframes scrollFloat{from{transform:translateY(0)}to{transform:translateY(-7px)}}

.s-edge{position:absolute;top:30px;bottom:30px;width:20px;z-index:1;opacity:0;overflow:hidden}
.scroll-tilt.run .s-edge{animation:scrollEdgeIn .8s ease 1.25s forwards}
@keyframes scrollEdgeIn{to{opacity:1}}
.s-edge.left{left:2px} .s-edge.right{right:2px}
.s-edge::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent 0%,var(--cy-side-a) 7%,var(--cy-side-b) 50%,var(--cy-side-a) 93%,transparent 100%);
  box-shadow:0 0 6px rgba(22,52,120,.55)}
.s-pulse{position:absolute;width:4px;height:88px;border-radius:1px;
  background:linear-gradient(180deg,transparent,var(--cy-puls-a) 30%,var(--cy-puls-b) 50%,var(--cy-puls-a) 70%,transparent);
  box-shadow:0 0 7px rgba(22,60,170,.8),0 0 16px rgba(16,45,130,.5);opacity:0}
.s-edge.left .s-pulse{left:13px} .s-edge.left .s-pulse.p2{left:18px}
.s-edge.right .s-pulse{left:3px} .s-edge.right .s-pulse.p2{left:-2px}
.s-edge.left .s-pulse{animation:scrollTravelUp 5.5s linear infinite}
.s-edge.left .s-pulse.p2{animation-delay:2.75s}
.s-edge.right .s-pulse{animation:scrollTravelDown 5.5s linear infinite}
.s-edge.right .s-pulse.p2{animation-delay:2.75s}
@keyframes scrollTravelUp{0%{top:100%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:-30%;opacity:0}}
@keyframes scrollTravelDown{0%{top:-30%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}

.s-rail{position:relative;height:36px;z-index:2;transform:scaleX(.15)}
.scroll-tilt.run .s-rail{animation:scrollExtend .5s cubic-bezier(.2,.8,.2,1) .15s forwards}
@keyframes scrollExtend{to{transform:scaleX(1)}}
.s-rail.bottom{transform:scaleX(.15) scaleY(-1)}
.scroll-tilt.run .s-rail.bottom{animation:scrollExtendB .5s cubic-bezier(.2,.8,.2,1) .15s forwards}
@keyframes scrollExtendB{to{transform:scaleX(1) scaleY(-1)}}
.s-rail::before{content:"";position:absolute;left:-5%;right:-5%;top:3px;height:30px;
  background:radial-gradient(ellipse at center,rgba(var(--cy-rgb),.4),rgba(var(--cy-rgb),.15) 55%,transparent 75%);
  filter:blur(7px);pointer-events:none}
.s-bar-main{position:absolute;left:0;right:0;top:14px;height:10px;border-radius:1px;
  background:linear-gradient(180deg,#fff 0%,var(--cy-hell) 45%,var(--cy-basis) 100%);
  box-shadow:0 0 7px var(--cy-hell),0 0 20px var(--cy-basis),0 0 44px rgba(var(--cy-rgb),.95),
             0 0 90px rgba(var(--cy-rgb),.7),0 0 150px rgba(var(--cy-rgb),.45)}
.s-bar-thin{position:absolute;height:3.5px;border-radius:1px;
  background:linear-gradient(180deg,#fff,var(--cy-hell) 60%,var(--cy-basis));
  box-shadow:0 0 7px var(--cy-hell),0 0 18px var(--cy-basis),0 0 40px rgba(var(--cy-rgb),.8),0 0 75px rgba(var(--cy-rgb),.5)}
.s-bar-thin.a{top:5px;left:7%;width:64%} .s-bar-thin.b{top:27px;left:26%;width:52%;opacity:.9}
.s-cap{position:absolute;top:8px;width:5px;height:22px;border-radius:1px;
  background:linear-gradient(180deg,#fff,var(--cy-hell) 55%,var(--cy-basis));
  box-shadow:0 0 8px var(--cy-hell),0 0 20px var(--cy-basis),0 0 42px rgba(var(--cy-rgb),.85),0 0 80px rgba(var(--cy-rgb),.5)}
.s-cap.l{left:-8px} .s-cap.r{right:-8px}
.s-cap.l2{left:-16px;top:12px;height:15px;opacity:.8} .s-cap.r2{right:-16px;top:12px;height:15px;opacity:.8}
.s-sweep-clip{position:absolute;left:0;right:0;top:14px;height:10px;border-radius:1px;overflow:hidden}
.s-sweep{position:absolute;top:0;bottom:0;width:26%;left:-28%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
  mix-blend-mode:screen;animation:scrollSweep 8.5s linear 1.6s infinite}
@keyframes scrollSweep{0%{left:-28%}78%{left:105%}100%{left:105%}}
.s-flicker{animation:scrollFlick 4.3s steps(1) 2s infinite}
@keyframes scrollFlick{0%,100%{opacity:1}7%{opacity:.93}9%{opacity:1}41%{opacity:.95}43%{opacity:1}76%{opacity:.92}78%{opacity:1}}

.s-panel{position:relative;z-index:1;margin:0 22px;height:0;overflow:hidden}
.scroll-tilt.run .s-panel{animation:scrollUnroll 1.05s cubic-bezier(.2,.9,.15,1) .5s forwards}
@keyframes scrollUnroll{to{height:352px}}
.s-panel-inner{position:relative;height:352px;
  background:radial-gradient(ellipse at 50% 25%,rgba(40,70,140,.18),transparent 60%),
             radial-gradient(ellipse at 50% 40%,var(--panel-a),var(--panel-b) 75%)}
/* Video-Ebene im Rang-Tor: liegt unter Riss-Textur, Grain und Text.
   Abgedunkelt, damit die Schrift darüber lesbar bleibt. */
/* contain statt cover: die Hantelscheiben werden am Panelrand sonst abgeschnitten.
   Unten verankert, damit die Figuren stehen und die Schrift den freien Raum
   darueber bekommt. */
.s-video{position:absolute;left:0;right:0;bottom:-8%;width:100%;height:auto;
  object-fit:contain;z-index:0;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none}
.scroll-tilt.run .s-video{opacity:.85}
/* Abdunklung nur oben, wo die Schrift steht. Unten bleiben die Figuren klar. */
.s-panel-inner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,12,.9) 0%,rgba(5,7,12,.72) 34%,rgba(5,7,12,.18) 56%,rgba(5,7,12,0) 74%)}
@media(prefers-reduced-motion:reduce){.scroll-tilt.run .s-video{opacity:.6}}
.s-cracks,.s-grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.s-cracks path{fill:none;stroke:rgba(140,190,255,.055);stroke-width:1}
.s-cracks path.w{stroke:rgba(140,190,255,.028);stroke-width:2.5}
.s-cracks path.t{stroke:rgba(140,190,255,.04);stroke-width:.7}
.s-grain{opacity:.35}

.s-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;text-align:center;opacity:0;padding:30px 30px 0}
.scroll-tilt.run .s-content{animation:scrollFadeUp .6s ease 1.25s forwards}
@keyframes scrollFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.s-head{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:8px}
.s-icon{width:36px;height:36px;border:2px solid var(--cy-core);border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 8px var(--cy-basis),inset 0 0 8px rgba(63,169,255,.4)}
.s-icon svg{width:18px;height:18px;stroke:var(--cy-core);
  filter:drop-shadow(0 0 6px var(--cy-hell))}
.s-title{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:6px;
  color:var(--cy-core);
  text-shadow:0 0 6px var(--cy-hell),0 0 18px var(--cy-basis),0 0 36px rgba(var(--cy-rgb),.7)}
.s-rule{width:240px;max-width:70%;height:2px;margin:0 auto 24px;
  background:linear-gradient(90deg,transparent,var(--cy-hell),transparent);
  box-shadow:0 0 8px var(--cy-basis),0 0 20px rgba(var(--cy-rgb),.6)}
.s-body{font-family:var(--sans);font-size:15px;line-height:1.9;color:var(--ink);font-weight:400;
  text-shadow:0 0 12px rgba(63,169,255,.35);max-width:340px}
.s-body em{font-style:normal;font-weight:600;color:var(--cy-akzent);
  text-shadow:0 0 8px var(--cy-hell),0 0 20px var(--cy-basis)}
@media(max-width:560px){
  .s-title{font-size:15px;letter-spacing:3.5px}
  .s-body{font-size:13.5px}
  .scroll-tilt.run .s-panel{animation-name:scrollUnrollM}
  @keyframes scrollUnrollM{to{height:312px}}
  .s-panel-inner{height:312px}
  .s-content{padding-top:24px}
}

/* ---------- Section shell ---------- */
section{position:relative;padding:clamp(64px,9vw,116px) 0}
.tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);
  font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:18px}
.tag::before{content:"";width:22px;height:1px;background:currentColor}
.tag.c-violet{color:var(--vi-akzent)} .tag.c-gold{color:var(--au-text)}
h2{font-family:var(--display);font-weight:600;font-size:var(--fs-h2);line-height:1.06;
  letter-spacing:-.015em;color:#fdfdff;max-width:22ch}
.lead{margin-top:22px;max-width:62ch;color:var(--muted-strong);font-size:var(--fs-lead)}
.section-head{max-width:680px}
.section-head.center{max-width:640px;margin-inline:auto;text-align:center}
.section-head.center h2{margin-inline:auto}
.section-head.center .tag{justify-content:center}
.section-head.center .lead{margin-inline:auto}

/* ---------- Zwei Wege ---------- */
.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px}
@media(max-width:860px){.path-grid{grid-template-columns:1fr}}
.path-card{position:relative;margin:0;border-radius:26px;overflow:hidden;min-height:420px;
  display:flex;align-items:flex-end;
  background:linear-gradient(165deg,var(--panel-a),var(--panel-b));border:1px solid var(--line);
  transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.path-card::before{content:"";position:absolute;width:75%;height:75%;border-radius:50%;
  filter:blur(64px);opacity:.45;z-index:0;top:-30%;right:-25%;pointer-events:none}
.path-card.is-cyan::before{background:radial-gradient(circle,var(--cy-basis),transparent 70%)}
.path-card.is-magenta::before{background:radial-gradient(circle,var(--mg-basis),transparent 70%)}
.path-card:hover{transform:translateY(-4px)}
.path-card.is-cyan:hover{border-color:rgba(var(--cy-rgb),.5);box-shadow:0 0 0 1px rgba(var(--cy-rgb),.25),0 30px 80px -30px rgba(var(--cy-rgb),.55)}
.path-card.is-magenta:hover{border-color:rgba(var(--mg-rgb),.5);box-shadow:0 0 0 1px rgba(var(--mg-rgb),.25),0 30px 80px -30px rgba(var(--mg-rgb),.55)}
/* Die Aura-Schleife ist auf Schwarz gerendert. screen blendet das Schwarz
   weg, die Flammen bleiben ohne Alphakanal frei stehen. */
.path-avatar{position:absolute;left:50%;top:clamp(4px,2%,24px);transform:translateX(-50%);
  width:auto;height:clamp(330px,46vh,460px);z-index:0;transition:transform 1.1s var(--ease);
  mix-blend-mode:screen;object-fit:contain;
  /* Die Figur endet am Kartenrand sonst mit einer harten Kante quer durch die
     Oberschenkel. Der Verlauf loest die Flammen nach unten hin auf. */
  -webkit-mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,.45) 60%,transparent 76%);
  mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,.45) 60%,transparent 76%)}
.path-card:hover .path-avatar{transform:translateX(-50%) scale(1.04)}
.path-body{position:relative;z-index:1;margin:0;padding:0 0 clamp(26px,3.4vw,36px);width:100%;
  display:flex;justify-content:center;
  background:linear-gradient(180deg,transparent,rgba(5,7,12,.5) 45%,rgba(5,7,12,.9))}
.path-tag{display:inline-flex;align-items:center;padding:9px 20px;border-radius:100px;
  font-family:var(--display);font-size:var(--fs-label);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;background:rgba(5,7,12,.55);backdrop-filter:blur(6px)}
.path-card.is-cyan .path-tag{color:var(--cy-core);border:1px solid rgba(var(--cy-rgb),.45);
  text-shadow:0 0 12px rgba(var(--cy-rgb),.8);box-shadow:0 0 22px -6px rgba(var(--cy-rgb),.7)}
.path-card.is-magenta .path-tag{color:var(--mg-core);border:1px solid rgba(var(--mg-rgb),.45);
  text-shadow:0 0 12px rgba(var(--mg-rgb),.8);box-shadow:0 0 22px -6px rgba(var(--mg-rgb),.7)}
@media(max-width:860px){.path-card{min-height:420px}}
.path-note{margin-top:30px;text-align:center;color:var(--muted);font-size:var(--fs-fine)}

/* ---------- Feature grid ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
@media(max-width:1080px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.feat-grid{grid-template-columns:1fr}}
.feat-card{background:linear-gradient(165deg,var(--panel-a),var(--panel-b));
  border:1px solid var(--line);border-radius:20px;padding:30px;
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.feat-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22)}
.feat-card h3{font-family:var(--display);font-size:var(--fs-h4);margin:20px 0 10px;color:#fff}
.feat-card p{color:var(--muted-strong);font-size:var(--fs-body)}

/* ---------- Key Visual (Zwei Pfade als Bild-Band) ---------- */
.keyvisual{position:relative;width:100%;aspect-ratio:1920/620;max-height:70vh;min-height:400px;overflow:hidden;
  background:var(--bg)}
.keyvisual .kv-band{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);
  mask-image:linear-gradient(180deg,#000 78%,transparent)}
/* Die Kopfzeile sitzt in der Lücke zwischen den beiden Figuren */
.kv-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;
  width:min(90%,400px);z-index:1}
.kv-copy .tag{justify-content:center}
.kv-copy h2{margin:0 auto;color:#fff;font-size:clamp(22px,2.6vw,36px);line-height:1.18;
  text-shadow:0 0 40px rgba(5,7,12,.95),0 0 18px rgba(5,7,12,.9),0 2px 20px rgba(0,0,0,.85)}
.kv-copy.reveal{transform:translate(-50%,calc(-50% + 24px))}
.kv-copy.reveal.in{transform:translate(-50%,-50%)}
.kv-pair{display:none}
@media(max-width:820px){
  /* Schmal ist das breite Band unbrauchbar: dann die beiden Figuren direkt
     nebeneinander in voller Auflösung, Text darunter. */
  .keyvisual{aspect-ratio:auto;height:auto;min-height:0;max-height:none;
    padding:clamp(18px,5vw,34px) 0 clamp(26px,7vw,44px)}
  .keyvisual .kv-band{display:none}
  .kv-pair{display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,2vw,20px)}
  .kv-pair img{height:clamp(170px,42vw,250px);width:auto;display:block}
  .kv-copy{position:relative;left:auto;top:auto;transform:none;width:min(92%,520px);
    margin:clamp(14px,4vw,26px) auto 0}
  .kv-copy.reveal{transform:translateY(24px)}
  .kv-copy.reveal.in{transform:none}
  .kv-copy h2{font-size:clamp(23px,6.4vw,30px)}
}

/* ---------- Gold / XP-Sektion ---------- */
.gold-panel{position:relative;border-radius:30px;overflow:hidden;
  background:linear-gradient(165deg,var(--gold-panel-a),var(--gold-panel-b));
  border:1px solid rgba(var(--au-rgb),.25);padding:clamp(36px,5.5vw,68px);
  box-shadow:0 0 140px -40px rgba(var(--au-rgb),.3)}
.gold-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,64px);align-items:center}
@media(max-width:920px){.gold-inner{grid-template-columns:1fr}}
.gold-panel h2{max-width:16ch}
.gold-panel .lead{color:rgba(255,246,220,.62)}

/* ---------- Rangleiter als Medaillen-Pfad ----------
   Muster von Duolingos Liga-Anzeige: der ganze Weg ist sichtbar, die
   erreichten Stufen leuchten, die Spitze bleibt verschlossen. */
.ladder{--medal-row:clamp(58px,7.2vw,104px);
  list-style:none;display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(4px,1vw,14px);
  margin:clamp(40px,5vw,64px) 0 clamp(48px,6vw,76px);position:relative;align-items:start}
/* Der Pfad liegt exakt auf der Standlinie der Medaillen */
.ladder::before{content:"";position:absolute;left:5%;right:5%;top:var(--medal-row);height:1px;
  background:linear-gradient(90deg,rgba(var(--au-rgb),.06),rgba(var(--au-rgb),.5) 80%,rgba(var(--au-rgb),.1));
  z-index:0}
.lv{position:relative;z-index:1;display:grid;grid-template-rows:var(--medal-row) auto auto;
  justify-items:center;align-items:end;row-gap:12px;transition:transform .45s var(--ease)}
.lv-medal{position:relative;display:grid;place-items:center;border-radius:50%}
.lv-medal img{display:block;width:100%;height:auto}
.lv-name{font-family:var(--display);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  font-size:clamp(9px,1.05vw,12px);text-align:center;white-space:nowrap}
.lv-note{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:rgba(255,246,220,.5);
  text-align:center;margin-top:-6px}
/* Aufsteigende Größe und Leuchtkraft: der Weg wird sichtbar wertvoller */
/* Die Medaillen tragen ihre eigenen Farben (echte App-Assets). Die Staffelung
   passiert über Größe, Namensfarbe und Leuchtkraft, nicht über Umfärben. */
.lv1 .lv-medal{width:clamp(38px,4.4vw,62px)} .lv1 .lv-name{color:rgba(255,255,255,.4)}
.lv2 .lv-medal{width:clamp(41px,4.8vw,68px)} .lv2 .lv-name{color:rgba(255,255,255,.5)}
.lv3 .lv-medal{width:clamp(45px,5.2vw,74px)} .lv3 .lv-name{color:var(--au-text)}
.lv4 .lv-medal{width:clamp(48px,5.7vw,81px)} .lv4 .lv-name{color:rgba(226,236,255,.9)}
.lv5 .lv-medal{width:clamp(52px,6.2vw,88px)}
.lv5 .lv-name{color:var(--cy-hell);text-shadow:0 0 12px rgba(var(--cy-rgb),.6)}
.lv6 .lv-medal{width:clamp(56px,6.7vw,95px)}
.lv7 .lv-medal{width:clamp(60px,7.2vw,100px)}
.lv8 .lv-medal{width:clamp(64px,7.8vw,110px)}
.lv:hover{transform:translateY(-6px)}
/* Die drei Raenge ueber Diamant sind geheim (Michael, 21.09.2026): kein Name,
   kein Bild. Nur ein Fragezeichen in einer leeren Medaille. Es gibt nichts
   darunter, das ein Hover, ein Klick oder die Entwicklertools freilegen koennten. */
.lv-hidden:hover{transform:none}
/* Alle drei gleich gross und nicht groesser als Diamant: die Staffelung
   endet dort, wo das Sichtbare endet. */
.lv.lv-hidden .lv-medal{width:clamp(48px,5.8vw,82px)}
.lv-q{aspect-ratio:1;border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.06),rgba(8,10,18,.9) 70%);
  box-shadow:inset 0 0 18px rgba(0,0,0,.6);
  font-family:var(--display);font-weight:700;line-height:1;
  font-size:clamp(20px,2.6vw,38px);color:rgba(255,255,255,.34);
  user-select:none;-webkit-user-select:none;cursor:default}
@media(max-width:820px){
  .ladder{grid-template-columns:repeat(4,1fr);gap:26px 8px}
  .ladder::before{display:none}
  .lv{grid-template-rows:auto auto auto}
  .lv .lv-medal{width:clamp(50px,13vw,74px)!important}
}
.board-copy h3{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.5vw,30px);
  line-height:1.24;color:#fff;margin-bottom:16px}
.board-copy p{color:rgba(255,246,220,.62);font-size:var(--fs-body);max-width:44ch}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--panel-a),var(--panel-b));border:1px solid var(--line);
  border-radius:20px;padding:30px;transition:transform .4s var(--ease),border-color .4s var(--ease)}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--vi-rgb),.9),transparent);
  box-shadow:0 0 12px 1px rgba(var(--vi-rgb),.5)}
.step::after{content:attr(data-n);position:absolute;right:18px;top:6px;font-family:var(--display);font-weight:900;
  font-size:88px;line-height:1;color:rgba(var(--vi-rgb),.07);pointer-events:none}
.step:hover{transform:translateY(-4px);border-color:rgba(var(--vi-rgb),.4)}
.step .no{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--vi-akzent);
  text-shadow:0 0 10px rgba(var(--vi-rgb),.6)}
.step h3{font-family:var(--display);font-size:var(--fs-h4);margin:14px 0 10px;color:#fff}
.step p{color:var(--muted-strong);font-size:var(--fs-body)}

/* ---------- Manifest / Prinzip ---------- */
.manifest{max-width:900px;margin:0 auto;text-align:center}
.manifest .tag{justify-content:center}
.manifest blockquote{font-family:var(--display);font-weight:500;font-size:clamp(24px,3.4vw,38px);
  line-height:1.32;letter-spacing:-.01em;color:#fdfdff}
.manifest blockquote .grad{background:linear-gradient(92deg,var(--cy-hell),var(--vi-hell) 50%,var(--mg-hell));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- CTA-Panel ---------- */
.cta-panel{position:relative;border-radius:30px;padding:clamp(42px,6.4vw,76px);text-align:center;
  overflow:hidden;background:radial-gradient(120% 140% at 50% -10%,rgba(155,107,255,.2),transparent 62%),
  linear-gradient(165deg,var(--panel-a),var(--panel-b));border:1px solid var(--line)}
.cta-panel::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--vi-rgb),.95),transparent);
  box-shadow:0 0 14px 2px rgba(var(--vi-rgb),.55),0 0 40px 6px rgba(var(--vi-rgb),.25)}
.cta-panel h2{margin-inline:auto}
.cta-panel .lead{margin-inline:auto}
.cta-panel .store-row{margin-top:34px}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:52px 0 40px;color:var(--muted)}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:26px}
.foot-brand{display:flex;align-items:center;gap:11px;font-family:var(--display);
  font-weight:600;font-size:17px;color:var(--ink)}

.foot-links{display:flex;gap:6px 22px;flex-wrap:wrap;font-size:var(--fs-fine)}
.foot-links a{display:inline-block;padding:10px 4px}
.foot-links a:hover{color:var(--ink)}
.foot-bottom{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:var(--fs-fine)}

/* ---------- ROLLEN-STANDARDS ══ eine Größe je Rolle ---------- */
.eyebrow,.path-tag,.tag,.step .no{font-size:var(--fs-label)}
.foot-links,.foot-bottom,.warn-chip{font-size:var(--fs-fine)}
.feat-card p,.step p{font-size:var(--fs-body)}
.feat-card h3,.step h3{font-size:var(--fs-h4)}

/* ---------- Kleine Bildschirme: letzte Feinjustierung ---------- */
@media(max-width:430px){
  .nav-row{gap:12px}
  .wordmark{font-size:17px}
  .hero .row{width:100%}
  .hero .row .btn{flex:1 1 auto}
}

/* ============================================================================
   MOBILE — Touch-Ziele und Mindestschriftgrößen
   Gemessen auf 320, 360, 390 und 430px, nicht geschätzt. WCAG 2.5.5 und Apples
   Human Interface Guidelines setzen 44px als Fingerbreite an. Fließtext-Links
   mitten im Satz sind davon ausdrücklich ausgenommen und bleiben unangetastet;
   eigenständige Bedienelemente nicht.

   Vorbefund: Sprachumschalter 42×26, Burger 40×40, Wortmarke 81×22,
   Footer-Links 65×41, Rangnamen 9px, „iOS soon"-Chip 9px.

   Umgesetzt über min-height statt Padding, damit die Kopfzeile nicht wächst.
   Die Abfrage ist pointer:coarse und nicht die Breite: entscheidend ist, ob
   mit dem Finger bedient wird, nicht wie schmal das Fenster gerade ist.
   ========================================================================== */
@media (pointer:coarse){
  .langsw{padding:4px}
  .langsw button{min-height:44px;display:inline-flex;align-items:center;
    justify-content:center;padding:0 14px}

  .nav-burger{width:44px;height:44px}
  .nav-burger span:nth-child(1){top:16px}
  .nav-burger span:nth-child(2){top:21.5px}
  .nav-burger span:nth-child(3){top:27px}

  .wordmark,.foot-brand{min-height:44px;align-items:center}

  .foot-links a{min-height:44px;display:inline-flex;align-items:center;padding:0 6px}

  .store-badge{min-height:48px}
  .mobile-menu a{min-height:44px;display:inline-flex;align-items:center}
}

/* Schriftgrößen, die auf kleinen Schirmen unter die Lesbarkeitsgrenze fielen.
   Gebunden an pointer:coarse, nicht an die Breite: im Querformat ist ein
   Telefon 740px breit, eine Breitenabfrage greift dort nicht mehr — die
   Schrift wäre wieder 9px gewesen. Gemessen auf 740×360. */
@media (pointer:coarse){
  .lv-name{font-size:11px}
  .store-badge .soon{font-size:10.5px;padding:4px 9px}
  .eyebrow,.tag{font-size:11.5px}
  .board-note{font-size:11.5px}
}

/* Querformat auf dem Telefon: der Hero darf die volle Höhe beanspruchen,
   aber nicht mit der Polsterung eines Hochformat-Bildschirms — sonst steht
   die Headline unter der Faltung und der Button ist nicht mehr sichtbar. */
@media (pointer:coarse) and (orientation:landscape) and (max-height:520px){
  .hero{min-height:auto;padding:clamp(96px,14vh,120px) 0 clamp(40px,7vh,64px)}
  section{padding:clamp(48px,8vh,72px) 0}
}

/* Kleinste Beschriftungen auf 320–480px. 10px ist auf einem Telefon keine
   lesbare Größe mehr — betroffen waren das Muskel-Board (Name 11px, Rang
   10px), die Store-Kacheln und die Recovery-Zeile. Die Kacheln stapeln
   unterhalb 620px ohnehin, es ist also Platz dafür da. */
@media (pointer:coarse){
  .board-grid .m span{font-size:12px}
  .board-grid .m b{font-size:11px}
  .board-foot span{font-size:11.5px}
  .store-badge small{font-size:11px}
  .path-tag{font-size:11.5px}
}

/* ============================================================================
   MUSKELKARTE
   Das Bild ist das Original aus der App. Darueber liegt ein SVG mit 18
   Flaechen, eine je Muskelgruppe, abgeleitet aus den Farbflaechen des Bildes
   (Deckung 0,83 bis 0,99 gegen die Originalflaeche). Die Flaechen sind
   unsichtbar, bis eine angesteuert wird — dann leuchtet genau diese eine in
   Gold auf, alles andere bleibt unangetastet. Gold, weil das Regelwerk Gold
   an Raenge bindet und hier ein Rang gezeigt wird.
   ========================================================================== */
.mmap{margin:0;display:flex;flex-direction:column;gap:14px;align-items:center}
.mmap-stage{position:relative;width:100%;max-width:440px;line-height:0}
.mmap-hit{position:relative;display:block;width:100%;height:auto;
  /* Das SVG selbst faengt nichts ab, nur seine Flaechen. */
  pointer-events:none}
.mmap-body{fill:#0b1120;stroke:rgba(255,246,220,.20);stroke-width:3;pointer-events:none}

/* pointer-events:all ist hier keine Feinheit, sondern Pflicht: SVG testet
   standardmaessig nur bemalte Flaechen auf Treffer, und eine Fuellung mit
   Alpha 0 gilt als unbemalt. Ohne diese Zeile reagiert die Karte auf nichts. */
.mm{stroke-width:2;cursor:pointer;pointer-events:all;
  transition:fill .18s var(--ease),stroke .18s var(--ease)}

/* Der Rang ist die Helligkeit der Flaeche - dieselbe Regel wie bei den
   Kacheln daneben, damit Bild und Liste dasselbe sagen. */
.mm.t0{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.14)}
.mm.t1{fill:rgba(255,210,87,.16);stroke:rgba(var(--au-rgb),.30)}
.mm.t2{fill:rgba(255,210,87,.28);stroke:rgba(var(--au-rgb),.42)}
.mm.t3{fill:rgba(255,210,87,.44);stroke:rgba(var(--au-rgb),.60)}
.mm.t4{fill:rgba(255,210,87,.62);stroke:rgba(var(--au-rgb),.80)}
.mm.t5{fill:rgba(255,246,220,.82);stroke:rgba(255,246,220,.95)}
.mm:focus{outline:none}
.mm.on{
  fill:rgba(255,246,220,.9);
  stroke:#fff;stroke-width:3;
  filter:drop-shadow(0 0 6px rgba(var(--au-rgb),.9)) drop-shadow(0 0 18px rgba(var(--au-rgb),.55));
}
/* Ohne Rang wird nicht golden geleuchtet — Gold steht fuer einen erreichten
   Rang, und genau den gibt es hier nicht. */
.mm.t0.on{fill:rgba(255,255,255,.34);stroke:rgba(255,255,255,.85);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.5))}

.mmap-readout{min-height:30px;display:flex;align-items:center;justify-content:center;
  gap:12px;text-align:center}
.mmap-hint{font-family:var(--mono);font-size:var(--fs-fine);color:rgba(255,246,220,.42)}
.mmap-pick{display:inline-flex;align-items:baseline;gap:12px}
.mmap-pick[hidden]{display:none}
.mmap-name{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.04em;color:#fff}
.mmap-rank{font-family:var(--mono);font-style:normal;font-weight:600;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--au-glow);
  text-shadow:0 0 10px rgba(var(--au-rgb),.7)}

/* Die Aussage steht oben ueber beiden Belegen, Karte und Liste darunter
   nebeneinander: dasselbe in Bild und in Zahlen. */
.gold-inner .board-copy{grid-column:1 / -1}
@media(max-width:920px){
  .mmap-stage{max-width:340px}
}
@media (pointer:coarse){
  /* Auf dem Telefon gibt es kein Ueberfahren: der erste Tipp waehlt aus,
     ein Tipp daneben hebt die Auswahl wieder auf. */
  .mmap-hint::after{content:""}
}

/* Die Kachel im Rang-Board, die zur gewaehlten Muskelgruppe gehoert. */
.board-grid .m.is-lit{border-color:rgba(var(--au-rgb),.8);
  background:rgba(255,210,87,.12);
  box-shadow:0 0 0 1px rgba(var(--au-rgb),.35), 0 0 18px -4px rgba(var(--au-rgb),.7)}
.board-grid .m.is-lit span{color:#fff}

/* ============================================================================
   Landingpage v2 (21.09.2026): Launch-Schalter, Beweisleiste, Nutzenzeilen,
   Stufen-Zeilen, Klassen-Animation, Preis-Schriftrolle, Schluss-CTA mit QR.
   ========================================================================== */

/* ---------- Launch-Schalter ----------
   <html data-launch="pre|early|live">. Ein Element mit data-show erscheint nur
   in den dort genannten Zustaenden. Nichts anderes muss beim Umschalten
   angefasst werden. */
html[data-launch="pre"]   [data-show]:not([data-show~="pre"]),
html[data-launch="early"] [data-show]:not([data-show~="early"]),
html[data-launch="live"]  [data-show]:not([data-show~="live"]){display:none !important}

/* ---------- Hero ---------- */
.hero .hero-lead{margin-top:22px;max-width:52ch}
@media(max-width:980px){.hero .hero-lead{margin-inline:auto}}
.cta-micro{margin-top:14px;font-family:var(--mono);font-size:var(--fs-fine);
  letter-spacing:.02em;color:var(--muted)}

/* ---------- Beweisleiste ----------
   Fuenf Zahlen, Zahl in Orbitron und Gold, Label in Chakra Petch. Keine Karten.
   Mobil 3 + 2, ohne Umbruch innerhalb eines Werts. */
section.proofbar{padding:clamp(14px,2.4vw,26px) 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.012)}
.proof{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,4vw,64px)}
.proof li{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.proof b{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,30px);
  color:var(--au-glow);text-shadow:0 0 14px rgba(var(--au-rgb),.55)}
/* Beim Hochzaehlen: Ziffern rechtsbuendig in fester Breite, damit nichts
   springt. Am Ende ein kurzes Aufglimmen, dann Ruhe. */
.proof b{display:inline-block;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:560px){.proof b{text-align:center}}
.proof b.counted{animation:proofGlow .9s ease-out}
@keyframes proofGlow{
  0%{text-shadow:0 0 14px rgba(var(--au-rgb),.55)}
  35%{text-shadow:0 0 6px rgba(255,255,255,.7),0 0 26px rgba(var(--au-rgb),1)}
  100%{text-shadow:0 0 14px rgba(var(--au-rgb),.55)}}
@media (prefers-reduced-motion:reduce){.proof b.counted{animation:none}}
.proof span{font-family:var(--mono);font-size:var(--fs-fine);color:var(--muted-strong);letter-spacing:.02em}
@media(max-width:560px){
  .proof{display:grid;grid-template-columns:repeat(6,1fr);gap:14px 8px}
  .proof li{grid-column:span 2;flex-direction:column;align-items:center;gap:2px}
  .proof li:nth-child(4){grid-column:2 / span 2}
}

/* ---------- Funktionen: Nutzenzeile als letzte Zeile jeder Karte ---------- */
.feat-card{display:flex;flex-direction:column}
.feat-card p.feat-gain{margin-top:auto;padding-top:16px;color:var(--muted-strong);
  font-style:normal;font-weight:600}
.feat-card p:not(.feat-gain){margin-bottom:0}

/* ---------- Board: Kennzeichnung als Beispiel ---------- */
.board-example{color:rgba(255,246,220,.62);letter-spacing:.04em}

/* ---------- Klassen: Stufen-Zeilen ueber jeder Rasterzeile ---------- */
.class-grid .tier-row{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 14px;padding:14px 2px 2px;border-top:1px solid var(--line)}
.class-grid .tier-row:first-child{border-top:0;padding-top:0}
.tier-row b{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--vi-akzent);white-space:nowrap}
.tier-row span{font-family:var(--mono);font-size:var(--fs-fine);color:var(--muted-strong)}

/* ---------- Klassen-Animation ---------- */
.class-reel{margin:clamp(34px,5vw,56px) auto 0;width:min(340px,78vw);aspect-ratio:9 / 16;
  border-radius:22px;overflow:hidden;border:1px solid rgba(var(--vi-rgb),.35);
  box-shadow:0 0 60px -18px rgba(var(--vi-rgb),.7);background:#07060f}
.class-reel-v{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Preis: goldene Schriftrolle ----------
   Dasselbe Bauteil wie Hero und Rechtsseiten, die --cy-Tokens lokal auf Gold
   umgeschrieben (Regelwerk: Gold steht fuer XP, Belohnung und Preis). */
.price-scroll{
  --cy-core:var(--au-core); --cy-hell:var(--au-text); --cy-basis:var(--au-glow);
  --cy-tief:var(--au-tief); --cy-akzent:var(--au-text);
  --cy-side-a:#4a3505; --cy-side-b:#634608;
  --cy-puls-a:var(--au-end); --cy-puls-b:#5a3d03; --cy-rgb:var(--au-rgb);
}
.price-stage{margin-top:26px}
.price-scroll.scroll-tilt{transform:none;max-width:640px;width:100%}
.price-scroll .scroll-window{opacity:1}
.price-scroll.scroll-tilt.run .scroll-window{animation:scrollMaterialize .3s ease-out forwards}
.js .price-scroll .scroll-window{opacity:0}
.js .price-scroll .price-panel{clip-path:inset(0 0 100% 0)}
.js .price-scroll .price-panel .s-content{opacity:0}
.price-scroll.run .price-panel{animation:priceUnroll 1.05s cubic-bezier(.2,.9,.15,1) .5s forwards}
@keyframes priceUnroll{to{clip-path:inset(0 0 0 0)}}
.price-scroll.run .price-panel .s-content{animation:scrollFadeUp .6s ease 1.25s forwards}
.price-panel{position:relative;z-index:1;margin:0 22px;
  background:radial-gradient(ellipse at 50% 10%,rgba(var(--au-rgb),.14),transparent 64%),
             linear-gradient(165deg,var(--gold-panel-a),var(--gold-panel-b));
  border-left:1px solid rgba(var(--au-rgb),.16);border-right:1px solid rgba(var(--au-rgb),.16)}
.price-panel .s-edge{top:22px;bottom:22px}
.price-panel .s-content{position:relative;z-index:3;height:auto;display:block;opacity:1;
  text-align:center;padding:clamp(30px,4.6vw,52px) clamp(24px,5vw,56px)}
.price-panel h2{margin:0 auto;color:#fff;text-shadow:0 0 26px rgba(var(--au-rgb),.35)}
.price-panel .price-text{margin:16px auto 0;max-width:46ch;color:rgba(255,246,220,.82);
  font-size:var(--fs-lead)}
.price-panel .price-trust{margin:18px auto 0;max-width:52ch;font-family:var(--mono);
  font-size:var(--fs-fine);color:rgba(255,246,220,.5)}
@media(max-width:560px){
  .price-panel{margin:0 12px}
  .price-panel .s-edge{display:none}
}

/* ---------- Schluss-CTA ---------- */
.cta-actions{margin-top:30px;display:flex;justify-content:center;align-items:center;gap:40px}
.cta-actions .row{display:flex;justify-content:center}
/* QR nur, wo es ein Handy daneben gibt: Maus und Breite ab 1024px. */
.cta-qr{display:none;margin:0}
@media (pointer:fine) and (min-width:1024px){
  html[data-launch="early"] .cta-qr, html[data-launch="live"] .cta-qr{
    display:flex;flex-direction:column;align-items:center;gap:8px}
}
.cta-qr .qr-code{width:112px;height:112px;border-radius:10px;display:block}
.cta-qr figcaption{font-family:var(--mono);font-size:var(--fs-fine);color:var(--muted)}