fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Neue Seiten: Mitglied/Partner werden, Sportheimbuchung & Ansprechpartner

Browse Source 
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
This commit is contained in:
Felix Schneider
2026-06-19 11:16:10 +02:00
parent 185365dc79
commit 4b78285698
31 changed files with 977 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
public/assets/css/components.css
View File

@@ -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;

86
public/assets/css/layout.css
View File

@@ -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 {

11
public/assets/css/tokens.css
View File

@@ -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;

31
public/assets/css/utilities.css
View File

@@ -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;

BIN
public/assets/downloads/beitrittserklaerung-turnen.pdf Normal file
View File

Binary file not shown.

2
public/assets/icons/check-circle.svg Normal file
View File

@@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 296 B

2
public/assets/icons/download.svg Normal file
View File

@@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 353 B

2
public/assets/icons/file-earmark-text.svg Normal file
View File

@@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/>
<path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 390 B

1
public/assets/icons/whatsapp.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB