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

package/locales/de/autobahn.json

@@ -88,7 +88,7 @@
     "detailsShow": "Details anzeigen",
     "paymentLabel": "Zahlung",
     "paymentValue": "Überweisung",
-    "warrantyLabel": "Garantie",
+    "warrantyLabel": "Zusatzgarantie (Multipart)",
     "warrantyValue": "1 Jahr inklusive",
     "deliveryLabel": "Lieferung",
     "deliveryValue": "ca. 7–14 Tage · oder Abholung",
@@ -701,7 +701,7 @@
   },
   "modal": {
     "leasingDetails": "Leasingdetails",
-    "financingDetails": "Details",
+    "financingDetails": "Finanzierungsdetails",
     "close": "Schließen",
     "vehiclePrice": "Fahrzeugpreis ggf. inkl. MwSt.",
     "leasingAmount": "Leasingbetrag",

package/locales/en/autobahn.json

@@ -88,7 +88,7 @@
     "detailsShow": "Show details",
     "paymentLabel": "Payment",
     "paymentValue": "Bank transfer",
-    "warrantyLabel": "Warranty",
+    "warrantyLabel": "Additional warranty (Multipart)",
     "warrantyValue": "1 year included",
     "deliveryLabel": "Delivery",
     "deliveryValue": "approx. 7–14 days · or collection",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.154",
+  "version": "1.0.156",
   "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

@@ -1657,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;
@@ -1821,6 +1822,14 @@ line-height: 31px;
   gap: 8px;
   flex-wrap: wrap;
 }
+/* Figma 64860-62117 (Kaufen only): ground-truth design-context pull — "row" is gap-[14px]
+   items-start, not the shared gap-8/align-center financing/leasing's own row keeps (base rule
+   above, untouched) — the taller 2-row old-price stack (badge above struck price, see
+   .cf-rate-old--buy below) needs top alignment against the big price instead of centering. */
+.md3 .cf-rate-row.cf-rate-row--buy {
+  gap: 14px;
+  align-items: flex-start;
+}
 .md3 .cf-rate-amount {
   font-family: 'Arial';
   font-style: normal;
@@ -1829,6 +1838,16 @@ line-height: 31px;
   line-height: 58px;
   color: #005CFF;
 }
+/* Figma 64860-62117 (Kaufen only): exact text spec pasted by user — Arimo/700/36px/100%
+   line-height/-1.6px letter-spacing — smaller + tighter than the shared 54px Arial price
+   financing/leasing keep (base rule above, untouched). 2-class selector scopes to
+   .cf-rate-amount--buy only; the ≤600px rule further down already matches this 36px size. */
+.md3 .cf-rate-amount.cf-rate-amount--buy {
+  font-family: 'Arimo';
+  font-size: 36px;
+  line-height: 100%;
+  letter-spacing: -1.6px;
+}
 .md3 .cf-rate-side {
   display: flex;
   flex-direction: column;
@@ -1855,6 +1874,51 @@ line-height: 31px;
   color: #0E2238;
   white-space: nowrap;
 }
+/* Figma 64860-62117 (Kaufen only): ground-truth design-context pull ("uvp" node) — flex column
+   (badge row stacked above the struck price, gap 1px), Arimo/700/15px/normal line-height/0
+   letter-spacing/native line-through, color var(--semantic-error, #ba1a1a) — replaces the shared
+   Arial/400/20px dark .cf-rate-old treatment financing/leasing's own isStrike price keeps
+   untouched below. 2-class selector scopes this to .cf-rate-old--buy only. */
+.md3 .cf-rate-old.cf-rate-old--buy {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  font-family: 'Arimo';
+  font-weight: 700;
+  font-size: 15px;
+  line-height: normal;
+  letter-spacing: 0;
+  color: #BA1A1A;
+}
+/* line-through lives on .cf-rate-old-text (the price span) only, not the flex container above —
+   a descendant's own text-decoration:none is NOT reliable for "undoing" an ancestor's decoration
+   line (well-known CSS quirk: the line is drawn across the ancestor's whole inline content
+   regardless), which was still drawing the strike through the badge's "2" one level up. */
+.md3 .cf-panel .cf-rate-old--buy .cf-rate-old-text {
+  text-decoration: line-through;
+}
+/* replaces the custom red diagonal bar for Kaufen only — financing/leasing's own isStrike price
+   keeps the shared ::after bar (base rule below, untouched). */
+.md3 .cf-rate-old.cf-rate-old--buy::after {
+  display: none;
+}
+/* Same Figma frame ("footnote" node): a plain 13x13 ring in brand/primary, Arimo Regular 8px
+   text-primary (#0e2238) — sits in normal flow as its own row above the struck price (the
+   flex-column .cf-rate-old--buy above), not absolutely overlaid — scoped to .cf-rate-old--buy,
+   financing/leasing's isStrike badge keeps the shared corner-overlay .pp-eyebrow-badge rule
+   (top-right, bigger ring) untouched below. */
+.md3 .cf-panel .cf-rate-old--buy .pp-eyebrow-badge {
+  position: static;
+  width: 13px;
+  height: 13px;
+  font-family: 'Arimo';
+  font-weight: 400;
+  font-size: 8px;
+  line-height: normal;
+  border-width: 1px;
+  color: #0E2238;
+}
 /* must stay AFTER the base .cf-rate-amount/.cf-rate-old rules above — equal specificity means
    source order decides the tie (same rule as the .co-form media query elsewhere in this file). */
 @media (max-width: 600px) {
@@ -1967,6 +2031,20 @@ line-height: 31px;
     gap: 6px;
   }
 }
+/* Figma 64860-62117 (Kaufen only): ground-truth "hero" node is a plain gap-[10px] row (price
+   block + rating column packed together on the left), not the shared space-between push-to-
+   far-edge financing/leasing's own hero row keeps (base rule above, untouched) — the 10px gap
+   itself lives on .fin-eval-col--buy's margin-left just below, so this only cancels the
+   space-between/gap-16 that would otherwise ADD to it. 2-class selector scopes to
+   .cf-rate-top--buy; applies at every width (.fin-eval-col--buy's margin-left is the only
+   intended gap, mobile included). */
+.md3 .cf-rate-top.cf-rate-top--buy {
+  justify-content: flex-start;
+  gap: 0;
+}
+.md3 .cf-panel .fin-eval-col.fin-eval-col--buy {
+  margin-left: 10px;
+}
 .md3 .cf-rate-left {
   display: flex;
   flex-direction: column;
@@ -1981,13 +2059,15 @@ line-height: 31px;
   line-height: 15px;
   color: #0E2238;
 }
-/* Kaufen's compact "Überweisung · Sofort verfügbar" recap — mobile only (show-mobile, see JSX);
-   desktop already has the same two facts as separate Zahlung/Verfügbarkeit rows further down
-   (.cf-buy-info), so this would just duplicate them there. */
-@media (max-width: 600px) {
-  .md3 .cf-panel .co-aside-cond.co-aside-cond--buy {
-    margin-top: 5px;
-  }
+/* Kaufen's compact "Überweisung · sofort verfügbar" recap — Figma 64860-62117 renders it
+   unconditionally (desktop AND mobile) right under the price, alongside the separate Zahlung/
+   Zusatzgarantie/Verfügbar rows further down (.cf-buy-info) — previously hidden on desktop
+   (show-mobile) on the wrong assumption that it only duplicated those rows; removed from JSX.
+   5px (ground-truth "Rate" column gap) replaces the shared 10px .co-aside-cond gap financing/
+   leasing's own cond line keeps (base rule above, untouched) — was mobile-only before; Figma's
+   same frame carries this gap at any width, so it's no longer scoped to the ≤600px query. */
+.md3 .cf-panel .co-aside-cond.co-aside-cond--buy {
+  margin-top: 5px;
 }
 /* .fin-eval-col's shared base rule is `display: contents` (a CSS-grid trick that relies on a
    `.fin-price-grid` grid ancestor with named areas — cf-panel isn't a grid), so it needs the
@@ -1998,6 +2078,10 @@ line-height: 31px;
   gap: 8px;
   flex: none;
   align-items: stretch;
+  /* Figma 64860-62117: fixed 106px column so the pill (below, display:flex + align-items:
+     stretch cascading down) and the bar (already width:100%) both span the same width instead
+     of shrink-wrapping to whichever tier label happens to be widest. */
+  width: 106px;
 }
 @media (max-width: 600px) {
   .md3 .cf-panel .fin-eval-col {
@@ -2200,6 +2284,31 @@ line-height: 31px;
   width: 40px;
   height: 40px;
 }
+/* Rundum-Sorglos-Paket title "i" popover — same reasoning/pattern as the .cf-toggle override
+   above (inherited rule is tuned for the small UVP-Rate footnote badge, top:16px/left:0/
+   width:260px): left:0 was relative to the title's own 20px padding box, bleeding the popover
+   past the card's left border. left:20px nudges it to align with the title's own content edge
+   instead (close to the original 260px width — a full left:0/right:0/width:auto span was tried
+   and was too wide/plain). right:20px + max-width is the mobile safety net: on a narrow card it
+   shrinks instead of overflowing; on a normal-width card max-width wins and the box just sits
+   280px wide, anchored at left:20px (CSS over-constrained resolution recalculates the unused
+   "right" rather than stretching). 3 class-selectors deep so it always wins over the 2-deep base
+   rule regardless of source order. */
+.md3 .cf-panel .co-card-title .pp-uvp-tooltip {
+  top: 28px;
+  left: 40px;
+  right: 20px;
+  width: auto;
+  max-width: 280px;
+}
+/* same box, narrower safety margin so the 280px cap still comfortably fits a phone-width card
+   instead of being cut flush against the right edge. */
+@media (max-width: 600px) {
+  .md3 .cf-panel .co-card-title .pp-uvp-tooltip {
+    left: 20px;
+    right: 12px;
+  }
+}
 .md3 .cf-toggle .md-title-sm {
   display: inline-flex;
   align-items: center;
@@ -2211,6 +2320,14 @@ line-height: 31px;
   line-height: 15px;
   color: #1A1B22;
 }
+/* Rundum-Sorglos-Paket's toggle label should read the same size as the Zahlung/Zusatzgarantie/
+   Verfügbarkeit rows above it (.cf-buy-info .calcrow-label, 15px/17px) — .cf-panel scopes this to
+   CheckoutFinancePanelNext only, leaving AdditionalServicesNext's unrelated .co-rundum-footer
+   .cf-toggle (step 4) at its own 13px untouched. */
+.md3 .cf-panel .cf-toggle .md-title-sm {
+  font-size: 15px;
+  line-height: 17px;
+}
 .md3 .cf-toggle .md-title-sm svg {
   cursor: pointer;
 }
@@ -2404,7 +2521,7 @@ line-height: 31px;
 .md3 .co-form {
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 20px;
   padding-bottom: 20px;
   border-bottom: 1px solid #C5C6D2;
 }
@@ -2422,10 +2539,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;
@@ -2505,6 +2631,12 @@ line-height: 31px;
   padding: 14px 20px;
   border-bottom: 1px solid #C5C6D2;
 }
+/* Kaufen: .co-rundum-footer (the "in die Rate einrechnen" toggle) isn't rendered at all, so
+   .co-rundum-box is the card's last element — the border-bottom above would just be a dangling
+   line with nothing below it. */
+.md3 .cf-panel .co-rundum-box.co-rundum-box--buy {
+  border-bottom: 0;
+}
 .md3 .cf-panel .co-rundum-footer {
   padding: 14px 20px;
 }
@@ -4555,6 +4687,23 @@ line-height: 31px;
   justify-content: space-between;
   gap: 10px;
 }
+/* "2. Rechnungsadresse" / "3. Lieferadresse" (.oo-addr-grid's two cards only — the shared 10px
+   above still fits "Lieferung & Services"/Zahldetails fine, which have a whole row to themselves)
+   — the base gap left too little room for "Rechnungsadresse" next to "Ändern" in the half-width
+   grid column, wrapping the title to 2 lines. align-items: center (inherited from the base rule
+   above) only centers against the FULL flex-row height, so while wrapped it centered "Ändern"
+   against both title lines instead of matching the first one. */
+.md3 .oo-addr-grid .oo-card-title--action {
+  gap: 4px;
+}
+/* The button has no explicit line-height, so the UA default ("normal", ~1.15-1.2x its 13px font)
+   gives it a taller box than its own glyphs — align-items: center then centers that whole taller
+   box against the title's 23px line-height box, landing "Ändern"'s visible text a bit low. line-
+   height: 1 collapses the button's box to its font-size itself, so both sides center on their
+   actual text instead of on mismatched leading. */
+.md3 .oo-addr-grid .oo-card-action {
+  line-height: 1;
+}
 .md3 .oo-card-action {
   font-family: Arial;
   font-weight: 700;
@@ -4667,79 +4816,279 @@ 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);
+/* "2 Jahre Garantie" "i" popover (OrderOverviewNext.tsx) — same AddServicesTooltipBody/
+   pp-uvp-tooltip markup as step 3's title info trigger, but there's no .cf-panel ancestor here to
+   inherit the shared "grey card" look from, so the full style (not just a position override) is
+   defined fresh under .oo-ls-title-row. Anchored right:0 (the garantie cell is the row's last/
+   rightmost of 3) so the box opens leftward instead of overflowing past the card's right edge;
+   max-width keeps it inside a narrow phone screen once .oo-ls-row stacks to full width below. */
+.md3 .oo-ls-title-row .pp-uvp-tooltip {
+  position: absolute;
+  top: 24px;
+  left: auto;
+  right: 0;
+  z-index: 20;
+  width: 300px;
+  max-width: calc(100vw - 48px);
+  padding: 10px 12px;
+  border-radius: 15px;
+  background: #c5c6d2;
+  box-shadow: var(--md-e2, 0 4px 12px rgba(0, 0, 0, 0.15));
+  white-space: normal;
+  cursor: default;
+}
+.md3 .oo-ls-title-row .pp-uvp-tooltip-close {
+  position: absolute;
+  top: -14px;
+  right: -14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: rgba(11, 19, 32, 0.55);
+  border: 1.5px solid rgba(255, 255, 255, 0.25);
+  padding: 0;
+  cursor: pointer;
+}
+.md3 .oo-ls-title-row .pp-uvp-tooltip-body {
+  font-family: 'Arimo';
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 13px;
+  color: #0e2238;
+}
+/* "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 {
+  position: relative;
   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 {
+/* UVP footnote popover (both the Buy "②" and the Financing/Leasing "UVP-Rate ③" branches above —
+   oo-pay-buy-uvp-row and oo-pay-secondary respectively, both descendants of this row) — same
+   "grey card" pp-uvp-tooltip look step 3's .cf-panel scope and order-overview's own
+   .oo-ls-title-row scope already give it, but nothing scoped it under this card's own oo-pay-*
+   namespace, so it rendered as plain unstyled text. position:relative lives on this shared
+   ancestor (not each branch's own element) since one rule here covers both. */
+.md3 .oo-pay-price-row .pp-uvp-tooltip {
+  position: absolute;
+  top: 28px;
+  left: 0;
+  z-index: 20;
+  width: 300px;
+  max-width: calc(100vw - 48px);
+  padding: 10px 12px;
+  border-radius: 15px;
+  background: #c5c6d2;
+  box-shadow: var(--md-e2, 0 4px 12px rgba(0, 0, 0, 0.15));
+  white-space: normal;
+  cursor: default;
+}
+.md3 .oo-pay-price-row .pp-uvp-tooltip-close {
+  position: absolute;
+  top: -14px;
+  right: -14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: rgba(11, 19, 32, 0.55);
+  border: 1.5px solid rgba(255, 255, 255, 0.25);
+  padding: 0;
+  cursor: pointer;
+}
+.md3 .oo-pay-price-row .pp-uvp-tooltip-body {
+  font-family: 'Arimo';
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 13px;
+  color: #0e2238;
+}
+.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-pay-unit {
+  font-family: Arimo, Arial, sans-serif;
+  font-weight: 700;
+  font-size: 18px;
+  color: #5B6B7F;
 }
-.md3 .oo-mzz-price-wrap .fin-eval-bar-cell {
+.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;
+}
+/* Figma 64794-109673 "secondaryStack": items-start, not center — the footnote badge (now a
+   direct sibling of .oo-pay-uvp-amount, moved out so the struck price's own ::after bar doesn't
+   draw its strike across the badge too) sits top-aligned/raised next to the price instead of
+   vertically centered against it. */
+.md3 .oo-pay-buy-uvp-row {
+  display: flex;
+  align-items: flex-start;
+  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;
@@ -4749,137 +5098,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-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-mzz-kv-value {
+.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-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-mzz-kv-hr {
+.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;
@@ -5056,11 +5564,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;
@@ -5079,7 +5591,6 @@ line-height: 31px;
   display: flex;
   align-items: center;
   gap: 16px;
-  margin-top: 24px;
   padding-top: 18px;
   border-top: 1px solid #C5C6D2;
 }
@@ -5139,6 +5650,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) {
@@ -5151,9 +5680,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 {
@@ -5164,15 +5697,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 {
@@ -5202,20 +5735,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 {
@@ -5224,7 +5774,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;
   }
@@ -5519,15 +6077,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;
@@ -5535,13 +6085,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 {
@@ -5557,35 +6155,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 {