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

package/vdp/VdpModules.tsx

@@ -27,10 +27,29 @@ 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, DocCheckIcon, EvalBar, expanderBtnStyle, FinanceMode, Slider, TermChips } from './FinanceCalculator';
 
 const eur = (n: number): string => n.toLocaleString('de-DE');
 
+/** Figma "check with open arc" glyph (modern lucide circle-check-big; the bundled lucide
+ *  0.288 only ships the closed-circle variant, so the two paths are inlined). */
+const ArcCheckIcon: React.FunctionComponent<{ size?: number; color?: string }> = ({ size = 20, color = 'currentColor' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth={2.4}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{ flex: 'none' }}
+  >
+    <path d="M21.801 10A10 10 0 1 1 17 3.335" />
+    <path d="m9 11 3 3L22 4" />
+  </svg>
+);
+
 /** mileage → 'X.XXX km' (de-DE grouping). */
 function fmtKm(n: number): string {
   return `${n.toLocaleString('de-DE')} km`;
@@ -102,6 +121,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 +405,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 +424,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 +454,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 +655,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 +672,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)' }}>
+            <ArcCheckIcon size={20} 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 +742,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 +807,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 +830,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 +887,7 @@ const PriceRatingBreakdown: React.FunctionComponent<{ vehicle: VehicleDetail; t:
                 </p>
               </div>
             </div>
+            )}
           </div>
         </div>
       )}
@@ -1198,22 +1262,15 @@ 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>
       <div className="bb-cta-row">
-        <Button variant="filled" icon="file-check" style={{ flex: 1, minWidth: 0 }} onClick={onSecure}>
+        <Button variant="filled" style={{ flex: 1, minWidth: 0 }} onClick={onSecure}>
+          <DocCheckIcon />
           {t('autobahn:bottom.secureOffer')}
         </Button>
         {/* padding:0 — icon-only button (same fix as the sheet's phone button) */}
@@ -1308,6 +1365,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 +1433,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   price,
   monthly,
   oldMonthly,
+  listPrice,
   apr,
   down,
   term,
@@ -1514,6 +1574,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,16 +1699,27 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
 
             <div className="fin-price-grid">
               <div className="fin-rate-main">
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <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>
+                  {/* Figma Kaufen sheet: struck list price top-right beside the big figure */}
+                  {isCash && listPrice != null && listPrice > price && (
+                    <span className="fin-rate-unit" style={{ alignSelf: 'flex-start', paddingTop: 2 }}>
+                      <s className="num fin-rate-old">{eur(listPrice)} €</s>
                     </span>
                   )}
+                  {!isCash && (
+                    <>
+                      <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>
               <div>
@@ -1643,24 +1728,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 +1748,15 @@ 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" style={{ flex: 1 }} onClick={onSecure}>
+                    <DocCheckIcon />
                     {t('autobahn:finance.secureOffer')}
                   </Button>
                   {/* padding:0 — mbtn--lg's 30px side padding left no room for the icon at width 52 */}
@@ -1703,7 +1777,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 +1784,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 +1798,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 +1805,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                           value={annualMileage}
                           onChange={onAnnualMileageChange}
                           fmt={(v) => `${eur(Number(v))} km`}
+                          bubble
                         />
                       </div>
                     )}
@@ -1755,7 +1829,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 +1837,8 @@ 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" style={{ flex: 1 }} onClick={onSecure}>
+                    <DocCheckIcon />
                     {t('autobahn:finance.requestRate')}
                   </Button>
                   {/* padding:0 — mbtn--lg's 30px side padding left no room for the icon at width 52 */}
@@ -1777,11 +1852,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 +1917,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 +2115,14 @@ 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.
+  // Round 13 (explicit spec): PHONE is always required (the * sits on the country-code field),
+  // e-mail is always optional (validated only when filled); names + consent always required.
   const valid =
     firstName.trim().length > 0 &&
     lastName.trim().length > 0 &&
-    emailOk &&
     consent &&
-    (pref !== 'phone' || phoneOk);
+    phoneOk &&
+    (email.trim().length === 0 || emailOk);
 
   const submit = async (): Promise<void> => {
     if (!valid || sending) return;
@@ -2159,7 +2238,8 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
             <input
               style={enquiryInput}
               type="email"
-              placeholder={t('autobahn:enquiry.form.emailPlaceholder')}
+              // e-mail is always optional (round 13) — no required-*
+              placeholder={t('autobahn:enquiry.form.emailPlaceholder').replace(/\*$/, '')}
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               aria-label={t('autobahn:enquiry.contactMethod.email')}
@@ -2167,7 +2247,8 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
           </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')}>
+            {/* phone is always required — the * sits on the country-code field (round 13) */}
+            <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)" />
@@ -2202,7 +2283,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 +2367,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,