/*
 * Shared visual layer for the booking tool.
 * The modal and /de|en/buchen use the same component and therefore the same
 * surfaces, controls and step states. Only the surrounding container differs.
 */
.booking-dialog,
.booking-page-embed {
  color: #173027;
  background: #f2ead9;
  box-shadow: 0 28px 80px rgba(12, 32, 22, .28), 0 0 0 1px rgba(99, 78, 38, .2);
}

.booking-dialog-panel,
.booking-page-embed .booking-dialog-panel {
  background: #f7f1e5;
}

.booking-dialog-header .eyebrow,
.booking-page-embed .booking-dialog-header .eyebrow {
  color: #80601e;
}

.booking-dialog-header h2,
.booking-page-embed .booking-dialog-header h2 {
  color: #173027 !important;
}

.booking-dialog-close,
.booking-page-embed .booking-dialog-close {
  border-color: #c7b689;
  color: #173027;
  background: #fffdf8;
  opacity: 1;
}

.booking-dialog-cancel {
  min-height: 44px;
  margin-left: auto;
  padding: 9px 14px;
  border: 1px solid #9b8d6c;
  border-radius: 7px;
  color: #173027;
  background: #fff;
  font-weight: 750;
  touch-action: manipulation;
}

.booking-dialog .booking-quiz,
.booking-page-embed .booking-quiz,
.booking-dialog .booking-success,
.booking-page-embed .booking-success {
  border: 1px solid #d8cba9;
  color: #173027;
  background: #fffdf8;
  box-shadow: 0 10px 30px rgba(31, 54, 42, .07);
}

.booking-dialog .booking-success h3,
.booking-page-embed .booking-success h3,
.booking-dialog .booking-stepper-current,
.booking-page-embed .booking-stepper-current {
  color: #173027;
}

.booking-dialog .booking-success p,
.booking-page-embed .booking-success p,
.booking-dialog .booking-quiz .text-muted,
.booking-page-embed .booking-quiz .text-muted,
.booking-dialog .booking-stepper > p,
.booking-page-embed .booking-stepper > p {
  color: #617168;
}

.booking-dialog .booking-quiz .text-espresso,
.booking-dialog .booking-quiz .text-text,
.booking-page-embed .booking-quiz .text-espresso,
.booking-page-embed .booking-quiz .text-text {
  color: #173027;
}

.booking-form-decor {
  display: none !important;
}

section:has(.booking-page-embed) [style*="dekor-ast-blaetter"] {
  display: none !important;
}

.booking-quiz {
  border: 1px solid #d8cba9 !important;
  color: #173027 !important;
  background: #fffdf8 !important;
  box-shadow: 0 10px 30px rgba(31, 54, 42, .07) !important;
}

.booking-quiz .text-espresso,
.booking-quiz .text-text,
.booking-stepper-current,
.booking-stepper-current strong {
  color: #173027 !important;
}

.booking-quiz .text-muted,
.booking-stepper > p {
  color: #617168 !important;
}

.booking-quiz .text-gold,
.booking-stepper-current span {
  color: #80601e !important;
}

.booking-quiz .booking-step-actions {
  border-top-color: #ddd2b8 !important;
  background: #fffdf8 !important;
}

.booking-stepper {
  padding: 11px 12px 9px;
  border: 1px solid #e0d6bd;
  border-radius: 9px;
  background: #faf6ed;
}

.booking-stepper-item {
  color: #68776e;
}

.booking-stepper-item[data-state="active"],
.booking-stepper-item[data-state="complete"] {
  color: #173027;
}

.booking-stepper-node {
  border-color: #b9ad8d;
  color: #405147;
  background: #eee8da;
  box-shadow: none;
  opacity: 1;
}

.booking-stepper-item[data-state="active"] .booking-stepper-node,
.booking-stepper-item[aria-current="step"] .booking-stepper-node {
  border-color: #173a2a;
  color: #fff;
  background: #173a2a;
  box-shadow: 0 0 0 3px rgba(23, 58, 42, .13);
}

.booking-stepper-item[data-state="complete"] .booking-stepper-node {
  border-color: #667d3e;
  color: #fff;
  background: #667d3e;
}

.booking-stepper-line {
  background: #cfc5ac;
}

.booking-stepper-current span {
  color: #80601e;
}

.booking-dialog .booking-step-actions,
.booking-page-embed .booking-step-actions {
  border-top-color: #ddd2b8;
  background: #fffdf8;
}

.booking-dialog .booking-quiz .inp,
.booking-page-embed .booking-quiz .inp,
.booking-dialog .date-range-inline,
.booking-page-embed .date-range-inline,
.booking-dialog .people-counter,
.booking-page-embed .people-counter {
  border-color: #cfc3a5;
  color: #173027;
  background: #fff;
  box-shadow: none;
  opacity: 1;
}

.booking-dialog .vehicle-choice,
.booking-page-embed .vehicle-choice {
  border-color: #d4cfc2;
  color: #173027;
  background: #fff;
  opacity: 1;
}

.booking-dialog .vehicle-choice:hover,
.booking-page-embed .vehicle-choice:hover {
  border-color: #667d3e;
  background: #f8faF4;
}

.booking-dialog .vehicle-choice:has(input:checked),
.booking-page-embed .vehicle-choice:has(input:checked) {
  border-color: #556b2f;
  color: #173027;
  background: #edf2e5;
  box-shadow: 0 0 0 3px rgba(85, 107, 47, .13);
}

.booking-dialog .vehicle-choice small,
.booking-page-embed .vehicle-choice small {
  color: #617168;
}

.booking-dialog .vehicle-choice.is-unavailable,
.booking-page-embed .vehicle-choice.is-unavailable {
  color: #68756e;
  background: #ece9e1;
  opacity: 1;
}

.booking-dialog .btn-primary,
.booking-page-embed .btn-primary,
.booking-dialog .btn-olive,
.booking-page-embed .btn-olive {
  min-height: 44px;
  border: 1px solid #173a2a;
  color: #fff;
  background: #173a2a;
  opacity: 1;
  box-shadow: 0 5px 14px rgba(23, 58, 42, .16);
}

.booking-dialog .btn-secondary,
.booking-page-embed .btn-secondary {
  min-height: 44px;
  border: 1px solid #9b8d6c;
  color: #173027;
  background: #fff;
  opacity: 1;
}

.booking-step-content {
  will-change: transform, opacity;
}

@media (min-width: 900px) {
  .container-7xl .grid:has(> .booking-page-embed) {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 1100px);
    margin-inline: auto;
    gap: 28px;
  }
  .booking-page-embed {
    width: 100%;
  }
}

.booking-calendar .rdp-button_previous,
.booking-calendar .rdp-button_next {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
}

.booking-calendar .rdp-caption_label,
.booking-calendar .rdp-month_caption {
  color: #173027 !important;
  font-weight: 800 !important;
}

.booking-calendar .rdp-weekday {
  color: #52645a !important;
  font-weight: 750 !important;
}

.booking-calendar .rdp-chevron {
  fill: #667d3e !important;
}

.booking-calendar .rdp-months {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
  max-width: none !important;
  touch-action: pan-y;
}

.booking-calendar .rdp-month {
  min-width: 0;
}

.booking-calendar .rdp-month_grid {
  width: 100%;
  table-layout: fixed;
}

.booking-calendar .rdp-day,
.booking-calendar .rdp-day_button {
  min-width: 44px;
  min-height: 44px;
}

.booking-calendar .rdp-day_button {
  width: 100% !important;
  height: 44px !important;
  border: 1px solid #d5cbb5 !important;
  border-radius: 8px !important;
  color: #173027 !important;
  background: #fff !important;
  touch-action: manipulation;
}

.booking-calendar .rdp-day:not(.rdp-disabled) .rdp-day_button:hover {
  border-color: #667d3e !important;
  background: #f0f5eb !important;
}

.booking-calendar .rdp-selected .rdp-day_button,
.booking-calendar .rdp-range_start .rdp-day_button,
.booking-calendar .rdp-range_end .rdp-day_button {
  border-color: #173a2a !important;
  color: #fff !important;
  background: #173a2a !important;
}

.booking-calendar .rdp-range_middle .rdp-day_button {
  border-color: #b5c8ae !important;
  color: #173027 !important;
  background: #dfead9 !important;
}

.booking-calendar .rdp-disabled .rdp-day_button {
  border-color: #d8d8d3 !important;
  color: #8a918d !important;
  background: #e9e9e5 !important;
  opacity: 1 !important;
}

.booking-calendar .mcd-fully-booked .rdp-day_button {
  cursor: not-allowed !important;
  border: 2px solid #b54b43 !important;
  color: #7d241e !important;
  background:
    repeating-linear-gradient(135deg, #fff0ee 0 5px, #f5d4d0 5px 10px) !important;
  text-decoration: line-through;
  font-weight: 850;
}

.booking-calendar .mcd-range-impossible .rdp-day_button {
  cursor: not-allowed !important;
  border: 2px solid #b66e35 !important;
  color: #724018 !important;
  background: repeating-linear-gradient(135deg, #fff6e9 0 5px, #f3dfc2 5px 10px) !important;
}

.booking-calendar .rdp-outside .rdp-day_button {
  color: #54635b !important;
  background: #f4f1e8 !important;
}

.booking-calendar .rdp-outside.mcd-next-month:not(.rdp-disabled) .rdp-day_button {
  border: 1px dashed #79a189 !important;
  color: #173027 !important;
  background: #edf6ef !important;
  opacity: 1 !important;
}

.booking-calendar .rdp-outside.mcd-previous-month:not(.rdp-disabled) .rdp-day_button {
  border-color: #d3cab6 !important;
  color: #68756e !important;
  background: #f4f1e8 !important;
}

.booking-calendar .rdp-today:not(.rdp-selected) .rdp-day_button {
  border: 2px solid #d1a24d !important;
  color: #173027 !important;
  background: #fffaf0 !important;
}

.booking-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 10px 2px 2px;
  color: #617168;
  font-size: .72rem;
}

.booking-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.booking-calendar-legend i {
  width: 12px;
  height: 12px;
  border: 1px solid #d5cbb5;
  border-radius: 4px;
  background: #fff;
}

.booking-calendar-legend .is-selected i {
  border-color: #173a2a;
  background: #173a2a;
}

.booking-calendar-legend .is-disabled i {
  border-color: #e4dfd3;
  background: #efede7;
}

.booking-calendar-legend .is-today i {
  border: 2px solid #d1a24d;
  background: #fffaf0;
}

.booking-calendar-legend .is-next i {
  border: 1px dashed #79a189;
  background: #edf6ef;
}

.booking-calendar-legend .is-booked i {
  border: 2px solid #b54b43;
  background: repeating-linear-gradient(135deg, #fff0ee 0 3px, #f5d4d0 3px 6px);
}

.booking-calendar-legend .is-range i {
  border: 2px solid #b66e35;
  background: repeating-linear-gradient(135deg, #fff6e9 0 3px, #f3dfc2 3px 6px);
}

.booking-calendar-legend .is-past i {
  border-color: #d8d8d3;
  background: #e9e9e5;
}

.booking-quiz .people-counter button,
.booking-quiz .people-counter input {
  min-width: 44px !important;
  min-height: 44px !important;
}

.booking-quiz[data-current-step="0"] .booking-step-content > .grid {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 14px !important;
}

.booking-step-zero-controls {
  order: -1;
  display: grid !important;
  grid-template-columns: minmax(170px, 1fr) auto;
  align-items: end !important;
  gap: 10px !important;
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd2b8;
  border-radius: 9px;
  background: #faf6ed;
}

dialog.booking-dialog .booking-step-zero-controls {
  grid-template-columns: minmax(170px, 1fr) auto auto;
}

.booking-step-zero-controls .booking-step-zero-next,
.booking-step-zero-controls .booking-dialog-cancel {
  min-width: 120px;
  margin: 0;
}

.booking-wishes .booking-optional-note {
  border: 1px solid #dfc98f !important;
  border-left: 4px solid #d1a24d !important;
  background: #fff8e7 !important;
  color: #173027 !important;
  opacity: 1 !important;
}

.booking-wishes .booking-optional-note span,
.booking-wishes .booking-optional-note strong {
  color: #6f5018 !important;
  opacity: 1 !important;
}

.booking-wishes .booking-optional-note p {
  color: #465c51 !important;
  opacity: 1 !important;
}

.booking-calendar-swipe-hint {
  display: none;
  margin: 8px 2px 0;
  color: #52645a;
  font-size: .8rem;
  font-weight: 650;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .booking-stepper-item[aria-current="step"] .booking-stepper-node {
    animation: mcd-step-arrive .28s cubic-bezier(.2, .8, .2, 1);
  }
}

@keyframes mcd-step-arrive {
  from { transform: scale(.84); }
  to { transform: scale(1); }
}

@media (max-width: 640px) {
  dialog.booking-dialog {
    width: min(96vw, 420px) !important;
    max-width: none !important;
    max-height: 96dvh !important;
    margin: auto !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  dialog.booking-dialog .booking-dialog-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    padding-block: 10px;
    background: #f7f1e5;
  }
  dialog.booking-dialog .booking-dialog-close {
    grid-column: 2;
    grid-row: 1;
  }
  .booking-quiz {
    padding-inline: 4px !important;
  }
  .booking-dialog .date-range-inline,
  .booking-page-embed .date-range-inline {
    padding-inline: 0 !important;
  }
  .booking-stepper {
    padding: 7px 6px 5px;
  }
  .booking-dialog-cancel {
    padding-inline: 10px;
    font-size: .78rem;
  }
  .booking-step-zero-controls,
  dialog.booking-dialog .booking-step-zero-controls {
    grid-template-columns: 1fr 1.25fr;
    padding: 10px;
  }
  .booking-step-zero-controls .people-field {
    grid-column: 1 / -1;
  }
  .booking-page-embed .booking-step-zero-controls .booking-step-zero-next {
    grid-column: 1 / -1;
    width: 100%;
  }
  .booking-step-zero-controls .booking-step-zero-next,
  .booking-step-zero-controls .booking-dialog-cancel {
    width: 100%;
    min-width: 0;
    min-height: 46px;
  }
  .booking-calendar .rdp-month_grid {
    width: 100%;
    table-layout: fixed;
  }
  .booking-calendar .rdp-months {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .booking-calendar .rdp-day,
  .booking-calendar .rdp-day_button {
    width: 100%;
    min-width: 0;
  }
  .booking-calendar .rdp-day_button {
    height: 44px !important;
    min-height: 44px;
  }
  .booking-calendar-legend {
    justify-content: center;
    font-size: .68rem;
  }
  .booking-calendar-swipe-hint {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
 * Der Dialog bekommt genau eine Scrollflaeche.
 *
 * Vorher war der Dialog in der Hoehe begrenzt, waehrend Panel und Quiz auf
 * "overflow: clip" standen. Der Schrittinhalt war deutlich hoeher als der
 * Dialog und wurde deshalb unten hart abgeschnitten, ohne dass sich irgendwo
 * scrollen liess. Das galt auf jeder Bildschirmgroesse, sobald das Fenster
 * niedriger war als das Formular.
 *
 * Jetzt ist der Dialog eine Flex-Spalte: Kopf und Aktionen bleiben stehen,
 * gescrollt wird ausschliesslich der Schrittinhalt.
 * ------------------------------------------------------------------------- */
dialog.booking-dialog[open] {
  display: flex !important;
  flex-direction: column;
  height: auto;
  max-height: min(94dvh, 100dvh - 24px) !important;
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden !important;
  overscroll-behavior: contain;
}

.booking-dialog .booking-dialog-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.booking-dialog .booking-dialog-header {
  flex: 0 0 auto;
}

.booking-dialog .booking-quiz {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden !important;
}

.booking-dialog .booking-stepper,
.booking-dialog .mcd-step-hint,
.booking-dialog .mcd-sold-out {
  flex: 0 0 auto;
}

/* Die einzige Scrollflaeche des Dialogs.
 * Wichtig ist die Buehne, nicht der Schrittinhalt: ".booking-step-stage" ist
 * das Element mit "overflow: clip", das die Schritte uebereinanderlegt und
 * damit alles abgeschnitten hat. */
.booking-dialog .booking-step-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.booking-dialog .booking-step-content {
  min-height: 0;
}

/* Weiter/Abbrechen bleiben in Schritt 1 immer sichtbar. */
.booking-dialog .booking-quiz[data-current-step="0"] .booking-step-zero-controls {
  position: sticky;
  top: 0;
  z-index: 6;
  margin-bottom: 2px;
  box-shadow: 0 6px 12px -8px rgba(23, 48, 39, .45);
}

.booking-dialog .booking-step-actions {
  position: sticky;
  bottom: 0;
  z-index: 6;
  flex: 0 0 auto;
  box-shadow: 0 -6px 14px -10px rgba(23, 48, 39, .5);
}

/* Die Erfolgsansicht scrollt in sich selbst. */
.booking-dialog .booking-success {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* --- Kompakte Fassung fuer schmale Displays ------------------------------- */
@media (max-width: 640px) {
  dialog.booking-dialog[open] {
    max-height: min(94dvh, 100dvh - 12px) !important;
  }

  dialog.booking-dialog .booking-dialog-header {
    position: static;
    padding-block: 8px;
  }

  dialog.booking-dialog .booking-dialog-header h2 {
    font-size: 1.32rem !important;
    line-height: 1.15 !important;
  }

  .booking-dialog .booking-step-stage {
    padding-inline: 2px;
  }

  .booking-dialog .booking-step-actions {
    padding-block: 10px;
  }

  /* Ein Monat statt zwei: spart rund 370 px Hoehe. */
  .booking-calendar .rdp-month + .rdp-month {
    display: none;
  }

  .booking-calendar .rdp-months {
    gap: 8px;
  }

  .booking-calendar .rdp-day_button {
    height: 42px !important;
    min-height: 42px;
  }

  .booking-stepper {
    padding: 6px 6px 4px;
  }

  .booking-quiz[data-current-step="0"] .booking-step-content > .grid {
    gap: 10px !important;
  }
}

/* Auf niedrigen Fenstern (Laptop, Querformat) ebenfalls nur ein Monat, sonst
 * passt der Kalender dort nie ohne Scrollen ins Bild. */
@media (min-width: 641px) and (max-height: 780px) {
  .booking-dialog .booking-calendar .rdp-month + .rdp-month {
    display: none;
  }
  .booking-dialog .booking-calendar .rdp-months {
    grid-template-columns: minmax(0, 1fr);
    max-width: 360px;
    margin-inline: auto;
  }
}

/* ---------------------------------------------------------------------------
 * Benutzerfuehrung: Hinweis je Schritt und Ablauf nach dem Absenden.
 * ------------------------------------------------------------------------- */
.mcd-step-hint {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid #e2d8bf;
  border-left: 3px solid #b8912f;
  border-radius: 8px;
  color: #4c5a51;
  background: #fbf7ec;
  font-size: .86rem;
  line-height: 1.45;
}

.mcd-next-steps {
  margin: 22px auto 4px;
  max-width: 34rem;
  padding: 16px 16px 14px;
  border: 1px solid #ddd2b8;
  border-radius: 12px;
  background: #faf7ef;
  text-align: left;
}

.mcd-next-steps h4 {
  margin: 0 0 12px;
  color: #173027;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.mcd-next-steps ol {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.mcd-next-steps li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.mcd-next-steps-number {
  display: flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fffdf8;
  background: #173a2a;
  font-size: .8rem;
  font-weight: 800;
}

.mcd-next-steps-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mcd-next-steps-body strong {
  color: #173027;
  font-size: .95rem;
  font-weight: 750;
  line-height: 1.3;
}

.mcd-next-steps-body > span {
  color: #5b6a61;
  font-size: .87rem;
  line-height: 1.45;
}

.mcd-next-steps-body strong + span strong,
.mcd-next-steps-body > span strong {
  color: #173027;
  font-weight: 750;
}

.mcd-next-steps-warning {
  margin: 13px 0 0;
  padding: 9px 11px;
  border-radius: 8px;
  color: #7a3129;
  background: #f7e9e6;
  font-size: .83rem;
  line-height: 1.45;
}

/* Die Erfolgsansicht wird durch den Ablauf deutlich laenger als ein
 * Handy-Display. Sie bekommt darum eine eigene Scrollflaeche. */
@media (max-width: 640px) {
  .booking-dialog .booking-success {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px !important;
  }
  .mcd-next-steps {
    margin-top: 18px;
    padding: 14px 13px 12px;
  }
  .mcd-step-hint {
    margin-bottom: 9px;
    padding: 8px 10px;
    font-size: .82rem;
  }
}

/* ---------------------------------------------------------------------------
 * Ausgebucht: konkrete Aussage statt nur "belegt".
 * ------------------------------------------------------------------------- */
.mcd-sold-out {
  margin: 0 0 14px;
  padding: 14px 15px 12px;
  border: 1px solid #e3c9c4;
  border-left: 4px solid #a43d34;
  border-radius: 10px;
  background: #fcf3f1;
  text-align: left;
}

.mcd-sold-out h4 {
  margin: 0 0 6px;
  color: #7a3129;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
}

.mcd-sold-out p {
  margin: 0;
  color: #5b4a46;
  font-size: .88rem;
  line-height: 1.45;
}

.mcd-sold-out ul {
  display: grid;
  gap: 7px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}

.mcd-sold-out li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: baseline;
  padding: 8px 10px;
  border: 1px solid #ecd9d5;
  border-radius: 8px;
  background: #fffdfc;
}

.mcd-sold-out li strong {
  color: #173027;
  font-size: .89rem;
  font-weight: 750;
}

.mcd-sold-out li span {
  color: #6d5b56;
  font-size: .85rem;
}

.mcd-sold-out-both {
  margin-top: 11px !important;
  padding: 9px 11px;
  border-radius: 8px;
  color: #173a2a !important;
  background: #eef3e8;
  font-weight: 650;
}

.mcd-sold-out-both strong {
  color: #173a2a;
  font-weight: 800;
}

.mcd-sold-out-hint {
  margin-top: 10px !important;
  color: #6d5b56 !important;
  font-size: .84rem !important;
}

/* Auf niedrigen Fenstern zaehlt jede Zeile: Kopfbereich und Hinweise werden
 * schlanker, damit der Kalender mehr Platz bekommt. */
@media (max-height: 780px) {
  .booking-dialog .booking-dialog-header {
    padding-block: 6px;
  }
  .booking-dialog .booking-dialog-header h2 {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
  }
  .booking-dialog .booking-stepper {
    padding: 6px 8px 5px;
  }
  .booking-dialog .mcd-step-hint {
    margin-bottom: 8px;
    padding: 6px 10px;
    font-size: .8rem;
    line-height: 1.35;
  }
  .booking-dialog .booking-step-zero-controls {
    padding: 8px 10px;
  }
}

/* ---------------------------------------------------------------------------
 * Lesbarkeit.
 *
 * Das kompilierte Formular stammt aus einem dunklen Entwurf. Auf den hellen
 * Flaechen blieben mehrere Texte nahezu unsichtbar. Gemessene Kontraste vor
 * dieser Korrektur:
 *   Personenzahl (Eingabefeld)   1.0 : 1   (weiss auf weiss)
 *   Plus/Minus-Schaltflaechen    1.5 : 1
 *   aktives Schritt-Label        1.4 : 1
 *   inaktive Schritt-Labels      4.4 : 1
 * Ziel ist mindestens 4.5 : 1.
 * ------------------------------------------------------------------------- */
.booking-quiz .people-counter input,
.booking-page-embed .people-counter input,
.booking-dialog .people-counter input {
  color: #173027 !important;
  background: #fff !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  text-align: center;
  opacity: 1 !important;
  -webkit-text-fill-color: #173027;
}

.booking-quiz .people-counter-decrease,
.booking-quiz .people-counter-increase,
.booking-page-embed .people-counter-decrease,
.booking-page-embed .people-counter-increase {
  border: 1px solid #cfc3a5 !important;
  border-radius: 8px;
  color: #173a2a !important;
  background: #f4efe2 !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

.booking-quiz .people-counter-decrease:hover,
.booking-quiz .people-counter-increase:hover,
.booking-page-embed .people-counter-decrease:hover,
.booking-page-embed .people-counter-increase:hover {
  border-color: #667d3e !important;
  background: #ecf1e3 !important;
}

.booking-stepper-item[data-state="active"] .booking-stepper-label,
.booking-stepper-item[aria-current="step"] .booking-stepper-label {
  color: #7a5a12 !important;
  font-weight: 800 !important;
}

.booking-stepper-label {
  color: #4d5c53 !important;
}

.booking-stepper-item[data-state="complete"] .booking-stepper-label {
  color: #3d5340 !important;
}

/* Vergangene und gesperrte Tage bleiben erkennbar gedaempft, aber lesbar. */
.booking-calendar .rdp-day_button:disabled,
.booking-calendar .rdp-disabled .rdp-day_button {
  color: #59665f !important;
  opacity: 1 !important;
}

/* Alle Eingaben im Formular: 16px verhindert zusaetzlich den Auto-Zoom,
 * mit dem iOS beim Antippen kleinerer Felder hineinspringt. */
.booking-quiz input,
.booking-quiz textarea,
.booking-quiz select,
.booking-page-embed input,
.booking-page-embed textarea,
.booking-page-embed select {
  color: #173027 !important;
  font-size: max(16px, 1rem) !important;
  -webkit-text-fill-color: #173027;
}

.booking-quiz input::placeholder,
.booking-quiz textarea::placeholder,
.booking-page-embed input::placeholder,
.booking-page-embed textarea::placeholder {
  color: #78857d !important;
  -webkit-text-fill-color: #78857d;
  opacity: 1;
}

.booking-quiz label,
.booking-page-embed label {
  color: #173027;
}

/* ---------------------------------------------------------------------------
 * Kompakter Kopfbereich: ein Schritt, eine Frage.
 *
 * Vorher standen uebereinander: Schrittleiste mit Beschriftungen, Ueberschrift
 * mit Zaehler, ein Einleitungssatz und ein Hinweiskasten. Zusammen rund 190 px,
 * bevor der Kalender ueberhaupt anfing. Der Einleitungssatz entfaellt, die
 * Schrittleiste wird zur schlanken Punktleiste.
 * ------------------------------------------------------------------------- */
.booking-dialog .booking-stepper > p:not([role]) {
  display: none;
}

.booking-dialog .booking-stepper {
  padding: 8px 10px 7px;
}

.booking-dialog .booking-stepper-track {
  gap: 0;
}

.booking-dialog .booking-stepper-node {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px;
  min-height: 26px;
  font-size: .78rem !important;
}

.booking-dialog .booking-stepper-label {
  font-size: .68rem !important;
  line-height: 1.2 !important;
}

.booking-dialog .booking-stepper-current {
  margin-top: 6px;
}

.booking-dialog .booking-stepper-current strong {
  font-size: 1.06rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Der Block mit Personenzahl und Weiter darf nicht so viel Hoehe belegen. */
.booking-dialog .booking-step-zero-controls {
  padding: 9px 10px !important;
  gap: 8px !important;
}

/* Kalender: weniger Luft, damit er ohne Scrollen ins Bild passt. */
.booking-dialog .booking-calendar .rdp-month_caption {
  min-height: 0 !important;
  padding-block: 2px !important;
}

.booking-dialog .booking-calendar .rdp-weekday {
  padding-block: 1px !important;
  font-size: .72rem !important;
}

.booking-dialog .booking-calendar .rdp-months {
  gap: 6px;
}

/* Auf niedrigen Fenstern zusaetzlich flachere Tagesfelder. Dort wird mit der
 * Maus bedient, die 44-px-Regel gilt weiter fuer Touchgeraete. */
@media (min-width: 641px) and (max-height: 820px) {
  .booking-dialog .booking-calendar .rdp-day_button {
    height: 36px !important;
    min-height: 36px !important;
  }
  .booking-dialog .booking-stepper-label {
    display: none !important;
  }
  .booking-dialog .booking-stepper-node {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    min-height: 22px;
    font-size: .72rem !important;
  }
}

/* Letzte Feinjustierung, damit Schritt 1 auch mit zwei Monaten ohne Scrollen
 * ins Popup passt. */
@media (min-width: 641px) {
  .booking-dialog .booking-calendar .rdp-day_button {
    height: 40px !important;
    min-height: 40px !important;
  }
}

.booking-dialog .booking-quiz[data-current-step="0"] .booking-step-content > .grid {
  gap: 9px !important;
}

.booking-dialog .booking-calendar .rdp-month_grid {
  border-spacing: 0 1px;
}

/* Handys und niedrige Fenster: jede Zeile zaehlt. */
@media (max-height: 900px) {
  .booking-dialog .booking-quiz {
    padding-block: 12px !important;
  }
  .booking-dialog .booking-dialog-header {
    padding-block: 4px;
  }
  .booking-dialog .booking-dialog-header h2 {
    font-size: 1.2rem !important;
  }
  .booking-dialog .booking-dialog-header .eyebrow {
    font-size: .7rem !important;
  }
  .booking-dialog .booking-stepper {
    padding: 6px 8px 5px;
  }
  .booking-dialog .booking-stepper-current {
    margin-top: 4px;
  }
  .booking-dialog .booking-calendar .rdp-month_caption {
    height: auto !important;
    min-height: 30px !important;
  }
  .booking-dialog .booking-calendar .rdp-button_previous,
  .booking-dialog .booking-calendar .rdp-button_next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    min-height: 34px;
  }
}

@media (min-width: 641px) and (max-height: 720px) {
  .booking-dialog .booking-calendar .rdp-day_button {
    height: 32px !important;
    min-height: 32px !important;
  }
  .booking-dialog .booking-step-zero-controls {
    padding: 7px 9px !important;
  }
}

/* Auf dem Handy flachere Tagesfelder. Die Zellen bleiben ueber die volle
 * Spaltenbreite antippbar, die Trefferflaeche ist also weiterhin gross. */
@media (max-width: 640px) {
  .booking-dialog .booking-calendar .rdp-day_button {
    height: 38px !important;
    min-height: 38px !important;
  }
  .booking-dialog .booking-step-zero-controls {
    padding: 8px 9px !important;
  }
}

/* Auf dem Handy ist die Feldbeschriftung "Anreise – Abreise" doppelt gemoppelt:
 * Die Schrittfrage lautet bereits "Wann moechtest du reisen?". Ausserdem wird
 * die Legende einzeilig. Zusammen rund 45 px, die der Kalender bekommt. */
@media (max-width: 640px) {
  .booking-dialog .booking-step-zero-controls {
    row-gap: 6px !important;
  }
  .booking-dialog .booking-step-zero-controls .people-field > span,
  .booking-dialog .booking-step-zero-controls .people-field > label {
    font-size: .78rem;
  }
  .booking-dialog .booking-calendar-legend {
    gap: 4px 9px;
    margin-top: 6px;
    font-size: .64rem;
  }
  .booking-dialog .booking-calendar-swipe-hint {
    margin-top: 4px;
    font-size: .68rem;
  }
  .booking-dialog .people-counter button,
  .booking-dialog .people-counter input {
    min-height: 40px !important;
    height: 40px !important;
  }
}

/* Der Wischhinweis entfaellt im Popup: die Pfeile am Monatskopf sind sichtbar,
 * das Wischen funktioniert unveraendert weiter. Damit passt Schritt 1 auf dem
 * Handy vollstaendig ohne Scrollen. */
@media (max-width: 640px) {
  .booking-dialog .booking-calendar-swipe-hint {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * Kundenkalender: gruen oder rot, sonst nichts.
 *
 * Gruen  = mindestens ein Fahrzeug ist an diesem Tag verfuegbar, Tag waehlbar.
 * Rot    = kein Fahrzeug frei, Zeitraum nicht moeglich, oder Tag liegt in der
 *          Vergangenheit. In jedem dieser Faelle ist der Tag nicht waehlbar.
 * Die Legende entfaellt, weil zwei Zustaende keine Erklaerung brauchen.
 * ------------------------------------------------------------------------- */
.booking-calendar-legend,
.booking-calendar-swipe-hint {
  display: none !important;
}

/* Verfuegbar */
.booking-calendar .rdp-day:not(.rdp-disabled):not(.rdp-outside) .rdp-day_button {
  border-color: #a9c79a !important;
  color: #14351f !important;
  background: #e8f3e0 !important;
  font-weight: 700 !important;
}

.booking-calendar .rdp-day:not(.rdp-disabled):not(.rdp-outside) .rdp-day_button:hover {
  border-color: #4f7a3c !important;
  background: #d6ead0 !important;
}

/* Nicht verfuegbar: ausgebucht, Zeitraum unmoeglich, vergangen, gesperrt */
.booking-calendar .rdp-day.rdp-disabled .rdp-day_button,
.booking-calendar .rdp-day .rdp-day_button:disabled,
.booking-calendar .mcd-fully-booked .rdp-day_button,
.booking-calendar .mcd-range-impossible .rdp-day_button {
  border-color: #e0b4ac !important;
  color: #8d3f34 !important;
  background: #fbe9e5 !important;
  font-weight: 600 !important;
  cursor: not-allowed;
}

/* Tage ausserhalb des Monats bleiben neutral, sie gehoeren nicht zur Auswahl. */
.booking-calendar .rdp-outside .rdp-day_button {
  border-color: transparent !important;
  color: #b3aa9c !important;
  background: transparent !important;
}

/* Auswahl und Zeitraum bleiben klar erkennbar vor dem gruenen Grund. */
.booking-calendar .rdp-selected .rdp-day_button,
.booking-calendar .rdp-range_start .rdp-day_button,
.booking-calendar .rdp-range_end .rdp-day_button {
  border-color: #173a2a !important;
  color: #fffdf8 !important;
  background: #173a2a !important;
  font-weight: 800 !important;
}

.booking-calendar .rdp-range_middle .rdp-day_button {
  border-color: #7d9c6a !important;
  color: #14351f !important;
  background: #c8e0bd !important;
}

/* Heute bleibt am Goldrahmen erkennbar. */
.booking-calendar .rdp-today .rdp-day_button {
  box-shadow: inset 0 0 0 2px #b8912f;
}

/* ---------------------------------------------------------------------------
 * Quiz-Optik: eine Frage, eine deutliche Antwort-Schaltflaeche.
 *
 * Gilt bewusst fuer Popup UND eingebettete Fassung auf /buchen und der
 * Kontaktseite, damit beide identisch aussehen und sich gleich bedienen
 * lassen. Nur der Rahmen unterscheidet sich: einmal Dialog, einmal Seite.
 * ------------------------------------------------------------------------- */
.booking-dialog .booking-stepper-current,
.booking-page-embed .booking-stepper-current {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline;
  justify-content: space-between;
}

.booking-dialog .booking-stepper-current strong,
.booking-page-embed .booking-stepper-current strong {
  flex: 1 1 auto;
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.booking-dialog .booking-stepper-current span,
.booking-page-embed .booking-stepper-current span {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  color: #6b4e10 !important;
  background: #f3e7c8;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Die eingebettete Fassung bekommt denselben schlanken Kopf wie das Popup. */
.booking-page-embed .booking-stepper > p:not([role]) {
  display: none;
}

.booking-page-embed .booking-stepper {
  padding: 10px 12px 8px;
}

.booking-page-embed .booking-stepper-node {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px;
  min-height: 26px;
  font-size: .78rem !important;
}

.booking-page-embed .booking-stepper-label {
  font-size: .68rem !important;
  line-height: 1.2 !important;
}

/* Weiter ist die einzige Fortsetzung und sieht auch so aus. */
.booking-step-zero-controls .booking-step-zero-next,
.booking-quiz .booking-step-actions .btn-primary,
.booking-quiz .booking-step-actions .btn-olive {
  min-height: 48px !important;
  padding-inline: 22px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}

/* Ohne Abbrechen bleibt in Schritt 1 eine Spalte fuer Personenzahl und eine
 * fuer Weiter. */
.booking-step-zero-controls,
dialog.booking-dialog .booking-step-zero-controls,
.booking-page-embed .booking-step-zero-controls {
  grid-template-columns: minmax(150px, 1fr) minmax(140px, auto) !important;
}

@media (max-width: 640px) {
  .booking-step-zero-controls,
  dialog.booking-dialog .booking-step-zero-controls,
  .booking-page-embed .booking-step-zero-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;
  }
  .booking-step-zero-controls .people-field {
    grid-column: auto !important;
  }
  .booking-dialog .booking-stepper-current strong,
  .booking-page-embed .booking-stepper-current strong {
    font-size: 1.08rem !important;
  }
}

/* ---------------------------------------------------------------------------
 * Schwebende Schaltflaechen: Anfragen, Anrufen, WhatsApp.
 * ------------------------------------------------------------------------- */
.mcd-fab-request {
  border-color: #c9a44f !important;
  color: #173a2a !important;
  background: #d1a24d !important;
}

.mcd-fab-request:hover {
  background: #c2933f !important;
}

/* Der schwebende Stapel wird ueber sein einziges eindeutiges Kind gefunden,
 * weil sein class-Attribut von der Anwendung verwaltet wird. */
.mcd-fabs-hidden div:has(> .mcd-fab-request) {
  opacity: 0 !important;
  transform: translateY(14px) !important;
  pointer-events: none !important;
  /* Bewusst ohne visibility: die Eigenschaft laesst sich nicht auf dem
   * Compositor animieren und zwang den Browser, die Bewegung auf dem
   * Hauptthread zu berechnen. Unerreichbar sind die Schaltflaechen schon
   * durch pointer-events, aus der Tabulatorreihenfolge nimmt sie inert. */
  transition: opacity .25s ease, transform .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .mcd-fabs-hidden div:has(> .mcd-fab-request) {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 * Der Kopfbereich wartet auf seine Schrift.
 *
 * Die Einblendung faengt bei opacity: 0 an. Angehalten bleibt sie deshalb
 * unsichtbar - genau das ist gewollt, solange die Schrift noch wechseln
 * koennte. Die Begruendung steht ausfuehrlich im Skript.
 *
 * Die Klasse setzt das Skript. Laeuft es nicht, greift die Regel nie und die
 * Einblendung laeuft wie zuvor - der Text kann also nicht haengen bleiben.
 * ------------------------------------------------------------------------- */
.mcd-hero-wartet [data-hero-item] {
  animation-play-state: paused !important;
}

/* ---------------------------------------------------------------------------
 * Parallax: Bilder wandern etwas langsamer als die Seite.
 *
 * Der Rahmen schneidet ab, das Bild ist leicht vergroessert. Dadurch bleibt
 * beim Versatz an keiner Kante eine Luecke sichtbar.
 * ------------------------------------------------------------------------- */
.mcd-parallax-frame {
  overflow: hidden;
}

/* Die Seite bringt fuer einen Teil ihrer Bilder eine eigene Scroll-Animation
 * mit (media-scroll-zoom-out). Deren Laufrichtung ist der der Preissektion
 * entgegengesetzt: sie schiebt das Bild beim Hereinkommen nach unten und beim
 * Hinauslaufen nach oben, das Bild eilt der Seite also voraus.
 *
 * Sie wird hier fuer alle betroffenen Bilder abgeschaltet, nicht nur fuer die,
 * die das Skript uebernimmt. Sonst bliebe bei jedem uebersprungenen Bild die
 * falsche Richtung stehen. Die Karten mit data-framer-parallax sind davon
 * ohnehin ausgenommen - sie laufen bereits richtig herum. */
@supports (animation-timeline: view()) {
  [data-scroll-parallax]:not([data-framer-parallax]) > img,
  [data-scroll-parallax]:not([data-framer-parallax]) > .scroll-media-inner {
    animation: none;
  }
}

/* Der Wert wird je Bild vom Skript gesetzt: aus dem Weg zurueckgerechnet, den
 * das Bild zuruecklegt, damit kein Bild naeher herangeholt wird als noetig.
 * Der Wert hier ist nur der Rueckfall, falls die Messung noch aussteht. */
:root {
  --mcd-parallax-scale: 1.1;
}

.mcd-parallax-image {
  /* Kein will-change: Bei ueber 40 Bildern erzeugt das ebenso viele dauerhafte
   * Compositor-Ebenen. Auf dem Handy kostet der Speicher mehr Ruckeln, als die
   * Voranmeldung einspart.
   *
   * Vorrang ist hier noetig: die Seite setzt bei einem Teil der Bilder ein
   * eigenes transform als Inline-Stil - teils ueber eine eigene Scroll-
   * Animation, teils ueber die Bewegungsbibliothek. Ohne !important wuerden
   * sich beide abwechselnd durchsetzen und das Bild zuckt beim Scrollen.
   *
   * animation: none nimmt der Seite zusaetzlich ihre eigene Bildbewegung
   * (media-scroll-zoom-out). Sie lief genau andersherum als die Preissektion
   * und stand damit gegen die einheitliche Laufrichtung. */
  transform: translate3d(0, var(--mcd-shift, 0px), 0) scale(var(--mcd-parallax-scale)) !important;
  animation: none !important;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .mcd-parallax-image {
    transform: scale(var(--mcd-parallax-scale)) !important;
    will-change: auto;
  }
}

/* Bilder mit Parallax brauchen weder Rahmen noch Hover-Effekt: die Bewegung
 * beim Scrollen ist die Gestaltung. Beides zusammen wirkt unruhig. */
/* Nur Raender und Ringe entfallen. Schatten bleiben: sie gehoeren bei einem
 * Teil der Bilder zur Kartengestaltung, und sie nur dort zu entfernen, wo die
 * Klasse haftet, sah uneinheitlich aus. */
.mcd-parallax-image {
  border: 0 !important;
  outline: 0 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

.mcd-parallax-frame:hover .mcd-parallax-image,
.mcd-parallax-frame:focus-within .mcd-parallax-image {
  filter: none !important;
}

.mcd-parallax-frame:hover,
.mcd-parallax-frame:focus-within {
  transform: none !important;
}

/* ---------------------------------------------------------------------------
 * Touch: jede Bedienflaeche mindestens 44 px hoch.
 *
 * Gemessen auf 390 px Breite lagen 26 Flaechen darunter, darunter die
 * Fusszeilen-Navigation mit 17 px Hoehe und die Teilen-Symbole mit 36 px.
 * Der sichtbare Text bleibt unveraendert, nur die Trefferflaeche waechst.
 * ------------------------------------------------------------------------- */
@media (pointer: coarse) {
  footer a,
  .footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  footer nav a,
  footer ul a {
    padding-block: 4px;
  }

  a[aria-label^="Auf "],
  a[aria-label="Link kopieren"],
  button[aria-label="Link kopieren"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  a[href^="tel:"],
  a[href*="wa.me"],
  a[href^="mailto:"] {
    min-height: 44px;
  }

  /* Verweise im Fliesstext bekommen etwas Luft, damit man sie nicht
   * versehentlich statt des Nachbarn trifft. */
  .prose a,
  article a {
    padding-block: 2px;
  }

  /* Kein Hover-Zustand, der auf Touch haengen bleibt. */
  .mcd-parallax-frame:hover {
    transform: none !important;
  }
}

/* Doppeltes Antippen soll nicht zoomen, aber Pinch-Zoom bleibt erlaubt. */
a, button, [role="button"], .rdp-day_button, .vehicle-choice {
  touch-action: manipulation;
}

/* ---------------------------------------------------------------------------
 * Einblenden beim Scrollen - ohne JavaScript.
 *
 * Umgesetzt mit scroll-gesteuerten CSS-Animationen (animation-timeline: view).
 * Der Browser rechnet das auf dem Compositor, also am Hauptthread vorbei. Ein
 * gleichwertiger Effekt in JavaScript wuerde bei jedem Bildaufbau Arbeit auf
 * genau dem Thread erzeugen, der bei dieser Seite ohnehin der Engpass ist.
 *
 * Wichtig ist die Richtung der Absicherung: Der sichtbare Normalzustand steht
 * ausserhalb des @supports-Blocks. Browser ohne diese Technik zeigen die
 * Inhalte einfach normal an, statt leer zu bleiben.
 * ------------------------------------------------------------------------- */

/* Karten heben sich beim Zeigen leicht an. Reine Compositor-Eigenschaften,
 * also ohne Neuberechnung von Layout oder Anstrich. */


/* Ersatzbewegung fuer die Preissektion in Browsern ohne Scroll-Zeitachsen.
 *
 * animation: none raeumt die eingefrorene Vorlage weg - ohne Zeitachse bleibt
 * sie sonst auf ihrem letzten Einzelbild stehen. Die Vergroesserung kommt
 * weiter aus --parallax-scale-end, damit der Ausschnitt derselbe ist wie dort,
 * wo der Browser die Bewegung selbst rechnet. Gesetzt wird die Klasse nur,
 * wenn der Browser die Technik nicht kann; sonst bleibt alles unberuehrt. */
.mcd-parallax-section {
  animation: none !important;
  transform: translate3d(0, var(--mcd-shift, 0px), 0) scale(var(--parallax-scale-end, 1.22)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .mcd-parallax-section {
    transform: scale(var(--parallax-scale-end, 1.22)) !important;
  }
}

/* ---------------------------------------------------------------------------
 * Deko-Blaetter, -Aeste und die Karte bewegen sich nicht mehr mit. Die Regeln
 * dafuer sind entfallen; die Begruendung steht im Skript.
 *
 * Der Ast ueber "4x4-Fahrzeuge" ist zusaetzlich seitenverkehrt gestellt.
 *
 * Gedreht wird ueber die Variable, die die Anwendung selbst zum Spiegeln
 * benutzt, nicht ueber transform als Ganzes: Am Element haengt noch die
 * Zusammensetzung aus Verschiebung und Drehung. Wuerde man transform
 * ueberschreiben, fielen die mit weg.
 *
 * Ausgewaehlt wird ueber die Breitenklasse, denn beide Aeste auf der Seite
 * unterscheiden sich genau darin (42rem hier, 38rem im Abschnitt darunter).
 * Bewusst nur im Stylesheet und nicht im HTML: Eine Aenderung am Markup
 * wuerde von der Anwendung beim Aufbau wieder ueberschrieben.
 * ------------------------------------------------------------------------- */
[style*="dekor-ast-blaetter"].w-\[42rem\] {
  --tw-scale-x: 1;
}

/* ---------------------------------------------------------------------------
 * Aufsteigen beim Scrollen: entfaellt.
 *
 * Hier stand eine zweite Einblendung fuer die Abschnittsueberschriften, die am
 * Scrollrad hing. Die Seite blendet ihre Bloecke aber zeitgesteuert ein, und
 * die Ueberschrift lag in einem solchen Block. Zwei Zeitgefuehle im selben
 * Block wirkten unruhig. Die Begruendung steht ausfuehrlich im Skript.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Galeriekarten flacher: 614 px Bildhoehe fuellten auf dem Handy fast den
 * ganzen Bildschirm, dadurch sah man nie mehr als ein Motiv auf einmal.
 *
 * Angefasst wird die Karte, nicht das Bild - das Bild fuellt sie per
 * object-fit und richtet sich danach.
 *
 * Die Karte allein zu kuerzen reichte aber nicht: Der Bildbereich darin haelt
 * ein festes Seitenverhaeltnis (3:4) und blieb dadurch hoeher als die Karte.
 * Die Tourenbezeichnung sitzt an dessen unterem Rand - sie rutschte damit aus
 * der Karte heraus und war auf dem Handy gar nicht mehr zu sehen. Deshalb wird
 * der Bildbereich hier von der Karte gefuehrt statt vom Seitenverhaeltnis.
 * ------------------------------------------------------------------------- */
.card-premium:has(.card-premium-img) {
  height: 470px !important;
  min-height: 0 !important;
  max-height: 470px !important;
}

/* Der Verweis dazwischen ist nur "display: block" und gibt die Hoehe nicht
 * weiter. Er bekommt sie hier, damit der Bildbereich sich daran ausrichten
 * kann. Bewusst kein position: absolute fuer den Bildbereich: er wuerde die
 * Trefferflaeche des Verweises auf null ziehen, die ganze Karte waere dann
 * nicht mehr anklickbar. */
.card-premium:has(.card-premium-img) a:has([data-scroll-parallax]) {
  display: block;
  height: 100%;
}

.card-premium:has(.card-premium-img) [data-scroll-parallax] {
  height: 100% !important;
  aspect-ratio: auto !important;
}

@media (max-width: 640px) {
  .card-premium:has(.card-premium-img) {
    height: 360px !important;
    max-height: 360px !important;
  }
}

/* ---------------------------------------------------------------------------
 * Clean UI & Desktop 2-Spalten-Layout für das Buchungs-Popup (dialog.booking-dialog).
 * Nutzt die Breite des Bildschirms optimal aus, entfernt überflüssige Badges/Labels,
 * verhindert Pfeil-Überlappung und vermeidet Scrollbalken komplett.
 * ------------------------------------------------------------------------- */

/* 1. "Frage 1 von 4" Badge entfernen (Die 4 Step-Icons 1-4 genügen völlig) */
.booking-stepper-current span,
.booking-stepper-current span[class*="badge"],
[data-step-counter] {
  display: none !important;
}

/* 2. Redundantes "Anreise – Abreise *" Label über "Reisezeitraum wählen" entfernen */
.booking-quiz span:has(+ .date-range-inline),
.booking-page-embed span:has(+ .date-range-inline),
.booking-dialog span:has(+ .date-range-inline),
.booking-quiz label[for*="date"],
.booking-step-content > .grid > .block > span:first-child:has(+ .date-range-inline) {
  display: none !important;
}

/* 3. Saubere Monats-Kopfzeile im Kalender: Pfeile (< >) kollidieren NIEMALS mit "So" */
.booking-calendar .rdp-month {
  position: relative !important;
}

.booking-calendar .rdp-month_caption {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 38px !important;
  height: 38px !important;
  margin-bottom: 6px !important;
  padding-inline: 4px !important;
}

.booking-calendar .rdp-caption_label {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.booking-calendar .rdp-nav {
  position: absolute !important;
  right: 4px !important;
  top: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 38px !important;
  z-index: 10 !important;
}

.booking-calendar .rdp-button_previous,
.booking-calendar .rdp-button_next {
  position: static !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.booking-calendar .rdp-weekdays {
  margin-top: 4px !important;
}

.booking-calendar .rdp-weekday {
  padding-block: 4px !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
}

/* ===========================================================================
 * MASTER DESIGN POLISH (Deutlich kleinere Radien & Kein Scrollen notwendig!)
 * =========================================================================== */

/* 4. Scharfe, elegante Kanten (Kleine Radien statt großer runden Ecken) */
dialog.booking-dialog,
dialog.booking-dialog[open],
.booking-dialog,
.booking-page-embed {
  border-radius: 6px !important;
}

.booking-dialog .booking-dialog-panel,
.booking-page-embed .booking-dialog-panel,
.booking-quiz,
.booking-success,
.booking-stepper,
.booking-step-zero-controls {
  border-radius: 4px !important;
}

.booking-dialog .inp,
.booking-page-embed .inp,
.booking-dialog input,
.booking-dialog select,
.booking-dialog textarea,
.booking-dialog .vehicle-choice,
.booking-page-embed .vehicle-choice,
.booking-dialog .date-range-inline,
.booking-page-embed .date-range-inline,
.booking-dialog .people-counter,
.booking-page-embed .people-counter,
.booking-dialog .btn,
.booking-dialog .btn-primary,
.booking-dialog .btn-olive,
.booking-dialog .btn-secondary,
.booking-dialog .booking-dialog-cancel,
.booking-dialog .booking-step-zero-next,
.booking-calendar .rdp-day_button,
.booking-calendar .rdp-button_previous,
.booking-calendar .rdp-button_next,
.booking-dialog-close {
  border-radius: 3px !important;
}

/* 5. Globale vertikale Kompaktheit, damit auf KEINEM Gerät gescrollt werden muss */
.booking-dialog .booking-stepper {
  padding: 4px 8px !important;
  margin-bottom: 6px !important;
}

.booking-dialog .mcd-step-hint {
  margin: 0 0 6px !important;
  padding: 4px 8px !important;
  font-size: 0.82rem !important;
}

.booking-dialog .booking-quiz input:not([type="checkbox"]):not([type="radio"]),
.booking-dialog .booking-quiz select {
  min-height: 36px !important;
  height: 36px !important;
  padding-block: 4px !important;
}

.booking-dialog .booking-quiz textarea {
  min-height: 50px !important;
  max-height: 64px !important;
  height: 56px !important;
  padding-block: 6px !important;
}

.booking-dialog .vehicle-choice {
  padding: 8px 10px !important;
  margin-bottom: 4px !important;
}

/* 6. Desktop & Laptop Layout (min-width: 768px): 2 Spalten, 1 Monat ab Laptop-Höhe */
@media (min-width: 768px) {
  dialog.booking-dialog[open] {
    width: min(92vw, 820px) !important;
    max-width: 820px !important;
    max-height: 96dvh !important;
    margin: auto !important;
    overflow: hidden !important;
    box-shadow: 0 24px 70px rgba(12, 32, 22, .25), 0 0 0 1px rgba(99, 78, 38, .18) !important;
  }

  .booking-dialog .booking-quiz[data-current-step="0"] .booking-step-content > .grid {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  .booking-dialog .booking-step-zero-controls {
    order: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px !important;
    height: 100% !important;
    border: 1px solid #ddd2b8 !important;
    background: #faf6ed !important;
  }

  .booking-dialog .booking-step-zero-controls .people-field {
    width: 100% !important;
  }

  .booking-dialog .booking-step-zero-controls .people-counter button,
  .booking-dialog .booking-step-zero-controls .people-counter input {
    min-height: 38px !important;
    height: 38px !important;
  }

  .booking-dialog .booking-step-zero-controls .booking-step-zero-next {
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    margin-top: auto !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
  }

  .booking-dialog .booking-calendar .rdp-day_button {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 0.84rem !important;
  }

  /* Auf nahezu allen Laptops (max-height: 920px) 1 Monat zeigen -> Garantiert 0 Scrollen! */
  @media (max-height: 920px) {
    dialog.booking-dialog .booking-calendar .rdp-month + .rdp-month {
      display: none !important;
    }
    dialog.booking-dialog .booking-calendar .rdp-months {
      grid-template-columns: minmax(0, 1fr) !important;
      max-width: 360px !important;
      margin-inline: auto !important;
    }
  }

  /* Schritt 4 (Kontaktdaten) 2-spaltig auf Desktop */
  .booking-dialog .booking-quiz[data-current-step="3"] .grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .booking-dialog .booking-quiz[data-current-step="3"] .grid > div:last-child {
    grid-column: 1 / -1;
  }
}

/* 7. Smartphone & Mobile Layout (max-width: 767px): Ultraschmale Zeilen, kein Scrollen! */
@media (max-width: 767px) {
  dialog.booking-dialog[open] {
    width: min(96vw, 420px) !important;
    max-height: 96dvh !important;
    margin: auto !important;
    overflow: hidden !important;
  }

  .booking-dialog .booking-quiz {
    padding: 8px 10px !important;
  }

  .booking-dialog .booking-step-stage {
    padding-inline: 0 !important;
    overflow: hidden !important;
  }

  .booking-dialog .booking-calendar .rdp-month + .rdp-month {
    display: none !important;
  }

  .booking-dialog .booking-calendar .rdp-months {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100% !important;
  }

  .booking-dialog .booking-calendar .rdp-day_button,
  .booking-dialog .booking-calendar .rdp-day {
    height: 30px !important;
    min-height: 30px !important;
    width: 100% !important;
    font-size: 0.78rem !important;
    padding: 0 !important;
  }

  .booking-dialog .booking-step-zero-controls {
    padding: 8px !important;
    gap: 8px !important;
  }

  .booking-dialog .booking-step-zero-controls .people-counter button,
  .booking-dialog .booking-step-zero-controls .people-counter input,
  .booking-dialog .booking-step-zero-controls .booking-step-zero-next,
  .booking-dialog .booking-step-zero-controls .booking-dialog-cancel {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 0.88rem !important;
  }
}