/* ==== Block: Semantische Design-Tokens (Light Mode, Standard) ==== */
:root { /* Farb-Tokens für das gesamte Projekt, Light Mode als Basis */
	--bg-primary: #f8fafc; /* Seitenhintergrund */
	--bg-secondary: #ffffff; /* Card-/Oberflächenhintergrund */
	--text-primary: rgba(0, 0, 0, 0.87); /* Haupttext, High-Contrast Off-Black (Material-Emphasis "high") */
	--text-secondary: rgba(0, 0, 0, 0.60); /* Sekundärtext, Medium-Contrast (Material-Emphasis "medium") */
	--text-disabled: rgba(0, 0, 0, 0.38); /* deaktivierter/inaktiver Text (Material-Emphasis "disabled", WCAG-Ausnahme) */
	--border: rgba(0, 0, 0, 0.12); /* Card-/Trennlinien-Rahmenfarbe */
	--accent: #2563eb; /* Primary Blue: Links, Akzentlinien */
	--accent-hover: #1d4ed8; /* Primary Blue, Hover-Zustand */
	--shadow: rgba(0, 0, 0, 0.08); /* Card-Schlagschatten */
	--danger-bg: #fef2f2; /* Statuszeile "unter Minimum": Hintergrund */
	--danger-border: #fecaca; /* Statuszeile "unter Minimum": Rahmen */
	--danger-text: #b91c1c; /* Statuszeile "unter Minimum": Text */
	--warning-bg: #fffbeb; /* Statuszeile "über Maximum": Hintergrund */
	--warning-border: #fde68a; /* Statuszeile "über Maximum": Rahmen */
	--warning-text: #92400e; /* Statuszeile "über Maximum": Text */
	--neutral-bg: #f8fafc; /* Statuszeile "im Normalbereich": Hintergrund */
	--neutral-border: #e2e8f0; /* Statuszeile "im Normalbereich": Rahmen */
	--neutral-text: #475569; /* Statuszeile "im Normalbereich": Text */
} /* Ende :root */

/* ==== Block: Dark-Mode-Tokens, automatisch nach Systemeinstellung ==== */
@media (prefers-color-scheme: dark) { /* greift nur, wenn das System Dark Mode bevorzugt */
	:root:not([data-theme="light"]) { /* ...und keine manuelle Wahl "hell" das übersteuert */
		--bg-primary: #121212; /* Seitenhintergrund, Dunkelgrau statt reinem Schwarz */
		--bg-secondary: #1e1e1e; /* Card-/Oberflächenhintergrund */
		--text-primary: rgba(255, 255, 255, 0.87); /* Haupttext, High-Contrast Off-White */
		--text-secondary: rgba(255, 255, 255, 0.60); /* Sekundärtext, Medium-Contrast */
		--text-disabled: rgba(255, 255, 255, 0.38); /* deaktivierter/inaktiver Text */
		--border: rgba(255, 255, 255, 0.12); /* Card-/Trennlinien-Rahmenfarbe */
		--accent: #60a5fa; /* helleres, entsättigteres Blau gegen Flimmern auf dunklem Grund */
		--accent-hover: #93c5fd; /* Accent, Hover-Zustand */
		--shadow: rgba(0, 0, 0, 0.5); /* kräftigerer Schlagschatten für Tiefenwirkung im Dark Mode */
		--danger-bg: #2c1516; /* Statuszeile "unter Minimum": Hintergrund */
		--danger-border: #7f1d1d; /* Statuszeile "unter Minimum": Rahmen */
		--danger-text: #fca5a5; /* Statuszeile "unter Minimum": Text */
		--warning-bg: #2a1f0f; /* Statuszeile "über Maximum": Hintergrund */
		--warning-border: #78350f; /* Statuszeile "über Maximum": Rahmen */
		--warning-text: #fcd34d; /* Statuszeile "über Maximum": Text */
		--neutral-bg: #1e293b; /* Statuszeile "im Normalbereich": Hintergrund */
		--neutral-border: #334155; /* Statuszeile "im Normalbereich": Rahmen */
		--neutral-text: rgba(255, 255, 255, 0.60); /* Statuszeile "im Normalbereich": Text */
	} /* Ende automatischer Dark Mode */
} /* Ende Media Query */

/* ==== Block: Dark-Mode-Tokens, manuell erzwungen ==== */
:root[data-theme="dark"] { /* greift, wenn der Umschalter explizit "dunkel" gewählt hat, unabhängig vom System */
	--bg-primary: #121212; /* identische Werte wie im automatischen Dark Mode */
	--bg-secondary: #1e1e1e; /* Card-/Oberflächenhintergrund */
	--text-primary: rgba(255, 255, 255, 0.87); /* Haupttext */
	--text-secondary: rgba(255, 255, 255, 0.60); /* Sekundärtext */
	--text-disabled: rgba(255, 255, 255, 0.38); /* deaktivierter/inaktiver Text */
	--border: rgba(255, 255, 255, 0.12); /* Rahmenfarbe */
	--accent: #60a5fa; /* helles Blau */
	--accent-hover: #93c5fd; /* Accent, Hover-Zustand */
	--shadow: rgba(0, 0, 0, 0.5); /* Schlagschatten */
	--danger-bg: #2c1516; /* Statuszeile "unter Minimum": Hintergrund */
	--danger-border: #7f1d1d; /* Statuszeile "unter Minimum": Rahmen */
	--danger-text: #fca5a5; /* Statuszeile "unter Minimum": Text */
	--warning-bg: #2a1f0f; /* Statuszeile "über Maximum": Hintergrund */
	--warning-border: #78350f; /* Statuszeile "über Maximum": Rahmen */
	--warning-text: #fcd34d; /* Statuszeile "über Maximum": Text */
	--neutral-bg: #1e293b; /* Statuszeile "im Normalbereich": Hintergrund */
	--neutral-border: #334155; /* Statuszeile "im Normalbereich": Rahmen */
	--neutral-text: rgba(255, 255, 255, 0.60); /* Statuszeile "im Normalbereich": Text */
} /* Ende manueller Dark Mode */

/* ==== Block: Grundlayout der Seite ==== */
body { /* Basisstil für den gesamten Seitenkörper */
	font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; /* Inter-Schriftart mit Fallback-Kette */
	background-color: var(--bg-primary); /* Seitenhintergrund aus Token, verhindert Flash vor Tailwind-Rendering */
	color: var(--text-primary); /* Standardtextfarbe aus Token */
} /* Ende body */

/* ==== Block: Dark-Mode-Typografie (Halation-Ausgleich) ==== */
@media (prefers-color-scheme: dark) { /* automatischer Dark Mode */
	:root:not([data-theme="light"]) body { /* ...ohne manuelle Hell-Übersteuerung */
		letter-spacing: 0.015em; /* minimal breiterer Zeichenabstand gegen Lichtabstrahlung (Halation) */
		font-variation-settings: 'wght' 380; /* minimal reduzierte Schriftstärke gegen optisches Aufquellen */
	} /* Ende Typografie-Anpassung */
} /* Ende Media Query */
:root[data-theme="dark"] body { /* manuell erzwungener Dark Mode */
	letter-spacing: 0.015em; /* minimal breiterer Zeichenabstand gegen Halation */
	font-variation-settings: 'wght' 380; /* minimal reduzierte Schriftstärke */
} /* Ende Typografie-Anpassung */

/* ==== Block: Link-Stil (Accent-Farbe mit Hover-Zustand, aus Tokens) ==== */
.link { /* wiederverwendbarer Link-Stil, da Inline-Styles keine :hover-Pseudoklasse unterstützen */
	color: var(--accent); /* Linkfarbe aus Token */
} /* Ende .link */
.link:hover { /* Hover-Zustand */
	color: var(--accent-hover); /* Hover-Farbe aus Token */
} /* Ende .link:hover */

/* ==== Block: Sonne/Mond-Icon-Umschaltung des Theme-Togglers ==== */
.icon-moon { display: none; } /* Standard: Mond ausgeblendet (Light Mode bzw. keine Präferenz) */
:root[data-theme="dark"] .icon-sun { display: none; } /* Sonne ausblenden, wenn explizit dunkel erzwungen */
:root[data-theme="dark"] .icon-moon { display: block; } /* Mond einblenden, wenn explizit dunkel erzwungen */
@media (prefers-color-scheme: dark) { /* ohne manuelle Wahl der Systemeinstellung folgen */
	:root:not([data-theme]) .icon-sun { display: none; } /* Sonne ausblenden, wenn System dunkel bevorzugt und keine manuelle Wahl vorliegt */
	:root:not([data-theme]) .icon-moon { display: block; } /* Mond einblenden, wenn System dunkel bevorzugt und keine manuelle Wahl vorliegt */
} /* Ende Media Query */