/* MG Dark/Light Mode
   Heller Modus per Invertierung des dunklen Theme-Looks.
   Medien (Bilder, Videos, iframes) und Elemente mit Foto-Hintergrund
   (per JS mit .mg-keep markiert) behalten ihren Original-Look. */

html.mg-light {
	filter: invert(1) hue-rotate(180deg);
	background: #101010; /* invertiert zu fast Weiß */
}

/* Medien wieder normal darstellen */
html.mg-light img,
html.mg-light video,
html.mg-light iframe,
html.mg-light canvas,
html.mg-light #wpadminbar {
	filter: invert(1) hue-rotate(180deg);
}

/* Elemente mit Foto-Hintergrund (JS markiert sie mit .mg-keep):
   komplett zurückdrehen – sie behalten samt Inhalt den Original-Look */
html.mg-light .mg-keep {
	filter: invert(1) hue-rotate(180deg);
}

/* Innerhalb zurückgedrehter Bereiche nichts doppelt drehen */
html.mg-light .mg-keep img,
html.mg-light .mg-keep video,
html.mg-light .mg-keep iframe,
html.mg-light .mg-keep canvas,
html.mg-light .mg-keep .mg-keep {
	filter: none;
}

/* Das Logo (weiße Schrift) NICHT zurückdrehen – so wird es im
   hellen Modus automatisch dunkel und bleibt lesbar. */
html.mg-light img[src*="maurergemeinschaft-logo"] {
	filter: none;
}
html.mg-light .mg-keep img[src*="maurergemeinschaft-logo"] {
	filter: invert(1) hue-rotate(180deg);
}

/* ---------- Umschalt-Button ---------- */
.mg-toggle {
	position: fixed;
	left: 22px;
	bottom: 22px;
	z-index: 99999;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: #f0532d;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s ease, background 0.2s ease;
	padding: 0;
}
.mg-toggle:hover {
	transform: scale(1.08);
	background: #d94a35;
}
.mg-toggle svg { width: 22px; height: 22px; display: block; }

/* Button selbst nicht mit-invertieren, damit er immer gleich aussieht */
html.mg-light .mg-toggle {
	filter: invert(1) hue-rotate(180deg);
}

/* Icon-Logik: im Dunkel-Modus Sonne zeigen, im Hell-Modus Mond */
.mg-toggle .mg-icon-moon { display: none; }
html.mg-light .mg-toggle .mg-icon-moon { display: block; }
html.mg-light .mg-toggle .mg-icon-sun { display: none; }

@media (max-width: 767px) {
	.mg-toggle {
		width: 44px;
		height: 44px;
		left: 14px;
		bottom: 14px;
	}
}