:root {
  /* Einzige Quelle der Farb-/Basis-Tokens. Frueher gab es zwei weitere :root-
     Bloecke (bei ~3771 und ~7714), die dieselben Tokens mit ABWEICHENDEN Werten
     neu definierten - der spaetere gewann still. Hier sind die tatsaechlich
     wirksamen Werte einmal zentral zusammengefuehrt. */
  --black: #010101;
  --black-2: #141414;
  --white: #fff;
  --text: #0b0b0b;
  --gray: #6d6d6d;
  --grau-text: #6b6b6b; /* auf allen hellen Flaechen >= 4.5:1 */
  --line: #dcdcdc;
  --orange: #ff5b16;
  --orange-dark: #c84612;
  --orange-action: #c84612;
  --orange-action-hover: #a9360d;
  --orange-on-light: #a9360d;
  --green: #20a653;
  --red: #dc3328;
  --page-gutter: 64px;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
  --ease: cubic-bezier(0.18, 0.86, 0.22, 1);
  /* Skalen (Audit Wave 3) - werden Schritt fuer Schritt angewandt. Reine
     Definitionen, noch nicht flaechendeckend genutzt: additiv, ohne visuelle
     Wirkung, bis eine Komponente sie bewusst uebernimmt. */
  --fs-100: 0.6875rem; --fs-200: 0.75rem; --fs-300: 0.8125rem; --fs-400: 0.875rem;
  --fs-500: 1rem; --fs-600: 1.25rem; --fs-700: 1.75rem; --fs-800: 2.5rem;
  --fs-display: clamp(2.5rem, 8vw, 5rem);
  --lh-tight: 1.1; --lh-body: 1.55;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius: 8px; --radius-pill: 999px; --control-h: 48px;
  --container: min(1560px, 100vw - 2 * var(--page-gutter));
  --z-nav: 90; --z-drawer: 120; --z-modal: 140; --z-loader: 1000;
  --dur-fast: 0.18s; --dur: 0.25s; --dur-slow: 0.45s;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

/* overflow-x: clip statt hidden (html UND body): hidden auf beiden machte
   body am Telefon zu einem eigenen Scroll-Container. Android-Browser (u. a.
   Samsung Internet auf dem Galaxy S25 Ultra) scrollen dann am Seitenanfang
   ruckelig bzw. haengen beim ersten Wischen zwischen zwei Scrollern. clip
   schneidet genauso ab, erzeugt aber keinen Scroll-Container. hidden bleibt
   als Rueckfall fuer Browser ohne clip. */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Am Touchgeraet kein weiches Programm-Scrollen: der Browser hat dort eigenes
   Schwungscrollen, und smooth kaempfte beim Laden bzw. bei "Zurueck" mit der
   Scroll-Wiederherstellung - die Seite schob sich am Start sichtbar nach. */
@media (pointer: coarse) {
  html {
    scroll-behavior: auto;
  }
}

:root {
  --header-h: 71px; /* wird per JS dynamisch auf die echte Headerhöhe gesetzt */
}

html {
  scroll-padding-top: var(--header-h);
}

section[id],
footer[id] {
  scroll-margin-top: var(--header-h);
}

/* KERN der Auflösungs-Anpassung: Beim Antippen landet eine Section direkt unter
   dem fixen Header. Damit sie dann EXAKT den sichtbaren Bereich füllt (und nicht
   um die Headerhöhe unten hinausragt), ist ihre Höhe = Bildschirm minus Header.
   Geräteunabhängig über die gemessene --header-h + dynamische dvh. */
main > section:not(.hero),
main > footer {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
}

/* Hero liegt ganz oben, der Header überlagert ihn transparent -> volle Höhe. */
main > section.hero {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Inhalts-Grids vertikal zentrieren, damit der gewonnene Vollbild-Platz gefüllt
   wirkt statt Inhalt oben + Leere unten. */
.price-band,
.faq-world {
  align-content: center;
}

/* 093: Preise und FAQ sind reiner Text ohne Foto, anders als Verleih, Training,
   Tour und Gutschein (die bleiben bewusst vollflaechig - echtes Erlebnis statt
   Luft). Ohne erzwungene Vollbildhoehe macht das Home spuerbar kuerzer, ohne
   dass eine der beiden Sektionen inhaltlich leer wirkt (eigenes Padding bleibt
   erhalten, nur der Boden faellt weg). */
#preise.price-band,
#shop.faq-world {
  min-height: 0;
}

/* Flache Laptops (z.B. 1366x768): Buchung so kompaktieren, dass Termin-Auswahl,
   Bikes und Buchungsbar zusammen in EINEN Screen passen. Heading klein, lange
   Beschreibung + redundante Label-Leiste raus. Auf hohen Screens bleibt alles. */
/* Die Buchung ist ein Tool, kein Hero: Heading auf Desktop immer kompakt, damit
   Termin + Bikes + Buchungsbar zusammen in einen Screen passen (jede Höhe). */
@media (min-width: 901px) {
  #startplatz .booking-heading {
    width: min(1540px, calc(100vw - 64px));
    margin: 0 auto;
    padding: 14px 0 12px;
    gap: var(--space-2);
  }
  #startplatz .booking-heading h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    line-height: 1;
  }
  /* Buchung ist ein Tool: lange Beschreibung + die redundante weiße Label-Leiste
     (war der weiße Strich, F3) raus. Die Bühne füllt den verbleibenden Platz
     exakt aus -> kein weißer Rest, auf jeder Bildschirmhöhe ein Screen. */
  #startplatz .booking-heading > p {
    display: none;
  }
  .booking-experience .bike-label-rail {
    display: none;
  }
  .booking-experience .gate-stage {
    max-height: calc(100dvh - var(--header-h) - 390px);
  }
}

body {
  margin: 0;
  color: var(--text);
  /* Dunkel statt #fff: jede Section bringt ihren eigenen Hintergrund mit, der
     Body wird nie als Fläche gebraucht. Dunkel verhindert weiße Nahtstreifen
     (z. B. unter dem 100dvh-Hero) auf der durchgehend dunklen Theme-Seite. */
  background: #0a0a0c;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
  overflow-x: clip;
}

body.detail-open {
  overflow: hidden;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  /* Mit width/height im HTML kennt der Browser das Seitenverhaeltnis und
     haelt den Platz frei - ohne "height: auto" wuerde das Bild beim
     Verkleinern aber verzerren. */
  height: auto;
  display: block;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  color: #fff;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.loader {
  font-size: var(--fs-200);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.main-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  min-height: 72px; /* KONSTANT: keine Scroll-Schrumpfung -> stabile Section-Höhen
                       und punktgenaue Nav-Landung (nur der Hintergrund wechselt). */
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  transition: background var(--dur) ease;
}

.main-nav.is-scrolled {
  background: rgba(0, 0, 0, 0.92);
}

.main-nav-sub {
  width: min(1540px, calc(100vw - 44px));
  min-height: inherit;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 34px;
}

.logo img {
  width: 80px;
  height: auto;
}

.mobile-nav {
  display: none;
}

.inner-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.inner-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(15px, 1.7vw, 30px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.inner-nav li {
  position: relative;
}

.inner-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color var(--dur-fast) ease;
}

.inner-nav a:hover,
.inner-nav a.active {
  color: #fff;
}

.has-sub > a::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: var(--space-2);
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.has-sub ul {
  position: absolute;
  top: 100%;
  left: -20px;
  display: grid;
  min-width: 210px;
  gap: 0;
  padding: 14px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.96);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.has-sub:hover ul,
.has-sub:focus-within ul {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.has-sub ul a {
  width: 100%;
  min-height: 36px;
  padding: 0 20px;
}

.phone-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
}

.cart-pill {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.cart-pill span {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--orange-dark);
  color: #fff;
  font-size: var(--fs-200);
  font-weight: 800;
}

.mobile-cart-pill {
  display: none;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: #000;
}

.hero-media,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.08);
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.14) 52%, rgba(0, 0, 0, 0.72)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.3));
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100vw - 36px));
  padding-top: 74px;
  text-align: center;
}

.section-caption {
  margin: 0 0 18px;
  color: currentColor;
  opacity: 0.72;
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 auto 22px;
  max-width: 1040px;
  font-size: 8rem;
  line-height: 0.86;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-lead {
  width: min(100%, 760px);
  max-width: 760px;
  margin: 0 auto 34px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.18rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: var(--fs-200);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
}
/* Sichtbarer Fokus-Ring auf allen Buttons. #c84612 haelt Kontrast auf hellem
   Grund (~4,6:1) und auf dem dunklen Hero (~3,2:1) - ein Wert fuer beide. */
.btn:focus-visible {
  outline: 3px solid var(--orange-dark, #c84612);
  outline-offset: 3px;
}

/* Skip-Link: unsichtbar bis Tastatur-Fokus, springt dann an #main. */
.skip-to-content {
  position: absolute;
  left: 12px;
  top: -120px;
  z-index: 200;
  background: #111;
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.16s ease;
}
.skip-to-content:focus {
  top: 12px;
  outline: 3px solid #c84612;
  outline-offset: 2px;
}

.btn-border-w {
  border-color: rgba(255, 255, 255, 0.72);
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.btn-mod {
  color: #fff;
  background: #000;
}

.btn.full {
  width: 100%;
}

.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 32px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translateX(-50%);
}

.scroll-down::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.page-section {
  padding: clamp(70px, 8vw, 130px) 0;
}

.pt-40 {
  padding-top: 40px;
}

.container {
  width: min(1240px, calc(100vw - 40px));
  margin: 0 auto;
}

.section-head {
  max-width: 800px;
  margin: 0 auto 42px;
  text-align: center;
}

.section-head.compact {
  margin-bottom: var(--space-8);
}

.section-head h2,
.row-like h2 {
  margin: 0 0 16px;
  font-size: 4.7rem;
  line-height: 0.96;
  letter-spacing: 0;
  text-transform: uppercase;
}

.section-head p:last-child,
.text-gray {
  color: var(--gray);
}

.booking-section {
  background: #fff;
  padding-top: 86px;
  padding-bottom: 0;
}

.booking-section .section-head {
  margin-bottom: var(--space-6);
}

.booking-section .section-head h2 {
  font-size: 4.6rem;
}

.booking-experience {
  position: relative;
  display: block;
  overflow: hidden;
  background: #050505;
}

.gate-stage {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1672 / 941;
  /* Bühnenhöhe an den verfügbaren Platz binden: 100dvh minus das fixe Drumherum
     (Header + Termin-Sidebar + Label-Leiste + Buchungsbar ~= 460px), zusätzlich
     auf 52vh / 560px gekappt. So bleibt die komplette Buchung auf JEDER Bildschirm-
     höhe (auch 768er-Laptops) ein Screen, ohne zu cramped zu werden. */
  max-height: min(52vh, calc(100dvh - var(--header-h) - 520px), 560px);
  overflow: hidden;
  transform-origin: var(--focus-x, 50%) 72%;
  /* kein permanentes will-change: hielt die riesige Bühne dauerhaft als
     GPU-Layer mit Filter — Quelle für Render-Artefakte beim Scrollen */
  transition: transform 1.45s cubic-bezier(0.16, 1, 0.3, 1), filter 1.1s ease;
}

.booking-experience.is-detail .gate-stage {
  transform: scale(1.32) translate3d(var(--pan-x, 0), var(--pan-y, 0), 0);
  filter: saturate(1.04) contrast(1.03);
}

.gate-photo {
  position: absolute;
  inset: 0;
  background-image: url("../images/emx/booking-gate-wide-v2.webp");
  background-size: cover;
  background-position: center bottom;
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0) scale(1.012);
  transition: filter 0.8s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-experience.is-detail .gate-photo {
  filter: brightness(0.72) saturate(0.82) blur(0.7px);
  transform: translate3d(0, 0, 0) scale(1.01);
}

/* 2.5D atmosphere behind the bikes: top dim, ground depth, soft spotlight */
.stage-atmos {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(82% 58% at 50% 84%, rgba(255, 138, 60, 0.10), transparent 60%),
    radial-gradient(70% 50% at 50% 46%, rgba(255, 255, 255, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(8, 8, 10, 0.42) 0%, rgba(8, 8, 10, 0) 26%),
    linear-gradient(0deg, rgba(5, 5, 7, 0.74) 0%, rgba(5, 5, 7, 0.12) 26%, transparent 44%);
  transition: opacity 0.8s ease;
}

/* Foreground vignette + spotlight (premium framing, above the bikes) */
.stage-vignette {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 64%, transparent 52%, rgba(0, 0, 0, 0.46) 100%);
  mix-blend-mode: multiply;
  transition: opacity 0.8s ease;
}

.booking-experience.is-detail .stage-atmos {
  opacity: 0.5;
}

.booking-experience.is-detail .stage-vignette {
  background: radial-gradient(120% 100% at var(--focus-x, 50%) 60%, transparent 30%, rgba(0, 0, 0, 0.6) 100%);
}

.bike-row {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 19fr 15fr 14.5fr 16fr 15.5fr 20fr;
}

.bike-choice {
  position: relative;
  min-width: 0;
  min-height: 100%;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* Orange ground line entfernt — Auswahl/Hover lesen jetzt allein über die
   Silhouetten-Kontur (.bike-edge), keine zusätzliche Bodenlinie (perf-fix). */

.bike-choice:focus-visible {
  outline: none;
}

.booking-experience.is-detail .bike-choice:not(.is-selected) {
  opacity: 0.18;
}

/* Pure click/focus target — no visible box. Hover & selection now read on the
   bike's real silhouette (alpha contour on .bike-figure), per Startplatz
   briefing: "Keine Box um das Bike. Keine grosse leuchtende Flaeche." */
.bike-hit-area {
  position: absolute;
  inset: 34% 4% 7%;
}

.bike-choice.is-soldout .bike-hit-area {
  cursor: not-allowed;
}

/* Individual bike figures standing on the gravel. The hover/selection contour is
   NOT a filter — it is a masked silhouette duplicate (.bike-edge) behind the
   bike, so at rest there are zero permanent filter layers (perf-fix). */
.bike-figure {
  position: absolute;
  left: 50%;
  bottom: calc(16% + var(--bike-y, 0%));
  height: var(--bike-h, 44%);
  width: auto;
  z-index: 1;
  transform: translate3d(-50%, var(--lift, 0%), 0) scale(var(--bscale, 1));
  transform-origin: 50% 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.5));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.17s ease;
  pointer-events: none;
}

/* The contour: a masked duplicate of the bike's own PNG alpha, filled with one
   solid colour, sized to the same box (aspect-ratio --ar) and scaled a hair
   larger (--edge-grow) so a ~1px rim peeks out exactly along the silhouette.
   opacity:0 at rest => not painted, no layer. Only opacity/transform animate. */
.bike-edge {
  position: absolute;
  left: 50%;
  bottom: calc(16% + var(--bike-y, 0%));
  height: var(--bike-h, 44%);
  aspect-ratio: var(--ar, 0.6);
  z-index: 0;
  transform: translate3d(-50%, var(--lift, 0%), 0)
    scale(calc(var(--bscale, 1) + var(--gx, 0)), calc(var(--bscale, 1) + var(--gy, 0)));
  transform-origin: 50% 100%;
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-mask: var(--fig) center bottom / 100% 100% no-repeat;
  mask: var(--fig) center bottom / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Soft contact shadow under the wheels */
.bike-choice::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(14.5% + var(--bike-y, 0%));
  width: calc(var(--bike-h, 44%) * 0.62);
  height: 16px;
  transform: translateX(-50%) scaleX(1.7);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
  filter: blur(4px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease);
  pointer-events: none;
}

/* Hover: thin (~1px) white rim along the silhouette, bike lifts <=1.5%. */
.bike-choice:hover,
.bike-choice:focus-visible {
  --lift: -1.5%;
  --bscale: 1.012;
}
/* --gx (sides) > --gy (top) gleicht die bottom-anchored Skalierung aus, sodass
   ringsum ~1px gleichmäßiger Rand entsteht statt oben dick / seitlich unsichtbar. */
.bike-choice:hover .bike-edge,
.bike-choice:focus-visible .bike-edge {
  opacity: 0.95;
  --gx: 0.013;
  --gy: 0.004;
}

/* Selected: ~1px EMX-orange rim along the real silhouette (overview + detail). */
.bike-choice.is-selected .bike-edge {
  opacity: 1;
  background-color: var(--orange);
  --gx: 0.015;
  --gy: 0.0045;
}

/* Soldout never lights an orange rim; stays desaturated. */
.bike-choice.is-soldout .bike-edge {
  background-color: rgba(170, 170, 170, 0.8);
}

/* Cinematic focus: selected bike steps forward, others recede. */
.booking-experience.is-detail .bike-choice.is-selected {
  --lift: -5%;
  --bscale: 1.08;
}

.booking-experience.is-detail .bike-choice:not(.is-selected) .bike-figure {
  --bscale: 0.92;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.5)) brightness(0.6) saturate(0.7) blur(0.6px);
}

.bike-choice.is-soldout .bike-figure {
  filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.5)) grayscale(0.85) brightness(0.7);
}

.bike-legend-item.is-checking .bike-legend-stock {
  color: #666;
}

.booking-experience.is-loading-availability .bike-row {
  opacity: 0.72;
}

/* Staggered reveal of the detail data cards when the panel opens */
.bike-detail.is-open .overview-facts article,
.bike-detail.is-open .spec-grid article,
.bike-detail.is-open .photo-grid img {
  opacity: 0;
  animation: detailCardIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bike-detail.is-open .overview-facts article:nth-child(2),
.bike-detail.is-open .spec-grid article:nth-child(2) {
  animation-delay: 0.06s;
}
.bike-detail.is-open .overview-facts article:nth-child(3),
.bike-detail.is-open .spec-grid article:nth-child(3) {
  animation-delay: 0.12s;
}
.bike-detail.is-open .spec-grid article:nth-child(4) {
  animation-delay: 0.18s;
}
.bike-detail.is-open .spec-grid article:nth-child(5) {
  animation-delay: 0.24s;
}
.bike-detail.is-open .spec-grid article:nth-child(6) {
  animation-delay: 0.3s;
}
.bike-detail.is-open .spec-grid article:nth-child(7) {
  animation-delay: 0.36s;
}
.bike-detail.is-open .spec-grid article:nth-child(8) {
  animation-delay: 0.42s;
}

@keyframes detailCardIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bike-detail.is-open .overview-facts article,
  .bike-detail.is-open .spec-grid article,
  .bike-detail.is-open .photo-grid img {
    opacity: 1;
    animation: none;
  }
}

.mobile-booking-title {
  display: none;
}

/* Mobile Experience 086: Die Telefonansicht ist ein kurzer Buchungsweg. Die
   ausfuehrlichen Inhaltswelten werden erst eingeblendet, wenn sie im Menue
   bewusst angewaehlt werden. */
@media (max-width: 900px) {
  #main {
    display: flex;
    flex-direction: column;
  }

  #home { order: 1; }
  .mobile-quick-nav { order: 2; }
  #startplatz { order: 3; }
  #gutschein { order: 4; }
  #shop { order: 5; }
  #park { order: 6; }
  #preise { order: 7; }
  #verleih { order: 8; }
  #training { order: 9; }
  #tour { order: 10; }

  #park,
  #preise,
  #verleih,
  #training,
  #tour,
  .action-film {
    display: none;
  }

  #park.mobile-section-revealed,
  #preise.mobile-section-revealed,
  #verleih.mobile-section-revealed,
  #training.mobile-section-revealed,
  #tour.mobile-section-revealed {
    display: block;
  }

  .hero {
    min-height: min(680px, 84svh);
  }

  .hero-inner {
    margin-bottom: 88px;
  }

  .hero-eyebrow {
    margin-bottom: 10px;
  }

  .hero-title .line {
    font-size: clamp(2.55rem, 12.4vw, 3.75rem);
    line-height: 0.92;
  }

  .hero-lead {
    display: -webkit-box;
    max-width: 33ch;
    margin-top: 15px;
    overflow: hidden;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .hero-trust,
  .hero-scroll {
    display: none;
  }

  .mobile-quick-nav a {
    min-height: 64px;
    padding: 10px 12px;
  }

  .mobile-quick-nav span {
    display: none;
  }

  .booking-section {
    padding-top: 0;
  }

  .booking-heading {
    display: block;
    padding: 30px 16px 18px;
  }

  .booking-heading .section-caption {
    margin-bottom: 6px;
  }

  .desktop-booking-title {
    display: none;
  }

  .mobile-booking-title {
    display: inline;
  }

  .booking-heading h2 {
    font-size: 30px;
    line-height: 1.05;
  }

  .booking-steps {
    display: none;
  }

  .booking-experience {
    overflow: visible;
    background: #f3f3f3;
  }

  .booking-sidebar {
    background: #fff;
  }

  .side-block {
    padding: 14px 14px 16px;
  }

  .booking-intro {
    padding-bottom: 10px;
  }

  .booking-intro > label {
    font-size: var(--fs-300);
  }

  .date-toggle {
    min-height: 52px;
    font-size: 15px;
  }

  .booking-days,
  .picker-label {
    display: none;
  }

  .slot-grid {
    gap: var(--space-3);
  }

  .picker-block {
    gap: 0;
  }

  .day-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    overflow: visible;
    padding: 0;
  }

  .day-chip {
    width: 100%;
    min-width: 0;
    min-height: 60px;
    padding: 7px 4px;
  }

  .day-chip:nth-child(n + 4) {
    display: none;
  }

  .day-wd {
    font-size: var(--fs-200);
  }

  .day-date {
    font-size: 15px;
  }

  .time-strip {
    gap: var(--space-2);
  }

  .time-slot {
    min-height: 60px;
    padding: 10px 12px;
    border-left-width: 3px;
  }

  .time-slot strong {
    font-size: var(--fs-400);
  }

  .booking-experience .gate-stage {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    overflow: visible;
    padding: 10px 10px 18px;
    background: #f3f3f3;
  }

  .booking-experience .gate-photo,
  .booking-experience .stage-atmos,
  .booking-experience .stage-vignette {
    display: none;
  }

  .booking-experience .bike-row {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 10px;
    width: 100%;
    padding: 0;
    overflow: visible;
  }

  .booking-experience .bike-choice {
    height: 238px;
    min-height: 238px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 7px;
    color: #111;
    background: #fff;
    box-shadow: none;
  }

  .booking-experience .bike-choice:hover,
  .booking-experience .bike-choice:focus-visible,
  .booking-experience .bike-choice.is-selected {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--orange);
  }

  .booking-experience .bike-choice::before {
    bottom: 64px;
    opacity: 0.18;
  }

  .booking-experience .bike-open {
    padding: 0;
  }

  .booking-experience .bike-photo {
    inset: 43px 8px 70px;
  }

  .booking-experience .bike-figure,
  .booking-experience .bike-choice[data-bike] .bike-figure {
    width: 96%;
    height: 132px;
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.22));
  }

  .booking-experience .bike-choice:hover .bike-figure,
  .booking-experience .bike-choice:focus-visible .bike-figure,
  .booking-experience .bike-choice.is-selected .bike-figure {
    transform: none;
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.22));
  }

  .booking-experience .bike-caption {
    top: 10px;
    right: 8px;
    left: 8px;
    gap: 3px;
  }

  .booking-experience .bike-caption strong {
    max-width: calc(100% - 48px);
    overflow: hidden;
    color: #111;
    font-size: var(--fs-200);
    text-overflow: ellipsis;
    text-shadow: none;
    white-space: nowrap;
  }

  .booking-experience .bike-caption small {
    display: grid;
    gap: 0;
    padding: 3px 6px;
    line-height: 1.15;
    color: #fff;
    font-size: var(--fs-200);
    background: var(--orange-dark);
  }

  /* Die Beschriftung war ausgeblendet - im Kaestchen stand nur "115-135 CM",
     und niemand wusste, worauf sich die Zahl bezieht.
     Sie steht jetzt DARUEBER, nicht daneben: nebeneinander braeuchte das
     Kaestchen 172px, die Karte bietet rund 150px. Gestapelt sind es 99px. */
  .booking-experience .bike-caption small span {
    display: block;
    font-size: var(--fs-100);
    font-weight: 700;
    letter-spacing: .04em;
    opacity: .9;
  }

  .booking-experience .bike-caption small b {
    font-size: var(--fs-200);
  }

  .booking-experience .bike-caption em {
    top: 0;
    right: 0;
    padding: 3px 5px;
    color: #111;
    font-size: var(--fs-200);
    text-shadow: none;
  }

  .bike-card-stepper {
    right: 8px;
    bottom: 8px;
    width: 44px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .bike-choice:not(.has-quantity) .bike-card-stepper .quantity-button:first-child,
  .bike-choice:not(.has-quantity) .bike-card-stepper .quantity-value {
    display: none;
  }

  .bike-choice.has-quantity .bike-card-stepper {
    width: 132px;
    border: 1px solid #ddd;
    background: #fff;
  }

  .bike-card-stepper .quantity-button {
    color: #111;
    background: #fff;
  }

  .bike-card-stepper .quantity-button.is-plus {
    color: #fff;
    background: var(--orange);
  }

  .bike-card-stepper .quantity-value {
    color: #111;
  }

  .voucher-copy {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .voucher-copy h2 {
    font-size: 30px;
  }

  .voucher-media {
    display: none;
  }

  .faq-world {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .faq-heading h2 {
    font-size: 30px;
  }

  .faq-lead,
  .faq-contact {
    display: none;
  }

  .faq-grid details:nth-child(n + 4) {
    display: none;
  }

  .cart-intro,
  .cart-assurance,
  .checkout-demo-note,
  .checkout-facts,
  .checkout-panel[data-checkout-panel="2"] .checkout-fieldset:nth-child(n + 2) {
    display: none !important;
  }

  .checkout-dialog {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .checkout-fields.two-cols {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .checkout-fields input {
    min-height: 50px;
  }
}

@media (max-width: 360px) {
  .booking-experience .bike-choice {
    height: 224px;
    min-height: 224px;
  }

  .booking-experience .bike-photo {
    right: 5px;
    left: 5px;
  }
}

.booking-sidebar {
  position: relative;
  z-index: 20;
  width: 100%;
  color: #111;
  transition: opacity 0.35s ease, transform 0.5s var(--ease);
}

.booking-experience.is-detail .booking-sidebar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
}

.side-block {
  display: grid;
  grid-template-columns: minmax(230px, 0.45fr) minmax(0, 1.55fr);
  gap: 28px;
  align-items: stretch;
  width: min(1540px, calc(100vw - 64px));
  min-height: 104px;
  margin: 0 auto;
  padding: 14px 0;
  background: #fff;
}

.booking-sidebar {
  background: #fff;
}

.booking-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 28px;
  border-right: 1px solid #ddd;
}

.booking-intro label {
  margin-bottom: var(--space-2);
  font-size: var(--fs-300);
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.booking-intro input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #d2d2d2;
  border-radius: 0;
  color: #111;
  background: #fafafa;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.01em;
  color-scheme: light;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.booking-intro input:hover {
  border-color: #b3b3b3;
  background: #fff;
}

.booking-intro input:focus-visible {
  outline: none;
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 91, 22, 0.16);
}

.booking-days {
  margin-top: 9px;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau-text);
}

/* ===== Termin-Auswahl: Tag -> Startplatz (Uhrzeit) ===== */
.slot-grid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  min-width: 0;
}

.picker-block {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.picker-label {
  flex: 0 0 auto;
  /* Feste Breite haelt "Tag" und "Startplatz" buendig untereinander. Sie war
     mit 70px aber schmaler als das laengere Wort selbst (gemessen 90px in
     Grossbuchstaben mit 0.14em Sperrung): "Startplatz" lief aus seiner Box
     heraus und schob sich unter die Zeitfenster. min-width: max-content macht
     das strukturell unmoeglich - die Spalte kann nie schmaler werden als ihr
     eigener Text, egal bei welcher Zoomstufe oder Schriftgroesse. */
  width: 96px;
  min-width: max-content;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau-text);
}

.day-strip,
.time-strip {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  min-width: 0;
}

/* Tag-Chips (nur Betriebstage Do/Fr/Sa) */
.day-chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 62px;
  padding: 8px 11px 9px;
  border: 1px solid #e2e2e2;
  border-bottom: 3px solid transparent;
  background: #fff;
  cursor: pointer;
  transition: transform 0.2s var(--ease), border-color 0.2s ease, box-shadow 0.22s ease, background 0.2s ease;
  animation: pick-in 0.4s var(--ease) both;
}

.day-chip:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(0, 0, 0, 0.08); }
.day-wd { font-size: var(--fs-100); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau-text); }
.day-num { font-size: 15px; font-weight: 800; color: #111; }
.day-dot { width: 7px; height: 7px; border-radius: 50%; background: #cfcfcf; }
.day-chip.is-free .day-dot { background: #2faa4d; }
.day-chip.is-soldout .day-dot { background: var(--orange); }
.day-chip.is-soldout .day-num,
.day-chip.is-soldout .day-wd { color: #c84612; }
.day-chip.is-active { border-bottom-color: #111; box-shadow: 0 9px 22px rgba(0, 0, 0, 0.12); transform: translateY(-2px); }
.day-chip.is-active .day-num { color: #000; }

/* Startplatz-Uhrzeiten mit Verfügbarkeit */
.time-slot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 112px;
  padding: 9px 14px;
  border: 1px solid #e2e2e2;
  border-left: 3px solid transparent;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s var(--ease), border-color 0.2s ease, box-shadow 0.22s ease, background 0.2s ease;
  animation: pick-in 0.4s var(--ease) both;
}

.time-slot:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(0, 0, 0, 0.08); }
.time-slot strong { font-size: var(--fs-400); font-weight: 800; color: #111; }
.time-state { display: flex; align-items: center; gap: 5px; font-size: var(--fs-100); font-weight: 800; white-space: nowrap; }
.time-state i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }

.time-slot.is-free { border-left-color: #2faa4d; }
.time-slot.is-free .time-state { color: #1c7c34; }
.time-slot.is-free .time-state i { background: #2faa4d; }

.time-slot.is-low { border-left-color: #f0a020; }
.time-slot.is-low .time-state { color: #a96500; }
.time-slot.is-low .time-state i { background: #f0a020; }

/* AUSGEBUCHT = orange, deutlich — Klick bietet den nächsten freien Termin an */
.time-slot.is-soldout { border-left-color: var(--orange); background: #fff4ee; cursor: pointer; }
.time-slot.is-soldout strong { color: #6f5647; }
.time-slot.is-soldout .time-state { color: #c84612; }
.time-slot.is-soldout .time-state i { background: var(--orange); }

.time-slot.is-active { border-color: #111; border-left-color: #111; box-shadow: 0 9px 22px rgba(0, 0, 0, 0.13); transform: translateY(-2px); }

.day-chip:nth-child(2) { animation-delay: 25ms; }
.day-chip:nth-child(3) { animation-delay: 50ms; }
.day-chip:nth-child(4) { animation-delay: 75ms; }
.day-chip:nth-child(n + 5) { animation-delay: 100ms; }
.time-slot:nth-child(2) { animation-delay: 35ms; }
.time-slot:nth-child(3) { animation-delay: 70ms; }
.time-slot:nth-child(4) { animation-delay: 105ms; }
.time-slot:nth-child(5) { animation-delay: 140ms; }

@keyframes pick-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.bike-label-rail {
  position: relative;
  z-index: 16;
  display: grid;
  grid-template-columns: 19fr 15fr 14.5fr 16fr 15.5fr 20fr;
  color: #111;
  background: #fff;
  border-bottom: 1px solid #ddd;
  transition: opacity 0.35s ease, transform 0.5s var(--ease);
}

.booking-experience.is-detail .bike-label-rail {
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
}

.bike-legend-item {
  position: relative;
  min-width: 0;
  min-height: 112px;
  padding: 18px 10px 16px;
  border: 0;
  border-left: 1px solid #ddd;
  border-top: 4px solid transparent;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) ease, background var(--dur) ease, opacity var(--dur) ease;
}

.bike-legend-item:first-child {
  border-left: 0;
}

.bike-legend-item:hover,
.bike-legend-item:focus-visible,
.bike-legend-item.is-selected {
  border-top-color: var(--orange);
  background: #f7f7f7;
  outline: none;
}

.bike-legend-item strong,
.bike-legend-item > span {
  display: block;
}

.bike-legend-item strong {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.bike-legend-item > span {
  margin-top: 5px;
  color: var(--grau-text);
  font-size: var(--fs-100);
  font-weight: 700;
  text-transform: uppercase;
}

.bike-legend-stock {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #1a7438 !important;
}

.bike-legend-stock i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.bike-legend-item.is-soldout {
  opacity: 0.62;
}

.bike-legend-item.is-soldout .bike-legend-stock {
  color: var(--red) !important;
}

.bike-legend-item.is-soldout .bike-legend-stock i {
  background: var(--red);
}

.bike-legend-item.is-low .bike-legend-stock {
  color: #bd6a08 !important;
}

.bike-legend-item.is-low .bike-legend-stock i {
  background: #f0a627;
}

.lock-icon {
  font-size: var(--fs-100);
  filter: grayscale(1);
}

.quick-book-rail {
  position: relative;
  bottom: auto;
  z-index: 72;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  min-height: 88px;
  padding: 16px max(32px, calc((100vw - 1540px) / 2));
  color: #fff;
  /* kein backdrop-filter: bei 0.97-Deckung unsichtbar, verursachte aber
     Schmier-/Geister-Artefakte beim Scrollen (GPU-Compositing) */
  background: rgba(5, 5, 5, 0.97);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -16px 45px rgba(0, 0, 0, 0.3);
  transition: opacity 0.35s ease, transform 0.5s var(--ease);
}

/* Das HTML-Attribut hidden muss staerker sein als die eigene display:grid-
   Regel. Ohne diese Absicherung blieb vor der ersten Bike-Auswahl eine leere
   schwarze Leiste mit der Mindesthoehe der Warenkorb-Zusammenfassung stehen. */
.quick-book-rail[hidden] {
  display: none;
}

.quick-book-rail.is-fixed {
  position: relative;
  inset: auto;
  width: 100%;
}

/* Platzhalter fuer die ausgeklinkte Buchungsleiste. Mit .is-fixed verlaesst die
   Leiste den Textfluss; ohne Ausgleich schrumpft die Sektion exakt um ihre
   Hoehe und alles darunter - insbesondere #gutschein - springt sichtbar nach
   oben. app.js setzt --quick-rail-h auf die real gemessene Hoehe, solange die
   Leiste noch im Fluss steht; 88px ist nur der Rueckfallwert. */
.booking-experience.has-fixed-rail {
  padding-bottom: var(--quick-rail-h, 88px);
}

.booking-experience.is-detail .quick-book-rail {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.quick-copy {
  display: flex;
  align-items: baseline;
  gap: 18px;
  min-width: 0;
}

.quick-copy > span {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.quick-title {
  margin: 0;
  color: var(--orange);
  font-size: var(--fs-600);
  line-height: 1.08;
  text-transform: uppercase;
}

.quick-meta {
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.68);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.quick-actions .btn {
  min-width: 150px;
  min-height: 48px;
  border-radius: 0;
}

.next-slot-btn {
  border: 1px solid var(--orange);
  color: #fff;
  background: transparent;
}

.ghost {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
}

/* Detail-Bühne (Redesign): vollflächige Ebene über der Buchung statt schmalem
   Popup. Die herangezoomte Park-Bühne schimmert als Atmosphäre durch; links das
   Bike groß, rechts die Daten. Kein backdrop-filter (Scroll-Artefakte). */
.bike-detail {
  position: fixed;
  inset: var(--header-h, 72px) 0 0;
  z-index: 120;
  overflow: auto;
  padding: clamp(18px, 3vw, 44px);
  color: #fff;
  background: linear-gradient(100deg, rgba(5, 6, 7, 0.97) 0%, rgba(6, 7, 8, 0.9) 55%, rgba(10, 10, 12, 0.96) 100%);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 26px, 0);
  transition: opacity var(--dur-slow) ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.bike-detail.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.bike-detail > .close-detail {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.9fr);
  gap: clamp(22px, 3.4vw, 52px);
  align-items: center;
  width: min(1360px, 100%);
  min-height: 100%;
  margin: 0 auto;
}

.detail-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
}



.detail-visual .detail-stage,
.detail-visual .detail-thumbs {
  position: relative;
  z-index: 1;
}

.detail-visual .detail-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(70% 55% at 50% 78%, rgba(255, 91, 22, 0.08), transparent 70%),
    radial-gradient(90% 80% at 50% 40%, rgba(255, 255, 255, 0.05), transparent 75%);
}

/* Galerie: echte Hersteller-/Park-Fotos zum Bike */
.detail-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-thumbs .thumb {
  width: 116px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s var(--ease);
}

.detail-thumbs .thumb:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.45);
}

.detail-thumbs .thumb.is-active {
  border-color: var(--orange);
}

.detail-thumbs .thumb img {
  display: block;
  width: 100%;
  height: 62px;
  object-fit: cover;
}

.detail-thumbs .thumb span {
  display: block;
  padding: 4px 7px 5px;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(255, 255, 255, 0.55);
}

/* Datenspalte: die wichtigsten Werte, dann Preis + CTA */
.detail-data {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.detail-data h2 {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3.3rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.detail-note {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.64);
  font-size: var(--fs-400);
}

.detail-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 6px 0 2px;
  padding: 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.detail-specs li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: #0b0c0e;
}

.detail-specs span {
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.detail-specs strong {
  font-size: var(--fs-400);
}

/* ungerade Spec-Anzahl: letzte Zelle über beide Spalten (keine leere Lücke) */
.detail-specs li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Name + Preis/Status ruhig unter jedem Bike in der Szene (Briefing: feste,
   ruhige Beschriftung — wird bei Hover klarer, nicht größer). */
.bike-caption {
  position: absolute;
  left: 50%;
  bottom: 2.5%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  opacity: 0.72;
  transition: opacity 0.2s ease;
}

.bike-caption strong {
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.bike-caption small {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 7px;
  border-radius: 3px;
  background: var(--orange-dark);
  color: #0b0b0b;
  font-size: var(--fs-100);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
  text-shadow: none;
}

.bike-caption small b {
  font: inherit;
}

.bike-caption em {
  font-style: normal;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

/* Im Eckschild steht nur noch der Preis - den Zustand tragen das Band und
   das ausgegraute Bild. Eingefaerbt war er auf dem dunklen Schild ohnehin
   schlecht lesbar (Orange 3.5:1), weiss ergibt rund 11:1. */
.bike-choice.is-soldout .bike-caption em,
.bike-choice.is-low .bike-caption em {
  color: #fff;
}

@media (max-width: 720px) {
  .bike-caption {
    top: 4%;
    bottom: auto;
    opacity: 1;
  }

  .bike-caption small {
    min-width: 92px;
    flex-direction: column;
    gap: 0;
    padding: 4px 6px;
    font-size: var(--fs-100);
  }
}

.bike-choice:hover .bike-caption,
.bike-choice:focus-visible .bike-caption,
.bike-choice.is-selected .bike-caption {
  opacity: 1;
}

/* im Detail-Zustand ausblenden (Bühne wird überlagert) */
.booking-experience.is-detail .bike-caption {
  opacity: 0;
}

.sheet-handle {
  display: none;
}

.detail-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.detail-top h2 {
  margin: 0 0 10px;
  font-size: 3.1rem;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
}

.detail-top p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
}

.detail-top .section-caption {
  color: var(--orange-dark);
}

.close-detail,
.cart-drawer header button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  font-size: var(--fs-700);
  line-height: 1;
  cursor: pointer;
}

.view-tabs {
  display: flex;
  gap: var(--space-2);
  margin: 22px 0 14px;
}

.view-tabs button {
  flex: 1;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.68);
  background: transparent;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.view-tabs button.is-active {
  color: #fff;
  background: var(--orange-dark);
  border-color: var(--orange);
}

.detail-image {
  display: grid;
  place-items: center;
  min-height: 230px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.detail-image img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  transform: scale(var(--image-scale, 1));
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur) ease;
  animation: detail-image-enter var(--dur-slow) var(--ease) both;
}

@keyframes detail-image-enter {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

  to {
    opacity: 1;
    transform: scale(var(--image-scale, 1));
  }
}

.status-strip {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 13px 14px;
  margin-bottom: var(--space-4);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--green);
  font-weight: 800;
}

.status-strip.is-low {
  border-left-color: #f0a627;
}

.status-strip.is-soldout {
  border-left-color: var(--red);
  background: rgba(220, 51, 40, 0.16);
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.spec-grid article {
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: translateY(8px);
  animation: spec-card-enter 0.48s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.spec-grid article:nth-child(2) { animation-delay: 35ms; }
.spec-grid article:nth-child(3) { animation-delay: 70ms; }
.spec-grid article:nth-child(4) { animation-delay: 105ms; }
.spec-grid article:nth-child(5) { animation-delay: 140ms; }
.spec-grid article:nth-child(6) { animation-delay: 175ms; }
.spec-grid article:nth-child(7) { animation-delay: 210ms; }
.spec-grid article:nth-child(8) { animation-delay: 245ms; }

@keyframes spec-card-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.spec-grid span {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.spec-grid strong {
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
}

.detail-overview > p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.68);
}

.overview-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: 18px;
}

.overview-facts article {
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.overview-facts span,
.overview-facts strong {
  display: block;
}

.overview-facts span {
  color: rgba(255, 255, 255, 0.46);
  font-size: var(--fs-100);
  font-weight: 800;
  text-transform: uppercase;
}

.overview-facts strong {
  margin-top: 5px;
  font-size: var(--fs-400);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.photo-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(120% 120% at 50% 20%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
}

/* Erstes (Lead-)Foto über die volle Breite, groß; die übrigen halbbreit darunter. */
.photo-item.is-lead {
  grid-column: 1 / -1;
}

.photo-item img {
  display: block;
  width: 100%;
  height: 148px;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.photo-item.is-lead img {
  height: 196px;
  object-fit: contain;
  padding: 6px;
}

.photo-item:hover img {
  transform: scale(1.04);
}

.photo-item figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px 9px;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
}

/* Prominenter Buchungs-Block oben im Panel: Preis + Reservieren sofort sichtbar. */
.detail-booking {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.detail-booking-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.detail-price {
  font-size: 1.7rem;
  line-height: 1;
}

.detail-booking-info span {
  margin-top: 3px;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-booking .btn-mod {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

.detail-booking.is-soldout .detail-price {
  color: rgba(255, 255, 255, 0.5);
}

.detail-back {
  width: 100%;
  margin-top: 14px;
}

.soldout-message {
  display: grid;
  gap: var(--space-1);
  margin-bottom: 14px;
  padding: 14px;
  color: #fff;
  background: rgba(220, 51, 40, 0.16);
  border-left: 3px solid var(--red);
}

.soldout-message span {
  color: rgba(255, 255, 255, 0.65);
}

.detail-actions {
  position: sticky;
  bottom: -26px;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 0 -26px -26px;
  padding: 16px 26px 26px;
  background: rgba(9, 10, 10, 0.98);
}

.detail-actions .btn {
  border-radius: 0;
}

.row-like {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(260px, 1fr);
  gap: clamp(30px, 7vw, 96px);
  align-items: end;
  margin-bottom: 36px;
}

.home-intro {
  background: #fff;
}

.home-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  grid-auto-rows: minmax(280px, auto);
  gap: 18px;
}

.image-card {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  color: #fff;
  background: #111;
}

.image-card.tall {
  grid-row: span 2;
  min-height: 580px;
}

.image-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.05);
  transition: transform 0.65s var(--ease);
}

.image-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.72));
}

.image-card span {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  z-index: 1;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.image-card:hover img,
.image-card:focus-visible img {
  transform: scale(1.045);
}

.bike-showcase {
  display: grid;
  gap: 26px;
}

.bike-story {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1.18fr);
  min-height: 420px;
  overflow: hidden;
  background: #f3f3f3;
}

.bike-story.reverse {
  direction: rtl;
}

.bike-story.reverse > * {
  direction: ltr;
}

.bike-story > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(30px, 5vw, 70px);
}

.bike-story h3,
.bike-mini-grid h3,
.tour-grid h3 {
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
}

.bike-story p:not(.section-caption),
.bike-mini-grid p,
.tour-grid p,
.split-copy p:not(.section-caption),
.voucher-panel p,
.shop-section p {
  color: #676767;
}

.bike-story img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.bike-mini-grid,
.tour-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: #ddd;
}

.bike-mini-grid article,
.tour-grid article {
  padding: var(--space-6);
  background: #fff;
}

.bike-mini-grid img {
  width: 100%;
  aspect-ratio: 1.25 / 1;
  margin-bottom: 18px;
  object-fit: cover;
  background: #eee;
}

.bike-mini-grid a,
.tour-grid a {
  display: inline-flex;
  margin-top: 10px;
  color: var(--orange-dark);
  font-size: var(--fs-200);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.split-section {
  background: #f7f7f7;
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 0.92fr);
  gap: clamp(34px, 6vw, 88px);
  align-items: center;
}

.split-media {
  min-height: 420px;
  overflow: hidden;
  background: #111;
}

.split-media img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.split-copy h2,
.voucher-panel h2 {
  margin: 0 0 18px;
  font-size: 4rem;
  line-height: 1;
  text-transform: uppercase;
}

.voucher-section {
  background: #fff;
}

.voucher-panel {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 30px;
  align-items: center;
  padding: clamp(30px, 6vw, 70px);
  border-left: 6px solid var(--orange);
  background: #f2f2f2;
}

.tour-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tour-grid article {
  min-height: 220px;
}

.shop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.info-cards,
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: #ddd;
}

.info-cards article,
.price-grid article {
  min-height: 190px;
  padding: 28px;
  background: #fff;
}

.info-cards h3,
.price-grid h3 {
  margin: 0 0 12px;
  font-size: 17px;
  text-transform: uppercase;
}

.info-cards p,
.price-grid p {
  margin: 0;
  color: #666;
}

/* FAQ in derselben Karten-Sprache wie die Buchung (weiße Karten, Orange-Akzent,
   Hover-Lift) — die helle Fläche wirkt gefüllt und gehört sichtbar zur Seite. */
.faq-grid {
  display: grid;
  gap: 10px;
  margin-top: 0;
  background: transparent;
}

.faq-grid details {
  background: #fff;
  border: 1px solid #e4e4e4;
  border-left: 3px solid transparent;
  transition: border-color 0.2s ease, box-shadow var(--dur) ease, transform 0.2s var(--ease);
}

.faq-grid details:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
}

.faq-grid details[open] {
  border-left-color: var(--orange);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.faq-grid summary {
  position: relative;
  padding: 20px 54px 20px 22px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.faq-grid summary::-webkit-details-marker {
  display: none;
}

.faq-grid summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 24px;
  color: var(--orange-dark);
  font-size: var(--fs-700);
  line-height: 1;
  transform: translateY(-50%);
}

.faq-grid details[open] summary::after {
  content: "-";
}

.faq-grid p {
  margin: 0;
  padding: 0 22px 22px;
  color: #666;
}

.faq-lead {
  max-width: 420px;
  margin: 22px 0 0;
  color: var(--grau-text);
}

/* Kontakt-Karte: füllt die linke Spalte sinnvoll und spiegelt die dunkle
   Seiten-Ästhetik mitten in der hellen Fläche (Harmonie-Anker). */
.faq-contact {
  display: grid;
  gap: 10px;
  margin-top: 34px;
  padding: var(--space-6);
  color: #fff;
  background: #0d0d0f;
  border-bottom: 3px solid var(--orange);
}

.faq-contact span {
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.faq-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  transition: color 0.2s ease;
}

.faq-contact a:hover {
  color: var(--orange);
}

.faq-contact a i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.bg-dark,
.bg-dark-2 {
  color: #fff;
  background: #050505;
}

.light-content .section-caption,
.light-content p {
  color: rgba(255, 255, 255, 0.72);
}

.price-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: rgba(255, 255, 255, 0.18);
}

.price-grid article {
  background: #111;
}

.price-grid strong {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 42px;
  line-height: 1;
}

.cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 109;
  background: rgb(0 0 0 / 48%);
  pointer-events: none;
}

.cart-drawer {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 110;
  width: min(410px, calc(100vw - 32px));
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  padding: 18px;
  background: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px);
  transition: opacity 0.2s ease, transform 0.34s var(--ease);
}

.cart-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.cart-drawer header,
.cart-drawer footer,
.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cart-drawer header {
  margin-bottom: var(--space-3);
}

.cart-drawer header button,
.checkout-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #dedede;
  border-radius: 50%;
  color: #111;
  background: #fff;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.cart-drawer header span {
  font-size: var(--fs-300);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cart-item {
  padding: 12px 0;
  border-top: 1px solid #eee;
}

.cart-intro,
.cart-assurance {
  display: block;
  color: #6b6b6b;
  font-size: var(--fs-200);
  line-height: 1.5;
}

.cart-intro {
  margin: 0 0 8px;
}

.cart-assurance {
  margin-top: var(--space-3);
  text-align: center;
}

.cart-items {
  max-height: min(38vh, 360px);
  overflow-y: auto;
}

.cart-item strong,
.cart-item span {
  display: block;
}

.cart-item span {
  color: var(--grau-text);
  font-size: var(--fs-300);
}

.remove-item {
  border: 0;
  color: var(--red);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.cart-empty {
  color: var(--grau-text);
}

.cart-drawer footer {
  padding: 14px 0;
  border-top: 1px solid #ddd;
  font-weight: 800;
}

html.checkout-open,
body.checkout-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.checkout-shell {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.checkout-shell.is-open {
  opacity: 1;
  pointer-events: auto;
}

.checkout-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: default;
}

.checkout-dialog {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(24px, 4vw, 48px);
  color: #111;
  background: #fff;
  border-top: 4px solid var(--orange);
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.48);
  transform: translateY(24px) scale(0.985);
  transition: transform 0.48s var(--ease);
}

.checkout-shell.is-open .checkout-dialog {
  transform: none;
}

.checkout-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.checkout-header .section-caption {
  margin-bottom: var(--space-2);
}

.checkout-header h2,
.checkout-result h2 {
  margin: 0;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 0.96;
  text-transform: uppercase;
}

.checkout-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 34px 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
}

.checkout-progress li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  color: var(--grau-text);
  border-right: 1px solid #dedede;
}

.checkout-progress li:last-child {
  border-right: 0;
}

.checkout-progress span {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--fs-200);
  font-weight: 800;
}

.checkout-progress strong {
  overflow: hidden;
  font-size: var(--fs-200);
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.checkout-progress li.is-active,
.checkout-progress li.is-complete {
  color: #111;
}

.checkout-progress li.is-active {
  background: #fff2e9;
  box-shadow: inset 0 -3px 0 var(--orange-dark);
}

.checkout-progress li.is-active span,
.checkout-progress li.is-complete span {
  color: #fff;
  border-color: var(--orange);
  background: var(--orange-dark);
}

.checkout-demo-note {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: -10px 0 26px;
  padding: 13px 16px;
  border-left: 3px solid #c47b00;
  background: #fff6e3;
  font-size: var(--fs-300);
}

.checkout-demo-note span {
  color: #66583c;
}

.checkout-panel[hidden],
.checkout-result[hidden],
.checkout-demo-note[hidden],
/* Ohne diese Zeile gewinnt ".checkout-consent { display: flex }" gegen das
   hidden-Attribut, und das WhatsApp-Haekchen stand da, obwohl der Kanal gar
   nicht eingerichtet ist. Der Gast haette es angehakt und nie eine Nachricht
   bekommen. */
.checkout-consent[hidden] {
  display: none;
}

.checkout-summary {
  display: grid;
  gap: 0;
  border-top: 1px solid #dedede;
}

.checkout-summary-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #dedede;
}

.checkout-summary-item > span,
.checkout-summary-item strong,
.checkout-summary-item small {
  display: block;
}

.checkout-summary-item > span > strong {
  font-size: 17px;
}

.checkout-summary-item small {
  margin-top: var(--space-1);
  color: #707070;
  line-height: 1.4;
}

.checkout-summary-item > strong {
  font-size: 18px;
  white-space: nowrap;
}

.checkout-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0 0;
  font-weight: 800;
}

.checkout-summary-total strong {
  font-size: var(--fs-700);
}

.checkout-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 28px;
  background: #dedede;
}

.checkout-facts span {
  padding: 18px;
  color: #666;
  background: #f6f6f6;
  font-size: var(--fs-200);
  line-height: 1.45;
}

.checkout-facts strong {
  display: block;
  margin-bottom: var(--space-1);
  color: #111;
  font-size: var(--fs-300);
}

.checkout-fieldset {
  margin: 0;
  padding: 0 0 28px;
  border: 0;
  border-bottom: 1px solid #dedede;
}

.checkout-fieldset + .checkout-fieldset {
  margin-top: 28px;
}

.checkout-fieldset legend {
  width: 100%;
  margin-bottom: 18px;
  padding: 0;
  font-size: var(--fs-400);
  font-weight: 800;
  text-transform: uppercase;
}

.checkout-fields {
  display: grid;
  gap: var(--space-4);
}

.checkout-fields.two-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkout-fieldset label > span,
.participant-fields label > span {
  display: block;
  margin-bottom: 7px;
  font-size: var(--fs-200);
  font-weight: 800;
}

.checkout-fieldset input:not([type="checkbox"]),
.checkout-fieldset select,
.checkout-fieldset textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #cfcfcf;
  border-radius: 0;
  color: #111;
  background: #fff;
  font: inherit;
}

.checkout-fieldset textarea {
  min-height: 96px;
  resize: vertical;
}

.checkout-fieldset input:focus,
.checkout-fieldset select:focus,
.checkout-fieldset textarea:focus {
  border-color: #111;
  outline: 2px solid rgba(255, 91, 22, 0.2);
  outline-offset: 1px;
}

.checkout-toggle,
.checkout-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.checkout-consent {
  min-height: 44px;
}

.checkout-toggle {
  margin-bottom: 18px;
  padding: var(--space-4);
  background: #f4f4f4;
}

.checkout-toggle input,
.checkout-consent input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--orange);
}

.checkout-toggle span,
.checkout-consent span {
  color: #5e5e5e;
  font-size: var(--fs-300);
  line-height: 1.5;
}

.checkout-toggle strong {
  display: block;
  color: #111;
}

.participant-list {
  display: grid;
  gap: 10px;
}

.participant-item {
  padding: var(--space-4);
  border-left: 3px solid var(--orange);
  background: #f6f6f6;
}

.participant-item > strong {
  display: block;
  margin-bottom: 13px;
  font-size: var(--fs-300);
  text-transform: uppercase;
}

.participant-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.participant-list.is-deferred {
  display: none;
}

.checkout-review {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: var(--space-6);
  background: #dedede;
}

.checkout-review section {
  padding: 18px;
  background: #f6f6f6;
}

.checkout-review span,
.checkout-review strong {
  display: block;
}

.checkout-review span {
  margin-bottom: 5px;
  color: var(--grau-text);
  font-size: var(--fs-100);
  font-weight: 800;
  text-transform: uppercase;
}

.checkout-review strong {
  line-height: 1.45;
}

.checkout-onsite-note {
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-bottom: 22px;
  padding: 16px 18px;
  color: #111;
  background: #f6f6f6;
  border-left: 3px solid var(--orange);
}

.checkout-onsite-note span,
.checkout-onsite-note strong {
  display: block;
}

.checkout-onsite-note span {
  color: var(--grau-text);
  font-size: var(--fs-100);
  font-weight: 800;
  text-transform: uppercase;
}

.checkout-onsite-note strong {
  margin-top: var(--space-1);
  font-size: 24px;
}

.checkout-onsite-note p {
  margin: 0;
  color: #555;
  font-size: var(--fs-300);
}

.checkout-consent + .checkout-consent {
  margin-top: var(--space-3);
}

.checkout-consent a {
  color: #111;
  text-decoration: underline;
}

.checkout-error {
  margin-top: 18px;
  padding: 14px 16px;
  color: #7b1812;
  border-left: 3px solid var(--red);
  background: #fff0ef;
  font-size: var(--fs-300);
}

.checkout-error .checkout-change-selection {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  white-space: normal;
}

.checkout-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid #dedede;
}

.checkout-actions .btn {
  min-width: 170px;
}

.checkout-actions [hidden] {
  display: none !important;
}

.checkout-result {
  max-width: 650px;
  margin: 20px auto;
  text-align: center;
}

.checkout-result-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  color: #fff;
  background: var(--orange);
  font-size: var(--fs-700);
  font-weight: 800;
}

.checkout-result p:not(.section-caption) {
  margin: 22px 0 28px;
  color: #666;
  line-height: 1.6;
}

.checkout-result p.checkout-result-details {
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1px solid #d8d8d8;
  background: #f5f5f5;
  color: #202020;
  text-align: left;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.checkout-result-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.checkout-result [hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  .checkout-shell {
    align-items: end;
    padding: 0;
  }

  .checkout-dialog {
    width: 100%;
    max-height: 94svh;
    padding: 24px 18px;
    border-radius: 8px 8px 0 0;
    transform: translateY(100%);
  }

  .checkout-header h2 {
    font-size: 24px;
    line-height: 1.15;
  }

  .checkout-header {
    align-items: center;
    gap: var(--space-3);
  }

  .checkout-header .section-caption {
    display: none;
  }

  .checkout-progress {
    margin: 12px 0 16px;
  }

  .checkout-progress li {
    justify-content: center;
    flex-direction: column;
    gap: var(--space-1);
    padding: 8px 4px;
  }

  .checkout-progress strong {
    display: block;
    font-size: var(--fs-100);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .checkout-demo-note,
  .checkout-summary-item,
  .checkout-onsite-note {
    grid-template-columns: 1fr;
  }

  .checkout-demo-note {
    align-items: flex-start;
  }

  .checkout-facts,
  .checkout-fields.two-cols,
  .participant-fields,
  .checkout-review {
    grid-template-columns: 1fr;
  }

  .checkout-actions {
    position: sticky;
    bottom: -24px;
    z-index: 4;
    margin: 26px -18px -24px;
    padding: 14px 18px 24px;
    background: rgba(255, 255, 255, 0.98);
  }

  .checkout-actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .checkout-actions #checkoutSubmit {
    flex-grow: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-shell,
  .checkout-dialog {
    transition: none;
  }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 140;
  width: min(480px, calc(100vw - 32px));
  padding: 13px 18px;
  color: #fff;
  background: #000;
  text-align: center;
  font-size: var(--fs-300);
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity 0.2s ease, transform 0.24s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.footer {
  padding-bottom: 42px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: clamp(26px, 5vw, 80px);
}

.footer-logo {
  width: 250px;
  margin-bottom: 26px;
}

.footer h3 {
  margin: 0 0 20px;
  font-size: var(--fs-400);
  text-transform: uppercase;
}

.footer a {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-2);
}

.footer p {
  margin: 0 0 10px;
}

@media (max-width: 1180px) {
  .inner-nav ul {
    gap: 14px;
  }

  .phone-btn {
    display: none;
  }

  .side-block {
    width: calc(100vw - 32px);
    grid-template-columns: minmax(190px, 0.45fr) minmax(0, 1.55fr);
  }
}

@media (max-width: 900px) {
  .main-nav {
    min-height: 74px;
    background: rgba(0, 0, 0, 0.9);
  }

  .main-nav-sub {
    width: calc(100vw - 28px);
  }

  .mobile-nav {
    display: grid;
    place-items: center;
    position: fixed;
    top: 16px;
    left: 126px;
    z-index: 120;
    margin-left: 0;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: transparent;
  }

  .mobile-nav span,
  .mobile-nav span::before,
  .mobile-nav span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    content: "";
  }

  .mobile-nav span::before {
    transform: translateY(-6px);
  }

  .mobile-nav span::after {
    transform: translateY(4px);
  }

  .inner-nav {
    position: fixed;
    inset: 74px 0 auto;
    display: none;
    padding: 22px;
    background: rgba(0, 0, 0, 0.96);
  }

  .inner-nav.is-open {
    display: grid;
  }

  .inner-nav ul {
    display: grid;
    gap: var(--space-2);
  }

  .has-sub ul {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    border: 0;
    padding: 0 0 0 15px;
    background: transparent;
  }

  .cart-pill {
    position: static;
  }

  .mobile-cart-pill {
    position: fixed;
    top: 16px;
    left: 80px;
    z-index: 120;
    display: grid;
  }

  .hero h1 {
    font-size: 4rem;
  }

  .section-head h2,
  .row-like h2,
  .booking-section .section-head h2,
  .split-copy h2,
  .voucher-panel h2 {
    font-size: 3.1rem;
  }

  .booking-experience {
    min-height: 0;
    padding-bottom: 0;
  }

  .gate-stage {
    position: relative;
    min-height: 591px;
    aspect-ratio: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: var(--orange) rgba(0, 0, 0, 0.18);
    /* Lineup rastet sanft an den Bikes ein (Briefing Mobile), bleibt aber
       nativ frei scrollbar – keine Scroll-Falle. */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .bike-choice {
    scroll-snap-align: center;
  }

  .gate-photo,
  .bike-row {
    width: 1050px;
    max-width: none;
  }

  .gate-photo {
    right: auto;
    background-position: center;
  }

  .bike-row {
    inset: 0 auto 0 0;
  }

  .booking-sidebar {
    width: 100%;
    margin: 0;
  }

  .side-block {
    grid-template-columns: 1fr;
    gap: 10px;
    width: calc(100vw - 28px);
    padding: 16px 0;
  }

  .booking-intro {
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid #ddd;
  }

  /* Mobile: Detail vollflächig (Briefing), kein Bottom-Sheet mehr */
  .bike-detail {
    position: fixed;
    inset: 0;
    width: 100%;
    max-height: none;
    margin: 0;
    padding: 64px 18px 24px;
    border: 0;
    border-radius: 0;
    transform: translate3d(0, 26px, 0);
  }

  .detail-layout {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }

  .detail-visual .detail-stage {
    aspect-ratio: 4 / 3;
  }

  .detail-thumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-1);
  }

  .booking-experience.is-detail .booking-sidebar {
    display: none;
  }

  .booking-experience.is-detail .quick-book-rail {
    display: none;
  }

  .booking-experience.is-detail .bike-label-rail {
    display: none;
  }

  .booking-experience.is-detail .gate-stage {
    transform: none;
    filter: none;
  }

  /* (Bottom-Sheet-Expand entfernt — Detail ist vollflächig) */

  .sheet-handle {
    display: grid;
    place-items: center;
    width: 100%;
    height: 26px;
    margin: -14px 0 8px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: ns-resize;
  }

  .sheet-handle span {
    width: 52px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.34);
  }

  .detail-actions {
    bottom: -22px;
    margin: 0 -18px -22px;
    padding: 14px 18px 22px;
  }

  .bike-label-rail {
    grid-template-columns: 199.5px 157.5px 152.25px 168px 162.75px 210px;
    overflow-x: auto;
  }

  .quick-book-rail {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 14px;
  }

  .quick-copy {
    flex-wrap: wrap;
    gap: 8px 14px;
  }

  .quick-actions {
    flex-wrap: wrap;
  }

  .quick-actions .btn {
    flex: 1 1 170px;
  }

  .row-like,
  .footer-grid,
  .split-grid,
  .bike-story,
  .voucher-panel {
    grid-template-columns: 1fr;
  }

  .info-cards,
  .price-grid,
  .bike-mini-grid,
  .tour-grid,
  .home-card-grid {
    grid-template-columns: 1fr;
  }

  .image-card,
  .image-card.tall {
    min-height: 340px;
  }

  .bike-story.reverse {
    direction: ltr;
  }

  .bike-story img,
  .split-media,
  .split-media img {
    min-height: 320px;
  }
}

@media (max-width: 560px) {
  .container {
    width: calc(100vw - 28px);
  }

  .hero-inner {
    width: calc(100vw - 28px);
  }

  .hero-lead {
    width: calc(100vw - 32px);
    font-size: 0.98rem;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .section-head h2,
  .row-like h2,
  .booking-section .section-head h2,
  .split-copy h2,
  .voucher-panel h2 {
    font-size: 2.25rem;
  }

  .gate-stage {
    min-height: 523px;
  }

  .gate-photo,
  .bike-row {
    width: 930px;
  }

  .side-block {
    width: 100%;
    padding: 14px;
  }

  .slot-grid {
    grid-template-columns: repeat(4, 190px);
    overflow-x: auto;
  }

  .bike-label-rail {
    grid-template-columns: 176.7px 139.5px 134.85px 148.8px 144.15px 186px;
  }

  .slot-btn {
    min-height: 72px;
    padding: 10px 14px 12px;
  }

  .quick-copy {
    display: grid;
  }

  .quick-meta {
    white-space: normal;
  }

  .quick-actions,
  .detail-actions,
  .slot-btn {
    grid-template-columns: 1fr;
  }

  .quick-actions {
    flex-direction: column;
  }

  .quick-actions .btn {
    width: 100%;
    flex: 0 0 auto;
    min-height: 54px;
    height: auto;
  }

  .overview-facts,
  .photo-grid {
    grid-template-columns: 1fr;
  }

  .spec-grid {
    grid-template-columns: 1fr;
  }

  .detail-top h2 {
    font-size: 2.4rem;
  }

  .image-card span {
    left: 20px;
    right: 20px;
    font-size: var(--fs-600);
  }

  .bike-story > div,
  .bike-mini-grid article,
  .tour-grid article,
  .voucher-panel {
    padding: 22px;
  }

  .shop-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 2026 cohesive EMX-Park experience */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-800.woff2") format("woff2"); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-900.woff2") format("woff2"); font-style: normal; font-weight: 900; font-display: swap; }

/* Palette/Basis-Tokens sind jetzt zentral im ersten :root ganz oben. */

body,
button,
input,
a {
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

html {
  background: var(--black);
}

body {
  background: #0a0a0c;
}

.main-nav {
  min-height: 72px; /* konstant (siehe oben) */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  /* Konstanter Kontrast ueber dem Hero-Video, auch wenn die Sonne durchs Bild
     laeuft. Bewusst ohne backdrop-filter, damit das Video fluessig bleibt. */
  background: rgba(1, 1, 1, 0.74);
}

.main-nav.is-scrolled {
  min-height: 72px;
  /* kein backdrop-filter: Bilder, die unter der fixierten Nav durchscrollen,
     wurden dadurch verschmiert/vervielfacht (Chromium-Compositing-Artefakt) */
  background: rgba(1, 1, 1, 0.97);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.main-nav-sub {
  width: calc(100vw - (var(--page-gutter) * 2));
  max-width: 1700px;
}

.logo img {
  width: 68px;
}

.inner-nav {
  justify-content: flex-end;
}

.inner-nav ul {
  margin-right: auto;
  gap: 26px;
}

.inner-nav a {
  position: relative;
  font-size: var(--fs-100);
  letter-spacing: 0.14em;
}

.inner-nav ul > li > a::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}

.inner-nav ul > li > a:hover::before,
.inner-nav ul > li > a.active::before {
  transform: scaleX(1);
}

.phone-btn,
.btn,
.cart-pill {
  border-radius: 0;
}

.phone-btn {
  min-height: 42px;
  border-color: rgba(255, 255, 255, 0.44);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  width: 100%;
  height: 3px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.chapter-nav {
  position: fixed;
  top: 50%;
  right: 18px;
  z-index: 84;
  display: grid;
  gap: 13px;
  transform: translateY(-50%);
  mix-blend-mode: difference;
}

.chapter-nav a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: #fff;
}

.chapter-nav span {
  display: none;
}

.chapter-nav em {
  max-width: 0;
  overflow: hidden;
  font-size: var(--fs-100);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.3s ease, opacity 0.3s ease;
}

.chapter-nav a::after {
  content: "";
  width: 20px;
  height: 2px;
  background: currentColor;
  opacity: 0.46;
  transition: width 0.3s ease, opacity 0.3s ease;
}

.chapter-nav a:hover em,
.chapter-nav a.is-active em {
  max-width: 80px;
  opacity: 1;
}

.chapter-nav a:hover::after,
.chapter-nav a.is-active::after {
  width: 42px;
  opacity: 1;
}

.hero {
  min-height: 94vh;
  place-items: end start;
}

.hero-media img {
  object-position: center 44%;
  filter: saturate(0.95) contrast(1.06);
  transform: scale(1.025);

}

.ambient-video,
.video-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ambient-video {
  z-index: 1;
  opacity: 0;
  transform: translateZ(0) scale(1.015);
  transition: opacity 1.15s ease;
  will-change: opacity, transform;
}

.video-toggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: #fff;
  background: #171717;
  border: 1px solid #aaa;
  border-radius: 6px;
  cursor: pointer;
}

.video-toggle[hidden],
.video-toggle .video-play-icon,
.video-toggle.is-paused .video-pause-icon { display: none; }
.video-toggle.is-paused .video-play-icon { display: block; }
.video-toggle:hover { background: #333; }
.video-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.hero > .video-toggle { top: calc(var(--header-h, 72px) + 12px); bottom: auto; }

@media (max-width: 900px) {
  .hero-eyebrow { max-width: calc(100% - 64px); }
}

.ambient-video.is-ready {
  opacity: 1;
}

.video-fallback {
  z-index: 0;
  opacity: 1;
  transition: opacity 1.15s ease;
}

.ambient-video.is-ready + .video-fallback,
.ambient-video.is-ready + picture .video-fallback {
  opacity: 0;
}

.has-video-error .ambient-video {
  display: none;
}

.has-video-error .video-fallback {
  opacity: 1;
}



.hero-overlay {
  background: rgba(0, 0, 0, 0.29);
  box-shadow: inset 0 -240px 180px rgba(0, 0, 0, 0.42), inset 0 120px 100px rgba(0, 0, 0, 0.28);
}

.hero-inner {
  width: auto;
  max-width: none;
  margin: 0 0 90px var(--page-gutter);
  padding: 0;
  text-align: left;
}

.hero h1 {
  max-width: none;
  margin: 0;
  font-size: 132px;
  line-height: 0.82;
  font-weight: 800;
}

.hero-lead {
  width: auto;
  max-width: none;
  margin: 23px 0 30px;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
}

.btn-solid {
  min-height: 52px;
  padding: 0 28px;
  color: #fff;
  background: var(--orange-dark);
}

.btn-solid:hover,
.btn-solid:focus-visible {
  color: #fff;
  background: #e44d0f;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: #fff;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.text-link span {
  color: var(--orange);
  font-size: 18px;
}

.hero-index {
  position: absolute;
  right: var(--page-gutter);
  bottom: 92px;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 74px auto;
  align-items: center;
  gap: 14px;
  color: #fff;
}

.hero-index span,
.hero-index strong {
  font-size: var(--fs-100);
  line-height: 1.35;
  letter-spacing: 0.14em;
}

.hero-index i {
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
}

.scroll-down {
  left: auto;
  right: var(--page-gutter);
  bottom: 24px;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  transform: none;
}

.scroll-down span {
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.scroll-down::after {
  display: none;
}

.park-story {
  position: relative;
  z-index: 2;
  background: #f7f7f5;
}

.park-intro {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  gap: var(--space-16);
  width: calc(100vw - (var(--page-gutter) * 2));
  max-width: 1560px;
  /* Kein negativer Überlapp nach oben: zog vorher die helle Park-Fläche in den
     dunklen Hero und erzeugte den weißen Streifen am unteren Hero-Rand. */
  margin: 0 auto;
  padding: 56px 76px 52px;
  background: #fff;
}

.section-caption {
  margin-bottom: 19px;
  color: var(--orange-lesbar, var(--orange-dark));
  opacity: 1;
  font-size: var(--fs-100);
  letter-spacing: 0.2em;
}

/* Lesbarkeit haengt am Untergrund, und die Seite hat beides: helle und
   schwarze Abschnitte. Auf Weiss traegt das dunkle Orange (4.84:1) und
   das dunkle Grau (5.33:1); auf Schwarz ist es genau umgekehrt - dort
   kommen das helle Orange (6.76:1) und ein helles Grau (7.4:1) an.
   Jeweils der andere Ton faellt unter 4.5:1, deshalb die Umkehr. */
.hero,
.offer-strip,
.action-film,
.rental-band,
.training-world,
.training-gallery,
.voucher-world,
.tour-world,
.faq-contact,
.footer {
  --orange-lesbar: var(--orange);
  --grau-text: #a3a3a3;
}

.park-intro h2,
.booking-heading h2,
.rental-copy h2,
.price-band h2,
.training-copy h2,
.voucher-copy h2,
.tour-copy h2,
.faq-heading h2,
.contact-lead h2 {
  margin: 0;
  color: var(--text);
  font-size: 68px;
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
}

.park-intro h2 span {
  color: var(--orange);
}

.park-copy {
  align-self: end;
}

.park-copy > p {
  max-width: 650px;
  margin: 0 0 40px;
  color: #555;
  font-size: 17px;
}

.park-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.park-facts span {
  display: block;
  padding: 20px 15px 0 0;
  color: var(--grau-text);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.park-facts strong {
  display: block;
  margin-bottom: 5px;
  color: #111;
  font-size: var(--fs-600);
  letter-spacing: 0;
}

.park-aerial {
  position: relative;
  height: 52vh;
  min-height: 340px;
  max-height: 540px;
  overflow: hidden;
}

.park-aerial img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.park-aerial picture {
  display: block;
  width: 100%;
  height: 100%;
}

.park-aerial::after {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
}

.park-aerial-label {
  position: absolute;
  right: var(--page-gutter);
  bottom: 54px;
  z-index: 2;
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-left: 3px solid var(--orange);
  background: #0b0b0b;
  color: #fff;
  text-align: right;
}

.park-aerial-label span {
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.14em;
}

.park-aerial-label strong {
  font-size: var(--fs-700);
  line-height: 1.1;
  text-transform: uppercase;
}

.offer-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 var(--page-gutter);
  color: #fff;
  background: var(--black);
}

.offer-strip article {
  position: relative;
  min-height: 250px;
  padding: 54px 48px;
  border-left: 1px solid #2c2c2c;
}

.offer-strip article:last-child {
  border-right: 1px solid #2c2c2c;
}

.offer-strip article > span {
  color: var(--orange);
  font-size: var(--fs-100);
  font-weight: 700;
}

.offer-strip h3 {
  margin: 34px 0 12px;
  font-size: 21px;
  text-transform: uppercase;
}

.offer-strip p {
  max-width: 330px;
  margin: 0;
  color: var(--grau-text);
  font-size: var(--fs-300);
}

.action-film {
  position: relative;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  min-height: 520px;
  overflow: hidden;
  color: #fff;
  background: #111;
}

.action-film::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -260px 190px rgba(0, 0, 0, 0.48), inset 0 130px 120px rgba(0, 0, 0, 0.22);
}

.action-film .ambient-video,
.action-film .video-fallback {
  object-position: center;
}

.action-film-copy {
  position: absolute;
  left: var(--page-gutter);
  bottom: 68px;
  z-index: 3;
}

.action-film-copy span,
.film-status span {
  display: block;
  margin-bottom: 15px;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.action-film-copy strong {
  display: block;
  font-size: 64px;
  line-height: 0.93;
  text-transform: uppercase;
}

.film-status {
  position: absolute;
  right: var(--page-gutter);
  bottom: 70px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
}

.film-status i {
  width: 7px;
  height: 7px;
  background: var(--orange);

}

.film-status span {
  margin: 0;
}



.booking-section {
  padding: 0;
  background: #fff;
}

.booking-heading {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
  gap: 80px;
  width: calc(100vw - (var(--page-gutter) * 2));
  max-width: 1560px;
  margin: 0 auto;
  padding: 54px 0 28px;
}

.booking-heading > p {
  max-width: 610px;
  margin: 0 0 6px;
  color: #666;
  font-size: var(--fs-500);
}

.booking-experience {
  border-top: 1px solid var(--line);
  background: var(--black);
}

.side-block {
  width: calc(100vw - (var(--page-gutter) * 2));
  max-width: 1560px;
}

.booking-sidebar,
.side-block,
.slot-btn,
.booking-intro input,
.bike-label-rail,
.bike-legend-item {
  background: #f7f7f5;
}

.bike-legend-item.is-selected,
.bike-legend-item:hover {
  background: #fff;
}

.quick-book-rail {
  padding-right: var(--page-gutter);
  padding-left: var(--page-gutter);
  background: rgba(1, 1, 1, 0.96);
}

.rental-band,
.training-hero,
.tour-world {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  color: #fff;
  background: #111;
}

.rental-band > img,
.training-hero > img,
.tour-world > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rental-band::after,
.training-hero::after,
.tour-world::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 620px 0 320px rgba(0, 0, 0, 0.46);
}

.rental-copy,
.training-copy,
.tour-copy {
  position: absolute;
  left: var(--page-gutter);
  bottom: 72px;
  z-index: 2;
  width: 540px;
}

.rental-copy h2,
.training-copy h2,
.tour-copy h2 {
  color: #fff;
}

/* Let enlarged desktop copy contribute to the image section's height. */
@media (min-width: 901px) {
  #verleih.rental-band,
  #training .training-hero {
    display: flex;
    align-items: flex-end;
    padding: 72px var(--page-gutter);
  }

  #verleih .rental-copy,
  #training .training-copy {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: 100%;
  }
}

.rental-copy > p:not(.section-caption),
.training-copy > p:not(.section-caption),
.tour-copy > p:not(.section-caption) {
  max-width: 500px;
  margin: 28px 0 30px;
  color: rgba(255, 255, 255, 0.78);
}

#tour .tour-copy > .section-caption,
#merch .tour-copy > .section-caption,
#verleih .rental-copy > .section-caption,
#training .training-copy > .section-caption {
  color: #fff;
}

#tour .tour-copy > p:not(.section-caption),
#merch .tour-copy > p:not(.section-caption),
#verleih .rental-copy > p:not(.section-caption),
#training .training-copy > p:not(.section-caption) {
  color: #eee;
}

.price-band {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  padding: 100px var(--page-gutter);
  background: #fff;
}

.price-band h2 {
  font-size: 52px;
}

.price-lines a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  min-height: 78px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-300);
  font-weight: 700;
  text-transform: uppercase;
}

.price-lines a:first-child {
  border-top: 1px solid var(--line);
}

.price-lines strong {
  color: var(--orange);
  font-size: 26px;
}

/* 093: Home verweist nur noch auf den Buchungsflow, statt ihn nachzubauen -
   der eigentliche Kalender/Zeit/Bike-Ablauf lebt ausschliesslich auf
   startplatz.html. Dieser Abschnitt ist bewusst kurz: ohne Inhalt in
   Kalenderhoehe darf er nicht die generische Vollbild-Mindesthoehe erzwingen,
   sonst klafft darunter ein langes leeres Band. */
#startplatz.booking-teaser {
  min-height: 0;
  padding: 96px var(--page-gutter);
  background: #fff;
}

.booking-teaser-copy {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.booking-teaser-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: 56px;
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
}

.booking-teaser-copy > p {
  max-width: 480px;
  margin: 22px auto 0;
  color: #555;
  font-size: var(--fs-500);
}

.booking-teaser-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 40px;
  margin: 34px 0 38px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.booking-teaser-facts span {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--grau-text);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.booking-teaser-facts strong {
  order: -1;
  color: #111;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
}

/* Kompakter Zweitlink unter Home-Teasern zu den ausfuehrlichen Unterseiten -
   selbe Optik wie .tour-links a, damit kein neues Vokabular entsteht. */
.section-link {
  display: flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  gap: var(--space-2);
  margin-top: 20px;
  border-bottom: 1px solid var(--orange-lesbar, var(--orange-dark));
  padding-bottom: 2px;
  color: inherit;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-link i {
  font-style: normal;
  color: var(--orange-lesbar, var(--orange-dark));
  transition: transform 0.2s ease;
}

.section-link:hover i,
.section-link:focus-visible i {
  transform: translateX(3px);
}

.training-world {
  background: var(--black);
}

.training-hero {
  min-height: 82vh;
}

.training-gallery {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 2px;
  padding: 2px;
  background: var(--black);
}

.training-gallery img {
  width: 100%;
  height: 390px;
  object-fit: cover;
}

.voucher-world {
  display: grid;
  /* minmax(0, ...) statt blosser fr-Werte: eine reine fr-Spalte hat als
     Minimum ihre min-content-Breite. Die Ueberschrift sprengte damit das
     gewuenschte Verhaeltnis (gemessen 690/575 statt 569/695) - das Layout
     richtete sich nach dem laengsten Wort statt nach der Vorgabe. Die Werte
     unten bilden die tatsaechlich gerenderte Aufteilung ab, jetzt aber
     deterministisch und unabhaengig vom Textinhalt. */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  color: #fff;
  background: var(--black);
}

.voucher-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px var(--page-gutter);
}

.voucher-copy h2 {
  color: #fff;
}

.voucher-copy > p:not(.section-caption) {
  max-width: 450px;
  margin: 28px 0 32px;
  color: #999;
}

/* --- Gutschein: Betragsauswahl ------------------------------------------
   Native Radios, nur optisch ersetzt. Dadurch funktionieren Tastatur
   (Pfeiltasten), Screenreader und Formularsemantik ohne eine Zeile JavaScript;
   JS setzt lediglich Beschriftung und Ziel des Knopfes. */
.voucher-picker {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);
  width: 100%;
  max-width: 520px;
}

/* Raster statt Umbruch: fuenf feste Betraege in einer Reihe, die sich den
   Platz teilen. Vorher waren es Kacheln mit fester Mindestbreite in einem
   flex-wrap - bei 470px Spaltenbreite fehlten genau 10px und der fuenfte
   Betrag rutschte allein in die zweite Zeile. Mit auto-fit passt sich die
   Anzahl der Spalten der verfuegbaren Breite an, ohne dass ein Einzelgaenger
   entsteht. */
.voucher-amounts {
  display: grid;
  /* Fest fuenf Spalten statt auto-fit: die Textspalte ist schmaler als sie
     aussieht (gemessen rund 410px), damit haette auto-fit bei jeder
     Mindestbreite ueber etwa 75px auf vier Spalten umgebrochen und den
     fuenften Betrag allein in eine zweite Zeile gestellt. Statt umzubrechen
     skaliert jetzt die Schrift mit. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 1.4vw, 10px);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.voucher-amount {
  position: relative;
  display: block;
}

.voucher-amount input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.voucher-amount span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(48px, 12vw, 58px);
  padding: 0 4px;
  color: #fff;
  font-size: clamp(13px, 3.2vw, 18px);
  font-weight: 800;
  letter-spacing: 0.01em;
  /* Auf schwarzem Grund braucht eine Flaeche etwas Licht, sonst wirkt sie wie
     ein Loch statt wie ein Knopf. */
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 14px;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.voucher-amount input:hover + span {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.5);
}

.voucher-amount input:focus-visible + span {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.voucher-amount input:checked + span {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
}

.voucher-terms {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

/* Feste Mindestbreite: die Beschriftung wechselt von "Betrag waehlen" zu
   "189 EUR verschenken". Ohne sie wuerde der Knopf bei jeder Auswahl seine
   Breite aendern - genau die Art Sprung, die hier gerade beseitigt wurde. */
.voucher-submit {
  align-self: flex-start;
  min-width: 240px;
}

/* Vor der Auswahl bewusst als Umriss, nicht als graue Flaeche: ein
   ausgegrauter Block sieht aus, als waere etwas kaputt. Ein Umriss sagt
   "hier geht es weiter, waehle vorher einen Betrag". */
.voucher-submit[aria-disabled="true"] {
  color: rgba(255, 255, 255, 0.62);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.voucher-media {
  /* Deckelung gegen die geteilte Section-Höhe main > section:not(.hero)
     (calc(100vh|100dvh - var(--header-h))): der feste 660px-Wert allein
     konnte auf niedrigeren Viewports (z. B. 1280x720 -> 649px verfuegbar)
     die Grid-Zeile ueber diese Hoehe hinaus aufblaehen. Dadurch geriet
     #gutschein beim Anker-Scroll (scrollToEl/Lenis, offset = -headerH())
     leicht unter die fixe Navigation, waehrend am unteren Rand schon die
     naechste Section durchschimmerte. */
  min-height: min(660px, calc(100vh - var(--header-h)));
  min-height: min(660px, calc(100dvh - var(--header-h)));
  overflow: hidden;
}

.voucher-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tour-world {
  min-height: 100vh;
  min-height: 100dvh;
}

.tour-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.tour-links a {
  border-bottom: 1px solid var(--orange);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.faq-world {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 100px;
  padding: 110px var(--page-gutter);
  background: #f7f7f5;
}

.faq-heading h2 {
  font-size: 54px;
}

.faq-world .faq-grid {
  display: block;
}

.faq-world details {
  border: 0;
  border-top: 1px solid #cfcfcf;
  background: transparent;
}

.faq-world details:last-child {
  border-bottom: 1px solid #cfcfcf;
}

/* Links stand die Ueberschrift buendig an der Spalte, rechts klaffte ein
   Zentimeter Luft: der Innenabstand hielt 42px frei, damit die Schrift nicht
   unter das Pluszeichen laeuft, das Zeichen selbst sass aber noch einmal 24px
   weiter innen. Das Zeichen rueckt jetzt an die Kante, dann stehen beide
   Seiten gleich. */
.faq-world summary {
  padding: 25px 30px 25px 0;
  font-size: var(--fs-400);
  text-transform: uppercase;
}

.faq-world summary::after {
  right: 0;
}

.faq-world details p {
  /* Kein Einzug rechts mehr - die Zeilenlaenge wird ueber die Breite begrenzt,
     nicht ueber einen Rand, der wie ein Versehen aussieht. */
  max-width: 62ch;
  padding: 0 30px 24px 0;
  color: #6c6c6c;
}

.footer {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  padding: 0;
  color: #fff;
  background: var(--black);
}

.contact-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 660px;
  padding: 60px var(--page-gutter);
}

.contact-lead h2 {
  color: #fff;
  font-size: 82px;
}

.contact-lead > a {
  margin-top: 42px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--orange);
  font-size: 24px;
  font-weight: 700;
}

.footer-photo {
  min-height: 660px;
  overflow: hidden;
}

.footer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 50px;
  padding: 62px var(--page-gutter);
  border-top: 1px solid #282828;
}

.footer-details > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.footer-details strong {
  margin-bottom: var(--space-3);
  color: #fff;
  font-size: var(--fs-100);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-details a,
.footer-details p {
  margin: 0;
  color: #8e8e8e;
  font-size: var(--fs-200);
}

.footer-details a:hover {
  color: #fff;
}

.footer-logo {
  width: 118px;
  margin: 0 0 18px;
}

.section-reveal,
.media-reveal {
  opacity: 1;
  transform: none;
}

@media (max-width: 1250px) {
  :root { --page-gutter: 38px; }
  .inner-nav ul { gap: 15px; }
  .inner-nav a { font-size: var(--fs-100); }
  .phone-btn { display: none; }
  .hero h1 { font-size: 104px; }
  .park-intro h2,
  .booking-heading h2,
  .rental-copy h2,
  .training-copy h2,
  .voucher-copy h2,
  .tour-copy h2 { font-size: 56px; }
  .park-intro { gap: 55px; padding: 70px 55px; }
}

@media (max-width: 900px) {
  :root { --page-gutter: 22px; }
  html { scroll-snap-type: none; }
  .chapter-nav { display: none; }
  .main-nav-sub { width: calc(100vw - 32px); }
  .main-nav { min-height: 70px; }
  .logo img { width: 56px; }
  .inner-nav { justify-content: stretch; }
  .inner-nav ul { gap: var(--space-2); margin-right: 0; }
  .hero { min-height: 88vh; }
  .hero-inner { margin: 0 var(--page-gutter) 84px; }
  .hero h1 { font-size: 68px; }
  .hero-lead { font-size: 17px; }
  .hero-index { display: none; }
  .scroll-down { right: var(--page-gutter); }
  .park-intro,
  .booking-heading,
  .price-band,
  .faq-world,
  .voucher-world,
  .footer { grid-template-columns: 1fr; }
  .park-intro {
    width: calc(100vw - 28px);
    gap: 38px;
    margin-top: -22px;
    padding: 55px 32px;
  }
  .park-intro h2,
  .booking-heading h2,
  .rental-copy h2,
  .price-band h2,
  .training-copy h2,
  .voucher-copy h2,
  .tour-copy h2,
  .faq-heading h2 { font-size: 43px; }
  .park-facts { grid-template-columns: 1fr; }
  .park-facts span { padding: 15px 0; border-bottom: 1px solid var(--line); }
  .park-aerial { height: 65vh; min-height: 490px; }
  .park-aerial-label { right: 22px; bottom: 30px; }
  .offer-strip { grid-template-columns: 1fr; padding: 0 var(--page-gutter); }
  .offer-strip article { min-height: 0; padding: 40px 18px; border-bottom: 1px solid #2c2c2c; }
  .offer-strip article:last-child { border-right: 0; }
  .offer-strip h3 { margin-top: 18px; }
  .action-film { height: 100dvh; min-height: 480px; }
  .action-film-copy { left: var(--page-gutter); bottom: 38px; }
  .action-film-copy strong { font-size: 43px; }
  .film-status { right: var(--page-gutter); bottom: 40px; }
  .booking-heading { width: auto; gap: 28px; padding: 70px var(--page-gutter) 45px; }
  .side-block { width: auto; }
  .rental-band,
  .training-hero,
  .tour-world { min-height: 100dvh; }
  .rental-copy,
  .training-copy,
  .tour-copy { left: var(--page-gutter); bottom: 42px; width: calc(100vw - (var(--page-gutter) * 2)); }
  .price-band { gap: 42px; padding: 70px var(--page-gutter); }
  .training-gallery { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78vw; overflow-x: auto; }
  .training-gallery img { height: 330px; }
  .voucher-copy { min-height: 520px; padding: 72px var(--page-gutter); }
  .voucher-media { min-height: 420px; }
  .faq-world { gap: 50px; padding: 74px var(--page-gutter); }
  .contact-lead { min-height: 520px; padding: 72px var(--page-gutter); }
  .contact-lead h2 { font-size: 58px; }
  .footer-photo { min-height: 520px; }
  .footer-details { grid-template-columns: 1fr 1fr; padding: 50px var(--page-gutter); }
}

@media (max-width: 560px) {
  .hero h1 { font-size: 51px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .park-intro { padding: 48px 24px; }
  .park-intro h2,
  .booking-heading h2,
  .rental-copy h2,
  .price-band h2,
  .training-copy h2,
  .voucher-copy h2,
  .tour-copy h2,
  .faq-heading h2 { font-size: 36px; }
  .park-aerial-label strong { font-size: var(--fs-600); }
  .action-film { height: 100dvh; min-height: 440px; }
  .action-film-copy strong { font-size: 34px; }
  .film-status { top: 90px; right: 22px; bottom: auto; }
  .booking-heading > p { font-size: var(--fs-400); }
  .price-lines a { font-size: var(--fs-100); }
  .price-lines strong { font-size: 21px; }
  .contact-lead h2 { font-size: 46px; }
  .contact-lead > a { font-size: 17px; }
  .footer-details { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media img { animation: none; }
  .ambient-video { display: none; }
  .video-fallback { opacity: 1; }
  .film-status i { animation: none; }
  html.motion-ready .section-reveal,
  html.motion-ready .media-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Chapter navigation (Kapitel-zu-Kapitel) ---------- */
.chapter-nav {
  position: fixed;
  top: 50%;
  right: 20px;
  z-index: 80;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: flex-end;
}
.chapter-dot {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease;
}
.chapter-dot:hover {
  transform: scale(1.28);
}
.chapter-dot.is-active {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.12);
}
.chapter-dot__label {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 12, 0.88);
  color: #fff;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) ease, transform var(--dur) cubic-bezier(0.16, 1, 0.3, 1);
}
.chapter-dot:hover .chapter-dot__label,
.chapter-dot.is-active .chapter-dot__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 900px) {
  .chapter-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-dot, .chapter-dot__label { transition: none; }
}

/* Kapitel-Dots bei offenem Buchungs-Detail ausblenden (verdecken sonst den Schließen-Knopf) */
body.detail-open .chapter-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(14px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Premium-Einblendung der Bike-Bühne (rauffahren + faden), zugleich weicher Slot-Wechsel */
/* Bühnen-Auftritt: die Bikes kommen einzeln gestaffelt an (nur beim ersten
   Erreichen der Buchung — danach schaltet .is-settled die Animation ab, damit
   Re-Renders bei Tag-/Zeitwechsel nicht erneut "einfliegen").
   fill-mode backwards: hält nur den Startzustand während des Delays und gibt
   das Element danach frei — Hover-Lift/Fokus-Transforms bleiben intakt. */
html.reveal-ready .bike-row:not(.is-revealed) .bike-choice {
  opacity: 0;
}

html.reveal-ready .bike-row.is-revealed:not(.is-settled) .bike-choice {
  animation: bike-arrive 0.85s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

html.reveal-ready .bike-row.is-revealed:not(.is-settled) .bike-choice:nth-child(1) { animation-delay: 0.05s; }
html.reveal-ready .bike-row.is-revealed:not(.is-settled) .bike-choice:nth-child(2) { animation-delay: 0.16s; }
html.reveal-ready .bike-row.is-revealed:not(.is-settled) .bike-choice:nth-child(3) { animation-delay: 0.27s; }
html.reveal-ready .bike-row.is-revealed:not(.is-settled) .bike-choice:nth-child(4) { animation-delay: 0.38s; }
html.reveal-ready .bike-row.is-revealed:not(.is-settled) .bike-choice:nth-child(5) { animation-delay: 0.49s; }
html.reveal-ready .bike-row.is-revealed:not(.is-settled) .bike-choice:nth-child(6) { animation-delay: 0.6s; }

@keyframes bike-arrive {
  from {
    opacity: 0;
    transform: translateY(34px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
html.reveal-ready .bike-row.is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .bike-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Creative Director: 2.5D Depth Pass
   - räumliche Karten (Lichtkante, Glow, 3D-Tilt)
   - Buttons mit physischer Tiefe + Glow
   ============================================================ */

/* Park-Feature-Karten – dezente Tiefe (helle Sektion) */
.offer-strip article {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.offer-strip article:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.45);
}

/* Premium-CTA: physische Tiefe + Glow */
.btn-solid {
  position: relative;
  box-shadow: 0 12px 26px -12px rgba(255, 91, 22, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform var(--dur) cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, filter 0.3s ease;
}
.btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -12px rgba(255, 91, 22, 0.75),
    0 0 44px -8px rgba(255, 91, 22, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  filter: brightness(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .offer-strip article,
  .btn-solid { transition: none; }
}

/* ============================================================
   Scroll-Parallax entfernt (verursachte Ruckeln + Überskalierung). Die
   Regel ist bewusst weg — Medien sitzen ruhig in ihren Rahmen.
   ============================================================ */
.park-aerial { overflow: hidden; }

/* ===== Phase 0 Fixes (QA) ===== */
/* Datum-Tab Status kleiner */
.slot-btn em { font-size: var(--fs-300); }

/* Booking-Bar: Bike-Name nicht umbrechen, Meta voll sichtbar */
.quick-title { white-space: nowrap; }
.quick-copy { gap: 14px; }
.quick-actions .btn { min-width: 138px; }

/* Gewähltes Bike im Lineup (Overview): dezent warmer Kontaktschatten. Die
   Auswahl-Kontur kommt aus der .bike-edge-Silhouette (max ~1px Orange). */
.booking-experience:not(.is-detail) .bike-choice.is-selected::before {
  background: radial-gradient(ellipse at center, rgba(255, 91, 22, 0.2), transparent 70%);
  opacity: 1;
}
.booking-experience:not(.is-detail) .bike-choice.is-selected {
  --bscale: 1.04;
}

/* Footer Legal-Zeile */
.footer-legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-300);
}
.footer-legal span { color: rgba(255, 255, 255, 0.5); }
.footer-legal a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-legal a:hover { color: var(--orange); }

/* Booking-Bar Meta: nicht trunkieren (Preis muss sichtbar bleiben) */
.quick-meta { overflow: visible; text-overflow: clip; }
.quick-copy { min-width: 0; flex: 1 1 auto; }
.quick-book-rail { gap: 22px; }

/* ============================================================
   HERO 2.5D – Premium-Erlebnis-Einstieg (überschreibt Alt-Hero)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: end start;
  overflow: hidden;
  background: #000;
}

/* obere Lichtkante der Bühne */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 6;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  pointer-events: none;
}



/* Hintergrund-Scrim: unten/links dunkel für Lesbarkeit, oben/rechts offen */
.hero-overlay {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) min(1024px, 100%), rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.18) 34%, transparent 60%);
  box-shadow: none;
}

/* Ruhige Mittelgrund-Atmosphäre: festes Licht ohne Maus-Parallax. */
.hero-atmos {
  display: none;
  position: absolute;
  inset: -6%;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(46% 50% at 20% 82%, rgba(255, 91, 22, 0.28), transparent 70%),
    radial-gradient(38% 40% at 85% 18%, rgba(120, 170, 255, 0.10), transparent 70%),
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%);
  mix-blend-mode: screen;
}
.hero-atmos::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 60%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
  mix-blend-mode: multiply;
}

/* Vordergrund: Content */
.hero-inner {
  position: relative;
  z-index: 5;
  width: min(960px, calc(100vw - var(--page-gutter) * 2));
  margin: 0 0 7vh var(--page-gutter);
  padding: 0;
  text-align: left;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-300);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero-eyebrow i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 91, 22, 0.22), 0 0 18px rgba(255, 91, 22, 0.8);

}


.hero-title {
  margin: 0;
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
}
.hero-title .line {
  display: block;
  font-size: 6rem;
  text-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.hero-title .line-2 {
  color: var(--orange);
  text-shadow: 0 0 50px rgba(255, 91, 22, 0.35), 0 24px 60px rgba(0, 0, 0, 0.4);
}

.hero-lead {
  width: auto;
  max-width: 560px;
  margin: 26px 0 34px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 26px;
}

/* Premium-Buchungsbutton */
.btn-hero {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 0 30px;
  border-radius: 4px;
  color: #fff;
  background: linear-gradient(180deg, #ff6a2a, #f0480c);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 16px 38px -12px rgba(255, 91, 22, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: transform var(--dur) cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.btn-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Der Buchen-Button glänzt periodisch von selbst auf — zieht das Auge zur
   Conversion, ohne zu schreien (kurzer Sweep, lange Pause). */
@media (prefers-reduced-motion: no-preference) {
  .btn-hero:not(:hover)::before {

  }

  
}
.btn-hero i {
  font-style: normal;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-hero:hover,
.btn-hero:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 24px 50px -12px rgba(255, 91, 22, 0.9), 0 0 50px -6px rgba(255, 91, 22, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  outline: none;
}
.btn-hero:hover::before { left: 130%; }
.btn-hero:hover i { transform: translateX(5px); }

/* Zweit-CTA dezent */
.btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 62px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 4px;
  color: #fff;
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color var(--dur) ease, background var(--dur) ease, transform var(--dur) ease;
}
.btn-hero-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* Trust- / Fakten-Strip */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.hero-trust li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.hero-trust strong {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.hero-trust span {
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e6e6e6;
}

.hero-trust .park-status-pill {
  min-width: min(100%, 240px);
  flex-basis: 100%;
}
.park-status-pill[data-status="open"] strong { color: #68cf78; }
.park-status-pill[data-status="closed"] strong { color: #ff9a75; }
.park-status-pill[data-status="unknown"] strong { color: #ffd16a; }

.home-proof {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.45fr);
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(56px, 7vw, 96px) var(--page-gutter);
  background: #f7f7f5;
}
.home-proof-heading { align-self: start; }
.home-proof-heading h2 {
  max-width: 12ch;
  margin: 0 0 18px;
  font-size: clamp(2rem, 4.2vw, 4.5rem);
  line-height: 1.02;
  text-transform: uppercase;
}
.home-proof-heading > p:not(.section-caption) { max-width: 42ch; margin: 0 0 10px; color: #4d4d4d; }
.home-proof-heading small { color: #6b6b6b; }
.home-proof-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.home-proof-scores a {
  display: grid;
  min-width: 0;
  min-height: 154px;
  align-content: center;
  padding: 22px;
  border: 1px solid #d7d7d4;
  background: #fff;
  color: #111;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.home-proof-scores a:hover,
.home-proof-scores a:focus-visible { border-color: var(--orange-dark); transform: translateY(-2px); }
.home-proof-scores strong { color: var(--orange-dark); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; }
.home-proof-scores span { margin-top: 10px; font-weight: 800; }
.home-proof-scores small { color: #626262; }
.home-proof-reviews {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.home-proof-reviews article { padding: 24px; border-top: 3px solid var(--orange-dark); background: #fff; }
.home-proof-reviews p { margin: 0 0 18px; color: #222; font-size: var(--fs-500); line-height: 1.55; }
.home-proof-reviews span { color: #666; font-size: var(--fs-300); font-weight: 700; }
.home-proof-story {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(210px, .6fr) minmax(0, 1.4fr);
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid #d7d7d4;
}
.home-proof-story strong { font-size: var(--fs-600); text-transform: uppercase; }
.home-proof-story span { color: #4d4d4d; }

@media (max-width: 700px) {
  .home-proof { grid-template-columns: 1fr; gap: 28px; padding: 48px var(--page-gutter); }
  .home-proof-heading h2 { font-size: 2.35rem; }
  .home-proof-scores { grid-template-columns: 1fr; }
  .home-proof-scores a { min-height: 0; grid-template-columns: auto 1fr; column-gap: 14px; padding: 18px; }
  .home-proof-scores strong { grid-row: 1 / 3; font-size: 2.25rem; }
  .home-proof-scores span { margin-top: 0; align-self: end; }
  .home-proof-reviews { grid-column: auto; grid-template-columns: 1fr; }
  .home-proof-story { grid-column: auto; grid-template-columns: 1fr; }
}

/* Scroll-Cue dezent unten-links unter dem Content nicht – mittig rechts */
.hero-scroll {
  position: absolute;
  right: var(--page-gutter);
  bottom: 30px;
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero-scroll i {
  width: 1px;
  height: 46px;
  background: linear-gradient(rgba(255, 255, 255, 0.7), transparent);
  position: relative;
  overflow: hidden;
}
.hero-scroll i::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--orange);

}


/* Mobile */
@media (max-width: 900px) {
  .hero-inner { margin-bottom: 11vh; width: calc(100vw - var(--page-gutter) * 2); }
  .hero-title .line { font-size: clamp(2.85rem, 12.5vw, 4.8rem); }
  .hero-lead { font-size: 1.05rem; }
  .hero-actions { width: 100%; }
  .btn-hero { flex: 1 1 100%; justify-content: center; }
  .btn-hero-ghost { flex: 1 1 100%; justify-content: center; }
  .hero-trust { gap: 12px 20px; }
  .hero-trust li { padding-left: 14px; }
  .hero-trust strong { font-size: var(--fs-500); }
  .hero-scroll { display: none; }
}

/* Rechte Kapitel-Navigation entfernt – redundant zur Hauptnavigation, wirkte überlagert/buggy */
.chapter-nav { display: none !important; }

/* ===== Startplatz-Prototyp: Front->Side Crossfade (Briefing) ===== */
.detail-stage { position: relative; }
.detail-stage .ds-front,
.detail-stage .ds-side {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: none;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.detail-stage .ds-front { opacity: 1; transform: none; }
.detail-stage .ds-side { opacity: 0; transform: scale(1.03); }
.detail-stage.is-side .ds-front { opacity: 0; transform: scale(0.99); }
.detail-stage.is-side .ds-side { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .detail-stage .ds-front,
  .detail-stage .ds-side { transition: opacity var(--dur-fast) ease; transform: none !important; }
}

/* Briefing-Schritt 9 — Schließen spielt die Bewegung exakt rückwärts:
   1) Datenbereich faded zuerst, 2) die Bike-Bühne bleibt und blendet
   Side->Front zurück (90°->0°), 3) danach fährt die Kamera weg (is-detail
   wird per JS-Timer entfernt). */
.bike-detail.is-closing .detail-data,
.bike-detail.is-closing .detail-thumbs,
.bike-detail.is-closing > .close-detail {
  opacity: 0;
  transition: opacity 0.14s ease;
  pointer-events: none;
}
.bike-detail.is-closing .detail-stage .ds-front,
.bike-detail.is-closing .detail-stage .ds-side {
  transition: opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== HERO CINEMA — der erste Eindruck ===== */
@media (prefers-reduced-motion: no-preference) {
  .hero-media {

  }

  /* nur transform: eine Filter-Animation ließe dauerhaft einen GPU-Filter-Layer
     auf dem Video zurück (Artefakt-Quelle beim Scrollen) */
  

  .hero-media .ambient-video,
  .hero-media .video-fallback {
    transform-origin: 55% 42%;

  }

  

}

/* ===== Licht-Flächen-Signatur (seitenübergreifend) =====
   Alle hellen Sections teilen dieselbe Design-Sprache: riesige Ghost-Typografie
   (Section-Name als Umriss-Schrift), feines Punkt-Raster und ein dezenter
   Orange-Schimmer. isolation:isolate hebt die z-index:-1-Ebenen über den
   Section-Hintergrund, aber unter den Inhalt — nichts überdeckt Text/Buttons. */







/* Startplatz-Variante der Signatur — OHNE isolation (die würde die fixierte
   Buchungs-Bar im Stacking einsperren). Ein einzelnes ::before trägt Wort +
   Punktraster + Glow; Heading liegt per z-index darüber, die dunkle Bühne
   (position:relative, später im DOM) deckt den Rest natürlich ab. */
.booking-section {
  position: relative;
}



.booking-section .booking-heading {
  position: relative;
  z-index: 1;
}

/* ===== Buchungs-Funnel (P1–P4): Stepper, Fahrer, Zusammenfassung, Zusicherung ===== */

/* P1: sichtbarer Prozess "01 Termin · 02 Bike · 03 Buchen" */
.booking-steps {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking-steps li {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: var(--fs-300);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau-text);
  transition: color var(--dur) ease;
}

.booking-steps li span {
  font-size: var(--fs-100);
  color: var(--grau-text);
  transition: color var(--dur) ease;
}

.booking-steps li em {
  font-style: normal;
  font-size: var(--fs-100);
  color: var(--orange-lesbar, var(--orange-dark));
}

.booking-steps li:not(:last-child)::after {
  content: "→";
  margin-left: 10px;
  color: #d8d8d8;
  font-weight: 400;
}

.booking-steps li.is-current {
  color: #111;
}

.booking-steps li.is-current span {
  color: var(--orange-lesbar, var(--orange-dark));
}

.booking-steps li.is-done {
  color: #555;
}

.booking-steps li[data-open-cart] {
  cursor: pointer;
}

.booking-steps li[data-open-cart]:hover {
  color: #111;
}

/* (Fahrer-Zähler entfernt — Kunden legen einfach mehrere Bikes in die Buchung) */

/* P2: Zusammenfassung in der Buchungs-Bar (Anzahl + Gesamtpreis) */
.quick-actions .quick-summary {
  border: 1px solid var(--orange);
  color: #fff;
  background: rgba(255, 91, 22, 0.16);
  font-weight: 800;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s var(--ease);
}

.quick-actions .quick-summary:hover {
  background: var(--orange);
  transform: translateY(-1px);
}

/* P4: Zusicherung am Entscheidungspunkt (im dunklen Detail-Panel) */
.booking-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 10px 0 2px;
  font-size: var(--fs-200);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
}

.booking-assurance span::first-letter {
  color: #59c46f;
}

@media (max-width: 760px) {
  .booking-steps {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .booking-steps li:not(:last-child)::after {
    margin-left: 6px;
  }
}

/* ===== P5: Monats-Kalender in der Terminwahl ===== */
.booking-intro {
  position: relative;
}

.date-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #d2d2d2;
  color: #111;
  background: #fafafa;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.date-toggle:hover {
  border-color: #b3b3b3;
  background: #fff;
}

.date-toggle:focus-visible,
.date-toggle[aria-expanded="true"] {
  outline: none;
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 91, 22, 0.16);
}

.date-toggle i {
  font-style: normal;
  color: var(--grau-text);
  transition: transform var(--dur) var(--ease);
}

.date-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.month-cal {
  position: static;
  z-index: 40;
  width: min(100%, 720px);
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  animation: pick-in 0.28s var(--ease) both;
}

.mc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mc-head strong {
  font-size: var(--fs-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mc-nav {
  width: 44px;
  height: 44px;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #111;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mc-nav:hover:not(:disabled) {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
}

.mc-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.mc-week,
.mc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.mc-week span {
  padding: 4px 0;
  text-align: center;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b0b0b0;
}

.mc-day {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 52px;
  border: 1px solid transparent;
  background: transparent;
  font-size: var(--fs-300);
  font-weight: 700;
  color: #111;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s var(--ease);
}

.mc-day i {
  position: absolute;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.mc-day.is-free i { background: #2faa4d; }
.mc-day.is-full i { background: var(--orange); }
.mc-day.is-full { color: #b08e84; }

.mc-day.is-free:hover,
.mc-day.is-full:hover {
  border-color: #d8d8d8;
  background: #fafafa;
  transform: translateY(-1px);
}

.mc-day.is-active {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
}

.mc-day.is-active i {
  background: #fff;
}

.mc-day.is-today:not(.is-active) {
  border-color: #111;
}

.mc-day.is-off {
  display: grid;
  place-items: center;
  min-height: 52px;
  font-size: var(--fs-300);
  color: #d2d2d2;
}

.mc-pad {
  aspect-ratio: 1;
}

.mc-legend {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8c8c8c;
}

.mc-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mc-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.mc-legend .l-free i { background: #2faa4d; }
.mc-legend .l-full i { background: var(--orange); }
.mc-legend .l-off i { background: #d2d2d2; }

/* Startplatz v3: echtes EMX-Park-Foto und unveränderte Original-Freisteller.
   Die grossen 3x2-Flächen ersetzen die früheren, winzigen Frontmodelle. */
.booking-experience .gate-stage {
  height: clamp(520px, 44vw, 680px);
  max-height: none;
  aspect-ratio: auto;
  background: #0a0b09;
}

.booking-experience .gate-photo {
  background-image: url("../images/site/img/park/EMX-Park_Elektro-Motocross_3.jpg");
  background-position: center 46%;
  filter: brightness(0.5) saturate(0.88) contrast(1.04);
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0) scale(1.035);
}

.booking-experience .stage-atmos {
  background:
    linear-gradient(90deg, rgba(2, 4, 3, 0.38), rgba(2, 4, 3, 0.08) 48%, rgba(2, 4, 3, 0.42)),
    linear-gradient(180deg, rgba(3, 4, 3, 0.08), rgba(3, 4, 3, 0.56));
}

.booking-experience .stage-vignette {
  background: radial-gradient(110% 105% at 50% 48%, transparent 48%, rgba(0, 0, 0, 0.52) 100%);
}

.booking-experience .bike-row {
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.12);
}

.booking-experience .bike-choice {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 14px 16px;
  background: linear-gradient(145deg, rgba(7, 8, 7, 0.4), rgba(7, 8, 7, 0.64));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  isolation: isolate;
}

.booking-experience .bike-choice::before {
  left: 10%;
  right: 10%;
  bottom: 15%;
  width: auto;
  height: 24px;
  transform: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.72), transparent 68%);
  filter: blur(7px);
}

.booking-experience .bike-choice:hover,
.booking-experience .bike-choice:focus-visible,
.booking-experience .bike-choice.is-selected {
  --lift: 0;
  --bscale: 1;
  background: linear-gradient(145deg, rgba(10, 11, 10, 0.22), rgba(10, 11, 10, 0.5));
  box-shadow: inset 0 0 0 2px var(--orange);
}

.booking-experience .bike-photo {
  position: absolute;
  inset: 22px 18px 62px;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.booking-experience .bike-figure {
  position: static;
  width: min(92%, 430px);
  height: min(100%, 205px);
  max-width: none;
  object-fit: contain;
  transform: translate3d(0, 0, 0) scale(1);
  filter: drop-shadow(0 18px 14px rgba(0, 0, 0, 0.62));
  transition: transform var(--dur-slow) cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease;
}

.booking-experience .bike-choice:hover .bike-figure,
.booking-experience .bike-choice:focus-visible .bike-figure,
.booking-experience .bike-choice.is-selected .bike-figure {
  transform: translate3d(0, -5px, 0) scale(1.045);
  filter: drop-shadow(0 22px 16px rgba(0, 0, 0, 0.68));
}

.booking-experience .bike-caption {
  position: static;
  left: auto;
  bottom: auto;
  z-index: 3;
  transform: none;
  align-items: flex-start;
  justify-self: start;
  gap: var(--space-1);
  opacity: 1;
  text-align: left;
}

.booking-experience .bike-caption strong {
  font-size: clamp(12px, 1.05vw, 16px);
  letter-spacing: 0.04em;
}

.booking-experience .bike-caption small {
  align-items: flex-start;
  gap: 2px;
  flex-direction: column;
  padding: 5px 8px;
  font-size: var(--fs-100);
  line-height: 1.1;
}

.booking-experience .bike-caption small b {
  font-size: var(--fs-300);
}

.booking-experience .bike-caption em {
  position: absolute;
  right: 16px;
  top: 14px;
  bottom: auto;
  font-size: var(--fs-200);
  color: #fff;
}

.booking-experience .bike-choice[data-bike="hvr-504"] .bike-figure {
  width: 76%;
}

.booking-experience .bike-choice[data-bike="ktm-sxe5"] .bike-figure {
  width: 80%;
}

.booking-experience .bike-choice[data-bike="hvr-604"] .bike-figure {
  width: 84%;
}

.booking-experience .bike-choice[data-bike="hvr-85pro"] .bike-figure {
  width: 89%;
}

.booking-experience .bike-choice[data-bike="ktm-freeride"] .bike-figure {
  width: 94%;
}

.booking-experience .bike-choice[data-bike="stark-varg"] .bike-figure {
  width: 96%;
}

.booking-experience .bike-edge,
.booking-experience .bike-hit-area {
  display: none;
}

.booking-experience.is-detail .gate-stage {
  transform: scale(1.04);
}

.booking-experience.is-detail .bike-choice:not(.is-selected) .bike-figure {
  transform: scale(0.96);
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.5)) brightness(0.64) saturate(0.7);
}

@media (max-width: 900px) {
  .booking-experience .gate-stage {
    min-height: 690px;
    height: 690px;
    overflow: hidden;
  }

  .booking-experience .gate-photo,
  .booking-experience .bike-row {
    width: 100%;
    max-width: none;
  }

  .booking-experience .bike-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    padding: 10px;
  }

  .booking-experience .bike-choice {
    padding: 10px;
    scroll-snap-align: none;
  }

  .booking-experience .bike-photo {
    inset: 20px 8px 62px;
  }

  .booking-experience .bike-figure {
    width: 96%;
    height: 138px;
  }

  .booking-experience .bike-caption strong {
    font-size: var(--fs-100);
  }

  .booking-experience .bike-caption small {
    padding: 4px 6px;
    font-size: var(--fs-100);
  }

  .booking-experience .bike-caption small b {
    font-size: var(--fs-100);
  }

  .booking-experience .bike-caption em {
    right: 10px;
    top: 9px;
    bottom: auto;
    font-size: var(--fs-100);
  }

  .booking-experience .quick-book-rail,
  .booking-experience .quick-book-rail.is-fixed {
    position: relative;
    inset: auto;
    bottom: auto;
    width: 100%;
  }

  /* Hier bleibt die Leiste im Fluss - der Platzhalter waere doppelter Abstand. */
  .booking-experience.has-fixed-rail {
    padding-bottom: 0;
  }
}

@media (max-width: 420px) {
  .booking-experience .gate-stage {
    min-height: 660px;
    height: 660px;
  }

  .booking-experience .bike-row {
    padding: 6px;
  }

  .booking-experience .bike-figure {
    height: 122px;
  }

  .booking-experience .detail-booking {
    align-items: stretch;
    flex-direction: column;
  }

  .booking-experience .detail-booking .btn-mod {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
  }
}

/* Startplatz-Schnellbuchung: Kartenflaeche und Mengensteuerung sind getrennte
   Geschwister. So bleiben die Buttons semantisch gueltig und unabhaengig. */
.booking-experience .bike-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  width: 100%;
  padding: 14px 150px 14px 16px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: default;
}

.booking-experience .bike-open:focus-visible {
  outline: none;
}

.quantity-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: 44px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 6px;
  background: rgba(8, 8, 8, 0.94);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.bike-card-stepper {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 9;
}

.quantity-button {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  color: #fff;
  background: transparent;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.quantity-button.is-plus {
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--orange);
}

.quantity-button:hover:not(:disabled),
.quantity-button:focus-visible {
  color: #fff;
  background: #343434;
  outline: 2px solid #fff;
  outline-offset: -3px;
}

.quantity-button.is-plus:hover:not(:disabled),
.quantity-button.is-plus:focus-visible {
  background: #ff7437;
}

.quantity-button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.quantity-value {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 44px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.cart-drawer {
  width: min(460px, calc(100vw - 32px));
  padding: 20px;
}

.cart-item-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.cart-quantity-stepper {
  position: static;
  flex: 0 0 auto;
  border-color: #dedede;
  background: #f5f5f5;
  box-shadow: none;
}

.cart-quantity-stepper .quantity-button {
  color: #111;
  border-color: #d5d5d5;
  background: #fff;
}

.cart-quantity-stepper .quantity-button.is-plus {
  color: #fff;
  border-color: var(--orange);
  background: var(--orange);
}

.cart-quantity-stepper .quantity-value {
  color: #111;
}

@media (max-width: 900px) {
  .booking-experience .bike-open {
    padding: 10px;
  }

  .booking-experience .bike-caption {
    position: absolute;
    top: 8px;
    right: 9px;
    bottom: auto;
    left: 9px;
    align-items: flex-start;
    justify-self: stretch;
    width: auto;
    max-width: none;
  }

  .booking-experience .bike-caption strong {
    max-width: calc(100% - 48px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .booking-experience .bike-caption em {
    padding: 2px 4px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.76);
  }

  .bike-card-stepper {
    right: 8px;
    bottom: 8px;
  }
}

@media (max-width: 560px) {
  .cart-drawer {
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
    max-height: calc(100svh - 16px);
    padding: var(--space-4);
  }

  .cart-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .cart-item-copy {
    flex-basis: 100%;
  }

  .cart-quantity-stepper {
    margin-left: auto;
  }
}

/* Auftrag 085: belastbare mobile Bedienung von 320 px bis Tablet.
   Diese Regeln liegen bewusst am Dateiende, weil die Website historisch aus
   mehreren Design-Phasen besteht und die mobile Ebene hier eindeutig gewinnt. */
.mobile-book-cta {
  display: none;
}

@media (max-width: 900px) {
  :root {
    --page-gutter: clamp(14px, 4vw, 24px);
  }

  .main-nav-sub {
    width: calc(100vw - 28px);
  }

  .mobile-nav,
  .mobile-cart-pill {
    width: 44px;
    height: 44px;
  }

  .mobile-book-cta {
    position: fixed;
    top: 16px;
    right: 14px;
    z-index: 120;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    min-height: 44px;
    padding: 0 16px;
    color: #fff;
    background: var(--orange);
    font-size: var(--fs-200);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Parallaxe und Overscan bleiben auf grossen Bildschirmen erhalten. Auf
     Touch-Geraeten sitzen alle Ebenen exakt im Viewport. */
  .hero-media,
  .hero-media .ambient-video,
  .hero-media .video-fallback,
  .hero-inner,
  .booking-experience .gate-photo {
    transform: none !important;
    animation: none !important;
  }

  .hero-atmos {
    inset: 0;
    transform: none !important;
  }

  .booking-experience .gate-photo {
    inset: 0;
  }

  /* Auf Zweispalten-Karten waere Name + Groessenlabel + Preis nebeneinander
     zu eng. Der Preis sitzt deshalb klar ueber dem Mengenregler. */
  .booking-experience .bike-caption em {
    top: auto;
    right: 8px;
    bottom: 60px;
  }

  /* Kein Text unter 12 px auf Telefon und Tablet. */
  .hero-trust span,
  .section-caption,
  .park-facts span,
  .park-aerial-label span,
  .offer-strip article > span,
  .action-film-copy span,
  .film-status span,
  .price-lines a > span,
  .booking-steps li,
  .booking-steps li span,
  .booking-days,
  .picker-label,
  .day-wd,
  .time-state,
  .booking-experience .bike-caption strong,
  .booking-experience .bike-caption small,
  .booking-experience .bike-caption small span,
  .booking-experience .bike-caption small b,
  .booking-experience .bike-caption em,
  .bike-legend-item > span,
  .bike-legend-stock,
  .lock-icon,
  .quick-copy > span,
  .detail-thumbs .thumb span,
  .detail-specs span,
  .detail-booking-info span,
  .tour-links a,
  .faq-contact span,
  .footer-details strong {
    font-size: var(--fs-200);
  }

  .park-copy > p,
  .offer-strip p,
  .rental-copy > p:not(.section-caption),
  .training-copy > p:not(.section-caption),
  .tour-copy > p:not(.section-caption),
  .voucher-copy > p:not(.section-caption),
  .faq-lead,
  .faq-world details p,
  .footer-details a,
  .footer-details p,
  .footer-legal,
  .checkout-dialog,
  .cart-drawer {
    font-size: var(--fs-400);
  }

  /* Uhrzeiten sind voll sichtbar statt in einer zweiten horizontalen Rail
     versteckt. Die Tagesauswahl darf weiterhin bewusst seitlich scrollen. */
  .picker-block {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-2);
  }

  .picker-label {
    width: auto;
    min-width: 0;
  }

  .time-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    overflow: visible;
  }

  .time-slot {
    width: 100%;
    min-width: 0;
    min-height: 64px;
  }

  /* Der Monatskalender wird auf sehr schmalen Geraeten zu einer kompakten,
     viewport-breiten Flaeche. So bleiben alle 7 Spalten mindestens 44 px. */
  .month-cal {
    position: fixed;
    top: 74px;
    right: 0;
    left: 0;
    width: min(380px, 100vw);
    margin: 0 auto;
    padding: 6px;
    max-height: calc(100svh - 74px);
    overflow-y: auto;
  }

  .mc-head {
    margin: 2px 4px 8px;
  }

  .mc-nav,
  .mc-day {
    min-width: 44px;
    min-height: 44px;
  }

  .mc-nav {
    width: 44px;
    height: 44px;
  }

  .mc-week,
  .mc-grid {
    gap: 0;
  }

  .mc-week span {
    font-size: var(--fs-200);
  }

  /* Alle wichtigen Links und Dialogaktionen bleiben mit dem Daumen sicher
     treffbar; zwischen benachbarten Zielen liegen mindestens 8 px. */
  .booking-steps li[data-open-cart],
  .close-detail,
  .checkout-close,
  .tour-links a,
  .faq-contact a,
  .contact-lead > a,
  .footer-details a,
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }

  .tour-links {
    gap: 8px 16px;
  }

  .faq-contact,
  .footer-details > div {
    gap: var(--space-2);
  }

  .footer-legal {
    gap: 8px 22px;
  }

  .checkout-close,
  .close-detail {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 360px) {
  .mobile-book-cta {
    min-width: 92px;
    padding: 0 12px;
  }

  .booking-heading {
    padding-right: 14px;
    padding-left: 14px;
  }

  .booking-experience .bike-row {
    gap: 2px;
    padding: var(--space-1);
  }

  .booking-experience .bike-choice {
    padding: var(--space-2);
  }

  .booking-experience .bike-caption {
    right: 7px;
    left: 7px;
  }

  .voucher-world {
    grid-template-columns: minmax(0, 1fr);
  }

  .voucher-copy,
  .voucher-media {
    min-width: 0;
  }

  .voucher-copy h2 {
    font-size: 32px;
  }
}

/* Kleine oder quer gehaltene Telefone: Der primäre Buchungsweg bleibt im
   ersten Screen; Zusatzfakten werden zugunsten der Bedienung ausgeblendet. */
@media (max-width: 900px) and (max-height: 640px) {
  .hero-inner {
    margin-bottom: 20px;
  }

  .hero-eyebrow {
    margin-bottom: 10px;
  }

  .hero-title .line {
    font-size: clamp(2.35rem, 9vw, 4rem);
  }

  .hero-lead {
    margin: 12px 0 16px;
    font-size: var(--fs-400);
  }

  .hero-trust {
    display: none;
  }

  .btn-hero,
  .btn-hero-ghost {
    min-height: 48px;
  }
}

/* Die Abnahmekriterien von Auftrag 085 gelten nicht nur fuer Telefone. Auch
   Querformat, Tablet und Desktop behalten lesbare Metadaten und exakte Medien. */
.hero-media,
.hero-media .ambient-video,
.hero-media .video-fallback,
.hero-atmos,
.booking-experience .gate-photo {
  transform: none !important;
  animation: none !important;
}

.hero-atmos,
.booking-experience .gate-photo {
  inset: 0;
}

.inner-nav a,
.phone-btn,
.hero-trust span,
.hero-scroll span,
.section-caption,
.park-facts span,
.park-aerial-label span,
.offer-strip article > span,
.action-film-copy span,
.film-status span,
.booking-steps li,
.booking-steps li span,
.booking-days,
.picker-label,
.day-wd,
.time-state,
.booking-experience .bike-caption strong,
.booking-experience .bike-caption small,
.booking-experience .bike-caption small span,
.booking-experience .bike-caption small b,
.booking-experience .bike-caption em,
.bike-legend-item > span,
.bike-legend-stock,
.lock-icon,
.quick-copy > span,
.detail-thumbs .thumb span,
.detail-specs span,
.detail-booking-info span,
.tour-links a,
.faq-contact span,
.footer-details strong {
  font-size: var(--fs-200);
}

.inner-nav > ul > li > a {
  justify-content: center;
  min-width: 44px;
}

.cart-pill,
.booking-steps li[data-open-cart],
.close-detail,
.checkout-close,
.tour-links a,
.faq-contact a,
.contact-lead > a,
.footer-details a,
.footer-legal a {
  min-width: 44px;
  min-height: 44px;
}

.booking-steps li[data-open-cart],
.tour-links a,
.faq-contact a,
.contact-lead > a,
.footer-details a,
.footer-legal a {
  display: inline-flex;
  align-items: center;
}

.tour-links {
  gap: 8px 22px;
}

.footer-details > div {
  gap: var(--space-2);
}

.mobile-quick-nav {
  display: none;
}

/* Mobile Experience 085: eine eigene, kompakte Nutzerfuehrung statt einer
   verkleinerten Desktopseite. */
@media (max-width: 900px) {
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .main-nav,
  .main-nav.is-scrolled {
    min-height: 72px;
    background: rgba(0, 0, 0, 0.96);
  }

  .main-nav-sub {
    width: calc(100vw - 28px);
    justify-content: space-between;
  }

  .mobile-nav {
    top: 14px;
    right: 14px;
    left: auto;
  }

  .mobile-cart-pill {
    display: none;
  }

  .inner-nav {
    inset: 72px 0 0;
    height: calc(100svh - 72px);
    padding: 18px 22px 30px;
    overflow-y: auto;
    background: rgba(3, 3, 3, 0.985);
  }

  .inner-nav.is-open {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }

  .inner-nav ul {
    width: 100%;
    gap: 0;
  }

  .inner-nav > ul > li > a {
    justify-content: flex-start;
    width: 100%;
    min-height: 58px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 15px;
  }

  .inner-nav .phone-btn {
    display: inline-flex;
    justify-content: center;
    min-height: 52px;
    margin-top: 20px;
  }

  .inner-nav > .cart-pill {
    display: none;
  }

  .mobile-book-cta {
    position: fixed;
    top: auto;
    right: 14px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 14px;
    z-index: 135;
    width: auto;
    min-width: 0;
    min-height: 56px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 6px;
    color: #fff;
    background: linear-gradient(180deg, #ff6a2a, #f04a0d);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38), 0 10px 28px rgba(255, 91, 22, 0.3);
    font-size: var(--fs-400);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: opacity 0.2s ease, transform var(--dur) var(--ease), background 0.2s ease;
  }

  .mobile-book-cta.has-items {
    background: #111;
    box-shadow: inset 0 0 0 2px var(--orange), 0 16px 38px rgba(0, 0, 0, 0.42);
  }

  .mobile-book-cta.is-at-startplatz:not(.has-items) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 18px));
  }

  body.checkout-open .mobile-book-cta,
  body.cart-open .mobile-book-cta,
  body.detail-open .mobile-book-cta {
    display: none;
  }
}

@media (max-width: 900px) {
  main > section:not(.hero) {
    min-height: 0;
  }

  .hero {
    min-height: 100svh;
  }

  .hero-inner {
    width: calc(100vw - 36px);
    margin: 0 18px 94px;
  }

  .hero-eyebrow {
    margin-bottom: 15px;
    font-size: var(--fs-200);
    line-height: 1.5;
  }

  .hero-title .line {
    font-size: clamp(2.65rem, 13.2vw, 4.4rem);
    line-height: 0.9;
  }

  .hero-lead {
    margin: 20px 0 0;
    font-size: 15px;
    line-height: 1.55;
  }

  .hero-actions {
    display: none;
  }

  .hero-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: 22px;
  }

  .hero-trust li {
    min-width: 0;
    padding-left: 10px;
  }

  .hero-trust strong {
    font-size: 15px;
  }

  .hero-trust span {
    font-size: var(--fs-200);
    line-height: 1.3;
  }

  .mobile-quick-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    color: #111;
    background: #fff;
    border-bottom: 1px solid #ddd;
  }

  .mobile-quick-nav a {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    min-width: 0;
    min-height: 72px;
    padding: 12px 10px;
    border-right: 1px solid #ddd;
  }

  .mobile-quick-nav a:last-child {
    border-right: 0;
  }

  .mobile-quick-nav strong {
    font-size: var(--fs-300);
    text-transform: uppercase;
  }

  .mobile-quick-nav a span {
    overflow: hidden;
    max-width: 100%;
    color: var(--grau-text);
    font-size: var(--fs-200);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .park-intro {
    width: 100%;
    gap: var(--space-6);
    margin: 0;
    padding: 44px 18px 34px;
  }

  .park-intro h2,
  .booking-heading h2,
  .rental-copy h2,
  .price-band h2,
  .training-copy h2,
  .voucher-copy h2,
  .tour-copy h2,
  .faq-heading h2 {
    font-size: 34px;
    line-height: 0.98;
  }

  .park-copy > p {
    margin-bottom: 20px;
    font-size: 15px;
  }

  .park-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .park-facts span {
    /* "WALDGELAENDE" war bei 12px rund 131px breit und passte damit nicht in
       die 110px einer Spalte - das Wort lief in den Trennstrich und in die
       Nachbarspalte. Die Schrift waechst jetzt mit der Bildschirmbreite mit
       und der Text steht mittig unter seiner Zahl. */
    padding: 12px 6px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    font-size: clamp(var(--fs-100), 2.5vw, 12px);
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-align: center;
  }

  .park-facts span:last-child {
    border-right: 0;
  }

  .park-facts strong {
    /* "SEIT 2015" fuellt bei 320px die Spalte bis auf den letzten Pixel aus.
       Die Zahl schrumpft deshalb genauso mit wie ihre Beschriftung. */
    font-size: clamp(13px, 4.2vw, 17px);
  }

  .park-aerial {
    height: 42svh;
    min-height: 280px;
  }

  .park-aerial-label {
    right: 18px;
    bottom: 22px;
    left: 18px;
  }

  .offer-strip {
    display: flex;
    gap: 1px;
    padding: 1px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .offer-strip article {
    flex: 0 0 82vw;
    min-height: 170px;
    padding: 28px 22px;
    scroll-snap-align: start;
  }

  .offer-strip h3 {
    margin: 18px 0 8px;
  }

  .action-film {
    display: none;
  }

  .price-band {
    gap: 26px;
    padding: 48px 18px;
  }

  .price-lines a {
    min-height: 68px;
    gap: var(--space-4);
    font-size: var(--fs-200);
  }

  .rental-band,
  .training-hero,
  .tour-world {
    min-height: 68svh;
  }

  .rental-copy,
  .training-copy,
  .tour-copy {
    right: 18px;
    bottom: 30px;
    left: 18px;
    width: auto;
  }

  .rental-copy > p:not(.section-caption),
  .training-copy > p:not(.section-caption),
  .tour-copy > p:not(.section-caption) {
    margin: 18px 0 22px;
    font-size: var(--fs-400);
  }

  .training-gallery {
    display: none;
  }

  .booking-heading {
    gap: 22px;
    padding: 44px 18px 28px;
  }

  .booking-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    border: 1px solid #ddd;
  }

  .booking-steps li {
    justify-content: center;
    min-width: 0;
    min-height: 46px;
    padding: 0 5px;
    border-right: 1px solid #ddd;
    font-size: var(--fs-200);
  }

  .booking-steps li:last-child {
    border-right: 0;
  }

  .booking-steps li:not(:last-child)::after {
    display: none;
  }

  .side-block {
    padding: 18px 14px 16px;
  }

  .booking-intro {
    padding-bottom: 14px;
  }

  .day-strip {
    padding-bottom: 6px;
  }

  .day-chip {
    min-width: 76px;
    min-height: 68px;
  }

  .booking-experience .gate-stage {
    height: 400px;
    min-height: 400px;
  }

  .booking-experience .bike-row {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--orange) rgba(255, 255, 255, 0.16);
  }

  .booking-experience .bike-choice {
    flex: 0 0 calc(100vw - 48px);
    min-width: 0;
    height: 374px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    scroll-snap-align: center;
  }

  .booking-experience .bike-photo {
    inset: 62px 18px 78px;
  }

  .booking-experience .bike-figure,
  .booking-experience .bike-choice[data-bike] .bike-figure {
    width: 94%;
    height: 230px;
  }

  .booking-experience .bike-caption {
    top: 14px;
    right: 14px;
    left: 14px;
  }

  .booking-experience .bike-caption strong {
    max-width: calc(100% - 74px);
    font-size: 15px;
  }

  .booking-experience .bike-caption small {
    padding: 6px 9px;
    font-size: var(--fs-200);
  }

  .booking-experience .bike-caption small b {
    font-size: var(--fs-400);
  }

  .booking-experience .bike-caption em {
    top: 0;
    right: 0;
    bottom: auto;
    padding: 5px 7px;
    font-size: var(--fs-300);
  }

  .bike-card-stepper {
    right: 14px;
    bottom: 14px;
  }

  .booking-experience .bike-label-rail,
  .booking-experience .quick-book-rail {
    display: none;
  }

  .voucher-world {
    grid-template-columns: minmax(0, 1fr);
  }

  .voucher-copy {
    min-height: 0;
    padding: 52px 18px 44px;
  }

  .voucher-copy > p:not(.section-caption) {
    margin: 20px 0 24px;
    font-size: var(--fs-400);
  }

  .voucher-picker {
    max-width: none;
  }

  .voucher-amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: var(--space-2);
  }

  .voucher-amount span {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 0 8px;
  }

  .voucher-submit {
    width: 100%;
    min-width: 0;
  }

  .voucher-media {
    min-height: 300px;
    max-height: 360px;
  }

  .faq-world {
    gap: var(--space-8);
    padding: 52px 18px;
  }

  .faq-contact {
    margin-top: var(--space-6);
    padding: 18px;
  }

  .faq-world summary {
    min-height: 58px;
    /* Wie am Desktop: das Zeichen sitzt an der Kante, also reicht hier der
       Platz fuer das Zeichen selbst. */
    padding: 18px 26px 18px 0;
    font-size: var(--fs-300);
  }

  .contact-lead {
    min-height: 0;
    padding: 58px 18px;
  }

  .contact-lead h2 {
    font-size: 42px;
  }

  .contact-lead > a {
    margin-top: 26px;
  }

  .footer-photo {
    min-height: 340px;
  }

  .footer-details {
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
    padding: 40px 18px;
  }

  .footer-details > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  .hero-title .line {
    font-size: 2.55rem;
  }

  .hero-trust {
    gap: 10px;
  }

  .mobile-quick-nav a {
    padding: 10px 7px;
  }

  .mobile-quick-nav span {
    font-size: var(--fs-200);
  }

  .booking-experience .bike-choice {
    flex-basis: calc(100vw - 40px);
  }
}

@media (max-width: 900px) and (max-height: 640px) {
  .hero-inner {
    margin-bottom: 84px;
  }

  .hero-eyebrow {
    margin-bottom: var(--space-2);
  }

  .hero-title .line {
    display: inline;
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    line-height: 1;
  }

  .hero-title .line-2 {
    margin-left: 0.18em;
  }

  .hero-lead {
    display: none;
  }

  .hero-trust {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .ambient-video,
  .action-film .ambient-video {
    display: none !important;
  }

  .hero .video-fallback,
  .action-film .video-fallback {
    opacity: 1 !important;
  }
}

/* ===== Startplatz: dreistufiger Ablauf (Auftrag 086) =======================
   Datum -> Startzeit -> Bike. Der Kunde soll nie alle Entscheidungen
   gleichzeitig vor sich haben. Gesteuert ueber [data-flow] am
   #bookingExperience, gesetzt in renderSlots(). */

.booking-experience[data-flow="date"] .gate-stage,
.booking-experience[data-flow="date"] .bike-label-rail,
.booking-experience[data-flow="date"] .quick-book-rail,
.booking-experience[data-flow="time"] .gate-stage,
.booking-experience[data-flow="time"] .bike-label-rail,
.booking-experience[data-flow="time"] .quick-book-rail {
  display: none;
}

.bike-stage-heading {
  display: none;
}

.gate-stage.is-entering {
  animation: gate-stage-arrive var(--dur-slow) cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes gate-stage-arrive {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* Schrittblöcke */
.step-block { border-top: 1px solid var(--line, rgba(255,255,255,.14)); padding-top: 20px; }
.step-block:first-child { border-top: 0; padding-top: 0; }

.step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  font-size: var(--fs-300);
  font-weight: 800;
  background: rgba(127, 127, 127, .22);
  color: inherit;
}

.step-block.is-current .step-badge { background: var(--orange-dark, #c84612); color: #fff; }
/* Das Haekchen eines erledigten Schritts stand mit 1.87:1 auf seinem
   hellgruenen Feld - sichtbar erst, wenn man den ersten Schritt wirklich
   abschliesst, und dann kaum zu erkennen. Der dunklere Ton kommt auf 4.8:1. */
.step-block.is-done .step-badge { background: rgba(53, 194, 107, .18); color: #16733a; }

/* Der zusammengefasste Wert eines erledigten Schritts. */
.step-summary {
  margin-left: auto;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-400);
  opacity: .78;
}

/* Ein noch nicht erreichbarer Schritt bleibt sichtbar, sieht aber nicht aus
   wie eine fertige Auswahl. */
.step-block.is-waiting { opacity: .55; }
.step-hint { margin: 0; font-size: var(--fs-400); opacity: .8; }

/* Ausgebuchte Startzeit: deaktiviert statt umleitend. */
.time-slot[disabled] { cursor: not-allowed; opacity: .45; }
.time-slot[disabled]:hover { transform: none; }

/* Ausgewählt wird zusätzlich zur Farbe benannt - Farbe allein genügt nach
   WCAG 2.2 nicht. */
.time-picked {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-200);
  font-weight: 800;
  letter-spacing: .02em;
}

/* Touch-Ziele: mindestens 44x44 CSS-Pixel (W3C target-size). */
.time-slot, .day-chip { min-height: 56px; }

/* Reduzierte Bewegung: die neuen Schrittblöcke ebenfalls ruhigstellen
   (WCAG 2.2, animation-from-interactions). */
@media (prefers-reduced-motion: reduce) {
  .step-block,
  .step-badge,
  .time-slot,
  .day-chip {
    transition: none !important;
    animation: none !important;
  }
}

/* Letzte responsive Schutzregeln fuer Kalender und Footer. Sie stehen am
   Dateiende, damit aeltere Mobile-Varianten diese Zustände nicht wieder
   ueberschreiben. */
@media (min-width: 901px) and (max-width: 1100px) {
  .quick-book-rail {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .quick-copy {
    flex-wrap: wrap;
    gap: 6px 14px;
  }

  .quick-meta {
    white-space: normal;
  }

  .quick-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 360px) {
  .contact-lead h2 {
    font-size: 38px;
  }

  .footer > * {
    min-width: 0;
  }

  .footer-details {
    grid-template-columns: 1fr;
  }
}

/* --- Ausgewaehltes Bike deutlich zeigen -----------------------------------
   Vorher war das einzige Signal, dass neben dem Plus eine Zahl auftauchte.
   Wer am Handy schnell tippt, sieht das kaum - und tippt dann ein zweites
   Mal, weil er glaubt, es habe nicht funktioniert.

   Jetzt bekommt die Karte einen orangen Rahmen samt Haken, und die Zahl
   macht beim Antippen einen kurzen Ausschlag. Farbe allein reicht nicht:
   der Haken ist auch ohne Farbunterscheidung erkennbar. */
/* Hoehere Spezifitaet als noetig, mit Absicht: mobile.css wird nach dieser
   Datei geladen und setzt dort .booking-experience .bike-choice auf einen
   grauen Rahmen ohne Schatten. Mit gleicher Spezifitaet haette die spaetere
   Datei gewonnen und die Markierung waere unsichtbar geblieben. */
.bike-choice.has-quantity,
.booking-experience .bike-choice.has-quantity {
  position: relative;
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--orange) inset;
}

.bike-choice.has-quantity::after,
.booking-experience .bike-choice.has-quantity::after {
  content: "\2713";
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: var(--fs-400);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

@keyframes emx-mengen-ausschlag {
  0% { transform: scale(1); }
  40% { transform: scale(1.38); }
  100% { transform: scale(1); }
}

.quantity-value.is-bump {
  animation: emx-mengen-ausschlag .22s ease-out;
}

/* Wer Bewegung im System abgeschaltet hat, bekommt sie auch hier nicht -
   die Karte bleibt trotzdem sichtbar markiert. */
@media (prefers-reduced-motion: reduce) {
  .quantity-value.is-bump { animation: none; }
}

/* Der Termin steht einmal ueber der Liste statt hinter jeder Zeile. */
.cart-termin {
  margin: 0 0 10px;
  padding: 7px 11px;
  border-radius: var(--radius);
  background: rgba(255, 85, 24, .1);
  color: var(--orange-dark, #c93c08);
  font-size: var(--fs-300);
  font-weight: 800;
  letter-spacing: .01em;
}

/* Warum das Plus nicht mehr reagiert. Ohne diesen Satz sieht ein totes Plus
   aus wie ein Fehler, und man tippt weiter darauf. */
.bike-grenze {
  margin: 0;
  padding: 0 10px 8px;
  color: var(--orange-dark, #c93c08);
  font-size: var(--fs-100);
  font-weight: 700;
  line-height: 1.3;
}

/* Erklaert, warum auf den Karten 0 steht, obwohl unten Bikes gezaehlt werden:
   die Karten zeigen die gewaehlte Startzeit, die Leiste den ganzen Korb. */
.bike-korbhinweis {
  grid-column: 1 / -1;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--orange);
  background: rgba(255, 85, 24, .1);
  color: #111;
  font-size: var(--fs-300);
  line-height: 1.4;
}

/* ===== Ampel statt Stueckzahl ============================================
   Frueher stand unter jeder Uhrzeit "21 frei". Das war zweierlei Problem:
   es verriet den Bestand, und es half dem Gast nicht - fuer ihn zaehlt nur,
   ob er noch drankommt.

   Jetzt ein Punkt in drei Stufen, einmal darunter erklaert. Die Farbe steht
   nie allein: jede Kachel traegt die Stufe im Vorlesetext, und die Legende
   nennt sie im Klartext. */
.ampel {
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #bdbdbd;
}

.ampel-frei { background: #1f9d4d; }
/* #e8820c kam auf 2,75:1 gegen Weiss und lag damit unter den 3:1, die ein
   farbiges Zeichen braucht. Dieser Ton erreicht 3,54 und bleibt orange. */
.ampel-knapp { background: #cf6f00; }
.ampel-ausgebucht { background: #c62f2f; }
.ampel-pruefung { background: #bdbdbd; }

.time-slot .ampel,
.day-chip .ampel {
  margin-top: 6px;
}

.ampel-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 12px 0 0;
  color: #555;
  font-size: var(--fs-200);
  line-height: 1.3;
}

.ampel-legende span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ampel-legende .ampel {
  width: 10px;
  height: 10px;
}

/* ===== Auftrag 089: "Ausgebucht" quer ueber die Karte ====================
   Vorher stand das Wort im schmalen Preisschild oben rechts. Auf einer 191px
   breiten Handy-Karte ist "AUSGEBUCHT" aber 106px lang und lief damit ueber
   den Modellnamen und die Koerpergroesse. Der Preis bleibt jetzt im Schild,
   der Zustand bekommt ein eigenes Band ueber dem Bild - volle Breite, mittig,
   kann mit nichts kollidieren. Das Bild ist ohnehin schon ausgegraut. */
.bike-choice {
  position: relative;
}

.bike-ausgebucht {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  z-index: 3;
  padding: 7px 6px;
  background: rgba(17, 17, 17, 0.88);
  color: #fff;
  font-size: var(--fs-200);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  /* Der Klick gehoert weiterhin der Karte darunter. */
  pointer-events: none;
}

/* ===== Auftrag 089: belastbare Bedienfarben (Tokens jetzt zentral im ersten :root) ===== */

.logo {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  flex: 0 0 auto;
}

.booking-step-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.booking-step-action:hover,
.booking-step-action:focus-visible {
  color: #111;
}

.booking-step-action:focus-visible {
  outline: 3px solid var(--orange-action);
  outline-offset: 4px;
}

.step-block.is-waiting {
  opacity: 1;
}

.step-block.is-waiting .step-title,
.step-block.is-waiting .step-hint {
  color: #555;
}

.step-block.is-waiting .step-badge {
  color: #555;
  background: #e5e5e5;
}

.step-hint {
  opacity: 1;
  color: #555;
}

.mc-head strong,
.mc-day {
  color: #111;
}

.mc-week span {
  color: #5f5f5f;
  font-size: var(--fs-200);
}

.mc-day.is-off {
  color: #767676;
}

.mc-legend {
  color: #555;
  font-size: var(--fs-200);
}

.mc-nav:hover:not(:disabled),
.mc-day.is-active {
  border-color: var(--orange-action);
  color: #fff;
  background: var(--orange-action);
}

.btn-hero,
.mobile-book-cta:not(.has-items) {
  color: #fff;
  background: linear-gradient(180deg, var(--orange-action), var(--orange-action-hover));
}

.btn-solid,
.voucher-amount input:checked + span,
.quantity-button.is-plus,
.cart-quantity-stepper .quantity-button.is-plus {
  border-color: var(--orange-action);
  color: #fff;
  background: var(--orange-action);
}

.btn-solid:hover,
.btn-solid:focus-visible,
.quantity-button.is-plus:hover:not(:disabled),
.quantity-button.is-plus:focus-visible {
  color: #fff;
  background: var(--orange-action-hover);
}

/* Die orange Markenfarbe kennzeichnet im gesamten Buchungsweg genau die
   primaere Aktion. Schwarze Primaerbuttons wirkten neben den Mengen- und
   Gutscheinaktionen wie ein anderer Bedienmodus. */
#checkoutButton,
#checkoutNext,
#checkoutSubmit,
#checkoutResultClose {
  border-color: var(--orange-action);
  color: #fff;
  background: var(--orange-action);
}

.checkout-privacy-note {
  margin: 8px 0 14px;
  color: #5e6268;
  font-size: 0.9rem;
  line-height: 1.5;
}

.checkout-legal-note {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--orange-action, #c84612);
  background: #f2f2f0;
  color: #25282c;
  font-size: 0.92rem;
  line-height: 1.5;
}

.checkout-privacy-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

#checkoutButton:hover:not(:disabled),
#checkoutButton:focus-visible,
#checkoutNext:hover,
#checkoutNext:focus-visible,
#checkoutSubmit:hover,
#checkoutSubmit:focus-visible,
#checkoutResultClose:hover,
#checkoutResultClose:focus-visible {
  background: var(--orange-action-hover);
}

/* Fuenf Informationsfelder in einem Zweispaltenraster liessen rechts unten
   ein graues, inhaltsloses Feld stehen. Die Abschlussinformation bildet nun
   eine ruhige, vollbreite Schlusszeile. */
.checkout-review section:last-child {
  grid-column: 1 / -1;
}

.cart-termin,
.bike-grenze {
  color: var(--orange-on-light);
}

@media (min-width: 1101px) {
  .booking-experience #slotGrid.has-open-calendar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.72fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 12px 32px;
    align-items: start;
  }

  .booking-experience #slotGrid.has-open-calendar > [data-step="1"] {
    display: contents;
  }

  .booking-experience #slotGrid.has-open-calendar > [data-step="1"] > .step-title,
  .booking-experience #slotGrid.has-open-calendar > [data-step="1"] > .day-strip,
  .booking-experience #slotGrid.has-open-calendar > [data-step="1"] > .date-toggle {
    grid-column: 1;
  }
  .booking-experience #slotGrid.has-open-calendar > [data-step="1"] > .step-title { grid-row: 1; }
  .booking-experience #slotGrid.has-open-calendar > [data-step="1"] > .day-strip { grid-row: 2; }
  .booking-experience #slotGrid.has-open-calendar > [data-step="1"] > .date-toggle { grid-row: 3; }
  .booking-experience #slotGrid.has-open-calendar > [data-step="2"] { grid-column: 1; grid-row: 4; }
  .booking-experience #slotGrid.has-open-calendar > .booking-api-status { grid-column: 1 / -1; }

  .booking-experience #slotGrid.has-open-calendar > [data-step="1"] > .month-cal {
    grid-column: 2;
    grid-row: 1 / span 4;
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding: 20px;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .main-nav-sub {
    width: calc(100vw - 32px);
    gap: var(--space-4);
  }

  .logo img {
    width: 56px;
  }

  .inner-nav {
    gap: var(--space-3);
  }

  .inner-nav ul {
    gap: var(--space-2);
  }

  .inner-nav a {
    font-size: var(--fs-100);
    letter-spacing: .08em;
  }
}

/* Sehr breite, flache Monitore brauchen eine eigene vertikale Dramaturgie.
   Die normale Hero-Typografie ist fuer hohe Desktopfenster gebaut und ragte
   bei 2520 x 631 px unter die feste Navigation. Inhalt und Hauptaktion bleiben
   hier voll sichtbar, ohne den Hintergrund oder die Schrift winzig zu machen. */
@media (min-width: 901px) and (max-height: 700px) {
  .hero-inner {
    width: min(900px, calc(100vw - var(--page-gutter) * 2));
    margin-bottom: var(--space-6);
  }

  .hero-eyebrow {
    margin-bottom: 10px;
    font-size: var(--fs-100);
  }

  .hero-title .line {
    font-size: clamp(3.5rem, 13vh, 6rem);
    line-height: 0.9;
  }

  .hero-lead {
    max-width: 520px;
    margin: 14px 0 18px;
    font-size: var(--fs-500);
    line-height: 1.4;
  }

  .btn-hero {
    min-height: 52px;
    padding: 0 24px;
    font-size: var(--fs-300);
  }

  .hero-trust,
  .hero-scroll {
    display: none;
  }
}

/* Wunsch des Betreibers: "Mitten im Wald. Nur 15 Minuten von Graz." steht
   nur als weisse Schrift auf der Luftaufnahme. Der schwarze Kasten hat den
   Park verdeckt. Ein weicher Schatten haelt die Schrift auf hellen Stellen
   des Fotos lesbar. */
.park-aerial-label {
  padding: 14px 18px;
  border-left: 0;
  background: rgba(11, 11, 11, 0.84);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 18px rgba(0, 0, 0, 0.55);
}

/* Shop-Abschnitt der Startseite: das Hochformat-Foto zeigt Logo und Gesicht
   statt der Beine, wenn es breit beschnitten wird. */
.shop-teaser > img {
  object-position: center 28%;
}

/* Am Handy sortiert das CSS die Startseite um. Die haeufigen Fragen standen
   dort vor Verleih und Enduro - mitten auf der Seite. Wunsch des Betreibers:
   ganz unten. Die doppelte ID gewinnt gegen alle aelteren Reihenfolge-Regeln. */
@media (max-width: 900px) {
}

/* Der Shop-Abschnitt nutzt die Enduro-Vorlage. Deren Hoehe am Handy haengt an
   #tour-Regeln - ohne diese Zeilen haette er dort 0 px Hoehe. */
@media (max-width: 900px) {
  #main #merch {
    display: flex;
    align-items: flex-end;
    min-height: 460px;
    padding: 40px 16px;
  }

  #merch .tour-copy {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
  }

  #merch h2 {
    font-size: 32px;
    line-height: 1.1;
  }
}