@bytebrand/fe-ui-core-autobahn 1.0.94 → 1.0.96

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/CookieModal.tsx

@@ -22,6 +22,16 @@ const CookieModal = ({ handleSentryInit }: ICookieModal) => {
     []
   );
 
+  useEffect(
+    () => {
+      if (!isVisible) return undefined;
+      const previousOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return () => { document.body.style.overflow = previousOverflow; };
+    },
+    [isVisible]
+  );
+
   const onClearModalState = () => {
     setModal('');
   };

package/compat/CookieModal/Modal.styl

@@ -0,0 +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

package/compat/CookieModal/Modal.tsx

@@ -16,6 +16,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 import ModalsConfig from './ModalsConfig';
+import styles from './Modal.styl';
 
 interface IBasicModal {
   isVisible: boolean;
@@ -33,9 +34,9 @@ const OVERLAY: React.CSSProperties = {
 };
 
 const SURFACE: React.CSSProperties = {
-  background: 'var(--md-sc-lowest, #fff)',
-  borderRadius: 'var(--md-r-lg, 16px)',
-  boxShadow: 'var(--md-e3, 0 8px 24px rgba(0,0,0,.2))',
+  background: '#FFFFFF',
+  borderRadius: '10px',
+  boxShadow: '0px 0px 20px rgba(76, 78, 100, 0.4)',
   maxWidth: 640, width: '100%', maxHeight: '92vh', overflowY: 'auto'
 };
 
@@ -46,8 +47,8 @@ const BasicModal = ({ isVisible, toggleModal, name, modalProps, handleSentryInit
     // .mbtn used by the modal buttons) under `.md3` and intentionally does
     // nothing outside it — a bare document.body portal loses the theme.
     <div className='md3'>
-      <div style={OVERLAY} role='dialog' aria-modal='true' aria-label='Cookie-Einstellungen'>
-        <div style={SURFACE}>
+      <div className={styles.overlay} style={OVERLAY} role='dialog' aria-modal='true' aria-label='Cookie-Einstellungen'>
+        <div className={styles.surface} style={SURFACE}>
           {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
         </div>
       </div>

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

@@ -1,10 +1,12 @@
 @import '../../../legacy-theme/mixins.styl';
 
 .modalWrapper
-  padding: 13px 15px 28px;
+  padding: 25px;
   text-align: center
   box-sizing: border-box
-  max-width: 600px
+  max-width: 100%
+  +media-tablet-down()
+    padding: 16px 15px 12px 15px
 
 .modalTitle
   font-family: sans-serif
@@ -24,14 +26,18 @@
   text-align: justify;
   letter-spacing: 0.15px;
   color: rgba(76, 78, 100, 0.87);
-  margin-top: 12px
-  margin-right: 25px
+  margin-top: 5px
+  margin-right: 7px
+.accordionDescription
+  display: block
+  font-size: 14px
+  line-height: 18px
+  text-align: left
+  margin-bottom: 5px
 
-  +media-tablet-up()
-    margin-top: 20px
 .accordions
   height: 278px
-  overflow-y: scroll
+  overflow-y: auto
   padding-right: 10px
   margin-top: 16px
   &::-webkit-scrollbar {
@@ -49,10 +55,7 @@
   margin-top: 20px
   display: flex
   justify-content: center
-  gap: 18px;
-
-  +media-tablet-landscape-up()
-    gap: 36px;
+  gap: 36px;
 
 .modalBtn
   height: 38px
@@ -64,6 +67,23 @@
 .outlinedBtn
   border: none !important;
 
+.zustimmenBtn
+  width: calc(50% - 18px) !important
+  min-width: calc(50% - 18px) !important
+  height: 38px !important
+  background: #005CCB !important
+  border-radius: 4px !important
+  display: flex !important
+  align-items: center !important
+  justify-content: center !important
+  text-align: center !important
+  font-family: 'Arial' !important
+  font-style: normal !important
+  font-weight: 400 !important
+  font-size: 14px !important
+  line-height: 16px !important
+  color: #FFFFFF !important
+
 .switchBlock
   display: flex
   align-items: center
@@ -72,6 +92,27 @@
   letter-spacing: 1px
   color: rgba(76, 78, 100, 0.87)
   text-align: left
+  margin-bottom: 5px
+
+  &:last-child
+    margin-bottom: 0
+
+  > span:last-child
+    display: inline-flex
+    align-items: center
+
+  :global
+    .mswitch-track
+      margin-left: 5px
+      width: 38px
+      height: 22px
+
+    .mswitch-thumb
+      width: 16px
+      height: 16px
+
+    .mswitch input:checked + .mswitch-track .mswitch-thumb
+      transform: translateX(16px)
 
 .switchBlockTitle
   width: 140px;

package/compat/CookieModal/modals/ManageCookieModal/ManageCookieModal.tsx

@@ -115,11 +115,11 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
       <div className={styles.accordions}>
         <MaterialAccordionGroup
           title='Notwendig'
-          tooltipText='Notwendig'
+          // tooltipText='Notwendig'
           withSwitch
           switchProps={necessarySwitchProps}
         >
-          <span>Wir verwenden Browser-Cookies, die notwendig sind, damit die Website wie vorgesehen funktioniert. Beispiel: Wir speichern Ihre Präferenzen bei der Datenerfassung auf der Website, damit wir sie berücksichtigen können, wenn Sie auf unsere Website zurückkehren. Sie können diese Cookies in den Einstellungen Ihres Browsers deaktivieren, aber wenn Sie dies tun, funktioniert die Website möglicherweise nicht wie vorgesehen.</span>
+          <span className={styles.accordionDescription}>Wir verwenden Browser-Cookies, die notwendig sind, damit die Website wie vorgesehen funktioniert. Beispiel: Wir speichern Ihre Präferenzen bei der Datenerfassung auf der Website, damit wir sie berücksichtigen können, wenn Sie auf unsere Website zurückkehren. Sie können diese Cookies in den Einstellungen Ihres Browsers deaktivieren, aber wenn Sie dies tun, funktioniert die Website möglicherweise nicht wie vorgesehen.</span>
           {Object.keys(COOKIE_SCHEMA.necessary).map(cookie => {
             const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
             return (
@@ -134,10 +134,10 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
         <MaterialAccordionGroup
           title='Analytisch'
           withSwitch
-          tooltipText='Analytisch'
+          // tooltipText='Analytisch'
           switchProps={analyticsSwitchProps}
         >
-          <span>Um das Nutzerverhalten zu verstehen und Ihnen ein relevanteres Surferlebnis zu bieten oder den Inhalt unserer Website zu personalisieren. Beispiel: Wir sammeln Informationen darüber, welche Seiten Sie besuchen, damit wir Ihnen relevantere Informationen präsentieren können.</span>
+          <span className={styles.accordionDescription}>Um das Nutzerverhalten zu verstehen und Ihnen ein relevanteres Surferlebnis zu bieten oder den Inhalt unserer Website zu personalisieren. Beispiel: Wir sammeln Informationen darüber, welche Seiten Sie besuchen, damit wir Ihnen relevantere Informationen präsentieren können.</span>
           {Object.keys(COOKIE_SCHEMA.analytics).map(cookie => {
             const getItemsFromCategory = _get(COOKIE_SCHEMA, `analytics['${cookie}']`, null);
             const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
@@ -158,10 +158,10 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
         <MaterialAccordionGroup
           title='Marketing'
           withSwitch
-          tooltipText='Marketing'
+          // tooltipText='Marketing'
           switchProps={marketingSwitchProps}
         >
-          <span>Zur Personalisierung und Messung der Effektivität von Werbung auf unserer Website und anderen Websites. Beispiel: Wir können Ihnen eine personalisierte Werbung auf der Grundlage der von Ihnen besuchten Seiten auf unserer Website anzeigen.</span>
+          <span className={styles.accordionDescription}>Zur Personalisierung und Messung der Effektivität von Werbung auf unserer Website und anderen Websites. Beispiel: Wir können Ihnen eine personalisierte Werbung auf der Grundlage der von Ihnen besuchten Seiten auf unserer Website anzeigen.</span>
           {Object.keys(COOKIE_SCHEMA.marketing).map(cookie => {
             const getItemsFromCategory = _get(COOKIE_SCHEMA, `marketing['${cookie}']`, null);
             const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
@@ -181,8 +181,8 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
         </MaterialAccordionGroup>
       </div>
       <div className={styles.buttonsContainer}>
-        <Button onClick={() => onAccept()} className={classNames(styles.modalBtn, styles.outlinedBtn)} >Auswahl speichern</Button>
-        <Button onClick={() => onAccept({ marketing: [], analytics: [] })} className={styles.modalBtn}>Alles akzeptieren</Button>
+        <Button onClick={() => onAccept()} className={classNames(styles.modalBtn, styles.outlinedBtn, styles.zustimmenBtn)} >Auswahl speichern</Button>
+        <Button onClick={() => onAccept({ marketing: [], analytics: [] })} className={classNames(styles.modalBtn, styles.zustimmenBtn)}>Alles akzeptieren</Button>
       </div>
     </div>
   );

package/compat/CookieModal/modals/PreviewCookieModal/PreviewCookieModal.styl

@@ -1,12 +1,12 @@
 @import '../../../legacy-theme/mixins.styl';
 
 .modalWrapper
-  padding: 28px 58px 28px
+  padding: 25px
   text-align: center
   box-sizing: border-box
-  max-width: 600px
+  max-width: 100%
   +media-tablet-down()
-    padding: 16px 15px 28px
+    padding: 16px 15px 12px 15px
 
 .modalTitle
   font-family: sans-serif
@@ -17,7 +17,12 @@
   margin-top: 20px
 
   +media-tablet-down()
+    font-family: 'Arial';
+    font-weight: 700;
     font-size: 16px;
+    line-height: 32px;
+    text-align: center;
+    color: rgba(76, 78, 100, 0.87);
     margin-top: 8px;
 
 .modalContent
@@ -29,9 +34,13 @@
   color: rgba(76, 78, 100, 0.87);
   margin-top: 20px
   +media-tablet-down()
+    font-family: 'Arial';
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    letter-spacing: 0.15px;
+    color: rgba(76, 78, 100, 0.87);
     column-gap: 0;
-    max-height: 320px;
-    overflow-y: scroll;
     padding-right: 10px;
     margin-right: -10px;
     margin-top: 8px
@@ -55,13 +64,68 @@
   +media-tablet-down()
     font-size: 11px !important
 
+.necessaryCookiesBtn
+  display: flex !important
+  flex-direction: column !important
+  align-items: center !important
+  justify-content: center !important
+  width: 184px !important
+  min-width: 184px !important
+  height: 38px !important
+  background: #005CCB !important
+  box-shadow: 0px 4px 8px -4px rgba(76, 78, 100, 0.42) !important
+  border-radius: 4px !important
+  font-family: 'Inter' !important
+  font-weight: 500 !important
+  font-size: 14px !important
+  line-height: 24px !important
+  letter-spacing: 0.4px !important
+  color: #FFFFFF !important
+
+.anpassenBtn
+  border: 1px solid rgba(102, 108, 255, 0.5) !important
+  box-shadow: none !important
+  border-radius: 4px !important
+  width: 142.5px !important
+  min-width: 142.5px !important
+  height: 38px !important
+  display: flex !important
+  align-items: center !important
+  justify-content: center !important
+  text-align: center !important
+  font-family: 'Arial' !important
+  font-weight: 400 !important
+  font-size: 14px !important
+  line-height: 16px !important
+  color: #1976D2 !important
+
+.zustimmenBtn
+  width: 142.5px !important
+  min-width: 142.5px !important
+  height: 38px !important
+  background: #005CCB !important
+  border-radius: 4px !important
+  display: flex !important
+  align-items: center !important
+  justify-content: center !important
+  text-align: center !important
+  font-family: 'Arial' !important
+  font-style: normal !important
+  font-weight: 400 !important
+  font-size: 14px !important
+  line-height: 16px !important
+  color: #FFFFFF !important
+
 .outlinedBtnLeft
   display: flex;
   justify-content: flex-end;
+  font-family: 'Arial';
+  font-weight: 400;
   color: #005CCB;
   font-size: 16px;
+  line-height: 24px;
   text-decoration: none;
-  margin-top: 12px;
+  margin-top: 3px;
   margin-bottom: 0;
   margin-left: auto;
   max-width: 80px;

package/compat/CookieModal/modals/PreviewCookieModal/PreviewCookieModal.tsx

@@ -32,7 +32,7 @@ const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPrevi
     <div className={styles.modalWrapper}>
       <div className={styles.logoContainer}>
         <IconSVG name='autodeLogo' customDimensions />
-        <Button onClick={onDisableAll} className={styles.modalBtn}>Nur notwendige Cookies</Button>
+        <Button onClick={onDisableAll} className={`${styles.modalBtn} ${styles.necessaryCookiesBtn}`}>Nur notwendige Cookies</Button>
       </div>
       <div className={styles.modalTitle}>Nach den Cookies geht die Fahrt weiter.</div>
       <div className={styles.modalContent}>
@@ -42,8 +42,8 @@ const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPrevi
       </div>
       <a href={`${environment}/impressum/`} target='_blank' className={styles.outlinedBtnLeft}>Impressum</a>
       <div className={styles.buttonsContainer}>
-        <Button onClick={() => setModal('MANAGE_COOKIE_MODAL')} className={styles.modalBtn} variant='outlined'>Anpassen</Button>
-        <Button onClick={onAcceptAll} className={styles.modalBtn}>zustimmen</Button>
+        <Button onClick={() => setModal('MANAGE_COOKIE_MODAL')} className={`${styles.modalBtn} ${styles.anpassenBtn}`} variant='outlined'>Anpassen</Button>
+        <Button onClick={onAcceptAll} className={`${styles.modalBtn} ${styles.zustimmenBtn}`}>zustimmen</Button>
       </div>
     </div>
   );

package/compat/MdAccordionGroup/MdAccordionGroup.tsx

@@ -32,7 +32,7 @@ const MdAccordionGroup: React.FC<IMdAccordionGroupProps> = ({ title, tooltipText
         aria-expanded={open}
         onClick={toggle}
         onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } }}
-        style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', width: '100%' }}
+        style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', width: '100%', paddingLeft: 15, paddingRight: 15 }}
       >
         <span className='macc-hd-text' style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
           <span className='macc-title md-title'>{title}</span>
@@ -45,7 +45,7 @@ const MdAccordionGroup: React.FC<IMdAccordionGroupProps> = ({ title, tooltipText
         ) : null}
         <Icon name='chevron-down' cls='macc-chev' />
       </div>
-      {open ? <div style={{ padding: '4px 15px 12px' }}>{children}</div> : null}
+      {open ? <div style={{ padding: '10px' }}>{children}</div> : null}
     </section>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.94",
+  "version": "1.0.96",
   "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,49 @@ 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();
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [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 +117,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 +146,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 +161,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 +194,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 +205,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). */