/************/
/* MAIN NAV */
/************/

:root{
  --underline-color: #0e7db4;
  --underline-height: 2px;
  --underline-duration: .28s;
}

#main-navbar .nav-item{
  margin-right: 0.5rem;
}

/* Basis */
#main-navbar .navbar-nav .nav-link{
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  padding-bottom: calc(0.6rem + var(--underline-height));
  text-transform: uppercase;
}

/* Underline kurz */
#main-navbar .navbar-nav .nav-link::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 24px;                     /* ✅ hier steuern */
  height: var(--underline-height);
  background: var(--underline-color);

  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition:
    transform var(--underline-duration) ease,
    opacity   var(--underline-duration) ease;
}

/* Hover */
#main-navbar .navbar-nav .nav-link:hover::after,
#main-navbar .navbar-nav .nav-link:focus-visible::after{
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

/* Aktiv */
#main-navbar .navbar-nav .nav-link.active,
#main-navbar .navbar-nav .nav-item.active .nav-link{
  color: #fff;
  background-color: #0e7db4;
  border-radius: 0px;
}

#main-navbar .navbar-nav .nav-link.active::after,
#main-navbar .navbar-nav .nav-item.active .nav-link::after{
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

/***********/
/* METANAV */
/***********/

.nav-meta nav a.nav-link {
    color: var(--bs-gray-600);
}

.nav-meta nav a:hover.nav-link {
  color: #0e7db4;
} 


/**********/
/* SUBNAV */
/**********/

:root {
  --submenu-color: #0e7db4;     /* CI-Farbe */
  --submenu-line: 2px;          /* Liniendicke */
  --submenu-duration: .28s;     /* Animationsdauer */
  --submenu-offset: 5px;        /* Startversatz für Animation */
}

/* Gemeinsame Basis für Submenü-Links */
.submenu .menusubpages .nav-link {
  position: relative;
  display: block;               /* WICHTIG: ganze Zeile klickbar */
  width: 100%;                  /* Hintergrund kann gesamte Breite färben */
  text-decoration: none;
  padding: .4rem .75rem;
}

/* --------------------------------------------
   HORIZONTAL (flex-row)
   Unterlinie wächst aus der Mitte heraus
----------------------------------------------*/

.submenu .nav.menusubpages.flex-row {
  --bs-nav-link-color: var(--bs-gray-600);
  --bs-nav-link-hover-color: var(--bs-blue);
}

.submenu .menusubpages.flex-row .nav-link {
  padding-bottom: calc(.4rem + var(--submenu-line));
}

.submenu .menusubpages.flex-row .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(0px - var(--submenu-offset));
  width: 100%;
  height: var(--submenu-line);
  background: var(--submenu-color);
  opacity: 0;
  transform: translateX(-50%) translateY(var(--submenu-offset)) scaleX(0);
  transform-origin: center;
  transition:
    transform var(--submenu-duration) ease,
    opacity var(--submenu-duration) ease;
}

.submenu .menusubpages.flex-row .nav-link:hover::after,
.submenu .menusubpages.flex-row .nav-link:focus-visible::after,
.submenu .menusubpages.flex-row .nav-item.active > .nav-link::after,
.submenu .menusubpages.flex-row .nav-link.active::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scaleX(1);
  bottom: 0;
}

/* --------------------------------------------
   VERTIKAL (flex-column)
   Linker Balken wächst vertikal aus der Mitte
----------------------------------------------*/

.submenu .menusubpages.flex-column .nav-item {
  border-bottom: 1px solid #e3e3e3;
}
.submenu .menusubpages.flex-column .nav-item:last-child {
  border-bottom: none;
}

.submenu .menusubpages.flex-column .nav-link {
  padding-left: calc(.75rem + 8px);
}

.submenu .menusubpages.flex-column .nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--submenu-line);
  height: 100%;
  background: var(--submenu-color);
  opacity: 0;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition:
    transform var(--submenu-duration) ease,
    opacity var(--submenu-duration) ease;
}

.submenu .menusubpages.flex-column .nav-link:hover::before,
.submenu .menusubpages.flex-column .nav-link:focus-visible::before,
.submenu .menusubpages.flex-column .nav-item.active > .nav-link::before,
.submenu .menusubpages.flex-column .nav-link.active::before {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}

/*********************************/
/* ACTIVE: Vollflächig blau + Weiß */
/*********************************/

.submenu .menusubpages .nav-item.active > .nav-link,
.submenu .menusubpages .nav-link.active {
  background-color: var(--submenu-color);
  color: #fff !important;
}

/* Hover soll aktive Optik beibehalten */
.submenu .menusubpages .nav-item.active > .nav-link:hover,
.submenu .menusubpages .nav-link.active:hover {
  background-color: var(--submenu-color);
  color: #fff !important;
}

/*********************************/
/* Reduced motion */
/*********************************/
@media (prefers-reduced-motion: reduce) {
  .submenu .menusubpages .nav-link::after,
  .submenu .menusubpages .nav-link::before {
    transition: none;
  }
}

/*********************************/
/* Meta-Nav Mobile Hide */
/*********************************/
@media (max-width: 992px) {
  .bg-subnav.d-flex.justify-content-center {
    display: none !important;
  }
  .ce-breadcrumb-with-search {
    display: none !important;
  }
}


/* Meta-Nav: */
@media (max-width: 992px) {
  /* Beispiel – passe die Klasse an das an, was du im Inspektor siehst */
  .bg-subnav.d-flex.justify-content-center {
    display: none !important;
  }
  .ce-breadcrumb-with-search {
    display: none !important;
  }
}