@bytebrand/fe-ui-core-autobahn 1.0.18 → 1.0.19

package/package.json

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

@@ -1356,16 +1356,20 @@
   .md3 .vdp-meta     { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px; margin-top: 14px; }
   .md3 .vdp-meta > span + span::before { content: none; }
   .md3 .vdp-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-  /* mobile-only "first screen" identity block: compact single dot-separated line,
-     rating chip inline next to the title (not stacked above it) — overrides the
-     structured-phone-layout rules above, which only make sense for the bulkier
-     desktop card shown at tablet widths. */
-  .md3 .vdp-header-summary .vdp-headrow { flex-direction: row; align-items: center; gap: 10px; }
+  /* mobile-only "first screen" identity block (per mockup): bare title (no rating
+     chip — that lives next to the price in the finance card instead), one muted
+     compact dot-separated fact line (km/EZ/Getriebe/Kraftstoff only, no "1. Hand",
+     no icons) — overrides the structured-phone-layout rules above, which only
+     make sense for the bulkier desktop card shown at tablet widths. */
+  .md3 .vdp-header-summary .vdp-headrow { flex-direction: row; align-items: flex-start; gap: 10px; }
+  .md3 .vdp-header-summary .vdp-headrow .statchip { display: none; }
   .md3 .vdp-header-summary .vdp-trim { display: none; }
-  .md3 .vdp-header-summary .vdp-meta { display: flex; flex-wrap: wrap; grid-template-columns: none; margin-top: 8px; }
+  .md3 .vdp-header-summary .vdp-meta { display: flex; flex-wrap: wrap; grid-template-columns: none; margin-top: 6px;
+    font-size: 13.5px; font-weight: 400; color: var(--md-on-surface-variant); }
   .md3 .vdp-header-summary .vdp-meta > span + span::before { content: ''; }
   .md3 .vdp-header-summary .vdp-meta > span { overflow: visible; text-overflow: clip; }
   .md3 .vdp-header-summary .vdp-meta .lucide { display: none; }
+  .md3 .vdp-header-summary .vdp-meta > span:nth-child(5) { display: none; }
   /* highlights: one swipeable line, no ragged wrap */
   .md3 .vdp-highlights { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
     width: 0; min-width: 100%; }

package/vdp/FinanceCalculator.tsx

@@ -275,8 +275,9 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
 
   return (
     <div className="mcard mcard--elevated" style={{ padding: 20 }}>
-      {/* header */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
+      {/* header — desktop only; mobile goes straight into the tabs (see mockup: no card
+          title above Finanzierung/Leasing/Kaufen on phone). */}
+      <div className="fin-card-header hide-mobile" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
         <span
           style={{
             width: 34,