@bytebrand/fe-ui-core-autobahn 1.0.59 → 1.0.61

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>
+  );
 };
 
 /**
@@ -234,14 +241,18 @@ export const PercentChip: React.FunctionComponent<{ pct?: number }> = ({ pct })
  * there is room (grid cards / wide image) and uses the compact "0 € Anz." on the narrow list-card
  * image, so the badge row always stays on ONE line on both desktop and mobile.
  */
-export const ZeroDownChip: React.FunctionComponent<{ show?: boolean; compact?: boolean; t: TranslationFunction }> = ({
-  show,
-  compact,
-  t,
-}) => {
+export const ZeroDownChip: React.FunctionComponent<{
+  show?: boolean;
+  compact?: boolean;
+  t: TranslationFunction;
+  className?: string;
+}> = ({ show, compact, t, className }) => {
   if (!show) return null;
   return (
-    <span style={{ ...dealPill, background: 'var(--md-accent-container)', color: 'var(--md-on-accent-container)' }}>
+    <span
+      className={className}
+      style={{ ...dealPill, background: 'var(--md-accent-container)', color: 'var(--md-on-accent-container)' }}
+    >
       {compact ? t('autobahn:card.price.zeroDownCompact') : t('autobahn:card.price.zeroDown')}
     </span>
   );
@@ -341,6 +352,8 @@ export const EcoLine: React.FunctionComponent<EcoLineProps> = ({ car, style, t }
 export interface PricePathsProps {
   car: AutobahnCar;
   t: TranslationFunction;
+  /** extra class appended to the root (e.g. the SRP card's desktop-only `hide-mobile` marker). */
+  className?: string;
 }
 
 /** Map the AutobahnCar rating tone → meter segment index (0 best … 4 worst). */
@@ -372,6 +385,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 {
@@ -379,6 +434,8 @@ export interface PriceTabsProps {
   mode: PaymentMode;
   onModeChange: (mode: PaymentMode) => void;
   t: TranslationFunction;
+  /** extra class appended to the root (e.g. the SRP card's mobile-only `show-mobile` marker). */
+  className?: string;
 }
 
 /**
@@ -387,14 +444,14 @@ export interface PriceTabsProps {
  * identical to the VDP's, not a second tab style. Leasing tab omitted when the car isn't
  * leasing-eligible (car.lease undefined) — same rule PricePaths already used.
  */
-export const PriceTabs: React.FunctionComponent<PriceTabsProps> = ({ car, mode, onModeChange, t }) => {
+export const PriceTabs: React.FunctionComponent<PriceTabsProps> = ({ car, mode, onModeChange, t, className }) => {
   const tabs: Array<[PaymentMode, string]> = [
     ['financing', t('autobahn:finance.mode.financing')],
     ...(car.lease != null ? ([['leasing', t('autobahn:finance.mode.leasing')]] as Array<[PaymentMode, string]>) : []),
     ['buy', t('autobahn:card.price.buy')],
   ];
   return (
-    <div className="fin-tabs" role="tablist" onClick={(e) => e.stopPropagation()}>
+    <div className={'fin-tabs' + (className ? ' ' + className : '')} role="tablist" onClick={(e) => e.stopPropagation()}>
       {tabs.map(([m, label]) => (
         <button
           key={m}
@@ -417,6 +474,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`,
@@ -426,26 +527,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>
@@ -453,6 +597,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.
@@ -527,6 +733,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;
 }
 
 /**
@@ -535,8 +747,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} />
@@ -545,6 +765,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;
@@ -589,7 +841,7 @@ const PpRow: React.FunctionComponent<PpRowProps> = ({ label, value, unit, old, f
  * is omitted entirely when leasing isn't active. The Kaufen row is rendered separately
  * (PriceKauf) below a divider so only the financing rate stands out — no wall of blue prices.
  */
-export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t }) => {
+export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, className }) => {
   const hasLease = car.lease != null;
   // Terms of the config the displayed rate was actually computed with (per-car:
   // dealer rate + the user's saved localStorage adjustments) — default config
@@ -597,24 +849,40 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t })
   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') : '';
+  // same real struck-through reference rate PriceHero shows for the financing tab (oldMonthly) —
+  // shown here too now that both rows render at once instead of behind a tab.
+  const showOldMonthly = car.oldMonthly != null && car.oldMonthly > car.monthly;
   return (
-    <div className="pricepaths">
+    <div className={'pricepaths' + (className ? ' ' + className : '')}>
       <div className="pp-hero">
         <div className="pp-eyebrow">{t('autobahn:card.price.financingFrom')}</div>
         <div className="pp-hero-rate">
-          <b className="num pp-hero-val">{fmtRate(car.monthly)} €</b>
-          <span className="pp-hero-unit">{t('autobahn:card.price.perMonth')}</span>
+          {showOldMonthly && (
+            <span className="pp-hero-old">
+              {(car.oldMonthly as number).toLocaleString('de-DE')} €<sup>2</sup>
+            </span>
+          )}
+          <b className="num pp-hero-val">
+            {fmtRate(car.monthly)} €<sup>1</sup>
+          </b>
+          <span className="pp-hero-unit">
+            {t('autobahn:card.price.perMonth')}
+            <sup>3</sup>
+          </span>
         </div>
         <div className="pp-hero-terms">
           {t('autobahn:card.price.financeTerms', {
             firstInstallment: finFirstInstallment,
             months: finMonths,
             count: finMonths,
-          })}
+          })}{' '}
+          · <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
         </div>
       </div>
       {hasLease && (
@@ -622,7 +890,11 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t })
           <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,
+              })}
             </div>
           )}
         </div>

package/cards/index.ts

@@ -21,6 +21,8 @@ export {
   PricePaths,
   PriceKauf,
   PriceMeter,
+  PriceEvalCol,
+  PriceTerms,
   PpActivity,
   GalleryBadges,
   OfferBadge,
@@ -28,6 +30,7 @@ export {
   PriceHero,
   CardCtaRow,
   GalleryCounter,
+  GalleryActivityPill,
   ratingTone,
   DEALER_SALES_PHONE,
   callDealerSalesPhone,
@@ -45,6 +48,7 @@ export type {
   PriceHeroProps,
   CardCtaRowProps,
   GalleryCounterProps,
+  GalleryActivityPillProps,
 } from './cardParts';
 
 export type { AutobahnCar, AutobahnPhev } from './types';

package/cards/types.ts

@@ -70,6 +70,12 @@ export interface AutobahnCar {
   // --- media (always real) ---
   /** ready-to-use image URLs for the carousel. */
   gallery: string[];
+  /**
+   * Full-resolution counterpart of `gallery`, same length/order — only set when the card was
+   * built with a smaller `imageSize` (grid cards). A lightbox opened from the card (CarCard's
+   * photo-count pill → VdpViewer) should prefer this over the small thumbnail URLs.
+   */
+  galleryLarge?: string[];
   /** total photo count for the image-count badge. */
   photos: number;
 
@@ -128,6 +134,7 @@ export interface AutobahnCar {
    */
   leaseMileage?: number;
   leaseMonths?: number;
+  leaseFirstInstallment?: number;
   /** number of buyers currently watching this car. */
   watchers?: number;
   /** number of recent views (drives the 'vor N Std' cue). */

package/constants.ts

@@ -1,31 +1,31 @@
-// Autobahn (auto.de redesign) — shared lookup constants barrel.
-// Pure data re-exported from ./constants/autobahn (kept import-safe for plain Node consumers,
-// see that file's header) plus the legacy fe-ui-core shim re-exports below.
-export * from './constants/autobahn';
-
-// ---------------------------------------------------------------------------
-// Legacy shared constants (moved here from fe-ui-core).
-//
-// This block mirrors the public symbol set of the old
-// `@bytebrand/fe-ui-core/constants` barrel so consumers can swap that
-// specifier for `@bytebrand/fe-ui-core-autobahn/constants` 1:1. The
-// implementations live under ./constants/ (core.ts, app.ts, price.ts,
-// Search.ts, …); fe-ui-core re-exports them via shims until it is deleted.
-// ---------------------------------------------------------------------------
-
-export {
-  offers,
-  checkoutOffers,
-  checkoutWarranties,
-  checkoutSteps,
-  checkoutSubStep,
-  DELIVERY_PERIODS_EXTRA,
-  THREE,
-  WLTP_ENERGY_EFFICIENCY_CLASS
-} from './constants/core';
-
-export { CUSTOM_ERROR_MESSAGES, supportPhone, supportPhoneLink } from './constants/app';
-
-export { priceRatings } from './constants/price';
-
-export { THROTTLE_DELAY } from './constants/Search';
+// Autobahn (auto.de redesign) — shared lookup constants barrel.
+// Pure data re-exported from ./constants/autobahn (kept import-safe for plain Node consumers,
+// see that file's header) plus the legacy fe-ui-core shim re-exports below.
+export * from './constants/autobahn';
+
+// ---------------------------------------------------------------------------
+// Legacy shared constants (moved here from fe-ui-core).
+//
+// This block mirrors the public symbol set of the old
+// `@bytebrand/fe-ui-core/constants` barrel so consumers can swap that
+// specifier for `@bytebrand/fe-ui-core-autobahn/constants` 1:1. The
+// implementations live under ./constants/ (core.ts, app.ts, price.ts,
+// Search.ts, …); fe-ui-core re-exports them via shims until it is deleted.
+// ---------------------------------------------------------------------------
+
+export {
+  offers,
+  checkoutOffers,
+  checkoutWarranties,
+  checkoutSteps,
+  checkoutSubStep,
+  DELIVERY_PERIODS_EXTRA,
+  THREE,
+  WLTP_ENERGY_EFFICIENCY_CLASS
+} from './constants/core';
+
+export { CUSTOM_ERROR_MESSAGES, supportPhone, supportPhoneLink } from './constants/app';
+
+export { priceRatings } from './constants/price';
+
+export { THROTTLE_DELAY } from './constants/Search';

package/data/toAutobahnCar.ts

@@ -225,11 +225,13 @@ function isPluginHybrid(fuel: any): boolean {
   return fuel === 'selector_fuel_hybridElectricalDiesel' || fuel === 'selector_fuel_hybridElectricalPetrol';
 }
 
-/** Build the gallery URL list from real images, falling back to main image, then placeholder. */
-function buildGallery(storeCar: any, deps: ToAutobahnCarDeps): string[] {
+/** Build the gallery URL list from real images, falling back to main image, then placeholder.
+ *  `sizeOverride` lets a caller ask for a different size than `deps.imageSize` (e.g. a full-res
+ *  set for a lightbox, while the card thumbnail itself stays on the smaller default). */
+function buildGallery(storeCar: any, deps: ToAutobahnCarDeps, sizeOverride?: 'small' | 'medium' | 'large'): string[] {
   const placeholder = deps.placeholder || PLACEHOLDER_IMAGE;
   // Only 'small' and 'large' variants are pre-generated by image-generator; 'medium' has no cached file.
-  const size = deps.imageSize || 'small';
+  const size = sizeOverride || deps.imageSize || 'small';
 
   // 1) Real loaded images from imagesStore.images.get(id).
   if (Array.isArray(deps.loadedImages) && deps.loadedImages.length) {
@@ -362,6 +364,11 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
 
   // --- media ---
   const gallery = buildGallery(storeCar, deps);
+  // Card grids ask for a smaller `imageSize` (perf) — but a lightbox opened FROM that card
+  // (CarCard's photo-count pill → VdpViewer) shouldn't be stuck showing the small thumbnails
+  // blown up full-screen. Build a real full-res set alongside, from the same already-loaded
+  // images (no extra fetch) — only when the requested size isn't already 'large'.
+  const galleryLarge = (deps.imageSize || 'small') !== 'large' ? buildGallery(storeCar, deps, 'large') : undefined;
   const photos = num(storeCar.imagesCount) ?? 0;
 
   // --- optional: leasing rate — ONLY when leasing is actually active for this car.
@@ -376,6 +383,7 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
   // saved adjustments). Only meaningful alongside an active lease rate.
   const leaseMileage = leasingActive ? num(price?.leasing?.annualMileage) : undefined;
   const leaseMonths = leasingActive ? num(price?.leasing?.paybackPeriod) : undefined;
+  const leaseFirstInstallment = leasingActive ? num(price?.leasing?.firstInstallment) : undefined;
 
   // --- optional: list price / savings — ONLY from a real strike price ---
   // transformDataForVehicles exposes oldMonthlyInstallment / highestPrice via
@@ -447,6 +455,7 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
 
     // media
     gallery,
+    ...(galleryLarge ? { galleryLarge } : {}),
     photos,
 
     // EnVKV
@@ -474,6 +483,7 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
     ...(lease != null ? { lease } : {}),
     ...(leaseMileage != null ? { leaseMileage } : {}),
     ...(leaseMonths != null ? { leaseMonths } : {}),
+    ...(leaseFirstInstallment != null ? { leaseFirstInstallment } : {}),
     ...(drop != null ? { drop } : {}),
     ...(dropPct != null ? { dropPct } : {}),
     ...(zeroDown ? { zeroDown } : {}),