/* Zeichenfabrik -- Buchungsmodal (3 Schritte: Termin, Daten, Bestätigung). Wiederverwendet
   Farb-/Schrift-Variablen aus basis.css -- keine neue Palette. Overlay/Backdrop-Muster analog
   zum bestehenden Such-Overlay (basis.css, .such-overlay/.such-backdrop/.such-panel), hier aber
   als zentriertes Panel statt oben angedockter Vollbreite-Leiste. */

.buchung-overlay[hidden] { display: none; }
.buchung-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.5);
  z-index: 900;
}
.buchung-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 820px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--farbe-creme);
  z-index: 901;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.45);
}
@media (max-width: 600px) {
  /* 100dvh statt 100vh (Fall 202): Am iPhone wechselt die sichtbare Höhe mit Adressleiste und
     Tastatur -- mit 100vh schien unten die Kursseite durch das Modal. */
  .buchung-panel { top: 0; left: 0; transform: none; width: 100%; max-height: 100vh; height: 100%; }
  @supports (height: 100dvh) { .buchung-panel { max-height: 100dvh; height: 100dvh; } }
}
.buchung-panel { overscroll-behavior: contain; }
/* Solange ein Modal offen ist, scrollt die Seite dahinter nicht mit (website/js/modalrahmen.js). */
html.zf-modal-offen, html.zf-modal-offen body { overflow: hidden; }

.buchung-kopf { position: relative; padding: 28px 60px 20px 28px; border-bottom: 1px solid var(--farbe-rand); }
.buchung-kopf h2 { margin: 6px 0 0; font-size: 24px; }
.buchung-unterzeile { margin: 6px 0 0; font-size: 14px; color: #6B665E; min-height: 1.2em; }
.buchung-schliessen {
  position: absolute;
  top: 22px;
  right: 22px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #6B665E;
  transition: color 0.15s ease;
}
.buchung-schliessen:hover { color: var(--farbe-tinte); }

.buchung-schritte {
  padding: 14px 28px;
  border-bottom: 1px solid var(--farbe-rand);
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #B7AF9F;
}
.buchung-schritte .aktiv { color: var(--farbe-teal); font-weight: 700; }
.buchung-trenner { color: #D8D3C9; margin: 0 4px; }

.buchung-schritt-inhalt { padding: 24px 28px; }
.buchung-schritt-inhalt[hidden] { display: none; }

/* ---- Schritt 1: Termin + Kursplätze ---- */
.termin-radio-liste { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.termin-radio {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #D8D3C9;
  background: #fff;
  padding: 16px 18px;
  cursor: pointer;
  position: relative;
}
.termin-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.termin-radio-punkt {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 2px solid #D8D3C9;
  border-radius: 50%;
  position: relative;
}
.termin-radio:has(input:checked) { border-color: var(--farbe-teal); background: rgba(177, 206, 210, 0.35); }
.termin-radio:has(input:checked) .termin-radio-punkt { border-color: var(--farbe-teal); }
.termin-radio:has(input:checked) .termin-radio-punkt::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--farbe-teal);
}
.termin-radio--gesperrt { opacity: 0.55; cursor: default; }
.termin-radio-inhalt { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.termin-radio-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 16px; }
.termin-radio-meta { font-size: 13px; color: #6B665E; }
.termin-radio-plaetze { font-family: var(--schrift-mono); font-size: 11px; color: #8A8377; white-space: nowrap; }
.termin-radio-ausgebucht { color: var(--farbe-terrakotta); font-weight: 700; }

.buchung-stepper-zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--farbe-rand);
}
.buchung-stepper-label { font-weight: 700; margin: 0; }
.stepper { display: flex; align-items: stretch; border: 1px solid #D8D3C9; background: #fff; height: 46px; }
.stepper button { border: none; background: none; width: 46px; font-size: 20px; cursor: pointer; color: var(--farbe-tinte); transition: background-color 0.15s ease; }
.stepper button:hover { background-color: #F1EEE8; }
.stepper input {
  width: 56px;
  border: none;
  border-left: 1px solid #D8D3C9;
  border-right: 1px solid #D8D3C9;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.buchung-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 28px;
  border-top: 1px solid var(--farbe-rand);
  margin: 24px -28px -24px;
}
.buchung-preis-block { display: flex; flex-direction: column; gap: 2px; }
.buchung-preis { font-size: 22px; font-weight: 800; margin: 0; }
.buchung-preis-hinweis { font-size: 12px; color: #8A8377; margin: 0; }
.buchung-footer-buttons { display: flex; gap: 10px; }

.buchung-fehler {
  background: #FBEAE3;
  border: 1px solid var(--farbe-terrakotta);
  color: #7A3A1A;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
}
.buchung-fehler p { margin: 0; }
.buchung-fehler p + p { margin-top: 6px; }

/* ---- Schritt 2: Daten ---- */
.buchung-abschnitt-label {
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
  color: #8A8377;
  margin: 24px 0 14px;
}
.buchung-abschnitt-label:first-child { margin-top: 0; }

.buchung-hilfetext { font-size: 12px; color: #8A8377; margin: 0; font-weight: 400; }

.buchung-schritt-inhalt label { display: block; font-size: 13px; color: #6B665E; margin-bottom: 14px; }
.buchung-feldpaar { display: flex; gap: 14px; flex-wrap: wrap; }
/* Nebeneinander auch am Telefon (Fall 203): Bei 200 px Mindestbreite brach jedes Paar auf 375 px
   untereinander -- Vorname, Nachname, PLZ, Ort je eine volle Zeile. */
.buchung-feldpaar label { flex: 1 1 130px; }
.buchung-feldpaar .buchung-feld-schmal { flex: 0 1 110px; }

/* Selten Gebrauchtes hinter einem Aufklapper (Fall 203): Titel, Gutschein-Code. Aufgeklappt,
   sobald etwas eingetragen ist oder eine Meldung dazu steht (Vorlage). */
.buchung-aufklapper { margin: 0 0 14px; }
.buchung-aufklapper > summary {
  cursor: pointer;
  color: var(--farbe-teal);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 0;
  list-style: none;
}
.buchung-aufklapper > summary::-webkit-details-marker { display: none; }
.buchung-aufklapper > summary::before { content: "+ "; }
.buchung-aufklapper[open] > summary::before { content: "− "; }
.buchung-aufklapper[open] > summary { margin-bottom: 10px; }
.buchung-optional { font-weight: 400; color: #8A8377; }

/* Datei-Auswahl (Kursvorschlags-Formular): nur unter sein Label setzen -- den Knopf selbst
   rendert der Browser, ihn in die Feld-Optik zu zwingen bringt auf jedem System ein anderes
   Ergebnis. */
.buchung-schritt-inhalt input[type="file"] { display: block; margin-top: 6px; }

/* input[type="url"] kam mit dem Kursvorschlags-Formular dazu (erstes URL-Feld der Website).
   Ohne den Selektor bleibt das Feld inline und rutscht neben sein Label.

   ⚠️ UND GENAU DAS IST NOCH EINMAL PASSIERT (Befund Inhaber 21.08.2026): `input[type="date"]`
   kam mit dem Geburtsdatum im Lehrgangs-Buchungsmodal dazu -- das erste Datumsfeld der
   Website -- und fehlte hier. Das Feld klebte in Browser-Breite neben seinem Label und sah
   „artfremd" aus. Es war nie falsch gestaltet, es war schlicht nicht mitgemeint.

   Diese Liste ist die Stelle, an der ein NEUER Feldtyp nachgetragen werden muss. Wer das
   nächste Mal einen einführt (`number`, `time` …), trägt ihn hier ein -- ein Wächter in
   website/tests.py besteht darauf, dass jeder auf der Website benutzte Typ hier steht. */
.buchung-schritt-inhalt input[type="text"],
.buchung-schritt-inhalt input[type="email"],
.buchung-schritt-inhalt input[type="tel"],
.buchung-schritt-inhalt input[type="url"],
.buchung-schritt-inhalt input[type="date"],
.buchung-schritt-inhalt select,
.buchung-schritt-inhalt textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid #D8D3C9;
  background: #fff;
  font-family: inherit;
  /* 16 px, nicht weniger (Fall 202): Unter 16 px zoomt Safari am iPhone beim Antippen eines
     Felds ins Bild, und das Modal springt. Gilt für jedes öffentliche Formular -- sie alle
     bekommen ihre Felder von hier. */
  font-size: 16px;
  color: var(--farbe-tinte);
}
.buchung-schritt-inhalt select { cursor: pointer; }
.buchung-schritt-inhalt textarea { resize: vertical; }
/* Das Kalendersymbol des Browsers bleibt -- es ist der Zugang zum nativen Datumswähler, und
   den wollen wir behalten (kein JavaScript, kein eigener Kalender). Es tritt nur farblich
   zurück, damit es nicht lauter ist als der Text daneben. */
.buchung-schritt-inhalt input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
}
.buchung-schritt-inhalt input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.buchung-jemand-anderen {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #F4F1EA;
  border: 1px solid var(--farbe-rand);
  padding: 16px 18px;
  margin: 20px 0;
}
.buchung-jemand-anderen[hidden] { display: none; }
.buchung-jemand-anderen input { margin-top: 3px; }

/* Firmenfelder: hängen optisch am Häkchen darüber (kein eigener Kasten, sonst wirkte der
   Abschnitt schwerer als die Adresse, zu der er gehört). */
.buchung-firmenfelder {
  border-left: 2px solid var(--farbe-rand);
  padding-left: 16px;
  margin: -8px 0 20px;
}
.buchung-firmenfelder[hidden] { display: none; }

/* Prüfblock: bewusst ruhig gehalten und ohne Rahmen-Konkurrenz zum AGB-Kasten darunter --
   er soll gelesen, nicht als weitere Pflichtangabe wahrgenommen werden. */
.buchung-pruefblock {
  background: #F4F1EA;
  border-left: 3px solid var(--farbe-akzent, #BC6B41);
  padding: 12px 16px;
  margin: 8px 0 16px;
}
.buchung-pruefblock[hidden] { display: none; }
/* Kompakt (Inhaber 29.09.2026): Adresse in einer Zeile, Versand in der nächsten, „Angaben
   ändern" oben rechts -- der Weg zurück steht dort, wo man den Fehler sieht. */
.buchung-pruefblock-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.buchung-pruefblock-kopf .buchung-abschnitt-label { margin: 0; }
.buchung-pruefblock-aendern {
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--farbe-teal);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.buchung-pruefblock-adresse {
  margin: 6px 0 4px;
  line-height: 1.45;
}
.buchung-pruefblock-versand {
  margin: 0;
  font-size: 0.92em;
  color: #6F675A;
}
.buchung-pruefblock-versand strong { color: inherit; word-break: break-word; }
.buchung-pruefblock-versand[hidden] { display: none; }

/* Tippfehler-Vorschlag: sieht wie Fließtext aus, nicht wie ein Knopf -- es ist ein Angebot,
   keine Aufforderung. */
.buchung-mailvorschlag-knopf {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--farbe-akzent, #BC6B41);
  text-decoration: underline;
  cursor: pointer;
}

.teilnehmer-block { border-top: 1px solid #EFECE5; padding-top: 16px; margin-top: 16px; }
.teilnehmer-block[hidden] { display: none; }

/* Zahlweise-Wahl: eigener Abschnitt wie „Gutschein" darüber. Die Überschrift ist das erste Kind
   ihres Blocks, daher würde .buchung-abschnitt-label:first-child ihren Abstand nach oben tilgen --
   den Abschnitts-Rhythmus (24px) trägt deshalb der Block selbst. */
#buchung-zahlweise-block { margin-top: 24px; }

.gutschein-zeile { display: flex; gap: 10px; }
.gutschein-zeile input {
  flex: 1;
  text-transform: uppercase;
  font-family: var(--schrift-mono);
  letter-spacing: 0.05em;
}
.gutschein-gueltig { color: var(--farbe-teal); }
.gutschein-ungueltig { color: var(--farbe-terrakotta); }

/* Die eingelösten Gutscheine (07.08.2026): Ein Feld sammelt, hier stehen die gesammelten.
   Bewusst eine schlichte Liste und KEINE Formularzeilen -- es gibt nichts einzustellen, nur
   etwas zurückzunehmen. `[hidden]` braucht die Gegenregel, weil `display: flex` sonst gewinnt
   (dieselbe Falle wie beim .teilnehmer-block weiter oben). */
.gutschein-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.gutschein-liste[hidden] { display: none; }
.gutschein-eintrag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--farbe-rand);
  font-size: 14px;
  font-family: var(--schrift-mono);
  letter-spacing: 0.03em;
}
.gutschein-eintrag:first-child { border-top: 0; }
.gutschein-entfernen {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--farbe-muted);
  text-decoration: underline;
}
.gutschein-entfernen:hover { color: var(--farbe-terrakotta); }
#gutschein-ueberdeckung[hidden] { display: none; }

.buchung-agb { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--farbe-tinte); margin-top: 8px; }
.buchung-agb input { width: auto; margin: 3px 0 0; }

.buchung-schritt-inhalt ul.errorlist {
  color: var(--farbe-terrakotta);
  font-size: 13px;
  margin: -8px 0 14px;
  padding-left: 18px;
  list-style: none;
}

/* ---- Die Bestätigung nach dem Absenden (an ihrer Klasse, nicht an der Schrittnummer: Fall 203
   machte aus drei Schritten vier, und die Regel zentrierte plötzlich „Abschließen") ---- */
.buchung-bestaetigung { text-align: center; }
.bestaetigung-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--farbe-teal-hell);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--farbe-teal);
  margin: 8px auto 18px;
}
.buchung-bestaetigung h3 { margin: 0 0 12px; }
.bestaetigung-text { max-width: 40em; margin: 0 auto 24px; color: #4A463F; }
/* Der Infoabend-Hinweis (21.08.2026): leiser als der Danke-Satz, aber nicht versteckt --
   er beantwortet die Frage, warum der Abend NICHT in der Modul-Liste darunter steht. */
.bestaetigung-hinweis { max-width: 40em; margin: -8px auto 24px; padding: 12px 16px;
                        background: #FBF6EC; border: 1px solid #E1D8C6;
                        color: #6B665E; font-size: 14px; line-height: 1.55; text-align: left; }
.bestaetigung-box {
  text-align: left;
  border: 1px solid var(--farbe-rand);
  background: #fff;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.bestaetigung-zeile {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid #F1EEE8;
}
.bestaetigung-zeile:last-child { border-bottom: none; }
.bestaetigung-kalender {
  margin: 12px 0 0;
  font-size: 13px;
  color: #6B5C46;
}
.bestaetigung-kalender a { font-weight: 600; }