@bytebrand/fe-ui-core-autobahn 1.0.80 → 1.0.81

package/cards/CarCard.tsx

@@ -142,8 +142,8 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
             }}
           >
             <div style={{ display: 'flex', flexWrap: 'nowrap', gap: 5, alignItems: 'center' }}>
-              {car.isNew && <span className="neu-badge">NEU</span>}
               {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
+              <PercentChip pct={car.dropPct} />
               <ZeroDownChip
                 t={t}
                 show={car.zeroDown}
@@ -162,7 +162,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
                   color: '#005CFF',
                 }}
               />
-              <PercentChip pct={car.dropPct} />
+              {car.isNew && <span className="neu-badge">NEU</span>}
             </div>
             <OfferBadge show={showOfferBadge} t={t} />
           </div>
@@ -208,11 +208,23 @@ 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
           t={t}
           car={car}
           style={{
             marginTop: 'auto',
+            borderTop: 'none',
             fontFamily: 'Arial, Helvetica, sans-serif',
             fontStyle: 'normal',
             fontWeight: 400,
@@ -222,17 +234,6 @@ 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 }} />

package/cards/cardParts.tsx

@@ -444,10 +444,9 @@ export const PriceEvalCol: React.FunctionComponent<{ car: AutobahnCar; t: Transl
     ? Math.max(4, Math.min(96, ((car.price - car.marketLow!) / (car.marketHigh! - car.marketLow!)) * 100))
     : undefined;
   const isGood = TIER_KEYS[tier] === 'good';
-  // both green tiers ('top' and 'good') collapse onto one "Top-Preis" claim (Figma "similar
-  // cars" card) — same convention the VDP FinanceCalculator now also uses for its own pill.
-  // footnote 4 carries the disclaimer text, same convention as the hero price's 1/2/3 markers.
-  const tierLabel = isGood ? t('autobahn:tier.top') : t('autobahn:tier.' + car.rating);
+  // each tier shows its own real label now (Top/Guter/Fairer/Erhöht/Hoher Preis) — no more
+  // collapsing 'good' onto the "Top-Preis" claim. Pill styling (colour/class/footnote) unchanged.
+  const tierLabel = t('autobahn:tier.' + car.rating);
   // 'good' collapses onto the 'top' tier's own color too (#168a45), matching the fixed
   // "Top-Preis" text above rather than tier 1's lighter TIER_COLORS[1] green.
   const pillColor = isGood ? TIER_COLORS[0] : TIER_COLORS[tier];
@@ -777,7 +776,10 @@ export interface CardCtaRowProps {
  * keeps its text label — only the phone button is icon-only, matching the mockup.
  */
 export const CardCtaRow: React.FunctionComponent<CardCtaRowProps> = ({ car, mode, onRequestOffer, onCall, onOpenRateAdjust, t }) => (
-  <div className="card-cta-row show-mobile" style={{ display: 'flex', gap: 8 }}>
+  <div
+    className="card-cta-row show-mobile"
+    style={{ display: 'flex', gap: 8, borderTop: '1px solid var(--md-outline-variant)', paddingTop: 8 }}
+  >
     <Button
       variant="filled"
       style={{ flex: 2 }}

package/compat/CookieModal/modals/ManageCookieModal/ManageCookieModal.tsx

@@ -42,9 +42,11 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
   );
 
   const onHandleAnalyticsSwitchValue = (value: boolean) => {
+    // per-item state is stored inverted (false = this item is on — see isChecked below),
+    // so turning the master ON (value=true) must store false on every item, not true.
     const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
     .reduce((acc, val) => acc.concat(val), [])
-    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
+    .reduce((acc, item) => ({ ...acc, [item]: !value }), {});
 
     setAnalyticsSwitches(newAnalyticsSwitches);
     setAnalyticsMasterSwitch(value);
@@ -53,7 +55,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
   const onHandleMarketingSwitchValue = (value: boolean) => {
     const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
     .reduce((acc, val) => acc.concat(val), [])
-    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
+    .reduce((acc, item) => ({ ...acc, [item]: !value }), {});
     setMarketingSwitches(newMarketingSwitches);
     setMarketingMasterSwitch(value);
   };
@@ -87,7 +89,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
   const onHandleChangeInnerSwitchAnalytics = (cookiesFromCategory: any, isChecked: boolean) => {
     const updatedSwitches = { ...analyticsSwitches };
     for (const item of cookiesFromCategory) {
-      updatedSwitches[item] = !isChecked
+      updatedSwitches[item] = isChecked
     }
     setAnalyticsSwitches(updatedSwitches);
   };
@@ -95,7 +97,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
   const onHandleChangeInnerSwitchMarketing = (cookiesFromCategory: any, isChecked: boolean) => {
     const updatedSwitches = { ...marketingSwitches };
     for (const item of cookiesFromCategory) {
-      updatedSwitches[item] = !isChecked
+      updatedSwitches[item] = isChecked
     }
     setMarketingSwitches(updatedSwitches);
   };
@@ -141,7 +143,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
                 <a className={styles.switchBlockLink} href={getLinkFromCategory} target='_blank'>Datenschutzbestimmungen</a>
                 <MaterialSwitch
                   sx={{ marginLeft: 'auto' }}
-                  value={analytcisMasterSwitch}
+                  value={isChecked}
                   onChange={() => onHandleChangeInnerSwitchAnalytics(getItemsFromCategory, isChecked)}
                 />
               </div>
@@ -165,7 +167,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
                 <a className={styles.switchBlockLink} href={getLinkFromCategory} target='_blank'>Datenschutzbestimmungen</a>
                 <MaterialSwitch
                   sx={{ marginLeft: 'auto' }}
-                  value={marketingMasterSwitch}
+                  value={isChecked}
                   onChange={() => onHandleChangeInnerSwitchMarketing(getItemsFromCategory, isChecked)}
                 />
               </div>

package/compat/MdField/MdField.tsx

@@ -28,18 +28,31 @@ export interface MdFieldProps {
   label?: string;
   placeholder?: string;
   maxLength?: number;
+  /** opt-in Material floating label: label rests inside the field like a placeholder
+   *  when empty and unfocused, then floats up to the normal small-label spot on focus
+   *  or once a value is typed. Defaults to false — the static above-field label. */
+  floatingLabel?: boolean;
   onChange: (value: string, name?: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 }
 
 const MdField: React.FunctionComponent<MdFieldProps> = ({
   className, error, sx, required, disabled, multiline, autoComplete,
-  value, type, name, rows, label, placeholder, maxLength, onChange
+  value, type, name, rows, label, placeholder, floatingLabel, maxLength, onChange
 }) => {
   const [reveal, setReveal] = React.useState(false);
+  const [focused, setFocused] = React.useState(false);
   const isPassword = type === 'password';
   const inputType = isPassword && reveal ? 'text' : (type || 'text');
   const hasError = !!error;
   const generatedId = React.useId();
+  // floating label (Material pattern): while empty and unfocused, the label text is
+  // shown as the input's own native placeholder (styled via .mfield--floating
+  // input::placeholder) and the <label> itself is not rendered at all; once focused or
+  // a value is typed, the real <label> appears in its normal static spot above the
+  // field and the native placeholder goes quiet — the two never show at the same time.
+  const hasValue = value != null && value !== '';
+  const resting = !!floatingLabel && !focused && !hasValue;
+  const effectivePlaceholder = floatingLabel ? (resting ? (label || placeholder || '') : '') : (placeholder || '');
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     onChange(event.currentTarget.value, event.currentTarget.name || name, event);
@@ -47,22 +60,31 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
 
   return (
     <div className={classnames('mfield-group', className)} style={sx as React.CSSProperties}>
-      {label ? (
+      {label && !resting ? (
         <label className='md-label-sm mfield-label' htmlFor={generatedId}>
           {label}{required ? ' *' : ''}
         </label>
       ) : null}
-      <div className={'mfield' + (hasError ? ' mfield--error' : '') + (disabled ? ' mfield--disabled' : '')}>
+      <div
+        className={
+          'mfield'
+          + (hasError ? ' mfield--error' : '')
+          + (disabled ? ' mfield--disabled' : '')
+          + (floatingLabel ? ' mfield--floating' : '')
+        }
+      >
         {multiline ? (
           <textarea
             id={generatedId}
             name={name}
             value={value == null ? '' : value}
             onChange={handleChange}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
             disabled={disabled}
             rows={rows || 3}
             maxLength={maxLength}
-            placeholder={placeholder || ''}
+            placeholder={effectivePlaceholder}
             autoComplete={autoComplete}
             style={{ width: '100%', resize: 'vertical' }}
           />
@@ -73,9 +95,11 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
             type={inputType}
             value={value == null ? '' : value}
             onChange={handleChange}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
             disabled={disabled}
             maxLength={maxLength}
-            placeholder={placeholder || ''}
+            placeholder={effectivePlaceholder}
             autoComplete={autoComplete}
             style={{ width: '100%' }}
           />

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/locales/de/autobahn.json

@@ -93,6 +93,7 @@
     "availabilityLabel": "Verfügbarkeit",
     "availabilityValue": "Sofort",
     "downPaymentSliderLabel": "Anzahlung",
+    "downPaymentSliderLabelSheet": "Sonderzahlung",
     "annualMileageLabel": "Laufleistung / Jahr",
     "purchasePrice": "Kaufpreis",
     "perMonth": "/mtl.",
@@ -105,7 +106,10 @@
     "addServicesToggle": "Rundum-Sorglos-Paket",
     "addServicesPerMonth": "+{{value}} € / Monat",
     "addServicesOnce": "+{{value}} €",
-    "addServicesIncluded": "inklusive"
+    "addServicesIncluded": "inklusive",
+    "addServicesTooltipIntro": "Das Rundum-Sorglos-Paket ist Bestandteil des Angebots und im Kaufpreis enthalten.",
+    "addServicesTooltipHeading": "Im Rundum-Sorglos-Paket enthalten:",
+    "addServicesTooltipItems": "kompletter Zulassungsservice inklusive Wunschkennzeichen, soweit verfügbar\nsorgfältige Prüfung und Vorbereitung aller Zulassungsunterlagen\nbundesweite Fahrzeugauslieferung bis vor Ihre Haustür\npersönliche Fahrzeugübergabe\nhochwertige Fahrzeugaufbereitung innen und außen\nausführlicher technischer Übergabecheck\nHU und Inspektion, falls erforderlich\nTank- beziehungsweise Ladegrundfüllung bei Übergabe\npersönlicher Ansprechpartner von Beginn an"
   },
   "specTable": {
     "title": "Fahrzeugdaten",
@@ -691,7 +695,7 @@
     "vehiclePrice": "Fahrzeugpreis ggf. inkl. MwSt.",
     "leasingAmount": "Leasingbetrag",
     "netLoanAmount": "Nettodarlehensbetrag",
-    "downPayment": "Anzahlung",
+    "downPayment": "Sonderzahlung",
     "annualMileage": "Laufleistung / Jahr",
     "term": "Vertragslaufzeit",
     "months": "{{months}} Monat",

package/locales/en/autobahn.json

@@ -93,6 +93,7 @@
     "availabilityLabel": "Availability",
     "availabilityValue": "Immediately",
     "downPaymentSliderLabel": "Down payment",
+    "downPaymentSliderLabelSheet": "Special payment",
     "annualMileageLabel": "Mileage / year",
     "purchasePrice": "Purchase price",
     "perMonth": "/mo.",
@@ -105,7 +106,10 @@
     "addServicesToggle": "All-round care package",
     "addServicesPerMonth": "+€{{value}} / month",
     "addServicesOnce": "+€{{value}}",
-    "addServicesIncluded": "included"
+    "addServicesIncluded": "included",
+    "addServicesTooltipIntro": "The all-round care package is part of the offer and included in the purchase price.",
+    "addServicesTooltipHeading": "Included in the all-round care package:",
+    "addServicesTooltipItems": "complete registration service including a custom license plate, where available\ncareful review and preparation of all registration documents\nnationwide vehicle delivery to your doorstep\npersonal vehicle handover\nhigh-quality interior and exterior vehicle detailing\ndetailed technical handover check\nroadworthiness test (HU) and inspection, if required\nfuel or charge top-up at handover\npersonal point of contact from day one"
   },
   "specTable": {
     "title": "Vehicle data",
@@ -691,7 +695,7 @@
     "vehiclePrice": "Vehicle price (incl. VAT, if applicable)",
     "leasingAmount": "Leasing amount",
     "netLoanAmount": "Net loan amount",
-    "downPayment": "Down payment",
+    "downPayment": "Special payment",
     "annualMileage": "Mileage / year",
     "term": "Contract term",
     "months": "{{months}} month",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.80",
+  "version": "1.0.81",
   "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

@@ -233,6 +233,16 @@ line-height: 31px;
   box-shadow: var(--md-e2);
   background: var(--autode-blau-strong);
 }
+/* "already requested/checked out" state (legacy compat offerButtonSuccess parity) — the
+   primary VDP CTA turns green with a "continue" label instead of the default "Angebot
+   anfragen"/"Angebot sichern" once the customer already has a request/checkout in progress. */
+.md3 .fin-cta-secured {
+  background: var(--md-good) !important;
+}
+.md3 .fin-cta-secured:hover {
+  background: var(--md-good) !important;
+  filter: brightness(0.92);
+}
 .md3 .mbtn--tonal {
   background: var(--md-primary-container);
   color: var(--md-on-primary-container);
@@ -637,6 +647,19 @@ line-height: 31px;
   color: var(--md-on-surface-variant);
   font-weight: 600;
 }
+/* MdField floatingLabel=true only: while the field is empty and unfocused, the <label>
+   isn't rendered at all — the label text shows as the input's own native placeholder
+   instead, styled to match the Figma "resting" state. Firefox dims ::placeholder by
+   default (opacity ~0.54), so opacity:1 is needed to get the real #5b6b7f. */
+.md3 .mfield--floating input::placeholder,
+.md3 .mfield--floating textarea::placeholder {
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 14px;
+  color: #9aa5b4;
+  opacity: 1;
+}
 .md3 .mfield--error {
   box-shadow: inset 0 0 0 2px var(--md-error);
 }
@@ -4813,6 +4836,10 @@ line-height: 31px;
       right: -100px;
     }
   }
+  /* Leasing tab's "3" badge tooltip needs its own offset — Finanzierung keeps -135px/-95px above. */
+  .md3 .fin-calc-card .pp-uvp-tooltip--leasing {
+    right: -110px;
+  }
   /* 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,
@@ -5199,6 +5226,22 @@ line-height: 31px;
   width: 112px;
   justify-self: end;
 }
+/* .fin-modal doesn't render .fin-cond at all, so it never needed the base "rate pill"/"cond bar"
+   2-row split — that's what was leaving the pill vertically centered in a tall empty row above
+   the bar (the "big gap"). One row, same evalcol grouping as .fin-calc-card above. */
+.md3 .fin-modal .fin-price-grid {
+  grid-template-columns: minmax(0, 1fr) 112px;
+  grid-template-areas: "rate evalcol";
+  column-gap: 15px;
+}
+.md3 .fin-modal .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 {
@@ -5342,6 +5385,29 @@ line-height: 31px;
   transform: rotate(12.53deg);
   transform-origin: center;
 }
+/* .fin-modal's own UVP-Rate old price — same diagonal-strike treatment as .fin-calc-card
+   above, just scoped to the modal (was still using the shared 15px/700/error/line-through
+   .fin-rate-old base, never got the desktop-card override). */
+.md3 .fin-modal .fin-rate-old.fin-rate-example-price {
+  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-modal .fin-rate-old.fin-rate-example-price::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 {
@@ -6378,7 +6444,7 @@ line-height: 31px;
     display: none;
   }
   .md3 .srp-main {
-    padding: 12px 16px 64px !important;
+    padding: 14px 10px 48px !important;
   }
   .md3 .srp-sort {
     width: 146px;
@@ -6628,7 +6694,13 @@ line-height: 31px;
   }
   /* compact hero so the search card + button surface above the fold */
   .md3 .hero-inner {
-    padding: 16px 16px 18px !important;
+    padding: 16px 12px 18px !important;
+  }
+  /* every NewMainPage section reuses .container with its own inline top/bottom padding
+     (24px sides, hardcoded per-section) — only the shared side gutter narrows on mobile. */
+  .md3 .container {
+    padding-left: 12px !important;
+    padding-right: 12px !important;
   }
   .md3 .hero-badge {
     margin-bottom: 10px !important;
@@ -6898,11 +6970,12 @@ line-height: 31px;
    (14px) than the 14/24px desktop default set inline. */
 @media (max-width: 600px) {
   .md3 .vdp-main {
-    padding: 0 14px 48px !important;
+    padding: 0 10px 48px !important;
   }
   .md3 .vdp-push-badges {
     gap: 6px;
     margin-bottom: 13px;
+    padding-left: 12px;
   }
 }
 
@@ -7088,6 +7161,88 @@ color: #005CFF;
   text-align: right;
   color: #1D2A38 !important;
 }
+/* Rundum-Sorglos-Paket info popover (ToggleRow's `tooltip` prop) — same pp-uvp-tooltip look as
+   the UVP-Rate footnote (grey card, shadow, floating dark close circle), inherited via that
+   shared class; these rules only override its POSITION, since that one is tuned for a fixed
+   281px card anchored beside the price hero, while this one hangs off a full-width row that can
+   sit anywhere in the sheet. left:0/right:0 pins its width to the row itself (always the full
+   sheet/modal/card width already) so it can never overflow horizontally; opens UPWARD (bottom:
+   100%) since the row tends to sit near the bottom of the sheet, where dropping down would get
+   clipped by the viewport; max-height + its own scroll is the vertical safety net for the same
+   reason (long bullet list vs. a short one-line footnote).
+   Selectors repeat the base rule's .fin-calc-card/.fin-modal ancestor scoping ON PURPOSE — both
+   target .pp-uvp-tooltip at 3 class-selectors deep, so a plain ".fin-toggle-tooltip" (2 deep)
+   loses specificity and only some properties would win, leaving top/bottom (and others) mixed
+   from both rules instead of cleanly overridden. */
+.md3 .fin-calc-card .fin-toggle-tooltip,
+.md3 .fin-modal .fin-toggle-tooltip {
+  position: absolute;
+  top: auto;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  width: auto;
+  z-index: 20;
+  margin-bottom: 10px;
+  max-height: 260px;
+  cursor: default;
+}
+.md3 .fin-modal .fin-toggle-addservices--cash .fin-toggle-tooltip {
+  top: auto;
+  bottom: auto;
+}
+.md3 .fin-calc-card .fin-toggle-tooltip-close,
+.md3 .fin-modal .fin-toggle-tooltip-close {
+  position: absolute;
+  top: -43px;
+  right: -8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(11, 19, 32, 0.45);
+  border: 1.5px solid rgba(255, 255, 255, 0.25);
+  padding: 0;
+  cursor: pointer;
+}
+.md3 .fin-toggle-tooltip-body ul {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding-left: 14px;
+}
+/* .fin-calc-card's own cash toggle only (not the mobile sheet's — that one keeps the
+   standalone look above). Drops the standalone-toggle chrome so it reads as one more
+   .calcrow under Zahlung/Verfügbarkeit: same padding, no border, same label/value type. */
+.md3 .fin-calc-card .fin-toggle-addservices.fin-toggle-addservices--cash {
+  padding: 8px 0 !important;
+  border-top: 0;
+  border-bottom: 0;
+  align-items: baseline;
+  gap: 12px;
+}
+.md3 .fin-calc-card .fin-toggle-addservices.fin-toggle-addservices--cash .md-title-sm {
+  font-family: inherit;
+  font-weight: 600;
+  font-size: 11px;
+  line-height: normal;
+  letter-spacing: 0.4px;
+  color: var(--md-on-surface-variant);
+}
+.md3 .fin-calc-card .fin-toggle-addservices.fin-toggle-addservices--cash .md-title-sm .lucide {
+  display: none;
+}
+.md3 .fin-calc-card .fin-toggle-addservices.fin-toggle-addservices--cash .num,
+.md3 .fin-calc-card .fin-toggle-addservices.fin-toggle-addservices--cash > div > span:last-child {
+  font-family: var(--md-font-display) !important;
+  font-weight: 600 !important;
+  font-size: 13.5px !important;
+  line-height: normal !important;
+  color: var(--md-on-surface) !important;
+}
 .md3 .fin-sheet-cta-row {
   border-top: 1px solid var(--fig-tile-border);
   padding-top: 20px;
@@ -8155,7 +8310,7 @@ color: #005CFF;
   /* modal-only: sup sits higher here than on the desktop card's mobile-cash price
      (same shared .fin-rate-cash-mobile), so scope via the modal's --cash modifier */
   .md3 .fin-price-grid--cash .fin-rate-cash-mobile sup {
-    top: -15px;
+    top: 4px;
   }
   /* digit-count sizing (round 15): Kaufen/Barzahlung hero price shrinks as its digit
      count grows — repeats the class for specificity so it wins over the 52px default