/* WPSolaris Barrierefreiheit – Frontend.
 * Übernommen aus dem Foundry-Modul. Neu: Panel ohne UIkit, Formen und
 * Beschriftung des Buttons, Verhalten auf kleinen Bildschirmen, Vorlesen.
 * Ebenen: Lesehilfe 99988 < Filter-Ebene 99989 < Button 99990 < Panel 99999. */

/* ---------------------------------------------------- Schwebender Button */
#wpsol-accessibility-trigger {
	position: fixed;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: var(--wpsol-accessibility-size, 52px);
	height: var(--wpsol-accessibility-size, 52px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wpsol-accessibility-bg, #1d4ed8);
	color: var(--wpsol-accessibility-fg, #fff);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	transform: translateY(var(--wpsol-accessibility-shift, 0));
	transition: filter .15s, transform .15s;
	font: 600 15px/1 Arial, Helvetica, sans-serif;
}
#wpsol-accessibility-trigger:hover { filter: brightness(1.08); transform: translateY(var(--wpsol-accessibility-shift, 0)) scale(1.05); }
#wpsol-accessibility-trigger:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #000; }
#wpsol-accessibility-trigger.wpsol-accessibility-trigger--rounded { border-radius: 22%; }
#wpsol-accessibility-trigger.wpsol-accessibility-trigger--square { border-radius: 0; }

.wpsol-accessibility-trigger-icon {
	display: block;
	flex: 0 0 auto;
	width: calc(var(--wpsol-accessibility-size, 52px) * .62);
	height: calc(var(--wpsol-accessibility-size, 52px) * .62);
}
.wpsol-accessibility-trigger-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* Mit Beschriftung wird der Button zur Pille. */
#wpsol-accessibility-trigger.wpsol-accessibility-trigger--label {
	width: auto;
	padding: 0 calc(var(--wpsol-accessibility-size, 52px) * .32) 0 calc(var(--wpsol-accessibility-size, 52px) * .2);
	border-radius: calc(var(--wpsol-accessibility-size, 52px) / 2);
}
#wpsol-accessibility-trigger.wpsol-accessibility-trigger--label.wpsol-accessibility-trigger--rounded { border-radius: calc(var(--wpsol-accessibility-size, 52px) * .22); }
#wpsol-accessibility-trigger.wpsol-accessibility-trigger--label.wpsol-accessibility-trigger--square { border-radius: 0; }
#wpsol-accessibility-trigger.wpsol-accessibility-trigger--label .wpsol-accessibility-trigger-icon {
	width: calc(var(--wpsol-accessibility-size, 52px) * .55);
	height: calc(var(--wpsol-accessibility-size, 52px) * .55);
}

@media (max-width: 640px) {
	#wpsol-accessibility-trigger.wpsol-accessibility-trigger--mobile-hide { display: none; }
	#wpsol-accessibility-trigger.wpsol-accessibility-trigger--mobile-size { --wpsol-accessibility-size: var(--wpsol-accessibility-size-mobile, 44px); }
}

/* ---------------------------------------------------------------- Panel */
#wpsol-accessibility-panel {
	position: fixed;
	inset: 0;
	z-index: 99999;
	pointer-events: none;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 18px !important;
}
#wpsol-accessibility-panel[hidden] { display: none; }

#wpsol-accessibility-panel .wpsol-accessibility-bar {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 450px;
	max-width: 90%;
	box-sizing: border-box;
	overflow-y: auto;
	padding: 30px 20px;
	background: #fff;
	color: #000;
	box-shadow: 0 0 30px rgba(0, 0, 0, .2);
	pointer-events: auto;
	transition: transform .25s ease;
}
#wpsol-accessibility-panel.wpsol-accessibility-panel--left .wpsol-accessibility-bar { left: 0; border-right: 3px solid #000; transform: translateX(-100%); }
#wpsol-accessibility-panel.wpsol-accessibility-panel--right .wpsol-accessibility-bar { right: 0; border-left: 3px solid #000; transform: translateX(100%); }
#wpsol-accessibility-panel.is-open .wpsol-accessibility-bar { transform: none; }

#wpsol-accessibility-panel .wpsol-accessibility-close {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px;
	color: #000;
	background: #eee;
	border: 1px solid #000;
	border-top-width: 0;
	border-right-width: 0;
	font: 16px Arial, Helvetica, sans-serif;
	cursor: pointer;
}
#wpsol-accessibility-panel.wpsol-accessibility-panel--right .wpsol-accessibility-close { right: auto; left: 0; border-left-width: 0; border-right-width: 1px; }
#wpsol-accessibility-panel .wpsol-accessibility-close:hover { background: #c2c2c2; }
#wpsol-accessibility-panel .wpsol-accessibility-close:active { background: #9d9d9d; }

#wpsol-accessibility-panel .wpsol-accessibility-headline {
	margin: 20px 0 10px;
	color: #000 !important;
	font-weight: bold !important;
	font-size: 20px !important;
}

#wpsol-accessibility-panel .wpsol-accessibility-group { display: flex; gap: 8px; }
#wpsol-accessibility-panel .wpsol-accessibility-group--column { flex-direction: column; }
#wpsol-accessibility-panel .wpsol-accessibility-group--wrap { flex-wrap: wrap; }
#wpsol-accessibility-panel .wpsol-accessibility-group--wrap .wpsol-accessibility-button { flex: 1 1 calc(50% - 4px); }
#wpsol-accessibility-panel .wpsol-accessibility-group--first { margin-top: 40px; }

#wpsol-accessibility-panel .wpsol-accessibility-button {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	flex-basis: 100%;
	gap: 1px;
	height: auto;
	margin: 0;
	padding: 8px 4px;
	color: #000;
	background: #eee;
	border: 1px solid #000;
	border-radius: 0;
	line-height: 1.3;
	text-transform: none;
	cursor: pointer;
}
#wpsol-accessibility-panel .wpsol-accessibility-button,
#wpsol-accessibility-panel .wpsol-accessibility-button span { font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; }
#wpsol-accessibility-panel .wpsol-accessibility-button:hover { color: #000; background: #c2c2c2; }
#wpsol-accessibility-panel .wpsol-accessibility-button:active { color: #000; background: #9d9d9d; }
#wpsol-accessibility-panel .wpsol-accessibility-button.is-active { background: yellow !important; }
#wpsol-accessibility-panel .wpsol-accessibility-button:focus-visible,
#wpsol-accessibility-panel .wpsol-accessibility-close:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
#wpsol-accessibility-panel .wpsol-accessibility-button img { width: 28px; height: 28px; }
#wpsol-accessibility-panel #wpsol-accessibility-fonts-up-enabled { position: absolute; top: 0; right: 4px; }
#wpsol-accessibility-panel .wpsol-accessibility-footer { margin-top: 40px; }
#wpsol-accessibility-panel .wpsol-accessibility-button--wide { width: 100%; }
#wpsol-accessibility-panel span.wpsol-accessibility-images-titles { display: none !important; }

@media (max-width: 400px) {
	#wpsol-accessibility-panel .wpsol-accessibility-group { flex-wrap: wrap; }
}

/* --------------------------------------------------------------- Effekte */
.wpsol-accessibility-zoom-up > :not(#wpsol-accessibility-panel):not(#wpsol-accessibility-trigger) {
	zoom: 1.4 !important;
	-moz-transform: scale(1.4) !important;
	-moz-transform-origin: 40% 0 !important;
}

.wpsol-accessibility-contrast-monochrome::after,
.wpsol-accessibility-contrast-hard::after {
	content: "" !important;
	position: fixed !important;
	inset: 0 !important;
	pointer-events: none;
	z-index: 99989;
}
.wpsol-accessibility-contrast-monochrome::after { backdrop-filter: grayscale(1) !important; }
.wpsol-accessibility-contrast-hard::after { backdrop-filter: invert(1) !important; }

.wpsol-accessibility-contrast-soft,
.wpsol-accessibility-contrast-soft > :not(#wpsol-accessibility-panel):not(#wpsol-accessibility-trigger),
.wpsol-accessibility-contrast-soft > :not(#wpsol-accessibility-panel):not(#wpsol-accessibility-trigger) :not(img) {
	color: #000 !important;
	background: 0 0 !important;
}

.wpsol-accessibility-animations * {
	-webkit-transition-property: none !important;
	transition-property: none !important;
	-webkit-animation: none !important;
	animation: none !important;
	-webkit-animation-name: none !important;
	animation-name: none !important;
}

.wpsol-accessibility-keyboard > :not(#wpsol-accessibility-panel) :is(a, button, h1, h2, h3, h4, h5, h6, input, li, p, select, textarea):focus {
	outline: 0 !important;
	background: #ff0 !important;
	color: #000 !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.wpsol-accessibility-content-links a { text-decoration: underline !important; }
.wpsol-accessibility-content-headers :is(h1, h2, h3, h4, h5, h6) { text-decoration: underline !important; }

.wpsol-accessibility-cursor-big-white { cursor: url(../images/cursors/w21.png), auto !important; }
.wpsol-accessibility-cursor-big-white a,
.wpsol-accessibility-cursor-big-white button { cursor: url(../images/cursors/hw21.png), auto !important; }
.wpsol-accessibility-cursor-big-black { cursor: url(../images/cursors/b2.png), auto !important; }
.wpsol-accessibility-cursor-big-black a,
.wpsol-accessibility-cursor-big-black button { cursor: url(../images/cursors/hb.png), auto !important; }

.wpsol-accessibility-content-images span.wpsol-accessibility-images-titles {
	display: block !important;
	max-width: 180px !important;
	margin: 0 auto !important;
	padding: 10px !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-align: center !important;
	color: #000 !important;
	background: #ffffe0 !important;
	border: solid 1px #8b0000 !important;
	border-radius: 0 !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

.wpsol-accessibility-fonts-simple :not(i):not(.fa) { font-family: Arial, Helvetica, sans-serif !important; }

.wpsol-accessibility-fonts-dyslexia :not(i):not(.fa) {
	font-family: "Comic Sans MS", "Trebuchet MS", Verdana, Arial, sans-serif !important;
	letter-spacing: .06em !important;
	word-spacing: .16em !important;
	line-height: 1.8 !important;
}

.wpsol-accessibility-focus-highlight :is(a, button, input, select, textarea, summary, [tabindex]):focus,
.wpsol-accessibility-focus-highlight :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #1d4ed8 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px rgba(29, 78, 216, .35) !important;
}

#wpsol-accessibility-reading-guide-bar {
	position: fixed;
	left: 0;
	right: 0;
	height: 2.4em;
	background: rgba(255, 255, 0, .16);
	border-top: 2px solid rgba(0, 0, 0, .55);
	border-bottom: 2px solid rgba(0, 0, 0, .55);
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 99988;
}

/* Vorlesen: Block unter der Maus, Block, der gerade gelesen wird. */
.wpsol-accessibility-read-aloud .wpsol-accessibility-read-hover {
	outline: 2px dashed #1d4ed8 !important;
	outline-offset: 3px !important;
	cursor: pointer !important;
}
.wpsol-accessibility-read-aloud .wpsol-accessibility-read-current {
	outline: 3px solid #1d4ed8 !important;
	outline-offset: 3px !important;
	background: rgba(29, 78, 216, .08) !important;
}