:root{
  --sky:#0F1B2D;
  --sky-2:#16263D;
  --linen:#EFE7D8;
  --linen-dim:#B8B0A2;
  --gold:#F0B15A;
  --blue:#8FBBE0;
  --line:rgba(239,231,216,.14);
  --bg:var(--sky); --fg:var(--linen);
}
:root[data-theme="light"]{ --bg:#F7F2E8; --fg:#12203A; --line:rgba(18,32,58,.14); --linen-dim:#6A6558; --sky-2:#EDE5D6; }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#F7F2E8; --fg:#12203A; --line:rgba(18,32,58,.14); --linen-dim:#6A6558; --sky-2:#EDE5D6; } }
:root[data-theme="dark"]{ --bg:#0F1B2D; --fg:#EFE7D8; --line:rgba(239,231,216,.14); --linen-dim:#B8B0A2; --sky-2:#16263D; }

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:Poppins,"Helvetica Neue",Arial,sans-serif;font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased}
em,.serif{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-style:italic;font-weight:500}
a{color:inherit}
.wrap{width:min(1100px,92vw);margin:0 auto}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;letter-spacing:-.02em;font-size:1.05rem;text-decoration:none}
.logo em{color:var(--gold)}
nav ul{display:flex;gap:1.6rem;list-style:none;font-size:.9rem;font-weight:500}
nav ul a{text-decoration:none;opacity:.85}
nav ul a:hover{opacity:1}
@media(max-width:640px){nav ul{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:9vh 0 7vh;min-height:88vh;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 50% at 85% 100%, rgba(240,177,90,.28), transparent 70%),
  radial-gradient(45% 40% at 10% 0%, rgba(143,187,224,.18), transparent 70%);pointer-events:none}
.hero .wrap{position:relative}
.kicker{font-size:.95rem;color:var(--linen-dim);margin-bottom:1.6rem}
.kicker b{color:var(--fg);font-weight:600}
h1{font-weight:800;letter-spacing:-.035em;line-height:.98;font-size:clamp(2.7rem,8.6vw,7rem);max-width:15ch}
h1 span{display:block}
h1 .no{color:var(--linen-dim)}
h1 em{font-weight:600;color:var(--gold);letter-spacing:-.01em}
.lead{margin-top:2.2rem;max-width:44ch;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--linen-dim)}
.lead strong{color:var(--fg);font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.btn{display:inline-block;padding:.95rem 1.5rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:.98rem;border:1px solid var(--line);transition:transform .15s;cursor:pointer;font-family:inherit;color:inherit}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--gold);color:#1a1408;border-color:var(--gold)}
.btn.ghost{background:transparent}

.reel{margin-top:4.5rem;display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:center;max-width:560px}
.reel .dot{width:10px;height:10px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 0 rgba(229,72,77,.6);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
.reel .line{font-size:clamp(1.15rem,2.3vw,1.6rem);font-weight:700;min-height:2.4em;line-height:1.2}
.reel .line em{color:var(--gold);font-weight:600}
.reel .meta{grid-column:2;font-size:.8rem;color:var(--linen-dim)}
@media(prefers-reduced-motion:reduce){.reel .dot{animation:none}}

/* ---------- sections ---------- */
section{padding:clamp(4rem,9vw,7.5rem) 0;border-top:1px solid var(--line)}
h2{font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2rem,4.6vw,3.6rem);max-width:20ch}
h2 em{color:var(--gold);font-weight:600}
.sub{margin-top:1.2rem;color:var(--linen-dim);max-width:52ch;font-size:1.05rem}
.sub em{color:var(--gold);font-weight:600}

.story{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:start}
.story p{margin-top:1.1rem;max-width:56ch;font-size:1.05rem}
.story p:first-of-type{margin-top:2rem}
.quote{border-left:3px solid var(--gold);padding-left:1.4rem;margin-top:2.4rem}
.quote p{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.3;margin:0}
.quote small{display:block;margin-top:.9rem;color:var(--linen-dim);font-size:.9rem}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.stat{background:var(--bg);padding:1.8rem 1.6rem}
.stat b{display:block;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat b em{font-weight:600;color:var(--gold)}
.stat span{display:block;margin-top:.55rem;color:var(--linen-dim);font-size:.9rem}
.stat small{display:block;margin-top:.25rem;color:var(--linen-dim);font-size:.75rem;opacity:.75}
@media(max-width:820px){.story{grid-template-columns:1fr;gap:3rem}}

.versus{margin-top:3rem;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden}
.col{padding:2.4rem 2.2rem}
.col.nope{background:var(--sky-2)}
.col.yep{background:linear-gradient(160deg,rgba(240,177,90,.14),transparent 60%)}
.col h3{font-size:1.15rem;font-weight:700;margin-bottom:1.4rem}
.col h3 em{color:var(--gold)}
.col.nope h3{color:var(--linen-dim)}
.col ul{list-style:none;display:grid;gap:.75rem}
.col li{padding-left:1.7rem;position:relative;font-size:1rem}
.col li::before{position:absolute;left:0;top:.05em;font-weight:700}
.nope li{color:var(--linen-dim);text-decoration:line-through;text-decoration-color:rgba(184,176,162,.5)}
.nope li::before{content:"—"}
.yep li::before{content:"✓";color:var(--gold)}
@media(max-width:720px){.versus{grid-template-columns:1fr}}

.formats{margin-top:3rem;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 3rem}
.fmt{border-top:2px solid var(--gold);padding-top:1.3rem}
.fmt h3{font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
.fmt h3 em{color:var(--gold)}
.fmt .where{color:var(--linen-dim);font-size:.9rem;margin-top:.2rem}
.fmt p{margin-top:.9rem;font-size:.98rem}
@media(max-width:820px){.formats{grid-template-columns:1fr}}

.ask{background:var(--sky-2)}
.ask .wrap{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.askbox{border:1px solid var(--line);border-radius:24px;padding:2rem;background:var(--bg)}
.askbox label{display:block;font-size:.9rem;font-weight:500;margin-bottom:.5rem}
.askbox textarea,.askbox input{width:100%;background:transparent;border:1px solid var(--line);border-radius:12px;color:var(--fg);font:inherit;padding:.9rem 1rem;margin-bottom:1.1rem}
.askbox textarea{min-height:120px;resize:vertical}
.askbox .hint{font-size:.85rem;color:var(--linen-dim);margin-top:.9rem}
@media(max-width:820px){.ask .wrap{grid-template-columns:1fr;gap:2.5rem}}

footer{border-top:1px solid var(--line);padding:3rem 0 2.5rem;font-size:.9rem;color:var(--linen-dim)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between;align-items:flex-start}
footer .links{display:flex;flex-wrap:wrap;gap:1.4rem}
footer a{text-decoration:none}
footer a:hover{color:var(--fg)}
footer .clasen{max-width:38ch}
footer .clasen b{color:var(--fg);font-weight:600}

/* ---------- Rechtstexte ---------- */
.legal{padding:clamp(3rem,7vw,5rem) 0;border-top:0}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(2.2rem,5vw,3.4rem);max-width:none}
.legal h2{font-size:1.35rem;letter-spacing:-.01em;margin-top:2.4rem;max-width:none}
.legal p,.legal li{margin-top:.8rem;font-size:1rem;max-width:68ch}
.legal ul{padding-left:1.2rem}
.legal .todo{background:rgba(240,177,90,.22);padding:0 .25em;border-radius:4px}

.stats-cta{margin-top:1.6rem}