.mobile-booking-title,
.mobile-header-book { display: none; }

@media (max-width: 900px) {
  body.cart-open,
  body.checkout-open,
  body.detail-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .cart-drawer,
  .checkout-dialog {
    overscroll-behavior: contain;
  }

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

  #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: block;
    max-width: 33ch;
    margin-top: 15px;
    overflow: visible;
    line-height: 1.45;
    -webkit-line-clamp: unset;
  }
  .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: 22px 16px 14px;
  }
  .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-detail { display: none !important; }
  .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 {
    flex: none;
    height: 238px;
    min-height: 238px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 7px;
    color: #111;
    background: #fff;
    box-shadow: none;
    scroll-snap-align: 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 {
    /* Das Schild hat einen dunklen Untergrund (76% Schwarz). Mit #111 stand
       hier Schwarz auf fast Schwarz - am Telefon war der Preis praktisch
       unsichtbar. Weiss ergibt darauf rund 11:1. */
    top: 0;
    right: 0;
    padding: 3px 5px;
    color: #fff;
    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 { display: block; }
  .faq-contact {
    display: grid;
    padding: 18px;
  }
  .faq-grid details:nth-child(n + 4) { display: block; }

  .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-close,
  .checkout-actions .btn { min-height: 44px !important; }
  .checkout-fields.two-cols {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .checkout-fields input { min-height: 50px; }
}

@media (max-width: 360px) {
  .hero-title .line { font-size: 2.35rem; }

  .booking-experience .bike-choice {
    height: 224px;
    min-height: 224px;
  }
  .booking-experience .bike-photo {
    right: 5px;
    left: 5px;
  }
}

/* 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,
  #training {
    display: block;
  }

  .action-film {
    display: none;
  }

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

  #verleih .rental-copy,
  #tour .tour-copy {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
  }

  #verleih h2,
  #tour 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 {
    display: none;
  }
  .mobile-book-cta.has-items {
    display: flex;
  }
  .mobile-book-cta.has-items.is-at-startplatz {
    display: none;
  }

  .hero {
    min-height: min(720px, 88svh);
  }
  .hero-inner {
    margin-bottom: 26px;
  }
  .hero-actions {
    display: flex;
    margin-top: 20px;
  }
  .hero-actions .btn-hero {
    display: inline-flex;
    width: min(100%, 330px);
    min-height: 52px;
  }
  .hero-actions .btn-hero-ghost {
    display: none;
  }
  .hero-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
  }
  .hero-trust li:nth-child(1),
  .hero-trust li:nth-child(4) {
    display: none;
  }

  .mobile-quick-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 20px 14px 24px;
    color: #111;
    background: #f7f7f5;
    border-bottom: 1px solid #ddd;
  }
  .mobile-hub-heading {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    gap: 3px;
    margin-bottom: 5px;
  }
  .mobile-hub-heading span {
    display: block;
    color: var(--orange-dark);
    font-size: var(--fs-200);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .mobile-hub-heading strong {
    font-size: 21px;
    line-height: 1.1;
  }
  .mobile-quick-nav a {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    min-height: 48px;
    padding: 12px 12px 13px;
    border: 1px solid #e4e4e0;
    border-radius: 8px;
    color: #111;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  .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 strong {
    font-size: var(--fs-300);
    line-height: 1.2;
    text-transform: none;
  }
  .mobile-quick-nav a span {
    display: block;
    margin-top: 5px;
    overflow: visible;
    color: var(--grau-text);
    font-size: var(--fs-200);
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
  }
  .mobile-quick-nav a.is-primary span {
    color: #fff;
  }

  .park-intro {
    gap: 20px;
    padding: 40px 16px 24px;
  }
  .park-intro h2 {
    font-size: 31px;
  }
  .park-copy > p {
    margin-bottom: 18px;
    font-size: var(--fs-500);
  }
  .park-aerial {
    height: 260px;
    min-height: 260px;
  }
  .offer-strip {
    display: none;
  }

  .price-band {
    gap: 20px;
    padding: 38px 16px;
  }
  .price-band h2 {
    font-size: 31px;
  }
  .price-lines a {
    min-height: 62px;
  }

  .training-hero {
    min-height: 500px;
  }
  .training-copy {
    right: 16px;
    bottom: 24px;
    left: 16px;
  }
  .training-copy h2 {
    font-size: 31px;
  }

  /* 093: kompakter Startplatz-Verweis statt vollem Buchungsflow - dieselbe
     verkleinerte Optik wie die anderen Home-Abschnitte auf dem Telefon. */
  #startplatz.booking-teaser {
    padding: 38px 16px;
  }
  .booking-teaser-copy h2 {
    font-size: 31px;
  }
  .booking-teaser-copy > p {
    font-size: var(--fs-500);
  }
  .booking-teaser-facts {
    gap: 18px 26px;
    margin: 24px 0 26px;
  }
}

@media (max-width: 350px) {
  .mobile-header-book {
    min-width: 74px;
    padding: 0 10px;
  }
  .mobile-quick-nav {
    gap: var(--space-2);
    padding-right: 10px;
    padding-left: 10px;
  }
  .mobile-quick-nav a {
    padding: 12px 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. */
.booking-experience .bike-caption strong {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.2;
  hyphens: manual;
}

/* 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. */
@media (max-width: 379px) {
  .booking-experience .bike-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 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. */
.detail-booking-info {
  flex: 1 1 auto;
  min-width: 0;
}

.detail-booking-info span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}


/* 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. */
.booking-section[data-flow="date"],
.booking-section[data-flow="time"] {
  min-height: 0;
  padding-bottom: var(--space-16);
}

/* 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. */
.booking-notice {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 20px;
  padding: 14px 16px;
  border-left: 3px solid var(--orange, #ff5b16);
  border-radius: 6px;
  background: rgba(255, 91, 22, 0.09);
  font-size: var(--fs-400);
  line-height: 1.45;
}

.booking-notice strong { font-size: 15px; }

.booking-retry {
  justify-self: start;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: var(--fs-400);
  font-weight: 700;
  cursor: pointer;
}

/* 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. */
.step-block .date-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #d7d7d7;
  border-radius: 6px;
  background: #fafafa;
  color: inherit;
  font-size: var(--fs-400);
  font-weight: 700;
  text-decoration: none;
  opacity: 1;
  cursor: pointer;
}

.step-block .date-toggle:hover,
.step-block .date-toggle:focus-visible {
  border-color: var(--orange);
  box-shadow: none;
}

.step-block .date-toggle[aria-expanded="true"] {
  border-color: var(--orange);
  color: #111;
  background: #fff;
  box-shadow: none;
}

/* Der Kalenderknopf traegt einen kleinen Abstand zu den Tageskacheln. */
.step-block .date-toggle {
  margin-top: 10px;
}

/* Der Pfeil gehoert neben den Text, nicht an den rechten Rand - das stammte
   noch aus der Zeit, als der Knopf ein breites Feld war. */
.step-block .date-toggle i {
  margin-left: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  font-style: normal;
  font-size: 0;
  transform: rotate(45deg);
}

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

/* 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) {
  .month-cal {
    position: static;
    left: auto;
    width: min(380px, 100vw);
    max-width: none;
    margin-right: 0;
    margin-left: calc((100% - min(380px, 100vw)) / 2);
    margin-top: var(--space-3);
    padding: 6px;
    overflow: hidden;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  }

  .month-cal .mc-day {
    min-width: 44px;
  }

  .month-cal .mc-week,
  .month-cal .mc-grid {
    grid-template-columns: repeat(7, minmax(44px, 1fr));
  }

  .month-cal .mc-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
  }

  .month-cal .mc-legend span {
    justify-content: center;
    font-size: var(--fs-100);
  }
}

@media (max-width: 360px) {
  .month-cal {
    padding-right: 0;
    padding-left: 0;
    border-right: 0;
    border-left: 0;
  }

  .slot-grid {
    overflow: visible;
  }
}

@media (max-width: 900px) {
  .booking-experience .bike-stage-heading {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 4px 4px 2px;
    color: #111;
  }

  .bike-stage-heading > span {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--orange-dark);
    font-size: var(--fs-300);
    font-weight: 900;
  }

  .bike-stage-heading div {
    display: grid;
    gap: 1px;
  }

  .bike-stage-heading strong {
    font-size: var(--fs-500);
    line-height: 1.2;
  }

  .bike-stage-heading small {
    color: var(--grau-text);
    font-size: var(--fs-200);
  }

  .booking-experience .gate-stage {
    scroll-margin-top: 82px;
  }

  /* 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-dialog {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
  }

  #checkoutForm {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

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

  .checkout-actions {
    position: static;
    flex-wrap: wrap;
    z-index: auto;
    flex: 0 0 auto;
    margin: 0 -18px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #dedede;
    background: #fff;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08);
  }

  .checkout-actions .btn {
    flex-basis: 14rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .checkout-review,
  .checkout-review section,
  .checkout-review strong,
  .checkout-consent,
  .checkout-consent span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .checkout-result {
    min-height: 0;
    overflow-y: auto;
  }
}

@media (max-width: 300px) {
  .checkout-actions {
    gap: var(--space-2);
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .checkout-actions .btn {
    padding-right: var(--space-2);
    padding-left: var(--space-2);
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    line-height: 1.2;
    white-space: normal;
  }
}

/* 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. */
.booking-experience .side-block {
  display: block;
}

.booking-experience #slotGrid {
  width: 100%;
  max-width: 720px;
}

/* 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. */
.booking-experience .step-block {
  display: block;
}

.booking-experience .step-title {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.booking-experience .day-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-2);
  width: 100%;
}

.booking-experience .time-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  width: 100%;
}

@media (max-width: 560px) {
  .booking-experience .day-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .booking-experience .time-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 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 .side-block {
    width: min(1560px, calc(100vw - (var(--page-gutter) * 2)));
    padding: 22px 0 24px;
  }

  .booking-experience #slotGrid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(440px, 0.9fr);
    gap: 24px 32px;
    width: 100%;
    max-width: none;
    align-items: start;
  }

  .booking-experience #slotGrid > .booking-notice,
  .booking-experience #slotGrid > .step-block {
    grid-column: 1 / -1;
  }

  .booking-experience .day-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .booking-experience .time-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .booking-experience .day-chip,
  .booking-experience .time-slot {
    min-height: 80px;
    padding: 12px 16px;
  }

  .booking-experience .day-wd,
  .booking-experience .time-state {
    font-size: var(--fs-200);
  }

  .booking-experience .day-num,
  .booking-experience .time-slot strong {
    font-size: 18px;
  }

  .booking-experience .date-toggle {
    min-height: 58px;
    padding: 0 18px;
    font-size: var(--fs-500);
  }

  .booking-experience .mc-head strong {
    font-size: 18px;
  }

  .booking-experience .mc-week span {
    font-size: var(--fs-300);
  }

  .booking-experience .mc-day,
  .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. */
@media (max-width: 900px) {
  .booking-section[data-flow="date"],
  .booking-section[data-flow="time"] {
    padding-bottom: 36px;
  }

  .park-intro {
    padding-top: var(--space-8);
  }
}

/* ===== 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 {
    top: calc(var(--header-h, 72px) + 10px);
    bottom: auto;
    border-radius: 10px;
    transform: translate(-50%, -14px);
  }

  .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. */
  .booking-experience .bike-choice {
    background:
      radial-gradient(120% 62% at 50% 78%, rgba(17, 17, 17, 0.09) 0%, rgba(17, 17, 17, 0) 62%),
      linear-gradient(180deg, #fff 0%, #fbfbfa 100%);
  }

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

  .quick-rail-anchor {
    height: 1px;
  }
}

/* ===== 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) {
  main > section.hero {
    min-height: 100svh;
  }

  /* 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. */
  .hero {
    overflow: hidden;
  }

  .hero .hero-media {
    top: 0;
    bottom: auto;
    height: 100%;
    height: 100lvh;
  }

  /* 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. */
  .hero .ambient-video {
    will-change: auto;
  }

  /* 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. */
  .quantity-stepper,
  .btn-hero-ghost {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Auftrag 089: Der Kalender passt in jede schmale Breite und die
   Abschlussleiste verdeckt keine Mengenregler mehr. */
@media (max-width: 900px) {
  .month-cal {
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin-right: 0;
    margin-left: 0;
    padding: 12px 8px;
    overflow: visible;
  }

  .month-cal .mc-week,
  .month-cal .mc-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

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

  .month-cal .mc-legend span {
    font-size: var(--fs-200);
  }

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

  body.unterseite #startplatz.booking-section .booking-heading {
    display: none;
  }
}

/* Im niedrigen Querformat darf der Hero nicht hinter der 72px-Navigation
   beginnen. Die wichtigsten Inhalte bleiben sichtbar: Aussage, Buchung und
   die zwei entscheidenden Eckdaten. */
@media (max-width: 900px) and (max-height: 640px) {
  .hero .hero-title {
    max-width: calc(100% - 64px);
  }
  main > section.hero {
    min-height: 100svh;
  }

  .hero-inner {
    width: calc(100vw - 36px);
    margin: 0 18px 12px;
    padding-top: calc(var(--header-h) + 24px);
  }

  .hero-eyebrow {
    display: block;
    font-size: var(--fs-200);
    line-height: 1.4;
  }

  .hero-lead {
    display: block;
    max-width: 48ch;
    margin: 12px 0;
    overflow: visible;
    font-size: var(--fs-500);
    line-height: 1.45;
    -webkit-line-clamp: unset;
  }

  .hero-title .line {
    display: inline;
    font-size: clamp(1.55rem, 4vw, 2.1rem);
    line-height: 1.05;
  }

  .hero-title .line-2 {
    margin-left: 0.18em;
  }

  .hero-actions {
    margin-top: var(--space-3);
  }

  .hero-actions .btn-hero {
    min-height: 46px;
  }

  .hero-trust {
    gap: var(--space-2);
    margin-top: 10px;
  }

  .hero-trust strong {
    font-size: var(--fs-400);
  }

  .hero-trust span {
    font-size: var(--fs-100);
  }
}

/* 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. */
@media (max-width: 900px) {
  .action-film {
    height: 100svh;
  }

  .hero-atmos,
  .hero-atmos::after {
    mix-blend-mode: normal;
  }

  .hero-atmos {
    opacity: 0.8;
  }

  .hero-overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 75%, rgba(0, 0, 0, 0.2) 100%);
  }
}

/* Mobile home: let the park footage lead; details follow below the hero. */
@media (max-width: 900px) {
  #home .hero-lead,
  #home .hero-trust,
  #home .hero-scroll {
    display: none;
  }

  #home .hero-eyebrow {
    display: block;
    max-width: 100%;
    margin: 0 0 12px;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  #home .hero-inner {
    width: calc(100% - 36px);
    margin: 0 18px 32px;
    padding-top: calc(var(--header-h, 72px) + 76px);
  }

  #home .hero-title {
    max-width: 100%;
  }

  #home .hero-title .line {
    display: block;
    margin-left: 0;
    font-size: 38px;
    line-height: 1.05;
  }

  #home .hero-actions {
    margin-top: 20px;
  }

  #home .hero-overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, .82) 0px, rgba(0, 0, 0, .82) 240px, rgba(0, 0, 0, .15) 360px);
  }
}

@media (max-width: 360px) {
  #home .hero-title .line {
    font-size: 32px;
  }
}

/* Reserve the initial date-picker space, not the completed or no-script view. */
@media (min-width: 901px) {
  #bookingExperience:not(:has([data-booking-noscript])) #slotGrid:empty {
    min-height: 320px;
  }
}

.seiten-kopf > .booking-lead {
  max-width: 680px;
}

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