Banner-Slider auf der Startseite

Komponente banner-slider liest data/banners.json; banner.js übernimmt
Autoplay/Pause/Steuerung (progressive enhancement). Slider sitzt zwischen
Hero und Instagram-Feed. Bilder vorerst als Platzhalter-SVGs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv

app/components/banner-slider.php

@@ -0,0 +1,68 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * Werbe-/Sponsoren-Banner-Slider. Daten: data/banners.json (Single Source of Truth).
+ * Layout je Slide: 2/3 Titel + Text + CTA, 1/3 Firmenlogo.
+ * Auto-Rotation + Fortschritts-Indikatoren übernimmt assets/js/banner.js
+ * (pausiert bei Hover/Fokus, respektiert prefers-reduced-motion).
+ * Ohne JS: nur der erste Banner ist sichtbar (Graceful Degradation).
+ */
+$bannerData = json_load('banners');
+$banners = $bannerData['banners'] ?? [];
+if ($banners === []) {
+    return;
+}
+$heading = $bannerData['heading'] ?? null;
+$subline = $bannerData['subline'] ?? null;
+$total = count($banners);
+?>
+        <section class="section ad-banner" id="anzeigen" aria-roledescription="Karussell" aria-label="Anzeigen unserer Sponsoren und Partner" data-banner>
+            <div class="container">
+<?php if ($heading !== null): ?>
+                <h2><?= e($heading) ?></h2>
+<?php else: ?>
+                <h2 class="visually-hidden">Anzeigen unserer Sponsoren &amp; Partner</h2>
+<?php endif; ?>
+<?php if ($subline !== null): ?>
+                <p class="text-muted ad-banner__subline"><?= e($subline) ?></p>
+<?php endif; ?>
+                <ul class="ad-banner__track" id="ad-banner-track" aria-live="off">
+<?php foreach ($banners as $i => $banner): ?>
+<?php $bg = $banner['background'] ?? null; ?>
+                    <li class="ad-banner__slide<?= $bg ? ' ad-banner__slide--bg' : '' ?>"<?= $bg ? ' style="--banner-bg: url(' . e(asset($bg)) . ')"' : '' ?> data-banner-slide role="group" aria-roledescription="Folie" aria-label="<?= ($i + 1) ?> von <?= $total ?>"<?= $i === 0 ? '' : ' hidden' ?>>
+                        <div class="ad-banner__content">
+                            <span class="ad-banner__tag">Anzeige</span>
+                            <p class="ad-banner__title"><?= e($banner['title']) ?></p>
+                            <p class="ad-banner__text"><?= e($banner['text']) ?></p>
+<?php if (!empty($banner['cta']['url']) && !empty($banner['cta']['label'])): ?>
+                            <a class="btn ad-banner__cta" href="<?= e($banner['cta']['url']) ?>" target="_blank" rel="noopener sponsored"><?= e($banner['cta']['label']) ?><span class="visually-hidden"> (öffnet in neuem Tab)</span></a>
+<?php endif; ?>
+                        </div>
+                        <div class="ad-banner__logo">
+                            <img src="<?= e(asset($banner['logo'])) ?>" alt="<?= e($banner['company'] ?? $banner['title']) ?>" loading="lazy" decoding="async">
+                        </div>
+                    </li>
+<?php endforeach; ?>
+                </ul>
+<?php if ($total > 1): ?>
+                <?php /* Ohne JS verborgen (Steuerung wäre funktionslos); banner.js blendet sie ein. */ ?>
+                <div class="ad-banner__controls" data-banner-controls hidden>
+                    <?php /* Explizite Pause/Play-Taste — WCAG 2.2.2. Nur bei aktiver Auto-Rotation sichtbar. */ ?>
+                    <button class="ad-banner__toggle" type="button" data-banner-toggle aria-pressed="false" aria-controls="ad-banner-track" hidden>
+                        <?= icon('pause-fill', 'ad-banner__toggle-icon ad-banner__toggle-icon--pause') ?>
+                        <?= icon('play-fill', 'ad-banner__toggle-icon ad-banner__toggle-icon--play') ?>
+                        <span class="visually-hidden" data-banner-toggle-label>Automatischen Wechsel pausieren</span>
+                    </button>
+                    <div class="ad-banner__indicators" role="group" aria-label="Anzeige wählen">
+<?php foreach ($banners as $i => $banner): ?>
+                        <button class="ad-banner__dot" type="button" data-banner-dot aria-controls="ad-banner-track" aria-label="Anzeige <?= ($i + 1) ?> von <?= $total ?>: <?= e($banner['company'] ?? $banner['title']) ?>">
+                            <span class="ad-banner__progress" aria-hidden="true"></span>
+                        </button>
+<?php endforeach; ?>
+                    </div>
+                </div>
+<?php endif; ?>
+            </div>
+        </section>

app/pages/home.php

@@ -13,10 +13,11 @@ $meta = [
     'title'          => 'Fußball & Turnen in Kulmbach – TSV 08 Kulmbach',
     'title_absolute' => true,
     'description'    => 'Dein Sportverein für Fußball und Turnen in Kulmbach: Jugend-, Herren- und Damenfußball, Turnen und Trampolin – seit 1908 im Katzbachtal. Jetzt Mitglied werden!',
-    'scripts'        => ['form.js'],
+    'scripts'        => ['form.js', 'banner.js'],
 ];
 
 component('hero', ['hero' => $home['hero']]);
+component('banner-slider');
 component('instagram-feed');
 
 foreach ($home['sections'] as $section) {

data/banners.json

@@ -0,0 +1,28 @@
+{
+  "heading": "Unsere Werbepartner",
+  "subline": "Diese Unternehmen aus Kulmbach und der Region unterstützen den TSV 08 – ein herzliches Dankeschön!",
+  "banners": [
+    {
+      "company": "Musterfirma GmbH",
+      "title": "Ihre Werbung beim TSV 08 Kulmbach",
+      "text": "Erreichen Sie tausende sportbegeisterte Kulmbacherinnen und Kulmbacher – als Sponsor unseres Vereins direkt auf der Startseite.",
+      "logo": "img/banners/placeholder-1.svg",
+      "cta": { "label": "Jetzt Partner werden", "url": "https://example.com" }
+    },
+    {
+      "company": "Beispiel Handwerk AG",
+      "title": "Regional. Verlässlich. Mittendrin.",
+      "text": "Wir unterstützen den Vereinssport im Katzbachtal – und freuen uns, Teil der TSV-08-Familie zu sein.",
+      "logo": "img/banners/placeholder-2.svg",
+      "background": "img/banners/bg-sample.svg",
+      "cta": { "label": "Mehr erfahren", "url": "https://example.com" }
+    },
+    {
+      "company": "Sponsor Sport & Freizeit",
+      "title": "Ausrüstung für echte Teamplayer",
+      "text": "Vom Trikot bis zum Trainingsplatz – unser Partner für alles rund um den Sport in der Region Kulmbach.",
+      "logo": "img/banners/placeholder-3.svg",
+      "cta": { "label": "Zum Angebot", "url": "https://example.com" }
+    }
+  ]
+}

public/assets/img/banners/bg-sample.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Platzhalter-Hintergrund">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#2a2a2a"/>
+      <stop offset="0.55" stop-color="#3a1417"/>
+      <stop offset="1" stop-color="#e20612"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="400" fill="url(#g)"/>
+  <g fill="#ffffff" fill-opacity="0.05">
+    <circle cx="980" cy="90" r="160"/>
+    <circle cx="1120" cy="320" r="220"/>
+    <circle cx="760" cy="360" r="120"/>
+  </g>
+</svg>

public/assets/img/banners/placeholder-1.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 110" role="img" aria-label="Platzhalter-Logo">
+  <rect x="2" y="2" width="256" height="106" rx="14" fill="none" stroke="#ffffff" stroke-opacity="0.4" stroke-dasharray="7 7"/>
+  <text x="130" y="52" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="26" font-weight="700" fill="#ffffff">IHR LOGO</text>
+  <text x="130" y="78" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#ffffff" fill-opacity="0.6">Sponsor 1</text>
+</svg>

public/assets/img/banners/placeholder-2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 110" role="img" aria-label="Platzhalter-Logo">
+  <rect x="2" y="2" width="256" height="106" rx="14" fill="none" stroke="#ffffff" stroke-opacity="0.4" stroke-dasharray="7 7"/>
+  <text x="130" y="52" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="26" font-weight="700" fill="#ffffff">IHR LOGO</text>
+  <text x="130" y="78" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#ffffff" fill-opacity="0.6">Sponsor 2</text>
+</svg>

public/assets/img/banners/placeholder-3.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 110" role="img" aria-label="Platzhalter-Logo">
+  <rect x="2" y="2" width="256" height="106" rx="14" fill="none" stroke="#ffffff" stroke-opacity="0.4" stroke-dasharray="7 7"/>
+  <text x="130" y="52" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="26" font-weight="700" fill="#ffffff">IHR LOGO</text>
+  <text x="130" y="78" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#ffffff" fill-opacity="0.6">Sponsor 3</text>
+</svg>

public/assets/js/banner.js

@@ -0,0 +1,115 @@
+/* Werbe-/Sponsoren-Banner-Slider: Auto-Rotation über die Fortschrittsanimation
+   des aktiven Indikators (animationend → nächste Folie).
+
+   Barrierefreiheit:
+   - explizite Pause/Play-Taste (WCAG 2.2.2 „Pause, Stop, Hide"),
+   - zusätzlich Pause bei Hover/Fokus (Komfort),
+   - aria-live: im Autoplay "off" (kein Vorlese-Spam), bei Pause/manuell "polite",
+   - bei prefers-reduced-motion läuft keine Animation → keine Auto-Rotation;
+     Indikatoren bleiben per Klick bedienbar, die Pause-Taste entfällt. */
+(function () {
+    'use strict';
+
+    var root = document.querySelector('[data-banner]');
+    if (!root) {
+        return;
+    }
+
+    var track = root.querySelector('#ad-banner-track');
+    var slides = Array.prototype.slice.call(root.querySelectorAll('[data-banner-slide]'));
+    var dots = Array.prototype.slice.call(root.querySelectorAll('[data-banner-dot]'));
+    var controls = root.querySelector('[data-banner-controls]');
+    var toggle = root.querySelector('[data-banner-toggle]');
+    var toggleLabel = root.querySelector('[data-banner-toggle-label]');
+    if (slides.length <= 1) {
+        return;
+    }
+
+    var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    var index = 0;
+    var hoverPaused = false;
+    var userPaused = false;
+
+    function syncPaused() {
+        // Bei reduzierter Bewegung gilt jeder Wechsel als manuell → ansagen.
+        var paused = hoverPaused || userPaused || reduce;
+        root.classList.toggle('is-paused', paused);
+        if (track) {
+            track.setAttribute('aria-live', paused ? 'polite' : 'off');
+        }
+    }
+
+    function activate(i) {
+        index = (i % slides.length + slides.length) % slides.length;
+        slides.forEach(function (slide, n) {
+            slide.hidden = n !== index;
+        });
+        dots.forEach(function (dot, n) {
+            var on = n === index;
+            dot.classList.toggle('is-active', on);
+            if (on) {
+                dot.setAttribute('aria-current', 'true');
+            } else {
+                dot.removeAttribute('aria-current');
+            }
+        });
+    }
+
+    // Sobald die Fortschrittsanimation des aktiven Indikators durchgelaufen ist,
+    // zur nächsten Folie wechseln. (Beim Wechsel wird die alte Animation
+    // abgebrochen → 'animationcancel', nicht 'animationend' → kein Doppelsprung.)
+    root.addEventListener('animationend', function (event) {
+        if (event.animationName === 'ad-progress') {
+            activate(index + 1);
+        }
+    });
+
+    // Pause bei Hover/Fokus.
+    root.addEventListener('mouseenter', function () {
+        hoverPaused = true;
+        syncPaused();
+    });
+    root.addEventListener('mouseleave', function () {
+        hoverPaused = false;
+        syncPaused();
+    });
+    root.addEventListener('focusin', function () {
+        hoverPaused = true;
+        syncPaused();
+    });
+    root.addEventListener('focusout', function (event) {
+        if (!root.contains(event.relatedTarget)) {
+            hoverPaused = false;
+            syncPaused();
+        }
+    });
+
+    dots.forEach(function (dot, n) {
+        dot.addEventListener('click', function () {
+            activate(n);
+        });
+    });
+
+    // Steuerung einblenden (ohne JS bleibt sie verborgen, da funktionslos).
+    if (controls) {
+        controls.hidden = false;
+    }
+
+    // Pause/Play nur anbieten, wenn überhaupt automatisch rotiert wird.
+    if (toggle && !reduce) {
+        toggle.hidden = false;
+        toggle.addEventListener('click', function () {
+            userPaused = !userPaused;
+            toggle.setAttribute('aria-pressed', String(userPaused));
+            if (toggleLabel) {
+                toggleLabel.textContent = userPaused
+                    ? 'Automatischen Wechsel fortsetzen'
+                    : 'Automatischen Wechsel pausieren';
+            }
+            syncPaused();
+        });
+    }
+
+    activate(0);
+    syncPaused();
+})();