perf: Header-Medien sofort und in passender Groesse laden

Drei Gruende, warum Hero-Bild und -Video spuerbar spaet erschienen:

1. Das Standbild des Hero-Videos steckte im poster-Attribut. poster nimmt
   nur eine fertige URL und laedt die hochgeladene Datei damit in voller
   gespeicherter Groesse — am Bildoptimierer vorbei, ohne Ruecksicht auf
   das Geraet. Es liegt jetzt als eigene ContentImage-Ebene unter dem
   Video, laeuft also durch next/image. Gemessen: auf einem 500px breiten
   Viewport kommt statt der vollen Datei die 640px-Variante als WebP an.
   Das Video darueber ist transparent, bis es eigene Bilddaten hat — der
   Uebergang bleibt unsichtbar.

2. Die aeusserste Hero-Section startete bei opacity 0 und wurde erst per
   Animation nach der Hydration sichtbar. Das groesste Element im ersten
   Viewport wurde damit um die gesamte JS-Ladezeit zurueckgehalten. Die
   Animation dort ist entfernt; der gestaffelte Aufbau der Textspalte
   bleibt unveraendert.

3. next/image erhielt weiterhin die Prop "priority". Die ist seit
   Next.js 16 abgekuendigt (siehe node_modules/next/dist/docs, Changelog
   v16.0.0) und erzeugt nur noch einen <link rel="preload">, setzt am
   <img> selbst aber weder fetchpriority noch loading — im Trace kam das
   Hero-Bild deshalb trotz "priority" mit Prioritaet "Low" an. Die
   Dokumentation nennt dafuer ausdruecklich loading="eager" und
   fetchPriority="high" als Ersatz; ContentImage bildet seine unveraendert
   heissende priority-Prop jetzt darauf ab, die Produktgalerie ebenso.
   Danach bestand die LCP-Discovery-Pruefung von Chrome vollstaendig,
   vorher scheiterte sie an fetchpriority.

Ausserdem bekommen Inhaltsbilder leicht abgerundete Ecken (8px), Platzhalter
und echtes Bild gleichermassen, damit die Form beim Pflegen eines Bildes
nicht umspringt. Randlose Flaechen (Hero ueber die volle Fensterbreite)
bleiben bewusst eckig — dort saesse die Rundung an der Fensterkante.

Geprueft im Produktions-Build gegen Chrome: CLS 0.00, kein horizontaler
Ueberlauf bei schmalem Viewport, Video spielt (readyState 4), Hero-Bild
loading="eager" + fetchpriority="high", uebrige Bilder lazy.

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