@bytebrand/fe-ui-core-autobahn 1.0.56 → 1.0.58

package/theme/md3.css

@@ -465,7 +465,7 @@ line-height: 31px;
   height: 34px;
   padding: 0 13px;
   flex: none;
-  background: #fff;
+  background-color: hsla(0, 0%, 100%, .75);
   border: 1px solid #d4dde7;
   border-radius: 16px;
 }
@@ -3258,6 +3258,16 @@ line-height: 31px;
     opacity: 0.92;
   }
 }
+/* VDP gallery arrows only — .car-arrow is shared with the SRP card carousels (CarCard/CarRow),
+   so this is scoped to .vdp-gallerybox rather than the base rule. */
+.md3 .vdp-gallerybox .car-arrow {
+  width: 36px;
+  height: 36px;
+  border-radius: 18px;
+  background-color: hsla(0, 0%, 100%, .75);
+  border: 1px solid #D4DDE7;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
+}
 
 /* ==========================================================================
    RESPONSIVE LAYOUT LAYER
@@ -4728,6 +4738,16 @@ line-height: 31px;
 .md3 .enquiry-form {
   padding: 24px;
 }
+/* Vorname/Nachname/E-Mail carry their border/background as inline style (enquiryInput) —
+   !important is required here to win over the inline style on focus. */
+.md3 .enquiry-name-row input:focus,
+.md3 .enquiry-email-wrap input:focus {
+  background: #FFFFFF !important;
+  border: 1px solid #005CFF !important;
+  border-radius: 10px !important;
+  outline: 0;
+  box-shadow: none;
+}
 /* outlined float-label fields (Figma phone/message row): label sits ON the top border */
 .md3 .enq-float {
   position: relative;
@@ -4754,12 +4774,25 @@ line-height: 31px;
   border: 0;
   background: none;
   outline: 0;
+  box-shadow: none;
   color: var(--md-on-surface);
   font: inherit;
   font-size: 14px;
   height: 46px;
   padding: 0 12px;
 }
+/* focus state (Figma): the .enq-float wrapper carries the border/background — the
+   input/textarea/mselect-btn inside stay borderless (see above) so only one outline shows. */
+.md3 .enq-float:focus-within {
+  background: #FFFFFF;
+  border: 1px solid #005CFF;
+  border-radius: 10px;
+  box-shadow: none;
+}
+.md3 .enq-float:focus-within .enq-float-label {
+  background: #FFFFFF;
+  color: #005CFF;
+}
 .md3 .enq-float textarea {
   height: 96px;
   padding: 12px;
@@ -4770,15 +4803,26 @@ line-height: 31px;
   grid-template-columns: 82px 96px 1fr;
   gap: 10px;
 }
-.md3 .enq-country {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
+/* "Land" is a real Dropdown (.mselect) now, nested inside the .enq-float outline — strip
+   its own trigger chrome (border/background/box-shadow ring) so the outer .enq-float border
+   stays the only visible outline, and match the 46px height of the sibling inputs. */
+.md3 .enq-float .mselect-btn {
   height: 46px;
   padding: 0 10px 0 12px;
-  font-size: 14px;
-  color: var(--md-on-surface);
+  gap: 4px;
+  border: 0;
+  background: none;
+  outline: 0;
+  box-shadow: none;
+}
+.md3 .enq-float .mselect-btn:hover,
+.md3 .enq-float .mselect-btn[aria-expanded="true"] {
+  box-shadow: none;
+}
+.md3 .enq-float .mselect-btn .lucide {
+  width: 14px;
+  height: 14px;
+  color: var(--md-on-surface-variant);
 }
 /* revocable-consent checkbox + microtext (Figma round 9) */
 .md3 .enq-consent {
@@ -5058,6 +5102,61 @@ line-height: 31px;
   box-shadow: var(--md-e2);
   padding: 8px 16px 16px;
 }
+
+/* mobile-only "Account Layer" sheet (TopBar) — full-width panel under the header, per the Figma
+   "03 | Account Layer" mockups. .show-mobile forces display:flex (see the ≤600px override
+   below) — flex-direction:column comes from the inline style on the element itself. */
+.md3 .amenu-mobile {
+  /* NOT full-width — measured against the real Figma export: the panel is anchored to the
+     RIGHT edge, leaving ~22% of the viewport showing the dimmed page on the left (both the
+     logged-out and logged-in mockups measured close to this, not identical px-for-px, so this
+     is the representative middle value rather than either exact reading). */
+  position: absolute;
+  top: 100%;
+  left: 22%;
+  right: 0;
+  background: var(--md-surface);
+  box-shadow: var(--md-elev-2);
+  z-index: 60;
+  max-height: calc(100vh - 64px);
+  overflow-y: auto;
+  /* only the LEFT corners are visually rounded (top-left, bottom-left) — the right edge sits
+     flush against the viewport's own right edge, so rounding there would be invisible anyway.
+     (This element is already show-mobile-gated, so no extra media query needed here.) */
+  border-radius: 20px 0 0 20px;
+}
+.md3 .amenu-mobile-row:active {
+  background: color-mix(in srgb, var(--md-primary) 6%, transparent);
+}
+/* desktop "Konto" pill collapses to a plain icon-only button on mobile — the account layer above
+   replaces the small popover the pill normally opens on wider screens. */
+@media (max-width: 600px) {
+  .md3 .topbar-account-btn {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    width: 40px;
+    height: 40px;
+    min-width: 0;
+    border-radius: 50%;
+  }
+  .md3 .topbar-account-btn:hover {
+    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
+  }
+  /* Mobile header icons measured against the real Figma export read visibly smaller than the
+     reference (the shared .icon-btn/.mbtn rules force 20px/18px everywhere in the app — fine
+     elsewhere, but the Figma mobile header specifically wants ~24px/22px). Scoped to icon
+     buttons INSIDE the TopBar's own <header> so it doesn't touch icon-btn/mbtn usage on other
+     pages (VDP gallery controls, financing modal, etc.). */
+  .md3 header .icon-btn .lucide {
+    width: 24px;
+    height: 24px;
+  }
+  .md3 header .topbar-account-btn .lucide {
+    width: 22px;
+    height: 22px;
+  }
+}
 /* language segmented DE|EN — active tab filled, inactive ghost */
 .md3 .lang-seg {
   display: inline-flex;
@@ -5188,9 +5287,10 @@ line-height: 31px;
   }
   .md3 .hiw-section {
     background: var(--md-sc-lowest);
-    border: 1px solid var(--fig-border);
+    border: 1px solid #D4DDE7;
     border-radius: 18px;
     padding: 30px 24px;
+    box-shadow: none;
   }
   .md3 .hiw-heading {
     text-align: left;
@@ -5777,10 +5877,10 @@ line-height: 31px;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
     background: var(--md-sc-lowest);
-    border: 1px solid var(--fig-border);
+    border: 1px solid #D4DDE7;
     border-radius: 18px;
     padding: 18px 16px;
-    box-shadow: 0 2px 3px rgba(14, 34, 56, 0.07);
+    box-shadow: none;
   }
   .md3 .trust-strip > div {
     display: flex;
@@ -5944,6 +6044,7 @@ line-height: 31px;
   }
   .md3 .vdp-push-badges {
     gap: 6px;
+    margin-bottom: 13px;
   }
 }
 
@@ -6067,21 +6168,37 @@ color: #005CFF;
 }
 
 @media (max-width: 600px) {
-  /* full-bleed gallery: edge-to-edge, app-like. Fixed 200px height on phone (overrides
-     the 980px breakpoint's aspect-ratio: 4/3, which made the box too tall here). */
+  /* full-bleed gallery: edge-to-edge, app-like. Extra height (vs. the plain photo height)
+     reserves room at the bottom for the controls row, now overlaid on the image itself
+     (round 15 — supersedes the earlier "no overlay" layout). */
   .md3 .vdp-gallerybox {
     margin: 0 -24px;
     border-radius: 0;
     border: 0;
     box-shadow: none;
-    height: 200px;
+    height: 230px;
     aspect-ratio: auto;
   }
-  /* controls row sits BELOW the image in normal flow (per user: no overlay) */
+  /* .vdp-gallery is the positioning context: .gallery-controls-row is its own sibling of
+     .vdp-gallerybox in the DOM, so it needs a relative ancestor to overlay against. */
+  .md3 .vdp-gallery {
+    position: relative;
+  }
+  /* controls row now sits ON the image as an overlay, bottom-aligned (round 15) */
   .md3 .gallery-controls-row {
-    padding: 0 2px;
+    position: absolute;
+    left: 14px;
+    right: 14px;
+    bottom: 12px;
+    z-index: 3;
+    padding: 0;
+  }
+  /* share/save icon buttons: scoped to THIS row (not the base .icon-btn--filled, which is
+     also the opaque vdp-back + desktop overlay buttons) — translucent so photo shows through. */
+  .md3 .gallery-controls-row .icon-btn--filled {
+    background-color: hsla(0, 0%, 100%, .75);
   }
-  /* the carousel's own overlay dots move into the below-image controls row (page-rendered;
+  /* the carousel's own overlay dots move into the on-image controls row (page-rendered;
      the dots div carries an inline display:flex — hence !important) */
   .md3 .vdp-gallerybox .cardcar-dots {
     display: none !important;
@@ -6451,11 +6568,19 @@ color: #005CFF;
   .md3 .vdp-similar {
     margin-top: 14px !important;
   }
+  .md3 #vdp-kontakt {
+    border: 1px solid #D4DDE7;
+    box-shadow: none;
+  }
   .md3 #vdp-bewertungen {
     padding: 28px 24px !important;
+    border: 1px solid #D4DDE7;
+    box-shadow: none;
   }
   .md3 #vdp-preis {
     padding: 0 !important;
+    border: 1px solid #D4DDE7;
+    box-shadow: none;
   }
   .md3 #vdp-preis h2 {
     padding: 22px 22px 0 !important;
@@ -6694,6 +6819,8 @@ color: #005CFF;
     margin-bottom: 20px !important;
     padding: 18px !important;
     box-sizing: border-box;
+    border: 1px solid #D4DDE7;
+    box-shadow: none;
     display: flex;
     flex-direction: column;
   }
@@ -6823,6 +6950,10 @@ color: #005CFF;
     text-align: center;
     color: #ffffff;
   }
+  .md3 #vdp-eco {
+    border: 1px solid #D4DDE7;
+    box-shadow: none;
+  }
   .md3 #vdp-eco .md-label-sm {
     font-family: Arial, Helvetica, sans-serif;
     font-style: normal;
@@ -6833,6 +6964,8 @@ color: #005CFF;
   }
   .md3 #vdp-daten {
     padding: 26px 24px 34px 24px;
+    border: 1px solid #D4DDE7;
+    box-shadow: none;
   }
   .md3 #vdp-daten .mbtn--text {
     font-family: Arial, Helvetica, sans-serif;
@@ -6855,6 +6988,8 @@ color: #005CFF;
   }
   .md3 #vdp-ausstattung {
     padding: 28px 24px 19px 24px;
+    border: 1px solid #D4DDE7;
+    box-shadow: none;
   }
   .md3 #vdp-ausstattung h2 {
     margin: 0 0 30px;
@@ -7018,6 +7153,8 @@ color: #005CFF;
   }
   .md3 .enq-country {
     width: 70px;
+  }
+  .md3 .enq-country .mselect-label {
     font-family: Arial, Helvetica, sans-serif;
     font-style: normal;
     font-weight: 400;
@@ -8931,3 +9068,160 @@ color: #005CFF;
   background: var(--md-sc-lowest);
   box-shadow: none;
 }
+
+/* ==========================================================================
+   VdpViewer "all photos" bottom sheet (libs/packages/fe-ui-core-autobahn/vdp/VdpViewer.tsx)
+   --------------------------------------------------------------------------
+   New selectors only, own `.vdp-photosheet*` prefix — nothing above this block
+   is touched. Static values live here; only per-state dynamics (slide
+   transform/transition while open/dragging, backdrop opacity/pointer-events)
+   stay inline in the component. 3 grid columns is the default (portrait,
+   <=693px); the 693-860px media query below is the ONLY landscape-specific
+   override, matching the one visual difference the spec calls for.
+   ========================================================================== */
+.md3 .vdp-photosheet-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 210;
+}
+.md3 .vdp-photosheet {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100vh;
+  z-index: 211;
+  display: flex;
+  flex-direction: column;
+  /* same dark color as the viewer's own header bar (rgba(6,11,18,0.8)), but fully opaque: the
+     header uses 0.8 alpha OVER a photo, whereas this panel sits over the dimmed backdrop + viewer
+     behind it — at 0.8 alpha, high-contrast content back there (e.g. the blue CTA button) bled
+     through visibly during testing, so opacity is dropped without changing the hue itself. */
+  background: rgb(6, 11, 18);
+  border-radius: 16px 16px 0 0;
+  overflow: hidden;
+}
+.md3 .vdp-photosheet__header {
+  position: relative;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 88px;
+  padding-top: 10px;
+  touch-action: none;
+}
+.md3 .vdp-photosheet__handle {
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.28);
+}
+.md3 .vdp-photosheet__close {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.md3 .vdp-photosheet__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.md3 .vdp-photosheet__logo--portrait {
+  transform: scale(0.75);
+}
+.md3 .vdp-photosheet__titles {
+  flex: none;
+  padding: 0 16px 12px;
+  text-align: left;
+}
+.md3 .vdp-photosheet__title {
+  margin: 0;
+  font-family: 'Inter', var(--md-font);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
+  color: #ffffff;
+}
+.md3 .vdp-photosheet__subtitle {
+  margin: 4px 0 0;
+  font-family: 'Inter', var(--md-font);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  color: rgba(255, 255, 255, 0.56);
+}
+.md3 .vdp-photosheet__scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 12px 12px;
+}
+.md3 .vdp-photosheet__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+.md3 .vdp-photosheet__tile {
+  position: relative;
+  aspect-ratio: 4 / 3;
+  box-sizing: border-box;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  padding: 0;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.06);
+}
+.md3 .vdp-photosheet__tile img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.md3 .vdp-photosheet__tile--active {
+  border: 3px solid #0b63f6;
+}
+.md3 .vdp-photosheet__badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #0b63f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+.md3 .vdp-photosheet__footer {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  height: 44px;
+  padding: 0 16px;
+  /* rgba(0,0,0,0.5) was invisible here — it darkens whatever's behind it, and the sheet's own
+     panel (rgb(6,11,18)) is already almost black, so a 50%-black overlay on top of near-black
+     reads as no change at all. #1c222c is lighter/bluer and already used elsewhere in this same
+     file (landscape's "Anrufen" CTA background), so it's a real, visible band without a new tone. */
+  background: #1c222c;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.72);
+  font-family: 'Inter', var(--md-font);
+  font-size: 13px;
+  font-weight: 500;
+}
+@media (min-width: 693px) and (max-width: 860px) {
+  .md3 .vdp-photosheet__grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}

package/utils/financeFormat.ts

@@ -1,62 +1,62 @@
-// Autobahn (auto.de redesign) — shared financing-number formatting.
-//
-// Extracted from vdp/VdpModules.tsx's FinanceDetailsModal so non-React consumers (e.g. the
-// Meta AIA marketing-image renderer) format the SAME real numbers the same way, instead of a
-// second copy drifting from the VDP's. Pure TS, no React/JSX — safe to import from a plain
-// Node service.
-//
-// The "only real figures, never a fabricated total" rule is load-bearing (legal: balloon
-// financing means monthly×term is NOT the total) and lives here once, not per-caller.
-
-/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
- *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
-export function formatEur(n: number): string {
-  return n.toLocaleString('de-DE');
-}
-
-/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
-export function formatPct(n: number): string {
-  return `${n.toFixed(2).replace('.', ',')} %`;
-}
-
-export interface FinanceExampleFields {
-  price: number;
-  apr: number;
-  down: number;
-  /** Real config figure — falls back to price-down ONLY when genuinely absent. */
-  netLoanAmount?: number;
-  nominalRate?: number;
-  finalInstallment?: number;
-  grossAmount?: number;
-}
-
-export interface FinanceExampleLabels {
-  vehiclePrice: string;
-  priceSuffix: string;
-  apr: string;
-  nominal: string;
-  net: string;
-  down: string;
-  final: string;
-  gross: string;
-}
-
-/**
- * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
- * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
- * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
- * `exampleLine`, byte-for-byte).
- */
-export function buildFinanceExampleLine(fields: FinanceExampleFields, labels: FinanceExampleLabels, footnoteMarker = '³'): string {
-  const netto = fields.netLoanAmount != null ? fields.netLoanAmount : Math.max(0, fields.price - fields.down);
-  const parts: string[] = [
-    `${labels.vehiclePrice}: ${formatEur(fields.price)} € ${labels.priceSuffix}`,
-    ...(fields.apr > 0 ? [`${labels.apr}: ${formatPct(fields.apr)}`] : []),
-    ...(fields.nominalRate != null && fields.nominalRate > 0 ? [`${labels.nominal}: ${formatPct(fields.nominalRate)}`] : []),
-    `${labels.net}: ${formatEur(netto)} €`,
-    `${labels.down}: ${formatEur(fields.down)} €`,
-    ...(fields.finalInstallment != null && fields.finalInstallment > 0 ? [`${labels.final}: ${formatEur(fields.finalInstallment)} €`] : []),
-    ...(fields.grossAmount != null && fields.grossAmount > 0 ? [`${labels.gross}: ${formatEur(fields.grossAmount)} €`] : []),
-  ];
-  return `${footnoteMarker} ${parts.join('; ')};`;
-}
+// Autobahn (auto.de redesign) — shared financing-number formatting.
+//
+// Extracted from vdp/VdpModules.tsx's FinanceDetailsModal so non-React consumers (e.g. the
+// Meta AIA marketing-image renderer) format the SAME real numbers the same way, instead of a
+// second copy drifting from the VDP's. Pure TS, no React/JSX — safe to import from a plain
+// Node service.
+//
+// The "only real figures, never a fabricated total" rule is load-bearing (legal: balloon
+// financing means monthly×term is NOT the total) and lives here once, not per-caller.
+
+/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
+ *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
+export function formatEur(n: number): string {
+  return n.toLocaleString('de-DE');
+}
+
+/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
+export function formatPct(n: number): string {
+  return `${n.toFixed(2).replace('.', ',')} %`;
+}
+
+export interface FinanceExampleFields {
+  price: number;
+  apr: number;
+  down: number;
+  /** Real config figure — falls back to price-down ONLY when genuinely absent. */
+  netLoanAmount?: number;
+  nominalRate?: number;
+  finalInstallment?: number;
+  grossAmount?: number;
+}
+
+export interface FinanceExampleLabels {
+  vehiclePrice: string;
+  priceSuffix: string;
+  apr: string;
+  nominal: string;
+  net: string;
+  down: string;
+  final: string;
+  gross: string;
+}
+
+/**
+ * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
+ * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
+ * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
+ * `exampleLine`, byte-for-byte).
+ */
+export function buildFinanceExampleLine(fields: FinanceExampleFields, labels: FinanceExampleLabels, footnoteMarker = '³'): string {
+  const netto = fields.netLoanAmount != null ? fields.netLoanAmount : Math.max(0, fields.price - fields.down);
+  const parts: string[] = [
+    `${labels.vehiclePrice}: ${formatEur(fields.price)} € ${labels.priceSuffix}`,
+    ...(fields.apr > 0 ? [`${labels.apr}: ${formatPct(fields.apr)}`] : []),
+    ...(fields.nominalRate != null && fields.nominalRate > 0 ? [`${labels.nominal}: ${formatPct(fields.nominalRate)}`] : []),
+    `${labels.net}: ${formatEur(netto)} €`,
+    `${labels.down}: ${formatEur(fields.down)} €`,
+    ...(fields.finalInstallment != null && fields.finalInstallment > 0 ? [`${labels.final}: ${formatEur(fields.finalInstallment)} €`] : []),
+    ...(fields.grossAmount != null && fields.grossAmount > 0 ? [`${labels.gross}: ${formatEur(fields.grossAmount)} €`] : []),
+  ];
+  return `${footnoteMarker} ${parts.join('; ')};`;
+}