*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}
h1, h2, h3 {
  font-family: 'Rajdhani', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0 0 .5em;
  color: var(--text);
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
p { margin: 0 0 .75em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; display: block; }

.container { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 16px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack-sm { display: flex; flex-direction: column; gap: 5px; }
.row { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-between { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.grow { flex: 1 1 auto; }
.center { display: flex; align-items: center; justify-content: center; }
.text-dim { color: var(--text-dim); }
.text-faint { color: var(--text-faint); }
.text-danger { color: var(--danger); }
.hidden { display: none !important; }

::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Dezenter Scrollbalken (Seite + interne Scroll-Container) ----
   Ersetzt den dauerhaften grauen System-Balken durch einen dünnen, halb-
   transparenten Strich in Textfarbe -- passt sich Dark/Light automatisch an
   und ist unauffällig, bis tatsächlich gescrollt wird. Einzelne Container
   (z.B. die Karte in hive.css) können das mit einer spezifischeren Regel
   gezielt wieder ausblenden, wenn sie ausschließlich per Ziehen bedient werden. */
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text) 38%, transparent); }

[dir="rtl"] { text-align: right; }