pics

src/components/ProblemSection.tsx

@@ -24,6 +24,14 @@ const ProblemSection = () => {
 
   return (
     <section className="section-problem-solution py-24 md:py-32 relative overflow-hidden">
+      {/* Hintergrundbild: nur Blitze rechts, auf Handy maximale Breite */}
+      <div
+        className="problem-section-bg absolute inset-0 bg-right bg-no-repeat opacity-[0.3] z-0"
+        style={{
+          backgroundImage: "url(/problem_blitz.jpg)",
+        }}
+        aria-hidden
+      />
       <div className="absolute inset-0 w-full overflow-hidden z-0">
         <LightRays
           raysOrigin="top-center"

src/components/SolutionSection.tsx

@@ -13,6 +13,14 @@ const SolutionSection = () => {
 
   return (
     <section className="section-problem-solution py-24 md:py-32 relative overflow-hidden">
+      {/* Hintergrundbild mittig, auf Handy maximale Breite */}
+      <div
+        className="solution-section-bg absolute inset-0 bg-center bg-no-repeat opacity-[0.3] z-0"
+        style={{
+          backgroundImage: "url(/loesung.jpg)",
+        }}
+        aria-hidden
+      />
       <div className="absolute inset-0 w-full overflow-hidden z-0">
         <LightRays
           raysOrigin="top-center"

src/components/Values.tsx

@@ -36,12 +36,11 @@ const Values = () => {
 
   return (
     <section id="features" className="py-24 md:py-32 bg-background relative overflow-hidden">
-      {/* Hintergrundbild: kleiner, leicht transparent */}
+      {/* Hintergrundbild: auf Handy maximale Breite */}
       <div
-        className="absolute inset-0 bg-right bg-no-repeat opacity-[0.3]"
+        className="values-section-bg absolute inset-0 bg-right bg-no-repeat opacity-[0.3]"
         style={{
           backgroundImage: "url(/backgroud_effect.png)",
-          backgroundSize: "45%",
         }}
         aria-hidden
       />

src/index.css

@@ -159,6 +159,36 @@
     background-color: hsl(var(--background));
   }
 
+  /* Problem-Section Hintergrundbild: auf Handy maximale Breite, sonst 45% */
+  .problem-section-bg {
+    background-size: 45%;
+  }
+  @media (max-width: 768px) {
+    .problem-section-bg {
+      background-size: 100%;
+    }
+  }
+
+  /* Lösung-Section Hintergrundbild: auf Handy maximale Breite, sonst 45% */
+  .solution-section-bg {
+    background-size: 45%;
+  }
+  @media (max-width: 768px) {
+    .solution-section-bg {
+      background-size: 100%;
+    }
+  }
+
+  /* Was Sie bekommen (Values) Hintergrundbild: auf Handy maximale Breite, sonst 45% */
+  .values-section-bg {
+    background-size: 45%;
+  }
+  @media (max-width: 768px) {
+    .values-section-bg {
+      background-size: 100%;
+    }
+  }
+
   /* Leichter roter Tint auf Inhaltsblöcken der Problem-Sektion */
   .problem-section-tint {
     position: relative;