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

.wpk-a11y-trigger {
	position: fixed;
	z-index: 2147483001;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wpk-a11y-knopf, 56px);
	height: var(--wpk-a11y-knopf, 56px);
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--wpk-a11y-akzent, #2b7d78);
	color: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 10px 28px rgba(0,0,0,.16);
	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: #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: #fff; }
.wpk-a11y-kachel[aria-pressed="true"] .wpk-a11y-kachel__badge { background: 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: #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: #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: #fff; }
.wpk-a11y-profil[aria-pressed="true"] .wpk-a11y-kachel__badge { background: 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; }

.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);
}