@bytebrand/fe-ui-core-autobahn 1.0.121 → 1.0.122

package/cards/CarCard.tsx

@@ -51,8 +51,14 @@ export interface CarCardProps {
   isFavorite: boolean;
   /** toggle the favorite; the heart calls this (click is kept off the card). */
   onToggleFavorite: () => void;
-  /** fired when the card is clicked (opens the detail page). */
-  onOpen: (car: AutobahnCar) => void;
+  /** fired when the card is clicked (opens the detail page). The second argument is the payment
+   *  tab the card was showing at click time (ADV-181) — pages forward it to the VDP via the
+   *  `?mode=` query flag so the originating card and the CDP always agree on the product. */
+  onOpen: (car: AutobahnCar, mode?: PaymentMode) => void;
+  /** ADV-181 — fired when the user explicitly switches the card's payment tab. Pages use it to
+   *  persist the per-car product choice (FinancingStore.setSelectedProduct) + analytics. The
+   *  card still owns the visual tab state; this is a notification, not a controlled input. */
+  onModeChange?: (mode: PaymentMode) => void;
   /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
   onMediaEnter?: () => void;
   /**
@@ -113,8 +119,16 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   onCall,
   onOpenRateAdjust,
   onShowFinancingDetails,
+  onModeChange,
 }) => {
-  const [mode, setMode] = useState<PaymentMode>('financing');
+  // ADV-181: start on the centrally-selected default product (cheaper valid rate of
+  // financing vs leasing, or the user's saved per-car choice) — computed by toAutobahnCar,
+  // so SSR/hydration agree. Absent (older producer) → financing, the pre-ADV-181 default.
+  const [mode, setMode] = useState<PaymentMode>(car.defaultMode ?? 'financing');
+  const changeMode = (m: PaymentMode) => {
+    setMode(m);
+    onModeChange && onModeChange(m);
+  };
   const [photoIndex, setPhotoIndex] = useState(0);
   const [viewerOpen, setViewerOpen] = useState(false);
   const mediaRef = useRef<HTMLDivElement | null>(null);
@@ -160,7 +174,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   return (
     <article
       className="mcard mcard--interactive cc-card"
-      onClick={() => onOpen(car)}
+      onClick={() => onOpen(car, mode)}
       style={{ display: 'flex', flexDirection: 'column' }}
     >
       <div
@@ -275,7 +289,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
         </div>
         <SpecLine items={cardSpec(car)} oneLine />
         <div className="cc-price" style={{ marginTop: 0, borderTop: '1px solid var(--md-outline-variant)' }}>
-          <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
+          <PriceTabs car={car} mode={mode} onModeChange={changeMode} t={t} />
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 10 }}>
             <PriceHero car={car} mode={mode} t={t} alwaysShowUnit />
             <PriceEvalCol car={car} t={t} />

package/cards/CarRow.tsx

@@ -51,8 +51,13 @@ export interface CarRowProps {
   isFavorite: boolean;
   /** toggle the favorite; the hearts call this (click is kept off the card). */
   onToggleFavorite: () => void;
-  /** fired when the card (or the CTA) is clicked (opens the detail page). */
-  onOpen: (car: AutobahnCar) => void;
+  /** fired when the card (or the CTA) is clicked (opens the detail page). The second argument is
+   *  the payment tab/product the card was showing at click time (ADV-181) — pages forward it to
+   *  the VDP via `?mode=` so the originating card and the CDP always agree on the product. */
+  onOpen: (car: AutobahnCar, mode?: PaymentMode) => void;
+  /** ADV-181 — fired when the user explicitly switches the mobile payment tab. Pages use it to
+   *  persist the per-car product choice (FinancingStore.setSelectedProduct) + analytics. */
+  onModeChange?: (mode: PaymentMode) => void;
   /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
   onMediaEnter?: () => void;
   /**
@@ -91,8 +96,16 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
   t,
   adminAction,
   onShowFinancingDetails,
+  onModeChange,
 }) => {
-  const [mode, setMode] = useState<PaymentMode>('financing');
+  // ADV-181: start on the centrally-selected default product (see CarCard's identical init).
+  // Drives the mobile tab switcher AND the mode reported to onOpen; the desktop branch's
+  // untabbed PricePaths reads car.defaultMode directly.
+  const [mode, setMode] = useState<PaymentMode>(car.defaultMode ?? 'financing');
+  const changeMode = (m: PaymentMode) => {
+    setMode(m);
+    onModeChange && onModeChange(m);
+  };
   const [photoIndex, setPhotoIndex] = useState(0);
   const mediaRef = useRef<HTMLDivElement | null>(null);
   // always call the LATEST onMediaEnter without re-arming the observer on every render (the
@@ -145,7 +158,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
   return (
     <article
       className="mcard mcard--interactive listcard"
-      onClick={() => onOpen(car)}
+      onClick={() => onOpen(car, mode)}
       style={{ background: 'var(--md-sc-lowest)' }}
     >
       <div className="listcard-media" ref={mediaRef} style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
@@ -292,7 +305,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
           the previously-unused PricePaths/PriceKauf pair. Both variants share the same
           Preisbewertung meter + CTA, anchored to the bottom (margin-top:auto on .pp-purchase). */}
       <div className="listcard-price">
-        <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} className="show-mobile" />
+        <PriceTabs car={car} mode={mode} onModeChange={changeMode} t={t} className="show-mobile" />
         <div className="pp-purchase show-mobile">
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
             <PriceHero car={car} mode={mode} t={t} alwaysShowUnit />
@@ -311,7 +324,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
               iconRight="arrow-right"
               onClick={(e) => {
                 e.stopPropagation();
-                onOpen(car);
+                onOpen(car, mode);
               }}
             >
               {t('autobahn:card.cta.viewOffer')}
@@ -360,7 +373,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
               iconRight="arrow-right"
               onClick={(e) => {
                 e.stopPropagation();
-                onOpen(car);
+                onOpen(car, mode);
               }}
             >
               {t('autobahn:card.cta.viewOffer')}

package/cards/cardParts.tsx

@@ -1103,6 +1103,11 @@ const PpRow: React.FunctionComponent<PpRowProps> = ({ label, value, unit, old, f
  */
 export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, className, onShowDetails }) => {
   const hasLease = car.lease != null;
+  // ADV-181: the hero rate follows the centrally-selected default product (cheaper valid rate,
+  // computed in toAutobahnCar). Leasing leads only when it actually won AND is displayable;
+  // 'buy'/absent both fall back to the financing hero (pre-ADV-181 layout) — the purchase price
+  // keeps its own PriceKauf row below either way, per the desktop rate-first rule.
+  const heroMode: PaymentMode = car.defaultMode === 'leasing' && hasLease ? 'leasing' : 'financing';
   // Terms of the config the displayed rate was actually computed with (per-car:
   // dealer rate + the user's saved localStorage adjustments) — default config
   // terms only when the car doesn't carry its own.
@@ -1130,42 +1135,70 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
     ) : (
       <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
     );
+  const finTermsLine = (
+    <>
+      {t('autobahn:card.price.financeTerms', {
+        firstInstallment: finFirstInstallment,
+        months: finMonths,
+        count: finMonths,
+      })}{' '}
+      · {detailsLink('financing')}
+    </>
+  );
+  const leasCompactTerms = hasLeasTerms && (
+    <div className="pp-sub-terms">
+      {/* dedicated keys (not a rework of leaseTerms) so mobile/VDP's own reviewed
+          wording there stays untouched, but includes the same Sonderzahlung figure.
+          Split across two lines with an explicit <br/> (column is too narrow for all
+          three figures + Details on one line) — forced right after km/Jahr so "36" and
+          "Mon." always land on the same line instead of an awkward mid-number wrap. */}
+      {t('autobahn:card.price.leaseTermsCompactLine1', {
+        firstInstallment: leasFirstInstallment,
+        mileage: leasMileageStr,
+      })}{' · '}
+      <br />
+      {t('autobahn:card.price.leaseTermsCompactLine2', { months: leasMonths })}{' '}
+      · {detailsLink('leasing')}
+    </div>
+  );
   return (
     <div className={'pricepaths' + (className ? ' ' + className : '')}>
-      <div className="pp-eyebrow">{t('autobahn:card.price.financingFrom')}</div>
-      {/* reuses PriceHero's own financing rendering — the exact same stacked "UVP-Rate ⓘ /
+      <div className="pp-eyebrow">
+        {t(heroMode === 'leasing' ? 'autobahn:card.price.leasingFrom' : 'autobahn:card.price.financingFrom')}
+      </div>
+      {/* reuses PriceHero's own rendering — the exact same stacked "UVP-Rate ⓘ /
           struck price / mtl." group beside the rate that .cc-price and mobile's tab switcher
           already use, so the rate + unit never fight for room in one flat row (the earlier
           hand-rolled version here put them side by side and wrapped for any 4+-digit rate). */}
-      <PriceHero car={car} mode="financing" t={t} alwaysShowUnit />
-      <div className="pp-hero-terms">
-        {t('autobahn:card.price.financeTerms', {
-          firstInstallment: finFirstInstallment,
-          months: finMonths,
-          count: finMonths,
-        })}{' '}
-        · {detailsLink('financing')}
-      </div>
-      {hasLease && (
-        <div className="pp-lease-row">
-          <PpRow label={t('autobahn:card.price.leasing')} value={car.lease as number} unit="mtl." t={t} />
+      <PriceHero car={car} mode={heroMode} t={t} alwaysShowUnit />
+      {heroMode === 'leasing' ? (
+        <>
           {hasLeasTerms && (
-            <div className="pp-sub-terms">
-              {/* dedicated keys (not a rework of leaseTerms) so mobile/VDP's own reviewed
-                  wording there stays untouched, but includes the same Sonderzahlung figure.
-                  Split across two lines with an explicit <br/> (column is too narrow for all
-                  three figures + Details on one line) — forced right after km/Jahr so "36" and
-                  "Mon." always land on the same line instead of an awkward mid-number wrap. */}
+            <div className="pp-hero-terms">
               {t('autobahn:card.price.leaseTermsCompactLine1', {
                 firstInstallment: leasFirstInstallment,
                 mileage: leasMileageStr,
               })}{' · '}
-              <br />
               {t('autobahn:card.price.leaseTermsCompactLine2', { months: leasMonths })}{' '}
               · {detailsLink('leasing')}
             </div>
           )}
-        </div>
+          {/* financing follows as the quiet row — same layout slot the leasing row used before. */}
+          <div className="pp-lease-row">
+            <PpRow label={t('autobahn:finance.mode.financing')} value={car.monthly} unit="mtl." t={t} />
+            <div className="pp-sub-terms">{finTermsLine}</div>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="pp-hero-terms">{finTermsLine}</div>
+          {hasLease && (
+            <div className="pp-lease-row">
+              <PpRow label={t('autobahn:card.price.leasing')} value={car.lease as number} unit="mtl." t={t} />
+              {leasCompactTerms}
+            </div>
+          )}
+        </>
       )}
     </div>
   );

package/cards/types.ts

@@ -57,6 +57,16 @@ export interface AutobahnCar {
   // --- price (always real) ---
   /** financing monthly rate in EUR — the LEAD price on every card. */
   monthly: number;
+  /**
+   * ADV-181 — which payment product leads on this card. Computed centrally by
+   * toAutobahnCar via fe-financing's pickDefaultProduct (cheaper valid rate of
+   * financing vs leasing; tie → financing; neither valid → 'buy'), then
+   * overridden by the user's saved explicit per-car selection when the fe-main
+   * transform stamped one (storeCar.selectedProduct). Cards initialise their
+   * tab state from this; absent (older producer) → 'financing', the pre-ADV-181
+   * behavior. Derived purely from card data, so SSR and hydration agree.
+   */
+  defaultMode?: 'financing' | 'leasing' | 'buy';
   /**
    * financing terms the `monthly` rate was computed with — the per-car merged
    * config (dealer rate + the user's saved localStorage adjustments, ADV-157).

package/compat/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.tsx

@@ -39,10 +39,9 @@ export interface IVehiclePriceItemProps {
   isMarge?: boolean;
 }
 class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
-  routeToActiveTab = () => {
-    const { priceTitle } = this.props;
-    localStorage.setItem('activeTabCDP', priceTitle);
-  }
+  // ADV-181: the old routeToActiveTab (localStorage 'activeTabCDP' write) was removed — its only
+  // reader was the unrouted legacy VDP sidebar, so the write was a no-op on the live site. The
+  // live VDP resolves its tab centrally (lowest-rate rule / saved per-car choice / `?mode=`).
 
   render(): React.ReactNode {
     const {
@@ -103,7 +102,6 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
           ...routeObj,
           target,
           rel,
-          onClick: this.routeToActiveTab,
           className: priceItemCategoryClassName,
           href: url
         })}
@@ -188,7 +186,6 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
           ...routeObj,
           target,
           rel,
-          onClick: this.routeToActiveTab,
           className: styles.priceItemPrice,
           href: url
         })}

package/compat/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.tsx

@@ -166,8 +166,8 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
       ),
         ...routeObj,
         className: wrapClasses,
-        // ADV-116: opening a CDP from a card defaults to the Financing tab.
-        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+        // ADV-181: the dead activeTabCDP write removed (its only reader was the unrouted legacy
+        // VDP sidebar) — the live VDP resolves its tab centrally.
         href: url,
         target,
         rel

package/compat/VehicleSmallCard/VehicleSmallCard.tsx

@@ -319,8 +319,9 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           target,
           rel,
           className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
-          // ADV-116: opening a CDP from a card defaults to the Financing tab.
-          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+          // ADV-181: the dead activeTabCDP write removed (its only reader was the unrouted
+          // legacy VDP sidebar) — the live VDP resolves its tab centrally (lowest-rate rule /
+          // saved per-car choice / `?mode=` query flag).
           href: url
         })}
 
@@ -373,8 +374,9 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           target,
           rel,
           className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
-          // ADV-116: opening a CDP from a card defaults to the Financing tab.
-          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+          // ADV-181: the dead activeTabCDP write removed (its only reader was the unrouted
+          // legacy VDP sidebar) — the live VDP resolves its tab centrally (lowest-rate rule /
+          // saved per-car choice / `?mode=` query flag).
           href: url
         })}
         <VehicleInfo {...vehicleInfoProps} />

package/data/toAutobahnCar.ts

@@ -23,6 +23,8 @@
 // Every field path below was confirmed against the real code (file:line in
 // ./fieldMapping.ts), not guessed.
 
+import { pickDefaultProduct } from '@bytebrand/fe-financing';
+
 import { getPriceRating, getPredictablePrice } from '../utils/priceRating';
 import { formatTimestamp } from '../utils/DateUtils';
 import { getPowerLabel } from '../utils/power';
@@ -427,6 +429,27 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
   const leaseMonths = leasingActive ? num(price?.leasing?.paybackPeriod) : undefined;
   const leaseFirstInstallment = leasingActive ? num(price?.leasing?.firstInstallment) : undefined;
 
+  // --- ADV-181: leading payment product — ONE central rule for every card surface. ---
+  // Automatic default = fe-financing's pickDefaultProduct on the same displayed rates the
+  // card renders (cheaper valid rate wins, tie → financing, neither valid → 'buy'). The
+  // user's saved explicit per-car choice (storeCar.selectedProduct, stamped by fe-main's
+  // transformDataForVehicles from FinancingStore) overrides the automatic rule — but only
+  // while that product is actually displayable on this card, so a stale "leasing" choice on
+  // a car that aged out of leasing eligibility falls back to the automatic rule instead of
+  // selecting a product the card can't show. Pure input → pure output: SSR (fe-landing)
+  // computes the identical value from the same payload, so hydration never flips the tab.
+  const picked = pickDefaultProduct({
+    financing: { monthlyInstallment: monthly },
+    leasing: { isActive: leasingActive, monthlyInstallment: lease ?? null },
+  });
+  const savedProduct = (storeCar as any).selectedProduct;
+  const defaultMode: 'financing' | 'leasing' | 'buy' =
+    savedProduct === 'leasing' && lease != null
+      ? 'leasing'
+      : savedProduct === 'financing' && monthly > 0
+        ? 'financing'
+        : picked.product;
+
   // --- optional: list price / savings — ONLY from a real strike price ---
   // transformDataForVehicles exposes oldMonthlyInstallment / highestPrice via
   // the financing spread, and price.historyPriceDifference. There is NO reliable
@@ -494,6 +517,7 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
 
     // price
     monthly,
+    defaultMode,
     ...(finFirstInstallment != null ? { finFirstInstallment } : {}),
     ...(finMonths != null ? { finMonths } : {}),
     price: purchase,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.121",
+  "version": "1.0.122",
   "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",
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.19",
+    "@bytebrand/fe-financing": "^5.14.20",
     "classnames": "2.2.6",
     "clsx": "^2.1.1",
     "d3-format": "1.4.5",

package/ui/usePortalMenuPosition.ts

@@ -1,213 +1,213 @@
-// Autobahn (auto.de redesign) — shared body-portal positioning for md3 popover menus.
-//
-// Extracted out of Dropdown.tsx (the single-select) so MultiDropdown (FormDropdown.tsx's
-// isMulti checklist) can get the exact same `menuPortal` escape-hatch — same clipping problem
-// (a checklist menu inside a VehicleEdit Accordion section gets cut off by `.macc-region-inner`'s
-// overflow:hidden, see md3.css), same fix, and every hard-won timing/CSS fix that went into this
-// belongs in ONE place so the two consumers can't drift out of sync. See Dropdown.tsx's own
-// `menuPortal` doc comment for the user-facing behaviour this produces (escapes clipping
-// ancestors, tracks the trigger on scroll/resize while open, flips above when there's no room
-// below, closes instead of trying to visually "chase" the trigger on a real user scroll).
-//
-// Consumers own their OWN <ul>/menu markup and className — this hook only owns: the body-portal
-// root element, the trigger-relative position math, and the effect timing/scroll-listener
-// plumbing. Apply `menuPos` to whatever floating element you render into `portalRoot` via
-// ReactDOM.createPortal, and pass that same element's ref as `menuElRef` so its own internal
-// scrolling doesn't get misread as a user scrolling the trigger away.
-
-import * as React from 'react';
-
-export interface PortalMenuPos {
-  width: number;
-  // always a concrete value — a real px number for whichever side is anchoring the box, 'auto'
-  // (never omitted) for the other. React drops a style property from the DOM entirely when its
-  // value is `undefined`, so `undefined` is NOT "unset" the way it is in the style object here in
-  // JS — it just means "don't touch whatever's already cascading in from CSS", and the menu's own
-  // stylesheet rule (`top: calc(100% + 4px); left: 0;`) was right there to fill back in and fight
-  // the side that WAS set inline, forcing a negative used-height (CSS 2.1 §10.6.4, clamped to 0 —
-  // the "opens but nothing visible" collapse). Explicit 'auto' writes a real `top: auto` / `left:
-  // auto` inline, which — unlike an omitted property — reliably beats the stylesheet rule
-  // regardless of specificity, so only the intended side ever constrains the box.
-  top: number | 'auto';
-  bottom: number | 'auto';
-  left: number | 'auto';
-  right: number | 'auto';
-  // the space actually available in whichever direction the menu opened, clamped to a sane
-  // [120, ESTIMATED_MENU_HEIGHT-12] range — apply as the floating element's OWN maxHeight (plus
-  // its padding/border, box-sizing:border-box) so it never relies on shrink-to-fit auto-sizing.
-  maxHeight: number;
-}
-
-export interface UsePortalMenuPositionArgs {
-  /** opt-in flag (the `menuPortal` prop on the consumer). */
-  enabled: boolean;
-  open: boolean;
-  /** the trigger's wrapping element — always rendered (regardless of `open`), measured for position. */
-  rootRef: React.RefObject<HTMLElement>;
-  menuAlign?: 'left' | 'right';
-  /** called when the trigger scrolls out of view entirely, or a real user scroll happens after
-   *  the post-open grace window — the menu has nothing sensible left to anchor to or chase. */
-  onCloseAway: () => void;
-}
-
-// TMenuEl: the concrete element type of whatever you portal (Dropdown.tsx portals a wrapping
-// `<div>`; MultiDropdown's checklist has no separate wrapper and portals its `<ul>` directly) —
-// keeps `menuElRef` assignable straight to that element's own `ref` without a cast.
-export interface UsePortalMenuPositionResult<TMenuEl extends HTMLElement = HTMLDivElement> {
-  /** a fresh `div.md3` appended to `document.body` while open (so --md-* tokens and every
-   *  `.md3 .mselect-*` rule still resolve at body level, same technique as ui/Modal.tsx) — pass
-   *  as the portal target to `ReactDOM.createPortal`. `null` when `!enabled`. */
-  portalRoot: HTMLDivElement | null;
-  /** `null` for one frame on open, before position is first measured — render `visibility:hidden`
-   *  (not just omit inline styles) in that case, see Dropdown.tsx's render for the exact pattern. */
-  menuPos: PortalMenuPos | null;
-  /** attach to the actual floating menu element you portal — excludes its own internal scrolling
-   *  (e.g. a long option list) from being misread as the user scrolling the trigger away, and is
-   *  also what click-away logic should check alongside the trigger's own root. */
-  menuElRef: React.RefObject<TMenuEl>;
-}
-
-// the list's own max-height guess (plus the menu box's padding/border) — only needs to be a
-// reasonable estimate; it decides whether to flip ABOVE the trigger. The real size is then
-// clamped to the space actually available (see `maxHeight` above), not just guessed at.
-const ESTIMATED_MENU_HEIGHT = 300;
-// a scroll within this window of opening REPOSITIONS instead of closing — see the effect below.
-const SELF_SCROLL_GRACE_MS = 500;
-
-export function usePortalMenuPosition<TMenuEl extends HTMLElement = HTMLDivElement>({
-  enabled,
-  open,
-  rootRef,
-  menuAlign = 'left',
-  onCloseAway,
-}: UsePortalMenuPositionArgs): UsePortalMenuPositionResult<TMenuEl> {
-  const menuElRef = React.useRef<TMenuEl | null>(null);
-  // timestamp of the last open — lets the close-on-scroll listener below tell a genuine user
-  // scroll apart from a scroll OUR OWN opening sequence causes (e.g. a searchable dropdown's own
-  // scrollIntoView, or the browser's native "scroll a just-focused element into view" behaviour).
-  // useLayoutEffect (not useEffect): must be set before the scroll-listener effect further down
-  // can possibly attach and fire — same synchronous pre-paint phase as the portal-attach/position
-  // effects below, so there's no window where a scroll could be misjudged against a stale (or
-  // zero) timestamp.
-  const openedAtRef = React.useRef(0);
-  React.useLayoutEffect(() => {
-    if (open) openedAtRef.current = Date.now();
-  }, [open]);
-
-  const portalRoot = React.useMemo<HTMLDivElement | null>(() => {
-    if (!enabled || typeof document === 'undefined') return null;
-    const el = document.createElement('div');
-    el.className = 'md3';
-    return el;
-  }, [enabled]);
-
-  // useLayoutEffect, not useEffect: createPortal(children, portalRoot) renders content INTO
-  // portalRoot the moment `open` becomes true, but that's a detached node until THIS effect
-  // appends it to document.body; a plain useEffect only runs after the browser paints, so there
-  // was a real window where the (correctly rendered, correctly positioned) menu simply wasn't
-  // attached to the visible page yet — reading as "opens but nothing appears" rather than a late
-  // attach.
-  React.useLayoutEffect(() => {
-    if (!enabled || !open || !portalRoot || typeof document === 'undefined') return undefined;
-    document.body.appendChild(portalRoot);
-    return () => {
-      if (portalRoot.parentNode) portalRoot.parentNode.removeChild(portalRoot);
-    };
-  }, [enabled, open, portalRoot]);
-
-  // the portal menu's z-index (1400, .mselect-menu--portal) is intentionally higher than every
-  // other fixed overlay it must paint over (checkout sheets/modals) — which also means it would
-  // paint over the sticky app header (.topbar, position:sticky/top:0/z-index:50) if left
-  // unconstrained. Reading the header's live bottom edge (0 when absent, e.g. inside a modal, or
-  // when TopBar's autoHideOnScroll has slid it away) gives a correct top boundary without
-  // hardcoding a pixel height that could drift from the header's own CSS.
-  const getSafeTop = (): number => {
-    if (typeof document === 'undefined') return 0;
-    const header = document.querySelector('.topbar');
-    return header ? Math.max(0, header.getBoundingClientRect().bottom) : 0;
-  };
-
-  const [menuPos, setMenuPos] = React.useState<PortalMenuPos | null>(null);
-
-  const positionMenu = React.useCallback(() => {
-    if (!enabled || !rootRef.current || typeof window === 'undefined') return;
-    const rect = rootRef.current.getBoundingClientRect();
-    const GAP = 4;
-    const safeTop = getSafeTop();
-    // the trigger itself scrolled out of view (fully under the header or past either viewport
-    // edge) — position:fixed keeps the menu exactly where it last was, visually "stuck" over
-    // unrelated content instead of tracking a trigger that isn't on screen to track anymore. Just
-    // dismiss it, same as a native <select>'s options close the instant you scroll the trigger away.
-    if (rect.bottom <= safeTop || rect.top >= window.innerHeight) {
-      onCloseAway();
-      return;
-    }
-    const spaceBelow = window.innerHeight - rect.bottom - GAP;
-    const spaceAbove = rect.top - safeTop - GAP;
-    const openAbove = spaceBelow < ESTIMATED_MENU_HEIGHT && spaceAbove > spaceBelow;
-    // cap the menu to the space it ACTUALLY has in whichever direction it opens, instead of
-    // trusting a static CSS max-height on its own — near the header or viewport edge that static
-    // cap can still be taller than what's really available, which is what let the menu paint over
-    // the header in the first place. The consumer's own overflow-y:auto takes it from there once
-    // content exceeds this.
-    const available = Math.max(120, Math.min(ESTIMATED_MENU_HEIGHT - 12, openAbove ? spaceAbove : spaceBelow));
-    setMenuPos({
-      width: rect.width,
-      left: menuAlign === 'right' ? 'auto' : rect.left,
-      right: menuAlign === 'right' ? window.innerWidth - rect.right : 'auto',
-      top: openAbove ? 'auto' : rect.bottom + GAP,
-      bottom: openAbove ? window.innerHeight - rect.top + GAP : 'auto',
-      maxHeight: available,
-    });
-  }, [enabled, menuAlign, onCloseAway, rootRef]);
-
-  // Synchronous (pre-paint) position computation. useLayoutEffect — not useEffect — matters here:
-  // it runs right after the DOM mutation that mounted the portal but BEFORE the browser paints, so
-  // there is no frame where the menu is mounted-but-unpositioned. positionMenu also needs rootRef
-  // already attached, which it is by the time this runs — the wrapper element it measures is
-  // always rendered regardless of `open`, so its ref was set on an earlier commit already.
-  React.useLayoutEffect(() => {
-    if (!open || !enabled) return;
-    positionMenu();
-  }, [open, enabled, positionMenu]);
-
-  React.useEffect(() => {
-    if (!open || !enabled) return undefined;
-    // A scroll of the page/an ancestor CLOSES the menu instead of repositioning it. Continuously
-    // chasing the trigger during a scroll (recompute + setState + re-render) always lags a frame or
-    // more behind the browser's own native, synchronous scroll — the fixed-position menu visibly
-    // trails the trigger and then "snaps" into place once scrolling settles. A native <select> (and
-    // most real-world custom ones) just closes on scroll instead; that reads as correct rather than
-    // janky, and sidesteps the lag entirely instead of trying to out-run it. capture:true so a
-    // scroll on any nested scrollable ancestor is caught too, not just the window. Scrolling INSIDE
-    // the menu itself (menuElRef's own subtree) must NOT close it — that's just browsing a long
-    // list, not scrolling the trigger away — so that's the one scroll target excluded.
-    // A short grace window after opening REPOSITIONS instead of closing on scroll — two different
-    // self-triggered scrolls land in this window: a searchable dropdown's own scrollIntoView effect
-    // smooth-scrolls the trigger into view the instant the menu opens, AND — for every dropdown —
-    // the BROWSER ITSELF auto-scrolls a just-focused element into view when it was partially cut
-    // off at the viewport edge. Both were previously just swallowed (ignored) here, on the theory
-    // that "our own open" scroll isn't a real user scroll-away — true, but positionMenu() was
-    // computed ONCE, before that scroll happened, so the menu was left floating at its PRE-scroll
-    // coordinates while the page settled at a new scroll offset under it. Resyncing the position on
-    // every grace-window scroll fixes that (cheap: one rect read + setState) without reintroducing
-    // the janky continuous-chase during a real user scroll — this only runs for the ~500ms settle
-    // window right after open, not for scrolling in general (that still closes, below).
-    const onScroll = (e: Event) => {
-      if (menuElRef.current && e.target instanceof Node && menuElRef.current.contains(e.target)) return;
-      if (Date.now() - openedAtRef.current < SELF_SCROLL_GRACE_MS) {
-        positionMenu();
-        return;
-      }
-      onCloseAway();
-    };
-    window.addEventListener('scroll', onScroll, true);
-    window.addEventListener('resize', positionMenu);
-    return () => {
-      window.removeEventListener('scroll', onScroll, true);
-      window.removeEventListener('resize', positionMenu);
-    };
-  }, [open, enabled, positionMenu, onCloseAway]);
-
-  return { portalRoot, menuPos, menuElRef };
-}
+// Autobahn (auto.de redesign) — shared body-portal positioning for md3 popover menus.
+//
+// Extracted out of Dropdown.tsx (the single-select) so MultiDropdown (FormDropdown.tsx's
+// isMulti checklist) can get the exact same `menuPortal` escape-hatch — same clipping problem
+// (a checklist menu inside a VehicleEdit Accordion section gets cut off by `.macc-region-inner`'s
+// overflow:hidden, see md3.css), same fix, and every hard-won timing/CSS fix that went into this
+// belongs in ONE place so the two consumers can't drift out of sync. See Dropdown.tsx's own
+// `menuPortal` doc comment for the user-facing behaviour this produces (escapes clipping
+// ancestors, tracks the trigger on scroll/resize while open, flips above when there's no room
+// below, closes instead of trying to visually "chase" the trigger on a real user scroll).
+//
+// Consumers own their OWN <ul>/menu markup and className — this hook only owns: the body-portal
+// root element, the trigger-relative position math, and the effect timing/scroll-listener
+// plumbing. Apply `menuPos` to whatever floating element you render into `portalRoot` via
+// ReactDOM.createPortal, and pass that same element's ref as `menuElRef` so its own internal
+// scrolling doesn't get misread as a user scrolling the trigger away.
+
+import * as React from 'react';
+
+export interface PortalMenuPos {
+  width: number;
+  // always a concrete value — a real px number for whichever side is anchoring the box, 'auto'
+  // (never omitted) for the other. React drops a style property from the DOM entirely when its
+  // value is `undefined`, so `undefined` is NOT "unset" the way it is in the style object here in
+  // JS — it just means "don't touch whatever's already cascading in from CSS", and the menu's own
+  // stylesheet rule (`top: calc(100% + 4px); left: 0;`) was right there to fill back in and fight
+  // the side that WAS set inline, forcing a negative used-height (CSS 2.1 §10.6.4, clamped to 0 —
+  // the "opens but nothing visible" collapse). Explicit 'auto' writes a real `top: auto` / `left:
+  // auto` inline, which — unlike an omitted property — reliably beats the stylesheet rule
+  // regardless of specificity, so only the intended side ever constrains the box.
+  top: number | 'auto';
+  bottom: number | 'auto';
+  left: number | 'auto';
+  right: number | 'auto';
+  // the space actually available in whichever direction the menu opened, clamped to a sane
+  // [120, ESTIMATED_MENU_HEIGHT-12] range — apply as the floating element's OWN maxHeight (plus
+  // its padding/border, box-sizing:border-box) so it never relies on shrink-to-fit auto-sizing.
+  maxHeight: number;
+}
+
+export interface UsePortalMenuPositionArgs {
+  /** opt-in flag (the `menuPortal` prop on the consumer). */
+  enabled: boolean;
+  open: boolean;
+  /** the trigger's wrapping element — always rendered (regardless of `open`), measured for position. */
+  rootRef: React.RefObject<HTMLElement>;
+  menuAlign?: 'left' | 'right';
+  /** called when the trigger scrolls out of view entirely, or a real user scroll happens after
+   *  the post-open grace window — the menu has nothing sensible left to anchor to or chase. */
+  onCloseAway: () => void;
+}
+
+// TMenuEl: the concrete element type of whatever you portal (Dropdown.tsx portals a wrapping
+// `<div>`; MultiDropdown's checklist has no separate wrapper and portals its `<ul>` directly) —
+// keeps `menuElRef` assignable straight to that element's own `ref` without a cast.
+export interface UsePortalMenuPositionResult<TMenuEl extends HTMLElement = HTMLDivElement> {
+  /** a fresh `div.md3` appended to `document.body` while open (so --md-* tokens and every
+   *  `.md3 .mselect-*` rule still resolve at body level, same technique as ui/Modal.tsx) — pass
+   *  as the portal target to `ReactDOM.createPortal`. `null` when `!enabled`. */
+  portalRoot: HTMLDivElement | null;
+  /** `null` for one frame on open, before position is first measured — render `visibility:hidden`
+   *  (not just omit inline styles) in that case, see Dropdown.tsx's render for the exact pattern. */
+  menuPos: PortalMenuPos | null;
+  /** attach to the actual floating menu element you portal — excludes its own internal scrolling
+   *  (e.g. a long option list) from being misread as the user scrolling the trigger away, and is
+   *  also what click-away logic should check alongside the trigger's own root. */
+  menuElRef: React.RefObject<TMenuEl>;
+}
+
+// the list's own max-height guess (plus the menu box's padding/border) — only needs to be a
+// reasonable estimate; it decides whether to flip ABOVE the trigger. The real size is then
+// clamped to the space actually available (see `maxHeight` above), not just guessed at.
+const ESTIMATED_MENU_HEIGHT = 300;
+// a scroll within this window of opening REPOSITIONS instead of closing — see the effect below.
+const SELF_SCROLL_GRACE_MS = 500;
+
+export function usePortalMenuPosition<TMenuEl extends HTMLElement = HTMLDivElement>({
+  enabled,
+  open,
+  rootRef,
+  menuAlign = 'left',
+  onCloseAway,
+}: UsePortalMenuPositionArgs): UsePortalMenuPositionResult<TMenuEl> {
+  const menuElRef = React.useRef<TMenuEl | null>(null);
+  // timestamp of the last open — lets the close-on-scroll listener below tell a genuine user
+  // scroll apart from a scroll OUR OWN opening sequence causes (e.g. a searchable dropdown's own
+  // scrollIntoView, or the browser's native "scroll a just-focused element into view" behaviour).
+  // useLayoutEffect (not useEffect): must be set before the scroll-listener effect further down
+  // can possibly attach and fire — same synchronous pre-paint phase as the portal-attach/position
+  // effects below, so there's no window where a scroll could be misjudged against a stale (or
+  // zero) timestamp.
+  const openedAtRef = React.useRef(0);
+  React.useLayoutEffect(() => {
+    if (open) openedAtRef.current = Date.now();
+  }, [open]);
+
+  const portalRoot = React.useMemo<HTMLDivElement | null>(() => {
+    if (!enabled || typeof document === 'undefined') return null;
+    const el = document.createElement('div');
+    el.className = 'md3';
+    return el;
+  }, [enabled]);
+
+  // useLayoutEffect, not useEffect: createPortal(children, portalRoot) renders content INTO
+  // portalRoot the moment `open` becomes true, but that's a detached node until THIS effect
+  // appends it to document.body; a plain useEffect only runs after the browser paints, so there
+  // was a real window where the (correctly rendered, correctly positioned) menu simply wasn't
+  // attached to the visible page yet — reading as "opens but nothing appears" rather than a late
+  // attach.
+  React.useLayoutEffect(() => {
+    if (!enabled || !open || !portalRoot || typeof document === 'undefined') return undefined;
+    document.body.appendChild(portalRoot);
+    return () => {
+      if (portalRoot.parentNode) portalRoot.parentNode.removeChild(portalRoot);
+    };
+  }, [enabled, open, portalRoot]);
+
+  // the portal menu's z-index (1400, .mselect-menu--portal) is intentionally higher than every
+  // other fixed overlay it must paint over (checkout sheets/modals) — which also means it would
+  // paint over the sticky app header (.topbar, position:sticky/top:0/z-index:50) if left
+  // unconstrained. Reading the header's live bottom edge (0 when absent, e.g. inside a modal, or
+  // when TopBar's autoHideOnScroll has slid it away) gives a correct top boundary without
+  // hardcoding a pixel height that could drift from the header's own CSS.
+  const getSafeTop = (): number => {
+    if (typeof document === 'undefined') return 0;
+    const header = document.querySelector('.topbar');
+    return header ? Math.max(0, header.getBoundingClientRect().bottom) : 0;
+  };
+
+  const [menuPos, setMenuPos] = React.useState<PortalMenuPos | null>(null);
+
+  const positionMenu = React.useCallback(() => {
+    if (!enabled || !rootRef.current || typeof window === 'undefined') return;
+    const rect = rootRef.current.getBoundingClientRect();
+    const GAP = 4;
+    const safeTop = getSafeTop();
+    // the trigger itself scrolled out of view (fully under the header or past either viewport
+    // edge) — position:fixed keeps the menu exactly where it last was, visually "stuck" over
+    // unrelated content instead of tracking a trigger that isn't on screen to track anymore. Just
+    // dismiss it, same as a native <select>'s options close the instant you scroll the trigger away.
+    if (rect.bottom <= safeTop || rect.top >= window.innerHeight) {
+      onCloseAway();
+      return;
+    }
+    const spaceBelow = window.innerHeight - rect.bottom - GAP;
+    const spaceAbove = rect.top - safeTop - GAP;
+    const openAbove = spaceBelow < ESTIMATED_MENU_HEIGHT && spaceAbove > spaceBelow;
+    // cap the menu to the space it ACTUALLY has in whichever direction it opens, instead of
+    // trusting a static CSS max-height on its own — near the header or viewport edge that static
+    // cap can still be taller than what's really available, which is what let the menu paint over
+    // the header in the first place. The consumer's own overflow-y:auto takes it from there once
+    // content exceeds this.
+    const available = Math.max(120, Math.min(ESTIMATED_MENU_HEIGHT - 12, openAbove ? spaceAbove : spaceBelow));
+    setMenuPos({
+      width: rect.width,
+      left: menuAlign === 'right' ? 'auto' : rect.left,
+      right: menuAlign === 'right' ? window.innerWidth - rect.right : 'auto',
+      top: openAbove ? 'auto' : rect.bottom + GAP,
+      bottom: openAbove ? window.innerHeight - rect.top + GAP : 'auto',
+      maxHeight: available,
+    });
+  }, [enabled, menuAlign, onCloseAway, rootRef]);
+
+  // Synchronous (pre-paint) position computation. useLayoutEffect — not useEffect — matters here:
+  // it runs right after the DOM mutation that mounted the portal but BEFORE the browser paints, so
+  // there is no frame where the menu is mounted-but-unpositioned. positionMenu also needs rootRef
+  // already attached, which it is by the time this runs — the wrapper element it measures is
+  // always rendered regardless of `open`, so its ref was set on an earlier commit already.
+  React.useLayoutEffect(() => {
+    if (!open || !enabled) return;
+    positionMenu();
+  }, [open, enabled, positionMenu]);
+
+  React.useEffect(() => {
+    if (!open || !enabled) return undefined;
+    // A scroll of the page/an ancestor CLOSES the menu instead of repositioning it. Continuously
+    // chasing the trigger during a scroll (recompute + setState + re-render) always lags a frame or
+    // more behind the browser's own native, synchronous scroll — the fixed-position menu visibly
+    // trails the trigger and then "snaps" into place once scrolling settles. A native <select> (and
+    // most real-world custom ones) just closes on scroll instead; that reads as correct rather than
+    // janky, and sidesteps the lag entirely instead of trying to out-run it. capture:true so a
+    // scroll on any nested scrollable ancestor is caught too, not just the window. Scrolling INSIDE
+    // the menu itself (menuElRef's own subtree) must NOT close it — that's just browsing a long
+    // list, not scrolling the trigger away — so that's the one scroll target excluded.
+    // A short grace window after opening REPOSITIONS instead of closing on scroll — two different
+    // self-triggered scrolls land in this window: a searchable dropdown's own scrollIntoView effect
+    // smooth-scrolls the trigger into view the instant the menu opens, AND — for every dropdown —
+    // the BROWSER ITSELF auto-scrolls a just-focused element into view when it was partially cut
+    // off at the viewport edge. Both were previously just swallowed (ignored) here, on the theory
+    // that "our own open" scroll isn't a real user scroll-away — true, but positionMenu() was
+    // computed ONCE, before that scroll happened, so the menu was left floating at its PRE-scroll
+    // coordinates while the page settled at a new scroll offset under it. Resyncing the position on
+    // every grace-window scroll fixes that (cheap: one rect read + setState) without reintroducing
+    // the janky continuous-chase during a real user scroll — this only runs for the ~500ms settle
+    // window right after open, not for scrolling in general (that still closes, below).
+    const onScroll = (e: Event) => {
+      if (menuElRef.current && e.target instanceof Node && menuElRef.current.contains(e.target)) return;
+      if (Date.now() - openedAtRef.current < SELF_SCROLL_GRACE_MS) {
+        positionMenu();
+        return;
+      }
+      onCloseAway();
+    };
+    window.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', positionMenu);
+    return () => {
+      window.removeEventListener('scroll', onScroll, true);
+      window.removeEventListener('resize', positionMenu);
+    };
+  }, [open, enabled, positionMenu, onCloseAway]);
+
+  return { portalRoot, menuPos, menuElRef };
+}

package/vdp/VdpModules.tsx

@@ -1424,12 +1424,18 @@ export interface VdpStickyBarProps {
   show: boolean;
   /** primary CTA click. */
   onSecure?: () => void;
+  /** ADV-181: monthly rate for the CURRENTLY selected payment product (fin/leasing differ) —
+   *  falls back to vehicle.monthly (the financing rate) when omitted, the pre-ADV-181 display. */
+  monthly?: number;
+  /** ADV-181: label of the selected product ("Finanzierung"/"Leasing") — replaces the generic
+   *  "ab" eyebrow so the sticky bar's label always matches the rate it shows. */
+  productLabel?: string;
   /** i18n function (drilled from the page). */
   t: TranslationFunction;
 }
 
 /** Desktop sticky summary bar (AS24 pattern) — docks to top, driven by `show`. */
-export const VdpStickyBar: React.FunctionComponent<VdpStickyBarProps> = ({ vehicle, image, show, onSecure, t }) => (
+export const VdpStickyBar: React.FunctionComponent<VdpStickyBarProps> = ({ vehicle, image, show, onSecure, monthly, productLabel, t }) => (
   <div className={'vdp-stickytop hide-mobile' + (show ? ' vdp-stickytop--on' : '')}>
     <div className="container" style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '10px 24px' }}>
       <img
@@ -1455,9 +1461,9 @@ export const VdpStickyBar: React.FunctionComponent<VdpStickyBarProps> = ({ vehic
       </div>
       <div style={{ textAlign: 'right', flex: 'none' }}>
         <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, justifyContent: 'flex-end' }}>
-          <span className="md-label-sm">{t('autobahn:sticky.from')}</span>
+          <span className="md-label-sm">{productLabel || t('autobahn:sticky.from')}</span>
           <span className="num" style={{ fontWeight: 700, fontSize: 20, color: 'var(--md-primary)', letterSpacing: '-.4px' }}>
-            {vehicle.monthly} €
+            {monthly ?? vehicle.monthly} €
           </span>
           <span className="md-label-sm">{t('autobahn:sticky.perMonth')}</span>
         </div>