/* =========================
   Cliniqo Navigation Styles
   ========================= */

:root {
  --nav-text: #2e2f2c;        /* warmes Anthrazit */
  --nav-hover: #1f3d32;       /* gedecktes Grün */
  --nav-active: #1f3d32;
  --nav-underline: #1f3d32;
}

#headnav {
  margin-left: auto;
  font-family: "Source Sans 3", system-ui, sans-serif;
}

#headnav .level_1 {
  display: flex;
  flex-wrap: wrap;                 /* zweizeilig möglich */
  gap: 0.75rem 2.2rem;             /* vertikal | horizontal */
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
}

/* Links & aktive Elemente */
#headnav a,
#headnav strong {
  display: inline-block;
  white-space: nowrap;             /* kein Wortumbruch */
  text-decoration: none;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--nav-text);
  line-height: 1.4;
  position: relative;
  transition: color 0.2s ease;
}

/* Hover */
#headnav a:hover {
  color: var(--nav-hover);
}

/* Active State */
#headnav strong.active,
#headnav a.active {
  font-weight: 600;
  color: var(--nav-active);
}

/* dezente Unterstreichung Active */
#headnav strong.active::after,
#headnav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 2px;
  background-color: var(--nav-underline);
}

#headnav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 2px;
  background-color: var(--nav-underline);
  opacity: 0;
  transform: scaleX(0.6);
  transition:
    opacity 0.25s ease 0.05s,
    transform 0.25s ease 0.05s;
}

/* Hover: Farbe wie Active, Unterstrich blendet ein */
#headnav a:hover {
  color: var(--nav-active);
  font-weight: 400; /* explizit nicht fett */
}

#headnav a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Active bleibt klarer & ohne Animation */
#headnav strong.active::after,
#headnav a.active::after {
  opacity: 1;
  transform: scaleX(1);
  transition: none;
}


/* kleinere Screens */
@media (max-width: 900px) {
  #headnav .level_1 {
    justify-content: center;
  }
}



.footernav {
  text-align: center;
}

.footernav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.footernav li {
  margin: 0;
  padding: 0;
}

.footernav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: opacity 0.2s ease, text-decoration-color 0.2s ease;
}

.footernav a:hover,
.footernav a:focus {
  opacity: 0.8;
  text-decoration: underline;
}