/* theme-toggle.css — Hell/Dunkel-Schalter (Pill-Switch mit Sonne, Mond, Knopf), Optik wie CRM.
   Anders als im CRM nur Variablen statt fester Farben, damit der Schalter jedem Design folgt.
   Zustand über data-theme-mode am <html>. */

.fibu-theme-toggle {
	position: relative;
	flex-shrink: 0;
	width: 52px;
	height: 26px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 13px;
	background-color: var(--flaeche-knopf);
	border: 1px solid var(--rahmen);
	transition: background-color .2s ease, border-color .2s ease;
}
.fibu-theme-toggle:disabled { opacity: .6; cursor: progress; }

.fibu-theme-toggle-knopf {
	position: absolute;
	top: 1px;
	left: 1px;
	z-index: 1;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--flaeche-feld);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--schrift) 25%, transparent);
	transition: transform .22s ease, background-color .2s ease;
}
.fibu-theme-toggle .fibu-ik {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	pointer-events: none;
	color: var(--schrift-zart);
	transition: color .2s ease;
}
.fibu-theme-toggle-sonne { left: 5px; }
.fibu-theme-toggle-mond  { right: 5px; }

/* Hell: Sonne hervorgehoben */
html[data-theme-mode="light"] .fibu-theme-toggle-sonne { color: var(--modul-accent); }

/* Dunkel: Knopf nach rechts, Mond hervorgehoben */
html[data-theme-mode="dark"] .fibu-theme-toggle-knopf { transform: translateX(26px); background-color: var(--rahmen); }
html[data-theme-mode="dark"] .fibu-theme-toggle-mond  { color: var(--schrift); }