/* ===========================================================================
   Der INHALT des Bestellprüfungs-Overlays: die vier Zeilen mit „ändern"-Link
   und der Summenblock (Figma 1:1338–1:1379).

   Abgetrennt von overlay.css am 02.09.2026, als die Datei über die
   300-Zeilen-Grenze ging (CLAUDE.md). Der Schnitt liegt dort, wo er auch
   beim Skript liegt: overlay.css trägt den RAHMEN (Dialog, Kopfband, Rumpf,
   Knöpfe, AGB-Satz, Mobil), diese Datei den Inhalt — also genau das, was
   public/bestellpruefung-inhalt.js beim Öffnen einsetzt.

   Geladen wird sie in src/views/head.ts, direkt neben overlay.css.
   =========================================================================== */

/* --- Die vier Zeilen ------------------------------------------------------ */

/* Der Entwurf setzt eine einzige Schrittweite: 20 px vom Inhalt zur Linie,
   20 px von der Linie zur nächsten Bezeichnung (Zeilen bei y = 30, 108, 186,
   264 auf 58 px Inhaltshöhe). Vorher waren es zweimal 14 px. */
.bestellpruefung__lines {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
}

/* Ein Raster statt einer Flex-Zeile: Bezeichnung und „ändern" teilen sich die
   erste Reihe, der Inhalt läuft in der zweiten über BEIDE Spalten — also unter
   dem Link hindurch (Entwurf 0:2923: das Textfeld des Inhalts ist `w-full`,
   der Link steht in der Zeile darüber). Als Flex-Zeile war der Inhalt auf die
   Spalte neben dem Link beschränkt und brach bei längeren Menülisten rund
   60 px zu früh um.

   `minmax(0, 1fr)` und nicht `1fr`: eine Rasterspalte schrumpft sonst nicht
   unter ihren Mindestinhalt, und eine lange Adresse ohne Umbruchstelle
   schöbe den „ändern"-Link aus dem Dialog (derselbe Befund wie auf der
   Buchungsseite des Backends, CLAUDE.md).

   16 px Spaltenabstand, aber KEIN Zeilenabstand: der Entwurf setzt
   Bezeichnung und Inhalt unmittelbar untereinander. */
.bestellpruefung__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: start;
  padding-bottom: 1.25rem;
  /* --gruen-tief wie im Entwurf (Line 7, nachgesehen im ausgelieferten SVG:
     `stroke="#14372D"`). --gruen-hell war so blass, dass die Zeilen ineinander
     liefen — genau der Eindruck, den der Entwurf mit einer dunklen Haarlinie
     vermeidet. */
  border-bottom: 1px solid var(--gruen-tief);
}

/* Die vierte Zeile behält ihre Linie — der Entwurf zeichnet sie unter ALLEN
   vier Zeilen (Line 7 auch an 1:1365), sie trennt die Angaben vom Summenblock
   darunter. Ein `:last-child`-Ausschluss nahm sie weg und stauchte zugleich
   den Abstand zur Summe. */

/* Bezeichnung und Inhalt waren gegenüber dem Entwurf VERTAUSCHT: die
   Bezeichnung stand klein, grau und in Versalien, der Inhalt groß und fett.
   Der Entwurf (1:1340 gegen 1:1343) macht es umgekehrt — die Bezeichnung
   ist die Überschrift der Zeile, der Inhalt die Angabe darunter. Das ist
   auch die Ordnung, die der „ändern"-Link daneben voraussetzt: er gehört
   zur BEZEICHNUNG, nicht zum Wert. */
.bestellpruefung__label {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: var(--schwarz);
  font-size: 0.9375rem;
  font-weight: 700;
}

.bestellpruefung__value {
  /* Über beide Spalten — der Inhalt läuft unter dem „ändern"-Link hindurch. */
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  color: var(--grau-text);
  /* 10 px laut Entwurf (1:1343). Bewusst klein: die Zeile wiederholt eine
     Angabe, die der Gast eine Bildschirmhöhe weiter oben selbst eingegeben
     hat — sie soll wiedererkennbar sein, nicht gelesen werden. */
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.5;
  /* Mehrere Menügruppen (z. B. „1 × vegetarisch · Freiplatz" UND
     „2 × vegan · Ticket") stehen als eigene Zeile untereinander — das Skript
     trennt sie mit „\n", nicht mit Markup (overlay.js). */
  white-space: pre-line;
}

/* Auf Augenhöhe mit der Bezeichnung, nicht mit dem Inhalt: 15 px in Medium
   (Entwurf 1:1342). Er steht auf DEREN Grundlinie. */
.bestellpruefung__aendern {
  grid-column: 2;
  grid-row: 1;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gruen-akzent);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.bestellpruefung__aendern:hover {
  color: var(--pink-schrift);
}

/* --- Summenblock ------------------------------------------------------------
   `.summary` etc. kommen unverändert aus summary.css — der Klon aus
   overlay.js trägt dieselben Klassen wie im Formular. Hier nur der Abstand
   zu den Zeilen darüber. */

/* Steht seit dem 01.09.2026 AUSSERHALB des Scrollbereichs (siehe
   bestellpruefung.ts) und holt sich deshalb den seitlichen Abstand, den die
   Zeilen darüber vom Rumpf bekommen.

   **Als RAND, nicht als Polsterung.** Bis zum 03.09.2026 stand hier
   `padding: 0 1.25rem` — eine Kurzschreibweise, die die eigene Polsterung von
   `.summary` (20 px ringsum, summary.css) mit ÜBERSCHRIEB. Der grüne Kasten
   hatte damit oben und unten gar keine Polsterung mehr und lag zugleich über
   die ganzen 580 px des Dialogs statt über die 540 der Zeilen: die Schrift
   klebte an seiner Ober- und Unterkante, und seitlich stieß er an den
   Dialogrand. Genau das sah gequetscht aus.

   Ein Rand schiebt den Kasten stattdessen ein und lässt seine Polsterung in
   Ruhe — 540 px breit wie die Zeilen, 20 px Luft nach innen (Entwurf 0:2936:
   `p-[20px]`, `rounded-[20px]`, 500 px Inhalt). */
.bestellpruefung__summary {
  margin: 1.25rem 1.25rem 0;
}

/* --- Die Summenzeile (Entwurf 1:1374) -------------------------------------
   Am Formular steht dort nur der Betrag, linksbündig. Der Entwurf des Overlays
   setzt links die Bezeichnung und schiebt den Betrag nach rechts — deshalb
   hier und nicht in summary.css. Der Klon trägt dieselben Klassen wie das
   Original; was ihn unterscheidet, ist allein dieser Rahmen. */
.bestellpruefung__summary .summary__total {
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  /* Die Haarlinie zwischen Positionen und Gesamtsumme (Entwurf: Line 5,
     `stroke="#14372D"`). Sie steht hier als Rand der Summenzeile und nicht
     als eigenes Element: `.summary` ist ein Klon aus dem Formular, und dort
     gibt es sie nicht — ein zusätzliches Element müsste overlay.js beim
     Klonen einsetzen, ein Rand kostet nichts.

     10 px darüber wie darunter: der Abstand der Zeilen zur Linie ist im
     Entwurf derselbe wie der der Linie zur Summe, und die 10 px unterhalb
     bringt der `gap` von `.summary` schon mit. */
  padding-top: 0.625rem;
  border-top: 1px solid var(--gruen-tief);
}

.bestellpruefung__summe-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--grau-text);
}

.bestellpruefung__summe-wort {
  font-size: 1rem;
  font-weight: 500;
}

.bestellpruefung__summe-hinweis {
  font-size: 0.625rem;
  font-weight: 500;
}

/* Rechtsbündig, sonst klebte der Betrag bei kurzen Beträgen nicht an der
   Kante, an der ihn der Entwurf zeigt. */
.bestellpruefung__summary .summary__total-value {
  text-align: right;
}