/* ========== 1. Design-Tokens (Dark = Standard) ========== */
:root {
  color-scheme: dark;
  --bg: #000;          --surface: #222;     --border: #333;     --text: #ddd;
  --link: #ddd;        --link-hover: #fff;  --muted: #aaa;
  --stat-from: #2c2c2c; --stat-to: #4a4a4a; --stat-border: #333;
  --table-bg: #444;    --table-alt: #555;   --table-head: #333; --table-border: #666;
  --btn-bg: #555;      --btn-hover: #6b6b6b;
  --out: #6fcf73;      --in: #ff7b7b;
}
/* Hell: <html data-theme="light"> */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fff;          --surface: #fff;     --border: #ddd;     --text: #222;
  --link: #333;        --link-hover: #000;  --muted: #666;
  --stat-from: #fff;   --stat-to: #eee;     --stat-border: #ededed;
  --table-bg: #fff;    --table-alt: #f2f2f2; --table-head: #efefef; --table-border: #ccc;
  --btn-bg: #555;      --btn-hover: #333;
  --out: #347235;      --in: #9f000f;
}

/* ========== 2. Basis ========== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  padding: 20px 10px 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--link); font-weight: 700; text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
h2 { margin: 0 0 .5rem; font-size: 1.15em; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.small { font-size: .8em; }

/* ========== 3. Seitenlayout ========== */
.page {
  width: min(90%, 100rem);
  margin: 0 auto 20px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.site-header h1 {
  margin: .5rem 0;
  padding-bottom: .4rem;
  font-size: 1.6em;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.intro, .donation { text-align: center; font-size: .9em; font-weight: 700; }

/* Grid statt Pure: Zeilen wachsen mit dem Inhalt, nichts kann überlappen */
.node-layout { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 48em) { .node-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .node-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.node-side, .node-main { min-width: 0; }

/* ========== 4. Spendenblock & Links ========== */
.donation { overflow-wrap: anywhere; }
.qr { display: block; margin: 0 auto 1rem; }
.node-links h2 { text-align: center; }
.node-links ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem 1.25rem; margin: 0; padding: 10px; list-style: none;
}
.node-links img { display: block; }

/* ========== 5. Charts & Statistiken ========== */
.charts {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  margin: 0 0 1rem;
}
.chart { width: 100%; height: 16rem; }   /* feste Höhe statt Prozent */

.stats { margin: 0 0 1rem; }
.stat {
  display: flex; flex-wrap: wrap; gap: .25rem .5rem;
  margin: 0 0 .6rem; padding: 5px;
  font-size: .9em;
  background: linear-gradient(to bottom, var(--stat-from), var(--stat-to));
  border: 1px solid var(--stat-border);
  border-radius: 5px;
}
.stat dt { font-weight: 700; }
.stat dd { margin: 0; overflow-wrap: anywhere; }

/* ========== 6. Peers-Tabelle ========== */
.peers { margin-top: 1.5rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.section-head h2 { margin: 0; }
.link-button {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--link);
}
.link-button:hover { color: var(--link-hover); text-decoration: underline; }

.table-wrap { overflow-x: auto; }
.flag { display: inline-block; vertical-align: middle; }   /* Größe/Sprite: flags.css */

table {
  margin: 0 auto;
  border-collapse: collapse;
  background: var(--table-bg);
  border: 1px solid var(--table-border);
}
th, td {
  padding: 10px;
  font-size: .9em;
  text-align: left;
  border-right: 1px solid var(--table-border);
}
th { background: var(--table-head); border-bottom: 1px solid var(--table-border); }
td { border-bottom: 1px solid var(--table-border); }
th:last-child, td:last-child { border-right: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(odd) td { background: var(--table-alt); }
.dir { text-align: center; }
.dir-out { color: var(--out); }
.dir-in  { color: var(--in); }

/* Mobil: Zeilen als Karten, Beschriftung aus data-label */
@media (max-width: 760px) {
  table, thead, tbody, tr, th, td { display: block; }
  table { width: 100%; border: 0; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tr { margin-bottom: .75rem; border: 1px solid var(--table-border); }
  td {
    position: relative; min-height: 2.2em;
    padding: .5rem .75rem .5rem 50%;
    border: 0; border-bottom: 1px solid var(--table-border);
    text-align: left;
  }
  td::before {
    content: attr(data-label);
    position: absolute; top: .5rem; left: .75rem;
    width: 45%; padding-right: .5rem;
    font-weight: 700; white-space: nowrap;
  }
}

/* ========== 7. Hinweise (von PHP genutzt) ========== */
div.red, p.cache {
  padding: 10px; color: #600; text-align: center;
  background: #ffe2e1; border: 1px solid #600;
}

/* ========== 8. Footer ========== */
#footer { margin-top: 1rem; padding-top: 7px; border-top: 1px solid var(--border); }
#footer p { margin: .25rem 0; color: var(--muted); text-align: center; font-size: .8em; font-style: italic; }
#footer a { color: var(--muted); }
#footer a:hover { color: var(--link-hover); text-decoration: underline; }

/* ========== 9. Back-to-top ========== */
.back-to-top {
  position: fixed; right: 30px; bottom: 20px; z-index: 99;
  padding: 15px; border: 0; border-radius: 4px;
  font-size: 14px; color: #fff; background: var(--btn-bg); cursor: pointer;
}
.back-to-top:hover { background: var(--btn-hover); }