/* ================================================================
   VoteMap Design Tokens & Base Styles
   Pastell, ruhig, an UN-Blau angelehnt, runde Ecken, freundlich
   ================================================================ */
:root {
  /* Flaeche & Text */
  --bg:        #F5F8FB;
  --surface:   #FFFFFF;
  --ink:       #2E4157;
  --muted:     #5F7285;
  --faint:     #93A5B7;
  --line:      #E4EBF2;

  /* UN-Blau, pastellisiert */
  --un:        #3C7FC0;
  --un-deep:   #2B5F93;
  --un-soft:   #DCEBF8;
  --un-softer: #EDF5FC;

  /* Vote-Farbsystem: Pastellflaeche + Ink-Variante (>= 4.5:1 Kontrast) */
  --yes-bg:    #A9D8C3;  --yes-ink:  #175C42;
  --no-bg:     #F2BFC6;  --no-ink:   #8F3549;
  --abst-bg:   #F3D9A4;  --abst-ink: #77560F;
  --nv-bg:     #DCE3EB;  --nv-ink:   #52647A;
  --cons-bg:   #DFF0E5;  --cons-ink: #2C6E4F;

  /* Geometrie */
  --r-card:  16px;
  --r-ctl:   12px;
  --r-pill:  999px;
  --shadow:       0 1px 2px rgba(46,65,87,.05), 0 6px 20px rgba(46,65,87,.06);
  --shadow-hover: 0 2px 4px rgba(46,65,87,.06), 0 12px 32px rgba(46,65,87,.10);

  --font-display: 'Sora', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Nunito Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0 auto;
  max-width: 880px;
  padding: 0 20px 64px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
}
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--un-soft); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* nur fuer Screenreader */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Kopfbereich ---------- */
.topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 26px 0 6px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand:hover h1 { color: var(--un-deep); }
.brand:hover .brand-mark { background: linear-gradient(145deg, #CFE5F7, #BBD8F2); }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(145deg, var(--un-soft), #CBE2F6);
  display: grid; place-items: center; color: var(--un-deep);
}
.brand-mark svg { display: block; }
.brand h1 {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  margin: 0; letter-spacing: -0.01em;
}
.brand small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.topbar .about { color: var(--muted); font-size: 13px; text-decoration: none; white-space: nowrap; }
.topbar .about:hover { color: var(--un); }
.topbar .about[aria-current="page"] { color: var(--un-deep); font-weight: 700; }

/* ---------- Hauptnavigation (Resolutionen / Laender / Ranglisten) ---------- */
.mainnav { display: flex; gap: 4px; margin: 14px 0 4px; border-bottom: 1px solid var(--line); }
.mainnav a {
  text-decoration: none; color: var(--muted); font-weight: 700; font-size: 14px;
  padding: 8px 14px 10px; border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.mainnav a:hover { color: var(--un-deep); }
.mainnav a[aria-current="page"] { color: var(--un-deep); border-bottom-color: var(--un); }

/* ---------- Monospace-Chip fuer UN-Dokumentensymbole ---------- */
.symbol {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  background: var(--un-softer); color: var(--un-deep);
  padding: 2px 8px; border-radius: 7px;
}

/* ---------- Konsens-Band ---------- */
.consensus {
  display: flex; align-items: center; gap: 10px;
  background: var(--cons-bg); color: var(--cons-ink);
  border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: 13.5px;
}
.consensus svg { flex: none; }

/* ---------- Zustaende ---------- */
.loading-state { text-align: center; padding: 48px 20px; color: var(--faint); }
.error-message {
  background: var(--no-bg); color: var(--no-ink);
  padding: 18px 20px; border-radius: var(--r-ctl);
  text-align: center; margin: 20px 0; font-weight: 600;
}

.footer { text-align: center; color: var(--faint); font-size: 13px; margin-top: 36px; }
.footer a { color: var(--muted); }
.footer + .footer { margin-top: 8px; }
.footer.attribution { font-size: 12px; line-height: 1.6; max-width: 720px; margin-left: auto; margin-right: auto; }

/* ---------- Mobile ---------- */
body { overflow-x: clip; }
@media (max-width: 640px) {
  body { padding: 0 18px 48px; }
  .topbar { padding: 20px 0 4px; }
  .topbar { align-items: center; gap: 12px; }
  .topbar .about { font-size: 12.5px; white-space: normal; text-align: right; max-width: 70px; line-height: 1.3; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .brand h1 { font-size: 19px; }
  .brand small { font-size: 11.5px; line-height: 1.35; }
  .mainnav { margin-top: 10px; }
  /* sechs Punkte (Compare ist hier ausgeblendet): enger, und notfalls seitlich scrollbar statt abgeschnitten */
  .mainnav { overflow-x: auto; scrollbar-width: none; }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { padding: 8px 8px 9px; font-size: 13px; white-space: nowrap; }
}

/* ---------- Nur am Computer (Laendervergleich, Nutzerentscheidung) ---------- */
.mobile-only { display: none; }
@media (max-width: 640px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block; }
}