Use the handoff's baked background images for the contact section

Third iteration on this backdrop: composing the layers natively (photo,
scrim, masks, streak stack, topo lines, grunge/splatter/arc) kept
drifting from the intended look, so the handoff now ships each theme's
background as a single pre-composed 2560x1440 image. All hand-built
layers are deleted; the section carries exactly one background-image
via .kontakt-sektion (cover/center), swapped for dark mode through the
existing .dark class. Obsolete layer assets are removed, the unused
imports with them.

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

hifi-src/src/index.css

@@ -80,26 +80,16 @@ html {
   --kf-pkgbrd: rgba(168, 225, 12, 0.4);
   --kf-btntext: #0f1208;
 }
-/* Auto-Foto unten links im Light Mode: das Asset ist nur 310x512px und darf
-   NICHT auf Sektionsgroesse gestreckt werden - natuerliche Proportionen,
-   Breite per clamp gedeckelt (~460px). Doppelmaske (rechts + oben) laesst es
-   ohne harte Kanten in den Seitenverlauf auslaufen. */
-.kontakt-bg-foto {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: clamp(280px, 24vw, 460px); /* Höhe automatisch, Seitenverhältnis beibehalten */
-  height: auto;
-  pointer-events: none;
-  z-index: 0;
-  opacity: 0.9;
-  /* weiches Auslaufen nach rechts UND nach oben, keine harten Kanten: */
-  -webkit-mask-image: linear-gradient(90deg, black 55%, transparent 100%),
-                      linear-gradient(180deg, transparent 0%, black 45%);
-  -webkit-mask-composite: source-in;
-  mask-image: linear-gradient(90deg, black 55%, transparent 100%),
-              linear-gradient(180deg, transparent 0%, black 45%);
-  mask-composite: intersect;
+/* Kontakt-Sektion: EIN fertig gebackenes Hintergrundbild pro Theme (enthaelt
+   Verlauf, Auto-Foto, Wellenlinien bzw. Grunge/Splatter/Kreisbogen komplett) -
+   keine eigenen Ebenen, Filter oder Verlaeufe mehr (README "Hintergruende"). */
+.kontakt-sektion {
+  background-image: url('./assets/contact/bg-light.png');
+  background-size: cover;
+  background-position: center;
+}
+.dark .kontakt-sektion {
+  background-image: url('./assets/contact/bg-dark.png');
 }
 
 .kf-page input::placeholder,

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

@@ -7,9 +7,8 @@ import { useSiteSettings } from '../../context/SiteSettingsContext.jsx';
 import { useLanguage } from '../../context/LanguageContext.jsx';
 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/contact/car-light.png';
+// Die Sektions-Hintergruende (bg-light.png / bg-dark.png) kommen als fertig
+// gebackene Einzelbilder ueber die CSS-Klasse .kontakt-sektion (index.css).
 
 const digitsOnly = (value) => (value || '').replace(/[^\d+]/g, '');
 const waHref = (whatsapp) => `https://wa.me/${digitsOnly(whatsapp).replace(/^0/, '49').replace('+', '')}`;
@@ -166,78 +165,9 @@ export default function ContactPage() {
 
   return (
     <div
-      className="kf-page relative w-full overflow-hidden px-4 pb-10 sm:px-10"
-      style={{ background: 'var(--kf-pagebg)', color: 'var(--kf-text2)' }}
+      className="kf-page kontakt-sektion relative w-full overflow-hidden px-4 pb-10 sm:px-10"
+      style={{ color: 'var(--kf-text2)' }}
     >
-      {/* Dark Mode: Grunge-Textur + Splatter + Bogen (Assets aus dem Handoff) */}
-      <div
-        aria-hidden="true"
-        className="pointer-events-none absolute inset-0 hidden bg-cover bg-center dark:block"
-        style={{ backgroundImage: `url(${grungeBg})` }}
-      />
-      <div
-        aria-hidden="true"
-        className="pointer-events-none absolute -right-[4%] -top-[8%] hidden h-[122%] w-[46%] bg-contain bg-right bg-no-repeat dark:block"
-        style={{ backgroundImage: `url(${splatterBg})`, filter: 'drop-shadow(0 0 22px rgba(164,212,23,0.35))' }}
-      />
-      <svg
-        aria-hidden="true"
-        viewBox="0 0 600 1000"
-        preserveAspectRatio="xMaxYMid slice"
-        className="pointer-events-none absolute right-0 top-0 hidden h-full w-[60%] dark:block"
-      >
-        <path d="M 900 -200 A 720 720 0 0 1 900 1200" fill="none" stroke="rgba(168,225,12,0.5)" strokeWidth="1.5" />
-        <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 unten links in NATUERLICHER Groesse (310x512-Asset,
-          Breite per clamp ~460px gedeckelt, siehe .kontakt-bg-foto in index.css) -
-          nicht auf Sektionsgroesse strecken. Ab 981px, im Dark Mode aus. */}
-      <img
-        src={carPhoto}
-        alt=""
-        aria-hidden="true"
-        className="kontakt-bg-foto hidden dark:!hidden min-[981px]:block"
-      />
-      {/* Gruene Lichtstreifen-Gruppe rechts: volle Sektionshoehe, 42% Breite,
-          6 Grad rotiert, vier Ebenen (README "Hintergruende -> Light Mode"). */}
-      <div
-        aria-hidden="true"
-        className="pointer-events-none absolute right-0 top-0 hidden h-full w-[42%] rotate-6 dark:!hidden min-[981px]:block"
-      >
-        <div
-          className="absolute right-1/2 top-0 h-full w-[3px] opacity-[0.85] blur-[1px]"
-          style={{ background: 'linear-gradient(180deg, transparent, #b6e619 30%, #cfef5a 55%, transparent)' }}
-        />
-        <div
-          className="absolute right-1/2 top-0 h-full w-[90px] translate-x-1/2 opacity-70 blur-[26px]"
-          style={{ background: 'linear-gradient(180deg, transparent, #cfef5a 40%, transparent)' }}
-        />
-        <div
-          className="absolute right-[40%] top-0 h-full w-[2px] opacity-60 blur-[1px]"
-          style={{ background: 'linear-gradient(180deg, transparent, #b6e619 35%, transparent)' }}
-        />
-        <div
-          className="absolute right-1/2 top-1/3 h-[420px] w-[420px] translate-x-1/2 rounded-full opacity-70 blur-[20px]"
-          style={{ background: 'radial-gradient(circle, rgba(207,239,90,0.35), transparent 70%)' }}
-        />
-      </div>
-      {/* Light Mode: dezente Topo-Wellenlinien oben links (README "Hintergruende"). */}
-      <svg
-        aria-hidden="true"
-        viewBox="0 0 360 280"
-        className="pointer-events-none absolute left-0 top-0 block h-[280px] w-[360px] opacity-50 dark:hidden"
-        fill="none"
-        stroke="var(--kf-topo)"
-        strokeWidth="1"
-      >
-        <path d="M -20 40 C 60 10, 140 70, 220 40 S 360 10, 400 50" />
-        <path d="M -20 90 C 70 55, 150 115, 230 85 S 370 60, 400 100" />
-        <path d="M -20 140 C 60 105, 150 165, 235 135 S 365 110, 400 150" />
-        <path d="M -20 190 C 70 155, 145 215, 230 185 S 370 160, 400 200" />
-        <path d="M -20 240 C 60 205, 150 265, 235 235 S 365 210, 400 250" />
-      </svg>
-
       <div className="relative z-10 mx-auto max-w-[1280px] pt-10 sm:pt-14">
         {/* Hero */}
         <div

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

@@ -97,6 +97,26 @@ Alle Icons: Outline-SVGs, `stroke-width: 2`, `stroke-linecap/linejoin: round` (L
 
 ## Hintergründe (Seitenebene, hinter den Karten)
 
+**⚠️ EMPFOHLENER WEG: Fertig gebackene Hintergrundbilder verwenden — NICHT selbst komponieren.**
+Die kompletten Hintergründe liegen als je EIN Bild bei:
+
+- Light: `assets/bg-light.png` (2560×1440 — Verlauf + Auto-Foto + Wellenlinien + grüner Lichtstreifen, alles enthalten)
+- Dark: `assets/bg-dark.png` (2560×1440 — Grunge-Textur + Paint-Splatter + Kreisbogen, alles enthalten)
+
+Umsetzung auf der Sektion:
+```css
+.kontakt-sektion {
+  position: relative;
+  background-image: url('assets/bg-light.png');
+  background-size: cover;
+  background-position: center;
+}
+[data-theme="dark"] .kontakt-sektion { background-image: url('assets/bg-dark.png'); }
+```
+Keine weiteren Hintergrund-Ebenen, keine eigenen Verläufe, keine Filter, kein zusätzliches Foto. Fertig.
+
+Die folgenden Abschnitte beschreiben nur, WIE diese Bilder aufgebaut sind (Referenz, falls einzelne Ebenen nativ nachgebaut werden sollen — standardmäßig überspringen):
+
 ### Light Mode
 - Seitenverlauf: `linear-gradient(120deg, #eef0ea 0%, #f6f8f3 45%, #fbfcf9 100%)`.
 - 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.
@@ -154,9 +174,9 @@ Als CSS Custom Properties umgesetzt (Prototyp nutzt `:root` + `[data-theme="dark
 - Theme — vom globalen Umschalter der Seite, kein lokaler State.
 
 ## Assets (beiliegend)
-- `assets/grunge.png` — Dark-Mode Grunge-Hintergrund (1600×1400)
-- `assets/splatter.png` — Dark-Mode Paint-Splatter, transparent (1100×1500)
-- `assets/car-light.png` — Auto-Foto Light Mode (Graustufen-Interieur, 310×512, aus dem Mockup extrahiert). **Genau dieses Motiv verwenden**, kein anderes Foto.
+- `assets/bg-light.png` — **kompletter Light-Mode-Hintergrund** (2560×1440) — als `background-image` verwenden
+- `assets/bg-dark.png` — **kompletter Dark-Mode-Hintergrund** (2560×1440) — als `background-image` verwenden
+- `assets/grunge.png`, `assets/splatter.png`, `assets/car-light.png` — Einzelebenen (nur Referenz, normal nicht nötig)
 
 ## 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)

hifi/index.html

@@ -43,9 +43,9 @@
         "sameAs": ["https://www.youtube.com/@hifiplanet2812"]
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-Ojki4k68.js"></script>
+    <script type="module" crossorigin src="/assets/index-BUHP9G1k.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/lucide-icons-CnpfS6R8.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-C9rG7muU.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-9666bnLb.css">
   </head>
   <body class="bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100">
     <div id="root"></div>