/* ========================================================================== Designsystem — Tokens -------------------------------------------------------------------------- Die einzige Datei, in der eine Farbe, eine Schriftgröße, ein Abstand oder ein Radius definiert wird. Steht ein Wert woanders hart im Code, ist das ein Fehler, kein Sonderfall. Dunkel ist kein Modus, sondern das Design. Es gibt keine helle Variante: Eine Liga, die bei der Hälfte der Mitglieder weiß aussieht, ist keine Marke. KONTRASTE Jede Kombination unten ist nachgerechnet, nicht geschätzt (WCAG 2.1, Verhältnis der relativen Leuchtdichten). Drei Werte aus der ursprünglichen Palette haben die Prüfung nicht bestanden und sind angepasst — jeweils mit Begründung an Ort und Stelle. Nachrechnen: node contrast-check.mjs ========================================================================== */ /* ---------------------------------------------------------------- Schriften Selbst gehostet, kein Google-CDN. Bei eingebundenen Google Fonts geht die IP-Adresse jedes Besuchers an Google — für einen eingetragenen Verein mit minderjährigen Mitgliedern ist das ein vermeidbares Risiko (LG München I, 20.01.2022, 3 O 17493/20). Beide Schriften stehen unter der SIL Open Font License, siehe fonts/. */ @font-face { font-family: 'Oswald'; src: url('fonts/oswald-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Oswald'; src: url('fonts/oswald-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Inter'; src: url('fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Inter'; src: url('fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Inter'; src: url('fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } :root { /* ------------------------------------------------------------- Flächen */ --background-primary: #05070B; /* Seitenhintergrund */ --background-secondary: #090E16; /* abgesetzte Bereiche, Kopf- und Fußzeile */ --surface-primary: #0D131D; /* Karten */ --surface-secondary: #111925; /* Eingabefelder, Tabellenzeilen */ --surface-hover: #172131; /* Zeile oder Karte unter dem Zeiger */ --surface-sunken: #070A10; /* Vertiefungen, z. B. Code, Zähler */ /* ---------------------------------------------------------------- Marke */ --brand-red: #E30613; /* Füllfarbe. Weiß darauf: 4,88 : 1 ✓ */ --brand-red-lift: #E80A18; /* hellster Rotton, der Weiß noch mit 4,68 : 1 trägt. Alles darüber fällt unter AA — der Hover-Eindruck kommt deshalb aus Glow und Lichtkante, nicht aus einer helleren Fläche. */ --brand-red-hover: #FF1F2D; /* nur Rahmen, Lichtkante, Glow — nie Fläche unter weißem Text */ --brand-red-dark: #8C0710; /* Tiefe, Ränder, gedrückter Zustand */ /* ----------------------------------------------------------------- Text */ --text-primary: #F5F7FA; /* auf Karte 17,35 : 1 */ --text-secondary: #AEB6C2; /* auf Karte 9,10 : 1 */ --text-muted: #858F9E; /* auf Karte 5,69 : 1 Angehoben von #737D8C: das erreichte auf Karten nur 4,47 : 1 und lag damit unter AA — ausgerechnet für die kleinen Hinweistexte, für die man solche Farben benutzt. */ --text-on-brand: #FFFFFF; --text-inverse: #05070B; /* auf Gold: 10,84 : 1 */ /* --------------------------------------------------------------- Rahmen */ --border-default: #343C47; /* dekorative Kartenkante */ --border-strong: #6C7684; /* bedeutungstragende Kanten, vor allem Eingabefelder. Angehoben von #58616D (2,81 : 1): WCAG 1.4.11 verlangt 3 : 1 für Bedienelemente, sonst ist nicht erkennbar, wo ein Feld anfängt. Jetzt 3,84 : 1. */ /* ------------------------------------------------------------- Zustände */ --success: #25C45A; /* auf Karte 8,09 : 1 */ --warning: #F5B942; /* auf Karte 10,55 : 1 */ --error: #E30613; /* Fläche und Rahmen */ --error-text: #FF4A55; /* Fließtext. #E30613 als Text erreicht auf Karten nur 3,81 : 1 und taugt damit ausschließlich für große Zahlen. Fehlermeldungen sind klein. */ --gold: #E9B657; /* ausschließlich Meister, Pokal, Ehrenmitglied, Premium */ /* Ein Zustand darf nie allein an der Farbe hängen. Rot ist gleichzeitig Marken- und Fehlerfarbe; ohne zweites Merkmal wäre für rot-grün-blinde Mitglieder ein Fehler nicht von einer Schaltfläche zu unterscheiden. Deshalb trägt jeder Zustand zusätzlich Rahmen, Symbol und Klartext. */ --success-bg: rgba(37, 196, 90, .10); --warning-bg: rgba(245, 185, 66, .10); --error-bg: rgba(227, 6, 19, .12); --brand-bg: rgba(227, 6, 19, .10); --gold-bg: rgba(233, 182, 87, .10); /* ----------------------------------------------------------- Typografie */ --font-display: 'Oswald', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-numeric: 'Oswald', system-ui, sans-serif; --fs-display: clamp(2.25rem, 7vw, 3.5rem); /* Seitentitel */ --fs-h1: clamp(1.75rem, 5.5vw, 2.5rem); --fs-h2: 1.375rem; --fs-h3: 1.0625rem; --fs-label: 0.75rem; /* Versalien über Zahlen */ --fs-body: 1rem; --fs-small: 0.875rem; --fs-tiny: 0.8125rem; /* kleinster Fließtext. Darunter geht nichts. */ --fs-stat: clamp(2.5rem, 9vw, 4rem); /* die große Zahl */ --fs-stat-sm: clamp(1.75rem, 6vw, 2.25rem); --lh-tight: 1.05; /* kondensierte Überschriften */ --lh-snug: 1.3; --lh-body: 1.6; --ls-display: 0.01em; --ls-label: 0.14em; /* Versalien brauchen Luft */ /* -------------------------------------------------------------- Abstände 4-px-Raster. Zwischenwerte gibt es nicht. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --card-padding: var(--space-4); /* mobil */ --page-padding: var(--space-4); --content-max: 680px; /* Lesebereich */ --wide-max: 1180px; /* Tabellen, Dashboard */ /* ---------------------------------------------------- Ecken und Rahmen */ --radius-card: 10px; --radius-button: 7px; --radius-input: 7px; --radius-badge: 999px; /* nur Status-Badges */ --radius-sm: 5px; --border-width: 1px; /* ------------------------------------------------------------- Schatten Tiefe entsteht durch Dunkelheit, nicht durch graue Weichzeichner. */ --shadow-card: 0 1px 2px rgba(0, 0, 0, .55); --shadow-raised: 0 4px 16px rgba(0, 0, 0, .60); --shadow-overlay: 0 24px 64px rgba(0, 0, 0, .75); --glow-red: 0 0 0 1px rgba(255, 31, 45, .45), 0 4px 20px rgba(227, 6, 19, .35); --glow-red-soft: 0 0 24px rgba(227, 6, 19, .22); --glow-gold: 0 0 0 1px rgba(233, 182, 87, .40), 0 4px 20px rgba(233, 182, 87, .22); /* -------------------------------------------------------------- Bewegung */ --ease: cubic-bezier(.2, .7, .3, 1); --dur-fast: 120ms; --dur: 180ms; --touch-min: 44px; /* WCAG 2.5.8 */ --z-header: 50; --z-nav: 60; --z-overlay: 100; } @media (min-width: 768px) { :root { --card-padding: var(--space-6); --page-padding: var(--space-8); } } /* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt weniger Bewegung. Das ist keine Einstellung der App, sondern eine Zusage. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Bei erhöhtem Kontrastbedarf werden Kanten härter, nicht Farben bunter. */ @media (prefers-contrast: more) { :root { --border-default: #6C7684; --border-strong: #98A2B0; --text-muted: #AEB6C2; } }