@bytebrand/fe-ui-core-autobahn 1.0.74 → 1.0.75

package/vdp/VdpModules.tsx

@@ -1484,10 +1484,17 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
   onOpenAdjust,
   t,
 }) => {
+  const [uvpTooltipOpen, setUvpTooltipOpen] = useState(false);
   const isCash = mode === 'cash';
   const rate = monthly != null ? monthly : vehicle.monthly;
   const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
   const evalTier = tierIdx >= 0 ? tierIdx : 1;
+  // "good" collapses into the same "Top-Preis" label as the actual top tier (superscript marks
+  // the collapse) — identical convention to CarCard's PriceEvalCol / FinanceCalculator's pill.
+  const isGoodTier = TIER_KEYS[evalTier] === 'good';
+  const evalTierLabel = isGoodTier ? t('autobahn:tier.top') : t('autobahn:tier.' + TIER_KEYS[evalTier]);
+  const evalPillColor = isGoodTier ? TIER_COLORS[0] : TIER_COLORS[evalTier];
+  const evalPillBackground = isGoodTier ? TIER_BACKGROUNDS[0] : TIER_BACKGROUNDS[evalTier];
   const priceStyle: React.CSSProperties = isCash
     ? {
         fontFamily: 'Arial, Helvetica, sans-serif',
@@ -1534,43 +1541,84 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
       <div className="bb-price-row">
         <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0, flex: 1 }}>
           {isCash && vehicle.listPrice != null && vehicle.listPrice > vehicle.price && (
-            <s className="num fin-rate-old fin-rate-old-bb" style={{ alignSelf: 'flex-end', paddingBottom: 0, fontSize: 15 }}>
-              {eur(vehicle.listPrice)} €<sup>2</sup>
+            <s
+              className="num fin-rate-old fin-rate-old-bb"
+              style={{ alignSelf: 'flex-end', paddingBottom: 0, fontSize: 15 }}
+              role="button"
+              tabIndex={0}
+              onClick={(e) => {
+                e.stopPropagation();
+                setUvpTooltipOpen((v) => !v);
+              }}
+            >
+              {eur(vehicle.listPrice)} €
+              <span className="pp-eyebrow-badge">2</span>
+              {uvpTooltipOpen && (
+                <div className="pp-uvp-tooltip" onClick={(e) => e.stopPropagation()}>
+                  <button
+                    type="button"
+                    className="pp-uvp-tooltip-close"
+                    aria-label={t('autobahn:modal.close')}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setUvpTooltipOpen(false);
+                    }}
+                  >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M5 5L15 15M15 5L5 15" stroke="white" strokeWidth={2.4} strokeLinecap="round" />
+                    </svg>
+                  </button>
+                  <div className="pp-uvp-tooltip-body">{t('autobahn:card.price.uvpListTooltipBody')}</div>
+                </div>
+              )}
             </s>
           )}
           <div style={{ display: 'flex', alignItems: 'center', whiteSpace: 'nowrap', minWidth: 0 }}>
             <span className={'num' + priceLenClass} style={priceStyle}>
               {isCash ? eur(vehicle.price) : eur(Math.round(rate))}
             </span>
-            {/* Figma sticky footer: tiny "z.B." between the amount and the €, then the struck old
-                rate stacked ABOVE "/mtl." */}
-            {!isCash && (
-              <span
-                className="md-label-sm"
-                style={{
-                  fontFamily: 'Arial, Helvetica, sans-serif',
-                  fontWeight: 400,
-                  fontSize: 9,
-                  lineHeight: '10px',
-                  color: '#5B6B7F',
-                  alignSelf: 'flex-end',
-                  paddingBottom: 10,
-                }}
-              >
-                {t('autobahn:finance.exampleLabel')}
-              </span>
-            )}
-            <span className={'num' + priceLenClass} style={priceStyle}>
+            <span className={'num' + priceLenClass} style={{ ...priceStyle, marginLeft: 10 }}>
               €
             </span>
             {isCash && <sup className="bb-price-cash-sup">1</sup>}
             {/* <span className="md-label-sm" style={{ fontWeight: 600 }}>{t('autobahn:finance.fixedPrice')}</span> */}
             {!isCash && (
-              <span className="fin-rate-unit" style={{ fontSize: 12.5, paddingLeft: 10 }}>
+              <span className="fin-rate-unit" style={{ fontSize: 12.5, paddingLeft: 15 }}>
                 {oldMonthly != null && (
-                  <s className="num fin-rate-old fin-rate-old-bb">
-                    {eur(Math.round(oldMonthly))} €<sup>2</sup>
-                  </s>
+                  <span
+                    style={{ display: 'contents' }}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setUvpTooltipOpen((v) => !v)}
+                  >
+                    <span className="pp-eyebrow">
+                      {t('autobahn:card.price.uvpRateLabel')}
+                      <span className="pp-eyebrow-badge">3</span>
+                      {uvpTooltipOpen && (
+                        <div className="pp-uvp-tooltip" onClick={(e) => e.stopPropagation()}>
+                          <button
+                            type="button"
+                            className="pp-uvp-tooltip-close"
+                            aria-label={t('autobahn:modal.close')}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setUvpTooltipOpen(false);
+                            }}
+                          >
+                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <path d="M5 5L15 15M15 5L5 15" stroke="white" strokeWidth={2.4} strokeLinecap="round" />
+                            </svg>
+                          </button>
+                          <div className="pp-uvp-tooltip-body">
+                            {t(mode === 'leasing' ? 'autobahn:card.price.uvpRateTooltipBodyLeasing' : 'autobahn:card.price.uvpRateTooltipBody')}
+                          </div>
+                        </div>
+                      )}
+                    </span>
+                    <s className="num fin-rate-old fin-rate-old-bb">
+                      {eur(Math.round(oldMonthly))} €
+                    </s>
+                  </span>
                 )}
                 <span
                   style={{
@@ -1582,20 +1630,6 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
                   }}
                 >
                   {t('autobahn:bottom.perMonth').replace(/^\/\s*/, '/ ')}
-                  <sup
-                    style={{
-                      position: 'relative',
-                      top: -4,
-                      verticalAlign: 'super',
-                      fontFamily: 'Arial, Helvetica, sans-serif',
-                      fontWeight: 400,
-                      fontSize: 8,
-                      lineHeight: '9px',
-                      color: '#5B6B7F',
-                    }}
-                  >
-                    3
-                  </sup>
                 </span>
               </span>
             )}
@@ -1620,11 +1654,12 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
                 lineHeight: '14px',
                 textAlign: 'center',
                 borderRadius: 11,
-                color: TIER_COLORS[evalTier],
-                background: TIER_BACKGROUNDS[evalTier],
+                color: evalPillColor,
+                background: evalPillBackground,
               }}
             >
-              {t('autobahn:tier.' + TIER_KEYS[evalTier])}
+              {evalTierLabel}
+              {isGoodTier && <sup>4</sup>}
             </span>
             <EvalBar tier={evalTier} />
           </div>
@@ -1751,19 +1786,27 @@ const ToggleRow: React.FunctionComponent<{
   disabled?: boolean;
   onChange: (checked: boolean) => void;
   className?: string;
-}> = ({ label, price, checked, disabled, onChange, className }) => (
-  <div className={className} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
+  /** cash mode: the package is always included — shows a static "inklusive" note instead of the switch. */
+  staticNote?: string;
+}> = ({ label, price, checked, disabled, onChange, className, staticNote }) => (
+  <div className={className} style={{ display: 'flex', alignItems: 'center', justifyContent: staticNote ? undefined : 'space-between', gap: 10 }}>
     <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
       {label}
       <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
     </span>
-    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginLeft: staticNote ? 'auto' : undefined }}>
       {price && (
-        <span className="num" style={{ fontWeight: 700, fontSize: 13.5 }}>
+        <span className="num" style={{ fontWeight: 700, fontSize: 13.5, marginRight: staticNote ? 'auto' : undefined }}>
           {price}
         </span>
       )}
-      <Switch checked={checked} disabled={disabled} onChange={(e) => onChange(e.target.checked)} ariaLabel={label} />
+      {staticNote ? (
+        <span style={{ fontFamily: 'Arial', fontWeight: 400, fontSize: 15, lineHeight: '17px', color: '#0E2238' }}>
+          {staticNote}
+        </span>
+      ) : (
+        <Switch checked={checked} disabled={disabled} onChange={(e) => onChange(e.target.checked)} ariaLabel={label} />
+      )}
     </div>
   </div>
 );
@@ -1816,6 +1859,9 @@ export interface FinanceDetailsModalProps {
   initialShowBreakdown?: boolean;
   /** mobile only — price-rating label, drives the eval pill/bar (same as the collapsed card). */
   ratingLabel?: string;
+  /** Kaufen tab only — real carStore.isAvailable (same source as VdpTrustRow's "Sofort
+   *  verfügbar" badge); drives the Verfügbarkeit row that replaced the static Lieferung row. */
+  available?: boolean;
   /** mobile only — mode tabs inside the sheet (mirrors the collapsed card's tabs). */
   onModeChange?: (mode: FinanceMode) => void;
   /** mobile only — primary "Rate anfragen"/"Angebot anfragen" CTA. */
@@ -1828,6 +1874,10 @@ export interface FinanceDetailsModalProps {
   /** mobile only — "Rundum-Sorglos-Paket" toggle (all modes; forced-on + disabled for cash). */
   withAddServices?: boolean;
   addServicesCost?: number;
+  /** flat one-time package price (getFinancing/getLeasing's addServicesCostRaw) — addServicesCost
+   *  above is the MONTHLY slice shown next to the toggle ("+15 €/Monat"); the breakdown's
+   *  "Rundum-Sorglos-Paket (einmalig)" row needs the real flat price instead. */
+  addServicesCostRaw?: number;
   addServicesDisabled?: boolean;
   onToggleAddServices?: (checked: boolean) => void;
   /** i18n function (drilled from the page). */
@@ -1872,6 +1922,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   onClose,
   initialShowBreakdown,
   ratingLabel,
+  available,
   onModeChange,
   onSecure,
   onCall,
@@ -1879,6 +1930,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   onToggleFinalInstallment,
   withAddServices,
   addServicesCost,
+  addServicesCostRaw,
   addServicesDisabled,
   onToggleAddServices,
   t,
@@ -1887,8 +1939,25 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   // anpassen") or expanded (opened directly via the details link) — reset on every open, since
   // this component stays mounted (the page always renders it, gated by `open`, not unmounted).
   const [showBreakdown, setShowBreakdown] = React.useState(!!initialShowBreakdown);
+  // same "UVP-Rate"/list-price footnote badge + popover as FinanceCalculator's own hero — this
+  // modal's mobile "Rate anpassen" sheet renders its own separate copy of that hero row, so it
+  // needs its own tooltip-open state (not shared with FinanceCalculator's instance).
+  const [uvpTooltipOpen, setUvpTooltipOpen] = React.useState(false);
+  // opened directly via the "Finanzierungsdetails" link (initialShowBreakdown) — scroll the
+  // modal's own scroll container down to the breakdown table instead of leaving the user at
+  // the top (desktop/mobile render it in separate hide-mobile/show-mobile branches, so try both
+  // refs and scroll whichever one is actually laid out at the current breakpoint).
+  const desktopBreakdownRef = React.useRef<HTMLDivElement | null>(null);
+  const mobileBreakdownRef = React.useRef<HTMLDivElement | null>(null);
   React.useEffect(() => {
-    if (open) setShowBreakdown(!!initialShowBreakdown);
+    if (!open) return;
+    setShowBreakdown(!!initialShowBreakdown);
+    if (!initialShowBreakdown) return;
+    const timer = window.setTimeout(() => {
+      const target = [desktopBreakdownRef.current, mobileBreakdownRef.current].find((el) => el && el.offsetParent !== null);
+      target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }, 50);
+    return () => window.clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, initialShowBreakdown]);
 
@@ -1963,31 +2032,80 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   // Grand total (Figma "Gesamtbelastung inkl. Anzahlung & Paket") — down payment + the config's
   // real Gesamtbetrag + the package fee. Only shown when Gesamtbetrag is known (never fabricated).
   const totalCost = grossAmount != null && grossAmount > 0 ? down + grossAmount + (hasAddServices ? (addServicesCost as number) : 0) : undefined;
-  const rows: Array<[string, string, boolean?]> = [
-    [t('autobahn:modal.vehiclePrice'), `${eur(price)} €`],
-    [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
-    [t('autobahn:modal.downPayment'), `${eur(down)} €`],
-    ...(isLease && annualMileage != null ? ([[t('autobahn:modal.annualMileage'), `${eur(annualMileage)} km`]] as Array<[string, string]>) : []),
-    [
-      isLease ? t('autobahn:modal.leasingRateCount', { count: term }) : t('autobahn:modal.monthlyRateCount', { count: term }),
-      `${eur(monthly)} €`,
-    ],
-    ...(finalInstallment != null && finalInstallment > 0 ? ([[t('autobahn:modal.finalInstallment'), `${eur(finalInstallment)} €`]] as Array<[string, string]>) : []),
-    ...(hasAddServices ? ([[t('autobahn:modal.addServicesRow'), `${eur(addServicesCost as number)} €`]] as Array<[string, string]>) : []),
-    ...(nominalRate != null && nominalRate > 0 ? ([[t('autobahn:modal.nominalRate'), pct(nominalRate)]] as Array<[string, string]>) : []),
-    [t('autobahn:modal.effectiveRate'), pct(apr)],
-    [isLease ? t('autobahn:modal.leasingAmount') : t('autobahn:modal.netLoanAmount'), `${eur(netto)} €`],
-    ...(grossAmount != null && grossAmount > 0 ? ([[isLease ? t('autobahn:modal.totalAmount') : t('autobahn:modal.totalRepayment'), `${eur(grossAmount)} €`]] as Array<[string, string]>) : []),
-    ...(totalCost != null
-      ? ([[hasAddServices ? t('autobahn:modal.totalCostWithPackage') : t('autobahn:modal.totalCost'), `${eur(totalCost)} €`, true]] as Array<
-          [string, string, boolean]
-        >)
-      : []),
-    ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPrice'), `${eur(listPrice)} €`]] as Array<[string, string]>) : []),
-  ];
+  // one-time package figure shown in the breakdown: 0 € while bundled into the rate (its cost is
+  // already carried inside `monthly` instead), the real flat price when switched off.
+  const addServicesRowValue = withAddServices ? 0 : addServicesCostRaw ?? 0;
+  const hasAddServicesRow = addServicesCostRaw != null && addServicesCostRaw > 0;
+
+  let rows: Array<[string, string, boolean?]>;
+  if (isLease) {
+    // Leasing's own "Repräsentatives Beispiel" row set (Figma leasing table — NOT the financing
+    // layout): Anschaffungspreis → Vertragslaufzeit → Laufleistung/Jahr → Sonderzahlung →
+    // "N Monatsraten à" → Schlusszahlung (Restwertleasing has no scheduled final payment, so this
+    // disclosure line is always 0 €) → Restwert (verpflichtend) → Σ Leasingraten (bold) →
+    // Sonderzahlung again → Rundum-Sorglos-Paket → Zwischensumme inkl. Paket (bold) → Restwert
+    // again → Gesamt inkl. Restwert (bold). The residual value (Restwert) is already folded into
+    // `grossAmount` (getLeasing's grossLoanAmount = grossLoanAmountWithoutFinalInstallment +
+    // finalInstallment) — grossAmount minus the residual gives the pure Σ Leasingraten, and the
+    // final grand total is mathematically identical to the financing total's own
+    // down + grossAmount + package formula, just built up in the two visible stages Figma shows.
+    const residual = finalInstallment != null && finalInstallment > 0 ? finalInstallment : 0;
+    const ratesSum = grossAmount != null && grossAmount > 0 ? grossAmount - residual : undefined;
+    const subtotalWithPackage = ratesSum != null ? ratesSum + down + (hasAddServicesRow ? addServicesRowValue : 0) : undefined;
+    const grandTotal = subtotalWithPackage != null ? subtotalWithPackage + residual : undefined;
+    rows = [
+      [t('autobahn:modal.leaseVehiclePrice'), `${eur(price)} €`],
+      [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
+      ...(annualMileage != null ? ([[t('autobahn:modal.annualMileage'), `${eur(annualMileage)} km`]] as Array<[string, string]>) : []),
+      [t('autobahn:modal.leaseDownPayment'), `${eur(down)} €`],
+      [t('autobahn:modal.leasingRateCount', { count: term }), `${eur(monthly)} €`],
+      [t('autobahn:modal.finalPaymentDue'), `${eur(0)} €`],
+      ...(residual > 0 ? ([[t('autobahn:modal.residualValue'), `${eur(residual)} €`]] as Array<[string, string]>) : []),
+      ...(ratesSum != null
+        ? ([[t('autobahn:modal.rateSumLabel', { term, amount: eur(monthly) }), `${eur(ratesSum)} €`, true]] as Array<[string, string, boolean]>)
+        : []),
+      ...(ratesSum != null ? ([[t('autobahn:modal.leaseDownPayment'), `${eur(down)} €`]] as Array<[string, string]>) : []),
+      ...(ratesSum != null && hasAddServicesRow
+        ? ([[t('autobahn:modal.addServicesRowLease'), `${eur(addServicesRowValue)} €`]] as Array<[string, string]>)
+        : []),
+      ...(subtotalWithPackage != null
+        ? ([[hasAddServicesRow ? t('autobahn:modal.subtotalWithPackage') : t('autobahn:modal.subtotalNoPackage'), `${eur(subtotalWithPackage)} €`, true]] as Array<
+            [string, string, boolean]
+          >)
+        : []),
+      ...(residual > 0 && grandTotal != null ? ([[t('autobahn:modal.residualValue'), `${eur(residual)} €`]] as Array<[string, string]>) : []),
+      ...(grandTotal != null
+        ? ([[t('autobahn:modal.grandTotalWithResidual'), `${eur(grandTotal)} €`, true]] as Array<[string, string, boolean]>)
+        : []),
+      ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPriceLease'), `${eur(listPrice)} €`]] as Array<[string, string]>) : []),
+    ];
+  } else {
+    rows = [
+      [t('autobahn:modal.vehiclePrice'), `${eur(price)} €`],
+      [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
+      [t('autobahn:modal.downPayment'), `${eur(down)} €`],
+      [t('autobahn:modal.monthlyRateCount', { count: term }), `${eur(monthly)} €`],
+      ...(finalInstallment != null && finalInstallment > 0 ? ([[t('autobahn:modal.finalInstallment'), `${eur(finalInstallment)} €`]] as Array<[string, string]>) : []),
+      ...(hasAddServicesRow
+        ? ([[t('autobahn:modal.addServicesRow'), `${eur(addServicesRowValue)} €`]] as Array<[string, string]>)
+        : []),
+      ...(nominalRate != null && nominalRate > 0 ? ([[t('autobahn:modal.nominalRate'), pct(nominalRate)]] as Array<[string, string]>) : []),
+      [t('autobahn:modal.effectiveRate'), pct(apr)],
+      [t('autobahn:modal.netLoanAmount'), `${eur(netto)} €`],
+      ...(grossAmount != null && grossAmount > 0 ? ([[t('autobahn:modal.totalRepayment'), `${eur(grossAmount)} €`]] as Array<[string, string]>) : []),
+      ...(totalCost != null
+        ? ([[hasAddServices ? t('autobahn:modal.totalCostWithPackage') : t('autobahn:modal.totalCost'), `${eur(totalCost)} €`, true]] as Array<
+            [string, string, boolean]
+          >)
+        : []),
+      ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPrice'), `${eur(listPrice)} €`]] as Array<[string, string]>) : []),
+    ];
+  }
   const breakdownRows = rows.map(([l, v, bold], i) => (
     <div
-      key={l}
+      // leasing repeats "Restwert (verpflichtend)" / "Einmalige Sonderzahlung" (Figma's own
+      // subtotal-buildup layout) — the label text alone is no longer a unique React key.
+      key={`${l}-${i}`}
       style={{
         display: 'flex',
         alignItems: 'baseline',
@@ -2111,7 +2229,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 </div>
               </div>
             )}
-            {breakdownRows}
+            <div ref={desktopBreakdownRef}>{breakdownRows}</div>
             <p className="md-label-sm" style={{ marginTop: 16, lineHeight: 1.55 }}>
               {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
             </p>
@@ -2150,7 +2268,36 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 {isCash && listPrice != null && listPrice > price && (
                   <div style={{ display: 'flex', justifyContent: 'flex-end', lineHeight: 1, marginTop: 0 }}>
                     <s className="num fin-rate-old fin-rate-old-list">
-                      {eur(listPrice)} €<sup>2</sup>
+                      {eur(listPrice)} €
+                      <span
+                        className="pp-eyebrow-badge"
+                        role="button"
+                        tabIndex={0}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setUvpTooltipOpen((v) => !v);
+                        }}
+                      >
+                        2
+                      </span>
+                      {uvpTooltipOpen && (
+                        <div className="pp-uvp-tooltip" onClick={(e) => e.stopPropagation()}>
+                          <button
+                            type="button"
+                            className="pp-uvp-tooltip-close"
+                            aria-label={t('autobahn:modal.close')}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setUvpTooltipOpen(false);
+                            }}
+                          >
+                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <path d="M5 5L15 15M15 5L5 15" stroke="white" strokeWidth={2.4} strokeLinecap="round" />
+                            </svg>
+                          </button>
+                          <div className="pp-uvp-tooltip-body">{t('autobahn:card.price.uvpListTooltipBody')}</div>
+                        </div>
+                      )}
                     </s>
                   </div>
                 )}
@@ -2187,7 +2334,44 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                       <span className="fin-rate-unit">
                         {oldMonthly != null && (
                           <>
-                            <span className="fin-rate-example-label">{t('autobahn:finance.exampleLabel')}</span>
+                            <span className="pp-eyebrow">
+                              {t('autobahn:card.price.uvpRateLabel')}
+                              <span
+                                className="pp-eyebrow-badge"
+                                role="button"
+                                tabIndex={0}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setUvpTooltipOpen((v) => !v);
+                                }}
+                              >
+                                3
+                              </span>
+                              {uvpTooltipOpen && (
+                                <div className="pp-uvp-tooltip" onClick={(e) => e.stopPropagation()}>
+                                  <button
+                                    type="button"
+                                    className="pp-uvp-tooltip-close"
+                                    aria-label={t('autobahn:modal.close')}
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      setUvpTooltipOpen(false);
+                                    }}
+                                  >
+                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                      <path d="M5 5L15 15M15 5L5 15" stroke="white" strokeWidth={2.4} strokeLinecap="round" />
+                                    </svg>
+                                  </button>
+                                  <div className="pp-uvp-tooltip-body">
+                                    {t(
+                                      mode === 'leasing'
+                                        ? 'autobahn:card.price.uvpRateTooltipBodyLeasing'
+                                        : 'autobahn:card.price.uvpRateTooltipBody',
+                                    )}
+                                  </div>
+                                </div>
+                              )}
+                            </span>
                             <s
                               className={`num fin-rate-old fin-rate-example-price${
                                 String(Math.round(oldMonthly)).length >= 5
@@ -2197,12 +2381,12 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                                     : ''
                               }`}
                             >
-                              {eur(Math.round(oldMonthly))} €<sup>2</sup>
+                              {eur(Math.round(oldMonthly))} €
                             </s>
                           </>
                         )}
                         <span className="fin-rate-example-suffix">
-                          {t('autobahn:finance.perMonth')}<sup>3</sup>
+                          {t('autobahn:finance.perMonth')}
                         </span>
                       </span>
                     </>
@@ -2217,6 +2401,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                       style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
                     >
                       {evalTierLabel}
+                      {TIER_KEYS[evalTier] === 'good' && <sup>4</sup>}
                     </span>
                   )}
                 </div>
@@ -2230,12 +2415,20 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                   <CalcRow className="calcrow--payment" label={t('autobahn:finance.paymentLabel')}>
                     {t('autobahn:finance.paymentValue')}
                   </CalcRow>
-                  <CalcRow className="calcrow--payment" label={t('autobahn:finance.warrantyLabel')}>
+                  <CalcRow className="calcrow--payment" label={t('autobahn:finance.warrantyLabel')} last={!available}>
                     {t('autobahn:finance.warrantyValue')}
                   </CalcRow>
+                  {/* Lieferung row disabled per request, replaced by real availability
+                      (carStore.isAvailable) — same "Sofort verfügbar" wording as VdpTrustRow.
                   <CalcRow className="calcrow--payment" label={t('autobahn:finance.deliveryLabel')} last>
                     {t('autobahn:finance.deliveryValue')}
                   </CalcRow>
+                  */}
+                  {available && (
+                    <CalcRow className="calcrow--payment" label={t('autobahn:finance.availabilityLabel')} last>
+                      {t('autobahn:finance.availabilityValue')}
+                    </CalcRow>
+                  )}
                 </div>
                 {addServicesCost != null && (
                   <ToggleRow
@@ -2245,6 +2438,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     checked={!!withAddServices}
                     disabled={addServicesDisabled}
                     onChange={(checked) => onToggleAddServices && onToggleAddServices(checked)}
+                    staticNote={t('autobahn:finance.addServicesIncluded')}
                   />
                 )}
                 {/* pushed to the sheet's bottom edge — Figma keeps a big breathing gap above */}
@@ -2452,7 +2646,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     condensed footnote line. */}
                 {showBreakdown && (
                   <>
-                    <div style={{ marginBottom: 5 }}>
+                    <div ref={mobileBreakdownRef} style={{ marginBottom: 5 }}>
                       <p
                         style={{
                           fontFamily: 'Arial, Helvetica, sans-serif',
@@ -2499,7 +2693,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                         <path d="M4.49961 10.8H22.4996M5.39961 21.6H21.5996M3.59961 24.3H23.3996" stroke="#0E2238" strokeWidth="1.6" strokeLinecap="round" />
                         <path d="M7.2002 10.8V21.6M11.7002 10.8V21.6M15.3002 10.8V21.6M19.8002 10.8V21.6" stroke="#0E2238" strokeWidth="1.6" />
                       </svg>
-                      <div>
+                      <div style={{ width: '100%' }}>
                         <p
                           style={{
                             fontFamily: 'Arial, Helvetica, sans-serif',
@@ -2511,7 +2705,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                             marginBottom: 3,
                           }}
                         >
-                          {t('autobahn:modal.lenderLabel')}
+                          {isLease ? t('autobahn:modal.leaseLenderLabel') : t('autobahn:modal.lenderLabel')}
                         </p>
                         <p
                           style={{
@@ -2523,10 +2717,78 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                             margin: 0,
                           }}
                         >
-                          {t('autobahn:modal.lenderName')}
+                          {isLease ? t('autobahn:modal.leaseLenderName') : t('autobahn:modal.lenderName')}
                         </p>
+                        {/* leasing's Darlehensgeber-style card also discloses the contract type
+                            (Figma: "Vertragsart: Restwertleasing"), split off by its own divider */}
+                        {isLease && (
+                          <>
+                            <div style={{ height: 1, background: '#D6DEE8', margin: '8px 0' }} />
+                            <p
+                              style={{
+                                fontFamily: 'Arial, Helvetica, sans-serif',
+                                fontWeight: 700,
+                                fontSize: 14,
+                                lineHeight: '13px',
+                                color: '#0E2238',
+                                margin: 0,
+                                marginBottom: 3,
+                              }}
+                            >
+                              {t('autobahn:modal.contractTypeLabel')}
+                            </p>
+                            <p
+                              style={{
+                                fontFamily: 'Arial, Helvetica, sans-serif',
+                                fontWeight: 400,
+                                fontSize: 12,
+                                lineHeight: '13px',
+                                color: '#0E2238',
+                                margin: 0,
+                              }}
+                            >
+                              {t('autobahn:modal.contractTypeValue')}
+                            </p>
+                          </>
+                        )}
                       </div>
                     </div>
+                    {/* leasing-only mandatory-package disclosure (Figma "Hinweisbox") — the
+                        Rundum-Sorglos-Paket is compulsory for leasing (unlike financing, where
+                        it's an optional add-on), so it gets its own callout instead of a bullet. */}
+                    {isLease && hasAddServicesRow && (
+                      <div
+                        style={{
+                          display: 'flex',
+                          alignItems: 'flex-start',
+                          gap: 10,
+                          background: '#F7FAFE',
+                          border: '0.5px solid #D6DEE8',
+                          borderRadius: 5,
+                          padding: '7px 8px',
+                          marginBottom: 10,
+                        }}
+                      >
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ flex: 'none', marginTop: 2 }}>
+                          <circle cx="12" cy="12" r="10" stroke="#0E2238" strokeWidth="1.6" />
+                          <path d="M12 16v-4" stroke="#0E2238" strokeWidth="1.6" strokeLinecap="round" />
+                          <path d="M12 8h.01" stroke="#0E2238" strokeWidth="1.6" strokeLinecap="round" />
+                        </svg>
+                        <p
+                          style={{
+                            fontFamily: 'Arial, Helvetica, sans-serif',
+                            fontWeight: 400,
+                            fontSize: 10,
+                            lineHeight: '10px',
+                            textAlign: 'justify',
+                            color: '#0E2238',
+                            margin: 0,
+                          }}
+                        >
+                          {t('autobahn:modal.packageMandatoryNotice', { amount: eur(addServicesCostRaw ?? 0) })}
+                        </p>
+                      </div>
+                    )}
                     <p
                       style={{
                         fontFamily: 'Arial, Helvetica, sans-serif',
@@ -2540,42 +2802,69 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     >
                       {t('autobahn:modal.legalNoticesTitle')}
                     </p>
-                    <ul style={{ margin: 0, marginBottom: 3, paddingLeft: 16, display: 'flex', flexDirection: 'column', gap: 3 }}>
-                      {[
-                        t('autobahn:modal.legalNoticeCreditworthiness'),
-                        t('autobahn:modal.legalNoticeExample'),
-                        t('autobahn:modal.legalNoticeTwoThirds'),
-                        t('autobahn:modal.legalNoticeVat'),
-                        t('autobahn:modal.legalNoticeAddServices'),
-                      ].map((notice) => (
-                        <li
-                          key={notice}
+                    {isLease ? (
+                      <>
+                        <p style={{ fontFamily: 'Arial, Helvetica, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 5 }}>
+                          {t('autobahn:modal.legalFootnoteAcquisitionPrice')}
+                        </p>
+                        <p style={{ fontFamily: 'Arial, Helvetica, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 10 }}>
+                          {t('autobahn:modal.legalFootnoteListPriceLease')}
+                        </p>
+                        <p
                           style={{
                             fontFamily: 'Arial, Helvetica, sans-serif',
                             fontWeight: 400,
                             fontSize: 12,
                             lineHeight: '12px',
                             color: '#0E2238',
+                            margin: 0,
+                            paddingBottom: 10,
                           }}
                         >
-                          {notice}
-                        </li>
-                      ))}
-                    </ul>
-                    <p
-                      style={{
-                        fontFamily: 'Arial, Helvetica, sans-serif',
-                        fontWeight: 400,
-                        fontSize: 12,
-                        lineHeight: '12px',
-                        color: '#0E2238',
-                        margin: 0,
-                        paddingBottom: 10,
-                        borderBottom: '1px solid rgba(212, 221, 231, 0.95)',
-                      }}
-                    >
-                      {t('autobahn:modal.listPriceFootnote')}
-                    </p>
+                          {t('autobahn:modal.closingDisclaimerLine1')}
+                          <br />
+                          {t('autobahn:modal.closingDisclaimerLine2')}
+                        </p>
+                      </>
+                    ) : (
+                      <>
+                        <ul style={{ margin: 0, marginBottom: 3, paddingLeft: 16, display: 'flex', flexDirection: 'column', gap: 3 }}>
+                          {[
+                            t('autobahn:modal.legalNoticeCreditworthiness'),
+                            t('autobahn:modal.legalNoticeExample'),
+                            t('autobahn:modal.legalNoticeTwoThirds'),
+                            t('autobahn:modal.legalNoticeVat'),
+                            t('autobahn:modal.legalNoticeAddServices'),
+                          ].map((notice) => (
+                            <li
+                              key={notice}
+                              style={{
+                                fontFamily: 'Arial, Helvetica, sans-serif',
+                                fontWeight: 400,
+                                fontSize: 12,
+                                lineHeight: '12px',
+                                color: '#0E2238',
+                              }}
+                            >
+                              {notice}
+                            </li>
+                          ))}
+                        </ul>
+                        <p
+                          style={{
+                            fontFamily: 'Arial, Helvetica, sans-serif',
+                            fontWeight: 400,
+                            fontSize: 12,
+                            lineHeight: '12px',
+                            color: '#0E2238',
+                            margin: 0,
+                            paddingBottom: 10,
+                          }}
+                        >
+                          {t('autobahn:modal.listPriceFootnote')}
+                        </p>
+                      </>
+                    )}
                     <div className="fin-sheet-cta-row" style={{ display: 'flex', gap: 7, paddingBottom: 15 }}>
                       <Button
                         variant="filled"