Split-Sektionen: tinted-Variante (sanft aufgehelltes Panel) für Historie + Sportheim

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

app/components/section.php

@@ -4,13 +4,15 @@ declare(strict_types=1);
 
 /**
  * Alternierende Bild/Text-Sektion. Props:
- *   $section array{id, title, text, image, flip?, cta?} (aus home.json o.ä.)
+ *   $section array{id, title, text, image, flip?, tinted?, cta?} (aus home.json o.ä.)
  *   $level   int Überschriften-Ebene (default 2)
+ * tinted: sanft aufgehelltes Panel hinter dem Inhalt (Abgrenzung vom Seitenhintergrund).
  */
 $level = $level ?? 2;
 $flip = !empty($section['flip']);
+$tinted = !empty($section['tinted']);
 ?>
-        <section class="section split<?= $flip ? ' split--flip' : '' ?>" id="<?= e($section['id']) ?>">
+        <section class="section split<?= $flip ? ' split--flip' : '' ?><?= $tinted ? ' split--tinted' : '' ?>" id="<?= e($section['id']) ?>">
             <div class="container split__inner">
                 <div class="split__text">
                     <h<?= $level ?>><?= e($section['title']) ?></h<?= $level ?>>

data/home.json

@@ -6,13 +6,25 @@
         "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.",
         "image": {
             "base": "img/hero/hero",
-      "widths": [640, 1000, 1600],
+            "widths": [
+                640,
+                1000,
+                1600
+            ],
             "alt": "Fußballplatz des TSV 08 Kulmbach im Katzbachtal mit Vereinsfahnen"
         },
         "video": "video/hero.mp4",
         "ctas": [
-      { "label": "Jugendfußball", "slug": "jugendfussball", "style": "primary" },
-      { "label": "Mitglied werden", "slug": "mitglied-werden", "style": "outline" }
+            {
+                "label": "Jugendfußball",
+                "slug": "jugendfussball",
+                "style": "primary"
+            },
+            {
+                "label": "Mitglied werden",
+                "slug": "mitglied-werden",
+                "style": "outline"
+            }
         ]
     },
     "sections": [
@@ -22,11 +34,18 @@
             "text": "Seit über 100 Jahren lebt der TSV 08 Kulmbach den Sportgedanken in Kulmbach. Dabei entwickelte sich der Verein vom Standort an der Bayreuther Straße hin ins Katzbachtal, wo heutzutage sowohl die Fußball- als auch die Turnabteilung zuhause ist.",
             "image": {
                 "base": "img/pages/vereinshistorie",
-        "widths": [519],
+                "widths": [
+                    519
+                ],
                 "alt": "Historische Luftaufnahme der Sportanlage an der Bayreuther Straße"
             },
             "flip": false,
-      "cta": { "label": "Zur Vereinshistorie", "slug": "historie", "style": "primary" }
+            "cta": {
+                "label": "Zur Vereinshistorie",
+                "slug": "historie",
+                "style": "primary"
+            },
+            "tinted": true
         },
         {
             "id": "sportheim",
@@ -34,24 +53,45 @@
             "text": "Unser Sportheim ist die perfekte Location für Veranstaltungen wie Geburtstage, betriebliche Feiern und Partys. Sie suchen noch einen Veranstaltungsort in Kulmbach? Zögern Sie nicht, unsere Räumlichkeiten im Katzbachtal anzufragen.",
             "image": {
                 "base": "img/pages/sportheim",
-        "widths": [640, 1000],
+                "widths": [
+                    640,
+                    1000
+                ],
                 "alt": "Sportheim des TSV 08 Kulmbach im Katzbachtal"
             },
             "flip": true,
-      "cta": { "label": "Zur Buchungsübersicht", "slug": "sportheim", "style": "primary" }
+            "cta": {
+                "label": "Zur Buchungsübersicht",
+                "slug": "sportheim",
+                "style": "primary"
+            },
+            "tinted": true
         }
     ],
     "stats": {
         "items": [
-      { "value": "650+", "label": "Mitglieder" },
-      { "value": "10+", "label": "Mannschaften" },
-      { "value": "20+", "label": "Partner" }
+            {
+                "value": "650+",
+                "label": "Mitglieder"
+            },
+            {
+                "value": "10+",
+                "label": "Mannschaften"
+            },
+            {
+                "value": "20+",
+                "label": "Partner"
+            }
         ]
     },
     "partners": {
         "title": "Unsere Sponsoren & Partner",
         "text": "Wir sind stolz darauf, mit vielen Kulmbacher Unternehmen und Partnern regelmäßig zusammenzuarbeiten und so aus Ideen handfeste Projekte umzusetzen. Hier seht ihr eine Übersicht über unsere aktuellen Sponsoren und Partner.",
-    "cta": { "label": "Partner werden", "slug": "kontakt", "style": "outline" }
+        "cta": {
+            "label": "Partner werden",
+            "slug": "kontakt",
+            "style": "outline"
+        }
     },
     "contact": {
         "title": "Kontaktiere uns gern!",

public/assets/css/components.css

@@ -165,6 +165,14 @@
     gap: 3rem;
 }
 
+/* Variante: sanft aufgehelltes Panel hinter dem Inhalt (tinted: true im JSON) */
+.split--tinted .split__inner {
+    padding: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
+    background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.04));
+    border: 1px solid rgb(255 255 255 / 0.12);
+    border-radius: var(--radius-card);
+}
+
 .split--flip .split__text {
     order: 2;
 }