/* =========================================================================
   Arthos2 - Theme 2026
   Dunkle, flächige Gestaltung mit modernisiertem Arthos2-Rot.
   Ersetzt das alte sprite-basierte Theme (app.css) vollständig:
   sämtliche Ornamente, Buttons, Trenner und Icons entstehen hier per
   CSS bzw. als Inline-SVG in den Templates - keine UI-Grafiken mehr.
   ========================================================================= */

/* ---------------------------------------------------------------- Tokens */
:root {
	/* Flächen */
	--bg:            #0a0a09;
	--bg-deep:       #060605;
	--surface:       rgba(255, 255, 255, .025);
	--surface-2:     rgba(255, 255, 255, .05);
	--surface-3:     rgba(255, 255, 255, .08);

	/* Linien */
	--line:          rgba(255, 255, 255, .08);
	--line-strong:   rgba(255, 255, 255, .16);

	/* Schrift */
	--txt:           #ada5a5;
	--txt-bright:    #ffffff;
	--txt-dim:       #8a8a88;

	/* Akzent: Arthos2-Rot, entsättigt und aufgehellt für dunklen Grund */
	--accent:        #d6403a;
	--accent-hi:     #e8756b;
	--accent-deep:   #7a1e1a;
	--accent-glow:   rgba(214, 64, 58, .35);

	/* Reiche */
	--empire-shinsoo: #d1453c;
	--empire-chunjo:  #3f7fd1;
	--empire-jinno:   #d1a83f;

	/* Maße */
	--container:     1280px;
	--radius:        4px;
	--radius-lg:     8px;

	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	        "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--txt);
	font: 400 15px/1.65 var(--font);
	overflow-x: hidden;
}

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

a { color: var(--accent-hi); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--txt-bright); }

h1, h2, h3, h4, h5 {
	margin: 0;
	color: var(--txt-bright);
	font-weight: 500;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: .02em;
}

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

ul { margin: 0; padding: 0; list-style: none; }

table { border-collapse: collapse; width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- Layout */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }

/* Grid für Inhalt + Rangliste (wie beim Vorbild nebeneinander) */
.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 40px;
	align-items: start;
}

/* ------------------------------------------------------------ Hintergrund */
/* Ruhige, dunkle Grundfläche für die ganze Seite. Bewusst OHNE das alte
   Artwork bg-al.jpg: dieses Bild zeigt die komplette frühere Seite samt
   Logo und Pergamentfläche und würde als heller Fleck durchscheinen.
   Das Artwork sitzt jetzt gezielt nur hinter dem Hero (.hero__scene). */
.site-bg {
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(90% 55% at 50% 0%, rgba(122, 30, 26, .18) 0%, transparent 60%),
		radial-gradient(70% 50% at 15% 15%, rgba(60, 30, 25, .22) 0%, transparent 65%),
		var(--bg-deep);
}

/* ------------------------------------------------------------- Navigation */
.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: linear-gradient(to bottom, rgba(6, 6, 5, .92), rgba(6, 6, 5, .55));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 68px;
}

.nav__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--txt-bright);
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	white-space: nowrap;
}

.nav__brand:hover { color: var(--accent-hi); }
.nav__brand svg { flex: none; }

/* Schriftzug: statt flachem Weiß ein warmer Verlauf, dazu etwas mehr Laufweite
   und ein weicher Schein. Der Verlauf ist doppelt so breit wie der Text und
   wandert beim Überfahren einmal durch - das ergibt einen kurzen Schimmer,
   ohne dass etwas dauerhaft blinkt. */
.brand-word {
	font-weight: 700;
	letter-spacing: .16em;
	text-shadow: 0 0 18px var(--accent-glow);
	background: linear-gradient(100deg,
		#ffffff 0%, #ffe3d5 30%, var(--accent-hi) 55%, #ffffff 80%, #ffe3d5 100%);
	background-size: 220% 100%;
	background-position: 0 0;
	transition: background-position .55s cubic-bezier(.2, .8, .3, 1);
}

/* Erst hier wird die Schriftfarbe transparent geschaltet: ohne
   background-clip:text bliebe der Schriftzug sonst unsichtbar. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.brand-word {
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

/* Die abschließende Zahl fällt bewusst aus dem Verlauf heraus. */
.brand-word__num {
	color: var(--accent);
	font-weight: 800;
}

.nav__brand:hover .brand-word { background-position: 100% 0; }

/* Markenzeichen: zwei dezente Bewegungen. Der gefüllte Kern glimmt wie Glut
   (reine Helligkeit, keine Bewegung), und über dem Umriss wandert ein heller
   Abschnitt einmal herum. Beim Überfahren kippt das Zeichen leicht an. */
.brand-mark {
	overflow: visible;
	transition: transform .35s cubic-bezier(.2, .8, .3, 1);
}

.nav__brand:hover .brand-mark { transform: rotate(-10deg) scale(1.1); }

.brand-mark__core { animation: brand-ember 3.4s ease-in-out infinite; }

/* Liegt deckungsgleich auf dem Umriss, gezeichnet sind aber nur 8 von 60
   Einheiten. Der normale Umriss darunter bleibt dadurch vollständig
   sichtbar, oben drüber läuft nur der Lichtpunkt. */
.brand-mark__spark {
	stroke: var(--accent-hi);
	stroke-dasharray: 8 52;
	animation: brand-trace 5s linear infinite;
}

@keyframes brand-ember {
	0%, 100% { opacity: .5; }
	50%      { opacity: 1; }
}

@keyframes brand-trace {
	from { stroke-dashoffset: 60; }
	to   { stroke-dashoffset: 0; }
}

.nav__links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.nav__links a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: var(--radius);
	color: var(--txt);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .06em;
	transition: background .15s ease, color .15s ease;
}

.nav__links a:hover { background: var(--surface-2); color: var(--txt-bright); }

.nav__links a.is-active {
	color: var(--txt-bright);
	box-shadow: inset 0 -2px 0 var(--accent);
}

.nav__links svg { flex: none; opacity: .7; }
.nav__links a:hover svg, .nav__links a.is-active svg { opacity: 1; }

/* Mobile-Umschalter */
.nav__toggle {
	display: none;
	width: 42px;
	height: 42px;
	padding: 0;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--txt-bright);
	cursor: pointer;
}

.nav__toggle:hover { border-color: var(--line-strong); }

/* ------------------------------------------------------------- Sprachwahl */
.lang { position: relative; flex: none; }

.lang__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 10px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--txt);
	font: 600 12px/1 var(--font);
	letter-spacing: .06em;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.lang__btn:hover {
	background: var(--surface-3);
	border-color: var(--line-strong);
	color: var(--txt-bright);
}

/* Der Pfeil ist das letzte Kind - er dreht sich beim Aufklappen. */
.lang__btn > svg:last-child { opacity: .6; transition: transform .18s ease, opacity .15s ease; }
.lang__btn[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); opacity: 1; }

/* Flaggen bekommen eine dünne Kante, sonst verlaufen die weißen Streifen
   von Polen, Niederlande oder Frankreich am dunklen Grund ins Nichts. */
.flag {
	display: block;
	flex: none;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}

.lang__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	display: grid;
	grid-template-columns: repeat(2, minmax(138px, 1fr));
	gap: 2px;
	padding: 8px;
	background: #0d0d0c;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .55);

	/* Zugeklappt bewusst über visibility statt display:none - so läuft der
	   Übergang, und ohne JavaScript öffnet :focus-within das Menü trotzdem. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.lang.is-open > .lang__menu,
.lang:focus-within > .lang__menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.lang__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--radius);
	color: var(--txt);
	font-size: 13px;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

.lang__item:hover { background: var(--surface-2); color: var(--txt-bright); }

.lang__item.is-active {
	background: var(--surface-2);
	color: var(--txt-bright);
	box-shadow: inset 2px 0 0 var(--accent);
}

/* ------------------------------------------------------------------- Hero */
.hero {
	position: relative;
	padding: 76px 0 56px;
	text-align: center;
	isolation: isolate;
}

/* Artwork-Band hinter dem Hero. Ersetzt das frühere Vollbildvideo:
   das Video enthielt die komplette alte Seite samt Logo und Pergament,
   animiert waren darin nur fallende Blütenblätter und ein Leuchten -
   beides entsteht unten in .fx wieder, nur eben in CSS. */
.hero__scene {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: url(../img/hero-arthos.webp?v=20260731-3) center / cover no-repeat;
}

/* Animiertes Artwork-Band. Liegt exakt über dem Standbild von .hero__scene,
   das dadurch ohne Zusatzregel als Rückfalloption dient. Bewusst NICHT unter
   prefers-reduced-motion angehalten: manche Windows-Installationen melden
   dauerhaft "reduce" (siehe Kommentar ganz unten in dieser Datei), der Header
   wäre dort sonst immer eingefroren. */
.hero__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	pointer-events: none;
}

/* Ränder weich in den Seitenhintergrund auslaufen lassen, damit das Band
   auf keiner Bildschirmbreite hart abgeschnitten wirkt. Steht als ::after
   nach dem Video in der Malreihenfolge und legt sich deshalb darüber. */
.hero__scene::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%),
		linear-gradient(to bottom, rgba(10, 10, 9, .55) 0%, rgba(10, 10, 9, .25) 45%, var(--bg) 100%);
}

/* --------------------------------------------------------------- Effekte */
/* Selbst erzeugte Bewegung - keine Bilddateien, keine Skripte.
   Drei Partikelebenen mit unterschiedlicher Kachelgröße und Dauer ergeben
   eine Tiefenstaffelung. Der Versatz je Durchlauf entspricht exakt einer
   Kachelhöhe, dadurch läuft die Schleife ohne sichtbaren Sprung. */
.fx {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.fx__layer {
	position: absolute;
	inset: -60% 0;
	will-change: transform;
}

/* Nahe Ebene: größere, hellere Blätter, zügiger */
.fx__layer--near {
	background-image:
		radial-gradient(2.5px 2.5px at  60px  40px, rgba(232, 117, 107, .55), transparent),
		radial-gradient(2px   2px   at 240px 180px, rgba(214,  64,  58, .45), transparent),
		radial-gradient(3px   3px   at 420px  90px, rgba(200,  80,  60, .40), transparent),
		radial-gradient(2px   2px   at 130px 330px, rgba(232, 117, 107, .35), transparent),
		radial-gradient(2.5px 2.5px at 500px 300px, rgba(214,  64,  58, .40), transparent);
	background-size: 560px 420px;
	animation: fx-fall 26s linear infinite;
}

/* Mittlere Ebene */
.fx__layer--mid {
	background-image:
		radial-gradient(1.8px 1.8px at  90px 120px, rgba(214,  64,  58, .35), transparent),
		radial-gradient(1.5px 1.5px at 310px  60px, rgba(232, 117, 107, .30), transparent),
		radial-gradient(2px   2px   at 180px 280px, rgba(190,  70,  55, .30), transparent),
		radial-gradient(1.5px 1.5px at 430px 220px, rgba(214,  64,  58, .28), transparent);
	background-size: 480px 360px;
	animation: fx-fall 40s linear infinite;
}

/* Ferne Ebene: winzige Funken, sehr langsam */
.fx__layer--far {
	background-image:
		radial-gradient(1px 1px at  50px  80px, rgba(226, 170, 120, .30), transparent),
		radial-gradient(1px 1px at 200px 200px, rgba(214,  64,  58, .22), transparent),
		radial-gradient(1px 1px at 350px 130px, rgba(226, 170, 120, .22), transparent),
		radial-gradient(1px 1px at 120px 300px, rgba(214,  64,  58, .18), transparent);
	background-size: 400px 300px;
	animation: fx-fall 62s linear infinite;
}

/* Nebelschwaden: zwei sehr weiche Flächen, die gegenläufig treiben */
.fx__fog {
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(50% 40% at 25% 60%, rgba(122, 30, 26, .16), transparent 70%),
		radial-gradient(45% 35% at 75% 40%, rgba(60, 40, 30, .18), transparent 70%);
	animation: fx-drift 48s ease-in-out infinite alternate;
}

/* Warmes Pulsieren, greift das Leuchten aus dem Artwork auf */
.fx__glow {
	position: absolute;
	left: 50%;
	top: 42%;
	width: 620px;
	height: 320px;
	margin: -160px 0 0 -310px;
	background: radial-gradient(closest-side, rgba(226, 190, 110, .16), transparent 75%);
	animation: fx-pulse 7s ease-in-out infinite;
}

/* Ein Durchlauf = genau eine Kachelhöhe, damit die Schleife nahtlos ist */
@keyframes fx-fall {
	from { transform: translate3d(0, -420px, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

.fx__layer--mid { animation-name: fx-fall-mid; }
.fx__layer--far { animation-name: fx-fall-far; }

@keyframes fx-fall-mid {
	from { transform: translate3d(-14px, -360px, 0); }
	to   { transform: translate3d( 14px, 0, 0); }
}

@keyframes fx-fall-far {
	from { transform: translate3d(10px, -300px, 0); }
	to   { transform: translate3d(-10px, 0, 0); }
}

@keyframes fx-drift {
	from { transform: translate3d(-3%, 0, 0) scale(1); }
	to   { transform: translate3d( 3%, -2%, 0) scale(1.06); }
}

@keyframes fx-pulse {
	0%, 100% { opacity: .55; transform: scale(.96); }
	50%      { opacity: 1;   transform: scale(1.04); }
}

.hero__logo {
	max-width: 460px;
	margin: 0 auto 12px;
	filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .8));
}

.hero__claim {
	margin: 0 0 32px;
	color: var(--txt-dim);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .22em;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* ---------------------------------------------------------------- Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 30px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: none;
	color: var(--txt-bright);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease,
	            color .18s ease, box-shadow .18s ease, transform .06s ease;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
	background: linear-gradient(180deg, var(--accent) 0%, #b32e29 100%);
	box-shadow: 0 6px 24px -8px var(--accent-glow);
	color: #fff;
}

.btn--primary:hover {
	background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 100%);
	box-shadow: 0 8px 30px -6px var(--accent-glow);
	color: #fff;
}

.btn--ghost {
	background: var(--surface-2);
	border-color: var(--line-strong);
	color: var(--txt-bright);
}

.btn--ghost:hover { background: var(--surface-3); border-color: var(--accent); color: #fff; }

.btn--block { width: 100%; }
.btn--sm { padding: 9px 18px; font-size: 12px; }

/* ------------------------------------------------------------------ Karten */
.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}

.card__head h2, .card__head h3 { font-size: 15px; letter-spacing: .1em; }

.card__body { padding: 22px; }
.card__body--flush { padding: 0; }

.card__foot {
	padding: 14px 22px;
	border-top: 1px solid var(--line);
	text-align: center;
}

/* Abschnittsüberschrift mit feiner Linie, ersetzt content-title-sep.png */
.section-title {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 28px;
	font-size: 26px;
	font-weight: 300;
	letter-spacing: .12em;
}

.section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, var(--line-strong), transparent);
}

/* --------------------------------------------------------- Status-Kacheln */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
}

.stat {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: border-color .18s ease, background .18s ease;
}

.stat:hover { border-color: var(--line-strong); background: var(--surface-2); }

.stat__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: var(--radius);
	background: linear-gradient(180deg, rgba(214, 64, 58, .18), rgba(214, 64, 58, .06));
	border: 1px solid rgba(214, 64, 58, .25);
	color: var(--accent-hi);
}

.stat__value {
	display: block;
	color: var(--txt-bright);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.1;
}

.stat__label {
	display: block;
	margin-top: 2px;
	color: var(--txt-dim);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .12em;
}

/* Server-Zustand */
.status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4caf50;
	box-shadow: 0 0 10px rgba(76, 175, 80, .8);
}

.status-dot--off { background: #777; box-shadow: none; }

/* ------------------------------------------------------------------- News */
.news-list { display: grid; gap: 18px; }

.news-item {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color .18s ease, transform .18s ease;
}

.news-item:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.news-item__media { position: relative; background: var(--bg-deep); }

.news-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .85;
}

.news-item__date {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 4px 10px;
	background: rgba(6, 6, 5, .85);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	color: var(--txt-bright);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
}

.news-item__body { padding: 22px 24px; }

.news-item__body h3 {
	margin-bottom: 8px;
	font-size: 17px;
	letter-spacing: .04em;
}

.news-item__tag {
	display: inline-block;
	margin-bottom: 10px;
	padding: 3px 10px;
	border: 1px solid rgba(214, 64, 58, .4);
	border-radius: 100px;
	color: var(--accent-hi);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
}

/* --------------------------------------------------------------- Rangliste */
.tabs {
	display: flex;
	gap: 4px;
	padding: 6px;
	background: var(--bg-deep);
	border-bottom: 1px solid var(--line);
}

.tabs button {
	flex: 1;
	padding: 9px 12px;
	background: none;
	border: 0;
	border-radius: var(--radius);
	color: var(--txt-dim);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.tabs button:hover { color: var(--txt-bright); }

.tabs button.is-active {
	background: var(--surface-2);
	color: var(--txt-bright);
	box-shadow: inset 0 -2px 0 var(--accent);
}

.rank-table { font-size: 14px; }

.rank-table th {
	padding: 11px 16px;
	border-bottom: 1px solid var(--line);
	color: var(--txt-dim);
	font-size: 11px;
	font-weight: 600;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.rank-table td {
	padding: 11px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.rank-table tbody tr:last-child td { border-bottom: 0; }
.rank-table tbody tr { transition: background .15s ease; }
.rank-table tbody tr:hover { background: var(--surface-2); }

.rank-table .t-rank {
	width: 54px;
	color: var(--txt-dim);
	font-weight: 600;
	text-align: center;
}

.rank-table .t-name { color: var(--txt-bright); font-weight: 500; }
.rank-table .is-clickable { cursor: pointer; }

/* Medaillen für die ersten drei Plätze, ersetzt ranking-trophies.png */
.medal {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
	color: #1a1a18;
}

.medal--1 { background: linear-gradient(160deg, #f4d97b, #c9a53f); }
.medal--2 { background: linear-gradient(160deg, #dcdcdc, #9a9a9a); }
.medal--3 { background: linear-gradient(160deg, #d99b6c, #a56636); }

/* Reichs-Marker, ersetzt ranking-flags.png */
.empire {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.empire::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 2px;
	transform: rotate(45deg);
	background: var(--txt-dim);
}

.empire-shinsoo::before { background: var(--empire-shinsoo); box-shadow: 0 0 8px rgba(209, 69, 60, .6); }
.empire-chunjo::before  { background: var(--empire-chunjo);  box-shadow: 0 0 8px rgba(63, 127, 209, .6); }
.empire-jinno::before   { background: var(--empire-jinno);   box-shadow: 0 0 8px rgba(209, 168, 63, .6); }

.empire-shinsoo { color: var(--empire-shinsoo); }
.empire-chunjo  { color: var(--empire-chunjo); }
.empire-jinno   { color: var(--empire-jinno); }

/* -------------------------------------------------------------- Formulare */
.field { margin-bottom: 18px; }

.field label {
	display: block;
	margin-bottom: 7px;
	color: var(--txt-dim);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.input {
	width: 100%;
	padding: 12px 14px;
	background: var(--bg-deep);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--txt-bright);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.input::placeholder { color: #6b6b69; }

.input:focus {
	outline: 0;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(214, 64, 58, .15);
}

select.input { appearance: none; cursor: pointer; }

.form-note {
	margin-bottom: 22px;
	padding: 14px 16px;
	background: var(--surface);
	border-left: 2px solid var(--accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 13px;
	color: var(--txt-dim);
}

.captcha-box {
	margin-bottom: 10px;
	padding: 12px 14px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--txt-bright);
}

/* --------------------------------------------------------------- Hinweise */
.alert {
	margin-bottom: 20px;
	padding: 13px 16px;
	border: 1px solid;
	border-radius: var(--radius);
	font-size: 14px;
}

.alert ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }

.alert-success {
	background: rgba(76, 175, 80, .1);
	border-color: rgba(76, 175, 80, .35);
	color: #a5d6a7;
}

.alert-error {
	background: rgba(214, 64, 58, .1);
	border-color: rgba(214, 64, 58, .4);
	color: #ef9a93;
}

/* ------------------------------------------------------------ Blätterlinks */
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 26px 0 0;
}

.pagination li a, .pagination li span {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--txt);
	font-size: 13px;
}

.pagination li a:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--txt-bright); }
.pagination li.active span { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pagination li.disabled span { opacity: .35; }

/* ------------------------------------------------------------------ Dialog */
.modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(4, 4, 3, .8);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.modal[hidden] { display: none; }

.modal__box {
	position: relative;
	width: 100%;
	max-width: 460px;
	background: #121110;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 80px -20px #000;
}

.modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--txt);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.modal__close:hover { color: var(--txt-bright); border-color: var(--accent); }

.modal dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 18px;
	margin: 0;
}

.modal dt { color: var(--txt-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.modal dd { margin: 0; color: var(--txt-bright); text-align: right; }

/* ------------------------------------------------------------------ Fusszeile */
.footer {
	margin-top: 72px;
	background: rgba(6, 6, 5, .85);
	border-top: 1px solid var(--line);
}

.footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 32px 0;
}

.footer__links { display: flex; flex-wrap: wrap; gap: 22px; }

.footer__links a {
	color: var(--txt-dim);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.footer__links a:hover { color: var(--txt-bright); }

.footer__social { display: flex; gap: 10px; }

.footer__social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--txt-dim);
	transition: all .15s ease;
}

.footer__social a:hover { border-color: var(--accent); color: var(--accent-hi); background: var(--surface-2); }

.footer__bottom {
	padding: 22px 0 30px;
	border-top: 1px solid var(--line);
	color: #6b6b69;
	font-size: 12px;
	line-height: 1.7;
}

.footer__bottom .disclaimer { margin-top: 8px; max-width: 900px; }

/* ------------------------------------------------------------------ Helfer */
.text-center { text-align: center; }
.muted { color: var(--txt-dim); }
.stack > * + * { margin-top: 16px; }
.empty { padding: 28px 16px; text-align: center; color: var(--txt-dim); font-size: 14px; }

.loader { padding: 30px; text-align: center; color: var(--txt-dim); }

.spinner {
	display: inline-block;
	width: 26px;
	height: 26px;
	border: 2px solid var(--line-strong);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- Responsiv */
@media (max-width: 1080px) {
	.split { grid-template-columns: 1fr; }
	.split > aside { order: -1; }
}

@media (max-width: 860px) {
	.nav__toggle { display: grid; place-items: center; }

	/* Die Links werden zum aufklappbaren Panel und schieben deshalb nichts
	   mehr nach rechts - das übernimmt jetzt die Sprachwahl. */
	.lang { margin-left: auto; }

	.nav__links {
		position: absolute;
		top: 68px;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 10px;
		background: #0d0d0c;
		border-bottom: 1px solid var(--line);
	}

	.nav__links[hidden] { display: none; }

	.section { padding: 48px 0; }
	.hero { padding: 48px 0 36px; }
	.hero__logo { max-width: 300px; }
	.hero__claim { font-size: 12px; letter-spacing: .16em; }
	.section-title { font-size: 21px; }

	.news-item { grid-template-columns: 1fr; }
	.news-item__media { height: 170px; }
}

@media (max-width: 560px) {
	.container { padding: 0 16px; }

	/* Zwei Spalten à 138 px passen auf schmalen Geräten nicht mehr neben
	   den Rand - hier eine Spalte, dafür scrollbar begrenzt. */
	.lang__menu {
		grid-template-columns: 1fr;
		max-height: 70vh;
		overflow-y: auto;
	}
	.hero__actions { flex-direction: column; }
	.btn { width: 100%; }
	.rank-table th, .rank-table td { padding: 10px 12px; }
	.footer__top { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

	/* Die Effektebenen laufen endlos. Mit .01ms würden sie im
	   Millisekundentakt neu starten und sichtbar flackern - deshalb hier
	   ganz anhalten statt beschleunigen. Sichtbar bleiben sie, nur eben
	   unbewegt: Ausblenden wäre hier falsch, denn auf manchen Windows-
	   Installationen meldet der Browser dauerhaft "reduce". */
	.fx__layer, .fx__fog, .fx__glow { animation: none !important; }

	/* Das Markenzeichen ist 22 px groß - die beiden Animationen darin sind
	   zu klein, um jemandem unwohl zu werden, und laufen deshalb weiter
	   (dieser Browser meldet dauerhaft "reduce", der Header wäre sonst
	   dauerhaft tot). Nötig ist nur, die globale .01ms-Dauer wieder auf die
	   echte zu setzen, sonst starten sie im Millisekundentakt neu. */
	.brand-mark__core  { animation-duration: 3.4s !important; }
	.brand-mark__spark { animation-duration: 5s !important; }
}