/* ========================================================= Design-Tokens — Ergänzung zu m3.css Sturm und Gewitterjagd Tirol Wird direkt NACH m3.css und VOR den Theme-Overrides des Admin-Editors geladen (templates/m3/base.html.twig). Enthält, was m3.css fehlt: 1. Abstands-Skala --sp-* 2. Tippziele --target-min 3. Schriftskalierung --font-scale (Lesbarkeits-Modus) 4. EINE Warnstufen-Semantik --wx-warn-* 5. Kontrast-Modus 6. prefers-reduced-motion Regel: Kein Hex direkt in Templates oder Seiten-CSS. Alle Farben kommen aus m3.css oder von hier. ========================================================= */ :root { /* ============ 1. ABSTÄNDE ============ Vielfache von 4. Alles, was Abstand ist, kommt von hier — keine krummen Pixelwerte mehr. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 56px; --sp-9: 72px; /* ============ 2. TIPPZIELE ============ Kleinste Höhe für alles Antippbare — Schaltflächen, Zeilen in Listen, Ankreuzfelder. 48px ist das Maß, das ein Finger sicher trifft; im Großmodus wächst es mit. */ --target-min: 48px; /* ============ 3. SCHRIFTSKALIERUNG ============ Der Lesbarkeits-Modus multipliziert alle Schriftgrößen. Verwendung: font-size: calc(15px * var(--font-scale)); Normal 1 · Groß 1.15 · Sehr groß 1.32 */ --font-scale: 1; /* ============ 4. WARNSTUFEN ============ Eine einzige Quelle für die Warn-Ampel. Abgeleitet aus den Basisfarben in m3.css, damit Dunkelmodus und Theme-Editor automatisch mitziehen. -bg Fläche hinter dem Hinweis (hell hinterlegt) -fg Kräftige Farbe für Rand, Symbol, Plakette -on Textfarbe auf der kräftigen Farbe (folgt dem Thema: im Dunkelmodus ist -fg hell und braucht dunkle Schrift) -edge Randfarbe für Umrisse -voll Vollflächige Einfärbung einer ganzen Kachel -auf-voll Textfarbe auf dieser Vollfläche -fg und -voll sind zwei verschiedene Rollen: die Plakette setzt einen Akzent auf hellem Grund und darf kräftig sein, die Ampel-Kachel färbt eine ganze Fläche und muss heller bleiben, damit der Text darauf lesbar ist. Deshalb hängen sie an warn-N bzw. warn-N-container. */ --wx-warn-1-fg: var(--md-sys-color-warn-1); --wx-warn-1-bg: color-mix(in srgb, var(--md-sys-color-warn-1) 14%, var(--md-sys-color-surface-container-lowest)); --wx-warn-1-on: var(--md-sys-color-on-warn-1); --wx-warn-1-edge: color-mix(in srgb, var(--md-sys-color-warn-1) 55%, transparent); --wx-warn-1-voll: var(--md-sys-color-warn-1-container); --wx-warn-1-auf-voll: var(--md-sys-color-on-warn-1-container); --wx-warn-2-fg: var(--md-sys-color-warn-2); --wx-warn-2-bg: color-mix(in srgb, var(--md-sys-color-warn-2) 20%, var(--md-sys-color-surface-container-lowest)); --wx-warn-2-on: var(--md-sys-color-on-warn-2); --wx-warn-2-edge: color-mix(in srgb, var(--md-sys-color-warn-2) 60%, transparent); --wx-warn-2-voll: var(--md-sys-color-warn-2-container); --wx-warn-2-auf-voll: var(--md-sys-color-on-warn-2-container); --wx-warn-3-fg: var(--md-sys-color-warn-3); --wx-warn-3-bg: color-mix(in srgb, var(--md-sys-color-warn-3) 16%, var(--md-sys-color-surface-container-lowest)); --wx-warn-3-on: var(--md-sys-color-on-warn-3); --wx-warn-3-edge: color-mix(in srgb, var(--md-sys-color-warn-3) 55%, transparent); --wx-warn-3-voll: var(--md-sys-color-warn-3-container); --wx-warn-3-auf-voll: var(--md-sys-color-on-warn-3-container); --wx-warn-4-fg: var(--md-sys-color-warn-4); --wx-warn-4-bg: color-mix(in srgb, var(--md-sys-color-warn-4) 15%, var(--md-sys-color-surface-container-lowest)); --wx-warn-4-on: var(--md-sys-color-on-warn-4); --wx-warn-4-edge: color-mix(in srgb, var(--md-sys-color-warn-4) 55%, transparent); --wx-warn-4-voll: var(--md-sys-color-warn-4-container); --wx-warn-4-auf-voll: var(--md-sys-color-on-warn-4-container); --wx-warn-5-fg: var(--md-sys-color-warn-5); --wx-warn-5-bg: color-mix(in srgb, var(--md-sys-color-warn-5) 15%, var(--md-sys-color-surface-container-lowest)); --wx-warn-5-on: var(--md-sys-color-on-warn-5); --wx-warn-5-edge: color-mix(in srgb, var(--md-sys-color-warn-5) 55%, transparent); --wx-warn-5-voll: var(--md-sys-color-warn-5-container); --wx-warn-5-auf-voll: var(--md-sys-color-on-warn-5-container); } /* ========================================================= 5. LESBARKEITS-MODUS Wird von m3.js über data-fontscale / data-contrast am gesetzt und in localStorage gemerkt — dasselbe Muster wie data-theme. Für angemeldete Kunden zusätzlich serverseitig. ========================================================= */ :root[data-fontscale="gross"] { --font-scale: 1.15; } :root[data-fontscale="xgross"] { --font-scale: 1.32; --target-min: 56px; } /* Grundschrift wächst mit, damit auch alles mitzieht, was noch nicht auf --font-scale umgestellt ist. */ :root[data-fontscale="gross"] body { font-size: 1.08rem; } :root[data-fontscale="xgross"] body { font-size: 1.18rem; } /* Hoher Kontrast: dunklerer Text, kräftigere Linien, hellerer Grund. Nur Tokens überschreiben — nie einzelne Bauteile. */ :root[data-contrast="hoch"] { --md-sys-color-surface: #FFFFFF; --md-sys-color-background: #FFFFFF; --md-sys-color-surface-container-lowest:#FFFFFF; --md-sys-color-surface-container-low: #F2F0EA; --md-sys-color-surface-container: #E9E6DC; --md-sys-color-surface-container-high: #DFDBD0; --md-sys-color-on-surface: #000000; --md-sys-color-on-background: #000000; --md-sys-color-on-surface-variant: #26292E; --md-sys-color-outline: #3A3D42; --md-sys-color-outline-variant: #6E7178; --md-sys-color-primary: #0E2942; --md-sys-color-tertiary: #33470C; --hairline: 2px; } :root[data-contrast="hoch"][data-theme="dark"] { --md-sys-color-surface: #000000; --md-sys-color-background: #000000; --md-sys-color-surface-container-lowest:#000000; --md-sys-color-surface-container-low: #14171B; --md-sys-color-surface-container: #1C1F24; --md-sys-color-surface-container-high: #262A30; --md-sys-color-on-surface: #FFFFFF; --md-sys-color-on-background: #FFFFFF; --md-sys-color-on-surface-variant: #E4E5E9; --md-sys-color-outline: #B9BBC3; --md-sys-color-outline-variant: #6D7078; --md-sys-color-primary: #C7DDFF; --md-sys-color-tertiary: #CDE79A; } @media (prefers-color-scheme: dark) { :root[data-contrast="hoch"][data-theme="auto"] { --md-sys-color-surface: #000000; --md-sys-color-background: #000000; --md-sys-color-surface-container-lowest:#000000; --md-sys-color-surface-container-low: #14171B; --md-sys-color-surface-container: #1C1F24; --md-sys-color-surface-container-high: #262A30; --md-sys-color-on-surface: #FFFFFF; --md-sys-color-on-background: #FFFFFF; --md-sys-color-on-surface-variant: #E4E5E9; --md-sys-color-outline: #B9BBC3; --md-sys-color-outline-variant: #6D7078; --md-sys-color-primary: #C7DDFF; --md-sys-color-tertiary: #CDE79A; } } /* Linienstärke — im Kontrastmodus doppelt so dick. Bauteile verwenden var(--hairline) statt 1px. */ :root { --hairline: 1px; } /* Sichtbarer Fokus für Tastaturbedienung. Kein outline:none irgendwo. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; border-radius: var(--md-sys-shape-corner-extra-small); } /* ========================================================= 6. BEWEGUNG REDUZIEREN Betrifft Menschen mit Gleichgewichts- oder Sehstörungen — und ist bei der Zielgruppe kein Randfall. ========================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }