/* ==========================================================================
   SHK-Info.de – Design Tokens
   Farbwelt aus dem Markenlogo: Rot, Blau, Gelb.
   Rollenverteilung:
     Blau  = tragende UI-Farbe (Links, Buttons, Navigation) – guter Kontrast
     Rot   = Marken- und Akzentfarbe (CTA, Hervorhebungen, aktive Zustände)
     Gelb  = reine Flächen-/Markerfarbe, niemals als Textfarbe
   ========================================================================== */

:root {
  /* --- Markenfarben, exakt aus der Illustrator-Datei (quellen/SHK-Info.ai) --- */
  --shk-rot:   #e30613;
  --shk-blau:  #1d71b8;
  --shk-gelb:  #ffde00;
  --shk-grau:  #706f6f;   /* Schriftfarbe im Logo */

  /* --- Rot-Skala --- */
  --rot-50:  #fef3f3;
  --rot-100: #fce1e3;
  --rot-200: #f7b9bd;
  --rot-300: #f18289;
  --rot-400: #ea444e;
  --rot-500: #e30613;
  --rot-600: #c80511;
  --rot-700: #9f040d;
  --rot-800: #72030a;
  --rot-900: #490206;

  /* --- Blau-Skala --- */
  --blau-50:  #f4f8fb;
  --blau-100: #e4eef6;
  --blau-200: #c0d7eb;
  --blau-300: #8eb8dc;
  --blau-400: #5694ca;
  --blau-500: #1d71b8;
  --blau-600: #1a63a2;
  --blau-700: #144f81;
  --blau-800: #0e385c;
  --blau-900: #09243b;

  /* --- Gelb-Skala (Flächen und Marker) --- */
  --gelb-100: #fffce6;
  --gelb-200: #fff6b8;
  --gelb-300: #ffec6b;
  --gelb-400: #ffde00;
  --gelb-500: #e0c300;

  /* --- Neutrale Töne, leicht ins Blaue gezogen --- */
  --grau-0:   #ffffff;
  --grau-50:  #f8fafc;
  --grau-100: #f1f5f9;
  --grau-200: #e2e8f0;
  --grau-300: #cbd5e1;
  --grau-400: #94a3b8;
  --grau-500: #64748b;
  --grau-600: #475569;
  --grau-700: #334155;
  --grau-800: #1e293b;
  --grau-900: #0f172a;

  /* --- Semantische Zuordnung --- */
  --farbe-text:        var(--grau-800);
  --farbe-text-leise:  var(--grau-500);
  --farbe-text-invers: var(--grau-0);
  --farbe-flaeche:     var(--grau-0);
  --farbe-flaeche-alt: var(--grau-50);
  --farbe-linie:       var(--grau-200);
  --farbe-link:        var(--blau-600);
  --farbe-link-hover:  var(--blau-700);
  --farbe-cta:         var(--shk-rot);
  --farbe-cta-hover:   var(--rot-600);
  --farbe-marker:      var(--gelb-300);
  --farbe-fokus:       var(--blau-500);

  /* --- Typografie --- */
  --schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-titel: var(--schrift-text);

  --text-xs:   0.8125rem;  /* 13px */
  --text-sm:   0.9375rem;  /* 15px */
  --text-base: 1.0625rem;  /* 17px – angenehm für lange Fachtexte */
  --text-lg:   1.1875rem;  /* 19px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.375rem;   /* 38px */
  --text-4xl:  3rem;       /* 48px */

  --zeilenhoehe-eng:   1.2;
  --zeilenhoehe-text:  1.65;

  /* --- Abstände (4px-Raster) --- */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.25rem;
  --raum-6: 1.5rem;
  --raum-8: 2rem;
  --raum-12: 3rem;
  --raum-16: 4rem;
  --raum-24: 6rem;

  /* --- Form --- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --radius-voll: 999px;

  --schatten-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --schatten:    0 2px 8px rgb(15 23 42 / 0.08);
  --schatten-lg: 0 8px 28px rgb(15 23 42 / 0.10);

  /* --- Layout --- */
  --breite-text:   68ch;   /* Lesespalte für Artikel */
  --breite-inhalt: 1200px; /* Standardcontainer */
  --breite-weit:   1440px;
}