/*
 * Wurzelkinder Barrierefreiheit - 1. das Widget, 2. die Modi (Klassen an <html>)
 *
 * a) Das Widget haengt an seiner ID (#wka11y, #wka11y-skip): eine ID schlaegt
 *    jede Klassenkombination der Seite (Elementor stylt ueber
 *    .elementor-kit-22 a) - deshalb ohne !important im Widget.
 * b) Alle Modi wirken nur auf "body > *:not(.wka11y-ui)", damit das Widget
 *    nie mitskaliert oder umgefaerbt wird.
 * c) Kein filter auf html/body: das erzeugt einen neuen Containing Block und
 *    bricht position: fixed (Widget-Button, Elementor-Pro-Sticky).
 *
 * Ausfuehrliche Begruendungen stehen im README.
 */

/* ==========================================================================
   1. Widget
   ========================================================================== */

#wka11y[hidden],
#wka11y [hidden],
#wka11y-skip[hidden] {
	display: none !important;
}

#wka11y {
	position: fixed;
	z-index: 999999;
	bottom: 16px;
	margin: 0;
	padding: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: #000;
	text-align: left;
	letter-spacing: normal;
	word-spacing: normal;
}

#wka11y * {
	box-sizing: border-box;
}

#wka11y.wka11y-left {
	left: 16px;
}

#wka11y.wka11y-right {
	right: 16px;
}

/* Fokus immer sichtbar: brauner Ring (8,8:1 auf Weiss) mit Abstand. */
#wka11y :focus-visible,
#wka11y-skip:focus-visible {
	outline: 3px solid #65432a;
	outline-offset: 3px;
}

/* Gemeinsame Grundlage aller Schaltflaechen, damit Theme-Regeln fuer
 * button {} nicht durchschlagen. */
#wka11y button {
	margin: 0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
}

#wka11y .wka11y-trigger-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #65432a;
	color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

#wka11y .wka11y-trigger-btn:hover {
	background: #4c3220;
}

#wka11y .wka11y-panel {
	position: absolute;
	bottom: 64px;
	width: 304px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 96px);
	padding: 14px;
	overflow-y: auto;
	border: 2px solid #65432a;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	overscroll-behavior: contain;
}

#wka11y.wka11y-left .wka11y-panel {
	left: 0;
}

#wka11y.wka11y-right .wka11y-panel {
	right: 0;
}

#wka11y .wka11y-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

#wka11y .wka11y-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: #000;
}

#wka11y .wka11y-close {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid #65432a;
	background: #fff;
	color: #65432a;
}

#wka11y .wka11y-group {
	margin-bottom: 12px;
}

#wka11y .wka11y-group-label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 700;
}

#wka11y .wka11y-fs {
	display: flex;
	align-items: center;
	gap: 8px;
}

#wka11y .wka11y-step {
	flex: none;
	width: 56px;
	height: 44px;
	padding: 0;
	border: 2px solid #65432a;
	background: #fff;
	color: #65432a;
	font-size: 18px;
	font-weight: 700;
}

#wka11y .wka11y-step[aria-disabled="true"] {
	border-color: #706f6f;
	color: #706f6f;
	cursor: default;
}

#wka11y .wka11y-fs-value {
	flex: 1 1 auto;
	text-align: center;
	font-weight: 700;
	white-space: nowrap;
}

#wka11y .wka11y-switches {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}

#wka11y .wka11y-switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	border: 2px solid #65432a;
	background: #fff;
	color: #000;
	text-align: left;
}

#wka11y .wka11y-switch[aria-pressed="true"] {
	background: #65432a;
	color: #fff;
}

#wka11y .wka11y-switch[aria-disabled="true"] {
	cursor: default;
}

#wka11y .wka11y-switch-label {
	flex: 1 1 auto;
}

/* Zustand zusaetzlich als Text, nicht nur als Farbe (WCAG 1.4.1). */
#wka11y .wka11y-switch-state {
	flex: none;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#wka11y .wka11y-switch .wka11y-on,
#wka11y .wka11y-switch[aria-pressed="true"] .wka11y-off {
	display: none;
}

#wka11y .wka11y-switch[aria-pressed="true"] .wka11y-on {
	display: inline;
}

#wka11y .wka11y-reset {
	width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	border: 2px solid #65432a;
	background: #65432a;
	color: #fff;
	font-weight: 700;
	text-align: center;
}

#wka11y .wka11y-reset:hover {
	background: #4c3220;
}

#wka11y .wka11y-note {
	margin: 10px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #3d3d3d;
}

/* Ansagen fuer Screenreader, optisch entfernt. */
#wka11y .wka11y-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

#wka11y-skip {
	position: fixed;
	top: -200px;
	left: 8px;
	z-index: 1000000;
	padding: 12px 18px;
	border-radius: 0 0 8px 8px;
	background: #65432a;
	color: #fff;
	font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: underline;
	text-transform: none;
}

#wka11y-skip:focus {
	top: 0;
}

@media (max-width: 480px) {
	#wka11y {
		bottom: 12px;
	}

	#wka11y.wka11y-left {
		left: 12px;
	}

	#wka11y.wka11y-right {
		right: 12px;
	}
}

@media print {
	.wka11y-ui {
		display: none !important;
	}
}

/* ==========================================================================
   2. Modi
   ========================================================================== */

/* --- Schriftgroesse: 125 % / 150 % ---------------------------------------
 * zoom skaliert font-size, line-height, padding und Container gemeinsam. Die
 * Seite setzt alle Groessen in px (auch line-height: 30px) ueber Selektoren
 * wie .elementor-348 .elementor-element-xyz; generische calc()-Overrides
 * kaemen dagegen nur mit Festwerten an. Begruendung im README.
 */
html.wka11y-fs-1 body > *:not(.wka11y-ui) {
	zoom: 1.25;
}

html.wka11y-fs-2 body > *:not(.wka11y-ui) {
	zoom: 1.5;
}

html.wka11y-fs-3 body > *:not(.wka11y-ui) {
	zoom: 1.75;
}

html.wka11y-fs-4 body > *:not(.wka11y-ui) {
	zoom: 2;
}

/* Medien und Icons mit fester Pixelbreite duerfen ihren Container nicht
 * sprengen (sonst scrollt die Seite bei 150 % waagerecht - gemessen am
 * Logo-SVG der Startseite, 217 px fest). */
html[class*="wka11y-fs-"] img,
html[class*="wka11y-fs-"] video,
html[class*="wka11y-fs-"] iframe,
html[class*="wka11y-fs-"] table,
html[class*="wka11y-fs-"] .elementor-icon,
html[class*="wka11y-fs-"] .elementor-icon svg {
	max-width: 100% !important;
}

/* Lange Woerter muessen umbrechen duerfen: bei 150 % zusammen mit dem
 * groesseren Zeichenabstand scrollte die Startseite sonst waagerecht
 * (gemessen 398 px statt 360 px). */
html[class*="wka11y-fs-"] body > *:not(.wka11y-ui),
html[class*="wka11y-fs-"] body > *:not(.wka11y-ui) *,
html.wka11y-spacing body > *:not(.wka11y-ui),
html.wka11y-spacing body > *:not(.wka11y-ui) * {
	overflow-wrap: break-word !important;
}

/* Elementor-Pro-Sticky misst seine Breite in px und setzt sie inline; im
 * gezoomten Container waere sie zu gross. */
html[class*="wka11y-fs-"] .elementor-sticky--active {
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
}

/* --- Text-Abstaende (WCAG 1.4.12) --------------------------------------- */
html.wka11y-spacing body > *:not(.wka11y-ui) :is(p, li, dd, dt, td, th, label, figcaption, blockquote, h1, h2, h3, h4, h5, h6, .elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-theme-post-content) {
	line-height: 1.5 !important;
	letter-spacing: 0.12em !important;
	word-spacing: 0.16em !important;
}

html.wka11y-spacing body > *:not(.wka11y-ui) :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6) {
	margin-bottom: 2em !important;
}

/* Navigation bleibt kompakt, sonst bricht die Menueleiste um. */
html.wka11y-spacing body > *:not(.wka11y-ui) .elementor-nav-menu :is(li, a) {
	margin-bottom: 0 !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
}

/* --- Hoher Kontrast ------------------------------------------------------ */
html.wka11y-contrast {
	background: #fff !important;
}

html.wka11y-contrast body > *:not(.wka11y-ui),
html.wka11y-contrast body > *:not(.wka11y-ui) * {
	background-color: #fff !important;
	background-image: none !important;
	color: #000 !important;
	border-color: #000 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	filter: none !important;
	opacity: 1 !important;
}

/* Bilder und Videos bleiben unveraendert. */
html.wka11y-contrast body > *:not(.wka11y-ui) :is(img, picture, video, iframe) {
	background-color: transparent !important;
}

/* Hintergrundbilder mit Text darauf: Elementor-Overlay und Slideshow weg,
 * damit der Text auf Weiss lesbar bleibt. */
html.wka11y-contrast body > *:not(.wka11y-ui) :is(.elementor-background-overlay, .elementor-background-slideshow, .elementor-background-video-container) {
	display: none !important;
}

html.wka11y-contrast body > *:not(.wka11y-ui) a {
	color: #0000cc !important;
	text-decoration: underline !important;
}

html.wka11y-contrast body > *:not(.wka11y-ui) a:visited {
	color: #551a8b !important;
}

html.wka11y-contrast body > *:not(.wka11y-ui) :is(button, input, select, textarea, .elementor-button) {
	border: 2px solid #000 !important;
	background-color: #fff !important;
	color: #000 !important;
}

html.wka11y-contrast body > *:not(.wka11y-ui) :focus-visible {
	outline: 3px solid #0000cc !important;
	outline-offset: 2px !important;
}

/* --- Umgekehrter Kontrast: Weiss auf Schwarz ----------------------------- */
/* Gleiche Systematik wie oben. Inhaltsbilder bleiben unveraendert - sie
 * werden bewusst nicht invertiert, sonst waeren Fotos unbrauchbar. */
html.wka11y-contrast-dark {
	background: #000 !important;
}

html.wka11y-contrast-dark body > *:not(.wka11y-ui),
html.wka11y-contrast-dark body > *:not(.wka11y-ui) * {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
	filter: none !important;
	opacity: 1 !important;
}

html.wka11y-contrast-dark body > *:not(.wka11y-ui) :is(img, picture, video, iframe) {
	background-color: transparent !important;
}

html.wka11y-contrast-dark body > *:not(.wka11y-ui) :is(.elementor-background-overlay, .elementor-background-slideshow, .elementor-background-video-container) {
	display: none !important;
}

/* #66ccff: 11,6:1 auf Schwarz, #d9a6ff fuer besuchte Links: 10,8:1. */
html.wka11y-contrast-dark body > *:not(.wka11y-ui) a {
	color: #66ccff !important;
	text-decoration: underline !important;
}

html.wka11y-contrast-dark body > *:not(.wka11y-ui) a:visited {
	color: #d9a6ff !important;
}

html.wka11y-contrast-dark body > *:not(.wka11y-ui) :is(button, input, select, textarea, .elementor-button) {
	border: 2px solid #fff !important;
	background-color: #000 !important;
	color: #fff !important;
}

html.wka11y-contrast-dark body > *:not(.wka11y-ui) :focus-visible {
	outline: 3px solid #66ccff !important;
	outline-offset: 2px !important;
}

/* --- Links hervorheben --------------------------------------------------- */
html.wka11y-links body > *:not(.wka11y-ui) a {
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

html.wka11y-links body > *:not(.wka11y-ui) a:hover,
html.wka11y-links body > *:not(.wka11y-ui) a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	text-decoration-thickness: 3px !important;
}

/* --- Lesbare Schrift ---------------------------------------------------- */
/* <i> und <svg> bleiben absichtlich aussen vor: Elementor zeichnet Icons
 * teilweise mit der Icon-Schrift "eicons". */
html.wka11y-font body > *:not(.wka11y-ui),
html.wka11y-font body > *:not(.wka11y-ui) :is(p, li, a, span, div, h1, h2, h3, h4, h5, h6, button, input, select, textarea, label, td, th, blockquote, figcaption, strong, em, small, cite, legend, caption) {
	font-family: system-ui, Arial, Helvetica, sans-serif !important;
}

/* --- Animationen stoppen ------------------------------------------------- */
/* Die Klasse setzt auch das Head-Script, wenn das System
 * prefers-reduced-motion: reduce meldet - dann ohne zu speichern. */
html.wka11y-motion {
	scroll-behavior: auto !important;
}

html.wka11y-motion body > *:not(.wka11y-ui),
html.wka11y-motion body > *:not(.wka11y-ui) *,
html.wka11y-motion body > *:not(.wka11y-ui) *::before,
html.wka11y-motion body > *:not(.wka11y-ui) *::after {
	animation-delay: 0s !important;
	animation-duration: 0s !important;
	animation-iteration-count: 1 !important;
	transition-delay: 0s !important;
	transition-duration: 0s !important;
	scroll-behavior: auto !important;
}

/* Elementor-Entrance-Animationen: Inhalte sofort sichtbar. */
html.wka11y-motion .elementor-invisible,
html.wka11y-motion .animated {
	visibility: visible !important;
	opacity: 1 !important;
	animation: none !important;
}

html.wka11y-motion .elementor-motion-effects-element,
html.wka11y-motion .elementor-motion-effects-layer {
	transform: none !important;
}