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/Process.tsx

@@ -1,6 +1,9 @@
+import { lazy, Suspense } from "react";
 import CountUp from "@/components/CountUp";
 import { TextHoverEffect } from "@/components/ui/text-hover-effect";
-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 Process = () => {
   const steps = [
@@ -30,25 +33,27 @@ const Process = () => {
     <section id="process" className="pt-8 pb-24 md:pt-12 md:pb-32 bg-secondary/20 relative">
       {/* PixelBlast animated background */}
       <div className="absolute inset-0 z-0 w-full h-full">
-        <PixelBlast
-          variant="circle"
-          pixelSize={3}
-          color="#5b5b5b"
-          patternScale={7.75}
-          patternDensity={0.7}
-          pixelSizeJitter={2}
-          enableRipples={false}
-          rippleSpeed={0.4}
-          rippleThickness={0.12}
-          rippleIntensityScale={1.5}
-          liquid={false}
-          liquidStrength={0.12}
-          liquidRadius={1.2}
-          liquidWobbleSpeed={5}
-          speed={0.3}
-          edgeFade={0.5}
-          transparent
-        />
+        <Suspense fallback={null}>
+          <PixelBlast
+            variant="circle"
+            pixelSize={3}
+            color="#5b5b5b"
+            patternScale={7.75}
+            patternDensity={0.7}
+            pixelSizeJitter={2}
+            enableRipples={false}
+            rippleSpeed={0.4}
+            rippleThickness={0.12}
+            rippleIntensityScale={1.5}
+            liquid={false}
+            liquidStrength={0.12}
+            liquidRadius={1.2}
+            liquidWobbleSpeed={5}
+            speed={0.3}
+            edgeFade={0.5}
+            transparent
+          />
+        </Suspense>
       </div>
       {/* TextHoverEffect */}
       <div className="h-[14rem] flex items-center justify-center -mb-4 relative z-10">