Use the provided car-light.png for the contact page's light-mode backdrop

Swaps the placeholder site photo (hero-trunk) for the actual asset from
the design handoff - a grayscale interior/speaker shot. Anchored bottom-
left at ~34% width with the README's scrim gradient over it, plus a
vertical mask fading the top edge to transparent so it blends into the
hero without a hard boundary. Hidden ≤980px and in dark mode, unchanged
otherwise.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

hifi-src/src/pages/public/ContactPage.jsx

@@ -9,7 +9,7 @@ import { useCookieConsent } from '../../context/CookieConsentContext.jsx';
 import { User, Mail, Phone, Car, Package, Send, MapPin, ExternalLink } from 'lucide-react';
 import grungeBg from '../../assets/contact/grunge.png';
 import splatterBg from '../../assets/contact/splatter.png';
-import carPhoto from '../../assets/photos/hero-trunk.webp';
+import carPhoto from '../../assets/contact/car-light.png';
 
 const digitsOnly = (value) => (value || '').replace(/[^\d+]/g, '');
 const waHref = (whatsapp) => `https://wa.me/${digitsOnly(whatsapp).replace(/^0/, '49').replace('+', '')}`;
@@ -190,16 +190,24 @@ export default function ContactPage() {
         <path d="M 860 -160 A 700 700 0 0 1 860 1160" fill="none" stroke="rgba(168,225,12,0.18)" strokeWidth="1" strokeDasharray="2 9" />
       </svg>
 
-      {/* Light Mode: Auto-Foto links + gruener Lichtstreifen rechts (ab 981px, s. README) */}
+      {/* Light Mode: Auto-Foto unten links verankert + gruener Lichtstreifen rechts (ab 981px, s. README).
+          Maske uebernimmt die weiche Ausblendung nach oben (kein harter oberer Rand bei
+          voller Hoehe), der Scrim obendrauf das weiche Verlaufen nach rechts in die Seite. */}
       <div
         aria-hidden="true"
-        className="pointer-events-none absolute left-0 top-0 hidden h-full w-1/5 bg-cover bg-left dark:!hidden min-[981px]:block"
+        className="pointer-events-none absolute bottom-0 left-0 hidden h-full w-[34%] dark:!hidden min-[981px]:block"
+      >
+        <div
+          className="h-full w-full bg-cover"
           style={{
             backgroundImage: `url(${carPhoto})`,
-          WebkitMaskImage: 'linear-gradient(90deg, black 55%, transparent 100%)',
+            backgroundPosition: 'left bottom',
-          maskImage: 'linear-gradient(90deg, black 55%, transparent 100%)',
+            WebkitMaskImage: 'linear-gradient(180deg, transparent 0%, black 40%)',
+            maskImage: 'linear-gradient(180deg, transparent 0%, black 40%)',
           }}
         />
+        <div className="absolute inset-0" style={{ background: 'var(--kf-scrim)' }} />
+      </div>
       <div
         aria-hidden="true"
         className="pointer-events-none absolute right-[4%] top-0 hidden h-full w-[26%] rotate-6 dark:!hidden min-[981px]:block"

hifi-src/src/referenz/Kontaktformular Redesign/design_handoff_kontaktformular/README.md

@@ -99,7 +99,7 @@ Alle Icons: Outline-SVGs, `stroke-width: 2`, `stroke-linecap/linejoin: round` (L
 
 ### Light Mode
 - Seitenverlauf: `linear-gradient(120deg, #eef0ea 0%, #f6f8f3 45%, #fbfcf9 100%)`.
-- Links: Auto-Foto-Streifen, 34% Breite, volle Höhe, `object-fit: cover`, darüber Scrim `linear-gradient(90deg, rgba(244,246,241,0.35), rgba(244,246,241,0.55) 55%, rgba(246,248,243,1))`. Foto: eigenes Asset der Seite verwenden. **≤980px ausblenden.**
+- Links: Auto-Foto-Streifen — **exakt die Datei `assets/car-light.png` verwenden** (Graustufen-Interieur mit Lautsprecher, kein anderes Foto!). Position: unten links verankert (`background-position: left bottom` bzw. `object-position: left bottom`), ca. 34% Viewport-Breite, `object-fit: cover`, `pointer-events: none`. Darüber zwingend der Scrim `linear-gradient(90deg, rgba(244,246,241,0.35), rgba(244,246,241,0.55) 55%, rgba(246,248,243,1))` + weiche Ausblendung nach oben (`mask-image: linear-gradient(180deg, transparent 0%, black 40%)`), sodass das Foto ohne harte Kanten in den hellen Hintergrund ausläuft. **≤980px ausblenden.** Hinweis: Das PNG ist 310×512px (aus dem Design-Mockup extrahiert) — falls ein höher aufgelöstes Original dieses Fotos in den Assets der Website existiert, dieses verwenden, aber dasselbe Motiv.
 - Rechts: grüne „Lichtstreifen"-Gruppe, 42% Breite, um 6° rotiert, aus vier Ebenen: 3px-Linie (`linear-gradient(180deg, transparent, #b6e619 30%, #cfef5a 55%, transparent)`, blur 1px, opacity .85), 90px weicher Schein (blur 26px), zweite dünne Linie (2px, blur 1px), großer radialer Glow (`rgba(207,239,90,0.35)`, blur 20px).
 - Oben links: dezente Topo-Wellenlinien (5 geschwungene Pfade, Stroke `#d7dccd`, 1px, opacity .5, ca. 360×280px).
 
@@ -156,7 +156,7 @@ Als CSS Custom Properties umgesetzt (Prototyp nutzt `:root` + `[data-theme="dark
 ## Assets (beiliegend)
 - `assets/grunge.png` — Dark-Mode Grunge-Hintergrund (1600×1400)
 - `assets/splatter.png` — Dark-Mode Paint-Splatter, transparent (1100×1500)
-- Auto-Foto für den Light Mode: **nicht enthalten** — vorhandenes Bildmaterial der Seite verwenden.
+- `assets/car-light.png` — Auto-Foto Light Mode (Graustufen-Interieur, 310×512, aus dem Mockup extrahiert). **Genau dieses Motiv verwenden**, kein anderes Foto.
 
 ## Dateien
 - `Kontaktformular.dc.html` — Design-Referenz (Prototyp; Template + Inline-Styles; Dark Mode über `data-theme="dark"` toggelbar — im Prototyp per Button, in der Umsetzung über den globalen Theme-Schalter)