Hero-Video eingebaut: komprimiert 11→2,9 MB, Bild bleibt Poster/Fallback, reduced-motion zeigt nur Bild

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/components/hero.php

@@ -10,6 +10,10 @@ declare(strict_types=1);
         <section class="hero">
             <div class="hero__media" aria-hidden="true">
 <?php component('img', ['image' => $hero['image'], 'sizes' => '100vw', 'eager' => true, 'class' => 'hero__img']); ?>
+<?php if (!empty($hero['video'])): ?>
+                <?php /* Bild bleibt Poster/Fallback; reduced-motion blendet das Video per CSS aus */ ?>
+                <video class="hero__video" src="<?= e(asset($hero['video'])) ?>" autoplay muted loop playsinline preload="none" tabindex="-1"></video>
+<?php endif; ?>
             </div>
             <div class="container hero__content">
                 <h1 class="hero__title"><?= e($hero['title']) ?></h1>

data/home.json

@@ -7,6 +7,7 @@
       "widths": [640, 1000, 1600],
       "alt": "Fußballplatz des TSV 08 Kulmbach im Katzbachtal mit Vereinsfahnen"
     },
+    "video": "video/hero.mp4",
     "ctas": [
       { "label": "Jugendfußball", "slug": "jugendfussball", "style": "primary" },
       { "label": "Mitglied werden", "slug": "mitglied-werden", "style": "outline" }

public/assets/css/components.css

@@ -24,6 +24,20 @@
     object-fit: cover;
 }
 
+.hero__video {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .hero__video {
+        display: none;
+    }
+}
+
 /* Dunkler Verlauf wie auf der alten Seite: oben transparent → unten Seitenhintergrund */
 .hero__media::after {
     content: '';