/* ============================================================
   Handy-Menue (bis 760 px): Burger statt "Erstgespraech" im Header,
   Panel faellt von oben herunter, Sprung zu den Sektionen.
   ============================================================ */
nav .burger{display:none;position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);
  background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0;flex-shrink:0;
  transition:border-color .4s var(--ease),background .4s var(--ease)}
nav .burger span{position:absolute;left:13px;right:13px;height:1.5px;border-radius:2px;background:var(--cream);
  transition:transform .55s var(--ease)}
nav .burger span:nth-child(1){top:17.5px}
nav .burger span:nth-child(2){top:24.5px}
html.menu-open nav .burger{border-color:rgba(var(--cream-rgb),.4)}
html.menu-open nav .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
html.menu-open nav .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.mnav,.mnav-bg{display:none}
@media(max-width:760px){
  nav .nlinks .txt,nav .nlinks .book{display:none}
  nav .burger{display:block}

  .mnav-bg{display:block;position:fixed;inset:0;z-index:94;background:rgba(5,5,5,.62);opacity:0;pointer-events:none;
    transition:opacity .45s var(--ease);touch-action:none}
  .mnav{display:block;position:fixed;left:0;right:0;top:0;z-index:95;max-height:100svh;overflow-y:auto;overscroll-behavior:contain;
    background:#0e0e0e;border-bottom:1px solid var(--line);border-radius:0 0 22px 22px;
    padding:88px 28px 26px;transform:translateY(-102%);visibility:hidden;
    transition:transform .6s var(--ease),visibility 0s linear .6s;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
  html.menu-open .mnav{transform:none;visibility:visible;transition:transform .6s var(--ease),visibility 0s}
  html.menu-open .mnav-bg{opacity:1;pointer-events:auto}
  html.menu-open,html.menu-open body{overflow:hidden}

  .mnav .it{display:flex;align-items:baseline;gap:16px;padding:13px 0;border-top:1px solid var(--line);
    color:var(--cream);text-decoration:none;-webkit-tap-highlight-color:transparent}
  .mnav .it .n{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--grey-dim);min-width:20px}
  .mnav .it .l{font-size:30px;font-weight:700;letter-spacing:-0.035em;line-height:1.1}
  .mnav .it:active .l{color:var(--grey)}
  .mnav .mcta{display:flex;justify-content:center;width:100%;margin-top:22px;padding:17px 26px}
  .mnav .mfoot{display:flex;gap:18px;margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
  .mnav .mfoot a{color:rgba(var(--cream-rgb),.4);text-decoration:none}

  /* Eintraege laufen beim Oeffnen gestaffelt ein */
  .mnav .it,.mnav .mcta,.mnav .mfoot{opacity:0;transform:translate3d(0,-10px,0);
    transition:opacity .35s var(--ease),transform .5s var(--ease)}
  html.menu-open .mnav .it,html.menu-open .mnav .mcta,html.menu-open .mnav .mfoot{opacity:1;transform:none;
    transition-delay:calc(120ms + var(--k,0) * 45ms)}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .mnav,.mnav .it,.mnav .mcta,.mnav .mfoot,.mnav-bg,nav .burger span{transition:none!important}
}
/* Schmale Desktops (761 bis 900 px): alle Eintraege bleiben in einer Zeile, mit etwas engeren Abstaenden */
nav div.nlinks a,nav .logo span.wordmark{white-space:nowrap}
@media(min-width:761px) and (max-width:900px){nav div.nlinks{gap:20px}}
nav .burger:focus{outline:none}
nav .burger:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.mnav a:focus{outline:none}
.mnav a:focus-visible{outline:2px solid var(--cream);outline-offset:4px;border-radius:6px}
