/* Keuzehulp (/keuzehulp). Bouwt op de tokens uit mono.css en de veldstijl (.ct__field) uit mono-pages.css. */
.kh__hero{padding-bottom:clamp(1.2rem,3vh,2rem)}
.kh__hero .pg__title{font-size:clamp(2.7rem,7.2vw,6.4rem);max-width:14ch}
.kh__lead{margin-top:clamp(1rem,2.4vh,1.6rem);color:#a5a298;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.5;max-width:46ch}

.kh{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(1.6rem,5vw,5rem);
  padding:clamp(1.6rem,4vh,3rem) var(--gut) clamp(4rem,10vh,7rem);border-top:1px solid var(--line-2);min-height:34rem}
.kh__noscript{grid-column:1/-1;color:#a5a298}
.kh__noscript a{text-decoration:underline;text-underline-offset:.2em;color:var(--ink)}
.kh__meta{position:sticky;top:6.5rem;align-self:start;display:grid;gap:.9rem}
.kh__meta[hidden]{display:none}
.kh__count{color:#b8b5aa}
.kh__bar{height:2px;background:var(--line);overflow:hidden}
.kh__bar span{display:block;height:100%;width:0;background:var(--blue);transition:width .45s var(--ease)}
.kh__back{justify-self:start;background:none;border:0;padding:.6rem 0;color:#a5a298;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.kh__back:hover,.kh__back:focus-visible{color:var(--ink)}
.kh__back:focus-visible,.kh__link:focus-visible,.kh__wa:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.kh__back[hidden]{display:none}

.kh__stage{min-width:0;max-width:52rem}
.kh__stage.is-in{animation:khIn .4s var(--ease) both}
@keyframes khIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* alleen de kop die we na een stap programmatisch focussen krijgt geen ring; knoppen en links houden hem */
.kh__stage [tabindex="-1"]:focus{outline:none}
.kh__vraag{font-family:var(--sans);font-weight:500;font-size:clamp(1.7rem,3.1vw,2.9rem);line-height:1.08;letter-spacing:-.02em;color:#ece9e1;max-width:20ch}
.kh__hint{margin-top:.8rem;color:#a5a298;font-size:1rem;max-width:44ch}
.kh__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:clamp(1.4rem,3vh,2.2rem)}
.kh__opt{display:flex;align-items:center;gap:.9rem;text-align:left;min-height:4rem;padding:1.05rem 1.1rem;background:#11100d;border:1px solid var(--line-2);border-radius:4px;
  color:#ece9e1;font-family:var(--sans);font-weight:500;font-size:1.05rem;line-height:1.3;cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease)}
.kh__opt-n{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:#86837a;flex:none}
.kh__opt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.kh__opt.is-on{background:rgba(4,157,255,.1);border-color:var(--blue)}
.kh__opt.is-on .kh__opt-n{color:var(--blue)}
@media(hover:hover) and (pointer:fine){.kh__opt:hover{background:rgba(232,232,227,.06);border-color:rgba(236,233,225,.3)}.kh__opt.is-on:hover{background:rgba(4,157,255,.14);border-color:var(--blue)}}

.kh__verder{margin-top:1.4rem;justify-self:start;background:var(--btn);color:#0d0c0a;border:0;border-radius:3px;padding:.8rem 1.1rem;font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1;cursor:pointer;transition:opacity .25s}
.kh__verder:disabled{opacity:.35;cursor:not-allowed}
.kh__verder:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.kh__res-kop{font-family:var(--sans);font-weight:500;font-size:clamp(1.9rem,3.6vw,3.4rem);line-height:1.05;letter-spacing:-.02em;color:#ece9e1;max-width:18ch}
.kh__res-waarom{margin-top:1.2rem;color:#c9c6bc;font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.55;max-width:50ch}
.kh__facts{margin-top:clamp(1.6rem,4vh,2.6rem);border-top:1px solid var(--line)}
.kh__fact{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:1.2rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.kh__fact dt{color:#b8b5aa;padding-top:.2rem}
.kh__fact dd{color:#ece9e1;line-height:1.55;max-width:52ch}
.kh__link{text-decoration:underline;text-underline-offset:.22em;text-decoration-color:rgba(236,233,225,.4)}
.kh__link:hover,.kh__link:focus-visible{text-decoration-color:var(--blue)}
.kh__res-meer{margin-top:1.1rem;color:#c9c6bc}

.kh__lead-box{margin-top:clamp(2.2rem,6vh,3.6rem);padding:clamp(1.4rem,3vw,2.2rem);border:1px solid var(--line);border-radius:4px;background:var(--bg-2);display:grid;gap:1rem}
.kh__lead-kop{font-family:var(--sans);font-weight:500;font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1.15;letter-spacing:-.015em;color:#ece9e1}
.kh__lead-txt{color:#a5a298;line-height:1.6;max-width:50ch}
.kh__wa{justify-self:start;font-size:1.15rem}
.kh__form{display:grid;gap:1.1rem;max-width:30rem;margin-top:.6rem;padding-top:1.4rem;border-top:1px solid var(--line-2)}
.kh__form-of{color:#c9c6bc;font-weight:600}
.kh__form .kh__verder{margin-top:.2rem}
.kh__klein{font-size:.85rem;color:#86837a;line-height:1.5}
.kh__opnieuw{margin-top:1.6rem}

@media(max-width:860px){
  .kh{grid-template-columns:1fr;gap:1.4rem;min-height:0}
  .kh__meta{position:static;grid-template-columns:1fr auto;align-items:center;gap:.7rem 1rem}
  .kh__bar{grid-column:1/-1;grid-row:2}
  .kh__back{justify-self:end;padding:.4rem 0;min-height:44px}
  .kh__opnieuw{justify-self:start}
  .kh__opts{grid-template-columns:1fr}
  /* bij een meerkeuzevraag staan er zes antwoorden onder elkaar: de knop blijft in beeld */
  .kh__q .kh__verder{position:sticky;bottom:1rem;box-shadow:0 10px 30px -8px rgba(0,0,0,.8)}
  .kh__fact{grid-template-columns:1fr;gap:.4rem}
}
@media(prefers-reduced-motion:reduce){.kh__stage.is-in{animation:none}.kh__bar span{transition:none}}

/* de WhatsApp-praatballon van mono.js valt op een telefoon over de antwoorden heen; de vaste knop blijft */
.wa-pop{display:none!important}