/* Digitana Social - Hauptnavigation
   Auslagerung aus base.css / Feinschliff 2026-05-19 V1
   Zweck: Hauptnavigation separat führen, ohne Optik oder Lichtattribute zu ändern.
   Wichtig: data-navigation-light-area, data-own-profile-nav und Lichtlogik bleiben im HTML/JS. */

.ds-nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 38px 0;
  padding: 16px 16px 13px;
  border-radius: 11px 11px 0 0;
  background:
    linear-gradient(135deg, rgba(226, 241, 250, 0.26), rgba(82, 154, 198, 0.28) 32%, rgba(16, 37, 54, 0.86) 74%, rgba(9, 23, 36, 0.92) 100%),
    linear-gradient(180deg, rgba(30, 55, 73, 0.96), rgba(8, 20, 32, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -14px 28px rgba(0, 0, 0, 0.22),
    0 10px 26px rgba(0, 0, 0, 0.24);
}

.ds-nav-item {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 14px;
  border: 0;
  border-radius: 7px;
  color: #c2d9e8;
  background:
    linear-gradient(180deg, rgba(17, 34, 49, 0.92), rgba(2, 7, 13, 0.98));
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -7px 13px rgba(0, 0, 0, 0.36);
}

.ds-nav-active {
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(226, 242, 252, 0.34), rgba(72, 166, 222, 0.45) 34%, rgba(4, 16, 28, 0.98) 78%),
    linear-gradient(180deg, rgba(38, 80, 111, 0.98), rgba(4, 15, 27, 0.98));
  box-shadow:
    0 0 14px rgba(32, 169, 255, 0.24),
    0 6px 14px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -8px 15px rgba(0, 0, 0, 0.34);
}

.ds-nav-disabled {
  opacity: 0.76;
}

@media (max-width: 860px) {
  .ds-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 14px 10px 0;
    padding: 13px 12px 11px;
    overflow: visible;
  }

  .ds-nav-item {
    justify-content: center;
    min-width: 0;
    min-height: 28px;
    padding: 6px 6px;
    white-space: nowrap;
    font-size: 0.74rem;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 380px) {
  .ds-nav {
    gap: 6px;
    padding: 12px 9px 10px;
  }

  .ds-nav-item {
    padding: 5px 4px;
    font-size: 0.68rem;
    letter-spacing: 0;
  }
}

@media (min-width: 861px) {
  .ds-nav {
    width: auto;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mein Profil / Nickname-Button
   Feinschliff 2026-05-19 V2
   Nur dieser Navigationsbutton: ausgeloggt "Mein Profil", eingeloggt Nickname.
   Standard ist dunkles Silber/Grau-Metall ohne Blau und ohne Braun.
   Intern bleibt data-navigation-light-area="mein_profil" erhalten. */

.ds-nav-own-profile {
  --ds-nav-profile-tone: #c6ccd2;
  --ds-nav-profile-tone-soft: rgba(198, 204, 210, 0.28);
  --ds-nav-profile-tone-glow: rgba(228, 233, 238, 0.30);
  color: #f4f6f8;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(245, 248, 250, 0.20), transparent 52%),
    linear-gradient(135deg, rgba(218, 224, 230, 0.22), color-mix(in srgb, var(--ds-nav-profile-tone) 26%, rgba(66, 70, 76, 0.18)) 36%, rgba(12, 13, 15, 0.98) 78%),
    linear-gradient(180deg, color-mix(in srgb, var(--ds-nav-profile-tone) 20%, rgba(38, 42, 47, 0.96)), rgba(6, 7, 8, 0.98));
  box-shadow:
    0 0 15px var(--ds-nav-profile-tone-soft),
    0 5px 12px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(245, 248, 250, 0.24),
    inset 0 -7px 13px rgba(0, 0, 0, 0.38);
}

.ds-nav-own-profile.ds-nav-disabled {
  opacity: 0.92;
}

.ds-nav-own-profile.ds-nav-active {
  color: #ffffff;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.30), transparent 54%),
    linear-gradient(135deg, rgba(236, 240, 243, 0.30), color-mix(in srgb, var(--ds-nav-profile-tone) 44%, rgba(202, 208, 214, 0.24)) 38%, rgba(14, 15, 17, 0.98) 78%),
    linear-gradient(180deg, color-mix(in srgb, var(--ds-nav-profile-tone) 34%, rgba(52, 56, 62, 0.98)), rgba(7, 8, 10, 0.98));
  box-shadow:
    0 0 18px var(--ds-nav-profile-tone-glow),
    0 0 28px color-mix(in srgb, var(--ds-nav-profile-tone) 26%, transparent),
    0 6px 14px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -8px 15px rgba(0, 0, 0, 0.34);
}

.ds-nav-profile-accent-default,
.ds-nav-profile-accent-metallic_blue {
  --ds-nav-profile-tone: #c6ccd2;
  --ds-nav-profile-tone-soft: rgba(198, 204, 210, 0.28);
  --ds-nav-profile-tone-glow: rgba(228, 233, 238, 0.30);
}

.ds-nav-profile-accent-silver_gray {
  --ds-nav-profile-tone: #d7dde3;
  --ds-nav-profile-tone-soft: rgba(215, 221, 227, 0.34);
  --ds-nav-profile-tone-glow: rgba(235, 240, 244, 0.44);
}

.ds-nav-profile-accent-gold {
  --ds-nav-profile-tone: #ffd76a;
  --ds-nav-profile-tone-soft: rgba(255, 215, 106, 0.34);
  --ds-nav-profile-tone-glow: rgba(255, 215, 106, 0.46);
}

.ds-nav-profile-accent-metallic_red {
  --ds-nav-profile-tone: #ff2f3f;
  --ds-nav-profile-tone-soft: rgba(255, 47, 63, 0.30);
  --ds-nav-profile-tone-glow: rgba(255, 47, 63, 0.44);
}

.ds-nav-profile-accent-metallic_green {
  --ds-nav-profile-tone: #38e889;
  --ds-nav-profile-tone-soft: rgba(56, 232, 137, 0.30);
  --ds-nav-profile-tone-glow: rgba(56, 232, 137, 0.44);
}

.ds-nav-profile-accent-metallic_rose {
  --ds-nav-profile-tone: #ff79ad;
  --ds-nav-profile-tone-soft: rgba(255, 121, 173, 0.30);
  --ds-nav-profile-tone-glow: rgba(255, 121, 173, 0.44);
}

.ds-nav-profile-accent-metallic_violet {
  --ds-nav-profile-tone: #a16bff;
  --ds-nav-profile-tone-soft: rgba(161, 107, 255, 0.30);
  --ds-nav-profile-tone-glow: rgba(161, 107, 255, 0.44);
}

.ds-nav-profile-accent-steel_blue {
  --ds-nav-profile-tone: #6aa6c9;
  --ds-nav-profile-tone-soft: rgba(106, 166, 201, 0.32);
  --ds-nav-profile-tone-glow: rgba(106, 166, 201, 0.44);
}