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>

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 {