Neue Seiten: Mitglied/Partner werden, Sportheimbuchung & Ansprechpartner

Mitglied werden: Hub-Seite mit Online-Anmeldung (membership-form +
membership-submit-Action, Honeypot + Time-Trap), Abteilungswahl
(department-choice), Beitragstabelle (fee-table) und Turn-Aufnahmeantrag
als PDF-Download. Daten in data/mitglied-werden.json.

Partner werden & Sportheimbuchung: neue Seiten samt Routing und Navigation.

Ansprechpartner: echter Hero (Vereinsgelände), Bereiche aus dem group-Feld
der Single Source (Fußball / Turnen) zu zwei Sektionen gebündelt, Disziplin
als Karten-Überschrift. Fehlende Turn-Disziplin-Leads (Frisque, Lorz,
Kornatz, Trotzke) aus den Turnen-Unterseiten extrahiert und in
data/ansprechpartner.json ergänzt (allgemeine Turnabteilungs-Mail als
Kontakt). WhatsApp für alle Personen mit Telefonnummer. person-grid:
kompaktere Karten, Hairline unter der Bereichsüberschrift, 5 Spalten am
Desktop. Startseite auf die Haupt-Ansprechpartner je Bereich begrenzt.

Dazu: neue Icons (check-circle, download, file-earmark-text, whatsapp),
Anpassungen an Header/Footer/CTA/age-groups sowie tokens/layout/utilities.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RZsKTL5kRSG4KkK8w2LKkE

public/assets/css/utilities.css

@@ -3,25 +3,45 @@
    ============================================================ */
 .btn {
     display: inline-block;
-    padding: 10px 18px;
+    padding: var(--btn-pad-y) var(--btn-pad-x);
     white-space: nowrap;
     background: var(--clr-accent);
     color: var(--clr-text);
-    font-size: var(--fs-500);
+    font-size: var(--btn-font);
+    line-height: var(--btn-line);
     text-decoration: none;
     text-align: center;
     border: 1px solid var(--clr-accent);
     border-radius: var(--radius-btn);
     cursor: pointer;
-    transition: background var(--transition), border-color var(--transition);
+    transition: background var(--transition), border-color var(--transition),
+                color var(--transition), transform var(--transition);
 }
 
+/* primary (Default) */
 .btn:hover {
     background: var(--clr-accent-dark);
     border-color: var(--clr-accent-dark);
     color: var(--clr-text);
 }
 
+.btn:focus-visible {
+    outline: 2px solid var(--clr-text);
+    outline-offset: 2px;
+}
+
+.btn:active {
+    transform: translateY(1px);
+}
+
+.btn[disabled],
+.btn[aria-disabled="true"] {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* secondary */
 .btn--outline {
     background: transparent;
     border-color: var(--clr-text);
@@ -30,8 +50,13 @@
 .btn--outline:hover {
     background: var(--clr-glass-bg);
     border-color: var(--clr-text);
+    color: var(--clr-text);
 }
 
+/* Größenmodifier — Padding ist em-basiert, skaliert mit der font-size */
+.btn--sm { font-size: var(--btn-font-sm); }
+.btn--lg { font-size: var(--btn-font-lg); }
+
 .visually-hidden {
     position: absolute !important;
     width: 1px;