/* ============================================================================
   TRAILER SWARM — Parallax Concept Startseite
   Motorsport / hazard-tape register · near-black canvas + CI neon-yellow
   ========================================================================== */

:root{
  /* ── canvas (neutrals tinted toward the brand yellow hue) ── */
  --ink:        oklch(0.155 0.006 100);   /* page base, near-black */
  --ink-1:      oklch(0.185 0.006 100);   /* raised panel */
  --ink-2:      oklch(0.235 0.007 100);   /* card / chip */
  --line:       oklch(0.32 0.008 100);    /* hairlines */
  --steel:      oklch(0.74 0.012 100);    /* galvanized metal text */
  --paper:      oklch(0.97 0.006 100);    /* primary text on dark */
  --muted:      oklch(0.72 0.008 100);    /* secondary text */
  --faint:      oklch(0.62 0.008 100);    /* tertiary text — AA-safe on --ink at small sizes */

  /* ── brand accent (CI neon-yellow #FFFF00 family) ── */
  --acid:       #ffe600;                   /* workhorse hazard neon */
  --acid-el:    #fff200;                   /* electric highlight */
  --acid-deep:  #d9c200;                   /* shadow side of acid */
  --acid-ink:   #0c0c06;                   /* text on acid */

  --maxw: 1240px;
  --pad:  clamp(1.25rem, 5vw, 5rem);

  --font-display:'Archivo', system-ui, -apple-system, sans-serif;
  --font-sans:   'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --e-out: cubic-bezier(0.16, 1, 0.3, 1);          /* ease-out-quint */
  --e-out-q: cubic-bezier(0.22, 1, 0.36, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-sans);
  font-weight:500;
  line-height:1.55;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:900; line-height:0.95; letter-spacing:-0.02em; }
::selection{ background:var(--acid); color:var(--acid-ink); }
:focus-visible{ outline:3px solid var(--acid); outline-offset:3px; border-radius:4px; }

/* ── scroll progress rail ─────────────────────────────────────────────── */
.scroll-rail{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:120;
  background:rgba(255,255,255,0.05);
}
.scroll-rail span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--acid-deep), var(--acid-el));
  box-shadow:0 0 14px rgba(255,230,0,0.7);
}

/* ── shared bits ──────────────────────────────────────────────────────── */
.dot{
  display:inline-block; width:7px; height:7px; border-radius:2px;
  background:var(--acid); box-shadow:0 0 10px var(--acid);
  vertical-align:middle; margin-right:0.6em;
}
.kicker, .eyebrow{
  font-family:var(--font-mono); font-weight:500;
  font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.2rem;
}
.eyebrow .dot, .kicker .dot{ animation:pulse 2.4s var(--e-out) infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:0.35 } }

.display{ font-size:clamp(2.5rem, 7.2vw, 6.2rem); text-transform:uppercase; }
.display.sm{ font-size:clamp(2.1rem, 5.6vw, 4.6rem); }
.display .o{ color:var(--acid); }
.lead{
  font-size:clamp(1.05rem, 1.6vw, 1.3rem); color:var(--muted);
  max-width:46ch; font-weight:500; line-height:1.5;
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{
  --bg:var(--acid);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:0.5em; padding:1rem 1.7rem; border-radius:10px;
  font-family:var(--font-display); font-weight:800; font-size:0.94rem;
  letter-spacing:0.01em; text-transform:uppercase; white-space:nowrap;
  will-change:transform;
  transition:transform .35s var(--e-out), background-color .2s ease, color .2s ease, box-shadow .35s var(--e-out);
}
.btn--acid{ background:var(--bg); color:var(--acid-ink); box-shadow:0 0 0 rgba(255,230,0,0); }
.btn--acid:hover{ transform:translateY(-3px); box-shadow:0 14px 40px -10px rgba(255,230,0,0.6); background:var(--acid-el); }
.btn--ghost{ background:transparent; color:var(--paper); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover{ transform:translateY(-3px); color:var(--acid); box-shadow:inset 0 0 0 1.5px var(--acid); }
.btn--mini{ padding:0.7rem 1.15rem; border-radius:8px; font-size:0.82rem; }
.btn--lg{ padding:1.2rem 2.3rem; font-size:1.05rem; }
.btn:active{ transform:translateY(-1px) scale(0.99); }

.textlink{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:0.95rem; letter-spacing:0.02em; color:var(--acid);
  display:inline-block; will-change:transform; transition:transform .35s var(--e-out);
}
.textlink:hover{ transform:translateX(6px); }

/* ── brand wordmark + badge ───────────────────────────────────────────── */
.nav__brand{ display:inline-flex; align-items:center; gap:0.6rem; }
.badge{
  display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--acid); color:var(--acid-ink);
  font-family:var(--font-display); font-weight:900; font-size:1.2rem; line-height:1;
}
.nav__word{
  font-family:var(--font-display); font-weight:900; font-size:1.15rem;
  letter-spacing:0.01em; color:var(--paper);
}
.nav__word span{ color:var(--acid); }

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem var(--pad);
  transition:background-color .4s var(--e-out), box-shadow .4s var(--e-out), padding .4s var(--e-out);
}
.nav.is-stuck{
  background:color-mix(in oklch, var(--ink) 86%, transparent);
  backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 1px 0 var(--line), 0 18px 40px -30px #000;
  padding-top:0.75rem; padding-bottom:0.75rem;
}
.nav__links{ display:flex; gap:1.9rem; }
.nav__links a{
  font-size:0.9rem; font-weight:600; color:var(--muted); position:relative;
  transition:color .2s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--acid); transition:width .35s var(--e-out);
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:1.1rem; }
.nav__cta .phone{ font-family:var(--font-mono); font-size:0.86rem; color:var(--muted); transition:color .2s; }
.nav__cta .phone:hover{ color:var(--acid); }

/* ════════════════════════════ HERO ═══════════════════════════════════ */
.hero{
  position:relative; min-height:100svh; overflow:clip;
  display:flex; align-items:flex-end;
  padding:0 var(--pad) clamp(3rem, 9vh, 7rem);
  isolation:isolate;
}
.hero > *{ will-change:transform; }
.hero__sky{
  position:absolute; inset:-10% 0 0; z-index:-6;
  background:
    radial-gradient(120% 80% at 72% 78%, rgba(255,230,0,0.10), transparent 55%),
    linear-gradient(180deg, #060607 0%, #0a0a0c 46%, #0f0f12 70%, #08080a 100%);
}
.hero__glow{
  position:absolute; left:54%; top:60%; z-index:-5;
  width:min(70vw,820px); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,230,0,0.30), rgba(255,230,0,0.06) 40%, transparent 66%);
  filter:blur(8px);
}
.hero__route{ position:absolute; inset:0; width:100%; height:100%; z-index:-5; }

.hero__ridge{ position:absolute; left:-2%; right:-2%; z-index:-4; }
.ridge--far{
  bottom:30%; height:34vh; background:linear-gradient(180deg,#101015,#0c0c10);
  clip-path:polygon(0 62%,9% 50%,17% 60%,26% 38%,34% 54%,43% 33%,52% 52%,61% 40%,70% 58%,80% 44%,88% 60%,100% 46%,100% 100%,0 100%);
  opacity:0.92;
}
.ridge--near{
  bottom:24%; height:30vh; background:linear-gradient(180deg,#0a0a0d,#070709);
  clip-path:polygon(0 70%,12% 54%,22% 66%,33% 48%,45% 64%,56% 44%,66% 62%,77% 50%,86% 66%,100% 56%,100% 100%,0 100%);
}
.hero__bike{
  position:absolute; right:14%; bottom:30%; z-index:-3;
  width:clamp(190px, 26vw, 360px); height:auto;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,0.6));
}
.hero__bike .wheel,.hero__bike use{ color:#0c0c0e; }

.hero__road{
  position:absolute; left:50%; bottom:0; z-index:-3;
  width:200%; height:34vh; transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, #050506 38%, #050506);
  perspective:340px;
}
.road__dashes{
  position:absolute; inset:auto 0 -2px; height:90%;
  transform:rotateX(64deg); transform-origin:bottom;
  background-image:repeating-linear-gradient(
    to top, transparent 0 46px, rgba(255,230,0,0.55) 46px 92px);
  -webkit-mask-image:linear-gradient(to top, #000 0%, #000 18%, transparent 78%);
          mask-image:linear-gradient(to top, #000 0%, #000 18%, transparent 78%);
  width:14%; left:43%; opacity:0.85;
  animation:road 2.2s linear infinite;
}
@keyframes road{ to{ background-position:0 92px; } }

.hero__tape{ position:absolute; left:0; right:0; bottom:0; height:18px; z-index:-2; opacity:0.8; }
.tape-strip{
  height:100%;
  background:repeating-linear-gradient(45deg, var(--acid) 0 22px, #0a0a0b 22px 44px);
  opacity:0.5;
}
.hero__grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0.05;
  background-image:url("assets/asphalt-grain.jpg"); background-size:520px;
  mix-blend-mode:overlay;
}

.hero__copy{ position:relative; max-width:min(56rem, 100%); }
.eyebrow{ display:inline-flex; align-items:center; }
.hero__h1{
  font-size:clamp(2.9rem, 9vw, 8.4rem); line-height:0.84; text-transform:uppercase;
  margin:0.18em 0 0.34em; letter-spacing:-0.035em;
}
.hero__h1 .line{ display:block; }
.line--acid{ color:var(--acid); text-shadow:0 0 50px rgba(255,230,0,0.35); }
.hero__sub{ font-size:clamp(1.05rem, 1.7vw, 1.4rem); color:var(--muted); max-width:42ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:0.9rem; margin:2rem 0 1.7rem; }
.hero__trust{
  display:flex; flex-wrap:wrap; gap:0.55rem 0.5rem; font-family:var(--font-mono);
  font-size:0.78rem; letter-spacing:0.02em; color:var(--steel);
}
.hero__trust li{ display:flex; align-items:center; }
.hero__trust li::before{ content:"›"; color:var(--acid); margin-right:0.5em; }

.scrollcue{
  position:absolute; right:var(--pad); bottom:clamp(3rem,9vh,7rem); z-index:2;
  display:flex; align-items:center; gap:0.7rem; writing-mode:vertical-rl;
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--faint);
}
.scrollcue i{ display:block; width:1px; height:46px; background:linear-gradient(var(--acid),transparent); }
@media (max-width:760px){ .scrollcue{ display:none; } }

/* reveal mechanics */
.reveal{ opacity:0; transform:translateY(26px); }
.is-ready .reveal{ transition:opacity .9s var(--e-out), transform .9s var(--e-out); }
.reveal.is-in{ opacity:1; transform:none; }

/* ════════════════════════════ MARQUEE ════════════════════════════════ */
.marquee{
  background:var(--acid); color:var(--acid-ink); overflow:hidden;
  border-top:2px solid #0a0a0b; border-bottom:2px solid #0a0a0b;
  padding:0.85rem 0;
}
.marquee__track{
  display:flex; align-items:center; gap:2.2rem; width:max-content;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:0.01em;
  animation:marq 34s linear infinite;
}
.marquee__track b{ color:#0a0a0b; opacity:0.5; font-size:0.8em; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ═══════════════════════ SHOWPIECE — ABSENKBAR ═══════════════════════ */
.absenk{ position:relative; height:340vh; background:var(--ink); }
.absenk__sticky{
  position:sticky; top:0; height:100svh; overflow:clip;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  padding:clamp(3.5rem,6vh,5rem) var(--pad) clamp(1.2rem,3vh,2rem);
}
.absenk__head{ position:relative; z-index:2; }
.absenk__head .display{ line-height:0.9; font-size:clamp(2rem, 5vw, 4.2rem); }

.stage{ position:relative; display:grid; place-items:center; min-height:0; }
#rig{ width:min(100%, 1120px); height:100%; max-height:62vh; overflow:visible; }
#rig text{ font-family:var(--font-mono); }
#gl{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  cursor:grab; border-radius:14px;
}
#gl:active{ cursor:grabbing; }
.has-3d .stage::after{
  content:"ziehen zum Drehen"; position:absolute; right:0.4rem; bottom:0.4rem;
  font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--faint); pointer-events:none;
}
@media (pointer:coarse){ .has-3d .stage::after{ display:none; } }   /* touch: drag scrolls the page, not rotate → don't claim otherwise */

.absenk__hud{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  flex-wrap:wrap; position:relative; z-index:2;
}
.steps{ display:flex; flex-wrap:wrap; gap:0.4rem 1.6rem; }
.steps li{
  font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.04em;
  color:var(--faint); display:flex; align-items:baseline; gap:0.5rem;
  transition:color .35s var(--e-out);
}
.steps li b{ color:var(--line); font-weight:700; transition:color .35s var(--e-out); }
.steps li.is-active{ color:var(--paper); }
.steps li.is-active b{ color:var(--acid); }
.specs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0.75rem; min-width:min(440px,100%); }
.specs li{
  background:var(--ink-1); border:1px solid var(--line); border-radius:10px;
  padding:0.7rem 0.85rem; font-family:var(--font-display); font-weight:800;
  font-size:0.98rem; color:var(--paper); line-height:1.1;
}
.specs li span{
  display:block; font-family:var(--font-mono); font-weight:500; font-size:0.62rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--faint); margin-bottom:0.35rem;
}

/* showpiece must keep ALL content (render + 4 steps + specs) visible on short/laptop viewports */
@media (max-height:760px){
  .absenk__head .display{ font-size:clamp(1.8rem,4vw,3rem); }
  .absenk__sticky{ padding-top:clamp(2.8rem,5vh,4rem); }
  .specs li{ padding:0.5rem 0.62rem; font-size:0.86rem; }
  .specs li span{ font-size:0.56rem; margin-bottom:0.2rem; }
  .steps li{ font-size:0.74rem; }
}
@media (max-height:620px){           /* very short / landscape: un-pin so nothing is amputated */
  .absenk{ height:auto; }
  .absenk__sticky{ position:static; height:auto; min-height:100svh; overflow:visible; }
}

/* ═════════════ FEATURE — zwei Zustände + interaktive Hotspots ═════════════ */
.feature{
  padding:clamp(4rem,10vh,8rem) var(--pad) clamp(2rem,5vh,4rem);
  max-width:var(--maxw); margin-inline:auto;
}
.feature .section-head{ margin-bottom:clamp(1.6rem,4vh,2.6rem); }
.feature__stage{ margin:0; }
.feature__viewport{
  position:relative; border-radius:18px; overflow:hidden; isolation:isolate;
  aspect-ratio:4/3; width:min(100%, calc(64vh * 4 / 3)); margin-inline:auto;   /* cap by height, keep 4/3 → no crop → dots map 1:1 */
  background:#f3f3f1;
  box-shadow:0 50px 110px -50px #000, inset 0 0 0 1px var(--line);
}
.feature__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-drag:none;
  transition:opacity .5s var(--e-out);
}
.feature__img--beladen{ opacity:0; }
.feature__stage[data-state="beladen"] .feature__img--beladen{ opacity:1; }
.feature__stage[data-state="beladen"] .feature__img--fahren{ opacity:0; }

/* hotspot dots */
.feature__dots{ position:absolute; inset:0; z-index:2; }
.hotspot{
  position:absolute; transform:translate(-50%,-50%);
  width:26px; height:26px; padding:0; border:0; background:none; cursor:pointer;
  transition:left .5s var(--e-out), top .5s var(--e-out);
  z-index:1;
}
.hotspot::before{                       /* the visible dot — dark ring keeps it legible on light OR dark areas */
  content:""; position:absolute; inset:5px; border-radius:50%;
  background:var(--acid); border:3px solid #0c0c0e;
  box-shadow:0 0 0 0 rgba(255,230,0,0.55);
  animation:hs-pulse 2.6s var(--e-out) infinite;
}
.hotspot::after{                         /* invisible 48px hit area (WCAG 2.5.5) */
  content:""; position:absolute; inset:-11px; border-radius:50%;
}
.hotspot:hover::before,
.hotspot.is-active::before{ background:var(--acid-el); transform:scale(1.12); animation:none; }
.hotspot:focus-visible{ outline:none; }
.hotspot:focus-visible::before{ outline:3px solid var(--acid-el); outline-offset:2px; box-shadow:0 0 0 5px #0c0c0e, 0 0 0 8px #fff; animation:none; }  /* ring visible on light AND dark photo areas */
@keyframes hs-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,230,0,0.5); }
  70%{ box-shadow:0 0 0 12px rgba(255,230,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,230,0,0); }
}
/* desktop popover */
.hotspot__pop{
  position:absolute; left:50%; bottom:calc(100% + 14px); transform:translateX(-50%);
  width:max-content; max-width:240px; z-index:5;
  background:#0d0d10; color:var(--paper); border:1px solid var(--line); border-radius:11px;
  padding:0.7rem 0.85rem; text-align:left; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .18s var(--e-out), transform .18s var(--e-out);
  box-shadow:0 20px 50px -18px #000;
}
.hotspot.is-active .hotspot__pop{ opacity:1; visibility:visible; }
.hotspot__pop[data-side="below"]{ bottom:auto; top:calc(100% + 14px); }
.hotspot__pop b{ display:block; font-family:var(--font-display); font-weight:800; font-size:0.92rem; letter-spacing:0.01em; margin-bottom:0.2rem; }
.hotspot__pop span{ display:block; font-size:0.82rem; line-height:1.45; color:var(--muted); }
.hotspot__pop i{                          /* little stem pointing at the dot */
  position:absolute; left:50%; transform:translateX(-50%) rotate(45deg);
  width:10px; height:10px; background:#0d0d10; border:1px solid var(--line);
}
.hotspot__pop:not([data-side="below"]) i{ bottom:-6px; border-top:0; border-left:0; }
.hotspot__pop[data-side="below"] i{ top:-6px; border-bottom:0; border-right:0; }
/* edge collision: anchor the popover to the dot side so it can't clip the viewport */
.hotspot__pop[data-align="left"]{ left:0; transform:none; }
.hotspot__pop[data-align="left"] i{ left:16px; }
.hotspot__pop[data-align="right"]{ left:auto; right:0; transform:none; }
.hotspot__pop[data-align="right"] i{ left:auto; right:16px; }

/* mobile bottom sheet (used <760px) — desktop popover is hidden there */
@media (max-width:760px){ .hotspot__pop{ display:none; } }
@media (min-width:761px){ .feature__sheet{ display:none !important; } }   /* sheet is mobile-only; never linger after resize */
.feature__sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:6;
  background:linear-gradient(0deg, #0b0b0e 72%, rgba(11,11,14,0));
  padding:1.5rem 1.1rem 1.1rem; text-align:left;
}
.feature__sheet-title{ font-family:var(--font-display); font-weight:800; font-size:1.02rem; color:var(--paper); margin:0 2rem 0.25rem 0; }
.feature__sheet-text{ font-size:0.9rem; line-height:1.5; color:var(--muted); margin:0; max-width:46ch; }
.feature__sheet-close{
  position:absolute; top:0.6rem; right:0.6rem; width:44px; height:44px; border-radius:50%;
  background:var(--acid); color:var(--acid-ink); border:0; cursor:pointer;
  font-size:1.1rem; line-height:1; display:grid; place-items:center;
}

/* state toggle */
.feature__toggle{
  position:relative; display:inline-grid; grid-template-columns:1fr 1fr; gap:0;
  margin:0 auto 1.2rem; padding:5px; border-radius:999px;
  background:var(--ink-1); border:1px solid var(--line); isolation:isolate;
}
.feature__stage{ display:flex; flex-direction:column; align-items:center; }
.feature__toggle-pill{
  position:absolute; z-index:-1; top:5px; bottom:5px; left:5px; width:calc(50% - 5px);
  border-radius:999px; background:var(--acid);
  transition:transform .35s var(--e-out);
}
.feature__stage[data-state="beladen"] .feature__toggle-pill{ transform:translateX(100%); }
.feature__toggle-btn{
  position:relative; z-index:1; appearance:none; border:0; background:none; cursor:pointer;
  font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:0.62rem 1.5rem; color:var(--faint); transition:color .3s var(--e-out); min-height:44px;
}
.feature__toggle-btn.is-on{ color:var(--acid-ink); }
.feature__toggle-btn:focus-visible{ outline:3px solid var(--acid); outline-offset:3px; border-radius:999px; }
@media (prefers-reduced-motion:reduce){
  .feature__img,.hotspot,.feature__toggle-pill,.hotspot__pop{ transition:none; }
  .hotspot::before{ animation:none; }
}

/* ═══════════════════ FILMSTRIP — die Verladung in echt ═══════════════ */
.strip{
  padding:clamp(1rem,3vh,2rem) var(--pad) clamp(3rem,8vh,6rem);
  max-width:var(--maxw); margin-inline:auto;
}
.strip__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(0.8rem,2vw,1.5rem); }
.strip__row li{ position:relative; }
.strip__row img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;
  filter:contrast(1.04) saturate(0.95) brightness(0.94);
  box-shadow:0 30px 70px -40px #000, inset 0 0 0 1px var(--line);
  transition:transform .5s var(--e-out), filter .5s var(--e-out);
}
.strip__row li:hover img{ transform:translateY(-5px) scale(1.015); filter:contrast(1.06) saturate(1) brightness(1); }
.strip__row p{
  margin:0.7rem 0 0; font-family:var(--font-mono); font-size:0.74rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.strip__row p b{ color:var(--acid); margin-right:0.5em; }

/* ════════════════════════════ PROOF ══════════════════════════════════ */
.proof{
  display:grid; grid-template-columns:1.15fr 0.85fr; align-items:center; gap:clamp(2rem,5vw,5rem);
  padding:clamp(5rem,12vh,9rem) var(--pad);
  max-width:var(--maxw); margin-inline:auto;
}
.proof__media{
  position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:0 40px 90px -40px #000, inset 0 0 0 1px var(--line);
}
.proof__media img{
  width:100%; height:118%; object-fit:cover; will-change:transform;
  filter:contrast(1.05) saturate(0.92) brightness(0.92);
}
.proof__copy .display{ margin:0 0 1.2rem; }
.proof__copy .lead{ margin:0 0 1.6rem; }

/* ════════════════════════════ ABLAUF ═════════════════════════════════ */
.ablauf{
  padding:clamp(4rem,10vh,8rem) var(--pad) clamp(5rem,12vh,9rem);
  max-width:var(--maxw); margin-inline:auto;
}
.section-head{ margin-bottom:clamp(2.5rem,6vh,5rem); }
.flow{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,3rem);
}
.flow__step{ position:relative; padding-top:2rem; }
.flow__no{
  font-family:var(--font-display); font-weight:900; font-size:clamp(3.5rem,7vw,6rem);
  line-height:1; color:transparent; -webkit-text-stroke:2px var(--line);
  display:inline-block; background:var(--ink); position:relative; z-index:1;
  padding:0.06em 0.12em 0.02em; margin:-0.06em 0 calc(0.5rem - 0.02em) -0.12em;
  transition:-webkit-text-stroke-color .5s var(--e-out), color .5s var(--e-out);
}
.flow__step.is-in .flow__no{ -webkit-text-stroke-color:var(--acid); }
.flow__step h3{ font-family:var(--font-display); font-weight:900; font-size:1.5rem; text-transform:uppercase; margin:0 0 0.6rem; }
.flow__step p{ color:var(--muted); font-size:1rem; max-width:34ch; }
.flow__step p b{ color:var(--acid); font-weight:700; }
.flow__line{ position:absolute; inset:0 0 auto; top:-1rem; width:100%; height:120px; z-index:-1; pointer-events:none; }
.ablauf__more{ text-align:center; margin-top:clamp(2.4rem,5vw,3.6rem); }

/* ════════════════════════════ STANDORTE ══════════════════════════════ */
.standorte{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:start;
  padding:clamp(4rem,10vh,8rem) var(--pad);
  max-width:var(--maxw); margin-inline:auto;
}
.standorte__head .lead{ margin:0 0 1.8rem; }
.standorte__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.7rem; }
.standorte__grid li{
  border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem;
  background:var(--ink-1); transition:border-color .3s var(--e-out), transform .3s var(--e-out), background-color .3s var(--e-out);
}
.standorte__grid li:hover{ border-color:var(--acid); transform:translateY(-3px); background:var(--ink-2); }
.standorte__grid b{ font-family:var(--font-display); font-weight:900; font-size:1.1rem; display:block; }
.standorte__grid span{ font-family:var(--font-mono); font-size:0.72rem; color:var(--faint); letter-spacing:0.02em; }

/* ════════════════════════════ PREISE ═════════════════════════════════ */
.preise{ padding:clamp(2rem,6vh,5rem) var(--pad) clamp(5rem,12vh,9rem); display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; }
.preise__card{
  width:min(680px,100%); text-align:center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,230,0,0.08), transparent 60%),
    var(--ink-1);
  border:1px solid var(--line); border-radius:22px; padding:clamp(2.2rem,5vw,3.5rem);
  box-shadow:0 50px 120px -60px #000;
}
.preise__card .kicker{ display:inline-flex; }
.preise__card .lead{ margin:0 auto 2rem; }
.preise__list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0.7rem; margin:0 0 2rem; text-align:left;
}
.preise__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  border:1px solid var(--line); border-radius:10px; padding:0.8rem 1rem; background:var(--ink);
}
.preise__list span{ font-family:var(--font-mono); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--faint); }
.preise__list b{ font-family:var(--font-display); font-weight:900; font-size:1.15rem; color:var(--acid); }
.preise__note{ font-family:var(--font-mono); font-size:0.7rem; color:var(--faint); margin:1.2rem 0 0; letter-spacing:0.02em; }

/* ════════════════════════════ FINAL CTA ══════════════════════════════ */
.cta{ position:relative; overflow:clip; padding:clamp(6rem,16vh,12rem) var(--pad); isolation:isolate; }
.cta__bg{ position:absolute; inset:-15% 0; z-index:-2; }
.cta__bg img{ width:100%; height:120%; object-fit:cover; filter:grayscale(0.3) contrast(1.05) brightness(0.42); will-change:transform; }
.cta::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,8,10,0.86), rgba(8,8,10,0.7)), radial-gradient(80% 60% at 50% 50%, rgba(255,230,0,0.10), transparent 70%);
}
.cta__inner{ max-width:var(--maxw); margin-inline:auto; text-align:center; }
.cta__h{ font-size:clamp(2.6rem,9vw,7.5rem); text-transform:uppercase; line-height:0.92; }
.cta__h span{ display:block; }
.cta__sub{ color:var(--muted); font-size:clamp(1.05rem,1.6vw,1.3rem); margin:1.3rem 0 2.2rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:0.9rem; justify-content:center; }
.reveal2{ opacity:0; transform:translateY(30px) scale(0.98); }
.is-ready .reveal2{ transition:opacity 1s var(--e-out), transform 1s var(--e-out); }
.reveal2.is-in{ opacity:1; transform:none; }

/* ════════════════════════════ FOOTER ═════════════════════════════════ */
.foot{ background:#070708; border-top:1px solid var(--line); padding:clamp(3rem,7vh,5rem) var(--pad) 2.5rem; }
.foot__top{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; justify-content:space-between; padding-bottom:2.5rem; border-bottom:1px solid var(--line); }
.foot__line{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(1rem,2.2vw,1.5rem); color:var(--steel); margin:0; }
.foot__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; padding:2.5rem 0; }
.foot__cols h4{ font-family:var(--font-mono); font-weight:500; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin:0 0 1rem; }
.foot__cols a{ display:block; color:var(--muted); font-size:0.95rem; padding:0.28rem 0; transition:color .2s; }
.foot__cols a:hover{ color:var(--acid); }
.foot__meta{ font-family:var(--font-mono); font-size:0.72rem; color:var(--faint); margin:1rem 0 0; }

/* ════════════════════ PARALLAX (JS sets --py per layer) ══════════════ */
.hero__route,
.ridge--far,.ridge--near,
.hero__bike,
.hero__tape{ transform:translate3d(0,var(--py,0),0); }
.hero__glow{ transform:translate(-50%,-50%) translate3d(0,var(--py,0),0); }
.hero__road{ transform:translateX(-50%) translate3d(0,var(--py,0),0); }
.proof__media img,
.bikes__media img,
.cta__bg img{ transform:translate3d(0,var(--py,0),0); }

/* ════════════════════════════ RESPONSIVE ═════════════════════════════ */
@media (max-width:960px){
  .nav__links{ display:none; }
  .proof,.standorte,.bikes{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr; gap:2.5rem; }
  .flow__line{ display:none; }
  .specs{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .nav__cta .phone{ display:none; }
  .preise__list{ grid-template-columns:1fr; }
  .strip__row{ grid-template-columns:1fr; }
  .standorte__grid{ grid-template-columns:1fr; }   /* single column on phones — 2-col clipped long city names */
  .foot__cols{ grid-template-columns:repeat(2,1fr); }
  .absenk{ height:280vh; }
  .hero__bike{ display:none; }
  .steps{ display:none; }
  .absenk__sticky{ padding-top:clamp(4.5rem,8vh,6rem); }
  #rig{ width:150%; max-width:none; margin-left:-28%; max-height:52vh; }
  .absenk__hud{ justify-content:center; }
  .specs{ min-width:100%; }
}

/* ════════════════════════════ REDUCED MOTION ═════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal2{ opacity:1 !important; transform:none !important; }
  .marquee__track,.road__dashes,.eyebrow .dot,.kicker .dot{ animation:none !important; }
  .absenk{ height:auto; }
  .absenk__sticky{ position:static; height:auto; min-height:100svh; }
  *{ scroll-behavior:auto !important; }
}

/* ── cinema overlays: letterbox · vignette · grain · ceiling glow ────────
   Toggled by trailer3d.js: body.cine-on while the 3D stage runs in view,
   body.cine-deep during the graded finale beats. Pointer-events: none. */
.cine{ position:fixed; inset:0; pointer-events:none; z-index:60; opacity:0;
  transition:opacity .55s ease; }
body.cine-on .cine{ opacity:1; }
.cine i{ display:block; }
.cine__bar{ position:absolute; left:0; right:0; height:0; background:#020203;
  transition:height .65s cubic-bezier(.65,0,.25,1); }
.cine__bar--t{ top:0; } .cine__bar--b{ bottom:0; }
body.cine-on .cine__bar{ height:5.5vh; }
body.cine-deep .cine__bar{ height:8.5vh; }
.cine__vig{ position:absolute; inset:0; opacity:.75;
  background:radial-gradient(ellipse at center, transparent 54%, rgba(0,0,0,.40) 100%);
  transition:opacity .6s ease; }
body.cine-deep .cine__vig{ opacity:1;
  background:radial-gradient(ellipse at center, transparent 46%, rgba(0,0,0,.58) 100%); }
.cine__glow{ position:absolute; top:0; left:0; right:0; height:11vh;
  background:linear-gradient(rgba(220,230,242,.055), transparent); }
body.cine-deep .cine__glow{ opacity:.4; }
.cine__grain{ position:absolute; inset:-64px;
  background-image:url('assets/asphalt-grain.jpg'); background-size:300px;
  mix-blend-mode:overlay; opacity:.055; animation:grainJitter .85s steps(4) infinite; }
@keyframes grainJitter{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-18px,12px); }
  50%{ transform:translate(11px,-16px); } 75%{ transform:translate(-9px,-8px); }
  100%{ transform:translate(15px,9px); }
}
@media (prefers-reduced-motion: reduce){
  .cine{ display:none; }
}

/* ── hero photo: the real bike, real garage (replaces the SVG glyph) ──── */
.hero__photo{ position:absolute; inset:-4% 0 0 0; z-index:0; overflow:hidden; }
.hero__photo img{ width:100%; height:100%; object-fit:cover; object-position:72% 40%;
  filter:saturate(1.06) contrast(1.05) brightness(.88); }
.hero__photo::after{ content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--ink) 4%, color-mix(in oklab, var(--ink) 84%, transparent) 30%, transparent 62%),
    linear-gradient(0deg, var(--ink) 2%, transparent 30%),
    linear-gradient(180deg, color-mix(in oklab, var(--ink) 72%, transparent) 0%, transparent 24%); }
.hero__copy, .scrollcue{ position:relative; z-index:3; }
@media (max-width: 760px){
  .hero__photo img{ object-position:62% 40%; filter:saturate(1.05) contrast(1.04) brightness(.72); }
}

/* ════════════════════════════ TRUST BAR ══════════════════════════════ */
.trustbar{ padding:clamp(1.4rem,3.5vh,2.4rem) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.trustbar__row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0.6rem;
  border:1px solid var(--line); border-radius:14px; background:var(--ink-1);
  padding:clamp(0.9rem,2vw,1.4rem) clamp(0.8rem,2vw,1.6rem);
}
.trustbar__row li{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.25rem;
  border-right:1px solid var(--line); padding:0 0.4rem; }
.trustbar__row li:last-child{ border-right:0; }
.trustbar__row b{ font-family:var(--font-display); font-weight:900; font-size:clamp(1rem,2vw,1.4rem); color:var(--acid); line-height:1; }
.trustbar__row span{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.02em; color:var(--muted); }
.hero__trust--star{ color:var(--acid) !important; font-weight:700; }

/* ════════════════════════════ PRICE CALCULATOR ═══════════════════════ */
.calc__days{ display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; margin:0 0 1rem; }
.calc__day{
  font-family:var(--font-mono); font-size:0.82rem; font-weight:500;
  padding:0.72rem 0.95rem; border-radius:10px; cursor:pointer;
  background:var(--ink); color:var(--paper); border:1px solid var(--line);
  transition:border-color .2s var(--e-out), color .2s var(--e-out), background-color .2s var(--e-out), transform .2s var(--e-out);
}
.calc__day:hover{ border-color:var(--acid); transform:translateY(-2px); }
.calc__day.is-on{ background:var(--acid); color:var(--acid-ink); border-color:var(--acid); font-weight:700; }
.calc__stepper{ display:flex; align-items:center; justify-content:center; gap:1.1rem; margin:0 0 1.4rem;
  font-family:var(--font-mono); font-size:0.86rem; color:var(--muted); }
.calc__stepper b{ font-family:var(--font-display); font-weight:900; color:var(--paper); font-size:1.15rem; }
.calc__pm{ width:2.75rem; height:2.75rem; border-radius:50%; cursor:pointer;
  background:var(--ink-2); color:var(--paper); border:1px solid var(--line);
  font-size:1.3rem; line-height:1; display:grid; place-items:center;
  transition:border-color .2s, color .2s; }
.calc__pm:hover{ border-color:var(--acid); color:var(--acid); }
.calc__out{ border:1px solid var(--line); border-radius:14px; background:var(--ink); overflow:hidden; margin:0 0 1.6rem; }
.calc__total{ display:flex; align-items:baseline; justify-content:space-between;
  padding:1.1rem 1.3rem; border-bottom:1px solid var(--line);
  background:radial-gradient(120% 120% at 0% 0%, rgba(255,230,0,0.07), transparent 60%); }
.calc__total span{ font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--faint); }
.calc__total b{ font-family:var(--font-display); font-weight:900; font-size:clamp(1.8rem,4vw,2.6rem); color:var(--acid); }
.calc__rows{ display:grid; grid-template-columns:repeat(3,1fr); }
.calc__rows div{ display:flex; flex-direction:column; gap:0.2rem; padding:0.8rem 1rem; border-right:1px solid var(--line); text-align:left; }
.calc__rows div:last-child{ border-right:0; }
.calc__rows span{ font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--faint); }
.calc__rows b{ font-family:var(--font-display); font-weight:900; font-size:1.05rem; color:var(--paper); }
.calc__rows b.ok{ color:#46cf7c; }
.calc__rows b.save{ color:var(--acid); }

/* ════════════════════════════ REVIEWS ════════════════════════════════ */
.reviews{ padding:clamp(4rem,10vh,8rem) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.reviews__head{ text-align:center; }
.reviews__head .kicker{ display:inline-flex; }
.reviews__head .lead{ margin-inline:auto; }
.reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.8rem); margin-top:clamp(2rem,5vh,3.5rem); }
.review{ border:1px solid var(--line); border-radius:16px; background:var(--ink-1); padding:1.6rem 1.5rem;
  display:flex; flex-direction:column; gap:0.9rem; transition:border-color .3s var(--e-out), transform .3s var(--e-out); }
.review:hover{ border-color:var(--acid); transform:translateY(-4px); }
.review__stars{ color:var(--acid); letter-spacing:0.12em; font-size:1.05rem; }
.review p{ color:var(--paper); font-size:1.02rem; line-height:1.5; margin:0; flex:1; }
.review footer{ display:flex; flex-direction:column; gap:0.1rem; }
.review footer b{ font-family:var(--font-display); font-weight:800; font-size:0.98rem; }
.review footer span{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.04em; color:var(--faint); }

/* ════════════════════════════ FAQ ════════════════════════════════════ */
.faq{ padding:clamp(2rem,6vh,5rem) var(--pad) clamp(5rem,12vh,9rem); max-width:880px; margin-inline:auto; }
.faq__list{ display:flex; flex-direction:column; gap:0.7rem; margin-top:clamp(2rem,5vh,3rem); }
.faq__item{ border:1px solid var(--line); border-radius:12px; background:var(--ink-1); overflow:hidden; }
.faq__item.is-open{ border-color:color-mix(in oklab, var(--acid) 45%, var(--line)); }
.faq__q{ width:100%; text-align:left; cursor:pointer; background:none; border:0; color:var(--paper);
  font-family:var(--font-display); font-weight:700; font-size:clamp(1rem,1.8vw,1.18rem);
  padding:1.1rem 1.3rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.faq__q i{ position:relative; width:14px; height:14px; flex:none; }
.faq__q i::before,.faq__q i::after{ content:""; position:absolute; background:var(--acid); transition:transform .3s var(--e-out), opacity .3s; }
.faq__q i::before{ inset:6px 0; }
.faq__q i::after{ inset:0 6px; }
.faq__item.is-open .faq__q i::after{ transform:scaleY(0); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .4s var(--e-out); }
.faq__item.is-open .faq__a{ max-height:340px; }
.faq__a p{ color:var(--muted); font-size:1rem; line-height:1.55; margin:0; padding:0 1.3rem 1.2rem; }
.faq__a p b{ color:var(--paper); font-weight:700; }
.faq__close{ text-align:center; margin-top:clamp(1.8rem,3.5vh,2.6rem); color:var(--faint); font-size:0.98rem; }
.faq__close a{ color:var(--acid); font-weight:600; }
.faq__close a:hover{ text-decoration:underline; }

@media (max-width:860px){
  .trustbar__row{ grid-template-columns:repeat(2,1fr); gap:1rem; }
  .trustbar__row li{ border-right:0; }
  .reviews__grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .trustbar__row{ grid-template-columns:1fr; }
  .calc__rows{ grid-template-columns:1fr; }
  .calc__rows div{ border-right:0; border-bottom:1px solid var(--line); flex-direction:row; justify-content:space-between; align-items:baseline; }
  .calc__rows div:last-child{ border-bottom:0; }
}

/* ══════════════════ AVAILABILITY PULSE · GOOGLE LINK · MOBILE BAR ═════════ */
.avail{ display:flex; align-items:center; justify-content:center; gap:0.5rem; margin:0 0 1.2rem;
  font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.02em; color:var(--paper); }
.avail__dot{ width:9px; height:9px; border-radius:50%; background:#46cf7c; flex:none;
  box-shadow:0 0 0 0 rgba(70,207,124,0.6); animation:availPulse 2.2s ease-out infinite; }
@keyframes availPulse{ 0%{ box-shadow:0 0 0 0 rgba(70,207,124,0.55);} 70%{ box-shadow:0 0 0 10px rgba(70,207,124,0);} 100%{ box-shadow:0 0 0 0 rgba(70,207,124,0);} }
.reviews__more{ text-align:center; margin-top:clamp(1.6rem,4vh,2.6rem); }

.mbar{ position:fixed; left:0; right:0; bottom:0; z-index:80; display:none;
  align-items:center; gap:0.7rem; padding:0.7rem 0.85rem calc(0.7rem + env(safe-area-inset-bottom,0px));
  background:color-mix(in oklab, var(--ink) 90%, transparent); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); transform:translateY(120%); transition:transform .4s var(--e-out); }
.mbar.is-shown{ transform:none; }
.mbar__call{ width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
  color:var(--paper); background:var(--ink-2); border:1px solid var(--line); }
.mbar__call:active{ color:var(--acid); border-color:var(--acid); }
.mbar__info{ display:flex; flex-direction:column; line-height:1.12; min-width:0; }
.mbar__info b{ font-family:var(--font-display); font-weight:900; font-size:1rem; }
.mbar__info span{ font-family:var(--font-mono); font-size:0.64rem; color:var(--muted); white-space:nowrap; }
.mbar .btn{ margin-left:auto; flex:none; padding:0.72rem 1.05rem; font-size:0.82rem; }
@media (max-width:760px){ .mbar{ display:flex; } }
@media (prefers-reduced-motion: reduce){ .avail__dot{ animation:none; } .mbar{ transition:none; } }

/* ══════════════════ MOBILE NAV — burger + pit-board sheet ════════════════ */
.nav__burger{
  display:none; width:42px; height:42px; flex:none; padding:0; cursor:pointer;
  background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:border-color .2s var(--e-out);
}
.nav__burger span{ display:block; width:18px; height:2px; background:var(--paper); border-radius:2px;
  transition:transform .32s var(--e-out), opacity .2s ease; }
.nav__burger[aria-expanded="true"]{ border-color:var(--acid); }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.msheet{
  position:fixed; inset:0; z-index:115;            /* above the nav (100) so the header can't bleed through */
  background:color-mix(in oklab, var(--ink) 98%, #000);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(2rem,6vh,3.5rem);
  padding:clamp(4.5rem,11vh,6.5rem) var(--pad) clamp(2.5rem,7vh,3.5rem);
  opacity:0; visibility:hidden; transform:translateY(-2%);
  transition:opacity .4s var(--e-out), transform .45s var(--e-out), visibility .4s;
}
.msheet__close{
  position:absolute; top:1rem; right:var(--pad); width:42px; height:42px; flex:none;
  display:grid; place-items:center; cursor:pointer;
  background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
  color:var(--paper); font-size:1.1rem; line-height:1;
  transition:border-color .2s var(--e-out), color .2s var(--e-out);
}
.msheet__close:hover, .msheet__close:focus-visible{ border-color:var(--acid); color:var(--acid); }
.msheet::before{ content:""; position:absolute; inset:0 0 auto; height:10px; z-index:-1;
  background:repeating-linear-gradient(45deg, var(--acid) 0 16px, #0a0a0b 16px 32px); opacity:.5; }
.msheet.is-open{ opacity:1; visibility:visible; transform:none; }
.msheet__nav{ display:flex; flex-direction:column; gap:0.2rem; }
.msheet__nav a{
  display:flex; align-items:baseline; gap:1rem; padding:0.5rem 0;
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.8rem,8vw,3rem); letter-spacing:-0.02em; color:var(--paper);
  border-bottom:1px solid transparent; transition:color .2s, border-color .25s var(--e-out);
}
.msheet__nav a b{ font-family:var(--font-mono); font-weight:500; font-size:0.8rem; color:var(--acid); letter-spacing:0.1em; }
.msheet__nav a:active, .msheet__nav a:focus-visible{ color:var(--acid); }
.msheet__foot{ display:flex; flex-direction:column; gap:1rem; }
.msheet__foot .btn{ width:100%; }
.msheet__call{ display:inline-flex; align-items:center; justify-content:center; align-self:center; min-height:44px; padding:0.5rem 1rem;
  font-family:var(--font-mono); font-size:0.86rem; letter-spacing:0.04em; color:var(--muted); text-align:center; }
body.msheet-open{ overflow:hidden; }
@media (max-width:960px){ .nav__burger{ display:flex; } }
@media (min-width:961px){ .msheet{ display:none; } }
@media (prefers-reduced-motion: reduce){ .msheet{ transition:opacity .2s ease, visibility .2s; transform:none; } }

/* skip link — first tab stop, visible only on focus */
.skip{ position:fixed; top:0; left:50%; transform:translate(-50%,-120%); z-index:200;
  background:var(--acid); color:var(--acid-ink); font-family:var(--font-display); font-weight:800;
  text-transform:uppercase; font-size:0.85rem; padding:0.7rem 1.1rem; border-radius:0 0 10px 10px;
  transition:transform .2s var(--e-out); }
.skip:focus-visible{ transform:translateX(-50%); outline:3px solid var(--paper); outline-offset:-3px; }

/* ══════════════════ STANDORTE — real per-Standort deep-links ════════════ */
/* (A) single-Standort cities = whole tile is one link (scoped so clusters don't inherit padding:0) */
.standorte__grid li.standorte__city{ position:relative; padding:0; }
.standorte__grid li.standorte__city > a{ display:block; padding:1rem 2.4rem 1rem 1.1rem; color:inherit; border-radius:inherit; }
.standorte__grid li.standorte__city i{
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  font-family:var(--font-display); font-weight:900; font-size:1.1rem; color:var(--line);
  transition:color .3s var(--e-out), transform .3s var(--e-out);
}
.standorte__grid li.standorte__city:hover i{ color:var(--acid); transform:translateY(-50%) translateX(3px); }
.standorte__grid li.standorte__city > a:focus-visible{ outline:3px solid var(--acid); outline-offset:3px; }

/* (B) multi-Standort cities = city header + a chip per Standort (each chip a deep-link) */
.standorte__grid li.standorte__cluster{ grid-column:1 / -1; }
.standorte__grid li.standorte__cluster:hover{ transform:none; border-color:var(--line); background:var(--ink-1); } /* only chips ignite, not the card */
.standorte__cityname{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-family:var(--font-display); font-weight:900; font-size:1.1rem; text-transform:uppercase; margin:0 0 0.75rem; }
.standorte__cluster .standorte__count{ font-family:var(--font-mono); font-weight:500; font-size:0.68rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.standorte__chips{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.standorte__chip{ display:inline-flex; align-items:center; gap:0.4em; min-height:44px;
  font-family:var(--font-mono); font-weight:500; font-size:0.78rem; letter-spacing:0.02em; color:var(--muted);
  padding:0.55rem 0.85rem; border-radius:9px; border:1px solid var(--line); background:var(--ink);
  transition:color .25s var(--e-out), border-color .25s var(--e-out), background-color .25s var(--e-out), transform .25s var(--e-out); }
.standorte__chip::before{ content:"›"; color:var(--acid); }
.standorte__chip:hover{ color:var(--acid-ink); background:var(--acid); border-color:var(--acid); transform:translateY(-2px); }
.standorte__chip:hover::before{ color:var(--acid-ink); }
.standorte__chip:focus-visible{ outline:3px solid var(--acid); outline-offset:3px; }

/* ══════════════════ WELCHE BIKES PASSEN — photo + stamped spec-plate ══════ */
.bikes{ display:grid; grid-template-columns:0.95fr 1.05fr; align-items:start; gap:clamp(2rem,5vw,5rem);
  padding:clamp(5rem,12vh,9rem) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.bikes__media{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:0 40px 90px -40px #000, inset 0 0 0 1px var(--line); }
.bikes__media img{ position:absolute; top:-15%; left:0; width:100%; height:130%; object-fit:cover;
  object-position:center 45%; will-change:transform; filter:contrast(1.05) saturate(0.92) brightness(0.92); } /* centered overflow → parallax never bares an edge */
.bikes__chip{ position:absolute; left:1rem; bottom:1rem;
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--acid); color:var(--acid-ink); padding:0.4rem 0.7rem; border-radius:7px; }
.bikes__copy .display{ margin:0 0 1rem; }
.bikes__copy .lead{ margin:0; }
.bikes__plate{ list-style:none; margin:1.6rem 0 1.1rem; border:1px solid var(--line); border-left:3px solid var(--acid);
  border-radius:14px; background:var(--ink-1); overflow:hidden; }
.bikes__plate li{ display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:0 1.2rem;
  padding:0.85rem 1.1rem; border-top:1px solid var(--line); transition:background-color .25s var(--e-out); }
.bikes__plate li:first-child{ border-top:none; }
.bikes__plate li:hover{ background:var(--ink-2); }
.bikes__plate li span{ font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.bikes__plate li b{ font-family:var(--font-display); font-weight:900; font-size:clamp(1.05rem,1.6vw,1.35rem);
  color:var(--paper); text-align:right; line-height:1.05; }
.bikes__plate li b em{ font-style:normal; color:var(--acid); }
.bikes__note{ font-family:var(--font-mono); font-size:0.7rem; color:var(--faint); margin:0 0 1.4rem; letter-spacing:0.02em; }

/* ══════════════════ MOBILE COMPAT — small-phone hardening ═══════════════ */
.btn{ max-width:100%; }                           /* a button can never exceed its container */
.cine{ overflow:hidden; }                         /* clip the grain overlay's -64px bleed */
/* .bikes is defined AFTER the @media(960) block, so its 1-col collapse must be re-stated here to win source-order */
@media (max-width:960px){ .bikes{ grid-template-columns:1fr; } }
@media (max-width:600px){
  /* brand wordmark + "MIETEN" + burger don't fit on small phones → drop the redundant top CTA
     (booking stays reachable via the burger sheet, the hero CTA, and the sticky #mbar) */
  .nav__cta .btn--mini{ display:none; }
}
@media (max-width:480px){
  .btn{ white-space:normal; }                     /* long labels (VERFÜGBARKEIT PRÜFEN) wrap instead of overflowing */
  .btn--lg{ padding:1.05rem 1.4rem; }
}
@media (max-width:380px){
  .nav__word{ font-size:1rem; }                 /* trim the wordmark a touch on the very smallest phones */
  .display{ font-size:clamp(2.15rem,8.5vw,6.2rem); }   /* keep long words (SCHWARM., NICHT.) from kissing the edge */
}

/* ══════════════════ FINAL-CTA assurance row (risk reversal) ══════════════ */
.cta__assure{ display:flex; flex-wrap:wrap; gap:0.5rem 1.4rem; justify-content:center; margin:1.6rem 0 0;
  font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.04em; color:var(--muted); }
.cta__assure li{ display:flex; align-items:center; }
.cta__assure li::before{ content:"✓"; color:var(--acid); margin-right:0.45em; font-weight:700; }

/* ══════════════════ CALCULATOR — honest savings chips + steady digits ════ */
.calc__day{ position:relative; }
.calc__tag{ display:inline-block; margin-left:0.5em; font-family:var(--font-mono); font-style:normal;
  font-size:0.74em; font-weight:700; letter-spacing:0.01em; vertical-align:baseline;
  padding:0.1em 0.42em; border-radius:6px;
  color:var(--acid); background:color-mix(in oklab, var(--acid) 15%, transparent); }
.calc__day.is-on .calc__tag{ color:var(--acid-ink); background:color-mix(in oklab, var(--acid-ink) 16%, transparent); }
.trustbar__row b, .calc__total b, #calcTotal, #calcPer, #calcSave{ font-variant-numeric:tabular-nums; }
.calc__total b{ display:inline-block; transform-origin:right center; }
.calc__total b.bump{ animation:calcBump .42s var(--e-out); }
@keyframes calcBump{ 0%{ transform:scale(1); } 38%{ transform:scale(1.07); color:var(--acid-el); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .calc__total b.bump{ animation:none; } }