/* ============================================================
   theme_tokens.css
   Sitéweites Token-System (Light/Dark) + wiederverwendbare
   Basiskomponenten, abgeleitet aus dem Design von locate.php.
   Wird von .include/page_head.php auf jeder Seite verlinkt
   (liegt bewusst NICHT unter .include/, da dieses Verzeichnis
   per .htaccess komplett gesperrt ist).
   ============================================================ */
:root {
	--bg: #eef1f5;
	--surface: #ffffff;
	--surface-2: #e4e9ee;
	--ink: #121821;
	--muted: #5b6773;
	--line: #ccd4dc;
	--line-soft: #dde3e8;

	--signal-active: #c31f2e;
	--signal-active-ink: #ffffff;
	--signal-safe: #1c7a4a;
	--signal-safe-ink: #ffffff;
	--signal-safe-tint: #e4f3ea;
	--signal-safe-tint-ink: #145536;
	--signal-idle: #5b6773;
	--signal-idle-ink: #ffffff;

	--warn: #a3690a;
	--warn-ink: #ffffff;
	--warn-tint: #f8ecd8;
	--warn-tint-ink: #6e4707;

	--accent: #1c4f8f;
	--accent-ink: #ffffff;
	--accent-tint: #e2ebf6;
	--accent-tint-ink: #163a68;
	--accent-tint-line: #b9cde6;
	--danger: #a3172a;
	--danger-ink: #ffffff;
	--danger-tint: #f7e2e5;
	--danger-tint-ink: #7a1220;

	--focus: #1c4f8f;

	--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0b0f14;
		--surface: #161d24;
		--surface-2: #1d252d;
		--ink: #e7ecf1;
		--muted: #93a1ac;
		--line: #2a333c;
		--line-soft: #232b33;

		--signal-active: #ff5a63;
		--signal-active-ink: #1a0405;
		--signal-safe: #3ddc84;
		--signal-safe-ink: #04170c;
		--signal-safe-tint: #123024;
		--signal-safe-tint-ink: #79e8b3;
		--signal-idle: #93a1ac;
		--signal-idle-ink: #0b0f14;

		--warn: #e0a53e;
		--warn-ink: #211500;
		--warn-tint: #2e2410;
		--warn-tint-ink: #f0c876;

		--accent: #6fa8ff;
		--accent-ink: #071427;
		--accent-tint: #14233a;
		--accent-tint-ink: #a9c9f5;
		--accent-tint-line: #2a4066;
		--danger: #ff6b6b;
		--danger-ink: #200000;
		--danger-tint: #2e1416;
		--danger-tint-ink: #ffb0b0;

		--focus: #6fa8ff;
	}
}
:root[data-theme="dark"] {
	--bg: #0b0f14;
	--surface: #161d24;
	--surface-2: #1d252d;
	--ink: #e7ecf1;
	--muted: #93a1ac;
	--line: #2a333c;
	--line-soft: #232b33;

	--signal-active: #ff5a63;
	--signal-active-ink: #1a0405;
	--signal-safe: #3ddc84;
	--signal-safe-ink: #04170c;
	--signal-safe-tint: #123024;
	--signal-safe-tint-ink: #79e8b3;
	--signal-idle: #93a1ac;
	--signal-idle-ink: #0b0f14;

	--warn: #e0a53e;
	--warn-ink: #211500;
	--warn-tint: #2e2410;
	--warn-tint-ink: #f0c876;

	--accent: #6fa8ff;
	--accent-ink: #071427;
	--accent-tint: #14233a;
	--accent-tint-ink: #a9c9f5;
	--accent-tint-line: #2a4066;
	--danger: #ff6b6b;
	--danger-ink: #200000;
	--danger-tint: #2e1416;
	--danger-tint-ink: #ffb0b0;

	--focus: #6fa8ff;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-ui);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* -- Buttons -------------------------------------------------- */
.btn {
	font-family: var(--font-ui);
	font-size: 0.9rem;
	font-weight: 700;
	padding: 0.7rem 1.1rem;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	cursor: pointer;
	text-decoration: none;
}
.btn:hover { border-color: var(--accent); }
.btn svg, .btn i { flex: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.wide { width: 100%; }
.btn.danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }

/* -- Cards ------------------------------------------------------ */
.card {
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: 14px;
	padding: 1rem 1.1rem;
}
.card.compact { padding: 0.6rem 1.1rem; }

/* -- Modal-Overlay (z.B. Systemmeldungen) ----------------------- */
.message-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(10, 14, 18, 0.55);
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	z-index: 100;
}
.message-overlay.show { display: flex; }
.message-overlay .box {
	background: var(--surface);
	border-radius: 14px;
	padding: 1.25rem;
	max-width: 26rem;
	width: 100%;
	box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

/* -- Theme-Umschalter -------------------------------------------
   generischer Icon-Button fuer Seiten ohne eigene Icon-Leiste.
   Seiten mit eigener Nav (Selfcare-Icon-Reihe, Leitstelle-Controlbar)
   binden stattdessen nur .include/theme_toggle_script.php ein und
   verwenden ihr eigenes Icon-Idiom. */
.theme-toggle {
	position: fixed;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 40;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* -- Tooltip + Text-Utilities ---------------------------------------
   zentralisiert aus locate_map.css und selfcare.css (waren dort fast
   identisch dupliziert; .small/.smaller hatten sogar unterschiedliche
   Werte - 85%/75% in locate_map.css, 95%/75% in selfcare.css, wobei
   durch die Ladereihenfolge auf Selfcare-Seiten stillschweigend immer
   der 95%-Wert gewonnen hat. Der 95%-Wert bleibt hier massgeblich,
   damit sich am sichtbaren Ergebnis auf Selfcare-Seiten nichts
   aendert; auf den anderen Seiten wird .small dadurch minimal
   groesser (85% -> 95%), was fuer Lesbarkeit unkritisch ist. */
.tooltip { position: relative; }
.tooltip:hover { text-decoration: none; z-index: 1000; color: var(--accent); }
.tooltip:after {
	content: attr(tip);
	font-family: var(--font-ui);
	font-size: 75%;
	line-height: 1.2em;
	width: 200px;
	padding: 5px 10px;
	border-radius: 6px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	opacity: 0.95;
	color: var(--ink);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	position: absolute;
	top: 36px;
	left: 2px;
	display: none;
	z-index: 1000;
}
.tooltip:before {
	z-index: 1000;
	position: absolute;
	content: "";
	top: 15px;
	left: 0px;
	border-right: 7px transparent solid;
	border-left: 7px transparent solid;
	display: none;
}
.tooltip:hover:after, .tooltip:hover:before { display: block; }
/* fuer Touch-Geraete per JS (long press) gesetzt - :hover feuert dort nicht
   zuverlaessig/gar nicht, siehe z.B. das Nominatim-Statusbadge in
   locate_map.php. */
.tooltip.force-show:after, .tooltip.force-show:before { display: block; }

.small { font-size: 95%; }
.smaller { font-size: 75%; }
.bigger { font-size: 125%; }
.big { font-size: 115%; }
.italic { font-style: italic; }
.bold { font-weight: bold; }

.red { color: var(--danger); }
.orange { color: var(--warn); }
.green { color: var(--signal-safe); }
.blue { color: var(--accent); }

/* -- Statusmeldungen (z.B. Login-Formular) -------------------------
   ersetzt hartcodierte inline style="display:...;color:...;" pro
   Codepfad; .msg-visible steuert die Sichtbarkeit, die Farbklasse
   ist optional (Fehlerfall bleibt ohne Farbklasse = Basisdarstellung
   des jeweiligen Elements, z.B. #loginmsg in locate_map.css). */
.msg-visible { display: block; }
.msg-ok { color: var(--signal-safe); }
.msg-warn { color: var(--warn); }
.msg-neutral { color: var(--ink); }

/* -- Fusszeile mit Copyright -------------------------------------- */
.footer-copy {
	text-align: center;
	font-size: 0.75rem;
	color: var(--muted);
	padding: 1rem 1.1rem;
}

/* -- Statische Dokumentseiten (Impressum/Info) --------------------
   ersetzt die bislang undefinierte .impressum-Klasse (die Seiten
   luden vorher zusaetzlich eine fehlerhafte relative CSS-URL, die
   ins Leere lief - siehe impressum.php/info.php: die Seiten waren
   dadurch faktisch unformatiert). */
.doc-page {
	max-width: 42rem;
	margin: 0 auto;
	padding: 3.5rem 1.25rem 2rem;
}
.doc-page h1 {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 5vw, 1.85rem);
	font-weight: 800;
	letter-spacing: -0.01em;
}
.doc-page h4 {
	margin: 1.75rem 0 0.5rem;
	font-size: 1rem;
	font-weight: 700;
}
.doc-page p, .doc-page ul {
	color: var(--ink);
	font-size: 0.9375rem;
}
.doc-page ul { padding-left: 1.25rem; }
.doc-page em { color: var(--muted); }
.doc-page .doc-nav {
	display: flex;
	gap: 0.6rem;
	margin: 0 0 2rem;
	flex-wrap: wrap;
}