/* Dutch Kahuna Academy — eigen leeromgeving (vervangt LearnDash, Formidable en BuddyBoss).
   Zelfde huisstijl als de site: nacht/woud/sneeuw, één rode vlag, Clash Display + Onest. Rustig: hier wordt gelezen. */
@font-face{font-family:"Clash";src:url(/fonts/clash-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Clash";src:url(/fonts/clash-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Onest";src:url(/fonts/onest.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --nacht:#0b1511;--woud:#12301f;--groen:#2f6b47;--mos:#8fb197;--sneeuw:#f2efe8;--papier:#faf8f3;--inkt:#0f1a15;
  --rood:#e8322b;--rood-d:#c4231d;--grijs:#5b665f;--lijn:#e2ddd2;--lijn-d:#cfc8ba;--zacht:#efebe2;
  --display:"Clash","Arial Narrow",sans-serif;--ease:cubic-bezier(.2,.7,.1,1);
  --bar:4rem;--tab:0px;--rand:clamp(1rem,3.4vw,2.6rem);--kader:min(77.5rem,calc(100vw - 2*var(--rand)));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 1rem)}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:"Onest",system-ui,sans-serif;font-size:clamp(1rem,.97rem + .15vw,1.08rem);line-height:1.6;overflow-x:clip;min-height:100dvh}
img,video,svg{display:block;max-width:100%}
img{height:auto}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:.1875rem solid var(--rood);outline-offset:.125rem}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.01em;margin:0;hyphens:manual;overflow-wrap:normal;text-wrap:balance}
h1{font-size:clamp(2.1rem,1.5rem + 2.8vw,4rem)}
h2{font-size:clamp(1.6rem,1.25rem + 1.5vw,2.5rem)}
h3{font-size:clamp(1.15rem,1.05rem + .45vw,1.45rem);font-weight:600;line-height:1.15}
p,li,dd,td{hyphens:auto;overflow-wrap:break-word}
p{margin:0 0 1em}
.skip{position:absolute;left:-624.9375rem}.skip:focus{left:1rem;top:.7rem;z-index:999;background:var(--sneeuw);padding:.5rem 1rem}
.mark{display:inline-flex;flex-direction:column;width:1.25rem;height:.875rem;border-radius:.125rem;overflow:hidden;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.mark i{flex:1;background:var(--rood)}.mark i:nth-child(2){background:#fff}
.label{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.92rem;margin:0 0 .9rem;color:var(--grijs)}
.kader{width:var(--kader);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;padding:.7rem 1.25rem;border-radius:62.4375rem;border:0;font-weight:600;text-decoration:none;
  line-height:1.15;transition:background-color .2s,color .2s,box-shadow .2s,transform .2s var(--ease);background:var(--rood);color:#fff;text-align:center}
.knop:hover{background:var(--rood-d)}
.knop svg{width:1.1875rem;height:1.1875rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;transition:transform .25s var(--ease)}
.knop:hover svg.pijl{transform:translateX(.1875rem)}
.knop.licht{background:transparent;color:inherit;box-shadow:inset 0 0 0 .125rem currentColor}.knop.licht:hover{background:rgba(127,127,127,.12)}
.knop.donker{background:var(--nacht);color:var(--sneeuw)}.knop.donker:hover{background:var(--woud)}
.knop.klein{min-height:2.5rem;padding:.45rem 1rem;font-size:.95rem}
.knop[disabled],.knop[aria-disabled=true]{opacity:.45;pointer-events:none}
.tekstknop{background:none;border:0;padding:.4rem 0;min-height:2.5rem;font-weight:600;text-decoration:underline;text-underline-offset:.1875rem;text-decoration-thickness:.0938rem}
.tekstknop:hover{color:var(--rood)}

/* ------------------------------------------------------------------ app-kop */
.bar{position:sticky;top:0;z-index:60;height:var(--bar);background:var(--nacht);color:var(--sneeuw);display:flex;align-items:center;gap:1rem;padding:0 var(--rand)}
.bar-merk{display:flex;align-items:center;gap:.8rem;text-decoration:none;flex:0 0 auto;min-height:2.75rem}
.bar-merk svg{width:3.625rem;height:auto;color:var(--sneeuw)}
.bar-merk span{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:.01em;padding-left:.8rem;border-left:1px solid rgba(242,239,232,.25);line-height:1.2}
.bar-nav{display:flex;gap:.2rem;margin-left:1.4rem}
.bar-nav a{position:relative;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .75rem;text-decoration:none;font-weight:500;font-size:.97rem;opacity:.82;border-radius:.5rem}
.bar-nav a:hover{opacity:1;background:rgba(255,255,255,.06)}
.bar-nav a[aria-current]{opacity:1}
.bar-nav a[aria-current]::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.375rem;height:.125rem;background:var(--rood)}
.bar-rechts{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.bar-zoek{width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;border:0;background:transparent;color:inherit;text-decoration:none}
.bar-zoek:hover{background:rgba(255,255,255,.08)}
.bar-zoek svg{width:1.3125rem;height:1.3125rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.avatar{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--rood);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.92rem;letter-spacing:.02em;flex:0 0 auto;border:0;text-transform:uppercase}
.avatar.groot{width:4.75rem;height:4.75rem;font-size:1.6rem}
.bar .avatar{box-shadow:0 0 0 .125rem var(--nacht),0 0 0 .1875rem rgba(242,239,232,.3)}
.bar-wie{position:relative}
.bar-wie>button{background:none;border:0;padding:.125rem;border-radius:50%;min-width:2.75rem;min-height:2.75rem;display:grid;place-items:center}
.menu{position:absolute;right:0;top:calc(100% + .5rem);min-width:15rem;background:#fff;color:var(--inkt);border-radius:.875rem;box-shadow:0 1.125rem 3.125rem rgba(0,0,0,.22);padding:.5rem;z-index:80}
.menu p{margin:0;padding:.6rem .8rem .7rem;border-bottom:1px solid var(--lijn);margin-bottom:.35rem;line-height:1.3}
.menu p small{display:block;color:var(--grijs)}
.menu a,.menu button{display:flex;width:100%;align-items:center;min-height:2.75rem;padding:0 .8rem;border-radius:.5rem;text-decoration:none;background:none;border:0;text-align:left;font-weight:500}
.menu a:hover,.menu button:hover{background:var(--zacht)}
.voortgang-lijn{position:fixed;left:0;right:0;top:var(--bar);height:.1875rem;z-index:59;background:transparent;pointer-events:none}
.voortgang-lijn i{display:block;height:100%;background:var(--rood);width:0;transition:width .5s var(--ease)}

/* tabbalk (telefoon + tablet staand) */
.tabs{display:none}
@media (max-width:1023px){
  :root{--tab:calc(3.875rem + env(safe-area-inset-bottom))}
  .bar-nav{display:none}
  .bar-merk svg{width:3.125rem}
  .tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;height:var(--tab);padding-bottom:env(safe-area-inset-bottom);
    background:rgba(11,21,17,.97);color:var(--sneeuw);border-top:1px solid rgba(255,255,255,.06)}
  .tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1875rem;text-decoration:none;font-size:.7rem;font-weight:500;opacity:.7;min-height:2.75rem;position:relative}
  .tabs a svg{width:1.4375rem;height:1.4375rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabs a[aria-current]{opacity:1}
  .tabs a[aria-current]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:.125rem;background:var(--rood)}
  body{padding-bottom:var(--tab)}
}
@media (max-width:380px){.bar-merk span{display:none}}

/* ------------------------------------------------------------------ algemene opbouw */
main{display:block;min-height:calc(100dvh - var(--bar) - var(--tab))}
.kopband{background:var(--nacht);color:var(--sneeuw);position:relative;padding:clamp(2.2rem,5vw,4.2rem) 0 clamp(3.4rem,7vw,5.8rem);overflow:hidden}
.kopband.woud{background:var(--woud)}
.kopband h1 em{font-style:normal;color:var(--rood)}
.kopband p.sub{max-width:62ch;opacity:.86;font-size:1.06rem;margin:1rem 0 0}
.kopband .label{color:rgba(242,239,232,.75)}
.kam{position:absolute;left:0;right:0;bottom:-1px;height:clamp(1.75rem,4.5vw,4rem);pointer-events:none}
.kam svg{width:100%;height:100%}
.kam path{fill:var(--papier)}
.blok{padding:clamp(2rem,4.5vw,3.6rem) 0}
.blok+.blok{padding-top:0}
.blok-kop{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.blok-kop h2{font-size:clamp(1.45rem,1.2rem + 1vw,2.1rem)}
.blok-kop a{font-weight:600;text-underline-offset:.1875rem}
.leeg{padding:1.4rem 0;color:var(--grijs)}
.demo{font-size:.86rem;color:var(--grijs);display:flex;gap:.5rem;align-items:baseline}
.demo::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--mos);flex:0 0 auto;transform:translateY(-1px)}
.terug{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;text-decoration:none;min-height:2.75rem;opacity:.85}
.terug:hover{opacity:1}
.terug svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.laden{display:grid;place-items:center;min-height:40vh;color:var(--grijs)}
.laden i{width:2.125rem;height:2.125rem;border-radius:50%;border:.1875rem solid var(--lijn);border-top-color:var(--rood);animation:draai .8s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* voortgangsbalkje */
.vg{display:flex;align-items:center;gap:.7rem;font-size:.86rem;color:var(--grijs);font-variant-numeric:tabular-nums}
.vg b{display:block;flex:1;height:.3125rem;border-radius:.3125rem;background:var(--lijn);overflow:hidden;min-width:3.75rem}
.vg b i{display:block;height:100%;background:var(--rood);border-radius:inherit}
.vg.klaar b i{background:var(--groen)}

/* ------------------------------------------------------------------ basecamp */
.bc{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end}
.bc h1{font-size:clamp(2.3rem,1.6rem + 3.4vw,4.6rem)}
.hoogte{display:flex;gap:clamp(1.2rem,3vw,2.6rem);font-variant-numeric:tabular-nums}
.hoogte div{min-width:6.5rem}
.hoogte strong{display:block;font-family:var(--display);font-size:clamp(2rem,1.5rem + 2vw,3.2rem);line-height:1;color:#fff}
.hoogte span{font-size:.88rem;opacity:.75}
@media (max-width:760px){.bc{grid-template-columns:1fr}.hoogte div{min-width:0}}
.verder{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:#fff;border-radius:1.125rem;overflow:hidden;box-shadow:0 1px 0 var(--lijn),0 1.25rem 3.125rem -1.875rem rgba(11,21,17,.35);text-decoration:none;margin-top:calc(-1 * clamp(2.6rem,5vw,4.4rem));position:relative;z-index:2}
.verder-beeld{position:relative;min-height:15rem;background:var(--woud)}
.verder-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.verder-tekst{padding:clamp(1.4rem,3vw,2.4rem);display:flex;flex-direction:column;gap:.7rem;justify-content:center}
.verder-tekst h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.3rem)}
.verder-tekst .stap{font-weight:600}
.verder-tekst .knop{align-self:flex-start;margin-top:.5rem}
.verder:hover h2{color:var(--rood-d)}
@media (max-width:760px){.verder{grid-template-columns:1fr}.verder-beeld{min-height:0;aspect-ratio:16/8}}
.start-reis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:.125rem solid var(--inkt)}
.start-reis a{display:block;padding:1.2rem 1.2rem 1.4rem 0;text-decoration:none;border-bottom:1px solid var(--lijn)}
.start-reis a+a{padding-left:1.2rem;border-left:1px solid var(--lijn)}
.start-reis b{display:block;font-family:var(--display);font-size:2.2rem;line-height:1;color:var(--rood);margin-bottom:.4rem}
.start-reis strong{display:block;font-size:1.1rem;margin-bottom:.2rem}
.start-reis span{color:var(--grijs);font-size:.95rem}
.start-reis a:hover strong{color:var(--rood-d)}
@media (max-width:760px){.start-reis{grid-template-columns:1fr}.start-reis a+a{padding-left:0;border-left:0}}
.twee{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem)}
.twee.breed{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:900px){.twee,.twee.breed{grid-template-columns:minmax(0,1fr)}}

/* rijen (trainingen, assessments, uitslagen) */
.rijen{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.rij{display:grid;grid-template-columns:8.25rem minmax(0,1fr) auto;gap:1.1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--lijn);text-decoration:none;position:relative}
.rij-beeld{aspect-ratio:4/3;border-radius:.625rem;overflow:hidden;background:var(--zacht)}
.rij-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.rij:hover .rij-beeld img{transform:scale(1.04)}
.rij h3{font-size:clamp(1.08rem,1rem + .35vw,1.3rem);margin-bottom:.25rem}
.rij:hover h3{color:var(--rood-d)}
.rij p{margin:0;color:var(--grijs);font-size:.94rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rij .meta{font-size:.84rem;color:var(--grijs);margin-top:.35rem;display:flex;gap:.25rem .9rem;flex-wrap:wrap}
.rij .vg{margin-top:.5rem;max-width:20rem}
.rij-pijl{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 .0938rem var(--lijn-d);transition:background-color .2s,box-shadow .2s}
.rij-pijl svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rij:hover .rij-pijl{background:var(--rood);color:#fff;box-shadow:none}
.rij.zonder-beeld{grid-template-columns:minmax(0,1fr) auto}
.rij .vlagje{position:absolute;left:.5rem;top:calc(1rem + .5rem);width:1.5rem;height:1.875rem}
@media (max-width:600px){.rij{grid-template-columns:6rem minmax(0,1fr);gap:.85rem}.rij-pijl{display:none}.rij p{-webkit-line-clamp:2;font-size:.9rem}}
@media (min-width:1180px){.rijen.dubbel{display:grid;grid-template-columns:1fr 1fr;column-gap:2.6rem;border-top:0}.rijen.dubbel .rij:nth-child(-n+2){border-top:1px solid var(--lijn)}}

/* ------------------------------------------------------------------ catalogus */
.cat{display:grid;grid-template-columns:15.625rem minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
.cat-zij{position:sticky;top:calc(var(--bar) + 1.2rem)}
.zoek{position:relative;margin-bottom:1.4rem}
.zoek input{width:100%;min-height:3rem;border-radius:62.4375rem;border:.0938rem solid var(--lijn-d);background:#fff;padding:.6rem 1rem .6rem 2.8rem}
.zoek input:focus{border-color:var(--inkt);outline:none;box-shadow:0 0 0 .1875rem rgba(232,50,43,.18)}
.zoek svg{position:absolute;left:1rem;top:50%;width:1.1875rem;height:1.1875rem;transform:translateY(-50%);fill:none;stroke:var(--grijs);stroke-width:2;stroke-linecap:round}
.filters{list-style:none;margin:0 0 1.4rem;padding:0}
.filters h4{font-size:.8rem;text-transform:none;font-weight:600;color:var(--grijs);margin:0 0 .4rem}
.filters button{display:flex;justify-content:space-between;gap:1rem;width:100%;text-align:left;background:none;border:0;padding:.42rem .2rem;min-height:2.5rem;align-items:center;border-radius:.375rem;line-height:1.25}
.filters button span{color:var(--grijs);font-size:.85rem;font-variant-numeric:tabular-nums}
.filters button:hover{background:var(--zacht)}
.filters button[aria-pressed=true]{font-weight:700;color:var(--rood-d)}
.filters button{position:relative}
.filters button[aria-pressed=true]::before{content:"";position:absolute;left:-.7rem;top:.45rem;bottom:.45rem;width:.25rem;background:var(--rood);border-radius:.125rem}
.cat-telling{color:var(--grijs);margin:0 0 .6rem;font-size:.95rem}
.cat-mobiel{display:none}
@media (max-width:900px){
  .cat{grid-template-columns:minmax(0,1fr)}
  .cat-zij{position:static}
  .cat-zij .filters{display:none}
  .cat-mobiel{display:flex;gap:.6rem;margin-bottom:1rem}
  .cat-mobiel select{flex:1;min-height:2.875rem;border-radius:.75rem;border:.0938rem solid var(--lijn-d);background:#fff;padding:0 .8rem;min-width:0}
}

/* ------------------------------------------------------------------ training */
.tr-kop{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.4rem,4vw,3.6rem);align-items:center}
.tr-kop .beeld{border-radius:1rem;overflow:hidden;aspect-ratio:16/10;background:var(--woud);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.tr-kop .beeld img{width:100%;height:100%;object-fit:cover}
.tr-feiten{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin:1.1rem 0 1.5rem;font-size:.95rem;opacity:.85}
.tr-feiten span{display:inline-flex;gap:.4rem;align-items:center}
.tr-knoppen{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.tr-knoppen .vg{color:rgba(242,239,232,.8);min-width:13.75rem;flex:1;max-width:20rem}
.tr-knoppen .vg b{background:rgba(255,255,255,.15)}
@media (max-width:820px){.tr-kop{grid-template-columns:1fr}.tr-kop .beeld{order:-1;aspect-ratio:16/8}}
.tr-lijf{display:grid;grid-template-columns:minmax(0,1fr) 23.75rem;gap:clamp(1.6rem,4vw,3.6rem);align-items:start}
.tr-lijf aside{position:sticky;top:calc(var(--bar) + 1.2rem)}
@media (max-width:1023px){.tr-lijf{grid-template-columns:1fr}.tr-lijf aside{position:static}}

/* route (inhoudsopgave als bergroute) */
.route{list-style:none;margin:0;padding:0;position:relative}
.route>li{position:relative;padding-left:2.1rem}
.route>li::before{content:"";position:absolute;left:.625rem;top:0;bottom:0;width:.125rem;background:repeating-linear-gradient(to bottom,var(--lijn-d) 0 .375rem,transparent .375rem .6875rem)}
.route>li:first-child::before{top:1.125rem}
.route>li:last-child::before{bottom:auto;height:1.125rem}
.route>li.klaar::before{background:var(--rood)}
.route a{display:flex;gap:.6rem;align-items:baseline;justify-content:space-between;text-decoration:none;padding:.48rem .5rem .48rem 0;min-height:2.625rem;line-height:1.3;border-radius:.375rem}
.route a:hover{color:var(--rood-d)}
.route a small{color:var(--grijs);font-size:.8rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.route .knoop{position:absolute;left:.1875rem;top:.8125rem;width:1rem;height:1rem;border-radius:50%;background:var(--papier);box-shadow:inset 0 0 0 .125rem var(--lijn-d)}
.route li.klaar>.knoop{background:var(--rood);box-shadow:none}
.route li.klaar>.knoop::after{content:"";position:absolute;left:.3125rem;top:.1875rem;width:.25rem;height:.4375rem;border:solid #fff;border-width:0 .125rem .125rem 0;transform:rotate(45deg)}
.route li.hier>.knoop{box-shadow:inset 0 0 0 .125rem var(--rood),0 0 0 .25rem rgba(232,50,43,.18)}
.route li.hier>a{font-weight:700}
.route .les>a{font-weight:600;font-size:1.02rem}
.route ul{list-style:none;margin:0 0 .4rem;padding:0 0 0 .3rem}
.route ul li{position:relative;padding-left:1.1rem}
.route ul li::before{content:"";position:absolute;left:0;top:1.05rem;width:.4375rem;height:.4375rem;border-radius:50%;box-shadow:inset 0 0 0 .0938rem var(--lijn-d)}
.route ul li.klaar::before{background:var(--rood);box-shadow:none}
.route ul li.hier>a{color:var(--rood-d);font-weight:600}
.route ul a{font-size:.95rem;min-height:2.5rem}
.route-kop{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.8rem}
.route-kop h2{font-size:1.4rem}
.route-top{padding-left:2.1rem;position:relative;font-family:var(--display);font-weight:600;padding-top:.35rem;margin:.2rem 0 0;min-height:2rem}
.route-top svg{position:absolute;left:0;top:0;width:1.5rem;height:1.9375rem}

/* ------------------------------------------------------------------ lezen */
.lees{display:grid;grid-template-columns:20rem minmax(0,1fr);min-height:calc(100dvh - var(--bar))}
.lees-zij{border-right:1px solid var(--lijn);background:#fff;position:sticky;top:var(--bar);height:calc(100dvh - var(--bar));overflow:auto;padding:1.4rem 1.2rem 2rem;overscroll-behavior:contain}
.lees-zij h2{font-size:1.15rem;line-height:1.15;margin:.2rem 0 .8rem}
.lees-zij .vg{margin-bottom:1.2rem}
.lees-hoofd{padding:clamp(1.6rem,4vw,3.2rem) var(--rand) 4rem;min-width:0}
.lees-kolom{max-width:47.5rem;margin:0 auto}
.lees-kruim{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;font-size:.9rem;color:var(--grijs);margin-bottom:1rem}
.lees-kruim a{text-decoration:none;font-weight:600;color:var(--inkt)}
.lees-kruim a:hover{color:var(--rood-d)}
.lees-kolom>h1{font-size:clamp(1.9rem,1.4rem + 2vw,3rem);margin-bottom:.6rem}
.lees-meta{color:var(--grijs);font-size:.92rem;margin-bottom:2rem;display:flex;gap:.3rem 1.1rem;flex-wrap:wrap}
.lees-inhoud-knop{display:none}
.lade-dicht{display:none;width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:var(--zacht);font-size:1.5rem;line-height:1}
@media (max-width:1023px){.lade-dicht{display:block}}
.sluier{display:none}
@media (max-width:1023px){
  .lees{grid-template-columns:1fr}
  .lees-zij{position:fixed;inset:var(--bar) auto var(--tab) 0;width:min(22.5rem,88vw);height:auto;z-index:70;transform:translateX(-102%);transition:transform .35s var(--ease);box-shadow:0 0 3.75rem rgba(0,0,0,.25)}
  .lees-open .lees-zij{transform:none}
  .lees-inhoud-knop{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:0 1rem;border-radius:62.4375rem;border:.0938rem solid var(--lijn-d);background:#fff;font-weight:600;margin-bottom:1rem}
  .lees-inhoud-knop svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .sluier{display:block;position:fixed;inset:0;background:rgba(11,21,17,.4);z-index:65;opacity:0;visibility:hidden;transition:opacity .3s}
  .lees-open .sluier{opacity:1;visibility:visible}
}
.stap-voet{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--lijn);display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center}
.stap-voet .vorige,.stap-voet .volgende{display:flex;flex-direction:column;text-decoration:none;font-size:.86rem;color:var(--grijs);gap:.1rem;min-height:2.75rem;justify-content:center}
.stap-voet .volgende{text-align:right}
.stap-voet a b{color:var(--inkt);font-size:.98rem;font-weight:600;line-height:1.25}
.stap-voet a:hover b{color:var(--rood-d)}
@media (max-width:700px){.stap-voet{grid-template-columns:1fr 1fr}.stap-voet .knop{grid-column:1/-1;order:-1}}
.klaar-stempel{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--groen);min-height:3rem}
.klaar-stempel svg{width:1.375rem;height:1.375rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.in-les{list-style:none;margin:2rem 0 0;padding:0;counter-reset:ol;border-top:.125rem solid var(--inkt)}
.in-les li{border-bottom:1px solid var(--lijn)}
.in-les a{display:grid;grid-template-columns:2.4rem 1fr auto;gap:.6rem;align-items:center;padding:.9rem 0;text-decoration:none;min-height:3.25rem}
.in-les a::before{counter-increment:ol;content:counter(ol,decimal-leading-zero);font-family:var(--display);font-weight:600;color:var(--grijs)}
.in-les li.klaar a::before{color:var(--rood)}
.in-les a:hover{color:var(--rood-d)}
.in-les small{color:var(--grijs)}

/* leestekst: opgeschoonde inhoud uit het oude platform */
.tekst{font-size:clamp(1.02rem,.98rem + .2vw,1.12rem);line-height:1.7}
.tekst>*:first-child{margin-top:0}
.tekst h2{font-size:clamp(1.45rem,1.2rem + 1vw,1.95rem);margin:2.2rem 0 .8rem;line-height:1.1}
.tekst h3{font-size:clamp(1.2rem,1.1rem + .5vw,1.45rem);margin:1.9rem 0 .6rem}
.tekst h4,.tekst h5{font-family:"Onest",sans-serif;font-size:1.06rem;font-weight:700;margin:1.6rem 0 .4rem;line-height:1.3}
.tekst ul,.tekst ol{padding-left:1.3rem;margin:0 0 1.2em}
.tekst li{margin:.3rem 0}
.tekst ul li::marker{color:var(--rood)}
.tekst ol li::marker{font-weight:700;color:var(--rood-d)}
.tekst a{color:var(--rood-d);text-underline-offset:.1875rem;text-decoration-thickness:.0938rem;font-weight:500}
.tekst img{border-radius:.625rem;margin:1.6rem 0;cursor:zoom-in;background:#fff}
.tekst img[width]{width:auto}
.tekst blockquote{margin:1.8rem 0;padding:0 0 0 1.4rem;border-left:.1875rem solid var(--rood);font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.3}
.tekst hr{border:0;border-top:1px solid var(--lijn);margin:2rem 0}
.tekst .tabel{overflow-x:auto;margin:1.6rem 0;-webkit-overflow-scrolling:touch}
.tekst table{border-collapse:collapse;width:100%;font-size:.95rem;line-height:1.45;min-width:min(32.5rem,100%)}
.tekst td,.tekst th{border-bottom:1px solid var(--lijn);padding:.6rem .7rem;vertical-align:top;text-align:left}
.tekst tr:first-child td{font-weight:700;border-bottom:.125rem solid var(--inkt)}
.tekst th{font-weight:700;border-bottom:.125rem solid var(--inkt)}
.tekst details{border-top:1px solid var(--lijn);padding:0}
.tekst details:last-of-type{border-bottom:1px solid var(--lijn)}
.tekst details+details{border-top:0}
.tekst summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:3.25rem;padding:.7rem 0;font-weight:700}
.tekst summary::-webkit-details-marker{display:none}
.tekst summary::after{content:"";width:.625rem;height:.625rem;border-right:.125rem solid var(--rood);border-bottom:.125rem solid var(--rood);transform:rotate(45deg) translate(-.125rem,-.125rem);transition:transform .25s;flex:0 0 auto}
.tekst details[open] summary::after{transform:rotate(-135deg)}
.tekst details>*:not(summary){margin-left:0}
.tekst details[open]{padding-bottom:.8rem}
.tekst iframe,.tekst video{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:.75rem;background:#000;margin:1.6rem 0}
.tekst p.naar{display:flex;gap:1rem;flex-wrap:wrap;font-size:.95rem}
.tekst p.naar a::before{content:"→ "}

/* beeld vergroten */
.loep{position:fixed;inset:0;z-index:200;background:rgba(11,21,17,.9);display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);cursor:zoom-out}
.loep img{max-height:100%;width:auto;max-width:100%;border-radius:.5rem;background:#fff}
.loep button{position:absolute;top:max(.8rem,env(safe-area-inset-top));right:.8rem;width:3rem;height:3rem;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.6rem;line-height:1}

/* ------------------------------------------------------------------ toets */
.toets{margin-top:1rem}
.toets-kop{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;font-size:.92rem;color:var(--grijs);font-variant-numeric:tabular-nums}
.toets-stippen{display:flex;gap:.25rem;flex-wrap:wrap;max-width:60%}
.toets-stippen i{width:1.125rem;height:.25rem;border-radius:.125rem;background:var(--lijn)}
.toets-stippen i.gedaan{background:var(--inkt)}
.toets-stippen i.goed{background:var(--groen)}
.toets-stippen i.fout{background:var(--rood)}
.vraag{border-top:.125rem solid var(--inkt);padding-top:1.4rem}
.vraag-tekst{font-size:1.15rem;font-weight:600;margin-bottom:1.2rem}
.vraag-tekst p:last-child{margin-bottom:0}
.vraag-tekst img{margin:.8rem 0}
.antw{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.antw.beelden{grid-template-columns:repeat(auto-fill,minmax(9.375rem,1fr))}
.antw label{display:flex;gap:.9rem;align-items:center;padding:.85rem 1rem;border-radius:.75rem;background:#fff;box-shadow:inset 0 0 0 .0938rem var(--lijn-d);cursor:pointer;min-height:3.5rem;transition:box-shadow .15s,background-color .15s;line-height:1.35}
.antw.beelden label{flex-direction:column;text-align:center;align-items:center}
.antw label img{max-height:6.875rem;width:auto;margin:0;border-radius:.375rem}
.antw label:hover{box-shadow:inset 0 0 0 .125rem var(--inkt)}
.antw input{position:absolute;opacity:0;pointer-events:none}
.antw .bol{width:1.375rem;height:1.375rem;border-radius:50%;box-shadow:inset 0 0 0 .125rem var(--lijn-d);flex:0 0 auto;display:grid;place-items:center;background:#fff;transition:box-shadow .15s}
.antw input[type=checkbox]+.bol{border-radius:.375rem}
.antw input:checked+.bol{box-shadow:inset 0 0 0 .4375rem var(--rood)}
.antw input[type=checkbox]:checked+.bol{box-shadow:none;background:var(--rood)}
.antw input[type=checkbox]:checked+.bol::after{content:"";width:.3125rem;height:.625rem;border:solid #fff;border-width:0 .1562rem .1562rem 0;transform:rotate(45deg) translate(-1px,-1px)}
.antw input:focus-visible+.bol{outline:.1875rem solid var(--rood);outline-offset:.1875rem}
.antw label:has(input:checked){box-shadow:inset 0 0 0 .125rem var(--rood);background:#fff7f6}
.antw label.goed{box-shadow:inset 0 0 0 .125rem var(--groen);background:#f0f6f1}
.antw label.fout{box-shadow:inset 0 0 0 .125rem var(--rood);background:#fdf0ef}
.antw label .tekst p:last-child{margin:0}
.terugkoppeling{margin-top:1.2rem;padding:1rem 0 0;border-top:1px solid var(--lijn);font-size:1rem}
.terugkoppeling strong{display:block;margin-bottom:.2rem}
.terugkoppeling.goed strong{color:var(--groen)}
.terugkoppeling.fout strong{color:var(--rood-d)}
.toets-acties{display:flex;justify-content:space-between;gap:1rem;margin-top:1.6rem;align-items:center;flex-wrap:wrap}
.sorteer{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.sorteer li{display:flex;align-items:center;gap:.6rem;background:#fff;border-radius:.75rem;box-shadow:inset 0 0 0 .0938rem var(--lijn-d);padding:.4rem .5rem .4rem 1rem;min-height:3.5rem;touch-action:none;user-select:none}
.sorteer li.sleept{box-shadow:inset 0 0 0 .125rem var(--rood),0 .625rem 1.875rem rgba(0,0,0,.15);position:relative;z-index:2}
.sorteer li .greep{cursor:grab;color:var(--grijs);font-size:1.2rem;letter-spacing:-.125rem;padding:0 .3rem}
.sorteer li span{flex:1}
.sorteer li button{width:2.5rem;height:2.5rem;border-radius:50%;border:0;background:var(--zacht);display:grid;place-items:center}
.sorteer li button svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sorteer li.goed{box-shadow:inset 0 0 0 .125rem var(--groen)}.sorteer li.fout{box-shadow:inset 0 0 0 .125rem var(--rood)}
.matrix{display:grid;gap:.6rem}
.matrix label{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem;align-items:center;background:#fff;border-radius:.75rem;padding:.6rem .8rem;box-shadow:inset 0 0 0 .0938rem var(--lijn-d)}
.matrix select{min-height:2.75rem;border-radius:.625rem;border:.0938rem solid var(--lijn-d);padding:0 .6rem;background:#fff;min-width:0}
@media (max-width:600px){.matrix label{grid-template-columns:1fr}}
.uitslag-toets{text-align:left;border-top:.125rem solid var(--inkt);padding-top:1.6rem}
.uitslag-toets .score{font-family:var(--display);font-weight:700;font-size:clamp(3.4rem,2.6rem + 4vw,6rem);line-height:.9;color:var(--rood)}
.uitslag-toets.geslaagd .score{color:var(--groen)}

/* ------------------------------------------------------------------ formulieren (assessments) */
.form{max-width:53.75rem}
.form-voortgang{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem;font-size:.9rem;color:var(--grijs);font-variant-numeric:tabular-nums;position:sticky;top:var(--bar);background:var(--papier);padding:.8rem 0;z-index:5}
.form-voortgang b{flex:1;height:.3125rem;background:var(--lijn);border-radius:.3125rem;overflow:hidden}
.form-voortgang b i{display:block;height:100%;background:var(--rood);transition:width .4s var(--ease)}
.veld{margin:0 0 1.5rem;border:0;padding:0;min-width:0}
.veld legend,.veld>label.titel{display:block;font-weight:600;margin-bottom:.6rem;padding:0;line-height:1.4;font-size:1.02rem}
.veld legend p,.veld>label.titel p{margin:0}
.veld .uitleg{font-size:.9rem;color:var(--grijs);margin:-.3rem 0 .6rem}
.veld .verplicht{color:var(--rood);margin-left:.2rem}
.veld input:not([type]),.veld input[type=search],.veld input[type=text],.veld input[type=email],.veld input[type=number],.veld input[type=tel],.veld input[type=url],.veld input[type=date],.veld input[type=time],.veld input[type=password],.veld textarea,.veld select{
  width:100%;min-height:3.125rem;border-radius:.75rem;border:.0938rem solid var(--lijn-d);background:#fff;padding:.7rem .9rem;transition:border-color .15s,box-shadow .15s}
.veld textarea{min-height:8.125rem;resize:vertical;line-height:1.5}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:none;border-color:var(--inkt);box-shadow:0 0 0 .1875rem rgba(232,50,43,.18)}
.veld.fout input,.veld.fout textarea,.veld.fout select{border-color:var(--rood)}
.veld .foutmelding{color:var(--rood-d);font-size:.88rem;font-weight:600;margin-top:.4rem}
.veld-sectie{margin:2.2rem 0 1.2rem;padding-top:1.2rem;border-top:.125rem solid var(--inkt)}
.veld-sectie h3{margin:0 0 .3rem}
.veld-sectie p{color:var(--grijs);margin:0}
.veld-html{margin:0 0 1.4rem}
/* schaal (Likert): rij stellingen met één horizontale schaal */
.stelling{padding:1.1rem 0 1.2rem;border-bottom:1px solid var(--lijn);margin:0}
.stelling legend{font-weight:500;font-size:1.04rem;margin-bottom:.8rem}
.schaal{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:.375rem}
.schaal label{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:3.25rem;padding:.4rem .3rem;border-radius:.625rem;background:#fff;box-shadow:inset 0 0 0 .0938rem var(--lijn-d);font-size:.84rem;line-height:1.2;cursor:pointer;transition:box-shadow .15s,background-color .15s,color .15s}
.schaal label:hover{box-shadow:inset 0 0 0 .125rem var(--inkt)}
.schaal input{position:absolute;opacity:0;pointer-events:none}
.schaal label:has(input:checked){background:var(--rood);color:#fff;box-shadow:none;font-weight:600}
.schaal label:has(input:focus-visible){outline:.1875rem solid var(--rood);outline-offset:.125rem}
.schaal.getal label{font-family:var(--display);font-size:1.15rem;font-weight:600}
.schaal-uiteinden{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem;color:var(--grijs);margin-top:.35rem}
@media (max-width:640px){
  .schaal:not(.getal){grid-template-columns:1fr}
  .schaal:not(.getal) label{justify-content:flex-start;text-align:left;padding:.5rem .9rem;min-height:3rem;font-size:.95rem}
}
.keuzes{display:grid;gap:.5rem}
.keuzes label{display:flex;gap:.8rem;align-items:center;padding:.7rem .9rem;border-radius:.75rem;background:#fff;box-shadow:inset 0 0 0 .0938rem var(--lijn-d);cursor:pointer;min-height:3.25rem;line-height:1.35}
.keuzes label:hover{box-shadow:inset 0 0 0 .125rem var(--inkt)}
.keuzes input{width:1.25rem;height:1.25rem;accent-color:var(--rood);flex:0 0 auto;margin:0}
.keuzes label:has(input:checked){box-shadow:inset 0 0 0 .125rem var(--rood);background:#fff7f6}
.sterren{display:flex;gap:.3rem}
.sterren label{width:2.875rem;height:2.875rem;display:grid;place-items:center;cursor:pointer;font-size:1.7rem;color:var(--lijn-d)}
.sterren input{position:absolute;opacity:0}
.sterren label.aan{color:var(--rood)}
.form-acties{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem;flex-wrap:wrap}

/* uitslag (weergave) */
.uitslag{margin-top:1rem}
.uitslag-kop{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;border-bottom:.125rem solid var(--inkt);padding-bottom:1rem;margin-bottom:1.6rem}
.uitslag-kop select{min-height:2.75rem;border-radius:.625rem;border:.0938rem solid var(--lijn-d);background:#fff;padding:0 .7rem}
.weergave{margin-bottom:2.4rem}
.weergave h2,.weergave h3{margin:1.4rem 0 .7rem}
.weergave table{border-collapse:collapse;width:100%;font-size:.95rem;line-height:1.4}
.weergave td,.weergave th{border-bottom:1px solid var(--lijn);padding:.6rem .6rem;vertical-align:top;text-align:left}
.weergave thead td,.weergave thead th,.weergave th{background:var(--woud);color:var(--sneeuw);font-weight:600;border-bottom:0}
.weergave thead td h2,.weergave thead td p{color:inherit;margin:.2rem 0}
.weergave .tabel{overflow-x:auto;margin:0 0 1.4rem;-webkit-overflow-scrolling:touch}
.weergave img{max-width:7.5rem;height:auto;display:inline-block}
.weergave .getal{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--rood)}
.grafiek{display:grid;gap:.55rem;margin:1rem 0 1.6rem}
.grafiek div{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr) 3.2rem;gap:.8rem;align-items:center;font-size:.9rem}
.grafiek b{height:1rem;background:var(--zacht);border-radius:.25rem;overflow:hidden;display:block}
.grafiek b i{display:block;height:100%;background:var(--rood);border-radius:inherit;transform-origin:left;animation:groei .9s var(--ease) both}
.grafiek span:last-child{font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
@keyframes groei{from{transform:scaleX(0)}}
@media (max-width:600px){.grafiek div{grid-template-columns:1fr 3rem}.grafiek div b{grid-column:1/-1;grid-row:2}}
.vink-teken{color:var(--groen);font-weight:700;font-size:1.2rem}
.todo-knop{width:2.5rem;height:2.5rem;border-radius:50%;border:0;background:var(--zacht);font-size:1.05rem}

/* ------------------------------------------------------------------ assessments overzicht */
.as-groep{margin-bottom:2.6rem}
.as-groep h2{font-size:1.3rem;margin-bottom:.6rem;display:flex;gap:.6rem;align-items:center}
.as-intro{max-width:47.5rem}
.as-intro.dicht{max-height:14rem;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}

/* ------------------------------------------------------------------ bibliotheek */
.bib-tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--lijn);margin-bottom:1.6rem;overflow-x:auto;scrollbar-width:none}
.bib-tabs::-webkit-scrollbar{display:none}
.bib-tabs button,.bib-tabs a{background:none;border:0;padding:.7rem 1rem;min-height:3rem;font-weight:600;color:var(--grijs);position:relative;white-space:nowrap;text-decoration:none}
.bib-tabs [aria-selected=true],.bib-tabs [aria-current]{color:var(--inkt)}
.bib-tabs [aria-selected=true]::after,.bib-tabs [aria-current]::after{content:"";position:absolute;left:1rem;right:1rem;bottom:-1px;height:.1875rem;background:var(--rood);border-radius:.125rem}
.portretten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(10.625rem,1fr));gap:1.8rem 1.2rem}
.portretten a{display:block;text-decoration:none}
.portretten .foto{aspect-ratio:4/5;border-radius:.75rem;overflow:hidden;background:var(--zacht);margin-bottom:.6rem}
.portretten img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .4s,transform .5s var(--ease)}
.portretten a:hover img{filter:none;transform:scale(1.03)}
.portretten strong{display:block;font-family:var(--display);font-weight:600;font-size:1.12rem;line-height:1.1}
.portretten a:hover strong{color:var(--rood-d)}
@media (max-width:520px){.portretten{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem .9rem}}
.bib-kop{display:grid;grid-template-columns:minmax(0,1fr) 16.25rem;gap:2rem;align-items:end}
.bib-kop .foto{border-radius:.875rem;overflow:hidden;aspect-ratio:4/5;background:var(--woud)}
.bib-kop .foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
@media (max-width:700px){.bib-kop{grid-template-columns:1fr}.bib-kop .foto{width:9.375rem;order:-1}}

/* ------------------------------------------------------------------ ontwikkeling / community */
.paneel{background:#fff;border-radius:1rem;padding:clamp(1.2rem,3vw,2rem);box-shadow:0 1px 0 var(--lijn)}
.paneel+.paneel{margin-top:1.4rem}
.lijst{list-style:none;margin:0;padding:0}
.lijst li{border-bottom:1px solid var(--lijn);padding:.85rem 0;display:flex;gap:1rem;justify-content:space-between;align-items:center}
.lijst li:first-child{border-top:1px solid var(--lijn)}
.lijst a{font-weight:600;text-decoration:none}
.lijst a:hover{color:var(--rood-d)}
.lijst small{color:var(--grijs)}
.feed{list-style:none;margin:0;padding:0}
.feed li{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.9rem;padding:1.1rem 0;border-bottom:1px solid var(--lijn)}
.feed .avatar{width:2.75rem;height:2.75rem}
.feed .avatar.systeem{background:var(--woud)}
.feed p{margin:.15rem 0 0}
.feed small{color:var(--grijs)}
.feed .acties{display:flex;gap:1rem;margin-top:.4rem}
.feed .acties button{background:none;border:0;padding:0;min-height:2.5rem;color:var(--grijs);font-weight:600;font-size:.88rem}
.feed .acties button[aria-pressed=true]{color:var(--rood-d)}
.plaats{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.9rem;align-items:start;margin-bottom:.6rem}
.plaats textarea{width:100%;min-height:5.625rem;border-radius:.75rem;border:.0938rem solid var(--lijn-d);padding:.7rem .9rem;resize:vertical;background:#fff}
.plaats textarea:focus{outline:none;border-color:var(--inkt)}
.plaats .knop{margin-top:.6rem}

/* ------------------------------------------------------------------ inloggen */
.toegang{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100dvh}
.toegang-beeld{position:relative;background:var(--nacht);color:var(--sneeuw);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.4rem,4vw,3rem);overflow:hidden}
.toegang-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.toegang-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,21,17,.55),rgba(11,21,17,0) 40%,rgba(11,21,17,.85))}
.toegang-beeld>*{position:relative;z-index:1}
.toegang-beeld svg.logo{width:5.75rem;color:var(--sneeuw)}
.toegang-beeld h1{font-size:clamp(2.4rem,1.6rem + 3.5vw,5rem);max-width:12ch}
.toegang-beeld h1 em{font-style:normal;color:var(--rood)}
.toegang-form{display:flex;align-items:center;justify-content:center;padding:clamp(1.6rem,5vw,4rem) var(--rand)}
.toegang-form>div{width:min(27.5rem,100%)}
.toegang-form h2{margin-bottom:.5rem}
.toegang-form .veld{margin-bottom:1.1rem}
.toegang-form .knop{width:100%;margin-top:.4rem}
.toegang-form .wissel{margin-top:1.4rem;text-align:center;color:var(--grijs)}
.toegang-form .demo{margin-top:1.6rem}
@media (max-width:860px){.toegang{grid-template-columns:1fr}.toegang-beeld{min-height:38vh}}
body.zonder-app .bar,body.zonder-app .tabs{display:none}
body.zonder-app{padding-bottom:0}

/* melding */
.toast{position:fixed;left:50%;bottom:calc(var(--tab) + 1.2rem);transform:translate(-50%,1.25rem);background:var(--nacht);color:var(--sneeuw);padding:.8rem 1.2rem;border-radius:.75rem;z-index:300;opacity:0;transition:opacity .3s,transform .3s var(--ease);display:flex;gap:.6rem;align-items:center;max-width:calc(100vw - 2rem);box-shadow:0 .75rem 1.875rem rgba(0,0,0,.25)}
.toast.aan{opacity:1;transform:translate(-50%,0)}
.toast svg{width:1.375rem;height:1.875rem;flex:0 0 auto}

/* vlag die geplant wordt bij een afgeronde training */
.vlag-plant{display:flex;gap:1rem;align-items:center;padding:1.2rem 0;border-top:.125rem solid var(--inkt);margin-top:1rem}
.vlag-plant svg{width:2.5rem;height:3.25rem;flex:0 0 auto}
.vlag-plant svg .doek{transform-origin:.4375rem .625rem;animation:wapper 2.4s ease-in-out infinite}
@keyframes wapper{50%{transform:skewY(-4deg) scaleX(.94)}}
.vlag-op svg{animation:hijs .9s var(--ease) both}
@keyframes hijs{from{transform:translateY(1rem);opacity:0}}

/* herhaalbare regels (Formidable-repeater) */
.herhaal-rijen{display:grid;gap:.5rem;margin-bottom:.4rem}
.herhaal-rij{display:flex;gap:.5rem;align-items:center}
.herhaal-rij label{flex:1;min-width:0}
.herhaal-rij input,.herhaal-rij textarea{width:100%;min-height:3rem;border-radius:.75rem;border:.0938rem solid var(--lijn-d);background:#fff;padding:.6rem .9rem}
.rij-weg{width:2.5rem;height:2.5rem;border-radius:50%;border:0;background:var(--zacht);font-size:1.3rem;flex:0 0 auto}
.lijstweergave table{border-collapse:collapse;width:100%}
.lijstweergave td,.lijstweergave th{padding:.7rem .6rem;border-bottom:1px solid var(--lijn);text-align:left;vertical-align:middle}
.lijstweergave thead th{background:transparent;color:var(--grijs);font-weight:600;font-size:.85rem;border-bottom:.125rem solid var(--inkt)}
.lijstweergave a[href="#"]{font-weight:600}
.red_x .todo-knop{background:#fdecea;color:var(--rood-d)}
.green_check .todo-knop{background:#e7f2ea;color:var(--groen)}
.weergave .letter{display:inline-grid;place-items:center;width:2.875rem;height:2.875rem;border-radius:50%;background:var(--rood);color:#fff;font-family:var(--display);font-weight:700;font-size:1.5rem}
.weergave td.aan{background:var(--rood);color:#fff;font-weight:700;border-radius:.375rem}
.weergave td.uit{color:var(--lijn-d)}
.weergave td.vinkcel{width:1.4rem;padding-inline:.2rem;color:var(--rood);font-weight:700}
@media (max-width:760px){.tekst table.breed,.weergave table.breed{min-width:calc(var(--kol) * 8.125rem)}.tabel{margin-inline:calc(-1 * var(--rand));padding-inline:var(--rand)}}
@media (max-width:900px){.twee.breed>aside{order:-1}}
@media (max-width:359px){.tabs a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.tabs a svg{width:1.5625rem;height:1.5625rem}}

/* ==================================================================== ronde 4 (feedback Henk 2026-10-09)
   Lichter (geen zwarte vlakken meer), beter leesbaar, altijd zien waar je bent, "Mijn leeromgeving" duidelijk eigen. */
:root{--eigen:#fbe6e1;--eigen-d:#f3cfc7;--vlak:#f2efe8;--inkt-2:#33413a}
body{font-size:clamp(1.03rem,1rem + .18vw,1.12rem);line-height:1.65}
h1,h2,h3{word-spacing:.08em;letter-spacing:0}
h1{font-size:clamp(2rem,1.45rem + 2.5vw,3.6rem);line-height:1.02}
h3{font-family:"Onest",system-ui,sans-serif;font-weight:700;letter-spacing:-.005em;line-height:1.25}
.grijs{color:var(--grijs)}.klein-t{font-size:.92rem}
.lead{font-size:1.08rem;max-width:62ch;color:var(--inkt-2)}
.tussenkop{font-size:1.25rem;margin:2.2rem 0 1rem}
.paneel-kop{font-size:1.3rem;margin-bottom:1rem}

/* kop: licht, met donkere letters */
.bar{background:#fff;color:var(--inkt);box-shadow:0 1px 0 var(--lijn)}
.bar-merk svg{color:var(--inkt)}
.bar-merk span{border-left-color:var(--lijn-d)}
.bar-nav{margin-left:1rem;gap:.1rem}
.bar-nav a{opacity:1;color:var(--inkt-2);font-weight:550;padding:0 .7rem;gap:.45rem}
.bar-nav a:hover{background:var(--zacht)}
.bar-nav a[aria-current]{color:var(--inkt);background:var(--zacht);font-weight:700}
.bar-nav a[aria-current]::after{bottom:.25rem}
.bar-nav a.eigen{background:var(--eigen);color:var(--inkt);margin-right:.5rem}
.bar-nav a.eigen[aria-current]{background:var(--eigen-d)}
.bar-nav a.eigen[aria-current]::after{display:none}
.bar-zoek:hover{background:var(--zacht)}
.bar .avatar{box-shadow:0 0 0 .125rem #fff,0 0 0 .1875rem var(--lijn-d)}
.avatar.mini{width:1.625rem;height:1.625rem;font-size:.66rem;box-shadow:none!important;display:inline-grid;vertical-align:middle}
.avatar.ander{background:var(--groen)}
@media (max-width:1240px){.bar-nav [data-breed]{display:none}}
@media (max-width:1120px) and (min-width:1024px){.bar-nav a{padding:0 .5rem;font-size:.93rem}.bar-merk span{display:none}}
@media (max-width:1023px){
  .tabs{background:rgba(255,255,255,.98);color:var(--inkt);border-top:1px solid var(--lijn);box-shadow:0 -.5rem 1.5rem rgba(15,26,21,.05)}
  .tabs a{opacity:1;color:var(--grijs)}
  .tabs a[aria-current]{color:var(--inkt);font-weight:700}
  .tabs a.eigen svg{color:var(--rood-d)}
  .tabs a.eigen[aria-current]{background:var(--eigen)}
  .tabs a.eigen[aria-current]::before{display:none}
}
.toast{background:var(--inkt)}

/* proefbalk */
.proefbalk{background:var(--woud);color:var(--sneeuw);font-size:.92rem}
.proefbalk .kader{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:2.625rem;flex-wrap:wrap;padding:.35rem 0}
.proefbalk a{color:#fff;font-weight:700;text-underline-offset:.1875rem}
body.zonder-app .proefbalk{display:none}

/* kopband: licht papier met hoogtelijnen in plaats van zwart */
.kopband{background:var(--vlak) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='260' viewBox='0 0 520 260'%3E%3Cg fill='none' stroke='%2312301f' stroke-opacity='.07'%3E%3Cpath d='M-20 210c80-40 140-90 230-80s150 70 330 20'/%3E%3Cpath d='M-20 180c90-50 150-110 240-100s140 60 320 10'/%3E%3Cpath d='M-20 150c100-60 160-120 250-112s140 50 310 0'/%3E%3Cpath d='M-20 120c110-70 170-130 260-122s140 40 300-10'/%3E%3Cpath d='M-20 240c70-30 130-70 220-60s160 80 340 30'/%3E%3C/g%3E%3C/svg%3E") right top/32.5rem auto repeat-x;color:var(--inkt);padding:clamp(1.4rem,3.5vw,2.6rem) 0 clamp(3rem,6vw,4.8rem)}
.kopband .label{color:var(--grijs)}
.kopband p.sub{opacity:1;color:var(--inkt-2)}
.kopband p.sub a{color:var(--rood-d)}
.kopband.woud{background-color:#e3ebe3}
.tr-knoppen .vg{color:var(--grijs)}.tr-knoppen .vg b{background:var(--lijn)}
.tr-kop .beeld{box-shadow:0 1px 0 var(--lijn),0 1.125rem 2.5rem -1.75rem rgba(15,26,21,.4);background:var(--zacht)}
.tr-kop .beeld .omslag,.verder-beeld .omslag{width:100%;height:100%}
.hoogte strong{color:var(--inkt)}
.hoogte span{opacity:1;color:var(--grijs)}

/* kruimelpad: altijd zien waar je bent */
.kruim{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;font-size:.9rem;color:var(--grijs);margin:0 0 1.4rem;line-height:1.3}
.kruim a{color:var(--inkt-2);font-weight:600;text-decoration:none;min-height:2rem;display:inline-flex;align-items:center}
.kruim a:hover{color:var(--rood-d);text-decoration:underline;text-underline-offset:.1875rem}
.kruim [aria-current]{color:var(--inkt);font-weight:600;max-width:42ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lees-waar{display:flex;justify-content:space-between;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;margin-bottom:1rem}
.lees-waar .lees-kruim{margin:0}
.stapnr{font-size:.86rem;font-weight:700;color:var(--rood-d);background:var(--eigen);border-radius:62.4375rem;padding:.2rem .7rem;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ Mijn leeromgeving: herkenbaar eigen */
.eigen-kop{background:var(--eigen);padding:clamp(1.4rem,3.5vw,2.4rem) 0 0;border-bottom:1px solid var(--eigen-d)}
.eigen-wie{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.eigen-wie p{margin:0;line-height:1.25}
.eigen-wie strong{display:block;font-size:.98rem}
.eigen-wie span:not(.avatar){font-size:.85rem;color:var(--grijs)}
.eigen-kop h1{font-size:clamp(2rem,1.45rem + 2.6vw,3.6rem)}
.eigen-kop p.sub{max-width:62ch;color:var(--inkt-2);margin:.8rem 0 0;font-size:1.06rem}
.eigen-kop .hoogte{margin-top:1.6rem}
.eigen-tabs{display:flex;gap:.2rem;margin-top:1.8rem;overflow-x:auto;scrollbar-width:none}
.eigen-tabs::-webkit-scrollbar{display:none}
.eigen-tabs a{padding:.7rem 1.1rem;min-height:3rem;display:flex;align-items:center;text-decoration:none;font-weight:600;color:var(--inkt-2);border-radius:.75rem .75rem 0 0;white-space:nowrap}
.eigen-tabs a:hover{background:rgba(255,255,255,.5)}
.eigen-tabs a[aria-current]{background:var(--papier);color:var(--inkt)}
body.in-eigen{background:var(--papier)}

/* klaargezet: de route per domein */
.kz-lijst{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.kz{display:grid;grid-template-columns:13.75rem minmax(0,1fr);background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 1px 0 var(--lijn),0 .875rem 2.125rem -1.625rem rgba(15,26,21,.35)}
.kz-dom{display:flex;flex-direction:column;text-decoration:none;border-right:1px solid var(--lijn)}
.kz-omslag{display:block;aspect-ratio:4/3}
.kz-omslag .omslag{width:100%;height:100%}
.kz-dom>span:last-child{padding:.8rem 1rem 1rem;line-height:1.25}
.kz-dom small{display:block;color:var(--grijs);font-size:.8rem}
.kz-dom strong{font-size:1.05rem}
.kz-dom:hover strong{color:var(--rood-d)}
.kz-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.kz-stappen li{position:relative;border-left:1px solid var(--lijn)}
.kz-stappen li:first-child{border-left:0}
.kz-stappen a{display:flex;flex-direction:column;gap:.2rem;padding:1.1rem 1rem 1.2rem;height:100%;text-decoration:none;position:relative}
.kz-stappen a:hover{background:#fcfbf8}
.kz-n{width:1.875rem;height:1.875rem;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.9rem;box-shadow:inset 0 0 0 .125rem var(--lijn-d);margin-bottom:.4rem;color:var(--grijs)}
.kz-n svg{width:1rem;height:1rem;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.kz-stappen small{font-size:.78rem;font-weight:700;color:var(--grijs);text-transform:none}
.kz-stappen b{font-size:.98rem;line-height:1.3;font-weight:600}
.kz-stappen em{font-style:normal;font-size:.84rem;color:var(--grijs);margin-top:auto;padding-top:.3rem}
.kz-stappen li.klaar .kz-n{background:var(--groen);box-shadow:none}
.kz-stappen li.nu{background:#fff7f5}
.kz-stappen li.nu .kz-n{background:var(--rood);color:#fff;box-shadow:0 0 0 .25rem rgba(232,50,43,.16)}
.kz-stappen li.nu small{color:var(--rood-d)}
.kz-stappen li.nu::before{content:"";position:absolute;left:0;right:0;top:0;height:.1875rem;background:var(--rood)}
.kz-stappen li.dicht a{opacity:.55}
.kz-vg{display:block;height:.25rem;border-radius:.25rem;background:linear-gradient(90deg,var(--rood) var(--p),var(--lijn) var(--p));margin-top:.4rem}
@media (max-width:1100px){.kz{grid-template-columns:1fr}.kz-dom{flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--lijn)}.kz-omslag{width:6.875rem;flex:0 0 auto}}
@media (max-width:700px){.kz-stappen{grid-template-columns:1fr}.kz-stappen li{border-left:0;border-top:1px solid var(--lijn)}.kz-stappen li:first-child{border-top:0}
  .kz-stappen a{display:grid;grid-template-columns:1.875rem minmax(0,1fr) auto;column-gap:.8rem;align-items:center;padding:.85rem 1rem}
  .kz-n{grid-row:1/3;margin:0}.kz-stappen small{grid-column:2}.kz-stappen b{grid-column:2}.kz-stappen em{grid-column:3;grid-row:1/3;padding:0;margin:0;text-align:right}.kz-vg{grid-column:2/4}
  .kz-stappen li.nu::before{width:.1875rem;height:auto;bottom:0;right:auto}}

/* domeinkiezer */
.kiezer fieldset{border:0;margin:0;padding:0}
.kiezer ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14.375rem,1fr));gap:.8rem}
.kiezer label{display:grid;grid-template-columns:4.75rem minmax(0,1fr);gap:.8rem;align-items:center;background:#fff;border-radius:.875rem;padding:.5rem .8rem .5rem .5rem;box-shadow:inset 0 0 0 .0938rem var(--lijn);cursor:pointer;min-height:4.5rem;position:relative;transition:box-shadow .15s}
.kiezer label:hover{box-shadow:inset 0 0 0 .125rem var(--inkt)}
.kiezer input{position:absolute;opacity:0}
.kiezer label:has(input:checked){box-shadow:inset 0 0 0 .1562rem var(--rood);background:#fff7f5}
.kiezer label:has(input:checked)::after{content:"";position:absolute;right:.7rem;top:.7rem;width:1.375rem;height:1.375rem;border-radius:50%;background:var(--rood) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/.875rem no-repeat}
.kiezer label:has(input:disabled){opacity:.45;cursor:not-allowed}
.kiezer label:has(input:focus-visible){outline:.1875rem solid var(--rood);outline-offset:.125rem}
.kiezer-omslag{display:block;aspect-ratio:4/3;border-radius:.5625rem;overflow:hidden}
.kiezer-omslag .omslag{width:100%;height:100%}
.kiezer-t strong{display:block;font-size:.98rem;line-height:1.25;padding-right:1.6rem}
.kiezer-t small{display:block;color:var(--grijs);font-size:.8rem;line-height:1.35;margin-top:.15rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kiezer-voet{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;position:sticky;bottom:calc(var(--tab) + .6rem);background:var(--papier);padding:.6rem 0;z-index:3}
.kiezer-voet p{margin:0;color:var(--grijs);font-weight:600}
.uitleg-drie{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:.125rem solid var(--inkt)}
.uitleg-drie li{padding:1.3rem 1.4rem 1.4rem 0;display:flex;flex-direction:column;gap:.3rem}
.uitleg-drie li+li{padding-left:1.4rem;border-left:1px solid var(--lijn)}
.uitleg-drie b{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--rood)}
.uitleg-drie strong{font-size:1.15rem}
.uitleg-drie span{color:var(--inkt-2)}
@media (max-width:760px){.uitleg-drie{grid-template-columns:1fr}.uitleg-drie li+li{padding-left:0;border-left:0;border-top:1px solid var(--lijn)}}

/* zijkolom op Mijn leeromgeving */
.zij .paneel .blok-kop{margin-bottom:.8rem}
.zij .paneel .blok-kop h2{font-size:1.3rem}
.agenda{list-style:none;margin:0;padding:0}
.agenda li{border-top:1px solid var(--lijn)}
.agenda li:last-child{border-bottom:1px solid var(--lijn)}
.agenda a,.agenda li>div{display:grid;grid-template-columns:3.125rem minmax(0,1fr) auto;gap:.9rem;align-items:center;padding:.75rem 0;text-decoration:none}
.agenda b{display:flex;flex-direction:column;align-items:center;justify-content:center;width:3.125rem;height:3.375rem;border-radius:.625rem;background:var(--eigen);font-family:var(--display);font-size:1.4rem;line-height:1}
.agenda b small{font-family:"Onest",sans-serif;font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--rood-d);margin-top:.15rem}
.agenda .stem b{background:var(--rood);color:#fff}
.agenda strong{display:block;line-height:1.25}
.agenda span small{display:block;color:var(--grijs);font-size:.84rem;line-height:1.3;margin-top:.1rem}
.agenda a:hover strong{color:var(--rood-d)}
.agenda.groot b{width:3.625rem;height:3.875rem;font-size:1.6rem}
.agenda.groot li>div{grid-template-columns:3.625rem minmax(0,1fr) auto}
@media (max-width:520px){.agenda.groot li>div{grid-template-columns:3.625rem minmax(0,1fr)}.agenda.groot .tekstknop{grid-column:2}}
.per-dom{list-style:none;margin:0;padding:0}
.per-dom a{display:grid;gap:.25rem;padding:.6rem 0;border-top:1px solid var(--lijn);text-decoration:none;font-weight:600;font-size:.95rem}
.per-dom a:hover span{color:var(--rood-d)}
.verder{margin-top:0}
.verder-beeld{background:var(--zacht)}
.verder-beeld .omslag{position:absolute;inset:0}
.verder-tekst h3{font-family:var(--display);font-size:clamp(1.4rem,1.1rem + 1vw,2rem);line-height:1.08}

/* rijen met omslag */
.rij-beeld .omslag{width:100%;height:100%;transition:transform .5s var(--ease)}
.rij:hover .rij-beeld .omslag{transform:scale(1.04)}
.rij-dom{margin:0 0 .15rem!important;font-size:.8rem!important;font-weight:700;color:var(--grijs)!important;-webkit-line-clamp:1!important}
.rij-bron{color:var(--rood-d)!important;font-weight:600}
.rij .gemaakt{color:var(--groen);font-weight:700;display:inline-flex;gap:.3rem;align-items:center}
.rij .gemaakt svg{width:.9375rem;height:.9375rem;fill:none;stroke:currentColor;stroke-width:3}
.dom-stip{display:inline-block;width:.75rem;height:.75rem;border-radius:.1875rem;margin-right:.55rem;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.filters button{justify-content:flex-start}
.filters button span{margin-left:auto}
.cat-telling a{color:var(--rood-d);font-weight:600}
.tr-hoort{margin:2.4rem 0 0;padding:1.2rem 0 0;border-top:.125rem solid var(--inkt);display:grid;grid-template-columns:repeat(auto-fit,minmax(13.75rem,1fr));gap:1rem 2rem}
.tr-hoort dt{font-weight:700;font-size:.85rem;color:var(--grijs);margin-bottom:.2rem}
.tr-hoort dd{margin:0;line-height:1.5}
.tr-hoort a{color:var(--rood-d);font-weight:600;text-underline-offset:.1875rem}
.as-groep h2 a{text-decoration:none;display:flex;gap:.7rem;align-items:baseline}
.as-groep h2 a:hover{color:var(--rood-d)}
.as-nr{color:var(--grijs);font-size:.9em}
.kleefbaar{position:sticky;top:calc(var(--bar) + 1.2rem)}

/* ------------------------------------------------------------------ Academy */
.domeinen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21.25rem),1fr));gap:1.4rem 1.2rem}
.domeinen a{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:1rem;overflow:hidden;text-decoration:none;box-shadow:0 1px 0 var(--lijn);transition:box-shadow .25s,transform .25s var(--ease)}
.domeinen a:hover{box-shadow:0 1px 0 var(--lijn),0 1.125rem 2.5rem -1.5rem rgba(15,26,21,.35);transform:translateY(-.125rem)}
.domeinen a.mijn{box-shadow:inset 0 0 0 .1562rem var(--rood)}
.dom-omslag{display:block;aspect-ratio:16/8;overflow:hidden}
.dom-omslag .omslag{width:100%;height:100%}
.dom-t{padding:1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.dom-t strong{font-family:var(--display);font-size:1.3rem;line-height:1.12;font-weight:600}
.dom-t>span{color:var(--inkt-2);font-size:.94rem;line-height:1.5}
.dom-t small{color:var(--grijs);font-size:.84rem;margin-top:auto;padding-top:.4rem}
.dom-t small b{color:var(--rood-d)}
.domeinen a:hover strong{color:var(--rood-d)}
.blok.vlak{background:var(--vlak);padding:clamp(2.4rem,5vw,4rem) 0;margin-top:clamp(1rem,3vw,2rem)}
.blok.vlak+.blok{padding-top:clamp(2rem,4.5vw,3.6rem)}
.blok.vlak h2{margin-bottom:1rem}
table.vormen,table.reuzen{border-collapse:collapse;width:100%;font-size:.98rem;line-height:1.45}
table.vormen th,table.reuzen th{text-align:left;font-size:.84rem;color:var(--grijs);font-weight:700;padding:.6rem .7rem;border-bottom:.125rem solid var(--inkt)}
table.vormen td,table.reuzen td{padding:.75rem .7rem;border-bottom:1px solid var(--lijn-d);vertical-align:top}
table.vormen td:first-child,table.reuzen td:first-child{padding-left:0}
table.reuzen td.nr{font-family:var(--display);font-weight:600;color:var(--grijs);width:2.2rem}
table.reuzen td a{color:var(--rood-d);font-weight:600;text-underline-offset:.1875rem}
table.reuzen td:last-child{white-space:nowrap}
.licentie{font-size:.85rem;color:var(--rood-d);margin:.35rem 0 0}
@media (max-width:760px){
  table.reuzen thead{display:none}
  table.reuzen,table.reuzen tbody,table.reuzen tr,table.reuzen td{display:block;width:auto}
  table.reuzen tr{display:grid;grid-template-columns:2rem minmax(0,1fr);padding:.8rem 0;border-bottom:1px solid var(--lijn-d)}
  table.reuzen td{border:0;padding:0}
  table.reuzen td.nr{grid-row:1/4}
  table.reuzen td:nth-child(3){color:var(--inkt-2);font-size:.94rem}
  table.reuzen td:last-child{white-space:normal;font-size:.9rem;margin-top:.25rem}
  .tabel:has(table.reuzen){margin-inline:0;padding-inline:0}
}
.cyclus{list-style:none;margin:0 0 1.4rem;padding:0;counter-reset:c}
.cyclus li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.8rem;align-items:start;padding:.7rem 0;border-top:1px solid var(--lijn-d)}
.cyclus b{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--rood);color:#fff;display:grid;place-items:center;font-family:var(--display)}
.cyclus strong{display:block}
.cyclus span{color:var(--inkt-2);font-size:.95rem;line-height:1.4}
.dom-buren{display:grid;grid-template-columns:1fr 1fr;gap:1rem;border-top:.125rem solid var(--inkt);padding-top:1.2rem}
.dom-buren a{text-decoration:none;display:flex;flex-direction:column;gap:.15rem;min-height:3rem}
.dom-buren a.volg{text-align:right;align-items:flex-end}
.dom-buren small{color:var(--grijs);display:inline-flex;gap:.35rem;align-items:center;font-weight:600}
.dom-buren small svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.2}
.dom-buren b{font-family:var(--display);font-size:clamp(1.1rem,1rem + .6vw,1.5rem);font-weight:600}
.dom-buren a:hover b{color:var(--rood-d)}
.bp-legenda{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.92rem}
.bp-legenda li{display:flex;align-items:center;gap:.5rem}
.bp i{display:block}
.bp-legenda i,.bp-cellen i{width:1rem;height:1rem;border-radius:.25rem;flex:0 0 auto}
i.tr{background:var(--rood)}i.as{background:var(--groen)}i.bib{background:var(--mos)}i.nog{box-shadow:inset 0 0 0 .0938rem var(--lijn-d);background:#fff}
.bp{border-top:.125rem solid var(--inkt)}
.bp-rij{display:grid;grid-template-columns:minmax(0,17.5rem) minmax(0,1fr);gap:1rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--lijn);text-decoration:none}
.bp-rij:hover .bp-naam{color:var(--rood-d)}
.bp-naam{font-weight:600;display:flex;gap:.6rem}
.bp-naam b{font-family:var(--display);color:var(--grijs);font-weight:600;min-width:1.6rem}
.bp-cellen{display:grid;grid-template-columns:repeat(15,minmax(0,1.375rem));gap:.3125rem}
.bp-cellen i{width:auto;aspect-ratio:1;height:auto}
@media (max-width:700px){.bp-rij{grid-template-columns:1fr}.bp-cellen{grid-template-columns:repeat(15,minmax(0,1fr));gap:.1875rem}}
.kaartvelden{margin:0;padding-left:1.3rem}
.kaartvelden li{margin:.5rem 0}
.kaartvelden li::marker{color:var(--rood-d);font-weight:700}

/* ------------------------------------------------------------------ groepen */
.groep-lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.groep-lijst a{display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;gap:1.1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--lijn);text-decoration:none}
.groep-omslag{aspect-ratio:4/3;border-radius:.625rem;overflow:hidden;display:block}
.groep-omslag .omslag{width:100%;height:100%}
.groep-lijst strong{display:block;font-size:1.2rem;line-height:1.2}
.groep-lijst small{display:block;color:var(--grijs);font-size:.9rem}
.groep-lijst small.demo-t{color:var(--groen);font-weight:600}
.groep-lijst em{display:inline-block;font-style:normal;font-weight:700;color:var(--rood-d);font-size:.9rem;margin-top:.2rem}
.groep-lijst a:hover strong{color:var(--rood-d)}
@media (max-width:600px){.groep-lijst a{grid-template-columns:5.25rem minmax(0,1fr)}.groep-lijst .rij-pijl{display:none}}
.vink-lijst{list-style:none;margin:0;padding:0}
.vink-lijst li{position:relative;padding:.35rem 0 .35rem 1.7rem;line-height:1.45}
.vink-lijst li::before{content:"";position:absolute;left:.15rem;top:.62rem;width:.625rem;height:.375rem;border:solid var(--rood);border-width:0 0 .1562rem .1562rem;transform:rotate(-45deg)}
.groep-kop h1{max-width:20ch}
.bib-tabs .stip{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--rood);margin-left:.3rem;vertical-align:.125rem}
.groep-inhoud{max-width:61.25rem}
.feed .avatar.ander{background:var(--groen)}
.prik{background:#fff;border-radius:1rem;padding:clamp(1rem,2.5vw,1.6rem);box-shadow:0 1px 0 var(--lijn);margin-bottom:1.2rem}
.prik-kop{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.8rem}
.prik-kop h3{font-size:1.15rem}
.prik-kop small{color:var(--grijs)}
.prik table{border-collapse:collapse;width:100%;font-size:.94rem;min-width:32.5rem}
.prik th{font-size:.8rem;color:var(--grijs);font-weight:700;text-align:center;padding:.4rem .3rem;border-bottom:.125rem solid var(--inkt)}
.prik th:first-child,.prik td:first-child{text-align:left;padding-left:0}
.prik td{padding:.5rem .3rem;border-bottom:1px solid var(--lijn);text-align:center;vertical-align:middle}
.prik td:first-child{font-weight:600;white-space:nowrap}
.prik tr.beste td{background:#f0f6f1}
.prik tr.beste td:first-child{box-shadow:inset .1875rem 0 0 var(--groen);padding-left:.6rem}
.ik-kol{background:#fff7f5}
.stem-knop{width:2.625rem;height:2.625rem;border-radius:.625rem;border:0;background:#fff;box-shadow:inset 0 0 0 .0938rem var(--lijn-d);display:inline-grid;place-items:center;color:transparent}
.stem-knop svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.stem-knop:hover{box-shadow:inset 0 0 0 .125rem var(--inkt);color:var(--lijn-d)}
.stem-knop[aria-pressed=true]{background:var(--rood);color:#fff;box-shadow:none}
.kan{color:var(--groen);display:inline-grid}
.kan svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.kan-niet{color:var(--lijn-d)}
.prik-voet{display:flex;justify-content:space-between;align-items:center;gap:.8rem 1rem;flex-wrap:wrap;margin:1rem 0 0;font-size:.9rem}
.nieuw-prik{margin-top:1.4rem;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.nieuw-prik summary{cursor:pointer;min-height:3.25rem;display:flex;align-items:center;font-weight:700;list-style:none}
.nieuw-prik summary::before{content:"+";width:1.75rem;height:1.75rem;border-radius:50%;background:var(--rood);color:#fff;display:inline-grid;place-items:center;margin-right:.7rem;font-size:1.2rem}
.nieuw-prik[open] summary::before{content:"–"}
.nieuw-prik form{padding:.6rem 0 1.4rem;max-width:40rem}
.prik-opties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.prik-opties input{width:100%;min-height:3rem;border-radius:.75rem;border:.0938rem solid var(--lijn-d);background:#fff;padding:.5rem .7rem}
@media (max-width:520px){.prik-opties{grid-template-columns:1fr}}
.gt-lijst{list-style:none;margin:0;padding:0}
.gt-lijst>li{background:#fff;border-radius:1rem;padding:1rem;box-shadow:0 1px 0 var(--lijn);margin-bottom:1rem}
.gt-kop{display:grid;grid-template-columns:6.875rem minmax(0,1fr);gap:1rem;align-items:center;text-decoration:none}
.gt-kop strong{display:block;font-size:1.1rem;line-height:1.25}
.gt-kop small{color:var(--grijs)}
.gt-kop:hover strong{color:var(--rood-d)}
.gt-leden{list-style:none;margin:1rem 0 .2rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));gap:.4rem 1.6rem}
.gt-leden li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.6rem;align-items:center;font-size:.92rem}
.gt-leden li.ik span{font-weight:700}
.gt-toevoegen{max-width:40rem;margin-top:1.4rem}
.gt-toevoegen select{width:100%;min-height:3.125rem;border-radius:.75rem;border:.0938rem solid var(--lijn-d);background:#fff;padding:0 .8rem}
.leden li>span{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* ------------------------------------------------------------------ abonnement */
.periode{display:inline-flex;background:#fff;border-radius:62.4375rem;padding:.25rem;box-shadow:inset 0 0 0 .0938rem var(--lijn);margin-bottom:1.6rem}
.periode button{border:0;background:none;border-radius:62.4375rem;min-height:2.75rem;padding:0 1.1rem;font-weight:600;color:var(--inkt-2)}
.periode button small{font-weight:600;color:var(--groen);margin-left:.3rem}
.periode button[aria-pressed=true]{background:var(--inkt);color:#fff}
.periode button[aria-pressed=true] small{color:#bfe3c9}
.plannen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:stretch}
.plan{background:#fff;border-radius:1.125rem;padding:clamp(1.3rem,2.5vw,2rem);display:flex;flex-direction:column;box-shadow:0 1px 0 var(--lijn)}
.plan.uitgelicht{box-shadow:inset 0 0 0 .1562rem var(--inkt)}
.plan-voor{font-size:.9rem;color:var(--grijs);margin:0 0 .3rem;font-weight:600}
.plan h2{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem)}
.prijs{margin:.9rem 0 1.2rem;display:flex;flex-direction:column}
.prijs strong{font-family:var(--display);font-size:clamp(2.4rem,2rem + 1.6vw,3.4rem);line-height:1;font-variant-numeric:tabular-nums}
.prijs span{color:var(--grijs);font-size:.92rem;margin-top:.2rem}
.plan .vink-lijst{margin-bottom:1.4rem;flex:1}
.plan .knop{align-self:stretch}
.plan-klein{font-size:.86rem;color:var(--grijs);margin:.8rem 0 0;min-height:1.2em}
.reken{background:var(--vlak);border-radius:.75rem;padding:.9rem 1rem;margin:-.4rem 0 1.2rem}
.reken label{font-weight:700;font-size:.9rem}
.reken>div{display:flex;align-items:center;gap:.8rem}
.reken input{flex:1;accent-color:var(--rood);min-height:2.5rem}
.reken output{font-family:var(--display);font-size:1.4rem;min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums}
.reken p{margin:.2rem 0 0;font-size:.9rem;color:var(--inkt-2)}
@media (max-width:1000px){.plannen{grid-template-columns:1fr;max-width:38.75rem}}
.kader.smal{max-width:47.5rem}
.los-kop{display:flex;align-items:center;gap:.8rem;padding:.8rem var(--rand);background:#fff;box-shadow:0 1px 0 var(--lijn)}
.los-kop svg{width:3.5rem;color:var(--inkt)}
.los-kop span{font-family:var(--display);font-weight:600;font-size:1.1rem;padding-left:.8rem;border-left:1px solid var(--lijn-d)}
.los-kop .knop{margin-left:auto}

/* ------------------------------------------------------------------ proef in drie stappen */
.wizard-stappen{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;gap:.4rem;font-size:.82rem;color:var(--grijs);font-weight:600}
.wizard-stappen li{flex:1;display:flex;flex-direction:column;gap:.35rem;line-height:1.25}
.wizard-stappen li::before{content:"";height:.25rem;border-radius:.25rem;background:var(--lijn)}
.wizard-stappen li.klaar::before{background:var(--groen)}
.wizard-stappen li.nu::before{background:var(--rood)}
.wizard-stappen li.nu{color:var(--inkt)}
.wizard-stappen b{display:none}
.dom-keuze{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.dom-keuze label{display:flex;align-items:center;min-height:3.25rem;padding:.5rem .8rem;border-radius:.75rem;background:#fff;box-shadow:inset 0 0 0 .0938rem var(--lijn-d);cursor:pointer;font-size:.92rem;line-height:1.25;position:relative}
.dom-keuze label b{font-family:var(--display);color:var(--grijs);margin-right:.5rem;font-weight:600}
.dom-keuze input{position:absolute;opacity:0}
.dom-keuze label:has(input:checked){box-shadow:inset 0 0 0 .1562rem var(--rood);background:#fff7f5}
.dom-keuze label:has(input:checked) b{color:var(--rood)}
.dom-keuze label:has(input:disabled){opacity:.45}
.dom-keuze label:has(input:focus-visible){outline:.1875rem solid var(--rood);outline-offset:.125rem}
@media (max-width:420px){.dom-keuze{grid-template-columns:1fr}}
.wizard-knoppen{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.wizard-knoppen .knop{width:auto!important;margin:0!important}
.demo.melding{background:var(--vlak);border-radius:.75rem;padding:.8rem 1rem;margin:1.2rem 0}
.toegang-form .lijst li{gap:1rem}
.toegang-form .lijst strong{text-align:right}

/* omslag */
.omslag{display:block;width:100%;height:auto}
.kiezer ul{grid-template-columns:repeat(auto-fill,minmax(min(100%,18.125rem),1fr))}
.kiezer-t strong,.dom-t strong,.kz-dom strong,.rij h3,.groep-lijst strong,.gt-kop strong,.verder-tekst h3,.dom-buren b{hyphens:manual;overflow-wrap:normal}
.agenda .tekstknop{white-space:nowrap}
.avatar.systeem{background:var(--woud)}
.proefbalk .kader{flex-wrap:nowrap}
@media (max-width:480px){.pb-lang{display:none}.proefbalk{font-size:.86rem}}
.dom-kop h1{hyphens:manual}
html{scroll-padding-bottom:calc(var(--tab) + .75rem)}
.toast{pointer-events:none}
.tabel{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.blok-kop a{min-height:2.5rem;display:inline-flex;align-items:center}
@media (max-width:700px){.prik table{min-width:0}.prik .lid-kol{display:none}.prik td:first-child{white-space:normal}}
.agenda li>div>.tekstknop{display:inline-flex;align-items:center;padding:0}

/* Brede schermen: boven 1440 px schaalt het hele ontwerp mee (alle maten in rem) */
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}:where(button,input,select,textarea){font-size:.8333rem}}

/* ================================================================== ronde 5 (2026-10-15): trainingsbeelden, meldingen, lid worden, beheer */
/* trainingsbeeld: domeinomslag + inktillustratie (alfamasker) in de inktkleur van het domein */
.tb{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.tb .omslag{width:100%;height:100%}
.tb-inkt{position:absolute;top:12%;bottom:10%;left:34%;right:5%;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;transition:transform .5s var(--ease)}
.rij:hover .tb-inkt{transform:scale(1.04)}
.rij-beeld .tb .omslag,.rij:hover .rij-beeld .tb .omslag{transform:none}
.tr-kop .beeld .tb-inkt{top:10%;bottom:9%;left:30%;right:6%}
.verder-beeld .tb{position:absolute;inset:0}

/* bel + menu */
.bar-bel{position:relative;width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;color:inherit;text-decoration:none}
.bar-bel:hover{background:var(--zacht)}
.bar-bel svg{width:1.3125rem;height:1.3125rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.bar-bel b{position:absolute;top:.3rem;right:.2rem;min-width:1.15rem;height:1.15rem;padding:0 .25rem;border-radius:.6rem;background:var(--rood);color:#fff;font-size:.7rem;line-height:1.15rem;text-align:center;font-weight:700}
.menu-beheer{border-top:1px solid var(--lijn);margin-top:.35rem;border-radius:0 0 .5rem .5rem!important}
.menu-beheer small{margin-left:.4rem;color:var(--grijs);font-weight:600}

/* meldingen */
.meld-lijst{list-style:none;margin:0;padding:0}
.meld-lijst li{border-top:1px solid var(--lijn)}
.meld-lijst li:last-child{border-bottom:1px solid var(--lijn)}
.meld-lijst a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;padding:.9rem 0 .9rem 1rem;text-decoration:none;position:relative}
.meld-lijst li.nieuw a::before{content:"";position:absolute;left:0;top:1.35rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--rood)}
.meld-soort{grid-column:1/-1;font-size:.78rem;font-weight:700;color:var(--grijs)}
.meld-lijst strong{line-height:1.3}
.meld-lijst small{color:var(--grijs);font-size:.84rem;white-space:nowrap;grid-row:2;grid-column:2}
.meld-tekst{grid-column:1;color:var(--inkt-2);font-size:.95rem;line-height:1.4;margin-top:.2rem}
.meld-lijst a:hover strong{color:var(--rood-d)}
.meld-kader{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
table.kanalen{border-collapse:collapse;width:100%;font-size:.92rem}
.kanalen th,.kanalen td{padding:.55rem .4rem;border-bottom:1px solid var(--lijn);text-align:left;vertical-align:middle}
.kanalen thead th{color:var(--grijs);font-size:.8rem;border-bottom:.125rem solid var(--inkt);white-space:nowrap}
.kanalen tbody th{font-weight:500;line-height:1.3;min-width:10rem}
.kanalen select{min-height:2.5rem;border:1px solid var(--lijn-d);border-radius:.5rem;background:#fff;padding:0 .4rem;max-width:11rem}
.paneel .uitleg{font-size:.9rem;color:var(--grijs);margin:1rem 0}
.schakel{position:relative;display:inline-flex;align-items:center;min-height:2.5rem;cursor:pointer}
.schakel input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.schakel i{width:2.6rem;height:1.5rem;border-radius:1rem;background:var(--lijn-d);position:relative;transition:background .2s}
.schakel i::after{content:"";position:absolute;left:.2rem;top:.2rem;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.schakel input:checked+.sr+i,.schakel input:checked~i{background:var(--groen)}
.schakel input:checked~i::after{transform:translateX(1.1rem)}
.schakel input:focus-visible~i{outline:.1875rem solid var(--rood);outline-offset:.125rem}

/* prikbord: bezorgd + @naam */
.plaats-voet{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.6rem}
.plaats-voet small{flex:1 1 14rem;line-height:1.35}
.bezorgd{display:flex;gap:.4rem;align-items:baseline;font-size:.84rem;color:var(--grijs);margin:.4rem 0 0}
.bezorgd svg{width:.9rem;height:.9rem;fill:none;stroke:var(--groen);stroke-width:3;flex:0 0 auto;transform:translateY(.1rem)}
.noem{color:var(--rood-d);font-weight:700}
.opdrachten{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:1rem}
.op-kop{display:flex;justify-content:space-between;gap:.4rem 1rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.6rem}
.op-kop small{color:var(--grijs)}
.rol-kies{min-height:2.5rem;border:1px solid var(--lijn-d);border-radius:.5rem;background:#fff;padding:0 .5rem}

/* lid worden */
.lid-keuze{border:0;margin:0 0 1rem;padding:0;display:grid;gap:.5rem}
.lid-keuze label,.betaal label{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 1rem;border-radius:.75rem;background:#fff;box-shadow:inset 0 0 0 .0938rem var(--lijn-d);cursor:pointer}
.lid-keuze input,.betaal input{margin:.3rem 0 0;accent-color:var(--rood);width:1.1rem;height:1.1rem;flex:0 0 auto}
.lid-keuze label:has(input:checked),.betaal label:has(input:checked){box-shadow:inset 0 0 0 .1562rem var(--rood);background:#fff7f5}
.lid-keuze strong,.betaal strong{display:block;line-height:1.3}
.lid-keuze small,.betaal small{display:block;color:var(--grijs);line-height:1.35;font-size:.9rem;margin-top:.15rem}
.betaal{border:0;margin:0 0 1.2rem;padding:0;display:grid;gap:.5rem}
.betaal legend{margin-bottom:.6rem;font-weight:600}
.lid-extra{margin:0 0 1rem}
.lid-extra .periode{margin-bottom:.9rem}
.periode.klein button{min-height:2.5rem;padding:0 .9rem;font-size:.92rem}
.vinkje{display:flex;gap:.6rem;align-items:flex-start;line-height:1.4;cursor:pointer;min-height:2.5rem;padding:.3rem 0}
.vinkje input{margin:.2rem 0 0;width:1.1rem;height:1.1rem;accent-color:var(--rood);flex:0 0 auto}
.reken-rij{display:flex;gap:1rem;align-items:center}
.reken-rij input{flex:1;accent-color:var(--rood);min-height:2.5rem}
.reken-rij output{font-family:var(--display);font-size:1.6rem;min-width:3ch;text-align:right}
.veld-twee{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}
.samenvatting{margin:0 0 1.2rem}
.samenvatting li{font-size:.95rem}
.welkom-stappen{margin:1rem 0 1.4rem}

/* collega uitnodigen */
.kopieer{display:flex;gap:.5rem}
.kopieer input{flex:1;min-width:0;min-height:2.75rem;border:1px solid var(--lijn-d);border-radius:.6rem;padding:0 .8rem;background:#fff;font-size:.92rem}

/* certificaat (A4 liggend, ook om af te drukken) */
.cert-knoppen{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin:1rem 0 1.6rem}
.cert{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);aspect-ratio:297/210;background:#fff;border-radius:.4rem;box-shadow:0 1px 0 var(--lijn),0 1.5rem 3rem -2rem rgba(15,26,21,.45);overflow:hidden;max-width:62rem}
.cert-band{position:relative;background:var(--cert-bg)}
.cert-band .omslag,.cert-band .tb{position:absolute;inset:0;width:100%;height:100%}
.cert-band .omslag{object-fit:cover}
.cert-band .tb-inkt{left:10%;right:10%;top:28%;bottom:28%}
.cert-in{padding:clamp(1.2rem,4.5vw,3.6rem);display:flex;flex-direction:column;justify-content:center}
.cert-logo{width:clamp(4.5rem,9vw,7rem);height:auto;color:var(--inkt);margin-bottom:clamp(.8rem,2.4vw,2rem)}
.cert-label{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:clamp(.8rem,1.2vw,1rem);margin:0 0 clamp(.6rem,1.8vw,1.4rem);letter-spacing:.02em}
.cert-klein{margin:0;color:var(--inkt-2);font-size:clamp(.78rem,1.25vw,1.05rem)}
.cert-naam{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,4.6vw,3.6rem);line-height:1.05;margin:.3em 0 .35em}
.cert-titel{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,2.4vw,1.9rem);line-height:1.15;margin:.3em 0 .45em;color:var(--cert-inkt)}
.cert-voet{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(1rem,3vw,2.4rem);padding-top:.8rem;border-top:1px solid var(--lijn);font-size:clamp(.7rem,1vw,.85rem);color:var(--grijs)}
.cert-vlag{position:absolute;right:clamp(1rem,3vw,2.4rem);top:clamp(1rem,3vw,2.4rem);width:clamp(1.4rem,2.6vw,2.2rem);color:var(--inkt)}
.cert-vlag svg{width:100%;height:auto}
@media (max-width:640px){.cert{grid-template-columns:1fr;aspect-ratio:auto}.cert-band{height:8rem}.cert-band .tb-inkt{top:12%;bottom:12%}}
@media print{
  @page{size:A4 landscape;margin:0}
  body *{visibility:hidden}
  .cert,.cert *{visibility:visible}
  .cert{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;border-radius:0;box-shadow:none;aspect-ratio:auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .in-beheer .rapport,.in-beheer .rapport *{visibility:visible}
  .in-beheer .rapport{position:absolute;left:0;top:0;width:100%}
}

/* feedback na de training */
.fb,.fb-klaar{margin-bottom:2rem;box-shadow:inset 0 0 0 .125rem var(--rood)}
.fb-klaar p{margin:0}.fb-klaar p+p{margin-top:.4rem}

/* ------------------------------------------------------------------ beheer */
.beheer-kop{background-color:#e8ece6}
.beheer-raster{display:grid;grid-template-columns:13.5rem minmax(0,1fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
.beheer-nav{position:sticky;top:calc(var(--bar) + 1rem)}
.beheer-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.beheer-nav a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:2.6rem;padding:0 .8rem;border-radius:.6rem;text-decoration:none;font-weight:550;color:var(--inkt-2)}
.beheer-nav a:hover{background:var(--zacht)}
.beheer-nav a[aria-current]{background:var(--inkt);color:#fff}
.tel{min-width:1.4rem;height:1.4rem;padding:0 .35rem;border-radius:.7rem;background:var(--rood);color:#fff;font-size:.75rem;display:inline-grid;place-items:center}
.beheer-inhoud{min-width:0}
.twee-b{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
table.btabel{border-collapse:collapse;width:100%;font-size:.94rem;background:#fff;border-radius:.8rem;overflow:hidden;box-shadow:0 1px 0 var(--lijn)}
.btabel th,.btabel td{padding:.7rem .75rem;border-bottom:1px solid var(--lijn);text-align:left;vertical-align:top;line-height:1.35}
.btabel thead th{font-size:.8rem;color:var(--grijs);font-weight:600;background:#fbfaf6;white-space:nowrap}
.btabel tbody tr:last-child td,.btabel tbody tr:last-child th{border-bottom:0}
.btabel small{color:var(--grijs)}
.btabel td.acties{white-space:nowrap;text-align:right}
.btabel td.acties>*+*{margin-left:.6rem}
.btabel td.acties .tekstknop{display:inline-flex;align-items:center}
.btabel input[type=checkbox]{width:1.15rem;height:1.15rem;accent-color:var(--rood)}
.btabel .vg{min-width:7rem}
.btabel.matrix td{text-align:center;vertical-align:middle}
.btabel.matrix thead th{white-space:normal;text-align:center;line-height:1.2;min-width:5.5rem}
.btabel.matrix thead th:first-child,.btabel.matrix tbody th{text-align:left;font-weight:500;min-width:14rem}
.status{display:inline-block;font-size:.78rem;font-weight:700;padding:.15rem .5rem;border-radius:.35rem;background:var(--zacht);color:var(--inkt-2);white-space:nowrap}
.s-nieuw,.s-proef,.s-uitgenodigd{background:#fbe6e1;color:var(--rood-d)}
.s-actief,.s-goedgekeurd,.s-gepubliceerd{background:#dcebdf;color:#1d4a32}
.s-voorstel,.s-concept{background:#f1e2b4;color:#4a3a08}
.s-afgewezen{background:#e5e5e5;color:#555}
.b-filter{display:flex;gap:.3rem;margin-bottom:1rem;flex-wrap:wrap}
.b-filter a{min-height:2.5rem;padding:0 1rem;border-radius:2rem;display:inline-flex;align-items:center;text-decoration:none;font-weight:600;box-shadow:inset 0 0 0 .0938rem var(--lijn-d)}
.b-filter a[aria-current]{background:var(--inkt);color:#fff;box-shadow:none}
.b-balk{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.b-balk .zoek{flex:1 1 15rem;margin:0}
.b-balk select,.b-bulk select,form.inline select{min-height:2.75rem;border:1px solid var(--lijn-d);border-radius:.6rem;background:#fff;padding:0 .6rem;max-width:100%}
.b-bulk{position:sticky;bottom:calc(var(--tab) + .8rem);z-index:5;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:.8rem;padding:.7rem;border-radius:.9rem;background:var(--inkt);color:#fff}
.b-bulk [data-n]{font-weight:700;margin-right:auto;padding-left:.4rem}
.b-bulk select{color:var(--inkt)}
.te-doen{list-style:none;margin:0;padding:0}
.te-doen li{border-top:1px solid var(--lijn)}.te-doen li:last-child{border-bottom:1px solid var(--lijn)}
.te-doen a{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.8rem;align-items:center;padding:.7rem 0;text-decoration:none}
.te-doen b{height:2.6rem;border-radius:.6rem;background:var(--eigen);color:var(--rood-d);display:grid;place-items:center;font-size:.78rem}
.te-doen strong{display:block;line-height:1.3}.te-doen small{color:var(--grijs);display:block;line-height:1.35}
.vragen details{border-top:1px solid var(--lijn);padding:.2rem 0}
.vragen details:last-child{border-bottom:1px solid var(--lijn)}
.vragen summary{cursor:pointer;font-weight:600;min-height:3rem;display:flex;align-items:center;list-style-position:inside}
.vragen p{max-width:70ch;color:var(--inkt-2)}
.plek{display:block;width:6rem;height:.4rem;border-radius:.2rem;background:var(--zacht);margin-bottom:.3rem;overflow:hidden}
.plek i{display:block;height:100%;width:var(--p);background:var(--groen)}
.b-groepen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:1rem}
.b-groepen .paneel+.paneel{margin-top:0}
.b-groepen p{margin:0 0 .5rem;line-height:1.4}
.leden-rij{display:flex;flex-wrap:wrap;gap:.25rem}
form.inline{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
form.inline select{flex:1 1 12rem;min-width:0}
.kies-leden{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:.35rem}
.kies-leden label{display:flex;gap:.5rem;align-items:flex-start;padding:.5rem .6rem;border-radius:.6rem;background:var(--papier);cursor:pointer;line-height:1.3}
.kies-leden input{accent-color:var(--rood);margin-top:.2rem}
.kies-leden small{display:block;color:var(--grijs);font-size:.8rem}
.les-rijen{margin:0 0 .4rem;padding-left:1.4rem;display:grid;gap:.4rem}
.les-rijen li{display:flex;gap:.4rem}
.les-rijen input,.les-rijen select{min-height:2.75rem;border:1px solid var(--lijn-d);border-radius:.6rem;padding:0 .7rem;background:#fff;min-width:0}
.les-rijen input{flex:1}
.b-kahunas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:.5rem}
.b-kahunas li>*,.b-kahunas li{display:flex;gap:.7rem;align-items:center;text-decoration:none}
.b-kahunas li{padding:.4rem;border-radius:.7rem;background:#fff}
.b-kahunas .foto,.b-kahunas .avatar{width:2.6rem;height:2.6rem;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--zacht)}
.b-kahunas .foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.b-kahunas strong{line-height:1.25;font-size:.92rem}
.b-kahunas small{display:block;color:var(--grijs);font-size:.8rem}
.schaal{display:flex;gap:.4rem}
.schaal label{position:relative}
.schaal input{position:absolute;opacity:0}
.schaal span{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;box-shadow:inset 0 0 0 .0938rem var(--lijn-d);font-weight:700;cursor:pointer;background:#fff}
.schaal input:checked+span{background:var(--rood);color:#fff;box-shadow:none}
.schaal input:focus-visible+span{outline:.1875rem solid var(--rood);outline-offset:.125rem}
.as-proef{margin-top:1.6rem;box-shadow:inset 0 0 0 .125rem var(--inkt)}
.uitslag-staaf{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1rem}
.uitslag-staaf li{display:grid;grid-template-columns:7rem minmax(0,1fr) 2.5rem;gap:.3rem .8rem;align-items:center}
.uitslag-staaf b{height:.6rem;border-radius:.3rem;background:var(--zacht);overflow:hidden}.uitslag-staaf b i{display:block;height:100%;background:var(--rood)}
.uitslag-staaf p{grid-column:1/-1;margin:0;color:var(--inkt-2)}
.r-kern{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 1rem;border-top:.125rem solid var(--inkt)}
.r-kern div{padding:.9rem 1rem .9rem 0}.r-kern div+div{padding-left:1rem;border-left:1px solid var(--lijn)}
.r-kern dt{font-size:.85rem;color:var(--grijs)}.r-kern dd{margin:0;font-family:var(--display);font-size:1.7rem;line-height:1.1}
small.op{color:#1d6a3a;font-weight:700}small.neer{color:var(--rood-d);font-weight:700}
.codes{font-family:ui-monospace,Menlo,monospace;font-size:.85rem;line-height:1.8;word-spacing:.4rem}
.agenda b.doc{font-size:.72rem;font-family:"Onest",sans-serif;background:var(--zacht);color:var(--inkt-2)}
@media (max-width:980px){.beheer-raster{grid-template-columns:minmax(0,1fr)}.beheer-nav{position:static;margin:0 calc(-1*var(--rand))}.beheer-nav ul{display:flex;overflow-x:auto;scrollbar-width:none;padding:0 var(--rand) .4rem;gap:.3rem}
  .beheer-nav ul::-webkit-scrollbar{display:none}.beheer-nav a{white-space:nowrap;box-shadow:inset 0 0 0 .0938rem var(--lijn-d)}.twee-b,.meld-kader{grid-template-columns:minmax(0,1fr)}.r-kern{grid-template-columns:1fr 1fr}.r-kern div:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:560px){.veld-twee{grid-template-columns:1fr}.kanalen tbody th{min-width:7rem}.kanalen select{max-width:8.5rem}.r-kern dd{font-size:1.35rem}}
.les-rijen select{flex:0 0 9.5rem;width:9.5rem!important}
.les-rijen input{width:auto!important}
.beheer-nav,.beheer-inhoud,.meld-kader>*{min-width:0}
.twee-b>*{min-width:0}
@media (max-width:560px){.les-rijen li{flex-wrap:wrap}.les-rijen input{flex:1 1 100%}.les-rijen select{flex:1 1 100%;width:100%!important}}
@media (max-width:560px){.kanalen th:nth-child(2),.kanalen td:nth-child(2){display:none}.kanalen select{max-width:7.6rem;font-size:.85rem}}

/* ==================================================================== web-app (2026-10-26)
   Ingelogd op telefoon/tablet (en geïnstalleerd als app): kop met terugknop + titel, vaste tabbalk
   Home · Trainingen · Assessments · Groepen · Profiel, wissel Trainingen · Academy · Kahuna's, installeren. */
.bar-terug,.bar-titel,.app-seg,.app-menu,.installeer{display:none}
.blad{position:fixed;inset:0;z-index:400;background:rgba(11,21,17,0);display:flex;align-items:flex-end;justify-content:center;transition:background-color .3s}
.blad.open{background:rgba(11,21,17,.45)}
.blad-in{width:min(32rem,100%);background:#fff;border-radius:1.25rem 1.25rem 0 0;padding:.6rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .35s var(--ease)}
.blad.open .blad-in{transform:none}
.blad-greep{display:block;width:2.5rem;height:.3rem;border-radius:.2rem;background:var(--lijn-d);margin:0 auto 1.1rem}
.blad h2{font-size:1.5rem;margin-bottom:1rem}
.blad ol{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.9rem}
.blad li{display:flex;gap:.9rem;align-items:flex-start}
.blad li>span{flex:0 0 auto;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--eigen);color:var(--rood-d);font-weight:700;display:grid;place-items:center;font-size:.9rem}
.blad li p{margin:.15rem 0 0;line-height:1.45}
.blad li svg{display:inline-block;vertical-align:-.25rem;width:1.25rem;height:1.25rem;fill:none;stroke:var(--rood-d);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.blad .knop{width:100%}
@media (min-width:1024px){.blad{align-items:center}.blad-in{border-radius:1.25rem}}

@media (max-width:1023px){
  html{-webkit-tap-highlight-color:transparent}
  body:not(.zonder-app){overscroll-behavior-y:none}
  .bar,.tabs,.app-seg{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  /* kop: logo op de beginpagina's van een tab, daarna terugknop + paginatitel */
  .bar{gap:.5rem;padding-left:max(var(--rand),env(safe-area-inset-left));padding-right:max(var(--rand),env(safe-area-inset-right))}
  .bar-wie{display:none}
  .bar-terug{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-left:-.6rem;border:0;border-radius:50%;background:none;color:inherit;flex:0 0 auto}
  .bar-terug:active{background:var(--zacht)}
  .bar-terug svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .bar-terug[hidden]{display:none!important}
  body.diep .bar-merk{display:none}
  body.diep .bar-titel{display:block;flex:1;min-width:0;margin:0;font-weight:700;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.diep .bar-rechts{margin-left:0}
  /* tabbalk */
  .tabs a{gap:.25rem;font-size:.69rem;letter-spacing:.005em;transition:color .2s}
  .tabs a>svg,.tabs a>.avatar{position:relative;z-index:1}
  .tabs a::after{content:"";position:absolute;top:.45rem;left:50%;width:3.6rem;height:1.95rem;margin-left:-1.8rem;border-radius:1rem;background:var(--eigen);transform:scaleX(.4);opacity:0;transition:transform .3s var(--ease),opacity .2s}
  .tabs a[aria-current]{color:var(--inkt)}
  .tabs a[aria-current]::after{transform:none;opacity:1}
  .tabs a[aria-current]::before{display:none}
  .tabs a[aria-current]>svg{color:var(--rood-d);stroke-width:2.1}
  .tabs a:active>svg,.tabs a:active>.avatar{transform:scale(.88)}
  .tabs a>svg,.tabs a>.avatar{transition:transform .15s}
  .tabs .avatar.mini{width:1.6rem;height:1.6rem;font-size:.62rem;box-shadow:none}
  .tabs a[aria-current]>.avatar{box-shadow:0 0 0 .125rem var(--eigen),0 0 0 .25rem var(--rood)}
  .tabs{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  /* wissel Trainingen · Academy · Kahuna's */
  .app-seg:not([hidden]){display:flex;gap:.25rem;margin:.75rem var(--rand) 0;padding:.25rem;background:var(--zacht);border-radius:.85rem}
  .app-seg a{flex:1;display:grid;place-items:center;min-height:2.5rem;border-radius:.65rem;text-decoration:none;font-weight:600;font-size:.92rem;color:var(--inkt-2)}
  .app-seg a[aria-current]{background:#fff;color:var(--inkt);box-shadow:0 1px .25rem rgba(15,26,21,.12)}
  /* installeren */
  .installeer:not([hidden]){display:flex;align-items:center;gap:.8rem;margin:.75rem var(--rand) 0;padding:.75rem .5rem .75rem .9rem;background:#fff;border:1px solid var(--lijn);border-radius:1rem;box-shadow:0 .5rem 1.5rem rgba(15,26,21,.06)}
  .installeer>svg{width:2.75rem;height:2.75rem;padding:.4rem;border-radius:.7rem;background:var(--papier);border:1px solid var(--lijn);flex:0 0 auto;color:var(--inkt)}
  .installeer p{margin:0;flex:1;min-width:0;line-height:1.3;font-size:.9rem;hyphens:none}
  .installeer p strong{display:block;font-size:.95rem}
  .installeer p span{color:var(--grijs)}
  .installeer .knop{flex:0 0 auto;min-height:2.4rem;padding:.4rem .9rem;font-size:.88rem}
  .installeer-weg{flex:0 0 auto;width:2.2rem;height:2.75rem;border:0;background:none;font-size:1.4rem;color:var(--grijs);line-height:1}
  /* profiel = menu van de app */
  .app-menu{display:block;padding:1.2rem 0 .4rem}
  .app-groep{background:#fff;border:1px solid var(--lijn);border-radius:1rem;overflow:hidden;margin-bottom:.9rem}
  .app-groep>a,.app-groep>button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;min-height:3.25rem;padding:.55rem 1rem;text-decoration:none;font-weight:600;background:none;border:0;text-align:left;color:inherit}
  .app-groep>a+a,.app-groep>a+button,.app-groep>button+a,.app-groep>button+button{border-top:1px solid var(--lijn)}
  .app-groep>[hidden]{display:none}
  .app-groep>a:active,.app-groep>button:active{background:var(--zacht)}
  .app-groep small{display:block;font-weight:400;font-size:.84rem;color:var(--grijs);line-height:1.3}
  .app-groep svg{width:1.1rem;height:1.1rem;fill:none;stroke:var(--lijn-d);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .app-groep .uit{color:var(--rood-d);justify-content:center}
  /* paginawissel: kort opkomen, zoals een app */
  #app.kom>*{animation:kom .28s var(--ease) both}
  @keyframes kom{from{opacity:0;transform:translateY(.5rem)}}
  .toast{bottom:calc(var(--tab) + .9rem);max-width:calc(100vw - 2rem)}
}
/* geïnstalleerd (beginscherm): ruimte voor de statusbalk; ook op een groot scherm de app-kop */
body.standalone .bar{padding-top:env(safe-area-inset-top);height:calc(var(--bar) + env(safe-area-inset-top))}
body.standalone .voortgang-lijn{top:calc(var(--bar) + env(safe-area-inset-top))}
body.standalone{overscroll-behavior-y:none}
body.offline .bar::after{content:"offline";position:absolute;right:50%;bottom:-.7rem;transform:translateX(50%);background:var(--inkt);color:#fff;font-size:.7rem;font-weight:700;padding:.1rem .55rem;border-radius:.6rem}

/* 2026-10-30 Henk: bijeenkomst met eindtijd, te wijzigen of weg te halen */
.bk-acties{display:flex;flex-wrap:wrap;gap:.2rem 1rem;justify-content:flex-end}
.bk-acties .tekstknop{display:inline-flex;align-items:center;padding:0;white-space:nowrap}
.bk-wijzig{padding:.4rem 0 1.2rem 4.5rem}
.bk-velden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.6fr);gap:.6rem}
.bk-velden .veld{margin:0}
.bk-velden input{width:100%}
.bk-knoppen{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;margin-top:.8rem}
.tekstknop.rood{color:var(--rood)}
.prik-optie{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:center}
.prik-tot{display:flex;align-items:center;gap:.4rem;color:var(--grijs);font-size:.9rem}
.prik-opties .prik-tot input{width:7rem}
.toast a,.toast button{pointer-events:auto}
.toast-terug{background:none;border:0;color:inherit;font-weight:700;text-decoration:underline;padding:0 0 0 .4rem;min-height:2.25rem}
@media (max-width:720px){.bk-wijzig{padding-left:0}.bk-velden{grid-template-columns:repeat(3,minmax(0,1fr))}.bk-plek{grid-column:1/-1}}
@media (max-width:520px){.bk-acties{grid-column:2;justify-content:flex-start}.bk-velden{grid-template-columns:1fr 1fr}.bk-velden label:first-child{grid-column:1/-1}}

/* 2026-10-30 Henk: profielfoto */
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avatar:has(img){background:var(--zacht)}
.prof-foto{display:flex;gap:1rem;align-items:center;margin-bottom:1.4rem}
.prof-foto>div{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center}
.prof-foto small{flex-basis:100%;color:var(--grijs);font-size:.85rem;line-height:1.4}
.prof-kies{cursor:pointer;position:relative}
.prof-kies:focus-within{outline:.1875rem solid var(--rood);outline-offset:.125rem}

/* ronde 10: Future Pro-uitslag */
.fp-uitslag h3{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:2.2rem 0 .4rem;padding-bottom:.4rem;border-bottom:2px solid var(--inkt,#14201a)}
.fp-uitslag h3 small{font-size:1rem;font-variant-numeric:tabular-nums}
.fp-uitslag .grafiek div{grid-template-columns:minmax(0,16rem) minmax(0,1fr) 3.2rem}
.fp-detail{border-top:1px solid var(--zacht);padding:.5rem 0}
.fp-detail summary{cursor:pointer;font-weight:600;min-height:40px;display:flex;align-items:center}
.fp-detail table{margin:.4rem 0 .8rem}
.fp-detail td:last-child{white-space:nowrap;text-align:right}
@media (max-width:600px){.fp-uitslag .grafiek div{grid-template-columns:1fr 3rem}.fp-detail td:last-child{white-space:normal}}