/* ================================================================
   actualskit Design-System · Basis
   Reset, Schrift, Links, Fokus, Hilfsklassen, reduzierte Bewegung. Braucht tokens.css.
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: var(--fw-regular) var(--fs-base) / var(--lh) var(--font);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0 0 var(--sp-2); }
ul, ol { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); }

/* ---- Überschriften ---- */
h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

/* ---- Links: im Fließtext Akzent, sonst über eigene Klassen ---- */
a { color: var(--accent); text-decoration: none; transition: color var(--dur-1); }
a:hover { color: var(--text); }

/* ---- Fokus nur für Tastatur sichtbar ---- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--r-sm); }

::selection { background: var(--accent-soft); color: var(--text); }

/* ---- Scrollbalken: schmal und unauffällig ---- */
* { scrollbar-width: thin; scrollbar-color: var(--surface-4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: var(--r-full); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Code ---- */
code, pre, kbd, .mono { font-family: var(--font-mono); font-size: .92em; }
code { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 0 5px; }
kbd {
  display: inline-block; min-width: 20px; padding: 0 5px; text-align: center; font-size: 11px; line-height: 18px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-xs); color: var(--muted);
}

/* ---- Icons (Tabler-Webfont) ---- */
.ti { font-size: 1.15em; line-height: 1; vertical-align: -.14em; }

/* ---- Hilfsklassen ---- */
.hidden { display: none !important; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: var(--fs-xs); }
.text-red { color: var(--red); }
.text-green { color: var(--green); }
.text-orange { color: var(--orange); }
.text-accent { color: var(--accent); }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Bewegung: bei „Bewegung reduzieren“ alles praktisch sofort ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}