/* ===========================
   "Auf dieser Seite" – Box
   =========================== */

.page-nav-wrapper {
  background: #ffffff;
  padding: 0.8em 1.2em;
  border-radius: 10px;
  margin: 0 auto 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  font-family: "Poppins", sans-serif;
  color: #002d56;
  max-width: 1200px;
}

/* Toggle row (mobile) */
.page-nav-toggle {
  display: none;                      /* hidden on desktop */
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
  gap: .75rem;
}

.page-nav-toggle strong {
  color: #002d56;
  font-weight: 700;
}

.toggle-icon {
  font-size: 1.2rem;
  transition: transform 0.3s;
}

.page-nav-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(180deg);
}

/* Link list */
.page-nav-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 2em;
  align-items: center;
  font-size: 0.95rem;
  margin-top: 0.4em;
}

.page-nav-list a {
  text-decoration: none;
  color: #002d56;
  font-weight: 600;
  transition: color 0.2s ease;
}

.page-nav-list a:hover {
  color: #c8006b;
}

/* ===========================
   Mobile behaviour
   =========================== */
@media (max-width: 768px) {
  .page-nav-toggle {
    display: flex;                    /* show toggle on mobile */
  }

  .page-nav-list {
    flex-direction: column;           /* stack links */
    gap: 0.8em;
    display: none;                    /* collapsed by default */
    margin-top: 0.8em;
  }

  .page-nav-list.show {
    display: flex;                    /* open state (JS toggles this) */
  }
}