/*
 * NICHRAUM AUTARK MODUL
 *
 * Modul:      Switch Pad
 * Bereich:    UI Element / Switch
 * Pfad:       /sys/ui/elements/switch/switch-pad/switch-pad.css
 * Version:    1-20260726-000001
 *
 * Zweck:
 * Autonome Darstellung eines physisch wirkenden,
 * rot beleuchteten Wippschalters.
 *
 * Grundsätze:
 * - Keine projektspezifische Positionierung.
 * - Keine Bilddateien erforderlich.
 * - Das Bauteil kennt ausschließlich on und off.
 * - Externe Zustandstexte erhalten nur eine neutrale Grundschrift.
 * - Wippensymbole sind Bestandteil der Kunststoffdarstellung.
 * - Wippensymbole können über CSS Custom Properties gestaltet werden.
 */


/* ==========================================================================
   1. ÖFFENTLICHE STANDARDWERTE
   ========================================================================== */

.ui-switch-pad {
	--ui-switch-pad-rocker-width:40px;
	--ui-switch-pad-rocker-height:75px;

	--ui-switch-pad-frame-background:#181818;
	--ui-switch-pad-frame-inner:#000000;

	--ui-switch-pad-motion-duration:.2s;
	--ui-switch-pad-motion-easing:
		cubic-bezier(.8,0,.5,1);

	--ui-switch-pad-fade-duration:.3s;
	--ui-switch-pad-fade-easing:
		cubic-bezier(.51,0,.06,1);

	/*
	 * Eingearbeitete Wippensymbole.
	 *
	 * Diese Werte dürfen von der einbindenden Anwendung
	 * kontrolliert überschrieben werden.
	 */
	--ui-switch-pad-symbol-font-family:
		Arial,
		Helvetica,
		sans-serif;

	--ui-switch-pad-symbol-font-size:15px;
	--ui-switch-pad-symbol-font-weight:500;

	--ui-switch-pad-symbol-active-color:#fff8f2;

	--ui-switch-pad-symbol-inactive-color:
		rgba(35,0,3,.62);

	--ui-switch-pad-symbol-active-shadow:
		0 0 1px rgba(255,255,255,1),
		0 0 3px rgba(255,238,225,.95),
		0 0 6px rgba(255,177,115,.65);

	--ui-switch-pad-symbol-inactive-shadow:
		0 1px 0 rgba(255,105,80,.08),
		0 -1px 0 rgba(0,0,0,.78);

	display:inline-flex;
	align-items:flex-start;
	justify-content:center;

	position:relative;

	width:90px;
	min-height:110px;

	margin:0;
	padding:0;

	vertical-align:top;
}


/* ==========================================================================
   2. SCHALTERTRÄGER
   ========================================================================== */

.ui-switch-pad .switch-pad {
	box-sizing:content-box;

	display:block;

	position:relative;

	width:var(--ui-switch-pad-rocker-width);
	height:var(--ui-switch-pad-rocker-height);

	margin:0;
	padding:2px;

	border-radius:2px;

	background-color:
		var(--ui-switch-pad-frame-background);

	box-shadow:
		inset 0 .5px 1px -.25px #404063,
		inset .5px 0 2px -.25px #000000,
		inset -.5px 0 2px -.25px #000000,

		-.3px .4px .5px rgba(4,4,6,.045),
		-.6px .8px 1px rgba(4,4,6,.04),
		-1px 1.2px 1.5px rgba(4,4,6,.035),
		-1.3px 1.5px 2px rgba(4,4,6,.03),
		-1.6px 1.9px 2.5px rgba(4,4,6,.025),
		-1.9px 2.3px 3px rgba(4,4,6,.02),
		-2.2px 2.7px 3.5px rgba(4,4,6,.015),
		-2.6px 3.1px 4px rgba(4,4,6,.01),

		.3px .4px .5px rgba(4,4,6,.045),
		.6px .8px 1px rgba(4,4,6,.04),
		1px 1.2px 1.5px rgba(4,4,6,.035),
		1.3px 1.5px 2px rgba(4,4,6,.03),
		1.6px 1.9px 2.5px rgba(4,4,6,.025),
		1.9px 2.3px 3px rgba(4,4,6,.02),
		2.2px 2.7px 3.5px rgba(4,4,6,.015),
		2.6px 3.1px 4px rgba(4,4,6,.01),

		0 .5px .5px rgba(4,4,6,.0225),
		0 1px 1px rgba(4,4,6,.02),
		0 1.5px 1.5px rgba(4,4,6,.0175),
		0 2px 2px rgba(4,4,6,.015),
		0 2.5px 2.5px rgba(4,4,6,.0125),
		0 3px 3px rgba(4,4,6,.01),
		0 3.5px 3.5px rgba(4,4,6,.0075),
		0 4px 4px rgba(4,4,6,.005);

	cursor:pointer;

	user-select:none;
	-webkit-user-select:none;

	touch-action:manipulation;
}


/*
 * Dunkle Einfassung unmittelbar hinter der Wippe.
 */
.ui-switch-pad .switch-pad::before {
	content:"";

	position:absolute;

	top:2px;
	right:2px;
	bottom:2px;
	left:2px;

	border-radius:1px;

	background:
		radial-gradient(
			60% 3% at 50% 0%,
			rgba(255,0,21,.33),
			rgba(255,0,21,0)
		),

		radial-gradient(
			5% 30% at 1% 55%,
			rgba(255,0,21,.66),
			rgba(255,0,21,0)
		),

		radial-gradient(
			5% 40% at 99% 55%,
			rgba(255,0,21,.66),
			rgba(255,0,21,0)
		),

		var(--ui-switch-pad-frame-inner);

	box-shadow:
		inset 0 -.5px 2px -.25px #222222;

	pointer-events:none;
}


/* ==========================================================================
   3. NATIVE CHECKBOX
   ========================================================================== */

.ui-switch-pad .switch-pad__input {
	position:absolute;

	top:2px;
	left:2px;

	z-index:10;

	width:calc(100% - 4px);
	height:calc(100% - 4px);

	margin:0;

	appearance:none;
	-webkit-appearance:none;

	border:0;
	outline:0;

	background:transparent;
	opacity:0;

	cursor:pointer;
}


/* ==========================================================================
   4. MECHANISCHE WIPPE
   ========================================================================== */

.ui-switch-pad .switch-pad__rocker {
	box-sizing:border-box;

	display:block;

	position:relative;

	z-index:2;

	width:var(--ui-switch-pad-rocker-width);
	height:var(--ui-switch-pad-rocker-height);

	overflow:hidden;

	border-radius:.4px;

	cursor:pointer;

	appearance:none;
	-webkit-appearance:none;

	/*
	 * Der ausgeschaltete Zustand drückt die untere Seite
	 * der Wippe in das Gehäuse.
	 */
	transform:
		perspective(110px)
		rotateX(-4deg)
		translate3d(0,1.5px,0);

	transform-origin:center;

	transition:
		transform
		var(--ui-switch-pad-motion-duration)
		var(--ui-switch-pad-motion-easing);
}


/*
 * Eingeschaltet: Die obere Seite wird in das Gehäuse gedrückt.
 *
 * Die gesamte Wippe bewegt sich, nicht nur deren Farbflächen.
 */
.ui-switch-pad
.switch-pad__input:checked
~
.switch-pad__rocker {
	transform:
		perspective(110px)
		rotateX(4deg)
		translate3d(0,-1.5px,0);
}


/* ==========================================================================
   5. AUSGESCHALTETE WIPPENFLÄCHE
   ========================================================================== */

.ui-switch-pad .switch-pad__rocker::before {
	content:"";

	position:absolute;

	inset:0;

	z-index:-1;

	border-radius:.4px;

	background:
		linear-gradient(
			to right,
			rgba(255,51,68,0) 3%,
			rgba(255,102,115,.33) 17.5%,
			rgba(255,102,115,.33) 82.5%,
			rgba(255,51,68,0) 97%
		)
		no-repeat center 6px / 92.5% .3px,

		radial-gradient(
			50% 20% at 50% 50%,
			rgba(255,153,162,.15),
			rgba(255,153,162,.25) 15%,
			rgba(102,0,9,.1) 60%,
			rgba(255,0,21,0)
		),

		radial-gradient(
			100% 1% at 50% 2%,
			rgba(255,204,208,.25),
			rgba(255,0,21,0) 60%
		),

		radial-gradient(
			45% 20% at 50% 8px,
			#b31e00,
			rgba(255,0,21,0)
		),

		radial-gradient(
			2% 40% at 6% 45%,
			#e60a00,
			rgba(255,0,21,0)
		),

		radial-gradient(
			2% 50% at 94% 45%,
			#e60a00,
			rgba(255,0,21,0)
		),

		linear-gradient(
			to right,
			rgba(255,153,162,.25) 3%,
			rgba(255,204,208,.33) 7.5%,
			rgba(255,204,208,.33) 92.5%,
			rgba(255,153,162,.25) 97%
		)
		no-repeat center calc(100% - 1px) / 92.5% .4px,

		linear-gradient(
			to top,
			rgba(255,153,162,0) 3%,
			rgba(255,153,162,.5) 97%
		)
		no-repeat center calc(100% - 3px) / 92.5% .5px,

		radial-gradient(
			10% 1% at 50% 50%,
			rgba(230,0,19,0) 3%,
			rgba(255,0,21,.1) 40%,
			#ff0015 90%,
			rgba(230,0,19,.15) 97%
		)
		no-repeat top / 100% .5px,

		#4d0006;

	box-shadow:
		inset 0 8px 7px -5px rgba(26,0,2,.75),
		inset 0 -8px 7px -5px rgba(26,0,2,.75);

	filter:contrast(120%);

	opacity:1;

	transform:
		translate3d(0,0,0);

	transform-origin:bottom;

	transition:
		transform
		var(--ui-switch-pad-motion-duration)
		var(--ui-switch-pad-motion-easing),

		opacity
		var(--ui-switch-pad-fade-duration)
		var(--ui-switch-pad-fade-easing);
}


/* ==========================================================================
   6. EINGESCHALTETE WIPPENFLÄCHE
   ========================================================================== */

.ui-switch-pad .switch-pad__rocker::after {
	content:"";

	position:absolute;

	inset:0;

	z-index:-1;

	border-radius:.4px;

	background:
		radial-gradient(
			130% 50% at 50% 47.5%,
			#cc0000,
			rgba(153,0,0,0)
		),

		radial-gradient(
			60% 25% at 50% 68%,
			#b30000,
			rgba(153,0,0,0)
		),

		radial-gradient(
			50% 40% at 50% 55%,
			#990000,
			rgba(153,0,0,0)
		),

		radial-gradient(
			45% 1% at 50% calc(100% - 8px),
			#b30000,
			rgba(153,0,0,0)
		),

		radial-gradient(
			80% 1% at 50% 98%,
			rgba(153,0,0,.25),
			rgba(153,0,0,0) 60%
		),

		radial-gradient(
			4% 50% at 1% 55%,
			#b30000,
			rgba(153,0,0,0)
		),

		radial-gradient(
			2% 40% at 6% 55%,
			#a50000,
			rgba(153,0,0,0)
		),

		radial-gradient(
			5% 40% at 99% 55%,
			#b30000,
			rgba(153,0,0,0)
		),

		radial-gradient(
			2% 50% at 94% 55%,
			#a50000,
			rgba(153,0,0,0)
		),

		linear-gradient(
			to right,
			rgba(255,51,0,.5) 3%,
			rgba(204,0,0,.66) 7.5%,
			rgba(204,0,0,.66) 92.5%,
			rgba(255,51,0,.5) 97%
		)
		no-repeat center 4.5px / 92.5% .4px,

		linear-gradient(
			to bottom,
			rgba(255,51,0,0) 3%,
			rgba(255,51,0,.5) 97%
		)
		no-repeat center 3px / 92.5% .5px,

		radial-gradient(
			50% 5% at 50% 3%,
			rgba(204,0,0,.75),
			rgba(153,0,0,0)
		),

		radial-gradient(
			50% 10% at 50% 1%,
			#990000,
			rgba(153,0,0,0) 80%
		),

		radial-gradient(
			30% 50% at 7.5% 15%,
			#4d0000,
			rgba(77,0,0,0)
		),

		radial-gradient(
			30% 50% at 95% 15%,
			#4d0000,
			rgba(77,0,0,0)
		),

		radial-gradient(
			100% 1% at 50% 99%,
			rgba(153,0,0,.75) 3%,
			rgba(204,0,0,.9) 40%,
			rgba(204,0,0,.9) 90%,
			rgba(153,0,0,.75) 97%
		)
		no-repeat bottom / 100% .5px,

		#660000;

	box-shadow:
		inset 0 8px 7px -5px rgba(26,0,0,.75);

	filter:contrast(120%);

	opacity:0;

	transform:
		translate3d(0,9px,0);

	transform-origin:top;

	transition:
		transform
		var(--ui-switch-pad-motion-duration)
		var(--ui-switch-pad-motion-easing),

		opacity
		var(--ui-switch-pad-fade-duration)
		var(--ui-switch-pad-fade-easing);
}


/* ==========================================================================
   7. KUNSTSTOFFTEXTUR
   ========================================================================== */

.ui-switch-pad .switch-pad__rocker-texture {
	position:absolute;

	top:50%;
	right:5%;
	left:5%;

	z-index:1;

	height:calc(95% - 9px);

	border-radius:.3px;

	transform:
		perspective(60px)
		rotateX(-5deg)
		translate3d(
			0,
			calc(-50% + 2.9px),
			0
		)
		scale3d(1,1.05,1);

	transform-origin:center;

	transition:
		transform
		var(--ui-switch-pad-motion-duration)
		var(--ui-switch-pad-motion-easing);
}


/*
 * Dunkle, fein genoppte Kunststoffoberfläche.
 */
.ui-switch-pad .switch-pad__rocker-texture::before {
	content:"";

	position:absolute;

	inset:0;

	z-index:0;

	border-radius:inherit;

	background:
		linear-gradient(
			to right,
			#80000b -20%,
			#b3000f 33%,
			#b3000f 66%,
			#80000b 120%
		)
		no-repeat bottom center / 100% .3px,

		radial-gradient(
			85% 40% at 50% 130%,
			rgba(0,0,0,.66) 60%,
			rgba(0,0,0,0)
		),

		radial-gradient(
			100% 55% at 50% 90%,
			rgba(255,153,162,.75),
			rgba(255,255,255,0)
		),

		radial-gradient(
			rgba(51,0,4,.25) 20%,
			rgba(255,151,77,0) 22%
		)
		repeat center / 1.7px 1.7px,

		radial-gradient(
			rgba(26,0,2,0) 5%,
			rgba(77,0,6,.66) 55%
		)
		repeat center / 1.7px 1.7px,

		radial-gradient(
			120% 50% at 50% 0%,
			rgba(255,151,77,.25),
			rgba(255,255,255,0)
		),

		radial-gradient(
			rgba(255,151,77,.33) 10%,
			rgba(255,0,21,0) 20%
		)
		repeat 49.66% 49.7% / 1.7px 1.7px,

		rgba(102,0,9,.5);

	background-blend-mode:hard-light;

	box-shadow:
		0 .2px .2px .1px rgba(51,0,0,.1),
		0 -3px 3px -1px rgba(255,153,162,.5);

	filter:blur(.25px);

	opacity:.75;

	transition:
		opacity
		.4s
		var(--ui-switch-pad-fade-easing);
}


/*
 * Rot-orange beleuchtete Kunststoffoberfläche.
 */
.ui-switch-pad .switch-pad__rocker-texture::after {
	content:"";

	position:absolute;

	inset:0;

	z-index:0;

	border-radius:inherit;

	background:
		linear-gradient(
			to right,
			#99000d -20%,
			#ff974d 33%,
			#ff974d 66%,
			#99000d 120%
		)
		no-repeat top center / 100% .3px,

		radial-gradient(
			110% 50% at 50% 55%,
			rgba(255,181,77,0),
			rgba(255,0,21,.15) 60%,
			rgba(255,0,21,0)
		),

		radial-gradient(
			120% 50% at 50% 105%,
			rgba(255,240,230,.75),
			rgba(255,255,255,0)
		),

		radial-gradient(
			65% 50% at 50% -2.75px,
			rgba(0,0,0,.8) 60%,
			rgba(0,0,0,0)
		),

		radial-gradient(
			#ff974d 20%,
			rgba(255,151,77,0) 22%
		)
		repeat center / 1.7px 1.7px,

		radial-gradient(
			110% 50% at 50% 60%,
			#ffb54d,
			rgba(255,106,0,.75) 60%,
			rgba(255,0,21,0)
		),

		radial-gradient(
			rgba(26,0,2,0) 25%,
			rgba(26,0,2,.85) 55%
		)
		repeat center / 1.7px 1.7px,

		radial-gradient(
			120% 50% at 50% 100%,
			#ffb580,
			rgba(255,255,255,0)
		),

		radial-gradient(
			#ff974d 10%,
			rgba(255,0,21,0) 35%
		)
		repeat 49.66% 49.7% / 3px 3px,

		radial-gradient(
			110% 50% at 50% 55%,
			#ffa64d 25%,
			rgba(255,0,21,.5) 75%,
			rgba(255,0,21,0)
		),

		radial-gradient(
			80% 40% at 2% 15%,
			#ffb54d,
			rgba(255,151,77,.2) 80%,
			rgba(255,151,77,0)
		),

		radial-gradient(
			80% 40% at 92% 15%,
			#ffb54d,
			rgba(255,151,77,.2) 80%,
			rgba(255,151,77,0)
		),

		radial-gradient(
			#ffccd0 40%,
			rgba(255,151,77,0) 70%
		)
		repeat center / 1.5px 1.5px;

	background-blend-mode:hard-light;

	box-shadow:
		0 .2px .2px .1px rgba(51,0,4,.1),
		0 .2px 1px .1px rgba(51,0,4,.33);

	filter:blur(.35px);

	opacity:0;

	transition:
		opacity
		.4s
		var(--ui-switch-pad-fade-easing);
}


/* ==========================================================================
   8. EINGEARBEITETE WIPPENSYMBOLE
   ========================================================================== */

.ui-switch-pad .switch-pad__symbol {
	display:block;

	position:absolute;

	left:50%;

	z-index:2;

	width:24px;

	font-family:
		var(--ui-switch-pad-symbol-font-family);

	font-size:
		var(--ui-switch-pad-symbol-font-size);

	font-weight:
		var(--ui-switch-pad-symbol-font-weight);

	font-style:normal;
	line-height:18px;

	text-align:center;

	transform:
		translateX(-50%);

	transition:
		color
		var(--ui-switch-pad-fade-duration)
		var(--ui-switch-pad-fade-easing),

		text-shadow
		var(--ui-switch-pad-fade-duration)
		var(--ui-switch-pad-fade-easing),

		opacity
		var(--ui-switch-pad-fade-duration)
		var(--ui-switch-pad-fade-easing);

	pointer-events:none;

	user-select:none;
	-webkit-user-select:none;
}


/*
 * I beziehungsweise frei definiertes Einschaltzeichen
 * auf der oberen Hälfte der Wippe.
 */
.ui-switch-pad .switch-pad__symbol--on {
	top:10px;

	color:
		var(--ui-switch-pad-symbol-inactive-color);

	text-shadow:
		var(--ui-switch-pad-symbol-inactive-shadow);

	opacity:.72;
}


/*
 * O beziehungsweise frei definiertes Ausschaltzeichen
 * auf der unteren Hälfte der Wippe.
 *
 * Im ausgeschalteten Zustand ist dieses Zeichen aktiv
 * und erscheint deshalb weißlich.
 */
.ui-switch-pad .switch-pad__symbol--off {
	bottom:9px;

	color:
		var(--ui-switch-pad-symbol-active-color);

	text-shadow:
		var(--ui-switch-pad-symbol-active-shadow);

	opacity:1;
}


/*
 * Eingeschaltet:
 * Das obere Zeichen wird aktiv und weißlich.
 */
.ui-switch-pad
.switch-pad__input:checked
~
.switch-pad__rocker
.switch-pad__symbol--on {
	color:
		var(--ui-switch-pad-symbol-active-color);

	text-shadow:
		var(--ui-switch-pad-symbol-active-shadow);

	opacity:1;
}


/*
 * Eingeschaltet:
 * Das untere Zeichen bleibt nur noch als dunkle
 * Kunststoffprägung sichtbar.
 */
.ui-switch-pad
.switch-pad__input:checked
~
.switch-pad__rocker
.switch-pad__symbol--off {
	color:
		var(--ui-switch-pad-symbol-inactive-color);

	text-shadow:
		var(--ui-switch-pad-symbol-inactive-shadow);

	opacity:.72;
}


/* ==========================================================================
   9. LICHTSCHEIN
   ========================================================================== */

.ui-switch-pad .switch-pad__glow {
	position:absolute;

	top:2px;
	left:2px;

	z-index:3;

	width:var(--ui-switch-pad-rocker-width);
	height:var(--ui-switch-pad-rocker-height);

	border-radius:1px;

	pointer-events:none;
}


.ui-switch-pad .switch-pad__glow::before {
	content:"";

	position:absolute;

	inset:0;

	background:
		radial-gradient(
			2% 15% at 1% 55%,
			rgba(255,0,21,.25),
			rgba(255,0,21,0)
		),

		radial-gradient(
			50% 60% at 45% 50%,
			rgba(255,0,21,.33),
			rgba(255,0,21,0)
		),

		radial-gradient(
			2% 25% at 92% 55%,
			rgba(255,0,21,.15),
			rgba(255,0,21,0)
		),

		radial-gradient(
			50% 60% at 60% 50%,
			rgba(255,0,21,.25),
			rgba(255,0,21,0)
		);

	opacity:0;

	transition:
		opacity
		var(--ui-switch-pad-fade-duration)
		var(--ui-switch-pad-fade-easing);
}


.ui-switch-pad .switch-pad__glow::after {
	content:"";

	position:absolute;

	top:-21px;
	right:-11px;
	bottom:-16px;
	left:-11px;

	background:
		radial-gradient(
			50% 30% at 50% 55%,
			#ffb54d,
			rgba(255,0,21,.25) 30%,
			rgba(255,0,21,0)
		);

	mix-blend-mode:hard-light;

	opacity:0;

	transform:
		scale3d(.5,.5,1);

	transition:
		opacity
		var(--ui-switch-pad-fade-duration)
		var(--ui-switch-pad-fade-easing),

		transform
		var(--ui-switch-pad-fade-duration)
		var(--ui-switch-pad-fade-easing);
}


/* ==========================================================================
   10. EINGESCHALTETER ZUSTAND
   ========================================================================== */

.ui-switch-pad
.switch-pad__input:checked
~
.switch-pad__rocker::before {
	opacity:0;

	transform:
		translate3d(0,-9px,0);
}


.ui-switch-pad
.switch-pad__input:checked
~
.switch-pad__rocker::after {
	opacity:1;

	transform:
		translate3d(0,0,0);
}


.ui-switch-pad
.switch-pad__input:checked
~
.switch-pad__rocker
.switch-pad__rocker-texture {
	transform:
		perspective(60px)
		rotateX(5deg)
		translate3d(
			0,
			calc(-50% - 3.85px),
			0
		)
		scale3d(1,1.05,1);
}


.ui-switch-pad
.switch-pad__input:checked
~
.switch-pad__rocker
.switch-pad__rocker-texture::before {
	opacity:0;
}


.ui-switch-pad
.switch-pad__input:checked
~
.switch-pad__rocker
.switch-pad__rocker-texture::after {
	opacity:.66;
}


.ui-switch-pad
.switch-pad__input:checked
~
.switch-pad__glow::before {
	opacity:1;
}


.ui-switch-pad
.switch-pad__input:checked
~
.switch-pad__glow::after {
	opacity:1;

	transform:
		scale3d(1,1,1);
}


/* ==========================================================================
   11. EXTERNE ZUSTANDSBESCHRIFTUNG
   ========================================================================== */

/*
 * Diese Beschriftung gehört nicht zur Kunststoffgestaltung.
 *
 * Das Bauteil stellt deshalb lediglich Position, Grundschrift
 * und Schriftgröße bereit. Farbe, Gewicht, Leuchteffekt,
 * Großschreibung und Buchstabenabstand bestimmt die jeweils
 * einbindende Anwendung.
 */
.ui-switch-pad .ui-switch-pad__label {
	position:absolute;

	top:88px;
	left:50%;

	width:90px;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size:12px;
	font-style:normal;
	font-weight:normal;
	line-height:16px;

	text-align:center;

	transform:
		translateX(-50%);

	pointer-events:none;

	user-select:none;
	-webkit-user-select:none;
}


/* ==========================================================================
   12. FOKUS UND BEDIENUNG
   ========================================================================== */

.ui-switch-pad
.switch-pad__input:focus-visible
~
.switch-pad__rocker {
	outline:2px solid #336699;
	outline-offset:3px;
}


@media (hover:hover) {
	.ui-switch-pad
	.switch-pad:hover
	.switch-pad__rocker {
		filter:
			brightness(1.045);
	}
}


/* ==========================================================================
   13. REDUZIERTE BEWEGUNG
   ========================================================================== */