/* NORDIX — Menüleiste als Pille
   Aufbau nach Björns Screenshot: dunkler Balken mit heller Umrandung und
   runden Enden, Punkte in Versalien, der aktive Punkt als gefüllte Pille.
   Ergänzt: beim Überfahren und beim Drücken entsteht ein oranger Effekt.

   Drei Stufen:
     ab 1000px  volle Pille
     700–999px  gedrängte Pille, gleiche Formensprache
     unter 700  Schalter mit aufklappender Tafel */

:root{
  --nav-h:44px;
  --nav-r:999px;
}

header{position:sticky;top:0;z-index:40}

header nav{
  margin-left:auto;
  display:flex;align-items:center;gap:2px;
  height:var(--nav-h);padding:4px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:var(--nav-r);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(8px);
}

header nav a{
  position:relative;
  display:inline-flex;align-items:center;
  height:calc(var(--nav-h) - 10px);
  padding:0 17px;border-radius:var(--nav-r);
  font-family:var(--font-body);
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.78);text-decoration:none;white-space:nowrap;
  transition:color .22s ease,background-color .22s ease,box-shadow .22s ease;
}

header nav a:hover,
header nav a:focus-visible{
  color:var(--orange);
  background:color-mix(in srgb,var(--orange) 13%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 42%,transparent);
}
header nav a:active{
  color:var(--bg);background:var(--orange);
  box-shadow:inset 0 0 0 1px var(--orange);
}
header nav a[aria-current="page"]{
  color:var(--bg);background:#fff;box-shadow:none;
}
header nav a[aria-current="page"]:hover{
  background:var(--orange);color:var(--bg);box-shadow:none;
}

/* ---------- Schalter, nur unterhalb von 700px sichtbar ---------- */
.navtoggle{
  display:none;margin-left:auto;
  width:var(--nav-h);height:var(--nav-h);flex:0 0 auto;
  align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.34);border-radius:var(--nav-r);
  background:rgba(255,255,255,.03);backdrop-filter:blur(8px);
  cursor:pointer;padding:0;
  transition:border-color .22s ease,background-color .22s ease;
}
.navtoggle:hover,.navtoggle:focus-visible{
  border-color:var(--orange);background:color-mix(in srgb,var(--orange) 13%,transparent);
}
.navtoggle i{position:relative;display:block;width:17px;height:1.5px;background:#fff;
  border-radius:2px;transition:background-color .22s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.navtoggle i::before,.navtoggle i::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:#fff;border-radius:2px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background-color .22s ease}
.navtoggle i::before{top:-5.5px}
.navtoggle i::after{top:5.5px}
.navtoggle:hover i,.navtoggle:hover i::before,.navtoggle:hover i::after{background:var(--orange)}

.navtoggle[aria-expanded="true"] i{background:transparent}
.navtoggle[aria-expanded="true"] i::before{transform:translateY(5.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] i::after{transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- Aufklappende Tafel ---------- */
.navpanel{
  position:absolute;top:100%;left:0;right:0;
  padding:14px var(--pad) 20px;
  background:color-mix(in srgb,var(--bg) 96%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .28s ease,transform .32s cubic-bezier(.2,.7,.3,1),visibility 0s .32s;
}
.navpanel[data-open="true"]{
  opacity:1;visibility:visible;transform:none;transition:opacity .28s ease,
    transform .32s cubic-bezier(.2,.7,.3,1),visibility 0s;
}
.navpanel a.item{
  display:flex;align-items:center;
  height:50px;padding:0 20px;border-radius:var(--nav-r);
  border:1px solid rgba(255,255,255,.16);
  font-family:var(--font-body);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.82);text-decoration:none;
  transition:color .22s ease,background-color .22s ease,border-color .22s ease;
}
.navpanel a.item:hover,.navpanel a.item:focus-visible{
  color:var(--orange);background:color-mix(in srgb,var(--orange) 13%,transparent);border-color:color-mix(in srgb,var(--orange) 42%,transparent);
}
.navpanel a.item:active{color:var(--bg);background:var(--orange);border-color:var(--orange)}
.navpanel a.item[aria-current="page"]{color:var(--bg);background:#fff;border-color:#fff}
.navpanel .cta-a{margin-top:8px;width:100%;min-width:0}
.navpanel .cta-a .lab{right:auto;left:calc(var(--cta-h) + 16px)}

/* ---------- Tablet: gedrängte Pille ---------- */
@media(max-width:1100px){
  header nav a{padding:0 12px;font-size:10.5px;letter-spacing:.11em}
}
@media(max-width:860px){
  header{gap:12px}
  header .brand{width:96px}
  header nav{--nav-h:40px}
  header nav a{padding:0 10px;font-size:10px;letter-spacing:.08em}
}

/* ---------- Handy: Schalter statt Leiste ---------- */
@media(max-width:700px){
  header{padding:10px var(--pad);gap:10px}
  header .brand{width:104px}
  header nav{display:none}
  /* Nur der Button IN der Leiste verschwindet — nicht die Kopie in der Tafel.
     Ohne den Kindselektor trifft die Regel auch die Kopie, weil die Tafel
     im Header hängt. */
  header > .cta-a.mini{display:none}
  .navtoggle{display:flex}
}
@media(max-width:380px){
  header .brand{width:88px}
}

@media(prefers-reduced-motion:reduce){
  .navpanel,.navtoggle i,.navtoggle i::before,.navtoggle i::after{transition:none}
}