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

package/cards/CarCard.tsx

@@ -51,14 +51,8 @@ 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). 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 when the card is clicked (opens the detail page). */
+  onOpen: (car: AutobahnCar) => void;
   /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
   onMediaEnter?: () => void;
   /**
@@ -119,16 +113,8 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   onCall,
   onOpenRateAdjust,
   onShowFinancingDetails,
-  onModeChange,
 }) => {
-  // 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 [mode, setMode] = useState<PaymentMode>('financing');
   const [photoIndex, setPhotoIndex] = useState(0);
   const [viewerOpen, setViewerOpen] = useState(false);
   const mediaRef = useRef<HTMLDivElement | null>(null);
@@ -174,7 +160,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   return (
     <article
       className="mcard mcard--interactive cc-card"
-      onClick={() => onOpen(car, mode)}
+      onClick={() => onOpen(car)}
       style={{ display: 'flex', flexDirection: 'column' }}
     >
       <div
@@ -289,7 +275,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={changeMode} t={t} />
+          <PriceTabs car={car} mode={mode} onModeChange={setMode} 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

@@ -30,6 +30,7 @@ import {
   PpActivity,
   GalleryBadges,
   GalleryCounter,
+  GalleryActivityPill,
   OfferBadge,
   PriceTabs,
   PriceHero,
@@ -51,13 +52,8 @@ 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). 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 when the card (or the CTA) is clicked (opens the detail page). */
+  onOpen: (car: AutobahnCar) => void;
   /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
   onMediaEnter?: () => void;
   /**
@@ -96,16 +92,8 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
   t,
   adminAction,
   onShowFinancingDetails,
-  onModeChange,
 }) => {
-  // 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 [mode, setMode] = useState<PaymentMode>('financing');
   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
@@ -158,7 +146,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
   return (
     <article
       className="mcard mcard--interactive listcard"
-      onClick={() => onOpen(car, mode)}
+      onClick={() => onOpen(car)}
       style={{ background: 'var(--md-sc-lowest)' }}
     >
       <div className="listcard-media" ref={mediaRef} style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
@@ -224,44 +212,19 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
         <div className="show-mobile">
           <GalleryBadges car={car} t={t} />
         </div>
-        {/* desktop: single row — light "1|N" photo counter + a combined eye/heart chip, no
-            availability/Geprüft pill (not present in the Figma "mcard" export).
-            Same 3-state policy as the mobile pills above (GalleryCounter/GalleryBadges,
-            cardParts.tsx) and CarCard's GalleryCounter/GalleryActivityPill, just inlined here
-            instead of reusing those components (different chip markup — one shared "N|M" +
-            eye+heart pill instead of three separate ones):
-             - single-image: car.photos is the real, eagerly-known count (not the lazily-loaded
-               gallery array length) — accurate even before the extra photos have loaded.
-             - loading: viewsCount/favoritesCount are undefined until stats resolve for this car
-               — hidden, no skeleton, same as everywhere else.
-             - zero-value: a real 0 is intentionally treated the same as "not loaded" — hidden,
-               not shown as "eye 0" / "heart 0" (noise on a dense results list otherwise). */}
-        <div
-          className="hide-mobile"
-          style={{ position: 'absolute', bottom: 20, left: 12, zIndex: 3, display: 'flex', alignItems: 'center', gap: 6 }}
-        >
-          {car.photos > 1 && (
-            <span className="mcard-photo-chip">
-              <Icon name="maximize" size={16} stroke={1.7} />
-              {photoIndex + 1}|{car.photos}
-            </span>
-          )}
-          {(!!car.viewsCount || !!car.favoritesCount) && (
-            <span className="mcard-photo-chip">
-              {!!car.viewsCount && (
-                <>
-                  <Icon name="eye" size={16} stroke={1.7} />
-                  {car.viewsCount}
-                </>
-              )}
-              {!!car.favoritesCount && (
-                <>
-                  <Icon name="heart" size={16} stroke={1.7} />
-                  {car.favoritesCount}
-                </>
-              )}
-            </span>
-          )}
+        {/* desktop: same light "1|N" photo counter + eye/heart activity pill as CarCard (Figma
+            "mcard" export) — reusing GalleryCounter(light)/GalleryActivityPill (cardParts.tsx)
+            instead of the old inlined "N|M" + combined eye+heart chip this used to render, so
+            list view and grid view can never visually drift again. Same bottom:10/left:10 +
+            bottom:10/right:10 placement, same 3-state policy (both components self-guard:
+            GalleryCounter hides at total<=1, GalleryActivityPill hides when both counts are
+            falsy — loading/zero read the same as "nothing worth showing yet", see their own
+            doc comments in cardParts.tsx) — no manual guards needed here any more. */}
+        <div className="hide-mobile" style={{ position: 'absolute', bottom: 10, left: 10, zIndex: 3 }}>
+          <GalleryCounter current={photoIndex + 1} total={car.photos} light />
+        </div>
+        <div className="hide-mobile" style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
+          <GalleryActivityPill viewsCount={car.viewsCount} favoritesCount={car.favoritesCount} />
         </div>
       </div>
 
@@ -305,7 +268,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={changeMode} t={t} className="show-mobile" />
+        <PriceTabs car={car} mode={mode} onModeChange={setMode} 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 />
@@ -324,7 +287,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
               iconRight="arrow-right"
               onClick={(e) => {
                 e.stopPropagation();
-                onOpen(car, mode);
+                onOpen(car);
               }}
             >
               {t('autobahn:card.cta.viewOffer')}
@@ -373,7 +336,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
               iconRight="arrow-right"
               onClick={(e) => {
                 e.stopPropagation();
-                onOpen(car, mode);
+                onOpen(car);
               }}
             >
               {t('autobahn:card.cta.viewOffer')}

package/cards/cardParts.tsx

@@ -1103,11 +1103,6 @@ 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.
@@ -1135,70 +1130,42 @@ 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(heroMode === 'leasing' ? 'autobahn:card.price.leasingFrom' : 'autobahn:card.price.financingFrom')}
-      </div>
-      {/* reuses PriceHero's own rendering — the exact same stacked "UVP-Rate ⓘ /
+      <div className="pp-eyebrow">{t('autobahn:card.price.financingFrom')}</div>
+      {/* reuses PriceHero's own financing 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={heroMode} t={t} alwaysShowUnit />
-      {heroMode === 'leasing' ? (
-        <>
+      <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} />
           {hasLeasTerms && (
-            <div className="pp-hero-terms">
+            <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>
           )}
-          {/* 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>
       )}
     </div>
   );

package/cards/types.ts

@@ -57,16 +57,6 @@ 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,9 +39,10 @@ export interface IVehiclePriceItemProps {
   isMarge?: boolean;
 }
 class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
-  // 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=`).
+  routeToActiveTab = () => {
+    const { priceTitle } = this.props;
+    localStorage.setItem('activeTabCDP', priceTitle);
+  }
 
   render(): React.ReactNode {
     const {
@@ -102,6 +103,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
           ...routeObj,
           target,
           rel,
+          onClick: this.routeToActiveTab,
           className: priceItemCategoryClassName,
           href: url
         })}
@@ -186,6 +188,7 @@ 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-181: the dead activeTabCDP write removed (its only reader was the unrouted legacy
-        // VDP sidebar) — the live VDP resolves its tab centrally.
+        // ADV-116: opening a CDP from a card defaults to the Financing tab.
+        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
         href: url,
         target,
         rel

package/compat/VehicleSmallCard/VehicleSmallCard.tsx

@@ -319,9 +319,8 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           target,
           rel,
           className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
-          // 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).
+          // ADV-116: opening a CDP from a card defaults to the Financing tab.
+          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
           href: url
         })}
 
@@ -374,9 +373,8 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           target,
           rel,
           className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
-          // 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).
+          // ADV-116: opening a CDP from a card defaults to the Financing tab.
+          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
           href: url
         })}
         <VehicleInfo {...vehicleInfoProps} />

package/data/toAutobahnCar.ts

@@ -23,8 +23,6 @@
 // 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';
@@ -429,27 +427,6 @@ 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
@@ -517,7 +494,6 @@ 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.122",
+  "version": "1.0.123",
   "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.20",
+    "@bytebrand/fe-financing": "^5.14.19",
     "classnames": "2.2.6",
     "clsx": "^2.1.1",
     "d3-format": "1.4.5",

package/theme/md3.css

@@ -298,9 +298,38 @@ line-height: 31px;
   flex: none;
   transition: background 0.15s;
 }
-.md3 .icon-btn:hover {
+/* :not(:disabled) — same convention as .co-rail-step:hover:not(:disabled) elsewhere in this file:
+   a disabled icon-btn (e.g. VdpViewer's zoom in/out at ZOOM_MIN/MAX) shouldn't show a hover fill
+   that implies it's still clickable. */
+.md3 .icon-btn:hover:not(:disabled) {
   background: var(--md-sc-high);
 }
+.md3 .icon-btn:disabled {
+  cursor: not-allowed;
+}
+/* VDP viewer (desktop) toolbar — zoom out/in, 360°, and close share this white-circle+shadow
+   look; email/call get the primary-blue one below. Both are CLASSES, not inline `style` (an
+   inline style background permanently pins it, blocking :hover entirely — no exceptions, so
+   this used to be the one thing silently killing hover on all five of these buttons). Works
+   without any extra :hover rule of its own for the light variant: .icon-btn:hover:not(:disabled)
+   above is more specific (4 selectors vs. this rule's 2) so it already wins on hover for free. */
+.md3 .vdp-viewer-light {
+  background: var(--md-sc-lowest, #fff);
+  box-shadow: var(--md-e1);
+}
+.md3 .vdp-viewer-contact {
+  background: var(--md-primary);
+  box-shadow: var(--md-e1);
+}
+/* the contact (email/call) pair needs its OWN :hover, and it needs the explicit `.icon-btn`
+   repeated in the selector to match .icon-btn:hover:not(:disabled) above's specificity (4
+   selectors each, :not()'s specificity is its argument's — a plain `.vdp-viewer-contact:hover`
+   is only 3 and would silently lose, tinting these the light pair's neutral grey instead of the
+   deeper blue below, the same "primary button, one shade darker" treatment .mbtn--filled:hover
+   already uses). Source order (this comes after) breaks the tie once specificity is equal. */
+.md3 .icon-btn.vdp-viewer-contact:hover {
+  background: var(--autode-blau-strong);
+}
 .md3 .icon-btn--filled {
   background: #FFFFFF;
   border: 1px solid #D4DDE7;
@@ -2263,6 +2292,12 @@ line-height: 31px;
   display: inline-flex;
   gap: 6px;
   margin: 12px 0;
+  /* .dash-card is display:flex/flex-direction:column (legacy .section) with the default
+     align-items:stretch, so this box (its width left auto) stretches to the card's full width
+     as a flex item regardless of being inline-flex — without justify-content the "0 0 0" digits
+     then just sit at the box's flex-start (left) edge instead of centering like the icon above
+     them (EmployeeIcon centers via its own margin:0 auto, unaffected by this). */
+  justify-content: center;
 }
 .md3 .dash-odo span {
   display: inline-flex;
@@ -2924,11 +2959,132 @@ line-height: 31px;
   .md3 .co-step-label {
     display: none;
   }
-  .md3 .co-step {
+  /* CheckoutPage/CheckoutChromeNext never actually add the `.md3` class anywhere in their own
+     tree (only comments say they expect it — confirmed by grep), so a lone .md3-prefixed rule
+     here would silently never match on this page at all. Every rule below is written twice —
+     `.md3 .x` (wins by source order over the un-media-queried base rule of the same
+     specificity, IF `.md3` ever is present) and plain `.x` (the one that actually matches
+     today, and stays correct even if that .md3 gap gets fixed later) — so the fix holds
+     regardless of that gap. */
+  .md3 .co-step,
+  .co-step {
+    /* was flex: none — with .co-step-label hidden two rules up, each step's only remaining
+       content is a fixed 30px dot + this connector bar; flex:none sized every step off the
+       bar's own min-width instead of sharing the row, and together with the bar's min-width
+       below (was 24px, MORE than the base 16px) the 5 steps' combined min-content width ran
+       past a 390px viewport — hence the horizontal scroll. flex:1 (matches the desktop base)
+       lets them actually share the row and shrink together instead. */
+    flex: 1;
+  }
+  /* last step (5) has no .co-step-bar (nothing after the final dot to connect to) — at an
+     equal flex:1 share like its siblings, its box was still as wide as theirs, leaving empty
+     trailing space after its dot that read as "not stretched to the edge". flex:none sizes it
+     down to just its dot's own 30px instead, and steps 1-4 (still flex:1) automatically absorb
+     the freed-up space into their own bars — dot 5 ends up flush at the row's right edge. */
+  .md3 .co-step:last-child,
+  .co-step:last-child {
     flex: none;
   }
-  .md3 .co-step-bar {
-    min-width: 24px;
+  .md3 .co-step-bar,
+  .co-step-bar {
+    min-width: 10px;
+    margin: 0 4px;
+  }
+  /* was 28px auto 4px / 0 24px (desktop values) at every width — no dedicated mobile value. */
+  .md3 .co-stepper,
+  .co-stepper {
+    margin: 10px auto 10px;
+    padding: 0 14px;
+  }
+  .md3 .co-header-row,
+  .co-header-row {
+    /* was 12px 24px (desktop) at every width — no dedicated mobile value. */
+    padding: 18px 14px;
+    /* was 16px (desktop) at every width. */
+    gap: 10px;
+  }
+  .md3 .co-header-car,
+  .co-header-car {
+    /* was 16px (desktop) at every width. */
+    gap: 10px;
+  }
+  .md3 .co-car-img,
+  .co-car-img {
+    /* was 64x44 (desktop) at every width — same 64:44 aspect ratio, just bigger. */
+    width: 80px;
+    height: 55px;
+  }
+  .md3 .co-price-amount,
+  .co-price-amount {
+    /* was 20px (desktop) at every width. */
+    font-size: 22px;
+  }
+  /* "Weiter"/"Zurück" (.co-next) — the shared Button component's size="lg" gives every mbtn
+     here .mbtn--lg's bigger dimensions (h:48/padding 0 30, or h:46 on phone via the NewMainPage
+     mobile rule elsewhere); on this narrow a sheet that reads oversized next to the rest of the
+     form. Drops back to plain .mbtn's own base sizing instead. (.co-next .mbtn--lg is already
+     2 classes, matching .md3 .mbtn--lg's own specificity, so this one didn't need the
+     dual-selector treatment above to win either way.) */
+  .co-next .mbtn--lg {
+    height: 40px;
+    padding: 0 24px;
+    font-size: 14px;
+    /* same size for both — flex:1 splits whatever's left on their shared row evenly, so
+       Weiter's longer label/icon can't make it wider than back. */
+    flex: 1;
+  }
+  /* .mbtn--outlined ("back"): explicit base .mbtn + .mbtn--outlined properties, not just the
+     size tweak above — same reasoning as the dual-selector rules elsewhere in this block
+     (CheckoutPage never actually adds the `.md3` class anywhere in its own tree), just spelled
+     out in full this time since the request was for this button's whole look, not one property.
+     border-radius/border are explicit per-request overrides (10px + a real 1px border), not
+     the shared design-system's var(--md-r-full) pill + inset-box-shadow border trick — a
+     deliberately different, more "squared" look for just this button. */
+  .md3 .co-next .mbtn--outlined,
+  .co-next .mbtn--outlined {
+    font-family: var(--md-font);
+    font-weight: 600;
+    letter-spacing: 0.1px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    white-space: nowrap;
+    background: transparent;
+    color: #005cff;
+    /* label text renders as the literal lowercase "back" (no matching key in the CheckoutPage
+       locale files — i18next falls back to printing the raw t('back') key itself), next to
+       Weiter's already-capitalized German label. Fixed here rather than chasing down/adding
+       the missing translation key, since the ask was specifically about the letter case. */
+    text-transform: capitalize;
+    border-radius: 10px;
+    border: 1px solid #005cff;
+    box-shadow: none;
+  }
+  /* .mbtn--filled ("Weiter"): hardcoded #005cff per explicit request, not var(--md-primary) —
+     same dual-selector reasoning as above. */
+  .md3 .co-next .mbtn--filled,
+  .co-next .mbtn--filled {
+    background: #005cff;
+  }
+  /* back on the left, Weiter on the right, on their OWN row — .co-error (when a step's
+     validation fails) must not crowd into that same row with them. flex-wrap + the .co-error
+     rule below (flex-basis:100%, forcing it to consume its whole line) does this with the
+     existing flat DOM (.co-next's 3 children are plain siblings — .co-error, then both
+     buttons, no wrapping element around the buttons) — .co-error always lands on its own
+     first line, and whatever's left (the two buttons — or, when there's no error, ALL of
+     .co-next's content) wraps onto the next line and is laid out by flex-direction:row same
+     as before. The existing gap:8px (base .co-next, unmodified) applies between wrapped lines
+     too, so the error/button rows don't need their own separate margin. */
+  .md3 .co-next,
+  .co-next {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: stretch;
+  }
+  .md3 .co-next .co-error,
+  .co-next .co-error {
+    flex: 1 0 100%;
   }
 }
 /* below the 992px desktop breakpoint the content no longer reserves the 424px left
@@ -3456,12 +3612,14 @@ line-height: 31px;
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
 }
 /* pin the VDP gallery's own edge offset — the base .car-arrow--l/--r rule above was moved to
-   10px for the SRP card carousels; the VDP viewer keeps its original, larger offset. */
+   10px for the SRP card carousels; the VDP gallery box's OWN overlay elements (push-badges,
+   favorite/share, the photo-count/activity pills) all sit at a 14px inset, so the arrows match
+   that instead (was 22px — inconsistent with the rest of this box). */
 .md3 .vdp-gallerybox .car-arrow--l {
-  left: 22px;
+  left: 14px;
 }
 .md3 .vdp-gallerybox .car-arrow--r {
-  right: 22px;
+  right: 14px;
 }
 
 /* ==========================================================================
@@ -3657,7 +3815,7 @@ line-height: 31px;
 .md3 .vdp-meta > span {
   display: inline-flex;
   align-items: center;
-  gap: 0px;
+  gap: 6px;
   white-space: nowrap;
 }
 .md3 .vdp-meta > span + span::before {
@@ -4082,8 +4240,7 @@ line-height: 31px;
 }
 /* consistent studio treatment for ALL inventory photos: white backdrop + soft grounding floor
    shadow, so mixed-source cutouts look uniform (Carvana/Cinch catalog look) */
-.md3 .cc-media,
-.md3 .listcard-media {
+.md3 .cc-media {
   background: radial-gradient(
       58% 13px at 50% 90%,
       rgba(16, 22, 42, 0.15),
@@ -4091,6 +4248,12 @@ line-height: 31px;
     ),
     #fff;
 }
+/* SRP list card: plain white, no floor shadow under the car — the wider (320px) media column
+   made that soft dark oval read as an actual smudge/shadow under the vehicle instead of a
+   subtle grounding cue. .cc-media (home/offer grid cards) keeps it, unaffected. */
+.md3 .listcard-media {
+  background: #fff;
+}
 /* offer cards: border + soft shadow so they sit on the page (not borderless-floaty) */
 .md3 .cc-card {
   box-shadow: var(--md-e1);
@@ -4099,7 +4262,12 @@ line-height: 31px;
 /* horizontal listing card (SRP): image | info | price */
 .md3 .listcard {
   display: grid;
-  grid-template-columns: 300px 1fr 240px;
+  /* media column widened 300→320 (340 was too much): at the max 6 dots (CardCarousel slices
+     images to 6), the centered dots row got wide enough to visually collide with
+     .cc-activity-pill (bottom-right, anchored 10px from the edge) and came within ~1.5px of
+     .cc-photo-pill (bottom-left) too — both pills are anchored a fixed 10px from the column's
+     edges, so a wider column pushes them further apart without anything else needing to change. */
+  grid-template-columns: 320px 1fr 240px;
   align-items: stretch;
 }
 .md3 .listcard-media {
@@ -4491,6 +4659,19 @@ line-height: 31px;
 .md3 .body-tile .md-label-sm {
   color: var(--md-on-surface-variant);
 }
+/* the label span has no explicit width — as a column-flex item with align-items:center it
+   sizes to its own natural (unwrapped) content width, so a long compound label like
+   "SUV/Geländewagen" (no spaces to wrap at) overflows past the tile's rounded edges instead
+   of wrapping to a 2nd line. Cap it to the tile's own content width so the browser is forced
+   to wrap — plain `overflow-wrap: break-word` prefers a normal break point ("/" counts, same
+   as "and/or" wrapping at the slash in body text) and only breaks mid-word as a genuine last
+   resort. `word-break: break-word` looked like the same fix but isn't: it forces min-content
+   sizing as if EVERY character were a break point, which made the browser ignore the "/" and
+   split "Geländewa" / "gen" instead — do not add it back. */
+.md3 .body-tile > span:not(.md-label-sm) {
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
 /* payment paths: financing hero (eyebrow + big rate + terms) on top, Leasing/Kaufen quiet rows */
 .md3 .pricepaths {
   min-width: 0;
@@ -6495,7 +6676,10 @@ line-height: 31px;
     gap: 24px;
   }
   .md3 .listcard {
-    grid-template-columns: 260px 1fr;
+    /* same dots/pill clearance reasoning as the base 300→320 bump above — this range (601–980px,
+       price column dropped to 1 row below) still shows the desktop pills (.hide-mobile only
+       disappears at 600px), so it needs the same margin, proportionally applied. */
+    grid-template-columns: 280px 1fr;
   }
   /* tablet: price column spans full width below image+info, zones stack in a normal column */
   .md3 .listcard-price {
@@ -7432,7 +7616,6 @@ line-height: 31px;
   .md3 .vdp-push-badges {
     gap: 6px;
     margin-bottom: 13px;
-    padding-left: 12px;
   }
 }
 
@@ -7750,9 +7933,14 @@ color: #005CFF;
 @media (max-width: 600px) {
   /* full-bleed gallery: edge-to-edge, app-like. Extra height (vs. the plain photo height)
      reserves room at the bottom for the controls row, now overlaid on the image itself
-     (round 15 — supersedes the earlier "no overlay" layout). */
+     (round 15 — supersedes the earlier "no overlay" layout).
+     -14px, not -24px: cancels .vdp-main's OWN mobile side padding (14px !important, below —
+     .vdp-gallerybox's direct containing block), not the 24px desktop inline value. Was still
+     -24px from before that 14px override existed, so this was overshooting the true viewport
+     edge by 10px — .car-arrow/.vdp-push-badges (positioned against .cardcar, i.e. against THIS
+     box) were landing ~4px from the real edge instead of their own stated 14px. */
   .md3 .vdp-gallerybox {
-    margin: 0 -24px;
+    margin: 0 -14px;
     border-radius: 0;
     border: 0;
     box-shadow: none;
@@ -7764,11 +7952,16 @@ color: #005CFF;
   .md3 .vdp-gallery {
     position: relative;
   }
-  /* controls row now sits ON the image as an overlay, bottom-aligned (round 15) */
+  /* controls row now sits ON the image as an overlay, bottom-aligned (round 15).
+     left/right: 0, not 14px — unlike .vdp-gallerybox above, .vdp-gallery is NOT full-bleed
+     (no negative margin of its own), so it's still sitting inside .vdp-main's 14px padding —
+     that padding alone already supplies the 14px gutter from the true edge. The extra 14px
+     here was stacking on top of it (14+14=28px), pulling .gallery-photos-btn/the share+save
+     icons noticeably further in than .car-arrow/.vdp-push-badges' real 14px on the same edges. */
   .md3 .gallery-controls-row {
     position: absolute;
-    left: 14px;
-    right: 14px;
+    left: 0;
+    right: 0;
     bottom: 12px;
     z-index: 3;
     padding: 0;
@@ -9075,6 +9268,15 @@ color: #005CFF;
     line-height: 16px;
     color: #ffffff;
   }
+  /* the base .mbtn .lucide rule (width/height:18px) was overriding FinanceCalculator.tsx's own
+     size={23} prop on this icon — CSS width/height on an <svg> always wins over its own
+     width/height attributes, so the component-level size bump alone did nothing visible.
+     Scoped to just this button (not .fin-cta-row .mbtn--outlined/"Anrufen" next to it, whose
+     18px icon wasn't part of this request). */
+  .md3 .fin-cta-row .mbtn--filled .lucide {
+    width: 23px;
+    height: 23px;
+  }
   .md3 .fin-cta-row .mbtn--outlined {
     width: 108px;
     background: #ffffff;
@@ -9349,7 +9551,31 @@ color: #005CFF;
   border-radius: var(--md-r-lg, 16px);
   box-shadow: var(--md-e1);
   padding: 20px;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
+  /* the legacy .section class (still applied alongside dash-card — see DashboardOverview.tsx
+     and its sibling sections) sets a fixed height: 361px/195px per tier with
+     display:flex/flex-direction:column; min-height:auto only raises the floor, it never cancels
+     that fixed height, so once a card's content (e.g. the table after the padding fix above)
+     grew past 361px it kept overflowing the rounded border instead of growing the card — that
+     was the "676 more vehicles" sitting outside the block.
+     height:100% (not auto) on purpose: each dash-card's immediate parent is a react-flexbox-grid
+     <Col>, and every Row of <Col>s already stretches its columns to the tallest one by default
+     (align-items: normal → stretch) — 100% lets the card fill that already-equalized column
+     height instead of only fitting its own content, which is what keeps e.g. "Create Car" (tall
+     icon + copy) and "Base data" (three short lines) sitting in the same Row at equal height with
+     their bottom edges aligned, the way the old fixed-height tiers did whenever content happened
+     to fit them. A lone/tallest card in a Row still just gets its own content height back, since
+     100% then resolves to exactly that — no clipping either way.
+     BUT plain height:100% + margin-bottom on the SAME box fights itself: the <Col> is a flex
+     item, which per spec always establishes its own block-formatting-context for its children —
+     so dash-card's margin-bottom can never collapse through it into extra Row spacing, it can
+     only overflow past the (exactly 100%-filled) Col edge, which does NOT push the next Row down
+     — net visible gap: 0, cards touching, no matter what the margin-bottom value is set to. Carve
+     the same margin OUT of the height instead (100% − margin) so box + margin together still sum
+     to exactly the stretched Col height, but the box itself stops short and the margin is real,
+     visible empty space above the next Row rather than overflow past this one. Keep this in sync
+     with margin-bottom above if that value ever changes. */
+  height: calc(100% - 15px);
   min-height: auto;
 }
 .md3 .dash-card-title {
@@ -9363,9 +9589,24 @@ color: #005CFF;
   font: 600 14px var(--md-font);
   color: var(--md-primary);
   text-decoration: none;
+  /* the legacy .secondaryLink class (still applied alongside dash-link — see
+     DashboardOverview.tsx) draws a bordered, uppercase, fixed-210px button; dash-link on its own
+     only ever added color/font on top of that, so the "To Overview" link still rendered as the
+     old boxy button underneath. Reset every legacy box property so it reads as a plain md3 text
+     link. */
+  width: auto;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  text-align: left;
+  text-transform: none;
 }
 .md3 .dash-link:hover {
   text-decoration: underline;
+  background: transparent;
 }
 .md3 .dash-link--primary {
   background: var(--md-primary);
@@ -9378,27 +9619,82 @@ color: #005CFF;
   text-decoration: none;
   opacity: 0.92;
 }
+/* DashboardBaseData/CreateCar/DataExport/DataImport render their one trailing link/button as a
+   DIRECT child of the dash-card section (no wrapper) — .dash-card is display:flex;
+   flex-direction:column (from the legacy .section class), so margin-top:auto on it consumes all
+   the column's leftover space and pins it flush to the card's bottom edge, matching cards whose
+   content happens to fill the row exactly. Scoped to a DIRECT child so it does NOT reach
+   DashboardEmployee's two links — those sit inside .linksWrapper (its own already-working
+   margin-top:auto), one level deeper, so this selector never matches them. */
+.md3 .dash-card > .dash-link {
+  margin-top: auto;
+}
+/* the legacy DealerDashboardPage__table/__tableRow classes (still applied alongside dash-table —
+   see DashboardOverview.tsx) render each cell as its own coloured, gapped box (border-spacing:
+   separate + a per-cell background) and split the columns 55/15/15/15/15 (=115%, doesn't even
+   add up) under table-layout:fixed — that's the mismatched-column / disjointed-boxes look
+   reported live. Every property that leaked through below is reset here at matching or higher
+   specificity so it can't win regardless of stylesheet load order. */
 .md3 .dash-table {
+  /* legacy .table also sets width:calc(100% + 30px) + margin-left/right:-15px — a full-bleed
+     trick tuned for .section's OLD 15px padding. width:100% above already wins on specificity,
+     but the negative margins were never a competing declaration (nothing here set `margin`), so
+     they kept shifting the whole table 15px left, leaving a lopsided ~15px extra gap on the
+     right — that's the "more to the left" look reported live. */
+  margin: 0;
   width: 100%;
   border-collapse: collapse;
+  table-layout: fixed;
   font-size: 13.5px;
 }
+.md3 .dash-table th,
+.md3 .dash-table td {
+  background: transparent;
+  width: auto;
+  padding: 10px 12px;
+  text-align: center;
+}
 .md3 .dash-table th {
-  text-align: left;
   font: 600 12.5px var(--md-font);
   color: var(--md-on-surface-variant);
-  padding: 6px 8px;
+  padding-top: 6px;
+  padding-bottom: 6px;
   border-bottom: 1px solid var(--md-outline-variant);
+  white-space: nowrap;
 }
 .md3 .dash-table td {
-  padding: 9px 8px;
   border-bottom: 1px solid var(--md-outline-variant);
   color: var(--md-on-surface);
   vertical-align: middle;
 }
+/* :first-child/:last-child match the legacy rules' own specificity tier (class + pseudo-class +
+   element) — a plain .dash-table td here would only TIE the legacy selector and could lose on
+   load order, so `width` is repeated on :first-child rather than left to the shared rule above. */
+.md3 .dash-table th:first-child,
+.md3 .dash-table td:first-child {
+  /* the 3 middle (★/24h/Total) columns stay unset — table-layout:fixed shares whatever's left
+     over (100 - 46 - 10 = 44, ~14.7% each) evenly between them. */
+  width: 46%;
+  text-align: left;
+  padding-left: 0;
+}
+.md3 .dash-table th:last-child,
+.md3 .dash-table td:last-child {
+  width: 10%;
+  text-align: right;
+  padding-right: 0;
+}
 .md3 .dash-table tr:last-child td {
   border-bottom: 0;
 }
+.md3 .dash-table tbody tr:hover td {
+  background: var(--md-sc-low);
+}
+/* StarIcon's <path> has no fill prop (defaults to solid black) — pick up the same muted grey as
+   the rest of the header text instead of a heavy pure-black star. */
+.md3 .dash-table th [class*="tableIcon"] {
+  fill: var(--md-on-surface-variant);
+}
 
 /* ============================================================================
    LEGACY → md3 IN-PLACE BRIDGE  (account / dealer / admin pages)

package/ui/CardCarousel.tsx

@@ -168,7 +168,12 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
             className="cardcar-dots"
             style={{
               position: 'absolute',
-              bottom: 23,
+              // vertically centered against the sibling bottom-left/right pills (.cc-photo-pill /
+              // .cc-activity-pill, both height:30 at bottom:10 → vertical center at 25px from the
+              // card's bottom edge): dots are 7px tall, so bottom:21.5 puts THEIR center at
+              // 21.5 + 3.5 = 25 too. Shared by CarCard (grid) and CarRow (list) alike — both use
+              // the same pill sizing/position, so one value serves both.
+              bottom: 21.5,
               left: -5,
               right: 0,
               display: 'flex',

package/ui/IconButton.tsx

@@ -14,6 +14,19 @@ export interface IconButtonProps {
   active?: boolean;
   size?: number;
   style?: React.CSSProperties;
+  /** native disabled — also suppresses :hover (.icon-btn:hover:not(:disabled), md3.css), so a
+   *  visually-dimmed/at-limit button (e.g. VdpViewer's zoom in/out at ZOOM_MIN/MAX) doesn't
+   *  still show a hover fill implying it's clickable when the action would be a no-op anyway. */
+  disabled?: boolean;
+  /**
+   * Extra class(es) appended after 'icon-btn'/'icon-btn--filled'. Prefer this over `style` for
+   * anything that should still respond to `:hover` — an inline `style` background always beats
+   * a stylesheet rule (the base `.icon-btn:hover` included), so a caller reaching for `style` to
+   * tint the button silently kills its own hover in the process. A class-based tint doesn't:
+   * `.icon-btn:hover` is more specific than a single extra class, so it keeps winning on hover
+   * for free (see VdpViewer.tsx's `.vdp-viewer-light`/`.vdp-viewer-contact` for exactly this).
+   */
+  className?: string;
 }
 
 const IconButton: React.FunctionComponent<IconButtonProps> = ({
@@ -25,12 +38,15 @@ const IconButton: React.FunctionComponent<IconButtonProps> = ({
   active,
   size = 20,
   style,
+  className,
+  disabled,
 }) => (
   <button
-    className={'icon-btn' + (filled ? ' icon-btn--filled' : '')}
+    className={'icon-btn' + (filled ? ' icon-btn--filled' : '') + (className ? ` ${className}` : '')}
     onClick={onClick}
     aria-label={label}
     style={style}
+    disabled={disabled}
   >
     <Icon
       name={name}

package/vdp/FinanceCalculator.tsx

@@ -1009,10 +1009,14 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
             variant="filled"
             size="lg"
             className={secured ? 'fin-cta-secured' : undefined}
-            style={{ width: 216, height: 50, paddingLeft: 0, paddingRight: 9, gap: 18 }}
+            style={{ width: 216, height: 50, paddingLeft: 0, paddingRight: 9, gap: secured ? 3 : 18 }}
             onClick={onSecure}
           >
-            {secured ? <Icon name="shield-check" size={18} /> : <DocCheckIcon size={23} />}
+            {/* size 23 either way — was 18 for the secured (shield-check) state, notably
+                smaller than DocCheckIcon's 23 in the default state despite sharing the exact
+                same 50px button box; nothing about switching to "already secured" should
+                shrink the icon. */}
+            {secured ? <Icon name="shield-check" size={23} /> : <DocCheckIcon size={23} />}
             {secured && secureLabel ? secureLabel : t('autobahn:finance.secureOffer')}
           </Button>
           <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>

package/vdp/VdpModules.tsx

@@ -252,7 +252,7 @@ export const VdpHeaderCondition: React.FunctionComponent<VdpHeaderCardProps> = (
  * splits these 3 pieces across the "before/after finance card" layout — see the page).
  */
 export const VdpHeaderCard: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => (
-  <div className="mcard" style={{ marginTop: 16, padding: '22px 24px 18px' }}>
+  <div className="mcard" style={{ marginTop: 16, padding: '18px 14px 18px' }}>
     <VdpHeaderSummary vehicle={vehicle} t={t} />
     <div style={{ marginTop: 14 }}>
       <VdpHeaderHighlights vehicle={vehicle} t={t} />
@@ -1424,18 +1424,12 @@ 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, monthly, productLabel, t }) => (
+export const VdpStickyBar: React.FunctionComponent<VdpStickyBarProps> = ({ vehicle, image, show, onSecure, 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
@@ -1461,9 +1455,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">{productLabel || t('autobahn:sticky.from')}</span>
+          <span className="md-label-sm">{t('autobahn:sticky.from')}</span>
           <span className="num" style={{ fontWeight: 700, fontSize: 20, color: 'var(--md-primary)', letterSpacing: '-.4px' }}>
-            {monthly ?? vehicle.monthly} €
+            {vehicle.monthly} €
           </span>
           <span className="md-label-sm">{t('autobahn:sticky.perMonth')}</span>
         </div>

package/vdp/VdpViewer.tsx

@@ -761,9 +761,6 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
     return () => window.removeEventListener('resize', measure);
   }, [images.length, layout]);
 
-  // Desktop-only styles, unchanged from the original layout.
-  const iconBtnStyle: React.CSSProperties = { background: 'var(--md-sc-lowest, #fff)', boxShadow: 'var(--md-e1)' };
-  const contactBtnStyle: React.CSSProperties = { background: 'var(--md-primary)', boxShadow: 'var(--md-e1)' };
 
   const overlay = (
     <div className="md3">
@@ -1469,45 +1466,67 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 {i + 1} / {n}
               </span>
               <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                {/* background/shadow now come from vdp-viewer-light/vdp-viewer-contact CSS classes,
+                    not inline `style` (that used to be iconBtnStyle/contactBtnStyle, see their old
+                    definitions above) — an inline style background permanently pins it, blocking
+                    :hover entirely (that's what killed hover on ALL of these, close included, until
+                    close got fixed the same way just above). Zoom's opacity IS still inline — that
+                    part is genuinely per-render dynamic (zoom-limit state), and plain opacity
+                    doesn't fight :hover the way background did. `disabled` at the zoom limit is
+                    new too — was opacity-only before, so the button still showed a hover fill at
+                    ZOOM_MIN/MAX implying it was clickable when zoomOut/zoomIn there is a no-op;
+                    the portrait/landscape zoom buttons further up already use real `disabled` the
+                    same way (:disabled also suppresses :hover, see .icon-btn:hover:not(:disabled)
+                    in md3.css), this desktop pair was just the one place still missing it. */}
                 <IconButton
                   name="minus"
                   label={t('autobahn:viewer.zoomOutLabel')}
                   onClick={zoomOut}
-                  style={{ ...iconBtnStyle, opacity: zoom === ZOOM_MIN ? 0.4 : 1 }}
+                  className="vdp-viewer-light"
+                  style={{ opacity: zoom === ZOOM_MIN ? 0.4 : 1 }}
+                  disabled={zoom === ZOOM_MIN}
                 />
                 <IconButton
                   name="plus"
                   label={t('autobahn:viewer.zoomInLabel')}
                   onClick={zoomIn}
-                  style={{ ...iconBtnStyle, opacity: zoom === ZOOM_MAX ? 0.4 : 1 }}
+                  className="vdp-viewer-light"
+                  style={{ opacity: zoom === ZOOM_MAX ? 0.4 : 1 }}
+                  disabled={zoom === ZOOM_MAX}
                 />
                 {has360 && (
                   // IconButton only takes a lucide `name` — Icon360 is a one-off inlined SVG (see
-                  // its own comment above), so this is IconButton's own markup (.icon-btn + the
-                  // same iconBtnStyle) built by hand instead of a name it can't render.
+                  // its own comment above), so this is IconButton's own markup (.icon-btn +
+                  // vdp-viewer-light) built by hand instead of a name it can't render.
                   <button
                     type="button"
-                    className="icon-btn"
+                    className="icon-btn vdp-viewer-light"
                     aria-label={t('autobahn:viewer.threeSixtyLabel')}
                     onClick={() => on360 && on360()}
-                    style={iconBtnStyle}
                   >
                     <Icon360 color="currentColor" />
                   </button>
                 )}
                 {onEmail && (
-                  <IconButton name="mail" label={t('autobahn:viewer.emailLabel')} onClick={onEmail} style={contactBtnStyle} color="#fff" />
+                  <IconButton name="mail" label={t('autobahn:viewer.emailLabel')} onClick={onEmail} className="vdp-viewer-contact" color="#fff" />
                 )}
                 {onCall && (
                   <IconButton
                     name="phone"
                     label={t('autobahn:viewer.callLabel', { phone })}
                     onClick={onCall}
-                    style={contactBtnStyle}
+                    className="vdp-viewer-contact"
                     color="#fff"
                   />
                 )}
-                <IconButton name="x" filled label={t('autobahn:viewer.closeLabel')} onClick={onClose} />
+                {/* was `filled` (.icon-btn--filled forces a hard 34×34, !important) — every other
+                    button in this row (zoom/360/email/call) sits on the plain .icon-btn 40×40 box,
+                    so `filled` made this one visibly smaller than its neighbors. size=24 (was the
+                    IconButton default, 20) scales the X up with the button so it reads just as
+                    filled inside the now-bigger circle as it did in the old 34px one. Same
+                    vdp-viewer-light CLASS the zoom/360 buttons use (not an inline `style`) so
+                    :hover keeps working — see the className doc comment on IconButton itself. */}
+                <IconButton name="x" size={24} className="vdp-viewer-light" label={t('autobahn:viewer.closeLabel')} onClick={onClose} />
               </div>
             </div>
             <div style={{ flex: 1, position: 'relative', minHeight: 0, background: '#fff', overflow: 'hidden' }}>