@bytebrand/fe-ui-core-autobahn 1.0.117 → 1.0.119

package/theme/md3.css

@@ -145,7 +145,7 @@
 }
 
 .md3 .md-headline {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-weight: 700;
   font-size: 27px;
 line-height: 31px;
@@ -379,7 +379,7 @@ line-height: 31px;
   height: 30px;
   padding: 0 9px;
   border-radius: 11px;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-style: normal;
   font-size: 11px;
   font-weight: 700;
@@ -466,7 +466,7 @@ line-height: 31px;
   min-width: 108px;
   height: 27px;
   border-radius: 11px;
-  font-family: 'Arial';
+  font-family: 'Arial', 'Arimo', sans-serif;
   font-weight: 700;
   font-size: 12px;
   line-height: 14px;
@@ -712,7 +712,7 @@ line-height: 31px;
    default (opacity ~0.54), so opacity:1 is needed to get the real #5b6b7f. */
 .md3 .mfield--floating input::placeholder,
 .md3 .mfield--floating textarea::placeholder {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-weight: 700;
   font-size: 16px;
   line-height: 14px;
@@ -3033,6 +3033,11 @@ line-height: 31px;
   left: auto;
   right: 0;
 }
+/* body-level portal menu: must paint over every fixed overlay its trigger can live in —
+   .sheet (71), .fin-modal-scrim (60), .vdp-photosheet (211), .mmodal-scrim (1300). */
+.md3 .mselect-menu--portal {
+  z-index: 1400;
+}
 .md3 .mselect-list {
   max-height: 288px;
   overflow-y: auto;
@@ -4153,15 +4158,15 @@ line-height: 31px;
 .md3 .cc-photo-pill {
   display: inline-flex;
   align-items: center;
-  gap: 3px;
+  gap: 12px;
   height: 30px;
-  padding: 0 12px;
+  padding: 0 19px;
   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-family: Arial, Helvetica, Arimo, sans-serif;
   font-weight: 700;
   font-size: 12px;
   white-space: nowrap;
@@ -4189,7 +4194,7 @@ line-height: 31px;
   align-items: center;
   gap: 2px;
   color: #1D2A38;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-weight: 700;
   font-size: 12px;
 }
@@ -4751,7 +4756,7 @@ line-height: 31px;
   top: 4px;
   left: 1px;
   vertical-align: super;
-  font-family: 'Arial', Helvetica, sans-serif;
+  font-family: 'Arial', Helvetica, Arimo, sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 8px;
@@ -4841,7 +4846,7 @@ line-height: 31px;
    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-family: Arial, Helvetica, Arimo, sans-serif;
   font-style: normal;
   font-weight: 700;
   font-size: 24px;
@@ -4850,7 +4855,7 @@ line-height: 31px;
   margin-bottom: 6px;
 }
 .md3 .cc-card .md-body-sm {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 13px;
@@ -4861,7 +4866,7 @@ line-height: 31px;
 /* 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-family: Arial, Helvetica, Arimo, sans-serif;
   font-weight: 400;
   font-size: 11px !important;
   line-height: 15px;
@@ -4920,8 +4925,8 @@ line-height: 31px;
   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,
+   text — bigger than and visually distinct from the mobile dark-solid pill. .listcard only —
+   .cc-card has its own newer spec below (fixed 96×30, translucent black, custom bolt icon). */
 .md3 .listcard .offer-badge {
   height: 30px;
   padding: 0 10px;
@@ -4931,12 +4936,51 @@ line-height: 31px;
   color: #000;
   font-size: 14px;
 }
-.md3 .cc-card .offer-badge .lucide,
 .md3 .listcard .offer-badge .lucide {
   width: 15px;
   height: 15px;
   color: #000;
 }
+/* .cc-card's own "Angebot" badge spec — fixed 96×30 rounded rect, translucent black fill,
+   Arial 700/14px text. box-sizing so the 10px horizontal padding + 1px border fit inside the
+   96px rather than adding to it. justify-content: center balances the icon+text group inside
+   that fixed width (.offer-badge is display:inline-flex; the base rule's gap:4px already
+   spaces the icon from the text). The shared lucide 'zap' icon (OfferBadge in cardParts.tsx,
+   also used by .listcard above) is hidden and redrawn via ::before with a custom bolt shape
+   instead of editing OfferBadge.tsx itself — same "hide-the-shared-icon, draw a scoped one"
+   approach as the CTA arrow / Anrede chevron elsewhere in this codebase — so this doesn't
+   touch .listcard's icon, and needs no active/inactive state (purely decorative, unlike the
+   cc-fav heart which does need state and so stayed a real inline SVG). */
+.md3 .cc-card .offer-badge {
+  width: 96px;
+  height: 30px;
+  box-sizing: border-box;
+  justify-content: center;
+  /* Asymmetric on purpose: with justify-content:center, shrinking padding-left and growing
+     padding-right by the same amount (sum still 20px, so the 96px width math above is
+     unaffected) shifts the centered icon+text group a few px left of the box's true center,
+     per the "трошки лівіше" ask — a plain center left it looking too dead-center/right-heavy
+     next to the deal-chip row above it. */
+  padding: 0 13px 0 7px;
+  border-radius: 15px;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  color: #000000;
+  font-family: 'Arial', 'Arimo', sans-serif;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 14px;
+}
+.md3 .cc-card .offer-badge .lucide {
+  display: none;
+}
+.md3 .cc-card .offer-badge::before {
+  content: '';
+  flex: 0 0 auto;
+  width: 15px;
+  height: 15px;
+  background: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.125 1.875L3.75 8.125H6.875L6.25 13.125L11.25 6.25H8.125V1.875Z' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
+}
 .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) {
@@ -4945,14 +4989,14 @@ line-height: 31px;
      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-family: 'Arial', 'Arimo', sans-serif;
     font-weight: 400;
     font-size: 14px;
     line-height: 16px;
     color: #0E2238;
   }
   .md3 .cc-price .fin-tab.on {
-    font-family: 'Arial';
+    font-family: 'Arial', 'Arimo', sans-serif;
     font-weight: 700;
     font-size: 14px;
     line-height: 16px;
@@ -4968,7 +5012,7 @@ line-height: 31px;
   .md3 .vdp-bottom-bar .pp-eyebrow,
   .md3 .fin-modal .pp-eyebrow {
     position: relative;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 8px;
@@ -5005,7 +5049,7 @@ line-height: 31px;
     height: 11px;
     background: rgba(255, 255, 255, 0.96);
     border: 0.5px solid #005cff;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 8px;
@@ -5118,14 +5162,14 @@ line-height: 31px;
   .md3 .vdp-bottom-bar .pp-uvp-tooltip-body,
   .md3 .fin-modal .pp-uvp-tooltip-body,
   .md3 .listcard-price .pp-old .pp-uvp-tooltip-body {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, 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-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 65px;
@@ -5153,7 +5197,7 @@ line-height: 31px;
   .md3 .fin-calc-card .pp-hero-old {
     position: relative;
     display: inline-block;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 17px;
@@ -5180,14 +5224,14 @@ line-height: 31px;
   }
   .md3 .cc-price .pp-hero-old--len5,
   .md3 .fin-calc-card .pp-hero-old--len5 {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, 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-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 18px;
@@ -5210,7 +5254,7 @@ line-height: 31px;
      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-family: 'Arial', 'Arimo', sans-serif;
     font-weight: 700;
     font-size: 52px;
     line-height: 58px;
@@ -5232,7 +5276,7 @@ line-height: 31px;
     top: 2px;
     left: 3px;
     vertical-align: super;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 8px;
@@ -5261,7 +5305,7 @@ line-height: 31px;
   .md3 .cc-price .fin-eval-pill,
   .md3 .fin-calc-card .fin-eval-pill,
   .md3 .fin-modal .fin-eval-pill {
-    font-family: 'Arial';
+    font-family: 'Arial', 'Arimo', sans-serif;
     font-weight: 700;
     font-size: 12px;
     line-height: 14px;
@@ -5318,7 +5362,7 @@ line-height: 31px;
 .md3 .cc-terms {
   margin-top: 9px;
   margin-bottom: 10px;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 12px;
@@ -5338,7 +5382,7 @@ line-height: 31px;
   background: none;
   padding: 0;
   margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 13px;
@@ -5423,7 +5467,7 @@ line-height: 31px;
   padding: 11px 4px;
   cursor: pointer;
   font: inherit;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-style: normal;
   font-size: 14px;
   font-weight: 700;
@@ -5437,7 +5481,7 @@ line-height: 31px;
 .md3 .fin-tab.on {
   color: #005cff;
   border-bottom-color: var(--md-primary);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-style: normal;
   font-weight: 700;
   font-size: 14px;
@@ -5475,7 +5519,7 @@ line-height: 31px;
   top: 6px;
   left: 3px;
   vertical-align: super;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 8px;
@@ -5585,7 +5629,7 @@ line-height: 31px;
   border: 0.5px solid #8b98aa;
   border-radius: 8px;
   background: #ffffff;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-weight: 700;
   font-size: 14px;
   line-height: 16px;
@@ -5648,7 +5692,7 @@ line-height: 31px;
 .md3 .fin-calc-card .fin-rate-old.fin-rate-old-list {
   position: relative;
   display: inline-block;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-weight: 400;
   font-size: 17px;
   line-height: 20px;
@@ -5672,7 +5716,7 @@ line-height: 31px;
 .md3 .fin-modal .fin-rate-old.fin-rate-example-price {
   position: relative;
   display: inline-block;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-weight: 400;
   font-size: 17px;
   line-height: 20px;
@@ -5694,7 +5738,7 @@ line-height: 31px;
 .md3 .bb-price-row .fin-rate-old.fin-rate-old-bb {
   position: relative;
   display: inline-block;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 17px;
@@ -5717,7 +5761,7 @@ line-height: 31px;
   position: relative;
   top: -5px;
   vertical-align: super;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 8px;
@@ -5757,7 +5801,7 @@ line-height: 31px;
 }
 /* "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-family: Arial, Helvetica, Arimo, sans-serif;
   font-weight: 400;
   font-size: 14px;
   line-height: 16px;
@@ -6050,14 +6094,14 @@ line-height: 31px;
    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-family: 'Arial', 'Arimo', sans-serif;
   font-weight: 400;
   font-size: 14px;
   line-height: 16px;
   color: #0E2238;
 }
 .md3 .bb-tabs .fin-tab.on {
-  font-family: 'Arial';
+  font-family: 'Arial', 'Arimo', sans-serif;
   font-weight: 700;
   font-size: 14px;
   line-height: 16px;
@@ -6085,7 +6129,7 @@ line-height: 31px;
   top: -15px;
   left: 2px;
   vertical-align: super;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 10px;
@@ -6513,7 +6557,7 @@ line-height: 31px;
     height: 40px;
     padding: 13px 12px;
     gap: 6px;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 13px;
@@ -6541,7 +6585,7 @@ line-height: 31px;
     text-align: left;
     margin-top: 0;
     margin-bottom: 38px !important;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 22px;
@@ -6592,7 +6636,7 @@ line-height: 31px;
     padding: 0;
     background: none;
     box-shadow: none;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 18px;
@@ -6603,7 +6647,7 @@ line-height: 31px;
   .md3 .hiw-title {
     margin-top: 0;
     margin-bottom: 8px;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 18px;
@@ -6611,7 +6655,7 @@ line-height: 31px;
     color: #1d2a38;
   }
   .md3 .hiw-desc {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
@@ -6865,7 +6909,7 @@ line-height: 31px;
     height: 20px;
   }
   .md3 .vdp-specs .specitem b {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 16px;
@@ -6873,7 +6917,7 @@ line-height: 31px;
     color: #1d2a38;
   }
   .md3 .vdp-specs .specitem span {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 13px;
@@ -6914,7 +6958,7 @@ line-height: 31px;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
@@ -7080,6 +7124,25 @@ line-height: 31px;
     padding-left: 12px !important;
     padding-right: 12px !important;
   }
+  /* <section class="container"> specifically wants a slightly wider 14px gutter than the
+     12px above — .container is also reused on <main>/<div> elsewhere (SearchNextPage's
+     <main class="container srp-main">, several other pages' wrapper <div>s), so this adds
+     the type selector rather than editing the rule above, to avoid widening those too.
+     `.md3 section.container` beats `.md3 .container` on specificity (2 classes + 1 type
+     beats 2 classes alone) regardless of source order. */
+  .md3 section.container {
+    padding-left: 14px !important;
+    padding-right: 14px !important;
+  }
+  /* /search's <main class="container srp-main"> wants the same 14px as section.container
+     above — .srp-main is unique to SearchNextPage (VDP/search-detailed/Auth each have their
+     own vdp-main/detailed-main/auth-main on the same <main class="container ...">), so
+     compounding on it keeps this scoped to just that page's <main>. 3 classes here
+     (.md3 + .container + .srp-main) beats the 2-class rule above regardless of source order. */
+  .md3 .container.srp-main {
+    padding-left: 14px !important;
+    padding-right: 14px !important;
+  }
   .md3 .hero-badge {
     margin-bottom: 10px !important;
     font-size: 12px !important;
@@ -7217,7 +7280,7 @@ line-height: 31px;
   }
   .md3 .trust-strip > div > span {
     display: block;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 10px;
@@ -7227,7 +7290,7 @@ line-height: 31px;
   .md3 .trust-sub {
     display: block;
     margin-top: 2px;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 10px;
@@ -7420,7 +7483,7 @@ background: ;
   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;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-weight: 700;
   font-size: 14px;
   line-height: 15px;
@@ -7501,7 +7564,7 @@ color: #005CFF;
   border-top: 1px solid var(--fig-tile-border);
 }
 .md3 .fin-toggle-final .md-title-sm {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-weight: 400;
   font-size: 15px;
   line-height: 17px;
@@ -7538,7 +7601,7 @@ color: #005CFF;
   border-bottom: 1px solid var(--fig-tile-border);
 }
 .md3 .fin-toggle-addservices .md-title-sm {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, Arimo, sans-serif;
   font-weight: 400;
   font-size: 15px;
   line-height: 17px;
@@ -7570,7 +7633,7 @@ color: #005CFF;
   gap: 13px !important;
 }
 .md3 .fin-toggle-addservices .num {
-  font-family: Arial, Helvetica, sans-serif !important;
+  font-family: Arial, Helvetica, Arimo, sans-serif !important;
   font-weight: 400 !important;
   font-size: 15px !important;
   line-height: 17px !important;
@@ -7740,6 +7803,19 @@ color: #005CFF;
     background: #d4dde7;
     border-radius: 1px;
   }
+  /* Pricing Card / Tabs / Base Line — .cc-price only, fixed 326px inset 18px from the left
+     rather than the shared rule's fluid left:0/right:0 span. Scoped instead of edited in
+     place: .vdp-bottom-bar's own left:10px/right:10px override below (higher specificity, so
+     it already wins over the shared rule's left/right) doesn't set `width` — a fixed width in
+     the shared rule would still leak through there, and into .fin-modal-body's tabs which
+     have no override at all. `right: auto` makes the drop explicit rather than relying on
+     the left+right+width overconstraint rule (right is silently ignored once both left and
+     width are set) to do the right thing unremarked. */
+  .md3 .cc-price .fin-tabs::after {
+    left: 18px;
+    right: auto;
+    width: 326px;
+  }
   .md3 .fin-tab {
     position: relative;
     padding: 0;
@@ -7761,6 +7837,15 @@ color: #005CFF;
     border-radius: 2px;
     z-index: 1;
   }
+  /* Pricing Card / Tabs / active-tab underline — .cc-price only. The shared rule above (also
+     used by .vdp-bottom-bar's / .fin-modal-body's own tab bars) keeps its 115×4; only the
+     card's own underline (326px-wide divider below) gets the slightly slimmer 110×3. content/
+     position/left/bottom/transform/background/border-radius/z-index still come from the base
+     rule above — both match the same ::after, so only width/height need repeating here. */
+  .md3 .cc-price .fin-tab.on::after {
+    width: 110px;
+    height: 3px;
+  }
   /* no divider above the Persönliche-Beratung row on phone (Figma: the only divider in this
      zone is the one before "Rate anpassen"); desktop keeps its border-top. */
   .md3 .fin-info {
@@ -7771,7 +7856,7 @@ color: #005CFF;
     justify-content: flex-start;
   }
   .md3 .fin-adjust-btn-label {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 15px;
@@ -7833,7 +7918,7 @@ color: #005CFF;
     border-left: 1px solid var(--fig-border);
     border-radius: 0;
     padding: 0;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-weight: 400;
     font-size: 15px;
     line-height: 17px;
@@ -7859,14 +7944,14 @@ color: #005CFF;
     align-items: flex-start;
   }
   .md3 .fin-modal-head .md-headline-sm.show-mobile {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-weight: 700;
     font-size: 25px;
     line-height: 29px;
     color: #1D2A38;
   }
   .md3 .fin-modal-head .md-headline-sm.show-mobile .md-label-sm {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-weight: 400;
     font-size: 14px;
     line-height: 16px;
@@ -7885,14 +7970,14 @@ color: #005CFF;
     padding-top: 8px;
   }
   .md3 .fin-sheet-adjust .md-title-sm {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-weight: 700;
     font-size: 15px;
     line-height: 17px;
     color: #1D2A38;
   }
   .md3 .fin-down-value {
-    font-family: Arial, Helvetica, sans-serif !important;
+    font-family: Arial, Helvetica, Arimo, sans-serif !important;
     font-weight: 700 !important;
     font-size: 15px !important;
     line-height: 17px !important;
@@ -7943,14 +8028,14 @@ color: #005CFF;
     padding: 15px 0 !important;
   }
   .md3 .fin-modal .calcrow--payment .calcrow-label {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-weight: 400;
     font-size: 15px;
     line-height: 17px;
     color: #1D2A38;
   }
   .md3 .fin-modal .calcrow--payment .calcrow-value {
-    font-family: Arial, Helvetica, sans-serif !important;
+    font-family: Arial, Helvetica, Arimo, sans-serif !important;
     font-weight: 700 !important;
     font-size: 15px !important;
     line-height: 17px !important;
@@ -8002,7 +8087,7 @@ color: #005CFF;
     padding: 22px 22px 0 !important;
     margin-top: 0;
     margin-bottom: 11px !important;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 24px;
@@ -8033,7 +8118,7 @@ color: #005CFF;
     padding: 13px 13px 25px 13px !important;
   }
   .md3 #vdp-preis .fin-criteria-card > button .md-title-sm {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 13px !important;
@@ -8069,7 +8154,7 @@ color: #005CFF;
     height: 21px;
   }
   .md3 #vdp-preis .fin-criteria-card .md-label-sm {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 10.3px;
@@ -8077,7 +8162,7 @@ color: #005CFF;
     color: #5b6b7f;
   }
   .md3 #vdp-preis .fin-criteria-card .md-title-sm {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 10.3px !important;
@@ -8087,7 +8172,7 @@ color: #005CFF;
   .md3 .fin-criteria-note {
     margin: 0;
     padding: 0 13px 20px;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 10px;
@@ -8101,7 +8186,7 @@ color: #005CFF;
     margin: 0 auto;
   }
   .md3 #vdp-preis > div:last-child > button {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700 !important;
     font-size: 13px !important;
@@ -8130,7 +8215,7 @@ color: #005CFF;
     border-color: #66b84d !important;
   }
   .md3 #vdp-preis .md-label-sm {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 11.5px;
@@ -8154,7 +8239,7 @@ color: #005CFF;
     stroke: #66b84d;
   }
   .md3 .fin-eval-good-badge span {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700 !important;
     font-size: 13px !important;
@@ -8167,7 +8252,7 @@ color: #005CFF;
     padding-left: 22px;
     padding-right: 22px;
     margin-bottom: 10px !important;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 13px;
@@ -8179,7 +8264,7 @@ color: #005CFF;
     margin-bottom: 28px !important;
   }
   .md3 #vdp-bewertungen h2 {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 22px;
@@ -8191,7 +8276,7 @@ color: #005CFF;
     gap: 50px !important;
   }
   .md3 #vdp-bewertungen > div:first-child > div .num {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700 !important;
     font-size: 36px !important;
@@ -8203,7 +8288,7 @@ color: #005CFF;
     height: 19px;
   }
   .md3 #vdp-bewertungen > div:first-child > div .md-label-sm {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 13px;
@@ -8213,7 +8298,7 @@ color: #005CFF;
   .md3 #vdp-bewertungen .mbtn--text {
     padding: 0;
     padding-top: 6px;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 18px;
@@ -8249,7 +8334,7 @@ color: #005CFF;
   }
   .md3 #vdp-bewertungen .review-card .md-title-sm {
     margin-bottom: 5px;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 15px;
@@ -8266,7 +8351,7 @@ color: #005CFF;
     -webkit-line-clamp: 4;
     line-clamp: 4;
     -webkit-box-orient: vertical;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 13px;
@@ -8280,7 +8365,7 @@ color: #005CFF;
   }
   /* condition tiles: Figma value size + roomier gap to the pills above */
   .md3 .zustand-tile .md-title-sm {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 19px;
@@ -8288,7 +8373,7 @@ color: #005CFF;
     color: #1d2a38;
   }
   .md3 .zustand-tile .md-label-sm {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 13px;
@@ -8311,7 +8396,7 @@ color: #005CFF;
   .md3 .vdp-details .mcard h2 {
     margin-top: 0;
     margin-bottom: 26px;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 22px;
@@ -8338,7 +8423,7 @@ color: #005CFF;
   .md3 #vdp-check .eq-cols > div {
     gap: 7px !important;
     margin-bottom: 18px !important;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 16px !important;
@@ -8358,7 +8443,7 @@ color: #005CFF;
     line-height: 32px;
   }
   .md3 #vdp-eco .co2-seg {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 15px;
@@ -8381,7 +8466,7 @@ color: #005CFF;
     box-shadow: none;
   }
   .md3 #vdp-eco .md-label-sm {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 11px;
@@ -8394,7 +8479,7 @@ color: #005CFF;
     box-shadow: none;
   }
   .md3 #vdp-daten .mbtn--text {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 16px;
@@ -8405,7 +8490,7 @@ color: #005CFF;
   .md3 #vdp-daten > h2 {
     margin-top: 0;
     margin-bottom: 32px !important;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 24px;
@@ -8419,7 +8504,7 @@ color: #005CFF;
   }
   .md3 #vdp-ausstattung h2 {
     margin: 0 0 30px;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 24px;
@@ -8438,7 +8523,7 @@ color: #005CFF;
     color: #1d2a38;
   }
   .md3 #vdp-ausstattung .mfield input::placeholder {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
@@ -8446,7 +8531,7 @@ color: #005CFF;
     color: #8b98aa;
   }
   .md3 #vdp-ausstattung .eq-cols .md-title-sm {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 15px;
@@ -8458,7 +8543,7 @@ color: #005CFF;
     gap: 8px !important;
   }
   .md3 #vdp-ausstattung .eq-cols li {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 14px !important;
@@ -8470,7 +8555,7 @@ color: #005CFF;
   }
   .md3 #vdp-ausstattung .mbtn--text {
     margin-top: 12px !important;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 16px;
@@ -8514,7 +8599,7 @@ color: #005CFF;
     color: var(--md-primary);
   }
   .md3 .enquiry-benefits li {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 13px;
@@ -8524,7 +8609,7 @@ color: #005CFF;
   .md3 .enquiry-aside p.md-body-sm {
     margin-top: 0;
     margin-bottom: 26px !important;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 15px;
@@ -8533,7 +8618,7 @@ color: #005CFF;
   }
   .md3 .enquiry-aside .md-title {
     margin: 0 !important;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 24px !important;
@@ -8553,7 +8638,7 @@ color: #005CFF;
     grid-template-columns: 69px 70px 1fr;
   }
   .md3 .enq-float-label {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 12px;
@@ -8562,7 +8647,7 @@ color: #005CFF;
   }
   .md3 .enquiry-terms {
     margin-top: 6px !important;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 13px;
@@ -8570,7 +8655,7 @@ color: #005CFF;
     color: #5b6b7f;
   }
   .md3 .enq-float textarea {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
@@ -8581,7 +8666,7 @@ color: #005CFF;
     width: 70px;
   }
   .md3 .enq-country .mselect-label {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
@@ -8589,7 +8674,7 @@ color: #005CFF;
     color: #5b6b7f;
   }
   .md3 .enquiry-form input::placeholder {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
@@ -8616,7 +8701,7 @@ color: #005CFF;
     color: currentColor;
   }
   .md3 .enquiry-contact-buttons .chip:not(.chip--selected) {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 14px;
@@ -8624,7 +8709,7 @@ color: #005CFF;
     color: #1d2a38;
   }
   .md3 .enquiry-contact-buttons .chip--selected {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 14px;
@@ -8639,7 +8724,7 @@ color: #005CFF;
   }
   .md3 .enquiry-contact-heading {
     margin-bottom: 11px !important;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400 !important;
     font-size: 13px;
@@ -8658,7 +8743,7 @@ color: #005CFF;
     margin-top: 6px;
   }
   .md3 .enq-consent span {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 10px;
@@ -8667,7 +8752,7 @@ color: #005CFF;
   }
   .md3 .enquiry-submit-btn {
     height: 54px;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 17px;
@@ -8681,7 +8766,7 @@ color: #005CFF;
   }
   .md3 .enquiry-security-note {
     margin-top: 8px !important;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 12px;
@@ -8702,7 +8787,7 @@ color: #005CFF;
   /* phone hero rate: 44px — with the € folded into the big span (round 11) 52px pushed the
      stacked /mtl. unit onto a second line; 44px fits "143 €" + stack beside the rating column */
   .md3 .fin-rate-main .num {
-    font-family: Arial, Helvetica, sans-serif !important;
+    font-family: Arial, Helvetica, Arimo, sans-serif !important;
     font-style: normal !important;
     font-weight: 700 !important;
     font-size: 65px !important;
@@ -8713,7 +8798,7 @@ color: #005CFF;
      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-family: Arial, Helvetica, Arimo, sans-serif !important;
     font-weight: 400 !important;
     font-size: 17px !important;
     line-height: 20px !important;
@@ -8737,7 +8822,7 @@ color: #005CFF;
     top: 6px;
     left: 7px;
     vertical-align: super;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 8px;
@@ -8788,7 +8873,7 @@ color: #005CFF;
   .md3 .fin-rate-main .fin-rate-old.fin-rate-old-list {
     position: relative;
     display: inline-block;
-    font-family: Arial, Helvetica, sans-serif !important;
+    font-family: Arial, Helvetica, Arimo, sans-serif !important;
     font-style: normal !important;
     font-weight: 400 !important;
     font-size: 14px !important;
@@ -8810,7 +8895,7 @@ color: #005CFF;
     position: relative;
     top: -5px;
     vertical-align: super;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 9px;
@@ -8820,7 +8905,7 @@ color: #005CFF;
   .md3 .fin-rate-main .fin-rate-example-price {
     position: relative;
     display: inline-block;
-    font-family: Arial, Helvetica, sans-serif !important;
+    font-family: Arial, Helvetica, Arimo, sans-serif !important;
     font-style: normal !important;
     font-weight: 400 !important;
     font-size: 17px !important;
@@ -8853,7 +8938,7 @@ color: #005CFF;
     position: static;
     top: auto;
     vertical-align: super;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 9px;
@@ -8861,7 +8946,7 @@ color: #005CFF;
     color: #111820;
   }
   .md3 .fin-rate-main .fin-rate-example-suffix {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 18px;
@@ -8873,7 +8958,7 @@ color: #005CFF;
     top: -4px;
     left: -2px;
     vertical-align: super;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 9px;
@@ -8935,7 +9020,7 @@ color: #005CFF;
     border-color: #168a45 !important;
   }
   .md3 .fin-cond {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 13px;
@@ -8953,7 +9038,7 @@ color: #005CFF;
   /* "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-family: Arial, Helvetica, Arimo, sans-serif;
     font-weight: 400;
     font-size: 13px;
     line-height: 15px;
@@ -8983,7 +9068,7 @@ color: #005CFF;
   .md3 .fin-cta-row .mbtn--filled {
     background: #005cff;
     border-radius: 16px;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 14px;
@@ -8996,7 +9081,7 @@ color: #005CFF;
     box-shadow: none;
     border: 2px solid #005cff;
     border-radius: 16px;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 14px;
@@ -10736,7 +10821,7 @@ color: #005CFF;
      .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-family: Arial, Helvetica, Arimo, sans-serif;
     font-weight: 700;
     font-size: 52px;
     line-height: 58px;
@@ -10760,7 +10845,7 @@ color: #005CFF;
     top: 2px;
     left: 3px;
     vertical-align: super;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, Arimo, sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 8px;