als erstes Kind von
.page-card (padding:0; overflow:hidden)
Kinder: .page-hero__badge? > .page-hero__title > .page-hero__sub?
Die VM nutzt seit dem Umbau denselben .page-head wie alle anderen Seiten
========================================================= */
.page-hero {
background-color: rgba(12, 18, 44, 0.65);
background-image: repeating-conic-gradient(rgba(255, 255, 255, 0.035) 0% 25%, transparent 0% 50%);
background-size: 36px 36px;
padding: 1.35rem 1.5rem 1.3rem;
position: relative;
overflow: hidden;
min-height: 4.5rem;
border-radius: 0 0 20px 20px;
}
/* Layer 1: photo — ausgeblendet, body::before übernimmt das Hintergrundfoto */
.page-hero::before {
display: none;
}
/* Layer 2: A2 overlay — on top of photo */
.page-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to bottom, rgba(30, 18, 110, 0.74), rgba(10, 16, 40, 0.92));
}
/* Layer 3: content above both */
.page-hero > * {
position: relative;
z-index: 2;
}
/* .page-hero__badge → ersetzt durch .meta-badge.meta-badge--hero (M-01) */
.page-hero__title {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
margin: 0 0 0.35rem;
font-size: clamp(1.35rem, 3.8vw, 1.7rem); /* leicht angehoben */
color: #fff;
letter-spacing: 0;
line-height: 1.2;
text-wrap: balance;
}
.page-hero__title:last-child {
margin-bottom: 0;
}
.page-hero__sub {
margin: 0;
font-size: var(--type-sm);
color: rgba(255, 255, 255, 0.55);
line-height: 1.55;
text-wrap: pretty;
}
@media (max-width: 480px) {
.page-hero {
padding: 1.1rem 1.2rem 1rem;
}
}
/* ─── Team-Card Subkomponenten (Mannschaften-Seite) ─── */
/* Info-Block: Name + Liga mit sauberem Abstand */
.team-card__info {
margin-bottom: 14px;
}
.team-card__info h3 {
margin: 0 0 5px;
}
.team-card__info p {
margin: 0;
}
/* Button-Zeile: flex mit wrap und gap */
.team-card__links {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* Kompaktere Buttons innerhalb der Kacheln — passen sicher in eine Zeile */
.team-card__links .btn--assist {
padding: 0.2rem 0.65rem;
font-size: 0.82rem;
}
/* =========================================================
CARD-CONTAINER: LISTEN-LAYOUT
Nutzung:
- Für Listenansichten mit Cards (z.B. Termine, Tabellenzeilen)
- Kinder bestimmen die Breite, Reihenfolge ist vertikal
========================================================= */
.card-list {
display: block; /* Standard-Flow; Cards untereinander */
}
.card-list > .card {
margin-bottom: 0.75rem; /* Abstand zwischen den Cards */
}
/* =========================================================
LIST-ITEM: Zwei-spaltige Listen (generisch)
Nutzung: Für zeitbasierte Events, Einträge mit schmalem Label + Info
z.B. Terminliste (Datum | Event-Infos)
Pattern:
========================================================= */
.list {
margin: 0;
padding: 0;
list-style: none;
}
.list-item {
display: grid;
grid-template-columns: 1fr;
gap: 0;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.list-item:last-child {
border-bottom: none;
}
.list-item:hover {
background-color: rgba(15, 23, 42, 0.02);
}
.list-item__column {
display: flex;
flex-direction: column;
}
.list-item__column--narrow {
color: var(--color-text-secondary);
font-size: 0.9rem;
}
.list-item__column--flexible {
gap: 0.15rem;
}
.list-item__title {
font-weight: var(--fw-semibold);
color: var(--color-text-primary);
font-size: 0.95rem;
}
.list-item__meta {
color: var(--color-text-secondary);
font-size: 0.85rem;
}
.list-item--highlighted {
background: rgba(252, 235, 25, 0.09);
}
.list-item .btn--text {
align-self: flex-start;
}
/* =========================================================
ZENTRALE KOMPONENTEN: Tabs, Tabellen, etc.
========================================================= */
/* --- TAB-NAVIGATION (Material Design Primärtabs) --- */
.tabs {
display: flex;
flex-wrap: nowrap;
/* Keine eigene Fläche, solange die Leiste im Fluss liegt: Dann ist sie
die Karte, und es gibt nichts, wovon sie abweichen könnte. Markiert
wird sie durch die Haarlinien.
Der Grund: Leiste und Karte reagieren unterschiedlich auf das Foto
darunter, ihr Abstand wanderte deshalb über die Seite — gemessen
3,9 ΔE direkt unter der Leiste, 6,8 ΔE weiter unten, dazu ein
Farbtonversatz. Ein fester Wert für die Leiste kann das nicht lösen,
weil die Karte selbst keinen festen Wert hat.
Erst wenn sie klebt, läuft Inhalt darunter durch und sie braucht ein
Material — siehe .tabs.ist-geklebt. Das entspricht dem, was Apple
„Scroll Edge Appearance" nennt. */
background: linear-gradient(var(--leiste-aufschlag), var(--leiste-aufschlag));
border-top: 1px solid var(--glass-border);
border-bottom: 1px solid var(--glass-border);
margin-top: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
/* Scrollbar auf Mobile unsichtbar — Gradient-Hinweis übernimmt */
@media (max-width: 767px) {
.tabs::-webkit-scrollbar {
display: none;
}
.tabs {
scrollbar-width: none;
}
}
/* filter-bar__group innerhalb von Tabs: kein Wrap, kein Gap */
.tabs .filter-bar__group {
flex-wrap: nowrap;
gap: 0;
}
.tab {
position: relative;
flex: 0 0 auto;
scroll-snap-align: start;
padding: 14px 16px;
font-size: 0.9rem;
cursor: pointer;
color: var(--tab-text);
border: none;
background: transparent;
box-shadow: none;
outline: none;
transition: color 0.15s ease;
}
.tab:hover {
color: rgba(255, 255, 255, 0.82);
}
.tab--active {
color: var(--tab-text-active);
font-weight: var(--fw-semibold);
background: transparent;
box-shadow: none;
}
.tab::after {
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: 0;
height: 2px;
background-color: transparent;
transition: background-color 0.15s ease;
}
.tab--active::after {
background-color: var(--color-accent);
}
/* ── Zwei Ausprägungen derselben Leiste ────────────────────────────────────
Die Form trägt die Bedeutung, nicht die Farbe:
.tabs--filter Filter — beantwortet „was wird gezeigt?". Der aktive Chip
ist gefüllt, denn ein Filter ist ein Schalter und darf
aussehen wie gedrückt. Trägt Zähler.
.tabs--views Ansichten — beantworten „welche Ansicht?". Nur ein
Unterstrich; der Inhalt darunter wechselt, nicht seine
Menge. Keine Füllung.
Beide nutzen dieselben Farbtokens. Vorher unterschieden sich Termine und
Vereinsmeisterschaft über Gold gegen Primärblau — also über etwas
Beliebiges, und im VM-Fall über eine auf Dunkel unlesbare Farbe. */
/* Kreuztabelle auf kleinen Bildschirmen: kleinere Schrift = mehr Inhalt pro Zeile */
@media (max-width: 767px) {
#tab-kreuztabelle .table {
font-size: 0.82rem;
}
}
/* ========== Rangliste als Liste ========== */
/* Die Tabellenfassung lief auf Telefonen über — bei 360 px um 38, bei 320 px
um 78 Pixel — und brach jeden Namen zweizeilig um. Als Liste passt sie bei
jeder Breite und fügt sich zu Ansetzungen und Teilnehmerliste, die auf
dieser Seite ohnehin Listen sind. */
.rangliste {
list-style: none;
margin: 0;
padding: 0;
}
/* Gemeinsame Spalten über alle Zeilen.
Ohne dies ist jede Zeile ein eigenes Raster, und die dritte Spalte wird je
Zeile aus ihrem breitesten Inhalt berechnet. Gemessen am Sommerturnier 2026
ergab das fünf verschiedene linke Kanten der Punktzahl (879 bis 927 px):
Wer keine Niederlage hat, trägt eine kürzere Kennzahl, bekommt eine
schmalere Spalte — und seine Punktzahl rückt nach rechts. Die Zahlen
standen also nicht untereinander, obwohl die rechte Kante bündig war.
subgrid gibt allen Zeilen die Spalten des Elternrasters. In @supports,
weil ohne Unterstützung sonst die Zeilen selbst zu Rasterzellen würden —
der Rückfall ist das frühere Verhalten, nicht ein zerbrochenes Layout. */
@supports (grid-template-columns: subgrid) {
.rangliste {
display: grid;
grid-template-columns: auto 1fr auto;
}
/* Über das Elternelement adressiert, damit die Spezifität höher liegt als
die von .rangliste__zeile weiter unten — sonst überschriebe die dortige
Angabe auto/1fr/auto diese hier, je nach Reihenfolge im Stilblatt. */
.rangliste > .rangliste__zeile {
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
}
.rangliste__zeile {
display: grid;
/* Rang | Name | Punkte — die zweite Zeile spannt unter Name und Punkte */
grid-template-columns: auto 1fr auto;
align-items: baseline;
column-gap: 0.75rem;
padding: 0.55rem 0.9rem;
border-bottom: 1px solid var(--glass-hairline);
/* Jede Zeile trägt die Kante, auch ohne Podium — sonst rücken die
Podiumszeilen um 4 px ein und die Ränge stehen nicht mehr bündig. */
border-left: 4px solid transparent;
}
.rangliste__zeile:last-child {
border-bottom: 0;
}
/* Fester Kreis mit tabular-nums: ein- und zweistellige Ränge stehen dadurch
bündig untereinander, die Namen beginnen alle auf derselben Linie. */
.rangliste__rang {
grid-row: 1 / span 2;
align-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
background: linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.13));
color: var(--glass-text);
font-size: 0.76rem;
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
}
.rangliste__name {
color: var(--glass-text);
font-size: 0.95rem;
min-width: 0;
overflow-wrap: anywhere;
}
.rangliste__punkte {
color: var(--glass-text);
font-size: 1.05rem;
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.rangliste__einheit {
margin-left: 0.25rem;
color: var(--glass-text-dim);
font-size: 0.68rem;
font-weight: var(--fw-semibold);
}
/* Zweite Zeile: links der Grund für den Rang, rechts die Kennzahl — jede
unter dem Feld, auf das sie sich bezieht. Zuvor standen beide als ein Satz
mit Trennzeichen nebeneinander und liefen ineinander. */
.rangliste__grund {
grid-column: 2;
margin-top: 0.1rem;
color: var(--glass-text-dim);
font-size: 0.76rem;
}
.rangliste__grund:empty {
display: none;
}
.rangliste__kennzahl {
grid-column: 3;
margin-top: 0.1rem;
/* Links bündig zur Punktzahl darüber, nicht rechts zur Kartenkante.
Beide standen rechtsbündig — die rechte Kante stimmte also, aber der
Text begann je nach Länge woanders: Die Punktzahl bei 912 px, die
Buchholzzahl bei 924 bis 937. Nebeneinanderstehende Angaben derselben
Spalte sollen an derselben Kante anfangen; die ist hier die linke, weil
dort die Zahl steht, die man liest. */
justify-self: start;
color: var(--glass-text-dim);
font-size: 0.76rem;
white-space: nowrap;
}
/* Podium: dieselbe Abstufung und dieselben Metallkanten wie zuvor in der
Tabelle — die Fläche hebt neutral an, das Metall sitzt in der Kante. */
.rangliste__zeile[data-rank="1"] { background: var(--vm-rank-gold); border-left: 4px solid var(--vm-rank-gold-line); }
.rangliste__zeile[data-rank="2"] { background: var(--vm-rank-silver); border-left: 4px solid var(--vm-rank-silver-line); }
.rangliste__zeile[data-rank="3"] { background: var(--vm-rank-bronze); border-left: 4px solid var(--vm-rank-bronze-line); }
.rangliste__zeile[data-rank="1"] .rangliste__name {
font-weight: var(--fw-bold);
}
/* ========== Zurück nach oben ========== */
/* Nur auf langen Seiten eingebunden (siehe live/js/nach-oben.js).
Der Knopf wird per hidden geschaltet — damit ist er zugleich für
Screenreader und für die Tabreihenfolge weg, ohne Zusatzattribute. */
.nach-oben {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: var(--z-sticky-tabs);
width: 44px; /* WCAG 2.5.5: Zielgröße */
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
line-height: 1;
color: var(--glass-text);
background: var(--glass-surface);
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
cursor: pointer;
}
.nach-oben[hidden] { display: none; }
.nach-oben:hover {
background: var(--primary-tint-md);
border-color: var(--accent-border-weak);
}
.nach-oben:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* main wird beim Sprung nach oben kurz fokussierbar gemacht, damit die
Tastaturposition mitwandert. Es soll dabei keinen Rahmen zeigen — der
Fokus ist hier eine Positionsangabe, kein bedienbares Element. */
main[tabindex="-1"]:focus {
outline: none;
}
/* overflow:hidden der Karte klippt die runden Ecken — es macht die Karte
aber auch zum Scrollcontainer, und darin kann nichts kleben. Nur die
Karte mit Ansichtsreitern gibt das Klippen auf; die Ecken werden unten
an ihren erstem und letztem Kind nachgezogen. */
.page-card:has(.tabs) {
overflow: visible;
}
/* inherit statt fester Wert: die Karte ist auf schmalen Geraeten oben
eckig und nur unten rund. Ein fester Radius wuerde dort falsch runden. */
.page-card:has(.tabs) > :first-child {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.page-card:has(.tabs) > :last-child {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
/* Ansichtsreiter bleiben beim Scrollen erreichbar.
Wer unten bei Runde 16 der Ansetzungen steht, will nicht neun Bildschirme
zuruecklegen, nur um zur Rangliste zu wechseln. Die Leiste klebt direkt
unter dem Seitenkopf, der selbst schon sticky ist. */
/* Beide Leisten kleben: Sie steuern, was darunter zu sehen ist. Eine
Steuerung, die wegscrollt, zwingt zum Zurückscrollen, nur um sie wieder
zu erreichen — bei den Terminen über drei Bildschirme, bei den
Ansetzungen über neun. */
.tabs--views,
.tabs--filter {
position: sticky;
top: var(--header-height);
z-index: var(--z-sticky-tabs);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
/* Hinweis anstelle von Rangliste und Kreuztabelle, solange keine Partie
gespielt ist. Beide Panels teilen ihn sich; er sitzt einmal in einem
und einmal in einer Tabellenzelle, deshalb neutral gehalten. */
.vm-leer {
display: block;
padding: 1rem 0.2rem;
color: var(--glass-text-dim);
font-size: 0.88rem;
line-height: 1.55;
max-width: 60ch;
list-style: none;
}
/* Legende der Kreuztabelle.
Jedes Paar aus Zeichen und Bedeutung ist ein eigener Listenpunkt, damit
Screenreader sie nicht zu einem Satz verschmelzen. */
.kreuz-legende {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.3rem 1rem;
margin: 0.7rem 0 0;
padding: 0;
color: var(--glass-text-dim);
font-size: 0.74rem;
}
.kreuz-legende li {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.kreuz-legende__sym {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.4rem;
padding: 0.05rem 0.3rem;
border-radius: var(--radius-xs);
background: linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.13));
color: var(--glass-text);
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
}
/* ═══════════════════════════════════════════════════════════════════
Übersichtsseite der Turniere — die drei Serienkarten.
Die Serienfarbe steckt in --serien-strich und kommt aus serie.json.
Sie erscheint nur als schmaler Streifen links: In einer durchgehend
blauen Oberfläche wirkt jede größere fremde Farbfläche aufgesetzt —
dieselbe Erfahrung, die schon bei der Reiterleiste dazu führte, ganz
auf ein farbiges Band zu verzichten. Ein Streifen genügt, um die
Serie wiedererkennbar zu machen; auf ihrer eigenen Seite kehrt er
wieder.
═══════════════════════════════════════════════════════════════════ */
.serien-liste {
display: grid;
gap: 0.85rem;
}
.serien-karte {
display: grid;
gap: 0.4rem;
padding: 1rem 1.1rem 1.05rem;
border: 1px solid var(--glass-border);
border-left: 3px solid var(--serien-strich, var(--glass-hairline));
border-radius: var(--radius-md);
background: var(--flaeche-vertieft);
}
/* Das Kurzschachturnier ist das öffentliche Turnier und bekommt mehr
Gewicht — etwas mehr Raum und einen warmen Schimmer aus dem Vereinsgelb.
Kein zweiter Rahmen, keine zweite Farbe: Der Unterschied soll spürbar
sein, nicht laut. */
.serien-karte--haupt {
padding: 1.2rem 1.25rem 1.25rem;
background:
linear-gradient(105deg, var(--accent-tint-sm), transparent 55%),
var(--flaeche-vertieft);
}
.serien-karte__kicker {
margin: 0;
font-size: 0.68rem;
font-weight: var(--fw-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--serien-strich, var(--glass-text-dim));
}
.serien-karte__titel {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 1.1rem;
line-height: 1.2;
color: #ffffff;
}
.serien-karte--haupt .serien-karte__titel { font-size: 1.32rem; }
/* Der Titel ist der Verweis — für Screenreader ein sprechender Linktext.
Sein ::after legt sich über die ganze Karte, sodass jeder Punkt darin
anklickbar ist. Vorher war nur der Titel selbst das Ziel: „Zum Turnier →"
unten rechts sah aus wie ein Verweis, war aber Dekoration und reagierte
nicht. Ein Element, das wie ein Link aussieht, muss sich auch so verhalten.
Ein zweiter echter Verweis auf dasselbe Ziel wäre die Alternative gewesen —
für Screenreader aber nur Wiederholung. */
.serien-karte { position: relative; }
.serien-karte__verweis {
color: inherit;
text-decoration: none;
}
.serien-karte__verweis::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.serien-karte:hover .serien-karte__verweis { text-decoration: underline; }
.serien-karte:hover { border-color: var(--glass-hairline); }
/* Der Fokusring gehört um die ganze Karte, nicht nur um den Titel — sonst
zeigt er nicht auf die Fläche, die tatsächlich reagiert. */
.serien-karte:has(.serien-karte__verweis:focus-visible) {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
.serien-karte__verweis:focus-visible { outline: none; }
.serien-karte__text {
margin: 0;
font-size: 0.86rem;
color: var(--glass-text-dim);
max-width: 56ch;
}
.serien-karte__fuss {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 1rem;
margin-top: 0.35rem;
padding-top: 0.6rem;
border-top: 1px solid var(--glass-border);
font-size: 0.79rem;
}
.serien-karte__stand {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--glass-text);
}
/* Der Punkt sagt „läuft" oder „ruht". Er steht immer neben dem Text, der
dasselbe sagt — die Farbe allein trägt die Aussage nicht (WCAG 1.4.1). */
.serien-karte__stand::before {
content: "";
width: 0.48em;
height: 0.48em;
border-radius: 50%;
background: var(--serien-strich, currentColor);
flex: 0 0 auto;
}
.serien-karte__stand--ruht::before { background: rgba(255, 255, 255, 0.28); }
.serien-karte__stand em { font-style: normal; color: var(--glass-text-dim); }
.serien-karte__hin {
margin-left: auto;
color: var(--color-accent);
font-weight: var(--fw-semibold);
white-space: nowrap;
}
/* ── Ehrentafel und Archiv ─────────────────────────────────────────── */
.turnier-einstiege {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: 0.85rem;
margin-top: 0.85rem;
}
.turnier-einstieg {
padding: 0.85rem 1rem;
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
background: var(--flaeche-vertieft);
}
.turnier-einstieg__titel {
margin: 0 0 0.15rem;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 0.98rem;
color: #ffffff;
}
.turnier-einstieg__text {
margin: 0;
font-size: 0.79rem;
color: var(--glass-text-dim);
}
/* Solange die Seiten fehlen, sagt die Karte das — statt einen Verweis
anzubieten, der ins Leere führt. */
.turnier-einstieg__bald {
margin: 0.5rem 0 0;
font-size: 0.7rem;
font-weight: var(--fw-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--glass-text-dim);
opacity: 0.75;
}
.lade-hinweis {
margin: 0;
font-size: 0.86rem;
color: var(--glass-text-dim);
}
/* ═══════════════════════════════════════════════════════════════════
Brotkrume im Seitenkopf der Turnierseiten.
Vier Ebenen sind im Spiel: Abschnitt, Serie, Ausgabe, Ansicht. Die
Ansicht trägt die Reiterleiste; die ersten drei standen vorher gar
nicht oder verstreut da — der Abschnitt klein als Kicker, die Ausgabe
rechts als loses Bedienelement neben der Überschrift.
Hier stehen sie als Pfad, und das LETZTE GLIED ist der Wähler. Damit
wird die Ausgabe dort gewechselt, wo sie in der Ordnung liegt, und
keine Angabe steht zweimal — die Fassung mit Krume UND separatem
Wähler hätte Serie und Saison doppelt gezeigt.
Ohne Verweise: Eine Sammelseite für „Turniere" gibt es bewusst nicht,
und ein Glied, das auf die eigene Seite zeigt, wäre eine Attrappe.
═══════════════════════════════════════════════════════════════════ */
.krume { width: 100%; }
.krume__liste {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.15rem 0.4rem;
list-style: none;
/* Der Abstand nach unten trennt zwei verschiedene Dinge und ist deshalb
grösser als er beim Kicker war (0.45rem):
Ein Kicker GEHÖRT zur Überschrift — eine Zeile, die sie einleitet, und
enge Kopplung ist dort richtig. Eine Brotkrume ist ein eigenständiges
Navigationselement; klebt sie an der Überschrift, liest sie sich wie
deren erste Zeile.
Gemessen: Die Krume hat auf dem Telefon eine 44 px hohe Zeilenbox, weil
der Wähler darin ein Tippziel ist. Ein Abstand von 7 px darunter war
ein Sechstel davon — die Überschrift wirkte angeklebt. */
margin: 0 0 0.95rem;
padding: 0;
font-size: 0.72rem;
line-height: 1.4;
}
.krume__glied {
margin: 0;
color: rgba(255, 255, 255, 0.72);
}
/* Trennzeichen als generierter Inhalt — es gehört zur Darstellung des
Pfades, nicht zum Text der Glieder. */
.krume__glied + .krume__glied::before {
content: "›";
margin-right: 0.4rem;
color: rgba(255, 255, 255, 0.38);
}
/* Das letzte Glied trägt die Ausgabe. Als Wähler bekommt es einen
Rahmen — sonst wäre in einer Zeile aus schlichtem Text nicht zu
erkennen, dass sich hier etwas bedienen lässt. */
.krume__glied--wahl {
display: inline-flex;
align-items: center;
}
.krume__marke {
color: var(--accent-text-fade, rgba(252, 235, 25, 0.72));
font-weight: var(--fw-semibold);
}
.krume__feld {
appearance: none;
-webkit-appearance: none;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-pill);
background-color: rgba(0, 0, 0, 0.3);
color: #ffffff;
font: inherit;
font-weight: var(--fw-semibold);
/* 44 px Tippziel nach WCAG 2.5.5. In einer 0.72rem-Zeile wäre das Feld
sonst rund 20 px hoch — die Krume ist klein, der Wähler darin darf
es nicht sein. Der Innenabstand trägt die Höhe, damit die Schrift
zur übrigen Krume passt. */
min-height: 44px;
padding: 0 1.5rem 0 0.7rem;
cursor: pointer;
/* Eigener Pfeil, weil appearance:none den systemeigenen entfernt. */
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 0.72rem) 55%, calc(100% - 0.44rem) 55%;
background-repeat: no-repeat;
background-size: 0.28rem 0.28rem, 0.28rem 0.28rem;
}
/* Die Auswahlliste zeichnet das Betriebssystem — dort gilt unser
Weiß-auf-Schwarz nicht. */
.krume__feld option {
background: var(--karte-flaeche);
color: var(--glass-text);
}
.krume__feld:hover { border-color: rgba(255, 255, 255, 0.34); }
.krume__feld:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Auf dem Desktop bleibt die Zeile schlank: Dort wird gezielt, nicht
getippt, und ein 44 px hohes Feld sprengte die Krume. */
@media (min-width: 768px) {
.krume__feld {
min-height: 0;
padding: 0.1rem 1.4rem 0.14rem 0.62rem;
}
}
/* Scroll-Pfeile der Reiterleisten.
Sie haften per position:sticky an den Rändern der Leiste — bewusst ohne
umhüllendes Element, damit das Kleben der Leiste selbst unberührt bleibt.
Als Flex-Kinder nehmen sie Platz ein; passt alles ins Bild, entfallen sie
per display:none und kosten nichts. */
.tabs__pfeil {
position: sticky;
z-index: 1;
flex: 0 0 auto;
align-self: stretch;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
padding: 0;
border: 0;
cursor: pointer;
color: var(--tab-text);
/* Deckend, damit die Reiter nicht darunter durchscheinen. Derselbe
Schleier wie die Leiste, plus die Kartenfläche darunter. */
background:
linear-gradient(var(--leiste-aufschlag), var(--leiste-aufschlag)),
var(--karte-flaeche);
}
.tabs__pfeil--links { left: 0; }
.tabs__pfeil--rechts { right: 0; }
.tabs__pfeil.ist-verborgen { display: none; }
.tabs__pfeil:hover { color: var(--tab-text-active); }
.tabs__pfeil:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}
/* Weicher Übergang zu den Reitern, damit die Kante nicht hart abschneidet */
.tabs__pfeil--links::after,
.tabs__pfeil--rechts::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 0.9rem;
pointer-events: none;
}
.tabs__pfeil--links::after {
left: 100%;
background: linear-gradient(to right, var(--karte-flaeche), transparent);
}
.tabs__pfeil--rechts::after {
right: 100%;
background: linear-gradient(to left, var(--karte-flaeche), transparent);
}
/* Geklebte Leiste: erst jetzt braucht sie ein Material, weil Inhalt
darunter durchläuft. Wird von vereinsmeisterschaft.js geschaltet. */
.tabs.ist-geklebt {
background:
linear-gradient(var(--leiste-aufschlag), var(--leiste-aufschlag)),
rgba(var(--karte-rgb), var(--leiste-deckkraft));
backdrop-filter: blur(34px);
-webkit-backdrop-filter: blur(34px);
box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.55);
}
.tabs--filter .tab {
border-radius: var(--radius-pill);
padding: 0.5rem 0.85rem;
}
.tabs--filter .tab--active {
background: var(--tab-aktiv-flaeche);
color: #fff;
}
.tabs--filter .tab::after { content: none; }
.tabs--views .tab--active::after { background-color: var(--color-accent); }
.tabs--views .tab--active { background: transparent; }
.tab:focus-visible {
box-shadow: 0 0 0 2px var(--color-accent);
border-radius: var(--radius-pill);
}
.tabs::-webkit-scrollbar {
height: 4px;
}
.tabs::-webkit-scrollbar-thumb {
background-color: rgba(148, 163, 184, 0.9);
border-radius: var(--radius-pill);
}
/* --- TAB-PANEL (Inhalte) --- */
.tab-panel {
display: none;
padding: 12px 12px 8px;
}
.tab-panel.tab-panel--active {
display: block;
}
/* --- TABLES (Material Design Data Table) --- */
.table-wrapper,
.table-scroll {
border-radius: var(--radius-sm);
border: none;
overflow: auto;
background: rgba(255, 255, 255, 0.06);
box-shadow: none;
}
/* .table-wrapper und .table-scroll führten eigene, hartkodierte Farben und
wichen damit von .table ab. Jetzt speisen sich alle drei aus denselben
--table-*-Tokens — eine Tabelle sieht auf jeder Seite gleich aus. */
.table-wrapper th,
.table-wrapper td,
.table-scroll th,
.table-scroll td {
color: var(--table-text-color);
border-color: var(--table-border-color);
}
.table-wrapper thead th,
.table-scroll thead th {
background: var(--table-header-bg);
color: var(--table-header-text-color);
}
.table,
table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
thead {
background-color: var(--color-surface-muted);
}
th,
td {
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid var(--color-border);
}
th {
font-weight: var(--fw-semibold);
font-size: 0.8rem;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
tbody tr:hover {
background-color: rgba(148, 163, 184, 0.12);
}
.cell-num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.cell-self {
background: var(--table-header-bg);
}
.cell-offen {
background: var(--accent-tint);
}
/* Responsive Spaltenköpfe: Mobile zeigt kurzen Text, Desktop langen Text */
.th-long {
display: none;
}
.th-short {
display: inline;
}
@media (min-width: 768px) {
.th-long {
display: inline;
}
.th-short {
display: none;
}
}
/* ========== Kreuztabelle: Sticky Spalten + Scroll-Hinweis ========== */
/* ========== Teilnehmer: Nr.-Spalte kompakt ========== */
#tab-teilnehmer .table thead th:nth-child(1),
#tab-teilnehmer .table tbody td:nth-child(1) {
width: 3rem;
min-width: 3rem;
text-align: center;
}
/* border-collapse:collapse + overflow:hidden auf .table--card brechen position:sticky in allen Browsern */
#tab-kreuztabelle {
--col-nr-width: 2.5rem; /* Breite der Nr.-Spalte — als Anker für left-Offset der 2. Spalte */
}
#tab-kreuztabelle .table {
border-collapse: separate;
border-spacing: 0;
}
/* overflow:hidden von .table--card aufheben — sonst funktioniert sticky nie */
#tab-kreuztabelle .table--card {
overflow: visible;
}
/* border-radius stattdessen direkt auf die Ecken der Kopfzeile legen */
#tab-kreuztabelle .table thead th:first-child {
border-top-left-radius: var(--radius-md);
}
#tab-kreuztabelle .table thead th:last-child {
border-top-right-radius: var(--radius-md);
}
/* Nr.-Spalte: klebt links am Rand */
#tab-kreuztabelle .table thead th:nth-child(1),
#tab-kreuztabelle .table tbody td:nth-child(1) {
position: sticky;
left: 0;
z-index: 1;
width: var(--col-nr-width);
min-width: var(--col-nr-width);
background: var(--vm-table-solid);
}
/* Teilnehmer-Spalte: klebt direkt nach der Nr.-Spalte */
#tab-kreuztabelle .ist-scrollbar .table thead th:nth-child(2),
#tab-kreuztabelle .ist-scrollbar .table tbody td:nth-child(2) {
box-shadow: var(--sticky-schatten);
}
#tab-kreuztabelle .table thead th:nth-child(2),
#tab-kreuztabelle .table tbody td:nth-child(2) {
position: sticky;
left: var(--col-nr-width);
z-index: 1;
min-width: 8rem;
background: var(--vm-table-solid);
border-right: 2px solid var(--table-border-color);
}
/* Header-Zellen: eigene Hintergrundfarbe + höherer z-index, damit sie über Body-Zeilen liegen */
#tab-kreuztabelle .table thead th:nth-child(1),
#tab-kreuztabelle .table thead th:nth-child(2) {
z-index: 2;
background: var(--vm-thead-solid);
}
/* Ergebnis- und Zahlenspalten: eng und zentriert */
#tab-kreuztabelle .table .cell-num {
text-align: center;
padding-left: 0.3rem;
padding-right: 0.3rem;
min-width: 2rem;
}
/* Pkt.-Spalte: etwas breiter als Ergebnis-Spalten (Werte wie "5,5") */
#tab-kreuztabelle .table thead th:last-child,
#tab-kreuztabelle .table tbody td:last-child {
padding-left: 0.5rem;
padding-right: 0.5rem;
min-width: 2.5rem;
}
/* ========== Rangliste: Sticky Spalten + Scroll-Hinweis ========== */
/* =========================================================
SKELETON LOADING — Ladeindikator
========================================================= */
@keyframes skeleton-shimmer {
0% {
background-position: -400px 0;
}
100% {
background-position: 400px 0;
}
}
.skeleton {
background: linear-gradient(90deg, var(--color-surface-muted) 25%, #e8eaed 50%, var(--color-surface-muted) 75%);
background-size: 800px 100%;
animation: skeleton-shimmer 1.4s ease-in-out infinite;
border-radius: 4px;
display: block;
}
.skeleton-item {
display: grid;
grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
@media (max-width: 767px) {
.skeleton-item {
grid-template-columns: 1fr;
gap: 0.4rem;
}
}
.skeleton-item:last-child {
border-bottom: none;
}
.skeleton-line {
height: 0.85rem;
}
.skeleton-line--short {
width: 60%;
}
.skeleton-line--medium {
width: 80%;
}
.skeleton-line--long {
width: 100%;
}
.skeleton-line + .skeleton-line {
margin-top: 0.4rem;
}
/* ###################################################################################################### */
/* =========================================================
RESPONSIVE: Breakpoints & Gerätegrößen – Strukturprinzipien
---------------------------------------------------------
- Media Queries unterteilen das Layout klar nach Gerätegrößen (Smartphone bis Desktop).
- Schriftgrößen, Containerbreiten und Abstände passen sich stufenweise an,
wodurch Lesbarkeit und Layout-Dichte auf jedem Gerät optimal bleiben.
- Wrapper-Breiten und Paddings werden je nach Breakpoint granular gesteuert,
damit Inhalte weder gequetscht noch zu breit erscheinen.
- Navigation und Menüführung wechseln vom Mobil- zum Desktop-Layout:
Burger-Menü verschwindet zugunsten einer voll sichtbaren horizontalen Navigation.
- Alle Werte für Container, Schrift und Navigation sind zentral steuerbar –
Anpassungen am Responsive-Verhalten sind gezielt und nachvollziehbar möglich.
========================================================= */
/* Tablet aufwärts */
@media (min-width: 768px) {
/* INHALTSBEREICHE */
.site-header__content-wrapper,
.main__content-wrapper,
.site-footer__content-wrapper {
max-width: var(--content-container-max-width-768);
width: var(--content-container-width-768);
padding: var(--content-container-padding-v-768) var(--content-container-padding-h-768);
}
:root {
--card-padding: 1rem 1rem;
}
/* PAGE-CARD */
.page-card__title {
font-size: 1.5rem;
}
.list-item {
grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
gap: 1rem;
}
}
/* Kleine Desktops/Laptops */
@media (min-width: 1024px) {
/* INHALTSBEREICHE */
.site-header__content-wrapper,
.main__content-wrapper,
.site-footer__content-wrapper {
max-width: var(--content-container-max-width-1024);
width: var(--content-container-width-1024);
padding: var(--content-container-padding-v-1024) var(--content-container-padding-h-1024);
}
}
/* OPTIONAL: Große Bildschirme: ab 1200px */
@media (min-width: 1200px) {
/* INHALTSBEREICHE */
.site-header__content-wrapper,
.main__content-wrapper,
.site-footer__content-wrapper {
max-width: var(--content-container-max-width-1200);
width: var(--content-container-width-1200);
padding: var(--content-container-padding-v-1200) var(--content-container-padding-h-1200);
}
:root {
--card-padding: 1.25rem 1.1rem;
}
}
/* --- Responsive Table --- */
/* Mobile-First: Compact table for small screens */
:root {
--table-font-size: 0.82rem;
--table-padding: 6px 8px;
}
.table-wrapper {
font-size: var(--table-font-size);
}
th,
td {
padding: var(--table-padding);
}
/* Ab Tablet (768px): Standard table spacing */
@media (min-width: 768px) {
:root {
--table-font-size: 1rem;
--table-padding: 10px 12px;
}
}
/* =========================================================
NEWS – Seiten-spezifische Styles
TODO: news.html noch nicht implementiert (Navigation auskommentiert)
CSS bleibt für spätere Migration erhalten
========================================================= */
.news-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
margin-top: var(--space-xl);
}
@media (min-width: 768px) {
.news-grid {
grid-template-columns: 1fr 1fr;
}
}
.news-card--featured {
background: linear-gradient(135deg, var(--color-accent), var(--color-surface));
}
.news-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
align-items: center;
margin-bottom: var(--space-xxs);
font-size: var(--type-meta);
color: var(--color-text-secondary);
}
.news-meta__date {
font-variant-numeric: tabular-nums;
}
.news-meta__category {
padding: var(--space-xxs) var(--space-xs);
border-radius: var(--chip-radius);
background: var(--filter-input-bg);
}
/* .news-meta__badge → ersetzt durch .meta-badge (M-01) */
.news-actions {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-xs);
}
.news-year {
font-size: var(--type-meta);
color: var(--filter-input-placeholder-color);
}
.news-empty {
grid-column: 1 / -1;
color: var(--color-text-secondary);
font-size: var(--type-body);
padding: var(--space-md) 0;
}
.news-detail[aria-hidden="true"] {
display: none;
}
.news-detail[aria-hidden="false"] {
display: block;
}
/* =========================================================
VEREIN – Seiten-spezifische Styles
TODO: verein.html noch nicht implementiert (Navigation auskommentiert)
CSS bleibt für spätere Migration erhalten
========================================================= */
.ueber-uns-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-xl);
align-items: flex-start;
}
.ueber-uns-grid > * {
min-width: 0;
}
@media (min-width: 768px) {
.ueber-uns-grid {
grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr);
}
}
.timeline {
list-style: none;
margin: 0;
padding: var(--space-xs) 0 0 var(--space-xxs);
border-left: var(--timeline-border-width) solid var(--color-surface-muted);
}
.timeline__item {
position: relative;
padding-left: var(--space-2xl);
margin-bottom: var(--timeline-gap);
}
.timeline__item::before {
content: "";
position: absolute;
left: var(--timeline-dot-left);
top: var(--timeline-dot-top);
width: var(--timeline-dot-size);
height: var(--timeline-dot-size);
border-radius: 50%;
background-color: var(--color-surface);
border: var(--timeline-border-width) solid var(--color-primary);
box-shadow: var(--timeline-dot-shadow);
}
.timeline__year {
font-size: var(--type-meta);
font-weight: var(--fw-semibold);
color: var(--color-primary-strong);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--space-xxs);
}
.timeline__content h3 {
margin: 0;
font-size: var(--type-card-title);
}
.timeline__content p {
margin: var(--space-xxs) 0 0;
font-size: var(--type-card-body);
color: var(--color-text-secondary);
}
.location-list {
display: flex;
flex-direction: column;
gap: var(--stack-gap);
}
.location-card h3 {
margin: 0 0 var(--space-xxs);
font-size: var(--type-card-title);
}
.location-card p {
margin: var(--space-xxs) 0;
font-size: var(--type-card-body);
color: var(--color-text-secondary);
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-col), 1fr));
gap: var(--stack-gap);
}
.contact-card h3 {
margin: 0 0 var(--space-xxs);
font-size: var(--type-card-body);
font-weight: var(--fw-semibold);
color: var(--color-text-secondary);
}
.contact-card__name {
margin: 0 0 var(--space-xxs);
font-weight: var(--fw-semibold);
}
.contact-card a {
text-decoration: none;
}
.contact-card a:hover {
text-decoration: underline;
}
/* =========================================================
VEREINSMEISTERSCHAFT – Seiten-spezifische Styles
========================================================= */
.section-title {
font-size: var(--type-body);
font-weight: var(--fw-semibold);
margin: 0 0 var(--space-xs);
}
.section-meta {
font-size: var(--type-meta);
color: var(--color-text-secondary);
margin: 0 0 var(--space-xxs);
}
.round-section {
padding: var(--space-md) 0;
}
.round-section + .round-section {
border-top: 1px solid var(--color-border);
}
.round-section:first-child {
padding-top: 0;
}
.round-section__header {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: var(--space-xs);
}
@media (min-width: 768px) {
.round-section__header {
flex-direction: row;
justify-content: space-between;
align-items: baseline;
gap: var(--space-xs);
}
}
.round-section__title {
font-size: 0.9rem;
font-weight: var(--fw-semibold);
margin: 0;
color: var(--color-text-primary);
}
@media (min-width: 768px) {
.round-section__title {
font-size: var(--card-subtitle-font-size);
}
}
.round-section__meta {
font-size: var(--type-small);
color: var(--color-text-secondary);
margin: 0;
}
/* =========================================================
SEITEN-INTRO (chronik.html)
TODO: chronik.html noch nicht implementiert
CSS bleibt für spätere Migration erhalten
========================================================= */
.page-intro {
background: rgba(10, 16, 40, 0.6);
color: var(--color-surface);
padding: var(--space-xl) 0;
}
.page-intro__content-wrapper {
max-width: var(--content-container-max-width-1200);
width: var(--content-container-width-1200);
margin: 0 auto;
padding: 0 var(--content-container-padding-h-320);
}
.page-intro__title {
margin: 0;
color: var(--color-surface);
}
.page-intro__subtitle {
margin: var(--space-xs) 0 0;
font-size: var(--type-card-title);
color: rgba(255, 255, 255, 0.8);
}
/* =========================================================
CARD-INHALTE (verein.html, news.html)
========================================================= */
.card__title {
margin: 0 0 var(--space-xxs);
font-size: 1rem;
font-weight: var(--fw-semibold);
}
.card__subtitle {
margin: 0 0 var(--space-xs);
font-size: var(--type-card-body);
color: var(--color-text-secondary);
}
.card__hint {
margin: var(--space-xs) 0 0;
font-size: var(--type-small);
color: var(--color-text-secondary);
}
.card__actions {
margin-top: var(--space-md);
display: flex;
gap: var(--space-xs);
align-items: center;
}
/* =========================================================
RECHTE SPALTE (verein.html)
========================================================= */
.right-column {
display: flex;
flex-direction: column;
gap: var(--stack-gap);
}
/* =========================================================
IMPRESSUM (impressum.html)
========================================================= */
.contactblock {
font-style: normal;
margin-bottom: var(--space-md);
}
.contactblock p {
margin: 0 0 var(--space-xs);
}
.contact-list {
margin: 0 0 var(--space-md);
padding-left: var(--space-xl);
}
.contact-list li {
margin-bottom: var(--space-xxs);
}
/* =========================================================
LEERE ZUSTÄNDE (termine.html)
========================================================= */
.events__empty {
padding: var(--space-md) 0;
color: var(--color-text-secondary);
font-size: var(--type-body);
}
/* ============================================================
HEADER
============================================================ */
/* =========================================================
HEADER – Flexibles, mobiles Navigations- und Branding-Element
---------------------------------------------------------
- Schmale Kopfzeile mit Logo, Titel und Menü für alle Geräte.
- Flexbox sortiert Branding und Navigation nebeneinander.
- Navigation ist per Burger-Icon mobil als Dropdown verfügbar.
- Alle Größen, Abstände und Farben werden über Theme-Variablen gesteuert.
========================================================= */
/* ---------------------------------------------------------
1. Gerüst: Außencontainer + Inhaltszeile
--------------------------------------------------------- */
.site-header {
position: sticky; /* bleibt beim Scrollen sichtbar; Dropdown (position:absolute) bleibt am Header ausgerichtet */
top: 0;
z-index: var(--header-z-index); /* über Backdrop (999) und Dropdown (1000) */
width: 100%;
min-height: var(--header-height);
height: var(--header-height);
background: var(--header-bg-color);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: var(--header-font-color);
border-bottom: 1px solid var(--header-border-b-color);
box-shadow: var(--header-shadow);
}
.site-header__content-wrapper {
display: flex;
flex-wrap: nowrap; /* Burger darf nie auf eine zweite Zeile rutschen */
align-items: center;
justify-content: space-between;
gap: 0.75rem;
height: 100%;
padding-block: var(--header-content-wrapper-padding-v);
}
/* ---------------------------------------------------------
2. Branding: Logo + zweizeiliger Titel
--------------------------------------------------------- */
.nav-branding {
display: flex;
align-items: center;
gap: var(--header-branding-gap);
min-width: 0; /* erlaubt Schrumpfen → Ellipsis bei engen Viewports */
color: var(--header-title-color);
font-weight: var(--header-title-font-weight);
text-decoration: none;
border-radius: var(--radius-xs);
}
.nav-logo {
height: var(--header-logo-height);
width: auto;
display: block;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-xs);
padding: 3px;
}
.site-title-group {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
min-width: 0; /* Shrinking-Kontext für Ellipsis der Kinder */
}
/* Variante A — gestapeltes Lockup: Akzentzeile „Abteilung Schach" über der
Wortmarke „Krostitzer Sportverein". Beide einzeilig (nowrap), nie abschneiden. */
.site-title {
margin: 0;
font-size: var(--header-title-size-320);
font-weight: var(--header-title-font-weight);
line-height: 1.12;
color: var(--header-title-color);
white-space: nowrap;
}
.site-title-kicker {
font-size: var(--header-kicker-size-320);
font-weight: var(--fw-bold);
line-height: 1.25;
letter-spacing: var(--header-kicker-letter-spacing);
text-transform: uppercase;
color: var(--header-kicker-color);
white-space: nowrap;
}
/* ---------------------------------------------------------
3. Burger-Button (nur < 768px sichtbar)
Zustand wird ausschließlich über aria-expanded gesteuert.
--------------------------------------------------------- */
.burger {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--burger-size);
height: var(--burger-size);
/* schiebt den Burger an den rechten Rand — das leere