/* WPK Barrierefreiheit - Ausloeser und Bedienfeld.
   Alle Masse in px, damit die Root-Schriftgroesse des Themes nichts verschiebt. */

/* Themes und Page-Builder stylen haeufig jedes button-Element global
   (z. B. Elementors Kit mit ".elementor-kit-123 button"). Solche Regeln haben
   eine hoehere Spezifitaet als eine einzelne Klasse und wuerden den Ausloeser
   eckig, breiter oder andersfarbig machen. Deshalb hier Element plus Klasse
   und !important auf den Eigenschaften, die den Knopf ausmachen. */
button.wpk-a11y-trigger,
.wpk-a11y-trigger {
	position: fixed;
	z-index: 2147483001;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wpk-a11y-knopf, 56px) !important;
	height: var(--wpk-a11y-knopf, 56px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	border: 2px solid #fff !important;
	border-radius: 50% !important;
	background: var(--wpk-a11y-akzent, #2b7d78) !important;
	color: var(--wpk-a11y-akzent-text, #fff) !important;
	box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 10px 28px rgba(0,0,0,.16) !important;
	line-height: 1 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: transform .18s ease;
}
.wpk-a11y-trigger svg { width: var(--wpk-a11y-symbol, 26px); height: var(--wpk-a11y-symbol, 26px); }
.wpk-a11y-trigger:hover { transform: translateY(-2px); }
.wpk-a11y-trigger:focus-visible { outline: 3px solid #0b3d91; outline-offset: 3px; }
.wpk-a11y-trigger--unten-links  { bottom: var(--wpk-a11y-y,20px); left: var(--wpk-a11y-x,20px); }
.wpk-a11y-trigger--unten-rechts { bottom: var(--wpk-a11y-y,20px); right: var(--wpk-a11y-x,20px); }
.wpk-a11y-trigger--mitte-links  { top: 50%; left: var(--wpk-a11y-x,20px); transform: translateY(-50%); }
.wpk-a11y-trigger--mitte-rechts { top: 50%; right: var(--wpk-a11y-x,20px); transform: translateY(-50%); }
.wpk-a11y-trigger--mitte-links:hover,
.wpk-a11y-trigger--mitte-rechts:hover { transform: translateY(-50%) scale(1.04); }

.wpk-a11y-backdrop { position: fixed; inset: 0; z-index: 2147483002; background: rgba(9,14,16,.5); }

.wpk-a11y-panel {
	position: fixed;
	z-index: 2147483003;
	top: 0;
	bottom: 0;
	left: 0;
	width: 440px;
	max-width: 100vw;
	display: flex;
	flex-direction: column;
	background: #eef1f1;
	color: #14181a;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	box-shadow: 0 0 60px rgba(0,0,0,.3);
}
.wpk-a11y-panel--rechts { left: auto; right: 0; }

.wpk-a11y-panel__kopf {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 26px 24px 30px;
	background: var(--wpk-a11y-akzent, #2b7d78);
	color: var(--wpk-a11y-akzent-text, #fff);
	text-align: center;
	position: relative;
}
.wpk-a11y-panel__marke { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.18); }
.wpk-a11y-panel__marke svg { width: 28px; height: 28px; }
.wpk-a11y-panel__titel { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.wpk-a11y-panel__zu {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 10px;
	background: rgba(255,255,255,.18);
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.wpk-a11y-panel__zu:hover { background: rgba(255,255,255,.32); }

.wpk-a11y-panel__inhalt { flex: 1; overflow-y: auto; padding: 16px; }

/* Gruppe als weisse Karte */
.wpk-a11y-gruppe { background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.wpk-a11y-gruppe + .wpk-a11y-gruppe { margin-top: 14px; }
.wpk-a11y-gruppe__titel { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #14181a; }
.wpk-a11y-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.wpk-a11y-kachel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-height: 106px;
	padding: 16px 8px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: #f4f7f7;
	color: #14181a;
	font: inherit;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.wpk-a11y-kachel__badge { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.wpk-a11y-kachel svg { width: 20px; height: 20px; color: #2c3a39; }
.wpk-a11y-kachel:hover { background: #e9efee; }
.wpk-a11y-kachel[aria-pressed="true"] { background: var(--wpk-a11y-akzent, #2b7d78); border-color: var(--wpk-a11y-akzent, #2b7d78); color: var(--wpk-a11y-akzent-text, #fff); }
.wpk-a11y-kachel[aria-pressed="true"] .wpk-a11y-kachel__badge { background: var(--wpk-a11y-akzent-badge, rgba(255,255,255,.22)); box-shadow: none; }
.wpk-a11y-kachel[aria-pressed="true"] svg { color: #fff; }

/* Stufenregler ueber die volle Breite */
.wpk-a11y-stufe {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 0;
	padding: 10px 14px;
	border-radius: 14px;
	background: #f4f7f7;
}
.wpk-a11y-stufe__titel { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; text-align: left; }
.wpk-a11y-stufe__reihe { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.wpk-a11y-stufe__reihe button {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: var(--wpk-a11y-akzent, #2b7d78);
	color: var(--wpk-a11y-akzent-text, #fff);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.wpk-a11y-stufe__reihe button[disabled] { opacity: .35; cursor: default; }
.wpk-a11y-stufe__wert { min-width: 78px; padding: 7px 10px; border-radius: 8px; background: #fff; font-size: 12.5px; font-weight: 600; text-align: center; }

.wpk-a11y-kachel:focus-visible,
.wpk-a11y-stufe__reihe button:focus-visible,
.wpk-a11y-panel__zu:focus-visible,
.wpk-a11y-reset:focus-visible { outline: 3px solid #0b3d91; outline-offset: 2px; }

.wpk-a11y-panel__fuss { padding: 16px; }
.wpk-a11y-reset {
	width: 100%;
	padding: 14px 16px;
	border: 0;
	border-radius: 12px;
	background: var(--wpk-a11y-akzent, #2b7d78);
	color: var(--wpk-a11y-akzent-text, #fff);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.wpk-a11y-reset:hover { filter: brightness(1.08); }
.wpk-a11y-panel__hinweis { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #6a7b7a; text-align: center; }

@media (max-width: 480px) {
	.wpk-a11y-panel { width: 100vw; }
	.wpk-a11y-raster { gap: 8px; }
	.wpk-a11y-kachel { font-size: 12px; min-height: 98px; }
}
@media (prefers-reduced-motion: reduce) { .wpk-a11y-trigger, .wpk-a11y-kachel { transition: none; } }
/* Voreinstellungen */
.wpk-a11y-profile { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wpk-a11y-profil {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 16px 12px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: #f4f7f7;
	color: #14181a;
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: background .15s ease;
}
.wpk-a11y-profil:hover { background: #e9efee; }
.wpk-a11y-profil svg { width: 20px; height: 20px; color: #2c3a39; }
.wpk-a11y-profil__label { display: block; font-size: 13.5px; font-weight: 700; }
.wpk-a11y-profil__hinweis { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: #6a7b7a; }
.wpk-a11y-profil[aria-pressed="true"] { background: var(--wpk-a11y-akzent, #2b7d78); border-color: var(--wpk-a11y-akzent, #2b7d78); color: var(--wpk-a11y-akzent-text, #fff); }
.wpk-a11y-profil[aria-pressed="true"] .wpk-a11y-kachel__badge { background: var(--wpk-a11y-akzent-badge, rgba(255,255,255,.22)); box-shadow: none; }
.wpk-a11y-profil[aria-pressed="true"] svg { color: #fff; }
.wpk-a11y-profil[aria-pressed="true"] .wpk-a11y-profil__hinweis { color: rgba(255,255,255,.85); }
.wpk-a11y-profil:focus-visible { outline: 3px solid #0b3d91; outline-offset: 2px; }

button.wpk-a11y-trigger--rahmen,
.wpk-a11y-trigger--rahmen {
	box-shadow:
		inset 0 0 0 4px var(--wpk-a11y-akzent, #2b7d78),
		inset 0 0 0 6px rgba(255, 255, 255, .95),
		0 2px 6px rgba(0,0,0,.18),
		0 10px 28px rgba(0,0,0,.16) !important;
}