@bytebrand/fe-ui-core-autobahn 1.0.0

package/chrome/Footer.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import { TranslationFunction } from '../types';
+import { defaultConfig } from '@bytebrand/fe-financing';
+
+import logoUrl from '../assets/autode-logo.svg';
+
+/** One footer link. `external` → new tab; relative hrefs are full navigations (WP pages / SPA).
+ *  `labelKey` is an autobahn i18n key resolved at render. */
+interface FooterLink {
+  labelKey: string;
+  href: string;
+  external?: boolean;
+}
+
+/**
+ * Footer link columns (design's four-column layout) populated with REAL targets verified against
+ * the legacy footer (FooterLinksData.ts) + the live routes. Car-browse entries go to the search
+ * pilot (/search); content/legal entries hit the real WP routes. No dead/no-op links.
+ */
+const COLUMNS: ReadonlyArray<{ headingKey: string; items: FooterLink[] }> = [
+  {
+    headingKey: 'autobahn:chrome.buy',
+    items: [
+      { labelKey: 'autobahn:chrome.usedCars', href: '/search' },
+      { labelKey: 'autobahn:chrome.newCars', href: '/search' },
+      { labelKey: 'autobahn:chrome.electricCars', href: '/search' },
+      { labelKey: 'autobahn:chrome.vans', href: '/search' },
+    ],
+  },
+  {
+    headingKey: 'autobahn:chrome.services',
+    items: [
+      { labelKey: 'autobahn:chrome.financing', href: '/finanzieren/' },
+      { labelKey: 'autobahn:chrome.helpContact', href: '/service/kontakt/' },
+      { labelKey: 'autobahn:chrome.newsletter', href: '/service/kontakt/' },
+      { labelKey: 'autobahn:chrome.forms', href: '/ratgeber/autokauf/' },
+    ],
+  },
+  {
+    headingKey: 'autobahn:chrome.company',
+    items: [
+      { labelKey: 'autobahn:chrome.about', href: '/das-neue-auto-de/' },
+      { labelKey: 'autobahn:chrome.careers', href: 'https://jobs.auto.de/', external: true },
+      { labelKey: 'autobahn:chrome.press', href: '/presse/' },
+      { labelKey: 'autobahn:chrome.magazine', href: '/magazin/' },
+    ],
+  },
+  {
+    headingKey: 'autobahn:chrome.legal',
+    items: [
+      { labelKey: 'autobahn:chrome.imprint', href: '/impressum/' },
+      { labelKey: 'autobahn:chrome.privacy', href: '/datenschutz/' },
+      { labelKey: 'autobahn:chrome.terms', href: '/agb/' },
+      { labelKey: 'autobahn:chrome.codex', href: '/kodex/' },
+    ],
+  },
+];
+
+/** Social links (real auto.de profiles — same set as the legacy footer). */
+const SOCIALS: ReadonlyArray<{ name: string; label: string; href: string }> = [
+  { name: 'facebook', label: 'Facebook', href: 'https://facebook.com/auto.de' },
+  { name: 'twitter', label: 'X / Twitter', href: 'https://twitter.com/auto_de' },
+  { name: 'instagram', label: 'Instagram', href: 'https://instagram.com/auto.de_official/' },
+];
+
+/** financing defaults for the §17a PAngV representative example (same source the legacy footer uses). */
+const FIN = defaultConfig.financing;
+const fmt2 = (n: number): string => Number(n).toFixed(2);
+
+export interface FooterProps {
+  /**
+   * i18n function. The footer: namespace holds the LEGALLY REQUIRED disclaimer text (PAngV
+   * financing example, DAT CO₂-Leitfaden, MwSt, image notice) — rendered verbatim from the same
+   * strings as the legacy footer so /search stays compliant where prices/rates are shown.
+   */
+  t: TranslationFunction;
+}
+
+/**
+ * Global site footer: brand blurb + social links, four real link columns, the mandatory legal
+ * disclaimer block, and a copyright + "Nach Oben" bar. Pure/presentational MD3 chrome — renders
+ * correctly only inside a `<div className="md3">` subtree (scoped theme at source/theme/autobahn).
+ */
+const Footer: React.FunctionComponent<FooterProps> = ({ t }) => {
+  const scrollTop = (): void => window.scroll({ top: 0, left: 0, behavior: 'smooth' });
+  const year = new Date().getFullYear();
+
+  return (
+    <footer style={{ background: 'var(--md-sc-low)', borderTop: '1px solid var(--md-outline-variant)' }}>
+      <div className="container footer-grid" style={{ padding: '40px 24px 24px' }}>
+        <div>
+          <img src={logoUrl} height="30" alt="auto.de" />
+          <p className="md-body-sm" style={{ marginTop: 14, maxWidth: 240 }}>
+            {t('autobahn:chrome.brandBlurb')}
+          </p>
+          <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
+            {SOCIALS.map((s) => (
+              <a
+                key={s.name}
+                href={s.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={s.label}
+                className="icon-btn"
+                style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--md-on-surface-variant)' }}
+              >
+                <SocialIcon name={s.name} />
+              </a>
+            ))}
+          </div>
+        </div>
+
+        {COLUMNS.map(({ headingKey, items }) => (
+          <div key={headingKey}>
+            <div className="md-title-sm" style={{ marginBottom: 14 }}>{t(headingKey)}</div>
+            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
+              {items.map((item) => (
+                <li key={item.labelKey}>
+                  <a
+                    href={item.href}
+                    target={item.external ? '_blank' : undefined}
+                    rel={item.external ? 'noopener noreferrer' : undefined}
+                    className="md-body-sm"
+                    style={{ color: 'var(--md-on-surface-variant)', textDecoration: 'none' }}
+                  >
+                    {t(item.labelKey)}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+
+      {/* Legally required disclaimers (PAngV §17a financing example w/ live APR/nominal rate +
+          term, DAT CO₂-Leitfaden, MwSt, Streichpreis, image notice). Same text as the legacy footer. */}
+      <div style={{ borderTop: '1px solid var(--md-outline-variant)' }}>
+        <div className="container" style={{ padding: '18px 24px' }}>
+          <p className="md-label-sm" style={{ lineHeight: 1.55, color: 'var(--md-on-surface-variant)', margin: 0 }}>
+            {t('footer:vatReportable')}<br />
+            {t('footer:strikePrice')}<br />
+            {t('footer:financingInfo', {
+              rawPaybackPeriod: FIN.rawPaybackPeriod,
+              nominalInterestRate: fmt2(FIN.nominalInterestRate),
+              annualPercentageRate: fmt2(FIN.annualPercentageRate),
+            })}<br />
+            * {t('footer:co2Info')}<br />
+            {t('footer:EnvPremium')}<br />
+            {t('footer:images')}
+          </p>
+        </div>
+      </div>
+
+      <div style={{ borderTop: '1px solid var(--md-outline-variant)' }}>
+        <div
+          className="container"
+          style={{ padding: '16px 24px', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}
+        >
+          <span className="md-label-sm">{t('footer:copyright', { year })}</span>
+          <button
+            type="button"
+            className="mbtn mbtn--text mbtn--sm"
+            onClick={scrollTop}
+            style={{ padding: '0 4px' }}
+          >
+            {t('footer:up')} ↑
+          </button>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+/**
+ * Inline brand-correct social glyphs. lucide-react dropped the brand marks (facebook/twitter/
+ * instagram) from its `icons` map, so the shared Icon would render nothing — use small inline SVGs.
+ */
+const SocialIcon: React.FunctionComponent<{ name: string }> = ({ name }) => {
+  const common = { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'currentColor' as const, 'aria-hidden': true };
+  if (name === 'facebook') {
+    return (<svg {...common}><path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.9h2.54V9.85c0-2.52 1.49-3.91 3.78-3.91 1.1 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.9h-2.34V22c4.78-.79 8.44-4.94 8.44-9.94Z" /></svg>);
+  }
+  if (name === 'twitter') {
+    return (<svg {...common}><path d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.65l-5.21-6.81-5.96 6.81H1.69l7.73-8.84L1.25 2.25h6.82l4.71 6.23 5.46-6.23Zm-1.16 17.52h1.83L7.01 4.13H5.05l12.03 15.64Z" /></svg>);
+  }
+  return (<svg {...common}><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16Zm0 1.62c-3.15 0-3.5.01-4.74.07-.9.04-1.39.19-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69 1.06-.13.32-.28.81-.32 1.71-.06 1.24-.07 1.59-.07 4.74s.01 3.5.07 4.74c.04.9.19 1.39.32 1.71.17.43.37.74.69 1.06.32.32.63.52 1.06.69.32.13.81.28 1.71.32 1.24.06 1.59.07 4.74.07s3.5-.01 4.74-.07c.9-.04 1.39-.19 1.71-.32.43-.17.74-.37 1.06-.69.32-.32.52-.63.69-1.06.13-.32.28-.81.32-1.71.06-1.24.07-1.59.07-4.74s-.01-3.5-.07-4.74c-.04-.9-.19-1.39-.32-1.71a2.85 2.85 0 0 0-.69-1.06 2.85 2.85 0 0 0-1.06-.69c-.32-.13-.81-.28-1.71-.32-1.24-.06-1.59-.07-4.74-.07Zm0 2.76a5.46 5.46 0 1 1 0 10.92 5.46 5.46 0 0 1 0-10.92Zm0 9a3.54 3.54 0 1 0 0-7.08 3.54 3.54 0 0 0 0 7.08Zm6.95-9.22a1.28 1.28 0 1 1-2.55 0 1.28 1.28 0 0 1 2.55 0Z" /></svg>);
+};
+
+export default Footer;

package/chrome/TopBar.tsx

@@ -0,0 +1,405 @@
+import React, { useState } from 'react';
+import { TranslationFunction } from '../types';
+
+import { Button, Icon, IconButton } from '../ui';
+import logoUrl from '../assets/autode-logo.svg';
+
+/** Where the logo navigates on click. '/' is NOT an SPA route — traefik serves the WordPress
+ *  homepage there (generate-routes.py: wp-home at higher priority) — so the logo must be a FULL
+ *  navigation (<a href>), never history.push, or the SPA renders its 404 page. */
+const HOME_PATH = '/';
+/** The flagged Autobahn search entry point (pilot). */
+const SEARCH_PATH = '/search';
+
+/**
+ * Primary nav (German UI copy — matches the legacy Header destinations, NOT the design's
+ * "everything routes to SRP" stub). Car-listing entries stay inside the SPA pilot (/search);
+ * the content pages (Finanzierung/Magazin) are real WP routes opened as full navigations.
+ */
+const NAV_LINKS: ReadonlyArray<{ labelKey: string; to?: string; href?: string }> = [
+  { labelKey: 'autobahn:chrome.navSearch',    to:   SEARCH_PATH },
+  { labelKey: 'autobahn:chrome.navInform',    href: '/magazin/' },
+  { labelKey: 'autobahn:chrome.navFinancing', href: '/finanzieren/' },
+  { labelKey: 'autobahn:chrome.navInsurance', href: '/versichern/' },
+  { labelKey: 'autobahn:chrome.navService',   href: '/service/kontakt/' },
+  { labelKey: 'autobahn:chrome.navBafa',      href: '/magazin/bafa-praemie-fuer-elektroautos-ab-2026/' },
+  { labelKey: 'autobahn:chrome.navJobs',      href: 'https://jobs.auto.de/' },
+];
+
+/** Account-menu routes (all real fe-main SPA routes — see GuestMenu/ProfileMenu + AppRouter). */
+const R_SIGN_IN = '/login/sign-in';
+const R_SIGN_UP = '/login/sign-up';
+const R_DEALER = '/dealer/sign-up';
+const R_FAVOURITES = '/favourites';
+const R_SAVED_SEARCHES = '/my-searches';
+const R_MY_VEHICLES = '/my-vehicles/overview';
+const R_SETTINGS = '/my-settings';
+const R_MY_ORDERS = '/account/my-orders';
+const R_DEALER_DASHBOARD = '/account/dashboard';
+const R_IMAGE_SETTINGS = '/account/image-settings';
+
+/** Languages offered in the account menu (legacy supports de/en/ru). Labels are proper nouns
+ *  (endonyms) and stay untranslated. */
+const LANGS: ReadonlyArray<readonly [code: string, label: string]> = [
+  ['de', 'Deutsch'],
+  ['en', 'English'],
+];
+
+/** Tiny inline flag (self-contained SVG — no external asset, CSP-safe). DE tricolor / UK union jack. */
+const Flag: React.FunctionComponent<{ code: string }> = ({ code }) =>
+  code === 'en' ? (
+    <svg viewBox="0 0 60 30" width="20" height="14" style={{ borderRadius: 2, flex: 'none', display: 'block' }} aria-hidden="true">
+      <clipPath id="uk-clip"><rect width="60" height="30" /></clipPath>
+      <g clipPath="url(#uk-clip)">
+        <rect width="60" height="30" fill="#012169" />
+        <path d="M0,0 60,30 M60,0 0,30" stroke="#fff" strokeWidth="6" />
+        <path d="M0,0 60,30 M60,0 0,30" stroke="#C8102E" strokeWidth="4" />
+        <path d="M30,0 V30 M0,15 H60" stroke="#fff" strokeWidth="10" />
+        <path d="M30,0 V30 M0,15 H60" stroke="#C8102E" strokeWidth="6" />
+      </g>
+    </svg>
+  ) : (
+    <svg viewBox="0 0 5 3" width="20" height="14" style={{ borderRadius: 2, flex: 'none', display: 'block' }} aria-hidden="true">
+      <rect width="5" height="1" y="0" fill="#000" />
+      <rect width="5" height="1" y="1" fill="#DD0000" />
+      <rect width="5" height="1" y="2" fill="#FFCE00" />
+    </svg>
+  );
+
+export interface TopBarProps {
+  /** i18n function (drilled from the page wrapper's this.props.t). */
+  t: TranslationFunction;
+  /** real auth state (authStore.isAuthorized) — guest vs profile menu. */
+  isAuthorized?: boolean;
+  /** label for the authed menu header (authStore.userEmail / profile name). */
+  userLabel?: string;
+  /** Merkliste count (favoriteStore.favoritesIDs.length) — badge on the heart + menu row. */
+  favoritesCount?: number;
+  /** unread Suchaufträge count — badge on the bell. Defaults to 0 (no badge). */
+  notificationCount?: number;
+  /** placed-orders count (profileStore.totalOrdered) — badge on the my-orders menu row. */
+  ordersCount?: number;
+  /** active language tag (appStore.language) — ticks the current language row. */
+  language?: string;
+  /** dealer-main account (authStore.isDealerMain) — shows the dealer menu section. */
+  isDealerMain?: boolean;
+  /** attached dealerships (profileStore.dealers: { dealer: {id, email}, isActive }[]). */
+  dealers?: ReadonlyArray<{ dealer: { id: string; email: string }; isActive: boolean }>;
+  /** switch the active dealership (App.setMainDealer → profileStore.switchDealer). */
+  onDealerSelect?: (dealerId: string) => void;
+  /** sign out (authStore.signOut). */
+  onSignOut?: () => void;
+  /** switch language (appStore.changeLang). */
+  onLangSelect?: (lang: string) => void;
+  /** 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;
+}
+
+/**
+ * Sticky global top app bar (h64) for the Autobahn pilot: mobile hamburger, logo, desktop
+ * inline nav, action icons (search / Merkliste / Suchaufträge) and a tonal "Konto" button that
+ * opens a REAL MD3 account menu (guest: Anmelden/Registrieren/Händler/Merkliste/Sprache;
+ * authed: profile links/Merkliste/Abmelden/Sprache) wired to the live auth routes/actions —
+ * replacing the legacy mobile-only SidePanel UserMenu (which rendered unstyled on desktop).
+ *
+ * Pure MD3 chrome — renders correctly only inside a `<div className="md3">` subtree.
+ */
+const TopBar: React.FunctionComponent<TopBarProps> = ({
+  t,
+  isAuthorized = false,
+  userLabel,
+  favoritesCount = 0,
+  notificationCount = 0,
+  ordersCount = 0,
+  language = 'de',
+  isDealerMain = false,
+  dealers = [],
+  onDealerSelect,
+  onSignOut,
+  onLangSelect,
+  onNavigate,
+}) => {
+  const [menu, setMenu] = useState(false); // mobile hamburger dropdown
+  const [account, setAccount] = useState(false); // account popover
+
+  const navigate = onNavigate || ((to: string): void => { window.location.href = to; });
+
+  const goSearch = (): void => {
+    setMenu(false);
+    navigate(SEARCH_PATH);
+  };
+  /** navigate a nav/menu entry: SPA push for `to`, full navigation for external `href`. */
+  const goNav = (item: { to?: string; href?: string }): void => {
+    setMenu(false);
+    setAccount(false);
+    if (item.to) {
+      navigate(item.to);
+    } else if (item.href) {
+      window.location.href = item.href;
+    }
+  };
+  const goRoute = (to: string): void => {
+    setMenu(false);
+    setAccount(false);
+    navigate(to);
+  };
+
+  const renderNav = (cls: string, itemStyle: React.CSSProperties): JSX.Element => (
+    <nav className={cls} style={cls === 'hide-mobile' ? { display: 'flex', gap: 4, marginLeft: 8 } : { flexDirection: 'column', gap: 2 }}>
+      {NAV_LINKS.map((item) => (
+        <a
+          key={item.labelKey}
+          onClick={() => goNav(item)}
+          className={cls === 'hide-mobile' ? 'md-label' : 'md-title-sm'}
+          style={itemStyle}
+        >
+          {t(item.labelKey)}
+        </a>
+      ))}
+    </nav>
+  );
+
+  /** one account-menu row. `key` is a stable identifier; `label` is the (translated) display text. */
+  const row = (key: string, label: string, onClick: () => void, opts?: { icon?: string; primary?: boolean; badge?: number }): JSX.Element => (
+    <button
+      key={key}
+      type="button"
+      className="amenu-row"
+      onClick={onClick}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        width: '100%',
+        padding: '10px 14px',
+        border: 0,
+        background: opts && opts.primary ? 'var(--md-primary)' : 'transparent',
+        color: opts && opts.primary ? '#fff' : 'var(--md-on-surface)',
+        borderRadius: opts && opts.primary ? 'var(--md-r-full)' : 0,
+        margin: opts && opts.primary ? '0 0 6px' : 0,
+        cursor: 'pointer',
+        font: 'inherit',
+        fontWeight: opts && opts.primary ? 700 : 500,
+        justifyContent: opts && opts.primary ? 'center' : 'flex-start',
+        textAlign: 'left',
+      }}
+    >
+      {opts && opts.icon && <Icon name={opts.icon} size={17} style={{ flex: 'none' }} />}
+      <span style={{ flex: 1 }}>{label}</span>
+      {opts && typeof opts.badge === 'number' && (
+        <span className="md-label-sm" style={{ fontWeight: 700 }}>{opts.badge}</span>
+      )}
+    </button>
+  );
+
+  const divider = (key: string): JSX.Element => (
+    <div key={key} style={{ height: 1, background: 'var(--md-outline-variant)', margin: '6px 0' }} />
+  );
+
+  const renderAccountMenu = (): JSX.Element => (
+    <div
+      className="amenu mcard"
+      style={{
+        position: 'absolute',
+        top: 'calc(100% + 8px)',
+        right: 0,
+        width: 264,
+        padding: 8,
+        zIndex: 60,
+        boxShadow: 'var(--md-elev-2)',
+      }}
+    >
+      {isAuthorized ? (
+        <>
+          <div className="md-label-sm" style={{ padding: '6px 14px 8px', color: 'var(--md-on-surface-variant)' }}>
+            {userLabel || t('autobahn:chrome.myAccount')}
+          </div>
+          {row('autobahn:chrome.myVehicles', t('autobahn:chrome.myVehicles'), () => goRoute(R_MY_VEHICLES), { icon: 'car' })}
+          {row('autobahn:chrome.myOrders', t('autobahn:chrome.myOrders'), () => goRoute(R_MY_ORDERS), { icon: 'package', badge: ordersCount > 0 ? ordersCount : undefined })}
+          {row('autobahn:chrome.savedSearches', t('autobahn:chrome.savedSearches'), () => goRoute(R_SAVED_SEARCHES), { icon: 'bell' })}
+          {row('autobahn:chrome.favorites', t('autobahn:chrome.favorites'), () => goRoute(R_FAVOURITES), { icon: 'heart', badge: favoritesCount })}
+          {row('autobahn:chrome.settings', t('autobahn:chrome.settings'), () => goRoute(R_SETTINGS), { icon: 'settings' })}
+          {isDealerMain && (
+            <>
+              {divider('d-dealer')}
+              {row('autobahn:chrome.dealerDashboard', t('autobahn:chrome.dealerDashboard'), () => goRoute(R_DEALER_DASHBOARD), { icon: 'store' })}
+              {row('autobahn:chrome.imageSettings', t('autobahn:chrome.imageSettings'), () => goRoute(R_IMAGE_SETTINGS), { icon: 'image' })}
+            </>
+          )}
+          {dealers.length > 1 && (
+            <>
+              <div className="md-label-sm" style={{ padding: '8px 14px 4px', color: 'var(--md-on-surface-variant)' }}>
+                {t('autobahn:chrome.myDealers')} ({dealers.length})
+              </div>
+              {dealers.map((d) =>
+                row(`dealer-${d.dealer.id}`, d.dealer.email, () => {
+                  setAccount(false);
+                  if (!d.isActive && onDealerSelect) onDealerSelect(d.dealer.id);
+                }, { icon: d.isActive ? 'check' : 'store' }),
+              )}
+            </>
+          )}
+          {divider('d1')}
+          {row('autobahn:chrome.signOut', t('autobahn:chrome.signOut'), () => { setAccount(false); if (onSignOut) onSignOut(); }, { icon: 'log-out' })}
+        </>
+      ) : (
+        <>
+          {row('autobahn:chrome.signIn', t('autobahn:chrome.signIn'), () => goRoute(R_SIGN_IN), { primary: true })}
+          {row('autobahn:chrome.register', t('autobahn:chrome.register'), () => goRoute(R_SIGN_UP), { icon: 'user-plus' })}
+          {row('autobahn:chrome.dealerSignUp', t('autobahn:chrome.dealerSignUp'), () => goRoute(R_DEALER), { icon: 'store' })}
+          {divider('d1')}
+          {row('autobahn:chrome.favorites', t('autobahn:chrome.favorites'), () => goRoute(R_FAVOURITES), { icon: 'heart', badge: favoritesCount })}
+        </>
+      )}
+      {divider('d2')}
+      <div className="md-label-sm" style={{ padding: '4px 14px', color: 'var(--md-on-surface-variant)' }}>{t('autobahn:chrome.language')}</div>
+      {LANGS.map(([code, label]) =>
+        row(`lang-${code}`, label, () => { setAccount(false); if (onLangSelect) onLangSelect(code); }, {
+          icon: language === code ? 'check' : 'globe',
+        }),
+      )}
+    </div>
+  );
+
+  return (
+    <header
+      style={{
+        position: 'sticky',
+        top: 0,
+        zIndex: 50,
+        background: 'var(--md-surface)',
+        borderBottom: '1px solid var(--md-outline-variant)',
+      }}
+    >
+      <div
+        className="container"
+        style={{ height: 64, display: 'flex', alignItems: 'center', gap: 16, padding: '0 16px' }}
+      >
+        {/* mobile hamburger */}
+        <button
+          className="icon-btn show-mobile"
+          aria-label={t('autobahn:chrome.menu')}
+          aria-expanded={menu}
+          onClick={() => setMenu((m) => !m)}
+        >
+          <Icon name={menu ? 'x' : 'menu'} size={22} />
+        </button>
+
+        {/* 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" />
+        </a>
+
+        {renderNav('hide-mobile', {
+          cursor: 'pointer',
+          padding: '8px 12px',
+          borderRadius: 'var(--md-r-full)',
+          color: 'var(--md-on-surface-variant)',
+        })}
+
+        <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>
+          )}
+        </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>
+          )}
+        </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 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>
+      </div>
+
+      {/* click-away backdrop for the account popover */}
+      {account && (
+        <div
+          onClick={() => setAccount(false)}
+          style={{ position: 'fixed', inset: 0, zIndex: 40, background: 'transparent' }}
+        />
+      )}
+
+      {/* mobile dropdown */}
+      {menu && (
+        <div className="topbar-menu show-mobile" style={{ flexDirection: 'column', gap: 2 }}>
+          {NAV_LINKS.map((item) => (
+            <a
+              key={item.labelKey}
+              onClick={() => goNav(item)}
+              className="md-title-sm"
+              style={{
+                cursor: 'pointer',
+                padding: '14px 8px',
+                borderBottom: '1px solid var(--md-outline-variant)',
+                color: 'var(--md-on-surface)',
+              }}
+            >
+              {t(item.labelKey)}
+            </a>
+          ))}
+          <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
+            <Button variant="outlined" icon="heart" style={{ flex: 1 }} onClick={() => goRoute(R_FAVOURITES)}>
+              {t('autobahn:chrome.favorites')}{favoritesCount > 0 ? ` (${favoritesCount})` : ''}
+            </Button>
+            <Button variant="filled" icon="user" style={{ flex: 1 }} onClick={() => goRoute(isAuthorized ? R_MY_VEHICLES : R_SIGN_IN)}>
+              {isAuthorized ? t('autobahn:chrome.mobileMyAccount') : t('autobahn:chrome.signIn')}
+            </Button>
+          </div>
+        </div>
+      )}
+    </header>
+  );
+};
+
+/** small red count badge shared by the heart + bell. */
+const badgeStyle: React.CSSProperties = {
+  position: 'absolute',
+  top: 4,
+  right: 4,
+  minWidth: 15,
+  height: 15,
+  padding: '0 4px',
+  borderRadius: 999,
+  background: 'var(--md-error)',
+  color: '#fff',
+  fontSize: 9.5,
+  fontWeight: 700,
+  lineHeight: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxShadow: '0 0 0 2px var(--md-surface)',
+  pointerEvents: 'none',
+};
+
+export default TopBar;

package/chrome/index.ts

@@ -0,0 +1,20 @@
+// Autobahn (auto.de redesign) — global chrome (top app bar + footer).
+//
+// Typed, pure React 18 + TS port of the design kit's global chrome from
+// docs/redesign/design-source/ui_kits/website/Chrome.jsx. The original kit used
+// a fake string router (`navigate('home'|'srp')`); navigation is injected via
+// TopBar's `onNavigate` prop (fe-main passes react-router history.push; hosts
+// without a client router omit it and get full page navigations).
+//
+// SCOPING: like the ui primitives, this chrome relies on the scoped CSS layer at
+// ../theme (md3.css) where every class is scoped under `.md3`
+// (e.g. `.md3 .topbar-menu`, `.md3 .footer-grid`, `.md3 .hide-mobile`). It
+// therefore only renders correctly inside a `<div className="md3">` subtree.
+//
+// The Sentry-coupled AutobahnErrorBoundary is fe-main app infrastructure and
+// stayed there: services/fe-main/source/components/autobahn/ErrorBoundary.tsx.
+
+export { default as TopBar } from './TopBar';
+export type { TopBarProps } from './TopBar';
+
+export { default as Footer } from './Footer';

package/chrome/svg.d.ts

@@ -0,0 +1,11 @@
+// Ambient declaration so `import logoUrl from '../assets/x.svg'` type-checks.
+//
+// fe-main's webpack treats *.svg as `type: 'asset/resource'` (see
+// services/fe-main/webpack.config.js), so the default import resolves to the
+// emitted URL string at runtime. The repo-wide globals.d.ts only declares
+// *.styl / *.css, so we add the *.svg URL-module shape here, scoped to the
+// autobahn/chrome subtree (the only place the redesign chrome imports an SVG).
+declare module '*.svg' {
+  const url: string;
+  export default url;
+}

package/compat/AccardionSection/AccardionSection.styl

@@ -0,0 +1,45 @@
+@import '../legacy-theme/mixins.styl'
+
+.accordionWrapper
+  grid-area: accordion;
+  borderRadius();
+
+  +media-tablet-landscape-down()
+    background-color: unset
+    padding-bottom: 0
+    border-left: 0
+    border-right: 0
+
+.propertyLinks
+  display: flex
+  justify-content: space-around
+  height: 40px
+  background-color: #fff;
+  border-bottom: 1px solid rgba(215,215,215,0.5);
+
+.propertyLink
+  width: 33%
+  font-size: 12px
+  font-weight: bold
+  text-transform: uppercase
+  display: flex
+  justify-content: center
+  align-items: center
+  cursor: pointer;
+  position relative
+  color: rgba($grey-3, .83);
+  &:nth-child(2)
+    &:before, &:after
+      content: '';
+      background-color $grey-5f;
+      width: 1px;
+      height: 29px;
+      position absolute;
+      top: 50%;
+      transform: translateY(-50%);
+
+    &:before
+      left: 0;
+
+    &:after
+      right: 0;