@bytebrand/fe-ui-core-autobahn 1.0.0

package/cards/cardParts.tsx

@@ -0,0 +1,489 @@
+// Autobahn (auto.de redesign) — car-card helper parts.
+//
+// Typed React 18 + TS port of the helper components from the design kit
+// (docs/redesign/design-source/ui_kits/website/CarCard.jsx). Pure /
+// presentational: every value comes from the `AutobahnCar` prop, there is no
+// store / API / `window` access. The design kit's `window.CO2_CLASSES` /
+// `window.CO2_COLORS` globals are replaced by the shared autobahn constants.
+//
+// These render correctly only inside a `<div className="md3">` subtree (the
+// `.pricepaths`, `.pp-*`, `.specstrip`, `.imglabel` … classes are scoped there).
+//
+// NEEDS-DATA discipline (the point of the ticket): wherever the design showed a
+// figure we have no real source for, these helpers render the NEEDS_DATA_LABEL
+// ('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 { TranslationFunction } from '../types';
+import { defaultConfig } from '@bytebrand/fe-financing';
+
+import { Icon } from '../ui';
+import { CO2_CLASSES, CO2_COLORS, TIER_COLORS, TIER_KEYS } from '../constants';
+import { AutobahnCar } from './types';
+
+// Default financing/leasing terms shown under the rate (the SRP card has no per-car selector, so
+// these are the same default config the displayed rate is computed with — consistent, not invented).
+const _finCfg = (defaultConfig as any).financing || {};
+const _leasCfg = (defaultConfig as any).leasing || {};
+/** financing terms inputs (rendered via t in PricePaths), e.g. "0 € Anzahlung · 48 Monate Laufzeit". */
+const _finFirstInstallment = (_finCfg.firstInstallment || 0).toLocaleString('de-DE');
+const _finMonths = _finCfg.rawPaybackPeriod || _finCfg.paybackPeriod || 48;
+/** leasing terms inputs (only when the config carries mileage + period), e.g. "10.000 km/Jahr · 48 Monate". */
+const _leasPeriod = _leasCfg.rawPaybackPeriod || _leasCfg.paybackPeriod;
+const _leasMileage = _leasCfg.annualMileage || _leasCfg.mileage;
+const _hasLeasTerms = Boolean(_leasMileage && _leasPeriod);
+const _leasMileageStr = _leasMileage ? Number(_leasMileage).toLocaleString('de-DE') : '';
+
+/** mileage → 'X.XXX km' (de-DE grouping). */
+export function fmtKm(n: number): string {
+  return n.toLocaleString('de-DE') + ' km';
+}
+
+/**
+ * Monthly rate → de-DE integer euro string (e.g. 402.12 → "402"). Rates are shown as whole
+ * euros like the legacy card ("271 €"); a raw float printed directly rendered as "402.12 €",
+ * which a German reader parses as 402.120 — fixed here with rounding + de-DE grouping.
+ */
+export function fmtRate(n: number): string {
+  return Math.round(n).toLocaleString('de-DE');
+}
+
+/** strip a trailing parenthetical, e.g. '110 kW (150 PS)' → '110 kW'. */
+function stripParen(s: string): string {
+  return s.replace(/\s*\(.*\)/, '');
+}
+
+// Compact spec for cards: short fuel/gear labels so all five values fit ONE line
+// without clipping.
+const FUEL_SHORT: Record<string, string> = {
+  'Plug-in-Hybrid': 'Hybrid',
+  Benzin: 'Benzin',
+  Diesel: 'Diesel',
+  Elektro: 'Elektro',
+};
+const GEAR_SHORT: Record<string, string> = {
+  Automatik: 'Automatik',
+  Schaltgetriebe: 'Manuell',
+};
+
+/** five compact spec values for the grid card's one-line spec strip. */
+export function cardSpec(car: AutobahnCar): string[] {
+  const fuel = stripParen(car.fuel);
+  return [
+    fmtKm(car.km),
+    car.reg,
+    stripParen(car.power),
+    FUEL_SHORT[fuel] || fuel,
+    GEAR_SHORT[car.gear] || car.gear,
+  ];
+}
+
+export interface SpecLineProps {
+  items: string[];
+  size?: number;
+  /** never wrap — clip overflow with ellipsis (single line). */
+  oneLine?: boolean;
+}
+
+/** Compact pipe-separated spec line (AutoScout pattern). */
+export const SpecLine: React.FunctionComponent<SpecLineProps> = ({ items, size = 12.5, oneLine = false }) => (
+  <div
+    style={{
+      display: 'flex',
+      flexWrap: oneLine ? 'nowrap' : 'wrap',
+      alignItems: 'center',
+      gap: '2px 8px',
+      fontSize: size,
+      color: 'var(--md-on-surface-variant)',
+      ...(oneLine ? { overflow: 'hidden', whiteSpace: 'nowrap' } : {}),
+    }}
+  >
+    {items.map((v, i) => (
+      <React.Fragment key={i}>
+        {i > 0 && <span style={{ color: 'var(--md-outline-variant)', flex: 'none' }}>·</span>}
+        <span style={oneLine ? { whiteSpace: 'nowrap' } : undefined}>{v}</span>
+      </React.Fragment>
+    ))}
+  </div>
+);
+
+export interface PriceBlockProps {
+  car: AutobahnCar;
+  align?: 'left' | 'right';
+  t: TranslationFunction;
+}
+
+/** Price block — rate-first (monthly is the lead), purchase price secondary. */
+export const PriceBlock: React.FunctionComponent<PriceBlockProps> = ({ car, align = 'left', t }) => {
+  const showStrike = car.savings != null && car.savings > 600 && car.listPrice != null;
+  return (
+    <div style={{ textAlign: align }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'baseline',
+          gap: 5,
+          justifyContent: align === 'right' ? 'flex-end' : 'flex-start',
+        }}
+      >
+        <span
+          className="num"
+          style={{
+            fontWeight: 700,
+            fontSize: 26,
+            color: 'var(--md-primary)',
+            letterSpacing: '-.6px',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {fmtRate(car.monthly)} €
+        </span>
+        <span className="md-label-sm">{t('autobahn:card.price.perMonth')}</span>
+      </div>
+      <div
+        className="md-label-sm"
+        style={{
+          marginTop: 1,
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '0 6px',
+          justifyContent: align === 'right' ? 'flex-end' : 'flex-start',
+        }}
+      >
+        <span style={{ whiteSpace: 'nowrap' }}>
+          {t('autobahn:card.price.purchasePrice')}{' '}
+          <b style={{ color: 'var(--md-on-surface)' }}>{car.price.toLocaleString('de-DE')} €</b>
+        </span>
+        {showStrike && (
+          <span
+            style={{
+              color: 'var(--md-on-surface-variant)',
+              textDecoration: 'line-through',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {car.listPrice!.toLocaleString('de-DE')} €
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export interface DropChipProps {
+  /** real price reduction in EUR; when undefined the chip renders nothing. */
+  amount?: number;
+  t: TranslationFunction;
+}
+
+/**
+ * Price-drop chip — a REAL reduction on this car. White pill so it doesn't
+ * compete with the solid green rating chip. Renders nothing when there is no
+ * drop (we never fabricate a reduction).
+ */
+export const DropChip: React.FunctionComponent<DropChipProps> = ({ amount, t }) => {
+  if (amount == null) {
+    return null;
+  }
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 3,
+        height: 22,
+        padding: '0 8px',
+        borderRadius: 'var(--md-r-full)',
+        background: 'rgba(255,255,255,.94)',
+        color: 'var(--md-good)',
+        fontSize: 10.5,
+        fontWeight: 700,
+        boxShadow: 'var(--md-e1)',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      <Icon name="trending-down" size={12} stroke={2.4} color="var(--md-good)" />
+      {t('autobahn:card.price.priceDropAmount', { amount: amount.toLocaleString('de-DE') })}
+    </span>
+  );
+};
+
+/** shared deal-badge pill style (NEU/drop/percent/zero-down all share the same compact shape). */
+const dealPill: React.CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  height: 22,
+  padding: '0 8px',
+  borderRadius: 'var(--md-r-full)',
+  fontSize: 10.5,
+  fontWeight: 700,
+  boxShadow: 'var(--md-e1)',
+  whiteSpace: 'nowrap',
+};
+
+/** 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>;
+};
+
+/**
+ * Zero-down-payment chip (offer.showDownPayment). Cyan pill. Spells out "0 € Anzahlung" where
+ * 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,
+}) => {
+  if (!show) return null;
+  return (
+    <span 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>
+  );
+};
+
+interface InlineClsProps {
+  /** CO₂ class letter, e.g. 'B'. */
+  c: string;
+}
+
+/** Small inline colored CO₂-class letter (keeps EnVKV line a fixed height). */
+const InlineCls: React.FunctionComponent<InlineClsProps> = ({ c }) => {
+  const i = Math.max(0, CO2_CLASSES.indexOf(c as (typeof CO2_CLASSES)[number]));
+  const color = CO2_COLORS[i] || 'var(--md-outline)';
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        width: 14,
+        height: 14,
+        borderRadius: 3,
+        background: color,
+        color: '#fff',
+        fontSize: 9.5,
+        fontWeight: 800,
+        alignItems: 'center',
+        justifyContent: 'center',
+        verticalAlign: '-2px',
+        margin: '0 1px',
+      }}
+    >
+      {c}
+    </span>
+  );
+};
+
+export interface EcoLineProps {
+  car: AutobahnCar;
+  style?: React.CSSProperties;
+  t: TranslationFunction;
+}
+
+/**
+ * Pkw-EnVKV legal line — full consumption + CO₂ + class. REQUIRED on every
+ * German car ad and must stay visible. Quiet fine-print footnote with a fixed
+ * min-height so all cards stay the same height. Handles the PHEV dual-figure
+ * variant when a `phev` block is present.
+ */
+export const EcoLine: React.FunctionComponent<EcoLineProps> = ({ car, style, t }) => {
+  const wrap: React.CSSProperties = {
+    borderTop: '1px solid var(--md-outline-variant)',
+    paddingTop: 8,
+    minHeight: 41,
+    fontSize: 11,
+    lineHeight: 1.5,
+    color: 'var(--md-on-surface-variant)',
+    ...style,
+  };
+  if (car.phev) {
+    const p = car.phev;
+    return (
+      <div style={wrap}>
+        {p.consEl}{' '}
+        {t('autobahn:card.eco.phevConsumptionLine', {
+          consFuel: p.consFuel,
+          consDis: p.consDis,
+          co2w: p.co2w,
+          co2classW: p.co2classW,
+          co2classD: p.co2classD,
+        })}
+      </div>
+    );
+  }
+  return (
+    <div style={wrap}>
+      {t('autobahn:card.eco.consumptionLine', { cons: car.cons, co2: car.co2, co2class: car.co2class })}
+    </div>
+  );
+};
+
+export interface PricePathsProps {
+  car: AutobahnCar;
+  t: TranslationFunction;
+}
+
+/** Map the AutobahnCar rating tone → meter segment index (0 best … 4 worst). */
+const TONE_TO_TIER: Record<string, number> = { top: 0, good: 1, fair: 2, raised: 3, high: 4 };
+
+/**
+ * Segmented Preisbewertung meter + label. Extracted from PricePaths so the SRP price
+ * column (Option A layout) can pin it to the BOTTOM of the column, separate from the
+ * grouped price figures at the top. Renders nothing when there is no rating/band
+ * (needs-data: we never draw a fake market position).
+ */
+export const PriceMeter: React.FunctionComponent<{ car: AutobahnCar; t: TranslationFunction }> = ({ car, t }) => {
+  const hasMarket =
+    car.marketLow != null && car.marketAvg != null && car.marketHigh != null && car.marketHigh > car.marketLow;
+  const seg = (tier: number) => (
+    <div className="pp-meter">
+      {[0, 1, 2, 3, 4].map((s) => (
+        <span key={s} className="pp-seg" style={{ background: TIER_COLORS[s], opacity: s === tier ? 1 : 0.26 }} />
+      ))}
+    </div>
+  );
+  if (hasMarket) {
+    const delta = car.marketAvg! - car.price;
+    const good = delta > 150;
+    const mpos = Math.max(0, Math.min(1, (car.price - car.marketLow!) / (car.marketHigh! - car.marketLow!)));
+    return (
+      <div className="pp-meter-block">
+        {seg(Math.round(mpos * 4))}
+        <span className={'pp-mlabel' + (good ? ' pp-mlabel--good' : '')}>
+          {good
+            ? t('autobahn:card.pricing.belowMarket', { delta: delta.toLocaleString('de-DE') })
+            : t('autobahn:card.pricing.marketPrice')}
+        </span>
+      </div>
+    );
+  }
+  if (car.rating && TONE_TO_TIER[car.rating] != null) {
+    // No market BAND yet, but the real Preisbewertung tier (same signal as the rating chip)
+    // drives the segmented position meter. Real data, not faked.
+    const tier = TONE_TO_TIER[car.rating];
+    return (
+      <div className="pp-meter-block">
+        {seg(tier)}
+        <span className={'pp-mlabel' + (tier <= 1 ? ' pp-mlabel--good' : '')}>
+          {TIER_KEYS[tier] ? t('autobahn:tier.' + TIER_KEYS[tier]) : t('autobahn:card.pricing.marketPrice')}
+        </span>
+      </div>
+    );
+  }
+  return null;
+};
+
+interface PpRowProps {
+  /** payment-path label (Finanzierung / Leasing / Kaufen). */
+  label: string;
+  /** the figure to show — a monthly rate (money=false) or a full price (money=true). */
+  value: number;
+  /** small unit before the figure, e.g. 'mtl.'. */
+  unit?: string;
+  /** real previous price to strike through (only ever the genuine list price). */
+  old?: number | null;
+  /** the financing row — kept visually dominant (larger). */
+  focus?: boolean;
+  /** format as a full euro price (Kaufen) instead of a rounded rate. */
+  money?: boolean;
+}
+
+/**
+ * One payment-path row: label (+ a quiet info marker) on the left, the price right-aligned
+ * with an optional struck-through previous price above it. Even row spacing reproduces the
+ * production "Finanzierung / Leasing / Kaufen" price table the design references.
+ */
+const PpRow: React.FunctionComponent<PpRowProps> = ({ label, value, unit, old, focus, money }) => (
+  <div className={'pp-row' + (focus ? ' pp-row--focus' : '')}>
+    <span className="pp-row-label">
+      {label}
+      <Icon name="info" size={13} stroke={1.9} cls="pp-row-i" />
+    </span>
+    <span className="pp-row-price">
+      {old != null && <span className="pp-old">{old.toLocaleString('de-DE')} €</span>}
+      <span className="pp-now">
+        {unit && <span className="pp-unit">{unit}</span>}
+        <b className="num pp-val">{money ? value.toLocaleString('de-DE') : fmtRate(value)} €</b>
+      </span>
+    </span>
+  </div>
+);
+
+/**
+ * Monthly-rate payment paths (SRP price column, TOP group) — modelled on the legacy design:
+ * Finanzierung is the hero (eyebrow + big blue rate + its terms line), which both keeps the
+ * financing focus and FILLS the upper gap with real default-config info (Anzahlung · Laufzeit).
+ * Leasing follows as a quiet neutral row (with its own terms when the config carries them) and
+ * 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 }) => {
+  const hasLease = car.lease != null;
+  return (
+    <div className="pricepaths">
+      <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>
+        </div>
+        <div className="pp-hero-terms">
+          {t('autobahn:card.price.financeTerms', {
+            firstInstallment: _finFirstInstallment,
+            months: _finMonths,
+            count: _finMonths,
+          })}
+        </div>
+      </div>
+      {hasLease && (
+        <div className="pp-lease-row">
+          <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: _leasPeriod })}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Kaufen (outright purchase) row — the BOTTOM group, separated from the monthly-rate paths by a
+ * divider. Quiet/neutral (not blue) and strikes the previous price only on a real list-price
+ * saving (never a fabricated "was" price).
+ */
+export const PriceKauf: React.FunctionComponent<PricePathsProps> = ({ car, t }) => {
+  const showStrike = car.savings != null && car.savings > 600 && car.listPrice != null;
+  return (
+    <PpRow label={t('autobahn:card.price.buy')} value={car.price} old={showStrike ? (car.listPrice as number) : null} money />
+  );
+};
+
+export interface PpActivityProps {
+  car: AutobahnCar;
+  t: TranslationFunction;
+}
+
+/**
+ * Buyer-activity cue rendered below the CTA in the listing card.
+ *
+ * NEEDS-DATA: needs watchers + views. When either is missing we show the
+ * 'Daten folgt' marker instead of inventing interest figures.
+ */
+export const PpActivity: React.FunctionComponent<PpActivityProps> = ({ car, t }) => {
+  // No real watcher/view data (no backend yet) → render nothing rather than a "Daten folgt"
+  // placeholder that reads as perpetual loading. Wire when UserActionsAPI stats are available.
+  if (car.watchers == null || car.views == null) return null;
+  const hrs = 1 + (car.views % 6);
+  return (
+    <div className="pp-activity">
+      <Icon name="eye" size={12} stroke={1.9} />
+      {t('autobahn:card.activity.watchers', { watchers: car.watchers, hrs, count: car.watchers })}
+    </div>
+  );
+};

package/cards/index.ts

@@ -0,0 +1,35 @@
+// Autobahn (auto.de redesign) — car cards barrel.
+//
+// ES named exports replacing the design kit's `Object.assign(window, {...})`
+// (docs/redesign/design-source/ui_kits/website/CarCard.jsx). Re-exports the two
+// cards, their helper parts and the view-model type so consumers can import
+// everything from '../cards'.
+
+export { default as CarCard } from './CarCard';
+export type { CarCardProps } from './CarCard';
+
+export { default as CarRow } from './CarRow';
+export type { CarRowProps } from './CarRow';
+
+export {
+  fmtKm,
+  cardSpec,
+  SpecLine,
+  PriceBlock,
+  DropChip,
+  EcoLine,
+  PricePaths,
+  PriceKauf,
+  PriceMeter,
+  PpActivity,
+} from './cardParts';
+export type {
+  SpecLineProps,
+  PriceBlockProps,
+  DropChipProps,
+  EcoLineProps,
+  PricePathsProps,
+  PpActivityProps,
+} from './cardParts';
+
+export type { AutobahnCar, AutobahnPhev } from './types';

package/cards/types.ts

@@ -0,0 +1,114 @@
+// Autobahn (auto.de redesign) — car-card view-model type.
+//
+// Typed contract for the ported car cards (CarCard / CarRow). This is a pure
+// presentational view-model: the cards receive a fully-resolved `AutobahnCar`
+// and never touch the store, API or `window`.
+//
+// IMPORTANT — needs-data discipline:
+// The REQUIRED fields below always carry real data from the search/listing
+// source. The OPTIONAL fields are ones we have NO real source for yet; they are
+// `?`-optional ON PURPOSE so the components can detect their absence and render
+// the `NEEDS_DATA_LABEL` ('Daten folgt') marker instead of a fabricated number.
+// Never default these to placeholder values.
+
+/** Pkw-EnVKV plug-in-hybrid consumption block (only present for PHEV cars). */
+export interface AutobahnPhev {
+  /** electric consumption, e.g. '17,3 kWh/100 km'. */
+  consEl: string;
+  /** fuel consumption (weighted, combined), e.g. '1,2 l/100 km'. */
+  consFuel: string;
+  /** consumption when battery is discharged, e.g. '6,4 l/100 km'. */
+  consDis: string;
+  /** weighted combined CO₂, e.g. '28 g/km'. */
+  co2w: string;
+  /** CO₂ class (weighted). */
+  co2classW: string;
+  /** CO₂ class (discharged). */
+  co2classD: string;
+}
+
+/**
+ * View-model for a single car as rendered by the Autobahn car cards.
+ *
+ * REQUIRED fields are always populated with real data.
+ * OPTIONAL fields (`?`) have no real data source yet — when absent the cards
+ * render the 'Daten folgt' marker rather than inventing a value.
+ */
+export interface AutobahnCar {
+  // --- identity / headline (always real) ---
+  make: string;
+  model: string;
+  trim: string;
+
+  // --- key specs (always real) ---
+  /** mileage in km (raw number; formatted de-DE by the cards). */
+  km: number;
+  /** first registration, e.g. '03/2021'. */
+  reg: string;
+  /** power label, e.g. '110 kW (150 PS)'. */
+  power: string;
+  /** fuel label, e.g. 'Benzin' / 'Plug-in-Hybrid'. */
+  fuel: string;
+  /** gearbox label, e.g. 'Automatik' / 'Schaltgetriebe'. */
+  gear: string;
+  /** number of previous owners (rendered as 'N. Hand'). */
+  owners: number;
+
+  // --- price (always real) ---
+  /** financing monthly rate in EUR — the LEAD price on every card. */
+  monthly: number;
+  /** purchase price in EUR (raw number; formatted de-DE by the cards). */
+  price: number;
+
+  // --- media (always real) ---
+  /** ready-to-use image URLs for the carousel. */
+  gallery: string[];
+  /** total photo count for the image-count badge. */
+  photos: number;
+
+  // --- legally-required Pkw-EnVKV consumption line (always real) ---
+  /** combined fuel consumption label, e.g. '5,4 l/100 km'. */
+  cons: string;
+  /** combined CO₂ emissions label, e.g. '124 g/km'. */
+  co2: string;
+  /** CO₂ efficiency class letter, e.g. 'B'. */
+  co2class: string;
+  /** present only for plug-in hybrids — drives the dual-figure EnVKV line. */
+  phev?: AutobahnPhev;
+
+  // --- trust / features (always real) ---
+  /** equipment highlight chips (first few are shown on the row card). */
+  features: string[];
+  /** price rating tone: 'fair' → warn pill, anything else → good pill. */
+  rating: string;
+  /** price rating label shown in the pill, e.g. 'Guter Preis'. */
+  ratingLabel: string;
+  /** true → show the "NEU" badge (legacy showNewLabel: new / recently-listed car). */
+  isNew?: boolean;
+  /** availability label, e.g. 'Sofort verfügbar' (offer.availabilityMode). Absent → not shown. */
+  availability?: string;
+  /** percent price reduction (price.historyPriceDifferencePerCent) — pairs with `drop` for the −X% badge. */
+  dropPct?: number;
+  /** 0 € Anzahlung available (offer.showDownPayment) — drives the "0 € Anz." badge. */
+  zeroDown?: boolean;
+
+  // --- NEEDS DATA: no real source yet (NEVER fabricate) ---
+  /** original list price (for the struck-through reference price). */
+  listPrice?: number;
+  /** savings vs. list price in EUR (gates the savings/strike UI; >600 to show). */
+  savings?: number;
+  /** real price reduction on THIS car in EUR (gates the DropChip). */
+  drop?: number;
+  /** lowest comparable market price in EUR (market band lower bound). */
+  marketLow?: number;
+  /** average comparable market price in EUR (market band reference). */
+  marketAvg?: number;
+  /** highest comparable market price in EUR (market band upper bound). */
+  marketHigh?: number;
+  /** leasing monthly rate in EUR. */
+  lease?: number;
+  /** number of buyers currently watching this car. */
+  watchers?: number;
+  /** number of recent views (drives the 'vor N Std' cue). */
+  views?: number;
+}