/* Menue Ebene 2/3 am Handy - siehe static/js/mobile_subnav.js (30.09.2026). Nur bis 860 px. */
.sn-all{display:none;}
@media (max-width: 860px){
  /* Leiste: kein Ausblend-Verlauf mehr rechts, dafuer Schatten je nach Scrollstand */
  #sectionSubnav.section-subnav{-webkit-mask-image:none; mask-image:none; position:relative;}
  .section-group-subnav{position:relative;}
  #sectionSubnav.section-subnav::before, .section-group-subnav::before{
    content:""; position:sticky; left:0; flex:none; align-self:stretch; width:1.3rem; margin-right:-1.3rem; z-index:3;
    pointer-events:none; opacity:0; transition:opacity .15s ease;
  }
  #sectionSubnav.section-subnav::before{background:linear-gradient(to right, var(--nav-bg), transparent);}
  .section-group-subnav::before{background:linear-gradient(to right, var(--bg), transparent);}
  #sectionSubnav.sn-fade-l::before, .section-group-subnav.sn-fade-l::before{opacity:1;}

  /* "Alle ▾" klebt rechts; der Verlauf davor zeigt: hier geht es weiter */
  .sn-all{
    position:sticky; right:0; z-index:3; flex:none; margin-left:auto; display:inline-flex; align-items:center;
    font:inherit; font-size:.8125rem; font-weight:700; line-height:1.2; white-space:nowrap; cursor:pointer;
    padding:.5rem .8rem; border:none; border-radius:9px;
    background:var(--nav-active-bg); color:var(--nav-active-ink);
    box-shadow:-.9rem 0 .7rem -.2rem var(--nav-bg);
  }
  .sn-all[hidden]{display:none;}
  .section-group-subnav .sn-all{
    background:var(--nav-active-bg); color:var(--nav-active-ink); border-radius:0 0 10px 10px; padding:.45rem .8rem .5rem;
    box-shadow:-.9rem 0 .7rem -.2rem var(--bg);
  }
  .sn-all:focus-visible{outline:2px solid var(--nav-active-ink); outline-offset:-3px;}

  /* Liste von unten */
  .sn-sheet-scrim{
    position:fixed; inset:0; z-index:60; background:var(--overlay, rgba(14,24,16,.48));
    display:flex; align-items:flex-end; justify-content:center; animation:sn-fade .15s ease;
  }
  .sn-sheet{
    width:100%; max-height:min(78vh, 34rem); display:flex; flex-direction:column; background:var(--surface); color:var(--ink);
    border-radius:20px 20px 0 0; box-shadow:0 -12px 40px -16px rgba(0,0,0,.4); animation:sn-up .2s ease;
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .sn-sheet-head{display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem .5rem 1.2rem; font-size:1.05rem;}
  .sn-sheet-close{
    width:2.5rem; height:2.5rem; border:1px solid var(--border); border-radius:50%; background:var(--surface);
    color:var(--ink); font:inherit; font-size:1rem; cursor:pointer;
  }
  .sn-sheet-list{overflow-y:auto; padding:.2rem .8rem 1rem; display:flex; flex-direction:column; gap:.3rem; overscroll-behavior:contain;}
  .sn-sheet-group{font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted); padding:.7rem .5rem .2rem;}
  .sn-sheet-item{
    font:inherit; font-size:1rem; font-weight:600; text-align:left; min-height:3rem; padding:.6rem 1rem;
    border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--ink); cursor:pointer;
  }
  .sn-sheet-item.active{background:var(--nav-active-bg); color:var(--nav-active-ink); border-color:var(--nav-active-bg); font-weight:700;}
  body.sn-sheet-open{overflow:hidden;}
}
@keyframes sn-up{from{transform:translateY(24px); opacity:0;} to{transform:none; opacity:1;}}
@keyframes sn-fade{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion: reduce){ .sn-sheet, .sn-sheet-scrim{animation:none;} }
@media print{ .sn-all, .sn-sheet-scrim{display:none !important;} }