/* ============================================================
   THE ASCENDERS - Debloat-Design (ab 10.2026)
   Liegt UEBER home-v2.css und ersetzt Farben und Schrift nach
   der Zielgruppen-Recherche: Anthrazit, Neon-Gruen als Haupt-,
   Cyan als Zweitfarbe, Montserrat fuer Ueberschriften, Inter
   fuer Text. Das Phoenix-Logo bleibt unveraendert.
   Montserrat + Inter: SIL Open Font License 1.1
   ============================================================ */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;
  src:url(../assets/fonts/montserrat-800-caps.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url(../assets/fonts/inter-700.woff2) format('woff2')}

:root{
  --neon:#39FF14; --neon-soft:#7DFF63; --cyan:#00FFFF;
  --fokus-farbe:var(--cyan);
  --gold:var(--neon); --gold-soft:var(--neon-soft);
  --flame:var(--neon); --flame-deep:#2BD10C;
  --fire:linear-gradient(135deg,#7DFF63 0%,#39FF14 55%,#2BD10C 100%);
  --fire-text:linear-gradient(90deg,#39FF14 0%,#00FFFF 100%);

  --ink-900:#121212; --ink-850:#161616; --ink-800:#1A1A1A; --ink-700:#1E1E1E;
  --ink-600:#242424; --ink-500:#2C2C2C;
  --line:#2A2A2A; --line-strong:#3A3A3A; --line-control:#6B6B6B;
  --paper:#FFFFFF; --paper-dim:#CCCCCC; --paper-mute:#A3A3A3; --paper-faint:#8F8F8F;

  --accent:var(--neon); --on-accent:#0A0A0A; --ring:var(--cyan);
  --accent-tint:rgba(57,255,20,.10);
  --cyan-tint:rgba(0,255,255,.08);

  --display:"Montserrat","Arial Black",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- Schrift: Montserrat laeuft breiter als Barlow Condensed ---------- */
h1,h2,h3,h4{letter-spacing:-.01em;line-height:1.08}
h1{font-size:clamp(2.2rem,6.2vw,4.4rem)}
h2{font-size:clamp(1.65rem,3.9vw,2.8rem)}
h3{font-size:clamp(1.1rem,1.9vw,1.45rem)}
.h-klein{font-size:.92rem;letter-spacing:.03em}
.acc-btn .t{font-size:clamp(.95rem,1.6vw,1.15rem)}
.price .val{font-size:clamp(2.6rem,6vw,3.4rem)}
.pillar .big{font-size:6rem}
.lede{max-width:56ch}

/* ---------- Akzente: Cyan als Zweitfarbe (Hinweise, Links, Kapitelnummern) ---------- */
.eyebrow{color:var(--cyan);border-color:rgba(0,255,255,.32);background:var(--cyan-tint)}
.eyebrow::before{background:var(--cyan)}
.acc-btn .wk{color:var(--cyan);border-color:rgba(0,255,255,.32)}
.card-idx{color:var(--cyan)}
#consent a,.disclaimer a{color:var(--cyan)}
a:focus-visible,button:focus-visible{outline-color:var(--cyan)}

/* ---------- alle fest eingetragenen Orange-/Rottoene ---------- */
.icon-box{background:var(--accent-tint);border-color:rgba(57,255,20,.26)}
.btn-primary{box-shadow:0 10px 34px -12px rgba(57,255,20,.45)}
.btn-primary:hover{filter:brightness(1.04);box-shadow:0 0 0 6px var(--accent-tint),0 14px 40px -12px rgba(57,255,20,.6)}
.btn-ghost:hover{border-color:var(--cyan);background:var(--cyan-tint)}
.grid-field{background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 40%,#000 0%,transparent 100%);
          mask-image:radial-gradient(75% 65% at 50% 40%,#000 0%,transparent 100%)}
.strip{background:linear-gradient(90deg,transparent,rgba(0,255,255,.45) 22%,rgba(57,255,20,.9) 50%,rgba(0,255,255,.45) 78%,transparent)}
.strip::after{background:radial-gradient(50% 50% at 50% 50%,rgba(57,255,20,.2),transparent 70%)}
.announce{background:linear-gradient(90deg,var(--ink-800),rgba(57,255,20,.1),var(--ink-800))}
header.stuck{background:rgba(18,18,18,.88)}
.hero-photo{box-shadow:0 40px 90px -50px rgba(57,255,20,.35)}
.panel.good{border-color:rgba(57,255,20,.34);background:linear-gradient(180deg,rgba(57,255,20,.05),var(--ink-850))}
.panel.bad h3{color:#FF8A80}
.list.neg svg{stroke:#FF8A80}
.tier.featured{border-color:var(--neon);background:linear-gradient(180deg,rgba(57,255,20,.06),var(--ink-800));
  box-shadow:0 24px 70px -34px rgba(57,255,20,.4)}
.tier.featured .name{color:var(--neon)}
.steps li{background:rgba(30,30,30,.7)}
.sticky-cta{background:rgba(18,18,18,.95)}
#consent button{border-color:var(--neon)}
#consent button:hover{background:var(--accent-tint)}
#consent button:focus-visible{outline-color:var(--cyan)}
.final{background:linear-gradient(180deg,var(--ink-900),var(--ink-850))}

/* ---------- keine Navigation: Logo, Sprache, Kaufknopf ---------- */
.nav-links,.burger,.drawer,.drawer.open{display:none !important}
@media(max-width:900px){
  .nav-actions .lang{display:inline-flex}
  .nav-actions .btn{display:none}
}

/* ---------- Bedienung am Handy: grosse Ziele, Daumenzone ---------- */
@media(max-width:900px){
  .btn{min-height:56px}
  .btn-sm{min-height:44px}
  .lang button{min-width:44px;min-height:40px}
}
.hero-cta .btn-ghost{gap:.5rem}

/* ruhiger Puls am Hauptknopf, nur wenn Bewegung erwuenscht ist */
@media (prefers-reduced-motion:no-preference){
  .hero-cta .btn-primary,.sticky-cta .btn-primary{animation:pulse 2.8s var(--ease) 1.6s infinite}
  @keyframes pulse{
    0%,100%{box-shadow:0 10px 34px -12px rgba(57,255,20,.45),0 0 0 0 rgba(57,255,20,.35)}
    60%{box-shadow:0 10px 34px -12px rgba(57,255,20,.45),0 0 0 12px rgba(57,255,20,0)}
  }
}

/* ---------- Sticky-Leiste mit Preis ---------- */
.sticky-cta .sc-in{display:flex;align-items:center;gap:var(--s3);max-width:560px;margin:0 auto}
.sticky-cta .sc-price{display:grid;line-height:1.15;flex:none}
.sticky-cta .sc-price b{font:800 1.2rem/1 var(--display);color:var(--fg)}
.sticky-cta .sc-price span{font-size:.72rem;color:var(--fg-mute)}
.sticky-cta .btn{flex:1;min-height:52px}

/* ---------- Selbsttest ---------- */
.quiz{margin:0;padding:0;list-style:none;display:grid;gap:var(--s2)}
.quiz li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);background:var(--ink-700);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--t) var(--ease)}
.quiz li.yes{border-color:rgba(57,255,20,.45)}
.quiz li.no{border-color:var(--line-strong)}
.quiz .q-txt{color:var(--fg);font-weight:400;line-height:1.45}
.quiz .q-btns{display:flex;gap:.4rem;flex:none}
.quiz .q-btns button{min-width:64px;min-height:48px;padding:0 1rem;border-radius:var(--r-pill);
  border:1px solid var(--line-control);background:transparent;color:var(--fg);cursor:pointer;
  font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.quiz .q-btns button:hover{border-color:var(--cyan)}
.quiz .q-btns button[aria-pressed="true"]{background:var(--neon);border-color:var(--neon);color:var(--on-accent)}
.quiz .q-btns button.q-no[aria-pressed="true"]{background:var(--ink-500);border-color:var(--paper-mute);color:var(--fg)}
@media(max-width:620px){
  .quiz li{flex-direction:column;align-items:stretch;padding:var(--s3)}
  .quiz .q-btns button{flex:1}
}
.q-progress{display:flex;align-items:center;gap:var(--s2);margin:var(--s4) 0 0;font-size:.85rem;color:var(--fg-mute)}
.q-bar{flex:1;height:6px;border-radius:99px;background:var(--ink-600);overflow:hidden}
.q-bar i{display:block;height:100%;width:0;background:var(--fire-text);transition:width var(--t-slow) var(--ease)}
.q-result{margin-top:var(--s4);padding:var(--s5);border-radius:var(--r-lg);
  border:1px solid rgba(0,255,255,.3);background:linear-gradient(180deg,rgba(0,255,255,.06),var(--ink-800))}
.q-result[hidden]{display:none}
.q-score{font:800 clamp(2rem,5vw,2.6rem)/1 var(--display);background:var(--fire-text);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.q-result h3{margin:var(--s2) 0}
.q-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:var(--s3) 0 var(--s4);padding:0;list-style:none}
.q-chips li{font-size:.8rem;font-weight:700;padding:.4rem .75rem;border-radius:var(--r-pill);
  color:var(--neon);background:var(--accent-tint);border:1px solid rgba(57,255,20,.3)}
.q-fine{margin-top:var(--s3);font-size:.8rem;color:var(--fg-mute)}

/* ---------- So funktioniert's: Erklaergrafiken ---------- */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:820px){.how-grid{grid-template-columns:1fr}}
.how-card{padding:var(--s5);background:var(--ink-700);border:1px solid var(--line);border-radius:var(--r-lg);
  display:grid;gap:var(--s3);align-content:start}
.how-card svg.ex{width:100%;max-width:340px;height:auto;margin:0 auto var(--s2);display:block;overflow:visible}
.how-card .step{font:700 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.ex .neon{stroke:var(--neon)} .ex .cyan{stroke:var(--cyan)} .ex .dim{stroke:#4A4A4A}
.ex .f-neon{fill:var(--neon)} .ex .f-cyan{fill:var(--cyan)} .ex .f-ink{fill:var(--ink-900)}
.ex .s{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ex text{font-family:var(--body);font-weight:700;font-size:15px;fill:var(--fg)}
.ex text.lab{font-size:12px;letter-spacing:.12em;fill:var(--fg-mute)}
.ex text.on{fill:var(--on-accent)}
@media (prefers-reduced-motion:no-preference){
  .ex .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .25s}
  .rv.in .ex .draw{stroke-dashoffset:0}
}
.how-more{margin-top:var(--s4);text-align:center;color:var(--fg-dim)}

/* ---------- Kaufknopf zwischendurch ---------- */
.mid-cta{margin:var(--s6) auto 0;max-width:640px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s3) var(--s4);padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--ink-800);text-align:center}
.mid-cta p{margin:0;color:var(--fg-dim);flex:1 1 16rem}
.mid-cta .btn{flex:0 1 auto}
@media(max-width:620px){.mid-cta .btn{flex:1 1 100%}}

/* ---------- Zahlungsarten ---------- */
.pay{margin:var(--s4) auto 0;max-width:520px;display:grid;gap:var(--s2);justify-items:center;text-align:center}
.pay-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin:0;padding:0;list-style:none}
.pay-list li{display:inline-flex;align-items:center;gap:.4rem;min-height:34px;padding:0 .8rem;
  border:1px solid var(--line-strong);border-radius:8px;background:var(--ink-700);
  font-size:.82rem;font-weight:700;color:var(--fg)}
.pay-list svg{width:16px;height:16px;fill:none;stroke:var(--fg-dim);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pay-note{margin:0;display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--fg-mute)}
.pay-note svg{width:14px;height:14px;fill:none;stroke:var(--neon);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- schlanker Footer ---------- */
.foot-links{gap:var(--s2) var(--s4)}

/* ---------- Problem: morgens / abends ---------- */
.prob-head{gap:var(--s6);align-items:center;margin-bottom:var(--s6)}
.prob-fig{margin:0;display:grid;gap:var(--s3);justify-items:center}
.prob-fig svg.ex{width:100%;max-width:380px;height:auto;display:block;overflow:visible}
.prob-fig figcaption{font-size:.9rem;color:var(--fg-dim);text-align:center}
.ex .cheek{fill:rgba(0,255,255,.14);stroke:var(--cyan);stroke-width:1.6;stroke-dasharray:3 4}

/* ---------- Mythen-Check ---------- */
.myth{display:grid;gap:var(--s2);align-content:start}
.myth-tag{display:inline-flex;align-items:center;gap:.35rem;justify-self:start;
  font:700 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#FF8A80}
.myth-tag svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.myth p{margin:0}
.myth p b{color:var(--neon)}