/* ===========================================================================
   Buchungskarte — Schritte, Menü-Stepper, Felder, Zahlung, Zusammenfassung.
   Nach Figma 39:2965 / 42:4920. Gehört zu public/styles.css.
   =========================================================================== */

/* --- Seite und Karte ----------------------------------------------------- */

/*
 * Das Band ist vollbreit, sein Inhalt nicht — wie die Eckdaten und die
 * Fußzeile auch. Läge die Maximalbreite am <main> selbst, wäre das Band auf
 * einem breiten Bildschirm ein 600 Pixel schmaler Streifen: sichtbar wird das
 * erst, sobald das Band einmal eine eigene Fläche bekommt, und dann ist es
 * überall falsch. Der Seitenrand von 10 Pixeln steht deshalb am Band, die
 * Breite am Inhalt.
 */
.page {
  /* 60 Pixel über der Karte, 50 darunter (Figma 23:1220: die Kartenspalte
     beginnt bei y=60 im 1692 Pixel hohen Band, dessen Inhalt bei 1642 endet).
     Die 50 unten sind zugleich der GANZE Abstand zur Fußzeile — sie schließt
     im Entwurf bündig an das Band an. */
  padding: 3.75rem 0.625rem 3.125rem;
}

/* Die Karte ist im Entwurf 580 Pixel breit (Figma 23:1227) und steht auf
   jedem Bildschirm in der Mitte. Auf dem Telefon greift die Maximalbreite
   nicht — dort bleiben die 10 Pixel Seitenrand des Bandes. */
.page > * {
  max-width: var(--breite-karte);
  margin-inline: auto;
}

/* Schatten als `box-shadow`, NIE als `filter: drop-shadow(...)`: `filter`,
   `transform`, `backdrop-filter`, `perspective`, `will-change: transform` und
   `contain: paint` machen ihr Element zum Bezugsrahmen für `position: fixed`
   darin — die Checkout-Leiste steht IN der Karte und klebte damit an deren
   unterem Rand statt am Bildschirm (Kopf von components/checkout-bar.ts).
   Keine der sechs gehört an einen Vorfahren von `.checkout-bar`. Silhouette
   unverändert: Kopf und Rumpf sind deckend und tragen die 30er-Radien. */
.card {
  border-radius: var(--radius-karte);
  box-shadow: 0 0 4px rgb(0 0 0 / 25%);
}

.card__head {
  padding: 1.25rem;
  border-radius: var(--radius-karte) var(--radius-karte) 0 0;
  background: var(--gruen-tief);
  box-shadow: var(--spur-karte);
}

.card__title {
  margin: 0;
  color: var(--weiss);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.357;
  text-align: center;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  /* 20 Pixel bis zum Inhalt, Rahmen eingerechnet (Figma: Karte 580 breit,
     Inhalt 540). Sonst wäre alles darin 4 Pixel zu schmal. */
  padding: 1.75rem 1.125rem 1.125rem;
  border: 2px solid var(--gruen-tief);
  border-radius: 0 0 var(--radius-karte) var(--radius-karte);
  background: var(--weiss);
}

/* Die Trennlinien stehen als eigene Elemente dazwischen (siehe `rule()` in
   src/views/booking-steps.ts). Der Abstand kommt deshalb aus `gap` und ist
   über und unter jeder Linie gleich groß — im Entwurf sind es 40 Pixel. */
.card__form {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.rule {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--gruen-tief);
}

/* --- Schritte ------------------------------------------------------------ */

.step {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.step__head {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin: 0;
  font-size: 1.0625rem;
}

.step__badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gruen-dunkel);
  color: #f6fcf7;
  font-size: 0.75rem;
  font-weight: 700;
}

.step__title {
  color: var(--schwarz);
  font-weight: 700;
  text-transform: uppercase;
}

.step--coupon .step__title {
  display: block;
  margin: 0;
  font-size: 1.0625rem;
}

.step__hint,
.step__note {
  margin: 0;
  color: var(--grau-text);
  font-size: 0.625rem;
  line-height: 1.4;
}

/*
 * Der Hinweis am ausgeschöpften Budget (public/app.js). Etwas größer und im
 * Grün der Karte statt im Grau der Nebentexte: er erklärt einen Knopf, der
 * gerade nicht mehr reagiert, und muss dafür gefunden werden.
 *
 * KEIN `display` hier — das schlüge das `hidden`-Attribut aus dem
 * Browser-Stylesheet aus und der Hinweis stünde immer da (CLAUDE.md).
 */
.step__limit {
  margin: 0;
  color: var(--gruen-text);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* --- Menüzeile mit Stepper ----------------------------------------------- */

.menu-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.9375rem;
  border: 1px solid var(--gruen-akzent);
  border-radius: var(--radius-feld);
  background: var(--weiss);
}

/* Eine Zeile mit Menge > 0 hebt sich ab — im Entwurf der ausgewählte Zustand.
   Die Menge steht am verborgenen Feld, nicht mehr an der sichtbaren Ziffer:
   ein `<output>` hat kein `value`-Attribut. Der erste Selektor trägt den
   Zustand, bis public/app.js `data-active` setzt — nach einem gescheiterten
   Absenden ist das der Unterschied zwischen „meine Auswahl steht noch da"
   und einer scheinbar leeren Karte. */
.menu-row:has([data-qty]:not([value='0'])),
.menu-row[data-active='true'] {
  background: rgb(25 170 129 / 20%);
}

.menu-row__text {
  display: flex;
  flex: 1 1 140px;
  flex-direction: column;
  min-width: 0;
}

.menu-row__label {
  color: var(--schwarz);
  font-size: 0.9375rem;
  font-weight: 500;
}

.menu-row__price {
  margin: 0;
  color: var(--grau-text);
  font-size: 0.625rem;
}

.stepper {
  display: flex;
  flex: none;
  align-items: center;
}

.stepper__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--gruen-text);
  border-radius: 50%;
  background: transparent;
  color: var(--gruen-dunkel);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.stepper__button--plus {
  border-color: var(--gruen-dunkel);
  background: var(--gruen-dunkel);
  color: #f6fcf7;
}

.stepper__button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.stepper__value {
  min-width: 2rem;
  padding: 0.25rem;
  color: var(--gruen-text);
  font: inherit;
  font-weight: 700;
  text-align: center;
  /*
   * Die Ziffer ist eine ANZEIGE, kein Feld (Begründung in
   * `src/views/components/menu-stepper.ts`). Sie war bis zum 03.09.2026 ein
   * `<input type="number">`, und drei Regeln standen hier nur deshalb: ein
   * Rahmen für den Fall ohne Skript, das Abschalten der Pfeilchen von Chrome
   * und Firefox, und ein unterdrückter Fokusring, weil Browser
   * `:focus-visible` an Texteingaben auch beim Mausklick zeigen. Alle drei
   * sind mit dem Feld entfallen.
   *
   * Geblieben ist nur, was ein `<output>` von sich aus nicht mitbringt: kein
   * Markieren und kein Textcursor. Beides ließe die Zahl weiter wie eine
   * Eingabe wirken — genau der Eindruck, gegen den der Umbau gemacht wurde.
   *
   * Der Fokusring bleibt ungeregelt: In die Tab-Reihenfolge gehört die Zahl
   * nicht (`tabindex="-1"`), und den einen Fokus, den ein Skript setzt —
   * das Sprungziel aus dem Bestellprüfungs-Overlay —, zeichnet
   * `window.GalaFocus.focusQuietly` bewusst ohne Ring (public/focus.js).
   */
  user-select: none;
  cursor: default;
}