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

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

@@ -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,7 @@ 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).
+    // focus the dialog surface, not its first control: a header icon would take the :focus-visible ring on open.
     // { 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
@@ -145,10 +148,7 @@ const Modal: React.FunctionComponent<ModalProps> = ({
     // skips that native auto-scroll entirely, so the CSS animation alone moves the sheet
     // (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);
-      (first || surface).focus({ preventScroll: true });
-    }
+    if (surface) surface.focus({ preventScroll: true });
 
     return () => {
       document.body.style.overflow = prevOverflow;
@@ -237,6 +237,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>
         }