/* ============================================
   1. Farb- und Designvariablen (Blue Hair Scheme)
   ============================================ */
   :root {
    --cassiopeia-color-primary: #76DCF1;
    --cassiopeia-color-hover:   #A4E5F6;
    --cassiopeia-color-light:   #E1F6FB;
    --cassiopeia-color-dark:    #52CCF6;
  
    --cassiopeia-color-text:    #2B2B2B;
    --cassiopeia-color-link:    #52CCF6;
    --cassiopeia-color-border:  #B4E9FF;
  }
  
  /* ============================================
     2. Theme-Variablen im aktiven Scope
     ============================================ */
  body[data-bs-theme="light"] {
    --cassiopeia-link-color: #52CCF6 !important;
    --cassiopeia-hover-color: #A4E5F6 !important;
  }
  
  /* ============================================
     3. Layout: Header & Footer
     ============================================ */
  header.site-header {
    background-color: var(--cassiopeia-color-primary);
    border-bottom: 2px solid var(--cassiopeia-color-border);
    color: var(--cassiopeia-color-text);
  }
  
  footer.site-footer {
    background-color: var(--cassiopeia-color-dark);
    color: var(--cassiopeia-color-text);
  }
  
  footer.site-footer a {
    color: #2B2B2B;
  }
  
  footer.site-footer a:hover {
    color: var(--cassiopeia-color-link);
    text-decoration: underline;
  }
  
  /* ============================================
     4. Navigation & Menüfarben
     ============================================ */
  ul.navbar-nav > li > a {
    color: var(--cassiopeia-color-text) !important;
  }
  
  ul.navbar-nav > li > a:hover {
    color: var(--cassiopeia-color-dark) !important;
  }
  
  /* Dunkle Schriftfarbe für Menüpunkte im Cassiopeia-Header */
  .container-header .container-nav li {
    color: #282828 !important;
  }
  
  /* Falls die Links (<a>-Tags) separat gestylt werden müssen: */
  .container-header .container-nav li a {
    color: #282828 !important;
  }
  
  /* Hover-Effekt hinzufügen */
  .container-header .container-nav li a:hover {
    color: #424242 !important;  /* Dunkleres Grau beim Hovern */
  }
  
  /* Aktiver Menüpunkt (z. B. bei der aktuellen Seite) */
  .container-header .container-nav li.active > a,
  .container-header .container-nav li.current > a {
    color: #0e4e64 !important;  /* Ihr Blauton aus den Variablen */
    font-weight: bold;
  }