@bytebrand/fe-ui-core-autobahn 1.0.155 → 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.155",
+  "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

@@ -1822,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;
@@ -1830,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;
@@ -1856,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) {
@@ -1968,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;
@@ -1982,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
@@ -1999,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 {
@@ -2201,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;
@@ -2212,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;
 }
@@ -2515,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;
 }
@@ -4565,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;
@@ -4677,6 +4816,49 @@ line-height: 31px;
     border-left: 0 !important;
   }
 }
+/* "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
@@ -4700,12 +4882,55 @@ line-height: 31px;
   width: 100%;
 }
 .md3 .oo-pay-price-row {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   width: 100%;
 }
+/* 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;
@@ -4835,9 +5060,13 @@ line-height: 31px;
   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: center;
+  align-items: flex-start;
   gap: 2px;
 }
 .md3 .oo-pay-buy-leftgroup {