/*!
 * SF Bedienungshilfe – Seitenweite Stile der Bedienhilfen.
 * Die Oberfläche des Widgets selbst liegt in einem Shadow DOM und wird
 * vom Skript gestylt; diese Datei enthält nur die Regeln, die auf die
 * Website wirken (per Klasse auf <html>).
 */

/* ------------------------------------------------------------------
 * Host-Element des Widgets (deckt den Viewport ab, lässt Klicks durch)
 * ---------------------------------------------------------------- */
#sf-bedienungshilfe-host {
	position: fixed !important;
	inset: 0 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	pointer-events: none !important;
	background: transparent !important;
	background-image: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	overflow: visible !important;
	display: block !important;
	cursor: auto;
}

/* ------------------------------------------------------------------
 * Seitenweite Overlays (Blaufilter, Lesemaske, Leselinie)
 * ---------------------------------------------------------------- */
.sf-a11y-overlay {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	pointer-events: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	transform: none !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}
.sf-a11y-overlay--blue {
	top: 0 !important;
	bottom: 0 !important;
	background-color: #ffd39a !important;
	mix-blend-mode: multiply !important;
}
.sf-a11y-overlay--mask-top,
.sf-a11y-overlay--mask-bottom {
	background-color: rgba(0, 0, 0, 0.62) !important;
}
.sf-a11y-overlay--mask-top {
	top: 0 !important;
}
.sf-a11y-overlay--mask-bottom {
	bottom: 0 !important;
}
.sf-a11y-overlay--guide {
	height: 10px !important;
	background-color: rgba(255, 191, 0, 0.55) !important;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35) !important;
	border-radius: 5px !important;
}

/* ------------------------------------------------------------------
 * Kontrast: Stufe 1 = hoher Kontrast dunkel
 * ---------------------------------------------------------------- */
html.sf-a11y-contrast-1,
html.sf-a11y-contrast-1 body {
	background: #000 !important;
	background-image: none !important;
	color: #fff !important;
}
html.sf-a11y-contrast-1 body :where(*:not(.sf-a11y-overlay):not(svg *)) {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
html.sf-a11y-contrast-1 body :is(a, a *) {
	color: #ffff00 !important;
	text-decoration: underline !important;
}
html.sf-a11y-contrast-1 body :is(a:hover, a:focus, a:hover *, a:focus *) {
	color: #000 !important;
	background-color: #ffff00 !important;
}
html.sf-a11y-contrast-1 body :is(button, input, select, textarea, [role="button"], input[type="submit"], input[type="button"]) {
	background-color: #000 !important;
	color: #fff !important;
	border: 2px solid #fff !important;
}
html.sf-a11y-contrast-1 body :is(h1, h2, h3, h4, h5, h6) {
	color: #ffff00 !important;
}
html.sf-a11y-contrast-1 body ::placeholder {
	color: #ccc !important;
}
html.sf-a11y-contrast-1 body :is(img, video, canvas, picture, iframe) {
	filter: none !important;
}

/* ------------------------------------------------------------------
 * Kontrast: Stufe 2 = hoher Kontrast hell
 * ---------------------------------------------------------------- */
html.sf-a11y-contrast-2,
html.sf-a11y-contrast-2 body {
	background: #fff !important;
	background-image: none !important;
	color: #000 !important;
}
html.sf-a11y-contrast-2 body :where(*:not(.sf-a11y-overlay):not(svg *)) {
	background-color: #fff !important;
	background-image: none !important;
	color: #000 !important;
	border-color: #000 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
html.sf-a11y-contrast-2 body :is(a, a *) {
	color: #0000c8 !important;
	text-decoration: underline !important;
	font-weight: 700 !important;
}
html.sf-a11y-contrast-2 body :is(a:hover, a:focus, a:hover *, a:focus *) {
	color: #fff !important;
	background-color: #0000c8 !important;
}
html.sf-a11y-contrast-2 body :is(button, input, select, textarea, [role="button"], input[type="submit"], input[type="button"]) {
	background-color: #fff !important;
	color: #000 !important;
	border: 2px solid #000 !important;
}
html.sf-a11y-contrast-2 body ::placeholder {
	color: #444 !important;
}

/* Kontrast Stufe 3 (Invertiert) wird per Inline-Filter auf <html> gesetzt. */

/* ------------------------------------------------------------------
 * Nachtmodus (Filter auf <html> per Skript, Medien werden zurückgedreht)
 * ---------------------------------------------------------------- */
html.sf-a11y-nightMode-1 {
	background-color: #fff;
}
html.sf-a11y-nightMode-1 body :is(img, picture, video, canvas, iframe, embed, object, [style*="background-image"]):not(.sf-a11y-overlay) {
	filter: invert(1) hue-rotate(180deg) !important;
}
html.sf-a11y-nightMode-1 body [style*="background-image"] :is(img, picture, video) {
	filter: none !important;
}

/* ------------------------------------------------------------------
 * Bilder ausblenden
 * ---------------------------------------------------------------- */
html.sf-a11y-hideImages-1 body :is(img, picture, video, canvas, object, embed, figure > svg):not(.sf-a11y-keep) {
	visibility: hidden !important;
}
html.sf-a11y-hideImages-1 body :where(*:not(.sf-a11y-overlay)) {
	background-image: none !important;
}

/* ------------------------------------------------------------------
 * Tastaturnavigation: deutlich sichtbarer Fokus
 * ---------------------------------------------------------------- */
html.sf-a11y-keyboardNav-1 body :focus,
html.sf-a11y-keyboardNav-1 body :focus-visible {
	outline: 4px solid #ffbf00 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 7px #000, 0 0 0 9px #ffbf00 !important;
	border-radius: 2px;
	transition: none !important;
}
html.sf-a11y-keyboardNav-1 body .sf-a11y-kbd-target {
	outline: 4px dashed #ffbf00 !important;
	outline-offset: 3px !important;
}

/* ------------------------------------------------------------------
 * Großer Mauszeiger
 * ---------------------------------------------------------------- */
html.sf-a11y-bigCursor-1,
html.sf-a11y-bigCursor-1 body,
html.sf-a11y-bigCursor-1 body * {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path d='M4 2l13.5 11.6h-6.6l3.9 8.2-3 1.4-3.9-8.2L4 19.6z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/></svg>") 8 4, auto !important;
}
html.sf-a11y-bigCursor-1 body :is(a, a *, button, button *, [role="button"], [role="button"] *, [role="link"], input[type="submit"], input[type="button"], input[type="reset"], input[type="checkbox"], input[type="radio"], select, summary, label[for]) {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path d='M9 2.5a1.5 1.5 0 0 1 3 0V10h1V5.5a1.5 1.5 0 0 1 3 0V10h1V7a1.5 1.5 0 0 1 3 0v8.5c0 3.6-2.9 6.5-6.5 6.5H12c-2 0-3.8-.9-5-2.4l-3.6-4.4a1.6 1.6 0 0 1 2.4-2.1L9 15.3V2.5z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/></svg>") 20 4, pointer !important;
}
html.sf-a11y-bigCursor-1 body :is(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], textarea, [contenteditable="true"]) {
	cursor: text !important;
}

/* ------------------------------------------------------------------
 * Leserliche Schrift
 * ---------------------------------------------------------------- */
html.sf-a11y-readableFont-1 body,
html.sf-a11y-readableFont-1 body *:not(i):not(code):not(pre):not(kbd):not(samp):not([class*="icon"]):not([class*="Icon"]):not([class*="fa-"]):not([class*="dashicons"]):not([class*="glyph"]):not([class*="material-"]):not([aria-hidden="true"]:empty) {
	font-family: Verdana, Arial, Helvetica, "Segoe UI", Roboto, sans-serif !important;
	letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------
 * Animationen ausblenden (Animationen werden sofort auf den Endzustand
 * gesetzt, damit per Animation eingeblendete Inhalte sichtbar bleiben)
 * ---------------------------------------------------------------- */
html.sf-a11y-noAnimations-1,
html.sf-a11y-noAnimations-1 *,
html.sf-a11y-noAnimations-1 *::before,
html.sf-a11y-noAnimations-1 *::after {
	animation-duration: 0.001ms !important;
	animation-delay: 0ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	transition-delay: 0ms !important;
	scroll-behavior: auto !important;
}
html.sf-a11y-noAnimations-1 body marquee {
	animation: none !important;
}

/* ------------------------------------------------------------------
 * Vorlesen: aktuell gelesener Abschnitt
 * ---------------------------------------------------------------- */
html.sf-a11y-readAloud-1 body .sf-a11y-reading {
	outline: 3px solid #ffbf00 !important;
	outline-offset: 2px !important;
	background-color: rgba(255, 191, 0, 0.25) !important;
	box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.6) !important;
	border-radius: 3px;
}
html.sf-a11y-readAloud-1 body :is(p, h1, h2, h3, h4, h5, h6, li, td, th, blockquote, figcaption, dt, dd, summary, label):hover {
	outline: 2px dashed rgba(26, 86, 219, 0.7) !important;
	outline-offset: 2px !important;
	cursor: pointer;
}

/* ------------------------------------------------------------------
 * Versteckte SVG-Filter für Farbschwäche
 * ---------------------------------------------------------------- */
#sf-a11y-svg-filters {
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ------------------------------------------------------------------
 * Zeilenabstand
 * ---------------------------------------------------------------- */
html.sf-a11y-lineHeight-1 body :where(*:not(.sf-a11y-overlay)) { line-height: 1.5 !important; }
html.sf-a11y-lineHeight-2 body :where(*:not(.sf-a11y-overlay)) { line-height: 1.75 !important; }
html.sf-a11y-lineHeight-3 body :where(*:not(.sf-a11y-overlay)) { line-height: 2 !important; }
html.sf-a11y-lineHeight-4 body :where(*:not(.sf-a11y-overlay)) { line-height: 2.3 !important; }

/* ------------------------------------------------------------------
 * Buchstaben- und Wortabstand
 * ---------------------------------------------------------------- */
html.sf-a11y-letterSpacing-1 body :where(*:not(.sf-a11y-overlay)) { letter-spacing: 0.05em !important; word-spacing: 0.1em !important; }
html.sf-a11y-letterSpacing-2 body :where(*:not(.sf-a11y-overlay)) { letter-spacing: 0.1em !important; word-spacing: 0.2em !important; }
html.sf-a11y-letterSpacing-3 body :where(*:not(.sf-a11y-overlay)) { letter-spacing: 0.15em !important; word-spacing: 0.3em !important; }
html.sf-a11y-letterSpacing-4 body :where(*:not(.sf-a11y-overlay)) { letter-spacing: 0.22em !important; word-spacing: 0.44em !important; }

/* ------------------------------------------------------------------
 * Links hervorheben
 * ---------------------------------------------------------------- */
html.sf-a11y-highlightLinks-1 body a[href],
html.sf-a11y-highlightLinks-1 body a[href] *,
html.sf-a11y-highlightLinks-1 body [role="link"] {
	background-color: #fff176 !important;
	color: #000 !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	font-weight: 700 !important;
}
html.sf-a11y-highlightLinks-1 body a[href],
html.sf-a11y-highlightLinks-1 body [role="link"] {
	outline: 2px solid #000 !important;
	outline-offset: 1px !important;
	border-radius: 2px;
}

/* ------------------------------------------------------------------
 * Überschriften hervorheben
 * ---------------------------------------------------------------- */
html.sf-a11y-highlightHeadings-1 body :is(h1, h2, h3, h4, h5, h6, [role="heading"]) {
	background-color: #fff176 !important;
	color: #000 !important;
	outline: 3px solid #000 !important;
	outline-offset: 2px !important;
	padding: 0.1em 0.3em !important;
	border-radius: 3px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
html.sf-a11y-highlightHeadings-1 body :is(h1, h2, h3, h4, h5, h6) * {
	color: #000 !important;
}

/* Sättigung wird per Inline-Filter auf <html> gesetzt. */