:root{
  /* Tabs passen sich dem Text an – keine feste Breite nötig */
}

/* Grundlayout */
.nav .nav-list{
  list-style:none;
  display:flex;
  align-items:center;          /* vertikale Ausrichtung der Pillen */
  gap:10px;
  flex-wrap:wrap;
  margin:0;
  padding:0;
}

/* Nur TOP-LEVEL-TABS als grüne Pillen
   -> selektiere gezielt: .nav > .nav-list > li > a / .nav-btn  */
.nav > .nav-list > li > a,
.nav > .nav-list > li > .nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  border:2px solid var(--nav);
  background:var(--nav);
  color:var(--nav-fg);
  text-decoration:none;
  font-weight:700;
  line-height:1.1;
  cursor:pointer;
}
.nav > .nav-list > li > a:hover,
.nav > .nav-list > li > .nav-btn:hover{
  filter:brightness(0.95);
}
.nav > .nav-list > li > a[aria-current="page"]{
  background:var(--nav);
  color:#fff;
}

/* Dropdown-Grundstruktur */
.has-sub{ position:relative }

/* Standard: Untermenüs ZU */
.has-sub .sub{
  display:none;
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  min-width:220px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:8px;
  z-index:1000;
  list-style:none;             /* keine Bullets */
  margin:0;
}
/* Sicherheitsnetz: auch LI ohne Bullets */
.has-sub .sub li{ list-style:none; margin:0; padding:0; }

/* Offen bei Hover, Fokus oder Klick (JS setzt .open) */
.has-sub:hover .sub,
.has-sub:focus-within .sub,
.has-sub.open .sub{
  display:block;
}

/* Hover-Korridor zwischen Tab und Dropdown (verhindert Abreißen) */
.has-sub::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:12px; /* ggf. 14–16 erhöhen */
}

/* Sub-Links: normale Liste, KEINE grünen Pillen */
.nav .sub a{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  color:#1b1f23;
  text-decoration:none;
  background:#fff;
  border:0;
  font-weight:600;
}
.nav .sub a:hover{
  background:#f5f7f5;
  color:#0f2010;
}

/* Kleines Pfeilsymbol am Trigger */
.has-sub > .nav-btn::after{
  content:" ▾";
  font-weight:700;
}

/* Brand-Bereich */
.topbar-wrap{background:#fff}
.topbar{
  width:min(90vw, 1920px);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex;gap:12px;align-items:center}
.brand img{width:50px;height:50px;border-radius:8px;object-fit:cover}
.brand-title{font-weight:700;color:#243424}

/* Mobil: Dropdowns untereinander */
@media (max-width: 760px){
  .nav .nav-list{ gap:8px }
  .has-sub .sub{
    position:static;
    box-shadow:none;
    border-radius:10px;
    margin-top:6px;
  }
}