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

package/cards/CarCard.tsx

@@ -157,8 +157,6 @@ 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"
@@ -279,46 +277,18 @@ 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 }}>
-            {/* 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>
+            <PriceHero car={car} mode={mode} t={t} alwaysShowUnit />
             <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).
-              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>
+              "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}
+          />
         </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,12 +710,7 @@ export const PriceTerms: React.FunctionComponent<{
   onShowDetails?: () => void;
   t: TranslationFunction;
 }> = ({ car, mode, onOpenRateAdjust, onShowDetails, t }) => {
-  // 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" />;
+  if (mode === 'buy') return null;
   const finFirstInstallment =
     car.finFirstInstallment != null ? car.finFirstInstallment.toLocaleString('de-DE') : _finFirstInstallment;
   const finMonths = car.finMonths ?? _finMonths;

package/constants/app.ts

@@ -40,17 +40,7 @@ export const LOCAL_STORAGE_KEY = {
   i18n_KEY: 'i18nLanguage'
 };
 
-// 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';
+export const DEFAULT_LANG: string = typeof window !== 'undefined' ? localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY) : 'de';
 
 // Default support contact phone
 export const CONTACT_PHONE: string = '+498004030182';

package/constants/core.ts

@@ -35,18 +35,7 @@ export const LOCAL_STORAGE_KEY = {
   i18n_KEY: 'i18nLanguage'
 };
 
-// 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 DEFAULT_LANG: string = (typeof window !== 'undefined' ? window.localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY) : null) ?? 'de';
 
 export const ROW_STYLES = {
   marginBottom: 10

package/locales/de/autobahn.json

@@ -88,7 +88,7 @@
     "detailsShow": "Details anzeigen",
     "paymentLabel": "Zahlung",
     "paymentValue": "Überweisung",
-    "warrantyLabel": "Garantie",
+    "warrantyLabel": "Zusatzgarantie (Multipart)",
     "warrantyValue": "1 Jahr inklusive",
     "deliveryLabel": "Lieferung",
     "deliveryValue": "ca. 7–14 Tage · oder Abholung",
@@ -701,7 +701,7 @@
   },
   "modal": {
     "leasingDetails": "Leasingdetails",
-    "financingDetails": "Details",
+    "financingDetails": "Finanzierungsdetails",
     "close": "Schließen",
     "vehiclePrice": "Fahrzeugpreis ggf. inkl. MwSt.",
     "leasingAmount": "Leasingbetrag",

package/locales/en/autobahn.json

@@ -88,7 +88,7 @@
     "detailsShow": "Show details",
     "paymentLabel": "Payment",
     "paymentValue": "Bank transfer",
-    "warrantyLabel": "Warranty",
+    "warrantyLabel": "Additional warranty (Multipart)",
     "warrantyValue": "1 year included",
     "deliveryLabel": "Delivery",
     "deliveryValue": "approx. 7–14 days · or collection",

package/locales/legacy/data.ts

@@ -103,8 +103,7 @@ 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)`,
-        // 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)`
+        co2ClassDischarged: `CO2-Klasse ${(cbd.cbd as any)[vehicleOption.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g'] || ''} (entladen, komb)`
       },
       title: {
         'addOfferToMainSlide': 'Zum Schieberegler hinzufügen',

package/package.json

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

package/theme/md3.css

@@ -1822,6 +1822,14 @@ line-height: 31px;
   gap: 8px;
   flex-wrap: wrap;
 }
+/* Figma 64860-62117 (Kaufen only): ground-truth design-context pull — "row" is gap-[14px]
+   items-start, not the shared gap-8/align-center financing/leasing's own row keeps (base rule
+   above, untouched) — the taller 2-row old-price stack (badge above struck price, see
+   .cf-rate-old--buy below) needs top alignment against the big price instead of centering. */
+.md3 .cf-rate-row.cf-rate-row--buy {
+  gap: 14px;
+  align-items: flex-start;
+}
 .md3 .cf-rate-amount {
   font-family: 'Arial';
   font-style: normal;
@@ -1830,6 +1838,16 @@ line-height: 31px;
   line-height: 58px;
   color: #005CFF;
 }
+/* Figma 64860-62117 (Kaufen only): exact text spec pasted by user — Arimo/700/36px/100%
+   line-height/-1.6px letter-spacing — smaller + tighter than the shared 54px Arial price
+   financing/leasing keep (base rule above, untouched). 2-class selector scopes to
+   .cf-rate-amount--buy only; the ≤600px rule further down already matches this 36px size. */
+.md3 .cf-rate-amount.cf-rate-amount--buy {
+  font-family: 'Arimo';
+  font-size: 36px;
+  line-height: 100%;
+  letter-spacing: -1.6px;
+}
 .md3 .cf-rate-side {
   display: flex;
   flex-direction: column;
@@ -1856,6 +1874,51 @@ line-height: 31px;
   color: #0E2238;
   white-space: nowrap;
 }
+/* Figma 64860-62117 (Kaufen only): ground-truth design-context pull ("uvp" node) — flex column
+   (badge row stacked above the struck price, gap 1px), Arimo/700/15px/normal line-height/0
+   letter-spacing/native line-through, color var(--semantic-error, #ba1a1a) — replaces the shared
+   Arial/400/20px dark .cf-rate-old treatment financing/leasing's own isStrike price keeps
+   untouched below. 2-class selector scopes this to .cf-rate-old--buy only. */
+.md3 .cf-rate-old.cf-rate-old--buy {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  font-family: 'Arimo';
+  font-weight: 700;
+  font-size: 15px;
+  line-height: normal;
+  letter-spacing: 0;
+  color: #BA1A1A;
+}
+/* line-through lives on .cf-rate-old-text (the price span) only, not the flex container above —
+   a descendant's own text-decoration:none is NOT reliable for "undoing" an ancestor's decoration
+   line (well-known CSS quirk: the line is drawn across the ancestor's whole inline content
+   regardless), which was still drawing the strike through the badge's "2" one level up. */
+.md3 .cf-panel .cf-rate-old--buy .cf-rate-old-text {
+  text-decoration: line-through;
+}
+/* replaces the custom red diagonal bar for Kaufen only — financing/leasing's own isStrike price
+   keeps the shared ::after bar (base rule below, untouched). */
+.md3 .cf-rate-old.cf-rate-old--buy::after {
+  display: none;
+}
+/* Same Figma frame ("footnote" node): a plain 13x13 ring in brand/primary, Arimo Regular 8px
+   text-primary (#0e2238) — sits in normal flow as its own row above the struck price (the
+   flex-column .cf-rate-old--buy above), not absolutely overlaid — scoped to .cf-rate-old--buy,
+   financing/leasing's isStrike badge keeps the shared corner-overlay .pp-eyebrow-badge rule
+   (top-right, bigger ring) untouched below. */
+.md3 .cf-panel .cf-rate-old--buy .pp-eyebrow-badge {
+  position: static;
+  width: 13px;
+  height: 13px;
+  font-family: 'Arimo';
+  font-weight: 400;
+  font-size: 8px;
+  line-height: normal;
+  border-width: 1px;
+  color: #0E2238;
+}
 /* must stay AFTER the base .cf-rate-amount/.cf-rate-old rules above — equal specificity means
    source order decides the tie (same rule as the .co-form media query elsewhere in this file). */
 @media (max-width: 600px) {
@@ -1968,6 +2031,20 @@ line-height: 31px;
     gap: 6px;
   }
 }
+/* Figma 64860-62117 (Kaufen only): ground-truth "hero" node is a plain gap-[10px] row (price
+   block + rating column packed together on the left), not the shared space-between push-to-
+   far-edge financing/leasing's own hero row keeps (base rule above, untouched) — the 10px gap
+   itself lives on .fin-eval-col--buy's margin-left just below, so this only cancels the
+   space-between/gap-16 that would otherwise ADD to it. 2-class selector scopes to
+   .cf-rate-top--buy; applies at every width (.fin-eval-col--buy's margin-left is the only
+   intended gap, mobile included). */
+.md3 .cf-rate-top.cf-rate-top--buy {
+  justify-content: flex-start;
+  gap: 0;
+}
+.md3 .cf-panel .fin-eval-col.fin-eval-col--buy {
+  margin-left: 10px;
+}
 .md3 .cf-rate-left {
   display: flex;
   flex-direction: column;
@@ -1982,13 +2059,15 @@ line-height: 31px;
   line-height: 15px;
   color: #0E2238;
 }
-/* Kaufen's compact "Überweisung · Sofort verfügbar" recap — mobile only (show-mobile, see JSX);
-   desktop already has the same two facts as separate Zahlung/Verfügbarkeit rows further down
-   (.cf-buy-info), so this would just duplicate them there. */
-@media (max-width: 600px) {
-  .md3 .cf-panel .co-aside-cond.co-aside-cond--buy {
-    margin-top: 5px;
-  }
+/* Kaufen's compact "Überweisung · sofort verfügbar" recap — Figma 64860-62117 renders it
+   unconditionally (desktop AND mobile) right under the price, alongside the separate Zahlung/
+   Zusatzgarantie/Verfügbar rows further down (.cf-buy-info) — previously hidden on desktop
+   (show-mobile) on the wrong assumption that it only duplicated those rows; removed from JSX.
+   5px (ground-truth "Rate" column gap) replaces the shared 10px .co-aside-cond gap financing/
+   leasing's own cond line keeps (base rule above, untouched) — was mobile-only before; Figma's
+   same frame carries this gap at any width, so it's no longer scoped to the ≤600px query. */
+.md3 .cf-panel .co-aside-cond.co-aside-cond--buy {
+  margin-top: 5px;
 }
 /* .fin-eval-col's shared base rule is `display: contents` (a CSS-grid trick that relies on a
    `.fin-price-grid` grid ancestor with named areas — cf-panel isn't a grid), so it needs the
@@ -1999,6 +2078,10 @@ line-height: 31px;
   gap: 8px;
   flex: none;
   align-items: stretch;
+  /* Figma 64860-62117: fixed 106px column so the pill (below, display:flex + align-items:
+     stretch cascading down) and the bar (already width:100%) both span the same width instead
+     of shrink-wrapping to whichever tier label happens to be widest. */
+  width: 106px;
 }
 @media (max-width: 600px) {
   .md3 .cf-panel .fin-eval-col {
@@ -2201,6 +2284,31 @@ line-height: 31px;
   width: 40px;
   height: 40px;
 }
+/* Rundum-Sorglos-Paket title "i" popover — same reasoning/pattern as the .cf-toggle override
+   above (inherited rule is tuned for the small UVP-Rate footnote badge, top:16px/left:0/
+   width:260px): left:0 was relative to the title's own 20px padding box, bleeding the popover
+   past the card's left border. left:20px nudges it to align with the title's own content edge
+   instead (close to the original 260px width — a full left:0/right:0/width:auto span was tried
+   and was too wide/plain). right:20px + max-width is the mobile safety net: on a narrow card it
+   shrinks instead of overflowing; on a normal-width card max-width wins and the box just sits
+   280px wide, anchored at left:20px (CSS over-constrained resolution recalculates the unused
+   "right" rather than stretching). 3 class-selectors deep so it always wins over the 2-deep base
+   rule regardless of source order. */
+.md3 .cf-panel .co-card-title .pp-uvp-tooltip {
+  top: 28px;
+  left: 40px;
+  right: 20px;
+  width: auto;
+  max-width: 280px;
+}
+/* same box, narrower safety margin so the 280px cap still comfortably fits a phone-width card
+   instead of being cut flush against the right edge. */
+@media (max-width: 600px) {
+  .md3 .cf-panel .co-card-title .pp-uvp-tooltip {
+    left: 20px;
+    right: 12px;
+  }
+}
 .md3 .cf-toggle .md-title-sm {
   display: inline-flex;
   align-items: center;
@@ -2212,6 +2320,14 @@ line-height: 31px;
   line-height: 15px;
   color: #1A1B22;
 }
+/* Rundum-Sorglos-Paket's toggle label should read the same size as the Zahlung/Zusatzgarantie/
+   Verfügbarkeit rows above it (.cf-buy-info .calcrow-label, 15px/17px) — .cf-panel scopes this to
+   CheckoutFinancePanelNext only, leaving AdditionalServicesNext's unrelated .co-rundum-footer
+   .cf-toggle (step 4) at its own 13px untouched. */
+.md3 .cf-panel .cf-toggle .md-title-sm {
+  font-size: 15px;
+  line-height: 17px;
+}
 .md3 .cf-toggle .md-title-sm svg {
   cursor: pointer;
 }
@@ -2515,6 +2631,12 @@ line-height: 31px;
   padding: 14px 20px;
   border-bottom: 1px solid #C5C6D2;
 }
+/* Kaufen: .co-rundum-footer (the "in die Rate einrechnen" toggle) isn't rendered at all, so
+   .co-rundum-box is the card's last element — the border-bottom above would just be a dangling
+   line with nothing below it. */
+.md3 .cf-panel .co-rundum-box.co-rundum-box--buy {
+  border-bottom: 0;
+}
 .md3 .cf-panel .co-rundum-footer {
   padding: 14px 20px;
 }
@@ -4565,6 +4687,23 @@ line-height: 31px;
   justify-content: space-between;
   gap: 10px;
 }
+/* "2. Rechnungsadresse" / "3. Lieferadresse" (.oo-addr-grid's two cards only — the shared 10px
+   above still fits "Lieferung & Services"/Zahldetails fine, which have a whole row to themselves)
+   — the base gap left too little room for "Rechnungsadresse" next to "Ändern" in the half-width
+   grid column, wrapping the title to 2 lines. align-items: center (inherited from the base rule
+   above) only centers against the FULL flex-row height, so while wrapped it centered "Ändern"
+   against both title lines instead of matching the first one. */
+.md3 .oo-addr-grid .oo-card-title--action {
+  gap: 4px;
+}
+/* The button has no explicit line-height, so the UA default ("normal", ~1.15-1.2x its 13px font)
+   gives it a taller box than its own glyphs — align-items: center then centers that whole taller
+   box against the title's 23px line-height box, landing "Ändern"'s visible text a bit low. line-
+   height: 1 collapses the button's box to its font-size itself, so both sides center on their
+   actual text instead of on mismatched leading. */
+.md3 .oo-addr-grid .oo-card-action {
+  line-height: 1;
+}
 .md3 .oo-card-action {
   font-family: Arial;
   font-weight: 700;
@@ -4677,6 +4816,49 @@ line-height: 31px;
     border-left: 0 !important;
   }
 }
+/* "2 Jahre Garantie" "i" popover (OrderOverviewNext.tsx) — same AddServicesTooltipBody/
+   pp-uvp-tooltip markup as step 3's title info trigger, but there's no .cf-panel ancestor here to
+   inherit the shared "grey card" look from, so the full style (not just a position override) is
+   defined fresh under .oo-ls-title-row. Anchored right:0 (the garantie cell is the row's last/
+   rightmost of 3) so the box opens leftward instead of overflowing past the card's right edge;
+   max-width keeps it inside a narrow phone screen once .oo-ls-row stacks to full width below. */
+.md3 .oo-ls-title-row .pp-uvp-tooltip {
+  position: absolute;
+  top: 24px;
+  left: auto;
+  right: 0;
+  z-index: 20;
+  width: 300px;
+  max-width: calc(100vw - 48px);
+  padding: 10px 12px;
+  border-radius: 15px;
+  background: #c5c6d2;
+  box-shadow: var(--md-e2, 0 4px 12px rgba(0, 0, 0, 0.15));
+  white-space: normal;
+  cursor: default;
+}
+.md3 .oo-ls-title-row .pp-uvp-tooltip-close {
+  position: absolute;
+  top: -14px;
+  right: -14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: rgba(11, 19, 32, 0.55);
+  border: 1.5px solid rgba(255, 255, 255, 0.25);
+  padding: 0;
+  cursor: pointer;
+}
+.md3 .oo-ls-title-row .pp-uvp-tooltip-body {
+  font-family: 'Arimo';
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 13px;
+  color: #0e2238;
+}
 /* "5. Monatlich zu zahlen" / "5. Gesamtpreis" (Figma: Finanzierung 64763:107263, Leasing
    64794:110315, Kaufen 64794:109673) — own "oo-pay-*" namespace, NOT the shared
    .cf-rate-row/.fin-eval-* classes CheckoutFinancePanelNext.tsx (step 3) uses: that component
@@ -4700,12 +4882,55 @@ line-height: 31px;
   width: 100%;
 }
 .md3 .oo-pay-price-row {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   width: 100%;
 }
+/* UVP footnote popover (both the Buy "②" and the Financing/Leasing "UVP-Rate ③" branches above —
+   oo-pay-buy-uvp-row and oo-pay-secondary respectively, both descendants of this row) — same
+   "grey card" pp-uvp-tooltip look step 3's .cf-panel scope and order-overview's own
+   .oo-ls-title-row scope already give it, but nothing scoped it under this card's own oo-pay-*
+   namespace, so it rendered as plain unstyled text. position:relative lives on this shared
+   ancestor (not each branch's own element) since one rule here covers both. */
+.md3 .oo-pay-price-row .pp-uvp-tooltip {
+  position: absolute;
+  top: 28px;
+  left: 0;
+  z-index: 20;
+  width: 300px;
+  max-width: calc(100vw - 48px);
+  padding: 10px 12px;
+  border-radius: 15px;
+  background: #c5c6d2;
+  box-shadow: var(--md-e2, 0 4px 12px rgba(0, 0, 0, 0.15));
+  white-space: normal;
+  cursor: default;
+}
+.md3 .oo-pay-price-row .pp-uvp-tooltip-close {
+  position: absolute;
+  top: -14px;
+  right: -14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: rgba(11, 19, 32, 0.55);
+  border: 1.5px solid rgba(255, 255, 255, 0.25);
+  padding: 0;
+  cursor: pointer;
+}
+.md3 .oo-pay-price-row .pp-uvp-tooltip-body {
+  font-family: 'Arimo';
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 13px;
+  color: #0e2238;
+}
 .md3 .oo-pay-left {
   display: flex;
   align-items: center;
@@ -4835,9 +5060,13 @@ line-height: 31px;
   align-items: flex-end;
   gap: 2px;
 }
+/* Figma 64794-109673 "secondaryStack": items-start, not center — the footnote badge (now a
+   direct sibling of .oo-pay-uvp-amount, moved out so the struck price's own ::after bar doesn't
+   draw its strike across the badge too) sits top-aligned/raised next to the price instead of
+   vertically centered against it. */
 .md3 .oo-pay-buy-uvp-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 2px;
 }
 .md3 .oo-pay-buy-leftgroup {

package/vehiclesProps/decoratedLightProps.tsx

@@ -165,10 +165,7 @@ const getDecoratedLightProps = (
         if (hybridPlugin) {
           if (wltpWeightedPowerCombinedContent && wltpWeightedCombinedContent) {
             const dischargedCombined = Number.isFinite(wltpConsumptionCombined) ? wltpConsumptionCombined : 19.9;
-            // 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 dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g';
             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)
@@ -177,16 +174,14 @@ const getDecoratedLightProps = (
             const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
               ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
               : null;
-            const co2ClassDischarged = isPropDefined(dischargedClass)
-              ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
-              : null;
+            const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
             return <React.Fragment>
                 {`${wltpWeightedPowerCombinedContent} + `}
                 {`${weightedCombinedLabeled}, `}
                 {`${dischargedCombinedLabeled}`}
                 {co2WeightedContent && <>, {co2WeightedContent}</>}
                 {co2ClassWeighted && <>, {co2ClassWeighted}</>}
-                {co2ClassDischarged && <>, {co2ClassDischarged}</>}
+                {<>, {co2ClassDischarged}</>}
               </React.Fragment>
           }
 
@@ -321,10 +316,7 @@ const getDecoratedLightProps = (
         if (hybridPlugin) {
           if (wltpWeightedPowerCombinedContent && wltpWeightedCombinedContent) {
             const dischargedCombined = Number.isFinite(wltpConsumptionCombined) ? wltpConsumptionCombined : 19.9;
-            // 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 dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g';
             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)
@@ -333,16 +325,14 @@ const getDecoratedLightProps = (
             const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
               ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
               : null;
-            const co2ClassDischarged = isPropDefined(dischargedClass)
-              ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
-              : null;
+            const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
             return <React.Fragment>
                 {`${wltpWeightedPowerCombinedContent} + `}
                 {`${weightedCombinedLabeled}, `}
                 {`${dischargedCombinedLabeled}`}
                 {co2WeightedContent && <>, {co2WeightedContent}</>}
                 {co2ClassWeighted && <>, {co2ClassWeighted}</>}
-                {co2ClassDischarged && <>, {co2ClassDischarged}</>}
+                {<>, {co2ClassDischarged}</>}
               </React.Fragment>
           }
 

package/vehiclesProps/decoratedProps.tsx

@@ -880,12 +880,10 @@ 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;
-          // 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 dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || ADV88_DEFAULT_DISCHARGED_CO2_CLASS;
 
           const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
           const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
@@ -895,9 +893,7 @@ const getDecoratedProps = (
           const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
             ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
             : null;
-          const co2ClassDischarged = isPropDefined(dischargedClass)
-            ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
-            : null;
+          const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
 
           return <React.Fragment>
             {wrapValue(wltpConsumptionWeightedPowerCombinedContent)}{' + '}
@@ -905,7 +901,7 @@ const getDecoratedProps = (
             {wrapValue(dischargedCombinedLabeled)}
             {co2WeightedContent && <>{', '}{wrapValue(co2WeightedContent)}</>}
             {co2ClassWeighted && <>{', '}{co2ClassWeighted}</>}
-            {co2ClassDischarged && <>{', '}{co2ClassDischarged}</>}
+            {', '}{co2ClassDischarged}
           </React.Fragment>
         }