/* ========================================
   COLOR SYSTEM - Boot Sub Theme (INTERPRACE)
   ========================================

   Projektspezifisches Naming für INTERPRACE
   IP = INTERPRACE Brand Colors
   BG = Background Colors

   Usage: color: var(--ip-gruen);
   ======================================== */

:root {
  /* ========================================
     IP BRAND COLORS (Primary)
     ======================================== */
  --ip-gruen: #8cc157;                     /* Haupt-Grün */
  --ip-gruen-alt: #8ac34a;                 /* Alternative Grün */
  --ip-gruen-hell: #9dc871;                /* Helles Grün */
  --ip-gruen-dunkel: #81bb46;              /* Dunkles Grün */
  --ip-gruen-dunkler: #7bb341;             /* Dunkleres Grün */
  --ip-gruen-dunkelst: #79b046;            /* Dunkelstes Grün */

  --ip-blau-dunkel: #00256e;               /* Haupt-Dunkelblau (Headings) */
  --ip-blau: #032273;                      /* Primary Blau */

  /* ========================================
     IP ACCENT COLORS
     ======================================== */
  --ip-akzent-blau-hell: #8fcaf9;          /* Helles Blau */
  --ip-akzent-blau: #4f8fc8;               /* Medium Blau */
  --ip-akzent-blau-dunkel: #0071b3;        /* Dunkles Blau (Links) */

  /* ========================================
     BACKGROUND COLORS
     ======================================== */
  /* Blaue Hintergründe */
  --bg-blau-hellst: #f8f9ff;               /* Sehr helles Blau */
  --bg-blau-hell: #f4f7ff;                 /* Helles Blau */
  --bg-blau-hell-alt: #f4f7ff;             /* Helles Blau (lowercase) */
  --bg-blau-hell-alt2: #e9effc;            /* Alternatives helles Blau */

  /* Grüne Hintergründe */
  --bg-gruen-hellst: #ecf4e5;              /* Sehr helles Grün */
  --bg-gruen-hell: #eff6e8;                /* Helles Grün */
  --bg-gruen-hell-alt: #e8f5e9;            /* Alternatives helles Grün */
  --bg-gruen-mittel: #d3e7c9;              /* Mittel helles Grün */
  --bg-gruen-mittel-alt: #d3e7c7;          /* Alternatives mittel Grün */
  --bg-gruen-rgb: rgb(237, 244, 230);      /* RGB helles Grün */

  /* ========================================
     GRAUTÖNE
     ======================================== */
  --weiss: #ffffff;                           /* Reines Weiß */

  /* Helle Grautöne */
  --grau-100: #f7f8fa;                     /* Hellster Grauton */
  --grau-200: #eeeeee;                        /* Sehr helles Grau */
  --grau-300: #e9ebef;                     /* Helles Grau */
  --grau-400: #dddddd;                        /* Mittel helles Grau */

  /* Mittlere Grautöne */
  --grau-500: #cccccc;                        /* Mittel Grau */
  --grau-600: #c1c1c1;                     /* Mittel Grau alt */
  --grau-650: #999999;                        /* Mittel dunkel Grau */
  --grau-700: #777777;                        /* Dunkel Grau */
  --grau-750: #6c747c;                     /* Bootstrap Grau */
  --grau-800: #666666;                        /* Dunkler Grau */
  --grau-850: #555555;                        /* Sehr dunkel Grau */

  /* Dunkle Grautöne */
  --grau-900: #333333;                        /* Sehr dunkel Grau */
  --grau-950: #3b3b3b;                     /* Fast Schwarz */

  /* ========================================
     SCHATTEN & OVERLAYS (RGBA)
     ======================================== */
  --schatten-leicht: rgba(0, 0, 0, 0.04);  /* Sehr leichter Schatten */
  --schatten-normal: rgba(0, 0, 0, 0.08);  /* Normaler Schatten */
  --schatten-mittel: rgba(0, 0, 0, 0.1);   /* Mittlerer Schatten */
  --schatten-stark: rgba(0, 0, 0, 0.15);   /* Starker Schatten */

  --overlay-weiss-leicht: rgba(255, 255, 255, 0.25);   /* Leichtes weißes Overlay */
  --overlay-weiss-mittel: rgba(255, 255, 255, 0.7);    /* Mittleres weißes Overlay */
  --overlay-weiss-stark: rgba(255, 255, 255, 0.9);     /* Starkes weißes Overlay */

  --overlay-gruen-leicht: rgba(141, 193, 87, 0.1);     /* Leichtes grünes Overlay */
  --overlay-gruen-mittel: rgba(139, 195, 74, 0.35);    /* Mittleres grünes Overlay */

  /* ========================================
     SEMANTISCHE FARBEN (Zweck-basiert)
     ======================================== */
  --text-primaer: #3b3b3b;                 /* Haupt-Text */
  --text-sekundaer: #666666;                  /* Sekundär-Text */
  --text-gedaempft: #999999;                  /* Gedämpfter Text */

  --text-ueberschrift: #00256e;            /* Überschriften */
  --link: #0071b3;                         /* Links */
  --link-hover: #008ee2;                   /* Links Hover */
  --link-active: #22adff;                  /* Links Active */

  --border: #e9ebef;                       /* Standard Border */
  --border-hell: #dddddd;                     /* Heller Border */

  /* ========================================
     NAVBAR FARBEN
     ======================================== */
  --navbar-top-bg: #002071;                /* Top Navbar Hintergrund */
  --navbar-main-bg: #ffffff;               /* Main Navbar Hintergrund */
  --navbar-link: rgb(231, 231, 231);       /* Navbar Link */

  /* ========================================
     FOOTER FARBEN
     ======================================== */
  --footer-bg: #292929;                    /* Footer Hintergrund */
  --footer-text: #fffeff;                  /* Footer Text */

  /* ========================================
     COMPONENT FARBEN
     ======================================== */
  --btn-primary-bg: #007bff;               /* Primary Button Hintergrund */
  --btn-primary-bg-hover: #0256b1;         /* Primary Button Hover */

  --sidebar-bg: #f6f6f2;                   /* Sidebar Hintergrund */
  --sidebar-border: #f9f9f9;               /* Sidebar Border */

  --page-item-active: #0071b3;             /* Aktives Pagination Item */

  /* ========================================
     LEGACY / KOMPATIBILITÄT
     (Alte Namen für Rückwärtskompatibilität)
     ======================================== */
  --color-primary-green: var(--ip-gruen);
  --color-primary-blue: var(--ip-blau);
  --color-white: var(--weiss);
  --highlight-border-color: var(--ip-gruen);
  --site-name-slogan-color: var(--grau-500);
}

/* ========================================
   APPLIED STYLES (Using CSS Variables)
   ======================================== */

body {
  color: var(--text-primaer);
}

h1, h2 {
  color: var(--text-ueberschrift);
}

#page,
#main-wrapper,
.region-primary-menu .menu-item a.is-active,
.region-primary-menu .menu-item--active-trail a {
  background: var(--weiss);
}

.tabs ul.primary li a.is-active,
.tabs ul.primary li.is-active a {
  background-color: var(--weiss);
}

.tabs ul.primary li.is-active a {
  border-bottom-color: var(--weiss);
}

#navbar-top {
  background-color: var(--navbar-top-bg);
}

#navbar-top .nav-link.is-active {
  color: var(--ip-gruen);
}

#navbar-main {
  background-color: var(--navbar-main-bg);
}

a,
.link {
  color: var(--link);
}

a:hover,
a:focus,
.link:hover,
.link:focus {
  color: var(--link-hover);
}

a:active,
.link:active {
  color: var(--link-active);
}

.nav-item .dropdown-item a.active {
  color: var(--weiss);
}

.nav-link {
  color: var(--navbar-link);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--navbar-link);
}

.page-item.active .page-link {
  background-color: var(--page-item-active);
  border-color: var(--page-item-active);
}

.page-link,
.page-link:hover {
  color: var(--link);
}

.sidebar .block {
  background-color: var(--sidebar-bg);
  border-color: var(--sidebar-border);
}

.btn-primary {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--btn-primary-bg-hover);
}

.site-footer {
  background: var(--footer-bg);
}

.region-header,
.region-header a,
.region-header li a.is-active,
.region-header .site-branding__text,
.region-header .site-branding,
.region-header .site-branding__text a,
.region-header .site-branding a,
.region-secondary-menu .menu-item a,
.region-secondary-menu .menu-item a.is-active {
  color: var(--footer-text);
}

/* ========================================
   COLOR FORM (Drupal Color Module)
   ======================================== */

[dir="rtl"] .color-form .color-palette {
  margin-left: 0;
  margin-right: 20px;
}

[dir="rtl"] .color-form .form-item label {
  float: right;
}

[dir="rtl"] .color-form .color-palette .lock {
  right: -20px;
  left: 0;
}