/*
 * Barrierefreiheit (Lesbarkeit) – Fundament.
 *
 * Die Einstellungen des Benutzers werden als KLASSEN gesetzt: auf <body> (crm.php,
 * Platzhalter <%%bodyclass%%> in theme/template/main.htm) oder auf den Body der
 * Live-Vorschau (benutzereinstellungen.php). Jede Klasse definiert ihre Variable auf
 * demselben Element, Kinder erben sie. OHNE Klasse ist keine Variable definiert –
 * Seiten-CSS schreibt deshalb immer mit Fallback, z. B.
 *   font-size: calc(13px * var(--a11y-scale, 1));
 *   color: var(--a11y-muted, #94a3b8);
 * Alle Regeln hier sind Nachfahren-Selektoren (nie body.a11y-…), damit sie auch auf
 * einem Wrapper funktionieren. Grundregeln sind per :where() bewusst schwach, damit
 * spezifischere Seitenregeln gewinnen.
 */

/* --- Variablen ------------------------------------------------------------ */
.a11y-s112 { --a11y-scale: 1.12; }
.a11y-s125 { --a11y-scale: 1.25; }
.a11y-s140 { --a11y-scale: 1.4; }

.a11y-luftig { --a11y-lh: 1.6; }

.a11y-kontrast {
	--a11y-muted: #475569; /* ersetzt hellgrau (#94a3b8, #9ca3af, #a0aec0, …) */
	--a11y-soft: #334155;  /* ersetzt mittelgrau (#64748b, #6b7280, #718096, …) */
}

/* Schriftfarbe: --a11y-text ersetzt dunkel-/mittelgraue Textfarben (#222, #333, #475569, …).
   Muss Vorrang vor a11y-kontrast haben: steht danach UND die Kombination ist spezifischer,
   damit auch eine geänderte Reihenfolge das nicht umdreht. */
.a11y-farbe-dunkel,
.a11y-kontrast.a11y-farbe-dunkel {
	--a11y-text: #111827;
	--a11y-soft: #1f2937;
	--a11y-muted: #374151;
}
.a11y-farbe-schwarz,
.a11y-kontrast.a11y-farbe-schwarz {
	--a11y-text: #000000;
	--a11y-soft: #000000;
	--a11y-muted: #000000;
}

.a11y-font-system  { --a11y-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.a11y-font-verdana { --a11y-font: Verdana, Geneva, Tahoma, sans-serif; }
.a11y-font-arial   { --a11y-font: Arial, Helvetica, sans-serif; }

/* Kundenoverlay: Standard 800px (Fallback im Overlay-CSS, keine Klasse) */
.a11y-ov-breit  { --a11y-overlay-w: min(1200px, 94vw); }
.a11y-ov-xbreit { --a11y-overlay-w: min(1680px, 97vw); }

.a11y-klick { --a11y-hit: 32px; }

/* --- Schriftgrösse: Grundschrift ------------------------------------------- */
/* Die Grundschrift (body, td, input, textarea, select: 14px) skaliert bereits in
   theme/css/layout_live.css über calc(14px * var(--a11y-scale, 1)). Hier nur der Fall,
   dass die Klasse auf einem Wrapper statt auf <body> sitzt (Spezifität 0). Elemente mit
   eigener px-Grösse stellen die Bereichs-CSS auf calc(… * var(--a11y-scale, 1)) um. */
:where(.a11y-s112, .a11y-s125, .a11y-s140) {
	font-size: calc(14px * var(--a11y-scale, 1));
}

/* --- Schriftfarbe: Grundtext ------------------------------------------------ */
/* Grundtext (body, td) läuft in theme/css/layout_live.css über var(--a11y-text, #222222).
   Hier nur der Fall, dass die Klasse auf einem Wrapper statt auf <body> sitzt. */
:where(.a11y-farbe-dunkel, .a11y-farbe-schwarz) {
	color: var(--a11y-text);
}

/* --- Zeilenabstand: generische Textelemente -------------------------------- */
:where(.a11y-luftig) p,
:where(.a11y-luftig) li,
:where(.a11y-luftig) td,
:where(.a11y-luftig) dd {
	line-height: var(--a11y-lh, normal);
}

/* --- Schriftart ------------------------------------------------------------ */
/* Bewusst stark (Klasse + *), damit auch Bereichs-Schriften ersetzt werden.
   Icon-Schriften (Font Awesome .fa*, .material-icons, .glyphicon) und Monospace
   (code/pre/kbd/samp) bleiben intakt; Emoji fallen ohnehin auf die Emoji-Schrift zurück. */
.a11y-font-system,
.a11y-font-verdana,
.a11y-font-arial,
.a11y-font-system *:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="fa-"]):not(.material-icons):not(.glyphicon):not([class*="glyphicon-"]):not(code):not(pre):not(kbd):not(samp),
.a11y-font-verdana *:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="fa-"]):not(.material-icons):not(.glyphicon):not([class*="glyphicon-"]):not(code):not(pre):not(kbd):not(samp),
.a11y-font-arial *:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="fa-"]):not(.material-icons):not(.glyphicon):not([class*="glyphicon-"]):not(code):not(pre):not(kbd):not(samp) {
	font-family: var(--a11y-font);
}

/* --- Grosse Klickflächen: generische Buttons ------------------------------- */
:where(.a11y-klick) :where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn) {
	min-height: var(--a11y-hit, 0);
	min-width: var(--a11y-hit, 0);
}
:where(.a11y-klick) :where(input[type="checkbox"], input[type="radio"]) {
	width: 18px;
	height: 18px;
}