From b2e17d96c214217f48cf88c77a6c8ccab47b2e0c Mon Sep 17 00:00:00 2001
From: root <root@ubuntu-16gb-webklar-v1.0.0>
Date: Thu, 1 Oct 2026 10:43:16 +0000
Subject: [PATCH] Hintergrundbilder nur im Dark Mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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  |  4 ++--
 src/components/SolutionSection.tsx |  4 ++--
 src/components/Values.tsx          |  4 ++--
 src/test/sofort-paket.test.tsx     | 15 +++++++++++++++
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/ProblemSection.tsx b/src/components/ProblemSection.tsx
index cbde41e..c40c82c 100644
--- a/src/components/ProblemSection.tsx
+++ b/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)",
         }}
diff --git a/src/components/SolutionSection.tsx b/src/components/SolutionSection.tsx
index 152aa6d..587bb84 100644
--- a/src/components/SolutionSection.tsx
+++ b/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)",
         }}
diff --git a/src/components/Values.tsx b/src/components/Values.tsx
index 0a38ebf..ef73f68 100644
--- a/src/components/Values.tsx
+++ b/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)",
         }}
diff --git a/src/test/sofort-paket.test.tsx b/src/test/sofort-paket.test.tsx
index e98027a..31c04de 100644
--- a/src/test/sofort-paket.test.tsx
+++ b/src/test/sofort-paket.test.tsx
@@ -456,3 +456,18 @@ describe("A5 Anker landen nicht unter dem fixen Header", () => {
     expect(lies("src/index.css")).toMatch(/section\[id\]\s*\{[^}]*scroll-margin-top:\s*6rem/);
   });
 });
+
+describe("A2 Hintergrundbilder nur im dunklen Modus", () => {
+  const BILDER: { name: string; ui: React.ReactElement; datei: string }[] = [
+    { name: "ProblemSection", ui: <ProblemSection />, datei: "problem_blitz.jpg" },
+    { name: "SolutionSection", ui: <SolutionSection />, datei: "loesung.jpg" },
+    { name: "Values", ui: <Values />, datei: "backgroud_effect.webp" },
+  ];
+
+  it.each(BILDER)("$name: $datei ist im hellen Modus ausgeblendet und im dunklen sichtbar", ({ ui, datei }) => {
+    const { container } = zeige(ui);
+    const bild = container.querySelector<HTMLElement>(`[style*="${datei}"]`);
+    expect(bild).not.toBeNull();
+    expect(bild).toHaveClass("hidden", "dark:block");
+  });
+});