ist von sich aus ein Block, und * die Zeilen darin stapelt `.summary__lines` (summary.css). */ .checkout-bar__divider { width: 100%; /* 15 über der Linie; die 15 darunter kommen aus dem `gap` der Spalte, weil die Linie das letzte Kind des einklappbaren Behälters ist. */ margin: 0.9375rem 0 0; border: 0; /* Nicht Schwarz wie die Oberkante des Bandes — im Entwurf ist die Linie im Grün der Karte gesetzt (nachgemessen: #14372d). */ border-top: 1px solid var(--gruen-tief); } /* --- Der Umschalter „Details anzeigen" ----------------------------------- */ /* * Ebenfalls OHNE `display`-Regel: der Knopf ist `hidden`, solange nichts * gewählt ist (public/app.js) — es gibt dann nichts aufzuklappen. * * Er ist Flex-Kind der Spalte und damit von selbst über die volle Breite * gestreckt; zentriert wird der Text, nicht der Knopf. Das gibt nebenbei eine * Trefferfläche über die ganze Spalte statt über 113 Pixel Text. * * Die Polsterung ist eine bewusste Abweichung vom Entwurf, die keinen Pixel * bewegt: dort ist der Umschalter genau 12 Pixel hoch (Schriftgrad 12, * Zeilenhöhe 12), und ein 12 Pixel hohes Ziel ist zu klein (WCAG 2.5.8 * verlangt 24). Die 6 Pixel oben und unten werden an den Rändern wieder * herausgerechnet — oben gegen das `gap` von 15, unten samt des `gap`, denn * im Entwurf steht der Umschalter DIREKT über der Summenzeile (in beiden * Referenzbildern unabhängig nachgemessen). */ .checkout-bar__toggle { align-self: stretch; margin-top: -0.375rem; margin-bottom: -1.3125rem; padding: 0.375rem 0; border: 0; background: none; /* * #19aa81 auf Weiß kommt auf rund 2,9:1 — fetter 12-Pixel-Text braucht * 4,5:1 (Konzept §10 Nr. 22). Die Farbe steht so im Entwurf und bleibt * hier stehen; ein eigenmächtig abgedunkeltes Marken-Token wäre eine * Entscheidung, die ein Mensch trifft. Vermerkt im Übergabebericht. */ color: var(--gruen-akzent); font: inherit; font-size: 0.75rem; font-weight: 700; line-height: 0.75rem; text-align: center; cursor: pointer; } /* --- Betrag und Knopf ---------------------------------------------------- */ /* * Eine Zeile, unten ausgerichtet: der Betrag ist zweizeilig beschriftet und * damit höher als der Knopf, und im Entwurf stehen beide Grundlinien unten * bündig (Figma 0:2106). * * `flex-wrap` bleibt: Betrag und Knopf sollen umbrechen dürfen, statt sich * auf einem schmalen Schirm gegenseitig zu stauchen. Es trug bis zum * 02.09.2026 zusätzlich den Sperr-Hinweis auf eine eigene Zeile darüber — * der ist mit `cta.submit_hint` entfallen (bestellknopf.ts). */ .checkout-bar__row { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: flex-end; justify-content: space-between; } /* Der Betrag mit seiner zweizeiligen Beschriftung. `.summary__total` ist in summary.css eine Zeile (der Overlay-Block setzt den Betrag allein) — hier eine Spalte, mit 5 Pixeln zwischen Beschriftung und Betrag. */ .checkout-bar .summary__total { flex-direction: column; gap: 0.3125rem; } .checkout-bar .summary__total-label { display: flex; flex-direction: column; color: var(--grau-text); font-size: 0.875rem; font-weight: 500; } .checkout-bar .summary__total-note { font-size: 0.625rem; } /* 24 statt der 28 Pixel des Overlay-Blocks (Figma 0:2109). */ .checkout-bar .summary__total-value { font-size: 1.5rem; line-height: 2rem; } /* * `.button--primary` zentriert sich in summary.css selbst in der Flex-Spalte * der Karte — in dieser Zeile stünde er damit mittig statt unten bündig. * Die seitliche Polsterung ist im Entwurf schmaler als die 28 Pixel des * Knopfes im Formular. * * Die Fläche bleibt `--pink-schrift` (#d6008c) und wird NICHT auf die * #f100a0 des Entwurfs gesetzt: weiße Schrift darauf erreicht nur 4,00:1 * (Konzept §10 Nr. 22), und dieser Knopf ist fetter 14-Pixel-Text. */ .checkout-bar__row .button { align-self: flex-end; /* * Der Knopf steht rechts — auch, wenn er unter 340 Pixeln Bandbreite neben * dem Betrag keinen Platz mehr hat und in eine eigene Zeile rutscht. Dort * verteilt `justify-content: space-between` nichts mehr, weil nur noch ein * Element auf der Zeile steht; der automatische Anfangsrand schiebt ihn * trotzdem an die rechte Kante der Spalte. Steht er neben dem Betrag, * ändert die Zeile nichts. */ margin-inline-start: auto; padding-inline: 0.9375rem; /* * Die 16 Pixel Zeilenhöhe des Entwurfs. `.button` in summary.css deklariert * sie zwar (`line-height: 1.143`), aber VOR `font: inherit` — und die * Kurzform setzt die Zeilenhöhe auf den geerbten Wert zurück. Sichtbar ist * das nirgends (`min-height: 40px` bestimmt die Knopfhöhe, der Text steht * mittig), deshalb steht die Korrektur hier und nicht in summary.css: dort * änderte sie auch den Knopf im Bestellprüfungs-Overlay. */ line-height: 1.1429; } /* --- AGB-Satz ------------------------------------------------------------ */ /* * `.terms` bringt weißen Grund und einen Radius mit — entworfen gegen den * grünen Summenblock im Formular. Auf dem weißen Band ist beides unsichtbar * und die Polsterung verschöbe nur den Satz. Die Klasse selbst bleibt * unangetastet: der Klon im Bestellprüfungs-Overlay benutzt sie. */ .checkout-bar .terms { padding: 0; border-radius: 0; background: none; } .checkout-bar .terms__note { padding: 0; line-height: 1.3333; text-align: center; }