/* ==========================================================================
   DESIGN-VARIABLEN
   --------------------------------------------------------------------------
   Zentrale Stelle für Farben, Schrift und Abstände.
   Eine Änderung hier wirkt auf die gesamte Website.
   ========================================================================== */

:root {
  /* --- Markenfarben ------------------------------------------------------ */
  --color-orange:          #FF6600;  /* Akzent, Buttons, Zahlen, Icons    */
  --color-orange-dark:     #E85C00;  /* Button-Hover, hervorgehobene Wörter */
  --color-orange-tint:     #FFF3EA;  /* hell-orange Abschnitte            */
  --color-navy:            #1F2E4D;  /* Dunkelblau: Flächen, Links        */
  --color-navy-dark:       #0E1729;  /* Link beim Überfahren              */

  /* --- Text ------------------------------------------------------------- */
  --color-text:            #1A1D23;  /* Fließtext                         */
  --color-text-lead:       #454B55;  /* Einleitungstexte                  */
  --color-text-muted:      #565C66;  /* Sekundärtext                      */
  --color-text-hub:        #3A404A;  /* Text in den Branchen-Boxen        */
  --color-text-on-orange:  #111111;  /* Text auf Orange                   */
  --color-text-on-orange-muted: #3A1A00;  /* Nebentext auf Orange         */
  --color-text-on-orange-list:  #2A1400;  /* Aufzählung auf Orange        */

  /* --- Text auf dunklem Hintergrund -------------------------------------- */
  --color-on-navy:         #E8ECF3;
  --color-on-navy-muted:   #B9C2D3;

  /* --- Flächen & Linien --------------------------------------------------- */
  --color-white:           #FFFFFF;
  --color-grey:            #F4F5F7;  /* graue Flächen (Diagramm)          */
  --color-border:          #E4E7EC;  /* Trennlinien                       */
  --color-nav-button:      #121417;  /* "Erstgespräch" oben rechts        */

  /* --- Schrift ------------------------------------------------------------ */
  --font-base: 'IBM Plex Sans', Arial, sans-serif;

  /* --- Layout ------------------------------------------------------------- */
  --container-width:   1160px;
  --container-padding: 24px;
  --section-padding:   120px;  /* Abstand oben/unten je Abschnitt (Handy: 80px) */
  --radius-image:      4px;
  --radius-card:       6px;
  --radius-pill:       999px;
}