From 88fceb67b174d1600048bcd118b458dddb8c7e36 Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Fri, 19 Jun 2026 08:25:05 +0200
Subject: [PATCH] =?UTF-8?q?Banner-Slider:=20Eigenwerbung-Slide=20"Hier=20k?=
 =?UTF-8?q?=C3=B6nnte=20Ihre=20Werbung=20stehen"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

House-Ad mit TSV-08-Wappen und echtem Foto (fussball-hero) statt der
Platzhalter-Slides: wirbt selbst für die Werbefläche, CTA führt intern aufs
Kontaktformular (#kontakt). Komponente um generische Props erweitert: variant
(CSS-Modifier), tag (Badge-Text) und cta.internal (interner Link ohne
target=_blank/rel=sponsored). Neue Styles: rote Glas-/Foto-Variante mit
gestricheltem "Werbeplatz frei"-Frame, rot-dunkler Verlauf für Lesbarkeit.

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 |  11 +-
 data/banners.json                |  32 ++--
 public/assets/css/components.css | 254 +++++++++++++++++++++++++++++++
 3 files changed, 272 insertions(+), 25 deletions(-)

diff --git a/app/components/banner-slider.php b/app/components/banner-slider.php
index 89ee303..5197f52 100644
--- a/app/components/banner-slider.php
+++ b/app/components/banner-slider.php
@@ -5,6 +5,9 @@ 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.
+ * Pro Slide optional: "variant" (CSS-Modifier, z. B. "house" für Eigenwerbung),
+ * "tag" (Badge-Text, Default "Anzeige"), "background" (Bild), "cta.internal"
+ * (interner Link ohne target=_blank/rel=sponsored, für eigene Seiten/Anker).
  * 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).
@@ -31,13 +34,15 @@ $total = count($banners);
                 <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' ?>>
+<?php $variant = $banner['variant'] ?? null; ?>
+                    <li class="ad-banner__slide<?= $bg ? ' ad-banner__slide--bg' : '' ?><?= $variant ? ' ad-banner__slide--' . e($variant) : '' ?>"<?= $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>
+                            <span class="ad-banner__tag"><?= e($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 $ctaInternal = !empty($banner['cta']['internal']); ?>
+                            <a class="btn ad-banner__cta" href="<?= e($banner['cta']['url']) ?>"<?= $ctaInternal ? '' : ' target="_blank" rel="noopener sponsored"' ?>><?= e($banner['cta']['label']) ?><?php if (!$ctaInternal): ?><span class="visually-hidden"> (öffnet in neuem Tab)</span><?php endif; ?></a>
 <?php endif; ?>
                         </div>
                         <div class="ad-banner__logo">
diff --git a/data/banners.json b/data/banners.json
index 19cf363..01a9f3d 100644
--- a/data/banners.json
+++ b/data/banners.json
@@ -1,28 +1,16 @@
 {
-  "heading": "Unsere Werbepartner",
-  "subline": "Diese Unternehmen aus Kulmbach und der Region unterstützen den TSV 08 – ein herzliches Dankeschön!",
+  "heading": "Werbepartner werden",
+  "subline": "Präsentieren Sie Ihr Unternehmen auf der Startseite des TSV 08 Kulmbach – sichtbar für die ganze Region.",
   "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" }
+      "variant": "house",
+      "tag": "Werbeplatz frei",
+      "company": "TSV 08 Kulmbach",
+      "title": "Hier könnte Ihre Werbung stehen",
+      "text": "Werden Sie Werbepartner des TSV 08 Kulmbach und zeigen Sie Ihr Unternehmen genau hier – sichtbar für tausende sportbegeisterte Menschen aus Kulmbach und dem Katzbachtal.",
+      "logo": "img/logo.svg",
+      "background": "img/pages/fussball-hero-1600.jpg",
+      "cta": { "label": "Werbepartner werden", "url": "#kontakt", "internal": true }
     }
   ]
 }
diff --git a/public/assets/css/components.css b/public/assets/css/components.css
index db08414..a7ab7e0 100644
--- a/public/assets/css/components.css
+++ b/public/assets/css/components.css
@@ -937,6 +937,64 @@
     }
 }
 
+/* Eigenwerbung („Hier könnte Ihre Werbung stehen") — rote Glasfläche mit
+   gestricheltem Frame, das eine freie Werbefläche andeutet. */
+.ad-banner__slide--house {
+    position: relative;
+    overflow: hidden;
+    background:
+        radial-gradient(135% 145% at 100% 0%, rgb(var(--clr-accent-rgb) / 0.24), transparent 55%),
+        var(--clr-glass-bg);
+    border-color: rgb(var(--clr-accent-rgb) / 0.5);
+}
+
+.ad-banner__slide--house .ad-banner__content,
+.ad-banner__slide--house .ad-banner__logo {
+    position: relative;
+    z-index: 1;
+}
+
+.ad-banner__slide--house .ad-banner__tag {
+    color: #fff;
+    background: var(--clr-accent);
+    border-color: transparent;
+}
+
+.ad-banner__slide--house .ad-banner__text {
+    color: var(--clr-text);
+}
+
+.ad-banner__slide--house .ad-banner__logo {
+    background: rgb(0 0 0 / 0.25);
+    border-color: rgb(var(--clr-accent-rgb) / 0.45);
+}
+
+/* Eigenwerbung MIT Foto-Hintergrund: rot-dunkler Verlauf von links hält den
+   Text lesbar, das Foto bleibt rechts sichtbar. */
+.ad-banner__slide--house.ad-banner__slide--bg {
+    background-image:
+        linear-gradient(to right, rgb(12 10 11 / 0.9), rgb(20 16 17 / 0.55) 55%, rgb(20 16 17 / 0.12) 90%),
+        var(--banner-bg);
+    background-size: cover;
+    background-position: center;
+    border-color: transparent;
+}
+
+.ad-banner__slide--house.ad-banner__slide--bg .ad-banner__logo {
+    background: rgb(0 0 0 / 0.45);
+    border-color: rgb(255 255 255 / 0.18);
+    backdrop-filter: blur(2px);
+}
+
+@media (max-width: 768px) {
+    /* Auf Mobil läuft der Verlauf nach unten (Text steht gestapelt darüber). */
+    .ad-banner__slide--house.ad-banner__slide--bg {
+        background-image:
+            linear-gradient(to bottom, rgb(12 10 11 / 0.88), rgb(20 16 17 / 0.7)),
+            var(--banner-bg);
+    }
+}
+
 .ad-banner__tag {
     display: inline-block;
     margin-bottom: 0.85rem;
@@ -2151,6 +2209,202 @@
     }
 }
 
+/* === department-choice (Abteilungs-Auswahl Fußball | Turnen) === */
+.department-choice > .container {
+    text-align: center;
+}
+
+.department-choice__intro {
+    max-width: 60ch;
+    margin: 1rem auto 0;
+}
+
+.department-choice__grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+    margin: 2.5rem 0 0;
+    padding: 0;
+    list-style: none;
+    text-align: left;
+}
+
+@media (max-width: 600px) {
+    .department-choice__grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.department-choice__card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    height: 100%;
+    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
+    background: var(--clr-glass-bg);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
+}
+
+.department-choice__kicker {
+    font-size: var(--fs-400);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--clr-accent);
+}
+
+.department-choice__heading {
+    font-size: var(--fs-650);
+    line-height: var(--lh-heading);
+}
+
+.department-choice__text {
+    color: var(--clr-text-muted);
+}
+
+.department-choice__btn {
+    align-self: start;
+    margin-top: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.department-choice__arrow {
+    font-size: 0.9em;
+}
+
+/* === fee-table (Beitragstabellen) === */
+.fee-table {
+    padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
+    background: var(--clr-glass-bg);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
+}
+
+.fee-table__title {
+    font-size: var(--fs-600);
+    line-height: var(--lh-heading);
+    margin-bottom: 1rem;
+}
+
+.fee-table__list {
+    margin: 0;
+}
+
+.fee-table__row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.65rem 0;
+    border-bottom: 1px solid var(--clr-glass-border);
+}
+
+.fee-table__row:last-child {
+    border-bottom: 0;
+}
+
+.fee-table__label {
+    margin: 0;
+}
+
+.fee-table__price {
+    margin: 0;
+    flex: none;
+    font-family: var(--ff-heading);
+    font-size: var(--fs-650);
+    line-height: 1;
+    color: var(--clr-accent);
+}
+
+.fee-table__note {
+    margin-top: 1rem;
+    font-size: var(--fs-400);
+    color: var(--clr-text-muted);
+}
+
+.fee-table-grid {
+    display: grid;
+    gap: 1.5rem;
+    margin-top: 2rem;
+}
+
+@media (min-width: 768px) {
+    .fee-table-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        align-items: start;
+    }
+}
+
+/* === membership (Mitglied werden) === */
+.membership-info__inner {
+    max-width: 70ch;
+}
+
+.membership-info__inner p {
+    margin-top: 1rem;
+}
+
+.membership-signup__inner {
+    max-width: 820px;
+    margin-inline: auto;
+}
+
+.membership-signup__intro {
+    max-width: 65ch;
+    margin: 1rem 0 2rem;
+    color: var(--clr-text-muted);
+}
+
+/* Fußball-Sektion: Beitragstabelle hat Abstand zum Formular */
+.membership-signup .fee-table + .form {
+    margin-top: 2rem;
+}
+
+.membership-notes {
+    display: grid;
+    gap: 1.5rem;
+    margin: 0 0 2rem;
+    padding: 0;
+    list-style: none;
+}
+
+@media (min-width: 768px) {
+    .membership-notes {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
+.membership-notes__title {
+    font-size: var(--fs-600);
+    line-height: var(--lh-heading);
+    margin-bottom: 0.4rem;
+    padding-top: 0.75rem;
+    border-top: 2px solid var(--clr-accent);
+}
+
+.membership-download {
+    margin-top: 2rem;
+}
+
+.membership-download__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.membership-download__icon {
+    font-size: 0.9em;
+}
+
+.membership-download__hint,
+.membership-download__contact {
+    margin-top: 0.75rem;
+    font-size: var(--fs-400);
+    color: var(--clr-text-muted);
+}
+
 .legal__muted {
     color: var(--clr-text-muted);
 }