/*
Theme Name: KookProducten
Theme URI: https://kookproducten.nl
Author: Content Ventures
Description: Magazinevorm voor keuken en kookgerei. Merkkleur als vlak, alle categorieen in een accentbalk, artikelstroom met beeld en een zijkolom op overzichten. Tokens komen uit tokens.css, een bron met de merkkit in Drive.
Version: 3.10.0
Requires at least: 6.4
Requires PHP: 8.0
License: proprietary
Text Domain: kookproducten
*/

*,*::before,*::after{box-sizing:border-box}
:root{color-scheme:light}
html{-webkit-tap-highlight-color:rgba(30,61,47,.14)}
:target,h1,h2,h3,h4{scroll-margin-top:96px}
body,h1,h2,h3,h4,p,ul,ol,dl,dd,dt,figure,table,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--b);font-size:16px;line-height:1.6;color:var(--ink);background:var(--paper);
     -webkit-font-smoothing:antialiased;touch-action:manipulation}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
table{border-collapse:collapse;width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;
      padding-left:max(40px,env(safe-area-inset-left));
      padding-right:max(40px,env(safe-area-inset-right))}
.skip{position:absolute;left:-9999px;top:0;z-index:20}
.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:11px 16px;
            border-radius:3px;font-weight:500}
.idx .t,.cats .cn,.subs a,.top3 .nm,.short .v{overflow-wrap:anywhere}
.brand,.cats a>*,.feat .meta span{min-width:0}
h1,h2,h3,h4{font-family:var(--h);font-weight:var(--kop-gewicht,700);letter-spacing:-.024em;
            line-height:1.06;text-wrap:balance}
.num{font-family:var(--m);font-variant-numeric:tabular-nums}

/* de conditionele breedte-as van Bricolage: smalle kapitalen voor labels en tabelkoppen.
   Dit is fontspecifiek en daarom niet te verwarren met een generieke letterspacing-truc. */
.lbl{font-family:var(--hn);font-weight:600;font-size:12.5px;letter-spacing:.055em;
     text-transform:uppercase;color:var(--teal);display:block}
.lbl-q{color:var(--ink-45)}

/* ── masthead ── */
.mast{background:var(--paper)}
.mast>.wrap{display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .wm{font-family:var(--h);font-weight:var(--wm-gewicht,700);font-size:26px;letter-spacing:-.026em}
/* Het middenstuk van het woordmerk: kleuraccent of cursief, per merk. Zie
   --wm-stijl in tokens.css; de stamper zet die uit de site-JSON. */
.brand .wm i{font-style:var(--wm-stijl,normal);color:var(--wm-mid,var(--teal))}
.burger{display:none;width:44px;height:44px;border:1px solid var(--hair);background:transparent;
        margin-left:auto;cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:16px;height:2px;background:var(--ink);
             box-shadow:0 5px 0 var(--ink),0 -5px 0 var(--ink)}
.mmenu,.mmenu[hidden]{display:none}

/* ── lead ── */
.lead{border-bottom:1px solid var(--hair)}
.lead .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0;
            align-items:stretch}
.lead-l{padding:56px 56px 56px 0}
.lead h1{font-size:58px;letter-spacing:-.034em}
.lead h1 em{font-style:normal;color:var(--teal)}
.lead-l>p{font-size:19px;color:var(--ink-70);margin-top:20px}
.lead-cta{display:inline-flex;align-items:center;gap:10px;margin-top:28px;background:var(--cta);
          color:var(--op-cta);font-weight:500;padding:16px 26px;border-radius:3px;font-size:15.5px}
.lead-cta:hover{background:var(--cta-d)}
.lead-cta span[aria-hidden]{font-family:var(--m)}
.lead-r{border-left:1px solid var(--hair);padding:56px 0 56px 40px}
.lead-r caption{text-align:left;padding-bottom:6px}
.lead-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);font-size:13.5px;
           color:var(--ink-45);max-width:34em}
.lead-note a{color:var(--teal);border-bottom:1px solid var(--bright);font-weight:500}
.lead-r .cap-sub{font-family:var(--m);font-size:11.5px;color:var(--ink-45);display:block;
                 margin-top:5px;letter-spacing:.02em}
.top3 th,.top3 td{text-align:left;padding:13px 0;border-top:1px solid var(--hair);vertical-align:top}
.top3 tbody tr:first-child th,.top3 tbody tr:first-child td{border-top:2px solid var(--rule)}
.top3 .r{font-family:var(--hn);font-weight:700;
         font-size:21px;width:34px;color:var(--ink-45);padding-right:10px}
.top3 tr:first-child .r{color:var(--accent)}
.top3 .nm{font-weight:500;font-size:15.5px;line-height:1.3}
.top3 .nm small{display:block;font-weight:400;color:var(--ink-45);font-size:12.5px;margin-top:3px}
.top3 .p{text-align:right;white-space:nowrap;font-family:var(--m);font-size:15.5px;
         font-variant-numeric:tabular-nums}
.top3 .p small{display:block;font-size:11px;color:var(--ink-45);margin-top:3px}

/* ── claimband ── */
.claims{background:var(--teal);color:#D6E0D8}
.claims .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.claims .wrap>div{padding:28px 32px;border-left:1px solid rgba(255,255,255,.16);font-size:13.5px;
            line-height:1.5}
.claims .wrap>div:first-child{border-left:0;padding-left:0}
.claims .lbl{color:#fff;margin-bottom:5px}
.claims a{color:#fff;border-bottom:1px solid var(--bright)}

/* ── secties ── */
.sec{padding:76px 0}
.sec+.sec{padding-top:0}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
    border-bottom:2px solid var(--rule);padding-bottom:17px;margin-bottom:0}
.sh h2{font-size:30px}
.sh a{font-weight:500;color:var(--teal);font-size:15px;white-space:nowrap}
.sh a:hover{text-decoration:underline;text-underline-offset:3px}

/* uitgelicht: asymmetrisch, geen kaart */
.feat{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:38px;padding:30px 0;
      border-bottom:1px solid var(--hair);align-items:start}
.feat h3{font-size:34px;letter-spacing:-.03em}
.feat p{color:var(--ink-70);margin-top:14px;font-size:17px}
.feat .meta{margin-top:18px;display:flex;gap:0;flex-wrap:wrap}
.feat .meta span{font-family:var(--m);font-size:12px;color:var(--ink-45);padding:0 14px;
                 border-left:1px solid var(--hair)}
.feat .meta span:first-child{padding-left:0;border-left:0}
.shot{background:var(--sec);aspect-ratio:3/2;position:relative}
.shot::after{content:attr(data-cap);position:absolute;left:0;bottom:-24px;font-family:var(--m);
             font-size:11px;color:var(--ink-45)}

/* dichte lijst */
.idx{width:100%}
.idx th{padding:0}
.idx td{padding:15px 0;border-bottom:1px solid var(--hair);vertical-align:baseline}
.idx tr:hover td{background:rgba(30,61,47,.035)}
.idx .t{font-family:var(--h);font-weight:700;font-size:19px;letter-spacing:-.02em}
.idx .c{width:180px;color:var(--ink-45);font-size:14px}
.idx .n,.idx .d{width:120px;text-align:right;font-family:var(--m);font-size:13px;
                color:var(--ink-45);font-variant-numeric:tabular-nums}

/* categorie-index als inhoudsopgave */
.cats{columns:2;column-gap:56px;margin-top:6px}
.cats a{display:flex;align-items:baseline;gap:12px;padding:14px 0;
        border-bottom:1px solid var(--hair);break-inside:avoid}
.cats a:hover .cn{color:var(--teal)}
.cats .cn{font-family:var(--h);font-weight:700;font-size:19px;letter-spacing:-.02em}
.cats .dots{flex:1;border-bottom:1px dotted var(--hair);transform:translateY(-4px)}
.cats .cc{font-family:var(--m);font-size:13px;color:var(--ink-45);font-variant-numeric:tabular-nums}

/* werkwijze: een echte reeks, geen drie gelijke kolommen.
   De cijfers mogen hier omdat dit een sequentie is: eerst het gebruik, dan de
   specs, dan de prijs. */
.work{list-style:none;padding-top:8px}
.work li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;padding:22px 0;
         border-top:1px solid var(--hair);align-items:start}
.work li:first-child{border-top:0}
.work .stap{font-family:var(--hn);font-weight:700;font-size:30px;line-height:.9;color:var(--accent);
            font-variant-numeric:tabular-nums}
.work li:not(:first-child) .stap{color:var(--ink-45)}
.work .wk{color:var(--ink-70);font-size:16px}
.work b{color:var(--ink);font-family:var(--h);font-weight:700;font-size:18px;display:block;
        margin-bottom:6px;letter-spacing:-.018em}
.feat-lees{margin-top:14px}
.feat-lees a{font-weight:500;color:var(--teal);border-bottom:1.5px solid var(--bright);
             padding-bottom:2px}

/* ── artikelkop ── */
.crumb{font-family:var(--m);font-size:13px;color:var(--ink-45);padding:18px 0;letter-spacing:.01em}
.crumb a{color:var(--teal)}
.crumb a:hover{text-decoration:underline}
.crumb i{font-style:normal;padding:0 7px;color:var(--hair)}
.ah{padding-bottom:34px;border-bottom:2px solid var(--rule)}
.ah h1{font-size:52px;letter-spacing:-.034em;margin:10px 0 0;max-width:24em}
.ah .stand{font-size:19px;color:var(--ink-70);margin-top:18px}
.by{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:30px}
.by>*{font-family:var(--m);font-size:13px;letter-spacing:.01em;color:var(--ink-45);padding:0 14px;
      border-left:1px solid var(--hair)}
.by>*:first-child{padding-left:0;border-left:0}
.by b{font-family:var(--b);font-weight:500;color:var(--ink);font-size:13.5px}

.hero{margin:30px 0 8px;background:var(--sec);aspect-ratio:21/9}
.hero-cap{font-family:var(--m);font-size:11.5px;color:var(--ink-45);padding-bottom:34px}

/* korte versie: kale tabel */
.short{margin:0 0 46px}
.short caption{text-align:left;padding:0 0 12px}
.short th,.short td{text-align:left;padding:15px 0;border-top:1px solid var(--hair);
                    vertical-align:baseline}
.short tbody tr:first-child th,.short tbody tr:first-child td{border-top:2px solid var(--rule)}
.short .k{width:190px;padding-right:24px}
.short .v{font-weight:500;font-size:17px}
.short .v small{display:block;font-weight:400;color:var(--ink-70);font-size:14.5px;margin-top:4px;
                max-width:52em}
.short .pr{text-align:right;white-space:nowrap;font-family:var(--m);font-size:17px;
           font-variant-numeric:tabular-nums;width:110px}

/* leesmaat */
.read{max-width:none}
/* De :not() houdt de themaregels buiten de artikelblokken: die zijn van het
   huis-snippet. Zonder dit lekt hier een letterspacing en een onderrand in
   de blokbalk (.tve4-balk is een h2) en een margin in de blokalineas, en dan
   staat het artikel niet meer gelijk aan de andere CV-sites. */
.read h2:not([class*="tve4-"]){font-size:30px;margin:52px 0 0;border-bottom:2px solid var(--rule);padding-bottom:11px}
.read h3:not([class*="tve4-"]){font-size:21px;margin:40px 0 10px}
.read p:not([class*="tve4-"]){margin-top:18px;color:#2A2A2A}
.read ul.b{list-style:none;margin-top:18px}
.read ul.b li{padding-left:22px;position:relative;margin-bottom:9px}
.read ul.b li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;
                      background:var(--teal)}
.read a{color:var(--teal);border-bottom:1px solid var(--bright)}
.read a:hover{border-bottom-width:2px}

/* rangorde: cijfer in de kantlijn, geen kaart */
.rk{display:grid;grid-template-columns:104px minmax(0,1fr);gap:0;border-top:2px solid var(--rule);
    padding-top:22px;margin-top:34px}
.rk-n{font-family:var(--hn);font-weight:700;
      font-size:74px;line-height:.82;color:var(--ink);font-variant-numeric:tabular-nums}
.rk.one .rk-n{color:var(--accent)}
.rk-b{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:40px;align-items:start}
.rk h3{font-size:27px;letter-spacing:-.028em;margin-top:-4px}
.rk .role{margin-bottom:7px}
.rk-b>div>p{margin-top:14px;color:#2A2A2A}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:22px 32px;margin-top:20px}
.pc ul{list-style:none}
.pc li{font-size:14.5px;padding-left:20px;position:relative;margin-bottom:6px}
.pc li::before{position:absolute;left:0;font-family:var(--m);font-size:13px;line-height:1.5}
.pc .up li::before{content:"+";color:var(--teal)}
.pc .dn li::before{content:"\2212";color:var(--accent)}
.pc h4{margin-bottom:8px}
.side .shot{aspect-ratio:3/2;margin-bottom:0}
.pt{max-width:480px;margin-top:26px;padding-top:22px;border-top:1px solid var(--hair)}
.sh-h2+.rk{border-top:0;padding-top:6px;margin-top:22px}
.prices caption{text-align:left;padding-bottom:8px}
.prices th,.prices td{padding:10px 0;border-top:1px solid var(--hair);font-size:14.5px;text-align:left;vertical-align:baseline}
.prices th small{display:block;font-family:var(--m);font-size:11px;color:var(--ink-45);font-weight:400;margin-top:3px}
.prices thead th{border-top:0;border-bottom:1px solid var(--rule);padding-top:0}
.prices .p{text-align:right;font-family:var(--m);font-variant-numeric:tabular-nums;
           white-space:nowrap}
.prices .low th,.prices .low td{font-weight:500;background:var(--sec)}
.prices .low th::before{content:"";display:inline-block;width:8px;height:8px;background:var(--accent);
                        margin-right:8px;vertical-align:baseline}
.prices tfoot td{border-top:1px solid var(--hair);font-family:var(--m);font-size:11px;
                 color:var(--ink-45);padding-top:9px}

/* grote tabel */
.scroll{overflow-x:auto}
.cmp{margin:26px 0 12px;min-width:680px}
.cmp th,.cmp td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--hair);
                font-size:14.5px}
.cmp thead th{border-bottom:2px solid var(--rule);padding-bottom:9px}
.cmp tbody tr:hover{background:rgba(30,61,47,.035)}
.cmp .win th{font-weight:500}
.cmp .win td:last-child,.cmp .win th{background:var(--sec)}
.cmp td.n,.cmp th.n{font-family:var(--m);font-variant-numeric:tabular-nums;white-space:nowrap}
.foot-note{font-size:13.5px;color:var(--ink-45)}

.sh-h2{font-size:30px;border-bottom:2px solid var(--rule);padding-bottom:11px;margin:52px 0 0}
.note{border:1px solid var(--rule);padding:30px 32px;margin:40px 0}
.note h3{font-size:19px;margin-bottom:9px}
.note p{font-size:15px;color:#2A2A2A}
.note a{color:var(--teal);border-bottom:1px solid var(--bright)}

.faq{margin-top:8px}
.faq dt{font-family:var(--h);font-weight:700;font-size:19px;letter-spacing:-.02em;
        border-top:1px solid var(--hair);padding:25px 0 9px}
.faq dd{font-size:15.5px;color:#2A2A2A;padding-bottom:24px}

/* hub */
.hh{padding-bottom:30px;border-bottom:2px solid var(--rule)}
.hh h1{font-size:56px;letter-spacing:-.036em;margin-top:8px}
.hint{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;padding:30px 0 0}
.hint p{color:var(--ink-70);margin-top:15px;font-size:17px}
.hint p:first-child{margin-top:0}
.hub-v{font-size:22px;margin:26px 0 4px;letter-spacing:-.022em}
.hfacts th,.hfacts td{padding:11px 0;border-top:1px solid var(--hair);font-size:14.5px;
                      text-align:left}
.hfacts tr:first-child th,.hfacts tr:first-child td{border-top:2px solid var(--rule)}
.hfacts td{text-align:right;font-family:var(--m);font-variant-numeric:tabular-nums}
.subs{columns:4;column-gap:32px;margin-top:26px}
.subs a{display:block;padding:11px 0;border-bottom:1px solid var(--hair);font-weight:500;
        font-size:15.5px;break-inside:avoid}
.subs a:hover{color:var(--teal)}

/* footer */
.ft{background:var(--ink);color:#B2B2AC;padding:52px 0 0;font-size:14.5px;margin-top:56px}
.ftg{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:56px;
     padding-bottom:52px}
.ft .lbl{color:#fff;margin-bottom:15px}
.ft li{margin-bottom:9px}
.ft a:hover{color:#fff;text-decoration:underline}
.ft .wm{font-family:var(--h);font-weight:var(--wm-gewicht,700);font-size:23px;color:var(--paper);
        letter-spacing:-.026em;margin-bottom:12px}
.ft .wm i{font-style:var(--wm-stijl,normal);color:var(--wm-mid-op-merk,var(--bright))}
.ft .fb p{max-width:none}
.ft .legal{font-family:var(--m);font-size:11.5px;color:#7C817A;margin-top:16px;line-height:1.8}
.ftb{border-top:1px solid #2E2E2E;padding:24px 0;font-family:var(--m);font-size:11.5px;
     color:#7C817A;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

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

@media (max-width:1080px){
  .lead .wrap{grid-template-columns:1fr}
  .lead-l{padding:40px 0 34px}
  .lead-r{border-left:0;border-top:1px solid var(--hair);padding:30px 0 44px}
  .lead h1{font-size:44px}
  .claims .wrap{grid-template-columns:1fr 1fr}
  .claims .wrap>div:nth-child(3){border-left:0;padding-left:0}
  .feat{grid-template-columns:1fr;gap:44px}
  .work li{grid-template-columns:40px minmax(0,1fr);gap:14px}
  .rk-b{grid-template-columns:1fr;gap:24px}
  .hint{grid-template-columns:1fr;gap:30px}
  .subs{columns:2}
  .ftg{grid-template-columns:1fr 1fr}
  .ft .fb{grid-column:1/-1}
}
@media (max-width:760px){
  .wrap{padding-left:max(22px,env(safe-area-inset-left));
        padding-right:max(22px,env(safe-area-inset-right))}
  .burger{display:grid}
  .mmenu:not([hidden]){display:block;border-top:1px solid var(--hair);
    padding-left:max(22px,env(safe-area-inset-left));
    padding-right:max(22px,env(safe-area-inset-right))}
  .mmenu a{display:block;padding:15px 0;border-bottom:1px solid var(--hair);font-weight:500;font-size:17px}
  .mmenu a:last-child{border-bottom:0}
  .lead h1{font-size:33px;letter-spacing:-.03em}
  .lead-l>p{font-size:16.5px}
  .lead-cta{width:100%;justify-content:center}
  .claims .wrap{grid-template-columns:1fr}
  .claims .wrap>div{border-left:0;padding:20px 0;border-top:1px solid rgba(255,255,255,.16)}
  .claims .wrap>div:first-child{border-top:0;padding-top:26px}
  .sec{padding:36px 0}
  .sh{flex-direction:column;align-items:flex-start;gap:8px}
  .sh h2{font-size:25px}
  .feat h3{font-size:26px}
  .feat p{font-size:16px}
  .cats,.subs{columns:1}
  .idx .c,.idx .d{display:none}
  .idx .t{font-size:17px}
  .ah h1{font-size:32px}
  .ah .stand{font-size:16.5px}
  .hh h1{font-size:34px}
  .hero{aspect-ratio:4/3}
  .read h2,.sh-h2{font-size:24px}
  .rk{grid-template-columns:1fr;padding-top:18px;margin-top:26px}
  .rk-n{font-size:44px;margin-bottom:8px}
  .rk h3{font-size:22px;margin-top:0}
  .pc{grid-template-columns:1fr;gap:16px}
  .side{grid-template-columns:1fr}
  .short .k{width:auto;display:block;padding:0}
  .short th,.short td{display:block;padding:0}
  .short tbody tr{display:block;border-top:1px solid var(--hair);padding:14px 0}
  .short tbody tr:first-child{border-top:2px solid var(--rule)}
  .short .pr{text-align:left;width:auto;margin-top:6px}
  .ftg{grid-template-columns:1fr;gap:30px}
  .ftb{flex-direction:column;gap:9px}
}

/* ═══════════════════════════════════════════════════════════════════
   Thema-specifiek: markup die WordPress oplevert en die de mock niet had
   ═══════════════════════════════════════════════════════════════════ */

/* merk in de kop en de voet */
.brand .brand-ic{width:34px;height:34px;flex:none}
.brand .wm{font-family:var(--h);font-weight:var(--wm-gewicht,700);font-size:26px;letter-spacing:-.026em;
  white-space:nowrap}
.brand .wm i{font-style:var(--wm-stijl,normal);color:var(--wm-mid,var(--teal))}
.ft .wm-f .wm{font-family:var(--h);font-weight:var(--wm-gewicht,700);font-size:23px;color:var(--paper);
  letter-spacing:-.026em;display:inline-block;margin-bottom:12px}
.ft .wm-f .wm i{font-style:var(--wm-stijl,normal);color:var(--wm-mid-op-merk,var(--bright))}

/* mobiel menu binnen een .wrap */
.mmenu>.wrap{display:block;padding-top:0;padding-bottom:0}

/* categorie-index met icoon */
.cats a{gap:11px}
.cats .cat-ic{width:20px;height:20px;flex:none;color:var(--teal);transform:translateY(2px)}

/* zoekformulier */
.zoek{margin:22px 0 0;max-width:520px}
.zoek .lbl{margin-bottom:8px}
.zoek-rij{display:flex;gap:0}
.zoek input[type=search]{flex:1;min-width:0;font:inherit;font-size:16px;padding:13px 15px;
  border:1px solid var(--rule);border-right:0;background:var(--white);color:var(--ink);
  border-radius:3px 0 0 3px}
.zoek input[type=search]::placeholder{color:var(--ink-45)}
.zoek button{font-family:var(--b);font-weight:500;font-size:15.5px;padding:13px 20px;border:0;
  background:var(--cta);color:var(--op-cta);cursor:pointer;border-radius:0 3px 3px 0;white-space:nowrap}
.zoek button:hover{background:var(--cta-d)}
.zoek input:focus-visible,.zoek button:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px;position:relative;z-index:1}

/* hero met echte foto */
.hero-fig{margin:30px 0 8px}
.hero-fig .hero{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;background:var(--sec)}
img.img{max-width:100%;height:auto}
.card .img,.feat .img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  background:var(--sec)}
.row .img{width:104px;aspect-ratio:16/10;object-fit:cover;background:var(--sec)}

/* lege staten */
.leeg{color:var(--ink-70);font-size:16.5px;padding:12px 0 16px}

/* paginering */
.pagination{margin-top:40px;padding-top:26px;border-top:1px solid var(--hair)}
.pagination .nav-links{display:flex;gap:0;flex-wrap:wrap;align-items:center}
.pagination .page-numbers{font-family:var(--m);font-size:14px;padding:12px 18px;
  border:1px solid var(--hair);border-left:0;min-width:44px;text-align:center;
  font-variant-numeric:tabular-nums}
.pagination .nav-links>:first-child{border-left:1px solid var(--hair)}
.pagination .page-numbers.current{background:var(--ink);color:var(--paper);
  border-color:var(--ink)}
.pagination a.page-numbers:hover{background:var(--sec)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

/* ─── inhoud die de redactie oplevert (the_content) ─── */
.entry>*:first-child{margin-top:0}
.entry p{margin-top:15px}
.entry ul,.entry ol{margin:18px 0;padding-left:22px}
.entry ul{list-style:disc}
.entry ol{list-style:decimal}
.entry li{margin-bottom:8px}
.entry li>ul,.entry li>ol{margin:8px 0}
.entry strong{font-weight:700}
.entry figure{margin:26px 0}
.entry figure img{width:100%;height:auto}
.entry figcaption{font-family:var(--m);font-size:11.5px;color:var(--ink-45);margin-top:8px}
.entry blockquote{margin:26px 0;padding:2px 0 2px 22px;border-left:3px solid var(--teal);
  font-size:18px;color:var(--ink-70)}
.entry blockquote p{margin-top:0}
.entry blockquote p+p{margin-top:12px}
.entry hr{border:0;border-top:2px solid var(--rule);margin:38px 0}
.entry table{width:100%;border-collapse:collapse;margin:26px 0;font-size:14.5px}
.entry table th,.entry table td{text-align:left;padding:13px 16px 13px 0;
  border-bottom:1px solid var(--hair)}
.entry table thead th{border-bottom:2px solid var(--rule);font-family:var(--hn);font-weight:600;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.entry .wp-block-table{overflow-x:auto}
.entry code{font-family:var(--m);font-size:.92em;background:var(--sec);padding:2px 5px}
.entry pre{background:var(--ink);color:#DCE0D8;padding:18px 20px;overflow-x:auto;
  font-family:var(--m);font-size:13px;margin:24px 0}
.entry pre code{background:none;padding:0;color:inherit}
.entry .wp-block-image{margin:26px 0}
.entry a:not([class]){color:var(--teal);border-bottom:1px solid var(--bright)}
.entry a:not([class]):hover{border-bottom-width:2px}
.entry dl{margin:22px 0}
.entry dt{font-family:var(--h);font-weight:700;font-size:19px;letter-spacing:-.02em;
  border-top:1px solid var(--hair);padding:20px 0 7px}
.entry dd{font-size:15.5px;color:#2A2A2A;padding-bottom:18px;margin:0}

/* WordPress-uitlijning */
.alignleft{float:left;margin:6px 26px 20px 0;max-width:50%}
.alignright{float:right;margin:6px 0 20px 26px;max-width:50%}
.aligncenter{margin-left:auto;margin-right:auto}
.alignwide,.alignfull{margin-left:0;margin-right:0}

@media (max-width:760px){
  .brand .wm{font-size:22px}
  .brand .brand-ic{width:26px;height:26px}
  .alignleft,.alignright{float:none;margin:20px 0;max-width:100%}
  .zoek-rij{flex-direction:column}
  .zoek input[type=search]{border-right:1px solid var(--rule);border-radius:3px 3px 0 0}
  .zoek button{border-radius:0 0 3px 3px;width:100%}
  .pagination .page-numbers{padding:9px 12px;font-size:13px}
}

/* ═══════════════════════════════════════════════════════════════════
   MAGAZINEVORM — gemeten op woonsferen.nl, dameswereld.nl,
   wonenmetlef.nl en debeterewereld.nl op 27-08-2026.

   Wat die vier gemeen hebben en wat hieronder dus is nagebouwd:
     · de merkkleur als VLAK (volle balk, volle sectie), niet als lijntje;
     · alle categorieën in een accentbalk onder het logo, geen overzichtspagina;
     · artikelen als stroom met een echte thumbnail, titel in de merkkleur,
       datum en categorie eronder en een leeslink;
     · een zijkolom met veel gelezen en de categorieën (debeterewereld);
     · een menselijk welkomsblok bovenaan met beeld ernaast (woonsferen);
     · afgeronde hoeken op beeld, geen harde kaders om alles heen.

   Deze regels staan achteraan en overschrijven bewust de oudere
   vergelijkingsblad-vorm hierboven.
   ═══════════════════════════════════════════════════════════════════ */

:root{--r:10px}
body{background:var(--white)}

/* ── kopbalk: één rij, links het logo, rechts het menu ──
   Vaste huisregel. De balk heeft de merkkleur, want dan is die kleur bovenaan
   de pagina een vlak. Geen zoekveld en geen datumstempel; zie header.php. */
.mast{background:var(--teal)}
/* > en niet een gewone afstammeling: het mobiele menu heeft ook een .wrap en
   die moet géén flexrij worden. */
.mast>.wrap{display:flex;align-items:stretch;gap:28px;min-height:84px}
.mast .brand{align-self:center}
.mast .wm{color:#fff}
.mast .wm i{color:var(--wm-mid-op-merk,var(--bright))}
.mast .brand-ic{color:#fff}

/* Het volledige logo als beeld in de kopbalk (31-08-2026). Hoogte vast, breedte
   los: de verhouding komt uit het bestand en de width/height-attributen in de
   markup houden de balk stil tijdens het laden.

   Let op de specificiteit: de generieke regel `img{height:auto}` staat eerder in
   dit bestand en heeft specificiteit (0,0,1). Een klasse (0,1,0) wint daarvan,
   dus deze hoogte houdt stand. Zonder klasse zou het logo op zijn intrinsieke
   120 px staan. */
.brand-logo{display:block;height:52px;width:auto}
@media (max-width:760px){.brand-logo{height:38px}}

.catnav{display:flex;margin-left:auto;align-items:stretch;min-width:0}
.catnav a{display:flex;align-items:center;color:#fff;font-family:var(--hn);font-weight:600;
  font-size:15px;letter-spacing:.005em;padding:0 12px;white-space:nowrap;
  border-bottom:3px solid transparent}
.catnav a:last-child{padding-right:0}
.catnav a:hover{border-bottom-color:rgba(255,255,255,.45)}
.catnav a[aria-current]{border-bottom-color:var(--bright)}  /* niet --cta: oranje op teal
  haalt maar 1,78 contrast en is dus geen zichtbare markering. --bright haalt 3,93. */

/* ── mobiel menu ── */
.mm-kop{display:block;font-family:var(--hn);font-weight:600;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-45);padding:16px 0 4px}

/* ── welkomsblok ── */
.welkom{background:var(--paper)}
.welkom .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:56px;
  align-items:center;padding-top:54px;padding-bottom:54px}
.welkom h1{font-size:44px;letter-spacing:-.032em}
/* Lopende tekst is overal 16px. Hiërarchie komt uit de koppen, niet uit een
   afwijkende alineamaat: dat laatste geeft per sjabloon een andere maat en dat
   valt op zodra je twee pagina's naast elkaar legt. Vaste huisregel. */
.welkom p{font-size:16px;line-height:1.65;color:var(--ink-70);margin-top:22px}
/* Geen afwijkende maat voor een volgende alinea: alineas hebben overal
   dezelfde lettergrootte. Vaste huisregel. */
.welkom p+p{margin-top:17px}
.knop{display:inline-flex;align-items:center;gap:10px;margin-top:30px;background:var(--cta);
  /* <button class="knop"> erft de letter niet vanzelf; zonder deze regel staat de
     knoptekst in de systeemletter. */
  font-family:var(--b);border:0;cursor:pointer;color:var(--op-cta);font-weight:500;font-size:16px;padding:17px 30px;border-radius:999px}
.knop:hover{background:var(--cta-d)}
.knop span[aria-hidden]{font-family:var(--m)}
.welkom-b{min-width:0}
.welkom-foto{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  background:var(--sec);box-shadow:0 20px 44px -26px rgba(26,26,26,.5)}

/* beeldplaatshouder: eerlijk vlak met een tekstje, geen nepfoto */
div.welkom-foto,div.thumb,div.kaart-f{position:relative;display:grid;place-items:center}
div.welkom-foto::after,div.thumb::after,div.kaart-f::after{content:attr(data-cap);
  font-family:var(--m);font-size:11px;color:var(--ink-45);padding:0 10px;text-align:center;
  max-width:90%;overflow:hidden}
div.thumb{aspect-ratio:8/5}
div.kaart-f{aspect-ratio:3/2;background:rgba(255,255,255,.12)}
div.kaart-f::after{color:#BCCCC0}

/* ── claimstrook: licht, want de kleur zit al in de balken ──
   Let op: de cellen zijn .claims .wrap>div en niet .claims div. Dat laatste
   raakt ook de .wrap zelf (die is een div en first-child), en dan verliest de
   strook zijn zijmarge. */
.claims{background:var(--white);color:var(--ink-70);border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair)}
.claims .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-top:0;padding-bottom:0}
.claims .wrap>div{padding:28px 32px;border-left:1px solid var(--hair);font-size:13.5px;line-height:1.55}
.claims .wrap>div:first-child{border-left:0;padding-left:0}
.claims .lbl{color:var(--accent);margin-bottom:5px}
.claims a{display:inline-block;color:var(--teal);border-bottom:1px solid var(--bright);
  font-weight:500;padding-bottom:2px}

/* ── accentsectie met kaarten (woonsferen: nieuwste artikelen in een vol vlak) ── */
.band{background:var(--teal);padding:66px 0 72px}
.bandkop{color:#fff;font-size:31px;margin-bottom:32px}
.kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.kaart{display:flex;flex-direction:column;min-width:0}
.kaart-b{position:relative;display:block;border-radius:var(--r);overflow:hidden;
  background:rgba(255,255,255,.1)}
.kaart-f{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.kaart-b::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(22,46,35,.9),rgba(22,46,35,.34) 44%,rgba(22,46,35,0) 74%)}
.kaart-b h3{position:absolute;z-index:1;left:20px;right:20px;bottom:17px;color:#fff;font-size:20px;
  line-height:1.16}
.kaart-b:hover h3{text-decoration:underline;text-underline-offset:3px}
.kaart-vlag{position:absolute;z-index:1;left:0;top:15px;background:var(--cta);color:var(--op-cta);
  font-family:var(--hn);font-weight:600;font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 12px;border-radius:0 3px 3px 0}
.kaart-x{color:#C4D2C6;font-size:14.5px;margin-top:14px}

/* ── twee kolommen (debeterewereld) ── */
.kolommen{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:56px;align-items:start;
  padding-top:60px;padding-bottom:88px}
.hoofd{min-width:0}

/* ── blokkop ── */
.blokkop{display:flex;align-items:baseline;justify-content:space-between;gap:20px;font-size:25px;
  padding-bottom:16px;border-bottom:2px solid var(--teal)}
.hoofd .blokkop{margin-top:64px}
.hoofd>.blokkop:first-child{margin-top:0}
.blokkop>a:first-child:hover{color:var(--teal)}
.blokkop-meer{display:inline-block;font-family:var(--b);font-weight:500;font-size:14.5px;
  color:var(--teal);white-space:nowrap;letter-spacing:0;padding:3px 0;line-height:1.5}
.blokkop-meer:hover{text-decoration:underline;text-underline-offset:3px}
.blokkop-meer span[aria-hidden]{font-family:var(--m)}

/* ── artikelrij ── */
.rijen{display:flex;flex-direction:column}
.rij{display:grid;grid-template-columns:196px minmax(0,1fr);gap:32px;padding:32px 0;
  border-bottom:1px solid var(--hair);align-items:start}
.rij-b{display:block;border-radius:8px;overflow:hidden;background:var(--sec)}
.thumb{width:100%;aspect-ratio:8/5;object-fit:cover;display:block}
.rij-t{min-width:0}
.rij-t h3{font-size:22px;line-height:1.17;letter-spacing:-.022em}
.rij-t h3 a{color:var(--teal)}
.rij-t h3 a:hover{color:var(--accent)}
.rij-m{display:flex;flex-wrap:wrap;margin-top:13px}
.rij-m>*{font-family:var(--m);font-size:11.5px;color:var(--ink-45);padding:0 10px;
  border-left:1px solid var(--hair);line-height:1.4}
.rij-m>*:first-child{padding-left:0;border-left:0}
.rij-m a{color:var(--teal)}
.rij-m a:hover{text-decoration:underline}
.rij-x{margin-top:15px;color:var(--ink-70);font-size:15.5px}
.rij-l{margin-top:17px}
.rij-l a{display:inline-block;font-weight:500;font-size:14.5px;color:var(--teal);
  border-bottom:1.5px solid var(--bright);padding:2px 0 4px}
.rij-l a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ── zijkolom ── */
.zij{display:flex;flex-direction:column;gap:26px;min-width:0}
.zij-b{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);padding:26px 28px}
.zij-b>h2{font-size:18.5px;color:var(--teal);padding-bottom:11px;
  border-bottom:2px solid var(--bright)}
.zij-b li{border-bottom:1px solid var(--hair)}
.zij-b li:last-child{border-bottom:0}
.zij-b li a{display:block;padding:12px 0;font-size:15px;font-weight:500;line-height:1.4}
.zij-b li a:hover{color:var(--teal)}
.zij-cat li{display:flex;align-items:center;gap:11px}
.zij-cat .cat-ic{width:19px;height:19px;flex:none;color:var(--teal)}
.zij-cat li a{flex:1;min-width:0}
.zij-noot{background:var(--teal);border-color:var(--teal);color:#C4D2C6}
.zij-noot>h2{color:#fff;border-bottom-color:rgba(255,255,255,.3)}
.zij-noot p{font-size:14.5px;margin-top:12px;line-height:1.6}
.zij-noot a{display:inline-block;color:#fff;font-weight:500;
  border-bottom:1px solid var(--bright);padding-bottom:2px}

/* ── paginakop als accentband (woonsferen doet dit op elke categoriepagina) ── */
.pkop{background:var(--teal);color:#fff;padding:44px 0 52px}
.pkop .crumb{color:rgba(255,255,255,.68);padding:0 0 13px}
.pkop .crumb a{color:#fff}
.pkop .crumb a:hover{text-decoration:underline}
.pkop .crumb i{color:rgba(255,255,255,.42)}
.pkop h1{font-size:40px;letter-spacing:-.03em;display:flex;align-items:center;gap:15px}
.pkop h1 .cat-ic{width:33px;height:33px;flex:none;color:var(--bright)}
.pkop-intro{margin-top:21px;color:#D6E0D8;font-size:16px;line-height:1.65}
.pkop-intro p+p{margin-top:11px}
.pkop-tel{margin-top:13px;font-family:var(--m);font-size:13px;color:#D6E0D8}
.kolommen .pagination{border-top:0}

/* ── artikel en vaste pagina: één leeskolom, gecentreerd ── */
.leesmaat{max-width:840px}
/* 70ch, want zonder deze grens werd de regel 88 tekens op een tablet en 91
   op de desktop. Alles boven ~75 leest moeizaam. */
.leesmaat .read,.leesmaat .entry{max-width:34em}
.ah{padding-bottom:32px;border-bottom:1px solid var(--hair)}
.ah h1{font-size:40px;letter-spacing:-.03em;max-width:none}
.ah .stand{font-size:18px}
.read h2:not([class*="tve4-"]),.sh-h2{font-size:26px;border-bottom:1px solid var(--hair);margin-top:44px}
.read h3:not([class*="tve4-"]){font-size:20px}
.verder{background:var(--paper);padding:44px 0 52px;margin-top:56px}
.verder .blokkop{margin-top:0}
.p404{padding:26px 0 58px}
.note{border:1px solid var(--hair);border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  background:var(--paper)}
.hero-fig .hero,.hero{border-radius:var(--r)}

/* ── voet ── */
.ft{margin-top:0}
.verder+.ft,.band+.ft{margin-top:0}
.ft .lbl{color:#fff}
.ft li a{display:inline-block;padding:2px 0}

/* ── sfeerbeeld ──
   Geen zichtbare fotocredit; zie de toelichting boven kp_sfeerbeeld() in
   functions.php. De herkomst staat in de attachment-meta. */
.sfeer{position:relative;margin:0;min-width:0}
.sfeer img{width:100%;height:auto;display:block;border-radius:var(--r);background:var(--sec)}

.welkom .sfeer img{aspect-ratio:4/3;object-fit:cover;
  box-shadow:0 20px 44px -26px rgba(26,26,26,.5)}

/* paginakop met foto: het beeld ligt onder de teal, niet ernaast, zodat de
   witte tekst zijn contrast houdt op elke foto */
.pkop-foto{position:relative;overflow:hidden;padding:44px 0 46px}
.pkop-b{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pkop-foto::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(22,46,35,.96) 0%,rgba(22,46,35,.9) 46%,rgba(22,46,35,.62) 100%)}
.pkop-foto>.wrap{position:relative;z-index:2}
.pkop .pkop .pkop 
/* vaste pagina: beeld boven de leestekst */
.leesmaat .sfeer{margin:26px 0 6px}
.pagina-foto{aspect-ratio:21/9;object-fit:cover}

@media (max-width:760px){
  .pkop-foto{padding:26px 0 30px}
  .welkom .sfeer img{aspect-ratio:16/10}
  .pagina-foto{aspect-ratio:16/9}
}

/* ── aanraakbediening ──
   Niet op schermbreedte maar op het aanwijsapparaat: een tablet van 768 px is
   net zo goed een vinger als een telefoon van 390, en een laptop met
   aanraakscherm ook. 44 px is het minimum dat Apple en Google beide noemen.
   Een link midden in een zin valt hier bewust buiten: die mag klein blijven. */
@media (pointer:coarse){
  .burger{width:44px;height:44px}
  .rij-l{margin-top:6px}
  .rij-l a{padding:11px 0 12px}
  .blokkop-meer{padding:12px 0}
  .zij-b li a{padding:12px 0}
  .ft li a{padding:11px 0}
  .ft li{margin-bottom:0}
  .catnav a{padding:0 14px}
  .zij-toc li a{padding:12px 0}
  .mmenu a{padding:15px 0}
  .pagination .page-numbers{min-height:44px;display:inline-flex;align-items:center;
    justify-content:center}
  /* Niets onder 12 px onder een vinger: dat leest niet en het mist ook. */
  .kaart-vlag,.rij-m>*,.ft .legal,.ftb,.hero-cap,.entry figcaption{font-size:12.5px}
  .crumb{font-size:12.5px}
}

@media (max-width:1080px){
  .kolommen{grid-template-columns:1fr;gap:46px;padding-top:38px;padding-bottom:54px}
  .zij{max-width:none}
  .welkom .wrap{grid-template-columns:1fr;gap:32px;padding-top:40px;padding-bottom:44px}
  .welkom h1{font-size:37px}
  .welkom-foto{aspect-ratio:16/9}
  .kaarten{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .claims .wrap{grid-template-columns:1fr 1fr}
  .claims .wrap>div:nth-child(3){border-left:0;padding-left:0}
  }
@media (max-width:940px){
  /* Acht categorieën passen niet naast het logo. Dan de burger, met het hele
     menu daarin: liever één plek dan een balk die horizontaal wegschuift. */
  .catnav{display:none}
  .burger{display:grid;margin-left:auto;align-self:center;
    border-color:rgba(255,255,255,.55);background:transparent}
  .burger span{background:#fff;box-shadow:0 5px 0 #fff,0 -5px 0 #fff}
  .mmenu:not([hidden]){display:block;background:var(--teal-d);
    border-top:1px solid rgba(255,255,255,.22)}
  .mmenu a{display:block;padding:15px 0;font-weight:500;font-size:17px;color:#fff;
    border-bottom:1px solid rgba(255,255,255,.18)}
  .mmenu a:last-child{border-bottom:0}
  .mmenu .mm-kop{color:rgba(255,255,255,.62)}
}
@media (max-width:760px){
  .mast>.wrap{min-height:60px;gap:14px}
  .mmenu:not([hidden]){border-top:1px solid rgba(255,255,255,.22);background:var(--teal-d)}
  .mmenu a{font-size:17px;color:#fff;border-bottom-color:rgba(255,255,255,.18)}
  .mmenu .mm-kop{color:rgba(255,255,255,.62)}
  .welkom h1{font-size:30px;letter-spacing:-.028em}
  /* geen afwijkende alineamaat op mobiel */
  .knop{width:100%;justify-content:center}
  .claims .wrap{grid-template-columns:1fr}
  .claims .wrap>div{border-left:0;padding:20px 0;border-top:1px solid var(--hair)}
  .claims .wrap>div:first-child{border-top:0;padding-top:26px}
  .claims .wrap>div:last-child{padding-bottom:26px}
  .band{padding:36px 0 40px}
  .bandkop{font-size:24px;margin-bottom:20px}
  .kaarten{grid-template-columns:1fr}
  .kaart-b h3{font-size:18px;left:15px;right:15px;bottom:14px}
  .blokkop{font-size:21px;flex-direction:column;align-items:flex-start;gap:6px}
  .hoofd .blokkop{margin-top:36px}
  .rij{grid-template-columns:118px minmax(0,1fr);gap:15px;padding:20px 0}
  .rij-t h3{font-size:17.5px}
  .rij-x{display:none}
  .rij-m{flex-wrap:nowrap;overflow:hidden}
  .rij-m>*{font-size:12px;padding:0 8px}
  .rij-n{display:none}
  .rij-l{margin-top:9px}
  .pkop{padding:22px 0 28px}
  .pkop h1{font-size:28px;gap:11px}
  .pkop h1 .cat-ic{width:26px;height:26px}
  .pkop-intro{margin-top:14px}
  .ah h1{font-size:29px}
  .read h2,.sh-h2{font-size:23px}
  .verder{padding:32px 0 38px;margin-top:40px}
}

/* ═══════════════════════════════════════════════════════════════════
   CTA'S EN INTERNE LINKS (28-08-2026)
   Zie de toelichting boven kp_typen() in functions.php: één anchor voor
   alles is verspilling, en de silo moet in beide richtingen dicht.
   ═══════════════════════════════════════════════════════════════════ */

/* type-pil boven een titel */
.pil{display:inline-block;background:var(--sec);color:var(--teal-d);font-family:var(--hn);
  font-weight:600;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;margin-bottom:8px}
.kaart-l{margin-top:12px}
.kaart-l a{font-weight:500;font-size:14.5px;color:#fff;border-bottom:1.5px solid var(--bright);
  padding-bottom:2px;display:inline-block}
.kaart-l a:hover{border-bottom-color:#fff}
.kaart-l span[aria-hidden]{font-family:var(--m)}

/* beste keuze op een hub: het antwoord vóór de lijst */
.beste{background:var(--sec);border-left:4px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  padding:22px 26px 24px;margin-bottom:8px}
.beste h2{font-size:26px;margin-top:6px;letter-spacing:-.022em}
.beste h2 a{color:var(--ink)}
.beste h2 a:hover{color:var(--teal)}
.beste p{margin-top:10px;color:var(--ink-70);font-size:16px}
.beste .knop{margin-top:18px;font-size:15.5px;padding:12px 20px}

/* verwante artikelen: de zijwaartse verbinding in de silo */
.verwant{margin:40px 0 0;padding:22px 0 0;border-top:1px solid var(--hair)}
.verwant ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px}
@media(min-width:640px){.verwant ul{grid-template-columns:1fr 1fr;gap:8px 34px}}
.verwant li{margin:0;padding-left:15px;text-indent:-15px;line-height:1.45;font-size:16px}
.verwant li:before{content:"\2192\00a0";color:var(--ink-45)}
.verwant a{color:var(--ink)}
.verwant a:hover{color:var(--teal)}

/* volgende stap onderaan een artikel */
.stap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:34px;margin:44px 0 8px;
  padding:26px 0 0;border-top:2px solid var(--rule)}
.stap h2{font-size:25px;margin-top:6px;letter-spacing:-.022em}
.stap h2 a{color:var(--ink)}
.stap h2 a:hover{color:var(--teal)}
.stap p{margin-top:9px;color:var(--ink-70);font-size:16px}
.stap .knop{margin-top:16px;font-size:15.5px;padding:12px 20px}
.stap-b{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);padding:18px 20px}
.stap-b h3{font-size:18.5px;margin-top:6px;line-height:1.25}
.stap-b .lees{display:inline-block;margin-top:10px;font-weight:500;font-size:14.5px;color:var(--teal);
  border-bottom:1.5px solid var(--bright);padding-bottom:2px}

/* zusterhubs: de horizontale verbinding in de silo */
.zusters{padding:34px 0 46px;border-top:1px solid var(--hair)}
.zusters ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:14px}
.zusters li a{display:flex;align-items:center;gap:10px;background:var(--paper);
  border:1px solid var(--hair);border-radius:var(--r);padding:14px 16px;font-weight:500;
  font-size:14.5px;line-height:1.3;min-height:64px}
.zusters li a:hover{border-color:var(--teal);color:var(--teal)}
.zusters .cat-ic{width:22px;height:22px;flex:none;color:var(--teal)}

@media (max-width:1080px){
  .stap{grid-template-columns:1fr;gap:22px}
  .zusters ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .zusters ul{grid-template-columns:1fr 1fr;gap:10px}
  .zusters li a{min-height:56px;padding:12px 13px;font-size:13.5px}
  .beste{padding:18px 18px 20px}
  .beste h2{font-size:22px}
  .stap{margin-top:34px}
}

/* wie dit schrijft */
.zij-schrijver{background:var(--sec);border-color:var(--sec)}
.zij-schrijver p{font-size:16px;color:var(--ink-70);margin-top:11px;line-height:1.65}
.zij-schrijver .zij-l{margin-top:12px}
.zij-schrijver .zij-l a{font-weight:500;font-size:14.5px;color:var(--teal);
  border-bottom:1.5px solid var(--bright);padding-bottom:2px;display:inline-block}
.zij-cat span[aria-current]{display:block;padding:12px 0;font-size:15px;font-weight:600;
  color:var(--ink-45);line-height:1.4}

/* ═══════════════════════════════════════════════════════════════════
   VOLLE BREEDTE EN MEER LUCHT (28-08-2026)

   Twee klachten, één oorzaak. De vaste pagina's en artikelen stonden in
   een kolom van 840 px met wit aan beide kanten, en dat ziet er onaf uit.
   De leesregel mag niet langer worden (boven ~75 tekens leest niemand
   meer mee), dus de breedte wordt gevuld met een tweede kolom die iets
   doet: de inhoudsopgave, wie wij zijn, en de wegen verder.

   En de afstanden: beeld stond 6 px van de tekst, secties 8 px van de
   voet. Alles wat een blokovergang is staat nu op minstens 40 px.
   ═══════════════════════════════════════════════════════════════════ */

/* de kop van een pagina of artikel, over de volle breedte */
/* Padding-top/bottom als losse eigenschappen: de shorthand `padding:26px 0 30px`
   overschreef de padding-left/right van .wrap, waardoor de h1 en de stand
   32px verder naar links stonden dan het logo en de body. */
/* De scheidingslijn volgt de kolombreedte, niet de wrap: liep hij door tot
   1288 px terwijl tekst en blokken op 872 px eindigen, dan zag je twee
   rechterranden onder elkaar. Vandaar een ::after in plaats van een
   border-bottom op het volle vlak. */
.paginakop{padding-top:26px;padding-bottom:0;margin-bottom:0}
.paginakop::after{content:"";display:block;margin-top:30px;
  border-bottom:1px solid var(--hair)}
.paginakop h1{font-size:46px;letter-spacing:-.032em;margin-top:8px;max-width:26em}
.paginakop .stand{font-size:19px;color:var(--ink-70);margin-top:16px}
.paginakop .by{margin-top:24px}
.paginakop .lbl{margin-bottom:2px}

/* de tekstkolom blijft leesbaar, de tweede kolom vult de breedte */
/* zie het blok "één kolom" onderaan */
.kolommen{padding-top:44px;padding-bottom:72px}

/* beeld: lucht eronder, en de volle kolombreedte */
.sfeer{margin:30px 0 6px}
.wrap>.sfeer{margin:32px 0 4px}
.pagina-foto{width:100%;aspect-ratio:21/9;object-fit:cover}
.hero-fig{margin:32px 0 4px}
.hero-fig .hero{aspect-ratio:21/9}
.hero-cap{padding-bottom:0;margin-top:10px}

/* inhoudsopgave */
.zij-toc ol{list-style:none;counter-reset:toc}
.zij-toc li{counter-increment:toc;border-bottom:1px solid var(--hair)}
.zij-toc li:last-child{border-bottom:0}
.zij-toc li a{display:flex;gap:10px;padding:12px 0;font-size:14.5px;font-weight:500;line-height:1.4}
.zij-toc li a::before{content:counter(toc);font-family:var(--m);font-size:12px;color:var(--ink-45);
  flex:none;padding-top:2px}
.zij-toc li a:hover{color:var(--teal)}

/* ── lucht tussen blokken ── */
.read h2:not([class*="tve4-"]),.sh-h2{margin-top:62px}
.read>*:first-child{margin-top:0}
.note{margin:58px 0 8px}
.stap{margin-top:52px}
.verder{margin-top:84px;padding:60px 0 68px}
.zusters{padding:52px 0 68px}
.ft{padding-top:76px}
.kolommen+.wrap>.zusters{border-top:1px solid var(--hair);margin-top:0}
.band+.wrap.kolommen{padding-top:52px}
.strook+.wrap.kolommen,.claims+.wrap.kolommen{padding-top:52px}
.entry figure,.entry .wp-block-image{margin:34px 0}
.entry table{margin:32px 0}
.entry blockquote{margin:32px 0}
.entry hr{margin:48px 0}

@media (max-width:1080px){
  .paginakop h1{font-size:37px}
  .kolommen{padding-top:44px;padding-bottom:70px}
  /* Eén kolom, en de leesregel blijft op 34em. 38em leverde gemeten 83 tekens
     per regel op; 34em geeft 74, en dat is de bovengrens die nog leest. */

}
@media (max-width:760px){
  /* Weer padding-top/bottom los: de shorthand wist de zijpadding van .wrap,
     waardoor de h1 op mobiel 18px verder naar links stond dan het logo. */
  .paginakop{padding-top:18px;padding-bottom:0}
  .paginakop::after{margin-top:22px}
  .paginakop h1{font-size:30px;letter-spacing:-.028em}
  .paginakop .stand{font-size:16.5px}
  .sfeer,.wrap>.sfeer,.hero-fig{margin:22px 0 4px}
  .pagina-foto,.hero-fig .hero{aspect-ratio:16/9}
  .read h2,.sh-h2{margin-top:48px}
  .note{margin:44px 0 6px}
  .stap{margin-top:40px}
  .verder{margin-top:56px;padding:44px 0 52px}
  .zusters{padding:40px 0 52px}
  .ft{padding-top:56px}
}


/* ── één kolom: body precies zo breed als kop en voet ────────────────────────
   Vaste huisregel. Pagina's, artikelen en categorieën hebben geen zijkolom:
   de inhoud staat in hetzelfde kader als .mast>.wrap en .ft .wrap, op elke
   schermmaat. Alleen de homepage houdt twee kolommen, want dat is een index
   en geen leespagina.

   Wat in de zijkolom stond staat nu in de leesrichting: de inhoudsopgave boven
   de tekst, het redactieblok eronder. */
.kolom{padding-top:56px;padding-bottom:92px}
.kolom>.hoofd{min-width:0}
.kolom>.hoofd>*:first-child{margin-top:0}

/* Eén kolombreedte, voor alles.

   De blokken stonden op de volle wrap (1136 px) en de lopende tekst op 672 px.
   Dat gaf twee verschillende rechterranden onder elkaar, en dat is wat er niet
   uitspatieerde. Nu heeft de hele kolom één maat: kop, tekst, tabellen,
   productblokken en de voetnoot eindigen op dezelfde x.

   720 px is de norm uit het Site Content Playbook (sectie 10: leesregel
   720-760 px, kop en kruimelpad op de volle wrap). De linkerrand blijft gelijk
   aan die van het logo en de voet. */
/* Geen eigen maximum: de wrap ís de kolom. Kop, body en voet delen daardoor
   één kolom, en alles erin heeft dezelfde linker- en rechterrand. De maat staat
   in de site-JSON onder "wrap"; de huisstandaard is 1080px. */
.kolom>.hoofd{max-width:none}
.kolom>.hoofd>.read>h2:not([class*="tve4-"]){font-size:32px}
.kolom>.hoofd>.read>h3:not([class*="tve4-"]){font-size:23px}

/* de noot en de volgende-stap volgen de leesregel, niet de volle breedte */
.kolom>.hoofd>.note,.kolom>.hoofd>.stap{max-width:none}


/* redactieblok onder de tekst */
.kolom .zij-schrijver{margin-top:72px}
.kolom .zij-schrijver>h2{font-size:18.5px}

@media (max-width:760px){
  .kolom{padding-top:40px;padding-bottom:68px}
  .kolom .zij-schrijver{margin-top:56px}
}

/* ── wie zijn wij: het geteld getal ─────────────────────────────────────── */
/* Geen badge: mono, teal en klein leest als een keurmerk dat we zelf hebben
   uitgereikt. Dezelfde maat en kleur als de rest van het blok, alleen iets
   zachter. */
.zij-schrijver .zij-cijfer{font-size:16px;color:var(--ink-45);margin-top:10px}

/* De .nl in het woordmerk: aanwezig maar ondergeschikt. */
.wm u{text-decoration:none;font-weight:500;opacity:.62;font-size:.72em;
  letter-spacing:0;margin-left:.02em}

/* ── de opening: variant C "De editie" ───────────────────────────────────────
   Door Rowan gekozen uit drie modellen (31-08-2026, mocks in
   mocks/kop-varianten). Vervangt variant B: donkere fotobanner met een
   zoekbalk. Licht vlak, links de belofte met een cijferrij, rechts de nieuwste
   vergelijking als kaart. Geen zoekbalk, geen tekst op een foto.

   Drie harde regels in dit blok:
   1. Nooit de padding-shorthand op een element dat óók .wrap is: die wist de
      zijpadding en de kop plakt tegen de schermrand. Altijd padding-top en
      padding-bottom los.
   2. Geef de tekstkolom geen eigen max-width via .editie>.wrap: de grid doet de
      verdeling, en een cap op de wrap centreert de kolom weg van het logo.
   3. Ruimte gaat vóór dichtheid. De openingssectie heeft de grootste
      verticale maat van de pagina; wat hier krap staat, staat op de hele site
      krap. */
.editie{background:var(--paper);border-bottom:1px solid var(--hair)}
.editie>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;
  align-items:center;padding-top:76px;padding-bottom:72px}
/* geen artikelen (nieuwe drager): één kolom, geen leeg raster */
.editie-solo>.wrap{grid-template-columns:minmax(0,640px)}
.editie-t{min-width:0}
.editie h1{font-size:46px;line-height:1.07;letter-spacing:-.034em}
.editie-sub{font-size:18px;color:var(--ink-70);line-height:1.6;margin-top:22px;max-width:30em}

/* de eyebrow staat nu op een licht vlak: accent in plaats van wit */
.hero-eyebrow{font-family:var(--m);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px;margin:0 0 20px}
.hero-eyebrow::before{content:"";flex:0 0 26px;height:1px;background:currentColor;opacity:.55}

/* de cijferrij: twee van de drie getallen zijn geteld, zie kp_kerncijfers() */
.cijfers{display:flex;flex-wrap:wrap;gap:18px 40px;margin-top:38px;padding-top:32px;
  border-top:1px solid var(--hair);list-style:none}
.cijfers li{font-family:var(--m);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-45)}
.cijfers b{display:block;font-family:var(--h);font-weight:700;font-size:30px;letter-spacing:-.03em;
  color:var(--teal);text-transform:none;margin-bottom:5px;font-variant-numeric:tabular-nums}

.acties{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:38px}
/* .knop heeft zelf een margin-top voor los gebruik; in de actierij niet */
.acties .knop{margin-top:0}
.acties-2{font-weight:500;color:var(--teal);border-bottom:1px solid var(--bright);padding-bottom:3px}
.acties-2:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* de nieuwste vergelijking als kaart */
.uit{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  box-shadow:0 26px 54px -34px rgba(26,26,26,.4);min-width:0}
.uit-b{position:relative;display:block}
.uit-f{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
div.uit-f{display:grid;place-items:center;background:var(--sec)}
.uit-vlag{position:absolute;top:16px;left:16px;background:var(--cta);color:var(--op-cta);
  font-family:var(--hn);font-weight:600;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;padding:7px 14px;border-radius:999px}
.uit-in{padding:28px 30px 30px}
.uit-in h2{font-size:25px;line-height:1.16;letter-spacing:-.024em}
.uit-in h2 a{color:var(--teal)}
.uit-in h2 a:hover{color:var(--accent)}
.uit-x{color:var(--ink-70);font-size:15.5px;margin-top:13px}
.uit-m{display:flex;flex-wrap:wrap;margin-top:20px}
.uit-m>span{font-family:var(--m);font-size:11.5px;color:var(--ink-45);padding:0 12px;
  border-left:1px solid var(--hair);line-height:1.4}
.uit-m>span:first-child{padding-left:0;border-left:0}
.uit-l{display:inline-block;margin-top:24px;font-weight:500;color:var(--teal);
  border-bottom:1.5px solid var(--bright);padding:2px 0 4px}
.uit-l:hover{color:var(--accent);border-bottom-color:var(--accent)}
.uit-l span[aria-hidden]{font-family:var(--m)}

/* de drie volgende, klein. Vervangt de oude accentband "Nieuw op de site". */
.drie{background:var(--white);border-bottom:1px solid var(--hair)}
.drie>.wrap{padding-top:44px;padding-bottom:48px}
.drie-kop{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  margin-bottom:28px}
.drie-kop h2{font-size:21px;letter-spacing:-.02em}
.drie-kop>a{font-weight:500;font-size:14.5px;color:var(--teal);
  border-bottom:1px solid var(--bright);padding-bottom:3px;white-space:nowrap}
.drie-kop>a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.drie-kop>a span[aria-hidden]{font-family:var(--m)}
.drie-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.mini{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:center;
  min-width:0}
.mini-f{width:104px;height:78px;object-fit:cover;border-radius:8px;display:block}
/* zonder foto een rustig vlak: op 104px is een bijschrift onleesbaar */
div.mini-f{background:var(--sec)}
div.mini-f::after{display:none}
.mini-t{display:block;min-width:0}
.mini-c{display:block;font-family:var(--m);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px}
/* strong en niet span: .mini span raakte anders óók het categorielabel, en dan
   werden de titels hoofdletters in de accentkleur (gemeten in de mock). */
.mini strong{display:block;font-family:var(--h);font-weight:500;font-size:15.5px;line-height:1.32;
  letter-spacing:-.012em;color:var(--ink);text-transform:none}
.mini:hover strong{color:var(--teal)}

/* Het leesblok verderop de pagina. Eén kolom: de homepage levert hier twee
   alineas en geen foto, en twee alineas naast elkaar leest als een krant. */
.welkom{background:var(--paper);border-bottom:1px solid var(--hair)}
.welkom>.wrap{display:block;padding-top:64px;padding-bottom:66px}
/* leesmaat, geen volle wrap: op 1000 px werd de regel gemeten 118 tekens en dat
   leest niet. 34em geeft ~72 tekens, dezelfde norm als de artikeltekst. */
.welkom>.wrap>p{max-width:34em}

@media (max-width:1000px){
  .editie>.wrap{grid-template-columns:1fr;gap:44px;padding-top:56px;padding-bottom:56px}
  .editie h1{font-size:38px}
  .drie-rij{grid-template-columns:1fr;gap:24px}
}
@media (max-width:760px){
  .editie>.wrap{padding-top:42px;padding-bottom:44px;gap:34px}
  .editie h1{font-size:31px;letter-spacing:-.03em}
  .editie-sub{font-size:16.5px;margin-top:18px}
  .cijfers{gap:16px 26px;margin-top:30px;padding-top:26px}
  .cijfers b{font-size:24px}
  .acties{margin-top:30px;gap:14px 24px}
  .uit-in{padding:22px 22px 24px}
  .uit-in h2{font-size:21px}
  .drie>.wrap{padding-top:36px;padding-bottom:38px}
  .drie-kop{margin-bottom:22px}
  .welkom>.wrap{padding-top:40px;padding-bottom:42px}
}

/* ── winkelvorm op de homepage ───────────────────────────────────────────────
   Rowan wilde de opzet van een webshopvoorkant: grote foto met één duidelijke
   actie, een strook met vertrouwenssignalen eronder en daarna tegels per
   categorie. Overgenomen is de VORM. De inhoud blijft van een
   vergelijkingssite: geen "vanaf-prijs", geen voorraad, geen levertijd, want
   we verkopen niets. In de tegels staat wat er wél is: het aantal
   vergelijkingen en het aantal vergeleken modellen, geteld uit de database. */

/* De claimstrook staat sinds variant C weer op de homepage, licht, onder de
   eerste artikelen. Gerenderd door kp_claimstrook(). */
.claims .lbl{display:flex;align-items:flex-start;gap:7px}
/* flex-start plus een kleine marge: bij een label van twee regels stond het
   vinkje anders verticaal gecentreerd naast twee regels tekst in plaats van bij
   de eerste. Gemeten op dameswijzer, 'Ook wat je moet laten staan'. */
.claims .lbl .ui-ic{width:15px;height:15px;flex:0 0 15px;color:var(--accent);margin-top:2px}

/* tegels per categorie */
.silos{background:var(--white);border-bottom:1px solid var(--hair)}
.silos>.wrap{padding-top:62px;padding-bottom:68px}
.silo-kop{font-size:28px;letter-spacing:-.02em;margin:0}
.silo-sub{color:var(--ink-70);font-size:16px;line-height:1.6;margin-top:12px;max-width:44em}
.tegels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;
  list-style:none;margin:34px 0 0;padding:0}
.tegel{min-width:0}
.tegel>a{display:flex;flex-direction:column;height:100%;border-radius:var(--r);
  overflow:hidden;background:var(--paper);border:1px solid var(--hair);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tegel>a:hover{transform:translateY(-3px);border-color:var(--teal);
  box-shadow:0 18px 34px -22px rgba(26,26,26,.45)}
.tegel-beeld{display:block;position:relative;background:var(--sec)}
.tegel-beeld .sfeer{margin:0}
.tegel-shot{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:0}
/* zonder foto: het categorie-icoon op het merkvlak, geen leeg gat */
.tegel:not(.tegel-foto) .tegel-beeld{display:grid;place-items:center;aspect-ratio:4/3;
  background:var(--teal)}
.tegel:not(.tegel-foto) .cat-ic{width:34px;height:34px;color:#fff}
.tegel-in{display:block;padding:18px 20px 20px}
.tegel-kop{display:block;font-family:var(--h);font-weight:500;font-size:17px;
  letter-spacing:-.01em;color:var(--ink)}
.tegel-m{display:block;font-family:var(--m);font-size:12.5px;color:var(--ink-45);
  margin-top:4px;font-variant-numeric:tabular-nums}

@media (max-width:1000px){
  .tegels{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .silos>.wrap{padding-top:32px;padding-bottom:34px}
  .silo-kop{font-size:23px}
  /* op smal een veegrij, zoals in een winkelapp: vijf tegels onder elkaar is
     een halve schermlengte scrollen voordat je bij de tekst bent */
  .tegels{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-right:calc(-1 * max(22px, env(safe-area-inset-right)));padding-right:max(22px, env(safe-area-inset-right));
    -webkit-overflow-scrolling:touch}
  .tegel{flex:0 0 63%;scroll-snap-align:start}
}

/* ── blogindex: filterrij naar de silo's ─────────────────────────────────────
   De verzamelpagina van alle vergelijkingen is alleen bruikbaar als je er ook
   uit kunt. Geen tabs of javascript: gewone links naar de hubs, met het aantal
   erbij, zodat de rij ook vertelt hoe groot elke silo is. */
.blogfilter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 38px;
  padding-bottom:28px;border-bottom:1px solid var(--hair)}
.blogfilter-nu{font-family:var(--m);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-45);margin-right:6px;font-variant-numeric:tabular-nums}
.blogfilter a{display:inline-flex;align-items:baseline;gap:7px;border:1px solid var(--hair);
  border-radius:999px;padding:7px 15px;font-size:14.5px;background:var(--paper);
  transition:border-color .16s ease,background .16s ease}
.blogfilter a:hover{border-color:var(--teal);background:var(--white)}
.blogfilter-n{font-family:var(--m);font-size:12px;color:var(--ink-45);
  font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .blogfilter{gap:8px;margin-bottom:24px;padding-bottom:18px}
  .blogfilter a{padding:6px 13px;font-size:14px}
}

/* ── cookiebanner in de huisstijl ─────────────────────────────────────────────
   CookieYes levert zijn eigen palet mee (blauw, of terracotta na een update) en
   bakt dat in een stylesheet die het bij zijn eigen instellingen genereert. Op
   kookproducten is die banner drie keer teruggevallen naar de plugin-kleuren en
   twee keer naar het Engels. De plugin-instellingen zetten we wel goed (zie
   tools/migraties/cookieyes-huisstijl.php, dan klopt ook de beheerkant), maar de
   zichtbare kleur zetten we hier — een themaregel overleeft een plugin-update en
   een gegenereerde stylesheet niet.

   Alles via tokens, dus elke drager krijgt zijn eigen banner zonder extra werk.
   De banner is het eerste wat een bezoeker ziet; hij hoort bij de site.

   Waarom !important, wat we anders nooit doen: CookieYes zet zijn CSS in een
   <style id="cky-style"> die NA de themastylesheet in de head komt, met exact
   dezelfde specificiteit (.cky-btn-accept tegen .cky-btn-accept). Gemeten op
   31-08-2026: zonder !important wint de plugin op volgorde. Een hogere
   specificiteit verzinnen werkt ook, maar breekt zodra de plugin zijn eigen
   selectors verzwaart; dit is de regel die blijft staan. */
.cky-consent-container .cky-consent-bar{background:var(--white)!important;border-color:var(--hair)!important;box-shadow:0 18px 40px -22px rgba(26,26,26,.45)!important}
.cky-notice .cky-title{color:var(--ink)!important;font-family:var(--h)!important;font-weight:var(--kop-gewicht,700)!important}
.cky-notice-des,.cky-notice-group,.cky-modal,.cky-preference-header .cky-preference-title,
.cky-accordion-header .cky-accordion-btn,.cky-accordion-header-des{color:var(--ink)!important}
.cky-modal{background:var(--white)!important}
/* primaire actie: hetzelfde knopvlak als de rest van de site */
.cky-btn-accept{background:var(--cta)!important;color:var(--op-cta)!important;border-color:var(--cta)!important}
/* weigeren en aanpassen omlijnd, zodat er één voorkeur zichtbaar is en niet drie
   knoppen met hetzelfde gewicht */
.cky-btn-reject,.cky-btn-customize,.cky-btn-preferences{color:var(--teal)!important;background:var(--white)!important;border-color:var(--teal)!important}
.cky-notice-des a.cky-policy,.cky-notice-des button.cky-policy,
.cky-notice-btn-wrapper .cky-btn-do-not-sell,
button.cky-show-desc-btn:not(:hover):not(:active){color:var(--teal)!important}
.cky-accordion-header .cky-always-active{color:var(--teal)!important}
.cky-switch input[type="checkbox"]:checked{background:var(--cta)!important}
.cky-btn-revisit-wrapper{background:var(--teal)!important}
.cky-audit-table{background:var(--sec)!important;border-color:var(--hair)!important}
.cky-preference-center,.cky-preference-header,.cky-footer-wrapper,
.cky-prefrence-btn-wrapper{border-color:var(--hair)!important}
.cky-btn:focus-visible,.cky-accordion-header .cky-accordion-btn:focus-visible,
.cky-preference-header .cky-btn-close:focus-visible,
.cky-switch input[type="checkbox"]:focus-visible{outline-color:var(--accent)!important}

/* ═══════════ magazineonderdelen (03-09-2026) ═══════════
   Verhuisd uit de variant editie naar het generieke thema: dit zijn geen
   ATK-vormen maar betere onderdelen, en elke drager hoort ze te krijgen.
   De hubkop, de lijstrijen, het kaartenraster, de ronde ingangen en de
   zijnavigatie van de verantwoordingspagina's. Alle kleuren uit de tokens.
   ═══════════════════════════════════════════════════════ */

/* ── gedeelde onderdelen ── */
.ebrow{font-family:var(--hn);font-weight:600;font-size:11.5px;letter-spacing:.11em;
       text-transform:uppercase;color:var(--accent);margin:0}
.elees{font-family:var(--h);font-weight:600;font-size:14.5px;color:var(--teal);
       text-decoration:none;border-bottom:2px solid var(--bright);padding-bottom:1px}
.elees:hover{border-color:var(--teal)}

/* ── 1. de kop van de homepage ── */
.emast{background:#fff;border-bottom:1px solid var(--hair)}
.emast .wrap{padding-top:38px;padding-bottom:30px}
.emast h1{font-size:clamp(24px,3vw,32px);line-height:1.18;max-width:26ch;margin:0}
.emast-x{margin:14px 0 0;font-size:16.5px;line-height:1.6;color:var(--ink-70);max-width:66ch}

/* ── 2. het verhaal bovenaan ── */
.elead{background:#fff}
.elead .wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:center;
             padding-top:44px;padding-bottom:52px}
.elead-b{display:block;background:var(--paper);border:1px solid var(--hair);
         aspect-ratio:16/10;overflow:hidden}
.elead-b img{width:100%;height:100%;object-fit:cover;display:block}
.elead-t{display:grid;gap:14px;align-content:center}
.elead-t h2{font-size:clamp(26px,3.8vw,40px);line-height:1.07;margin:0;letter-spacing:-.026em}
.elead-t h2 a{color:inherit;text-decoration:none}
.elead-t h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.elead-x{margin:0;font-size:17px;line-height:1.55;color:var(--ink-70);max-width:44ch}
.elead-m{margin:0;font-size:12.5px;color:var(--ink-45)}
.elead-m b{font-weight:600;color:var(--ink-70)}
.elead-t p:last-child{margin:0}

/* ── 3. ronde categorie-ingangen ── */
.ingang{background:var(--paper);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ingang .wrap{padding-top:36px;padding-bottom:36px}
.ingang-kop{font-family:var(--hn);font-size:14px;font-weight:600;letter-spacing:.08em;
            text-transform:uppercase;color:var(--ink-70);text-align:center;margin:0 0 24px}
.bollen{list-style:none;margin:0;padding:0;display:flex;justify-content:center;
        flex-wrap:wrap;gap:18px clamp(16px,3.4vw,46px)}
.bollen li{margin:0}
.bol{display:grid;gap:11px;justify-items:center;width:126px;text-align:center;text-decoration:none}
.bol-b{width:112px;height:112px;border-radius:50%;overflow:hidden;border:1px solid var(--hair);
       background:#fff;display:grid;place-items:center}
.bol-b img{width:100%;height:100%;object-fit:cover;display:block}
.bol-icoon svg{width:44px;height:44px;color:var(--teal)}
.bol-t strong{font-family:var(--h);font-weight:600;font-size:15px;color:var(--ink);display:block}
.bol-t small{display:block;font-size:12px;color:var(--ink-45);margin-top:2px}
.bol:hover .bol-t strong{text-decoration:underline}

/* ── 4. sectiekop en kaartenraster ── */
.esectie{background:#fff}
.esectie .wrap{padding-top:44px;padding-bottom:12px}
.ekop{display:flex;align-items:baseline;gap:16px;border-bottom:2px solid var(--ink);
      padding-bottom:9px;margin-bottom:24px}
.ekop h2{font-size:clamp(20px,2.4vw,26px);margin:0;letter-spacing:-.02em}
.ekop h2 a{color:inherit;text-decoration:none}
.ekop h2 a:hover{text-decoration:underline}
.ekop>a{margin-left:auto;font-family:var(--h);font-weight:600;font-size:13.5px;
        color:var(--teal);text-decoration:none;white-space:nowrap}
.ekop>a:hover{text-decoration:underline}
.eraster{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px}
.ekaart{margin:0}
.ekaart-b{display:block;background:var(--paper);border:1px solid var(--hair);
          aspect-ratio:4/3;overflow:hidden;margin-bottom:12px}
.ekaart-b img{width:100%;height:100%;object-fit:cover;display:block}
.ekaart-t{display:grid;gap:8px}
.ekaart-t h3{font-size:18px;line-height:1.22;margin:0;letter-spacing:-.015em}
.ekaart-t h3 a{color:inherit;text-decoration:none}
.ekaart:hover h3 a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
.ekaart-x{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-70)}
.ekaart-m{margin:0;font-size:12.5px;color:var(--ink-45)}

/* ── 5. de kop van een categoriepagina ── */
.ehub{background:var(--paper);border-bottom:1px solid var(--hair);text-align:center}
.ehub .wrap{padding-top:26px;padding-bottom:32px}
.ehub h1{font-size:clamp(28px,4.4vw,44px);margin:0;letter-spacing:-.028em;line-height:1.06}
.ehub-x{margin:16px auto 0;max-width:62ch;font-size:16.5px;line-height:1.58;color:var(--ink-70)}
.ehub-x p{margin:0 0 10px}
.ehub-x p:last-child{margin:0}

/* ── 6. lijstrijen op de categoriepagina ── */
.erijen{margin-top:36px;border-top:2px solid var(--ink)}
.erij{display:grid;grid-template-columns:232px 1fr;gap:26px;align-items:start;
      padding:26px 0;border-bottom:1px solid var(--hair);margin:0}
.erij-b{display:block;background:var(--paper);border:1px solid var(--hair);
        aspect-ratio:4/3;overflow:hidden}
.erij-b img{width:100%;height:100%;object-fit:cover;display:block}
.erij-t{display:grid;gap:9px}
.erij-t h2,.erij-t h3{font-size:21px;line-height:1.2;margin:0;letter-spacing:-.02em}
.erij-t h2 a,.erij-t h3 a{color:inherit;text-decoration:none}
.erij:hover h2 a,.erij:hover h3 a{text-decoration:underline;text-decoration-thickness:2px;
                                  text-underline-offset:2px}
.erij-x{margin:0;font-size:15px;line-height:1.55;color:var(--ink-70);max-width:62ch}
.erij-m{margin:0;font-size:12.5px;color:var(--ink-45)}

/* ── over-ons: regel onder de kop en de zijnavigatie ── */
.epaginakop .eover-strap{font-family:var(--h);font-weight:600;color:var(--accent);
        font-size:clamp(17px,2.1vw,22px);line-height:1.3;margin:14px 0 0;max-width:38ch}
.epaginakop .eover-sub{margin:12px 0 0;font-size:16.5px;line-height:1.6;
        color:var(--ink-70);max-width:64ch}
/* Eén kolom, en de navigatie als rij erboven. Geen zijkolom: de opleverpoort
   eist dat de leeskolom links en rechts uitlijnt met de kop, de blokken en de
   voet, en dat haalt geen enkele rail. */
.eover{display:block;padding-top:26px}
.esubnav{display:flex;flex-wrap:wrap;gap:2px 26px;border-bottom:1px solid var(--hair);
         padding-bottom:2px;margin-bottom:30px}
.esubnav a,.esubnav span{font-size:14.5px;padding:9px 0 11px;color:var(--ink-45);
        text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-2px}
.esubnav a:hover{color:var(--ink)}
.esubnav span[aria-current]{border-bottom-color:var(--teal);color:var(--ink);font-weight:600}
.eover-t{min-width:0}

@media (max-width:900px){
  .eraster{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .elead .wrap{grid-template-columns:1fr;gap:22px;padding-top:28px;padding-bottom:34px}
  .esubnav{gap:2px 18px;overflow-x:auto}
  .esubnav a,.esubnav span{white-space:nowrap}
  .erij{grid-template-columns:148px 1fr;gap:18px}
  .erij-t h2,.erij-t h3{font-size:18px}
}
@media (max-width:560px){
  .eraster{grid-template-columns:1fr;gap:28px}
  .erij{grid-template-columns:1fr;gap:14px}
  .bol{width:104px}
  .bol-b{width:92px;height:92px}
  .emast .wrap{padding-top:26px;padding-bottom:22px}
}

/* ── categorie-ingangen als fototegels (03-09-2026) ──
   Drie op een rij, foto 3:2, naam in de kopletter. Vervangt de tekststrook:
   zes cellen tekst met haarlijnen ertussen werd afgeschoten met "niemand gaat
   hier doorklikken", en dat was terecht. */
.silokaarten{background:var(--paper);border-top:1px solid var(--hair);
             border-bottom:1px solid var(--hair)}
.silokaarten>.wrap{padding-top:56px;padding-bottom:62px}
.silokaarten-kop{font-family:var(--hn);font-size:12.5px;font-weight:600;letter-spacing:.14em;
                 text-transform:uppercase;color:var(--ink-45);margin:0 0 28px}
.skrij{list-style:none;margin:0;padding:0;display:grid;
       grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 30px}
.skrij li{margin:0;min-width:0}
.skaart{display:block;text-decoration:none;color:inherit}
.skaart-b{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--sec);
          border-radius:var(--r,2px)}
.skaart-b img{width:100%;height:100%;object-fit:cover;display:block;
              transition:transform .55s ease}
.skaart:hover .skaart-b img{transform:scale(1.045)}
.skaart-icoon{display:grid;place-items:center}
.skaart-icoon svg{width:54px;height:54px;color:var(--teal);opacity:.55}
.skaart-in{display:block;padding-top:15px}
.skaart-in strong{display:block;font-family:var(--h);font-weight:var(--kop-gewicht,700);
                  font-size:26px;line-height:1.1;letter-spacing:-.018em;color:var(--teal)}
.skaart:hover .skaart-in strong{color:var(--accent)}
.skaart-m{display:block;color:var(--ink-45);font-size:14.5px;line-height:1.5;margin-top:8px}
@media (max-width:880px){
  .skrij{grid-template-columns:1fr 1fr;gap:30px 24px}
  .skaart-in strong{font-size:22px}
  .silokaarten>.wrap{padding-top:44px;padding-bottom:48px}
}
@media (max-width:540px){
  .skrij{grid-template-columns:1fr;gap:26px}
}

/* ── de claimstrook heeft lucht nodig ──
   Vier cellen van 13,5px tekst met 28px padding las als een voetnoot. */
.claims .wrap>div{padding:36px 34px 38px;font-size:15px;line-height:1.6}
.claims .wrap>div:first-child{padding-left:0}
.claims .wrap>div:last-child{padding-right:0}
.claims .lbl{font-size:13px;margin-bottom:9px;line-height:1.35}
@media (max-width:880px){
  .claims .wrap{grid-template-columns:1fr 1fr}
  .claims .wrap>div{padding:26px 26px 28px;border-top:1px solid var(--hair)}
  .claims .wrap>div:nth-child(-n+2){border-top:0}
  .claims .wrap>div:nth-child(odd){border-left:0;padding-left:0}
  .claims .wrap>div:nth-child(even){padding-right:0}
}
@media (max-width:540px){
  .claims .wrap{grid-template-columns:1fr}
  .claims .wrap>div{border-left:0;padding:22px 0 24px;border-top:1px solid var(--hair)}
  .claims .wrap>div:first-child{border-top:0}
}

/* ── het welkomblok in het midden in plaats van in een halve kolom ──
   Eén kolom van 34em met wit ernaast ziet er onaf uit. */
.welkom>.wrap>p{max-width:33em;margin-left:auto;margin-right:auto;text-align:center;
                font-size:18px;line-height:1.62}
.welkom>.wrap>p+p{margin-top:20px}
@media (max-width:640px){
  .welkom>.wrap>p{text-align:left;font-size:16.5px}
}

/* ── hub: de answer-first vraag ─────────────────────────────────────────── */
.ehubv{background:var(--sec);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ehubv .wrap{padding:30px 0 32px}
.ehubv h2{font:var(--kopgewicht,600) clamp(19px,2vw,23px)/1.25 var(--h);color:var(--ink);margin:0 0 10px;max-width:34ch}
.ehubv p{font:400 16.5px/1.62 var(--b);color:var(--ink-70);margin:0;max-width:66ch}
@media(max-width:720px){.ehubv .wrap{padding:24px 0 26px}}
/* ═══════════ variant "editie" — de ATK-vorm, 03-09-2026 ═══════════
   Deze variant vervangt alleen front-page.php. De onderdelen die hij
   gebruikt (.emast, .elead, .ingang, .esectie, .ekaart) staan sinds
   03-09-2026 in het generieke thema, want het zijn geen ATK-vormen maar
   gewone onderdelen die elke drager hoort te kunnen gebruiken. Er is dus
   geen variantstijl meer nodig; dit bestand blijft bestaan zodat de reden
   ergens staat.
   ══════════════════════════════════════════════════════════════════ */

/* LEEG — EN DAT IS OPZET.
 *
 * Hier stond van 28-08-2026 een eigen opmaaklaag voor de v4-artikelblokken
 * (tve4-*), bedoeld als "site-skin" bovenop het code-snippet "TVE3 styles".
 * Dat was fout. De snippet is de huisstandaard en die moet op elke CV-site
 * hetzelfde artikel opleveren. Twee lagen over dezelfde klassen geven per
 * declaratie een andere winnaar — de snippet waar hij !important gebruikt, het
 * thema waar het een hogere specificiteit heeft — en op het scherm zie je een
 * mengsel van twee ontwerpen. Dat is niet weg te tunen: elke wijziging in het
 * artikelsjabloon wordt dan op één site deels overschreven.
 *
 * Regel: de opmaak van artikelblokken staat in de snippet en nergens anders.
 * Moet er iets aan de blokken veranderen, dan verandert de snippet, en dan
 * verandert het op alle sites tegelijk. Dat is precies de bedoeling.
 *
 * Wat hier wél mag: niets. Laat dit bestand leeg. Het blijft bestaan omdat
 * bin/stamp-thema.py het inleest en omdat deze uitleg ergens moet staan.
 */