/* =====================================================================
   style.css
   ---------------------------------------------------------------------
   Gestaltung von CineFlow: soll bewusst Lust auf Kino machen.

   Gestaltungsidee: Die App ist fest im Look eines abgedunkelten
   Kinosaals gehalten (unabhängig von der Systemeinstellung des
   Geräts) - mitternachtsblauer Hintergrund mit mehrschichtigem,
   warmem Bühnenlicht-Schein, eine blinkende Marquee-Lichterkette im
   Kopfbereich, Filmstreifen-Perforation an den Postern, ein
   leuchtender Kino-Screen bei der Sitzplatzwahl und ein
   Ticket-Stub-Design für die Buchungsübersicht. Diese feste,
   atmosphärische Gestaltung ist bei Kino-/Streaming-Apps üblich und
   sorgt dafür, dass alle Besucher:innen dieselbe stimmungsvolle
   Optik sehen - unabhängig davon, ob ihr System hell oder dunkel
   eingestellt ist.

   Aufbau dieser Datei:
     1) CSS-Variablen (Design-Tokens)
     2) Grundlegendes Reset & Basistypografie
     3) Barrierefreiheits-Hilfsklassen (sr-only, Fokus-Stile)
     4) Kopfbereich & Fortschrittsleiste (Marquee-Optik)
     5) Allgemeine Layout-/Schritt-Elemente
     6) Buttons
     7) Schritt 1: Filmkarten (Filmstreifen-Perforation)
     8) Schritt 2: Uhrzeit-Karten
     9) Schritt 3: Sitzplatzmatrix (Leinwand-Glow)
    10) Schritt 4/5: Zusammenfassungskarte im Ticket-Stub-Design
    11) Footer
    12) Responsive Anpassungen
   ===================================================================== */

/* Dekorative Display-Schrift für große Überschriften/Logo, im Stil
   klassischer Kino-Leuchtreklamen (schmal, groß, in Versalien).
   Fällt bei fehlender Internetverbindung automatisch auf eine
   schmale Systemschrift zurück - die App bleibt voll funktionsfähig. */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

/* ---------------------------------------------------------------------
   1) CSS-VARIABLEN (DESIGN-TOKENS)
   ---------------------------------------------------------------------
   Die Sitzplatz-Farben (Abschnitt 9) bleiben bewusst IMMER hell und
   kräftig - unabhängig vom Theme -, damit sie vor dem dunklen
   Kinosaal-Hintergrund wie eine echte, beleuchtete Sitzplatzanzeige
   "leuchten". Kein Rot/Grün-Kontrast, sondern Grün + Symbol (verfügbar)
   vs. Grau + Symbol (belegt), damit die App auch für farbfehlsichtige
   Personen gut nutzbar ist.
   --------------------------------------------------------------------- */
:root {
  /* Grundfarben: dunkler Kinosaal in Mitternachtsblau */
  --color-bg: #070a14;
  --color-surface: #10162a;
  --color-surface-alt: #161d35;
  --color-border: #262f4d;
  --color-text: #f2f4f8;
  --color-text-muted: #98a2c0;

  /* Akzentfarbe: knalliges Marquee-Pink */
  --color-accent: #ec2f8e;
  --color-accent-hover: #ff5fac;
  --color-accent-soft: rgba(236, 47, 142, 0.16);
  --color-accent-contrast: #fff5fa; /* heller Text auf dem pinken Grund */

  /* Sitzplatz-Zustände: helle, kräftige Kontraste statt Rot/Grün */
  --seat-available-bg: #ecfdf5;
  --seat-available-border: #34d399;
  --seat-available-text: #065f46;

  --seat-selected-bg: var(--color-accent);
  --seat-selected-border: #a3155f;
  --seat-selected-text: var(--color-accent-contrast);

  --seat-occupied-bg: #e5e7eb;
  --seat-occupied-border: #cbd5e1;
  --seat-occupied-text: #6b7280;

  /* Abstände & Radien */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.4);

  /* Typografie */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Bebas Neue", "Arial Narrow", Impact, var(--font-base);
}

/* ---------------------------------------------------------------------
   2) GRUNDLEGENDES RESET & BASISTYPOGRAFIE
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;

  /* Mehrschichtiger, pinkfarbener "Bühnenlicht"-Schein auf dem dunklen
     Saal-Hintergrund - wie zwei Scheinwerfer, die schräg von oben in
     den Raum strahlen, plus eine sanfte Vignette an den Rändern für
     Tiefe. Rein dekorativ, beeinträchtigt den Kontrast der
     darüberliegenden (deckenden) Karten nicht. */
  background: radial-gradient(ellipse 900px 600px at 12% -10%, rgba(236, 47, 142, 0.16), transparent 55%),
    radial-gradient(ellipse 700px 500px at 88% 5%, rgba(236, 47, 142, 0.1), transparent 55%),
    radial-gradient(ellipse 1400px 900px at 50% 110%, rgba(0, 0, 0, 0.5), transparent 65%), var(--color-bg);
  background-attachment: fixed;
}

h1,
h2,
p,
dl,
dd {
  margin: 0;
}

button {
  font-family: inherit;
  color: inherit;
}

/* Reduzierte Bewegung respektieren (z. B. sanftes Scrollen, Marquee-Lichter) */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------
   3) BARRIEREFREIHEITS-HILFSKLASSEN
   --------------------------------------------------------------------- */

/* Versteckt Inhalte visuell, hält sie aber für Screenreader zugänglich. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Einheitlicher, gut sichtbarer Fokusring für alle interaktiven Elemente. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------
   4) KOPFBEREICH & FORTSCHRITTSLEISTE (MARQUEE-OPTIK)
   --------------------------------------------------------------------- */
.app-header {
  background: linear-gradient(to bottom, var(--color-surface-alt), var(--color-surface));
  border-bottom: 3px solid var(--color-accent);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Reihe leuchtender "Glühbirnen" unterhalb des Headers, wie an einer
   klassischen Kino-Marquee - abwechselnd pink und zartrosa, mit
   echtem Leuchten (drop-shadow). Rein dekorativ (kein Text, keine
   Bedeutung), daher unbedenklich für Screenreader. Pulsiert sanft,
   respektiert aber prefers-reduced-motion (siehe Abschnitt 2). */
.app-header::after {
  content: "";
  display: block;
  height: 9px;
  background-image: radial-gradient(circle, var(--color-accent) 42%, transparent 44%),
    radial-gradient(circle, #ffe3f2 42%, transparent 44%);
  background-size: 36px 100%, 36px 100%;
  background-position: 9px center, 27px center;
  background-repeat: repeat-x, repeat-x;
  filter: drop-shadow(0 0 5px rgba(236, 47, 142, 0.9));
  animation: marquee-twinkle 2.4s ease-in-out infinite;
}

@keyframes marquee-twinkle {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.app-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-text);
  align-self: flex-start;
}

.logo__icon {
  font-size: 1.5rem;
}

.logo__text {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  /* Leichtes Leuchten, wie eine beleuchtete Kino-Leuchtreklame. */
  text-shadow: 0 0 18px rgba(236, 47, 142, 0.55);
}

/* Fortschrittsleiste: horizontale Liste der 5 Buchungsschritte. */
.progress-bar__list {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
}

.progress-bar__item {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
}

/* Verbindungslinie zwischen den Schritten */
.progress-bar__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 55%;
  width: 90%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

.progress-bar__step {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  position: relative;
  z-index: 1;
  padding: 0.25rem;
}

.progress-bar__step:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.progress-bar__circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.progress-bar__label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
  text-align: center;
}

.progress-bar__step.is-current .progress-bar__circle {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.progress-bar__step.is-current .progress-bar__label {
  color: var(--color-text);
  font-weight: 700;
}

.progress-bar__step.is-completed .progress-bar__circle {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* ---------------------------------------------------------------------
   5) ALLGEMEINE LAYOUT-/SCHRITT-ELEMENTE
   --------------------------------------------------------------------- */
.app-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.step__header {
  margin-bottom: 1.75rem;
}

.step__header h1 {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  outline: none; /* wird per JS fokussiert, soll aber keinen Rahmen zeigen */
}

.step__hint {
  color: var(--color-text-muted);
  margin-top: 0.375rem;
}

.step__actions {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  gap: 1rem;
}

.step__actions--center {
  justify-content: center;
}

/* Eingabefeld (aktuell: E-Mail-Adresse in Schritt 4). */
.form-field {
  margin-top: 1.5rem;
  max-width: 420px;
}

.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.form-field__input {
  width: 100%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: var(--color-text);
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.form-field__input::placeholder {
  color: var(--color-text-muted);
}

.form-field__input:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

.form-field__hint {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Fehlerbanner (z. B. Netzwerkfehler, Sitzplatz inzwischen belegt).
   Bewusst klassisches Warnrot - anders als bei der Sitzplatzmatrix
   (Abschnitt 9) gibt es hier keine Verwechslungsgefahr mit einem
   "verfügbar"-Zustand, da es sich um eine eigenständige Textmeldung
   handelt, kein Farbcode in einer Auswahlmatrix. */
.error-banner {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.45);
  border-left: 4px solid #f87171;
  color: #fecaca;
  border-radius: var(--radius-sm);
  padding: 0.875rem 1.125rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Lade-Zustand: dimmt Hauptinhalt + Fortschrittsleiste und blockiert
   Klicks, während eine Anfrage an den Server läuft (z. B. Buchung wird
   gesendet) - verhindert versehentliches Doppel-Absenden. */
body.is-loading {
  cursor: wait;
}

body.is-loading .app-main,
body.is-loading .progress-bar {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* ---------------------------------------------------------------------
   6) BUTTONS
   --------------------------------------------------------------------- */
.btn {
  border: none;
  border-radius: var(--radius-md);
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.btn--primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.btn--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn--ghost:hover {
  background: var(--color-surface);
  border-color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------
   7) SCHRITT 1: FILMKARTEN (FILMSTREIFEN-PERFORATION)
   --------------------------------------------------------------------- */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.movie-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.movie-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card), 0 0 28px -6px rgba(236, 47, 142, 0.45);
}

.movie-card[aria-pressed="true"] {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: var(--shadow-card), 0 0 28px -4px rgba(236, 47, 142, 0.55);
}

.movie-card__poster {
  position: relative;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Filmstreifen-Lochung an Ober- und Unterkante jedes Posters - rein
   dekoratives Muster (keine generierten Textinhalte), daher ohne
   Auswirkung auf Screenreader. */
.movie-card__poster::before,
.movie-card__poster::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.32) 2.5px, transparent 3px);
  background-size: 16px 100%;
}

.movie-card__poster::before {
  top: 0;
}

.movie-card__poster::after {
  bottom: 0;
}

.movie-card__emoji {
  font-size: 2.75rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.movie-card__body {
  padding: 1rem 1.125rem 1.25rem;
}

.movie-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.movie-card__meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------
   8) SCHRITT 2: UHRZEIT-KARTEN
   --------------------------------------------------------------------- */
.time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

.time-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.time-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card), 0 0 28px -6px rgba(236, 47, 142, 0.45);
}

.time-card[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: var(--shadow-card), 0 0 28px -4px rgba(236, 47, 142, 0.55);
}

.time-card__clock {
  font-size: 1.5rem;
}

.time-card__time {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   9) SCHRITT 3: SITZPLATZMATRIX (LEINWAND-GLOW)
   ---------------------------------------------------------------------
   Bewusste Design-Entscheidung: KEIN Rot/Grün-Kontrast, da dieser für
   farbfehlsichtige Nutzer:innen problematisch ist. Stattdessen:
     - verfügbar   -> helles Grün mit klarer Randfarbe + Zahl
     - ausgewählt  -> Marquee-Pink + Haken-Symbol (✓)
     - belegt      -> neutrales Grau + Kreuz-Symbol (✕), nicht klickbar
   Die hellen Sitz-Farben sitzen bewusst auf dem dunklen Saal-Hintergrund
   auf, damit die Matrix wie eine echte, beleuchtete Sitzplatzanzeige
   wirkt. Zusätzlich gibt es ausgewiesene, breitere Rollstuhlplätze
   (Klasse .seat--wheelchair, siehe data.js) mit ♿-Symbol.
   --------------------------------------------------------------------- */
.cinema {
  position: relative;
  background: radial-gradient(ellipse 650px 320px at 50% 0%, rgba(236, 47, 142, 0.16), transparent 70%), var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-card);
}

.screen {
  width: min(600px, 90%);
  margin: 0 auto 2.5rem;
  height: 10px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  border-radius: 50% / 100%;
  text-align: center;
  box-shadow: 0 18px 48px -8px rgba(236, 47, 142, 0.5);
}

.screen span {
  display: inline-block;
  transform: translateY(-1.6rem);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--color-text-muted);
  font-weight: 400;
}

.seat-map {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.seat-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.seat-row__label {
  width: 1.25rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

/* Sitzform: abgerundete Oberkante wie bei echten Kinosesseln. */
.seat {
  width: 32px;
  height: 32px;
  border-radius: 10px 10px 4px 4px;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}

.seat:hover:not(:disabled) {
  transform: translateY(-2px);
}

.seat--available {
  background: var(--seat-available-bg);
  border-color: var(--seat-available-border);
  color: var(--seat-available-text);
}

.seat--selected {
  background: var(--seat-selected-bg);
  border-color: var(--seat-selected-border);
  color: var(--seat-selected-text);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.seat--occupied {
  background: var(--seat-occupied-bg);
  border-color: var(--seat-occupied-border);
  color: var(--seat-occupied-text);
  cursor: not-allowed;
}

/* Rollstuhlplätze: deutlich breiter als reguläre Sitze, damit sie in
   der Matrix sofort als eigene Kategorie erkennbar sind - unabhängig
   vom Belegungsstatus (verfügbar/ausgewählt/belegt), der weiterhin
   über Farbe + Symbol (♿/✓/✕) kommuniziert wird. */
.seat--wheelchair {
  width: 54px;
  font-size: 1rem;
}

/* Legende unterhalb der Sitzplatzmatrix */
.seat-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.seat-legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.seat-legend__swatch {
  width: 22px;
  height: 22px;
  border-radius: 8px 8px 3px 3px;
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}

.seat-legend__swatch--available {
  background: var(--seat-available-bg);
  border-color: var(--seat-available-border);
}

.seat-legend__swatch--selected {
  background: var(--seat-selected-bg);
  border-color: var(--seat-selected-border);
  color: var(--seat-selected-text);
}

.seat-legend__swatch--occupied {
  background: var(--seat-occupied-bg);
  border-color: var(--seat-occupied-border);
  color: var(--seat-occupied-text);
}

.seat-summary {
  text-align: center;
  margin-top: 1.5rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   10) SCHRITT 4/5: ZUSAMMENFASSUNGSKARTE IM TICKET-STUB-DESIGN
   ---------------------------------------------------------------------
   Die Karte bekommt einen pinken, gelochten Rand auf der linken
   Seite plus eine gestrichelte "Abriss"-Linie - wie bei einer echten
   Kinokarte mit Kontrollabschnitt.
   --------------------------------------------------------------------- */
.summary-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 0.5rem 1.5rem 0.5rem 2.25rem;
  overflow: hidden;
}

/* Pinker Streifen mit "gestanzten" Löchern (Farbe = Seitenhintergrund) */
.summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18px;
  background-color: var(--color-accent);
  background-image: radial-gradient(circle at 9px 9px, var(--color-bg) 4px, transparent 4.5px);
  background-size: 18px 18px;
  background-repeat: repeat-y;
}

/* Gestrichelte Perforationslinie direkt neben dem Pinkstreifen */
.summary-card::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 18px;
  border-left: 2px dashed var(--color-border);
}

.summary-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
  gap: 1rem;
}

.summary-card__row:last-child {
  border-bottom: none;
}

.summary-card__row dt {
  color: var(--color-text-muted);
  font-weight: 500;
}

.summary-card__row dd {
  font-weight: 700;
  text-align: right;
}

/* Buchungsnummer im Ticket-Code-Stil: Monospace + weiter Zeichenabstand */
.summary-card__row:first-child dd {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

.summary-card__row--total dd {
  font-size: 1.3rem;
  color: var(--color-accent);
}

.confirmation {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.confirmation__icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  border: 3px dashed var(--color-accent);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  transform: rotate(-8deg);
}

.confirmation h1 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.confirmation .step__hint {
  margin-bottom: 1.75rem;
}

.confirmation .summary-card {
  text-align: left;
}

/* ---------------------------------------------------------------------
   11) FOOTER
   --------------------------------------------------------------------- */
.app-footer {
  text-align: center;
  padding: 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.app-footer__icon {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
}

/* ---------------------------------------------------------------------
   12) RESPONSIVE ANPASSUNGEN
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .progress-bar__label {
    display: none; /* Auf kleinen Bildschirmen nur die Kreise anzeigen */
  }

  .seat {
    width: 26px;
    height: 26px;
    font-size: 0.65rem;
  }

  .seat--wheelchair {
    width: 44px;
    font-size: 0.85rem;
  }

  .step__header h1 {
    font-size: 1.75rem;
  }

  .step__actions {
    flex-direction: column-reverse;
  }

  .step__actions .btn {
    width: 100%;
  }
}