/* Menu B. Scoped to customer pages; the admin interface keeps its own shell. */
[data-menu-shell], .mn-header {
  --mn-canvas:#0b1f27; --mn-surface:#10333f; --mn-selected:#1a4b5c;
  --mn-text:#eef3f4; --mn-muted:#bfcacd; --mn-caption:#9aa9ae; --mn-border:#76909a;
  --mn-focus:#8fc1d1; --mn-action:#a84a22; --mn-action-hover:#8e3d1c;
  --mn-action-pressed:#7c3519; --mn-success:#66e3aa; --mn-award:#d9a65b;
  --mn-warning:#e6c27a; --mn-error:#ff9a80; --mn-ease:cubic-bezier(.22,1,.36,1);
  color:var(--mn-text); background:var(--mn-canvas);
  font-family:'OpenSein DM Sans','Segoe UI',sans-serif; font-size:17px; line-height:1.5;
  text-align:left; box-sizing:border-box;
}
[data-menu-shell] *, .mn-header * { box-sizing:border-box; }
[data-menu-shell] section { padding:0; border:0; background:none; }
[data-menu-shell] .mn-row { text-align:left; }
[data-menu-shell] [hidden], .mn-header [hidden] { display:none !important; }
[data-menu-shell] :is(a,button,input), .mn-header :is(a,button) { -webkit-tap-highlight-color:transparent; }
[data-menu-shell] a { color:inherit; text-decoration:none; }
[data-menu-shell] :is(a,button,input):focus-visible, .mn-header :is(a,button):focus-visible {
  outline:2px solid var(--mn-focus); outline-offset:3px;
}
[data-menu-shell] :is(h2,h3,p), .mn-header p { margin:0; }
[data-menu-shell] h2 { font:700 32px/36px 'Bricolage Grotesque',system-ui,sans-serif; letter-spacing:-.02em; color:var(--mn-text); }
[data-menu-shell] h3 { font:600 11px/16px 'OpenSein DM Sans',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--mn-caption); margin:0 4px 8px; }
[data-menu-shell] button, .mn-header button { font:inherit; cursor:pointer; }
.mn-icon { flex:0 0 24px; width:24px; height:24px; display:inline-block; vertical-align:middle; }
.mn-header.site-head { background:#0b1f27; border:0; box-shadow:none; color:#eef3f4; padding:0; }
.mn-header-inner { min-height:56px; padding:4px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1440px; margin:auto; }
.mn-header .merk, .mn-sidebar-brand { color:#eef3f4; display:flex; align-items:center; gap:9px; text-decoration:none; }
.mn-header .merk svg, .mn-sidebar-brand svg { width:30px; height:30px; }
.mn-header .merk { font-size:21px; }
.mn-header .merk .merk-naam, .mn-sidebar-brand .merk-naam { color:inherit; }
.mn-header .woordmerk, .mn-sidebar-brand .woordmerk { font-size:22px; }
.mn-header :is(.wm-open,.wm-sein), .mn-sidebar-brand :is(.wm-open,.wm-sein) { color:#eef3f4; }
.mn-header .merk-teken, .mn-sidebar-brand .merk-teken { color:#8fc1d1; }
.mn-header .merk-teken .raam, .mn-sidebar-brand .merk-teken .raam { animation:none; fill:#d9a65b; }
.mn-toggle, .mn-secondary, .mn-primary, .mn-text-button, .mn-back {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px;
  padding:10px 16px; border:1px solid transparent; border-radius:12px;
  font:600 16px/24px 'OpenSein DM Sans','Segoe UI',sans-serif; text-decoration:none; cursor:pointer;
  transition:background-color 120ms,transform 120ms var(--mn-ease); overflow-wrap:anywhere;
}
.mn-primary { background:var(--mn-action); color:#fff !important; }
.mn-primary:hover { background:var(--mn-action-hover); }
.mn-primary:active { background:var(--mn-action-pressed); transform:scale(.98); transition-duration:90ms; }
.mn-secondary { color:var(--mn-text) !important; background:var(--mn-surface); border-color:var(--mn-border); }
.mn-header .mn-secondary, .mn-panel-head .mn-secondary { border-color:transparent; }
.mn-secondary:hover, .mn-secondary:active { background:var(--mn-selected); }
.mn-text-button, .mn-back { background:transparent; color:var(--mn-text); border:0; padding-inline:4px; justify-content:flex-start; }
.mn-text-button:hover, .mn-back:hover { text-decoration:underline; text-underline-offset:4px; }
.mn-toggle { margin-left:auto; }
.mn-shell { padding:20px; }
.mn-panel-head { display:flex; align-items:center; gap:12px; min-height:56px; }
.mn-panel-head [data-menu-close] { margin-left:auto; }
.mn-panel-head .mn-icon { width:20px; height:20px; flex-basis:20px; }
.mn-panel-head [data-menu-back] { font-weight:600; }
.mn-panel-head button { flex-shrink:0; white-space:nowrap; }
.mn-shell:not(.is-open) [data-menu-close] { display:none; }
.mn-scroll { min-width:0; }
.mn-search { margin:16px 0 14px; }
.mn-search label { display:block; font-size:14px; line-height:20px; font-weight:600; color:var(--mn-muted); margin:0 0 8px; }
.mn-search-input { display:flex; align-items:center; gap:12px; background:var(--mn-surface); border:1px solid var(--mn-border); border-radius:12px; min-height:52px; padding-left:14px; color:var(--mn-muted); }
.mn-search-input:focus-within { outline:2px solid var(--mn-focus); outline-offset:2px; }
.mn-search-input input { appearance:none; -webkit-appearance:none; min-width:0; width:100%; border:0; border-radius:12px; padding:13px 4px; margin:0; background:transparent; color:var(--mn-text); font:400 16px/24px 'OpenSein DM Sans',sans-serif; box-shadow:none; }
.mn-search-input input:focus { outline:none; }
.mn-search-input input::placeholder { color:var(--mn-muted); opacity:1; }
.mn-search-input input::-webkit-search-cancel-button { display:none; }
.mn-clear { border:0; color:var(--mn-text); background:transparent; min-width:48px; min-height:48px; display:grid; place-items:center; border-radius:10px; }
.mn-clear:hover { background:var(--mn-selected); }
.mn-search-launch { display:none; }
.mn-account { background:var(--mn-surface); border-radius:14px; margin:0 0 24px; padding:0; font-size:14px; line-height:20px; }
.mn-visitor { padding:14px 16px 16px; }
.mn-visitor strong { display:block; font-weight:600; margin-bottom:16px; }
.mn-account-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mn-account-actions a { padding-inline:8px; }
.mn-member { display:flex; align-items:center; gap:16px; padding:12px 16px; min-height:64px; }
.mn-member>span { flex:1; min-width:0; }
.mn-member strong { display:block; font-weight:600; }
.mn-account-status { display:block; margin-top:4px; color:var(--mn-muted); font-size:14px; }
.mn-account-status[data-signal=on]::before { content:''; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--mn-success); }
.mn-account-pending { padding:14px 16px; color:var(--mn-muted); }
.mn-account [data-menu-status-retry] { margin-inline:16px; color:var(--mn-focus); font-size:14px; }
.mn-group { margin:0 0 24px; }
.mn-row { display:flex; position:relative; align-items:center; gap:16px; padding:12px; min-height:52px; width:100%; border:0; border-radius:12px; background:transparent; color:var(--mn-text); text-decoration:none; font:500 17px/24px 'OpenSein DM Sans',sans-serif; }
.mn-row>.mn-icon { color:var(--mn-caption); }
.mn-row>span { flex:1; min-width:0; overflow-wrap:anywhere; }
.mn-row>.mn-icon:last-child:not(:first-child) { margin-left:auto; width:20px; flex-basis:20px; }
.mn-row:hover { background:var(--mn-surface); }
.mn-row:active { background:var(--mn-selected); }
.mn-row[aria-current=page] { background:var(--mn-selected); font-weight:600; }
.mn-row[aria-current=page]>.mn-icon { color:var(--mn-focus); }
.mn-row[aria-current=page]::before { content:''; position:absolute; left:1px; width:3px; top:14px; bottom:14px; border-radius:2px; background:var(--mn-focus); }
.mn-further { border-top:1px solid #35545f; padding-top:12px; }
.mn-sub-intro { color:var(--mn-muted); font-size:16px; padding:12px; }
.mn-tools { border-top:1px solid #35545f; margin-top:24px; padding-top:24px; }
.mn-languages { display:flex; gap:8px; padding:6px; border:1px solid var(--mn-border); border-radius:12px; margin:8px 0 20px; }
.mn-languages a { display:flex; align-items:center; justify-content:center; flex:1; min-height:48px; border-radius:8px; font-size:15px; }
.mn-languages [aria-current] { background:var(--mn-selected); font-weight:600; }
.mn-logout { width:100%; margin-top:12px; }
.mn-legal { display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; padding-top:16px; font-size:14px; color:var(--mn-muted); }
.mn-legal a { display:flex; align-items:center; min-height:48px; text-decoration:underline; text-underline-offset:4px; }
.mn-desktop-account:empty { display:none; }
.mn-offline { background:#3b3424; color:#e6c27a; padding:12px 20px; font-size:14px; }
.mn-sr { position:absolute !important; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mn-sidebar-brand { display:none; }
/* De indeling hangt aan menu-b-vroeg, die schil.js vóór de eerste tekening zet.
   Zonder javascript komt die klasse er niet en blijven de links in de pagina. */
.menu-b-vroeg body[data-menu-b] { padding-top:calc(56px + env(safe-area-inset-top,0px)); }
.menu-b-vroeg .mn-header { position:fixed; inset:0 0 auto; z-index:70; padding-top:env(safe-area-inset-top,0px); }
.menu-b-vroeg .mn-shell { display:none; padding:0; }
.menu-b-vroeg .mn-shell.is-open {
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  position:fixed; inset:0; top:var(--mn-viewport-top,0px); height:100vh; height:var(--mn-viewport-height,100dvh);
  z-index:1000; opacity:1; animation:mn-enter 220ms var(--mn-ease) both;
}
.menu-b-vroeg .mn-panel-head { padding:4px 20px; padding-top:calc(4px + env(safe-area-inset-top,0px)); border-bottom:1px solid #35545f; }
.menu-b-vroeg .mn-shell:is([data-view=help],[data-view=about],[data-view=search])>.mn-panel-head { display:grid; grid-template-columns:1fr auto; padding-bottom:16px; }
.menu-b-vroeg .mn-shell:is([data-view=help],[data-view=about],[data-view=search])>.mn-panel-head h2 { grid-column:1 / -1; grid-row:2; }
.menu-b-vroeg .mn-shell:is([data-view=help],[data-view=about],[data-view=search])>.mn-panel-head [data-menu-close] { grid-column:2; grid-row:1; }
.menu-b-vroeg .mn-scroll { overflow:auto; overscroll-behavior:contain; min-height:0; padding:0 20px calc(24px + env(safe-area-inset-bottom,0px)); scrollbar-color:#76909a #10333f; scrollbar-width:thin; }
.menu-b-vroeg .mn-sub-links { display:none; }
.menu-b-vroeg .mn-shell[data-view=help] :is(.mn-group,.mn-account,.mn-tools,.mn-search),
.menu-b-vroeg .mn-shell[data-view=about] :is(.mn-group,.mn-account,.mn-tools,.mn-search) { display:none; }
.menu-b-vroeg .mn-shell[data-view=help] [data-menu-subsection=about],
.menu-b-vroeg .mn-shell[data-view=about] [data-menu-subsection=help] { display:none; }
.menu-b-vroeg .mn-shell:is([data-view=help],[data-view=about]) .mn-group-button { display:none; }
.menu-b-vroeg .mn-shell:is([data-view=help],[data-view=about]) .mn-sub-links { display:block; padding-top:12px; }
.menu-b-vroeg .mn-shell:is([data-view=help],[data-view=about]) .mn-further { border:0; }
.menu-b-vroeg .mn-shell[data-view=search] :is(.mn-nav,.mn-account,.mn-tools) { display:none; }
.menu-b-vroeg .mn-shell[data-view=search] .mn-search { position:sticky; top:0; padding-top:16px; margin-top:0; background:var(--mn-canvas); z-index:2; padding-bottom:10px; }
.mn-results-summary { font-size:14px; color:var(--mn-muted); padding:8px 4px 16px; }
.mn-result { display:flex; align-items:center; gap:16px; background:var(--mn-surface); padding:16px; border-radius:12px; min-height:80px; margin-bottom:12px; }
.mn-result:hover, .mn-result:active { background:var(--mn-selected); }
.mn-result strong { display:block; color:var(--mn-text); font-size:17px; font-weight:600; }
.mn-result small { display:block; margin-top:4px; color:var(--mn-muted); font-size:14px; line-height:20px; }
.mn-result>span { flex:1; min-width:0; }
.mn-empty { padding:16px 4px; }
.mn-empty h3 { text-transform:none; letter-spacing:-.01em; font:700 24px/30px 'Bricolage Grotesque',system-ui,sans-serif; color:var(--mn-text); margin:0 0 12px; }
.mn-empty p { color:var(--mn-muted); margin-bottom:24px; }
.mn-empty .mn-primary { width:100%; }
.mn-empty .mn-text-button { margin-top:12px; }
[data-menu-logout-error] { padding:12px 4px; color:var(--mn-error); }
.mn-search-overlay { position:fixed; inset:0; z-index:1100; background:rgb(11 31 39 / .5); display:grid; place-items:center; padding:24px; }
.mn-search-dialog { width:min(640px,100%); max-height:min(720px,80dvh); border:1px solid #35545f; border-radius:18px; box-shadow:0 24px 64px rgb(0 0 0 / .24); padding:24px; display:flex; flex-direction:column; animation:mn-enter 220ms var(--mn-ease) both; }
.mn-search-dialog h2 { font-size:24px; line-height:30px; }
.mn-search-dialog .mn-panel-head { padding:0; border:0; gap:16px; }
.mn-search-dialog .mn-search { flex:none; margin-top:20px; }
.mn-search-dialog .mn-results { overflow:auto; min-height:0; padding:4px; margin-inline:-4px; }
.mn-search-help { color:var(--mn-muted); font-size:14px; line-height:20px; padding:16px 4px 0; }
.mn-on-page { background:#fff; color:#121c21; border:1px solid #d7dfdd; padding:16px 20px; border-radius:18px; margin:24px 0 32px; }
.mn-on-page summary { font-weight:600; cursor:pointer; min-height:48px; }
.mn-on-page a { display:block; padding:10px 0; color:#a84a22; text-underline-offset:4px; }
body[data-menu-b] :is(h2,h3,section,details)[id] { scroll-margin-top:calc(72px + env(safe-area-inset-top,0px)); }
.mn-progress { --mn-ease:cubic-bezier(.22,1,.36,1); background:#fff; color:#121c21; border-radius:18px; padding:20px; margin:0 0 24px; }
.mn-progress-label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#526268; font-weight:600; margin:0 0 12px; }
.mn-progress h2 { font:700 24px/30px 'Bricolage Grotesque',system-ui,sans-serif; color:#121c21; letter-spacing:-.01em; margin:0 0 20px; }
.mn-progress-segments { display:flex; gap:7px; margin:0 0 14px; }
.mn-progress-segments i { display:block; flex:1; min-width:0; height:5px; border-radius:3px; background:#d9e1de; }
.mn-progress-segments i.is-done { background:#d9a65b; }
.mn-progress-count { font-size:14px; line-height:20px; color:#526268; margin:0 0 14px; }
.mn-progress a { font-size:16px; font-weight:600; color:#a84a22; text-underline-offset:4px; display:inline-block; min-height:48px; padding:10px 0; }
.mn-progress a:focus-visible, .mn-on-page :is(a,summary):focus-visible { outline:2px solid #1a4b5c; outline-offset:3px; }
.mn-progress.is-celebrating { animation:mn-celebrate 400ms var(--mn-ease); }
.mn-progress.is-updated .mn-progress-segments { animation:mn-confirm 240ms var(--mn-ease); }
body[data-menu-b] #mijn-kast .mn-dashboard-grid { display:grid; gap:20px; margin-bottom:24px; }
body[data-menu-b] #mijn-kast .mn-progress { margin:0; padding:24px; }
body[data-menu-b] #mijn-kast .mn-context-card { border:1px solid #35545f; border-radius:18px; padding:24px; background:#10333f; color:#eef3f4; }
.mn-context-card h2 { color:inherit; font:700 24px/30px 'Bricolage Grotesque',system-ui,sans-serif; margin:0 0 16px; }
.mn-context-card p { color:#bfcacd; font-size:16px; line-height:24px; margin:0 0 12px; }
.mn-context-card a { display:inline-flex; align-items:center; min-height:48px; gap:8px; color:#eef3f4; font-weight:600; text-underline-offset:4px; }
.mn-context-card a:focus-visible, .mn-more>summary:focus-visible { outline:2px solid #8fc1d1; outline-offset:3px; }
.mn-more { border:0; padding:0; margin:0; }
.mn-more>summary { min-height:48px; padding:12px 0; color:#bfcacd; font-size:16px; font-weight:600; cursor:pointer; margin-bottom:16px; }
.mn-more>summary:hover { color:#eef3f4; }
.menu-b-vroeg body[data-menu-b] #mijn-kast :is(.bord-kop .seinlicht,.bord-rij .seinlicht) { animation:none !important; }
body[data-menu-b] #mijn-kast .mijn-kop { margin-bottom:24px; }
body[data-menu-b] #mijn-kast .mk-kop .stip { animation:none; }
body[data-menu-b] #mijn-kast h1 { font-size:32px; line-height:36px; letter-spacing:-.02em; }
body[data-menu-b] #mijn-kast .mn-mijn-actions { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 28px; }
body[data-menu-b] #mijn-kast .mn-mijn-actions a { min-height:48px; border-radius:12px; }
@media (max-width:359px) {
  .mn-header-inner,.menu-b-vroeg .mn-panel-head { padding-inline:16px; }
  .menu-b-vroeg .mn-scroll { padding-inline:16px; }
}
@media (min-width:768px) and (max-width:1023px) {
  .menu-b-vroeg .mn-scroll { padding-inline:max(20px,calc((100vw - 640px)/2)); }
  .menu-b-vroeg .mn-panel-head { padding-inline:max(20px,calc((100vw - 640px)/2)); }
}
@media (min-width:1024px) {
  .menu-b-vroeg body[data-menu-b] { padding:0 0 0 248px; }
  .menu-b-vroeg .mn-header { display:none; }
  .menu-b-vroeg .mn-shell { display:grid; position:fixed; inset:0 auto 0 0; width:248px; height:100vh; height:100dvh; grid-template-rows:auto minmax(0,1fr) auto auto; z-index:70; }
  .mn-sidebar-brand { display:flex; margin:24px 24px 16px; font-size:24px; }
  .mn-shell>.mn-panel-head, .mn-shell .mn-search { display:none; }
  .menu-b-vroeg .mn-scroll { padding:0 16px 24px; }
  .mn-search-launch { display:flex; width:100%; min-height:48px; align-items:center; gap:10px; border:1px solid var(--mn-border); border-radius:12px; color:var(--mn-text); background:var(--mn-surface); padding:10px 12px; font-size:14px; line-height:20px; margin:0 0 24px; text-align:left; }
  .mn-search-launch .mn-icon { width:20px; flex-basis:20px; }
  .mn-search-launch kbd { display:none; }
  .mn-row { font-size:16px; min-height:44px; padding:10px 12px; gap:12px; }
  .mn-row[aria-current=page]::before { top:10px; bottom:10px; }
  .mn-row>.mn-icon { width:22px; height:22px; flex-basis:22px; }
  .mn-row>.mn-icon:last-child:not(:first-child) { width:16px; flex-basis:16px; }
  .mn-group { margin-bottom:24px; }
  .mn-subsection .mn-group-button[aria-expanded=true]>.mn-icon:last-child { transform:rotate(90deg); }
  .menu-b-vroeg .mn-subsection .mn-group-button[aria-expanded=true]+.mn-sub-links { display:block; }
  .mn-sub-links .mn-row { padding-left:12px; font-size:15px; }
  .mn-sub-links .mn-row>.mn-icon:first-child { display:none; }
  .mn-sub-intro { display:none; }
  .mn-desktop-account { padding:12px 16px 16px; border-top:1px solid #35545f; }
  .mn-desktop-account .mn-account { margin:0; }
  .mn-desktop-account .mn-visitor { padding:12px; }
  .mn-desktop-account .mn-account-actions { gap:8px; }
  .mn-desktop-account .mn-account-actions a { font-size:13px; min-height:44px; padding:8px 4px; }
  .mn-desktop-account .mn-visitor strong { margin-bottom:8px; }
  .mn-desktop-account .mn-member { padding:12px; }
  .mn-desktop-account .mn-account-status { font-size:13px; }
  .mn-offline { padding:12px 16px; }
  .menu-b-vroeg body[data-menu-b] main>.wrap, .menu-b-vroeg body[data-menu-b] .wrap { width:calc(100% - 64px); max-width:1280px; }
  body[data-menu-b] .prose { max-width:68ch; }
  body[data-menu-b] :is(h2,h3,section,details)[id] { scroll-margin-top:24px; }
  body[data-menu-b] #mijn-kast h1 { font-size:40px; line-height:44px; }
  body[data-menu-b] #mijn-kast .mn-dashboard-grid { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
}
@keyframes mn-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes mn-confirm { from { opacity:.65; } to { opacity:1; } }
@keyframes mn-celebrate { 0%,100% { box-shadow:0 0 0 0 transparent; } 45% { box-shadow:0 0 0 3px #d9a65b; } }
@media (prefers-reduced-motion:reduce) {
  [data-menu-shell], [data-menu-shell] *, .mn-header *, .mn-progress, .mn-progress * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Vóór menu.js (menu-b-vroeg zonder menu-b-ready). De accountkaart volgt de
   stand die schil.js al op <html> zette: een bezoeker ziet de welkomkaart, een
   lid de lidkaart met "Account laden…". Wie ingelogd was ziet nooit Inloggen. */
.menu-b-vroeg:not(.menu-b-ready):not([data-stand=bezoeker]) [data-menu-visitor] { display:none; }
.menu-b-vroeg:not(.menu-b-ready):not([data-stand=bezoeker]) [data-menu-member][hidden] { display:flex !important; }
/* Tikt iemand op Menu voordat het script er is, dan springt de link naar het menu in de pagina. */
.menu-b-vroeg:not(.menu-b-ready) .mn-shell:has(#site-menu:target) { display:block; position:static; width:auto; height:auto; padding:20px; }

/* Meer letterruimte en herkenbare accenten, zonder de navigatie te veranderen. */
[data-menu-shell], .mn-header { --mn-muted:#d0dde1; --mn-caption:#b4c6cd; }
[data-menu-shell] h3 { font-size:12px; line-height:18px; letter-spacing:.065em; }
.mn-row > .mn-icon:first-child { color:var(--mn-focus); }
.mn-row[aria-current=page] > .mn-icon:first-child { color:var(--mn-success); }
.mn-sub-links .mn-row { line-height:1.5; }
@media(min-width:1024px) {
  .mn-desktop-account .mn-account-status, .mn-desktop-account .mn-account-actions a { font-size:14px; }
  .mn-search-launch { font-size:15px; }
}