/* =========================================================
   Seiten-Modi (wirken auf alles außer dem Widget selbst)
   ========================================================= */

/* Hoher Kontrast, dunkel */
html.wgt-hc,
html.wgt-hc body { background: #000 !important; }
html.wgt-hc body *:not(.wgt-a11y):not(.wgt-a11y *):not(.wgt-mask) {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
html.wgt-hc body *:not(.wgt-a11y *)::before,
html.wgt-hc body *:not(.wgt-a11y *)::after { background-color: transparent !important; background-image: none !important; box-shadow: none !important; }
html.wgt-hc a:not(.wgt-a11y *),
html.wgt-hc a:not(.wgt-a11y *) * { color: #ff0 !important; }
html.wgt-hc :is(input, textarea, select):not(.wgt-a11y *) { border: 2px solid #fff !important; }

/* Graustufen/Kontrast als Overlay mit backdrop-filter: wirkt auf alles darunter, nicht aufs Widget,
   und bricht keine fixierten/sticky Header (anders als filter auf html/body) */
html.wgt-filter::after {
	content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99989;
	-webkit-backdrop-filter: var(--wgt-f); backdrop-filter: var(--wgt-f);
}

/* Großer Cursor */
html.wgt-cursor, html.wgt-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-6.5 1 4 7.5-3 1.5-4-7.5L4 20z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 8 4, auto !important;
}

/* Lesemaske */
.wgt-mask { position: fixed; left: 0; right: 0; background: rgba(0,0,0,.6); z-index: 99988; pointer-events: none; }
.wgt-mask--top { top: 0; }
.wgt-mask--bot { bottom: 0; }

/* Links hervorheben (Admin-Leiste ausgenommen) */
html.wgt-links a:not(.wgt-a11y *):not(#wpadminbar *) {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
}

/* Lesbare Schrift (Icon-Fonts ausgenommen) */
html.wgt-font body *:not(.wgt-a11y *):not(i):not([class*="icon"]):not([class*="fa-"]):not([class*="eicon"]):not([class*="dashicons"]) {
	font-family: Verdana, Arial, Helvetica, sans-serif !important;
}

/* Mehr Abstand */
html.wgt-spacing :is(p, li, dd, dt, td, th, span, a, label, blockquote, h1, h2, h3, h4, h5, h6):not(.wgt-a11y *) {
	line-height: 1.8 !important;
	letter-spacing: 0.05em !important;
	word-spacing: 0.12em !important;
}
html.wgt-spacing p:not(.wgt-a11y *) { margin-bottom: 1.5em !important; }

/* Animationen stoppen */
html.wgt-motion *,
html.wgt-motion *::before,
html.wgt-motion *::after {
	animation-duration: 0s !important;
	animation-iteration-count: 1 !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* =========================================================
   Widget · per ID + !important abgeschottet, damit Theme-/
   Elementor-Kit-Buttonstyles (Farbe, Uppercase, Padding) nicht greifen
   ========================================================= */

#wgt-a11y {
	--a: var(--wgt-a11y-accent, #1a56db);
	position: fixed !important;
	z-index: 99990 !important;
	font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
	color: #1f2937 !important;
	text-align: left !important;
}

#wgt-a11y, #wgt-a11y * {
	box-sizing: border-box !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
}

/* --- Button-Reset ----- */
#wgt-a11y button {
	all: unset;
	box-sizing: border-box !important;
	cursor: pointer !important;
	font: inherit !important;
	font-weight: 500 !important;
	color: #1f2937 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	line-height: 1.3 !important;
	text-decoration: none !important;
	transition: background-color .15s, border-color .15s !important;
}
#wgt-a11y button:focus-visible, #wgt-a11y a:focus-visible { outline: 3px solid #f59e0b !important; outline-offset: 2px !important; }

/* --- Rundbutton ----- */
#wgt-a11y .wgt-a11y__fab {
	width: 56px !important; height: 56px !important;
	border-radius: 50% !important;
	background: var(--a) !important;
	color: #fff !important;
	display: flex !important; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,.25) !important;
}
#wgt-a11y .wgt-a11y__fab svg { width: 32px !important; height: 32px !important; max-width: none !important; fill: #fff !important; display: block !important; }
#wgt-a11y .wgt-a11y__fab svg * { fill: #fff !important; }

/* --- Panel ----- */
#wgt-a11y .wgt-a11y__panel {
	position: absolute;
	width: 320px; max-width: calc(100vw - 40px); max-height: calc(100vh - 120px);
	overflow: auto;
	background: #fff !important;
	border-radius: 14px;
	box-shadow: 0 10px 40px rgba(0,0,0,.25);
	padding: 16px;
}
#wgt-a11y .wgt-a11y__panel[hidden] { display: none !important; }

#wgt-a11y .wgt-a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#wgt-a11y .wgt-a11y__title { font-size: 17px !important; font-weight: 700 !important; }
#wgt-a11y .wgt-a11y__close {
	width: 32px !important; height: 32px !important;
	font-size: 26px !important; line-height: 1 !important;
	display: flex !important; align-items: center; justify-content: center;
}
#wgt-a11y .wgt-a11y__close:hover { background: #f3f4f6 !important; }

/* --- Schriftgröße ----- */
#wgt-a11y .wgt-a11y__size { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 14px; border-bottom: 1px solid #e5e7eb; }
#wgt-a11y .wgt-a11y__stepper { display: flex; align-items: center; gap: 8px; }
#wgt-a11y .wgt-a11y__stepper button {
	width: 42px !important; height: 36px !important;
	border: 1px solid #d1d5db !important;
	background: #fff !important;
	display: flex !important; align-items: center; justify-content: center;
	font-weight: 700 !important;
}
#wgt-a11y .wgt-a11y__stepper button:hover:not(:disabled) { background: #f3f4f6 !important; }
#wgt-a11y .wgt-a11y__stepper button:disabled { opacity: .35 !important; cursor: default !important; }
#wgt-a11y .wgt-a11y__stepper output { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }

/* --- Optionen ----- */
#wgt-a11y .wgt-a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
#wgt-a11y .wgt-a11y__opt {
	min-height: 56px !important;
	padding: 10px !important;
	border: 2px solid #e5e7eb !important;
	border-radius: 10px !important;
	background: #f9fafb !important;
	font-size: 14px !important;
	text-align: center !important;
	display: flex !important; align-items: center; justify-content: center;
}
#wgt-a11y .wgt-a11y__opt:hover { border-color: #9ca3af !important; background: #f3f4f6 !important; }
#wgt-a11y .wgt-a11y__opt[aria-pressed="true"] { background: var(--a) !important; border-color: var(--a) !important; color: #fff !important; }

/* --- Fuß ----- */
#wgt-a11y .wgt-a11y__foot { display: flex; flex-direction: column; gap: 8px; }
#wgt-a11y .wgt-a11y__reset {
	padding: 10px !important;
	background: #f3f4f6 !important;
	text-align: center !important;
	font-weight: 600 !important;
	display: block !important;
}
#wgt-a11y .wgt-a11y__reset:hover { background: #e5e7eb !important; }
#wgt-a11y .wgt-a11y__foot a { color: var(--a) !important; text-decoration: underline !important; text-align: center; font-size: 14px !important; }