@bytebrand/fe-ui-core-autobahn 1.0.57 → 1.0.59

package/chrome/TopBar.tsx

@@ -68,9 +68,19 @@ const Flag: React.FunctionComponent<{ code: string }> = ({ code }) =>
     </svg>
   );
 
+/** Which reduced icon set the MOBILE header row shows (≤600px) — desktop is unaffected, it always
+ *  shows the full search/heart/bell/lang/account set. Per the Figma mobile header spec:
+ *  - 'default':   search + account            ("Globaler Default Header")
+ *  - 'browsing':  search + heart + account     ("Browsing-Header")
+ *  - 'conversion':search + phone + account     ("Conversion-Header")
+ *  No page-type → variant mapping exists yet in this codebase; the caller (App.tsx) decides. */
+export type TopBarVariant = 'default' | 'browsing' | 'conversion';
+
 export interface TopBarProps {
   /** i18n function (drilled from the page wrapper's this.props.t). */
   t: TranslationFunction;
+  /** mobile-only header icon set — see TopBarVariant. Defaults to 'default'. */
+  variant?: TopBarVariant;
   /** real auth state (authStore.isAuthorized) — guest vs profile menu. */
   isAuthorized?: boolean;
   /** label for the authed menu header (authStore.userEmail / profile name). */
@@ -96,6 +106,10 @@ export interface TopBarProps {
   /** SPA navigation for internal routes (fe-main passes history.push). Hosts without a
    *  client-side router (fe-landing, WP widgets) omit it → full page navigation. */
   onNavigate?: (to: string) => void;
+  /** where the mobile "conversion" variant's phone icon goes — no single real business phone
+   *  number/tel: link was confirmed for this, so it defaults to the contact page. Pass a `tel:...`
+   *  href here once one is confirmed. */
+  phoneHref?: string;
 }
 
 /**
@@ -109,6 +123,7 @@ export interface TopBarProps {
  */
 const TopBar: React.FunctionComponent<TopBarProps> = ({
   t,
+  variant = 'default',
   isAuthorized = false,
   userLabel,
   favoritesCount = 0,
@@ -121,6 +136,7 @@ const TopBar: React.FunctionComponent<TopBarProps> = ({
   onSignOut,
   onLangSelect,
   onNavigate,
+  phoneHref = '/service/kontakt/',
 }) => {
   const [menu, setMenu] = useState(false); // mobile hamburger dropdown
   const [account, setAccount] = useState(false); // account popover
@@ -199,9 +215,179 @@ const TopBar: React.FunctionComponent<TopBarProps> = ({
     <div key={key} style={{ height: 1, background: 'var(--md-outline-variant)', margin: '6px 0' }} />
   );
 
+  /** First letter of the email's local-part, e.g. "adminvika@…" → "A" — a placeholder single-letter
+   *  avatar. ProfileStore already carries a real firstName/lastName (privateAddress) that isn't
+   *  threaded down to TopBar yet; wire that through for a proper two-letter "AV"-style initial. */
+  const avatarInitial = (userLabel || '?').trim().charAt(0).toUpperCase() || '?';
+
+  /** one Account Layer row (mobile design): icon + label + optional badge + trailing chevron —
+   *  distinct from the desktop popover's `row()` (no chevron, no avatar section there). */
+  const mrow = (key: string, label: string, onClick: () => void, opts?: { icon?: string; badge?: number }): JSX.Element => (
+    <button
+      key={key}
+      type="button"
+      className="amenu-mobile-row"
+      onClick={onClick}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        width: '100%',
+        padding: '13px 4px',
+        border: 0,
+        background: 'transparent',
+        color: 'var(--md-on-surface)',
+        cursor: 'pointer',
+        font: 'inherit',
+        fontWeight: 500,
+        textAlign: 'left',
+      }}
+    >
+      {opts && opts.icon && <Icon name={opts.icon} size={19} style={{ flex: 'none', color: 'var(--md-on-surface-variant)' }} />}
+      <span style={{ flex: 1, fontSize: 15 }}>{label}</span>
+      {opts && typeof opts.badge === 'number' && opts.badge > 0 && (
+        <span className="md-label-sm" style={{ fontWeight: 700 }}>{opts.badge}</span>
+      )}
+      <Icon name="chevron-right" size={18} style={{ flex: 'none', color: 'var(--md-on-surface-variant)' }} />
+    </button>
+  );
+
+  /** language row (mobile design): real flag + label, checkmark bubble on the active one — matches
+   *  the Figma "Sprache" section exactly (the desktop popover's globe/check-icon version is left
+   *  as-is, out of scope for this mobile-only pass). */
+  const mLangRow = (code: string, label: string): JSX.Element => {
+    const active = language === code;
+    return (
+      <button
+        key={`mlang-${code}`}
+        type="button"
+        onClick={() => { setAccount(false); if (onLangSelect) onLangSelect(code); }}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          width: '100%',
+          padding: '10px 4px',
+          border: 0,
+          background: 'transparent',
+          cursor: 'pointer',
+          font: 'inherit',
+          textAlign: 'left',
+        }}
+      >
+        <Flag code={code} />
+        <span style={{ flex: 1, fontSize: 15, color: 'var(--md-on-surface)' }}>{label}</span>
+        {active && (
+          <span
+            style={{
+              width: 20, height: 20, borderRadius: '50%', background: 'var(--md-primary)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none',
+            }}
+          >
+            <Icon name="check" size={13} color="#fff" stroke={3} />
+          </span>
+        )}
+      </button>
+    );
+  };
+
+  /** Mobile-only "Account Layer" — a full-width sheet under the header (Figma: "03 | Account
+   *  Layer"), replacing the desktop popover's small 264px card on mobile widths. Shown/hidden
+   *  purely via the `show-mobile`/`hide-mobile` CSS classes (this project's existing convention —
+   *  see the hamburger button/topbar-menu above), not JS width checks. */
+  const renderMobileAccountLayer = (): JSX.Element => (
+    <div className="amenu-mobile show-mobile mcard" style={{ flexDirection: 'column' }}>
+      <div style={{ padding: '20px 20px 8px', textAlign: isAuthorized ? 'left' : 'center' }}>
+        {isAuthorized ? (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <span
+              style={{
+                width: 44, height: 44, borderRadius: '50%', flex: 'none',
+                background: 'color-mix(in srgb, var(--md-primary) 15%, transparent)',
+                color: 'var(--md-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                fontWeight: 700, fontSize: 16,
+              }}
+            >
+              {avatarInitial}
+            </span>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div className="md-title-sm" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {userLabel}
+              </div>
+              <a
+                onClick={() => goRoute(R_SETTINGS)}
+                className="md-label"
+                style={{ color: 'var(--md-primary)', cursor: 'pointer', fontWeight: 600 }}
+              >
+                {t('autobahn:chrome.myProfile')} ›
+              </a>
+            </div>
+          </div>
+        ) : (
+          <>
+            <span
+              style={{
+                width: 44, height: 44, borderRadius: '50%', margin: '0 auto 14px',
+                background: 'var(--md-outline-variant)', color: 'var(--md-on-surface-variant)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+              }}
+            >
+              <Icon name="user" size={22} />
+            </span>
+            <div className="md-headline-sm" style={{ fontWeight: 700, marginBottom: 6 }}>
+              {t('autobahn:chrome.welcome')}
+            </div>
+            <div className="md-body" style={{ marginBottom: 16 }}>
+              {t('autobahn:chrome.welcomeSubtext')}
+            </div>
+          </>
+        )}
+      </div>
+
+      <div style={{ padding: '4px 20px 8px' }}>
+        {isAuthorized ? (
+          <>
+            {!isDealerMain &&
+              mrow('m-dashboard', t('autobahn:chrome.dashboard'), () => goRoute(R_DASHBOARD), { icon: 'layout-grid' })}
+            {mrow('m-vehicles', t('autobahn:chrome.myVehicles'), () => goRoute(R_MY_VEHICLES), { icon: 'car' })}
+            {mrow('m-searches', t('autobahn:chrome.savedSearches'), () => goRoute(R_SAVED_SEARCHES), { icon: 'bell' })}
+            {mrow('m-favorites', t('autobahn:chrome.favorites'), () => goRoute(R_FAVOURITES), { icon: 'heart', badge: favoritesCount })}
+            {mrow('m-settings', t('autobahn:chrome.settings'), () => goRoute(R_SETTINGS), { icon: 'settings' })}
+            {mrow('m-help', t('autobahn:chrome.helpContact'), () => goRoute(R_KONTAKT), { icon: 'help-circle' })}
+            {isDealerMain && mrow('m-dealer', t('autobahn:chrome.dealerDashboard'), () => goRoute(R_DASHBOARD), { icon: 'store' })}
+            {mrow('m-signout', t('autobahn:chrome.signOut'), () => { setAccount(false); if (onSignOut) onSignOut(); }, { icon: 'log-out' })}
+          </>
+        ) : (
+          <>
+            <button
+              type="button"
+              className="mbtn mbtn--filled mbtn--block"
+              style={{ width: '100%', marginBottom: 4 }}
+              onClick={() => goRoute(R_SIGN_IN)}
+            >
+              {t('autobahn:chrome.signIn')}
+            </button>
+            {mrow('m-register', t('autobahn:chrome.register'), () => goRoute(R_SIGN_UP), { icon: 'user-plus' })}
+            {mrow('m-dealer-signup', t('autobahn:chrome.dealerSignUp'), () => goRoute(R_DEALER), { icon: 'store' })}
+            {mrow('m-favorites', t('autobahn:chrome.favorites'), () => goRoute(R_FAVOURITES), { icon: 'heart', badge: favoritesCount })}
+          </>
+        )}
+      </div>
+
+      {divider('m-d1')}
+
+      <div style={{ padding: '8px 20px 20px' }}>
+        <div className="md-label-sm" style={{ color: 'var(--md-on-surface-variant)', padding: '4px 4px 6px' }}>
+          {t('autobahn:chrome.language')}
+        </div>
+        {LANGS.map(([code, label]) => mLangRow(code, label))}
+      </div>
+    </div>
+  );
+
   const renderAccountMenu = (): JSX.Element => (
     <div
-      className="amenu mcard"
+      className="amenu mcard hide-mobile"
       style={{
         position: 'absolute',
         top: 'calc(100% + 8px)',
@@ -280,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
@@ -295,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', {
@@ -307,47 +493,72 @@ 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 */}
-        <span 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>
+        {/* 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>
+            )}
+          </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' }}>
+              <IconButton name="heart" label={t('autobahn:chrome.favorites')} onClick={() => goRoute(R_FAVOURITES)} />
+              {favoritesCount > 0 && <span style={badgeStyle}>{favoritesCount}</span>}
+            </span>
           )}
-        </span>
-        {/* Suchaufträge → /my-searches (saved searches list) */}
-        <span 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>
+          {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>
           )}
-        </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>
-        )}
+          {/* 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 button + MD3 account popover — 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). */}
-        <span style={{ position: 'relative', display: 'inline-flex' }}>
-          <button
-            className="mbtn mbtn--tonal mbtn--sm"
-            style={{ marginLeft: 4 }}
-            onClick={() => setAccount((a) => !a)}
-            aria-expanded={account}
-          >
-            <Icon name="user" size={18} />
-            {t('autobahn:chrome.account')}
-          </button>
-          {account && renderAccountMenu()}
-        </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"
+              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()}
+
       {/* click-away backdrop for the account popover */}
       {account && (
         <div

package/constants.ts

@@ -1,31 +1,31 @@
-// Autobahn (auto.de redesign) — shared lookup constants barrel.
-// Pure data re-exported from ./constants/autobahn (kept import-safe for plain Node consumers,
-// see that file's header) plus the legacy fe-ui-core shim re-exports below.
-export * from './constants/autobahn';
-
-// ---------------------------------------------------------------------------
-// Legacy shared constants (moved here from fe-ui-core).
-//
-// This block mirrors the public symbol set of the old
-// `@bytebrand/fe-ui-core/constants` barrel so consumers can swap that
-// specifier for `@bytebrand/fe-ui-core-autobahn/constants` 1:1. The
-// implementations live under ./constants/ (core.ts, app.ts, price.ts,
-// Search.ts, …); fe-ui-core re-exports them via shims until it is deleted.
-// ---------------------------------------------------------------------------
-
-export {
-  offers,
-  checkoutOffers,
-  checkoutWarranties,
-  checkoutSteps,
-  checkoutSubStep,
-  DELIVERY_PERIODS_EXTRA,
-  THREE,
-  WLTP_ENERGY_EFFICIENCY_CLASS
-} from './constants/core';
-
-export { CUSTOM_ERROR_MESSAGES, supportPhone, supportPhoneLink } from './constants/app';
-
-export { priceRatings } from './constants/price';
-
-export { THROTTLE_DELAY } from './constants/Search';
+// Autobahn (auto.de redesign) — shared lookup constants barrel.
+// Pure data re-exported from ./constants/autobahn (kept import-safe for plain Node consumers,
+// see that file's header) plus the legacy fe-ui-core shim re-exports below.
+export * from './constants/autobahn';
+
+// ---------------------------------------------------------------------------
+// Legacy shared constants (moved here from fe-ui-core).
+//
+// This block mirrors the public symbol set of the old
+// `@bytebrand/fe-ui-core/constants` barrel so consumers can swap that
+// specifier for `@bytebrand/fe-ui-core-autobahn/constants` 1:1. The
+// implementations live under ./constants/ (core.ts, app.ts, price.ts,
+// Search.ts, …); fe-ui-core re-exports them via shims until it is deleted.
+// ---------------------------------------------------------------------------
+
+export {
+  offers,
+  checkoutOffers,
+  checkoutWarranties,
+  checkoutSteps,
+  checkoutSubStep,
+  DELIVERY_PERIODS_EXTRA,
+  THREE,
+  WLTP_ENERGY_EFFICIENCY_CLASS
+} from './constants/core';
+
+export { CUSTOM_ERROR_MESSAGES, supportPhone, supportPhoneLink } from './constants/app';
+
+export { priceRatings } from './constants/price';
+
+export { THROTTLE_DELAY } from './constants/Search';

package/locales/de/autobahn.json

@@ -207,6 +207,10 @@
     "dealerSignUp": "Als Händler anmelden",
     "language": "Sprache",
     "myAccount": "Mein Konto",
+    "myProfile": "Mein Profil",
+    "welcome": "Willkommen bei auto.de",
+    "welcomeSubtext": "Melde dich an oder erstelle ein Konto, um alle Vorteile zu nutzen.",
+    "callUs": "Anrufen",
     "usedCars": "Gebrauchtwagen",
     "newCars": "Neuwagen",
     "leasing": "Leasing",

package/locales/en/autobahn.json

@@ -207,6 +207,10 @@
     "dealerSignUp": "Become a dealer",
     "language": "Language",
     "myAccount": "My account",
+    "myProfile": "My profile",
+    "welcome": "Welcome to auto.de",
+    "welcomeSubtext": "Sign in or create an account to use all the benefits.",
+    "callUs": "Call us",
     "usedCars": "Used cars",
     "newCars": "New cars",
     "leasing": "Leasing",

package/package.json

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

@@ -5102,6 +5102,94 @@ line-height: 31px;
   box-shadow: var(--md-e2);
   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. */
+.md3 .amenu-mobile {
+  /* NOT full-width — measured against the real Figma export: the panel is anchored to the
+     RIGHT edge, leaving ~22% of the viewport showing the dimmed page on the left (both the
+     logged-out and logged-in mockups measured close to this, not identical px-for-px, so this
+     is the representative middle value rather than either exact reading). */
+  position: absolute;
+  top: 100%;
+  left: 22%;
+  right: 0;
+  background: var(--md-surface);
+  box-shadow: var(--md-elev-2);
+  z-index: 60;
+  max-height: calc(100vh - 64px);
+  overflow-y: auto;
+  /* only the LEFT corners are visually rounded (top-left, bottom-left) — the right edge sits
+     flush against the viewport's own right edge, so rounding there would be invisible anyway.
+     (This element is already show-mobile-gated, so no extra media query needed here.) */
+  border-radius: 20px 0 0 20px;
+}
+.md3 .amenu-mobile-row:active {
+  background: color-mix(in srgb, var(--md-primary) 6%, transparent);
+}
+/* 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;
+    /* 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);
+  }
+  /* 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: 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 */
 .md3 .lang-seg {
   display: inline-flex;

package/utils/financeFormat.ts

@@ -1,62 +1,62 @@
-// Autobahn (auto.de redesign) — shared financing-number formatting.
-//
-// Extracted from vdp/VdpModules.tsx's FinanceDetailsModal so non-React consumers (e.g. the
-// Meta AIA marketing-image renderer) format the SAME real numbers the same way, instead of a
-// second copy drifting from the VDP's. Pure TS, no React/JSX — safe to import from a plain
-// Node service.
-//
-// The "only real figures, never a fabricated total" rule is load-bearing (legal: balloon
-// financing means monthly×term is NOT the total) and lives here once, not per-caller.
-
-/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
- *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
-export function formatEur(n: number): string {
-  return n.toLocaleString('de-DE');
-}
-
-/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
-export function formatPct(n: number): string {
-  return `${n.toFixed(2).replace('.', ',')} %`;
-}
-
-export interface FinanceExampleFields {
-  price: number;
-  apr: number;
-  down: number;
-  /** Real config figure — falls back to price-down ONLY when genuinely absent. */
-  netLoanAmount?: number;
-  nominalRate?: number;
-  finalInstallment?: number;
-  grossAmount?: number;
-}
-
-export interface FinanceExampleLabels {
-  vehiclePrice: string;
-  priceSuffix: string;
-  apr: string;
-  nominal: string;
-  net: string;
-  down: string;
-  final: string;
-  gross: string;
-}
-
-/**
- * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
- * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
- * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
- * `exampleLine`, byte-for-byte).
- */
-export function buildFinanceExampleLine(fields: FinanceExampleFields, labels: FinanceExampleLabels, footnoteMarker = '³'): string {
-  const netto = fields.netLoanAmount != null ? fields.netLoanAmount : Math.max(0, fields.price - fields.down);
-  const parts: string[] = [
-    `${labels.vehiclePrice}: ${formatEur(fields.price)} € ${labels.priceSuffix}`,
-    ...(fields.apr > 0 ? [`${labels.apr}: ${formatPct(fields.apr)}`] : []),
-    ...(fields.nominalRate != null && fields.nominalRate > 0 ? [`${labels.nominal}: ${formatPct(fields.nominalRate)}`] : []),
-    `${labels.net}: ${formatEur(netto)} €`,
-    `${labels.down}: ${formatEur(fields.down)} €`,
-    ...(fields.finalInstallment != null && fields.finalInstallment > 0 ? [`${labels.final}: ${formatEur(fields.finalInstallment)} €`] : []),
-    ...(fields.grossAmount != null && fields.grossAmount > 0 ? [`${labels.gross}: ${formatEur(fields.grossAmount)} €`] : []),
-  ];
-  return `${footnoteMarker} ${parts.join('; ')};`;
-}
+// Autobahn (auto.de redesign) — shared financing-number formatting.
+//
+// Extracted from vdp/VdpModules.tsx's FinanceDetailsModal so non-React consumers (e.g. the
+// Meta AIA marketing-image renderer) format the SAME real numbers the same way, instead of a
+// second copy drifting from the VDP's. Pure TS, no React/JSX — safe to import from a plain
+// Node service.
+//
+// The "only real figures, never a fabricated total" rule is load-bearing (legal: balloon
+// financing means monthly×term is NOT the total) and lives here once, not per-caller.
+
+/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
+ *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
+export function formatEur(n: number): string {
+  return n.toLocaleString('de-DE');
+}
+
+/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
+export function formatPct(n: number): string {
+  return `${n.toFixed(2).replace('.', ',')} %`;
+}
+
+export interface FinanceExampleFields {
+  price: number;
+  apr: number;
+  down: number;
+  /** Real config figure — falls back to price-down ONLY when genuinely absent. */
+  netLoanAmount?: number;
+  nominalRate?: number;
+  finalInstallment?: number;
+  grossAmount?: number;
+}
+
+export interface FinanceExampleLabels {
+  vehiclePrice: string;
+  priceSuffix: string;
+  apr: string;
+  nominal: string;
+  net: string;
+  down: string;
+  final: string;
+  gross: string;
+}
+
+/**
+ * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
+ * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
+ * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
+ * `exampleLine`, byte-for-byte).
+ */
+export function buildFinanceExampleLine(fields: FinanceExampleFields, labels: FinanceExampleLabels, footnoteMarker = '³'): string {
+  const netto = fields.netLoanAmount != null ? fields.netLoanAmount : Math.max(0, fields.price - fields.down);
+  const parts: string[] = [
+    `${labels.vehiclePrice}: ${formatEur(fields.price)} € ${labels.priceSuffix}`,
+    ...(fields.apr > 0 ? [`${labels.apr}: ${formatPct(fields.apr)}`] : []),
+    ...(fields.nominalRate != null && fields.nominalRate > 0 ? [`${labels.nominal}: ${formatPct(fields.nominalRate)}`] : []),
+    `${labels.net}: ${formatEur(netto)} €`,
+    `${labels.down}: ${formatEur(fields.down)} €`,
+    ...(fields.finalInstallment != null && fields.finalInstallment > 0 ? [`${labels.final}: ${formatEur(fields.finalInstallment)} €`] : []),
+    ...(fields.grossAmount != null && fields.grossAmount > 0 ? [`${labels.gross}: ${formatEur(fields.grossAmount)} €`] : []),
+  ];
+  return `${footnoteMarker} ${parts.join('; ')};`;
+}

package/utils/priceRating.ts

@@ -1,58 +1,58 @@
-// Autobahn (auto.de redesign) — Preisbewertung rating math, extracted from CommonUtils.ts.
-//
-// Pulled out on purpose: CommonUtils.ts transitively imports `../constants/Search`, which
-// `require()`s image assets (webpack-only — breaks any plain Node `require`/`tsc` consumer).
-// This file only imports `../constants/price` (zero further imports) — a pure, testable leaf
-// module. CommonUtils.ts re-exports these for existing consumers — one implementation, not a fork.
-// (image-generator's Meta AIA renderer vendors a copy of this math directly instead of depending
-// on this package — see services/image-generator/src/services/metaAia/vendoredAutobahnMath.ts —
-// so a plain-Node backend doesn't need to npm-install this whole design system's dependency tree.)
-import { priceRatings, priceRatingConfig } from '../constants/price';
-import { PREDICTABLE_PRICE_INDEX } from '../constants/core';
-
-export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
-  const round = (value: number) => {
-    return Number.isFinite(pricePredicted)
-      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
-      : '???';
-  };
-
-  if (currentPrice === 0) {
-    console.log('Empty current price');
-  }
-
-  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
-    const { min, max } = priceRatingConfig[key];
-    return { ...acc, [key]: { min: round(min), max: round(max) } };
-  }, {}); // tslint:disable-line
-};
-
-export const getPredictablePrice = (currentSalesPrice: number, predictablePrice: number) => {
-  if (Number.isFinite(Number.parseFloat(`${predictablePrice}`))) {
-    return predictablePrice;
-  }
-
-  return currentSalesPrice * PREDICTABLE_PRICE_INDEX;
-}
-
-export const getPriceRating = (currentSalesPrice: number, predictablePrice: number) => {
-  const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
-  // const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
-
-  if (!isCorrectCurrentSalesPrice) return 0;
-
-
-  const validatedPredictablePrice = getPredictablePrice(currentSalesPrice, predictablePrice);
-
-  const ratingConfig = getPriceRatingConfig(currentSalesPrice, validatedPredictablePrice);
-
-  for (const key of Object.keys(ratingConfig)) {
-    const { min, max } = ratingConfig[key];
-    const TOP_PRICE = 5;
-    if (key === 'highPrice' && currentSalesPrice === max) return 1;
-    if (key === 'topPrice' && currentSalesPrice <= min) return TOP_PRICE;
-    if (currentSalesPrice >= min && currentSalesPrice < max) return priceRatings.indexOf(key);
-  }
-
-  return 0;
-};
+// Autobahn (auto.de redesign) — Preisbewertung rating math, extracted from CommonUtils.ts.
+//
+// Pulled out on purpose: CommonUtils.ts transitively imports `../constants/Search`, which
+// `require()`s image assets (webpack-only — breaks any plain Node `require`/`tsc` consumer).
+// This file only imports `../constants/price` (zero further imports) — a pure, testable leaf
+// module. CommonUtils.ts re-exports these for existing consumers — one implementation, not a fork.
+// (image-generator's Meta AIA renderer vendors a copy of this math directly instead of depending
+// on this package — see services/image-generator/src/services/metaAia/vendoredAutobahnMath.ts —
+// so a plain-Node backend doesn't need to npm-install this whole design system's dependency tree.)
+import { priceRatings, priceRatingConfig } from '../constants/price';
+import { PREDICTABLE_PRICE_INDEX } from '../constants/core';
+
+export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
+  const round = (value: number) => {
+    return Number.isFinite(pricePredicted)
+      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
+      : '???';
+  };
+
+  if (currentPrice === 0) {
+    console.log('Empty current price');
+  }
+
+  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
+    const { min, max } = priceRatingConfig[key];
+    return { ...acc, [key]: { min: round(min), max: round(max) } };
+  }, {}); // tslint:disable-line
+};
+
+export const getPredictablePrice = (currentSalesPrice: number, predictablePrice: number) => {
+  if (Number.isFinite(Number.parseFloat(`${predictablePrice}`))) {
+    return predictablePrice;
+  }
+
+  return currentSalesPrice * PREDICTABLE_PRICE_INDEX;
+}
+
+export const getPriceRating = (currentSalesPrice: number, predictablePrice: number) => {
+  const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
+  // const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
+
+  if (!isCorrectCurrentSalesPrice) return 0;
+
+
+  const validatedPredictablePrice = getPredictablePrice(currentSalesPrice, predictablePrice);
+
+  const ratingConfig = getPriceRatingConfig(currentSalesPrice, validatedPredictablePrice);
+
+  for (const key of Object.keys(ratingConfig)) {
+    const { min, max } = ratingConfig[key];
+    const TOP_PRICE = 5;
+    if (key === 'highPrice' && currentSalesPrice === max) return 1;
+    if (key === 'topPrice' && currentSalesPrice <= min) return TOP_PRICE;
+    if (currentSalesPrice >= min && currentSalesPrice < max) return priceRatings.indexOf(key);
+  }
+
+  return 0;
+};