/*
 * Die gemeinsame Grundlage beider Oberflächen.
 *
 * Anmeldung und Verwaltung bleiben getrennte Dateien (siehe deren Kopf), aber Farben,
 * Schrift, Eingabefelder, Schaltflächen und Rückmeldungen waren in beiden dasselbe – zweimal
 * geschrieben und deshalb zweimal leicht anders. Was gleich aussehen soll, steht ab hier an
 * EINER Stelle; identity.css und admin.css tragen nur noch das, was sich wirklich
 * unterscheidet.
 *
 * Kein Build-Schritt, keine Fremdbibliothek: Für die Seiten dieses Servers gilt
 * script-src 'none' und font-src 'self'. Damit fällt alles aus, was ein Skript mitbringt
 * (Tailwind über CDN, Material CDK) oder eine Schrift von woanders holt (Icon-Fonts).
 * Symbole stehen deshalb als SVG im Markup, siehe Pages/Shared/_Icon.cshtml.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Farbtokens ─────────────────────────────────────────────────────────────
 * --accent kommt aus dem Erscheinungsbild und wird vom Layout überschrieben. Der Wert hier
 * ist die Vorgabe für den Fall, dass keiner gesetzt ist – ohne ihn wären alle davon
 * abgeleiteten Farben ungültig und die Seite verlöre ihre Farbe komplett.
 *
 * Text- und Randfarben sind bewusst kräftiger als die üblichen Vorschläge: die vorherige
 * Fassung lag bei den Nebentexten an der Grenze der Lesbarkeit.
 */

:root {
	--accent: #6366f1;

	--bg: #eef2f7;
	--surface: #ffffff;
	--surface-sunken: #f7f9fc;
	--border: #d6dde7;
	--border-strong: #b3becd;
	--text: #0f172a;
	--text-muted: #51607a;

	--danger: #b91c1c;
	--danger-bg: #fef2f2;
	--danger-border: #f3a6a6;

	--success: #046c52;
	--success-bg: #ecfdf5;
	--success-border: #6ee7b7;

	--radius: 10px;
	--radius-sm: 8px;
	--shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08);
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);

	/*
	 * Links werden aus der Akzentfarbe UND der Textfarbe gemischt. Reines Akzent hatte je
	 * nach Erscheinungsbild zu wenig Kontrast; die Beimischung zieht die Farbe im hellen
	 * Bild nach dunkel und im dunklen nach hell, ohne den Farbton zu verlieren.
	 *
	 * Für besuchte Links gab es vorher gar keine Regel. Der Browser nahm sein Standard-Lila,
	 * und auf dem dunklen Hintergrund war das nicht mehr zu lesen.
	 */
	--link: color-mix(in srgb, var(--accent) 68%, var(--text));
	--link-visited: color-mix(in srgb, var(--accent) 42%, var(--text-muted));
	--link-hover: color-mix(in srgb, var(--accent) 35%, var(--text));
	--focus-ring: color-mix(in srgb, var(--accent) 72%, var(--text));

	/*
	 * Die Akzentfarbe als FLÄCHE – Schaltfläche, Rahmen des aktiven Feldes, Häkchen.
	 *
	 * Im hellen Bild etwas abgedunkelt: bei der Vorgabe (#6366f1) lag Weiß auf der reinen
	 * Farbe bei 4,47:1 und damit knapp unter der Grenze von 4,5:1.
	 *
	 * Im dunklen Bild wird sie stattdessen AUFGEHELLT und der Text darauf dunkel – siehe die
	 * Begründung im dunklen Block weiter unten. Deshalb gibt es diese beiden Tokens
	 * überhaupt: `var(--accent)` steht ab hier an keiner Fläche mehr direkt.
	 */
	--accent-solid: color-mix(in srgb, var(--accent) 92%, #000);
	--accent-solid-hover: color-mix(in srgb, var(--accent) 78%, #000);
	--on-accent: #ffffff;

	/* Zarte Flächen in Akzentfarbe – für Abzeichen, aktive Reiter und Hervorhebungen. */
	--accent-wash: color-mix(in srgb, var(--accent) 12%, var(--surface));
	--accent-wash-strong: color-mix(in srgb, var(--accent) 22%, var(--surface));
	--accent-ink: color-mix(in srgb, var(--accent) 72%, var(--text));
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0b1220;
		--surface: #17202f;
		--surface-sunken: #111a27;
		--border: #2d3b50;
		--border-strong: #46566d;
		--text: #e8eef7;
		--text-muted: #a5b3c7;

		--danger: #fca5a5;
		--danger-bg: #3a1518;
		--danger-border: #7f1d1d;

		--success: #6ee7b7;
		--success-bg: #06342a;
		--success-border: #047857;

		--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);

		/*
		 * Hier steckte der Fehler: die Mischverhältnisse von oben gelten nur für einen HELLEN
		 * Hintergrund. Eine mittelkräftige Akzentfarbe wie #6366f1 ist selbst schon dunkel –
		 * sie im dunklen Bild NOCH abzudunkeln ergab ein Violett, das sich kaum von der Fläche
		 * darunter abhob. Die Schaltfläche verschwand fast, und Links wirkten stumpf.
		 *
		 * Umgekehrt ist richtig: im dunklen Bild wird die Akzentfarbe AUFGEHELLT. Die
		 * Schaltfläche trägt dann dunklen Text, nicht weißen – auf einer hellen Fläche wäre
		 * Weiß unlesbar.
		 *
		 * Der Farbton bleibt in beiden Fällen erhalten; es ändert sich nur, in welche Richtung
		 * gemischt wird.
		 */
		--link: color-mix(in srgb, var(--accent) 50%, var(--text));
		--link-visited: color-mix(in srgb, var(--accent) 34%, var(--text-muted));
		--link-hover: color-mix(in srgb, var(--accent) 22%, var(--text));
		--focus-ring: color-mix(in srgb, var(--accent) 45%, var(--text));

		--accent-solid: color-mix(in srgb, var(--accent) 58%, #ffffff);
		--accent-solid-hover: color-mix(in srgb, var(--accent) 42%, #ffffff);
		--on-accent: #0b1220;

		/* Kräftiger als im hellen Bild: eine 12-%-Tönung geht auf dunklem Grund unter. */
		--accent-wash: color-mix(in srgb, var(--accent) 22%, var(--surface));
		--accent-wash-strong: color-mix(in srgb, var(--accent) 34%, var(--surface));
		--accent-ink: color-mix(in srgb, var(--accent) 42%, var(--text));
	}
}

/* ─── Grundgerüst ────────────────────────────────────────────────────────── */

html { -webkit-text-size-adjust: 100%; }

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.5;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -.01em; margin-bottom: .375rem; }
h2 { font-size: 1.0625rem; font-weight: 650; margin-bottom: .625rem; }

.subtitle { color: var(--text-muted); font-size: .9375rem; margin-bottom: 1.75rem; }
.hint { color: var(--text-muted); font-size: .8125rem; line-height: 1.5; margin-top: .375rem; }
.notice { color: var(--text); font-size: .9375rem; line-height: 1.55; }
.notice + .notice { margin-top: .75rem; }
.empty { color: var(--text-muted); font-size: .9375rem; padding: 1rem 0; }

/* ─── Links ──────────────────────────────────────────────────────────────────
 * Unterstrichen und mit Abstand zur Grundlinie. Farbe allein reichte nicht: in Fließtext
 * war ein Link kaum vom Text zu unterscheiden.
 *
 * Navigationen und Schaltflächen nehmen den Strich über .no-underline wieder weg – dort
 * trägt die Umgebung schon, dass es sich anklicken lässt.
 */

a {
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color .12s, text-decoration-color .12s;
}

a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

.no-underline, .no-underline:visited { text-decoration: none; }
.no-underline:hover { text-decoration: none; }

/* Ein sichtbarer Rahmen für die Tastatur – vorher gab es nur den des Browsers, und den
   überdeckte auf den Eingabefeldern die eigene Fokusgestaltung. */
:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ─── Eingabefelder ──────────────────────────────────────────────────────── */

label { display: block; font-size: .875rem; font-weight: 550; margin-bottom: .375rem; }

input[type=text], input[type=email], input[type=password], input[type=url], textarea, select {
	width: 100%;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: inherit;
	font-size: .9375rem;
	padding: .5625rem .8125rem;
	outline: none;
	transition: border-color .12s, box-shadow .12s;
}

input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .8; }

input:focus, textarea:focus, select:focus {
	border-color: var(--accent-solid);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-solid) 30%, transparent);
	outline: none;
}

textarea { resize: vertical; }

.form-group { margin-bottom: 1.125rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.25rem; }
.form-inline { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.form-inline .form-group { margin-bottom: 0; flex: 1 1 180px; }

.checkbox { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.125rem; font-size: .9375rem; }
.checkbox label { margin: 0; font-weight: 400; }
.checkbox input[type=checkbox] { accent-color: var(--accent-solid); width: 1rem; height: 1rem; }

/* ─── Schaltflächen ──────────────────────────────────────────────────────── */

.btn, .btn-secondary, .btn-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	padding: .5625rem 1.125rem;
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s, transform .06s;
}

.btn:active, .btn-secondary:active, .btn-danger:active { transform: translateY(1px); }

.btn {
	background: var(--accent-solid);
	color: var(--on-accent);
	box-shadow: var(--shadow-sm);
}

.btn:visited { color: var(--on-accent); }
.btn:hover { background: var(--accent-solid-hover); color: var(--on-accent); }

.btn-secondary {
	background: var(--surface);
	border-color: var(--border-strong);
	color: var(--text);
	font-weight: 550;
}

.btn-secondary:visited { color: var(--text); }
.btn-secondary:hover { background: var(--surface-sunken); border-color: var(--accent-solid); color: var(--text); }

.btn-danger {
	background: transparent;
	border-color: var(--danger-border);
	color: var(--danger);
	font-weight: 550;
}

.btn-danger:visited { color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger); }

/* Text, der sich wie ein Link verhält, aber ein Formular abschickt – „Abmelden" etwa muss
   ein POST sein und kann deshalb kein <a> sein. */
.btn-link {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	background: none;
	border: none;
	padding: 0;
	color: var(--link);
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

.btn-link:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

.actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* ─── Flächen ────────────────────────────────────────────────────────────── */

.panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.25rem;
	margin-bottom: 1.25rem;
}

/* ─── Rückmeldungen ──────────────────────────────────────────────────────── */

.status, .error {
	border-radius: var(--radius-sm);
	border-style: solid;
	border-width: 1px;
	font-size: .9375rem;
	line-height: 1.5;
	padding: .75rem 1rem;
	margin-bottom: 1.25rem;
}

.status { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.error a, .status a { color: inherit; }

/* ─── Abzeichen ──────────────────────────────────────────────────────────── */

.badge {
	display: inline-block;
	background: var(--accent-wash);
	border: 1px solid color-mix(in srgb, var(--accent-solid) 34%, transparent);
	border-radius: 999px;
	color: var(--accent-ink);
	font-size: .75rem;
	font-weight: 600;
	padding: .125rem .625rem;
	white-space: nowrap;
}

.badge-on { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.badge-off { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.badge-list { display: flex; gap: .375rem; flex-wrap: wrap; }

/* ─── Symbole ────────────────────────────────────────────────────────────────
 * Die SVGs aus _Icon.cshtml. Sie erben die Farbe der Umgebung, damit ein Symbol im Knopf,
 * im Link und in der Navigation nicht je einzeln nachgefärbt werden muss.
 */

.icon {
	width: 1.125em;
	height: 1.125em;
	flex: none;
	vertical-align: -.18em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}