@bytebrand/fe-ui-core-autobahn 1.0.157 → 1.0.159

package/cards/CarCard.tsx

@@ -157,6 +157,8 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   // active that's already 3, so NEU is dropped rather than causing a 4th to overflow.
   const activeDealChips = [showDrop || showSave, showPct, !!car.zeroDown].filter(Boolean).length;
   const showNeu = asGoodAsNew && car.isNew && activeDealChips < 3;
+  // tabs the price block can switch to (PriceTabs shows Leasing only when the car has a lease rate)
+  const paymentModes: PaymentMode[] = car.lease != null ? ['financing', 'leasing', 'buy'] : ['financing', 'buy'];
   return (
     <article
       className="mcard mcard--interactive cc-card"
@@ -277,18 +279,46 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
         <div className="cc-price" style={{ marginTop: 0, borderTop: '1px solid var(--md-outline-variant)' }}>
           <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 10 }}>
-            <PriceHero car={car} mode={mode} t={t} alwaysShowUnit />
+            {/* every tab's hero stacked in one grid cell (.cc-hero-stack), only the active one
+                visible, bottom-aligned — Kaufen's struck list price sits on its own line above
+                the price, so without this the row (and the card) grew/shrank by that line on
+                every tab switch. Same trick as .cc-terms-stack below. */}
+            <div className="cc-hero-stack">
+              {paymentModes.map((m) => (
+                <div
+                  key={m}
+                  className={'cc-hero-slot' + (m === mode ? '' : ' cc-hero-slot--hidden')}
+                  aria-hidden={m === mode ? undefined : true}
+                >
+                  <PriceHero car={car} mode={m} t={t} alwaysShowUnit />
+                </div>
+              ))}
+            </div>
             <PriceEvalCol car={car} t={t} />
           </div>
           {/* same fallback CardCtaRow already uses below: pages that haven't wired a real
-              "Rate anpassen" sheet yet still get a working "Details" link (opens the car). */}
-          <PriceTerms
-            car={car}
-            mode={mode}
-            onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
-            onShowDetails={onShowFinancingDetails ? () => onShowFinancingDetails(car, mode) : undefined}
-            t={t}
-          />
+              "Rate anpassen" sheet yet still get a working "Details" link (opens the car).
+              Every tab's terms line is rendered into the same grid cell (.cc-terms-stack) and
+              only the active one is visible — the cell is as tall as the tallest line, so the
+              card keeps one height across Finanzierung/Leasing/Kaufen (Leasing's longer line
+              wraps to 2 lines on narrow phones). No change to the visible line itself. */}
+          <div className="cc-terms-stack">
+            {paymentModes.map((m) => (
+              <div
+                key={m}
+                className={'cc-terms-slot' + (m === mode ? '' : ' cc-terms-slot--hidden')}
+                aria-hidden={m === mode ? undefined : true}
+              >
+                <PriceTerms
+                  car={car}
+                  mode={m}
+                  onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
+                  onShowDetails={onShowFinancingDetails ? () => onShowFinancingDetails(car, m) : undefined}
+                  t={t}
+                />
+              </div>
+            ))}
+          </div>
         </div>
         {/* Mobile-only row (CardCtaRow itself carries the show-mobile class) — always
             rendered, with real fallbacks the page can override once it wires its own

package/cards/cardParts.tsx

@@ -710,7 +710,12 @@ export const PriceTerms: React.FunctionComponent<{
   onShowDetails?: () => void;
   t: TranslationFunction;
 }> = ({ car, mode, onOpenRateAdjust, onShowDetails, t }) => {
-  if (mode === 'buy') return null;
+  // Kaufen (buy): a cash purchase has no financing terms/details link — used to `return null`
+  // here, which collapsed .cc-terms to 0 height on that tab while Financing/Leasing rendered a
+  // real line, jumping the price row (and everything below it: rating pill, CTA row) up/down on
+  // every tab switch. Render an empty, still-present .cc-terms div instead — same fix as the VDP
+  // FinanceCalculator's .fin-cond (md3.css), which reserves its line's height the same way.
+  if (mode === 'buy') return <div className="cc-terms" />;
   const finFirstInstallment =
     car.finFirstInstallment != null ? car.finFirstInstallment.toLocaleString('de-DE') : _finFirstInstallment;
   const finMonths = car.finMonths ?? _finMonths;

package/compat/CookieModal/CookieModal.tsx

@@ -7,7 +7,7 @@ export interface ICookieModal {
   handleSentryInit?: () => void;
 }
 
-const CookieModal = ({ handleSentryInit }: ICookieModal) => {
+const CookieModal = ({ handleSentryInit = () => {} }: ICookieModal) => {
   const { isVisible, toggleModal } = useModal();
   const [modal, setModal] = useState('');
 
@@ -52,8 +52,4 @@ const CookieModal = ({ handleSentryInit }: ICookieModal) => {
     : <></>;
 };
 
-CookieModal.defaultProps = {
-  handleSentryInit: () => {}
-};
-
 export default CookieModal;

package/compat/Loader/Loader.tsx

@@ -10,7 +10,7 @@ export interface ILoaderProps {
   fluid?: boolean;
 }
 
-const Loader: React.FC<ILoaderProps> = ({ className, size, fluid }) => {
+const Loader: React.FC<ILoaderProps> = ({ className = '', size = 'medium', fluid = false }) => {
   const classNames = classnames(
     styles.loader,
     { [styles[size]]: !fluid },
@@ -23,10 +23,4 @@ const Loader: React.FC<ILoaderProps> = ({ className, size, fluid }) => {
   );
 };
 
-Loader.defaultProps = {
-  className: '',
-  size: 'medium',
-  fluid: false
-};
-
 export default Loader;

package/constants/app.ts

@@ -40,7 +40,17 @@ export const LOCAL_STORAGE_KEY = {
   i18n_KEY: 'i18nLanguage'
 };
 
-export const DEFAULT_LANG: string = typeof window !== 'undefined' ? localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY) : 'de';
+// ADV-284: evaluated at import time — with site storage blocked, reading localStorage throws a
+// SecurityError that took down the whole bundle. Blocked storage behaves like "nothing saved".
+const readStoredLang = (): string | null => {
+  try {
+    return localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY);
+  } catch (e) {
+    return null;
+  }
+};
+
+export const DEFAULT_LANG: string = typeof window !== 'undefined' ? readStoredLang() : 'de';
 
 // Default support contact phone
 export const CONTACT_PHONE: string = '+498004030182';

package/constants/core.ts

@@ -35,7 +35,18 @@ export const LOCAL_STORAGE_KEY = {
   i18n_KEY: 'i18nLanguage'
 };
 
-export const DEFAULT_LANG: string = (typeof window !== 'undefined' ? window.localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY) : null) ?? 'de';
+// ADV-284: evaluated at import time — with site storage blocked, merely reading
+// window.localStorage throws a SecurityError, which took down the whole bundle (landing
+// page never rendered). Treat blocked storage like "no language saved".
+const readStoredLang = (): string | null => {
+  try {
+    return typeof window !== 'undefined' ? window.localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY) : null;
+  } catch (e) {
+    return null;
+  }
+};
+
+export const DEFAULT_LANG: string = readStoredLang() ?? 'de';
 
 export const ROW_STYLES = {
   marginBottom: 10

package/iconsvg/IconSVG.tsx

@@ -7,7 +7,7 @@ type TIconSVG = {
   customDimensions?: boolean;
 };
 
-const IconSVG: React.FC<TIconSVG> = ({ name, isWarrantyActive, customDimensions, ...props }: TIconSVG) => {
+const IconSVG: React.FC<TIconSVG> = ({ name, isWarrantyActive, customDimensions = false, ...props }: TIconSVG) => {
   if (!name) return null;
 
   const Component: any = components[name.toString()];
@@ -23,8 +23,4 @@ const IconSVG: React.FC<TIconSVG> = ({ name, isWarrantyActive, customDimensions,
   );
 };
 
-IconSVG.defaultProps = {
-  customDimensions: false
-};
-
 export default IconSVG;

package/locales/legacy/data.ts

@@ -103,7 +103,8 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         wltpDischargedCombinedLabel: `${getFormattedNumber(vehicleOption.wltpCombined != null ? vehicleOption.wltpCombined : 19.9)}l/100km (entladen, komb)`,
         wltpCo2WtdCombinedShort: `${getFormattedNumber(vehicleOption.wltpCo2)}g CO2/km (gew., komb)*`,
         co2ClassWeighted: `CO2-Klasse ${(cbd.cbd as any)[vehicleOption.wltpEnergyEfficiencyClass] || vehicleOption.wltpEnergyEfficiencyClass || ''} (gew., komb)`,
-        co2ClassDischarged: `CO2-Klasse ${(cbd.cbd as any)[vehicleOption.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g'] || ''} (entladen, komb)`
+        // ADV-187: no hard-coded fallback class — callers only render this when the class is defined.
+        co2ClassDischarged: `CO2-Klasse ${(cbd.cbd as any)[vehicleOption.wltpDischargedEnergyEfficiencyClass] || vehicleOption.wltpDischargedEnergyEfficiencyClass || ''} (entladen, komb)`
       },
       title: {
         'addOfferToMainSlide': 'Zum Schieberegler hinzufügen',

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.157",
-  "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",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "dependencies": {
-    "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.20",
-    "classnames": "2.2.6",
-    "clsx": "^2.1.1",
-    "d3-format": "1.4.5",
-    "js-cookie": "^2.2.0",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.288.0",
-    "mobx-react": "^7.6.0",
-    "moment": "^2.29.1",
-    "qs": "^6.6.0",
-    "react-device-detect": "^2.1.2",
-    "react-grid-system": "^5.0.2",
-    "react-lazyload": "^3.2.0",
-    "react-scroll": "^1.9.3",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "1.8.1"
-  }
-}
+{
+  "name": "@bytebrand/fe-ui-core-autobahn",
+  "version": "1.0.159",
+  "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",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@bytebrand/car-schema-selectors": "^2.0.7",
+    "@bytebrand/fe-financing": "^5.14.20",
+    "classnames": "2.2.6",
+    "clsx": "^2.1.1",
+    "d3-format": "1.4.5",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.288.0",
+    "mobx-react": "^7.6.0",
+    "moment": "^2.29.1",
+    "qs": "^6.6.0",
+    "react-device-detect": "^2.1.2",
+    "react-grid-system": "^5.0.2",
+    "react-lazyload": "^3.2.0",
+    "react-scroll": "^1.9.3",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "1.8.1"
+  }
+}

package/theme/md3.css

@@ -2991,6 +2991,12 @@ line-height: 31px;
 .md3 .co-address-grid .mfield-error-text {
   display: none;
 }
+/* co-birthdate opts back in: future-date/under-18/empty all show the same red border, so
+   unlike the rest of .co-personal-grid the reason actually needs to be spelled out. */
+.md3 .co-personal-grid .co-birthdate .mfield-error-text {
+  display: block;
+  margin-top: 4px;
+}
 /* bug: clearing a valid field and tabbing away flashed the base .mfield:focus-within blue
    ring (#005CFF) for a moment before the error class/red border landed — green -> blue ->
    red. Dropping the blue ring here removes that flash; valid/error still show via their own
@@ -3152,6 +3158,20 @@ line-height: 31px;
 /* Vorwahl/Telefonnummer values (the "Land" dropdown has no <input>, so this only hits these two). */
 .md3 .co-phone .mfield input {
   font-size: 15px;
+  padding: 0;
+}
+/* valid check floats in the corner, not in the flex row — the digits need the column's width */
+.md3 .co-phone .mfield .mfield-ok {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+}
+.md3 .co-phone .mfield {
+  padding: 0 8px;
+}
+.md3 .co-phone .mfield.mfield--floating.mfield--valid {
+  padding: 0 25px 0 8px;
 }
 /* "Land" country-code select — same floating-notched-label look as RegistrationForm.tsx's
    .countryCode (OfferRequestModals/modals.styl + mixins.styl's floatingField(), Stylus/CSS
@@ -4812,8 +4832,38 @@ line-height: 31px;
     gap: 12px;
   }
   .md3 .oo-ls-cell {
-    padding: 0 !important;
-    border-left: 0 !important;
+    padding: 0;
+  }
+  .md3 .oo-ls-cell:not(:first-child) {
+    border-left: 0;
+  }
+}
+/* ≤600px Figma mobile variant (63571:28382): rules between rows with 12px above and below,
+   replacing the 800px stack's gap. */
+@media (max-width: 600px) {
+  .md3 .oo-ls-row {
+    gap: 0;
+  }
+  .md3 .oo-ls-cell {
+    padding: 0 0 12px;
+  }
+  .md3 .oo-ls-cell:not(:first-child) {
+    padding-top: 12px;
+    border-top: 1px solid var(--md-outline-variant);
+  }
+  .md3 .oo-ls-cell:last-child {
+    padding-bottom: 0;
+  }
+  .md3 .oo-ls-title-row .oo-ls-title,
+  .md3 .oo-ls-title-row ~ .oo-ls-sub,
+  .md3 .oo-ls-terms-link {
+    font-family: Arimo, Arial, sans-serif;
+  }
+  .md3 .oo-ls-terms-link {
+    margin-top: 0;
+  }
+  .md3 .oo-ls-title-row .lucide {
+    stroke: var(--md-on-surface-variant);
   }
 }
 /* "2 Jahre Garantie" "i" popover (OrderOverviewNext.tsx) — same AddServicesTooltipBody/
@@ -5440,6 +5490,12 @@ line-height: 31px;
   min-width: 0;
   flex: 1 0 0;
 }
+.md3 .oo-vs-text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
 .md3 .oo-vs-name {
   font-family: Arial;
   font-weight: 700;
@@ -5486,6 +5542,40 @@ line-height: 31px;
 .md3 .oo-vs-seller-icon {
   flex: none;
 }
+/* mobile only (Figma 63571:28325): photo 110×70 and the vehicle text share row 1, the text
+   centred on the photo; the seller row spans the full width below, 12px under the row */
+@media (max-width: 600px) {
+  .md3 .oo-vs-row {
+    display: grid;
+    grid-template-columns: 110px minmax(0, 1fr);
+    grid-template-rows: minmax(70px, auto) auto;
+    column-gap: 14px;
+    row-gap: 12px;
+  }
+  .md3 .oo-vs-info {
+    display: contents;
+  }
+  .md3 .oo-vs-photo {
+    grid-column: 1;
+    grid-row: 1;
+    width: 110px;
+    height: 70px;
+    border-radius: 0;
+  }
+  .md3 .oo-vs-text {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: center;
+  }
+  .md3 .oo-vs-name {
+    font-size: 16px;
+  }
+  .md3 .oo-vs-seller {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    justify-self: start;
+  }
+}
 .md3 .oo-row {
   padding: 12px 0;
   border-bottom: 1px solid var(--md-outline-variant);
@@ -5573,10 +5663,18 @@ line-height: 31px;
    gap (14px), same as every other direct child in this step. */
 .md3 .oo-legal-notice {
   margin: 0;
-  font-family: Arial;
+  font-family: 'Arimo';
+  font-weight: 400;
   font-size: 13px;
   line-height: 1.5;
+  letter-spacing: 0;
   color: var(--md-on-surface-variant);
+  text-align: left;
+}
+@media (max-width: 600px) {
+  .md3 .oo-legal-notice {
+    text-align: justify;
+  }
 }
 .md3 .oo-legal-link {
   text-decoration: underline;
@@ -5864,6 +5962,17 @@ line-height: 31px;
      line instead of sitting visibly lower (more obvious once the label wraps to 2 lines). */
   margin-top: 7px;
 }
+@media (max-width: 600px) {
+  .md3 .oo-terms-block .mcheck {
+    padding: 0;
+  }
+  .md3 .oo-terms-block .mcheck-box {
+    margin-top: 0;
+  }
+  .md3 .oo-terms-block .mcheck-label {
+    padding-top: 0;
+  }
+}
 /* Error state (Figma 64670:106293, "Jetzt kaufen" clicked without confirming both agreements) —
    unconfirmed checkbox gets a thicker red box, plus an icon+message row underneath, indented
    32px (20px box + 12px gap) to sit under the label rather than the box. errorIcon (FormCheckbox
@@ -6026,6 +6135,10 @@ line-height: 31px;
     background: var(--md-outline-variant);
   }
 }
+/* legal-document dialogs: title clears .mmodal-head-action too (24 + 40 + 4 + 40) */
+.md3 .oo-terms-modal--doc .mmodal-head {
+  padding-right: 108px;
+}
 /* "8. Rabatt-Code hinzufügen" card (Figma 63570:28464) — its own full-width .co-card at the
    bottom of the page. Unlike "6."/"7." (where only the small chevron button toggles), the whole
    header row is the click target here — the .h3.co-card-title wraps a full-width
@@ -6366,7 +6479,7 @@ line-height: 31px;
   /* every narrowed checkout field (Vorname/Nachname/Straße/Nr./PLZ/Stadt/…) has the same
      .mfield flex gap:10px reserving room for the trailing .mfield-ok checkmark — fine at
      full width, but at mobile widths it was squeezing the input text out of view (same
-     root cause the .co-phone-only fix below already addresses for Vorwahl/Telefonnummer;
+     root cause the .co-phone rules above already address for Vorwahl/Telefonnummer;
      this covers the rest of .co-form). Taking the icon out of flow removes that reserved
      space; the field's own right padding is bumped so text still clears the icon. */
   .md3 .co-form .mfield-ok {
@@ -6399,20 +6512,6 @@ line-height: 31px;
   .md3 .co-phone .co-birthdate {
     grid-column: 1 / -1;
   }
-  /* Vorwahl/Telefonnummer at 78px/1fr are too narrow for the flex gap:10px .mfield base rule
-     to reserve room for .mfield-ok inline — it was squeezing the input itself. Taking the
-     checkmark out of flow (.mfield already has position:relative, base rule above) removes
-     that reserved space; the input's own right padding (from .mfield--floating.mfield--valid,
-     10px) is bumped so its text still clears the icon. */
-  .md3 .co-phone .mfield-ok {
-    position: absolute;
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-  }
-  .md3 .co-phone .mfield--floating.mfield--valid {
-    padding-right: 34px;
-  }
   .md3 .co-address-row {
     display: flex;
     flex-direction: column;
@@ -14072,6 +14171,10 @@ color: #005CFF;
   max-width: 800px;
 }
 
+/* the dialog itself takes focus on open (Modal.tsx): keep its shadow, not the generic focus ring */
+.md3 .mmodal:focus-visible {
+  box-shadow: var(--md-e3) !important;
+}
 .md3 .mmodal-head {
   flex: none;
   display: flex;
@@ -14115,6 +14218,25 @@ color: #005CFF;
 .md3 .mmodal-close:hover {
   background: var(--md-sc-high);
 }
+/* Modal.tsx headerAction: absolute like .mmodal-close, 4px to its left (right = 24 + 40 + 4). */
+.md3 .mmodal-head-action {
+  position: absolute;
+  top: 20px;
+  right: 68px;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--md-r-full);
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.md3 .mmodal-head-action:hover {
+  background: var(--md-sc-high);
+}
 
 .md3 .mmodal-body {
   flex: 1 1 auto;

package/ui/Modal.tsx

@@ -51,6 +51,8 @@ export interface ModalProps {
    *  md3.css), so callers with a specific close-icon spec (exact asset, absolute position
    *  independent of title height) aren't stuck fighting the default's flex layout. */
   closeIcon?: React.ReactNode;
+  /** optional extra header button rendered before the close button (e.g. a download action). */
+  headerAction?: React.ReactNode;
 }
 
 // focusable descendants used by the basic focus trap.
@@ -67,6 +69,7 @@ const Modal: React.FunctionComponent<ModalProps> = ({
   dismissOnScrim = true,
   className,
   closeIcon,
+  headerAction,
 }) => {
   const surfaceRef = React.useRef<HTMLDivElement | null>(null);
   // the element focused before the dialog opened, so focus can be restored on close.
@@ -133,7 +136,10 @@ const Modal: React.FunctionComponent<ModalProps> = ({
     const prevOverflow = document.body.style.overflow;
     document.body.style.overflow = 'hidden';
 
-    // move focus into the dialog (first focusable, else the surface itself).
+    // move focus to the first control in the body/footer (an input, a link, a button) so forms are
+    // ready to type into and browser autofill can offer itself; the head row (close + headerAction
+    // icons) is skipped so a header icon never takes the :focus-visible ring on open. Falls back to
+    // the surface itself when the body has nothing focusable.
     // { preventScroll: true }: this runs at the very first animation frame of the mobile
     // sheet's own mmodal-sheet-up entrance (md3.css) — at that instant the surface's actual
     // computed transform is still the keyframe's `from` state (translateY(100%), pushed
@@ -146,7 +152,9 @@ const Modal: React.FunctionComponent<ModalProps> = ({
     // (same fix as fe-main's BaseModal.tsx, which hit this same glitch first).
     const surface = surfaceRef.current;
     if (surface) {
-      const first = surface.querySelector<HTMLElement>(FOCUSABLE);
+      const first = Array.prototype.slice
+        .call(surface.querySelectorAll<HTMLElement>(FOCUSABLE))
+        .find((el: HTMLElement) => !el.closest('.mmodal-head'));
       (first || surface).focus({ preventScroll: true });
     }
 
@@ -237,6 +245,7 @@ const Modal: React.FunctionComponent<ModalProps> = ({
           ) : (
             <span className="mmodal-title" aria-hidden="true" />
           )}
+          {headerAction}
           {closeIcon ? (
             <button type="button" className="mmodal-close" aria-label="Schließen" onClick={onClose}>
               {closeIcon}

package/vehiclesProps/decoratedLightProps.tsx

@@ -165,7 +165,10 @@ const getDecoratedLightProps = (
         if (hybridPlugin) {
           if (wltpWeightedPowerCombinedContent && wltpWeightedCombinedContent) {
             const dischargedCombined = Number.isFinite(wltpConsumptionCombined) ? wltpConsumptionCombined : 19.9;
-            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g';
+            // ADV-187: the discharged class is derived server-side from wltpCo2Discharged; when the
+            // backend could not derive it the field is selector_unknown — hide the segment, never
+            // fall back to a hard-coded class here.
+            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
             const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
             const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
             const co2WeightedContent = Number.isFinite(wltpCo2)
@@ -174,14 +177,16 @@ const getDecoratedLightProps = (
             const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
               ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
               : null;
-            const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
+            const co2ClassDischarged = isPropDefined(dischargedClass)
+              ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
+              : null;
             return <React.Fragment>
                 {`${wltpWeightedPowerCombinedContent} + `}
                 {`${weightedCombinedLabeled}, `}
                 {`${dischargedCombinedLabeled}`}
                 {co2WeightedContent && <>, {co2WeightedContent}</>}
                 {co2ClassWeighted && <>, {co2ClassWeighted}</>}
-                {<>, {co2ClassDischarged}</>}
+                {co2ClassDischarged && <>, {co2ClassDischarged}</>}
               </React.Fragment>
           }
 
@@ -316,7 +321,10 @@ const getDecoratedLightProps = (
         if (hybridPlugin) {
           if (wltpWeightedPowerCombinedContent && wltpWeightedCombinedContent) {
             const dischargedCombined = Number.isFinite(wltpConsumptionCombined) ? wltpConsumptionCombined : 19.9;
-            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g';
+            // ADV-187: the discharged class is derived server-side from wltpCo2Discharged; when the
+            // backend could not derive it the field is selector_unknown — hide the segment, never
+            // fall back to a hard-coded class here.
+            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
             const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
             const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
             const co2WeightedContent = Number.isFinite(wltpCo2)
@@ -325,14 +333,16 @@ const getDecoratedLightProps = (
             const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
               ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
               : null;
-            const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
+            const co2ClassDischarged = isPropDefined(dischargedClass)
+              ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
+              : null;
             return <React.Fragment>
                 {`${wltpWeightedPowerCombinedContent} + `}
                 {`${weightedCombinedLabeled}, `}
                 {`${dischargedCombinedLabeled}`}
                 {co2WeightedContent && <>, {co2WeightedContent}</>}
                 {co2ClassWeighted && <>, {co2ClassWeighted}</>}
-                {<>, {co2ClassDischarged}</>}
+                {co2ClassDischarged && <>, {co2ClassDischarged}</>}
               </React.Fragment>
           }
 

package/vehiclesProps/decoratedProps.tsx

@@ -880,10 +880,12 @@ const getDecoratedProps = (
         // (entladen, komb) fuel consumption + a discharged CO2 class.
         if (hybridPlugin && wltpConsumptionWeightedPowerCombinedContent && wltpConsumptionWeightedCombinedContent) {
           const ADV88_DEFAULT_DISCHARGED_COMBINED = 19.9;
-          const ADV88_DEFAULT_DISCHARGED_CO2_CLASS = 'selector_energyEfficiencyClass_g';
 
           const dischargedCombined = Number.isFinite(wltpCombined) ? wltpCombined : ADV88_DEFAULT_DISCHARGED_COMBINED;
-          const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || ADV88_DEFAULT_DISCHARGED_CO2_CLASS;
+          // ADV-187: the discharged class is derived server-side from wltpCo2Discharged; when the
+          // backend could not derive it the field is selector_unknown — hide the segment, never
+          // fall back to a hard-coded class here.
+          const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
 
           const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
           const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
@@ -893,7 +895,9 @@ const getDecoratedProps = (
           const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
             ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
             : null;
-          const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
+          const co2ClassDischarged = isPropDefined(dischargedClass)
+            ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
+            : null;
 
           return <React.Fragment>
             {wrapValue(wltpConsumptionWeightedPowerCombinedContent)}{' + '}
@@ -901,7 +905,7 @@ const getDecoratedProps = (
             {wrapValue(dischargedCombinedLabeled)}
             {co2WeightedContent && <>{', '}{wrapValue(co2WeightedContent)}</>}
             {co2ClassWeighted && <>{', '}{co2ClassWeighted}</>}
-            {', '}{co2ClassDischarged}
+            {co2ClassDischarged && <>{', '}{co2ClassDischarged}</>}
           </React.Fragment>
         }