/* =========================================================
   BDS LV 11 - Cassiopeia Custom CSS (user.css)
   Farbschema: Schwarz / Weiß / Rot
   ========================================================= */

:root {
  /* Hauptfarbe: Ein klassisches, kräftiges Rot (BDS-Rot) */
  --cassiopeia-color-primary: #cc0000;
  --cassiopeia-color-hover: #990000;
  --cassiopeia-color-link: #cc0000;
  --cassiopeia-color-link-hover: #000000;
  
  /* RGB-Werte der Hauptfarbe (für Schattierungen/Fokus-Rahmen) */
  --cassiopeia-color-primary-rgb: 204, 0, 0;
}

/* --- Kopfbereich (Header & Menü) --- */

/* Schwarzer Hintergrund für den Header mit rotem Abschlussstrich */
.header {
  background-color: #1a1a1a; 
  color: #ffffff;
  border-bottom: 4px solid var(--cassiopeia-color-primary);
}

/* Hauptnavigation (Menüpunkte) in Weiß */
.container-header .metismenu.mod-menu .nav-item .nav-link {
  color: #ffffff;
  font-weight: 500;
}

/* Aktiver Menüpunkt und Hover-Effekt in Rot */
.container-header .metismenu.mod-menu .nav-item .nav-link:hover,
.container-header .metismenu.mod-menu .nav-item .nav-link:focus,
.container-header .metismenu.mod-menu .nav-item.active > .nav-link {
  color: var(--cassiopeia-color-primary);
  background-color: rgba(255,255,255,0.05); /* Leichter Aufhellungseffekt beim Drüberfahren */
  border-radius: 4px;
}

/* --- Fußzeile (Footer) --- */

/* Schwarzer Footer passend zum Header */
.container-footer {
  background-color: #1a1a1a;
  color: #f8f9fa;
  border-top: 4px solid var(--cassiopeia-color-primary);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Footer-Links (z.B. Impressum, Datenschutz) */
.container-footer a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px dotted #ffffff;
}

.container-footer a:hover {
  color: var(--cassiopeia-color-primary);
  border-bottom-color: var(--cassiopeia-color-primary);
}

/* --- Allgemeines Layout --- */

/* Leicht grauer Hintergrund für den Bildschirmrand (sichtbar auf sehr breiten Monitoren) */
body {
  background-color: #f4f4f4; 
}

/* Der eigentliche Inhaltsbereich in reinem Weiß mit leichtem Schatten für Tiefe */
.site-grid {
  background-color: #ffffff;
  box-shadow: 0 0 20px rgba(0,0,0,0.08); 
}

/* Überschriften im Inhaltstext dezent abdunkeln (statt komplett schwarz) */
h1, h2, h3, h4 {
  color: #222222;
}