/**
 * Bedienhilfen: Wirkung auf den Seiteninhalt.
 *
 * Diese Datei liegt bewusst im Dokument und nicht im Shadow DOM des Panels:
 * sie formatiert die Website, nicht das Panel. Das Panel selbst steckt in
 * einem Shadow Root und bleibt von diesen Regeln unberuehrt - sonst wuerde
 * der Kontrastmodus die Bedienoberflaeche gleich mit umfaerben, und der
 * Besucher koennte ihn nicht mehr abschalten.
 *
 * Alle Zustaende haengen als Klasse am <html>-Element. Das haelt die
 * Umschaltung billig (eine Klasse statt vieler Inline-Styles) und macht den
 * Zustand im Inspektor ablesbar.
 *
 * !important ist hier kein Versehen: die Regeln muessen gegen beliebige
 * Theme-Styles ankommen. Darum stehen sie ausserdem als letzte Datei im
 * Head und adressieren die Klasse am Wurzelelement.
 *
 * @package FourAll_Barrierefrei
 */

/* ==========================================================================
   Schrift fuer die Lese-Hilfen
   ========================================================================== */

/*
 * OpenDyslexic, ausgeliefert mit dem Modul (SIL Open Font License 1.1,
 * siehe lizenzen/LICENSE-opendyslexic.txt). Die Deklaration steht immer im
 * Dokument, die Datei wird davon aber nicht geladen: Browser holen eine
 * Schrift erst, wenn sie tatsaechlich auf Text angewandt wird. Ohne
 * aktivierte Funktion entsteht also kein Request.
 *
 * Der Pfad ist relativ zu dieser Datei (assets/css/) und zeigt nach
 * assets/fonts/ - damit funktioniert die Einbindung unabhaengig davon, in
 * welchem Verzeichnis die WordPress-Installation liegt.
 */
@font-face {
	font-family: "FourAll OpenDyslexic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/opendyslexic-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "FourAll OpenDyslexic";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/opendyslexic-latin-700-normal.woff2") format("woff2");
}

/* ==========================================================================
   Textdarstellung
   ========================================================================== */

/*
 * Zeilen- und Zeichenabstand sind absolute Werte und lassen sich deshalb
 * gefahrlos per CSS setzen - anders als die Schriftgroesse, die sich bei
 * verschachtelten em-Angaben aufmultiplizieren wuerde. Die uebernimmt das
 * Skript elementweise.
 */

html.fbf-line-height-1 body :where(p, li, dd, dt, blockquote, figcaption, td, th) {
	line-height: 1.8 !important;
}

html.fbf-line-height-2 body :where(p, li, dd, dt, blockquote, figcaption, td, th) {
	line-height: 2.2 !important;
}

html.fbf-letter-spacing-1 body :where(p, li, dd, dt, blockquote, figcaption, td, th, h1, h2, h3, h4, h5, h6) {
	letter-spacing: 0.08em !important;
	word-spacing: 0.16em !important;
}

html.fbf-letter-spacing-2 body :where(p, li, dd, dt, blockquote, figcaption, td, th, h1, h2, h3, h4, h5, h6) {
	letter-spacing: 0.16em !important;
	word-spacing: 0.32em !important;
}

/* Blocksatz aufheben: erzeugt Lueckenbildung und erschwert das Lesen. */
html.fbf-align-left body :where(p, li, dd, dt, blockquote, figcaption, td, th, h1, h2, h3, h4, h5, h6) {
	text-align: left !important;
	text-justify: none !important;
	hyphens: none !important;
}

/* Systemnahe, gut lesbare Schrift ohne Serifen. */
html.fbf-font-readable body,
html.fbf-font-readable body :where(p, li, dd, dt, blockquote, figcaption, td, th, h1, h2, h3, h4, h5, h6, a, button, input, select, textarea, label, span, div) {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

html.fbf-font-dyslexic body,
html.fbf-font-dyslexic body :where(p, li, dd, dt, blockquote, figcaption, td, th, h1, h2, h3, h4, h5, h6, a, button, input, select, textarea, label, span, div) {
	font-family: "FourAll OpenDyslexic", Verdana, Tahoma, sans-serif !important;
}

/* ==========================================================================
   Farben und Kontrast
   ========================================================================== */

/*
 * Die Kontrastmodi arbeiten mit Farbangaben statt mit CSS-Filtern. Filter
 * wirken auf den gesamten Teilbaum und damit auch auf eingebettete Inhalte
 * und das Panel; Farbangaben lassen sich gezielt setzen und vom Panel
 * fernhalten. Nur Invertieren und Graustufen brauchen zwingend einen
 * Filter - die beiden sind unten entsprechend behandelt.
 *
 * Gewaehlt sind Wertepaare, die deutlich ueber den WCAG-Mindestwerten
 * liegen: ein Kontrastmodus, der gerade eben 4,5:1 erreicht, verfehlt
 * seinen Zweck.
 */

html.fbf-contrast-dark body,
html.fbf-contrast-dark body :where(div, section, article, aside, header, footer, main, nav, p, li, ul, ol, dl, dd, dt, table, thead, tbody, tr, td, th, form, fieldset, figure, figcaption, blockquote, pre, h1, h2, h3, h4, h5, h6, span, label, summary, details) {
	background-color: #0d0d0d !important;
	background-image: none !important;
	color: #f5f5f5 !important;
	border-color: #6f6f6f !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html.fbf-contrast-dark body :where(a, a *) {
	color: #7fc4ff !important;
}

html.fbf-contrast-dark body :where(button, input, select, textarea) {
	background-color: #1f1f1f !important;
	color: #f5f5f5 !important;
	border: 2px solid #9a9a9a !important;
}

html.fbf-contrast-light body,
html.fbf-contrast-light body :where(div, section, article, aside, header, footer, main, nav, p, li, ul, ol, dl, dd, dt, table, thead, tbody, tr, td, th, form, fieldset, figure, figcaption, blockquote, pre, h1, h2, h3, h4, h5, h6, span, label, summary, details) {
	background-color: #ffffff !important;
	background-image: none !important;
	color: #121212 !important;
	border-color: #4a4a4a !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html.fbf-contrast-light body :where(a, a *) {
	color: #0b4a8f !important;
}

html.fbf-contrast-light body :where(button, input, select, textarea) {
	background-color: #f2f2f2 !important;
	color: #121212 !important;
	border: 2px solid #4a4a4a !important;
}

/*
 * Invertieren, Graustufen und Saettigung gehen nur ueber einen CSS-Filter.
 *
 * Der darf aber nicht am Wurzelelement haengen: ein Element mit filter wird
 * zum Bezugspunkt fuer position:fixed in seinem Teilbaum. Liegt der Filter
 * auf <html>, rechnet der Browser die Position des Bedienpanels nicht mehr
 * gegen den sichtbaren Bereich, sondern gegen die gesamte Dokumenthoehe -
 * das Panel rutscht aus dem Bild und ist nicht mehr erreichbar. Genau das
 * passiert bei vielen Overlay-Werkzeugen, und es faellt erst auf, wenn man
 * den Modus im Browser tatsaechlich einschaltet.
 *
 * Darum trifft der Filter die direkten Kinder des body. Das Panel liegt
 * ebenfalls dort, wird ueber das Markierungsattribut ausgenommen und bleibt
 * unveraendert bedienbar - in Originalfarben, nicht doppelt invertiert.
 */

html.fbf-invert body > *:not([data-fourall-barrierefrei]) {
	filter: invert(1) hue-rotate(180deg) !important;
}

/*
 * Den Seitenhintergrund kann die Regel oben nicht miterfassen - er gehoert
 * dem body selbst, und den zu filtern wuerde das Problem mit position:fixed
 * zurueckholen. Die umgekehrte Farbe setzt deshalb das Skript als
 * Inline-Angabe, berechnet aus dem tatsaechlichen Wert des Themes. Ohne das
 * stuende invertierter, also heller Text auf weiterhin hellem Grund.
 */

/* Medien zurueckdrehen: invertierte Fotos sind unbrauchbar. */
html.fbf-invert body :where(img, video, picture, canvas, iframe, embed, object, svg) {
	filter: invert(1) hue-rotate(180deg) !important;
}

html.fbf-grayscale body > *:not([data-fourall-barrierefrei]) {
	filter: grayscale(1) !important;
}

html.fbf-saturation-low body > *:not([data-fourall-barrierefrei]) {
	filter: saturate(0.45) !important;
}

html.fbf-saturation-high body > *:not([data-fourall-barrierefrei]) {
	filter: saturate(1.9) !important;
}

/* ==========================================================================
   Orientierung und Bedienung
   ========================================================================== */

html.fbf-links body :where(a, a *) {
	text-decoration: underline !important;
	text-underline-offset: 0.18em !important;
	text-decoration-thickness: 0.09em !important;
}

html.fbf-links body a {
	background-color: #fff8a8 !important;
	color: #11306b !important;
	outline: 1px solid #11306b !important;
	outline-offset: 1px !important;
}

/*
 * Fokus sichtbar machen. Der doppelte Ring (outline plus box-shadow) haelt
 * die Markierung auf hellen und dunklen Hintergruenden erkennbar, ohne das
 * Layout zu verschieben.
 */
html.fbf-focus body *:focus,
html.fbf-focus body *:focus-visible {
	outline: 4px solid #0b4a8f !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.95) !important;
	border-radius: 2px !important;
}

html.fbf-headings body :where(h1, h2, h3, h4, h5, h6) {
	background-color: #eef3fb !important;
	border-left: 6px solid #0b4a8f !important;
	color: #11306b !important;
	padding: 0.25em 0.5em !important;
	margin-block: 0.6em !important;
}

/*
 * Die Ebene wird vor die Ueberschrift gesetzt. Das macht Spruenge in der
 * Hierarchie sichtbar - fuer Besucher eine Orientierungshilfe, fuer die
 * Redaktion ein Pruefwerkzeug.
 */
html.fbf-headings body h1::before { content: "H1 "; }
html.fbf-headings body h2::before { content: "H2 "; }
html.fbf-headings body h3::before { content: "H3 "; }
html.fbf-headings body h4::before { content: "H4 "; }
html.fbf-headings body h5::before { content: "H5 "; }
html.fbf-headings body h6::before { content: "H6 "; }

html.fbf-headings body :where(h1, h2, h3, h4, h5, h6)::before {
	font-family: ui-monospace, Menlo, Consolas, monospace !important;
	font-size: 0.7em !important;
	font-weight: 700 !important;
	opacity: 0.75;
}

html.fbf-hide-images body :where(img, picture, svg:not([data-fourall-barrierefrei] svg), video, canvas) {
	visibility: hidden !important;
}

/*
 * Hintergrundbilder lassen sich nicht einzeln abschalten, ohne jedes
 * Element zu kennen. Die Regel trifft deshalb breit und setzt nur das Bild
 * zurueck, nicht die Farbe.
 */
html.fbf-hide-images body :where(div, section, article, aside, header, footer, main, nav, span, a, li) {
	background-image: none !important;
}

/*
 * Animationen anhalten. prefers-reduced-motion laesst sich per CSS nicht
 * erzwingen, deshalb werden Dauer und Wiederholung direkt gekappt. 0.01ms
 * statt 0s, weil manche Skripte auf das transitionend-Ereignis warten und
 * bei 0s nie eines bekommen.
 */
html.fbf-no-motion body *,
html.fbf-no-motion body *::before,
html.fbf-no-motion body *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
}

html.fbf-no-motion body :where(video[autoplay], marquee) {
	animation-play-state: paused !important;
}

/*
 * Grosser Zeiger als SVG in der Datei-URL. Bewusst keine externe Grafik:
 * eine Cursor-Datei vom Fremdserver waere ein Request, den dieses Modul
 * gerade vermeiden soll. Das SVG ist einfarbig schwarz mit weisser Kontur
 * und bleibt damit auf jedem Hintergrund sichtbar.
 */
html.fbf-cursor body,
html.fbf-cursor body * {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M7 3 L7 37 L15 29 L21 43 L28 40 L22 26 L34 26 Z" fill="%23000" stroke="%23fff" stroke-width="2.5"/></svg>') 6 3, auto !important;
}

html.fbf-cursor body :where(a, button, [role="button"], input[type="submit"], summary) {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M18 4 C15 4 15 8 15 8 L15 24 L12 21 C9 18 6 21 8 24 L16 38 C18 42 20 42 24 42 L33 42 C36 42 38 40 38 36 L38 20 C38 17 34 17 34 20 L34 17 C34 14 30 14 30 17 L30 15 C30 12 26 12 26 15 L26 8 C26 8 26 4 22 4 Z" fill="%23000" stroke="%23fff" stroke-width="2.5"/></svg>') 14 3, pointer !important;
}

/* ==========================================================================
   Lesehilfen
   ========================================================================== */

/*
 * Leselineal und Lesemaske werden vom Skript positioniert; hier steht nur
 * das Aussehen. Beide liegen unter dem Panel, aber ueber dem Inhalt, und
 * nehmen keine Mausereignisse an.
 */

.fbf-ruler,
.fbf-mask {
	pointer-events: none !important;
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 2147482000 !important;
}

.fbf-ruler {
	height: 0 !important;
	border-top: 3px solid #0b4a8f !important;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9) !important;
}

.fbf-mask {
	background: rgba(0, 0, 0, 0.72) !important;
}

@media print {
	.fbf-ruler,
	.fbf-mask {
		display: none !important;
	}
}