@bytebrand/fe-ui-core-autobahn 1.0.77 → 1.0.78

package/cards/cardParts.tsx

@@ -597,12 +597,17 @@ export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode,
                 column layout exactly — so the click target covers the full area INCLUDING the
                 gap between the two stacked lines, not just their text glyphs (display:contents
                 has no box of its own there, so clicks in that gap fell through to the card link
-                behind it instead of opening the tooltip). */}
+                behind it instead of opening the tooltip). stopPropagation is required here too —
+                the whole card (CarCard.tsx) has its own onClick={() => onOpen(car)} navigation,
+                so without it a click on this block both opened the tooltip AND navigated away. */}
             <span
               style={{ display: 'flex', flexDirection: 'column' }}
               role="button"
               tabIndex={0}
-              onClick={() => setUvpTooltipOpen((v) => !v)}
+              onClick={(e) => {
+                e.stopPropagation();
+                setUvpTooltipOpen((v) => !v);
+              }}
             >
               <span className="pp-eyebrow">
                 {t('autobahn:card.price.uvpRateLabel')}

package/constants.ts

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

package/locales/de/autobahn.json

@@ -9,8 +9,8 @@
   },
   "card": {
     "price": {
-      "financeTerms": "{{firstInstallment}} € Anzahlung · {{months}} Monate Laufzeit",
-      "financeTerms_plural": "{{firstInstallment}} € Anzahlung · {{months}} Monate Laufzeit",
+      "financeTerms": "{{firstInstallment}} € Anzahlung · {{months}} Monate",
+      "financeTerms_plural": "{{firstInstallment}} € Anzahlung · {{months}} Monate",
       "leaseTerms": "{{firstInstallment}} € Sonderzahlung · {{months}} Mon. · {{mileage}} km/Jahr",
       "leaseTermsCompact": "{{mileage}} km/Jahr · {{months}} Monate",
       "detailsLink": "Details",

package/locales/en/autobahn.json

@@ -9,7 +9,7 @@
   },
   "card": {
     "price": {
-      "financeTerms": "€{{firstInstallment}} down payment · {{months}} months term",
+      "financeTerms": "€{{firstInstallment}} down payment · {{months}} months",
       "financeTerms_plural": "€{{firstInstallment}} down payment · {{months}} months term",
       "leaseTerms": "€{{firstInstallment}} down payment · {{months}} mo. · {{mileage}} km/year",
       "leaseTermsCompact": "{{mileage}} km/year · {{months}} months",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.77",
+  "version": "1.0.78",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",

package/theme/md3.css

@@ -122,6 +122,13 @@
 .md3 *::after {
   box-sizing: border-box;
 }
+/* mobile Safari/Chrome paint a solid blue tap-highlight rectangle on any clickable element on
+   touch — and when an ancestor has a CSS transform (e.g. the gallery carousel's translateX),
+   that highlight can render far larger than the tapped element, up to full-viewport. Disabling
+   it site-wide (not just on the specific role="button" spans) is the only reliable fix. */
+.md3 * {
+  -webkit-tap-highlight-color: transparent;
+}
 .md3 ::selection {
   background: var(--md-primary-container);
 }
@@ -4777,6 +4784,25 @@ line-height: 31px;
     top: -20px;
     right: -110px;
   }
+  /* .fin-calc-card is narrower than .cc-price / .fin-modal, so the shared -84px offset lets
+     the popover overhang the card's right edge — this rule itself is unscoped (applies at
+     every width, see the file-wide note above), so the max-width:600px block right below
+     narrows it further just for phones. */
+  .md3 .fin-calc-card .pp-uvp-tooltip {
+    right: -135px;
+  }
+  @media (max-width: 600px) {
+    .md3 .fin-calc-card .pp-uvp-tooltip {
+      right: -95px;
+    }
+  }
+  /* Kaufen tab's own struck-price tooltip (.fin-rate-old-list, "2" badge) sits at a different
+     offset than the Finanzierung/Leasing "3" badge tooltip above — desktop only. */
+  @media (min-width: 601px) {
+    .md3 .fin-calc-card .fin-rate-old-list .pp-uvp-tooltip {
+      right: -100px;
+    }
+  }
   /* floating circular close button — overlaps the tooltip's top-right corner from outside,
      same "glass circle" convention as VdpViewer's close/back/next overlay buttons. */
   .md3 .cc-price .pp-uvp-tooltip-close,
@@ -5108,10 +5134,30 @@ line-height: 31px;
   align-items: center;
   margin-top: 0;
 }
+/* Kaufen tab (FinanceCalculator.tsx's own .fin-calc-card) — was an inline style={isCash ? {...} :
+   undefined}; switched to a class modifier because React leaves a stale (but harmless-looking)
+   style="" attribute on the node when that ternary flips to undefined on tab switch. */
+.md3 .fin-calc-card .fin-price-grid.fin-price-grid--cash {
+  gap: 0px 15px;
+}
 .md3 .fin-rate-main {
   grid-area: rate;
   min-width: 0;
 }
+/* Kaufen desktop hero price footnote — same small/quiet treatment as the mobile
+   .fin-rate-cash-mobile sup, instead of inheriting the 48px blue hero size. */
+.md3 .fin-rate-main .num.hide-mobile sup {
+  position: relative;
+  top: 6px;
+  left: 3px;
+  vertical-align: super;
+  font-family: Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 8px;
+  line-height: 9px;
+  color: #111820;
+}
 /* transparent wrapper on desktop — pill/bar resume being independent grid-area items,
    identical to the original (pre-grouping) layout; mobile turns it into a real flex column */
 .md3 .fin-eval-col {
@@ -5126,6 +5172,42 @@ line-height: 31px;
 .md3 .fin-eval-bar-cell {
   grid-area: bar;
 }
+/* .fin-calc-card only — the base display:contents above splits the pill and bar across the
+   grid's two separate rows ("rate pill" / "cond bar"), which visually strands the bar down next
+   to the terms line once the price row grows tall. Group them into one real flex column instead
+   (matches the mobile sheet's own .fin-eval-col treatment). */
+.md3 .fin-calc-card .fin-price-grid {
+  grid-template-columns: minmax(0, 1fr) 112px;
+  grid-template-areas: "rate evalcol" "cond cond";
+  column-gap: 15px;
+}
+.md3 .fin-calc-card .fin-eval-col {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  grid-area: evalcol;
+  width: 112px;
+  justify-self: end;
+}
+/* pill now sits above the bar in a real flex column (see above) — stretch it to the bar's own
+   width instead of the base .fin-eval-pill's inline-flex/content-hugging size. */
+.md3 .fin-calc-card .fin-eval-pill--good {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/* .fin-calc-card's own "Rate anpassen" panel is compact — the mobile-sheet/modal padding
+   (22/28px top, 20px bottom) is too roomy here. */
+.md3 .fin-calc-card .fin-toggle-final,
+.md3 .fin-calc-card .fin-toggle-addservices {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.md3 .fin-calc-card .fin-toggle-addservices .num {
+  font-size: 13px !important;
+  line-height: 15px !important;
+}
 /* rating pill — light tier-tinted bg, tier-colored text + icon (bg/color set inline per tier) */
 .md3 .fin-eval-pill {
   display: inline-flex;
@@ -5207,15 +5289,6 @@ line-height: 31px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
   pointer-events: none;
 }
-/* UVP (struck list price) — cash mode only */
-.md3 .fin-kauf {
-  margin-top: 8px;
-  font-size: 13px;
-  color: var(--md-on-surface-variant);
-}
-.md3 .fin-kauf s {
-  color: var(--md-error);
-}
 /* struck old rate / list price next to the hero figure (Figma "329 € 4̶9̶9̶ ̶€̶ / mtl.") —
    REAL isStrikeShown-gated data; used in the offer card, the Rate-anpassen sheet and the
    sticky bottom bar, all payment modes. */
@@ -5227,6 +5300,38 @@ line-height: 31px;
   letter-spacing: 0;
   flex: none;
 }
+/* .fin-rate-old-list's own position:relative (needed as the .pp-uvp-tooltip/.pp-eyebrow-badge
+   anchor) only exists inside the mobile media query below — without it here, the desktop
+   .fin-calc-card Kaufen tooltip anchors to some distant ancestor and effectively never shows. */
+.md3 .fin-rate-old.fin-rate-old-list {
+  position: relative;
+  display: inline-block;
+}
+/* desktop .fin-calc-card's own struck old-rate/list-price treatment (the "3"/"2" badge
+   figures) — overrides the shared 15px/700/error-red .fin-rate-old base above, and replaces
+   the native line-through with the same Figma diagonal red strike used on mobile. */
+.md3 .fin-calc-card .fin-rate-old.fin-rate-example-price,
+.md3 .fin-calc-card .fin-rate-old.fin-rate-old-list {
+  position: relative;
+  display: inline-block;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 20px;
+  color: #0e2238;
+  text-decoration: none;
+}
+.md3 .fin-calc-card .fin-rate-old.fin-rate-example-price::after,
+.md3 .fin-calc-card .fin-rate-old.fin-rate-old-list::after {
+  content: '';
+  position: absolute;
+  left: -2px;
+  right: -2px;
+  top: 50%;
+  border-top: 2px solid #e60000;
+  transform: rotate(12.53deg);
+  transform-origin: center;
+}
 /* sticky bottom bar struck old rate — diagonal red strike (Figma), replacing the shared
    .fin-rate-old's native horizontal line-through for this instance only. */
 .md3 .bb-price-row .fin-rate-old.fin-rate-old-bb {
@@ -5351,6 +5456,27 @@ line-height: 31px;
 .md3 .term-chip.on .tc-unit {
   color: rgba(255, 255, 255, 0.7);
 }
+/* desktop FinanceDetailsModal breakdown (VdpModules.tsx) and FinanceCalculator.tsx's own
+   .fin-adjust panel — both filter out 12/96 (6 term options left) and now match the mobile
+   "Rate anpassen" sheet's .fin-sheet-terms pill style exactly (flex row, no "Mon." unit). */
+.md3 .fin-modal .hide-mobile .term-chips,
+.md3 .fin-adjust .term-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.md3 .fin-modal .hide-mobile .term-chip,
+.md3 .fin-adjust .term-chip {
+  flex: 1 1 0;
+  min-width: 46px;
+  height: 40px;
+  border-radius: 8px;
+  padding: 0 2px;
+}
+.md3 .fin-modal .hide-mobile .term-chip .tc-unit,
+.md3 .fin-adjust .term-chip .tc-unit {
+  display: none;
+}
 
 /* enriched vehicle enquiry — trust aside + form */
 .md3 .enquiry-grid {
@@ -5539,7 +5665,7 @@ line-height: 31px;
   bottom: 0;
   z-index: 60;
   width: 390px;
-  height: 175px;
+  height: 196px;
   background: #F4F3F3;
   border: 1px solid #D4DDE7;
   border-radius: 16px 16px 0 0;
@@ -5592,6 +5718,9 @@ line-height: 31px;
   gap: 30px;
   padding-top: 10px;
 }
+.md3 .vdp-bottom-bar .fin-cond {
+  margin-top: 4px;
+}
 .md3 .bb-price-row .bb-price-cash-sup {
   position: relative;
   top: -15px;
@@ -6794,6 +6923,7 @@ line-height: 31px;
   white-space: nowrap;
   flex: none;
   border-radius: 15px;
+  opacity: 0.8;
 }
 
 
@@ -6885,6 +7015,82 @@ color: #005CFF;
 .md3 .fin-sheet-adjust .mslider + div {
   display: none !important;
 }
+/* Mit-Schlussrate / Rundum-Sorglos-Paket toggles + the CTA row — originally mobile-sheet-only,
+   now also rendered in the desktop .fin-modal .hide-mobile breakdown, so unscoped from the
+   mobile media query below (was silently unstyled at desktop widths otherwise). */
+.md3 .fin-toggle-final {
+  padding-top: 22px;
+  padding-bottom: 22px;
+  border-top: 1px solid var(--fig-tile-border);
+}
+.md3 .fin-toggle-final .md-title-sm {
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 17px;
+  color: #1D2A38;
+}
+.md3 .fin-toggle-final .mswitch-track {
+  width: 44px;
+  height: 26px;
+  border-radius: 13px;
+}
+.md3 .fin-toggle-final .mswitch input:checked + .mswitch-track {
+  background: #005CFF;
+}
+.md3 .fin-toggle-final .mswitch-thumb {
+  background: #FFFFFF;
+  border-radius: 10px;
+  width: 20px;
+  height: 20px;
+}
+.md3 .fin-toggle-final .mswitch input:checked + .mswitch-track .mswitch-thumb {
+  transform: translateX(18px);
+}
+.md3 .fin-toggle-addservices {
+  padding-top: 28px;
+  padding-bottom: 20px;
+  border-top: 1px solid var(--fig-tile-border);
+}
+.md3 .fin-toggle-addservices.fin-toggle-addservices--leasing,
+.md3 .fin-toggle-addservices.fin-toggle-addservices--cash {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+.md3 .fin-toggle-addservices.fin-toggle-addservices--cash {
+  border-bottom: 1px solid var(--fig-tile-border);
+}
+.md3 .fin-toggle-addservices .md-title-sm {
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 17px;
+  color: #1D2A38;
+}
+.md3 .fin-toggle-addservices > div {
+  gap: 13px !important;
+}
+.md3 .fin-toggle-addservices .num {
+  font-family: Arial, Helvetica, sans-serif !important;
+  font-weight: 400 !important;
+  font-size: 15px !important;
+  line-height: 17px !important;
+  text-align: right;
+  color: #1D2A38 !important;
+}
+.md3 .fin-sheet-cta-row {
+  border-top: 1px solid var(--fig-tile-border);
+  padding-top: 20px;
+  padding-bottom: 15px;
+}
+.md3 .fin-sheet-cta-row.fin-sheet-cta-row--cash {
+  border-top: 0;
+  padding-bottom: 45px;
+}
+.md3 .fin-sheet-call-btn .lucide {
+  width: 19px !important;
+  height: 19px !important;
+}
 
 @media (max-width: 600px) {
   /* full-bleed gallery: edge-to-edge, app-like. Extra height (vs. the plain photo height)
@@ -7126,79 +7332,6 @@ color: #005CFF;
   .md3 .fin-sheet-terms {
     padding-bottom: 20px;
   }
-  .md3 .fin-toggle-final {
-    padding-top: 22px;
-    padding-bottom: 22px;
-    border-top: 1px solid var(--fig-tile-border);
-  }
-  .md3 .fin-toggle-final .md-title-sm {
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight: 400;
-    font-size: 15px;
-    line-height: 17px;
-    color: #1D2A38;
-  }
-  .md3 .fin-toggle-final .mswitch-track {
-    width: 44px;
-    height: 26px;
-    border-radius: 13px;
-  }
-  .md3 .fin-toggle-final .mswitch input:checked + .mswitch-track {
-    background: #005CFF;
-  }
-  .md3 .fin-toggle-final .mswitch-thumb {
-    background: #FFFFFF;
-    border-radius: 10px;
-    width: 20px;
-    height: 20px;
-  }
-  .md3 .fin-toggle-final .mswitch input:checked + .mswitch-track .mswitch-thumb {
-    transform: translateX(18px);
-  }
-  .md3 .fin-toggle-addservices {
-    padding-top: 28px;
-    padding-bottom: 20px;
-    border-top: 1px solid var(--fig-tile-border);
-  }
-  .md3 .fin-toggle-addservices.fin-toggle-addservices--leasing,
-  .md3 .fin-toggle-addservices.fin-toggle-addservices--cash {
-    padding-top: 15px;
-    padding-bottom: 15px;
-  }
-  .md3 .fin-toggle-addservices.fin-toggle-addservices--cash {
-    border-bottom: 1px solid var(--fig-tile-border);
-  }
-  .md3 .fin-toggle-addservices .md-title-sm {
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight: 400;
-    font-size: 15px;
-    line-height: 17px;
-    color: #1D2A38;
-  }
-  .md3 .fin-toggle-addservices > div {
-    gap: 13px !important;
-  }
-  .md3 .fin-toggle-addservices .num {
-    font-family: Arial, Helvetica, sans-serif !important;
-    font-weight: 400 !important;
-    font-size: 15px !important;
-    line-height: 17px !important;
-    text-align: right;
-    color: #1D2A38 !important;
-  }
-  .md3 .fin-sheet-cta-row {
-    border-top: 1px solid var(--fig-tile-border);
-    padding-top: 20px;
-    padding-bottom: 15px;
-  }
-  .md3 .fin-sheet-cta-row.fin-sheet-cta-row--cash {
-    border-top: 0;
-    padding-bottom: 45px;
-  }
-  .md3 .fin-sheet-call-btn .lucide {
-    width: 19px !important;
-    height: 19px !important;
-  }
   /* sheet cash rows (Zahlung/Garantie/Lieferung) — Figma sizes (round 14: taller still) */
   .md3 .fin-modal .calcrow {
     padding: 20px 0;

package/utils/financeFormat.ts

@@ -1,62 +1,62 @@
-// Autobahn (auto.de redesign) — shared financing-number formatting.
-//
-// Extracted from vdp/VdpModules.tsx's FinanceDetailsModal so non-React consumers (e.g. the
-// Meta AIA marketing-image renderer) format the SAME real numbers the same way, instead of a
-// second copy drifting from the VDP's. Pure TS, no React/JSX — safe to import from a plain
-// Node service.
-//
-// The "only real figures, never a fabricated total" rule is load-bearing (legal: balloon
-// financing means monthly×term is NOT the total) and lives here once, not per-caller.
-
-/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
- *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
-export function formatEur(n: number): string {
-  return n.toLocaleString('de-DE');
-}
-
-/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
-export function formatPct(n: number): string {
-  return `${n.toFixed(2).replace('.', ',')} %`;
-}
-
-export interface FinanceExampleFields {
-  price: number;
-  apr: number;
-  down: number;
-  /** Real config figure — falls back to price-down ONLY when genuinely absent. */
-  netLoanAmount?: number;
-  nominalRate?: number;
-  finalInstallment?: number;
-  grossAmount?: number;
-}
-
-export interface FinanceExampleLabels {
-  vehiclePrice: string;
-  priceSuffix: string;
-  apr: string;
-  nominal: string;
-  net: string;
-  down: string;
-  final: string;
-  gross: string;
-}
-
-/**
- * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
- * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
- * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
- * `exampleLine`, byte-for-byte).
- */
-export function buildFinanceExampleLine(fields: FinanceExampleFields, labels: FinanceExampleLabels, footnoteMarker = '³'): string {
-  const netto = fields.netLoanAmount != null ? fields.netLoanAmount : Math.max(0, fields.price - fields.down);
-  const parts: string[] = [
-    `${labels.vehiclePrice}: ${formatEur(fields.price)} € ${labels.priceSuffix}`,
-    ...(fields.apr > 0 ? [`${labels.apr}: ${formatPct(fields.apr)}`] : []),
-    ...(fields.nominalRate != null && fields.nominalRate > 0 ? [`${labels.nominal}: ${formatPct(fields.nominalRate)}`] : []),
-    `${labels.net}: ${formatEur(netto)} €`,
-    `${labels.down}: ${formatEur(fields.down)} €`,
-    ...(fields.finalInstallment != null && fields.finalInstallment > 0 ? [`${labels.final}: ${formatEur(fields.finalInstallment)} €`] : []),
-    ...(fields.grossAmount != null && fields.grossAmount > 0 ? [`${labels.gross}: ${formatEur(fields.grossAmount)} €`] : []),
-  ];
-  return `${footnoteMarker} ${parts.join('; ')};`;
-}
+// Autobahn (auto.de redesign) — shared financing-number formatting.
+//
+// Extracted from vdp/VdpModules.tsx's FinanceDetailsModal so non-React consumers (e.g. the
+// Meta AIA marketing-image renderer) format the SAME real numbers the same way, instead of a
+// second copy drifting from the VDP's. Pure TS, no React/JSX — safe to import from a plain
+// Node service.
+//
+// The "only real figures, never a fabricated total" rule is load-bearing (legal: balloon
+// financing means monthly×term is NOT the total) and lives here once, not per-caller.
+
+/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
+ *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
+export function formatEur(n: number): string {
+  return n.toLocaleString('de-DE');
+}
+
+/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
+export function formatPct(n: number): string {
+  return `${n.toFixed(2).replace('.', ',')} %`;
+}
+
+export interface FinanceExampleFields {
+  price: number;
+  apr: number;
+  down: number;
+  /** Real config figure — falls back to price-down ONLY when genuinely absent. */
+  netLoanAmount?: number;
+  nominalRate?: number;
+  finalInstallment?: number;
+  grossAmount?: number;
+}
+
+export interface FinanceExampleLabels {
+  vehiclePrice: string;
+  priceSuffix: string;
+  apr: string;
+  nominal: string;
+  net: string;
+  down: string;
+  final: string;
+  gross: string;
+}
+
+/**
+ * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
+ * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
+ * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
+ * `exampleLine`, byte-for-byte).
+ */
+export function buildFinanceExampleLine(fields: FinanceExampleFields, labels: FinanceExampleLabels, footnoteMarker = '³'): string {
+  const netto = fields.netLoanAmount != null ? fields.netLoanAmount : Math.max(0, fields.price - fields.down);
+  const parts: string[] = [
+    `${labels.vehiclePrice}: ${formatEur(fields.price)} € ${labels.priceSuffix}`,
+    ...(fields.apr > 0 ? [`${labels.apr}: ${formatPct(fields.apr)}`] : []),
+    ...(fields.nominalRate != null && fields.nominalRate > 0 ? [`${labels.nominal}: ${formatPct(fields.nominalRate)}`] : []),
+    `${labels.net}: ${formatEur(netto)} €`,
+    `${labels.down}: ${formatEur(fields.down)} €`,
+    ...(fields.finalInstallment != null && fields.finalInstallment > 0 ? [`${labels.final}: ${formatEur(fields.finalInstallment)} €`] : []),
+    ...(fields.grossAmount != null && fields.grossAmount > 0 ? [`${labels.gross}: ${formatEur(fields.grossAmount)} €`] : []),
+  ];
+  return `${footnoteMarker} ${parts.join('; ')};`;
+}