:root{
  --night:#0b0a09;
  --night2:#141110;
  --night3:#1d1816;
  --paper:#f4ece2;
  --paper-dim:#c6b6a4;
  --ember:#e2661f;
  --ember-hot:#ff8c3f;
  --muted:#9c8875;
  --rule:#2e2622;
  --serif:'Newsreader',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--night);color:var(--paper);
  font-family:var(--serif);font-size:19px;line-height:1.6;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ember-hot);outline-offset:3px}
.wrap{width:min(100% - 2.2rem,74rem);margin-inline:auto}
.narrow{max-width:38rem}

h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.14;letter-spacing:-.012em}
h1{font-size:clamp(2.4rem,6.6vw,4.8rem);line-height:1.2}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:1.35rem;line-height:1.25}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--paper)}
em{font-style:italic}
.lede{font-size:1.18rem;color:var(--paper-dim);line-height:1.62}
.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ember-hot);margin:0 0 1.2rem;
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--ember);flex:none}
.kicker{font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--sans);font-size:.92rem;font-weight:600;letter-spacing:.01em;
  padding:1rem 1.7rem;border-radius:3px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:transform .16s,background .18s,border-color .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn-fire{background:var(--ember);color:#fff;box-shadow:0 10px 34px -12px rgba(226,102,31,.85)}
.btn-fire:hover{background:var(--ember-hot)}
.btn-line{border-color:#4a3d36;color:var(--paper);background:transparent}
.btn-line:hover{border-color:var(--ember);color:var(--ember-hot)}
.btn-sm{padding:.62rem 1.15rem;font-size:.83rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(11,10,9,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:66px}
.mark{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-weight:700;font-size:.95rem;letter-spacing:.01em;text-decoration:none}
.mark svg{width:20px;height:20px;flex:none}
.nav-links{display:flex;gap:1.6rem;font-family:var(--sans);font-size:.86rem;font-weight:500}
.nav-links a{text-decoration:none;color:var(--paper-dim)}
.nav-links a:hover{color:var(--ember-hot)}
@media(max-width:960px){.nav-links{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;padding:4.6rem 0 0;overflow:clip}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -20%;height:120%;
  background:radial-gradient(58% 52% at 22% 32%,rgba(226,102,31,.20),transparent 70%);
  pointer-events:none;
}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2.4rem;align-items:end}
.hero-copy{padding-bottom:4.5rem}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:2.6rem}.hero{padding:3.2rem 0 3.5rem}.hero-copy{padding-bottom:0}}
.hero h1 .fire{color:var(--ember-hot);display:block;margin-top:.22em}
.hero .lede{margin-top:2.3rem;max-width:33rem;font-size:1.17rem}
.hero .lede + .lede{margin-top:.95rem}

.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.2rem}
.badge{
  font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.04em;
  padding:.42rem .8rem;border:1px solid var(--rule);border-radius:99px;color:var(--paper-dim);
}
.badge b{color:var(--ember-hot);font-weight:700}

/* het boek in de hero */
.stage{position:relative;display:grid;place-items:center;min-height:34rem;padding:1rem 0}
.stage::before{
  content:"";position:absolute;inset:8% 4% 4% 4%;
  background:radial-gradient(52% 50% at 50% 44%,rgba(226,102,31,.30),transparent 72%);
  filter:blur(34px);pointer-events:none;
}
/* boekomslag — recht, frontaal */
.book{--w:15.5rem;width:var(--w);position:relative;animation:drift 11s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.book::after{
  content:"";position:absolute;left:2%;right:-6%;bottom:-14px;height:26px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.85),transparent 74%);
  filter:blur(10px);
}
.book-face{
  position:relative;aspect-ratio:1748/2480;border-radius:2px 4px 4px 2px;overflow:hidden;
  box-shadow:
    -8px 0 0 0 #241c17,
    -9px 0 0 0 rgba(0,0,0,.5),
    0 30px 60px -22px rgba(0,0,0,.92),
    0 0 110px -20px rgba(226,102,31,.55);
}
.book-face img{width:100%;height:100%;object-fit:cover;display:block}
.book-face::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:15px;
  background:linear-gradient(90deg,rgba(0,0,0,.22),transparent);border-radius:2px 0 0 2px;
}
.book-face::after{
  content:"";position:absolute;inset:0;border-radius:2px 4px 4px 2px;
  background:linear-gradient(104deg,rgba(255,255,255,.42) 0%,transparent 26%,transparent 80%,rgba(0,0,0,.08) 100%);
  pointer-events:none;
}

.stage .book{position:relative;z-index:2;--w:25rem}
@media(max-width:1000px){.stage{min-height:0;padding:1rem 0}.stage .book{--w:20rem}}
@media(max-width:620px){.stage .book{--w:15rem}}

/* ---------- de drie voorwaarden ---------- */
.drie{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--night2);padding:1.1rem 0}
.drie-in{display:flex;justify-content:center;gap:3.4rem;flex-wrap:wrap}
.drie span{font-family:var(--sans);font-size:.82rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.drie span b{color:var(--ember-hot);font-weight:600}
@media(max-width:620px){
  .drie-in{gap:.5rem;flex-direction:column;align-items:center;text-align:center}
  .drie span{font-size:.76rem}
}

/* ---------- henk ---------- */
.henkband{padding:4.4rem 0;background:
  radial-gradient(70% 100% at 50% 0%,rgba(226,102,31,.13),transparent 68%),var(--night)}
.henk{
  border:1px solid #3a2c22;background:linear-gradient(180deg,#181413,#110e0d);
  border-radius:5px;overflow:visible;max-width:52rem;margin:2rem auto 0;
  box-shadow:0 0 0 1px rgba(226,102,31,.10),0 40px 90px -50px #000;
}
.henk-head{display:flex;align-items:center;gap:.9rem;padding:1.05rem 1.4rem;border-bottom:1px solid var(--rule)}
.henk-av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--ember-hot),var(--ember));color:#fff;
  font-family:var(--sans);font-weight:700;font-size:1.05rem;box-shadow:0 0 22px -4px rgba(226,102,31,.9)}
.henk-name{font-family:var(--sans);font-weight:600;font-size:.98rem}
.henk-status{font-family:var(--sans);font-size:.76rem;color:var(--muted);display:flex;align-items:center;gap:.42rem}
.dot{width:6px;height:6px;border-radius:50%;background:#57c26a;display:inline-block;box-shadow:0 0 8px #57c26a}
/* KRITIEK: block, geen flex — anders breekt mobiel scrollen */
#henk-messages{display:block;overflow-y:scroll;-webkit-overflow-scrolling:touch;max-height:340px;min-height:200px;padding:1.35rem}
.henk-msg{margin-bottom:14px;font-size:1rem;line-height:1.55}
.henk-msg:last-child{margin-bottom:0}
.henk-msg .bubble{display:inline-block;max-width:86%;padding:.72rem 1rem;border-radius:4px;white-space:pre-wrap}
.henk-msg.bot .bubble{background:#221b18;border:1px solid #322722}
.henk-msg.me{text-align:right}
.henk-msg.me .bubble{background:var(--ember);color:#fff;text-align:left}
.henk-typing .bubble{color:var(--muted);font-style:italic}
.henk-input{display:flex;gap:.6rem;padding:.9rem 1.35rem;border-top:1px solid var(--rule)}
.henk-input input{flex:1;font-family:var(--serif);font-size:1rem;padding:.68rem .85rem;border:1px solid #372c26;border-radius:3px;background:#0d0b0a;color:var(--paper)}
.henk-input input::placeholder{color:#6d5c4f}
.henk-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1.35rem 1.25rem}
.chip{font-family:var(--sans);font-size:.79rem;padding:.45rem .85rem;border:1px solid #3a2e28;border-radius:99px;background:transparent;color:var(--paper-dim);cursor:pointer;transition:.16s}
.chip:hover{border-color:var(--ember);color:var(--ember-hot)}
.henk-foot{font-family:var(--sans);font-size:.78rem;color:var(--muted);text-align:center;margin:1.1rem auto 0;max-width:40rem}

/* ---------- secties ---------- */
section{position:relative}
.sec{padding:6rem 0}
.sec-alt{background:var(--night2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.6rem;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:2.4rem}.sec{padding:4.2rem 0}}

/* video placeholder */
.video{
  position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;cursor:pointer;
  background:linear-gradient(148deg,#241c18,#0f0c0b 62%);border:1px solid var(--rule);
  display:grid;place-items:center;
}
.video::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(46% 60% at 50% 52%,rgba(226,102,31,.24),transparent 72%);
}
.video .play{
  position:relative;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:rgba(226,102,31,.94);box-shadow:0 0 0 12px rgba(226,102,31,.14),0 0 44px -6px rgba(226,102,31,.8);
  transition:transform .2s;
}
.video:hover .play{transform:scale(1.08)}
.video .play svg{width:26px;height:26px;margin-left:4px;fill:#fff}
.video .vlabel{position:absolute;left:1rem;bottom:.95rem;font-family:var(--sans);font-size:.78rem;color:var(--paper-dim)}
.video .vtime{position:absolute;right:1rem;bottom:.95rem;font-family:var(--sans);font-size:.72rem;color:var(--muted);border:1px solid var(--rule);padding:.16rem .5rem;border-radius:3px;background:rgba(0,0,0,.4)}
.video .vph{position:absolute;left:1rem;top:.95rem;font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-hot);border:1px solid rgba(226,102,31,.4);padding:.2rem .5rem;border-radius:3px}

/* delen */
.delen{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:3rem}
@media(max-width:1000px){.delen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.delen{grid-template-columns:1fr}}
.deel{
  border:1px solid var(--rule);border-radius:4px;padding:1.6rem 1.4rem;background:var(--night2);
  display:flex;flex-direction:column;transition:border-color .22s,transform .22s,background .22s;
}
.deel:hover{border-color:#5a3d29;transform:translateY(-4px);background:#1a1513}
.deel .rom{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.18em;color:var(--ember-hot);margin-bottom:.9rem}
.deel h3{margin-bottom:.7rem}
.deel p{font-size:.95rem;color:var(--paper-dim);flex:1}
.deel .hoofd{font-family:var(--sans);font-size:.74rem;color:var(--muted);margin-top:1.2rem;padding-top:.85rem;border-top:1px solid var(--rule)}

/* driehoek */
.tri-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,21rem);gap:3rem;align-items:center;margin-top:2.6rem}
@media(max-width:900px){.tri-wrap{grid-template-columns:1fr;gap:2rem}}
.tri-svg{width:100%;max-width:26rem;margin-inline:auto;overflow:visible}
.tri-side{stroke:#3a2e27;stroke-width:6;stroke-linecap:round;transition:stroke .45s ease,filter .45s ease}
.tri-side.on{stroke:var(--ember-hot)}
.tri-svg.lit .tri-side.on{filter:drop-shadow(0 0 14px rgba(255,140,63,.9))}
.tri-core{opacity:0;transition:opacity .6s ease}
.tri-svg.lit .tri-core{opacity:1}
.tri-label{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.1em;fill:#6a584c;transition:fill .35s}
.tri-label.on{fill:var(--ember-hot)}
.tri-status{font-family:var(--sans);font-size:.9rem;text-align:center;color:var(--muted);margin-top:1.1rem;min-height:1.5em}
.tri-status.hot{color:var(--ember-hot);font-weight:600}
.tri-toggles{display:flex;flex-direction:column;gap:.7rem}
.tog{display:flex;gap:.9rem;align-items:flex-start;text-align:left;width:100%;font-family:var(--sans);
  padding:1rem 1.1rem;cursor:pointer;background:var(--night2);border:1px solid var(--rule);border-radius:4px;transition:.2s}
.tog:hover{border-color:#54423a}
.tog[aria-pressed="true"]{border-color:var(--ember);background:rgba(226,102,31,.09)}
.tog .box{width:15px;height:15px;border:1px solid #56453c;border-radius:3px;margin-top:.25rem;flex:none;transition:.2s}
.tog[aria-pressed="true"] .box{background:var(--ember-hot);border-color:var(--ember-hot);box-shadow:0 0 12px -1px rgba(255,140,63,.9)}
.tog b{display:block;font-weight:600;font-size:.92rem;color:var(--paper);margin-bottom:.15rem}
.tog .txt{display:block;color:var(--muted);font-size:.82rem;line-height:1.45}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:3rem}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.q{border:1px solid var(--rule);border-left:3px solid var(--ember);border-radius:0 4px 4px 0;padding:1.6rem 1.5rem;background:var(--night2)}
.q p{font-size:1.16rem;line-height:1.35;letter-spacing:-.01em}
.q .src{font-family:var(--sans);font-size:.74rem;color:var(--muted);margin-top:1rem;letter-spacing:.05em}

/* bestellen */
.koop{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem;align-items:stretch}
@media(max-width:900px){.koop{grid-template-columns:1fr}}
.kaart{border:1px solid var(--rule);border-radius:5px;padding:1.9rem 1.6rem;background:var(--night2);display:flex;flex-direction:column;position:relative}
.kaart.top{border-color:var(--ember);background:linear-gradient(180deg,rgba(226,102,31,.11),var(--night2) 55%);box-shadow:0 0 60px -30px rgba(226,102,31,.8)}
.kaart .vlag{position:absolute;top:-.72rem;left:1.6rem;font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--ember);color:#fff;padding:.3rem .7rem;border-radius:3px}
.kaart .pk{font-family:var(--sans);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem}
.prijs{font-family:var(--serif);font-size:2.6rem;line-height:1;letter-spacing:-.03em;margin-bottom:.3rem}
.prijs small{font-size:.9rem;color:var(--muted);letter-spacing:0}
.kaart ul{list-style:none;padding:0;margin:1.3rem 0 0;flex:1}
.kaart li{font-family:var(--sans);font-size:.87rem;color:var(--paper-dim);padding:.42rem 0 .42rem 1.4rem;position:relative}
.kaart li::before{content:"▲";position:absolute;left:0;top:.5rem;font-size:.55rem;color:var(--ember)}
.kaart .btn{margin-top:1.6rem;width:100%}
.vbp{font-family:var(--sans);font-size:.78rem;color:var(--muted);margin-top:1.8rem;text-align:center}

/* auteursband */
.auteur{position:relative;min-height:34rem;display:grid;align-items:center;overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.auteur-bg{position:absolute;inset:0}
.auteur-bg img{width:100%;height:100%;object-fit:cover;object-position:64% 30%}
.auteur-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--night) 6%,rgba(11,10,9,.9) 34%,rgba(11,10,9,.15) 74%),
             linear-gradient(0deg,var(--night),transparent 34%)}
.auteur-in{position:relative;padding:5.5rem 0}
.auteur-in .narrow{max-width:33rem}
.loopbaan{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.9rem}
.loopbaan span{font-family:var(--sans);font-size:.74rem;padding:.4rem .78rem;border:1px solid #4a3a30;border-radius:99px;color:var(--paper-dim);background:rgba(11,10,9,.55)}
@media(max-width:820px){.auteur-bg img{object-position:60% 20%}.auteur-bg::after{background:linear-gradient(0deg,var(--night) 30%,rgba(11,10,9,.55) 100%)}.auteur{min-height:0}.auteur-in{padding:4rem 0}}

/* diensten */
.diensten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
@media(max-width:900px){.diensten{grid-template-columns:1fr}}
.dienst{border:1px solid var(--rule);border-radius:5px;padding:1.8rem 1.6rem;background:var(--night2);display:flex;flex-direction:column;transition:.22s}
.dienst:hover{border-color:#5a3d29;transform:translateY(-4px)}
.dienst .num{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.18em;color:var(--ember-hot);margin-bottom:1rem}
.dienst h3{margin-bottom:.7rem}
.dienst p{font-size:.95rem;color:var(--paper-dim);flex:1}
.dienst .pr{font-family:var(--sans);font-size:.82rem;color:var(--muted);margin-top:1.2rem;padding-top:.9rem;border-top:1px solid var(--rule)}
.dienst .btn{margin-top:1.2rem;align-self:flex-start}

/* gratis band */
.gratis{background:linear-gradient(180deg,#1a1210,#0f0c0b);border-top:1px solid #3a2c22;border-bottom:1px solid #3a2c22;padding:5rem 0}
.gratis-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:3.4rem;align-items:center}
@media(max-width:900px){.gratis-in{grid-template-columns:1fr;gap:2.2rem}}
.form-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.form-row input{flex:1;min-width:13rem;font-family:var(--serif);font-size:1rem;padding:.85rem .9rem;border:1px solid #3d3029;border-radius:3px;background:#0b0a09;color:var(--paper)}
.form-row input::placeholder{color:#6d5c4f}
.fineprint{font-family:var(--sans);font-size:.77rem;color:var(--muted);margin-top:.95rem;line-height:1.5}

/* faq */
.faq details{border-bottom:1px solid var(--rule);padding:1.15rem 0;max-width:44rem}
.faq summary{cursor:pointer;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);color:var(--ember-hot);font-size:1.3rem;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.9rem;font-size:.98rem;color:var(--paper-dim);max-width:40rem}

/* slot */
.slot{padding:6.5rem 0;text-align:center;position:relative;overflow:hidden}
.slot::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:120%;
  background:radial-gradient(50% 50% at 50% 80%,rgba(226,102,31,.24),transparent 70%)}
.slot .wrap{position:relative}
.slot h2{margin-inline:auto;max-width:16ch}
.slot p{margin:1.4rem auto 0;max-width:34rem;color:var(--paper-dim)}
.slot .btn-row{justify-content:center}

footer{padding:3rem 0;border-top:1px solid var(--rule);font-family:var(--sans);font-size:.82rem;color:var(--muted)}
.foot-in{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center}
footer a{text-decoration:none}
footer a:hover{color:var(--ember-hot)}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .book{transform:none}
}

/* ================= LEESPAGINA (hoofdstuk) ================= */
.leesband{padding:5rem 0 6rem;background:
  radial-gradient(60% 40% at 50% 0%,rgba(226,102,31,.10),transparent 70%),var(--night)}
.blad{
  max-width:44rem;margin:0 auto;background:linear-gradient(178deg,#faf4ea,#f3ebdd 60%,#efe5d4);
  color:#1c1917;border-radius:3px;padding:4.4rem clamp(1.4rem,5vw,4.2rem) 4rem;
  box-shadow:0 60px 120px -60px #000,0 0 0 1px rgba(255,255,255,.05);
  position:relative;
}
.blad::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:9px;
  background:linear-gradient(90deg,rgba(0,0,0,.10),transparent);border-radius:3px 0 0 3px;
}
.blad-kop{text-align:center;margin-bottom:3rem}
.blad-kop .nr{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#b4531f}
.blad-kop h2{margin-top:1rem;color:#171310;font-size:clamp(1.8rem,4.2vw,2.7rem);line-height:1.05}
.blad-kop .streep{width:54px;height:2px;background:#b4531f;margin:1.6rem auto 0}

.blad p{font-size:1.09rem;line-height:1.66;margin:0 0 1.05em;color:#241f1b}
.blad strong{color:#120f0d;font-weight:600}
.blad em{font-style:italic}
.blad blockquote{
  margin:2.2rem 0;padding:0;font-size:1.2rem;line-height:1.45;font-style:italic;
  color:#4a3a2c;text-align:center;
}
.blad blockquote cite{
  display:block;font-family:var(--sans);font-size:.76rem;font-style:normal;
  letter-spacing:.09em;color:#8a6c4e;margin-top:.9rem;
}
hr.beat{
  border:0;height:auto;margin:2.4rem auto;text-align:center;overflow:visible;
}
hr.beat::after{
  content:"▲";display:block;color:#c9ac86;font-size:.6rem;letter-spacing:.6em;padding-left:.6em;
}
.blad .kader{
  border-left:3px solid #b4531f;background:rgba(180,83,31,.055);
  padding:1.5rem 1.6rem 1.3rem;margin:2.4rem 0;border-radius:0 3px 3px 0;
}
.blad .kader.slot{border-left-color:#1c1917;background:rgba(28,25,23,.05)}
.blad .kaderlabel{
  font-family:var(--sans)!important;font-size:.66rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:#b4531f;margin-bottom:.9rem!important;
}
.blad .kader.slot .kaderlabel{color:#5c4a3c}
.blad .kader p:last-child{margin-bottom:0}
.blad .kader blockquote{margin:1.6rem 0 0;font-size:1.08rem;text-align:left}

.diagram{
  margin:2.6rem 0;padding:0;border:1px dashed #c9ac86;border-radius:4px;
  background:rgba(180,83,31,.04);aspect-ratio:16/8;display:grid;place-items:center;position:relative;
}
.diagram .dph{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#b4531f;
}
.diagram figcaption{
  position:absolute;bottom:.9rem;left:1.2rem;right:1.2rem;text-align:center;
  font-family:var(--sans);font-size:.76rem;color:#8a6c4e;
}

.leesslot{max-width:44rem;margin:3rem auto 0;text-align:center}
.leesslot h3{font-size:1.7rem;margin-bottom:1rem}
.leesslot p{color:var(--paper-dim);max-width:32rem;margin-inline:auto}
.leesslot .btn-row{justify-content:center}

/* ================= INHOUDSOPGAVE ================= */
.toc-delen{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:3rem}
@media(max-width:820px){.toc-delen{grid-template-columns:1fr}}
.toc-deel{border:1px solid var(--rule);border-radius:5px;background:var(--night2);padding:1.8rem 1.7rem}
.toc-deel .rom{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.18em;color:var(--ember-hot);margin-bottom:.6rem}
.toc-deel h3{margin-bottom:1.3rem}
.toc-deel ol{list-style:none;padding:0;margin:0;counter-reset:none}
.toc-deel li{
  display:flex;gap:.9rem;padding:.5rem 0;border-bottom:1px solid rgba(46,38,34,.6);
  font-size:.98rem;color:var(--paper-dim);align-items:baseline;
}
.toc-deel li:last-child{border-bottom:0}
.toc-deel li .n{font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--muted);flex:none;width:1.6rem}
.toc-deel li.free{color:var(--paper)}
.toc-deel li.free .n{color:var(--ember-hot)}
.toc-tag{
  display:inline-block;font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember-hot);border:1px solid rgba(226,102,31,.45);
  padding:.16rem .5rem;border-radius:3px;margin-left:.5rem;
}

/* boekhero op subpagina */
.boekhero{padding:4rem 0 4.5rem;position:relative;overflow:clip}
.boekhero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;
  background:radial-gradient(50% 46% at 68% 34%,rgba(226,102,31,.20),transparent 70%);pointer-events:none}
.boekhero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3.4rem;align-items:center}
@media(max-width:900px){.boekhero-grid{grid-template-columns:1fr;gap:2.6rem}}
.boekhero .book{--w:17rem;margin-inline:auto}
@media(max-width:620px){.boekhero .book{--w:13rem}}

/* ================= DIAGRAMMEN ================= */
.fig{margin:2.8rem 0 0;padding:0}
.fig svg{width:100%;height:auto;display:block;overflow:visible}
.fig figcaption{
  font-family:var(--sans);font-size:.82rem;color:var(--muted);
  margin-top:1.2rem;text-align:center;max-width:34rem;margin-inline:auto;line-height:1.5;
}
.fig-box{
  border:1px solid var(--rule);border-radius:6px;background:
    radial-gradient(60% 70% at 50% 40%,rgba(226,102,31,.06),transparent 72%),var(--night2);
  padding:2.4rem clamp(1rem,3vw,2.6rem);
}
.d-line{stroke:#3a2e27;stroke-width:2;fill:none}
.d-em{stroke:var(--ember-hot);fill:none}
.d-fill{fill:var(--night2)}
.d-lab{font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:600;fill:var(--paper);letter-spacing:.02em}
.d-sub{font-family:'IBM Plex Sans',sans-serif;font-size:11.5px;fill:#9c8875}
.d-cap{font-family:'IBM Plex Sans',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.18em;fill:var(--ember-hot)}
.d-big{font-family:Newsreader,Georgia,serif;font-size:21px;fill:var(--paper)}
.d-num{font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:700;fill:var(--ember-hot)}

/* modelpagina */
.mchips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.4rem}
.mchips a{
  font-family:var(--sans);font-size:.79rem;padding:.45rem .85rem;border:1px solid var(--rule);
  border-radius:99px;color:var(--paper-dim);text-decoration:none;transition:.16s;
}
.mchips a:hover{border-color:var(--ember);color:var(--ember-hot)}
.mblok{padding:5rem 0;border-top:1px solid var(--rule)}
.mblok:first-of-type{border-top:0}
.mblok .num{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.2em;color:var(--ember-hot);margin-bottom:.9rem}
.mblok h2{max-width:20ch}
.mblok .lede{margin-top:1.5rem;max-width:36rem}
.vgl{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2.4rem;max-width:44rem}
@media(max-width:700px){.vgl{grid-template-columns:1fr}}
.vgl div{border:1px solid var(--rule);border-radius:4px;padding:1.4rem 1.4rem;background:var(--night2)}
.vgl .t{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.vgl.hot div:last-child{border-color:var(--ember);background:rgba(226,102,31,.07)}
.vgl.hot div:last-child .t{color:var(--ember-hot)}
.vgl p{font-size:.96rem;color:var(--paper-dim)}
.vgl em{color:var(--paper);font-style:italic}
.elem{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
@media(max-width:880px){.elem{grid-template-columns:1fr}}
.elem article{border:1px solid var(--rule);border-top:3px solid var(--ember);border-radius:0 0 5px 5px;padding:1.7rem 1.5rem;background:var(--night2)}
.elem .e{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.18em;color:var(--ember-hot);margin-bottom:.8rem}
.elem h3{margin-bottom:.9rem}
.elem p{font-size:.95rem;color:var(--paper-dim)}
.elem .regel{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--rule);font-style:italic;font-size:.95rem;color:var(--paper)}

/* ================= TIJDLIJN / OVER GREG ================= */
.paginahero{position:relative;min-height:34rem;display:grid;align-items:end;overflow:hidden;border-bottom:0}
.paginahero-bg{position:absolute;inset:0}
.paginahero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:var(--fp,64% 34%);
  /* per pagina te verschuiven met --fp en --fx */
  -webkit-mask-image:radial-gradient(80% 98% at var(--fx,72%) 42%,#000 30%,rgba(0,0,0,.55) 62%,transparent 88%);
  mask-image:radial-gradient(80% 98% at var(--fx,72%) 42%,#000 30%,rgba(0,0,0,.55) 62%,transparent 88%);
}
.paginahero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--night) 2%,rgba(11,10,9,.9) 30%,rgba(11,10,9,.18) 62%,transparent 82%),
             linear-gradient(0deg,var(--night) 1%,rgba(11,10,9,.5) 18%,transparent 52%),
             linear-gradient(180deg,var(--night) 0%,transparent 22%)}
.paginahero-in{position:relative;padding:6rem 0 4.5rem;width:100%}
.paginahero h1{max-width:15ch;font-size:clamp(2.4rem,6vw,4.4rem)}
@media(max-width:820px){
  .paginahero{min-height:0}
  .paginahero-bg img{object-position:58% 18%}
  .paginahero-bg::after{background:linear-gradient(0deg,var(--night) 34%,rgba(11,10,9,.5) 100%)}
  .paginahero-in{padding:14rem 0 3rem}
}

.tijdlijn{margin-top:3.2rem;position:relative;max-width:44rem}
.tijdlijn::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,#3a2e27,var(--ember) 70%,var(--ember-hot))}
.tl{position:relative;padding:0 0 2.6rem 3rem}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:0;top:.45rem;width:16px;height:16px;border-radius:50%;
  background:var(--night);border:2.5px solid #6a5548}
.tl:last-child::before{border-color:var(--ember-hot);background:#ffb877;box-shadow:0 0 16px -1px rgba(255,140,63,.9)}
.tl .jaar{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;color:var(--ember-hot);margin-bottom:.5rem}
.tl h3{margin-bottom:.7rem}
.tl p{font-size:.99rem;color:var(--paper-dim);max-width:34rem}
.tl .les{margin-top:.9rem;padding-left:1rem;border-left:2px solid var(--rule);font-style:italic;color:var(--paper);font-size:.96rem}

.bedrijven{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.8rem}
@media(max-width:900px){.bedrijven{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bedrijven{grid-template-columns:1fr}}
.bedrijf{border:1px solid var(--rule);border-radius:4px;padding:1.4rem 1.3rem;background:var(--night2);
  text-decoration:none;display:block;transition:.2s}
.bedrijf:hover{border-color:#5a3d29;transform:translateY(-3px)}
.bedrijf b{display:block;font-family:var(--sans);font-size:.98rem;font-weight:600;margin-bottom:.45rem}
.bedrijf span{font-size:.9rem;color:var(--paper-dim);display:block;line-height:1.45}
.bedrijf .dom{font-family:var(--sans);font-size:.74rem;color:var(--muted);margin-top:.8rem;display:block}

/* ================= TRAINING ================= */
.dagschema{margin-top:2.8rem;max-width:46rem;border:1px solid var(--rule);border-radius:5px;background:var(--night2);overflow:hidden}
.dagrij{display:grid;grid-template-columns:5.6rem 1fr;gap:1.4rem;padding:1.15rem 1.5rem;border-bottom:1px solid var(--rule);align-items:start}
.dagrij:last-child{border-bottom:0}
.dagrij.pauze{background:rgba(11,10,9,.5);padding-top:.7rem;padding-bottom:.7rem}
.dagrij .tijd{font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--ember-hot);letter-spacing:.02em;padding-top:.1rem}
.dagrij.pauze .tijd{color:var(--muted);font-weight:400}
.dagrij b{display:block;font-family:var(--sans);font-size:.98rem;font-weight:600;margin-bottom:.25rem}
.dagrij span{font-size:.93rem;color:var(--paper-dim);line-height:1.5}
.dagrij.pauze b{font-weight:400;color:var(--muted);font-size:.9rem;margin:0}
.dagrij .wv{display:inline-block;font-family:var(--sans);font-size:.63rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ember-hot);border:1px solid rgba(226,102,31,.4);
  padding:.14rem .45rem;border-radius:3px;margin-left:.5rem;vertical-align:1px}

.werkvormen{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:2.6rem}
@media(max-width:820px){.werkvormen{grid-template-columns:1fr}}
.wvk{border:1px solid var(--rule);border-radius:5px;padding:1.6rem 1.5rem;background:var(--night2)}
.wvk .n{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--ember-hot);margin-bottom:.7rem}
.wvk h3{margin-bottom:.4rem}
.wvk .duur{font-family:var(--sans);font-size:.78rem;color:var(--muted);margin-bottom:.9rem}
.wvk p{font-size:.94rem;color:var(--paper-dim)}
.wvk .let{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--rule);font-size:.9rem;color:var(--paper);font-style:italic}

.varianten{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.8rem}
@media(max-width:820px){.varianten{grid-template-columns:1fr}}
.vk{border:1px solid var(--rule);border-radius:5px;background:var(--night2);padding:1.9rem 1.7rem;display:flex;flex-direction:column}
.vk.hot{border-color:var(--ember);background:linear-gradient(180deg,rgba(226,102,31,.10),var(--night2) 58%)}
.vk .pk{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
.vk.hot .pk{color:var(--ember-hot)}
.vk .prijs{font-family:var(--serif);font-size:2.4rem;line-height:1;letter-spacing:-.03em;margin-bottom:.25rem}
.vk .prijs small{font-size:.85rem;color:var(--muted);letter-spacing:0}
.vk .onder{font-family:var(--sans);font-size:.8rem;color:var(--muted);margin-bottom:1.3rem}
.vk ul{list-style:none;padding:0;margin:0 0 1rem;flex:1}
.vk li{font-family:var(--sans);font-size:.88rem;color:var(--paper-dim);padding:.44rem 0 .44rem 1.4rem;position:relative;line-height:1.45}
.vk li::before{content:"▲";position:absolute;left:0;top:.55rem;font-size:.52rem;color:var(--ember)}
.vk li.nee{color:var(--muted)}
.vk li.nee::before{content:"–";color:var(--muted);font-size:.8rem;top:.35rem}
.vk .btn{width:100%}

.voorwie{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.6rem;max-width:46rem}
@media(max-width:700px){.voorwie{grid-template-columns:1fr}}
.voorwie div{border:1px solid var(--rule);border-radius:4px;padding:1.5rem;background:var(--night2)}
.voorwie .t{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.9rem}
.voorwie .ja .t{color:var(--ember-hot)}
.voorwie .nee .t{color:var(--muted)}
.voorwie p{font-size:.94rem;color:var(--paper-dim);margin-bottom:.6rem}
.voorwie p:last-child{margin-bottom:0}

/* ================= VUURDIAGNOSE ================= */
.vraagblok{display:grid;grid-template-columns:3.4rem 1fr;gap:1.6rem;padding:2.2rem 0;border-top:1px solid var(--rule);align-items:start}
.vraagblok:first-of-type{border-top:0}
@media(max-width:620px){.vraagblok{grid-template-columns:1fr;gap:.8rem}}
.vraagblok .vn{font-family:var(--serif);font-size:2.4rem;line-height:.9;color:var(--ember-hot);letter-spacing:-.04em}
.vraagblok h3{font-size:1.5rem;margin-bottom:.9rem}
.vraagblok p{font-size:1rem;color:var(--paper-dim);max-width:36rem}
.vraagblok .let{margin-top:1rem;padding-left:1rem;border-left:2px solid var(--ember);font-style:italic;color:var(--paper)}

.signalen{margin-top:2.4rem;max-width:44rem}
.sigknop{
  display:block;width:100%;text-align:left;background:var(--night2);border:1px solid var(--rule);
  border-radius:5px;padding:1.3rem 1.5rem;margin-bottom:.8rem;cursor:pointer;transition:.2s;
  font-family:var(--serif);color:var(--paper);
}
.sigknop:hover{border-color:#5a4238}
.sigknop[aria-expanded="true"]{border-color:var(--ember);background:rgba(226,102,31,.07)}
.sigknop .zin{font-size:1.14rem;font-style:italic;display:block}
.sigknop .hint{font-family:var(--sans);font-size:.76rem;color:var(--muted);display:block;margin-top:.5rem}
.sigknop[aria-expanded="true"] .hint{color:var(--ember-hot)}
.siguit{display:none;padding:1.1rem 0 .2rem;border-top:1px solid rgba(226,102,31,.3);margin-top:1.1rem}
.sigknop[aria-expanded="true"] .siguit{display:block}
.siguit b{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ember-hot);display:block;margin-bottom:.6rem}
.siguit p{font-family:var(--serif);font-size:.99rem;color:var(--paper-dim);margin:0}

.praktisch{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.6rem}
@media(max-width:900px){.praktisch{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.praktisch{grid-template-columns:1fr}}
.pr{border:1px solid var(--rule);border-radius:4px;padding:1.4rem 1.3rem;background:var(--night2)}
.pr .k{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.pr b{display:block;font-family:var(--serif);font-size:1.24rem;margin-bottom:.35rem}
.pr span{font-size:.88rem;color:var(--paper-dim);line-height:1.45}

/* ================= CONSULTANCY ================= */
.velden{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:2.4rem}
@media(max-width:820px){.velden{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.velden{grid-template-columns:1fr}}
.veld{border:1px solid var(--rule);border-radius:4px;padding:1.2rem 1.2rem;background:var(--night2);transition:.2s}
.veld:hover{border-color:#5a3d29}
.veld b{display:block;font-family:var(--sans);font-size:.93rem;font-weight:600;margin-bottom:.35rem}
.veld span{font-size:.88rem;color:var(--paper-dim);line-height:1.45}
.veld .hst{font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;color:var(--muted);display:block;margin-top:.7rem}

.vormen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.8rem}
@media(max-width:900px){.vormen{grid-template-columns:1fr}}
.vorm{border:1px solid var(--rule);border-radius:5px;background:var(--night2);padding:1.9rem 1.7rem;display:flex;flex-direction:column}
.vorm.hot{border-color:var(--ember);background:linear-gradient(180deg,rgba(226,102,31,.10),var(--night2) 58%)}
.vorm .pk{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
.vorm.hot .pk{color:var(--ember-hot)}
.vorm .prijs{font-family:var(--serif);font-size:2.3rem;line-height:1;letter-spacing:-.03em;margin-bottom:.25rem}
.vorm .prijs small{font-size:.82rem;color:var(--muted);letter-spacing:0}
.vorm .onder{font-family:var(--sans);font-size:.79rem;color:var(--muted);margin-bottom:1.2rem}
.vorm ul{list-style:none;padding:0;margin:0 0 1rem;flex:1}
.vorm li{font-family:var(--sans);font-size:.87rem;color:var(--paper-dim);padding:.42rem 0 .42rem 1.35rem;position:relative;line-height:1.45}
.vorm li::before{content:"▲";position:absolute;left:0;top:.55rem;font-size:.5rem;color:var(--ember)}
.vorm .btn{width:100%}

.staat{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.4rem}
@media(max-width:900px){.staat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.staat{grid-template-columns:1fr}}
.st{border-left:2px solid var(--ember);padding:.4rem 0 .4rem 1.1rem}
.st b{display:block;font-family:var(--serif);font-size:1.5rem;line-height:1.1;margin-bottom:.35rem}
.st span{font-size:.88rem;color:var(--paper-dim);line-height:1.45;display:block}

/* ================= VUURQUIZ ================= */
.vq{border:1px solid #3a2c22;border-radius:5px;background:linear-gradient(180deg,#181413,#110e0d);
  box-shadow:0 0 0 1px rgba(226,102,31,.09),0 40px 90px -50px #000;overflow:hidden}
.vq-kop{padding:1.2rem 1.5rem;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.vq-kop b{font-family:var(--sans);font-size:.95rem;font-weight:600}
.vq-tel{font-family:var(--sans);font-size:.76rem;color:var(--muted);white-space:nowrap}
.vq-balk{height:2px;background:var(--rule)}
.vq-balk i{display:block;height:100%;background:var(--ember-hot);width:0;transition:width .4s ease}
.vq-body{padding:1.7rem 1.5rem}
.vq-vraag{font-family:var(--serif);font-size:1.32rem;line-height:1.25;margin:0 0 1.3rem}
.vq-hulp{font-family:var(--sans);font-size:.82rem;color:var(--muted);margin:-.9rem 0 1.3rem}
.vq-opt{display:block;width:100%;text-align:left;background:var(--night2);border:1px solid var(--rule);
  border-radius:4px;padding:.95rem 1.15rem;margin-bottom:.6rem;cursor:pointer;transition:.16s;
  font-family:var(--serif);font-size:1.02rem;color:var(--paper);line-height:1.4}
.vq-opt:hover{border-color:var(--ember);background:rgba(226,102,31,.07)}
.vq-opt small{display:block;font-family:var(--sans);font-size:.78rem;color:var(--muted);margin-top:.3rem}
.vq-terug{background:none;border:0;color:var(--muted);font-family:var(--sans);font-size:.8rem;cursor:pointer;padding:.5rem 0;margin-top:.6rem}
.vq-terug:hover{color:var(--ember-hot)}
.vq textarea,.vq input{width:100%;font-family:var(--serif);font-size:1rem;padding:.8rem .85rem;
  border:1px solid #3d3029;border-radius:3px;background:#0b0a09;color:var(--paper);resize:vertical}
.vq textarea::placeholder,.vq input::placeholder{color:#6d5c4f}
.vq-uit .diag{border-left:3px solid var(--ember);padding:.2rem 0 .2rem 1.2rem;margin-bottom:1.5rem}
.vq-uit .diag b{display:block;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember-hot);margin-bottom:.6rem}
.vq-uit .diag p{font-size:1.06rem;color:var(--paper);margin:0 0 .7rem}
.vq-uit .diag p:last-child{margin:0;color:var(--paper-dim);font-size:.98rem}
.vq-advies{background:rgba(226,102,31,.07);border:1px solid rgba(226,102,31,.3);border-radius:4px;padding:1.2rem 1.3rem;margin-bottom:1.5rem}
.vq-advies .k{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ember-hot);margin-bottom:.55rem}
.vq-advies p{font-size:.99rem;color:var(--paper-dim);margin:0}
.vq-kanalen{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1.1rem 0 1.3rem}
@media(max-width:620px){.vq-kanalen{grid-template-columns:1fr}}
.vq-kanaal{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.9rem .6rem;
  border:1px solid var(--rule);border-radius:4px;background:var(--night2);cursor:pointer;transition:.16s;
  font-family:var(--sans);font-size:.86rem;font-weight:600;color:var(--paper);text-decoration:none}
.vq-kanaal:hover{border-color:var(--ember);color:var(--ember-hot)}
.vq-kanaal[aria-pressed="true"]{border-color:var(--ember);background:rgba(226,102,31,.1);color:var(--ember-hot)}
.vq-kanaal span{font-weight:400;font-size:.74rem;color:var(--muted)}
.vq-kanaal svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}
.vq-klaar{text-align:center;padding:1rem 0}
.vq-klaar .vink{width:52px;height:52px;border-radius:50%;background:rgba(226,102,31,.15);border:2px solid var(--ember);
  display:grid;place-items:center;margin:0 auto 1.2rem;color:var(--ember-hot);font-size:1.4rem}
.vq-klaar h3{margin-bottom:.8rem}
.vq-klaar p{color:var(--paper-dim);max-width:30rem;margin-inline:auto;font-size:.99rem}
.vq-fout{color:#ff9c6b;font-family:var(--sans);font-size:.85rem;margin-top:.7rem}
.vq-voet{font-family:var(--sans);font-size:.77rem;color:var(--muted);padding:0 1.5rem 1.3rem;line-height:1.5}

/* ================= KLEURTHEMA'S PER PAGINA ================= */
/* Het merk blijft oranje: logo, homepage, boek en model.
   Het aanbod krijgt een eigen kleur, zodat je aan de tint ziet waar je bent. */
.thema-oker   {--ember:#c9922e;--ember-hot:#eab857}
.thema-teal   {--ember:#2f8792;--ember-hot:#5fb9c4}
.thema-karmijn{--ember:#c04a3f;--ember-hot:#e07668}
.thema-mos    {--ember:#5f9450;--ember-hot:#8dc07a}
.thema-lei    {--ember:#5d76ad;--ember-hot:#89a3d6}

/* ================= LICHTE SECTIE ================= */
.sec-licht{
  background:linear-gradient(178deg,#faf4ea,#f2eade 62%,#ece2d2);
  border-top:1px solid #d9c9b6;border-bottom:1px solid #d9c9b6;color:#1c1917;
  /* de variabelen mee omzetten, zodat élk onderdeel binnen deze sectie klopt */
  --night2:#fffcf6; --night3:#f3ede4;
  --paper:#171310; --paper-dim:#4a3f37;
  --ember:#b4531f; --ember-hot:#a8481a;
  --muted:#8a7358; --rule:#dfd0bb;
}
.sec-licht h1,.sec-licht h2,.sec-licht h3{color:#171310}
.sec-licht p,.sec-licht .lede{color:#3f352d}
.sec-licht strong{color:#120f0d}
.sec-licht .eyebrow{color:#a8481a}
.sec-licht .eyebrow::before{background:#b4531f}
.sec-licht .kicker{color:#7d6852}
.sec-licht a{color:#a8481a}

.sec-licht .q{background:#fffcf6;border-color:#dfd0bb;border-left-color:#b4531f}
.sec-licht .q p{color:#241f1b}
.sec-licht .q .src{color:#8a7358}
.sec-licht .vgl div,.sec-licht .voorwie div,.sec-licht .veld,.sec-licht .pos,
.sec-licht .deel,.sec-licht .wvk,.sec-licht .pr,.sec-licht .toc-deel{
  background:#fffcf6;border-color:#dfd0bb;
}
.sec-licht .vgl .t,.sec-licht .voorwie .ja .t{color:#a8481a}
.sec-licht .voorwie .nee .t{color:#8a7358}
.sec-licht .vgl p,.sec-licht .voorwie p,.sec-licht .veld span,
.sec-licht .deel p,.sec-licht .wvk p,.sec-licht .pr span{color:#4a3f37}
.sec-licht .vgl em{color:#241f1b}
.sec-licht .veld b,.sec-licht .pr b{color:#171310}
.sec-licht .veld .hst,.sec-licht .pr .k,.sec-licht .wvk .duur{color:#8a7358}
.sec-licht .wvk .let{border-top-color:#dfd0bb;color:#241f1b}
.sec-licht .vgl.hot div:last-child{background:rgba(180,83,31,.07);border-color:#c9902e}
.sec-licht .badge{border-color:#d3c1a9;color:#5c4d40}
.sec-licht .btn-line{border-color:#c2ac8e;color:#8a3d13}
.sec-licht .btn-line:hover{border-color:#b4531f;color:#b4531f;background:rgba(180,83,31,.06)}
.sec-licht .btn-fire{background:#b4531f;color:#fff;box-shadow:0 10px 30px -14px rgba(180,83,31,.7)}
.sec-licht .btn-fire:hover{background:#9a4517}

/* wijzer naar de quiz */
.vq-wijzer{display:flex;align-items:center;gap:.7rem;margin-top:1.8rem;
  font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--ember-hot);letter-spacing:.02em}
.vq-wijzer svg{width:26px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;flex:none}
@media(max-width:900px){.vq-wijzer svg{transform:rotate(90deg)}}
.sec-licht .vq-wijzer{color:#a8481a}

/* ================= LICHTBLAUWE SECTIE ================= */
.sec-lucht{
  background:linear-gradient(178deg,#eef3f7,#e4ecf3 60%,#dbe5ee);
  border-top:1px solid #c3d2df;border-bottom:1px solid #c3d2df;color:#141b21;
  --night2:#fbfdff; --night3:#eef3f7;
  --paper:#0f161c; --paper-dim:#33414c;
  --ember:#2f6b8f; --ember-hot:#2f6b8f;
  --muted:#63757f; --rule:#c9d8e4;
}
.sec-lucht h1,.sec-lucht h2,.sec-lucht h3{color:#0f161c}
.sec-lucht p,.sec-lucht .lede{color:#33414c}
.sec-lucht strong{color:#0f161c}
.sec-lucht .eyebrow{color:#2f6b8f}
.sec-lucht .eyebrow::before{background:#2f6b8f}
.sec-lucht .kicker{color:#63757f}
.sec-lucht a{color:#2f6b8f}

/* ================= DE DRIE POSITIES ================= */
.pos3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.8rem}
@media(max-width:900px){.pos3{grid-template-columns:1fr}}
.p3{border:1px solid var(--rule);border-top:4px solid var(--pk);border-radius:0 0 5px 5px;
  padding:1.7rem 1.5rem;background:var(--night2);display:flex;flex-direction:column}
.p3.onderdanig{--pk:#7fa8cc}
.p3.assertief{--pk:#8fb87a}
.p3.dominant{--pk:#e2661f}
.p3 .lbl{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pk);margin-bottom:.9rem}
.p3 .eerste{font-family:var(--serif);font-size:1.28rem;line-height:1.3;font-style:italic;
  color:var(--paper);margin-bottom:1.2rem}
.p3 p{font-size:.96rem;color:var(--paper-dim);margin-bottom:.75rem}
.p3 .nodig{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--rule)}
.p3 .nodig span{font-family:var(--sans);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.35rem}
.p3 .nodig b{font-family:var(--serif);font-size:1.16rem;color:var(--pk);font-weight:500}

/* de spiegel */
.spiegel{max-width:44rem;margin:0 auto}
.spiegel .aanhef{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.15;
  letter-spacing:-.02em;text-align:center;margin:0 0 2.4rem}
.drie-plekken{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2.6rem}
@media(max-width:760px){.drie-plekken{grid-template-columns:1fr}}
.plek{background:#fbfdff;border:1px solid #cddbe6;border-radius:4px;padding:1.4rem 1.3rem}
.plek b{display:block;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#2f6b8f;margin-bottom:.7rem}
.plek p{font-size:.99rem;line-height:1.5;color:#33414c;margin:0}
.spiegel .klap{text-align:center;font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,1.6rem);
  line-height:1.35;color:#0f161c;margin:0 0 1rem}
.spiegel .klap em{font-style:italic}
.spiegel .naklap{text-align:center;font-size:1.02rem;color:#4b5a66;max-width:34rem;margin:0 auto}

/* ontwerpwet */
.wet{border:1px solid var(--rule);border-left:4px solid var(--ember);border-radius:0 5px 5px 0;
  background:var(--night2);padding:1.7rem 1.8rem;margin:2.6rem 0;max-width:40rem}
.wet .k{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ember-hot);margin-bottom:.8rem}
.wet p{font-family:var(--serif);font-size:1.2rem;line-height:1.35;color:var(--paper);margin:0 0 .4rem}
.wet p:last-child{margin:0;color:var(--paper-dim)}

/* ================= VERHAALSECTIE ================= */
.verhaal{position:relative;overflow:hidden;
  background:radial-gradient(70% 60% at 50% 40%,rgba(226,102,31,.12),transparent 70%),#080706;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:6rem 0}
.verhaal-in{max-width:34rem;margin:0 auto;text-align:center}
.verhaal .eyebrow{justify-content:center;margin-bottom:2.4rem}
.verhaal p{font-family:var(--serif);font-size:1.22rem;line-height:1.5;color:var(--paper-dim);margin:0 0 .55em}
.verhaal p.wit{color:var(--paper)}
.verhaal p.stil{color:var(--muted);font-style:italic}
.verhaal .adem{height:2.2rem}
.verhaal .belofte{
  font-family:var(--serif);font-size:clamp(1.7rem,4.4vw,2.7rem);line-height:1.15;
  letter-spacing:-.02em;color:var(--paper);margin:2.6rem 0;
}
.verhaal .belofte em{font-style:italic;color:var(--ember-hot)}
.verhaal .munt{
  display:inline-block;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:1.3rem 0;margin:2.4rem 0;font-size:1.16rem;color:var(--paper);
}
.verhaal .draai{margin-top:2.8rem;font-size:1.08rem;color:var(--paper-dim)}
.verhaal .wet{max-width:none;text-align:left;margin-top:2.6rem}

/* ================= AANNAME TEGENOVER WERKELIJKHEID ================= */
.aannames{margin-top:3rem}
.aanname{border-top:1px solid var(--rule);padding:2.6rem 0}
.aanname:first-child{border-top:0;padding-top:1rem}
.aanname .plaats{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:1.6rem}
.aanname .plaats b{font-family:var(--serif);font-size:1.7rem;font-weight:500;letter-spacing:-.015em}
.aanname .plaats span{font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.tegenover{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:stretch}
@media(max-width:820px){.tegenover{grid-template-columns:1fr;gap:.8rem}}
.tegenover > div{border:1px solid var(--rule);border-radius:5px;padding:1.4rem 1.4rem;background:var(--night2)}
.tegenover .fout{border-style:dashed;opacity:.9}
.tegenover .echt{border-color:var(--ember);background:rgba(226,102,31,.07)}
.tegenover .k{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:.8rem}
.tegenover .fout .k{color:var(--muted)}
.tegenover .echt .k{color:var(--ember-hot)}
.tegenover p{font-size:1rem;line-height:1.55;color:var(--paper-dim);margin:0 0 .6rem}
.tegenover p:last-child{margin:0}
.tegenover .echt p{color:var(--paper)}
.aanname .klap{margin-top:1.4rem;font-family:var(--serif);font-size:1.2rem;line-height:1.4;
  color:var(--paper);border-left:3px solid var(--ember);padding-left:1.2rem}
.sec-licht .tegenover > div{background:#fffcf6;border-color:#dfd0bb}
.sec-licht .tegenover .echt{border-color:#b4531f;background:rgba(180,83,31,.07)}
.sec-licht .tegenover p{color:#4a3f37}
.sec-licht .tegenover .echt p{color:#241f1b}
.sec-licht .aanname .klap{color:#171310;border-left-color:#b4531f}
.sec-licht .tegenover .echt .k{color:#a8481a}

/* wat het oploste */
.aanname .oplossing{margin-top:1.3rem;border:1px solid var(--rule);border-radius:5px;
  background:var(--night2);padding:1.3rem 1.4rem}
.aanname .oplossing .k{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember-hot);margin-bottom:.75rem}
.aanname .oplossing p{font-size:1rem;line-height:1.55;color:var(--paper-dim);margin:0 0 .6rem}
.aanname .oplossing p:last-child{margin:0}
.sec-licht .aanname .oplossing{background:#fffcf6;border-color:#dfd0bb}
.sec-licht .aanname .oplossing p{color:#4a3f37}
.sec-licht .aanname .oplossing .k{color:#a8481a}

/* ================= BEWIJS, KORT ================= */
.bewijs{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:2.8rem}
@media(max-width:820px){.bewijs{grid-template-columns:1fr}}
.bw{border:1px solid var(--rule);border-left:3px solid var(--ember);border-radius:0 5px 5px 0;
  background:var(--night2);padding:1.6rem 1.6rem}
.bw .waar{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember-hot);margin-bottom:1rem}
.bw p{font-size:1.02rem;line-height:1.5;margin:0 0 .55rem;color:var(--paper-dim)}
.bw p.was{color:var(--paper);font-weight:500}
.bw p.uit{margin:1rem 0 0;padding-top:.9rem;border-top:1px solid var(--rule);
  font-family:var(--serif);font-style:italic;color:var(--ember-hot);font-size:1.02rem}
.sec-licht .bw{background:#fffcf6;border-color:#dfd0bb;border-left-color:#b4531f}
.sec-licht .bw p{color:#4a3f37}
.sec-licht .bw p.was{color:#171310}
.sec-licht .bw .waar,.sec-licht .bw p.uit{color:#a8481a}
.sec-licht .bw p.uit{border-top-color:#dfd0bb}

/* ================= VIER VERHALEN, STACCATO ================= */
.verhalen{margin-top:3rem}
.vh{border-top:1px solid var(--rule);padding:2.8rem 0}
.vh:first-child{border-top:0;padding-top:1.2rem}
.vh-kop{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:1.5rem}
.vh-kop b{font-family:var(--serif);font-size:1.75rem;font-weight:500;letter-spacing:-.015em}
.vh-kop span{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vh-tekst{max-width:38rem}
.vh-tekst p{font-size:1.06rem;line-height:1.5;margin:0 0 .5em;color:var(--paper-dim)}
.vh-tekst p.sterk{color:var(--paper);font-weight:500}
.vh-tekst p.adem{margin-top:1.2em}
.vh-uit{margin-top:1.5rem;padding-left:1.2rem;border-left:3px solid var(--ember);
  font-family:var(--serif);font-size:1.16rem;line-height:1.4;color:var(--paper);max-width:38rem}
.sec-licht .vh-tekst p{color:#4a3f37}
.sec-licht .vh-tekst p.sterk{color:#171310}
.sec-licht .vh-uit{color:#171310;border-left-color:#b4531f}

/* ================= HET VUURUUR ================= */
.datumkaart{border:1px solid var(--ember);border-radius:6px;
  background:linear-gradient(180deg,rgba(226,102,31,.13),var(--night2) 62%);
  padding:1.9rem 1.8rem;max-width:24rem;box-shadow:0 0 60px -30px rgba(226,102,31,.8)}
.datumkaart .k{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember-hot);margin-bottom:.9rem}
.datumkaart .dag{font-family:var(--serif);font-size:1.9rem;line-height:1.15;margin-bottom:.4rem}
.datumkaart .tijd{font-family:var(--sans);font-size:.92rem;color:var(--paper-dim);margin-bottom:1.3rem}
.datumkaart .rij{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  border-top:1px solid var(--rule);font-family:var(--sans);font-size:.86rem}
.datumkaart .rij span{color:var(--muted)}
.datumkaart .rij b{color:var(--paper);font-weight:600}
.datumkaart .btn{width:100%;margin-top:1.4rem}
.datumkaart .fijn{font-family:var(--sans);font-size:.76rem;color:var(--muted);margin-top:.9rem;line-height:1.5;text-align:center}

.verloop{max-width:44rem;margin-top:2.6rem;counter-reset:vl}
.vl{display:flex;gap:1.3rem;padding:1.2rem 0;border-bottom:1px solid var(--rule);align-items:baseline}
.vl:last-child{border-bottom:0}
.vl .t{font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--ember-hot);flex:none;width:5.2rem}
.vl b{display:block;font-family:var(--sans);font-size:.98rem;font-weight:600;margin-bottom:.25rem}
.vl span{font-size:.95rem;color:var(--paper-dim);line-height:1.5}

.nietdit{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2.6rem;max-width:46rem}
@media(max-width:700px){.nietdit{grid-template-columns:1fr}}
.nietdit div{border:1px solid var(--rule);border-radius:5px;padding:1.5rem;background:var(--night2)}
.nietdit .wel{border-color:var(--ember);background:rgba(226,102,31,.07)}
.nietdit .k{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:.9rem;color:var(--muted)}
.nietdit .wel .k{color:var(--ember-hot)}
.nietdit p{font-size:.96rem;color:var(--paper-dim);margin-bottom:.55rem}
.nietdit p:last-child{margin-bottom:0}
.nietdit .wel p{color:var(--paper)}

/* ================= UITGELICHT IN DE NAVIGATIE ================= */
.nav-links a.nav-uit{
  color:var(--ember-hot);font-weight:600;border:1px solid rgba(226,102,31,.45);
  border-radius:99px;padding:.32rem .8rem;margin:-.32rem 0;
  background:rgba(226,102,31,.10);transition:.18s;
}
.nav-links a.nav-uit:hover{background:rgba(226,102,31,.2);border-color:var(--ember)}
.licht .nav-links a.nav-uit{color:#a8481a;border-color:rgba(180,83,31,.4);background:rgba(180,83,31,.09)}

/* ================= LICHTE PAGINA ================= */
body.licht{
  --night:#faf6ef;
  --night2:#ffffff;
  --night3:#f3ede4;
  --paper:#1a1613;
  --paper-dim:#4d4238;
  --ember:#b4531f;
  --ember-hot:#b4531f;
  --muted:#8a7a68;
  --rule:#e2d8c9;
}
body.licht .nav{background:rgba(250,246,239,.9)}
body.licht .btn-line{border-color:#cdbca4;color:#8a3d13}
body.licht .btn-line:hover{border-color:#b4531f;color:#b4531f;background:rgba(180,83,31,.06)}
body.licht .btn-fire{color:#fff;box-shadow:0 10px 30px -14px rgba(180,83,31,.6)}
body.licht .sec-alt{background:var(--night2)}
body.licht .badge{border-color:#ddd0bd}
body.licht .datumkaart{box-shadow:0 22px 50px -30px rgba(180,83,31,.55)}
body.licht .faq summary::after{color:var(--ember)}
body.licht .slot::before{background:radial-gradient(50% 50% at 50% 80%,rgba(180,83,31,.13),transparent 70%)}
body.licht .hero::before,body.licht header.sec::before{opacity:.5}
body.licht .mark{color:#1a1613}

/* één donkere sectie op een lichte pagina, voor het ritme */
.sec-donker{
  --night2:#141110; --paper:#f4ece2; --paper-dim:#c6b6a4; --muted:#9c8875;
  --rule:#2e2622; --ember-hot:#ff8c3f;
  background:#0b0a09;color:var(--paper);
  border-top:1px solid #2e2622;border-bottom:1px solid #2e2622;
}
.sec-donker h1,.sec-donker h2,.sec-donker h3{color:#f4ece2}
.sec-donker p,.sec-donker .lede{color:#c6b6a4}
.sec-donker strong{color:#f4ece2}
.sec-donker .eyebrow{color:#ff8c3f}
.sec-donker .eyebrow::before{background:#e2661f}

/* ================= TEASER ================= */
.teaser{
  border:1px solid rgba(226,102,31,.45);border-radius:6px;
  background:linear-gradient(120deg,rgba(226,102,31,.13),rgba(226,102,31,.04) 62%),var(--night2);
  padding:1.9rem 2rem;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
  box-shadow:0 0 60px -34px rgba(226,102,31,.9);
}
@media(max-width:820px){.teaser{grid-template-columns:1fr;gap:1.3rem}}
.teaser .k{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ember-hot);margin-bottom:.7rem;display:flex;align-items:center;gap:.6rem}
.teaser .k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ember-hot);
  box-shadow:0 0 10px var(--ember-hot);flex:none}
.teaser h3{font-size:clamp(1.35rem,2.6vw,1.75rem);margin-bottom:.6rem;line-height:1.2}
.teaser p{font-size:.99rem;color:var(--paper-dim);margin:0;max-width:38rem;line-height:1.5}
.teaser-rechts{text-align:right}
@media(max-width:820px){.teaser-rechts{text-align:left}}
.teaser .wanneer{font-family:var(--sans);font-size:.8rem;color:var(--muted);margin-bottom:.85rem;white-space:nowrap}
.teaser .wanneer b{color:var(--paper);font-weight:600}
.teaser .btn{white-space:nowrap}
.sec-licht .teaser,body.licht .teaser{border-color:rgba(180,83,31,.4);box-shadow:0 16px 40px -30px rgba(180,83,31,.7)}

/* ================= DE LADDER ================= */
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:3rem;align-items:stretch}
@media(max-width:1080px){.ladder{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.ladder{grid-template-columns:1fr}}
.trede{
  position:relative;border:1px solid var(--rule);border-top:4px solid var(--tk);
  border-radius:0 0 6px 6px;background:var(--night2);padding:1.6rem 1.35rem 1.5rem;
  display:flex;flex-direction:column;text-decoration:none;transition:transform .22s,border-color .22s,background .22s;
}
.trede:hover{transform:translateY(-5px);background:#1a1513}
.trede .ico{width:52px;height:52px;margin-bottom:1.1rem;color:var(--tk);flex:none}
.trede .ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.trede .nr{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.18em;
  color:var(--muted);margin-bottom:.5rem}
.trede h3{font-size:1.16rem;margin-bottom:.5rem;line-height:1.2}
.trede .prijs2{font-family:var(--serif);font-size:1.55rem;color:var(--tk);line-height:1;margin-bottom:.8rem}
.trede .prijs2 small{font-family:var(--sans);font-size:.72rem;color:var(--muted);display:block;margin-top:.3rem;letter-spacing:.02em}
.trede .voor{font-family:var(--sans);font-size:.84rem;color:var(--paper-dim);line-height:1.5;flex:1}
.trede .voor b{display:block;color:var(--paper);font-weight:600;margin-bottom:.3rem;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase}
.trede .ga{font-family:var(--sans);font-size:.83rem;font-weight:600;color:var(--tk);margin-top:1.2rem}
.trede .ga::after{content:" →"}
.trede .vlag2{position:absolute;top:-.7rem;right:1rem;font-family:var(--sans);font-size:.62rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--tk);color:#0b0a09;
  padding:.28rem .6rem;border-radius:3px}
.ladder-lijn{height:3px;border-radius:2px;margin-top:2.6rem;
  background:linear-gradient(90deg,#5d76ad,#5f9450,#c9922e,#c04a3f,#e2661f)}
.ladder-uit{display:flex;justify-content:space-between;font-family:var(--sans);font-size:.76rem;
  color:var(--muted);margin-top:.7rem;letter-spacing:.04em}
.sec-licht .trede{background:#fffcf6;border-color:#dfd0bb}
.sec-licht .trede:hover{background:#fff}
.sec-licht .trede .voor{color:#4a3f37}
.sec-licht .trede .voor b{color:#171310}

/* ================= ICONEN IN KAARTEN ================= */
.kaart-ico{width:44px;height:44px;margin-bottom:1.1rem;color:var(--tk,var(--ember-hot));flex:none}
.kaart-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.deel{border-top:4px solid var(--tk,var(--ember))}
.deel .rom{color:var(--tk,var(--ember-hot))}
.wvk{border-top:3px solid var(--tk,var(--ember))}
.wvk .n{color:var(--tk,var(--ember-hot))}
.veld{border-top:3px solid var(--tk,var(--ember))}
.veld .hst{color:var(--tk,var(--ember-hot));opacity:.85}
.veld .kaart-ico{width:34px;height:34px;margin-bottom:.8rem}

/* bewijsblokken met kleur en icoon */
.staat{grid-template-columns:repeat(5,1fr)}
@media(max-width:1080px){.staat{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.staat{grid-template-columns:1fr}}
.st{border-left:3px solid var(--tk,var(--ember));padding:.2rem 0 .2rem 1.1rem}
.st .kaart-ico{width:32px;height:32px;margin-bottom:.75rem}
.st b{color:var(--tk,var(--paper))}

/* ================= DRIE REGELS ================= */
.regels{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.8rem}
@media(max-width:880px){.regels{grid-template-columns:1fr}}
.rg{border:1px solid var(--rule);border-top:4px solid var(--tk);border-radius:0 0 6px 6px;
  background:var(--night2);padding:1.7rem 1.6rem;display:flex;flex-direction:column}
.rg .kaart-ico{color:var(--tk)}
.rg .nr{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.18em;color:var(--muted);margin-bottom:.5rem}
.rg h3{font-size:1.4rem;margin-bottom:.9rem;color:var(--tk)}
.rg p{font-size:.98rem;line-height:1.55;color:var(--paper-dim);margin:0 0 .6rem}
.rg p:last-child{margin:0}
.rg .kern{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--rule);
  font-family:var(--serif);font-style:italic;font-size:1.04rem;color:var(--paper)}
.vrouw{max-width:38rem;margin:3.4rem 0 0;padding-left:1.5rem;border-left:3px solid var(--tk,var(--ember))}
.vrouw .zin{font-family:var(--serif);font-size:clamp(1.45rem,3.2vw,2.1rem);line-height:1.3;
  letter-spacing:-.015em;color:var(--paper);margin:0 0 1.1rem;font-style:italic}
.vrouw .zin b{display:block;font-weight:500;color:var(--ember-hot)}
.vrouw .wie{font-family:var(--sans);font-size:.8rem;letter-spacing:.08em;color:var(--muted);margin:0}

/* ================= DOORSTUREN ================= */
.deelbalk{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.8rem}
.deelbalk .lab{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-right:.3rem}
.deelknop{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.85rem;
  font-weight:500;padding:.6rem 1rem;border:1px solid var(--rule);border-radius:99px;
  color:var(--paper-dim);text-decoration:none;background:transparent;cursor:pointer;transition:.16s;
}
.deelknop:hover{border-color:var(--ember);color:var(--ember-hot);background:rgba(226,102,31,.07)}
.deelknop svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.deelknop.gelukt{border-color:var(--ember);color:var(--ember-hot)}

/* kader voor diagrammen op het leesvel */
.fig-licht{
  border:1px solid #dcccb4;border-radius:6px;
  background:linear-gradient(178deg,#fdf9f2,#f7f0e4);
  padding:2rem clamp(1rem,3.5vw,2.4rem) 1.6rem;
}
.fig-licht figcaption{color:#8a7358;margin-top:1.3rem}

/* ================= GEEN WEESKINDEREN ================= */
/* balance verdeelt korte teksten over gelijke regels, pretty voorkomt
   dat er één woord alleen op de laatste regel achterblijft */
h1,h2,h3,h4,
.lede,.eyebrow,.kicker,
figcaption,
.tri-status,.fineprint,.fijn,.vbp,
.blad-kop h2,.leesslot p,.slot p,
.trede .voor,.trede h3,
.bw p,.st span,.veld span,.deel p,.wvk p,.pos p,.p3 p,.rg p,
.vh-uit,.wet p,.q p,.klap,.naklap,.vrouw .zin,
.aanname .klap,.dagrij span,.vl span,.plek p,
.faq summary,.faq details p,
.nietdit p,.voorwie p,.vgl p,.tegenover p,
.pr span,.vorm li,.kaart li,.vk li,.trede .prijs2 small{
  text-wrap:balance;
}
p,li,.blad p,.vh-tekst p,.oplossing p{text-wrap:pretty}

/* ================= MOBIEL MENU ================= */
.menu-knop{display:none}
@media(max-width:960px){
  .nav-in{position:relative}
  .menu-knop{
    display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
    margin-left:auto;margin-right:.6rem;border:1px solid var(--rule);border-radius:4px;
    cursor:pointer;color:var(--paper);flex:none;
  }
  .menu-knop svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
  .menu-knop .kruis{display:none}
  .menu-schakel:checked ~ .nav-in .menu-knop .kruis,
  .nav-in .menu-schakel:checked + .menu-knop .kruis{display:block}
  .nav-in .menu-schakel:checked + .menu-knop .balken{display:none}
  .nav-in .menu-schakel:checked + .menu-knop{border-color:var(--ember);color:var(--ember-hot)}

  .nav-links{
    display:none;position:absolute;top:calc(100% + 1px);left:calc(-1 * (50vw - 50%));
    width:100vw;flex-direction:column;gap:0;
    background:var(--night);border-bottom:1px solid var(--rule);
    padding:.4rem 0 1rem;box-shadow:0 24px 40px -28px #000;
  }
  .nav-in .menu-schakel:checked ~ .nav-links{display:flex}
  .nav-links a{
    padding:.95rem clamp(1.1rem,5vw,2rem);font-size:1rem;
    border-bottom:1px solid var(--rule);color:var(--paper);
  }
  .nav-links a:last-child{border-bottom:0}
  .nav-links a.nav-uit{
    margin:.6rem clamp(1.1rem,5vw,2rem) 0;border-radius:4px;
    border:1px solid rgba(226,102,31,.45);padding:.9rem 1rem;
  }
}
body.licht .nav-links{background:#faf6ef}

/* ================= DIAGRAMMEN OP EEN SMAL SCHERM ================= */
@media(max-width:760px){
  .fig{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.4rem}
  .fig svg{min-width:560px}
  .fig::after{
    content:"Sleep opzij om het hele schema te zien";
    display:block;font-family:var(--sans);font-size:.72rem;color:var(--muted);
    margin-top:.7rem;text-align:center;position:sticky;left:0;
  }
  .fig figcaption{position:sticky;left:0}
}

/* kolomvarianten als klasse, zodat ze op mobiel wél terugvallen */
.k3{grid-template-columns:repeat(3,1fr)!important;max-width:none!important}
.k4{grid-template-columns:repeat(4,1fr)!important}
@media(max-width:900px){.k3,.k4{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:600px){.k3,.k4{grid-template-columns:1fr!important}}

/* ================= WAAROM TRAININGEN FALEN ================= */
.faal{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.8rem}
@media(max-width:900px){.faal{grid-template-columns:1fr}}
.fl{border:1px solid var(--rule);border-top:4px solid var(--tk);border-radius:0 0 6px 6px;
  background:var(--night2);padding:1.7rem 1.5rem;display:flex;flex-direction:column}
.fl .kaart-ico{color:var(--tk)}
.fl .nr{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.18em;color:var(--muted);margin-bottom:.5rem}
.fl h3{font-size:1.22rem;margin-bottom:.8rem}
.fl p{font-size:.96rem;line-height:1.55;color:var(--paper-dim);margin:0 0 .6rem}
.fl .waarom{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--rule)}
.fl .waarom span{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tk);display:block;margin-bottom:.45rem}
.fl .waarom p{font-family:var(--serif);font-style:italic;color:var(--paper);font-size:1rem;margin:0}

/* ── intekenfunnel: velden binnen de vq-schil ── */
.vq-veld{margin-bottom:1rem}
.vq-veld label{display:block;font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.vq-veld input{width:100%;font-family:var(--serif);font-size:1rem;padding:.85rem .9rem;
  border:1px solid #3d3029;border-radius:3px;background:#0b0a09;color:var(--paper);
  transition:border-color .18s}
.vq-veld input:focus{outline:none;border-color:var(--ember)}
.vq-veld input::placeholder{color:#6d5c4f}
.vq-fout{font-family:var(--sans);font-size:.84rem;color:var(--ember-hot);
  margin:.2rem 0 .9rem;padding-left:.1rem}
.vq-klein{font-family:var(--sans);font-size:.76rem;color:var(--muted);
  text-align:center;margin-top:1rem;line-height:1.5}

/* ── uitgelichte quote buiten het leesblad ── */
.uitgelicht{margin:1.8rem 0;padding:.2rem 0 .2rem 1.6rem;border-left:3px solid var(--ember)}
.uitgelicht p{font-family:var(--serif);font-size:1.28rem;line-height:1.45;
  font-style:italic;color:var(--paper);margin:0}
@media(max-width:600px){.uitgelicht p{font-size:1.12rem}}

/* ── de vier lagen van waarde ── */
.lagen{margin:2rem 0 0;display:flex;flex-direction:column;gap:.7rem}
.laag{border:1px solid var(--rule);border-radius:4px;padding:1.1rem 1.3rem;
  display:grid;grid-template-columns:1fr auto;gap:.2rem 1.4rem;align-items:baseline}
.laag.top{border-color:var(--ember);background:rgba(226,102,31,.06)}
.laag b{font-family:var(--sans);font-size:.9rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper)}
.laag.top b{color:var(--ember-hot)}
.laag span{grid-column:1;font-size:.98rem;color:var(--muted);line-height:1.5}
.laag i{grid-row:1/3;font-family:var(--sans);font-size:.78rem;font-style:normal;
  color:var(--muted);white-space:nowrap;align-self:center}
@media(max-width:600px){
  .laag{grid-template-columns:1fr}
  .laag i{grid-row:auto;margin-top:.4rem;opacity:.8}
}