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

package/cards/cardParts.tsx

@@ -392,27 +392,38 @@ export interface PricePathsProps {
 const TONE_TO_TIER: Record<string, number> = { top: 0, good: 1, fair: 2, raised: 3, high: 4 };
 
 /**
- * Continuous Preisbewertung gradient bar + knob (Figma: green→yellow→orange→red rail with a
- * small circular marker at the car's position — no text label, since the tier is already named
- * by the StatChip pill next to the price). Renders nothing when there is no rating/band
- * (needs-data: we never draw a fake market position).
+ * Discrete Preisbewertung tier bar + thumb (Figma: 5 solid segments — green/light-green/yellow/
+ * orange/red — with a white circular marker at the car's position, same `.fin-eval-bar`/
+ * `.fin-eval-seg` segmented treatment the grid CarCard's PriceEvalCol/EvalBar already uses; no
+ * text label here since the tier is already named by the StatChip pill next to the price).
+ * Renders nothing when there is no rating/band (needs-data: we never draw a fake market position).
  */
 export const PriceMeter: React.FunctionComponent<{ car: AutobahnCar; t: TranslationFunction }> = ({ car }) => {
   const hasMarket =
     car.marketLow != null && car.marketAvg != null && car.marketHigh != null && car.marketHigh > car.marketLow;
-  const knob = (tier: number) => (
-    <div className="pp-bar">
-      <span className="pp-bar-dot" style={{ left: `${Math.max(4, Math.min(96, (tier / 4) * 100))}%` }} />
-    </div>
-  );
+  const bar = (tier: number) => {
+    const leftPct = Math.max(4, Math.min(96, (tier / 4) * 100));
+    const tierIndex = Math.max(0, Math.min(4, Math.round(tier)));
+    return (
+      <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${TIER_KEYS[tierIndex] === 'good' ? ' fin-eval-thumb--good' : ''}`}
+          style={{ left: `${leftPct}%`, borderColor: TIER_COLORS[tierIndex] }}
+        />
+      </div>
+    );
+  };
   if (hasMarket) {
     const mpos = Math.max(0, Math.min(1, (car.price - car.marketLow!) / (car.marketHigh! - car.marketLow!)));
-    return knob(mpos * 4);
+    return bar(mpos * 4);
   }
   if (car.rating && TONE_TO_TIER[car.rating] != null) {
     // No market BAND yet, but the real Preisbewertung tier (same signal as the rating chip)
-    // drives the gradient knob position. Real data, not faked.
-    return knob(TONE_TO_TIER[car.rating]);
+    // drives the thumb position. Real data, not faked.
+    return bar(TONE_TO_TIER[car.rating]);
   }
   return null;
 };
@@ -597,12 +608,17 @@ export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode,
                 column layout exactly — so the click target covers the full area INCLUDING the
                 gap between the two stacked lines, not just their text glyphs (display:contents
                 has no box of its own there, so clicks in that gap fell through to the card link
-                behind it instead of opening the tooltip). */}
+                behind it instead of opening the tooltip). stopPropagation is required here too —
+                the whole card (CarCard.tsx) has its own onClick={() => onOpen(car)} navigation,
+                so without it a click on this block both opened the tooltip AND navigated away. */}
             <span
               style={{ display: 'flex', flexDirection: 'column' }}
               role="button"
               tabIndex={0}
-              onClick={() => setUvpTooltipOpen((v) => !v)}
+              onClick={(e) => {
+                e.stopPropagation();
+                setUvpTooltipOpen((v) => !v);
+              }}
             >
               <span className="pp-eyebrow">
                 {t('autobahn:card.price.uvpRateLabel')}

package/locales/de/autobahn.json

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

package/locales/en/autobahn.json

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

package/package.json

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

package/theme/md3.css

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

package/vdp/FinanceCalculator.tsx

@@ -16,7 +16,7 @@
 import React, { useState } from 'react';
 import { TranslationFunction } from '../types';
 
-import { Button, Icon } from '../ui';
+import { Button, Icon, Switch } from '../ui';
 import { TIER_LABELS, TIER_KEYS, TIER_COLORS } from '../constants';
 
 /** Payment mode segment keys. Mirrors the design's ['fin','leasing','cash']. */
@@ -184,6 +184,41 @@ export const CalcRow: React.FunctionComponent<CalcRowProps> = ({ label, last, ch
   </div>
 );
 
+/** full-width label(+optional trailing price) / Switch row — Switch itself is inline-flex
+ *  (track+label), so the "label ...... price switch" full-row layout can't be expressed via
+ *  Switch's `label` prop (which renders track-then-label, not a full-width justified row). */
+export const ToggleRow: React.FunctionComponent<{
+  label: string;
+  price?: string;
+  checked: boolean;
+  disabled?: boolean;
+  onChange: (checked: boolean) => void;
+  className?: string;
+  /** 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, marginLeft: staticNote ? 'auto' : undefined }}>
+      {price && (
+        <span className="num" style={{ fontWeight: 700, fontSize: 13.5, marginRight: staticNote ? 'auto' : undefined }}>
+          {price}
+        </span>
+      )}
+      {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>
+);
+
 export interface FinanceCalculatorProps {
   /** active payment mode (controlled). */
   mode: FinanceMode;
@@ -226,6 +261,19 @@ export interface FinanceCalculatorProps {
   annualMileageStep?: number;
   /** annual-mileage slider changed. */
   onAnnualMileageChange?: (km: number) => void;
+  /** "Mit Schlussrate" toggle state (financing only; leasing has no balloon concept). Omit
+   *  onToggleFinalInstallment to hide the row. */
+  withFinalInstallment?: boolean;
+  onToggleFinalInstallment?: (checked: boolean) => void;
+  /** "Rundum-Sorglos-Paket" toggle state (fin/leasing). Omit addServicesCost or
+   *  onToggleAddServices to hide the row. */
+  withAddServices?: boolean;
+  addServicesCost?: number;
+  addServicesDisabled?: boolean;
+  onToggleAddServices?: (checked: boolean) => void;
+  /** Kaufen tab only — real carStore.isAvailable, drives the Verfügbarkeit row (replaces the
+   *  static Lieferung row). Same source as VdpTrustRow's "Sofort verfügbar" badge. */
+  available?: boolean;
   /** phone number shown on the secondary CTA (touch only). */
   phone?: string;
   /** primary CTA click (Angebot sichern). */
@@ -289,7 +337,7 @@ export const expanderBtnStyle: React.CSSProperties = {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  padding: '10px 0 2px',
+  padding: '0 0 2px',
   color: 'var(--md-primary)',
   fontWeight: 600,
   fontSize: 14,
@@ -317,6 +365,13 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
   annualMileageMax = 60000,
   annualMileageStep = 5000,
   onAnnualMileageChange,
+  withFinalInstallment,
+  onToggleFinalInstallment,
+  withAddServices,
+  addServicesCost,
+  addServicesDisabled,
+  onToggleAddServices,
+  available,
   phone = '0800 40 30 182',
   onSecure,
   onCall,
@@ -332,6 +387,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
   // whether the "UVP-Rate" footnote popover (fin/leasing) is open — same widget as CarCard's.
   const [uvpTooltipOpen, setUvpTooltipOpen] = useState(false);
   const isCash = mode === 'cash';
+  const isLease = mode === 'leasing';
   const terms = termOptions && termOptions.length ? termOptions : range(termMin, termMax, termStep);
   const showStrike = listPrice != null && listPrice > price;
   // price-evaluation tier from the rating label (defaults to 'Guter Preis' tier when unmapped).
@@ -414,14 +470,20 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
       </div>
 
       {/* 2-col grid: rate|pill (row 1) + condLine|bar (row 2) — fixed right column prevents wrapping */}
-      <div className="fin-price-grid" style={isCash ? { gap: '0px 16px' } : undefined}>
+      <div className={'fin-price-grid' + (isCash ? ' fin-price-grid--cash' : '')}>
         {/* col 1 row 1: hero rate — Figma: "329 €" all-big, then a small stacked column with
             the struck old rate ABOVE "/mtl." (round 11; was a single baseline row) */}
         <div className="fin-rate-main">
           {/* mobile Kaufen (Figma round 14): struck list price ABOVE the price, right-aligned,
               tight to the figure — replaces the Festpreis + UVP lines, which stay desktop-only */}
           {isCash && showStrike && (
-            <div className="show-mobile" style={{ justifyContent: 'flex-end', alignItems: 'baseline', gap: 4, lineHeight: 1, marginTop: 7 }}>
+            <div
+              className="show-mobile"
+              style={{ justifyContent: 'flex-end', alignItems: 'baseline', gap: 4, lineHeight: 1, marginTop: 7 }}
+              role="button"
+              tabIndex={0}
+              onClick={() => setUvpTooltipOpen((v) => !v)}
+            >
               <span style={{ fontSize: 13, color: 'var(--md-on-surface-variant)' }}>{t('autobahn:finance.uvp')}</span>
               <span
                 className={`num pp-hero-old${
@@ -465,6 +527,50 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
               </span>
             </div>
           )}
+          {/* desktop: same struck list price ABOVE the rate, same fin-rate-old-list styling +
+              clickable UVP badge/tooltip as the mobile sheet's own Kaufen block. */}
+          {isCash && showStrike && (
+            <div
+              className="hide-mobile"
+              style={{ display: 'flex', justifyContent: 'flex-end', lineHeight: 1, marginTop: 0, cursor: 'pointer' }}
+              role="button"
+              tabIndex={0}
+              onClick={() => setUvpTooltipOpen((v) => !v)}
+            >
+              <s className="num fin-rate-old fin-rate-old-list">
+                {eur(listPrice as number)} €
+                <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>
+          )}
           <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
             {isCash ? (
               <>
@@ -486,11 +592,10 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                 </span>
                 <span
                   className="num hide-mobile"
-                  style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
+                  style={{ fontSize: 45, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
                 >
-                  {eur(price)}
+                  {eur(price)} €<sup>1</sup>
                 </span>
-                <span className="md-body-sm hide-mobile" style={{ fontWeight: 600 }}>€</span>
               </>
             ) : (
               <>
@@ -511,7 +616,12 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                 <span className="fin-rate-unit">
                   {/* struck old rate (REAL oldMonthlyInstallment; SRP strikes the same source) */}
                   {oldMonthly != null && (
-                    <>
+                    <span
+                      style={{ display: 'flex', flexDirection: 'column', cursor: 'pointer' }}
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => setUvpTooltipOpen((v) => !v)}
+                    >
                       <span className="pp-eyebrow">
                         {t('autobahn:card.price.uvpRateLabel')}
                         <span
@@ -561,7 +671,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                       >
                         {eur(Math.round(oldMonthly))} €
                       </s>
-                    </>
+                    </span>
                   )}
                   <span className="fin-rate-example-suffix">
                     {t('autobahn:finance.perMonth')}
@@ -571,11 +681,6 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
             )}
           </div>
           {isCash && <div className="md-label-sm hide-mobile">{t('autobahn:finance.fixedPrice')}</div>}
-          {isCash && showStrike && (
-            <div className="fin-kauf hide-mobile">
-              {t('autobahn:finance.uvp')} <s>{eur(listPrice as number)} €</s>
-            </div>
-          )}
         </div>
         {/* col 2: pill + eval bar grouped together (display:contents on desktop — no-op,
             preserves the original rate|pill / cond|bar auto-placement; mobile turns this into
@@ -634,14 +739,18 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
             (isCash ? (
               <div style={{ marginTop: 4 }}>
                 <CalcRow label={t('autobahn:finance.paymentLabel')}>{t('autobahn:finance.paymentValue')}</CalcRow>
-                <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
-                <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
-                  {t('autobahn:finance.deliveryValue')}
+                <CalcRow label={t('autobahn:finance.warrantyLabel')} last={!available}>
+                  {t('autobahn:finance.warrantyValue')}
                 </CalcRow>
+                {available && (
+                  <CalcRow label={t('autobahn:finance.availabilityLabel')} last>
+                    {t('autobahn:finance.availabilityValue')}
+                  </CalcRow>
+                )}
               </div>
             ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 8 }}>
-                <div>
+              <div style={{ display: 'flex', flexDirection: 'column', marginTop: 8 }}>
+                <div style={{ marginBottom: 15 }}>
                   <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                     <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
                     <span className="num" style={{ fontWeight: 700 }}>
@@ -658,7 +767,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                   />
                 </div>
                 {annualMileage != null && onAnnualMileageChange && (
-                  <div>
+                  <div style={{ marginBottom: 15 }}>
                     <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                       <span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
                       <span className="num" style={{ fontWeight: 700 }}>
@@ -675,19 +784,32 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                     />
                   </div>
                 )}
-                <div>
+                <div style={{ marginBottom: 15 }}>
                   <div className="md-title-sm" style={{ marginBottom: 8 }}>
                     {t('autobahn:finance.termSelection')}
                   </div>
-                  <TermChips options={terms} value={term} onChange={onTermChange} t={t} />
-                </div>
-                <div>
-                  <CalcRow label={t('autobahn:finance.purchasePrice')}>{eur(price)} €</CalcRow>
-                  <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
-                  <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
-                    {t('autobahn:finance.deliveryValue')}
-                  </CalcRow>
+                  <TermChips options={terms.filter((v) => v !== 12 && v !== 96)} value={term} onChange={onTermChange} t={t} />
                 </div>
+                {/* same Mit-Schlussrate / Rundum-Sorglos-Paket toggles as the mobile sheet / modal
+                    desktop block — replaces the static Kaufpreis/Garantie/Lieferung rows. */}
+                {!isLease && onToggleFinalInstallment && (
+                  <ToggleRow
+                    className="fin-toggle-final"
+                    label={t('autobahn:finance.finalInstallmentToggle')}
+                    checked={!!withFinalInstallment}
+                    onChange={onToggleFinalInstallment}
+                  />
+                )}
+                {addServicesCost != null && onToggleAddServices && (
+                  <ToggleRow
+                    className={'fin-toggle-addservices' + (isLease ? ' fin-toggle-addservices--leasing' : '')}
+                    label={t('autobahn:finance.addServicesToggle')}
+                    price={t('autobahn:finance.addServicesPerMonth', { value: eur(Math.round(addServicesCost)) })}
+                    checked={!!withAddServices}
+                    disabled={addServicesDisabled}
+                    onChange={onToggleAddServices}
+                  />
+                )}
               </div>
             ))}
         </div>

package/vdp/VdpModules.tsx

@@ -24,10 +24,10 @@
 import React, { useState } from 'react';
 import { TranslationFunction } from '../types';
 
-import { Button, Dropdown, DropdownOption, Icon, Spec, StatChip, Stars, Switch } from '../ui';
+import { Button, Dropdown, DropdownOption, Icon, Spec, StatChip, Stars } from '../ui';
 import { CO2_CLASSES, CO2_COLORS, TIER_LABELS, TIER_KEYS, TIER_COLORS, TIER_BACKGROUNDS } from '../constants';
 import { defaultVdpSpecs, EquipmentGroups, PriceRatingBands, VehicleDetail, VdpSpec, VdpReview } from './types';
-import { CalcRow, DocCheckIcon, EvalBar, expanderBtnStyle, FinanceMode, Slider, TermChips } from './FinanceCalculator';
+import { CalcRow, DocCheckIcon, EvalBar, expanderBtnStyle, FinanceMode, Slider, TermChips, ToggleRow } from './FinanceCalculator';
 import { formatEur as eur, formatPct as pct } from '../utils/financeFormat';
 
 /** Figma "check with open arc" glyph (modern lucide circle-check-big; the bundled lucide
@@ -1464,6 +1464,14 @@ export interface VdpBottomBarProps {
   onCall?: () => void;
   /** opens the "Rate anpassen" sheet; when omitted the button is not rendered. */
   onOpenAdjust?: () => void;
+  /** current down payment (fin) / Sonderzahlung (leasing) in EUR — drives the .fin-cond line. */
+  down?: number;
+  /** current term in months — drives the .fin-cond line. */
+  term?: number;
+  /** leasing annual mileage (km/yr) — leasing-only part of the .fin-cond line. */
+  annualMileage?: number;
+  /** opens the Finanzierungs-/Leasingdetails popup (expanded); when omitted the link is hidden. */
+  onShowDetails?: () => void;
   /** i18n function (drilled from the page). */
   t: TranslationFunction;
 }
@@ -1482,6 +1490,10 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
   onSecure,
   onCall,
   onOpenAdjust,
+  down,
+  term,
+  annualMileage,
+  onShowDetails,
   t,
 }) => {
   const [uvpTooltipOpen, setUvpTooltipOpen] = useState(false);
@@ -1495,6 +1507,21 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
   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];
+  // condition summary — same wording/order as FinanceCalculator's own .fin-cond (financing
+  // "0 € Anzahlung · 60 Monate", leasing "0 € Sonderzahlung · 36 Mon. · 10.000 km/Jahr").
+  const condParts: string[] = [];
+  if (mode === 'leasing') {
+    condParts.push(
+      ...t('autobahn:card.price.leaseTerms', {
+        firstInstallment: eur(down || 0),
+        months: term,
+        mileage: annualMileage != null ? eur(annualMileage) : '',
+      }).split(' · '),
+    );
+  } else if (!isCash) {
+    condParts.push(t('autobahn:finance.downPaymentLabel', { value: eur(down || 0) }));
+    condParts.push(t('autobahn:finance.monthsLabel', { months: term, count: term }));
+  }
   const priceStyle: React.CSSProperties = isCash
     ? {
         fontFamily: 'Arial, Helvetica, sans-serif',
@@ -1665,6 +1692,24 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
           </div>
         )}
       </div>
+      {!isCash && (
+        <div className="fin-cond">
+          {condParts.map((part, i) => (
+            <React.Fragment key={i}>
+              {i > 0 && <span className="cc-terms-dot"> · </span>}
+              {part}
+            </React.Fragment>
+          ))}
+          {onShowDetails && (
+            <>
+              <span className="cc-terms-dot"> · </span>
+              <button type="button" className="cc-terms-link" onClick={onShowDetails}>
+                {mode === 'leasing' ? t('autobahn:card.price.detailsLink') : t('autobahn:finance.financingDetails')}
+              </button>
+            </>
+          )}
+        </div>
+      )}
       <div className="bb-cta-row">
         <Button
           variant="filled"
@@ -1776,40 +1821,8 @@ export const InspectionBlock: React.FunctionComponent<InspectionBlockProps> = ({
 // Finanzierungs-/Leasingdetails popup (desktop modal / mobile bottom-sheet)
 // ---------------------------------------------------------------------------
 
-/** full-width label(+optional trailing price) / Switch row — Switch itself is inline-flex
- *  (sized to its own content), so the space-between has to live on this wrapper, not on
- *  Switch's `label` prop (which renders track-then-label, not a full-width justified row). */
-const ToggleRow: React.FunctionComponent<{
-  label: string;
-  price?: string;
-  checked: boolean;
-  disabled?: boolean;
-  onChange: (checked: boolean) => void;
-  className?: string;
-  /** 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, marginLeft: staticNote ? 'auto' : undefined }}>
-      {price && (
-        <span className="num" style={{ fontWeight: 700, fontSize: 13.5, marginRight: staticNote ? 'auto' : undefined }}>
-          {price}
-        </span>
-      )}
-      {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>
-);
+// ToggleRow lives in FinanceCalculator.tsx (imported above) — shared with the desktop
+// .fin-calc-card's own "Rate anpassen" panel, which needs the same toggles.
 
 export interface FinanceDetailsModalProps {
   /** open flag (controlled by the page). */
@@ -1943,10 +1956,10 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   // 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).
+  // opened directly via the "Finanzierungsdetails" link (initialShowBreakdown) — on mobile the
+  // breakdown is still gated behind its own toggle, so scroll the sheet down to reveal it instead
+  // of leaving the user at the top. Desktop always shows the breakdown inline now (no toggle), so
+  // it's excluded here — scrolling straight past the price/sliders/toggles on open was jarring.
   const desktopBreakdownRef = React.useRef<HTMLDivElement | null>(null);
   const mobileBreakdownRef = React.useRef<HTMLDivElement | null>(null);
   React.useEffect(() => {
@@ -1954,8 +1967,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     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' });
+      const target = mobileBreakdownRef.current;
+      if (target && target.offsetParent !== null) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }, 50);
     return () => window.clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2176,7 +2189,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
           </button>
         </div>
         <div className="fin-modal-body">
-          {/* ============================== DESKTOP (≥601px) — unchanged ============================== */}
+          {/* ============================== DESKTOP (≥601px) — always-expanded breakdown, no tabs
+              (the desktop .fin-calc-card owns its own tabs outside this modal) ============================== */}
           <div className="hide-mobile">
             <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 14 }}>
               <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
@@ -2225,14 +2239,303 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                   <div className="md-title-sm" style={{ marginBottom: 8 }}>
                     {t('autobahn:finance.termSelection')}
                   </div>
-                  <TermChips options={termVals} value={term} onChange={onTermChange as (n: number) => void} t={t} />
+                  <TermChips
+                    options={termVals.filter((v) => v !== 12 && v !== 96)}
+                    value={term}
+                    onChange={onTermChange as (n: number) => void}
+                    t={t}
+                  />
                 </div>
               </div>
             )}
-            <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>
+            {/* same Mit-Schlussrate / Rundum-Sorglos-Paket toggles as the mobile sheet — desktop
+                had neither before, silently dropping two controls the mobile view already had. */}
+            {!isCash && !isLease && onToggleFinalInstallment && (
+              <ToggleRow
+                className="fin-toggle-final"
+                label={t('autobahn:finance.finalInstallmentToggle')}
+                checked={!!withFinalInstallment}
+                onChange={onToggleFinalInstallment}
+              />
+            )}
+            {!isCash && addServicesCost != null && onToggleAddServices && (
+              <ToggleRow
+                className={'fin-toggle-addservices' + (isLease ? ' fin-toggle-addservices--leasing' : '')}
+                label={t('autobahn:finance.addServicesToggle')}
+                price={t('autobahn:finance.addServicesPerMonth', { value: eur(Math.round(addServicesCost)) })}
+                checked={!!withAddServices}
+                disabled={addServicesDisabled}
+                onChange={onToggleAddServices}
+              />
+            )}
+            <div ref={desktopBreakdownRef} style={!isCash ? { marginTop: 18 } : undefined}>
+              {!isCash && (
+                <>
+                  <p
+                    style={{
+                      fontFamily: 'Arial, Helvetica, sans-serif',
+                      fontWeight: 700,
+                      fontSize: 16,
+                      lineHeight: '18px',
+                      color: '#0E2238',
+                      margin: 0,
+                      marginBottom: 5,
+                    }}
+                  >
+                    {t('autobahn:modal.representativeExample')}
+                  </p>
+                  <p
+                    style={{
+                      fontFamily: 'Arial, Helvetica, sans-serif',
+                      fontWeight: 700,
+                      fontSize: 9,
+                      lineHeight: '12px',
+                      color: '#5B6B7F',
+                      marginBottom: 5,
+                    }}
+                  >
+                    {t('autobahn:modal.vatDisclaimer')}
+                  </p>
+                </>
+              )}
+              {breakdownRows}
+            </div>
+            {isCash ? (
+              <p className="md-label-sm" style={{ marginTop: 16, lineHeight: 1.55 }}>
+                {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
+              </p>
+            ) : (
+              <>
+                {/* Darlehensgeber disclosure box — same content as the mobile "Finanzierungs-Details"
+                    expander, just always visible on desktop instead of gated behind a toggle. */}
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    gap: 10,
+                    background: '#FAFBFD',
+                    border: '1px solid #D4DDE7',
+                    borderRadius: 6,
+                    padding: 10,
+                    marginTop: 10,
+                    marginBottom: 10,
+                  }}
+                >
+                  <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ flex: 'none' }}>
+                    <path d="M2.7002 9.00001L13.5002 3.60001L24.3002 9.00001H2.7002Z" stroke="#0E2238" strokeWidth="1.6" strokeLinejoin="round" />
+                    <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 style={{ width: '100%' }}>
+                    <p
+                      style={{
+                        fontFamily: 'Arial, Helvetica, sans-serif',
+                        fontWeight: 700,
+                        fontSize: 14,
+                        lineHeight: '13px',
+                        color: '#0E2238',
+                        margin: 0,
+                        marginBottom: 3,
+                      }}
+                    >
+                      {isLease ? t('autobahn:modal.leaseLenderLabel') : t('autobahn:modal.lenderLabel')}
+                    </p>
+                    <p
+                      style={{
+                        fontFamily: 'Arial, Helvetica, sans-serif',
+                        fontWeight: 400,
+                        fontSize: 12,
+                        lineHeight: '13px',
+                        color: '#0E2238',
+                        margin: 0,
+                      }}
+                    >
+                      {isLease ? t('autobahn:modal.leaseLenderName') : t('autobahn:modal.lenderName')}
+                    </p>
+                    {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>
+                {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',
+                    fontWeight: 700,
+                    fontSize: 13.3,
+                    lineHeight: '17px',
+                    color: '#0E2238',
+                    margin: 0,
+                    marginBottom: 7,
+                  }}
+                >
+                  {t('autobahn:modal.legalNoticesTitle')}
+                </p>
+                {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,
+                      }}
+                    >
+                      {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, marginTop: 4 }}>
+                  <Button
+                    variant="filled"
+                    size="lg"
+                    style={{
+                      flex: 1,
+                      height: 50,
+                      background: '#005CFF',
+                      borderRadius: 16,
+                      justifyContent: 'center',
+                      fontFamily: 'Arial, Helvetica, sans-serif',
+                      fontWeight: 700,
+                      fontSize: 14,
+                      lineHeight: '16px',
+                      textAlign: 'center',
+                      color: '#FFFFFF',
+                    }}
+                    onClick={onSecure}
+                  >
+                    <span style={{ display: 'inline-flex', marginRight: 18 }}>
+                      <DocCheckIcon size={23} />
+                    </span>
+                    {t('autobahn:finance.requestRate')}
+                  </Button>
+                  <Button
+                    variant="outlined"
+                    size="lg"
+                    icon="phone"
+                    className="fin-sheet-call-btn"
+                    style={{
+                      width: 50,
+                      height: 50,
+                      flex: 'none',
+                      padding: 0,
+                      background: '#FFFFFF',
+                      border: '1.6px solid #005CFF',
+                      borderRadius: 16,
+                    }}
+                    onClick={onCall}
+                  />
+                </div>
+              </>
+            )}
           </div>
 
           {/* ============================== MOBILE (≤600px) — full "Rate anpassen" sheet ============================== */}
@@ -2266,7 +2569,12 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 {/* Figma Kaufen sheet: struck list price ABOVE the price, aligned to its right
                     edge (inline-beside wraps — the 44px phone hero fills the whole column) */}
                 {isCash && listPrice != null && listPrice > price && (
-                  <div style={{ display: 'flex', justifyContent: 'flex-end', lineHeight: 1, marginTop: 0 }}>
+                  <div
+                    style={{ display: 'flex', justifyContent: 'flex-end', lineHeight: 1, marginTop: 0 }}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setUvpTooltipOpen((v) => !v)}
+                  >
                     <s className="num fin-rate-old fin-rate-old-list">
                       {eur(listPrice)} €
                       <span
@@ -2333,7 +2641,15 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                       </span>
                       <span className="fin-rate-unit">
                         {oldMonthly != null && (
-                          <>
+                          <span
+                            style={{ display: 'flex', flexDirection: 'column' }}
+                            role="button"
+                            tabIndex={0}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setUvpTooltipOpen((v) => !v);
+                            }}
+                          >
                             <span className="pp-eyebrow">
                               {t('autobahn:card.price.uvpRateLabel')}
                               <span
@@ -2383,7 +2699,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                             >
                               {eur(Math.round(oldMonthly))} €
                             </s>
-                          </>
+                          </span>
                         )}
                         <span className="fin-rate-example-suffix">
                           {t('autobahn:finance.perMonth')}