/* ============================================================
   02 · BASE — Reset + Grundlagen. Nutzt nur Tokens.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }

main { flex: 1; }

/* Layout-Helfer */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }

/* Vertikaler Rhythmus (statt pro Element hardcoden) */
.stack-top   { margin-top: var(--sp-2xl); }
.stack-top-s { margin-top: var(--sp-m); }

/* Abgesetztes Band */
.bg-subtle { background: var(--color-bg-subtle); }

/* Zugänglichkeit: Skip-Link + sichtbarer Fokus */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-accent); color: var(--color-on-accent);
  padding: var(--sp-s) var(--sp-m); border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Lesbare Textspalte (Impressum/Datenschutz/Projekt-Beschreibung) */
.prose { max-width: 70ch; }
.prose h1 { font-size: var(--text-2xl); margin-bottom: var(--sp-l); }
.prose h2 { font-size: var(--text-xl); margin: var(--sp-2xl) 0 var(--sp-s); }
.prose p  { margin-bottom: var(--sp-m); color: var(--color-text-muted); }
.prose a  { color: var(--color-accent); }
.prose a:hover { text-decoration: underline; }
.mini-head { font-size: var(--text-lg); }

/* Section-Kopf (wiederverwendbar) */
.section-badge {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--sp-s);
}
.section-title {
  font-size: var(--text-2xl);
  max-width: 22ch;
  margin-bottom: var(--sp-l);
}
.section-lead {
  max-width: 65ch;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}