/* Say-Briefly-System, übersetzt auf Explanideo-Rot. Abweichungen: siehe Plan. */
:root {
  /* Farbe */
  --paper: #fbf6f3;
  --ink: #3a121c;
  --red: #d8174a;
  --red-deep: #8e1233;
  --rose: #f6c9d2;
  --blush: #fde8ec;
  --coral: #e25b4a;
  --pencil: #c4b4b6;
  --hero-bg: #fcfbfa; /* Hero der Startseite und Navbar darüber (heller als paper); auch HERO_BG in tape-hero.js */

  /* vom Scroll-Kapitel gesetzt */
  --bg: var(--paper);
  --fg: var(--ink);

  /* Typo */
  --font-display: "Bricolage Grotesque", "Archivo Black", system-ui, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-micro: 0.75rem;
  --t-caption: 0.875rem;
  --t-body: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  --t-sub: clamp(1.25rem, 1vw + 0.9rem, 1.75rem);
  --t-h3: clamp(1.6rem, 1.6vw + 1rem, 2.5rem);
  --t-h2: clamp(2.6rem, 5vw + 0.5rem, 6rem);
  --t-h1: clamp(3rem, 7vw + 0.5rem, 8.5rem);

  /* Abstand: volle Breite, nur schmaler Rand */
  --gutter: clamp(16px, 2.5vw, 40px);
  --space-s: 16px;
  --space-m: 32px;
  --space-l: clamp(48px, 6vw, 96px);
  --space-xl: clamp(80px, 10vw, 160px);

  /* Form */
  --r-btn: 6px;
  --r-card: 14px;
  --r-pill: 999px;
  --line: 1px solid var(--pencil);
  --shadow-subtle: 0 1px 2px rgba(58, 18, 28, 0.06);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 76px;
}

@media (max-width: 899px) {
  :root { --header-h: 64px; }
}