/* Die Farben und Größen stammen aus dem freigegebenen Entwurf „Wer darf wohin"
   (31.08.2026). Sie sind nicht neu erfunden, und sie werden hier nicht
   nachgemessen, sondern übernommen.

   Zwei Regeln aus CLAUDE.md, die dieses Blatt einhält:

   * **Farben nur über die semantischen Rollen.** Kein Hex-Wert außerhalb des
     Token-Blocks unten. Was `--akzent` bedeutet, entscheidet man einmal.
   * **Klassen tragen ein Bereichspräfix** (`anmelden-*`). Das Stylesheet ist
     ein globaler, ungeprüfter Namensraum. Eine Verwaltungsseite bekommt es
     nicht mehr: die Verwaltung ist eine eigene Anwendung (→ entscheidungen/0007).

   Die Schriften liegen im Image und werden von diesem Dienst selbst
   ausgeliefert. Nicht aus Vorliebe: die CSP am Edge ist `default-src 'self'`,
   damit sind fonts.googleapis.com und fonts.gstatic.com blockiert — der
   Entwurf lud sie von dort, im Browser wäre davon nichts angekommen. */

@font-face {
	font-family: "Plex Sans";
	src: url("/static/schrift/plex-sans.woff2") format("woff2");
	/* Eine variable Datei für den ganzen Bereich — Google liefert sie so aus,
	   wenn man mehrere Gewichte in einem Zug anfordert. 40 KB statt 120. */
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Plex Mono";
	src: url("/static/schrift/plex-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Plex Mono";
	src: url("/static/schrift/plex-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {
	--grund: #f4f5f8;
	--flaeche: #ffffff;
	--flaeche-2: #fafafc;
	--tinte: #16181d;
	--tinte-leise: #5c6270;
	--tinte-still: #8b90a0;
	--linie: #e1e3ea;
	--linie-stark: #cbceda;
	--akzent: #4a46c9;
	--akzent-weich: #edecfb;
	--auf-akzent: #ffffff;
	--gefahr: #a62b22;
	--gefahr-weich: #fbeae8;

	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;

	--sans: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		--grund: #0e1016;
		--flaeche: #171a21;
		--flaeche-2: #1c2029;
		--tinte: #e8eaf1;
		--tinte-leise: #9aa0b0;
		--tinte-still: #6e7484;
		--linie: #272b36;
		--linie-stark: #3a3f4d;
		--akzent: #9591ff;
		--akzent-weich: #23214a;
		--auf-akzent: #0e1016;
		--gefahr: #f0897f;
		--gefahr-weich: #3a1d1a;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--grund);
	color: var(--tinte);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* ── Anmeldemaske ──────────────────────────────────────────────────────── */

.anmelden-buehne {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--s-6) var(--s-4);
}

.anmelden-karte {
	width: 100%;
	max-width: 380px;
	background: var(--flaeche);
	border: 1px solid var(--linie);
	border-radius: 8px;
	padding: var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

.anmelden-marke {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--akzent);
	margin: 0;
}

.anmelden-schritt {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tinte-still);
}

.anmelden-karte h1 {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.anmelden-karte p {
	margin: 0;
	font-size: 13.5px;
	color: var(--tinte-leise);
}

.anmelden-feld {
	display: block;
	width: 100%;
	font-family: var(--mono);
	font-size: 14px;
	color: var(--tinte);
	background: var(--flaeche-2);
	border: 1px solid var(--linie-stark);
	border-radius: 6px;
	padding: 10px 12px;
}

.anmelden-feld::placeholder {
	color: var(--tinte-still);
}

.anmelden-feld:focus-visible {
	outline: 2px solid var(--akzent);
	outline-offset: 1px;
	border-color: var(--akzent);
}

.anmelden-feld-code {
	text-align: center;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0.32em;
	padding: 12px;
	text-indent: 0.32em;
}

/* Die Formulare tragen den Abstand, nicht die Elemente darin — sonst stünde er
   als inline-Attribut im HTML, und inline-Stile sind hier nur deshalb erlaubt,
   weil die CSP `style-src 'unsafe-inline'` mitbringt. Sich darauf zu stützen,
   wäre eine Wette auf eine Regel, die in Stufe E enger gefasst wird. */
.anmelden-karte form {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

.anmelden-knopf {
	width: 100%;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	color: var(--auf-akzent);
	background: var(--akzent);
	border: none;
	border-radius: 6px;
	padding: 10px 14px;
	cursor: pointer;
}

.anmelden-knopf:focus-visible {
	outline: 2px solid var(--akzent);
	outline-offset: 2px;
}

.anmelden-klein {
	font-size: 12px;
	color: var(--tinte-still);
}

.anmelden-klein a {
	color: var(--tinte-leise);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.anmelden-mono {
	font-family: var(--mono);
	font-size: 12.5px;
}

/* Der einzige Fehlerpfad, den diese Maske kennt. Er sagt bewusst nie, *was*
   nicht stimmte — die Antwort ist für unbekannte Adresse, falschen Code und
   abgelaufenen Code dieselbe. */
.anmelden-fehler {
	font-size: 13px;
	color: var(--gefahr);
	background: var(--gefahr-weich);
	border-left: 2px solid var(--gefahr);
	padding: var(--s-2) var(--s-3);
}