/* Deutsch Arena — Public styles
   THEME 2026 « Deutsch Arena » (Owner-Referenz 2026-11-06): tiefes Navy
   (#0A1428-Familie) + Gold (#C9A227 / #E3B341) als einziges Marken-System.
   Helle Flächen = warmes Papier mit Navy-Schrift und Gold-Akzenten,
   dunkle Flächen = die Navy-Welt des Referenz-Designs. Darunter liegt die
   bisherige Komponenten-Schicht (Struktur und Funktionen unverändert). */
:root{
  --green:#C9A227; --green-grad:linear-gradient(180deg,#EFCB5E,#C9A227 58%,#A87F14);
  --gold:#C9A227; --gold-2:#E3B341; --gold-deep:#8A6508;
  --arena-navy:#0A1428; --arena-navy-2:#0E1C3A; --arena-ink:#F2EEE1;
  --navy:#0C1B36; --navy-fixed:#0A1428; --muted:#6F6A58; --hair:rgba(20,26,43,.12);
  --mint:#F3ECD4; --sky:#E7ECF5; --rose:#F8ECEC; --cream:#F7EDCB; --lilac:#EFEBF6; --peach:#F7EEE2;
  --radius:20px; --shadow:0 1px 3px rgba(10,20,40,.05),0 10px 28px rgba(10,20,40,.08);
  --shadow-lg:0 2px 6px rgba(10,20,40,.05),0 28px 56px rgba(10,20,40,.14);
  --ease:cubic-bezier(.22,.61,.21,1);
  --ink:#1B2436; --ink-soft:#3E4A63; --surface:#FFFDF6; --surface-2:#F7F1E2; --alt-bg:#F5EFE0;
  --bg-base:#FBF7EC; --grid-line:rgba(20,26,43,.05);
  --green-dark:#8A6508; --green-soft:#F7EDCB; --input-bg:#FFFDF6;
  --shadow-sm:0 1px 2px rgba(10,20,40,.05),0 2px 8px rgba(10,20,40,.06);
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:999px;
  --header-h:68px;
  /* Gold-Lichtsystem (ersetzt das RGB-System): eine ruhige, fließende
     Goldlinie unter dem Header und Goldbalken unter CTA und im Fuß. */
  --rgb-grad:linear-gradient(90deg,#8A6508,#E3B341 30%,#FFF0B8 50%,#E3B341 70%,#8A6508);
  --rgb-flow:linear-gradient(90deg,#8A6508 0%,#E3B341 12%,#FFF0B8 25%,#E3B341 38%,#8A6508 50%,#E3B341 62%,#FFF0B8 75%,#E3B341 88%,#8A6508 100%);
}
html[data-theme="dark"]{
  --navy:#F5F0DF; --ink:#EDEAE0; --ink-soft:#C6CCDC; --muted:#97A1B8; --hair:rgba(240,230,200,.13);
  --mint:rgba(227,179,65,.12); --sky:rgba(120,170,255,.13); --rose:rgba(255,130,130,.12);
  --cream:rgba(255,205,60,.13); --lilac:rgba(170,150,250,.14); --peach:rgba(255,175,100,.13);
  --surface:#0C1730; --surface-2:#0F1F42; --alt-bg:#081226;
  --bg-base:#060C1B; --grid-line:rgba(255,255,255,.05);
  --green:#E3B341; --green-dark:#EBC65C; --green-soft:rgba(227,179,65,.14); --input-bg:#0F1F42;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.38);
  --shadow-lg:0 2px 6px rgba(0,0,0,.42),0 28px 56px rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
html,body{max-width:100%;overflow-x:clip}
body{margin:0;font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:
  linear-gradient(180deg, rgba(201,162,39,.05), transparent 520px),
  var(--bg-base);
}
h1,h2,h3{font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.1;letter-spacing:-0.02em;margin:0;color:var(--navy)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:#F0CD6B;color:#231A02}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
.brand-line{height:3px;background:linear-gradient(90deg,#8A6508,#E3B341 45%,#FFF0B8 50%,#E3B341 55%,#8A6508);position:fixed;top:0;left:0;right:0;z-index:60}
.gradient-text{background:linear-gradient(120deg,#E3B341,#A87F14);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
:focus-visible{outline:2px solid rgba(201,162,39,.6);outline-offset:2px;border-radius:6px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:3px;z-index:50;background:rgba(252,252,250,.78);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border-bottom:1px solid var(--hair);transition:box-shadow .35s var(--ease),background-color .35s var(--ease)}
html[data-theme="dark"] .site-header{background:rgba(10,11,10,.75)}
.site-header.is-scrolled{background:var(--surface);box-shadow:var(--shadow-sm)}
.header-inner{min-height:var(--header-h);display:flex;align-items:center;gap:18px;position:relative;transition:min-height .35s var(--ease)}
.site-header.is-scrolled .header-inner{min-height:54px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0;color:var(--navy)}
.logo em{font-style:normal;color:var(--green)}
html[data-theme="dark"] .logo em{color:#3ECF74}
.logo-mark{width:46px;height:46px;flex:0 0 auto;display:block}
.logo-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.logo-name{font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:20px;letter-spacing:-0.02em;color:var(--navy);white-space:nowrap}
.logo-name em{font-style:normal;color:var(--green)}
html[data-theme="dark"] .logo-name em{color:#3ECF74}
.modal-logo{justify-content:center;margin:2px 0 10px}
.logo-tag{font-family:'Inter',sans-serif;font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.02em;margin-top:2px}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.main-nav a{font-size:14.5px;font-weight:600;color:var(--navy);padding:8px 12px;border-radius:999px;white-space:nowrap;transition:background-color .25s var(--ease),color .25s var(--ease)}
.main-nav a.active{background:var(--green-grad);color:#fff;box-shadow:0 4px 12px rgba(9,110,52,.24)}
.main-nav a:not(.active):hover{background:var(--mint)}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:6px;flex-shrink:0}
.theme-toggle{width:40px;height:40px;border-radius:999px;border:1px solid var(--hair);background:var(--surface);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.theme-toggle:hover{border-color:var(--green);transform:translateY(-1px)}
.theme-toggle svg{width:19px;height:19px}
[data-theme="light"] .icon-moon{display:none}
[data-theme="dark"] .icon-sun{display:none}
.icon-sun,.icon-moon{flex:0 0 auto}
.burger{display:none;width:42px;height:42px;border:1px solid var(--hair);background:var(--surface);border-radius:var(--r-sm);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:border-color .2s var(--ease)}
.burger:hover{border-color:var(--green)}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease),opacity .2s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


/* ---------- Buttons: one pill system ----------
   primary   = green gradient, white text, soft green shadow
   secondary = white surface, green border, navy text
   ghost     = same white/green treatment (hero sits on light now)
   white     = white on the green CTA band, green text
   Every variant lifts 1px on hover; .is-closed / disabled are inert. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;border-radius:999px;font:inherit;font-weight:700;font-size:15px;line-height:1.25;cursor:pointer;text-align:center;min-height:44px;padding:12px 22px;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn .btn-arrow{width:18px;height:18px;flex:0 0 auto;transition:transform .2s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(2px)}
.btn .btn-play{width:15px;height:15px;flex:0 0 auto}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.1s}
.btn-small{min-height:40px;padding:9px 18px;font-size:14px}
.btn-large{min-height:52px;padding:14px 26px;font-size:16px}
.btn-full{width:100%}
.btn-primary{background:var(--green-grad);color:#fff;box-shadow:0 6px 18px rgba(9,110,52,.26),inset 0 1px 0 rgba(255,255,255,.14)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(9,110,52,.30),inset 0 1px 0 rgba(255,255,255,.14)}
.btn-secondary{background:var(--surface);border-color:var(--green);color:var(--navy)}
.btn-secondary:hover{transform:translateY(-1px);background:var(--mint);box-shadow:var(--shadow-sm)}
.btn-ghost{background:var(--surface);border-color:var(--green);color:var(--navy)}
.btn-ghost:hover{transform:translateY(-1px);background:var(--mint);box-shadow:var(--shadow-sm)}
.btn-white{background:#fff;color:var(--green-dark);box-shadow:0 10px 24px rgba(0,0,0,.15)}
.btn-white:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.20)}
.btn[disabled],.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn.is-closed{background:#8A97AB;border-color:#8A97AB;color:#fff;box-shadow:none;cursor:not-allowed}
.btn.is-closed:hover{transform:none;box-shadow:none}
.btn.is-loading{opacity:.75;cursor:wait}
.text-link{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--green-dark);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color .2s var(--ease)}
.text-link:hover{color:var(--green)}

/* ---------- Hero: light surface, two columns ----------
   Left column carries badge, headline, checklist, CTAs and the session
   status; right column is the framed photo block from the reference.
   Text never sits on the photo — it lives in .photo-frame only. */
.hero{position:relative;overflow:hidden;padding:34px 0 26px}
.hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(880px 420px at 50% -8%,rgba(12,154,74,.05),transparent 65%)}
@keyframes heroDrift{from{transform:translate3d(-1.2%,0,0)}to{transform:translate3d(1.2%,1.5%,0)}}
.hero-content{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:start;padding-top:clamp(1.2rem,4vw,2.6rem)}
.hero-copy{min-width:0}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px}
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--navy);border:1px solid var(--hair);box-shadow:var(--shadow);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:800}
.hero-pill svg{width:15px;height:15px;color:#C79A0B;flex-shrink:0}
html[data-theme="dark"] .hero-pill{color:#EAF2FB}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;flex-shrink:0;animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.45}}
.hero h1{font-size:clamp(34px,9.2vw,58px);font-weight:800;letter-spacing:-.028em;line-height:1.06;text-wrap:balance;margin:18px 0 0}
.hero-sub{font-size:17.5px;color:var(--ink-soft);margin:16px 0 18px;max-width:520px;line-height:1.6}
.hero-checklist{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.hero-checklist li{display:flex;gap:11px;align-items:flex-start;font-weight:600;font-size:15.5px;color:var(--ink)}
.check-icon,.check{width:24px;height:24px;padding:5px;flex-shrink:0;border-radius:50%;background:var(--green-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;margin-top:1px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.hero-login-hint{margin-top:10px;color:var(--muted);font-size:14px}
.hero-login-hint a{color:var(--green-dark);font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(18,161,80,.4);transition:text-decoration-color .2s var(--ease)}
.hero-login-hint a:hover{text-decoration-color:var(--green)}
.session-status{min-height:1.65em;margin:10px 0 0;color:var(--green-dark);font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.session-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}
.session-status.is-closed{color:#9A6B00}
html[data-theme="dark"] .session-status.is-closed{color:#FFE082}
.session-status.is-closed::before{background:#E0A100}
.session-status-text{line-height:1.5}
.skeleton-line{display:inline-block;width:min(300px,72vw);height:.85em;border-radius:99px;background:var(--hair);animation:skeletonPulse 1.6s ease-in-out infinite}
@keyframes skeletonPulse{0%,100%{opacity:.55}50%{opacity:1}}
.hero-media{position:relative;padding:6px;min-width:0}
.photo-frame{background:#fff;border:1px solid var(--hair);border-radius:24px;padding:9px;box-shadow:var(--shadow-lg);position:relative;z-index:1}
.photo-frame img{border-radius:17px;width:100%;height:auto;aspect-ratio:937/555;object-fit:cover;display:block}

/* Hero preview strip — auto-advancing Teil cards (reference strip-cards:
   white cards, soft tinted visual tiles, one next arrow). Motion lives
   in main.js via transform; CSS only lays the cards out. */
.preview-strip{position:relative;z-index:1;margin-top:clamp(1.9rem,5vw,2.9rem);text-align:left}
.preview-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:14px;padding:0 2px}
.preview-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
html[data-theme="dark"] .preview-label{color:#3ECF74}
.preview-next{position:relative;width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:1px solid var(--hair);background:var(--surface);box-shadow:var(--shadow-lg);font-size:19px;cursor:pointer;z-index:3;color:var(--navy);display:grid;place-items:center;transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.preview-next svg{width:19px;height:19px}
.preview-next:hover{background:var(--green-grad);color:#fff;transform:translateX(2px)}
.preview-next:active{transform:translateX(0)}
.preview-viewport{overflow:hidden;border-radius:var(--radius);margin:0 -2px;padding:4px 2px 10px}
.preview-track{display:flex;gap:16px;transition:transform .56s var(--ease);will-change:transform}
.preview-card{--pv-h:112px;flex:0 0 calc(33.333% - 11px);background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden;color:var(--ink);transition:border-color .4s var(--ease)}
.preview-card.is-active{border-color:var(--green)}
.preview-check{position:absolute;top:calc(var(--pv-h,112px) - 13px);right:14px;width:26px;height:26px;border-radius:50%;background:var(--green-grad);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.7);transition:opacity .35s var(--ease),transform .35s var(--ease);z-index:2;box-shadow:0 6px 14px rgba(14,168,90,.4)}
.preview-check svg{width:14px;height:14px}
.preview-card.is-active .preview-check{opacity:1;transform:scale(1)}
.preview-visual{position:relative;height:var(--pv-h,112px);display:flex;align-items:center;justify-content:flex-start;padding:0 20px;overflow:hidden}
.preview-visual>svg{width:48px;height:48px;padding:11px;background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);position:relative;z-index:1}
.pv-ghost{position:absolute;right:.9rem;bottom:.35rem;font-family:'Nunito',sans-serif;font-size:4.3rem;font-weight:900;letter-spacing:-.04em;color:rgba(11,37,69,.08);line-height:1;z-index:0}
html[data-theme="dark"] .pv-ghost{color:rgba(255,255,255,.10)}
.pv-write{background:var(--mint);color:#0B6B3A}
.pv-t1{background:var(--sky);color:#144A8A}
.pv-t2{background:var(--rose);color:#9D3B57}
.pv-t3{background:var(--cream);color:#9A6B00}
.pv-photo{background:#0B2545}
.pv-photo img,.pv-photo .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-photo{object-fit:cover}
.pv-photo-chip{position:absolute;left:.8rem;bottom:.8rem;z-index:1;background:rgba(7,16,34,.88);color:#fff;font-size:.78rem;font-weight:700;padding:.36rem .7rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.22)}
.preview-body{padding:18px 20px 20px}
.preview-meta{display:flex;align-items:center;justify-content:space-between;gap:.8rem;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.preview-meta b{color:var(--green-dark);font-size:.92rem;letter-spacing:.01em;text-transform:none}
.preview-body h3{font-size:17px;font-weight:800;margin:10px 0 6px}
.preview-body p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

/* ---------- Stats: white card row (reference trust strip) ---------- */
.stats-band{padding:10px 0 6px}
.stats-grid{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(5,1fr);padding:8px 10px}
.stat{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;font-weight:700;font-size:14.5px;padding:14px 8px;text-align:center}
.stat+.stat{border-left:1px solid var(--hair)}
.stat strong{display:block;font-family:'Nunito',sans-serif;font-size:clamp(26px,4vw,34px);font-weight:900;color:var(--navy);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.counter{font-variant-numeric:tabular-nums}
.stat>span:last-child{color:var(--muted);font-size:.86rem;font-weight:600;line-height:1.4;display:block;margin-top:.2rem}

/* ---------- Sections ---------- */
.section{padding:clamp(3.2rem,7vw,4.8rem) 0}
.section-alt{background:var(--alt-bg)}
.section-head{text-align:center;max-width:640px;margin:0 auto 28px}
.section-head p{color:var(--muted);margin:8px 0 0;line-height:1.6}
.lead{color:var(--ink-soft);font-size:17px;line-height:1.65}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
html[data-theme="dark"] .eyebrow{color:#3ECF74}
h2{font-size:clamp(24px,3.4vw,32px);font-weight:900;margin:0 0 8px}
.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:2.6rem;align-items:start}
.two-col p{color:var(--muted);line-height:1.65}
.two-col .lead{color:var(--ink-soft)}
.about-points{display:grid;gap:12px;margin-top:1.4rem}
.about-point{display:flex;gap:.85rem;align-items:flex-start;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.about-point:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.about-point>svg{width:22px;height:22px;flex:0 0 auto;color:var(--green);margin-top:.15rem}
.about-point strong{color:var(--navy)}
.about-point small{display:block;color:var(--muted);margin-top:.15rem;line-height:1.5}
.about-visual{position:relative}
.visual-card{padding:26px 26px 68px}
.visual-card p{color:var(--muted);line-height:1.65}
.visual-card h3{font-size:20px;font-weight:800;line-height:1.25}
.visual-icon{width:72px;height:72px;border-radius:18px;background:var(--mint);display:grid;place-items:center;margin-bottom:14px}
.visual-icon svg{width:104px;height:auto}
.visual-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.visual-tags span{background:var(--mint);color:var(--green-dark);font-weight:700;font-size:.82rem;padding:.32rem .72rem;border-radius:var(--r-pill)}
.floating-badge{position:absolute;display:inline-flex;align-items:center;gap:.45rem;background:var(--surface);border:1px solid var(--hair);box-shadow:var(--shadow);border-radius:var(--r-pill);padding:.48rem .95rem;font-weight:700;font-size:.85rem;color:var(--ink);z-index:2}
.floating-badge svg{width:16px;height:16px;color:var(--green);flex:0 0 auto}
.fb1{top:14px;right:14px}
.fb2{bottom:14px;left:14px}

/* ---------- Cards ---------- */
.glass-card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow)}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-card{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:22px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.feature-card h3{font-size:17px;font-weight:800;margin:10px 0 6px}
.feature-card p{color:var(--muted);margin:0 0 14px;font-size:14.5px;line-height:1.6}
/* Card CTA: always visible (no hover gating — touch and keyboard users
   must see it too), pinned to the card's bottom edge by the flex column
   so no dead white space opens under shorter texts. One green system
   for offer and exam cards alike. */
.card-cta{position:static;margin-top:auto;z-index:1;display:inline-flex;align-items:center;gap:7px;background:var(--green-grad);color:#fff;font-size:12.5px;font-weight:800;padding:6px 13px;border-radius:999px;align-self:flex-start;box-shadow:0 5px 12px rgba(9,110,52,.22)}
.card-cta svg{width:15px;height:15px;color:#fff;transition:transform .25s var(--ease)}
.card-cta:hover svg{transform:translateX(2px)}
.card-cta-dark{background:var(--green-grad);color:#fff}
.icon-tile{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:6px;flex:0 0 auto}
.icon-tile svg{width:24px;height:24px}
.icon-green{background:var(--mint);color:#0B6B3A}
.icon-blue{background:var(--sky);color:#1D4ED8}
.icon-purple{background:var(--lilac);color:#6D28D9}
.icon-orange{background:var(--peach);color:#C2570B}
.icon-teal{background:var(--mint);color:#0E7490}
.icon-gold{background:var(--cream);color:#947208}
html[data-theme="dark"] .icon-green{color:#5EE79A}
html[data-theme="dark"] .icon-blue{color:#8FC1FF}
html[data-theme="dark"] .icon-purple{color:#C4B0F5}
html[data-theme="dark"] .icon-orange{color:#FFB066}
html[data-theme="dark"] .icon-teal{color:#7DD3E0}
html[data-theme="dark"] .icon-gold{color:#ECD97E}
html[data-theme="dark"] .pv-write{color:#5EE79A}
html[data-theme="dark"] .pv-t1{color:#8FC1FF}
html[data-theme="dark"] .pv-t2{color:#FFB3C1}
html[data-theme="dark"] .pv-t3{color:#FFE082}

/* ---------- Exam strip ---------- */
.exam-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.exam-card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.exam-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.exam-card h3{font-size:17px;font-weight:800;margin:10px 0 6px}
.exam-card p{color:var(--muted);margin:0 0 14px;font-size:14.5px;line-height:1.6}
.exam-num{display:inline-flex;background:var(--mint);color:var(--green-dark);font-weight:800;font-size:12px;padding:5px 11px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;align-self:flex-start}
.exam-card .icon-tile{margin-top:12px}

/* ---------- Steps + flow ---------- */
.steps{display:flex;align-items:stretch;gap:12px}
.step{flex:1;background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.step-num{width:36px;height:36px;border-radius:50%;background:var(--green-grad);color:#fff;font-family:'Nunito',sans-serif;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:12px;box-shadow:0 6px 14px rgba(14,168,90,.3)}
.step-week{display:inline-flex;background:var(--mint);color:var(--green-dark);font-weight:800;font-size:12px;padding:5px 11px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.step h3{font-size:17px;font-weight:800;margin:10px 0 6px}
.step p{color:var(--muted);margin:0;font-size:14.5px;line-height:1.6}
.step-arrow{align-self:center;color:var(--muted);flex:0 0 auto;display:grid;place-items:center}
.step-arrow svg{width:20px;height:20px}
.how-it-works{margin-top:30px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}
.how-it-works h3{margin:0 0 1.1rem;font-size:20px;font-weight:800}
.flow-list{list-style:none;counter-reset:flow;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem 2rem}
.flow-list li{counter-increment:flow;display:grid;gap:.2rem;padding-left:2.9rem;position:relative;color:var(--muted);line-height:1.6}
.flow-list li::before{content:counter(flow);position:absolute;left:0;top:.05rem;width:32px;height:32px;border-radius:50%;background:var(--mint);color:var(--green-dark);font-weight:800;font-size:.95rem;display:grid;place-items:center}
.flow-list li strong{color:var(--navy)}

/* ---------- CTA band + contact ---------- */
#ablauf{padding-bottom:1.8rem}
.cta-band{padding:1.1rem 0 10px}
#kontakt{padding-top:2.6rem}
.cta-inner{background:linear-gradient(180deg,#0D8A41,#0A6B34);border-radius:24px;padding:38px 30px;color:#fff;box-shadow:0 20px 44px rgba(9,110,52,.28),inset 0 1px 0 rgba(255,255,255,.16);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.cta-inner h2{color:#fff;font-size:clamp(24px,3.4vw,32px);font-weight:900;margin:0 0 10px}
.cta-inner p{color:rgba(255,255,255,.92);margin:0;max-width:56ch;line-height:1.65}

.contact-wrap{min-width:0}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.contact-card{padding:26px 22px;text-align:center;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.contact-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.contact-card>svg{width:28px;height:28px;color:var(--green)}
.contact-card h3{font-size:17px;font-weight:800;margin:10px 0 6px}
.contact-card p{color:var(--muted);margin:0;font-size:14.5px;line-height:1.6}

/* ---------- Footer ---------- */
.site-footer{padding:34px 0 44px;color:var(--muted)}
.footer-top{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.2rem;align-items:start}
.logo-footer{color:var(--navy)}
.logo-footer .logo-name{font-size:18px}
.logo-footer .logo-mark{width:40px;height:40px}
.footer-brand p{color:var(--muted);font-size:14px;max-width:42ch;margin:10px 0 0;line-height:1.65}
.footer-col{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}
.footer-col h3{color:var(--navy);font-size:.95rem;margin:.55rem 0 .5rem;letter-spacing:.02em}
.footer-col a,.footer-login{color:var(--muted);font-size:.94rem;transition:color .2s var(--ease)}
.footer-col a:hover,.footer-login:hover{color:var(--green-dark)}
.footer-login{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left}
.footer-bottom{padding:1.15rem 6px 0;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;justify-content:space-between;font-size:.9rem}
.footer-bottom p{margin:0}
.footer-meta{color:var(--muted);font-weight:600}
.footer-top-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--green-dark)}
.footer-top-link svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.footer-top-link:hover svg{transform:translateY(-2px)}

/* ---------- Reveal (transform/opacity only, staggered by JS var) ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:var(--reveal-delay,0ms)}
.reveal.visible{opacity:1;transform:none}
/* Card hover lift must win over the reveal end-state (same specificity,
   so this rule intentionally sits after the reveal block). */
.feature-card.reveal:hover,.exam-card.reveal:hover,.step.reveal:hover,.contact-card.reveal:hover{transform:translateY(-3px)}

/* ---------- Modals (registration + login share one shell) ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,12,11,.55);backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);z-index:80;display:grid;place-items:end center;padding:0}
.modal-backdrop[hidden]{display:none!important}
.modal{background:var(--surface);color:var(--ink);width:min(560px,100%);max-height:92dvh;overflow:auto;border-radius:28px 28px 0 0;padding:24px;position:relative;box-shadow:var(--shadow-lg);animation:modalUp .3s var(--ease)}
.modal .logo-mark{width:38px;height:38px}
@keyframes modalUp{from{transform:translateY(14px) scale(.975);opacity:0}to{transform:none;opacity:1}}
@media(min-width:640px){.modal-backdrop{place-items:center;padding:1rem}.modal{border-radius:28px}}
.modal-login{width:min(480px,100%)}
.modal h2{font-size:clamp(24px,4vw,28px);font-weight:900}
.modal-close{position:absolute;top:.85rem;right:.95rem;width:38px;height:38px;border-radius:50%;border:1px solid var(--hair);background:var(--surface);cursor:pointer;color:var(--ink);display:grid;place-items:center;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.modal-close svg{width:17px;height:17px}
.modal-close:hover{border-color:var(--green);transform:translateY(-1px)}
.modal-close:active{transform:translateY(0)}
.modal-sub{color:var(--muted);line-height:1.65}
.auth-form,#registerForm{display:grid;gap:.9rem;margin-top:1.1rem}
#registerForm{gap:.7rem}
/* The register form is longer than short viewports: its submit (moved
   out of the <form>, bound via form="registerForm", parent = the full
   scroll content) stays pinned to the dialog's bottom edge while the
   content scrolls under it — the primary action is never below the fold. */
#registerView>button[type="submit"]{position:sticky;bottom:0;z-index:3;margin-top:.7rem;box-shadow:0 6px 18px rgba(9,110,52,.26),0 -14px 20px 8px var(--surface)}
#registerView>button[type="submit"]+.form-hint{margin-top:.7rem}
.modal form label,.auth-form label,#registerForm label{display:grid;gap:.32rem;font-weight:700;font-size:.93rem;color:var(--ink)}
.modal form input,.auth-form input,#registerForm input{width:100%;min-height:46px;padding:.72rem .92rem;border:1.5px solid var(--hair);border-radius:var(--r-sm);background:var(--input-bg);color:var(--ink);font:inherit;font-size:1rem;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.modal form input:hover,.auth-form input:hover,#registerForm input:hover{border-color:var(--green)}
.modal form input:focus,.auth-form input:focus,#registerForm input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(18,161,80,.22)}
.field-error{color:#C62828;font-weight:600;min-height:.9em;font-size:.82rem}
html[data-theme="dark"] .field-error{color:#FF9A92}
.form-error{background:var(--rose);color:#8F1D16;border:1px solid #F2C1BC;padding:.72rem .95rem;border-radius:var(--r-sm);margin:0;line-height:1.55}
html[data-theme="dark"] .form-error{color:#FFB3AC;border-color:#6E2A26}
.form-hint{color:var(--muted);font-size:.86rem;text-align:center;margin:0;line-height:1.55}
.form-switch{color:var(--muted);font-size:.92rem;text-align:center;margin:.1rem 0 0}
.closed-notice{background:var(--cream);border:1px solid #F3E3AE;color:#7A5A00;padding:1rem 1.1rem;border-radius:var(--r-md);line-height:1.6}
.closed-notice p{margin:.35rem 0 0}
html[data-theme="dark"] .closed-notice{color:#FFE082;border-color:#6B5A1E}
/* Niveau-Wahl (Deutsch Arena): zwei Karten oben im Registrierungs-Dialog.
   Die Registrierung läuft unter dem gewählten Niveau (B1/B2); ein Niveau
   ohne offene Session wird per JS deaktiviert (.is-closed). */
.level-picker{border:0;padding:0;margin:0;display:grid;gap:.5rem;min-width:0}
.level-picker legend{font-weight:700;font-size:.93rem;color:var(--ink);padding:0;margin-bottom:.5rem}
.level-options{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.level-option{cursor:pointer;position:relative}
#registerForm .level-option input{position:absolute;opacity:0;width:auto;min-height:0;padding:0;border:0}
.level-card{display:grid;gap:.15rem;border:1.5px solid var(--hair);border-radius:var(--r-sm);padding:.7rem .9rem;background:var(--input-bg);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.level-card strong{font-size:1.15rem;letter-spacing:-.01em}
.level-card small{color:var(--muted);font-weight:600;font-size:.8rem;line-height:1.4}
.level-option input:checked + .level-card{border-color:var(--green);box-shadow:0 0 0 3px rgba(18,161,80,.22)}
.level-option input:focus-visible + .level-card{outline:2px solid var(--green);outline-offset:2px}
.level-option.is-closed{opacity:.45;pointer-events:none}
.success-icon{width:60px;height:60px;border-radius:50%;background:var(--green-grad);color:#fff;display:grid;place-items:center;margin-bottom:.85rem;box-shadow:0 10px 22px rgba(14,168,90,.32)}
.success-icon svg{width:28px;height:28px}
.success-box{background:var(--mint);border:1px solid var(--hair);border-radius:var(--r-md);padding:1rem 1.15rem;margin:1rem 0;line-height:1.6}
.success-box ol{margin:.5rem 0;padding-left:1.2rem}
.success-box li{margin:.45rem 0}
.success-ref{margin:.6rem 0 0}
.status-pill{background:#E07F00;color:#fff;font-weight:800;font-size:.8rem;padding:.2rem .62rem;border-radius:var(--r-pill)}
.login-preview{border:1.5px dashed var(--hair);border-radius:var(--r-md);padding:.95rem 1.05rem;background:var(--mint)}
.login-preview p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
.login-preview-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.75rem}

/* ---------- Responsive ---------- */
@media(max-width:1020px){
  .preview-card{flex-basis:calc(50% - 8px)}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .stat+.stat{border-left:none}
  .stat{border-top:1px solid var(--hair)}
  .stat:nth-child(-n+3){border-top:none}
}
@media(max-width:980px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .exam-strip{grid-template-columns:repeat(2,1fr)}
  .steps{flex-wrap:wrap}
  .step{flex:1 1 42%}
  .step-arrow{display:none}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:900px){
  .main-nav{position:absolute;top:calc(var(--header-h) + 10px);left:1rem;right:1rem;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-md);box-shadow:var(--shadow-lg);flex-direction:column;align-items:stretch;padding:.7rem;gap:.2rem;display:none;margin-left:0}
  .main-nav.open{display:flex}
  .main-nav a{padding:.6rem .8rem}
  .burger{display:flex}
  .header-actions{margin-left:auto}
  .hero-content{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .about-visual{margin-top:1rem}
}
@media(max-width:760px){
  .photo-frame img{height:auto}
  .logo-tag{font-size:10px}
  .logo-name{font-size:17px}
  .preview-card{flex-basis:82%}
  .cards-grid,.exam-strip,.contact-grid{grid-template-columns:1fr}
  .flow-list{grid-template-columns:1fr}
  .cta-inner{flex-direction:column;align-items:stretch;text-align:center}
  .cta-inner .btn{width:100%}
}
@media(max-width:560px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-top:1px solid var(--hair)}
  .stat:nth-child(-n+2){border-top:none}
  .stat:last-child{grid-column:1/-1}
  .step{flex:1 1 100%}
  .hero-cta .btn{width:100%}
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center;justify-content:center}
  .how-it-works{padding:20px}
  .floating-badge{font-size:.8rem;padding:.42rem .8rem}
}
@media(max-width:520px){
  .header-inner{gap:.45rem}
  .logo{gap:.4rem;min-width:0}
  .logo-mark{width:32px;height:32px}
  .logo-name{font-size:15px}
  .header-actions{gap:.35rem;margin-left:auto}
  .theme-toggle{width:36px;height:36px}
  .burger{width:38px;height:38px}
  .header-actions .btn-secondary{display:none}
  .header-actions .btn-small{min-height:38px;padding:.45rem .8rem;font-size:.86rem}
  .preview-card{--pv-h:96px}
  .preview-body{padding:16px 18px 18px}
}

/* ---------- Reduced motion: everything static, content simply there ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .hero-fx{animation:none}
  .pulse-dot{animation:none}
  .skeleton-line{animation:none}
  /* Carousel fully static: no sliding, no auto-advance — the track
     wraps into a plain grid and every card is simply there. */
  .preview-track{transform:none!important;flex-wrap:wrap}
  .preview-card{flex:1 1 260px}
  .preview-next{display:none}
  .preview-check{transition:none}
}

/* ==== Icon polish (2026-11-05): inline SVG icons in chips + hints ==== */
.hint-ic{width:15px;height:15px;vertical-align:-2.5px;margin-right:2px}

/* ==== Living brand lockup — LOGIN dialog only (2026-11-05) ====
   The register dialog's lockup stays still; only the login lockup
   breathes (mark pulse). Transform only; fully off under
   prefers-reduced-motion. */
.modal-logo.living .logo-mark{animation:markPulse 3.4s ease-in-out infinite}
@keyframes markPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
@media(prefers-reduced-motion:reduce){
  .modal-logo.living .logo-mark{animation:none}
}

/* ==== Wow wave (2026-11-05): countdown, Hörprobe, cert tilt, Ablauf story ==== */

/* --- Live countdown card in the hero (glass) --- */
.countdown-card{margin-top:14px;max-width:540px;background:rgba(255,255,255,.68);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--hair);border-radius:18px;box-shadow:var(--shadow-sm);padding:16px 18px}
html[data-theme="dark"] .countdown-card{background:rgba(22,24,22,.68)}
.countdown-card:empty{display:none}
.cd-title{margin:0;font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;color:var(--navy)}
.cd-session{margin:2px 0 0;font-size:13px;color:var(--muted);font-weight:600}
.cd-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.cd-tile{background:var(--mint);border-radius:14px;padding:9px 4px 7px;text-align:center}
.cd-tile strong{display:block;font-family:'Nunito',sans-serif;font-size:clamp(20px,5vw,26px);font-weight:900;color:var(--navy);line-height:1.05;font-variant-numeric:tabular-nums}
.cd-tile span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dark);margin-top:2px}
.cd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cd-chip{display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--hair);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;color:var(--ink)}
.cd-chip.is-full{color:var(--muted);background:var(--surface-2);text-decoration:none}
.cd-note{margin:0;font-size:14px;font-weight:700;color:var(--ink);line-height:1.55}
.cd-note-sub{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.55}

/* --- Hörprobe --- */
.hoerprobe-section{padding-top:clamp(1.4rem,4vw,2.2rem)}
.hoerprobe-card{max-width:860px;margin:0 auto;padding:24px}
.hoerprobe-head{display:flex;align-items:center;gap:16px}
.hoerprobe-toggle{width:58px;height:58px;flex:0 0 auto;border-radius:50%;border:0;background:var(--green-grad);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 24px rgba(14,168,90,.32);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.hoerprobe-toggle:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(14,168,90,.40)}
.hoerprobe-toggle:active{transform:scale(.96)}
.hoerprobe-toggle svg{width:26px;height:26px}
.hoerprobe-toggle .hp-icon-pause{display:none}
.hoerprobe-toggle.is-playing .hp-icon-play{display:none}
.hoerprobe-toggle.is-playing .hp-icon-pause{display:block}
.hoerprobe-meta{display:grid;gap:2px;min-width:0}
.hoerprobe-meta strong{font-family:'Nunito',sans-serif;font-size:16.5px;color:var(--navy);line-height:1.3}
.hoerprobe-meta span{font-size:13px;color:var(--muted);font-weight:600}
.hoerprobe-text{margin:18px 0 0;background:var(--surface-2);border:1px solid var(--hair);border-radius:var(--r-md);padding:16px 18px;font-size:16.5px;line-height:1.95;color:var(--ink)}
.hoerprobe-text .w{border-radius:5px;padding:0 .08em;transition:background-color .12s var(--ease),box-shadow .12s var(--ease)}
.hoerprobe-text .w.w-active{background:#B9EFCD;box-shadow:0 0 0 2px var(--green) inset;color:#0A2E1A;font-weight:700}
html[data-theme="dark"] .hoerprobe-text .w.w-active{background:rgba(56,201,92,.32);color:#EAF9F0}
.hoerprobe-hint{margin:12px 2px 0;font-size:13px;color:var(--muted);line-height:1.6}
@media(max-width:560px){.hoerprobe-card{padding:18px}.hoerprobe-text{font-size:15.5px;padding:14px}}

/* --- Zertifikat card: tactile tilt + shine (JS drives transform + --mx/--my) --- */
.cert-card{--mx:50%;--my:50%;will-change:transform}
.cert-card::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.55),rgba(56,201,92,.16) 38%,transparent 65%);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.cert-card:hover::after{opacity:1}
.cert-card.is-pressed{transform:scale(.985)}
.cert-meta{display:inline-flex;margin-top:12px;background:var(--cream);color:#947208;font-weight:800;font-size:12px;padding:5px 11px;border-radius:999px;letter-spacing:.04em}
html[data-theme="dark"] .cert-meta{color:#ECD97E}
@media(prefers-reduced-motion:reduce){
  .cert-card{transform:none!important}
  .cert-card::after{display:none}
}

/* --- Ablauf story: horizontal scroll-snap track --- */
.story-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.story-track::-webkit-scrollbar{display:none}
.story-panel{flex:0 0 340px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.story-panel h3{font-size:17px;font-weight:800;margin:10px 0 6px}
.story-panel p{color:var(--muted);margin:0;font-size:14.5px;line-height:1.6}
.story-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:2px}
.story-arrow{width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:1px solid var(--hair);background:var(--surface);box-shadow:var(--shadow-sm);color:var(--navy);cursor:pointer;display:grid;place-items:center;transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),opacity .25s var(--ease)}
.story-arrow svg{width:19px;height:19px}
.story-arrow:hover{background:var(--green-grad);color:#fff}
.story-arrow:active{transform:scale(.94)}
.story-arrow[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none}
.story-arrow[disabled]:hover{background:var(--surface);color:var(--navy)}
.story-dots{display:flex;align-items:center;gap:8px}
.story-dot{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:var(--hair);cursor:pointer;transition:background-color .25s var(--ease),transform .25s var(--ease)}
.story-dot.is-active{background:var(--green);transform:scale(1.3)}
@media(min-width:1024px){
  /* Desktop: all four week cards fit the container — no truncated 4th card,
     and no carousel nav (there is nothing left to scroll to). */
  .story-track{overflow-x:visible;scroll-snap-type:none}
  .story-panel{flex:1 1 0}
  .story-nav{display:none}
}
@media(max-width:760px){
  .story-panel{flex-basis:78%}
}

/* --- Motion-Pro: GSAP-Reveals + Lenis Smooth Scroll (motion.js) --- */
html.motion-pro .reveal{transition:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ==== THEME 2026 « Neutrale Präzision » — Verfeinerung (Apple × 21st) ====
   Eine Schrift für alles: Inter mit größenspezifischem Tracking ersetzt
   die runde Nunito-Schrift in Zahlen, Badges und Karten-Titeln.
   Schatten werden neutral und flach; Material reagiert auf die
   Zugänglichkeits-Schalter für Transparenz und Kontrast. */
.stat strong,.step-num,.cd-title,.cd-tile strong,.hoerprobe-meta strong{font-family:'Inter',system-ui,sans-serif;letter-spacing:-0.02em}
.stat strong{font-weight:800}
.step-num{font-weight:800}
.pv-ghost{font-family:'Inter',system-ui,sans-serif;letter-spacing:-0.05em;color:rgba(23,25,28,.06)}
html[data-theme="dark"] .pv-ghost{color:rgba(255,255,255,.07)}
.success-icon{box-shadow:0 8px 20px rgba(9,110,52,.26)}
.hoerprobe-toggle{box-shadow:0 8px 20px rgba(9,110,52,.26)}
.hoerprobe-toggle:hover{box-shadow:0 12px 26px rgba(9,110,52,.30)}
.preview-check{box-shadow:0 5px 12px rgba(9,110,52,.30)}
.card-cta{box-shadow:0 5px 12px rgba(9,110,52,.22)}
.theme-toggle:active,.burger:active{transform:scale(.94);transition-duration:.1s}
@media(prefers-reduced-transparency:reduce){
  .site-header,.countdown-card{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
  .modal-backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-contrast:more){
  :root{--hair:rgba(23,25,28,.28);--muted:#4B5563}
  html[data-theme="dark"]{--hair:rgba(255,255,255,.32);--muted:#C6C9C4}
}

/* ===== REAL ASSETS — 3D-Icons (Owner-Wunsch 2026-11-05) ===== */
.icon-tile img.ic3d{width:34px;height:34px;object-fit:contain}
.preview-visual>img.ic3d{width:48px;height:48px;padding:7px;background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);position:relative;z-index:1;object-fit:contain}
.about-point img.ic3d{width:44px;height:44px;padding:7px;border-radius:13px;background:var(--mint);object-fit:contain;flex:0 0 auto}
.about-point:nth-child(2) img.ic3d{background:var(--sky)}
.about-point:nth-child(3) img.ic3d{background:var(--rose)}
.visual-icon img.ic3d{width:44px;height:44px;object-fit:contain}
.floating-badge img.ic3d{width:18px;height:18px;object-fit:contain;flex:0 0 auto}
.contact-card>img.ic3d{width:48px;height:48px;padding:8px;background:var(--mint);border-radius:14px;object-fit:contain;margin:0 auto}
.contact-card:nth-child(2)>img.ic3d{background:var(--sky)}
.contact-card:nth-child(3)>img.ic3d{background:var(--cream)}
img.hint-ic3d{width:17px;height:17px;vertical-align:-3px;margin-right:2px;object-fit:contain}
.pv-photo img.pv-chip{inset:auto;top:12px;left:12px;width:48px;height:48px;padding:7px;background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);object-fit:contain;z-index:1}


/* ===== RGB-LICHTSYSTEM — digitale RGB-Beleuchtung (Owner-Wunsch 2026-11-05) =====
   Ersetzt alle Flaggen-Fotos: eine ruhige, fließende Lichtlinie unter dem
   Header und schwebende Lichtbalken unter der CTA und im Fuß. Tiefes
   Spektrum-Licht mit Bloom — kein Text liegt je auf den Effekten. */
/* Fließende Lichtlinie (Header) */
.rgb-strip{position:relative;height:5px;overflow:hidden;background:#0B0D10;box-shadow:0 0 14px rgba(80,140,255,.45),0 2px 26px rgba(255,61,216,.22)}
.rgb-strip::before{content:"";position:absolute;top:0;bottom:0;left:0;width:200%;background:var(--rgb-flow);animation:rgb-flow 16s linear infinite}
@keyframes rgb-flow{to{transform:translateX(-50%)}}
/* Schwebender Lichtbalken (CTA + Fuß) */
.rgb-bar{position:relative;height:52px;margin-top:14px}
.rgb-bar::before{content:"";position:absolute;left:4%;right:4%;top:50%;height:30px;transform:translateY(-50%);border-radius:999px;background:var(--rgb-grad);filter:blur(16px);opacity:.45}
.rgb-bar::after{content:"";position:absolute;left:1%;right:1%;top:50%;height:9px;transform:translateY(-50%);border-radius:999px;background:var(--rgb-grad);box-shadow:0 0 18px rgba(64,140,255,.50),0 0 38px rgba(255,61,216,.28),inset 0 1px 0 rgba(255,255,255,.55)}
html[data-theme="dark"] .rgb-bar::before{opacity:.62}
@media (prefers-reduced-motion:reduce){
  .rgb-strip::before{animation:none}
}

/* ================================================================
   THEME 2026 « Deutsch Arena » — Marken-Schicht (Owner-Referenz)
   Navy #0A1428 + Gold #C9A227/#E3B341. Kopf, Hero, Vertrauensleiste,
   Kurskarten und Vorteilsleiste bilden den Referenz-Bildschirm;
   alle übrigen Komponenten laufen über die Arena-Tokens oben.
   ================================================================ */

/* ---------- Wortmarke: « Deutsch » über « Arena » ---------- */
.logo-text{gap:1px}
.logo-name{display:block;line-height:1.06}
.logo-arena{background:linear-gradient(180deg,#F0CD6B,#C9A227);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.site-header .logo-name{color:#FFFFFF}
.footer-top .logo-name{color:#FFFFFF}

/* ---------- Kopf: Navy-Glas über der Szene (beide Modi) ---------- */
.site-header{background:rgba(6,11,24,.88);border-bottom:1px solid rgba(227,179,65,.25);color:#EDEAE0}
html[data-theme="dark"] .site-header{background:rgba(6,11,24,.88)}
.site-header.is-scrolled{background:rgba(6,11,24,.96);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.main-nav{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:5px}
.main-nav a{color:#D8DCE8;display:inline-flex;align-items:center;gap:5px}
.main-nav a:not(.active):hover{background:rgba(255,255,255,.10);color:#FFFFFF}
.main-nav a.active{background:var(--green-grad);color:#161006;box-shadow:0 4px 14px rgba(201,162,39,.35)}
.main-nav a.active:hover{background:var(--green-grad)}
.nav-home{width:15px;height:15px;flex:0 0 auto}
.nav-search{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 13px;color:#9AA6BE}
.nav-search svg{width:16px;height:16px;flex:0 0 auto}
.nav-search input{background:transparent;border:0;outline:none;color:#FFFFFF;font:inherit;font-size:14px;width:104px;padding:0;min-height:0}
.nav-search input::placeholder{color:#8B96B0}
@media(max-width:1280px){.nav-search{display:none}}
.de-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 12px;font-size:13.5px;font-weight:700;color:#EDEAE0;white-space:nowrap}
.de-pill svg{width:12px;height:12px;color:#9AA6BE}
.de-flag{width:17px;height:17px;border-radius:50%;flex:0 0 auto;background:linear-gradient(180deg,#191919 0 33%,#DD0000 33% 66%,#FFCC00 66% 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
@media(max-width:1020px){.de-pill{display:none}}
.site-header .theme-toggle{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#F0CD6B}
.site-header .theme-toggle:hover{border-color:var(--gold-2)}
.site-header .btn-secondary{background:transparent;border-color:rgba(255,255,255,.45);color:#FFFFFF;box-shadow:none}
.site-header .btn-secondary:hover{background:rgba(255,255,255,.10);border-color:#FFFFFF;box-shadow:none}
.site-header .burger{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.site-header .burger span{background:#FFFFFF}
.btn-user{width:16px;height:16px;flex:0 0 auto}
@media(max-width:900px){
  .main-nav{background:#0B1730;border-color:rgba(227,179,65,.25);border-radius:18px;padding:.7rem}
  .main-nav a{color:#D8DCE8}
}
@media(max-width:560px){
  .site-header .theme-toggle{display:none}
  .header-actions .btn-secondary{display:inline-flex}
  .header-actions .btn-primary{display:none}
  .header-actions{gap:.4rem}
  .header-inner{gap:.5rem}
}
@media(prefers-reduced-transparency:reduce){
  .site-header{background:#060C1B;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ---------- Schaltflächen: Gold-System ---------- */
.btn-primary{color:#161006;box-shadow:0 6px 18px rgba(169,128,20,.32),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{box-shadow:0 10px 26px rgba(169,128,20,.40),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-secondary{border-color:var(--gold)}
.btn-secondary:hover{background:var(--cream)}
.btn-ghost{border-color:var(--gold)}
.btn-ghost:hover{background:var(--cream)}
.card-cta{background:var(--green-grad);color:#161006;box-shadow:0 5px 12px rgba(169,128,20,.28)}
.card-cta svg{color:#161006}
.card-cta-dark{background:var(--green-grad);color:#161006}
.step-num{background:var(--green-grad);color:#161006;box-shadow:0 6px 14px rgba(169,128,20,.30)}
.check-icon{background:var(--green-grad);color:#161006}
.success-icon{background:var(--green-grad);color:#161006;box-shadow:0 8px 20px rgba(169,128,20,.30)}
.hoerprobe-toggle{background:var(--green-grad);color:#161006;box-shadow:0 8px 20px rgba(169,128,20,.30)}
.hoerprobe-toggle:hover{box-shadow:0 12px 26px rgba(169,128,20,.38)}
.preview-next:hover{background:var(--green-grad);color:#161006}
.preview-check{background:var(--green-grad);color:#161006;box-shadow:0 5px 12px rgba(169,128,20,.32)}
.preview-card.is-active{border-color:var(--gold)}
.story-arrow:hover{background:var(--green-grad);color:#161006}
.story-dot.is-active{background:var(--gold)}
.level-option input:checked + .level-card{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.28)}
.modal form input:hover,.auth-form input:hover,#registerForm input:hover{border-color:var(--gold)}
.modal form input:focus,.auth-form input:focus,#registerForm input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.25)}
.modal-close:hover{border-color:var(--gold)}
.eyebrow{color:var(--gold-deep)}
html[data-theme="dark"] .eyebrow{color:var(--gold-2)}
.preview-label{color:var(--gold-deep)}
html[data-theme="dark"] .preview-label{color:var(--gold-2)}
.icon-green{color:#947208}
.pv-write{color:#947208}
html[data-theme="dark"] .icon-green{color:#EBC65C}
html[data-theme="dark"] .pv-write{color:#EBC65C}
.hoerprobe-text .w.w-active{background:#F6E3A1;box-shadow:0 0 0 2px var(--gold) inset;color:#3A2E05}
html[data-theme="dark"] .hoerprobe-text .w.w-active{background:rgba(227,179,65,.32);color:#FFF3D6}
.cert-card::after{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.55),rgba(227,179,65,.18) 38%,transparent 65%)}

/* ---------- Hero: Nacht-Szene Berlin, Text als HTML darüber ---------- */
.hero{padding:0;background:#060C1B;isolation:isolate}
.hero-scene{position:absolute;inset:0;z-index:0;background:url("assets/arena-hero.jpg") center top/100% auto no-repeat #060C1B}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,9,20,.88) 0%,rgba(5,9,20,.78) 25%,rgba(5,9,20,.45) 45%,rgba(5,9,20,.15) 62%,rgba(5,9,20,.04) 80%,rgba(5,9,20,.02) 100%),linear-gradient(180deg,rgba(5,9,20,.42) 0%,transparent 30%,transparent 60%,rgba(6,12,27,.90) 100%)}
.hero-content{position:relative;z-index:2;display:block;padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(2rem,4vw,3rem)}
.hero-copy{max-width:660px;min-width:0}
.hero-pill{background:rgba(10,18,36,.55);border-color:rgba(227,179,65,.45);color:#FFFFFF;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(0,0,0,.30);font-size:13.5px;padding:8px 16px}
.hero-pill svg{color:var(--gold-2)}
html[data-theme="dark"] .hero-pill{color:#FFFFFF}
.hero h1{color:#FFFFFF;font-size:clamp(42px,6.4vw,82px);letter-spacing:-.03em;margin-top:20px;text-shadow:0 4px 30px rgba(0,0,0,.45)}
.hero h1 .line-gold{background:linear-gradient(92deg,#F6DC8E 0%,#E3B341 45%,#C9A227 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-sub{color:#D9DEE9;font-size:clamp(16px,1.7vw,19.5px);max-width:560px}
.hero-sub b{color:var(--gold-2);font-weight:800}
.hero .btn-ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.45);color:#FFFFFF;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.13);border-color:#FFFFFF}
.btn-compass{width:17px;height:17px;flex:0 0 auto}
.hero-login-hint{color:#A9B2C6}
.hero-login-hint a{color:var(--gold-2);text-decoration-color:rgba(227,179,65,.45)}
.session-status{color:#EDEAE0}
.session-status::before{background:#43D17C;box-shadow:0 0 10px rgba(67,209,124,.8)}
.session-status.is-closed{color:#FFD97A}
html[data-theme="dark"] .session-status.is-closed{color:#FFD97A}
.countdown-card{background:rgba(9,17,36,.66);border-color:rgba(227,179,65,.30)}
html[data-theme="dark"] .countdown-card{background:rgba(9,17,36,.66)}
.cd-title{color:#FFFFFF}
.cd-session{color:#A9B2C6}
.cd-tile{background:rgba(255,255,255,.07)}
.cd-tile strong{color:#FFFFFF}
.cd-tile span{color:var(--gold-2)}
.cd-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);color:#EDEAE0}
.cd-chip.is-full{background:rgba(255,255,255,.03);color:#8B96B0}
.cd-note{color:#EDEAE0}
.cd-note-sub{color:#A9B2C6}
@media(max-width:860px){
  .hero-scene{background-size:215% auto;background-position:42% 5%}
  .hero-content{padding-top:3.6rem}
}

/* ---------- Vertrauensleiste (Referenz) ---------- */
.arena-stats-band{background:#060C1B;padding:2px 0 4px}
.arena-stats{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:rgba(13,24,50,.72);border:1px solid rgba(227,179,65,.30);border-radius:20px;padding:16px 22px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.astat{display:flex;align-items:center;gap:12px;padding:4px 16px 4px 4px}
.astat + .astat{border-left:1px solid rgba(255,255,255,.12);padding-left:18px}
.astat svg{width:30px;height:30px;color:var(--gold-2);flex:0 0 auto}
.astat strong{display:block;color:#FFFFFF;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.astat span{display:block;color:#9AA6BE;font-size:12.5px;font-weight:600;margin-top:2px}
.mark-telc{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#FFFFFF}
.mark-telc small{display:block;font-size:8.5px;font-weight:700;letter-spacing:.24em;color:#C7CEDD;margin-top:3px}
.mark-goethe{font-size:15.5px;font-weight:800;letter-spacing:.06em;line-height:1.12;color:#FFFFFF}
.mark-goethe small{display:block;font-size:11px;letter-spacing:.28em}
.astat-mark svg{width:34px;height:34px;color:#FFFFFF}
.astat-script{margin:0 0 0 auto;font-family:'Caveat',cursive;font-size:clamp(22px,2.4vw,29px);color:var(--gold-2);white-space:nowrap;padding-left:12px}
@media(max-width:1020px){
  .arena-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 8px}
  .astat + .astat{border-left:none;padding-left:4px}
  .astat-script{grid-column:1/-1;text-align:center;margin:0;padding:4px 0 0}
}
@media(max-width:460px){
  .arena-stats{padding:14px}
  .astat{padding:2px 2px}
  .astat strong{font-size:20px}
  .astat svg{width:25px;height:25px}
}

/* ---------- Kurskarten B1 / B2 (Referenz) ---------- */
.arena-courses{background:#060C1B;padding:22px 0 4px}
.arena-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.acard{background:linear-gradient(155deg,#12234A,#0A1730 58%,#081226);border:1px solid rgba(227,179,65,.32);border-radius:24px;padding:16px;display:grid;grid-template-columns:42% 1fr;gap:18px;box-shadow:0 24px 54px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden}
.acard-visual{border-radius:16px;overflow:hidden;min-height:250px}
.acard-visual img{width:100%;height:100%;object-fit:cover}
.acard-body{display:flex;flex-direction:column;align-items:flex-start;padding:6px 4px 6px 0;min-width:0}
.acard h3{color:#FFFFFF;font-size:clamp(21px,2vw,27px);font-weight:800;letter-spacing:-.02em;margin:0}
.acard-sub{color:#C9D2E4;margin:7px 0 15px;font-size:15px;line-height:1.5}
.acard ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.acard li{display:flex;align-items:center;gap:10px;color:#E8EBF2;font-weight:600;font-size:14.5px}
.acheck{width:21px;height:21px;flex:0 0 auto;border-radius:50%;background:var(--green-grad);color:#161006;display:grid;place-items:center;box-shadow:0 4px 10px rgba(169,128,20,.35)}
.acheck svg{width:11px;height:11px}
.acard .btn{margin-top:auto}
@media(max-width:900px){
  .arena-cards{grid-template-columns:1fr}
  .acard{grid-template-columns:40% 1fr}
}
@media(max-width:560px){
  .acard{grid-template-columns:1fr;padding:14px}
  .acard-visual{min-height:170px;max-height:190px}
  .acard-body{padding:2px 2px 4px}
}

/* ---------- Vorteilsleiste + Prüfung-CTA (Referenz) ---------- */
.arena-features-band{background:#060C1B;padding:18px 0 32px}
.arena-features{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;background:rgba(13,24,50,.72);border:1px solid rgba(255,255,255,.11);border-radius:20px;padding:14px 16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.afeat{display:flex;align-items:center;gap:11px;padding:8px 14px;flex:1 1 auto}
.afeat + .afeat{border-left:1px solid rgba(255,255,255,.10)}
.afeat svg{width:27px;height:27px;color:var(--gold-2);flex:0 0 auto}
.afeat span{color:#FFFFFF;font-weight:700;font-size:14.5px;line-height:1.3}
.afeat-cta{margin-left:auto;display:flex;align-items:center;gap:13px;background:linear-gradient(120deg,#5B21B6,#7C3AED 55%,#9333EA);border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:11px 12px 11px 18px;color:#FFFFFF;cursor:pointer;font:inherit;text-align:left;box-shadow:0 14px 30px rgba(88,28,175,.35);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.afeat-cta:hover{transform:translateY(-1px);box-shadow:0 18px 36px rgba(88,28,175,.45)}
.afeat-rocket{width:30px;height:30px;flex:0 0 auto}
.afeat-cta-text{display:grid;gap:1px}
.afeat-cta-text strong{font-size:15px;font-weight:800;line-height:1.2}
.afeat-cta-text small{font-size:12px;color:rgba(255,255,255,.85);font-weight:600}
.afeat-go{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);display:grid;place-items:center}
.afeat-go svg{width:17px;height:17px}
.afeat-cta.is-closed{background:#5A6478;border-color:rgba(255,255,255,.20);box-shadow:none;cursor:not-allowed;transform:none}
@media(max-width:1020px){
  .arena-features{display:grid;grid-template-columns:1fr 1fr}
  .afeat + .afeat{border-left:none}
  .afeat-cta{grid-column:1/-1;margin-left:0}
}
@media(max-width:520px){
  .arena-features{grid-template-columns:1fr}
  .afeat{padding:7px 8px}
}

/* ---------- Vorschau-Streifen unter dem Referenz-Bildschirm ---------- */
.arena-preview{padding-top:clamp(2.2rem,5vw,3.4rem)}
.arena-preview .preview-strip{margin-top:0}

/* ---------- CTA-Band + Fuß in Navy/Gold ---------- */
.cta-inner{background:linear-gradient(150deg,#12234A,#0A1730 60%,#081226);border:1px solid rgba(227,179,65,.32);box-shadow:0 20px 44px rgba(4,8,20,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.cta-inner .btn-white{background:var(--green-grad);color:#161006;box-shadow:0 10px 24px rgba(169,128,20,.35)}
.site-footer{background:#060C1B;color:#9AA6BE;padding-top:44px}
.footer-top{background:#0B1730;border-color:rgba(227,179,65,.22);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.footer-col h3{color:#FFFFFF}
.footer-col a,.footer-login{color:#9AA6BE}
.footer-col a:hover,.footer-login:hover{color:var(--gold-2)}
.footer-brand p{color:#9AA6BE}
.footer-top-link{color:var(--gold-2)}
.footer-meta{color:#77839C}

/* Gold-Lichtlinie: Schatten des alten RGB-Systems auf Gold ziehen */
.rgb-strip{background:#060B18;box-shadow:0 0 14px rgba(227,179,65,.40),0 2px 26px rgba(201,162,39,.25)}
.rgb-bar::after{box-shadow:0 0 18px rgba(227,179,65,.50),0 0 38px rgba(201,162,39,.30),inset 0 1px 0 rgba(255,255,255,.55)}

/* ================================================================
   FIX-PASS — Kopf-Breite + Ablauf ohne starren Plan
   Die volle Kopfleiste braucht gemessen 1524 px (mit dem langen
   Label « Registrierung aktuell geschlossen »). Darum: eigener,
   breiterer Header-Container und EIN definierter Kollaps-Punkt
   bei 1660 px — oberhalb passt die Leiste mit Reserve, unterhalb
   klappt die Navigation ins Burger-Menü (Register-Aktion darin),
   und kein Element wird je abgeschnitten.
   ================================================================ */
.site-header .container{max-width:1640px}
.header-actions .btn{white-space:nowrap}
.nav-register{display:none}
@media(max-width:1660px){
  .main-nav{position:absolute;top:calc(var(--header-h) + 10px);left:1rem;right:1rem;background:#0B1730;border:1px solid rgba(227,179,65,.25);border-radius:18px;box-shadow:var(--shadow-lg);flex-direction:column;align-items:stretch;padding:.7rem;gap:.2rem;display:none;margin-left:0}
  .main-nav.open{display:flex}
  .main-nav a{padding:.6rem .8rem;color:#D8DCE8}
  .burger{display:flex}
  .header-actions{margin-left:auto}
  .nav-search{display:none}
  .de-pill{display:none}
  .nav-register{display:block;width:100%;margin-top:.45rem;min-height:44px}
}
@media(max-width:760px){
  .header-actions .btn-primary{display:none}
}
/* Ablauf: Inhalts-Säulen als ruhiges Raster statt Karussell */
.pillar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:14px}
.pillar-grid .story-panel{flex:none}
.pillar-chip{display:inline-flex;background:rgba(201,162,39,.14);color:var(--gold-2);border:1px solid rgba(201,162,39,.45);font-weight:800;font-size:12px;padding:5px 11px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
html[data-theme="light"] .pillar-chip{color:#8A6D1C;background:rgba(201,162,39,.16)}
.ablauf-note{max-width:720px;margin:18px auto 0;text-align:center;color:var(--muted);font-size:15px;line-height:1.65}

/* ================================================================
   GLASS SYSTEM — Deutsch Arena (Owner-Auftrag 2026-11-06: « mode glasse »)
   EIN Token-Satz für Public, Student und Manager (identische Werte):
   mattierte transluzente Flächen, Backdrop-Blur, feine Goldkante,
   weiches Tiefenlicht (Eck-Glow oben rechts wie auf der
   Zertifikat-Karte). --glass-bg = helle Fläche (Hellmodus),
   --glass-bg-dark = Navy-Fläche (Dunkelmodus + dunkle Panels in
   beiden Modi). Ohne Backdrop-Support und bei
   prefers-reduced-transparency: solide Flächen (--glass-solid*).
   ================================================================ */
:root{
  --glass-blur:18px;
  --glass-sat:165%;
  --glass-bg:linear-gradient(150deg,rgba(255,253,246,.80),rgba(255,247,228,.64));
  --glass-bg-dark:linear-gradient(150deg,rgba(25,43,84,.72),rgba(10,20,40,.62));
  --glass-solid:#FBF6E9;
  --glass-solid-dark:#0C1730;
  --glass-border:rgba(169,128,20,.40);
  --glass-border-dark:rgba(227,179,65,.38);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.80);
  --glass-hi-dark:inset 0 1px 0 rgba(255,240,200,.22);
  --glass-shadow:0 1px 2px rgba(10,20,40,.05),0 18px 42px rgba(10,20,40,.13);
  --glass-shadow-dark:0 1px 2px rgba(0,0,0,.35),0 18px 46px rgba(0,0,0,.45);
  --glass-glow:radial-gradient(430px circle at 88% -12%,rgba(255,238,175,.55),rgba(227,179,65,.15) 44%,transparent 70%);
  --glass-field:rgba(255,255,255,.55);
  --glass-field-dark:rgba(8,17,36,.50);
  --glass-field-shadow:inset 0 1px 3px rgba(10,20,40,.07);
  --glass-field-shadow-dark:inset 0 1px 3px rgba(0,0,0,.38);
  --glass-tint:linear-gradient(150deg,rgba(240,205,107,.22),rgba(201,162,39,.10));
  --glass-tint-dark:linear-gradient(150deg,rgba(227,179,65,.20),rgba(201,162,39,.08));
  --glass-fade:#FAF4E6;
  --glass-fade-dark:#0D1730;
}
/* Ambiente Bühne: tiefe Navy-/Gold-Glows hinter allen Glasflächen,
   damit das Glas etwas zu brechen hat (fixiert, hinter allem Inhalt). */
body{isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(760px 500px at 10% -8%,rgba(227,179,65,.17),transparent 62%),
  radial-gradient(940px 640px at 110% 10%,rgba(18,35,74,.15),transparent 60%),
  radial-gradient(820px 580px at 50% 118%,rgba(201,162,39,.11),transparent 62%)}
html[data-theme="dark"] body::before{background:
  radial-gradient(760px 520px at 10% -8%,rgba(227,179,65,.13),transparent 60%),
  radial-gradient(1020px 700px at 112% 6%,rgba(43,72,138,.55),transparent 62%),
  radial-gradient(860px 620px at 50% 118%,rgba(201,162,39,.09),transparent 60%)}

/* ---------- Glas: Auth-Dialoge (Login + Registrierung) ---------- */
.modal{
  background:var(--glass-glow),var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow),var(--glass-hi);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
}
html[data-theme="dark"] .modal{
  background:var(--glass-glow),var(--glass-bg-dark);
  border-color:var(--glass-border-dark);
  box-shadow:var(--glass-shadow-dark),var(--glass-hi-dark);
}
.modal form input,.auth-form input,#registerForm input{
  background:var(--glass-field);
  box-shadow:var(--glass-field-shadow);
}
html[data-theme="dark"] .modal form input,
html[data-theme="dark"] .auth-form input,
html[data-theme="dark"] #registerForm input{
  background:var(--glass-field-dark);
  box-shadow:var(--glass-field-shadow-dark);
}
.level-card{background:var(--glass-field);box-shadow:var(--glass-field-shadow)}
html[data-theme="dark"] .level-card{background:var(--glass-field-dark);box-shadow:var(--glass-field-shadow-dark)}
.modal-close{background:var(--glass-field);box-shadow:var(--glass-field-shadow)}
html[data-theme="dark"] .modal-close{background:var(--glass-field-dark);box-shadow:var(--glass-field-shadow-dark)}
.login-preview{background:var(--glass-field);box-shadow:var(--glass-field-shadow)}
html[data-theme="dark"] .login-preview{background:var(--glass-field-dark);box-shadow:var(--glass-field-shadow-dark)}
.success-box{background:var(--glass-tint);border-color:var(--glass-border)}
html[data-theme="dark"] .success-box{background:var(--glass-tint-dark);border-color:var(--glass-border-dark)}
.closed-notice{background:var(--glass-tint);border-color:var(--glass-border)}
html[data-theme="dark"] .closed-notice{background:var(--glass-tint-dark);border-color:var(--glass-border-dark)}
.form-error{background:rgba(248,236,236,.66)}
html[data-theme="dark"] .form-error{background:rgba(122,36,54,.42)}
#registerView>button[type="submit"]{box-shadow:0 6px 18px rgba(169,128,20,.32),0 -14px 20px 8px var(--glass-fade)}
html[data-theme="dark"] #registerView>button[type="submit"]{box-shadow:0 6px 18px rgba(169,128,20,.32),0 -14px 20px 8px var(--glass-fade-dark)}

/* ---------- Glas: ALLE Karten der Startseite (Owner: « auf allen Karten »)
   Säulen-Karten, Feature-Kacheln, Prüfungs-Karten, Schritte, Vorschau-,
   Kontakt- und Über-uns-Karten — ein Stil, keine flache Karte mehr. */
.glass-card,.feature-card,.exam-card,.step,.story-panel,.contact-card,.about-point,.preview-card,.how-it-works{
  background:var(--glass-glow),var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow),var(--glass-hi);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
}
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .exam-card,
html[data-theme="dark"] .step,
html[data-theme="dark"] .story-panel,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .about-point,
html[data-theme="dark"] .preview-card,
html[data-theme="dark"] .how-it-works{
  background:var(--glass-glow),var(--glass-bg-dark);
  border-color:var(--glass-border-dark);
  box-shadow:var(--glass-shadow-dark),var(--glass-hi-dark);
}
/* Dunkle Karten bleiben in beiden Modi Navy-Glas (Kurskarten + Fuß-Panel
   stehen auf der Navy-Bühne der Referenz; Countdown-Karte im Hero auch). */
.acard,.footer-top,.countdown-card{
  background:var(--glass-glow),var(--glass-bg-dark);
  border:1px solid var(--glass-border-dark);
  box-shadow:var(--glass-shadow-dark),var(--glass-hi-dark);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.floating-badge{
  background:var(--glass-field);
  box-shadow:var(--glass-shadow),var(--glass-hi);
  backdrop-filter:blur(12px) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(12px) saturate(var(--glass-sat));
}
html[data-theme="dark"] .floating-badge{background:var(--glass-field-dark);box-shadow:var(--glass-shadow-dark),var(--glass-hi-dark)}

/* ---------- Fallback: kein Backdrop-Support → solide Flächen ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .modal,.glass-card,.feature-card,.exam-card,.step,.story-panel,.contact-card,.about-point,.preview-card,.how-it-works{background:var(--glass-solid)}
  .acard,.footer-top,.countdown-card{background:var(--glass-solid-dark)}
  html[data-theme="dark"] .modal,
  html[data-theme="dark"] .glass-card,
  html[data-theme="dark"] .feature-card,
  html[data-theme="dark"] .exam-card,
  html[data-theme="dark"] .step,
  html[data-theme="dark"] .story-panel,
  html[data-theme="dark"] .contact-card,
  html[data-theme="dark"] .about-point,
  html[data-theme="dark"] .preview-card,
  html[data-theme="dark"] .how-it-works{background:var(--glass-solid-dark)}
}
/* ---------- Reduzierte Transparenz: solide Flächen, kein Blur ---------- */
@media(prefers-reduced-transparency:reduce){
  .modal,.glass-card,.feature-card,.exam-card,.step,.story-panel,.contact-card,.about-point,.preview-card,.how-it-works,.floating-badge{
    background:var(--glass-solid);backdrop-filter:none;-webkit-backdrop-filter:none}
  .acard,.footer-top,.countdown-card{background:var(--glass-solid-dark);backdrop-filter:none;-webkit-backdrop-filter:none}
  html[data-theme="dark"] .modal,
  html[data-theme="dark"] .glass-card,
  html[data-theme="dark"] .feature-card,
  html[data-theme="dark"] .exam-card,
  html[data-theme="dark"] .step,
  html[data-theme="dark"] .story-panel,
  html[data-theme="dark"] .contact-card,
  html[data-theme="dark"] .about-point,
  html[data-theme="dark"] .preview-card,
  html[data-theme="dark"] .how-it-works,
  html[data-theme="dark"] .floating-badge{background:var(--glass-solid-dark)}
  .modal form input,.auth-form input,#registerForm input,.level-card,.modal-close,.login-preview{background:#FFFFFF}
  html[data-theme="dark"] .modal form input,
  html[data-theme="dark"] .auth-form input,
  html[data-theme="dark"] #registerForm input,
  html[data-theme="dark"] .level-card,
  html[data-theme="dark"] .modal-close,
  html[data-theme="dark"] .login-preview{background:var(--glass-solid-dark)}
}