/* Mobiele navigatie, gedeeld door A3–A5. Op brede schermen blijft de zijkolom van A2 en bestaat dit niet. */
@media(min-width:58.01rem){.mnav,.mnav__paneel,.mnav__achter,.obalk{display:none!important}}
@media(max-width:58rem){
  html[data-nav] .inhoud{display:none}
  /* Balk met het logo groot en écht gecentreerd (zoals A5): hamburger en taal liggen erover heen, links en rechts. */
  .mnav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:center;min-height:4.5rem;padding:.5rem 0;background:var(--papier);border-bottom:1px solid var(--lijn)}
  .mnav__knop,.mnav__sluit{appearance:none;background:none;border:0;width:3rem;height:3rem;display:grid;place-items:center;cursor:pointer;color:var(--inkt);border-radius:50%;padding:0;font:inherit}
  /* de knop linksboven zegt er ook in woorden bij wat hij doet */
  .mnav > .mnav__knop{width:auto;min-width:3rem;height:auto;padding:.35rem .5rem;border-radius:.6rem;gap:.15rem;justify-items:center}
  .mnav__label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs);line-height:1}
  .mnav__knop:active,.mnav__sluit:active{background:rgba(28,26,23,.06)}
  .mnav__ham{position:relative;display:block;width:22px;height:2px;background:currentColor;margin:.45rem 0}
  .mnav__ham::before,.mnav__ham::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor}
  .mnav__ham::before{top:-7px}.mnav__ham::after{top:7px}
  .mnav__merk{display:block;line-height:0}
  /* zo groot als A5, maar nooit zo breed dat het onder de hamburger of de taalknop schuift */
  .mnav > .mnav__merk img{width:min(14rem,calc(100vw - 11.5rem));height:auto}
  .mnav > .mnav__knop{position:absolute;left:.25rem;top:50%;transform:translateY(-50%)}
  .mnav .taal{top:50%;right:.6rem;transform:translateY(-50%);margin:0;font-size:.7rem}
  .mnav .taal summary{padding:.45rem .7rem}
  .mnav__achter{position:fixed;inset:0;background:rgba(28,26,23,.45);z-index:40;opacity:0;transition:opacity .25s}
  .mnav__achter.is-open{opacity:1}
  .mnav__paneel{z-index:50;background:var(--papier);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .mnav__paneel[hidden]{display:none}
  .mnav__kop .mnav__merk img{height:2.2rem;width:auto}
  .mnav__kop{display:flex;align-items:center;justify-content:space-between;margin:0 0 1rem;min-height:3rem}
  .mnav__kop .klein-kop{margin:0}
  .mnav__sluit{font-size:1.75rem;line-height:1;margin-right:-.75rem}
  .mnav__paneel .toc{font-size:1rem}
  .mnav__paneel .toc a{padding:.4rem 0;position:relative}
  .mnav__paneel .toc__deel{margin-bottom:1.5rem}
  body.is-menu{overflow:hidden}
}
