@bytebrand/fe-ui-core-autobahn 1.0.133 → 1.0.134

package/chrome/Footer.tsx

@@ -79,6 +79,13 @@ export interface FooterProps {
    * strings as the legacy footer so /search stays compliant where prices/rates are shown.
    */
   t: TranslationFunction;
+  /**
+   * Adds footnotes ⁵ (Pkw-EnVKV possible CO₂ costs) and ⁶ (§3d KraftStG EV tax exemption) to the
+   * disclaimer block, right after ⁴ (price evaluation) and before the WLTP consumption note. Real
+   * legal copy tied to the "Laufende Kosten pro Jahr" cards on the CDP — only pass true there
+   * (VehicleDetailedNextPage), never site-wide, since every other page shows only footnotes 1-4.
+   */
+  showCostFootnotes?: boolean;
 }
 
 /**
@@ -86,7 +93,7 @@ export interface FooterProps {
  * disclaimer block, and a copyright + "Nach Oben" bar. Pure/presentational MD3 chrome — renders
  * correctly only inside a `<div className="md3">` subtree (scoped theme at source/theme/autobahn).
  */
-const Footer: React.FunctionComponent<FooterProps> = ({ t }) => {
+const Footer: React.FunctionComponent<FooterProps> = ({ t, showCostFootnotes }) => {
   const scrollTop = (): void => window.scroll({ top: 0, left: 0, behavior: 'smooth' });
   const now = new Date();
   const year = now.getFullYear();
@@ -179,6 +186,7 @@ const Footer: React.FunctionComponent<FooterProps> = ({ t }) => {
                 t('footer:manufacturerUvp'),
                 t('footer:uvpComparisonRate'),
                 t('footer:priceEvaluation', { date: today }),
+                ...(showCostFootnotes ? [t('footer:co2CostsInfo'), t('footer:evTaxExemption')] : []),
                 t('footer:consumptionInfo'),
                 t('footer:vehicleImages'),
               ].join('<br />'),

package/package.json

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

@@ -7581,6 +7581,7 @@ line-height: 31px;
   display: flex;
   gap: 5px;
   align-items: flex-end;
+  margin-bottom: 20px;
 }
 .md3 .co2-col {
   flex: 1;

package/vdp/VdpModules.tsx

@@ -417,7 +417,7 @@ const footnoteStyle: React.CSSProperties = {
   fontWeight: 700,
   fontSize: 18,
   lineHeight: '24px',
-  color: '#005CFF',
+  color: '#0E2238',
 };
 
 const summaryCardTitleStyle: React.CSSProperties = {
@@ -445,9 +445,8 @@ export const VdpEnergyTaxSummary: React.FunctionComponent<VdpEnergyTaxSummaryPro
           display: 'flex',
           width: '100%',
           gap: 4,
-          background: 'var(--md-sc-lowest)',
-          borderRadius: 'var(--md-r-md)',
-          border: '1px solid var(--md-outline-variant)',
+          background: '#F5F7FA',
+          borderRadius: 12,
         }}
       >
         <div className="vdp-ets-col vdp-ets-col--first" style={{ flex: 1 }}>
@@ -500,9 +499,8 @@ export const VdpCo2CostsSummary: React.FunctionComponent<VdpCo2CostsSummaryProps
           display: 'flex',
           width: '100%',
           gap: 4,
-          background: 'var(--md-sc-lowest)',
-          borderRadius: 'var(--md-r-md)',
-          border: '1px solid var(--md-outline-variant)',
+          background: '#F5F7FA',
+          borderRadius: 12,
         }}
       >
         {rows.map((row, i) => (
@@ -520,60 +518,6 @@ export const VdpCo2CostsSummary: React.FunctionComponent<VdpCo2CostsSummaryProps
   );
 };
 
-// ---------------------------------------------------------------------------
-// Legal footnote text for the "⁵"/"⁶" markers used in VdpCo2CostsSummary/VdpEnergyTaxSummary
-// above — real Pkw-EnVKV/§3d KraftStG disclosure copy (verbatim, not paraphrased), plain
-// text (no card/background). Needs-data: each paragraph only shows when its corresponding
-// card above actually rendered (never an orphaned footnote for a marker nobody saw).
-// ---------------------------------------------------------------------------
-
-export interface VdpCostFootnotesProps {
-  vehicle: VehicleDetail;
-  t: TranslationFunction;
-}
-
-const costFootnoteStyle: React.CSSProperties = {
-  fontFamily: 'Arimo',
-  fontStyle: 'normal',
-  fontWeight: 700,
-  fontSize: 13.5,
-  lineHeight: '16px',
-  color: '#000000',
-};
-
-export const VdpCostFootnotes: React.FunctionComponent<VdpCostFootnotesProps> = ({ vehicle, t }) => {
-  const showCo2Footnote = !!vehicle.co2CostsSummary;
-  const showTaxFootnote = !!vehicle.energyTaxSummary;
-  if (!showCo2Footnote && !showTaxFootnote) return null;
-  return (
-    <div id="vdp-cost-footnotes" style={costFootnoteStyle}>
-      {showCo2Footnote && (
-        <>
-          {t('vehicleProps:value.co2CostsFootnoteTitle')}
-          <br />
-          <br />
-          {t('vehicleProps:value.co2CostsFootnote')}
-        </>
-      )}
-      {showCo2Footnote && showTaxFootnote && (
-        <>
-          <br />
-          <br />
-          <br />
-        </>
-      )}
-      {showTaxFootnote && (
-        <>
-          {t('vehicleProps:value.taxExemptFootnoteTitle')}
-          <br />
-          <br />
-          {t('vehicleProps:value.taxExemptFootnote')}
-        </>
-      )}
-    </div>
-  );
-};
-
 // ---------------------------------------------------------------------------
 // Equipment list (grouped + searchable)
 // ---------------------------------------------------------------------------
@@ -734,6 +678,19 @@ export const Co2Label: React.FunctionComponent<Co2LabelProps> = ({ vehicle, t })
       </div>
       {/* no EnVKV footer line — Figma drops it (the * on the heading refers to the page-footer
           disclaimer instead); the scale caption above carries the WLTP-kombiniert wording */}
+
+      {/* Pkw-EnVKV mandatory cost disclosure — moved to the bottom of this same card (Figma) rather
+          than standing as its own top-level block; each still gates on its own vehicle data. */}
+      {vehicle.energyTaxSummary && (
+        <div style={{ paddingTop: 20, borderTop: '1px solid #C5C6D2' }}>
+          <VdpEnergyTaxSummary vehicle={vehicle} t={t} />
+        </div>
+      )}
+      {vehicle.co2CostsSummary && (
+        <div style={{ marginTop: 22 }}>
+          <VdpCo2CostsSummary vehicle={vehicle} t={t} />
+        </div>
+      )}
     </div>
   );
 };

package/vdp/index.ts

@@ -31,7 +31,6 @@ export {
   VdpSpecTable,
   VdpEnergyTaxSummary,
   VdpCo2CostsSummary,
-  VdpCostFootnotes,
   EquipmentList,
   Co2Label,
   VehicleDescription,
@@ -54,7 +53,6 @@ export type {
   VdpSpecTableProps,
   VdpEnergyTaxSummaryProps,
   VdpCo2CostsSummaryProps,
-  VdpCostFootnotesProps,
   EquipmentListProps,
   Co2LabelProps,
   VehicleDescriptionProps,