:root{--night:#0a1624;--ice:#dcecf6;--snow:#f2f7fa;--red:#e5322d;--blue:#1e6bff;--glass:rgba(10,22,36,.6)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--night)}
body{background:var(--night);color:var(--snow);font-family:"Helvetica Neue",Arial,system-ui,sans-serif;line-height:1.55;overflow-x:hidden}
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
#fallback{display:none;position:fixed;inset:0;z-index:0;background:linear-gradient(#3f7fc0,#cfe3f1)}
a{color:inherit}
:focus-visible{outline:3px solid var(--ice);outline-offset:3px}
nav{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,4vw,48px);background:linear-gradient(rgba(10,22,36,.7),transparent)}
nav img{height:38px;display:block}
nav ul{display:flex;gap:clamp(12px,2.4vw,32px);list-style:none}
nav li{padding:0;border:0;font-size:inherit}
nav a{text-decoration:none;font-size:.95rem;opacity:.9}
nav a:hover,nav a[aria-current]{opacity:1;border-bottom:2px solid var(--red)}
@media(max-width:720px){nav ul li:not(:last-child){display:none}}
main{position:relative;z-index:1}
section{min-height:100vh;display:flex;align-items:center;padding:110px clamp(20px,7vw,110px) 60px}
section.right{justify-content:flex-end}
.panel{max-width:560px;opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s ease}
.panel.in{opacity:1;transform:none}
.card{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(220,236,246,.2);border-radius:18px;padding:clamp(24px,4vw,44px)}
h1{font-size:clamp(2.1rem,9.5vw,6.5rem);overflow-wrap:break-word;line-height:.95;font-weight:800;letter-spacing:-.03em;text-shadow:0 4px 30px rgba(10,22,36,.55)}
h2{font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:1.02;font-weight:800;letter-spacing:-.02em;margin-bottom:16px}
p{font-size:1.08rem;color:var(--ice);max-width:48ch}
.hero{position:relative}
.hero p{margin-top:22px;font-size:1.25rem;text-shadow:0 2px 16px rgba(10,22,36,.7)}
.hero .panel{max-width:820px}
.hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:.9rem;opacity:.85;text-shadow:0 1px 8px #000;white-space:nowrap}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.btn{display:inline-block;padding:15px 28px;border-radius:999px;text-decoration:none;font-weight:700;transition:transform .2s,background .2s}
.btn.red{background:var(--red);color:#fff}
.btn.red:hover{transform:translateY(-3px);background:#ff463f}
.btn.ghost{border:2px solid var(--ice);color:var(--snow);background:rgba(10,22,36,.35)}
.btn.ghost:hover{background:var(--ice);color:var(--night)}
.cta .panel{text-align:center;margin:0 auto}
.cta p{margin:0 auto}
.cta .btns{justify-content:center}
#track{position:fixed;z-index:10;left:clamp(16px,4vw,48px);right:clamp(16px,4vw,48px);bottom:16px;display:flex;align-items:center;gap:12px;font-size:.8rem;color:var(--ice);pointer-events:none;text-shadow:0 1px 6px #000}
#track i{position:relative;flex:1;height:3px;background:rgba(220,236,246,.35);border-radius:2px}
#dot{position:absolute;top:-5px;left:0;width:13px;height:13px;border-radius:50%;background:var(--red);transform:translateX(-50%);transition:left .5s ease}
footer{position:relative;z-index:1;text-align:center;padding:28px 20px;font-size:.9rem;background:var(--night);color:var(--ice)}
footer a{margin:0 10px}

.panel.wide{max-width:760px}
ul{list-style:none}
li{padding:10px 0;border-bottom:1px solid rgba(220,236,246,.18);color:var(--ice);font-size:1.05rem}
li:last-child{border-bottom:0}
p+ul,p+.rows,.rows+p{margin-top:14px}
.rows>div{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid rgba(220,236,246,.18)}
.rows>div:last-child{border-bottom:0}
.rows b{white-space:nowrap}
a[href^="mailto"]:not(.btn){text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}

section.s{min-height:58vh;padding-top:40px;padding-bottom:40px}
section.big{min-height:100vh}
.adv{border-left:4px solid var(--red);padding:clamp(18px,3vw,30px)}
.adv h2{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:8px}

/* Liftfahrt: jeder Halt (.stop) ist ein Häppchen, das pro Scroll-Schritt eingeblendet wird */
html.ride-on{scroll-snap-type:y mandatory}
.ride{position:relative;z-index:1}
.step{height:100vh;height:100svh;scroll-snap-align:start;scroll-snap-stop:always}
.stop{position:fixed;inset:0;z-index:2;display:flex;align-items:center;padding:90px clamp(20px,7vw,110px) 70px;pointer-events:none;visibility:hidden;transition:visibility 0s .5s}
.stop.r{justify-content:flex-end}
.stop.show{visibility:visible;transition-delay:0s}
.stop .panel{transition:opacity .5s ease,transform .5s ease}
.stop.show .panel{opacity:1;transform:none;pointer-events:auto}
@media(max-height:560px){.stop{padding-top:70px;padding-bottom:50px}.stop .card{max-height:calc(100vh - 120px);overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}}
.hero-s .panel{max-width:1100px}
.hero-s p{margin-top:22px;font-size:1.25rem;text-shadow:0 2px 16px rgba(10,22,36,.7)}
.stop .hint{bottom:52px}
.cta-s{justify-content:center}
.cta-s .panel{text-align:center}
.cta-s p{margin:0 auto}
.cta-s .btns{justify-content:center}
/* Zwei Karten in einem Halt und Vorteil-Notiz innerhalb einer Karte */
.stop.c{justify-content:center}
.panel.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;max-width:1100px}
.duo h2{font-size:clamp(1.4rem,2.6vw,2.1rem);margin-bottom:10px}
.note{margin-top:16px;padding-left:14px;border-left:4px solid var(--red);font-size:1rem}
.note b{display:block;color:var(--snow)}
@media(max-width:820px){
  .panel.duo{grid-template-columns:1fr;gap:12px}
  .duo .card,.stop .card.wide{padding:18px 20px}
  .duo h2{font-size:1.3rem;margin-bottom:6px}
  .stop p{font-size:1rem}
  .stop .note{margin-top:10px;font-size:.93rem}
  .stop li{padding:7px 0;font-size:.98rem}
  .stop .rows>div{padding:8px 0}
}
/* Ohne JavaScript: Halte einfach untereinander anzeigen */
html:not(.ride-on) .stop{position:relative;inset:auto;min-height:60vh;visibility:visible}
html:not(.ride-on) .stop .panel{opacity:1;transform:none;pointer-events:auto}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.panel,.stop .panel{transition:none}.panel{opacity:1;transform:none}.stop:not(.show) .panel{opacity:0}#dot{transition:none}}