@bytebrand/fe-ui-core-autobahn 1.0.40 → 1.0.42

package/package.json

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

@@ -1208,6 +1208,9 @@
    sticky bottom bar, all payment modes. */
 .md3 .fin-rate-old { font-size: 15px; font-weight: 700; color: var(--md-error);
   text-decoration: line-through; letter-spacing: 0; flex: none; }
+/* stacked unit column beside the hero rate (Figma: struck old rate ABOVE "/mtl.") */
+.md3 .fin-rate-unit { display: flex; flex-direction: column; line-height: 1.25;
+  font-size: 14px; font-weight: 600; color: var(--md-on-surface-variant); flex: none; }
 /* condition summary — left cell of row 2 in fin-price-grid */
 .md3 .fin-cond { min-width: 0; font-size: 12.5px; color: var(--md-on-surface-variant); }
 /* Rate-edit (Rate anpassen) sits between the rate and the CTA now */
@@ -1395,7 +1398,11 @@
      which stays bundled inside .vdp-gallery, hidden on mobile via hide-mobile). */
   .md3 .vdp-header-summary { order: 2; padding: 0; margin-bottom: 4px; /* flush with the card edges so the trust chips span the same width */ }
   .md3 .vdp-aside      { order: 3; }
-  .md3 .vdp-header-extras  { order: 4; margin-top: 16px; }
+  /* no extra margin-top — .vdp-grid's own gap (14px, set further below) already spaces every
+     mobile card uniformly; an added margin here stacked ON TOP of that gap, making the gap
+     AFTER this card visibly bigger than the gap before it once ReviewsTeaser was inserted
+     between the aside and this card (round 10 fix). */
+  .md3 .vdp-header-extras  { order: 4; }
   .md3 .vdp-details    { order: 5; }
   .md3 .vdp-aside      { position: static; }
   .md3 .price-card     { position: static; }
@@ -1612,7 +1619,17 @@
   /* tighter stacked rhythm so title→chips→finance card land above the fold */
   .md3 .vdp-grid { gap: 14px; }
   .md3 .fin-tabs { margin-bottom: 12px; }
-  .md3 .fin-info { margin-top: 10px; padding-top: 10px; }
+  /* no divider above the Persönliche-Beratung row on phone (Figma: the only divider in this
+     zone is the one before "Rate anpassen"); desktop keeps its border-top. */
+  .md3 .fin-info { margin-top: 10px; padding-top: 10px; border-top: 0; }
+  /* tabs divider runs edge-to-edge of the card / sticky bar (Figma) */
+  .md3 .vdp-aside .fin-tabs { margin-left: -16px; margin-right: -16px; }
+  .md3 .vdp-bottom-bar .fin-tabs { margin-left: -14px; margin-right: -14px; }
+  /* Anrufen / phone buttons: Figma blue outline (default outlined is quiet gray) */
+  .md3 .fin-cta-row .mbtn--outlined,
+  .md3 .bb-cta-row .mbtn--outlined:not(.bb-adjust) { box-shadow: inset 0 0 0 1.5px var(--md-primary); }
+  /* mobile page is WHITE like the Figma master — beats the .vdp-tint inline gray */
+  .md3 .vdp-tint { background: var(--md-sc-lowest) !important; }
   /* mockup hero rate is a notch bigger on phone (inline style says 48 — hence !important) */
   .md3 .fin-rate-main .num { font-size: 52px !important; letter-spacing: -1.5px !important; }
   /* the struck old figure must NOT inherit the 52px hero size */

package/vdp/FinanceCalculator.tsx

@@ -333,22 +333,22 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
 
       {/* 2-col grid: rate|pill (row 1) + condLine|bar (row 2) — fixed right column prevents wrapping */}
       <div className="fin-price-grid">
-        {/* col 1 row 1: hero rate */}
+        {/* col 1 row 1: hero rate — Figma: "329 €" all-big, then a small stacked column with
+            the struck old rate ABOVE "/mtl." (round 11; was a single baseline row) */}
         <div className="fin-rate-main">
-          <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
             <span
               className="num"
               style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
             >
-              {isCash ? eur(price) : eur(Math.round(monthly))}
+              {isCash ? eur(price) : eur(Math.round(monthly))} €
             </span>
-            <span className="md-body-sm" style={{ fontWeight: 600 }}>
-              {isCash ? '€' : `€ ${t('autobahn:finance.perMonth')}`}
-            </span>
-            {/* struck old rate (REAL oldMonthlyInstallment; SRP strikes the same source) —
-                after the unit, else the unit wraps under the hero figure on phones */}
-            {!isCash && oldMonthly != null && (
-              <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>
+            {!isCash && (
+              <span className="fin-rate-unit">
+                {/* struck old rate (REAL oldMonthlyInstallment; SRP strikes the same source) */}
+                {oldMonthly != null && <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>}
+                <span>{t('autobahn:finance.perMonth')}</span>
+              </span>
             )}
           </div>
           {isCash && <div className="md-label-sm">{t('autobahn:finance.fixedPrice')}</div>}
@@ -491,7 +491,8 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
         {/* side-by-side CTAs — mockup ratio ~2:1, with the tiny auto.de-ID sitting
             directly under the Anrufen button (not in its own full-width row). */}
         <div className="fin-cta-row" style={{ display: 'flex', gap: 10, marginTop: 14, alignItems: 'flex-start' }}>
-          <Button variant="filled" size="lg" icon="shield-check" style={{ flex: 2 }} onClick={onSecure}>
+          {/* file-check, not shield — the Figma CTA carries the document-with-check icon */}
+          <Button variant="filled" size="lg" icon="file-check" style={{ flex: 2 }} onClick={onSecure}>
             {t('autobahn:finance.secureOffer')}
           </Button>
           <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>

package/vdp/VdpModules.tsx

@@ -1168,18 +1168,29 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
         </div>
       )}
       <div className="bb-price-row">
-        <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, whiteSpace: 'nowrap', minWidth: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap', minWidth: 0 }}>
           <span className="num" style={{ fontWeight: 800, fontSize: 30, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
             {isCash ? eur(vehicle.price) : eur(Math.round(rate))} €
           </span>
-          {/* struck old rate / list price (REAL isStrikeShown-gated figures, per Figma sticky footer) */}
-          {!isCash && oldMonthly != null && <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>}
-          {isCash && vehicle.listPrice != null && vehicle.listPrice > vehicle.price && (
-            <s className="num fin-rate-old">{eur(vehicle.listPrice)} €</s>
+          {/* Figma sticky footer: tiny "z.B.", then the struck old rate stacked ABOVE "/mtl." */}
+          {isCash ? (
+            <>
+              {vehicle.listPrice != null && vehicle.listPrice > vehicle.price && (
+                <s className="num fin-rate-old">{eur(vehicle.listPrice)} €</s>
+              )}
+              <span className="md-label-sm" style={{ fontWeight: 600 }}>{t('autobahn:finance.fixedPrice')}</span>
+            </>
+          ) : (
+            <>
+              <span className="md-label-sm" style={{ fontWeight: 600, alignSelf: 'flex-end', paddingBottom: 4 }}>
+                {t('autobahn:finance.exampleLabel')}
+              </span>
+              <span className="fin-rate-unit" style={{ fontSize: 12.5 }}>
+                {oldMonthly != null && <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>}
+                <span>{t('autobahn:bottom.perMonth')}</span>
+              </span>
+            </>
           )}
-          <span className="md-label-sm" style={{ fontWeight: 600 }}>
-            {isCash ? t('autobahn:finance.fixedPrice') : `${t('autobahn:finance.exampleLabel')} ${t('autobahn:bottom.perMonth')}`}
-          </span>
         </div>
         {ratingLabel && (
           <div className="bb-eval">
@@ -1614,15 +1625,15 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
 
             <div className="fin-price-grid">
               <div className="fin-rate-main">
-                <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                   <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
-                    {isCash ? eur(price) : eur(Math.round(monthly))}
+                    {isCash ? eur(price) : eur(Math.round(monthly))} €
                   </span>
-                  <span className="md-body-sm" style={{ fontWeight: 600 }}>
-                    {isCash ? '€' : `€ ${t('autobahn:finance.perMonth')}`}
-                  </span>
-                  {!isCash && oldMonthly != null && (
-                    <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>
+                  {!isCash && (
+                    <span className="fin-rate-unit">
+                      {oldMonthly != null && <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>}
+                      <span>{t('autobahn:finance.perMonth')}</span>
+                    </span>
                   )}
                 </div>
               </div>