/* Mantik - Barrierefreiheit: die Schicht ueber jedem Theme.
MUSS ALS LETZTES GELADEN WERDEN:
Grundfarben
Theme (optional)
DIESE DATEI, immer zuletzt
WARUM DIE REIHENFOLGE ZAEHLT: Diese Regeln haben dieselbe Spezifitaet wie die
in theme.css. Bei gleicher Spezifitaet gewinnt die spaeter geladene Regel.
Steht ein Theme dahinter, hebelt es den Hochkontrast-Modus aus - und zwar
unbemerkt, weil ihn niemand einschaltet, der ihn nicht braucht.
Diese Datei war bisher NICHT Teil von shared/; die Regeln lagen nur in der
app-factory-Welt (mantik/tokens.css) am Dateiende. Die 14 Dienste, die shared/
benutzen, hatten damit gar keinen Hochkontrast-Modus.
Siehe 186-theme-system-und-app-aussehen.md Abschnitt 2.4.
Beide Bloecke greifen NUR, wenn im Betriebssystem die entsprechende
Einstellung aktiv ist. Im Normalfall aendert diese Datei nichts.
*/
/* ===== OS-Hochkontrast: harte Raender, maximaler Textkontrast =====
Der Nutzer hat "mehr Kontrast" eingestellt. Dann verschwinden die dezenten
Abstufungen: gedaempfter Text wird zu normalem Text, Hairlines werden hart. */
@media (prefers-contrast: more) {
:root {
--line: #000000;
--line-soft: #000000;
--border: #000000;
--ink-muted: var(--ink);
--ink-soft: var(--ink);
--muted: var(--ink);
}
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--line: #ffffff;
--line-soft: #ffffff;
--border: #ffffff;
--ink-muted: var(--ink);
--ink-soft: var(--ink);
--muted: var(--ink);
}
}
@media (prefers-contrast: more) {
[data-theme="dark"] {
--line: #ffffff;
--line-soft: #ffffff;
--border: #ffffff;
--ink-muted: var(--ink);
--ink-soft: var(--ink);
--muted: var(--ink);
}
}
/* ===== Erzwungene Farben (Windows-Hochkontrast u.ae.) =====
Hier bestimmt das Betriebssystem die Farben. Wir liefern nur noch die
System-Schluesselwoerter, damit Flaechen, Text und Raender dort ankommen,
wo das System sie erwartet. Eine eigene Palette waere hier falsch. */
@media (forced-colors: active) {
:root {
--bg: Canvas;
--bg-alt: Canvas;
--bg-soft: Canvas;
--surface: Canvas;
--ink: CanvasText;
--ink-soft: CanvasText;
--ink-muted: CanvasText;
--muted: CanvasText;
--line: CanvasText;
--line-soft: CanvasText;
--border: CanvasText;
--accent: Highlight;
--accent-dark: Highlight;
--accent-soft: Canvas;
--on-accent: HighlightText;
--good: CanvasText;
--bad: CanvasText;
--warn: CanvasText;
}
}
/* ===== Hochkontrast von Hand (Knopf in der Bedienleiste) =====
Bisher gab es Hochkontrast NUR ueber die Systemeinstellung. Wer sie nicht
kennt oder an einem fremden Geraet sitzt, kam gar nicht heran. Der Knopf in
a11y-bar.js setzt data-kontrast="hoch" auf ; die Werte sind dieselben
wie oben bei prefers-contrast, damit es nur EINE Hochkontrast-Darstellung
gibt und nicht zwei, die mit der Zeit auseinanderlaufen. */
:root[data-kontrast="hoch"] {
--line: #000000;
--line-soft: #000000;
--border: #000000;
--ink-muted: var(--ink);
--ink-soft: var(--ink);
--muted: var(--ink);
}
:root[data-kontrast="hoch"][data-theme="dark"] {
--line: #ffffff;
--line-soft: #ffffff;
--border: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root[data-kontrast="hoch"]:not([data-theme="light"]) {
--line: #ffffff;
--line-soft: #ffffff;
--border: #ffffff;
}
}
/* ===== Bewegung reduzieren =====
Wer im System "Animationen reduzieren" gewaehlt hat, meint es so. Uebergaenge
auf nahezu Null statt auf 0: manche Skripte warten auf transitionend, und ein
Uebergang mit Dauer 0 feuert dieses Ereignis nicht - die Oberflaeche bliebe
dann haengen. */
@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;
}
}