/*
 * Schalter "Benachrichtigungen an/aus".
 *
 * Gehoert zu embedded/push/push-switch.js und wird von allen Seiten
 * eingebunden, die den Schalter zeigen (aktuell Hinweise und Kalender).
 * Lag zuerst inline in der Hinweise-Seite; mit der zweiten Seite waere
 * daraus eine zweite, unabhaengig driftende Kopie geworden.
 *
 * Optik nach der Vorlage von Uiverse.io (Javierrocadev), aber in normalem
 * CSS statt Tailwind - das Projekt bindet kein Tailwind ein, die
 * Utility-Klassen der Vorlage waeren wirkungslos geblieben. Die Groesse
 * entspricht der halben Vorlage (56x28 statt 112x56); die Knopfbeschriftung
 * "Aus"/"An" ist dabei entfallen, weil sie in einem 24-px-Kreis nicht mehr
 * lesbar waere - der Zustand steht stattdessen als ganzer Satz daneben.
 */

/*
 * Rot/Gruen als Variablen statt fest verdrahtet: die Themenauswahl auf
 * "Benachrichtigungen verwalten" (Schritt 3) verwendet denselben Schalter-
 * Look fuer ihre Auswahl-Kacheln, getriggert ueber eine eigene ".is-selected"-
 * Klasse statt ":checked" (siehe dort). Damit beide Stellen exakt dieselbe
 * Farbe zeigen, statt zwei Hex-Werte unabhaengig voneinander zu pflegen.
 */
:root {
	--tva-switch-off: #c0392b;
	--tva-switch-on: #2e9e5b;
}

.tva-push-switch-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 4px 0 18px;
}

.tva-push-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	flex: none;
}

.tva-push-switch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Rot = aus, Gruen = an. Der Zustand steht zusaetzlich als ganzer Satz
 * daneben - Farbe allein waere fuer Farbfehlsichtige nicht eindeutig.
 * Beide Toene sind so gewaehlt, dass sie auf hellem wie dunklem Grund genug
 * Kontrast zum weissen Knopf haben.
 */
.tva-push-switch__track {
	position: relative;
	width: 56px;
	height: 28px;
	border-radius: var(--radius-pill, 999px);
	background: var(--tva-switch-off);
	border: 1px solid var(--glass-hairline, rgba(255, 255, 255, 0.18));
	transition: background-color 140ms ease;
}

.tva-push-switch__track::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tva-push-switch__input:checked + .tva-push-switch__track {
	background: var(--tva-switch-on);
}

.tva-push-switch__input:checked + .tva-push-switch__track::after {
	transform: translateX(28px);
}

.tva-push-switch__input:focus-visible + .tva-push-switch__track {
	outline: 3px solid var(--accent-solid);
	outline-offset: 3px;
}

.tva-push-switch__input:disabled + .tva-push-switch__track {
	opacity: 0.5;
	cursor: not-allowed;
}

.tva-push-switch-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.tva-push-switch-state {
	font-weight: 600;
}

.tva-push-switch-hint {
	color: var(--muted);
	font-size: 0.92rem;
}

.tva-push-switch-hint.is-error {
	color: #d9534f;
}

/* Ohne Push-Unterstuetzung bleibt der Schalter komplett ausgeblendet. */
.tva-push-switch-row[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.tva-push-switch__track,
	.tva-push-switch__track::after {
		transition: none;
	}
}