@font-face{font-family:"Ease Display";src:url(/fonts/ease-display-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Ease SemiDisplay";src:url(/fonts/ease-semidisplay-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Ease SemiDisplay";src:url(/fonts/ease-semidisplay-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* Layout: presentatie-app op volledig scherm. Kopbalk, podium en voetnavigatie; zwart-wit ADC-basis, de verandertheorie in de kleuren van Centre Céramique. */
:root{
  --bg:#FFFFFF; --fg:#0A0A0B; --muted:#565C68; --faint:#8E98A8; --line:#E3E5EE; --panel:#F4F4F6; --panel-2:#EBECF1;
  --accent:#A187FF; --accent-ink:#5A47AE; --accent-soft:#ECE6FF;
  --attn:#FF9BFC; --attn-ink:#9A2C96; --attn-soft:#FFE6FE;
  --ok:#58EB81; --ok-ink:#1D7439; --ok-soft:#DDF9E5;
  --toc-impact:#E7CB48; --toc-uitkomst:#00A9B7; --toc-output:#94C356; --toc-strategie:#FCF7E7; --toc-ink:#111111;
  --heat-0:#FFFFFF; --heat-1:#DCD3FF; --heat-2:#B5A0FF; --heat-3:#8E78E8;
  --sticky-yellow:#FFF347; --sticky-pink:#FF9BFC; --sticky-green:#58EB81; --sticky-teal:#2BEBCB; --sticky-violet:#C7B8FF;
  --font-display:"Ease Display","Ease SemiDisplay",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Ease SemiDisplay",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  --shadow:0 4px 10px rgba(0,0,0,.10); --shadow-deep:0 12px 40px rgba(0,0,0,.18);
  --gut:max(16px, env(safe-area-inset-left, 0px)); --gut-r:max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0B0B0D; --fg:#F4F4F6; --muted:#A5ACB9; --faint:#6F7787; --line:#272932; --panel:#16171C; --panel-2:#1F2128;
  --accent-ink:#C7B8FF; --accent-soft:#272042; --attn-ink:#FFBCFD; --attn-soft:#3A1E39; --ok-ink:#82EE9D; --ok-soft:#173222;
  --heat-0:#16171C; --shadow:0 4px 10px rgba(0,0,0,.5); --shadow-deep:0 12px 40px rgba(0,0,0,.6); color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0B0B0D; --fg:#F4F4F6; --muted:#A5ACB9; --faint:#6F7787; --line:#272932; --panel:#16171C; --panel-2:#1F2128;
  --accent-ink:#C7B8FF; --accent-soft:#272042; --attn-ink:#FFBCFD; --attn-soft:#3A1E39; --ok-ink:#82EE9D; --ok-soft:#173222;
  --heat-0:#16171C; --shadow:0 4px 10px rgba(0,0,0,.5); --shadow-deep:0 12px 40px rgba(0,0,0,.6); color-scheme:dark; }

html,body{height:100%}
body{background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:clamp(14px, .55vw + 8px, 22px); line-height:1.45; letter-spacing:.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--bg)}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit; color:inherit; letter-spacing:inherit}
button{cursor:pointer; background:none; border:0; padding:0}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}
h1,h2,h3,h4{margin:0; font-weight:400; text-wrap:balance}
p{margin:0}
.display{font-family:var(--font-display); letter-spacing:-.035em; line-height:.98}
.xl{font-size:clamp(40px, 5.4vw, 112px)}
.l{font-size:clamp(28px, 3.1vw, 64px)}
.m{font-size:clamp(22px, 2vw, 40px)}
.s{font-size:clamp(18px, 1.35vw, 28px)}
.eyebrow{font-size:.72em; text-transform:uppercase; letter-spacing:.09em; color:var(--muted)}
.lead{font-size:1.15em; color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:.8em}
.tiny{font-size:.68em}
.num{font-variant-numeric:tabular-nums}
.arrows{list-style:none; margin:0; padding:0; display:grid; gap:.55em}
.arrows li{display:grid; grid-template-columns:1.3em 1fr; gap:.4em}
.arrows li::before{content:"→"}
.hidden{display:none!important}

/* ---------- App-schil ---------- */
#app{height:100%; display:grid; grid-template-rows:auto 1fr auto; min-height:0}
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; display:flex; align-items:center; gap:1em; padding-block:.55em; padding-left:var(--gut); padding-right:var(--gut-r); border-bottom:1px solid var(--line); background:var(--bg); min-width:0}
.brand{display:flex; align-items:center; gap:.7em; min-width:0; flex:0 1 auto}
.brand svg{height:1.05em; width:auto; flex:none}
.brand .t{font-size:.78em; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.blockpill{flex:1 1 auto; min-width:0; display:flex; justify-content:center}
.blockpill button{display:inline-flex; align-items:center; gap:.6em; padding:.3em .9em; border-radius:var(--r-pill); background:var(--panel); max-width:100%; min-width:0}
.blockpill .bt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.blockpill .bn{font-size:.72em; color:var(--muted); white-space:nowrap}
.tools{display:flex; align-items:center; gap:.45em; flex:none}
.clock{font-variant-numeric:tabular-nums; font-size:.9em; color:var(--muted)}
.timer{font-variant-numeric:tabular-nums; padding:.25em .75em; border-radius:var(--r-pill); border:1.5px solid var(--fg); min-width:4.6em; text-align:center}
.timer.run{background:var(--fg); color:var(--bg)}
.timer.warn{background:var(--attn); color:#000; border-color:var(--attn)}
.timer.over{background:var(--attn-soft); color:var(--attn-ink); border-color:var(--attn)}
.sched{font-size:.7em; color:var(--muted); white-space:nowrap}
.sched.late{color:var(--attn-ink)}
.status{display:inline-flex; align-items:center; gap:.4em; font-size:.7em; color:var(--muted); white-space:nowrap}
.status i{width:.6em; height:.6em; border-radius:50%; background:var(--faint); display:inline-block}
.status.ok i{background:var(--ok)} .status.busy i{background:var(--accent)} .status.warn i{background:var(--attn)}
.tbtn{padding:.28em .7em; border-radius:var(--r-pill); font-size:.78em; border:1px solid var(--line); white-space:nowrap}
.tbtn:hover{border-color:var(--fg)}
.tbtn[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}

#stage{position:relative; min-height:0; overflow:auto; padding-block:1.4em; padding-left:var(--gut); padding-right:var(--gut-r)}
.scr{min-height:100%; display:flex; flex-direction:column; gap:1.1em}
.scr-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1em; flex-wrap:wrap}
.scr-head .ttl{display:grid; gap:.3em; min-width:0}
.stepbar{display:flex; gap:.35em; flex-wrap:wrap}
.stepbar button{font-size:.75em; padding:.3em .8em; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--muted)}
.stepbar button[aria-current="step"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}

.bottom{display:flex; align-items:center; gap:1em; padding-block:.5em; padding-left:var(--gut); padding-right:var(--gut-r); border-top:1px solid var(--line); background:var(--bg); min-width:0}
.nav{padding:.42em 1.1em; border-radius:var(--r-pill); border:1.5px solid var(--fg); font-size:.85em; white-space:nowrap}
.nav.primary{background:var(--fg); color:var(--bg)}
.nav:hover{background:var(--fg); color:var(--bg)}
.nav.primary:hover{background:var(--bg); color:var(--fg)}
.nav:disabled{opacity:.3; pointer-events:none}
.daybar{flex:1 1 auto; min-width:0; display:grid; gap:.3em}
.daybar .lbl{font-size:.7em; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.segs{display:flex; gap:3px; height:8px}
.segs button{flex:var(--w) 1 0; border-radius:2px; background:var(--panel-2); min-width:3px}
.segs button.done{background:var(--faint)}
.segs button.cur{background:var(--accent)}
.segs button.pz{background:repeating-linear-gradient(90deg,var(--panel-2) 0 3px,transparent 3px 6px)}
.segs button.pz.done{background:repeating-linear-gradient(90deg,var(--faint) 0 3px,transparent 3px 6px)}

/* ---------- Algemene bouwstenen ---------- */
.btn{display:inline-flex; align-items:center; gap:.45em; padding:.42em 1em; border-radius:var(--r-pill); border:1.5px solid var(--fg); font-size:.85em; white-space:nowrap}
.btn:hover{background:var(--fg); color:var(--bg)}
.btn.solid{background:var(--fg); color:var(--bg)}
.btn.solid:hover{background:var(--bg); color:var(--fg)}
.btn.ghost{border-color:var(--line)}
.btn.sm{font-size:.72em; padding:.3em .75em}
.btn:disabled{opacity:.35; pointer-events:none}
.chip{display:inline-flex; align-items:center; gap:.35em; padding:.12em .6em; border-radius:var(--r-pill); font-size:.68em; background:var(--panel); white-space:nowrap}
.chip.kb{background:var(--accent-soft); color:var(--accent-ink)}
.chip.gem{background:var(--ok-soft); color:var(--ok-ink)}
.chip.warn{background:var(--attn-soft); color:var(--attn-ink)}
.chip.dark{background:var(--fg); color:var(--bg)}
.panel{background:var(--panel); border-radius:var(--r-lg); padding:1em 1.15em}
.card{border:1px solid var(--line); border-radius:var(--r-md); padding:.8em .95em; background:var(--bg)}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1em}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1em}
.grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1em}
.grow{flex:1 1 auto; min-height:0}
.scr.fit{height:100%; min-height:0}
.scr.fit .grow{flex:1 1 0}
.split>*,.kop>*,.prio>*,.mp>*{min-height:0; overflow:auto}
.tocwrap{display:flex; flex-direction:column; min-height:0; overflow:auto}
.tocwrap>.toc{flex:1 0 auto}
.row{display:flex; gap:.6em; align-items:center; flex-wrap:wrap}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,22em); gap:1.2em; min-height:0}
.field{display:grid; gap:.3em}
.field label{font-size:.72em; color:var(--muted)}
.in{width:100%; border:1px solid var(--line); border-radius:var(--r-md); padding:.5em .7em; background:var(--bg); min-width:0}
.in:focus{border-color:var(--fg); outline:none}
textarea.in{resize:vertical; min-height:3.2em; line-height:1.35}
.kbd{font-family:var(--font-mono); font-size:.75em; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:0 .35em}
.quote{font-family:var(--font-display); font-size:1.12em; letter-spacing:-.01em; line-height:1.25}

/* ---------- Start ---------- */
.scr-start{justify-content:space-between}
.start-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:2.5em; align-items:center; flex:1 1 auto}
.start-main{display:grid; gap:1.2em; align-content:center}
.stack{display:grid; gap:.5em; align-content:start}
.stack .lev{display:grid; grid-template-columns:7.5em 1fr; align-items:center; gap:.8em}
.stack .lev span{font-size:.75em; color:var(--muted); text-align:right}
.stack .bar{height:3.1em; border-radius:var(--r-sm); position:relative; display:flex; align-items:center; gap:5px; padding:0 .8em; flex-wrap:wrap; align-content:center}
.stack .dot{width:.62em; height:.62em; border-radius:50%; background:#111; opacity:.85}
.stack .cap{font-size:.72em; color:var(--muted); padding-left:8.3em}
.start-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:1em; flex-wrap:wrap}
.keys{display:flex; gap:1em; flex-wrap:wrap; font-size:.72em; color:var(--muted)}

/* ---------- Doelen ---------- */
.doel-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:2em; align-items:start}
.result{background:var(--fg); color:var(--bg); border-radius:var(--r-lg); padding:1.4em 1.5em; display:grid; gap:.6em}
.result .eyebrow{color:var(--faint)}
.regels{display:grid; gap:.4em; margin-top:1.4em}

/* ---------- Agenda ---------- */
.agenda{display:grid; gap:.3em}
.ag{display:grid; grid-template-columns:5.2em minmax(0,1fr) auto auto; gap:1em; align-items:center; padding:.55em .9em; border-radius:var(--r-md); text-align:left; width:100%}
.ag:hover{background:var(--panel)}
.ag .tm{font-variant-numeric:tabular-nums; color:var(--muted)}
.ag .vm{font-size:.75em; color:var(--muted)}
.ag .du{font-size:.75em; color:var(--muted); font-variant-numeric:tabular-nums}
.ag.pz{color:var(--muted)}
.ag.pz .tt{font-style:italic}
.ag.cur{background:var(--fg); color:var(--bg)}
.ag.cur .tm,.ag.cur .vm,.ag.cur .du{color:var(--bg)}
.ag.done{opacity:.55}
.agscr > *{width:100%; max-width:66em; margin-inline:auto}
.agscr{padding-top:clamp(0px,2vh,32px)}
.agenda2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4.5vw,96px); margin-top:.3em}
.agc{display:grid; gap:.7em; align-content:start}
.agh{display:flex; align-items:baseline; justify-content:space-between; gap:1em; border-bottom:1.5px solid var(--fg); padding-bottom:.35em}
.tl{list-style:none; margin:0; padding:0; position:relative}
.tl::before{content:""; position:absolute; left:calc(5.75em - 1px); top:1em; bottom:1em; width:2px; background:var(--line)}
.tl-i button{display:grid; grid-template-columns:4.6em 1.1em minmax(0,1fr); column-gap:.6em; align-items:start; width:100%; text-align:left; padding:.48em .6em .48em 0; border-radius:var(--r-md)}
.tl-i button:hover{background:var(--panel)}
.tl-i .tm{color:var(--muted); text-align:right; padding-top:.12em; font-variant-numeric:tabular-nums}
.tl-i .dot{position:relative; z-index:1; justify-self:center; width:.9em; height:.9em; margin-top:.32em; border-radius:50%; background:var(--bg); border:2px solid var(--fg)}
.tl-i .tx{display:grid; gap:.08em; min-width:0}
.tl-i .tx b{font-family:var(--font-display); font-weight:400; font-size:1.2em; letter-spacing:-.015em; line-height:1.15}
.tl-i .vm{font-size:.74em; color:var(--muted)}
.tl-i.pz button{padding-block:.22em}
.tl-i.pz .tm{font-size:.82em; padding-top:.05em}
.tl-i.pz .dot{width:.5em; height:.5em; margin-top:.42em; border:0; background:var(--faint)}
.tl-i.pz .tx{display:flex; align-items:baseline; gap:.45em}
.tl-i.pz .pzt{font-size:.85em; color:var(--muted); font-style:italic}
.tl-i.pz .du{font-size:.72em; color:var(--faint)}
.tl-i.cur .dot{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.tl-i.cur .tx b{text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:3px; text-underline-offset:5px}
.tl-i.done{opacity:.5}
.tl-i.done .dot{background:var(--fg)}

/* ---------- Stellingen ---------- */
.stel{flex:1 1 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3.4fr) minmax(0,1fr); gap:1.2em; align-items:stretch; min-height:16em}
.side{border-radius:var(--r-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6em; padding:1em}
.side.eens{background:var(--ok-soft); color:var(--ok-ink)}
.side.oneens{background:var(--attn-soft); color:var(--attn-ink)}
.side .big{font-family:var(--font-display); font-size:clamp(24px,2.4vw,48px); letter-spacing:-.03em}
.side .cnt{display:flex; align-items:center; gap:.5em; font-variant-numeric:tabular-nums}
.side .cnt b{font-size:1.4em; min-width:1.6em; text-align:center; font-weight:400}
.side .cnt button{width:1.8em; height:1.8em; border-radius:50%; border:1.5px solid currentColor}
.stel-mid{display:flex; flex-direction:column; justify-content:center; gap:1.1em; padding:1em .5em}
.verdict{display:inline-flex; align-self:flex-start; padding:.25em .9em; border-radius:var(--r-pill); font-family:var(--font-display); font-size:clamp(22px,2vw,40px); letter-spacing:-.02em}
.verdict.eens{background:var(--ok); color:#000}
.verdict.oneens{background:var(--attn); color:#000}
.verdict.hangt{background:var(--accent); color:#000}
.splitbar{display:flex; height:.6em; border-radius:var(--r-pill); overflow:hidden; background:var(--panel-2)}
.splitbar i{display:block; height:100%}

/* ---------- Sticky boards ---------- */
.board{display:grid; gap:1em; flex:1 1 auto; min-height:0}
.col{background:var(--panel); border-radius:var(--r-lg); padding:.8em; display:flex; flex-direction:column; gap:.6em; min-height:10em; min-width:0}
.col h3{font-size:.85em; color:var(--muted)}
.stickies{display:flex; flex-wrap:wrap; gap:.6em; align-content:flex-start}
.sticky{position:relative; width:min(11.5em,100%); min-height:6.2em; padding:.6em .7em 1.4em; color:#111; box-shadow:0 2px 6px rgba(0,0,0,.14); border-radius:2px; font-size:.9em; line-height:1.25; overflow-wrap:anywhere}
.sticky:nth-child(3n+1){transform:rotate(-.6deg)} .sticky:nth-child(3n+2){transform:rotate(.5deg)}
.sticky.yellow{background:var(--sticky-yellow)} .sticky.pink{background:var(--sticky-pink)} .sticky.green{background:var(--sticky-green)} .sticky.teal{background:var(--sticky-teal)} .sticky.violet{background:var(--sticky-violet)}
.sticky .x{position:absolute; right:.25em; bottom:.15em; font-size:.75em; opacity:.55; padding:.1em .3em}
.sticky .x:hover{opacity:1}
.adder{display:flex; gap:.5em; flex-wrap:wrap; align-items:center}
.adder .in{flex:1 1 16em}
.adder select.in{flex:0 1 auto; width:auto}
.addind{display:grid; gap:.5em; border-color:var(--fg)}
.addgrid{display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) auto auto; gap:.5em; align-items:center}
.addgrid select.in{width:auto}

/* ---------- Verandertheorie ---------- */
.toc{display:grid; grid-template-columns:auto auto minmax(0,1.3fr) minmax(0,1fr); grid-template-rows:auto repeat(3,minmax(min-content,1fr)) auto; gap:.45em .5em; flex:1 1 auto; min-height:0}
.toc .rail{writing-mode:vertical-rl; transform:rotate(180deg); font-size:.68em; color:var(--muted); text-align:center; letter-spacing:.06em; text-transform:uppercase; align-self:stretch; display:flex; align-items:center; justify-content:center; border-right:1px solid var(--line); padding:0 .2em}
.toc .sfeer{writing-mode:vertical-rl; transform:rotate(180deg); font-size:.62em; text-align:center; letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); padding:0 .25em; color:var(--muted); background:var(--panel)}
.toc .sfeer.controle{background:var(--fg); color:var(--bg)}
.toc .visie{grid-column:3 / span 2; display:flex; align-items:center; gap:.7em; padding:.35em .2em; border-bottom:1.5px solid var(--fg)}
.toc .visie b{font-weight:400; font-family:var(--font-display); font-size:clamp(16px,1.35vw,30px); letter-spacing:-.02em; line-height:1.05}
.toc .vlbl{grid-column:1 / span 2; font-size:.68em; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; align-self:center; text-align:center}
.trow{display:flex; gap:.4em; min-width:0; min-height:0}
.trow.bib{position:relative; padding-left:.55em; border-left:2px dashed var(--fg)}
.box{position:relative; display:flex; flex-direction:column; gap:.25em; padding:.5em .55em; border-radius:var(--r-sm); color:var(--toc-ink); text-align:left; min-width:0; min-height:0; overflow:hidden; cursor:pointer; transition:opacity .15s, box-shadow .15s, transform .15s}
.box.impact{background:var(--toc-impact)} .box.uitkomst{background:var(--toc-uitkomst)} .box.output{background:var(--toc-output)} .box.strategie{background:var(--toc-strategie); border:1px solid #E9DFC2}
.box .code{font-family:var(--font-display); font-size:.95em; letter-spacing:-.01em; line-height:1}
.box .txt{font-size:.66em; line-height:1.22; overflow:hidden; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:anywhere}
.toc.compact .box .txt{font-size:.62em}
.box .meta{margin-top:auto; display:flex; flex-wrap:wrap; gap:.2em; align-items:flex-end}
.box.dim{opacity:.22}
.box.hide{background:transparent!important; border:1.5px dashed var(--line)!important; color:transparent}
.box.hide *{visibility:hidden}
.box.sel{box-shadow:0 0 0 3px var(--fg), 0 0 0 6px var(--accent); z-index:2}
.box.hl{box-shadow:0 0 0 3px var(--accent)}
.box.flag::after{content:"!"; position:absolute; top:.25em; right:.3em; width:1.15em; height:1.15em; border-radius:50%; background:var(--attn); color:#000; font-size:.7em; display:grid; place-items:center; font-weight:600}
.box.over{box-shadow:0 0 0 3px var(--accent), var(--shadow-deep); transform:scale(1.02)}
.badge{display:inline-grid; place-items:center; min-width:1.5em; height:1.5em; padding:0 .35em; border-radius:var(--r-pill); background:#111; color:#fff; font-size:.62em; font-variant-numeric:tabular-nums}
.badge.xls{background:#fff; color:#111; border:1px solid #111}
.badge.pin{background:var(--accent); color:#000}
.mini{display:inline-flex; align-items:center; padding:.05em .4em; border-radius:var(--r-pill); background:rgba(255,255,255,.88); color:#111; font-size:.58em; font-variant-numeric:tabular-nums; border:1px solid rgba(0,0,0,.15)}
.mini.sel{background:#111; color:#fff}
.toc[data-heat="1"] .box{background:var(--heat-0); color:var(--fg); border:1px solid var(--line)}
.toc[data-heat="1"] .box.h1{background:var(--heat-1); color:#111}
.toc[data-heat="1"] .box.h2{background:var(--heat-2); color:#111}
.toc[data-heat="1"] .box.h3{background:var(--heat-3); color:#111}
.toc[data-heat="1"] .box.gap{border:2px dashed var(--attn); background:var(--attn-soft); color:var(--attn-ink)}
.toc[data-heat="1"] .box .mini{background:rgba(255,255,255,.9)}
.sgrid{display:grid; gap:.3em; min-width:0; min-height:0}
.sgrid.cc{grid-template-columns:repeat(7,minmax(0,1fr))}
.sgrid.bib{grid-template-columns:repeat(3,minmax(0,1fr))}
.box.s1{grid-column:1 / -1}
.toc .bibhead{display:flex; align-items:center; gap:.5em}
.legend{display:flex; gap:1em; flex-wrap:wrap; font-size:.7em; color:var(--muted); align-items:center}
.legend i{display:inline-block; width:1em; height:1em; border-radius:3px; vertical-align:-.15em; margin-right:.3em}

.detail{border-left:1px solid var(--line); padding-left:1.1em; display:flex; flex-direction:column; gap:.8em; min-width:0; overflow:auto}
.detail .lvlchip{align-self:flex-start; padding:.15em .7em; border-radius:var(--r-pill); font-size:.7em; color:#111}
.ilist{display:grid; gap:.35em}
.ilist button,.ilist div{text-align:left; display:grid; grid-template-columns:4.6em 1fr; gap:.5em; font-size:.8em; padding:.25em .4em; border-radius:var(--r-sm)}
.ilist button:hover{background:var(--panel)}
.ilist .id{font-variant-numeric:tabular-nums; color:var(--muted)}
.note{border-left:3px solid var(--attn); padding:.3em .7em; font-size:.82em; background:var(--attn-soft); border-radius:0 var(--r-sm) var(--r-sm) 0}

/* ---------- Indicatorenmuur ---------- */
.filters{display:flex; gap:.4em; flex-wrap:wrap; align-items:center}
.filters .lab{font-size:.7em; color:var(--muted); margin-right:.2em}
.fbtn{font-size:.72em; padding:.22em .75em; border-radius:var(--r-pill); border:1px solid var(--line)}
.fbtn[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(13.5em,1fr)); gap:.6em; align-content:start}
.icard{display:flex; flex-direction:column; gap:.35em; text-align:left; border:1px solid var(--line); border-radius:var(--r-md); padding:.6em .7em; background:var(--bg); min-width:0}
.icard:hover{border-color:var(--fg)}
.icard .id{font-size:.66em; color:var(--muted); font-variant-numeric:tabular-nums; display:flex; justify-content:space-between; gap:.4em}
.icard .nm{font-size:.86em; line-height:1.2}
.icard .tags{display:flex; flex-wrap:wrap; gap:.25em; margin-top:auto}
.icard.sug{border-style:dashed; background:transparent}
.icard.mc{border-left:4px solid var(--sticky-teal)}
.icard.sel{border-color:var(--fg); box-shadow:0 0 0 2px var(--accent)}
.icard[draggable="true"]{cursor:grab}
.lad{display:inline-flex; align-items:center; gap:.3em; font-size:.64em; padding:.08em .5em; border-radius:var(--r-pill); border:1px solid currentColor}
.lad.bereik{color:var(--muted)} .lad.beleving{color:var(--accent-ink)} .lad.leren,.lad.toepassen,.lad.impact{background:var(--ok-soft); color:var(--ok-ink); border-color:transparent} .lad.organisatie{color:var(--faint)}
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8em}
.stat{border-top:2px solid var(--fg); padding-top:.5em; display:grid; gap:.2em}
.stat b{font-family:var(--font-display); font-weight:400; font-size:clamp(28px,2.6vw,56px); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.stat span{font-size:.75em; color:var(--muted)}
.stat.alert{border-top-color:var(--attn)}

/* ---------- Meetladder ---------- */
.ladder{display:grid; gap:.45em; align-content:center}
.rung{display:grid; grid-template-columns:8em minmax(0,1fr) 3.5em; gap:.9em; align-items:center}
.rung .nm{font-family:var(--font-display); font-size:1.15em; letter-spacing:-.02em}
.rung .q{font-size:.72em; color:var(--muted)}
.rung .tr{height:2.4em; background:var(--panel); border-radius:var(--r-sm); position:relative; overflow:hidden; display:flex; align-items:center}
.rung .fill{height:100%; background:var(--fg); border-radius:var(--r-sm)}
.rung .fill.zero{background:transparent}
.rung .n{font-family:var(--font-display); font-size:1.4em; text-align:right; font-variant-numeric:tabular-nums}
.rung .tocl{position:absolute; right:.6em; font-size:.66em; color:var(--muted)}
.mcard{display:grid; gap:.35em; padding:.9em 1em; border-radius:var(--r-lg); background:var(--panel); align-content:start}
.mcard h3{font-family:var(--font-display); font-size:1.3em; letter-spacing:-.02em}
.mcard dl{margin:0; display:grid; grid-template-columns:5.2em 1fr; gap:.25em .6em; font-size:.76em}
.mcard dt{color:var(--muted)} .mcard dd{margin:0}
.kv{display:grid; grid-template-columns:8em minmax(0,1fr); gap:.45em 1em; font-size:.9em}
.kv dt{color:var(--muted)} .kv dd{margin:0}

/* ---------- Koppelen ---------- */
.kop{display:grid; grid-template-columns:minmax(0,1fr) minmax(15em,21em); gap:1em; flex:1 1 auto; min-height:0}
.tray{display:flex; flex-direction:column; gap:.6em; min-height:0; overflow:auto; padding-right:.2em}
.tray>*{flex-shrink:0}
.tray .wall{grid-template-columns:1fr}
.tray .icard{padding:.45em .6em}
.dropzone{border:1.5px dashed var(--line); border-radius:var(--r-md); padding:.5em; min-height:3em}
.dropzone.over{border-color:var(--accent); background:var(--accent-soft)}
.kstats{display:flex; gap:1.2em; flex-wrap:wrap; font-size:.78em; color:var(--muted)}
.kstats b{color:var(--fg); font-weight:600}

/* ---------- Matrix ---------- */
.prio{display:grid; grid-template-columns:minmax(0,1fr) minmax(15em,20em); gap:1.2em; flex:1 1 auto; min-height:0}
.matrix{position:relative; border:1.5px solid var(--fg); border-radius:var(--r-md); min-height:22em; overflow:hidden; background:linear-gradient(var(--line),var(--line)) center/1.5px 100% no-repeat, linear-gradient(var(--line),var(--line)) center/100% 1.5px no-repeat}
.matrix .q{position:absolute; font-size:.72em; color:var(--muted); padding:.5em .7em; text-transform:uppercase; letter-spacing:.06em}
.matrix .q.rb{right:0; top:0; color:var(--ok-ink)} .matrix .q.lb{left:0; top:0} .matrix .q.ro{right:0; bottom:0} .matrix .q.lo{left:0; bottom:0}
.matrix .pin{position:absolute; transform:translate(-50%,-50%); padding:.2em .6em; border-radius:var(--r-pill); background:var(--fg); color:var(--bg); font-size:.7em; white-space:nowrap; cursor:grab; max-width:14em; overflow:hidden; text-overflow:ellipsis; box-shadow:var(--shadow)}
.matrix .pin.top{background:var(--accent); color:#000}
.matrix .pin.sel{outline:3px solid var(--accent)}
.axis{font-size:.72em; color:var(--muted); display:flex; justify-content:space-between}
.votes{display:grid; gap:.25em}
.vrow{display:grid; grid-template-columns:4.6em minmax(0,1fr) auto; gap:.6em; align-items:center; padding:.25em .4em; border-radius:var(--r-sm); font-size:.82em}
.vrow:nth-child(odd){background:var(--panel)}
.vrow .ctl{display:flex; align-items:center; gap:.35em}
.vrow .ctl button{width:1.6em; height:1.6em; border-radius:50%; border:1px solid var(--fg)}
.vrow .ctl b{min-width:1.6em; text-align:center; font-variant-numeric:tabular-nums; font-weight:600}
.star{width:1.8em; height:1.8em; border-radius:50%; border:1.5px solid var(--fg); font-size:.9em}
.star[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#000}
.toplist{display:grid; gap:.5em}
.topitem{display:grid; grid-template-columns:2em minmax(0,1fr) auto; gap:.6em; align-items:center; padding:.6em .8em; border-radius:var(--r-md); background:var(--panel)}
.topitem .nr{font-family:var(--font-display); font-size:1.5em; letter-spacing:-.03em}

/* ---------- Meetplan ---------- */
.mp{display:grid; grid-template-columns:minmax(12em,17em) minmax(0,1fr); gap:1.2em; flex:1 1 auto; min-height:0}
.kpitabs{display:grid; gap:.4em; align-content:start; min-width:0}
.kpitabs .adder{flex-direction:column; align-items:stretch}
.kpitabs .adder select.in{width:100%}
.kpitab span{min-width:0; overflow:hidden; text-overflow:ellipsis}
.kpitab{display:grid; gap:.25em; text-align:left; padding:.6em .7em; border-radius:var(--r-md); border:1px solid var(--line)}
.kpitab[aria-current="true"]{border-color:var(--fg); background:var(--fg); color:var(--bg)}
.prog{height:5px; border-radius:var(--r-pill); background:var(--panel-2); overflow:hidden}
.prog i{display:block; height:100%; background:var(--ok)}
.canvas{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8em 1em; align-content:start}
.canvas .field.wide{grid-column:1 / -1}
.canvas .field label b{color:var(--fg); font-weight:600}
.canvas .field .hint{font-size:.66em; color:var(--faint)}
table.tbl{width:100%; border-collapse:collapse; font-size:.78em}
.tbl th{text-align:left; font-weight:600; color:var(--muted); border-bottom:1.5px solid var(--fg); padding:.4em .5em; white-space:nowrap}
.tbl td{border-bottom:1px solid var(--line); padding:.45em .5em; vertical-align:top}
.tblwrap{overflow-x:auto}

/* ---------- Pauze ---------- */
.pauze{flex:1 1 auto; display:grid; place-items:center; text-align:center; gap:1em}
.pauze .count{font-family:var(--font-display); font-size:clamp(64px,10vw,200px); letter-spacing:-.05em; line-height:.9; font-variant-numeric:tabular-nums}

/* ---------- Lagen (drawers, overlay, modal) ---------- */
.drawer{position:fixed; top:0; bottom:0; right:0; width:min(26em,92vw); background:var(--bg); border-left:1px solid var(--line); box-shadow:var(--shadow-deep); z-index:50; display:flex; flex-direction:column; gap:.8em; padding:calc(1em + env(safe-area-inset-top,0px)) calc(1em + env(safe-area-inset-right,0px)) calc(1em + env(safe-area-inset-bottom,0px)) 1em; overflow:auto; transform:translateX(105%); transition:transform .2s ease-out}
.drawer.open{transform:none}
.drawer .dh{display:flex; justify-content:space-between; align-items:center; gap:1em}
.overlay{position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.45); display:flex; align-items:flex-start; justify-content:center; padding:calc(4vh + env(safe-area-inset-top,0px)) var(--gut-r) 4vh var(--gut); overflow:auto}
.sheet{background:var(--bg); color:var(--fg); border-radius:var(--r-lg); box-shadow:var(--shadow-deep); width:min(60em,100%); padding:1.3em 1.4em; display:grid; gap:1em}
.sheet.narrow{width:min(36em,100%)}
.sheet .sh{display:flex; justify-content:space-between; align-items:flex-start; gap:1em}
.spot{display:grid; gap:.8em}
.spot .nm{font-family:var(--font-display); font-size:clamp(26px,2.6vw,52px); letter-spacing:-.03em; line-height:1.02}

/* ---------- Draaiboek ---------- */
.doc{max-width:52em; display:grid; gap:1.4em}
.doc section{display:grid; gap:.5em; padding-top:1em; border-top:1px solid var(--line)}
.doc h2{font-family:var(--font-display); font-size:1.5em; letter-spacing:-.02em}
.doc ol{margin:0; padding-left:1.2em; display:grid; gap:.25em}

/* ---------- Responsief ---------- */

/* ---------- Krant, melding, extra ---------- */
.krant{border:1.5px solid var(--fg); border-radius:var(--r-sm); padding:1.1em 1.2em; display:grid; gap:.8em; background:var(--bg); transform:rotate(-1deg); box-shadow:var(--shadow)}
.krant .kh{display:flex; justify-content:space-between; gap:1em; border-top:3px double var(--fg); border-bottom:3px double var(--fg); padding:.35em 0; font-size:.72em; text-transform:uppercase; letter-spacing:.12em}
.krant .kh span:first-child{font-family:var(--font-display); font-size:1.5em; letter-spacing:.02em; text-transform:none}
.krant .kk{font-family:Georgia,"Times New Roman",serif; font-size:clamp(24px,2.4vw,46px); line-height:1.05; font-weight:700}
.krant .kb{display:grid; gap:.45em}
.krant .kb i{display:block; height:.5em; background:var(--panel-2); border-radius:2px; width:100%}
.krant .kbew{display:flex; gap:.8em; flex-wrap:wrap}
.krant .kbew .sticky{width:auto; min-height:auto; padding:.5em .8em; font-size:.8em}
.lvlchip{align-self:flex-start; padding:.15em .7em; border-radius:var(--r-pill); font-size:.7em; color:#111}
.toast{position:fixed; left:50%; bottom:calc(4.2em + env(safe-area-inset-bottom,0px)); transform:translate(-50%,1em); background:var(--fg); color:var(--bg); padding:.55em 1.1em; border-radius:var(--r-pill); font-size:.85em; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:70; max-width:calc(100vw - 32px)}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* ---------- Kop, reset, toast, schakelaar ---------- */
.hd-r{display:flex; gap:.5em; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.rbtn{color:var(--muted)}
.btn.danger{background:var(--attn); border-color:var(--attn); color:#111}
.btn.danger:hover{background:var(--fg); border-color:var(--fg); color:var(--bg)}
.toast.act{pointer-events:auto}
.toast .tact{margin-left:.6em; text-decoration:underline; text-underline-offset:3px; color:inherit; font-weight:600}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-pill); padding:2px; gap:2px}
.seg button{font-size:.72em; padding:.24em .85em; border-radius:var(--r-pill); color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--fg); color:var(--bg)}
.tbtn.save{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.tbtn.save:hover{background:var(--bg); color:var(--fg)}

/* ---------- Klassieke verandertheorie ---------- */
.classic{display:flex; flex-direction:column; gap:.6em; min-height:100%}
.cl-visie{display:flex; gap:.6em; align-items:center; font-family:var(--font-display); font-size:clamp(16px,1.25vw,26px); letter-spacing:-.01em; border-bottom:1.5px solid var(--fg); padding-bottom:.35em}
.cl-grid{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(28px,4vw,84px); flex:1 0 auto}
.cl-col{display:flex; flex-direction:column; gap:.5em; min-width:0}
.cl-head{display:grid; gap:.1em; padding-bottom:.3em; border-bottom:1px solid var(--line)}
.cl-head b{font-family:var(--font-display); font-weight:400; font-size:1.05em}
.cl-head span{font-size:.7em; color:var(--muted)}
.cl-boxes{display:flex; flex-direction:column; justify-content:space-around; gap:.45em; flex:1 1 auto; padding-block:.3em}
.cbox{position:relative; z-index:1; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.5em; text-align:left; padding:.45em .6em; border-radius:var(--r-md); color:var(--toc-ink); font-size:.78em; line-height:1.2; border:2px solid transparent; transition:opacity .15s, border-color .15s}
.cbox.impact{background:var(--toc-impact)} .cbox.uitkomst{background:var(--toc-uitkomst)} .cbox.output{background:var(--toc-output)} .cbox.strategie{background:var(--toc-strategie); border-color:#E9DFC2}
.cbox .code{font-family:var(--font-display); font-size:1.15em}
.cbox .badge{background:#111; color:#fff}
.cbox.bib{box-shadow:inset 4px 0 0 rgba(0,0,0,.55)}
.cbox.dim{opacity:.28}
.cbox.on{border-color:#111}
.cbox.sel{border-color:#111; box-shadow:0 0 0 3px var(--accent)}
.cl-svg{position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:0}
.cl-svg .ln{fill:none; stroke:var(--faint); stroke-width:1.6; opacity:.85}
.cl-svg .ln.off{opacity:.18}
.cl-svg .ln.on{stroke:var(--fg); stroke-width:3; opacity:1}
.cl-svg .ahd{fill:var(--faint)} .cl-svg .ahd.on{fill:var(--fg)}
.cl-sferen{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(28px,4vw,84px); font-size:.68em; text-transform:uppercase; letter-spacing:.09em; text-align:center}
.cl-sferen span{padding:.25em; border-radius:var(--r-sm); background:var(--panel); color:var(--muted)}
.cl-sferen .controle{grid-column:span 2; background:var(--fg); color:var(--bg)}
.plist{display:grid; gap:.3em}
.pitem{display:grid; grid-template-columns:1.6em minmax(0,1fr); gap:.5em; align-items:start; text-align:left; padding:.45em .55em; border:1px solid var(--line); border-radius:var(--r-md)}
.pitem:hover{border-color:var(--fg)}
.pitem[aria-pressed="true"]{border-color:var(--fg); background:var(--panel)}
.pitem .pn{display:grid; place-items:center; width:1.6em; height:1.6em; border-radius:50%; background:var(--panel-2); font-size:.75em}
.pitem[aria-pressed="true"] .pn{background:var(--fg); color:var(--bg)}
.pitem .pt{display:grid; gap:.1em; font-size:.85em}

/* ---------- Opslaan ---------- */
.savegrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7em}
.savebtn{display:grid; gap:.3em; text-align:left; align-content:start; padding:.9em 1em; border:1.5px solid var(--fg); border-radius:var(--r-lg); background:var(--bg); position:relative}
.savebtn:hover{background:var(--fg); color:var(--bg)}
.savebtn b{font-family:var(--font-display); font-weight:400; font-size:1.3em; letter-spacing:-.02em}
.savebtn span{font-size:.78em; color:inherit; opacity:.8}
.savebtn i{position:absolute; top:.8em; right:1em; font-style:normal; font-size:.7em; opacity:.6}
.vlist{display:grid; gap:.3em}
.vrow2{display:flex; justify-content:space-between; align-items:center; gap:.8em; padding:.5em .6em; border:1px solid var(--line); border-radius:var(--r-md); font-size:.85em}
.filebtn{position:relative; overflow:hidden; cursor:pointer}
.filebtn input{position:absolute; inset:0; opacity:0; cursor:pointer}
.dotst{display:inline-block; width:.6em; height:.6em; border-radius:50%; background:var(--faint); margin-right:.3em}
.dotst.ok{background:var(--ok)}

/* ---------- Opfrissers ---------- */
.lv-visie{background:var(--fg); color:var(--bg)} .lv-impact{background:var(--toc-impact); color:var(--toc-ink)} .lv-uitkomst{background:var(--toc-uitkomst); color:var(--toc-ink)} .lv-output{background:var(--toc-output); color:var(--toc-ink)} .lv-strategie{background:var(--toc-strategie); color:var(--toc-ink); box-shadow:inset 0 0 0 1px #E9DFC2}
.of-split{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:2.4em; align-items:start}
.qcard{display:grid; grid-template-columns:2.2em minmax(0,1fr); gap:.6em; align-items:center; padding:.8em 1em; border-radius:var(--r-lg); background:var(--panel)}
.qcard .n{display:grid; place-items:center; width:2em; height:2em; border-radius:50%; background:var(--fg); color:var(--bg); font-size:.85em}
.lagen{display:grid; gap:.5em}
.laag{display:grid; grid-template-columns:minmax(9em,12em) minmax(0,1.6fr) minmax(0,1fr); gap:1.2em; align-items:center; min-height:3.6em; transition:opacity .2s}
.laag .ln{display:grid; gap:.1em; padding:.6em .9em; border-radius:var(--r-md); align-self:stretch; align-content:center}
.laag .ln b{font-family:var(--font-display); font-weight:400; font-size:1.25em}
.laag .ln span{font-size:.68em; text-transform:uppercase; letter-spacing:.09em; opacity:.75}
.laag .lq{display:grid; gap:.2em}
.laag .lv{display:grid; gap:.15em; padding-left:1em; border-left:2px solid var(--line)}
.laag.off .lq,.laag.off .lv{visibility:hidden}
.laag.off .ln{opacity:.25}
.rings{display:grid; place-items:center}
.rings svg{width:min(100%,520px); height:auto}
.rings path{cursor:pointer; transition:opacity .2s}
.classic[data-scope="alles"] .cbox{padding:.22em .55em; font-size:.7em}
.classic[data-scope="alles"] .cl-boxes{gap:.28em}
.rings .rt{font-family:var(--font-display); font-size:17px; fill:#111; cursor:pointer}
.rings .rs{font-size:10.5px; fill:#111; opacity:.75; cursor:pointer}
.sfcard{display:grid; gap:.35em; text-align:left; transition:border-color .15s}
.sfcard.on{border-color:var(--fg); box-shadow:0 0 0 2px var(--fg) inset}
.keten{display:grid; gap:.25em; justify-items:stretch}
.kstap{display:grid; gap:.2em; transition:opacity .2s}
.kstap.off{opacity:.3}
.kbox{display:grid; gap:.1em; padding:.7em .9em; border-radius:var(--r-md)}
.kbox b{font-family:var(--font-display); font-weight:400; font-size:clamp(18px,1.45vw,30px); letter-spacing:-.02em; line-height:1.1}
.karrow{text-align:center; font-size:1.2em; line-height:1; color:var(--muted)}
.aanname{display:grid; gap:.1em; margin-top:.5em; padding:.7em .9em; border-radius:var(--r-md); border:2px dashed var(--attn); background:var(--attn-soft)}
.aanname b{font-family:var(--font-display); font-weight:400; font-size:clamp(17px,1.3vw,26px); letter-spacing:-.01em}
.aanname.off{opacity:.3}
.quiz{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8em}
.quiz.q5{grid-template-columns:repeat(5,minmax(0,1fr))}
.qz{display:grid; gap:.5em; align-content:start; padding:.8em .9em; border:1.5px solid var(--line); border-radius:var(--r-lg); background:var(--bg)}
.qz.ok{border-color:var(--ok); background:var(--ok-soft)}
.qz.nok{border-color:var(--attn); background:var(--attn-soft)}
.qz .qt{font-family:var(--font-display); font-size:clamp(16px,1.2vw,24px); letter-spacing:-.01em; line-height:1.15}
.qbtns{display:flex; flex-wrap:wrap; gap:.3em}
.qb{font-size:.72em; padding:.25em .7em; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--bg)}
.qb:hover{border-color:var(--fg)}
.qb.pick{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.qb.right{box-shadow:0 0 0 2px var(--ok-ink)}
.qr{line-height:1.35}
.mcard2{display:grid; gap:.5em; align-content:start; text-align:left; min-height:9em}
.mcard2.on{border-color:var(--fg)}
.soort{justify-self:start; padding:.15em .7em; border-radius:var(--r-pill); font-size:.78em; color:#111}
.soort.s-pi{background:var(--toc-output)} .soort.s-ri{background:var(--toc-impact)} .soort.s-kpi{background:var(--accent)}
.ketenh{display:flex; align-items:stretch; gap:.6em; flex-wrap:wrap}
.kh{flex:1 1 12em; display:grid; gap:.25em; align-content:start; padding:.8em .9em; border-radius:var(--r-lg); background:var(--panel)}
.kh.on{background:var(--fg); color:var(--bg)}
.kh.on .muted{color:var(--faint)}
.karr{align-self:center; font-size:1.3em; color:var(--muted)}
.bigcount{display:flex; align-items:baseline; gap:.5em; border-top:2px solid var(--fg); padding-top:.4em}
.bigcount b{font-family:var(--font-display); font-weight:400; font-size:clamp(36px,3.4vw,72px); line-height:1}
.bigcount span{font-size:.8em; color:var(--muted)}
.scale{display:flex; align-items:center; gap:.6em; flex-wrap:wrap}
.scale .sd{display:grid; place-items:center; width:2.4em; height:2.4em; border-radius:50%; border:1.5px solid var(--fg); font-family:var(--font-display)}
.vn{display:grid; gap:.2em; text-align:left}
.vn.on{border-color:var(--fg)}

@media (max-width: 1100px){
  .split,.kop,.prio,.mp,.doel-grid,.start-grid{grid-template-columns:minmax(0,1fr)}
  .scr.fit{height:auto} .scr.fit .grow{flex:none}
  .split>*,.kop>*,.prio>*,.mp>*,.tocwrap{overflow:visible}
  .detail{border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:1em}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .of-split{grid-template-columns:minmax(0,1fr)}
  .quiz,.quiz.q5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .savegrid{grid-template-columns:minmax(0,1fr)}
  .laag{grid-template-columns:minmax(7em,9em) minmax(0,1fr)}
  .laag .lv{grid-column:2}
}
@media (max-width: 760px){
  body{font-size:15px}
  .top{flex-wrap:wrap; gap:.5em}
  .brand .t,.sched,.clock{display:none}
  .blockpill{order:3; flex-basis:100%; justify-content:flex-start}
  .tools .tbtn.opt{display:none}
  .grid2,.grid3,.grid4,.canvas,.addgrid,.agenda2{grid-template-columns:minmax(0,1fr)}
  .stel{grid-template-columns:1fr 1fr; grid-template-areas:"mid mid" "l r"}
  .stel .stel-mid{grid-area:mid} .stel .eens{grid-area:l} .stel .oneens{grid-area:r}
  .toc{grid-template-columns:minmax(0,1fr); grid-template-rows:none}
  .toc .rail,.toc .sfeer,.toc .vlbl{display:none}
  .toc .visie{grid-column:1}
  .trow{flex-wrap:wrap} .trow .box{flex-basis:46%!important}
  .trow.bib{border-left:0; padding-left:0; border-top:2px dashed var(--fg); padding-top:.5em}
  .sgrid.cc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ag{grid-template-columns:3.6em minmax(0,1fr)} .ag .vm,.ag .du{display:none}
  .rung{grid-template-columns:5.5em minmax(0,1fr) 2.2em}
  .daybar .segs{display:none}
  .quiz,.quiz.q5{grid-template-columns:minmax(0,1fr)}
  .cl-grid,.cl-sferen{column-gap:18px}
  .cbox{grid-template-columns:minmax(0,1fr); gap:.1em; font-size:.68em}
  .cbox .badge{position:absolute; top:2px; right:2px}
  .tools .tbtn.save{padding-inline:.5em}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }