/* 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 { cursor: default; }
/* Karte 546: Blass ist die Zeile, nicht ihr Weg zur Warteliste. Der Weg steht darunter, in der Flucht des Texts. */
.termin-radio--gesperrt > :not(.termin-radio-warteliste) { opacity: 0.55; }
.termin-radio-warteliste { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--farbe-teal); text-decoration: none; }
.termin-radio-warteliste:hover { text-decoration: underline; }
.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; }
/* Fall 227: der Schwerpunkt des Termins über Tag und Uhrzeit. */
.termin-radio-schwerpunkt { display: block; font-size: 14px; font-weight: 700; color: #3B3831; margin: 0 0 2px; }
/* Fall 249: das Material des Termins, wenn der Kurs es je Termin führt. */
.termin-radio-material { display: block; font-size: 12px; color: #6B665E; margin: 0 0 2px; }
.termin-radio-plaetze { font-family: var(--schrift-mono); font-size: 11px; color: var(--farbe-muted); 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; }
/* An der Grenze (z. B. die Stückgrenze der Gutscheinbestellung) antwortet der Knopf nicht --
   leise statt in Tinte, ohne Hover-Fläche. */
.stepper button:disabled { color: var(--farbe-muted); cursor: default; background: none; }
.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; }
/* Karte 426: Der Satz zur Zahlung bricht neben „Weiter“ um, statt den Knopf am Telefon unter den Preis zu
   schieben. Vor zwei Knöpfen reicht die Breite nicht, dort rücken sie wie bisher darunter. Nur im Formular:
   Die Bestätigung steht zentriert und hält ihren Betrag links vom Knopf. */
form .buchung-preis-block { flex: 1 1 200px; min-width: 0; }
.buchung-preis { font-size: 22px; font-weight: 800; margin: 0; }
.buchung-preis-hinweis { font-size: 12px; color: var(--farbe-muted); 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: var(--farbe-muted);
  margin: 24px 0 14px;
}
.buchung-abschnitt-label:first-child { margin-top: 0; }

/* ---- Die Schriftordnung der Website-Formulare (Karte 571, Inhaber 06.11.2026: „zu viele
   Schriftgrößen und Gewichte“) ----
   EINE Stelle für jedes öffentliche Formular im Raster `.buchung-schritt-inhalt`: Buchungsfenster
   (Kurs, Lehrgang, Gutschein), Kontakt, Kursberatung, Teamevent-Anfrage, Vermietung,
   Gestaltungsauftrag, Warteliste, Wandwerk, Verträge, Umfrage, Kurs vorschlagen, Startangaben.
   Drei Größen der Grotesk, zwei Gewichte, ein Grau:
     Feldname, Frage (label, legend)    14 · 600 · Tinte
     Wahl (Text neben Knopf, Häkchen)   14 · 400 · Tinte
     Eingabe                            16 · 400 · Tinte (weiter unten, Fall 202)
     Hilfetext, „(optional)“            13 · 400 · --farbe-muted
     Fehler am Feld                     13 · 400 · Terrakotta (weiter unten)
   Der Abschnittskopf bleibt die Mono-Zeile des Hauses (`.detail-label`, basis.css; im
   Buchungsfenster `.buchung-abschnitt-label`).
   ⚠️ KEINE SEITE SETZT DIESE TEXTSORTEN SELBST (`config.tests.NurDieQuelleGestaltetTests`): Bis
   Karte 571 hatte `.help` auf der Website keine Quelle (ein `span` erbte 13 px grau vom Label, ein
   `p` 16 px Tinte vom body), die Feldgruppe ihr eigenes Grau, und `.buchung-agb` (14 Tinte) verlor
   gegen die Label-Regel (13 grau). Der Hilfetext heißt auf der Website `.buchung-hilfetext`. */
.buchung-hilfetext,
.buchung-optional,
.teamevent-form-optional { font-size: 13px; font-weight: 400; color: var(--farbe-muted); }
.buchung-hilfetext { margin: 0; }

.buchung-schritt-inhalt label { display: block; margin-bottom: 14px; }
.buchung-schritt-inhalt :is(label, legend) { font-size: 14px; font-weight: 600; color: var(--farbe-tinte); }
/* Die Wahl: jedes Label, das selbst einen Knopf oder ein Häkchen trägt (Djangos RadioSelect und
   CheckboxSelectMultiple schreiben das `<input>` ins `<label>`), dazu `.buchung-agb` und jede Wahl in
   einer Feldgruppe. `:is()` verzeiht, was ein Browser nicht kennt: Ohne `:has()` gelten die beiden
   anderen Wähler weiter. Was eine Wahl in sich gestaltet (Terminzeile, Modul-Pille), steht an ihr. */
.buchung-schritt-inhalt :is(.buchung-agb, fieldset label, label:has(> input[type="radio"], > input[type="checkbox"])) {
  font-size: 14px; font-weight: 400; color: var(--farbe-tinte);
}
.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; }

/* Datei-Auswahl („Kurs vorschlagen“, „Startangaben“): unter ihr Label. Das FELD rendert der
   Browser; ihn in die Feld-Optik zu zwingen bringt auf jedem System ein anderes Ergebnis. Nur der
   KNOPF darin spricht seit Karte 565, E8 (N5) wie `.btn-sekundaer`; ein Browser ohne
   `::file-selector-button` zeigt weiter seinen eigenen (in Chrome gesehen, Safari offen). */
/* Unten 8 px: Die Fehlerzeile rückt mit -8 px an ein Feld mit Polster heran; ohne den Abstand läge
   sie auf dem Knopf (im Bild gesehen, Karte 565, E8). */
/* Karte 571 (B7): Ohne `font-family` sprach der Knopf Arial, denn `font: inherit` erbt dann die Schrift
   des Browsers für das Feld. */
.buchung-schritt-inhalt input[type="file"] { display: block; width: 100%; margin: 6px 0 8px; font-family: inherit; font-size: 14px; font-weight: 400; color: var(--farbe-tinte); }
.buchung-schritt-inhalt input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 10px 18px; border: 1px solid var(--farbe-teal); border-radius: 2px;
  background: transparent; color: var(--farbe-tinte); font: inherit; font-weight: 600; cursor: pointer;
}

/* 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 input[type="number"],
.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-ueberdeckung[hidden] { display: none; }

.buchung-agb { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
/* Der Text einer Wahl mit Nachsatz (Werkbank 341): ein Kasten neben dem Knopf, damit der Nachsatz
   bündig unter dem Text steht und nicht unter dem Knopf. ⚠️ NICHT `.buchung-agb` auf Flex zwingen:
   Im Dialog gilt `.buchung-schritt-inhalt label { display: block }` — mit Flex zerfiele das AGB-
   Häkchen in Einzelteile (Text, Link, Text) mit Lücken dazwischen (im Bild gesehen, 14.10.2026). */
.buchung-wahl-text { display: inline-block; vertical-align: top; max-width: calc(100% - 28px); }
/* Der Satz zur Teilzahlung steht als eigene Zeile UNTER ihrer Wahl — er gehört nur zu ihr;
   darunter, außerhalb der Wahl, lasen ihn Kund*innen als Regel für beide. */
.buchung-zahlweise-satz { display: block; margin-top: 2px; }
.buchung-agb input { width: auto; margin: 3px 0 0; }

.buchung-schritt-inhalt ul.errorlist {
  color: var(--farbe-terrakotta);
  font-size: 13px;
  /* Sie steht meist im Label (600): Der Fehler spricht wie der Hilfetext (Karte 571). */
  font-weight: 400;
  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; }