@bytebrand/fe-ui-core-autobahn 1.0.114 → 1.0.116

package/cards/CarCard.tsx

@@ -240,7 +240,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
           <GalleryActivityPill viewsCount={car.viewsCount} favoritesCount={car.favoritesCount} />
         </div>
       </div>
-      <div style={{ padding: '10px 18px', display: 'flex', flexDirection: 'column', gap: 0, flex: 1 }}>
+      <div style={{ padding: '8px 18px', display: 'flex', flexDirection: 'column', gap: 0, flex: 1 }}>
         <div>
           <div className="md-title" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
             {car.make} {car.model}
@@ -294,7 +294,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
         />
         {/* legacy VehicleSmallCard's "SeoText" footer line (full spec + equipment list) —
             renders nothing when the caller hasn't populated car.seoText. */}
-        <SeoLine car={car} style={{ marginTop: 6 }} />
+        <SeoLine car={car} style={{ marginTop: 0 }} />
         {adminAction && (
           <div style={{ marginTop: 8 }}>
             <Button

package/cards/cardParts.tsx

@@ -19,7 +19,7 @@ import { TranslationFunction } from '../types';
 import { defaultConfig } from '@bytebrand/fe-financing';
 
 import { Icon, Button } from '../ui';
-import { DocCheckIcon, EvalBar } from '../vdp/FinanceCalculator';
+import { EvalBar } from '../vdp/FinanceCalculator';
 import { CO2_CLASSES, CO2_COLORS, TIER_KEYS, TIER_COLORS } from '../constants';
 import { AutobahnCar } from './types';
 // pure, non-React — shared with the Meta AIA marketing-image renderer (a plain Node service).
@@ -784,37 +784,144 @@ export interface CardCtaRowProps {
 export const CardCtaRow: React.FunctionComponent<CardCtaRowProps> = ({ car, mode, onRequestOffer, onCall, onOpenRateAdjust, t }) => (
   <div
     className="card-cta-row show-mobile"
-    style={{ display: 'flex', gap: 8, borderTop: '1px solid var(--md-outline-variant)', paddingTop: 8 }}
+    style={{ display: 'flex', gap: 6, borderTop: '1px solid var(--md-outline-variant)', paddingTop: 8 }}
   >
     <Button
       variant="filled"
-      style={{ flex: 2 }}
+      style={{
+        // Figma width (157px) as a STARTING size, not a hard fixed one — flex-grow:1 so this
+        // button (and "Adjust rate" below) still fill extra row width on wider cards instead of
+        // leaving dead space next to the fixed 40px phone button; flex-shrink:1 lets it narrow
+        // gracefully (text ellipsizes via the existing .card-cta-row .mbtn overflow rule) rather
+        // than overflow on very narrow cards.
+        flex: '1 1 157px',
+        height: 40,
+        background: '#005cff',
+        borderRadius: 16,
+        padding: '0 8px',
+        fontFamily: 'Arial',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        fontSize: 13,
+        lineHeight: '15px',
+        color: '#ffffff',
+      }}
       onClick={(e) => {
         e.stopPropagation();
         onRequestOffer();
       }}
     >
-      <DocCheckIcon size={16} />
+      {/* exact design icon (single self-contained SVG) — replaces the composed lucide
+          file-text + check-circle badge (DocCheckIcon), which is still used as-is on VDP's own
+          "Angebot anfragen" buttons; this swap is scoped to the search-card CTA only.
+          flex:none for the same shrink reason as the "Adjust rate" icon above. */}
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ flex: 'none' }}>
+        <path
+          d="M6.90625 3.65625H15.275L19.9062 8.2875V20.7188C19.9062 21.6162 19.1787 22.3438 18.2812 22.3438H6.90625C6.00879 22.3438 5.28125 21.6162 5.28125 20.7188V5.28125C5.28125 4.38379 6.00879 3.65625 6.90625 3.65625Z"
+          stroke="white"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path d="M15.0312 3.85938V8.53125H19.7031" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M8.9375 11.375H14.625" stroke="white" strokeLinecap="round" />
+        <path d="M8.9375 14.625H13.4062" stroke="white" strokeLinecap="round" />
+        <path d="M8.9375 17.875H12.5938" stroke="white" strokeLinecap="round" />
+        <path
+          d="M18.4844 23.1562C20.8402 23.1562 22.75 21.2465 22.75 18.8906C22.75 16.5348 20.8402 14.625 18.4844 14.625C16.1285 14.625 14.2188 16.5348 14.2188 18.8906C14.2188 21.2465 16.1285 23.1562 18.4844 23.1562Z"
+          fill="#005CFF"
+          stroke="white"
+        />
+        <path d="M17.0625 18.3219L18.5656 19.825L23.7656 14.625" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M21.6533 17.875L23.2783 16.25" stroke="#005CFF" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M20.1904 17.0625L21.8154 15.4375" stroke="#005CFF" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
       {t('autobahn:finance.secureOffer')}
     </Button>
     <Button
       variant="outlined"
-      icon="phone"
-      style={{ flex: 'none', width: 44, padding: 0 }}
+      style={{
+        flex: '0 0 auto',
+        width: 40,
+        height: 40,
+        background: '#ffffff',
+        border: '1.6px solid #005cff',
+        borderRadius: 16,
+        padding: 0,
+      }}
       onClick={(e) => {
         e.stopPropagation();
         onCall();
       }}
-    />
+    >
+      {/* exact design icon (not lucide's "phone") — no class="lucide", so the
+          .card-cta-row .mbtn .lucide 15px override doesn't touch it; the rect-clip from the
+          source SVG was a full-viewBox no-op (already inside 0-20/0-20) and dropped, since a
+          static clipPath id would collide across the many CarCard instances on one search page. */}
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M18.3332 14.1004V16.6004C18.3341 16.8325 18.2866 17.0622 18.1936 17.2749C18.1006 17.4875 17.9643 17.6784 17.7933 17.8353C17.6222 17.9922 17.4203 18.1116 17.2005 18.186C16.9806 18.2603 16.7477 18.288 16.5165 18.2671C13.9523 17.9881 11.4892 17.1119 9.32486 15.7087C7.31139 14.4293 5.60431 12.7222 4.32486 10.7087C2.91679 8.5346 2.04037 6.0595 1.76653 3.48374C1.7457 3.2533 1.77309 3.02104 1.84695 2.80176C1.9208 2.58248 2.03951 2.38098 2.1955 2.21009C2.3515 2.0392 2.54137 1.90266 2.75302 1.80917C2.96468 1.71569 3.19348 1.66729 3.42486 1.66707H5.92486C6.32928 1.66309 6.72136 1.80631 7.028 2.07002C7.33464 2.33373 7.53493 2.69995 7.59153 3.10041C7.69153 3.85041 7.86653 4.57541 8.11653 5.26707C8.22865 5.56534 8.25291 5.8895 8.18645 6.20114C8.11999 6.51278 7.96558 6.79883 7.74153 7.02541L6.74153 8.03374C7.95617 10.2329 9.76739 12.0441 11.9665 13.2587L12.9749 12.2587C13.2014 12.0347 13.4875 11.8803 13.7991 11.8138C14.1108 11.7474 14.4349 11.7716 14.7332 11.8837C15.4249 12.1337 16.1499 12.3087 16.8999 12.4087C17.3047 12.4658 17.6744 12.6697 17.9386 12.9817C18.2029 13.2936 18.3433 13.6917 18.3332 14.1004Z"
+          stroke="#005cff"
+          strokeWidth={1.66667}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </Button>
     <Button
       variant="outlined"
-      icon="sliders-horizontal"
-      style={{ flex: 1.5 }}
+      style={{
+        // same "starting size that can still grow/shrink" reasoning as "Request offer" above.
+        flex: '1 1 125px',
+        height: 40,
+        background: '#ffffff',
+        border: '1.6px solid #5b6b7f',
+        borderRadius: 16,
+        padding: '0 6px',
+        fontFamily: 'Arial',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        fontSize: 13,
+        lineHeight: '15px',
+        color: '#5b6b7f',
+      }}
       onClick={(e) => {
         e.stopPropagation();
         onOpenRateAdjust(mode);
       }}
     >
+      {/* exact design icon (not lucide's "sliders-horizontal") — colors are baked into the SVG
+          itself (matches the button's #5b6b7f border/text), not currentColor. flex:none is
+          load-bearing: this button is a flex row (icon + the "Adjust rate" label) inside a fixed
+          125px width, and without it the icon was a shrinkable flex item — flexbox squeezed its
+          WIDTH down to fit the text (rendering ~12.94x18, squashed) while its literal height
+          attribute stayed 18. Lucide icons here dodge this via the unrelated .card-cta-row .mbtn
+          .lucide CSS rule (flex: none), which doesn't match a plain <svg> with no lucide class. */}
+      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ flex: 'none' }}>
+        <path d="M3 5.25H15" stroke="#5B6B7F" strokeWidth={1.91667} strokeLinecap="round" strokeLinejoin="round" />
+        <path
+          d="M6 6.75C6.82843 6.75 7.5 6.07843 7.5 5.25C7.5 4.42157 6.82843 3.75 6 3.75C5.17157 3.75 4.5 4.42157 4.5 5.25C4.5 6.07843 5.17157 6.75 6 6.75Z"
+          fill="#FFFEFE"
+          stroke="#5B6B7F"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path d="M3 9H15" stroke="#5B6B7F" strokeWidth={1.91667} strokeLinecap="round" strokeLinejoin="round" />
+        <path
+          d="M12.4565 10.5C13.285 10.5 13.9565 9.82843 13.9565 9C13.9565 8.17157 13.285 7.5 12.4565 7.5C11.6281 7.5 10.9565 8.17157 10.9565 9C10.9565 9.82843 11.6281 10.5 12.4565 10.5Z"
+          fill="white"
+          stroke="#5B6B7F"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path d="M3 12.75H15" stroke="#5B6B7F" strokeWidth={1.91667} strokeLinecap="round" strokeLinejoin="round" />
+        <path
+          d="M9.81543 14.25C10.6439 14.25 11.3154 13.5784 11.3154 12.75C11.3154 11.9216 10.6439 11.25 9.81543 11.25C8.987 11.25 8.31543 11.9216 8.31543 12.75C8.31543 13.5784 8.987 14.25 9.81543 14.25Z"
+          fill="white"
+          stroke="#5B6B7F"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
       {t('autobahn:finance.adjustRate')}
     </Button>
   </div>

package/locales/de/autobahn.json

@@ -86,7 +86,7 @@
     "priceRatingAria": "Preisbewertung: {{rating}}",
     "detailsShow": "Details anzeigen",
     "paymentLabel": "Zahlung",
-    "paymentValue": "Zahlung per Überweisung",
+    "paymentValue": "Überweisung",
     "warrantyLabel": "Garantie",
     "warrantyValue": "1 Jahr inklusive",
     "deliveryLabel": "Lieferung",
@@ -105,6 +105,7 @@
     "callCta": "Anrufen",
     "finalInstallmentToggle": "Mit Schlussrate",
     "addServicesToggle": "Rundum-Sorglos-Paket",
+    "moreInfoAria": "Weitere Informationen zu {{label}}",
     "addServicesPerMonth": "+{{value}} € / Monat",
     "addServicesOnce": "+{{value}} €",
     "addServicesIncluded": "inklusive",

package/locales/en/autobahn.json

@@ -105,6 +105,7 @@
     "callCta": "Call",
     "finalInstallmentToggle": "With final installment",
     "addServicesToggle": "All-round care package",
+    "moreInfoAria": "More information about {{label}}",
     "addServicesPerMonth": "+€{{value}} / month",
     "addServicesOnce": "+€{{value}}",
     "addServicesIncluded": "included",

package/package.json

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

@@ -3398,11 +3398,17 @@ line-height: 31px;
   transform: translateY(-50%);
   width: 32px;
   height: 32px;
-  border-radius: var(--md-r-full);
-  border: 0;
-  background: rgba(255, 255, 255, 0.92);
+  border-radius: 50%;
+  border: 1px solid #E8EDF3;
+  /* same "glass" translucency (0.5 alpha + light border + blur) as the sibling overlays on this
+     card — .cc-photo-pill (image count) and .cc-activity-pill (views) — so the arrows read as
+     part of the same overlay family instead of a heavier, opaque control. Dropped the old
+     box-shadow: var(--md-e1) for the same reason — neither sibling pill carries one, and a drop
+     shadow under a low-alpha glass circle looked muddy. The blur is what keeps the dark #08162A
+     chevron legible against busy vehicle photos underneath (contrast doesn't depend on the photo). */
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(2px);
   color: var(--md-on-surface);
-  box-shadow: var(--md-e1);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3411,11 +3417,20 @@ line-height: 31px;
   transition: opacity var(--dur-1);
   z-index: 2;
 }
+/* Touch target: the visible circle stays 32px (matches the design), but that's below the ~44px
+   minimum recommended for a reliable touch target (WCAG 2.5.5 / Apple HIG). This invisible
+   pseudo-element pads the actual hit area out to 44px (32 + 6 + 6) without changing how the
+   button looks — clicks/taps anywhere in the padded zone still hit the real <button>. */
+.md3 .car-arrow::before {
+  content: '';
+  position: absolute;
+  inset: -6px;
+}
 .md3 .car-arrow--l {
-  left: 22px;
+  left: 10px;
 }
 .md3 .car-arrow--r {
-  right: 22px;
+  right: 10px;
 }
 .md3 .cardcar:hover .car-arrow {
   opacity: 1;
@@ -3435,6 +3450,14 @@ line-height: 31px;
   border: 1px solid #D4DDE7;
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
 }
+/* pin the VDP gallery's own edge offset — the base .car-arrow--l/--r rule above was moved to
+   10px for the SRP card carousels; the VDP viewer keeps its original, larger offset. */
+.md3 .vdp-gallerybox .car-arrow--l {
+  left: 22px;
+}
+.md3 .vdp-gallerybox .car-arrow--r {
+  right: 22px;
+}
 
 /* ==========================================================================
    RESPONSIVE LAYOUT LAYER
@@ -3458,7 +3481,15 @@ line-height: 31px;
 }
 .md3 .field-grid-2 {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  /* minmax(0,1fr), not plain 1fr: a bare 1fr track's implicit minimum is auto (= its content's
+     min-content), and a searchable Dropdown's open/editing state swaps the trigger <button> for
+     a <div><input></div> — inputs carry their own browser-default intrinsic min-content width
+     that flex's min-width:0 on the input doesn't fully suppress once a CSS Grid track (not just
+     the inner flex row) is the one asking "how small can you get". That let the Make/Model
+     column widen the moment it opened, shoving into its sibling column instead of staying put.
+     Same fix/diagnosis as .fin-price-grid above (see its own comment) — minmax(0,1fr) overrides
+     the track's floor directly, so it can't happen regardless of what's inside. */
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 12px;
 }
 .md3 .cards-3 {
@@ -5305,6 +5336,11 @@ line-height: 31px;
 .md3 .card-cta-row .mbtn { font-size: 12.5px; padding: 0 10px; gap: 5px; min-width: 0; }
 .md3 .card-cta-row .mbtn span, .md3 .card-cta-row .mbtn { overflow: hidden; text-overflow: ellipsis; }
 .md3 .card-cta-row .mbtn .lucide { width: 15px; height: 15px; flex: none; }
+/* the phone/"Rate anpassen" outlined buttons set their own explicit `border` (1.6px solid) inline —
+   .mbtn--outlined's inset box-shadow (the DEFAULT way that class draws its border everywhere else)
+   stacks on top of it as a second, slightly offset ring ("double border"). Suppress just the
+   shadow here; the real border keeps rendering from each button's own inline style. */
+.md3 .card-cta-row .mbtn--outlined { box-shadow: none; }
 /* muted buyer activity (#5) */
 .md3 .pp-activity {
   display: flex;
@@ -6297,14 +6333,29 @@ line-height: 31px;
   /* Visible icon glyphs 24-28px (spec range) — the shared .icon-btn/.mbtn rules force 20px/18px
      everywhere else in the app, which is fine there but read visibly smaller than the Figma
      mobile header reference. */
-  .md3 header .icon-btn {
-    width: 48px;
-    height: 48px;
-  }
   .md3 header .icon-btn .lucide {
     width: 24px;
     height: 24px;
   }
+  /* Bug: "Header distribution" — Figma has the logo starting at x=49 and the search/phone/account
+     icon group starting at x=246 (390px reference), but the logo was rendering ~25px too far
+     right and the icon group ~15-17px too far left. Root cause: this rule used to ALSO force
+     hamburger/search/phone's own icon-btn box to 48×48 (copied from .topbar-account-btn just
+     below, whose 48×48 IS spec'd — WCAG/Header-System touch-target — but nothing here documented
+     the same for these three). That extra 8px of box per icon (48 vs the base .icon-btn's 40px)
+     pushed the logo right (hamburger wider) and pulled the action-icon group left (search/phone
+     wider, eating into the row before the right-aligned account button). Dropped back to the
+     base 40×40 box — glyph size above is unaffected, so nothing looks visually smaller — and
+     restored the lost touch-target room with an invisible ::before hit-slop instead (inset:-4px
+     = 48×48 effective tap zone, same technique as the SRP card-carousel arrows use). */
+  .md3 header .icon-btn {
+    position: relative;
+  }
+  .md3 header .icon-btn::before {
+    content: '';
+    position: absolute;
+    inset: -4px;
+  }
   .md3 header .topbar-account-btn .lucide {
     width: 24px;
     height: 24px;
@@ -6319,6 +6370,13 @@ line-height: 31px;
   .md3 .topbar-logo {
     width: 122px;
     height: auto;
+    /* pulls the logo from x≈68 (12px padding + the hamburger's 40px box + the .topbar-container
+       row's own 16px gap, set inline and shared with other pairs in that row — not touched here,
+       see the icon-btn comment above for why) to Figma's x=49. A negative margin on THIS one item
+       is deliberate: shrinking the shared row gap instead would have also pulled the search/
+       phone/account cluster on the right closer together, which is already correct after the
+       icon-btn fix above and must stay untouched. */
+    margin-left: -19px;
   }
   /* Gap between action icons 2-6px (spec: "Abstand Aktionen") — separate from the wider gap the
      hamburger/logo/nav still use (that's the outer .container's own gap, untouched here). */
@@ -6640,6 +6698,13 @@ line-height: 31px;
   .md3 .cards-2 {
     grid-template-columns: 1fr;
   }
+  /* fe-landing (/angebot) TopResults + Alternatives grids — shared side gutter,
+     same 12px pattern as .md3 .container elsewhere. .cards-3 is untouched (not
+     used with this gutter treatment; only .cards-2 callers asked for it). */
+  .md3 .cards-2 {
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+  }
   /* listing card stacks: image (4:3) → info → price */
   .md3 .listcard {
     grid-template-columns: 1fr;
@@ -6707,16 +6772,30 @@ line-height: 31px;
   }
   .md3 .srp-bar {
     position: sticky;
-    /* was 64px (docked under the always-visible header) — now 0: once the header slides away
-       (autoHideOnScroll, TopBar.tsx) this bar takes its place at the very top instead of leaving
-       a gap, and sits flush under it again the moment the header slides back in. */
-    top: 0px;
+    /* default: docked directly under the always-visible header (its 64px height). Same 0.25s
+       duration as .topbar's own transform transition (below) — the header slides in/out over
+       0.25s, so this bar's top must animate in step with it, not jump instantly, or a gap (bar
+       already at 64px, header still sliding in) or an overlap (bar already at 0, header still
+       sliding out) flashes for that quarter-second. */
+    top: 64px;
+    transition: top 0.25s;
     z-index: 20;
     background: #fff;
     padding: 8px 0;
     margin: 0 0 8px;
     box-shadow: 0 6px 8px -8px rgba(0, 0, 0, 0.3);
   }
+  /* once the header slides away on scroll-down (autoHideOnScroll, TopBar.tsx adds
+     .topbar--hidden), this bar takes its place at the very top instead of leaving a 64px gap.
+     The header's box stays in the layout flow even while hidden (transform doesn't affect
+     `position: sticky`'s slot — see the .topbar--hidden rule above), so without this override
+     the bar's own sticky top would also need to jump — and it must jump BACK to 64px the moment
+     scroll-up brings the header back (topbar--hidden removed), or the reappearing header
+     (z-index 50) sticks at the same top:0 slot and paints over/hides this bar (z-index 20)
+     underneath it instead of sitting above it. */
+  .md3:has(.topbar--hidden) .srp-bar {
+    top: 0px;
+  }
   /* full-bleed white to the true viewport edges, WITHOUT moving .srp-bar's own text — it stays
      inside .srp-main's own side padding, this pseudo-element just paints white past it on both
      sides so no gap of page background shows while the bar is sticky. NOT a box-shadow spread
@@ -6738,7 +6817,7 @@ line-height: 31px;
     z-index: -1;
   }
   .md3 .field-grid-2 {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     gap: 10px;
   }
   .md3 .hero-search {
@@ -7261,11 +7340,13 @@ line-height: 31px;
   z-index: 3;
 }
 
-/* VDP main wrapper: phone gets a tighter top gap (10px) and narrower side gutters
-   (14px) than the 14/24px desktop default set inline. */
+/* VDP main wrapper: phone gets a tighter top gap (0, was 15px) and narrower side gutters
+   (10px, matches production) than the 15/24px desktop default set inline — title, highlight
+   chips and the pricing card all inherit this from their shared .vdp-main ancestor, so there's
+   no separate per-element rule to keep in sync with this one. */
 @media (max-width: 600px) {
   .md3 .vdp-main {
-    padding: 0 10px 48px !important;
+    padding: 0 14px 48px !important;
   }
   .md3 .vdp-push-badges {
     gap: 6px;
@@ -7445,6 +7526,28 @@ color: #005CFF;
   line-height: 17px;
   color: #1D2A38;
 }
+/* all three tabs (Finanzierung/Leasing/Kaufen), desktop + mobile — ToggleRow is the one shared
+   render for all of them. Info icon sits raised near the top of the label, like a small
+   superscript badge, instead of centered against the text. */
+.md3 .fin-toggle-addservices .md-title-sm .lucide {
+  position: relative;
+  top: -7px;
+  left: -2px;
+}
+/* tooltip-trigger touch target (all 3 tabs, incl. --cash — an a11y correctness fix, not a
+   per-tab visual choice like the icon nudge above). Trigger is now the 15x15 icon alone (the
+   label text beside it is inert), so BOTH axes need padding out to 48px, not just the vertical
+   one. ::after is positioned off layout flow (doesn't grow the row or push the label/price/
+   switch siblings over) but still real estate for hit-testing — clicks/taps anywhere in its box
+   count as hitting the trigger span itself. (15 + 17 + 17 = 49, clears the 48px minimum.) */
+.md3 .fin-toggle-info-trigger {
+  position: relative;
+}
+.md3 .fin-toggle-info-trigger::after {
+  content: '';
+  position: absolute;
+  inset: -17px;
+}
 .md3 .fin-toggle-addservices > div {
   gap: 13px !important;
 }
@@ -7485,6 +7588,12 @@ color: #005CFF;
   top: auto;
   bottom: auto;
 }
+/* Kaufen tab, desktop sidebar card (.fin-calc-card, NOT the .fin-modal sheet above) — the row
+   sits lower in this card than the financing/leasing rows do, so the base "flush above" bottom:
+   100% opens noticeably higher than the trigger; drops it closer instead. */
+.md3 .fin-calc-card .fin-toggle-addservices.fin-toggle-addservices--cash .fin-toggle-tooltip {
+  bottom: -10%;
+}
 .md3 .fin-modal .show-mobile .fin-toggle-tooltip {
   border-radius: 11px;
 }
@@ -7535,9 +7644,6 @@ color: #005CFF;
   letter-spacing: 0.4px;
   color: var(--md-on-surface-variant);
 }
-.md3 .fin-calc-card .fin-toggle-addservices.fin-toggle-addservices--cash .md-title-sm .lucide {
-  display: none;
-}
 .md3 .fin-calc-card .fin-toggle-addservices.fin-toggle-addservices--cash .num,
 .md3 .fin-calc-card .fin-toggle-addservices.fin-toggle-addservices--cash > div > span:last-child {
   font-family: var(--md-font-display) !important;
@@ -8765,6 +8871,23 @@ color: #005CFF;
     grid-template-areas: "rate evalcol" "cond cond";
     align-items: start;
   }
+  /* Bug: switching the Financing/Leasing/Buy tabs made the price row, rating pill and the two
+     CTA buttons below jump up/down, because the row above them had a different rendered height
+     per tab: (a) .fin-cond (the "0 € Anzahlung · 60 Monate · ..." terms line) renders NOTHING on
+     Buy (isCash hides it), collapsing to 0 height instead of one text line, and (b)
+     .fin-price-grid--cash below zeroes the row-gap that the other two tabs keep. The two rules
+     below cancel each of those, so Financing/Leasing/Buy all reserve the same total height.
+     (A first pass also force-reserved height on .fin-rate-main itself, to additionally cover the
+     rare case of an extra struck list-price line on Buy when the car has a discount — isCash &&
+     showStrike in FinanceCalculator.tsx. Dropped: since Financing/Leasing/undiscounted-Buy don't
+     need that extra room, it left a visible empty gap under the price on every normal tab just to
+     pre-cover one edge case. That specific combination can still shift by the strike line's own
+     height; every other tab switch is now jump-free without the dead space.) */
+  .md3 .fin-calc-card .fin-price-grid.fin-price-grid--cash {
+    /* same 12px row-gap as Financing/Leasing (the base .fin-price-grid rule) — the 0px gap on
+       .fin-price-grid--cash further up this file otherwise pulls the CTA row 12px closer on Buy. */
+    gap: 12px 15px;
+  }
   .md3 .fin-eval-col {
     display: flex;
     flex-direction: column;
@@ -8799,6 +8922,11 @@ color: #005CFF;
     font-weight: 400;
     font-size: 13px;
     line-height: 15px;
+    /* matches the line-height above: on the Buy tab this div renders empty (its "0 € Anzahlung ·
+       60 Monate · ..." text is Financing/Leasing-only), so without a floor it collapsed to 0
+       height instead of the one text line the other two tabs occupy — part of the cross-tab
+       layout-jump fix, see the .fin-rate-main comment above. */
+    min-height: 15px;
     color: #111820;
     margin: 0px 0px;
     margin-bottom: 12px;
@@ -10583,7 +10711,7 @@ color: #005CFF;
     right: 11px !important;
   }
   .md3 .cc-card .cc-badges {
-    top: 15px !important;
+    top: 18px !important;
   }
 
   /* hero price — Figma's rate figure (Finanzierung/Leasing) is much larger than the shared

package/ui/CardCarousel.tsx

@@ -1,7 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
 
-import Icon from './Icon';
-
 export interface CardCarouselProps {
   /** ready-to-use image URLs (already resolved by the caller — no asset/window lookup here). */
   images: string[];
@@ -147,10 +145,16 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
       {n > 1 && (
         <>
           <button className="car-arrow car-arrow--l" aria-label="zurück" onClick={(e) => go(-1, e)}>
-            <Icon name="chevron-left" size={20} />
+            {/* exact icon from the design (not the lucide chevron-left) — 20x20 viewBox, dark
+                #08162A stroke so it stays legible on the translucent glass background above. */}
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12.0835 5L7.0835 10L12.0835 15" stroke="#08162A" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
           </button>
           <button className="car-arrow car-arrow--r" aria-label="weiter" onClick={(e) => go(1, e)}>
-            <Icon name="chevron-right" size={20} />
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M7.9165 5L12.9165 10L7.9165 15" stroke="#08162A" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
           </button>
           <div
             className="cardcar-dots"