/* =========================================================
SELF-HOSTED FONTS: Inter (lokal, kein Google-Server-Kontakt)
---------------------------------------------------------
Dateipfade: assets/fonts/inter/*.woff2
Download: node download-fonts.js (einmalig ausführen)
Lizenzen: Inter — SIL Open Font License 1.1 (OFL)
https://rsms.me/inter/
========================================================= */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../assets/fonts/inter/Inter-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../assets/fonts/inter/Inter-Italic.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../assets/fonts/inter/Inter-Medium.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../assets/fonts/inter/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../assets/fonts/inter/Inter-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../assets/fonts/inter/Inter-ExtraBold.woff2") format("woff2");
}
/* =============================================================
COMMIT: fix(color): Farb- und Identitäts-Fixes
Änderungen:
1. --color-accent-text: #7a6600 neu (Gelb für helle Flächen, 6.4:1 auf Weiß)
2. --color-text-secondary: #6b7280 → #5f6b7a (Kontrast 4.6 → 5.1:1)
3. .filter-bar__label: color var(--color-background) → var(--color-text-primary)
4. Alle Badge-Farben: #5c4700 → var(--color-accent-text) (3 Stellen)
5. Header-Shadow aktiviert
Enthält auch Fixes aus:
COMMIT: fix(typo): Typografie-Fixes
Änderungen:
1. Google Fonts @import → entfernt (per in HTML-Dateien)
2. h1–h4: font-size jeweils clamp() statt fester rem-Wert
3. text-wrap: balance auf h1–h4, text-wrap: pretty auf p
4. .page-card__title: font-weight 650 → 700
5. .page-card__title: clamp(1.1→1.3rem, 4vw, 1.375→1.75rem)
6. --table-font-size Mobile: 0.75rem → 0.82rem
Enthält auch Fixes aus:
COMMIT: fix(tokens): Spacing-Token-Fehler bereinigt
Änderungen:
1. --space-2xl: 20px → 32px
Skala war nicht monoton: xl=24px > 2xl=20px. Korrigiert.
2. --card-padding: 0.65rem 0.7rem entfernt (toter Code)
Wurde von späterer :root-Definition (1.25rem 1.1rem)
überschrieben. Von 4 auf 3 Definitionen reduziert.
3. --timeline-dot-size: 11px entfernt (toter Code)
Duplikat — gültige Definition 13px weiter unten bleibt.
Kein visueller Impact erwartet.
Alle entfernten Werte wurden bereits überschrieben.
============================================================= */
/* @import Google Fonts entfernt – Font wird per in jedem HTML- geladen (schneller, kein CSS-Parse-Block) */
/* =========================================================
KOMPONENTEN – Wiederverwendbare CSS-Klassen
========================================================= */
.grid {
display: grid;
gap: var(--space-lg);
}
.card--stretch {
grid-row: auto;
}
@media (min-width: 768px) {
.card--stretch {
grid-row: span 2;
}
}
.card--variant {
background: var(--md-surface-variant);
}
/* =========================================================
UTILITIES – Hilfsstile und Fehler-Handling
========================================================= */
.sr-only,
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
:root {
--color-error-bg: #fee;
--color-error-fg: #c00;
--color-success-bg: #efe;
--color-success-fg: #1a6e1a;
}
.error-banner {
background: var(--color-error-bg);
color: var(--color-error-fg);
border-left: 4px solid var(--color-error-fg);
padding: var(--space-md);
margin-bottom: var(--space-md);
border-radius: 2px;
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.95rem;
line-height: 1.5;
}
.error-banner span:first-child {
flex-shrink: 0;
font-size: 1.25rem;
}
.error-banner span:last-child {
flex: 1;
}
.success-banner {
background: var(--color-success-bg);
color: var(--color-success-fg);
border-left: 4px solid var(--color-success-fg);
padding: var(--space-md);
margin-bottom: var(--space-md);
border-radius: 2px;
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.95rem;
line-height: 1.5;
}
.success-banner span:first-child {
flex-shrink: 0;
font-size: 1.25rem;
}
.success-banner span:last-child {
flex: 1;
}
@media (prefers-reduced-motion: no-preference) {
.error-banner,
.success-banner {
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
/* =========================================================
Responsive CSS – Mobile First Ansatz
---------------------------------------------------------
- Die Datei verwendet das Mobile First-Prinzip:
Basis-Styles und Variablen sind primär für die niedrigste Bildschirmbreite (320–480 px) ausgelegt.
- Alle Größen, Abstände und Touchflächen sind dafür optimiert, dass die Seite auf Smartphones ab 320 px voll nutzbar, barrierefrei und leicht bedienbar ist.
- Über Media Queries werden weitere Breakpoints für Tablets, kleine und große Desktops gestaffelt angepasst:
* Ab 768 px: Tablet-Layout und größere Flächen
* Ab 1024 px: Kleine Desktops/Laptops
* Ab 1200 px: Große Bildschirme, angepasste Schriftgrößen und Layoutabstände
========================================================= */
/* Ein konsistentes Schema sieht zum Beispiel so aus:
--[element]-[property]-[breakpoint] */
/* -------------------------------------------
Breakpoint-Legende (zahlenbasierte Postfixe)
--------------------------------------------
Konvention:
- Alle responsive Variablen bekommen einen Suffix
in der Form: -[min-width-px]
- Beispiel: --layout-padding-768 = Wert ab 768px
Verwendete Breakpoints:
- 320 = ab 320px (default)
- 481 = ab 481px
(Smartphone-Querformat & kleine Tablets)
- 768 = ab 768px
(Tablet-Layout & größere Flächen)
- 1024 = ab 1024px
(kleine Desktops/Laptops, Navigation horizontal)
- 1200 = ab 1200px
(große Bildschirme, angepasste Schrift & Abstände)
Beispiel-Variablen:
- --layout-padding-481
- --layout-padding-768
- --layout-padding-1024
- --layout-padding-1200
- --font-size-768
- --font-size-1024
- --font-size-1200
-------------------------------------------- */
/* =========================================================
DESIGN-TOKENS: Vereinsfarben, Abstände, Schatten usw.
========================================================= */
:root {
/* --- Kernpalette (reduziert) --- */
--color-primary: #322882; /* Hauptblau */
--color-primary-strong: #241c62; /* dunkler für Hover/Fokus */
--color-accent: #fceb19; /* Vereinslogo + Footer-Akzent */
--color-accent-text: #7a6600; /* fix(color): Gelb für Text auf hellen Flächen (~6.4:1 auf Weiß) */
--color-surface: #ffffff; /* Karten/Flächen */
--color-surface-muted: #f3f4f6; /* dezente Flächen */
--color-background: #0a1028; /* Hintergrund + Footer */
--color-text-primary: #0f172a;
--color-text-secondary: #5f6b7a; /* fix(color): Kontrast 4.6→5.1:1 auf Weiß */
--color-border: #dde2eb;
--color-border-strong: rgba(148, 163, 184, 0.85);
/* --- MATERIAL DESIGN TOKENS (zentral für alle Seiten) --- */
--md-surface: var(--color-surface);
--md-surface-variant: var(--color-surface-muted);
--md-primary: var(--color-primary);
--md-primary-dark: var(--color-primary-strong);
--md-primary-container: var(--color-surface-muted);
--md-on-primary: #ffffff;
--md-on-surface: var(--color-text-primary);
--md-on-surface-variant: var(--color-text-secondary);
--md-outline: var(--color-border);
--md-radius-medium: 12px;
--md-shadow-low: 0 2px 6px rgba(15, 23, 42, 0.18);
--md-shadow-elevated: 0 8px 16px rgba(15, 23, 42, 0.12);
/* Footer specific shadow token */
--footer-shadow: 0 -18px 30px rgba(0, 0, 0, 0.25);
/* Layout & card tokens */
/* --card-padding: 0.65rem 0.7rem; — entfernt: Duplikat, gültige Definition (1.25rem 1.1rem) weiter unten */
--card-radius: 10px;
/* Small / utility spacing and radii */
--radius-small: 8px;
--space-xxs: 4px;
--space-xs: 8px;
--space-sm: 10px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 24px;
--space-2xl: 32px;
/* Small typography tokens */
--type-meta: 0.8rem;
--type-body: 1rem;
--type-small: 0.75rem;
/* Grid & timeline tokens */
--grid-min-col: 190px;
--timeline-border-width: 2px;
/* --timeline-dot-size: 11px; — entfernt: Duplikat, gültige Definition (13px) weiter unten */
--timeline-gap: 1.1rem;
--timeline-dot-left: -6px;
--timeline-dot-top: 0.4rem;
--color-error: #b91c1c;
/* --- Semantische Zustands-Farben --- */
--color-error-bg: #fee2e2;
--color-error-fg: #b91c1c;
--color-success-bg: #dcfce7;
--color-success-fg: #166534;
/* timeline visuals */
--timeline-dot-size: 13px; /* slightly larger for better visibility */
--timeline-dot-shadow: 0 1px 3px rgba(2, 6, 23, 0.08);
/* Typography tokens for cards and small stacks */
--type-card-title: 0.95rem;
--type-card-body: 0.9rem;
--stack-gap: 0.8rem;
/* --- Responsive Breakpoints (Mobile-First Definitionen) --- */
/* Referenzwerte — CSS-Variablen sind in @media nicht auflösbar, Literalwerte nutzen */
--bp-sm: 481px; /* Smartphone Querformat & kleine Tablets */
--bp-md: 768px; /* Tablets */
--bp-lg: 1024px; /* Desktop klein */
--bp-xl: 1200px; /* Desktop groß */
/* --- Root --- */
--root-font-family: Inter, Arial, sans-serif;
--root-font-size: 16px;
/* --- Überschriften -------------------------------------- */
/* H1 – Seitentitel / Page Intro */
--h1-line-height: 1.25;
--h1-font-weight: 700;
--h1-margin-bottom: 0.8rem;
--h1-font-size-320: 1.3rem;
/* H2 – Abschnittsüberschriften */
--h2-line-height: 1.3;
--h2-font-weight: 700;
--h2-margin-bottom: 0.7rem;
--h2-font-size-320: 1.2rem;
/* H3 – Unterüberschriften */
--h3-line-height: 1.35;
--h3-font-weight: 600;
--h3-margin-bottom: 0.6rem;
--h3-font-size-320: 1.1rem;
/* H4 – kleinere Überschriften */
--h4-line-height: 1.4;
--h4-font-weight: 600;
--h4-margin-bottom: 0.5rem;
--h4-font-size-320: 1.02rem;
/* --- Buttons (global) -------------------- */
--btn-font-size: 0.9rem;
--btn-radius-pill: 999px;
--btn-primary-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
--btn-text-color: var(--color-primary-strong);
--btn-text-hover-decoration: underline;
--btn-assist-text-color: var(--color-primary-strong);
--btn-assist-bg: rgba(50, 40, 130, 0.07);
--btn-assist-bg-hover: rgba(50, 40, 130, 0.13);
--btn-assist-border: rgba(50, 40, 130, 0.22);
--btn-assist-border-hover: var(--color-border-strong);
--btn-assist-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
--btn-assist-shadow-hover: 0 2px 5px rgba(15, 23, 42, 0.18);
--btn-chip-bg: var(--color-surface-muted);
--btn-chip-border-color: var(--color-border);
--btn-chip-text-color: var(--color-text-primary);
--btn-chip-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
--btn-chip-selected-bg: var(--color-text-primary);
--btn-chip-selected-text-color: var(--md-on-primary);
--btn-chip-selected-border-color: transparent;
--btn-chip-selected-shadow: 0 3px 8px rgba(15, 23, 42, 0.35);
--btn-chip-hover-bg: var(--color-surface-muted);
--btn-chip-hover-border-color: var(--color-border);
--btn-chip-hover-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
--btn-chip-check-font-size: 0.75rem;
/* Label-/Season-Chip (nicht klickbar) */
--chip-bg: rgba(50, 40, 130, 0.08); /* helles Blau aus Primärfarbe */
--chip-border-color: rgba(50, 40, 130, 0.35);
--chip-text-color: var(--color-primary-strong);
--chip-font-size: 0.85rem;
--chip-font-weight: 500;
--chip-radius: 999px;
--chip-padding-y: 0.25rem;
--chip-padding-x: 0.9rem;
/* --- Tabellen (global) --------------------------------- */
--table-bg: var(--color-surface);
--table-header-bg: var(--color-surface-muted);
--table-header-text-color: var(--color-text-primary);
--table-row-bg: var(--color-surface);
--table-row-alt-bg: var(--color-surface-muted);
--table-row-hover-bg: rgba(15, 23, 42, 0.02);
--table-border-color: var(--color-border);
--table-text-color: var(--color-text-primary);
--table-radius: 14px;
--table-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
--table-cell-padding-y: 0.65rem;
--table-cell-padding-x: 1.1rem;
--table-header-font-size: 0.9rem;
--table-body-font-size: 0.9rem;
/* --- Header/Navigation ---------------------------------- */
--header-height: 4.4rem;
--header-bg-color: var(--color-surface);
--header-border-b-color: rgba(15, 23, 42, 0.08);
--header-font-color: var(--color-text-primary);
--header-content-wrapper-padding-v: 0;
/* Effekte & Motion */
--header-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
--header-burger-transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
--header-link-transition: color 0.2s ease, letter-spacing 0.2s ease, transform 0.15s ease;
--header-link-hover-translate-y: -1px;
--header-link-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
/* Branding (Logo + Vereinsname) */
--header-branding-gap: 0.5rem;
--header-logo-height: 2.7rem;
--header-title-line-height: 2.7rem;
--header-font-size-320: 1.2rem;
--header-font-size-481: 1.35rem;
--header-font-size-768: 1.05rem;
--header-font-size-1024: 1.2rem;
--header-font-size-1200: 1.35rem;
--header-title-font-weight: 600;
--header-title-color: var(--color-text-primary);
/* Navigationsmenü */
--header-nav-container-z-index: 1000;
--header-nav-font-weight: 500;
--header-nav-gap: 0.1rem;
--header-nav-border-color: var(--color-accent);
--header-nav-container-padding-v-320: 0.4rem;
--header-nav-container-padding-v-481: 0.4rem;
--header-nav-container-padding-v-768: 0;
--header-nav-container-padding-v-1024: 0;
--header-nav-container-padding-v-1200: 0;
--header-nav-container-padding-h-320: 1.1rem;
--header-nav-container-padding-h-481: 1.1rem;
--header-nav-container-padding-h-768: 0;
--header-nav-container-padding-h-1024: 0;
--header-nav-container-padding-h-1200: 0;
--header-nav-item-padding-v-320: 0.6rem;
--header-nav-item-padding-v-481: 0.6rem;
--header-nav-item-padding-v-768: 1rem;
--header-nav-item-padding-v-1024: 1rem;
--header-nav-item-padding-v-1200: 1rem;
--header-nav-item-padding-h-320: 1.5rem;
--header-nav-item-padding-h-481: 1.5rem;
--header-nav-item-padding-h-768: 0.45rem;
--header-nav-item-padding-h-1024: 0.8rem;
--header-nav-item-padding-h-1200: 0.8rem;
--header-nav-link-border-bottom-320: solid 0.1px rgba(0, 0, 0, 0.12);
--header-nav-link-color: var(--color-text-primary);
--header-nav-link-letter-spacing: 0.03em;
--header-nav-link-hover-color: var(--color-primary);
--header-nav-link-hover-letter-spacing: 0.05em;
--header-nav-link-active-color: var(--color-text-primary);
--header-nav-link-active-font-weight: 600;
/* Burger-Menü */
--burger-menu-color: var(--color-text-primary);
--burger-line-height: 3px;
--burger-line-margin-v: 3px;
--burger-line-margin-h: 0;
--burger-line-width: 26px;
/* --- Footer --------------------------------------------- */
--footer-bg-color: var(--color-background);
--footer-font-color: rgba(255, 255, 255, 0.5);
--footer-nav-link-hover-color: var(--color-accent);
--footer-content-container-padding-v-1024: 0.8rem;
--footer-content-container-padding-v-1200: 0.8rem;
--footer-copyright-margin-b: 0.15rem;
--footer-nav-gap: 0.2rem;
--footer-nav-item-size-320: 0.78rem;
--footer-nav-item-size-481: 0.78rem;
--footer-nav-item-size-768: 0.78rem;
--footer-nav-item-size-1024: 0.78rem;
--footer-nav-item-size-1200: 0.78rem;
--footer-nav-item-min-height-320: 1.6rem;
--footer-nav-item-min-height-481: 1.7rem;
--footer-nav-item-min-height-768: 1.7rem;
--footer-nav-item-min-height-1024: 1.8rem;
--footer-nav-item-min-height-1200: 1.8rem;
--footer-nav-item-padding-v-320: 0.25rem;
--footer-nav-item-padding-v-481: 0.25rem;
--footer-nav-item-padding-v-768: 0.25rem;
--footer-nav-item-padding-v-1024: 0.25rem;
--footer-nav-item-padding-v-1200: 0.25rem;
--footer-nav-item-padding-h-320: 0.5rem;
--footer-nav-item-padding-h-481: 0.5rem;
--footer-nav-item-padding-h-768: 0.5rem;
--footer-nav-item-padding-h-1024: 0.5rem;
--footer-nav-item-padding-h-1200: 0.5rem;
--footer-nav-link-letter-spacing: 0.02em;
--footer-nav-link-hover-letter-spacing: 0.05em;
/* --- Responsive Inhaltscontainer ------------------------ */
--content-container-max-width-320: 100%;
--content-container-max-width-481: 100%;
--content-container-max-width-768: 720px;
--content-container-max-width-1024: 900px;
--content-container-max-width-1200: 984px;
--content-container-width-320: 100%;
--content-container-width-481: 100%;
--content-container-width-768: 92%;
--content-container-width-1024: 88%;
--content-container-width-1200: 82%;
--content-container-padding-v-320: 0.5rem;
--content-container-padding-v-481: 0.5rem;
--content-container-padding-v-768: 1rem;
--content-container-padding-v-1024: 1.1rem;
--content-container-padding-v-1200: 1.1rem;
--content-container-padding-h-320: 0.5rem;
--content-container-padding-h-481: 0.5rem;
--content-container-padding-h-768: 1rem;
--content-container-padding-h-1024: 0.5rem;
--content-container-padding-h-1200: 0.5rem;
/* --- Cards (global) ------------------------------------- */
--card-bg-color: var(--color-surface);
--card-border-radius: 12px;
--card-border-color: rgba(148, 163, 184, 0.18);
--card-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
--card-padding: 1.25rem 1.1rem;
--card-title-font-size: 1.15rem;
--card-title-font-weight: 600;
--card-subtitle-font-size: 0.9rem;
--card-hint-font-size: 0.85rem;
/* Link & focus tokens */
--link-color: var(--btn-text-color);
--link-hover-color: var(--header-nav-link-hover-color);
--focus-ring-color: rgba(50, 40, 130, 0.6);
--focus-ring-width: 5px;
--focus-ring-outline-color: rgba(50, 40, 130, 0.85);
/* --- Design-Tokens für Card-Varianten (optional) ------- */
/* große Seiten-Card (z. B. News-Hauptblock) */
--card-page-radius: 26px;
--card-page-shadow: 0 22px 60px rgba(15, 23, 42, 0.55), 0 0 0 1px rgba(148, 163, 184, 0.3);
/* innere Cards (News-Teaser, Mannschafts-Kacheln) */
--card-inner-radius: 10px;
--card-inner-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
/* --- Card Header (global) ------------------------------ */
--card-header-border-color: rgba(148, 163, 184, 0.3);
--card-header-gap: 12px;
--card-header-padding-bottom: 14px;
--page-card-section-mt: 20px;
/* --- Filter Bar / Form Controls (global) -------------- */
--filter-bar-gap: 0.9rem;
--filter-bar-label-font-size: 0.9rem;
--filter-bar-label-font-weight: 500;
--filter-input-bg: var(--color-surface-muted);
--filter-input-border-color: rgba(15, 23, 42, 0.14);
--filter-input-radius: 999px;
--filter-input-font-size: 0.9rem;
--filter-input-placeholder-color: var(--color-text-secondary);
--filter-input-focus-border-color: var(--color-primary);
--filter-input-focus-shadow: 0 0 0 2px rgba(50, 40, 130, 0.18); /* an CI anpassen */
/* --- Pagination (global) ------------------------------ */
--pagination-font-size: 0.9rem;
--pagination-gap: 0.4rem;
--pagination-margin-top: 1.6rem;
--pagination-btn-min-width: 2.1rem;
--pagination-btn-padding-y: 0.25rem;
--pagination-btn-padding-x: 0.55rem;
--pagination-btn-radius: 999px;
--pagination-btn-color: var(--color-primary);
--pagination-btn-bg: transparent;
--pagination-btn-border-color: transparent;
--pagination-btn-active-bg: var(--color-primary);
--pagination-btn-active-color: #ffffff;
--pagination-btn-active-border-color: transparent;
--pagination-btn-disabled-opacity: 0.4;
}
/* =========================================================
Shared Card Base
- Centralized base styles for page cards and small card-like components
- Applies to generic `.card` and common page-specific card classes
========================================================= */
.card,
.location-card,
.contact-card,
.card--filled {
padding: var(--card-padding);
border-radius: var(--card-radius);
border: 1px solid var(--card-border-color);
background-color: var(--color-surface-muted);
box-shadow: var(--card-shadow);
}
/* Global link and focus styles */
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
color: var(--link-hover-color);
text-decoration: underline;
}
/* Prefer :focus-visible for keyboard focus outlines */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none;
box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
border-radius: 6px;
}
/* add a high-contrast outline in addition to the shadow for clarity */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--focus-ring-outline-color);
outline-offset: 2px;
}
/* Accessible skip link (add Skip to content near top of body) */
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus,
.skip-link:active {
position: fixed;
left: 1rem;
top: 1rem;
width: auto;
height: auto;
background: var(--card-bg-color);
color: var(--color-text-primary);
padding: 0.5rem 0.75rem;
border-radius: 6px;
box-shadow: var(--card-shadow);
z-index: 9999;
}
/* =========================================================
Root-Styles (Typografie & Hintergrund)
---------------------------------------------------------
- Globale Design- und Typografie-Einstellungen gelten für alle Seiteninhalte.
- Schriftfamilie, Schriftgröße und Zeilenhöhe werden zentral per Variable gesteuert.
- Der Seitenhintergrund nutzt Vollflächen-Farbe und Bild mit Weichzeichnung.
- Kombinierte Background-Properties erzeugen ein markantes, aber dezent wirkendes Seitenfundament.
- Einstellungen im html-Tag garantieren Konsistenz und einfache Anpassbarkeit im Theme.
========================================================= */
html {
font-family: var(--root-font-family);
font-size: var(--root-font-size);
line-height: 1.4;
color: var(--color-text-primary);
}
p {
text-wrap: pretty; /* fix(typo): verhindert Orphans */
}
body {
background-color: var(--color-background); /* fix(perf): Hintergrundbild → body::before */
position: relative;
}
/* fix(perf): Hintergrundbild auf ::before ausgelagert.
filter: blur() statt backdrop-filter: blur() auf body —
compositet nur das Pseudo-Element, nicht die gesamte Seite. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background:
linear-gradient(to bottom, rgba(10, 16, 40, 0.42), rgba(10, 16, 40, 0.62)),
url("../assets/images/bg-image-100.jpg") 50% 55% / cover no-repeat;
filter: blur(3.5px);
transform: scale(1.04); /* verhindert Blur-Artefakte an den Rändern */
}
h1 {
line-height: var(--h1-line-height);
font-weight: var(--h1-font-weight);
margin-bottom: var(--h1-margin-bottom);
font-size: clamp(1.55rem, 5vw, 2.25rem); /* fix(typo): clamp ersetzt feste 1.3rem */
text-wrap: balance;
}
h2 {
line-height: var(--h2-line-height);
font-weight: var(--h2-font-weight);
margin-bottom: var(--h2-margin-bottom);
font-size: clamp(1.25rem, 4vw, 1.75rem); /* fix(typo): clamp */
text-wrap: balance;
}
h3 {
line-height: var(--h3-line-height);
font-weight: var(--h3-font-weight);
margin-bottom: var(--h3-margin-bottom);
font-size: clamp(1.1rem, 3vw, 1.35rem); /* fix(typo): clamp */
text-wrap: balance;
}
h4 {
line-height: var(--h4-line-height);
font-weight: var(--h4-font-weight);
margin-bottom: var(--h4-margin-bottom);
font-size: clamp(1rem, 2.5vw, 1.15rem); /* fix(typo): clamp */
text-wrap: balance;
}
/* =========================================================
RESET: Browser-Defaults neutralisieren
---------------------------------------------------------
- Setzt margin und padding global auf 0 für konsistente Abstände.
- box-sizing: border-box für alle Elemente – Padding/Borders werden bei Größenberechnung berücksichtigt.
- body erhält min-height: 100vh für eine stets volle Fensterhöhe.
- Sorgt für gleiche Ausgangsbasis für alle Browser vor dem Custom-Design.
========================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
min-height: 100vh; /* fix(perf): backdrop-filter entfernt → body::before */
}
/* =========================================================
LAYOUT: Hauptstruktur, Rahmen und Container-Logik
---------------------------------------------------------
- Flexbox organisiert die Hauptbereiche vertikal und hält den Footer immer am Seitenende.
- Außencontainer decken die volle Fensterbreite für Hintergründe und optische Separation ab.
- Inhaltscontainer sind zentriert und begrenzt, damit alle Inhalte unabhängig vom Gerät sichtbar bleiben.
- Einheitliche Abstände und Paddings werden per Design-Variablen gesteuert.
========================================================= */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Footer am Seitenende */
main {
flex: 1;
}
/* Außencontainer: width:100% statt min-width:100vw, da 100vw Scrollbarbreite einschließt
und auf Seiten mit vertikalem Scroll horizontalen Overflow verursacht */
.site-header,
.site-footer {
width: 100%;
}
/* Inhaltscontainer */
.site-header__content-wrapper,
.main__content-wrapper,
.site-footer__content-wrapper {
max-width: var(--content-container-max-width-320);
width: var(--content-container-width-320);
margin: 0 auto;
padding: var(--content-container-padding-v-320) var(--content-container-padding-h-320);
}
/* ========================================================
Filter Bar (z.B. News, Termine)
--------------------------------------------------------
- .filter-bar: Container für eine komplette Filter-/Suchleiste
- .filter-bar__group: logische Gruppe von Controls innerhalb der Leiste
- .filter-bar__label: Beschriftung (z. B. "Suche:", "Jahr:")
- .filter-bar__input-wrapper: Hülle für Textfeld mit Icon
- .filter-bar__icon: führendes Icon im Textfeld (Lupen-Icon etc.)
- .filter-bar__input: Textfeld (Suche, Freitextfilter)
- .filter-bar__select: Dropdown (z. B. Jahr-/Saison-Auswahl)
- .filter-bar__input--with-icon: Input mit zusätzlichem Platz links
=======================================================*/
/* Gesamter Zeilen-Container für Filter/Suche
Einsatz: Wrapper um alle Filter-Controls (Buttons, Inputs, Selects) */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: var(--filter-bar-gap);
align-items: center;
}
/* Gruppierung zusammengehöriger Controls
Beispiel:
- Gruppe 1: "Suche" + Suchfeld
- Gruppe 2: "Jahr" + Select
- Gruppe 3: "Filterlabel" + Chip-Buttons (Alle / Punktspiele / …) */
.filter-bar__group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
@media (max-width: 480px) {
.filter-bar__label {
display: none;
}
}
/* Variante für Gruppen, die wachsen sollen
Einsatz: z. B. Suchfeld-Gruppe, die den verfügbaren Platz füllt */
.filter-bar__group--grow {
flex: 1 1 230px;
}
/* Labels der Filter-Controls
Einsatz: Beschriftung vor Input/Select („Suche:“, „Jahr:“) */
.filter-bar__label {
font-size: var(--filter-bar-label-font-size);
font-weight: var(--filter-bar-label-font-weight);
color: var(--color-text-primary); /* fix(color): war var(--color-background) = #0a1028, jetzt korrekt */
}
/* Wrapper um ein Eingabefeld
Einsatz: wenn ein Textfeld ein Icon enthalten soll (Such-Icon etc.) */
.filter-bar__input-wrapper {
position: relative;
flex: 1;
}
/* Führendes Icon im Textfeld
Einsatz: Icon links im Suchfeld, rein dekorativ (aria-hidden) */
.filter-bar__icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--filter-input-placeholder-color);
pointer-events: none;
}
/* Basistypografie und Look für Textfelder & Selects
Einsatz: alle Filter-Inputs und -Selects (Suche, Jahr, Saison ...) */
.filter-bar__input,
.filter-bar__select {
width: 100%;
padding: 0.45rem 0.9rem;
border-radius: var(--filter-input-radius);
border: 1px solid var(--filter-input-border-color);
background: var(--filter-input-bg);
font-size: var(--filter-input-font-size);
color: var(--color-text-primary); /* fix(color): war var(--color-background) = #0a1028, jetzt korrekt */
}
/* Zusätzlicher linke Innenabstand
Einsatz: wenn ein Input ein Icon mit .filter-bar__icon nutzt */
.filter-bar__input--with-icon {
padding-left: 2.3rem;
}
/* Platzhalter-Farbe für Textfelder
Einsatz: alle Inputs mit Platzhaltertext („z. B. Turnier…“) */
.filter-bar__input::placeholder {
color: var(--filter-input-placeholder-color);
}
/* Fokuszustand für Inputs & Selects
Einsatz: Tastatur-/Mausfokus, hebt das aktuell aktive Feld hervor */
.filter-bar__input:focus,
.filter-bar__select:focus {
outline: none;
border-color: var(--filter-input-focus-border-color);
box-shadow: var(--filter-input-focus-shadow);
}
/* =========================================================
BUTTONS (GLOBAL)
---------------------------------------------------------
Nutzung:
- Immer .btn als Basis für alle interaktiven Buttons/Chips verwenden
- Varianten werden zusätzlich angehängt:
* .btn.btn--primary → Hauptaktion (z.B. Formular-Submit)
* .btn.btn--text → Link-/Text-Button ohne Hintergrund
* .btn.btn--chip → Filter-/Tag-Button (Chip)
* .btn.btn--chip.btn--chip-selected → ausgewählter Filter-Chip
* .btn.btn--assist → „Assist“-Link/Chip, z.B. Aufstellung/Spielplan/Tabelle
- Optionales Icon/Check in Chips:
* .btn--chip__check → kleines Icon im Chip; nur bei ausgewähltem Chip sichtbar
========================================================*/
/* Basis-Stil für alle Buttons/Chips
Einsatz: immer zusammen mit einer Varianten-Klasse verwenden (.btn--primary, .btn--chip, ...) */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--btn-radius-pill);
font-size: var(--btn-font-size);
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
gap: 0.35rem;
line-height: 1.4;
letter-spacing: 0.02em;
transition:
background-color 140ms ease-out,
border-color 140ms ease-out,
box-shadow 140ms ease-out,
transform 100ms ease-out,
color 100ms ease-out;
text-decoration: none;
}
/* --- Varianten --- */
/* Primärer Button (Hauptaktion)
Beispiel:
*/
.btn--primary {
padding: 0.4rem 1rem;
background: var(--color-primary);
color: var(--color-surface);
box-shadow: var(--btn-primary-shadow);
}
.btn--primary:hover,
.btn--primary:focus-visible {
background: var(--color-primary-strong);
box-shadow: 0 4px 14px rgba(50, 40, 130, 0.35);
transform: translateY(-1px);
text-decoration: none;
}
/* Text-Button ohne Hintergrund (Link-Ersatz)
Beispiel:
Alle Termine anzeigen */
.btn--text {
background: transparent;
color: var(--btn-text-color);
padding: 0.3rem 0;
border: none;
box-shadow: none;
}
/* Hover-Effekt für Text-Buttons
Einsatz: Unterstreichung o. Ä. beim Überfahren mit der Maus */
.btn--text:hover {
text-decoration: var(--btn-text-hover-decoration);
}
/* Assist-Button (sekundärer Chip-Button)
Einsatz: Links wie „Aufstellung“, „Spielplan“, „Tabelle“ unter Mannschaften/Terminen */
.btn--assist {
padding: 0.25rem 0.85rem;
border-radius: var(--btn-radius-pill);
font-size: var(--btn-font-size);
font-weight: 500;
color: var(--btn-assist-text-color);
background: var(--btn-assist-bg);
border: 1px solid var(--btn-assist-border-color);
box-shadow: var(--btn-assist-shadow);
}
/* Hover-/Fokuszustand für Assist-Buttons
Einsatz: visuelles Feedback bei Maus und Tastatur-Fokus */
.btn--assist:hover,
.btn--assist:focus-visible {
background: var(--btn-assist-bg-hover);
border-color: var(--btn-assist-border-color-hover);
box-shadow: var(--btn-assist-shadow-hover);
text-decoration: none;
}
/* Chip-Button (Filter/Tag)
Beispiel:
Einsatz: Filterleisten für Termine, News, ggf. weitere Listen */
.btn--chip {
padding: 0.25rem 0.9rem;
border-radius: var(--btn-radius-pill);
border: 1px solid var(--btn-chip-border-color);
background: var(--btn-chip-bg);
color: var(--btn-chip-text-color);
box-shadow: var(--btn-chip-shadow);
}
/* Optionales Check-Icon im Chip
Beispiel:
Einsatz: kleines Häkchen links im ausgewählten Chip anzeigen */
.btn--chip__check {
font-size: var(--btn-chip-check-font-size);
display: none;
transform: translateY(0.5px);
}
/* Ausgewählter Filter-Chip
Einsatz: aktiver Zustand in Filterleisten (z.B. „Alle“ oder „Punktspiele“ gewählt) */
.btn--chip.btn--chip-selected {
background-color: var(--btn-chip-selected-bg);
color: var(--btn-chip-selected-text-color);
border-color: var(--btn-chip-selected-border-color);
box-shadow: var(--btn-chip-selected-shadow);
}
/* Hover für nicht ausgewählte Chips
Einsatz: visuelles Feedback beim Überfahren, aber nur wenn Chip nicht aktiv ist */
.btn--chip:hover:not(.btn--chip-selected) {
background: var(--btn-chip-hover-bg);
border-color: var(--btn-chip-hover-border-color);
box-shadow: var(--btn-chip-hover-shadow);
}
/* Check-Icon nur beim ausgewählten Chip anzeigen
Einsatz: Häkchen erscheint erst, wenn der Chip aktiv ist */
.btn--chip.btn--chip-selected .btn--chip__check {
display: inline-block;
}
/* =========================================
NEU: Chips / Badges (Season, Status etc.)
========================================= */
.chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: var(--chip-padding-y) var(--chip-padding-x);
border-radius: var(--chip-radius);
background: var(--chip-bg);
color: var(--chip-text-color);
font-size: var(--chip-font-size);
font-weight: var(--chip-font-weight);
white-space: nowrap;
}
/* kleiner Punkt im Chip */
.chip__dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--color-primary); /* „aktiv“ */
}
/* ========== Tabellen (global) ========== */
/* Responsive Wrapper: scrollt horizontal statt den Viewport zu überschreiten */
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background:
linear-gradient(to right, var(--card-bg-color) 30%, transparent),
linear-gradient(to left, var(--card-bg-color) 30%, transparent) right,
linear-gradient(to right, rgba(0, 0, 0, 0.12), transparent),
linear-gradient(to left, rgba(0, 0, 0, 0.12), transparent) right;
background-size:
2rem 100%,
2rem 100%,
1rem 100%,
1rem 100%;
background-repeat: no-repeat;
background-attachment: local, local, scroll, scroll;
}
/* Basis-Tabelle */
.table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-size: var(--table-body-font-size);
color: var(--table-text-color);
}
/* Standard: alles linksbündig */
.table th,
.table td {
text-align: left;
}
/* Variante: Tabelle in „Card”-Optik wie auf deiner HP */
.table--card {
background: var(--table-bg);
border-radius: var(--table-radius);
box-shadow: var(--table-shadow);
overflow: hidden; /* Radius auch für Header-Zeile */
}
/* Im Scroll-Container: Tabellenhintergrund transparent, damit der Scroll-Hinweis sichtbar wird */
.table-responsive .table--card {
background: transparent;
}
/* Header */
.table thead th {
background: var(--table-header-bg);
color: var(--table-header-text-color);
text-align: left;
font-weight: 600;
font-size: var(--table-header-font-size);
padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
border-bottom: 1px solid var(--table-border-color);
}
/* Body-Zellen */
.table tbody td {
padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
border-bottom: 1px solid var(--table-border-color);
}
/* Nur dezenter Hover */
.table tbody tr:hover {
background: var(--table-row-hover-bg);
}
/* =========================================================
Pagination – global
---------------------------------------------------------
- .pagination: Container (meist