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

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}
@@ -193,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}
@@ -247,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/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

@@ -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).
@@ -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>
   );
@@ -783,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>
@@ -835,7 +943,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 +980,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

@@ -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",
@@ -382,6 +383,7 @@
     },
     "rate": {
       "upTo": "Rate bis",
+      "upToPlaceholder": "Rate bis, z. B. 350 €/mtl.",
       "perMonth": "/mtl.",
       "downPayment": "Anzahlung",
       "none": "keine",
@@ -389,6 +391,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 +729,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

@@ -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",
@@ -382,6 +383,7 @@
     },
     "rate": {
       "upTo": "Rate up to",
+      "upToPlaceholder": "Rate up to, e.g. 350 €/month",
       "perMonth": "/month",
       "downPayment": "Down payment",
       "none": "none",
@@ -389,6 +391,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 +729,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.115",
   "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",