Hero: Ausrichtungs-Varianten (align: center | bottom-left), Startseite zentriert

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

app/components/hero.php

@@ -3,11 +3,13 @@
 declare(strict_types=1);
 
 /**
- * Vollflächiger Hero mit Hintergrundbild, Titel, Intro und CTAs.
- * Props: $hero (array aus home.json: title, text, image, ctas)
+ * Vollflächiger Hero mit Hintergrundbild/-video, Titel, Intro und CTAs.
+ * Props: $hero (array aus home.json: title, text, image, video?, ctas, align?)
+ * align-Varianten: 'center' (mittig zentriert), 'bottom-left' (Default).
  */
+$align = in_array($hero['align'] ?? '', ['center', 'bottom-left'], true) ? $hero['align'] : 'bottom-left';
 ?>
-        <section class="hero">
+        <section class="hero<?= $align === 'center' ? ' hero--center' : '' ?>">
             <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'])): ?>

data/home.json

@@ -1,5 +1,6 @@
 {
   "hero": {
+    "align": "center",
     "title": "TSV 08 Kulmbach",
     "text": "Egal ob Fußball oder Turnen – wir sind als Kulmbacher Sportverein deine Möglichkeit, im Landkreis aktiv zu werden! Wir sind stolz, dir auf unserer Website einen Eindruck geben zu können, was dich bei uns erwartet. Du willst selbst aktiv werden? Dann zögere nicht, uns zu kontaktieren.",
     "image": {

public/assets/css/components.css

@@ -67,6 +67,20 @@
     margin-top: 1.75rem;
 }
 
+/* Variante: Text mittig zentriert (z. B. Startseite) */
+.hero--center {
+    align-items: center;
+    text-align: center;
+}
+
+.hero--center .hero__text {
+    margin-inline: auto;
+}
+
+.hero--center .hero__actions {
+    justify-content: center;
+}
+
 /* === instagram === */
 .instagram__grid {
     display: grid;