fix: use plain <img> for hero+icon, beige body bg, image drives section height

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

app/components/Hero.tsx

@@ -9,10 +9,10 @@ const avatars = [
 
 export function Hero() {
   return (
-    <section className="bg-[#f5f0e8] flex items-stretch overflow-hidden h-[36.4375rem]">
+    <section className="bg-[#f5f0e8] flex items-center justify-between overflow-hidden">
 
       {/* Left: text content */}
-      <div className="flex-1 flex flex-col justify-center gap-[1.75rem] pl-[5rem] pr-[2.5rem] min-w-0">
+      <div className="flex flex-col gap-[1.75rem] pl-[5rem] pr-[2.5rem] flex-[1_0_0] min-w-0 overflow-clip">
 
         <h1
           className="text-[4rem] font-semibold leading-[4.5rem] text-black"
@@ -32,13 +32,8 @@ export function Hero() {
             className="inline-flex items-center gap-[1rem] px-[1.5rem] py-[0.75rem] rounded-[0.5rem] bg-[#f6a701] text-[1.375rem] font-semibold text-[#222221] hover:brightness-95 transition-all"
           >
             Starte mit der 7-Tage-Challenge
-            <Image
-              src="/icon-check.svg"
-              alt=""
-              width={25}
-              height={19}
-              className="shrink-0"
-            />
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src="/icon-check.svg" alt="" width={25} height={19} className="shrink-0" />
           </Link>
         </div>
 
@@ -50,12 +45,7 @@ export function Hero() {
                 className="relative w-[2.8125rem] h-[2.8125rem] rounded-full overflow-hidden border-2 border-[#f5f0e8] shrink-0"
                 style={{ marginLeft: i === 0 ? 0 : "-0.625rem" }}
               >
-                <Image
-                  src={avatar.src}
-                  alt={avatar.alt}
-                  fill
-                  className="object-cover"
-                />
+                <Image src={avatar.src} alt={avatar.alt} fill className="object-cover" />
               </div>
             ))}
           </div>
@@ -65,14 +55,13 @@ export function Hero() {
         </div>
       </div>
 
-      {/* Right: hero image — self-stretch fills full section height */}
-      <div className="relative shrink-0 self-stretch w-[55.4375rem]">
-        <Image
+      {/* Right: hero image — fixed Figma dimensions, drives section height */}
+      <div className="relative shrink-0 w-[55.4375rem] h-[36.4375rem]">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
           src="/hero.jpg"
           alt="Notizbuch mit Tagesplan und Kaffee"
-          fill
-          className="object-cover object-center"
-          priority
+          className="absolute inset-0 w-full h-full object-cover object-center"
         />
       </div>
 

app/globals.css

@@ -1,8 +1,8 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #f5f0e8;
+  --foreground: #222221;
 }
 
 @theme inline {
@@ -12,15 +12,8 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
 }