/* ==========================================================================
   buchung.css – legt das neue Seitendesign über das Buchungssystem.
   Wird NUR auf den Kundenseiten geladen (index/bestaetigen/absagen),
   nach style.css und booking.css. Die Verwaltung bleibt unberührt.

   Bewusst als Überlagerung statt als Neufassung: booking.css bringt die
   erprobte Struktur mit, auch für den Kalender, den booking.js erst zur
   Laufzeit erzeugt. Hier werden nur Farben, Rundungen, Abstände und
   Zustände auf die Tokens aus style.css umgestellt.
   ========================================================================== */

/* --- Farbbrücke: die acht Variablen aus booking.css ------------------------ */
:root {
  --booking-border: var(--brand-line);
  --booking-muted: var(--ink-mute);
  --booking-ink: var(--ink);
  --booking-soft: var(--surface-alt);
  --booking-accent-soft: var(--brand-tint);
  --booking-danger-soft: #fbeaea;
  --booking-ok-soft: #eaf5ee;
}

.booking-body { background: var(--surface); color: var(--ink); font-family: var(--sans); }

/* --- Seitenkopf des Buchungsbereichs -------------------------------------- */
.booking-hero {
  /* Luft zwischen Navigation und farbigem Kopfbereich */
  margin-top: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  box-shadow: var(--shadow-m);
}
.booking-hero h1 { color: #fff; }
.booking-hero .hero-kicker,
.booking-hero .subline,
.booking-hero p { color: rgba(255, 255, 255, .93); }
.booking-hero a { color: #fff; }

.booking-hero-facts { color: rgba(255, 255, 255, .9); }

/* --- Karten und Flächen ---------------------------------------------------- */
.booking-card,
.booking-sidecard,
.booking-slot,
.booking-intro-bar {
  border-radius: var(--radius-m);
  border-color: var(--line);
  box-shadow: var(--shadow-s);
  background: var(--surface);
}
.booking-card h2,
.booking-card h3,
.booking-sidecard h3 { color: var(--ink); }

.booking-section + .booking-section { margin-top: clamp(1.25rem, 3vw, 2rem); }

.booking-intro-bar { border-radius: var(--radius-m); }
.booking-intro-bar a { color: var(--brand); font-weight: 650; }

.booking-eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
}
.booking-muted { color: var(--ink-mute); }

/* --- Schrittzähler --------------------------------------------------------- */
.booking-step-head { gap: .9rem; }
.booking-step-number {
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  flex-basis: 40px;
  height: 40px;
  font-size: .95rem;
}

/* --- Auswahl der Terminart ------------------------------------------------- */
.booking-type-card {
  border: 2px solid var(--brand-line);
  border-radius: var(--radius-m);
  background: var(--surface);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.booking-type-card:hover { border-color: var(--brand); }
.booking-type-card:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: var(--shadow-s);
}
.booking-type-card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.booking-type-copy strong { color: var(--ink); }
.booking-type-copy span { color: var(--ink-soft); }

/* --- Freie Termine --------------------------------------------------------- */
.booking-slot-option {
  border: 2px solid var(--brand-line);
  border-radius: var(--radius-m);
  min-height: 56px;
}
.booking-slot-option:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-s);
}
.booking-slot-option.is-selected,
.booking-slot-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.booking-slot-time { color: var(--ink); font-weight: 700; }
.booking-slot-meta { color: var(--ink-soft); }

.booking-day-toggle,
.booking-day-select-label {
  border-radius: var(--radius-m);
  border-color: var(--brand-line);
}
.booking-day-toggle:hover { border-color: var(--brand); }
.booking-day-heading, .booking-day-title { color: var(--ink); }
.booking-day-kicker, .booking-day-count { color: var(--ink-mute); }

/* --- Kalender -------------------------------------------------------------- */
.booking-calendar {
  border-radius: var(--radius-m);
  border-color: var(--line);
  background: var(--surface);
}
.booking-calendar-head,
.booking-dual-times-head { color: var(--ink); }
.booking-calendar-weekdays { color: var(--ink-mute); }

.booking-calendar-day {
  border-radius: var(--radius-s);
  min-height: 44px;                 /* Zielgröße für Finger */
  font-weight: 600;
  color: var(--ink);
}
.booking-calendar-day.has-slots {
  background: var(--brand-tint);
  color: var(--brand-dark);
  border: 1px solid var(--brand-line);
}
.booking-calendar-day.has-slots:hover { border-color: var(--brand); }
.booking-calendar-day.is-selected,
.booking-calendar-day.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.booking-calendar-day.is-empty,
.booking-calendar-day[disabled] { color: var(--ink-mute); opacity: .45; }

.booking-calendar-arrow {
  min-width: 44px; min-height: 44px;
  border-radius: 50%;
  border: 1px solid var(--brand-line);
  background: var(--surface);
  color: var(--brand);
}
.booking-calendar-arrow:hover { background: var(--brand-tint); border-color: var(--brand); }
.booking-calendar-legend { color: var(--ink-mute); font-size: var(--step--1); }

/* --- Zustandsseiten (bestaetigen / absagen) -------------------------------
   Ohne den Kopfblock beginnt die Seite direkt mit der Karte; die braucht
   Abstand zur Navigation, den vorher der Kopfblock mitbrachte. */
.booking-body .success-panel { margin-block: clamp(1.5rem, 5vw, 3rem); }

/* --------------------------------------------------------------------------
   Diese Seiten hatten einen Kopfblock, der nur wiederholte, was die Karte
   darunter ohnehin sagt. Die Überschrift nennt jetzt direkt das Ergebnis.
   ------------------------------------------------------------------------- */
.booking-status-title {
  margin: 0 0 1rem;
  font-size: var(--step-3);
  line-height: 1.15;
  color: var(--ink);
}
/* Die Zwischentitel der Karte duerfen nicht groesser sein als die
   Hauptueberschrift darueber. */
.success-panel h2 { font-size: var(--step-1); margin-bottom: .6rem; }

/* Die Buchungsseiten verwenden .btn-outline, das neue System .btn--ghost.
   Ohne diese Bruecke sah der Zweitknopf wie der Hauptknopf aus. */
.booking-body .btn-outline:not(.btn--ghost) {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
  box-shadow: none;
}
.booking-body .btn-outline:not(.btn--ghost):hover {
  background: var(--brand-tint);
  border-color: var(--brand-dark);
  color: var(--brand-dark);
}

/* --- Hinweise und Meldungen ------------------------------------------------ */
.booking-alert,
.form-status {
  border-radius: var(--radius-m);
  border: 1px solid var(--brand-line);
  background: var(--brand-tint);
  color: var(--ink);
}
.booking-alert--warning {
  background: #fdf6e6;
  border-color: #e8d7a8;
  color: #5c4708;
}
.booking-alert--expanded { background: var(--surface-alt); border-color: var(--line); }
.booking-alert-detail { color: var(--ink-soft); }
.slot-help { color: var(--ink-soft); }

/* --- Formularfelder – gleiche Anmutung wie im Kontaktformular -------------- */
.booking-fields input,
.booking-fields textarea,
.booking-fields select {
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  /* max(16px, …) verhindert das Hineinzoomen von iOS beim Fokus */
  font-size: max(16px, var(--step-0));
}
.booking-fields input:focus,
.booking-fields textarea:focus,
.booking-fields select:focus { border-color: var(--brand); }
.booking-fields label { font-weight: 600; font-size: var(--step--1); color: var(--ink); }
.field-note { color: var(--ink-mute); font-size: var(--step--1); }

/* --- Einwilligungen -------------------------------------------------------- */
.consent-stack { display: grid; gap: .75rem; }
.consent-stack .consent-wrap { margin: 0; }

/* --- Zusammenfassung in der Seitenspalte ----------------------------------- */
.booking-sidecard { top: calc(var(--header-offset, 0px) + 1rem); }
.summary-list { display: grid; gap: .6rem; }
/* booking.css setzt hier .booking-page .summary-item mit padding: .85rem 0
   und einer oberen Trennlinie - beides muss ueberschrieben werden, sonst
   klebt der Text am Rand und die Linie doppelt den Kartenrahmen. */
.booking-body .summary-item,
.booking-body .booking-page .summary-item {
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-alt);
  font-size: var(--step--1);
}
.summary-item strong { color: var(--ink); }
.booking-side-help { color: var(--ink-soft); font-size: var(--step--1); }

/* --- Abschluss ------------------------------------------------------------- */
.booking-finish { margin-top: 1.25rem; }
.booking-finish-note { color: var(--ink-mute); font-size: var(--step--1); margin-top: .75rem; }

/* --- Informationsteil und FAQ ---------------------------------------------- */
.booking-seo-panel h2, .booking-info-section h2 { color: var(--ink); }
.booking-info-grid { gap: clamp(1rem, 2.5vw, 1.5rem); }
.booking-faq .faq-title { text-align: left; }

/* --- WhatsApp-Knopf --------------------------------------------------------- */
.wa-float {
  border-radius: 999px;
  box-shadow: var(--shadow-m);
}


/* --- Seitenrand ------------------------------------------------------------
   .center kam aus dem alten Stylesheet, das die Kundenseiten nicht mehr
   laden. Ohne Ersatz sass der Inhalt rund 10 px vom Rand statt 16 px wie
   auf allen anderen Seiten. Hier dieselbe Container-Regel wie .wrap. */
/* booking.css gibt dem <main> bereits 10 px Rand (width: calc(100% - 20px)).
   Zusammen mit dem Container waeren es 26 px statt der 16 px der uebrigen
   Seiten – deshalb hier zuruecksetzen und den Rand allein dem Container
   ueberlassen. */
.booking-body:not(.booking-body--admin) main {
  width: 100%;
  max-width: none;          /* booking.css deckelt auf 1180 px */
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
}

.booking-body .center,
.booking-body .booking-page {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.booking-body .booking-page-content { margin-top: clamp(1rem, 3vw, 1.5rem); }
.booking-body .faq-section { padding-inline: 0; }
.booking-body .faq-title { text-align: left; margin-bottom: 1.25rem; }

/* --- Kleine Bildschirme ----------------------------------------------------- */
@media (max-width: 640px) {
  .booking-hero { border-radius: var(--radius-m); }
  .booking-intro-bar { flex-direction: column; align-items: flex-start; }
  .booking-step-number { flex-basis: 34px; height: 34px; }
  .booking-card, .booking-sidecard { padding: 1rem; }
  .booking-calendar-day { min-height: 46px; }
}

/* --- Bewegung sparsam ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .booking-slot-option, .booking-type-card { transition: none; }
  .booking-slot-option:hover { transform: none; }
}