fix(Hero): use RGBA PNG from Figma asset instead of opaque JPEG

Figma exports the hero image as a PNG with alpha channel — the background
is already transparent. Switched from <img mix-blend-multiply> to a
background-image div (background-size: contain, right center) so the
transparent PNG blends seamlessly into the cream section background with
no visible edge. Background-image also scales better for responsive.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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>
   );