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/charge/[code]/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { Container } from "@/components/ui";
 import { ContentImage } from "@/components/content-image";
+import { ScrollReveal } from "@/components/scroll-reveal";
 import { TrustBadges } from "@/components/trust-badges";
 import { ShieldIcon } from "@/components/account-ui";
 import { ProductTeaserLink } from "@/components/product-card";
@@ -42,33 +43,41 @@ export default async function BatchPage(props: PageProps<"/charge/[code]">) {
   return (
     <div className="py-20">
       <Container className="max-w-3xl">
-        <div className="flex items-center gap-2 text-honey-dark">
-          <ShieldIcon />
-          <span className="tracking-wide-caps text-xs">{t.chargePage.verifiedBatch}</span>
-        </div>
-        <h1 className="mt-3 text-4xl md:text-5xl text-forest">
-          {batch.harvest.type} {batch.harvest.year}
-        </h1>
-        <p className="mt-4 text-sm text-ink/70">{t.chargePage.provenanceNote(batch.code)}</p>
+        <ScrollReveal>
+          <div className="flex items-center gap-2 text-honey-dark">
+            <ShieldIcon />
+            <span className="tracking-wide-caps text-xs">{t.chargePage.verifiedBatch}</span>
+          </div>
+          <h1 className="mt-3 text-4xl md:text-5xl text-forest">
+            {batch.harvest.type} {batch.harvest.year}
+          </h1>
+          <p className="mt-4 text-sm text-ink/70">{t.chargePage.provenanceNote(batch.code)}</p>
+        </ScrollReveal>
 
         <div className="mt-10 grid sm:grid-cols-2 gap-6">
-          <ContentImage
-            src={batch.harvest.images[0] ?? null}
-            alt={`${batch.harvest.type} ${batch.harvest.year}`}
-            tone="honey"
-            className="aspect-square"
-            label={`${batch.harvest.type} ${batch.harvest.year}`}
-          />
-          <ContentImage
-            src={batch.harvest.images[1] ?? null}
-            alt={batch.harvest.location}
-            tone="forest"
-            className="aspect-square"
-            label={batch.harvest.location}
-          />
+          <ScrollReveal>
+            <ContentImage
+              src={batch.harvest.images[0] ?? null}
+              alt={`${batch.harvest.type} ${batch.harvest.year}`}
+              tone="honey"
+              className="aspect-square"
+              label={`${batch.harvest.type} ${batch.harvest.year}`}
+              sizes="(min-width: 640px) 50vw, 100vw"
+            />
+          </ScrollReveal>
+          <ScrollReveal delay={0.1}>
+            <ContentImage
+              src={batch.harvest.images[1] ?? null}
+              alt={batch.harvest.location}
+              tone="forest"
+              className="aspect-square"
+              label={batch.harvest.location}
+              sizes="(min-width: 640px) 50vw, 100vw"
+            />
+          </ScrollReveal>
         </div>
 
-        <div className="mt-14">
+        <ScrollReveal className="mt-14">
           <div className="grid grid-cols-3 gap-4">
             {steps.map((step, i) => (
               <div key={step.label} className="relative">
@@ -83,19 +92,21 @@ export default async function BatchPage(props: PageProps<"/charge/[code]">) {
               </div>
             ))}
           </div>
-        </div>
+        </ScrollReveal>
 
-        <div className="mt-10 border-t border-ink/10 pt-8">
+        <ScrollReveal className="mt-10 border-t border-ink/10 pt-8">
           <p className="text-sm tracking-wide-caps text-ink/70 mb-2">{t.chargePage.regionLabel}</p>
           <p className="text-ink/80">{batch.harvest.location}</p>
           <p className="mt-6 text-ink/70 leading-relaxed">{batch.harvest.description}</p>
-        </div>
+        </ScrollReveal>
 
         <TrustBadges className="mt-10 pt-8 border-t border-ink/10" />
 
         {batch.products.length > 0 ? (
           <div className="mt-14 border-t border-ink/10 pt-10">
-            <p className="text-sm tracking-wide-caps text-ink/70 mb-6">{t.chargePage.fromThisBatch}</p>
+            <ScrollReveal>
+              <p className="text-sm tracking-wide-caps text-ink/70 mb-6">{t.chargePage.fromThisBatch}</p>
+            </ScrollReveal>
             <div className="grid sm:grid-cols-2 gap-6">
               {batch.products.map((product) => (
                 <ProductTeaserLink