/* Design-System der Buchungs-App — von der echten Homepage
   (faltenfreipunkt.de) abgeleitet: warmes Creme, Salbeigrün, Manrope für
   Überschriften, Inter für Fließtext. Bewusst eigenständig vom dunkleren
   Werkzeug-Design der internen Apps (shared/style.css) — hier sieht der
   Kunde die Marke, nicht ein internes Tool. */

@import url('../shared/fonts.css');

:root {
  --cream: #faf8f3; --panel: #ffffff; --ink: #2c3130; --muted: #6b7670;
  --line: #e6e1d6; --sage: #4f675f; --sage-dark: #3c504a; --sage-soft: #eaf0ec; --sage-light: #c9d8d0;
  --terracotta: #c9784a; --terracotta-soft: #fbeee3;
  --danger: #b23b3b; --danger-soft: #fbeaea;
  --shadow: 0 18px 50px rgba(44, 49, 48, .10);
  --radius-lg: 24px; --radius-md: 16px; --radius-sm: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--cream); color: var(--ink);
  font-family: Inter, system-ui, -apple-system, sans-serif; line-height: 1.55; font-size: 15px;
}
h1, h2, h3 { font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0; }
p { margin: 0; }
a { color: var(--sage-dark); }
button, input, select, textarea { font: inherit; color: inherit; }
/* iPhone/iPad zoomen beim Antippen automatisch in jedes Eingabefeld mit Schrift unter 16px hinein — und bleiben danach
   gezoomt (so wirkte die Seite nach der Buchung „vergrößert"). Ab 16px passiert das nicht; Zoomen per Hand bleibt möglich. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, select, textarea { font-size: 16px; }
button { cursor: pointer; }

/* ------------------------------------------------------------- Kopfzeile */
.bookingHeader { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.bookingHeader img { height: 30px; }
.bookingHeader .brandName { font-family: Manrope, sans-serif; font-weight: 800; font-size: 17px; }

/* Eingebettet in die Homepage (iframe): kein eigenes Logo — die Homepage liefert
   den Rahmen. Der iframe ist so hoch wie der Inhalt und scrollt selbst nicht;
   "fixed" würde deshalb am Ende der ganzen Seite kleben. Die Homepage meldet den
   sichtbaren Ausschnitt (--vpTop/--vpBottom/--vpHeight), daran hängen Meldungen
   und Rückfragen. */
body.embedded { position: relative; }
body.embedded .bookingHeader { display: none; }
/* Den seitlichen Rand liefert die Homepage — eigener Rand würde den Inhalt am Handy unnötig schmal machen. */
body.embedded main.booking { padding: 8px 2px 24px; }
body.embedded .toast { position: absolute; bottom: auto; top: calc(var(--vpBottom, 100%) - 18px); transform: translateY(-100%); }
body.embedded .confirmOverlay { position: absolute; inset: auto; left: 0; right: 0; top: var(--vpTop, 0px); height: var(--vpHeight, 100%); }
body.embedded #topProgress { position: absolute; top: var(--vpTop, 0px); }

/* Fortschrittsanzeige — bleibt beim Scrollen sichtbar (siehe README_BuchungsUX). */
.progressBar { position: sticky; top: 0; z-index: 40; background: rgba(250,248,243,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 10px 20px; }
.progressBar .track { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 8px; }
.progressBar .step { flex: 1; height: 5px; border-radius: 3px; background: var(--sage-light); overflow: hidden; }
.progressBar .step > span { display: block; height: 100%; background: var(--sage); width: 0%; transition: width .35s ease; }
.progressBar .step.done > span { width: 100%; }
.progressBar .step.current > span { width: 60%; }
.progressBar .label { text-align: center; font-size: 12px; color: var(--muted); margin-top: 7px; font-weight: 600; }

/* ------------------------------------------------------------------ Main */
main.booking { max-width: 640px; margin: 0 auto; padding: 28px 20px 100px; }
.stepEyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-dark); margin-bottom: 8px; }
.stepTitle { font-size: 28px; margin-bottom: 8px; }
.stepSubtitle { color: var(--muted); font-size: 14px; margin-bottom: 26px; }

/* ---------------------------------------------- Auswahlseite (Schritte 1–4 auf einer Seite) */
main.booking.wide { max-width: 1120px; }
.selectionLayout { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .selectionLayout { grid-template-columns: minmax(0, 1fr) 320px; } .selectionSummary { position: sticky; top: 76px; } }
.selectionMain { display: grid; gap: 18px; min-width: 0; }
.sectionCard { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 24px; scroll-margin-top: 76px; }
.sectionHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.sectionHead h2 { font-size: 21px; margin-bottom: 4px; }
.sectionHead p { color: var(--muted); font-size: 13px; }
.sectionNo { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: Manrope, sans-serif; font-weight: 800; font-size: 14px; }
.choiceGrid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.basketCard { flex-direction: column; }
.basketCard h3 { font-size: 18px; }
.basketPrice { font-family: Manrope, sans-serif; font-weight: 800; font-size: 22px; margin: 4px 0 6px; }
/* Hin-/Rückweg: zwei Spalten mit GEMEINSAMEN Zeilen (spaltenweise befüllt) —
   Frage, Karte 1 und Karte 2 stehen links und rechts exakt auf einer Linie
   und sind pro Zeile gleich hoch, egal wie lang der Text ist. */
.serviceGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; grid-auto-flow: column; gap: 10px 22px; }
.serviceGrid .serviceQuestion { margin-bottom: 2px; align-self: end; }
.serviceGrid .toggleCard { align-items: center; min-height: 76px; }
.toggleText { flex: 1 1 auto; min-width: 0; }
.toggleCard .soon { flex: 0 0 auto; white-space: nowrap; margin-left: 8px; }
.dateCard .why { font-size: 10px; line-height: 1.25; color: var(--muted); margin-top: 3px; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.orderSummaryCard .total { display: flex; justify-content: space-between; }
.summaryHint { color: var(--muted); font-size: 12px; margin-top: 12px; }
.reservationPill { background: var(--sage-soft); border: 1px solid var(--sage-light); color: var(--sage-dark); border-radius: 99px; padding: 8px 16px; font-size: 13px; text-align: center; margin-bottom: 20px; }
@media (max-width: 640px) {
  .choiceGrid.cols3 { grid-template-columns: 1fr; }
  .serviceGrid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .serviceGrid .serviceQuestion:not(:first-child) { margin-top: 14px; }
  .sectionCard { padding: 18px 16px; }
  .sectionHead h2 { font-size: 18px; }
}

/* ------------------------------------------------------------------ Karten */
.choiceGrid { display: grid; gap: 12px; }
.choiceCard {
  position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; text-align: left;
}
.choiceCard:hover { border-color: var(--sage); }
.choiceCard.selected { border-color: var(--sage); background: var(--sage-soft); box-shadow: 0 0 0 3px rgba(79,103,95,.12); }
.choiceCard.disabled { opacity: .55; cursor: not-allowed; }
.choiceCard .badge { position: absolute; top: -10px; left: 18px; background: var(--sage); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; }
.choiceCard .badge.soon { background: var(--terracotta); }
.choiceCard h3 { font-size: 16px; margin-bottom: 4px; }
.choiceCard p { color: var(--muted); font-size: 13px; }
.choiceCard .price { text-align: right; white-space: nowrap; }
.choiceCard .price strong { display: block; font-size: 20px; font-family: Manrope, sans-serif; font-weight: 800; }
.choiceCard .price .was { color: var(--muted); text-decoration: line-through; font-size: 12px; }

/* ------------------------------------------------------------- Kalender */
.dateGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
/* Feste Kachelgröße: Alle Tage sind gleich groß, egal wie lang der Grund darunter ist
   („Für diese Korbgröße nicht mehr verfügbar“ hat die Reihe sonst auseinandergezogen).
   Der Grundtext bekommt zwei Zeilen und wird danach mit … gekürzt — vollständig steht er im Tooltip. */
.dateCard {
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 10px 8px;
  text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease;
  height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
}
.dateCard .wd { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.dateCard .d { font-size: 14px; font-weight: 700; margin-top: 2px; }
.dateCard:hover:not(.disabled) { border-color: var(--sage); }
.dateCard.selected { border-color: var(--sage); background: var(--sage); }
.dateCard.selected .wd, .dateCard.selected .d { color: #fff; }
.dateCard.disabled { opacity: .35; cursor: not-allowed; }
.dateCard.disabled .d { text-decoration: line-through; }

.noticeBox { display: flex; gap: 10px; background: var(--sage-soft); border: 1px solid var(--sage-light); border-radius: var(--radius-sm); padding: 13px 15px; font-size: 13px; color: var(--sage-dark); margin-top: 16px; }
.noticeBox.warn { background: var(--terracotta-soft); border-color: #ecc9a8; color: #8a5024; }
.noticeBox.danger { background: var(--danger-soft); border-color: #edb; color: var(--danger); }
/* Erledigt-Meldung (z. B. „Termin geändert“) und Kundenpreis-Hinweis: sollen ins Auge fallen. */
.noticeBox.okBox { display: block; background: var(--sage-soft); border-color: var(--sage); border-left-width: 5px; font-size: 14px; font-weight: 600; }
.noticeBox.priceBox { display: block; border-color: var(--sage); border-left-width: 5px; line-height: 1.55; }
.basketPersonal { font-size: 11.5px; font-weight: 700; color: var(--sage-dark); margin-top: 2px; }
.priceFlag { margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--sage-dark); }
.field input.fieldError, input.fieldError { border-color: var(--danger); background: var(--danger-soft); }

/* ------------------------------------------------------------------ Toggles (Service) */
.toggleGroup { display: grid; gap: 10px; }
.toggleCard { display: flex; align-items: flex-start; gap: 12px; background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; }
.toggleCard input { margin-top: 3px; width: auto; accent-color: var(--sage); }
.toggleCard.selected { border-color: var(--sage); background: var(--sage-soft); }
.toggleCard.disabled { opacity: .55; cursor: not-allowed; }
.toggleCard .t { font-weight: 700; font-size: 14px; }
.toggleCard .m { color: var(--muted); font-size: 12px; margin-top: 2px; }
.serviceColumns { display: grid; gap: 22px; }
.serviceQuestion { font-weight: 700; font-size: 14px; margin-bottom: 10px; }

.summaryLine { background: var(--sage-soft); border-radius: var(--radius-sm); padding: 13px 15px; font-size: 13px; color: var(--sage-dark); margin-top: 18px; }
.summaryLine strong { color: var(--ink); }

/* ------------------------------------------------------------- Reservieren */
.countdownBox { text-align: center; background: var(--panel); border: 1.5px solid var(--sage-light); border-radius: var(--radius-lg); padding: 30px 20px; }
.countdownBox .time { font-family: Manrope, sans-serif; font-size: 40px; font-weight: 800; color: var(--sage-dark); }
.countdownBox .sub { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* --------------------------------------------------------------- Formulare */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; font-weight: 700; color: var(--ink); }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; background: #fff; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(79,103,95,.12); }
.field textarea { resize: vertical; min-height: 80px; }
/* minmax(0, …) + width:100% halten alle Felder exakt in der Spaltenbreite —
   ohne das ragen Eingabefelder mit ihrer Mindestbreite rechts hinaus. */
.field { min-width: 0; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; }
.fieldRow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.fieldRow.streetRow { grid-template-columns: minmax(0, 1fr) 110px; }
.fieldRow.cityRow { grid-template-columns: 130px minmax(0, 1fr); }
@media (max-width: 480px) {
  .fieldRow { grid-template-columns: minmax(0, 1fr); }
  .fieldRow.streetRow { grid-template-columns: minmax(0, 1fr) 92px; }
  .fieldRow.cityRow { grid-template-columns: 104px minmax(0, 1fr); }
}

.modeCards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
@media (max-width: 480px) { .modeCards { grid-template-columns: 1fr; } }

.otpCodeInput { display: flex; gap: 8px; justify-content: center; margin: 6px 0 4px; }
.otpCodeInput input {
  width: 42px; height: 52px; text-align: center; font-size: 22px; font-weight: 700;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.otpCodeInput input:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(79,103,95,.12); }

/* Text steht in einem <span> — sonst würde jedes Textstück/jeder Link ein
   eigenes Flex-Element und der Satz zerfiele in Spalten. */
.checkboxField { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 14px; cursor: pointer; }
.checkboxField input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--sage); }
.checkboxField span { flex: 1 1 auto; min-width: 0; }

/* Einmalcode: ein Feld, damit das Handy den Code vorschlagen und einsetzen kann. */
.field input.otpSingle { width: 100%; max-width: 280px; margin: 0 auto; display: block; text-align: center; font-family: Manrope, sans-serif; font-size: 28px; font-weight: 800; letter-spacing: .38em; padding: 12px 8px 12px 18px; }
.field input.otpSingle::placeholder { color: var(--sage-light); }
.field:has(.otpSingle) label { text-align: center; }

.readOnlyNote { background: var(--sage-soft); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; color: var(--sage-dark); margin-bottom: 16px; }

/* ------------------------------------------------------------------- Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid transparent; border-radius: 99px; padding: 13px 24px; font-weight: 700; font-size: 14px; background: var(--panel); border-color: var(--line); color: var(--ink); }
.btn:hover:not(:disabled) { border-color: var(--sage); }
.btn.primary { background: var(--sage); border-color: var(--sage); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--sage-dark); border-color: var(--sage-dark); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.block { width: 100%; }
.btn.loading { pointer-events: none; opacity: .7; }
.btn.loading::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: bspin .7s linear infinite; }
@keyframes bspin { to { transform: rotate(360deg); } }

.stepActions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; }
.stepActions .back { background: none; border: none; color: var(--muted); font-weight: 600; padding: 10px 4px; }

/* ---------------------------------------------------------------- Summary panel */
.orderSummaryCard { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 22px; }
.orderSummaryCard dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; margin: 0; }
.orderSummaryCard dt { color: var(--muted); }
.orderSummaryCard dd { margin: 0; text-align: right; font-weight: 600; }
.orderSummaryCard .total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; font-size: 17px; font-family: Manrope, sans-serif; font-weight: 800; }

/* ------------------------------------- Zusammenfassung im Markenlook (Abschluss + Bestätigung) */
.brandSummary { border-radius: var(--radius-lg); overflow: hidden; border: 1.5px solid var(--sage-light); background: var(--panel); box-shadow: var(--shadow); margin: 6px 0 24px; }
.brandSummaryHead { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--sage); color: #fff; padding: 20px 24px; }
.brandWordmark { font-family: Manrope, sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; }
.brandWordmark span { color: #d8915d; }
.brandSummarySub { font-size: 12px; opacity: .85; margin-top: 3px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.brandSummaryBadge { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); border-radius: 99px; padding: 6px 14px; font-family: Manrope, sans-serif; font-weight: 800; font-size: 13px; white-space: nowrap; }
.brandSummaryBody { padding: 6px 24px 10px; background: #fff; }
.brandGroup { padding: 16px 0 10px; border-bottom: 1px solid var(--line); }
.brandGroup:last-child { border-bottom: 0; }
.brandGroupTitle { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--sage); margin-bottom: 8px; }
.brandRow { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 5px 0; font-size: 14px; }
.brandRow span { color: var(--muted); flex: 0 0 auto; }
.brandRow strong { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.brandSummaryTotal { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #f1ece3; border-top: 1px solid var(--line); padding: 18px 24px; }
.brandSummaryTotal span { display: block; font-family: Manrope, sans-serif; font-weight: 800; font-size: 15px; }
.brandSummaryTotal small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.brandSummaryTotal strong { font-family: Manrope, sans-serif; font-weight: 800; font-size: 28px; color: var(--sage-dark); white-space: nowrap; }
@media (max-width: 480px) {
  .brandSummaryHead, .brandSummaryTotal { padding: 16px 18px; }
  .brandSummaryBody { padding: 4px 18px 8px; }
  .brandSummaryTotal strong { font-size: 24px; }
}

/* ---------------------------------------------------------------- Success */
.successHero { text-align: center; padding: 20px 0 8px; }
.successHero .check { width: 56px; height: 56px; border-radius: 50%; background: var(--sage); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 18px; }
.orderBox { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 22px; margin: 22px 0; }
.orderBox .num { font-family: Manrope, sans-serif; font-weight: 800; font-size: 20px; text-align: center; margin-bottom: 14px; }
.orderBox dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; margin: 0; }
.orderBox dt { color: var(--muted); }
.orderBox dd { margin: 0; text-align: right; font-weight: 600; }

/* ---------------------------------------------------------------- Verwaltung */
.manageCard { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }

/* ---------------------------------------------------------------------- Utility */
.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.loadingBox { text-align: center; color: var(--muted); padding: 60px 20px; }
.msg { font-size: 13px; margin-top: 10px; }
.msg.error { color: var(--danger); }
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.tag.express { background: var(--terracotta-soft); color: #8a5024; }
.tag.open { background: var(--sage-soft); color: var(--sage-dark); }

/* -------------------------------------------------------------- Rückfrage-Dialoge (shared/ui.js) im Buchungs-Design */
.confirmOverlay { position: fixed; inset: 0; z-index: 240; background: rgba(44,49,48,.45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.confirmCard { width: min(420px, 100%); background: var(--panel); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px; }
.confirmCard h3 { font-size: 17px; margin-bottom: 8px; }
.confirmCard p { margin-bottom: 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.confirmCard label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.confirmCard input, .confirmCard select { width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin: 2px 0 15px; outline: none; font: inherit; }
.confirmCard input.confirmFieldError { border-color: var(--danger); background: var(--danger-soft); margin-bottom: 4px; }
.confirmFieldHint { color: var(--danger); font-size: 12px; font-weight: 600; margin: 0 0 12px; }
.confirmActions { display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; }
#topProgress { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--sage); z-index: 9999; opacity: 0; }
#topProgress.active { opacity: 1; animation: bProgressGrow 12s cubic-bezier(.05,.7,.15,1) forwards; }
#topProgress.done { opacity: 0; width: 100%; animation: none; transition: width .15s ease, opacity .3s ease .15s; }
@keyframes bProgressGrow { 0% { width: 0; } 25% { width: 45%; } 60% { width: 72%; } 100% { width: 93%; } }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 500; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow); max-width: 380px; font-size: 13px; display: flex; align-items: center; gap: 9px; }
.toast.error { background: var(--danger); }
.toast.hidden { display: none; }

@media (max-width: 480px) {
  .stepTitle { font-size: 23px; }
  main.booking { padding: 20px 16px 90px; }
  .choiceCard { padding: 15px 16px; }
  .otpCodeInput input { width: 36px; height: 46px; font-size: 19px; }
}

/* ------------------------------------------------------------- Sofort-Bügeln
   Nur sichtbar, solange der Betrieb den Service online geschaltet hat — deshalb bewusst
   auffällig (Terrakotta = „jetzt“) über der normalen Korb-Buchung. */
.sofortOffer {
  margin-bottom: 18px; padding: 20px 22px; background: var(--terracotta-soft); border: 1.5px solid #ecc9a8; border-left: 6px solid var(--terracotta); border-radius: var(--radius-lg); }
.sofortOffer h2 { font-size: 22px; margin: 6px 0 4px; }
.sofortOffer p { color: #6d4a2e; font-size: 14px; max-width: 520px; }
.sofortOffer .btn.primary { background: var(--terracotta); border-color: var(--terracotta); }
.sofortOffer .btn.primary:hover:not(:disabled) { background: #b0653a; border-color: #b0653a; }
.sofortOfferRow { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
/* Nicht buchbar: ausgegraut, aber lesbar — Grund und „Benachrichtige mich“ bleiben gut sichtbar. */
.sofortOffer.off { background: #f3f1ec; border-color: var(--line); border-left-color: #b9b3a6; }
.sofortOffer.off h2 { color: #7c7a74; }
.sofortOffer.off p { color: var(--muted); }
.sofortOffer.off .sofortBadge { background: #9a958a; }
.sofortOffer.off .sofortOfferBusy { color: var(--ink); }
.sofortWaitBtn { margin-top: 14px; background: #fff; border-color: var(--line); }
.sofortWaitForm { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.sofortWaitForm input { flex: 1 1 200px; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.sofortWaitForm .sofortWaitHint, .sofortWaitForm .msg { flex-basis: 100%; margin: 0; font-size: 12.5px; }
.sofortWaitDone { margin-top: 14px; padding: 11px 14px; background: var(--sage-soft); border: 1px solid var(--sage-light); border-radius: var(--radius-sm); color: var(--sage-dark); font-size: 14px; font-weight: 600; }
.sofortOfferText { flex: 1 1 280px; }
.sofortBadge { display: inline-block; background: var(--terracotta); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; }
.sofortOfferBusy { margin-top: 6px; font-weight: 600; }
.choiceGrid.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.timeGrid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.timeGrid .dateCard .d { font-size: 17px; }
.linkButton { border: 0; background: none; padding: 0; color: var(--sage-dark); text-decoration: underline; font-weight: 700; }
@media (max-width: 480px) { .sofortOffer .btn { width: 100%; } }
/* Hinweis auf der Korb-Buchung: eine Zeile mit Ampelpunkt statt des großen Kastens. */
.sofortHint { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-size: 14px; }
.sofortHint:hover { border-color: var(--terracotta); }
.sofortHintText { flex: 1 1 auto; }
.sofortHintArrow { color: var(--terracotta); font-weight: 800; font-size: 18px; }
.sofortDot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; background: #b9b3a6; }
.sofortDot.on { background: #2e9d5b; box-shadow: 0 0 0 4px rgba(46,157,91,.15); }
.sofortLive { color: #2e9d5b; }
a.back { text-decoration: none; display: inline-flex; align-items: center; }