/*
Theme Name: Magik
Theme URI: https://magik.nl/
Description: Merksite van Magik. Mind en Soul.
Author: Cloudzicht
Version: 4.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: magik
*/

:root{
  --papier:#f0f0ee;
  --inkt:#161513;
  --inkt-2:#4a4844;
  --inkt-3:#66635d;
  --hairline:rgba(22,21,19,.22);
  --tint:rgba(22,21,19,.05);
  --rubriek:#b3301c;
  --klei:#e5e0d6;
  --klei-diep:#d8d2c5;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --tekst:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --breed:1240px;
  --marge:clamp(16px,4vw,56px);
  --kopbalk:4.5rem;
  --ritme:clamp(2.5rem,4.6vw,4.5rem);
  --fs-body:1.0625rem;
  --fs-klein:.8125rem;
  --fs-mono:.75rem;
  --fs-lede:clamp(1.05rem,.9vw + .8rem,1.3rem);
  --fs-h1:clamp(2.75rem,5.4vw,5.25rem);
  --fs-h2:clamp(1.9rem,3.8vw,3.4rem);
  --fs-h3:1.35rem;
  --fs-woord:clamp(4.5rem,12vw,12rem);
  --duur:.8s;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-lijn:cubic-bezier(.7,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font-family:var(--tekst);font-size:var(--fs-body);line-height:1.6;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:500;line-height:1;letter-spacing:-.022em;overflow-wrap:break-word}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd,figure{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;border-radius:0}
input,textarea{font:inherit;color:inherit;border-radius:0}
:focus-visible{outline:2px solid var(--rubriek);outline-offset:4px}
::selection{background:var(--inkt);color:var(--papier)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:var(--marge);top:-4rem;background:var(--inkt);color:var(--papier);padding:.5rem 1rem;font-family:var(--mono);font-size:var(--fs-klein);z-index:50;text-decoration:none}
.skip:focus{top:1rem}

.omslag{max-width:var(--breed);margin-inline:auto;padding-inline:var(--marge)}
.mono{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;font-weight:500}
.stapnr{text-transform:uppercase;letter-spacing:.12em;color:var(--rubriek)}
.rubr{color:var(--rubriek)}
.stil{color:var(--inkt-2)}
.tel{font-family:var(--mono);font-size:var(--fs-klein);letter-spacing:.02em;text-decoration:none;border-bottom:1px solid var(--hairline);padding-bottom:.1rem;white-space:nowrap}
.tel:hover,.tel:focus-visible{border-bottom-color:var(--inkt);color:var(--rubriek)}

.kop{min-height:var(--kopbalk);padding-block:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;border-bottom:1px solid var(--inkt)}
.woordmerk{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.022em;text-decoration:none;line-height:1;font-variation-settings:"wdth" 112,"wght" 600}
.woordmerk::after{content:".";color:var(--rubriek)}
.kop nav{display:none;gap:2rem}
@media (min-width:900px){.kop nav{display:flex}}
.kop nav a{text-decoration:none;font-family:var(--tekst);font-size:var(--fs-klein);letter-spacing:.02em;font-weight:500;color:var(--inkt-2)}
.kop nav a:hover,.kop nav a:focus-visible{color:var(--rubriek)}
.kop .rechts{display:flex;align-items:center;gap:1.25rem 1.75rem}
.kop .tel{display:none}
@media (min-width:640px){.kop .tel{display:inline-block}}
.kop .cta-klein{font-family:var(--tekst);font-size:var(--fs-klein);letter-spacing:.02em;font-weight:500;text-decoration:none;background:var(--inkt);color:var(--papier);padding:.6rem .9rem;white-space:nowrap;border:1px solid var(--inkt)}
.kop .cta-klein:hover,.kop .cta-klein:focus-visible{background:var(--papier);color:var(--inkt)}

.hero{padding-block:clamp(1.5rem,3vw,2.5rem) 0}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem 3rem}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:2rem clamp(2rem,4vw,4.5rem)}
}
.hero-tekst{display:flex;flex-direction:column;gap:1.5rem;min-width:0}
@media (min-width:900px){
  .hero-tekst .h1{order:2;margin-top:clamp(1.5rem,3vw,2.5rem);padding-bottom:clamp(1rem,2vw,2rem)}
  .hero-tekst .boven{order:1;padding-top:.5rem}
}
.h1{font-size:var(--fs-h1);font-weight:400;line-height:1;letter-spacing:-.022em;font-variation-settings:"wdth" 96,"wght" 400;max-width:12ch}
.h1 .regel{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.h1 .regel > span{display:block}
.js .h1 .regel > span{transform:translateY(105%);animation:opkomen 1s var(--ease) forwards}
.js .h1 .regel:nth-child(2) > span{animation-delay:.1s}
.h1 .w{font-variation-settings:"wdth" 96,"wght" var(--w,400)}
.h1 .w.mind{--w:600}
.h1 .w.soul{--w:300}
.h1 .komma{color:var(--rubriek)}
@keyframes opkomen{to{transform:none}}
.hero .belofte{margin-bottom:.9rem;color:var(--inkt-2)}
.hero .belofte::before{content:"";display:inline-block;width:2rem;height:1px;background:var(--rubriek);vertical-align:middle;margin-right:1em}
.hero .lede{font-size:var(--fs-lede);line-height:1.45;max-width:36ch;text-wrap:pretty}
.hero .lede em{font-style:normal;border-bottom:2px solid var(--rubriek)}
.hero .acties{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.knop{display:inline-flex;align-items:center;gap:.9rem;background:var(--inkt);color:var(--papier);padding:1rem 1.5rem;font-family:var(--tekst);font-size:.9375rem;letter-spacing:.02em;font-weight:500;text-decoration:none;border:1px solid var(--inkt);transition:background .2s,color .2s}
.knop svg{width:1.1em;height:1.1em;flex:none}
.knop:hover,.knop:focus-visible{background:var(--papier);color:var(--inkt)}
.knop[disabled]{opacity:.6;cursor:wait}

.hero-tool{min-width:0;display:flex;flex-direction:column;gap:1rem}
@media (min-width:900px){.hero-tool{padding-bottom:clamp(1.5rem,3vw,3rem);justify-content:flex-start;gap:1.75rem}.hero-tool .voortgang{padding-top:.5rem}}
.voortgang{display:flex;gap:.5rem;font-family:var(--mono);font-size:var(--fs-klein);letter-spacing:.02em}
.voortgang li{flex:1 1 0;min-width:0;padding-top:.6rem;border-top:3px solid var(--hairline);color:var(--inkt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .3s,color .3s}
.voortgang li b{font-weight:500;margin-right:.6em}
.voortgang li.is-actief{border-top-color:var(--inkt);color:var(--inkt)}
.voortgang li.is-klaar{border-top-color:var(--rubriek);color:var(--inkt-2)}
.voortgang li.is-klaar b{color:var(--rubriek)}
.tool-kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem 1.5rem;margin-top:.75rem}
.tool-kop h2{font-size:clamp(1.5rem,2.2vw,2rem);font-variation-settings:"wdth" 104,"wght" 500}
.tool-kop h2:focus{outline:none}
.tool-kop p{color:var(--inkt-2);font-size:.95rem}

.knellen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hairline);border-left:1px solid var(--hairline)}
@media (min-width:560px){.knellen{grid-template-columns:repeat(3,minmax(0,1fr))}.knellen .knel:last-child{grid-column:span 2}}
.knel{display:grid;grid-template-columns:1fr;align-content:start;gap:.55rem;text-align:left;padding:.85rem .9rem 1rem;min-height:6.25rem;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);position:relative;transition:background .2s,color .2s}
.knel .nr{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;color:var(--inkt-3);display:flex;justify-content:space-between;gap:1rem}
.knel .kant{color:var(--inkt);font-weight:500}
.knel .kant::before{content:"";display:inline-block;width:.5rem;height:.5rem;border:1px solid var(--inkt);margin-right:.6em;vertical-align:baseline}
.knel .kant.soul::before{border-radius:50%}
.knel .tekst{font-family:var(--display);font-size:clamp(.98rem,.4vw + .82rem,1.15rem);line-height:1.15;letter-spacing:-.012em;font-weight:500;font-variation-settings:"wdth" 100,"wght" 500;text-wrap:pretty}
.knel::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--rubriek);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-lijn)}
.knel[aria-pressed="true"] .cijfer{display:none}
.knel[aria-pressed="true"] .nr::after{content:"gekozen";color:var(--papier)}
@media (hover:hover){.knel:hover{background:var(--tint)}}
.knel:focus-visible{outline-offset:-4px}
.knel[aria-pressed="true"]{background:var(--inkt);color:var(--papier)}
.knel[aria-pressed="true"] .nr{color:rgba(240,240,238,.7)}
.knel[aria-pressed="true"] .kant{color:var(--papier)}
.knel[aria-pressed="true"] .kant::before{border-color:var(--papier);background:var(--rubriek)}
.knel[aria-pressed="true"]::after{transform:scaleX(1)}

.stap{padding-top:clamp(2.5rem,5vw,4rem)}
.js .stap[data-stap]:not(.is-open){display:none}
.stap-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;margin-bottom:1.25rem;border-top:3px solid var(--inkt);padding-top:1rem}
.stap-kop h3{font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:-.022em;font-variation-settings:"wdth" 108,"wght" 500}
.stap-kop h3:focus{outline:none}

.vragen{display:grid;grid-template-columns:1fr;gap:2rem 3rem}
@media (min-width:768px){.vragen{grid-template-columns:5fr 7fr}}
.vraag .titel{font-family:var(--display);font-weight:500;font-size:1.15rem;letter-spacing:-.01em;margin-bottom:.25rem}
.vraag .hulp{color:var(--inkt-2);font-size:.95rem;margin-bottom:.9rem}
.pillen{display:flex;flex-wrap:wrap;gap:.5rem}
.pil{padding:.6rem .95rem;border:1px solid var(--inkt);font-family:var(--mono);font-size:var(--fs-klein);letter-spacing:.02em;line-height:1.2;transition:background .2s,color .2s}
.pil:hover{background:var(--tint)}
.pil[aria-pressed="true"]{background:var(--inkt);color:var(--papier)}
.overslaan{margin-top:1.5rem;color:var(--inkt-2);font-size:.95rem;display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:baseline}
.knop-stil{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;color:var(--inkt);font-weight:500}
.knop-stil:hover{color:var(--rubriek)}

.oplossing{display:grid;grid-template-columns:1fr;gap:2.5rem 0}
@media (min-width:1100px){.oplossing{grid-template-columns:7fr 5fr}.oplossing > .antwoorden{padding-right:clamp(2rem,5vw,5rem)}.oplossing > .vast{padding-left:clamp(1.5rem,3vw,3rem);border-left:1px solid var(--hairline)}}
.antwoord{padding-bottom:2.5rem}
.antwoord + .antwoord{border-top:1px solid var(--hairline);padding-top:2.5rem}
.js .antwoord:not(.is-open){display:none}
.js .antwoord + .antwoord{border-top:0;padding-top:0}
.antwoord .opl-kop{display:flex;gap:1em;align-items:baseline;margin-bottom:1rem}
.antwoord .opl-kop .nr{color:var(--rubriek)}
.antwoord h4{font-size:clamp(1.7rem,2.8vw,2.6rem);letter-spacing:-.022em;font-variation-settings:"wdth" 104,"wght" 500;line-height:1.02;text-wrap:balance;max-width:20ch}
.antwoord .kopje,.maten .kopje{font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:-.005em;color:var(--inkt);display:block;margin:1.5rem 0 .35rem}
.antwoord .kopje::before,.maten .kopje::before{content:"";display:inline-block;width:1rem;height:1px;background:var(--rubriek);vertical-align:middle;margin-right:.6em}
.antwoord p.lopend{max-width:58ch;line-height:1.62}
.antwoord .bij-u{border-left:3px solid var(--rubriek);padding-left:1rem}
.antwoord .krijgt{margin-top:.25rem;border-top:1px solid var(--inkt)}
.antwoord .krijgt li{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--hairline)}
.antwoord .krijgt .nr{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;color:var(--inkt-3);padding-top:.3rem}
.feiten{margin-top:1.5rem;display:grid;grid-template-columns:1fr;border-top:1px solid var(--inkt)}
@media (min-width:560px){.feiten{grid-template-columns:repeat(2,minmax(0,1fr))}}
.feiten > div{padding:.9rem 1rem .9rem 0;border-bottom:1px solid var(--hairline)}
@media (min-width:560px){.feiten > div:nth-child(2n){padding-left:1rem;border-left:1px solid var(--hairline)}}
.feiten dt{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;color:var(--inkt-2);margin-bottom:.35rem}
.feiten dd{font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1.3;letter-spacing:-.01em}
.maten{margin-top:1.5rem}
.maten .kopje{margin-top:0}
.maten > div{border-top:1px solid var(--hairline);padding:.9rem 0}
.js .maten > div:not(.is-open){display:none}
.maten dt{font-family:var(--display);font-weight:500;font-size:1.05rem;letter-spacing:-.01em;margin-bottom:.3rem}
.maten dd{color:var(--inkt-2);line-height:1.55;max-width:58ch}

.prijs{border:1px solid var(--inkt);padding:1.25rem 1.35rem;margin-bottom:2rem}
.prijs .mono{display:block;margin-bottom:.6rem;color:var(--inkt-2)}
.prijs strong{font-family:var(--display);font-weight:500;font-size:1.2rem;letter-spacing:-.015em;line-height:1.25;display:block}
.prijs p{margin-top:.6rem;color:var(--inkt-2);font-size:.95rem;line-height:1.5}

.form .titel{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;margin-bottom:.5rem}
.form .titel strong{font-family:var(--display);font-weight:500;font-size:1.35rem;letter-spacing:-.02em;font-variation-settings:"wdth" 108,"wght" 500}
.form .titel .stil{font-family:var(--mono);font-size:var(--fs-mono)}
.form .uitleg{color:var(--inkt-2);font-size:.95rem;line-height:1.5;margin-bottom:1.5rem;max-width:44ch}
.form .rij{display:grid;grid-template-columns:1fr;gap:0 1.5rem}
@media (min-width:560px){.form .rij{grid-template-columns:1fr 1fr}}
.veld{display:block;margin-bottom:1.4rem;min-width:0}
.veld span{display:block;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;color:var(--inkt-2);margin-bottom:.4rem}
.veld input,.veld textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--inkt);padding:.6rem 0;font-size:1.0625rem;color:var(--inkt);transition:border-color .2s,box-shadow .2s}
.veld textarea{resize:vertical;min-height:8rem;line-height:1.5}
.veld input:focus,.veld textarea:focus{outline:none;border-bottom-color:var(--rubriek);box-shadow:0 1px 0 0 var(--rubriek)}
.veld input[aria-invalid="true"]{border-bottom-color:var(--rubriek);box-shadow:0 1px 0 0 var(--rubriek)}
.form .voet{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin-top:.5rem}
.form .voet small{color:var(--inkt-2);font-size:.875rem;max-width:30ch;line-height:1.4}
.fout{margin-top:1rem;font-family:var(--mono);font-size:var(--fs-klein);color:var(--rubriek)}
.dank{border-top:3px solid var(--inkt);padding-top:1.5rem}
.dank h4{font-size:clamp(1.5rem,2.4vw,2.2rem);letter-spacing:-.022em;font-variation-settings:"wdth" 104,"wght" 500}
.dank h4:focus{outline:none}
.dank p{margin-top:1rem;max-width:42ch;color:var(--inkt-2)}
.dank .kaart{margin-top:1.5rem;border:1px solid var(--inkt);padding:1rem 1.25rem;font-family:var(--mono);font-size:var(--fs-klein);line-height:1.7;overflow-wrap:anywhere}
.dank .kaart b{font-weight:500;color:var(--rubriek);margin-right:1em}

.sectie{padding-block:var(--ritme)}
.sectie-kop{position:relative;padding-top:1rem;margin-bottom:clamp(1.25rem,2.4vw,2rem);display:grid;grid-template-columns:1fr;gap:.75rem 2rem;align-items:baseline}
.sectie-kop::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--inkt)}
.js .sectie-kop::before{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-lijn)}
.js .in .sectie-kop::before{transform:scaleX(1)}
.sectie-kop h2{font-size:var(--fs-h2);font-variation-settings:"wdth" 108,"wght" 500;text-wrap:balance;max-width:18ch}
.sectie-kop .uitleg{color:var(--inkt-2);max-width:52ch;line-height:1.55}
@media (min-width:768px){
  .sectie-kop{grid-template-columns:2fr 10fr}
  .sectie-kop h2{grid-column:2}
  .sectie-kop .uitleg{grid-column:2}
}

.onthul{transition:opacity var(--duur) ease,transform var(--duur) var(--ease)}
.js .onthul{opacity:0;transform:translateY(20px)}
.js .onthul.in{opacity:1;transform:none}
.onthul[data-wacht="1"]{transition-delay:.1s}
.onthul[data-wacht="2"]{transition-delay:.2s}
.onthul[data-wacht="3"]{transition-delay:.3s}

.brief{display:grid;grid-template-columns:1fr;gap:3rem clamp(2rem,5vw,5rem);border-top:3px solid var(--inkt);padding-top:1.5rem}
@media (min-width:900px){.brief{grid-template-columns:6fr 6fr}}
.brief h2{font-size:var(--fs-h2);font-variation-settings:"wdth" 108,"wght" 500;max-width:14ch;text-wrap:balance}
.brief .tekst{margin-top:1.75rem;font-family:var(--display);font-size:clamp(1.15rem,1.4vw,1.45rem);line-height:1.38;letter-spacing:-.012em;font-weight:400;max-width:34ch;text-wrap:pretty}
.brief .tekst p + p{margin-top:1.1rem}
.brief .tekst mark{background:none;color:inherit;box-shadow:inset 0 -.45em 0 rgba(179,48,28,.28)}
.brief .onder{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 2rem}
.brief .namen{font-family:var(--mono);font-size:var(--fs-klein);color:var(--inkt-2);letter-spacing:.02em}
.nummer{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3vw,2.6rem);letter-spacing:-.022em;font-variation-settings:"wdth" 96,"wght" 500;text-decoration:none;white-space:nowrap}
.nummer:hover,.nummer:focus-visible{color:var(--rubriek)}
.mensen{display:grid;grid-template-columns:1fr;gap:2rem;min-width:0;align-content:start}
.mensen img{width:100%;object-fit:cover;object-position:50% 18%;border:1px solid var(--inkt);background:var(--tint)}
.mensen .samen img{aspect-ratio:2/1}
.mensen figcaption{display:grid;grid-template-columns:1fr;gap:1.25rem 2rem;margin-top:1.1rem}
@media (min-width:560px){.mensen .samen figcaption{grid-template-columns:1fr 1fr}}
.mensen .alleen{display:grid;grid-template-columns:7.5rem 1fr;gap:1.25rem;align-items:start}
.mensen .alleen img{aspect-ratio:1/1.1;object-position:50% 12%}
.mensen .alleen figcaption{margin-top:0}
@media (max-width:399px){.mensen .alleen{grid-template-columns:1fr}.mensen .alleen img{aspect-ratio:4/3}}
.persoon .naam{font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:-.022em;font-variation-settings:"wdth" 104,"wght" 600;line-height:1.1}
.persoon .rol{display:block;margin:.3rem 0 .5rem;color:var(--inkt-2)}
.persoon p{color:var(--inkt-2);line-height:1.5;font-size:.95rem;max-width:36ch}

.beloftes{background:var(--inkt);color:var(--papier)}
.beloftes .omslag{display:grid;grid-template-columns:1fr;padding-block:1.5rem}
@media (min-width:768px){.beloftes .omslag{grid-template-columns:repeat(3,minmax(0,1fr));padding-block:2.25rem}}
.belofte-item{padding:1rem 0;border-top:1px solid rgba(240,240,238,.25)}
.belofte-item:first-child{border-top:0;padding-top:0}
@media (min-width:768px){
  .belofte-item{border-top:0;padding:0 clamp(1rem,2.5vw,2.5rem) 0 0}
  .belofte-item + .belofte-item{border-left:1px solid rgba(240,240,238,.25);padding-left:clamp(1rem,2.5vw,2.5rem)}
  .belofte-item:last-child{padding-right:0}
}
.belofte-item .mono{display:block;margin-bottom:.6rem;color:var(--papier)}
.belofte-item .mono::before{content:"";display:inline-block;width:1.25rem;height:1px;background:var(--rubriek);vertical-align:middle;margin-right:.8em}
.belofte-item h3{font-size:var(--fs-h3);font-variation-settings:"wdth" 108,"wght" 500;margin-bottom:.5rem}
.belofte-item p{font-size:.95rem;line-height:1.5;color:rgba(240,240,238,.86);max-width:36ch}

.gevallen{display:grid;grid-template-columns:1fr;border-top:1px solid var(--hairline);border-left:1px solid var(--hairline)}
@media (min-width:768px){.gevallen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.geval{padding:1.5rem 1.35rem 1.75rem;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);display:flex;flex-direction:column;gap:1rem}
.geval .wie{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;color:var(--inkt-2)}
.geval .wie .kant{color:var(--rubriek)}
.geval h3{font-size:clamp(1.35rem,1.6vw,1.7rem);font-variation-settings:"wdth" 104,"wght" 500;line-height:1.08;text-wrap:balance}
.geval p{color:var(--inkt-2);line-height:1.55;font-size:.97rem}
.geval .uitkomst{margin-top:auto;padding-top:1rem;border-top:3px solid var(--inkt);color:var(--inkt);font-family:var(--display);font-weight:500;font-size:1.05rem;letter-spacing:-.01em;line-height:1.3}
.geval .uitkomst small{display:block;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;color:var(--inkt-2);font-weight:500;margin-bottom:.4rem}
.gevallen-noot{margin-top:1.25rem;color:var(--inkt-2);font-size:.95rem;max-width:60ch}

@media (min-width:768px){.manifest{margin-left:calc(100% / 12 * 2)}}
.manifest p{font-family:var(--display);font-size:clamp(1.55rem,3.1vw,2.9rem);line-height:1.16;letter-spacing:-.022em;font-weight:400;font-variation-settings:"wdth" 100,"wght" 400;text-wrap:pretty;max-width:26ch}
.manifest p .wd{color:var(--inkt-2);transition:color .3s linear}
.manifest p .wd.aan{color:var(--inkt)}
.manifest .bron{margin-top:2rem;display:flex;align-items:center;gap:1em}
.manifest .bron::before{content:"";display:inline-block;width:2rem;height:1px;background:var(--rubriek)}

.tweeslag{display:grid;grid-template-columns:1fr;position:relative}
.tweeslag .helft{padding-block:1rem 0;min-width:0}
.tweeslag .helft + .helft{margin-top:3.5rem;border-top:1px solid var(--hairline);padding-top:3rem}
.tweeslag .scheiding{display:none}
@media (min-width:768px){
  .tweeslag{grid-template-columns:1fr 1fr}
  .tweeslag .helft{padding-right:clamp(1.5rem,4vw,4rem)}
  .tweeslag .helft + .helft{margin-top:0;border-top:0;padding-top:1rem;padding-left:clamp(1.5rem,4vw,4rem);padding-right:0}
  .tweeslag .scheiding{display:block;position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--inkt)}
  .js .tweeslag .scheiding{transform:scaleY(0);transform-origin:top;transition:transform 1.5s var(--ease-lijn)}
  .js .in .tweeslag .scheiding{transform:scaleY(1)}
}
.woord{font-family:var(--display);font-size:var(--fs-woord);line-height:.85;letter-spacing:-.03em;display:block;margin-left:-.04em;transition:font-variation-settings 1.3s var(--ease)}
.woord.mind{font-variation-settings:"wdth" 80,"wght" 600}
.woord.soul{font-variation-settings:"wdth" 118,"wght" 300}
.js .woord{font-variation-settings:"wdth" 100,"wght" 300}
.js .in .woord.mind{font-variation-settings:"wdth" 80,"wght" 600}
.js .in .woord.soul{font-variation-settings:"wdth" 118,"wght" 300}
.helft .rol{margin-top:1.25rem;display:flex;gap:1em;align-items:baseline}
.helft .rol .nr{color:var(--rubriek)}
.helft .intro{margin-top:1.25rem;font-size:var(--fs-lede);line-height:1.4;max-width:30ch;font-family:var(--display);font-weight:400;letter-spacing:-.01em}
.dienst{margin-top:2rem;border-top:1px solid var(--inkt)}
.dienst li{display:grid;grid-template-columns:2.5rem 1fr;gap:.4rem 1rem;padding:1rem 0;border-bottom:1px solid var(--hairline);align-items:baseline}
.dienst .nr{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;color:var(--inkt-3);padding-top:.3rem}
.dienst h3{font-size:1.25rem;font-variation-settings:"wdth" 100,"wght" 500;line-height:1.12}
.dienst p{grid-column:2;color:var(--inkt-2);line-height:1.5;font-size:.97rem;max-width:42ch}
@media (hover:hover){.dienst li:hover .nr{color:var(--rubriek)}}

.koop{display:grid;grid-template-columns:1fr;gap:3rem}
@media (min-width:768px){.koop{grid-template-columns:1fr 1fr;gap:0}.koop > div{padding-right:clamp(1.5rem,4vw,4rem)}.koop > div + div{padding-left:clamp(1.5rem,4vw,4rem);padding-right:0;border-left:1px solid var(--hairline)}}
@media (min-width:1100px){.koop{margin-left:calc(100% / 12 * 2)}}
.koop h3{font-size:1.5rem;font-variation-settings:"wdth" 108,"wght" 500;padding-bottom:.75rem;border-bottom:3px solid var(--inkt);margin-bottom:.25rem}
.koop h3.niet{border-bottom-width:1px}
.koop li{padding:1.1rem 0;border-bottom:1px solid var(--hairline);display:grid;grid-template-columns:1.6rem 1fr;gap:1rem}
.koop li .teken{font-family:var(--mono);color:var(--rubriek)}
.koop li .teken.streep{position:relative}
.koop li .teken.streep::before{content:"";position:absolute;left:0;top:.75em;width:.8em;height:1px;background:var(--inkt-3)}
.koop li strong{display:block;font-family:var(--display);font-weight:500;font-size:1.2rem;letter-spacing:-.02em;line-height:1.12;margin-bottom:.3rem}
.koop li span:not(.teken){color:var(--inkt-2);font-size:.97rem;line-height:1.5}
.koop .niet-lijst strong{color:var(--inkt-2);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--inkt-3)}
.koop .grens{grid-column:1 / -1;margin-top:3rem;border-top:3px solid var(--inkt);padding-top:1.25rem;display:grid;grid-template-columns:1fr;gap:1rem 3rem}
@media (min-width:768px){.koop > .grens{grid-template-columns:1fr 1fr;padding-right:0;padding-left:0;border-left:0}}
.koop .grens h3{border-bottom:0;padding-bottom:0;margin-bottom:0;max-width:16ch}
.koop .grens p{color:var(--inkt-2);line-height:1.6;max-width:52ch}
.koop .grens p + p{margin-top:1rem}

.stappen{display:grid;grid-template-columns:1fr;position:relative;padding-top:2rem;border-top:1px solid var(--inkt)}
@media (min-width:768px){.stappen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.stappen{grid-template-columns:repeat(4,minmax(0,1fr));margin-left:calc(100% / 12 * 2)}}
.stap-w{position:relative;padding:0 clamp(1rem,2.5vw,2.5rem) 2.5rem 0}
.stap-w::before{content:"";position:absolute;left:0;top:calc(-2rem - 5px);width:9px;height:9px;background:var(--inkt);border:1px solid var(--inkt);border-radius:50%}
.stap-w .wanneer{font-family:var(--display);font-size:clamp(1.9rem,2.6vw,2.6rem);font-weight:200;line-height:1;letter-spacing:-.022em;font-variation-settings:"wdth" 92,"wght" 200;display:block;margin-bottom:1rem;text-wrap:balance}
.stap-w .wanneer b{font-weight:600;font-variation-settings:"wdth" 92,"wght" 600;color:var(--rubriek)}
.stap-w h3{font-size:1.3rem;font-variation-settings:"wdth" 104,"wght" 500;line-height:1.12;max-width:18ch}
.stap-w p{margin-top:.8rem;color:var(--inkt-2);max-width:32ch;line-height:1.55;font-size:.97rem}

.slot{padding-top:1rem;border-top:3px solid var(--inkt)}
.slot h2{font-size:clamp(2.3rem,6vw,6rem);letter-spacing:-.022em;line-height:1;font-variation-settings:"wdth" 96,"wght" 400;max-width:14ch;text-wrap:balance}
.slot h2 .zacht{font-variation-settings:"wdth" 110,"wght" 250}
.slot .acties{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.slot .acties .stil{font-size:.95rem;max-width:34ch;line-height:1.45}

.voet{border-top:1px solid var(--inkt);padding-block:2rem 3rem;display:grid;grid-template-columns:1fr;gap:1.25rem;font-family:var(--mono);font-size:var(--fs-klein);letter-spacing:.02em;color:var(--inkt-2)}
@media (min-width:768px){.voet{grid-template-columns:auto 1fr auto;gap:2rem;align-items:baseline}}
.voet .woordmerk{font-size:1.15rem;color:var(--inkt);border-bottom:0}
.voet .tag{letter-spacing:0;font-family:var(--display);font-size:1.05rem;font-weight:500;color:var(--inkt)}
.voet .tag small{display:block;font-family:var(--mono);font-size:var(--fs-klein);letter-spacing:.02em;color:var(--inkt-2);margin-top:.4rem;font-weight:500}
.voet .rechts{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.voet a{text-decoration:none;border-bottom:1px solid var(--hairline);padding-bottom:.1rem}
.voet a:hover,.voet a:focus-visible{border-bottom-color:var(--inkt);color:var(--inkt)}


.vlak-warm{background:var(--klei)}
.vlak-warm .sectie-kop::before{background:var(--inkt)}

.vlak-inkt{background:var(--inkt);color:#e8e6e1}
.vlak-inkt h1,.vlak-inkt h2,.vlak-inkt h3,.vlak-inkt .nr,.vlak-inkt b,.vlak-inkt strong{color:#f6f5f2}
.vlak-inkt p,.vlak-inkt li,.vlak-inkt .uitleg,.vlak-inkt .lede{color:#c9c6bf}
.vlak-inkt .mono,.vlak-inkt .stapnr,.vlak-inkt .wanneer{color:#ef7a63}
.vlak-inkt .sectie-kop::before{background:#4a4844}
.vlak-inkt .rubriek,.vlak-inkt .accent{color:#ef7a63}
.vlak-inkt a{color:#f6f5f2}
.vlak-inkt .knop{background:#f6f5f2;color:var(--inkt);border-color:#f6f5f2}
.vlak-inkt li,.vlak-inkt .stap-w,.vlak-inkt .onderdeel{border-color:#3a3833}

.vlak-rood{background:var(--rubriek);color:#fdf3f0}
.vlak-rood h1,.vlak-rood h2,.vlak-rood h3,.vlak-rood b,.vlak-rood strong{color:#fff}
.vlak-rood p,.vlak-rood li,.vlak-rood .uitleg{color:#fbe7e2}
.vlak-rood .mono,.vlak-rood .stapnr,.vlak-rood .nr{color:#f3c0b5}
.vlak-rood .sectie-kop::before{background:#e0a094}
.vlak-rood li,.vlak-rood .kaart,.vlak-rood .geval{border-color:#d07a68}
.vlak-rood .knop{background:#fff;color:var(--rubriek);border-color:#fff}
.vlak-rood a{color:#fff}


.vlak-rood span,.vlak-rood small,.vlak-rood .kant,.vlak-rood .mono,.vlak-rood .stapnr,.vlak-rood .nr,.vlak-rood dt{color:#fbe7e2}
.vlak-rood .kant{border-color:#fbe7e2;background:transparent}
.vlak-rood b,.vlak-rood strong,.vlak-rood dd{color:#fff}
.vlak-inkt .nr,.vlak-inkt .kant{color:#ef7a63}
.vlak-inkt .kant{border-color:#ef7a63}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .onthul{opacity:1;transform:none}
  .js .sectie-kop::before{transform:scaleX(1)}
  .js .tweeslag .scheiding{transform:scaleY(1)}
  .js .h1 .regel > span{transform:none}
  .js .woord.mind{font-variation-settings:"wdth" 80,"wght" 600}
  .js .woord.soul{font-variation-settings:"wdth" 118,"wght" 300}
  .manifest p .wd{color:var(--inkt)}
}

.kop nav ul{display:flex;gap:2rem;list-style:none;margin:0;padding:0}
.kop nav li{margin:0}
.kop nav .current-menu-item > a,.kop nav .current_page_item > a{color:var(--inkt)}
.menu-knop{display:inline-flex;align-items:center;font-family:var(--tekst);font-size:var(--fs-klein);letter-spacing:.02em;font-weight:500;padding:.6rem .9rem;border:1px solid var(--inkt);color:var(--inkt);white-space:nowrap}
.menu-knop[aria-expanded="true"]{background:var(--inkt);color:var(--papier)}
@media (max-width:899px){
  .kop{position:relative}
  .kop nav.is-open{display:block;position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--papier);border-bottom:1px solid var(--inkt);padding:.5rem 0 1rem}
  .kop nav.is-open ul{flex-direction:column;gap:0}
  .kop nav.is-open a{display:block;padding:.9rem 0;border-top:1px solid var(--hairline);font-size:1rem;color:var(--inkt)}
  .kop .cta-klein{display:none}
}
@media (min-width:900px){.menu-knop{display:none}}
@media (min-width:640px) and (max-width:899px){.kop .cta-klein{display:inline-block}}

.pot{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

.melding{max-width:var(--breed);margin:1rem auto 0;padding:.9rem var(--marge);font-family:var(--mono);font-size:var(--fs-klein);letter-spacing:.02em;border-top:3px solid var(--inkt);border-bottom:1px solid var(--hairline)}
.melding-goed{color:var(--inkt)}
.melding-fout{color:var(--rubriek);border-top-color:var(--rubriek)}

.blad-kop{border-top:3px solid var(--inkt);padding-top:1rem;display:grid;grid-template-columns:1fr;gap:1rem 2rem}
@media (min-width:768px){.blad-kop{grid-template-columns:2fr 10fr}.blad-kop > *{grid-column:2}}
.blad-kop .stapnr{display:block}
.blad-kop h1{font-size:var(--fs-h1);font-variation-settings:"wdth" 96,"wght" 400;max-width:12ch;text-wrap:balance}
.blad-kop .lede{font-size:var(--fs-lede);line-height:1.45;max-width:38ch;color:var(--inkt-2);text-wrap:pretty}
.blad-kop .lede em{font-style:normal;border-bottom:2px solid var(--rubriek)}

.lees{margin-top:clamp(2rem,4vw,3.5rem);max-width:62ch;line-height:1.62}
@media (min-width:768px){.lees{margin-left:calc(100% / 12 * 2)}}
.lees p,.lees ul,.lees ol,.lees blockquote,.lees figure{margin:0 0 1.1rem}
.lees h2{font-size:clamp(1.5rem,2.4vw,2.2rem);font-variation-settings:"wdth" 104,"wght" 500;margin:2.25rem 0 .75rem;max-width:20ch}
.lees h3{font-size:var(--fs-h3);font-variation-settings:"wdth" 104,"wght" 500;margin:1.75rem 0 .5rem}
.lees ul{list-style:disc;padding-left:1.25rem}
.lees ol{list-style:decimal;padding-left:1.25rem}
.lees li{margin-bottom:.35rem}
.lees a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.lees a:hover{color:var(--rubriek)}
.lees blockquote{border-left:3px solid var(--rubriek);padding-left:1rem;color:var(--inkt-2)}
.lees img{border:1px solid var(--inkt)}
.lees .knop{margin-top:.5rem}

.onderdelen{border-top:1px solid var(--inkt);counter-reset:o}
.onderdeel{display:grid;grid-template-columns:1fr;gap:.75rem 2rem;padding:2rem 0 2.25rem;border-bottom:1px solid var(--hairline)}
@media (min-width:768px){.onderdeel{grid-template-columns:2fr 10fr}}
@media (min-width:1100px){.onderdeel{grid-template-columns:2fr 4fr 6fr}}
.onderdeel .nr{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;color:var(--rubriek);padding-top:.5rem}
.onderdeel h2{font-size:clamp(1.5rem,2.4vw,2.2rem);font-variation-settings:"wdth" 104,"wght" 500;line-height:1.05;max-width:16ch;text-wrap:balance}
.onderdeel .uitleg{color:var(--inkt-2);max-width:52ch;line-height:1.6}
.onderdeel .uitleg p + p{margin-top:1rem}
.onderdeel .vorm{margin-top:1.25rem;padding-top:.75rem;border-top:1px solid var(--hairline);font-family:var(--mono);font-size:var(--fs-klein);letter-spacing:.02em;color:var(--inkt)}
.onderdeel .vorm b{font-weight:500;color:var(--rubriek);margin-right:1em}

@media (min-width:1100px){.stappen-drie{grid-template-columns:repeat(3,minmax(0,1fr))}}

.overkant{display:grid;grid-template-columns:1fr;gap:1.5rem 2rem;border-top:3px solid var(--inkt);padding-top:1.25rem}
@media (min-width:768px){.overkant{grid-template-columns:2fr 6fr 4fr;align-items:end}.overkant .stapnr{grid-column:1}.overkant h2{grid-column:2}.overkant .acties{grid-column:3;justify-self:end}}
.overkant h2{font-size:var(--fs-h2);font-variation-settings:"wdth" 108,"wght" 500;max-width:16ch;text-wrap:balance}
.overkant p{color:var(--inkt-2);max-width:38ch;margin-top:.75rem}

.vlak-rood .geval .wie{color:#fbe7e2}
.vlak-rood .geval .wie .kant{color:#fff}
.vlak-rood .geval p{color:#fbe7e2}
.vlak-rood .geval .uitkomst{color:#fff;border-top-color:#e0a094}
.vlak-rood .geval .uitkomst small{color:#fbe7e2}
.vlak-rood .gevallen,.vlak-rood .geval{border-color:#cf7e6d}
.vlak-inkt .onderdeel .nr,.vlak-inkt .helft .nr{color:#ef7a63}

@media (max-width:899px){
  .js .onthul{opacity:1;transform:none;transition:none}
}

/* Naam: Magik wordt Mag ik */
.naamsectie{background:var(--klei)}
.naamspel{display:flex;align-items:baseline;justify-content:flex-start;margin:0 0 1.5rem;
  font-family:var(--display);font-weight:500;line-height:.9;letter-spacing:-.022em;
  font-size:clamp(3.4rem,12vw,9rem)}
.naam-kier{display:inline-block;width:0;transition:width .8s cubic-bezier(.22,.61,.36,1)}
.naamsectie.open .naam-kier{width:.28em}
.naam-tekst{max-width:46ch;margin-bottom:2.25rem}
.naam-tekst p{margin:0 0 .9rem}

.magiklijst{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--inkt)}
@media (min-width:700px){.magiklijst{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.magiklijst{grid-template-columns:1fr 1fr 1fr}}
.magiklijst li{padding:.85rem 1rem .85rem 0;border-bottom:1px solid rgba(22,21,19,.22);
  font-size:1.02rem;transition:color .12s ease}
.magiklijst li:hover{color:var(--rubriek)}
.naam-slot{max-width:52ch;color:var(--inkt-2)}

/* Systemen */
.taken{list-style:none;margin:0 0 2.5rem;padding:0;display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--inkt)}
@media (min-width:760px){.taken{grid-template-columns:1fr 1fr}}
.taken li{padding:1.1rem 1.5rem 1.1rem 0;border-bottom:1px solid var(--hairline);display:flex;
  flex-direction:column;gap:.3rem}
.taken b{font-size:1.12rem;font-variation-settings:"wght" 500}
.taken span{color:var(--inkt-2);font-size:.97rem;line-height:1.5}

.herkennen{border-left:3px solid var(--rubriek);padding:.25rem 0 .25rem 1.4rem;margin-bottom:2.5rem;max-width:58ch}
.herkennen h3{font-size:clamp(1.3rem,2vw,1.7rem);margin-bottom:.5rem}
.herkennen p{color:var(--inkt-2);line-height:1.6}

.koppelvlak{background:var(--inkt);color:#c9c6bf;padding:clamp(1.75rem,3vw,2.75rem);max-width:none}
.koppelvlak .groot{font-family:var(--display);font-weight:500;color:#f6f5f2;
  font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.1;letter-spacing:-.022em;margin-bottom:1rem;max-width:20ch}
.koppelvlak p{max-width:60ch;line-height:1.6}
.koppelvlak p:last-child{color:#f6f5f2;margin-bottom:0}

/* Meedenken */
.mee-raster{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid #3a3833;margin-bottom:2.5rem}
@media (min-width:820px){.mee-raster{grid-template-columns:repeat(3,1fr)}}
.mee-blok{padding:1.4rem 1.6rem 1.6rem 0;border-bottom:1px solid #3a3833}
@media (min-width:820px){.mee-blok+.mee-blok{padding-left:1.6rem;border-left:1px solid #3a3833}}
.mee-blok h3{font-size:1.2rem;margin:.5rem 0 .55rem}
.mee-blok p{line-height:1.6;font-size:.97rem}

.beste-klant{border-top:3px solid #ef7a63;padding-top:1.5rem;max-width:62ch}
.beste-klant h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:.6rem}
.beste-klant .klap{color:#f6f5f2;font-size:1.08rem;line-height:1.55}

/* Soul: standaard kan iedereen */
.soulblok{background:var(--klei)}
.soul-raster{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:1.75rem}
@media (min-width:900px){.soul-raster{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:3rem}}
.soul-tekst p{max-width:44ch;margin:0 0 1rem;font-size:1.06rem;line-height:1.6}
.klantladder{list-style:none;margin:0;padding:0;counter-reset:kl;border-top:1px solid var(--inkt)}
.klantladder li{counter-increment:kl;padding:1rem 0 1rem 3rem;border-bottom:1px solid rgba(22,21,19,.22);position:relative}
.klantladder li::before{content:counter(kl,decimal-leading-zero);position:absolute;left:0;top:1.05rem;
  font-family:var(--mono);font-size:var(--fs-mono);color:var(--rubriek)}
.klantladder b{display:block;font-size:1.1rem;font-variation-settings:"wght" 500;margin-bottom:.2rem}
.klantladder span{color:var(--inkt-2);font-size:.97rem;line-height:1.5}
.soul-slot{max-width:60ch;font-size:1.06rem;line-height:1.6}
.soul-klap{border-top:3px solid var(--rubriek);padding-top:1.4rem;max-width:64ch}
.soul-klap .groot{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,3vw,2.3rem);
  line-height:1.12;letter-spacing:-.022em;margin-bottom:.9rem;max-width:22ch}
.soul-klap p{line-height:1.6}
.soul-klap .stil{color:var(--inkt-2);font-size:.98rem;margin-bottom:0}
.eigen{color:var(--rubriek);text-decoration:none;border-bottom:1px solid rgba(179,48,28,.4)}
.eigen:hover{border-bottom-color:var(--rubriek)}
.vlak-warm .eigen{color:#8f2415;border-bottom-color:rgba(143,36,21,.45)}
.chatbot{border-left:3px solid var(--inkt);padding:.25rem 0 .25rem 1.4rem;margin-bottom:2.5rem;max-width:62ch}
.chatbot .groot{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3vw,2.3rem);
  line-height:1.12;letter-spacing:-.022em;margin-bottom:.8rem}
.chatbot p{line-height:1.6;color:var(--inkt-2)}
.chatbot p:last-child{color:var(--inkt)}
.vraaglijst{display:grid;grid-template-columns:1fr;border-top:1px solid var(--inkt)}
@media (min-width:860px){.vraaglijst{grid-template-columns:1fr 1fr}}
.vraag{padding:1.4rem 2rem 1.5rem 0;border-bottom:1px solid var(--hairline)}
@media (min-width:860px){.vraag:nth-child(even){padding-left:2rem;border-left:1px solid var(--hairline)}}
.vraag h3{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.15;margin-bottom:.5rem;max-width:24ch}
.vraag p{color:var(--inkt-2);line-height:1.6;font-size:.99rem;max-width:52ch;margin:0}
.prijs-raster{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:900px){.prijs-raster{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:3rem}}
.prijs-tekst p{max-width:46ch;line-height:1.6;margin:0 0 1rem}
.prijs-tekst .dik{font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.7rem);
  line-height:1.2;letter-spacing:-.022em;max-width:24ch;margin-top:1.4rem}
.prijs-winst{list-style:none;margin:0;padding:0;border-top:1px solid #d07a68}
.prijs-winst li{padding:.9rem 0;border-bottom:1px solid #d07a68}
.prijs-winst b{display:block;font-size:1.06rem;font-variation-settings:"wght" 500;margin-bottom:.15rem}
.prijs-winst span{font-size:.96rem;line-height:1.5}
.altijdopen{margin-top:2.5rem;border-top:1px solid #d07a68;padding-top:1.75rem}
.altijdopen .groot{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,2.8vw,2.2rem);
  line-height:1.12;letter-spacing:-.022em;margin-bottom:1.1rem}
.momenten>p{max-width:52ch;line-height:1.6}
.momenten ul{list-style:none;margin:1.2rem 0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:820px){.momenten ul{grid-template-columns:1fr 1fr}}
.momenten li{padding:.85rem 1.5rem .85rem 0;border-top:1px solid #d07a68}
.momenten b{display:block;font-variation-settings:"wght" 500;font-size:1.03rem}
.momenten span{font-size:.95rem;line-height:1.5}
.momenten .rustig{max-width:46ch;margin-bottom:0}
.slotsectie .slot-in{max-width:none}
.slotsectie h2{font-size:clamp(2rem,5.2vw,4.2rem);line-height:1.02;letter-spacing:-.022em;
  margin:.4rem 0 1.75rem;max-width:16ch}
.slotvragen{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:1fr;
  border-top:1px solid #3a3833;max-width:none}
@media (min-width:820px){.slotvragen{grid-template-columns:1fr 1fr}}
.slotvragen li{padding:.8rem 1.5rem .8rem 0;border-bottom:1px solid #3a3833;font-size:1.05rem;color:#c9c6bf}
.slotvraag{font-family:var(--display);font-weight:500;color:#f6f5f2;
  font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.1;letter-spacing:-.022em;max-width:20ch;margin-bottom:1.5rem}
.slot-acties{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.slot-acties .stil{margin:0;color:#9d9a93;font-size:.97rem}
.drieklanten{background:var(--klei)}
.drie-inleiding p{max-width:56ch;line-height:1.6;margin:0 0 .9rem}
.drie-lijst{list-style:none;margin:2rem 0;padding:0;border-top:1px solid var(--inkt)}
.drie-lijst li{display:grid;grid-template-columns:1fr;gap:.2rem 2.5rem;
  padding:1.3rem 0 1.4rem;border-bottom:1px solid rgba(22,21,19,.22)}
@media (min-width:820px){.drie-lijst li{grid-template-columns:14rem minmax(0,1fr) 12rem;align-items:start}
  .drie-lijst li .nr{grid-row:1}
  .drie-lijst li h3{grid-column:1;margin-top:0}
  .drie-lijst li p{grid-column:2}
  .drie-lijst li .wat{grid-column:3;grid-row:1;border-top:0;margin:0;padding-top:0;text-align:right}}
.drie-lijst .nr{color:var(--rubriek);font-size:var(--fs-mono)}
.drie-lijst h3{font-size:clamp(1.3rem,2vw,1.75rem);margin:.45rem 0 .6rem}
.drie-lijst p{color:var(--inkt-2);line-height:1.6;font-size:.99rem;margin:0 0 .8rem}
.drie-lijst .wat{color:var(--inkt);font-family:var(--mono);font-size:var(--fs-mono);
  border-top:1px solid rgba(22,21,19,.22);padding-top:.7rem;margin:1rem 0 0}
.drie-slot{max-width:60ch}
.drie-slot p{line-height:1.6}
.drie-slot .klap{font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,2.2vw,1.6rem);
  letter-spacing:-.022em;margin-top:.6rem}

.hero-tool{background:var(--inkt);color:#e8e6e1;padding:clamp(1.25rem,2.2vw,2rem)}
.hero-tool h2,.hero-tool .ger-kop{color:#f6f5f2}
.hero-tool .voortgang,.hero-tool .voortgang *{color:#9d9a93}
.hero-tool .voortgang .nu{color:#f6f5f2}
.hero-tool .knel{background:#1c1b19;border-color:#33312d;color:#e8e6e1}
.hero-tool .knel .kant{color:#9d9a93}
.hero-tool .knel .kant::before{border-color:#9d9a93}
.hero-tool .knel:hover{border-color:var(--rubriek-licht,#ef7a63)}
.hero-tool .knel[aria-pressed="true"]{background:#f6f5f2;color:var(--inkt);border-color:#f6f5f2}
.hero-tool .knel[aria-pressed="true"] .kant{color:var(--inkt)}
.hero-tool .knel .nr,.hero-tool .stap-tel{color:#ef7a63}
.hero-tool label,.hero-tool legend{color:#e8e6e1}
.hero-tool input[type=text],.hero-tool input[type=email],.hero-tool input[type=tel]{
  background:#1c1b19;border-color:#33312d;color:#f6f5f2}
.hero-tool .knop{background:#f6f5f2;color:var(--inkt);border-color:#f6f5f2}
/* Foto's: nuchter in zwart-wit, kleur zodra je er aandacht aan geeft */
.mensen img,.samen img{filter:grayscale(1) contrast(1.06);transition:filter .45s ease}
.mensen figure:hover img,.mensen img:hover,.samen:hover img{filter:grayscale(0) contrast(1)}
.samen img.flits{animation:kleurflits 1.5s ease 1}
@keyframes kleurflits{
  0%{filter:grayscale(1) contrast(1.06)}
  18%{filter:grayscale(0) contrast(1)}
  32%{filter:grayscale(1) contrast(1.06)}
  46%{filter:grayscale(0) contrast(1)}
  100%{filter:grayscale(1) contrast(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .samen img.flits{animation:none}
  .mensen img,.samen img{transition:none}
}

/* De voorbeeldconfiguratoren */
.demosectie{background:var(--inkt);color:#c9c6bf}
.demosectie h2{color:#f6f5f2}
.demosectie .uitleg{color:#c9c6bf}
.demosectie .sectie-kop::before{background:#4a4844}
.demo-tabs{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid #3a3833;border-bottom:1px solid #3a3833;margin-bottom:1.75rem}
.demo-tab{background:none;border:0;border-right:1px solid #3a3833;color:#9d9a93;font-family:var(--tekst);
  font-size:1rem;padding:.85rem 1.25rem;cursor:pointer;transition:color .12s ease,background .12s ease}
.demo-tab:hover{color:#f6f5f2}
.demo-tab[aria-selected="true"]{background:#f6f5f2;color:var(--inkt);font-variation-settings:"wght" 500}
.demo-vak{display:grid;grid-template-columns:1fr;gap:1.75rem}
@media (min-width:900px){.demo-vak{grid-template-columns:minmax(0,1fr) 20rem;gap:2.5rem}}
.demo-kop{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:baseline}
.demo-vakgebied{font-family:var(--mono);font-size:var(--fs-mono);color:#ef7a63;margin:0}
.demo-regel{color:#f6f5f2;font-size:1.08rem;margin:0}
.demo-schuif{margin-bottom:1.5rem}
.demo-schuif label{display:block;margin-bottom:.5rem;color:#c9c6bf}
.demo-schuif b{color:#f6f5f2;font-variation-settings:"wght" 500}
.demo-schuif input[type=range]{width:100%;max-width:32rem;accent-color:#ef7a63}
.demo-groep{border:0;padding:0;margin:0 0 1.4rem}
.demo-groep legend{color:#9d9a93;font-family:var(--mono);font-size:var(--fs-mono);margin-bottom:.6rem;padding:0}
.demo-optie{display:block;width:100%;max-width:32rem;text-align:left;background:#1c1b19;color:#e8e6e1;
  border:1px solid #33312d;border-bottom:0;padding:.75rem .9rem;cursor:pointer;font-family:var(--tekst);
  transition:border-color .12s ease,background .12s ease}
.demo-groep .demo-optie:last-of-type{border-bottom:1px solid #33312d}
.demo-optie:hover{border-color:#ef7a63}
.demo-optie.aan{background:#f6f5f2;color:var(--inkt);border-color:#f6f5f2}
.demo-naam{display:block;font-variation-settings:"wght" 500}
.demo-toe{display:block;font-size:.92rem;opacity:.75;margin-top:.1rem}
.demo-uitkomst{border-top:3px solid #ef7a63;padding-top:1.1rem;align-self:start}
.demo-label{font-family:var(--mono);font-size:var(--fs-mono);color:#ef7a63;margin:0 0 .3rem}
.demo-bedrag{font-family:var(--display);font-weight:500;color:#f6f5f2;letter-spacing:-.022em;
  font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1;margin:0 0 .8rem}
.demo-klein{font-size:.9rem;color:#9d9a93;line-height:1.5;margin:0}
.demo-slot{margin-top:2rem;max-width:60ch;color:#c9c6bf}

/* Meer kleur, minder kaal papier */
.systemen{background:var(--klei)}
.vragen{background:var(--klei)}
.demosectie .demo-tab[aria-selected="true"]{background:var(--rubriek);color:#fff;border-color:var(--rubriek)}
.demosectie .demo-optie.aan{background:var(--rubriek);color:#fff;border-color:var(--rubriek)}
.demosectie .demo-bedrag{color:#ef7a63}
.hero-tool .knel[aria-pressed="true"]{background:var(--rubriek);color:#fff;border-color:var(--rubriek)}
.hero-tool .knel[aria-pressed="true"] .kant{color:#fff}
.hero-tool .knel[aria-pressed="true"] .kant::before{border-color:#fff}
.herkennen{border-left-color:var(--rubriek)}
.taken li:hover b{color:var(--rubriek)}
.vraag h3{color:var(--inkt)}
.vraag:hover h3{color:var(--rubriek)}

/* Gekleurde vlakken lopen door tot de schermrand, de inhoud blijft in de kolom */
.vlak-warm,.vlak-inkt,.vlak-rood,.systemen,.vragen,.drieklanten,.naamsectie,.soulblok,.demosectie{
  box-shadow:0 0 0 100vmax var(--vlakkleur,transparent);
  clip-path:inset(0 -100vmax);
}
.vlak-warm,.systemen,.vragen,.drieklanten,.naamsectie,.soulblok{--vlakkleur:var(--klei)}
.vlak-inkt,.demosectie{--vlakkleur:var(--inkt)}
.vlak-rood{--vlakkleur:var(--rubriek)}
/* De voet */
.voetvlak{background:var(--inkt);color:#c9c6bf;box-shadow:0 0 0 100vmax var(--inkt);clip-path:inset(0 -100vmax)}
.voetvlak .voet{display:grid;grid-template-columns:1fr;gap:2rem;padding-block:clamp(2.5rem,5vw,4rem) 1.5rem;
  border-top:0}
@media (min-width:860px){.voetvlak .voet{grid-template-columns:1.5fr 1fr 1.2fr;gap:3rem}}
.voet-merk .woordmerk{font-family:var(--display);font-weight:600;font-size:1.6rem;color:#f6f5f2;
  text-decoration:none;letter-spacing:-.022em}
.voet-merk .woordmerk span{color:var(--rubriek)}
.voet-merk .tag{color:#9d9a93;margin:.2rem 0 1rem}
.voet-zin{max-width:34ch;line-height:1.6;margin-bottom:1.2rem}
.voet-bel a{font-family:var(--display);font-size:1.35rem;color:#f6f5f2;text-decoration:none;
  border-bottom:2px solid var(--rubriek)}
.voet-klein{color:#9d9a93;font-size:.92rem;line-height:1.5;margin:.5rem 0 0;max-width:36ch}
.voet-kop{color:#f6f5f2;font-variation-settings:"wght" 500;margin:0 0 .7rem}
.voet-kop.tweede{margin-top:1.6rem}
.voet-kolom ul{list-style:none;margin:0;padding:0}
.voet-kolom li{margin-bottom:.5rem}
.voet-kolom a{color:#c9c6bf;text-decoration:none;border-bottom:1px solid transparent}
.voet-kolom a:hover{color:#f6f5f2;border-bottom-color:var(--rubriek)}
.voetvlak .voet-slot{border-top:1px solid #3a3833;padding:1.2rem 0 2rem;display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#7d7a74;font-size:.9rem;margin:0;width:auto}

/* Invullen mag spannender: grote velden, een lijn die oplicht, geen doosjes */
.ger-form label,.aanvraag label,.form-rij label{position:relative;display:block}
input[type=text],input[type=email],input[type=tel],textarea,select{
  border-radius:0;
  font-size:1.05rem;
  padding:.9rem .2rem;
  background:transparent;
  border:0;
  border-bottom:2px solid rgba(22,21,19,.28);
  transition:border-color .18s ease,background .18s ease;
}
input[type=text]:hover,input[type=email]:hover,input[type=tel]:hover,textarea:hover{
  border-bottom-color:rgba(22,21,19,.55);
}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,textarea:focus{
  outline:none;
  border-bottom-color:var(--rubriek);
  background:rgba(179,48,28,.05);
}
.vlak-inkt input[type=text],.vlak-inkt input[type=email],.vlak-inkt input[type=tel],
.hero-tool input[type=text],.hero-tool input[type=email],.hero-tool input[type=tel],
.demosectie input,.slotsectie input{
  border-bottom-color:rgba(246,245,242,.3);color:#f6f5f2;background:transparent;
}
.vlak-inkt input:focus,.hero-tool input:focus,.demosectie input:focus,.slotsectie input:focus{
  border-bottom-color:#ef7a63;background:rgba(239,122,99,.09);
}
input::placeholder,textarea::placeholder{color:rgba(22,21,19,.35)}
.vlak-inkt input::placeholder,.hero-tool input::placeholder{color:rgba(246,245,242,.35)}

/* De schuif van de configurator */
input[type=range]{accent-color:var(--rubriek);height:2rem}
.demosectie input[type=range]{accent-color:#ef7a63}

/* Keuzeknoppen: de gekozen staat blijft ingedrukt en kleurt */
.knel,.keuze,.demo-optie{border-radius:0}
.knel:focus-visible,.keuze:focus-visible,.demo-optie:focus-visible,.demo-tab:focus-visible{
  outline:3px solid var(--rubriek);outline-offset:2px}
.hero-tool .voortgang li.is-actief,.hero-tool .voortgang li.is-actief b{color:#f6f5f2}
.hero-tool .voortgang li.is-klaar{color:#c9c6bf}
/* Leesbaarheid op de donkere vlakken, gemeten en gerepareerd */
.hero-tool .stapnr,.demosectie .stapnr,.vlak-inkt .stapnr,.slotsectie .stapnr{color:#ef7a63}
.voetvlak .voet-zin{color:#c9c6bf}
.voetvlak .voet-slot span{color:#9d9a93}
.voetvlak .woordmerk span{color:#ef7a63}
.voetvlak .voet-klein{color:#a5a29b}

/* Soul en Zo werkt het */

.verhaal{max-width:62ch;line-height:1.62}
@media (min-width:768px){.verhaal{margin-left:calc(100% / 12 * 2)}}
.verhaal p + p{margin-top:1.1rem}
.verhaal + .verhaal{margin-top:1.1rem}
.verhaal .klap{font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.2;letter-spacing:-.022em;max-width:28ch;margin-top:1.6rem}
.verhaal .mening{border-left:3px solid var(--rubriek);padding-left:1.25rem;font-size:1.06rem;margin-top:1.6rem}
.grens-noot{border-top:1px solid var(--hairline);padding-top:1rem;margin-top:1.6rem;color:var(--inkt-2);font-size:.97rem;max-width:52ch}
.vlak-inkt .verhaal .klap{color:#f6f5f2}
.vlak-inkt .grens-noot{border-top-color:#3a3833;color:#9d9a93}
.vlak-rood .verhaal .klap{color:#fff}
.vlak-rood .grens-noot{border-top-color:#d07a68;color:#fbe7e2}

.bronnen{margin:0 0 2rem;display:grid;grid-template-columns:1fr;border-top:1px solid #4a4844}
@media (min-width:768px){.bronnen{grid-template-columns:2fr 10fr}.bronnen li{grid-column:2}}
.bronnen li{display:grid;grid-template-columns:1fr;gap:.2rem 2rem;padding:1rem 0;border-bottom:1px solid #3a3833}
@media (min-width:640px){.bronnen li{grid-template-columns:13rem minmax(0,1fr)}}
.bronnen b{font-size:1.08rem;font-variation-settings:"wght" 500;color:#f6f5f2}
.bronnen span{color:#c9c6bf;font-size:.97rem;line-height:1.5;max-width:44ch}

.merk-delen{margin:2rem 0 0;border-top:1px solid var(--inkt)}
@media (min-width:768px){.merk-delen{margin-left:calc(100% / 12 * 2)}}
.merk-delen > div{display:grid;grid-template-columns:1fr;gap:.4rem 2rem;padding:1.25rem 0 1.4rem;border-bottom:1px solid var(--hairline)}
@media (min-width:640px){.merk-delen > div{grid-template-columns:9rem minmax(0,1fr)}}
.merk-delen dt{font-family:var(--display);font-weight:500;font-size:1.25rem;letter-spacing:-.02em;line-height:1.12}
.merk-delen dd{color:var(--inkt-2);line-height:1.6;max-width:56ch}

.zonde{counter-reset:z;border-top:1px solid var(--inkt);margin-bottom:.5rem}
@media (min-width:768px){.zonde{margin-left:calc(100% / 12 * 2)}}
.zonde li{counter-increment:z;position:relative;padding:1.3rem 0 1.4rem 3.25rem;border-bottom:1px solid var(--hairline)}
.zonde li::before{content:counter(z,decimal-leading-zero);position:absolute;left:0;top:1.4rem;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;color:var(--rubriek)}
.zonde b{display:block;font-family:var(--display);font-weight:500;font-size:1.2rem;letter-spacing:-.02em;line-height:1.15;margin-bottom:.45rem;max-width:28ch}
.zonde p{color:var(--inkt-2);line-height:1.6;max-width:56ch}

.fase{display:grid;grid-template-columns:1fr;gap:1.25rem 2rem;padding-top:1rem;border-top:3px solid var(--inkt)}
@media (min-width:768px){.fase{grid-template-columns:3fr 9fr}}
.fase .wanneer{font-family:var(--display);font-size:clamp(2rem,3.4vw,3.2rem);font-weight:200;line-height:1;letter-spacing:-.022em;font-variation-settings:"wdth" 92,"wght" 200;text-wrap:balance;max-width:8ch}
.fase .wanneer b{font-weight:600;font-variation-settings:"wdth" 92,"wght" 600;color:var(--rubriek)}
.fase-inhoud{min-width:0;max-width:62ch;line-height:1.62}
.fase-inhoud h2{font-size:var(--fs-h2);font-variation-settings:"wdth" 108,"wght" 500;max-width:16ch;text-wrap:balance;margin-bottom:1.25rem}
.fase-inhoud p + p{margin-top:1.1rem}
.fase-inhoud .grens-noot{margin-top:1.75rem}
.vlak-inkt .fase{border-top-color:#f6f5f2}
.vlak-inkt .fase .wanneer{color:#f6f5f2}
.vlak-inkt .fase .wanneer b{color:#ef7a63}

.vijf{counter-reset:v;margin:1.25rem 0 1.4rem;border-top:1px solid var(--inkt)}
.vijf li{counter-increment:v;position:relative;padding:.75rem 0 .75rem 2.75rem;border-bottom:1px solid var(--hairline);font-size:1.04rem}
.vijf li::before{content:counter(v,decimal-leading-zero);position:absolute;left:0;top:.9rem;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;color:var(--rubriek)}

.voorstelblad{margin:1.5rem 0 1.5rem;max-width:30rem;border:1px solid var(--inkt);background:var(--papier);padding:1.25rem 1.4rem 1.5rem}
.voorstelblad .blad-titel{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;color:var(--inkt-2);padding-bottom:.7rem;border-bottom:3px solid var(--inkt);margin-bottom:.4rem}
.voorstelblad ol{counter-reset:b}
.voorstelblad li{counter-increment:b;display:grid;grid-template-columns:1.6rem 1fr;gap:.6rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--hairline);font-size:.98rem}
.voorstelblad li::before{content:counter(b);font-family:var(--mono);font-size:var(--fs-mono);color:var(--rubriek)}
.voorstelblad li::after{content:"";grid-column:2;height:1px;border-bottom:1px dotted var(--inkt-3);margin-top:.35rem;opacity:.6}
.voorstelblad li:last-child{border-bottom:0}

.vraagt{margin:1.6rem 0;border-top:1px solid #4a4844}
.vraagt li{display:grid;grid-template-columns:1fr;gap:.15rem 2rem;padding:.9rem 0;border-bottom:1px solid #3a3833}
@media (min-width:640px){.vraagt li{grid-template-columns:15rem minmax(0,1fr)}}
.vraagt b{font-size:1.06rem;font-variation-settings:"wght" 500;color:#f6f5f2}
.vraagt span{color:#c9c6bf;font-size:.97rem;line-height:1.5}

.tabelbak{overflow-x:auto;border-top:1px solid var(--inkt)}
@media (min-width:1100px){.tabelbak{margin-left:calc(100% / 12 * 2)}}
.vormen{width:100%;min-width:40rem;border-collapse:collapse;text-align:left}
.vormen th,.vormen td{padding:1rem 1.5rem 1.1rem 0;vertical-align:top;border-bottom:1px solid var(--hairline);line-height:1.5;font-size:.97rem}
.vormen thead th{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;color:var(--inkt-2);font-weight:500;padding-top:.7rem;padding-bottom:.6rem}
.vormen tbody th{font-family:var(--display);font-weight:500;font-size:1.15rem;letter-spacing:-.02em;line-height:1.15;width:14rem;color:var(--inkt)}
.vormen td{color:var(--inkt-2);max-width:26rem}
.vormen td:last-child,.vormen th:last-child{padding-right:0}
.tabel-noot{margin-top:1.25rem;max-width:56ch;color:var(--inkt-2);line-height:1.6}
@media (min-width:1100px){.tabel-noot{margin-left:calc(100% / 12 * 2)}}

.prijsregels{border-top:1px solid #e0a094}
@media (min-width:768px){.prijsregels{margin-left:calc(100% / 12 * 2)}}
.prijsregels > div{display:grid;grid-template-columns:1fr;gap:.4rem 2rem;padding:1.25rem 0 1.4rem;border-bottom:1px solid #d07a68}
@media (min-width:640px){.prijsregels > div{grid-template-columns:15rem minmax(0,1fr)}}
.prijsregels dt{font-family:var(--display);font-weight:500;font-size:1.25rem;letter-spacing:-.02em;line-height:1.12;color:#fff}
.prijsregels dd{color:#fbe7e2;line-height:1.6;max-width:54ch}

.handboek-vragen{border-top:1px solid var(--inkt)}
.handboek-vragen article{display:grid;grid-template-columns:1fr;gap:.5rem 2rem;padding:1.4rem 0 1.5rem;border-bottom:1px solid var(--hairline)}
@media (min-width:860px){.handboek-vragen article{grid-template-columns:4fr 8fr}}
.handboek-vragen h3{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.15;max-width:22ch}
.handboek-vragen p{color:var(--inkt-2);line-height:1.6;max-width:56ch}
.handboek-vragen a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.handboek-vragen a:hover{color:var(--rubriek)}
@media (hover:hover){.handboek-vragen article:hover h3{color:var(--rubriek)}}

.zaak{display:grid;grid-template-columns:1fr;gap:1.5rem 3rem;border-top:3px solid var(--inkt);padding-top:1.25rem}
@media (min-width:900px){
  .zaak{grid-template-columns:4fr 8fr;gap:2rem clamp(2rem,5vw,5rem)}
  .zaak-om{grid-template-columns:8fr 4fr}
  .zaak-om .zaak-zij{order:2}
  .zaak-zij{position:sticky;top:calc(var(--kopbalk) + 1rem);align-self:start}
}
.zaak-meta{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;font-weight:500;color:var(--inkt-2);margin-bottom:.9rem}
.zaak-meta::before{content:"";display:inline-block;width:1.25rem;height:1px;background:var(--rubriek);vertical-align:middle;margin-right:.8em}
.zaak-zij h2{font-size:var(--fs-h2);font-variation-settings:"wdth" 104,"wght" 500;line-height:1.02;letter-spacing:-.022em;max-width:14ch;text-wrap:balance}
.zaak-tekst{max-width:60ch}
.zaak-tekst h3{font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:-.005em;line-height:1.2;margin:1.75rem 0 .4rem}
.zaak-tekst h3:first-child{margin-top:.25rem}
.zaak-tekst h3::before{content:"";display:inline-block;width:1rem;height:1px;background:var(--rubriek);vertical-align:middle;margin-right:.6em}
.zaak-tekst p{line-height:1.62;color:var(--inkt-2)}
.zaak-tekst h3 + p{color:var(--inkt)}
.zaak-open{margin-top:2rem;border:1px solid var(--inkt);padding:1rem 1.2rem 1.1rem;font-family:var(--display);font-weight:400;font-size:1.02rem;line-height:1.45;letter-spacing:-.005em;color:var(--inkt)}
.zaak-open::before{content:"In cijfers";display:block;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;font-weight:500;color:var(--rubriek);margin-bottom:.5rem}
.vlak-warm .zaak-open{background:var(--papier)}
.vlak-inkt .zaak{border-top-color:#4a4844}
.vlak-inkt .zaak-meta{color:#ef7a63}
.vlak-inkt .zaak-tekst h3 + p{color:#f6f5f2}
.vlak-inkt .zaak-open{border-color:#4a4844;color:#f6f5f2;background:#1c1b19}
.vlak-inkt .zaak-open::before{color:#ef7a63}

.metingen{border-top:1px solid var(--inkt)}
@media (min-width:768px){.metingen{margin-left:calc(100% / 12 * 2)}}
.meting{display:grid;grid-template-columns:1fr;gap:.6rem 3rem;padding:1.6rem 0 1.9rem;border-bottom:1px solid var(--hairline)}
@media (min-width:900px){.meting{grid-template-columns:5fr 7fr}}
.meting h3{font-size:clamp(1.3rem,2vw,1.75rem);font-variation-settings:"wdth" 104,"wght" 500;line-height:1.1;max-width:18ch;text-wrap:balance}
.meting p{color:var(--inkt-2);line-height:1.62;max-width:58ch}

.lijkt{border-top:3px solid #e0a094;padding-top:1.25rem}
.lijkt h2{font-size:clamp(2rem,5vw,4rem);line-height:1.02;letter-spacing:-.022em;font-variation-settings:"wdth" 96,"wght" 400;max-width:14ch;text-wrap:balance}
.lijkt p{margin-top:1.25rem;max-width:46ch;line-height:1.55}
.lijkt .acties{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.vlak-rood .knop-stil{color:#fff}
.vlak-rood .knop-stil:hover{color:#fbe7e2}
.vlak-rood .tel{border-bottom-color:#e0a094}
.vlak-rood .tel:hover{color:#fbe7e2;border-bottom-color:#fff}

.mens{display:grid;grid-template-columns:1fr;gap:1.75rem 3rem;border-top:3px solid var(--inkt);padding-top:1.25rem}
@media (min-width:900px){.mens-samen{grid-template-columns:6fr 6fr;align-items:start}}
.mens-foto{margin:0;min-width:0}
.mens-foto img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:50% 15%;border:1px solid var(--inkt);background:var(--tint)}
.mens-portret img{aspect-ratio:4/5;object-position:50% 8%}
@media (max-width:899px){.mens-portret img{aspect-ratio:4/3;object-position:50% 12%}}
.mens h2{font-size:var(--fs-h2);font-variation-settings:"wdth" 104,"wght" 500;line-height:1.02;letter-spacing:-.022em;max-width:14ch;text-wrap:balance}
.mens-tekst{max-width:58ch}
.mens-tekst p{line-height:1.62;color:var(--inkt-2)}
.mens-tekst p + p{margin-top:1rem}
.mens-tekst .kan{font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,1.3vw,1.35rem);line-height:1.38;letter-spacing:-.01em;color:var(--inkt);max-width:34ch;text-wrap:pretty}
.mens-tekst .mens-link{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--hairline);color:var(--inkt)}
.mens-kop .stapnr{display:block;margin-bottom:.6rem}
@media (min-width:768px){
  .mens-een{grid-template-columns:2fr 10fr}
  .mens-een .mens-tekst{grid-column:2}
  .mens-een .mens-kop{grid-column:1 / -1;display:grid;grid-template-columns:2fr 10fr;gap:1rem 3rem;align-items:baseline}
  .mens-een .mens-kop h2{grid-column:2}
}
@media (min-width:900px){.mens-eline{grid-template-columns:4fr 8fr;align-items:start}}
.vlak-inkt .mens{border-top-color:#4a4844}
.vlak-inkt .mens-tekst p,.vlak-inkt .zaak-tekst p,.vlak-inkt .meting p{color:#c9c6bf}
.vlak-inkt .mens-tekst .kan{color:#f6f5f2}
.vlak-inkt .mens-tekst .mens-link{border-top-color:#3a3833;color:#f6f5f2}
.vlak-inkt .eigen{color:#ef7a63;border-bottom-color:rgba(239,122,99,.45)}
.vlak-inkt .eigen:hover{border-bottom-color:#ef7a63}
.vlak-warm .mens-tekst .kan{color:var(--inkt)}

.nietlijst{border-top:1px solid #d07a68}
@media (min-width:768px){.nietlijst{margin-left:calc(100% / 12 * 2)}}
.nietlijst li{display:grid;grid-template-columns:1fr;gap:.4rem 3rem;padding:1.3rem 0 1.5rem;border-bottom:1px solid #d07a68}
@media (min-width:900px){.nietlijst li{grid-template-columns:4fr 8fr}}
.nietlijst h3{font-size:clamp(1.3rem,2vw,1.75rem);font-variation-settings:"wdth" 104,"wght" 500;line-height:1.1;text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:#f3c0b5}
.nietlijst p{line-height:1.6;max-width:54ch}
.praktisch{margin-top:2.25rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 2.5rem}
@media (min-width:768px){.praktisch{margin-left:calc(100% / 12 * 2)}}
.praktisch .nummer{color:#fff;margin-left:.5em}
.praktisch .nummer:hover{color:#fbe7e2}
.praktisch .stil{max-width:34ch;line-height:1.5}

.aanvraag-raster{display:grid;grid-template-columns:1fr;gap:2.5rem 3rem;border-top:3px solid var(--inkt);padding-top:1.25rem}
@media (min-width:900px){.aanvraag-raster{grid-template-columns:5fr 7fr;gap:2rem clamp(2rem,5vw,5rem);align-items:start}}
.aanvraag-uitleg h2{font-size:clamp(1.5rem,2.4vw,2.2rem);font-variation-settings:"wdth" 104,"wght" 500;line-height:1.05;max-width:16ch;text-wrap:balance}
.dan{margin:1.5rem 0;border-top:1px solid var(--inkt);counter-reset:dan}
.dan li{counter-increment:dan;position:relative;padding:.9rem 0 1rem 2.75rem;border-bottom:1px solid var(--hairline);line-height:1.55;max-width:44ch}
.dan li::before{content:counter(dan,decimal-leading-zero);position:absolute;left:0;top:1.05rem;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;color:var(--rubriek)}
.dan b{font-variation-settings:"wght" 500;font-weight:500}
.aanvraag-uitleg p{line-height:1.6;max-width:44ch}
.aanvraag-uitleg p + p{margin-top:1rem}
.aanvraag-uitleg .stil{color:var(--inkt-2);font-size:.98rem}
.aanvraag-bel{margin-top:1.5rem;font-family:var(--display);font-weight:400;font-size:1.05rem}
.aanvraag-bel .nummer{display:block;margin-top:.35rem}
.aanvraag-vak{background:var(--papier);border:1px solid var(--inkt);padding:clamp(1.25rem,2.5vw,2.25rem)}
.aanvraag-vak .fout{margin:0 0 1.5rem}
.aanvraag-vak .fout a{color:inherit}
.aanvraag-vak .dank{border-top:0;padding-top:0}
.aanvraag-vak .dank h2{font-size:clamp(1.5rem,2.4vw,2.2rem);letter-spacing:-.022em;font-variation-settings:"wdth" 104,"wght" 500;line-height:1.05;max-width:16ch}
.aanvraag-vak .dank h2:focus{outline:none}
.aanvraag-vak .dank p{color:var(--inkt-2);max-width:42ch;line-height:1.55}
.mind-eerlijk{max-width:56ch;border-left:3px solid var(--rubriek);padding-left:1.3rem;
  margin:0 0 1.6rem;line-height:1.6}