@bytebrand/fe-ui-core-autobahn 1.0.153 → 1.0.155

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.153",
+  "version": "1.0.155",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",

package/theme/md3.css

@@ -1491,6 +1491,10 @@ line-height: 31px;
   line-height: 15px;
   color: #44464F;
   margin-bottom: 2px;
+  /* long submodels (e.g. "C4 1.2 Plus/Rückfahrkamera/Sitzheizung/Tempomat") use "/" instead of
+     spaces between items, so the browser's default word-wrap sees one unbreakable "word" and
+     overflows past the 296px aside instead of wrapping (ADV-238). */
+  overflow-wrap: break-word;
 }
 .md3 .co-aside-finance {
   font-family: 'Arial';
@@ -1653,6 +1657,7 @@ line-height: 31px;
   font-size: 11px;
   line-height: 150%;
   color: #5B6B7F;
+  text-align: justify;
 }
 .md3 .co-footer-inner p b {
   font-weight: 700;
@@ -2400,7 +2405,7 @@ line-height: 31px;
 .md3 .co-form {
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 20px;
   padding-bottom: 20px;
   border-bottom: 1px solid #C5C6D2;
 }
@@ -2418,10 +2423,19 @@ line-height: 31px;
 .md3 .co-form.co-form--payment-details {
   border-bottom: 0;
 }
-/* order-overview step only — same reasoning, see OrderOverviewNext.tsx's "co-form oo-page". */
+/* order-overview step only — same reasoning, see OrderOverviewNext.tsx's "co-form oo-page".
+   gap also overridden to the shared ≤600px value (14px) at ALL widths, desktop included, per
+   explicit request — the base .co-form's 20px (every other checkout step, except
+   additional-services below) is untouched. */
 .md3 .co-form.oo-page {
+  gap: 14px;
   border-bottom: 0;
 }
+/* additional-services step only — see AdditionalServicesNext.tsx's "co-form co-form--additional-
+   services". Same reasoning/value as .oo-page above, desktop included, per explicit request. */
+.md3 .co-form.co-form--additional-services {
+  gap: 14px;
+}
 .md3 .co-step-title {
   font: 700 22px var(--md-font-display, var(--md-font));
   margin: 0;
@@ -2923,6 +2937,13 @@ line-height: 31px;
   height: 48px;
   padding: 0 40px 0 10px;
 }
+/* ADV-238: mandatory-but-empty Geburtsdatum must show the same red border as the other
+   required fields. Same specificity as the rule above (two classes) so it only wins because
+   it comes later in source order — .co-personal-grid .mfield--error can't reach in here, its
+   border gets overridden by .co-birthdate .mfield right above for the same reason. */
+.md3 .co-birthdate .mfield--error {
+  border: 1px solid #BA1A1A;
+}
 /* on-the-border notch, matching .mfield-label--notch exactly (same mechanic as Vorwahl/
    Telefonnummer's own label) instead of the earlier stacked-inside-the-box layout. */
 .md3 .co-birthdate .mfield-label {
@@ -3090,6 +3111,25 @@ line-height: 31px;
 .md3 .co-borrower-relationship .mselect-btn {
   position: relative;
 }
+/* ADV-240 QA (comment 35891): mandatory-but-empty red border — Dropdown has no built-in visual
+   error state, so this keys off the `is-error` wrapper class PaymentDetailsNext.tsx adds. Three
+   classes deep so it outranks both the base .mselect-btn idle box-shadow and this file's own
+   .co-borrower-relationship .mselect-btn above without needing !important. */
+.md3 .co-borrower-relationship.is-error .mselect-btn {
+  box-shadow: inset 0 0 0 1px #BA1A1A;
+}
+/* same chevron glyph as the ::after above, just stroke='%23BA1A1A' (red) instead of '%23005CFF'. */
+.md3 .co-borrower-relationship.is-error .mselect-btn::after {
+  background-image: url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M4%206L8%2010L12%206'%20stroke='%23BA1A1A'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+/* .co-borrower-relationship .mselect-btn:hover below is the SAME specificity (3 classes) as the
+   .is-error border rule above and comes later in the file, so hovering an errored field was
+   winning the box-shadow back to idle gray. One more class (:hover added to .is-error's own
+   selector) outranks it regardless of source order — same fix shape as the co-birthdate
+   :focus-within override above. */
+.md3 .co-borrower-relationship.is-error .mselect-btn:hover {
+  box-shadow: inset 0 0 0 1px #BA1A1A;
+}
 .md3 .co-borrower-relationship .mselect-btn:hover {
   box-shadow: inset 0 0 0 1px var(--md-outline-variant);
 }
@@ -3558,6 +3598,35 @@ line-height: 31px;
   color: #1A1B22;
   background: #FFFFFF;
 }
+/* ADV-249 QA: Lieferadresse's "Abweichende Lieferadresse" form had no validation at all — this
+   is its red error state, same red as .co-error (--md-error). Each field is now wrapped in
+   .co-addr-form-item (the actual grid cell) so a per-field hint can sit directly under its own
+   input instead of one generic message for the whole form. */
+.md3 .co-addr-form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.md3 .co-addr-form-field.is-error {
+  border-color: var(--md-error);
+}
+/* native focus outline stacked on top of the red border looked like two rings at once
+   (browser default blue + our red) — same inset-ring swap as .mtextarea:focus, red instead of
+   blue while the field is still invalid. */
+.md3 .co-addr-form-field:focus {
+  outline: 0;
+  box-shadow: inset 0 0 0 2px #005CFF;
+}
+.md3 .co-addr-form-field.is-error:focus {
+  box-shadow: inset 0 0 0 2px var(--md-error);
+}
+.md3 .co-addr-field-hint {
+  color: var(--md-error);
+  font-family: 'Arimo';
+  font-size: 12px;
+  line-height: 14px;
+}
 .md3 .co-addr-form-actions {
   grid-column: 1 / -1;
   display: flex;
@@ -4608,79 +4677,189 @@ line-height: 31px;
     border-left: 0 !important;
   }
 }
-/* "5. Monatlich zu zahlen" / "5. Gesamtpreis" (Figma 63794:27213 / 63898:29799 / 63895:9796) — the
-   rate hero (.oo-mzz-price-row down to .cf-rate-old) intentionally reuses CheckoutFinancePanelNext's
-   own .cf-rate-row/.cf-rate-amount/.cf-rate-side/.cf-rate-unit/.cf-rate-old (global) plus its
-   .pp-eyebrow/.pp-eyebrow-badge/.pp-uvp-tooltip/.fin-eval-* rules (scoped to .cf-panel) — the JSX
-   wraps this card's price block in a bare <div className="cf-panel"> (display:flex/column only, no
-   box styling of its own) purely so those already-pixel-verified scoped rules apply here too
-   (including .pp-uvp-tooltip's own left-anchor fix, further up this file). */
-.md3 .oo-mzz-rate-label {
-  font-family: Arial;
-  font-size: 13px;
-  line-height: 1.4;
-  color: var(--md-on-surface-variant);
+/* "5. Monatlich zu zahlen" / "5. Gesamtpreis" (Figma: Finanzierung 64763:107263, Leasing
+   64794:110315, Kaufen 64794:109673) — own "oo-pay-*" namespace, NOT the shared
+   .cf-rate-row/.fin-eval-* classes CheckoutFinancePanelNext.tsx (step 3) uses: that component
+   still renders the OLDER rate-hero pattern, and this card's Figma ("auto.de / Price Block") is
+   a newer, differently-proportioned design (54px/38px amounts, different UVP layout) — reusing
+   the old shared classes here would either look wrong or risk step 3 regressions if tweaked to
+   fit. EvalBar is still the shared component (only the pill/bar's own wrapper sizing is new). */
+.md3 .oo-pay-rate {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+/* Mobile-only condensed line under the price block (Figma: 63571:28425 financing / 64794:110041
+   leasing) — see .show-mobile below for the display toggle. */
+.md3 .oo-pay-mobile-summary {
   margin: 0;
+  font-family: Arimo, Arial, sans-serif;
+  font-size: 13px;
+  color: #0E2238;
+  width: 100%;
 }
-.md3 .oo-mzz-price-row {
+.md3 .oo-pay-price-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   width: 100%;
 }
-/* Kaufen only — UVP-struck price sits ABOVE the flat total (right-aligned column), unlike
-   Financing/Leasing where it sits beside the rate in .cf-rate-side. */
-.md3 .oo-mzz-uvp-col {
+.md3 .oo-pay-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+  min-width: 0;
+}
+.md3 .oo-pay-amount {
+  font-family: Arimo, Arial, sans-serif;
+  font-weight: 700;
+  font-size: 54px;
+  line-height: 58px;
+  color: #005CFF;
+  white-space: nowrap;
+}
+.md3 .oo-pay-secondary {
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
   gap: 2px;
+  align-items: flex-start;
 }
-.md3 .oo-mzz-uvp-row {
+.md3 .oo-pay-uvp-row {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 3px;
 }
-.md3 .oo-mzz-uvp-label {
-  font-family: Arial;
+.md3 .oo-pay-uvp-label {
+  font-family: Arimo, Arial, sans-serif;
+  font-size: 11px;
+  color: #0E2238;
+  white-space: nowrap;
+}
+/* Buy's own "UVP" label (17.14px, no footnote circle immediately after it — the circle sits
+   after the struck amount instead) — kept separate from .oo-pay-uvp-label (11px, financing/
+   leasing) since the two aren't the same text node in Figma. */
+.md3 .oo-pay-buy-uvp-label {
+  font-family: Arimo, Arial, sans-serif;
   font-size: 17px;
-  line-height: normal;
-  /* Figma's "text-primary" token (#0e2238) — NOT var(--md-on-surface)/"text/strong" (#1a1b22),
-     same distinction as .oo-mzz-cond below; matches the literal #0E2238 already hardcoded on
-     .cf-rate-old/.co-card-title/.cf-panel .co-aside-cond elsewhere in this file. */
   color: #0E2238;
+  white-space: nowrap;
 }
-.md3 .oo-mzz-total-amount {
-  font-family: 'Arial';
-  font-weight: 700;
-  font-size: 46px;
-  line-height: 52px;
+.md3 .oo-pay-footnote {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 13px;
+  height: 13px;
+  border-radius: 999px;
+  border: 1px solid #005CFF;
+  background: #FFFFFF;
+  font-family: Arimo, Arial, sans-serif;
+  font-size: 7px;
   color: #005CFF;
 }
-.md3 .oo-mzz-price-wrap {
-  margin-top: 6px;
+/* Buy's "①" next to the big price — plain text, no circle (Figma: no border/background on that
+   node, unlike .oo-pay-footnote's "②"/"③"). */
+.md3 .oo-pay-footnote-plain {
+  font-family: Arimo, Arial, sans-serif;
+  font-size: 9px;
+  color: #005CFF;
 }
-/* auto.de / Price Rating is 120px wide in this card (vs. the shared .fin-eval-pill/-bar's other,
-   narrower usages elsewhere on the site) — scoped here rather than touching those shared base
-   rules. .fin-eval-bar already has width:100%, so sizing the -cell wrapper is enough for the bar;
-   the pill itself needs an explicit box since it only auto-sizes to its text otherwise. */
-.md3 .oo-mzz-price-wrap .fin-eval-pill--good {
-  width: 120px;
-  height: 28px;
+/* Struck UVP amount — same mechanism as the shared .cf-rate-old::after (red bar, -10deg), kept
+   as its own rule since .cf-rate-old itself is step 3's shared class (see file header above). */
+.md3 .oo-pay-uvp-amount {
+  position: relative;
+  display: inline-block;
+  font-family: Arimo, Arial, sans-serif;
+  font-size: 20px;
+  color: #0E2238;
+  white-space: nowrap;
+}
+.md3 .oo-pay-uvp-amount::after {
+  content: '';
+  position: absolute;
+  left: -2px;
+  right: -2px;
+  top: 50%;
+  height: 2px;
+  background: #D92D20;
+  transform: rotate(-10deg);
+  transform-origin: center;
 }
-.md3 .oo-mzz-price-wrap .fin-eval-bar-cell {
+.md3 .oo-pay-unit {
+  font-family: Arimo, Arial, sans-serif;
+  font-weight: 700;
+  font-size: 18px;
+  color: #5B6B7F;
+}
+.md3 .oo-pay-rating-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  flex: none;
   width: 120px;
 }
-.md3 .oo-mzz-cond {
-  margin: 6px 0 0;
-  font-family: Arial;
+/* Buy's price block uses its own 108px rating column (Figma: 64794:109673 desktop and 64833:89153
+   mobile both specify 108px, not 120px) — same value at both breakpoints, unlike Financing/
+   Leasing's column which only changes WIDTH BEHAVIOUR (fixed → flexible) on mobile, not this
+   number, so this rule isn't itself inside a media query. */
+.md3 .oo-pay-rating-col--buy {
+  width: 108px;
+}
+.md3 .oo-pay-rating-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 5px 10px;
+  border-radius: 16px;
+  box-sizing: border-box;
+  font-family: Arimo, Arial, sans-serif;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+.md3 .oo-pay-rating-bar {
+  width: 100%;
+}
+/* Buy's price block — right-aligned column (UVP above, big price below), unlike Financing/
+   Leasing's side-by-side .oo-pay-left/.oo-pay-secondary. */
+.md3 .oo-pay-buy-price-col {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+.md3 .oo-pay-buy-uvp-row {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.md3 .oo-pay-buy-leftgroup {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+}
+.md3 .oo-pay-buy-amount {
+  font-family: Arimo, Arial, sans-serif;
+  font-weight: 700;
+  font-size: 38px;
+  line-height: 52px;
+  color: #005CFF;
+  white-space: nowrap;
+}
+.md3 .oo-pay-cond {
+  margin: 0;
+  font-family: Arimo, Arial, sans-serif;
   font-size: 13px;
-  line-height: normal;
-  /* Figma's "text-primary" (#0e2238), not "text/strong" — see .oo-mzz-uvp-label above. */
   color: #0E2238;
 }
-.md3 .oo-mzz-cond-link {
+.md3 .oo-pay-cond-link {
   background: none;
   border: 0;
   padding: 0;
@@ -4690,137 +4869,296 @@ line-height: 31px;
   text-decoration: underline;
   cursor: pointer;
 }
-.md3 .oo-mzz-row {
+.md3 .oo-pay-row {
   display: flex;
   align-items: flex-start;
   width: 100%;
-  margin-top: 12px;
 }
-/* Kaufen only — single list (no left/right KV split), Figma's own "list" node. */
-.md3 .oo-mzz-buy-list {
+.md3 .oo-pay-col-left {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  width: 100%;
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid var(--md-outline-variant);
+  flex: none;
+  width: 266px;
+  padding-right: 20px;
   box-sizing: border-box;
+  font-family: Arimo, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.4;
 }
-.md3 .oo-mzz-kv-col {
+.md3 .oo-pay-col-right {
   display: flex;
   flex-direction: column;
+  gap: 10px;
   flex: 1 0 0;
   min-width: 0;
+  padding-left: 20px;
+  box-sizing: border-box;
+  font-family: Arimo, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.4;
 }
-.md3 .oo-mzz-kv-col--left {
-  gap: 8px;
-  padding-right: 24px;
-}
-.md3 .oo-mzz-kv-col--right {
-  gap: 10px;
-  padding-left: 24px;
-}
-.md3 .oo-mzz-kv-rule {
+.md3 .oo-pay-divider {
   flex: none;
   align-self: stretch;
   width: 1px;
-  background: var(--md-outline-variant);
+  background: #C5C6D2;
 }
-.md3 .oo-mzz-kv-row {
+.md3 .oo-pay-kv-row {
   display: flex;
   align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
+  gap: 8px;
   width: 100%;
-  font-family: Arial;
-  font-size: 14px;
-  line-height: 1.4;
 }
-.md3 .oo-mzz-kv-label {
+/* Left column: short fixed label, value fills/right-aligns. Right column: label fills/wraps,
+   value stays fixed — same inversion Figma itself uses between the two columns. */
+.md3 .oo-pay-kv-row--left .oo-pay-kv-label {
+  flex: none;
+  white-space: nowrap;
+}
+.md3 .oo-pay-kv-row--left .oo-pay-kv-value {
   flex: 1 0 0;
   min-width: 0;
-  color: var(--md-on-surface-variant);
+  text-align: right;
 }
-.md3 .oo-mzz-kv-value {
+.md3 .oo-pay-kv-row--right {
+  gap: 12px;
+  align-items: center;
+}
+.md3 .oo-pay-kv-row--right .oo-pay-kv-label {
+  flex: 1 0 0;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.md3 .oo-pay-kv-row--right .oo-pay-kv-value {
+  flex: none;
+  text-align: right;
+}
+/* Icon rows (Anschluss-Garantie / Rundum-Sorglos) invert the Fahrzeugrate row's flex roles in
+   Figma: there the LABEL is the fixed, non-wrapping element (shrink-0 whitespace-nowrap) and the
+   VALUE flexes/right-aligns into the remaining space — not the other way around, which is what
+   made the long "2 Jahre Anschluss-Garantie"/icon combination wrap onto a second line. */
+.md3 .oo-pay-kv-row--icon .oo-pay-kv-label {
   flex: none;
-  color: var(--md-on-surface);
   white-space: nowrap;
 }
-.md3 .oo-mzz-kv-row--total .oo-mzz-kv-label,
-.md3 .oo-mzz-kv-row--total .oo-mzz-kv-value {
-  font-weight: 700;
-  color: var(--md-on-surface);
+.md3 .oo-pay-kv-row--icon .oo-pay-kv-value {
+  flex: 1 0 0;
+  min-width: 0;
+  white-space: nowrap;
 }
-.md3 .oo-mzz-kv-hr {
+.md3 .oo-pay-kv-label {
+  color: #44464F;
+}
+.md3 .oo-pay-kv-value {
+  color: #1A1B22;
+}
+.md3 .oo-pay-info-icon {
+  flex: none;
+}
+/* Same "open the Garantie explainer in a new tab" onClick behaviour as the Zulassung card's
+   info trigger elsewhere in OrderOverviewNext.tsx — unstyled button wrapper so the icon keeps
+   its inline position in the kv-label. */
+.md3 .oo-pay-info-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 18px;
+  height: 18px;
+  background: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  line-height: 0;
+  cursor: pointer;
+}
+.md3 .oo-pay-rule-h {
   width: 100%;
   height: 1px;
   border: 0;
   margin: 0;
-  background: var(--md-outline-variant);
+  background: #C5C6D2;
 }
-.md3 .oo-mzz-note {
-  margin: 12px 0 0;
-  font-family: Arial;
+.md3 .oo-pay-total-row {
+  display: flex;
+  align-items: baseline;
+  gap: 3px;
+  width: 100%;
+  font-family: Arimo, Arial, sans-serif;
+  font-weight: 700;
+  font-size: 14px;
+  color: #1A1B22;
+}
+.md3 .oo-pay-total-row .oo-pay-kv-label {
+  color: #1A1B22;
+}
+.md3 .oo-pay-total-row .oo-pay-kv-value {
+  flex: 1 0 0;
+  text-align: right;
+  color: #1A1B22;
+}
+.md3 .oo-pay-vat-line {
+  margin: 0;
+  font-family: Arimo, Arial, sans-serif;
   font-size: 13px;
+  color: #44464F;
+  width: 100%;
+}
+.md3 .oo-pay-kaufpreis {
+  width: 100%;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #AAB3BF;
+  box-sizing: border-box;
+}
+.md3 .oo-pay-kaufpreis p {
+  margin: 0;
+  font-family: Arimo, Arial, sans-serif;
+  font-size: 15px;
+  line-height: 1.35;
+  color: #0E2238;
+}
+/* Kaufen only — single list (no left/right KV split), Figma's own "list" node. */
+.md3 .oo-pay-buy-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  padding-top: 12px;
+  border-top: 1px solid #C5C6D2;
+  box-sizing: border-box;
+  font-family: Arimo, Arial, sans-serif;
+  font-size: 14px;
   line-height: 1.4;
-  color: var(--md-on-surface);
 }
-.md3 .oo-mzz-hinweis {
+.md3 .oo-pay-buy-row {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  width: 100%;
+}
+.md3 .oo-pay-buy-row--icon {
+  align-items: center;
+}
+.md3 .oo-pay-buy-row .oo-pay-kv-label {
+  flex: 1 0 0;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.md3 .oo-pay-buy-row .oo-pay-kv-value {
+  flex: none;
+  text-align: right;
+}
+/* Same Figma inversion as .oo-pay-kv-row--icon above: icon rows fix the label and flex the value. */
+.md3 .oo-pay-buy-row--icon .oo-pay-kv-label {
+  flex: none;
+  white-space: nowrap;
+}
+.md3 .oo-pay-buy-row--icon .oo-pay-kv-value {
+  flex: 1 0 0;
+  min-width: 0;
+  white-space: nowrap;
+}
+.md3 .oo-pay-buy-total {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  width: 100%;
+  font-weight: 700;
+  color: #1A1B22;
+}
+.md3 .oo-pay-buy-total .oo-pay-kv-label {
+  flex: 1 0 0;
+  color: #1A1B22;
+}
+.md3 .oo-pay-buy-total .oo-pay-kv-value {
+  flex: none;
+  color: #1A1B22;
+}
+.md3 .oo-pay-hinweis {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
-  margin-top: 12px;
   padding: 12px 14px;
   border-radius: 12px;
   background: #F4F5FA;
   box-sizing: border-box;
 }
-.md3 .oo-mzz-hinweis svg {
+.md3 .oo-pay-hinweis svg {
   flex: none;
 }
-.md3 .oo-mzz-hinweis-text {
-  flex: 1 0 0;
-  min-width: 0;
-  font-family: Arial;
-  font-size: 13px;
-  line-height: 1.4;
-  color: var(--md-on-surface-variant);
-  margin: 0;
-}
-.md3 .oo-mzz-hinweis-link {
+.md3 .oo-pay-hinweis-link {
   flex: none;
   background: none;
   border: 0;
   padding: 0;
-  font-family: Arial;
+  font-family: Arimo, Arial, sans-serif;
   font-weight: 700;
   font-size: 13px;
-  line-height: 1.4;
-  color: var(--md-primary);
+  color: #005CFF;
   cursor: pointer;
 }
-.md3 .oo-mzz-hinweis-link:hover {
+.md3 .oo-pay-hinweis-link:hover {
   text-decoration: underline;
 }
-@media (max-width: 800px) {
-  .md3 .oo-mzz-price-row {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-  }
-  .md3 .oo-mzz-row {
-    flex-direction: column;
-    gap: 12px;
+/* Figma's "CK / Content" wrapper holds rate/row(-or-buy-list)/kaufpreis(-or-vat-line)/hinweis in
+   a flex-col with gap:12px — .co-card itself isn't a flex container, so that inter-section gap
+   has to be reproduced as margin-top on each section that can follow .oo-pay-rate. */
+.md3 .co-card > .oo-pay-row,
+.md3 .co-card > .oo-pay-buy-list,
+.md3 .co-card > .oo-pay-kaufpreis,
+.md3 .co-card > .oo-pay-vat-line,
+.md3 .co-card > .oo-pay-hinweis {
+  margin-top: 12px;
+}
+/* Leasing only: "inkl. 19 % MwSt." is grouped with Monatliche Gesamtbelastung in its own
+   gap-[12px] sub-wrapper in Figma, not the surrounding .oo-pay-col-right's gap:10px. */
+.md3 .oo-pay-col-right .oo-pay-vat-line {
+  margin-top: 2px;
+}
+/* 600px to match the project-wide .show-mobile/.hide-mobile breakpoint (and the real Figma mobile
+   frames: 63571:28425 financing / 64794:110041 leasing / 64833:89153 buy) — the earlier 800px
+   generic-reflow rule guessed at a mobile layout before those frames existed; this replaces it. */
+@media (max-width: 600px) {
+  /* Figma mobile swaps which side of the price row grows: the rating column flexes/shrinks and
+     the price+UVP group stays at its natural width, the reverse of desktop's fixed 120px rating
+     column + flexible price group. Buy's own price row (.oo-pay-buy-price-col/-leftgroup, 108px
+     rating column) is unchanged between breakpoints, hence the :not() scope. */
+  .md3 .oo-pay-left {
+    flex: none;
   }
-  .md3 .oo-mzz-kv-col--left,
-  .md3 .oo-mzz-kv-col--right {
-    padding: 0;
+  .md3 .oo-pay-rating-col:not(.oo-pay-rating-col--buy) {
+    flex: 1 0 0;
+    min-width: 0;
+    width: auto;
   }
-  .md3 .oo-mzz-kv-rule {
+  /* The desktop two-column Laufzeit/Anzahlung/… | Fahrzeugrate/Garantie/RSP/… layout collapses
+     into a single full-width list on mobile — col-left and the vertical divider disappear, and
+     col-right (unchanged content, already exactly Figma's mobile "list") picks up the divider's
+     old job as a border-top + padding-top instead of a padding-left. Figma's mobile "list" node
+     also uses gap:8px row-to-row, not the desktop "rechts" column's gap:10px — same 8px buy's
+     own (unchanged) list already uses. */
+  .md3 .oo-pay-col-left,
+  .md3 .oo-pay-divider {
     display: none;
   }
+  .md3 .oo-pay-col-right {
+    width: 100%;
+    gap: 8px;
+    padding-left: 0;
+    padding-top: 12px;
+    border-top: 1px solid #C5C6D2;
+    box-sizing: border-box;
+  }
+  .md3 .oo-pay-hinweis {
+    align-items: flex-start;
+  }
 }
 .md3 .oo-car {
   display: flex;
@@ -4997,11 +5335,15 @@ line-height: 31px;
    muted gray as the body copy (var(--md-on-surface-variant) === Figma's var(--text/muted,
    #44464f) fallback exactly), not the design system's usual blue link color (.oo-underline,
    used elsewhere), so links here are styled with underline only. No border per explicit
-   request. Sits below .oo-next (order-overview's own bottom bar) — a spot this exact node
-   isn't shown at in Figma (its own component description has it above the buy button instead),
-   so this margin-top is this page's own established gap rhythm, not a value read off the design. */
+   request. Sits right after card 10, at the very bottom of the card stack (before .oo-next) on
+   both desktop and mobile per explicit request — a spot this exact node isn't shown at in Figma
+   (its own component description has it above the buy button instead). margin: 0 (not just
+   margin-top) per explicit request — a bare <p> otherwise keeps the UA stylesheet's default
+   margin-top AND margin-bottom (~1em each), which was still showing even after margin-top alone
+   was removed. Spacing on every side now comes only from the parent .co-form.oo-page's own flex
+   gap (14px), same as every other direct child in this step. */
 .md3 .oo-legal-notice {
-  margin-top: 16px;
+  margin: 0;
   font-family: Arial;
   font-size: 13px;
   line-height: 1.5;
@@ -5020,7 +5362,6 @@ line-height: 31px;
   display: flex;
   align-items: center;
   gap: 16px;
-  margin-top: 24px;
   padding-top: 18px;
   border-top: 1px solid #C5C6D2;
 }
@@ -5080,6 +5421,24 @@ line-height: 31px;
   }
   .md3 .oo-buy-btn {
     width: 100%;
+    height: 48px;
+    font-size: 24px;
+  }
+  /* Figma 63492:4515 ("auto.de / Checkout CTA Bar") — mobile only, per explicit request: only
+     the full-width buy button remains visible (Zurück/Schritt X already hidden above), so .oo-next
+     itself becomes just that button's own white, padded shell instead of the desktop 3-up row.
+     margin: 0 -23px breaks it out of .contentWrapper.nextLayout's own 23px mobile side padding
+     (CheckoutPage.styl) for a true full-bleed white bar + top border — exact same technique/value
+     already proven for .co-next's identical breakout a few hundred lines up in this file; that
+     padding's parent (.contentContainer) already has overflow:visible at this width for exactly
+     this purpose, so nothing else needs touching. */
+  .md3 .oo-next {
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 0 -23px;
+    gap: 8px;
+    padding: 24px 16px;
+    background: #FFFFFF;
   }
 }
 @media (max-width: 800px) {
@@ -5092,9 +5451,13 @@ line-height: 31px;
    800px the row collapses to 4 full-width stacked rows (adding "Hinweise zur Beschaffenheit"),
    each divided by a horizontal rule instead — unlike .oo-ls-row's mobile stack, this card's own
    Figma mobile variant keeps dividers between every row, so it can't reuse .oo-ls-cell as-is. */
+/* .oo-fb-notes is now a 4th (conditional) child of .oo-fb-row instead of a separate sibling —
+   flex-wrap + its own flex-basis:100% drops it to its own full-width line on desktop, same as
+   before; on mobile (below) the row becomes one plain stacked column so wrap no longer matters. */
 .md3 .oo-fb-row {
   display: flex;
   align-items: flex-start;
+  flex-wrap: wrap;
   gap: 20px;
 }
 .md3 .oo-fb-cell {
@@ -5105,15 +5468,15 @@ line-height: 31px;
 }
 .md3 .oo-fb-row .oo-fb-cell {
   flex: 1 0 0;
-  padding: 0 20px;
 }
-.md3 .oo-fb-row .oo-fb-cell:first-child {
-  padding-left: 0;
-}
-.md3 .oo-fb-row .oo-fb-cell:last-child {
-  padding-right: 0;
-}
-.md3 .oo-fb-row .oo-fb-cell:not(:first-child) {
+/* Figma (64755:99667) has no padding on the cells themselves — the 41px total gap between two
+   cells' content is the row's own 20px gap, a 1px divider, then another 20px gap, modelled here
+   as a border-left (no extra divider element needed) plus 20px padding-left so the border doesn't
+   sit flush against the next cell's icon. Padding on every cell (both sides) double-counted with
+   the row gap and made the gap 61px instead of 41px. Excludes .oo-fb-notes — that one gets its own
+   full-width/horizontal-divider treatment below, never this vertical one. */
+.md3 .oo-fb-row .oo-fb-cell:not(:first-child):not(.oo-fb-notes) {
+  padding-left: 20px;
   border-left: 1px solid var(--md-outline-variant);
 }
 .md3 .oo-fb-cell svg {
@@ -5143,20 +5506,37 @@ line-height: 31px;
   color: var(--md-on-surface-variant);
   overflow-wrap: break-word;
 }
-.md3 .oo-fb-notes {
+.md3 .oo-fb-row .oo-fb-cell.oo-fb-notes {
+  flex-basis: 100%;
   width: 100%;
   margin-top: 14px;
   padding-top: 14px;
   border-top: 1px solid var(--md-outline-variant);
 }
-@media (max-width: 800px) {
+/* Mobile (Figma 63571:28484 used-car / 64800:111786 new-car, 3 rows, no Hinweise): the 3-cell row
+   + separate full-width notes strip both collapse into ONE vertical list — every item gets the
+   same icon+text row with a horizontal divider, first row has no top border/padding, last row has
+   no bottom padding. :last-child picks whichever row (Fahrzeughalter or Hinweise) actually ends up
+   last, since .oo-fb-notes is a real (conditionally-rendered) child of .oo-fb-row now, not a
+   sibling CSS couldn't reach from here. 600px to match the project-wide mobile breakpoint — this
+   used to be 800px, a guess from before any mobile Figma frame for this card existed. */
+@media (max-width: 600px) {
   .md3 .oo-fb-row {
     flex-direction: column;
+    flex-wrap: nowrap;
     gap: 0;
   }
   .md3 .oo-fb-row .oo-fb-cell {
+    flex-basis: auto;
     width: 100%;
     padding: 12px 0;
+  }
+  /* Same selector (and so the same specificity) as the desktop vertical-divider rule above —
+     .oo-fb-row .oo-fb-cell{border-left:0} alone is LESS specific than that :not():not() rule
+     (5 selector components vs 3), so it was silently losing to it and leaving the desktop
+     border-left:1px/padding-left:20px active on mobile, stacked on top of the new border-top. */
+  .md3 .oo-fb-row .oo-fb-cell:not(:first-child):not(.oo-fb-notes) {
+    padding-left: 0;
     border-left: 0;
   }
   .md3 .oo-fb-row .oo-fb-cell:first-child {
@@ -5165,7 +5545,15 @@ line-height: 31px;
   .md3 .oo-fb-row .oo-fb-cell:not(:first-child) {
     border-top: 1px solid var(--md-outline-variant);
   }
-  .md3 .oo-fb-notes {
+  .md3 .oo-fb-row .oo-fb-cell:last-child {
+    padding-bottom: 0;
+  }
+  /* Same specificity as the desktop .oo-fb-row .oo-fb-cell.oo-fb-notes rule (not just .oo-fb-notes
+     alone) — otherwise that rule's margin-top:14px/flex-basis:100%/width:100% would still win here
+     even inside this media query, since media nesting doesn't change specificity. */
+  .md3 .oo-fb-row .oo-fb-cell.oo-fb-notes {
+    flex-basis: auto;
+    width: 100%;
     margin-top: 0;
     padding-top: 12px;
   }
@@ -5460,15 +5848,7 @@ line-height: 31px;
    the JSX, not here. Both graphic blocks (the EU statutory-warranty notice, the GARAN
    certificate) are static images, not hand-coded — see the long comment above WARRANTY_NOTICE_IMG
    in OrderOverviewNext.tsx for why (Figma ships them fully vector-flattened). */
-/* same fix as .oo-promo-card above — .co-card-title's shared margin-bottom:16px leaves a
-   stray gap under the title when the card is collapsed; .oo-warranty-body's own margin-top
-   restores that 16px only once actually expanded (both cards default expanded, but the user can
-   still collapse them). */
-.md3 .oo-warranty-card .co-card-title {
-  margin-bottom: 0;
-}
 .md3 .oo-warranty-body {
-  margin-top: 16px;
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -5476,13 +5856,61 @@ line-height: 31px;
 .md3 .oo-warranty-notice-img {
   display: block;
   width: 100%;
-  max-width: 400px;
+  max-width: 331px; /* Figma desktop (node 64763:84703): "Amtliche Mitteilung" 330.5x467.4, not stretched */
   height: auto;
 }
+@media (max-width: 600px) {
+  .md3 .oo-warranty-notice-img {
+    max-width: 251px; /* Figma mobile (node 64850:108036): 251.2x355.2 */
+  }
+}
+/* Card 9 only — its image+link are centered (Figma: items-center). Card 10's open-state image+
+   link are left-aligned (Figma: both sit at x=0 in their 572px-wide content), so this centering
+   must NOT live on the shared .oo-warranty-notice-img/.oo-warranty-link rules themselves. */
+.md3 .oo-warranty-body--centered .oo-warranty-notice-img,
+.md3 .oo-warranty-body--centered .oo-warranty-link {
+  align-self: center;
+}
 .md3 .oo-warranty-garan-img {
   display: block;
   width: 100%;
-  max-width: 320px;
+  max-width: 320px; /* Figma (node 64669:36509): "vollständig" label, 320x336.8 */
+  height: auto;
+}
+@media (max-width: 600px) {
+  .md3 .oo-warranty-garan-img {
+    /* Figma (node 64669:105484, dev-mode inspect): 215x226.31, centered — desktop (64669:36509)
+       is left-aligned at 320px; mobile is centered and narrower, a real per-breakpoint
+       difference in the file, not a mistake. */
+    max-width: 215px;
+  }
+  /* .oo-warranty-garan-img-wrap (the role="img" host) is the actual flex child of
+     .oo-warranty-body — align-self on .oo-warranty-garan-img itself (a grandchild) would be a
+     no-op. */
+  .md3 .oo-warranty-garan-img-wrap {
+    align-self: center;
+  }
+  /* Card 10's "Weitere Informationen" link is left-aligned on desktop (confirmed, node
+     64669:36509) but centered on mobile along with the image above it — same real
+     per-breakpoint difference, not scoped via .oo-warranty-body--centered since that's card 9's
+     own (desktop-centered-too) modifier. */
+  .md3 .oo-warranty-link {
+    align-self: center;
+  }
+}
+.md3 .oo-warranty-garan-strip-btn {
+  display: block;
+  width: 208px; /* Figma (node 64535:6410): "nested display" strip, 208x32 */
+  max-width: 100%;
+  background: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+.md3 .oo-warranty-garan-nested-img {
+  display: block;
+  width: 100%;
   height: auto;
 }
 .md3 .oo-warranty-link {
@@ -5498,35 +5926,11 @@ line-height: 31px;
   font-family: Arial, Helvetica, Arimo, sans-serif;
   font-weight: 400;
   font-size: 13px;
+  line-height: 1.35;
   color: var(--md-primary);
   text-decoration: underline;
   text-align: left;
 }
-a.oo-warranty-link--icon {
-  text-decoration: none;
-}
-a.oo-warranty-link--icon:hover {
-  text-decoration: underline;
-}
-.md3 .oo-warranty-link--pending {
-  cursor: default;
-}
-.md3 .oo-warranty-years-title {
-  margin: 0;
-  font-family: Arial, Helvetica, Arimo, sans-serif;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 1.35;
-  color: #0E2238;
-}
-.md3 .oo-warranty-years-desc {
-  margin: 0;
-  font-family: Arial, Helvetica, Arimo, sans-serif;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 1.35;
-  color: #44464F;
-}
 
 /* ---------- Bestellungen (orders) ---------- */
 .md3 .mo-page {
@@ -6419,7 +6823,8 @@ a.oo-warranty-link--icon:hover {
 .md3 .enq-float input:focus-visible,
 .md3 .enq-float textarea:focus-visible,
 .md3 .enquiry-name-row input:focus-visible,
-.md3 .enquiry-email-wrap input:focus-visible {
+.md3 .enquiry-email-wrap input:focus-visible,
+.md3 .co-addr-form-field:focus-visible {
   box-shadow: none !important;
 }
 .md3 .link-accent {

package/ui/MfieldCheckIcon.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
-
-// Figma-exact valid-field checkmark (.mfield-ok, FormField/MdField's showValid) — a distinct
-// path/stroke from the generic lucide Check that Icon name="check" renders elsewhere, so it's
-// its own tiny component rather than a REGISTRY entry in Icon.tsx (which would change every
-// other "check" usage in the app too).
-const MfieldCheckIcon: React.FunctionComponent = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M13.3334 4L6.00002 11.3333L2.66669 8" stroke="#168A45" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
-export default MfieldCheckIcon;
+import * as React from 'react';
+
+// Figma-exact valid-field checkmark (.mfield-ok, FormField/MdField's showValid) — a distinct
+// path/stroke from the generic lucide Check that Icon name="check" renders elsewhere, so it's
+// its own tiny component rather than a REGISTRY entry in Icon.tsx (which would change every
+// other "check" usage in the app too).
+const MfieldCheckIcon: React.FunctionComponent = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.3334 4L6.00002 11.3333L2.66669 8" stroke="#168A45" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export default MfieldCheckIcon;