/* Reifen Reimer – Booking wizard (extracted from index.html) */

:root[data-theme="dark"] {
  --rr-bg: #484850;
  --rr-heading: #ffffff;
  --rr-text: #d4d4d8;
  --rr-text-muted: #a1a1aa;
  --rr-text-subtle: #71717a;
  --rr-card: rgba(82, 82, 90, 0.82);
  --rr-card-deep: rgba(68, 68, 76, 0.88);
  --rr-border: rgba(255, 255, 255, 0.12);
  --rr-section-border: rgba(113, 113, 122, 0.45);
  --rr-btn-outline-text: #ffffff;
  --rr-skeleton-a: #5a5a64;
  --rr-skeleton-b: #68686f;
  --rr-scroll-arrow-idle: rgba(255, 255, 255, 0.42);
  --rr-scroll-arrow-active: rgba(110, 207, 255, 0.9);
  --rr-scroll-arrow-hover: #ffffff;
}

:root[data-theme="light"] {
  --rr-bg: #f4f5f7;
  --rr-heading: #18181b;
  --rr-text: #3f3f46;
  --rr-text-muted: #52525b;
  --rr-text-subtle: #71717a;
  --rr-card: rgba(255, 255, 255, 0.92);
  --rr-card-deep: rgba(255, 255, 255, 0.96);
  --rr-border: rgba(0, 0, 0, 0.1);
  --rr-section-border: rgba(0, 0, 0, 0.08);
  --rr-btn-outline-text: #14629f;
  --rr-skeleton-a: #e4e4e7;
  --rr-skeleton-b: #f4f4f5;
  --rr-scroll-arrow-idle: rgba(0, 0, 0, 0.32);
  --rr-scroll-arrow-active: #14629f;
  --rr-scroll-arrow-hover: #0f5285;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}
.skeleton-block {
  animation: skeleton-pulse 1.8s ease-in-out infinite;
  background: linear-gradient(90deg, var(--rr-skeleton-a) 0%, var(--rr-skeleton-b) 50%, var(--rr-skeleton-a) 100%);
  background-size: 200% 100%;
}

    .tire-picker {
      /* Gleiche Cyan-Tönung wie tire_glow_*.webp – ohne weiten/filter-basierten Halo */
      --tire-accent: #6ecfff;
      --tire-badge-fill: #14629f;
      position: relative;
      margin-inline: auto;
      width: 100%;
      max-width: 21rem;
      overflow: visible;
    }
    .tire-picker__stage {
      position: relative;
      width: 100%;
      overflow: visible;
      /* Native Bildmaße 213 x 470 – hält alle Layer deckungsgleich */
      aspect-ratio: 213 / 470;
    }
    /* Alle 5 WebP-Layer absolut deckungsgleich übereinander */
    .tire-picker__layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }
    .tire-picker__glow {
      opacity: 0;
      transition: opacity 0.14s ease;
    }
    .tire-picker__glow.is-active,
    .tire-picker__glow.is-anim-preview {
      opacity: 1;
    }
    /* SVG-Overlay: L-förmige Verbindungslinien (außerhalb des Fahrzeugs) */
    .tire-picker__lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 5;
      overflow: visible;
    }
    .tire-line {
      fill: none;
      stroke: rgba(255, 255, 255, 0.28);
      stroke-width: 1.5;
      stroke-dasharray: 5 6;
      stroke-linecap: butt;
      stroke-linejoin: round;
    }
    .tire-line.is-active {
      stroke: var(--tire-accent);
      stroke-width: 2.35;
      stroke-dasharray: none;
      opacity: 1;
      filter: none;
    }
    /* Lade-Overlay: Linie füllt sich entlang des Pfads (kein Lauflicht) */
    .tire-line-glow {
      fill: none;
      stroke: var(--tire-accent);
      stroke-width: 2.4;
      stroke-linecap: butt;
      stroke-linejoin: round;
      opacity: 0;
      filter: none;
      pointer-events: none;
      /* Über der gestrichelten Basislinie */
    }
    /* Linien-Fill/Unfill auf dem Overlay (gestrichelte Basis bleibt sichtbar) */
    .tire-line-glow.is-line-animating {
      opacity: 1;
    }
    .tire-picker__glow.is-anim-out {
      opacity: 0 !important;
      transition: opacity 0.14s ease;
    }
    .tire-line-dot {
      fill: rgba(255, 255, 255, 0.35);
      transition: fill 0.25s ease, filter 0.25s ease;
    }
    .tire-line-dot.is-active {
      fill: var(--tire-accent);
      filter: none;
    }
    /* Transparente Klick-Zonen exakt über den Reifen */
    .tire-hotspot {
      position: absolute;
      z-index: 8;
      padding: 0;
      margin: 0;
      border: 0;
      border-radius: 9999px;
      background: transparent;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .tire-hotspot:focus-visible {
      outline: 2px solid #3b9fff;
      outline-offset: 2px;
    }
    /* Badges (VL, VR, HL, HR) außerhalb des Fahrzeugs – mit L-Linie zum Reifen */
    .tire-badge {
      position: absolute;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 2.5rem;
      min-height: 1.9rem;
      padding: 0.15rem 0.55rem;
      border-radius: 9999px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(10, 12, 16, 0.75);
      color: #cfe1f5;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
      transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.28s ease;
    }
    .tire-badge:hover {
      border-color: rgba(59, 159, 255, 0.55);
      color: #ffffff;
    }
    .tire-badge:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px rgba(59, 159, 255, 0.85);
    }
    .tire-badge.is-active {
      background: var(--tire-badge-fill);
      border-color: var(--tire-accent);
      color: #ffffff;
      box-shadow: 0 0 0 1.5px var(--tire-accent);
    }
    .tire-badge.is-anim-preview {
      background: var(--tire-badge-fill);
      border-color: var(--tire-accent);
      color: #ffffff;
      animation: tire-badge-pulse 0.2s ease-out forwards;
    }
    .tire-badge.is-anim-out {
      animation: tire-badge-fadeout 0.2s ease-in forwards;
    }
    @keyframes tire-badge-pulse {
      0% {
        opacity: 0.55;
        box-shadow: 0 0 0 0 transparent;
      }
      45% {
        opacity: 1;
        box-shadow: 0 0 0 2px var(--tire-accent);
      }
      100% {
        opacity: 1;
        box-shadow: 0 0 0 1.5px var(--tire-accent);
      }
    }
    @keyframes tire-badge-fadeout {
      0% {
        opacity: 1;
        box-shadow: 0 0 0 1.5px var(--tire-accent);
      }
      100% {
        opacity: 0.45;
        background: rgba(10, 12, 16, 0.75);
        border-color: rgba(255, 255, 255, 0.18);
        color: #cfe1f5;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .tire-line-glow.is-line-animating { animation: none; opacity: 1; stroke-dashoffset: 0; }
      .tire-badge.is-anim-preview,
      .tire-badge.is-anim-out { animation: none; }
    }
    .booking-step-centered {
      margin-inline: auto;
      max-width: 28rem;
      width: 100%;
    }
    .booking-step-wide {
      margin-inline: auto;
      max-width: 100%;
      width: 100%;
    }

    .booking-step-toolbar {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }
    @media (min-width: 768px) {
      .booking-step-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }
      .booking-step-toolbar > .mb-6,
      .booking-step-toolbar > div.mb-6 {
        margin-bottom: 0 !important;
        flex: 1 1 auto;
      }
    }
    .booking-step-intro {
      margin-bottom: 0;
    }
    .booking-step-subtitle--mobile {
      display: none;
    }
    @media (max-width: 767px) {
      .booking-step-subtitle--desktop {
        display: none;
      }
      .booking-step-subtitle--mobile {
        display: block;
      }
    }
    .booking-step-head--stacked {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
    }
    .booking-step-head--stacked .booking-step-head__back {
      align-self: flex-start;
    }
    .booking-step-head--stacked .booking-step-head__badge {
      width: 100%;
    }
    @media (min-width: 768px) {
      .booking-step-head--stacked {
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
        align-items: center;
        column-gap: 1rem;
        row-gap: 0.375rem;
      }
      .booking-step-head--stacked .booking-step-head__back {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
      }
      .booking-step-head--stacked .booking-step-intro {
        grid-column: 2;
        grid-row: 1;
        text-align: center;
      }
      .booking-step-head--stacked .booking-step-head__badge {
        grid-column: 3;
        grid-row: 1;
        width: auto;
        justify-self: end;
      }
      .booking-step-head--stacked .booking-step-head__badge > div,
      .booking-step-head--stacked .booking-step-head__badge > p {
        white-space: nowrap;
      }
    }
    .booking-step-head {
      flex-shrink: 0;
    }
    /* Betriebspause: Banner über dem Wizard (Fluss, kein Overlay) */
    .booking-downtime-banner {
      margin: 0 0 1rem;
      text-align: left;
    }
    .booking-downtime-banner[hidden] {
      display: none !important;
    }
    .booking-downtime-banner .booking-downtime__inner {
      padding: 0.7rem 0.9rem;
      border-radius: 0.75rem;
      border: 1px solid rgba(94, 176, 224, 0.4);
      background: #0a1520;
    }
    .booking-downtime-banner .booking-downtime__title {
      margin: 0;
      font-size: 0.8125rem;
      font-weight: 700;
      color: #5eb0e0;
    }
    .booking-downtime-banner .booking-downtime__text {
      margin: 0.3rem 0 0;
      font-size: 0.8125rem;
      line-height: 1.45;
      color: rgba(255, 255, 255, 0.88);
    }
    [data-theme="light"] .booking-downtime-banner .booking-downtime__inner {
      border-color: rgba(20, 98, 159, 0.35);
      background: #e8eef4;
    }
    [data-theme="light"] .booking-downtime-banner .booking-downtime__title {
      color: #14629f;
    }
    [data-theme="light"] .booking-downtime-banner .booking-downtime__text {
      color: #27272a;
    }
    .booking-back-label--short {
      display: none;
    }
    .booking-step-shell {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
    }
    .booking-step-main {
      flex: 1 1 auto;
      min-height: 0;
    }
    .booking-step-main--center {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    /* Desktop: Weiter-Button unten in fixer Panelhöhe */
    @media (min-width: 768px) {
      .booking-step--service .booking-step-main--center {
        flex: 1 1 auto;
        min-height: 0;
        justify-content: center;
      }
      .booking-step-main {
        flex: 0 1 auto;
      }
      .booking-step--service .booking-step-main {
        flex: 1 1 auto;
        min-height: 0;
      }
      .booking-step--wheels .booking-step-main,
      .booking-step--termin .booking-step-main,
      .booking-step--contact .booking-step-main {
        flex: 1 1 auto;
        min-height: 0;
      }
      .booking-step-action {
        margin-top: auto;
      }
    }
    .booking-step-action {
      flex-shrink: 0;
      padding-top: 1rem;
    }
    @media (max-width: 767px) {
      .booking-step-action {
        margin-top: 0.375rem;
      }
    }

    /* Deaktivierte Wizard-CTAs: grau statt halbtransparentes Blau */
    #booking-wizard .btn-primary.booking-step-action:disabled {
      opacity: 1;
      transform: none;
      box-shadow: none;
      pointer-events: none;
    }
    [data-theme="light"] #booking-wizard .btn-primary.booking-step-action:disabled {
      background-color: #e4e4e7 !important;
      color: #52525b !important;
    }
    [data-theme="dark"] #booking-wizard .btn-primary.booking-step-action:disabled {
      background-color: #52525b !important;
      color: #d4d4d8 !important;
    }

    /* Inkl.-Leistungen: auf Mobil erst bei Abschluss */
    .booking-included-abschluss {
      display: none;
    }
    @media (max-width: 767px) {
      .booking-included-inline {
        display: none !important;
      }
      .booking-included-abschluss {
        display: block;
      }
      #booking-step-indicator .booking-step-btn {
        padding: 0.2rem 0.45rem;
        font-size: 0.625rem;
        gap: 0.3rem;
      }
      #booking-step-indicator .booking-step-btn__num {
        height: 1rem;
        width: 1rem;
        font-size: 0.5625rem;
      }
    }

    /* Feste Panel-Höhe (Desktop) – exakt an Schritt 2 gemessen */
    @media (min-width: 768px) {
      .booking-panel-shell {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow: hidden;
      }
      .booking-panel-shell > .booking-step-anim {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
    }

    /* Messung: natürliche Inhaltshöhe ohne Flex-Stretch */
    #booking-panel.booking-panel-measure-probe,
    .booking-panel-measure-probe {
      display: block !important;
    }
    #booking-panel.booking-panel-measure-probe > .booking-step-anim,
    .booking-panel-measure-probe .booking-step-anim,
    #booking-panel.booking-panel-measure-probe .booking-step-shell,
    .booking-panel-measure-probe .booking-step-shell,
    #booking-panel.booking-panel-measure-probe .booking-step-main,
    .booking-panel-measure-probe .booking-step-main {
      flex: none !important;
      height: auto !important;
      min-height: 0 !important;
    }
    #booking-panel.booking-panel-measure-probe .booking-wheel-layout,
    .booking-panel-measure-probe .booking-wheel-layout,
    #booking-panel.booking-panel-measure-probe .booking-wheel-info-row,
    .booking-panel-measure-probe .booking-wheel-info-row {
      align-items: start !important;
    }
    #booking-panel.booking-panel-measure-probe .booking-wheel-options,
    .booking-panel-measure-probe .booking-wheel-options,
    #booking-panel.booking-panel-measure-probe .booking-wheel-included,
    .booking-panel-measure-probe .booking-wheel-included,
    #booking-panel.booking-panel-measure-probe .booking-wheel-included .booking-service-info--compact,
    .booking-panel-measure-probe .booking-wheel-included .booking-service-info--compact,
    #booking-panel.booking-panel-measure-probe .booking-wheel-layout__panel,
    .booking-panel-measure-probe .booking-wheel-layout__panel {
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
    }

    /* Reifenwahl: schmales Auto links, breiter Infobereich rechts */
    .booking-wheel-layout {
      display: grid;
      gap: 0.875rem;
      align-items: start;
      width: 100%;
    }
    .booking-wheel-layout__panel {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
      min-width: 0;
      min-height: 0;
    }
    .booking-wheel-info-row {
      display: grid;
      gap: 0.625rem;
      align-items: stretch;
      min-width: 0;
    }
    @media (min-width: 768px) {
      .booking-wheel-info-row {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 0.75rem;
      }
    }
    .booking-wheel-options,
    .booking-wheel-included .booking-service-info--compact {
      padding: 0.875rem 1rem;
      min-width: 0;
      height: 100%;
      box-sizing: border-box;
    }
    .booking-wheel-options {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    .booking-wheel-included {
      min-width: 0;
      min-height: 0;
    }
    .booking-wheel-included .booking-service-info--compact {
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .booking-wheel-layout__panel #booking-price-summary,
    .booking-wheel-layout__panel .booking-price-summary {
      flex-shrink: 0;
      padding: 0.875rem 1rem;
    }
    .booking-wheel-layout__panel .booking-service-info--compact,
    .booking-wheel-layout__panel .rounded-xl.border {
      padding: 0.875rem 1rem;
    }
    @media (min-width: 768px) {
      .booking-wheel-layout {
        grid-template-columns: 14rem minmax(0, 1fr);
        gap: 0.875rem 1.75rem;
      }
      .booking-wheel-layout__panel {
        width: 100%;
        justify-self: stretch;
      }
      .booking-wheel-layout__car {
        width: 14rem;
        padding-left: 1.125rem;
        padding-right: 0.25rem;
        padding-bottom: 3.25rem;
        box-sizing: border-box;
      }
      .booking-step--wheels #wheel-picker-container {
        padding-left: 0.5rem;
        padding-right: 0.35rem;
      }
    }
    .booking-wheel-layout__car {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      overflow: visible;
    }
    .tire-picker--compact {
      margin-inline: auto;
      max-width: 10rem;
      width: 100%;
    }
    .booking-step--wheels .booking-step-head {
      margin-bottom: 0.375rem;
    }
    .booking-step--wheels .tire-picker--compact {
      padding-top: 0.875rem;
      box-sizing: content-box;
    }
  /* Anzeige entfernt – Absicherung gegen gecachtes Markup */
    .booking-wheel-count {
      display: none !important;
    }
    .booking-wheel-count__head {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-inline: 2.85rem;
      margin-bottom: 0.375rem;
    }
    .booking-wheel-count__label {
      margin: 0;
      text-align: center;
      white-space: nowrap;
    }
    .booking-wheel-count__badges {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      gap: 0.5rem;
      width: 100%;
      max-width: 100%;
      margin-inline: auto;
    }
    .booking-wheel-hint {
      width: 100%;
      max-width: 10rem;
      margin-inline: auto;
      margin-top: 0.375rem;
      margin-bottom: 0.125rem;
      line-height: 1.35;
      font-size: 0.6875rem;
      text-align: center;
    }
    .booking-wheel-hint--desktop {
      display: none;
    }
    @media (max-width: 767px) {
      #booking-panel.booking-panel--wheels,
      #services.booking-services--wheels {
        overflow: visible;
      }
      #booking-panel.booking-panel--wheels {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
      }
      .booking-step--wheels .booking-step-main,
      .booking-step--wheels #wheel-picker-container {
        overflow: visible;
      }
      .booking-step--wheels #wheel-picker-container.booking-wheel-layout {
        padding-inline: 0;
        box-sizing: border-box;
      }
      .booking-wheel-layout {
        /* Auto links (kompakt), Optionen rechts; Preis darunter über volle Breite */
        grid-template-columns: minmax(0, 8.25rem) minmax(0, 1fr);
        grid-template-areas:
          "car options"
          "price price";
        column-gap: 0.625rem;
        row-gap: 0.375rem;
        align-items: start;
        width: 100%;
      }
      .booking-wheel-layout__panel {
        display: contents;
      }
      .booking-wheel-layout__car {
        grid-area: car;
        align-items: center;
        margin-inline: 0;
        width: 100%;
        max-width: 8.25rem;
        padding: 0.125rem 0 0;
        overflow: visible;
        box-sizing: border-box;
      }
      .booking-wheel-info-row {
        grid-area: options;
        grid-template-columns: 1fr;
        gap: 0.375rem;
        min-width: 0;
        max-width: 100%;
      }
      .booking-wheel-layout__panel #booking-price-summary,
      .booking-wheel-layout__panel .booking-price-summary {
        grid-area: price;
        width: 100%;
        max-width: 100%;
        padding: 0.375rem 0.375rem !important;
        box-sizing: border-box;
      }
      .booking-price-summary .booking-price-row {
        gap: 0.375rem;
        font-size: 0.6875rem;
        line-height: 1.35;
      }
      .booking-price-summary .booking-price-row__value {
        white-space: nowrap;
      }
      .tire-picker--compact {
        max-width: 5.85rem;
        width: 100%;
        margin-inline: auto;
        align-self: center;
      }
      .booking-step--wheels .tire-badge {
        min-width: 2rem;
        min-height: 1.55rem;
        padding: 0.1rem 0.38rem;
        font-size: 9px;
      }
      .booking-wheel-hint--mobile {
        display: block;
        max-width: 5.85rem;
        width: 100%;
        font-size: 0.5625rem;
        line-height: 1.3;
        /* Unter HL/HR-Badges (overflow unter dem Stage), nicht dahinter */
        margin-top: 1.35rem;
        text-align: center;
        align-self: center;
        position: relative;
        z-index: 1;
      }
      /* Mobil: Anzahl Räder neben HR – horizontal per JS an Optionspalte ausgerichtet */
      .tire-picker__stage .booking-wheel-count {
        position: absolute;
        top: 98%;
        z-index: 12;
        width: max-content;
        max-width: none;
        margin: 0;
        pointer-events: auto;
      }
      .tire-picker__stage .booking-wheel-count__head {
        padding-inline: 0;
        margin-bottom: 0.15rem;
        justify-content: center;
      }
      .tire-picker__stage .booking-wheel-count__label {
        font-size: 0.5rem;
        line-height: 1.15;
        white-space: normal;
        text-align: center;
      }
      .tire-picker__stage .booking-wheel-count__badges {
        gap: 0.12rem;
        width: max-content;
      }
      .tire-picker__stage .booking-wheel-count__badges .wheel-count-badge {
        min-width: 1.05rem;
        padding: 0.15rem 0.2rem;
        font-size: 0.5625rem;
      }
      .booking-wheel-options {
        padding: 0.375rem 0.375rem !important;
      }
      .booking-wheel-extra {
        gap: 0.375rem !important;
        padding-top: 0.375rem !important;
      }
      .booking-wheel-extra label,
      .booking-wheel-extra .text-xs {
        font-size: 0.625rem !important;
        line-height: 1.3;
      }
      .booking-wheel-extra__select {
        margin-top: 0.125rem !important;
        padding: 0.3rem 0.4rem !important;
        font-size: 0.6875rem !important;
        border-radius: 0.5rem !important;
      }
      .booking-wheel-extra__check input {
        width: 0.875rem;
        height: 0.875rem;
      }
      .booking-wheel-layout__panel .booking-price-summary .text-xs {
        font-size: 0.625rem;
        line-height: 1.35;
      }
      .booking-wheel-layout__panel .booking-price-summary .text-sm,
      .booking-wheel-layout__panel .booking-price-summary .font-headline {
        font-size: 0.8125rem !important;
      }
      .booking-step--wheels .booking-step-head {
        margin-bottom: 0.375rem;
      }
      .booking-step--wheels .tire-picker--compact {
        padding-top: 0.5rem;
      }
    }

    @media (min-width: 768px) {
      .booking-wheel-hint--mobile {
        display: none;
      }
      .booking-wheel-hint--desktop {
        display: block;
      }
    }

    .booking-service-info--compact .booking-service-info__list {
      display: grid;
      gap: 0.3rem;
    }
    .booking-service-info--compact .booking-service-info__list--stack {
      grid-template-columns: 1fr;
    }
    .booking-service-info--compact .booking-service-info__list li span {
      line-height: 1.35;
      word-break: break-word;
    }
    .booking-service-info--compact .booking-service-info__list li {
      font-size: 0.8125rem;
    }

    /* Terminwahl: Slots links, Infos rechts – volle Höhe nutzen */
    .booking-step--termin .booking-step-main {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .booking-termin-layout {
      display: grid;
      gap: 0.875rem;
      align-items: start;
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
    }
    .booking-termin-sidebar {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
      min-width: 0;
      min-height: 0;
    }
    .booking-termin-sidebar .booking-service-info--compact {
      flex: 0 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: visible;
    }
    .booking-termin-sidebar #booking-price-summary,
    .booking-termin-sidebar .booking-price-summary {
      flex-shrink: 0;
      padding: 0.875rem 1rem;
    }
    .booking-termin-sidebar .booking-service-info--compact {
      padding: 0.875rem 1rem;
    }
    @media (min-width: 768px) {
      .booking-termin-layout {
        grid-template-columns: minmax(6.75rem, 8.25rem) minmax(16rem, 1.75fr) minmax(14rem, 1.1fr);
        gap: 0.75rem 1rem;
        align-items: start;
        width: 100%;
      }
      .booking-termin-sidebar {
        width: 100%;
        justify-self: stretch;
        align-self: start;
        margin-top: 0;
      }
      .booking-slot-layout__dates {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        min-height: 0;
      }
      .booking-slot-layout__times {
        width: 100%;
        max-width: none;
      }
      .booking-step--termin .booking-slot-hint {
        max-width: none;
      }
    }

    .booking-slot-layout {
      display: grid;
      gap: 0.875rem;
      align-items: stretch;
      min-height: 0;
      height: 100%;
    }
    @media (min-width: 768px) {
      .booking-slot-layout {
        grid-template-columns: minmax(6.75rem, 8.25rem) minmax(0, 1fr);
        gap: 0.875rem;
      }
    }
    .booking-slot-layout__dates {
      display: flex;
      flex-direction: column;
      min-height: 0;
      min-width: 0;
      padding-bottom: 0.25rem;
    }
    .booking-slot-layout__dates > .mb-1\.5,
    .booking-slot-layout__dates > p {
      flex-shrink: 0;
    }
    .booking-slot-layout__times {
      min-width: 0;
      min-height: 0;
      overflow: visible;
    }
    .booking-slot-hint {
      flex-shrink: 0;
    }
    .booking-slot-hint p {
      margin-top: 0;
      line-height: 1.35;
      font-size: 0.6875rem;
      max-width: 100%;
    }
    .booking-slot-placeholder {
      display: block;
      width: 100%;
      margin: 0;
      padding: 0.5rem 0.25rem;
      font-size: 0.875rem;
      line-height: 1.4;
      color: var(--rr-text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Scroll-Reihen: Desktop vertikal (Datum), Mobile horizontal (Datum + Uhrzeit) */
    .booking-scroll-row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.25rem;
    }
    .booking-scroll-row__viewport {
      flex: 1 1 auto;
      min-height: 3rem;
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .booking-scroll-row__viewport::-webkit-scrollbar {
      display: none;
    }
    .booking-scroll-row__list {
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
    }
    .booking-scroll-row__arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      background: transparent;
      color: var(--rr-scroll-arrow-idle);
      cursor: default;
      pointer-events: none;
      line-height: 1;
      flex-shrink: 0;
      transition: color 0.2s ease;
    }
    .booking-scroll-row__arrow.is-active {
      color: var(--rr-scroll-arrow-active);
      cursor: pointer;
      pointer-events: auto;
    }
    .booking-scroll-row__arrow.is-active:focus,
    .booking-scroll-row__arrow.is-active:focus-visible {
      color: var(--rr-scroll-arrow-active);
      outline: none;
    }
    .booking-scroll-row__arrow.is-active:focus-visible {
      box-shadow: 0 0 0 2px rgba(20, 98, 159, 0.35);
      border-radius: 0.25rem;
    }
    @media (hover: hover) {
      .booking-scroll-row__arrow.is-active:hover {
        color: var(--rr-scroll-arrow-hover);
      }
    }
    .booking-scroll-row__arrow--up,
    .booking-scroll-row__arrow--down {
      width: 100%;
      padding: 0.2rem 0;
    }
    .booking-scroll-row__arrow--left,
    .booking-scroll-row__arrow--right {
      width: 1.75rem;
      height: 2.75rem;
      padding: 0;
    }
    @media (min-width: 768px) {
      .booking-step--termin .booking-date-scroll .booking-scroll-row__arrow--up,
      .booking-step--termin .booking-date-scroll .booking-scroll-row__arrow--down {
        display: flex;
      }
      .booking-step--termin .booking-date-scroll__viewport {
        scroll-snap-type: y mandatory;
        overscroll-behavior-y: contain;
      }
      .booking-step--termin .booking-date-scroll__list > * {
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }
    }
    .booking-step--termin .booking-date-scroll {
      flex: 1 1 auto;
      min-height: 0;
      max-height: calc(100% - 0.75rem);
      margin-bottom: 0.125rem;
    }
    .booking-step--termin .booking-date-scroll__viewport {
      max-height: 100%;
    }
    .booking-date-btn {
      min-height: 3rem;
    }

    /* Uhrzeit-Grid – Desktop: 3 Spalten im Mittelbereich */
    .booking-slot-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.375rem;
    }
    .booking-step--termin .booking-slot-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.5rem;
      width: 100%;
      box-sizing: border-box;
    }
    /* Schatten-Luft: Padding am Scrollport (clippt an padding-edge, nicht am Content) */
    .booking-step--termin .booking-slot-scroll .booking-scroll-row__viewport,
    .booking-step--termin .booking-date-scroll__viewport {
      padding: 0.4rem;
      box-sizing: border-box;
    }
    .booking-step--termin .booking-slot-grid .slot-btn {
      padding: 0.5rem 0.375rem;
    }
    .booking-slot-grid .slot-btn {
      min-width: 0;
      white-space: nowrap;
      text-align: center;
      padding-left: 0.375rem;
      padding-right: 0.375rem;
      font-size: 0.8125rem;
    }
    .booking-price-summary {
      padding: 0.875rem 1rem;
    }
    .booking-price-summary .font-headline.text-xl {
      font-size: 1.125rem;
      line-height: 1.2;
    }

    /* Abschluss: Kontakt links, Zusammenfassung rechts */
    .booking-contact-layout {
      display: grid;
      gap: 0.875rem;
      width: 100%;
      min-width: 0;
    }
    .booking-contact-layout__form,
    .booking-contact-layout__sidebar {
      min-width: 0;
    }
    .booking-contact-layout__sidebar .rounded-2xl {
      padding: 0.875rem 1rem;
    }
    @media (min-width: 768px) {
      .booking-contact-layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 1rem;
        align-items: start;
      }
    }
    #booking-panel.booking-panel--contact {
      overflow: hidden;
    }
    #services.booking-services--contact {
      overflow: hidden;
    }
    .booking-step--contact .booking-step-main {
      overflow-x: hidden;
      overflow-y: auto;
      min-height: 0;
      -webkit-overflow-scrolling: touch;
    }
    .booking-step--contact .booking-contact-form {
      padding: 0.875rem 1rem;
    }
    .booking-step--contact .booking-contact-form .space-y-3 > * + * {
      margin-top: 0.625rem;
    }
    .booking-step--contact .booking-contact-form input,
    .booking-step--contact .booking-contact-form textarea {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
    .booking-step--contact .booking-consent-notice {
      margin-top: 0.625rem;
      font-size: 0.6875rem;
      line-height: 1.45;
    }
    .booking-step--contact .booking-step-action {
      margin-top: 0.375rem;
      padding-top: 0.75rem;
    }

    /* Wizard-Schritte: Swipe-Übergang (links raus / rechts rein) */
    #booking-wizard { scroll-margin-top: 5.5rem; }
    #booking-panel { overflow: hidden; }
    #wheel-picker-container {
      overflow: visible;
      padding-inline: 0.35rem;
    }
    @media (min-width: 768px) {
      /* Desktop: Panelhöhe bleibt fix – Inhalt scrollt innen, nichts darf auslaufen */
      #booking-panel,
      #booking-panel.booking-panel--wheels,
      #booking-panel.booking-panel--termin,
      #booking-panel.booking-panel--contact,
      #services.booking-services--wheels,
      #services.booking-services--termin,
      #services.booking-services--contact {
        overflow: hidden;
      }

      .booking-step--wheels .booking-step-main,
      .booking-step--termin .booking-step-main {
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .booking-step--termin .booking-termin-layout {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        align-items: stretch;
      }

      .booking-step--termin .booking-slot-layout__dates,
      .booking-step--termin .booking-slot-layout__times {
        min-height: 0;
        overflow: visible;
      }

      .booking-step--termin .booking-slot-layout__dates {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .booking-step--termin .booking-date-scroll {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow: hidden;
      }

      .booking-step--termin .booking-date-scroll__viewport {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
      }

      .booking-step--termin .booking-slot-layout__times {
        display: flex;
        flex-direction: column;
      }

      .booking-step--termin .booking-slot-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow: visible;
      }

      .booking-step--termin .booking-slot-scroll .booking-scroll-row__viewport {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0.4rem;
        box-sizing: border-box;
      }

      .booking-step--termin .booking-date-scroll__viewport {
        padding: 0.4rem;
        box-sizing: border-box;
      }
    }
    @media (max-width: 767px) {
      #booking-panel.booking-panel--wheels,
      #booking-panel.booking-panel--termin,
      #services.booking-services--wheels,
      #services.booking-services--termin {
        overflow: hidden;
      }
    }
    .booking-step-anim {
      transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
      will-change: transform, opacity;
    }
    .booking-anim-prep-right { transform: translateX(3rem); opacity: 0; }
    .booking-anim-prep-left  { transform: translateX(-3rem); opacity: 0; }
    .booking-anim-out-left   { transform: translateX(-3rem); opacity: 0; }
    .booking-anim-out-right  { transform: translateX(3rem); opacity: 0; }
    @media (prefers-reduced-motion: reduce) {
      .booking-step-anim { transition: none; }
      .tire-picker__glow { transition: none; }
    }
    .wheel-count-badge {
      min-width: 2.75rem;
      border-radius: 0.5rem;
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.35);
      transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }
    .wheel-count-badge:hover:not(.is-active) {
      border-color: rgba(20, 98, 159, 0.55);
      color: #fff;
    }
    .wheel-count-badge.is-active {
      border-color: #14629f;
      background-color: rgba(20, 98, 159, 0.22);
      color: #fff;
      box-shadow: 0 0 16px rgba(20, 98, 159, 0.35);
    }

    /* Buchungs-Wizard: Schritt-Indikator */
    .booking-step-btn {
      border: 1px solid transparent;
    }
    .booking-step-btn__num {
      flex-shrink: 0;
    }
    [data-theme="dark"] .booking-step-btn[data-step-state="pending"] {
      background-color: rgba(255, 255, 255, 0.07) !important;
      color: rgba(255, 255, 255, 0.58) !important;
      border-color: rgba(255, 255, 255, 0.16);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    [data-theme="dark"] .booking-step-btn[data-step-state="pending"] .booking-step-btn__num {
      background-color: rgba(255, 255, 255, 0.11) !important;
      color: rgba(255, 255, 255, 0.72) !important;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    }
    [data-theme="dark"] .booking-step-btn[data-step-state="reachable"] {
      background-color: rgba(255, 255, 255, 0.09) !important;
      color: rgba(255, 255, 255, 0.78) !important;
      border-color: rgba(255, 255, 255, 0.2);
    }
    [data-theme="dark"] .booking-step-btn[data-step-state="reachable"] .booking-step-btn__num {
      background-color: rgba(20, 98, 159, 0.42) !important;
      color: #f0f9ff !important;
      box-shadow: inset 0 0 0 1px rgba(110, 207, 255, 0.35);
    }
    [data-theme="light"] .booking-step-btn[data-step-state="pending"] {
      background-color: rgba(0, 0, 0, 0.04) !important;
      color: rgba(0, 0, 0, 0.48) !important;
      border-color: rgba(0, 0, 0, 0.1);
    }
    [data-theme="light"] .booking-step-btn[data-step-state="pending"] .booking-step-btn__num {
      background-color: rgba(0, 0, 0, 0.06) !important;
      color: rgba(0, 0, 0, 0.55) !important;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    }
    [data-theme="light"] .booking-step-btn[data-step-state="reachable"] {
      background-color: rgba(20, 98, 159, 0.06) !important;
      color: rgba(0, 0, 0, 0.62) !important;
      border-color: rgba(20, 98, 159, 0.18);
    }
    [data-theme="light"] .booking-step-btn[data-step-state="reachable"] .booking-step-btn__num {
      background-color: rgba(20, 98, 159, 0.14) !important;
      color: #14629f !important;
      box-shadow: inset 0 0 0 1px rgba(20, 98, 159, 0.22);
    }

    /* Buchungs-Wizard: Kacheln & Slots */
    [data-service-key],
    [data-booking-date],
    .slot-btn,
    .wheel-count-badge,
    [data-booking-step] {
      transition: border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease,
                  box-shadow 0.45s ease, transform 0.35s ease;
    }
    [data-service-key]:hover:not(.booking-service-card--idle),
    [data-booking-date]:hover {
      border-color: rgba(20, 98, 159, 0.55);
    }

    /* Service-Kacheln: transparente WebP-Illustrationen (Dark & Light) */
    .booking-service-card {
      flex-direction: row;
      align-items: center;
      gap: 1.125rem;
      padding: 1.25rem 1.35rem !important;
      min-height: 9.5rem;
    }
    /* Ungewählt: leicht erhaben (Tiefe statt Brand-Blau) */
    .booking-service-card--idle {
      background-color: #6a6a74;
      border-color: rgba(255, 255, 255, 0.2);
      box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    .booking-service-card--idle:hover {
      border-color: rgba(255, 255, 255, 0.34);
      box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
      transform: translateY(-1px);
    }
    .booking-service-card--selected {
      background-color: rgba(20, 98, 159, 0.15);
      border-color: #14629f;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    }
    .booking-service-card--selected:hover {
      border-color: #14629f;
    }
    [data-theme="light"] .booking-service-card--idle {
      background-color: #eef0f3;
      border-color: rgba(0, 0, 0, 0.14);
      box-shadow:
        0 3px 10px rgba(15, 23, 42, 0.08),
        0 1px 2px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    [data-theme="light"] .booking-service-card--idle:hover {
      background-color: #e8eaee;
      border-color: rgba(0, 0, 0, 0.2);
      box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.11),
        0 1px 3px rgba(15, 23, 42, 0.07),
        inset 0 1px 0 #fff;
    }
    [data-theme="light"] .booking-service-card--selected {
      background-color: rgba(20, 98, 159, 0.1);
      border-color: #14629f;
      box-shadow: 0 2px 10px rgba(20, 98, 159, 0.18);
    }
    .booking-service-card__media {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: auto;
      margin: 0;
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      line-height: 0;
    }
    .booking-service-card__img {
      display: block;
      width: 7.5rem;
      height: auto;
      aspect-ratio: 1 / 1;
      object-fit: contain;
      object-position: center;
      background: transparent;
      border: 0;
      box-shadow: none;
      pointer-events: none;
      user-select: none;
    }
    .booking-service-card__img--dark {
      display: none;
    }
    [data-theme="dark"] .booking-service-card__img--light {
      display: none;
    }
    [data-theme="dark"] .booking-service-card__img--dark {
      display: block;
    }
    .booking-service-card__body {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-width: 0;
      justify-content: center;
    }
    .booking-service-card__meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.375rem 0.625rem;
      margin-top: 0.5rem;
    }
    .booking-service-card__price,
    .booking-service-card__badge {
      margin: 0;
    }
    .booking-service-grid {
      align-items: stretch;
      gap: 1rem;
      width: 100%;
    }
    .booking-service-grid [data-service-key] {
      height: 100%;
    }

    @media (min-width: 768px) {
      .booking-step--service .booking-service-grid {
        gap: 1rem;
      }
    }
    .slot-btn:hover:not(:disabled) {
      border-color: rgba(20, 98, 159, 0.6);
      background-color: rgba(20, 98, 159, 0.12);
    }
    .slot-btn.is-selected {
      border-color: #14629f;
      background-color: rgba(20, 98, 159, 0.22);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    }

    [data-theme="light"] .tire-picker {
      --tire-accent: #6ecfff;
      --tire-badge-fill: #6ecfff;
    }
    [data-theme="light"] .tire-line { stroke: rgba(0, 0, 0, 0.22); }
    [data-theme="light"] .tire-line.is-active {
      stroke: var(--tire-accent);
      filter: none;
    }
    [data-theme="light"] .tire-line-glow {
      stroke: var(--tire-accent);
      filter: none;
    }
    [data-theme="light"] .tire-line-dot { fill: rgba(0, 0, 0, 0.28); }
    [data-theme="light"] .tire-line-dot.is-active {
      fill: var(--tire-accent);
      filter: none;
    }
    [data-theme="light"] .tire-badge {
      background: #ffffff;
      border-color: rgba(0, 0, 0, 0.14);
      color: #3f3f46;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    [data-theme="light"] .tire-badge:hover {
      border-color: rgba(78, 200, 245, 0.65);
      color: #14629f;
    }
    [data-theme="light"] .tire-badge.is-active,
    [data-theme="light"] .tire-badge.is-anim-preview {
      background: var(--tire-accent);
      border-color: var(--tire-accent);
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(10, 74, 110, 0.35);
      box-shadow: 0 0 0 1.5px rgba(78, 200, 255, 0.85);
    }
    [data-theme="light"] .tire-badge.is-anim-out {
      background: #ffffff;
      border-color: rgba(0, 0, 0, 0.14);
      color: #3f3f46;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    [data-theme="light"] .wheel-count-badge {
      border-color: rgba(0, 0, 0, 0.12);
      color: rgba(0, 0, 0, 0.35);
    }
    [data-theme="light"] .wheel-count-badge.is-active { color: #fff; }

    /* Helles Design: Tailwind-Utility-Overrides (Wizard + Admin-Embed) */
    [data-theme="light"] .text-white {
      color: var(--rr-heading);
    }
    [data-theme="light"] .text-neutral-200 { color: #3f3f46; }
    [data-theme="light"] .text-neutral-300 { color: var(--rr-text); }
    [data-theme="light"] .text-neutral-400 { color: var(--rr-text-muted); }
    [data-theme="light"] .text-neutral-500 { color: var(--rr-text-subtle); }

    [data-theme="light"] .bg-neutral-950,
    [data-theme="light"] .bg-neutral-950\/40,
    [data-theme="light"] .bg-neutral-950\/50,
    [data-theme="light"] .bg-neutral-950\/60 {
      background-color: var(--rr-card-deep) !important;
    }
    [data-theme="light"] .bg-neutral-900,
    [data-theme="light"] .bg-neutral-900\/30,
    [data-theme="light"] .bg-neutral-900\/40,
    [data-theme="light"] .bg-neutral-900\/50,
    [data-theme="light"] .bg-neutral-900\/60,
    [data-theme="light"] .bg-neutral-900\/80 {
      background-color: var(--rr-card) !important;
    }
    [data-theme="light"] .bg-neutral-800 { background-color: #f4f4f5 !important; }

    [data-theme="light"] .border-white\/5,
    [data-theme="light"] .border-white\/10 { border-color: var(--rr-border) !important; }

    [data-theme="light"] .shadow-black\/40 { --tw-shadow-color: rgba(0, 0, 0, 0.08); }

    [data-theme="light"] .hover\:text-white:hover {
      color: var(--rr-heading) !important;
    }

    [data-theme="light"] .btn-outline.text-white,
    [data-theme="light"] a.btn-outline.text-white,
    [data-theme="light"] button.btn-outline.text-white {
      color: var(--rr-btn-outline-text) !important;
    }

    /* Dunkelmodus: Karten etwas heller als früheres Schwarz */
    [data-theme="dark"] .bg-neutral-950 { background-color: rgba(68, 68, 76, 0.95) !important; }
    [data-theme="dark"] .bg-neutral-950\/40 { background-color: rgba(68, 68, 76, 0.55) !important; }
    [data-theme="dark"] .bg-neutral-950\/50 { background-color: rgba(68, 68, 76, 0.62) !important; }
    [data-theme="dark"] .bg-neutral-950\/60 { background-color: rgba(68, 68, 76, 0.72) !important; }
    [data-theme="dark"] .bg-neutral-900,
    [data-theme="dark"] .bg-neutral-900\/30 { background-color: rgba(82, 82, 90, 0.55) !important; }
    [data-theme="dark"] .bg-neutral-900\/40 { background-color: rgba(82, 82, 90, 0.65) !important; }
    [data-theme="dark"] .bg-neutral-900\/50 { background-color: rgba(82, 82, 90, 0.72) !important; }
    [data-theme="dark"] .bg-neutral-900\/60 { background-color: rgba(82, 82, 90, 0.78) !important; }
    [data-theme="dark"] .bg-neutral-900\/80 { background-color: rgba(82, 82, 90, 0.88) !important; }
    [data-theme="dark"] .bg-neutral-800 { background-color: #5a5a64 !important; }

    /* ── Mobile Buchungswizard (Desktop unverändert ab 768px) ── */
    @media (max-width: 767px) {
      #booking-step-indicator {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        justify-content: stretch;
        gap: 0.25rem;
        padding-bottom: 0;
        overflow: visible;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      #booking-step-indicator::-webkit-scrollbar {
        display: none;
      }
      #booking-step-indicator .booking-step-btn {
        flex-shrink: 1;
        justify-content: center;
        min-width: 0;
        width: 100%;
        padding-inline: 0.25rem;
        padding-block: 0.3125rem;
        font-size: 0.625rem;
        gap: 0.25rem;
        white-space: nowrap;
      }
      #booking-step-indicator .booking-step-btn__num {
        width: 1.125rem !important;
        height: 1.125rem !important;
        font-size: 0.5625rem !important;
        flex-shrink: 0;
      }

      .booking-back-link--has-short .booking-back-label--full {
        display: none;
      }
      .booking-back-link--has-short .booking-back-label--short {
        display: inline;
      }

      .booking-step-head--stacked {
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 0.5rem;
        row-gap: 0.5rem;
        align-items: center;
      }
      .booking-step-head--stacked .booking-step-head__back {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
      }
      .booking-step-head--stacked .booking-step-head__badge {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        justify-self: end;
        max-width: 100%;
        padding: 0.375rem 0.5rem !important;
      }
      .booking-step-head--stacked .booking-step-head__badge > div,
      .booking-step-head--stacked .booking-step-head__badge > p {
        white-space: nowrap;
        font-size: 0.6875rem;
        line-height: 1.25;
      }
      .booking-step-head--stacked .booking-step-intro {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: center;
      }

      /* Kompakte Infoboxen */
      .booking-mobile-info-box {
        padding: 0.625rem 0.75rem !important;
      }
      .booking-mobile-info-box .text-xs {
        font-size: 0.625rem !important;
        letter-spacing: 0.08em !important;
      }
      .booking-mobile-info-box .booking-service-info__list li,
      .booking-mobile-info-box .text-sm {
        font-size: 0.6875rem !important;
        line-height: 1.35 !important;
      }
      .booking-mobile-info-box .font-headline.text-xl {
        font-size: 1rem !important;
      }
      .booking-mobile-info-box .space-y-1\.5 > * + * {
        margin-top: 0.25rem !important;
      }

      /* Schritt 1 – kompakte Service-Karten im 2×2-Raster */
      .booking-step--service .booking-step-head p {
        font-size: 0.8125rem;
      }
      .booking-step--service .booking-step-main--center {
        justify-content: flex-start;
      }
      .booking-step--service .booking-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        align-items: stretch;
        gap: 0.5rem;
      }
      .booking-step--service [data-service-key] {
        padding: 0.625rem !important;
        min-height: 0 !important;
        height: 100%;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
      }
      .booking-step--service .booking-service-card__media {
        width: 100%;
        margin-bottom: 0.4rem;
      }
      .booking-step--service .booking-service-card__img {
        width: min(100%, 4.25rem);
        margin-inline: auto;
      }
      .booking-step--service .booking-service-grid {
        gap: 0.5rem;
      }
      .booking-step--service .booking-service-card__body {
        width: 100%;
        align-items: center;
        text-align: center;
      }
      .booking-step--service .booking-service-card__meta {
        justify-content: center;
        margin-top: 0.25rem;
      }
      .booking-step--service [data-service-key] .font-headline {
        font-size: 0.8125rem !important;
        line-height: 1.25;
      }
      .booking-step--service [data-service-key] .text-xs {
        display: none;
      }
      .booking-step--service .booking-service-card__price {
        font-size: 0.6875rem !important;
      }
      .booking-step--service .booking-service-card__badge {
        font-size: 0.5625rem !important;
        padding: 0.125rem 0.375rem !important;
        line-height: 1.2;
      }

      /* Schritt 3 – horizontale Reihen + Infoboxen */
      .booking-step--termin .booking-termin-layout {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
      }
      .booking-step--termin .booking-slot-layout__dates,
      .booking-step--termin .booking-slot-layout__times,
      .booking-step--termin .booking-termin-sidebar {
        width: 100%;
      }
      .booking-step--termin .booking-slot-hint {
        display: none;
      }
      .booking-step--termin .booking-slot-layout__times {
        overflow: visible;
      }
      .booking-step--termin .booking-termin-sidebar {
        gap: 0.5rem;
      }
      .booking-step--termin .booking-date-scroll {
        flex: none;
        max-height: none;
        margin-bottom: 0;
      }

      /* Horizontal: 3 sichtbar, Pfeile links/rechts */
      .booking-step--termin .booking-scroll-row {
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
        width: 100%;
      }
      .booking-step--termin .booking-date-scroll .booking-scroll-row__arrow--left,
      .booking-step--termin .booking-date-scroll .booking-scroll-row__arrow--right,
      .booking-step--termin .booking-slot-scroll .booking-scroll-row__arrow--left,
      .booking-step--termin .booking-slot-scroll .booking-scroll-row__arrow--right {
        display: flex !important;
        flex-shrink: 0;
        width: 1.75rem;
      }
      .booking-step--termin .booking-scroll-row__arrow--up,
      .booking-step--termin .booking-scroll-row__arrow--down {
        display: none !important;
      }
      .booking-step--termin .booking-scroll-row__viewport {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .booking-step--termin .booking-scroll-row__viewport::-webkit-scrollbar {
        display: none;
      }
      .booking-step--termin .booking-scroll-row__list {
        flex-direction: row;
        gap: 0.375rem;
        width: max-content;
        min-width: 100%;
      }
      .booking-step--termin .booking-scroll-row__list > * {
        flex: 0 0 var(--scroll-item-width, 7.5rem);
        width: var(--scroll-item-width, 7.5rem);
        max-width: var(--scroll-item-width, 7.5rem);
        scroll-snap-align: start;
        scroll-snap-stop: always;
        min-width: 0;
        box-sizing: border-box;
      }
      .booking-step--termin .booking-date-btn {
        min-height: 3.25rem;
        padding: 0.5rem 0.375rem;
        text-align: center;
      }
      .booking-step--termin .booking-date-btn .text-xs {
        font-size: 0.625rem;
      }
      .booking-step--termin .booking-slot-grid {
        display: flex;
        flex-direction: row;
        gap: 0.375rem;
        width: max-content;
        min-width: 100%;
      }
      .booking-step--termin .slot-btn {
        flex: 0 0 var(--scroll-item-width, 7.5rem);
        width: var(--scroll-item-width, 7.5rem);
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
        text-align: center;
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }

      /* Schritt 4 – Zusammenfassung kompakt über Formular */
      .booking-step--contact .booking-contact-layout {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
      }
      .booking-step--contact .booking-contact-layout__sidebar {
        order: -1;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .booking-step--contact .booking-contact-form {
        padding: 0.625rem 0.75rem;
      }
      .booking-step--contact .booking-consent-notice {
        font-size: 0.75rem !important;
        line-height: 1.4;
      }
      .booking-step--contact .booking-step-main {
        overflow-y: visible;
      }
      .booking-step--contact .booking-step-action {
        padding-top: 0.75rem;
      }
    }

    @media (min-width: 768px) {
      .booking-scroll-row__arrow--left,
      .booking-scroll-row__arrow--right {
        display: none !important;
      }
      .booking-step--termin .booking-date-scroll .booking-scroll-row__arrow--up,
      .booking-step--termin .booking-date-scroll .booking-scroll-row__arrow--down {
        display: flex !important;
      }
      .booking-slot-scroll .booking-scroll-row__arrow--left,
      .booking-slot-scroll .booking-scroll-row__arrow--right {
        display: none !important;
      }
      .booking-slot-scroll {
        display: block;
      }
      /* Desktop: Scroll bleibt am Viewport – overflow:visible würde Schatten an Eltern clippen */
      .booking-step--termin .booking-slot-scroll .booking-scroll-row__viewport {
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0.4rem;
        box-sizing: border-box;
      }
    }

/* Admin embed page only – avoid global html/body side effects on index.html */
html.booking-wizard-embed-page,
body.booking-wizard-embed-page {
  margin: 0;
  min-height: 100%;
  background: var(--rr-bg, #484850);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
html.booking-wizard-embed-page::-webkit-scrollbar,
body.booking-wizard-embed-page::-webkit-scrollbar { width: 4px; }
html.booking-wizard-embed-page::-webkit-scrollbar-thumb,
body.booking-wizard-embed-page::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}
.booking-wizard-embed {
  padding: 1rem 1.25rem 1.5rem;
  max-width: 100%;
  background: var(--rr-bg);
  min-height: 100%;
}
.booking-wizard-embed #booking-wizard {
  scroll-margin-top: 0;
}

/* Termin-Konflikt: Hinweis mit sanftem Glas-Look, dann zurück in den Flow */
.booking-slot-conflict-flyer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10050;
  pointer-events: none;
  margin: 0;
  will-change: transform, width;
}
.booking-slot-conflict-flyer > .booking-slot-conflict {
  position: relative;
  width: 100%;
  margin: 0;
}
.booking-slot-conflict-host {
  position: relative;
  display: none;
  margin-top: 0;
  min-height: 0;
}
.booking-slot-conflict-host--active {
  display: block;
  margin-top: 1rem;
}
.booking-slot-conflict-host--reserving {
  min-height: 0;
}
.booking-slot-conflict {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  background-color: var(--conflict-bg);
  border-color: var(--conflict-border);
  color: var(--conflict-text);
  opacity: var(--conflict-opacity);
  box-shadow: var(--conflict-shadow);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.booking-slot-conflict.hidden {
  display: none !important;
}
.booking-slot-conflict__text {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.booking-slot-conflict__badge {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.1rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
  background: var(--conflict-badge-bg);
  color: var(--conflict-badge-text);
  border: 1px solid var(--conflict-badge-border);
}
:root[data-theme="dark"] .booking-slot-conflict {
  --conflict-bg: rgba(251, 191, 36, 0.11);
  --conflict-border: rgba(251, 191, 36, 0.3);
  --conflict-text: #fde68a;
  --conflict-opacity: 0.92;
  --conflict-shadow: none;
  --conflict-badge-bg: rgba(251, 191, 36, 0.16);
  --conflict-badge-text: #fcd34d;
  --conflict-badge-border: rgba(251, 191, 36, 0.35);
}
:root[data-theme="light"] .booking-slot-conflict {
  --conflict-bg: rgba(245, 158, 11, 0.09);
  --conflict-border: rgba(217, 119, 6, 0.26);
  --conflict-text: #92400e;
  --conflict-opacity: 0.94;
  --conflict-shadow: none;
  --conflict-badge-bg: rgba(245, 158, 11, 0.14);
  --conflict-badge-text: #b45309;
  --conflict-badge-border: rgba(217, 119, 6, 0.28);
}
.booking-slot-conflict--settled {
  font-size: 0.875rem;
  font-weight: 400;
  text-align: left;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.booking-slot-conflict--announce {
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  border-width: 1.5px;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  animation: booking-slot-conflict-blink 0.45s ease-in-out 2;
  animation-fill-mode: none;
}
:root[data-theme="dark"] .booking-slot-conflict--announce {
  --conflict-bg: rgba(48, 40, 22, 0.84);
  --conflict-border: rgba(251, 191, 36, 0.48);
  --conflict-text: #fef3c7;
  --conflict-opacity: 0.98;
  --conflict-shadow: 0 18px 50px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(251, 191, 36, 0.12);
  --conflict-badge-bg: rgba(251, 191, 36, 0.82);
  --conflict-badge-text: #292524;
  --conflict-badge-border: rgba(255, 255, 255, 0.2);
}
:root[data-theme="light"] .booking-slot-conflict--announce {
  --conflict-bg: rgba(255, 247, 225, 0.9);
  --conflict-border: rgba(245, 158, 11, 0.58);
  --conflict-text: #44403c;
  --conflict-opacity: 0.98;
  --conflict-shadow: 0 16px 44px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(245, 158, 11, 0.1);
  --conflict-badge-bg: rgba(245, 158, 11, 0.88);
  --conflict-badge-text: #fffbeb;
  --conflict-badge-border: rgba(255, 255, 255, 0.35);
  animation-name: booking-slot-conflict-blink-light;
}
.booking-slot-conflict--announce .booking-slot-conflict__badge {
  width: 1.625rem;
  height: 1.625rem;
  margin-top: 0;
  font-size: 0.75rem;
}
.booking-slot-conflict--announce .booking-slot-conflict__text {
  text-align: center;
}
.booking-slot-conflict--travel {
  font-weight: 500;
}
@keyframes booking-slot-conflict-blink {
  0%, 100% {
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42), 0 0 0 0 rgba(251, 191, 36, 0.45);
  }
  50% {
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42), 0 0 0 6px rgba(251, 191, 36, 0.22);
  }
}
@keyframes booking-slot-conflict-blink-light {
  0%, 100% {
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.14), 0 0 0 0 rgba(245, 158, 11, 0.38);
  }
  50% {
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.14), 0 0 0 6px rgba(245, 158, 11, 0.2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .booking-slot-conflict--announce {
    animation: none;
    font-size: 0.875rem;
    font-weight: 400;
    text-align: left;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .booking-slot-conflict--announce .booking-slot-conflict__text {
    text-align: left;
  }
}

/* Pflichtfelder im Buchungsassistenten – fehlende Auswahl
   !important: Light-Theme mappt .border-white/10 auf --rr-border mit !important */
#booking-panel .booking-wheel-extra__select.booking-field-invalid,
#booking-panel .booking-date-scroll.booking-field-invalid,
#booking-panel .booking-slot-scroll.booking-field-invalid {
  border: 2px solid #ef4444 !important;
  border-color: #ef4444 !important;
  border-radius: 0.75rem;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45);
}

#booking-panel .booking-wheel-extra__select.booking-field-invalid {
  border-radius: 0.5rem;
}

@media (min-width: 640px) {
  #booking-panel .booking-wheel-extra__select.booking-field-invalid {
    border-radius: 0.75rem;
  }
}