big upgrade

src/components/Hero.tsx

@@ -1,6 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { ArrowRight } from "lucide-react";
 import React, { useState, useEffect, useRef } from "react";
+import { useTheme } from "next-themes";
 import Silk from "@/components/Silk";
 import CountUp from "@/components/CountUp";
 
@@ -48,6 +49,7 @@ const FOUNDING_DATE = new Date("2026-01-25"); // Samstag, 25. Januar 2026
 
 const Hero = () => {
   const navigate = useNavigate();
+  const { resolvedTheme } = useTheme();
   const [companyAge, setCompanyAge] = useState("");
   const secondBtnRef = useRef<HTMLButtonElement>(null);
 
@@ -96,9 +98,19 @@ const Hero = () => {
 
     calculateAge();
     const interval = setInterval(calculateAge, 60 * 60 * 1000); // Update every hour (only days/hours shown)
+
     return () => clearInterval(interval);
   }, []);
 
+  // ── Silk-Hintergrund Farben ──
+  const isDark = resolvedTheme === "dark";
+  // Silk: Hauptfarbe (Wellenspitzen)
+  const silkColor = isDark ? "#6a6a6a" : "#ffffff";
+  // Silk: Zweite Farbe (Wellentäler)
+  const silkColor2 = isDark ? "#000000" : "#c0c0c0";
+  // Silk: Rausch-Intensität
+  const silkNoise = isDark ? 4 : 1.5;
+
   return (
     <section className="relative min-h-screen flex flex-col justify-center overflow-hidden pt-20">
       {/* Silk animated background */}
@@ -106,9 +118,9 @@ const Hero = () => {
         <Silk
           speed={3}
           scale={0.5}
-          color="#6a6a6a"
-          noiseIntensity={4
-          }
+          color={silkColor}
+          color2={silkColor2}
+          noiseIntensity={silkNoise}
           rotation={0}
         />
       </div>