@bytebrand/fe-ui-core-autobahn 1.0.32 → 1.0.34

package/vdp/VdpModules.tsx

@@ -1,2034 +1,2035 @@
-// Autobahn (auto.de redesign) — Vehicle-Detail (VDP) presentational modules.
-//
-// Typed React 18 + TS port of the remaining VDP pieces from the design kit
-// (docs/redesign/design-source/ui_kits/website/CdpModules.jsx + ScreenVDP.jsx).
-// Each is a pure / presentational ES named export with an explicit props
-// interface; none touches a store, the API or `window`. The page wiring that
-// feeds these from the real stores is a SEPARATE later step (W3b).
-//
-// Replaces the design kit's globals:
-//   - `window.CO2_CLASSES` / `window.CO2_COLORS`        → ../constants
-//   - `equipFor(id)` / `car.priceHistory` / market band → typed props on VehicleDetail
-//   - `assetUrl(...)`                                    → pre-resolved image URLs (caller's job)
-//   - `data-lucide` icons                               → the ui kit's <Icon />
-// The DealerBlock from CdpModules is intentionally NOT ported (auto.de is the
-// seller, not a dealer marketplace).
-//
-// NEEDS-DATA discipline (the point of the ticket): wherever the design showed a
-// figure we have no real source for, these render the NEEDS_DATA_LABEL
-// ('Daten folgt') marker rather than inventing a value — see PriceHistory (whole
-// card) and its market band.
-//
-// All components render correctly only inside a `<div className="md3">` subtree.
-
-import React, { useState } from 'react';
-import { TranslationFunction } from '../types';
-
-import { Button, Icon, Spec, StatChip, Stars, Switch } from '../ui';
-import { CO2_CLASSES, CO2_COLORS, TIER_LABELS, TIER_KEYS, TIER_COLORS } from '../constants';
-import { defaultVdpSpecs, EquipmentGroups, VehicleDetail, VdpSpec, VdpReview } from './types';
-import { CalcRow, expanderBtnStyle, FinanceMode, Slider, TermChips } from './FinanceCalculator';
-
-const eur = (n: number): string => n.toLocaleString('de-DE');
-
-/** mileage → 'X.XXX km' (de-DE grouping). */
-function fmtKm(n: number): string {
-  return `${n.toLocaleString('de-DE')} km`;
-}
-
-/** strip a trailing parenthetical, e.g. '110 kW (150 PS)' → '110 kW'. */
-function stripParen(s: string): string {
-  return s.replace(/\s*\(.*\)/, '');
-}
-
-// ---------------------------------------------------------------------------
-// Header card — title, fact line, highlight chips, condition tiles
-// ---------------------------------------------------------------------------
-
-export interface VdpHeaderCardProps {
-  vehicle: VehicleDetail;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/** headline + trim/power + rating pill, then the dot-separated fact line — the vehicle's
- *  identity block. Split out so the mobile-only layout can show this BEFORE the finance
- *  card (see VdpTrustRow) while the highlights/condition tiles move after it. */
-export const VdpHeaderSummary: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => {
-  const factLine: ReadonlyArray<readonly [string, string]> = [
-    ['gauge', fmtKm(vehicle.km)],
-    ['calendar', vehicle.reg],
-    ['cog', vehicle.gear],
-    ['fuel', stripParen(vehicle.fuel)],
-    ['user', t('autobahn:header.owners', { owners: vehicle.owners, count: vehicle.owners })],
-    // body type closes the fact grid (mockup: km|EZ / Getriebe|Kraftstoff / Hand|Karosserie);
-    // the compact phone dot-line hides everything from "Hand" on via CSS (nth-child(n+5)).
-    ...(vehicle.body ? ([['car-front', vehicle.body]] as const) : []),
-  ];
-  return (
-    <>
-      <div className="vdp-headrow">
-        <div style={{ minWidth: 0 }}>
-          <h1 className="md-headline" style={{ margin: '0 0 4px' }}>
-            {vehicle.make} {vehicle.model}
-          </h1>
-          <p className="md-body vdp-trim" style={{ margin: 0, fontSize: 15 }}>
-            {vehicle.trim} · {vehicle.power}
-          </p>
-          {/* auto.de-ID lives in the offer card (next to Finanzierungsdetails), not here */}
-        </div>
-        {/* BL-08: no chip at all when there's no real rating (empty/broken price) — never a
-            fabricated "Top Preis"-shaped badge for `rating === ''`. */}
-        {vehicle.rating && (
-          <StatChip
-            tone={vehicle.rating === 'fair' ? 'warn' : 'good'}
-            icon={vehicle.rating === 'fair' ? 'minus' : 'check'}
-          >
-            {t('autobahn:tier.' + vehicle.rating)}
-          </StatChip>
-        )}
-      </div>
-
-      {/* fact line — plain text with dot separators, not pills */}
-      <div className="vdp-meta">
-        {factLine.map(([ic, v]) => (
-          <span key={ic}>
-            <Icon name={ic} size={16} color="var(--md-on-surface-variant)" stroke={1.8} />
-            {v}
-          </span>
-        ))}
-      </div>
-    </>
-  );
-};
-
-/** hand-picked highlights — the accent rows of the header. ALL highlights are shown
- *  (review round 9: "all highlights shown", no 6-chip cap); the Figma pill colors live
- *  on .vdp-highlights .chip in the theme. */
-export const VdpHeaderHighlights: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle }) => (
-  <div className="vdp-highlights" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8 }}>
-    {vehicle.highlights.map((f) => (
-      <span key={f} className="chip chip--filter chip--selected" style={{ cursor: 'default' }}>
-        <Icon name="check" size={14} stroke={2.4} />
-        {f}
-      </span>
-    ))}
-  </div>
-);
-
-/** condition (zustand) tiles — TÜV/Unfallfrei/Scheckheft/Garantie. */
-export const VdpHeaderCondition: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => {
-  const { condition } = vehicle;
-  // condition.hu === 'Neu' compares the RAW backend data value, not a display string — left as-is.
-  const tiles: ReadonlyArray<readonly [string, string, string]> = [
-    ['wrench', t('autobahn:header.huLabel'), condition.hu === 'Neu' ? t('autobahn:header.huNew') : t('autobahn:header.huUntil', { date: condition.hu })],
-    ['shield-check', t('autobahn:header.accidentFree'), condition.unfallfrei ? t('autobahn:header.yes') : t('autobahn:header.no')],
-    ['clipboard-check', t('autobahn:header.serviceHistory'), condition.scheckheft ? t('autobahn:header.yes') : t('autobahn:header.no')],
-    ['award', t('autobahn:header.warranty'), condition.garantie],
-  ];
-  return (
-    <div className="zustand-grid">
-      {tiles.map(([ic, l, v]) => (
-        <div key={l} className="zustand-tile">
-          <Icon name={ic} size={19} color="var(--md-primary)" stroke={1.9} style={{ flex: 'none' }} />
-          <span style={{ minWidth: 0 }}>
-            <span
-              className="md-label-sm"
-              style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
-            >
-              {l}
-            </span>
-            <span className="md-title-sm" style={{ display: 'block' }}>
-              {v}
-            </span>
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-/**
- * One container holding the entire vehicle identity: headline + trim/power, the
- * dot-separated fact line, the hand-picked highlight chips, and the condition
- * (zustand) tiles footer. The gallery itself is composed by the page (W3b) — this
- * is just the textual header card that sits beneath it. Desktop-only usage (mobile
- * splits these 3 pieces across the "before/after finance card" layout — see the page).
- */
-export const VdpHeaderCard: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => (
-  <div className="mcard" style={{ marginTop: 16, padding: '22px 24px 18px' }}>
-    <VdpHeaderSummary vehicle={vehicle} t={t} />
-    <div style={{ marginTop: 14 }}>
-      <VdpHeaderHighlights vehicle={vehicle} t={t} />
-    </div>
-    <VdpHeaderCondition vehicle={vehicle} t={t} />
-  </div>
-);
-
-export interface VdpTrustRowProps {
-  /** maps to carStore.isAvailable / state.isOnline — "Sofort verfügbar". */
-  available: boolean;
-  /** real totalCarImpCount from /service/user-actions/api/v1/stats/viewers — omit while loading. */
-  viewCount?: number;
-  /** real totalFavCount from the same endpoint — omit while loading. */
-  favCount?: number;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/** mobile-only trust-signal row shown between the identity block and the finance card:
- *  availability · view count · favorite count · "Geprüft" (every auto.de listing is
- *  130-point inspected, so this one is always shown, not conditional real data). */
-export const VdpTrustRow: React.FunctionComponent<VdpTrustRowProps> = ({ available, viewCount, favCount, t }) => (
-  // one swipeable line (mockup), never a ragged second row
-  <div style={{ display: 'flex', flexWrap: 'nowrap', overflowX: 'auto', scrollbarWidth: 'none', alignItems: 'center', gap: 5, marginTop: 10 }}>
-    {available && (
-      <span className="vdp-trust-chip">
-        <Icon name="check" size={13} stroke={2.4} color="var(--md-good)" />
-        {t('autobahn:availability.immediately')}
-      </span>
-    )}
-    {viewCount != null && (
-      <span className="vdp-trust-chip">
-        <Icon name="eye" size={13} />
-        {t('autobahn:card.activity.viewsCount', { count: viewCount })}
-      </span>
-    )}
-    {favCount != null && (
-      <span className="vdp-trust-chip">
-        <Icon name="heart" size={13} />
-        {t('autobahn:card.activity.favoritesCount', { count: favCount })}
-      </span>
-    )}
-    <span className="vdp-trust-chip">
-      <Icon name="shield-check" size={13} />
-      {t('autobahn:card.trust.checked')}
-    </span>
-  </div>
-);
-
-// ---------------------------------------------------------------------------
-// Fahrzeugdaten spec table (mobile clamp + "Mehr anzeigen")
-// ---------------------------------------------------------------------------
-
-export interface VdpSpecTableProps {
-  vehicle: VehicleDetail;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/**
- * Fahrzeugdaten grid of Spec items. Uses the vehicle's explicit `specs` when
- * present, else derives the design's twelve-row layout via `defaultVdpSpecs`. On
- * phones the table clamps to a few rows (`vdp-specs--clamp`) with a "Mehr
- * anzeigen" toggle (pure view state).
- */
-export const VdpSpecTable: React.FunctionComponent<VdpSpecTableProps> = ({ vehicle, t }) => {
-  const [allSpecs, setAllSpecs] = useState(false);
-  const specs: VdpSpec[] = vehicle.specs && vehicle.specs.length ? vehicle.specs : defaultVdpSpecs(vehicle);
-  return (
-    <div className="mcard" id="vdp-daten" style={{ padding: 22 }}>
-      <h2 className="md-headline-sm" style={{ marginBottom: 16 }}>
-        {t('autobahn:specTable.title')}
-      </h2>
-      <div className={'vdp-specs' + (allSpecs ? '' : ' vdp-specs--clamp')}>
-        {specs.map(([ic, l, v]) => (
-          <Spec key={l} icon={ic} label={l}>
-            {v}
-          </Spec>
-        ))}
-      </div>
-      {/* phone only: clamp button only meaningful when there are more than 6 specs */}
-      {specs.length > 6 && (
-        <button
-          className="mbtn mbtn--text show-mobile"
-          style={{ marginTop: 12, padding: 0 }}
-          onClick={() => setAllSpecs((a) => !a)}
-        >
-          {allSpecs ? t('autobahn:vdp.specs.showLess') : t('autobahn:specTable.showAll', { count: specs.length })}
-          <Icon name={allSpecs ? 'chevron-up' : 'chevron-down'} size={16} />
-        </button>
-      )}
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Equipment list (grouped + searchable)
-// ---------------------------------------------------------------------------
-
-export interface EquipmentListProps {
-  /** grouped equipment, e.g. { Komfort: [...], Sicherheit: [...] }. */
-  groups: EquipmentGroups;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/** Grouped + searchable equipment list (Autohero / AutoScout pattern). */
-export const EquipmentList: React.FunctionComponent<EquipmentListProps> = ({ groups, t }) => {
-  const [q, setQ] = useState('');
-  const [openAll, setOpenAll] = useState(false);
-  const ql = q.trim().toLowerCase();
-  const entries = Object.entries(groups)
-    .map(([g, items]): [string, string[]] => [g, items.filter((it) => !ql || it.toLowerCase().includes(ql))])
-    .filter(([, items]) => items.length);
-  const total = Object.values(groups).reduce((s, a) => s + a.length, 0);
-  return (
-    <div className="mcard" id="vdp-ausstattung" style={{ padding: 22 }}>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          gap: 12,
-          marginBottom: 14,
-          flexWrap: 'wrap',
-        }}
-      >
-        <h2 className="md-headline-sm">
-          {t('autobahn:equipment.title')}{' '}
-          <span style={{ color: 'var(--md-on-surface-variant)', fontWeight: 600 }}>({total})</span>
-        </h2>
-        <label className="mfield" style={{ height: 40, maxWidth: 240, flex: 1, minWidth: 170 }}>
-          <Icon name="search" size={18} />
-          <input placeholder={t('autobahn:equipment.search.placeholder')} value={q} onChange={(e) => setQ(e.target.value)} />
-          {q && (
-            <button className="icon-btn" style={{ width: 28, height: 28 }} onClick={() => setQ('')}>
-              <Icon name="x" size={15} />
-            </button>
-          )}
-        </label>
-      </div>
-      <div className="eq-cols">
-        {entries.map(([g, items]) => (
-          <div key={g} style={{ breakInside: 'avoid', marginBottom: 18 }}>
-            <div className="md-title-sm" style={{ color: 'var(--md-link)', marginBottom: 8 }}>
-              {g}
-            </div>
-            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 7 }}>
-              {(openAll || ql ? items : items.slice(0, 4)).map((it) => (
-                <li
-                  key={it}
-                  style={{
-                    display: 'flex',
-                    gap: 9,
-                    alignItems: 'flex-start',
-                    fontSize: 13.5,
-                    color: 'var(--md-on-surface-variant)',
-                  }}
-                >
-                  <Icon name="check" size={16} color="var(--md-good)" stroke={2.4} style={{ flex: 'none', marginTop: 1 }} />
-                  {it}
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
-      {!ql && !openAll && (
-        <button className="mbtn mbtn--text" style={{ marginTop: 4 }} onClick={() => setOpenAll(true)}>
-          {t('autobahn:equipment.showAll', { total })}
-          <Icon name="chevron-down" size={16} />
-        </button>
-      )}
-      {entries.length === 0 && <p className="md-body-sm">{t('autobahn:equipment.noResults', { q })}</p>}
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// CO₂ / energy-efficiency label
-// ---------------------------------------------------------------------------
-
-export interface Co2LabelProps {
-  vehicle: VehicleDetail;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/** CO₂ / energy-efficiency label (EU-style stepped colour band, Figma pastel scale).
- *  Handles PHEV with BOTH class markers (gew. komb. + entladen komb.) on the scale. */
-export const Co2Label: React.FunctionComponent<Co2LabelProps> = ({ vehicle, t }) => {
-  const p = vehicle.phev;
-  const idx = Math.max(0, CO2_CLASSES.indexOf((p ? p.co2classW : vehicle.co2class) as (typeof CO2_CLASSES)[number]));
-  // discharged-class marker (PHEV only); -1 when absent or same as the weighted class.
-  const idxD = p ? CO2_CLASSES.indexOf(p.co2classD as (typeof CO2_CLASSES)[number]) : -1;
-  const hasMarks = !!p && (idx >= 0 || idxD >= 0);
-  const stats: ReadonlyArray<readonly [string, string]> = p
-    ? [
-        [t('autobahn:eco.stat.powerConsumptionWeighted'), p.consEl],
-        [t('autobahn:eco.stat.fuelConsumptionWeighted'), p.consFuel],
-        [t('autobahn:eco.stat.fuelConsumptionDischarged'), p.consDis],
-        [t('autobahn:eco.stat.co2WeightedCombined'), p.co2w],
-      ]
-    : [
-        [t('autobahn:eco.stat.consumptionCombined'), vehicle.cons],
-        [t('autobahn:eco.stat.co2Emissions'), vehicle.co2],
-        [t('autobahn:eco.stat.co2Class'), vehicle.co2class],
-      ];
-  return (
-    <div className="mcard" style={{ padding: 22 }}>
-      <h2 className="md-headline-sm" style={{ marginBottom: 14 }}>
-        {t('autobahn:eco.heading')}
-      </h2>
-      <div className="co2-stats">
-        {stats.map(([l, v]) => (
-          <div key={l}>
-            <div className="md-label-sm">{l}</div>
-            <div className="md-title-sm" style={{ fontSize: 16 }}>
-              {v}
-            </div>
-          </div>
-        ))}
-      </div>
-      <div className="co2-scale">
-        {CO2_CLASSES.map((c, i) => (
-          <div key={c} className="co2-col">
-            {/* PHEV: tiny class markers above the weighted + discharged segments (mockup) */}
-            {hasMarks && (
-              <span className="co2-mark">
-                {i === idx
-                  ? t('autobahn:eco.weightedShort')
-                  : i === idxD && idxD !== idx
-                    ? t('autobahn:eco.dischargedShort')
-                    : ' '}
-              </span>
-            )}
-            <div
-              className={
-                'co2-seg' +
-                (i === idx ? ' co2-seg--on' : '') +
-                (i === idxD && idxD !== idx ? ' co2-seg--on2' : '')
-              }
-              style={{ ['--seg' as string]: CO2_COLORS[i] } as React.CSSProperties}
-            >
-              {c}
-            </div>
-          </div>
-        ))}
-      </div>
-      {p ? (
-        <p className="md-label-sm" style={{ margin: '10px 0 0' }}>
-          {t('autobahn:eco.co2ClassPrefix')} <b style={{ color: 'var(--md-on-surface)' }}>{p.co2classW}</b>{' '}
-          {t('autobahn:eco.weightedCombined')} · <b style={{ color: 'var(--md-on-surface)' }}>{p.co2classD}</b>{' '}
-          {t('autobahn:eco.dischargedCombined')} · {t('autobahn:eco.energyClassWltpSuffix')}
-        </p>
-      ) : (
-        <p className="md-label-sm" style={{ margin: '10px 0 0' }}>
-          {t('autobahn:eco.energyClass')}
-        </p>
-      )}
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Free-text vehicle description (Fahrzeugbeschreibung)
-// ---------------------------------------------------------------------------
-
-export interface VehicleDescriptionProps {
-  vehicle: VehicleDetail;
-  /**
-   * Pre-composed description text. When omitted a sensible default is built from
-   * the vehicle's typed fields (matching the design's template sentence).
-   */
-  text?: string;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-function defaultDescription(v: VehicleDetail, t: TranslationFunction): string {
-  return t('autobahn:description.defaultBody', {
-    make: v.make,
-    model: v.model,
-    trim: v.trim,
-    power: v.power,
-    gear: v.gear,
-    owners: v.owners,
-    reg: v.reg,
-    km: v.km.toLocaleString('de-DE'),
-    color: v.color,
-  });
-}
-
-/** Free-text vehicle description with a "Mehr anzeigen" clamp (pure view state). */
-export const VehicleDescription: React.FunctionComponent<VehicleDescriptionProps> = ({ vehicle, text, t }) => {
-  const [open, setOpen] = useState(false);
-  const body = text ?? defaultDescription(vehicle, t);
-  return (
-    <div className="mcard" style={{ padding: 22 }}>
-      <h2 className="md-headline-sm" style={{ marginBottom: 12 }}>
-        {t('autobahn:description.heading')}
-      </h2>
-      <p
-        className="md-body"
-        style={{ margin: 0, maxHeight: open ? 'none' : 96, overflow: 'hidden', position: 'relative' }}
-      >
-        {body}
-      </p>
-      <button className="mbtn mbtn--text" style={{ marginTop: 8, padding: 0 }} onClick={() => setOpen((o) => !o)}>
-        {open ? t('autobahn:description.showLess') : t('autobahn:description.showMore')}
-        <Icon name={open ? 'chevron-up' : 'chevron-down'} size={16} />
-      </button>
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Trust strip
-// ---------------------------------------------------------------------------
-
-/** [kebab-case lucide icon, label, optional subline (mobile Figma tiles)]. */
-export type TrustItem = readonly [icon: string, label: string, sub?: string];
-
-export interface TrustStripProps {
-  /** trust badges; defaults to auto.de's four standard promises. */
-  items?: ReadonlyArray<TrustItem>;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/** auto.de's four standard promises — [icon, i18n label key, i18n subline key]. */
-const DEFAULT_TRUST: ReadonlyArray<readonly [string, string, string]> = [
-  ['shield-check', 'autobahn:trust.warranty', 'autobahn:trust.warrantySub'],
-  ['undo-2', 'autobahn:trust.return', 'autobahn:trust.returnSub'],
-  ['truck', 'autobahn:trust.delivery', 'autobahn:trust.deliverySub'],
-  ['badge-check', 'autobahn:trust.inspection', 'autobahn:trust.inspectionSub'],
-];
-
-/** Trust-signal strip: quiet one-liner on desktop, Figma 2×2 tile card on mobile
- *  (the .trust-sub sublines only surface in the mobile tile layout via CSS). */
-export const TrustStrip: React.FunctionComponent<TrustStripProps> = ({ items, t }) => (
-  <div className="trust-strip">
-    {(items ?? DEFAULT_TRUST.map(([ic, key, subKey]) => [ic, t(key), t(subKey)] as TrustItem)).map(([ic, label, sub]) => (
-      <div key={label}>
-        <Icon name={ic} size={17} color="var(--md-primary)" stroke={2} style={{ flex: 'none' }} />
-        <span style={{ minWidth: 0 }}>
-          {label}
-          {sub && <span className="trust-sub">{sub}</span>}
-        </span>
-      </div>
-    ))}
-  </div>
-);
-
-// ---------------------------------------------------------------------------
-// Price history + market band (NEEDS-DATA by default)
-// ---------------------------------------------------------------------------
-
-export interface PriceHistoryProps {
-  vehicle: VehicleDetail;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/**
- * Price-history sparkline + market-value position bar.
- *
- * NEEDS-DATA: the sparkline needs `priceHistory` (with at least two points) and
- * the position bar needs the full market band (`marketLow` / `marketAvg` /
- * `marketHigh`). Either section that lacks real data renders the
- * NEEDS_DATA_LABEL ('Daten folgt') marker — we never draw a fake trend or
- * position. Both are needs-data by default, so until W3b supplies them this card
- * shows the markers.
- */
-export const PriceHistory: React.FunctionComponent<PriceHistoryProps> = ({ vehicle, t }) => {
-  const pts = vehicle.priceHistory;
-  const hasHistory = !!pts && pts.length >= 2;
-  const hasMarket =
-    vehicle.marketLow != null &&
-    vehicle.marketAvg != null &&
-    vehicle.marketHigh != null &&
-    vehicle.marketHigh > vehicle.marketLow;
-
-  // Nothing real to show yet — hide the whole card instead of rendering stubs.
-  if (!hasHistory && !hasMarket) return null;
-
-  // --- history sparkline (only when real points exist) ---
-  let historyBlock: React.ReactNode;
-  if (hasHistory) {
-    const prices = pts!.map((p) => p.price);
-    const lo = Math.min(...prices);
-    const hi = Math.max(...prices);
-    const W = 280;
-    const H = 70;
-    const x = (i: number) => (i / (pts!.length - 1)) * W;
-    const y = (p: number) => H - ((p - lo) / (hi - lo || 1)) * H;
-    const last = pts![pts!.length - 1];
-    const line = pts!.map((p, i) => `${i === 0 ? 'M' : 'L'} ${x(i).toFixed(1)} ${y(p.price).toFixed(1)}`).join(' ');
-    const area = `${line} L ${W} ${H} L 0 ${H} Z`;
-    const drop = vehicle.listPrice != null ? vehicle.listPrice - vehicle.price : null;
-    historyBlock = (
-      <div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
-          {drop != null && drop > 0 ? (
-            <>
-              <StatChip tone="good" icon="trending-down">
-                {t('autobahn:priceHistory.dropAmount', { amount: eur(drop) })}
-              </StatChip>
-              <span className="md-label-sm">{t('autobahn:priceHistory.sinceListing')}</span>
-            </>
-          ) : (
-            <span className="md-label-sm">{t('autobahn:priceHistory.label')}</span>
-          )}
-        </div>
-        <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="78" preserveAspectRatio="none" style={{ overflow: 'visible' }}>
-          <defs>
-            <linearGradient id="phg" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor="var(--md-primary)" stopOpacity=".22" />
-              <stop offset="100%" stopColor="var(--md-primary)" stopOpacity="0" />
-            </linearGradient>
-          </defs>
-          <path d={area} fill="url(#phg)" />
-          <path d={line} fill="none" stroke="var(--md-primary)" strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
-          <circle cx={x(pts!.length - 1)} cy={y(last.price)} r="4.5" fill="var(--md-primary)" stroke="#fff" strokeWidth="2" />
-        </svg>
-        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
-          <span className="md-label-sm">{pts![0].label}</span>
-          <span className="md-label-sm">{last.label}</span>
-        </div>
-      </div>
-    );
-  } else {
-    historyBlock = (
-      <div>
-        <div className="md-title-sm" style={{ marginBottom: 12 }}>
-          {t('autobahn:priceHistory.title')}
-        </div>
-        <p className="md-body-sm" style={{ margin: 0, fontStyle: 'italic', color: 'var(--md-on-surface-variant)' }}>
-          {t('autobahn:common.needsData')}
-        </p>
-      </div>
-    );
-  }
-
-  // --- market-value position (only when the full band exists) ---
-  let marketBlock: React.ReactNode;
-  if (hasMarket) {
-    const mpos = Math.max(
-      0,
-      Math.min(1, (vehicle.price - vehicle.marketLow!) / (vehicle.marketHigh! - vehicle.marketLow!)),
-    );
-    const delta = vehicle.marketAvg! - vehicle.price;
-    marketBlock = (
-      <div>
-        <div className="md-title-sm" style={{ marginBottom: 12 }}>
-          {t('autobahn:marketValue.heading')}
-        </div>
-        <div
-          style={{
-            position: 'relative',
-            height: 10,
-            borderRadius: 'var(--md-r-full)',
-            background: 'linear-gradient(90deg,#0F7B43,#C7B53A 55%,#D4502B)',
-          }}
-        >
-          <span
-            style={{
-              position: 'absolute',
-              top: '50%',
-              left: `calc(${mpos * 100}% - 9px)`,
-              transform: 'translateY(-50%)',
-              width: 18,
-              height: 18,
-              borderRadius: '50%',
-              background: '#fff',
-              boxShadow: 'var(--md-e2), 0 0 0 2px var(--md-primary)',
-            }}
-          />
-        </div>
-        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
-          <span className="md-label-sm">{eur(vehicle.marketLow!)} €</span>
-          <span className="md-label-sm">{eur(vehicle.marketHigh!)} €</span>
-        </div>
-        {delta > 0 && (
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 8,
-              marginTop: 12,
-              padding: '10px 12px',
-              borderRadius: 'var(--md-r-sm)',
-              background: 'var(--md-good-container)',
-            }}
-          >
-            <Icon name="badge-check" size={18} color="var(--md-on-good-container)" />
-            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--md-on-good-container)' }}>
-              {t('autobahn:marketValue.belowAverage', { rating: t('autobahn:tier.' + vehicle.rating), amount: eur(delta) })}
-            </span>
-          </div>
-        )}
-      </div>
-    );
-  } else {
-    marketBlock = (
-      <div>
-        <div className="md-title-sm" style={{ marginBottom: 12 }}>
-          {t('autobahn:marketValue.heading')}
-        </div>
-        <p className="md-body-sm" style={{ margin: 0, fontStyle: 'italic', color: 'var(--md-on-surface-variant)' }}>
-          {t('autobahn:common.needsData')}
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mcard" id="vdp-preis" style={{ padding: 22 }}>
-      <h2 className="md-headline-sm" style={{ marginBottom: 4 }}>
-        {t('autobahn:priceMarket.heading')}
-      </h2>
-      <p className="md-body-sm" style={{ marginBottom: 18 }}>
-        {t('autobahn:priceMarket.description')}
-      </p>
-      <div className="pmv-grid">
-        {historyBlock}
-        {marketBlock}
-      </div>
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Protection products (CNP Santander upsell) — optional, non-functional UI
-// ---------------------------------------------------------------------------
-
-/** [kebab-case lucide icon, name, description, monthly price EUR]. */
-export type ProtectionProduct = readonly [icon: string, name: string, desc: string, price: number];
-
-export interface ProtectionProductsProps {
-  /** the upsell products; defaults to the design's four CNP Santander packages. */
-  items?: ReadonlyArray<ProtectionProduct>;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/**
- * The design's four CNP Santander packages — [icon, product name (proper noun,
- * also the selection key), i18n description key, monthly example price EUR].
- */
-const DEFAULT_PROTECTION: ReadonlyArray<ProtectionProduct> = [
-  ['shield-check', 'Safe Plus', 'autobahn:protection.items.safePlus.desc', 9],
-  ['life-buoy', 'Drive Pro', 'autobahn:protection.items.drivePro.desc', 7],
-  ['wrench', 'Smart Repair', 'autobahn:protection.items.smartRepair.desc', 12],
-  ['rotate-ccw', 'Smart Return', 'autobahn:protection.items.smartReturn.desc', 10],
-];
-
-/**
- * Partner attach products (CNP Santander) sold alongside the financing. Kept as a
- * presentational upsell demo: the selectable rows are pure VIEW state (no store /
- * order side effects, the prices are example values), and the catalogue is a prop
- * with sane defaults. Functional ordering is out of scope for W3a.
- */
-export const ProtectionProducts: React.FunctionComponent<ProtectionProductsProps> = ({ items, t }) => {
-  const products: ReadonlyArray<ProtectionProduct> =
-    items ?? DEFAULT_PROTECTION.map(([ic, name, descKey, price]) => [ic, name, t(descKey), price] as ProtectionProduct);
-  const [sel, setSel] = useState<Record<string, boolean>>({});
-  const chosen = products.filter(([, n]) => sel[n]);
-  const sum = chosen.reduce((a, [, , , p]) => a + p, 0);
-  return (
-    <div className="mcard" style={{ padding: 20 }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
-        <span
-          style={{
-            width: 34,
-            height: 34,
-            borderRadius: 'var(--md-r-full)',
-            background: 'var(--md-sc)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flex: 'none',
-          }}
-        >
-          <Icon name="umbrella" size={18} color="var(--md-on-surface-variant)" />
-        </span>
-        <div>
-          <div className="md-title-sm">{t('autobahn:protection.heading')}</div>
-          <div className="md-label-sm">{t('autobahn:protection.subtitle')}</div>
-        </div>
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-        {products.map(([ic, name, desc, price]) => (
-          <button
-            key={name}
-            onClick={() => setSel((s) => ({ ...s, [name]: !s[name] }))}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 12,
-              width: '100%',
-              textAlign: 'left',
-              cursor: 'pointer',
-              padding: '10px 12px',
-              borderRadius: 'var(--md-r-md)',
-              background: sel[name] ? 'var(--md-primary-container)' : 'var(--md-sc-low)',
-              border: '1px solid ' + (sel[name] ? 'var(--md-primary)' : 'transparent'),
-              transition: 'background var(--dur-1), border-color var(--dur-1)',
-            }}
-          >
-            <Icon
-              name={ic}
-              size={19}
-              stroke={1.8}
-              color={sel[name] ? 'var(--md-on-primary-container)' : 'var(--md-on-surface-variant)'}
-              style={{ flex: 'none' }}
-            />
-            <span style={{ flex: 1, minWidth: 0 }}>
-              <span className="md-title-sm" style={{ display: 'block', fontSize: 13.5 }}>
-                {name}
-              </span>
-              <span className="md-label-sm" style={{ display: 'block', fontSize: 11.5 }}>
-                {desc}
-              </span>
-            </span>
-            <span style={{ flex: 'none', display: 'flex', alignItems: 'center', gap: 8 }}>
-              <span className="num md-label-sm" style={{ fontWeight: 600 }}>
-                +{price} €/mtl.
-              </span>
-              <span
-                style={{
-                  width: 20,
-                  height: 20,
-                  borderRadius: '50%',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  background: sel[name] ? 'var(--md-primary)' : 'transparent',
-                  border: sel[name] ? 0 : '1.5px solid var(--md-outline)',
-                }}
-              >
-                {sel[name] && <Icon name="check" size={13} stroke={3} color="#fff" />}
-              </span>
-            </span>
-          </button>
-        ))}
-      </div>
-      {sum > 0 && (
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'baseline',
-            marginTop: 12,
-            paddingTop: 10,
-            borderTop: '1px solid var(--md-outline-variant)',
-          }}
-        >
-          <span className="md-label-sm">
-            {t('autobahn:protection.packagesSelected', { count: chosen.length })}
-          </span>
-          <span className="num" style={{ fontWeight: 700, color: 'var(--md-primary)' }}>
-            +{sum} €/mtl.
-          </span>
-        </div>
-      )}
-      <div className="md-label-sm" style={{ marginTop: 10, fontSize: 11.5 }}>
-        {t('autobahn:protection.exampleValues', { partner: 'CNP Santander Insurance' })}
-      </div>
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// In-page anchor nav (mobile)
-// ---------------------------------------------------------------------------
-
-/** [target element id, label]. */
-export type VdpAnchor = readonly [id: string, label: string];
-
-export interface VdpAnchorsProps {
-  /** anchor chips; defaults to the four VDP sections. */
-  items?: ReadonlyArray<VdpAnchor>;
-  /**
-   * Optional navigation handler. When provided it OWNS the scroll (e.g. the page
-   * in W3b). When omitted the component falls back to scrolling the page's own
-   * element with that id into view — intrinsic anchor-nav behaviour on the
-   * document, not a data source.
-   */
-  onNavigate?: (id: string) => void;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/** the four VDP sections — [target element id, i18n label key]. */
-const DEFAULT_ANCHORS: ReadonlyArray<VdpAnchor> = [
-  ['vdp-daten', 'autobahn:anchors.data'],
-  ['vdp-ausstattung', 'autobahn:anchors.equipment'],
-  ['vdp-preis', 'autobahn:anchors.priceMarket'],
-  ['vdp-check', 'autobahn:anchors.inspection'],
-];
-
-/** Sticky in-page anchor nav (mobile) — quiet chips. */
-export const VdpAnchors: React.FunctionComponent<VdpAnchorsProps> = ({ items, onNavigate, t }) => {
-  const anchors: ReadonlyArray<VdpAnchor> =
-    items ?? DEFAULT_ANCHORS.map(([id, key]) => [id, t(key)] as VdpAnchor);
-  const go = (id: string) => {
-    if (onNavigate) {
-      onNavigate(id);
-      return;
-    }
-    if (typeof document === 'undefined') return;
-    const el = document.getElementById(id);
-    if (!el) return;
-    let r = el.getBoundingClientRect();
-    if (!r.height && el.firstElementChild) r = el.firstElementChild.getBoundingClientRect();
-    window.scrollTo({ top: r.top + window.scrollY - 60, behavior: 'smooth' });
-  };
-  return (
-    <div className="vdp-anchors show-mobile" style={{ background: 'var(--md-sc-low)' }}>
-      {anchors.map(([id, l]) => (
-        <button key={id} className="chip" onClick={() => go(id)} style={{ flex: 'none' }}>
-          {l}
-        </button>
-      ))}
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Desktop sticky summary bar
-// ---------------------------------------------------------------------------
-
-export interface VdpStickyBarProps {
-  vehicle: VehicleDetail;
-  /** thumbnail image URL (already resolved) for the docked bar. */
-  image: string;
-  /**
-   * Whether the bar is docked/visible. Controlled by the page (W3b owns the
-   * scroll position → show toggle), keeping this component pure — no window
-   * scroll listener here.
-   */
-  show: boolean;
-  /** primary CTA click. */
-  onSecure?: () => void;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/** Desktop sticky summary bar (AS24 pattern) — docks to top, driven by `show`. */
-export const VdpStickyBar: React.FunctionComponent<VdpStickyBarProps> = ({ vehicle, image, show, onSecure, t }) => (
-  <div className={'vdp-stickytop hide-mobile' + (show ? ' vdp-stickytop--on' : '')}>
-    <div className="container" style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '10px 24px' }}>
-      <img
-        src={image}
-        alt=""
-        style={{
-          width: 64,
-          height: 44,
-          objectFit: 'cover',
-          borderRadius: 'var(--md-r-sm)',
-          background: '#fff',
-          border: '1px solid var(--md-outline-variant)',
-          flex: 'none',
-        }}
-      />
-      <div style={{ minWidth: 0, flex: 1 }}>
-        <div className="md-title-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-          {vehicle.make} {vehicle.model} · {vehicle.trim}
-        </div>
-        <div className="md-label-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-          {fmtKm(vehicle.km)} · {vehicle.reg} · {vehicle.gear}
-        </div>
-      </div>
-      <div style={{ textAlign: 'right', flex: 'none' }}>
-        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, justifyContent: 'flex-end' }}>
-          <span className="md-label-sm">{t('autobahn:sticky.from')}</span>
-          <span className="num" style={{ fontWeight: 700, fontSize: 20, color: 'var(--md-primary)', letterSpacing: '-.4px' }}>
-            {vehicle.monthly} €
-          </span>
-          <span className="md-label-sm">{t('autobahn:sticky.perMonth')}</span>
-        </div>
-        <div className="md-label-sm">{t('autobahn:sticky.purchasePrice', { price: eur(vehicle.price) })}</div>
-      </div>
-      <Button variant="filled" icon="shield-check" style={{ flex: 'none' }} onClick={onSecure}>
-        {t('autobahn:sticky.secureOffer')}
-      </Button>
-    </div>
-  </div>
-);
-
-// ---------------------------------------------------------------------------
-// Mobile sticky CTA bar
-// ---------------------------------------------------------------------------
-
-export interface VdpBottomBarProps {
-  vehicle: VehicleDetail;
-  /**
-   * Whether the bar is docked/visible — mirrors VdpStickyBar's `show` (same
-   * page-owned scroll-position toggle, STICKY_SHOW_AT). Was unconditionally
-   * visible before, unlike the desktop VdpStickyBar; the mockup only shows it
-   * after scrolling past the main offer card.
-   */
-  show: boolean;
-  /** active payment mode — drives the tabs + the displayed figure (rate vs price). */
-  mode?: FinanceMode;
-  /** mode tab tapped; when omitted the tabs row is not rendered. */
-  onModeChange?: (mode: FinanceMode) => void;
-  /** monthly rate for the CURRENT mode (fin/leasing differ); falls back to vehicle.monthly. */
-  monthly?: number;
-  /** price-rating label — drives the eval pill + gradient bar (same as the offer card). */
-  ratingLabel?: string;
-  /** primary CTA click. */
-  onSecure?: () => void;
-  /** phone CTA click. */
-  onCall?: () => void;
-  /** opens the "Rate anpassen" sheet; when omitted the button is not rendered. */
-  onOpenAdjust?: () => void;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/** Mobile sticky bottom bar (Figma "Sticky Footer"): mode tabs, rate + price rating,
- *  then Angebot anfragen · phone · Rate anpassen. No struck old rate — there is no
- *  real previous-rate source (needs-data discipline), so nothing is fabricated. */
-export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
-  vehicle,
-  show,
-  mode = 'fin',
-  onModeChange,
-  monthly,
-  ratingLabel,
-  onSecure,
-  onCall,
-  onOpenAdjust,
-  t,
-}) => {
-  const isCash = mode === 'cash';
-  const rate = monthly != null ? monthly : vehicle.monthly;
-  const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
-  const evalTier = tierIdx >= 0 ? tierIdx : 1;
-  return (
-    <div className={'vdp-bottom-bar show-mobile' + (show ? ' vdp-bottom-bar--on' : '')}>
-      {onModeChange && (
-        <div className="fin-tabs bb-tabs" role="tablist">
-          {(
-            [
-              ['fin', 'autobahn:finance.mode.financing'],
-              ['leasing', 'autobahn:finance.mode.leasing'],
-              ['cash', 'autobahn:card.price.buy'],
-            ] as Array<[FinanceMode, string]>
-          ).map(([k, labelKey]) => (
-            <button
-              key={k}
-              type="button"
-              role="tab"
-              aria-selected={mode === k}
-              className={'fin-tab' + (mode === k ? ' on' : '')}
-              onClick={() => onModeChange(k)}
-            >
-              {t(labelKey)}
-            </button>
-          ))}
-        </div>
-      )}
-      <div className="bb-price-row">
-        <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, whiteSpace: 'nowrap', minWidth: 0 }}>
-          <span className="num" style={{ fontWeight: 800, fontSize: 30, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
-            {isCash ? eur(vehicle.price) : eur(Math.round(rate))} €
-          </span>
-          <span className="md-label-sm" style={{ fontWeight: 600 }}>
-            {isCash ? t('autobahn:finance.fixedPrice') : `${t('autobahn:finance.exampleLabel')} ${t('autobahn:bottom.perMonth')}`}
-          </span>
-        </div>
-        {ratingLabel && (
-          <div className="bb-eval">
-            <span
-              className="fin-eval-pill"
-              style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
-            >
-              <Icon
-                name={evalTier <= 1 ? 'check' : evalTier === 2 ? 'minus' : 'trending-up'}
-                size={13}
-                stroke={2.6}
-                color={TIER_COLORS[evalTier]}
-              />
-              {t('autobahn:tier.' + TIER_KEYS[evalTier])}
-            </span>
-            <div className="fin-eval-bar">
-              <div className="fin-eval-thumb" style={{ left: `${(evalTier + 0.5) * 20}%`, borderColor: TIER_COLORS[evalTier] }} />
-            </div>
-          </div>
-        )}
-      </div>
-      <div className="bb-cta-row">
-        <Button variant="filled" icon="file-check" style={{ flex: 1, minWidth: 0 }} onClick={onSecure}>
-          {t('autobahn:bottom.secureOffer')}
-        </Button>
-        {/* padding:0 — icon-only button (same fix as the sheet's phone button) */}
-        {onCall && <Button variant="outlined" icon="phone" style={{ width: 46, flex: 'none', padding: 0 }} onClick={onCall} />}
-        {onOpenAdjust && !isCash && (
-          <Button variant="outlined" icon="sliders-horizontal" className="bb-adjust" style={{ flex: 'none' }} onClick={onOpenAdjust}>
-            {t('autobahn:finance.adjustRate')}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// 130-Punkte-Check block
-// ---------------------------------------------------------------------------
-
-export interface InspectionBlockProps {
-  /** pass categories; e.g. ['Karosserie & Lack', 'Motor & Antrieb', …]. */
-  categories: string[];
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/** 130-Punkte-Check block — the auto.de inspection promise, all categories pass. */
-export const InspectionBlock: React.FunctionComponent<InspectionBlockProps> = ({ categories, t }) => (
-  <div className="mcard mcard--filled" id="vdp-check" style={{ padding: 22 }}>
-    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-      <Icon name="badge-check" size={24} color="var(--md-primary)" />
-      <h2 className="md-headline-sm">{t('autobahn:inspection.passed')}</h2>
-    </div>
-    <div className="eq-cols">
-      {categories.map((c) => (
-        <div
-          key={c}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 9,
-            fontSize: 13.5,
-            color: 'var(--md-on-surface-variant)',
-            marginBottom: 10,
-          }}
-        >
-          <Icon name="check-circle" size={18} color="var(--md-good)" stroke={2} style={{ flex: 'none' }} />
-          {c}
-        </div>
-      ))}
-    </div>
-  </div>
-);
-
-// ---------------------------------------------------------------------------
-// Finanzierungs-/Leasingdetails popup (desktop modal / mobile bottom-sheet)
-// ---------------------------------------------------------------------------
-
-/** full-width label(+optional trailing price) / Switch row — Switch itself is inline-flex
- *  (sized to its own content), so the space-between has to live on this wrapper, not on
- *  Switch's `label` prop (which renders track-then-label, not a full-width justified row). */
-const ToggleRow: React.FunctionComponent<{
-  label: string;
-  price?: string;
-  checked: boolean;
-  disabled?: boolean;
-  onChange: (checked: boolean) => void;
-}> = ({ label, price, checked, disabled, onChange }) => (
-  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
-    <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
-      {label}
-      <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
-    </span>
-    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-      {price && (
-        <span className="num" style={{ fontWeight: 700, fontSize: 13.5 }}>
-          {price}
-        </span>
-      )}
-      <Switch checked={checked} disabled={disabled} onChange={(e) => onChange(e.target.checked)} ariaLabel={label} />
-    </div>
-  </div>
-);
-
-export interface FinanceDetailsModalProps {
-  /** open flag (controlled by the page). */
-  open: boolean;
-  /** active payment mode — drives labels + which legal example shows. */
-  mode: 'fin' | 'leasing' | 'cash';
-  /** car make+model — mobile sheet subtitle under the title (mockup). */
-  vehicleName?: string;
-  price: number;
-  monthly: number;
-  apr: number;
-  down: number;
-  term: number;
-  /** leasing annual mileage (km/yr), shown only in leasing mode. */
-  annualMileage?: number;
-  /** REAL figures from the financing config (NOT computed — balloon/Schlussrate makes monthly·term wrong). */
-  netLoanAmount?: number;
-  /** Schlussrate (balloon final installment); shown only when > 0. */
-  finalInstallment?: number;
-  /** Gesamt(rückzahlungs)betrag from the config; shown only when > 0 (never the wrong monthly·term). */
-  grossAmount?: number;
-  /** Sollzinssatz p.a. (%); shown only when > 0. */
-  nominalRate?: number;
-  /** slider bounds — when the change handlers are supplied, the modal shows adjustment sliders. */
-  downMin?: number;
-  downMax?: number;
-  downStep?: number;
-  termMin?: number;
-  termMax?: number;
-  termStep?: number;
-  /** discrete selectable terms (months) for the Laufzeit chips. */
-  termOptions?: number[];
-  annualMileageMin?: number;
-  annualMileageMax?: number;
-  annualMileageStep?: number;
-  /** slider change handlers (same as the calculator); they recompute the rate via the page. */
-  onDownChange?: (down: number) => void;
-  onTermChange?: (term: number) => void;
-  onAnnualMileageChange?: (km: number) => void;
-  onClose: () => void;
-  /** mobile only — start with the Finanzierungs-/Leasingdetails breakdown already expanded
-   *  (opened directly via that link, skipping the "Rate anpassen" collapsed default view). */
-  initialShowBreakdown?: boolean;
-  /** mobile only — price-rating label, drives the eval pill/bar (same as the collapsed card). */
-  ratingLabel?: string;
-  /** mobile only — mode tabs inside the sheet (mirrors the collapsed card's tabs). */
-  onModeChange?: (mode: FinanceMode) => void;
-  /** mobile only — primary "Rate anfragen"/"Angebot anfragen" CTA. */
-  onSecure?: () => void;
-  /** mobile only — secondary call CTA. */
-  onCall?: () => void;
-  /** mobile only — "Mit Schlussrate" toggle (financing only; leasing has no balloon concept). */
-  withFinalInstallment?: boolean;
-  onToggleFinalInstallment?: (checked: boolean) => void;
-  /** mobile only — "Rundum-Sorglos-Paket" toggle (all modes; forced-on + disabled for cash). */
-  withAddServices?: boolean;
-  addServicesCost?: number;
-  addServicesDisabled?: boolean;
-  onToggleAddServices?: (checked: boolean) => void;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/**
- * Full payment breakdown + legal example, opened from the calculator's
- * "Finanzierungsdetails" / "Leasingdetails" link (matches production, which uses a popup).
- * Desktop = centered modal, mobile = bottom-sheet (CSS). All figures are derived from the
- * live calculator props (no fabricated Sollzins/Schlussrate — only what we can compute).
- */
-export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalProps> = ({
-  open,
-  mode,
-  vehicleName,
-  price,
-  monthly,
-  apr,
-  down,
-  term,
-  annualMileage,
-  netLoanAmount,
-  finalInstallment,
-  grossAmount,
-  nominalRate,
-  downMin,
-  downMax,
-  downStep = 100,
-  termMin,
-  termMax,
-  termStep = 6,
-  termOptions,
-  annualMileageMin = 5000,
-  annualMileageMax = 60000,
-  annualMileageStep = 5000,
-  onDownChange,
-  onTermChange,
-  onAnnualMileageChange,
-  onClose,
-  initialShowBreakdown,
-  ratingLabel,
-  onModeChange,
-  onSecure,
-  onCall,
-  withFinalInstallment,
-  onToggleFinalInstallment,
-  withAddServices,
-  addServicesCost,
-  addServicesDisabled,
-  onToggleAddServices,
-  t,
-}) => {
-  // mobile-only: the Finanzierungs-/Leasingdetails breakdown starts collapsed (opened via "Rate
-  // anpassen") or expanded (opened directly via the details link) — reset on every open, since
-  // this component stays mounted (the page always renders it, gated by `open`, not unmounted).
-  const [showBreakdown, setShowBreakdown] = React.useState(!!initialShowBreakdown);
-  React.useEffect(() => {
-    if (open) setShowBreakdown(!!initialShowBreakdown);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, initialShowBreakdown]);
-
-  if (!open) return null;
-  const isLease = mode === 'leasing';
-  const isCash = mode === 'cash';
-  const title = isLease ? t('autobahn:modal.leasingDetails') : t('autobahn:modal.financingDetails');
-  const mobileTitle = isCash
-    ? t('autobahn:modal.sheetTitleCash')
-    : isLease
-      ? t('autobahn:modal.sheetTitleLeasing')
-      : t('autobahn:modal.sheetTitleFinancing');
-  // price-evaluation tier — identical derivation to the collapsed card (FinanceCalculator).
-  const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
-  const evalTier = tierIdx >= 0 ? tierIdx : 1;
-  const evalTierLabel = t('autobahn:tier.' + TIER_KEYS[evalTier]);
-  // adjustable only for fin/leasing, and only when the page supplies the change handlers + bounds.
-  const adjustable = mode !== 'cash' && !!onDownChange && downMin != null && downMax != null && termMin != null && termMax != null;
-  // discrete term chip values (supplied periods, else derived from the bounds).
-  const termVals =
-    termOptions && termOptions.length
-      ? termOptions
-      : (() => {
-          const out: number[] = [];
-          for (let v = termMin as number; v <= (termMax as number); v += termStep || 12) out.push(v);
-          return out.length ? out : [term];
-        })();
-  const pct = (n: number) => `${n.toFixed(2).replace('.', ',')} %`;
-  // Only REAL figures (from the financing config). Balloon financing means monthly·term is NOT the
-  // total, so Schlussrate + Gesamtbetrag come from the config and are omitted when unavailable —
-  // never a fabricated/misleading total.
-  const netto = netLoanAmount != null ? netLoanAmount : Math.max(0, price - down);
-  const rows: Array<[string, string]> = [
-    [t('autobahn:modal.vehiclePrice'), `${eur(price)} €`],
-    [isLease ? t('autobahn:modal.leasingAmount') : t('autobahn:modal.netLoanAmount'), `${eur(netto)} €`],
-    [t('autobahn:modal.downPayment'), `${eur(down)} €`],
-    ...(isLease && annualMileage != null ? ([[t('autobahn:modal.annualMileage'), `${eur(annualMileage)} km`]] as Array<[string, string]>) : []),
-    [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
-    ...(nominalRate != null && nominalRate > 0 ? ([[t('autobahn:modal.nominalRate'), pct(nominalRate)]] as Array<[string, string]>) : []),
-    [t('autobahn:modal.effectiveRate'), pct(apr)],
-    ...(finalInstallment != null && finalInstallment > 0 ? ([[t('autobahn:modal.finalInstallment'), `${eur(finalInstallment)} €`]] as Array<[string, string]>) : []),
-    [isLease ? t('autobahn:modal.leasingRate') : t('autobahn:modal.monthlyRate'), t('autobahn:modal.ratePerMonth', { amount: eur(monthly) })],
-    ...(grossAmount != null && grossAmount > 0 ? ([[isLease ? t('autobahn:modal.totalAmount') : t('autobahn:modal.totalRepayment'), `${eur(grossAmount)} €`]] as Array<[string, string]>) : []),
-  ];
-  const breakdownRows = rows.map(([l, v], i) => (
-    <div
-      key={l}
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        gap: 12,
-        padding: '9px 0',
-        borderBottom: i < rows.length - 1 ? '1px solid var(--md-outline-variant)' : 0,
-      }}
-    >
-      <span className="md-label-sm">{l}</span>
-      <span className="num" style={{ fontSize: 13.5, fontWeight: 600 }}>
-        {v}
-      </span>
-    </div>
-  ));
-
-  return (
-    <div className="fin-modal-scrim" onClick={onClose}>
-      <div className="fin-modal" role="dialog" aria-modal="true" aria-label={title} onClick={(e) => e.stopPropagation()}>
-        <div className="fin-modal-head">
-          <h2 className="md-headline-sm hide-mobile" style={{ margin: 0 }}>
-            {title}
-          </h2>
-          <h2 className="md-headline-sm show-mobile" style={{ margin: 0, flexDirection: 'column', alignItems: 'flex-start', gap: 2 }}>
-            {mobileTitle}
-            {vehicleName && (
-              <span className="md-label-sm" style={{ fontWeight: 400 }}>
-                {vehicleName}
-              </span>
-            )}
-          </h2>
-          <button className="icon-btn" onClick={onClose} aria-label={t('autobahn:modal.close')}>
-            <Icon name="x" size={20} />
-          </button>
-        </div>
-        <div className="fin-modal-body">
-          {/* ============================== DESKTOP (≥601px) — unchanged ============================== */}
-          <div className="hide-mobile">
-            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 14 }}>
-              <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
-                {eur(monthly)} €
-              </span>
-              <span className="md-label-sm">{t('autobahn:finance.perMonth')}</span>
-            </div>
-            {/* adjustment sliders — change a value and every figure below recomputes live (via the page) */}
-            {adjustable && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 18 }}>
-                <div>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
-                    <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
-                    <span className="num" style={{ fontWeight: 700 }}>
-                      {eur(down)} €
-                    </span>
-                  </div>
-                  <Slider
-                    min={downMin as number}
-                    max={downMax as number}
-                    step={downStep}
-                    value={down}
-                    onChange={onDownChange as (n: number) => void}
-                    fmt={(v) => `${eur(Number(v))} €`}
-                  />
-                </div>
-                {isLease && annualMileage != null && onAnnualMileageChange && (
-                  <div>
-                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
-                      <span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
-                      <span className="num" style={{ fontWeight: 700 }}>
-                        {eur(annualMileage)} km
-                      </span>
-                    </div>
-                    <Slider
-                      min={annualMileageMin}
-                      max={annualMileageMax}
-                      step={annualMileageStep}
-                      value={annualMileage}
-                      onChange={onAnnualMileageChange}
-                      fmt={(v) => `${eur(Number(v))} km`}
-                    />
-                  </div>
-                )}
-                <div>
-                  <div className="md-title-sm" style={{ marginBottom: 8 }}>
-                    {t('autobahn:finance.termSelection')}
-                  </div>
-                  <TermChips options={termVals} value={term} onChange={onTermChange as (n: number) => void} t={t} />
-                </div>
-              </div>
-            )}
-            {breakdownRows}
-            <p className="md-label-sm" style={{ marginTop: 16, lineHeight: 1.55 }}>
-              {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
-            </p>
-          </div>
-
-          {/* ============================== MOBILE (≤600px) — full "Rate anpassen" sheet ============================== */}
-          <div className="show-mobile" style={{ flexDirection: 'column', gap: 18 }}>
-            {onModeChange && (
-              <div className="fin-tabs" role="tablist">
-                {(
-                  [
-                    ['fin', 'autobahn:finance.mode.financing'],
-                    ['leasing', 'autobahn:finance.mode.leasing'],
-                    // this sheet is mobile-only, so the cash tab is "Kaufen" here (desktop card says "Barzahlung")
-                    ['cash', 'autobahn:card.price.buy'],
-                  ] as Array<[FinanceMode, string]>
-                ).map(([k, labelKey]) => (
-                  <button
-                    key={k}
-                    type="button"
-                    role="tab"
-                    aria-selected={mode === k}
-                    className={'fin-tab' + (mode === k ? ' on' : '')}
-                    onClick={() => onModeChange(k)}
-                  >
-                    {t(labelKey)}
-                  </button>
-                ))}
-              </div>
-            )}
-
-            <div className="fin-price-grid">
-              <div className="fin-rate-main">
-                <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
-                  <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
-                    {isCash ? eur(price) : eur(Math.round(monthly))}
-                  </span>
-                  <span className="md-body-sm" style={{ fontWeight: 600 }}>
-                    {isCash ? '€' : `€ ${t('autobahn:finance.perMonth')}`}
-                  </span>
-                </div>
-              </div>
-              <div>
-                {ratingLabel && (
-                  <span
-                    className="fin-eval-pill"
-                    style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
-                  >
-                    <Icon
-                      name={evalTier <= 1 ? 'check' : evalTier === 2 ? 'minus' : 'trending-up'}
-                      size={14}
-                      stroke={2.6}
-                      color={TIER_COLORS[evalTier]}
-                    />
-                    {evalTierLabel}
-                  </span>
-                )}
-              </div>
-              <div />
-              <div>
-                {ratingLabel && (
-                  <div className="fin-eval-bar">
-                    <div className="fin-eval-thumb" style={{ left: `${(evalTier + 0.5) * 20}%`, borderColor: TIER_COLORS[evalTier] }} />
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {isCash ? (
-              <>
-                <div>
-                  <CalcRow label={t('autobahn:finance.paymentLabel')}>{t('autobahn:finance.paymentValue')}</CalcRow>
-                  <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
-                  <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
-                    {t('autobahn:finance.deliveryValue')}
-                  </CalcRow>
-                </div>
-                {addServicesCost != null && (
-                  <ToggleRow
-                    label={t('autobahn:finance.addServicesToggle')}
-                    price={t('autobahn:finance.addServicesOnce', { value: eur(addServicesCost) })}
-                    checked={!!withAddServices}
-                    disabled={addServicesDisabled}
-                    onChange={(checked) => onToggleAddServices && onToggleAddServices(checked)}
-                  />
-                )}
-                <div style={{ display: 'flex', gap: 10 }}>
-                  <Button variant="filled" size="lg" icon="shield-check" style={{ flex: 1 }} onClick={onSecure}>
-                    {t('autobahn:finance.secureOffer')}
-                  </Button>
-                  {/* padding:0 — mbtn--lg's 30px side padding left no room for the icon at width 52 */}
-                  <Button variant="outlined" size="lg" icon="phone" style={{ width: 52, flex: 'none', padding: 0, borderRadius: 12 }} onClick={onCall} />
-                </div>
-              </>
-            ) : (
-              <>
-                {adjustable && (
-                  <div className="fin-sheet-adjust" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-                    <div>
-                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
-                        <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
-                          {t('autobahn:finance.downPaymentSliderLabel')}
-                          <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
-                        </span>
-                        <span className="num" style={{ fontWeight: 700, color: 'var(--md-primary)' }}>
-                          {eur(down)} €
-                        </span>
-                      </div>
-                      <span className="fin-val-box num">{eur(down)} €</span>
-                      <Slider
-                        min={downMin as number}
-                        max={downMax as number}
-                        step={downStep}
-                        value={down}
-                        onChange={onDownChange as (n: number) => void}
-                        fmt={(v) => `${eur(Number(v))} €`}
-                      />
-                    </div>
-                    {isLease && annualMileage != null && onAnnualMileageChange && (
-                      <div>
-                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
-                          <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
-                            {t('autobahn:finance.annualMileageLabel')}
-                            <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
-                          </span>
-                          <span className="num" style={{ fontWeight: 700, color: 'var(--md-primary)' }}>
-                            {eur(annualMileage)} km
-                          </span>
-                        </div>
-                        <span className="fin-val-box num">{eur(annualMileage)} km</span>
-                        <Slider
-                          min={annualMileageMin}
-                          max={annualMileageMax}
-                          step={annualMileageStep}
-                          value={annualMileage}
-                          onChange={onAnnualMileageChange}
-                          fmt={(v) => `${eur(Number(v))} km`}
-                        />
-                      </div>
-                    )}
-                    <div className="fin-sheet-terms">
-                      <div className="md-title-sm" style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 8 }}>
-                        {t('autobahn:finance.termSelectionMonths')}
-                        <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
-                      </div>
-                      <TermChips options={termVals} value={term} onChange={onTermChange as (n: number) => void} t={t} />
-                    </div>
-                  </div>
-                )}
-
-                {!isLease && onToggleFinalInstallment && (
-                  <ToggleRow
-                    label={t('autobahn:finance.finalInstallmentToggle')}
-                    checked={!!withFinalInstallment}
-                    onChange={onToggleFinalInstallment}
-                  />
-                )}
-                {addServicesCost != null && onToggleAddServices && (
-                  <ToggleRow
-                    label={t('autobahn:finance.addServicesToggle')}
-                    price={t('autobahn:finance.addServicesPerMonth', { value: eur(addServicesCost) })}
-                    checked={!!withAddServices}
-                    disabled={addServicesDisabled}
-                    onChange={onToggleAddServices}
-                  />
-                )}
-
-                <div style={{ display: 'flex', gap: 10 }}>
-                  <Button variant="filled" size="lg" icon="shield-check" style={{ flex: 1 }} onClick={onSecure}>
-                    {t('autobahn:finance.requestRate')}
-                  </Button>
-                  {/* padding:0 — mbtn--lg's 30px side padding left no room for the icon at width 52 */}
-                  <Button variant="outlined" size="lg" icon="phone" style={{ width: 52, flex: 'none', padding: 0, borderRadius: 12 }} onClick={onCall} />
-                </div>
-
-                {/* centered ⓘ details toggle (mockup shows no chevron) */}
-                <button type="button" onClick={() => setShowBreakdown((v) => !v)} style={{ ...expanderBtnStyle, justifyContent: 'center', padding: '2px 0' }}>
-                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
-                    <Icon name="info" size={16} color="var(--md-primary)" />
-                    {isLease ? t('autobahn:modal.leasingDetails') : t('autobahn:modal.financingDetails')}
-                  </span>
-                </button>
-                {showBreakdown && (
-                  <div>
-                    {breakdownRows}
-                    <p className="md-label-sm" style={{ marginTop: 16, lineHeight: 1.55 }}>
-                      {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
-                    </p>
-                  </div>
-                )}
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Customer ratings (auto.de Google reviews) — REAL data, loaded by the page
-// ---------------------------------------------------------------------------
-
-export interface CustomerRatingsProps {
-  /** the loaded reviews (REAL — from the WP json-quotes source). */
-  reviews: VdpReview[];
-  /**
-   * Overall auto.de Google rating to display instead of the average of the few
-   * loaded reviews (which skews to 5,0 — the review feed only carries 5-star
-   * quotes). The page passes the real aggregate (4,6 per Google, review round 9).
-   */
-  average?: number;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/**
- * Customer-rating section (the legacy VDP's "Kundenmeinungen", rebuilt on the
- * Autobahn card). Shows the auto.de average (DERIVED from the loaded reviews — not
- * invented) + a grid of review cards (avatar, name, stars, quote). The reviews are
- * the SAME real source the legacy CustomerQuotes uses (auto.de Google reviews via
- * the WordPress json-quotes feed); the page loads them and passes them in. When no
- * reviews load, the page renders nothing (no fabricated content).
- */
-export const CustomerRatings: React.FunctionComponent<CustomerRatingsProps> = ({ reviews, average, t }) => {
-  const [showAll, setShowAll] = useState(false);
-  if (!reviews || !reviews.length) return null;
-  const count = reviews.length;
-  const avg = average != null ? average : reviews.reduce((s, r) => s + (r.rating || 0), 0) / count;
-  const shown = showAll ? reviews : reviews.slice(0, 4);
-  return (
-    <section className="mcard" id="vdp-bewertungen" style={{ padding: 22, marginTop: 44 }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', marginBottom: 18 }}>
-        <h2 className="md-headline-sm" style={{ margin: 0 }}>
-          {t('autobahn:reviews.title')}
-        </h2>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginLeft: 'auto' }}>
-          <span className="num" style={{ fontWeight: 800, fontSize: 26, color: 'var(--md-on-surface)', letterSpacing: '-.5px' }}>
-            {avg.toLocaleString('de-DE', { minimumFractionDigits: 1, maximumFractionDigits: 1 })}
-          </span>
-          <span>
-            <Stars value={avg} size={16} />
-            <span className="md-label-sm" style={{ display: 'block' }}>
-              {t('autobahn:reviews.ratingCount', { count })} · via Google
-            </span>
-          </span>
-        </div>
-      </div>
-      <div className="eq-cols">
-        {shown.map((r) => (
-          <div
-            key={r.id}
-            className="mcard mcard--filled"
-            style={{ breakInside: 'avoid', marginBottom: 16, padding: 16 }}
-          >
-            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
-              {r.image ? (
-                <img
-                  src={r.image}
-                  alt=""
-                  loading="lazy"
-                  style={{ width: 40, height: 40, borderRadius: '50%', objectFit: 'cover', flex: 'none', background: 'var(--md-sc)' }}
-                />
-              ) : (
-                <span
-                  style={{
-                    width: 40,
-                    height: 40,
-                    borderRadius: '50%',
-                    flex: 'none',
-                    background: 'var(--md-primary-container)',
-                    color: 'var(--md-on-primary-container)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontWeight: 700,
-                  }}
-                >
-                  {(r.name || '?').charAt(0).toUpperCase()}
-                </span>
-              )}
-              <div style={{ minWidth: 0 }}>
-                <div className="md-title-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                  {r.name}
-                </div>
-                <Stars value={r.rating} />
-              </div>
-            </div>
-            <p className="md-body-sm" style={{ margin: 0, color: 'var(--md-on-surface-variant)' }}>
-              {r.review}
-            </p>
-          </div>
-        ))}
-      </div>
-      {reviews.length > 4 && (
-        <button className="mbtn mbtn--text" style={{ marginTop: 4 }} onClick={() => setShowAll((a) => !a)}>
-          {showAll ? t('autobahn:ratings.showLess') : t('autobahn:ratings.showMore', { count })}
-          <Icon name={showAll ? 'chevron-up' : 'chevron-down'} size={16} />
-        </button>
-      )}
-    </section>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Enquiry block — low-friction "Frage zum Fahrzeug" lead form
-// ---------------------------------------------------------------------------
-
-export interface VdpEnquiryProps {
-  /** car title for the prefilled message + heading context. */
-  carTitle: string;
-  /** auto.de-ID reference, woven into the prefilled message when present. */
-  autoDeId?: string;
-  /** sales hotline shown in the aside (tap-to-call). */
-  salesPhone?: string;
-  /**
-   * Submit handler — the page wires this to the REAL contact channel
-   * (carStore.submitContactForm). Returns a promise; the form shows a thank-you on
-   * resolve and an inline error on reject.
-   */
-  onSubmit: (data: { name: string; email: string; phone: string; message: string }) => Promise<void> | void;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-const enquiryInput: React.CSSProperties = {
-  width: '100%',
-  height: 46,
-  padding: '0 14px',
-  borderRadius: 'var(--md-r-sm)',
-  border: '1px solid var(--md-outline-variant)',
-  background: 'var(--md-sc-lowest)',
-  color: 'var(--md-on-surface)',
-  font: 'inherit',
-  fontSize: 14,
-};
-
-/** outlined field with the label floating ON the top border (Figma phone/message fields). */
-const FloatField: React.FunctionComponent<{
-  label: string;
-  children: React.ReactNode;
-}> = ({ label, children }) => (
-  <label className="enq-float">
-    <span className="enq-float-label">{label}</span>
-    {children}
-  </label>
-);
-
-/** [icon, i18n label key] — resolved against the drilled t in the component. */
-const ENQUIRY_BENEFITS: ReadonlyArray<[string, string]> = [
-  ['clock', 'autobahn:enquiry.benefits.fastResponse'],
-  ['shield-check', 'autobahn:enquiry.benefits.freeAndNonBinding'],
-  ['hand-coins', 'autobahn:enquiry.benefits.financingAdvice'],
-];
-
-/**
- * Vehicle enquiry — an enriched two-pane lead block: a left trust/benefits aside (persönliche
- * Beratung, response time, hotline) and a right structured form (preferred-contact toggle, named
- * fields, editable prefilled message), wired to the REAL submit (carStore.submitContactForm).
- */
-export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
-  carTitle,
-  autoDeId,
-  salesPhone = '0800 40 30 182',
-  onSubmit,
-  t,
-}) => {
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-  const [email, setEmail] = useState('');
-  const [areaCode, setAreaCode] = useState('');
-  const [phoneNum, setPhoneNum] = useState('');
-  const [consent, setConsent] = useState(false);
-  const [pref, setPref] = useState<'email' | 'phone'>('email');
-  const [message, setMessage] = useState(
-    autoDeId
-      ? t('autobahn:enquiry.prefilledMessageWithId', { carTitle, autoDeId })
-      : t('autobahn:enquiry.prefilledMessage', { carTitle })
-  );
-  const [sending, setSending] = useState(false);
-  const [sent, setSent] = useState(false);
-  const [error, setError] = useState('');
-
-  const emailOk = /.+@.+\..+/.test(email);
-  const phoneDigits = (areaCode + phoneNum).replace(/\D/g, '');
-  const phoneOk = phoneDigits.length >= 6;
-  // Figma round 9: Vorname/Nachname/E-Mail are always required (*), phone additionally
-  // when it's the preferred channel; the consent checkbox gates the send.
-  const valid =
-    firstName.trim().length > 0 &&
-    lastName.trim().length > 0 &&
-    emailOk &&
-    consent &&
-    (pref !== 'phone' || phoneOk);
-
-  const submit = async (): Promise<void> => {
-    if (!valid || sending) return;
-    setSending(true);
-    setError('');
-    const note = t('autobahn:enquiry.preferredContact', {
-      channel: pref === 'email' ? t('autobahn:enquiry.contactMethod.email') : t('autobahn:enquiry.contactMethod.phone'),
-    });
-    const phone = phoneDigits ? `+49 ${areaCode.trim()} ${phoneNum.trim()}`.replace(/\s+/g, ' ').trim() : '';
-    try {
-      await onSubmit({
-        name: `${firstName.trim()} ${lastName.trim()}`,
-        email: email.trim(),
-        phone,
-        message: message.trim() + note,
-      });
-      setSent(true);
-    } catch (e) {
-      setError(t('autobahn:enquiry.form.sendError'));
-    } finally {
-      setSending(false);
-    }
-  };
-
-  if (sent) {
-    return (
-      <section className="mcard mcard--filled" id="vdp-kontakt" style={{ padding: 22, marginTop: 24 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-          <Icon name="check-circle" size={24} color="var(--md-good)" />
-          <div>
-            <div className="md-title-sm">{t('autobahn:enquiry.success.title')}</div>
-            <div className="md-body-sm">{t('autobahn:enquiry.success.message')}</div>
-          </div>
-        </div>
-      </section>
-    );
-  }
-
-  return (
-    <section className="mcard" id="vdp-kontakt" style={{ padding: 0, overflow: 'hidden', marginTop: 24 }}>
-      <div className="enquiry-grid">
-        {/* trust / benefits aside */}
-        <aside className="enquiry-aside">
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
-            <span className="enquiry-ico">
-              <Icon name="headset" size={20} color="var(--md-on-primary-container)" />
-            </span>
-            <h2 className="md-title" style={{ margin: 0, fontSize: 19 }}>
-              {t('autobahn:enquiry.personalConsultation')}
-            </h2>
-          </div>
-          <p className="md-body-sm" style={{ marginBottom: 16 }}>
-            {t('autobahn:enquiry.aside.description')}
-          </p>
-          <ul className="enquiry-benefits">
-            {ENQUIRY_BENEFITS.map(([ic, key]) => (
-              <li key={key}>
-                <Icon name={ic} size={17} color="var(--md-primary)" stroke={2} />
-                {t(key)}
-              </li>
-            ))}
-          </ul>
-          <a className="enquiry-phone" href={`tel:${salesPhone.replace(/\s/g, '')}`}>
-            <Icon name="phone" size={16} />
-            {salesPhone}
-          </a>
-        </aside>
-
-        {/* form */}
-        <div className="enquiry-form">
-          <div style={{ marginBottom: 14 }}>
-            <div className="md-label-sm" style={{ fontWeight: 600, marginBottom: 7 }}>
-              {t('autobahn:enquiry.contactMethod.heading')}
-            </div>
-            <div style={{ display: 'flex', gap: 8 }}>
-              <button
-                type="button"
-                className={'chip' + (pref === 'email' ? ' chip--filter chip--selected' : '')}
-                onClick={() => setPref('email')}
-              >
-                <Icon name="mail" size={15} />
-                {t('autobahn:enquiry.contactMethod.email')}
-              </button>
-              <button
-                type="button"
-                className={'chip' + (pref === 'phone' ? ' chip--filter chip--selected' : '')}
-                onClick={() => setPref('phone')}
-              >
-                <Icon name="phone" size={15} />
-                {t('autobahn:enquiry.contactMethod.phone')}
-              </button>
-            </div>
-          </div>
-          {/* Vorname* / Nachname* — two required fields SIDE BY SIDE (Figma round 9; fixed
-              2-col — auto-fit collapsed to one column at 390px, mockup keeps them paired) */}
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 }}>
-            <input
-              style={enquiryInput}
-              placeholder={t('autobahn:enquiry.form.firstNamePlaceholder')}
-              value={firstName}
-              onChange={(e) => setFirstName(e.target.value)}
-              aria-label={t('autobahn:enquiry.form.firstNameAria')}
-            />
-            <input
-              style={enquiryInput}
-              placeholder={t('autobahn:enquiry.form.lastNamePlaceholder')}
-              value={lastName}
-              onChange={(e) => setLastName(e.target.value)}
-              aria-label={t('autobahn:enquiry.form.lastNameAria')}
-            />
-          </div>
-          <div style={{ marginTop: 12 }}>
-            <input
-              style={enquiryInput}
-              type="email"
-              placeholder={t('autobahn:enquiry.form.emailPlaceholder')}
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              aria-label={t('autobahn:enquiry.contactMethod.email')}
-            />
-          </div>
-          {/* Land (+49 fixed) · Vorwahl · Telefonnummer — outlined float-label row (Figma) */}
-          <div className="enq-phone-row" style={{ marginTop: 16 }}>
-            <FloatField label={t('autobahn:enquiry.form.countryLabel')}>
-              <span className="enq-country num">
-                +49
-                <Icon name="chevron-down" size={14} color="var(--md-on-surface-variant)" />
-              </span>
-            </FloatField>
-            <FloatField label={t('autobahn:enquiry.form.areaCodeLabel')}>
-              <input
-                type="tel"
-                value={areaCode}
-                onChange={(e) => setAreaCode(e.target.value)}
-                aria-label={t('autobahn:enquiry.form.areaCodeLabel')}
-              />
-            </FloatField>
-            <FloatField label={t('autobahn:enquiry.form.phoneNumberLabel')}>
-              <input
-                type="tel"
-                value={phoneNum}
-                onChange={(e) => setPhoneNum(e.target.value)}
-                aria-label={t('autobahn:enquiry.form.phoneNumberLabel')}
-              />
-            </FloatField>
-          </div>
-          <div style={{ marginTop: 16 }}>
-            <FloatField label={t('autobahn:enquiry.form.messageLabel')}>
-              <textarea
-                value={message}
-                onChange={(e) => setMessage(e.target.value)}
-                aria-label={t('autobahn:enquiry.form.messageAria')}
-              />
-            </FloatField>
-          </div>
-          {/* Nutzungsbedingungen sentence + revocable-consent checkbox (Figma round 9) */}
-          <p className="md-body-sm" style={{ margin: '14px 0 0' }}>
-            {t('autobahn:enquiry.form.termsPrefix')}{' '}
-            <a href="/nutzungsbedingungen/" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit' }}>
-              {t('autobahn:enquiry.form.termsLink')}
-            </a>{' '}
-            {t('autobahn:enquiry.form.termsSuffix')}
-          </p>
-          <label className="enq-consent">
-            <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} />
-            <span>
-              {t('autobahn:enquiry.form.consentPart1')}{' '}
-              <a href="/datenschutz/" target="_blank" rel="noopener noreferrer">
-                {t('autobahn:enquiry.form.consentLinkHere')}
-              </a>{' '}
-              {t('autobahn:enquiry.form.consentPart2')}{' '}
-              <a href="/datenschutz/" target="_blank" rel="noopener noreferrer">
-                {t('autobahn:enquiry.form.consentLinkPrivacy')}
-              </a>
-              {t('autobahn:enquiry.form.consentPart3')}
-            </span>
-          </label>
-          {error && (
-            <div className="md-label-sm" style={{ color: 'var(--md-error)', marginTop: 8 }}>
-              {error}
-            </div>
-          )}
-          <div style={{ marginTop: 16 }}>
-            <Button variant="filled" block size="lg" icon="send" disabled={!valid || sending} onClick={submit}>
-              {sending ? t('autobahn:enquiry.form.sending') : t('autobahn:enquiry.sendButton')}
-            </Button>
-            <span
-              className="md-label-sm"
-              style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, marginTop: 10, color: 'var(--md-good)' }}
-            >
-              <Icon name="lock" size={13} color="var(--md-good)" />
-              {t('autobahn:enquiry.security')}
-            </span>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// "So einfach geht's" steps
-// ---------------------------------------------------------------------------
-
-/** [title, description]. */
-export type HowItWorksStep = readonly [title: string, desc: string];
-
-export interface HowItWorksProps {
-  /** the numbered steps; defaults to the design's four-step flow. */
-  steps?: ReadonlyArray<HowItWorksStep>;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/** Lucide icon per step index: Angebot / Beratung / Bezahlung / Übergabe. */
-const STEP_ICONS = ['bookmark', 'message-circle', 'credit-card', 'truck'] as const;
-
-/** the design's four-step flow — [title key, description key]. */
-const DEFAULT_STEPS: ReadonlyArray<HowItWorksStep> = [
-  ['autobahn:steps.step1.title', 'autobahn:steps.step1.description'],
-  ['autobahn:steps.step2.title', 'autobahn:steps.step2.description'],
-  ['autobahn:steps.step3.title', 'autobahn:steps.step3.description'],
-  ['autobahn:steps.step4.title', 'autobahn:steps.step4.description'],
-];
-
-/** "So einfach geht's" — icon-step cards with connector line (professional redesign). */
-export const HowItWorks: React.FunctionComponent<HowItWorksProps> = ({ steps, t }) => {
-  const items: ReadonlyArray<HowItWorksStep> =
-    steps ?? DEFAULT_STEPS.map(([titleKey, descKey]) => [t(titleKey), t(descKey)] as HowItWorksStep);
-  return (
-    <section className="hiw-section" style={{ marginTop: 44 }}>
-      {/* alignment is breakpoint-owned: centered on desktop, left on the mobile card (CSS) */}
-      <h2 className="md-headline-sm hiw-heading" style={{ marginBottom: 28 }}>
-        {t('autobahn:howItWorks.title')}
-      </h2>
-      <div className="steps-4 hiw-grid">
-        {items.map(([title, desc], i) => (
-          <div key={title} className="hiw-step">
-            <div className="hiw-icon-wrap">
-              <Icon name={STEP_ICONS[i] || 'star'} size={24} color="#fff" stroke={1.8} />
-              <span className="hiw-num">{i + 1}</span>
-            </div>
-            <div className="hiw-title">{title}</div>
-            <p className="hiw-desc">{desc}</p>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-};
+// Autobahn (auto.de redesign) — Vehicle-Detail (VDP) presentational modules.
+//
+// Typed React 18 + TS port of the remaining VDP pieces from the design kit
+// (docs/redesign/design-source/ui_kits/website/CdpModules.jsx + ScreenVDP.jsx).
+// Each is a pure / presentational ES named export with an explicit props
+// interface; none touches a store, the API or `window`. The page wiring that
+// feeds these from the real stores is a SEPARATE later step (W3b).
+//
+// Replaces the design kit's globals:
+//   - `window.CO2_CLASSES` / `window.CO2_COLORS`        → ../constants
+//   - `equipFor(id)` / `car.priceHistory` / market band → typed props on VehicleDetail
+//   - `assetUrl(...)`                                    → pre-resolved image URLs (caller's job)
+//   - `data-lucide` icons                               → the ui kit's <Icon />
+// The DealerBlock from CdpModules is intentionally NOT ported (auto.de is the
+// seller, not a dealer marketplace).
+//
+// NEEDS-DATA discipline (the point of the ticket): wherever the design showed a
+// figure we have no real source for, these render the NEEDS_DATA_LABEL
+// ('Daten folgt') marker rather than inventing a value — see PriceHistory (whole
+// card) and its market band.
+//
+// All components render correctly only inside a `<div className="md3">` subtree.
+
+import React, { useState } from 'react';
+import { TranslationFunction } from '../types';
+
+import { Button, Icon, Spec, StatChip, Stars, Switch } from '../ui';
+import { CO2_CLASSES, CO2_COLORS, TIER_LABELS, TIER_KEYS, TIER_COLORS } from '../constants';
+import { defaultVdpSpecs, EquipmentGroups, VehicleDetail, VdpSpec, VdpReview } from './types';
+import { CalcRow, expanderBtnStyle, FinanceMode, Slider, TermChips } from './FinanceCalculator';
+
+const eur = (n: number): string => n.toLocaleString('de-DE');
+
+/** mileage → 'X.XXX km' (de-DE grouping). */
+function fmtKm(n: number): string {
+  return `${n.toLocaleString('de-DE')} km`;
+}
+
+/** strip a trailing parenthetical, e.g. '110 kW (150 PS)' → '110 kW'. */
+function stripParen(s: string): string {
+  return s.replace(/\s*\(.*\)/, '');
+}
+
+// ---------------------------------------------------------------------------
+// Header card — title, fact line, highlight chips, condition tiles
+// ---------------------------------------------------------------------------
+
+export interface VdpHeaderCardProps {
+  vehicle: VehicleDetail;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** headline + trim/power + rating pill, then the dot-separated fact line — the vehicle's
+ *  identity block. Split out so the mobile-only layout can show this BEFORE the finance
+ *  card (see VdpTrustRow) while the highlights/condition tiles move after it. */
+export const VdpHeaderSummary: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => {
+  const factLine: ReadonlyArray<readonly [string, string]> = [
+    ['gauge', fmtKm(vehicle.km)],
+    ['calendar', vehicle.reg],
+    ['cog', vehicle.gear],
+    ['fuel', stripParen(vehicle.fuel)],
+    ['user', t('autobahn:header.owners', { owners: vehicle.owners, count: vehicle.owners })],
+    // body type closes the fact grid (mockup: km|EZ / Getriebe|Kraftstoff / Hand|Karosserie);
+    // the compact phone dot-line hides everything from "Hand" on via CSS (nth-child(n+5)).
+    ...(vehicle.body ? ([['car-front', vehicle.body]] as const) : []),
+  ];
+  return (
+    <>
+      <div className="vdp-headrow">
+        <div style={{ minWidth: 0 }}>
+          <h1 className="md-headline" style={{ margin: '0 0 4px' }}>
+            {vehicle.make} {vehicle.model}
+          </h1>
+          <p className="md-body vdp-trim" style={{ margin: 0, fontSize: 15 }}>
+            {vehicle.trim} · {vehicle.power}
+          </p>
+          {/* auto.de-ID lives in the offer card (next to Finanzierungsdetails), not here */}
+        </div>
+        {/* BL-08: no chip at all when there's no real rating (empty/broken price) — never a
+            fabricated "Top Preis"-shaped badge for `rating === ''`. */}
+        {vehicle.rating && (
+          <StatChip
+            tone={vehicle.rating === 'fair' ? 'warn' : 'good'}
+            icon={vehicle.rating === 'fair' ? 'minus' : 'check'}
+          >
+            {t('autobahn:tier.' + vehicle.rating)}
+          </StatChip>
+        )}
+      </div>
+
+      {/* fact line — plain text with dot separators, not pills */}
+      <div className="vdp-meta">
+        {factLine.map(([ic, v]) => (
+          <span key={ic}>
+            <Icon name={ic} size={16} color="var(--md-on-surface-variant)" stroke={1.8} />
+            {v}
+          </span>
+        ))}
+      </div>
+    </>
+  );
+};
+
+/** hand-picked highlights — the accent rows of the header. ALL highlights are shown
+ *  (review round 9: "all highlights shown", no 6-chip cap); the Figma pill colors live
+ *  on .vdp-highlights .chip in the theme. */
+export const VdpHeaderHighlights: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle }) => (
+  <div className="vdp-highlights" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8 }}>
+    {vehicle.highlights.map((f) => (
+      <span key={f} className="chip chip--filter chip--selected" style={{ cursor: 'default' }}>
+        <Icon name="check" size={14} stroke={2.4} />
+        {f}
+      </span>
+    ))}
+  </div>
+);
+
+/** condition (zustand) tiles — TÜV/Unfallfrei/Scheckheft/Garantie. */
+export const VdpHeaderCondition: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => {
+  const { condition } = vehicle;
+  // condition.hu === 'Neu' compares the RAW backend data value, not a display string — left as-is.
+  const tiles: ReadonlyArray<readonly [string, string, string]> = [
+    ['wrench', t('autobahn:header.huLabel'), condition.hu === 'Neu' ? t('autobahn:header.huNew') : t('autobahn:header.huUntil', { date: condition.hu })],
+    ['shield-check', t('autobahn:header.accidentFree'), condition.unfallfrei ? t('autobahn:header.yes') : t('autobahn:header.no')],
+    ['clipboard-check', t('autobahn:header.serviceHistory'), condition.scheckheft ? t('autobahn:header.yes') : t('autobahn:header.no')],
+    ['award', t('autobahn:header.warranty'), condition.garantie],
+  ];
+  return (
+    <div className="zustand-grid">
+      {tiles.map(([ic, l, v]) => (
+        <div key={l} className="zustand-tile">
+          <Icon name={ic} size={19} color="var(--md-primary)" stroke={1.9} style={{ flex: 'none' }} />
+          <span style={{ minWidth: 0 }}>
+            <span
+              className="md-label-sm"
+              style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
+            >
+              {l}
+            </span>
+            <span className="md-title-sm" style={{ display: 'block' }}>
+              {v}
+            </span>
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+/**
+ * One container holding the entire vehicle identity: headline + trim/power, the
+ * dot-separated fact line, the hand-picked highlight chips, and the condition
+ * (zustand) tiles footer. The gallery itself is composed by the page (W3b) — this
+ * is just the textual header card that sits beneath it. Desktop-only usage (mobile
+ * splits these 3 pieces across the "before/after finance card" layout — see the page).
+ */
+export const VdpHeaderCard: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => (
+  <div className="mcard" style={{ marginTop: 16, padding: '22px 24px 18px' }}>
+    <VdpHeaderSummary vehicle={vehicle} t={t} />
+    <div style={{ marginTop: 14 }}>
+      <VdpHeaderHighlights vehicle={vehicle} t={t} />
+    </div>
+    <VdpHeaderCondition vehicle={vehicle} t={t} />
+  </div>
+);
+
+export interface VdpTrustRowProps {
+  /** maps to carStore.isAvailable / state.isOnline — "Sofort verfügbar". */
+  available: boolean;
+  /** real totalCarImpCount from /service/user-actions/api/v1/stats/viewers — omit while loading. */
+  viewCount?: number;
+  /** real totalFavCount from the same endpoint — omit while loading. */
+  favCount?: number;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** mobile-only trust-signal row shown between the identity block and the finance card:
+ *  availability · view count · favorite count · "Geprüft" (every auto.de listing is
+ *  130-point inspected, so this one is always shown, not conditional real data). */
+export const VdpTrustRow: React.FunctionComponent<VdpTrustRowProps> = ({ available, viewCount, favCount, t }) => (
+  // one swipeable line (mockup), never a ragged second row
+  <div style={{ display: 'flex', flexWrap: 'nowrap', overflowX: 'auto', scrollbarWidth: 'none', alignItems: 'center', gap: 5, marginTop: 10 }}>
+    {available && (
+      <span className="vdp-trust-chip">
+        <Icon name="check" size={13} stroke={2.4} color="var(--md-good)" />
+        {t('autobahn:availability.immediately')}
+      </span>
+    )}
+    {viewCount != null && (
+      <span className="vdp-trust-chip">
+        <Icon name="eye" size={13} />
+        {t('autobahn:card.activity.viewsCount', { count: viewCount })}
+      </span>
+    )}
+    {favCount != null && (
+      <span className="vdp-trust-chip">
+        <Icon name="heart" size={13} />
+        {t('autobahn:card.activity.favoritesCount', { count: favCount })}
+      </span>
+    )}
+    <span className="vdp-trust-chip">
+      <Icon name="shield-check" size={13} />
+      {t('autobahn:card.trust.checked')}
+    </span>
+  </div>
+);
+
+// ---------------------------------------------------------------------------
+// Fahrzeugdaten spec table (mobile clamp + "Mehr anzeigen")
+// ---------------------------------------------------------------------------
+
+export interface VdpSpecTableProps {
+  vehicle: VehicleDetail;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/**
+ * Fahrzeugdaten grid of Spec items. Uses the vehicle's explicit `specs` when
+ * present, else derives the design's twelve-row layout via `defaultVdpSpecs`. On
+ * phones the table clamps to a few rows (`vdp-specs--clamp`) with a "Mehr
+ * anzeigen" toggle (pure view state).
+ */
+export const VdpSpecTable: React.FunctionComponent<VdpSpecTableProps> = ({ vehicle, t }) => {
+  const [allSpecs, setAllSpecs] = useState(false);
+  const specs: VdpSpec[] = vehicle.specs && vehicle.specs.length ? vehicle.specs : defaultVdpSpecs(vehicle);
+  return (
+    <div className="mcard" id="vdp-daten" style={{ padding: 22 }}>
+      <h2 className="md-headline-sm" style={{ marginBottom: 16 }}>
+        {t('autobahn:specTable.title')}
+      </h2>
+      <div className={'vdp-specs' + (allSpecs ? '' : ' vdp-specs--clamp')}>
+        {specs.map(([ic, l, v]) => (
+          <Spec key={l} icon={ic} label={l}>
+            {v}
+          </Spec>
+        ))}
+      </div>
+      {/* phone only: clamp button only meaningful when there are more than 6 specs */}
+      {specs.length > 6 && (
+        <button
+          className="mbtn mbtn--text show-mobile"
+          style={{ marginTop: 12, padding: 0 }}
+          onClick={() => setAllSpecs((a) => !a)}
+        >
+          {allSpecs ? t('autobahn:vdp.specs.showLess') : t('autobahn:specTable.showAll', { count: specs.length })}
+          <Icon name={allSpecs ? 'chevron-up' : 'chevron-down'} size={16} />
+        </button>
+      )}
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Equipment list (grouped + searchable)
+// ---------------------------------------------------------------------------
+
+export interface EquipmentListProps {
+  /** grouped equipment, e.g. { Komfort: [...], Sicherheit: [...] }. */
+  groups: EquipmentGroups;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** Grouped + searchable equipment list (Autohero / AutoScout pattern). */
+export const EquipmentList: React.FunctionComponent<EquipmentListProps> = ({ groups, t }) => {
+  const [q, setQ] = useState('');
+  const [openAll, setOpenAll] = useState(false);
+  const ql = q.trim().toLowerCase();
+  const entries = Object.entries(groups)
+    .map(([g, items]): [string, string[]] => [g, items.filter((it) => !ql || it.toLowerCase().includes(ql))])
+    .filter(([, items]) => items.length);
+  const total = Object.values(groups).reduce((s, a) => s + a.length, 0);
+  return (
+    <div className="mcard" id="vdp-ausstattung" style={{ padding: 22 }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 12,
+          marginBottom: 14,
+          flexWrap: 'wrap',
+        }}
+      >
+        <h2 className="md-headline-sm">
+          {t('autobahn:equipment.title')}{' '}
+          <span style={{ color: 'var(--md-on-surface-variant)', fontWeight: 600 }}>({total})</span>
+        </h2>
+        <label className="mfield" style={{ height: 40, maxWidth: 240, flex: 1, minWidth: 170 }}>
+          <Icon name="search" size={18} />
+          <input placeholder={t('autobahn:equipment.search.placeholder')} value={q} onChange={(e) => setQ(e.target.value)} />
+          {q && (
+            <button className="icon-btn" style={{ width: 28, height: 28 }} onClick={() => setQ('')}>
+              <Icon name="x" size={15} />
+            </button>
+          )}
+        </label>
+      </div>
+      <div className="eq-cols">
+        {entries.map(([g, items]) => (
+          <div key={g} style={{ breakInside: 'avoid', marginBottom: 18 }}>
+            <div className="md-title-sm" style={{ color: 'var(--md-link)', marginBottom: 8 }}>
+              {g}
+            </div>
+            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 7 }}>
+              {(openAll || ql ? items : items.slice(0, 4)).map((it) => (
+                <li
+                  key={it}
+                  style={{
+                    display: 'flex',
+                    gap: 9,
+                    alignItems: 'flex-start',
+                    fontSize: 13.5,
+                    color: 'var(--md-on-surface-variant)',
+                  }}
+                >
+                  <Icon name="check" size={16} color="var(--md-good)" stroke={2.4} style={{ flex: 'none', marginTop: 1 }} />
+                  {it}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+      {!ql && !openAll && (
+        <button className="mbtn mbtn--text" style={{ marginTop: 4 }} onClick={() => setOpenAll(true)}>
+          {t('autobahn:equipment.showAll', { total })}
+          <Icon name="chevron-down" size={16} />
+        </button>
+      )}
+      {entries.length === 0 && <p className="md-body-sm">{t('autobahn:equipment.noResults', { q })}</p>}
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// CO₂ / energy-efficiency label
+// ---------------------------------------------------------------------------
+
+export interface Co2LabelProps {
+  vehicle: VehicleDetail;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** CO₂ / energy-efficiency label (EU-style stepped colour band, Figma pastel scale).
+ *  Handles PHEV with BOTH class markers (gew. komb. + entladen komb.) on the scale. */
+export const Co2Label: React.FunctionComponent<Co2LabelProps> = ({ vehicle, t }) => {
+  const p = vehicle.phev;
+  const idx = Math.max(0, CO2_CLASSES.indexOf((p ? p.co2classW : vehicle.co2class) as (typeof CO2_CLASSES)[number]));
+  // discharged-class marker (PHEV only); -1 when absent or same as the weighted class.
+  const idxD = p ? CO2_CLASSES.indexOf(p.co2classD as (typeof CO2_CLASSES)[number]) : -1;
+  const hasMarks = !!p && (idx >= 0 || idxD >= 0);
+  const stats: ReadonlyArray<readonly [string, string]> = p
+    ? [
+        [t('autobahn:eco.stat.powerConsumptionWeighted'), p.consEl],
+        [t('autobahn:eco.stat.fuelConsumptionWeighted'), p.consFuel],
+        [t('autobahn:eco.stat.fuelConsumptionDischarged'), p.consDis],
+        [t('autobahn:eco.stat.co2WeightedCombined'), p.co2w],
+      ]
+    : [
+        [t('autobahn:eco.stat.consumptionCombined'), vehicle.cons],
+        [t('autobahn:eco.stat.co2Emissions'), vehicle.co2],
+        [t('autobahn:eco.stat.co2Class'), vehicle.co2class],
+      ];
+  return (
+    <div className="mcard" style={{ padding: 22 }}>
+      <h2 className="md-headline-sm" style={{ marginBottom: 14 }}>
+        {t('autobahn:eco.heading')}
+      </h2>
+      <div className="co2-stats">
+        {stats.map(([l, v]) => (
+          <div key={l}>
+            <div className="md-label-sm">{l}</div>
+            <div className="md-title-sm" style={{ fontSize: 16 }}>
+              {v}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="co2-scale">
+        {CO2_CLASSES.map((c, i) => (
+          <div key={c} className="co2-col">
+            {/* PHEV: tiny class markers above the weighted + discharged segments (mockup) */}
+            {hasMarks && (
+              <span className="co2-mark">
+                {i === idx
+                  ? t('autobahn:eco.weightedShort')
+                  : i === idxD && idxD !== idx
+                    ? t('autobahn:eco.dischargedShort')
+                    : ' '}
+              </span>
+            )}
+            <div
+              className={
+                'co2-seg' +
+                (i === idx ? ' co2-seg--on' : '') +
+                (i === idxD && idxD !== idx ? ' co2-seg--on2' : '')
+              }
+              style={{ ['--seg' as string]: CO2_COLORS[i] } as React.CSSProperties}
+            >
+              {c}
+            </div>
+          </div>
+        ))}
+      </div>
+      {p ? (
+        <p className="md-label-sm" style={{ margin: '10px 0 0' }}>
+          {t('autobahn:eco.co2ClassPrefix')} <b style={{ color: 'var(--md-on-surface)' }}>{p.co2classW}</b>{' '}
+          {t('autobahn:eco.weightedCombined')} · <b style={{ color: 'var(--md-on-surface)' }}>{p.co2classD}</b>{' '}
+          {t('autobahn:eco.dischargedCombined')} · {t('autobahn:eco.energyClassWltpSuffix')}
+        </p>
+      ) : (
+        <p className="md-label-sm" style={{ margin: '10px 0 0' }}>
+          {t('autobahn:eco.energyClass')}
+        </p>
+      )}
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Free-text vehicle description (Fahrzeugbeschreibung)
+// ---------------------------------------------------------------------------
+
+export interface VehicleDescriptionProps {
+  vehicle: VehicleDetail;
+  /**
+   * Pre-composed description text. When omitted a sensible default is built from
+   * the vehicle's typed fields (matching the design's template sentence).
+   */
+  text?: string;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+function defaultDescription(v: VehicleDetail, t: TranslationFunction): string {
+  return t('autobahn:description.defaultBody', {
+    make: v.make,
+    model: v.model,
+    trim: v.trim,
+    power: v.power,
+    gear: v.gear,
+    owners: v.owners,
+    reg: v.reg,
+    km: v.km.toLocaleString('de-DE'),
+    color: v.color,
+  });
+}
+
+/** Free-text vehicle description with a "Mehr anzeigen" clamp (pure view state). */
+export const VehicleDescription: React.FunctionComponent<VehicleDescriptionProps> = ({ vehicle, text, t }) => {
+  const [open, setOpen] = useState(false);
+  const body = text ?? defaultDescription(vehicle, t);
+  return (
+    <div className="mcard" style={{ padding: 22 }}>
+      <h2 className="md-headline-sm" style={{ marginBottom: 12 }}>
+        {t('autobahn:description.heading')}
+      </h2>
+      <p
+        className="md-body"
+        style={{ margin: 0, maxHeight: open ? 'none' : 96, overflow: 'hidden', position: 'relative' }}
+      >
+        {body}
+      </p>
+      <button className="mbtn mbtn--text" style={{ marginTop: 8, padding: 0 }} onClick={() => setOpen((o) => !o)}>
+        {open ? t('autobahn:description.showLess') : t('autobahn:description.showMore')}
+        <Icon name={open ? 'chevron-up' : 'chevron-down'} size={16} />
+      </button>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Trust strip
+// ---------------------------------------------------------------------------
+
+/** [kebab-case lucide icon, label, optional subline (mobile Figma tiles)]. */
+export type TrustItem = readonly [icon: string, label: string, sub?: string];
+
+export interface TrustStripProps {
+  /** trust badges; defaults to auto.de's four standard promises. */
+  items?: ReadonlyArray<TrustItem>;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** auto.de's four standard promises — [icon, i18n label key, i18n subline key]. */
+const DEFAULT_TRUST: ReadonlyArray<readonly [string, string, string]> = [
+  ['shield-check', 'autobahn:trust.warranty', 'autobahn:trust.warrantySub'],
+  ['undo-2', 'autobahn:trust.return', 'autobahn:trust.returnSub'],
+  ['truck', 'autobahn:trust.delivery', 'autobahn:trust.deliverySub'],
+  ['badge-check', 'autobahn:trust.inspection', 'autobahn:trust.inspectionSub'],
+];
+
+/** Trust-signal strip: quiet one-liner on desktop, Figma 2×2 tile card on mobile
+ *  (the .trust-sub sublines only surface in the mobile tile layout via CSS). */
+export const TrustStrip: React.FunctionComponent<TrustStripProps> = ({ items, t }) => (
+  <div className="trust-strip">
+    {(items ?? DEFAULT_TRUST.map(([ic, key, subKey]) => [ic, t(key), t(subKey)] as TrustItem)).map(([ic, label, sub]) => (
+      <div key={label}>
+        <Icon name={ic} size={17} color="var(--md-primary)" stroke={2} style={{ flex: 'none' }} />
+        <span style={{ minWidth: 0 }}>
+          {label}
+          {sub && <span className="trust-sub">{sub}</span>}
+        </span>
+      </div>
+    ))}
+  </div>
+);
+
+// ---------------------------------------------------------------------------
+// Price history + market band (NEEDS-DATA by default)
+// ---------------------------------------------------------------------------
+
+export interface PriceHistoryProps {
+  vehicle: VehicleDetail;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/**
+ * Price-history sparkline + market-value position bar.
+ *
+ * NEEDS-DATA: the sparkline needs `priceHistory` (with at least two points) and
+ * the position bar needs the full market band (`marketLow` / `marketAvg` /
+ * `marketHigh`). Either section that lacks real data renders the
+ * NEEDS_DATA_LABEL ('Daten folgt') marker — we never draw a fake trend or
+ * position. Both are needs-data by default, so until W3b supplies them this card
+ * shows the markers.
+ */
+export const PriceHistory: React.FunctionComponent<PriceHistoryProps> = ({ vehicle, t }) => {
+  const pts = vehicle.priceHistory;
+  const hasHistory = !!pts && pts.length >= 2;
+  const hasMarket =
+    vehicle.marketLow != null &&
+    vehicle.marketAvg != null &&
+    vehicle.marketHigh != null &&
+    vehicle.marketHigh > vehicle.marketLow;
+
+  // Nothing real to show yet — hide the whole card instead of rendering stubs.
+  if (!hasHistory && !hasMarket) return null;
+
+  // --- history sparkline (only when real points exist) ---
+  let historyBlock: React.ReactNode;
+  if (hasHistory) {
+    const prices = pts!.map((p) => p.price);
+    const lo = Math.min(...prices);
+    const hi = Math.max(...prices);
+    const W = 280;
+    const H = 70;
+    const x = (i: number) => (i / (pts!.length - 1)) * W;
+    const y = (p: number) => H - ((p - lo) / (hi - lo || 1)) * H;
+    const last = pts![pts!.length - 1];
+    const line = pts!.map((p, i) => `${i === 0 ? 'M' : 'L'} ${x(i).toFixed(1)} ${y(p.price).toFixed(1)}`).join(' ');
+    const area = `${line} L ${W} ${H} L 0 ${H} Z`;
+    const drop = vehicle.listPrice != null ? vehicle.listPrice - vehicle.price : null;
+    historyBlock = (
+      <div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
+          {drop != null && drop > 0 ? (
+            <>
+              <StatChip tone="good" icon="trending-down">
+                {t('autobahn:priceHistory.dropAmount', { amount: eur(drop) })}
+              </StatChip>
+              <span className="md-label-sm">{t('autobahn:priceHistory.sinceListing')}</span>
+            </>
+          ) : (
+            <span className="md-label-sm">{t('autobahn:priceHistory.label')}</span>
+          )}
+        </div>
+        <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="78" preserveAspectRatio="none" style={{ overflow: 'visible' }}>
+          <defs>
+            <linearGradient id="phg" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="var(--md-primary)" stopOpacity=".22" />
+              <stop offset="100%" stopColor="var(--md-primary)" stopOpacity="0" />
+            </linearGradient>
+          </defs>
+          <path d={area} fill="url(#phg)" />
+          <path d={line} fill="none" stroke="var(--md-primary)" strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
+          <circle cx={x(pts!.length - 1)} cy={y(last.price)} r="4.5" fill="var(--md-primary)" stroke="#fff" strokeWidth="2" />
+        </svg>
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
+          <span className="md-label-sm">{pts![0].label}</span>
+          <span className="md-label-sm">{last.label}</span>
+        </div>
+      </div>
+    );
+  } else {
+    historyBlock = (
+      <div>
+        <div className="md-title-sm" style={{ marginBottom: 12 }}>
+          {t('autobahn:priceHistory.title')}
+        </div>
+        <p className="md-body-sm" style={{ margin: 0, fontStyle: 'italic', color: 'var(--md-on-surface-variant)' }}>
+          {t('autobahn:common.needsData')}
+        </p>
+      </div>
+    );
+  }
+
+  // --- market-value position (only when the full band exists) ---
+  let marketBlock: React.ReactNode;
+  if (hasMarket) {
+    const mpos = Math.max(
+      0,
+      Math.min(1, (vehicle.price - vehicle.marketLow!) / (vehicle.marketHigh! - vehicle.marketLow!)),
+    );
+    const delta = vehicle.marketAvg! - vehicle.price;
+    marketBlock = (
+      <div>
+        <div className="md-title-sm" style={{ marginBottom: 12 }}>
+          {t('autobahn:marketValue.heading')}
+        </div>
+        <div
+          style={{
+            position: 'relative',
+            height: 10,
+            borderRadius: 'var(--md-r-full)',
+            background: 'linear-gradient(90deg,#0F7B43,#C7B53A 55%,#D4502B)',
+          }}
+        >
+          <span
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: `calc(${mpos * 100}% - 9px)`,
+              transform: 'translateY(-50%)',
+              width: 18,
+              height: 18,
+              borderRadius: '50%',
+              background: '#fff',
+              boxShadow: 'var(--md-e2), 0 0 0 2px var(--md-primary)',
+            }}
+          />
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
+          <span className="md-label-sm">{eur(vehicle.marketLow!)} €</span>
+          <span className="md-label-sm">{eur(vehicle.marketHigh!)} €</span>
+        </div>
+        {delta > 0 && (
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              marginTop: 12,
+              padding: '10px 12px',
+              borderRadius: 'var(--md-r-sm)',
+              background: 'var(--md-good-container)',
+            }}
+          >
+            <Icon name="badge-check" size={18} color="var(--md-on-good-container)" />
+            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--md-on-good-container)' }}>
+              {t('autobahn:marketValue.belowAverage', { rating: t('autobahn:tier.' + vehicle.rating), amount: eur(delta) })}
+            </span>
+          </div>
+        )}
+      </div>
+    );
+  } else {
+    marketBlock = (
+      <div>
+        <div className="md-title-sm" style={{ marginBottom: 12 }}>
+          {t('autobahn:marketValue.heading')}
+        </div>
+        <p className="md-body-sm" style={{ margin: 0, fontStyle: 'italic', color: 'var(--md-on-surface-variant)' }}>
+          {t('autobahn:common.needsData')}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mcard" id="vdp-preis" style={{ padding: 22 }}>
+      <h2 className="md-headline-sm" style={{ marginBottom: 4 }}>
+        {t('autobahn:priceMarket.heading')}
+      </h2>
+      <p className="md-body-sm" style={{ marginBottom: 18 }}>
+        {t('autobahn:priceMarket.description')}
+      </p>
+      <div className="pmv-grid">
+        {historyBlock}
+        {marketBlock}
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Protection products (CNP Santander upsell) — optional, non-functional UI
+// ---------------------------------------------------------------------------
+
+/** [kebab-case lucide icon, name, description, monthly price EUR]. */
+export type ProtectionProduct = readonly [icon: string, name: string, desc: string, price: number];
+
+export interface ProtectionProductsProps {
+  /** the upsell products; defaults to the design's four CNP Santander packages. */
+  items?: ReadonlyArray<ProtectionProduct>;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/**
+ * The design's four CNP Santander packages — [icon, product name (proper noun,
+ * also the selection key), i18n description key, monthly example price EUR].
+ */
+const DEFAULT_PROTECTION: ReadonlyArray<ProtectionProduct> = [
+  ['shield-check', 'Safe Plus', 'autobahn:protection.items.safePlus.desc', 9],
+  ['life-buoy', 'Drive Pro', 'autobahn:protection.items.drivePro.desc', 7],
+  ['wrench', 'Smart Repair', 'autobahn:protection.items.smartRepair.desc', 12],
+  ['rotate-ccw', 'Smart Return', 'autobahn:protection.items.smartReturn.desc', 10],
+];
+
+/**
+ * Partner attach products (CNP Santander) sold alongside the financing. Kept as a
+ * presentational upsell demo: the selectable rows are pure VIEW state (no store /
+ * order side effects, the prices are example values), and the catalogue is a prop
+ * with sane defaults. Functional ordering is out of scope for W3a.
+ */
+export const ProtectionProducts: React.FunctionComponent<ProtectionProductsProps> = ({ items, t }) => {
+  const products: ReadonlyArray<ProtectionProduct> =
+    items ?? DEFAULT_PROTECTION.map(([ic, name, descKey, price]) => [ic, name, t(descKey), price] as ProtectionProduct);
+  const [sel, setSel] = useState<Record<string, boolean>>({});
+  const chosen = products.filter(([, n]) => sel[n]);
+  const sum = chosen.reduce((a, [, , , p]) => a + p, 0);
+  return (
+    <div className="mcard" style={{ padding: 20 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+        <span
+          style={{
+            width: 34,
+            height: 34,
+            borderRadius: 'var(--md-r-full)',
+            background: 'var(--md-sc)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: 'none',
+          }}
+        >
+          <Icon name="umbrella" size={18} color="var(--md-on-surface-variant)" />
+        </span>
+        <div>
+          <div className="md-title-sm">{t('autobahn:protection.heading')}</div>
+          <div className="md-label-sm">{t('autobahn:protection.subtitle')}</div>
+        </div>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {products.map(([ic, name, desc, price]) => (
+          <button
+            key={name}
+            onClick={() => setSel((s) => ({ ...s, [name]: !s[name] }))}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 12,
+              width: '100%',
+              textAlign: 'left',
+              cursor: 'pointer',
+              padding: '10px 12px',
+              borderRadius: 'var(--md-r-md)',
+              background: sel[name] ? 'var(--md-primary-container)' : 'var(--md-sc-low)',
+              border: '1px solid ' + (sel[name] ? 'var(--md-primary)' : 'transparent'),
+              transition: 'background var(--dur-1), border-color var(--dur-1)',
+            }}
+          >
+            <Icon
+              name={ic}
+              size={19}
+              stroke={1.8}
+              color={sel[name] ? 'var(--md-on-primary-container)' : 'var(--md-on-surface-variant)'}
+              style={{ flex: 'none' }}
+            />
+            <span style={{ flex: 1, minWidth: 0 }}>
+              <span className="md-title-sm" style={{ display: 'block', fontSize: 13.5 }}>
+                {name}
+              </span>
+              <span className="md-label-sm" style={{ display: 'block', fontSize: 11.5 }}>
+                {desc}
+              </span>
+            </span>
+            <span style={{ flex: 'none', display: 'flex', alignItems: 'center', gap: 8 }}>
+              <span className="num md-label-sm" style={{ fontWeight: 600 }}>
+                +{price} €/mtl.
+              </span>
+              <span
+                style={{
+                  width: 20,
+                  height: 20,
+                  borderRadius: '50%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  background: sel[name] ? 'var(--md-primary)' : 'transparent',
+                  border: sel[name] ? 0 : '1.5px solid var(--md-outline)',
+                }}
+              >
+                {sel[name] && <Icon name="check" size={13} stroke={3} color="#fff" />}
+              </span>
+            </span>
+          </button>
+        ))}
+      </div>
+      {sum > 0 && (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+            marginTop: 12,
+            paddingTop: 10,
+            borderTop: '1px solid var(--md-outline-variant)',
+          }}
+        >
+          <span className="md-label-sm">
+            {t('autobahn:protection.packagesSelected', { count: chosen.length })}
+          </span>
+          <span className="num" style={{ fontWeight: 700, color: 'var(--md-primary)' }}>
+            +{sum} €/mtl.
+          </span>
+        </div>
+      )}
+      <div className="md-label-sm" style={{ marginTop: 10, fontSize: 11.5 }}>
+        {t('autobahn:protection.exampleValues', { partner: 'CNP Santander Insurance' })}
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// In-page anchor nav (mobile)
+// ---------------------------------------------------------------------------
+
+/** [target element id, label]. */
+export type VdpAnchor = readonly [id: string, label: string];
+
+export interface VdpAnchorsProps {
+  /** anchor chips; defaults to the four VDP sections. */
+  items?: ReadonlyArray<VdpAnchor>;
+  /**
+   * Optional navigation handler. When provided it OWNS the scroll (e.g. the page
+   * in W3b). When omitted the component falls back to scrolling the page's own
+   * element with that id into view — intrinsic anchor-nav behaviour on the
+   * document, not a data source.
+   */
+  onNavigate?: (id: string) => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** the four VDP sections — [target element id, i18n label key]. */
+const DEFAULT_ANCHORS: ReadonlyArray<VdpAnchor> = [
+  ['vdp-daten', 'autobahn:anchors.data'],
+  ['vdp-ausstattung', 'autobahn:anchors.equipment'],
+  ['vdp-preis', 'autobahn:anchors.priceMarket'],
+  ['vdp-check', 'autobahn:anchors.inspection'],
+];
+
+/** Sticky in-page anchor nav (mobile) — quiet chips. */
+export const VdpAnchors: React.FunctionComponent<VdpAnchorsProps> = ({ items, onNavigate, t }) => {
+  const anchors: ReadonlyArray<VdpAnchor> =
+    items ?? DEFAULT_ANCHORS.map(([id, key]) => [id, t(key)] as VdpAnchor);
+  const go = (id: string) => {
+    if (onNavigate) {
+      onNavigate(id);
+      return;
+    }
+    if (typeof document === 'undefined') return;
+    const el = document.getElementById(id);
+    if (!el) return;
+    let r = el.getBoundingClientRect();
+    if (!r.height && el.firstElementChild) r = el.firstElementChild.getBoundingClientRect();
+    window.scrollTo({ top: r.top + window.scrollY - 60, behavior: 'smooth' });
+  };
+  return (
+    <div className="vdp-anchors show-mobile" style={{ background: 'var(--md-sc-low)' }}>
+      {anchors.map(([id, l]) => (
+        <button key={id} className="chip" onClick={() => go(id)} style={{ flex: 'none' }}>
+          {l}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Desktop sticky summary bar
+// ---------------------------------------------------------------------------
+
+export interface VdpStickyBarProps {
+  vehicle: VehicleDetail;
+  /** thumbnail image URL (already resolved) for the docked bar. */
+  image: string;
+  /**
+   * Whether the bar is docked/visible. Controlled by the page (W3b owns the
+   * scroll position → show toggle), keeping this component pure — no window
+   * scroll listener here.
+   */
+  show: boolean;
+  /** primary CTA click. */
+  onSecure?: () => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** Desktop sticky summary bar (AS24 pattern) — docks to top, driven by `show`. */
+export const VdpStickyBar: React.FunctionComponent<VdpStickyBarProps> = ({ vehicle, image, show, onSecure, t }) => (
+  <div className={'vdp-stickytop hide-mobile' + (show ? ' vdp-stickytop--on' : '')}>
+    <div className="container" style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '10px 24px' }}>
+      <img
+        src={image}
+        alt=""
+        style={{
+          width: 64,
+          height: 44,
+          objectFit: 'cover',
+          borderRadius: 'var(--md-r-sm)',
+          background: '#fff',
+          border: '1px solid var(--md-outline-variant)',
+          flex: 'none',
+        }}
+      />
+      <div style={{ minWidth: 0, flex: 1 }}>
+        <div className="md-title-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          {vehicle.make} {vehicle.model} · {vehicle.trim}
+        </div>
+        <div className="md-label-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          {fmtKm(vehicle.km)} · {vehicle.reg} · {vehicle.gear}
+        </div>
+      </div>
+      <div style={{ textAlign: 'right', flex: 'none' }}>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, justifyContent: 'flex-end' }}>
+          <span className="md-label-sm">{t('autobahn:sticky.from')}</span>
+          <span className="num" style={{ fontWeight: 700, fontSize: 20, color: 'var(--md-primary)', letterSpacing: '-.4px' }}>
+            {vehicle.monthly} €
+          </span>
+          <span className="md-label-sm">{t('autobahn:sticky.perMonth')}</span>
+        </div>
+        <div className="md-label-sm">{t('autobahn:sticky.purchasePrice', { price: eur(vehicle.price) })}</div>
+      </div>
+      <Button variant="filled" icon="shield-check" style={{ flex: 'none' }} onClick={onSecure}>
+        {t('autobahn:sticky.secureOffer')}
+      </Button>
+    </div>
+  </div>
+);
+
+// ---------------------------------------------------------------------------
+// Mobile sticky CTA bar
+// ---------------------------------------------------------------------------
+
+export interface VdpBottomBarProps {
+  vehicle: VehicleDetail;
+  /**
+   * Whether the bar is docked/visible — mirrors VdpStickyBar's `show` (same
+   * page-owned scroll-position toggle, STICKY_SHOW_AT). Was unconditionally
+   * visible before, unlike the desktop VdpStickyBar; the mockup only shows it
+   * after scrolling past the main offer card.
+   */
+  show: boolean;
+  /** active payment mode — drives the tabs + the displayed figure (rate vs price). */
+  mode?: FinanceMode;
+  /** mode tab tapped; when omitted the tabs row is not rendered. */
+  onModeChange?: (mode: FinanceMode) => void;
+  /** monthly rate for the CURRENT mode (fin/leasing differ); falls back to vehicle.monthly. */
+  monthly?: number;
+  /** price-rating label — drives the eval pill + gradient bar (same as the offer card). */
+  ratingLabel?: string;
+  /** primary CTA click. */
+  onSecure?: () => void;
+  /** phone CTA click. */
+  onCall?: () => void;
+  /** opens the "Rate anpassen" sheet; when omitted the button is not rendered. */
+  onOpenAdjust?: () => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** Mobile sticky bottom bar (Figma "Sticky Footer"): mode tabs, rate + price rating,
+ *  then Angebot anfragen · phone · Rate anpassen. No struck old rate — there is no
+ *  real previous-rate source (needs-data discipline), so nothing is fabricated. */
+export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
+  vehicle,
+  show,
+  mode = 'fin',
+  onModeChange,
+  monthly,
+  ratingLabel,
+  onSecure,
+  onCall,
+  onOpenAdjust,
+  t,
+}) => {
+  const isCash = mode === 'cash';
+  const rate = monthly != null ? monthly : vehicle.monthly;
+  const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
+  const evalTier = tierIdx >= 0 ? tierIdx : 1;
+  return (
+    <div className={'vdp-bottom-bar show-mobile' + (show ? ' vdp-bottom-bar--on' : '')}>
+      {onModeChange && (
+        <div className="fin-tabs bb-tabs" role="tablist">
+          {(
+            [
+              ['fin', 'autobahn:finance.mode.financing'],
+              ['leasing', 'autobahn:finance.mode.leasing'],
+              ['cash', 'autobahn:card.price.buy'],
+            ] as Array<[FinanceMode, string]>
+          ).map(([k, labelKey]) => (
+            <button
+              key={k}
+              type="button"
+              role="tab"
+              aria-selected={mode === k}
+              className={'fin-tab' + (mode === k ? ' on' : '')}
+              onClick={() => onModeChange(k)}
+            >
+              {t(labelKey)}
+            </button>
+          ))}
+        </div>
+      )}
+      <div className="bb-price-row">
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, whiteSpace: 'nowrap', minWidth: 0 }}>
+          <span className="num" style={{ fontWeight: 800, fontSize: 30, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
+            {isCash ? eur(vehicle.price) : eur(Math.round(rate))} €
+          </span>
+          <span className="md-label-sm" style={{ fontWeight: 600 }}>
+            {isCash ? t('autobahn:finance.fixedPrice') : `${t('autobahn:finance.exampleLabel')} ${t('autobahn:bottom.perMonth')}`}
+          </span>
+        </div>
+        {ratingLabel && (
+          <div className="bb-eval">
+            <span
+              className="fin-eval-pill"
+              style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
+            >
+              <Icon
+                name={evalTier <= 1 ? 'check' : evalTier === 2 ? 'minus' : 'trending-up'}
+                size={13}
+                stroke={2.6}
+                color={TIER_COLORS[evalTier]}
+              />
+              {t('autobahn:tier.' + TIER_KEYS[evalTier])}
+            </span>
+            <div className="fin-eval-bar">
+              <div className="fin-eval-thumb" style={{ left: `${(evalTier + 0.5) * 20}%`, borderColor: TIER_COLORS[evalTier] }} />
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="bb-cta-row">
+        <Button variant="filled" icon="file-check" style={{ flex: 1, minWidth: 0 }} onClick={onSecure}>
+          {t('autobahn:bottom.secureOffer')}
+        </Button>
+        {/* padding:0 — icon-only button (same fix as the sheet's phone button) */}
+        {onCall && <Button variant="outlined" icon="phone" style={{ width: 46, flex: 'none', padding: 0 }} onClick={onCall} />}
+        {onOpenAdjust && !isCash && (
+          <Button variant="outlined" icon="sliders-horizontal" className="bb-adjust" style={{ flex: 'none' }} onClick={onOpenAdjust}>
+            {t('autobahn:finance.adjustRate')}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// 130-Punkte-Check block
+// ---------------------------------------------------------------------------
+
+export interface InspectionBlockProps {
+  /** pass categories; e.g. ['Karosserie & Lack', 'Motor & Antrieb', …]. */
+  categories: string[];
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** 130-Punkte-Check block — the auto.de inspection promise, all categories pass. */
+export const InspectionBlock: React.FunctionComponent<InspectionBlockProps> = ({ categories, t }) => (
+  <div className="mcard mcard--filled" id="vdp-check" style={{ padding: 22 }}>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
+      <Icon name="badge-check" size={24} color="var(--md-primary)" />
+      <h2 className="md-headline-sm">{t('autobahn:inspection.passed')}</h2>
+    </div>
+    <div className="eq-cols">
+      {categories.map((c) => (
+        <div
+          key={c}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 9,
+            fontSize: 13.5,
+            color: 'var(--md-on-surface-variant)',
+            marginBottom: 10,
+          }}
+        >
+          <Icon name="check-circle" size={18} color="var(--md-good)" stroke={2} style={{ flex: 'none' }} />
+          {c}
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+// ---------------------------------------------------------------------------
+// Finanzierungs-/Leasingdetails popup (desktop modal / mobile bottom-sheet)
+// ---------------------------------------------------------------------------
+
+/** full-width label(+optional trailing price) / Switch row — Switch itself is inline-flex
+ *  (sized to its own content), so the space-between has to live on this wrapper, not on
+ *  Switch's `label` prop (which renders track-then-label, not a full-width justified row). */
+const ToggleRow: React.FunctionComponent<{
+  label: string;
+  price?: string;
+  checked: boolean;
+  disabled?: boolean;
+  onChange: (checked: boolean) => void;
+}> = ({ label, price, checked, disabled, onChange }) => (
+  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
+    <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+      {label}
+      <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
+    </span>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+      {price && (
+        <span className="num" style={{ fontWeight: 700, fontSize: 13.5 }}>
+          {price}
+        </span>
+      )}
+      <Switch checked={checked} disabled={disabled} onChange={(e) => onChange(e.target.checked)} ariaLabel={label} />
+    </div>
+  </div>
+);
+
+export interface FinanceDetailsModalProps {
+  /** open flag (controlled by the page). */
+  open: boolean;
+  /** active payment mode — drives labels + which legal example shows. */
+  mode: 'fin' | 'leasing' | 'cash';
+  /** car make+model — mobile sheet subtitle under the title (mockup). */
+  vehicleName?: string;
+  price: number;
+  monthly: number;
+  apr: number;
+  down: number;
+  term: number;
+  /** leasing annual mileage (km/yr), shown only in leasing mode. */
+  annualMileage?: number;
+  /** REAL figures from the financing config (NOT computed — balloon/Schlussrate makes monthly·term wrong). */
+  netLoanAmount?: number;
+  /** Schlussrate (balloon final installment); shown only when > 0. */
+  finalInstallment?: number;
+  /** Gesamt(rückzahlungs)betrag from the config; shown only when > 0 (never the wrong monthly·term). */
+  grossAmount?: number;
+  /** Sollzinssatz p.a. (%); shown only when > 0. */
+  nominalRate?: number;
+  /** slider bounds — when the change handlers are supplied, the modal shows adjustment sliders. */
+  downMin?: number;
+  downMax?: number;
+  downStep?: number;
+  termMin?: number;
+  termMax?: number;
+  termStep?: number;
+  /** discrete selectable terms (months) for the Laufzeit chips. */
+  termOptions?: number[];
+  annualMileageMin?: number;
+  annualMileageMax?: number;
+  annualMileageStep?: number;
+  /** slider change handlers (same as the calculator); they recompute the rate via the page. */
+  onDownChange?: (down: number) => void;
+  onTermChange?: (term: number) => void;
+  onAnnualMileageChange?: (km: number) => void;
+  onClose: () => void;
+  /** mobile only — start with the Finanzierungs-/Leasingdetails breakdown already expanded
+   *  (opened directly via that link, skipping the "Rate anpassen" collapsed default view). */
+  initialShowBreakdown?: boolean;
+  /** mobile only — price-rating label, drives the eval pill/bar (same as the collapsed card). */
+  ratingLabel?: string;
+  /** mobile only — mode tabs inside the sheet (mirrors the collapsed card's tabs). */
+  onModeChange?: (mode: FinanceMode) => void;
+  /** mobile only — primary "Rate anfragen"/"Angebot anfragen" CTA. */
+  onSecure?: () => void;
+  /** mobile only — secondary call CTA. */
+  onCall?: () => void;
+  /** mobile only — "Mit Schlussrate" toggle (financing only; leasing has no balloon concept). */
+  withFinalInstallment?: boolean;
+  onToggleFinalInstallment?: (checked: boolean) => void;
+  /** mobile only — "Rundum-Sorglos-Paket" toggle (all modes; forced-on + disabled for cash). */
+  withAddServices?: boolean;
+  addServicesCost?: number;
+  addServicesDisabled?: boolean;
+  onToggleAddServices?: (checked: boolean) => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/**
+ * Full payment breakdown + legal example, opened from the calculator's
+ * "Finanzierungsdetails" / "Leasingdetails" link (matches production, which uses a popup).
+ * Desktop = centered modal, mobile = bottom-sheet (CSS). All figures are derived from the
+ * live calculator props (no fabricated Sollzins/Schlussrate — only what we can compute).
+ */
+export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalProps> = ({
+  open,
+  mode,
+  vehicleName,
+  price,
+  monthly,
+  apr,
+  down,
+  term,
+  annualMileage,
+  netLoanAmount,
+  finalInstallment,
+  grossAmount,
+  nominalRate,
+  downMin,
+  downMax,
+  downStep = 100,
+  termMin,
+  termMax,
+  termStep = 6,
+  termOptions,
+  annualMileageMin = 5000,
+  annualMileageMax = 60000,
+  annualMileageStep = 5000,
+  onDownChange,
+  onTermChange,
+  onAnnualMileageChange,
+  onClose,
+  initialShowBreakdown,
+  ratingLabel,
+  onModeChange,
+  onSecure,
+  onCall,
+  withFinalInstallment,
+  onToggleFinalInstallment,
+  withAddServices,
+  addServicesCost,
+  addServicesDisabled,
+  onToggleAddServices,
+  t,
+}) => {
+  // mobile-only: the Finanzierungs-/Leasingdetails breakdown starts collapsed (opened via "Rate
+  // anpassen") or expanded (opened directly via the details link) — reset on every open, since
+  // this component stays mounted (the page always renders it, gated by `open`, not unmounted).
+  const [showBreakdown, setShowBreakdown] = React.useState(!!initialShowBreakdown);
+  React.useEffect(() => {
+    if (open) setShowBreakdown(!!initialShowBreakdown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, initialShowBreakdown]);
+
+  if (!open) return null;
+  const isLease = mode === 'leasing';
+  const isCash = mode === 'cash';
+  const title = isLease ? t('autobahn:modal.leasingDetails') : t('autobahn:modal.financingDetails');
+  const mobileTitle = isCash
+    ? t('autobahn:modal.sheetTitleCash')
+    : isLease
+      ? t('autobahn:modal.sheetTitleLeasing')
+      : t('autobahn:modal.sheetTitleFinancing');
+  // price-evaluation tier — identical derivation to the collapsed card (FinanceCalculator).
+  const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
+  const evalTier = tierIdx >= 0 ? tierIdx : 1;
+  const evalTierLabel = t('autobahn:tier.' + TIER_KEYS[evalTier]);
+  // adjustable only for fin/leasing, and only when the page supplies the change handlers + bounds.
+  const adjustable = mode !== 'cash' && !!onDownChange && downMin != null && downMax != null && termMin != null && termMax != null;
+  // discrete term chip values (supplied periods, else derived from the bounds).
+  const termVals =
+    termOptions && termOptions.length
+      ? termOptions
+      : (() => {
+          const out: number[] = [];
+          for (let v = termMin as number; v <= (termMax as number); v += termStep || 12) out.push(v);
+          return out.length ? out : [term];
+        })();
+  const pct = (n: number) => `${n.toFixed(2).replace('.', ',')} %`;
+  // Only REAL figures (from the financing config). Balloon financing means monthly·term is NOT the
+  // total, so Schlussrate + Gesamtbetrag come from the config and are omitted when unavailable —
+  // never a fabricated/misleading total.
+  const netto = netLoanAmount != null ? netLoanAmount : Math.max(0, price - down);
+  const rows: Array<[string, string]> = [
+    [t('autobahn:modal.vehiclePrice'), `${eur(price)} €`],
+    [isLease ? t('autobahn:modal.leasingAmount') : t('autobahn:modal.netLoanAmount'), `${eur(netto)} €`],
+    [t('autobahn:modal.downPayment'), `${eur(down)} €`],
+    ...(isLease && annualMileage != null ? ([[t('autobahn:modal.annualMileage'), `${eur(annualMileage)} km`]] as Array<[string, string]>) : []),
+    [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
+    ...(nominalRate != null && nominalRate > 0 ? ([[t('autobahn:modal.nominalRate'), pct(nominalRate)]] as Array<[string, string]>) : []),
+    [t('autobahn:modal.effectiveRate'), pct(apr)],
+    ...(finalInstallment != null && finalInstallment > 0 ? ([[t('autobahn:modal.finalInstallment'), `${eur(finalInstallment)} €`]] as Array<[string, string]>) : []),
+    [isLease ? t('autobahn:modal.leasingRate') : t('autobahn:modal.monthlyRate'), t('autobahn:modal.ratePerMonth', { amount: eur(monthly) })],
+    ...(grossAmount != null && grossAmount > 0 ? ([[isLease ? t('autobahn:modal.totalAmount') : t('autobahn:modal.totalRepayment'), `${eur(grossAmount)} €`]] as Array<[string, string]>) : []),
+  ];
+  const breakdownRows = rows.map(([l, v], i) => (
+    <div
+      key={l}
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        gap: 12,
+        padding: '9px 0',
+        borderBottom: i < rows.length - 1 ? '1px solid var(--md-outline-variant)' : 0,
+      }}
+    >
+      <span className="md-label-sm">{l}</span>
+      <span className="num" style={{ fontSize: 13.5, fontWeight: 600 }}>
+        {v}
+      </span>
+    </div>
+  ));
+
+  return (
+    <div className="fin-modal-scrim" onClick={onClose}>
+      <div className="fin-modal" role="dialog" aria-modal="true" aria-label={title} onClick={(e) => e.stopPropagation()}>
+        <div className="fin-modal-head">
+          <h2 className="md-headline-sm hide-mobile" style={{ margin: 0 }}>
+            {title}
+          </h2>
+          <h2 className="md-headline-sm show-mobile" style={{ margin: 0, flexDirection: 'column', alignItems: 'flex-start', gap: 2 }}>
+            {mobileTitle}
+            {vehicleName && (
+              <span className="md-label-sm" style={{ fontWeight: 400 }}>
+                {vehicleName}
+              </span>
+            )}
+          </h2>
+          <button className="icon-btn" onClick={onClose} aria-label={t('autobahn:modal.close')}>
+            <Icon name="x" size={20} />
+          </button>
+        </div>
+        <div className="fin-modal-body">
+          {/* ============================== DESKTOP (≥601px) — unchanged ============================== */}
+          <div className="hide-mobile">
+            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 14 }}>
+              <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
+                {eur(monthly)} €
+              </span>
+              <span className="md-label-sm">{t('autobahn:finance.perMonth')}</span>
+            </div>
+            {/* adjustment sliders — change a value and every figure below recomputes live (via the page) */}
+            {adjustable && (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 18 }}>
+                <div>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                    <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
+                    <span className="num" style={{ fontWeight: 700 }}>
+                      {eur(down)} €
+                    </span>
+                  </div>
+                  <Slider
+                    min={downMin as number}
+                    max={downMax as number}
+                    step={downStep}
+                    value={down}
+                    onChange={onDownChange as (n: number) => void}
+                    fmt={(v) => `${eur(Number(v))} €`}
+                  />
+                </div>
+                {isLease && annualMileage != null && onAnnualMileageChange && (
+                  <div>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                      <span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
+                      <span className="num" style={{ fontWeight: 700 }}>
+                        {eur(annualMileage)} km
+                      </span>
+                    </div>
+                    <Slider
+                      min={annualMileageMin}
+                      max={annualMileageMax}
+                      step={annualMileageStep}
+                      value={annualMileage}
+                      onChange={onAnnualMileageChange}
+                      fmt={(v) => `${eur(Number(v))} km`}
+                    />
+                  </div>
+                )}
+                <div>
+                  <div className="md-title-sm" style={{ marginBottom: 8 }}>
+                    {t('autobahn:finance.termSelection')}
+                  </div>
+                  <TermChips options={termVals} value={term} onChange={onTermChange as (n: number) => void} t={t} />
+                </div>
+              </div>
+            )}
+            {breakdownRows}
+            <p className="md-label-sm" style={{ marginTop: 16, lineHeight: 1.55 }}>
+              {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
+            </p>
+          </div>
+
+          {/* ============================== MOBILE (≤600px) — full "Rate anpassen" sheet ============================== */}
+          <div className="show-mobile" style={{ flexDirection: 'column', gap: 18 }}>
+            {onModeChange && (
+              <div className="fin-tabs" role="tablist">
+                {(
+                  [
+                    ['fin', 'autobahn:finance.mode.financing'],
+                    ['leasing', 'autobahn:finance.mode.leasing'],
+                    // this sheet is mobile-only, so the cash tab is "Kaufen" here (desktop card says "Barzahlung")
+                    ['cash', 'autobahn:card.price.buy'],
+                  ] as Array<[FinanceMode, string]>
+                ).map(([k, labelKey]) => (
+                  <button
+                    key={k}
+                    type="button"
+                    role="tab"
+                    aria-selected={mode === k}
+                    className={'fin-tab' + (mode === k ? ' on' : '')}
+                    onClick={() => onModeChange(k)}
+                  >
+                    {t(labelKey)}
+                  </button>
+                ))}
+              </div>
+            )}
+
+            <div className="fin-price-grid">
+              <div className="fin-rate-main">
+                <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
+                  <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
+                    {isCash ? eur(price) : eur(Math.round(monthly))}
+                  </span>
+                  <span className="md-body-sm" style={{ fontWeight: 600 }}>
+                    {isCash ? '€' : `€ ${t('autobahn:finance.perMonth')}`}
+                  </span>
+                </div>
+              </div>
+              <div>
+                {ratingLabel && (
+                  <span
+                    className="fin-eval-pill"
+                    style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
+                  >
+                    <Icon
+                      name={evalTier <= 1 ? 'check' : evalTier === 2 ? 'minus' : 'trending-up'}
+                      size={14}
+                      stroke={2.6}
+                      color={TIER_COLORS[evalTier]}
+                    />
+                    {evalTierLabel}
+                  </span>
+                )}
+              </div>
+              <div />
+              <div>
+                {ratingLabel && (
+                  <div className="fin-eval-bar">
+                    <div className="fin-eval-thumb" style={{ left: `${(evalTier + 0.5) * 20}%`, borderColor: TIER_COLORS[evalTier] }} />
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {isCash ? (
+              <>
+                <div>
+                  <CalcRow label={t('autobahn:finance.paymentLabel')}>{t('autobahn:finance.paymentValue')}</CalcRow>
+                  <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
+                  <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
+                    {t('autobahn:finance.deliveryValue')}
+                  </CalcRow>
+                </div>
+                {addServicesCost != null && (
+                  <ToggleRow
+                    label={t('autobahn:finance.addServicesToggle')}
+                    price={t('autobahn:finance.addServicesOnce', { value: eur(addServicesCost) })}
+                    checked={!!withAddServices}
+                    disabled={addServicesDisabled}
+                    onChange={(checked) => onToggleAddServices && onToggleAddServices(checked)}
+                  />
+                )}
+                <div style={{ display: 'flex', gap: 10 }}>
+                  <Button variant="filled" size="lg" icon="shield-check" style={{ flex: 1 }} onClick={onSecure}>
+                    {t('autobahn:finance.secureOffer')}
+                  </Button>
+                  {/* padding:0 — mbtn--lg's 30px side padding left no room for the icon at width 52 */}
+                  <Button variant="outlined" size="lg" icon="phone" style={{ width: 52, flex: 'none', padding: 0, borderRadius: 10 }} onClick={onCall} />
+                </div>
+              </>
+            ) : (
+              <>
+                {adjustable && (
+                  <div className="fin-sheet-adjust" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+                    <div>
+                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
+                        <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+                          {t('autobahn:finance.downPaymentSliderLabel')}
+                          <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
+                        </span>
+                        <span className="num" style={{ fontWeight: 700, color: 'var(--md-primary)' }}>
+                          {eur(down)} €
+                        </span>
+                      </div>
+                      <span className="fin-val-box num">{eur(down)} €</span>
+                      <Slider
+                        min={downMin as number}
+                        max={downMax as number}
+                        step={downStep}
+                        value={down}
+                        onChange={onDownChange as (n: number) => void}
+                        fmt={(v) => `${eur(Number(v))} €`}
+                      />
+                    </div>
+                    {isLease && annualMileage != null && onAnnualMileageChange && (
+                      <div>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
+                          <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+                            {t('autobahn:finance.annualMileageLabel')}
+                            <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
+                          </span>
+                          <span className="num" style={{ fontWeight: 700, color: 'var(--md-primary)' }}>
+                            {eur(annualMileage)} km
+                          </span>
+                        </div>
+                        <span className="fin-val-box num">{eur(annualMileage)} km</span>
+                        <Slider
+                          min={annualMileageMin}
+                          max={annualMileageMax}
+                          step={annualMileageStep}
+                          value={annualMileage}
+                          onChange={onAnnualMileageChange}
+                          fmt={(v) => `${eur(Number(v))} km`}
+                        />
+                      </div>
+                    )}
+                    <div className="fin-sheet-terms">
+                      <div className="md-title-sm" style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 8 }}>
+                        {t('autobahn:finance.termSelectionMonths')}
+                        <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
+                      </div>
+                      <TermChips options={termVals} value={term} onChange={onTermChange as (n: number) => void} t={t} />
+                    </div>
+                  </div>
+                )}
+
+                {!isLease && onToggleFinalInstallment && (
+                  <ToggleRow
+                    label={t('autobahn:finance.finalInstallmentToggle')}
+                    checked={!!withFinalInstallment}
+                    onChange={onToggleFinalInstallment}
+                  />
+                )}
+                {addServicesCost != null && onToggleAddServices && (
+                  <ToggleRow
+                    label={t('autobahn:finance.addServicesToggle')}
+                    price={t('autobahn:finance.addServicesPerMonth', { value: eur(addServicesCost) })}
+                    checked={!!withAddServices}
+                    disabled={addServicesDisabled}
+                    onChange={onToggleAddServices}
+                  />
+                )}
+
+                <div style={{ display: 'flex', gap: 10 }}>
+                  <Button variant="filled" size="lg" icon="shield-check" style={{ flex: 1 }} onClick={onSecure}>
+                    {t('autobahn:finance.requestRate')}
+                  </Button>
+                  {/* padding:0 — mbtn--lg's 30px side padding left no room for the icon at width 52 */}
+                  <Button variant="outlined" size="lg" icon="phone" style={{ width: 52, flex: 'none', padding: 0, borderRadius: 10 }} onClick={onCall} />
+                </div>
+
+                {/* centered ⓘ details toggle (mockup shows no chevron) */}
+                <button type="button" onClick={() => setShowBreakdown((v) => !v)} style={{ ...expanderBtnStyle, justifyContent: 'center', padding: '2px 0' }}>
+                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
+                    <Icon name="info" size={16} color="var(--md-primary)" />
+                    {isLease ? t('autobahn:modal.leasingDetails') : t('autobahn:modal.financingDetails')}
+                  </span>
+                </button>
+                {/* mobile mockup shows NO row-by-row breakdown table (round 9 review) — only the
+                    legally required representative example; the table stays desktop-only. */}
+                {showBreakdown && (
+                  <div>
+                    <p className="md-label-sm" style={{ margin: 0, lineHeight: 1.55 }}>
+                      {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
+                    </p>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Customer ratings (auto.de Google reviews) — REAL data, loaded by the page
+// ---------------------------------------------------------------------------
+
+export interface CustomerRatingsProps {
+  /** the loaded reviews (REAL — from the WP json-quotes source). */
+  reviews: VdpReview[];
+  /**
+   * Overall auto.de Google rating to display instead of the average of the few
+   * loaded reviews (which skews to 5,0 — the review feed only carries 5-star
+   * quotes). The page passes the real aggregate (4,6 per Google, review round 9).
+   */
+  average?: number;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/**
+ * Customer-rating section (the legacy VDP's "Kundenmeinungen", rebuilt on the
+ * Autobahn card). Shows the auto.de average (DERIVED from the loaded reviews — not
+ * invented) + a grid of review cards (avatar, name, stars, quote). The reviews are
+ * the SAME real source the legacy CustomerQuotes uses (auto.de Google reviews via
+ * the WordPress json-quotes feed); the page loads them and passes them in. When no
+ * reviews load, the page renders nothing (no fabricated content).
+ */
+export const CustomerRatings: React.FunctionComponent<CustomerRatingsProps> = ({ reviews, average, t }) => {
+  const [showAll, setShowAll] = useState(false);
+  if (!reviews || !reviews.length) return null;
+  const count = reviews.length;
+  const avg = average != null ? average : reviews.reduce((s, r) => s + (r.rating || 0), 0) / count;
+  const shown = showAll ? reviews : reviews.slice(0, 4);
+  return (
+    <section className="mcard" id="vdp-bewertungen" style={{ padding: 22, marginTop: 44 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', marginBottom: 18 }}>
+        <h2 className="md-headline-sm" style={{ margin: 0 }}>
+          {t('autobahn:reviews.title')}
+        </h2>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginLeft: 'auto' }}>
+          <span className="num" style={{ fontWeight: 800, fontSize: 26, color: 'var(--md-on-surface)', letterSpacing: '-.5px' }}>
+            {avg.toLocaleString('de-DE', { minimumFractionDigits: 1, maximumFractionDigits: 1 })}
+          </span>
+          <span>
+            <Stars value={avg} size={16} />
+            <span className="md-label-sm" style={{ display: 'block' }}>
+              {t('autobahn:reviews.ratingCount', { count })} · via Google
+            </span>
+          </span>
+        </div>
+      </div>
+      <div className="eq-cols">
+        {shown.map((r) => (
+          <div
+            key={r.id}
+            className="mcard mcard--filled"
+            style={{ breakInside: 'avoid', marginBottom: 16, padding: 16 }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
+              {r.image ? (
+                <img
+                  src={r.image}
+                  alt=""
+                  loading="lazy"
+                  style={{ width: 40, height: 40, borderRadius: '50%', objectFit: 'cover', flex: 'none', background: 'var(--md-sc)' }}
+                />
+              ) : (
+                <span
+                  style={{
+                    width: 40,
+                    height: 40,
+                    borderRadius: '50%',
+                    flex: 'none',
+                    background: 'var(--md-primary-container)',
+                    color: 'var(--md-on-primary-container)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontWeight: 700,
+                  }}
+                >
+                  {(r.name || '?').charAt(0).toUpperCase()}
+                </span>
+              )}
+              <div style={{ minWidth: 0 }}>
+                <div className="md-title-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                  {r.name}
+                </div>
+                <Stars value={r.rating} />
+              </div>
+            </div>
+            <p className="md-body-sm" style={{ margin: 0, color: 'var(--md-on-surface-variant)' }}>
+              {r.review}
+            </p>
+          </div>
+        ))}
+      </div>
+      {reviews.length > 4 && (
+        <button className="mbtn mbtn--text" style={{ marginTop: 4 }} onClick={() => setShowAll((a) => !a)}>
+          {showAll ? t('autobahn:ratings.showLess') : t('autobahn:ratings.showMore', { count })}
+          <Icon name={showAll ? 'chevron-up' : 'chevron-down'} size={16} />
+        </button>
+      )}
+    </section>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Enquiry block — low-friction "Frage zum Fahrzeug" lead form
+// ---------------------------------------------------------------------------
+
+export interface VdpEnquiryProps {
+  /** car title for the prefilled message + heading context. */
+  carTitle: string;
+  /** auto.de-ID reference, woven into the prefilled message when present. */
+  autoDeId?: string;
+  /** sales hotline shown in the aside (tap-to-call). */
+  salesPhone?: string;
+  /**
+   * Submit handler — the page wires this to the REAL contact channel
+   * (carStore.submitContactForm). Returns a promise; the form shows a thank-you on
+   * resolve and an inline error on reject.
+   */
+  onSubmit: (data: { name: string; email: string; phone: string; message: string }) => Promise<void> | void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+const enquiryInput: React.CSSProperties = {
+  width: '100%',
+  height: 46,
+  padding: '0 14px',
+  borderRadius: 'var(--md-r-sm)',
+  border: '1px solid var(--md-outline-variant)',
+  background: 'var(--md-sc-lowest)',
+  color: 'var(--md-on-surface)',
+  font: 'inherit',
+  fontSize: 14,
+};
+
+/** outlined field with the label floating ON the top border (Figma phone/message fields). */
+const FloatField: React.FunctionComponent<{
+  label: string;
+  children: React.ReactNode;
+}> = ({ label, children }) => (
+  <label className="enq-float">
+    <span className="enq-float-label">{label}</span>
+    {children}
+  </label>
+);
+
+/** [icon, i18n label key] — resolved against the drilled t in the component. */
+const ENQUIRY_BENEFITS: ReadonlyArray<[string, string]> = [
+  ['clock', 'autobahn:enquiry.benefits.fastResponse'],
+  ['shield-check', 'autobahn:enquiry.benefits.freeAndNonBinding'],
+  ['hand-coins', 'autobahn:enquiry.benefits.financingAdvice'],
+];
+
+/**
+ * Vehicle enquiry — an enriched two-pane lead block: a left trust/benefits aside (persönliche
+ * Beratung, response time, hotline) and a right structured form (preferred-contact toggle, named
+ * fields, editable prefilled message), wired to the REAL submit (carStore.submitContactForm).
+ */
+export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
+  carTitle,
+  autoDeId,
+  salesPhone = '0800 40 30 182',
+  onSubmit,
+  t,
+}) => {
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [email, setEmail] = useState('');
+  const [areaCode, setAreaCode] = useState('');
+  const [phoneNum, setPhoneNum] = useState('');
+  const [consent, setConsent] = useState(false);
+  const [pref, setPref] = useState<'email' | 'phone'>('email');
+  const [message, setMessage] = useState(
+    autoDeId
+      ? t('autobahn:enquiry.prefilledMessageWithId', { carTitle, autoDeId })
+      : t('autobahn:enquiry.prefilledMessage', { carTitle })
+  );
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState('');
+
+  const emailOk = /.+@.+\..+/.test(email);
+  const phoneDigits = (areaCode + phoneNum).replace(/\D/g, '');
+  const phoneOk = phoneDigits.length >= 6;
+  // Figma round 9: Vorname/Nachname/E-Mail are always required (*), phone additionally
+  // when it's the preferred channel; the consent checkbox gates the send.
+  const valid =
+    firstName.trim().length > 0 &&
+    lastName.trim().length > 0 &&
+    emailOk &&
+    consent &&
+    (pref !== 'phone' || phoneOk);
+
+  const submit = async (): Promise<void> => {
+    if (!valid || sending) return;
+    setSending(true);
+    setError('');
+    const note = t('autobahn:enquiry.preferredContact', {
+      channel: pref === 'email' ? t('autobahn:enquiry.contactMethod.email') : t('autobahn:enquiry.contactMethod.phone'),
+    });
+    const phone = phoneDigits ? `+49 ${areaCode.trim()} ${phoneNum.trim()}`.replace(/\s+/g, ' ').trim() : '';
+    try {
+      await onSubmit({
+        name: `${firstName.trim()} ${lastName.trim()}`,
+        email: email.trim(),
+        phone,
+        message: message.trim() + note,
+      });
+      setSent(true);
+    } catch (e) {
+      setError(t('autobahn:enquiry.form.sendError'));
+    } finally {
+      setSending(false);
+    }
+  };
+
+  if (sent) {
+    return (
+      <section className="mcard mcard--filled" id="vdp-kontakt" style={{ padding: 22, marginTop: 24 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <Icon name="check-circle" size={24} color="var(--md-good)" />
+          <div>
+            <div className="md-title-sm">{t('autobahn:enquiry.success.title')}</div>
+            <div className="md-body-sm">{t('autobahn:enquiry.success.message')}</div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="mcard" id="vdp-kontakt" style={{ padding: 0, overflow: 'hidden', marginTop: 24 }}>
+      <div className="enquiry-grid">
+        {/* trust / benefits aside */}
+        <aside className="enquiry-aside">
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+            <span className="enquiry-ico">
+              <Icon name="headset" size={20} color="var(--md-on-primary-container)" />
+            </span>
+            <h2 className="md-title" style={{ margin: 0, fontSize: 19 }}>
+              {t('autobahn:enquiry.personalConsultation')}
+            </h2>
+          </div>
+          <p className="md-body-sm" style={{ marginBottom: 16 }}>
+            {t('autobahn:enquiry.aside.description')}
+          </p>
+          <ul className="enquiry-benefits">
+            {ENQUIRY_BENEFITS.map(([ic, key]) => (
+              <li key={key}>
+                <Icon name={ic} size={17} color="var(--md-primary)" stroke={2} />
+                {t(key)}
+              </li>
+            ))}
+          </ul>
+          <a className="enquiry-phone" href={`tel:${salesPhone.replace(/\s/g, '')}`}>
+            <Icon name="phone" size={16} />
+            {salesPhone}
+          </a>
+        </aside>
+
+        {/* form */}
+        <div className="enquiry-form">
+          <div style={{ marginBottom: 14 }}>
+            <div className="md-label-sm" style={{ fontWeight: 600, marginBottom: 7 }}>
+              {t('autobahn:enquiry.contactMethod.heading')}
+            </div>
+            <div style={{ display: 'flex', gap: 8 }}>
+              <button
+                type="button"
+                className={'chip' + (pref === 'email' ? ' chip--filter chip--selected' : '')}
+                onClick={() => setPref('email')}
+              >
+                <Icon name="mail" size={15} />
+                {t('autobahn:enquiry.contactMethod.email')}
+              </button>
+              <button
+                type="button"
+                className={'chip' + (pref === 'phone' ? ' chip--filter chip--selected' : '')}
+                onClick={() => setPref('phone')}
+              >
+                <Icon name="phone" size={15} />
+                {t('autobahn:enquiry.contactMethod.phone')}
+              </button>
+            </div>
+          </div>
+          {/* Vorname* / Nachname* — two required fields SIDE BY SIDE (Figma round 9; fixed
+              2-col — auto-fit collapsed to one column at 390px, mockup keeps them paired) */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 }}>
+            <input
+              style={enquiryInput}
+              placeholder={t('autobahn:enquiry.form.firstNamePlaceholder')}
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+              aria-label={t('autobahn:enquiry.form.firstNameAria')}
+            />
+            <input
+              style={enquiryInput}
+              placeholder={t('autobahn:enquiry.form.lastNamePlaceholder')}
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+              aria-label={t('autobahn:enquiry.form.lastNameAria')}
+            />
+          </div>
+          <div style={{ marginTop: 12 }}>
+            <input
+              style={enquiryInput}
+              type="email"
+              placeholder={t('autobahn:enquiry.form.emailPlaceholder')}
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              aria-label={t('autobahn:enquiry.contactMethod.email')}
+            />
+          </div>
+          {/* Land (+49 fixed) · Vorwahl · Telefonnummer — outlined float-label row (Figma) */}
+          <div className="enq-phone-row" style={{ marginTop: 16 }}>
+            <FloatField label={t('autobahn:enquiry.form.countryLabel')}>
+              <span className="enq-country num">
+                +49
+                <Icon name="chevron-down" size={14} color="var(--md-on-surface-variant)" />
+              </span>
+            </FloatField>
+            <FloatField label={t('autobahn:enquiry.form.areaCodeLabel')}>
+              <input
+                type="tel"
+                value={areaCode}
+                onChange={(e) => setAreaCode(e.target.value)}
+                aria-label={t('autobahn:enquiry.form.areaCodeLabel')}
+              />
+            </FloatField>
+            <FloatField label={t('autobahn:enquiry.form.phoneNumberLabel')}>
+              <input
+                type="tel"
+                value={phoneNum}
+                onChange={(e) => setPhoneNum(e.target.value)}
+                aria-label={t('autobahn:enquiry.form.phoneNumberLabel')}
+              />
+            </FloatField>
+          </div>
+          <div style={{ marginTop: 16 }}>
+            <FloatField label={t('autobahn:enquiry.form.messageLabel')}>
+              <textarea
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                aria-label={t('autobahn:enquiry.form.messageAria')}
+              />
+            </FloatField>
+          </div>
+          {/* Nutzungsbedingungen sentence + revocable-consent checkbox (Figma round 9) */}
+          <p className="md-body-sm" style={{ margin: '14px 0 0' }}>
+            {t('autobahn:enquiry.form.termsPrefix')}{' '}
+            <a href="/nutzungsbedingungen/" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit' }}>
+              {t('autobahn:enquiry.form.termsLink')}
+            </a>{' '}
+            {t('autobahn:enquiry.form.termsSuffix')}
+          </p>
+          <label className="enq-consent">
+            <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} />
+            <span>
+              {t('autobahn:enquiry.form.consentPart1')}{' '}
+              <a href="/datenschutz/" target="_blank" rel="noopener noreferrer">
+                {t('autobahn:enquiry.form.consentLinkHere')}
+              </a>{' '}
+              {t('autobahn:enquiry.form.consentPart2')}{' '}
+              <a href="/datenschutz/" target="_blank" rel="noopener noreferrer">
+                {t('autobahn:enquiry.form.consentLinkPrivacy')}
+              </a>
+              {t('autobahn:enquiry.form.consentPart3')}
+            </span>
+          </label>
+          {error && (
+            <div className="md-label-sm" style={{ color: 'var(--md-error)', marginTop: 8 }}>
+              {error}
+            </div>
+          )}
+          <div style={{ marginTop: 16 }}>
+            <Button variant="filled" block size="lg" icon="send" disabled={!valid || sending} onClick={submit}>
+              {sending ? t('autobahn:enquiry.form.sending') : t('autobahn:enquiry.sendButton')}
+            </Button>
+            <span
+              className="md-label-sm"
+              style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, marginTop: 10, color: 'var(--md-good)' }}
+            >
+              <Icon name="lock" size={13} color="var(--md-good)" />
+              {t('autobahn:enquiry.security')}
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// "So einfach geht's" steps
+// ---------------------------------------------------------------------------
+
+/** [title, description]. */
+export type HowItWorksStep = readonly [title: string, desc: string];
+
+export interface HowItWorksProps {
+  /** the numbered steps; defaults to the design's four-step flow. */
+  steps?: ReadonlyArray<HowItWorksStep>;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** Lucide icon per step index: Angebot / Beratung / Bezahlung / Übergabe. */
+const STEP_ICONS = ['bookmark', 'message-circle', 'credit-card', 'truck'] as const;
+
+/** the design's four-step flow — [title key, description key]. */
+const DEFAULT_STEPS: ReadonlyArray<HowItWorksStep> = [
+  ['autobahn:steps.step1.title', 'autobahn:steps.step1.description'],
+  ['autobahn:steps.step2.title', 'autobahn:steps.step2.description'],
+  ['autobahn:steps.step3.title', 'autobahn:steps.step3.description'],
+  ['autobahn:steps.step4.title', 'autobahn:steps.step4.description'],
+];
+
+/** "So einfach geht's" — icon-step cards with connector line (professional redesign). */
+export const HowItWorks: React.FunctionComponent<HowItWorksProps> = ({ steps, t }) => {
+  const items: ReadonlyArray<HowItWorksStep> =
+    steps ?? DEFAULT_STEPS.map(([titleKey, descKey]) => [t(titleKey), t(descKey)] as HowItWorksStep);
+  return (
+    <section className="hiw-section" style={{ marginTop: 44 }}>
+      {/* alignment is breakpoint-owned: centered on desktop, left on the mobile card (CSS) */}
+      <h2 className="md-headline-sm hiw-heading" style={{ marginBottom: 28 }}>
+        {t('autobahn:howItWorks.title')}
+      </h2>
+      <div className="steps-4 hiw-grid">
+        {items.map(([title, desc], i) => (
+          <div key={title} className="hiw-step">
+            <div className="hiw-icon-wrap">
+              <Icon name={STEP_ICONS[i] || 'star'} size={24} color="#fff" stroke={1.8} />
+              <span className="hiw-num">{i + 1}</span>
+            </div>
+            <div className="hiw-title">{title}</div>
+            <p className="hiw-desc">{desc}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};