/* Gastwerk öffentlicher Buchungs-Wizard (Welle 5, Task B3) - eigenständiges
 * Stylesheet für die Fläche, auf der der Gast Geld ausgibt: Suche, Extras,
 * Gastdaten, Zusammenfassung, Zahlung, Bestätigung, Gastbereich
 * (ui/templates/portal/*, ui/templates/portal/guestarea/*).
 *
 * Wird ZUSÄTZLICH zu blocks.css geladen (ui/templates/portal/base.html
 * ::stylesheets-Block), nicht als Ersatz - room-grid/room-card/price/
 * price-table/contact-list/form-grid/fine-print/hp-field/signature-pad
 * kommen bewusst von dort (Plan Teil B "geteilte Dateien": blocks.css
 * gehört B2, portal.css nur B3). Der Wizard nutzt diese Blockkomponenten
 * hier aktiv mit statt eigene Parallel-Klassen zu erfinden - genau die
 * Inkonsistenz, die der Plan als größte Schwäche des Wizards nennt
 * ("wirkt wie eine zweite Website"), soll dadurch verschwinden.
 *
 * Token-Vertrag (wie theme.css/blocks.css, siehe deren Dateiköpfe):
 * jede Farbe hier kommt aus --color-primary/--color-accent oder den
 * abgeleiteten --color-on-primary/--color-on-accent/-soft-Tönen - nie ein
 * hartkodiertes Textfarbe-auf-Markenfarbe-Paar, sonst funktioniert das nur
 * mit der Vorgabefarbe (Betrieb stellt Primär-/Akzentfarbe selbst ein).
 * Seit Welle 7 (Dunkelmodus) gilt zusätzlich: --color-primary/--color-accent
 * DIREKT als Linien-/Textfarbe auf der Seite (statt als Fläche mit -on-*
 * oder als -soft-Fläche mit --color-text) geht über --color-primary-ink/
 * --color-accent-ink (theme.css-Dateikopf) - sonst kann eine sehr dunkle
 * Betriebsfarbe im Dunkelmodus auf der ebenfalls dunklen Seite verschwinden.
 * Kein Inline-<style>, keine externen Assets, kein Build-Schritt, kein JS
 * (dieselbe CSP/Ladezeit-Begründung wie theme.css/blocks.css).
 *
 * Fortschrittsanzeige (.wizard-steps): das Kindtemplate setzt NUR eine
 * Ziffer "1".."4" über {% block wizard_step %} in das
 * data-current-step-Attribut von <nav> (Zahlung/Bestätigung/Gastbereich
 * setzen nichts -> "" -> Anzeige bleibt versteckt, siehe erste Regel
 * unten). Welches <li data-step="…"> "aktuell"/"erledigt" ist, entscheidet
 * ausschließlich CSS über Attribut-Selektoren (Django-Blocks sind reine
 * Einfügestellen, keine vergleichbaren Kontextvariablen - siehe
 * ui/templates/portal/base.html-Kommentar). Absichtlich nur 4 Schritte:
 * ob ein Zahlungsschritt überhaupt stattfindet, steht erst nach der
 * Zusammenfassung fest (portal/booking.py::_STEPS-Kommentar) - eine
 * durchgezählte Anzeige über Zahlung/Bestätigung hinweg wäre irreführend.
 */

.wizard-steps[data-current-step=""] { display: none; }
.wizard-steps { margin: 0 0 var(--space-5); }
.wizard-steps ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.wizard-steps__item { display: flex; align-items: center; gap: var(--space-2); }
.wizard-steps__item:not(:last-child)::after { content: ""; flex: none; width: var(--space-6); height: 1px; margin-inline: var(--space-3); background: var(--color-border); }
.wizard-steps__index { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-muted); font-size: var(--step--1); font-weight: 700; }
.wizard-steps__label { font-size: var(--step--1); font-weight: 600; color: var(--color-muted); white-space: nowrap; }

/* "aktuell" - Ziffer und Text auf Markenfarbe (--color-on-primary), nie
   hartkodiert (Dateikopf). */
.wizard-steps[data-current-step="1"] [data-step="1"] .wizard-steps__index,
.wizard-steps[data-current-step="2"] [data-step="2"] .wizard-steps__index,
.wizard-steps[data-current-step="3"] [data-step="3"] .wizard-steps__index,
.wizard-steps[data-current-step="4"] [data-step="4"] .wizard-steps__index {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
}
.wizard-steps[data-current-step="1"] [data-step="1"] .wizard-steps__label,
.wizard-steps[data-current-step="2"] [data-step="2"] .wizard-steps__label,
.wizard-steps[data-current-step="3"] [data-step="3"] .wizard-steps__label,
.wizard-steps[data-current-step="4"] [data-step="4"] .wizard-steps__label {
    color: var(--color-text);
}

/* "erledigt" - blasse Tönung wie .badge--primary (-soft-Ton + --color-text
   als Schrift, siehe theme.css-Dateikopf - NICHT rohes --color-primary:
   eine sehr dunkle Betriebsfarbe wäre auf der im Dunkelmodus ebenfalls
   dunklen -soft-Tönung sonst kaum noch zu erkennen, siehe dortige
   Dunkelmodus-Ergänzung). Rahmen/Verbindungslinie bleiben bei
   --color-primary-ink statt --color-primary: sie stehen direkt auf der
   Seite (nicht auf der -soft-Fläche), gehören also zum -ink-Token-Vertrag
   aus theme.css, nicht zum -soft-Vertrag. */
.wizard-steps[data-current-step="2"] [data-step="1"] .wizard-steps__index,
.wizard-steps[data-current-step="3"] [data-step="1"] .wizard-steps__index,
.wizard-steps[data-current-step="3"] [data-step="2"] .wizard-steps__index,
.wizard-steps[data-current-step="4"] [data-step="1"] .wizard-steps__index,
.wizard-steps[data-current-step="4"] [data-step="2"] .wizard-steps__index,
.wizard-steps[data-current-step="4"] [data-step="3"] .wizard-steps__index {
    border-color: var(--color-primary-ink);
    background: var(--color-primary-soft);
    color: var(--color-text);
}
.wizard-steps[data-current-step="2"] [data-step="1"]::after,
.wizard-steps[data-current-step="3"] [data-step="1"]::after,
.wizard-steps[data-current-step="3"] [data-step="2"]::after,
.wizard-steps[data-current-step="4"] [data-step="1"]::after,
.wizard-steps[data-current-step="4"] [data-step="2"]::after,
.wizard-steps[data-current-step="4"] [data-step="3"]::after {
    background: var(--color-primary-ink);
}

/* Telefon: nur die Ziffernkette + das Label des aktuellen Schritts, damit
   "Zusammenfassung"/"Gastdaten" nicht vierfach umbrechen. */
@media (max-width: 36rem) {
    .wizard-steps__item:not(:last-child)::after { width: var(--space-3); margin-inline: var(--space-1); }
    .wizard-steps__label { display: none; }
    .wizard-steps[data-current-step="1"] [data-step="1"] .wizard-steps__label,
    .wizard-steps[data-current-step="2"] [data-step="2"] .wizard-steps__label,
    .wizard-steps[data-current-step="3"] [data-step="3"] .wizard-steps__label,
    .wizard-steps[data-current-step="4"] [data-step="4"] .wizard-steps__label {
        display: inline;
    }
}

/* Gleichmäßiger Abstand zwischen den Karten/Formularen jedes Schritts
   (bislang lagen z. B. Preis-Karte und Extras-Formular ohne Lücke direkt
   übereinander - base.html wrappt {% block wizard_content %} dafür in
   .wizard-stack).
   Breite/Ausrichtung: bewusst KEIN eigenes margin-inline:auto, sonst
   zentriert sich dieses schmalere Lesemaß unabhängig vom umgebenden
   .container (72rem) - genau das ließ Formular/Karten der Schritte
   gegenüber der linksbündigen Überschrift eingerückt wirken (Welle-6-
   Befund, Plan Task B2). Stattdessen dieselbe Technik wie .measure in
   blocks.css (B1, siehe dortiger Dateikopf): ohne eigene Zentrierung
   bleibt der Block links an der Content-Box von .container, nur nach
   rechts schmaler - Überschrift/Formular/Karten teilen sich damit immer
   dieselbe linke Kante. */
.wizard-stack { display: grid; gap: var(--space-5); max-width: 46rem; }

/* Sende-/Weiter-Zeile am Ende jedes Schritt-Formulars - auf schmalen
   Bildschirmen (der Großteil der Buchungen entsteht auf dem Telefon,
   Plan-Vorgabe) stapeln sich mehrere Aktionen mit vollbreiten,
   gut treffbaren Schaltflächen statt nebeneinander gequetscht zu werden. */
.wizard-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 30rem) {
    .wizard-actions { flex-direction: column-reverse; }
    .wizard-actions .button { width: 100%; }
}

/* Preis-Karte auf der Extras-Seite - der Gast sieht den Betrag, bevor er
   überhaupt zu scrollen anfängt, statt ihn erst am Ende wiederzufinden. */
.wizard-price-card { background: var(--color-primary-soft); border: 1px solid var(--color-border); box-shadow: none; }
.wizard-price-card__label { margin: 0 0 var(--space-2); color: var(--color-muted); font-size: var(--step--1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* Suchergebnis-Karten (search.html) - .room-grid/.room-card__title/.price
   kommen aus blocks.css (B2), hier nur die wizard-eigene Randbehandlung:
   nicht verfügbare Kategorien treten sichtbar zurück, ohne unlesbar zu
   werden (kein Kontrast-Sonderfall, nur reduzierte Deckkraft). */
.room-result { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.room-result__action { margin-top: auto; }
.room-result--unavailable { opacity: .7; }

@media print {
    .wizard-steps, .wizard-actions { display: none !important; }
}