@bytebrand/fe-ui-core-autobahn 1.0.14 → 1.0.15

package/locales/de/autobahn.json

@@ -56,7 +56,7 @@
     "termSelection": "Laufzeit",
     "headerTitle": "Dein Angebot",
     "adjustRate": "Rate anpassen",
-    "secureOffer": "Angebot sichern",
+    "secureOffer": "Angebot anfragen",
     "trustLine": "Unverbindlich · kostenlos · 14 Tage Rückgaberecht",
     "downPaymentLabel": "€ Anzahlung",
     "monthsLabel": "{{months}} Monat",
@@ -84,7 +84,16 @@
     "kmPerYear": "{{value}} km/Jahr",
     "perMonth": "/mtl.",
     "leasingDetails": "Leasingdetails",
-    "financingDetails": "Finanzierungsdetails"
+    "financingDetails": "Finanzierungsdetails",
+    "personalConsultation": "Persönliche Beratung",
+    "personalConsultationSub": "Wir sind für Sie da",
+    "financingLeasingPossible": "Finanzierung & Leasing möglich",
+    "requestRate": "Rate anfragen",
+    "callCta": "Anrufen",
+    "finalInstallmentToggle": "Mit Schlussrate",
+    "addServicesToggle": "Rundum-Sorglos-Paket",
+    "addServicesPerMonth": "+{{value}} € / Monat",
+    "addServicesOnce": "+{{value}} €"
   },
   "specTable": {
     "title": "Fahrzeugdaten",
@@ -603,7 +612,10 @@
     "totalAmount": "Gesamtbetrag",
     "totalRepayment": "Gesamtrückzahlungsbetrag",
     "legalLeasing": "Unverbindliches Leasingbeispiel (Kilometerleasing). Bonität vorausgesetzt. Dieses freibleibende Angebot wird vermittelt durch die auto.de GmbH, Max-Planck-Str. 19, 06796 Sandersdorf-Brehna, die als ungebundener Vermittler nicht beratend tätig ist. Irrtümer vorbehalten. Preise ggf. inkl. MwSt.",
-    "legalFinancing": "Repräsentatives Berechnungsbeispiel gem. § 17a Abs. 4 PAngV, das 2/3 aller Kunden — Bonität vorausgesetzt — erhalten. Für Ihre Finanzierungswünsche stellen wir eine Bonitätsanfrage. Dieses freibleibende Angebot der Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach, wird vermittelt durch die auto.de GmbH, Max-Planck-Str. 19, 06796 Sandersdorf-Brehna, die als ungebundener Vermittler nicht beratend tätig ist. Irrtümer vorbehalten. Preise ggf. inkl. MwSt."
+    "legalFinancing": "Repräsentatives Berechnungsbeispiel gem. § 17a Abs. 4 PAngV, das 2/3 aller Kunden — Bonität vorausgesetzt — erhalten. Für Ihre Finanzierungswünsche stellen wir eine Bonitätsanfrage. Dieses freibleibende Angebot der Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach, wird vermittelt durch die auto.de GmbH, Max-Planck-Str. 19, 06796 Sandersdorf-Brehna, die als ungebundener Vermittler nicht beratend tätig ist. Irrtümer vorbehalten. Preise ggf. inkl. MwSt.",
+    "sheetTitleFinancing": "Kredit-Rate anpassen",
+    "sheetTitleLeasing": "Leasing-Rate anpassen",
+    "sheetTitleCash": "Kaufen - Details"
   },
   "ratings": {
     "showLess": "Weniger anzeigen",

package/locales/en/autobahn.json

@@ -56,7 +56,7 @@
     "termSelection": "Term",
     "headerTitle": "Your offer",
     "adjustRate": "Adjust rate",
-    "secureOffer": "Secure offer",
+    "secureOffer": "Request offer",
     "trustLine": "Non-binding · free · 14-day return right",
     "downPaymentLabel": "€ down payment",
     "monthsLabel": "{{months}} month",
@@ -84,7 +84,16 @@
     "kmPerYear": "{{value}} km/year",
     "perMonth": "/mo.",
     "leasingDetails": "Leasing details",
-    "financingDetails": "Financing details"
+    "financingDetails": "Financing details",
+    "personalConsultation": "Personal advice",
+    "personalConsultationSub": "We're here for you",
+    "financingLeasingPossible": "Financing & leasing available",
+    "requestRate": "Request rate",
+    "callCta": "Call",
+    "finalInstallmentToggle": "With final installment",
+    "addServicesToggle": "All-round care package",
+    "addServicesPerMonth": "+€{{value}} / month",
+    "addServicesOnce": "+€{{value}}"
   },
   "specTable": {
     "title": "Vehicle data",
@@ -603,7 +612,10 @@
     "totalAmount": "Total amount",
     "totalRepayment": "Total repayment amount",
     "legalLeasing": "Non-binding leasing example (mileage leasing). Subject to creditworthiness. This non-binding offer is brokered by auto.de GmbH, Max-Planck-Str. 19, 06796 Sandersdorf-Brehna, which acts as a non-tied intermediary and does not provide advice. Errors excepted. Prices incl. VAT where applicable.",
-    "legalFinancing": "Representative calculation example pursuant to § 17a (4) PAngV, obtained by 2/3 of all customers — subject to creditworthiness. For your financing requests we will submit a credit inquiry. This non-binding offer from Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach, is brokered by auto.de GmbH, Max-Planck-Str. 19, 06796 Sandersdorf-Brehna, which acts as a non-tied intermediary and does not provide advice. Errors excepted. Prices incl. VAT where applicable."
+    "legalFinancing": "Representative calculation example pursuant to § 17a (4) PAngV, obtained by 2/3 of all customers — subject to creditworthiness. For your financing requests we will submit a credit inquiry. This non-binding offer from Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach, is brokered by auto.de GmbH, Max-Planck-Str. 19, 06796 Sandersdorf-Brehna, which acts as a non-tied intermediary and does not provide advice. Errors excepted. Prices incl. VAT where applicable.",
+    "sheetTitleFinancing": "Adjust credit rate",
+    "sheetTitleLeasing": "Adjust leasing rate",
+    "sheetTitleCash": "Purchase - Details"
   },
   "ratings": {
     "showLess": "Show less",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "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/vdp/FinanceCalculator.tsx

@@ -158,8 +158,11 @@ export interface FinanceCalculatorProps {
   onSecure?: () => void;
   /** secondary CTA click (phone). */
   onCall?: () => void;
-  /** open the Finanzierungs-/Leasingdetails popup (full breakdown + legal). Omit to hide the link. */
+  /** open the Finanzierungs-/Leasingdetails popup (full breakdown + legal, expanded). Omit to hide the link. */
   onShowDetails?: () => void;
+  /** mobile only: open the "Rate anpassen" / "Details anzeigen" sheet (collapsed/default view).
+   *  Omit to hide the trigger row (falls back to the desktop inline expander). */
+  onOpenAdjust?: () => void;
   /** mode segment changed. */
   onModeChange: (mode: FinanceMode) => void;
   /** down-payment slider changed. */
@@ -204,7 +207,7 @@ const DetailsLink: React.FunctionComponent<{ label: string; onClick: () => void
 );
 
 /** "Rate anpassen" / "Details anzeigen" expander toggle button. */
-const expanderBtnStyle: React.CSSProperties = {
+export const expanderBtnStyle: React.CSSProperties = {
   width: '100%',
   background: 'none',
   border: 0,
@@ -243,6 +246,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
   onSecure,
   onCall,
   onShowDetails,
+  onOpenAdjust,
   onModeChange,
   onDownChange,
   onTermChange,
@@ -364,100 +368,157 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
         </div>
       </div>
 
-      {/* RATE EDIT (Rate anpassen) — between the rate and the request CTA */}
-      <div className="fin-adjust">
-        <button onClick={() => setAdjust((a) => !a)} style={expanderBtnStyle}>
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
-            <Icon name={isCash ? 'list' : 'sliders-horizontal'} size={16} color="var(--md-primary)" />
-            {isCash ? t('autobahn:finance.detailsShow') : t('autobahn:finance.adjustRate')}
-          </span>
-          <Icon name={adjust ? 'chevron-up' : 'chevron-down'} size={18} color="var(--md-primary)" />
-        </button>
-        {adjust &&
-          (isCash ? (
-            <div style={{ marginTop: 4 }}>
-              <CalcRow label={t('autobahn:finance.paymentLabel')}>{t('autobahn:finance.paymentValue')}</CalcRow>
-              <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
-              <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
-                {t('autobahn:finance.deliveryValue')}
-              </CalcRow>
-            </div>
-          ) : (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 8 }}>
-              <div>
-                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
-                  <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
-                  <span className="num" style={{ fontWeight: 700 }}>
-                    {eur(down)} €
-                  </span>
-                </div>
-                <Slider
-                  min={downMin}
-                  max={downMax}
-                  step={downStep}
-                  value={down}
-                  onChange={onDownChange}
-                  fmt={(v) => `${eur(Number(v))} €`}
-                />
+      {/* ============================== DESKTOP (≥601px) — unchanged ============================== */}
+      <div className="hide-mobile">
+        {/* RATE EDIT (Rate anpassen) — between the rate and the request CTA */}
+        <div className="fin-adjust">
+          <button onClick={() => setAdjust((a) => !a)} style={expanderBtnStyle}>
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
+              <Icon name={isCash ? 'list' : 'sliders-horizontal'} size={16} color="var(--md-primary)" />
+              {isCash ? t('autobahn:finance.detailsShow') : t('autobahn:finance.adjustRate')}
+            </span>
+            <Icon name={adjust ? 'chevron-up' : 'chevron-down'} size={18} color="var(--md-primary)" />
+          </button>
+          {adjust &&
+            (isCash ? (
+              <div style={{ marginTop: 4 }}>
+                <CalcRow label={t('autobahn:finance.paymentLabel')}>{t('autobahn:finance.paymentValue')}</CalcRow>
+                <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
+                <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
+                  {t('autobahn:finance.deliveryValue')}
+                </CalcRow>
               </div>
-              {annualMileage != null && onAnnualMileageChange && (
+            ) : (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 8 }}>
                 <div>
                   <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
-                    <span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
+                    <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
                     <span className="num" style={{ fontWeight: 700 }}>
-                      {eur(annualMileage)} km
+                      {eur(down)} €
                     </span>
                   </div>
                   <Slider
-                    min={annualMileageMin}
-                    max={annualMileageMax}
-                    step={annualMileageStep}
-                    value={annualMileage}
-                    onChange={onAnnualMileageChange}
-                    fmt={(v) => `${eur(Number(v))} km`}
+                    min={downMin}
+                    max={downMax}
+                    step={downStep}
+                    value={down}
+                    onChange={onDownChange}
+                    fmt={(v) => `${eur(Number(v))} €`}
                   />
                 </div>
-              )}
-              <div>
-                <div className="md-title-sm" style={{ marginBottom: 8 }}>
-                  {t('autobahn:finance.termSelection')}
+                {annualMileage != null && onAnnualMileageChange && (
+                  <div>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                      <span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
+                      <span className="num" style={{ fontWeight: 700 }}>
+                        {eur(annualMileage)} km
+                      </span>
+                    </div>
+                    <Slider
+                      min={annualMileageMin}
+                      max={annualMileageMax}
+                      step={annualMileageStep}
+                      value={annualMileage}
+                      onChange={onAnnualMileageChange}
+                      fmt={(v) => `${eur(Number(v))} km`}
+                    />
+                  </div>
+                )}
+                <div>
+                  <div className="md-title-sm" style={{ marginBottom: 8 }}>
+                    {t('autobahn:finance.termSelection')}
+                  </div>
+                  <TermChips options={terms} value={term} onChange={onTermChange} t={t} />
+                </div>
+                <div>
+                  <CalcRow label={t('autobahn:finance.purchasePrice')}>{eur(price)} €</CalcRow>
+                  <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
+                  <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
+                    {t('autobahn:finance.deliveryValue')}
+                  </CalcRow>
                 </div>
-                <TermChips options={terms} value={term} onChange={onTermChange} t={t} />
-              </div>
-              <div>
-                <CalcRow label={t('autobahn:finance.purchasePrice')}>{eur(price)} €</CalcRow>
-                <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
-                <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
-                  {t('autobahn:finance.deliveryValue')}
-                </CalcRow>
               </div>
-            </div>
-          ))}
-      </div>
+            ))}
+        </div>
 
-      {/* REQUEST CTA */}
-      <Button variant="filled" block size="lg" icon="shield-check" style={{ marginTop: 14 }} onClick={onSecure}>
-        {t('autobahn:finance.secureOffer')}
-      </Button>
-      {/* phone CTA — touch only (hidden on desktop via .fin-call) */}
-      <div className="fin-call">
-        <Button variant="outlined" block icon="phone" onClick={onCall}>
-          {phone}
+        {/* REQUEST CTA */}
+        <Button variant="filled" block size="lg" icon="shield-check" style={{ marginTop: 14 }} onClick={onSecure}>
+          {t('autobahn:finance.secureOffer')}
         </Button>
+        {/* phone CTA — touch only (hidden on desktop via .fin-call) */}
+        <div className="fin-call">
+          <Button variant="outlined" block icon="phone" onClick={onCall}>
+            {phone}
+          </Button>
+        </div>
+
+        {/* auto.de-ID in front of the Finanzierungs-/Leasingdetails link — one row, under everything */}
+        {(autoDeId || (!isCash && onShowDetails)) && (
+          <div className="fin-info">
+            {autoDeId && <span className="fin-id">auto.de-ID {autoDeId}</span>}
+            {!isCash && onShowDetails && (
+              <DetailsLink
+                label={mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
+                onClick={onShowDetails}
+              />
+            )}
+          </div>
+        )}
       </div>
 
-      {/* auto.de-ID in front of the Finanzierungs-/Leasingdetails link — one row, under everything */}
-      {(autoDeId || (!isCash && onShowDetails)) && (
+      {/* ============================== MOBILE (≤600px) — new layout ============================== */}
+      <div className="show-mobile" style={{ flexDirection: 'column' }}>
+        {/* side-by-side CTAs */}
+        <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
+          <Button variant="filled" size="lg" icon="shield-check" style={{ flex: 1 }} onClick={onSecure}>
+            {t('autobahn:finance.secureOffer')}
+          </Button>
+          <Button variant="outlined" size="lg" icon="phone" style={{ flex: 1 }} onClick={onCall}>
+            {t('autobahn:finance.callCta')}
+          </Button>
+        </div>
+
+        {/* Persönliche Beratung (left) · Finanzierungs-/Leasingdetails or hint (right) */}
         <div className="fin-info">
-          {autoDeId && <span className="fin-id">auto.de-ID {autoDeId}</span>}
-          {!isCash && onShowDetails && (
-            <DetailsLink
-              label={mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
-              onClick={onShowDetails}
-            />
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+            <Icon name="user" size={18} color="var(--md-on-surface-variant)" style={{ flex: 'none' }} />
+            <div style={{ minWidth: 0 }}>
+              <div className="md-label-sm" style={{ fontWeight: 700, color: 'var(--md-on-surface)' }}>
+                {t('autobahn:finance.personalConsultation')}
+              </div>
+              <div className="md-label-sm">{t('autobahn:finance.personalConsultationSub')}</div>
+            </div>
+          </div>
+          {isCash ? (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--md-on-surface-variant)' }}>
+              <Icon name="info" size={15} />
+              <span className="md-label-sm">{t('autobahn:finance.financingLeasingPossible')}</span>
+            </div>
+          ) : (
+            onShowDetails && (
+              <DetailsLink
+                label={mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
+                onClick={onShowDetails}
+              />
+            )
           )}
         </div>
-      )}
+
+        {/* "Rate anpassen" / "Details anzeigen" — opens the full bottom sheet (not an inline expander) */}
+        {onOpenAdjust && (
+          <button
+            type="button"
+            onClick={onOpenAdjust}
+            style={{ ...expanderBtnStyle, borderTop: '1px solid var(--md-outline-variant)', marginTop: 4, padding: '14px 0 2px' }}
+          >
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
+              <Icon name={isCash ? 'list' : 'sliders-horizontal'} size={16} color="var(--md-primary)" />
+              {isCash ? t('autobahn:finance.detailsShow') : t('autobahn:finance.adjustRate')}
+            </span>
+            <Icon name="chevron-right" size={18} color="var(--md-primary)" />
+          </button>
+        )}
+      </div>
     </div>
   );
 };

package/vdp/VdpModules.tsx

@@ -24,10 +24,10 @@
 import React, { useState } from 'react';
 import { TranslationFunction } from '../types';
 
-import { Button, Icon, Spec, StatChip, Stars } from '../ui';
-import { CO2_CLASSES, CO2_COLORS } from '../constants';
+import { Button, Icon, Spec, StatChip, Stars, Switch } from '../ui';
+import { CO2_CLASSES, CO2_COLORS, TIER_LABELS, TIER_KEYS, TIER_COLORS } from '../constants';
 import { defaultVdpSpecs, EquipmentGroups, VehicleDetail, VdpSpec, VdpReview } from './types';
-import { Slider, TermChips } from './FinanceCalculator';
+import { CalcRow, expanderBtnStyle, FinanceMode, Slider, TermChips } from './FinanceCalculator';
 
 const eur = (n: number): string => n.toLocaleString('de-DE');
 
@@ -934,6 +934,29 @@ export const InspectionBlock: React.FunctionComponent<InspectionBlockProps> = ({
 // Finanzierungs-/Leasingdetails popup (desktop modal / mobile bottom-sheet)
 // ---------------------------------------------------------------------------
 
+/** full-width label(+optional trailing price) / Switch row — Switch itself is inline-flex
+ *  (sized to its own content), so the space-between has to live on this wrapper, not on
+ *  Switch's `label` prop (which renders track-then-label, not a full-width justified row). */
+const ToggleRow: React.FunctionComponent<{
+  label: string;
+  price?: string;
+  checked: boolean;
+  disabled?: boolean;
+  onChange: (checked: boolean) => void;
+}> = ({ label, price, checked, disabled, onChange }) => (
+  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
+    <span className="md-title-sm">{label}</span>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+      {price && (
+        <span className="num" style={{ fontWeight: 700, fontSize: 13.5 }}>
+          {price}
+        </span>
+      )}
+      <Switch checked={checked} disabled={disabled} onChange={(e) => onChange(e.target.checked)} ariaLabel={label} />
+    </div>
+  </div>
+);
+
 export interface FinanceDetailsModalProps {
   /** open flag (controlled by the page). */
   open: boolean;
@@ -971,6 +994,25 @@ export interface FinanceDetailsModalProps {
   onTermChange?: (term: number) => void;
   onAnnualMileageChange?: (km: number) => void;
   onClose: () => void;
+  /** mobile only — start with the Finanzierungs-/Leasingdetails breakdown already expanded
+   *  (opened directly via that link, skipping the "Rate anpassen" collapsed default view). */
+  initialShowBreakdown?: boolean;
+  /** mobile only — price-rating label, drives the eval pill/bar (same as the collapsed card). */
+  ratingLabel?: string;
+  /** mobile only — mode tabs inside the sheet (mirrors the collapsed card's tabs). */
+  onModeChange?: (mode: FinanceMode) => void;
+  /** mobile only — primary "Rate anfragen"/"Angebot anfragen" CTA. */
+  onSecure?: () => void;
+  /** mobile only — secondary call CTA. */
+  onCall?: () => void;
+  /** mobile only — "Mit Schlussrate" toggle (financing only; leasing has no balloon concept). */
+  withFinalInstallment?: boolean;
+  onToggleFinalInstallment?: (checked: boolean) => void;
+  /** mobile only — "Rundum-Sorglos-Paket" toggle (all modes; forced-on + disabled for cash). */
+  withAddServices?: boolean;
+  addServicesCost?: number;
+  addServicesDisabled?: boolean;
+  onToggleAddServices?: (checked: boolean) => void;
   /** i18n function (drilled from the page). */
   t: TranslationFunction;
 }
@@ -1008,11 +1050,41 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   onTermChange,
   onAnnualMileageChange,
   onClose,
+  initialShowBreakdown,
+  ratingLabel,
+  onModeChange,
+  onSecure,
+  onCall,
+  withFinalInstallment,
+  onToggleFinalInstallment,
+  withAddServices,
+  addServicesCost,
+  addServicesDisabled,
+  onToggleAddServices,
   t,
 }) => {
+  // mobile-only: the Finanzierungs-/Leasingdetails breakdown starts collapsed (opened via "Rate
+  // anpassen") or expanded (opened directly via the details link) — reset on every open, since
+  // this component stays mounted (the page always renders it, gated by `open`, not unmounted).
+  const [showBreakdown, setShowBreakdown] = React.useState(!!initialShowBreakdown);
+  React.useEffect(() => {
+    if (open) setShowBreakdown(!!initialShowBreakdown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, initialShowBreakdown]);
+
   if (!open) return null;
   const isLease = mode === 'leasing';
+  const isCash = mode === 'cash';
   const title = isLease ? t('autobahn:modal.leasingDetails') : t('autobahn:modal.financingDetails');
+  const mobileTitle = isCash
+    ? t('autobahn:modal.sheetTitleCash')
+    : isLease
+      ? t('autobahn:modal.sheetTitleLeasing')
+      : t('autobahn:modal.sheetTitleFinancing');
+  // price-evaluation tier — identical derivation to the collapsed card (FinanceCalculator).
+  const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
+  const evalTier = tierIdx >= 0 ? tierIdx : 1;
+  const evalTierLabel = t('autobahn:tier.' + TIER_KEYS[evalTier]);
   // adjustable only for fin/leasing, and only when the page supplies the change handlers + bounds.
   const adjustable = mode !== 'cash' && !!onDownChange && downMin != null && downMax != null && termMin != null && termMax != null;
   // discrete term chip values (supplied periods, else derived from the bounds).
@@ -1041,89 +1113,274 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     [isLease ? t('autobahn:modal.leasingRate') : t('autobahn:modal.monthlyRate'), t('autobahn:modal.ratePerMonth', { amount: eur(monthly) })],
     ...(grossAmount != null && grossAmount > 0 ? ([[isLease ? t('autobahn:modal.totalAmount') : t('autobahn:modal.totalRepayment'), `${eur(grossAmount)} €`]] as Array<[string, string]>) : []),
   ];
+  const breakdownRows = rows.map(([l, v], i) => (
+    <div
+      key={l}
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        gap: 12,
+        padding: '9px 0',
+        borderBottom: i < rows.length - 1 ? '1px solid var(--md-outline-variant)' : 0,
+      }}
+    >
+      <span className="md-label-sm">{l}</span>
+      <span className="num" style={{ fontSize: 13.5, fontWeight: 600 }}>
+        {v}
+      </span>
+    </div>
+  ));
+
   return (
     <div className="fin-modal-scrim" onClick={onClose}>
       <div className="fin-modal" role="dialog" aria-modal="true" aria-label={title} onClick={(e) => e.stopPropagation()}>
         <div className="fin-modal-head">
-          <h2 className="md-headline-sm" style={{ margin: 0 }}>
+          <h2 className="md-headline-sm hide-mobile" style={{ margin: 0 }}>
             {title}
           </h2>
+          <h2 className="md-headline-sm show-mobile" style={{ margin: 0 }}>
+            {mobileTitle}
+          </h2>
           <button className="icon-btn" onClick={onClose} aria-label={t('autobahn:modal.close')}>
             <Icon name="x" size={20} />
           </button>
         </div>
         <div className="fin-modal-body">
-          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 14 }}>
-            <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
-              {eur(monthly)} €
-            </span>
-            <span className="md-label-sm">{t('autobahn:finance.perMonth')}</span>
-          </div>
-          {/* adjustment sliders — change a value and every figure below recomputes live (via the page) */}
-          {adjustable && (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 18 }}>
-              <div>
-                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
-                  <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
-                  <span className="num" style={{ fontWeight: 700 }}>
-                    {eur(down)} €
-                  </span>
-                </div>
-                <Slider
-                  min={downMin as number}
-                  max={downMax as number}
-                  step={downStep}
-                  value={down}
-                  onChange={onDownChange as (n: number) => void}
-                  fmt={(v) => `${eur(Number(v))} €`}
-                />
-              </div>
-              {isLease && annualMileage != null && onAnnualMileageChange && (
+          {/* ============================== DESKTOP (≥601px) — unchanged ============================== */}
+          <div className="hide-mobile">
+            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 14 }}>
+              <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
+                {eur(monthly)} €
+              </span>
+              <span className="md-label-sm">{t('autobahn:finance.perMonth')}</span>
+            </div>
+            {/* adjustment sliders — change a value and every figure below recomputes live (via the page) */}
+            {adjustable && (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 18 }}>
                 <div>
                   <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
-                    <span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
+                    <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
                     <span className="num" style={{ fontWeight: 700 }}>
-                      {eur(annualMileage)} km
+                      {eur(down)} €
                     </span>
                   </div>
                   <Slider
-                    min={annualMileageMin}
-                    max={annualMileageMax}
-                    step={annualMileageStep}
-                    value={annualMileage}
-                    onChange={onAnnualMileageChange}
-                    fmt={(v) => `${eur(Number(v))} km`}
+                    min={downMin as number}
+                    max={downMax as number}
+                    step={downStep}
+                    value={down}
+                    onChange={onDownChange as (n: number) => void}
+                    fmt={(v) => `${eur(Number(v))} €`}
                   />
                 </div>
-              )}
-              <div>
-                <div className="md-title-sm" style={{ marginBottom: 8 }}>
-                  {t('autobahn:finance.termSelection')}
+                {isLease && annualMileage != null && onAnnualMileageChange && (
+                  <div>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                      <span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
+                      <span className="num" style={{ fontWeight: 700 }}>
+                        {eur(annualMileage)} km
+                      </span>
+                    </div>
+                    <Slider
+                      min={annualMileageMin}
+                      max={annualMileageMax}
+                      step={annualMileageStep}
+                      value={annualMileage}
+                      onChange={onAnnualMileageChange}
+                      fmt={(v) => `${eur(Number(v))} km`}
+                    />
+                  </div>
+                )}
+                <div>
+                  <div className="md-title-sm" style={{ marginBottom: 8 }}>
+                    {t('autobahn:finance.termSelection')}
+                  </div>
+                  <TermChips options={termVals} value={term} onChange={onTermChange as (n: number) => void} t={t} />
                 </div>
-                <TermChips options={termVals} value={term} onChange={onTermChange as (n: number) => void} t={t} />
+              </div>
+            )}
+            {breakdownRows}
+            <p className="md-label-sm" style={{ marginTop: 16, lineHeight: 1.55 }}>
+              {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
+            </p>
+          </div>
+
+          {/* ============================== MOBILE (≤600px) — full "Rate anpassen" sheet ============================== */}
+          <div className="show-mobile" style={{ flexDirection: 'column', gap: 18 }}>
+            {onModeChange && (
+              <div className="fin-tabs" role="tablist">
+                {(
+                  [
+                    ['fin', 'autobahn:finance.mode.financing'],
+                    ['leasing', 'autobahn:finance.mode.leasing'],
+                    ['cash', 'autobahn:finance.mode.cash'],
+                  ] as Array<[FinanceMode, string]>
+                ).map(([k, labelKey]) => (
+                  <button
+                    key={k}
+                    type="button"
+                    role="tab"
+                    aria-selected={mode === k}
+                    className={'fin-tab' + (mode === k ? ' on' : '')}
+                    onClick={() => onModeChange(k)}
+                  >
+                    {t(labelKey)}
+                  </button>
+                ))}
+              </div>
+            )}
+
+            <div className="fin-price-grid">
+              <div className="fin-rate-main">
+                <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
+                  <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
+                    {isCash ? eur(price) : eur(Math.round(monthly))}
+                  </span>
+                  <span className="md-body-sm" style={{ fontWeight: 600 }}>
+                    {isCash ? '€' : `€ ${t('autobahn:finance.perMonth')}`}
+                  </span>
+                </div>
+              </div>
+              <div>
+                {ratingLabel && (
+                  <span
+                    className="fin-eval-pill"
+                    style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
+                  >
+                    <Icon
+                      name={evalTier <= 1 ? 'check' : evalTier === 2 ? 'minus' : 'trending-up'}
+                      size={14}
+                      stroke={2.6}
+                      color={TIER_COLORS[evalTier]}
+                    />
+                    {evalTierLabel}
+                  </span>
+                )}
+              </div>
+              <div />
+              <div>
+                {ratingLabel && (
+                  <div className="fin-eval-bar">
+                    <div className="fin-eval-thumb" style={{ left: `${(evalTier + 0.5) * 20}%`, borderColor: TIER_COLORS[evalTier] }} />
+                  </div>
+                )}
               </div>
             </div>
-          )}
-          {rows.map(([l, v], i) => (
-            <div
-              key={l}
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                gap: 12,
-                padding: '9px 0',
-                borderBottom: i < rows.length - 1 ? '1px solid var(--md-outline-variant)' : 0,
-              }}
-            >
-              <span className="md-label-sm">{l}</span>
-              <span className="num" style={{ fontSize: 13.5, fontWeight: 600 }}>
-                {v}
-              </span>
-            </div>
-          ))}
-          <p className="md-label-sm" style={{ marginTop: 16, lineHeight: 1.55 }}>
-            {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
-          </p>
+
+            {isCash ? (
+              <>
+                <div>
+                  <CalcRow label={t('autobahn:finance.paymentLabel')}>{t('autobahn:finance.paymentValue')}</CalcRow>
+                  <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
+                  <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
+                    {t('autobahn:finance.deliveryValue')}
+                  </CalcRow>
+                </div>
+                {addServicesCost != null && (
+                  <ToggleRow
+                    label={t('autobahn:finance.addServicesToggle')}
+                    price={t('autobahn:finance.addServicesOnce', { value: eur(addServicesCost) })}
+                    checked={!!withAddServices}
+                    disabled={addServicesDisabled}
+                    onChange={(checked) => onToggleAddServices && onToggleAddServices(checked)}
+                  />
+                )}
+                <div style={{ display: 'flex', gap: 10 }}>
+                  <Button variant="filled" size="lg" icon="shield-check" style={{ flex: 1 }} onClick={onSecure}>
+                    {t('autobahn:finance.secureOffer')}
+                  </Button>
+                  <Button variant="outlined" size="lg" icon="phone" style={{ width: 52, flex: 'none' }} onClick={onCall} />
+                </div>
+              </>
+            ) : (
+              <>
+                {adjustable && (
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+                    <div>
+                      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                        <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
+                        <span className="num" style={{ fontWeight: 700 }}>
+                          {eur(down)} €
+                        </span>
+                      </div>
+                      <Slider
+                        min={downMin as number}
+                        max={downMax as number}
+                        step={downStep}
+                        value={down}
+                        onChange={onDownChange as (n: number) => void}
+                        fmt={(v) => `${eur(Number(v))} €`}
+                      />
+                    </div>
+                    {isLease && annualMileage != null && onAnnualMileageChange && (
+                      <div>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                          <span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
+                          <span className="num" style={{ fontWeight: 700 }}>
+                            {eur(annualMileage)} km
+                          </span>
+                        </div>
+                        <Slider
+                          min={annualMileageMin}
+                          max={annualMileageMax}
+                          step={annualMileageStep}
+                          value={annualMileage}
+                          onChange={onAnnualMileageChange}
+                          fmt={(v) => `${eur(Number(v))} km`}
+                        />
+                      </div>
+                    )}
+                    <div>
+                      <div className="md-title-sm" style={{ marginBottom: 8 }}>
+                        {t('autobahn:finance.termSelection')}
+                      </div>
+                      <TermChips options={termVals} value={term} onChange={onTermChange as (n: number) => void} t={t} />
+                    </div>
+                  </div>
+                )}
+
+                {!isLease && onToggleFinalInstallment && (
+                  <ToggleRow
+                    label={t('autobahn:finance.finalInstallmentToggle')}
+                    checked={!!withFinalInstallment}
+                    onChange={onToggleFinalInstallment}
+                  />
+                )}
+                {addServicesCost != null && onToggleAddServices && (
+                  <ToggleRow
+                    label={t('autobahn:finance.addServicesToggle')}
+                    price={t('autobahn:finance.addServicesPerMonth', { value: eur(addServicesCost) })}
+                    checked={!!withAddServices}
+                    disabled={addServicesDisabled}
+                    onChange={onToggleAddServices}
+                  />
+                )}
+
+                <div style={{ display: 'flex', gap: 10 }}>
+                  <Button variant="filled" size="lg" icon="shield-check" style={{ flex: 1 }} onClick={onSecure}>
+                    {t('autobahn:finance.requestRate')}
+                  </Button>
+                  <Button variant="outlined" size="lg" icon="phone" style={{ width: 52, flex: 'none' }} onClick={onCall} />
+                </div>
+
+                <button type="button" onClick={() => setShowBreakdown((v) => !v)} style={expanderBtnStyle}>
+                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
+                    <Icon name="info" size={16} color="var(--md-primary)" />
+                    {isLease ? t('autobahn:modal.leasingDetails') : t('autobahn:modal.financingDetails')}
+                  </span>
+                  <Icon name={showBreakdown ? 'chevron-up' : 'chevron-down'} size={18} color="var(--md-primary)" />
+                </button>
+                {showBreakdown && (
+                  <div>
+                    {breakdownRows}
+                    <p className="md-label-sm" style={{ marginTop: 16, lineHeight: 1.55 }}>
+                      {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
+                    </p>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
         </div>
       </div>
     </div>