/* Farben als Tokens. Die Werte stammen aus dem Bemalrezept für die Salamanders
   (Citadel-Farben, Hex-Codes nach thepaintingledger.com) – der Kommentar hinter
   jeder Zeile nennt die Dose.

   Die Rollen folgen dem Vorbild: Schwarz trägt, Grün handelt, Gold ziert. Gold
   ist deshalb bewusst NICHT für Flächen im Einsatz, sondern nur für Kanten,
   Fokus und den Zähler – sonst wird aus Gold schnell Senf.

   Die Seite ist nur noch dunkel: eine helle Fassung dieser Rüstung gibt es
   nicht. Deshalb kein prefers-color-scheme mehr, dafür color-scheme: dark,
   damit auch Scrollbalken und Bedienelemente des Browsers mitziehen. */
:root {
	color-scheme: dark;

	--grund: #181818; /* Nuln Oil */
	--karte: #231f20; /* Abaddon Black */
	--text: #f5f5f0; /* White Scar */
	--text-leise: #8a8c87; /* Dawnstone */
	--linie: #4a5055; /* Eshin Grey */
	--akzent: #285028; /* Waaagh! Flesh – die Rüstung selbst, Flächen */
	--akzent-hell: #1a8c28; /* Warpstone Glow – Linien, Unterstreichungen */
	--akzent-text: #f5f5f0; /* White Scar auf der Rüstung: 9,2:1 */
	--gold: #c8952a; /* Retributor Armour */
	--gold-hell: #c8a038; /* Liberator Gold – nur beim Überfahren */
	--live-grund: #0a3818; /* Caliban Green */
	--live-text: #60c830; /* Moot Green – das Kantenlicht */
}

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

body {
	margin: 0 auto;
	padding: clamp(2rem, 6vw, 5rem) 1.25rem 3rem;
	max-width: 46rem;
	background: var(--grund);
	color: var(--text);
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
}

/* Die Unterstreichung nimmt das hellere Grün: Waaagh! Flesh wäre auf schwarzem
   Grund als dünne Linie kaum zu sehen. */
a {
	color: inherit;
	text-decoration-color: var(--akzent-hell);
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* Kopf */

.kopf {
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* Name links, Sprachwahl rechts. Bei schmalen Fenstern rutscht die Sprachwahl
   in die nächste Zeile, statt den Namen zu quetschen. */
.kopf-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: baseline;
	justify-content: space-between;
}

.augenbraue {
	margin: 0;
	color: var(--text-leise);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kopf h1 {
	margin: 0.2em 0 0.4em;
	font-size: clamp(2.25rem, 8vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Sprachwahl */

.sprachwahl {
	display: flex;
	gap: 0.2rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.sprachwahl a,
.sprachwahl .sprachwahl-aktiv {
	padding: 0.25em 0.6em;
	border-radius: 6px;
	text-decoration: none;
}

.sprachwahl a {
	color: var(--text-leise);
}

.sprachwahl a:hover {
	background: var(--linie);
	color: var(--text);
}

/* Die aktive Sprache ist bewusst kein Link – ein Verweis auf die Seite, auf der
   man schon steht, führt nirgendwohin. */
.sprachwahl-aktiv {
	background: var(--linie);
	color: var(--text);
}

.vorspann {
	margin: 0;
	max-width: 34rem;
	color: var(--text-leise);
	font-size: 1.125rem;
}

/* Projektkarten */

.projekte {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.projekt {
	padding: clamp(1.25rem, 4vw, 1.75rem);
	border: 1px solid var(--linie);
	border-radius: 14px;
	background: var(--karte);
}

.projekt-kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: baseline;
	margin-bottom: 0.6rem;
}

.projekt h2 {
	margin: 0;
	font-size: 1.375rem;
	letter-spacing: -0.01em;
}

.projekt p {
	margin: 0 0 0.75rem;
}

/* Umrandet statt gefüllt: der graue Mittelton der Palette ist als Fläche zu
   hell, um den gedämpften Text darauf noch lesbar zu tragen. */
.status {
	padding: 0.15em 0.6em;
	border: 1px solid var(--linie);
	border-radius: 999px;
	color: var(--text-leise);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.status--live {
	border-color: var(--live-grund);
	background: var(--live-grund);
	color: var(--live-text);
}

.technik {
	color: var(--text-leise);
	font-size: 0.9375rem;
}

/* Verweise */

.verweise {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 0 !important;
}

.verweis {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.4em 0.95em;
	border: 1px solid var(--linie);
	border-radius: 8px;
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
}

.verweis:hover {
	border-color: var(--gold);
}

/* Grüne Fläche, goldene Kante – die Rüstung mit ihrer Zier. */
.verweis--haupt {
	border-color: var(--gold);
	background: var(--akzent);
	color: var(--akzent-text);
}

.verweis--haupt:hover {
	border-color: var(--gold-hell);
	filter: brightness(1.15);
}

/* Zusatz am Verweis, z. B. „nur Admins" – gedämpft, damit der Verweis selbst
   die Hauptsache bleibt. */
.hinweis {
	color: var(--text-leise);
	font-size: 0.8125rem;
	font-weight: 400;
}

.verweis--haupt .hinweis {
	color: inherit;
	opacity: 0.8;
}

/* Icons */

/* Nur der Vorrat an <symbol>-Definitionen – nichts davon wird selbst gezeigt. */
.icon-vorrat {
	display: none;
}

/* Am Schriftgrad ausgerichtet (1em) und in Textfarbe, damit das Icon auf dem
   gefüllten wie auf dem umrandeten Verweis stimmt. flex-shrink: 0 verhindert,
   dass es bei knappem Platz zusammengedrückt wird. */
.icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	fill: currentColor;
}

/* Fuß */

.fuss {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linie);
	color: var(--text-leise);
	font-size: 0.9375rem;
}

.fuss p {
	margin: 0;
}

/* Derselbe Abstand wie zur letzten Zeile, damit der Fuß einen gleichmäßigen
   Takt bekommt. Der Wert ist einen halben Rem größer als er aussieht: die
   Icon-Reihe darüber zieht sich mit ihrem negativen Rand um so viel zusammen.
   Die Auszeichnung mit .fuss davor, weil .fuss p den Rand sonst überstimmt. */
.fuss .fuss-hinweis {
	margin: 1.4rem 0 0;
	font-size: 0.875rem;
}

.fuss-verweis {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
}

.fuss-verweis:hover {
	color: var(--text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Links die Hauptsache, rechts das Beiwerk – wie die Kopfzeile. Bei knappem
   Platz bricht die rechte Hälfte um und stellt sich unter die linke, statt sich
   zu quetschen. */
.fuss-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	align-items: center;
	justify-content: space-between;
}

/* Die zweite Zeile trägt nur noch Kleingedrucktes und rückt entsprechend ab. */
.fuss-zeile--leise {
	margin-top: 1.4rem;
}

/* Der negative Außenabstand nimmt den Innenabstand der Verweise zurück, damit
   die Reihe bündig mit der Zeile abschließt statt um eine halbe Trefferfläche
   eingerückt. */
.fuss-profile {
	display: flex;
	flex-wrap: wrap;
	margin: -0.5rem;
}

/* Ohne Beschriftung bliebe nur ein Quadrat von 1em als Ziel – für den Finger zu
   wenig. Das Icon selbst wächst, dazu Innenabstand für die Trefferfläche. */
.fuss-verweis--nur-icon {
	padding: 0.5rem;
}

.fuss-verweis--nur-icon .icon {
	width: 1.25em;
	height: 1.25em;
}

/* Unterstreichen läuft ohne Text ins Leere: die Farbe trägt den Hinweis. */
.fuss-verweis--nur-icon:hover {
	text-decoration: none;
}

.fuss-navi {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	font-size: 0.875rem;
}

/* Besucherzähler */

/* Ein Zitat der alten Zählwerke, aber im Ton der Seite: gedämpft, klein, ganz
   unten rechts. Er soll gefunden werden, nicht auffallen. Den Abstand nach oben
   gibt die Zeile vor, in der er steht. */
.zaehler {
	margin: 0;
	word-spacing: 0.15em;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Messing statt Leuchtschrift: die Ziffern nehmen das Gold auf, die Kästchen
   bleiben in der neutralen Linie – sonst zieht der Zähler mehr Blicke auf sich
   als die Projekte darüber. */
.zaehler-ziffer {
	display: inline-block;
	min-width: 1.1em;
	padding: 0.15em 0.2em;
	border: 1px solid var(--linie);
	background: var(--karte);
	color: var(--gold);
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		monospace;
	font-size: 0.9375rem;
	line-height: 1.2;
	text-align: center;
}

/* Die Kästchen stoßen aneinander wie am Kilometerzähler: nur außen rund, innen
   fällt die doppelte Linie weg. */
.zaehler-ziffer + .zaehler-ziffer {
	margin-left: -1px;
}

.zaehler-ziffer:first-of-type {
	border-radius: 5px 0 0 5px;
}

.zaehler-ziffer:last-of-type {
	border-radius: 0 5px 5px 0;
}

/* Nur für Vorlesewerkzeuge: aus dem Bild genommen, aber nicht aus dem Baum –
   display: none würde die Zahl auch dort verschwinden lassen. */
.nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Rechtstexte */

/* Fließtext statt Karten: hier zählt Lesbarkeit, nicht Übersicht. Die Breite
   ist enger als der Rest der Seite, damit die Zeilen nicht zu lang werden. */
.rechtstext {
	max-width: 38rem;
}

.rechtstext h2 {
	margin: 2.5rem 0 0.6rem;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
}

.rechtstext > :first-child {
	margin-top: 0;
}

.rechtstext p,
.rechtstext ul {
	margin: 0 0 0.9rem;
}

.rechtstext ul {
	padding-left: 1.25rem;
}

.rechtstext li {
	margin-bottom: 0.25rem;
}

/* Vorbehalt über der englischen Übersetzung. */
.hinweis-kasten {
	padding: 0.8rem 1rem;
	border: 1px solid var(--linie);
	border-radius: 10px;
	background: var(--karte);
	color: var(--text-leise);
	font-size: 0.9375rem;
}

/* Sichtbarer Fokus für Tastaturbedienung – der Browser-Standard verschwindet
   auf den farbigen Flächen. */
a:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
	.verweis {
		transition: border-color 0.15s ease, filter 0.15s ease;
	}
}