/* ==========================================================
   DAS LAUSCHENDE HERZ — Design-Tokens
   ========================================================== */

:root {

  /* ---------- FARBEN: Grund ---------- */
  --farbe-grund:        #F7F4EC;
  --farbe-grund-ton:    #EFEAE0;
  --farbe-grund-dunkel: #2B2620;

  /* ---------- FARBEN: Text ---------- */
  --farbe-text:         #33302A;
  --farbe-text-leise:   #7A7365;
  --farbe-text-hell:    #EDE8DC;
  --farbe-text-hell-leise: #B5AC9B;

  /* ---------- FARBEN: Akzent ---------- */
  --farbe-akzent:       #8C6D45;
  --farbe-akzent-tief:  #6F5432;
  --farbe-akzent-hauch: #E7DEC9;

  /* ---------- FARBEN: Struktur ---------- */
  --farbe-linie:        #DCD5C6;
  --farbe-platzhalter-a: #E9E1CE;   /* Platzhalter-Verlauf: helles Morgenlicht */
  --farbe-platzhalter-b: #D8CFBA;   /* Platzhalter-Verlauf: warme Erde */

  /* ---------- HERO ---------- */
  /* Schleier über dem Hero-Bild, damit der Text ruhig darauf liegt.
     Bei einem dunklen echten Bild später einfach auf dunkle Töne umstellen. */
  --hero-scrim-oben:  rgba(247, 244, 236, 0.50);
  --hero-scrim-mitte: rgba(247, 244, 236, 0.10);
  --hero-scrim-unten: rgba(247, 244, 236, 0.80);

  /* ---------- 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.4rem, 5.5vw, 3.8rem);
  --groesse-h2:         clamp(1.7rem, 3.5vw, 2.3rem);
  --groesse-h3:         1.25rem;
  --zeilenhoehe:        1.75;
  --zeilenhoehe-titel:  1.2;
  --laufweite-klein:    0.14em;

  /* ---------- 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);   /* Höhe der randlosen Atembilder */

  /* ---------- FORM ---------- */
  --radius: 2px;
  --uebergang: 0.35s ease;
}