/* 365art Formschutz – Schieberegler. Schrift und Textfarbe kommen von der Website. */
/* Selektoren bewusst stärker (div…[data-zustand]): Formular-Plugins wie WPForms setzen mit „div.wpforms-container-full *“ alles zurück. */
div.a365fs-regler[data-zustand] {
	--a365fs-farbe: #1d6f72;
	--a365fs-gut: #2e7d43;
	--a365fs-fehler: #b3261e;
	--griff: 44px;
	/* Elementor macht jede .elementor-field-group zur Flex-Zeile – dann stünden Titel und Leiste nebeneinander
	   und die Leiste schrumpfte auf 0 Pixel (Fund live bei Sonja, 30.10.2026). */
	display: block !important;
	box-sizing: border-box;
	width: 100%;
	margin: .5em 0 .25em;
	clear: both;
}
div.a365fs-regler[data-zustand] > p,
div.a365fs-regler[data-zustand] > div {
	width: 100%;
}
div.a365fs-regler[data-zustand] *,
div.a365fs-regler[data-zustand] *::before,
div.a365fs-regler[data-zustand] *::after {
	box-sizing: border-box;
}
div.a365fs-regler[data-zustand] .a365fs-regler__titel {
	margin: 0 0 .5em !important;
	padding: 0 !important;
	font-size: .95em;
	font-weight: 600;
	line-height: 1.4;
}
div.a365fs-regler[data-zustand] .a365fs-regler__leiste {
	position: relative;
	height: 50px;
	border: 1px solid #c3cccf;
	border-radius: 25px;
	background: #eef1f2;
	-webkit-user-select: none;
	user-select: none;
	touch-action: pan-y;
	cursor: pointer;
}
div.a365fs-regler[data-zustand] .a365fs-regler__spur {
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 2px;
	width: calc(var(--griff) + (100% - var(--griff) - 4px) * var(--p, 0) / 100);
	border-radius: 22px;
	background: rgba(29, 111, 114, .16);
	background: color-mix(in srgb, var(--a365fs-farbe) 16%, transparent);
	pointer-events: none;
}
div.a365fs-regler[data-zustand] .a365fs-regler__ziel,
div.a365fs-regler[data-zustand] .a365fs-regler__griff {
	position: absolute;
	top: 2px;
	width: var(--griff);
	height: var(--griff);
	border-radius: 50%;
}
div.a365fs-regler[data-zustand] .a365fs-regler__ziel {
	left: calc(2px + (100% - var(--griff) - 4px) * var(--z, 50) / 100);
	border: 3px dashed var(--a365fs-farbe);
	pointer-events: none;
	transition: border-style .15s, transform .15s;
}
div.a365fs-regler[data-zustand].is-nah .a365fs-regler__ziel {
	border-style: solid;
	transform: scale(1.12);
}
div.a365fs-regler[data-zustand] .a365fs-regler__griff {
	left: calc(2px + (100% - var(--griff) - 4px) * var(--p, 0) / 100);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--a365fs-farbe);
	color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	cursor: grab;
	touch-action: none;
	transition: left .25s ease-out, background-color .2s;
	z-index: 1;
}
div.a365fs-regler[data-zustand] .a365fs-regler__griff svg {
	width: 22px;
	height: 22px;
	pointer-events: none;
}
/* Das eigentliche Bedienelement: unsichtbar, aber für Tastatur und Screenreader erreichbar (nicht clip/display:none). */
div.a365fs-regler[data-zustand] .a365fs-regler__eingabe {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
/* Fokus am Range-Feld zeigt sich am Griff – zweifarbig, damit er auf hellem und dunklem Grund sichtbar ist. */
div.a365fs-regler[data-zustand] .a365fs-regler__eingabe:focus-visible ~ .a365fs-regler__griff {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1a1a1a;
}
div.a365fs-regler[data-zustand].is-ziehen .a365fs-regler__griff {
	cursor: grabbing;
	transition: none;
}
div.a365fs-regler[data-zustand] .a365fs-regler__fehler {
	margin: 0 !important;
	padding: 0 !important;
	font-size: .9em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--a365fs-fehler);
}
/* Platz für eine Zeile Meldung ist reserviert (kein Springen) – steht ein Fehler da, übernimmt er diese Zeile. */
div.a365fs-regler[data-zustand] .a365fs-regler__fehler:not(:empty) {
	margin-top: .4em !important;
}
div.a365fs-regler[data-zustand] .a365fs-regler__fehler:not(:empty) + .a365fs-regler__meldung {
	min-height: 0;
	margin: 0 !important;
}
div.a365fs-regler[data-zustand] .a365fs-regler__meldung {
	min-height: 1.5em;
	margin: .4em 0 0 !important;
	padding: 0 !important;
	font-size: .9em;
	line-height: 1.5;
}
div.a365fs-regler[data-zustand="geloest"] .a365fs-regler__leiste {
	border-color: var(--a365fs-gut);
	background: #e7f4ea;
}
div.a365fs-regler[data-zustand="geloest"] .a365fs-regler__spur {
	background: rgba(46, 125, 67, .18);
}
div.a365fs-regler[data-zustand="geloest"] .a365fs-regler__griff {
	background: var(--a365fs-gut);
	cursor: default;
}
div.a365fs-regler[data-zustand="geloest"] .a365fs-regler__ziel {
	display: none;
}
div.a365fs-regler[data-zustand="geloest"] .a365fs-regler__meldung {
	color: #1e5e2f;
	font-weight: 600;
}
div.a365fs-regler[data-zustand="fehler"] .a365fs-regler__leiste {
	border-color: var(--a365fs-fehler);
	box-shadow: 0 0 0 1px var(--a365fs-fehler);
}

.a365fs-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
/* Widget eines fremden Captcha-Dienstes (nur wenn eingeschaltet) */
div.a365fs-captcha {
	display: block !important;
	width: 100%;
	margin: .5em 0 .75em;
	clear: both;
}
div.a365fs-captcha .a365fs-captcha__meldung {
	margin: .3em 0 0 !important;
	padding: 0 !important;
	font-size: .9em;
	font-weight: 600;
	color: #b3261e;
}
@media (prefers-reduced-motion: reduce) {
	div.a365fs-regler[data-zustand] .a365fs-regler__griff,
	div.a365fs-regler[data-zustand] .a365fs-regler__ziel {
		transition: none;
	}
}
@media (forced-colors: active) {
	div.a365fs-regler[data-zustand] .a365fs-regler__griff {
		border: 2px solid ButtonText;
	}
	div.a365fs-regler[data-zustand] .a365fs-regler__eingabe:focus-visible ~ .a365fs-regler__griff {
		outline: 3px solid Highlight;
		outline-offset: 3px;
	}
	div.a365fs-regler[data-zustand] .a365fs-regler__ziel {
		border-color: Highlight;
	}
}