@bytebrand/fe-ui-core-autobahn 1.0.95 → 1.0.97

package/chrome/TopBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { TranslationFunction } from '../types';
 
 import { Button, Icon, IconButton } from '../ui';
@@ -110,6 +110,10 @@ export interface TopBarProps {
    *  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;
+  /** mobile-only: slide the header out of view on scroll-down, back in on scroll-up (coordinated
+   *  with the VDP sticky offer bottom bar's own show/hide). Off by default — only the car-detail
+   *  page (topBarVariant 'conversion') opts in; every other page keeps the header always docked. */
+  autoHideOnScroll?: boolean;
 }
 
 /**
@@ -137,9 +141,28 @@ const TopBar: React.FunctionComponent<TopBarProps> = ({
   onLangSelect,
   onNavigate,
   phoneHref = '/service/kontakt/',
+  autoHideOnScroll = false,
 }) => {
   const [menu, setMenu] = useState(false); // mobile hamburger dropdown
   const [account, setAccount] = useState(false); // account popover
+  const [hidden, setHidden] = useState(false); // autoHideOnScroll: header slid out of view
+
+  // scroll-direction tracking for autoHideOnScroll — down hides, up shows, and it never hides
+  // near the very top (HIDE_AT) so the header doesn't disappear on the first tiny scroll nudge.
+  const lastScrollY = useRef(0);
+  useEffect(() => {
+    if (!autoHideOnScroll) return undefined;
+    const HIDE_AT = 80;
+    lastScrollY.current = window.scrollY;
+    const onScroll = (): void => {
+      const y = window.scrollY;
+      const goingDown = y > lastScrollY.current;
+      setHidden(y > HIDE_AT && goingDown);
+      lastScrollY.current = y;
+    };
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [autoHideOnScroll]);
 
   const navigate = onNavigate || ((to: string): void => { window.location.href = to; });
 
@@ -455,14 +478,18 @@ const TopBar: React.FunctionComponent<TopBarProps> = ({
     </div>
   );
 
+  // suppress the auto-hide while the mobile hamburger/account layer is open — an in-progress
+  // interaction sliding away with the header would be jarring, and the account layer/menu render
+  // as children of <header> below so they'd vanish along with it.
+  const effectivelyHidden = hidden && !menu && !account;
+
   return (
     <header
+      className={'topbar' + (effectivelyHidden ? ' topbar--hidden' : '')}
       style={{
         position: 'sticky',
         top: 0,
         zIndex: 50,
-        background: 'var(--md-surface)',
-        borderBottom: '1px solid var(--md-outline-variant)',
       }}
     >
       <div

package/compat/CookieModal/Modal.styl

@@ -1,12 +1,12 @@
-@import '../legacy-theme/mixins.styl'
-
-// SURFACE (Modal.tsx) sets max-height: 92vh inline for desktop — on mobile the
-// modal should grow to fit its full content instead of scrolling internally.
-// !important is required to win over the inline style attribute.
-.surface
-  +media-tablet-down()
-    max-height: none !important
-
-.overlay
-  +media-tablet-down()
-    padding-top: 71px !important
+@import '../legacy-theme/mixins.styl'
+
+// SURFACE (Modal.tsx) sets max-height: 92vh inline for desktop — on mobile the
+// modal should grow to fit its full content instead of scrolling internally.
+// !important is required to win over the inline style attribute.
+.surface
+  +media-tablet-down()
+    max-height: none !important
+
+.overlay
+  +media-tablet-down()
+    padding-top: 71px !important

package/compat/CookieModal/modals/ManageCookieModal/ManageCookieModal.styl

@@ -5,6 +5,8 @@
   text-align: center
   box-sizing: border-box
   max-width: 100%
+  +media-tablet-down()
+    padding: 16px 15px 12px 15px
 
 .modalTitle
   font-family: sans-serif

package/package.json

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

@@ -595,7 +595,10 @@ line-height: 31px;
   transition: box-shadow 0.15s;
 }
 .md3 .mfield:focus-within {
-  box-shadow: inset 0 0 0 2px var(--md-accent);
+  box-shadow: inset 0 0 0 2px #005CFF;
+}
+.md3 .srp-rail input[type="checkbox"] {
+  accent-color: #005CFF;
 }
 .md3 .mfield select,
 .md3 .mfield input {
@@ -1764,7 +1767,7 @@ line-height: 31px;
 }
 .md3 .mtextarea:focus {
   outline: 0;
-  box-shadow: inset 0 0 0 2px var(--md-accent);
+  box-shadow: inset 0 0 0 2px #005CFF;
 }
 
 /* ---------- Impressum ---------- */
@@ -2919,7 +2922,12 @@ line-height: 31px;
   box-shadow: inset 0 0 0 1px var(--md-outline);
 }
 .md3 .mselect-btn[aria-expanded="true"] {
-  box-shadow: inset 0 0 0 2px var(--md-accent);
+  box-shadow: inset 0 0 0 2px #005CFF;
+}
+.md3 .mselect-btn:focus-visible {
+  /* already has its own aria-expanded/hover box-shadow feedback — the generic site-wide
+     .md3 :focus-visible box-shadow is redundant here. */
+  outline: none;
 }
 .md3 .mselect-btn:disabled {
   opacity: 0.5;
@@ -2964,11 +2972,8 @@ line-height: 31px;
   top: calc(100% + 4px);
   left: 0;
   min-width: 100%;
-  max-height: 288px;
-  overflow-y: auto;
   padding: 6px;
   margin: 0;
-  list-style: none;
   background: var(--md-sc-lowest, #fff);
   border-radius: var(--md-r-sm, 12px);
   border: 1px solid var(--md-outline-variant);
@@ -2978,6 +2983,70 @@ line-height: 31px;
   left: auto;
   right: 0;
 }
+.md3 .mselect-list {
+  max-height: 288px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.md3 .mselect-btn--editing {
+  cursor: text;
+  /* always rendered while `open` (see editing = searchable && open), so no [aria-expanded]
+     attribute-selector match is needed the way .mselect-btn[aria-expanded="true"] uses one.
+     !important: .mselect-btn:hover's box-shadow has higher specificity (class+pseudo-class)
+     than a single .mselect-btn--editing class and would otherwise win on hover. */
+  box-shadow: inset 0 0 0 2px #005CFF !important;
+}
+.md3 .mselect-input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  font: inherit;
+  /* 14px to match .mselect-label (the closed-state text) so the field doesn't visually
+     change size the moment it's clicked. Bumped to 16px on mobile below — iOS Safari
+     auto-zooms the whole page on focusing any input under 16px, and that only matters
+     on touch/mobile, not desktop. */
+  font-size: 14px;
+  color: var(--md-on-surface);
+}
+@media (max-width: 600px) {
+  .md3 .mselect-input {
+    font-size: 16px;
+  }
+}
+.md3 .mselect-input:focus {
+  /* the #005CFF ring already lives on the parent .mselect-btn--editing — the input's own
+     native focus outline/box-shadow would double it up. */
+  outline: none;
+  box-shadow: none !important;
+}
+.md3 .mselect-input::placeholder {
+  color: var(--md-on-surface-variant);
+}
+.md3 .mselect-chev-btn {
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  flex: none;
+}
+.md3 .mselect-chev-btn:focus-visible {
+  /* the #005CFF ring already lives on the parent .mselect-btn--editing. */
+  outline: none;
+  box-shadow: none !important;
+}
+.md3 .mselect-empty {
+  padding: 9px 10px;
+  font-size: 13px;
+  color: var(--md-on-surface-variant);
+}
 .md3 .mselect-opt {
   display: flex;
   align-items: center;
@@ -3246,8 +3315,20 @@ line-height: 31px;
   background: var(--autode-swoosh);
 }
 .md3 :focus-visible {
-  outline: 2px solid var(--md-accent);
-  outline-offset: 2px;
+  outline: none;
+  box-shadow: inset 0 0 0 2px #005CFF !important;
+}
+/* these already draw their own #005CFF ring on a wrapper (.mfield/.enq-float via
+   :focus-within) or via border (.enquiry-*) — the generic ring above would double up
+   directly on the input/select/textarea itself, showing two mismatched rectangles. */
+.md3 .mfield input:focus-visible,
+.md3 .mfield select:focus-visible,
+.md3 .mfield textarea:focus-visible,
+.md3 .enq-float input:focus-visible,
+.md3 .enq-float textarea:focus-visible,
+.md3 .enquiry-name-row input:focus-visible,
+.md3 .enquiry-email-wrap input:focus-visible {
+  box-shadow: none !important;
 }
 .md3 .link-accent {
   color: var(--md-primary);
@@ -4254,7 +4335,7 @@ line-height: 31px;
   box-shadow: 0 0 0 10px rgba(11, 83, 204, 0.18);
 }
 .md3 .exslider input[type="range"]:focus-visible::-webkit-slider-thumb {
-  box-shadow: 0 0 0 3px var(--md-accent);
+  box-shadow: 0 0 0 3px #005CFF;
 }
 /* body-type tile grid */
 /* body-type tile grid: 2-col in the narrow rail, auto-fill on the full Detailsuche page */
@@ -5711,8 +5792,9 @@ line-height: 31px;
   box-shadow: none;
 }
 .md3 .enq-float .mselect-btn:hover,
-.md3 .enq-float .mselect-btn[aria-expanded="true"] {
-  box-shadow: none;
+.md3 .enq-float .mselect-btn[aria-expanded="true"],
+.md3 .enq-float .mselect-btn:focus-visible {
+  box-shadow: none !important;
 }
 .md3 .enq-float .mselect-btn .lucide {
   width: 14px;
@@ -5766,7 +5848,7 @@ line-height: 31px;
   z-index: 60;
   width: 390px;
   height: 196px;
-  background: #F4F3F3;
+  background: rgba(244, 243, 243, 0.95);
   border: 1px solid #D4DDE7;
   border-radius: 16px 16px 0 0;
   box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.1);
@@ -6018,15 +6100,31 @@ 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. */
+/* Base (desktop) values for the TopBar layout/chrome 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;
 }
+.md3 .topbar {
+  background: var(--md-surface);
+  border-bottom: 1px solid var(--md-outline-variant);
+  transition: transform 0.25s, background 0.15s;
+}
+@media (max-width: 600px) {
+  /* slight transparency (0.95) — mobile only, coordinated with .vdp-bottom-bar's own 0.95. */
+  .md3 .topbar {
+    background: color-mix(in srgb, var(--md-surface) 95%, transparent);
+  }
+  /* autoHideOnScroll (CDP/VDP only, see TopBar.tsx) — slides the header off the top of the
+     viewport; transform doesn't affect its `position: sticky` layout slot, just the paint. */
+  .md3 .topbar.topbar--hidden {
+    transform: translateY(-100%);
+  }
+}
 
 /* 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
@@ -6905,7 +7003,10 @@ line-height: 31px;
   line-height: 1.2;
   text-align: center;
   color: var(--fig-gray);
-  white-space: nowrap;
+  /* two lines (e.g. "wtd." / "comb.") rather than one overflowing/truncated line — the column
+     is narrower than either label at this font-size, so letting it wrap at the natural word
+     break is what actually fits without spilling into neighbouring columns. */
+  white-space: normal;
   overflow: visible;
 }
 .md3 .co2-seg {
@@ -6927,6 +7028,9 @@ line-height: 31px;
   transform: scale(1.06);
 }
 .md3 .co2-seg--on2 {
+  /* PHEV discharged-class marker — was missing this, so only the weighted class (--on) showed
+     its full saturated colour while this one stayed the dim pastel base fill. */
+  background: var(--seg);
   border: 2px solid #fff;
   box-shadow: 0 2px 8px rgba(16, 22, 42, 0.22);
   transform: scale(1.04);
@@ -7971,6 +8075,16 @@ color: #005CFF;
     text-align: center;
     color: #ffffff;
   }
+  /* grid, not flex-wrap: with 4 stats (PHEV — weighted/discharged pairs) flex-wrap sized each
+     row's columns independently off that row's own content width, so the 2nd column drifted out
+     of alignment between rows whenever the two left-column labels weren't the same length
+     ("Stromverbrauch (gew.)" vs "Kraftstoff (entladen)"). Grid's 1fr columns stay a fixed width
+     shared across every row regardless of content, so both columns line up vertically. Mobile
+     only — desktop keeps the original flex-wrap layout. */
+  .md3 #vdp-eco .co2-stats {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
   .md3 #vdp-eco {
     border: 1px solid #D4DDE7;
     box-shadow: none;

package/ui/Dropdown.tsx

@@ -49,6 +49,10 @@ export interface DropdownProps {
   className?: string;
   /** align the popover to the right edge of the trigger (default left). */
   menuAlign?: 'left' | 'right';
+  /** show a text input at the top of the popover that filters `options` by label (substring, case-insensitive). */
+  searchable?: boolean;
+  /** placeholder for the search input (only used when `searchable`). */
+  searchPlaceholder?: string;
 }
 
 const Dropdown: React.FunctionComponent<DropdownProps> = ({
@@ -63,25 +67,60 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
   ariaLabel,
   className,
   menuAlign = 'left',
+  searchable = false,
+  searchPlaceholder,
 }) => {
   const [open, setOpen] = React.useState(false);
   const [activeIndex, setActiveIndex] = React.useState(-1);
+  const [query, setQuery] = React.useState('');
   const rootRef = React.useRef<HTMLDivElement | null>(null);
   const btnRef = React.useRef<HTMLButtonElement | null>(null);
   const menuRef = React.useRef<HTMLUListElement | null>(null);
+  const searchRef = React.useRef<HTMLInputElement | null>(null);
   // stable id base for aria-activedescendant (avoids Math.random / Date.now, which are unavailable).
   const idBase = React.useMemo(() => `mselect-${Math.round(value ? value.length : 0)}-`, [value]);
 
   const selectedIndex = options.findIndex((o) => o.value === value);
   const selected = selectedIndex !== -1 ? options[selectedIndex] : undefined;
 
+  const filteredOptions = React.useMemo(() => {
+    if (!searchable || !query.trim()) return options;
+    const q = query.trim().toLowerCase();
+    const matches = options.filter((o) => o.label.toLowerCase().includes(q));
+    // some option lists intentionally repeat entries across groups while closed (e.g. a "Top
+    // Marken" shortlist followed by the FULL "Alle Marken" list, which includes those same top
+    // brands again) — harmless when browsing both sections, but shows the same match twice while
+    // searching. Keep only the first occurrence of each label once the user is actually filtering.
+    const seen = new Set<string>();
+    return matches.filter((o) => {
+      const key = o.label.toLowerCase();
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    });
+  }, [searchable, query, options]);
+
+  // deferred: when searchable, the trigger <button> is swapped out for an <input> while
+  // open (see render), so btnRef.current is null *during* the close() call itself — the
+  // button only exists again after this state flips `open` back to false and React
+  // re-renders. Consumed by the effect below, once that re-render has actually happened.
+  const focusTriggerAfterClose = React.useRef(false);
+
   // close + restore focus to the trigger.
   const close = React.useCallback((focusTrigger: boolean) => {
     setOpen(false);
     setActiveIndex(-1);
-    if (focusTrigger && btnRef.current) btnRef.current.focus();
+    setQuery('');
+    focusTriggerAfterClose.current = focusTrigger;
   }, []);
 
+  React.useEffect(() => {
+    if (!open && focusTriggerAfterClose.current) {
+      focusTriggerAfterClose.current = false;
+      if (btnRef.current) btnRef.current.focus();
+    }
+  }, [open]);
+
   const openMenu = React.useCallback(() => {
     if (disabled) return;
     setOpen(true);
@@ -89,6 +128,18 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
     setActiveIndex(selectedIndex !== -1 ? selectedIndex : 0);
   }, [disabled, selectedIndex]);
 
+  // when opened searchable, focus the search input instead of leaving focus on the trigger.
+  // scrollIntoView first: on mobile the keyboard is about to eat ~40% of the viewport, so the
+  // trigger (and the popover below it) needs to already be scrolled above the fold before focus
+  // fires, or the popover can end up hidden behind the keyboard with no way to see it open.
+  React.useEffect(() => {
+    if (!open || !searchable) return;
+    if (rootRef.current && rootRef.current.scrollIntoView) {
+      rootRef.current.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    }
+    if (searchRef.current) searchRef.current.focus();
+  }, [open, searchable]);
+
   // click-away (guarded for SSR).
   React.useEffect(() => {
     if (!open || typeof document === 'undefined') return undefined;
@@ -106,8 +157,14 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
     if (el && el.scrollIntoView) el.scrollIntoView({ block: 'nearest' });
   }, [open, activeIndex]);
 
+  // reset the keyboard highlight to the top match whenever the filtered list changes.
+  React.useEffect(() => {
+    if (searchable && open) setActiveIndex(filteredOptions.length ? 0 : -1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filteredOptions]);
+
   const commit = (idx: number) => {
-    const opt = options[idx];
+    const opt = filteredOptions[idx];
     if (!opt || opt.disabled) return;
     onChange(opt.value);
     close(true);
@@ -115,17 +172,30 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
 
   // move the active highlight, skipping disabled options.
   const move = (dir: 1 | -1) => {
-    if (!options.length) return;
+    if (!filteredOptions.length) return;
     let i = activeIndex;
-    for (let step = 0; step < options.length; step += 1) {
-      i = (i + dir + options.length) % options.length;
-      if (!options[i].disabled) {
+    for (let step = 0; step < filteredOptions.length; step += 1) {
+      i = (i + dir + filteredOptions.length) % filteredOptions.length;
+      if (!filteredOptions[i].disabled) {
         setActiveIndex(i);
         return;
       }
     }
   };
 
+  const onMenuKeyDown = (e: React.KeyboardEvent) => {
+    switch (e.key) {
+      case 'ArrowDown': e.preventDefault(); move(1); break;
+      case 'ArrowUp': e.preventDefault(); move(-1); break;
+      case 'Home': e.preventDefault(); setActiveIndex(filteredOptions.findIndex((o) => !o.disabled)); break;
+      case 'End': e.preventDefault(); for (let i = filteredOptions.length - 1; i >= 0; i -= 1) { if (!filteredOptions[i].disabled) { setActiveIndex(i); break; } } break;
+      case 'Enter': e.preventDefault(); if (activeIndex >= 0) commit(activeIndex); break;
+      case 'Escape': e.preventDefault(); close(true); break;
+      case 'Tab': close(false); break;
+      default: break;
+    }
+  };
+
   const onTriggerKeyDown = (e: React.KeyboardEvent) => {
     if (disabled) return;
     if (!open) {
@@ -135,16 +205,8 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
       }
       return;
     }
-    switch (e.key) {
-      case 'ArrowDown': e.preventDefault(); move(1); break;
-      case 'ArrowUp': e.preventDefault(); move(-1); break;
-      case 'Home': e.preventDefault(); setActiveIndex(options.findIndex((o) => !o.disabled)); break;
-      case 'End': e.preventDefault(); for (let i = options.length - 1; i >= 0; i -= 1) { if (!options[i].disabled) { setActiveIndex(i); break; } } break;
-      case 'Enter': case ' ': e.preventDefault(); if (activeIndex >= 0) commit(activeIndex); break;
-      case 'Escape': e.preventDefault(); close(true); break;
-      case 'Tab': close(false); break;
-      default: break;
-    }
+    if (e.key === ' ') { e.preventDefault(); if (activeIndex >= 0) commit(activeIndex); return; }
+    onMenuKeyDown(e);
   };
 
   const wrapCls = ['mselect'];
@@ -154,49 +216,83 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
 
   const label = selected ? selected.label : placeholder || '';
 
+  const editing = searchable && open;
+
   return (
     <div className={wrapCls.join(' ')} ref={rootRef}>
-      <button
-        ref={btnRef}
-        type="button"
-        className="mselect-btn"
-        aria-haspopup="listbox"
-        aria-expanded={open}
-        aria-label={ariaLabel}
-        disabled={disabled}
-        onClick={() => (open ? close(false) : openMenu())}
-        onKeyDown={onTriggerKeyDown}
-      >
-        {icon && <Icon name={icon} />}
-        <span className={'mselect-label' + (selected ? '' : ' mselect-label--ph')}>{label}</span>
-        <Icon name="chevron-down" cls="mselect-chev" />
-      </button>
-      {open && (
-        <ul
-          ref={menuRef}
-          className={'mselect-menu' + (menuAlign === 'right' ? ' mselect-menu--right' : '')}
-          role="listbox"
-          tabIndex={-1}
-          aria-activedescendant={activeIndex >= 0 ? `${idBase}${activeIndex}` : undefined}
+      {editing ? (
+        // combobox mode: the trigger itself becomes the text field (not a separate input
+        // inside the popover) — a <button> can't legally contain an <input>, so this is a
+        // <div> standing in for it, same `.mselect-btn` class for identical chrome.
+        <div className="mselect-btn mselect-btn--editing">
+          {icon && <Icon name={icon} />}
+          <input
+            ref={searchRef}
+            type="text"
+            className="mselect-input"
+            placeholder={searchPlaceholder || placeholder}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={onMenuKeyDown}
+            aria-label={ariaLabel}
+            aria-haspopup="listbox"
+            aria-expanded={open}
+            aria-controls={`${idBase}list`}
+            aria-activedescendant={activeIndex >= 0 ? `${idBase}${activeIndex}` : undefined}
+          />
+          <button type="button" className="mselect-chev-btn" aria-label="Close" onClick={() => close(true)}>
+            <Icon name="chevron-down" cls="mselect-chev" />
+          </button>
+        </div>
+      ) : (
+        <button
+          ref={btnRef}
+          type="button"
+          className="mselect-btn"
+          aria-haspopup="listbox"
+          aria-expanded={open}
+          aria-label={ariaLabel}
+          disabled={disabled}
+          onClick={() => (open ? close(false) : openMenu())}
+          onKeyDown={onTriggerKeyDown}
         >
-          {options.map((opt, i) => (
-            <li key={`${opt.value}_${i}`} role="presentation">
-              <button
-                id={`${idBase}${i}`}
-                type="button"
-                role="option"
-                aria-selected={opt.value === value}
-                disabled={opt.disabled}
-                className={'mselect-opt' + (i === activeIndex ? ' is-active' : '')}
-                onMouseEnter={() => setActiveIndex(i)}
-                onClick={() => commit(i)}
-              >
-                <span className="mselect-opt-label">{opt.label}</span>
-                {opt.value === value && <Icon name="check" size={16} cls="mselect-check" />}
-              </button>
-            </li>
-          ))}
-        </ul>
+          {icon && <Icon name={icon} />}
+          <span className={'mselect-label' + (selected ? '' : ' mselect-label--ph')}>{label}</span>
+          <Icon name="chevron-down" cls="mselect-chev" />
+        </button>
+      )}
+      {open && (
+        <div className={'mselect-menu' + (menuAlign === 'right' ? ' mselect-menu--right' : '') + (searchable ? ' mselect-menu--searchable' : '')}>
+          <ul
+            ref={menuRef}
+            id={`${idBase}list`}
+            className="mselect-list"
+            role="listbox"
+            tabIndex={-1}
+            aria-activedescendant={activeIndex >= 0 ? `${idBase}${activeIndex}` : undefined}
+          >
+            {filteredOptions.map((opt, i) => (
+              <li key={`${opt.value}_${i}`} role="presentation">
+                <button
+                  id={`${idBase}${i}`}
+                  type="button"
+                  role="option"
+                  aria-selected={opt.value === value}
+                  disabled={opt.disabled}
+                  className={'mselect-opt' + (i === activeIndex ? ' is-active' : '')}
+                  onMouseEnter={() => setActiveIndex(i)}
+                  onClick={() => commit(i)}
+                >
+                  <span className="mselect-opt-label">{opt.label}</span>
+                  {opt.value === value && <Icon name="check" size={16} cls="mselect-check" />}
+                </button>
+              </li>
+            ))}
+            {searchable && filteredOptions.length === 0 && (
+              <li className="mselect-empty" role="presentation">Keine Treffer</li>
+            )}
+          </ul>
+        </div>
       )}
     </div>
   );

package/vdp/VdpModules.tsx

@@ -1442,10 +1442,11 @@ export const VdpStickyBar: React.FunctionComponent<VdpStickyBarProps> = ({ vehic
 export interface VdpBottomBarProps {
   vehicle: VehicleDetail;
   /**
-   * Whether the bar is docked/visible — mirrors VdpStickyBar's `show` (same
-   * page-owned scroll-position toggle, STICKY_SHOW_AT). Was unconditionally
-   * visible before, unlike the desktop VdpStickyBar; the mockup only shows it
-   * after scrolling past the main offer card.
+   * Whether the bar is docked/visible — page-owned scroll-position toggle: shows after scrolling
+   * past the main offer card (same STICKY_SHOW_AT threshold VdpStickyBar uses), and additionally
+   * hides again once the page scrolls into the similar-vehicles/legal-footer zone so it never
+   * covers that content. That bottom-of-page rule is mobile-only and NOT shared with
+   * VdpStickyBar's own `show` (the desktop bar has no such lower boundary).
    */
   show: boolean;
   /** active payment mode — drives the tabs + the displayed figure (rate vs price). */