/* 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) {
  .buchung-panel { top: 0; left: 0; transform: none; width: 100%; max-height: 100vh; height: 100%; }
}

.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; }
.buchung-feldpaar label { flex: 1 1 200px; }
.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;
  font-size: 15px;
  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: 16px 18px;
  margin: 24px 0 4px;
}
.buchung-pruefblock[hidden] { display: none; }
.buchung-pruefblock-adresse {
  white-space: pre-line;  /* die Zeilen kommen als \n aus pruefblock.js */
  margin: 6px 0 12px;
  line-height: 1.5;
}
.buchung-pruefblock-versand {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid #E4E0D8;
  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;
}

/* ---- Schritt 3: Bestätigung ---- */
.buchung-schritt-inhalt[data-schritt="3"] { 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-schritt-inhalt[data-schritt="3"] 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; }