@bytebrand/fe-ui-core-autobahn 1.0.60 → 1.0.61

package/theme/md3.css

@@ -3869,11 +3869,10 @@ line-height: 31px;
   min-height: 230px;
 }
 
-/* grid card media — fixed 4:3, hairline seam so the white photo area reads as a zone */
+/* grid card media — fixed 4:3 */
 .md3 .cc-media {
   aspect-ratio: 4 / 3;
   width: 100%;
-  border-bottom: 1px solid var(--md-outline-variant);
 }
 .md3 .cc-media .cardcar {
   height: 100%;
@@ -3933,6 +3932,52 @@ line-height: 31px;
   font-weight: 600;
   white-space: nowrap;
 }
+/* Car Card gallery overlay pills (Figma "Vehicle Gallery / Photos Button" node 281:1016 and
+   "Push Chips / Likes" node 297:1037) — light glass pill, distinct from the dark `.imglabel`
+   used elsewhere (VDP main gallery) and from the older `.gallery-pill` iteration above. */
+.md3 .cc-photo-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  height: 30px;
+  padding: 0 12px;
+  border-radius: 16px;
+  background: rgba(245, 247, 250, 0.5);
+  border: 1px solid #E5EAF0;
+  backdrop-filter: blur(2px);
+  color: #111820;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 700;
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard);
+}
+.md3 .cc-photo-pill:hover {
+  background: rgba(245, 247, 250, 0.85);
+  border-color: #d4dde7;
+}
+.md3 .cc-activity-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 13px;
+  height: 30px;
+  padding: 0 12px;
+  border-radius: 16px;
+  background: rgba(245, 247, 250, 0.5);
+  border: 1px solid #E5EAF0;
+  backdrop-filter: blur(2px);
+  white-space: nowrap;
+}
+.md3 .cc-activity-pill-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: #1D2A38;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 700;
+  font-size: 12px;
+}
 .md3 .listcard-info {
   padding: 16px 18px;
   display: flex;
@@ -4214,11 +4259,25 @@ line-height: 31px;
 /* struck-through reference rate/price shown next to the tabbed hero price (Figma card) —
    same red strike as .pp-old, sized for the hero context rather than the compact list row. */
 .md3 .pp-hero-old { font-size: 15px; color: var(--md-error); text-decoration: line-through; white-space: nowrap; }
-.md3 .pp-hero-val sup, .md3 .pp-hero-old sup, .md3 .pp-hero-unit sup { font-size: .6em; }
 .md3 .pp-hero-terms { margin-top: 9px; font-size: 11.5px; color: var(--md-on-surface-variant); }
 /* "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; }
+/* z.B./old-rate/unit column beside the CarCard hero figure — mirrors .fin-rate-unit
+   (FinanceCalculator.tsx/md3.css) exactly; only used inside .cc-price's PriceHero. */
+.md3 .pp-hero-unit-group {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.25;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--md-on-surface-variant);
+  flex: none;
+}
+.md3 .cc-price .pp-hero-rate {
+  align-items: center;
+  flex-wrap: nowrap;
+}
 /* separator line between the financing block and the leasing row (legacy-design parity) */
 .md3 .pp-lease-row {
   margin-top: 16px;
@@ -4360,14 +4419,362 @@ line-height: 31px;
 /* grid Car Card price block (Figma "Component | Car Card | Desktop") — the hero price/tabs are
    much larger here than the shared .pp-hero-* sizing used to give them (those classes are only
    consumed inside .cc-price now, so bumping them here is safe). */
+.md3 .cc-card .md-title {
+  font-family: Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 27px;
+  color: #0e2238;
+  margin-bottom: 6px;
+}
+.md3 .cc-card .md-body-sm {
+  font-family: Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 17px;
+  color: #0e2238;
+  margin-bottom: 6px;
+}
+/* SpecLine is only ever used by CarCard (not CarRow) — safe to reach into its inline
+   font-size/color with !important rather than plumbing a style-override prop through it. */
+.md3 .cc-card .cc-spec {
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 11px !important;
+  line-height: 15px;
+  color: #1d2a38 !important;
+  margin-bottom: 10px;
+}
+/* deal chips (Ersparnis / -X% / 0€ Anzahlung) — Figma: 30px tall pill (15px radius = half the
+   height), 14px bold, a tint of the icon/text color (~20% bg, ~5% border). Was previously gated
+   to min-width:1025px (mobile fell back to the plain-JSX solid-fill/white-pill treatment);
+   applied at every width now so mobile CarCard matches too. */
+.md3 .cc-card .cc-badges {
+  gap: 8px !important;
+}
+.md3 .cc-card .deal-chip {
+  height: 30px !important;
+  padding: 0 10px !important;
+  border-radius: 15px !important;
+  font-size: 14px !important;
+  font-weight: 700 !important;
+  box-shadow: none !important;
+  border: 1px solid transparent;
+}
+.md3 .cc-card .deal-chip--drop {
+  background: rgba(17, 110, 57, 0.2) !important;
+  border-color: rgba(17, 110, 57, 0.05);
+  color: #116e39 !important;
+}
+.md3 .cc-card .deal-chip--percent {
+  background: rgba(217, 45, 32, 0.2) !important;
+  border-color: rgba(217, 45, 32, 0.05);
+  color: #d92d20 !important;
+}
+.md3 .cc-card .deal-chip--zerodown {
+  background: rgba(0, 92, 255, 0.2) !important;
+  border-color: rgba(0, 92, 255, 0.05);
+  color: #005cff !important;
+}
+/* NEU badge — Figma: amber tint pill, not the mobile solid-primary-blue pill */
+.md3 .cc-card .neu-badge {
+  height: 30px;
+  padding: 0 10px;
+  background: rgba(255, 184, 0, 0.2);
+  border: 1px solid rgba(255, 184, 0, 0.05);
+  color: #ffb800;
+  font-size: 13px;
+}
+/* "⚡ Angebot" badge — Figma: black-tinted ROUNDED RECT (10px radius, not a full pill), black
+   text — bigger than and visually distinct from the mobile dark-solid pill. */
+.md3 .cc-card .offer-badge {
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  color: #000;
+  font-size: 14px;
+}
+.md3 .cc-card .offer-badge .lucide {
+  width: 15px;
+  height: 15px;
+  color: #000;
+}
 .md3 .cc-price .fin-tabs { margin-bottom: 12px; }
-.md3 .cc-price .fin-tab { font-size: 17px; font-weight: 700; padding: 8px 4px; }
-.md3 .cc-price .pp-eyebrow { font-size: 13px; margin-bottom: 2px; }
-.md3 .cc-price .pp-hero-val { font-size: 44px; letter-spacing: -1.5px; }
-.md3 .cc-price .pp-hero-old { font-size: 20px; }
-.md3 .cc-price .pp-hero-unit { font-size: 16px; }
-.md3 .cc-price .pp-bar { height: 7px; }
-.md3 .cc-price .pp-bar-dot { width: 16px; height: 16px; }
+.md3 .cc-price .fin-tab { font-size: 17px; font-weight: 700; padding: 10px 5px; }
+/* Finanzierung tab price row (Figma "similar cars" card) — matches the VDP finance-calculator's
+   MOBILE .fin-price-grid treatment one-to-one (same rate/old-price/pill typography and colors),
+   by explicit spec. Previously gated to min-width:601px (left the pre-existing mobile .cc-card
+   price row alone); now applied at every width on request, so mobile CarCard matches too. */
+  .md3 .cc-price .pp-eyebrow,
+  .md3 .fin-calc-card .pp-eyebrow {
+    position: relative;
+    font-family: Arial, Helvetica, sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 8px;
+    line-height: 9px;
+    letter-spacing: normal;
+    text-transform: none;
+    color: #0e2238;
+    margin-bottom: 2px;
+  }
+  /* footnote badge (small bordered circle, not a plain <sup>) pinned to the eyebrow's top-right
+     corner — absolute against .pp-eyebrow's own position:relative above. Shared by the CarCard
+     hero (.cc-price) and the VDP FinanceCalculator's own rate example (.fin-calc-card). */
+  .md3 .cc-price .pp-eyebrow-badge,
+  .md3 .fin-calc-card .pp-eyebrow-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: -5px;
+    right: -8px;
+    border-radius: 50%;
+    width: 12px;
+    height: 11px;
+    background: rgba(255, 255, 255, 0.96);
+    border: 0.5px solid #005cff;
+    font-family: Arial, Helvetica, sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 8px;
+    line-height: 9px;
+    text-align: center;
+    color: #0e2238;
+    cursor: pointer;
+  }
+  /* mobile-only nudge: same badge, tucked slightly closer to the eyebrow text on narrow cards. */
+  @media (max-width: 1024px) {
+    .md3 .cc-price .pp-eyebrow-badge {
+      top: -5px;
+      right: -5px;
+    }
+  }
+  /* "2" badge (Kaufen, nested in .pp-hero-old instead of .pp-eyebrow) sits closer to the price
+     figure than the "3" badge's own offsets above. */
+  .md3 .cc-price .pp-hero-old .pp-eyebrow-badge,
+  .md3 .fin-calc-card .pp-hero-old .pp-eyebrow-badge {
+    top: -7px;
+    right: -12px;
+  }
+  /* "3" footnote popover — click the badge above to open, the × or an outside click to close. */
+  .md3 .cc-price .pp-uvp-tooltip,
+  .md3 .fin-calc-card .pp-uvp-tooltip {
+    position: absolute;
+    top: 6px;
+    right: -84px;
+    z-index: 20;
+    width: 281px;
+    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;
+  }
+  /* floating circular close button — overlaps the tooltip's top-right corner from outside,
+     same "glass circle" convention as VdpViewer's close/back/next overlay buttons. */
+  .md3 .cc-price .pp-uvp-tooltip-close,
+  .md3 .fin-calc-card .pp-uvp-tooltip-close {
+    position: absolute;
+    top: -38px;
+    right: -35px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: rgba(11, 19, 32, 0.35);
+    border: 1.5px solid rgba(255, 255, 255, 0.25);
+    padding: 0;
+    cursor: pointer;
+  }
+  .md3 .cc-price .pp-uvp-tooltip-body,
+  .md3 .fin-calc-card .pp-uvp-tooltip-body {
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: 400;
+    font-size: 11px;
+    line-height: 13px;
+    color: #0e2238;
+  }
+  .md3 .cc-price .pp-hero-val {
+    font-family: Arial, Helvetica, sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 65px;
+    line-height: 58px;
+    letter-spacing: -2px;
+    color: #005cff;
+  }
+  /* long rates shrink so the hero figure doesn't overflow the card. */
+  .md3 .cc-price .pp-hero-val--len4 {
+    font-size: 50px;
+    line-height: 53px;
+  }
+  .md3 .cc-price .pp-hero-val--len5 {
+    font-size: 43px;
+    line-height: 45px;
+  }
+  .md3 .cc-price .pp-hero-val--len6 {
+    font-size: 37px;
+    line-height: 40px;
+  }
+  /* diagonal red strike (Figma), replacing the native horizontal line-through — shared by the
+     CarCard hero (.cc-price) and the VDP FinanceCalculator's mobile Kaufen old price
+     (.fin-calc-card, .fin-rate-old-list). */
+  .md3 .cc-price .pp-hero-old,
+  .md3 .fin-calc-card .pp-hero-old {
+    position: relative;
+    display: inline-block;
+    font-family: Arial, Helvetica, sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 17px;
+    line-height: 20px;
+    letter-spacing: 0;
+    color: #0e2238;
+    text-decoration: none;
+  }
+  .md3 .cc-price .pp-hero-old::after,
+  .md3 .fin-calc-card .pp-hero-old::after {
+    content: "";
+    position: absolute;
+    left: -2px;
+    right: -2px;
+    top: 50%;
+    border-top: 2px solid #e60000;
+    transform: rotate(12.53deg);
+    transform-origin: center;
+  }
+  .md3 .cc-price .pp-hero-old--len4,
+  .md3 .fin-calc-card .pp-hero-old--len4 {
+    font-size: 13px;
+    line-height: 17px;
+  }
+  .md3 .cc-price .pp-hero-old--len5,
+  .md3 .fin-calc-card .pp-hero-old--len5 {
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: #0e2238;
+  }
+  .md3 .cc-price .pp-hero-unit {
+    font-family: Arial, Helvetica, sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 21px;
+    color: #5b6b7f;
+  }
+  /* Kaufen: the UVP/old-price group sits ABOVE the hero figure (Figma), not beside it like the
+     Finanzierung/Leasing z.B. column — stack the row and pull the group first via order. */
+  .md3 .cc-price .pp-hero--buy .pp-hero-rate {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+  }
+  .md3 .cc-price .pp-hero--buy .pp-hero-unit-group {
+    order: -1;
+    align-self: flex-end;
+  }
+  /* Preisbewertung pill + segmented tier bar, grouped in one column exactly like the VDP
+     finance-calculator's MOBILE .fin-eval-col (FinanceCalculator.tsx) — replaces the old
+     StatChip pill + full-width gradient .pp-bar (see PriceEvalCol in cardParts.tsx). No
+     grid here (unlike .fin-price-grid), so the 112px column width is set directly instead
+     of via grid-area/grid-template-columns. */
+  .md3 .cc-price .fin-eval-col {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 112px;
+    flex: none;
+  }
+  .md3 .cc-price .fin-eval-pill {
+    font-family: Arial, Helvetica, sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 14px;
+    text-align: center;
+  }
+  .md3 .cc-price .fin-eval-pill--good {
+    background: #dff3e5 !important;
+    border-radius: 11px !important;
+    width: 100%;
+    height: 27px;
+    box-sizing: border-box;
+    justify-content: center;
+  }
+  /* footnote 4 ("Top-Preis" claim) — .fin-eval-pill is a flex container, so vertical-align has
+     no effect on the sup (it's a flex item, not inline content); position:relative/top raises
+     it instead, same technique as the hero price's own 1/2/3 footnote markers. Shared by the
+     CarCard hero (.cc-price) and the VDP FinanceCalculator's own pill (.fin-calc-card). */
+  .md3 .cc-price .fin-eval-pill sup,
+  .md3 .fin-calc-card .fin-eval-pill sup {
+    position: relative;
+    top: 0px;
+    left: -4px;
+    font-size: 9px;
+    line-height: 9px;
+  }
+  .md3 .cc-price .fin-eval-bar {
+    height: 7px;
+  }
+  .md3 .cc-price .fin-eval-seg:first-child {
+    border-radius: 4px 0 0 4px;
+  }
+  .md3 .cc-price .fin-eval-seg:last-of-type {
+    border-radius: 0 4px 4px 0;
+  }
+  .md3 .cc-price .fin-eval-thumb {
+    width: 18px;
+    height: 18px;
+    border-width: 2px;
+    border-radius: 9px;
+  }
+  .md3 .cc-price .fin-eval-thumb--good {
+    border-color: #168a45 !important;
+  }
+/* financing/leasing terms line + "Finanzierungsdetails"/"Leasingdetails" link (PriceTerms in
+   cardParts.tsx), full-width under the price/rating row. Same quiet typography as .pp-hero-terms
+   (PricePaths); the link resets button chrome and reuses the primary color so it reads as tappable. */
+.md3 .cc-terms {
+  margin-top: 9px;
+  font-family: Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 15px;
+  color: #0e2238;
+}
+.md3 .cc-terms-dot {
+  display: inline-block;
+  margin: 0 2px;
+  color: #5b6b7f;
+  font-size: 20px;
+  line-height: 0;
+  vertical-align: -2px;
+}
+.md3 .cc-terms-link {
+  border: 0;
+  background: none;
+  padding: 0;
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 15px;
+  letter-spacing: -0.03em;
+  color: #0e2238;
+  cursor: pointer;
+}
 /* card CTA row (Angebot anfragen / phone / Rate anpassen) — the shared .mbtn padding (0 24px)
    and 14px font were sized for full-width VDP buttons; at a ~330-360px card/column width three
    buttons with real text at that size overflow their flex share. Scoped-down here only. */
@@ -4652,6 +5059,14 @@ line-height: 31px;
   gap: 12px;
   flex-wrap: wrap;
 }
+/* "Persönliche Beratung. Wir sind für Sie da!" — mobile .fin-info, icon + one line. */
+.md3 .fin-info-line {
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  color: #0e2238;
+}
 .md3 .fin-id {
   font-size: 12px;
   color: var(--md-on-surface-variant);
@@ -6093,7 +6508,7 @@ line-height: 31px;
    (14px) than the 14/24px desktop default set inline. */
 @media (max-width: 600px) {
   .md3 .vdp-main {
-    padding: 10px 14px 48px !important;
+    padding: 0 14px 48px !important;
   }
   .md3 .vdp-push-badges {
     gap: 6px;
@@ -6144,7 +6559,7 @@ background: ;
  */
 
 .md3 .push-badge--save {
-  background: rgba(17, 110, 57, 0.2);
+  background: color-mix(in srgb, #116e39 20%, white);
   color: #116e39;
   border: 1px solid rgba(17, 110, 57, 0.05);
   font-family: Arial, Helvetica, sans-serif;
@@ -6158,7 +6573,7 @@ background: ;
   color: #116e39;
 }
 .md3 .push-badge--discount {
-  background: rgba(217, 45, 32, 0.2);
+  background: color-mix(in srgb, #d92d20 20%, white);
   border: 1px solid rgba(217, 45, 32, 0.05);
   color: #D92D20;
   font-weight: 700;
@@ -6169,7 +6584,7 @@ background: ;
   font-weight: 700;
 font-size: 13px;
 line-height: 15px;
-background: rgba(0, 92, 255, 0.2);
+background: color-mix(in srgb, #005cff 20%, white);
 border: 1px solid rgba(0, 92, 255, 0.05);
 border-radius: 15px;
 color: #005CFF;
@@ -6177,7 +6592,7 @@ color: #005CFF;
 /* NEU badge, as the trailing pill inside the vdp-push-badges row (VDP mobile mockup) —
    scoped override, the base .neu-badge above still serves the car-card usage. */
 .md3 .vdp-push-badges .neu-badge {
-  background: rgba(255, 184, 0, 0.2);
+  background: color-mix(in srgb, #ffb800 20%, white);
   border: 1px solid rgba(255, 184, 0, 0.05);
   border-radius: 15px;
   font-weight: 700;
@@ -6306,34 +6721,6 @@ color: #005CFF;
     gap: 0;
     justify-content: flex-start;
   }
-  .md3 .fin-info-main {
-    flex: 0 0 53% !important;
-    width: 53%;
-    padding-left: 21px;
-    box-sizing: border-box;
-  }
-  .md3 .fin-info-details-btn {
-    flex: 0 0 37%;
-    width: 30%;
-    box-sizing: border-box;
-  }
-  .md3 .fin-info-sub {
-    font-family: Arial, Helvetica, sans-serif;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 14px;
-    color: #111820;
-  }
-  .md3 .fin-info-details-label {
-    font-family: Arial, Helvetica, sans-serif;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 10px;
-    line-height: 16px;
-    color: #111820;
-    width: 69px;
-  }
   .md3 .fin-adjust-btn-label {
     font-family: Arial, Helvetica, sans-serif;
     font-style: normal;
@@ -7336,6 +7723,24 @@ color: #005CFF;
     line-height: 58px !important;
     color: #005cff !important;
   }
+  /* mobile Kaufen UVP-strike text (.pp-hero-old, shared with CarCard) also carries .num for its
+     tabular-nums digits, so the 65px blue hero rule above would otherwise win via !important —
+     repeat with !important here, same technique as .fin-rate-cash-mobile below. */
+  .md3 .fin-rate-main .num.pp-hero-old {
+    font-family: Arial, Helvetica, sans-serif !important;
+    font-weight: 400 !important;
+    font-size: 17px !important;
+    line-height: 20px !important;
+    color: #0e2238 !important;
+  }
+  .md3 .fin-rate-main .num.pp-hero-old.pp-hero-old--len4 {
+    font-size: 13px !important;
+    line-height: 17px !important;
+  }
+  .md3 .fin-rate-main .num.pp-hero-old.pp-hero-old--len5 {
+    font-size: 14px !important;
+    line-height: 16px !important;
+  }
   /* Kaufen/Barzahlung tab hero price (mobile) — same family/weight/line-height/color as
      the shared .num rule above, just a smaller size for this specific instance. */
   .md3 .fin-rate-main .num.fin-rate-cash-mobile {
@@ -7382,14 +7787,6 @@ color: #005CFF;
   .md3 .fin-rate-main .fin-rate-hero.fin-rate-hero--len6 {
     font-size: 36px !important;
   }
-  /* "Finanzierung & Leasing möglich" note (mobile) */
-  .md3 .fin-financing-leasing-note {
-    font-family: Arial, Helvetica, sans-serif !important;
-    font-weight: 400 !important;
-    font-size: 10px !important;
-    line-height: 16px !important;
-    color: #111820 !important;
-  }
   /* the struck old figure must NOT inherit the new hero rate styling (font, weight,
      color, line-height) — only the hero .num itself gets the 65px treatment */
   .md3 .fin-rate-main .fin-rate-old {
@@ -7556,6 +7953,16 @@ color: #005CFF;
     color: #111820;
     margin-bottom: 12px;
   }
+  /* "Finanzierungsdetails"/"Leasing-Details" reads as a link here (unlike CarCard's quiet
+     .cc-terms-link, which stays text-colored on purpose) — underlined. */
+  .md3 .fin-cond .cc-terms-link {
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    color: #0e2238;
+    text-decoration: underline;
+  }
   .md3 .fin-rate-main > div {
     flex-wrap: wrap;
   }
@@ -9278,3 +9685,82 @@ color: #005CFF;
     grid-template-columns: repeat(4, 1fr);
   }
 }
+
+/* ==========================================================================
+   CarCard (libs/packages/fe-ui-core-autobahn/cards/CarCard.tsx) — the grid
+   card reused on VDP's "Ähnliche Fahrzeuge" section (VehicleDetailedNextPage
+   .vdp-similar / .cards-3) — desktop-only pixel-match to Figma "Component |
+   Car Card | Desktop", file 2U6FNIz6STpwSBoqvLIKRV:
+     - Finanzierung tab active → node 245:752
+     - Leasing tab active      → node 318:1366
+     - Kaufen tab active       → node 331:1891
+   Confirmed with the user: only the price/rating block actually changes with
+   the active tab — the image treatment/gallery-nav differences between the
+   3 frames are just 3 different demo cars' own data, not a tab-driven
+   restyle, so those are intentionally left alone here.
+   Mobile AND tablet are untouched: `.cards-3` itself drops to 2 columns at
+   <=1024px (existing rule above), so "desktop" here starts at 1025px — every
+   rule below is inside that query, and every selector requires
+   `.cc-card`/`.cc-price` so nothing here can leak into any other
+   `.mcard`/`.statchip`/`.neu-badge`/etc. usage elsewhere on the site.
+   ========================================================================== */
+@media (min-width: 1025px) {
+  /* card shell: 18px corners, #d4dde7 border, resting elevation (Figma shows this shadow at
+     rest, not just on hover — the existing .mcard--interactive:hover elevation is untouched). */
+  .md3 .cc-card {
+    border-radius: 18px;
+    border-color: #d4dde7;
+    box-shadow: 0px 3px 14px 0px rgba(14, 34, 56, 0.09);
+  }
+
+  /* favorite heart + top-left badge stack position (Figma: heart top15/right11 of a 362-wide
+     card; badge stack starts top15, row gap 8 between the chip row and the Angebot badge). */
+  .md3 .cc-card .cc-fav {
+    top: 15px !important;
+    right: 11px !important;
+  }
+  .md3 .cc-card .cc-badges {
+    top: 15px !important;
+  }
+
+  /* hero price — Figma's rate figure (Finanzierung/Leasing) is much larger than the shared
+     .cc-price sizing; the flat purchase price (Kaufen, .pp-hero--buy) stays smaller since real
+     purchase prices run 5-6 digits and would overflow the card at the rate-sized figure. */
+  .md3 .cc-price .pp-hero--buy .pp-hero-val {
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: 700;
+    font-size: 52px;
+    line-height: 58px;
+    color: #005cff;
+  }
+  /* 6-digit purchase price (e.g. 113.249 €) shrinks further so it still fits. */
+  .md3 .cc-price .pp-hero--buy .pp-hero-val.pp-hero-val--buy-len6 {
+    font-size: 48px;
+    line-height: 54px;
+  }
+  /* 7-digit purchase price (e.g. 1.553.249 €) shrinks even further. */
+  .md3 .cc-price .pp-hero--buy .pp-hero-val.pp-hero-val--buy-len7 {
+    font-size: 43px;
+    line-height: 47px;
+  }
+
+  /* Finanzierung/Leasing/Kaufen tabs — Figma: only the ACTIVE tab is bold + Deep Navy #0e2238
+     inactive text (the shared .fin-tab rule bolds both and uses #111820, since the VDP
+     finance-calculator tabs it's shared with want both bold there); base divider and active
+     underline are literal Figma tokens (#d4dde7 divider, #005cff underline with 2px-rounded
+     ends), not the site-wide --md-outline-variant/--md-primary shades. */
+  .md3 .cc-price .fin-tabs {
+    border-bottom-color: #d4dde7;
+  }
+  .md3 .cc-price .fin-tab {
+    font-weight: 400;
+    color: #0e2238;
+  }
+  .md3 .cc-price .fin-tab.on {
+    font-weight: 700;
+    color: #005cff;
+    border-bottom-width: 3px;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+}