/* Design tokens für die Trainingsplattform. Übernommen und erweitert aus dem bestehenden statischen Dashboard (Downloads/garmin_dashboard_1.html) — gleiche "Trainingskonsole"-Optik, jetzt als wiederverwendbare CSS-Variablen für alle Seiten. */ :root { /* ============================================================ Flächen — Beta 7.3 "Design System Update Punkt 10/56/57": ECHTER Farbwertwechsel (keine Alias-Umbenennung) auf ein von der Marken-Navy (#0A1F3D) abgeleitetes, abgestuftes Dark- System. Vorher: neutrales Blaugrau (#0A0F1A/#111827/#161F30), kaum von einem generischen Dashboard-Dunkelmodus zu unterscheiden. Jetzt: sichtbar staerker blau/navy gefaerbt, mit klar unterscheidbaren Stufen fuer Page-Background/Card/Elevated-Card/Nav statt eines einzelnen Tons ueberall (Punkt 17: "nicht einfach alles #0A1F3D"). Kontrastwerte gegen --text (#EAF0FA) live gegen Overview/Training/Coach geprueft, keine Lesbarkeitsregression. ============================================================ */ --bg: #060D1C; --panel: #0D1D36; --panel-alt: #102544; --panel-raised: #163259; --border: #24446F; --border-soft: rgba(0, 122, 255, 0.16); /* v10.2.3 Light Mode Final Pass (Mandat §32-35, "weekly view readability"): eigener Token statt der bisherigen direkten --panel-alt-Wiederverwendung in .wk-progress-bar (dashboard.css) — auf Dark Mode identisch zu --panel-alt (keine sichtbare Aenderung hier), aber tokens-light.css ueberschreibt ihn separat mit einem deutlich kontrastreicheren Wert, weil --panel-alt dort fast dieselbe Helligkeit wie die Wochenkarten-Flaeche (--surface-hero) hat und der leere Fortschrittsbalken (0%-Track) dadurch real kaum sichtbar war (siehe tokens-light.css). */ --wk-progress-track: var(--panel-alt); /* Text */ --text: #EAF0FA; --text-muted: #8296B8; /* TALVAXO Beta Release 1.0 (real axe-core finding, live browser audit): #55617A on this token's actual dark-mode usage backgrounds (system-health chips #102544, context-group labels #0a1830, tile time-context text) measured 2.46:1/2.84:1 -- below WCAG AA's 4.5:1 for normal-size text. #8B96AB clears every measured usage with margin (5.14-6.51:1) without materially changing the "dim/muted" visual role relative to --text-muted/--text above it. */ --text-dim: #8B96AB; /* TALVAXO Beta Release 1.0 (real axe-core finding, light-theme-only): a few minimal-shell pages (admin.html, the legal-*.html "back" link) place --text-muted directly on the raw page --bg, not on a lighter --panel/--surface -- light mode's --bg (#9CA2AF) is much closer in luminance to --text-muted than dark mode's --bg (#060D1C) is, so this specific pairing needed its own token (dark mode's own text-muted-on-bg already passes at 6.47:1, so it equals --text-muted here; tokens-light.css overrides it darker). */ --text-muted-on-bg: var(--text-muted); /* Nutzerauftrag 2026-08-29 ("Dark/Light Mode umschaltbar"): Sidebar (.app-nav, siehe components.css) nutzt eigene --nav-*-Tokens statt direkt --bg/--text/etc., damit sie eine eigene, vom restlichen Content leicht abgesetzte Flaeche bleibt. Hier stehen die DARK-MODE- Werte (identisch zum bisherigen Look); assets/css/tokens-light.css ueberschreibt sie fuer [data-theme="light"] mit eigenen hellen Werten (Nutzerauftrag 2026-08-29 Teil 2: Sidebar soll im Light Mode NICHT mehr dunkel bleiben, sondern mitschalten). Nutzerauftrag 2026-08-29 ("Menueband etwas transparent machen, in Dark UND Light Mode"): RGBA statt opakem Hex, damit die Wellenanimation (.wave-bg/.wave-particles-bg, siehe base.css) leicht durchscheint — .app-nav bekommt dafuer in components.css zusaetzlich backdrop-filter blur/ saturate (dasselbe Milchglas-Prinzip wie --surface-hero bei den Karten), sonst waere Nav-Text ueber den Wellenlinien schlecht lesbar. */ --nav-bg-top: rgba(6, 13, 28, 0.78); --nav-bg-bottom: rgba(4, 10, 22, 0.78); /* Nutzerauftrag 2026-08-30 ("Sidebar soll immer den milchigen Effekt haben, nicht durchsichtig wirken"): leicht angehobene Alpha, nur waehrend der Seiten-Loader aktiv ist (siehe page-loader.css) — gleicht den staerkeren Wellen-Boost dahinter aus, bleibt aber klar Milchglas (0.90, nicht nahezu deckend wie der zuvor verworfene 0.97-Versuch). */ --nav-bg-top-loading: rgba(6, 13, 28, 0.90); --nav-bg-bottom-loading: rgba(4, 10, 22, 0.90); --nav-text: #EAF0FA; --nav-text-muted: #8296B8; --nav-text-dim: #8B96AB; /* same WCAG AA contrast fix as --text-dim above */ --nav-hover-bg: #102544; /* Akzentfarbe fuer aktiven Nav-Link/Icon + Theme-Toggle-Hover. Dark Mode: Marken-Cyan (wie bisher). Light Mode ueberschreibt dies in tokens-light.css auf --talvaxo-blue, weil helles Cyan auf hellem Sidebar-Grund (beides hohe Luminanz) sonst zu wenig Kontrast haette. */ --nav-active-accent: var(--talvaxo-cyan); /* ============================================================ TALVAXO BRAND TOKENS (Rebranding, Nutzerauftrag Punkt 19-20/30) — ausschließlich für Markenauftritt (Logo, aktive Navigation, primäre CTA, Progress-/Highlight-Elemente, Brand Divider). AUSDRÜCKLICH NICHT für Health-/Status-Semantik verwendet (Punkt 21: "SEMANTIK HAT VORRANG") — --status-good/-warn/-bad unten bleiben unverändert auf --teal/--amber/--crimson gemappt, nie auf --talvaxo-*. Werte 1:1 aus dem bereitgestellten TALVAXO Brand Kit übernommen (siehe docs/branding/README.md für Herkunft/Priorität der Referenzsheets), keine frei erfundenen Farben. ============================================================ */ --talvaxo-navy: #0A1F3D; --talvaxo-navy-secondary: #0E2A52; --talvaxo-blue: #007AFF; --talvaxo-cyan: #00E5FF; --talvaxo-violet: #7A5CFF; --talvaxo-off-white: #F2F4F7; --talvaxo-white: #FFFFFF; --talvaxo-gradient: linear-gradient(135deg, var(--talvaxo-blue) 0%, var(--talvaxo-cyan) 55%, var(--talvaxo-violet) 100%); /* Akzentfarben (aus Originaldashboard übernommen) */ --teal: #2FD9C4; --teal-dim: rgba(47, 217, 196, 0.12); /* TALVAXO Beta Release 1.0 (real axe-core finding, light-theme-only): --teal text directly on --panel-raised (the "active toggle button" pairing, .view-toggle/.range-toggle button.active) measures only 2.93:1 in light mode against tokens-light.css's own --panel-raised (#BEC2CC) -- below WCAG AA's 4.5:1. Dark mode's own pairing already passes at 7.25:1, so this dedicated token equals --teal here and is overridden darker only in tokens-light.css. */ --teal-on-panel: var(--teal); --amber: #F0A94E; --amber-dim: rgba(240, 169, 78, 0.12); --crimson: #EF5B6B; --crimson-dim: rgba(239, 91, 107, 0.12); --indigo: #8B95F6; --indigo-dim: rgba(139, 149, 246, 0.12); --moss: #A8C972; --moss-dim: rgba(168, 201, 114, 0.12); /* Semantische Ampel-Farben — auf bestehende Akzente gemappt, damit Statusanzeigen visuell zur restlichen Plattform passen. */ --status-good: var(--teal); --status-good-dim: var(--teal-dim); --status-warn: var(--amber); --status-warn-dim: var(--amber-dim); --status-bad: var(--crimson); --status-bad-dim: var(--crimson-dim); --status-neutral: var(--text-dim); --status-neutral-dim: rgba(255, 255, 255, 0.04); /* Beta 10.0 Final Core Closure (Mandat Teil Q §123-124, "Hard-coded colors audit" — Theme QA): mehrere Komponenten nutzten bisher direkt rgba(255,255,255,0.0X) als subtile "neutrale" Aufhellung (Trennlinien/Badge-Hintergruende/Ring-Track) — auf einer bereits HELLEN Flaeche (Light Mode) ist ein weisses Overlay bei dieser Opazitaet quasi unsichtbar (weiss auf weiss), auf einer dunklen Flaeche (Dark Mode) hellt es sichtbar auf. Zwei Tokens fuer dieselbe ABSICHT ("dezente neutrale Betonung relativ zur Kartenflaeche"), aber gegensaetzliche Richtung je Theme — tokens-light.css definiert beide mit einer dunklen statt hellen Tönung. --hairline fuer Trennlinien (~8% Deckkraft), --neutral-chip-bg fuer Badge-/Pill-Hintergruende (~5% Deckkraft). */ --hairline: rgba(255, 255, 255, 0.08); --neutral-chip-bg: rgba(255, 255, 255, 0.05); /* Typografie */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Sonstiges */ --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; --radius-pill: 20px; --content-max: 1280px; --nav-width: 220px; /* Beta 7.7 (Punkt 34-37, "Large Screen Width" — P1): 1280px war fix fuer JEDE Breite, auf 1920px+ Monitoren blieb dadurch ein grosser ungenutzter rechter Bereich. Wird unten per @media adaptiv erweitert (Laptop bleibt kompakt bei 1280px, Large Desktop/Ultrawide bekommen mehr Raum) — die einzelnen Grids (Hero/Weekly/Marathon/Charts) nutzen die zusaetzliche Breite bereits ueber ihre bestehenden responsiven Spaltenregeln, ohne dass jede Karte stur proportional gestreckt wird. */ /* V5.2 Design Tokens (Nutzerauftrag "UX/Design/IA Polishing", Teil E) — bisher leicht unterschiedliche Abstände/Radien je Komponente vereinheitlicht auf eine gemeinsame Skala, die neue Dashboard-Komponenten (Hero-Zone, Capability-Cards, Hover/Click-States) UND bestehende Komponenten (components.css/dashboard.css) gemeinsam nutzen. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.22); --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.28); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.34); /* 150-350ms je Kontext (Teil J) — "fast" für Mikro-Feedback (Hover/Klick), "base" für Card-/Inhaltswechsel, "slow" für größere Übergänge (Ring/Progress-Animationen). */ --transition-fast: 150ms ease; --transition-base: 220ms ease; --transition-slow: 340ms ease; --icon-sm: 14px; --icon-md: 18px; --icon-lg: 24px; /* Interaktive Card-Oberfläche (Teil F/G) — dezente Anhebung/Border/Surface-Änderung, nie eine aggressive komplette Farbänderung. */ --card-surface-hover: var(--panel-raised); --card-lift-hover: -2px; --card-scale-press: 0.985; /* ============================================================ V5.2 VISUAL REBUILD — erweiterte Tokens für die neu gebauten Dashboard-Komponenten (Hero, Readiness-Ring, Metric Tiles, Range-Bars, Weather-Timeline). Ergänzt die obigen Tokens, ersetzt sie nicht — bestehende Seiten bleiben unverändert. ============================================================ */ /* Typografie-Hierarchie (Punkt 26) — Kennzahlen/Displays deutlich größer/stärker als Labels, statt überall dieselbe Schriftgröße. */ --fs-display: 40px; --fs-h1: 28px; --fs-h2: 20px; --fs-h3: 16px; --fs-body: 14px; --fs-small: 12px; --fs-metric: 30px; --fs-metric-sm: 20px; --fs-label: 11px; --lh-tight: 1.1; --lh-normal: 1.5; --ls-label: 0.06em; /* Depth/Surface-System (Punkt 24/25) — Base/Raised/Interactive/Selected statt einer flachen Fläche + Einzelboxen. */ --surface-base: var(--bg); --surface-section: #0A1830; --surface-card: var(--panel); --surface-raised: var(--panel-raised); --surface-interactive: #1B3B66; --surface-selected: #204A80; /* Kontrast-Korrektur: der erste Entwurf (#16305A Startstop) senkte den Kontrast von --text-dim-Text (z.B. .dh-date) im hellsten Eck der Hero-Card auf 2.1:1 (unter dem bereits vorher grenzwertigen Bestandswert von 2.73:1 gegen den alten Hero-Ton #131C30) — echte, gemessene Verschlechterung, kein Rate-Wert. #0A1830 liegt bei 2.85:1 gegen --text-dim, also BESSER als der bisherige Bestand, bei weiterhin sichtbar navy-satteren Ton als das alte #131C30. (Der grundsaetzliche AA-Gap von --text-dim selbst ist app-weit vorbestehend, siehe Abschlussbericht "Offene Punkte" — dieser Fix verhindert nur, dass diese Session ihn verschaerft.) */ /* Nutzer-Feedback 2026-08-29 ("alle Felder etwas transparent machen, damit man den Wellen-Hintergrund leicht durchsieht"): Alpha statt voll deckender Hex-Farben, plus backdrop-filter an den Verbrauchsstellen (siehe dashboard.css) fuer einen ruhigen, "Frosted Glass"-Effekt statt scharf durchscheinender Wellenbewegung hinter dem Text. Korrektur (Folge-Feedback, selbes Datum): 0.86 Alpha + 16px Blur verschluckte die duennen Wellenlinien fast komplett in Bereichen, wo die Welle an sich schon schwach ist (z.B. die Hero-Card oben auf der Seite) — sichtbar blieb sie nur dort, wo die Welle ohnehin sehr hell ist (z.B. hinter den Metric-Tiles weiter unten). Das erzeugte den Eindruck, einzelne Karten seien unterschiedlich/gar nicht transparent, obwohl alle dieselben Werte trugen. Niedrigere Alpha + schwaecherer Blur lassen die Welle jetzt ueberall gleichmaessiger durchscheinen. */ /* Nutzerauftrag ("Durchsichtigkeit der Karten ab Gesundheit & Bereitschaft wieder verringern, Welle scheint zu sehr durch, Dark UND Light"): direkte Folge der Wave-Sichtbarkeits-Korrektur (staerkere Farben/Deckkraft der Welle selbst) — dieselbe Karten-Alpha wie zuvor liess dadurch spuerbar mehr von der Welle durch als beabsichtigt. Alpha wieder erhoeht (0.7 -> 0.84), bewusst unter dem zuvor verworfenen 0.86-Wert (siehe Historie oben: der galt in Kombination mit staerkerem Blur als zu stark/inkonsistent) — die Welle selbst ist inzwischen gleichmaessiger hell (mehr Farbverlauf-Stopps, siehe wave-canvas-engine.js), das fruehere Inkonsistenz-Risiko ist dadurch geringer. */ --surface-hero: linear-gradient(160deg, rgba(10, 24, 48, 0.84) 0%, rgba(8, 20, 40, 0.84) 55%, rgba(6, 13, 28, 0.84) 100%); /* v10.2.1 (Mandat Teil 36, "distinct luminous cool surface" fuer die Stage): im Dark Mode bereits ausreichend vom Hintergrund abgesetzt (Nutzer-Feedback zu v10.2), deshalb hier identisch zu --surface-hero -- der eigentliche Unterschied entsteht erst in tokens-light.css. */ --surface-stage: var(--surface-hero); /* Scrim hinter dem Feedback-Modal (components.css) — dunkel genug, um den Dialog klar vom Seiteninhalt abzuheben. NICHT mehr fuer den Seiten-Loader verwendet (siehe --loader-page-scrim unten) — beide Verwendungszwecke brauchen unterschiedliche Deckkraft. */ --loader-scrim: rgba(6, 9, 13, 0.72); /* Nutzerauftrag 2026-08-30 ("ich kann die Welle beim Seitenwechsel nicht sehen"): der Seiten- Loader nutzte bisher denselben dunklen 0.72-Scrim wie das Feedback-Modal — das hat den zeitgleich eingefuehrten Helligkeits-Boost der Welle (siehe page-loader.css) praktisch wieder zunichte gemacht, die Welle blieb hinter dem dunklen, unscharfen Scrim kaum sichtbar. Deutlich transparenter, damit die (jetzt hellere) Welle waehrend des Ladens tatsaechlich sichtbar bleibt. */ --loader-page-scrim: rgba(6, 9, 13, 0.32); /* Semantische Farbrollen (Punkt 28) — statt zufälliger Farben je Card. */ --color-success: var(--teal); --color-attention: var(--amber); --color-warning: var(--crimson); --color-neutral: var(--text-dim); /* Beta 7.3 Punkt 10/78: echter Farbwechsel (nicht nur Alias) — --color-primary trieb bisher Hero-Icon/Fokusringe/Hover-Akzente in generischem Indigo statt Markenfarbe. Jetzt TALVAXO Electric Blue, damit dieselben, bereits ueberall verdrahteten interaktiven Akzente automatisch markenkonform werden, ohne jede Komponente einzeln anzufassen. --color-training bleibt bewusst auf --indigo (eigene Trainings-Kategoriefarbe, keine Vermischung mit dem allgemeinen Primary-Akzent noetig). */ --color-primary: var(--talvaxo-blue); --color-recovery: var(--moss); --color-training: var(--indigo); --color-weather: #5AC8E8; /* Dezente Gradients (Punkt 29) — nur für Hero/Readiness/Progress/Weather. */ --gradient-ready: linear-gradient(135deg, rgba(47, 217, 196, 0.20), rgba(47, 217, 196, 0.02)); --gradient-caution: linear-gradient(135deg, rgba(240, 169, 78, 0.20), rgba(240, 169, 78, 0.02)); --gradient-recovery: linear-gradient(135deg, rgba(239, 91, 107, 0.20), rgba(239, 91, 107, 0.02)); /* Beta 7.3 Punkt 63/82: echte TALVAXO-Markenfarben statt generischem Indigo-Wash — der Hero- Bereich (der prominenteste Ort der Overview) bekommt dadurch sichtbar TALVAXO-Charakter, bleibt aber mit 18%/2%-Opacity bewusst sehr subtil (Punkt 18: "sparsam verwenden", kein durchgehend sichtbarer bunter Farbfleck). */ --gradient-primary: linear-gradient(135deg, rgba(0, 122, 255, 0.16), rgba(122, 92, 255, 0.10), rgba(0, 229, 255, 0.02)); /* Platform Finish II (Part F §46, "background depth" — tokenisiert aus base.css body{} heraus, damit Light Mode einen eigenen, staerkeren Wert setzen kann statt denselben, auf dunklem Grund abgestimmten Alpha-Wert zu erben. Dark-Mode-Werte hier unveraendert gegenueber dem vorherigen festverdrahteten body-Rule. */ --bg-glow-1: rgba(47, 217, 196, 0.06); --bg-glow-2: rgba(139, 149, 246, 0.05); /* Shadow-System (Punkt 30) — konsistent für Hover/Active/Raised statt je Card unterschiedlich. */ --shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.24); --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.32); --shadow-glow-ready: 0 0 0 1px rgba(47, 217, 196, 0.28), 0 8px 24px rgba(47, 217, 196, 0.10); --shadow-glow-caution: 0 0 0 1px rgba(240, 169, 78, 0.28), 0 8px 24px rgba(240, 169, 78, 0.10); --shadow-glow-recovery: 0 0 0 1px rgba(239, 91, 107, 0.28), 0 8px 24px rgba(239, 91, 107, 0.10); --transition-ring: 900ms cubic-bezier(0.22, 0.61, 0.36, 1); /* ============================================================ V6.1 DASHBOARD SECTION CONTRACT TOKENS (Mandat "Visual Rebuild der Overview", Teil A) — EIN zentraler Satz an Abstands-/Padding-Werten für Zone-Abstand/Header-Abstand/Card-Gap/Card-Padding, ersetzt die bisher über einzelne Komponenten verstreuten, teils per Inline-Style gesetzten Werte (14px/12px/10px/2px/0 je Karte). Responsive über @media in dashboard.css neu zugewiesen, nicht hier (Tokens selbst bleiben Desktop-Default). */ --zone-gap: 32px; /* Section -> Section, Desktop */ --zone-gap-tablet: 24px; --zone-gap-mobile: 20px; --zone-header-gap: 16px; /* Section Header -> Section Content */ --card-gap: 16px; /* Card -> Card im Grid, Desktop */ --card-gap-mobile: 12px; --card-pad: 20px; /* Einheitliches Card-Padding (PRIMARY/SECONDARY) */ --card-pad-compact: 16px; /* COMPACT-Cards (z.B. Bestzeiten, sekundär) */ /* ============================================================ TALVAXO DESIGN SYSTEM ALIASES (Design-System-Update Punkt 3-5) — die App hat bereits seit V5.2 ein vollstaendiges, produktiv genutztes Surface-/Text-/Radius-/Spacing-Tokensystem (siehe oben: --panel/--panel-alt/--panel-raised, --border/--border-soft, --text/--text-muted/ --text-dim, --status-good/-warn/-bad/-neutral, --radius-sm/--radius/--radius-lg, --space-1..8). Statt ein ZWEITES, parallel gepflegtes Tokensystem mit eigener Farblogik einzufuehren (Risiko: beide laufen auseinander, doppelte Wahrheit) sind dies bewusst reine ALIASE auf die bestehenden, bereits ueberall verwendeten Werte — deckt die im Mandat namentlich geforderten --talvaxo-bg-*/-border-*/-text-*/-radius-*/-space-*-Variablennamen ab, OHNE bestehende components.css/dashboard.css-Deklarationen anzufassen (kein Rebuild-Risiko ueber 13 Seiten hinweg). --talvaxo-blue/-cyan/-violet/-gradient existieren bereits oben (Markenfarben selbst, keine Aliase). */ --talvaxo-bg-primary: var(--bg); --talvaxo-bg-secondary: var(--surface-section); --talvaxo-bg-card: var(--panel); --talvaxo-bg-elevated: var(--panel-raised); --talvaxo-border: var(--border); --talvaxo-border-active: var(--talvaxo-blue); --talvaxo-text-primary: var(--text); --talvaxo-text-secondary: var(--text-muted); --talvaxo-text-muted: var(--text-dim); --talvaxo-success: var(--status-good); --talvaxo-warning: var(--status-warn); --talvaxo-danger: var(--status-bad); --talvaxo-neutral: var(--status-neutral); --talvaxo-radius-sm: var(--radius-sm); --talvaxo-radius-md: var(--radius); --talvaxo-radius-lg: var(--radius-lg); --talvaxo-space-xs: var(--space-1); --talvaxo-space-sm: var(--space-2); --talvaxo-space-md: var(--space-4); --talvaxo-space-lg: var(--space-6); --talvaxo-space-xl: var(--space-8); /* ============================================================ v10.2 "APP VISUAL EXPERIENCE — PHASE 1" (Overview Intelligence Stage) — kleine, gezielte Ergaenzung des bestehenden Tokensystems oben, kein Parallelsystem (Mandat Teil 73: "Do not duplicate arbitrary values... integrate cleanly"). --radius-xl ist neu (die bisherige Skala endete bei --radius-lg:14px — die grosse Stage-Flaeche braucht einen sichtbar grosszuegigeren Radius als eine normale Karte, Mandat Teil 22). --accent-data/-intelligence/-adaptive sind reine Bedeutungs-Aliase auf die bereits bestehenden Markenfarben (Mandat Teil 7/73: Blue=Athleten-/ Trainingsdaten, Cyan=Intelligenz/Analyse, Violet=adaptive Entscheidung) -- keine neuen Farbwerte. */ --radius-xl: 22px; --accent-data: var(--talvaxo-blue); --accent-intelligence: var(--talvaxo-cyan); --accent-adaptive: var(--talvaxo-violet); } /* Beta 7.7 (Punkt 34-37/102-105, "Large Screen Width"): Content-Breite waechst gestuft mit dem Viewport statt starr bei 1280px zu bleiben. 1600px/1920px sind bewusst deutlich unter den realen Zielaufloesungen (1920/2560) gewaehlt, damit die Grenze bereits greift, sobald am Fenster selbst (nicht erst am vollen Bildschirm) genug Platz ist. Ultrawide (>=2560px, Punkt 104) waechst nicht weiter mit — Punkt 105 "keine unendlich breiten Zeilen", Textzeilen/Cards sollen nicht endlos lang werden, auch wenn der Monitor es erlauben wuerde. */ @media (min-width: 1600px) { :root { --content-max: 1440px; } } @media (min-width: 1920px) { :root { --content-max: 1520px; } }