@bytebrand/fe-ui-core-autobahn 1.0.43 → 1.0.44

package/locales/de/autobahn.json

@@ -488,10 +488,10 @@
     "immediately": "Sofort verfügbar"
   },
   "tier": {
-    "top": "Top Preis",
+    "top": "Top-Preis",
     "good": "Guter Preis",
-    "fair": "Fairer Preis",
-    "raised": "Erhöht",
+    "fair": "Fairer-Preis",
+    "raised": "Erhöhter Preis",
     "high": "Hoher Preis"
   },
   "sort": {
@@ -528,13 +528,13 @@
     }
   },
   "eco": {
-    "heading": "Umwelt & Verbrauch",
+    "heading": "Umwelt & Verbrauch*",
     "stat": {
       "powerConsumptionWeighted": "Stromverbrauch (gew.)",
       "fuelConsumptionWeighted": "Kraftstoff (gew.)",
       "fuelConsumptionDischarged": "Kraftstoff (entladen)",
       "co2WeightedCombined": "CO₂ (gew., komb.)",
-      "consumptionCombined": "Verbrauch komb. (WLTP)",
+      "consumptionCombined": "Verbrauch (WLTP-kombiniert)",
       "co2Emissions": "CO₂-Emissionen (WLTP)",
       "co2Class": "CO₂-Klasse (WLTP)"
     },
@@ -544,7 +544,8 @@
     "energyClassWltpSuffix": "Energieeffizienzklasse nach WLTP · Angaben gem. Pkw-EnVKV*",
     "energyClass": "Energieeffizienzklasse nach WLTP (kombiniert) · Angaben gem. Pkw-EnVKV*",
     "weightedShort": "gew. komb.",
-    "dischargedShort": "entladen komb."
+    "dischargedShort": "entladen komb.",
+    "co2ClassScaleLabel": "CO₂-Klasse (WLTP-kombiniert)"
   },
   "description": {
     "heading": "Fahrzeugbeschreibung",
@@ -570,7 +571,7 @@
   },
   "marketValue": {
     "heading": "Marktwert-Einordnung",
-    "belowAverage": "{{rating}} — {{amount}} € unter Marktdurchschnitt"
+    "belowAverage": "{{rating}} — {{amount}} € unter Marktwert"
   },
   "priceMarket": {
     "heading": "Preis & Marktwert",
@@ -680,11 +681,19 @@
     "ratePerMonth": "{{amount}} € /mtl.",
     "totalAmount": "Gesamtbetrag",
     "totalRepayment": "Gesamtrückzahlungsbetrag",
-    "legalLeasing": "Unverbindliches Leasingbeispiel (Kilometerleasing). Bonität vorausgesetzt. Dieses freibleibende Angebot wird vermittelt durch die auto.de GmbH, Max-Planck-Str. 19, 06796 Sandersdorf-Brehna, die als ungebundener Vermittler nicht beratend tätig ist. Irrtümer vorbehalten. Preise ggf. inkl. MwSt.",
-    "legalFinancing": "Repräsentatives Berechnungsbeispiel gem. § 17a Abs. 4 PAngV, das 2/3 aller Kunden — Bonität vorausgesetzt — erhalten. Für Ihre Finanzierungswünsche stellen wir eine Bonitätsanfrage. Dieses freibleibende Angebot der Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach, wird vermittelt durch die auto.de GmbH, Max-Planck-Str. 19, 06796 Sandersdorf-Brehna, die als ungebundener Vermittler nicht beratend tätig ist. Irrtümer vorbehalten. Preise ggf. inkl. MwSt.",
+    "legalLeasing": "Für Ihre Finanzierungswünsche stellen wir eine Bonitätsanfrage. Bonität vorausgesetzt, ist dies ein repräsentatives Berechnungsbeispiel gem. der Angaben, welches 2/3 aller Kunden, im Sinne des § 17a Abs. 4 PangV, erhalten. Dieses freibleibende Angebot der Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach wird vermittelt durch die auto.de GmbH, Max-Planck-Str. 19, 06796 Sandersdorf-Brehna, die als ungebundener Vermittler nicht beratend tätig ist. Irrtümer vorbehalten. Preise ggf. inkl. MwSt.",
+    "legalFinancing": "Für Ihre Finanzierungswünsche stellen wir eine Bonitätsanfrage. Bonität vorausgesetzt, ist dies ein repräsentatives Berechnungsbeispiel gem. der Angaben, welches 2/3 aller Kunden, im Sinne des § 17a Abs. 4 PangV, erhalten. Dieses freibleibende Angebot der Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach wird vermittelt durch die auto.de GmbH, Max-Planck-Str. 19, 06796 Sandersdorf-Brehna, die als ungebundener Vermittler nicht beratend tätig ist. Irrtümer vorbehalten. Preise ggf. inkl. MwSt.",
     "sheetTitleFinancing": "Kredit-Rate anpassen",
     "sheetTitleLeasing": "Leasing-Rate anpassen",
-    "sheetTitleCash": "Kaufen - Details"
+    "sheetTitleCash": "Kaufen - Details",
+    "exampleVehiclePrice": "Fahrzeugpreis",
+    "examplePriceSuffix": "ggf. inkl. anderer Services",
+    "exampleApr": "Effektiver Jahreszins",
+    "exampleNominal": "Sollzinssatz p. a. (gebunden für die gesamte Vertragslaufzeit)",
+    "exampleNet": "Nettodarlehensbetrag",
+    "exampleDown": "Anzahlung",
+    "exampleFinal": "Schlussrate",
+    "exampleGross": "Gesamtrückzahlungsbetrag"
   },
   "ratings": {
     "showLess": "Weniger anzeigen",

package/locales/en/autobahn.json

@@ -491,7 +491,7 @@
     "top": "Top price",
     "good": "Good price",
     "fair": "Fair price",
-    "raised": "Increased",
+    "raised": "Increased price",
     "high": "High price"
   },
   "sort": {
@@ -528,13 +528,13 @@
     }
   },
   "eco": {
-    "heading": "Environment & consumption",
+    "heading": "Environment & consumption*",
     "stat": {
       "powerConsumptionWeighted": "Power consumption (weighted)",
       "fuelConsumptionWeighted": "Fuel (weighted)",
       "fuelConsumptionDischarged": "Fuel (discharged)",
       "co2WeightedCombined": "CO₂ (weighted, combined)",
-      "consumptionCombined": "Consumption comb. (WLTP)",
+      "consumptionCombined": "Consumption (WLTP combined)",
       "co2Emissions": "CO₂ emissions (WLTP)",
       "co2Class": "CO₂ class (WLTP)"
     },
@@ -544,7 +544,8 @@
     "energyClassWltpSuffix": "Energy efficiency class per WLTP · figures pursuant to the German Pkw-EnVKV*",
     "energyClass": "Energy efficiency class per WLTP (combined) · figures pursuant to the German Pkw-EnVKV*",
     "weightedShort": "wtd. comb.",
-    "dischargedShort": "depleted comb."
+    "dischargedShort": "depleted comb.",
+    "co2ClassScaleLabel": "CO₂ class (WLTP combined)"
   },
   "description": {
     "heading": "Vehicle description",
@@ -570,7 +571,7 @@
   },
   "marketValue": {
     "heading": "Market-value positioning",
-    "belowAverage": "{{rating}} — {{amount}} € below the market average"
+    "belowAverage": "{{rating}} — {{amount}} € below market value"
   },
   "priceMarket": {
     "heading": "Price & market value",
@@ -680,11 +681,19 @@
     "ratePerMonth": "{{amount}} € /mo.",
     "totalAmount": "Total amount",
     "totalRepayment": "Total repayment amount",
-    "legalLeasing": "Non-binding leasing example (mileage leasing). Subject to creditworthiness. This non-binding offer is brokered by auto.de GmbH, Max-Planck-Str. 19, 06796 Sandersdorf-Brehna, which acts as a non-tied intermediary and does not provide advice. Errors excepted. Prices incl. VAT where applicable.",
-    "legalFinancing": "Representative calculation example pursuant to § 17a (4) PAngV, obtained by 2/3 of all customers — subject to creditworthiness. For your financing requests we will submit a credit inquiry. This non-binding offer from Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach, is brokered by auto.de GmbH, Max-Planck-Str. 19, 06796 Sandersdorf-Brehna, which acts as a non-tied intermediary and does not provide advice. Errors excepted. Prices incl. VAT where applicable.",
+    "legalLeasing": "We run a credit check for your financing request. Subject to creditworthiness, this is a representative example per § 17a (4) PangV received by 2/3 of all customers. This non-binding offer of Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach is brokered by auto.de GmbH, Max-Planck-Str. 19, 06796 Sandersdorf-Brehna, acting as an untied intermediary without advising. Errors excepted. Prices may incl. VAT.",
+    "legalFinancing": "We run a credit check for your financing request. Subject to creditworthiness, this is a representative example per § 17a (4) PangV received by 2/3 of all customers. This non-binding offer of Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach is brokered by auto.de GmbH, Max-Planck-Str. 19, 06796 Sandersdorf-Brehna, acting as an untied intermediary without advising. Errors excepted. Prices may incl. VAT.",
     "sheetTitleFinancing": "Adjust credit rate",
     "sheetTitleLeasing": "Adjust leasing rate",
-    "sheetTitleCash": "Purchase - Details"
+    "sheetTitleCash": "Purchase - Details",
+    "exampleVehiclePrice": "Vehicle price",
+    "examplePriceSuffix": "possibly incl. other services",
+    "exampleApr": "Effective annual rate",
+    "exampleNominal": "Nominal rate p.a. (fixed for the entire contract term)",
+    "exampleNet": "Net loan amount",
+    "exampleDown": "Down payment",
+    "exampleFinal": "Final installment",
+    "exampleGross": "Total repayment amount"
   },
   "ratings": {
     "showLess": "Show less",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.43",
+  "version": "1.0.44",
   "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

@@ -1195,8 +1195,15 @@
   border-radius: var(--md-r-full); font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; }
 .md3 .fin-eval-pill .lucide { flex: none; }
 /* gradient spectrum bar + circle thumb — replaces opacity-segment design */
-.md3 .fin-eval-bar { position: relative; width: 100%; height: 9px; border-radius: 5px;
-  background: linear-gradient(to right, #0F7B43, #72C02C, #FFC107, #FF6B35, #C62828); }
+/* segmented evaluation bar (Figma round 12: discrete tier segments, not a gradient) —
+   the gradient background below is dead once .fin-eval-seg children render on top */
+.md3 .fin-eval-seg { flex: 1; height: 100%; border-radius: 3px; }
+.md3 .fin-eval-bar { display: flex; gap: 3px; overflow: visible; }
+.md3 .slider-bubble { position: absolute; top: 0; transform: translateX(-50%); z-index: 1;
+  padding: 4px 10px; border: 1px solid var(--md-outline-variant); border-radius: 8px;
+  background: var(--md-sc-lowest); box-shadow: var(--md-e1); font-size: 13px; font-weight: 700;
+  white-space: nowrap; }
+.md3 .fin-eval-bar { position: relative; width: 100%; height: 9px; border-radius: 5px; }
 .md3 .fin-eval-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%);
   width: 17px; height: 17px; border-radius: 50%; background: #fff;
   border: 3px solid currentColor; box-shadow: 0 1px 4px rgba(0,0,0,.3); pointer-events: none; }
@@ -1630,6 +1637,32 @@
   .md3 .bb-cta-row .mbtn--outlined:not(.bb-adjust) { box-shadow: inset 0 0 0 1.5px var(--md-primary); }
   /* mobile page is WHITE like the Figma master — beats the .vdp-tint inline gray */
   .md3 .vdp-tint { background: var(--md-sc-lowest) !important; }
+  /* ---- round 12 (9-screenshot review) ---- */
+  /* Laufzeit chips = one-row segmented control (Figma), unit suffix hidden */
+  .md3 .fin-sheet-terms .term-chips { display: flex; flex-wrap: nowrap; gap: 0;
+    border: 1px solid var(--fig-border); border-radius: 10px; overflow: hidden; }
+  .md3 .fin-sheet-terms .term-chip { flex: 1 1 0; min-width: 0; height: 46px; border: 0;
+    border-left: 1px solid var(--fig-border); border-radius: 0; padding: 0; font-size: 14px; }
+  .md3 .fin-sheet-terms .term-chip:first-child { border-left: 0; }
+  .md3 .fin-sheet-terms .term-chip .tc-unit { display: none; }
+  /* sheet: no divider under the header; one under the rate row instead (Figma) */
+  .md3 .fin-modal-head { border-bottom: 0; padding-bottom: 8px; }
+  .md3 .fin-sheet-adjust { border-top: 1px solid var(--fig-tile-border); padding-top: 16px; }
+  /* sheet cash rows (Zahlung/Garantie/Lieferung) — Figma sizes */
+  .md3 .fin-modal .calcrow { padding: 13px 0; }
+  .md3 .fin-modal .calcrow-label { font-size: 14px; color: var(--fig-gray); }
+  .md3 .fin-modal .calcrow-value { font-size: 15px !important; color: var(--fig-navy); font-weight: 700 !important; }
+  /* condition tiles: Figma value size + roomier gap to the pills above */
+  .md3 .zustand-tile .md-title-sm { font-size: 16.5px; }
+  .md3 .vdp-header-extras .zustand-grid { margin-top: 10px; }
+  /* enquiry: aside without background (Figma), blue-bordered active contact chip,
+     underlined legal links */
+  .md3 .enquiry-aside { background: transparent; border-bottom: 0; }
+  .md3 .enquiry-form .chip--selected { box-shadow: inset 0 0 0 1.5px var(--md-primary);
+    background: var(--fig-chip-bg); color: var(--md-primary); }
+  .md3 .enq-consent a { text-decoration: underline; }
+  /* HowItWorks: text column beside the circle (title above description) */
+  .md3 .hiw-body { display: flex; flex-direction: column; min-width: 0; }
   /* phone hero rate: 44px — with the € folded into the big span (round 11) 52px pushed the
      stacked /mtl. unit onto a second line; 44px fits "143 €" + stack beside the rating column */
   .md3 .fin-rate-main .num { font-size: 44px !important; letter-spacing: -1.2px !important; }

package/vdp/FinanceCalculator.tsx

@@ -30,36 +30,67 @@ export interface SliderProps {
   onChange: (value: number) => void;
   /** formats the min/max end labels (and is reused by callers for the value). */
   fmt?: (v: number) => React.ReactNode;
+  /** render the current value in a floating bubble above the thumb (Figma sheet sliders). */
+  bubble?: boolean;
 }
 
 /**
  * Range slider with a filled track and min/max end labels. The track fill is a
  * linear-gradient driven by the value's position; the design's `.mslider` class
- * styles the thumb/rail.
+ * styles the thumb/rail. With `bubble` the current value floats above the thumb
+ * (mockup "Rate anpassen" sliders) instead of the caller printing it elsewhere.
  */
-export const Slider: React.FunctionComponent<SliderProps> = ({ min, max, step = 1, value, onChange, fmt = (v) => v }) => {
+export const Slider: React.FunctionComponent<SliderProps> = ({ min, max, step = 1, value, onChange, fmt = (v) => v, bubble }) => {
   const span = max - min;
   const pct = span > 0 ? ((value - min) / span) * 100 : 0;
   return (
     <div>
-      <input
-        type="range"
-        className="mslider"
-        min={min}
-        max={max}
-        step={step}
-        value={value}
-        onChange={(e) => onChange(Number(e.target.value))}
-        style={{ background: `linear-gradient(90deg, var(--md-primary) ${pct}%, var(--md-sc-highest) ${pct}%)` }}
-      />
-      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
-        <span className="md-label-sm">{fmt(min)}</span>
-        <span className="md-label-sm">{fmt(max)}</span>
+      <div style={{ position: 'relative', paddingTop: bubble ? 38 : 0 }}>
+        {bubble && (
+          // thumb is 22px wide: interpolate the bubble anchor between half-thumb insets so it
+          // tracks the thumb center (a plain pct% drifts at the rail ends)
+          <span className="slider-bubble num" style={{ left: `calc(11px + (100% - 22px) * ${pct / 100})` }}>
+            {fmt(value)}
+          </span>
+        )}
+        <input
+          type="range"
+          className="mslider"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={(e) => onChange(Number(e.target.value))}
+          style={{ background: `linear-gradient(90deg, var(--md-primary) ${pct}%, var(--md-sc-highest) ${pct}%)` }}
+        />
       </div>
+      {!bubble && (
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
+          <span className="md-label-sm">{fmt(min)}</span>
+          <span className="md-label-sm">{fmt(max)}</span>
+        </div>
+      )}
     </div>
   );
 };
 
+/**
+ * Segmented price-evaluation bar (Figma: 5 discrete tier segments, NOT a gradient) with a
+ * white ring marker. `leftPct` overrides the marker position (the Marktwert gauge positions
+ * it continuously); default = centered on the tier segment.
+ */
+export const EvalBar: React.FunctionComponent<{ tier: number; leftPct?: number }> = ({ tier, leftPct }) => (
+  <div className="fin-eval-bar">
+    {TIER_COLORS.map((c, i) => (
+      <span key={i} className="fin-eval-seg" style={{ background: c }} />
+    ))}
+    <div
+      className="fin-eval-thumb"
+      style={{ left: `${leftPct != null ? leftPct : (tier + 0.5) * 20}%`, borderColor: TIER_COLORS[Math.max(0, Math.min(4, tier))] }}
+    />
+  </div>
+);
+
 export interface TermChipsProps {
   /** the selectable term values (months), e.g. [12,24,36,48,60,72]. */
   options: number[];
@@ -97,6 +128,7 @@ export interface CalcRowProps {
 /** One label/value row inside the "Rate anpassen" / "Details" expander. */
 export const CalcRow: React.FunctionComponent<CalcRowProps> = ({ label, last, children }) => (
   <div
+    className="calcrow"
     style={{
       display: 'flex',
       justifyContent: 'space-between',
@@ -106,8 +138,8 @@ export const CalcRow: React.FunctionComponent<CalcRowProps> = ({ label, last, ch
       borderBottom: last ? 0 : '1px solid var(--md-outline-variant)',
     }}
   >
-    <span className="md-label-sm">{label}</span>
-    <span className="num" style={{ fontSize: 13.5, fontWeight: 600 }}>
+    <span className="md-label-sm calcrow-label">{label}</span>
+    <span className="num calcrow-value" style={{ fontSize: 13.5, fontWeight: 600 }}>
       {children}
     </span>
   </div>
@@ -361,7 +393,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
             </div>
           )}
         </div>
-        {/* col 2 row 1: price-rating pill */}
+        {/* col 2 row 1: price-rating pill (Figma: bold colored label, NO icon) */}
         <div>
           {ratingLabel && (
             <span
@@ -369,26 +401,14 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
               style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
               aria-label={t('autobahn:finance.priceRatingAria', { rating: evalTierLabel })}
             >
-              <Icon
-                name={evalTier <= 1 ? 'check' : evalTier === 2 ? 'minus' : 'trending-up'}
-                size={14}
-                stroke={2.6}
-                color={TIER_COLORS[evalTier]}
-              />
               {evalTierLabel}
             </span>
           )}
         </div>
         {/* col 1 row 2: condition line */}
         <div className="fin-cond">{condLine}</div>
-        {/* col 2 row 2: gradient evaluation bar */}
-        <div>
-          {ratingLabel && (
-            <div className="fin-eval-bar">
-              <div className="fin-eval-thumb" style={{ left: `${(evalTier + 0.5) * 20}%`, borderColor: TIER_COLORS[evalTier] }} />
-            </div>
-          )}
-        </div>
+        {/* col 2 row 2: segmented evaluation bar (Figma: discrete tiers, not a gradient) */}
+        <div>{ratingLabel && <EvalBar tier={evalTier} />}</div>
       </div>
 
       {/* ============================== DESKTOP (≥601px) — unchanged ============================== */}

package/vdp/VdpModules.tsx

@@ -27,7 +27,7 @@ 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, PriceRatingBands, VehicleDetail, VdpSpec, VdpReview } from './types';
-import { CalcRow, expanderBtnStyle, FinanceMode, Slider, TermChips } from './FinanceCalculator';
+import { CalcRow, EvalBar, expanderBtnStyle, FinanceMode, Slider, TermChips } from './FinanceCalculator';
 
 const eur = (n: number): string => n.toLocaleString('de-DE');
 
@@ -102,6 +102,30 @@ export const VdpHeaderSummary: React.FunctionComponent<VdpHeaderCardProps> = ({
   );
 };
 
+/** the 6-fact icon grid (km/EZ · Getriebe/Kraftstoff · Hand/Karosserie) — reused by the
+ *  mobile highlights card, which repeats the vehicle identity per the Figma master
+ *  ("Vehicle Highlights / Card" carries its own title + facts above the pills). */
+export const VdpFactsGrid: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => {
+  const facts: 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 })],
+    ...(vehicle.body ? ([['car-front', vehicle.body]] as const) : []),
+  ];
+  return (
+    <div className="vdp-meta" style={{ marginTop: 0 }}>
+      {facts.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. */
@@ -362,9 +386,9 @@ export const Co2Label: React.FunctionComponent<Co2LabelProps> = ({ vehicle, t })
         [t('autobahn:eco.stat.co2WeightedCombined'), p.co2w],
       ]
     : [
+        // Figma: two stats only — the class letter lives on the scale, not as a stat row
         [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 }}>
@@ -381,6 +405,10 @@ export const Co2Label: React.FunctionComponent<Co2LabelProps> = ({ vehicle, t })
           </div>
         ))}
       </div>
+      {/* scale caption (Figma) — replaces the old CO₂-Klasse stat row + EnVKV footer line */}
+      <div className="md-label-sm" style={{ margin: '0 0 8px' }}>
+        {t('autobahn:eco.co2ClassScaleLabel')}
+      </div>
       <div className="co2-scale">
         {CO2_CLASSES.map((c, i) => (
           <div key={c} className="co2-col">
@@ -407,17 +435,8 @@ export const Co2Label: React.FunctionComponent<Co2LabelProps> = ({ vehicle, t })
           </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>
-      )}
+      {/* no EnVKV footer line — Figma drops it (the * on the heading refers to the page-footer
+          disclaimer instead); the scale caption above carries the WLTP-kombiniert wording */}
     </div>
   );
 };
@@ -617,28 +636,12 @@ export const PriceHistory: React.FunctionComponent<PriceHistoryProps> = ({ vehic
         <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>
+        {/* segmented tier bar (Figma — discrete colors, not a gradient), continuous marker;
+            ring color follows the car's actual rating tone */}
+        <EvalBar
+          tier={{ top: 0, good: 1, fair: 2, raised: 3, high: 4 }[vehicle.rating as 'top' | 'good' | 'fair' | 'raised' | 'high'] ?? 2}
+          leftPct={mpos * 100}
+        />
         <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>
@@ -650,13 +653,13 @@ export const PriceHistory: React.FunctionComponent<PriceHistoryProps> = ({ vehic
               alignItems: 'center',
               gap: 8,
               marginTop: 12,
-              padding: '10px 12px',
+              padding: '13px 14px',
               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)' }}>
+            <Icon name="check-circle" size={18} color="var(--md-good)" />
+            <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--md-good)' }}>
               {t('autobahn:marketValue.belowAverage', { rating: t('autobahn:tier.' + vehicle.rating), amount: eur(delta) })}
             </span>
           </div>
@@ -720,8 +723,41 @@ const RATING_TIERS: ReadonlyArray<readonly [keyof PriceRatingBands, string]> = [
   ['highPrice', 'var(--md-error)'],
 ];
 
+/** collapsible sub-card header (blue icon + bold title + chevron) — Figma round 12. */
+const BreakdownCardHead: React.FunctionComponent<{
+  icon: string;
+  title: string;
+  open: boolean;
+  onToggle: () => void;
+}> = ({ icon, title, open, onToggle }) => (
+  <button
+    type="button"
+    onClick={onToggle}
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: 10,
+      width: '100%',
+      background: 'none',
+      border: 0,
+      padding: 0,
+      cursor: 'pointer',
+      font: 'inherit',
+      textAlign: 'left',
+    }}
+  >
+    <Icon name={icon} size={19} color="var(--md-primary)" stroke={2} style={{ flex: 'none' }} />
+    <span className="md-title-sm" style={{ flex: 1, minWidth: 0, fontSize: 15 }}>
+      {title}
+    </span>
+    <Icon name={open ? 'chevron-up' : 'chevron-down'} size={18} color="var(--md-primary)" style={{ flex: 'none' }} />
+  </button>
+);
+
 const PriceRatingBreakdown: React.FunctionComponent<{ vehicle: VehicleDetail; t: TranslationFunction }> = ({ vehicle, t }) => {
   const [open, setOpen] = useState(false);
+  const [criteriaOpen, setCriteriaOpen] = useState(true);
+  const [categoriesOpen, setCategoriesOpen] = useState(true);
   const bands = vehicle.priceRatingBands;
   if (!bands) return null;
 
@@ -752,11 +788,15 @@ const PriceRatingBreakdown: React.FunctionComponent<{ vehicle: VehicleDetail; t:
       </button>
       {open && (
         <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 18 }}>
-          <div className="mcard mcard--filled" style={{ padding: 16 }}>
-            <div className="md-title-sm" style={{ marginBottom: 12 }}>
-              {t('autobahn:priceMarket.criteriaTitle')}
-            </div>
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14 }}>
+          <div className="mcard mcard--filled" style={{ padding: 16, flexDirection: 'column' }}>
+            <BreakdownCardHead
+              icon="list"
+              title={t('autobahn:priceMarket.criteriaTitle')}
+              open={criteriaOpen}
+              onToggle={() => setCriteriaOpen((o) => !o)}
+            />
+            {criteriaOpen && (
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 14 }}>
               {criteria.map(([ic, label, value]) => (
                 <div key={label} style={{ display: 'flex', alignItems: 'flex-start', gap: 9, minWidth: '44%', flex: '1 1 44%' }}>
                   <Icon name={ic} size={17} color="var(--md-primary)" stroke={1.8} style={{ marginTop: 1, flex: 'none' }} />
@@ -771,14 +811,18 @@ const PriceRatingBreakdown: React.FunctionComponent<{ vehicle: VehicleDetail; t:
                 </div>
               ))}
             </div>
+            )}
           </div>
 
-          <div className="mcard mcard--filled" style={{ padding: 16 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
-              <Icon name="bar-chart-3" size={18} color="var(--md-primary)" />
-              <div className="md-title-sm">{t('autobahn:priceMarket.categoriesTitle')}</div>
-            </div>
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <div className="mcard mcard--filled" style={{ padding: 16, flexDirection: 'column' }}>
+            <BreakdownCardHead
+              icon="bar-chart-3"
+              title={t('autobahn:priceMarket.categoriesTitle')}
+              open={categoriesOpen}
+              onToggle={() => setCategoriesOpen((o) => !o)}
+            />
+            {categoriesOpen && (
+            <div style={{ display: 'flex', flexDirection: 'column', marginTop: 8 }}>
               {RATING_TIERS.map(([key, color], i) => (
                 <div
                   key={key}
@@ -824,6 +868,7 @@ const PriceRatingBreakdown: React.FunctionComponent<{ vehicle: VehicleDetail; t:
                 </p>
               </div>
             </div>
+            )}
           </div>
         </div>
       )}
@@ -1198,17 +1243,9 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
               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>
+            <EvalBar tier={evalTier} />
           </div>
         )}
       </div>
@@ -1308,6 +1345,8 @@ export interface FinanceDetailsModalProps {
   monthly: number;
   /** struck old rate (oldMonthlyInstallment, isStrikeShown-gated) — red line-through next to the rate. */
   oldMonthly?: number;
+  /** struck list price (common.highestPrice, isStrikeShown-gated) — cash-tab strike (Figma). */
+  listPrice?: number;
   apr: number;
   down: number;
   term: number;
@@ -1374,6 +1413,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   price,
   monthly,
   oldMonthly,
+  listPrice,
   apr,
   down,
   term,
@@ -1514,6 +1554,20 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     </div>
   ));
 
+  // mobile sheet footnote — the Figma representative example: real figures inline
+  // ("³ Fahrzeugpreis: … €; Effektiver Jahreszins: … %; …") followed by the PangV sentence.
+  // Only REAL config figures are included; absent ones are simply omitted.
+  const exampleParts: string[] = [
+    `${t('autobahn:modal.exampleVehiclePrice')}: ${eur(price)} € ${t('autobahn:modal.examplePriceSuffix')}`,
+    ...(apr > 0 ? [`${t('autobahn:modal.exampleApr')}: ${pct(apr)}`] : []),
+    ...(nominalRate != null && nominalRate > 0 ? [`${t('autobahn:modal.exampleNominal')}: ${pct(nominalRate)}`] : []),
+    `${t('autobahn:modal.exampleNet')}: ${eur(netto)} €`,
+    `${t('autobahn:modal.exampleDown')}: ${eur(down)} €`,
+    ...(finalInstallment != null && finalInstallment > 0 ? [`${t('autobahn:modal.exampleFinal')}: ${eur(finalInstallment)} €`] : []),
+    ...(grossAmount != null && grossAmount > 0 ? [`${t('autobahn:modal.exampleGross')}: ${eur(grossAmount)} €`] : []),
+  ];
+  const exampleLine = `³ ${exampleParts.join('; ')};`;
+
   return (
     <div className="fin-modal-scrim" onClick={onClose}>
       <div className="fin-modal" role="dialog" aria-modal="true" aria-label={title} ref={sheetRef} onClick={(e) => e.stopPropagation()}>
@@ -1625,15 +1679,24 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
 
             <div className="fin-price-grid">
               <div className="fin-rate-main">
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                {/* Figma Kaufen sheet: struck list price on its own line ABOVE the big figure */}
+                {isCash && listPrice != null && listPrice > price && (
+                  <s className="num fin-rate-old" style={{ display: 'block' }}>{eur(listPrice)} €</s>
+                )}
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                   <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
                     {isCash ? eur(price) : eur(Math.round(monthly))} €
                   </span>
                   {!isCash && (
-                    <span className="fin-rate-unit">
-                      {oldMonthly != null && <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>}
-                      <span>{t('autobahn:finance.perMonth')}</span>
-                    </span>
+                    <>
+                      <span className="md-label-sm" style={{ fontWeight: 600, alignSelf: 'flex-end', paddingBottom: 5 }}>
+                        {t('autobahn:finance.exampleLabel')}
+                      </span>
+                      <span className="fin-rate-unit">
+                        {oldMonthly != null && <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>}
+                        <span>{t('autobahn:finance.perMonth')}</span>
+                      </span>
+                    </>
                   )}
                 </div>
               </div>
@@ -1643,24 +1706,12 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     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>{ratingLabel && <EvalBar tier={evalTier} />}</div>
             </div>
 
             {isCash ? (
@@ -1675,14 +1726,14 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 {addServicesCost != null && (
                   <ToggleRow
                     label={t('autobahn:finance.addServicesToggle')}
-                    price={t('autobahn:finance.addServicesOnce', { value: eur(addServicesCost) })}
+                    price={t('autobahn:finance.addServicesOnce', { value: eur(Math.round(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}>
+                  <Button variant="filled" size="lg" icon="file-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 */}
@@ -1703,7 +1754,6 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                           {eur(down)} €
                         </span>
                       </div>
-                      <span className="fin-val-box num">{eur(down)} €</span>
                       <Slider
                         min={downMin as number}
                         max={downMax as number}
@@ -1711,6 +1761,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                         value={down}
                         onChange={onDownChange as (n: number) => void}
                         fmt={(v) => `${eur(Number(v))} €`}
+                        bubble
                       />
                     </div>
                     {isLease && annualMileage != null && onAnnualMileageChange && (
@@ -1724,7 +1775,6 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                             {eur(annualMileage)} km
                           </span>
                         </div>
-                        <span className="fin-val-box num">{eur(annualMileage)} km</span>
                         <Slider
                           min={annualMileageMin}
                           max={annualMileageMax}
@@ -1732,6 +1782,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                           value={annualMileage}
                           onChange={onAnnualMileageChange}
                           fmt={(v) => `${eur(Number(v))} km`}
+                          bubble
                         />
                       </div>
                     )}
@@ -1755,7 +1806,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 {addServicesCost != null && onToggleAddServices && (
                   <ToggleRow
                     label={t('autobahn:finance.addServicesToggle')}
-                    price={t('autobahn:finance.addServicesPerMonth', { value: eur(addServicesCost) })}
+                    price={t('autobahn:finance.addServicesPerMonth', { value: eur(Math.round(addServicesCost)) })}
                     checked={!!withAddServices}
                     disabled={addServicesDisabled}
                     onChange={onToggleAddServices}
@@ -1763,7 +1814,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 )}
 
                 <div style={{ display: 'flex', gap: 10 }}>
-                  <Button variant="filled" size="lg" icon="shield-check" style={{ flex: 1 }} onClick={onSecure}>
+                  <Button variant="filled" size="lg" icon="file-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 */}
@@ -1777,11 +1828,13 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     {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. */}
+                {/* mobile mockup shows NO row-by-row breakdown table (round 9 review) — the Figma
+                    footnote: real figures inline, then the PangV sentence (round 12). */}
                 {showBreakdown && (
                   <div>
                     <p className="md-label-sm" style={{ margin: 0, lineHeight: 1.55 }}>
+                      {exampleLine}
+                      <br />
                       {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
                     </p>
                   </div>
@@ -1840,11 +1893,13 @@ export const ReviewsTeaser: React.FunctionComponent<ReviewsTeaserProps> = ({ cou
       }}
     >
       <span style={{ minWidth: 0 }}>
-        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
-          <Stars value={average} size={16} />
-          <span className="num md-title-sm">{average.toLocaleString('de-DE', { minimumFractionDigits: 1, maximumFractionDigits: 1 })}/5</span>
+        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
+          <Stars value={average} size={19} />
+          <span className="num" style={{ fontWeight: 800, fontSize: 20, color: 'var(--fig-navy)' }}>
+            {average.toLocaleString('de-DE', { minimumFractionDigits: 1, maximumFractionDigits: 1 })}/5
+          </span>
         </span>
-        <span className="md-label-sm" style={{ display: 'block', marginTop: 2 }}>
+        <span style={{ display: 'block', marginTop: 4, fontSize: 14.5, color: 'var(--fig-navy)' }}>
           {t('autobahn:reviews.teaserCount', { count })}
         </span>
       </span>
@@ -2036,14 +2091,13 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
   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.
+  // Figma round 12: the required-* follows the chosen contact channel — E-Mail* when email is
+  // preferred, Telefonnummer* when phone is; names + consent are always required.
   const valid =
     firstName.trim().length > 0 &&
     lastName.trim().length > 0 &&
-    emailOk &&
     consent &&
-    (pref !== 'phone' || phoneOk);
+    (pref === 'phone' ? phoneOk : emailOk);
 
   const submit = async (): Promise<void> => {
     if (!valid || sending) return;
@@ -2159,7 +2213,8 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
             <input
               style={enquiryInput}
               type="email"
-              placeholder={t('autobahn:enquiry.form.emailPlaceholder')}
+              // the required-* follows the preferred channel (Figma round 12)
+              placeholder={pref === 'email' ? t('autobahn:enquiry.form.emailPlaceholder') : t('autobahn:enquiry.form.emailPlaceholder').replace(/\*$/, '')}
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               aria-label={t('autobahn:enquiry.contactMethod.email')}
@@ -2181,7 +2236,7 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
                 aria-label={t('autobahn:enquiry.form.areaCodeLabel')}
               />
             </FloatField>
-            <FloatField label={t('autobahn:enquiry.form.phoneNumberLabel')}>
+            <FloatField label={t('autobahn:enquiry.form.phoneNumberLabel') + (pref === 'phone' ? '*' : '')}>
               <input
                 type="tel"
                 value={phoneNum}
@@ -2202,7 +2257,7 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
           {/* 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' }}>
+            <a href="/nutzungsbedingungen/" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'underline' }}>
               {t('autobahn:enquiry.form.termsLink')}
             </a>{' '}
             {t('autobahn:enquiry.form.termsSuffix')}
@@ -2286,8 +2341,11 @@ export const HowItWorks: React.FunctionComponent<HowItWorksProps> = ({ steps, t
               <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>
+            {/* title stacked ABOVE the description (Figma) — one text column beside the circle */}
+            <div className="hiw-body">
+              <div className="hiw-title">{title}</div>
+              <p className="hiw-desc">{desc}</p>
+            </div>
           </div>
         ))}
       </div>

package/vdp/index.ts

@@ -24,6 +24,7 @@ export type {
 export {
   VdpHeaderCard,
   VdpHeaderSummary,
+  VdpFactsGrid,
   VdpHeaderHighlights,
   VdpHeaderCondition,
   VdpTrustRow,