TSV Mustertal — Turn- & Sportverein (Vereine-Demo)
Konzept: “Bewegung, die verbindet.” Lebendiger, heller Community-Sportverein.
Bewusst die EINZIGE helle, warme Demo im Portfolio (Kontrast zu den dunklen).
Layer A: taste-skill (solide, klar) + sportliche Energie über Motion & Foto-Dichte.
1. Farben (alle WCAG-geprüft)
- paper #F6F7F3 Seitengrund
- ink #16241C Haupttext (Pine-Black)
- muted #55645B Sekundärtext (>=4.5 auf paper)
- green #117A39 Primär: Buttons, Links, Text auf Weiß (weiß darauf >=4.6, Text auf weiß >=4.6)
- green-br #15803D nur große Display-Akzente
- green-deep #0E6630 Button-Hover
- amber #F59E0B Energie-Akzent: NUR Chip-BG (mit ink-Text) & große Zahlen, nie Kleintext auf Weiß
- surface #EBF2EC weiche grüne Fläche
- band #117A39 Stat-Band (weiße/paper Zahlen+Text, kein Amber darauf)
2. Typografie
- Display: Space Grotesk (font-display, bold) — Headlines & Trikot-Zahlen
- Body: Inter (font-sans)
- Beide via DemoLayout (@fontsource) bereits geladen.
3. Spacing/Motion
- Sektionen py-20 md:py-28. GSAP: reveal-batch, Zähler, magnetische CTA,
Hover-scale-105 auf Foto-Karten, leichte Hero-Bewegung. Nur transform/opacity.
prefers-reduced-motion respektiert (global.css). Lebendig, nicht techno.
4. Sektionen
Nav (hell, sticky) · Hero (Split: Text + Foto-Collage + Stats) · Abteilungen (8 Foto-Karten) ·
Stat-Band (Zähler) · Termine & Spielplan (Datum-Chips + Typ-Badges) · Aktuelles (3 News) ·
Mitglied werden (Beiträge + Vorteile + Antrag-Mockup) · Mitmachen/Sponsoren ·
Kontakt & Anfahrt (Google Maps) · Footer.
5. Bans
Keine Emojis als Icons (SVG), keine unsichtbaren Buttons, keine leeren Grid-Zellen,
kein Amber-Kleintext auf Weiß (Kontrast), Demo bleibt noindex.