/* =========================================================================
   Theodor & Jeremy · Referenz-Landingpage
   Phase 1: statisches Fundament, mobile-first, Desktop voll gleichwertig.
   Farben, Typo und Abstände als CSS-Variablen.
   ========================================================================= */

/* ---------- Design-Tokens ---------- */
:root {
  /* Farben (Briefing Abschnitt 4) */
  --bg: #0B0F14;            /* sehr dunkles, neutrales Anthrazit-Schwarz, KEIN Blaustich */
  --surface: #141A22;       /* dezent helleres Schwarz-Grau: Karten + abgesetzte Sektionen */
  --surface-2: #1E2630;     /* einen Tick heller (neutral): verschachtelte Flaechen/Platzhalter */
  --accent: #E0B24A;        /* kraeftigeres, leuchtendes Gold, der EINE Akzent */
  --accent-hi: #F0CD78;     /* Gold hell, Hover */
  --text: #F4F6F8;          /* Headlines: klares, helles Weiss */
  --text-dim: #9BA6B2;      /* Fliesstext: gedaempft, aber gut lesbar (>= 4,5:1) */

  /* abgeleitete Töne */
  --line: rgba(244, 246, 248, 0.10);   /* feine Trennlinien */
  --line-accent: rgba(224, 178, 74, 0.32);
  --accent-soft: rgba(224, 178, 74, 0.12);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);

  /* Typografie */
  --font-head: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;   /* nur Akzent in Headlines */

  /* fluide Typo-Skala: grosse Display-Headlines, klarer Kontrast zum Fliesstext */
  --fs-h1: clamp(2.5rem, 1.5rem + 4vw, 4rem);            /* 40 -> 64 (Hero ist noch groesser) */
  --fs-h2: clamp(1.9rem, 1.35rem + 2.4vw, 3rem);         /* 30 -> 48 */
  --fs-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);     /* 18 -> 21,6 */
  --fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);   /* Einleitungstext */
  --fs-body: 1.0625rem;                                  /* 17px Basis */
  --fs-small: 0.875rem;

  /* Layout */
  --maxw: 1080px;          /* EIN einheitlicher Inhaltsrahmen fuer ALLE Abschnitte */
  --maxw-narrow: 760px;
  --read: 60ch;            /* einheitliche Lesespalte fuer Fliesstext (gut lesbar, zentriert) */
  --gutter: clamp(1.25rem, 0.7rem + 2.5vw, 3rem);
  --section-y: clamp(3.5rem, 2.25rem + 3.5vw, 6rem);     /* grosszuegig, aber ohne tote Flaechen */
  --radius: 16px;
  --radius-sm: 10px;
  --header-h: 72px;
}