/* ============================================================
   ZENITAR – neues CMS-Theme (Rebuild 2026-09)
   Struktur inspiriert von legendsofarion.org, Farben/Logo = Zenitar Original
   Mobile-first, vollständig responsive (Handy + PC)
   ============================================================ */

/* ============================================================
   ZENITRA – Design-System v2 "Dark Fantasy / Anthrazit / Gold"
   (Rebrand + vollständiges Frontend-Redesign, 2026-09-21)
   Bestehende Backendlogik/Klassen (Bootstrap-Tabellen, -Formulare,
   -Alerts in den Legacy-Seiten) bleiben unverändert im PHP - diese
   Datei überschreibt nur die visuelle Darstellung, siehe Abschnitt
   "Legacy-Seiteninhalte" weiter unten.
   ============================================================ */

@font-face {
	font-family: 'Zenitra Display';
	src: url('../fonts/TrajanProBold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Zenitra Body';
	src: url('../fonts/cronospro-regular-webfont.woff') format('woff'),
	     url('../fonts/cronospro-regular-webfont.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Zenitra Body';
	src: url('../fonts/cronospro-semibold-webfont.woff') format('woff'),
	     url('../fonts/cronospro-semibold-webfont.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Zenitra Body';
	src: url('../fonts/cronospro-italic-webfont.woff') format('woff'),
	     url('../fonts/cronospro-italic-webfont.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Dark Fantasy / Anthrazit / Gold (2026-09-21) - abgeleitet vom
	   bisherigen, rötlich-warmen Palette-Grundton, aber Richtung
	   neutrales Anthrazit/Schwarz verschoben. Gold bleibt die einzige
	   dominante Akzentfarbe; Rot/Blau/Grün nur noch für Status
	   (--zen-danger/--zen-success/--zen-info), nicht mehr als
	   UI-Grundfarbe. */
	--zen-bg:        #0b0a0a;
	--zen-bg-alt:    #0f0d0d;
	--zen-card:      #1a1717;
	--zen-card-alt:  #211d1d;
	--zen-border:    #322a26;
	--zen-border-lt: #453a34;
	--zen-text:      #e9e2d6;
	--zen-text-dim:  #a89f93;
	--zen-text-mute: #8a8078;
	--zen-white:     #ffffff;

	/* Gold - Haupt-Akzent */
	--zen-gold:      #d8a949;
	--zen-gold-lt:   #f0c674;
	--zen-gold-dp:   #a97a24;

	/* Funktionale Statusfarben (nur für Status/Formularmeldungen) */
	--zen-danger:    #c85a5a;
	--zen-danger-dp: #8f2f2f;
	--zen-success:   #6fae5a;
	--zen-info:      #5d8fb0;

	/* Historische Aliase (von bestehendem Code weiterverwendet -
	   auf die neuen Statusfarben gemappt, damit nichts bricht) */
	--zen-red:       var(--zen-danger);
	--zen-red-dark:  var(--zen-danger);
	--zen-red-deep:  var(--zen-danger-dp);
	--zen-green:     var(--zen-success);
	--zen-blue:      var(--zen-info);

	--zen-font-display: 'Zenitra Display', 'Cinzel', Georgia, serif;
	--zen-font-body: 'Zenitra Body', 'Segoe UI', Arial, sans-serif;

	--zen-radius: 8px;
	--zen-shadow: 0 6px 20px rgba(0,0,0,.5);
	--zen-maxw: 1280px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background: var(--zen-bg);
	color: var(--zen-text);
	font-family: var(--zen-font-body);
	font-size: 15px;
	line-height: 1.6;
}

a { color: var(--zen-gold); text-decoration: none; }
a:hover { color: var(--zen-gold-lt); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
h1,h2,h3 {
	margin: 0 0 12px;
	color: var(--zen-white);
	font-family: var(--zen-font-display);
	letter-spacing: .5px;
}
table { width: 100%; border-collapse: collapse; }

.zen-container {
	width: 100%;
	max-width: var(--zen-maxw);
	margin: 0 auto;
	padding: 0 16px;
}

/* ---------------- Topbar ---------------- */
.zen-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(16,11,11,.95);
	border-bottom: 1px solid var(--zen-border);
	backdrop-filter: blur(4px);
}
.zen-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	max-width: var(--zen-maxw);
	margin: 0 auto;
}
.zen-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	font-size: 20px;
	color: var(--zen-gold);
	letter-spacing: 1px;
}
.zen-brand img { height: 34px; width: auto; }

.zen-burger {
	display: block;
	background: none;
	border: 1px solid var(--zen-border-lt);
	border-radius: 6px;
	padding: 8px 10px;
	cursor: pointer;
}
.zen-burger span, .zen-burger span:before, .zen-burger span:after {
	content: '';
	display: block;
	width: 20px;
	height: 2px;
	background: var(--zen-text);
	position: relative;
	margin: 4px 0;
}
.zen-burger span:before { top: -6px; }
.zen-burger span:after { top: 4px; }

.zen-nav {
	display: none;
	flex-direction: column;
	gap: 2px;
	background: var(--zen-bg-alt);
	border-top: 1px solid var(--zen-border);
}
.zen-nav.open { display: flex; }
.zen-nav a {
	display: block;
	padding: 12px 18px;
	color: var(--zen-text);
	border-bottom: 1px solid rgba(255,255,255,.04);
}
.zen-nav a.active, .zen-nav a:hover { color: var(--zen-gold); }

.zen-flags {
	display: flex;
	gap: 6px;
	padding: 10px 16px;
	flex-wrap: wrap;
	background: var(--zen-bg-alt);
}
.zen-flags img { width: 20px; border-radius: 2px; opacity: .8; }
.zen-flags a:hover img { opacity: 1; }

/* ---------------- Hero (Age-of-Menor-Struktur, 2026-09-21) ---------------- */
.zen-hero-inner-simple {
	position: relative;
	z-index: 2;
	max-width: var(--zen-maxw);
	margin: 0 auto;
	padding: 0 16px;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 14px;
}
.zen-hero-eyebrow {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 12px;
	font-weight: 700;
	color: var(--zen-gold);
}
.zen-hero-title {
	font-size: 42px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--zen-white);
	text-shadow: 0 4px 18px rgba(0,0,0,.6);
	margin: 0;
}
.zen-hero-sub { color: var(--zen-text); font-size: 15px; max-width: 520px; }
.zen-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.zen-hero-cta .zen-btn { width: auto; padding: 12px 28px; }

/* ---------------- CTA-Banner (Discord, Age-of-Menor-Struktur) ---------------- */
.zen-cta-banner {
	background: linear-gradient(135deg, var(--zen-card-alt), var(--zen-bg-alt));
	border-top: 1px solid var(--zen-border);
	border-bottom: 1px solid var(--zen-border);
	padding: 26px 0;
}
.zen-cta-inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	text-align: center;
	justify-content: space-between;
}
.zen-cta-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: var(--zen-text-mute); font-weight: 700; }
.zen-cta-inner h2 { margin: 4px 0 0; font-size: 22px; }
.zen-cta-inner .zen-btn { width: auto; padding: 12px 26px; flex: none; }

/* ---------------- Hauptlayout: Sidebar + Hauptspalte ---------------- */
.zen-main-layout { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.zen-sidebar { display: flex; flex-direction: column; gap: 18px; }
.zen-sidebar .zen-card { width: 100%; }

/* ---------------- Hero ---------------- */
.zen-hero {
	position: relative;
	/* Bildposition (überarbeitet 2026-09-21 für das ZENITRA-Rebranding):
	   header-bg.png (1920x920) enthält einen fest ins Bild gerenderten
	   "ZENITAR"-Schriftzug bei ca. 30% der Bildbreite. Die neue,
	   eigenständige HTML/CSS-Wortmarke "ZENITRA" liegt jetzt als
	   eigenes, sauberes Textelement über dem Bild (siehe
	   .zen-hero-title) - der Bildausschnitt wurde deshalb bewusst nach
	   rechts verschoben (Fokus auf die Charakter-Illustration statt auf
	   den alten, nicht mehr zutreffenden Schriftzug im Bild), damit
	   beide Wortmarken sich nicht optisch überlagern/widersprechen.
	   Ersetzt die vorherige 28%-Linksposition. */
	background: linear-gradient(180deg, rgba(11,10,10,.25) 0%, rgba(11,10,10,.35) 45%, var(--zen-bg) 100%), url('../img/theme/header-bg.png') 68% top / cover no-repeat, var(--zen-bg);
	padding: 56px 0 76px;
	min-height: 420px;
}
.zen-hero:before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11,10,10,.1) 0%, rgba(11,10,10,.5) 60%, var(--zen-bg) 100%);
}
.zen-hero-inner {
	position: relative;
	z-index: 2;
	max-width: var(--zen-maxw);
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
}
.zen-hero-spacer { min-height: 220px; width: 100%; }

/* Kompakte Hero-Variante für alle Unterseiten (Login/Register/Ranking/
   Download/...) - das große, cinematische Hero-Bild bleibt der
   Startseite vorbehalten (Abschnitt 5 der Redesign-Vorgabe: "erster
   sichtbarer Bereich soll beeindruckend sein" bezieht sich auf die
   Homepage), auf Unterseiten reicht ein schmaler, seitentitel-
   tragender Streifen im selben Bildstil. */
.zen-hero.zen-hero--compact {
	padding: 26px 0 34px;
	min-height: 0;
}
.zen-hero--compact .zen-hero-inner-simple { min-height: 0; gap: 6px; }
.zen-hero--compact .zen-hero-title { font-size: 26px; }
.zen-hero--compact .zen-hero-sub { display: none; }
.zen-hero--compact .zen-hero-cta { display: none; }
@media (min-width: 960px) {
	.zen-hero--compact .zen-hero-title { font-size: 32px; }
}

.zen-card {
	background: var(--zen-card);
	border: 1px solid var(--zen-border);
	border-radius: var(--zen-radius);
	box-shadow: var(--zen-shadow);
}

.zen-login-card {
	width: 100%;
	max-width: 380px;
	padding: 22px;
}
.zen-login-card h2 {
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--zen-gold);
	text-align: center;
}
.zen-login-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.zen-login-card input[type=text],
.zen-login-card input[type=password] {
	width: 100%;
	padding: 11px 14px;
	border-radius: 6px;
	border: 1px solid var(--zen-border-lt);
	background: var(--zen-bg-alt);
	color: var(--zen-text);
	font-size: 14px;
}
.zen-login-card input::placeholder { color: var(--zen-text-mute); }
.zen-btn {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 11px 16px;
	border-radius: 6px;
	border: none;
	background: linear-gradient(180deg, var(--zen-gold-lt), var(--zen-gold-dp));
	color: #241505;
	font-family: var(--zen-font-body);
	font-weight: 700;
	letter-spacing: .5px;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 13px;
	transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.zen-btn:hover { filter: brightness(1.12); color: #241505; box-shadow: 0 0 18px rgba(216,169,73,.35); transform: translateY(-1px); }
.zen-btn.gold { background: linear-gradient(180deg, var(--zen-gold-lt), var(--zen-gold-dp)); color: #241505; }
.zen-btn.outline { background: transparent; border: 1px solid var(--zen-border-lt); color: var(--zen-text); }
.zen-btn.outline:hover { color: var(--zen-gold-lt); border-color: var(--zen-gold-dp); box-shadow: none; transform: none; }
.zen-btn.danger { background: linear-gradient(180deg, var(--zen-danger), var(--zen-danger-dp)); color: #fff; }
.zen-btn.danger:hover { box-shadow: 0 0 18px rgba(200,90,90,.35); color: #fff; }

.zen-login-links {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	margin-top: 10px;
	color: var(--zen-text-dim);
	flex-wrap: wrap;
	gap: 6px;
}

.zen-userpanel ul.user-menu-list li a {
	display: block;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(255,255,255,.05);
	color: var(--zen-text);
	font-size: 13px;
}
.zen-userpanel ul.user-menu-list li a:hover { color: var(--zen-gold); }
.zen-userpanel ul.user-menu-list li a.logout { color: var(--zen-red-dark); }

/* ---------------- Section-Titel ---------------- */
.zen-section { padding: 34px 0; }
.zen-section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.zen-section-title h2 {
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-left: 4px solid var(--zen-red-dark);
	padding-left: 10px;
}
.zen-section-title a.more { font-size: 12px; color: var(--zen-text-dim); }

/* ---------------- Grid ---------------- */
.zen-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.zen-grid.cols-2 { grid-template-columns: 1fr; }
.zen-grid.cols-3 { grid-template-columns: 1fr; }
.zen-grid.cols-4 { grid-template-columns: 1fr; }

/* ---------------- Ranking-Tabelle ---------------- */
.zen-rank-card { padding: 0; overflow: hidden; }
.zen-rank-card .hd {
	padding: 14px 16px;
	background: var(--zen-card-alt);
	border-bottom: 1px solid var(--zen-border);
	font-weight: 700;
	color: var(--zen-gold);
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: .5px;
}
.zen-rank-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-bottom: 1px solid rgba(255,255,255,.04);
	font-size: 13px;
}
.zen-rank-row:last-child { border-bottom: none; }
.zen-rank-row .pos { width: 22px; color: var(--zen-text-dim); font-weight: 700; text-align: center; }
.zen-rank-row .pos img { width: 20px; }
.zen-rank-row .nm { flex: 1; color: var(--zen-text); }
.zen-rank-row .em { width: 60px; text-align: center; font-size: 11px; }
.zen-rank-row .lvl { width: 50px; text-align: right; color: var(--zen-text-dim); }
.emp-shinsoo { color: var(--zen-blue); }
.emp-chunjo { color: var(--zen-gold); }
.emp-jinno { color: var(--zen-red-dark); }

/* ---------------- Rangliste Tab-Umschalter (2026-09-21) ---------------- */
.zen-rank-tabs { display: flex; gap: 4px; padding: 0; background: var(--zen-card-alt); border-bottom: 1px solid var(--zen-border); }
.zen-rank-tab {
	flex: 1;
	text-align: center;
	padding: 14px 10px;
	cursor: pointer;
	color: var(--zen-text-dim);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .5px;
	border-bottom: 2px solid transparent;
}
.zen-rank-tab.active { color: var(--zen-gold); border-bottom-color: var(--zen-gold); }
.zen-rank-pane:empty:before { content: ''; }

/* ---------------- Trailer ---------------- */
.zen-trailer-card { padding: 10px; }
.zen-trailer-video { width: 100%; max-height: 480px; border-radius: 6px; background: #000; display: block; }

/* ---------------- Download-Sektion ---------------- */
.zen-download-card { padding: 22px 16px; text-align: center; }
.zen-download-name { font-size: 15px; font-weight: 800; color: var(--zen-gold); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
.zen-download-card .zen-btn { width: auto; padding: 10px 26px; }

/* ---------------- Forum ---------------- */
.zen-forum-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.zen-forum-cats a {
	padding: 7px 14px;
	border-radius: 20px;
	border: 1px solid var(--zen-border-lt);
	color: var(--zen-text-dim);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.zen-forum-cats a.active, .zen-forum-cats a:hover { color: var(--zen-gold); border-color: var(--zen-gold); }

.zen-forum-row { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.05); }
.zen-forum-row:last-child { border-bottom: none; }
.zen-forum-home .zen-forum-row:first-child { padding-top: 0; }
.zen-forum-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: 3px 8px;
	border-radius: 4px;
	margin-right: 8px;
	background: var(--zen-card-alt);
	color: var(--zen-text-dim);
	border: 1px solid var(--zen-border-lt);
}
.zen-forum-badge.cat-news  { color: var(--zen-blue); border-color: var(--zen-blue); }
.zen-forum-badge.cat-patch { color: var(--zen-gold); border-color: var(--zen-gold); }
.zen-forum-badge.cat-event { color: var(--zen-red-dark); border-color: var(--zen-red-dark); }
.zen-forum-badge.cat-shop  { color: var(--zen-green); border-color: var(--zen-green); }
.zen-forum-pin {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	color: #2a1400;
	background: var(--zen-gold-lt);
	padding: 3px 8px;
	border-radius: 4px;
	margin-right: 8px;
}
.zen-forum-title { display: block; font-size: 15px; font-weight: 800; color: var(--zen-text); margin: 6px 0 4px; }
.zen-forum-title:hover { color: var(--zen-gold); }
.zen-forum-meta { font-size: 11px; color: var(--zen-text-dim); }
.zen-forum-meta i { margin-right: 2px; }

.zen-forum-back { display: inline-block; margin-bottom: 12px; font-size: 12px; color: var(--zen-text-dim); }
.zen-forum-back:hover { color: var(--zen-gold); }
.zen-forum-single { padding-top: 4px; }
.zen-forum-single .zen-card { padding: 20px; }
.zen-forum-single-title { font-size: 22px; margin: 10px 0; color: var(--zen-gold); }
.zen-forum-content { margin-top: 14px; color: var(--zen-text); font-size: 14px; line-height: 1.7; white-space: pre-line; }

.zen-forum-comments-title { font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--zen-gold); font-size: 13px; margin-bottom: 12px; }
.zen-forum-comment { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.zen-forum-comment:last-of-type { border-bottom: none; }
.zen-forum-comment-hd { display: flex; align-items: center; gap: 10px; font-size: 11px; margin-bottom: 4px; }
.zen-forum-comment-author { color: var(--zen-gold); font-weight: 700; }
.zen-forum-comment-date { color: var(--zen-text-mute); }
.zen-forum-comment-delete { margin-left: auto; color: var(--zen-text-mute); text-decoration: underline; }
.zen-forum-comment-body { font-size: 13px; color: var(--zen-text); }

/* ---------------- Stat-Kacheln ---------------- */
.zen-stats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.zen-stat-box {
	padding: 14px;
	text-align: center;
}
.zen-stat-box .val { font-size: 22px; font-weight: 800; color: var(--zen-gold); }
.zen-stat-box .lbl { font-size: 11px; color: var(--zen-text-dim); text-transform: uppercase; margin-top: 4px; }

/* ---------------- Server-Status-Widget ---------------- */
.zen-status-card { padding: 0; overflow: hidden; }
.zen-status-card .hd { display: flex; align-items: center; gap: 8px; }
.zen-status-body { padding: 14px 16px; }
.zen-status-group {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--zen-text-mute);
	margin: 12px 0 6px;
}
.zen-status-group:first-child { margin-top: 0; }
.zen-status-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-size: 13px;
	color: var(--zen-text);
}
.zen-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
	display: inline-block;
	box-shadow: 0 0 6px rgba(0,0,0,.4);
}
.zen-status-dot.on { background: var(--zen-green); }
.zen-status-dot.off { background: var(--zen-red-dark); }
.zen-status-footer {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--zen-border);
	font-size: 12px;
	color: var(--zen-text-dim);
	text-align: center;
}

/* ---------------- Events/Countdown ---------------- */
.zen-event-card { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.zen-event-title { font-size: 15px; font-weight: 800; color: var(--zen-gold); }
.zen-event-desc { font-size: 12px; color: var(--zen-text); }
.zen-event-range { font-size: 11px; color: var(--zen-text-dim); }
.zen-event-countdown { font-size: 14px; font-weight: 700; color: var(--zen-red); letter-spacing: 0.5px; margin-top: 4px; }
.zen-event-delete { align-self: flex-start; margin-top: 6px; font-size: 11px; color: var(--zen-text-mute); text-decoration: underline; }

/* ---------------- News ---------------- */
.zen-news-card { padding: 16px; }
.zen-news-card + .zen-news-card { margin-top: 14px; }
.zen-news-card h3 { font-size: 16px; color: var(--zen-gold); margin-bottom: 6px; }
.zen-news-meta { font-size: 11px; color: var(--zen-text-dim); margin-bottom: 10px; }
.zen-news-card .body { color: var(--zen-text); font-size: 13px; }

/* Kompatibilität: bestehende pages/*.php-Inhalte (news.php, referrals.php, players.php ...)
   bleiben funktional unverändert - dieser Wrapper gibt ihnen nur einen passenden Rahmen. */
.zen-legacy-wrap { padding: 16px; }
.zen-legacy-wrap table { color: var(--zen-text); font-size: 13px; }
.zen-legacy-wrap .btn, .zen-legacy-wrap button[type=submit] {
	background: var(--zen-red-dark); color: #fff; border: none; border-radius: 6px; padding: 8px 14px;
}
.zen-legacy-wrap a { color: var(--zen-gold); }
.zen-legacy-wrap input, .zen-legacy-wrap select {
	background: var(--zen-bg-alt); border: 1px solid var(--zen-border-lt); color: var(--zen-text); border-radius: 6px; padding: 8px;
}

/* ---------------- Community/Referral ---------------- */
.zen-community { padding: 20px; text-align: center; }
.zen-community p { color: var(--zen-text-dim); font-size: 13px; }

/* ---------------- Footer ---------------- */
.zen-footer {
	background: url('../img/theme/footer-bg.png') center top / cover no-repeat, var(--zen-bg-alt);
	border-top: 1px solid var(--zen-border);
	padding: 30px 0 20px;
	margin-top: 20px;
}
.zen-footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin-bottom: 18px;
}
.zen-footer-nav a { font-size: 12px; text-transform: uppercase; color: var(--zen-text-dim); letter-spacing: .5px; }
.zen-footer-nav a:hover { color: var(--zen-gold); }
.zen-copy { text-align: center; font-size: 12px; color: var(--zen-text-mute); }
.zen-copy b { color: var(--zen-text-dim); }

/* ============================================================
   Desktop (>= 960px): Mehrspaltiges Layout
   ============================================================ */
@media (min-width: 960px) {
	.zen-burger { display: none; }
	.zen-nav {
		display: flex !important;
		flex-direction: row;
		background: none;
		border-top: none;
		gap: 22px;
	}
	.zen-nav a { padding: 6px 0; border-bottom: none; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }

	.zen-hero-inner { flex-direction: row; align-items: flex-end; justify-content: flex-end; min-height: 420px; padding-bottom: 10px; }
	.zen-hero-spacer { display: none; }
	.zen-hero { background-position: 68% top, 68% top; }

	.zen-grid.cols-2 { grid-template-columns: 1fr 1fr; }
	.zen-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
	.zen-grid.cols-4 { grid-template-columns: 1fr 1fr; }
	.zen-stats-grid { grid-template-columns: repeat(3,1fr); }

	.zen-hero-title { font-size: 56px; }
	.zen-cta-inner { flex-direction: row; text-align: left; }
	.zen-main-layout {
		/* Sidebar (Login/Events/Rangliste/Status/Statistik) links, feste
		   Breite wie die bestehende 300px-Sidebar-Konvention; Hauptspalte
		   (Forum & Updates bzw. Legacy-Seiteninhalt) rechts, flexibel. */
		grid-template-columns: 300px 1fr;
	}

	.zen-home-layout {
		/* Fix (2026-09-21): index.php's "NEWS + COMMUNITY" section (comment
		   there literally says "news column + sidebar column") only ever
		   renders 2 children (News div, Community/Referral div), but this
		   rule defined a 3-column track (300px 1fr 300px). CSS Grid then
		   auto-placed child 1 into the first 300px track and child 2 into
		   the middle 1fr track, leaving the whole third 300px track empty:
		   on desktop this squeezed the News box into a narrow 300px column
		   and stretched the Community/Referral box to ~600px, with a dead
		   empty strip on the right - the "auf dem PC ebenso beschissen"
		   layout bug. Reduced to the 2 columns the markup actually has:
		   flexible News column + the existing 300px sidebar width. */
		display: grid;
		grid-template-columns: 1fr 300px;
		gap: 22px;
		align-items: start;
	}
}

@media (min-width: 1200px) {
	.zen-stats-grid { grid-template-columns: repeat(3,1fr); }
	.zen-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
}

/* ============================================================
   ZENITRA – Legacy-Seiteninhalte (Login/Register/Ranking/Download/
   News-Detail/Account/Referrals/Redeem/Gilden/...) (2026-09-21)
   ------------------------------------------------------------
   Diese Seiten werden weiterhin unverändert von den bestehenden
   PHP-Dateien (pages/*.php, include/classes/players.php dataview()
   usw.) mit ihrer ursprünglichen Bootstrap-Markup-Struktur erzeugt -
   die Backend-/Formular-/Paginierungslogik bleibt zu 100% wie sie
   ist (CLAUDE.md: bestehende Backendlogik nicht neu erfinden).
   Diese Regeln überschreiben ausschließlich die Optik, gescoped auf
   .zen-legacy-wrap, damit nichts außerhalb dieses Bereichs (Forum,
   Sidebar, Hero) beeinflusst wird.
   ============================================================ */

.zen-legacy-wrap { padding: 24px; }
.zen-legacy-wrap h2 { font-family: var(--zen-font-display); color: var(--zen-gold-lt); }

/* Seiten-Kopf ("page-hd" - bisher ungestylt, da style.min.css nicht
   mehr geladen wird) */
.zen-legacy-wrap .page-hd {
	background-size: cover;
	background-position: center;
	border-radius: var(--zen-radius);
	padding: 22px 20px;
	margin: -24px -24px 22px;
	border-bottom: 1px solid var(--zen-border);
	position: relative;
}
.zen-legacy-wrap .page-hd:before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(11,10,10,.55), rgba(11,10,10,.85));
	border-radius: var(--zen-radius) var(--zen-radius) 0 0;
}
.zen-legacy-wrap .page-hd .bd-c { position: relative; z-index: 1; }
.zen-legacy-wrap .page-hd h2 {
	margin: 0;
	color: var(--zen-white);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 22px;
}
.zen-legacy-wrap .padding-container { padding-top: 4px; }

/* Formulare (Login/Register/Passwort/Suche...) */
.zen-legacy-wrap .form-control,
.zen-legacy-wrap input[type=text],
.zen-legacy-wrap input[type=password],
.zen-legacy-wrap input[type=email],
.zen-legacy-wrap textarea,
.zen-legacy-wrap select {
	width: 100%;
	padding: 11px 14px;
	border-radius: 6px;
	border: 1px solid var(--zen-border-lt);
	background: var(--zen-bg-alt);
	color: var(--zen-text);
	font-family: var(--zen-font-body);
	font-size: 14px;
	margin-bottom: 4px;
}
.zen-legacy-wrap .form-control:focus,
.zen-legacy-wrap input:focus,
.zen-legacy-wrap select:focus {
	outline: none;
	border-color: var(--zen-gold);
	box-shadow: 0 0 0 2px rgba(216,169,73,.18);
}
.zen-legacy-wrap input::placeholder { color: var(--zen-text-mute); }
.zen-legacy-wrap table.table { margin-bottom: 0; }
.zen-legacy-wrap td, .zen-legacy-wrap th { border-color: var(--zen-border) !important; vertical-align: middle; }
.zen-legacy-wrap table td:first-child:not(.level-table):not(.exp-table) { color: var(--zen-text-dim); }

/* Buttons (Bootstrap .btn-* auf das ZENITRA-Gold-System gemappt;
   .btn-success/.btn-danger bleiben als echte Statusfarben - Login-
   Submit, Registrieren-Submit etc. werden Gold, da sie die primäre
   Handlung der jeweiligen Seite sind, keine Warn-/Fehlerfunktion) */
.zen-legacy-wrap .btn {
	font-family: var(--zen-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-size: 13px;
	border-radius: 6px;
	border: none;
	padding: 11px 18px;
	transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
.zen-legacy-wrap .btn:hover { transform: translateY(-1px); }
.zen-legacy-wrap .btn-success,
.zen-legacy-wrap .btn-primary,
.zen-legacy-wrap .btn-danger.btn-lg,
.zen-legacy-wrap input[type=submit] {
	background: linear-gradient(180deg, var(--zen-gold-lt), var(--zen-gold-dp));
	color: #241505;
}
.zen-legacy-wrap .btn-success:hover,
.zen-legacy-wrap .btn-primary:hover,
.zen-legacy-wrap input[type=submit]:hover {
	filter: brightness(1.1);
	color: #241505;
	box-shadow: 0 0 16px rgba(216,169,73,.3);
}
.zen-legacy-wrap .btn-sm { padding: 6px 12px; font-size: 11px; }
.zen-legacy-wrap .btn-block { width: 100%; display: block; }

/* Alerts / Benachrichtigungen */
.zen-legacy-wrap .alert {
	border-radius: 6px;
	border: 1px solid var(--zen-border-lt);
	background: var(--zen-card-alt);
	color: var(--zen-text);
	padding: 14px 16px;
	margin-bottom: 16px;
}
.zen-legacy-wrap .alert-danger { border-color: var(--zen-danger); background: rgba(200,90,90,.12); color: #f0c9c9; }
.zen-legacy-wrap .alert-info { border-color: var(--zen-info); background: rgba(93,143,176,.12); color: #cfe2ee; }
.zen-legacy-wrap .alert-success { border-color: var(--zen-success); background: rgba(111,174,90,.12); color: #d7ecce; }
.zen-legacy-wrap .alert .close { color: inherit; opacity: .7; background: none; border: none; cursor: pointer; float: right; font-size: 18px; line-height: 1; }
.zen-legacy-wrap .text-danger { color: var(--zen-danger) !important; font-size: 12px; }
.zen-legacy-wrap .notification { border: 1px solid var(--zen-border-lt); background: var(--zen-card-alt); border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; color: var(--zen-text); }
.zen-legacy-wrap .notification_blue { border-color: var(--zen-info); }

/* Tabellen (Rangliste, Download, Gilden, Spieler-Suche...) */
.zen-legacy-wrap .table { color: var(--zen-text); }
.zen-legacy-wrap .table thead th {
	background: var(--zen-bg-alt);
	color: var(--zen-gold);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .5px;
	border-bottom: 1px solid var(--zen-border-lt) !important;
	padding: 10px 12px;
}
.zen-legacy-wrap .table td { padding: 10px 12px; }
.zen-legacy-wrap .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02); }
.zen-legacy-wrap .table-hover tbody tr:hover { background: rgba(216,169,73,.06); }

/* Top-3-Hervorhebung in Ranglisten (Spieler/Gilden) - rein über
   Zeilenreihenfolge (die Query sortiert bereits nach Rang), keine
   Änderung an include/classes/players.php nötig */
.zen-legacy-wrap .rank tbody tr:nth-child(1) td,
.zen-legacy-wrap .rank tbody tr:nth-child(1) th,
.zen-legacy-wrap table tbody tr:nth-child(1) td,
.zen-legacy-wrap table tbody tr:nth-child(1) th {
	background: linear-gradient(90deg, rgba(216,169,73,.16), rgba(216,169,73,.03));
}
.zen-legacy-wrap table tbody tr:nth-child(1) th { color: var(--zen-gold-lt); font-weight: 800; }
.zen-legacy-wrap table tbody tr:nth-child(2) th,
.zen-legacy-wrap table tbody tr:nth-child(3) th { color: var(--zen-gold); font-weight: 700; }

/* Ranking-Umschalter Spieler/Gilden (players.php/guilds.php - eigenes
   "switch/.option"-Markup, unabhängig vom Homepage-Tab-Switcher) */
.zen-legacy-wrap .heading-main {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 10px;
	margin: -24px -24px 20px; padding: 18px 24px;
	border-bottom: 1px solid var(--zen-border);
	background: var(--zen-bg-alt);
}
.zen-legacy-wrap .heading-main strong { font-family: var(--zen-font-display); color: var(--zen-gold-lt); font-size: 18px; text-transform: uppercase; letter-spacing: 1px; }
.zen-legacy-wrap .switch { display: flex; gap: 8px; }
.zen-legacy-wrap .switch .option {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px; border-radius: 6px;
	border: 1px solid var(--zen-border-lt);
	color: var(--zen-text-dim); font-size: 12px; text-transform: uppercase;
}
.zen-legacy-wrap .switch .option img { width: 16px; height: 16px; }
.zen-legacy-wrap .switch .option.active { border-color: var(--zen-gold); color: var(--zen-gold-lt); background: rgba(216,169,73,.08); }

/* Paginierung (include/classes/players.php->paginglink()) */
.zen-legacy-wrap .pagination { display: flex; justify-content: center; margin-top: 20px; }
.zen-legacy-wrap .pagination .buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.zen-legacy-wrap .pagination a,
.zen-legacy-wrap .pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 34px; height: 34px; padding: 0 8px;
	border-radius: 6px; border: 1px solid var(--zen-border-lt);
	color: var(--zen-text-dim); font-size: 13px;
}
.zen-legacy-wrap .pagination a:hover { border-color: var(--zen-gold); color: var(--zen-gold-lt); }
.zen-legacy-wrap .pagination .current,
.zen-legacy-wrap .pagination a.current { border-color: var(--zen-gold); background: rgba(216,169,73,.12); color: var(--zen-gold-lt); }

/* Suchfeld-/Filter-Boxen (jumbotron auf players.php) */
.zen-legacy-wrap .jumbotron {
	background: var(--zen-bg-alt);
	border: 1px solid var(--zen-border);
	border-radius: var(--zen-radius);
	margin-bottom: 18px;
}

/* Grid-/Spaltenabstände (Bootstrap .row/.col-* bleiben funktional -
   nur vertikaler Rhythmus etwas ruhiger gestellt) */
.zen-legacy-wrap .row { margin-left: -8px; margin-right: -8px; }
.zen-legacy-wrap .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }

/* reCAPTCHA-Container - dunkles Theme, etwas Abstand */
.zen-legacy-wrap .g-recaptcha,
.zen-legacy-wrap .recaptch { margin: 10px 0; }

/* ============================================================
   Kleine, gezielte Animationen (Abschnitt 17 der Redesign-Vorgabe:
   dezent, performant, nicht alles gleichzeitig animierend)
   ============================================================ */
.zen-card, .zen-forum-row, .zen-download-card { transition: border-color .15s ease, box-shadow .15s ease; }
.zen-forum-row:hover, .zen-download-card:hover { border-color: var(--zen-gold-dp); }

.zen-hero-title {
	animation: zen-title-in .7s ease both;
}
@keyframes zen-title-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.zen-hero-title { animation: none; }
	.zen-btn, .zen-card, .zen-forum-row, .zen-download-card { transition: none; }
}

/* Utility */
.zen-text-dim { color: var(--zen-text-dim); }