@bytebrand/fe-ui-core-autobahn 1.0.51 → 1.0.54

package/cards/CarCard.tsx

@@ -15,11 +15,27 @@
 //  - the needs-data deal signals (DropChip / SaveChip) only appear when real
 //    `drop` / `savings` data is present.
 
-import React from 'react';
+import React, { useState } from 'react';
 import { TranslationFunction } from '../types';
 
 import { CardCarousel, IconButton, StatChip, SaveChip, Button } from '../ui';
-import { SpecLine, EcoLine, DropChip, PercentChip, ZeroDownChip, cardSpec, fmtRate } from './cardParts';
+import {
+  SpecLine,
+  EcoLine,
+  DropChip,
+  PercentChip,
+  ZeroDownChip,
+  OfferBadge,
+  PriceTabs,
+  PriceHero,
+  PriceMeter,
+  CardCtaRow,
+  GalleryCounter,
+  cardSpec,
+  PaymentMode,
+  ratingTone,
+  callDealerSalesPhone,
+} from './cardParts';
 import { AutobahnCar } from './types';
 
 export interface CarCardProps {
@@ -40,18 +56,50 @@ export interface CarCardProps {
    * Rendered as a quiet button at the card foot; the page decides visibility (JWT claim).
    */
   adminAction?: { label: string; onClick: () => void };
+  /**
+   * Mobile CTA row (Figma: Angebot anfragen / phone / Rate anpassen) — omitted entirely when
+   * the page hasn't wired these yet (same optional pattern as adminAction), so pages migrate
+   * one at a time instead of all breaking at once.
+   */
+  onRequestOffer?: () => void;
+  onCall?: () => void;
+  /**
+   * opens the shared FinanceDetailsModal "Rate anpassen" sheet for this car (page-owned) —
+   * receives the tab the card was showing (Finanzierung/Leasing/Kaufen) so the sheet opens on
+   * the same one.
+   */
+  onOpenRateAdjust?: (mode: PaymentMode) => void;
 }
 
-const CarCard: React.FunctionComponent<CarCardProps> = ({ car, isFavorite, onToggleFavorite, onOpen, onMediaEnter, t, adminAction }) => {
+const CarCard: React.FunctionComponent<CarCardProps> = ({
+  car,
+  isFavorite,
+  onToggleFavorite,
+  onOpen,
+  onMediaEnter,
+  t,
+  adminAction,
+  onRequestOffer,
+  onCall,
+  onOpenRateAdjust,
+}) => {
+  const [mode, setMode] = useState<PaymentMode>('financing');
+  const [photoIndex, setPhotoIndex] = useState(0);
   const showSave = car.savings != null && car.savings > 600;
+  const showOfferBadge = !!(car.isNew || car.drop != null || showSave || car.dropPct != null || car.zeroDown);
   return (
     <article
       className="mcard mcard--interactive cc-card"
       onClick={() => onOpen(car)}
       style={{ display: 'flex', flexDirection: 'column' }}
     >
-      <div className="cc-media" style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
-        <CardCarousel images={car.gallery} height="100%" fit="contain" />
+      <div
+        className="cc-media"
+        style={{ position: 'relative' }}
+        onMouseEnter={onMediaEnter}
+        onTouchStart={onMediaEnter}
+      >
+        <CardCarousel images={car.gallery} height="100%" fit="contain" onChange={setPhotoIndex} />
         {/* max two overlays: heart + ONE deal signal — rating moved next to the price */}
         <div
           style={{ position: 'absolute', top: 6, right: 6, zIndex: 3 }}
@@ -59,18 +107,36 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({ car, isFavorite, onTog
         >
           <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
         </div>
-        {/* top-left signal stack (heart is top-right): NEU badge + ONE deal signal.
-            DropChip takes precedence over SaveChip; each only renders when its real data exists. */}
-        {(car.isNew || car.drop != null || showSave || car.dropPct != null || car.zeroDown) && (
+        {/* top-left signal stack (heart is top-right): NEU badge + ONE deal signal + the
+            "⚡ Angebot" badge (own line, Figma) below it. DropChip takes precedence over
+            SaveChip; each only renders when its real data exists. */}
+        {(showOfferBadge || car.dropPct != null) && (
           <div
-            style={{ position: 'absolute', top: 10, left: 10, zIndex: 3, display: 'flex', flexWrap: 'nowrap', gap: 5, alignItems: 'center', maxWidth: 'calc(100% - 52px)' }}
+            style={{
+              position: 'absolute',
+              top: 10,
+              left: 10,
+              zIndex: 3,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+              gap: 5,
+              maxWidth: 'calc(100% - 52px)',
+            }}
           >
-            {car.isNew && <span className="neu-badge">NEU</span>}
-            {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
-            <ZeroDownChip t={t} show={car.zeroDown} />
-            <PercentChip pct={car.dropPct} />
+            <div style={{ display: 'flex', flexWrap: 'nowrap', gap: 5, alignItems: 'center' }}>
+              {car.isNew && <span className="neu-badge">NEU</span>}
+              {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
+              <ZeroDownChip t={t} show={car.zeroDown} />
+              <PercentChip pct={car.dropPct} />
+            </div>
+            <OfferBadge show={showOfferBadge} t={t} />
           </div>
         )}
+        {/* bottom-left: expand icon + "current|total" photo counter (Figma) */}
+        <div style={{ position: 'absolute', bottom: 10, left: 10, zIndex: 3 }}>
+          <GalleryCounter current={photoIndex + 1} total={car.photos} />
+        </div>
       </div>
       <div style={{ padding: '12px 14px 14px', display: 'flex', flexDirection: 'column', gap: 9, flex: 1 }}>
         <div>
@@ -83,75 +149,33 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({ car, isFavorite, onTog
         </div>
         <SpecLine items={cardSpec(car)} oneLine />
         <div style={{ flex: 1 }} />
-        <div style={{ marginTop: 4 }}>
-          {/* rate block: payment-path eyebrow (cheaper of financing/leasing) ABOVE the big
-              monthly rate; Preisbewertung chip kept on the right, centered on the block. */}
-          {(() => {
-            const useLease = car.lease != null && (car.lease as number) < car.monthly;
-            const rate = useLease ? (car.lease as number) : car.monthly;
-            const rateLabel = t(useLease ? 'autobahn:card.price.leasingFrom' : 'autobahn:card.price.financingFrom');
-            return (
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
-                <div style={{ minWidth: 0 }}>
-                  <div
-                    className="md-label-sm"
-                    style={{
-                      textTransform: 'uppercase',
-                      letterSpacing: '.5px',
-                      fontWeight: 700,
-                      fontSize: 10.5,
-                      color: 'var(--md-on-surface-variant)',
-                      lineHeight: 1.4,
-                    }}
-                  >
-                    {rateLabel}
-                  </div>
-                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
-                    <span
-                      className="num"
-                      style={{
-                        fontWeight: 700,
-                        fontSize: 26,
-                        color: 'var(--md-primary)',
-                        letterSpacing: '-.6px',
-                        whiteSpace: 'nowrap',
-                      }}
-                    >
-                      {fmtRate(rate)} €
-                    </span>
-                    <span className="md-label-sm">{t('autobahn:card.price.perMonth')}</span>
-                  </div>
-                </div>
-                {car.rating && (
-                  <StatChip
-                    tone={car.rating === 'fair' ? 'warn' : 'good'}
-                    icon={car.rating === 'fair' ? 'minus' : 'check'}
-                  >
-                    {t('autobahn:tier.' + car.rating)}
-                  </StatChip>
-                )}
-              </div>
-            );
-          })()}
-          <div className="md-label-sm" style={{ marginTop: 2, display: 'flex', flexWrap: 'wrap', gap: '0 6px' }}>
-            <span style={{ whiteSpace: 'nowrap' }}>
-              {t('autobahn:card.price.purchasePrice')}{' '}
-              <b style={{ color: 'var(--md-on-surface)' }}>{car.price.toLocaleString('de-DE')} €</b>
-            </span>
-            {showSave && car.listPrice != null && (
-              <span
-                style={{
-                  color: 'var(--md-on-surface-variant)',
-                  textDecoration: 'line-through',
-                  whiteSpace: 'nowrap',
-                }}
+        <div className="cc-price" style={{ marginTop: 4, borderTop: '1px solid var(--md-outline-variant)', paddingTop: 10 }}>
+          <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} />
+            {car.rating && (
+              <StatChip
+                tone={ratingTone(car.rating)}
+                icon={ratingTone(car.rating) === 'good' ? 'check' : 'minus'}
               >
-                {car.listPrice.toLocaleString('de-DE')} €
-              </span>
+                {t('autobahn:tier.' + car.rating)}
+              </StatChip>
             )}
           </div>
+          <PriceMeter car={car} t={t} />
         </div>
         <EcoLine t={t} car={car} style={{ marginTop: 8 }} />
+        {/* Mobile-only row (CardCtaRow itself carries the show-mobile class) — always
+            rendered, with real fallbacks the page can override once it wires its own
+            handlers (e.g. the "Rate anpassen" FinanceDetailsModal sheet). Never hidden. */}
+        <CardCtaRow
+          car={car}
+          mode={mode}
+          onRequestOffer={onRequestOffer || (() => onOpen(car))}
+          onCall={onCall || callDealerSalesPhone}
+          onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
+          t={t}
+        />
         {adminAction && (
           <div style={{ marginTop: 8 }}>
             <Button

package/cards/CarRow.tsx

@@ -18,11 +18,26 @@
 //    no className prop) so the scoped `.pp-cta` margin / responsive rules and the
 //    `.pp-cta + .pp-activity` adjacency in md3.css still apply.
 
-import React from 'react';
+import React, { useState } from 'react';
 import { TranslationFunction } from '../types';
 
-import { CardCarousel, IconButton, SaveChip, Button, Icon } from '../ui';
-import { EcoLine, PricePaths, PriceKauf, PriceMeter, PpActivity, GalleryBadges, DropChip, PercentChip, ZeroDownChip, fmtKm } from './cardParts';
+import { CardCarousel, IconButton, SaveChip, Button, Icon, StatChip } from '../ui';
+import {
+  EcoLine,
+  PriceMeter,
+  PpActivity,
+  GalleryBadges,
+  GalleryCounter,
+  OfferBadge,
+  PriceTabs,
+  PriceHero,
+  DropChip,
+  PercentChip,
+  ZeroDownChip,
+  fmtKm,
+  PaymentMode,
+  ratingTone,
+} from './cardParts';
 import { AutobahnCar } from './types';
 
 export interface CarRowProps {
@@ -46,7 +61,10 @@ export interface CarRowProps {
 }
 
 const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggleFavorite, onOpen, onMediaEnter, t, adminAction }) => {
+  const [mode, setMode] = useState<PaymentMode>('financing');
+  const [photoIndex, setPhotoIndex] = useState(0);
   const showSave = car.savings != null && car.savings > 600;
+  const showOfferBadge = !!(car.isNew || car.drop != null || showSave || car.dropPct != null || car.zeroDown);
   const facts: Array<[icon: string, value: string]> = [
     ['gauge', fmtKm(car.km)],
     ['calendar', t('autobahn:card.specs.firstRegistration', { reg: car.reg })],
@@ -66,9 +84,10 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
       style={{ background: 'var(--md-sc-lowest)' }}
     >
       <div className="listcard-media" style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
-        <CardCarousel images={car.gallery} height="100%" fit="contain" />
-        {/* deal badges — ONE compact line: NEU · −€ · 0 € Anz. · −%. The price RATING
-            ('Guter Preis') is NOT here — it lives in the price column (PricePaths meter). */}
+        <CardCarousel images={car.gallery} height="100%" fit="contain" onChange={setPhotoIndex} />
+        {/* deal badges — ONE compact line: NEU · −€ · 0 € Anz. · −%, plus the "⚡ Angebot" badge
+            (Figma) on its own line below. The price RATING ('Guter Preis') is NOT here — it
+            lives in the price column (PriceMeter). */}
         <div
           style={{
             position: 'absolute',
@@ -77,22 +96,23 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
             right: 10,
             zIndex: 3,
             display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'nowrap',
-            alignItems: 'center',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
             gap: 5,
           }}
         >
-          {car.isNew && <span className="neu-badge">NEU</span>}
-          {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
-          <ZeroDownChip t={t} show={car.zeroDown} compact />
-          <PercentChip pct={car.dropPct} />
+          <div style={{ display: 'flex', flexWrap: 'nowrap', alignItems: 'center', gap: 5 }}>
+            {car.isNew && <span className="neu-badge">NEU</span>}
+            {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
+            <ZeroDownChip t={t} show={car.zeroDown} compact />
+            <PercentChip pct={car.dropPct} />
+          </div>
+          <OfferBadge show={showOfferBadge} t={t} />
         </div>
-        <div style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
-          <span className="imglabel">
-            <Icon name="image" size={13} />
-            {car.photos}
-          </span>
+        {/* bottom-left: expand icon + "current|total" (Figma) — replaces the old plain photo-count
+            pill; GalleryBadges (eye/heart/trust) keeps its own spot bottom-right, unchanged. */}
+        <div style={{ position: 'absolute', bottom: 10, left: 10, zIndex: 3 }}>
+          <GalleryCounter current={photoIndex + 1} total={car.photos} />
         </div>
         <div
           onClick={(e) => e.stopPropagation()}
@@ -140,14 +160,20 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
         <EcoLine t={t} car={car} />
       </div>
 
-      {/* price column, two groups: monthly rates on top (Finanzierung is the big-blue focus,
-          Leasing quiet), then a divider and the purchase group (Kaufen + meter + CTA) anchored to
-          the bottom (margin-top:auto) — so only ONE price stands out and the CTA sits flush at the
-          foot with no trailing gap. */}
+      {/* price column: Finanzierung/Leasing/Kaufen tabs pick ONE hero price (same tabbed
+          component the grid CarCard uses), then the fixed Preisbewertung meter and the CTA,
+          anchored to the bottom (margin-top:auto) so the button sits flush at the foot. */}
       <div className="listcard-price">
-        <PricePaths t={t} car={car} />
+        <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
         <div className="pp-purchase">
-          <PriceKauf t={t} car={car} />
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+            <PriceHero car={car} mode={mode} t={t} />
+            {car.rating && (
+              <StatChip tone={ratingTone(car.rating)} icon={ratingTone(car.rating) === 'good' ? 'check' : 'minus'}>
+                {t('autobahn:tier.' + car.rating)}
+              </StatChip>
+            )}
+          </div>
           <PriceMeter t={t} car={car} />
           <div className="pp-cta">
             <Button

package/cards/cardParts.tsx

@@ -18,9 +18,12 @@ import React from 'react';
 import { TranslationFunction } from '../types';
 import { defaultConfig } from '@bytebrand/fe-financing';
 
-import { Icon } from '../ui';
-import { CO2_CLASSES, CO2_COLORS, TIER_COLORS, TIER_KEYS } from '../constants';
+import { Icon, Button } from '../ui';
+import { DocCheckIcon } from '../vdp/FinanceCalculator';
+import { CO2_CLASSES, CO2_COLORS } from '../constants';
 import { AutobahnCar } from './types';
+// pure, non-React — shared with the Meta AIA marketing-image renderer (a plain Node service).
+export { ratingTone } from '../data/toAutobahnCar';
 
 // Default financing/leasing terms shown under the rate (the SRP card has no per-car selector, so
 // these are the same default config the displayed rate is computed with — consistent, not invented).
@@ -244,6 +247,22 @@ export const ZeroDownChip: React.FunctionComponent<{ show?: boolean; compact?: b
   );
 };
 
+/**
+ * "⚡ Angebot" gray badge — NOT a separate backend flag (none exists yet). Shown whenever the
+ * card already carries a real deal signal (NEU / price drop / meaningful savings / 0€ Anzahlung
+ * / percent drop) — i.e. it labels the same real discount the other badges point at, rather
+ * than inventing a new "is this an offer" field. Revisit if/when a dedicated flag exists.
+ */
+export const OfferBadge: React.FunctionComponent<{ show: boolean; t: TranslationFunction }> = ({ show, t }) => {
+  if (!show) return null;
+  return (
+    <span className="offer-badge">
+      <Icon name="zap" size={13} stroke={2.2} />
+      {t('autobahn:card.badge.offer')}
+    </span>
+  );
+};
+
 interface InlineClsProps {
   /** CO₂ class letter, e.g. 'B'. */
   c: string;
@@ -328,52 +347,204 @@ export interface PricePathsProps {
 const TONE_TO_TIER: Record<string, number> = { top: 0, good: 1, fair: 2, raised: 3, high: 4 };
 
 /**
- * Segmented Preisbewertung meter + label. Extracted from PricePaths so the SRP price
- * column (Option A layout) can pin it to the BOTTOM of the column, separate from the
- * grouped price figures at the top. Renders nothing when there is no rating/band
+ * Continuous Preisbewertung gradient bar + knob (Figma: green→yellow→orange→red rail with a
+ * small circular marker at the car's position — no text label, since the tier is already named
+ * by the StatChip pill next to the price). Renders nothing when there is no rating/band
  * (needs-data: we never draw a fake market position).
  */
-export const PriceMeter: React.FunctionComponent<{ car: AutobahnCar; t: TranslationFunction }> = ({ car, t }) => {
+export const PriceMeter: React.FunctionComponent<{ car: AutobahnCar; t: TranslationFunction }> = ({ car }) => {
   const hasMarket =
     car.marketLow != null && car.marketAvg != null && car.marketHigh != null && car.marketHigh > car.marketLow;
-  const seg = (tier: number) => (
-    <div className="pp-meter">
-      {[0, 1, 2, 3, 4].map((s) => (
-        <span key={s} className="pp-seg" style={{ background: TIER_COLORS[s], opacity: s === tier ? 1 : 0.26 }} />
-      ))}
+  const knob = (tier: number) => (
+    <div className="pp-bar">
+      <span className="pp-bar-dot" style={{ left: `${Math.max(4, Math.min(96, (tier / 4) * 100))}%` }} />
     </div>
   );
   if (hasMarket) {
-    const delta = car.marketAvg! - car.price;
-    const good = delta > 150;
     const mpos = Math.max(0, Math.min(1, (car.price - car.marketLow!) / (car.marketHigh! - car.marketLow!)));
-    return (
-      <div className="pp-meter-block">
-        {seg(Math.round(mpos * 4))}
-        <span className={'pp-mlabel' + (good ? ' pp-mlabel--good' : '')}>
-          {good
-            ? t('autobahn:card.pricing.belowMarket', { delta: delta.toLocaleString('de-DE') })
-            : t('autobahn:card.pricing.marketPrice')}
-        </span>
-      </div>
-    );
+    return knob(mpos * 4);
   }
   if (car.rating && TONE_TO_TIER[car.rating] != null) {
     // No market BAND yet, but the real Preisbewertung tier (same signal as the rating chip)
-    // drives the segmented position meter. Real data, not faked.
-    const tier = TONE_TO_TIER[car.rating];
-    return (
-      <div className="pp-meter-block">
-        {seg(tier)}
-        <span className={'pp-mlabel' + (tier <= 1 ? ' pp-mlabel--good' : '')}>
-          {TIER_KEYS[tier] ? t('autobahn:tier.' + TIER_KEYS[tier]) : t('autobahn:card.pricing.marketPrice')}
-        </span>
-      </div>
-    );
+    // drives the gradient knob position. Real data, not faked.
+    return knob(TONE_TO_TIER[car.rating]);
   }
   return null;
 };
 
+export type PaymentMode = 'financing' | 'leasing' | 'buy';
+
+export interface PriceTabsProps {
+  car: AutobahnCar;
+  mode: PaymentMode;
+  onModeChange: (mode: PaymentMode) => void;
+  t: TranslationFunction;
+}
+
+/**
+ * Finanzierung / Leasing / Kaufen tab row — reuses the exact `.fin-tabs`/`.fin-tab` classes
+ * the VDP's FinanceCalculator already renders (md3.css), so the card's tabs are visually
+ * identical to the VDP's, not a second tab style. Leasing tab omitted when the car isn't
+ * leasing-eligible (car.lease undefined) — same rule PricePaths already used.
+ */
+export const PriceTabs: React.FunctionComponent<PriceTabsProps> = ({ car, mode, onModeChange, t }) => {
+  const tabs: Array<[PaymentMode, string]> = [
+    ['financing', t('autobahn:finance.mode.financing')],
+    ...(car.lease != null ? ([['leasing', t('autobahn:finance.mode.leasing')]] as Array<[PaymentMode, string]>) : []),
+    ['buy', t('autobahn:card.price.buy')],
+  ];
+  return (
+    <div className="fin-tabs" role="tablist" onClick={(e) => e.stopPropagation()}>
+      {tabs.map(([m, label]) => (
+        <button
+          key={m}
+          type="button"
+          role="tab"
+          aria-selected={mode === m}
+          className={'fin-tab' + (mode === m ? ' on' : '')}
+          onClick={() => onModeChange(m)}
+        >
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export interface PriceHeroProps {
+  car: AutobahnCar;
+  mode: PaymentMode;
+  t: TranslationFunction;
+}
+
+/**
+ * Hero price for the active tab — Finanzierung/Leasing show a monthly rate ("z.B. … €/mtl.")
+ * with its own real struck-through old rate (getFinancing/getLeasing `oldMonthlyInstallment`,
+ * same isStrikeShown gate as everywhere else); Kaufen shows the flat purchase price struck
+ * against the real list price (car.listPrice, already used elsewhere on the card). The
+ * superscript footnote markers (¹ price, ² struck reference, ³ "/mtl.") match the Figma card —
+ * their legal text lives in the page's own footnote block, not duplicated per-card.
+ */
+export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode, t }) => {
+  const isMoney = mode === 'buy';
+  const value = mode === 'financing' ? car.monthly : mode === 'leasing' ? (car.lease as number) : car.price;
+  const oldValue = mode === 'financing' ? car.oldMonthly : mode === 'leasing' ? car.oldLease : car.listPrice;
+  const showOld = oldValue != null && oldValue > value;
+  return (
+    <div className="pp-hero">
+      {!isMoney && <div className="pp-eyebrow">{t('autobahn:finance.exampleLabel')}</div>}
+      <div className="pp-hero-rate">
+        {showOld && (
+          <span className="pp-hero-old">
+            {(oldValue as number).toLocaleString('de-DE')} €<sup>2</sup>
+          </span>
+        )}
+        <b className="num pp-hero-val">
+          {isMoney ? value.toLocaleString('de-DE') : fmtRate(value)} €<sup>1</sup>
+        </b>
+        {!isMoney && (
+          <span className="pp-hero-unit">
+            {t('autobahn:card.price.perMonth')}
+            <sup>3</sup>
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Same real sales number VehicleDetailedNextPage.tsx (VDP) already dials via its own onCall —
+// duplicated here (not imported) because that page doesn't export it; both should eventually
+// read from one shared constant.
+export const DEALER_SALES_PHONE = '0800 40 30 182';
+
+/** default onCall — dials the real sales number directly, same tel: pattern VDP uses. */
+export function callDealerSalesPhone(): void {
+  if (typeof window !== 'undefined') window.location.href = `tel:${DEALER_SALES_PHONE.replace(/\s/g, '')}`;
+}
+
+export interface CardCtaRowProps {
+  car: AutobahnCar;
+  /** which payment tab is currently active on the card — forwarded to onOpenRateAdjust so the
+   *  sheet opens on the SAME tab the user was looking at (the tab itself is CarCard-internal
+   *  state, so this is the only way the page learns it). */
+  mode: PaymentMode;
+  /** primary CTA — mirrors FinanceCalculator's onSecure ("Angebot anfragen"). */
+  onRequestOffer: () => void;
+  /** phone CTA — mirrors FinanceCalculator's onCall. */
+  onCall: () => void;
+  /**
+   * opens the SAME "Rate anpassen" bottom-sheet FinanceDetailsModal already used on VDP mobile
+   * (VdpModules.tsx) — the page mounts one shared modal instance and passes this car's data,
+   * this button never builds its own sheet.
+   */
+  onOpenRateAdjust: (mode: PaymentMode) => void;
+  t: TranslationFunction;
+}
+
+/**
+ * Mobile-only 3-button CTA row (Figma: Angebot anfragen / phone / Rate anpassen). Desktop card
+ * has no CTA row at all (confirmed: mobile-only, per explicit user correction). "Rate anpassen"
+ * keeps its text label — only the phone button is icon-only, matching the mockup.
+ */
+export const CardCtaRow: React.FunctionComponent<CardCtaRowProps> = ({ car, mode, onRequestOffer, onCall, onOpenRateAdjust, t }) => (
+  <div className="card-cta-row show-mobile" style={{ display: 'flex', gap: 8, marginTop: 10 }}>
+    <Button
+      variant="filled"
+      style={{ flex: 2 }}
+      onClick={(e) => {
+        e.stopPropagation();
+        onRequestOffer();
+      }}
+    >
+      <DocCheckIcon size={16} />
+      {t('autobahn:finance.secureOffer')}
+    </Button>
+    <Button
+      variant="outlined"
+      icon="phone"
+      style={{ flex: 'none', width: 44, padding: 0 }}
+      onClick={(e) => {
+        e.stopPropagation();
+        onCall();
+      }}
+    />
+    <Button
+      variant="outlined"
+      icon="sliders-horizontal"
+      style={{ flex: 1.5 }}
+      onClick={(e) => {
+        e.stopPropagation();
+        onOpenRateAdjust(mode);
+      }}
+    >
+      {t('autobahn:finance.adjustRate')}
+    </Button>
+  </div>
+);
+
+export interface GalleryCounterProps {
+  /** 1-based index of the currently shown photo. */
+  current: number;
+  total: number;
+}
+
+/**
+ * Bottom-left gallery overlay: expand icon + "current|total" (Figma). Reuses the existing
+ * `.imglabel` pill style (already used for the list-card's photo-count badge) rather than a new
+ * class — same dark translucent pill, just with the maximize icon instead of the image icon.
+ * Hidden with 0/1 photos (nothing to expand into).
+ */
+export const GalleryCounter: React.FunctionComponent<GalleryCounterProps> = ({ current, total }) => {
+  if (total <= 1) return null;
+  return (
+    <span className="imglabel">
+      <Icon name="maximize" size={13} stroke={2} />
+      {current}|{total}
+    </span>
+  );
+};
+
 interface PpRowProps {
   /** payment-path label (Finanzierung / Leasing / Kaufen). */
   label: string;

package/cards/index.ts

@@ -23,6 +23,14 @@ export {
   PriceMeter,
   PpActivity,
   GalleryBadges,
+  OfferBadge,
+  PriceTabs,
+  PriceHero,
+  CardCtaRow,
+  GalleryCounter,
+  ratingTone,
+  DEALER_SALES_PHONE,
+  callDealerSalesPhone,
 } from './cardParts';
 export type {
   SpecLineProps,
@@ -32,6 +40,11 @@ export type {
   PricePathsProps,
   PpActivityProps,
   GalleryBadgesProps,
+  PaymentMode,
+  PriceTabsProps,
+  PriceHeroProps,
+  CardCtaRowProps,
+  GalleryCounterProps,
 } from './cardParts';
 
 export type { AutobahnCar, AutobahnPhev } from './types';