html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* ==== A365 CORE CSS ==================================================
   - Site-brede tokens, theming, base, container & page-grid
   - Header/Subnav + nav, menu overlay/panel, menu-quick, theme-knoppen
   - Footer layer (.a365-ft), utilities, icon/labels, social-kleuren
   - Houdt alle bestaande waardes; voegt page-min/ideal/max als tokens toe
   ==================================================================== */
/* reserveer altijd ruimte voor de scrollbar */

/* ========== FOOTER LAYER ========= */
@layer a365-ft {
  /* isolatie */
  .a365-ft, .a365-ft * { all: revert-layer; box-sizing: border-box; }

  /* tokens + basis */
  .a365-ft{
    --_bg: var(--bg,#fff);
    --_text: var(--text,#0b1320);
    --_muted: var(--muted,#6b7380);
    --_border: var(--border,#e5e9f1); 
    --_brand: var(--brand,#0059b2);
    --_radius: var(--radius,3px);
    --_gap: var(--gap,16px);
    --_padx: var(--pad-x,16px);
    --_colgap: var(--col-gap-desktop,32px);
    --page-width: 1200px;

    color: var(--_text);
    background: color-mix(in srgb, var(--_bg) 94%, #fff);
    border-top: 2px solid var(--_border);
    margin-top: calc(var(--_gap)*2);
  }
  html[data-theme="dark"] .a365-ft{ background: color-mix(in srgb, var(--_bg) 96%, #000); }

  .a365-ft .wrap{ max-width:var(--page-width); margin-inline:auto; padding:24px var(--_padx); }

  /* lay-out */
  .a365-ft .cols{
    display:grid; grid-template-columns:1fr;
    row-gap:var(--_gap); column-gap:var(--_colgap); padding:4px;
  }
  @media (min-width:768px){ .a365-ft .cols{ grid-template-columns:repeat(4,1fr); } }

  /* DUO: Service + (Mijn + Overig) */
  @media (max-width:767.98px){
    .a365-ft .duo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--_gap); }
    .a365-ft .col-service{ grid-column:1; }
    .a365-ft .right-stack{ grid-column:2; display:flex; flex-direction:column; gap:var(--_gap); }
  }
  @media (min-width:768px){
    .a365-ft .duo, .a365-ft .right-stack { display:contents; }
  }

  /* typografie */
  .a365-ft{ --ft-size:.94rem; --h4-size:1.07rem; font-size:var(--ft-size); line-height:1.45; text-size-adjust:100%; -webkit-text-size-adjust:100%; }
  .a365-ft :is(nav,section) > ul,
  .a365-ft :is(nav,section) > ul > li,
  .a365-ft :is(nav,section) > ul > li > a,
  .a365-ft .col-service :is(ul,li,a),
  .a365-ft .col-mijn :is(ul,li,a),
  .a365-ft .col-overig :is(ul,li,a){ font-size:var(--ft-size)!important; line-height:1.45!important; }

  .a365-ft h4{
    margin:0 0 8px!important;
    font:700 var(--h4-size)/1.3 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif!important;
    color:var(--_brand)!important;
  }
  html[data-theme="dark"] .a365-ft h4{ color:#fff!important; }
  @media (prefers-color-scheme: dark){
    html:not([data-theme]) .a365-ft h4{ color:#fff!important; }
  }

  .a365-ft p{ margin:.25rem 0; color:var(--_muted); }

  .a365-ft :is(nav,section)>ul{ margin:0!important; padding:0!important; list-style:none!important; }
  .a365-ft :is(nav,section)>ul li+li{ margin-top:6px!important; }
  .a365-ft :is(nav,section)>ul li a{
    display:block; font-size:.92rem; line-height:1.45; color:var(--_text)!important; text-decoration:none!important;
  }
  html[data-theme="dark"] .a365-ft :is(nav,section)>ul li a{ color:var(--_muted)!important; }
  .a365-ft :is(nav,section)>ul li a:hover{
    color:var(--_brand)!important; text-decoration:underline!important; text-underline-offset:2px!important; text-decoration-thickness:1px!important;
  }

  /* “Over A365” intro gelijk aan links */
  .a365-ft section[aria-label="Over A365"] > p{ font-size:.92rem; line-height:1.45; }

  /* Socialbar */
  .a365-ft .socialbar{ margin-top:calc(var(--_gap)*1.5); padding-top:12px; border-top:1px solid var(--_border); }
  .a365-ft .social-list{ display:flex; flex-wrap:wrap; gap:10px var(--_gap); align-items:center; justify-content:center; }
  .a365-ft .chip, .a365-ft .chipfb{
    display:inline-flex; align-items:center; gap:8px; border:1px solid var(--_brand); border-radius:999px; background:var(--_bg);
  }
  .a365-ft .chip{ padding:4px; }
  .a365-ft .chipfb{ padding:5.5px; }
  .a365-ft .chip svg{ width:22px; height:22px; }
  .a365-ft .chipfb svg{ width:19px; height:19px!important; }

  /* Extra rij onder socialbar */
  .a365-ft .infobar{ margin-top:var(--_gap); padding-top:12px; border-top:1px solid var(--_border); text-align:center; }
  .a365-ft .infobar p{ margin:0; font-size:.9rem; line-height:1.4; color:var(--_muted); }
}

@layer a365-ft{
  /* === BASIS: chips in light & auto krijgen muted === */
  html[data-theme="light"] .a365-ft .socialbar :is(.chip,.chipfb),
  html[data-theme="auto"]  .a365-ft .socialbar :is(.chip,.chipfb){
    color: var(--_muted) !important;
    border-color: var(--_muted) !important;
    background: var(--_bg);
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
  }

  /* Light + auto(light): hover -> brand (lichte tint) */
  html[data-theme="light"] .a365-ft .socialbar :is(.chip,.chipfb):hover,
  html[data-theme="light"] .a365-ft .socialbar :is(.chip,.chipfb):focus-visible{ 
    color: var(--_brand) !important;
    border-color: var(--_brand) !important;
    background: color-mix(in srgb, var(--_brand) 0%, var(--_bg));
  }
  @media (prefers-color-scheme: light){
    html[data-theme="auto"] .a365-ft .socialbar :is(.chip,.chipfb):hover,
    html[data-theme="auto"] .a365-ft .socialbar :is(.chip,.chipfb):focus-visible{
      color: var(--_brand) !important;
      border-color: var(--_brand) !important;
      background: color-mix(in srgb, var(--_brand) 0%, var(--_bg));
    }
  }

  /* Dark + auto(dark): basis = muted; hover -> wit; BG blijft 0% (ongewijzigd) */
  html[data-theme="dark"] .a365-ft .socialbar :is(.chip,.chipfb){
    color: var(--_muted) !important;
    border-color: var(--_muted) !important;
    background: var(--_bg) !important;
  }
  html[data-theme="dark"] .a365-ft :is(.chip,.chipfb):hover,
  html[data-theme="dark"] .a365-ft :is(.chip,.chipfb):focus-visible{
    color: #fff !important;
    border-color: #fff !important;
    background: var(--_bg) !important; /* geen tint */
  }
  @media (prefers-color-scheme: dark){
    html[data-theme="auto"] .a365-ft .socialbar :is(.chip,.chipfb){
      color: var(--_muted) !important;
      border-color: var(--_muted) !important;
      background: var(--_bg) !important;
    }
    html[data-theme="auto"] .a365-ft :is(.chip,.chipfb):hover,
    html[data-theme="auto"] .a365-ft :is(.chip,.chipfb):focus-visible{
      color: #fff !important;
      border-color: #fff !important;
      background: var(--_bg) !important;
    }
  }

  /* Icons laten meeschakelen met tekstkleur */
  .a365-ft .socialbar :is(.chip,.chipfb) svg :is(path, .cls-1){
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}

/* ===== TOKENS, THEMA, BASE ===== */
*,*::before,*::after{ box-sizing:border-box; }

:root{
  --brand:#185aa6; --brand-1:#f39200; --brand-2:#164279; --brand-3:#DB0000;
  --white:#fff; --grey:#F8F8F8; --black:#000; --text:#0b1320; --muted:#6b7380; --border:color-mix(in srgb, var(--brand) 15%, transparent); --bg:#ffffff; --underline:#B8B8B8;

  --page-width:1200px; /* huidige containerbreedte */
  /* Paginabreedtes (desktop) */
  --page-min:1024px; /* onderste grens desktop */
  --page-ideal:1200px; /* voorkeursbreedte */
  --page-max:1200px; /* bovengrens */

  --radius:3px;
  --gap:16px; --pad-x:16px; --pad-y:16px;

  --col-gap:16px; --col-gap-desktop:48px;

  --header-min:60px; --header-h:calc(var(--header-min) + 1px); --nav-h:52px;

  --rail-w:0px; --stick-top:16px; --hero-h:320px;

  --zoom:1.05; --overscan:1px; --bleed:1px;

  --z-menu:1000; --z-header:900; --z-subnav:800;

  --container-mt:28px; --container-mt-no-ad:0px; --container-mt-with-ad:16px;

  --spons-blue:#e8f2ff; --spons-pink:#ffe8f1;  --spons-blue-border:#C2DCFF; --spons-pink-border:#FFCCE0; --spons-border:color-mix(in srgb, var(--border) 100%, transparent);
}
@media (max-width:767.9px){ :root{ --header-min:38px;  --header-h:calc(var(--header-min) + 1px);  --nav-h:52px; } }
@media (min-width:768px){ :root{ --gap:24px; --pad-x:16px; --pad-y:16px; --rail-w:300px; --hero-h:420px; } }
@media (min-width:1024px){ :root{ --pad-x:8px; --pad-y:8px; --rail-w:300px; --hero-h:410px; } }

html[data-theme="light"]{ --bg:#ffffff; --text:#0b1320; --muted:#6b7380; --border:#e5e9f1; color-scheme:light; --spons-blue:#e8f2ff; --spons-pink:#ffe8f1; --spons-border:color-mix(in srgb,var(--border) 100%,transparent); }
html[data-theme="dark"]{ --bg:#0f141b; --text:#e8eef6; --muted:#9aa4b2; --border:#2D394C; color-scheme:dark; --spons-blue:color-mix(in srgb,#5aa0ff 18%,var(--bg)); --spons-blue-border:var(--border); --spons-pink-border:var(--border); --spons-pink:color-mix(in srgb,#ff7db3 16%,var(--bg)); --spons-border:color-mix(in srgb,var(--border) 65%,transparent); }
@media (prefers-color-scheme:dark){ html:not([data-theme]){ --bg:#0f141b; --text:#e8eef6; --muted:#9aa4b2; --border:#2D394C; color-scheme:dark; --spons-blue:color-mix(in srgb,#5aa0ff 18%,var(--bg)); --spons-pink:color-mix(in srgb,#ff7db3 16%,var(--bg)); --spons-border:color-mix(in srgb,var(--border) 65%,transparent); } }

html,body{ margin:0; padding:0; }
html{ scrollbar-gutter:stable; }
body{ font:1rem/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text); background:var(--bg); overflow-x:hidden; }

a{ color:inherit; text-decoration:none; }
a:hover:not(.link-block){ text-decoration:underline; text-decoration-color:currentColor; text-underline-offset:4px; text-decoration-thickness:1px; }

img{ display:block; max-width:100%; height:auto; border-radius:var(--radius); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.container{ max-width:var(--page-width); margin-inline:auto; padding:var(--pad-y) var(--pad-x); margin-top:var(--container-mt); }

.page-grid{ display:grid; grid-template-columns:1fr; row-gap:var(--gap); column-gap:var(--col-gap); }
@media (min-width:768px){ .page-grid{ grid-template-columns:minmax(0,1fr) var(--rail-w); } }
@media (min-width:1024px){ .page-grid{ column-gap:var(--col-gap-desktop); } }

/* ===== Header + Subnav ===== */
.header{ position:fixed; top:0; left:0; right:0; z-index:var(--z-header); background:var(--bg); border-bottom:1px solid var(--border); transform:none; backface-visibility:hidden; }
.header .inner{ max-width:var(--page-width); margin-inline:auto; padding:0 var(--pad-x); min-height:var(--header-min); display:flex; align-items:center; justify-content:space-between; }
.logo{ display:inline-block; height:34px; width:calc(34px * 86 / 34); aspect-ratio:145 / 34; background:url("/assets/gfx/weblogo_v1.0.svg") no-repeat left center / contain; }
@media (max-width:600px){ .logo{ height:28px; width:calc(30px * 86 / 34); } .menu-btn svg{ width:28px; height:28px; stroke-width:1.6!important; margin-right:6px; } .menu-close svg{ width:30px!important; height:30px!important; stroke-width:1.6!important; } }
.menu-btn,.menu-close{ appearance:none; border:0; background:transparent; color:var(--text); display:inline-flex; align-items:center; justify-content:center; width:auto!important; height:48px; padding:0; cursor:pointer;}
.menu-btn svg,.menu-close svg{ width:26px; height:26px; stroke:currentColor; stroke-width:1.4; }
.menu-close span{ margin-right:12px; font-weight:400; color:var(--text); }

.subnav{ position:fixed; left:-6px; right:0; top:calc(var(--header-h,var(--header-min,56px)) - 1px); z-index:var(--z-subnav); background:var(--bg); border-bottom:1px solid var(--border); transform:translateY(0); transition:transform .3s ease; will-change:transform; }
.subnav.nav-hidden{ transform:translateY(-100%); pointer-events:none; }
.subnav .inner{ max-width:var(--page-width); margin-inline:auto; padding:2px var(--pad-x) ; overflow:hidden; }

.nav-container{ position:relative; width:100%; max-width:100%; overflow:hidden; }
.nav-scroller{ overflow-x:auto; overflow-y:hidden; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; max-width:100%; position:relative; z-index:1; touch-action:pan-x;}
.nav-scroller::-webkit-scrollbar{ display:none; }


.nav-list{ list-style:none; margin:0!important; padding:11px 0 9.5px ; display:flex; gap:12px!important; align-items:center; }
.nav-list li{ flex:0 0 auto; }

.nav-list li:first-child .nav-btn {
    margin-left: 3px;
}
.nav-btn{ display:inline-flex; align-items:center!important; gap:8px; padding:5px 12px 8px!important; border:1px solid color-mix(in srgb,var(--text) 10%, transparent);border-radius:3px; background:var(--bg); color:inherit; text-decoration:none; outline:none; position:relative; z-index:1; font-weight:400; font-size:1.02rem;margin: 4px 0; }

.nav-btn:hover{ text-decoration:none!important; border-color:color-mix(in srgb, var(--text) 10%, var(--muted)); transition:border-color .25s ease; }
.nav-btn.is-active,[aria-current="page"].nav-btn{ background:color-mix(in srgb,var(--black) 85%, var(--muted)); border-color:var(--muted); color:#fff; }
.nav-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.nav-btn::before,.nav-btn::after{ content:""; position:absolute; border-radius:3px; pointer-events:none; opacity:0; transition:opacity .12s ease-out; }
.nav-btn::before{ inset:-2px; border:2px solid var(--white); }
.nav-btn::after{ inset:-4px; border:2px solid var(--brand); }
.nav-btn.tap-ring::before,.nav-btn.tap-ring::after,
.is-kb-nav .nav-btn:focus-visible::before,
.is-kb-nav .nav-btn:focus-visible::after{ opacity:1; }


.nav-fade{ position:absolute; top:0; bottom:0; width:28px; pointer-events:none; opacity:0; transition:opacity .2s ease; z-index:5; }
.nav-fade--left{ left:0; background:linear-gradient(to right,var(--bg),transparent); }
.nav-fade--right{ right:0; background:linear-gradient(to left,var(--bg),transparent); }
.nav-fade.is-visible{ opacity:1; }

/* ===== MENU / NAV extra ===== */
html:has(#navToggle:checked) :is(#app,.header,.subnav){ filter:blur(0); will-change:filter; pointer-events:none; }
.menu-overlay{ position:fixed; inset:0; z-index:var(--z-menu); width:100vw; height:100vh; visibility:visible; opacity:0; pointer-events:none; transition:opacity .30s ease; overflow:hidden; }
#navToggle:checked ~ .menu-overlay{ opacity:1; pointer-events:auto; }
.menu-backdrop{ position:absolute; inset:0; background:rgba(15,23,39,0.75); cursor:pointer; }
.menu-panel{ position:absolute; top:0; right:0; height:100%; width:min(100vw,450px); background:var(--bg); border-left:1px solid var(--border); box-shadow:-12px 0 40px rgba(0,0,0,.18); transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; border-radius: 0; }
#navToggle:checked ~ .menu-overlay .menu-panel{ transform:translateX(0); }
html:has(#navToggle:checked){ overflow:hidden; }

/*  */
/* ===== MENU / NAV extra ===== */
@media all and (max-width:767.9px){
html:has(#navToggle:checked) :is(#app,.header,.subnav){ filter:blur(0px); will-change:filter; pointer-events:none; }
}
/*  */
.menu-header{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding: 6px 16px; border-bottom:1px solid var(--border); height:var(--header-h); }
.menu-content{ padding:12px 16px; overflow:auto; gap:12px; height:calc(100vh + 160px)!important; overflow-y:scroll; scrollbar-width:none; }
.menu-content::-webkit-scrollbar{ display:none; }

/* submenu-UI */
.menu-item{ display:grid; grid-template-columns:1fr auto; gap:0px; align-items:start; margin-bottom:8px; }
.menu-cat{ display:block; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); }
.menu-toggle{ appearance:none; border:1px solid var(--border); background:var(--bg); color:inherit; border-radius:var(--radius); padding:8px;margin-left:8px; line-height:0; cursor:pointer; align-self:stretch; display:inline-grid; place-items:center; }
.menu-toggle .chev{ width:20px; height:20px; transition:transform .2s ease; opacity:.8; }
.menu-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.submenu{ grid-column:1 / -1; margin:6px 0 0 10px; padding-left:10px; border-left:2px solid var(--border); display:grid; gap:6px; }
.submenu[hidden]{ display:none!important; }
.submenu .menu-sub{ display:block; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius); background:color-mix(in srgb,var(--bg),white 3%); text-decoration:none; color:inherit; }
.submenu .menu-sub:last-child{ margin-bottom:8px; }
.submenu .menu-sub:hover{ text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }

/* menu-boxen */
.menu-box{ border:1px solid var(--border); border-radius:var(--radius); background:color-mix(in srgb,var(--bg),white 6%); padding:12px;margin-bottom:16px; }
.menu-box:last-child{ margin-top:0px; margin-bottom:64px; }
.menu-box h3{ margin:0 0 8px; font-size:.95rem; }
.theme-group{ display:flex; gap:8px; flex-wrap:wrap; }

/* thema-knoppen */
.theme-btn { padding: 8px 12px; border: 1px solid transparent; border-radius: 3px; background: var(--bg); color: var(--text); cursor: pointer; transition: all 0.2s ease; border: 2px solid var(--muted); }
.theme-btn[data-theme="light"]{ background:#ffffff; color:#000000; }
.theme-btn[data-theme="dark"] { background:#000000; color:#ffffff; }
.theme-btn[data-theme="auto"]{ background:#ffffff; color:#000000; }
.theme-btn[aria-pressed="true"]{ border:2px solid var(--brand-3); border-radius:3px; }
.theme-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* MENU: slide-layers */
.menu-content{ position:relative; overflow:hidden; }
.menu-page{ position:absolute; inset:0; padding:12px 16px; overflow:auto; transform:translateX(0); transition:transform .25s ease; }
#menu-main{ transform:translateX(0); }
#menu-settings{ transform:translateX(100%);  }
.menu-panel.is-sub #menu-main{ transform:translateX(-100%); }
.menu-panel.is-sub #menu-settings{ transform:translateX(0);}

/* dubbele animatie + veiligheid */
.menu-panel .menu-content{ position:relative; overflow:hidden !important; padding:0 !important; }
.menu-panel .menu-content .menu-page{ position:absolute !important; inset:0; padding:12px 16px; overflow:auto; -webkit-overflow-scrolling:touch; transition: transform .25s ease, opacity .25s ease !important; }
#menu-main{ opacity:1 !important; }
#menu-settings{ transform: translateX(100%) !important; }
.menu-panel.is-sub-pre #menu-main{ opacity:.25 !important; pointer-events:none !important; transition: transform .25s ease, opacity 0s linear !important; }
.menu-panel.is-sub #menu-main{ transform:translateX(-100%) !important; opacity:0 !important; pointer-events:none !important; transition: transform .25s ease, opacity .25s ease !important; }
.menu-panel.is-sub #menu-settings{ transform:translateX(0) !important; }
#menu-main{ z-index:1; }
#menu-settings{ z-index:2; }

/* settings-terugknop & head */
.menu-head{ display:flex; align-items:center; gap:8px; margin:4px 0 10px; }
.settings-back{ appearance:none; border:1px solid var(--border); background:var(--bg); color:inherit; border-radius:3px; padding:6px 10px; font:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.settings-back svg{ width:18px; height:18px; display:block; }
.settings-back:hover{ border-color:color-mix(in srgb, var(--text) 10%, var(--muted)); }
.settings-back:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
#menu-settings .menu-head{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
#menu-settings .menu-head h3{ margin: 0; }

/* Header actions + iconen */
.header .inner{ display:flex; align-items:center; justify-content:space-between; }
.header-actions{ display:flex; align-items:center; gap:18px; margin-left:auto; }
.settings-icon{ appearance:none; border:0; background:transparent; color:var(--text); display:inline-flex; align-items:center; justify-content:center; width:auto; height:38px; padding:0; cursor:pointer; }
.settings-icon svg{ width:22px; height:22px; display:block; }
.settings-icon svg .cls-1{ stroke: currentColor !important; }
.settings-icon:hover{ color: var(--text); }
.settings-icon:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

@media all and (min-width:1024px){ .only-desktop{display:block;} .only-mobile{display:none!important;} }
@media all and (max-width:1023px){ .only-desktop{display:none!important;} .only-mobile{display:block;} .menu-header{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:2px 16px; border-bottom:1px solid var(--border); height:calc(var(--header-h) + 16px)!important; } }

#app{ padding-top:calc(var(--header-h,var(--header-min,56px)) + var(--nav-h,40px) - 2px); }

/* Menu quick */
.menu-quickbox{ margin-bottom:12px; }
.menu-quick{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.menu-quick-btn{ display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:inherit; text-decoration:none; }
.menu-quick-btn:hover{ text-decoration:none; border-color: color-mix(in srgb, var(--text) 10%, var(--muted)); }
.menu-quick-btn svg{ width:18px; height:18px; flex:0 0 auto; display:block; }
.menu-quick-btn svg path, .menu-quick-btn svg .cls-1{ fill: currentColor !important; stroke: currentColor !important; }
:root{ --settings-icon-size: 22px; }
.menu-quick-btn .settings-svg{ width: var(--settings-icon-size); height: var(--settings-icon-size); color: inherit; display: block; }
.menu-quick-btn .settings-svg [fill]{ fill: none !important; }
.menu-quick-btn .settings-svg [stroke]{ stroke: currentColor !important; }
.menu-quick-btn .settings-svg .cls-1{ fill: none !important; stroke: currentColor !important; stroke-width: 3 !important; stroke-linecap: round; stroke-linejoin: round; }
:root{ --menu-quick-icon-size: 18px; --menu-quick-search-size: 22px; }
.menu-quick-btn .icon{ width: var(--menu-quick-icon-size); height: var(--menu-quick-icon-size); }
.menu-quick-btn .icon--search{ width: var(--menu-quick-search-size); height: var(--menu-quick-search-size); }

:root{ --header-icon-size: 22px; --header-icons-gap: 16px; --header-stroke: 3; }
.header-actions{ display:flex; align-items:center; gap:var(--header-icons-gap); margin-left:auto; }
.settings-icon, .user-icon, .search-icon, .menu-btn{ display:inline-flex; align-items:center; gap:8px; height:48px; padding:0; background:transparent; color:var(--text); text-decoration:none; border:0; cursor:pointer; }
.header-actions .icon{ width:var(--header-icon-size); height:var(--header-icon-size); display:block; color:inherit; }
.header-actions .icon--stroke path, .header-actions .icon--stroke .cls-1, .header-actions .icon--stroke .a{ fill:none !important; stroke:currentColor !important; stroke-width:var(--header-stroke) !important; stroke-linecap:round; stroke-linejoin:round; }
.inlog {color:var(--muted);font-weight:550;text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (max-width:767.98px){ .icon-label{ display:none !important; }.user-icon {margin-right:8px;} }
.settings-icon:hover, .user-icon:hover, .menu-btn:hover{ color:var(--brand-2); }
.settings-icon:focus-visible, .user-icon:focus-visible, .menu-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.header-actions :is(.settings-icon, .user-icon, .menu-btn){ font: inherit; color: inherit; }
.header-actions .icon-label{ font-size: 0.95rem; line-height: 1.2; white-space: nowrap; }
.header-actions :is(.settings-icon, .user-icon, .menu-btn):hover{ color: inherit !important; }
.header-actions :is(.settings-icon, .user-icon, .menu-btn):focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }
@media (min-width: 768px){ .header-actions{ gap: calc(var(--header-icons-gap) * 2); } }
.header-actions a:hover{ text-decoration: none !important; }
@media (min-width: 768px){ .header-actions :is(.settings-icon, .user-icon, .search-icon, .menu-btn):hover .icon-label{ text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;  } }

/* Socialbar kleuren (globaal) */
.socialbar .social-list a{ color:var(--social,var(--brand)); display:inline-flex; align-items:center; transition:color .2s ease; }
.socialbar .social-list a:hover{ color:var(--brand-2); }
[data-theme="light"]{ --social:var(--brand); }
[data-theme="dark"]{ --social:#e8eef7; }
[data-theme="auto"]{ --social:var(--brand); }
@media (prefers-color-scheme:dark){ [data-theme="auto"]{ --social:#e8eef7; } }

/* MENU: desktop scrollbars verbergen binnen de panel-pages */
@media (min-width:768px){
  .menu-panel .menu-content .menu-page{
    /* scroll blijft werken, maar zonder zichtbare balk */
    overflow: auto;
    -ms-overflow-style: none;   /* IE/Edge legacy */
    scrollbar-width: none;      /* Firefox */
    overscroll-behavior: contain; /* voorkom scroll chain */
  }
  .menu-panel .menu-content .menu-page::-webkit-scrollbar{
    width: 0; height: 0;        /* Chrome/Safari/Edge */
  }
}
:root{
  --text-zoom: 1;           /* 1, 1.2, 1.4 ... */
  --base-font-size: 16px;   /* je basis */
}

/* Belangrijk: rem ≡ html font-size → hier schalen */
html{ font-size: calc(var(--base-font-size) * var(--text-zoom)); }

/* Body blijft 1rem zodat bestaande regels "font:1rem/1.5 ..." kloppen */
body{ font-size: 1rem; }

/* Zelfde look/maat voor beide sets knoppen */
.menu-box .theme-group .theme-btn,
.menu-box .theme-group .text-zoom{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 12px;
  min-width:44px;
  min-height:38px;
  border:1px solid var(--muted);
  border-radius:3px;
  background:var(--bg);
  color:inherit;
  font:inherit;
  line-height:1;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Hover/focus */
.menu-box .theme-group :is(.theme-btn,.text-zoom):hover{
  border-color: color-mix(in srgb, var(--brand-3) 60%, var(--muted));
}
.menu-box .theme-group :is(.theme-btn,.text-zoom):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* Geselecteerd: rood randje — werkt onafhankelijk per groep */
.menu-box .theme-group .theme-btn[aria-pressed="true"],
.menu-box .theme-group .text-zoom[aria-pressed="true"]{
  border:2px solid var(--brand-3);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--brand-3) 18%, transparent);
}

/* ===== Desktop-only teaser onder minis (kop onder afbeelding) ===== */
.mini .hero-body .intro{ display:none; }

@media (min-width:1024px){
  .mini .hero-body .intro{
    display: -webkit-box;
    -webkit-line-clamp: 3;          /* 2 regels, netjes afgekapt */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 2px 4px 0;              /* uitlijnen met titel/meta */
    color: var(--text);
    font-size: .92rem;
    line-height: 1.4;
  }
  /* Klein beetje lucht boven de intro */
  .mini .hero-body .meta{ margin-bottom: 2px; }
}

/* Zelfde look voor alle settings-knoppen */
.menu-box .theme-group .theme-btn,
.menu-box .theme-group .text-zoom,
.menu-box .theme-group .teaser-toggle{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 12px;
  min-width:44px;
  min-height:38px;
  border:1px solid var(--muted);
  border-radius:3px;
  background:var(--bg);
  color:inherit;
  font:inherit;
  line-height:1;cursor: pointer;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Hover/focus */
.menu-box .theme-group :is(.theme-btn,.text-zoom,.teaser-toggle):hover{
  border-color: color-mix(in srgb, var(--brand-3) 60%, var(--muted));
}
.menu-box .theme-group :is(.theme-btn,.text-zoom,.teaser-toggle):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* Geselecteerd (rode rand) */
.menu-box .theme-group .theme-btn[aria-pressed="true"],
.menu-box .theme-group .text-zoom[aria-pressed="true"],
.menu-box .theme-group .teaser-toggle[aria-pressed="true"]{
  border:2px solid var(--brand-3);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--brand-3) 18%, transparent);
}
@media (min-width:1024px){
  html[data-teasers="off"] .mini .hero-body .intro .teaser-toggle{
    display:none !important;
  }
}

/* ==== GLOBAL: verticale rail-spacing (los van --col-gap-desktop) ==== */
@media (min-width:768px){
  /* Knoppen */
  :root{
    --rail-gap-y: 32px;     /* ruimte tussen rail-secties (latest-blokken) */
    --rail-ad-gap-y: 32px;  /* ruimte rond rail-ads (300x250/300x600) */
	--rail-ad-gap-xtra: 25px;  /* ruimte rond rail-ads (300x250/300x600) */
  }

  /* Secties in de rail (Net binnen / Meest bekeken / etc.) */
  aside.rail .latest{
    margin-top: var(--rail-gap-y)!important;
    margin-bottom: var(--rail-gap-y) !important;
  }

  /* Advertenties in de rail */
  aside.rail .ad{
    margin-bottom: var(--rail-ad-gap-y) !important;
  }
  aside.rail .ad:last-child{
    margin-top: var(--rail-ad-gap-y) !important;
  }

  aside.rail .ad:first-child{
    margin-top: var(--rail-ad-gap-xtra);
  }

  /* Skyscraper wrapper krijgt eigen bodemruimte */
  aside.rail .ad--skyscraper{ margin-bottom: 0 !important; }
  .rail-sticky{ margin-bottom: var(--rail-ad-gap-y) !important; }
}

/* ===== Groter logo op desktop ===== */

/* Zorg dat width niet vastpint zodat aspect-ratio kan werken */
.logo{
  width: auto !important;
}

/* Desktop: logo hoger maken (pas 44px naar smaak aan) 
   en header iets hoger zodat het niet klemt */
@media (min-width: 1024px){
  .logo{
    height: 37px !important;    /* bv. 42–48px is vaak mooi */
  }
  :root{
    --header-min: 56px;          /* was ~60px; meeschalen met groter logo */
  }

}

/* Mobiel ongewijzigd — je had al een mobiele override.
   Wil je mobiel expliciet houden op 28px, dan kan ook: */
@media (max-width: 600px){
  .logo{ height: 28px !important; }
	
.menu-btn,.menu-close{ appearance:none; border:0; background:transparent; color:var(--text); display:inline-flex; align-items:center; justify-content:center; width:auto!important; height:48px; padding:0; cursor:pointer;margin-right:-8px; }

}

/* === LOCK HEADER & SUBNAV HOOGTE VIA TOKENS ======================= */
:root{
  --header-h: 64px;   /* desktop */
  --nav-h:    64px;   /* desktop */
}
@media (max-width: 767.98px){
  :root{
    --header-h: 48px; /* mobiel */
    --nav-h:    48px; /* mobiel (pas evt. naar 40–46) */
  }
}

/* Offset exact = header + subnav (geen fudges) */
#app{ padding-top: calc(var(--header-h) + var(--nav-h)); }

/* Lagen exact positioneren, geen calc(-1/-2px) */
.header{ height: var(--header-h); }
.header .inner{ min-height: var(--header-h); display:flex; align-items:center; }
.subnav{ top: var(--header-h); height: var(--nav-h); }
.subnav .inner{ min-height: var(--nav-h); padding-top:0; padding-bottom:0; display:flex; align-items:center; }

@media (min-width: 1024px){
.subnav .inner{ padding-bottom:2px; }
}

/* voorkom extra hoogte-gaten in nav */
.nav-list{ padding-top:0; padding-bottom:0; }

/* Content-offset: header + subnav (ongewijzigd) */
#app{ padding-top: calc(var(--header-h) + var(--nav-h)); }

/* ================== TOP-AD (tussen nav en content) ================== */
/* Tweakbare variabelen */
:root{
  /* Desktop paddings voor de top-ad */
  --topad-pad-y-desktop: 10px;   /* ↑↓ desktop */
  --topad-pad-x-desktop: var(--pad-x);

  /* Mobiel paddings voor de top-ad */
  --topad-pad-y-mobile: 8px;     /* ↑↓ mobiel */
  --topad-pad-x-mobile: var(--pad-x);

/* 1) Default (dark + auto→dark): niet lichter maken */
  --topad-bg: color-mix(in srgb,var(--bg),white 6%);
}

/* 2) Light mode expliciet: iets lichter dan border */
html[data-theme="light"]{
  --topad-bg: color-mix(in srgb, var(--border) 25%, #fff 75%);
}

/* 3) Auto: volg systeem – alléén bij light lichter maken */
html[data-theme="auto"]{ --topad-bg: var(--border); }
@media (prefers-color-scheme: light){
  html[data-theme="auto"]{ --topad-bg: color-mix(in srgb, var(--border) 25%, #fff 75%); }
}


/* Donker/grijs vlak en onderdeel van de flow */  
.top-ad{
  position: relative;
  background: var(--topad-bg); /* iets lichter */
  margin-top: calc(var(--pad-x) - 0px);
  margin-bottom: calc(var(--pad-x) * -1.8);
  width: calc(var(--page-width) - 16px);
  max-width: 100vw;
  margin-left: auto;
  margin-right: auto;
}

/* Binnenwerk exact centreren binnen containerbreedte */
.top-ad__inner{
  max-width: var(--page-width);
  margin-inline: auto;
  display: flex;
  align-items: center;              /* verticaal centreren */
  justify-content: center;          /* horizontaal centreren */
  text-align: center;
  padding: 6px 0 0;
}

/* Mobiel: eigen padding + hoogte-guards (min 50px, max 250px) */
@media (max-width: 767.98px){
  .top-ad__inner{
    padding: var(--topad-pad-y-mobile) var(--topad-pad-x-mobile);
    min-height: 50px;
    max-height: 250px;
    overflow: hidden;               /* clippen als er per ongeluk iets hogers komt */
  }
}

/* Zorg dat de ad en zijn child blok-achtig en gecentreerd zijn */
.top-ad .ad{ display: block; }
.top-ad .ad > *{ display: inline-block; }    /* fallback i.c.m. text-align:center */
.top-ad .ad iframe{
  display: block !important;
  margin: 0 auto !important;
  max-width: none !important;                 /* nooit knijpen */
  max-height: none !important;
}

@media (max-width: 767.98px){
  .top-ad__inner{
    padding:0;
    height: calc(50px + 8px) !important;
    overflow: hidden !important;
    display: flex; align-items:center; justify-content:center;margin-top: calc(var(--pad-x) / 8);
  }
  .top-ad .ad iframe{
    width: 320px !important;
    height: 50px !important;
    display:block !important;
	margin: 20px auto 0 auto !important;
  }
.top-ad{
    margin-top: calc(var(--pad-x) / 2)!important;
    margin-bottom: calc(var(--pad-x) * 0.045);
}
}
/* === FIX: menu-header hoogte gelijk aan header (tablet-landscape 768–1024) === */
@media (min-width:768px) and (max-width:1023.98px){
  .menu-header{
    height: var(--header-h) !important;     /* exact gelijk aan .header */
    min-height: var(--header-h) !important;
    padding: 0 16px !important;             /* geen extra verticale padding */
    display: flex; align-items: center;     /* netjes centreren */
  }
}

/* Extra veiligheid: ook op ≤1023px geen +16px truc meer */
@media (max-width:1023.98px){
  .menu-header{ height: var(--header-h) !important; }
}

/* Zorg dat het content-gedeelte van het panel de resthoogte pakt
   i.p.v. een vaste calc(100vh + 160px) (voorkomt rare scroll/shift) */
.menu-panel{ display:flex; flex-direction:column; }
.menu-content{
  flex: 1 1 auto; min-height: 0;
  height: auto !important; max-height: none !important;
  overflow: auto;
}

.header{
  border-bottom:1px solid var(--border);
   transition: border-color .5s ease;
}

/* zodra de subnav weg is */
.header.header--thick-border{
  border-bottom-width:2px;border-color: var(--border);
}

.pager {margin-top:32px;}

/* ==== DASHBOARD / ACCOUNT ================================================
   Stijlen voor:
   - .dash-section / .dash-meta-list
   - .dash-form, .dash-form-group / row
   - .dash-alert (success / error)
   - knoppen: .btn-primary / .btn-secondary
   ======================================================================= */

/* Secties (kaarten) ----------------------------------------------------- */
.dash-section {
  margin-bottom: 24px;
  padding: 16px 18px;
  background: var(--bg, #ffffff);
  border-radius: var(--radius, 4px);
  border: 1px solid var(--border, #e4e4e7);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.dash-section__title {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 600;color:var(--brand);
}

.dash-section__intro {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: var(--muted, #6b7280);
}

/* Overzicht / meta ------------------------------------------------------ */
.dash-meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 6px;
}

@media (min-width: 768px) {
  .dash-meta-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

.dash-meta-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
}

.dash-meta-value {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Formulieren ----------------------------------------------------------- */
.dash-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-form-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px) {
  .dash-form-row {
    flex-direction: row;
  }
  .dash-form-row .dash-form-group {
    flex: 1 1 0;
  }
}

.dash-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-form-group label {
  font-size: 0.9rem;
  font-weight: 600;
}

.dash-form-group input,
.dash-form-group select {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border-radius: 4px;
  border: 1px solid var(--border, #d4d4d8);
  font-size: 0.93rem;
  background: var(--bg, #ffffff);
  color: inherit;
}

.dash-form-group input:focus,
.dash-form-group select:focus {
  outline: none;
  border-color: var(--brand, #0f766e);
  box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.35);
}

/* Checkboxrij ----------------------------------------------------------- */
.dash-form-group--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.dash-form-group--checkbox label {
  font-weight: 400;
  font-size: 0.9rem;
}

.dash-form-group--checkbox input[type="checkbox"] {
  margin-top: 3px;
}

/* Helptekst ------------------------------------------------------------- */
.dash-help {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted, #6b7280);
}

/* Actieknoppen in formulier -------------------------------------------- */
.dash-form-actions {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Alerts (fout / succes) ----------------------------------------------- */
.dash-alert {
  padding: 9px 11px;
  border-radius: var(--radius, 4px);
  font-size: 0.86rem;
  margin-bottom: 12px;
  border: 1px solid transparent;
}

.dash-alert ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.dash-alert--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.dash-alert--success {
  background: #ecfdf3;
  border-color: #bbf7d0;
  color: #166534;
}

/* Knoppen (zelfde stijl als login/register) ---------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.93rem;
  font-weight: 600;
  background: #0f172a;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.btn-primary:hover {
  background: #020617;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
  transform: translateY(-1px);
}

.btn-primary:active {
  box-shadow: none;
  transform: translateY(0);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border, #d4d4d8);
  background: transparent;
  font-size: 0.93rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-secondary:hover {
  background: rgba(148, 163, 184, 0.12);
  border-color: var(--border, #9ca3af);
  text-decoration: none;
}

/* Donkere modus -------------------------------------------------------- */
html[data-theme="dark"] .dash-section {
  background: #020617;
  border-color: #1f2937;
  box-shadow: none;
}

html[data-theme="dark"] .dash-section__intro,
html[data-theme="dark"] .dash-meta-label,
html[data-theme="dark"] .dash-help {
  color: #9ca3af;
}

html[data-theme="dark"] .dash-form-group input,
html[data-theme="dark"] .dash-form-group select {
  background: #020617;
  border-color: #374151;
  color: #e5e7eb;
}

html[data-theme="dark"] .dash-form-group input:focus,
html[data-theme="dark"] .dash-form-group select:focus {
  border-color: var(--brand, #0ea5e9);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.45);
}

html[data-theme="dark"] .dash-alert--error {
  background: rgba(127, 29, 29, 0.25);
  border-color: rgba(248, 113, 113, 0.7);
  color: #fecaca;
}

html[data-theme="dark"] .dash-alert--success {
  background: rgba(22, 101, 52, 0.25);
  border-color: rgba(74, 222, 128, 0.7);
  color: #bbf7d0;
}

html[data-theme="dark"] .btn-secondary {
  border-color: #4b5563;
}

html[data-theme="dark"] .btn-secondary:hover {
  background: rgba(31, 41, 55, 0.8);
}

/* User-menu popup naast het user-icon */
.header-actions {
  position: relative; /* zodat absolute posities zich hieraan oriënteren */
}

.user-menu-wrapper {
  position: relative;
  display: inline-block;
}

.user-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top:0px;
  min-width: 180px;
  padding: 6px 0;
  background: var(--bg, #ffffff);
  border-radius: 6px;
  border: 1px solid var(--border, #e4e4e7);
  box-shadow: 0 18px 45px rgba(15,23,42,0.16);
  z-index: 50;
}

.user-menu__item {
  display: block;
  padding: 8px 12px;
  font-size: 0.92rem;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
border-bottom:dashed 1px var(--border);
}

.user-menu__item:hover {
  background: rgba(15,23,42,0.04);
}

.user-menu__item--danger {
  color: var(--brand-3);
}
/* SAVED ARTICLES */
.saved-item {
    margin: 12px 0;
    padding: 10px;
    background: #f2f2f2;
    border-radius: 0px;
    display: flex;
    flex-direction: column;
}

.saved-item a {
    color: #0051a2;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 6px;
}

.saved-item:hover a {
    text-decoration: underline;
}

.timestamp {
    font-size: 0.85rem;
    color: #666;
}

.remove-btn {
    background: #e53935;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 10px;
    align-self: flex-start;
}

.remove-btn:hover {
    background: #c62828;
}

.no-items {
    font-style: italic;
    color: #555;
    padding: 10px;
}