/* Huisstijl van eersteboekhouding.nl (Michael 2026-10-23): volwassen en rustig, zoals een zakelijke illustratie.
   Kleuren naar het voorbeeld dat Michael gaf (2026-10-24, de zakelijke site van een bank): petrolblauw als hoofdkleur
   en voor knoppen, donker nachtblauw voor tekst, framboos als klein accent (streepjes), en wit en heel licht aquablauw
   als vlakken. Eigen letter en eigen vormen, alleen de kleuren zijn de inspiratie. De variabelen heten nog --geel.
   Komt na shared/site.css (config.stijl). */

/* De letters staan op onze eigen site (Michael 2026-10-24): bezoekers halen niets bij Google op. Alleen de Latijnse
   tekens (met é, ë, €), zoals Google Fonts ze levert; licenties in letters/OFL-*.txt (SIL Open Font License 1.1). */
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400 900;font-stretch:100%;font-display:swap;src:url("letters/nunito-sans.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("letters/ibm-plex-mono-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("letters/ibm-plex-mono-600.woff2") format("woff2")}

:root{
  --geel:#057993;--geel-donker:#04667c;--geel-zacht:#e6f6f6;--accent-tekst:#035f73;--zand:#f5fcfc;--warm:#cf2c6a;--warm-zacht:#fbe3ec;
  --pop-jas:#103856;--pop-broek:#1b2b3a;--plant:#3d8a7d;
  --grafiet:#103856;--grijs:#507182;--lijn:#d9ecee;--papier:#f5fcfc;
  --salie:#d5e3d6;--salie-d:#3e7b5f;--terra:#f2d9c9;--terra-d:#a65633;--blauw:#d6e2ee;--blauw-d:#355f86;
  --oker:#f4e2a6;--oker-d:#86650f;--pruim:#e2dcea;--pruim-d:#5d4b84;--steen:#e7e6e2;--steen-d:#4b5563;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --shadow:none;
}
body{font-size:16.5px;line-height:1.65;background:#fff}
h1,h2,h3,h4{color:var(--grafiet);font-weight:700;letter-spacing:-.01em}
a{color:var(--grafiet);text-decoration:underline;text-decoration-color:var(--geel);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--grafiet)}
:focus-visible{outline-color:var(--grafiet)}
.badge{background:var(--geel-zacht);color:var(--grafiet)}

/* ---------- Knoppen: geel met grijze letters, recht ---------- */
.btn{border-radius:10px;border:2px solid var(--grafiet);color:var(--grafiet);font-weight:600;text-decoration:none}
.btn:hover{box-shadow:none;background:var(--papier);text-decoration:none}
.btn-primary{background:var(--grafiet);color:#fff;border-color:var(--grafiet)}
.btn-primary:hover{background:#2e3d50;border-color:#2e3d50;filter:none}
.btn-light{color:#fff;border-color:#fff;background:transparent}

/* ---------- Kop: altijd licht, met een gele streep eronder ---------- */
.site-header,.site-header.solid,.site-header.menu-open{position:sticky;background:#fff;color:var(--grafiet);box-shadow:none;border-bottom:4px solid var(--geel)}
.site-header .wrap{height:68px}
.wordmark{color:var(--grafiet);font-weight:700}
.wordmark .grad-text{background:none;color:var(--grafiet);-webkit-text-fill-color:currentColor;box-shadow:inset 0 -.38em 0 var(--geel)}
.wm-tld{color:var(--grijs);opacity:1}
.main-nav a{color:var(--grafiet);font-weight:500;text-decoration:none}
.main-nav a:hover{background:var(--papier);color:var(--grafiet)}
.main-nav a[aria-current=page]{color:var(--grafiet);font-weight:700;box-shadow:inset 0 -3px 0 var(--geel);border-radius:0}
.main-nav .nav-login{border:2px solid var(--grafiet);border-radius:10px}
.menu-btn{color:var(--grafiet)}
@media (max-width:899px){
  .main-nav{top:72px;background:#fff;border-bottom:4px solid var(--geel);box-shadow:0 12px 20px rgba(0,0,0,.08)}
  .main-nav a{border-bottom:1px solid var(--lijn)}
}

/* ---------- Banden: wit en papiergrijs; "donkere" banden worden grafiet zonder plaatje ---------- */
.band{padding:64px 0}
@media (min-width:900px){.band{padding:84px 0}}
.band-grijs{background:var(--papier)}
.band-donker{background:var(--grafiet)}
.band-donker .scene{display:none}
.sec-head{text-align:left;margin:0 0 36px;max-width:760px}
.sec-head h2{position:relative;padding-top:18px}
.sec-head h2::before{content:"";position:absolute;left:0;top:0;width:44px;height:6px;background:var(--geel)}
.sec-head .sub{color:var(--grijs);font-size:17px}
.cta .sec-head{text-align:center;margin:0 auto 10px}
.cta .sec-head h2::before{left:50%;transform:translateX(-50%)}
.eyebrow{color:var(--grafiet);letter-spacing:.08em;font-size:12.5px;display:inline-block;background:var(--geel);padding:3px 10px;border-radius:6px}

/* ---------- Kop van de andere pagina's: licht papier, tekst links ---------- */
.page-hero,.page-hero.band-donker{background:var(--papier);color:var(--grafiet);text-align:left;padding:56px 0 44px;border-bottom:1px solid var(--lijn)}
.page-hero .scene{display:none}
.page-hero h1{color:var(--grafiet);margin:0 0 10px;max-width:820px}
.page-hero .sub{color:var(--grijs);margin:0;max-width:720px}
.page-hero .btn-row{justify-content:flex-start}
.page-hero .hero-note{color:var(--grijs)}
.page-hero p a,.band-donker.page-hero p a{color:var(--grafiet)}

/* ---------- Opening met kasboek (home) ---------- */
.opening{background:var(--papier);padding:56px 0 64px;border-bottom:1px solid var(--lijn)}
.opening-grid{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.opening-grid{grid-template-columns:1.05fr 1fr;gap:56px}.opening{padding:80px 0 88px}}
.opening h1{font-size:clamp(30px,4.4vw,46px);line-height:1.15;margin:14px 0 18px}
.opening .lead{font-size:18.5px;color:#45484f;max-width:560px}
.opening .hero-note{color:var(--grijs);font-size:13.5px;margin:14px 0 0}
.ledger{margin:0;background:#fff;border:1px solid var(--lijn);border-top:6px solid var(--geel);padding:18px 18px 14px;
  box-shadow:12px 12px 0 var(--grafiet);font-family:var(--mono);font-size:13px;min-width:0}
@media (max-width:520px){.ledger{box-shadow:6px 6px 0 var(--grafiet);padding:14px 10px 10px;font-size:11.5px}}
.ledger figcaption{font-family:var(--font);font-weight:700;font-size:14px;margin-bottom:10px;display:flex;justify-content:space-between}
.ledger table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ledger th{font-family:var(--font);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--grijs);text-align:left;padding:6px 6px;border-bottom:2px solid var(--grafiet)}
.ledger td{padding:8px 6px;border-bottom:1px solid #e9e8e2;vertical-align:top}
.ledger .num{text-align:right;white-space:nowrap}
.ledger .lg-d{color:var(--grijs);white-space:nowrap}
.ledger tfoot td{font-weight:600;border-top:2px solid var(--grafiet);border-bottom:3px double var(--grafiet);background:var(--geel-zacht)}
.ledger-note{font-family:var(--font);font-size:12.5px;color:var(--grijs);margin:10px 0 0}

/* ---------- Stappen ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:stap;border-top:2px solid var(--grafiet)}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,minmax(0,1fr));border-top:0}}
.steps li{counter-increment:stap;position:relative;padding:22px 0 22px 64px;border-bottom:1px solid var(--lijn)}
.steps li::before{content:counter(stap);position:absolute;left:0;top:20px;width:44px;height:44px;background:var(--geel);color:var(--grafiet);
  font:600 20px/44px var(--mono);text-align:center;border-radius:6px}
@media (min-width:900px){
  .steps li{padding:70px 22px 8px 0;border-bottom:0;border-top:2px solid var(--grafiet)}
  .steps li::before{top:14px}
}
.step-when{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--grijs);margin-bottom:4px}
.steps h3{font-size:19px;margin-bottom:6px}
.steps p{font-size:15px;margin-bottom:8px}

/* ---------- Onderwerpen (inhoudsopgave van de vragen) ---------- */
.topics{display:grid;gap:28px 40px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.topic h3{display:flex;align-items:center;gap:8px;font-size:17px;padding-bottom:10px;border-bottom:2px solid var(--grafiet);margin-bottom:6px}
.topic h3 svg{color:var(--grafiet);background:var(--geel);border-radius:6px;padding:3px;width:26px;height:26px}
.topic ul{list-style:none;margin:0;padding:0}
.topic li{padding:10px 0;border-bottom:1px solid var(--lijn)}
.topic li a{font-weight:600}
.topic li span{display:block;font-size:14px;color:var(--grijs)}

/* ---------- Kaarten: rechte vlakken met een gele rand links ---------- */
.card{border-radius:10px;box-shadow:none;border:1px solid var(--lijn);background:#fff}
.band-wit .card{background:#fff}
.cards .card{text-align:left;border-left:6px solid var(--geel)}
.cards .ico{width:44px;height:44px;border-radius:6px;background:var(--geel-zacht);color:var(--grafiet)}
.more{font-weight:600}

/* ---------- Tekst en beeld ---------- */
.checks li svg{color:var(--grafiet);background:var(--geel);border-radius:6px;padding:2px;width:20px;height:20px;margin-top:3px}
.feature-art svg{filter:grayscale(1) contrast(.95)}

/* ---------- Vragen ---------- */
.faq-groups{margin:0;max-width:860px}
.faq details{border-radius:10px;box-shadow:none;border:1px solid var(--lijn)}
.faq details[open]{border-left:6px solid var(--geel)}
.faq .plus::before,.faq .plus::after{background:var(--grafiet)}

/* ---------- Prijzen ---------- */
.prices{margin:0;max-width:none}
.price{border-radius:10px}
.price-head h3{color:var(--grafiet)}
.price .amount{font-family:var(--mono);font-weight:600;font-size:40px;color:var(--grafiet)}
.price.featured{box-shadow:none;border:2px solid var(--grafiet)}
.price.featured .price-head{background:var(--geel)}
.price.featured .price-head h3,.price.featured .per{color:var(--grafiet)}
.price-flag{background:var(--grafiet);color:var(--geel);border-radius:0 0 3px 3px}
.price-note{text-align:left}

/* ---------- Vraagpagina's ---------- */
.answer{background:var(--geel-zacht);border-left:6px solid var(--geel);border-radius:10px}
.answer-label{color:var(--grafiet)}
.source{border-radius:10px;border-left:6px solid var(--grafiet)}
.source h2 svg{color:var(--grafiet)}
.calc{border-radius:10px;box-shadow:none;border:1px solid var(--lijn);border-top:6px solid var(--geel)}
.calc-big{font-family:var(--mono);font-weight:600}
.calc-lines li,.calc-table td{font-family:var(--mono);font-size:14px}
.calc-field input:focus,.calc-field select:focus{outline-color:var(--geel-zacht);border-color:var(--grafiet)}
.calc-next{background:var(--geel-zacht)}
.calc-table tr.is-next{background:var(--geel-zacht)}
.related a{border-radius:10px;text-decoration:none}
.related a:hover{border-color:var(--grafiet);background:var(--geel-zacht)}
.related strong{color:var(--grafiet)}
.prose h2{border-bottom:2px solid var(--geel);padding-bottom:6px;display:inline-block}
.placeholder{background:var(--geel-zacht);color:var(--grafiet)}

/* ---------- Voet: grafiet met gele koppen ---------- */
.site-footer{border-top:6px solid var(--geel)}
.site-footer h4{color:var(--geel)}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--geel)}
@media (min-width:1000px){.footer-grid{grid-template-columns:.7fr repeat(5,1fr)}}

/* ---------- Voorbeeldscherm in de opening: één bon, een paar regels, één vraag ---------- */
.mock{margin:0;background:#fff;border:1px solid var(--lijn);border-radius:6px;box-shadow:12px 12px 0 var(--grafiet);overflow:hidden;max-width:460px;justify-self:center;width:100%}
@media (max-width:520px){.mock{box-shadow:6px 6px 0 var(--grafiet)}}
.mock-bar{display:flex;align-items:center;gap:6px;background:var(--grafiet);color:#e9e9e6;font-size:12.5px;padding:9px 14px}
.mock-bar span{width:9px;height:9px;border-radius:50%;background:#55585f}
.mock-bar span:nth-child(3){margin-right:8px}
.mock-body{padding:20px 22px 22px}
.mock-file{display:flex;align-items:center;gap:10px;background:var(--papier);border:1px dashed #c9c8c1;border-radius:4px;padding:10px 12px;font-size:13.5px;color:var(--grijs);margin-bottom:16px}
.mock-file svg{color:var(--grafiet)}
.mock h3{font-size:18px;margin-bottom:10px}
.mock dl{margin:0}
.mock dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #ecebe6}
.mock dt{color:var(--grijs)}
.mock dd{margin:0;font-family:var(--mono);font-weight:600;text-align:right}
.mock-q{margin:16px 0 10px;font-weight:600}
.mock-btns{display:flex;gap:10px}
.mock-btn{flex:1;text-align:center;padding:10px;border-radius:10px;background:var(--geel);font-weight:700}
.mock-btn.ghost{background:#fff;border:2px solid var(--grafiet)}
.mock figcaption{font-size:12.5px;color:var(--grijs);padding:0 22px 16px}

/* ---------- Stappen: drie kolommen bij zes stappen ---------- */
@media (min-width:900px){.steps.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.steps.n6{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}}

/* ---------- Wat je niet hoeft / wat je wel krijgt ---------- */
.duo{display:grid;gap:24px}
@media (min-width:800px){.duo{grid-template-columns:1fr 1fr}}
.duo-col{background:#fff;border:1px solid var(--lijn);border-radius:10px;padding:24px 26px}
.duo-col h3{font-size:18px;padding-bottom:10px;margin-bottom:6px;border-bottom:2px solid var(--grafiet)}
.duo-col ul{list-style:none;margin:0;padding:0}
.duo-col li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--lijn)}
.duo-col li:last-child{border-bottom:0}
.duo-col li svg{flex:none;width:24px;height:24px;padding:3px;border-radius:6px;margin-top:1px}
.duo-niet li svg{background:#e7e6e1;color:var(--grijs)}
.duo-niet li span{color:#55585f}
.duo-wel{border-top:6px solid var(--geel)}
.duo-wel li svg{background:var(--geel);color:var(--grafiet)}
.duo + .btn-row{margin-top:28px}
[id]{scroll-margin-top:84px}
.cards + .btn-row{margin-top:28px}

/* ---------- Herken je dit? Een uitspraak van de starter, met ons antwoord eronder ---------- */
.recognize{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.recognize li{display:flex;flex-direction:column}
.rc-q{position:relative;margin:0 0 16px;background:#fff;border:2px solid var(--grafiet);border-radius:6px;padding:14px 16px;font-weight:700;font-size:17px;line-height:1.35}
.rc-q::before{content:"\201C";font:700 34px/1 var(--font);color:var(--geel-donker);margin-right:4px;vertical-align:-10px}
.rc-q::after{content:"";position:absolute;left:22px;bottom:-11px;width:18px;height:18px;background:#fff;border-right:2px solid var(--grafiet);border-bottom:2px solid var(--grafiet);transform:rotate(45deg)}
.rc-a{margin:0 0 8px;padding-left:4px;color:#3d4047}
.recognize .more{margin-top:auto;padding-left:4px}
.recognize + .btn-row{margin-top:28px}


/* ---------- Het verhaal (home): het poppetje loopt links mee, rechts de hoofdstukken ---------- */
.verhaal{display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);max-width:var(--wrap);margin:0 auto;padding:0 16px;background:#fff}
.podium{position:sticky;top:72px;height:calc(100vh - 72px);height:calc(100svh - 72px);display:flex;align-items:flex-end;justify-content:center;padding-bottom:5vh}
.decor{position:absolute;inset:4vh 0 0;border-radius:20px;overflow:hidden;background:var(--zand);transition:background .8s}
.decor svg{position:absolute;inset:0;width:100%;height:100%}
.decor .gebouw{transition:transform .2s linear}
.decor.kleur-salie,.decor.kleur-terra,.decor.kleur-blauw,.decor.kleur-oker,.decor.kleur-pruim,.decor.kleur-steen{background:var(--zand)}
.ballon{position:absolute;left:7%;right:7%;top:calc(4vh + 22px);margin:0;background:#fff;border-radius:18px;padding:14px 18px;font-weight:600;font-size:17px;line-height:1.4;
  box-shadow:0 10px 28px rgba(31,42,55,.12);transition:opacity .3s;z-index:3}
.ballon::after{content:"";position:absolute;left:46%;bottom:-11px;width:22px;height:22px;background:#fff;transform:rotate(45deg);border-radius:10px}
.ballon small{display:block;font-weight:400;color:var(--grijs);font-size:14px;margin-top:4px}
.poppetje{position:relative;z-index:2;width:min(150px,36%);height:auto;margin-bottom:3vh}
.poppetje .been,.poppetje .arm-vrij{transform-box:fill-box;transform-origin:50% 0}
.lopen .poppetje .been-l{animation:stap .5s ease-in-out infinite alternate}
.lopen .poppetje .been-r{animation:stap .5s ease-in-out infinite alternate-reverse}
.lopen .poppetje .arm-vrij{animation:zwaai .5s ease-in-out infinite alternate}
.lopen .poppetje .lijf{animation:wip .25s ease-in-out infinite alternate}
@keyframes stap{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@keyframes zwaai{from{transform:rotate(14deg)}to{transform:rotate(-14deg)}}
@keyframes wip{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.lopen .poppetje *{animation:none!important}}

.hoofdstukken{padding:0 0 0 40px}
.hoofdstuk{min-height:calc(100vh - 72px);display:flex;flex-direction:column;justify-content:center;padding:10vh 0}
.hoofdstuk h1{font-size:clamp(34px,4.6vw,54px);line-height:1.1;margin-bottom:16px}
.hoofdstuk h2{font-size:clamp(27px,3.3vw,38px);line-height:1.15;padding:0}
.hoofdstuk h2::before{display:none}
.hoofdstuk .lead{font-size:19px;color:#3f4856;max-width:560px}
.hoofdstuk .label{align-self:flex-start;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:99px;margin-bottom:14px;background:var(--blauw);color:var(--blauw-d)}
.hoofdstuk .nummer{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;font:600 21px var(--mono);margin-bottom:14px;background:var(--blauw);color:var(--blauw-d)}
.kleur-salie .label,.kleur-salie .nummer{background:var(--salie);color:var(--salie-d)}
.kleur-terra .label,.kleur-terra .nummer{background:var(--terra);color:var(--terra-d)}
.kleur-oker .label,.kleur-oker .nummer{background:var(--oker);color:var(--oker-d)}
.kleur-pruim .label,.kleur-pruim .nummer{background:var(--pruim);color:var(--pruim-d)}
.kleur-steen .label,.kleur-steen .nummer{background:var(--steen);color:var(--steen-d)}
.hoofdstuk .noot{font-size:14px;color:var(--grijs);margin:12px 0 0}
.hoofdstuk .btn-row{margin-top:18px}

/* Voorbeeldschermen uit het programma */
.scherm{margin-top:16px;background:#fff;border-radius:18px;box-shadow:0 16px 40px rgba(31,42,55,.12);border:1px solid var(--lijn);overflow:hidden;max-width:470px}
.scherm-balk{display:flex;align-items:center;gap:6px;padding:10px 16px;font-size:13px;font-weight:600;color:var(--grijs);border-bottom:1px solid var(--lijn);background:var(--papier)}
.scherm-balk span{width:9px;height:9px;border-radius:50%;background:#d9d4c9}
.scherm-balk span:nth-child(3){margin-right:8px}
.scherm-in{padding:16px 20px 20px}
.scherm .veld{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--lijn)}
.scherm .veld b{font-family:var(--mono);font-weight:600}
.scherm .veld.sterk{border-bottom:0;font-weight:700}
.scherm .foto{display:flex;align-items:center;gap:12px;border-radius:12px;padding:12px;background:var(--terra);margin-bottom:10px;font-weight:600}
.scherm .foto i{width:42px;height:52px;border-radius:5px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08);display:block;position:relative;flex:none}
.scherm .foto i::before{content:"";position:absolute;left:8px;right:8px;top:10px;height:3px;background:var(--lijn);box-shadow:0 8px 0 var(--lijn),0 16px 0 var(--lijn),0 25px 0 var(--terra-d)}
.scherm-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.scherm-kop b{font-size:19px;display:block}.scherm-kop small{color:var(--grijs)}
.scherm .status{font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--salie);color:var(--salie-d);white-space:nowrap}
.scherm .vraag{font-weight:700;margin:12px 0 10px}
.scherm .knoppen{display:flex;gap:10px;margin-top:10px}
.scherm .knoppen span{flex:1;text-align:center;border-radius:99px;padding:9px;font-weight:700;background:var(--grafiet);color:#fff}
.scherm .knoppen span+span{background:#fff;box-shadow:inset 0 0 0 2px var(--lijn);color:var(--grafiet)}
.scherm .vak{display:grid;grid-template-columns:40px 1fr auto 64px;gap:10px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--lijn)}
.scherm .vak em{font-style:normal;font-weight:700;color:var(--blauw-d);font-family:var(--mono)}
.scherm .vak b{font-family:var(--mono);font-weight:600}
.scherm .kopie{font-size:12px;font-weight:700;padding:4px 0;text-align:center;border-radius:99px;background:var(--blauw);color:var(--blauw-d)}
.scherm .melding{margin-top:12px;display:flex;gap:8px;align-items:center;background:var(--oker);color:#4a3a08;border-radius:12px;padding:10px 12px;font-weight:600;font-size:15px}
.scherm .groot{font:600 30px var(--mono)}
.balkje{height:12px;border-radius:99px;background:var(--steen);overflow:hidden;margin:6px 0 12px}
.balkje span{display:block;height:100%;background:var(--pruim-d);border-radius:99px}
.uitleg{background:#fff;border:1px solid var(--lijn);border-left:6px solid var(--oker);border-radius:14px;padding:16px 20px;max-width:520px;margin-top:14px}
.uitleg p{margin:0 0 8px}
.rest{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:8px}
.rest div{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:14px 16px}
.rest b{display:block}.rest small{color:var(--grijs);font-size:14.5px}

@media (max-width:860px){
  .verhaal{grid-template-columns:1fr;padding:0}
  .podium{top:72px;z-index:5;height:auto;padding:8px 16px;background:#fff;align-items:center;justify-content:flex-start;gap:10px;border-bottom:1px solid var(--lijn)}
  .decor{display:none}
  .ballon{position:static;order:1;flex:1;font-size:15px;padding:10px 14px;border-radius:14px;box-shadow:0 4px 14px rgba(31,42,55,.1)}
  .ballon::after{left:auto;right:-8px;top:16px;bottom:auto;width:14px;height:14px}
  .ballon small{display:none}
  .poppetje{order:2;width:40px;margin:0;flex:none}
  .hoofdstukken{padding:0 16px}
  .hoofdstuk{min-height:auto;padding:44px 0}
}

/* Eén accentkleur in het verhaal (petrol): labels, nummers en markeringen */
.hoofdstuk .label,.hoofdstuk .nummer{background:var(--geel-zacht)!important;color:var(--accent-tekst)!important}
.scherm .foto{background:var(--geel-zacht)}
.scherm .foto i::before{box-shadow:0 8px 0 var(--lijn),0 16px 0 var(--lijn),0 25px 0 var(--geel)}
.scherm .kopie{background:#eef0f2;color:var(--grafiet)}
.scherm .vak em{color:var(--accent-tekst)}
.scherm .melding{background:var(--geel-zacht);color:var(--accent-tekst)}
.scherm .status{background:#eef0f2;color:var(--grafiet)}
.balkje span{background:var(--geel)}
.uitleg{border-left-color:var(--geel)}
/* Petrol is donker: witte tekst erop (uitgelicht pakket, het label erboven) */
.price.featured .price-head h3,.price.featured .amount,.price.featured .per{color:#fff}
.price-flag{color:#fff}
.eyebrow,.steps li::before,.topic h3 svg,.checks li svg,.duo-wel li svg,.mock-btn{color:#fff}

/* Man of vrouw: de bezoeker kiest wie er meeloopt (beide staan in de pagina, de ander is verborgen) */
.verhaal[data-figuur="man"] .poppetje-vrouw,.verhaal[data-figuur="vrouw"] .poppetje-man{display:none}
.kies-figuur{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 16px;font-size:14px;color:var(--grijs);align-self:flex-start}
.kies-figuur span{margin-right:4px}
.kies-figuur button{font:700 14px var(--font);padding:7px 14px;border-radius:99px;border:2px solid var(--lijn);background:#fff;color:var(--grafiet);cursor:pointer}
.kies-figuur button[aria-pressed="true"]{border-color:var(--geel);background:var(--geel-zacht);color:var(--accent-tekst)}
.kies-figuur button:focus-visible{outline:3px solid var(--geel);outline-offset:2px}
/* Afbeeldingen van een illustrator (config.figuren): rustig wiegen tijdens het lopen in plaats van bewegende benen */
img.poppetje{height:auto;max-height:62%;width:auto;max-width:70%;object-fit:contain;transition:opacity .2s}
.lopen img.poppetje{animation:wip .3s ease-in-out infinite alternate}
@media (max-width:860px){img.poppetje{max-height:none;width:44px}}

/* Warm cognac als klein accent, zoals het streepje op het bord in het voorbeeld */
.site-header,.site-header.solid,.site-header.menu-open{border-bottom-color:var(--warm)}
.sec-head h2::before{background:var(--warm)}
.site-footer{border-top-color:var(--warm)}
.site-footer h4{color:#e9c9a8}
.wordmark .grad-text{box-shadow:inset 0 -.38em 0 var(--warm-zacht)}
.uitleg{border-left-color:var(--warm)}

/* Knoppen zoals in het voorbeeld: petrolblauw, rond, witte letters */
.btn{border-radius:99px}
.btn-primary{background:var(--geel);border-color:var(--geel);color:#fff}
.btn-primary:hover{background:var(--geel-donker);border-color:var(--geel-donker)}
.decor{background:var(--geel-zacht)}
.decor.kleur-salie,.decor.kleur-terra,.decor.kleur-blauw,.decor.kleur-oker,.decor.kleur-pruim,.decor.kleur-steen{background:var(--geel-zacht)}
.site-footer h4{color:#f3b3cb}
/* Het decor in dezelfde koele tinten: een wit-blauw gebouw met een donkerblauw dak, en een lichte stoep */
:root{--decor-dak:#103856;--decor-gebouw:#cbe3e7;--decor-grond:#d6ecee;--decor-deur:#a9cdd3;--decor-lijn:#b9dadd}

/* Kiest de bezoeker de vrouw, dan draaien de kleuren om: framboos wordt de hoofdkleur, petrol het kleine accent
   (Michael 2026-10-24). De keuze staat op <html data-figuur> en geldt voor dit bezoek ook op de andere pagina's. */
html[data-figuur="vrouw"]{
  --geel:#cf2c6a;--geel-donker:#b0225a;--geel-zacht:#fbe6ee;--accent-tekst:#a3204f;--warm:#057993;--warm-zacht:#e6f6f6;
  --brand-a:#cf2c6a;--accent-soft:#fbe6ee;--decor-dak:#5c1a37;--decor-gebouw:#f1d6e1;--decor-grond:#f6e4eb;--decor-deur:#e2b6c7
}
html[data-figuur="vrouw"] .site-footer h4{color:#9fd3dc}
html[data-figuur="vrouw"] .decor{background:#fbeef3}
/* Zoals in Michaels voorbeeld: ook de lijn onder het menu, de omlijnde knoppen en ".nl" in framboos */
html[data-figuur="vrouw"] .site-header,html[data-figuur="vrouw"] .site-header.solid,html[data-figuur="vrouw"] .site-header.menu-open{border-bottom-color:var(--geel)}
html[data-figuur="vrouw"] .btn:not(.btn-primary),html[data-figuur="vrouw"] .main-nav .nav-login{border-color:var(--geel);color:var(--geel)}
html[data-figuur="vrouw"] .wm-tld{color:var(--geel)}

/* Een hele scène als afbeelding (config.scenes): vult het podium; de tekstballon staat erboven. Licht meebewegen bij het lopen. */
.decor.met-scene{background:var(--geel-zacht)}
.scene-beeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transition:transform .4s ease-out}
.verhaal[data-figuur="man"] .scene-vrouw,.verhaal[data-figuur="vrouw"] .scene-man{display:none}
.lopen .scene-beeld{transform:scale(1.015) translateY(-4px)}
@media (max-width:860px){.podium.met-scene .decor{display:block;position:relative;inset:auto;width:64px;height:84px;border-radius:12px;order:2;flex:none}}
/* Met een scène staat de tekstballon boven de afbeelding, met het puntje naar het hoofd (niet eroverheen) */
.podium.met-scene{align-items:stretch;padding-bottom:3vh}
.podium.met-scene .decor{top:calc(4vh + 104px);bottom:3vh}
.podium.met-scene .ballon{top:4vh}
.podium.met-scene .ballon::after{left:50%}
@media (max-width:860px){.podium.met-scene{align-items:center;padding-bottom:8px}.podium.met-scene .decor{top:auto;bottom:auto}}
.scene-mobiel{display:none}
@media (max-width:860px){
  .podium.met-scene .decor{display:none}
  .scene-mobiel{display:block;position:relative;aspect-ratio:2/3;max-height:62vh;width:100%;border-radius:18px;overflow:hidden;margin:0 0 22px;background:var(--geel-zacht)}
}
/* De hele illustratie tonen, nooit het hoofd afsnijden: het vak krijgt de verhouding van de afbeelding (3:4 ongeveer)
   en staat gecentreerd onder de ballon. */
@media (min-width:861px){
  .podium.met-scene .decor{left:50%;right:auto;top:4vh;bottom:auto;transform:translateX(-50%);height:calc(100% - 4vh - 3vh);aspect-ratio:2/3;width:auto;max-width:100%}
  .podium.met-scene .scene-beeld{object-position:50% 0}
  /* De afbeeldingen hebben lucht in het bovenste kwart: daar staat de tekstballon, op de afbeelding */
  .podium.met-scene .ballon{top:calc(4vh + 14px);left:50%;right:auto;transform:translateX(-50%);width:min(88%,420px)}
}
/* Scènes per hoofdstuk: alleen de actieve is zichtbaar; bij het scrollen loopt de ene zacht over in de volgende */
.decor.met-scene .scene-beeld{opacity:0;transition:opacity .8s ease,transform .4s ease-out}
.decor.met-scene .scene-beeld.actief{opacity:1}
@media (prefers-reduced-motion:reduce){.decor.met-scene .scene-beeld{transition:none}}
/* Telefoon: na het eerste hoofdstuk een kleinere scène per hoofdstuk, iets bijgesneden (het figuur blijft in beeld) */
@media (max-width:860px){
  .scene-mobiel:not(.eerste){aspect-ratio:4/5;max-height:52vh}
  .scene-mobiel:not(.eerste) .scene-beeld{object-position:50% 45%}
}

/* Paginakop met het figuur uit het verhaal rechts (Michael 2026-10-24): dezelfde man of vrouw als op de startpagina */
html:not([data-figuur="vrouw"]) .kop-figuur .scene-vrouw,html[data-figuur="vrouw"] .kop-figuur .scene-man{display:none}
.page-hero.met-figuur{padding:28px 0 0;overflow:hidden}
.page-hero.met-figuur .wrap{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:36px;align-items:end}
.page-hero.met-figuur .kop-tekst{padding:28px 0 44px;align-self:center}
.kop-figuur{position:relative;align-self:end;height:340px;border-radius:20px 20px 0 0;overflow:hidden;background:var(--geel-zacht)}
.kop-beeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
@media (max-width:760px){
  .page-hero.met-figuur .wrap{grid-template-columns:minmax(0,1fr) 112px;gap:16px;align-items:start}
  .page-hero.met-figuur .kop-tekst{padding:8px 0 28px}
  .kop-figuur{height:150px;border-radius:16px;margin-top:8px}
}