@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Farben (aus Plakat/Bauzaunbanner IGD 2027 gemessen) */
  --igf-anthrazit: #393536;
  --igf-anthrazit-tief: #2b2829;
  --igf-anthrazit-hell: #4a4546;
  --igf-creme: #fbe1a8;
  --igf-creme-papier: #fdf4dc;
  --igf-tuerkis: #55b6a7;
  --igf-tuerkis-dunkel: #2a7268;
  --igf-rost: #b5431f;
  --igf-rost-dunkel: #903518;
  --igf-rost-flaeche: #a83e1c;
  --igf-rost-hell: #f28c66;
  --igf-gold: #9f7123;
  --igf-weiss: #ffffff;
  --igf-verlauf-rost: linear-gradient(90deg, var(--igf-rost-flaeche) 0%, var(--igf-rost-dunkel) 100%);

  /* Typografie */
  --igf-schrift: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --igf-display: "Fraunces", Georgia, "Times New Roman", serif;
  --fs-0: 0.8125rem;
  --fs-1: 0.9375rem;
  --fs-2: 1.0625rem;
  --fs-3: 1.375rem;
  --fs-4: 1.875rem;
  --fs-5: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-6: clamp(2.5rem, 1.2rem + 5vw, 4.75rem);
  --fs-titel: clamp(2.25rem, 5.4vw, 5rem);

  /* Abstände (4er-Raster) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;

  --igf-breite: 75rem;
  --igf-rand: clamp(1rem, 4vw, 2rem);
  --igf-radius: 4px;
  --igf-fokus: 3px solid var(--igf-creme);
  --igf-linie: 1px solid rgba(251, 225, 168, 0.22);
}