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)",
         }}

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");
+  });
+});