/* ==========================================================
   DAS LAUSCHENDE HERZ — Design-Tokens  (v3 „Morgenlicht & Nachtblau“)
   ========================================================== */

:root {

  /* ---------- FARBEN: Grund ---------- */
  --farbe-grund:            #F7F3E8;   /* Lichtcreme – Papier, Morgenlicht */
  --farbe-grund-ton:        #EFE9DA;   /* warmer Tonraum für Wechselabschnitte */
  --farbe-grund-dunkel:     #101B29;   /* Nachtblau – die Innenseite der Seite */
  --farbe-grund-dunkel-ton: #172536;   /* aufgehelltes Nachtblau für Karten/Felder */

  /* ---------- FARBEN: Text ---------- */
  --farbe-text:             #262E38;   /* Blau-Anthrazit statt Schwarz */
  --farbe-text-leise:       #6F7684;
  --farbe-text-hell:        #F3EFE3;   /* Creme-Weiß auf Nachtblau */
  --farbe-text-hell-leise:  #9AA5B1;

  /* ---------- FARBEN: Akzent (max. 10 % der Fläche!) ---------- */
  --farbe-akzent:           #BE8A3E;   /* Goldocker – Linien, Knöpfe, einzelne Worte */
  --farbe-akzent-tief:      #96682A;   /* Hover */
  --farbe-akzent-hell:      #D9A95F;   /* Gold auf dunklem Grund (Kontrast!) */
  --farbe-akzent-hauch:     #E9DCBF;   /* zarteste Goldlinie auf Creme */

  /* ---------- FARBEN: Struktur ---------- */
  --farbe-linie:            #DFD8C7;
  --farbe-linie-dunkel:     #2A3A4E;   /* Linien auf Nachtblau */
  --farbe-platzhalter-a:    #E9E1CE;
  --farbe-platzhalter-b:    #D8CFBA;

  /* ---------- HERO-SCHLEIER (für helles Morgenlicht-Bild) ---------- */
  --hero-scrim-oben:  rgba(247, 243, 232, 0.42);
  --hero-scrim-mitte: rgba(247, 243, 232, 0.08);
  --hero-scrim-unten: rgba(247, 243, 232, 0.85);

  /* ---------- SCHRIFT ---------- */
  --schrift-titel: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --schrift-text:  "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --groesse-text:       1.125rem;
  --groesse-text-gross: 1.3rem;
  --groesse-h1:         clamp(2.6rem, 6vw, 4.2rem);
  --groesse-h2:         clamp(1.7rem, 3.5vw, 2.3rem);
  --groesse-h3:         1.25rem;
  --zeilenhoehe:        1.75;
  --zeilenhoehe-titel:  1.18;
  --laufweite-klein:    0.16em;

  /* ---------- RAUM ---------- */
  --raum-abschnitt: clamp(7rem, 16vh, 11rem);
  --raum-innen:     clamp(1.5rem, 4vw, 3rem);
  --raum-element:   2.5rem;
  --breite-lesespalte: 41rem;
  --breite-weit:       68rem;

  /* ---------- BILDER ---------- */
  --atem-hoehe: clamp(20rem, 62vh, 36rem);

  /* ---------- FORM & BEWEGUNG ---------- */
  --radius: 2px;
  --uebergang: 0.35s ease;
  --atem-dauer: 0.9s;                    /* Erscheinen der Abschnitte */
  --atem-kurve: cubic-bezier(0.22, 1, 0.36, 1);
}