Hintergrundbilder nur im Dark Mode

problem_blitz.jpg, loesung.jpg und backgroud_effect.webp sind dunkle
Bilder mit 30 % Deckkraft und wurden im hellen Modus zu harten grauen
Quadraten. Die Bild-Ebenen sind jetzt "hidden dark:block"; der dunkle
Modus bleibt unverändert.

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

src/components/ProblemSection.tsx

@@ -58,9 +58,9 @@ const ProblemSection = () => {
           </Suspense>
         </div>
       )}
-      {/* Hintergrundbild: nur Blitze rechts, auf Handy maximale Breite */}
+      {/* Hintergrundbild: nur Blitze rechts, auf Handy maximale Breite; nur im Dark Mode (dunkles Bild wäre im hellen ein graues Quadrat) */}
       <div
-        className="problem-section-bg absolute inset-0 bg-right bg-no-repeat opacity-[0.3] z-0"
+        className="problem-section-bg hidden dark:block absolute inset-0 bg-right bg-no-repeat opacity-[0.3] z-0"
         style={{
           backgroundImage: "url(/problem_blitz.jpg)",
         }}

src/components/SolutionSection.tsx

@@ -47,9 +47,9 @@ const SolutionSection = () => {
           </Suspense>
         </div>
       )}
-      {/* Hintergrundbild mittig, auf Handy maximale Breite */}
+      {/* Hintergrundbild mittig, auf Handy maximale Breite; nur im Dark Mode (dunkles Bild wäre im hellen ein graues Quadrat) */}
       <div
-        className="solution-section-bg absolute inset-0 bg-center bg-no-repeat opacity-[0.3] z-0"
+        className="solution-section-bg hidden dark:block absolute inset-0 bg-center bg-no-repeat opacity-[0.3] z-0"
         style={{
           backgroundImage: "url(/loesung.jpg)",
         }}

src/components/Values.tsx

@@ -42,9 +42,9 @@ const Values = () => {
       <div className="h-[14rem] flex items-center justify-center -mb-4 relative z-10">
         <TextHoverEffect text="Leistungen" />
       </div>
-      {/* Hintergrundbild: auf Handy maximale Breite */}
+      {/* Hintergrundbild: auf Handy maximale Breite; nur im Dark Mode (dunkles Bild wäre im hellen ein graues Quadrat) */}
       <div
-        className="values-section-bg absolute inset-0 bg-right bg-no-repeat opacity-[0.3] pointer-events-none"
+        className="values-section-bg hidden dark:block absolute inset-0 bg-right bg-no-repeat opacity-[0.3] pointer-events-none"
         style={{
           backgroundImage: "url(/backgroud_effect.webp)",
         }}