@bytebrand/fe-ui-core-autobahn 1.0.147 → 1.0.148

package/cards/CarCard.tsx

@@ -157,6 +157,8 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   // active that's already 3, so NEU is dropped rather than causing a 4th to overflow.
   const activeDealChips = [showDrop || showSave, showPct, !!car.zeroDown].filter(Boolean).length;
   const showNeu = asGoodAsNew && car.isNew && activeDealChips < 3;
+  // tabs the price block can switch to (PriceTabs shows Leasing only when the car has a lease rate)
+  const paymentModes: PaymentMode[] = car.lease != null ? ['financing', 'leasing', 'buy'] : ['financing', 'buy'];
   return (
     <article
       className="mcard mcard--interactive cc-card"
@@ -277,7 +279,21 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
         <div className="cc-price" style={{ marginTop: 0, borderTop: '1px solid var(--md-outline-variant)' }}>
           <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 10 }}>
-            <PriceHero car={car} mode={mode} t={t} alwaysShowUnit />
+            {/* every tab's hero stacked in one grid cell (.cc-hero-stack), only the active one
+                visible, bottom-aligned — Kaufen's struck list price sits on its own line above
+                the price, so without this the row (and the card) grew/shrank by that line on
+                every tab switch. Same trick as .cc-terms-stack below. */}
+            <div className="cc-hero-stack">
+              {paymentModes.map((m) => (
+                <div
+                  key={m}
+                  className={'cc-hero-slot' + (m === mode ? '' : ' cc-hero-slot--hidden')}
+                  aria-hidden={m === mode ? undefined : true}
+                >
+                  <PriceHero car={car} mode={m} t={t} alwaysShowUnit />
+                </div>
+              ))}
+            </div>
             <PriceEvalCol car={car} t={t} />
           </div>
           {/* same fallback CardCtaRow already uses below: pages that haven't wired a real
@@ -287,23 +303,21 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
               card keeps one height across Finanzierung/Leasing/Kaufen (Leasing's longer line
               wraps to 2 lines on narrow phones). No change to the visible line itself. */}
           <div className="cc-terms-stack">
-            {(['financing', 'leasing', 'buy'] as PaymentMode[])
-              .filter((m) => m !== 'leasing' || car.lease != null)
-              .map((m) => (
-                <div
-                  key={m}
-                  className={'cc-terms-slot' + (m === mode ? '' : ' cc-terms-slot--hidden')}
-                  aria-hidden={m === mode ? undefined : true}
-                >
-                  <PriceTerms
-                    car={car}
-                    mode={m}
-                    onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
-                    onShowDetails={onShowFinancingDetails ? () => onShowFinancingDetails(car, m) : undefined}
-                    t={t}
-                  />
-                </div>
-              ))}
+            {paymentModes.map((m) => (
+              <div
+                key={m}
+                className={'cc-terms-slot' + (m === mode ? '' : ' cc-terms-slot--hidden')}
+                aria-hidden={m === mode ? undefined : true}
+              >
+                <PriceTerms
+                  car={car}
+                  mode={m}
+                  onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
+                  onShowDetails={onShowFinancingDetails ? () => onShowFinancingDetails(car, m) : undefined}
+                  t={t}
+                />
+              </div>
+            ))}
           </div>
         </div>
         {/* Mobile-only row (CardCtaRow itself carries the show-mobile class) — always

package/package.json

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

@@ -5556,6 +5556,21 @@ line-height: 31px;
 /* financing/leasing terms line + "Finanzierungsdetails"/"Leasingdetails" link (PriceTerms in
    cardParts.tsx), full-width under the price/rating row. Same quiet typography as .pp-hero-terms
    (PricePaths); the link resets button chrome and reuses the primary color so it reads as tappable. */
+/* CarCard: all tabs' price heroes stacked in one grid cell, only the active one visible,
+   bottom-aligned (the price figure stays put) — Kaufen's struck list price adds a line above the
+   price, which otherwise grew/shrank the price row on every tab switch. The cell is as wide as
+   the WIDEST hero (no min-width: 0 — same auto min-width the lone hero had), so the "Guter
+   Preis" column next to it also keeps one position on every tab. */
+.md3 .cc-hero-stack {
+  display: grid;
+}
+.md3 .cc-hero-slot {
+  grid-area: 1 / 1;
+  align-self: end;
+}
+.md3 .cc-hero-slot--hidden {
+  visibility: hidden;
+}
 /* CarCard: all tabs' terms lines stacked in one grid cell, only the active one visible — the
    cell takes the tallest line's height so switching tabs never changes the card's height. */
 .md3 .cc-terms-stack {