@bytebrand/fe-ui-core-autobahn 1.0.58 → 1.0.60

package/cards/CarRow.tsx

@@ -31,6 +31,8 @@ import {
   OfferBadge,
   PriceTabs,
   PriceHero,
+  PricePaths,
+  PriceKauf,
   DropChip,
   PercentChip,
   ZeroDownChip,
@@ -104,7 +106,8 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
           <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 />
+            <ZeroDownChip t={t} show={car.zeroDown} compact className="show-mobile" />
+            <ZeroDownChip t={t} show={car.zeroDown} className="hide-mobile" />
             <PercentChip pct={car.dropPct} />
           </div>
           <OfferBadge show={showOfferBadge} t={t} />
@@ -121,6 +124,14 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
         >
           <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
         </div>
+        {/* desktop: heart sits on the photo itself (Figma "mcard"), not next to the title. */}
+        <div
+          onClick={(e) => e.stopPropagation()}
+          className="hide-mobile"
+          style={{ position: 'absolute', top: 10, right: 10, zIndex: 3 }}
+        >
+          <IconButton name="heart" active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
+        </div>
         {/* activity/trust badges — overlaid on the studio-white floor at the bottom of the photo
             itself (PM ref), not a separate divided strip below it. Bottom-right, raised above the
             carousel dots and the photo-count badge (positioning lives in .gallery-badges, md3.css). */}
@@ -128,17 +139,12 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
       </div>
 
       <div className="listcard-info">
-        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
-          <div style={{ minWidth: 0 }}>
-            <div className="md-title" style={{ fontSize: 18, lineHeight: 1.2 }}>
-              {car.make} {car.model}
-            </div>
-            <div className="md-body-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-              {car.trim}
-            </div>
+        <div style={{ minWidth: 0 }}>
+          <div className="md-title" style={{ fontSize: 18, lineHeight: 1.2 }}>
+            {car.make} {car.model}
           </div>
-          <div onClick={(e) => e.stopPropagation()} className="hide-mobile">
-            <IconButton name="heart" active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
+          <div className="md-body-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {car.trim}
           </div>
         </div>
         <div className="specstrip">
@@ -160,12 +166,13 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
         <EcoLine t={t} car={car} />
       </div>
 
-      {/* 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. */}
+      {/* price column — mobile keeps the Finanzierung/Leasing/Kaufen tab switcher (ONE hero price
+          at a time); desktop shows all three payment paths stacked at once (Figma "mcard"), via
+          the previously-unused PricePaths/PriceKauf pair. Both variants share the same
+          Preisbewertung meter + CTA, anchored to the bottom (margin-top:auto on .pp-purchase). */}
       <div className="listcard-price">
-        <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
-        <div className="pp-purchase">
+        <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} className="show-mobile" />
+        <div className="pp-purchase show-mobile">
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
             <PriceHero car={car} mode={mode} t={t} />
             {car.rating && (
@@ -204,6 +211,49 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
           )}
           <PpActivity t={t} car={car} />
         </div>
+
+        <PricePaths car={car} t={t} className="hide-mobile" />
+        <div className="pp-purchase hide-mobile">
+          <PriceKauf car={car} t={t} />
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            {car.rating && (
+              <StatChip tone={ratingTone(car.rating)} icon={ratingTone(car.rating) === 'good' ? 'check' : 'minus'}>
+                {t('autobahn:tier.' + car.rating)}
+              </StatChip>
+            )}
+            <div style={{ flex: 1 }}>
+              <PriceMeter t={t} car={car} />
+            </div>
+          </div>
+          <div className="pp-cta">
+            <Button
+              variant="filled"
+              block
+              iconRight="arrow-right"
+              onClick={(e) => {
+                e.stopPropagation();
+                onOpen(car);
+              }}
+            >
+              {t('autobahn:card.cta.viewOffer')}
+            </Button>
+          </div>
+          {adminAction && (
+            <div className="pp-cta">
+              <Button
+                variant="outlined"
+                block
+                onClick={(e) => {
+                  e.stopPropagation();
+                  adminAction.onClick();
+                }}
+              >
+                {adminAction.label}
+              </Button>
+            </div>
+          )}
+          <PpActivity t={t} car={car} />
+        </div>
       </div>
     </article>
   );

package/cards/cardParts.tsx

@@ -234,14 +234,18 @@ export const PercentChip: React.FunctionComponent<{ pct?: number }> = ({ pct })
  * there is room (grid cards / wide image) and uses the compact "0 € Anz." on the narrow list-card
  * image, so the badge row always stays on ONE line on both desktop and mobile.
  */
-export const ZeroDownChip: React.FunctionComponent<{ show?: boolean; compact?: boolean; t: TranslationFunction }> = ({
-  show,
-  compact,
-  t,
-}) => {
+export const ZeroDownChip: React.FunctionComponent<{
+  show?: boolean;
+  compact?: boolean;
+  t: TranslationFunction;
+  className?: string;
+}> = ({ show, compact, t, className }) => {
   if (!show) return null;
   return (
-    <span style={{ ...dealPill, background: 'var(--md-accent-container)', color: 'var(--md-on-accent-container)' }}>
+    <span
+      className={className}
+      style={{ ...dealPill, background: 'var(--md-accent-container)', color: 'var(--md-on-accent-container)' }}
+    >
       {compact ? t('autobahn:card.price.zeroDownCompact') : t('autobahn:card.price.zeroDown')}
     </span>
   );
@@ -341,6 +345,8 @@ export const EcoLine: React.FunctionComponent<EcoLineProps> = ({ car, style, t }
 export interface PricePathsProps {
   car: AutobahnCar;
   t: TranslationFunction;
+  /** extra class appended to the root (e.g. the SRP card's desktop-only `hide-mobile` marker). */
+  className?: string;
 }
 
 /** Map the AutobahnCar rating tone → meter segment index (0 best … 4 worst). */
@@ -379,6 +385,8 @@ export interface PriceTabsProps {
   mode: PaymentMode;
   onModeChange: (mode: PaymentMode) => void;
   t: TranslationFunction;
+  /** extra class appended to the root (e.g. the SRP card's mobile-only `show-mobile` marker). */
+  className?: string;
 }
 
 /**
@@ -387,14 +395,14 @@ export interface PriceTabsProps {
  * 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 }) => {
+export const PriceTabs: React.FunctionComponent<PriceTabsProps> = ({ car, mode, onModeChange, t, className }) => {
   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()}>
+    <div className={'fin-tabs' + (className ? ' ' + className : '')} role="tablist" onClick={(e) => e.stopPropagation()}>
       {tabs.map(([m, label]) => (
         <button
           key={m}
@@ -589,7 +597,7 @@ const PpRow: React.FunctionComponent<PpRowProps> = ({ label, value, unit, old, f
  * is omitted entirely when leasing isn't active. The Kaufen row is rendered separately
  * (PriceKauf) below a divider so only the financing rate stands out — no wall of blue prices.
  */
-export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t }) => {
+export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, className }) => {
   const hasLease = car.lease != null;
   // Terms of the config the displayed rate was actually computed with (per-car:
   // dealer rate + the user's saved localStorage adjustments) — default config
@@ -601,20 +609,34 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t })
   const leasMonths = car.leaseMonths ?? _leasPeriod;
   const hasLeasTerms = Boolean(leasMileage && leasMonths);
   const leasMileageStr = leasMileage ? Number(leasMileage).toLocaleString('de-DE') : '';
+  // same real struck-through reference rate PriceHero shows for the financing tab (oldMonthly) —
+  // shown here too now that both rows render at once instead of behind a tab.
+  const showOldMonthly = car.oldMonthly != null && car.oldMonthly > car.monthly;
   return (
-    <div className="pricepaths">
+    <div className={'pricepaths' + (className ? ' ' + className : '')}>
       <div className="pp-hero">
         <div className="pp-eyebrow">{t('autobahn:card.price.financingFrom')}</div>
         <div className="pp-hero-rate">
-          <b className="num pp-hero-val">{fmtRate(car.monthly)} €</b>
-          <span className="pp-hero-unit">{t('autobahn:card.price.perMonth')}</span>
+          {showOldMonthly && (
+            <span className="pp-hero-old">
+              {(car.oldMonthly as number).toLocaleString('de-DE')} €<sup>2</sup>
+            </span>
+          )}
+          <b className="num pp-hero-val">
+            {fmtRate(car.monthly)} €<sup>1</sup>
+          </b>
+          <span className="pp-hero-unit">
+            {t('autobahn:card.price.perMonth')}
+            <sup>3</sup>
+          </span>
         </div>
         <div className="pp-hero-terms">
           {t('autobahn:card.price.financeTerms', {
             firstInstallment: finFirstInstallment,
             months: finMonths,
             count: finMonths,
-          })}
+          })}{' '}
+          · <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
         </div>
       </div>
       {hasLease && (
@@ -622,7 +644,8 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t })
           <PpRow label={t('autobahn:card.price.leasing')} value={car.lease as number} unit="mtl." />
           {hasLeasTerms && (
             <div className="pp-sub-terms">
-              {t('autobahn:card.price.leaseTerms', { mileage: leasMileageStr, months: leasMonths })}
+              {t('autobahn:card.price.leaseTerms', { mileage: leasMileageStr, months: leasMonths })}{' '}
+              · <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
             </div>
           )}
         </div>

package/chrome/TopBar.tsx

@@ -466,8 +466,8 @@ const TopBar: React.FunctionComponent<TopBarProps> = ({
       }}
     >
       <div
-        className="container"
-        style={{ height: 64, display: 'flex', alignItems: 'center', gap: 16, padding: '0 16px' }}
+        className="container topbar-container"
+        style={{ height: 64, display: 'flex', alignItems: 'center', gap: 16 }}
       >
         {/* mobile hamburger */}
         <button
@@ -481,7 +481,7 @@ const TopBar: React.FunctionComponent<TopBarProps> = ({
 
         {/* full navigation — '/' belongs to WordPress behind traefik, not the SPA (see HOME_PATH). */}
         <a href={HOME_PATH} style={{ flex: 'none', display: 'inline-flex' }}>
-          <img src={logoUrl} height="32" style={{ cursor: 'pointer', display: 'block' }} alt="auto.de" />
+          <img src={logoUrl} height="32" className="topbar-logo" style={{ cursor: 'pointer', display: 'block' }} alt="auto.de" />
         </a>
 
         {renderNav('hide-mobile', {
@@ -493,64 +493,68 @@ const TopBar: React.FunctionComponent<TopBarProps> = ({
 
         <div style={{ flex: 1 }} />
 
-        <IconButton name="search" label={t('autobahn:chrome.search')} onClick={goSearch} />
-        {/* Merkliste → /favourites with a real count badge — desktop-only now; the mobile row
-            below shows it ONLY for the 'browsing' variant instead. */}
-        <span className="hide-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
-          <IconButton name="heart" label={t('autobahn:chrome.favorites')} onClick={() => goRoute(R_FAVOURITES)} />
-          {favoritesCount > 0 && (
-            <span style={badgeStyle}>{favoritesCount}</span>
-          )}
-        </span>
-        {/* Suchaufträge → /my-searches (saved searches list) — desktop-only; no Figma mobile
-            header variant includes a bell icon. */}
-        <span className="hide-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
-          <IconButton name="bell" label={t('autobahn:chrome.savedSearches')} onClick={() => goRoute(R_SAVED_SEARCHES)} />
-          {notificationCount > 0 && (
-            <span style={badgeStyle}>{notificationCount}</span>
-          )}
-        </span>
-
-        {/* Mobile-only reduced icon set — which ONE extra icon (besides search+account, both
-            always shown) appears depends on `variant`, per the 3 Figma mobile header specs. */}
-        {variant === 'browsing' && (
-          <span className="show-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
+        {/* Action icons cluster — its own (smaller) gap, separate from the outer 16px gap between
+            hamburger/logo/nav: the Header-System spec calls for ~2-6px between actions but keeps
+            the wider spacing everywhere else. */}
+        <div className="topbar-actions" style={{ display: 'flex', alignItems: 'center' }}>
+          <IconButton name="search" label={t('autobahn:chrome.search')} onClick={goSearch} />
+          {/* Merkliste → /favourites with a real count badge — desktop-only now; the mobile row
+              below shows it ONLY for the 'browsing' variant instead. */}
+          <span className="hide-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
             <IconButton name="heart" label={t('autobahn:chrome.favorites')} onClick={() => goRoute(R_FAVOURITES)} />
-            {favoritesCount > 0 && <span style={badgeStyle}>{favoritesCount}</span>}
+            {favoritesCount > 0 && (
+              <span style={badgeStyle}>{favoritesCount}</span>
+            )}
           </span>
-        )}
-        {variant === 'conversion' && (
-          <span className="show-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
-            <IconButton name="phone" label={t('autobahn:chrome.callUs')} onClick={() => goNav({ href: phoneHref })} />
+          {/* Suchaufträge → /my-searches (saved searches list) — desktop-only; no Figma mobile
+              header variant includes a bell icon. */}
+          <span className="hide-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
+            <IconButton name="bell" label={t('autobahn:chrome.savedSearches')} onClick={() => goRoute(R_SAVED_SEARCHES)} />
+            {notificationCount > 0 && (
+              <span style={badgeStyle}>{notificationCount}</span>
+            )}
           </span>
-        )}
 
-        {/* language segmented control — hidden ≤600px (the account menu carries language rows). */}
-        {onLangSelect && (
-          <div className="lang-seg hide-mobile" aria-label={t('autobahn:chrome.switchLanguage')}>
-            <button type="button" className={'lang-seg-btn' + (language !== 'en' ? ' on' : '')} onClick={() => onLangSelect('de')}>DE</button>
-            <button type="button" className={'lang-seg-btn' + (language === 'en' ? ' on' : '')} onClick={() => onLangSelect('en')}>EN</button>
-          </div>
-        )}
+          {/* Mobile-only reduced icon set — which ONE extra icon (besides search+account, both
+              always shown) appears depends on `variant`, per the 3 Figma mobile header specs. */}
+          {variant === 'browsing' && (
+            <span className="show-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
+              <IconButton name="heart" label={t('autobahn:chrome.favorites')} onClick={() => goRoute(R_FAVOURITES)} />
+              {favoritesCount > 0 && <span style={badgeStyle}>{favoritesCount}</span>}
+            </span>
+          )}
+          {variant === 'conversion' && (
+            <span className="show-mobile" style={{ position: 'relative', display: 'inline-flex' }}>
+              <IconButton name="phone" label={t('autobahn:chrome.callUs')} onClick={() => goNav({ href: phoneHref })} />
+            </span>
+          )}
 
-        {/* Konto trigger + account layer — visible at EVERY width: this menu is the only place
-            sign-out / settings / dealer switching exist, so it must never be display:none'd (the
-            pre-cutover hide-tablet left 601–980px with no logout at all). Desktop keeps the
-            tonal "Konto" pill; ≤600px it collapses to a plain icon (topbar-account-btn CSS) and
-            opens the full-width mobile Account Layer instead of the small popover. */}
-        <span style={{ position: 'relative', display: 'inline-flex' }}>
-          <button
-            className="mbtn mbtn--tonal mbtn--sm topbar-account-btn"
-            style={{ marginLeft: 4 }}
-            onClick={() => setAccount((a) => !a)}
-            aria-expanded={account}
-            aria-label={t('autobahn:chrome.account')}
-          >
-            <Icon name="user" size={18} />
-            <span className="hide-mobile">{t('autobahn:chrome.account')}</span>
-          </button>
-          {account && renderAccountMenu()}
-        </span>
+          {/* language segmented control — hidden ≤600px (the account menu carries language rows). */}
+          {onLangSelect && (
+            <div className="lang-seg hide-mobile" aria-label={t('autobahn:chrome.switchLanguage')}>
+              <button type="button" className={'lang-seg-btn' + (language !== 'en' ? ' on' : '')} onClick={() => onLangSelect('de')}>DE</button>
+              <button type="button" className={'lang-seg-btn' + (language === 'en' ? ' on' : '')} onClick={() => onLangSelect('en')}>EN</button>
+            </div>
+          )}
+
+          {/* Konto trigger + account layer — visible at EVERY width: this menu is the only place
+              sign-out / settings / dealer switching exist, so it must never be display:none'd (the
+              pre-cutover hide-tablet left 601–980px with no logout at all). Desktop keeps the
+              tonal "Konto" pill; ≤600px it collapses to a plain icon (topbar-account-btn CSS) and
+              opens the full-width mobile Account Layer instead of the small popover. */}
+          <span style={{ position: 'relative', display: 'inline-flex' }}>
+            <button
+              className="mbtn mbtn--tonal mbtn--sm topbar-account-btn"
+              onClick={() => setAccount((a) => !a)}
+              aria-expanded={account}
+              aria-label={t('autobahn:chrome.account')}
+            >
+              <Icon name="user" size={18} />
+              <span className="hide-mobile">{t('autobahn:chrome.account')}</span>
+            </button>
+            {account && renderAccountMenu()}
+          </span>
+        </div>
       </div>
 
       {account && renderMobileAccountLayer()}

package/locales/de/autobahn.json

@@ -22,7 +22,8 @@
       "perMonth": "/mtl.",
       "leasing": "Leasing",
       "leasingFrom": "Leasing ab",
-      "buy": "Kaufen"
+      "buy": "Kaufen",
+      "details": "Details"
     },
     "eco": {
       "phevConsumptionLine": "+ {{consFuel}} (gew., komb.) · {{consDis}} (entl.) · CO₂ {{co2w}} · Klasse {{co2classW}} (gew.) / {{co2classD}} (entl.)*",

package/locales/en/autobahn.json

@@ -22,7 +22,8 @@
       "perMonth": "/mo.",
       "leasing": "Leasing",
       "leasingFrom": "Leasing from",
-      "buy": "Buy"
+      "buy": "Buy",
+      "details": "Details"
     },
     "eco": {
       "phevConsumptionLine": "+ {{consFuel}} (weighted, combined) · {{consDis}} (discharged) · CO₂ {{co2w}} · Class {{co2classW}} (weighted) / {{co2classD}} (discharged)*",

package/package.json

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

@@ -3962,6 +3962,23 @@ line-height: 31px;
   background: var(--md-sc-low);
   border-radius: var(--md-r-md);
 }
+/* desktop only (mobile keeps the flex-wrap flow above, untouched): a clean 2-column grid so
+   pairs line up (km|EZ, Kraftstoff|Getriebe, Leistung|Halter) instead of reflowing by text
+   length (Figma "mcard"). Facts render in DOM order [km, EZ, Getriebe, Kraftstoff, Leistung,
+   Halter, Verfügbarkeit]; only Getriebe/Kraftstoff swap columns via `order` to land as
+   Kraftstoff|Getriebe per the mockup — the array itself stays untouched (mobile relies on it). */
+@media (min-width: 601px) {
+  .md3 .specstrip {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+  /* km/EZ/Kraftstoff pulled negative (in that order) so they sort ahead of the untouched,
+     default-order Getriebe/Leistung/Halter/Verfügbarkeit — net effect: km, EZ, Kraftstoff,
+     Getriebe, Leistung, Halter, Verfügbarkeit, i.e. only Kraftstoff hops in front of Getriebe. */
+  .md3 .specstrip > span:nth-child(1) { order: -3; }
+  .md3 .specstrip > span:nth-child(2) { order: -2; }
+  .md3 .specstrip > span:nth-child(4) { order: -1; }
+}
 /* filter rail: collapsible sections */
 .md3 .frail-group {
   border-bottom: 1px solid var(--md-outline-variant);
@@ -4199,6 +4216,9 @@ line-height: 31px;
 .md3 .pp-hero-old { font-size: 15px; color: var(--md-error); text-decoration: line-through; white-space: nowrap; }
 .md3 .pp-hero-val sup, .md3 .pp-hero-old sup, .md3 .pp-hero-unit sup { font-size: .6em; }
 .md3 .pp-hero-terms { margin-top: 9px; font-size: 11.5px; color: var(--md-on-surface-variant); }
+/* "Details" link at the end of the financing/leasing terms lines (Figma "mcard") — quiet, same
+   color as the rest of the terms line but underlined so it still reads as tappable. */
+.md3 .pp-details-link { color: var(--md-primary); text-decoration: underline; font-weight: 600; white-space: nowrap; }
 /* separator line between the financing block and the leasing row (legacy-design parity) */
 .md3 .pp-lease-row {
   margin-top: 16px;
@@ -5103,6 +5123,16 @@ line-height: 31px;
   padding: 8px 16px 16px;
 }
 
+/* Base (desktop) values for the two TopBar layout knobs the mobile Header-System spec overrides
+   below — kept as real CSS rules (not inline styles) since an inline style on the element would
+   always beat the media-query override regardless of specificity. */
+.md3 .topbar-container {
+  padding: 0 16px;
+}
+.md3 .topbar-actions {
+  gap: 16px;
+}
+
 /* mobile-only "Account Layer" sheet (TopBar) — full-width panel under the header, per the Figma
    "03 | Account Layer" mockups. .show-mobile forces display:flex (see the ≤600px override
    below) — flex-direction:column comes from the inline style on the element itself. */
@@ -5131,30 +5161,53 @@ line-height: 31px;
 /* desktop "Konto" pill collapses to a plain icon-only button on mobile — the account layer above
    replaces the small popover the pill normally opens on wider screens. */
 @media (max-width: 600px) {
+  /* "Header-System" spec dimensions (390px reference) — all scoped to the TopBar's own <header>
+     (or a dedicated class) so none of this touches .icon-btn/.mbtn/.container usage elsewhere in
+     the app (VDP gallery controls, financing modal, other pages' own containers, etc.). */
   .md3 .topbar-account-btn {
     background: transparent;
     border: 0;
     padding: 0;
-    width: 40px;
-    height: 40px;
+    /* Touch target 48×48 — WCAG 2.2 minimum is 24×24, but the spec recommends 48×48 consistently
+       for auto.de given the broad age range and high mobile share. */
+    width: 48px;
+    height: 48px;
     min-width: 0;
     border-radius: 50%;
   }
   .md3 .topbar-account-btn:hover {
     background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
   }
-  /* Mobile header icons measured against the real Figma export read visibly smaller than the
-     reference (the shared .icon-btn/.mbtn rules force 20px/18px everywhere in the app — fine
-     elsewhere, but the Figma mobile header specifically wants ~24px/22px). Scoped to icon
-     buttons INSIDE the TopBar's own <header> so it doesn't touch icon-btn/mbtn usage on other
-     pages (VDP gallery controls, financing modal, etc.). */
+  /* Visible icon glyphs 24-28px (spec range) — the shared .icon-btn/.mbtn rules force 20px/18px
+     everywhere else in the app, which is fine there but read visibly smaller than the Figma
+     mobile header reference. */
+  .md3 header .icon-btn {
+    width: 48px;
+    height: 48px;
+  }
   .md3 header .icon-btn .lucide {
     width: 24px;
     height: 24px;
   }
   .md3 header .topbar-account-btn .lucide {
-    width: 22px;
-    height: 22px;
+    width: 24px;
+    height: 24px;
+  }
+  /* Horizontal margin 12px (spec: "Horizontaler Rand"). */
+  .md3 .topbar-container {
+    padding: 0 12px;
+  }
+  /* Logo 118-126px wide (spec range) — the SVG's own aspect ratio (120:34.909) means the desktop
+     height=32 attribute renders ~110px wide, just under range; this bumps it into range on mobile
+     specifically via a CSS width override (wins over the HTML height attribute). */
+  .md3 .topbar-logo {
+    width: 122px;
+    height: auto;
+  }
+  /* Gap between action icons 2-6px (spec: "Abstand Aktionen") — separate from the wider gap the
+     hamburger/logo/nav still use (that's the outer .container's own gap, untouched here). */
+  .md3 .topbar-actions {
+    gap: 4px;
   }
 }
 /* language segmented DE|EN — active tab filled, inactive ghost */