/* =============================================================================
   style.css v3 — miraBOOK Premium 2026 (Cal.com-Container-Pattern)
   -----------------------------------------------------------------------------
   - EIN großer Container statt 3 Cards
   - Innere 3-Col-Grid mit subtilen Vertical-Dividern
   - Kompakte Service-Sidebar, Calendar (Mid), Slots (Right, scrollbar)
   - Day-Cells als echte Buttons mit eigenem Background
   - Today invertiert (white-on-dark / dark-on-light)
   - Mobile = ein langer Scroll (kein Step-by-Step)
   - Sticky Summary-Footer mit Live-Preview
   ============================================================================= */

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  background: var(--surface-canvas);
  color: var(--ink-default);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

body.embedded {
  background: transparent;
  /* min-height: 100vh würde im iframe-Embed den postMessage-Resize-Loop
     blockieren: iframe.height auf 1500 → viewport 1500 → body min-height
     1500 → bleibt 1500 (kann nie schrumpfen). Im Embed: 0 damit body
     der echten Content-Höhe folgt. */
  min-height: 0;
}

img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ── App-Shell ──────────────────────────────────────────────────────────── */
.app-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

@media (min-width: 900px) {
  .app-shell {
    padding: var(--space-12) var(--space-6);
    padding-top: 80px; /* topbar-bg (72px) + 8px Luft */
  }
}

/* ── Topbar-Hintergrund: Frosted-Glass-Gradient ─────────────────────────── */
.topbar-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--surface-canvas) 85%, transparent) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 99;
}

body.embedded .topbar-bg { display: none; }
body.has-intro .topbar-bg { opacity: 0; }

/* ── Topbar: Logo links, Controls-Pill rechts ───────────────────────────── */
.topbar {
  position: fixed;
  top: 0;
  left: var(--space-4);
  right: var(--space-4);
  height: 60px;                /* = topbar-bg Höhe → Logo + Pille vertikal zentriert */
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  pointer-events: none;
}

.topbar > * { pointer-events: auto; }

.topbar-logo {
  height: 46px;              /* größer + sichtbarer; Breite automatisch (Logo+Schriftzug) */
  width: auto;
  max-width: min(72vw, 300px); /* auf Mobile nicht neben den Controls rauslaufen */
  object-fit: contain;
  display: block;
}
/* Optionales Dark-Mode-Logo (heller Schriftzug): Tenant setzt --tb-logo-dark am img
   via config.logoUrlDark. Ohne Variable wird die content-Regel ungültig → ignoriert
   → normales Logo bleibt. Tenant-generisch, kein Kunden-Hardcode im geteilten CSS. */
[data-theme="dark"] .topbar-logo,
[data-theme="dark"] .brand-band-logo { content: var(--tb-logo-dark); }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .topbar-logo,
  [data-theme="system"] .brand-band-logo { content: var(--tb-logo-dark); }
}

/* Unified Controls-Pill: Lang-Switch + Theme-Toggle in einer Kapsel */
.topbar-controls {
  display: inline-flex;
  align-items: center;
  background: var(--surface-elevated);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border-brand);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Lang-Switch + Theme-Toggle: innerhalb der Controls-Pill transparent */
.topbar-controls .lang-switch,
.topbar-controls .theme-toggle {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  border-radius: 0;
}

/* Trennstrich zwischen Lang-Switch und Theme-Toggle (wie miraMENU) */
.ctrl-divider {
  width: 1px;
  height: 18px;
  background: var(--border-default);
  margin: 0 2px;
  flex-shrink: 0;
  display: block;
}


/* ── Header — Steps-Bar (zentriert oben) ───────────────────────────────── */
.app-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-8);
}

.divider-ornament {
  width: 100%;
  max-width: 280px;
  margin-top: var(--space-3);
  line-height: 0;
}

.divider-ornament img {
  width: 100%;
  height: auto;
  opacity: 0.75;
}

.steps-bar {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 6px;
  /* Die Leiste kommt leer aus dem Server und wird von booking.js gefuellt. Ohne
     reservierte Hoehe wuchs sie dabei von 12 px (nur Innenabstand) auf 44 px und
     schob alles darunter nach unten — Teil des gemessenen Layout-Sprungs von
     0,148 am 2026-08-09 (erlaubt sind 0,1). 44 px ist die gefuellte Hoehe,
     gemessen auf 390 px und auf 1280 px, sie ist auf beiden gleich. */
  min-height: 44px;
  background: var(--surface-elevated);
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px var(--border-brand), var(--shadow-sm);
}

.step-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  color: var(--ink-subtle);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  transition: color var(--duration-quick) var(--ease-out);
}

.step-item.is-active {
  color: var(--ink-strong);
  background: var(--surface-sunken);
}

.step-item.is-done { color: var(--ink-default); }

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.step-item.is-active .step-num {
  background: var(--accent);
  color: var(--ink-on-brand);
}

.step-item.is-done .step-num {
  background: var(--accent-soft);
  color: var(--accent);
}

.step-divider {
  width: 16px;
  height: 1px;
  background: var(--border-default);
  margin: 0 2px;
}

@media (max-width: 599px) {
  .step-item .step-label { display: none; }
  .step-item { padding: 6px; }

  /* Theme-Toggle auf Mobile: nur aktiver Icon sichtbar, Tap cyclet durch Modi. */
  .theme-toggle button:not(.is-active) { display: none; }

  /* Bottom-Safe-Area: iPhone-Notch + Home-Indicator brauchen Platz unten.
     Sonst wird der letzte Button vom Home-Bar abgeschnitten. */
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Steps-Bar RUNTER unter die fixed Topbar.
     calc = top(16px) + topbar-Höhe(40px) + Luft(12px). */
  .app-header {
    padding-top: calc(var(--space-4) + 52px);
    margin-bottom: var(--space-6);
  }
}

/* ── Pane = Step-Container ─────────────────────────────────────────────── */
.pane {
  display: none;
}

/* Sanfter Flow zwischen den Schritten — re-triggert bei jedem Aktivieren.
   fill-mode: backwards (NICHT both!) — sonst friert der to-Keyframe ein
   computed `transform: matrix(1,0,0,1,0,0)` ein, das die Pane zum Containing-
   Block für `position: fixed` Kinder macht. Dann klebt die fixed Continue-Bar
   am Pane-Ende statt am Viewport-Rand und überdeckt die letzten Slots.
   backwards lässt die Pane nach der Animation auf transform:none zurückfallen. */
.pane[data-pane-active="true"] {
  display: block;
  animation: pane-enter .6s cubic-bezier(.22,.61,.36,1) backwards;
}

@keyframes pane-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 1 — Service-Picker (volle Breite, fokussiert)
   ════════════════════════════════════════════════════════════════════════ */
.service-picker {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.picker-title {
  font-family: var(--font-display);
  font-size: var(--text-display-size);
  line-height: var(--text-display-line);
  letter-spacing: var(--text-display-tracking);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
  margin-bottom: var(--space-3);
}

.picker-subtitle {
  font-size: var(--text-body-lg-size);
  color: var(--ink-muted);
  margin-bottom: var(--space-10);
}

/* Studio-Hinweis (z.B. seriöses Wellness-Studio, keine erotischen Anwendungen).
   Bewusst nur ein DEZENTER, kompakter Ein-Zeilen-Hinweis (kein grosser Kasten):
   ruhig, einladend, minimale Höhe, damit die Seite nicht zusätzlich scrollt.
   Lotus-Icon, KEIN Warndreieck, KEIN Rot. Positive Rahmung (Recherche 2026). */
.studio-notice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin: 0 auto var(--space-6, 16px);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink-muted);
}
.studio-notice__icon {
  flex-shrink: 0;
  color: var(--accent);
  display: inline-flex;
}
.studio-notice__icon svg { width: 16px; height: 16px; }
.studio-notice__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: center;
}

/* Gäste-Stepper — groß, fokussiert */
.guest-stepper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) 0;
}

.stepper-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.stepper-btn {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-elevated);
  color: var(--ink-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;  /* verhindert Safari-Doppeltipp-Zoom bei schnellem +/- Tippen */
  box-shadow: var(--shadow-inset-border), var(--shadow-sm);
  transition:
    background var(--duration-quick) var(--ease-out),
    transform var(--duration-instant) var(--ease-out),
    opacity var(--duration-quick) var(--ease-out);
}

.stepper-btn svg { width: 22px; height: 22px; }

.stepper-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent);
}

.stepper-btn:active:not(:disabled) { transform: scale(0.92); }
.stepper-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.stepper-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
}

.stepper-number {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 1;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.04em;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

.stepper-unit {
  font-size: var(--text-body-size);
  color: var(--ink-muted);
  font-weight: var(--weight-medium);
  margin-top: var(--space-2);
}

.stepper-hint {
  font-size: var(--text-body-sm-size);
  color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
}

/* ── Multi-Service-Liste (Friseur, Nagel, Beauty, Coaching) ─────────────── */
.service-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  text-align: left;
}

.service-category-header {
  font-size: var(--text-caption-size);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);   /* WCAG-AA: --ink-subtle (3.1:1) war zu hell; muted = Label-Token, ≥4.5:1 */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--space-4) 0 var(--space-1);
}

.service-category-header:first-child {
  margin-top: 0;
}

/* ── Kategorie-Filterleiste (aktiv ab ≥2 Kategorien) ─────────────────────── */
.service-cat-nav {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-1);
  scrollbar-width: none;                 /* Firefox: Scrollbar aus */
  -ms-overflow-style: none;
}
.service-cat-nav::-webkit-scrollbar { display: none; }   /* WebKit: Scrollbar aus */
.service-cat-chip {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-inset-border);
  color: var(--ink-muted);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition:
    color var(--duration-quick) var(--ease-out),
    background var(--duration-quick) var(--ease-out);
}
.service-cat-chip:hover { color: var(--ink-strong); }
.service-cat-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.service-cat-chip.is-active {
  background: var(--accent);
  color: var(--ink-on-brand);
  box-shadow: none;
}

/* Gruppen: sichtbar; der Filter blendet Nicht-Aktive aus. */
.service-group.is-hidden { display: none; }

.service-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset-border);
  cursor: pointer;
  transition:
    box-shadow var(--duration-quick) var(--ease-out),
    transform var(--duration-instant) var(--ease-out);
}

.service-item:hover:not(.is-selected) {
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm);
}

.service-item.is-selected {
  box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-sm);
  background: var(--accent-soft);
}

.service-check {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-md);
  background: var(--surface-canvas);
  box-shadow: var(--shadow-inset-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-on-brand);
  flex-shrink: 0;
  transition: background var(--duration-quick) var(--ease-out);
}

.service-item.is-selected .service-check {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.service-check svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity var(--duration-quick) var(--ease-out);
}

.service-item.is-selected .service-check svg {
  opacity: 1;
}

.service-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.service-item-name {
  font-family: var(--font-display);
  font-size: var(--text-body-size);
  font-weight: var(--weight-medium);
  color: var(--ink-strong);
  line-height: 1.3;
}

.service-item-meta {
  font-size: var(--text-body-sm-size);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.service-item-price {
  font-family: var(--font-display);
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
}

/* "Free"-Badge fuer 0-Preis-Services (z.B. Erstberatung) */
.service-item-free {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-small-size, 0.8125rem);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-strong, var(--accent));
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  padding: 0.15em 0.6em;
  border-radius: 999px;
  white-space: nowrap;
}

/* Live-Summary in Step 1 */
.service-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  gap: var(--space-4);
}

.service-summary.is-empty {
  background: transparent;
  box-shadow: var(--shadow-inset-border);
  color: var(--ink-muted);
  font-size: var(--text-body-sm-size);
  text-align: center;
  padding: var(--space-3) var(--space-4);
  justify-content: center;
}

.service-summary-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.service-summary-label {
  font-size: var(--text-caption-size);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.service-summary-value {
  font-family: var(--font-display);
  font-size: var(--text-body-size);
  font-weight: var(--weight-medium);
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-summary-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.service-summary-duration {
  font-size: var(--text-body-sm-size);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.service-summary-price {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm-size);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

/* ── „Für wen ist der Termin?" — erste Frage in Schritt 1 ─────────────────
   Steht VOR der Behandlungsliste und ist immer sichtbar. Der alte Umschalter
   klappte erst nach dem Antippen einer Behandlung oben auf, während der Gast
   unten in der Liste suchte — er hat ihn nie gesehen. */
.party-pick {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.party-pick__label {
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
  margin-bottom: var(--space-3);
}
/* Zahlen statt Wortknöpfe: "1 Person / 2 Personen / 3 Personen / 4 Personen"
   nebeneinander bricht die Zeile, sobald ein Betrieb mehr als drei
   Behandler:innen hat (Bangkok hat inzwischen vier). Die Frage lautet deshalb
   "Für wie viele Personen?", und dann genügt die Zahl. Gleich breite Spalten,
   eine Zeile, egal ob zwei oder sechs. --party-cols kommt aus dem JS. */
.party-pick__nums {
  display: grid;
  grid-template-columns: repeat(var(--party-cols, 2), 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--surface-canvas);
  border-radius: var(--radius-md);
}
.party-num {
  min-height: 48px;
  border: none;
  border-radius: calc(var(--radius-md) - 4px);
  background: transparent;
  color: var(--ink-default);
  font-family: var(--font-display);
  font-size: var(--text-body-lg-size, 17px);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.party-num.is-active {
  background: var(--surface-elevated);
  color: var(--accent);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border-brand);
}
.party-num:not(.is-active):hover { color: var(--ink-strong); }

/* Einzeln / Paar: zwei gleich breite Wort-Knoepfe mit Unterzeile. Ersetzt die
   Zahlen-Auswahl (Kundin: online nur einzeln oder zu zweit). */
.party-pick__opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--surface-canvas);
  border-radius: var(--radius-md);
}
.party-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 58px;
  padding: 8px 6px;
  border: none;
  border-radius: calc(var(--radius-md) - 4px);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.party-opt__name {
  font-family: var(--font-display);
  font-size: var(--text-body-lg-size, 17px);
  font-weight: var(--weight-semibold);
  color: var(--ink-default);
}
.party-opt__sub {
  font-size: var(--text-caption-size, 12px);
  color: var(--ink-muted);
  line-height: 1.2;
  text-align: center;
}
.party-opt.is-active {
  background: var(--surface-elevated);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border-brand);
}
.party-opt.is-active .party-opt__name { color: var(--accent); }
.party-opt:not(.is-active):hover .party-opt__name { color: var(--ink-strong); }

/* ── Mehr Personen als Behandler:innen: direkt anrufen ────────────────────
   Hier stand ein Knopf, der beim Antippen ZWEI ANDERE Knöpfe freilegte. Ein
   verschenkter Klick — und er sah nicht mal wie ein Knopf aus, weil er
   zurückhaltend gestaltet war. Also weg damit: Anrufen und WhatsApp stehen
   sofort da. Ein Telefonhörer erkennt jeder als antippbar, eine graue Zeile
   mit dünnem Rahmen nicht.

   Bewusst KLEIN gehalten: es ist der Ausnahmeweg. Er soll gefunden werden,
   aber nicht mit der Online-Buchung konkurrieren. */
.party-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}
.party-more__text {
  flex: 0 0 auto;
  max-width: 46ch;
  font-size: var(--text-body-sm-size);
  color: var(--ink-muted);
  line-height: 1.45;
}
.party-more__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}
/* Kompakte Variante des Kontakt-Knopfs: dieselbe Optik (Pille, Rahmen, Symbol),
   nur kleiner. Die Optik trägt die Erkennbarkeit, die Größe die Rangfolge. */
.contact-btn--sm {
  min-height: 38px;
  padding: 0 var(--space-3);
  font-size: var(--text-body-sm-size);
}
/* Schmal: Text oben, Knöpfe darunter auf voller Breite und gleich groß.
   Nebeneinander passt es erst, wenn der Satz nicht mehr umbricht — sonst hängen
   die Knöpfe links und rechts klafft eine Lücke. */
@media (max-width: 640px) {
  .party-more { flex-direction: column; align-items: stretch; }
  .party-more__text { min-width: 0; }
  .party-more__actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Rückfall für Betriebe OHNE hinterlegte Nummer: dort führt der Weg zu einem
   Formular, und ein Knopf ist die ehrliche Ansage. */
.party-ask {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: 10px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  color: var(--ink-muted);
  font-family: inherit;
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}
.party-ask:hover { color: var(--ink-strong); }
.party-ask.is-active {
  color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.party-pick__hint {
  margin-top: var(--space-3);
  font-size: var(--text-body-sm-size);
  color: var(--ink-muted);
}

/* Zu zweit: gemeinsam im Raum (Paarmassage) oder getrennte Räume?
   Zwei Karten statt zweier Wörter — der Unterschied muss ohne Nachdenken
   klar sein. „Zu zweit" allein sagte nicht, was gemeint ist. */
.party-room {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
@media (min-width: 640px) {
  .party-room { grid-template-columns: 1fr 1fr; }
}
.party-room-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 56px;
  padding: 10px 12px;
  text-align: left;
  border: none;
  border-radius: var(--radius-md);
  background: var(--surface-canvas);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  cursor: pointer;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
.party-room-opt.is-active {
  background: var(--surface-elevated);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.party-room-opt.is-disabled,
.party-room-opt:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.party-room-name {
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
}
.party-room-sub {
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
}

/* Nicht als Paarmassage buchbar → sichtbar entwertet, statt stumm verschluckt. */
.service-item.is-unavailable {
  opacity: 0.5;
  pointer-events: none;
}
.service-item-note {
  margin-top: 2px;
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
}
/* „für 2 Personen" unter dem Preis. Der Preis IST der Gesamtpreis — bei der
   Paarmassage sogar günstiger als zweimal einzeln. Ein „2×" davor würde als
   Multiplikator gelesen und den Preis verdoppeln. */
.service-item-per {
  display: block;
  margin-top: 1px;
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
  font-weight: var(--weight-regular, 400);
  white-space: nowrap;
}

/* ── Anfrage (Gruppen, die online nicht buchbar sind) ─────────────────────── */
.inquiry-card {
  padding: var(--space-5);
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.inquiry-lead {
  margin-bottom: var(--space-4);
  font-size: var(--text-body-size);
  color: var(--ink-default);
  line-height: 1.55;
}
/* Direkter Draht statt Formular: wer spontan zu fünft kommen will, ruft an.
   Er füllt kein Formular aus und wartet auf Rückmeldung. */
.inquiry-direct { text-align: center; }
.inquiry-direct .contact-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}
.inquiry-direct .contact-btn { flex: 1; max-width: 220px; }
.inquiry-error {
  margin: var(--space-3) 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #dc2626 12%, transparent);
  color: #dc2626;
  font-size: var(--text-body-sm-size);
}
.inquiry-done { text-align: center; }
.inquiry-done-icon {
  display: inline-flex;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, #10b981 18%, transparent);
  color: #10b981;
}
.inquiry-done-title {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm-size);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
}
.inquiry-done-text {
  margin-top: 4px;
  font-size: var(--text-body-sm-size);
  color: var(--ink-muted);
}


/* Service-Liste auch in Step 2 Sidebar */
.booking-service .service-list-mini {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.service-list-mini-item {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-body-sm-size);
  color: var(--ink-default);
}

.service-list-mini-item .name {
  color: var(--ink-strong);
}

.service-list-mini-item .meta {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* Provider-Grid */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.provider-card {
  position: relative;          /* für das Auswahl-Häkchen-Badge */
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition:
    box-shadow var(--duration-quick) var(--ease-out),
    transform var(--duration-instant) var(--ease-out);
}
/* Border über dem Bild — ::before sitzt auf z-index:2, damit der Rahmen
   nicht vom img-wrap überdeckt wird (overflow:hidden schneidet inset-shadow ab). */
.provider-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--border-brand);
  pointer-events: none;
  z-index: 2;
  transition: box-shadow var(--duration-quick) var(--ease-out);
}

.provider-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.provider-card:hover::before {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.provider-card.is-selected {
  box-shadow: var(--shadow-md);
  animation: mb-zone-glow .6s ease;
}
.provider-card.is-selected::before {
  box-shadow: inset 0 0 0 2px var(--accent);
}
@keyframes mb-zone-glow {
  0%   { box-shadow: var(--shadow-md); }
  55%  { box-shadow: var(--shadow-md), 0 0 34px 7px color-mix(in srgb, var(--accent) 50%, transparent); }
  100% { box-shadow: var(--shadow-md); }
}
/* Gold-Häkchen-Badge — poppt beim Auswählen ein (Bestätigungs-Moment) */
.provider-card.is-selected::after {
  content: "✓";
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--ink-on-brand, #fff);
  font-size: 17px; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 4px rgba(255,255,255,.14);
  animation: mb-zone-check .45s cubic-bezier(.34,1.6,.5,1) both;
  z-index: 2;
}
@keyframes mb-zone-check { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .provider-card.is-selected { animation: none; }
  .provider-card.is-selected::after { animation: none; }
}

.provider-img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-sunken);
}

.provider-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.provider-card:hover .provider-img { transform: scale(1.04); }

.provider-body {
  padding: var(--space-4);
}

.provider-name {
  font-family: var(--font-display);
  font-size: var(--text-body-lg-size);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
  margin-bottom: var(--space-1);
}

.provider-desc {
  font-size: var(--text-body-sm-size);
  color: var(--ink-default);
  line-height: 1.45;
  margin-bottom: var(--space-1);
}

.provider-langs {
  font-size: var(--text-body-sm-size);
  color: var(--ink-muted);
}

/* ── miraTEQ / Coaching: echte Berater-Portraits (Cal.com/Fresha-Team-Muster) ──
   Zwei Personen-Portraits nebeneinander statt breit auseinandergezogener Karten.
   Portrait-Ratio 4:5 rahmt Gesichter (das globale 4:3 passt zu Spa-Räumen, nicht
   zu Headshots). Scope über data-industry → andere Branchen bleiben unberührt. */
[data-industry="coaching"] .provider-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 400px;              /* kompakter — die Portraits waren zu groß */
  margin-inline: auto;
}
[data-industry="coaching"] .provider-img-wrap {
  aspect-ratio: 4 / 5;
}
[data-industry="coaching"] .provider-body {
  text-align: center;
}

/* Der Host (mirateq.com/contact/ → .ct-widget) rahmt das iframe bereits
   (Border + Radius + Schatten). Darum bekommt das Widget im Embed KEINEN
   eigenen Panel-Rahmen — sonst doppelter Rahmen. Nur die Topbar-Luft (80px
   für die im Embed ausgeblendete Topbar) zurücknehmen, damit es nicht zu hoch
   startet. Gilt für alle Embeds — dort gibt es nie eine Topbar. */
body.embedded .app-shell { padding-top: var(--space-6); }
@media (min-width: 900px) {
  body.embedded .app-shell { padding-top: var(--space-8); }
}

/* Step 1 (Berater-Wahl) soll nicht in die volle Contact-Spalte auseinander-
   laufen → Inhalt auf eine ruhige Breite begrenzen. Das eigentliche Step-2-
   Layout (Kalender/Slots) steht weiter unten (nach den Slot-Regeln, damit es
   die globalen 900px-Regeln in der Quell-Reihenfolge sicher überschreibt). */
[data-industry="coaching"] .service-picker {
  max-width: 460px;
  margin-inline: auto;
}

/* ── Provider-CHOICE als kompakte Listen-Zeilen (Fresha/Booksy-Muster) ──
   Eigene Klassen — die .provider-card oben bleibt für den Service-Grid. */
.provider-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  width: 100%;
  max-width: 520px;         /* Desktop: nicht endlos breit werden */
  margin-inline: auto;
}

.provider-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  box-shadow: inset 0 0 0 1px var(--border-brand);
  cursor: pointer;
  text-align: left;
  transition:
    box-shadow var(--duration-quick) var(--ease-out),
    background var(--duration-quick) var(--ease-out),
    transform var(--duration-instant) var(--ease-out);
}

.provider-row:hover {
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm);
}
.provider-row:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, inset 0 0 0 2px var(--accent)), inset 0 0 0 2px var(--accent);
}

.provider-row.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Avatar links — rund, ~50px */
.provider-row__avatar {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
}
.provider-row__avatar--initial,
.provider-row__avatar--icon {
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  line-height: 1;
}
.provider-row__avatar--icon [data-icon] {
  width: 24px;
  height: 24px;
}
.provider-row__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text-Block */
.provider-row__body {
  flex: 1 1 auto;
  min-width: 0;             /* erlaubt Text-Ellipsis im flex-Kind */
}
.provider-row__name {
  font-family: var(--font-display);
  font-size: var(--text-body-lg-size);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-row__meta {
  margin-top: 2px;
  font-size: var(--text-body-sm-size);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rechte Indikatoren: Chevron default, Häkchen wenn selected */
.provider-row__check,
.provider-row__chevron {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.provider-row__chevron {
  color: var(--ink-subtle);
}
.provider-row__chevron [data-icon] { width: 20px; height: 20px; }
.provider-row__check {
  color: var(--accent);
  display: none;            /* nur bei is-selected sichtbar */
}
.provider-row__check [data-icon] { width: 22px; height: 22px; }
.provider-row.is-selected .provider-row__chevron { display: none; }
.provider-row.is-selected .provider-row__check   { display: flex; }

/* ════════════════════════════════════════════════════════════════════════
   STEP 2 — Booking-Selector (Cal.com-Style EIN Container, 3 Cols)
   ════════════════════════════════════════════════════════════════════════ */
.booking-container {
  background: var(--surface-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-inset-border), var(--shadow-md);
  overflow: hidden;
}

/* Desktop: 3-Col Grid mit Dividern */
@media (min-width: 900px) {
  .booking-container {
    display: grid;
    grid-template-columns: 280px 1fr 240px;
    min-height: 480px;
  }
  .booking-section {
    padding: var(--space-6);
  }
  .booking-section + .booking-section {
    border-left: 1px solid var(--border-subtle);
  }
}

/* Mobile: Stack (Cal.com Pattern) */
@media (max-width: 899px) {
  .booking-section {
    padding: var(--space-5);
  }
  .booking-section + .booking-section {
    border-top: 1px solid var(--border-subtle);
  }
  /* Gestapelt nimmt der Kalender die volle Breite — bei breitem Viewport
     (z.B. iframe-Embed ~816px) blähen sich die aspect-ratio:1-Zellen sonst
     auf >90px auf. Cap + zentriert hält die Zellen handlich (~48px), egal
     wie breit der Container ist. Header (Monat+Nav) gleich gedeckelt, damit
     er bündig über dem Grid sitzt. */
  .booking-calendar .calendar-grid,
  .booking-calendar .calendar-header {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Service-Sidebar (links) — kompakt, NICHT zu hoch */
.booking-service {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Detail-Zeile (Dauer + Gäste): Desktop untereinander; Mobile-Override unten = nebeneinander */
.service-detailrow {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.service-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
  flex-shrink: 0;
  overflow: hidden;
}

.service-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-name {
  font-family: var(--font-display);
  font-size: var(--text-body-sm-size);
  color: var(--ink-muted);
  font-weight: var(--weight-medium);
  margin-bottom: -2px;
}

.service-headline {
  font-family: var(--font-display);
  font-size: var(--text-heading-size);
  line-height: var(--text-heading-line);
  letter-spacing: var(--text-heading-tracking);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
}

.service-desc {
  font-size: var(--text-body-sm-size);
  color: var(--ink-muted);
  line-height: 1.5;
  margin: var(--space-2) 0 var(--space-4);
}

.service-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
}

.service-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm-size);
  color: var(--ink-default);
}

.service-meta-row svg {
  width: 16px;
  height: 16px;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.service-change {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  padding: 0;
  margin-top: var(--space-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
}

.service-change:hover { color: var(--accent-hover); }

/* ── Eigener Gäste-Schritt (paneGuests, config.guestPicker) ──────────────── */
.guests-step {
  max-width: 460px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.guests-step #guestStepBox { margin: var(--space-8) 0; }
.guests-step .step-footer { width: 100%; justify-content: space-between; }

/* ── Gäste-Stepper in der Sidebar (config.guestPicker, Schritt 2) ─────────── */
.sidebar-guests {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}
/* Reine Anzeige (antippbar zum Ändern) statt zweitem Stepper */
.sidebar-guests .sg-display {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--surface-sunken); border: 0; border-radius: var(--radius-full);
  padding: 9px 16px; cursor: pointer; color: var(--ink-strong);
  font-size: var(--text-body-sm-size); font-weight: var(--weight-medium); font-family: inherit;
  transition: background var(--duration-quick) var(--ease-out);
}
.sidebar-guests .sg-display:hover { background: var(--surface-elevated); }
.sidebar-guests .sg-display [data-icon] { color: var(--accent); display: inline-flex; }
.sidebar-guests .sg-display svg { width: 16px; height: 16px; }
.sidebar-guests .sg-edit-icon { color: var(--ink-subtle); }
.sidebar-guests .sg-edit-icon svg { width: 13px; height: 13px; }

/* ── Calendar (Mitte) ──────────────────────────────────────────────────── */
.booking-calendar {
  user-select: none;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.calendar-month {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--text-heading-sm-tracking);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

.calendar-month .month-year {
  color: var(--ink-muted);
  font-weight: var(--weight-regular);
  margin-left: var(--space-2);
}

.calendar-nav-group {
  display: flex;
  gap: 4px;
}

.calendar-nav {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--ink-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--duration-quick) var(--ease-out),
              color var(--duration-quick) var(--ease-out);
}

.calendar-nav:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent);
}

.calendar-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.calendar-nav svg { width: 16px; height: 16px; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--ink-subtle);
  padding: var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Day-Cells als ECHTE Buttons mit eigenem Background (Cal.com-Look) */
.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: 14px;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--ink-default);
  cursor: pointer;
  transition:
    background var(--duration-quick) var(--ease-out),
    color var(--duration-quick) var(--ease-out),
    transform var(--duration-instant) var(--ease-out);
  font-family: inherit;
  position: relative;
}

.calendar-day:hover:not(.is-disabled):not(.is-empty) {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Today: INVERTIERT (Cal.com-Pattern) */
.calendar-day.is-today {
  background: var(--ink-strong);
  color: var(--surface-canvas);
  font-weight: var(--weight-semibold);
}

.calendar-day.is-today:hover:not(.is-disabled) {
  background: var(--ink-strong);
  color: var(--surface-canvas);
  opacity: 0.85;
}

/* Selected — gleich invertiert mit accent */
.calendar-day.is-selected {
  background: var(--accent);
  color: var(--ink-on-brand);
  font-weight: var(--weight-semibold);
}

.calendar-day.is-disabled {
  background: transparent;
  color: var(--ink-subtle);
  cursor: not-allowed;
  opacity: 0.4;
}

.calendar-day.is-empty {
  background: transparent;
  cursor: default;
  pointer-events: none;
}

/* Ausgebucht (W4) — bewusst ANDERS als „geschlossen".
   Ein Ruhetag ist leer und blass. Ein ausgebuchter Tag hat offen, ist aber voll:
   er behält seinen Kasten und bekommt einen dünnen Strich durch die Zahl. Der
   Gast sieht auf einen Blick „hier war was, ist aber weg" statt „hier ist nichts".
   Nicht nur die Deckkraft — Farbe allein darf nie die einzige Information sein
   (Barrierefreiheit); der Strich trägt die Aussage auch ohne Farbwahrnehmung.
   Das title-Attribut nennt es zusätzlich beim Namen. */
.calendar-day.is-full {
  background: var(--surface-sunken);
  color: var(--ink-subtle);
  opacity: 0.65;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ── Slots (Rechts) — scrollbar bei vielen ─────────────────────────────── */
.booking-slots {
  display: flex;
  flex-direction: column;
}

.slots-header {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm-size);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
  margin-bottom: var(--space-4);
}

.slots-header .slots-date {
  color: var(--ink-muted);
  font-weight: var(--weight-regular);
  margin-left: var(--space-1);
  font-variant-numeric: tabular-nums;
}

/* Base = Mobile: KEIN internes Scrollen — die ganze Seite scrollt (ein langer
   Scroll, Profi-Pattern Cal.com/Resy mobil). Internes overflow würde die letzten
   Slots hinter die fixed Continue-Bar schieben. */
.slots-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Desktop: Slots sind eine eigene Spalte neben dem Kalender → eigener Scroll. */
@media (min-width: 900px) {
  .slots-list {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
  }
  .slots-list::-webkit-scrollbar { width: 6px; }
  .slots-list::-webkit-scrollbar-track { background: transparent; }
  .slots-list::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: var(--radius-full);
  }
}

/* Tageszeit-Gruppe (Vormittag/Nachmittag/Abend) — Restaurant-Profi-Pattern
   (OpenTable/Resy): Slots nach Schicht gruppiert, leichter zu scannen. */
.slot-group { display: flex; flex-direction: column; gap: var(--space-2); }
.slot-group-label {
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* Slot-Raster — mehrspaltig, auto-fill: alle Zeiten ohne enges Scrollen sichtbar.
   minmax(88px) => 3–5 Spalten je nach Breite, große Touch-Targets bleiben. */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

/* ══ miraTEQ / Coaching — Step-2 Layout (Cal.com Month-View) ═══════════════════
   Behebt zwei Dinge aus dem Feedback: (1) die Slot-Spalte hatte `max-height:60vh`
   — im auto-resizten iframe ist vh = iframe-Höhe = Content-Höhe → kappt NIE, die
   Buchung lief endlos in die Länge. Jetzt FESTE px-Höhe + interner Scroll (genau
   Cal.coms Fix). (2) Die Provider-Sidebar verteilte Inhalt oben/unten (Riesen-
   gap). Jetzt: kompakter Provider-Header oben, darunter Kalender + Slots neben-
   einander. Ab 620px (greift im ~600–720px Contact-Embed). Steht bewusst NACH
   den globalen 900px-Regeln → gewinnt in der Quell-Reihenfolge. Scoped: coaching.
   560px: greift schon in der ~600px breiten Contact-Widget-Spalte. */
@media (min-width: 560px) {
  [data-industry="coaching"] .booking-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(190px, 32%, 230px);
    grid-template-areas:
      "service  service"
      "calendar slots";
    align-items: start;
    min-height: 0;
  }
  [data-industry="coaching"] .booking-service  { grid-area: service; }
  [data-industry="coaching"] .booking-calendar { grid-area: calendar; }
  [data-industry="coaching"] .booking-slots    { grid-area: slots; }

  /* Provider-Header = kompakter Grid-Banner (dasselbe Muster wie der bestehende
     Mobile-Banner, hier auch auf breiten Embeds): [Avatar] [Name/Headline] … [Meta],
     Trenner unten. Avatar + Meta spannen beide Text-Zeilen (vertikal zentriert). */
  [data-industry="coaching"] .booking-service {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: 2px;
    padding: var(--space-4) var(--space-6);
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  [data-industry="coaching"] .booking-service .service-avatar {
    grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; margin-bottom: 0;
  }
  [data-industry="coaching"] .booking-service .service-name {
    grid-column: 2; grid-row: 1; align-self: end;
    font-size: 11px; line-height: 1.1; margin: 0;
  }
  [data-industry="coaching"] .booking-service .service-headline {
    grid-column: 2; grid-row: 2; align-self: start;
    font-size: 17px; line-height: 1.2; margin: 0;
  }
  [data-industry="coaching"] .booking-service .service-desc { display: none; }
  [data-industry="coaching"] .booking-service .service-detailrow {
    grid-column: 3; grid-row: 1 / 3; align-self: center;
    flex-direction: row; align-items: center; gap: var(--space-4); margin: 0;
  }
  [data-industry="coaching"] .booking-service .service-meta {
    margin: 0; flex-direction: row; gap: var(--space-4);
  }

  /* Untere Reihe: Kalender links, Slots rechts, Trenner NUR dazwischen. */
  [data-industry="coaching"] .booking-calendar {
    border: 0;
    padding: var(--space-5) var(--space-6);
  }
  [data-industry="coaching"] .booking-slots {
    border: 0;
    border-left: 1px solid var(--border-subtle);
    padding: var(--space-5) var(--space-6);
  }
  [data-industry="coaching"] .booking-calendar .calendar-grid,
  [data-industry="coaching"] .booking-calendar .calendar-header { max-width: none; }

  /* Slot-Spalte: FESTE Höhe (≈ Kalenderhöhe) + interner Scroll — nie vh.
     Einspaltig = klare vertikale Zeitliste in der schmalen Spalte. */
  [data-industry="coaching"] .booking-slots .slots-list {
    max-height: 296px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
  }
  [data-industry="coaching"] .booking-slots .slots-list::-webkit-scrollbar { width: 6px; }
  [data-industry="coaching"] .booking-slots .slots-list::-webkit-scrollbar-track { background: transparent; }
  [data-industry="coaching"] .booking-slots .slots-list::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: var(--radius-full);
  }
  [data-industry="coaching"] .booking-slots .slot-grid { grid-template-columns: 1fr; }
}

/* Slot-Pill — KOMPAKT, kein Arrow, Cal.com-Style */
.slot-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;       /* Touch-Target — Material 48dp, ueber Apple 44pt */
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  color: var(--ink-strong);
  font-size: var(--text-body-size);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background var(--duration-quick) var(--ease-out),
    color var(--duration-quick) var(--ease-out),
    transform var(--duration-instant) var(--ease-out);
  box-shadow: inset 0 0 0 1px var(--border-brand);
  font-family: inherit;
  flex-shrink: 0;
}

.slot-pill:hover:not(.is-taken):not(.is-selected) {
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
}

.slot-pill.is-selected {
  background: var(--accent);
  color: var(--ink-on-brand);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.slot-pill.is-taken {
  color: var(--ink-subtle);
  cursor: not-allowed;
  opacity: 0.4;
  text-decoration: line-through;
}

/* Ausgebucht ABER Warteliste möglich: sieht anklickbar aus (nicht "tot"),
   damit der Kunde erkennt, dass ein Tap etwas bringt (Warteliste). */
.slot-pill.is-taken.is-waitlist {
  cursor: pointer;
  opacity: 0.7;
  text-decoration: line-through;
  text-decoration-color: var(--ink-subtle);
  box-shadow: inset 0 0 0 1px var(--border-brand);
  gap: 4px;
}
.slot-pill.is-taken.is-waitlist:hover {
  opacity: 1;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.slot-pill .wl-bell { font-size: 0.85em; opacity: 0.9; text-decoration: none; display: inline-block; }

/* Erklär-Hinweis über dem Slot-Grid (nur wenn ausgebuchte Slots + Waitlist). */
.slots-waitlist-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small-size, 13px);
  color: var(--ink-muted);
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--border-brand);
}

/* ── Marken-Band (W2) ─────────────────────────────────────────────────────
   Schmaler Bild-Streifen über dem Widget. BEWUSST KEIN Hero: Schritt 1 muss
   über der Falz bleiben. Der Verlauf lässt das Bild ins Seiten-Grau auslaufen,
   damit es sich nicht wie ein aufgeklebtes Banner anfühlt.
   Rendert nur, wenn die Inhaberin ein Bild hinterlegt hat. */
.brand-band {
  position: relative;
  /* Als Variable, weil die Regel unten damit die cover-Breite nachrechnet. */
  --band-h: clamp(120px, 17vh, 180px);
  height: var(--band-h);
  /* background-image kommt INLINE vom Element (index.php) — eine relative URL in
     einer CSS-Variable würde gegen diese Stylesheet-Datei aufgelöst und ins
     Leere zeigen. */
  background-size: cover;
  background-position: center;   /* Fokuspunkt aus dem Panel ueberschreibt das inline */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Ausschnitt frei waehlbar — nur wenn index.php die Bildmasse kennt (data-ar).
 *
 * Mit background-size: cover fuellt das Bild genau EINE Achse exakt aus, in der
 * anderen ragt es ueber. Nur dort bewegt background-position etwas. Bei einem
 * 120 bis 180 Pixel flachen Band entscheidet das Bildformat, welche Achse das
 * ist: ein Hochformat laesst sich nur hoch und runter schieben, ein Panorama
 * nur seitlich. Fuer die Inhaberin sieht das aus wie ein kaputter Regler.
 *
 * Deshalb rechnen wir die cover-Breite selbst — max(Containerbreite,
 * Containerhoehe * Seitenverhaeltnis) ist genau das, was cover tut — und
 * multiplizieren den Zoom darauf. Ab 101% ragt das Bild in BEIDEN Achsen ueber
 * und der Fokuspunkt wirkt in beide Richtungen. Bei 100% ist das Ergebnis
 * identisch zu cover, deshalb aendert sich fuer Bestandskunden nichts.
 *
 * Gleiche Rechnung wie beim Hero in miraMENU (menu.css, .hero-cover[data-ar]).
 */
.brand-band[data-ar] {
  background-size: calc(max(100%, var(--band-h) * var(--band-ar)) * var(--band-zoom, 1)) auto;
}
/* Verlauf: oben leicht abgedunkelt (Logo bleibt lesbar), unten in die Seitenfarbe. */
.brand-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.10) 45%,
    var(--surface-canvas) 100%
  );
}
.brand-band-logo {
  position: relative;   /* über dem Verlauf */
  z-index: 1;
  max-height: 64px;
  max-width: min(70%, 320px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}
/* ── Mit Band: keine Kopfleiste, kein reservierter Platz ──────────────────
   Ohne Band schwebt die Bedienleiste (Hell/Dunkel, Sprache) über dem Inhalt und
   braucht dafür eine unscharfe Hintergrund-Leiste, damit sie lesbar bleibt.
   MIT Band ist genau diese Leiste im Weg: sie liegt fix über den obersten 60 px
   und schneidet das Marken-Bild ab. Sie fällt hier deshalb weg — die Bedien-
   elemente selbst tragen ihre eigene Kapsel (Hintergrund + Schatten) und sind
   auch auf dem Bild lesbar. Sie schweben einfach mit. */
body.has-band .topbar-bg { display: none; }

/* Der Kopfbereich reservierte 68 px für ebendiese Leiste. Mit Band ist das
   doppelt gemoppelt — es klaffte eine Lücke von 84 px zwischen Bild und
   Schrittleiste, die den ersten Buchungsschritt nach unten drückte. */
body.has-band .app-header { padding-top: 0; }

.app-shell.has-band { padding-top: var(--space-4); }
@media (min-width: 900px) {
  .app-shell.has-band { padding-top: var(--space-6); }
}
/* Im Embed (iframe auf der Kundenseite) ist das Band unnötig — dort steht die
   Marke schon drumherum, und jeder Pixel Höhe kostet Scrollweg. */
body.embedded .brand-band { display: none; }

/* ── Tag komplett ausgebucht ──────────────────────────────────────────────
   Steht ÜBER den (belegten) Zeiten. Vorher sah der Gast nur graue tote
   Buttons und wusste nicht, ob der Tag voll oder das Widget kaputt ist. */
.slots-fullybooked {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  text-align: center;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--border-brand);
}
.slots-fullybooked .fb-title {
  font-family: var(--font-display);
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
  margin-bottom: 4px;
}
.slots-fullybooked .fb-text {
  font-size: var(--text-body-sm-size);
  color: var(--ink-muted);
  line-height: 1.5;
}

/* ── Direkter Draht (Anrufen / WhatsApp) ──────────────────────────────────
   Dezent, dauerhaft, unter der Zeitliste. Rendert nur, wenn der Betrieb
   Telefon oder WhatsApp hinterlegt hat. */
.slots-contact {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--border-brand);
  text-align: center;
}
.slots-contact .contact-text {
  font-size: var(--text-body-size);
  font-weight: var(--weight-medium);
  color: var(--ink-default);
  margin-bottom: var(--space-3);
}
.slots-contact .contact-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}
.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;                  /* Daumengröße — das ist ein echter Ausweg,
                                        kein Kleingedrucktes */
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-inset-border);
  color: var(--ink-strong);
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition:
    box-shadow var(--duration-quick) var(--ease-out),
    color var(--duration-quick) var(--ease-out);
}

/* ── Mobil: der Draht darf nicht unter der Zeitliste verschwinden ──────────
   Auf dem Desktop hat die Zeitliste längst eine feste Höhe und scrollt in sich
   (siehe .slots-list @900px). Auf dem Handy fehlte genau das: die Liste wuchs
   endlos, und "Keine passende Zeit? → Anrufen" landete weit unterhalb der Falz.
   Wer keinen Termin fand, hat den Ausweg schlicht nie gesehen und ist gegangen.
   Jetzt scrollt die Liste in sich, und der Draht steht immer sichtbar darunter.
   Bewusst KEIN position:sticky: im eingebetteten iframe (auto-height) hätte das
   keinen Effekt — der Rahmen ist dort so hoch wie sein Inhalt. */
@media (max-width: 899px) {
  .slots-list {
    max-height: 44vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
  }
  .slots-contact .contact-actions { flex-wrap: nowrap; }
  .slots-contact .contact-btn     { flex: 1; }
}
.contact-btn:hover {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm);
}
.contact-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.contact-btn svg { width: 16px; height: 16px; }

.slots-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--ink-muted);
  font-size: var(--text-body-sm-size);
}

.slots-empty svg {
  width: 28px; height: 28px;
  margin: 0 auto var(--space-3);
  color: var(--ink-subtle);
  display: block;
}

.slots-prompt {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--ink-subtle);
  font-size: var(--text-body-sm-size);
}

/* ── Skeleton (Loading) ────────────────────────────────────────────────── */
.skeleton {
  background:
    linear-gradient(90deg,
      var(--surface-sunken) 0%,
      var(--surface-elevated) 50%,
      var(--surface-sunken) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-slot { height: 44px; }

/* ── Inline Continue-Footer (unter Booking-Container) ──────────────────── */
.booking-continue {
  display: none;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-inset-border), var(--shadow-md);
}

.booking-continue.is-visible {
  display: block;
  animation: continue-fade-in 0.3s var(--ease-out);
}

/* Mobile: Fixed-Bottom statt Inline — Profi-Pattern Acuity/Booksy.
   Nach Slot-Auswahl erscheint die Continue-Bar fixiert am Bildschirmrand,
   damit der User nicht erst scrollen muss um weiterzukommen.
   ⚠ `fixed` statt `sticky` weil die Bar als letztes Element der Page
   ohne Scroll nicht im Viewport waere und sticky erst beim Scrollen greift. */
@media (max-width: 768px) {
  .booking-continue.is-visible {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: var(--space-4);
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    z-index: 40;
    background: var(--surface-elevated);
    /* Schatten oben fuer Tiefen-Wahrnehmung gegen den Calendar darunter */
    box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.25),
                var(--shadow-inset-border);
  }
  .booking-continue.is-visible .booking-continue-inner {
    gap: var(--space-3);
  }
  .booking-continue.is-visible .btn-primary {
    flex: 1;
  }
  /* Body bekommt extra Bottom-Padding wenn die Continue-Bar sichtbar ist,
     damit der letzte Slot nicht hinter der fixed Bar verschwindet.
     --continue-bar-h wird in booking.js auf die echte Bar-Höhe gesetzt
     (ändert sich je nachdem ob der Weiter-Button schon da ist). */
  body:has(.booking-continue.is-visible) {
    padding-bottom: calc(var(--continue-bar-h, 96px) + var(--space-5) + env(safe-area-inset-bottom));
  }
}

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

.booking-continue-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.booking-continue-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.booking-continue-label {
  font-size: var(--text-caption-size);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.booking-continue-value {
  font-family: var(--font-display);
  font-size: var(--text-body-lg-size);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.booking-back { flex-shrink: 0; }   /* Zurück-Button schmal, links */

/* Mobile: Info oben (volle Breite), darunter [Zurück | Weiter] nebeneinander */
@media (max-width: 599px) {
  .booking-continue-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }
  .booking-continue-info {
    order: -1;
    width: 100%;
    text-align: center;
  }
  .booking-continue .btn-primary { flex: 1; }   /* Weiter füllt die Reihe */
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 3 — Form
   ════════════════════════════════════════════════════════════════════════ */
.form-container {
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface-elevated);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-inset-border), var(--shadow-md);
}

@media (max-width: 599px) {
  .form-container { padding: var(--space-6); }
}

.form-title {
  font-family: var(--font-display);
  font-size: var(--text-heading-lg-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--text-heading-lg-tracking);
  color: var(--ink-strong);
  margin-bottom: var(--space-2);
}

.form-subtitle {
  font-size: var(--text-body-size);
  color: var(--ink-muted);
  margin-bottom: var(--space-8);
}

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

.form-row { display: grid; gap: var(--space-2); }

.form-label {
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  color: var(--ink-strong);
}

.form-label .optional {
  font-weight: var(--weight-regular);
  color: var(--ink-subtle);
  margin-left: var(--space-1);
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-canvas);
  color: var(--ink-strong);
  font-size: var(--text-body-size);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset-border);
  transition: box-shadow var(--duration-quick) var(--ease-out);
  appearance: none;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-focus);
}

.form-input.is-error, .form-textarea.is-error, .form-select.is-error {
  box-shadow: inset 0 0 0 1px var(--danger);
}

.form-textarea { resize: vertical; min-height: 88px; }

.form-error {
  font-size: var(--text-body-sm-size);
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.form-error svg { width: 14px; height: 14px; }

/* Optional-Hint unterhalb Form-Feld (z.B. Email-Optional bei LINE-Login) */
.form-hint {
  font-size: var(--text-body-sm-size);
  color: var(--text-muted, #888);
  margin-top: var(--space-1);
  line-height: 1.4;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-body-sm-size);
  color: var(--ink-default);
  line-height: 1.5;
}

.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* ─── Optionale Felder Toggle (Phone / Message / Language) ───────────── */
/* Toggle-Button: subtiler Text-Link-Stil mit rotierbarem Chevron.       */
/* Auf Desktop ist der Button versteckt + die Felder immer sichtbar.     */
.form-optional-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 0;
  padding: var(--space-2) 0;
  min-height: 44px; /* Touch-Target iOS-Minimum */
  cursor: pointer;
  color: var(--ink-subtle);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  text-align: left;
  width: 100%;
  transition: color var(--duration-quick) var(--ease-out);
}
.form-optional-toggle:hover { color: var(--ink-default); }

/* Chevron-Wrapper dreht sich beim Öffnen */
.form-optional-toggle-chevron {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform var(--duration-moderate) var(--ease-spring);
}
.form-optional-toggle-chevron svg { width: 16px; height: 16px; }
.form-optional-toggle.is-open .form-optional-toggle-chevron { transform: rotate(180deg); }

/* Optionale Felder: Mobile collapsed, Desktop immer sichtbar.           */
/* Als grid-Container: gleicher Gap wie .form-grid für konsistenten      */
/* vertikalen Rhythmus wenn ausgeklappt.                                 */
.form-optional-fields {
  display: none; /* Mobile: collapsed by default */
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.form-optional-fields.is-open { display: grid; }

/* Ab 600px: Toggle ausblenden, alle Felder immer sichtbar */
@media (min-width: 600px) {
  .form-optional-toggle { display: none; }
  .form-optional-fields { display: grid; }
}

/* Tenants mit Interesse-Feld: auch auf dem Handy alles offen. Wer die Frage
   stellt, will die Antwort — hinter einem Ausklapper wird sie uebersehen.
   Gesetzt in index.php, sobald interestOptions konfiguriert sind. */
body[data-optional-open] .form-optional-toggle { display: none; }
body[data-optional-open] .form-optional-fields { display: grid; }

/* ════════════════════════════════════════════════════════════════════════
   STEP 4 — Confirm
   ════════════════════════════════════════════════════════════════════════ */
.confirm-container {
  max-width: 560px;
  margin: 0 auto;
}

.summary-box {
  background: var(--surface-elevated);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-inset-border);
  margin-bottom: var(--space-6);
}

.summary-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-body-size);
}

.summary-row + .summary-row {
  border-top: 1px solid var(--border-subtle);
}

.summary-label {
  color: var(--ink-muted);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
}

.summary-value {
  color: var(--ink-strong);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 5 — Success
   ════════════════════════════════════════════════════════════════════════ */
.success-screen {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-12) var(--space-4);
}

.success-icon-wrap {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-6);
  border-radius: var(--radius-full);
  background: var(--status-success-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.success-icon-wrap svg {
  width: 32px; height: 32px;
  color: var(--status-success-text);
}

.success-stroke {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: stroke-draw 600ms var(--ease-out) 200ms forwards;
}

@keyframes stroke-draw { to { stroke-dashoffset: 0; } }

.success-title {
  font-family: var(--font-display);
  font-size: var(--text-heading-lg-size);
  letter-spacing: var(--text-heading-lg-tracking);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
  margin-bottom: var(--space-3);
  white-space: pre-line;   /* erlaubt bewussten Zeilenumbruch (\n) in successHeadline */
}

.success-message {
  font-size: var(--text-body-lg-size);
  color: var(--ink-muted);
  margin-bottom: var(--space-8);
  line-height: 1.55;
}

.success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════════
   Buttons
   ════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  font-size: var(--text-body-size);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--duration-quick) var(--ease-out),
    box-shadow var(--duration-quick) var(--ease-out),
    transform var(--duration-instant) var(--ease-out),
    opacity var(--duration-quick) var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
  font-family: inherit;
}

.btn:active:not(:disabled) { transform: scale(0.985); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }

.btn-primary {
  /* WCAG-AA: --accent-press ist dunkler als --accent, damit weisse Schrift 4.5:1 Kontrast hat. */
  background: var(--accent-press);
  color: var(--ink-on-brand);
  box-shadow: var(--shadow-sm);
  font-weight: var(--weight-semibold);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-press-hover);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--surface-elevated);
  color: var(--ink-strong);
  box-shadow: var(--shadow-inset-border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--surface-sunken);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-muted);
  padding: var(--space-2) var(--space-3);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--ink-strong);
  background: var(--surface-sunken);
}

.btn-lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-body-lg-size);
  border-radius: var(--radius-md);
}

.btn-block { width: 100%; }

/* Step-Footer in den eigenen Step-Containers */
.step-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile: Sticky Footer-CTA (Profi-Pattern Acuity/Square/Booksy)
   Der "Continue" / "Book now" Button bleibt unten in Reach des Daumens,
   auch wenn die Page lang ist. Backdrop-Gradient sorgt fuer sanften
   Uebergang zwischen Content + sticky-Bar.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .step-footer {
    position: sticky;
    bottom: 0;
    background: linear-gradient(
      to bottom,
      transparent 0,
      var(--surface-canvas) 30%,
      var(--surface-canvas) 100%
    );
    margin: var(--space-6) calc(-1 * var(--space-4)) 0;
    padding: var(--space-4) var(--space-4);
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
    z-index: 30;
  }
  /* Primary-CTA Vollbreite auf Mobile (Material/iOS Pattern) */
  .step-footer .btn-primary { flex: 1; }
  /* Back-Button kompakter (nur Icon sichtbar via existing rule) */
  .step-footer .btn-ghost { flex-shrink: 0; }

  /* ⚠ Eingebettet (iframe, body.embedded) bringt der Sticky-Trick nichts und
     schadet sichtbar: das iframe ist immer so hoch wie sein Inhalt, gescrollt
     wird das Elternfenster — `sticky` greift also nie. Der Canvas-Gradient malt
     dort aber trotzdem, und weil body.embedded transparent ist, steht er als
     dunkler Kasten auf dem Hintergrund der Gastgeber-Seite (2026-08-05 im
     miraTEQ-Modal gesehen). Gleiche Begründung wie bei .booking-continue. */
  body.embedded .step-footer {
    position: static;
    background: none;
    margin: var(--space-6) 0 0;
    padding: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Theme-Toggle (oben rechts Desktop / unten links Mobile)
   ════════════════════════════════════════════════════════════════════════ */
.theme-toggle {
  display: inline-flex;
  background: var(--surface-elevated);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
  box-shadow: var(--shadow-sm), var(--shadow-inset-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.theme-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  transition: background var(--duration-quick) var(--ease-out),
              color var(--duration-quick) var(--ease-out);
  padding: 0;
}

.theme-toggle button svg { width: 14px; height: 14px; }

.theme-toggle button:hover {
  color: var(--ink-strong);
  background: var(--surface-sunken);
}

.theme-toggle button.is-active {
  background: var(--ink-strong);
  color: var(--surface-canvas);
}

/* Innerhalb der unified Controls-Pill: kein gefüllter Hintergrund —
   Icon allein zeigt den aktiven Mode. Höhere Spezifität (0-3-1) + spätere
   Position = gewinnt garantiert gegen die Base-Regel oben. */
.topbar-controls .theme-toggle button.is-active {
  background: transparent;
  color: var(--ink-strong);
}

body.embedded .topbar { display: none; }

/* ── Gäste-Sprachschalter (oben links, Pendant zum Theme-Toggle rechts) ──────
   Nur sichtbar wenn config.languages >= 2 Sprachen listet (booking.js toggelt
   display). Native Labels: EN · ไทย · 中文. */
.lang-switch {
  display: inline-flex;
  background: var(--surface-elevated);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
  box-shadow: var(--shadow-sm), var(--shadow-inset-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lang-switch .lang-opt {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  min-width: 32px;
  height: 28px;
  padding: 0 9px;
  border-radius: var(--radius-full);
  font: inherit;
  font-size: 12px;   /* fester Wert wie miraMENU — var(--text-sm) war undefiniert (erbte 15px) */
  font-weight: 600;
  line-height: 1;
  color: var(--ink-muted);
  transition: background var(--duration-quick) var(--ease-out),
              color var(--duration-quick) var(--ease-out);
}
.lang-switch .lang-opt:hover {
  color: var(--ink-strong);
  background: var(--surface-sunken);
}
.lang-switch .lang-opt.active {
  background: var(--ink-strong);
  color: var(--surface-canvas);
}

/* Innerhalb der Topbar-Controls Pill: Accent statt stark-weißem ink-strong.
   In Dark Mode wäre ink-strong ≈ weiß — riesiger weißer Oval, wirkt "lang gezogen".
   Accent (The Hill gold) ist erkennbar + proportional. */
.topbar-controls .lang-switch .lang-opt.active {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* body.embedded .topbar already hides everything above */

/* ════════════════════════════════════════════════════════════════════════
   Cinematic Intro (config.intro) — config-gated Overlay, flowt in die Buchung.
   Ein kurzer Premium-Moment; Klick/Tap lässt das Bild durchzoomen, die Buchung
   steigt darunter hoch. Bestehende Branchen ohne config.intro sind unberührt.
   ════════════════════════════════════════════════════════════════════════ */
/* Container deckt SOFORT schwarz ab (kein opacity:0-Start) → "fade from black";
   nur die Inhalte (Bild/Brand/Text) faden via intro-awake rein. */
.the-intro{position:fixed;inset:0;z-index:9999;background:#000;overflow:hidden;
  transition:opacity .7s ease, transform .9s cubic-bezier(.6,.01,.2,1);}
body.has-intro{overflow:hidden}
/* Buchung + Controls verborgen solange das Intro läuft → kein Durchblitzen von
   Schritt 1 (FOUC). has-intro steht server-seitig im <body>, greift ab Frame 1. */
body.has-intro .app-shell,
body.has-intro .topbar{opacity:0 !important;pointer-events:none}
body.intro-leaving .the-intro{opacity:0;transform:scale(1.12);pointer-events:none}
/* Booking faded smooth rein während Intro wegzoomt */
body.intro-leaving .app-shell,
body.intro-leaving .topbar{transition:opacity .65s ease .1s}
.the-intro .intro-bg{position:absolute;inset:-6%;background-size:cover;background-position:center;opacity:0;
  transition:opacity 1s ease;filter:saturate(1.05) contrast(1.05) brightness(.82)}
.the-intro .intro-bg.show{opacity:1}
.the-intro .intro-bg.kb{animation:introKB 8s ease-out forwards}
@keyframes introKB{from{transform:scale(1.05)}to{transform:scale(1.17)}}
.the-intro .intro-grade{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 10%, rgba(200,160,91,.10), transparent 55%),
  linear-gradient(180deg,rgba(7,6,5,.5),rgba(7,6,5,.05) 35%,rgba(7,6,5,.4) 70%,rgba(7,6,5,.9))}
.the-intro .intro-vig{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 220px 50px rgba(0,0,0,.7)}
.the-intro .intro-atmos{position:absolute;inset:0;pointer-events:none}
.the-intro .intro-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;z-index:3}
.the-intro .intro-eyebrow{font-family:'Jost',sans-serif;font-size:clamp(10px,1.3vw,12px);letter-spacing:.55em;text-transform:uppercase;color:#e7cd93;text-indent:.55em;display:flex;align-items:center;gap:16px;opacity:0;transform:translateY(12px);transition:opacity 1s cubic-bezier(.22,.61,.36,1) .15s,transform 1s cubic-bezier(.22,.61,.36,1) .15s}
.the-intro .intro-eyebrow::before,.the-intro .intro-eyebrow::after{content:"";width:clamp(20px,4vw,46px);height:1px;background:linear-gradient(90deg,transparent,#c8a05b)}
.the-intro .intro-eyebrow::after{background:linear-gradient(90deg,#c8a05b,transparent)}
body.intro-awake .the-intro .intro-eyebrow{opacity:.9;transform:none}
.the-intro .intro-brand{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(72px,15vw,210px);line-height:.9;letter-spacing:.01em;margin:.1em 0 .05em;
  background:linear-gradient(180deg,#fff 10%,#f3ece0 40%,#e7cd93 80%,#9c7536 115%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 16px 60px rgba(0,0,0,.5);
  opacity:0;transform:scale(1.16);filter:blur(10px);transition:opacity .45s cubic-bezier(.2,.7,.2,1) .2s,transform .7s cubic-bezier(.34,1.45,.5,1) .2s,filter .45s ease .2s}
body.intro-awake .the-intro .intro-brand{opacity:1;transform:none;filter:blur(0)}
.the-intro .intro-tagline{font-family:'Noto Serif Thai','Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(15px,2.3vw,25px);color:rgba(243,236,224,.86);max-width:24ch;text-shadow:0 2px 22px rgba(0,0,0,.65);
  opacity:0;transform:translateY(12px);transition:opacity .55s cubic-bezier(.22,.61,.36,1) .5s,transform .55s cubic-bezier(.22,.61,.36,1) .5s}
body.intro-awake .the-intro .intro-tagline{opacity:1;transform:none}
.the-intro .intro-cta{position:relative;margin-top:clamp(30px,4.5vw,52px);font-family:'Jost',sans-serif;font-weight:400;font-size:clamp(11px,1.3vw,13px);letter-spacing:.28em;text-transform:uppercase;color:#f3ece0;background:transparent;border:1px solid rgba(200,160,91,.55);padding:16px 38px;border-radius:99px;cursor:pointer;overflow:hidden;text-indent:.28em;
  opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.22,.61,.36,1) .7s,transform .5s cubic-bezier(.22,.61,.36,1) .7s,border-color .4s,box-shadow .4s}
body.intro-awake .the-intro .intro-cta{opacity:1;transform:none}
.the-intro .intro-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(231,205,147,.5) 50%,transparent 75%);transform:translateX(-120%);animation:introSweep 4s ease-in-out infinite 2s}
@keyframes introSweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.the-intro .intro-cta::after{content:"";position:absolute;inset:0;background:#c8a05b;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,.61,.36,1);z-index:-1;border-radius:99px}
.the-intro .intro-cta span{position:relative;z-index:2;transition:color .4s}
.the-intro .intro-cta:hover{border-color:#c8a05b;box-shadow:0 14px 40px -12px rgba(200,160,91,.55)}
.the-intro .intro-cta:hover::after{transform:scaleX(1)}
.the-intro .intro-cta:hover span{color:#0b0a09}
.the-intro .intro-lang{position:absolute;top:clamp(18px,3vw,30px);right:clamp(20px,4vw,52px);display:flex;gap:2px;z-index:4;opacity:0;transition:opacity 1s ease 1.1s}
body.intro-awake .the-intro .intro-lang{opacity:1}
.the-intro .intro-lang button{background:none;border:0;color:rgba(243,236,224,.5);font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.16em;padding:7px 11px;border-radius:99px;cursor:pointer;transition:color .3s,background .3s}
.the-intro .intro-lang button:hover{color:#f3ece0}
.the-intro .intro-lang button.on{color:#0b0a09;background:#c8a05b}
/* Kein extra Buchungs-Reveal: die Buchung wird durch das wegzoomende Intro enthüllt
   (Crossfade). Ein zweites Einblenden erzeugte ein Doppel-Reveal / "Reload"-Zucken. */
@media (prefers-reduced-motion:reduce){.the-intro .intro-bg.kb{animation:none}.the-intro .intro-cta::before{animation:none}}

/* ════════════════════════════════════════════════════════════════════════
   Motion-Schicht — durchgängiges WOW in jedem Schritt. Lightweight: nur
   transform + opacity (GPU), keine Loops, kein JS. Dieselbe Bewegungs-
   Signatur wie das Intro (sanftes cubic-bezier + Gold = config.accentColor).
   Greift für ALLE Branchen (miraBOOK-USP). reduced-motion-safe (unten).
   ════════════════════════════════════════════════════════════════════════ */
:root{--mb-flow:cubic-bezier(.22,.61,.36,1)}
@keyframes mb-rise{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes mb-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes mb-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes mb-slide{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

/* Step 1 — Bereiche enthüllen sich gestaffelt */
.pane[data-pane-active="true"] .provider-card{animation:mb-rise .55s var(--mb-flow) both}
.pane[data-pane-active="true"] .provider-card:nth-child(1){animation-delay:.06s}
.pane[data-pane-active="true"] .provider-card:nth-child(2){animation-delay:.13s}
.pane[data-pane-active="true"] .provider-card:nth-child(3){animation-delay:.20s}
.pane[data-pane-active="true"] .provider-card:nth-child(4){animation-delay:.27s}
.pane[data-pane-active="true"] .provider-card:nth-child(5){animation-delay:.34s}
.pane[data-pane-active="true"] .provider-card:nth-child(6){animation-delay:.41s}
/* Hover: Karte hebt sich deutlicher + Gold-Glow, Bild zoomt weicher */
.provider-card{transition:box-shadow .4s var(--mb-flow),transform .4s var(--mb-flow)}
.provider-card:hover{transform:translateY(-6px);
  box-shadow:inset 0 0 0 1px var(--accent),0 24px 54px -22px rgba(0,0,0,.65),0 0 22px -6px var(--accent)}
.provider-card:hover .provider-img{transform:scale(1.07)}

/* Step 2 — Sidebar, Kalender & Slots gleiten gestaffelt herein */
.pane[data-pane-active="true"] .booking-service{animation:mb-fade .6s var(--mb-flow) both .04s}
.pane[data-pane-active="true"] .booking-calendar{animation:mb-fade .6s var(--mb-flow) both .12s}
.pane[data-pane-active="true"] .booking-slots{animation:mb-fade .6s var(--mb-flow) both .20s}
.slot-pill{animation:mb-pop .38s var(--mb-flow) both}

/* Step 3 — Formularfelder erscheinen nacheinander */
.pane[data-pane-active="true"] .form-row,
.pane[data-pane-active="true"] .form-check{animation:mb-rise .5s var(--mb-flow) both}
.pane[data-pane-active="true"] .form-row:nth-child(1){animation-delay:.05s}
.pane[data-pane-active="true"] .form-row:nth-child(2){animation-delay:.11s}
.pane[data-pane-active="true"] .form-row:nth-child(3){animation-delay:.17s}
.pane[data-pane-active="true"] .form-row:nth-child(4){animation-delay:.23s}

/* Step 4 — Zusammenfassung Zeile für Zeile */
.pane[data-pane-active="true"] .summary-row{animation:mb-slide .5s var(--mb-flow) both}
.summary-row:nth-child(1){animation-delay:.06s}.summary-row:nth-child(2){animation-delay:.12s}
.summary-row:nth-child(3){animation-delay:.18s}.summary-row:nth-child(4){animation-delay:.24s}
.summary-row:nth-child(5){animation-delay:.30s}.summary-row:nth-child(6){animation-delay:.36s}

@media (prefers-reduced-motion:reduce){
  .pane[data-pane-active="true"],
  .pane[data-pane-active="true"] *{animation:none !important}
}

/* ── Gänsehaut-Success — Bild des gewählten Bereichs als Held + Gold-Aufleucht ── */
.success-hero{position:relative;width:100%;max-width:440px;margin:0 auto var(--space-6);
  aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.7), 0 0 0 1px rgba(200,160,91,.25);
  animation:mb-hero-in .9s cubic-bezier(.22,.61,.36,1) both}
@keyframes mb-hero-in{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.success-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;
  animation:mb-hero-kb 9s ease-out both;transform-origin:center}
@keyframes mb-hero-kb{from{transform:scale(1.12)}to{transform:scale(1)}}
/* Der goldene Schein sitzt dort, wo der Haken steht (unteres Drittel), und der
   dunkle Fuss traegt Haken + Namen. Beides zeigte bis 2026-08-05 auf die
   Bildmitte, weil der Haken dort sass. */
.success-hero-veil{position:absolute;inset:0;
  background:radial-gradient(90% 70% at 82% 84%, rgba(200,160,91,.30), transparent 60%),
    linear-gradient(180deg, rgba(11,10,9,.08) 0%, rgba(11,10,9,.16) 38%,
      rgba(11,10,9,.58) 68%, rgba(11,10,9,.88) 100%)}
/* goldener Aufleucht-Ring + Häkchen — sitzt ueber dem Namen im dunklen Verlauf,
   nicht mehr in der Bildmitte (dort lag er bei Portraets im Gesicht). */
.success-hero-check{width:52px;height:52px;flex:none;order:2;
  display:flex;align-items:center;justify-content:center;
  color:#fff;border-radius:50%;background:rgba(200,160,91,.18);
  box-shadow:0 0 0 1px rgba(231,205,147,.6), 0 0 40px 6px rgba(200,160,91,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:mb-check-pop .7s cubic-bezier(.34,1.5,.5,1) .25s both, mb-check-glow 2.6s ease-in-out 1s infinite}
@keyframes mb-check-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes mb-check-glow{0%,100%{box-shadow:0 0 0 1px rgba(231,205,147,.6), 0 0 36px 4px rgba(200,160,91,.42)}50%{box-shadow:0 0 0 1px rgba(231,205,147,.85), 0 0 60px 12px rgba(200,160,91,.7)}}
.success-hero-check .success-stroke{stroke-dasharray:30;stroke-dashoffset:30;animation:mb-check-draw .5s ease .55s forwards}
@keyframes mb-check-draw{to{stroke-dashoffset:0}}
/* Name links, Siegel rechts — eine Fusszeile im Bild. So bleibt das Motiv frei,
   egal ob dort ein Gesicht oder ein Raum ist. */
.success-hero-zone{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;
  animation:mb-fade .7s cubic-bezier(.22,.61,.36,1) .55s both}
.success-hero-name{min-width:0;text-align:left;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(20px,4vw,28px);font-weight:400;
  line-height:1.15;color:#fff;letter-spacing:.01em;text-shadow:0 2px 18px rgba(0,0,0,.7)}
/* Titel + Message gestaffelt darunter */
#paneSuccess[data-pane-active="true"] .success-title{animation:mb-fade .7s cubic-bezier(.22,.61,.36,1) .7s both}
#paneSuccess[data-pane-active="true"] .success-message{animation:mb-fade .7s cubic-bezier(.22,.61,.36,1) .85s both}
.success-title{font-family:'Cormorant Garamond',Georgia,serif !important;font-weight:400;
  font-size:clamp(26px,5vw,40px) !important;
  background:linear-gradient(180deg,var(--ink-strong),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-reduced-motion:reduce){
  .success-hero,.success-hero-img,.success-hero-check,.success-hero-zone,
  #paneSuccess .success-title,#paneSuccess .success-message{animation:none !important}
  .success-hero-check .success-stroke{stroke-dashoffset:0}
}

/* ── Embed-Mode: kompakteres App-Shell-Padding ─────────────────────────── */
/* iframe-Embed (?embed=1) auf Marketing-Demo-Pages: weniger horizontales
   Padding damit Calendar (7-Spalten-Grid) + Service-Cards mehr Breite
   bekommen. Standalone-User behält großzügigeres Padding. */
body.embedded .app-shell {
  padding: var(--space-4) var(--space-2);
}
@media (min-width: 900px) {
  body.embedded .app-shell {
    padding: var(--space-6) var(--space-4);
  }
}


/* ════════════════════════════════════════════════════════════════════════
   Trust-Strip (unter Steps-Bar)
   ════════════════════════════════════════════════════════════════════════ */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin: calc(-1 * var(--space-2)) auto var(--space-6);
  padding: 0 var(--space-4);
  font-size: 13px;
  color: var(--ink-muted);
}

/* Trust-Items als dezente Pills mit Border — sichtbarer als reiner Text.
   Wir nutzen die semantischen Surface-Tokens damit Light + Dark + System-Dark sauber funktionieren. */
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms;
}

.trust-item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.trust-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.trust-item:nth-child(1) svg { color: var(--accent); }
.trust-item:nth-child(2) svg { color: oklch(80% 0.15 75); }   /* gold */
.trust-item:nth-child(3) svg { color: var(--success); }

.trust-item strong {
  color: var(--ink-strong);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 599px) {
  .trust-strip {
    gap: var(--space-2);
    padding: 0 var(--space-3);
    font-size: 12px;
  }
  .trust-item {
    padding: 6px 11px;
    gap: 6px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   LINE Friend-Add-Card (Success-Screen)
   ════════════════════════════════════════════════════════════════════════ */
.line-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  margin: 0 auto var(--space-8);
  max-width: 480px;
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-inset-border), var(--shadow-sm);
  text-align: left;
}

.line-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: oklch(80% 0.18 145 / 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Menü-Brücke: klickbare Karte (Speisekarte ansehen / vorbestellen) in Akzentfarbe */
.menu-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  margin: 0 auto var(--space-8);
  max-width: 480px;
  background: var(--surface-elevated);
  border: 1.5px solid color-mix(in oklch, var(--accent) 35%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.menu-card:hover  { border-color: var(--accent); box-shadow: var(--shadow-md, var(--shadow-sm)); }
.menu-card:active { transform: scale(0.99); }
.menu-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.menu-card-body { flex: 1; min-width: 0; }
.menu-card-title { font-weight: 700; font-size: var(--text-base, 15px); }
.menu-card-desc  { margin: 2px 0 0; font-size: var(--text-sm, 13px); color: var(--text-muted, #6b7280); }
.menu-card-arrow { color: var(--accent); font-size: 20px; flex-shrink: 0; }

.line-card-body {
  flex: 1;
  min-width: 0;
}

.line-card-title {
  font-family: var(--font-display);
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
  margin-bottom: 2px;
}

.line-card-desc {
  font-size: var(--text-body-sm-size);
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

/* Primaerer LINE-Tap-Button — gruene Brand-Farbe (#06c755).
   Auf Mobile ist das der wichtigste CTA (Customer kann sein eigenes Handy
   nicht scannen → muss tappen). Auf Desktop redundant zum QR daneben. */
.line-card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  background: #06c755;
  color: #ffffff;
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm-size);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--duration-quick) var(--ease-out),
              transform var(--duration-quick) var(--ease-out);
}

.line-card-cta:hover  { background: #05a847; }
.line-card-cta:active { transform: scale(0.97); }

/* ════════════════════════════════════════════════════════════════════════
   Welle S — LINE Login Section im Booking-Form (Step 3)
   ════════════════════════════════════════════════════════════════════════ */
.line-login-section {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-subtle);
  text-align: center;
}

.line-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 12px 18px;
  background: #06c755;
  color: #ffffff;
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-size);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--duration-quick) var(--ease-out),
              transform var(--duration-quick) var(--ease-out);
}
.line-login-btn:hover  { background: #05a847; }
.line-login-btn:active { transform: scale(0.98); }

.line-login-fallback {
  margin-top: var(--space-2);
  font-size: var(--text-body-sm-size);
  color: var(--ink-muted);
}

/* Status-Card wenn eingeloggt */
.line-login-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  background: oklch(80% 0.18 145 / 0.12);
  border-radius: var(--radius-md);
  text-align: left;
}
.line-login-picture {
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--surface);
  object-fit: cover;
}
.line-login-status-text { flex: 1; min-width: 0; }
.line-login-status-name {
  font-size: var(--text-body-sm-size);
  color: var(--ink-strong);
}
.line-login-status-hint {
  margin-top: 2px;
  font-size: var(--text-body-xs-size, 11px);
  color: var(--ink-muted);
}

.line-card-qr {
  flex-shrink: 0;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #ffffff;
  padding: 6px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-quick) var(--ease-out);
}

.line-card-qr:hover {
  transform: scale(1.04);
}

.line-card-qr img {
  display: block;
  border-radius: var(--radius-sm);
}

@media (max-width: 599px) {
  .line-card {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }
  .line-card-body { text-align: center; }
  /* Mobile: Button full-width damit der Tap-Target gross + offensichtlich ist */
  .line-card-cta { width: 100%; justify-content: center; padding: 12px 18px; }
  /* QR auf Mobile kleiner — Customer kann sein eigenes Phone nicht scannen,
     QR ist nur fuer den seltenen Fall "Booking vom Desktop, will Bestaetigung
     auf Phone" relevant → weniger visuelle Prominenz. */
  .line-card-qr { padding: 4px; }
  .line-card-qr img { width: 64px; height: 64px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Manage-Page (Customer Token-Link)
   ════════════════════════════════════════════════════════════════════════ */
.manage-page {
  max-width: 560px;
  margin: 0 auto;
}

.manage-status-pill {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  background: var(--surface-sunken);
  color: var(--ink-default);
  box-shadow: var(--shadow-inset-border);
}

.manage-status-pill.is-pending {
  background: oklch(80% 0.15 75 / 0.18);
  color: oklch(45% 0.15 75);
}

.manage-status-pill.is-confirmed {
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.manage-status-pill.is-cancelled {
  background: var(--status-error-bg);
  color: var(--status-error-text);
}

.manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}

.manage-cancel-confirm {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--surface-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-inset-border);
}

/* ── Stornofrist-Hinweis (Welle 1) ───────────────────────────────────────── */
.manage-policy {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--text-body-sm-size);
  color: var(--ink-muted);
  line-height: 1.5;
}

/* ── Umbuchen (Welle 1): Datum + freie Zeiten ────────────────────────────── */
.manage-reschedule {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--surface-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-inset-border);
}

.rs-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-4);
  min-height: 44px;
}

.rs-slot {
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--surface-canvas);
  box-shadow: var(--shadow-inset-border);
  color: var(--ink-strong);
  font-size: var(--text-body-size);
  font-variant-numeric: tabular-nums;
  transition:
    box-shadow var(--duration-quick) var(--ease-out),
    background var(--duration-quick) var(--ease-out);
}
.rs-slot:hover { box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm); }
.rs-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-slot.is-selected {
  background: var(--accent);
  color: var(--ink-on-brand);
  box-shadow: none;
}

.rs-hint {
  width: 100%;
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--text-body-sm-size);
  padding: var(--space-3) 0;
}
.rs-hint.is-error { color: var(--danger, #b3402f); }

/* Danger-Button */
.btn-danger {
  background: var(--danger);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.btn-danger:hover:not(:disabled) {
  filter: brightness(0.94);
  box-shadow: var(--shadow-md);
}

/* ════════════════════════════════════════════════════════════════════════
   Error-Banner
   ════════════════════════════════════════════════════════════════════════ */
.error-banner {
  max-width: 1120px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--status-error-bg);
  color: var(--status-error-text);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm-size);
  line-height: 1.5;
}

.error-banner svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ═════════════════════════════════════════════════════════════════════════
   HOTEL-MODE — Date-Range-Booking (Booking.com-Style)
   Step 1: hotel-stay (Check-In + Check-Out + Adults + Children)
   Step 2: hotel-room-list (Cards mit pricePerNight + Total)
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Step 1: Stay-Picker ─────────────────────────────────────────────── */
.hotel-stay {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-align: left;
  margin-top: var(--space-4);
}

.hotel-stay-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .hotel-stay-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}

.hotel-stay-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hotel-stay-label {
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
  letter-spacing: -0.005em;
}

.hotel-date-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body-size);
  font-family: inherit;
  color: var(--ink-strong);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-quick) var(--ease-out),
              box-shadow   var(--duration-quick) var(--ease-out);
}
.hotel-date-input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.hotel-nights {
  display: flex;
  justify-content: center;
  margin: var(--space-2) 0;
  min-height: 28px;
}
.hotel-nights-ok {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-full);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
}
.hotel-nights-ok svg { width: 14px; height: 14px; }
.hotel-nights-warn {
  color: var(--status-error-text);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
}

.hotel-guests {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.hotel-guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}
.hotel-guest-row + .hotel-guest-row {
  border-top: 1px solid var(--border-subtle);
}

.hotel-guest-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hotel-guest-name {
  font-weight: var(--weight-medium);
  color: var(--ink-strong);
}
.hotel-guest-hint {
  font-size: var(--text-body-sm-size);
  color: var(--ink-subtle);
}

/* Kompakte Variante des Steppers fuer Adults/Children */
.stepper-row--compact {
  gap: var(--space-3);
}
.stepper-row--compact .stepper-btn {
  width: 36px;
  height: 36px;
}
.stepper-row--compact .stepper-btn svg { width: 16px; height: 16px; }
.stepper-row--compact .stepper-number {
  font-size: 22px;
  min-width: 28px;
  text-align: center;
}

/* ── Step 2: Room-List ────────────────────────────────────────────────── */
.hotel-room-header {
  text-align: center;
  margin-bottom: var(--space-6);
}
.hotel-room-title {
  font-family: var(--font-display);
  font-size: var(--text-display-sm-size);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.025em;
  margin: var(--space-3) 0 var(--space-2);
}
.hotel-room-sub {
  color: var(--ink-muted);
  font-size: var(--text-body-size);
}
.hotel-room-header .service-change {
  background: none;
  border: 0;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: var(--text-body-sm-size);
  padding: 0;
}
.hotel-room-header .service-change:hover { color: var(--accent); }

.hotel-room-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hotel-room-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-quick) var(--ease-out),
              transform  var(--duration-quick) var(--ease-out);
}
.hotel-room-card:hover:not(.is-disabled) {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.hotel-room-card.is-disabled { opacity: 0.6; }

@media (min-width: 720px) {
  .hotel-room-card {
    grid-template-columns: 240px 1fr;
  }
}

.hotel-room-media {
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  position: relative;
}
.hotel-room-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hotel-room-initial {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: var(--weight-semibold);
  color: var(--accent);
}

.hotel-room-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hotel-room-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: start;
}
.hotel-room-name {
  font-family: var(--font-display);
  font-size: var(--text-h3-size);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
  margin: 0;
}
.hotel-room-meta {
  margin: 4px 0 0;
  font-size: var(--text-body-sm-size);
  color: var(--ink-muted);
}

.hotel-room-pricing {
  text-align: right;
}
.hotel-room-perN {
  font-weight: var(--weight-semibold);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.hotel-room-perN span {
  font-weight: var(--weight-regular);
  color: var(--ink-subtle);
  font-size: var(--text-body-sm-size);
}
.hotel-room-total {
  margin-top: 4px;
  color: var(--accent);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.hotel-room-total span {
  font-weight: var(--weight-regular);
  color: var(--ink-subtle);
  font-size: var(--text-body-sm-size);
  margin-left: 4px;
}

.hotel-room-desc {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-body-sm-size);
  line-height: 1.5;
}

.hotel-room-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.hotel-amenity {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 12px;
  color: var(--ink-muted);
}

.hotel-room-unavailable {
  padding: var(--space-3);
  background: var(--status-error-bg, #fee2e2);
  color: var(--status-error-text);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm-size);
}

.hotel-room-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.hotel-room-subtotal { font-size: var(--text-body-sm-size); color: var(--ink-default); }
.hotel-room-subtotal strong { color: var(--accent); }
.hotel-room-sleeps-hint { font-size: var(--text-body-sm-size); color: var(--ink-muted); }
.hotel-qty { display: inline-flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.hotel-qty-num { min-width: 1.5ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.hotel-room-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hotel-capacity-notice {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3); margin-bottom: var(--space-4);
  border-radius: var(--radius-md); border-left: 3px solid transparent;
  font-size: var(--text-body-sm-size); font-weight: 500; color: var(--ink-strong);
}
.hotel-capacity-notice.is-short { background: color-mix(in oklch, var(--warning) 16%, transparent); border-left-color: var(--warning); }
.hotel-capacity-notice.is-ok    { background: color-mix(in oklch, var(--success) 14%, transparent); border-left-color: var(--success); }
.hotel-capacity-notice [data-icon] { flex-shrink: 0; display: inline-flex; }
.hotel-capacity-notice svg { width: 18px; height: 18px; }
.hotel-capacity-notice.is-short svg { color: var(--warning); }
.hotel-capacity-notice.is-ok svg { color: var(--success); }

/* Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   MOBILE-FIRST POLISH — Profi-Patterns 2025 (Fresha/Vagaro/Cal.com)
   ========================================================================= */
@media (max-width: 768px) {
  /* iOS-Zoom-on-focus verhindern: alle Form-Inputs >= 16px Schrift.
     Sonst zoomt iOS Safari automatisch beim Tap auf Inputs unter 16px. */
  input, select, textarea, .form-input, .form-select {
    font-size: 16px;
  }

  /* Touch-Targets — Apple HIG 44pt / Material 48dp.
     Gilt fuer alle interaktiven Elemente, Ausnahmen unten.
     .topbar-controls button ausgenommen: die Topbar-Pill (Lang + Theme) ist
     kompakt by-design (wie miraMENU) — 44px würde die Buttons zu Kreisen blähen. */
  button:not(.icon-btn-sm):not(.topbar-controls button),
  .btn,
  [role="button"]:not(.topbar-controls [role="button"]),
  a.btn,
  select {
    min-height: 44px;
  }

  /* Sticky CTA — iPhone-Notch + Safe-Area-Inset respektieren */
  .sticky-cta, .footer-cta, [data-sticky-cta] {
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  }

  /* Date-Inputs (HTML5) bekommen mehr Höhe + sichtbares Tap-Feedback */
  input[type="date"], input[type="time"] {
    min-height: 48px;
    padding: 10px 14px;
  }

  /* Counter-Buttons (+/− für Guests/Adults/Children) müssen gut tap-bar sein */
  .guest-counter button, .number-counter button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Thai-Locale: Sarabun-Font als Primary (besser lesbar für Thai-Zeichen) */
html[lang="th"] body,
html[lang="th"] .step-title,
html[lang="th"] .pane-title {
  font-family: 'Sarabun', 'Inter Display', Inter, system-ui, sans-serif;
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile-Compact Booking-Service-Banner
   Auf Phone wird die Service-Sidebar (Avatar + Name + Headline + Meta +
   Change-Link) als horizontaler Banner statt vertikaler Stack gerendert.
   Spart ~200px vertikalen Platz → Calendar ist sofort sichtbar.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Banner-Layout: [Avatar] [Name+Headline gestapelt] [Change-Link] in einer Row.
     Meta-Zeile (1h 30min) darunter mit dünnem Divider — Profi-Pattern Cal.com. */
  .booking-service {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    padding: var(--space-3) var(--space-4) !important;
  }
  /* Spalte 1: Avatar (44×44 statt 48×48) */
  .booking-service .service-avatar {
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
    font-size: 16px;
    margin-bottom: 0;
  }
  /* Spalte 2: Name oben, Headline darunter — vertikaler Stack via Block-Layout */
  .booking-service .service-name {
    grid-column: 2;
    grid-row: 1;
    font-size: 11px;
    line-height: 1.1;
    margin: 0;
    align-self: end;
  }
  .booking-service .service-headline {
    grid-column: 2;
    grid-row: 2;
    font-size: 17px !important;
    line-height: 1.2 !important;
    margin: 0;
    align-self: start;
  }
  /* Detail-Zeile: Dauer (links) + Gäste-Pille (rechts) als EINE saubere Banner-Zeile
     mit Trenner darüber. Gemeinsamer Wrapper → kein Überlappen mit der Linie. */
  .booking-service .service-detailrow {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
  }
  .booking-service .service-detailrow .service-meta {
    margin: 0; padding: 0; border: 0;
    flex-direction: row; gap: var(--space-4);
  }
  .booking-service .service-detailrow .sidebar-guests {
    margin: 0; padding: 0; border: 0;
    display: flex; align-items: center; flex-shrink: 0;
  }
  .booking-service .service-detailrow .sg-display { padding: 6px 12px; }
  .booking-service .service-meta-row { font-size: 12px; }
  /* Service-Desc auf Mobile ausblenden — meist leer und nimmt Platz */
  .booking-service .service-desc { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Gutschein (G4) — eigener Modus derselben Seite, /voucher bzw. /gutschein
   Nutzt die gleichen Tokens wie das Buchungs-Widget, damit beides zusammen
   aussieht. Eigene Klassen statt Zweckentfremdung der Service-Kacheln: die
   tragen Bilder und Preise, hier geht es nur um einen Betrag.
   ═══════════════════════════════════════════════════════════════════════════ */

.voucher-amounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-4);
}

.voucher-amount {
  appearance: none;
  border: 1px solid var(--border-default);
  background: var(--surface-elevated);
  color: var(--ink-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-2);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--duration-quick) var(--ease-out),
              box-shadow var(--duration-quick) var(--ease-out),
              transform var(--duration-instant) var(--ease-out);
}
.voucher-amount:hover { border-color: var(--border-strong); }
.voucher-amount:active { transform: scale(0.985); }
.voucher-amount.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-focus);
  color: var(--accent);
}
.voucher-amount-custom { font-size: 14px; font-weight: 500; }

/* Kachel mit Bezeichnung: Betrag oben, darunter in kleiner Schrift, wofuer er
   reicht. Beide Zeilen zentriert, damit Kacheln mit und ohne Text nebeneinander
   ruhig wirken. */
.voucher-amount { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.voucher-amount-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-muted);
}
.voucher-amount.is-active .voucher-amount-label { color: inherit; opacity: .85; }

/* Rechtshinweis unter dem Kaufknopf und die Widerrufsfunktion im Fuss. Der
   Fusslink ist bewusst kraeftiger als Datenschutz/Impressum: das Gesetz
   verlangt ihn „hervorgehoben" (§ 356a BGB). */
.voucher-consumer a { color: inherit; text-decoration: underline; }
.legal-footer .withdraw-link { color: var(--accent); font-weight: 600; text-decoration: underline; opacity: 1; }

/* Obergrenze erreicht: ein Satz statt Kacheln */
.voucher-soldout {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  color: var(--ink-default);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

/* Freier Betrag: Waehrungszeichen sitzt im Feld, damit klar ist, worum es geht */
.voucher-custom-field { position: relative; }
.voucher-custom-field .form-input { padding-right: 42px; }
.voucher-custom-cur {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--ink-muted);
  pointer-events: none;
}

.voucher-print-link {
  margin: var(--space-5) 0 0;
  font-size: 14px;
}

.voucher-print-link a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Rechnung: gleicher Stil wie der Ausdruck, nur ohne eigenen Abstand nach
   oben, damit beide Links als Paar lesbar sind. */
.voucher-receipt-link { margin: var(--space-2) 0 0; font-size: 14px; }
.voucher-receipt-link a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Endpreis auf der Kachel, wenn eine Servicegebuehr dazukommt. Kleiner als der
   Wert, aber in voller Tintenfarbe: das ist ein Preis, keine Fussnote. */
.voucher-amount-price {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-default);
}
.voucher-amount.is-active .voucher-amount-price { color: inherit; }

/* Wert, Gebuehr, Gesamtpreis ueber dem Kaufknopf. Die Summe ist
   hervorgehoben, so verlangt es § 3 Abs. 3 PAngV bei einem aufgeteilten Preis. */
.voucher-summary {
  margin: var(--space-2) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  font-size: 14px;
  color: var(--ink-default);
}
.voucher-summary[hidden] { display: none; }
.voucher-summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
}
.voucher-summary-total {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-strong);
}

/* ── Gutschein einloesen: Feld im letzten Schritt vor dem Absenden ─────────
   Bewusst ruhig gehalten. Die meisten Gaeste haben keinen Gutschein, das Feld
   darf den Blick nicht vom Buchen-Knopf wegziehen. */
.voucher-redeem {
  margin: calc(var(--space-6) * -1 + var(--space-2)) 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
}

.voucher-redeem-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.voucher-redeem-row .form-input {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

.voucher-redeem-row .btn {
  flex: 0 0 auto;
}

.voucher-redeem-hint {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.voucher-redeem-msg {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm-size);
  line-height: 1.55;
}

.voucher-redeem-msg.is-ok {
  background: oklch(95% 0.06 150 / 0.55);
  color: oklch(38% 0.10 150);
}

.voucher-redeem-msg.is-error {
  background: oklch(95% 0.05 25 / 0.55);
  color: oklch(42% 0.14 25);
}

/* Angenommen: das Feld tritt zurueck, die Bestaetigung uebernimmt. */
.voucher-redeem.is-applied .voucher-redeem-row,
.voucher-redeem.is-applied .voucher-redeem-hint {
  display: none;
}

.voucher-redeem-clear {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin-left: var(--space-2);
  color: inherit;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

/* Auf schmalen Geraeten steht der Knopf unter dem Feld, sonst bleibt fuer den
   Code kaum Platz. Ein 16-stelliger Code in einem 120px breiten Feld ist
   unlesbar, und genau dort tippt ihn der Gast ab. */
@media (max-width: 400px) {
  .voucher-redeem-row {
    flex-direction: column;
  }
  .voucher-redeem-row .btn {
    width: 100%;
  }
}

.voucher-legal {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Der bezahlte Gutschein: bewusst wie ein abgerissener Abschnitt, damit die
   Zahl und der Code sofort ins Auge fallen. */
.voucher-ticket {
  margin: var(--space-6) auto 0;
  max-width: 380px;
  padding: var(--space-6) var(--space-5);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface-sunken);
  text-align: center;
}
.voucher-ticket-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.voucher-ticket-code {
  margin: var(--space-2) 0 var(--space-4);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: clamp(17px, 4.8vw, 28px);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--ink-strong);
  /* Der Code bleibt in EINER Zeile. Bricht er um, liest man ihn falsch ab und
     tippt ihn falsch ein. Lieber schrumpft die Schrift auf schmalen Geraeten. */
  white-space: nowrap;
}
.voucher-ticket-amount {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
}
.voucher-ticket-expires {
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--ink-muted);
}

.voucher-pending {
  margin: var(--space-5) auto 0;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
}