/* Modul: Reservierung — nur Optik. Nutzt tokens.css (MD3, flat) als Grundlage. */

/* ---------- Hero (hell, flach) ---------- */
.res-hero {
  padding: var(--vw-space-8) var(--vw-space-4) var(--vw-space-6);
}
.res-hero__title {
  margin: .6rem 0 1rem;
}
.res-hero__lead {
  max-width: 60ch;
  color: var(--md-text-muted);
}

/* ---------- Stepper ---------- */
/* Die Schrittanzeige steht NICHT in einer .vw-section und bekommt deshalb
   kein Außenpolster von dort. Damit ihr Text auf exakt derselben Fluchtlinie
   sitzt wie Hero und Formular, wird die Section-Rechnung nachgebaut:
   Innenpolster = Section-Polster, max-width = Formularbreite + beide Polster.
   Vorher stand sie am Desktop 20px zu weit rechts und am Handy 16px zu weit
   links — sie wanderte also je nach Bildschirmbreite. */
.res-stepper {
  max-width: calc(68rem + 2 * var(--vw-space-4));
  padding: 2.5rem var(--vw-space-4) 0;
}
.res-stepper ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1rem; flex-wrap: wrap;
  font-family: var(--vw-font-label);
  font-weight: var(--vw-fw-text);
  text-transform: uppercase; letter-spacing: 1.5px;
  font-size: 1.4rem;
}
.res-stepper li {
  display: flex; align-items: center; gap: .8rem;
  color: var(--md-text-muted);
  padding: .6rem 0;
  position: relative; flex: 1 1 140px;
}
.res-stepper li span {
  /* Kreise kraeftig (vom Inhaber: "Zahlen zu schwach"): volle Textfarbe,
     2px-Rand, fett. Nur die Beschriftung daneben bleibt gedaempft. */
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 32px; height: 32px;
  border: 2px solid var(--md-text); border-radius: 50%;
  color: var(--md-text); background: var(--md-background);
  font-weight: 800; letter-spacing: 0;
}
.res-stepper li.is-active { color: var(--md-text); }
.res-stepper li.is-active span {
  background: var(--md-primary);
  border-color: var(--md-primary-text);
  color: var(--md-on-primary);
}
.res-stepper li.is-done   { color: var(--md-text); }
.res-stepper li.is-done span { background: var(--md-primary-light); border-color: var(--md-primary-text); }

/* Handy: kompakte Einzelzeile mit gleichmäßig verteilten Nummern (Labels weg) */
@media (max-width: 640px) {
  /* Nur die Höhe kompakter — das seitliche Polster muss die Fluchtlinie halten. */
  .res-stepper { padding: 1.6rem var(--vw-space-4) 0; }
  .res-stepper ol { flex-wrap: nowrap; gap: .5rem; justify-content: space-between; }
  .res-stepper li { flex: 0 0 auto; justify-content: center; gap: 0; padding: .4rem 0; }
  .res-stepper li em,
  .res-stepper li.is-active em { display: none; }
}

/* ---------- Layout ---------- */
/* Nur noch das Formular — die rechte Zusammenfassungsspalte wurde entfernt.
   Zentriert für angenehme Lesebreite auf großen Screens. */
.res-grid {
  display: block;
  max-width: 68rem;
}

/* ---------- Form-Steps ---------- */
.res-form { min-width: 0; }
.res-step {
  display: none;
  border: none; padding: 0; margin: 0;
}
.res-step.is-active { display: block; }
.res-step legend { padding: 0; margin-bottom: 2rem; }

.res-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2.5rem;
}

.res-optional {
  font-size: 1.2rem; color: var(--md-text-muted);
  text-transform: none; letter-spacing: 0; font-weight: 400;
}

.res-hint {
  font-size: 1.3rem; color: var(--md-text-muted);
  margin: .5rem 0 0;
}

/* Inline-Fehlermeldung im aktiven Step */
.res-form-error {
  background: var(--md-primary-light);
  border: 1px solid var(--md-error);
  border-left: 4px solid var(--md-error);
  padding: 1rem 1.4rem; margin: .8rem 0;
  color: var(--md-text); font-size: 1.4rem;
  border-radius: var(--md-radius-sm);
}

/* ---------- Stepper-Number (Personen) ---------- */
.res-stepper-num {
  display: inline-flex; align-items: center;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-input);
  overflow: hidden;
  width: fit-content;
  background: var(--md-input-bg);
}
.res-stepper-num input {
  width: 70px; text-align: center;
  border: none; padding: 12px 0;
  font-family: var(--vw-font-body); font-size: var(--vw-fs-md); font-weight: var(--vw-fw-text);
  background: var(--md-input-bg); color: var(--md-text);
  min-height: 48px;
}
/* Feld hat keinen Rand – ohne eigenen Ring waere der Tastatur-Fokus unsichtbar (WCAG 2.4.7) */
.res-stepper-num input:focus { outline: none; }
.res-stepper-num input:focus-visible { outline: 2px solid var(--md-text); outline-offset: -2px; }
.res-num-btn {
  width: 48px; height: 48px;
  border: none; background: var(--md-secondary);
  font-size: 2rem; line-height: 1; cursor: pointer;
  color: var(--md-text);
  transition: background var(--vw-transition);
}
.res-num-btn:hover { background: var(--md-primary); color: var(--md-on-primary); }

/* ---------- Raumwunsch (3 große, tappbare Optionen) ---------- */
.res-rooms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 560px) {
  .res-rooms { grid-template-columns: 1fr; }
}
.res-room {
  display: block;
  cursor: pointer;
  position: relative;
}
.res-room input {
  position: absolute; opacity: 0; width: 0; height: 0;
  pointer-events: none;
}
.res-room__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  min-height: 48px;
  padding: 2rem 1.4rem;
  border: 1px solid var(--md-outline);
  background: var(--md-surface);
  border-radius: var(--md-radius-card);
  transition: border-color var(--vw-transition), background var(--vw-transition);
}
.res-room:hover .res-room__inner { border-color: var(--md-text); }
.res-room__icon {
  font-size: 2.8rem;
  color: var(--md-text);
}
.res-room__title {
  font-family: var(--vw-font-body);
  font-weight: var(--vw-fw-bold);
  font-size: 1.6rem;
  color: var(--md-text);
}
.res-room__desc {
  font-size: 1.2rem;
  color: var(--md-text-muted);
  line-height: 1.4;
}
/* Ausgewählt: Primary-Rahmen + heller Fill (flat, kein Schatten) */
.res-room input:checked + .res-room__inner {
  border-color: var(--md-primary);
  background: var(--md-primary-light);
}
/* Sichtbarer Tastatur-Fokus auf der Karte, wenn das Radio fokussiert ist */
.res-room input:focus-visible + .res-room__inner {
  outline: 2px solid var(--md-text);
  outline-offset: 2px;
}

/* Optional: schmale Layout-Variante bei sehr kleinen Karten (nebeneinander) */
@media (min-width: 561px) and (max-width: 720px) {
  .res-room__inner { padding: 1.6rem 1rem; }
  .res-room__desc { display: none; }
}

/* ---------- Checkboxen / Hinweis ---------- */
.res-check {
  display: flex; gap: .8rem; align-items: flex-start;
  font-size: 1.4rem; color: var(--md-text);
  margin: 1.2rem 0;
  cursor: pointer;
}
.res-check input { margin-top: 4px; accent-color: var(--md-primary); }
.res-check a { color: var(--md-text); }
.res-check__opt { color: var(--md-text-muted); }

/* ---------- Stornierung & No-Show (kompaktes <details>) ---------- */
.res-noshow {
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  padding: 0;
  font-size: 1.4rem; line-height: 1.6;
  color: var(--md-text);
  margin: 1.5rem 0;
  border-radius: var(--md-radius-card);
  overflow: hidden;
}
.res-noshow > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.2rem 1.5rem;
  font-weight: var(--vw-fw-bold);
  color: var(--md-text);
  display: flex; align-items: center; gap: .6rem;
}
.res-noshow > summary::-webkit-details-marker { display: none; }
.res-noshow > summary::before {
  content: "expand_more";
  font-family: 'Material Symbols Rounded';
  font-size: 2rem; line-height: 1;
  color: var(--md-text-muted);
  transition: transform var(--vw-transition);
}
.res-noshow[open] > summary::before { transform: rotate(180deg); }
.res-noshow[open] > summary { border-bottom: 1px solid var(--md-outline); }
.res-noshow ul {
  margin: 1.2rem 0 0; padding: 0 1.5rem 0 3rem;
  line-height: 1.8;
}
.res-noshow ul li { margin-bottom: .6rem; }
.res-noshow ul li strong { color: var(--md-text); }
.res-noshow__foot {
  margin: 1rem 0 1.4rem; padding: 0 1.5rem;
  font-size: 1.2rem; color: var(--md-text-muted);
}

/* ---------- Erfolgsschritt ---------- */
.res-success {
  text-align: center;
  padding: 3rem 2rem 2rem;
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-card);
}
/* Absaetze haben eine Hoechstbreite (tokens.css) - ohne auto-Raender
   klebt der schmale Kasten links, laengere Texte wirken dann schief. */
.res-success > p { margin-left: auto; margin-right: auto; }
/* Konto-Angebot unter dem Startseiten-Knopf, durch eine Linie abgesetzt */
.res-konto-angebot { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--md-outline); }
.res-konto-angebot > p { margin: 0 auto 1.2rem; }

/* ---------- E-Mail-Vorschau (iframe im Erfolgsschritt) ---------- */
.res-email-preview {
  border: 1px solid var(--md-outline);
  background: var(--md-background);
  margin-top: 1.5rem;
  text-align: left;
  overflow: hidden;
  border-radius: var(--md-radius-card);
}
.res-email-preview__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem 1rem;
  background: var(--md-surface);
  border-bottom: 1px solid var(--md-outline);
}
.res-email-preview__label {
  font-family: var(--vw-font-label);
  font-size: 1.3rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--md-text-muted);
}
.res-email-preview__open {
  font-size: 1.2rem;
  color: var(--md-text);
  text-decoration: none;
}
.res-email-preview__open:hover { text-decoration: underline; }
.res-email-preview__frame {
  width: 100%;
  height: 520px;
  border: none;
  display: block;
}


/* Hero-Inhalt auf dieselbe Kante wie Schrittanzeige und Formular (68rem),
   damit die Seite nur EINE linke Fluchtlinie hat. */
.res-hero__in { max-width: 68rem; }

/* Raumwunsch verschwindet, sobald ein Tisch gewaehlt ist (der Tisch legt den
   Raum fest). .vw-field setzt display:flex und wuerde [hidden] sonst ueberstimmen. */
#res-room-field[hidden] { display: none; }

/* Heute nach 17 Uhr: "Jetzt anrufen" unter dem Hinweis in der Uhrzeit-Karte */
.r-anrufen {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 1rem 1.8rem;
  border-radius: 999px;
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.r-anrufen:hover, .r-anrufen:focus-visible { background: var(--md-primary-text); color: #fff; }