/* =====================================================================
   style.css — huisstijl. Kleuren staan bovenaan als variabelen,
   zodat je ze op één plek kunt aanpassen aan jullie merk.
   ===================================================================== */
:root{
  --paper:#F2F6FA; --grid:rgba(46,111,181,.06); --ink:#1B2A4A; --muted:#58647c; --card:#fff; --line:#D6DFEA; --soft:#E8EEF6;
  --accent:#F2B535; --accent-dark:#b8841a; --blue:#2E6FB5; --good:#2F8F5B; --goodbg:#E3F3EA; --bad:#C0392B; --badbg:#FBE6E3;
  --radius:14px; --shadow:0 1px 0 rgba(27,42,74,.05),0 8px 24px rgba(27,42,74,.07);
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#121826;--grid:rgba(120,160,220,.05);--ink:#E9EEF6;--muted:#a2adc2;--card:#1B2334;--line:#2E3950;--soft:#232d42;--goodbg:#193a2a;--badbg:#46201c;--shadow:0 8px 24px rgba(0,0,0,.25)}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:80px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--ink);font:17px/1.55 "Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:26px 26px}
h1,h2,h3{font-family:"Baloo 2","Trebuchet MS",sans-serif;line-height:1.15;margin:0 0 .4em}
h1{font-size:clamp(30px,5vw,46px);font-weight:800}
h2{font-size:clamp(22px,3vw,28px)}
h3{font-size:21px}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1:focus{outline:none}
button,input,textarea{font:inherit;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.wrap.narrow{max-width:760px}
main{flex:1;padding:28px 0 90px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;z-index:99;background:#fff;padding:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.demobar{background:#7A5AA6;color:#fff;text-align:center;font-size:14px;padding:6px 12px}
/* header */
.top{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff}
@media (prefers-color-scheme:dark){.top{background:#0c111c}}
.toprow{display:flex;align-items:center;gap:16px;height:62px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:800 21px "Baloo 2",sans-serif}
.brand .mark{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#1B2A4A;display:grid;place-items:center}
.nav{margin-left:auto;display:flex;gap:18px;align-items:center}
.nav a{color:#dfe6f2;text-decoration:none;font-weight:700}
.nav a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--accent)}
.nav a.btn{color:#1B2A4A;background:var(--accent)}
.foot{border-top:1px solid var(--line);padding:18px 0;color:var(--muted);font-size:14px;background:var(--card)}
/* bouwstenen */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.narrow>.card+.card,.narrow>.card+button{margin-top:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:11px;border:none;background:var(--blue);color:#fff;font-weight:700;text-decoration:none;cursor:pointer}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn.warm{background:var(--accent);color:#1B2A4A;box-shadow:0 4px 0 var(--accent-dark)}
.btn.danger{background:var(--bad)}
.btn.big{min-height:54px;font-size:19px;padding:0 24px}
.btn.small{min-height:36px;padding:0 12px;font-size:15px}
.linkbtn{background:none;border:none;color:var(--blue);text-decoration:underline;cursor:pointer;padding:4px 0}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.row.between{justify-content:space-between}.row.center{justify-content:center}
.stack{display:flex;flex-direction:column;gap:12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:12px 0}
.muted{color:var(--muted)}.small{font-size:14px}
.eyebrow{font-weight:700;color:var(--blue);margin:0 0 6px;font-size:15px;letter-spacing:.02em}
.badge{display:inline-block;font-size:13px;font-weight:700;border-radius:20px;padding:4px 10px;background:var(--soft);color:var(--muted)}
.badge.ok{background:var(--goodbg);color:var(--good)}
.note{border-left:5px solid var(--accent);background:rgba(242,181,53,.14);border-radius:8px;padding:10px 14px;margin:12px 0}
.note.warn{border-color:var(--bad);background:var(--badbg)}
.hint{color:var(--muted);font-size:15px;margin:8px 0 0}
.bar{height:10px;background:var(--soft);border-radius:6px;overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;background:var(--good);border-radius:6px;transition:width .4s}
.loading{text-align:center;color:var(--muted);padding:60px 0}
/* formulieren */
label{font-weight:700}
input[type=email],input[inputmode],input[readonly],textarea{width:100%;border:2px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--card)}
textarea{min-height:90px;resize:vertical}
fieldset{border:none;padding:0;margin:0}
legend{font-weight:700;margin-bottom:8px}
.choice{display:flex;gap:10px;flex-wrap:wrap}
.choice label{font-weight:400;display:flex;gap:8px;align-items:center;border:2px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer}
.choice label:has(input:checked){border-color:var(--blue);background:var(--soft)}
.check{font-weight:400;display:flex;gap:10px;align-items:flex-start}
.check input{margin-top:5px;width:18px;height:18px;flex:none}
.auth{max-width:520px;margin:0 auto}
/* home */
.hero{padding:36px 0 30px}
.hero .lead{font-size:20px;color:var(--muted);max-width:60ch}
.ic{font-size:34px}
.split{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start;margin-top:30px}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.steps{padding-left:22px}.steps li{margin-bottom:10px}
.big-price{font:800 44px/1 "Baloo 2",sans-serif;margin:6px 0}
.checks{list-style:none;padding:0}.checks li{padding-left:28px;position:relative;margin:6px 0}
.checks li::before{content:"✓";position:absolute;left:4px;color:var(--good);font-weight:700}
/* dashboard + cursus */
.course-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.card.soon{border-style:dashed;box-shadow:none}
.head-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.crumbs{font-size:15px;color:var(--muted);margin-bottom:12px}
.group{margin-top:26px;font-size:22px}
.dom{text-decoration:none;color:inherit;display:block;transition:transform .15s,border-color .15s}
a.dom:hover{transform:translateY(-2px);border-color:var(--blue)}
.dom .code{font:800 26px "Baloo 2",sans-serif;color:var(--blue)}
.dom h3{font-size:18px;margin:2px 0}
.dom.off{opacity:.6;box-shadow:none}
.items{list-style:none;padding:0;margin:16px 0}
.item{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:8px;text-decoration:none;color:inherit}
.item:hover{border-color:var(--blue)}
.item .k{font-size:24px}.item .t{flex:1;display:flex;flex-direction:column}.item small{color:var(--muted)}
.item.locked{opacity:.75}
.cta{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
/* inhoud */
.content .q{font-size:20px;font-weight:700}
.opts{display:grid;gap:8px;margin:12px 0}
.opt{display:flex;gap:10px;text-align:left;border:2px solid var(--line);background:var(--card);border-radius:10px;padding:11px 14px;cursor:pointer}
.opt .l{font:800 18px "Baloo 2",sans-serif;color:var(--blue);min-width:18px}
.opt.ok{border-color:var(--good);background:var(--goodbg)}.opt.no{border-color:var(--bad);background:var(--badbg)}
.fb{border-radius:10px;padding:10px 14px;margin-top:8px}.fb.ok{background:var(--goodbg)}.fb.no{background:var(--badbg)}
.videobox{aspect-ratio:16/9;background:#1F2A44;color:#fff;border-radius:12px;display:grid;place-content:center;text-align:center;margin-bottom:14px}
.videobox span{font-size:50px}
.bron{border:2px solid var(--ink);border-radius:4px;padding:12px 16px;margin-bottom:14px}
.bron>b{display:inline-block;background:var(--ink);color:var(--card);padding:0 8px;border-radius:3px;margin-bottom:6px}
.cevraag{margin-bottom:14px}
.pt{background:var(--ink);color:var(--card);border-radius:6px;padding:0 7px;font-weight:700;font-size:14px}
.paywall{text-align:center}.center{text-align:center}
.prose p,.prose li{max-width:70ch}
.linkbox{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* AI */
.aiBtn{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--accent);color:#1B2A4A;border:none;border-radius:40px;min-height:52px;padding:0 20px;font:800 18px "Baloo 2",sans-serif;box-shadow:0 5px 0 var(--accent-dark),0 10px 24px rgba(0,0,0,.2);cursor:pointer}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:50;background:var(--card);border-left:1px solid var(--line);box-shadow:-10px 0 30px rgba(0,0,0,.15);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .3s;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.open{transform:none}
.dhead{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}.dhead h2{flex:1;margin:0;font-size:22px}
.dhead button{background:none;border:none;font-size:28px;color:var(--muted);width:44px;height:44px;cursor:pointer}
.msgs{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:90%;border-radius:14px;padding:10px 14px;font-size:16px}
.msg p{margin:0 0 6px}.msg p:last-child{margin:0}.msg ul{margin:4px 0;padding-left:20px}
.msg.u{align-self:flex-end;background:var(--blue);color:#fff}.msg.a{align-self:flex-start;background:var(--soft)}
.dots::after{content:"…"}
.aiq{font-size:13px;color:var(--muted);padding:0 16px;margin:0 0 6px}
.dform{display:flex;gap:8px;padding:10px 16px 14px;border-top:1px solid var(--line)}.dform textarea{min-height:48px}
/* meldingen */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;width:min(92vw,460px)}
.toast{background:var(--ink);color:#fff;border-radius:10px;padding:10px 16px;box-shadow:0 8px 20px rgba(0,0,0,.2);transition:opacity .4s}
.toast.bad{background:var(--bad)}.toast.ok{background:var(--good)}.toast.out{opacity:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* =========================== BEHEER =========================== */
.adminbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--ink);color:#fff;border-radius:12px;padding:8px 14px;margin-bottom:20px}
.adminlabel{font:800 18px "Baloo 2",sans-serif}
.adminbar nav{display:flex;gap:4px;flex-wrap:wrap}
.adminbar nav a{color:#dfe6f2;text-decoration:none;font-weight:700;padding:6px 12px;border-radius:8px}
.adminbar nav a[aria-current="page"]{background:rgba(255,255,255,.14);color:#fff}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0 18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column}
.stat span{color:var(--muted);font-size:14px;font-weight:700}.stat b{font:800 32px/1.1 "Baloo 2",sans-serif;margin:4px 0}.stat small{color:var(--muted)}
.links{padding-left:18px}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{font-size:13px;color:var(--muted)}
.nowrap{white-space:nowrap}
.alist{list-style:none;padding:0;margin:14px 0}
.alist li{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-bottom:6px;flex-wrap:wrap}
.alist li.dragging{opacity:.5;border-style:dashed}
.alist .grip{cursor:grab;color:var(--muted);font-size:18px;user-select:none}
.alist .grow{flex:1;min-width:180px;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.alist .grow small{color:var(--muted)}
.alist .code{font:800 20px "Baloo 2",sans-serif;color:var(--blue);min-width:38px}
.alist .kind{font-size:20px}
.mv{display:inline-flex;flex-direction:column}
.mv button{border:1px solid var(--line);background:var(--card);border-radius:4px;font-size:11px;line-height:1;padding:2px 5px;cursor:pointer}
.acts{display:flex;gap:4px}
.switch{display:inline-flex;align-items:center;gap:6px;font-weight:400;font-size:14px;cursor:pointer}
.switch input{appearance:none;width:36px;height:20px;border-radius:20px;background:var(--line);position:relative;cursor:pointer;transition:background .2s;margin:0}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked{background:var(--good)}.switch input:checked::after{left:18px}
.addmenu{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;min-width:200px}
.menu button{background:none;border:none;text-align:left;padding:9px 12px;border-radius:8px;cursor:pointer;font-weight:700}
.menu button:hover{background:var(--soft)}
dialog.modal{border:none;border-radius:16px;padding:22px;width:min(520px,94vw);background:var(--card);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog.modal::backdrop{background:rgba(16,22,36,.5)}
dialog label,.editor label{display:flex;flex-direction:column;gap:4px}
dialog input,dialog select,.editor input:not([type=radio]):not([type=checkbox]),.editor select,.editor textarea,.searchrow input{border:2px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--card);font-weight:400;width:100%}
dialog label.check{flex-direction:row}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.danger-zone{border:1px solid var(--badbg);border-radius:10px;padding:8px 12px}.danger-zone summary{cursor:pointer;color:var(--bad);font-weight:700}
.editor-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 14px;position:sticky;top:62px;z-index:10;background:var(--paper);padding:8px 0}
.editor-top .grow{flex:1;min-width:220px}
.title-in{font:800 26px "Baloo 2",sans-serif;border:2px solid transparent;border-radius:10px;padding:4px 10px;width:100%;background:transparent}
.title-in:hover,.title-in:focus{border-color:var(--line);background:var(--card)}
.editor{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}
.pvcol{position:sticky;top:130px}
@media (max-width:980px){.editor{grid-template-columns:1fr}.pvcol{position:static}}
.optrow{display:flex;gap:8px;align-items:center}.optrow input[type=radio]{width:20px;height:20px;flex:none}
.qblock{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.pts{width:60px!important;display:inline-block}.inline{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:6px}
.rte{border:2px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.rte .tb{display:flex;flex-wrap:wrap;gap:2px;padding:6px;border-bottom:1px solid var(--line);background:var(--soft)}
.rte .tb button{border:none;background:transparent;border-radius:6px;padding:5px 8px;cursor:pointer;font-size:14px}
.rte .tb button:hover{background:var(--card)}
.rte .ed{min-height:220px;padding:12px 14px;outline:none}.rte.small .ed{min-height:80px}
.rich img{max-width:100%;height:auto;border-radius:8px}
.rich table{border-collapse:collapse;margin:10px 0;display:block;overflow-x:auto}
.rich th,.rich td{border:1px solid var(--line);padding:6px 10px;text-align:left}.rich th{background:var(--soft)}
.qr{width:200px;height:200px;background:#fff;padding:8px;border-radius:10px}
.searchrow{display:flex;gap:8px;margin:10px 0}
.ulist{list-style:none;padding:0;margin:0}
.ulist button{width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);padding:9px 4px;cursor:pointer;display:flex;flex-direction:column}
.ulist button:hover{background:var(--soft)}.ulist small{color:var(--muted)}
.numrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}.numrow input{max-width:180px}
.card.demo{border-style:dashed}
.menu[hidden]{display:none}
.editor label.switch,.editor .choice label,dialog label.check{flex-direction:row}
.q.rich{font-weight:400}.q.rich p{margin:0 0 8px}
.admin form label:not(.check):not(.switch){display:flex;flex-direction:column;gap:4px}
.admin form select,.admin form input[type=date]{border:2px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--card);font-weight:400;width:100%}
.admin form.stack>.btn{align-self:flex-start}