:root{
  --bg:#121212; --panel:#1b1b1b; --line:#2c2c2c;
  --text:#ececec; --muted:#a9a9a9; --accent:#f28a1e; --accent2:#ffb15c;
  --head:"Bahnschrift","DIN Condensed","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--body);overflow-x:hidden}
a{color:var(--accent)}
a:hover{color:var(--accent2)}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}

/* Kopf */
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0}
.brand{font:700 22px/1 var(--head);letter-spacing:.04em;text-transform:uppercase;color:var(--text);text-decoration:none}
.brand span{color:var(--accent)}
.lang a{font:600 13px var(--head);letter-spacing:.08em;text-decoration:none;color:var(--muted);margin-left:10px}
.lang a.on{color:var(--accent)}

/* Discord oben */
.topcta{display:flex;align-items:center;gap:12px;background:var(--accent);color:#111;text-decoration:none;border-radius:12px;padding:12px 16px;margin:0 0 14px;box-shadow:0 0 0 0 rgba(242,138,30,.55);animation:pulse 2.6s infinite;position:relative;overflow:hidden}
.topcta::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 3.4s 1.4s infinite}
.topcta b{font:700 18px var(--head);text-transform:uppercase;letter-spacing:.06em}
.topcta small{font-size:14px;color:#3a2006;flex:1}
.topcta i{font-style:normal;font:700 22px var(--head)}
.topcta:hover{background:#ffa443;color:#111}
.topcta .dc{width:28px;height:28px;flex:none;border-radius:50%;background:#111;position:relative}
.topcta .dc::before,.topcta .dc::after{content:"";position:absolute;top:11px;width:5px;height:6px;border-radius:50%;background:var(--accent)}
.topcta .dc::before{left:8px}.topcta .dc::after{right:8px}
@media (max-width:480px){.topcta small{display:none}.topcta b{flex:1}}

/* Startbild */
.hero{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);isolation:isolate}
.hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transform:scale(1.12);animation:kenburns 18s var(--ease) forwards}
@keyframes kenburns{to{transform:scale(1)}}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.85) 100%)}
.hero .scan{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(242,138,30,.18),transparent);transform:translateX(-100%);animation:scan 2.4s .4s var(--ease) forwards;mix-blend-mode:screen}
@keyframes scan{to{transform:translateX(100%)}}
.hero .txt{position:absolute;left:0;right:0;bottom:0;padding:24px}
h1{font:700 clamp(32px,6.4vw,62px)/1 var(--head);text-transform:uppercase;letter-spacing:.02em;margin:0 0 10px}
h1 .ln{display:block;overflow:hidden}
h1 .ln>span{display:inline-block;transform:translateY(110%);animation:rise .9s var(--ease) forwards}
h1 .ln:nth-child(2)>span{animation-delay:.18s}
@keyframes rise{to{transform:none}}
h1 em{font-style:normal;color:var(--accent)}
.glow{height:3px;width:0;background:var(--accent);box-shadow:0 0 12px var(--accent),0 0 28px rgba(242,138,30,.6);border-radius:2px;animation:draw 1.1s .7s var(--ease) forwards;margin:0 0 12px}
@keyframes draw{to{width:min(320px,70%)}}
.tag{margin:0;color:#ddd;font-size:clamp(15px,2.4vw,19px);opacity:0;animation:fade .8s 1.1s forwards}
@keyframes fade{to{opacity:1}}

h2{font:700 26px/1.2 var(--head);text-transform:uppercase;letter-spacing:.04em;margin:56px 0 16px}
h2 small{display:block;font:600 13px var(--head);letter-spacing:.14em;color:var(--accent);margin-bottom:4px}

/* Einblenden beim Scrollen */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* Ablauf mit Leuchtlinie */
.flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:0;padding:0;list-style:none}
.flow .rail{position:absolute;left:10%;right:10%;top:44px;height:3px;background:var(--line);border-radius:2px;z-index:0}
.flow .rail i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 10px var(--accent),0 0 22px rgba(242,138,30,.55);border-radius:2px;transition:width 2.6s var(--ease)}
.flow.in .rail i{width:100%}
.flow li{position:relative;z-index:1;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .6s}
.flow.in li{opacity:1;transform:none}
.flow.in li.lit{border-color:var(--accent)}
.flow li:nth-child(3){transition-delay:.15s}.flow li:nth-child(4){transition-delay:.3s}.flow li:nth-child(5){transition-delay:.45s}.flow li:nth-child(6){transition-delay:.6s}
.ico{width:56px;height:56px;margin:0 auto 8px;display:block}
.ico *{fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset 1.2s var(--ease),stroke .6s}
.flow li.lit .ico *{stroke-dashoffset:0;stroke:var(--accent)}
.flow b{display:block;font:700 18px var(--head);text-transform:uppercase;color:var(--text);letter-spacing:.05em;margin-bottom:4px}
.flow li.lit b{color:var(--accent)}
.flow p{margin:0;color:#cfcfcf;font-size:14px;line-height:1.5}

/* Kontostand */
.counter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,#1d1d1d,#151515);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-top:20px}
.counter .lbl{font:600 13px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.counter .val{font:700 clamp(34px,7vw,56px)/1 var(--head);color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(242,138,30,.35)}
.counter .pops{display:flex;flex-wrap:wrap;gap:8px}
.counter .pop{font:700 14px var(--head);background:#262626;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:#ddd;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s var(--ease)}
.counter .pop.on{opacity:1;transform:none}
.counter .pop em{font-style:normal;color:var(--accent)}

/* Stufen */
.stages{display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,4vw,40px);padding:28px 8px 0;border-bottom:3px solid var(--line);min-height:240px}
.stage{text-align:center;flex:1;max-width:240px}
.stage svg{display:block;margin:0 auto;width:100%;height:auto;transform-origin:bottom;transform:scaleY(0);transition:transform .9s var(--ease)}
.stages.in .stage svg{transform:none}
.stages.in .stage:nth-child(2) svg{transition-delay:.35s}
.stages.in .stage:nth-child(3) svg{transition-delay:.7s}
.stage svg .b{fill:#2a2a2a;stroke:#3a3a3a;stroke-width:2}
.stage svg .d{fill:#161616}
.stage svg .w{fill:#f2c37a;opacity:.85}
.stage svg .a{fill:var(--accent)}
.stage span{display:block;font:700 15px var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 0 12px;opacity:0;transition:opacity .6s 1.2s}
.stages.in .stage span{opacity:1}
.stage span b{color:var(--accent)}

/* Sendro */
.road{position:relative;height:150px;margin-top:40px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#171717 0 70%,#222 70% 100%);border:1px solid var(--line)}
.road::after{content:"";position:absolute;left:0;right:0;bottom:20px;height:3px;background:repeating-linear-gradient(90deg,#555 0 30px,transparent 30px 60px)}
.road .door{position:absolute;right:8%;bottom:45px;width:64px;height:76px;background:#2a2a2a;border:2px solid #3a3a3a;border-radius:3px}
.road .door::after{content:"";position:absolute;right:8px;top:36px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.van{position:absolute;bottom:22px;left:-200px;width:170px}
.road.go .van{animation:drive 4.2s var(--ease) forwards}
@keyframes drive{0%{left:-200px}55%{left:calc(70% - 190px)}100%{left:calc(70% - 190px)}}
.parcel{position:absolute;bottom:45px;left:calc(70% - 70px);width:26px;height:22px;background:#c8955a;border:2px solid #8a6034;border-radius:3px;opacity:0}
.parcel::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:4px;margin-left:-2px;background:#e9d7b5}
.road.go .parcel{animation:toss 1.6s 2.5s var(--ease) forwards}
.road{--tx:calc(10vw + 58px);--arc:-70px}
@keyframes toss{
  0%{opacity:1;transform:translate(0,-26px) rotate(0)}
  45%{transform:translate(calc(var(--tx) * .55),var(--arc)) rotate(220deg)}
  75%{transform:translate(calc(var(--tx) * .82),0) rotate(340deg)}
  88%{transform:translate(calc(var(--tx) * .92),-12px) rotate(350deg)}
  100%{opacity:1;transform:translate(var(--tx),0) rotate(360deg)}
}
.road .cap{position:absolute;left:16px;top:12px;font:700 14px var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.road .cap em{font-style:normal;color:var(--accent)}

.shot{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);display:block}

/* Aufruf */
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn{position:relative;overflow:hidden;display:inline-block;background:var(--accent);color:#111;font:700 16px var(--head);text-transform:uppercase;letter-spacing:.06em;padding:13px 20px;border-radius:10px;text-decoration:none;box-shadow:0 0 0 0 rgba(242,138,30,.6);animation:pulse 2.6s infinite}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 3.4s 1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(242,138,30,.55)}70%{box-shadow:0 0 0 14px rgba(242,138,30,0)}100%{box-shadow:0 0 0 0 rgba(242,138,30,0)}}
@keyframes shine{0%{left:-60%}35%,100%{left:130%}}
.btn:hover{background:#ffa443;color:#111}
.note{color:var(--muted);font-size:14px}

/* Rechtliches */
.legal{max-width:760px}
.legal h1{font-size:clamp(28px,5vw,40px);margin-top:24px}
.legal h2{font-size:20px;margin-top:28px}
.legal p,.legal li{color:#dcdcdc}

footer{border-top:1px solid var(--line);margin-top:56px;padding:20px 0 40px;color:var(--muted);font-size:14px}
footer a{color:var(--muted);margin-right:16px}
footer a:hover{color:var(--accent)}

@media (max-width:760px){
  .flow{grid-template-columns:1fr;gap:12px;padding-left:28px}
  .flow .rail{left:10px;right:auto;top:20px;bottom:20px;width:3px;height:auto}
  .flow .rail i{width:100%;height:0;transition:height 2.6s var(--ease)}
  .flow.in .rail i{width:100%;height:100%}
  .flow li{display:grid;grid-template-columns:56px 1fr;column-gap:12px;text-align:left;align-items:center}
  .flow li .ico{grid-row:span 2;margin:0}
  .road .door{right:6%}
}
@media (max-width:640px){
  .hero img{aspect-ratio:4/5;object-position:45% 50%}
  .hero .shade{background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.88) 100%)}
  .stages{min-height:180px}
  .stage span{font-size:12px;letter-spacing:.03em;white-space:nowrap}
  .van{width:120px}
  @keyframes drive{0%{left:-140px}55%{left:calc(62% - 130px)}100%{left:calc(62% - 130px)}}
  .parcel{left:calc(62% - 50px)}
  .road{--tx:calc(34vw - 75px);--arc:-40px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.flow li,.tag{opacity:1;transform:none}
  h1 .ln>span,.hero img,.stage svg{transform:none}
  .glow{width:min(320px,70%)}
  .ico *{stroke-dashoffset:0}
  .stage span,.counter .pop{opacity:1;transform:none}
  .van{left:calc(70% - 190px)}
}