data-banner-slide role="group" aria-roledescription="Folie" aria-label="= ($i + 1) ?> von = $total ?>"= $i === 0 ? '' : ' hidden' ?>>
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);
}