diff --git a/src/components/content-image.tsx b/src/components/content-image.tsx
index d35b876..5f528fa 100644
--- a/src/components/content-image.tsx
+++ b/src/components/content-image.tsx
@@ -14,6 +14,12 @@ interface ContentImageProps {
    *  true setzen — laedt das Bild mit hoher Prioritaet ohne Lazy-Loading,
    *  statt es erst beim Scannen weiter unten im Dokument zu entdecken. */
   priority?: boolean;
+  /** Leicht abgerundete Ecken. Standard true — passt fuer Karten, Teaser
+   *  und Inhaltsbilder, die als eigene Flaeche auf dem Seitenhintergrund
+   *  liegen. Fuer randlose Flaechen (Hero ueber die volle Fensterbreite)
+   *  bewusst false: dort saesse die Rundung direkt an der Fensterkante und
+   *  wirkte wie ein Darstellungsfehler. */
+  rounded?: boolean;
 }
 
 /**
@@ -34,9 +40,16 @@ export function ContentImage({
   label,
   sizes = "100vw",
   priority = false,
+  rounded = true,
 }: ContentImageProps) {
+  // Dieselbe Rundung fuer Platzhalter UND echtes Bild — sonst spraenge die
+  // Form in dem Moment um, in dem ein Bild gepflegt wird.
+  const roundedClass = rounded ? "rounded-lg" : "";
+
   if (!src) {
-    return <PlaceholderImage tone={tone} className={className} label={label} />;
+    return (
+      <PlaceholderImage tone={tone} className={`${roundedClass} ${className}`} label={label} />
+    );
   }
   // "label" traegt bereits eine kurze inhaltliche Einordnung (Ernte-Jahr/Typ,
   // Kategorie, Ort — siehe Aufrufer), die bisher nur auf der Platzhalterkachel
@@ -45,8 +58,22 @@ export function ContentImage({
   // Bildersuche als der Produkt-/Ernteame allein.
   const descriptiveAlt = label ? `${alt} – ${label}` : alt;
   return (
-    <div className={`relative overflow-hidden ${className}`}>
-      <Image src={src} alt={descriptiveAlt} fill sizes={sizes} priority={priority} className="object-cover" />
+    <div className={`relative overflow-hidden ${roundedClass} ${className}`}>
+      <Image
+        src={src}
+        alt={descriptiveAlt}
+        fill
+        sizes={sizes}
+        // Next.js 16 hat die frueher hier verwendete Prop "priority"
+        // abgekuendigt: sie erzeugt nur noch einen <link rel="preload">, setzt
+        // am <img> selbst aber weder fetchpriority noch loading. Gemessen kam
+        // das Hero-Bild damit trotz "priority" mit niedriger Netzwerk-
+        // Prioritaet an. Die Dokumentation nennt fuer diesen Fall
+        // ausdruecklich loading="eager" und fetchPriority="high" als Ersatz.
+        loading={priority ? "eager" : "lazy"}
+        fetchPriority={priority ? "high" : "auto"}
+        className="object-cover"
+      />
     </div>
   );
 }
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index 5c0d6ea..459a223 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -5,11 +5,6 @@ import { Container, LinkButton } from "@/components/ui";
 import { ContentImage } from "@/components/content-image";
 import { useI18n } from "@/i18n/i18n-provider";
 
-const sectionVariants: Variants = {
-  hidden: { opacity: 0 },
-  visible: { opacity: 1, transition: { duration: 0.6 } },
-};
-
 const itemContainerVariants: Variants = {
   hidden: {},
   visible: { transition: { delayChildren: 0.3, staggerChildren: 0.12 } },
@@ -41,17 +36,38 @@ export function Hero({
   const shouldReduceMotion = useReducedMotion();
 
   return (
-    <motion.section
-      className="relative"
-      initial={shouldReduceMotion ? false : "hidden"}
-      animate="visible"
-      variants={sectionVariants}
-    >
+    // Bewusst KEINE Einblend-Animation auf der aeussersten Ebene: eine
+    // Section, die bei opacity 0 startet, wird erst sichtbar, wenn das
+    // JS-Bundle geladen und die Animation gelaufen ist. Das Hero-Bild ist
+    // aber das groesste Element im ersten Viewport (LCP) — es so lange
+    // zurueckzuhalten verschiebt den gemessenen Ladezeitpunkt der Seite um
+    // die gesamte Hydrationsdauer. Der gestaffelte Aufbau der Textspalte
+    // weiter unten bleibt unveraendert, der laeuft unabhaengig davon.
+    <section className="relative">
       {video ? (
         <div className="relative h-[78vh] min-h-[520px] w-full overflow-hidden">
+          {/* Standbild als eigene Ebene UNTER dem Video statt im
+              poster-Attribut. poster nimmt nur eine fertige URL und laedt die
+              hochgeladene Datei damit in voller gespeicherter Groesse (bis
+              MAX_IMAGE_DIMENSION, siehe lib/uploads.ts) — am Bildoptimierer
+              vorbei und ohne Ruecksicht auf das Geraet. Als ContentImage
+              laeuft dasselbe Bild durch next/image: passende Breite je
+              Bildschirm, WebP statt JPEG, und mit "priority" als erstes
+              angefordert. Das Video liegt darueber und ist transparent, bis es
+              eigene Bilddaten hat — der Uebergang ist deshalb nicht sichtbar. */}
+          <div className="absolute inset-0">
+            <ContentImage
+              src={image}
+              alt=""
+              tone="forest"
+              className="h-full w-full"
+              rounded={false}
+              sizes="100vw"
+              priority
+            />
+          </div>
           <video
             src={video}
-            poster={image ?? undefined}
             className="absolute inset-0 h-full w-full object-cover"
             // Nutzer mit "Bewegung reduzieren" bekommen nur das Standbild
             // (poster) statt der automatisch laufenden Videoschleife (WCAG
@@ -60,6 +76,11 @@ export function Hero({
             muted
             loop
             playsInline
+            // Ohne Autoplay (Einstellung "Bewegung reduzieren") gibt es
+            // nichts abzuspielen — dann nur die Kopfdaten holen statt die
+            // ganze Datei. Mit Autoplay ignorieren Browser den Hinweis
+            // ohnehin und laden so viel, wie zum Starten noetig ist.
+            preload={shouldReduceMotion ? "metadata" : "auto"}
             // JS-Fallback zusaetzlich zum loop-Attribut: manche Browser
             // (u.a. aeltere iOS-Safari-Versionen) starten ein Video nach
             // "ended" nicht zuverlaessig neu, wenn autoplay/muted/playsinline
@@ -79,6 +100,7 @@ export function Hero({
           tone="forest"
           className="h-[78vh] min-h-[520px] w-full"
           label="Bienenstand im Morgenlicht · Altenmünster"
+          rounded={false}
           priority
         />
       )}
@@ -124,6 +146,6 @@ export function Hero({
           </motion.div>
         </Container>
       </div>
-    </motion.section>
+    </section>
   );
 }
diff --git a/src/components/product-gallery.tsx b/src/components/product-gallery.tsx
index b7ce985..0e0ccff 100644
--- a/src/components/product-gallery.tsx
+++ b/src/components/product-gallery.tsx
@@ -63,7 +63,7 @@ export function ProductGallery({ images, productName, description }: ProductGall
   return (
     <div>
       <div
-        className="relative aspect-[4/3] overflow-hidden touch-pan-y"
+        className="relative aspect-[4/3] overflow-hidden rounded-lg touch-pan-y"
         onTouchStart={handleTouchStart}
         onTouchEnd={handleTouchEnd}
       >
@@ -72,14 +72,18 @@ export function ProductGallery({ images, productName, description }: ProductGall
           // /uploads/... (siehe uploads.ts/isValidUploadPath) — next/image
           // braucht dafuer KEINEN remotePatterns-Eintrag (nur externe
           // Bildquellen brauchen den), siehe auch content-image.tsx. Als
-          // wahrscheinlichstes LCP-Element der Produktseite mit "priority"
-          // geladen, statt erst beim Scannen des Bild-Tags entdeckt zu werden.
+          // wahrscheinlichstes LCP-Element der Produktseite sofort und mit
+          // hoher Netzwerk-Prioritaet geladen, statt erst beim Scannen des
+          // Bild-Tags entdeckt zu werden. Bewusst NICHT ueber die Prop
+          // "priority": die ist seit Next.js 16 abgekuendigt und erzeugt nur
+          // noch einen Preload-Link, ohne fetchpriority am <img> zu setzen.
           <Image
             src={active.src}
             alt={mainImageAlt}
             fill
             sizes="(min-width: 768px) 50vw, 100vw"
-            priority
+            loading="eager"
+            fetchPriority="high"
             className="object-cover"
           />
         ) : (
@@ -95,7 +99,7 @@ export function ProductGallery({ images, productName, description }: ProductGall
               onClick={() => setActiveIndex(index)}
               aria-label={`${isImageSlide(slide) ? `Produktbild ${index + 1}` : slide.label} – Bild ${index + 1} von ${slides.length} anzeigen`}
               aria-current={index === activeIndex}
-              className={`relative aspect-square overflow-hidden border-2 transition-colors ${
+              className={`relative aspect-square overflow-hidden rounded-lg border-2 transition-colors ${
                 index === activeIndex ? "border-forest" : "border-transparent hover:border-ink/20"
               }`}
             >