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/components.css

@@ -607,20 +607,30 @@
     color: var(--clr-text-muted);
 }
 
-/* Max. 3 pro Reihe; unvollständige Reihen (z. B. 3+2) zentrieren sich automatisch */
+/* Kurze Hairline unter der Bereichs-Überschrift */
+.persons h2::after {
+    content: "";
+    display: block;
+    width: 2.5rem;
+    height: 2px;
+    margin: 0.6rem auto 0;
+    background: var(--clr-accent);
+}
+
+/* Max. 5 pro Reihe; unvollständige Reihen zentrieren sich automatisch */
 .persons__grid {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 1.5rem;
-    margin-top: 2.5rem;
+    gap: 1.25rem;
+    margin-top: 2.25rem;
     text-align: left;
 }
 
 .persons__grid > li {
-    flex: 0 1 calc((100% - 3rem) / 3);
-    min-width: 220px;
-    max-width: 340px;
+    flex: 0 1 calc((100% - 5rem) / 5);
+    min-width: 170px;
+    max-width: 250px;
 }
 
 .person-card {
@@ -655,6 +665,15 @@
     background: linear-gradient(180deg, rgb(20 20 20 / 0) 0%, rgb(20 20 20 / 0.35) 100%);
 }
 
+/* Kompaktere Kacheln im Ansprechpartner-Grid (faq-contact bleibt unberührt) */
+.persons .person-card__media img {
+    aspect-ratio: 4 / 4.2;
+}
+
+.persons .person-card__body {
+    padding: 0.85rem 1rem 1rem;
+}
+
 .person-card__department {
     font-size: var(--fs-650);
     letter-spacing: 0.04em;
@@ -675,6 +694,11 @@
     font-size: var(--fs-500);
 }
 
+/* Zweiter Kontakt-Link (z. B. WhatsApp) sitzt enger unter dem ersten */
+.person-card__contact + .person-card__contact {
+    margin-top: 0;
+}
+
 .person-card__contact .icon {
     color: var(--clr-accent);
     flex: none;
@@ -867,28 +891,22 @@
     margin: 0;
 }
 
-/* Gruppierte Abschnitte (fieldset/legend) — gliedert lange Formulare in ruhige
-   Blöcke, getrennt durch eine dezente Hairline. Reduziert die optische Last. */
+/* Gruppierte Abschnitte (fieldset/legend) — jeder Block ein dezent umrandetes
+   Feld mit Titel auf der Rahmenlinie. Gliedert lange Formulare optisch klar. */
 .form__group {
     margin: 0;
-    padding: 0;
-    border: 0;
+    padding: 1.25rem 1.5rem 1.5rem;
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
     min-inline-size: 0;
 }
 
-.form__group + .form__group {
-    padding-top: 1.75rem;
-    border-top: 1px solid var(--clr-glass-border);
-}
-
 .form__legend {
-    width: 100%;
-    padding: 0;
-    margin-bottom: 1rem;
+    padding: 0 0.5rem;
     font-size: var(--fs-500);
     text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--clr-accent);
+    letter-spacing: 0.08em;
+    color: var(--clr-text);
 }
 
 .form__group-body {
@@ -1908,14 +1926,20 @@
 
 .age-groups__grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 1.5rem;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.75rem;
     margin: 2.5rem 0 0;
     padding: 0;
     list-style: none;
     text-align: left;
 }
 
+@media (max-width: 600px) {
+    .age-groups__grid {
+        grid-template-columns: 1fr;
+    }
+}
+
 .age-group {
     display: grid;
     grid-template-rows: auto 1fr;
@@ -1940,7 +1964,7 @@
     display: block;
     width: 100%;
     height: auto;
-    aspect-ratio: 4 / 3;
+    aspect-ratio: 3 / 2;
     object-fit: cover;
     transition: transform var(--transition);
 }
@@ -1949,50 +1973,58 @@
     transform: scale(1.05);
 }
 
-/* Klassen-Badge (G/F/E/D/C) auf dem Bild. */
-.age-group__badge {
-    position: absolute;
-    top: 0.75rem;
-    left: 0.75rem;
-    display: grid;
-    place-items: center;
-    width: 2.6rem;
-    height: 2.6rem;
-    font-family: var(--ff-heading);
-    font-size: var(--fs-650);
-    line-height: 1;
-    color: #fff;
-    background: var(--clr-accent);
-    border-radius: 50%;
-    box-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
-}
-
 .age-group__body {
     display: grid;
-    gap: 0.4rem;
+    gap: 0.6rem;
     align-content: start;
-    padding: 1.1rem 1.3rem 1.3rem;
+    padding: 1.5rem 1.6rem 1.6rem;
 }
 
 .age-group__name {
-    font-size: var(--fs-650);
+    font-size: var(--fs-700);
     line-height: var(--lh-heading);
 }
 
 .age-group__training {
     display: inline-flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 0.5rem;
     margin: 0;
-    font-size: var(--fs-500);
+    font-size: var(--fs-600);
+    line-height: 1.45;
     color: var(--clr-text-muted);
 }
 
 .age-group__icon {
     flex: none;
+    margin-top: 0.2em;
     color: var(--clr-accent);
 }
 
+/* Platzhalter-Karten (B-/A-Jugend „In Entstehung"): Bild gedämpft, Label oben links. */
+.age-group--upcoming .age-group__img {
+    opacity: 0.5;
+    filter: grayscale(0.5);
+}
+
+.age-group--upcoming:hover .age-group__img {
+    transform: none;
+}
+
+.age-group__soon {
+    position: absolute;
+    top: 0.9rem;
+    left: 0.9rem;
+    padding: 0.35rem 0.75rem;
+    font-family: var(--ff-body);
+    font-size: var(--fs-400);
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #fff;
+    background: var(--clr-accent);
+    border-radius: var(--radius-btn);
+}
+
 /* === team-cards (Mannschafts-Karten) === */
 .team-cards > .container {
     text-align: center;
@@ -2760,6 +2792,14 @@
     color: var(--clr-text-muted);
 }
 
+/* Mehrere Beitragstabellen + Austritts-Hinweis gestapelt (Turn-Übersicht). */
+.fee-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    margin-top: 1.5rem;
+}
+
 /* === membership (Mitglied werden) === */
 .membership-signup__inner {
     max-width: 720px;