@bytebrand/fe-ui-core-autobahn 1.0.76 → 1.0.78

package/cards/CarCard.tsx

@@ -22,6 +22,7 @@ import { CardCarousel, IconButton, SaveChip, Button } from '../ui';
 import {
   SpecLine,
   EcoLine,
+  SeoLine,
   DropChip,
   PercentChip,
   ZeroDownChip,
@@ -207,21 +208,6 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
             t={t}
           />
         </div>
-        {/* Mobile-only row (CardCtaRow itself carries the show-mobile class) — always
-            rendered, with real fallbacks the page can override once it wires its own
-            handlers (e.g. the "Rate anpassen" FinanceDetailsModal sheet). Never hidden. */}
-        <CardCtaRow
-          car={car}
-          mode={mode}
-          onRequestOffer={onRequestOffer || (() => onOpen(car))}
-          onCall={onCall || callDealerSalesPhone}
-          onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
-          t={t}
-        />
-        {/* EcoLine after the CTA row (not before): on mobile — where CardCtaRow actually
-            renders — the Figma card puts the Pkw-EnVKV legal line last, below the buttons.
-            On desktop CardCtaRow is display:none (.show-mobile), so this reorder is a no-op
-            there — EcoLine was already the last visible element on desktop either way. */}
         <EcoLine
           t={t}
           car={car}
@@ -236,6 +222,20 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
             color: '#0e2238',
           }}
         />
+        {/* Mobile-only row (CardCtaRow itself carries the show-mobile class) — always
+            rendered, with real fallbacks the page can override once it wires its own
+            handlers (e.g. the "Rate anpassen" FinanceDetailsModal sheet). Never hidden. */}
+        <CardCtaRow
+          car={car}
+          mode={mode}
+          onRequestOffer={onRequestOffer || (() => onOpen(car))}
+          onCall={onCall || callDealerSalesPhone}
+          onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
+          t={t}
+        />
+        {/* legacy VehicleSmallCard's "SeoText" footer line (full spec + equipment list) —
+            renders nothing when the caller hasn't populated car.seoText. */}
+        <SeoLine car={car} style={{ marginTop: 6 }} />
         {adminAction && (
           <div style={{ marginTop: 8 }}>
             <Button

package/cards/cardParts.tsx

@@ -352,6 +352,35 @@ export const EcoLine: React.FunctionComponent<EcoLineProps> = ({ car, style, t }
   );
 };
 
+export interface SeoLineProps {
+  car: AutobahnCar;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Full spec + equipment footer line (fuel, category, gearbox, colour, condition, drive
+ * type, then every equipment highlight) — the small gray text under the card's CTA row,
+ * same field/format as the legacy VehicleSmallCard's SeoText. Renders nothing without
+ * `car.seoText` (needs-data: only fe-landing currently populates it).
+ */
+export const SeoLine: React.FunctionComponent<SeoLineProps> = ({ car, style }) => {
+  if (!car.seoText) return null;
+  return (
+    <div
+      style={{
+        fontSize: 10,
+        lineHeight: '14px',
+        color: 'var(--md-on-surface-variant)',
+        maxHeight: 42,
+        overflow: 'hidden',
+        ...style,
+      }}
+    >
+      {car.seoText}
+    </div>
+  );
+};
+
 export interface PricePathsProps {
   car: AutobahnCar;
   t: TranslationFunction;
@@ -568,12 +597,17 @@ export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode,
                 column layout exactly — so the click target covers the full area INCLUDING the
                 gap between the two stacked lines, not just their text glyphs (display:contents
                 has no box of its own there, so clicks in that gap fell through to the card link
-                behind it instead of opening the tooltip). */}
+                behind it instead of opening the tooltip). stopPropagation is required here too —
+                the whole card (CarCard.tsx) has its own onClick={() => onOpen(car)} navigation,
+                so without it a click on this block both opened the tooltip AND navigated away. */}
             <span
               style={{ display: 'flex', flexDirection: 'column' }}
               role="button"
               tabIndex={0}
-              onClick={() => setUvpTooltipOpen((v) => !v)}
+              onClick={(e) => {
+                e.stopPropagation();
+                setUvpTooltipOpen((v) => !v);
+              }}
             >
               <span className="pp-eyebrow">
                 {t('autobahn:card.price.uvpRateLabel')}

package/cards/index.ts

@@ -18,6 +18,7 @@ export {
   PriceBlock,
   DropChip,
   EcoLine,
+  SeoLine,
   PricePaths,
   PriceKauf,
   PriceMeter,
@@ -40,6 +41,7 @@ export type {
   PriceBlockProps,
   DropChipProps,
   EcoLineProps,
+  SeoLineProps,
   PricePathsProps,
   PpActivityProps,
   GalleryBadgesProps,

package/cards/types.ts

@@ -92,6 +92,12 @@ export interface AutobahnCar {
   // --- trust / features (always real) ---
   /** equipment highlight chips (first few are shown on the row card). */
   features: string[];
+  /** full comma-joined spec + equipment line (fuel, category, gearbox, color, condition,
+   *  drive type, then every highlight) — the small gray footer line under the card's CTA
+   *  row, same field/format as the legacy VehicleSmallCard's SeoText. Optional: only
+   *  callers that already build this string (fe-landing's transformSearchResultItem)
+   *  populate it; others simply don't render the line. */
+  seoText?: string;
   /** price rating tone: 'fair' → warn pill, anything else → good pill. */
   rating: string;
   /** price rating label shown in the pill, e.g. 'Guter Preis'. */

package/constants.ts

@@ -1,31 +1,31 @@
-// Autobahn (auto.de redesign) — shared lookup constants barrel.
-// Pure data re-exported from ./constants/autobahn (kept import-safe for plain Node consumers,
-// see that file's header) plus the legacy fe-ui-core shim re-exports below.
-export * from './constants/autobahn';
-
-// ---------------------------------------------------------------------------
-// Legacy shared constants (moved here from fe-ui-core).
-//
-// This block mirrors the public symbol set of the old
-// `@bytebrand/fe-ui-core/constants` barrel so consumers can swap that
-// specifier for `@bytebrand/fe-ui-core-autobahn/constants` 1:1. The
-// implementations live under ./constants/ (core.ts, app.ts, price.ts,
-// Search.ts, …); fe-ui-core re-exports them via shims until it is deleted.
-// ---------------------------------------------------------------------------
-
-export {
-  offers,
-  checkoutOffers,
-  checkoutWarranties,
-  checkoutSteps,
-  checkoutSubStep,
-  DELIVERY_PERIODS_EXTRA,
-  THREE,
-  WLTP_ENERGY_EFFICIENCY_CLASS
-} from './constants/core';
-
-export { CUSTOM_ERROR_MESSAGES, supportPhone, supportPhoneLink } from './constants/app';
-
-export { priceRatings } from './constants/price';
-
-export { THROTTLE_DELAY } from './constants/Search';
+// Autobahn (auto.de redesign) — shared lookup constants barrel.
+// Pure data re-exported from ./constants/autobahn (kept import-safe for plain Node consumers,
+// see that file's header) plus the legacy fe-ui-core shim re-exports below.
+export * from './constants/autobahn';
+
+// ---------------------------------------------------------------------------
+// Legacy shared constants (moved here from fe-ui-core).
+//
+// This block mirrors the public symbol set of the old
+// `@bytebrand/fe-ui-core/constants` barrel so consumers can swap that
+// specifier for `@bytebrand/fe-ui-core-autobahn/constants` 1:1. The
+// implementations live under ./constants/ (core.ts, app.ts, price.ts,
+// Search.ts, …); fe-ui-core re-exports them via shims until it is deleted.
+// ---------------------------------------------------------------------------
+
+export {
+  offers,
+  checkoutOffers,
+  checkoutWarranties,
+  checkoutSteps,
+  checkoutSubStep,
+  DELIVERY_PERIODS_EXTRA,
+  THREE,
+  WLTP_ENERGY_EFFICIENCY_CLASS
+} from './constants/core';
+
+export { CUSTOM_ERROR_MESSAGES, supportPhone, supportPhoneLink } from './constants/app';
+
+export { priceRatings } from './constants/price';
+
+export { THROTTLE_DELAY } from './constants/Search';

package/data/toAutobahnCar.ts

@@ -476,6 +476,10 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
     ratingLabel,
 
     // optional (only when real)
+    // full spec+equipment footer line — pass through as-is when the caller already built it
+    // (fe-landing's transformSearchResultItem); no fallback assembly here, since the exact
+    // seoFields/highlights order is caller-specific (see AutobahnCar.seoText's own comment).
+    ...(typeof (storeCar as any).seoText === 'string' && (storeCar as any).seoText ? { seoText: (storeCar as any).seoText } : {}),
     ...(listPrice != null ? { listPrice } : {}),
     ...(savings != null ? { savings } : {}),
     ...(oldMonthly != null && oldMonthly > monthly ? { oldMonthly } : {}),

package/locales/de/autobahn.json

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

package/locales/en/autobahn.json

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

package/package.json

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

package/theme/md3.css

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