diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 185a105..317c2b0 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -58,14 +58,17 @@ export function Hero() {
         </div>
       </div>
 
-      {/* Right: hero image — fixed Figma dimensions drive section height */}
-      <div className="h-[36.4375rem] relative shrink-0 w-[55.4375rem]">
-        <img
-          alt="Notizbuch mit Tagesplan und Kaffee"
-          src="/hero.jpg"
-          className="absolute inset-0 max-w-none object-cover w-full h-full mix-blend-multiply"
-        />
-      </div>
+      {/* Right: hero image as background-image so transparent PNG blends into cream section */}
+      <div
+        className="h-[36.4375rem] shrink-0 w-[55.4375rem]"
+        style={{
+          backgroundImage: "url('/hero.png')",
+          backgroundSize: "contain",
+          backgroundPosition: "right center",
+          backgroundRepeat: "no-repeat",
+        }}
+        aria-hidden="true"
+      />
 
     </section>
   );
diff --git a/public/hero.png b/public/hero.png
new file mode 100644
index 0000000..80f3fb8
Binary files /dev/null and b/public/hero.png differ