Performance: Animationen pausieren, Footer-Raster entschärft, WebGL nachladen

- Footer-Schriftzug (FlickeringGrid): Textmaske einmal pro Größe statt
  ~14.500 getImageData-Aufrufe pro Frame, nur flackernde Quadrate neu
  zeichnen (69–86 ms -> 0,1–0,2 ms pro Frame, Darstellung pixelgleich)
- PixelBlast: WebGL erst in Viewport-Nähe anlegen, unsichtbar pausieren
  (autoPauseOffscreen war nie angeschlossen), Shader asynchron kompilieren,
  beim Unmount aufräumen (Render-Schleifen liefen nach Seitenwechsel
  weiter); kein MSAA, keine erzwungene High-Performance-GPU
- Silk (Hero): nur rendern, solange sichtbar; DPR max. 1,5
- LightRays: keine verwaiste Render-Schleife mehr bei schnellem Vorbeiscrollen
- BorderGlow (Kontaktkarte): Sweep nur, solange die Karte sichtbar ist
- Silk, PixelBlast, LightRays als eigene Chunks (React.lazy):
  Haupt-Bundle 1,6 MB -> 646 KB (gzip 470 -> 207 KB)
- backgroud_effect und Emailsorter-Vorschaubild als WebP
  (974 KB -> 15 KB, 1,2 MB -> 11 KB), Projekt-Vorschaubilder lazy

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/SolutionSection.tsx

@@ -1,11 +1,13 @@
 import { Link } from "react-router-dom";
-import { useEffect, useState } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
 import { useTheme } from "next-themes";
 import { Button } from "@/components/ui/button";
 import { ArrowRight, CheckCircle2 } from "lucide-react";
 import { LampTop } from "@/components/ui/lamp";
-import LightRays from "@/components/LightRays";
-import PixelBlast from "@/components/PixelBlast";
+
+// WebGL-Effekte als eigene Chunks laden, damit der Text nicht auf three.js/ogl warten muss
+const PixelBlast = lazy(() => import("@/components/PixelBlast"));
+const LightRays = lazy(() => import("@/components/LightRays"));
 
 const SolutionSection = () => {
   const { resolvedTheme } = useTheme();
@@ -29,18 +31,20 @@ const SolutionSection = () => {
       {/* PixelBlast animated background - nur im Light Mode */}
       {isLight && (
         <div className="absolute inset-0 z-0 w-full h-full">
-          <PixelBlast
-            variant="circle"
-            pixelSize={3}
-            color="#06b6d4"
-            patternScale={7.75}
-            patternDensity={0.7}
-            pixelSizeJitter={2}
-            enableRipples={false}
-            speed={0.3}
-            edgeFade={0.5}
-            transparent
-          />
+          <Suspense fallback={null}>
+            <PixelBlast
+              variant="circle"
+              pixelSize={3}
+              color="#06b6d4"
+              patternScale={7.75}
+              patternDensity={0.7}
+              pixelSizeJitter={2}
+              enableRipples={false}
+              speed={0.3}
+              edgeFade={0.5}
+              transparent
+            />
+          </Suspense>
         </div>
       )}
       {/* Hintergrundbild mittig, auf Handy maximale Breite */}
@@ -54,20 +58,22 @@ const SolutionSection = () => {
       {/* LightRays - nur im Dark Mode */}
       {isDark && (
         <div className="absolute inset-0 w-full overflow-hidden z-0">
-          <LightRays
-            raysOrigin="top-center"
-            raysColor="#22d3ee"
-            raysSpeed={1}
-            lightSpread={0.5}
-            rayLength={3}
-            followMouse={false}
-            mouseInfluence={0}
-            noiseAmount={0}
-            distortion={0}
-            pulsating
-            fadeDistance={2}
-            saturation={2}
-          />
+          <Suspense fallback={null}>
+            <LightRays
+              raysOrigin="top-center"
+              raysColor="#22d3ee"
+              raysSpeed={1}
+              lightSpread={0.5}
+              rayLength={3}
+              followMouse={false}
+              mouseInfluence={0}
+              noiseAmount={0}
+              distortion={0}
+              pulsating
+              fadeDistance={2}
+              saturation={2}
+            />
+          </Suspense>
         </div>
       )}
       <LampTop lineClassName="bg-cyan-400" />