/* ============================================================
   base.css — Reset, Typografie, Farben, Layout-Grundlagen
   ============================================================ */

/* ---------- Farbpalette (farbenblind-sicher) ----------
   Positiv/Aktivierung: Blau
   Negativ/Hemmung:     Bernstein/Orange
   (bewusst KEIN Rot/Grün für Pro/Contra)
   -------------------------------------------------------- */
:root {
  /* Akzentfarben */
  --color-positive: #2563eb;        /* kräftiges Blau   */
  --color-positive-soft: #dbeafe;
  --color-negative: #d97706;        /* warmes Bernstein */
  --color-negative-soft: #fef3c7;
  --color-accent: #0f766e;          /* gedämpftes Teal als Sekundärakzent */

  /* Neutralpalette (warmes Grau) */
  --color-bg: #fafaf9;
  --color-surface: #ffffff;
  --color-surface-soft: #f5f5f4;
  --color-border: #e7e5e4;
  --color-border-strong: #d6d3d1;
  --color-text: #1c1917;
  --color-text-muted: #57534e;
  --color-text-soft: #78716c;

  /* Typografie */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Schriftgrößen — können im Präsentationsmodus überschrieben werden */
  --fs-xs:   0.8125rem;   /* 13px */
  --fs-sm:   0.9375rem;   /* 15px */
  --fs-base: 1.0625rem;   /* 17px */
  --fs-md:   1.1875rem;   /* 19px */
  --fs-lg:   1.5rem;      /* 24px */
  --fs-xl:   2rem;        /* 32px */
  --fs-2xl:  2.75rem;     /* 44px */

  /* Layout */
  --content-max: 1100px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Übergänge */
  --transition-fast: 120ms ease-out;
  --transition-base: 220ms ease-out;
}

/* Präsentationsmodus: alles eine Stufe größer, mehr Luft */
:root[data-mode="praesentation"] {
  --fs-xs:   0.95rem;
  --fs-sm:   1.125rem;
  --fs-base: 1.3125rem;
  --fs-md:   1.5rem;
  --fs-lg:   2rem;
  --fs-xl:   2.75rem;
  --fs-2xl:  3.75rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

a {
  color: var(--color-positive);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent); }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  margin: 0 0 0.5em 0;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 1em 0; }

.lead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.muted { color: var(--color-text-muted); }
.soft  { color: var(--color-text-soft); }

/* ---------- Layout-Container ---------- */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 2.5rem);
}

/* ---------- Utility ---------- */
.stack > * + * { margin-top: var(--stack-gap, 1rem); }

.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;
}