:root{
  --accent:#0096fa;         /* blauer Strich unten */
  /* dunkler Verlauf */
  --gradTop:#222832;
  --gradMid:#1a1f29;
  --gradBot:#10151d;

  --itemText:#e9eef7;
  --itemTextActive:#ff3b30;  /* aktiver Tab = rot */
  --shadow:0 6px 18px rgba(0,0,0,.25);
}

.mainnav{
  position:relative;
  background: linear-gradient(to bottom, var(--gradTop) 0%, var(--gradMid) 50%, var(--gradBot) 100%);
  box-shadow: var(--shadow);
}
.mainnav::after{
  content:""; position:absolute; left:0; right:0; bottom:6; height:3px;
  background:var(--accent);
}

/* zentrierter Inhalt */
.mainnav__inner{ max-width: 1200px; margin: 0 auto; }

.mainnav__bar{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:0 10px; min-height:44px;
}

.mainnav__brand{ display:none; } /* zentriertes Menü ohne Brand */

.mainnav__toggle{
  display:none;
  position:absolute; left:8px; top:6px;
  border:none; background:transparent; color:#dfe6f3;
  font-size:22px; line-height:1; padding:6px 8px; cursor:pointer;
}
.mainnav__toggle:focus{ outline:2px solid var(--accent); outline-offset:2px; }

.mainnav__list{ display:flex; gap:2px; list-style:none; padding:0; margin:0; }
.mainnav__item{ position:relative; }
.mainnav__link{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; color:var(--itemText); text-decoration:none;
  border-left:1px solid rgba(255,255,255,.06);
  border-right:1px solid rgba(0,0,0,.25);
  transition: background .15s ease, color .15s ease;
}
.mainnav__link:hover{ background: rgba(255,255,255,.06); }
.mainnav__link:focus{ outline:2px solid var(--accent); outline-offset:2px; }
.mainnav__item.is-active > .mainnav__link{
  color: var(--itemTextActive);
  background: linear-gradient(to bottom, #2c333e 0%, #232a34 45%, #161b22 46%, #13181e 100%);
}

/* Submenu (Desktop: hover) */
.mainnav__sub{
  position:absolute; left:0; top:100%;
  min-width:240px; background:#1b2028; color:#dfe6f3;
  border:1px solid rgba(255,255,255,.08); border-top:none;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  display:none; z-index:30;
}
.mainnav__item:hover > .mainnav__sub{ display:block; }
.mainnav__sub a{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; color:#e9eef7; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mainnav__sub a:hover{ background:#243042; }
.mainnav__sub .disabled{ color:#7b8594; cursor:not-allowed; pointer-events:none; background:#151a21; }

.caret{ font-size:12px; opacity:.7; margin-left:2px; }

/* Mobil */
@media (max-width:900px){
  .mainnav__toggle{ display:block; }
  .mainnav__list{
    position:fixed; left:0; right:0; top:0; bottom:0;
    padding:56px 10px 10px;
    background: linear-gradient(to bottom, var(--gradTop) 0%, var(--gradBot) 100%);
    flex-direction:column; gap:6px;
    transform: translateY(-100%); transition: transform .2s ease;
    z-index:70;
  }
  .mainnav.is-open .mainnav__list{ transform: translateY(0); }
  .mainnav__item:hover > .mainnav__sub{ display:none; } /* Hover off */
  .mainnav__sub{ position:static; display:none; border:1px solid rgba(255,255,255,.08); }
  .mainnav__item.is-open > .mainnav__sub{ display:block; }
  .mainnav__link{ padding:14px 16px; }
}
@media (max-width:520px){
  .mainnav__sub a{ padding-left:18px; }
}