/* AUTOMATISCH ERZEUGT - nicht von Hand bearbeiten.
   Quelle: assets/css/styles.css + assets/css/mobile.css
   Neu bauen mit: npm run build:css
   Gilt nur fuer die statischen Inhaltsseiten; index.html und
   startplatz.html laden weiterhin das vollstaendige CSS. */
/* === styles.css (bereinigt) === */
: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. */

/* Inhalts-Grids vertikal zentrieren, damit der gewonnene Vollbild-Platz gefüllt
   wirkt statt Inhalt oben + Leere unten. */

.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). */

#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) {
  /* 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. */
}

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;
}

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;
}

.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;
}

.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;
}

.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;
}

.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);
}

.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 */

/* Foreground vignette + spotlight (premium framing, above the bikes) */

.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%);
}

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

.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-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). */

/* 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. */

/* Soft contact shadow under the wheels */

/* Hover: thin (~1px) white rim along the silhouette, bike lifts <=1.5%. */
/* --gx (sides) > --gy (top) gleicht die bottom-anchored Skalierung aus, sodass
   ringsum ~1px gleichmäßiger Rand entsteht statt oben dick / seitlich unsichtbar. */

/* 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 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; }
  #startplatz { order: 3; }
  #gutschein { order: 4; }
  #shop { order: 5; }
  #park { order: 6; }
  #preise { order: 7; }
  #verleih { order: 8; }

  #park,
  #preise,
  #verleih {
    display: none;
  }

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

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

  /* 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. */

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

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

  .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;
  }
}

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

/* ===== Termin-Auswahl: Tag -> Startplatz (Uhrzeit) ===== */

/* Tag-Chips (nur Betriebstage Do/Fr/Sa) */
.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.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); }

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

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


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

.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;
}

/* 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.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;
}

/* 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.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Galerie: echte Hersteller-/Park-Fotos zum Bike */

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

/* Datenspalte: die wichtigsten Werte, dann Preis + CTA */

/* ungerade Spec-Anzahl: letzte Zelle über beide Spalten (keine leere Lücke) */

/* Name + Preis/Status ruhig unter jedem Bike in der Szene (Briefing: feste,
   ruhige Beschriftung — wird bei Hover klarer, nicht größer). */

/* 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;
}


.bike-choice.is-selected .bike-caption {
  opacity: 1;
}

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

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

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

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

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

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

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

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

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

/* Prominenter Buchungs-Block oben im Panel: Preis + Reservieren sofort sichtbar. */

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

/* 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);
}

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

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

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

.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);
}

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

.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;
  }
}

@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;
  }

  /* Mobile: Detail vollflächig (Briefing), kein Bottom-Sheet mehr */

  .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) */

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

@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 {
  border-radius: 0;
}

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


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


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


.video-toggle.is-paused .video-pause-icon { display: none; }
.video-toggle.is-paused .video-play-icon { display: block; }

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

.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;
}

.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;
}

.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. */

.faq-contact,
.footer {
  --orange-lesbar: var(--orange);
  --grau-text: #a3a3a3;
}


.faq-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 68px;
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
}

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

/* 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. */

/* 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);
}

/* --- 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;
}

.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);
}

.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;
}

@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; }
}

@media (max-width: 900px) {
  :root { --page-gutter: 22px; }
  html { scroll-snap-type: 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; }
  
  .faq-world,
  .footer { grid-template-columns: 1fr; }
  
  .faq-heading h2 { font-size: 43px; }
  .faq-world { gap: 50px; padding: 74px var(--page-gutter); }
  .footer-details { grid-template-columns: 1fr 1fr; padding: 50px var(--page-gutter); }
}

@media (max-width: 560px) {
  
  .faq-heading h2 { font-size: 36px; }
  .footer-details { grid-template-columns: 1fr; }
}

/* ---------- Chapter navigation (Kapitel-zu-Kapitel) ---------- */
.chapter-dot.is-active {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.12);
}

.chapter-dot.is-active .chapter-dot__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Kapitel-Dots bei offenem Buchungs-Detail ausblenden (verdecken sonst den Schließen-Knopf) */

/* 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.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;
}

/* ============================================================
   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) */

/* 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) {
  
  .btn-solid { transition: none; }
}

/* ============================================================
   Scroll-Parallax entfernt (verursachte Ruckeln + Überskalierung). Die
   Regel ist bewusst weg — Medien sitzen ruhig in ihren Rahmen.
   ============================================================ */

/* ===== Phase 0 Fixes (QA) ===== */
/* Datum-Tab Status kleiner */

/* Booking-Bar: Bike-Name nicht umbrechen, Meta voll sichtbar */

/* 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) */

/* ============================================================
   HERO 2.5D – Premium-Erlebnis-Einstieg (überschreibt Alt-Hero)
   ============================================================ */

/* obere Lichtkante der Bühne */



/* Hintergrund-Scrim: unten/links dunkel für Lesbarkeit, oben/rechts offen */

/* Ruhige Mittelgrund-Atmosphäre: festes Licht ohne Maus-Parallax. */

/* Vordergrund: Content */

/* Premium-Buchungsbutton */

/* Der Buchen-Button glänzt periodisch von selbst auf — zieht das Auge zur
   Conversion, ohne zu schreien (kurzer Sweep, lange Pause). */

/* Zweit-CTA dezent */

/* Trust- / Fakten-Strip */

/* Scroll-Cue dezent unten-links unter dem Content nicht – mittig rechts */


/* Mobile */

/* Rechte Kapitel-Navigation entfernt – redundant zur Hauptnavigation, wirkte überlagert/buggy */

/* ===== Startplatz-Prototyp: Front->Side Crossfade (Briefing) ===== */
.detail-stage.is-side .ds-front { opacity: 0; transform: scale(0.99); }
.detail-stage.is-side .ds-side { opacity: 1; transform: none; }

/* 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) {

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

  

}

/* ===== 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. */

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

/* P1: sichtbarer Prozess "01 Termin · 02 Bike · 03 Buchen" */

.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;
}

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

/* P2: Zusammenfassung in der Buchungs-Bar (Anzahl + Gesamtpreis) */

/* P4: Zusicherung am Entscheidungspunkt (im dunklen Detail-Panel) */

/* ===== P5: Monats-Kalender in der Terminwahl ===== */

.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;
}

/* Startplatz v3: echtes EMX-Park-Foto und unveränderte Original-Freisteller.
   Die grossen 3x2-Flächen ersetzen die früheren, winzigen Frontmodelle. */


.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-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.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 .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;
  }
}

/* Startplatz-Schnellbuchung: Kartenflaeche und Mengensteuerung sind getrennte
   Geschwister. So bleiben die Buttons semantisch gueltig und unabhaengig. */

.quantity-button.is-plus {
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--orange);
}

.quantity-button.is-plus:hover:not(:disabled),
.quantity-button.is-plus:focus-visible {
  background: #ff7437;
}

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

/* 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. */

@media (max-width: 900px) {
  :root {
    --page-gutter: clamp(14px, 4vw, 24px);
  }

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

  .mobile-nav {
    width: 44px;
    height: 44px;
  }

  /* Parallaxe und Overscan bleiben auf grossen Bildschirmen erhalten. Auf
     Touch-Geraeten sitzen alle Ebenen exakt im Viewport. */

  /* Auf Zweispalten-Karten waere Name + Groessenlabel + Preis nebeneinander
     zu eng. Der Preis sitzt deshalb klar ueber dem Mengenregler. */

  /* Kein Text unter 12 px auf Telefon und Tablet. */
  
  .section-caption,
  .faq-contact span,
  .footer-details strong {
    font-size: var(--fs-200);
  }

  
  .faq-lead,
  .faq-world details p,
  .footer-details a,
  .footer-details p,
  .footer-legal {
    font-size: var(--fs-400);
  }

  /* Uhrzeiten sind voll sichtbar statt in einer zweiten horizontalen Rail
     versteckt. Die Tagesauswahl darf weiterhin bewusst seitlich scrollen. */

  /* Der Monatskalender wird auf sehr schmalen Geraeten zu einer kompakten,
     viewport-breiten Flaeche. So bleiben alle 7 Spalten mindestens 44 px. */

  /* Alle wichtigen Links und Dialogaktionen bleiben mit dem Daumen sicher
     treffbar; zwischen benachbarten Zielen liegen mindestens 8 px. */
  
  .faq-contact a,
  .footer-details a,
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }

  .faq-contact,
  .footer-details > div {
    gap: var(--space-2);
  }

  .footer-legal {
    gap: 8px 22px;
  }
}

/* Kleine oder quer gehaltene Telefone: Der primäre Buchungsweg bleibt im
   ersten Screen; Zusatzfakten werden zugunsten der Bedienung ausgeblendet. */

/* Die Abnahmekriterien von Auftrag 085 gelten nicht nur fuer Telefone. Auch
   Querformat, Tablet und Desktop behalten lesbare Metadaten und exakte Medien. */

.inner-nav a,
.phone-btn,
.section-caption,
.faq-contact span,
.footer-details strong {
  font-size: var(--fs-200);
}

.inner-nav > ul > li > a {
  justify-content: center;
  min-width: 44px;
}


.faq-contact a,
.footer-details a,
.footer-legal a {
  min-width: 44px;
  min-height: 44px;
}


.faq-contact a,
.footer-details a,
.footer-legal a {
  display: inline-flex;
  align-items: center;
}

.footer-details > div {
  gap: var(--space-2);
}

/* 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;
  }

  .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;
  }

  .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));
  }
}

@media (max-width: 900px) {
  main > section:not(.hero) {
    min-height: 0;
  }

  
  .faq-heading h2 {
    font-size: 34px;
    line-height: 0.98;
  }

  .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;
  }

  .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);
  }

  .footer-details {
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
    padding: 40px 18px;
  }

  .footer-details > div:first-child {
    grid-column: 1 / -1;
  }
}

/* ===== 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(). */

.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.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. */

/* Ein noch nicht erreichbarer Schritt bleibt sichtbar, sieht aber nicht aus
   wie eine fertige Auswahl. */
.step-block.is-waiting { opacity: .55; }

/* Ausgebuchte Startzeit: deaktiviert statt umleitend. */

/* Ausgewählt wird zusätzlich zur Farbe benannt - Farbe allein genügt nach
   WCAG 2.2 nicht. */

/* Touch-Ziele: mindestens 44x44 CSS-Pixel (W3C target-size). */

/* Reduzierte Bewegung: die neuen Schrittblöcke ebenfalls ruhigstellen
   (WCAG 2.2, animation-from-interactions). */

/* Letzte responsive Schutzregeln fuer Kalender und Footer. Sie stehen am
   Dateiende, damit aeltere Mobile-Varianten diese Zustände nicht wieder
   ueberschreiben. */

@media (max-width: 360px) {

  .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. */

/* Warum das Plus nicht mehr reagiert. Ohne diesen Satz sieht ein totes Plus
   aus wie ein Fehler, und man tippt weiter darauf. */

/* Erklaert, warum auf den Karten 0 steht, obwohl unten Bikes gezaehlt werden:
   die Karten zeigen die gewaehlte Startzeit, die Leiste den ganzen Korb. */

/* ===== 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. */
/* #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. */

/* ===== 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. */

/* ===== 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;
}

.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;
}

.mc-day.is-off {
  color: #767676;
}


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

.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. */

/* Fuenf Informationsfelder in einem Zweispaltenraster liessen rechts unten
   ein graues, inhaltsloses Feld stehen. Die Abschlussinformation bildet nun
   eine ruhige, vollbreite Schlusszeile. */

@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. */

/* 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. */

/* Shop-Abschnitt der Startseite: das Hochformat-Foto zeigt Logo und Gesicht
   statt der Beine, wenn es breit beschnitten wird. */

/* 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. */


/* === mobile.css (bereinigt) === */

.mobile-header-book { display: none; }

@media (max-width: 900px) {

  /* Keep visual, keyboard and reading order identical to the HTML. */
  #main { display: block; }

  #park,
  #preise,
  #verleih { display: none; }
  
  .booking-experience .bike-choice.is-selected {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--orange);
  }
  
  .booking-experience .bike-choice.is-selected .bike-figure {
    transform: none;
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.22));
  }
  /* 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. */
  .bike-choice.has-quantity .bike-card-stepper {
    width: 132px;
    border: 1px solid #ddd;
    background: #fff;
  }
  .bike-card-stepper .quantity-button.is-plus {
    color: #fff;
    background: var(--orange);
  }
  .faq-world {
    padding-top: 38px;
    padding-bottom: 38px;
  }
  .faq-heading h2 { font-size: 30px; }
  .faq-lead { display: block; }
  .faq-contact {
    display: grid;
    padding: 18px;
  }
  .faq-grid details:nth-child(n + 4) { display: block; }
}

/* Mobile Experience 087: klare Orientierung ohne Inhalte zu verstecken. */
@media (max-width: 900px) {
  body { padding-bottom: 0; }
  body:has(.mobile-book-cta.has-items) {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  #park,
  #preise {
    display: block;
  }

  #verleih {
    display: flex;
    align-items: flex-end;
    min-height: 420px;
    padding: 40px 16px;
  }

  #verleih h2 {
    font-size: 32px;
    line-height: 1.1;
  }

  .mobile-header-book {
    position: absolute;
    top: 14px;
    right: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 5px;
    color: #fff;
    background: var(--orange-dark);
    font-size: var(--fs-200);
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .mobile-book-cta.has-items {
    display: flex;
  }
  .mobile-book-cta.has-items.is-at-startplatz {
    display: none;
  }
  .mobile-quick-nav a.is-primary {
    border-color: var(--orange-action);
    color: #fff;
    background: var(--orange-action);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }
  .mobile-quick-nav a.is-primary span {
    color: rgba(255, 255, 255, 0.68);
  }

  /* 093: kompakter Startplatz-Verweis statt vollem Buchungsflow - dieselbe
     verkleinerte Optik wie die anderen Home-Abschnitte auf dem Telefon. */
}

@media (max-width: 350px) {
  .mobile-header-book {
    min-width: 74px;
    padding: 0 10px;
  }
}

/* ===== Auftrag 086: nichts abschneiden, auf jedem Geraet lesbar ===========
   Diese Datei wird nach styles.css geladen und hat deshalb das letzte Wort.
   Bewusst keine !important-Spirale, sondern dieselbe Spezifitaet wie die
   Regel, die korrigiert wird. */

/* Ein Produktname darf nie abgeschnitten werden. "KTM Freeride E" wurde bei
   320-375px zu "KTM Freerid..." - der Gast konnte das Bike nicht mehr
   eindeutig erkennen. Statt Ellipse: umbrechen. */

/* Unter 380px reicht der Platz nicht fuer zwei Bike-Karten nebeneinander,
   ohne dass Name, Koerpergroesse und Preis gedraengt wirken. Eine Spalte ist
   dort ehrlicher als zwei zu enge. */

/* Die Zusammenfassung der eigenen Auswahl ("Fr 28.08. · 09:00 Uhr · Nur noch
   1 frei") wurde auf 84px zusammengedrückt und mit Auslassungspunkten
   abgeschnitten - ausgerechnet die Zeile, an der der Gast prüft, ob er das
   Richtige gewählt hat. Sie darf umbrechen und bekommt den nötigen Platz. */


/* Solange die Bike-Auswahl noch nicht dran ist, hat der Startplatz wenig
   Inhalt. Die auf volle Bildschirmhoehe ausgelegte Sektion liess darunter
   ueber 500px Leerraum stehen - auf dem Desktop sah es aus, als waere die
   Seite kaputt. Die Hoehe richtet sich jetzt nach dem Inhalt und waechst
   erst mit, wenn die Bikes erscheinen. */

/* Bei offenem Dialog steht der Hintergrund still. Sonst scrollt die Seite
   hinter dem Warenkorb weg, und nach dem Schliessen ist man woanders. */
html.has-open-dialog,
body.has-open-dialog {
  overflow: hidden;
  touch-action: none;
}

/* ===== Reduzierte Bewegung: lueckenlos ==================================
   Es gibt bereits mehrere gezielte Regeln in styles.css. Die decken aber nur
   ab, woran jemand gedacht hat - jede neue Animation faellt wieder durch.
   Diese Regel greift zuletzt und fuer alles: wer im Betriebssystem
   "Bewegung reduzieren" eingestellt hat, bekommt keine.

   Bewusst nicht auf 0s: eine Restdauer von 1ms laesst Zustandswechsel
   weiterhin sauber ausloesen (transitionend-Ereignisse), ohne dass man etwas
   sieht. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}

/* Störungshinweis im Startplatz: bleibt stehen, solange die Verfügbarkeit
   nicht abrufbar ist, und bietet einen echten zweiten Versuch an. */

/* Der Kalender ist die Nebenoption. Vorher stand er als grosses umrandetes
   Feld ueber Schritt 1 und war damit das auffaelligste Element im ganzen
   Buchungsbereich - obwohl die meisten Gaeste einen der naechsten Tage
   nehmen. Jetzt: ruhiger Textknopf unter den Tageskacheln. */

/* Der Kalenderknopf traegt einen kleinen Abstand zu den Tageskacheln. */

/* Der Pfeil gehoert neben den Text, nicht an den rechten Rand - das stammte
   noch aus der Zeit, als der Knopf ein breites Feld war. */

/* On small screens the month picker belongs to the document flow. As a
   floating desktop popover it covered the quick dates and nearby links. */

@media (max-width: 900px) {

  /* Auf dem Telefon uebernimmt nach der ersten Bike-Auswahl der feste
     Kopfknopf den Abschluss. Dadurch bleibt die Aktion sichtbar, ohne Karten
     oder Mengenregler am unteren Rand zu ueberdecken. */
  .booking-experience .quick-book-rail.has-cart {
    display: none;
  }

  body:has(.mobile-cart-pill.has-items) .mobile-header-book {
    display: none;
  }

  .mobile-cart-pill.has-items {
    position: absolute;
    top: 14px;
    right: 72px;
    left: auto;
    display: flex;
    width: auto;
    min-width: 120px;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 12px;
    border: 0;
    border-radius: 2px;
    color: #fff;
    background: var(--orange-action);
    font-size: var(--fs-200);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-cart-pill.has-items::before {
    content: "Warenkorb";
  }

  .mobile-cart-pill.has-items span {
    display: grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    color: #111;
    background: #fff;
    font-size: var(--fs-100);
  }
}

@media (max-width: 900px) {
  body:has(.mobile-book-cta.has-items.is-at-startplatz) {
    padding-bottom: 0;
  }
}

/* Das Buchungsfenster hat einen eigenen scrollbaren Inhaltsbereich. Die
   Schrittknopfe bleiben darunter sichtbar, liegen aber nie ueber Formular-
   feldern. Das ist vor allem auf 320px breiten Telefonen entscheidend. */
@media (max-width: 700px) {

  .checkout-panel.is-active {
    min-width: 0;
    min-height: 0;
    padding: 0 2px 16px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Bei offenem Mobilmenue steht der Hintergrund still - sonst scrollt die
   Seite darunter weg und man landet nach dem Schliessen woanders. */
html.has-open-menu,
body.has-open-menu {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Der gewählte Gutscheinbetrag war nur an der orangen Fläche erkennbar.
   Nach WCAG 2.2 darf Farbe nie das einzige Merkmal sein - wer Farben schlecht
   unterscheidet, sieht sonst nicht, was ausgewählt ist. Ein Häkchen kommt dazu. */
.voucher-amount input:checked + span::before {
  content: "✓";
  margin-right: 6px;
  font-weight: 900;
}

.voucher-amount input:checked + span {
  box-shadow: inset 0 0 0 2px #fff;
}

/* ===== Startplatz auf Desktop: eine Spalte statt Restraster ==============
   Die Seitenleiste war ein Zwei-Spalten-Raster (schmale Beschriftungsspalte +
   breiter Inhalt). Seit die alte Beschriftungsspalte weg ist, landete der
   ganze Schrittbereich in der 207px schmalen Spalte - Titel, Tageskacheln und
   Kalenderknopf wurden auf Briefmarkenbreite gequetscht.

   Die Schritte tragen ihre Nummer jetzt selbst, eine eigene Beschriftungs-
   spalte braucht es nicht mehr. */

/* Ein Schritt ist immer eine Spalte: Titel oben, Inhalt darunter. Vorher
   stellte eine Altregel .picker-block auf Zeile - dadurch standen Titel und
   Kacheln nebeneinander und beide zu schmal. */

/* Desktop-Startplatz: Der Terminablauf nutzt die verfuegbare Flaeche. Ist der
   Monatskalender offen, bildet er rechts eine eigene Spalte; geschlossen
   bekommen Datum und Startzeiten die volle Zeilenbreite. */
@media (min-width: 1101px) {

  
  .booking-experience .mc-day.is-off {
    font-size: 15px;
  }

  .footer-details {
    grid-template-columns: minmax(250px, 1.2fr) repeat(3, minmax(210px, 1fr));
    gap: clamp(54px, 6vw, 112px);
    min-height: 330px;
    padding: 72px var(--page-gutter) 58px;
  }

  .footer-details > div {
    gap: 10px;
  }

  .footer-details strong {
    margin-bottom: 14px;
    font-size: var(--fs-400);
    letter-spacing: 0.13em;
  }

  .footer-details a,
  .footer-details p {
    font-size: 17px;
    line-height: 1.65;
  }

  .footer-logo {
    width: 152px;
    margin-bottom: 22px;
  }

  .footer-legal {
    margin-top: 0;
    padding: 22px var(--page-gutter) 26px;
    font-size: 15px;
  }
}

/* ===== Auftrag 088: Luft am Handy dort wegnehmen, wo nichts steht =========
   Zwischen dem Ende der Terminwahl und der Ueberschrift "Der Park" standen
   138px ohne jeden Inhalt: 64px Abstand unter dem Buchungsteil plus 40px
   ueber dem Parkteil. Am Telefon ist das eine halbe Bildschirmhoehe fuer
   nichts. Der Abschnittswechsel bleibt deutlich, faellt aber kuerzer aus. */

/* ===== Auftrag 090: Rueckmeldung, Karten und die Buchungsleiste ===========
   Alles vier betrifft nur das Telefon. */
@media (max-width: 900px) {
  /* 1. Der Hinweis faehrt von oben herein, unter der Kopfzeile. Unten sitzen
        Mengenwaehler und Buchungsleiste - dort verdeckte er genau das, was
        man gerade bedient. */

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

  /* 2. Das Haekchen der gewaehlten Karte sass auf dem Modellnamen - aus
        "HVR 50.4" wurde "✓R 50.4". Die Beschriftung rueckt daneben, sobald
        das Zeichen da ist. */
  .bike-choice.has-quantity .bike-caption {
    padding-left: 28px;
  }

  /* 3. Die Karten waren blanke weisse Flaechen, in denen das Bike schwebte.
        Ein weicher Lichtkreis darunter gibt ihm einen Boden, ohne dass ein
        Rahmen oder eine Linie dazukommt. */

  /* 4. Die Buchungsleiste schwebt am unteren Rand, solange ihr eigener Platz
        noch nicht im Bild ist, und setzt sich dort ab, sobald man ihn
        erreicht. Genau das leistet sticky mit bottom: 0 - ohne Skript und
        ohne Sprung beim Andocken. */
  /* 4. Die Buchungsleiste schwebt am unteren Rand, solange ihr eigener Platz
        noch nicht im Bild ist, und setzt sich dort ab, sobald man ihn
        erreicht. Den Zustand schaltet der Beobachter in app.js. */
  .booking-experience .quick-book-rail.is-fixed {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    z-index: 72;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.14);
  }

  /* Der Platz, den die schwebende Leiste im Fluss hinterlaesst. Ohne ihn
     springt die Seite beim Umschalten und die letzte Kartenreihe liegt
     unter der Leiste - genau daran ist der erste Anlauf gescheitert. */
  .booking-experience.has-fixed-rail {
    padding-bottom: var(--quick-rail-h, 88px);
  }
}

/* ===== Auftrag 091: der Startbereich soll beim Scrollen stillstehen =======
   Der Startbereich stand auf 100dvh - der DYNAMISCHEN Fensterhoehe. Am
   Telefon aendert die sich staendig: faehrt beim Scrollen die Adressleiste
   ein, wird das Fenster um 60 bis 100px hoeher, der Startbereich waechst mit
   und das Video darin wird von object-fit: cover mitvergroessert. Das sieht
   aus, als zoome die Seite von selbst hinein - und beim Auftauchen der
   Leiste springt sie wieder heraus.

   svh ist die KLEINE Fensterhoehe: der Wert, den das Fenster bei
   ausgefahrener Adressleiste hat. Er aendert sich nie, also steht das Bild
   still. Sichtbar wird beim Einfahren der Leiste unten ein Streifen des
   naechsten Abschnitts - das ist gewollt und zeigt, dass es weitergeht.

   Dieselbe Spezifitaet wie die Regel in styles.css; diese Datei wird spaeter
   geladen und hat damit das letzte Wort. */
@media (max-width: 900px) {

  /* Inhaltsabschnitte wachsen mit ihrem Inhalt. Eine erzwungene Bildschirmhoehe
     erzeugte auf Gutschein, FAQ und Footer mehrere hundert Pixel Leerraum. */
  main > section:not(.hero),
  main > footer {
    min-height: 0;
  }

  /* Der eigentliche Punkt: das Bild darf ueberhaupt nicht mehr an der Hoehe
     des Startbereichs haengen. Bisher lag es mit inset: 0 genau darin, also
     wurde es bei JEDER Hoehenaenderung von object-fit: cover neu skaliert -
     egal in welcher Einheit die Hoehe steht.
     lvh ist die GROSSE Fensterhoehe, also der Wert bei eingefahrener
     Adressleiste. Das Bild ist damit immer so gross wie im aeussersten Fall
     und wird nie nachskaliert; was darueber hinausgeht, schneidet der
     Startbereich ab. */

  /* Ein dauerhaftes will-change haelt das bildschirmfuellende Video als
     eigene Ebene im Speicher, auch wenn sich nichts aendert. Am Telefon
     kostet das mehr, als es bringt. */

  /* Weichzeichner hinter durchsichtigen Flaechen sind auf dem Telefon teuer:
     sie werden bei jedem Bild neu berechnet. Der Mengenwaehler steckt auf
     jeder der sechs Bike-Karten - beim Scrollen durch das Raster war das
     sechsmal Weichzeichnen pro Bild. */
}

/* Auftrag 089: Der Kalender passt in jede schmale Breite und die
   Abschlussleiste verdeckt keine Mengenregler mehr. */
@media (max-width: 900px) {

  
  .month-cal .mc-day.is-off {
    min-width: 0;
    min-height: 44px;
  }

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

  .booking-experience .quick-book-rail.is-fixed {
    position: relative;
    inset: auto;
    width: 100%;
    z-index: auto;
    box-shadow: none;
  }

  .booking-experience.has-fixed-rail {
    padding-bottom: 0;
  }

  .inner-nav {
    background: #030303;
  }

  .main-nav,
  .main-nav.is-scrolled {
    background: #030303;
  }

  /* Die Reihenfolge fuer die lange Startseite darf Unterseiten nicht
     umsortieren. Auf startplatz.html muss die Auswahl direkt nach dem kurzen
     Seitenkopf kommen und nicht erst nach allen Erklaertexten. */
  body.unterseite #main {
    display: block;
  }
}

/* Im niedrigen Querformat darf der Hero nicht hinter der 72px-Navigation
   beginnen. Die wichtigsten Inhalte bleiben sichtbar: Aussage, Buchung und
   die zwei entscheidenden Eckdaten. */

/* Drei Striche allein versteht nicht jeder - gerade wer selten im Netz
   unterwegs ist, erkennt darin kein Menue. Das Wort steht deshalb daneben.
   Der Knopf wird dafuer breiter; "Buchen" und der Warenkorb ruecken nach
   links, damit nichts uebereinander liegt. */
@media (max-width: 900px) {
  .mobile-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 44px;
    padding: 0 12px;
  }

  .mobile-nav::after {
    content: "Menü";
    color: #fff;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: var(--fs-300);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-header-book,
  .mobile-cart-pill.has-items {
    right: 122px;
  }
}

/* ===== Ruckeln beim Scrollen am Telefon (Galaxy S25 Ultra, 14.09.2026) =====
   Seit html statt body scrollt, blenden Android-Browser beim Scrollen
   Adress- und Werkzeugleiste stufenweise aus. Jede Stufe aendert die
   dynamische Fensterhoehe (dvh). Zwei Dinge liefen dabei bei jedem Bild mit:

   1. Der Actionfilm war 100dvh hoch: er wuchs mit, alles darunter wurde neu
      angeordnet und sein Video neu skaliert. svh ist die kleine, feste
      Fensterhoehe - sie aendert sich beim Scrollen nie.
   2. Die Lichtschicht ueber dem Startvideo wurde per mix-blend-mode (screen,
      multiply) mit JEDEM Videobild neu verrechnet. Normale Deckkraft sieht
      bei diesen dunklen, weichen Verlaeufen praktisch gleich aus und kostet
      nichts. */

/* Keep user-enlarged text inside its content column. */
main,
.footer,
.footer-details {
  overflow-wrap: anywhere;
}

.home-proof > *,
.home-proof-reviews > *,
.faq-world > *,
.footer-details > * {
  min-width: 0;
}

.contact-lead h2,
.footer-details strong,
.footer-details a,
.footer-details p {
  max-width: 100%;
}

main .btn,
main .section-link {
  max-width: 100%;
  white-space: normal;
}

.preis-karte header {
  flex-wrap: wrap;
}

@media (min-width: 901px) {
  .main-nav .inner-nav,
  .main-nav .inner-nav > ul {
    min-width: 0;
  }

  .main-nav .inner-nav > ul {
    flex-wrap: wrap;
    row-gap: 0;
  }

  #shop.shop-teaser,
  .tour-world.shop-teaser {
    display: flex;
    align-items: flex-end;
    padding: 72px var(--page-gutter);
  }

  .shop-teaser .tour-copy {
    position: relative;
    inset: auto;
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  #training .training-hero {
    display: flex;
    align-items: flex-end;
    padding: 40px 16px;
  }

  #training .training-copy {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
  }

  .hero-actions > a {
    min-width: 0;
    flex-wrap: wrap;
  }

  .park-aerial {
    display: grid;
    align-items: end;
    justify-items: end;
    height: auto;
    min-height: 260px;
    max-height: none;
    padding: 30px 18px;
  }

  .park-aerial > picture,
  .park-aerial > img {
    position: absolute;
    inset: 0;
  }

  .park-aerial .park-aerial-label {
    position: relative;
    inset: auto;
    max-width: 100%;
  }
}