@font-face{font-family:Manrope;src:url(assets/Manrope-Variable.ttf) format("truetype");font-weight:200 800;font-display:swap}
@font-face{font-family:Caveat;src:url(assets/Caveat.ttf) format("truetype");font-display:swap}
:root{--bg:#0B0D0F;--surface:#15181B;--ink:#080A0B;--text:#F3F4F5;--muted:#A5ACB2;--orange:#F47C00;--cobalt:#0055CC;--blue:#79ABFF;--grau:#5b636a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
.hero{min-height:min(78vh,820px);padding:80px 6vw 50px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
  background:radial-gradient(60vw 60vw at 85% 10%,rgba(0,85,204,.28),transparent 60%),radial-gradient(50vw 50vw at 0% 100%,rgba(244,124,0,.18),transparent 60%)}
.kicker{font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:12px;color:var(--orange);margin:0 0 18px}
h1{font-size:clamp(42px,9vw,118px);line-height:.92;font-weight:800;letter-spacing:-.04em;margin:0;animation:rein .9s cubic-bezier(.2,.8,.2,1) both}
.durch{position:relative;color:var(--grau)}
.durch:after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:.12em;background:var(--orange);transform:rotate(-4deg) scaleX(0);transform-origin:left;animation:strich .5s .9s ease-out forwards}
.or{color:var(--orange)}
.sub{max-width:560px;color:var(--muted);font-size:clamp(17px,2vw,21px);margin:28px 0 30px;animation:rein .9s .25s both}
nav{display:flex;flex-wrap:wrap;gap:8px;animation:rein .9s .4s both}
nav a{border:1px solid #2a2f34;border-radius:999px;padding:9px 16px;color:var(--text);font-weight:700;font-size:14px;transition:.2s}
nav a:hover{border-color:var(--orange)}
nav a.hot{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.hand{font-family:Caveat,cursive;font-size:30px;color:var(--orange);margin:26px 0 0;transform:rotate(-3deg);display:inline-block}
@keyframes rein{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes strich{to{transform:rotate(-4deg) scaleX(1)}}
main{padding:0 5vw 60px}
.stufe{padding:80px 0 16px;border-top:1px solid #1f2327}
.stufe>header{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:end;margin-bottom:28px}
.big{font-size:clamp(80px,13vw,170px);font-weight:800;line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px #2f353a}
.s4 .big{-webkit-text-stroke:2px var(--orange)}
.stufe h2{font-size:clamp(30px,4.6vw,56px);margin:0;letter-spacing:-.03em;line-height:1}
.stufe header p{color:var(--muted);margin:10px 0 0;max-width:640px}
.score{display:grid;grid-template-columns:auto auto;gap:2px 10px;align-items:baseline;text-align:right;white-space:nowrap}
.score b{font-size:28px;font-weight:800}.score span{font-size:12px;color:var(--muted);text-align:left;text-transform:uppercase;letter-spacing:.08em}
.s4 .score b{color:var(--orange)}
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.k{background:var(--surface);border:1px solid #22272b;border-radius:18px;padding:22px 22px 20px;position:relative;transition:transform .25s,border-color .25s}
.k:hover{transform:translateY(-3px);border-color:#343b41}
.k.grau{background:#111315;color:#c3c8cc}
.k.grau .hook{color:#9aa1a7}
.k.heiss{border-color:rgba(244,124,0,.45);background:linear-gradient(180deg,rgba(244,124,0,.09),var(--surface) 40%)}
.nr{position:absolute;top:16px;right:18px;font-weight:800;color:#3a4046;font-size:13px}
.k h3{font-size:19px;margin:6px 0 10px;letter-spacing:-.01em;padding-right:26px}
.hook{font-size:17px;font-weight:700;margin:0 0 12px;color:var(--text)}
.hook.gross{font-size:22px;line-height:1.25;color:#fff}
.hook2{font-size:15px;color:#ffd2a6;margin:0 0 14px}.hook2 span{font-family:Caveat,cursive;font-size:22px;color:var(--orange);margin-right:4px}
.k ul,.k ol{margin:0 0 12px;padding-left:20px;color:var(--muted);font-size:14.5px}
.k li{margin:3px 0}
ol.tp{list-style:none;padding:12px 14px;background:var(--ink);border-radius:12px;color:#dfe3e6;font-size:15px;line-height:1.6}
ol.tp b{color:var(--orange);font-weight:800}
.p1,.p2{font-style:normal;color:var(--blue);font-weight:800}.p2{color:var(--cobalt);filter:brightness(1.6)}
.cta{font-size:13px;color:#7d858c;font-style:italic;margin:0}
.beleg{padding-right:30px;display:flex;justify-content:space-between;gap:10px;align-items:center;font-weight:700;font-size:14px}
.fx{background:var(--orange);color:var(--ink);font-weight:800;border-radius:8px;padding:2px 8px;font-size:14px;white-space:nowrap}
.klein{font-size:12.5px;color:#7d858c;margin:4px 0 8px}
.trend{font-size:14px;color:var(--muted);margin:0 0 10px}.trend em,.risiko em,.mix em{font-style:normal;color:var(--text);font-weight:700}
.risiko{font-size:13px;color:#8d959c;margin:0}
.quelle{font-size:12px;color:var(--blue);display:block;margin-top:4px}
.mix{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.mix>div{background:var(--ink);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.mix .fx{align-self:flex-start}
.trendbox{background:linear-gradient(90deg,rgba(0,85,204,.22),transparent);border-left:3px solid var(--cobalt);border-radius:0 14px 14px 0;padding:14px 18px;margin:0 0 20px;font-size:14.5px}
.trendbox ul{margin:6px 0 0;padding-left:18px;color:#cfd5da}
.fazit{padding:90px 0 30px;border-top:1px solid #1f2327}
.fazit h2{font-size:clamp(34px,6vw,76px);letter-spacing:-.04em;line-height:.95;margin:0 0 34px}
.bars{display:flex;flex-direction:column;gap:16px;margin-bottom:40px}
.bar{display:grid;grid-template-columns:130px 1fr 48px;gap:4px 14px;align-items:center}
.bn{font-weight:800}.bt{height:16px;background:#1b1f23;border-radius:99px;overflow:hidden}
.bt i{display:block;height:100%;background:linear-gradient(90deg,#3a4147,var(--grau))}
.bar:last-child .bt i{background:linear-gradient(90deg,var(--cobalt),var(--orange))}
.bar b{font-size:20px;text-align:right}.bar:last-child b{color:var(--orange)}
.bx{grid-column:2/4;font-size:12.5px;color:#7d858c}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.zwei>div{background:var(--surface);border-radius:18px;padding:22px;border:1px solid #22272b}
.zwei h3{margin:0 0 8px;font-size:20px}.zwei p{color:#cfd5da;margin:0 0 8px}
details{margin:20px 0;background:#111315;border-radius:14px;padding:14px 18px;color:var(--muted)}
summary{cursor:pointer;font-weight:700;color:var(--text)}
footer{padding:30px 5vw 50px;color:#5b636a;font-size:13px}
@media (max-width:700px){.stufe>header{grid-template-columns:auto 1fr}.score{grid-column:1/3;justify-content:start;text-align:left}
  .zwei,.mix{grid-template-columns:1fr}.bar{grid-template-columns:96px 1fr 40px}.karten{grid-template-columns:1fr}.hero{min-height:auto;padding-top:12vh}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.durch:after{transform:rotate(-4deg)}}