/* Volksseiten (/de/voelker/…, /en/civs/…), erzeugt von scripts/seo-civ-pages.mjs.
   Eigenständig (ohne App-Bundle): gleiche Farben, Schrift und Hintergrund wie die Startseite. */
@font-face { font-family: "Cinzel"; src: url("/fonts/cinzel-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --bg: #080c14; --surface: linear-gradient(180deg, #161d2f, #0b0f1a); --border: rgba(255, 255, 255, 0.08);
  --text: #f1f5f9; --muted: #8b98ad; --faint: #5b6779; --gold: #ffb900; --gold-text: #ffc933;
  --win: #22c55e; --loss: #ff4d4d; --frame: rgba(217, 154, 30, 0.38); --hover: rgba(255, 255, 255, 0.045);
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f1f5f9; --surface: linear-gradient(180deg, #ffffff, #fffcf6); --border: rgba(90, 70, 40, 0.13);
    --text: #1a1510; --muted: #6f6458; --faint: #857a6c; --gold-text: #b86d00; --win: #16a34a; --loss: #e5322d;
    --frame: rgba(196, 128, 10, 0.4); --hover: rgba(90, 70, 40, 0.05); }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; color: var(--text); background: var(--bg);
  background-image: linear-gradient(rgba(8, 12, 20, 0.62), rgba(13, 20, 32, 0.78)), url("/img/Background_dark_1.jpg");
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: light) { body { background-image: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 35%, #f8fafc 100%); } }
a { color: var(--gold-text); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; }

.wrap { max-width: 920px; margin: 0 auto; padding: 18px 16px 40px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.top .logo img { width: 220px; height: auto; }
.top nav { display: flex; gap: 6px; font-size: 14px; font-weight: 700; }
.top nav a { color: var(--muted); padding: 6px 10px; border-radius: 999px; }
.top nav a:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.crumbs { margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs span { color: var(--faint); margin: 0 6px; }

.card {
  margin-top: 16px; padding: 22px 24px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--frame); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
@media (max-width: 560px) { .card { padding: 18px 16px; border-radius: 18px; } }
h1, h2 { font-family: "Cinzel", Georgia, serif; font-weight: 800; letter-spacing: 0.01em; line-height: 1.2; }
h2 { font-size: 22px; margin-bottom: 10px; }
.card p + p { margin-top: 10px; }
.lead { font-size: 17px; }

/* Kopf */
.hero { display: flex; gap: 20px; align-items: center; }
.hero img { width: 104px; height: 104px; border-radius: 18px; flex-shrink: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.hero h1 { font-size: clamp(30px, 5vw, 42px); }
.hero .sub { margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--hover); border: 1px solid var(--border); color: var(--text); }
@media (max-width: 560px) { .hero { flex-direction: column; align-items: flex-start; gap: 12px; } .hero img { width: 84px; height: 84px; } }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .stat b { font-size: 22px; } }
.stat { padding: 12px 14px; border-radius: 14px; background: var(--hover); border: 1px solid var(--border); }
.stat b { display: block; font-size: 26px; font-weight: 900; color: var(--gold-text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.note { margin-top: 8px; font-size: 12.5px; color: var(--faint); font-weight: 600; }

/* Armee */
.ages { display: grid; gap: 12px; }
.age { display: grid; grid-template-columns: 116px 1fr; gap: 12px; align-items: center; }
.age > b { font-size: 14px; font-weight: 900; color: var(--muted); }
.units { display: flex; flex-wrap: wrap; gap: 8px; }
.unit { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 12px; background: var(--hover); border: 1px solid var(--border); font-size: 14px; font-weight: 700; }
.unit img { width: 34px; height: 34px; border-radius: 8px; }
@media (max-width: 560px) { .age { grid-template-columns: 1fr; gap: 6px; } }

.beat { border-color: color-mix(in srgb, var(--win) 45%, transparent); }
.beat h2 { color: var(--win); }

/* Builds */
.builds { list-style: none; display: grid; gap: 8px; }
.builds li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: var(--hover); border: 1px solid var(--border); }
.builds .t { font-weight: 800; flex: 1 1 260px; }
.builds .m { font-size: 13px; font-weight: 700; color: var(--muted); }
.builds .m em { font-style: normal; color: var(--gold-text); }
.more-builds { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }

.cta { text-align: center; }
.cta p { color: var(--muted); font-weight: 600; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 14px;
  height: 52px; padding: 0 26px; border-radius: 15px; font-size: 17px; font-weight: 900; color: #1a1206;
  background: linear-gradient(180deg, #ffc933, #ffb000); box-shadow: 0 6px 18px rgba(255, 185, 0, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.14);
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }

/* Übersicht aller Völker */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.civ { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--hover); border: 1px solid var(--border); color: var(--text); font-weight: 800; }
.civ:hover { border-color: var(--frame); text-decoration: none; }
.civ img { width: 40px; height: 40px; border-radius: 10px; }
.civ small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.tier { font-weight: 900; color: var(--gold-text); }

footer { margin-top: 28px; text-align: center; font-size: 13px; font-weight: 600; color: var(--faint); }
footer a { color: var(--muted); }