@bytebrand/fe-ui-core-autobahn 1.0.48 → 1.0.50

package/package.json

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

@@ -1405,7 +1405,9 @@
   /* mobile-only "first screen": identity + trust row BEFORE the finance card, highlights/
      condition tiles moved AFTER it (both split out of the desktop-only VdpHeaderCard,
      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 */ }
+  /* no extra margin — .vdp-grid's uniform gap is THE spacing between all mobile blocks
+     (round 14: a stray 4px here made the summary→card gap bigger than the rest) */
+  .md3 .vdp-header-summary { order: 2; padding: 0; }
   .md3 .vdp-aside      { order: 3; }
   /* 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
@@ -1661,6 +1663,10 @@
   .md3 .fin-modal-body > .show-mobile { min-height: 56vh; }
   /* inactive mode tabs are dark + bold on phone (Figma) */
   .md3 .fin-tab:not(.on) { color: var(--fig-navy); font-weight: 700; }
+  /* round 14: ONE uniform 14px rhythm between ALL mobile blocks — the details column used the
+     desktop 22px gap and the below-grid sections carried inline 24/44px top margins */
+  .md3 .vdp-details { gap: 14px; }
+  .md3 .hiw-section, .md3 #vdp-kontakt, .md3 #vdp-bewertungen, .md3 .vdp-similar { margin-top: 14px !important; }
   /* condition tiles: Figma value size + roomier gap to the pills above */
   .md3 .zustand-tile .md-title-sm { font-size: 16.5px; }
   .md3 .vdp-header-extras .zustand-grid { margin-top: 10px; }

package/vdp/FinanceCalculator.tsx

@@ -395,29 +395,46 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
         {/* 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">
-          {/* mobile Kaufen (Figma round 14): struck list price ABOVE the price, right-aligned —
-              replaces the Festpreis + UVP lines, which stay desktop-only */}
+          {/* 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' }}>
+            <div className="show-mobile" style={{ justifyContent: 'flex-end', lineHeight: 1, marginBottom: -5 }}>
               <s className="num fin-rate-old">{eur(listPrice as number)} €</s>
             </div>
           )}
           <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-            <span
-              className="num"
-              style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
-            >
-              {/* cash keeps the long price number-only (a big "13.249 €" overflows the grid cell) */}
-              {isCash ? eur(price) : `${eur(Math.round(monthly))} €`}
-            </span>
             {isCash ? (
-              <span className="md-body-sm" style={{ fontWeight: 600 }}>€</span>
+              <>
+                {/* phone: ONE unbreakable "13.249 €" span (a separate € span wraps to its own
+                    line); desktop keeps the number + quiet small € pair */}
+                <span
+                  className="num show-mobile"
+                  style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px', whiteSpace: 'nowrap' }}
+                >
+                  {eur(price)} €
+                </span>
+                <span
+                  className="num hide-mobile"
+                  style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
+                >
+                  {eur(price)}
+                </span>
+                <span className="md-body-sm hide-mobile" style={{ fontWeight: 600 }}>€</span>
+              </>
             ) : (
-              <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>
+              <>
+                <span
+                  className="num"
+                  style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
+                >
+                  {eur(Math.round(monthly))} €
+                </span>
+                <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 hide-mobile">{t('autobahn:finance.fixedPrice')}</div>}