/* ==========================================================================
   RW Theme Toggle
   Enthält ausschließlich die Mechanik und den Umschalter selbst.
   Farb-Tokens gehören ins Projekt-CSS, siehe tokens.example.css.
   ========================================================================== */

/* --- 1. color-scheme-Mapping ---------------------------------------------
   Ohne data-theme folgt die Seite live dem Betriebssystem.
   Mit data-theme gewinnt die Nutzerentscheidung.
   Das steuert zugleich Scrollbars, Formularfelder und Browser-UI.        */

:root                    { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

@media print {
	:root { color-scheme: light; }
}

/* --- 2. Der Umschalter --------------------------------------------------- */

.theme-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 22px;   /* feste Box verhindert Layoutsprung beim Iconwechsel */
	block-size: 22px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	line-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	margin: 0 .5em
}

.theme-toggle svg {
	inline-size: 100%;
	block-size: 100%;
	fill: currentColor;
	display: block;
}

.theme-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 3px;
}

/* --- 3. Icon-Umschaltung -------------------------------------------------
   Sichtbar ist immer das Icon der Aktion, nicht des Zustands:
   im Lightmode der Mond, im Darkmode die Sonne.                          */

.theme-toggle__sun { display: none; }

html[data-theme="dark"] .theme-toggle__moon { display: none; }
html[data-theme="dark"] .theme-toggle__sun  { display: inline-block; }

/* Solange nichts gewählt wurde, entscheidet das Betriebssystem. */
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .theme-toggle__moon { display: none; }
	html:not([data-theme]) .theme-toggle__sun  { display: inline-block; }
}

/* --- 4. Tooltip ----------------------------------------------------------
   Text kommt aus aria-label, deshalb nur an einer Stelle gepflegt.
   Position bei Bedarf im Projekt-CSS überschreiben.                      */

.theme-toggle:hover::after,
.theme-toggle:focus-visible::after {
	content: attr(aria-label);
	position: absolute;
	inset-inline-end: calc(100% + 8px);
	inset-block-start: 1px;
	padding: 4px 8px;
	border-radius: 5px;
	background: #000;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	width: max-content;
	pointer-events: none;
	z-index: 10;
}

/* --- 5. Flackerschutz ----------------------------------------------------
   Während des Umschaltens werden alle Transitions stillgelegt, sonst
   laufen Hintergründe, Rahmen und Schriftfarben unterschiedlich schnell
   nach und die Seite "zerfließt" für einen Moment.                       */

html.is-theme-switching *,
html.is-theme-switching *::before,
html.is-theme-switching *::after {
	transition: none !important;
}

/* --- 6. Optional: Fotos im Darkmode leicht abdunkeln ---------------------
   Auskommentiert, weil Geschmackssache. Bei Bedarf aktivieren.           */

/*
html[data-theme="dark"] img:not([src$=".svg"]):not(.no-dim) {
	filter: brightness(.9);
}
*/