/* ============================================
   1. Farb- und Designvariablen (Sea Theme – soft)
   ============================================ */
:root {
  --cassiopeia-color-primary: #84ACAB;
  --cassiopeia-color-hover:   #A2C0BF;
  --cassiopeia-color-light:   #F7F7F7;
  --cassiopeia-color-dark:    #011C3E;

  --cassiopeia-color-text:    #2B2B2B;
  --cassiopeia-color-link:    #2B2B2B;
  --cassiopeia-color-border:  #A2C0BF;
}

/* ============================================
   2. Theme-Variablen im aktiven Scope
   ============================================ */
body[data-bs-theme="light"] {
  --cassiopeia-link-color: #2B2B2B !important;
  --cassiopeia-hover-color: #A2C0BF !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-hover);
  color: var(--cassiopeia-color-dark);
}

footer.site-footer a {
  color: var(--cassiopeia-color-dark);
}

footer.site-footer a:hover {
  color: var(--cassiopeia-color-text);
  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;
}

ul.navbar-nav > li.active > a,
ul.navbar-nav > li.current > a {
  color: var(--cassiopeia-color-text) !important;
  font-weight: bold;
}

#offcanvas-menu nav a,
.offcanvas-menu nav a {
  color: var(--cassiopeia-color-text) !important;
}

#offcanvas-menu nav a:hover,
.offcanvas-menu nav a:hover {
  color: var(--cassiopeia-color-dark) !important;
}

/* ============================================
   5. Buttons
   ============================================ */
.button,
.btn,
button {
  background-color: var(--cassiopeia-color-primary);
  color: #fff;
  border: 1px solid var(--cassiopeia-color-border);
}

.button:hover,
.btn:hover,
button:hover {
  background-color: var(--cassiopeia-color-hover);
  color: var(--cassiopeia-color-dark);
}