@bytebrand/fe-ui-core-autobahn 1.0.60 → 1.0.62

package/cards/CarCard.tsx

@@ -18,7 +18,7 @@
 import React, { useState } from 'react';
 import { TranslationFunction } from '../types';
 
-import { CardCarousel, IconButton, StatChip, SaveChip, Button } from '../ui';
+import { CardCarousel, IconButton, SaveChip, Button } from '../ui';
 import {
   SpecLine,
   EcoLine,
@@ -28,15 +28,18 @@ import {
   OfferBadge,
   PriceTabs,
   PriceHero,
-  PriceMeter,
+  PriceEvalCol,
+  PriceTerms,
   CardCtaRow,
   GalleryCounter,
+  GalleryActivityPill,
   cardSpec,
   PaymentMode,
-  ratingTone,
   callDealerSalesPhone,
+  DEALER_SALES_PHONE,
 } from './cardParts';
 import { AutobahnCar } from './types';
+import VdpViewer from '../vdp/VdpViewer';
 
 export interface CarCardProps {
   /** fully-resolved car view-model. */
@@ -85,6 +88,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
 }) => {
   const [mode, setMode] = useState<PaymentMode>('financing');
   const [photoIndex, setPhotoIndex] = useState(0);
+  const [viewerOpen, setViewerOpen] = useState(false);
   const showSave = car.savings != null && car.savings > 600;
   const showOfferBadge = !!(car.isNew || car.drop != null || showSave || car.dropPct != null || car.zeroDown);
   return (
@@ -102,6 +106,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
         <CardCarousel images={car.gallery} height="100%" fit="contain" onChange={setPhotoIndex} />
         {/* max two overlays: heart + ONE deal signal — rating moved next to the price */}
         <div
+          className="cc-fav"
           style={{ position: 'absolute', top: 6, right: 6, zIndex: 3 }}
           onClick={(e) => e.stopPropagation()}
         >
@@ -112,6 +117,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
             SaveChip; each only renders when its real data exists. */}
         {(showOfferBadge || car.dropPct != null) && (
           <div
+            className="cc-badges"
             style={{
               position: 'absolute',
               top: 10,
@@ -133,12 +139,22 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
             <OfferBadge show={showOfferBadge} t={t} />
           </div>
         )}
-        {/* bottom-left: expand icon + "current|total" photo counter (Figma) */}
-        <div style={{ position: 'absolute', bottom: 10, left: 10, zIndex: 3 }}>
-          <GalleryCounter current={photoIndex + 1} total={car.photos} />
+        {/* bottom-left: expand icon + "current | total" photo counter (Figma light pill, node
+            281:1016) — opens the full VdpViewer lightbox; stopPropagation keeps the click off
+            the card's own onOpen (React portals still bubble through the React tree, not the
+            DOM tree, so this guard is needed even though VdpViewer renders via createPortal). */}
+        <div
+          style={{ position: 'absolute', bottom: 10, left: 10, zIndex: 3 }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <GalleryCounter current={photoIndex + 1} total={car.photos} light onClick={() => setViewerOpen(true)} />
+        </div>
+        {/* bottom-right: eye/heart activity pill — real stats only (Figma "Push Chips / Likes", node 297:1037) */}
+        <div style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
+          <GalleryActivityPill viewsCount={car.viewsCount} favoritesCount={car.favoritesCount} />
         </div>
       </div>
-      <div style={{ padding: '12px 14px 14px', display: 'flex', flexDirection: 'column', gap: 9, flex: 1 }}>
+      <div style={{ padding: '10px 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}
@@ -148,23 +164,30 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
           </div>
         </div>
         <SpecLine items={cardSpec(car)} oneLine />
-        <div style={{ flex: 1 }} />
-        <div className="cc-price" style={{ marginTop: 4, borderTop: '1px solid var(--md-outline-variant)', paddingTop: 10 }}>
+        <div className="cc-price" style={{ marginTop: 4, borderTop: '1px solid var(--md-outline-variant)' }}>
           <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 10 }}>
             <PriceHero car={car} mode={mode} t={t} />
-            {car.rating && (
-              <StatChip
-                tone={ratingTone(car.rating)}
-                icon={ratingTone(car.rating) === 'good' ? 'check' : 'minus'}
-              >
-                {t('autobahn:tier.' + car.rating)}
-              </StatChip>
-            )}
+            <PriceEvalCol car={car} t={t} />
           </div>
-          <PriceMeter car={car} t={t} />
+          {/* same fallback CardCtaRow already uses below: pages that haven't wired a real
+              "Rate anpassen" sheet yet still get a working "Details" link (opens the car). */}
+          <PriceTerms car={car} mode={mode} onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))} t={t} />
         </div>
-        <EcoLine t={t} car={car} style={{ marginTop: 8 }} />
+        <EcoLine
+          t={t}
+          car={car}
+          style={{
+            marginTop: 'auto',
+            fontFamily: 'Arial, Helvetica, sans-serif',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            fontSize: 11,
+            lineHeight: '11px',
+            textAlign: 'justify',
+            color: '#0e2238',
+          }}
+        />
         {/* Mobile-only row (CardCtaRow itself carries the show-mobile class) — always
             rendered, with real fallbacks the page can override once it wires its own
             handlers (e.g. the "Rate anpassen" FinanceDetailsModal sheet). Never hidden. */}
@@ -191,6 +214,19 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
           </div>
         )}
       </div>
+      {viewerOpen && (
+        <div onClick={(e) => e.stopPropagation()}>
+          <VdpViewer
+            images={car.galleryLarge || car.gallery}
+            start={photoIndex}
+            onClose={() => setViewerOpen(false)}
+            t={t}
+            phone={DEALER_SALES_PHONE}
+            onCall={onCall || callDealerSalesPhone}
+            onEmail={onRequestOffer || (() => onOpen(car))}
+          />
+        </div>
+      )}
     </article>
   );
 };

package/cards/CarRow.tsx

@@ -107,14 +107,28 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
             {car.isNew && <span className="neu-badge">NEU</span>}
             {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
             <ZeroDownChip t={t} show={car.zeroDown} compact className="show-mobile" />
-            <ZeroDownChip t={t} show={car.zeroDown} className="hide-mobile" />
+            <ZeroDownChip
+              t={t}
+              show={car.zeroDown}
+              className="hide-mobile"
+              style={{
+                height: 30,
+                padding: '0 10px',
+                borderRadius: 15,
+                background: 'rgba(0, 92, 255, 0.2)',
+                border: '1px solid rgba(0, 92, 255, 0.05)',
+                color: '#005CFF',
+                fontSize: 13,
+                fontWeight: 700,
+              }}
+            />
             <PercentChip pct={car.dropPct} />
           </div>
           <OfferBadge show={showOfferBadge} t={t} />
         </div>
-        {/* bottom-left: expand icon + "current|total" (Figma) — replaces the old plain photo-count
-            pill; GalleryBadges (eye/heart/trust) keeps its own spot bottom-right, unchanged. */}
-        <div style={{ position: 'absolute', bottom: 10, left: 10, zIndex: 3 }}>
+        {/* mobile: expand icon + "current|total" pill, bottom-left; desktop uses its own lighter
+            counter chip further down (combined with the eye/heart chip). */}
+        <div className="show-mobile" style={{ position: 'absolute', bottom: 10, left: 10, zIndex: 3 }}>
           <GalleryCounter current={photoIndex + 1} total={car.photos} />
         </div>
         <div
@@ -124,27 +138,58 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
         >
           <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
         </div>
-        {/* desktop: heart sits on the photo itself (Figma "mcard"), not next to the title. */}
+        {/* activity/trust badges — mobile only (dark photo-count pill + eye/heart/trust pills);
+            desktop replaces this whole row with the combined light chips below (Figma "mcard" —
+            the heart itself lives in the info column's title row on desktop, per the Figma export,
+            not on the photo). */}
+        <div className="show-mobile">
+          <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). */}
         <div
-          onClick={(e) => e.stopPropagation()}
           className="hide-mobile"
-          style={{ position: 'absolute', top: 10, right: 10, zIndex: 3 }}
+          style={{ position: 'absolute', bottom: 12, left: 12, zIndex: 3, display: 'flex', alignItems: 'center', gap: 6 }}
         >
-          <IconButton name="heart" active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
+          {car.photos > 1 && (
+            <span className="mcard-photo-chip">
+              <Icon name="maximize" size={16} stroke={1.7} />
+              {photoIndex + 1}|{car.photos}
+            </span>
+          )}
+          {(!!car.viewsCount || !!car.favoritesCount) && (
+            <span className="mcard-photo-chip">
+              {!!car.viewsCount && (
+                <>
+                  <Icon name="eye" size={16} stroke={1.7} />
+                  {car.viewsCount}
+                </>
+              )}
+              {!!car.favoritesCount && (
+                <>
+                  <Icon name="heart" size={16} stroke={1.7} />
+                  {car.favoritesCount}
+                </>
+              )}
+            </span>
+          )}
         </div>
-        {/* activity/trust badges — overlaid on the studio-white floor at the bottom of the photo
-            itself (PM ref), not a separate divided strip below it. Bottom-right, raised above the
-            carousel dots and the photo-count badge (positioning lives in .gallery-badges, md3.css). */}
-        <GalleryBadges car={car} t={t} />
       </div>
 
       <div className="listcard-info">
-        <div style={{ minWidth: 0 }}>
-          <div className="md-title" style={{ fontSize: 18, lineHeight: 1.2 }}>
-            {car.make} {car.model}
+        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
+          <div style={{ minWidth: 0 }}>
+            <div className="md-title" style={{ fontSize: 18, lineHeight: 1.2 }}>
+              {car.make} {car.model}
+            </div>
+            <div className="md-body-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+              {car.trim}
+            </div>
           </div>
-          <div className="md-body-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-            {car.trim}
+          {/* desktop only — the Figma export places the heart here (title row), not on the photo;
+              mobile keeps its own heart on the photo (show-mobile, above), untouched. */}
+          <div onClick={(e) => e.stopPropagation()} className="hide-mobile">
+            <IconButton name="heart" active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
           </div>
         </div>
         <div className="specstrip">

package/cards/cardParts.tsx

@@ -14,13 +14,13 @@
 // ('Daten folgt') marker instead of inventing a number — see PricePaths'
 // market band and PpActivity. DropChip renders nothing when there is no drop.
 
-import React from 'react';
+import React, { useState } from 'react';
 import { TranslationFunction } from '../types';
 import { defaultConfig } from '@bytebrand/fe-financing';
 
 import { Icon, Button } from '../ui';
-import { DocCheckIcon } from '../vdp/FinanceCalculator';
-import { CO2_CLASSES, CO2_COLORS } from '../constants';
+import { DocCheckIcon, 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).
 export { ratingTone } from '../data/toAutobahnCar';
@@ -35,6 +35,7 @@ const _finMonths = _finCfg.rawPaybackPeriod || _finCfg.paybackPeriod || 48;
 /** leasing terms fallbacks (used when the car doesn't carry its own), e.g. "10.000 km/Jahr · 48 Monate". */
 const _leasPeriod = _leasCfg.rawPaybackPeriod || _leasCfg.paybackPeriod;
 const _leasMileage = _leasCfg.annualMileage || _leasCfg.mileage;
+const _leasFirstInstallment = (_leasCfg.firstInstallment || 0).toLocaleString('de-DE');
 
 /** mileage → 'X.XXX km' (de-DE grouping). */
 export function fmtKm(n: number): string {
@@ -90,6 +91,7 @@ export interface SpecLineProps {
 /** Compact pipe-separated spec line (AutoScout pattern). */
 export const SpecLine: React.FunctionComponent<SpecLineProps> = ({ items, size = 12.5, oneLine = false }) => (
   <div
+    className="cc-spec"
     style={{
       display: 'flex',
       flexWrap: oneLine ? 'nowrap' : 'wrap',
@@ -189,6 +191,7 @@ export const DropChip: React.FunctionComponent<DropChipProps> = ({ amount, t })
   }
   return (
     <span
+      className="deal-chip deal-chip--drop"
       style={{
         display: 'inline-flex',
         alignItems: 'center',
@@ -226,7 +229,11 @@ const dealPill: React.CSSProperties = {
 /** Percent price-drop chip (−X%). Red pill — pairs with DropChip. Renders nothing without a real pct. */
 export const PercentChip: React.FunctionComponent<{ pct?: number }> = ({ pct }) => {
   if (pct == null || pct <= 0) return null;
-  return <span style={{ ...dealPill, background: 'var(--md-error)', color: '#fff' }}>−{pct}%</span>;
+  return (
+    <span className="deal-chip deal-chip--percent" style={{ ...dealPill, background: 'var(--md-error)', color: '#fff' }}>
+      −{pct}%
+    </span>
+  );
 };
 
 /**
@@ -239,12 +246,15 @@ export const ZeroDownChip: React.FunctionComponent<{
   compact?: boolean;
   t: TranslationFunction;
   className?: string;
-}> = ({ show, compact, t, className }) => {
+  /** overrides the default pill look (e.g. the desktop "mcard" full-text badge's own blue tint/size
+   *  from the Figma export) — merged last so it wins over the shared dealPill defaults below. */
+  style?: React.CSSProperties;
+}> = ({ show, compact, t, className, style }) => {
   if (!show) return null;
   return (
     <span
       className={className}
-      style={{ ...dealPill, background: 'var(--md-accent-container)', color: 'var(--md-on-accent-container)' }}
+      style={{ ...dealPill, background: 'var(--md-accent-container)', color: 'var(--md-on-accent-container)', ...style }}
     >
       {compact ? t('autobahn:card.price.zeroDownCompact') : t('autobahn:card.price.zeroDown')}
     </span>
@@ -378,6 +388,48 @@ export const PriceMeter: React.FunctionComponent<{ car: AutobahnCar; t: Translat
   return null;
 };
 
+/**
+ * Preisbewertung pill + segmented tier bar, grouped in one column exactly like the VDP
+ * finance-calculator's mobile .fin-eval-col (FinanceCalculator.tsx/EvalBar) — the grid card's
+ * replacement for the old StatChip pill + full-width gradient .pp-bar pairing. Renders nothing
+ * without a rating (needs-data: never invent a tier).
+ */
+export const PriceEvalCol: React.FunctionComponent<{ car: AutobahnCar; t: TranslationFunction }> = ({ car, t }) => {
+  const tier = car.rating ? TONE_TO_TIER[car.rating] : undefined;
+  if (tier == null) return null;
+  const hasMarket =
+    car.marketLow != null && car.marketAvg != null && car.marketHigh != null && car.marketHigh > car.marketLow;
+  // same continuous market-position math as PriceMeter's knob, reused as EvalBar's leftPct override.
+  const leftPct = hasMarket
+    ? Math.max(4, Math.min(96, ((car.price - car.marketLow!) / (car.marketHigh! - car.marketLow!)) * 100))
+    : undefined;
+  const isGood = TIER_KEYS[tier] === 'good';
+  // both green tiers ('top' and 'good') collapse onto one "Top-Preis" claim (Figma "similar
+  // cars" card) — same convention the VDP FinanceCalculator now also uses for its own pill.
+  // footnote 4 carries the disclaimer text, same convention as the hero price's 1/2/3 markers.
+  const tierLabel = isGood ? t('autobahn:tier.top') : t('autobahn:tier.' + car.rating);
+  // 'good' collapses onto the 'top' tier's own color too (#168a45), matching the fixed
+  // "Top-Preis" text above rather than tier 1's lighter TIER_COLORS[1] green.
+  const pillColor = isGood ? TIER_COLORS[0] : TIER_COLORS[tier];
+  return (
+    <div className="fin-eval-col">
+      <div className="fin-eval-pill-cell">
+        <span
+          className={`fin-eval-pill${isGood ? ' fin-eval-pill--good' : ''}`}
+          style={{ color: pillColor, background: `color-mix(in srgb, ${pillColor} 16%, transparent)` }}
+          aria-label={t('autobahn:finance.priceRatingAria', { rating: tierLabel })}
+        >
+          {tierLabel}
+          {isGood && <sup>4</sup>}
+        </span>
+      </div>
+      <div className="fin-eval-bar-cell">
+        <EvalBar tier={tier} leftPct={leftPct} />
+      </div>
+    </div>
+  );
+};
+
 export type PaymentMode = 'financing' | 'leasing' | 'buy';
 
 export interface PriceTabsProps {
@@ -425,6 +477,50 @@ export interface PriceHeroProps {
   t: TranslationFunction;
 }
 
+/** footnote badge + click-to-open popover, shared by the Finanzierung/Leasing "UVP-Rate" (³) and
+ * Kaufen "Hersteller-UVP" (²) captions on the hero price — same circle/popover, different digit
+ * and body copy. */
+const UvpBadge: React.FunctionComponent<{
+  n: number;
+  open: boolean;
+  onToggle: () => void;
+  onClose: () => void;
+  body: string;
+  closeLabel: string;
+}> = ({ n, open, onToggle, onClose, body, closeLabel }) => (
+  <>
+    <span
+      className="pp-eyebrow-badge"
+      role="button"
+      tabIndex={0}
+      onClick={(e) => {
+        e.stopPropagation();
+        onToggle();
+      }}
+    >
+      {n}
+    </span>
+    {open && (
+      <div className="pp-uvp-tooltip" onClick={(e) => e.stopPropagation()}>
+        <button
+          type="button"
+          className="pp-uvp-tooltip-close"
+          aria-label={closeLabel}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClose();
+          }}
+        >
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5 5L15 15M15 5L5 15" stroke="white" strokeWidth={2.4} strokeLinecap="round" />
+          </svg>
+        </button>
+        <div className="pp-uvp-tooltip-body">{body}</div>
+      </div>
+    )}
+  </>
+);
+
 /**
  * Hero price for the active tab — Finanzierung/Leasing show a monthly rate ("z.B. … €/mtl.")
  * with its own real struck-through old rate (getFinancing/getLeasing `oldMonthlyInstallment`,
@@ -434,26 +530,69 @@ export interface PriceHeroProps {
  * their legal text lives in the page's own footnote block, not duplicated per-card.
  */
 export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode, t }) => {
+  const [uvpTooltipOpen, setUvpTooltipOpen] = useState(false);
   const isMoney = mode === 'buy';
   const value = mode === 'financing' ? car.monthly : mode === 'leasing' ? (car.lease as number) : car.price;
   const oldValue = mode === 'financing' ? car.oldMonthly : mode === 'leasing' ? car.oldLease : car.listPrice;
   const showOld = oldValue != null && oldValue > value;
+  // shrink the 65px hero rate for long values (e.g. 1.234 €) so it doesn't overflow the card —
+  // same digit-length technique as FinanceCalculator's own fin-rate-hero--len4/--len5/--len6.
+  const rateDigits = !isMoney ? String(Math.round(value)).length : 0;
+  const rateLenClass =
+    rateDigits >= 6 ? ' pp-hero-val--len6' : rateDigits === 5 ? ' pp-hero-val--len5' : rateDigits === 4 ? ' pp-hero-val--len4' : '';
+  // Kaufen: 6/7-digit purchase prices (e.g. 113.249 € / 1.553.249 €) shrink on desktop only —
+  // separate from the financing/leasing --len6 above since the desktop Kaufen sizes don't match
+  // the shared rate-based scale.
+  const buyDigits = isMoney ? String(Math.round(value)).length : 0;
+  const buyLen6Class = buyDigits >= 7 ? ' pp-hero-val--buy-len7' : buyDigits === 6 ? ' pp-hero-val--buy-len6' : '';
+  const oldDigits = showOld ? String(Math.round(oldValue as number)).length : 0;
+  const oldLenClass = oldDigits === 5 ? ' pp-hero-old--len5' : oldDigits === 4 ? ' pp-hero-old--len4' : '';
   return (
-    <div className="pp-hero">
-      {!isMoney && <div className="pp-eyebrow">{t('autobahn:finance.exampleLabel')}</div>}
+    <div className={'pp-hero' + (isMoney ? ' pp-hero--buy' : '')}>
       <div className="pp-hero-rate">
-        {showOld && (
-          <span className="pp-hero-old">
-            {(oldValue as number).toLocaleString('de-DE')} €<sup>2</sup>
+        <b className={'num pp-hero-val' + rateLenClass + buyLen6Class}>
+          {isMoney ? value.toLocaleString('de-DE') : fmtRate(value)} €
+        </b>
+        {/* z.B./old-rate/unit grouped in one stacked column beside the hero figure — mirrors
+            the VDP finance-calculator's .fin-rate-unit layout (FinanceCalculator.tsx) exactly.
+            Only shown when there's a real old price to strike through — without a discount the
+            eyebrow/unit have nothing to caption, so the whole group stays hidden. */}
+        {!isMoney && showOld && (
+          <span className="pp-hero-unit-group">
+            <span className="pp-eyebrow">
+              {t('autobahn:card.price.uvpRateLabel')}
+              <UvpBadge
+                n={3}
+                open={uvpTooltipOpen}
+                onToggle={() => setUvpTooltipOpen((v) => !v)}
+                onClose={() => setUvpTooltipOpen(false)}
+                closeLabel={t('autobahn:modal.close')}
+                body={t(
+                  mode === 'leasing'
+                    ? 'autobahn:card.price.uvpRateTooltipBodyLeasing'
+                    : 'autobahn:card.price.uvpRateTooltipBody',
+                )}
+              />
+            </span>
+            <span className={'pp-hero-old' + oldLenClass}>{Math.round(oldValue as number).toLocaleString('de-DE')} €</span>
+            <span className="pp-hero-unit">{t('autobahn:card.price.perMonth')}</span>
           </span>
         )}
-        <b className="num pp-hero-val">
-          {isMoney ? value.toLocaleString('de-DE') : fmtRate(value)} €<sup>1</sup>
-        </b>
-        {!isMoney && (
-          <span className="pp-hero-unit">
-            {t('autobahn:card.price.perMonth')}
-            <sup>3</sup>
+        {/* Kaufen: no rate/unit to caption, just the real list price struck through — same
+            car.listPrice already used by DropChip/PpRow. */}
+        {isMoney && showOld && (
+          <span className="pp-hero-unit-group">
+            <span className={'pp-hero-old' + oldLenClass}>
+              {Math.round(oldValue as number).toLocaleString('de-DE')} €
+              <UvpBadge
+                n={2}
+                open={uvpTooltipOpen}
+                onToggle={() => setUvpTooltipOpen((v) => !v)}
+                onClose={() => setUvpTooltipOpen(false)}
+                closeLabel={t('autobahn:modal.close')}
+                body={t('autobahn:card.price.uvpListTooltipBody')}
+              />
+            </span>
           </span>
         )}
       </div>
@@ -461,6 +600,68 @@ export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode,
   );
 };
 
+/**
+ * Financing/leasing terms line ("0 € Anzahlung · 48 Monate Laufzeit" / "0 € Sonderzahlung ·
+ * 48 Mon. · 10.000 km/Jahr") + a "Finanzierungsdetails"/"Details" link, full-width under the
+ * price/rating row — same real per-car (falling back to the default config) figures as
+ * PricePaths' own terms line, just also wired to the page's rate-adjust sheet. Renders nothing
+ * for the Kaufen tab (a cash purchase has no financing terms) or when neither a terms line nor
+ * a details link end up with anything real to show.
+ */
+export const PriceTerms: React.FunctionComponent<{
+  car: AutobahnCar;
+  mode: PaymentMode;
+  onOpenRateAdjust?: (mode: PaymentMode) => void;
+  t: TranslationFunction;
+}> = ({ car, mode, onOpenRateAdjust, t }) => {
+  if (mode === 'buy') return null;
+  const finFirstInstallment =
+    car.finFirstInstallment != null ? car.finFirstInstallment.toLocaleString('de-DE') : _finFirstInstallment;
+  const finMonths = car.finMonths ?? _finMonths;
+  const leasFirstInstallment =
+    car.leaseFirstInstallment != null ? car.leaseFirstInstallment.toLocaleString('de-DE') : _leasFirstInstallment;
+  const leasMileage = car.leaseMileage ?? _leasMileage;
+  const leasMonths = car.leaseMonths ?? _leasPeriod;
+  const hasLeasTerms = Boolean(leasMileage && leasMonths);
+  const leasMileageStr = leasMileage ? Number(leasMileage).toLocaleString('de-DE') : '';
+  const termsText =
+    mode === 'leasing'
+      ? hasLeasTerms
+        ? t('autobahn:card.price.leaseTerms', { firstInstallment: leasFirstInstallment, months: leasMonths, mileage: leasMileageStr })
+        : ''
+      : t('autobahn:card.price.financeTerms', { firstInstallment: finFirstInstallment, months: finMonths, count: finMonths });
+  if (!termsText && !onOpenRateAdjust) return null;
+  const detailsLabel = mode === 'leasing' ? t('autobahn:card.price.detailsLink') : t('autobahn:modal.financingDetails');
+  // split on the translation's own ' · ' separator so the dot can be styled lighter than the
+  // two figures around it (same literal separator convention as FinanceCalculator's condParts).
+  const termsParts = termsText ? termsText.split(' · ') : [];
+  return (
+    <div className="cc-terms">
+      {termsParts.map((part, i) => (
+        <React.Fragment key={i}>
+          {i > 0 && <span className="cc-terms-dot"> · </span>}
+          {part}
+        </React.Fragment>
+      ))}
+      {onOpenRateAdjust && (
+        <>
+          {termsText && <span className="cc-terms-dot"> · </span>}
+          <button
+            type="button"
+            className="cc-terms-link"
+            onClick={(e) => {
+              e.stopPropagation();
+              onOpenRateAdjust(mode);
+            }}
+          >
+            {detailsLabel}
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
 // Same real sales number VehicleDetailedNextPage.tsx (VDP) already dials via its own onCall —
 // duplicated here (not imported) because that page doesn't export it; both should eventually
 // read from one shared constant.
@@ -535,6 +736,12 @@ export interface GalleryCounterProps {
   /** 1-based index of the currently shown photo. */
   current: number;
   total: number;
+  /** Figma "Vehicle Gallery / Photos Button" light-pill treatment (Car Card, node 281:1016) —
+   * CarRow keeps the original dark `.imglabel` pill until it gets the same design pass. */
+  light?: boolean;
+  /** makes the light pill a real button (opens the full VdpViewer lightbox on the grid card) —
+   * the dark `.imglabel` variant stays a plain, non-interactive span either way. */
+  onClick?: () => void;
 }
 
 /**
@@ -543,8 +750,16 @@ export interface GalleryCounterProps {
  * class — same dark translucent pill, just with the maximize icon instead of the image icon.
  * Hidden with 0/1 photos (nothing to expand into).
  */
-export const GalleryCounter: React.FunctionComponent<GalleryCounterProps> = ({ current, total }) => {
+export const GalleryCounter: React.FunctionComponent<GalleryCounterProps> = ({ current, total, light, onClick }) => {
   if (total <= 1) return null;
+  if (light) {
+    return (
+      <button type="button" className="cc-photo-pill" onClick={onClick}>
+        <Icon name="maximize" size={18} stroke={2} color="#111820" />
+        {current} | {total}
+      </button>
+    );
+  }
   return (
     <span className="imglabel">
       <Icon name="maximize" size={13} stroke={2} />
@@ -553,6 +768,38 @@ export const GalleryCounter: React.FunctionComponent<GalleryCounterProps> = ({ c
   );
 };
 
+export interface GalleryActivityPillProps {
+  /** total detail-page views (stats totalCarImpCount) — real data only, never fabricated. */
+  viewsCount?: number;
+  /** total merkliste adds (stats totalFavCount) — real data only, never fabricated. */
+  favoritesCount?: number;
+}
+
+/**
+ * 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).
+ */
+export const GalleryActivityPill: React.FunctionComponent<GalleryActivityPillProps> = ({ viewsCount, favoritesCount }) => {
+  if (!viewsCount && !favoritesCount) return null;
+  return (
+    <span className="cc-activity-pill">
+      {!!viewsCount && (
+        <span className="cc-activity-pill-item">
+          <Icon name="eye" size={16} stroke={1.9} color="#1D2A38" />
+          {viewsCount}
+        </span>
+      )}
+      {!!favoritesCount && (
+        <span className="cc-activity-pill-item">
+          <Icon name="heart" size={16} stroke={1.9} color="#1D2A38" />
+          {favoritesCount}
+        </span>
+      )}
+    </span>
+  );
+};
+
 interface PpRowProps {
   /** payment-path label (Finanzierung / Leasing / Kaufen). */
   label: string;
@@ -605,6 +852,8 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
   const finFirstInstallment =
     car.finFirstInstallment != null ? car.finFirstInstallment.toLocaleString('de-DE') : _finFirstInstallment;
   const finMonths = car.finMonths ?? _finMonths;
+  const leasFirstInstallment =
+    car.leaseFirstInstallment != null ? car.leaseFirstInstallment.toLocaleString('de-DE') : _leasFirstInstallment;
   const leasMileage = car.leaseMileage ?? _leasMileage;
   const leasMonths = car.leaseMonths ?? _leasPeriod;
   const hasLeasTerms = Boolean(leasMileage && leasMonths);
@@ -644,7 +893,11 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
           <PpRow label={t('autobahn:card.price.leasing')} value={car.lease as number} unit="mtl." />
           {hasLeasTerms && (
             <div className="pp-sub-terms">
-              {t('autobahn:card.price.leaseTerms', { mileage: leasMileageStr, months: leasMonths })}{' '}
+              {t('autobahn:card.price.leaseTerms', {
+                firstInstallment: leasFirstInstallment,
+                months: leasMonths,
+                mileage: leasMileageStr,
+              })}{' '}
               · <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
             </div>
           )}