diff --git a/app/components/hero.php b/app/components/hero.php
index a8ffa98..5bcdb4f 100644
--- a/app/components/hero.php
+++ b/app/components/hero.php
@@ -4,14 +4,17 @@ declare(strict_types=1);
 
 /**
  * Vollflächiger Hero mit Hintergrundbild/-video, Titel, Intro und CTAs.
- * Props: $hero (array aus home.json: title, text, image, video?, ctas, align?, compact?)
+ * Props: $hero (array aus home.json: title, text, image, video?, ctas, align?, compact?,
+ *               display?, kicker?, scroll_target?)
  * align-Varianten: 'center' (mittig zentriert), 'bottom-left' (Default).
  * compact: true → niedrigere Variante für Unterseiten-Header.
+ * display: true → großer Editorial-Look (Riesen-Titel, Outline-Tagline, Kicker, Scroll-Cue).
  */
 $align = in_array($hero['align'] ?? '', ['center', 'bottom-left'], true) ? $hero['align'] : 'bottom-left';
 $compact = !empty($hero['compact']);
+$display = !empty($hero['display']);
 ?>
-        <section class="hero<?= $align === 'center' ? ' hero--center' : '' ?><?= $compact ? ' hero--compact' : '' ?>">
+        <section class="hero<?= $align === 'center' ? ' hero--center' : '' ?><?= $compact ? ' hero--compact' : '' ?><?= $display ? ' hero--display' : '' ?>">
             <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'])): ?>
@@ -20,6 +23,9 @@ $compact = !empty($hero['compact']);
 <?php endif; ?>
             </div>
             <div class="container hero__content">
+<?php if (!empty($hero['kicker'])): ?>
+                <p class="hero__kicker"><?= e($hero['kicker']) ?></p>
+<?php endif; ?>
                 <h1 class="hero__title"><?= e($hero['title']) ?><?php if (!empty($hero['tagline'])): ?> <span class="hero__tagline"><?= e($hero['tagline']) ?></span><?php endif; ?></h1>
 <?php if (!empty($hero['text'])): ?>
                 <p class="hero__text"><?= e($hero['text']) ?></p>
@@ -32,4 +38,9 @@ $compact = !empty($hero['compact']);
                 </div>
 <?php endif; ?>
             </div>
+<?php if ($display): ?>
+            <a class="hero__scroll-cue" href="#<?= e($hero['scroll_target'] ?? 'aktuelles') ?>">
+                <?= icon('chevron-down') ?><span class="visually-hidden">Zum Inhalt scrollen</span>
+            </a>
+<?php endif; ?>
         </section>
diff --git a/data/home.json b/data/home.json
index dea68bc..372b906 100644
--- a/data/home.json
+++ b/data/home.json
@@ -1,6 +1,6 @@
 {
     "hero": {
-        "align": "center",
+        "align": "bottom-left",
         "title": "TSV 08 Kulmbach",
         "tagline": "Dein Verein für Fußball & Turnen in Kulmbach",
         "text": "Egal ob Fußball oder Turnen – wir sind als Kulmbacher Sportverein deine Möglichkeit, im Landkreis Kulmbach 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.",
@@ -25,7 +25,9 @@
                 "slug": "mitglied-werden",
                 "style": "outline"
             }
-        ]
+        ],
+        "display": true,
+        "kicker": "Seit 1908 im Katzbachtal"
     },
     "sections": [
         {
diff --git a/public/assets/css/components.css b/public/assets/css/components.css
index b9e1abf..93cd193 100644
--- a/public/assets/css/components.css
+++ b/public/assets/css/components.css
@@ -95,6 +95,75 @@
     justify-content: center;
 }
 
+/* Variante: Editorial-Display (Startseite) — linksbündig unten, große Typo */
+.hero--display .hero__media::after {
+    /* zusätzlicher Verlauf von links für Textlesbarkeit über dem Video */
+    background:
+        linear-gradient(90deg, rgb(10 10 10 / 0.62) 0%, rgb(10 10 10 / 0.25) 45%, transparent 70%),
+        linear-gradient(180deg, rgb(20 20 20 / 0.2) 0%, rgb(20 20 20 / 0.45) 55%, var(--clr-bg) 100%);
+}
+
+.hero__kicker {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.25rem;
+    font-size: var(--fs-500);
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    color: var(--clr-text);
+}
+
+.hero__kicker::before {
+    content: '';
+    width: 3rem;
+    height: 4px;
+    background: var(--clr-accent);
+    border-radius: 2px;
+}
+
+.hero--display .hero__title {
+    font-size: clamp(3.5rem, 2rem + 7.5vw, 7.5rem);
+}
+
+/* Tagline als Outline-Typo (Trikotnummern-Look); Fallback: gefüllt */
+.hero--display .hero__tagline {
+    margin-top: 0.5rem;
+    font-size: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
+    letter-spacing: 0.1em;
+}
+
+@supports (-webkit-text-stroke: 1px white) {
+    .hero--display .hero__tagline {
+        color: transparent;
+        -webkit-text-stroke: 1.5px rgb(255 255 255 / 0.9);
+    }
+}
+
+.hero__scroll-cue {
+    position: absolute;
+    left: 50%;
+    bottom: 1.25rem;
+    translate: -50% 0;
+    display: grid;
+    place-items: center;
+    width: 44px;
+    height: 44px;
+    color: var(--clr-text-muted);
+    font-size: 1.4rem;
+    transition: color var(--transition);
+    animation: scroll-cue-bounce 2.4s ease-in-out infinite;
+}
+
+.hero__scroll-cue:hover {
+    color: var(--clr-text);
+}
+
+@keyframes scroll-cue-bounce {
+    0%, 100% { transform: translateY(0); }
+    50%      { transform: translateY(8px); }
+}
+
 /* === instagram === */
 .instagram__grid {
     display: grid;
@@ -995,3 +1064,314 @@
         transform: scaleX(1);
     }
 }
+
+/* === key-facts (Faktenleiste) === */
+.key-facts__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.key-facts__item {
+    display: flex;
+    align-items: center;
+    gap: 0.85rem;
+    padding: 1.1rem 1.25rem;
+    background: var(--clr-glass-bg);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
+}
+
+.key-facts__icon {
+    display: inline-flex;
+    font-size: 1.5rem;
+    color: var(--clr-accent);
+}
+
+.key-facts__text {
+    display: grid;
+    gap: 0.1rem;
+}
+
+.key-facts__label {
+    font-size: var(--fs-400);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--clr-text-muted);
+}
+
+.key-facts__value {
+    font-family: var(--ff-heading);
+    font-size: var(--fs-600);
+}
+
+/* === team-about === */
+.team-about p {
+    max-width: 68ch;
+}
+
+/* === training-location === */
+.training__inner {
+    display: grid;
+    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: start;
+}
+
+@media (max-width: 768px) {
+    .training__inner {
+        grid-template-columns: 1fr;
+        gap: 2.5rem;
+    }
+}
+
+.training__table {
+    width: 100%;
+    margin-top: 1rem;
+    border-collapse: collapse;
+}
+
+.training__table th,
+.training__table td {
+    padding: 0.65rem 0;
+    border-bottom: 1px solid var(--clr-glass-border);
+}
+
+.training__table th {
+    font-weight: var(--fw-regular);
+    text-align: left;
+}
+
+.training__table td {
+    color: var(--clr-text-muted);
+    text-align: right;
+}
+
+.training__address {
+    display: flex;
+    gap: 0.6rem;
+    align-items: start;
+    margin: 1rem 0 1.5rem;
+}
+
+.training__pin {
+    flex: none;
+    margin-top: 0.15rem;
+    font-size: 1.3rem;
+    color: var(--clr-accent);
+}
+
+/* === cta-band === */
+.cta-band__inner {
+    max-width: 60ch;
+    margin-inline: auto;
+    text-align: center;
+}
+
+.cta-band__text {
+    margin-top: 0.75rem;
+    margin-inline: auto;
+}
+
+.cta-band__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-top: 1.75rem;
+}
+
+/* === faq (Accordion) === */
+.faq__inner {
+    max-width: 760px;
+    margin-inline: auto;
+}
+
+.faq__list {
+    display: grid;
+    gap: 0.6rem;
+    margin-top: 2rem;
+}
+
+.faq__item {
+    background: var(--clr-glass-bg);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
+    overflow: hidden;
+}
+
+.faq__q {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    font-size: var(--fs-600);
+    cursor: pointer;
+    list-style: none;
+}
+
+.faq__q::-webkit-details-marker {
+    display: none;
+}
+
+.faq__q:focus-visible {
+    outline: 2px solid var(--clr-text);
+    outline-offset: -2px;
+}
+
+.faq__chevron {
+    flex: none;
+    font-size: 0.8em;
+    color: var(--clr-accent);
+    transition: transform var(--transition);
+}
+
+.faq__item[open] .faq__chevron {
+    transform: rotate(180deg);
+}
+
+.faq__a {
+    padding: 0 1.25rem 1.1rem;
+    color: var(--clr-text-muted);
+}
+
+/* === age-groups (Jugend-Altersklassen) === */
+.age-groups > .container {
+    text-align: center;
+}
+
+.age-groups__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.5rem;
+    margin: 2.5rem 0 0;
+    padding: 0;
+    list-style: none;
+    text-align: left;
+}
+
+.age-group {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    background: var(--clr-glass-bg);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
+    overflow: hidden;
+}
+
+.age-group__img {
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 4 / 3;
+    object-fit: cover;
+}
+
+.age-group__body {
+    display: grid;
+    gap: 0.35rem;
+    align-content: start;
+    padding: 1rem 1.2rem 1.2rem;
+}
+
+.age-group__name {
+    font-size: var(--fs-600);
+}
+
+.age-group__training {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0;
+    font-size: var(--fs-500);
+    color: var(--clr-text-muted);
+}
+
+.age-group__icon {
+    flex: none;
+    color: var(--clr-accent);
+}
+
+/* === team-cards (Mannschafts-Karten) === */
+.team-cards > .container {
+    text-align: center;
+}
+
+.team-cards__intro {
+    max-width: 60ch;
+    margin: 1rem auto 0;
+}
+
+.team-cards__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 1.5rem;
+    margin: 2.5rem 0 0;
+    padding: 0;
+    list-style: none;
+    text-align: left;
+}
+
+.team-card {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    height: 100%;
+    color: var(--clr-text);
+    text-decoration: none;
+    background: var(--clr-glass-bg);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
+    overflow: hidden;
+    transition: transform var(--transition), box-shadow var(--transition);
+}
+
+.team-card:hover,
+.team-card:focus-visible {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-card);
+}
+
+.team-card__img {
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 16 / 10;
+    object-fit: cover;
+}
+
+.team-card__body {
+    display: grid;
+    gap: 0.35rem;
+    align-content: start;
+    padding: 1.1rem 1.25rem 1.25rem;
+}
+
+.team-card__name {
+    font-size: var(--fs-600);
+}
+
+.team-card__meta {
+    color: var(--clr-text-muted);
+    font-size: var(--fs-500);
+}
+
+.team-card__cta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-top: 0.4rem;
+    color: var(--clr-accent);
+    font-size: var(--fs-500);
+}
+
+.team-card__arrow {
+    transition: transform var(--transition);
+}
+
+.team-card:hover .team-card__arrow {
+    transform: translateX(3px);
+}