Banner-Slider: Eigenwerbung-Slide "Hier könnte Ihre Werbung stehen"
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
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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 }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user