/* =====================================================================
   Supellex – zentrale Gestaltungswerte (Arbeitsstand)
   Farben, Schriften, Abstände und Logo-Maße werden NUR hier gepflegt.
   Ein Austausch von Farbwelt oder Typografie erfolgt in dieser Datei;
   site.css verwendet ausschließlich diese Variablen.
   ===================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-soft.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-soft-italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Grundfarben */
  --farbe-elfenbein: #f6f3ed;
  --farbe-anthrazit: #292826;
  --farbe-orange: #ef781a;          /* Logo, Hauptaktionen, Akzente – nicht als Fließtextfarbe */
  --farbe-orange-hell: #f38c3a;     /* Hover der Hauptaktion */
  --farbe-orange-tinte: #a8490a;    /* Orange für Text auf hellem Grund (Kontrast ≥ 4,5:1) */
  --farbe-sand: #ece4d7;
  --farbe-stein: #6b665e;           /* gedämpfter Text (Kontrast ≥ 4,5:1 auf Elfenbein und Sand) */
  --farbe-linie: #d8cfc1;
  --farbe-salbei: #8c9a80;
  --farbe-salbei-hell: #e5e7dc;
  --farbe-salbei-tinte: #4c5a44;
  --farbe-fehler: #a3261b;
  --farbe-erfolg: #3f5e36;

  /* Rollen */
  --hintergrund: var(--farbe-elfenbein);
  --text: var(--farbe-anthrazit);
  --text-leise: var(--farbe-stein);
  --akzent: var(--farbe-orange);
  --fokus: var(--farbe-anthrazit);
  --flaeche-handwerk: var(--farbe-sand);
  --flaeche-kontakt: var(--farbe-salbei-hell);
  --flaeche-footer: var(--farbe-anthrazit);
  --text-footer: var(--farbe-elfenbein);

  /* Schriften */
  --schrift-titel: "Fraunces", "Iowan Old Style", Georgia, serif;
  --schrift-text: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --titel-variation: "SOFT" 100;
  --titel-gewicht: 480;

  --groesse-h1: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem);
  --groesse-h2: clamp(2rem, 1.45rem + 2vw, 3.1rem);
  --groesse-h3: clamp(1.35rem, 1.15rem + 0.7vw, 1.7rem);
  --groesse-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
  --groesse-text: 1.0625rem;
  --groesse-klein: 0.9rem;
  --groesse-kicker: 0.8rem;

  /* Raster und Abstände */
  --inhalt-max: 1240px;
  --rand: clamp(16px, 4vw, 40px);
  /* Zwei Abstandsstufen: zwischen Abschnitten liegt 2 x --abstand-abschnitt (oben + unten),
     zwischen Blöcken innerhalb eines Abschnitts genau --abstand-block. */
  --abstand-abschnitt: clamp(3rem, 2rem + 2.2vw, 4.5rem);
  --abstand-block: clamp(2.5rem, 1.75rem + 2vw, 4rem);
  --spalte-abstand: clamp(1.5rem, 1rem + 2.5vw, 4rem);
  --radius: 4px;

  /* Kopfbereich und Logo
     Das Logo wird über die Höhe gesteuert; die Breite ergibt sich aus der Datei.
     Bei einem neuen Logo mit anderem Seitenverhältnis genügt es, diese Werte anzupassen. */
  --kopf-hoehe: 68px;
  --logo-hoehe-kopf: 34px;
  --logo-hoehe-footer: 44px;
}

@media (min-width: 900px) {
  :root {
    --kopf-hoehe: 78px;
    --logo-hoehe-kopf: 40px;
  }
}