/* ═══════════════════════════════════════════════════════════
   LASHES BY DIM — BUCHUNGSSTRECKE
   Mobile-first, ruhig, gehoben. Gleiche Markenpalette wie die
   Hauptseite (siehe src/assets/style.css). Kein Framework, kein
   Build-Schritt, keine externen Requests (Schriften, Bilder, CDNs).
═══════════════════════════════════════════════════════════ */

/* ─── SCHRIFTEN: SELF-HOSTED ──────────────────────────────── */
/* Cormorant Garamond und DM Sans sind Variable Fonts (Achse wght:
   Cormorant Garamond 300–700, DM Sans 100–1000) — deshalb genügt eine
   @font-face-Regel je Familie und Subset mit Gewichtsbereich, keine
   separate Regel je Schnitt. Dateien liegen unter static/fonts/ (relativ
   von hier aus static/css/: ../fonts/…), Lizenz SIL Open Font License
   (OFL-CormorantGaramond.txt / OFL-DMSans.txt im selben Verzeichnis). */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── CUSTOM PROPERTIES ──────────────────────────────────── */
:root {
  /* Farbpalette – identisch zur Hauptseite (src/assets/style.css :root).
     Dieser :root-Block wird 1:1 in static/css/verwaltung.css dupliziert
     gepflegt (siehe Kommentar dort) -- Palette UND Schriftvariablen
     müssen in beiden Dateien identisch bleiben, core/tests_styles.py
     prüft das automatisiert. */
  --clr-plum:        #2B1A35;
  --clr-plum-mid:     #5C3468;
  --clr-plum-light:  #9B6DB5;
  --clr-lavender:    #BFACC8;
  --clr-rose:        #C4769C;
  --clr-rose-light:  #E8B4CC;
  --clr-cream:       #FAF8F5;
  --clr-cream-dark:  #F2EBF0;
  --clr-text:        #2B1A35;
  --clr-text-muted:  #6B5070;
  --clr-white:       #FFFFFF;

  /* Fokusring, als Zwei-Token-System (Issue 011): --clr-rose unterschreitet
     als Fokusfarbe auf --clr-cream-dark (2.79:1) und --clr-plum-mid
     (2.99:1) den geforderten Nicht-Text-Kontrast von 3:1 (WCAG 1.4.11).
     --clr-focus (= --clr-plum-mid) deckt alle hellen Flächen ab
     (mindestens 8.35:1), --clr-focus-invers (= --clr-rose-light) die
     dunklen Flächen (mindestens 5.51:1) -- core/tests_styles.py rechnet
     beide Fälle nach. --clr-rose bleibt als Palettenfarbe für Akzente/
     Hover erhalten, wird nur als Fokusfarbe abgelöst. */
  --clr-focus:        #5C3468;
  --clr-focus-invers: #E8B4CC;

  /* Zustandsfarben (rechnerisch gegen die Markenpalette geprüft, siehe
     Bericht/PR-Beschreibung für die Kontrastwerte). Bewusst dunkler als
     --clr-rose, weil Rose allein (3.1:1 auf Creme) für Fließtext nicht
     WCAG-AA-tauglich ist. */
  --clr-error:       #7A1030;
  --clr-error-bg:    #FBE4EC;
  --clr-error-border: var(--clr-rose);
  --clr-info-bg:     var(--clr-cream-dark);
  --clr-info-text:   var(--clr-plum-mid);

  /* Rahmenfarben. 1.4.11 verlangt für Bedienelemente 3:1 gegen den
     Hintergrund; --clr-lavender (2.11:1 auf Weiß) und --clr-cream-dark
     (1.17:1) erfüllten das nicht. --clr-border-strong greift deshalb auf
     die vorhandene Markenfarbe --clr-plum-light zurück -- nachgerechnet
     4.00:1 auf --clr-white, 3.77:1 auf --clr-cream, 3.41:1 auf
     --clr-cream-dark. Die Palette selbst bleibt damit unverändert. */
  --clr-border-strong: var(--clr-plum-light);
  /* Rein dekorative Trennlinien und Kartenrahmen, an denen kein
     Bedienelement hängt -- dort gilt 1.4.11 nicht. 1.56:1 auf Weiß,
     sichtbar, aber zurückhaltend. */
  --clr-border-soft: #D9CADF;

  /*
   * Typografie: self-hosted wie die Hauptseite (Cormorant Garamond /
   * DM Sans, @font-face-Regeln oben in dieser Datei). font-display: swap
   * vermeidet einen auffälligen Textsprung während des Ladens; es
   * entsteht kein externer Request -- die CSP-Richtlinie font-src 'self'
   * deckt die lokalen Dateien bereits ab, die Datenschutzzusage aus
   * PRD 11 bleibt eingehalten. Lizenz: SIL Open Font License (Lizenz-
   * texte liegen im selben Verzeichnis wie die Schriftdateien,
   * static/fonts/). Die bisherigen Systemschriften bleiben als Fallback
   * in der Familienliste stehen.
   */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Abstands-Skala (Auszug aus der Hauptseite, um dieselbe Rhythmik zu
     erhalten) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* Radien & Schatten (aus der Hauptseite übernommen) */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 8px rgba(43, 26, 53, 0.08);
  --shadow-md: 0 8px 30px rgba(43, 26, 53, 0.12);

  /* Sonstiges */
  --max-width-content: 40rem;
  --max-width-prose:   65ch;
  --touch-target:      44px;
  --transition-fast:   0.15s ease;
  --transition-med:    0.25s ease;
}

/* Bewegung abschalten, wenn die Nutzerin das wünscht (vor allen anderen
   Regeln, damit nichts später versehentlich eine Transition nachrüstet). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── RESET & BASE ───────────────────────────────────────── */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--clr-text);
  background-color: var(--clr-cream);
}

img {
  max-width: 100%;
  height: auto;
}

/* ─── TYPOGRAFIE ──────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-serif);
  color: var(--clr-plum);
  line-height: 1.25;
  margin: 0 0 var(--space-sm);
}

h1 {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
}

h2 {
  font-size: clamp(1.35rem, 4vw, 1.65rem);
}

h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 var(--space-sm);
  max-width: var(--max-width-prose);
}

a {
  color: var(--clr-plum-mid);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--clr-plum);
}

/* ─── BARRIEREFREIHEIT: FOKUS ────────────────────────────── */
/* Nie Outlines entfernen, ohne eine gleichwertige Ersatzdarstellung zu
   liefern (Auftrag: klare :focus-visible-Stile). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--clr-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--clr-plum);
  color: var(--clr-white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus-visible {
  left: 0;
  /* Auf --clr-plum sitzt --clr-focus (dunkel auf dunkel) unter 3:1 --
     hier greift der invertierte Fokusring (5.51:1, s. Issue 011). */
  outline-color: var(--clr-focus-invers);
}

/* Nur für Screenreader sichtbarer Zusatztext (z. B. Ergänzung zu einem
   gesperrten Tag in der Tagesliste) — nie display:none, sonst verschwindet
   der Text auch für Screenreader. */
.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── LAYOUT ──────────────────────────────────────────────── */
.kopf {
  background: var(--clr-plum);
  padding: var(--space-sm) var(--space-md);
}

.kopf__marke {
  margin: 0;
  max-width: none;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  color: var(--clr-white);
  text-align: center;
}

.hauptinhalt {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: var(--space-md) var(--space-sm) var(--space-xl);
}

.fuss {
  max-width: var(--max-width-content);
  margin: var(--space-lg) auto 0;
  padding: var(--space-md) var(--space-sm);
  border-top: 1px solid var(--clr-border-soft);
  color: var(--clr-text-muted);
  font-size: 0.9rem;
}

.fuss__rechtstexte ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xs);
}

.fuss__kontakt {
  margin: 0;
}

/* ─── MELDUNGEN (Django messages) ────────────────────────── */
.meldungen {
  max-width: var(--max-width-content);
  margin: var(--space-sm) auto 0;
  padding: 0 var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.meldungen__eintrag {
  margin: 0;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border-left: 4px solid transparent;
  font-size: 0.95rem;
}

.meldungen__eintrag--error {
  background: var(--clr-error-bg);
  border-left-color: var(--clr-error);
  color: var(--clr-error);
}

.meldungen__eintrag--info,
.meldungen__eintrag--success,
.meldungen__eintrag--warning {
  background: var(--clr-info-bg);
  border-left-color: var(--clr-plum-mid);
  color: var(--clr-info-text);
}

/* ─── SCHRITT-INDIKATOR ───────────────────────────────────── */
.buchung__schritte {
  margin-bottom: var(--space-md);
}

.buchung__schritt-text {
  margin: 0 0 var(--space-xs);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.buchung__schritte-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.buchung__schritt {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--clr-cream-dark);
  color: var(--clr-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Verlinkte Pillen (bereits abgeschlossene Schritte): die gesamte
   Pillenfläche soll klickbar sein, nicht nur die Textzeile -- der <a>
   übernimmt deshalb dieselbe Ausrichtung wie sein <li> (Issue 011,
   Befund 3). */
.buchung__schritt a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  /* Negative Margin im Umfang des Innenabstands der Pille ("gestreckter
     Link"-Muster): die Trefferfläche des <a> deckt dadurch die gesamte
     Pillenfläche ab, nicht nur den Textkasten (Issue 011, Befund 3). Der
     kompensierende Innenabstand hält die sichtbare Textposition
     unverändert. */
  margin: -0.35rem -0.75rem;
  padding: 0.35rem 0.75rem;
}

.buchung__schritt--aktuell {
  background: var(--clr-plum-mid);
  color: var(--clr-white);
}

/* ─── LEISTUNGSLISTE (Schritt 1) ──────────────────────────── */
.buchung__hinweis {
  background: var(--clr-info-bg);
  color: var(--clr-info-text);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}

.leistungsliste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-md);
}

.leistungsliste__eintrag {
  display: flex;
  flex-direction: column;
  background: var(--clr-white);
  border: 1px solid var(--clr-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}

.leistungsliste__name {
  margin-bottom: var(--space-xs);
  overflow-wrap: anywhere;
}

.leistungsliste__beschreibung {
  color: var(--clr-text-muted);
}

.leistungsliste__details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem var(--space-sm);
  margin: var(--space-sm) 0;
}

.leistungsliste__details dt {
  font-weight: 600;
  color: var(--clr-text-muted);
}

.leistungsliste__details dd {
  margin: 0;
}

.leistungsliste__anzahlung {
  font-size: 0.9rem;
  color: var(--clr-plum-mid);
  background: var(--clr-cream-dark);
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
}

.leistungsliste__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--touch-target);
  /* margin-top: auto schiebt den Button an den Kartenboden, damit die
     "Termin wählen"-Buttons aller Karten in einer Zeile stehen -- auch
     wenn eine Karte Beschreibung und Anzahlungshinweis hat und die
     Nachbarkarte nicht (Issue 009, Befund 3). Der Mindestabstand zum
     Text darüber kommt weiterhin von dessen eigenem margin-bottom
     (dl.leistungsliste__details / p.leistungsliste__anzahlung). */
  margin-top: auto;
  padding: 0.65rem var(--space-md);
  background: var(--clr-plum-mid);
  color: var(--clr-white);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.leistungsliste__link:hover {
  background: var(--clr-plum);
  color: var(--clr-white);
}

/* ─── LEISTUNGS-/TERMINZUSAMMENFASSUNG ───────────────────── */
.leistungszusammenfassung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem var(--space-sm);
  background: var(--clr-white);
  border: 1px solid var(--clr-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}

.leistungszusammenfassung dt {
  font-weight: 600;
  color: var(--clr-text-muted);
}

.leistungszusammenfassung dd {
  margin: 0;
}

/* ─── SLOT-BEREICH (Schritt 2: Terminauswahl) ────────────── */
/* Ladefeedback für htmx-Wechsel (Issue 008, Teil F): eine eigene Regel
   statt htmx' eingebautem Indicator-Stylesheet, weil die CSP kein
   unsafe-inline zulässt. Statischer Zustandswechsel, kein Puls. */
.slot-bereich {
  transition: opacity var(--transition-fast);
}

.slot-bereich.htmx-request {
  opacity: 0.55;
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  .slot-bereich {
    transition: none;
  }
}

.slot-bereich__ueberschrift {
  margin-bottom: var(--space-sm);
}

.slot-bereich__ueberschrift:focus-visible {
  outline: 3px solid var(--clr-focus);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.slot-bereich__wochen-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.slot-bereich__wochen-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--clr-plum-mid);
  text-decoration: none;
  font-weight: 600;
}

.slot-bereich__wochen-link:hover {
  background: var(--clr-cream-dark);
}

.slot-bereich__woche-label {
  font-weight: 600;
  color: var(--clr-text);
  flex: 1 1 auto;
  text-align: center;
  /* Mobile-first-Standard (Auftrag: nur min-width-Breakpoints): das Label
     bildet eine eigene, mittige erste Zeile, "← Vorherige Woche" und
     "Nächste Woche →" bleiben darunter nebeneinander (justify-content:
     space-between auf .slot-bereich__wochen-nav wirkt weiter). Ab 700px
     wird das zurückgenommen, siehe Breakpoint unten. */
  order: -1;
  flex-basis: 100%;
}

.tagesliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.2rem, 1fr));
  align-items: stretch;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
}

.tagesliste__eintrag {
  display: contents;
}

.tagesliste__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Reicht für einen zweizeiligen Umbruch der Datumsbeschriftung, ohne
     dass die Pille höher wird als ihre Nachbarn (align-items: stretch auf
     .tagesliste gleicht die Zeile ohnehin an; line-height 1.2 hält den
     Zwei-Zeilen-Fall kompakt). */
  min-height: 3.5rem;
  padding: 0.5rem 0.35rem;
  border-radius: var(--radius-sm);
  background: var(--clr-white);
  color: var(--clr-text);
  text-align: center;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  text-decoration: none;
  appearance: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

/* Buchbar (<a>): tritt hervor -- weiße Fläche, deutlich sichtbarer Rahmen
   (3:1 gegen --clr-white/--clr-cream, siehe --clr-border-strong). */
a.tagesliste__button {
  border: 1px solid var(--clr-border-strong);
}

a.tagesliste__button:hover {
  border-color: var(--clr-plum-mid);
  background: var(--clr-cream-dark);
}

.tagesliste__button--aktiv {
  background: var(--clr-plum-mid);
  border-color: var(--clr-plum-mid);
  color: var(--clr-white);
}

a.tagesliste__button--aktiv:hover {
  background: var(--clr-plum);
  border-color: var(--clr-plum);
  color: var(--clr-white);
}

/* Gesperrt (<button disabled>): tritt zurück -- Fläche in --clr-cream,
   gedämpfter Text. Nicht-farbliches Unterscheidungsmerkmal: gestrichelter
   statt durchgezogener Rahmen. Ein zusätzliches Textzeichen hätte die
   Pillenhöhe gesprengt bzw. wäre bei zwei Zeilen unruhig gewirkt;
   Durchstreichen wird von Screenreadern uneinheitlich behandelt und
   erschwert das Lesen des Datums. Gestrichelt vs. durchgezogen ist ohne
   Farbwahrnehmung unterscheidbar (WCAG 1.4.1 / Befund 8 des Issues). */
.tagesliste__button--deaktiviert {
  background: var(--clr-cream);
  border: 1px dashed var(--clr-border-soft);
  color: var(--clr-text-muted);
  cursor: not-allowed;
}

.slot-liste__ueberschrift {
  margin-bottom: var(--space-sm);
}

.slot-liste__zeiten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.slot-liste__zeiten li {
  display: contents;
}

.slot-liste__button {
  width: 100%;
  min-height: var(--touch-target);
  padding: 0.5rem;
  border: 1px solid var(--clr-border-strong);
  border-radius: var(--radius-sm);
  background: var(--clr-white);
  color: var(--clr-plum-mid);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.slot-liste__button:hover {
  background: var(--clr-plum-mid);
  border-color: var(--clr-plum-mid);
  color: var(--clr-white);
}

.slot-liste__hinweis {
  color: var(--clr-text-muted);
}

/* Kein einziger freier Slot im gesamten Buchungshorizont (M7, Befund 1):
   schlichter Hinweisblock im selben Stil wie .buchung__hinweisblock, tritt
   an die Stelle von Wochennavigation, Tagesliste und Slot-Liste. */
.slot-bereich__ausgebucht {
  background: var(--clr-info-bg);
  color: var(--clr-info-text);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.slot-bereich__ausgebucht p:last-child {
  margin-bottom: 0;
}

/* ─── FORMULARE (Schritt 3 & 4) ───────────────────────────── */
.buchung__leistungshinweis {
  color: var(--clr-text-muted);
}

/* Erklärender Hinweis innerhalb einer Feldgruppe, z. B. zur Anschriftpflicht
   beim mobilen Service (Issue 008, Teil H). Gedämpfte Textfarbe, knapper
   Abstand nach unten -- keine eigene Fehler-/Warnfarbe, reiner Hinweis. */
.formular__hinweis {
  color: var(--clr-text-muted);
  font-size: 0.9rem;
  margin: 0 0 0.25rem;
}

.buchung__formular {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.formular__gruppe {
  border: 1px solid var(--clr-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.formular__gruppe legend {
  padding: 0 0.4rem;
  font-weight: 600;
  color: var(--clr-plum);
  font-family: var(--font-serif);
  font-size: 1.05rem;
}

.formular__feld {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.formular__feld label {
  font-weight: 600;
  color: var(--clr-text);
}

.formular__feld input[type="text"],
.formular__feld input[type="email"],
.formular__feld input[type="tel"],
.formular__feld textarea {
  width: 100%;
  min-height: var(--touch-target);
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 1rem; /* verhindert Zoom bei iOS-Fokus */
  color: var(--clr-text);
  background: var(--clr-white);
  border: 1px solid var(--clr-border-strong);
  border-radius: var(--radius-sm);
}

.formular__feld textarea {
  min-height: 6rem;
  resize: vertical;
}

.formular__feld input:focus-visible,
.formular__feld textarea:focus-visible {
  outline: 3px solid var(--clr-focus);
  outline-offset: 1px;
}

/* Fehlerhafte Felder: Rahmenfarbe UND Textfarbe wechseln (nie Farbe
   allein als Fehlerkennzeichen, siehe WCAG 1.4.1). */
.formular__feld--fehler input,
.formular__feld--fehler textarea {
  border-color: var(--clr-error);
}

.formular__feld--fehler label {
  color: var(--clr-error);
}

.formular__feld .errorlist {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0.6rem;
  background: var(--clr-error-bg);
  border-left: 3px solid var(--clr-error);
  border-radius: var(--radius-sm);
}

.formular__feld .errorlist li {
  color: var(--clr-error);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Fehlerübersicht oberhalb des Formulars (Issue 008, Teil E): fasst alle
   Feld- und Formularfehler an einer Stelle zusammen, mit Sprungmarken zu
   den betroffenen Feldern. Erhält per Skript den Fokus beim Laden
   (booking.js) -- deshalb eigene, klar sichtbare :focus-Darstellung. */
.formular__fehleruebersicht {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--clr-error-bg);
  border-left: 4px solid var(--clr-error);
  border-radius: var(--radius-sm);
  color: var(--clr-error);
}

.formular__fehleruebersicht-hinweis {
  margin: 0 0 0.4rem;
  font-weight: 600;
}

.formular__fehleruebersicht ul {
  margin: 0;
  padding-left: 1.2rem;
}

.formular__fehleruebersicht a {
  color: var(--clr-error);
  font-weight: 600;
}

.formular__fehleruebersicht:focus,
.formular__fehleruebersicht:focus-visible {
  outline: 3px solid var(--clr-focus);
  outline-offset: 2px;
}

/* Honeypot: für Menschen unsichtbar, für Bots im DOM erreichbar (kein
   display:none, siehe Auftrag). tabindex="-1" wird bereits vom Formular
   gesetzt (bookings_app/forms.py) und nimmt das Feld aus der
   Tab-Reihenfolge. */
.formular__feld--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__feld--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
}

.formular__feld--checkbox input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  /* Bewusst KEIN min-width/min-height: var(--touch-target) mehr (M7,
     Befund 2) — das streckte das Kästchen selbst auf 44 x 44 px und ließ es
     im Browser wie ein leeres Textfeld wirken. Die 44-px-Trefferfläche
     entsteht stattdessen über das mit for= verknüpfte <label> unten. */
  margin: 0.65rem 0 0 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--clr-plum-mid);
}

.formular__feld--checkbox label {
  flex: 1 1 auto;
  /* padding-block statt nur padding-top: das Label trägt jetzt die
     44-px-Touch-Vorgabe (min-height), nicht mehr das Kästchen. */
  padding-block: 0.65rem;
  min-height: var(--touch-target);
  font-weight: 400;
}

.formular__feld--checkbox .errorlist {
  flex-basis: 100%;
}

/* ─── ZUSAMMENFASSUNG (Schritt 4) ─────────────────────────── */
.zusammenfassung {
  background: var(--clr-white);
  border: 1px solid var(--clr-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* .zusammenfassung wird sowohl als <section>-Wrapper (Schritt 4) als auch
   direkt auf einem <dl> (Bestätigungsseite) verwendet — beide Fälle
   abdecken. */
.zusammenfassung dl,
dl.zusammenfassung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem var(--space-sm);
  margin: 0 0 var(--space-sm);
}

dl.zusammenfassung {
  margin-bottom: var(--space-md);
}

.zusammenfassung dt,
dl.zusammenfassung dt {
  font-weight: 600;
  color: var(--clr-text-muted);
}

.zusammenfassung dd,
dl.zusammenfassung dd {
  margin: 0;
}

.zusammenfassung > a {
  font-weight: 600;
}

.buchung__hinweisblock {
  background: var(--clr-info-bg);
  color: var(--clr-info-text);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.buchung__hinweisblock p:last-child {
  margin-bottom: 0;
}

/* ─── BUTTONS ─────────────────────────────────────────────── */
.buchung__weiter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-target);
  padding: 0.75rem var(--space-md);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--clr-plum-mid);
  color: var(--clr-white);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.buchung__weiter:focus-visible {
  /* Der Button ist mit --clr-plum-mid gefuellt; der dunkle Standardring
     (--clr-focus) liegt darauf bei 1:1. Hier greift der invertierte Ring
     (5.51:1, s. Issue 011). */
  outline-color: var(--clr-focus-invers);
}

.buchung__weiter:hover {
  background: var(--clr-plum);
}

.buchung__weiter:disabled {
  background: var(--clr-lavender);
  color: var(--clr-white);
  cursor: not-allowed;
}

/* ─── BESTÄTIGUNGSSEITE ───────────────────────────────────── */
.buchung__aktionen {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.buchung__zahlungsbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-target);
  padding: 0.85rem var(--space-md);
  background: var(--clr-plum-mid);
  color: var(--clr-white);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast);
}

.buchung__zahlungsbutton:hover {
  background: var(--clr-plum);
  color: var(--clr-white);
}

.buchung__ics-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: 0.6rem var(--space-md);
  color: var(--clr-plum-mid);
  border: 1px solid var(--clr-border-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
}

.buchung__ics-link:hover {
  background: var(--clr-cream-dark);
  color: var(--clr-plum);
}

/* ─── RESPONSIVE (nur zwei Breakpoints, Auftrag: 700px/1100px) ── */
@media (min-width: 700px) {
  .hauptinhalt {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }

  /* minmax(0, 1fr) statt 1fr: 1fr hat ein implizites Auto-Minimum, das
     einer Spalte mit langem, nicht trennbarem Leistungsnamen mehr Breite
     zuweist als ihren Nachbarn (Issue 009, Befund 2). minmax(0, 1fr)
     erzwingt exakt gleich breite Spalten. */
  .leistungsliste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .buchung__weiter {
    width: auto;
    min-width: 14rem;
    align-self: flex-start;
  }

  .buchung__zahlungsbutton {
    width: auto;
    min-width: 16rem;
  }

  /* minmax(0, 1fr) statt 1fr, damit lange Datumsbeschriftungen die
     Spalten nicht ungleich breit machen (Issue 009, Teil E). */
  .tagesliste {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  /* Ab hier Desktop-Darstellung der Wochennavigation: Label wieder
     einzeilig neben den beiden Links (siehe mobile Grundregel oben). */
  .slot-bereich__woche-label {
    order: 0;
    flex-basis: auto;
  }
}

@media (min-width: 1100px) {
  .hauptinhalt {
    max-width: 56rem;
  }

  .leistungsliste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .slot-liste__zeiten {
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  }
}