feat: Hero-Hintergrundvideo im Admin, ScrollReveal + Bild-Perf auf Unterseiten

Neues admin-editierbares Hintergrundvideo fuer den Startseiten-Hero
(home.hero.video, MP4/WebM) mit eigenem, magic-byte-validiertem
Upload-Endpunkt (app/api/admin/upload-video) analog zur bestehenden
Bild-Upload-Pipeline. Ausserdem: ScrollReveal-Animation von der
Startseite auf Imkerei, Herkunft, Unternehmen, Ernten, Wissen, Kontakt,
Shop sowie die Produkt-/Ernte-/Chargen-Detailseiten ausgerollt (bisher
nur Startseite), priority auf bislang lazy geladene Above-the-fold-Bilder
(Herkunft/Unternehmen) gesetzt, und passende sizes-Hints auf Grid-Bilder
(Produktkarten, Origin/Regional/Business-Teaser, Ernten-Liste) ergaenzt
statt voller Viewport-Breite.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

src/app/ernten/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { Container, SectionHeading } from "@/components/ui";
 import { ContentImage } from "@/components/content-image";
+import { ScrollReveal } from "@/components/scroll-reveal";
 import { getHarvests } from "@/lib/data";
 import { formatMonthYear } from "@/lib/format";
 import { getLocale } from "@/i18n/locale";
@@ -29,29 +30,35 @@ export default async function ErntenPage() {
   return (
     <div className="py-20">
       <Container>
-        <SectionHeading level="h1" eyebrow={t.erntenPage.eyebrow} title={t.erntenPage.title} />
+        <ScrollReveal>
+          <SectionHeading level="h1" eyebrow={t.erntenPage.eyebrow} title={t.erntenPage.title} />
+        </ScrollReveal>
 
         <div className="mt-16 space-y-16">
           {years.map((year) => (
             <div key={year}>
-              <h2 className="text-2xl text-forest mb-6">{year}</h2>
+              <ScrollReveal>
+                <h2 className="text-2xl text-forest mb-6">{year}</h2>
+              </ScrollReveal>
               <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
-                {byYear[year].map((harvest) => (
-                  <Link
-                    key={harvest.id}
-                    href={`/ernten/${harvest.year}/${encodeURIComponent(harvest.type)}`}
-                    className="group"
-                  >
-                    <ContentImage
-                      src={harvest.images[0] ?? null}
-                      alt={harvest.type}
-                      tone="forest"
-                      className="aspect-[4/3] w-full transition-transform duration-500 group-hover:scale-[1.02]"
-                      label={formatMonthYear(harvest.harvestDate, locale)}
-                    />
-                    <h3 className="mt-4 text-lg text-forest">{harvest.type}</h3>
-                    <p className="text-sm text-ink/65">{t.erntenPage.batchCount(harvest.batches.length)}</p>
-                  </Link>
+                {byYear[year].map((harvest, i) => (
+                  <ScrollReveal key={harvest.id} delay={(i % 3) * 0.08}>
+                    <Link
+                      href={`/ernten/${harvest.year}/${encodeURIComponent(harvest.type)}`}
+                      className="group block"
+                    >
+                      <ContentImage
+                        src={harvest.images[0] ?? null}
+                        alt={harvest.type}
+                        tone="forest"
+                        className="aspect-[4/3] w-full transition-transform duration-500 group-hover:scale-[1.02]"
+                        label={formatMonthYear(harvest.harvestDate, locale)}
+                        sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
+                      />
+                      <h3 className="mt-4 text-lg text-forest">{harvest.type}</h3>
+                      <p className="text-sm text-ink/65">{t.erntenPage.batchCount(harvest.batches.length)}</p>
+                    </Link>
+                  </ScrollReveal>
                 ))}
               </div>
             </div>