/* Opmaak van Regio Insight.
   Hoort bij het ontwerp van 06-09-2026. Een bestand voor de hele site, zodat
   een kleur op een plek staat en de browser hem maar een keer ophaalt.

   Volgorde van dit bestand:
     1. lettertypen en kleuren
     2. grondslag
     3. de balk met logo en menu
     4. de omslag
     5. het dashboardbeeld
     6. het paneel met de vaste zijkolom
     7. prijzen en vergelijking
     8. stappen, vragen, uitspraak
     9. contact en voettekst
    10. beweging
    11. smalle schermen
*/

@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/fonts/fraunces-var.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/fonts/hanken-var.woff2') format('woff2')}
:root{
  --diep:#0f2a22;      /* de grond */
  --vel:#163a30;       /* het paneel, een tint lichter */
  --dieper:#0a1e18;    /* de uitspraak */
  --papier:#f2eee4; --dof:rgba(242,238,228,.62); --dof2:rgba(242,238,228,.78);
  --lijn:rgba(242,238,228,.14); --lijn2:rgba(242,238,228,.3);
  --goud:#d7b263; --blad:#6faa8a; --kolom:1280px;
  /* een maatstelsel in plaats van losse getallen */
  --r1:8px; --r2:16px; --r3:24px; --r4:40px; --r5:64px; --r6:88px; --r7:120px;
  --zij:4vw;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--diep);color:var(--papier);font-family:'Hanken Grotesk',sans-serif;
  font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;
  text-rendering:optimizeLegibility}
p{text-wrap:pretty}
h1,h2,h3,blockquote{text-wrap:balance}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
[id]{scroll-margin-top:96px}

/* ---------- balk: logo en menu op een regel ---------- */
.balk{position:sticky;top:0;z-index:50;background:rgba(15,42,34,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lijn);transition:box-shadow .3s}
body.gescrold .balk{box-shadow:0 8px 22px -18px #000}
.balk .rij{max-width:var(--kolom);margin:0 auto;padding:14px var(--zij);display:flex;
  align-items:center;gap:30px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.logo-words{display:flex;flex-direction:column;line-height:1}
.logo-line{display:flex;align-items:center}
.lw-regio{font-weight:300;letter-spacing:.28em;font-size:19px;color:var(--papier)}
.lw-dot{width:6px;height:6px;border-radius:50%;background:var(--goud);margin:0 7px 0 5px}
.lw-insight{font-weight:800;letter-spacing:.04em;font-size:19px;color:var(--blad)}
.logo-tag{font-weight:500;letter-spacing:.2em;font-size:8px;color:var(--dof);margin-top:4px;text-transform:uppercase}
.menu{margin-left:auto;display:flex;align-items:center;gap:26px}
.menu a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dof);
  text-decoration:none;white-space:nowrap;padding:4px 0;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s}
.menu a:hover{color:var(--papier);border-bottom-color:var(--goud)}
.menu a.knop{border:1px solid var(--lijn2);border-radius:100px;padding:7px 16px;color:var(--goud)}
.menu a.knop:hover{background:var(--goud);border-color:var(--goud);color:var(--diep)}

/* ---------- korrel ----------
   Een grote vlakke donkere kleur gaat op veel schermen banderen en oogt
   plat. Een laag ruis van drie procent haalt dat weg en geeft de indruk van
   bedrukt papier. Staat vast, beweegt niet mee, vangt geen muis. */
/* Geen mix-blend-mode. Gemeten: die kostte 73 trage beelden op 209 bij het
   scrollen, omdat de hele laag eronder elke keer opnieuw wordt samengesteld.
   Zonder blend zijn dat er 3, gelijk aan helemaal geen korrel. */
.korrel{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
.contact{position:relative;z-index:2}

/* ---------- toetsenbord en selectie ---------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--goud);outline-offset:3px;border-radius:2px}
::selection{background:var(--goud);color:var(--diep)}
html{scrollbar-color:rgba(242,238,228,.22) var(--diep)}
.overslaan{position:absolute;left:var(--zij);top:-100px;z-index:80;background:var(--goud);
  color:var(--diep);padding:10px 18px;border-radius:100px;font-size:14px;text-decoration:none;
  transition:top .2s}
.overslaan:focus{top:12px}

/* ---------- leesvoortgang in de balk ---------- */
.voortgang{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:0 0;
  overflow:hidden}
.voortgang i{display:block;height:100%;width:100%;background:var(--goud);
  transform:scaleX(0);transform-origin:left;will-change:transform}

/* ---------- onderstrepen die schuiven in plaats van aanfloepen ---------- */
.menu a:not(.knop),.tweede,.uitleg a,.prijsvoet a,.rail .meer,.breed figcaption a,
.kiezervoet a,footer .onder a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .38s cubic-bezier(.22,1,.36,1),color .25s,border-color .25s}
.menu a:not(.knop):hover,.tweede:hover,.uitleg a:hover,.prijsvoet a:hover,.rail .meer:hover,
.breed figcaption a:hover,footer .onder a:hover{background-size:100% 1px}
.menu a:not(.knop){border-bottom:0}
.menu a:not(.knop):hover{border-bottom:0}

/* de knop krijgt een pijl die meebeweegt */
.knopgroot{display:inline-flex;align-items:center;gap:10px}
.knopgroot .pijl{display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.knopgroot:hover .pijl{transform:translateX(4px)}

/* ---------- omslag ---------- */
.omslag{max-width:var(--kolom);margin:0 auto;padding:var(--r6) var(--zij) var(--r5)}
.jaar{display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--goud);border-bottom:1px solid var(--lijn);padding-bottom:14px}
.jaar span:last-child{color:var(--dof)}
.kopregel{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:start}
/* 54 en niet 40: de kop begint pas bij de bovenkant van de hoofdletter */
.byline{display:block;text-decoration:none;width:148px;margin-top:54px;flex-shrink:0}
.byline .kader{border:1px solid var(--lijn2);overflow:hidden;line-height:0;
  transition:border-color .3s}
.byline:hover .kader{border-color:var(--goud)}
.byline img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;
  filter:saturate(.9);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .3s}
.byline:hover img{transform:scale(1.03);filter:saturate(1)}
.byline b{display:block;font-weight:500;font-size:13px;margin-top:11px}
.byline span{display:block;font-size:12px;color:var(--dof);line-height:1.45;margin-top:3px}
h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(46px,8.2vw,112px);line-height:.99;
  letter-spacing:-.035em;margin:var(--r4) 0 0;
  /* over de volle breedte sinds 15-09-2026: met kerncijfers rechts onder in de
     hero bleef naast een kop van 13ch rechtsboven een leeg vlak */
  /* optische uitlijning: de schreef van de Z laat het anders inspringen */
  margin-left:-.028em}
h1 .lijn2{display:block;color:var(--blad)}
.samen{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:50px;align-items:end}
.een{font-size:19px;color:var(--dof2);max-width:44ch}
.doen{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:28px}
.knopgroot{background:var(--goud);color:var(--diep);text-decoration:none;font-size:15px;
  padding:14px 28px;border-radius:100px;transition:transform .2s,background .2s;white-space:nowrap}
.knopgroot:hover{transform:translateY(-2px);background:#e6c377}
.tweede{font-size:15px;text-decoration:none;color:var(--dof);border-bottom:1px solid var(--lijn2);
  padding-bottom:3px;white-space:nowrap;transition:color .2s,border-color .2s}
.tweede:hover{color:var(--papier);border-bottom-color:var(--goud)}
.kerncijfers{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--lijn2)}
.kerncijfers div{padding:18px 18px 0 0;border-right:1px solid var(--lijn)}
.kerncijfers div:last-child{border-right:0;padding-right:0}
.kerncijfers div+div{padding-left:18px}
.kerncijfers b{display:block;font-family:'Fraunces',serif;font-weight:300;font-size:40px;
  line-height:1;color:var(--goud)}
.kerncijfers span{display:block;font-size:13px;color:var(--dof);margin-top:8px;line-height:1.5}

/* ---------- het dashboard ----------
   Het beeld is 1200 bij 667. Niet bijsnijden en niet oprekken: op ware
   verhouding binnen dezelfde kolom als de rest, zodat de randen uitlijnen. */
.beeldband{max-width:var(--kolom);margin:0 auto;padding:var(--r5) var(--zij)}
.breed{margin:0}
.breed .lijst{border:1px solid var(--lijn2);background:#0b231c;overflow:hidden;line-height:0}
.breed picture,.byline picture{display:block}
.breed img{width:100%;height:auto;display:block}
.breed figcaption{padding:var(--r2) 0 0;font-size:13px;color:var(--dof);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.breed figcaption span{max-width:74ch}
.breed figcaption a{text-decoration:none;border-bottom:1px solid var(--lijn2);
  padding-bottom:2px;white-space:nowrap}
.breed figcaption a:hover{color:var(--papier);border-bottom-color:var(--goud)}

/* ---------- de showreel op de homepage ---------- */
/* De platen liggen op elkaar in een vak met de verhouding van het rapport, en
   alleen de bovenste is zichtbaar. Zo springt de pagina niet als er gewisseld
   wordt, ook niet voordat de tweede plaat binnen is. */
.showreel .lijst{display:block;position:relative;aspect-ratio:1200/690;text-decoration:none;
  cursor:pointer}
.showreel .plaat{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.showreel .plaat.aan{opacity:1}
.showreel .plaat img{width:100%;height:100%;object-fit:cover}
.showreel-knop{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;
  gap:9px;background:var(--goud);color:var(--diep);font-size:14px;font-weight:600;
  padding:11px 18px;border-radius:6px;line-height:1;
  box-shadow:0 2px 10px rgba(10,30,24,.35);transition:transform .2s}
.showreel .lijst:hover .showreel-knop,.showreel .lijst:focus-visible .showreel-knop{transform:translateY(-2px)}
.showreel .lijst:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
.showreel-keuze{display:flex;gap:8px;align-items:center;flex-shrink:0}
.showreel-keuze button{font:inherit;font-size:12.5px;color:var(--dof);background:0 0;
  border:1px solid var(--lijn2);border-radius:4px;padding:7px 12px;min-height:40px;cursor:pointer;
  transition:color .2s,border-color .2s}
.showreel-keuze button:hover{color:var(--papier);border-color:var(--goud)}
.showreel-keuze button[aria-selected="true"]{color:var(--diep);background:var(--goud);
  border-color:var(--goud);font-weight:600}
@media(max-width:700px){
  /* Het brede rapport op 370 pixels is een grijze vlek: alles wordt 31 procent
     en dan leest geen enkel bedrag meer. Op een telefoon toont de showreel
     daarom de mobiele weergave van de demo zelf, waar alles onder elkaar staat.
     De plaat is 390 bij 560 vastgelegd, dit vak laat de bovenkant zien. */
  .showreel .lijst{aspect-ratio:390/520}
  .showreel .plaat img{object-position:top}
  .showreel-knop{right:10px;bottom:10px;font-size:13px;padding:10px 14px}
  .showreel-keuze{width:100%;flex-wrap:wrap}
}
/* wie beweging liever niet heeft, krijgt geen wissel: de knoppen blijven werken */
@media(prefers-reduced-motion:reduce){
  .showreel .plaat{transition:none}
}

/* ---------- het paneel met de vaste zijkolom ---------- */
.vel{background:var(--vel);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.binnen{max-width:var(--kolom);margin:0 auto;padding:0 var(--zij)}
.blok{display:grid;grid-template-columns:210px 1fr;gap:56px;padding:var(--r5) 0;border-bottom:1px solid var(--lijn)}
.blok:last-child{border-bottom:0}
.rail{position:sticky;top:98px;align-self:start}
.rail .nr{display:block;font-size:12px;letter-spacing:.16em;color:var(--goud);margin-bottom:10px}
.rail h2{font-family:'Fraunces',serif;font-weight:300;font-size:26px;line-height:1.15;letter-spacing:-.02em}
.rail .raillead{font-size:14px;color:var(--dof);margin-top:12px;line-height:1.6}
.rail .meer{display:inline-block;margin-top:14px;font-size:13px;color:var(--dof);
  text-decoration:none;border-bottom:1px solid var(--lijn2);padding-bottom:2px}
.rail .meer:hover{color:var(--papier);border-bottom-color:var(--goud)}

/* sectoren als lopende regels */
.sector{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:baseline;
  padding:19px 0;border-bottom:1px solid var(--lijn);transition:padding-left .25s}
.sector:first-child{border-top:1px solid var(--lijn2)}
.sector:hover{padding-left:9px}
.sector a{font-family:'Fraunces',serif;font-weight:300;font-size:22px;text-decoration:none;
  white-space:nowrap;min-width:9em}
.sector:hover a{color:var(--goud)}
.sector p{font-size:15px;color:var(--dof)}

/* ---------- prijzen als tabel ----------
   Vorm van cnippet-table (cnippet.dev, 21st.dev): een kopregel, haarlijnen
   tussen de rijen en de bedragen rechts onder elkaar. Geen kaarten: dit zijn
   losse diensten met een eigen prijs, geen abonnementen. */
.prijskader{border:1px solid var(--lijn2);background:#112f26}
table.prijzen{width:100%;border-collapse:collapse;table-layout:auto}
table.prijzen th{font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dof);text-align:left;padding:14px 26px;border-bottom:1px solid var(--lijn2)}
table.prijzen th.rechts{text-align:right;padding-right:52px}
table.prijzen td{padding:20px 26px;border-bottom:1px solid var(--lijn);vertical-align:baseline}
table.prijzen tbody tr:last-child td{border-bottom:0}
table.prijzen tbody tr{transition:background .25s}
table.prijzen tbody tr:hover{background:rgba(242,238,228,.04)}
.dienst{font-family:'Fraunces',serif;font-weight:300;font-size:22px;letter-spacing:-.01em;
  text-decoration:none;transition:color .25s;white-space:nowrap}
tr:hover .dienst{color:var(--goud)}
/* alleen in de prijstabel: de vergelijking gebruikt .wat voor de rijkop */
table.prijzen .wat{font-size:14.5px;color:var(--dof);line-height:1.6;
  max-width:46ch;display:block}
td.bedrag{text-align:right;white-space:nowrap}
.vanaf{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dof);margin-bottom:6px}
.euro{font-family:'Fraunces',serif;font-weight:300;font-size:27px;line-height:1;
  color:var(--papier);font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.euro.gratis{color:var(--goud)}
.per{display:block;font-size:12px;letter-spacing:.06em;color:var(--dof);
  margin-top:4px}
td.bedrag{padding-right:52px}
/* het startpunt krijgt een gouden kantlijn */
tr.start{background:rgba(215,178,99,.05)}
tr.start td:first-child{box-shadow:inset 2px 0 0 var(--goud)}
.merk{display:inline-block;margin-left:12px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--goud);border:1px solid rgba(215,178,99,.45);
  border-radius:100px;padding:3px 9px;vertical-align:middle;white-space:nowrap}
.prijsvoet{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:15px 26px;border-top:1px solid var(--lijn2);font-size:13px;color:var(--dof)}
.prijsvoet a{color:var(--goud);text-decoration:none;border-bottom:1px solid var(--lijn2);
  padding-bottom:1px;white-space:nowrap}
.prijsvoet a:hover{border-bottom-color:var(--goud)}

/* ---------- vergelijking ----------
   Zelfde tabelvorm, nu met een kolom per dienst. De eerste kolom blijft staan
   als je op een telefoon zijwaarts schuift. */
.prijzenkolom{min-width:0}
.vergblok{margin-top:44px;min-width:0}
.vergblok > summary{list-style:none;display:flex;justify-content:space-between;
  align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:14px;cursor:pointer}
.vergblok > summary::-webkit-details-marker{display:none}
.vergblok > summary h3{font-family:'Fraunces',serif;font-weight:300;font-size:21px;
  letter-spacing:-.015em;transition:color .25s}
.vergblok > summary:hover h3{color:var(--goud)}
.vergblok > summary p{font-size:13px;color:var(--dof)}
.vergblok > summary .pm{display:none}
.vergelijkkader{border:1px solid var(--lijn2);background:#112f26;overflow-x:auto;
  scrollbar-width:thin;max-width:100%}
/* losse randen en vaste kolommen: met samengevoegde randen tekent Chrome de
   lijn onder een plakkende cel niet door */
table.vergelijk{width:100%;min-width:660px;border-collapse:separate;border-spacing:0;
  table-layout:fixed}
table.vergelijk th,table.vergelijk td{padding:14px 18px;border-bottom:1px solid var(--lijn);
  text-align:center;vertical-align:middle}
table.vergelijk thead th{border-bottom:1px solid var(--lijn2);font-weight:400;
  font-family:'Fraunces',serif;font-size:16px;line-height:1.25;color:var(--papier);
  padding-top:16px;padding-bottom:16px}
table.vergelijk thead th small{display:block;font-family:'Hanken Grotesk',sans-serif;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dof);margin-top:6px;
  font-weight:300}
table.vergelijk th.wat,table.vergelijk td.wat{text-align:left;font-size:14.5px;color:var(--dof);
  background:#112f26;width:34%;font-weight:300}
table.vergelijk th:not(.wat),table.vergelijk td:not(.wat){width:22%}
table.vergelijk thead th.wat{font-family:'Hanken Grotesk',sans-serif;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dof);font-weight:500}
table.vergelijk tbody tr:last-child td,table.vergelijk tbody tr:last-child th{border-bottom:0}
table.vergelijk tbody tr:hover td{background:rgba(242,238,228,.035)}
table.vergelijk tbody tr:hover td.wat{background:#16342b}
table.vergelijk th.aan,table.vergelijk td.aan{background:rgba(215,178,99,.06)}
table.vergelijk thead th.aan{box-shadow:inset 0 2px 0 var(--goud)}
table.vergelijk th{border-bottom:1px solid var(--lijn2)}
.vink{display:inline-block;width:15px;height:9px;border-left:1.5px solid var(--goud);
  border-bottom:1.5px solid var(--goud);transform:rotate(-45deg) translate(1px,-2px)}
.streepje{display:inline-block;width:13px;height:1px;background:rgba(242,238,228,.28)}
.waarde{font-size:13px;color:var(--dof2)}
table.vergelijk tr.prijsrij td{border-top:1px solid var(--lijn2);padding-top:18px;padding-bottom:18px}
table.vergelijk tr.prijsrij .euro{font-size:22px}
table.vergelijk tr.prijsrij .vanaf{display:block;margin-bottom:5px}
.kiesknop{display:inline-block;margin-top:12px;font-size:12.5px;text-decoration:none;
  color:var(--diep);background:var(--goud);border-radius:100px;padding:7px 15px;
  transition:transform .2s,background .2s;white-space:nowrap}
.kiesknop:hover{transform:translateY(-1px);background:#e6c377}
.kiesknop.stil{background:0 0;color:var(--dof);border:1px solid var(--lijn2)}
.kiesknop.stil:hover{color:var(--papier);border-color:var(--goud);background:0 0}

/* stappen met voortgangslijn */
.reis{position:relative;padding-left:34px}
.reis:before{content:"";position:absolute;left:5px;top:9px;bottom:12px;width:1px;background:var(--lijn)}
.reis .vulling{position:absolute;left:5px;top:9px;width:1px;background:var(--goud);height:0;
  transition:height .4s cubic-bezier(.22,1,.36,1)}
.stap{position:relative;padding:0 0 34px}
.stap:last-child{padding-bottom:0}
.stap .bol{position:absolute;left:-34px;top:8px;width:11px;height:11px;border-radius:50%;
  background:var(--vel);border:1px solid var(--lijn2);
  transition:background .3s,border-color .3s,transform .3s}
.stap.actief .bol{background:var(--goud);border-color:var(--goud);transform:scale(1.3)}
.stap .nr{font-size:12px;letter-spacing:.16em;color:var(--dof);transition:color .3s}
.stap.actief .nr{color:var(--goud)}
.stap h3{font-family:'Fraunces',serif;font-weight:300;font-size:21px;margin:5px 0 7px;
  color:var(--dof);transition:color .3s}
.stap.actief h3{color:var(--papier)}
.stap p{font-size:15px;color:var(--dof);max-width:54ch;line-height:1.65}
.stap .tijd{display:inline-block;margin-top:11px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dof);border:1px solid var(--lijn2);padding:3px 11px;border-radius:100px}

/* vragen als plus/min-accordeon */
.vraaglijst{border-top:1px solid var(--lijn2)}
details.vraag{border-bottom:1px solid var(--lijn)}
details.vraag summary{list-style:none;cursor:pointer;display:flex;gap:22px;align-items:center;
  padding:19px 0;transition:padding-left .25s,color .25s}
details.vraag summary h3{font-size:16px;font-weight:500;flex:1;line-height:1.4}
details.vraag summary::-webkit-details-marker{display:none}
details.vraag summary:hover{padding-left:9px;color:var(--goud)}
details.vraag[open] summary{color:var(--goud)}
details.vraag .pm{margin-left:auto;width:13px;height:13px;position:relative;flex-shrink:0}
details.vraag .pm:before,details.vraag .pm:after{content:"";position:absolute;background:var(--dof);
  transition:transform .3s}
details.vraag .pm:before{left:0;top:6px;width:13px;height:1px}
details.vraag .pm:after{left:6px;top:0;width:1px;height:13px}
details.vraag[open] .pm:after{transform:scaleY(0)}
details.vraag p{font-size:15px;color:var(--dof);line-height:1.7;max-width:66ch;padding:0 0 22px}

/* over */
.over{columns:2;column-gap:48px}
.over p{font-size:15.5px;color:var(--dof2);line-height:1.8;margin-bottom:16px;
  break-inside:avoid}

/* ---------- uitspraak met spookcijfer ---------- */
.uitspraak{background:var(--dieper);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.uitspraak .b{max-width:var(--kolom);margin:0 auto;padding:var(--r6) var(--zij);display:grid;
  grid-template-columns:210px 1fr;gap:56px;align-items:start}
.spook:before{content:"\201C"}
.spook{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(96px,12vw,180px);
  line-height:.62;color:rgba(215,178,99,.16);user-select:none}
.uitspraak .b{align-items:start}
/* twee kolommen: links de uitspraak met het aanhalingsteken erboven,
   rechts het portret van degene die het zegt */
.uitspraak .b{grid-template-columns:1fr auto}
.zegt .spook{display:block;height:.32em;overflow:hidden;margin-bottom:var(--r2)}
.zegger{display:block;width:180px;border:1px solid var(--lijn2);
  overflow:hidden;line-height:0;justify-self:end}
.zegger img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  object-position:center 18%;filter:saturate(.9)}
@media(max-width:760px){.zegger{width:130px;justify-self:start}}
blockquote{position:relative}
blockquote{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(25px,3.3vw,42px);
  line-height:1.28;letter-spacing:-.022em;max-width:21ch}
cite{display:block;margin-top:24px;font-style:normal;font-size:13px;color:var(--dof)}

/* ---------- contact: het enige lichte vlak ---------- */
.contact{background:var(--papier);color:#1b2a24;position:relative;z-index:2}
.contact .b{max-width:var(--kolom);margin:0 auto;padding:var(--r6) var(--zij)}
.contactkop{padding-bottom:var(--r3);border-bottom:1px solid rgba(27,42,36,.35)}
.contactkop .nr{display:block;font-size:12px;letter-spacing:.16em;color:#7d6229;
  margin-bottom:10px}
.contactkop h2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(30px,4.2vw,52px);
  letter-spacing:-.025em;line-height:1.05}
.contactintro{font-size:16px;color:#4a564f;max-width:52ch;margin:var(--r3) 0 var(--r4)}
.kaarten{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(27,42,36,.16);
  border:1px solid rgba(27,42,36,.16)}
.kaart{background:var(--papier);padding:26px 22px 24px;text-decoration:none;
  display:flex;flex-direction:column;justify-content:space-between;min-height:132px;
  transition:background .25s}
.kaart:hover{background:#ece6d8}
.kaart b{display:block;font-family:'Fraunces',serif;font-weight:300;font-size:20px;
  margin-bottom:5px;transition:color .25s}
.kaart:hover b{color:#155741}
.kaart span{display:block;font-size:14px;color:#5b6a64}
.kaart .heen{display:block;margin-top:18px;font-size:13px;color:#7d6229;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.kaart:hover .heen{transform:translateX(5px)}
.kaart.hoofd{grid-column:span 4;background:var(--diep);color:var(--papier);
  flex-direction:row;align-items:center;gap:24px;min-height:0;padding:26px 26px}
.kaart.hoofd:hover{background:#14392e}
.kaart.hoofd div{flex:1}
.kaart.hoofd b{color:var(--goud);font-size:26px}
.kaart.hoofd span{color:var(--dof)}
.kaart.hoofd .heen{margin-top:0;font-size:22px;color:var(--goud)}
.beloftes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--r4);margin-top:var(--r5);
  padding-top:var(--r4);border-top:1px solid rgba(27,42,36,.18)}
.beloftes strong{display:block;font-weight:500;font-size:15px;margin-bottom:8px}
.beloftes p{font-size:14px;color:#5b6a64;line-height:1.65}

/* ---------- voettekst ----------
   Links het merk met de gegevens waar iemand echt naar zoekt, rechts drie
   kolommen. Een lijn, dan de kleine letters. Geen dode ruimte ertussen. */
footer{border-top:1px solid var(--lijn)}
.voet{max-width:var(--kolom);margin:0 auto;padding:var(--r5) var(--zij) var(--r4)}
.voetraster{display:grid;grid-template-columns:1.5fr 1fr 1fr .85fr 1.05fr;
  gap:var(--r4) var(--r3)}
.voetmerk .logo{margin-bottom:var(--r2)}
.voetmerk p{font-size:14px;color:var(--dof);line-height:1.7;max-width:32ch;margin-bottom:var(--r2)}
.voetgegevens{display:flex;flex-direction:column;gap:4px}
.voetgegevens a{font-family:'Fraunces',serif;font-weight:300;font-size:19px;color:var(--papier);
  text-decoration:none;width:max-content;
  background-image:linear-gradient(var(--goud),var(--goud));background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px;
  transition:background-size .38s cubic-bezier(.22,1,.36,1),color .25s}
.voetgegevens a:hover{color:var(--goud);background-size:100% 1px}
.voettijd{font-size:12.5px;color:var(--dof);margin-top:10px}
.voetreview{margin-top:14px;font-size:12.5px;line-height:1.5}
.voetreview a{color:var(--goud);text-decoration:none;border-bottom:1px solid rgba(215,178,99,.35);
  padding-bottom:1px;transition:border-color .25s}
.voetreview a:hover{border-color:var(--goud)}
footer h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--goud);
  margin-bottom:var(--r2);font-weight:500}
.voetraster nav{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.voetraster nav a{font-size:14px;color:var(--dof);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px;
  transition:background-size .38s cubic-bezier(.22,1,.36,1),color .25s}
.voetraster nav a:hover{color:var(--papier);background-size:100% 1px}
.onder{max-width:var(--kolom);margin:0 auto;padding:var(--r3) var(--zij) var(--r5);
  border-top:1px solid var(--lijn);font-size:12px;color:var(--dof);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.onder a{color:var(--dof);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px;
  transition:background-size .38s cubic-bezier(.22,1,.36,1),color .25s}
.onder a:hover{color:var(--papier);background-size:100% 1px}
footer .onder a{background-size:100% 1px;
  background-image:linear-gradient(var(--lijn2),var(--lijn2))}
footer .onder a:hover{background-image:linear-gradient(currentColor,currentColor)}

/* ---------- plakkende knoppen onderin ----------
   Vorm van Floating Navbar (21st.dev): een pil die boven de onderrand
   zweeft. Komt pas als de kop weg is en verdwijnt bij het contactblok,
   want daar staat de knop al. */
.plakknop{position:fixed;left:50%;bottom:22px;z-index:60;transform:translate(-50%,140%);
  display:flex;align-items:center;gap:4px;padding:6px;border-radius:100px;
  background:rgba(12,36,29,.86);backdrop-filter:blur(14px);
  border:1px solid rgba(242,238,228,.16);box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s,visibility .35s}
.plakknop.aan{transform:translate(-50%,0);opacity:1;visibility:visible}
.plakknop .prim{background:var(--goud);color:var(--diep);text-decoration:none;font-size:14px;
  padding:11px 22px;border-radius:100px;white-space:nowrap;display:inline-flex;
  align-items:center;gap:9px;transition:background .25s}
.plakknop .prim:hover{background:#e6c377}
.plakknop .prim .pijl{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.plakknop .prim:hover .pijl{transform:translateX(4px)}
.plakknop .sec{color:var(--dof);text-decoration:none;font-size:14px;padding:11px 18px;
  border-radius:100px;white-space:nowrap;transition:color .25s,background .25s}
.plakknop .sec:hover{color:var(--papier);background:rgba(242,238,228,.07)}

/* ---------- alleen voor schermlezers ---------- */
.verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* verschijnen bij het scrollen */
.js .op{opacity:0;transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.js .op.in{opacity:1;transform:none}
.breed img{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.breed:hover img{transform:scale(1.008)}
@media print{
  .js .op{opacity:1!important;transform:none!important;transition:none!important}
  .plakknop,.cookiebalk,.korrel{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .js .op{opacity:1;transform:none;transition:none}
  .plakknop{transition:opacity .01s}
  .byline img{transition:none}
  .byline:hover img{transform:none}
  .voortgang i{transition:none}
  .korrel{display:none}
  .reis .vulling,.stap .bol,.stap h3,.stap .nr,.breed img{transition:none}
  .breed:hover img{transform:none}
}

@media(max-width:960px){
  .balk .rij{flex-wrap:wrap;gap:10px;padding:12px 5vw 0}
  .logo-tag{display:none}
  .lw-regio,.lw-insight{font-size:17px}
  .menu{margin-left:0;width:100%;gap:20px;overflow-x:auto;padding-bottom:10px;
    scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 86%,transparent);
    mask-image:linear-gradient(to right,#000 86%,transparent)}
  .menu::-webkit-scrollbar{display:none}
  .menu a.knop{order:-1;padding:5px 13px}
  [id]{scroll-margin-top:118px}
  .omslag{padding:52px 5vw 44px}
  .samen{grid-template-columns:1fr;gap:28px}
  .over{columns:1}
  .kopregel{grid-template-columns:1fr;gap:20px}
  .byline{width:auto;margin-top:0;display:grid;grid-template-columns:66px 1fr;
    gap:0 14px;align-items:center}
  .byline .kader{grid-row:1/3}
  .byline b{margin-top:0;align-self:end}
  .byline span{align-self:start}
  .kerncijfers{grid-template-columns:1fr}
  .kerncijfers div{border-right:0;padding:14px 0;border-bottom:1px solid var(--lijn)}
  .kerncijfers div+div{padding-left:0}
  .blok,.uitspraak .b,.contactkop{grid-template-columns:1fr;gap:24px}
  .blok{padding:52px 0}
  .rail{position:static}
  .sector{grid-template-columns:1fr;gap:4px}
  .sector a{min-width:0}
  table.prijzen thead{display:none}
  table.prijzen,table.prijzen tbody,table.prijzen tr,table.prijzen td{display:block;width:100%}
  table.prijzen tr{padding:18px;border-bottom:1px solid var(--lijn);position:relative}
  table.prijzen tbody tr:last-child{border-bottom:0}
  table.prijzen td{padding:0;border-bottom:0}
  table.prijzen td+td{margin-top:7px}
  tr.start td:first-child{box-shadow:none}
  tr.start:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--goud)}
  .dienst{font-size:20px;white-space:normal}
  .merk{margin:8px 0 0;display:block;width:max-content}
  td.bedrag{text-align:left}
  .vanaf{display:inline;margin:0 8px 0 0}
  .euro{font-size:23px}
  .prijsvoet{flex-direction:column;gap:10px;padding:14px 18px}
  .vergelijkkader{margin:0;width:auto;max-width:100%}
  /* tussen 700 en 960 past de tabel niet helemaal, daar schuif je zijwaarts
     en blijft de eerste kolom staan. Onder 700 wordt het gestapeld, zie de
     regels verderop. */
  table.vergelijk th.wat,table.vergelijk td.wat{position:sticky;left:0;z-index:1;
    width:38%;font-size:13.5px;padding:12px 14px}
  table.vergelijk th,table.vergelijk td{padding:12px 14px}
  .vergelijkkop{margin-top:34px}

  .uitleg{grid-template-columns:1fr;gap:14px;align-items:start}
  .beeldband{padding:36px 5vw 40px}
  .beloftes,.voetraster{grid-template-columns:1fr;gap:var(--r3)}
  /* de kaarten houden hun haarlijn van 1px: een grotere gap toont de achtergrond als grijze balk */
  .kaarten{grid-template-columns:1fr}
  .kaart.hoofd{grid-column:span 1;flex-direction:row}
  .kaart{min-height:0}
  .kaart .heen{margin-top:12px}
  .voet{padding:var(--r4) 5vw var(--r3)}
  /* 23 pixels hoog was te weinig om te raken */
  .voetraster nav{gap:0}
  .voetraster nav a{padding:9px 0}
  .menu a{padding:9px 0}
  .onder{padding:var(--r3) 5vw calc(var(--r5) + env(safe-area-inset-bottom))}
  .plakknop{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
    transform:translateY(140%);border-radius:100px}
  .plakknop.aan{transform:translateY(0)}
  .plakknop .prim{flex:1;justify-content:center}
  .plakknop .sec{display:none}
}
/* ---------- de vergelijking op een telefoon ----------
   Zijwaarts schuiven werkte niet: je zag de rijnamen plus een dienst en moest
   270 pixels opzij voor de rest. Hier wordt elke rij een blok met het
   onderdeel erboven en de drie diensten eronder. Zelfde tabel, zelfde tekst. */
@media(max-width:700px){
  .vergelijkkader{overflow:visible;margin:0;width:auto;max-width:none;
    border-left:1px solid var(--lijn2);border-right:1px solid var(--lijn2)}
  table.vergelijk{min-width:0;table-layout:auto;display:block}
  table.vergelijk thead{display:none}
  table.vergelijk tbody{display:block}
  table.vergelijk tr{display:block;padding:16px 18px;border-bottom:1px solid var(--lijn)}
  table.vergelijk tbody tr:last-child{border-bottom:0}
  table.vergelijk tbody tr:hover td{background:0 0}
  table.vergelijk th.wat{display:block;width:auto;position:static;background:0 0;
    padding:0 0 12px;font-size:15px;color:var(--papier);border-bottom:0;line-height:1.45}
  /* de 22 procent uit de brede weergave wint anders van width:auto */
  table.vergelijk td:not(.wat){display:flex;align-items:center;justify-content:space-between;
    gap:18px;width:100%;padding:9px 0;border-bottom:1px dotted rgba(242,238,228,.1);
    text-align:right}
  table.vergelijk tr td:last-child{border-bottom:0}
  table.vergelijk td:before{content:attr(data-dienst);font-size:13.5px;color:var(--dof);
    text-align:left;letter-spacing:0;text-transform:none;white-space:nowrap;flex:1 1 auto}
  table.vergelijk td .waarde{white-space:nowrap}
  table.vergelijk td.aan{background:0 0}
  table.vergelijk td.aan:before{color:var(--goud)}
  /* de prijsregel onderaan wordt drie regels met een knop erachter */
  table.vergelijk tr.prijsrij{background:rgba(215,178,99,.05)}
  table.vergelijk tr.prijsrij th.wat{font-family:'Fraunces',serif;font-weight:300;font-size:19px}
  table.vergelijk tr.prijsrij td:not(.wat){padding:12px 0}
  table.vergelijk tr.prijsrij .vanaf{display:none}
  table.vergelijk tr.prijsrij .euro{font-size:21px;margin-left:auto}
  table.vergelijk tr.prijsrij br{display:none}
  .kiesknop{margin-top:0;margin-left:16px;font-size:12px;padding:7px 14px}
  /* de vergelijking staat dicht: de prijstabel erboven geeft het antwoord al */
  .vergblok{margin-top:34px;border-top:1px solid var(--lijn);padding-top:18px}
  .vergblok > summary{margin-bottom:0;align-items:center;flex-wrap:nowrap;padding:4px 0}
  .vergblok > summary h3{font-size:18px;flex:1}
  .vergblok > summary p{display:none}
  .vergblok > summary .pm{display:block;width:13px;height:13px;position:relative;flex-shrink:0}
  .vergblok > summary .pm:before,.vergblok > summary .pm:after{content:"";position:absolute;
    background:var(--dof);transition:transform .3s}
  .vergblok > summary .pm:before{left:0;top:6px;width:13px;height:1px}
  .vergblok > summary .pm:after{left:6px;top:0;width:1px;height:13px}
  .vergblok[open] > summary .pm:after{transform:scaleY(0)}
  .vergblok[open] > summary{margin-bottom:14px}
  .vergblok[open] > summary h3{color:var(--goud)}
  /* wat voor alle drie geldt, is een regel in plaats van drie */
  table.vergelijk tr.allen td[data-samen]:before{content:attr(data-samen);color:var(--papier)}
  table.vergelijk tr.allen td:not([data-samen]){display:none}
  table.vergelijk tr.allen td[data-samen]{border-bottom:0}
}

/* ---------- cookiemelding ----------
   Zelfde werking als op de site: er wordt niets geladen tot iemand
   accepteert. De keuze staat in localStorage onder ri-consent. */
.cookiebalk{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(10,30,24,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--lijn2);transform:translateY(110%);
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
.cookiebalk.toon{transform:translateY(0)}
.cookiebalk .b{max-width:var(--kolom);margin:0 auto;padding:20px var(--zij);
  display:flex;align-items:center;gap:var(--r4);flex-wrap:wrap}
.cookiebalk .woord{flex:1 1 30ch;min-width:0}
.cookiebalk strong{display:block;font-family:'Fraunces',serif;font-weight:300;
  font-size:18px;margin-bottom:5px}
.cookiebalk p{font-size:13.5px;color:var(--dof);line-height:1.6;max-width:78ch}
.cookiebalk p a{color:var(--goud);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px;
  transition:background-size .38s cubic-bezier(.22,1,.36,1)}
.cookiebalk p a:hover{background-size:100% 1px}
.cookiebalk .keuze{display:flex;gap:10px;flex-shrink:0}
.cookiebalk button{font:inherit;font-size:14px;cursor:pointer;padding:11px 20px;
  border-radius:100px;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.cookiebalk .stil{background:0 0;color:var(--dof);border:1px solid var(--lijn2)}
.cookiebalk .stil:hover{color:var(--papier);border-color:var(--goud)}
.cookiebalk .ja{background:var(--goud);color:var(--diep);border:1px solid var(--goud)}
.cookiebalk .ja:hover{background:#e6c377}
/* de plakknop wijkt zolang de melding staat */
body.cookievraag .plakknop{bottom:calc(22px + 96px)}
@media(max-width:700px){
  .cookiebalk .b{padding:16px 5vw calc(16px + env(safe-area-inset-bottom));gap:14px}
  .cookiebalk .keuze{width:100%}
  .cookiebalk button{flex:1}
  body.cookievraag .plakknop{display:none}
}

/* ==================================================================
   Onderliggende pagina's
   De voorpagina heeft eigen blokken. Hieronder staat wat de dienst-,
   sector-, regio- en blogpagina's nodig hebben.
   ================================================================== */

/* kruimelpad, alleen op onderliggende pagina's */
.kruimels{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:var(--r3);
  font-size:12.5px;color:var(--dof)}
.kruimels a{text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px;
  transition:background-size .38s cubic-bezier(.22,1,.36,1),color .25s}
.kruimels a:hover{color:var(--papier);background-size:100% 1px}
.kruimels a:after{content:" /";color:var(--lijn2);margin-left:8px}
.kruimels span{color:var(--dof2)}

/* een rij punten: kopje met een regel eronder, gescheiden door haarlijnen */
.punten{border-top:1px solid var(--lijn2)}
.punt{display:grid;grid-template-columns:minmax(11em,.42fr) 1fr;gap:24px;align-items:baseline;
  padding:19px 0;border-bottom:1px solid var(--lijn);transition:padding-left .25s}
.punt:hover{padding-left:9px}
.punt b{font-family:'Fraunces',serif;font-weight:300;font-size:20px;letter-spacing:-.01em;
  line-height:1.3}
.punt p{font-size:15px;color:var(--dof);line-height:1.65}
/* een link in de uitleg van een punt: goud met een streep, zoals in lopende tekst */
.punt p a{color:var(--goud);text-decoration:none;border-bottom:1px solid currentColor}

/* lopende tekst binnen een blok */
.lopend p{font-size:15.5px;color:var(--dof2);line-height:1.8;margin-bottom:16px;max-width:64ch}
.lopend p:last-child{margin-bottom:0}
.lopend a{color:var(--goud);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px;
  transition:background-size .38s cubic-bezier(.22,1,.36,1)}
.lopend a:hover{background-size:100% 1px}
.lopend ul{list-style:none;margin:0 0 16px;max-width:64ch}
.lopend li{font-size:15.5px;color:var(--dof2);line-height:1.7;padding:7px 0 7px 22px;
  position:relative;border-bottom:1px solid var(--lijn)}
.lopend li:before{content:"";position:absolute;left:0;top:16px;width:9px;height:1px;
  background:var(--goud)}

/* twee kolommen tegenover elkaar: zonder en met */
.tegenover{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--lijn);
  border:1px solid var(--lijn2)}
.tegenover > div{background:#112f26;padding:24px 26px}
/* een dichte grond: de doorschijnende versie liet de lijnkleur van de container
   doorschemeren, grijsgroen met 3,7:1 contrast op de lijsttekst */
.tegenover > div:last-child{background:linear-gradient(rgba(215,178,99,.05),rgba(215,178,99,.05)),#112f26}
.tegenover h3{font-family:'Fraunces',serif;font-weight:300;font-size:19px;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--lijn)}
.tegenover > div:last-child h3{color:var(--goud)}
.tegenover ul{list-style:none}
.tegenover li{font-size:14.5px;color:var(--dof);line-height:1.6;padding:9px 0 9px 20px;
  position:relative}
.tegenover li:before{content:"";position:absolute;left:0;top:17px;width:8px;height:1px;
  background:var(--lijn2)}
.tegenover > div:last-child li:before{background:var(--goud)}

/* blogartikel: een leeskolom in plaats van het raster */
.artikel{max-width:var(--kolom);margin:0 auto;padding:var(--r5) var(--zij) var(--r6);
  display:grid;grid-template-columns:210px minmax(0,1fr);gap:56px;align-items:start}
.artikelzij{position:sticky;top:98px;align-self:start;font-size:13px;color:var(--dof)}
.artikelzij .datum{display:block;color:var(--goud);letter-spacing:.14em;text-transform:uppercase;
  font-size:11px;margin-bottom:10px}
.artikelzij p{line-height:1.6;margin-bottom:12px}
.artikeltekst{max-width:68ch}
.artikeltekst h2{font-family:'Fraunces',serif;font-weight:300;font-size:26px;letter-spacing:-.02em;
  line-height:1.2;margin:var(--r5) 0 var(--r2);padding-top:var(--r3);
  border-top:1px solid var(--lijn)}
.artikeltekst h2:first-child{margin-top:0;padding-top:0;border-top:0}
.artikeltekst h3{font-size:17px;font-weight:500;margin:var(--r4) 0 8px}
.artikeltekst p{font-size:16.5px;color:var(--dof2);line-height:1.8;margin-bottom:18px}
.artikeltekst a{color:var(--goud);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px;
  transition:background-size .38s cubic-bezier(.22,1,.36,1)}
.artikeltekst a:hover{background-size:100% 1px}
.artikeltekst ul,.artikeltekst ol{list-style:none;margin:0 0 18px}
.artikeltekst li{font-size:16.5px;color:var(--dof2);line-height:1.75;padding:8px 0 8px 24px;
  position:relative;border-bottom:1px solid var(--lijn)}
.artikeltekst li:before{content:"";position:absolute;left:0;top:18px;width:10px;height:1px;
  background:var(--goud)}
.artikeltekst blockquote{font-family:'Fraunces',serif;font-weight:300;font-size:23px;
  line-height:1.4;color:var(--papier);margin:var(--r4) 0;padding-left:24px;
  border-left:2px solid var(--goud);max-width:34ch}
.artikeltekst table{width:100%;border-collapse:separate;border-spacing:0;margin-bottom:20px;
  border:1px solid var(--lijn2);background:#112f26}
.artikeltekst th,.artikeltekst td{padding:12px 16px;border-bottom:1px solid var(--lijn);
  text-align:left;font-size:15px}
.artikeltekst th{color:var(--dof);font-weight:500;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;border-bottom:1px solid var(--lijn2)}
.artikeltekst tr:last-child td{border-bottom:0}
.uitgelicht{background:rgba(215,178,99,.06);border-left:2px solid var(--goud);
  padding:20px 24px;margin:var(--r4) 0}
.uitgelicht p{margin-bottom:0}

@media(max-width:960px){
  .punt{grid-template-columns:1fr;gap:5px}
  .tegenover{grid-template-columns:1fr}
  .artikel{grid-template-columns:1fr;gap:var(--r3);padding:var(--r4) 5vw var(--r5)}
  .artikelzij{position:static;display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
  .artikelzij .datum{margin-bottom:0}
  .artikelzij p{margin-bottom:0}
  .artikeltekst h2{font-size:22px}
  .artikeltekst p,.artikeltekst li{font-size:16px}
}

/* beelden binnen lopende tekst en artikelen */
.lopend img,.artikeltekst img{width:100%;height:auto;border:1px solid var(--lijn2);
  margin:var(--r3) 0;background:#0b231c}
.lopend figure,.artikeltekst figure{margin:var(--r3) 0}
.lopend figcaption,.artikeltekst figcaption{font-size:13px;color:var(--dof);margin-top:10px}
.lopend h2,.lopend h3{font-family:'Fraunces',serif;font-weight:300;font-size:20px;letter-spacing:-.015em;
  margin:var(--r3) 0 10px;line-height:1.3}
.lopend h2:first-child,.lopend h3:first-child{margin-top:0}
.lopend table{width:100%;border-collapse:separate;border-spacing:0;margin:var(--r3) 0;
  border:1px solid var(--lijn2);background:#112f26;font-size:14px}
.lopend th,.lopend td{padding:11px 15px;border-bottom:1px solid var(--lijn);text-align:left;
  vertical-align:top;color:var(--dof)}
.lopend th{color:var(--papier);font-weight:500;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;border-bottom:1px solid var(--lijn2)}
.lopend tr:last-child td{border-bottom:0}
.lopend strong{color:var(--papier);font-weight:500}

/* het blok waar de quiz en de planner in staan */
.werkblok{max-width:var(--kolom);margin:0 auto;padding:0 var(--zij) var(--r6)}
.werkblok .quiz-wrap,.werkblok .plan-wrap{padding:0;margin:0}

/* ---------- artikelkaarten ----------
   Een raster in plaats van een stapel. Het beeld boven, daaronder de datum,
   de kop en een regel. De hele kaart is aanklikbaar. */
.kaartrij{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1px}
/* de lijn zit om de kaart zelf, zodat een halflege laatste rij geen grijs vlak laat zien */
.artikelkaart{background:#112f26;text-decoration:none;display:flex;flex-direction:column;
  box-shadow:0 0 0 1px var(--lijn2);transition:background .25s}
.artikelkaart:hover{background:#16342b}
.artikelkaart .beeld{display:block;overflow:hidden;aspect-ratio:16/10}
.artikelkaart .beeld img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.artikelkaart:hover .beeld img{transform:scale(1.04)}
.artikelkaart .inhoud{display:block;padding:var(--r3);position:relative}
.artikelkaart .wanneer{display:block;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--goud);margin-bottom:10px}
.artikelkaart h2,.artikelkaart h3{font-family:"Fraunces","Fraunces val",Georgia,serif;font-weight:300;
  font-size:20px;line-height:1.25;color:var(--papier);margin:0 0 10px}
.artikelkaart p{font-size:14px;color:var(--dof);line-height:1.6;margin:0}
.artikelkaart .heen{position:absolute;right:var(--r3);bottom:var(--r3);color:var(--goud);
  opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.artikelkaart:hover .heen{opacity:1;transform:none}

/* een blok dat de zijkolom niet nodig heeft, zoals een kaartenraster */
.blok.breeduit{grid-template-columns:1fr;gap:var(--r3)}
.blok.breeduit .rail{position:static;display:flex;align-items:baseline;gap:18px}
.blok.breeduit .rail h2{font-size:22px}
.blok.breeduit .rail .raillead{margin:0 0 0 auto;max-width:44ch;text-align:right}
@media(max-width:960px){
  .blok.breeduit .rail{flex-direction:column;gap:6px}
  .blok.breeduit .rail .raillead{margin:0;text-align:left}
}

/* ---------- inhoudsopgave in de zijkolom ----------
   Voor lange stukken zoals de voorwaarden en de privacyverklaring. */
.inhoudsopgave{display:flex;flex-direction:column;gap:2px;margin-top:var(--r2);
  border-top:1px solid var(--lijn);padding-top:var(--r2)}
.inhoudsopgave b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dof);font-weight:400;padding-bottom:8px}
.inhoudsopgave a{font-size:12.5px;color:var(--dof);text-decoration:none;line-height:1.4;
  padding:6px 0;border-bottom:1px solid var(--lijn);transition:color .25s,padding-left .25s}
.inhoudsopgave a:last-child{border-bottom:0}
.inhoudsopgave a:hover{color:var(--goud);padding-left:5px}
@media(max-width:960px){
  .inhoudsopgave{flex-direction:row;flex-wrap:wrap;gap:0 16px;border-top:0;padding-top:0}
  .inhoudsopgave a{border-bottom:0;padding:4px 0}
}

/* ---------- profielkaart, de pagina over Tim ----------
   De bron heeft een fotokolom naast het verhaal. Zonder deze regels
   belandde de foto op ware grootte midden in de lopende tekst. */
.profielrij{display:grid;grid-template-columns:300px 1fr;gap:var(--r4);align-items:start}
.profiel{position:sticky;top:110px;display:flex;flex-direction:column;gap:var(--r2)}
.profiel .portret{width:100%;height:auto;display:block;border-radius:3px;
  border:1px solid var(--lijn);filter:saturate(.9)}
.profiel .keurmerk{display:flex;flex-direction:column;gap:2px;margin:0;
  font-size:13px;color:var(--dof);line-height:1.4}
.profiel .keurmerk strong{color:var(--papier);font-weight:500;font-size:14px}
.feiten{margin:0;display:flex;flex-direction:column;gap:0}
.feiten>div{padding:11px 0;border-top:1px solid var(--lijn)}
.feiten dt{font-family:"Fraunces","Fraunces val",Georgia,serif;font-weight:300;
  font-size:17px;color:var(--papier)}
.feiten dd{margin:2px 0 0;font-size:13px;color:var(--dof);line-height:1.45}
.feiten a{color:inherit;text-decoration:none;border-bottom:1px solid var(--goud)}
.profiel .heenlink{font-size:13.5px;color:var(--goud);text-decoration:none;
  border-top:1px solid var(--lijn);padding-top:var(--r2)}
.profiel .heenlink:hover{text-decoration:underline}
@media(max-width:860px){
  .profielrij{grid-template-columns:1fr;gap:var(--r3)}
  .profiel{position:static;max-width:340px}
}

/* ---------- dienstenkaarten met een vanafprijs ---------- */
.dienstrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.dienstkaart{position:relative;display:block;padding:var(--r3) var(--r3) calc(var(--r3) + 14px);
  background:var(--vel);text-decoration:none;transition:background .3s}
.dienstkaart:hover{background:var(--diep)}
.dienstkaart h3{margin:0;font-family:"Fraunces","Fraunces val",Georgia,serif;font-weight:300;
  font-size:20px;color:var(--papier);line-height:1.25}
.dienstkaart .vanaf{display:block;margin:6px 0 12px;font-size:13px;color:var(--goud);
  letter-spacing:.04em}
.dienstkaart p{margin:0;font-size:14px;color:var(--dof);line-height:1.6}
.dienstkaart .heen{position:absolute;right:var(--r3);bottom:calc(var(--r3) - 6px);
  color:var(--goud);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.dienstkaart:hover .heen{opacity:1;transform:none}
@media(max-width:560px){.dienstrij{grid-template-columns:1fr}}
/* vier kaarten: twee bij twee, anders blijft er naast de vierde een leeg vak */
@media(min-width:561px){.dienstrij:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}

/* een begrippenlijst in de lopende tekst, zoals de licentieprijzen */
.lopend dl{display:grid;grid-template-columns:auto 1fr;gap:0;margin:var(--r3) 0;
  border-top:1px solid var(--lijn)}
.lopend dt{padding:11px 20px 11px 0;border-bottom:1px solid var(--lijn);
  font-family:"Fraunces","Fraunces val",Georgia,serif;font-weight:300;font-size:16.5px;
  color:var(--papier);white-space:nowrap}
.lopend dd{margin:0;padding:12px 0;border-bottom:1px solid var(--lijn);
  font-size:15px;color:var(--dof2);line-height:1.6}
@media(max-width:560px){
  .lopend dl{grid-template-columns:1fr}
  .lopend dt{padding-bottom:0;border-bottom:0}
  .lopend dd{padding-top:2px}
}

/* ---------- brede tabellen op een telefoon ----------
   Drie kolommen met hele zinnen passen niet op 390 pixels. Onder de 700
   valt de tabel uit elkaar in blokken, met de kolomnaam boven elke cel. */
@media(max-width:700px){
  .lopend table,.lopend tbody,.lopend tr,.lopend td,
  .artikeltekst table,.artikeltekst tbody,.artikeltekst tr,.artikeltekst td{display:block;width:100%}
  .lopend thead,.artikeltekst thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .lopend table,.artikeltekst table{border:0;background:none;margin:var(--r3) 0}
  .lopend tr,.artikeltekst tr{border:1px solid var(--lijn2);background:#112f26;
    margin-bottom:12px;padding:4px 0}
  .lopend td,.artikeltekst td{border-bottom:1px solid var(--lijn);padding:10px 15px}
  .lopend tr td:last-child,.artikeltekst tr td:last-child{border-bottom:0}
  .lopend td:before,.artikeltekst td:before{content:attr(data-kop);display:block;
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--papier);
    margin-bottom:4px}
  .lopend td[data-kop=""]:before,.artikeltekst td[data-kop=""]:before{display:none}
}

/* wanneer een pagina voor het laatst is bijgewerkt. Staat er voor de lezer,
   en voor een AI-antwoord dat liever verse tekst aanhaalt. */
.bijgewerkt{max-width:var(--kolom);margin:0 auto;padding:0 var(--zij) var(--r4);
  font-size:12px;color:var(--dof);text-align:right}
@media(max-width:960px){.bijgewerkt{padding:0 5vw var(--r3);text-align:left}}
/* binnen .binnen zit de zijmarge al op de omhullende; niet dubbel inspringen */
.binnen .bijgewerkt{padding-left:0;padding-right:0}

/* een figuur binnen een blok, in plaats van over de volle breedte */
.breed.inblok{margin-top:var(--r4)}
.breed.inblok figcaption{font-size:12.5px}

/* kerncijfers binnen een blok, en de bron eronder */
.kerncijfers.regiorij{margin-bottom:var(--r3);border-top:0;
  border-bottom:1px solid var(--lijn2);padding-bottom:var(--r2)}
.kerncijfers.regiorij b{font-size:32px}
/* in lopende tekst: ruimte naar de alinea eronder, anders plakt die aan de labels */
.lopend .kerncijfers{margin-bottom:var(--r3)}
/* een lijst met punten direct na lopende tekst plakt anders tegen de laatste regel */
.lopend + .punten{margin-top:var(--r3)}
.lopend + .tegenover{margin-top:var(--r3)}
/* in de smalle leeskolom van een artikel passen drie kaarten naast elkaar */
.artikeltekst .dienstrij{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* knoppen in lopende tekst: de linkregel van .lopend en .artikeltekst weegt
   zwaarder dan .knopgroot en maakte de tekst goud op een gouden knop */
.lopend a.knopgroot,.artikeltekst a.knopgroot{color:var(--diep);background-image:none}
.lopend a.tweede,.artikeltekst a.tweede{color:var(--dof);background-image:none}
.lopend a.tweede:hover,.artikeltekst a.tweede:hover{color:var(--papier)}
/* tussenruimte tussen een inleiding en de stappen eronder */
.lopend + .reis{margin-top:var(--r3)}
.lopend p.bron,.bron{font-size:12px;color:var(--dof);margin-top:var(--r3);max-width:none}
@media(max-width:960px){.kerncijfers.regiorij b{font-size:28px}
  /* de rij heeft zelf al een onderlijn; de laatste cel niet nog een */
  .kerncijfers.regiorij div:last-child{border-bottom:0}}

/* ---------- wat een dienst per sector oplevert ----------
   In de bron staan hier drie kaartjes met een gekochte foto erboven. Die
   foto's laten niets zien over het werk en werden bij het omzetten ook nog
   eens paginabreed. Alleen de tekst dus, in kaarten naast elkaar. */
.sectorrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--lijn);border:1px solid var(--lijn2)}
.sectorkaart{background:#112f26;padding:var(--r3)}
.sectorkaart h3{margin:0 0 8px;font-family:"Fraunces","Fraunces val",Georgia,serif;
  font-weight:300;font-size:19px;color:var(--papier);line-height:1.25}
.sectorkaart p{margin:0 0 14px;font-size:14px;color:var(--dof2);line-height:1.6}
.sectorkaart ul{list-style:none;margin:0;padding:0}
.sectorkaart li{position:relative;padding:6px 0 6px 18px;font-size:13.5px;
  color:var(--dof);line-height:1.5;border-top:1px solid var(--lijn)}
.sectorkaart li:before{content:"";position:absolute;left:0;top:15px;width:8px;
  height:1px;background:var(--goud)}
@media(max-width:560px){.sectorrij{grid-template-columns:1fr}}

/* ---------- het nagemaakte dashboard op een sectorpagina ----------
   Een lichte tekening op de donkere grond, in dezelfde omlijsting als een
   echte schermafdruk. */
.demolijst{border:1px solid var(--lijn2);background:#0b231c;overflow:hidden;
  line-height:0;margin-top:var(--r3)}
.demolijst svg{width:100%;height:auto;display:block}
.demo-intro{font-size:15.5px;color:var(--dof2);line-height:1.8;max-width:64ch}

/* ---------- dashboard dat per sector wisselt ---------- */
.dashboardwissel{margin-top:var(--r3)}
.dw-keuze{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--r2)}
.dw-knop{font:inherit;font-size:13px;color:var(--dof);background:0 0;cursor:pointer;
  border:1px solid var(--lijn2);border-radius:100px;padding:7px 15px;
  transition:color .25s,border-color .25s,background .25s}
.dw-knop:hover{color:var(--papier);border-color:var(--goud)}
.dw-knop.aan{background:var(--goud);border-color:var(--goud);color:var(--diep)}
.dw-lijst{border:1px solid var(--lijn2);background:#0b231c;overflow:hidden;line-height:0}
.dw-plaat svg{width:100%;height:auto;display:block}

/* ---------- fragmenten uit een voorbeeldrapport ---------- */
.rapportvoorbeeld{border:1px solid var(--lijn2);background:#112f26;margin-top:var(--r3)}
.rv-kop{display:flex;justify-content:space-between;align-items:baseline;
  padding:14px var(--r3);border-bottom:1px solid var(--lijn);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dof)}
.rv-kop b{color:var(--goud);font-weight:500}
.rv-score{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--r4);
  padding:var(--r3);align-items:center}
.rv-cijfer b{display:block;font-family:'Fraunces',serif;font-weight:300;font-size:56px;
  line-height:1;color:var(--goud)}
.rv-cijfer span{display:block;font-size:12px;color:var(--dof);margin-top:8px;max-width:18ch}
.rv-themas{margin:0;display:flex;flex-direction:column;gap:9px;max-width:540px}
.rv-themas>div{display:grid;grid-template-columns:1fr 120px auto;gap:14px;align-items:center}
.rv-themas dt{font-size:13.5px;color:var(--dof2)}
.rv-themas dd{margin:0;display:contents}
.rv-themas i{display:block;height:3px;background:var(--lijn2);position:relative}
.rv-themas i:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);
  background:var(--blad)}
.rv-themas dd span{font-size:12.5px;color:var(--dof);font-variant-numeric:tabular-nums}
.rv-wins,.rv-kpi{padding:var(--r3);border-top:1px solid var(--lijn)}
.rv-label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--goud);margin-bottom:10px}
.rv-wins p,.rv-kpi p{margin:0;font-size:15px;color:var(--dof2);line-height:1.7;max-width:64ch}
.rv-kpi b{color:var(--papier);font-weight:500}
.rv-kpi em{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blad);margin-left:8px}
@media(max-width:700px){
  .rv-score{grid-template-columns:1fr;gap:var(--r3);padding:var(--r2)}
  .rv-themas>div{grid-template-columns:1fr auto;gap:4px 10px}
  .rv-themas dt{grid-column:1/-1}
  .rv-themas i{grid-column:1}
  .rv-cijfer b{font-size:44px}
  .rv-cijfer span{max-width:none}
  .rv-wins,.rv-kpi,.rv-kop{padding-left:var(--r2);padding-right:var(--r2)}
}

/* ---------- de prijsstaffel op een dienstpagina ----------
   In de bron staan hier drie kaartjes naast elkaar. Het omzetten maakte er
   een regel tekst van, met de naam tegen het bedrag aan geplakt. */
.staffel{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;background:var(--lijn);border:1px solid var(--lijn2);
  margin:var(--r3) 0}
.trap{background:#112f26;padding:var(--r3)}
.trap-naam{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--goud);margin-bottom:12px}
.trap-prijs{display:block;font-family:"Fraunces","Fraunces val",Georgia,serif;
  font-weight:300;font-size:34px;color:var(--papier);line-height:1.1}
.trap p{margin:12px 0 0;font-size:14px;color:var(--dof2);line-height:1.6}
@media(max-width:560px){.staffel{grid-template-columns:1fr}}

/* een tekstblok dat direct op een ander blok volgt, leest anders als een
   alinea die erbij hoort */
.lopend.lucht{margin-top:var(--r3)}

/* vier artikelen op de voorpagina naast elkaar. Zonder vaste kolommen maakt
   auto-fill er drie en valt de vierde eronder. */
.kaartrij.vier{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.kaartrij.vier{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.kaartrij.vier{grid-template-columns:1fr}}

/* het scherm van Sturo naast de tekst. Een telefoon is hoog, dus een smalle
   kolom ernaast; smaller dan 340 wordt de tekst erin onleesbaar. */
.sturorij{display:grid;grid-template-columns:1fr 340px;gap:var(--r4);align-items:start}
.sturoscherm .lijst{background:var(--papier)}
@media(max-width:1200px){.sturorij{grid-template-columns:1fr}
  .sturoscherm{max-width:340px}}