/* ============================================================
   MOBILE-NAVIGATION FUER DIE APP-SEITEN
   Die Sidebar wurde unter dem jeweiligen Breakpoint komplett
   ausgeblendet — damit war auf Tablet/Handy keine Navigation
   mehr erreichbar. Sie wird jetzt zur Schublade.

   Dieses File enthaelt nur das Breakpoint-unabhaengige Aussehen.
   Das Umschalten selbst steht in der Media-Query der jeweiligen
   Seite, damit jede Seite ihren eigenen Breakpoint behaelt.
   ============================================================ */

.mobnav-btn{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;padding:0;
  border:1px solid var(--line,rgba(21,18,16,.12));border-radius:11px;
  background:#fff;color:var(--text,#151210);cursor:pointer;
}
.mobnav-btn:hover{background:rgba(21,18,16,.05)}
.mobnav-btn b{position:relative;display:block;width:18px;height:1.6px;border-radius:2px;background:currentColor}
.mobnav-btn b:before,.mobnav-btn b:after{
  content:"";position:absolute;left:0;width:18px;height:1.6px;border-radius:2px;
  background:currentColor;transition:transform .2s ease;
}
.mobnav-btn b:before{top:-6px}
.mobnav-btn b:after{top:6px}
body.mobnav-open .mobnav-btn b{background:transparent}
body.mobnav-open .mobnav-btn b:before{transform:translateY(6px) rotate(45deg)}
body.mobnav-open .mobnav-btn b:after{transform:translateY(-6px) rotate(-45deg)}

.mobnav-overlay{
  position:fixed;inset:0;z-index:110;background:rgba(21,18,16,.42);
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
body.mobnav-open .mobnav-overlay{opacity:1;pointer-events:auto}
body.mobnav-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .sidebar{transition:none!important}
  .mobnav-overlay,.mobnav-btn b:before,.mobnav-btn b:after{transition:none}
}