/* Gedeelde menubalk voor alle pagina's. Wit, huisstijl The Crown. */
.mb {
  display: block; margin: 0; gap: 0;
  --mb-fg: #222222; --mb-muted: #5d6470; --mb-line: #e3e7ee; --mb-blue: #0070bc; --mb-tint: #f2f7fc;
  position: sticky; top: 0; z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--mb-line);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}
html { scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; max-width: 100%; }
.mb-in { box-sizing: border-box; width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 20px; height: 64px; display: flex; align-items: center; gap: 24px; }
.mb-logo { display: block; flex: none; margin-right: auto; }
.mb-logo img { height: 28px; width: auto; display: block; mix-blend-mode: multiply; }
.mb-nav { display: flex; align-items: center; gap: 2px; }
.mb-nav a { color: var(--mb-fg); text-decoration: none; font-size: .92rem; font-weight: 500; padding: 8px 12px; border-radius: 8px; transition: background .15s, color .15s; white-space: nowrap; }
.mb-nav a:hover { background: var(--mb-tint); color: var(--mb-blue); }
.mb-nav a[aria-current] { color: var(--mb-blue); background: var(--mb-tint); }
.mb-nav .mb-all { margin-left: 10px; color: var(--mb-muted); border: 1px solid var(--mb-line); border-radius: 999px; padding: 7px 14px; font-size: .85rem; }
.mb-nav .mb-all:hover { border-color: var(--mb-blue); background: transparent; }
.mb a:focus-visible, .mb-btn:focus-visible { outline: 2px solid var(--mb-blue); outline-offset: 2px; }

.mb-btn { display: none; align-items: center; gap: 10px; font: 600 .9rem "Inter", system-ui, sans-serif; color: var(--mb-fg); background: none; border: 1px solid var(--mb-line); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.mb-ico { width: 16px; height: 10px; position: relative; }
.mb-ico::before, .mb-ico::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, top .2s; }
.mb-ico::before { top: 0; } .mb-ico::after { top: 8px; }
.mb-btn[aria-expanded="true"] .mb-ico::before { top: 4px; transform: rotate(45deg); }
.mb-btn[aria-expanded="true"] .mb-ico::after { top: 4px; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .mb-in { height: 58px; padding-inline: 16px; }
  .mb-logo img { height: 24px; }
  .mb-btn { display: inline-flex; }
  .mb-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--mb-line); box-shadow: 0 16px 32px -20px rgba(0, 0, 0, .25); padding: 6px 8px 12px; max-height: calc(100vh - 70px); overflow-y: auto; }
  .mb.open .mb-nav { display: flex; }
  .mb-nav a { font-size: 1.05rem; padding: 14px 12px; border-radius: 10px; }
  .mb-nav a + a { border-top: 1px solid var(--mb-line); border-radius: 0; }
  .mb-nav a[aria-current] { border-radius: 10px; }
  .mb-nav .mb-all { margin: 10px 4px 0; border: 1px solid var(--mb-line); border-radius: 999px; text-align: center; font-size: .92rem; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .mb-ico::before, .mb-ico::after, .mb-nav a { transition: none; } }