@bytebrand/fe-ui-core-autobahn 1.0.59 → 1.0.61

package/utils/financeFormat.ts

@@ -1,62 +1,62 @@
-// Autobahn (auto.de redesign) — shared financing-number formatting.
-//
-// Extracted from vdp/VdpModules.tsx's FinanceDetailsModal so non-React consumers (e.g. the
-// Meta AIA marketing-image renderer) format the SAME real numbers the same way, instead of a
-// second copy drifting from the VDP's. Pure TS, no React/JSX — safe to import from a plain
-// Node service.
-//
-// The "only real figures, never a fabricated total" rule is load-bearing (legal: balloon
-// financing means monthly×term is NOT the total) and lives here once, not per-caller.
-
-/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
- *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
-export function formatEur(n: number): string {
-  return n.toLocaleString('de-DE');
-}
-
-/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
-export function formatPct(n: number): string {
-  return `${n.toFixed(2).replace('.', ',')} %`;
-}
-
-export interface FinanceExampleFields {
-  price: number;
-  apr: number;
-  down: number;
-  /** Real config figure — falls back to price-down ONLY when genuinely absent. */
-  netLoanAmount?: number;
-  nominalRate?: number;
-  finalInstallment?: number;
-  grossAmount?: number;
-}
-
-export interface FinanceExampleLabels {
-  vehiclePrice: string;
-  priceSuffix: string;
-  apr: string;
-  nominal: string;
-  net: string;
-  down: string;
-  final: string;
-  gross: string;
-}
-
-/**
- * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
- * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
- * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
- * `exampleLine`, byte-for-byte).
- */
-export function buildFinanceExampleLine(fields: FinanceExampleFields, labels: FinanceExampleLabels, footnoteMarker = '³'): string {
-  const netto = fields.netLoanAmount != null ? fields.netLoanAmount : Math.max(0, fields.price - fields.down);
-  const parts: string[] = [
-    `${labels.vehiclePrice}: ${formatEur(fields.price)} € ${labels.priceSuffix}`,
-    ...(fields.apr > 0 ? [`${labels.apr}: ${formatPct(fields.apr)}`] : []),
-    ...(fields.nominalRate != null && fields.nominalRate > 0 ? [`${labels.nominal}: ${formatPct(fields.nominalRate)}`] : []),
-    `${labels.net}: ${formatEur(netto)} €`,
-    `${labels.down}: ${formatEur(fields.down)} €`,
-    ...(fields.finalInstallment != null && fields.finalInstallment > 0 ? [`${labels.final}: ${formatEur(fields.finalInstallment)} €`] : []),
-    ...(fields.grossAmount != null && fields.grossAmount > 0 ? [`${labels.gross}: ${formatEur(fields.grossAmount)} €`] : []),
-  ];
-  return `${footnoteMarker} ${parts.join('; ')};`;
-}
+// Autobahn (auto.de redesign) — shared financing-number formatting.
+//
+// Extracted from vdp/VdpModules.tsx's FinanceDetailsModal so non-React consumers (e.g. the
+// Meta AIA marketing-image renderer) format the SAME real numbers the same way, instead of a
+// second copy drifting from the VDP's. Pure TS, no React/JSX — safe to import from a plain
+// Node service.
+//
+// The "only real figures, never a fabricated total" rule is load-bearing (legal: balloon
+// financing means monthly×term is NOT the total) and lives here once, not per-caller.
+
+/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
+ *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
+export function formatEur(n: number): string {
+  return n.toLocaleString('de-DE');
+}
+
+/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
+export function formatPct(n: number): string {
+  return `${n.toFixed(2).replace('.', ',')} %`;
+}
+
+export interface FinanceExampleFields {
+  price: number;
+  apr: number;
+  down: number;
+  /** Real config figure — falls back to price-down ONLY when genuinely absent. */
+  netLoanAmount?: number;
+  nominalRate?: number;
+  finalInstallment?: number;
+  grossAmount?: number;
+}
+
+export interface FinanceExampleLabels {
+  vehiclePrice: string;
+  priceSuffix: string;
+  apr: string;
+  nominal: string;
+  net: string;
+  down: string;
+  final: string;
+  gross: string;
+}
+
+/**
+ * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
+ * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
+ * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
+ * `exampleLine`, byte-for-byte).
+ */
+export function buildFinanceExampleLine(fields: FinanceExampleFields, labels: FinanceExampleLabels, footnoteMarker = '³'): string {
+  const netto = fields.netLoanAmount != null ? fields.netLoanAmount : Math.max(0, fields.price - fields.down);
+  const parts: string[] = [
+    `${labels.vehiclePrice}: ${formatEur(fields.price)} € ${labels.priceSuffix}`,
+    ...(fields.apr > 0 ? [`${labels.apr}: ${formatPct(fields.apr)}`] : []),
+    ...(fields.nominalRate != null && fields.nominalRate > 0 ? [`${labels.nominal}: ${formatPct(fields.nominalRate)}`] : []),
+    `${labels.net}: ${formatEur(netto)} €`,
+    `${labels.down}: ${formatEur(fields.down)} €`,
+    ...(fields.finalInstallment != null && fields.finalInstallment > 0 ? [`${labels.final}: ${formatEur(fields.finalInstallment)} €`] : []),
+    ...(fields.grossAmount != null && fields.grossAmount > 0 ? [`${labels.gross}: ${formatEur(fields.grossAmount)} €`] : []),
+  ];
+  return `${footnoteMarker} ${parts.join('; ')};`;
+}

package/utils/priceRating.ts

@@ -1,58 +1,58 @@
-// Autobahn (auto.de redesign) — Preisbewertung rating math, extracted from CommonUtils.ts.
-//
-// Pulled out on purpose: CommonUtils.ts transitively imports `../constants/Search`, which
-// `require()`s image assets (webpack-only — breaks any plain Node `require`/`tsc` consumer).
-// This file only imports `../constants/price` (zero further imports) — a pure, testable leaf
-// module. CommonUtils.ts re-exports these for existing consumers — one implementation, not a fork.
-// (image-generator's Meta AIA renderer vendors a copy of this math directly instead of depending
-// on this package — see services/image-generator/src/services/metaAia/vendoredAutobahnMath.ts —
-// so a plain-Node backend doesn't need to npm-install this whole design system's dependency tree.)
-import { priceRatings, priceRatingConfig } from '../constants/price';
-import { PREDICTABLE_PRICE_INDEX } from '../constants/core';
-
-export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
-  const round = (value: number) => {
-    return Number.isFinite(pricePredicted)
-      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
-      : '???';
-  };
-
-  if (currentPrice === 0) {
-    console.log('Empty current price');
-  }
-
-  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
-    const { min, max } = priceRatingConfig[key];
-    return { ...acc, [key]: { min: round(min), max: round(max) } };
-  }, {}); // tslint:disable-line
-};
-
-export const getPredictablePrice = (currentSalesPrice: number, predictablePrice: number) => {
-  if (Number.isFinite(Number.parseFloat(`${predictablePrice}`))) {
-    return predictablePrice;
-  }
-
-  return currentSalesPrice * PREDICTABLE_PRICE_INDEX;
-}
-
-export const getPriceRating = (currentSalesPrice: number, predictablePrice: number) => {
-  const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
-  // const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
-
-  if (!isCorrectCurrentSalesPrice) return 0;
-
-
-  const validatedPredictablePrice = getPredictablePrice(currentSalesPrice, predictablePrice);
-
-  const ratingConfig = getPriceRatingConfig(currentSalesPrice, validatedPredictablePrice);
-
-  for (const key of Object.keys(ratingConfig)) {
-    const { min, max } = ratingConfig[key];
-    const TOP_PRICE = 5;
-    if (key === 'highPrice' && currentSalesPrice === max) return 1;
-    if (key === 'topPrice' && currentSalesPrice <= min) return TOP_PRICE;
-    if (currentSalesPrice >= min && currentSalesPrice < max) return priceRatings.indexOf(key);
-  }
-
-  return 0;
-};
+// Autobahn (auto.de redesign) — Preisbewertung rating math, extracted from CommonUtils.ts.
+//
+// Pulled out on purpose: CommonUtils.ts transitively imports `../constants/Search`, which
+// `require()`s image assets (webpack-only — breaks any plain Node `require`/`tsc` consumer).
+// This file only imports `../constants/price` (zero further imports) — a pure, testable leaf
+// module. CommonUtils.ts re-exports these for existing consumers — one implementation, not a fork.
+// (image-generator's Meta AIA renderer vendors a copy of this math directly instead of depending
+// on this package — see services/image-generator/src/services/metaAia/vendoredAutobahnMath.ts —
+// so a plain-Node backend doesn't need to npm-install this whole design system's dependency tree.)
+import { priceRatings, priceRatingConfig } from '../constants/price';
+import { PREDICTABLE_PRICE_INDEX } from '../constants/core';
+
+export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
+  const round = (value: number) => {
+    return Number.isFinite(pricePredicted)
+      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
+      : '???';
+  };
+
+  if (currentPrice === 0) {
+    console.log('Empty current price');
+  }
+
+  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
+    const { min, max } = priceRatingConfig[key];
+    return { ...acc, [key]: { min: round(min), max: round(max) } };
+  }, {}); // tslint:disable-line
+};
+
+export const getPredictablePrice = (currentSalesPrice: number, predictablePrice: number) => {
+  if (Number.isFinite(Number.parseFloat(`${predictablePrice}`))) {
+    return predictablePrice;
+  }
+
+  return currentSalesPrice * PREDICTABLE_PRICE_INDEX;
+}
+
+export const getPriceRating = (currentSalesPrice: number, predictablePrice: number) => {
+  const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
+  // const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
+
+  if (!isCorrectCurrentSalesPrice) return 0;
+
+
+  const validatedPredictablePrice = getPredictablePrice(currentSalesPrice, predictablePrice);
+
+  const ratingConfig = getPriceRatingConfig(currentSalesPrice, validatedPredictablePrice);
+
+  for (const key of Object.keys(ratingConfig)) {
+    const { min, max } = ratingConfig[key];
+    const TOP_PRICE = 5;
+    if (key === 'highPrice' && currentSalesPrice === max) return 1;
+    if (key === 'topPrice' && currentSalesPrice <= min) return TOP_PRICE;
+    if (currentSalesPrice >= min && currentSalesPrice < max) return priceRatings.indexOf(key);
+  }
+
+  return 0;
+};

package/vdp/FinanceCalculator.tsx

@@ -329,24 +329,35 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
 }) => {
   // Pure view state only — whether the adjust/details expander is open.
   const [adjust, setAdjust] = useState(false);
+  // whether the "UVP-Rate" footnote popover (fin/leasing) is open — same widget as CarCard's.
+  const [uvpTooltipOpen, setUvpTooltipOpen] = useState(false);
   const isCash = mode === 'cash';
   const terms = termOptions && termOptions.length ? termOptions : range(termMin, termMax, termStep);
   const showStrike = listPrice != null && listPrice > price;
   // price-evaluation tier from the rating label (defaults to 'Guter Preis' tier when unmapped).
   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]);
-  // condition summary (current selection) — the auto.de-ID lives with the details link, not here.
+  // both green tiers ('top' and 'good') collapse onto one "Top-Preis" claim (same convention as
+  // CarCard's PriceEvalCol) — footnote 4 carries the disclaimer text.
+  const isGoodTier = TIER_KEYS[evalTier] === 'good';
+  const evalTierLabel = isGoodTier ? t('autobahn:tier.top') : t('autobahn:tier.' + TIER_KEYS[evalTier]);
+  const evalPillColor = isGoodTier ? TIER_COLORS[0] : TIER_COLORS[evalTier];
+  // condition summary (current selection) + its own details link — financing: "0 € Anzahlung ·
+  // 60 Monate · Finanzierungsdetails"; leasing: "25.000 € Sonderzahlung · 60 Mon. · 10.000
+  // km/Jahr · Details" (same wording/order as CarCard's own PriceTerms leaseTerms).
   const condParts: string[] = [];
-  if (!isCash) {
+  if (mode === 'leasing') {
     condParts.push(
-      mode === 'leasing' && annualMileage != null
-        ? t('autobahn:finance.kmPerYear', { value: eur(annualMileage) })
-        : t('autobahn:finance.downPaymentLabel', { value: eur(down) }),
+      ...t('autobahn:card.price.leaseTerms', {
+        firstInstallment: eur(down),
+        months: term,
+        mileage: annualMileage != null ? eur(annualMileage) : '',
+      }).split(' · '),
     );
+  } else if (!isCash) {
+    condParts.push(t('autobahn:finance.downPaymentLabel', { value: eur(down) }));
     condParts.push(t('autobahn:finance.monthsLabel', { months: term, count: term }));
   }
-  const condLine = condParts.length ? `${t('autobahn:finance.exampleLabel')} ${condParts.join(' · ')}` : '';
 
   return (
     <div className="mcard mcard--elevated fin-calc-card" style={{ padding: 20 }}>
@@ -410,10 +421,48 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
           {/* mobile Kaufen (Figma round 14): struck list price ABOVE the price, right-aligned,
               tight to the figure — replaces the Festpreis + UVP lines, which stay desktop-only */}
           {isCash && showStrike && (
-            <div className="show-mobile" style={{ justifyContent: 'flex-end', lineHeight: 1, marginTop: 7 }}>
-              <s className="num fin-rate-old fin-rate-old-list">
-                {eur(listPrice as number)} €<sup>2</sup>
-              </s>
+            <div className="show-mobile" style={{ justifyContent: 'flex-end', alignItems: 'baseline', gap: 4, lineHeight: 1, marginTop: 7 }}>
+              <span style={{ fontSize: 13, color: 'var(--md-on-surface-variant)' }}>{t('autobahn:finance.uvp')}</span>
+              <span
+                className={`num pp-hero-old${
+                  String(Math.round(listPrice as number)).length === 5
+                    ? ' pp-hero-old--len5'
+                    : String(Math.round(listPrice as number)).length === 4
+                      ? ' pp-hero-old--len4'
+                      : ''
+                }`}
+              >
+                {eur(Math.round(listPrice as number))} €
+                <span
+                  className="pp-eyebrow-badge"
+                  role="button"
+                  tabIndex={0}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setUvpTooltipOpen((v) => !v);
+                  }}
+                >
+                  2
+                </span>
+                {uvpTooltipOpen && (
+                  <div className="pp-uvp-tooltip" onClick={(e) => e.stopPropagation()}>
+                    <button
+                      type="button"
+                      className="pp-uvp-tooltip-close"
+                      aria-label={t('autobahn:modal.close')}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setUvpTooltipOpen(false);
+                      }}
+                    >
+                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M5 5L15 15M15 5L5 15" stroke="white" strokeWidth={2.4} strokeLinecap="round" />
+                      </svg>
+                    </button>
+                    <div className="pp-uvp-tooltip-body">{t('autobahn:card.price.uvpListTooltipBody')}</div>
+                  </div>
+                )}
+              </span>
             </div>
           )}
           <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
@@ -463,7 +512,44 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                   {/* struck old rate (REAL oldMonthlyInstallment; SRP strikes the same source) */}
                   {oldMonthly != null && (
                     <>
-                      <span className="fin-rate-example-label">{t('autobahn:finance.exampleLabel')}</span>
+                      <span className="pp-eyebrow">
+                        {t('autobahn:card.price.uvpRateLabel')}
+                        <span
+                          className="pp-eyebrow-badge"
+                          role="button"
+                          tabIndex={0}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setUvpTooltipOpen((v) => !v);
+                          }}
+                        >
+                          3
+                        </span>
+                        {uvpTooltipOpen && (
+                          <div className="pp-uvp-tooltip" onClick={(e) => e.stopPropagation()}>
+                            <button
+                              type="button"
+                              className="pp-uvp-tooltip-close"
+                              aria-label={t('autobahn:modal.close')}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setUvpTooltipOpen(false);
+                              }}
+                            >
+                              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M5 5L15 15M15 5L5 15" stroke="white" strokeWidth={2.4} strokeLinecap="round" />
+                              </svg>
+                            </button>
+                            <div className="pp-uvp-tooltip-body">
+                              {t(
+                                mode === 'leasing'
+                                  ? 'autobahn:card.price.uvpRateTooltipBodyLeasing'
+                                  : 'autobahn:card.price.uvpRateTooltipBody',
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </span>
                       <s
                         className={`num fin-rate-old fin-rate-example-price${
                           String(Math.round(oldMonthly)).length >= 5
@@ -473,12 +559,12 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                               : ''
                         }`}
                       >
-                        {eur(Math.round(oldMonthly))} €<sup>2</sup>
+                        {eur(Math.round(oldMonthly))} €
                       </s>
                     </>
                   )}
                   <span className="fin-rate-example-suffix">
-                    {t('autobahn:finance.perMonth')}<sup>3</sup>
+                    {t('autobahn:finance.perMonth')}
                   </span>
                 </span>
               </>
@@ -499,19 +585,38 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
           <div className="fin-eval-pill-cell">
             {ratingLabel && (
               <span
-                className={`fin-eval-pill${TIER_KEYS[evalTier] === 'good' ? ' fin-eval-pill--good' : ''}`}
-                style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
+                className={`fin-eval-pill${isGoodTier ? ' fin-eval-pill--good' : ''}`}
+                style={{ color: evalPillColor, background: `color-mix(in srgb, ${evalPillColor} 16%, transparent)` }}
                 aria-label={t('autobahn:finance.priceRatingAria', { rating: evalTierLabel })}
               >
                 {evalTierLabel}
+                {isGoodTier && <sup>4</sup>}
               </span>
             )}
           </div>
           {/* segmented evaluation bar (Figma: discrete tiers, not a gradient) */}
           <div className="fin-eval-bar-cell">{ratingLabel && <EvalBar tier={evalTier} />}</div>
         </div>
-        {/* col 1 row 2: condition line */}
-        <div className="fin-cond">{condLine}</div>
+        {/* col 1 row 2: condition line — financing "0 € Anzahlung · 60 Monate · Finanzierungsdetails",
+            leasing "25.000 € Sonderzahlung · 60 Mon. · 10.000 km/Jahr · Details" */}
+        <div className="fin-cond">
+          {!isCash &&
+            condParts.map((part, i) => (
+              <React.Fragment key={i}>
+                {i > 0 && <span className="cc-terms-dot"> · </span>}
+                {part}
+              </React.Fragment>
+            ))}
+          {!isCash && onShowDetails && (
+            <>
+              <span className="cc-terms-dot"> · </span>
+              {/* plain underlined text link, same onShowDetails handler as .fin-info used to open. */}
+              <button type="button" className="cc-terms-link" onClick={onShowDetails}>
+                {mode === 'leasing' ? t('autobahn:card.price.detailsLink') : t('autobahn:finance.financingDetails')}
+              </button>
+            </>
+          )}
+        </div>
       </div>
 
       {/* ============================== DESKTOP (≥601px) — unchanged ============================== */}
@@ -642,84 +747,10 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
           </div>
         </div>
 
-        {/* Persönliche Beratung (left) · divider · Finanzierungs-/Leasingdetails or hint (right) */}
-        <div className="fin-info">
-          <div className="fin-info-main" style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0, flex: 1 }}>
-            <Icon name="user" size={26} 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 fin-info-sub">{t('autobahn:finance.personalConsultationSub')}</div>
-            </div>
-          </div>
-          <span
-            style={{
-              width: 1,
-              alignSelf: 'stretch',
-              background: 'var(--md-outline-variant)',
-              flex: 'none',
-              marginLeft: 13,
-              marginRight: 13,
-            }}
-          />
-          {!isCash && onShowDetails ? (
-            <button
-              type="button"
-              className="fin-info-details-btn"
-              onClick={onShowDetails}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 8,
-                background: 'none',
-                border: 0,
-                padding: 0,
-                cursor: 'pointer',
-                font: 'inherit',
-                color: 'var(--md-on-surface)',
-                textAlign: 'left',
-              }}
-            >
-              <Icon name="info" size={24} color="var(--md-on-surface-variant)" style={{ flex: 'none' }} />
-              {/* no max-width: "Finanzierungsdetails" is one unbreakable word — capping the
-                  span clipped it mid-word instead of wrapping */}
-              <span className="md-label-sm fin-info-details-label">
-                {mode === 'leasing' ? (
-                  t('autobahn:finance.leasingDetails')
-                ) : (
-                  <>
-                    Finanzierungs-
-                    <br />
-                    Details
-                  </>
-                )}
-              </span>
-            </button>
-          ) : (
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--md-on-surface-variant)' }}>
-              <Icon name="info" size={24} />
-              <span className="md-label-sm fin-financing-leasing-note">
-                {(() => {
-                  // hard break right after "&" (not a soft wrap-if-needed hint) — always
-                  // two lines: "Finanzierung &" / "Leasing möglich"; derived from the
-                  // translated string itself so it works for either locale.
-                  const raw = t('autobahn:finance.financingLeasingPossible');
-                  const splitAt = raw.indexOf(' & ');
-                  if (splitAt === -1) return raw;
-                  const before = raw.slice(0, splitAt).split(' ').join(' ');
-                  const after = raw.slice(splitAt + 3).split(' ').join(' ');
-                  return (
-                    <>
-                      {before} &
-                      <br />
-                      {after}
-                    </>
-                  );
-                })()}
-              </span>
-            </div>
-          )}
+        {/* Persönliche Beratung — icon + one line (the details link now lives in .fin-cond above) */}
+        <div className="fin-info" style={{ justifyContent: 'flex-start', paddingLeft: 15 }}>
+          <Icon name="user" size={26} color="var(--md-on-surface-variant)" style={{ flex: 'none', marginRight: 20 }} />
+          <span className="fin-info-line">{t('autobahn:finance.personalConsultationLine')}</span>
         </div>
 
         {/* "Rate anpassen" / "Details anzeigen" — opens the full bottom sheet (not an inline expander) */}