/* =====================================================================
   01 – EINSTELLUNGEN  (Farben, Schriften, Abstände)
   ---------------------------------------------------------------------
   Das ist die wichtigste Datei für Gestalter:innen.
   Fast das gesamte Erscheinungsbild lässt sich hier über Variablen ändern –
   die anderen Dateien greifen nur auf diese Werte zu.

   Reihenfolge der Dateien:
   01-einstellungen.css   ← Farben, Schriften, Größen (hier)
   02-basis.css           ← Grundgerüst: Typografie, Raster, Abstände
   03-bausteine.css       ← Header, Buttons, Karten, Formulare, Footer …
   04-eigene-anpassungen.css ← Platz für eigene Änderungen (wird zuletzt geladen)
   ===================================================================== */


/* ---------- Hausschriften -------------------------------------------
   Schriftdateien in den Ordner /fonts legen (Dateinamen wie unten).
   Fehlt eine Datei, nutzt der Browser automatisch die Ersatzschrift.
   Tipp: .woff2-Dateien sind kleiner – dann hier die Endung anpassen.  */
@font-face { font-family: "Aguda";  font-weight: 700; font-display: swap; src: url("../fonts/Aguda-Bold.woff2") format("woff2"), url("../fonts/Aguda-Bold.ttf") format("truetype"); }
@font-face { font-family: "Aguda";  font-weight: 900; font-display: swap; src: url("../fonts/Aguda-Black.woff2") format("woff2"), url("../fonts/Aguda-Black.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url("../fonts/Roboto-Medium.woff2") format("woff2"), url("../fonts/Roboto-Medium.ttf") format("truetype"); }


:root {
  /* ---------- Markenfarben (VEB-Designsystem) ---------- */
  --braun:        #4e372b;   /* Primärfarbe: Buttons, Linien, Akzente */
  --dunkel:       #372b1f;   /* dunkle Flächen (Kopfbereiche, Kontakt) */
  --nacht:        #2b1e17;   /* Footer, sehr dunkler Text */
  --gelb:         #f8b81b;   /* Sekundärfarbe: Hervorhebungen, Haupt-Button */
  --gelb-hover:   #ffc93f;   /* Gelb beim Darüberfahren */
  --grau:         #edebea;   /* helle Flächen (Tertiärfarbe) */
  --weiss:        #ffffff;

  /* ---------- Textfarben ---------- */
  --text:         #1a1410;   /* Fließtext auf hell */
  --text-2:       #3d2f27;   /* etwas weicher */
  --text-3:       #5c4a40;   /* kleine Zusatztexte */
  --text-hell:    #e9dccf;   /* Fließtext auf dunkel */
  --text-hell-2:  #cdbfb2;   /* kleine Zusatztexte auf dunkel */

  /* ---------- Linien & Zustände ---------- */
  --linie:        #e3dfdc;
  --linie-2:      #d9d3cf;
  --feld-rand:    #c9c2bd;   /* Rahmen von Eingabefeldern */
  --fehler:       #a1260f;

  /* ---------- Schriften ---------- */
  --schrift-titel: "Aguda", "Arial Black", system-ui, sans-serif;
  --schrift-text:  "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- Schriftgrößen (clamp = wächst mit der Bildschirmbreite) ---------- */
  --groesse-h1:    clamp(38px, 5.4vw, 74px);   /* Startseiten-Titel */
  --groesse-h1-s:  clamp(34px, 4.8vw, 64px);   /* Titel auf Unterseiten */
  --groesse-h2:    clamp(30px, 3.5vw, 48px);
  --groesse-h3:    22px;
  --groesse-lead:  clamp(18px, 1.6vw, 21px);   /* Einleitungstexte */
  --groesse-text:  17px;
  --groesse-klein: 14px;

  /* ---------- Formen & Abstände ---------- */
  --radius:        4px;                         /* Ecken (bewusst klein, siehe Briefing) */
  --breite:        1200px;                      /* maximale Inhaltsbreite */
  --rand:          clamp(20px, 5vw, 56px);      /* Abstand links/rechts */
  --abschnitt:     clamp(72px, 9vw, 124px);     /* Abstand oben/unten je Abschnitt */
  --abschnitt-eng: clamp(56px, 7vw, 96px);
  --kopf-hoehe:    76px;                        /* Höhe des Headers */
  --schatten:      0 14px 28px rgba(43, 30, 23, .14);
}