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

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

@@ -2,10 +2,21 @@
 // BaseModalWrapper is replaced by a plain fixed overlay + centered surface.
 // Deliberately NOT the kit ui/Modal — the cookie consent dialog has no title
 // bar / close button and must not be dismissible without a choice.
+//
+// Rendered via ReactDOM.createPortal into document.body (same technique as
+// ui/Modal.tsx) rather than inline in the page tree: a React hydration-mismatch
+// error ANYWHERE else on the page (a known, separate bug — see the
+// SearchNextPage isMobile SSR/CSR mismatch) can corrupt sibling reconciliation
+// enough that an inline `position: fixed` overlay ends up mounted in the wrong
+// place in the DOM (observed: appearing as plain content below the footer
+// instead of as an overlay). A body-level portal is immune to that — its DOM
+// node never lives inside the page's own React subtree.
 
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
 import ModalsConfig from './ModalsConfig';
+import styles from './Modal.styl';
 
 interface IBasicModal {
   isVisible: boolean;
@@ -23,20 +34,26 @@ 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'
 };
 
 const BasicModal = ({ isVisible, toggleModal, name, modalProps, handleSentryInit }: IBasicModal) => {
-  if (!isVisible) return null;
-  return (
-    <div style={OVERLAY} role='dialog' aria-modal='true' aria-label='Cookie-Einstellungen'>
-      <div style={SURFACE}>
-        {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
+  if (!isVisible || typeof document === 'undefined') return null;
+  return ReactDOM.createPortal(
+    // wrapped in .md3: autobahn.css scopes every token/utility class (incl.
+    // .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 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>
-    </div>
+    </div>,
+    document.body
   );
 };
 

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

@@ -1,10 +1,10 @@
 @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%
 
 .modalTitle
   font-family: sans-serif
@@ -24,14 +24,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 +53,7 @@
   margin-top: 20px
   display: flex
   justify-content: center
-  gap: 18px;
-
-  +media-tablet-landscape-up()
-    gap: 36px;
+  gap: 36px;
 
 .modalBtn
   height: 38px
@@ -64,6 +65,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 +90,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/locales/de/autobahn.json

@@ -85,7 +85,7 @@
     "priceRatingAria": "Preisbewertung: {{rating}}",
     "detailsShow": "Details anzeigen",
     "paymentLabel": "Zahlung",
-    "paymentValue": "Überweisung oder bei Übergabe",
+    "paymentValue": "Zahlung per Überweisung",
     "warrantyLabel": "Garantie",
     "warrantyValue": "1 Jahr inklusive",
     "deliveryLabel": "Lieferung",
@@ -771,7 +771,7 @@
     },
     "step3": {
       "title": "Bezahlung",
-      "description": "Sicher online bezahlen oder bei der Übergabe — ohne versteckte Kosten."
+      "description": "Sicher per Überweisung bezahlen — ohne versteckte Kosten."
     },
     "step4": {
       "title": "Übergabe",

package/locales/en/autobahn.json

@@ -85,7 +85,7 @@
     "priceRatingAria": "Price rating: {{rating}}",
     "detailsShow": "Show details",
     "paymentLabel": "Payment",
-    "paymentValue": "Bank transfer or on handover",
+    "paymentValue": "Bank transfer",
     "warrantyLabel": "Warranty",
     "warrantyValue": "1 year included",
     "deliveryLabel": "Delivery",
@@ -771,7 +771,7 @@
     },
     "step3": {
       "title": "Payment",
-      "description": "Pay securely online or on handover — with no hidden costs."
+      "description": "Pay securely by bank transfer — with no hidden costs."
     },
     "step4": {
       "title": "Handover",

package/package.json

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