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

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

@@ -30,11 +30,11 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
     () => {
       const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
         .reduce((acc, val) => acc.concat(val), [])
-        .reduce((acc, item) => ({ ...acc, [item]: false }), {});
+        .reduce((acc, item) => ({ ...acc, [item]: true }), {});
 
       const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
         .reduce((acc, val) => acc.concat(val), [])
-        .reduce((acc, item) => ({ ...acc, [item]: false }), {});
+        .reduce((acc, item) => ({ ...acc, [item]: true }), {});
       setAnalyticsSwitches(newAnalyticsSwitches);
       setMarketingSwitches(newMarketingSwitches);
     },
@@ -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/MdAccordionGroup/MdAccordionGroup.tsx

@@ -45,7 +45,7 @@ const MdAccordionGroup: React.FC<IMdAccordionGroupProps> = ({ title, tooltipText
         ) : null}
         <Icon name='chevron-down' cls='macc-chev' />
       </div>
-      {open ? <div style={{ padding: '4px 0 12px' }}>{children}</div> : null}
+      {open ? <div style={{ padding: '4px 15px 12px' }}>{children}</div> : null}
     </section>
   );
 };

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,13 @@
     "addServicesToggle": "Rundum-Sorglos-Paket",
     "addServicesPerMonth": "+{{value}} € / Monat",
     "addServicesOnce": "+{{value}} €",
-    "addServicesIncluded": "inklusive"
+    "addServicesIncluded": "inklusive",
+    "addServicesTooltipIntroCash": "Das Rundum-Sorglos-Paket ist Bestandteil des Angebots und im Kaufpreis enthalten.",
+    "addServicesTooltipIntroFinanced": "Das Rundum-Sorglos-Paket ist verpflichtender Bestandteil des Angebots. Die Kosten fallen unabhängig von der gewählten Zahlungsweise an.",
+    "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",
+    "addServicesTooltipOutroFinancing": "Sie können die Paketkosten entweder einmalig in Höhe von 1.499,00 € bezahlen oder in die Fahrzeugfinanzierung einbeziehen lassen. Bei der Mitfinanzierung wird keine zusätzliche Einmalzahlung für das Paket erhoben. Die gewählte Zahlungsweise sowie die daraus resultierende monatliche Finanzierungsrate und der Gesamtbetrag werden in den Finanzierungsdetails ausgewiesen. Die Paketkosten sind in jedem Fall im ausgewiesenen Gesamtbetrag berücksichtigt.",
+    "addServicesTooltipOutroLeasing": "Sie können die Paketkosten entweder einmalig in Höhe von 1.499,00 € bezahlen oder in die monatliche Leasingrate einrechnen lassen. Bei der Rateneinrechnung wird keine zusätzliche Einmalzahlung für das Paket erhoben. Die gewählte Zahlungsweise sowie die daraus resultierende Monatsrate und der Gesamtbetrag werden in den Leasingdetails ausgewiesen. Die Paketkosten sind in jedem Fall im ausgewiesenen Gesamtbetrag berücksichtigt."
   },
   "specTable": {
     "title": "Fahrzeugdaten",
@@ -691,7 +698,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,13 @@
     "addServicesToggle": "All-round care package",
     "addServicesPerMonth": "+€{{value}} / month",
     "addServicesOnce": "+€{{value}}",
-    "addServicesIncluded": "included"
+    "addServicesIncluded": "included",
+    "addServicesTooltipIntroCash": "The all-round care package is part of the offer and included in the purchase price.",
+    "addServicesTooltipIntroFinanced": "The all-round care package is a mandatory part of the offer. Its cost applies regardless of the payment method chosen.",
+    "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",
+    "addServicesTooltipOutroFinancing": "You can either pay the package cost as a one-off amount of €1,499.00, or have it included in the vehicle financing. If included in financing, no separate one-off payment for the package is charged. The payment method you choose, along with the resulting monthly financing rate and total amount, is shown in the financing details. The package cost is included in the total amount shown in either case.",
+    "addServicesTooltipOutroLeasing": "You can either pay the package cost as a one-off amount of €1,499.00, or have it included in the monthly leasing rate. If included in the rate, no separate one-off payment for the package is charged. The payment method you choose, along with the resulting monthly rate and total amount, is shown in the leasing details. The package cost is included in the total amount shown in either case."
   },
   "specTable": {
     "title": "Vehicle data",
@@ -691,7 +698,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.82",
   "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,96 @@ 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;
+  cursor: default;
+}
+.md3 .fin-modal .fin-toggle-addservices--cash .fin-toggle-tooltip {
+  top: auto;
+  bottom: auto;
+}
+.md3 .fin-modal .show-mobile .fin-toggle-tooltip {
+  border-radius: 11px;
+}
+/* desktop (.hide-mobile) row sits close to the top of a short, non-scrolling card — opening
+   upward has nowhere near enough room for the now-long financing/leasing copy (intro + 9
+   bullets + outro). */
+.md3 .fin-modal .hide-mobile .fin-toggle-tooltip {
+  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 +8318,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