Unterseiten: Fußball-Übersicht, Mannschaften, Jugend, Verein, Rechtliches
Neue Seiten + Routen: fussball, fussball/{erste-mannschaft,zweite-mannschaft,
damen}, jugendfussball, verein, impressum, datenschutz. Dazu die Komponenten
team, team-cards/-roster/-photo/-bento, faq/faq-contact, key-facts, age-groups,
cta-band, training-location und der contact-slider.
Daten in teams/fussball/jugend/verein.json; club.json um Vorstand, Bankdaten,
Datenschutz-Kontakt erweitert. person-grid bekommt $names-Filter, partner-grid
einen Intro-Stil. Seiten setzen $meta['schema'] via team_/page_schema.
Styles für alle neuen Komponenten in components.css.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv
2026-06-19 08:13:04 +02:00
|
|
|
<?php
|
|
|
|
|
|
|
|
|
|
declare(strict_types=1);
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Kombi-Sektion: FAQ (2/3) + einzelner Ansprechpartner (1/3) nebeneinander.
|
|
|
|
|
* Sinnvoll, wenn es pro Mannschaft nur einen Kontakt gibt. Props:
|
|
|
|
|
* $faq array [{q, a}]
|
|
|
|
|
* $persons array — ein oder mehrere Ansprechpartner (person-card). Leer → FAQ volle Breite.
|
|
|
|
|
* Bei mehreren: Mini-Slider (ohne JS alle Karten gestapelt sichtbar).
|
|
|
|
|
* $faqTitle string (optional, Default 'Häufige Fragen')
|
|
|
|
|
* $faqIntro string (optional) — gedämpfte Subline unter der Überschrift
|
|
|
|
|
* $contactTitle string (optional, Default 'Dein Ansprechpartner')
|
|
|
|
|
* $anchor string (optional, Default 'kontakt')
|
|
|
|
|
* Natives <details>/<summary> (ohne JS bedienbar); FAQPage-Schema liefert die Seite.
|
|
|
|
|
*/
|
|
|
|
|
$faqTitle = $faqTitle ?? 'Häufige Fragen';
|
|
|
|
|
$faqIntro = $faqIntro ?? '';
|
|
|
|
|
$contactTitle = $contactTitle ?? 'Dein Ansprechpartner';
|
|
|
|
|
$anchor = $anchor ?? 'kontakt';
|
|
|
|
|
$faq = array_values(array_filter(
|
|
|
|
|
$faq ?? [],
|
|
|
|
|
static fn (array $i): bool => !empty($i['q']) && !empty($i['a'])
|
|
|
|
|
));
|
|
|
|
|
$persons = array_values(array_filter($persons ?? [], static fn ($p): bool => !empty($p)));
|
|
|
|
|
$hasPerson = $persons !== [];
|
|
|
|
|
$isSlider = count($persons) > 1;
|
|
|
|
|
if ($faq === [] && !$hasPerson) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
?>
|
|
|
|
|
<section class="section faq-contact<?= $hasPerson ? '' : ' faq-contact--solo' ?>" id="<?= e($anchor) ?>">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<h2 class="faq-contact__title"><?= e($faqTitle) ?></h2>
|
|
|
|
|
<?php if ($faqIntro !== ''): ?>
|
|
|
|
|
<p class="faq-contact__intro text-muted"><?= e($faqIntro) ?></p>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
<div class="faq-contact__inner">
|
|
|
|
|
<div class="faq-contact__main">
|
|
|
|
|
<div class="faq__list">
|
|
|
|
|
<?php foreach ($faq as $item): ?>
|
|
|
|
|
<details class="faq__item">
|
|
|
|
|
<summary class="faq__q"><span><?= e($item['q']) ?></span><?= icon('chevron-down', 'faq__chevron') ?></summary>
|
|
|
|
|
<div class="faq__a"><p><?= e($item['a']) ?></p></div>
|
|
|
|
|
</details>
|
|
|
|
|
<?php endforeach; ?>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<?php if ($hasPerson): ?>
|
|
|
|
|
<aside class="faq-contact__aside">
|
|
|
|
|
<?php if ($contactTitle !== ''): ?>
|
|
|
|
|
<h2><?= e($contactTitle) ?></h2>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
<?php if ($isSlider): ?>
|
|
|
|
|
<div class="contact-slider" data-contact-slider>
|
|
|
|
|
<ul class="contact-slider__track">
|
|
|
|
|
<?php foreach ($persons as $p): ?>
|
|
|
|
|
<li class="contact-slider__slide" data-contact-slide>
|
|
|
|
|
<?php component('person-card', ['person' => $p]); ?>
|
|
|
|
|
</li>
|
|
|
|
|
<?php endforeach; ?>
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="contact-slider__dots">
|
|
|
|
|
<?php foreach ($persons as $i => $p): ?>
|
Design-System: Button-Varianten konsolidieren, 44px-Trefferflächen
Dritter Teil. .btn hatte nur primary + outline + sm/lg, daneben lebten mehrere
Controls als Eigenbau — teils zeichengleich dupliziert.
Tabs: .group-tabs__tab und .filter-bar__tab waren bis auf flex-shrink und 4px
Innenabstand identisch. Beide laufen jetzt über eine gemeinsame .tab-Basis, die
aria-pressed (Filter) und aria-selected (Tabs) gleich behandelt; von den
BEM-Klassen bleibt nur das jeweilige Delta. Innenabstand vereinheitlicht auf
--space-m, die Gruppen-Tabs verlieren dadurch 4px pro Seite.
Icon-Buttons: .ad-banner__nav-btn und .ad-banner__toggle waren vollständige
Duplikate voneinander. Sie tragen jetzt .btn .btn--icon und behalten nur die
Glas-Optik als Delta. Der Selektor schreibt .btn mit — utilities.css lädt nach
components.css, bei gleicher Spezifität gewänne sonst die rote .btn-Fläche.
Trefferflächen auf 44px (WCAG 2.5.5): .btn bekommt min-height und wird
inline-flex, damit Icon und Label ohne Zusatz-Markup zentriert liegen.
Bezeichnend auch hier — .department-choice__btn hatte inline-flex, align-items
und exakt denselben gap bereits selbst deklariert und gibt sie jetzt ab.
Controls, die optisch klein bleiben sollen, strecken die Fläche stattdessen
unsichtbar per Pseudo-Element (.tap-target, automatisch auch für .btn--sm) —
gewertet wird die Trefferfläche, nicht die gezeichnete.
Der Banner-Indikator brauchte einen anderen Weg: er trug overflow: hidden, um
den Fortschrittsbalken zu beschneiden, was jede Erweiterung wieder abgeschnitten
hätte. Der sichtbare 6px-Balken liegt jetzt im ::before, der Fortschritt ist
selbst rund — overflow entfällt, der Button ist 48x44px.
Haupt-Nav-Links, Dropdown-Trigger und Footer-Social-Links bekommen min-height
statt einer Pseudo-Erweiterung: sie stehen in Reihen, wo überlappende
Trefferflächen den Nachbarn verdecken würden. In der 60px hohen Kopfleiste ist
die Höhe ohnehin nicht sichtbar.
Bewusst unverändert: die Formular-Checkbox bleibt bei 24px (WCAG 2.5.8).
<input> ist ein Replaced Element, dort greift ::after nicht zuverlässig — und
das zugehörige <label> ist klickbar und liefert die große Fläche.
.btn--ghost ist angelegt, hat aber aktuell keinen Abnehmer: die vermuteten
nackten Links sind bei näherem Hinsehen Bildkarten (.instagram__link),
Wrapper (.split__cta) oder eigenständige Karten-Affordanzen (.team-card__cta),
keine tertiären Buttons.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
2026-07-27 10:28:02 +02:00
|
|
|
<button type="button" class="contact-slider__dot tap-target" data-contact-dot<?= $i === 0 ? ' aria-current="true"' : '' ?> aria-label="Ansprechpartner <?= $i + 1 ?>: <?= e($p['name']) ?>"></button>
|
Unterseiten: Fußball-Übersicht, Mannschaften, Jugend, Verein, Rechtliches
Neue Seiten + Routen: fussball, fussball/{erste-mannschaft,zweite-mannschaft,
damen}, jugendfussball, verein, impressum, datenschutz. Dazu die Komponenten
team, team-cards/-roster/-photo/-bento, faq/faq-contact, key-facts, age-groups,
cta-band, training-location und der contact-slider.
Daten in teams/fussball/jugend/verein.json; club.json um Vorstand, Bankdaten,
Datenschutz-Kontakt erweitert. person-grid bekommt $names-Filter, partner-grid
einen Intro-Stil. Seiten setzen $meta['schema'] via team_/page_schema.
Styles für alle neuen Komponenten in components.css.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv
2026-06-19 08:13:04 +02:00
|
|
|
<?php endforeach; ?>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<?php else: ?>
|
|
|
|
|
<?php component('person-card', ['person' => $persons[0]]); ?>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
</aside>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|