/* ==========================================================================
   DECLAER — kennisbankartikel
   Overgezet uit Declaer-artikel-wanneer-verplicht.html.
   Maatvoering niet aanpassen zonder reden: leeskolom 66 tekens, 18px op
   desktop, regelafstand 1,72. Dat komt uit leesonderzoek, niet uit smaak.
   ========================================================================== */

.dlang a,.dlang .cur,.dlang .soon{padding:4px 5px;border-radius:5px;color:var(--faint);transition:color .14s ease,background .14s ease;}
/* ===================== EINDE UNIVERSELE HEADER ===================== */

  /* ================================================================
     ARTIKELTEMPLATE
     Maatvoering komt uit leesonderzoek, niet uit smaak:
     regellengte 66 tekens (optimaal 50 tot 75, WCAG maximum 80),
     body 18px op desktop en 17px op mobiel (minimum 16),
     regelafstand 1.72 want bij langere regels is 1.6 tot 1.7 nodig.
     Mensen lezen hoogstens een kwart van een pagina en scannen de rest,
     dus het antwoord staat boven en elke kop moet los te lezen zijn.
     ================================================================ */

  /* ---------- kop van het artikel ---------- */
  .ahead{position:relative;background:linear-gradient(168deg,color-mix(in srgb,var(--accent) 4%,var(--paper-2)) 0%,color-mix(in srgb,var(--accent) 8%,var(--paper-2)) 52%,color-mix(in srgb,var(--accent) 12%,var(--paper-2)) 100%);
    border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
    padding-top:clamp(36px,4.4vw,60px);padding-bottom:clamp(30px,3.6vw,48px);overflow:hidden;}
.ahead .glow{position:absolute;width:820px;height:820px;right:-260px;top:-380px;border-radius:50%;
    background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent) 0%,transparent) 65%);pointer-events:none;}
.ahead-in{position:relative;max-width:74ch;}
.crumbs .cur{color:var(--accent);display:inline-flex;align-items:center;}
.ahead h1{font-size:clamp(30px,4.4vw,54px);letter-spacing:-0.024em;line-height:1.02;
    text-transform:none;max-width:20ch;}
.ameta{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);}
.ameta .ond{color:var(--accent);}
.ameta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2);flex:none;}
.ameta a{color:var(--faint);text-decoration:underline;text-underline-offset:2px;}
.ameta a:hover{color:var(--ink);}
/* ---------- het korte antwoord ----------
     Het belangrijkste blok van de pagina. Het bedient de lezer die maar een
     vijfde leest, en het is de sectie die zoekmachines en AI-antwoorden
     overnemen. Moet daarom los van de rest te begrijpen zijn. */
  .kort{margin-top:26px;background:var(--paper-2);border:1px solid var(--line);
    border-left:3px solid var(--accent);border-radius:4px 14px 14px 4px;
    padding:22px 26px;box-shadow:var(--sh-card);max-width:70ch;}
.kort .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--accent);}
.kort p{margin-top:10px;font-size:17.5px;line-height:1.6;color:var(--ink);}
.kort p + p{margin-top:10px;}
/* de eerste alinea is de citeerbare capsule, deze tweede regel is de nuance
     erbij. Bewust apart gehouden zodat de capsule op lengte blijft. */
  .kort .kort-na{font-size:15.5px;color:var(--muted);}
/* ---------- de leeskolom met de inhoudsopgave ernaast ---------- */
  .abody{display:grid;grid-template-columns:230px minmax(0,66ch);
    gap:clamp(28px,4vw,64px);justify-content:center;align-items:start;
    padding-top:clamp(36px,4.4vw,60px);padding-bottom:clamp(48px,6vw,84px);}
@media(max-width:1000px){
  .abody{grid-template-columns:minmax(0,66ch);justify-content:start;}
}
.toc{position:sticky;top:88px;}
@media(max-width:1000px){
  .toc{position:static;background:var(--paper-2);border:1px solid var(--line);
      border-radius:14px;padding:4px 18px;box-shadow:var(--sh-card);margin-bottom:30px;}
}
.toc .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--faint);margin-bottom:12px;}
@media(max-width:1000px){
  .toc .k{display:none;}
}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;}
.toc li{counter-increment:toc;}
.toc a{display:flex;gap:9px;padding:7px 0;min-height:24px;font-size:14.5px;line-height:1.35;
    color:var(--muted);border-left:2px solid transparent;padding-left:12px;margin-left:-14px;
    transition:color .15s ease,border-color .15s ease;}
.toc a::before{content:counter(toc);font-family:var(--mono);font-size:11px;color:var(--faint);
    flex:none;padding-top:2px;}
.toc a:hover{color:var(--ink);}
.toc a.actief{color:var(--accent);border-left-color:var(--accent);}
.toc a.actief::before{color:var(--accent);}
/* op mobiel wordt de inhoudsopgave inklapbaar */
  .toc summary{list-style:none;cursor:pointer;display:none;padding:14px 0;position:relative;
    font-family:var(--display);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:-.006em;}
.toc summary::-webkit-details-marker{display:none;}
@media(max-width:1000px){
  .toc summary{display:block;}
}
.toc summary::after{content:"";position:absolute;right:2px;top:50%;width:9px;height:9px;
    border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
    transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;}
.toc details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.toc .tin{padding-bottom:12px;}
@media(min-width:1001px){
  .toc details{display:contents;}
  .toc .tin{padding:0;}
}
/* ---------- de artikeltekst ---------- */
  .prose{font-size:18px;line-height:1.72;color:var(--ink-2);}
@media(max-width:640px){
  .prose{font-size:17px;}
}
.prose > * + *{margin-top:1.15em;}
.prose h2{margin-top:2.1em;font-size:clamp(22px,2.4vw,29px);letter-spacing:-.018em;
    line-height:1.16;text-transform:none;scroll-margin-top:88px;}
.prose h3{margin-top:1.7em;font-size:clamp(18px,1.9vw,21px);letter-spacing:-.012em;
    line-height:1.24;text-transform:none;scroll-margin-top:88px;}
.prose p{color:var(--ink-2);}
/* antwoordcapsule: de eerste alinea onder een kop beantwoordt de vraag uit die
     kop volledig, in veertig tot zestig woorden en zonder links. Zo is het blok
     los te lezen en los te citeren. Iets donkerder en groter dan de lopende
     tekst, zodat het ook voor de scannende lezer het antwoord markeert. */
  .prose .cap{font-size:19px;line-height:1.6;color:var(--ink);}
@media(max-width:640px){
  .prose .cap{font-size:17.5px;}
}
.prose strong{color:var(--ink);font-weight:600;}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
    text-decoration-thickness:1px;}
.prose a:hover{text-decoration-thickness:2px;}
.prose ul,.prose ol{padding-left:0;list-style:none;}
.prose li{position:relative;padding-left:26px;margin-top:.55em;}
.prose ul li::before{content:"";position:absolute;left:6px;top:.62em;width:7px;height:7px;
    border-radius:50%;background:var(--accent);opacity:.65;}
.prose ol{counter-reset:pl;}
.prose ol li{counter-increment:pl;}
.prose ol li::before{content:counter(pl) ".";position:absolute;left:0;top:0;
    font-family:var(--mono);font-size:13.5px;color:var(--accent);padding-top:4px;}
/* een tabel moet op een telefoon kunnen schuiven zonder de pagina mee te nemen */
  .tabelwrap{overflow-x:auto;margin-top:1.5em;border:1px solid var(--line);border-radius:12px;
    background:var(--paper-2);}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:460px;}
.prose th,.prose td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);
    vertical-align:top;line-height:1.5;}
.prose th{font-family:var(--display);font-weight:700;font-size:13px;text-transform:uppercase;
    letter-spacing:.03em;color:var(--ink);background:var(--wash);}
.prose tbody tr:last-child td{border-bottom:0;}
.prose td.num{font-variant-numeric:tabular-nums;white-space:nowrap;}
.prose caption{caption-side:top;text-align:left;padding:14px 16px 12px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--faint);border-bottom:1px solid var(--line);}
/* ---------- bronnen ----------
     Voor een compliancebureau het onderscheidende blok: de lezer kan zelf
     nakijken waar de uitspraak op rust. Dat is een vertrouwenssignaal dat
     concurrenten zelden geven, en het is verifieerbaar. */
  .bron{margin-top:2.4em;border-top:2px solid var(--ink);padding-top:20px;}
.bron .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--faint);}
.bron ul{list-style:none;margin:12px 0 0;padding:0;}
.bron li{padding-left:0;margin-top:9px;font-size:15px;line-height:1.55;color:var(--muted);}
.bron li::before{display:none;}
.bron a{color:var(--accent);}
.bron .gecheckt{margin-top:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
    text-transform:uppercase;color:var(--faint);}
/* ---------- auteur ---------- */
  .auteur{margin-top:2.4em;display:flex;gap:18px;align-items:flex-start;
    background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
    padding:22px 24px;box-shadow:var(--sh-card);}
.auteur .av{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--paper-2);
    font-family:var(--display);font-weight:700;font-size:20px;
    box-shadow:0 12px 24px -12px color-mix(in srgb,var(--accent) 60%,transparent);}
.auteur .nm{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.008em;}
.auteur .rol{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
    color:var(--accent);margin-top:4px;}
.auteur p{margin-top:9px;font-size:15px;line-height:1.6;color:var(--muted);}
.auteur a{color:var(--accent);}
/* ---------- veelgestelde vragen ---------- */
  .afaq{margin-top:2.4em;border-top:2px solid var(--ink);}
.afaq h2{margin-top:22px;}
.afaq details{border-bottom:1px solid var(--line);}
.afaq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
    font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.008em;
    line-height:1.3;transition:color .15s ease;}
.afaq summary::-webkit-details-marker{display:none;}
.afaq summary:hover{color:var(--accent);}
.afaq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
    border-right:2.2px solid var(--accent);border-bottom:2.2px solid var(--accent);
    transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;}
.afaq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.afaq .ans{padding:0 0 20px;font-size:16.5px;line-height:1.65;color:var(--muted);}
.afaq .ans a{color:var(--accent);}
.verder .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--faint);margin-bottom:14px;}
/* ---------- inline vraagblok ----------
     Staat IN de leeskolom, niet ernaast. Blokken naast de tekst worden visueel
     genegeerd, een aangeleerd patroon dat bekendstaat als banner blindness.
     Inline blokken krijgen ruim twee keer zoveel doorkliks, omdat ze als
     onderdeel van het verhaal lezen in plaats van als reclame ernaast.
     Daarom ook geen sticky variant: meebewegen roept dezelfde blindheid op. */
  .vraag{margin-top:2em;background:var(--paper-2);border:1px solid var(--line);
    border-radius:16px;padding:24px 26px;box-shadow:var(--sh-card);position:relative;
    overflow:hidden;}
.vraag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);}
.vraag h3{margin-top:0;font-size:19px;letter-spacing:-.012em;line-height:1.2;
    text-transform:none;}
.vraag .intro{margin-top:9px;font-size:15.5px;line-height:1.6;color:var(--muted);}
.vraag form{margin-top:16px;}
/* een kolom, altijd. Formulieren in een kolom presteren beter dan twee
     kolommen naast elkaar, en met een invoerveld naast een tekstvak lopen de
     hoogtes bovendien uit de pas. */
  .vraag .rij{display:block;}
.vraag label{display:block;font-family:var(--display);font-weight:600;font-size:13.5px;
    margin-bottom:6px;}
.vraag .wpcf7-form-control-wrap{display:block;}
.vraag input,.vraag textarea{width:100%;font-family:var(--body);font-size:15.5px;
    color:var(--ink);background:var(--paper);border:1.5px solid var(--line-2);
    border-radius:9px;padding:10px 12px;
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;}
.vraag textarea{min-height:76px;resize:vertical;line-height:1.5;}
.vraag input:hover,.vraag textarea:hover{border-color:var(--muted);}
.vraag input:focus,.vraag textarea:focus{outline:none;background:var(--paper-2);
    border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);}
.vraag .veld + .veld{margin-top:12px;}
.vraag button{margin-top:14px;display:inline-flex;align-items:center;gap:9px;
    font-family:var(--display);font-weight:600;font-size:15px;padding:12px 22px;
    border:1.5px solid var(--accent);background:var(--accent);color:var(--paper-2);border-radius:10px;
    cursor:pointer;transition:transform .15s ease,background .15s ease;}
.vraag button:hover{background:var(--accent-deep);border-color:var(--accent-deep);transform:translateY(-2px);}
.vraag button .a{transition:transform .15s ease;}
.vraag button:hover .a{transform:translateX(4px);}
.vraag .na{margin-top:11px;font-size:13.5px;color:var(--faint);}
/* de bevestiging vervangt het formulier op dezelfde plek. Bewust geen redirect:
     de lezer zit midden in een artikel en die moet je niet wegsturen. */
  .vraag .klaar{display:none;}
.vraag.verzonden form{display:none;}
.vraag.verzonden .klaar{display:block;}
.vraag .klaar .vink{width:38px;height:38px;border-radius:50%;background:var(--accent);
    display:grid;place-items:center;margin-bottom:12px;}
.vraag .klaar .vink svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:3;
    stroke-linecap:round;stroke-linejoin:round;}
.vraag .klaar b{display:block;font-family:var(--display);font-weight:700;font-size:17px;
    letter-spacing:-.008em;}
.vraag .klaar p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--muted);}
/* meldingen van Contact Form 7 binnen dit blok */
  .vraag .wpcf7-response-output{margin:14px 0 0;padding:11px 14px;border-radius:9px;
    font-size:14px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
    color:var(--accent-deep);display:none;}
.vraag .wpcf7-response-output.on,
  .vraag form.invalid .wpcf7-response-output,
  .vraag form.failed .wpcf7-response-output{display:block;}
.vraag form.invalid .wpcf7-response-output,
  .vraag form.failed .wpcf7-response-output,
  .vraag .wpcf7-response-output.err{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink);}
.vraag .wpcf7-not-valid-tip{display:block;margin-top:5px;font-size:12.5px;color:var(--err-ink);}
.vraag input.wpcf7-not-valid,.vraag textarea.wpcf7-not-valid{border-color:var(--err-ink);}
.vraag .wpcf7-spinner{display:none;}
.final .glow{position:absolute;width:760px;height:760px;right:-240px;top:-300px;border-radius:50%;
    background:radial-gradient(circle,color-mix(in srgb,var(--accent) 38%,transparent),transparent 64%);pointer-events:none;}