/* ═══════════════════════════════════════════════════
   gsund-und-guad.com — Design Tokens
   Martina Maria Altmann
   ═══════════════════════════════════════════════════ */

/* Hinweis: Kein @import — Schriften werden lokal über
   das Worldsoft-CMS ausgeliefert (DSGVO-konform).     */

/* ── Farb-Tokens ────────────────────────────────── */
:root {

  /* Hintergründe */
  --bg:           #F7F3EC;   /* Seitenhintergrund */
  --bg-card:      #FDFAF5;   /* Karten, Preisbox, Testi-Cards */

  /* Grün */
  --green-deep:   #2E4A32;   /* Nav, Hero, Sektions-Hintergründe */
  --green-bg:     #006400;   /* Hintergründe (kräftiges Grün) */
  --green-mid:    #4E7153;   /* Ornamentlinien, Checkmarks, Akzente */
  --green-light:  #7A9E7E;   /* Subtexte auf dunklem Grund, Footer-Links */

  /* Terrakotta */
  --terra:        #B5714A;   /* Buttons, Labels, Akzentbalken, Sterne */
  --terra-light:  #D4956E;   /* Button-Hover, Trennlinien, Hero-Italic */
  --terra-pale:   #F0E0D3;   /* Trust-Bar, For-Whom-Sektion */

  /* Text */
  --text:         #2A2118;   /* Normaler Fließtext */
  --muted:        #7A6A58;   /* Nebentext, FAQ-Antworten, Orts-Labels */
  --border:       #D9CFC2;   /* Rahmen, Trennlinien, Antwort-Linien */

  /* Neutral */
  --white:        #FFFFFF;   /* Button-Schrift, Karten-Titel auf Dunkel */

  /* ── Schriftarten ─────────────────────────────── */
  --font-serif:   'Cormorant Garamond', 'Playfair Display', Georgia, serif;
                  /* Cormorant Garamond: Hauptschrift (lokal im CMS)      */
                  /* Playfair Display:   Fallback (lokal im CMS)          */
                  /* Georgia:            System-Fallback                  */
  --font-sans:    'Lato', 'Helvetica Neue', sans-serif;
                  /* Lato:              Hauptschrift (lokal im CMS)       */
}

/* ── Typografie-Rollen ──────────────────────────── */

/*
  ÜBERSCHRIFTEN (H1–H4):
  ─────────────────────────────────────────────────
  Schrift:  Cormorant Garamond → Fallback Playfair Display
  Gewicht:  400
  Farbe:    --green-deep #2E4A32

  LATO — Einsatzorte:
  ─────────────────────────────────────────────────
  300         Fließtext, Hero-Subline, Bullet-Listen,
              FAQ-Antworten, Trust-Bar, Shop-Items
  300 italic  Garantie-Hinweis, Preis-Einmal-Hinweis,
              Muted-Texte, Story-Signatur-Ergänzung
  400         Trust-Items, Week-Number-Labels,
              Section-Labels
  700         Buttons, FAQ-Fragen, Testi-Author,
              Preis-Hinweis
*/

/* ── Basis-Reset ────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
}

/* ── Überschriften H1–H4 ────────────────────────── */
h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -0.16px;
  text-transform: none;
  color: var(--green-deep);
}

h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.16px;
  text-transform: none;
  color: var(--green-deep);
}

h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 35px;
  line-height: 1.2;
  letter-spacing: -0.16px;
  text-transform: none;
  color: var(--green-deep);
}

h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.16px;
  text-transform: none;
  color: var(--green-deep);
}

/* ── Section-Label ──────────────────────────────── */
/* Kategorie-Zeile über Titeln (kein H-Tag, Klasse)  */
.section-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
}

/* ── Muted / Italic-Texte ───────────────────────── */
.muted,
p.muted,
.faq-a,
.price-note,
.btn-guarantee {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: italic;
  color: var(--muted);
}

/* ── Buttons ────────────────────────────────────── */
.btn-primary {
  font-family: var(--font-sans);
  font-weight: 700;
  background: var(--terra);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--terra-light);
}