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/components/hero.tsx

@@ -29,11 +29,13 @@ export function Hero({
   footnote,
   location,
   image,
+  video,
 }: {
   intro: string;
   footnote: string;
   location: string;
   image: string | null;
+  video: string | null;
 }) {
   const { t } = useI18n();
   const shouldReduceMotion = useReducedMotion();
@@ -45,14 +47,31 @@ export function Hero({
       animate="visible"
       variants={sectionVariants}
     >
-      <ContentImage
-        src={image}
-        alt=""
-        tone="forest"
-        className="h-[78vh] min-h-[520px] w-full"
-        label="Bienenstand im Morgenlicht · Altenmünster"
-        priority
-      />
+      {video ? (
+        <div className="relative h-[78vh] min-h-[520px] w-full overflow-hidden">
+          <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
+            // 2.2.2 "Pause, Stop, Hide" fuer automatisch startende Bewegung).
+            autoPlay={!shouldReduceMotion}
+            muted
+            loop
+            playsInline
+          />
+        </div>
+      ) : (
+        <ContentImage
+          src={image}
+          alt=""
+          tone="forest"
+          className="h-[78vh] min-h-[520px] w-full"
+          label="Bienenstand im Morgenlicht · Altenmünster"
+          priority
+        />
+      )}
       <div className="absolute inset-0 flex items-center bg-gradient-to-t from-forest/70 via-forest/10 to-transparent">
         <Container>
           <motion.div