/* ----------------------------------------------------
   🎨 Basisfarben & Utility-Klassen
---------------------------------------------------- */
:root {
  --color-accent: #00a9ac;
  --color-info: #19226d;
  --color-neutral: #999999;
}

.bg-accent {
  background-color: var(--color-accent);
  color: #fff;
}

.bg-info {
  background-color: var(--color-info);
  color: #fff;
}

.text-neutral {
  color: var(--color-neutral);
}

/* ----------------------------------------------------
   💎 Finale Layout-Anpassung für das Mega-Menü (2 Spalten)
   Nach Anpassung in navbar.php
---------------------------------------------------- */

/* Grundlayout: 2 Spalten nebeneinander */
.uk-drop-grid.uk-child-width-1-2@m {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 60px !important;
}

/* Spaltenbreite angleichen */
.menu-col-left,
.menu-col-right,
.uk-drop-grid.uk-child-width-1-2@m > div {
  flex: 0 0 48%;
  max-width: 48%;
  vertical-align: top;
}

/* Einheitlicher Abstand zwischen Menüeinträgen */
.uk-navbar-dropdown .uk-nav > li {
  margin-bottom: 6px !important;
}

/* ----------------------------------------------------
   📐 Reihenfolge und Ausrichtung
   - Linke Spalte: HRM, Recruiting
   - Rechte Spalte: Workflow Engine, Kanban, Organisation,
                    Vertragsmanagement, E-Learning
---------------------------------------------------- */

/* Rechte Spalte bündig oben starten */
.uk-drop-grid.uk-child-width-1-2@m {
  align-items: flex-start !important;
}

/* Abstand optisch verfeinern */
.uk-drop-grid.uk-child-width-1-2@m {
  gap: 50px !important;
}

/* ----------------------------------------------------
   📱 Responsive Verhalten: auf kleineren Geräten einspaltig
---------------------------------------------------- */
@media (max-width: 960px) {
  .uk-drop-grid.uk-child-width-1-2@m {
    flex-wrap: wrap !important;
    gap: 0 !important;
  }

  .menu-col-left,
  .menu-col-right,
  .uk-drop-grid.uk-child-width-1-2@m > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}