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

Neubau Fundament + Startseite: Designsystem, PHP-Komponenten, Brevo-Formular, Instagram-Sync

Browse Source 
- Ordnerstruktur mit public/-Docroot, Deny-.htaccess für app/bin/config/data/storage
- CLAUDE.md mit Leitplanken (self-hosted only, Single Source of Truth, Component-first)
- Design-Tokens aus alter Seite extrahiert (Akzent #e20612, Coolvetica/Abel als woff2)
- Front Controller mit Routen-Register, Sitemap, Canonical, JSON-LD (SportsClub)
- Startseite: Hero, Instagram-Feed (lokaler Cache), Historie/Sportheim, Stats, Partner, Kontakt
- Kontaktformular via PHPMailer/Brevo mit Honeypot + HMAC-Time-Trap (kein reCAPTCHA)
- bin/instagram-sync.php: Scraper mit Strategie-Kette, flock, atomarem Cache, lokalen Bildern

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-06-11 21:16:25 +02:00
commit 0f19729a88
70 changed files with 2548 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
public/assets/css/base.css Normal file
View File

@@ -0,0 +1,106 @@
/* ============================================================
BASE — Fonts, Typografie, Links, Fokus, Skip-Link
============================================================ */
@font-face {
font-family: 'Coolvetica';
src: url('../fonts/coolvetica.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Abel';
src: url('../fonts/abel.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: var(--ff-body);
font-size: var(--fs-600);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
color: var(--clr-text);
background-color: var(--clr-bg);
background-image: url('../img/background.jpg');
background-size: 100% auto;
background-attachment: fixed;
}
@media (max-width: 768px) {
body {
/* fixed-Attachment ruckelt auf Mobile */
background-attachment: scroll;
background-size: auto;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--ff-heading);
font-weight: var(--fw-regular);
line-height: var(--lh-heading);
text-transform: uppercase;
text-wrap: balance;
}
h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); }
h4 { font-size: 1.625rem; }
h5,
h6 { font-size: var(--fs-600); }
p {
max-width: 70ch;
}
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
a:hover {
color: var(--clr-text-muted);
}
:focus-visible {
outline: 2px solid var(--clr-text);
outline-offset: 3px;
border-radius: 2px;
}
::selection {
background: var(--clr-accent);
color: var(--clr-text);
}
.skip-link {
position: absolute;
top: -100%;
left: 1rem;
z-index: 100;
padding: 0.75em 1.25em;
background: var(--clr-accent);
color: var(--clr-text);
text-decoration: none;
border-radius: 0 0 var(--radius-btn) var(--radius-btn);
}
.skip-link:focus-visible {
top: 0;
color: var(--clr-text);
}
/* Scrollbar dezent dunkel */
html {
scrollbar-width: thin;
scrollbar-color: var(--clr-bg-corporate) transparent;
}

341
public/assets/css/components.css Normal file
View File

@@ -0,0 +1,341 @@
/* ============================================================
COMPONENTS — eine Sektion pro Komponente, Banner-Kommentare
============================================================ */
/* === hero === */
.hero {
position: relative;
display: grid;
align-items: end;
min-height: min(92vh, 900px);
padding-block: calc(var(--header-h) + 80px) var(--space-section);
overflow: hidden;
}
.hero__media {
position: absolute;
inset: 0;
z-index: -1;
}
.hero__img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Dunkler Verlauf wie auf der alten Seite: oben transparent → unten Seitenhintergrund */
.hero__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgb(20 20 20 / 0.25) 0%, rgb(20 20 20 / 0.55) 55%, var(--clr-bg) 100%);
}
.hero__content {
width: 100%;
}
.hero__title {
text-shadow: 0 2px 24px rgb(0 0 0 / 0.5);
}
.hero__text {
margin-top: 1rem;
max-width: 60ch;
text-shadow: 0 1px 12px rgb(0 0 0 / 0.6);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
}
/* === instagram === */
.instagram__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-top: 2rem;
}
@media (max-width: 600px) {
.instagram__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
}
.instagram__link {
position: relative;
display: block;
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.instagram__link img {
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
transition: transform var(--transition);
}
.instagram__link:hover img,
.instagram__link:focus-visible img {
transform: scale(1.05);
}
.instagram__badge {
position: absolute;
top: 0.75rem;
right: 0.75rem;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
background: rgb(0 0 0 / 0.6);
border-radius: 50%;
font-size: 0.8rem;
color: var(--clr-text);
}
.instagram__fallback {
margin-top: 1.5rem;
padding: 2.5rem;
background: var(--clr-glass-bg);
border: 1px solid var(--clr-glass-border);
border-radius: var(--radius-card);
text-align: center;
}
.instagram__fallback p {
margin-inline: auto;
}
.instagram__fallback .btn {
margin-top: 1rem;
}
/* === split (Bild/Text-Sektion) === */
.split__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 3rem;
}
.split--flip .split__text {
order: 2;
}
.split--flip .split__media {
order: 1;
}
.split__text p {
margin-top: 1rem;
}
.split__cta {
margin-top: 1.5rem;
}
.split__img {
width: 100%;
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
@media (max-width: 992px) {
.split__inner {
grid-template-columns: 1fr;
gap: 2rem;
}
.split--flip .split__text {
order: 0;
}
.split--flip .split__media {
order: 0;
}
}
/* === stats === */
.stats {
background: var(--clr-bg-deep);
}
.stats__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
text-align: center;
}
@media (max-width: 600px) {
.stats__list {
grid-template-columns: 1fr;
}
}
.stats__item {
display: grid;
gap: 0.25rem;
}
.stats__value {
font-family: var(--ff-heading);
font-size: var(--fs-800);
line-height: var(--lh-heading);
color: var(--clr-accent);
text-shadow: 0 0 30px rgb(var(--clr-accent-rgb) / 0.35);
}
.stats__label {
font-size: var(--fs-500);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--clr-text-muted);
}
/* === partners === */
.partners__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
justify-content: center;
align-items: center;
gap: 2rem;
margin-block: 2.5rem;
}
.partners__item {
display: grid;
place-items: center;
padding: 1.5rem;
/* Dunkles Glas — die Partner-Logos sind weiße Varianten */
background: var(--clr-glass-bg);
border: 1px solid var(--clr-glass-border);
border-radius: var(--radius-card);
min-height: 120px;
}
.partners__item img {
max-height: 80px;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* === contact form === */
.contact__inner {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: 3rem;
align-items: start;
}
@media (max-width: 992px) {
.contact__inner {
grid-template-columns: 1fr;
}
}
.contact__intro p {
margin-top: 1rem;
}
.form {
display: grid;
gap: 1.25rem;
padding: 2rem;
background: var(--clr-glass-bg);
border: 1px solid var(--clr-glass-border);
border-radius: var(--radius-card);
}
.form__row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1.25rem;
}
@media (max-width: 600px) {
.form__row {
grid-template-columns: 1fr;
}
}
.form__field {
display: grid;
gap: 0.4rem;
}
.form__field label {
font-size: var(--fs-500);
}
.form__field input,
.form__field select,
.form__field textarea {
width: 100%;
padding: 10px 12px;
background: var(--clr-glass-bg);
border: 1px solid var(--clr-glass-border);
border-radius: var(--radius-btn);
color: var(--clr-text);
}
.form__field select option {
background: var(--clr-bg);
color: var(--clr-text);
}
.form__field textarea {
resize: vertical;
min-height: 8rem;
}
.form__field--checkbox {
grid-template-columns: auto 1fr;
align-items: start;
gap: 0.6rem;
}
.form__field--checkbox input {
width: 1.25rem;
height: 1.25rem;
margin-top: 0.2rem;
accent-color: var(--clr-accent);
}
.form__field--checkbox label {
font-size: var(--fs-400);
color: var(--clr-text-muted);
}
.form__status:empty {
display: none;
}
.form__success {
padding: 0.75rem 1rem;
border: 1px solid var(--clr-success);
border-radius: var(--radius-btn);
color: var(--clr-success);
}
.form__error {
padding: 0.75rem 1rem;
border: 1px solid var(--clr-error);
border-radius: var(--radius-btn);
color: var(--clr-error);
}
.form__submit {
margin: 0;
}

218
public/assets/css/layout.css Normal file
View File

@@ -0,0 +1,218 @@
/* ============================================================
LAYOUT — Container, Header, Navigation, Footer, Sektionen
============================================================ */
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.section {
padding-block: var(--space-section);
}
.section--center {
text-align: center;
}
.section--center p {
margin-inline: auto;
}
/* --- Header --- */
.site-header {
position: absolute;
inset: 20px 0 auto 0;
z-index: 10;
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: var(--header-h);
}
.site-header__brand {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: var(--clr-text);
}
.site-header__logo {
height: var(--logo-h);
width: auto;
filter: drop-shadow(var(--shadow));
}
.site-header__name {
font-family: var(--ff-heading);
font-size: var(--fs-500);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* --- Navigation --- */
.site-nav__toggle {
display: none;
}
.site-nav__list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
font-size: var(--fs-500);
}
.site-nav__list a:not(.btn) {
color: var(--clr-text);
text-decoration: none;
padding-block: 0.25em;
border-bottom: 2px solid transparent;
transition: border-color var(--transition);
}
.site-nav__list a:not(.btn):hover,
.site-nav__list a:not(.btn)[aria-current="page"] {
border-bottom-color: var(--clr-accent);
}
@media (max-width: 1249px) {
.site-nav__toggle {
display: grid;
place-items: center;
width: 48px;
height: 48px;
background: transparent;
border: 0;
cursor: pointer;
}
/* Burger: Mittelbalken + Pseudo-Balken, animiert zum X */
.site-nav__toggle-bar,
.site-nav__toggle-bar::before,
.site-nav__toggle-bar::after {
display: block;
width: 28px;
height: 3px;
background: var(--clr-text);
border-radius: 2px;
transition: transform var(--transition), opacity var(--transition);
}
.site-nav__toggle-bar {
position: relative;
}
.site-nav__toggle-bar::before,
.site-nav__toggle-bar::after {
content: '';
position: absolute;
left: 0;
}
.site-nav__toggle-bar::before { top: -9px; }
.site-nav__toggle-bar::after { top: 9px; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar {
background: transparent;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar::before {
transform: translateY(9px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar::after {
transform: translateY(-9px) rotate(-45deg);
}
.site-nav__list {
position: fixed;
inset: 0;
z-index: 20;
flex-direction: column;
justify-content: center;
gap: 1.75rem;
background: rgb(0 0 0 / 0.91);
font-size: var(--fs-700);
visibility: hidden;
opacity: 0;
transition: opacity var(--transition), visibility var(--transition);
}
.site-nav__list a:not(.btn) {
font-family: var(--ff-heading);
text-transform: uppercase;
}
body.nav-open .site-nav__list {
visibility: visible;
opacity: 1;
}
body.nav-open {
overflow: hidden;
}
/* Toggle über dem Overlay halten */
.site-nav__toggle {
position: relative;
z-index: 30;
}
}
/* --- Footer --- */
.site-footer {
margin-top: var(--space-section);
padding: 70px 0 25px;
background: var(--clr-bg-footer);
font-size: var(--fs-400);
}
.site-footer__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
@media (max-width: 768px) {
.site-footer__grid {
grid-template-columns: 1fr;
}
}
.site-footer__heading {
font-size: var(--fs-600);
margin-bottom: 0.75rem;
}
.site-footer__address {
font-style: normal;
color: var(--clr-text-muted);
}
.site-footer__list {
display: grid;
gap: 0.4rem;
}
.site-footer__list a,
.site-footer__address a {
color: var(--clr-text-muted);
}
.site-footer__list a:hover,
.site-footer__address a:hover {
color: var(--clr-text);
}
.site-footer__copyright {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--clr-glass-border);
color: var(--clr-text-faint);
}

66
public/assets/css/reset.css Normal file
View File

@@ -0,0 +1,66 @@
/* ============================================================
RESET — moderner Minimal-Reset + reduced-motion Kill-Switch
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
min-height: 100vh;
}
img,
picture,
video,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
ul[class],
ol[class] {
list-style: none;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/* Sektion-Anker landen nicht unter dem Header */
[id] {
scroll-margin-top: calc(var(--header-h) + 60px);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

58
public/assets/css/tokens.css Normal file
View File

@@ -0,0 +1,58 @@
/* ============================================================
DESIGN-TOKENS — EINZIGE Quelle für Farben, Typo, Spacing etc.
Werte extrahiert und verifiziert aus der alten Seite
(CSS bc-style + DB main_layout). Siehe CLAUDE.md.
============================================================ */
:root {
/* --- Farben --- */
--clr-accent: #e20612; /* Marken-Rot (alte DB: primary_accent) */
--clr-accent-dark: #b00510; /* Hover/Active auf Rot */
--clr-accent-rgb: 226 6 18; /* für rgb(var(--clr-accent-rgb) / α) */
--clr-bg: #222222; /* Grund-Hintergrund (mit Textur) */
--clr-bg-deep: #161616; /* abgesetzte Sektionen */
--clr-bg-footer: #000000;
--clr-bg-corporate: #383838;
--clr-bg-light: #f5f5f5;
--clr-text: #ffffff;
--clr-text-muted: #b3b3b3; /* 7.7:1 auf --clr-bg */
--clr-text-faint: #8c8c8c; /* 4.5:1 auf --clr-bg (AA) */
--clr-glass-bg: rgb(255 255 255 / 0.11);
--clr-glass-border: rgb(255 255 255 / 0.22);
--clr-error: #ff8a8a; /* Formularfehler, lesbar auf dunkel */
--clr-success: #8ce99a;
/* --- Typografie --- */
--ff-heading: 'Coolvetica', 'Arial Narrow', system-ui, sans-serif;
--ff-body: 'Abel', 'Helvetica Neue', system-ui, sans-serif;
--fs-300: 0.8125rem; /* 13px Buttons klein */
--fs-400: 0.9375rem; /* 15px Footer, Meta */
--fs-500: 1.125rem; /* 18px Navigation */
--fs-600: 1.3125rem; /* 21px Body */
--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(2.625rem, 1.4rem + 5.5vw, 4.375rem); /* 70px h1 */
--lh-heading: 0.9;
--lh-body: 1.5;
--fw-regular: 400;
--fw-bold: 700;
/* --- Form & Tiefe --- */
--radius-btn: 8px;
--radius-card: 15px;
--shadow: 0 0 14px rgb(0 0 0 / 0.15);
--shadow-card: 0 7px 29px rgb(0 0 0 / 0.33);
/* --- Layout --- */
--container-max: 1200px;
--container-pad: 1rem;
--space-section: 5rem;
--header-h: 60px;
--logo-h: 97px;
/* --- Bewegung --- */
--transition: 300ms ease;
}
/* Breakpoints (Referenz — Custom Properties funktionieren nicht in Media Queries,
Werte müssen in den CSS-Dateien synchron gehalten werden):
1249px Burger-Menü | 1024px | 992px | 768px | 600px | 500px */

52
public/assets/css/utilities.css Normal file
View File

@@ -0,0 +1,52 @@
/* ============================================================
UTILITIES — Buttons, visually-hidden, kleine Helfer
============================================================ */
.btn {
display: inline-block;
padding: 10px 18px;
background: var(--clr-accent);
color: var(--clr-text);
font-size: var(--fs-500);
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);
}
.btn:hover {
background: var(--clr-accent-dark);
border-color: var(--clr-accent-dark);
color: var(--clr-text);
}
.btn--outline {
background: transparent;
border-color: var(--clr-text);
}
.btn--outline:hover {
background: var(--clr-glass-bg);
border-color: var(--clr-text);
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.text-center {
text-align: center;
}
.text-muted {
color: var(--clr-text-muted);
}

BIN
public/assets/fonts/abel.woff2 Normal file
View File

Binary file not shown.

BIN
public/assets/fonts/coolvetica.woff2 Normal file
View File

Binary file not shown.

BIN
public/assets/img/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
public/assets/img/hero/hero-1000.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

BIN
public/assets/img/hero/hero-1600.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 299 KiB

BIN
public/assets/img/hero/hero-640.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

0
public/assets/img/instagram/.gitkeep Normal file
View File

30
public/assets/img/logo.svg Normal file
View File

@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="150mm" height="194mm" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 150 194">
<defs>
<style type="text/css">
<![CDATA[
.fil3 {fill:black}
.fil2 {fill:red}
.fil1 {fill:white}
.fil0 {fill:black;fill-rule:nonzero}
]]>
</style>
</defs>
<g id="Ebene_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_167224168">
<path id="_167474240" class="fil0" d="M23.1558 19.1779c1.089,0 1.9737,0.5516 2.6474,1.6517 0.6738,1.1 1.0091,3.0258 1.0091,5.7775 0,2.7417 -0.3353,4.6641 -1.0091,5.7642 -0.6737,1.1034 -1.5552,1.6517 -2.6378,1.6517 -1.0921,0 -1.9768,-0.5449 -2.6506,-1.6348 -0.6738,-1.0898 -1.0091,-3.0293 -1.0091,-5.8115 0,-2.7314 0.3353,-4.6471 1.0091,-5.7471 0.6738,-1.1001 1.5552,-1.6517 2.641,-1.6517zm0 2.3117c-1.6919,0 -1.3955,4.2952 -1.3955,5.1175 0,0.8223 -0.2973,5.1076 1.3955,5.1076 1.6957,0 1.3924,-4.2803 1.3924,-5.1076 0,-0.8271 0.305,-5.1175 -1.3924,-5.1175zm6.9491 4.4441c-1.1338,-0.6227 -1.6,-1.7542 -1.6,-3.0057 0,-2.0696 1.1984,-3.7501 3.3883,-3.7501 2.1621,0 3.3659,1.6833 3.3659,3.7299 0,1.2051 -0.46,2.4086 -1.552,3.0259 1.398,0.715 1.9193,2.0948 1.9193,3.5979 0,2.2221 -1.2159,4.5016 -3.6502,4.5016 -2.4764,0 -3.7523,-2.1539 -3.7523,-4.4136 0,-1.4738 0.5233,-2.9474 1.881,-3.6859zm0.4407 -2.806c0,0.8326 0.3661,1.7635 1.338,1.7635 0.9742,0 1.3541,-0.923 1.3541,-1.7635 0,-0.8177 -0.3778,-1.7363 -1.3285,-1.7363 -0.9608,0 -1.3636,0.8967 -1.3636,1.7363zm-0.198 6.2245c0,0.9633 0.3646,2.4404 1.5903,2.4404 1.2359,0 1.5457,-1.4577 1.5457,-2.4202 0,-0.9502 -0.4133,-2.2507 -1.5744,-2.2507 -1.1375,0 -1.5616,1.299 -1.5616,2.2305zm11.5061 4.4237l0 -14.5371 2.2642 0 0 6.4545 4.5954 -6.4545 3.0593 0 -4.2377 5.6625 4.4612 8.8746 -2.9379 0 -3.0976 -6.8235 -1.8427 2.4303 0 4.3932 -2.2642 0zm11.2953 -14.5371l2.2642 0 0 7.8727c0,1.7451 -0.1758,4.4035 2.2897,4.4035 2.361,0 2.1429,-2.5424 2.1429,-4.2343l0 -8.0419 2.2736 0 0 7.6358c0,3.3026 -0.0452,7.1484 -4.3494,7.1484 -4.3563,0 -4.621,-3.4858 -4.621,-7.0299l0 -7.7543zm11.423 14.5371l0 -14.4187 2.2642 0 0 11.9683 5.6492 0 0 2.4504 -7.9134 0zm9.5071 0l0 -14.5371 3.3946 0 2.0406 9.917 2.0215 -9.917 3.4043 0 0 14.5371 -2.1045 0 0 -11.4436 -2.2355 11.4436 -2.1907 0 -2.2163 -11.4436 0 11.4436 -2.114 0zm13.1156 -14.5371l4.5028 0c1.2263,0 2.0918,0.1184 2.5899,0.3587 1.2018,0.5714 1.7789,2.0417 1.7789,3.3001 0,1.1974 -0.5004,2.5268 -1.5809,3.1545 1.4794,0.5549 2.1333,2.0081 2.1333,3.5099 0,1.571 -0.7273,3.5873 -2.4239,4.0346 -0.4566,0.1184 -1.5136,0.1793 -3.1711,0.1793l-3.829 0 0 -14.5371zm2.2642 2.42l0 3.3609c1.0234,0 2.1598,0.108 3.1648,-0.0507 0.8617,-0.1434 1.2327,-0.8463 1.2327,-1.6653 0,-0.6164 -0.241,-1.3671 -0.9102,-1.5467 -0.2523,-0.0643 -0.9772,-0.0982 -2.1748,-0.0982l-1.3125 0zm0 5.781l0 3.8857 2.1077 0c0.923,0 1.5137,-0.0508 1.7756,-0.1524 0.6879,-0.2667 0.9261,-1.0814 0.9261,-1.7499 0,-0.7472 -0.2848,-1.5327 -1.0411,-1.8108 -1.0519,-0.3827 -2.6392,-0.1726 -3.7683,-0.1726zm19.2183 6.3361l-2.4686 0 -0.9836 -3.3034 -4.49 0 -0.9261 3.3034 -2.4142 0 4.3782 -14.5371 2.4047 0 4.4996 14.5371zm-4.1802 -5.7505l-1.5457 -5.3952 -1.5233 5.3952 3.069 0zm12.5821 0.4061l2.2004 0.9004c-0.5251,2.4791 -1.8553,4.6911 -4.6592,4.6911 -3.8583,0 -5.1383,-4.2104 -5.1383,-7.3853 0,-3.3303 1.2233,-7.646 5.2788,-7.646 2.5922,0 3.981,1.9434 4.49,4.2545l-2.245 0.6939c-0.2243,-1.2308 -0.9778,-2.4404 -2.3664,-2.4404 -2.4907,0 -2.8166,3.1176 -2.8166,4.9484 0,1.7985 0.2552,5.0669 2.7592,5.0669 1.6341,0 2.2592,-1.7542 2.4971,-3.0835zm4.1452 5.3444l0 -14.5371 2.2642 0 0 5.72 4.4548 0 0 -5.72 2.2738 0 0 14.5371 -2.2738 0 0 -6.3564 -4.4548 0 0 6.3564 -2.2642 0z"/>
<path id="_167474168" class="fil1" d="M13.9297 13.9292l122.141 0 0 25.6694 -122.141 0 0 -25.6694zm9.2261 5.2487c1.089,0 1.9737,0.5516 2.6474,1.6517 0.6738,1.1 1.0091,3.0258 1.0091,5.7775 0,2.7417 -0.3353,4.6641 -1.0091,5.7642 -0.6737,1.1034 -1.5552,1.6517 -2.6378,1.6517 -1.0921,0 -1.9768,-0.5449 -2.6506,-1.6348 -0.6738,-1.0898 -1.0091,-3.0293 -1.0091,-5.8115 0,-2.7314 0.3353,-4.6471 1.0091,-5.7471 0.6738,-1.1001 1.5552,-1.6517 2.641,-1.6517zm0 2.3117c-1.6919,0 -1.3955,4.2952 -1.3955,5.1175 0,0.8223 -0.2973,5.1076 1.3955,5.1076 1.6957,0 1.3924,-4.2803 1.3924,-5.1076 0,-0.8271 0.305,-5.1175 -1.3924,-5.1175zm6.9491 4.4441c-1.1338,-0.6227 -1.6,-1.7542 -1.6,-3.0057 0,-2.0696 1.1984,-3.7501 3.3883,-3.7501 2.1621,0 3.3659,1.6833 3.3659,3.7299 0,1.2051 -0.46,2.4086 -1.552,3.0259 1.398,0.715 1.9193,2.0948 1.9193,3.5979 0,2.2221 -1.2159,4.5016 -3.6502,4.5016 -2.4764,0 -3.7523,-2.1539 -3.7523,-4.4136 0,-1.4738 0.5233,-2.9474 1.881,-3.6859zm0.4407 -2.806c0,0.8326 0.3661,1.7635 1.338,1.7635 0.9742,0 1.3541,-0.923 1.3541,-1.7635 0,-0.8177 -0.3778,-1.7363 -1.3285,-1.7363 -0.9608,0 -1.3636,0.8967 -1.3636,1.7363zm-0.198 6.2245c0,0.9633 0.3646,2.4404 1.5903,2.4404 1.2359,0 1.5457,-1.4577 1.5457,-2.4202 0,-0.9502 -0.4133,-2.2507 -1.5744,-2.2507 -1.1375,0 -1.5616,1.299 -1.5616,2.2305zm11.5061 4.4237l0 -14.5371 2.2642 0 0 6.4545 4.5954 -6.4545 3.0593 0 -4.2377 5.6625 4.4612 8.8746 -2.9379 0 -3.0976 -6.8235 -1.8427 2.4303 0 4.3932 -2.2642 0zm11.2953 -14.5371l2.2642 0 0 7.8727c0,1.7451 -0.1758,4.4035 2.2897,4.4035 2.361,0 2.1429,-2.5424 2.1429,-4.2343l0 -8.0419 2.2736 0 0 7.6358c0,3.3026 -0.0452,7.1484 -4.3494,7.1484 -4.3563,0 -4.621,-3.4858 -4.621,-7.0299l0 -7.7543zm11.423 14.5371l0 -14.4187 2.2642 0 0 11.9683 5.6492 0 0 2.4504 -7.9134 0zm9.5071 0l0 -14.5371 3.3946 0 2.0406 9.917 2.0215 -9.917 3.4043 0 0 14.5371 -2.1045 0 0 -11.4436 -2.2355 11.4436 -2.1907 0 -2.2163 -11.4436 0 11.4436 -2.114 0zm13.1156 -14.5371l4.5028 0c1.2263,0 2.0918,0.1184 2.5899,0.3587 1.2018,0.5714 1.7789,2.0417 1.7789,3.3001 0,1.1974 -0.5004,2.5268 -1.5809,3.1545 1.4794,0.5549 2.1333,2.0081 2.1333,3.5099 0,1.571 -0.7273,3.5873 -2.4239,4.0346 -0.4566,0.1184 -1.5136,0.1793 -3.1711,0.1793l-3.829 0 0 -14.5371zm2.2642 2.42l0 3.3609c1.0234,0 2.1598,0.108 3.1648,-0.0507 0.8617,-0.1434 1.2327,-0.8463 1.2327,-1.6653 0,-0.6164 -0.241,-1.3671 -0.9102,-1.5467 -0.2523,-0.0643 -0.9772,-0.0982 -2.1748,-0.0982l-1.3125 0zm0 5.781l0 3.8857 2.1077 0c0.923,0 1.5137,-0.0508 1.7756,-0.1524 0.6879,-0.2667 0.9261,-1.0814 0.9261,-1.7499 0,-0.7472 -0.2848,-1.5327 -1.0411,-1.8108 -1.0519,-0.3827 -2.6392,-0.1726 -3.7683,-0.1726zm19.2183 6.3361l-2.4686 0 -0.9836 -3.3034 -4.49 0 -0.9261 3.3034 -2.4142 0 4.3782 -14.5371 2.4047 0 4.4996 14.5371zm-4.1802 -5.7505l-1.5457 -5.3952 -1.5233 5.3952 3.069 0zm12.5821 0.4061l2.2004 0.9004c-0.5251,2.4791 -1.8553,4.6911 -4.6592,4.6911 -3.8583,0 -5.1383,-4.2104 -5.1383,-7.3853 0,-3.3303 1.2233,-7.646 5.2788,-7.646 2.5922,0 3.981,1.9434 4.49,4.2545l-2.245 0.6939c-0.2243,-1.2308 -0.9778,-2.4404 -2.3664,-2.4404 -2.4907,0 -2.8166,3.1176 -2.8166,4.9484 0,1.7985 0.2552,5.0669 2.7592,5.0669 1.6341,0 2.2592,-1.7542 2.4971,-3.0835zm4.1452 5.3444l0 -14.5371 2.2642 0 0 5.72 4.4548 0 0 -5.72 2.2738 0 0 14.5371 -2.2738 0 0 -6.3564 -4.4548 0 0 6.3564 -2.2642 0z"/>
<path id="_167474096" class="fil2" d="M13.9297 43.5278l122.141 0 0 76.9075c0,32.7997 -26.4097,59.6355 -58.6886,59.6355l-4.7634 0c-32.2789,0 -58.6886,-26.8358 -58.6886,-59.6355l0 -76.9075z"/>
<path id="_167474024" class="fil3" d="M66.4036 121.944l0 -7.2161 3.9298 0 0 7.2161 -3.9298 0zm0 -24.4065l0 -6.8761 3.9298 0 0 6.8761 -3.9298 0zm0 -24.0665l0 -7.8585 -29.865 0c0,-5.7301 0,-11.4603 0,-17.1904l76.9228 0c0,5.7301 0,11.4603 0,17.1904l-29.865 0 0 7.8585 -3.9298 0 0 -11.7877 29.8649 0 0 -9.3319 -69.063 0 0 9.3319 29.8649 0 0 11.7877 -3.9298 0zm17.1928 17.1904l0 6.8761 -3.9298 0 0 -6.8761 3.9298 0zm0 24.0665l0 7.2161 -3.9298 0 0 -7.2161 3.9298 0z"/>
<path id="_167473952" class="fil1" d="M40.4685 61.6829l29.8649 0 0 11.7877 9.3332 0 0 -11.7877 29.8649 0 0 -9.3319 -69.063 0 0 9.3319zm29.8649 28.9781l0 6.8761 9.3332 0 0 -6.8761 -9.3332 0zm0 24.0665l0 7.2161 9.3332 0 0 -7.2161 -9.3332 0z"/>
<path id="_167473880" class="fil3" d="M36.5391 73.4706c25.6409,0 51.2819,0 76.9228,0 0,5.7301 0,11.4603 0,17.1904l-59.5718 0 0 6.8761 59.5718 0 0 30.7212c-1.3099,0 -2.6195,0 -3.9294,0l0 -26.7919 -59.5722 -0.0001 0 -14.7346 59.5722 0 0 -9.3319 -68.9054 0 0 33.3985 59.7299 0.0001c0,5.0248 0,10.0497 0,15.0745l-59.8885 0 0 2.3854c-1.2568,0 -2.6725,0 -3.9294,0l0 -6.3147 59.8881 0 0 -7.2161 -59.8881 0 0 -41.2569zm77.0809 58.4224l0 7.241 -4.1811 0 4.1811 -7.241zm-21.8781 7.241l-32.5917 0 -2.4556 -3.9292 37.3161 0 -2.2688 3.9292zm-50.6639 0l-4.6981 0 0 -7.5176 4.6981 7.5176z"/>
<path id="_167473808" class="fil1" d="M49.9603 86.7316l59.5712 0.0001 0 -9.3319 -69.063 0 0 0.0001 -0.0001 0 0.0001 33.3984 59.7299 0 0 15.0746 -59.7299 0 0 2.3854c4.0145,0 7.8704,0 11.8848,0l4.3413 6.9465 37.3161 0 4.0112 -6.9465 11.5097 0 -0.0001 -26.7919 -59.5712 -0.0001 0 -14.7347z"/>
<path id="_167473736" class="fil3" d="M10 10.0001l130 0 0 111.544c0,34.351 -28.1092,62.4562 -62.465,62.4562l-5.07 0c-34.3558,0 -62.465,-28.1052 -62.465,-62.4562 0,-37.1811 0,-74.3625 0,-111.544zm105.719 118.258l-29.5021 51.1322c28.1264,-4.3629 49.8536,-29.2053 49.8536,-58.9552l0 -76.9075 -122.141 0 0 76.9075c0,30.6652 23.0848,56.115 52.4676,59.2976l-32.1161 -51.4746c6.0239,0 12.0482,0 18.0721,0l23.7368 37.9814 21.9318 -37.9814c5.8989,0 11.798,0 17.6969,0zm-34.351 51.6709l27.5446 -47.7417 -8.6219 0c-8.0222,13.8933 -16.0449,27.7867 -24.0671,41.6799l-26.0482 -41.6799 -0.0001 0 -8.8044 0 29.8602 47.8652c0.4613,0.0111 0.9236,0.0181 1.3874,0.0181l4.7634 0c1.3397,0 2.6682,-0.0505 3.9861,-0.1416zm-67.4381 -140.331l122.141 0 0 -25.6694 -122.141 0 0 25.6694z"/>
<path id="_167473664" class="fil1" d="M41.3707 132.188l8.8044 0 26.0483 41.6799 24.0671 -41.6799 8.6219 0 -27.5446 47.7417c-1.3179,0.0911 -2.6464,0.1416 -3.9861,0.1416l-4.7634 0c-0.4638,0 -0.9261,-0.007 -1.3874,-0.0181l-29.8602 -47.8652z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
public/assets/img/og-default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
public/assets/img/pages/sportheim-1000.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
public/assets/img/pages/sportheim-640.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
public/assets/img/pages/verein-1000.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
public/assets/img/pages/verein-640.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
public/assets/img/pages/vereinshistorie-519.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
public/assets/img/partners/aoa.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
public/assets/img/partners/downstairs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/assets/img/partners/horn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
public/assets/img/partners/kulmbacher.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
public/assets/img/partners/rist.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

62
public/assets/js/form.js Normal file
View File

@@ -0,0 +1,62 @@
/* Kontaktformular: Progressive Enhancement — ohne JS normales POST + Redirect.
Mit JS: fetch-Submit, Status in aria-live-Region, Button-Sperre während des Sendens. */
(function () {
'use strict';
var form = document.querySelector('.form');
if (!form || !window.fetch) {
return;
}
var status = form.querySelector('[data-form-status]');
var button = form.querySelector('button[type="submit"]');
var MESSAGES = {
success: 'Danke für deine Anfrage! Wir melden uns so schnell wie möglich bei dir.',
validation: 'Bitte prüfe deine Eingaben – Pflichtfelder fehlen oder die E-Mail-Adresse ist ungültig.',
mail: 'Deine Nachricht konnte gerade nicht versendet werden. Bitte versuche es später erneut.'
};
function show(type, text) {
var p = document.createElement('p');
p.className = type === 'success' ? 'form__success' : 'form__error';
p.textContent = text;
status.replaceChildren(p);
status.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
}
form.addEventListener('submit', function (event) {
// Native Validierung zuerst (novalidate ist gesetzt, daher manuell).
if (!form.checkValidity()) {
event.preventDefault();
form.reportValidity();
return;
}
event.preventDefault();
button.disabled = true;
button.textContent = 'Wird gesendet …';
fetch(form.action, {
method: 'POST',
body: new FormData(form),
headers: { Accept: 'application/json' }
})
.then(function (response) { return response.json(); })
.then(function (data) {
if (data.ok) {
show('success', MESSAGES.success);
form.reset();
} else {
show('error', MESSAGES[data.error] || MESSAGES.mail);
}
})
.catch(function () {
show('error', MESSAGES.mail);
})
.finally(function () {
button.disabled = false;
button.textContent = 'Nachricht senden';
});
});
})();

40
public/assets/js/nav.js Normal file
View File

@@ -0,0 +1,40 @@
/* Burger-Navigation: Toggle mit aria-expanded, Escape schließt, Klick auf Link schließt. */
(function () {
'use strict';
var toggle = document.querySelector('.site-nav__toggle');
var list = document.getElementById('site-nav-list');
if (!toggle || !list) {
return;
}
function setOpen(open) {
toggle.setAttribute('aria-expanded', String(open));
document.body.classList.toggle('nav-open', open);
toggle.querySelector('.visually-hidden').textContent = open ? 'Menü schließen' : 'Menü öffnen';
}
toggle.addEventListener('click', function () {
setOpen(toggle.getAttribute('aria-expanded') !== 'true');
});
list.addEventListener('click', function (event) {
if (event.target.closest('a')) {
setOpen(false);
}
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape' && toggle.getAttribute('aria-expanded') === 'true') {
setOpen(false);
toggle.focus();
}
});
// Beim Vergrößern auf Desktop offenes Overlay zurücksetzen.
window.addEventListener('resize', function () {
if (window.innerWidth > 1249 && toggle.getAttribute('aria-expanded') === 'true') {
setOpen(false);
}
});
})();