/* Ontwerpsysteem KlantFans: één schaal voor tekst, één grijs per rol, één inspringmaat.
   Wordt als laatste geladen op elke pagina. Pas hier waarden aan, niet in losse regels. */
:root{
  --fs-sectie-sub:34px;   /* sectiekop op subpagina's */
  --fs-kaart:28px;        /* kop van een kaart of kolom */
  --fs-label:16px;        /* labels, meta, stappen */
  --fs-lead:19px;         /* introtekst onder een titel, overal */
  --fs-tekst:17px;        /* lopende tekst */
  --fs-klein:15px;        /* noten, bronnen, ondersteunende regels */
  --fs-mini:13px;         /* bijschriften */
  --kleur-tekst:#3a444d;  /* lopende tekst op wit */
  --kleur-steun:#57616b;  /* ondersteunende tekst op wit */
  --pad-x:44px;           /* inspringing binnen elk blok */
}
@media(max-width:760px){:root{--pad-x:20px;--fs-sectie-sub:28px;--fs-kaart:24px}}

/* Inspringing: elk blok dezelfde binnenmarge links en rechts */
.paneel.cs-kop,.sub main.cs>.cs-kop,.cs-slide>.cs-kop,
.paneel.cs-contact,.sub main.cs>.cs-contact,
.paneel.draad,.paneel.contact,
.kader.bewijs,.kader.opgaven,.kader.ervaring,.kader.motor,.kader.samen,
.kader.waarom-strook,.kader.verschil,.kader.mm-noot,.kader.mm-voorbeeld,.kader.cs-tekst,
.kader.es-momenten,.kader.es-voorbeeld{padding-left:var(--pad-x)!important;padding-right:var(--pad-x)!important}
.cs-drie>section{padding-left:var(--pad-x)!important;padding-right:var(--pad-x)!important}

/* Sectiekoppen op subpagina's */
.sub main h2:not(.disp),.cs .es-scan h2,.cs .es-momenten h2{font-size:var(--fs-sectie-sub)!important;line-height:1!important}
/* Kaartkoppen */
.cs-groot,.cs .es-trap .es-tree h2,.va-vraag h2,.case h3,.piramide h3{font-size:var(--fs-kaart)!important;line-height:1.02!important}

/* Labels en meta */
.cs-stap,.cs-meta,.label,.waarom-kop,.es-label{font-size:var(--fs-label)!important}
.waarom-kop{color:var(--blue)!important}

/* Introtekst onder een titel */
.cs-lead{font-size:var(--fs-lead)!important}

/* Lopende tekst */
.cs-lijst li,.cs-drie p:not(.cs-groot):not(.cs-sub):not(.cs-bronnen),.va-aanpak p:not(.va-bewijs),.mm-noot p,.verschil-uitleg,
.cs .es-trap .es-tree p,.cs .es-trap .es-tree li,.es-scan>p,.es-check li,.waarom-lijst li,.cs-tekst p{font-size:var(--fs-tekst)!important;color:var(--kleur-tekst)!important}
.waarom-slot{font-size:var(--fs-tekst)!important;font-weight:700!important;color:var(--ink,#172028)!important}

/* Ondersteunend en klein */
.cs-bronnen,.va-bewijs,.opg-ook,.erk-regel,.noot,.bronnen-noot{font-size:var(--fs-klein)!important;color:var(--kleur-steun)!important}
figcaption{font-size:var(--fs-mini)!important;color:var(--kleur-steun)!important}

/* Tekst op blauw blijft wit */
.cs-kop .cs-lead,.cs-kop .cs-vertrouwen,.cs-contact p{color:#fff!important}
.es-tree.es-uit p,.es-tree.es-uit li{color:#fff!important}
.cs-woordmerk.cs-anoniem{color:var(--ink,#172028)!important;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.05;text-transform:none}
/* Inspringing ook waar oudere regels strenger zijn */
.sub main.cs>.kader.waarom-strook,.sub main.cs>.kader.verschil,.sub main.cs>.kader.mm-noot,.sub main.cs>.kader.mm-voorbeeld,.sub main.cs>.kader.cs-tekst,
.sub main.cs-slide>.kader.waarom-strook,.sub main.cs-slide>.kader.verschil,.sub main.cs-slide>.kader.mm-noot,.sub main.cs-slide>.kader.mm-voorbeeld,.sub main.cs-slide>.kader.cs-tekst{padding-left:var(--pad-x)!important;padding-right:var(--pad-x)!important}
/* Intro's: overal dezelfde maat */
.intro,.vak-kop,.hero-onder p,.cs-lead,.cs-contact p{font-size:var(--fs-lead)!important}
/* Kaarttekst en vertrouwensregel als lopende tekst */
.case p{font-size:var(--fs-tekst)!important;color:var(--kleur-tekst)!important}
.cs-vertrouwen{font-size:var(--fs-tekst)!important}
@media(max-width:760px){.intro,.vak-kop,.hero-onder p,.cs-lead,.cs-contact p{font-size:17px!important}}
/* Footer op dezelfde lijn als de inhoud */
.voet{padding-left:var(--pad-x)!important;padding-right:var(--pad-x)!important}
/* Eerste stap: lijst in kaart zonder extra inspringing */
.cs .es-trap .es-tree ul{padding-left:0!important;list-style:none}
/* Links in lopende tekst van een voorbeeld */
.mm-voorbeeld p a{color:var(--blue)!important;text-decoration:underline;text-underline-offset:3px}
.mm-noot p a{color:var(--blue)!important;text-decoration:underline;text-underline-offset:3px}
.kader .cs-lijst li a{color:var(--blue)!important;text-decoration:underline;text-underline-offset:3px}
/* Contact homepage: knop naar de eerste blik en zichtbare link */
.contact-links .blik{display:inline-block;background:#fff;color:var(--blue)!important;font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:18px;padding:14px 20px;text-decoration:none;margin-bottom:8px}
.contact-links .blik:hover{background:var(--paper,#eef1f6)}
.contact-onder p a{color:#fff!important;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.paneel.contact{grid-template-columns:minmax(0,1fr)!important}.contact-links .tel{font-size:18px!important}}
/* Mobiel: logobalk over de volle breedte onder het label */
@media(max-width:760px){.logos.binnen{flex-direction:column;align-items:stretch;gap:12px}.logos.binnen .logo-lus{width:100%;flex:none}}
.es-stempel{font-size:13px!important}
/* Mobiele QA, oktober 2026 */
@media(max-width:760px){
 .cs-contact p b{display:block;margin:0 0 6px}
 .va-rij{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
 .va-rij .va-aanpak{grid-column:auto!important}
 .va-vraag p{margin-bottom:0!important}
 .opg{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
 .opg .nr{justify-self:start}
 .opg p,.opg .bewijs,.opg h3{grid-column:1!important}
 .bronnen-tabel td:not(:first-child){grid-template-columns:128px minmax(0,1fr)!important}
}
.mm-noot p.extra{grid-column:1/-1;max-width:760px;border-top:1px solid var(--line,#d6dcf0);padding-top:18px}
.hero h1{line-height:1!important}