/*
 * Barrierefreiheit-Widget (Theme-eigen, Ersatz fuer Overlay-Plugins)
 * Teil 1: Widget-Oberflaeche  |  Teil 2: Wirkung der Schalter (html.keb-a11y-*)
 */

/* ---------- Teil 1: Widget ---------- */

.keb-a11y {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 99999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.4;
}

.keb-a11y__toggle {
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: #1d4ed8;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.keb-a11y__toggle:hover,
.keb-a11y__toggle:focus-visible {
	background: #163bb7;
	outline: 3px solid #93c5fd;
	outline-offset: 2px;
}

.keb-a11y__panel {
	position: absolute;
	left: 0;
	bottom: 64px;
	width: 250px;
	background: #ffffff;
	color: #111827;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
	padding: 12px;
}

.keb-a11y__title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: #111827;
}

.keb-a11y__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	margin: 0 0 6px;
}

button.keb-a11y__opt {
	background: #f3f4f6;
	border: 1px solid #d1d5db;
	border-radius: 7px;
	padding: 8px 10px;
	cursor: pointer;
	color: #111827;
	font-size: 14px;
	text-align: left;
}

button.keb-a11y__opt:hover,
button.keb-a11y__opt:focus-visible {
	border-color: #1d4ed8;
	outline: 2px solid #93c5fd;
}

.keb-a11y__state::after {
	content: "aus";
	font-size: 12px;
	color: #6b7280;
	border: 1px solid #d1d5db;
	border-radius: 9px;
	padding: 1px 8px;
	background: #fff;
}

button.keb-a11y__opt[aria-pressed="true"] {
	background: #1d4ed8;
	border-color: #1d4ed8;
	color: #fff;
}

button.keb-a11y__opt[aria-pressed="true"] .keb-a11y__state::after {
	content: "an";
	color: #1d4ed8;
	background: #fff;
	border-color: #fff;
}

.keb-a11y__fontsize span:first-child {
	font-size: 14px;
}

.keb-a11y__fontbtns {
	display: flex;
	align-items: center;
	gap: 6px;
}

.keb-a11y__fontbtns button {
	min-width: 38px;
	padding: 6px 8px;
	border: 1px solid #d1d5db;
	border-radius: 7px;
	background: #f3f4f6;
	color: #111827;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
}

.keb-a11y__fontbtns button:hover,
.keb-a11y__fontbtns button:focus-visible {
	border-color: #1d4ed8;
	outline: 2px solid #93c5fd;
}

.keb-a11y__fontbtns output {
	min-width: 16px;
	text-align: center;
	font-weight: 700;
}

.keb-a11y__reset {
	width: 100%;
	margin-top: 4px;
	padding: 8px 10px;
	border: 1px solid #b91c1c;
	border-radius: 7px;
	background: #fff;
	color: #b91c1c;
	font-size: 14px;
	cursor: pointer;
}

.keb-a11y__reset:hover,
.keb-a11y__reset:focus-visible {
	background: #b91c1c;
	color: #fff;
	outline: 2px solid #fca5a5;
}

@media print {
	.keb-a11y {
		display: none !important;
	}
}

/* ---------- Teil 2: Wirkung der Schalter ---------- */

/* Schriftgroesse: Stufen ueber root-em (Stufe wird per JS gesetzt) */
html.keb-a11y-font-1 { font-size: 112.5% !important; }
html.keb-a11y-font-2 { font-size: 125% !important; }
html.keb-a11y-font-3 { font-size: 137.5% !important; }

/* Lesbare Schrift */
html.keb-a11y-readable-font body,
html.keb-a11y-readable-font body * {
	font-family: Arial, Verdana, Helvetica, sans-serif !important;
	letter-spacing: 0.02em;
}

/* Hoher Kontrast: dunkler Text auf weissem Grund, klare Linkfarbe */
html.keb-a11y-high-contrast body,
html.keb-a11y-high-contrast body *:not(img):not(video):not(iframe):not(svg) {
	background-color: #ffffff !important;
	background-image: none !important;
	color: #000000 !important;
	border-color: #000000 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html.keb-a11y-high-contrast a,
html.keb-a11y-high-contrast a * {
	color: #0000cc !important;
	text-decoration: underline !important;
}

/* Graustufen */
html.keb-a11y-grayscale {
	filter: grayscale(1);
}

/* Links hervorheben */
html.keb-a11y-highlight-links a {
	text-decoration: underline !important;
	outline: 2px solid #1d4ed8 !important;
	outline-offset: 1px;
	background: #fef08a !important;
	color: #111827 !important;
}

/* Animationen stoppen */
html.keb-a11y-stop-motion *,
html.keb-a11y-stop-motion *::before,
html.keb-a11y-stop-motion *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* Grosser Mauszeiger */
html.keb-a11y-big-cursor,
html.keb-a11y-big-cursor body,
html.keb-a11y-big-cursor body * {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M5 2l14 12-6 1 3.5 6-2.5 1.5L10.5 16 6 20z" fill="black" stroke="white" stroke-width="1.4"/></svg>') 4 2, auto !important;
}