/* ==========================================================================
   Gemeinsame Navigation — marschbefehl.com
   Eingebunden per <link rel="stylesheet" href="/assets/nav.css"> im <head>
   jeder Seite. Wird von /assets/site-chrome.js in #site-header gerendert.
   ========================================================================== */

:root{
  --green:#A1C74F;
  --green-dark:#84a83c;
  --ink:#1b1b1b;
  --ink-soft:#303030;
  --paper:#fafaf8;
  --line:#e6e5e0;
  --muted:#7a7a76;
}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 24px;
  background:rgba(250,250,248,0.9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  color:var(--ink);
  white-space:nowrap;
}
.site-header .brand img{width:26px; height:26px; display:block;}

.nav-desktop{
  display:none;
  align-items:center;
  gap:2px;
}
.nav-desktop a{
  position:relative;
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  color:var(--ink-soft);
  padding:8px 10px;
  border-radius:8px;
  white-space:nowrap;
  transition:color 160ms ease, background 160ms ease;
}
.nav-desktop a:hover{color:var(--ink); background:rgba(27,27,27,0.05);}
.nav-desktop a::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:3px;
  height:2px;
  background:var(--green);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 200ms ease;
}
.nav-desktop a:hover::after{transform:scaleX(1);}
.nav-desktop a[aria-current="page"]{color:var(--ink);}
.nav-desktop a[aria-current="page"]::after{transform:scaleX(1);}

.nav-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex:none;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  cursor:pointer;
  padding:0;
}
.nav-toggle .bars{
  position:relative;
  width:18px;
  height:13px;
}
.nav-toggle .bars span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform 220ms ease, opacity 180ms ease, top 220ms ease;
}
.nav-toggle .bars span:nth-child(1){top:0;}
.nav-toggle .bars span:nth-child(2){top:5.5px;}
.nav-toggle .bars span:nth-child(3){top:11px;}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1){top:5.5px; transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3){top:5.5px; transform:rotate(-45deg);}

.nav-mobile-backdrop{
  position:fixed;
  inset:0;
  z-index:98;
  background:rgba(27,27,27,0.28);
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease;
}
.nav-mobile-backdrop.is-visible{opacity:1; pointer-events:auto;}

.nav-mobile-panel{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:99;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 20px 50px rgba(27,27,27,0.14);
  height:0;
  overflow:hidden;
  padding:0 16px;
}
.nav-mobile-panel .spacer{height:66px;}
.nav-mobile-panel .nav-mobile-list{
  display:flex;
  flex-direction:column;
  padding:8px 0 20px;
}
.nav-mobile-panel a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 8px;
  font-size:17px;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--line);
}
.nav-mobile-panel a:last-child{border-bottom:none;}
.nav-mobile-panel a[aria-current="page"]{color:var(--green-dark);}
.nav-mobile-panel a .arrow{color:var(--muted); font-size:15px;}

@media (min-width:1040px){
  .nav-desktop{display:flex;}
  .nav-toggle{display:none;}
}