@bytebrand/fe-ui-core-autobahn 1.0.74 → 1.0.76

package/theme/md3.css

@@ -4626,17 +4626,20 @@ line-height: 31px;
   border: 1px solid transparent;
 }
 .md3 .cc-card .deal-chip--drop {
-  background: rgba(17, 110, 57, 0.2) !important;
+  /* solid equivalent of rgba(17, 110, 57, 0.2) over white — the badge now sits over an
+     edge-to-edge photo (CardCarousel padding removed), so a translucent fill let the image
+     show through instead of the intended pastel tint. */
+  background: rgb(207, 226, 215) !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;
+  background: rgb(247, 213, 210) !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;
+  background: rgb(204, 222, 255) !important;
   border-color: rgba(0, 92, 255, 0.05);
   color: #005cff !important;
 }
@@ -4644,7 +4647,7 @@ line-height: 31px;
 .md3 .cc-card .neu-badge {
   height: 30px;
   padding: 0 10px;
-  background: rgba(255, 184, 0, 0.2);
+  background: rgb(255, 241, 204);
   border: 1px solid rgba(255, 184, 0, 0.05);
   color: #ffb800;
   font-size: 13px;
@@ -4655,7 +4658,7 @@ line-height: 31px;
   height: 30px;
   padding: 0 10px;
   border-radius: 10px;
-  background: rgba(0, 0, 0, 0.2);
+  background: rgb(204, 204, 204);
   border: 1px solid rgba(0, 0, 0, 0.05);
   color: #000;
   font-size: 14px;
@@ -4667,12 +4670,34 @@ line-height: 31px;
 }
 .md3 .cc-price .fin-tabs { margin-bottom: 12px; }
 .md3 .cc-price .fin-tab { font-size: 17px; font-weight: 700; padding: 10px 5px; }
+@media (max-width: 1024px) {
+  /* mobile CarCard tabs: only the ACTIVE tab bold + blue, matching the min-width:1025px desktop
+     override further below — :not(.on) matches its specificity so a later, equal-specificity
+     rule (.md3 .fin-tab:not(.on), bold+#111820 for both states) can't win the cascade on
+     source-order alone. */
+  .md3 .cc-price .fin-tab:not(.on) {
+    font-family: 'Arial';
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: #0E2238;
+  }
+  .md3 .cc-price .fin-tab.on {
+    font-family: 'Arial';
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 16px;
+    color: #005CFF;
+  }
+}
 /* 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 {
+  .md3 .fin-calc-card .pp-eyebrow,
+  .md3 .vdp-bottom-bar .pp-eyebrow,
+  .md3 .fin-modal .pp-eyebrow {
     position: relative;
     font-family: Arial, Helvetica, sans-serif;
     font-style: normal;
@@ -4688,7 +4713,9 @@ line-height: 31px;
      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 {
+  .md3 .fin-calc-card .pp-eyebrow-badge,
+  .md3 .vdp-bottom-bar .pp-eyebrow-badge,
+  .md3 .fin-modal .pp-eyebrow-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -4711,7 +4738,9 @@ line-height: 31px;
   }
   /* 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 {
+    .md3 .cc-price .pp-eyebrow-badge,
+    .md3 .vdp-bottom-bar .pp-eyebrow-badge,
+    .md3 .fin-modal .pp-eyebrow-badge {
       top: -5px;
       right: -5px;
     }
@@ -4719,13 +4748,17 @@ line-height: 31px;
   /* "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 {
+  .md3 .fin-calc-card .pp-hero-old .pp-eyebrow-badge,
+  .md3 .vdp-bottom-bar .fin-rate-old-bb .pp-eyebrow-badge,
+  .md3 .fin-modal .fin-rate-old-list .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 {
+  .md3 .fin-calc-card .pp-uvp-tooltip,
+  .md3 .vdp-bottom-bar .pp-uvp-tooltip,
+  .md3 .fin-modal .pp-uvp-tooltip {
     position: absolute;
     top: 6px;
     right: -84px;
@@ -4738,10 +4771,18 @@ line-height: 31px;
     white-space: normal;
     cursor: default;
   }
+  /* the bottom bar spans nearly the full phone width, so the shared -84px offset (tuned for
+     the narrower .cc-price card / .fin-calc-card sheet) leaves the popover sitting too far left. */
+  .md3 .vdp-bottom-bar .pp-uvp-tooltip {
+    top: -20px;
+    right: -110px;
+  }
   /* 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 {
+  .md3 .fin-calc-card .pp-uvp-tooltip-close,
+  .md3 .vdp-bottom-bar .pp-uvp-tooltip-close,
+  .md3 .fin-modal .pp-uvp-tooltip-close {
     position: absolute;
     top: -38px;
     right: -35px;
@@ -4757,7 +4798,9 @@ line-height: 31px;
     cursor: pointer;
   }
   .md3 .cc-price .pp-uvp-tooltip-body,
-  .md3 .fin-calc-card .pp-uvp-tooltip-body {
+  .md3 .fin-calc-card .pp-uvp-tooltip-body,
+  .md3 .vdp-bottom-bar .pp-uvp-tooltip-body,
+  .md3 .fin-modal .pp-uvp-tooltip-body {
     font-family: Arial, Helvetica, sans-serif;
     font-weight: 400;
     font-size: 11px;
@@ -4845,6 +4888,25 @@ line-height: 31px;
     order: -1;
     align-self: flex-end;
   }
+  /* Kaufen hero price on mobile — was falling through to the generic (rate-sized) .pp-hero-val
+     above (65px, shrinking only via the rate-digit len4/5/6 classes cardParts.tsx never applies
+     in Kaufen mode), so real purchase prices had no digit-based shrink at all here and could
+     overflow. Mirrors the existing min-width:1025px desktop rule exactly. */
+  .md3 .cc-price .pp-hero--buy .pp-hero-val {
+    font-family: 'Arial';
+    font-weight: 700;
+    font-size: 52px;
+    line-height: 58px;
+    color: #005CFF;
+  }
+  .md3 .cc-price .pp-hero--buy .pp-hero-val.pp-hero-val--buy-len6 {
+    font-size: 48px;
+    line-height: 54px;
+  }
+  .md3 .cc-price .pp-hero--buy .pp-hero-val.pp-hero-val--buy-len7 {
+    font-size: 43px;
+    line-height: 47px;
+  }
   /* 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
@@ -4876,9 +4938,11 @@ line-height: 31px;
   /* 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). */
+     CarCard hero (.cc-price), the VDP FinanceCalculator's own pill (.fin-calc-card), and the
+     FinanceDetailsModal's embedded mobile rate sheet (.fin-modal). */
   .md3 .cc-price .fin-eval-pill sup,
-  .md3 .fin-calc-card .fin-eval-pill sup {
+  .md3 .fin-calc-card .fin-eval-pill sup,
+  .md3 .fin-modal .fin-eval-pill sup {
     position: relative;
     top: 0px;
     left: -4px;
@@ -4908,11 +4972,12 @@ line-height: 31px;
    (PricePaths); the link resets button chrome and reuses the primary color so it reads as tappable. */
 .md3 .cc-terms {
   margin-top: 9px;
+  margin-bottom: 10px;
   font-family: Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 400;
-  font-size: 13px;
-  line-height: 15px;
+  font-size: 12px;
+  line-height: 14px;
   color: #0e2238;
 }
 .md3 .cc-terms-dot {
@@ -4935,6 +5000,7 @@ line-height: 31px;
   line-height: 15px;
   letter-spacing: -0.03em;
   color: #0e2238;
+  text-decoration: underline;
   cursor: pointer;
 }
 /* card CTA row (Angebot anfragen / phone / Rate anpassen) — the shared .mbtn padding (0 24px)
@@ -4994,6 +5060,12 @@ line-height: 31px;
   border-bottom: 1px solid var(--md-outline-variant);
   margin-bottom: 18px;
 }
+/* VDP FinanceCalculator card only — scoped so it doesn't touch .vdp-bottom-bar / .fin-modal-body /
+   .vdp-aside's own .fin-tabs margins (desktop base + mobile override above are both 1-class, so
+   this 2-class selector wins purely on specificity regardless of viewport or source order). */
+.md3 .fin-calc-card .fin-tabs {
+  margin-bottom: 10px;
+}
 .md3 .fin-tab {
   flex: 1;
   background: none;
@@ -5034,7 +5106,7 @@ line-height: 31px;
   grid-template-areas: "rate pill" "cond bar";
   gap: 12px 16px;
   align-items: center;
-  margin-top: 8px;
+  margin-top: 0;
 }
 .md3 .fin-rate-main {
   grid-area: rate;
@@ -5487,7 +5559,24 @@ line-height: 31px;
 }
 .md3 .bb-tabs .fin-tab {
   padding: 15px 14px 10px 14px;
-  font-size: 13.5px;
+}
+/* :not(.on) — a later, equal-specificity mobile rule (.md3 .fin-tab:not(.on), Figma "dark +
+   bold" spec for the desktop-style tabs) would otherwise win on source order alone; matching
+   its :not(.on) here brings this to 4 classes vs its 3 so bb-tabs always wins regardless of
+   where either rule sits in the file. */
+.md3 .bb-tabs .fin-tab:not(.on) {
+  font-family: 'Arial';
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  color: #0E2238;
+}
+.md3 .bb-tabs .fin-tab.on {
+  font-family: 'Arial';
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 16px;
+  color: #005CFF;
 }
 .md3 .bb-price-row .num.num--len5 {
   font-size: 42px;
@@ -7993,15 +8082,6 @@ color: #005CFF;
     line-height: 9px;
     color: #111820;
   }
-  /* "z.B. 499 €² / mtl.³" representative-example line under the hero rate */
-  .md3 .fin-rate-main .fin-rate-example-label {
-    font-family: Arial, Helvetica, sans-serif;
-    font-style: normal;
-    font-weight: 700;
-    font-size: 10px;
-    line-height: 11px;
-    color: #5b6b7f;
-  }
   .md3 .fin-rate-main .fin-rate-example-price {
     position: relative;
     display: inline-block;