/* Farbmodus-Umschalter (siehe includes/farbmodus.php). Farben kommen aus
   dem Theme (currentColor, Kadence-Palette). */

/* Ohne JavaScript gibt es keinen Modus, also auch keinen Umschalter */
html:not([data-farbmodus]) .we-farbmodus-knopf,
html:not([data-farbmodus]) .we-farbmodus-wahl {
	display: none;
}

.we-farbmodus-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	margin: 0 2px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
/* Kadence färbt jeden Button bei :hover, :focus und :active grün und gibt
   ihm einen Rahmen; nach einem Mausklick bleibt :focus stehen. Darum alle
   drei Zustände zurücksetzen, nur Hover und Tastaturfokus leicht tönen. */
.we-farbmodus-knopf:hover,
.we-farbmodus-knopf:focus,
.we-farbmodus-knopf:active {
	background: transparent;
	color: inherit;
	border: 0;
	box-shadow: none;
}
.we-farbmodus-knopf:hover,
.we-farbmodus-knopf:focus-visible {
	background: rgba(127, 127, 127, 0.14);
}
.we-farbmodus-knopf svg {
	display: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.we-farbmodus-knopf .we-fm-fuellung {
	fill: currentColor;
	stroke: none;
}
html[data-farbmodus="hell"] .we-farbmodus-knopf .we-fm-hell,
html[data-farbmodus="dunkel"] .we-farbmodus-knopf .we-fm-dunkel,
html[data-farbmodus="system"] .we-farbmodus-knopf .we-fm-system {
	display: block;
}

/* Drei-Wege-Schalter im Footer */
.we-farbmodus-wahl {
	display: inline-flex;
	gap: 2px;
	vertical-align: middle;
	padding: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.we-farbmodus-wahl button {
	padding: 0.3em 0.95em;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 0.85rem;
	line-height: 1.4;
	box-shadow: none;
	cursor: pointer;
	opacity: 0.75;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.we-farbmodus-wahl button:hover,
.we-farbmodus-wahl button:focus,
.we-farbmodus-wahl button:active {
	background: transparent;
	color: inherit;
	border: 0;
	box-shadow: none;
}
.we-farbmodus-wahl button:hover,
.we-farbmodus-wahl button:focus-visible {
	opacity: 1;
}
.we-farbmodus-wahl button[aria-checked="true"],
.we-farbmodus-wahl button[aria-checked="true"]:hover,
.we-farbmodus-wahl button[aria-checked="true"]:focus {
	opacity: 1;
	background: rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}