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

package/cards/CarCard.tsx

@@ -6,8 +6,10 @@
 // page, landing pages and "similar cars" grids.
 //
 // Pure / presentational: all data comes via the `AutobahnCar` prop, all behaviour
-// via injected callbacks. No store / API / `window` access. Renders correctly
-// only inside a `<div className="md3">` subtree.
+// via injected callbacks. No store/API access — the one guarded `window`-adjacent
+// read is IntersectionObserver (see `eagerMedia` below), feature-checked so a
+// non-browser render (tests without a polyfill) degrades to a no-op, not a crash.
+// Renders correctly only inside a `<div className="md3">` subtree.
 //
 // Differs from the design kit on purpose:
 //  - favorite state is INJECTED (isFavorite + onToggleFavorite) instead of the
@@ -15,7 +17,7 @@
 //  - the needs-data deal signals (DropChip / SaveChip) only appear when real
 //    `drop` / `savings` data is present.
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { TranslationFunction } from '../types';
 
 import { CardCarousel, IconButton, SaveChip, Button } from '../ui';
@@ -53,6 +55,20 @@ export interface CarCardProps {
   onOpen: (car: AutobahnCar) => void;
   /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
   onMediaEnter?: () => void;
+  /**
+   * Also fire `onMediaEnter` as soon as the card scrolls into view, instead of waiting for a
+   * hover/touch. Off by default — the SRP's grid is effectively unbounded (pagination/infinite
+   * scroll), and firing one getImages() request per card the instant it enters the viewport
+   * reintroduced exactly the failure mode `loadCarImages` was deliberately scoped away from
+   * (SearchNextPage.tsx: "eager per-card getImages() ... raised an error toast PER failed
+   * request, stacked toasts on mobile scroll" whenever the image service is degraded).
+   * Opt into this only for small, BOUNDED grids (e.g. the homepage's ≤6-card "Top-Angebote"),
+   * where without it the gallery's prev/next arrows and image-count dots stay hidden until the
+   * user's first hover/touch on THAT card resolves (async) — on touch devices this reads as
+   * "controls need a preliminary tap", because the very same tap that reveals them is usually
+   * also the tap the user meant as their real interaction with the card.
+   */
+  eagerMedia?: boolean;
   /** i18n translate fn (drilled from the page). */
   t: TranslationFunction;
   /**
@@ -90,6 +106,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   onToggleFavorite,
   onOpen,
   onMediaEnter,
+  eagerMedia,
   t,
   adminAction,
   onRequestOffer,
@@ -100,6 +117,35 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   const [mode, setMode] = useState<PaymentMode>('financing');
   const [photoIndex, setPhotoIndex] = useState(0);
   const [viewerOpen, setViewerOpen] = useState(false);
+  const mediaRef = useRef<HTMLDivElement | null>(null);
+  // always call the LATEST onMediaEnter without re-arming the observer on every render (the
+  // page callers below construct a fresh closure each render) — the effect itself only needs
+  // to run once per mount.
+  const onMediaEnterRef = useRef(onMediaEnter);
+  onMediaEnterRef.current = onMediaEnter;
+  useEffect(() => {
+    if (!eagerMedia || typeof IntersectionObserver === 'undefined') return undefined;
+    const el = mediaRef.current;
+    if (!el) return undefined;
+    let fired = false;
+    // rootMargin starts the fetch a bit before the card is actually on-screen, so by the time
+    // the user's eye (or finger, on touch) reaches it the gallery has usually already resolved
+    // — the whole point being no tap is required to make prev/next + the counter "real".
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !fired) {
+            fired = true;
+            onMediaEnterRef.current && onMediaEnterRef.current();
+            observer.disconnect();
+          }
+        });
+      },
+      { rootMargin: '200px 0px', threshold: 0 },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [eagerMedia]);
   // as-good-as-new gate (mileage < 1,000 km AND first registration unknown or < 12 months) —
   // undefined (older AutobahnCar producer not yet updated) fails OPEN, keeping prior behaviour.
   const asGoodAsNew = car.asGoodAsNew !== false;
@@ -119,6 +165,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
     >
       <div
         className="cc-media"
+        ref={mediaRef}
         style={{ position: 'relative' }}
         onMouseEnter={onMediaEnter}
         onTouchStart={onMediaEnter}

package/cards/CarRow.tsx

@@ -6,7 +6,9 @@
 // CTA stop propagation so they don't also trigger the card open.
 //
 // Pure / presentational: all data via the `AutobahnCar` prop, all behaviour via
-// injected callbacks. No store / API / `window` access. Renders correctly only
+// injected callbacks. No store/API access — the one guarded `window`-adjacent read is
+// IntersectionObserver (see `eagerMedia` below), feature-checked so a non-browser render
+// (tests without a polyfill) degrades to a no-op, not a crash. Renders correctly only
 // inside a `<div className="md3">` subtree.
 //
 // Differs from the design kit on purpose:
@@ -18,7 +20,7 @@
 //    no className prop) so the scoped `.pp-cta` margin / responsive rules and the
 //    `.pp-cta + .pp-activity` adjacency in md3.css still apply.
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { TranslationFunction } from '../types';
 
 import { CardCarousel, IconButton, SaveChip, Button, Icon, StatChip } from '../ui';
@@ -53,6 +55,16 @@ export interface CarRowProps {
   onOpen: (car: AutobahnCar) => void;
   /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
   onMediaEnter?: () => void;
+  /**
+   * Also fire `onMediaEnter` as soon as the card scrolls into view, instead of waiting for a
+   * hover/touch. Off by default. See CarCard's identically-named prop for the full rationale —
+   * same trade-off applies here (SRP's list view is the other consumer of this same concern).
+   * Safe to enable even on an effectively-unbounded list AS LONG AS the caller's `onMediaEnter`
+   * itself caps concurrent fetches (e.g. SearchNextPage.tsx's loadCarImages queues through
+   * runQueuedImageLoad) — this component has no opinion on that, it only decides WHEN to call
+   * onMediaEnter, never how many may run at once.
+   */
+  eagerMedia?: boolean;
   /** i18n translate fn (drilled from the page). */
   t: TranslationFunction;
   /**
@@ -75,12 +87,39 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
   onToggleFavorite,
   onOpen,
   onMediaEnter,
+  eagerMedia,
   t,
   adminAction,
   onShowFinancingDetails,
 }) => {
   const [mode, setMode] = useState<PaymentMode>('financing');
   const [photoIndex, setPhotoIndex] = useState(0);
+  const mediaRef = useRef<HTMLDivElement | null>(null);
+  // always call the LATEST onMediaEnter without re-arming the observer on every render (the
+  // page callers construct a fresh closure each render) — the effect itself only needs to run
+  // once per mount. Identical pattern to CarCard.tsx — see its own comment for the rationale.
+  const onMediaEnterRef = useRef(onMediaEnter);
+  onMediaEnterRef.current = onMediaEnter;
+  useEffect(() => {
+    if (!eagerMedia || typeof IntersectionObserver === 'undefined') return undefined;
+    const el = mediaRef.current;
+    if (!el) return undefined;
+    let fired = false;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !fired) {
+            fired = true;
+            onMediaEnterRef.current && onMediaEnterRef.current();
+            observer.disconnect();
+          }
+        });
+      },
+      { rootMargin: '200px 0px', threshold: 0 },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [eagerMedia]);
   // as-good-as-new gate (mileage < 1,000 km AND first registration unknown or < 12 months) —
   // undefined (older AutobahnCar producer not yet updated) fails OPEN, keeping prior behaviour.
   const asGoodAsNew = car.asGoodAsNew !== false;
@@ -109,7 +148,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
       onClick={() => onOpen(car)}
       style={{ background: 'var(--md-sc-lowest)' }}
     >
-      <div className="listcard-media" style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
+      <div className="listcard-media" ref={mediaRef} style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
         {/* 'auto': desktop picks cover/contain per photo (crops only when it wouldn't lose too
             much of the shot); below 601px this is identical to 'contain', so mobile is unchanged. */}
         <CardCarousel images={car.gallery} height="100%" fit="auto" onChange={setPhotoIndex} />
@@ -173,7 +212,17 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
           <GalleryBadges car={car} t={t} />
         </div>
         {/* desktop: single row — light "1|N" photo counter + a combined eye/heart chip, no
-            availability/Geprüft pill (not present in the Figma "mcard" export). */}
+            availability/Geprüft pill (not present in the Figma "mcard" export).
+            Same 3-state policy as the mobile pills above (GalleryCounter/GalleryBadges,
+            cardParts.tsx) and CarCard's GalleryCounter/GalleryActivityPill, just inlined here
+            instead of reusing those components (different chip markup — one shared "N|M" +
+            eye+heart pill instead of three separate ones):
+             - single-image: car.photos is the real, eagerly-known count (not the lazily-loaded
+               gallery array length) — accurate even before the extra photos have loaded.
+             - loading: viewsCount/favoritesCount are undefined until stats resolve for this car
+               — hidden, no skeleton, same as everywhere else.
+             - zero-value: a real 0 is intentionally treated the same as "not loaded" — hidden,
+               not shown as "eye 0" / "heart 0" (noise on a dense results list otherwise). */}
         <div
           className="hide-mobile"
           style={{ position: 'absolute', bottom: 20, left: 12, zIndex: 3, display: 'flex', alignItems: 'center', gap: 6 }}

package/cards/cardParts.tsx

@@ -203,6 +203,7 @@ export const DropChip: React.FunctionComponent<DropChipProps> = ({ amount, t })
         color: 'var(--md-good)',
         fontSize: 10.5,
         fontWeight: 700,
+        lineHeight: '14px',
         boxShadow: 'var(--md-e1)',
         whiteSpace: 'nowrap',
       }}
@@ -230,7 +231,7 @@ const dealPill: React.CSSProperties = {
 export const PercentChip: React.FunctionComponent<{ pct?: number }> = ({ pct }) => {
   if (pct == null || pct <= 0) return null;
   return (
-    <span className="deal-chip deal-chip--percent" style={{ ...dealPill, background: 'var(--md-error)', color: '#fff' }}>
+    <span className="deal-chip deal-chip--percent" style={{ ...dealPill, background: 'var(--md-error)', color: '#fff', lineHeight: '14px' }}>
       −{pct}%
     </span>
   );
@@ -835,7 +836,15 @@ export interface GalleryCounterProps {
  * Bottom-left gallery overlay: expand icon + "current|total" (Figma). Reuses the existing
  * `.imglabel` pill style (already used for the list-card's photo-count badge) rather than a new
  * class — same dark translucent pill, just with the maximize icon instead of the image icon.
- * Hidden with 0/1 photos (nothing to expand into).
+ *
+ * States (shared policy across GalleryCounter, the carousel's own arrows/dots in CardCarousel,
+ * and GalleryActivityPill below — see its own doc comment for the other two):
+ *  - single-image: `total` is the car's REAL, eagerly-known photo count (car.photos, from the
+ *    search payload — not the lazily-loaded gallery array length), so this is accurate even
+ *    before any image beyond the first has actually loaded. total<=1 → hidden: nothing to expand
+ *    into. Never a "1|1" placeholder.
+ *  - loading: while `total` itself is still unknown (car not yet resolved) the caller simply
+ *    hasn't rendered this component yet — there is no separate in-between skeleton state here.
  */
 export const GalleryCounter: React.FunctionComponent<GalleryCounterProps> = ({ current, total, light, onClick }) => {
   if (total <= 1) return null;
@@ -864,8 +873,18 @@ export interface GalleryActivityPillProps {
 
 /**
  * Bottom-right gallery overlay: eye + views, heart + favorites, in ONE pill (Figma "Push Chips /
- * Likes", node 297:1037). Each half renders independently and the whole pill is omitted when
- * neither figure has loaded yet (same async-stats/NEEDS-DATA discipline as the rest of this file).
+ * Likes", node 297:1037). Each half renders independently.
+ *
+ * States (chosen ONE policy, applied identically to both halves):
+ *  - loading: `viewsCount`/`favoritesCount` are `undefined` until the async stats call
+ *    (UserActionsAPI 'stats/viewers') resolves for this car. No skeleton — the half (or the
+ *    whole pill, if both are still pending) simply doesn't render yet, same "hidden, not a
+ *    placeholder" discipline as GalleryCounter/CardCarousel's arrows above.
+ *  - zero-value: a REAL `0` is treated the same as "not there" — hidden, not shown as "👁 0".
+ *    Deliberate choice over spelling out "0" (the other option the ticket allows): on a dense
+ *    grid of fresh listings a "👁 0 ❤ 0" pill on every card is noise, not signal. `!viewsCount`/
+ *    `!favoritesCount` below intentionally don't distinguish real-0 from not-yet-loaded — both
+ *    read as "nothing worth showing (yet)", which is the same outcome either way.
  */
 export const GalleryActivityPill: React.FunctionComponent<GalleryActivityPillProps> = ({ viewsCount, favoritesCount }) => {
   if (!viewsCount && !favoritesCount) return null;

package/chrome/TopBar.tsx

@@ -110,9 +110,14 @@ export interface TopBarProps {
    *  number/tel: link was confirmed for this, so it defaults to the contact page. Pass a `tel:...`
    *  href here once one is confirmed. */
   phoneHref?: string;
-  /** mobile-only: slide the header out of view on scroll-down, back in on scroll-up (coordinated
-   *  with the VDP sticky offer bottom bar's own show/hide). Off by default — only the car-detail
-   *  page (topBarVariant 'conversion') opts in; every other page keeps the header always docked. */
+  /** mobile-only (the CSS that actually moves the header, `.topbar--hidden`, only exists inside
+   *  the `@media (max-width: 600px)` block — desktop keeps this prop's `hidden` state but never
+   *  renders it): slide the header out of view on scroll-down, back in on scroll-up. On the
+   *  car-detail page this is additionally coordinated with the VDP sticky offer bottom bar (hides
+   *  well before that bar would ever dock — see STICKY_SHOW_AT in VehicleDetailedNextPage.tsx).
+   *  Off by default — the car-detail page (topBarVariant 'conversion'), the homepage ('/') and
+   *  the SRP list page ('/search') opt in (see App.tsx); other pages keep the header always
+   *  docked. */
   autoHideOnScroll?: boolean;
 }
 

package/locales/de/autobahn.json

@@ -382,6 +382,7 @@
     },
     "rate": {
       "upTo": "Rate bis",
+      "upToPlaceholder": "Rate bis, z. B. 350 €/mtl.",
       "perMonth": "/mtl.",
       "downPayment": "Anzahlung",
       "none": "keine",
@@ -389,6 +390,10 @@
       "months": "{{months}} Monate",
       "months_plural": "{{months}} Monate"
     },
+    "mileage": {
+      "upTo": "km bis",
+      "upToPlaceholder": "km bis, z. B. 50000 km"
+    },
     "consumption": {
       "unitLabel": "l / 100 km"
     },
@@ -723,7 +728,7 @@
     "leaseVehiclePrice": "Anschaffungspreis¹",
     "leaseDownPayment": "Einmalige Sonderzahlung",
     "finalPaymentDue": "Schlusszahlung (fällig am Vertragsende)",
-    "residualValue": "Restwert (verpflichtend)",
+    "residualValue": "Verpflichtender Kaufpreis am Vertragsende",
     "rateSumLabel": "Summe der Leasingraten ({{term}} × {{amount}} €)",
     "addServicesRowLease": "Rundum-Sorglos-Paket (Einmalzahlung)",
     "subtotalWithPackage": "Gesamt inkl. Sonderzahl. & Paket",

package/locales/en/autobahn.json

@@ -382,6 +382,7 @@
     },
     "rate": {
       "upTo": "Rate up to",
+      "upToPlaceholder": "Rate up to, e.g. 350 €/month",
       "perMonth": "/month",
       "downPayment": "Down payment",
       "none": "none",
@@ -389,6 +390,10 @@
       "months": "{{months}} months",
       "months_plural": "{{months}} months"
     },
+    "mileage": {
+      "upTo": "Mileage up to",
+      "upToPlaceholder": "Mileage up to, e.g. 50000 km"
+    },
     "consumption": {
       "unitLabel": "l / 100 km"
     },
@@ -723,7 +728,7 @@
     "leaseVehiclePrice": "Acquisition price¹",
     "leaseDownPayment": "One-time special payment",
     "finalPaymentDue": "Final payment (due at contract end)",
-    "residualValue": "Residual value (mandatory)",
+    "residualValue": "Mandatory purchase price at contract end",
     "rateSumLabel": "Sum of leasing installments ({{term}} × {{amount}} €)",
     "addServicesRowLease": "Complete care package (one-time payment)",
     "subtotalWithPackage": "Total incl. special payment & package",

package/package.json

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

@@ -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 {
@@ -3747,7 +3785,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 +5202,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 +5475,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,
@@ -6662,13 +6707,36 @@ 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;
     gap: 10px;
@@ -8703,14 +8771,10 @@ color: #005CFF;
     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;
   }
@@ -10334,10 +10398,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 +10424,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 +10441,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 +10456,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 +10480,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 +10528,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

package/ui/CardCarousel.tsx

@@ -132,7 +132,18 @@ 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)}>