@bytebrand/fe-ui-core-autobahn 1.0.152 → 1.0.154

package/chrome/Footer.tsx

@@ -86,6 +86,14 @@ export interface FooterProps {
    * (VehicleDetailedNextPage), never site-wide, since every other page shows only footnotes 1-4.
    */
   showCostFootnotes?: boolean;
+  /**
+   * Hides the brand blurb + "stay in contact"/social + 3 link columns block (the
+   * `.footer-grid`), leaving just the legal disclaimer and copyright/"Nach Oben" bar. Opt-in,
+   * off by default — every other caller keeps the full footer. Only CheckoutThankYouPage.tsx
+   * (checkout step 6 "Danke") uses this today: that page's own Figma reference (64637:37033)
+   * has just the compact legal/copyright strip, not the full site footer.
+   */
+  hideBrandColumns?: boolean;
 }
 
 /**
@@ -93,7 +101,7 @@ export interface FooterProps {
  * disclaimer block, and a copyright + "Nach Oben" bar. Pure/presentational MD3 chrome — renders
  * correctly only inside a `<div className="md3">` subtree (scoped theme at source/theme/autobahn).
  */
-const Footer: React.FunctionComponent<FooterProps> = ({ t, showCostFootnotes }) => {
+const Footer: React.FunctionComponent<FooterProps> = ({ t, showCostFootnotes, hideBrandColumns }) => {
   const scrollTop = (): void => window.scroll({ top: 0, left: 0, behavior: 'smooth' });
   const now = new Date();
   const year = now.getFullYear();
@@ -104,6 +112,7 @@ const Footer: React.FunctionComponent<FooterProps> = ({ t, showCostFootnotes })
 
   return (
     <footer style={{ background: 'var(--md-sc-low)', borderTop: '1px solid var(--md-outline-variant)' }}>
+      {!hideBrandColumns ? (
       <div className="container footer-grid" style={{ padding: '40px 24px 24px' }}>
         <div>
           <img src={logoUrl} height="30" alt="auto.de" />
@@ -169,10 +178,14 @@ const Footer: React.FunctionComponent<FooterProps> = ({ t, showCostFootnotes })
           </div>
         ))}
       </div>
+      ) : null}
 
       {/* Legally required disclaimers (PAngV §17a financing example w/ live APR/nominal rate +
-          term, DAT CO₂-Leitfaden, MwSt, Streichpreis, image notice). Same text as the legacy footer. */}
-      <div style={{ borderTop: '1px solid var(--md-outline-variant)' }}>
+          term, DAT CO₂-Leitfaden, MwSt, Streichpreis, image notice). Same text as the legacy footer.
+          The top border separates this from .footer-grid above — with hideBrandColumns that
+          block is gone, so the border would just double up against whatever's already directly
+          above the footer on the page (CheckoutThankYouPage.tsx's own header border). */}
+      <div style={hideBrandColumns ? undefined : { borderTop: '1px solid var(--md-outline-variant)' }}>
         <div className="container" style={{ padding: '18px 24px' }}>
           <p
             className="md-label-sm"

package/compat/MdField/MdField.tsx

@@ -37,11 +37,17 @@ export interface MdFieldProps {
    *  Same contract/markup as FormField's own showValid (.mfield--valid/.mfield-ok, md3.css). */
   showValid?: boolean;
   onChange: (value: string, name?: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  /** fires after the field's own internal blur handling (floating-label state). Callers use
+   *  this to trigger `field.validate()` (mobx-react-form) on blur — this component only owns
+   *  the `error` prop's display, not when validation actually runs, so without a caller wiring
+   *  this in, `field.error` never populates from blur and a required-but-empty field never
+   *  shows its error text/red border until some other validate() call happens to run. */
+  onBlur?: () => void;
 }
 
 const MdField: React.FunctionComponent<MdFieldProps> = ({
   className, error, sx, required, disabled, multiline, autoComplete,
-  value, type, name, rows, label, placeholder, floatingLabel, maxLength, showValid, onChange
+  value, type, name, rows, label, placeholder, floatingLabel, maxLength, showValid, onChange, onBlur
 }) => {
   const [reveal, setReveal] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
@@ -113,7 +119,7 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
             value={value == null ? '' : value}
             onChange={handleChange}
             onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
+            onBlur={() => { setFocused(false); onBlur?.(); }}
             disabled={disabled}
             rows={rows || 3}
             maxLength={maxLength}
@@ -132,7 +138,7 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
             value={value == null ? '' : value}
             onChange={handleChange}
             onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
+            onBlur={() => { setFocused(false); onBlur?.(); }}
             disabled={disabled}
             maxLength={maxLength}
             placeholder={effectivePlaceholder}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.152",
+  "version": "1.0.154",
   "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';
@@ -2290,6 +2294,14 @@ line-height: 31px;
   font-size: 13px;
   line-height: 15px;
   color: #44464F;
+  /* a long .co-error message (e.g. "Bitte wählen Sie eine der Optionen für Garantiepaket und
+     Fahrzeugzulassung.") sharing this row (≥601px: same row via margin-right:auto/flex-end,
+     see .co-next's own media queries) squeezed this plain text span for space same as any
+     other flex child — with nothing stopping it from wrapping, "Schritt 4 von 5" split onto 2
+     lines instead of the long error text (the one thing actually meant to wrap) absorbing the
+     squeeze. nowrap + flex-shrink:0 keeps this at its natural one-line width unconditionally. */
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 /* "Weiter" — its own fixed-size look, not the shared .mbtn--lg sizing (icon already dropped
    in the JSX, not just hidden here). Text styling lands on the button itself: Button.tsx
@@ -2356,6 +2368,22 @@ line-height: 31px;
     background: #F4F5FA;
     border-top: 0;
   }
+  /* DOM order is .co-error (only rendered when a step's validation fails), .co-back-btn,
+     .co-step-count, Weiter. `order` visually moves Zurück before the error text (its DOM
+     position doesn't change, so the back button's click handler/focus order are unaffected).
+     Zurück's base margin-right:auto (line ~2265) is what pushes Schritt/Weiter to the row's
+     right edge in the common case (no error, .co-back-btn is the only thing before the gap) —
+     kept as-is here. Only when .co-error IS present does that job need to hand off to it
+     instead (so the error text sits right after Zurück rather than the auto-margin gap opening
+     up BEFORE the error, between it and Zurück): the `.co-error + .co-back-btn` sibling
+     selector matches only that case (error is Zurück's immediately preceding DOM sibling) and
+     zeroes Zurück's margin, leaving .co-error's own margin-right:auto below as the sole push. */
+  .md3 .co-next .co-back-btn {
+    order: -1;
+  }
+  .md3 .co-next .co-error + .co-back-btn {
+    margin-right: 0;
+  }
   .md3 .co-next .co-error {
     margin-right: auto;
   }
@@ -2394,11 +2422,26 @@ 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". */
+.md3 .co-form.oo-page {
+  border-bottom: 0;
+}
 .md3 .co-step-title {
   font: 700 22px var(--md-font-display, var(--md-font));
   margin: 0;
   color: var(--md-on-surface);
 }
+/* order-overview only ("Bestellübersicht") — desktop already shows this same title in
+   CheckoutTopBarNext's own .co-topbar-heading (CheckoutChromeNext.tsx, same steps[activeStep].
+   title source), so this becomes a duplicate there; kept for mobile, where that top bar is a
+   compact single row with no room for it (CheckoutMobilePageTitle covers OTHER steps' mobile
+   copy, but order-overview renders its own here instead). Same 600px mobile/desktop cutoff as
+   .co-back-btn etc. elsewhere on this page. */
+@media (min-width: 601px) {
+  .md3 .oo-page > .co-step-title {
+    display: none;
+  }
+}
 .md3 .co-step-sub {
   color: var(--md-on-surface-variant);
   font-size: 14px;
@@ -2884,6 +2927,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 {
@@ -3051,6 +3101,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);
 }
@@ -3249,8 +3318,12 @@ line-height: 31px;
 .md3 .co-pay-bene b {
   display: block;
   margin-bottom: 2px;
-  font-size: 13.5px;
-  color: var(--md-on-surface);
+  font-family: 'Arimo';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 140%;
+  color: #1A1B22;
 }
 .md3 .co-pay-bene-desc {
   font-family: 'Arimo';
@@ -3515,6 +3588,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;
@@ -4474,10 +4576,17 @@ line-height: 31px;
 }
 /* "4. Lieferung & Services" (Figma node 63570:28320) — up to 3 cells in a row, divided by a 1px
    rule; the rule is a border on the cell itself (:not(:first-child)) rather than a separate DOM
-   node, so it stays correct no matter which 1-3 of the 3 cells are conditionally rendered. */
+   node, so it stays correct no matter which 1-3 of the 3 cells are conditionally rendered.
+   align-items: stretch (not flex-start) — a border-left only ever reaches as far down as its own
+   box, so with flex-start each divider stopped at its OWN cell's content height instead of the
+   row's tallest cell (the 3-line-wrapping "9. Gewährleistung & Herstellergarantie" title makes
+   that cell the tallest whenever it's shown), leaving the shorter cells' dividers visibly cut off
+   partway down. Cells stretching to the row's full height doesn't shift their own icon+text
+   (each cell keeps its own align-items: flex-start below), it only extends the empty space (and
+   therefore the border) to match. */
 .md3 .oo-ls-row {
   display: flex;
-  align-items: flex-start;
+  align-items: stretch;
 }
 .md3 .oo-ls-cell {
   display: flex;
@@ -4801,11 +4910,6 @@ line-height: 31px;
   color: var(--md-on-surface-variant);
   cursor: pointer;
 }
-.md3 .oo-underline {
-  color: var(--md-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
 /* "1. Fahrzeug & Verkäufer" card (Figma node 63570:28262) — own full-width .co-card, sitting
    above .oo-grid (not a grid column), so no bottom divider/margin like the legacy .oo-car row
    (that one used to sit above other rows sharing the same card). */
@@ -4948,16 +5052,94 @@ line-height: 31px;
   font-size: 13px;
   cursor: pointer;
 }
-.md3 .oo-terms {
-  margin-top: 20px;
+/* Figma 63570:28475 ("CK / Content — Rechtliche Hinweise") — text/underline color is the SAME
+   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. */
+.md3 .oo-legal-notice {
+  margin-top: 16px;
+  font-family: Arial;
   font-size: 13px;
+  line-height: 1.5;
   color: var(--md-on-surface-variant);
-  line-height: 1.6;
 }
-.md3 .oo-buy {
+.md3 .oo-legal-link {
+  text-decoration: underline;
+  color: inherit;
+  cursor: pointer;
+}
+/* Order overview's own "Zurück / Schritt X von Y / Jetzt kaufen" action bar (Figma 63502:5801) —
+   distinct classes from .co-next/.co-back-btn/.co-step-count (CheckoutChromeNext.tsx) rather than
+   reusing them: that bar's CTA is "advance to next step" and returns null on the last step, this
+   one's CTA is "buy now" (OfferRequestButtonWrapper) with its own, larger Figma-specified sizing. */
+.md3 .oo-next {
   display: flex;
-  justify-content: flex-end;
-  margin-top: 16px;
+  align-items: center;
+  gap: 16px;
+  margin-top: 24px;
+  padding-top: 18px;
+  border-top: 1px solid #C5C6D2;
+}
+.md3 .oo-next-back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  padding: 0 16px;
+  margin-right: auto;
+  border: 0;
+  background: none;
+  border-radius: 16px;
+  font-family: 'Arial';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 15px;
+  line-height: normal;
+  color: #005CFF;
+  cursor: pointer;
+}
+.md3 .oo-next-count {
+  font-family: 'Arial';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: normal;
+  color: #44464F;
+  white-space: nowrap;
+}
+.md3 .oo-buy-btn {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0 16px;
+  gap: 8px;
+  width: 340px;
+  height: 60px;
+  background: #005CFF;
+  border-radius: 16px;
+  font-family: 'Arial';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 17px;
+  line-height: normal;
+  color: #FFFFFF;
+}
+@media (max-width: 700px) {
+  .md3 .oo-next-count {
+    display: none;
+  }
+}
+@media (max-width: 600px) {
+  .md3 .oo-next-back {
+    display: none;
+  }
+  .md3 .oo-buy-btn {
+    width: 100%;
+  }
 }
 @media (max-width: 800px) {
   .md3 .oo-grid {
@@ -5124,12 +5306,33 @@ line-height: 31px;
      line instead of sitting visibly lower (more obvious once the label wraps to 2 lines). */
   margin-top: 7px;
 }
-/* Figma's design has no inline error message under the checkbox, only the red box border
-   (.mcheck-group--error above already gives that) — the shared FormCheckbox's own error text
-   is hidden here rather than touching that component (other FormCheckbox usages sitewide still
-   show their error text as before). */
-.md3 .oo-terms-block .mcheck-error-text {
-  display: none;
+/* Error state (Figma 64670:106293, "Jetzt kaufen" clicked without confirming both agreements) —
+   unconfirmed checkbox gets a thicker red box, plus an icon+message row underneath, indented
+   32px (20px box + 12px gap) to sit under the label rather than the box. errorIcon (FormCheckbox
+   prop, opt-in) renders that icon; every other FormCheckbox caller sitewide is untouched. */
+.md3 .oo-terms-block .mcheck-group--error .mcheck-input:not(:checked) + .mcheck-box {
+  border-width: 2px;
+}
+.md3 .oo-terms-block .mcheck-error-text--icon {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  padding-left: 32px;
+  margin-top: -2px;
+}
+.md3 .oo-terms-block .mcheck-error-icon {
+  flex: none;
+  margin-top: 1px;
+}
+.md3 .oo-terms-block .mcheck-error-msg {
+  flex: 1 0 0;
+  font-size: 13px;
+  line-height: 1.35;
+}
+/* Card itself gets a red border once either checkbox is showing its error (OrderOverviewNext's
+   termsHasError — same hasError+error double-check as FormCheckbox uses internally). */
+.md3 .oo-terms-card--error {
+  border: 2px solid var(--md-error);
 }
 /* "7. Ergänzende Regelungen" dialogs (Verkürzung der Verjährungsfrist / Ausschluss der
    Aktualisierung, Figma 64596:36289 desktop / 64596:36264 mobile) — rendered via the shared
@@ -5186,6 +5389,60 @@ line-height: 31px;
   line-height: 1.5;
   color: #0E2238;
 }
+/* Legal-notice row's 3 dialogs (AGB von auto.de / AGB des Verkäufers / Widerrufsbelehrung —
+   Figma 64604:48257 / 63583:6830 / 63583:6850) reuse the SAME oo-terms-modal chrome above, but
+   these bodies are long reference documents rather than a single clause, so Figma specs them
+   smaller/muted (text/muted #44464F) with bold text/strong (#1A1B22) section headings instead of
+   .oo-terms-modal-text's bigger, darker single-paragraph style. oo-terms-modal-legal-text also
+   carries the .oo-terms-modal-legal-html "AGB von auto.de"/"AGB des Verkäufers" bodies' shared
+   base (dangerouslySetInnerHTML'd CMS content / seller.termCond plain text — both re-used
+   verbatim from elsewhere in the app, not authored here, see OrderOverviewNext.tsx). */
+.md3 .oo-terms-modal-legal-text,
+.md3 .oo-terms-modal-legal-html {
+  font-family: Arial;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 1.48;
+  color: #44464F;
+}
+.md3 .oo-terms-modal-legal-text {
+  margin: 0;
+  /* seller.termCond is plain text (Imprint.tsx renders it the same way) — preserves its literal
+     line breaks instead of collapsing them. No-op for the revocation dialog's own JSON strings,
+     which don't contain any. */
+  white-space: pre-line;
+}
+.md3 .oo-terms-modal-legal-heading {
+  margin: 0;
+  font-family: Arial;
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 1.48;
+  color: #1A1B22;
+}
+.md3 .oo-terms-modal-legal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+/* ourTermsAndConditions is a WordPress `content.rendered` HTML blob (CheckoutStore.ts) — its own
+   <p> tags need their own spacing/heading treatment since it isn't discrete React children like
+   oo-terms-modal-legal-body's blocks above. */
+.md3 .oo-terms-modal-legal-html p {
+  margin: 0 0 12px;
+}
+.md3 .oo-terms-modal-legal-html p:last-child {
+  margin-bottom: 0;
+}
+.md3 .oo-terms-modal-legal-html strong,
+.md3 .oo-terms-modal-legal-html b,
+.md3 .oo-terms-modal-legal-html h1,
+.md3 .oo-terms-modal-legal-html h2,
+.md3 .oo-terms-modal-legal-html h3 {
+  font-weight: 700;
+  font-size: 15px;
+  color: #1A1B22;
+}
 /* mobile bottom sheet (.mmodal's own @media max-width:560px already makes it full-width/
    bottom-pinned/top-rounded) — Figma's mobile header additionally wants a 24px title (vs 22px
    on desktop) and a decorative grip bar (Figma 64596:36264's handleRow), which this Modal
@@ -5256,15 +5513,16 @@ line-height: 31px;
 .md3 .oo-promo-body .mfield:focus-within {
   box-shadow: inset 0 0 0 1px var(--md-outline-variant);
 }
-/* "9. Gewährleistung & Herstellergarantie" (Figma 64402:60309 collapsed / 64559:104000
-   expanded) — 2 levels of collapse: the outer card, then its own nested "Herstellergarantie"
-   row. 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 / no real per-car
-   data exists yet). */
+/* Cards 9 "Gewährleistung" / 10 "Herstellergarantie" (ADV-295; Figma 64669:106647 /
+   64669:108591) — share one .oo-warranty-card/.oo-warranty-body treatment (same card chrome,
+   flat single-level collapse, same link/image styling); which fields each renders is decided in
+   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 (default here); .oo-warranty-body's
-   own margin-top restores that 16px only once actually expanded. */
+   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;
 }
@@ -5272,6 +5530,7 @@ line-height: 31px;
   margin-top: 16px;
   display: flex;
   flex-direction: column;
+  gap: 12px;
 }
 .md3 .oo-warranty-notice-img {
   display: block;
@@ -5279,36 +5538,6 @@ line-height: 31px;
   max-width: 400px;
   height: auto;
 }
-.md3 .oo-warranty-divider {
-  margin-top: 16px;
-  height: 1px;
-  background: var(--md-outline-variant);
-}
-.md3 .oo-warranty-subrow {
-  margin-top: 14px;
-  padding-bottom: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  width: 100%;
-  background: none;
-  border: 0;
-  cursor: pointer;
-  text-align: left;
-}
-.md3 .oo-warranty-subrow-label {
-  font-family: Arial, Helvetica, Arimo, sans-serif;
-  font-weight: 700;
-  font-size: 15px;
-  color: #0E2238;
-}
-.md3 .oo-warranty-manufacturer-body {
-  margin-top: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
 .md3 .oo-warranty-garan-img {
   display: block;
   width: 100%;
@@ -5783,11 +6012,20 @@ a.oo-warranty-link--icon:hover {
 @media (min-width: 601px) and (max-width: 993px) {
   .md3 .co-next {
     flex-direction: row;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: flex-end;
     gap: 16px;
   }
+  /* same reasoning as the ≤700px block above: .co-error (a step-validation message, can run
+     long — e.g. "Bitte wählen Sie eine der Optionen für Garantiepaket und Fahrzeugzulassung.")
+     must not crowd onto the Zurück/Schritt/Weiter row. Without this, flex-wrap: nowrap forced
+     all 4 children onto one line with no room, so the error visually overlapped Zurück and
+     squeezed "Schritt X von Y" into wrapping onto 2 lines. flex-basis:100% forces the error onto
+     its own first line; flex-wrap: wrap (above) then lays the 3 buttons/label out on the next. */
+  .md3 .co-next .co-error {
+    flex: 1 0 100%;
+  }
 }
 /* below the 992px desktop breakpoint the content no longer reserves the 424px left
    gap, so the fixed rail would overlap the form — hide it (mobile uses the header stepper). */
@@ -6240,7 +6478,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 {
@@ -9299,6 +9538,64 @@ a.oo-warranty-link--icon:hover {
   padding: 18px 20px 22px;
   overflow-y: auto;
 }
+/* Checkout's Finanzierungsdetails/Leasingdetails modal (CheckoutFinancePanelNext's cf-details
+   button) reuses this SAME FinanceDetailsModal as the VDP page, but the rate hero + price-rating
+   pill/bar (.fin-price-grid) would just repeat the SAME figures the cf-panel already shows above
+   this button — unlike the Anzahlung/Laufzeit sliders and Mit-Schlussrate/Rundum-Sorglos-Paket
+   toggles (disabled by simply not passing their change handlers), nothing gates this block by
+   prop, so it's hidden here instead. Scoped to the checkout portal wrapper only — VDP/SearchPage
+   keep it. */
+.md3.cf-fin-details-modal .fin-price-grid {
+  display: none;
+}
+/* Leasing's breakdown table runs longer than financing's (Leasinggeber+Vertragsart split, the
+   mandatory Rundum-Sorglos-Paket notice box, an extra disclaimer line) — 88vh left it a little
+   short of fitting whole, needing a few pixels of real scroll even after the hero/sliders/
+   toggles/CTA above are stripped. A taller cap gives it room to fit outright on realistic
+   viewports; overflow-y:auto above still catches genuinely short windows as a fallback. */
+.md3.cf-fin-details-modal .fin-modal {
+  max-height: 95vh;
+}
+/* overflow-y:visible here (tried first for the short financing case) turned out to break the
+   LONGER leasing case: without a real scroll container, flexbox's automatic min-height:auto
+   let .fin-modal-body grow to its full content height (839px+ — leasing adds the Leasinggeber/
+   Vertragsart split + the mandatory Rundum-Sorglos-Paket notice box) past .fin-modal's own
+   max-height:88vh, and since .fin-modal-scrim centers it, the overflow pushed the header off the
+   TOP of the viewport instead of clipping the bottom. Keep the real overflow-y:auto (correct
+   height-constraining behaviour for any content length) and just hide the bar. */
+.md3.cf-fin-details-modal .fin-modal-body {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.md3.cf-fin-details-modal .fin-modal-body::-webkit-scrollbar {
+  display: none;
+}
+/* "Rate anfragen"/call CTA row — checkout has no separate request flow to trigger from inside an
+   already-running checkout (reviewing the breakdown IS the action), so this instance drops the
+   row entirely rather than wiring it to a stand-in action. Unlike the sliders/toggles, it isn't
+   gated by a handler prop, so it's hidden here. Shared class, one rule covers both breakpoints.
+   `!important` — the element carries an inline style="display:flex" (VdpModules.tsx), which
+   otherwise wins over any external rule regardless of selector specificity. */
+.md3.cf-fin-details-modal .fin-sheet-cta-row {
+  display: none !important;
+}
+/* the (kept) legal breakdown's wrapper carries an inline marginTop:18 meant to separate it from
+   the now-hidden hero/sliders/toggles above — stacked on .fin-modal-body's own 18px top padding
+   that reads as unexplained empty space once those sections are gone. `!important` because the
+   marginTop is inline (VdpModules.tsx), and only the DESKTOP wrapper needs it: it's the immediate
+   next sibling of the (also hidden) .fin-price-grid there; the mobile breakdown wrapper is
+   separated from .fin-price-grid by the still-visible data-sheet-fold button, so this selector
+   doesn't reach it and mobile's spacing (already just marginBottom, no marginTop) is untouched. */
+.md3.cf-fin-details-modal .fin-price-grid + div {
+  margin-top: 0 !important;
+}
+/* mobile breakpoint below sets align-items:flex-start on .fin-modal-head, top-aligning the close
+   button against the 2-line "Kredit-Rate anpassen" + vehicle-name title — checkout's stripped
+   instance has nothing that needs that extra top room, so it stays vertically centered instead
+   (3-class selector already outweighs the 2-class mobile rule, no !important needed). */
+.md3.cf-fin-details-modal .fin-modal-head {
+  align-items: center;
+}
 @media (max-width: 600px) {
   .md3 .fin-modal-scrim {
     align-items: flex-end;
@@ -14177,3 +14474,247 @@ color: #005CFF;
     border-bottom: 1px solid var(--md-outline-variant);
   }
 }
+
+/* Post-purchase confirmation modal (CONGRATULATIONS_CHECKOUT_MODAL, Congratulations.tsx) —
+   Figma 64637:37064 (desktop) / 63536:6276 (mobile). BaseModal's own `.modalCheckout` chrome
+   (BaseModal.styl: fixed 375px width, square corners, its own white bg + shadow) is neutralized
+   here via the `cgz-modal` className OfferRequestButtonWrapper passes — Congratulations.tsx's
+   own `.cgz-card` supplies the actual Figma card (border/radius/bg/padding) instead, so there's
+   no double box. `.md3` ancestor: App.tsx's root `<div className="${styles.app} md3">` wraps
+   the whole SPA unconditionally (confirmed — this is NOT the same as the per-page opt-in `.md3`
+   noted elsewhere for legacy MainContent pages), and BaseModal renders inline (no portal), so a
+   single `.md3`-prefixed selector is enough, same as every other CheckoutPage-tree rule already
+   in this file. */
+.md3 .cgz-modal {
+  width: 800px;
+  max-width: calc(100vw - 48px);
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+}
+.md3 .cgz-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  /* Figma: fixed 800px, not fluid — was width:100%, which (now that this also renders as a
+     real page, not just inside the fixed-800px .cgz-modal) stretched edge-to-edge on any
+     viewport wider than 800px+padding instead of staying a centered 800px card. max-width is
+     just the narrow-viewport safety clamp (matches .cgz-modal's own calc(100vw - 48px)) —
+     the max-width:600px block below still overrides both to 100% for the mobile layout. */
+  width: 800px;
+  max-width: calc(100vw - 48px);
+  background: #FFFFFF;
+  border: 1px solid var(--md-outline-variant);
+  border-radius: 16px;
+  padding: 48px 56px;
+  box-sizing: border-box;
+}
+.md3 .cgz-intro {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+.md3 .cgz-logo {
+  width: 138.6px;
+  height: 44px;
+}
+.md3 .cgz-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 13px;
+  background: #DFF3E5;
+  border-radius: 999px;
+  font-family: Arimo, Arial, sans-serif;
+  font-weight: 700;
+  font-size: 13.5px;
+  line-height: 1.35;
+  color: #0F6B36;
+  white-space: nowrap;
+}
+/* Figma specifies "42dot Sans" for this headline — not a typeface loaded anywhere in this
+   project (confirmed: no other component/font-face references it). Mapped to the design
+   system's own existing "big display heading" token instead (same one .co-step-title/hero
+   numbers use) rather than adding a whole new webfont for one screen. 500 is the lightest
+   weight actually loaded for it (Schibsted+Grotesk:wght@500;600;700;800, see :root) — closest
+   available match to Figma's "Regular". */
+.md3 .cgz-title {
+  margin: 0;
+  font-family: var(--md-font-display, var(--md-font));
+  font-weight: 500;
+  font-size: 32px;
+  line-height: 1.35;
+  color: var(--md-on-surface);
+  text-align: center;
+}
+.md3 .cgz-desc {
+  margin: 0;
+  max-width: 560px;
+  font-family: Arimo, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.35;
+  color: var(--md-on-surface-variant);
+  text-align: center;
+}
+.md3 .cgz-car {
+  width: 420px;
+  height: 275px;
+  object-fit: contain;
+}
+.md3 .cgz-steps {
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+  width: 100%;
+  padding: 20px 0;
+  border-top: 1px solid var(--md-outline-variant);
+  border-bottom: 1px solid var(--md-outline-variant);
+  box-sizing: border-box;
+}
+.md3 .cgz-step {
+  display: flex;
+  flex: 1 0 0;
+  min-width: 0;
+  align-items: flex-start;
+  gap: 10px;
+}
+.md3 .cgz-step-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.md3 .cgz-step-title {
+  margin: 0;
+  font-family: Arimo, Arial, sans-serif;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1.35;
+  color: var(--md-on-surface);
+}
+.md3 .cgz-step-sub {
+  margin: 0;
+  font-family: Arimo, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 1.35;
+  color: var(--md-on-surface-variant);
+}
+.md3 .cgz-btn {
+  width: 320px;
+  height: 48px;
+  padding: 0 16px;
+  gap: 8px;
+  background: #005cff;
+  border-radius: 16px;
+  font-family: Arial;
+  font-weight: 700;
+  font-size: 15px;
+}
+.md3 .cgz-btn:hover {
+  box-shadow: var(--md-e2);
+  background: var(--autode-blau-strong);
+}
+@media (hover: none) {
+  .md3 .cgz-btn:hover {
+    box-shadow: none;
+    background: #005cff;
+  }
+}
+@media (max-width: 600px) {
+  .md3 .cgz-modal {
+    width: 100%;
+    max-width: 100%;
+  }
+  .md3 .cgz-card {
+    width: 100%;
+    max-width: 100%;
+    gap: 16px;
+    padding: 24px 20px 26px;
+  }
+  .md3 .cgz-title {
+    font-size: 26px;
+  }
+  .md3 .cgz-desc {
+    max-width: none;
+    font-family: Arial;
+    font-size: 15px;
+  }
+  .md3 .cgz-car {
+    width: 260px;
+    height: 170px;
+  }
+  .md3 .cgz-steps {
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px 0;
+  }
+  .md3 .cgz-step-title,
+  .md3 .cgz-step-sub {
+    font-family: Arial;
+  }
+  .md3 .cgz-btn {
+    width: 100%;
+  }
+}
+
+/* Escapes MainContent.styl's `container()` mixin (max-width: 1100px, centered) — App.tsx wraps
+   every non-SPA-layout route (checkout included) in <MainContent>, which defaults to that
+   1100px cap regardless of what the routed page itself renders. CheckoutPage.tsx already
+   escapes it the CSS-module way (its own mainContentWrap, max-width:100%); this is the same
+   fix as a plain literal class for CheckoutThankYouPage.tsx's <Page mainContentClass="..."> —
+   consistent with cgz-modal above (a plain class, not a CSS-module one, so it's reliably
+   targetable here in md3.css, a completely different bundle/file). */
+.md3 .cgz-main-content {
+  max-width: 100%;
+  min-height: 100%;
+  height: auto;
+}
+
+/* Checkout step 6 "Danke" page chrome (CheckoutThankYouPage.tsx) — Figma 64637:37033's own
+   "Checkout Header/Footer Desktop", deliberately simpler than CheckoutTopBarNext/
+   CheckoutHeaderNext (no car price/back/stepper — the order's already placed by the time this
+   renders). `.cgz-card` etc. above are shared with the CONGRATULATIONS_CHECKOUT_MODAL path and
+   need no changes for this context. */
+.md3 .cgz-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.md3 .cgz-page-header {
+  display: flex;
+  align-items: center;
+  flex: none;
+  height: 64px;
+  padding: 0 120px;
+  background: #FFFFFF;
+  border-bottom: 1px solid var(--md-outline-variant);
+}
+.md3 .cgz-page-logo {
+  display: block;
+  width: 81.9px;
+  height: 26px;
+}
+.md3 .cgz-page-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 0 auto;
+  padding: 56px 24px 80px;
+  background: #F4F5FA;
+}
+@media (max-width: 600px) {
+  .md3 .cgz-page-header {
+    height: 56px;
+    padding: 0 23px;
+  }
+  .md3 .cgz-page-main {
+    padding: 24px 23px 40px;
+  }
+}

package/ui/FormCheckbox.tsx

@@ -36,10 +36,14 @@ export interface FormCheckboxProps {
   /** override the field's own disabled flag. */
   disabled?: boolean;
   id?: string;
+  /** show a small alert-circle glyph before the error text (Figma 64670:106293's "Fehlermeldung"
+   *  row) — opt-in, defaults off so every other FormCheckbox caller keeps its plain text-only
+   *  error message unchanged. */
+  errorIcon?: boolean;
 }
 
 const FormCheckbox: React.FunctionComponent<FormCheckboxProps> = observer(
-  ({ field, t, label, children, disabled, id }) => {
+  ({ field, t, label, children, disabled, id, errorIcon }) => {
     const isChecked = !!field.checked;
     const isDisabled = disabled != null ? disabled : !!field.disabled;
     // field.hasError alone is a LIVE check (mobx-react-form's Field#hasError getter re-evaluates
@@ -77,7 +81,16 @@ const FormCheckbox: React.FunctionComponent<FormCheckboxProps> = observer(
           </span>
           {content != null ? <span className="mcheck-label">{content}</span> : null}
         </label>
-        {hasError ? <span className="mcheck-error-text">{field.error}</span> : null}
+        {hasError ? (
+          errorIcon ? (
+            <span className="mcheck-error-text mcheck-error-text--icon">
+              <Icon name="alert-circle" size={16} stroke={2} cls="mcheck-error-icon" />
+              <span className="mcheck-error-msg">{field.error}</span>
+            </span>
+          ) : (
+            <span className="mcheck-error-text">{field.error}</span>
+          )
+        ) : null}
       </div>
     );
   },

package/ui/Icon.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   Activity,
+  AlertCircle,
   Apple,
   Armchair,
   ArrowLeft,
@@ -57,6 +58,7 @@ import {
   Facebook,
   File,
   FileCheck,
+  FileSignature,
   FileText,
   Flame,
   Fuel,
@@ -199,6 +201,7 @@ function toPascalCase(name: string): string {
  */
 const REGISTRY: Record<string, React.ComponentType<LucideProps>> = {
   Activity,
+  AlertCircle,
   Apple,
   Armchair,
   ArrowLeft,
@@ -256,6 +259,7 @@ const REGISTRY: Record<string, React.ComponentType<LucideProps>> = {
   Facebook,
   File,
   FileCheck,
+  FileSignature,
   FileText,
   Flame,
   Fuel,

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;

package/vdp/VdpModules.tsx

@@ -2126,6 +2126,12 @@ export interface FinanceDetailsModalProps {
   /** opened directly via the page's Finanzierungs-/Leasingdetails link — the sheet opens
    *  scrolled to the breakdown instead of the "Rate anpassen" controls at its top. */
   initialShowBreakdown?: boolean;
+  /** skips the smooth scrollIntoView/scrollSheetToBreakdown animation initialShowBreakdown
+   *  otherwise triggers on open (still sets showBreakdown itself) — for a consumer whose sheet
+   *  has nothing ABOVE the breakdown to scroll past (e.g. checkout's stripped-down instance,
+   *  with the rate hero/sliders/toggles above it hidden), that animation has nowhere real to go
+   *  and only reads as a stray jump. */
+  skipInitialScroll?: boolean;
   /** mobile only — price-rating label, drives the eval pill/bar (same as the collapsed card). */
   ratingLabel?: string;
   /** Kaufen tab only — real carStore.isAvailable (same source as VdpTrustRow's "Sofort
@@ -2154,6 +2160,10 @@ export interface FinanceDetailsModalProps {
   leasingAvailable?: boolean;
   /** i18n function (drilled from the page). */
   t: TranslationFunction;
+  /** overrides the desktop dialog heading (default: the mode's own, shorter "Details" text) —
+   *  a consumer whose own trigger already carries a specific label (e.g. checkout's cf-details
+   *  button, "Finanzierungsdetails"/"Leasingdetails") can pass that same text through here. */
+  titleOverride?: string;
 }
 
 /**
@@ -2197,6 +2207,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   onAnnualMileageChange,
   onClose,
   initialShowBreakdown,
+  skipInitialScroll,
   ratingLabel,
   available,
   onModeChange,
@@ -2211,6 +2222,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   onToggleAddServices,
   leasingAvailable = true,
   t,
+  titleOverride,
 }) => {
   // same "UVP-Rate"/list-price footnote badge + popover as FinanceCalculator's own hero — this
   // modal's mobile "Rate anpassen" sheet renders its own separate copy of that hero row, so it
@@ -2314,14 +2326,14 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   React.useEffect(() => {
     if (!open) return;
     setShowBreakdown(!!initialShowBreakdown);
-    if (!initialShowBreakdown) return;
+    if (!initialShowBreakdown || skipInitialScroll) return;
     const timer = window.setTimeout(() => {
       if (mobileBreakdownRef.current?.offsetParent) scrollSheetToBreakdown();
       else desktopBreakdownRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }, 50);
     return () => window.clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, initialShowBreakdown]);
+  }, [open, initialShowBreakdown, skipInitialScroll]);
   // in-sheet details link: expanding scrolls down to the breakdown, collapsing back to the top.
   const revealBreakdownRef = React.useRef(false);
   React.useEffect(() => {
@@ -2389,7 +2401,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   if (!open) return null;
   const isLease = mode === 'leasing';
   const isCash = mode === 'cash';
-  const title = isLease ? t('autobahn:modal.leasingDetails') : t('autobahn:modal.financingDetails');
+  const title = titleOverride || (isLease ? t('autobahn:modal.leasingDetails') : t('autobahn:modal.financingDetails'));
   const mobileTitle = isCash
     ? t('autobahn:modal.sheetTitleCash')
     : isLease