/*
 * VI Barrierefrei – globale Feature-Regeln
 * Alle Regeln greifen nur, wenn die jeweilige Klasse am <html>-Element gesetzt ist.
 * Das Widget selbst (#via-root) liegt im Shadow DOM und wird ausgeschlossen.
 */

@font-face {
	font-family: "VIA OpenDyslexic";
	src: url("fonts/OpenDyslexic-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "VIA OpenDyslexic";
	src: url("fonts/OpenDyslexic-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "VIA Atkinson";
	src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "VIA Atkinson";
	src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Skip-Link (ARIA-Korrektur) ---------- */
.via-skip-link {
	position: absolute !important;
	left: 8px !important;
	top: -200px !important;
	z-index: 2147483647 !important;
	padding: 12px 18px !important;
	background: #000 !important;
	color: #fff !important;
	font: 700 16px/1.2 system-ui, sans-serif !important;
	text-decoration: underline !important;
	border-radius: 4px !important;
}
.via-skip-link:focus {
	top: 8px !important;
	outline: 3px solid #ffbf00 !important;
	outline-offset: 2px !important;
}
.via-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---------- Lesbarkeit ---------- */
html.via-lh body :where(:not(#via-root)) {
	line-height: var(--via-lh, 1.8) !important;
}
html.via-ls body :where(:not(#via-root)) {
	letter-spacing: var(--via-ls, 0.12em) !important;
}
html.via-ws body :where(:not(#via-root)) {
	word-spacing: var(--via-ws, 0.16em) !important;
}
html.via-align-left body :is(p, li, td, th, h1, h2, h3, h4, h5, h6, blockquote, dd, dt, figcaption, span, div) {
	text-align: left !important;
}
html.via-font-dyslexic body :where(:not(#via-root, i, [class*="icon"], [class*="fa-"], .dashicons, [class^="eicon"], svg, svg *)) {
	font-family: "VIA OpenDyslexic", "Comic Sans MS", sans-serif !important;
}
html.via-font-readable body :where(:not(#via-root, i, [class*="icon"], [class*="fa-"], .dashicons, [class^="eicon"], svg, svg *)) {
	font-family: "VIA Atkinson", Verdana, Arial, sans-serif !important;
}
html.via-links body a {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
	outline: 2px solid #ffbf00 !important;
	outline-offset: 1px !important;
	background-color: rgba(255, 191, 0, 0.18) !important;
}
html.via-headings body :is(h1, h2, h3, h4, h5, h6, [role="heading"]) {
	outline: 2px dashed currentColor !important;
	outline-offset: 4px !important;
}

/* ---------- Farbe & Kontrast ---------- */
html.via-contrast-dark body,
html.via-contrast-dark body :where(:not(#via-root, .via-guide, .via-mask, img, video, picture, svg, svg *, canvas, iframe)) {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
html.via-contrast-dark body a,
html.via-contrast-dark body a * {
	color: #ffea00 !important;
}
html.via-contrast-dark body :is(button, input, select, textarea) {
	border: 2px solid #fff !important;
}
html.via-contrast-light body,
html.via-contrast-light body :where(:not(#via-root, .via-guide, .via-mask, img, video, picture, svg, svg *, canvas, iframe)) {
	background-color: #fff !important;
	background-image: none !important;
	color: #000 !important;
	border-color: #000 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
html.via-contrast-light body a,
html.via-contrast-light body a * {
	color: #0000c8 !important;
	text-decoration: underline !important;
}

/* Filter werden nur auf die direkten Kinder von <body> angewendet, damit das Widget unberührt bleibt */
html.via-filter body > :not(#via-root):not(script):not(style) {
	filter: var(--via-filter) !important;
}
html.via-invert body > :not(#via-root) :is(img, video, picture, iframe, [style*="background-image"]) {
	filter: invert(1) hue-rotate(180deg) !important;
}

/* ---------- Navigation & Fokus ---------- */
html.via-cursor,
html.via-cursor body * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l30 21-13 2 8 16-6 3-8-16-11 9z' fill='%23000' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.via-cursor body :is(a, button, [role="button"], label, select, summary) {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l30 21-13 2 8 16-6 3-8-16-11 9z' fill='%23ffbf00' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, pointer !important;
}
html.via-focus body *:focus,
html.via-focus body *:focus-visible {
	outline: 4px solid #ffbf00 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 7px #000 !important;
}
html.via-noanim *,
html.via-noanim *::before,
html.via-noanim *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}
html.via-noimg body :is(img, picture, video, svg:not(#via-root *), [role="img"]) {
	opacity: 0 !important;
}
html.via-noimg body :where(:not(#via-root)) {
	background-image: none !important;
}

/* Lese-Lineal & Lesemaske */
.via-guide {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	height: 10px !important;
	margin-top: -5px !important;
	background: #ffbf00 !important;
	border-top: 2px solid #000 !important;
	border-bottom: 2px solid #000 !important;
	pointer-events: none !important;
	z-index: 2147483640 !important;
}
.via-mask {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	background: rgba(0, 0, 0, 0.65) !important;
	pointer-events: none !important;
	z-index: 2147483640 !important;
}
.via-mask-top { top: 0 !important; }
.via-mask-bottom { bottom: 0 !important; }

/* Vorlesen: aktuell gelesenes Element */
html.via-tts-click body :is(p, li, h1, h2, h3, h4, h5, h6, td, th, blockquote, figcaption, dt, dd, label):hover {
	outline: 2px dotted #ffbf00 !important;
	cursor: pointer;
}
.via-speaking {
	outline: 3px solid #ffbf00 !important;
	background-color: rgba(255, 191, 0, 0.25) !important;
}

@media print {
	#via-root, .via-guide, .via-mask { display: none !important; }
}