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;

public/assets/css/layout.css

@@ -26,19 +26,18 @@
     z-index: 10;
 }
 
-/* Desktop: Logo links | Nav exakt zentriert | CTAs rechts */
+/* Desktop: Logo + Schriftzug links | Nav-Punkte und CTA rechtsbündig zusammen */
 .site-header__inner {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
+    display: flex;
     align-items: center;
     gap: 1.5rem;
     min-height: var(--header-h);
 }
 
 .site-header__brand {
-    justify-self: start;
     display: flex;
     align-items: center;
+    gap: 0.75rem;
     text-decoration: none;
     color: var(--clr-text);
 }
@@ -49,16 +48,25 @@
     filter: drop-shadow(var(--shadow));
 }
 
+.site-header__name {
+    font-family: var(--ff-heading);
+    font-size: var(--fs-675);
+    line-height: 0.85;
+    text-transform: uppercase;
+    white-space: nowrap;
+    text-shadow: var(--shadow);
+}
+
 .site-header__actions {
-    justify-self: end;
     display: flex;
     align-items: center;
     gap: 0.75rem;
 }
 
 /* --- Navigation --- */
+/* margin-left:auto schiebt Nav + nachfolgende CTAs als Block nach rechts */
 .site-nav {
-    justify-self: center;
+    margin-left: auto;
 }
 
 .site-nav__toggle {
@@ -208,6 +216,7 @@
 
     .site-nav {
         order: 3;
+        margin-left: 0;
     }
 
     .site-nav__toggle {
@@ -329,14 +338,18 @@
 }
 
 @media (max-width: 600px) {
-    /* Schmale Screens: CTA(s) kompakter neben dem Burger. */
+    /* Schmale Screens: Schriftzug ausblenden (Logo + aria-label bleiben). */
+    .site-header__name {
+        display: none;
+    }
+
+    /* CTA(s) kompakter neben dem Burger. */
     .site-header__actions a:not(:last-child) {
         display: none;
     }
 
     .site-header__actions .btn {
-        font-size: var(--fs-400);
-        padding: 8px 14px;
+        font-size: var(--btn-font-sm);
     }
 }
 
@@ -394,21 +407,31 @@
 
 .site-footer__grid {
     display: grid;
-    grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
-    gap: 3rem;
+    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
+    gap: 2.5rem 3rem;
     padding-block: 4.5rem 3.5rem;
 }
 
-@media (max-width: 992px) {
+/* Brand-Block bleibt links stehen, Nav-Spalten rücken rechts daneben */
+@media (max-width: 1024px) {
+    .site-footer__grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .site-footer__brand {
+        grid-column: 1 / -1;
+    }
+}
+
+@media (max-width: 768px) {
     .site-footer__grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 500px) {
     .site-footer__grid {
         grid-template-columns: 1fr;
-        gap: 2.5rem;
+        gap: 2.25rem;
     }
 }
 
@@ -454,6 +477,16 @@
     position: relative;
 }
 
+.site-footer__heading a {
+    color: inherit;
+    text-decoration: none;
+    transition: color var(--transition);
+}
+
+.site-footer__heading a:hover {
+    color: var(--clr-accent);
+}
+
 .site-footer__heading::after {
     content: '';
     position: absolute;
@@ -500,12 +533,20 @@
 
 .site-footer__list a:hover,
 .site-footer__address a:hover,
-.site-footer__social a:hover {
+.site-footer__social a:hover,
+.site-footer__legal a:hover {
     color: var(--clr-text);
     text-decoration: underline;
     text-underline-offset: 0.25em;
 }
 
+/* Zusatzlinks (Startseite, Mitglied werden) unter dem Kontakt-Block */
+.site-footer__list--extra {
+    margin-top: 1.25rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--clr-glass-border);
+}
+
 /* Bottom-Bar */
 .site-footer__bottom {
     border-top: 1px solid var(--clr-glass-border);
@@ -525,6 +566,21 @@
     margin: 0;
 }
 
+.site-footer__legal {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem 1.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.site-footer__legal a {
+    color: var(--clr-text-muted);
+    text-decoration: none;
+    transition: color var(--transition);
+}
+
 /* Verbände-Zeile bleibt ab Tablet-Breite einzeilig (wrappt als Ganzes in die nächste Reihe) */
 @media (min-width: 768px) {
     .site-footer__memberships {

public/assets/css/tokens.css

@@ -30,6 +30,7 @@
     --fs-500: 1.125rem;                                /* 18px Navigation      */
     --fs-600: 1.3125rem;                               /* 21px Body            */
     --fs-650: 1.75rem;                                 /* 28px Zwischengröße (z.B. Footer-Headings) */
+    --fs-675: 2.125rem;                                /* 34px Header-Wortmarke */
     --fs-700: clamp(2rem, 1.2rem + 3.5vw, 3.125rem);   /* 50px h3              */
     --fs-800: clamp(2.25rem, 1.3rem + 4.5vw, 3.75rem); /* 60px h2              */
     --fs-900: clamp(3rem, 1.75rem + 5.5vw, 6rem);        /* 96px h1            */
@@ -38,6 +39,14 @@
     --fw-regular: 400;
     --fw-bold: 700;
 
+    /* --- Buttons --- */
+    --btn-font:     1rem;            /* 16px – Default (moderat) */
+    --btn-font-sm:  var(--fs-300);   /* 13px – dezente Buttons */
+    --btn-font-lg:  var(--fs-500);   /* 18px – Hero-CTAs */
+    --btn-pad-y:    0.625em;         /* skaliert mit font-size */
+    --btn-pad-x:    1.25em;
+    --btn-line:     1.2;
+
     /* --- Form & Tiefe --- */
     --radius-btn:  8px;
     --radius-card: 15px;
@@ -49,7 +58,7 @@
     --container-pad: 1rem;
     --space-section: 5rem;
     --header-h: 60px;
-    --logo-h: 97px;
+    --logo-h: 72px;
 
     /* --- Bewegung --- */
     --transition: 300ms ease;

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;