Stats-Band: abgedunkeltes Vereinsgelände-Foto mit weichen Verlaufskanten statt schwarzem Streifen, Zahlen auf fs-900

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

app/components/stats.php

@@ -3,10 +3,20 @@
 declare(strict_types=1);
 
 /**
- * Kennzahlen-Band. Props: $stats array{items: array{value, label}[]}
+ * Kennzahlen-Band über abgedunkeltem Foto (Vereinsgelände), Kanten verlaufen
+ * weich in den Seitenhintergrund. Props:
+ *   $stats array{items: array{value, label}[], image?: array (img-Komponente)}
  */
+$image = $stats['image'] ?? [
+    'base'   => 'img/pages/vereinsgelaende',
+    'widths' => [1000, 1600],
+    'alt'    => '',
+];
 ?>
         <section class="section stats" aria-label="Der Verein in Zahlen">
+            <div class="stats__media" aria-hidden="true">
+<?php component('img', ['image' => $image, 'sizes' => '100vw', 'class' => 'stats__img']); ?>
+            </div>
             <div class="container">
                 <ul class="stats__list">
 <?php foreach ($stats['items'] as $item): ?>

public/assets/css/components.css

@@ -12,6 +12,12 @@
     overflow: hidden;
 }
 
+/* Kompakte Variante: schlanker Unterseiten-Header statt vollflächig. */
+.hero--compact {
+    min-height: min(48vh, 440px);
+    padding-block: calc(var(--header-h) + 56px) 3rem;
+}
+
 .hero__media {
     position: absolute;
     inset: 0;
@@ -219,7 +225,34 @@
 
 /* === stats === */
 .stats {
-    background: var(--clr-bg-deep);
+    position: relative;
+    padding-block: 7rem;
+    overflow: hidden;
+}
+
+.stats__media {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+}
+
+.stats__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* Abdunkeln + weiche Kanten: oben/unten Verlauf in den Seitenhintergrund,
+   damit kein harter "Streifen" entsteht */
+.stats__media::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg,
+        var(--clr-bg) 0%,
+        rgb(15 15 15 / 0.72) 28%,
+        rgb(15 15 15 / 0.72) 72%,
+        var(--clr-bg) 100%);
 }
 
 .stats__list {
@@ -242,10 +275,10 @@
 
 .stats__value {
     font-family: var(--ff-heading);
-    font-size: var(--fs-800);
+    font-size: var(--fs-900);
     line-height: var(--lh-heading);
     color: var(--clr-accent);
-    text-shadow: 0 0 30px rgb(var(--clr-accent-rgb) / 0.35);
+    text-shadow: 0 2px 18px rgb(0 0 0 / 0.55), 0 0 30px rgb(var(--clr-accent-rgb) / 0.35);
 }
 
 .stats__label {