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.