@bytebrand/fe-ui-core-autobahn 1.0.69 → 1.0.71

package/package.json

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

@@ -4286,8 +4286,8 @@ line-height: 31px;
    SRP card's desktop-only PricePaths output (mobile's PriceHero, used by the tab switcher, has
    no `.pricepaths` ancestor), so this can't leak into mobile without an extra media query. */
 .md3 .listcard-price .pricepaths .pp-hero-val {
-  font-size: 65px;
-  line-height: 58px;
+  font-size: 55px;
+  line-height: 49px;
   letter-spacing: -2px;
 }
 .md3 .listcard-price .pricepaths .pp-hero-val--len4 { font-size: 42px; line-height: 45px; }
@@ -4306,7 +4306,7 @@ line-height: 31px;
 .md3 .listcard-price .pricepaths .pp-hero-old {
   position: relative;
   display: inline-block;
-  font-size: 17px;
+  font-size: 14px;
   font-weight: 400;
   color: #0e2238;
   text-decoration: none;
@@ -4314,13 +4314,19 @@ line-height: 31px;
 .md3 .listcard-price .pricepaths .pp-hero-old::after {
   content: '';
   position: absolute;
-  left: -2px;
-  right: -2px;
+  left: -1px;
+  right: -1px;
   top: 50%;
   border-top: 2px solid #e60000;
   transform: rotate(12.53deg);
   transform-origin: center;
 }
+/* the "/mtl." unit stacked BELOW the old price inside the UVP-Rate group — at the bare-unit's
+   18px base it was the single widest line in the column (wider than the 14px old price or the
+   8px UVP-Rate caption above it), pushing the badge + old-price past the card edge (reported:
+   both visibly clipped). Narrower here since it has two lines of context above it, unlike the
+   no-discount case (.pp-hero-val + .pp-hero-unit above) which stands alone next to the rate. */
+.md3 .listcard-price .pricepaths .pp-hero-unit-group .pp-hero-unit { font-size: 14px; }
 /* keep the rate + its UVP/old-price/unit group on ONE line (matches .cc-price's own override) —
    without this the group wraps below the rate the moment the column runs a few px short. */
 .md3 .listcard-price .pricepaths .pp-hero-rate {
@@ -4359,7 +4365,7 @@ line-height: 31px;
   justify-content: center;
   position: absolute;
   top: -5px;
-  right: -8px;
+  right: -1px;
   border-radius: 50%;
   width: 12px;
   height: 11px;
@@ -4372,7 +4378,7 @@ line-height: 31px;
 }
 .md3 .listcard-price .pricepaths .pp-hero-old .pp-eyebrow-badge {
   top: -7px;
-  right: -12px;
+  right: -3px;
 }
 .md3 .listcard-price .pricepaths .pp-uvp-tooltip {
   position: absolute;
@@ -4405,6 +4411,11 @@ line-height: 31px;
 .md3 .listcard-price .pricepaths .pp-uvp-tooltip-close svg { width: 14px; height: 14px; }
 .md3 .listcard-price .pricepaths .pp-uvp-tooltip-body { font-size: 11px; line-height: 13px; color: #0e2238; }
 .md3 .pp-hero-terms { margin-top: 9px; font-size: 11.5px; color: var(--md-on-surface-variant); }
+/* desktop mcard financing hero terms line: at the shared 11.5px size "0 € Anzahlung · 60 Monate
+   Laufzeit · Details" needs ~223px but the 240px column only leaves ~207px, so "Details" wrapped
+   onto its own line — shrunk just enough (measured against the real column width) to keep it on
+   one line, matching the Figma reference. */
+.md3 .listcard-price .pricepaths .pp-hero-terms { font-size: 10.5px; }
 /* "Details" link at the end of the financing/leasing terms lines (Figma "mcard") — quiet, same
    color as the rest of the terms line but underlined so it still reads as tappable. */
 .md3 .pp-details-link { color: var(--md-primary); text-decoration: underline; font-weight: 600; white-space: nowrap; }
@@ -4453,10 +4464,15 @@ line-height: 31px;
   color: var(--md-outline);
   flex: none;
 }
+/* Figma "mcard": Leasing's price is already one line (no old price to caption); Kaufen's struck
+   old price + new price used to stack on two lines (column), giving the row double the height and
+   breaking the row-to-row rhythm with Leasing right above it — same line now, old price baseline-
+   aligned beside the new one, matching the reference exactly. */
 .md3 .pp-row-price {
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
+  flex-direction: row;
+  align-items: baseline;
+  gap: 8px;
   line-height: 1.08;
   min-width: 0;
 }