:root {
  /* === PRIMARY === */
  --bs-primary: #484494;
  --bs-primary-rgb: 72, 68, 148;
  --bs-primary-text-emphasis: var(--bs-primary);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 10%, white);
  --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 40%, white);

  /* === SECONDARY === */
  --bs-secondary: #495057;
  --bs-secondary-rgb: 73, 80, 87;
  --bs-secondary-text-emphasis: var(--bs-secondary);
  --bs-secondary-bg-subtle: color-mix(in srgb, var(--bs-secondary) 10%, white);
  --bs-secondary-border-subtle: color-mix(in srgb, var(--bs-secondary) 40%, white);

}

/* === BUTTONS === */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 75%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 70%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 60%, black);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 75%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 70%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 60%, black);
}

/* === OUTLINE BUTTONS === */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
}

/* === TEXT / LINK COLORS === */
.text-primary { color: var(--bs-primary); }
.text-secondary { color: var(--bs-secondary) !important; }

a { color: var(--bs-primary); }
a:hover { color: color-mix(in srgb, var(--bs-primary) 80%, black); }

/* === BACKGROUNDS === */
.bg-primary { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }

/* === BORDERS === */
.border-primary { border-color: var(--bs-primary) !important; }
.border-secondary { border-color: var(--bs-secondary) !important; }

/* === ALERTS === */
.alert-primary {
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-color: var(--bs-primary);
}

.alert-secondary {
  --bs-alert-bg: var(--bs-secondary-bg-subtle);
  --bs-alert-border-color: var(--bs-secondary-border-subtle);
  --bs-alert-color: var(--bs-secondary);
}

/* === BADGES === */
.badge-primary {
  background-color: var(--bs-primary);
}
.badge-secondary {
  background-color: var(--bs-secondary);
}

/* === DROPDOWNS === */
.dropdown-menu {
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bs-primary) 10%, white);
  --bs-dropdown-link-hover-color: var(--bs-primary);

  --bs-dropdown-link-active-bg: var(--bs-primary);
  --bs-dropdown-link-active-color: #fff !important;
}

/* ===============================
   Custom Dropdown Farbanpassungen
   =============================== */
.dropdown-menu {
  /* Hover-Zustand */
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bs-primary) 10%, white);
  --bs-dropdown-link-hover-color: var(--bs-primary);

  /* Active-Zustand (wird beim Klick genutzt) */
  --bs-dropdown-link-active-bg: var(--bs-primary);
  --bs-dropdown-link-active-color: #fff;
}

/* =========================================
   Direkte Fallback-Regeln (höhere Priorität)
   ========================================= */

/* Hover */
.dropdown-menu .dropdown-item:hover {
  color: var(--bs-primary) !important;
  background-color: color-mix(in srgb, var(--bs-primary) 10%, white) !important;
}

/* Active / angeklickt / ausgewählt */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  color: #fff !important;
  background-color: var(--bs-primary) !important;
}

/* Disabled */
.dropdown-menu .dropdown-item:disabled {
  color: #adb5bd !important;
  background-color: transparent !important;
  opacity: 0.65;
  cursor: not-allowed;
}

/* Optional: Divider leicht anpassen */
.dropdown-divider {
  border-color: color-mix(in srgb, var(--bs-primary) 20%, white);
}