/* =========================================================================
   A MILLION ORCS, amillionorcs.com
   Ein einziges Stylesheet. Keine externe Quelle, kein JavaScript.
   Farbwelt "Stein & Glut" nach docs/reports/20260822_UI_REDESIGN/umsetzung/
   spec_godot.md §1.2, dieselben Token wie im Spiel.
   ========================================================================= */

/* ------------------------------------------------------------- Schriften --
   Selbst gehostet aus game/assets/fonts/ (SIL Open Font License 1.1),
   auf die tatsaechlich benutzten Zeichen verkleinert. WOFF (zlib), weil auf
   der Baumaschine kein brotli fuer WOFF2 vorhanden war, siehe report.md. */
@font-face {
	font-family: "Cinzel";
	src: url("../fonts/cinzel-700.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Cinzel";
	src: url("../fonts/cinzel-600.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Literata";
	src: url("../fonts/literata-400.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Literata";
	src: url("../fonts/literata-600.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ----------------------------------------------------------------- Token */
:root {
	--gold: #fbf78d;
	--gold-tief: #c9a227;
	--goldkante: #8a6a1f;
	--goldlinie: #8a7448;   /* nur Linien/Raender */
	--goldschrift: #9a8454; /* dieselbe Messingfamilie, aber als SCHRIFT:
	                           #8a7448 erreicht auf #0e0f12 nur 4,26:1 und
	                           faellt damit durch 4,5:1 -- gemessen, nicht
	                           geschaetzt. #9a8454 erreicht 5,30:1. */
	--warnglut: #e08b4c;

	--text: #e6dece;
	--text-leise: #a79f8e; /* Spiel-Token, gemessen 7,29:1 auf #0e0f12 */
	--inschrift: #cfc7b2;

	--stein: #2a2c32;
	--stein-tief: #0e0f12;
	--stein-hell: #3c4048;
	--stein-kante: #14161a;
	--abdunklung: #05060a;

	--pergament: #d8cba6;
	--tinte: #33261a;
	--wachs: #8e2e22;

	--serif: "Cinzel", "Trajan Pro", "Palatino Linotype", Palatino, Georgia, serif;
	--body: "Literata", Georgia, "Times New Roman", serif;

	--wrap: 1180px;
	--pad: clamp(20px, 5vw, 52px);
	--luft: clamp(56px, 9vw, 112px);
}

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

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
	margin: 0;
	background: var(--stein-tief);
	color: var(--text);
	font-family: var(--body);
	font-size: 1.0625rem;
	line-height: 1.68;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; border: 0; }

a {
	color: var(--gold);
	text-decoration: underline;
	text-decoration-color: rgba(251, 247, 141, .38);
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}
a:hover { text-decoration-color: var(--gold); }

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 1px;
}

h1, h2, h3 {
	font-family: var(--serif);
	font-weight: 700;
	color: var(--gold);
	line-height: 1.18;
	margin: 0;
	letter-spacing: .015em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad);
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--gold);
	color: var(--tinte);
	font-family: var(--serif);
	padding: .7em 1.2em;
	z-index: 99;
}
.skip:focus { left: 0; }


/* ------------------------------------------------------------- Kopfleiste */
.topbar {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 58px;
	background: linear-gradient(180deg, #16181d 0%, #0b0c0f 100%);
	border-bottom: 1px solid var(--goldkante);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .8);
}
.topbar__wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad);
	min-height: 58px;
}
.topbar__mark {
	font-family: var(--serif);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .22em;
	color: var(--gold);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.topbar__mark:hover { color: #fffbc0; }

.lang {
	display: flex;
	align-items: center;
	gap: 0;
	font-family: var(--serif);
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .16em;
}
.lang a, .lang span {
	display: block;
	padding: .42em .78em;
	text-decoration: none;
	color: var(--text-leise);
	border: 1px solid transparent;
}
.lang a:hover { color: var(--gold); }
.lang [aria-current] {
	color: var(--tinte);
	background: linear-gradient(180deg, #ebd469, #c9a227);
	border-color: var(--goldkante);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* ------------------------------------------------------------------ Hero */
.hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(540px, 76vh, 940px);
	padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 8vw, 104px);
	overflow: hidden;
	border-bottom: 1px solid var(--stein-kante);
}
/* Bild, Schleier und Inhalt liegen in DIESER Reihenfolge uebereinander.
   Bewusst nur positive z-index: ein `filter` auf einem Element mit negativem
   z-index wird von Chrome nicht mehr hinter dem ::before gezeichnet. */
.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
}
.hero__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 24% 74%;
	/* Der Menue-Hintergrund ist fuer einen Bildschirm im dunklen Zimmer gebaut.
	   Im Browser, oft bei Tageslicht, versinkt er sonst. Nur aufgehellt, nicht
	   umgefaerbt. */
	filter: brightness(1.5) contrast(.97);
}
/* Zwei Schleier. Der erste ist eine weiche dunkle Scheibe GENAU hinter dem
   Textblock. Die Wortmarke traegt laut Capsule-Abnahme weder Umriss noch
   Schatten, also muss der Grund selbst dunkel sein. Der zweite haelt oben und
   unten Stein, laesst aber Horizont, Bergfried und Feuerkoerbe stehen. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(78% 64% at 50% 48%, rgba(5, 6, 10, .84) 0%, rgba(5, 6, 10, .60) 54%, rgba(5, 6, 10, 0) 100%),
		linear-gradient(180deg, rgba(5, 6, 10, .60) 0%, rgba(5, 6, 10, .14) 32%, rgba(5, 6, 10, .18) 60%, rgba(14, 15, 18, .80) 92%, #0e0f12 100%);
}

.hero__inner {
	position: relative;
	z-index: 2;
	text-align: center;
}

.hero h1 { margin: 0 0 clamp(22px, 3vw, 34px); }
.hero h1 img {
	/* 38rem statt fester Pixel: waechst auf 4K mit der angehobenen
	   Grundschrift mit, statt bei 620 px stehenzubleiben. */
	width: clamp(248px, 46vw, 38rem);
	margin-inline: auto;
}

.pitch {
	/* 58ch statt 52ch: der laengere Steam-Pitch (Runde 2) liess sonst in beiden
	   Sprachen das letzte Wort allein in einer Zeile stehen. */
	max-width: 58ch;
	margin: 0 auto clamp(26px, 4vw, 40px);
	font-size: clamp(1.02rem, .93rem + .45vw, 1.34rem);
	line-height: 1.58;
	color: var(--inschrift);
}
.pitch span { display: block; }
.pitch span + span { margin-top: .34em; }

/* Ornament: Goldlinie mit Raute, reines CSS, kein Bild */
.rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: clamp(22px, 3.4vw, 34px) auto;
	max-width: 420px;
	color: var(--goldlinie);
}
.rule::before, .rule::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, currentColor);
}
.rule::after { background: linear-gradient(270deg, transparent, currentColor); }
.rule i {
	width: 7px; height: 7px;
	background: var(--gold-tief);
	transform: rotate(45deg);
	flex: 0 0 auto;
}

/* --------------------------------------------------------------- Knoepfe */
.cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.btn {
	--btn-bg1: #3c4048;
	--btn-bg2: #23262c;
	--btn-ink: var(--gold);
	--btn-rand: #14161a;
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 58px;
	padding: .82em 1.9em;
	font-family: var(--serif);
	font-weight: 700;
	font-size: .96rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--btn-ink);
	background: linear-gradient(180deg, var(--btn-bg1), var(--btn-bg2));
	border: 1px solid var(--btn-rand);
	border-radius: 2px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .16),
		inset 0 -1px 0 rgba(0, 0, 0, .6),
		0 2px 0 rgba(0, 0, 0, .55);
	cursor: pointer;
	transition: filter .14s ease, transform .14s ease;
}
.btn:hover { filter: brightness(1.14); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7); }

.btn--gold {
	--btn-bg1: #ebd469;
	--btn-bg2: #c9a227;
	--btn-ink: #2b2010;
	--btn-rand: var(--goldkante);
}

/* Platzhalter-Knopf: sichtbar, aber nicht bedienbar. Als <button disabled>,
   damit Tastatur und Screenreader den Zustand korrekt melden. */
.btn[disabled] {
	--btn-bg1: #2c2f36;
	--btn-bg2: #1c1e23;
	--btn-ink: #c3bba8;
	cursor: default;
	filter: none;
	opacity: 1;
}
.btn[disabled]:hover { filter: none; }
.btn[disabled]:active { transform: none; }
/* Der Hauptknopf behaelt im Wartezustand eine gedaempfte Goldkante: man sieht,
   welcher der beiden spaeter der wichtige ist, ohne dass er klickbar wirkt. */
.btn--gold[disabled] { --btn-rand: #4a3d1c; }

.btn small {
	display: block;
	font-family: var(--body);
	font-weight: 400;
	font-size: .68rem;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--warnglut);
}

/* Auf Gold ist die orange Signalfarbe unleserlich — Unterzeile in Knopf-Tinte.
   Muss NACH .btn small stehen (gleiche Spezifität, Reihenfolge entscheidet). */
.btn--gold small { color: var(--btn-ink); }

.hinweis {
	margin: clamp(20px, 3vw, 30px) auto 0;
	max-width: 52ch;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--text-leise);
}

/* -------------------------------------------------------------- Abschnitt */
section { padding-block: var(--luft); }
section + section { border-top: 1px solid #191b20; }

.eyebrow {
	font-family: var(--serif);
	font-weight: 600;
	font-size: .74rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--goldschrift);
	margin: 0 0 .85em;
}
.h2 {
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.35rem);
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: .5em;
}
.lede {
	max-width: 62ch;
	font-size: clamp(1.02rem, .97rem + .3vw, 1.18rem);
	color: var(--inschrift);
}

/* ----------------------------------------------------------- Faktenband */
/* Seit Runde 3 steht das Band allein in seinem Abschnitt, ohne Ueberzeile und
   ohne Ueberschrift. Deshalb KEIN oberer Abstand mehr: der Abschnitt bringt
   oben und unten schon dieselbe Luft mit, ein zusaetzlicher Rand oben liess
   das Band sichtbar nach unten rutschen (gemessen bei 390, 1920 und 3840 px).
   Auf dem Handy eine Spalte: "Tower defense . Strategy . Base building" brach
   in zwei Spalten ueber drei Zeilen um. */
.fakten {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 2.4vw, 30px);
	margin: 0;
}
.fakten > div {
	padding-top: 14px;
	border-top: 1px solid rgba(138, 116, 72, .5);
}
.fakten dt {
	font-family: var(--serif);
	font-weight: 600;
	font-size: .7rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--goldschrift);
	margin-bottom: .45em;
}
.fakten dd {
	margin: 0;
	font-size: .98rem;
	color: var(--text);
}

/* ---------------------------------------------------------------- Fusszeile */
.foot {
	background: linear-gradient(180deg, #101216 0%, #08090c 100%);
	border-top: 1px solid var(--goldkante);
	padding-block: clamp(38px, 5vw, 58px);
	font-size: .9rem;
	color: var(--text-leise);
}
.foot__nav {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1.6em;
	margin: 0 0 1.3em;
	padding: 0;
	list-style: none;
	font-family: var(--serif);
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.foot__nav a { text-decoration: none; color: var(--inschrift); }
.foot__nav a:hover { color: var(--gold); }
.foot p { margin: 0 0 .7em; max-width: 76ch; }
.foot p:last-child { margin-bottom: 0; }

/* ============================== Rechtstexte ============================= */
.doc { padding-block: clamp(44px, 6vw, 76px) var(--luft); }
.doc .h1 {
	font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem);
	letter-spacing: .05em;
	text-transform: uppercase;
	margin-bottom: .4em;
}
.doc__meta {
	margin: 0 0 clamp(28px, 4vw, 44px);
	font-size: .9rem;
	color: var(--text-leise);
}
.doc article { max-width: 74ch; }
.doc h2 {
	font-size: clamp(1.12rem, 1rem + .55vw, 1.42rem);
	letter-spacing: .07em;
	text-transform: uppercase;
	margin: 2.2em 0 .7em;
	padding-bottom: .45em;
	border-bottom: 1px solid rgba(138, 116, 72, .5);
}
.doc h3 {
	font-size: 1rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--inschrift);
	margin: 1.8em 0 .5em;
}
.doc ul, .doc ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.doc li { margin-bottom: .45em; }
.doc address {
	font-style: normal;
	margin: 0 0 1.2em;
	padding: 1em 1.2em;
	background: #17191e;
	border-left: 3px solid var(--gold-tief);
}

/* Platzhalter, die der Lead noch ersetzen muss: sichtbar markiert. */
.ph {
	display: inline-block;
	padding: 0 .34em;
	font-family: var(--body);
	font-weight: 600;
	color: var(--warnglut);
	background: rgba(224, 139, 76, .12);
	border-bottom: 1px dashed rgba(224, 139, 76, .7);
	white-space: nowrap;
}

/* Hervorgehobener Hinweiskasten fuer Inhalte, die bleiben: messingfarben.
   Siegelrot ist auf dieser Website ausschliesslich fuer .bauhinweis
   reserviert: "rot = muss vor dem Live-Gang weg". Deshalb darf dieser Kasten
   nicht rot sein, obwohl er ebenfalls Aufmerksamkeit verlangt (Art. 21 Abs. 4
   DSGVO verlangt eine "von anderen Informationen getrennte Form"). */
.merke {
	margin: 1.6em 0;
	padding: 1.15em 1.35em;
	background: linear-gradient(180deg, rgba(201, 162, 39, .10), rgba(201, 162, 39, .04));
	border: 1px solid rgba(201, 162, 39, .45);
	border-left: 3px solid var(--gold-tief);
	border-radius: 2px;
	font-size: .94rem;
	color: var(--inschrift);
}
.merke strong { color: var(--gold); }
.merke h3 { color: var(--gold); }

.zurueck {
	display: inline-block;
	margin-top: clamp(30px, 4vw, 48px);
	font-family: var(--serif);
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--inschrift);
}
.zurueck:hover { color: var(--gold); }

/* Bauhinweis: ein Kasten, der auf der fertigen Seite NICHTS zu suchen hat.
   Bewusst laut gestaltet (Siegelrot, Warnbalken), damit er beim Durchsehen
   nicht uebersehen wird. Alle diese Bloecke werden vor dem Live-Gang
   geloescht. Liste in ANLEITUNG_CLOUDFLARE.html, Schritt 1. */
.bauhinweis {
	position: relative;
	margin: 2em 0;
	padding: 1.15em 1.35em 1.25em;
	background: repeating-linear-gradient(135deg,
		rgba(142, 46, 34, .16) 0 14px, rgba(142, 46, 34, .10) 14px 28px);
	border: 2px dashed var(--wachs);
	border-radius: 2px;
	font-size: .93rem;
	color: var(--inschrift);
}
.bauhinweis > .bauhinweis__kopf {
	display: block;
	margin-bottom: .6em;
	font-family: var(--serif);
	font-weight: 700;
	font-size: .74rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #e2705c;
}
.bauhinweis p { margin-bottom: .7em; }
@media print { .bauhinweis { display: none; } }

/* Rechtstexte: kurze Codeschnipsel im Fliesstext (datenschutz.html) */
.doc code {
	padding: .1em .4em;
	font-family: "Consolas", "SF Mono", "DejaVu Sans Mono", monospace;
	font-size: .9em;
	background: #1b1d22;
	border: 1px solid #2f333a;
	border-radius: 2px;
	color: var(--pergament);
}

.doc hr.trenner {
	border: 0;
	border-top: 1px solid rgba(138, 116, 72, .45);
	margin: 2.8em 0;
}

/* --------------------------------------------------------- Spaltenraster --
   Das Faktenband traegt SECHS Felder. Deshalb nur Spaltenzahlen, die sechs
   glatt teilen (1, 2, 3), so bleibt nie ein einzelnes Feld uebrig. */
@media (min-width: 680px) {
	.fakten { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
	.fakten { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------- Grosse Schirme */
@media (min-width: 2200px) {
	html { font-size: 118%; }
	:root { --wrap: 1560px; }
}
@media (min-width: 3200px) {
	html { font-size: 138%; }
	:root { --wrap: 1900px; }
}

/* ------------------------------------------------------------- Kleingeraet */
@media (max-width: 560px) {
	.cta { flex-direction: column; align-items: stretch; }
	.btn { width: 100%; }
	.topbar__mark { font-size: .72rem; letter-spacing: .16em; }
}

/* ------------------------------------------------------------------ Druck */
@media print {
	.topbar, .hero, .foot__nav, .zurueck { display: none; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.doc h1, .doc h2, .doc h3 { color: #000; }
	.doc address { background: none; border-left: 2px solid #000; }
	.ph { color: #000; background: none; border-bottom: 1px dashed #000; }
	a { color: #000; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* Hilfsklassen: ersetzen die frueheren Inline-Styles (CSP style-src self). */
.u-center { text-align: center; }
.u-mx-auto { margin-inline: auto; }
.u-mt0 { margin-top: 0; }

/* Presse-Seite (aus dem frueheren Inline-style-Block umgezogen - die CSP style-src self blockt Inline-Styles; Layout-Sprung der Clips beim Abspielen war die Folge). */
	.presskit { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 1.2em 0 2em; padding: 0; list-style: none; }
	.presskit li { margin: 0; }
	.presskit a { display: block; }
	.presskit img { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); }
	.presskit figcaption { font-size: .85em; opacity: .8; margin-top: .35em; }
	.clipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin: 1.2em 0 2em; }
	.clipgrid video { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); background: #000; }
	.clipgrid p { font-size: .85em; opacity: .8; margin: .35em 0 0; }
.clipgrid video { aspect-ratio: 1560 / 878; }