/* Für In-Article Navigation bei 60er */
/* Flex-Container UL */
ul.er-cat-nav {
  display: flex !important;          /* Flexbox aktivieren */
  flex-wrap: wrap !important;        /* Umbrechen bei Platzmangel */
  justify-content: center !important;
  align-items: flex-start;           /* oben ausrichten */
  gap: 1rem !important;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-direction: row !important;    /* erzwingt Reihenlayout */
}

/* LI-Elemente */
ul.er-cat-nav > li.nav-item {
  display: flex !important;
  justify-content: center;
  flex: 0 0 auto;                    /* keine automatische Vergrößerung */
}

/* A-Elemente als Buttons */
ul.er-cat-nav > li.nav-item > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-width: 120px;
  padding: 0.6rem 1.2rem;
  background-color: #028f96;
  color: #fff !important;
  border-radius: 0.5rem;
  text-decoration: none !important;
  text-align: center;

  white-space: nowrap;
  transition: transform 0.2s, background-color 0.2s;
}

/* Hover */
ul.er-cat-nav > li.nav-item > a:hover {
  background-color: #0a979e;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 576px) {
  ul.er-cat-nav {
    flex-direction: row !important;  /* Reihenlayout beibehalten */
    justify-content: center;          /* mittig */
    flex-wrap: wrap;                  /* Umbruch bei Platzmangel */
  }

  ul.er-cat-nav > li.nav-item {
    flex: 1 1 calc(50% - 0.5rem);    /* zwei Buttons pro Reihe, Abstand berücksichtigen */
    margin-bottom: 0.5rem;           /* kleiner Abstand nach unten */
  }

  ul.er-cat-nav > li.nav-item > a {
    width: 100%;                      /* füllt das LI aus */
    max-width: 180px;                 /* verhindert zu große Buttons */
  }
}