html{overflow-x:hidden}
:root{--sp-1:8px;--sp-2:10px;--sp-3:18px;--sp-4:26px;--sp-5:40px;--sp-6:56px}
/* VR-bril.nl - gedeelde stijlen (shell, navigatie, componenten)
   Gebaseerd op het cinewallcheck.nl designsysteem; eigen kleurenpalet (cyber-blauw).
   Font: Space Grotesk, self-hosted vanuit /fonts/ (woff2, latin + latin-ext). */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-700.woff2') format('woff2')}
*{box-sizing:border-box}
body{margin:0;background:#f6f8fb;font-family:'Space Grotesk',system-ui,sans-serif;color:#16181d;overflow-x:clip}
a{color:#0e5aa7;text-underline-offset:3px}
a:hover{color:#0a3d73}
button{font:inherit}
select,input,textarea{font:inherit}
img{max-width:100%}
html{scroll-behavior:smooth;scroll-padding-top:120px}

@keyframes cta-gradient{
  0%{background-position:0% 50%;background-size:250% 100%}
  9%{background-position:22% 50%;background-size:268% 100%}
  21%{background-position:14% 50%;background-size:244% 100%}
  34%{background-position:58% 50%;background-size:276% 100%}
  46%{background-position:47% 50%;background-size:250% 100%}
  58%{background-position:86% 50%;background-size:282% 100%}
  69%{background-position:71% 50%;background-size:252% 100%}
  81%{background-position:96% 50%;background-size:272% 100%}
  91%{background-position:38% 50%;background-size:246% 100%}
  100%{background-position:0% 50%;background-size:250% 100%}
}
@keyframes vr-gradient{
  0%{background-position:0% 50%;background-size:280% 100%}
  11%{background-position:26% 50%;background-size:300% 100%}
  24%{background-position:17% 50%;background-size:272% 100%}
  37%{background-position:63% 50%;background-size:306% 100%}
  52%{background-position:49% 50%;background-size:278% 100%}
  64%{background-position:91% 50%;background-size:312% 100%}
  77%{background-position:74% 50%;background-size:280% 100%}
  89%{background-position:41% 50%;background-size:296% 100%}
  100%{background-position:0% 50%;background-size:280% 100%}
}

a.cta-deal:not([href]){cursor:default}
/* hero-acties: nooit over twee regels, gelijke hoogte */
.page-hero .cta-deal,.page-hero a[style*="min-height:44px"]{white-space:nowrap!important;min-height:48px!important;display:inline-flex!important;align-items:center;justify-content:center}
@media(min-width:760px) and (max-width:1010px){.page-hero .cta-deal,.page-hero a[style*="min-height:44px"]{padding-left:14px!important;padding-right:14px!important;font-size:15px!important}}
/* Affiliate-CTA met bewegende gradient */
.cta-deal{display:inline-block;padding:14px 22px;border-radius:12px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;color:#1a1a1a;text-decoration:none;border:0;cursor:pointer;
  background-image:linear-gradient(100deg,#ff5e00 0%,#ff8c00 25%,#ffb800 50%,#ffd21e 72%,#ff8c00 100%);
  background-size:250% 100%;background-position:0% 50%;animation:cta-gradient 11s ease-in-out infinite;
  box-shadow:0 6px 20px rgba(255,120,0,.35);transition:transform .15s ease,box-shadow .15s ease}
.cta-deal:hover,.cta-deal:focus-visible{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,120,0,.45);color:#1a1a1a}

/* Tabellen */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{width:100%;border-collapse:collapse;min-width:34rem}
.toc-scroll::-webkit-scrollbar{height:0}

/* ---------- Sticky snelmenu ---------- */
.page-toc{position:sticky;top:65px;z-index:20;margin:26px calc(50% - 50vw + var(--sbw,0px)/2) 0;padding:7px 0;background:rgba(246,248,251,.94);backdrop-filter:blur(8px)}
.page-toc .toc-scroll{list-style:none;display:flex;gap:8px;margin:0;padding:0 16px;overflow-x:auto;scrollbar-width:none;cursor:grab}
.page-toc .toc-scroll li:first-child{margin-left:auto}
.page-toc .toc-scroll li:last-child{margin-right:auto}
.page-toc .toc-scroll a{display:inline-flex;align-items:center;white-space:nowrap;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;text-decoration:none;border-radius:10px;padding:0 16px;min-height:44px;color:#0e5aa7;background:#ffffff;border:1px solid #dbe3ee;box-shadow:0 1px 2px rgba(14,36,71,.05)}

/* ---------- Logo-rail: marquee + sleepbaar ---------- */
@keyframes logo-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-viewport{overflow:hidden;max-width:100vw}
.logo-viewport{margin-left:calc(50% - 50vw + var(--sbw,0px)/2)!important;margin-right:calc(50% - 50vw + var(--sbw,0px)/2)!important}
.logo-viewport .logo-rail{margin-left:0!important;margin-right:0!important}
.logo-rail{overflow:hidden;max-width:100vw}
.logo-rail{margin-left:calc(50% - 50vw + var(--sbw,0px)/2)!important;margin-right:calc(50% - 50vw + var(--sbw,0px)/2)!important}
.logo-rail[data-sleep] .logo-track{animation:none!important}

/* ---------- Header ---------- */
.cwc-header{position:sticky;top:0;z-index:100;background:#ffffff}
.cwc-bar{position:relative;max-width:1120px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.cwc-logo{display:inline-flex;align-items:center;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em;color:#16181d;padding:10px 0;white-space:nowrap}
.cwc-logo .tld{color:inherit}
.cwc-merk{width:44px;height:44px;flex:0 0 auto;margin-right:9px}
.cwc-foot-merk .cwc-merk{width:42px;height:42px}
.cwc-nav{display:none;position:relative;align-items:stretch;align-self:stretch;gap:26px}
.cwc-nav-item:last-child{margin-left:6px}
.cwc-nav-item{position:relative;display:flex;align-items:stretch}
.cwc-tab{display:inline-flex;align-items:center;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15.5px;text-decoration:none;padding:18px 4px;color:#3d4246;border-bottom:2px solid transparent}
.cwc-tab:hover,.cwc-nav-item:focus-within>.cwc-tab{color:#16181d;border-bottom-color:#0e7bd1}
.cwc-drop{position:absolute;top:100%;padding-top:10px;z-index:110;visibility:hidden;opacity:0;transition:opacity .12s ease}
.cwc-drop-l{left:0}.cwc-drop-r{right:0}
.cwc-nav-item:hover>.cwc-drop,.cwc-nav-item:focus-within>.cwc-drop,.cwc-nav-item[data-open]>.cwc-drop{visibility:visible;opacity:1}
.cwc-nav-item[data-open]>.cwc-tab{color:#16181d;border-bottom-color:#0e7bd1}
.cwc-nav-item>.cwc-drop::before{content:"";position:absolute;left:-14px;right:-14px;top:-6px;height:22px}
.cwc-drop-inner{background:#ffffff;border:1px solid #dbe3ee;border-radius:12px;box-shadow:0 16px 36px rgba(14,36,71,.16);padding:8px;display:grid;gap:1px}
.cwc-drop-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:16px}
.cwc-drop-col{display:grid;gap:1px;align-content:start}
.cwc-dropkop{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#6b7280;padding:10px 10px 6px}
.cwc-droplink{display:block;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:15.5px;color:#16181d;text-decoration:none;padding:11px 12px;border-radius:8px}
.cwc-droplink:hover{background:#eef3fa;color:#16181d}
.cwc-acties{display:flex;align-items:center;gap:10px}
.cwc-burger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:1px solid #d5dce8;background:#fff;cursor:pointer;flex:0 0 auto}
.cwc-burger span{display:block;width:20px;height:2px;background:#16181d;box-shadow:0 -6px 0 #16181d,0 6px 0 #16181d}
#cwc-mobiel{display:none;border-top:1px solid #e3e8f0;background:#ffffff;padding:8px 16px 20px;max-height:70vh;overflow-y:auto}
.cwc-mob-kop{display:inline-flex;align-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15.5px;text-decoration:none;color:#0e5aa7;background:transparent;border:1px solid rgba(14,90,167,.28);border-radius:999px;padding:11px 18px;margin:14px 0 0}
.cwc-mob-kop:hover{color:#0e5aa7;background:#eef3fa}
#cwc-mobiel>.cwc-mob-kop:first-child{margin-top:6px}
.cwc-mob-rij{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 16px}
.cwc-chip{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;text-decoration:none;color:#0e5aa7;background:transparent;border:1px solid rgba(14,90,167,.28);border-radius:999px;padding:11px 16px}
.cwc-lees{position:relative;height:5px;background:#e6ebf2;border-bottom:1px solid #e3e8f0}
#leesFill{position:absolute;top:0;left:0;width:0%;height:100%;background:linear-gradient(90deg,#0ea5e9,#22d3ee)}
#leesMarker{position:absolute;top:50%;left:20px;transform:translate(-24%,calc(-50% + 1px));font-size:19px;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3));pointer-events:none;opacity:0;visibility:hidden}
#leesMarker>svg{display:block;transform:translateY(-140px)}
#leesMarker[data-in],#leesMarker[data-uit]{opacity:1;visibility:visible}
#leesMarker[data-uit]>svg{animation:vr-bril-weg .34s cubic-bezier(.4,0,.9,.5) both}
#leesMarker[data-in]>svg{animation:vr-bril-val .62s cubic-bezier(.32,1.24,.62,1) both}
@media(prefers-reduced-motion:reduce){#leesMarker>svg,#leesMarker[data-in]>svg{transform:none}#leesMarker[data-uit]{opacity:0;visibility:hidden}}
@keyframes vr-bril-weg{0%{transform:translateY(0)}100%{transform:translateY(-140px) rotate(-5deg)}}
@keyframes vr-bril-val{0%{transform:translateY(-140px) rotate(-6deg)}60%{transform:translateY(0) rotate(1.5deg)}78%{transform:translateY(-2.5px) rotate(-1deg)}92%{transform:translateY(0) rotate(.5deg)}100%{transform:translateY(0) rotate(0)}}

@media(min-width:860px){.cwc-nav{display:flex;position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%)}.cwc-burger{display:none}#cwc-mobiel{display:none!important}}

/* ---------- Footer ---------- */
.cwc-footer{background-image:linear-gradient(100deg,#081427 0%,#0c1e3a 22%,#123056 40%,#0c1e3a 60%,#081427 100%);background-size:280% 100%;background-position:0% 50%;animation:vr-gradient 14s ease-in-out infinite;color:#e8edf4;padding:52px 16px 30px}
.cwc-foot-groep{margin-top:26px}
.cwc-foot-sub{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.02em;color:#8fb4d8;margin:0 0 4px}
.cwc-foot-top{max-width:1120px;margin:0 auto}
.cwc-foot-merkblok{display:grid;gap:14px;justify-items:start;max-width:38ch}
.cwc-foot-kolommen{display:grid;gap:30px 26px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:start}
.cwc-foot-merkrij{max-width:1120px;margin:36px auto 0;padding-top:22px;border-top:1px solid #1d3a5f;display:grid;gap:10px}
.cwc-foot-merkrij .cwc-foot-tekst{max-width:none}
@media(min-width:860px){.cwc-foot-merkrij{grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}.cwc-foot-merkrij .cwc-foot-merk{margin:0}}
.cwc-foot-disclaimer{max-width:1120px;margin:36px auto 0;font-size:14px;line-height:1.6;color:#7e97b5}
.cwc-foot-grid{max-width:1120px;margin:0 auto;display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cwc-foot-merk{display:flex;align-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;margin:0 0 10px;color:#fff}
.cwc-foot-tekst{font-size:15.5px;line-height:1.6;margin:0;color:#a9bdd4;max-width:34ch}
.cwc-foot-kop{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#7e97b5;margin:0 0 12px}
.cwc-foot-links{display:grid;gap:2px}
.cwc-foot-link{color:#e8edf4;font-size:16px;padding:8px 0;text-decoration:none;display:block}
.cwc-foot-link:hover{color:#5ad0f0}
.cwc-foot-onder{max-width:1120px;margin:22px auto 0;padding-top:18px;border-top:1px solid #1d3a5f;display:flex;justify-content:center;text-align:center}
.cwc-foot-copy{font-size:14.5px;color:#7e97b5;margin:0}
.cwc-toeg{display:inline-flex;align-items:center;gap:11px;margin-top:26px;text-decoration:none;color:#e8edf4;border:1px solid #1d3a5f;background:rgba(255,255,255,.04);border-radius:999px;padding:6px 16px 6px 6px}
.cwc-toeg:hover{color:#5ad0f0;border-color:#33557f;background:rgba(255,255,255,.08)}
.cwc-toeg-icoon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#e8edf4;color:#081427;flex:0 0 auto}

/* ---------- Top 3-kaarten ---------- */
.top3{display:grid;gap:14px;margin:0 0 14px}
.top3:last-of-type{margin-bottom:30px}
.top3-duo{display:grid;gap:14px}
@media(min-width:820px){.top3-duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.top3-kaart{background:#ffffff;border:1px solid #dbe6f2;border-radius:18px;overflow:hidden;box-shadow:3px 6px 18px -12px rgba(9,28,53,.5)}
.top3-balk{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:10px 18px;background-image:linear-gradient(100deg,#081427 0%,#0d2447 26%,#155a9e 50%,#0d2447 74%,#081427 100%);background-size:280% 100%;background-position:0% 50%;animation:vr-gradient 14s ease-in-out infinite;border-bottom:1px solid #0d2447}
.top3-kaart[data-rang="1"] .top3-balk{background-image:linear-gradient(100deg,#081427 0%,#0d2447 26%,#155a9e 50%,#0d2447 74%,#081427 100%);background-size:280% 100%;background-position:0% 50%;animation:vr-gradient 14s ease-in-out infinite;border-bottom-color:#0d2447}
.top3-balk .rang{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#ffffff;margin:0}
.top3-kaart[data-rang="1"] .top3-balk .rang{color:#fff}
.top3-balk .score{display:inline-flex;align-items:baseline;gap:6px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#bcdcf5}
.top3-balk .score b{font-size:16px;letter-spacing:0;color:#ffffff}
.top3-kaart[data-rang="1"] .top3-balk .score{color:#bcdcf5}
.top3-kaart[data-rang="1"] .top3-balk .score b{color:#fff}
.top3-body{display:grid;gap:16px;padding:18px;align-items:stretch}
.top3-body img{width:100%;height:100%;min-height:190px;aspect-ratio:auto;object-fit:contain;background:#f6f9fc;border-radius:12px;display:block;border:1px solid #e3e8f0;padding:8px;box-sizing:border-box}
.top3-info{display:grid;gap:9px;align-content:center}
.top3-info h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em;margin:0;color:#16181d}
.top3-info p{font-size:15.5px;line-height:1.5;color:#5b6069;margin:0}
.top3-plus{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.top3-plus li{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.45;color:#33383b}
.top3-plus li::before{content:"✓";flex:0 0 auto;width:18px;height:18px;margin-top:1px;border-radius:50%;background:#e5f0fb;color:#0e5aa7;display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1}
.top3-acties{display:grid;gap:14px;margin-top:6px}
.top3-shops{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){
  .top3-body{grid-template-columns:230px minmax(0,1fr);gap:22px;padding:20px 22px}
  .top3-kaart[data-rang="1"] .top3-body{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:30px}
  .top3-body img{max-height:none;height:100%;object-position:center}
  .top3-acties{grid-template-columns:minmax(0,1fr);max-width:none}
}
@media(min-width:820px){
  .top3-duo .top3-body{grid-template-columns:minmax(0,1fr);grid-template-rows:215px minmax(0,1fr);align-content:stretch;gap:14px}
  .top3-duo .top3-body img{max-height:none;height:215px}
}

/* ---------- Fotogalerij (full-bleed, sleepbaar) ---------- */
.galerij{position:relative;max-width:none;margin:var(--sp-3) 0 0;overflow:hidden;border-radius:16px}
.galerij-rail{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;list-style:none;margin:0;padding:0;cursor:grab;-webkit-overflow-scrolling:touch}
.galerij-rail::-webkit-scrollbar{display:none}
.galerij-rail[data-grijpt]{cursor:grabbing;scroll-snap-type:none}
.galerij-rail>li{flex:0 0 100%;scroll-snap-align:center}
.galerij-rail img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#ffffff;border-radius:16px;display:block;pointer-events:none;user-select:none;border:1px solid #e3e8f0;box-shadow:3px 5px 16px -12px rgba(9,28,53,.5)}
.galerij-rail video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#ffffff;border-radius:16px;display:block;pointer-events:none;border:1px solid #e3e8f0;box-shadow:3px 5px 16px -12px rgba(9,28,53,.5)}
.galerij-onder{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0}
.galerij-punt{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#c9d4e2;cursor:pointer;transition:background .15s ease,width .15s ease}
.galerij-punt[aria-current="true"]{width:24px;border-radius:99px;background:#0e5aa7}
.galerij-knop{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #d5dce8;border-radius:50%;background:#fff;color:#0e5aa7;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.galerij-knop:hover{border-color:#0e7bd1;background:#eef5fb}
.galerij-knop[disabled]{opacity:.35;cursor:default}

/* ---------- Sleepbare kaartrail ---------- */
.kaart-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 -46px 0 -16px;padding:2px 46px 6px 16px;list-style:none;cursor:grab;-webkit-overflow-scrolling:touch}
.kaart-rail::-webkit-scrollbar{display:none}
.kaart-rail[data-grijpt]{cursor:grabbing;scroll-snap-type:none}
.kaart-rail>li{flex:0 0 clamp(226px,25vw,250px);scroll-snap-align:start}
.kaart-rail > li > a{display:grid;gap:10px;height:100%;padding:14px;background:#ffffff;border:1px solid #e3e8f0;border-radius:16px;text-decoration:none;align-content:start;transition:border-color .15s ease,box-shadow .15s ease}
.kaart-rail .kaart-blok{transition:border-color .15s ease,box-shadow .15s ease}
.kaart-rail .kaart-blok:hover{border-color:#b9cfe6;box-shadow:0 10px 24px -18px rgba(9,28,53,.55)}
.kaart-rail .kaart-blok a{text-decoration:none}
.kaart-rail .kaart-blok>a{display:grid;gap:10px;padding:0;background:none;border:0;border-radius:0}
.kaart-rail .kaart-blok .cta-deal{border:0;border-radius:12px}
.kaart-blok .kaart-cta{display:grid;gap:8px;justify-items:start}
.kaart-blok .kaart-cta .kaart-leeslink{order:-1;font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:14.5px;color:#0e5aa7;text-decoration:underline;text-underline-offset:2px}
.kaart-blok .kaart-cta .kaart-leeslink:hover{color:#0b4680}
.kaart-blok .kaart-cta .cta-deal{width:100%;justify-content:center}
.kaart-rail > li > a:hover{border-color:#b9cfe6;box-shadow:0 10px 24px -18px rgba(9,28,53,.55)}
.kaart-rail img{width:100%;border-radius:11px;aspect-ratio:16/9;object-fit:cover;background:#ffffff;pointer-events:none}
.kaart-rail .titel{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:#16181d}
.kaart-rail .sub{font-size:14.5px;line-height:1.45;color:#5b6069}
/* rechterrand vervaagt zodat zichtbaar is dat er meer volgt */
.rail-wrap{position:relative}
.rail-wrap::after{content:"";position:absolute;top:0;right:-16px;width:64px;height:100%;pointer-events:none;background:linear-gradient(90deg,rgba(246,248,251,0),#f6f8fb 72%);opacity:1;transition:opacity .2s ease}
.rail-wrap[data-eind]::after{opacity:0}

/* ---------- Hero-band: full-bleed bewegende gradient ---------- */
.hero-band{
  margin:0 calc(50% - 50vw + var(--sbw,0px)/2);
  padding:20px calc(50vw - 50% - var(--sbw,0px)/2) 40px;
  border-radius:0 0 clamp(18px,2.6vw,30px) clamp(18px,2.6vw,30px);
  background-image:linear-gradient(100deg,#081427 0%,#0d2447 26%,#155a9e 50%,#0d2447 74%,#081427 100%);
  background-size:280% 100%;
  background-position:0% 50%;
  animation:vr-gradient 14s ease-in-out infinite;
}
.hero-grid{display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));align-items:center;padding:8px 0}

/* ---------- Artikelsecties: afwisselend 1 en 2 kolommen ---------- */
.blok{padding:clamp(44px,6vw,72px) 0 0}
.blok h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(23px,3.2vw,31px);line-height:1.14;letter-spacing:-.025em;margin:0 0 16px;color:#16181d;text-wrap:balance}
.blok p{font-size:17px;line-height:1.72;color:#33383b;margin:0;text-wrap:pretty}
.blok .lead{font-size:17px;line-height:1.72;color:#33383b;font-weight:400;letter-spacing:0}
.blok .stroom{display:block}
.blok .stroom>p{margin:0 0 18px;max-width:none}
.blok .stroom>p:last-child{margin-bottom:0}
.blok .stroom>h3.subkop{margin:24px 0 8px}
.blok .stroom>*:first-child{margin-top:0}
.blok .stroom>div:first-child{margin-bottom:16px}
.blok h3.subkop{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17.5px;line-height:1.3;letter-spacing:-.01em;color:#16181d;margin:0}
.blok h3.subkop+p{margin-top:0}

.blok .opsomming{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.blok .opsomming>li{position:relative;padding-left:22px;font-size:17px;line-height:1.7;color:#33383b;text-wrap:pretty}
.blok .opsomming>li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:2px;background:#0e7bd1}

/* Beeld naast tekst */
.duo{display:grid;gap:22px}
.duo figure{margin:0}
.duo img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:#ffffff;border:1px solid #e3e8f0;box-shadow:3px 5px 16px -12px rgba(9,28,53,.5)}
.duo figcaption{font-size:14px;line-height:1.5;color:#6b7280;margin:9px 2px 0}
figcaption{font-size:14px;line-height:1.5;color:#6b7280;margin:9px 2px 0}
figcaption sup{display:inline-block;font-size:1em;font-style:italic;vertical-align:super;line-height:1.5}
@media(min-width:860px){
  .duo.wikkel{display:block}
  .duo.wikkel .stroom>figure,.duo.wikkel>figure{float:right;width:min(46%,430px);margin:4px 0 24px 36px}
  .duo.wikkel .stroom>figure+*{margin-top:0}
  .duo.wikkel .stroom{display:block;width:auto}
  .duo.wikkel .stroom>p{max-width:none}
@media(min-width:860px){.duo.wikkel .stroom.tweeluik{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.duo.wikkel .stroom.drieluik{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}
  .duo.wikkel::after{content:"";display:block;clear:both}
  .duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,54px);align-items:center}
  .duo>figure{order:2}
  .duo .stroom{align-content:center}
  .duo p{max-width:56ch}
}

/* Twee tekstkolommen onder een brede kop */
.breed .blok-kop{max-width:none}
.breed .blok-kop h2{max-width:34ch}
@media(min-width:860px){
  .breed .stroom{column-count:2;column-gap:clamp(32px,4.5vw,60px);display:block}
  .breed .stroom>p{break-inside:avoid;margin:0 0 16px}
  .breed .stroom>p:last-child{margin-bottom:0}
  .breed .lead{column-span:all;max-width:none;margin:0 0 22px}
}

/* Smal blok */
.smal{max-width:none}
.smal h2{max-width:34ch}
.blok .stroom>p,.blok .stroom>h3.subkop{max-width:none}

.kerncijfers{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.kerncijfers{grid-template-columns:repeat(var(--kols,4),minmax(0,1fr))}}
.kerncijfers li{background:#ffffff;border:1px solid #e3e8f0;border-radius:14px;padding:16px 18px;display:grid;gap:3px}
.kerncijfers b{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:23px;line-height:1.1;letter-spacing:-.02em;color:#0e5aa7}
.kerncijfers span{font-size:14.5px;line-height:1.45;color:#5b6069}
.citaat{margin:4px 0 0;padding:20px 24px;border-left:3px solid #0e7bd1;background:#eef5fb;border-radius:0 14px 14px 0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;line-height:1.45;letter-spacing:-.015em;color:#0b3f6b}

/* ---------- Aanbiedingenlijst (affiliate) ---------- */
.deal-blok{background:#ffffff;border:1px solid #dbe6f2;border-radius:18px;overflow:hidden;box-shadow:0 12px 30px -22px rgba(9,28,53,.5)}
.deal-balk{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;padding:14px 16px;background-image:linear-gradient(100deg,#081427 0%,#0d2447 26%,#155a9e 50%,#0d2447 74%,#081427 100%);background-size:280% 100%;background-position:0% 50%;animation:vr-gradient 14s ease-in-out infinite;border-bottom:1px solid #0d2447}
.deal-balk .deal-titel{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:#ffffff;margin:0}
.deals{list-style:none;margin:0;padding:12px;display:grid;gap:10px}
.deals>li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:4px 14px;align-items:center;padding:14px 15px;border:1px solid #e6ecf4;border-radius:14px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.deals>li:hover{border-color:#b9cfe6;box-shadow:0 8px 20px -16px rgba(9,28,53,.5);transform:translateY(-1px)}
.deals>li[data-top]{border-color:#a9c6e3;background:#eaf4fe}
.deals .shop{grid-row:span 2;display:grid;justify-items:center;align-content:start;gap:6px}
.deals .shopnaam{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11.5px;line-height:1.2;letter-spacing:.01em;color:#54708e;text-align:center}
.deals>li[hidden]{display:none}
.deals .logo{width:46px;height:46px;border-radius:11px;object-fit:contain}
.deals .naam{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16.5px;line-height:1.3;color:#16181d;margin:0}
.deals .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.deals .chip{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12px;letter-spacing:.02em;color:#4a5560;background:#f1f4f9;border-radius:7px;padding:4px 9px}
.deals .chip-shop{color:#0b4a6f;background:#e5f0fa}
.deals .chip-top{color:#0b4a6f;background:#ffffff;border:1px solid #a9c6e3}
.deals .knop{grid-column:2;justify-self:start;display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:8px;padding:0 18px;border:1px solid #c3d5e8;border-radius:10px;background:#f6f9fc;color:#0e5aa7;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;white-space:nowrap;transition:background .15s ease,border-color .15s ease}
.deals .knop:hover,.deals .knop:focus-visible{background:#e8f1fa;border-color:#0e7bd1;color:#0a4581}
.deal-leeg{display:none;padding:6px 16px 18px;font-size:15.5px;color:#5b6069}
.deal-blok[data-leeg] .deal-leeg{display:block}
.checklijst{grid-template-columns:1fr}
@media(min-width:760px){.checklijst{grid-template-columns:repeat(6,1fr)}.checklijst>li[data-span="2"]{grid-column:span 2}.checklijst>li[data-span="3"]{grid-column:span 3}}
.affiliate-melding{margin:6px 2px 0;font-size:10.5px;line-height:1.4;letter-spacing:.01em;color:#5f6b7a;text-wrap:pretty}
@media(min-width:720px){
  .deals>li{grid-template-columns:66px minmax(0,1fr) auto;gap:3px 18px;padding:15px 18px}
  .deals .logo{width:50px;height:50px}
  .deals .shop{grid-column:1;grid-row:1 / span 2;align-content:center}
  .deals .naam{grid-column:2;grid-row:1}
  .deals .meta{grid-column:2;grid-row:2}
  .deals .knop{grid-column:3;grid-row:1 / span 2;justify-self:end;align-self:center;margin-top:0}
}

/* Secundaire shopknop (minder opvallend dan de CTA) */
.shop-knop{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:0 12px;border:1px solid #d5dce8;border-radius:10px;background:#f7f9fc;color:#0e5aa7;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s ease,border-color .15s ease}
.shop-knop:hover,.shop-knop:focus-visible{background:#eaf2fa;border-color:#a9c6e3;color:#0a4581}

/* ---------- Voor- en nadelenlijsten ---------- */
.pluslijst,.minlijst{list-style:none;margin:0;padding:14px 20px 18px;display:grid;gap:9px}
.pluslijst li,.minlijst li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:#33383b}
.pluslijst li::before,.minlijst li::before{flex:0 0 auto;width:18px;height:18px;margin-top:1px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1;font-weight:700}
.pluslijst li::before{content:"✓";background:#e5f0fb;color:#0e5aa7}
.minlijst li::before{content:"−";background:#eef1f5;color:#5b6069}

/* ---------- Specificatietabel met zoekbalk ---------- */
.spec-blok{background:#ffffff;border:1px solid #e3e8f0;border-radius:16px;overflow:hidden}
.spec-balk{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;padding:14px 16px;background-image:linear-gradient(100deg,#081427 0%,#0d2447 26%,#155a9e 50%,#0d2447 74%,#081427 100%);background-size:280% 100%;background-position:0% 50%;animation:vr-gradient 14s ease-in-out infinite;border-bottom:1px solid #0d2447}
.spec-balk .spec-titel{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:#ffffff;margin:0}
.spec-zoekveld{position:relative;flex:1 1 210px;max-width:320px}
.spec-zoekveld svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#8b95a5;pointer-events:none}
.spec-zoekveld input{width:100%;min-height:44px;padding:0 14px 0 38px;border:1px solid rgba(255,255,255,.28);border-radius:10px;background:rgba(255,255,255,.96);font-size:15.5px;color:#16181d}
.spec-zoekveld input::placeholder{color:#8b95a5}
.spec-zoekveld input:focus-visible{outline:3px solid #22d3ee;outline-offset:1px;border-color:#0e7bd1}
.spec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.spec-scroll table{width:100%;min-width:420px;border-collapse:collapse}
.spec-scroll th,.spec-scroll td{padding:13px 18px;border-bottom:1px solid #eef2f7;font-size:15.5px;line-height:1.5;vertical-align:top}
.spec-scroll th{text-align:left;font-family:'Space Grotesk',sans-serif;font-weight:600;color:#4a5054;width:56%}
.spec-scroll td{color:#16181d}
.spec-scroll tr:last-child th,.spec-scroll tr:last-child td{border-bottom:0}
.spec-scroll tr[hidden]{display:none}
.spec-scroll mark{background:#d9edfb;color:inherit;border-radius:3px;padding:0 1px}
.spec-leeg{display:none;padding:18px;font-size:15.5px;color:#5b6069}
.spec-blok[data-leeg] .spec-leeg{display:block}

/* ---------- Compactere verticale ritmes op mobiel ---------- */
@media(max-width:759px){
  .page-toc{margin-top:12px!important}
  main section[data-visibility]{padding-top:30px!important}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:759px){#soorten > div{grid-template-columns:minmax(0,1fr)!important}}

/* ---------- Tracking-kaarten: vrije kolommenflow ---------- */
.track-flow{column-gap:14px}
.track-kaart{background:#ffffff;border:1px solid #e3e8f0;border-radius:14px;padding:18px 20px;margin:0 0 14px;box-shadow:3px 5px 14px -10px rgba(9,28,53,.45);break-inside:avoid}
@media(min-width:760px){.track-flow{column-count:2}}

@media(max-width:679px){.shop-rij-2,.shop-rij-3{grid-template-columns:minmax(0,1fr)!important}}

/* ---------- Knoppen uitlijnen over kaarten in dezelfde rij ---------- */
.top3-kaart{display:flex;flex-direction:column}
.top3-kaart .top3-body{flex:1}
.top3-info{height:100%;display:flex;flex-direction:column;gap:9px}
.top3-info > .top3-acties{margin-top:auto;padding-top:10px}

/* ---------- Toegankelijkheid: skiplink, focus, knop-resets ---------- */
.cwc-skip{position:absolute;left:12px;top:-60px;z-index:999;background:#f6a531;color:#16181d;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;padding:12px 20px;border-radius:0 0 12px 12px;text-decoration:none;transition:top .18s ease}
.cwc-skip:focus{top:0}
#hoofdinhoud:focus{outline:none}
:where(a,button,summary,[tabindex]):focus-visible{outline:3px solid #5ad0f0;outline-offset:3px;border-radius:6px}
.cwc-footer :where(a,button):focus-visible{outline-color:#f6a531}
button.cwc-foot-link{font:inherit;font-size:16px;text-align:left;background:none;border:0;cursor:pointer;width:100%}
button.cwc-toeg{font:inherit;cursor:pointer;text-align:left}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- Nieuwskaarten in artikelen (Meer VR-nieuws) ---------- */
[data-meer-nieuws] .nieuwskaart{transition:border-color .15s ease,box-shadow .15s ease}
[data-meer-nieuws] .nieuwskaart:hover{border-color:#b9cfe6;box-shadow:0 10px 24px -18px rgba(9,28,53,.55)}
[data-lees-ook] a{font-weight:600}

/* ---------- Reviewkaarten homepage: twee knoppen ---------- */
.rev-kaart{display:flex;flex-direction:column;gap:10px;height:100%;padding:16px;background:#fff;border:1px solid #e3e8f0;border-radius:14px;transition:border-color .15s ease,box-shadow .15s ease}
.rev-kaart:hover{border-color:#b9cfe6;box-shadow:0 10px 24px -18px rgba(9,28,53,.55)}
.rev-kaart > a.rev-beeld{display:block;text-decoration:none}
.rev-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:#16181d;text-decoration:none;display:block}
a.rev-titel:hover{color:#0e5aa7}
.rev-sub{font-size:14.5px;line-height:1.5;color:#5b6069;min-height:calc(3 * 1.5em)}
.rev-knoppen{display:grid;gap:18px;margin-top:auto;padding-top:4px}
.rev-knoppen a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border-radius:10px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;text-decoration:none;text-align:center;transition:background .15s ease,border-color .15s ease,color .15s ease}
.rev-shop{background:#0e5aa7;color:#fff;border:1px solid #0e5aa7}
.rev-shop:hover{background:#0a4680;border-color:#0a4680;color:#fff}
.rev-knoppen a.rev-leeslink{justify-content:flex-start;min-height:0;padding:0;font-weight:400;font-size:14.5px;color:#0e5aa7;text-decoration:underline;text-underline-offset:3px;text-align:left}
.rev-knoppen a.rev-leeslink:hover{color:#0a3d73}

/* ---------- Hero-poppetje: schaduw, subtiele kanteling en elastische hover ---------- */
.hero-fig{width:min(380px,68%);margin-inline:auto;transition:transform .28s ease-out}
@media(min-width:860px){.hero-fig{margin-left:auto;margin-right:0;justify-content:flex-end!important;width:min(380px,100%)}}
.hero-fig>.hero-poppetje{width:100%!important;height:auto}
.hero-fig:hover{transform:scale(1.03);transition:transform .5s cubic-bezier(.34,1.35,.64,1)}
.hero-poppetje{display:block;filter:drop-shadow(14px 18px 22px rgba(4,12,26,.45));animation:vr-kantel 9s ease-in-out infinite;transform-origin:50% 55%;will-change:transform}
@keyframes vr-kantel{0%,100%{transform:perspective(900px) rotateY(-11deg)}50%{transform:perspective(900px) rotateY(11deg)}}
@media (prefers-reduced-motion:reduce){.hero-poppetje{animation:none}.hero-fig,.hero-fig:hover{transition:none;transform:none}}
/* Mobiel: geen herobeeld, alleen kop en tekst */
@media(max-width:759px){.hero-band figure{display:none!important}}

/* ---------- Kop boven een kaartrail ---------- */
.rail-kop{margin:0 0 18px}
.rail-kop h2{margin:0}

/* Sectieritme */
section.blok{padding:56px 0 0}
section.blok:first-of-type{padding-top:48px}
main>section+section{margin-top:0}

/* ---------- Tekstkaarten: alinea met eigen subkop ---------- */
.tekstkaarten{display:grid;gap:20px;margin:26px 0 0;align-items:start}
.tekstkaart{background:#ffffff;border:1px solid #e3e8f0;border-radius:16px;padding:var(--sp-3);box-shadow:3px 5px 14px -10px rgba(9,28,53,.45)}
.tekstkaart h3.subkop{margin:0 0 9px}
.tekstkaart p{font-size:16.5px;line-height:1.7;color:#33383b;margin:0}
.tekstkaart p+p{margin-top:14px}
.tekstkaart.breed{background:linear-gradient(180deg,#f7fafd 0%,#ffffff 60%)}
@media(min-width:760px){
  .tekstkaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tekstkaarten.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tekstkaart.breed{grid-column:1 / -1}
}

/* ---------- Spacingschaal ---------- */
@media(min-width:760px){:root{--sp-1:10px;--sp-2:12px;--sp-3:22px;--sp-4:32px;--sp-5:48px;--sp-6:64px}}
@media(min-width:1100px){:root{--sp-1:10px;--sp-2:12px;--sp-3:24px;--sp-4:36px;--sp-5:56px;--sp-6:72px}}
main>section,main>div>section,section.blok{padding-top:var(--sp-5)}
main>section:first-of-type{padding-top:var(--sp-5)}
.blok h2,.rail-kop h2{margin:0 0 var(--sp-2)}
.blok .stroom{gap:var(--sp-3)}
.duo{gap:var(--sp-4)}
.rail-kop{margin:0 0 var(--sp-3)}
.table-scroll,.spec-blok,.deal-blok{margin-top:var(--sp-3)}
figure+*{margin-top:var(--sp-3)}

/* --- Alternatieve tekstblokken: variatie in ritme --- */

.stapels{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:18px}
.stapels[data-kolommen="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.stapels[data-kolommen="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:880px){.stapels[data-kolommen="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.stapels[data-kolommen="2"],.stapels[data-kolommen="3"]{grid-template-columns:minmax(0,1fr)}}
.stapels li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:9px;align-items:start;background:linear-gradient(180deg,#f7fafd 0%,#ffffff 70%);border:1px solid #e3e8f0;border-radius:16px;padding:18px 20px}
.stapels li>*{grid-column:2}
.stapels li>.stap-icoon{grid-column:1;grid-row:1 / -1;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#e5f0fb;color:#0e5aa7}
.stapels h3.subkop{margin:0}
.stapels li>p+p{margin-top:14px}
.stapels p{font-size:16.5px;line-height:1.7;color:#33383b;margin:0;text-wrap:pretty}

/* --- Conclusie: het belangrijkste blok van de pagina --- */
.conclusie-kaart{position:relative;display:grid;gap:clamp(20px,3vw,34px);background:linear-gradient(180deg,#f7fbfe 0%,#ffffff 55%);border:1px solid #dbe6f2;border-radius:20px;padding:clamp(24px,3vw,34px);box-shadow:0 18px 40px -30px rgba(9,28,53,.7);overflow:hidden}
.conclusie-kaart::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#0e5aa7 0%,#2f9fe0 45%,#67d6f8 100%)}
@media(min-width:760px){.conclusie-kaart{grid-template-columns:auto minmax(0,1fr);align-items:start}}
.conclusie-score{display:grid;justify-items:center;align-content:center;gap:2px;min-width:132px;padding:20px 24px;border-radius:16px;
  background-image:linear-gradient(100deg,#081427 0%,#0d2447 30%,#155a9e 52%,#0d2447 74%,#081427 100%);background-size:280% 100%;background-position:0% 50%;animation:vr-gradient 16s ease-in-out infinite}
.conclusie-score .cijfer{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(38px,5vw,46px);line-height:1;letter-spacing:-.03em;color:#ffffff}
.conclusie-score .label{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:#8fd8fb}
.conclusie-tekst{display:grid;gap:16px}
.conclusie-tekst p{font-size:17px;line-height:1.72;color:#33383b;margin:0;text-wrap:pretty}

/* Vierkante 3D-illustraties: nooit croppen */
.fig-illustratie{display:flex;justify-content:center;align-items:center;margin:0}
.fig-illustratie img{width:min(340px,80%);height:auto!important;aspect-ratio:1;object-fit:contain;background:none;border:0;box-shadow:none;border-radius:0}
.kaart-rail img.illustratie{aspect-ratio:auto;height:180px;object-fit:contain;background:none;border:0;box-shadow:none;width:100%;margin:0;display:block}

/* Leesritme lange tekstblokken */
.blok .stroom>figure{max-width:none}

.stroom.tweeluik,.stroom.drieluik{display:grid;gap:30px 44px;align-items:start;margin-top:26px}
.blok .stroom+.stroom,.blok .stroom+.tekstkaarten{margin-top:26px}
.stroom.tweeluik>p.intro,.stroom.drieluik>p.intro{grid-column:1 / -1;margin:0}
.luik{display:grid;gap:8px;align-content:start}
.luik>h3.subkop{margin:0}
.luik p+h3.subkop,.tekstkaart p+h3.subkop{margin-top:26px}
.blok h3.subkop{margin-top:24px}
.blok .luik>h3.subkop,.blok .tekstkaart>h3.subkop{margin-top:0}
.blok p+h3.subkop{margin-top:26px}
.blok h3.subkop+p{margin-top:8px}
.blok .stroom>p+p{margin-top:16px}
.luik>p{margin:0}
.luik>p+p{margin-top:14px}
@media(min-width:860px){.stroom.tweeluik{grid-template-columns:repeat(2,minmax(0,1fr))}.stroom.drieluik{grid-template-columns:repeat(3,minmax(0,1fr))}}
.reviewkop{display:grid;gap:24px;align-items:start;margin-top:18px}
@media(min-width:860px){.reviewkop{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}}
.reviewkop>.stroom{margin-top:0}
.reviewkop figure{margin:0}
.reviewkop figure>img,.reviewkop figure>video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:#eef1f6}
.reviewkop figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;color:#5b6069}
.stroom.kolommen{columns:2;column-gap:44px}
.stroom.kolommen3{columns:3;column-gap:36px}
.stroom.kolommen3>p{margin:0 0 14px;break-inside:avoid}
.stroom.kolommen3>h3.subkop{break-after:avoid;break-inside:avoid}
@media(max-width:1000px){.stroom.kolommen3{columns:2}}
@media(max-width:720px){.stroom.kolommen3{columns:1}}
.stroom.kolommen>p{margin:0 0 16px;break-inside:avoid}
.stroom.kolommen>h3.subkop{break-after:avoid;break-inside:avoid;-webkit-column-break-after:avoid;-webkit-column-break-inside:avoid}
@media(max-width:859px){.stroom.kolommen{columns:1}}
.duo.wikkel .stroom>p{max-width:none}

/* Subscores in de conclusie */
.subscores{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;margin:22px 0 0;padding:22px 0 0;border-top:1px solid #e3e8f0}
.subscore{display:grid;gap:8px}
.subscore-kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.subscore-naam{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.01em;color:#16181d}
.subscore-cijfer{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;color:#0e5aa7;font-variant-numeric:tabular-nums}
.subscore-balk{position:relative;height:8px;border-radius:99px;background:#e7edf5;overflow:hidden}
.subscore-balk>span{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,#0d4f8c,#3fb8e8);transform-origin:left center}
.subscores[data-vul] .subscore-balk>span{width:var(--doel)!important;transform:scaleX(0);transition:transform 1.15s cubic-bezier(.34,1.42,.64,1)}
.subscores[data-vul="1"] .subscore-balk>span{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.subscores[data-vul] .subscore-balk>span{transition:none;transform:scaleX(1)}}
@media(max-width:720px){.subscores{grid-template-columns:1fr;gap:16px}}

/* ---------- Auteursblok ---------- */
.auteur-kaart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;background:#ffffff;border:1px solid #e3e8f0;border-radius:16px;padding:22px 24px;box-shadow:3px 5px 18px -14px rgba(9,28,53,.5)}
.auteur-foto{position:relative;width:64px;flex:0 0 auto}
.auteur-kaart .auteur-foto img{width:64px;height:64px;border-radius:50%;display:block;background:#ffffff}
.auteur-linkedin img{width:20px;height:20px;display:block;border-radius:0;background:none;object-fit:contain}
.auteur-linkedin{position:static;display:inline-block;width:20px;height:20px;margin-left:3px;vertical-align:-3px;transition:transform .18s ease}

.auteur-linkedin:hover{transform:scale(1.12)}
.auteur-kaart .naam{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;line-height:1.3;color:#16181d;margin:0 0 4px}
.auteur-kaart .rol{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;color:#0e5aa7;margin:0 0 10px}
.auteur-kaart p{font-size:16px;line-height:1.7;color:#33383b;margin:0}
@media(max-width:560px){.auteur-kaart{grid-template-columns:1fr}}
.profiel{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.profiel{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}}
.profiel figure{margin:0}
.profiel img{width:100%;height:auto;display:block;border-radius:16px;background:#ffffff;box-shadow:6px 10px 26px -18px rgba(9,28,53,.6)}
.profiel figcaption{font-size:13.5px;color:#5a636b;margin:9px 0 0}

/* ---------- Contactpagina: kolom met FAQ-kaart + foto ---------- */
.contact-rij{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:start}
.contact-kolom{display:grid;gap:18px;align-content:start}
.contact-foto{margin:0}
.contact-foto img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 62%;border:1px solid #e3e8f0;border-radius:18px;box-shadow:3px 5px 14px -10px rgba(9,28,53,.45)}
@media(min-width:660px){
  .contact-kolom{grid-template-rows:auto minmax(120px,1fr);align-content:stretch;align-self:stretch;min-height:0}
  .contact-foto{position:relative;height:100%;min-height:0;overflow:hidden;border-radius:18px}
  .contact-foto img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
}

/* Kaartbeelden: gelijke maat als op de homepage, illustraties niet gecropt */
.kaart-blok>a>img{width:100%;height:180px;object-fit:cover;border-radius:11px;background:#f4f7fb}
.kaart-blok>a>img.illustratie{object-position:center 30%}

/* Rij met 2 of 3 kaarten: geen scroll nodig, dus volle breedte */
.kaart-rail.vol{display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));overflow:visible;margin:0;padding:2px 0 6px}
.kaart-rail.vol>li{flex:none;width:auto}
@media(max-width:700px){.kaart-rail.vol{grid-template-columns:1fr}}
/* Eén kaart: niet uitrekken maar op normale breedte, gecentreerd */
.kaart-rail.vol:has(>li:only-child){grid-template-columns:minmax(0,372px);justify-content:center}
.kaart-rail:not(.vol):has(>li:only-child){justify-content:center}
.kaart-rail:not(.vol)>li:only-child{width:min(372px,100%)}

/* Kaartjes in een rij: gelijke hoogte, knop onderaan uitgelijnd */
.kaart-rail{align-items:stretch}
.kaart-rail>li{display:flex}
.kaart-rail .kaart-blok{width:100%;height:100%;grid-template-rows:auto auto 1fr auto}
.kaart-rail .kaart-blok>a{grid-row:1 / span 3;display:grid;grid-template-rows:subgrid;align-content:start}
.kaart-rail .kaart-blok .kaart-cta{grid-row:4}

.kaart-rail .kaart-blok{min-height:372px}

.kaart-rail>li>a>img{width:100%;height:180px;object-fit:cover;border-radius:11px;background:#f4f7fb}

/* ---------- Zoeken in de menubalk ---------- */
.cwc-zoek{position:relative;flex:0 0 auto}
.cwc-zoek form{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid #d5dce8;border-radius:11px;background:#f7f9fc;transition:border-color .16s,background .16s,box-shadow .16s}
.cwc-zoek form:focus-within{border-color:#0e5aa7;background:#fff;box-shadow:0 0 0 3px rgba(14,90,167,.13)}
.cwc-zoek svg{flex:0 0 auto;color:#5f7fa0}
.cwc-zoek input{border:0;background:none;outline:0;width:154px;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:14.5px;color:#16181d;padding:0}
.cwc-zoek input::placeholder{color:#7b8ca3;font-weight:500}
.cwc-zoek input::-webkit-search-cancel-button{display:none}
.cwc-zoek-uit{position:absolute;top:calc(100% + 8px);right:0;width:min(400px,calc(100vw - 32px));background:#fff;border:1px solid #e3e8f0;border-radius:14px;box-shadow:10px 16px 40px -18px rgba(9,28,53,.5);padding:6px;display:none;z-index:120;max-height:min(62vh,460px);overflow-y:auto}
.cwc-zoek[data-open] .cwc-zoek-uit{display:block}
.cwc-zoek-uit a{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 11px;border-radius:10px;text-decoration:none}
.cwc-zoek-uit a:hover,.cwc-zoek-uit a[data-actief]{background:#f0f5fb}
.cwc-zoek-uit .zt{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;color:#16181d;line-height:1.3}
.cwc-zoek-uit .zs{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#0e5aa7;align-self:center}
.cwc-zoek-uit .zd{grid-column:1 / -1;font-size:13px;line-height:1.5;color:#5c6470;margin:0}
.cwc-zoek-uit mark{background:#d9ecfb;color:inherit;border-radius:3px;padding:0 1px}
.cwc-zoek-leeg{padding:12px 11px;font-size:13.5px;color:#5c6470}
.cwc-zoek.mobiel{display:block;margin:6px 0 12px}
.cwc-zoek.mobiel input{width:100%}
.cwc-zoek.mobiel form{height:44px}
.cwc-zoek.mobiel .cwc-zoek-uit{position:static;width:auto;box-shadow:none;margin-top:8px;max-height:none}
.cwc-zoek.balk{display:none}
@media(min-width:900px){.cwc-zoek.balk{display:block}}
@media(min-width:900px) and (max-width:1080px){.cwc-zoek input{width:112px}}

/* ---------- Shopkaarten: gelijke hoogte, knop op één lijn ---------- */
.shopkaart{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;background:#fff;border:1px solid #e3e8f0;border-radius:16px;padding:18px;box-shadow:3px 5px 14px -10px rgba(9,28,53,.45)}
.shopkaart>span:nth-child(2){min-height:calc(2 * 1.5em)}
.shopkaart>ul{align-self:start}
.shopkaart>ul>li{min-height:calc(2 * 1.45em)}
.shopkaart>a{align-self:end}

/* ---------- Merkrooster op de homepage ---------- */
.merkrooster{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.merkrooster>li{display:flex}
.merkrooster a{display:grid;grid-template-rows:auto auto 1fr;gap:4px;width:100%;padding:14px;background:#fff;border:1px solid #e3e8f0;border-radius:14px;text-decoration:none;box-shadow:3px 5px 14px -10px rgba(9,28,53,.45);transition:transform .16s,box-shadow .16s,border-color .16s}
.merkrooster a:hover{transform:translateY(-2px);border-color:#b9cfe6;box-shadow:6px 10px 22px -14px rgba(9,28,53,.5)}
.merkrooster img{width:100%;height:150px;object-fit:cover;background:#f4f7fb;border-radius:11px;margin:0 0 8px}
.merkrooster .merknaam{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16.5px;color:#16181d}
.merkrooster .merkmodellen{font-size:14.5px;line-height:1.45;color:#5b6069}

.deal-leeg,.spec-leeg,.zoek-leeg{font-family:'Space Grotesk',system-ui,sans-serif;font-size:16.5px;line-height:1.6;color:#5c6470}

/* Vaste afstand kop → tekst en subkop → tekst */
main section h2{margin-bottom:12px}
main h3.subkop{margin-bottom:8px}
.stroom.kolommen>h3.subkop,.luik>h3.subkop,.tekstkaart>h3.subkop{margin-bottom:8px}

main h3.subkop+p{margin-top:0}
main section h2+*{margin-top:0}
main section h2+*>*:first-child{margin-top:0}

.blok .luik>h3.subkop+p,.blok .tekstkaart>h3.subkop+p,.blok .stroom>h3.subkop+p,main .luik>h3.subkop+p,main .tekstkaart>h3.subkop+p{margin-top:0}

main .luik>h3.subkop,main .tekstkaart>h3.subkop,main .stroom>h3.subkop{margin:0 0 8px}
main .luik>h3.subkop+p,main .tekstkaart>h3.subkop+p,main .stroom>h3.subkop+p{margin-top:0;margin-bottom:16px}
main .luik>p:last-child,main .tekstkaart>p:last-child,main .stroom>p:last-child{margin-bottom:0}

main .luik,main .tekstkaart{row-gap:8px}
main .luik>h3.subkop,main .tekstkaart>h3.subkop{margin-bottom:0}
main .luik>h3.subkop+p,main .tekstkaart>h3.subkop+p{margin-bottom:8px}

main .stroom>h3.subkop{margin-bottom:8px}
main .stroom.tweeluik>h3.subkop,main .stroom.drieluik>h3.subkop{margin-bottom:0}

main .tekstkaart,main .luik{display:grid;align-content:start;row-gap:8px}
main .tekstkaart>h3.subkop,main .luik>h3.subkop{margin:0}
main .tekstkaart>p,main .luik>p{margin:0}
main .tekstkaart>p+p,main .luik>p+p{margin-top:8px}

main section>h2,main section>div>h2,main article>h2{margin-top:0;margin-bottom:12px}
main section>h2+p,main section>div>h2+p{margin-top:0}

.hero-fig>picture{display:block;width:100%}
.hero-fig>picture>.hero-poppetje{width:100%!important;height:auto}
@media(min-width:860px){.merkrooster{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* De vertrouwensblokken met drie items vielen op tablet als 2+1 uiteen, omdat
   auto-fit met minmax(250px) daar maar twee kolommen toestond. Op tabletbreedte
   dwingen we drie gelijke kolommen af. (9 aug) */
@media(min-width:640px) and (max-width:1023px){
  main ul[style*="minmax(250px"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
}


.merkrooster img{height:150px;object-fit:cover}

.shopkaart>span:nth-of-type(2){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:calc(3 * 1.5 * 15.5px)}

/* ---------- Accessoirerooster ---------- */
.acc-rooster{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.acc-rooster[data-kolommen="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.acc-rooster[data-kolommen="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:880px){.acc-rooster,.acc-rooster[data-kolommen="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.acc-rooster,.acc-rooster[data-kolommen="2"]{grid-template-columns:minmax(0,1fr)}}
.acc-rooster>li{display:flex}
.acc-rooster .kaart-blok{display:grid;gap:10px;width:100%;padding:14px;background:#ffffff;border:1px solid #e3e8f0;border-radius:16px;align-content:start;grid-template-rows:auto auto 1fr auto;transition:border-color .15s ease,box-shadow .15s ease}
.acc-rooster .kaart-blok:hover{border-color:#b9cfe6;box-shadow:0 10px 24px -18px rgba(9,28,53,.55)}
.acc-rooster .kaart-blok>a{grid-row:1 / span 3;display:grid;grid-template-rows:subgrid;gap:10px;text-decoration:none;align-content:start}

.acc-rooster .acc-beeld{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:11px;background:#f7f8fa}
.acc-rooster .acc-beeld img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.03);display:block}
.acc-rooster .acc-beeld-zoom img{transform:scale(1.16);object-position:center 82%}
.acc-rooster .acc-beeld-boven img{object-position:center 8%}
.acc-rooster .acc-beeld-vol img{object-fit:contain;transform:none;padding:6px}
.acc-rooster .acc-beeld-lager img{object-position:center 78%}
.acc-rooster .titel{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16.5px;color:#16181d}
.acc-rooster .sub{font-size:14.5px;line-height:1.45;color:#5b6069}
.acc-rooster .kaart-cta{grid-row:4;display:grid;gap:8px}
.acc-rooster .kaart-cta .cta-deal{width:100%;justify-content:center;text-align:center;font-size:14.5px;padding:11px 14px}

.spec-scroll thead th{background:#f5f7f9;color:#16181d;font-family:'Space Grotesk',sans-serif;font-weight:700;border-bottom:2px solid #d7e0ec;white-space:nowrap}
/* Tabel met kolomkoppen: alleen de bovenbalk dikgedrukt, de eerste kolom leest als gewone tekst */
.spec-scroll table:has(thead) tbody th{font-weight:400;color:#16181d}
.spec-scroll table:has(thead){min-width:680px}
.spec-scroll table:has(thead) th{width:auto}
.table-scroll thead th{background:#f5f7f9;color:#16181d;font-family:'Space Grotesk',sans-serif;font-weight:700;border-bottom:2px solid #d7e0ec;text-align:left}
.table-scroll table:has(thead) tbody th{font-weight:400}

.acc-split{display:grid;gap:26px;align-items:start;margin-top:26px}
@media(min-width:880px){.acc-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}}

/* datumregel in hero (reviews) */
.hero-datum{margin:14px 0 0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.01em;color:rgba(255,255,255,.72)}

/* terug naar boven */
.terug-boven{position:fixed;right:18px;bottom:18px;z-index:60;width:46px;height:46px;border-radius:50%;border:1px solid rgba(34,211,238,.55);background:#0d2447;color:#22d3ee;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px rgba(8,20,39,.45);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.terug-boven.is-zichtbaar{opacity:1;visibility:visible;transform:none}
.terug-boven:hover{background:#164b85}
.terug-boven:focus-visible{outline:3px solid #22d3ee;outline-offset:2px}
@media (prefers-reduced-motion: reduce){.terug-boven{transition:none}}
@media print{.terug-boven{display:none}}

/* archieflabel nieuwsoverzicht */
.archief-chip{display:inline-flex;align-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#4a5054;background:#eef1f6;border:1px solid #dbe2ec;border-radius:999px;padding:4px 10px}

/* kaartbeelden: nooit croppen - beelden zijn 16:9 met wit fond (6 aug) */
.kaart-rail>li>a>img,.kaart-rail .kaart-blok>a>img{object-fit:contain;background:#ffffff}

/* kaart-subtekst reserveert twee regels zodat links en knoppen uitlijnen (6 aug) */
.kaart-rail .sub{min-height:2.9em}

main .intro-alinea{font-size:16.5px;line-height:1.7;color:#33383b;margin:0;text-wrap:pretty}

/* ---------- Eén verticaal ritme op mobiel (8 aug) ---------- */
.affiliate-melding{font-size:10.5px!important;line-height:1.4!important;color:#5f6b7a!important;margin:6px 2px 0!important}
@media(max-width:759px){
  /* sectie → sectie */
  main>section,main>div>section,main>article,section.blok,main>section:first-of-type{padding:40px 0 0!important}

  /* koppen */
  .blok h2,.rail-kop h2,main section>h2,main section>div>h2{margin:0 0 12px!important}

  /* tekststromen: geen grid-gap, alles via marges zodat elke overgang gelijk is */
  .stroom,.blok .stroom,.luik,.tekstkaart{gap:0!important}
  .stroom.tweeluik,.stroom.drieluik,.tekstkaarten{column-gap:0!important;row-gap:24px!important}
  .acc-rooster{grid-template-columns:minmax(0,1fr)!important;column-gap:0!important;row-gap:16px!important;max-width:320px;margin-left:auto!important;margin-right:auto!important}
  .terug-boven{display:none!important}
  .stroom>*+*{margin-top:16px!important}
  .stroom>h2+*{margin-top:12px!important}
  .stroom>h3,.luik>h3,.tekstkaart>h3{margin:24px 0 8px!important}
  .stroom>h3:first-child,.luik>h3:first-child,.tekstkaart>h3:first-child{margin-top:0!important}
  .stroom>h3+*,.luik>h3+*,.tekstkaart>h3+*{margin-top:0!important}
  .luik>*+*,.tekstkaart>*+*{margin-top:8px!important}

  /* alles wat direct onder elkaar staat binnen een sectie: 24px, kop → tekst 12px */
  .smal>*+*,.blok>*+*,main section>*+*,main article>*+*,main section>div>*+*{margin-top:24px!important}
  .table-scroll,.spec-blok,.deal-blok,.tekstkaarten,.stroom.tweeluik,.stroom.drieluik,.acc-rooster,.galerij,.kerncijfers,.conclusie-kaart,.rail-wrap{margin-top:24px!important;margin-bottom:0!important}

  /* conclusiekaart: minder lucht boven de subscores */
  .conclusie-kaart{gap:20px!important}
  .conclusie-kaart>*+*{margin-top:0!important}
  .subscores{padding-top:12px!important}

  /* auteurkaart: foto rechtsboven, naam en rol ernaast, tekst eronder */
  .auteur-kaart{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"naam foto" "rol foto" "tekst tekst"!important;column-gap:14px!important;row-gap:0!important;align-items:start!important}
  .auteur-kaart>div:not(.auteur-foto){display:contents!important}
  .auteur-foto{grid-area:foto!important;align-self:start!important;margin:0!important;width:72px!important;height:72px!important}
  .auteur-foto img{width:72px!important;height:72px!important}
  .auteur-kaart .naam{grid-area:naam!important;margin:0!important}
  .auteur-kaart .auteur-linkedin{width:16px!important;height:16px!important;margin-left:3px!important;vertical-align:-2px!important}
  .auteur-kaart .auteur-linkedin img{width:16px!important;height:16px!important}
  .auteur-kaart .rol{grid-area:rol!important;margin:4px 0 0!important}
  .auteur-kaart .rol~p{grid-area:tekst!important;margin:16px 0 0!important}

  /* beeld in een duo pas na de kop en de intro-alinea */
  .duo .stroom:not(.tweeluik):not(.drieluik){display:flex!important;flex-direction:column!important;gap:0!important}
  .duo .stroom:not(.tweeluik):not(.drieluik)>*{order:4;margin-bottom:0!important}
  .duo .stroom:not(.tweeluik):not(.drieluik)>p:first-of-type{order:2}
  .duo .stroom:not(.tweeluik):not(.drieluik)>figure{order:3;margin-top:24px!important}
  .duo .stroom:not(.tweeluik):not(.drieluik)>div{order:1;margin-top:0!important}
  .duo .stroom>p:first-of-type{order:2;margin-top:12px!important}
  .duo .stroom>figure{order:3;margin:24px 0 0!important}
  .duo .stroom>h3{margin-top:24px!important;margin-bottom:8px!important}
  .duo .stroom>h3+p{margin-top:0!important}
  .duo .stroom>p+p,.duo .stroom>p+ul,.duo .stroom>ul+p{margin-top:24px!important}
  .duo .stroom>p.citaat{margin-top:24px!important}

  /* beeld en quote */
  .stroom figure,.duo figure,.blok figure{margin:0 0 24px!important}
  .duo .stroom>figure,.duo.wikkel .stroom>figure{margin-top:0!important}
  /* kop in een eigen wikkel: het blok erna houdt dezelfde 12px */
  main section>div:has(>h2)+*,main section>div>div:has(>h2)+*,.duo>div:has(>h2)+*,.smal>div:has(>h2)+*{margin-top:12px!important}
  /* productfoto's niet croppen op mobiel */
  .stroom figure>img,.duo img,.blok figure>img,.reviewkop figure>img,.galerij-rail img,main figure div>img{object-fit:contain!important;background:#ffffff!important}
  .reviewkop{row-gap:0!important}
  .reviewkop>figure{margin-top:24px!important}
  figure+*{margin-top:0!important}
  .citaat,.stroom .citaat{margin:24px 0 0!important}

  /* kaartrail: volgende kaart komt in beeld */
  .kaart-rail{margin-left:0!important;padding-left:2px!important}
  .kaart-rail>li{flex:0 0 min(72vw,250px)!important}
  .kaart-rail .kaart-blok{min-height:0!important}

  /* hero: score-pil en auteurregel naast elkaar */
  .page-hero.hero-grid{row-gap:0!important}
  .hero-band div[style*="gap:14px 20px"]{flex-wrap:nowrap!important;gap:12px!important;align-items:center!important;margin:16px 0 0!important}
  .page-hero div[style*="gap:14px 20px"]+div,.page-hero div[style*="gap:14px"]+div{margin-top:20px!important}
  .page-hero div[style*="gap:14px"]{margin-bottom:0!important}
  .hero-band div[style*="gap:14px 20px"]>span[style*="border-radius:999px"]{flex:0 0 auto;padding:7px 13px!important;font-size:13px!important}
  .hero-band div[style*="gap:14px 20px"]>span[style*="border-radius:999px"]>span{font-size:16px!important}
  .hero-band div[style*="gap:14px 20px"]>span[style*="display:grid"]>span:first-child{font-size:13px!important}
  .hero-band div[style*="gap:14px 20px"]>span[style*="display:grid"]>span+span{font-size:12px!important}

  /* hero-knoppen: één knop, tweede optie als tekstlink ernaast */
  .hero-band div[style*="gap:12px 14px"]{flex-wrap:nowrap!important;gap:16px!important;align-items:center!important}
  .hero-band a[style*="rgba(255,255,255,.34)"]{border:0!important;background:none!important;padding:0!important;min-height:0!important;color:#67d6f8!important;text-decoration:underline!important;font-size:16px!important;white-space:nowrap}

  /* geen ondermarges op blokniveau: elke afstand komt van één regel */
  main section>*:not(h2):not(h3),main article>*:not(h2):not(h3),.smal>*:not(h2):not(h3),.blok>*:not(h2):not(h3),main section>div>*:not(h2):not(h3){margin-bottom:0!important}
  /* onderaan: geen losse ondermarges, zodat elke afstand van één regel komt */
  .stroom>*,.luik,.tekstkaart,.stroom.tweeluik>*,.stroom.drieluik>*{margin-bottom:0!important}
  .luik>*:last-child,.tekstkaart>*:last-child,.stroom>*:last-child{margin-bottom:0!important}
  /* kop → wat er ook volgt: altijd 12px */
  main section h2+*,main section h2+[class],main section div h2+[class],main article h2+*,main article h2+[class],.smal>h2+[class],.blok>h2+[class],.stroom>h2+[class]{margin-top:0!important}
  main h3+*,main h3+[class]{margin-top:0!important}
  /* kopwrapper in een duo-wikkel telt als kop: 12px naar de lead */
  main .stroom>div+p.lead,main .stroom>div+p{margin-top:12px!important}
  /* boven een subkop altijd 24px, ook direct onder een h2 */
  main h3,main section h2+h3,main section div h2+h3{margin-top:24px!important;margin-bottom:8px!important}
  main section h2+h3:first-child{margin-top:24px!important}
  /* kop → volgende: één waarde, ook buiten section (nieuws, 404, contact) */
  main h2{margin-bottom:12px!important}
  main h2+*{margin-top:0!important}
  main h2+*>*:first-child{margin-top:0!important}
  main h3{margin-bottom:8px!important}
  /* kaart- en lijstcontainers: één afstandsmechanisme */
  main .top3-info{gap:8px!important}
  main ol>li{gap:8px!important}
  main .merkrooster{gap:14px!important}
  main .contact-kolom{row-gap:24px!important}
  main .stroom>figure+h2,main .stroom>figure+h3,main .stroom>figure+p{margin-top:24px!important}
  /* wikkels rond koppen: afstand uit marges, niet uit gap */
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3){row-gap:0!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>*+*{margin-top:12px!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>h2+*,main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>h3+*{margin-top:0!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>*+h3{margin-top:24px!important}
  /* een kop die als eerste in een blok staat krijgt nooit bovenmarge */
  /* ---- één ritme voor koppen ---- */
  main h2{margin-bottom:12px!important}
  main h3,main h4{margin-bottom:8px!important}
  main h2+*,main h3+*,main h4+*{margin-top:0!important}
  main section>div:has(>h2)+*,main section>div>div:has(>h2)+*,.duo>div:has(>h2)+*,.smal>div:has(>h2)+*{margin-top:12px!important}
  .duo .stroom:not(.tweeluik):not(.drieluik){row-gap:0!important}
  .duo .stroom:not(.tweeluik):not(.drieluik)>div:has(>h2){margin-bottom:12px!important}
  .duo .stroom:not(.tweeluik):not(.drieluik)>p:first-of-type{margin-top:0!important}
  .duo .stroom:not(.tweeluik):not(.drieluik)>figure{margin-top:24px!important;margin-bottom:24px!important}
  .conclusie-kaart{margin-top:12px!important}

  /* kop naar eerstvolgend blok: overal 12 */
  main h2:has(+.conclusie-kaart),main h2:has(+ul),main h2:has(+ol),main h2:has(+.deal-blok){margin-bottom:0!important}
  main h2+.conclusie-kaart,main h2+ul,main h2+ol,main h2+.deal-blok{margin-top:12px!important}
  .conclusie-kaart .conclusie-tekst>*:first-child{margin-top:0!important}

  main h2:first-child,main h3:first-child,main h4:first-child{margin-top:0!important}
  main .kaart-rail h2,main .kaart-rail h3{margin-bottom:8px!important}
  /* kaartenpaar (voor- en nadelen): één afstand, blokken horen bij elkaar */
  main section>div:has(>div>.pluslijst){row-gap:0!important}
  main section>div:has(>div>.pluslijst)>*+*{margin-top:16px!important}

  /* hero: één ritme — kruimels 14, kop 16, eerste blok 22, blok→blok 16 */
  .page-hero>div>nav+h1{margin-top:14px!important}
  .page-hero>div>h1+p,.page-hero>div>h1+div{margin-top:16px!important}
  .page-hero>div>p+div,.page-hero>div>p+ul,.page-hero>div>p+nav{margin-top:16px!important}
  .page-hero>div>p+h1{margin-top:14px!important}
  .page-hero>div>div+div,.page-hero>div+div,.page-hero>div>ul+div{margin-top:16px!important}
  .page-hero>div>*,.page-hero>div{margin-bottom:0!important}
  .reviewkop>figure{margin-top:24px!important;margin-bottom:0!important}
  /* grid- en flexblokken: afstand alleen uit gap, nooit uit marge */
  .stroom.tweeluik>*,.stroom.drieluik>*,.conclusie-kaart>*,.auteur-kaart>*,.galerij-onder>*,.reviewkop>*,.acc-rooster>*,.kerncijfers>*,.galerij>*,.spec-blok>*,.tekstkaarten>*,.merkrooster>*,.subscores>*,.duo>*{margin-top:0!important}
  /* kopwikkel telt één keer: 12 onder de kop, niets erbovenop */
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>div:has(>h2,>h3):not([class]){margin-bottom:0!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>div:has(>h2,>h3):not([class])+*{margin-top:12px!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>div:has(>h2,>h3):not([class])+*>*:first-child{margin-top:0!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>h2+*,main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>h3+*{margin-top:0!important}
  .duo>div:has(>h2,>h3):not([class]){margin-bottom:0!important}
  .duo>div:has(>h2,>h3):not([class])+.stroom>*:first-child{margin-top:0!important}
  .duo .stroom>p:first-of-type,.duo .stroom>h3:first-of-type{margin-top:0!important}
  /* stroom in een duo: één mechanisme — row-gap, alle marges nul */
  .duo .stroom:not(.tweeluik):not(.drieluik){display:flex!important;flex-direction:column!important;row-gap:12px!important}
  .duo .stroom:not(.tweeluik):not(.drieluik)>*{margin-top:0!important;margin-bottom:0!important}
  .duo .stroom:not(.tweeluik):not(.drieluik)>figure{margin:12px 0!important}
  .duo .stroom:not(.tweeluik):not(.drieluik)>h3{margin-top:12px!important}
  /* duo-wikkel: gap uit, kop levert de 12 */
  .duo.wikkel,.duo{row-gap:0!important}
  .duo>div:has(>h2)>h2,.duo>div:has(>h3)>h3{margin-bottom:0!important}
  .duo>div:has(>h2)+*,.duo>div:has(>h3)+*{margin-top:12px!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>p:first-of-type,main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>figure:first-of-type{margin-top:0!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>h3:first-of-type{margin-top:0!important}
  /* SLOT: binnen een blok met koppen is elke afstand 12, uit één bron */
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3){display:flex!important;flex-direction:column!important;row-gap:12px!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>*{margin-top:0!important;margin-bottom:0!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>figure{margin:12px 0!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>h3{margin-top:12px!important}
  main .duo.wikkel>div:has(>h2),main .duo.wikkel>div:has(>h3){margin-bottom:0!important}
  main div:has(>h2:only-child)>h2,main div:has(>h3:only-child)>h3{margin-bottom:0!important}
  main .duo>div>h2,main .duo>div>h3,main .wikkel>div>h2,main .wikkel>div>h3{margin-bottom:0!important}
  main .spec-balk,main .spec-blok{margin-top:12px!important}
  /* elke tekststroom: afstand uit row-gap, marges nul */
  main .stroom:not(.tweeluik):not(.drieluik){display:flex!important;flex-direction:column!important;row-gap:12px!important}
  main .stroom.tweeluik,main .stroom.drieluik,main .tekstkaarten,main .acc-rooster{row-gap:12px!important}
  main .stroom:not(.tweeluik):not(.drieluik)>*{margin-top:0!important;margin-bottom:0!important}
  main .stroom:not(.tweeluik):not(.drieluik)>figure{margin:12px 0!important}
  /* blok met kop (ook via wikkel): één afstand van 12, uit row-gap */
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):has(>h2,>h3,>div>h2,>div>h3){display:flex!important;flex-direction:column!important;row-gap:12px!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):has(>h2,>h3,>div>h2,>div>h3)>*{margin-top:0!important;margin-bottom:0!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):has(>h2,>h3,>div>h2,>div>h3)>figure{margin:0!important}
  /* SLOT2: blok met kop (ook via wikkel) — alles 12, uit row-gap */
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3,>div>h2,>div>h3){display:flex!important;flex-direction:column!important;row-gap:12px!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3,>div>h2,>div>h3)>*{margin-top:0!important;margin-bottom:0!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3,>div>h2,>div>h3)>figure{margin:0!important}
  /* SLOT3: tekststroom — elk kind zonder marge, afstand uit row-gap */
  main .stroom:not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.x){display:flex!important;flex-direction:column!important;row-gap:12px!important}
  main .stroom:not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.x)>*{margin-top:0!important;margin-bottom:0!important}
  main .stroom:not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.x)>figure{margin:0!important}
  main .stroom:not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.x)>.luik,main .stroom:not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.x)>div.luik{margin:0!important}
  main .luik:not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores){margin-top:0!important}
  .reviewkop>.stroom+figure{margin-top:24px!important}
}


/* ---------- Eén verticaal ritme op tablet en desktop (8 aug) ---------- */
@media(min-width:760px){
  /* sectie → sectie: 56 */
  main>section,main>div>section,main>article,section.blok,main>section:first-of-type{padding:56px 0 0!important}
  main section>*:not(h2):not(h3),main article>*:not(h2):not(h3),.smal>*:not(h2):not(h3),.blok>*:not(h2):not(h3),main section>div>*:not(h2):not(h3){margin-bottom:0!important}

  /* kop → wat er ook volgt: 16 */
  main h2,.blok h2,.rail-kop h2,main section>h2,main section>div>h2{margin-top:0!important;margin-bottom:16px!important}
  main h2+*,main h2+[class],main section h2+*,main article h2+*{margin-top:0!important}
  main h2+*>*:first-child{margin-top:0!important}

  /* kop in de tekst: 32 boven, 8 onder */
  main h3,main section h2+h3,main section div h2+h3,.stroom>h3,.luik>h3,.tekstkaart>h3{margin-top:32px!important;margin-bottom:8px!important}
  .stroom>h3:first-child,.luik>h3:first-child,.tekstkaart>h3:first-child,main section h2+h3:first-child{margin-top:0!important}
  main h3+*,main h3+[class]{margin-top:0!important}

  /* tekststroom: één mechanisme, afstand uit marges */
  .stroom,.blok .stroom,.luik,.tekstkaart{row-gap:0!important}
  .stroom.tweeluik,.stroom.drieluik,.tekstkaarten{column-gap:44px!important;row-gap:32px!important}
  .terug-boven{display:none!important}
  .stroom>*+*{margin-top:24px!important}
  .stroom>h2+*{margin-top:0!important}
  .luik>*+*,.tekstkaart>*+*{margin-top:8px!important}
  .stroom>*:not(h2):not(h3),.luik,.tekstkaart{margin-bottom:0!important}
  .stroom>h3+*,.luik>h3+*,.tekstkaart>h3+*,.stroom>h2+*{margin-top:0!important}
  main .stroom>figure{margin-bottom:0!important}
  main .stroom>figure+*{margin-top:32px!important}
  main .stroom>*+figure{margin-top:32px!important}
  .reviewkop{row-gap:0!important}
  .reviewkop>.stroom+figure{margin-top:32px!important}
  .reviewkop>figure{margin-top:32px!important;margin-bottom:0!important}
  main h2+.stroom.tweeluik,main h2+.stroom.drieluik,main h2+.tekstkaarten,main h2+.acc-rooster,main h2+.table-scroll,main h2+.spec-blok,main h2+.deal-blok,main h2+.galerij,main h2+.kerncijfers,main h2+.conclusie-kaart,main h2+.rail-wrap{margin-top:0!important}
  .smal>h2+*,.blok>h2+*,main section>h2+*,main section>div>h2+*,main article>h2+*{margin-top:0!important}
  .smal>h3+*,.blok>h3+*,main section>h3+*,main section>div>h3+*{margin-top:0!important}

  /* blok → blok binnen een sectie: 32 */
  .smal>*+*,.blok>*+*,main section>*+*,main article>*+*,main section>div>*+*{margin-top:32px!important}
  /* Zelfde regel als op mobiel: gestapelde kaarten krijgen hun ruimte van de
     grid-gap, niet van een geerfde margin. (9 aug) */
  .top3>*+*,.top3-duo>*+*{margin-top:0!important}
  .table-scroll,.spec-blok,.deal-blok,.tekstkaarten,.stroom.tweeluik,.stroom.drieluik,.acc-rooster,.galerij,.kerncijfers,.conclusie-kaart,.rail-wrap{margin-top:32px!important;margin-bottom:0!important}

  /* beeld en quote: 32 */
  .stroom figure,.duo figure,.blok figure{margin:0 0 32px!important}
  main .stroom>figure+h2,main .stroom>figure+h3,main .stroom>figure+p{margin-top:32px!important}
  figure+*{margin-top:0!important}
  .citaat,.stroom .citaat{margin:32px 0 0!important}

  /* wikkels rond koppen: afstand uit marges, niet uit row-gap */
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3){row-gap:0!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>*+*{margin-top:16px!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>h2+*,main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>h3+*{margin-top:0!important}
  main :is(section,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):has(>h2,>h3)>*+h3{margin-top:32px!important}

  main h2:first-child,main h3:first-child,main h4:first-child{margin-top:0!important}
  /* lijst- en kaartcontainers: één afstand */
  main .top3-info{row-gap:0!important}
  main .top3-info>*+*{margin-top:8px!important}
  main .top3-info>h3+*{margin-top:0!important}
  main .contact-kolom{row-gap:32px!important}
  /* hero: kruimels 14, kop 16, blok→blok 24 */
  .page-hero>div>nav+h1,.page-hero>div>p+h1{margin-top:14px!important}
  .page-hero>div>h1+p,.page-hero>div>h1+div{margin-top:16px!important}
  .page-hero>div>p+div,.page-hero>div>p+ul,.page-hero>div>p+nav{margin-top:24px!important}
  .page-hero>div>div+div,.page-hero>div+div,.page-hero>div>ul+div{margin-top:24px!important}
  .page-hero>div>*,.page-hero>div{margin-bottom:0!important}
  .reviewkop>figure{margin-top:32px!important;margin-bottom:0!important}
  /* grid- en flexblokken: afstand alleen uit gap, nooit uit marge */
  .stroom.tweeluik>*,.stroom.drieluik>*,.conclusie-kaart>*,.auteur-kaart>*,.galerij-onder>*,.reviewkop>*,.acc-rooster>*,.kerncijfers>*,.galerij>*,.spec-blok>*,.tekstkaarten>*,.merkrooster>*,.subscores>*,.duo>*{margin-top:0!important}
  .reviewkop>.stroom+figure{margin-top:32px!important}
}
@media(min-width:860px){
  .reviewkop>.stroom+figure{margin-top:0!important}
}
@media(min-width:760px){
  .page-hero div[style*="gap:14px 20px"]+div,.page-hero div[style*="gap:14px"]+div{margin-top:22px!important}
  .page-hero div[style*="gap:14px"]{margin-bottom:0!important}
}

/* Ingeklapte kaartlijsten: alleen op mobiel */
.meer-knop{display:none}
@media(max-width:759px){
  .inklap.dicht>.inklap-extra{display:none!important}
  .meer-knop{display:block;width:100%;margin-top:16px;min-height:48px;padding:0 18px;border:1px solid #c3d5e8;border-radius:12px;background:#ffffff;color:#0e5aa7;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;cursor:pointer}
  .meer-knop:hover{background:#eef3fa}
}

/* Kaarten op mobiel: strak ritme, geen gereserveerde lege regels (8 aug) */
@media(max-width:759px){
  .rev-sub,.kaart-rail .sub,.acc-rooster .sub{min-height:0!important}
  .rev-kaart,.kaart-blok,.kaart-rail .kaart-blok,.acc-rooster .kaart-blok{gap:8px!important}
  .rev-knoppen{gap:10px!important;padding-top:0!important;margin-top:0!important}
  main li[style*="display:flex"][style*="gap:10px"],.top3-kaart,.shopkaart{gap:8px!important}
  .shopkaart>.shop-knop{margin-top:0!important}
  .kaart-cta{gap:8px!important;margin-top:0!important}
  /* koppen binnen een kaart volgen de kaartafstand, niet het paginaritme */
  .rev-kaart h3,.top3-kaart h3,.kaart-blok h3,main li[style*="flex-direction:column"] h3,main li[style*="display:flex"] h3{margin:0!important}
}

/* Beeld en CTA op mobiel (8 aug, opnieuw vastgelegd) */
@media(max-width:759px){
  .rev-kaart img,.rev-beeld img,.top3-kaart img,.merkrooster img,
  .kaart-rail>li>a>img,.kaart-rail .kaart-blok>a>img,.kaart-blok>a>img,
  .acc-rooster .acc-beeld img{object-fit:contain!important;background:#ffffff!important;transform:none!important}
  .acc-rooster .acc-beeld img{padding:6px!important}
  main section>div[style*="vr-gradient"]{gap:14px!important;padding-top:24px!important;padding-bottom:24px!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;min-height:0!important;height:auto!important}
  main section>div[style*="vr-gradient"]>*{margin-top:0!important;margin-bottom:0!important;flex:0 0 auto!important;width:100%}
  main section>div[style*="vr-gradient"] h2{margin-top:0!important;margin-bottom:12px!important}
  main section>div[style*="vr-gradient"] p{margin:0!important}
  main section>div[style*="vr-gradient"]>a{width:auto!important}
}




/* ---------- Kaarten en hero-knop op mobiel gelijk (8 aug) ---------- */
@media(max-width:759px){
  .conclusie-kaart,.tekstkaart,.rev-kaart,.auteur-kaart,.top3-kaart{padding:18px!important;border-radius:16px!important}
  /* De rangbalk hoort van rand tot rand te lopen. De padding hierboven duwde hem
     naar binnen, waardoor de overflow:hidden van de kaart zijn hoeken niet meer
     afrondde en er witte hoekjes ontstonden. (9 aug) */
  .top3-kaart>.top3-balk{margin:-18px -18px 12px!important}
  /* Zodra de kaarten in twee kolommen staan, wordt elke shopknop zo'n 116px breed
     en liep de merknaam eruit. Iets minder padding en een fractie kleiner lettertype
     houdt de volledige naam leesbaar. (9 aug) */
  .top3-shops .shop-knop{padding:0 8px!important;font-size:13.5px!important}
  /* Gestapelde kaarten houden overal dezelfde tussenruimte: de grid-gap bepaalt
     die, niet een geërfde margin. Zonder dit kregen sommige kaarten er 24px
     bovenop en wisselde de afstand tussen 12 en 38 pixels. (9 aug) */
  .top3>*+*,.top3-duo>*+*{margin-top:0!important}
  /* De vijf kaarten staan verdeeld over een .top3 en twee .top3-duo's. De ruimte
     binnen een duo was 14px en die tussen de containers 12px, waardoor de stapel
     ongelijk oogde. Beide op 12px, gelijk aan het ritme binnen een blok. (9 aug) */
  .top3,.top3-duo{gap:12px!important}
  .conclusie-kaart>*{margin:0!important}
  main figure{margin:0!important}
  main aside{margin:0!important}
  main .affiliate-melding{margin:12px 0 0!important}
  .reviewkop>figure,.reviewkop>.stroom+figure{margin-top:12px!important;margin-bottom:0!important}
  .page-hero>div>div[style*="gap:12px 14px"]{margin-top:26px!important}
}

/* ---- Kop krijgt lucht boven zich in doorlopende tekst (juridische pagina's, nieuwsartikelen) ----
   Een h2 die direct op een alinea volgt krijgt het sectieritme: meer ruimte erboven
   dan eronder, zodat de kop visueel bij zijn eigen tekst hoort.
   Mobiel staat de marge op 28px omdat de container daar 12px row-gap heeft: samen 40px. */
@media(max-width:759px){
  main :is(section,article,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):not(.geen-kopruimte):not(.deals):not(.shop-rail):has(>h2)>p+h2{margin-top:28px!important}
  main .stroom:not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.x)>p+h2{margin-top:28px!important}
}
@media(min-width:760px){
  main :is(section,article,div,li):not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):not(.geen-kopruimte):not(.deals):not(.shop-rail):has(>h2)>p+h2{margin-top:56px!important}
  main .stroom:not(.tweeluik):not(.drieluik):not(.conclusie-kaart):not(.auteur-kaart):not(.galerij-onder):not(.reviewkop):not(.acc-rooster):not(.kerncijfers):not(.galerij):not(.spec-blok):not(.tekstkaarten):not(.merkrooster):not(.subscores):not(.duo):not(.geen-kopruimte):not(.deals):not(.shop-rail):has(>h2)>p+h2{margin-top:56px!important}
}

/* ---------- Auteurskaart: groepering van naam en functietitel (9 aug) ---------- */
/* Naam en functie horen als een blokje te lezen; de sprong naar de alinea eronder
   is bewust groter. Stond eerder hoger in dit bestand, maar werd daar door de
   mobiele mediaquery overschreven. Daarom nu als laatste regel. */
.auteur-kaart .naam{margin-bottom:2px!important}
.auteur-kaart .rol{margin-top:0!important;margin-bottom:18px!important}
.auteur-kaart .rol+p,.auteur-kaart .rol+*{margin-top:0!important}

/* ---------- Shopknoppen in de webshoplijst: volle blauwe vulling (9 aug) ---------- */
/* Stonden op een bijna-witte achtergrond met blauwe tekst en vielen daardoor
   nauwelijks op tussen de kaarten. Nu een volle vulling in het blauw van de site.
   Wit op #0e5aa7 geeft een contrastverhouding van 6,9:1, ruim boven de AA-norm.
   Staat achteraan het bestand zodat latere mediaqueries er niet overheen gaan. */
.deals .knop{
  background:#0e5aa7!important;
  border-color:#0e5aa7!important;
  color:#ffffff!important;
  font-weight:700!important;
  box-shadow:0 2px 10px rgba(14,90,167,.26)!important;
}
.deals .knop:hover,.deals .knop:focus-visible{
  background:#0a4581!important;
  border-color:#0a4581!important;
  color:#ffffff!important;
  box-shadow:0 4px 14px rgba(14,90,167,.34)!important;
}

/* ---------- Leesvoortgang verbergen bij geopend mobiel menu (9 aug) ---------- */
/* Het brilletje van de leesvoortgang bleef over het opengeklapte paneel heen
   zweven. site.js zet .menu-open op <html> zolang het paneel open staat. */
.menu-open .cwc-lees{visibility:hidden}
.menu-open #leesMarker{display:none!important}

/* ---------- Kopbalken sluiten altijd aan op de kaartrand (9 aug) ---------- */
/* Een generieke mobiele regel zette margin-top op .spec-balk zelf, waardoor de
   balk losraakte van de bovenrand: er bleef een witte strook over en de
   overflow:hidden van het blok rondde zijn hoeken niet meer af. Balken die het
   eerste kind van hun blok zijn, hebben nooit een eigen marge nodig. */
.spec-blok>.spec-balk,
.deal-blok>.deal-balk,
.spec-blok>.spec-balk:first-child,
.deal-blok>.deal-balk:first-child{margin:0!important}


/* ---------- Merkrooster: tegels vullen hun vak (9 aug) ---------- */
/* De merklogo's zijn kleurvlakken van 480x300. Een eerdere generieke regel zette
   ze op object-fit:contain, waardoor het gekleurde vlak als scherpe rechthoek
   midden in de kaart zweefde. Voor deze tegels is cover juist goed: het vlak
   vult zijn vak en de border-radius rondt de hoeken mee af, zoals bij elke
   andere kaart op de site. Alleen dit rooster; productfoto's blijven contain. */
.merkrooster img{object-fit:cover!important;background:#f4f7fb!important;border-radius:11px}

/* ---------- Toplijstbeelden: wit rondom, product iets kleiner (9 aug) ---------- */
/* De beelden stonden in een vakje met een grijze rand en 8px lucht, waardoor er
   een grijze kader om de bril leek te staan. Rondom nu volledig wit en meer
   binnenruimte, zodat het product wat kleiner en rustiger in het vak staat. */
.top3-body img{background:#ffffff!important;border:0!important;padding:18px!important}

/* ---------- Beeldvakken volgen de beeldverhouding (9 aug, avond) ---------- */
/* De kaart- en galerijbeelden droegen een height-attribuut uit de HTML. Zodra
   dat geldt, negeert de browser de aspect-ratio en wordt het vak op elke
   kolombreedte even hoog: te smalle vakken op mobiel, te platte op desktop,
   met wegvallende of afgesneden producten als gevolg. height:auto geeft de
   verhouding weer de regie, zodat het vak meeschaalt met de kolom. */
.rev-beeld img,.kaart-rail img,.kaart-rail>li>a>img,.galerij-rail img{height:auto!important}
/* Productfoto's horen nooit afgesneden: galerijen en duo-figuren tonen het
   volledige beeld in hun 16:9-vak; de witte achtergrond maakt de eventuele
   marges onzichtbaar. Echte sfeerfoto's met een bewuste uitsnede (contactfoto,
   merkrooster-kleurvlakken) behouden hun cover. */
.galerij-rail img,.duo img{object-fit:contain!important}