/* =========================================================================== Das Bestellprüfungs-Overlay (Figma 1:3187 Desktop / 1:3043 Mobil, Plan §4). Nutzt das Layer-Grundgerüst aus layer.css (`.layer`, `.layer__panel`, `.layer__close`, `.layer__title`, `.layer__body`) — hier stehen nur die Ergänzungen, die eigens für dieses Overlay dazukommen: die Modal-Breite, die zwei Knöpfe unten und der AGB-Satz. Die vier Zeilen und der Summenblock stehen in order-review-content.css — abgetrennt an der 300-Zeilen-Grenze, Begründung im Kopf jener Datei. `[hidden] { display: none !important }` (styles.css) betrifft `` nicht — seine Sichtbarkeit hängt am `open`-Attribut (siehe layer.css). =========================================================================== */ /* `dialog.layer.bestellpruefung` statt `dialog.bestellpruefung` allein: head.ts lädt overlay.css VOR layer.css (Reihenfolge dort nicht in diesem Paket änderbar) — bei gleicher Spezifität gewänne sonst layer.css' eigene dialog.layer-Breite (640 px) über die hier gewollten 580 px. Zwei Klassen sind spezifischer als eine und gewinnen unabhängig von der Ladereihenfolge. */ dialog.layer.bestellpruefung { /* 580 px Desktop laut Entwurf — deckt sich mit --breite-karte, derselben Breite wie die Buchungskarte selbst. */ width: min(90vw, 580px); /* Der Rechtstexte-Layer deckelt bei `min(85vh, 720px)`. Für mehrere Bildschirmhöhen AGB ist das richtig, für die Bestellprüfung zu eng: ihr Inhalt ist begrenzt und braucht rund 830 px, also scrollte sie auf einem Schirm, der 850 px hergegeben hätte — und die Bildlaufleiste verbarg ausgerechnet den Gesamtbetrag (Befund 01.09.2026). Hier zählt nur noch die Fensterhöhe; die Bildlaufleiste im Rumpf bleibt als Notnagel für echte Enge, etwa viele Plätze auf einem kleinen Schirm. */ max-height: 85vh; /* Der Browser deckelt ein von sich aus bei `calc(100% - 6px - 2em)` — auf einem 390er Telefon sind das 352 px statt der 366, die `94vw` unten hergeben. Bemerkbar macht sich das an genau einer Stelle: die Überschrift steht auf 28 px fest und braucht die volle Spur zwischen den beiden 56-px-Rändern, sonst rückt sie dem Kreuz auf die Pelle. Die Breite oben deckelt ohnehin bei 90vw, ein zweiter Deckel bringt nichts. */ max-width: 100%; /* Der Entwurf (0:2897) rundet mit 30 px, nicht mit den 20 px des Rechtstexte-Layers — dieselbe Rundung wie die Buchungskarte selbst. */ border-radius: var(--radius-karte); /* Der weiße Rumpf trägt im Entwurf (0:2907) einen 2-px-Rahmen in --gruen-tief. Er sitzt hier am DIALOG statt am Rumpf, weil es zwischen Kopfband und Rumpf keinen gemeinsamen Behälter gibt — der Rumpf ist über vier Geschwister verteilt (Zeilen, Summe, Knöpfe, AGB-Satz). Am Kopfband fällt der Rahmen nicht auf: es ist dieselbe Farbe. */ border: 2px solid var(--gruen-tief); /* Klammert Kopfband und Rumpf in die Rundung. Ohne das bliebe an den vier Ecken ein Zwickel des Panel-Untergrunds stehen: der Rahmen setzt den inneren Radius auf 28 px herab, die Kinder rundeten aber weiter mit 30. Deshalb tragen Kopfband und Panel unten KEINE eigenen Radien mehr. */ overflow: hidden; } /* Zwei Klassen aus DEMSELBEN Grund wie oben bei der Breite: `.layer__panel` (layer.css) polstert 2.5rem/1.75rem, und bei gleicher Spezifität gewinnt es über die Ladereihenfolge. Mit nur `.bestellpruefung__panel` blieb die Polsterung deshalb stehen — das dunkle Kopfband saß dann in einem 28 px breiten weißen Rahmen statt bündig an der Dialogkante, und unten stand die Polsterung des Panels ZUSÄTZLICH unter der des AGB-Satzes (Befund 01.09.2026 gegen Figma 1:1326/1:1327). */ .layer__panel.bestellpruefung__panel { gap: 0; /* Der Entwurf polstert nicht das Panel, sondern jeden Streifen einzeln: das Kopfband reicht bis an die Kante, Rumpf, Summe, Knöpfe und AGB-Satz holen sich ihre 20 px selbst (siehe unten). */ padding: 0; /* Reines Weiß, nicht das --papier des Rechtstexte-Layers: der Entwurf setzt den Rumpf auf `bg-white` (0:2907), und der AGB-Satz bringt darin eine weiße Fläche mit (`.terms`, summary.css) — auf Papier zeichnete die sich als hellerer Kasten ab. */ background: var(--weiss); } /* --- Kopfband (Figma 1:1327 Desktop / 1:3044 Mobil) ------------------------ Dieselbe Farbe wie der Kartenkopf (booking.css `.card__head`), bis an die Dialogkante gezogen — `dialog.layer` rundet über `overflow: hidden` nicht automatisch ab, deshalb übernimmt das Band dieselben oberen Radien wie der Dialog selbst (`--radius-block`, layer.css). 20 px oben und unten, 56 px an beiden Seiten — im Entwurf (Desktop 1:1327 wie Mobil 1:3044) steht das Textfeld bei x = 56 und endet 56 px vor der rechten Kante, weil rechts UND links ein 26-px-Kreuz mit 20 px Randabstand Platz bekommt. Symmetrisch muss es sein: die Überschrift ist zentriert, und eine ungleiche Polsterung (vorher 28 links / 40 rechts) schob sie sichtbar aus der Mitte des Bands. */ .bestellpruefung__header { position: relative; text-align: center; padding: 1.25rem 3.5rem; /* KEIN eigener Radius: der Dialog klammert mit `overflow: hidden` (siehe oben). Ein Radius hier stünde 2 px neben dem des Rahmens. */ background: var(--gruen-tief); } /* Wieder zwei Klassen: `.layer__title` (layer.css) setzt `margin: 0 2.5rem 1rem 0` und gewann bei gleicher Spezifität über die Ladereihenfolge — der rechte Rand von 40 px schob die ZENTRIERTE Überschrift um 20 px nach links, und der untere von 1rem riss die Einleitung vom Titel ab. Der Entwurf setzt die beiden Zeilen in EINEM Textfeld unmittelbar untereinander (1:1334). */ .layer__title.bestellpruefung__title { /* Kein Abstand nach unten: der Entwurf (0:2904) setzt Titel und Einleitung als ZWEI Zeilen EINES Textfelds — der Abstand steckt allein in den Zeilenhöhen (38 px und 28 px), nicht in einem Rand dazwischen. */ margin: 0; color: var(--weiss); /* 28 px auf 38 px Zeilenhöhe, Poppins Bold (0:2904, erste Zeile). Vorher 22 px in 900, danach 1.15 als Zeilenhöhe — beides Augenmaß. */ font-size: 1.75rem; font-weight: 700; line-height: 2.375rem; text-transform: uppercase; } .bestellpruefung__intro { margin: 0; /* Weiß wie der Titel: im Entwurf (0:2904) tragen beide Zeilen dieselbe Farbe, weil sie DASSELBE Textfeld sind. --papier war eine eigene Abstufung, die es dort nicht gibt. */ color: var(--weiss); /* 12 px auf 28 px Zeilenhöhe (0:2904, zweite Zeile) — der Satz ordnet die Überschrift ein, er ist nicht selbst die Überschrift. Die großzügige Zeilenhöhe ist der Abstand zum Titel darüber und trägt zugleich den Umbruch auf dem Telefon, wo der Satz zweizeilig steht. */ font-size: 0.75rem; line-height: 1.75rem; } /* Das Kreuz sitzt auf dunklem Grund statt auf hellem Papier — die helle Pille aus layer.css wäre darauf kontrastarm. Der Entwurf (0:2905) zeigt KEINE helle Fläche mit dunklem Kreuz, sondern umgekehrt: ein weißes Kreuz auf einem Kreis aus 20 % Weiß. Nachgesehen im ausgelieferten SVG des Knopfes, nicht am Bildschirmfoto — dort ist der Unterschied zwischen „hell" und „durchscheinend hell" auf dunkelgrünem Grund kaum zu sehen. 26 px im Quadrat wie dort, 20 px von oben und rechts. Damit bleibt es innerhalb der 56-px-Spur, die links wie rechts für die zentrierte Überschrift frei bleibt (20 + 26 = 46), und überschreitet die 24 px Mindestfläche für ein Ziel. */ .bestellpruefung__header .layer__close { top: 1.25rem; right: 1.25rem; width: 1.625rem; height: 1.625rem; background: rgb(255 255 255 / 20%); color: var(--weiss); font-size: 1.125rem; } .bestellpruefung__header .layer__close:hover { background: rgb(255 255 255 / 35%); } /* 30 px oben, 20 px an den Seiten, unten NICHTS: der Summenblock liegt außerhalb des Rumpfs und bringt seine 20 px als `margin-top` mit. Mit einer eigenen Polsterung unten am Rumpf standen beide übereinander und der Abstand zur Summe war 48 statt 20 px. */ .layer__body.bestellpruefung__body { display: flex; flex-direction: column; gap: 1.25rem; /* Zwei Klassen aus demselben Grund wie oben: `.layer__body` (layer.css) setzt `padding-right: 0.25rem` (Platz für die Bildlaufleiste des Rechtstexte-Layers) und überschrieb bei gleicher Spezifität die rechte Hälfte dieser Kurzschreibweise — die Zeilen liefen dann bis 4 px an die rechte Dialogkante, während links 20 px standen. */ padding: 1.875rem 1.25rem 0; } /* --- Knöpfe ----------------------------------------------------------------- */ .bestellpruefung__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-top: 1.25rem; /* .layer__panel trägt seit dem Kopfband keine eigene Polsterung mehr (siehe oben) — Knöpfe und AGB-Satz holen sich ihre hier zurück. */ padding: 0 1.25rem; } /* Eigenbreite, nicht gestreckt: im Entwurf sind die beiden Knöpfe 210 und 254 px breit und stehen mit `space-between` an den Rändern der 540er Spur. Mit dem alten `flex: 1 1 auto` wuchsen sie und ihre Beschriftungen standen je nach Textlänge unterschiedlich weit vom Rand. Die 1.75rem Innenpolster des Knopfes (summary.css) passen jetzt wieder — 210 + 254 = 464 von 540, der frühere Umbruch um neun Pixel kam von der 28er Polsterung des Panels. */ .bestellpruefung__actions .button { flex: 0 0 auto; } /* --- AGB-Satz --------------------------------------------------------------- Die Klasse steht hier nur als Container; der eingesetzte Klon aus overlay.js trägt selbst schon `.terms`/`.terms__note` aus summary.css. */ .bestellpruefung__legal { margin: 1.25rem 0 0; padding: 0 1.25rem 1.25rem; } /* Im Formular sitzt der Satz auf der weißen Checkout-Leiste; deren CSS nimmt ihm Fläche, Rundung und Polsterung. Der Klon verlässt diesen Kontext und bekäme die Grundform aus summary.css zurück. Im weißen Overlay-Rumpf erzeugte sie nur einen unsichtbaren Kasten mit sichtbarem Versatz: Der Entwurf (V3 EPe5QI5ceoaQdhqVjCCg9L 0:2965) setzt dort nichts als Text. */ .bestellpruefung__legal .terms { padding: 0; border-radius: 0; background: none; } /* Zentriert, anders als am Formular (Entwurf 0:2967). Nur HIER umgestellt und nicht in summary.css: der Klon trägt dieselben Klassen wie das Original, und der Satz am Formular steht in einem eigenen Figma-Rahmen, der hier nicht zur Entscheidung stand. */ .bestellpruefung__legal .terms__note { text-align: center; /* 12 px auf 16 px Zeilenhöhe (0:2967). */ line-height: 1.3333; } /* Die drei Auslöser stehen im Entwurf im Akzentgrün, nicht in der Farbe des Satzes drumherum — sie sind hier die einzigen bedienbaren Stellen zwischen lauter Bestätigungstext. Am Formular bleibt die geerbte Farbe stehen: dort umgibt sie das hellgrüne Band, und Grün auf Grün verlöre den Kontrast. */ .bestellpruefung__legal .rechtslink { color: var(--gruen-akzent); } /* Der Umbruch der Knopfreihe kommt WEIT vor dem Telefon: die beiden Knöpfe brauchen zusammen rund 480 px, die Knopfspur ist `min(90vw, 580px) - 40`. Unterhalb von rund 575 px Fensterbreite passen sie deshalb nicht mehr nebeneinander. Bis zum 03.09.2026 stand die Spaltenanordnung erst bei 480 px, und dazwischen — also auf jedem schmalen Fenster und jedem Tablet im Hochformat — brachen die Knöpfe zwar um, blieben aber beide auf ihrer Eigenbreite: der zahlungspflichtige Knopf stand dann eingerückt und zentriert mitten im Dialog statt über die volle Breite. 640 px als Grenze, nicht 575: die Knopfbreiten hängen an ihrer Beschriftung („Verbindlich buchen" ist kürzer als „Zahlungspflichtig bestellen"), und ein Baustein in `texts` kann sie jederzeit verlängern. Der Abstand nach oben ist billiger als ein zweites Mal derselbe Befund. */ @media (max-width: 640px) { .bestellpruefung__actions { /* Reihenfolge wie im Markup und im Entwurf (0:3022): "Zurück zum Formular" oben, der zahlungspflichtige Knopf unten — nicht column-reverse, das die Reihenfolge auf dem Telefon umdrehte und den Absende-Knopf über den Rückweg stellte. 10 px dazwischen wie dort. */ flex-direction: column; align-items: stretch; gap: 0.625rem; } /* Nur der zahlungspflichtige Knopf geht über die volle Breite (0:3031: `flex-[1_0_0]` in einer Reihe über die ganze Spur); "Zurück zum Formular" behält seine Eigenbreite und steht links (0:3023: `shrink-0`). Zwei gleich breite Knöpfe übereinander gäben dem Rückweg dasselbe Gewicht wie der Bestellung. */ .bestellpruefung__actions .button--ghost { align-self: flex-start; } /* `align-self` allein reichte nicht überall: `.button` ist `inline-flex`, und die Breite ist im Spaltenfluss die QUERachse — `width: 100%` sagt dasselbe noch einmal und hängt an keiner Ausrichtungsregel, die eine spätere Datei überschreiben könnte (`.button--primary` in summary.css setzt `align-self: center`). */ .bestellpruefung__actions .button--primary { align-self: stretch; width: 100%; } } @media (max-width: 480px) { dialog.layer.bestellpruefung { /* 370 px Mobil laut Entwurf. */ width: min(94vw, 370px); } /* Kopfband und Rumpf behalten ihre Maße: der Mobil-Entwurf (0:2970) polstert an genau denselben Stellen 20 px und setzt das Textfeld ebenfalls bei x = 56 an. Es gibt hier deshalb bewusst KEINE eigenen Werte mehr — die früheren (1.5rem oben, 2.25rem rechts, 1.125rem unten) waren gegenüber dem Entwurf zu groß und zudem unsymmetrisch. */ }