@bytebrand/fe-ui-core-autobahn 1.0.113 → 1.0.115

package/theme/md3.css

@@ -453,6 +453,44 @@ line-height: 31px;
   width: 14px;
   height: 14px;
 }
+/* Figma spec for the rating chip in its two "Guter Preis" locations — the VDP header
+   (VdpHeaderSummary, .vdp-headrow) and the SRP list-card's price column (CarRow.tsx,
+   .listcard-price, both its mobile Finanzierung row and desktop Kaufen row share this one class).
+   Scoped to THESE locations only, not every .statchip site-wide (e.g. the price-history "drop"
+   chip a few sections down reuses tone="good" for a completely different purpose — a €-amount,
+   not a price rating — and keeps the theme-aware --md-good-container tokens untouched). min-width
+   (not a hard width) + white-space:nowrap: 108px is tight for icon+"Guter Preis"+⁴ on one line,
+   so this grows past it instead of wrapping/clipping rather than clamping to a width that doesn't fit. */
+.md3 .vdp-headrow .statchip,
+.md3 .listcard-price .statchip {
+  min-width: 108px;
+  height: 27px;
+  border-radius: 11px;
+  font-family: 'Arial';
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 14px;
+  text-align: center;
+  white-space: nowrap;
+  justify-content: center;
+}
+.md3 .vdp-headrow .statchip sup,
+.md3 .listcard-price .statchip sup {
+  position: relative;
+  top: -3px;
+  left: -4px;
+  font-size: 9px;
+  line-height: 9px;
+}
+/* 'good' tone here is specifically the "Guter Preis" rating (same canonical green as the
+   fin-eval-pill "good" tier elsewhere on this page) — literal color, not the --md-good-container
+   token, matching that other pill's own literal-color treatment. --warn (Fairer Preis) is
+   untouched, still tokenized. */
+.md3 .vdp-headrow .statchip--good,
+.md3 .listcard-price .statchip--good {
+  color: rgb(22, 138, 69);
+  background: color-mix(in srgb, rgb(22, 138, 69) 16%, transparent);
+}
 
 /* small image label (views, photo count) */
 .md3 .imglabel {
@@ -3360,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;
@@ -3373,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;
@@ -3397,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
@@ -3420,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 {
@@ -3747,7 +3816,7 @@ line-height: 31px;
   min-width: 0;
 }
 /* "NEU" badge on car cards (legacy new-car label). */
-.md3 .neu-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--md-r-full); background: var(--md-primary); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; box-shadow: var(--md-e1); }
+.md3 .neu-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--md-r-full); background: var(--md-primary); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 14px; letter-spacing: .3px; white-space: nowrap; box-shadow: var(--md-e1); }
 /* "⚡ Angebot" badge — dark neutral pill above the gallery (card mockup), distinct from NEU. */
 .md3 .offer-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--md-r-full); background: var(--md-on-surface); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
 .md3 .offer-badge .lucide { width: 13px; height: 13px; }
@@ -5164,37 +5233,50 @@ line-height: 31px;
     width: 112px;
     flex: none;
   }
-  .md3 .cc-price .fin-eval-pill {
-    font-family: Arial, Helvetica, sans-serif;
-    font-style: normal;
+  /* Figma spec, now identical across all three "Guter Preis" pill locations (CarCard's own
+     .cc-price, incl. the VDP "Ähnliche Fahrzeuge" rail; .fin-calc-card; .fin-modal) — one shared
+     rule instead of three copies. `background`/`color` are deliberately NOT set here: they stay
+     driven by the tier-color inline style each render site sets (see PriceEvalCol in
+     cardParts.tsx / FinanceCalculator.tsx / VdpModules.tsx, all of which already resolve to the
+     canonical rgb(22,138,69) for the 'good' tier) — a `!important` used to hardcode this pill's
+     background to a fixed #dff3e5 here, silently overriding that inline value regardless of tier. */
+  .md3 .cc-price .fin-eval-pill,
+  .md3 .fin-calc-card .fin-eval-pill,
+  .md3 .fin-modal .fin-eval-pill {
+    font-family: 'Arial';
     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%;
+  .md3 .cc-price .fin-eval-pill--good,
+  .md3 .fin-calc-card .fin-eval-pill--good,
+  .md3 .fin-modal .fin-eval-pill--good {
+    width: 108px;
     height: 27px;
+    border-radius: 11px;
     box-sizing: border-box;
+    display: flex;
+    align-items: center;
     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), the VDP FinanceCalculator's own pill (.fin-calc-card), and the
-     FinanceDetailsModal's embedded mobile rate sheet (.fin-modal). */
+     it instead, same technique as the hero price's own 1/2/3 footnote markers. Same -3px lift now
+     shared by all three locations above. */
   .md3 .cc-price .fin-eval-pill sup,
   .md3 .fin-calc-card .fin-eval-pill sup,
   .md3 .fin-modal .fin-eval-pill sup {
     position: relative;
-    top: 0px;
+    top: -3px;
     left: -4px;
     font-size: 9px;
     line-height: 9px;
   }
   .md3 .cc-price .fin-eval-bar {
+    /* matches the pill's own fixed 108px right above (both sit in the same 112px .fin-eval-col),
+       so the two stay visually aligned instead of the bar stretching to the full column width. */
+    width: 108px;
     height: 7px;
   }
   .md3 .cc-price .fin-eval-seg:first-child {
@@ -5424,14 +5506,8 @@ line-height: 31px;
   width: 112px;
   justify-self: end;
 }
-/* pill now sits above the bar in a real flex column (see above) — stretch it to the bar's own
-   width instead of the base .fin-eval-pill's inline-flex/content-hugging size. */
-.md3 .fin-calc-card .fin-eval-pill--good {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+/* .fin-calc-card/.fin-modal's own "Guter Preis" pill text/box/sup sizing now lives in the one
+   shared rule (with .cc-price) further up this file, near .cc-price's own .fin-eval-* rules. */
 /* .fin-calc-card's own "Rate anpassen" panel is compact — the mobile-sheet/modal padding
    (22/28px top, 20px bottom) is too roomy here. */
 .md3 .fin-calc-card .fin-toggle-final,
@@ -6252,14 +6328,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;
@@ -6274,6 +6365,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). */
@@ -6595,6 +6693,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;
@@ -6662,15 +6767,38 @@ line-height: 31px;
   }
   .md3 .srp-bar {
     position: sticky;
-    top: 64px;
+    /* 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;
     z-index: 20;
-    background: var(--md-surface);
+    background: #fff;
     padding: 8px 0;
     margin: 0 0 8px;
     box-shadow: 0 6px 8px -8px rgba(0, 0, 0, 0.3);
   }
+  /* 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
+     (that bleeds in all 4 directions equally, including a huge slab below the bar covering the
+     cards underneath it — that was tried and broke the page) — an absolutely-positioned layer
+     confined to top:0/bottom:0 of .srp-bar's own box (position:sticky is a containing block for
+     it, same as position:relative) stays exactly as tall as the bar, only wider. z-index:-1 is
+     scoped to .srp-bar's own stacking context (it has z-index:20), so it paints behind the bar's
+     text/buttons but still above the page content scrolling underneath. */
+  .md3 .srp-bar::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 100vw;
+    transform: translateX(-50%);
+    background: #fff;
+    z-index: -1;
+  }
   .md3 .field-grid-2 {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     gap: 10px;
   }
   .md3 .hero-search {
@@ -7193,8 +7321,10 @@ 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;
@@ -7377,6 +7507,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;
 }
@@ -7417,6 +7569,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;
 }
@@ -7467,9 +7625,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;
@@ -8697,20 +8852,33 @@ 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;
     gap: 16px;
     grid-area: evalcol;
   }
-  .md3 .fin-eval-pill--good {
-    background: #dff3e5 !important;
-    border-radius: 11px !important;
-    width: 100%;
-    height: 27px;
-    box-sizing: border-box;
-    justify-content: center;
-  }
+  /* box sizing for this pill (all three of its locations) lives in the shared, higher-specificity
+     .cc-price/.fin-calc-card/.fin-modal rule near the top of this file — this generic, unscoped
+     copy used to ALSO force `background: #dff3e5 !important`, silently overriding every tier's
+     real inline color (the 'good' tier's canonical rgb(22,138,69) included) at this breakpoint. */
   .md3 .fin-eval-bar {
     height: 7px;
   }
@@ -8735,6 +8903,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;
@@ -10334,10 +10507,14 @@ color: #005CFF;
 }
 .md3 .vdp-photosheet {
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 100vh;
+  /* was `left/right/bottom: 0` + `height: 100vh` — over-constrained (top was the free value, so
+     it was computed as containerHeight - 100vh) and, on the affected mobile browsers, 100vh can
+     exceed the CURRENT visible height (e.g. address bar still shown), which solved to a NEGATIVE
+     top: the sheet's top edge — its own header, with a close button — rendered above y=0 of this
+     already-safely-sized fixed overlay (see VdpViewer.tsx's own top-of-file portal comment), i.e.
+     behind the browser's UI. `inset: 0` instead just fills the (correctly-sized) positioned
+     ancestor exactly, no viewport unit involved. */
+  inset: 0;
   z-index: 211;
   display: flex;
   flex-direction: column;
@@ -10356,7 +10533,9 @@ color: #005CFF;
   align-items: center;
   justify-content: center;
   min-height: 88px;
-  padding-top: 10px;
+  /* safe-area-aware: with the `inset: 0` fix above this sits flush against the true top edge of
+     the fullscreen overlay — same notch/status-bar territory as the main viewer's own header. */
+  padding-top: max(10px, env(safe-area-inset-top));
   touch-action: none;
 }
 .md3 .vdp-photosheet__handle {
@@ -10371,7 +10550,8 @@ color: #005CFF;
 }
 .md3 .vdp-photosheet__close {
   position: absolute;
-  left: 12px;
+  /* safe-area-aware: in the landscape layout the notch can rotate onto this side. */
+  left: max(12px, env(safe-area-inset-left));
   top: 50%;
   transform: translateY(-50%);
 }
@@ -10385,7 +10565,8 @@ color: #005CFF;
 }
 .md3 .vdp-photosheet__titles {
   flex: none;
-  padding: 0 16px 12px;
+  /* safe-area-aware left/right: landscape can rotate the notch onto either side. */
+  padding: 0 max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
   text-align: left;
 }
 .md3 .vdp-photosheet__title {
@@ -10408,7 +10589,9 @@ color: #005CFF;
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 0 12px 12px;
+  /* safe-area-aware left/right — otherwise the outer grid tiles can sit partly under a
+     landscape-rotated notch, tappable in theory but visually cut off. */
+  padding: 0 max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
 }
 .md3 .vdp-photosheet__grid {
   display: grid;
@@ -10454,8 +10637,10 @@ color: #005CFF;
   align-items: center;
   justify-content: flex-start;
   gap: 6px;
-  height: 44px;
-  padding: 0 16px;
+  /* was a fixed `height: 44px` — swapped for `min-height` so the safe-area bottom padding below
+     (home indicator) grows the bar instead of pushing its text outside a clipped fixed box. */
+  min-height: 44px;
+  padding: 0 max(16px, env(safe-area-inset-right)) max(0px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
   /* rgba(0,0,0,0.5) was invisible here — it darkens whatever's behind it, and the sheet's own
      panel (rgb(6,11,18)) is already almost black, so a 50%-black overlay on top of near-black
      reads as no change at all. #1c222c is lighter/bluer and already used elsewhere in this same
@@ -10507,7 +10692,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[];
@@ -132,14 +130,31 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
         ))}
       </div>
       {/* arrows + dots only when there is actually something to switch to — with a single
-          image (e.g. SRP cards before their gallery is lazy-loaded) they are dead controls. */}
+          image (e.g. SRP cards before their gallery is lazy-loaded) they are dead controls.
+          States: single-image → n<=1 → hidden here (same "nothing to expand into" case as
+          GalleryCounter, cardParts.tsx). Loading → `images` starts as a 1-element array (the
+          card's main thumbnail) until the caller's lazy-load resolves, so this rule ALSO covers
+          "still loading" — arrows/dots simply aren't rendered yet, no skeleton, same discipline
+          as the other overlay controls. On touch devices this used to mean "hidden until the
+          user's first hover/touch on this exact card" (mouseenter/touchstart was the ONLY lazy-
+          load trigger) — CarCard's `eagerMedia` (see its own doc comment) starts that same load
+          on scroll-into-view instead, so this loading window is normally already closed by the
+          time the user reaches the card, without changing anything in this component. Desktop
+          hover-to-reveal (`.cardcar:hover .car-arrow`) vs. always-visible on touch is a CSS-only
+          concern — see `@media (hover: none)` in md3.css, not component state. */}
       {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"