Stop stretching the contact page's light-mode car photo

The 310x512 car-light.png was scaled to the full section height via
background-size: cover, which blew it up far past its natural
resolution. It is now a plain <img> (.kontakt-bg-foto in index.css):
natural aspect ratio, width capped at clamp(280px, 24vw, 460px),
anchored bottom-left, opacity .9, and a dual mask (fade right + fade
top, mask-composite: intersect) so it dissolves into the page gradient
with no hard edges. The old scrim overlay is gone - the masks do that
job now.

The green light-streak group on the right is widened to the README's
42% at full section height (was 26%), line opacity .85 and radial glow
blur 20px per spec. Topo lines were already in place.

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

hifi-src/src/index.css

@@ -80,6 +80,28 @@ 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;
+}
+
 .kf-page input::placeholder,
 .kf-page textarea::placeholder {
   color: var(--kf-fieldicon);

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

@@ -190,30 +190,23 @@ 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 unten links verankert + gruener Lichtstreifen rechts (ab 981px, s. README).
+      {/* Light Mode: Auto-Foto unten links in NATUERLICHER Groesse (310x512-Asset,
-          Maske uebernimmt die weiche Ausblendung nach oben (kein harter oberer Rand bei
+          Breite per clamp ~460px gedeckelt, siehe .kontakt-bg-foto in index.css) -
-          voller Hoehe), der Scrim obendrauf das weiche Verlaufen nach rechts in die Seite. */}
+          nicht auf Sektionsgroesse strecken. Ab 981px, im Dark Mode aus. */}
-      <div
+      <img
+        src={carPhoto}
+        alt=""
         aria-hidden="true"
-        className="pointer-events-none absolute bottom-0 left-0 hidden h-full w-[34%] dark:!hidden min-[981px]:block"
+        className="kontakt-bg-foto hidden dark:!hidden min-[981px]:block"
-      >
-        <div
-          className="h-full w-full bg-cover"
-          style={{
-            backgroundImage: `url(${carPhoto})`,
-            backgroundPosition: 'left bottom',
-            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)' }} />
+      {/* Gruene Lichtstreifen-Gruppe rechts: volle Sektionshoehe, 42% Breite,
-      </div>
+          6 Grad rotiert, vier Ebenen (README "Hintergruende -> Light Mode"). */}
       <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"
+        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-80 blur-[1px]"
+          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
@@ -225,7 +218,7 @@ export default function ContactPage() {
           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-[40px]"
+          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>

hifi/index.html

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