From 01580453d4e3d58029819b46de561c0704215b97 Mon Sep 17 00:00:00 2001
From: Felix Schneider <fs@breadcrumb-solutions.de>
Date: Thu, 11 Jun 2026 21:24:45 +0200
Subject: [PATCH] Hero: Ausrichtungs-Varianten (align: center | bottom-left),
 Startseite zentriert

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 app/components/hero.php          |  8 +++++---
 data/home.json                   |  1 +
 public/assets/css/components.css | 14 ++++++++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/app/components/hero.php b/app/components/hero.php
index 8c61add..8952487 100644
--- a/app/components/hero.php
+++ b/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'])): ?>
diff --git a/data/home.json b/data/home.json
index 2ae1290..53fd6ec 100644
--- a/data/home.json
+++ b/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": {
diff --git a/public/assets/css/components.css b/public/assets/css/components.css
index 629f56e..7a252a1 100644
--- a/public/assets/css/components.css
+++ b/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;