/* ==========================================================================
   Vergissmeinnicht – Design-Tokens & Basistypografie
   Sanfte Wärme: warmes Papier + Vergissmeinnicht-Blau + gelber Blütenkern-Akzent.
   Geprüfte Kontraste (WCAG AA): Text ≥ 13:1, gedämpft ≥ 7:1, Primär-tief auf Weiß 8.7:1,
   Ink auf Warm-Akzent 7.9:1. Der warme Akzent ist NUR mit dunklem Text/als Fläche zu nutzen.
   ========================================================================== */

/* --- Selbst-gehostete Schriften (OFL, kein Google-CDN → DSGVO-freundlich) --- */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("../fonts/lexend-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Farben */
  --vm-paper:        #FBFAF6; /* warmes Off-White (Grundfläche) */
  --vm-surface:      #F2EEE6; /* warme Sand-Fläche für ruhige Sektionen/Karten */
  --vm-surface-blue: #E7EEF6; /* kühle Alternativ-Fläche (Abwechslung) */
  --vm-ink:          #1F2A37;
  --vm-ink-muted:    #4A5568;
  --vm-primary:      #2C5F8A;
  --vm-primary-deep: #1F4E79; /* Links/Buttons – weiß darauf 8.7:1 */
  --vm-periwinkle:   #5B7DB1; /* echtes Vergissmeinnicht-Blau – dekorativ/Hero */
  --vm-accent:       #A9C2D5; /* zartes Hellblau – dekorativ */
  --vm-accent-warm:  #E8B84B; /* gelber Blütenkern – Highlights, NUR mit dunklem Text */
  --vm-accent-warm-soft: #FBF1D8; /* sehr helle warme Fläche (Badges/Hinweise) */
  --vm-border:       #6E8CA9;
  --vm-hairline:     #C9D6E3; /* nur dekorativ */
  --vm-success:      #2F6B4F;
  --vm-error:        #9B2C2C;

  /* Schrift */
  --vm-font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vm-font-head: "Lexend", var(--vm-font-body);

  /* Typo-Skala */
  --vm-fs-xs:   0.875rem;
  --vm-fs-base: 1.125rem;
  --vm-fs-lead: 1.25rem;
  --vm-fs-h3:   1.5rem;
  --vm-fs-h2:   1.875rem;
  --vm-fs-h1:   2.25rem;
  --vm-lh:      1.6;
  --vm-lh-head: 1.25;

  /* Abstände (8px-Skala) */
  --vm-space-1: .25rem;  --vm-space-2: .5rem;  --vm-space-3: 1rem;
  --vm-space-4: 1.5rem;  --vm-space-5: 2rem;   --vm-space-6: 3rem;  --vm-space-7: 4rem;

  --vm-radius:  12px;
  --vm-measure: 66ch;
  --vm-target:  44px;
}

/* --- Basistypografie & Farben --- */
body {
  font-family: var(--vm-font-body);
  font-size: var(--vm-fs-base);
  line-height: var(--vm-lh);
  color: var(--vm-ink);
  background-color: var(--vm-paper);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--vm-font-head);
  line-height: var(--vm-lh-head);
  color: var(--vm-ink);
  font-weight: 600;
}
h1 { font-size: var(--vm-fs-h1); }
h2 { font-size: var(--vm-fs-h2); }
h3 { font-size: var(--vm-fs-h3); }

a { color: var(--vm-primary-deep); text-underline-offset: .15em; }
a:hover, a:focus { color: var(--vm-ink); }

.lead, .entry-content .lead { font-size: var(--vm-fs-lead); color: var(--vm-ink-muted); }

/* Lesbare Zeilenlänge in Fließtext-Bereichen (ohne Layout-Spalten zu sprengen) */
.entry-content p,
.elementor-widget-text-editor p,
.vm-measure {
  max-width: var(--vm-measure);
}

/* Ruhige Flächen-Utility */
.vm-surface { background-color: var(--vm-surface); border-radius: var(--vm-radius); }