diff --git a/public/loesung.jpg b/public/loesung.jpg
new file mode 100644
index 0000000..016fae6
Binary files /dev/null and b/public/loesung.jpg differ
diff --git a/public/problem.jpg b/public/problem.jpg
new file mode 100644
index 0000000..d18559b
Binary files /dev/null and b/public/problem.jpg differ
diff --git a/public/problem_blitz.jpg b/public/problem_blitz.jpg
new file mode 100644
index 0000000..6905384
Binary files /dev/null and b/public/problem_blitz.jpg differ
diff --git a/src/components/ProblemSection.tsx b/src/components/ProblemSection.tsx
index b491817..530e32b 100644
--- a/src/components/ProblemSection.tsx
+++ b/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"
diff --git a/src/components/SolutionSection.tsx b/src/components/SolutionSection.tsx
index 9c0bbee..73064c6 100644
--- a/src/components/SolutionSection.tsx
+++ b/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"
diff --git a/src/components/Values.tsx b/src/components/Values.tsx
index f7a04b0..3619cf2 100644
--- a/src/components/Values.tsx
+++ b/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
       />
diff --git a/src/index.css b/src/index.css
index 0a43abc..288a222 100644
--- a/src/index.css
+++ b/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;