/* ============================================================
   Dropdown-Navigation (Nav.js) + Content-Manager-Join-Badge
   ============================================================ */

.topnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* --- Gruppe + Button --- */
.nav-group { position: relative; }
.nav-group:not(:first-child)::before {
  content: ""; position: absolute; left: -3px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 20px; background: var(--line);
}
.nav-group__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 0; border-radius: 99px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-dim); background: transparent;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.nav-group__btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav-group__btn.active { color: #05060a; background: var(--grad-main); box-shadow: var(--glow-magenta); }
.nav-group__caret { font-size: 11px; transition: transform 0.25s ease; opacity: 0.8; }
.nav-group.open .nav-group__btn { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nav-group.open .nav-group__caret { transform: rotate(180deg); }

/* --- Menü (animiert) --- */
.nav-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  min-width: 210px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
  background: var(--card-strong); backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.6), var(--glow-soft);
  opacity: 0; transform: translateY(-10px) scale(0.97); transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-menu::before {
  content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.nav-group.open .nav-menu { opacity: 1; transform: none; pointer-events: auto; }

.nav-menu a {
  display: block; padding: 10px 14px; border-radius: 9px;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px; letter-spacing: 0.5px;
  color: var(--text-dim); white-space: nowrap;
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.15s, background 0.15s;
}
.nav-group.open .nav-menu a { opacity: 1; transform: none; }
/* gestaffeltes Einblenden der Einträge */
.nav-group.open .nav-menu a:nth-child(1) { transition-delay: 0.04s; }
.nav-group.open .nav-menu a:nth-child(2) { transition-delay: 0.07s; }
.nav-group.open .nav-menu a:nth-child(3) { transition-delay: 0.10s; }
.nav-group.open .nav-menu a:nth-child(4) { transition-delay: 0.13s; }
.nav-group.open .nav-menu a:nth-child(5) { transition-delay: 0.16s; }
.nav-group.open .nav-menu a:nth-child(6) { transition-delay: 0.19s; }
.nav-group.open .nav-menu a:nth-child(7) { transition-delay: 0.22s; }
.nav-menu a:hover {
  color: var(--text); background: rgba(255, 255, 255, 0.06);
  transform: translateX(2px); transition-delay: 0s;
}
.nav-menu a.active {
  color: var(--cyan-soft); background: rgba(0, 229, 255, 0.10);
  box-shadow: inset 2px 0 0 var(--cyan);
}

/* --- Server-Badge -> Content-Manager-Join-Button --- */
a.server-badge {
  text-decoration: none; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
a.server-badge:hover {
  background: rgba(182, 255, 60, 0.10); border-color: rgba(182, 255, 60, 0.55);
  box-shadow: 0 0 22px rgba(182, 255, 60, 0.25); transform: translateY(-1px);
  color: var(--lime);
}
.server-badge__label {
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap;
}
.server-badge__go {
  font-size: 10px; opacity: 0.55;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}
a.server-badge:hover .server-badge__go { opacity: 1; transform: translateX(3px); }

/* Gesperrte Gruppe (z.B. RaM): erst sichtbar, wenn die Rechte-Abfrage sie freigibt.
   Explizite Regel statt [hidden], damit keine display-Regel sie aushebelt. */
.nav-group--locked { display: none !important; }