/* QuizX Kiosk Studio, alle Studio-stijl. v5 (pakket V, 6 november 2026): rust boven volledigheid in beeld.
   Witte grond, kaarten met een dunne zachte rand en 24 px binnenruimte, 32 px tussen blokken, koppen zonder gekleurde band,
   basisletter 16 px, paginakop 28 px, iconen 28 px (20 px in knoppen en cellen), alles wat je aanklikt minstens 44 px hoog,
   tabellen met regels van 48 px en alleen een lijn tussen de rijen. Plum is het accent, goud alleen voor actief en focus,
   kleur verder alleen in beeld, iconen en statuspunten. Maten komen uit css/tokens.css (--v5-*). */

/* ---------- balk (64 px, een rij) ---------- */
#bar{position:sticky;top:0;z-index:50;background:var(--n0);border-bottom:1px solid var(--lijn-zacht)}
.topbar{height:64px;display:flex;align-items:center;gap:24px;padding:0 32px}
.merk{display:flex;align-items:center;gap:12px;font:600 18px var(--font-kop);letter-spacing:-.01em;white-space:nowrap;border:0;background:none;padding:0;color:var(--plum);min-height:var(--v5-tik)}
.merk .mark{width:32px;height:32px;border:1.5px solid var(--gold);border-radius:6px;display:grid;place-items:center;background:var(--plum);color:#f1dc9a;font:600 16px var(--font-kop)}
.merk .tag{font:600 12px var(--font-tekst);color:var(--plum-500);background:var(--plum-50);border-radius:6px;padding:3px 8px;text-transform:uppercase;letter-spacing:.1em;margin-left:4px}
.kruimel{display:flex;align-items:center;gap:8px;color:var(--n500);font-size:15px;min-width:0;white-space:nowrap}
.kruimel b{font-weight:600;color:var(--n900)}
.kruimel .ic{width:16px;height:16px;color:var(--n400)}
.kruimel button{border:0;background:none;padding:0 6px;min-height:var(--v5-tik);border-radius:var(--r);color:inherit;font:inherit}
.kruimel button:hover{background:var(--n50);color:var(--n900)}
.zoek{margin-left:auto;position:relative;display:flex;align-items:center;gap:10px;border:1px solid var(--n200);border-radius:var(--r);padding:0 14px;height:var(--v5-tik);width:360px;color:var(--n500);font-size:15px;background:var(--n0)}
.zoek input{flex:1;min-width:0;border:0;background:none;outline:none;height:40px;font-size:15px;color:var(--n900)}
.zoek input::placeholder{color:var(--n500)}
.zoek kbd{font:12px var(--font-mono);border:1px solid var(--n200);border-radius:4px;padding:2px 6px;background:var(--n50);color:var(--n500)}
.zoek .ic{width:var(--v5-icoon-klein);height:var(--v5-icoon-klein)}
.zoek:focus-within{border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-100)}
.zoek-uit{position:absolute;left:-1px;right:-1px;top:calc(100% + 8px);background:var(--n0);border:1px solid var(--n200);border-radius:var(--r2);box-shadow:0 12px 32px rgba(20,10,30,.12);z-index:60;padding:8px;max-height:480px;overflow:auto}
.zoek-uit .lab{font:600 13px var(--font-tekst);color:var(--n500);padding:12px 12px 4px}
.zoek-uit button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:0 12px;min-height:var(--v5-tik);border-radius:var(--r);text-align:left;color:var(--n900);font-size:15px}
.zoek-uit button .ic{color:var(--n500)}
.zoek-uit button span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zoek-uit button small{font:13px var(--font-mono);color:var(--n500)}
.zoek-uit button:hover,.zoek-uit button.actief{background:var(--n50)}
.zoek-uit .leeg{padding:16px 12px;color:var(--n500);font-size:15px}
.versie{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--n700);white-space:nowrap;border:0;background:none;padding:0 10px;border-radius:var(--r);min-height:var(--v5-tik)}
.versie:hover{background:var(--n50)}
.versie .mono{font-weight:500}
.dot{width:10px;height:10px;border-radius:50%;background:var(--n300);display:inline-block;flex:none}
.dot.live,.dot.ok{background:var(--ok)}.dot.concept,.dot.warn{background:var(--warn)}.dot.err,.dot.dan{background:var(--err)}.dot.gew,.dot.info{background:var(--info)}
.avatar{flex:none;width:44px;height:44px;border-radius:50%;background:var(--plum-50);color:var(--plum);font:600 14px var(--font-tekst);display:grid;place-items:center;border:0;padding:0}
.avatar:hover{box-shadow:0 0 0 2px var(--n0),0 0 0 4px var(--plum-100)}
.menu{position:absolute;right:32px;top:calc(100% + 8px);background:var(--n0);border:1px solid var(--n200);border-radius:var(--r2);box-shadow:0 12px 32px rgba(20,10,30,.12);z-index:60;padding:8px;min-width:300px}
.menu .wie{padding:12px 14px 14px;border-bottom:1px solid var(--lijn-zacht);margin-bottom:6px}
.menu .wie b{display:block;font-size:16px}
.menu .wie span{font-size:14px;color:var(--n500)}
.menu .lab{font:600 13px var(--font-tekst);color:var(--n500);padding:12px 14px 4px}
.menu button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:0 14px;min-height:var(--v5-tik);border-radius:var(--r);text-align:left;font-size:15px;color:var(--n900)}
.menu button .ic{color:var(--n500);width:var(--v5-icoon-klein);height:var(--v5-icoon-klein)}
.menu button:hover{background:var(--n50)}
.menu button.actief{background:var(--plum-50);color:var(--plum)}
.menu .scheiding{border-top:1px solid var(--lijn-zacht);margin:6px 0}
.menu .segm{margin:6px 14px 10px}
.viewas{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--warn-100);color:var(--warn);padding:10px 32px;font-size:15px}
.viewas b{color:var(--n900)}
.viewas .btn{margin-left:auto}

/* kioskbalk (prototype, alleen in de kioskweergave) */
.kioskbar{height:52px;display:flex;align-items:center;gap:16px;padding:0 16px;background:#1b1229;color:#f1edf7;font-size:14px}
.kioskbar b{font-family:var(--font-kop);font-weight:600;font-size:15px}
.kioskbar .btn{height:36px;padding:0 12px;font-size:13px;background:transparent;color:#f1edf7;border-color:#4a3a6a}
.kioskbar .segm button{height:34px;min-width:0;padding:0 10px;font-size:13px}
.kioskbar .ic{width:18px;height:18px}
.kioskbar .btn.pri{background:var(--gold);color:#1b1229;border-color:var(--gold)}
.kioskbar .spacer{flex:1}
.kioskbar .note{color:#b9a9d4}

/* ---------- raamwerk ---------- */
#studio{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:calc(100vh - var(--barH))}
.rail{border-right:1px solid var(--lijn-zacht);background:var(--n0);display:flex;flex-direction:column;align-items:stretch;padding:12px 0;position:sticky;top:var(--barH);height:calc(100vh - var(--barH));overflow:auto;scrollbar-width:none}
.rail a,.rail button.post{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;min-height:64px;color:var(--n500);text-decoration:none;font:500 12px var(--font-tekst);letter-spacing:0;border:0;background:none;border-left:3px solid transparent;border-right:3px solid transparent;width:100%}
.rail .post .ic{width:var(--v5-icoon);height:var(--v5-icoon)}
.rail .post:hover{color:var(--n900);background:var(--n50)}
.rail .post.actief{color:var(--plum);border-left-color:var(--gold);font-weight:600}
/* kleur zit in de iconen: Inhoud plum, Uitvoering info, Beheer neutraal; de actieve post is altijd plum */
.rail .post[data-v="quiz"] .ic,.rail .post[data-v="bank"] .ic,.rail .post[data-v="media"] .ic,.rail .post[data-v="brands"] .ic,.rail .post[data-v="themes"] .ic,.rail .post[data-v="texts"] .ic{color:var(--plum-500)}
.rail .post[data-v="events"] .ic,.rail .post[data-v="devices"] .ic,.rail .post[data-v="prizes"] .ic,.rail .post[data-v="leads"] .ic{color:var(--info)}
.rail .post[data-v="clients"] .ic,.rail .post[data-v="orgs"] .ic,.rail .post[data-v="team"] .ic,.rail .post[data-v="settings"] .ic{color:var(--n500)}
.rail .post[data-v="dashboard"] .ic{color:var(--plum)}
.rail .post.actief .ic{color:var(--plum)}
.rail .groep{font:600 11px var(--font-tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--n400);text-align:center;padding:20px 0 6px}
.rail .onder{margin-top:auto;padding-top:8px}
.s-main{min-width:0;padding:32px 40px 64px;display:flex;flex-direction:column;gap:var(--blok);max-width:1600px;width:100%;margin:0 auto}
/* de editor (Quizzen, Vragenbank) vult de hele breedte */
.s-main:has(>.s1){max-width:none;margin:0;padding:0}

/* demo-lade: de prototypeknoppen, ingeklapt onderin de zijbalk */
.lade{position:fixed;left:calc(var(--rail) + 12px);bottom:12px;width:320px;background:var(--n0);border:1px solid var(--n200);border-radius:var(--r2);box-shadow:0 12px 32px rgba(20,10,30,.14);z-index:58;padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.lade header{display:flex;align-items:center;gap:8px;font:600 15px var(--font-kop);color:var(--plum);padding-bottom:8px;border-bottom:1px solid var(--lijn-zacht)}
.lade header .note{font-weight:400}
.lade header button{margin-left:auto;border:0;background:none;color:var(--n500);padding:0;min-width:var(--v5-tik);min-height:var(--v5-tik)}
.lade .rijtje{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:center}
.lade label{color:var(--n700)}
.lade select{height:var(--v5-tik);border:1px solid var(--n200);border-radius:var(--r);background:var(--n0);padding:0 10px;font-size:14px;width:100%;min-width:0}
.lade .sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;min-height:var(--v5-tik)}
.lade .sw i{width:40px;height:24px;border-radius:999px;background:var(--n300);position:relative;transition:background .15s}
.lade .sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.lade .sw.on i{background:var(--ok)}
.lade .sw.on i::after{transform:translateX(16px)}
.lade .knoppen{display:flex;gap:8px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--lijn-zacht)}

/* ---------- paginakop: de grootste letter op de pagina, geen lijn eronder, lucht doet het werk ---------- */
.s-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:0}
.s-head .titel{display:flex;align-items:center;gap:12px}
.s-head h1{font:600 var(--v5-kop)/1.15 var(--font-kop);letter-spacing:-.015em;color:var(--plum)}
#studio h1{color:var(--plum)} /* ook de koppen die een pagina zelf zet (editor) */
.s-head p{margin:8px 0 0;color:var(--n500);font-size:16px;max-width:760px;line-height:1.55}
.s-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.helpbtn{width:var(--v5-tik);height:var(--v5-tik);border-radius:50%;border:1px solid var(--lijn-zacht);background:var(--n0);color:var(--n500);font:600 14px var(--font-mono);cursor:pointer;padding:0;line-height:1;display:grid;place-items:center}
.helpbtn:hover{border-color:var(--plum);color:var(--plum)}
.ro-note{background:var(--info-100);color:var(--n900);border-radius:var(--r2);padding:14px 18px;font-size:15px}
.ro button:not(.helpbtn),.ro input,.ro select{pointer-events:none;opacity:.55}

/* ---------- knoppen: 44 px, een primaire per scherm in plum, de rest wit of zonder rand ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--v5-tik);padding:0 18px;border:1px solid var(--n200);background:var(--n0);border-radius:var(--r);font-weight:500;font-size:15px;color:var(--n900);white-space:nowrap}
.btn:hover{background:var(--n50);border-color:var(--n300)}
.btn.pri{background:var(--plum);border-color:var(--plum);color:var(--primary-ink);font-weight:600}
.btn.pri:hover{background:var(--plum-700);border-color:var(--plum-700)}
.btn.stil{border-color:transparent;background:none;color:var(--n700)}
.btn.stil:hover{background:var(--n50)}
.btn.sm{height:var(--v5-tik);padding:0 14px;font-size:14px}
.btn.dan{color:var(--err);border-color:var(--err-100)}
.btn.ic-alleen{width:var(--v5-tik);padding:0;justify-content:center}
.btn.ic-alleen.sm{width:var(--v5-tik)}
.btn[disabled]{opacity:.45;cursor:default}
.btn .ic{color:currentColor;width:var(--v5-icoon-klein);height:var(--v5-icoon-klein)}
.segm{display:inline-flex;border:1px solid var(--n200);border-radius:var(--r);overflow:hidden;background:var(--n0)}
.segm button{border:0;background:none;padding:0 16px;min-width:var(--v5-tik);height:var(--v5-tik);font-size:14px;color:var(--n700);border-right:1px solid var(--lijn-zacht);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.segm button:last-child{border-right:0}
.segm button:hover{background:var(--n50)}
.segm button.actief,.segm button.on{background:var(--plum-50);color:var(--plum);font-weight:600}
.segm .ic{width:var(--v5-icoon-klein);height:var(--v5-icoon-klein)}

/* ---------- kaart, tegel, pil ---------- */
.card{background:var(--n0);border:1px solid var(--lijn-zacht);border-radius:var(--r2);padding:var(--kp-y) var(--kp-x);box-shadow:none}
.card.act{border-color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum)}
.card.dim{opacity:.6}
.card h2{font:600 var(--v5-kop-2) var(--font-kop);color:var(--n900);margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;letter-spacing:-.01em;line-height:1.3}
.card h2 .note{font-family:var(--font-tekst);font-weight:400;color:var(--n500);font-size:14px}
.card>h2:first-child{margin:0 0 20px;min-height:var(--v5-tik)}
.card h3{font:600 15px var(--font-tekst);color:var(--n700);margin:0 0 12px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.tile{background:var(--n0);border:1px solid var(--lijn-zacht);border-radius:var(--r2);padding:20px 22px;text-align:left;display:flex;flex-direction:column;gap:6px;color:var(--n900)}
button.tile:hover{border-color:var(--plum-500);background:var(--n50)}
.tile .n{font:500 34px/1.1 var(--font-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--plum)}
.tile .n small{font-size:15px;color:var(--n500)}
.tile .l{font:600 14px var(--font-tekst);color:var(--n500)}
.tile .d{font-size:14px;color:var(--n700);display:flex;align-items:center;gap:8px}
.tile .d.ok{color:var(--ok)}.tile .d.warn{color:var(--warn)}.tile .d.dan{color:var(--err)}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:14px;padding:4px 12px 4px 10px;border-radius:999px;border:1px solid var(--n200);color:var(--n700);background:var(--n0);white-space:nowrap;line-height:1.4}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--n400);flex:none}
.pill.ok{background:var(--ok-100);border-color:transparent;color:var(--ok)}.pill.ok i{background:var(--ok)}
.pill.warn{background:var(--warn-100);border-color:transparent;color:var(--warn)}.pill.warn i{background:var(--warn)}
.pill.dan,.pill.err{background:var(--err-100);border-color:transparent;color:var(--err)}.pill.dan i,.pill.err i{background:var(--err)}
.pill.info{background:var(--info-100);border-color:transparent;color:var(--info)}.pill.info i{background:var(--info)}
.pill.acc{background:var(--plum-50);border-color:transparent;color:var(--plum)}.pill.acc i{background:var(--plum)}
.tag{display:inline-flex;align-items:center;font:500 13px var(--font-tekst);color:var(--n700);background:var(--n100);border-radius:6px;padding:3px 8px;white-space:nowrap}
.note{font-size:14px;color:var(--n500)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--blok)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--blok)}
.kv{display:grid;grid-template-columns:180px 1fr;gap:12px 24px;font-size:15px;margin:0}
.kv dt{color:var(--n500)}
.kv dd{margin:0;min-width:0}
.kv dd .pill{white-space:normal}
.empty{padding:56px 24px;text-align:center;color:var(--n500);display:flex;flex-direction:column;align-items:center;gap:14px;font-size:16px;line-height:1.55}
.empty b{color:var(--plum);font:600 20px var(--font-kop)}
.empty>.ic{width:40px;height:40px;stroke-width:1.25;color:var(--plum-500)}
.chk{display:flex;flex-direction:column;gap:8px}
.chk div{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--r);background:var(--n50);font-size:15px}
.chk div.bad{background:var(--err-100);color:var(--err)}
.chk div.warn{background:var(--warn-100);color:var(--warn)}
.chk div.ok{color:var(--ok)}
.chk button{text-align:left;cursor:pointer;color:inherit;font:inherit;width:100%}
.chk .ic{flex:none;margin-top:0;width:var(--v5-icoon-klein);height:var(--v5-icoon-klein)}
.meter{height:8px;border-radius:999px;background:var(--n100);overflow:hidden}
.meter i{display:block;height:100%;background:var(--plum)}
.bars{display:flex;align-items:flex-end;gap:8px;height:160px;padding-top:12px;border-bottom:1px solid var(--lijn-zacht)}
.bars div{flex:1;background:var(--plum-100);border-radius:4px 4px 0 0;position:relative;min-width:0}
.bars div.hi{background:var(--plum)}
.bars div span{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font:12px var(--font-mono);color:var(--n500)}
.bars div b{position:absolute;top:-20px;left:0;right:0;text-align:center;font:500 13px var(--font-mono)}

/* ---------- tabel en rijen: 48 px, alleen een zachte lijn tussen de rijen ---------- */
.tblwrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font:600 13px var(--font-tekst);color:var(--n500);padding:12px 16px;border-bottom:1px solid var(--n200);white-space:nowrap}
td{padding:0 16px;border-bottom:1px solid var(--lijn-zacht);vertical-align:middle;height:var(--rij)}
tbody tr:last-child td{border-bottom:0}
td .note{display:block;line-height:1.35}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--n50)}
tr.on td{background:var(--plum-50)}
td.num,th.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
td.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--n700)}
.rij{display:grid;grid-template-columns:20px 64px 20px 1fr auto;gap:12px;align-items:center;width:100%;border:0;background:none;padding:0 8px;height:var(--rij);border-radius:var(--r);text-align:left;color:var(--n900);position:relative}
.rij:hover{background:var(--n50)}
.rij.actief{background:var(--plum-50)}
.rij .nr{font:13px var(--font-mono);color:var(--n400);text-align:right}
.rij .thumb{height:36px;width:64px}
.rij .vorm-ic{color:var(--n500)}
.rij .tekst{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.rij .status{display:flex;align-items:center;gap:6px;font:13px var(--font-mono);color:var(--n500);white-space:nowrap}
.thumb{display:inline-block;background:var(--n100) center/cover no-repeat;border-radius:6px;flex:none}

/* ---------- formulier: label erboven, veld 44 px, rustige rand ---------- */
.fld{display:flex;flex-direction:column;gap:8px;min-width:0}
.fld label,.fld .lbl{font:600 14px var(--font-tekst);color:var(--n700);display:flex;align-items:center;gap:8px}
.fld input,.fld select,.fld textarea{height:var(--v5-tik);border:1px solid var(--n200);border-radius:var(--r);background:var(--n0);padding:0 14px;width:100%;min-width:0;font-size:16px}
.fld textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical;line-height:1.5}
.fld input[type=range]{padding:0;height:var(--v5-tik);accent-color:var(--plum);border:0}
.fld input[type=file]{padding:8px}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--plum);outline:none;box-shadow:0 0 0 3px var(--plum-100)}
.fld input[readonly]{background:var(--n50);color:var(--n700)}
.fld small{color:var(--n500);font-size:14px}
.fld .err{color:var(--err);font-size:14px}
.opts{display:flex;flex-direction:column;gap:8px}
.opts .row{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center}
.opts .row .radio{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--n300);display:grid;place-items:center;cursor:pointer;background:var(--n0);margin:0 auto}
.opts .row .radio.on{border-color:var(--ok);background:var(--ok)}
.toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none;font-size:15px;border:0;background:none;padding:0;text-align:left;color:var(--n900);font-family:inherit;min-height:var(--v5-tik)}
.toggle>i{width:44px;height:26px;border-radius:999px;background:var(--n300);position:relative;transition:background .15s;flex:none}
.toggle>i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}
.toggle.on>i{background:var(--ok)}
.toggle.on>i::after{transform:translateX(18px)}
.toggle[disabled]{opacity:.5;cursor:default}
.toggle:focus-visible i{outline:2px solid var(--gold);outline-offset:2px}
.vink{display:inline-flex;align-items:center;gap:12px;font-size:15px;cursor:pointer;min-height:var(--v5-tik)}
.vink .box{width:22px;height:22px;border:1.5px solid var(--n300);border-radius:6px;display:grid;place-items:center;background:var(--n0);color:#fff;flex:none}
.vink .box.aan{background:var(--plum);border-color:var(--plum)}
.vink .box .ic{width:14px;height:14px;stroke-width:2.4}
.opslag{font-size:14px;color:var(--n500);display:flex;align-items:center;gap:8px;white-space:nowrap}
.swatch{display:inline-block;width:20px;height:20px;border-radius:6px;border:1px solid var(--n200);vertical-align:middle;margin-right:8px}

/* ---------- editor (Quizzen, Vragenbank, Teksten); de indeling staat in stap1.css ---------- */
.editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,40%);gap:var(--blok);align-items:start}
.editor.bank{grid-template-columns:minmax(0,1fr) minmax(320px,36%)}
.editor.bank td:nth-child(2){min-width:240px}
.editor.bank td:first-child{white-space:nowrap}
.editor .side{position:sticky;top:calc(var(--barH) + 24px)}
.preview{border:0;border-radius:var(--r2);overflow:hidden;background:#0a0713;position:relative;aspect-ratio:16/9}
.preview .stage{position:absolute;left:0;top:0}
.preview .k-reveal .word{font-size:300px}
.preview .k-reveal.with-icon .word{font-size:200px}
.preview-cap{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--n500);margin-bottom:8px}
.qlist{display:flex;flex-direction:column;gap:4px}
.qlist button{display:flex;align-items:center;gap:12px;border:1px solid transparent;background:none;border-radius:var(--r);padding:0 12px;height:var(--rij);text-align:left;color:var(--n900)}
.qlist button:hover{background:var(--n50)}
.qlist button.on{border-color:var(--plum);background:var(--plum-50)}
.qlist .t{font:13px var(--font-mono);color:var(--n500);width:120px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qlist .p{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.types{display:flex;gap:6px;flex-wrap:wrap}
.types button{display:inline-flex;align-items:center;gap:8px;height:var(--v5-tik);padding:0 14px;border:1px solid var(--n200);border-radius:var(--r);background:var(--n0);font-size:14px;color:var(--n700)}
.types button .ic{color:var(--n500);width:var(--v5-icoon-klein);height:var(--v5-icoon-klein)}
.types button:hover{border-color:var(--n400)}
.types button.on{border-color:var(--plum);background:var(--plum-50);color:var(--plum)}
.types button.on .ic{color:var(--plum)}
.presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.presets span{font-size:14px;color:var(--n500);margin-right:4px}
.s-after{border:1px solid var(--lijn-zacht);border-radius:var(--r2);padding:16px 20px;margin-top:16px;background:var(--n50)}
/* tabbladen: 48 px, actief in plum met een gouden streep; ook de v5-schil (pakket N) gebruikt .tabs2 of .v5-tabs */
.tabs2,.v5-tabs{display:flex;gap:4px;border-bottom:1px solid var(--lijn-zacht);overflow-x:auto;scrollbar-width:none}
.tabs2 button,.v5-tabs button,.v5-tabs a{display:inline-flex;align-items:center;gap:10px;border:0;background:transparent;padding:0 20px;height:48px;font-weight:500;font-size:16px;color:var(--n700);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap;border-radius:var(--r) var(--r) 0 0;text-decoration:none}
.tabs2 button:hover,.v5-tabs button:hover,.v5-tabs a:hover{color:var(--plum);background:var(--n50)}
.tabs2 button.on,.v5-tabs button.on,.v5-tabs .actief,.v5-tabs [aria-selected="true"]{color:var(--plum);border-bottom-color:var(--gold);font-weight:600}
.tabs2 .ic,.v5-tabs .ic{width:var(--v5-icoon-klein);height:var(--v5-icoon-klein)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--n200);background:var(--n0);border-radius:999px;padding:0 16px;min-height:var(--v5-tik);font-size:14px;font-weight:500;color:var(--n700)}
.chip:hover{border-color:var(--n400)}
.chip.on{border-color:var(--plum);background:var(--plum-50);color:var(--plum)}
.setchip{width:var(--v5-tik);height:var(--v5-tik);border-radius:var(--r);border:1px solid var(--n200);background:var(--n0);font:500 15px var(--font-mono);color:var(--n500);padding:0}
.setchip.on{background:var(--plum);border-color:var(--plum);color:var(--primary-ink)}
.setgrp{border:1px solid var(--lijn-zacht);border-radius:var(--r2);overflow:hidden;background:var(--n0)}
.setgrp+.setgrp{margin-top:12px}
.setgrp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:0 16px;height:var(--rij);background:var(--n0);border-bottom:1px solid var(--lijn-zacht);font-weight:600;font-size:16px;color:var(--plum)}
.setgrp>summary::-webkit-details-marker{display:none}
.setgrp>summary::before{content:"";width:0;height:0;border-left:6px solid var(--n500);border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s}
.setgrp[open]>summary::before{transform:rotate(90deg)}
.setgrp .sletter{width:28px;height:28px;border-radius:var(--r);background:var(--plum);color:var(--primary-ink);display:grid;place-items:center;font:500 14px var(--font-mono);flex:none}
.setgrp .scount{margin-left:auto;font:400 13px var(--font-mono);color:var(--n500)}
.setrow{display:flex;align-items:center;gap:12px;padding:0 16px;height:var(--rij);border-bottom:1px solid var(--lijn-zacht);cursor:pointer;font-size:15px}
.setrow:last-child{border-bottom:none}
.setrow:hover{background:var(--n50)}
.setrow.on{background:var(--plum-50)}
.setrow .q{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dupflag{font:500 13px var(--font-mono);padding:2px 8px;border-radius:6px;background:var(--warn-100);color:var(--warn);white-space:nowrap}
.setsum{font:14px var(--font-mono);color:var(--n500);white-space:nowrap}
.viewtog{display:inline-flex;border:1px solid var(--n200);border-radius:var(--r);overflow:hidden}
.viewtog button{border:0;background:var(--n0);padding:0 14px;height:var(--v5-tik);font-size:14px;cursor:pointer;color:var(--n700);display:inline-flex;align-items:center;gap:8px}
.viewtog button.on{background:var(--plum-50);color:var(--plum);font-weight:600}
.viewtog .ic{width:var(--v5-icoon-klein);height:var(--v5-icoon-klein)}
.bankbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.bankbar .fld{flex:1;min-width:200px}

/* ---------- media, merken: beelden groot, 16:9, minstens 240 px ---------- */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--v5-tegel-min),1fr));gap:24px}
.media-grid .m{border:1px solid var(--lijn-zacht);border-radius:var(--r2);overflow:hidden;background:var(--n0);display:flex;flex-direction:column}
.media-grid .m img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000}
.media-grid .m .mb{padding:14px 16px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.media-grid .m .mb b{font-size:15px}
.media-grid .m.act{border-color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum)}
.inbox td .note{display:block}
.world-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;max-width:1200px}
.world-pick button{position:relative;border:2px solid transparent;border-radius:var(--r);padding:0;overflow:hidden;aspect-ratio:16/9;background:#000}
.world-pick button img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.world-pick button span{position:absolute;left:8px;bottom:8px;font:500 12px var(--font-mono);color:#fff;background:rgba(0,0,0,.6);padding:2px 8px;border-radius:4px}
.world-pick button.on{border-color:var(--gold)}
.abcd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.abcd .sw{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;font:600 14px var(--font-kop)}
.bstrip{border-radius:var(--r2);padding:16px 20px;display:flex;align-items:center;gap:16px;margin-bottom:16px;position:relative;overflow:hidden;min-height:72px;border:1px solid var(--lijn-zacht)}
.bstrip .bl{font-size:22px;font-weight:700;line-height:1;position:relative}
.bstrip .dots{margin-left:auto;display:flex;gap:6px;position:relative}
.bstrip .dots i{width:16px;height:16px;border-radius:50%}

/* ---------- v5-tegels: voor de schil van pakket N (Vragen, Events, Start) en elke lijst met beeld ----------
   <div class="v5-tegels"><button class="v5-tegel [actief]"><span class="v5-tegel-beeld" style="background-image:url(..)"></span>
   <span class="v5-tegel-tekst"><b>Naam</b><small>meta</small></span></button></div>
   Zonder beeld: .v5-tegel-beeld.leeg met een icoon erin. Het raster vult de breedte met tegels van minstens 240 px. */
.v5-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--v5-tegel-min),1fr));gap:24px}
.v5-tegel{display:flex;flex-direction:column;gap:0;width:100%;padding:0;border:1px solid var(--lijn-zacht);border-radius:var(--r2);background:var(--n0);overflow:hidden;text-align:left;color:var(--n900);text-decoration:none;position:relative}
.v5-tegel:hover{border-color:var(--n300)}
.v5-tegel.actief,.v5-tegel[aria-current="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.v5-tegel-beeld{display:grid;place-items:center;width:100%;aspect-ratio:16/9;background:var(--n100) center/cover no-repeat;color:var(--plum-500)}
.v5-tegel-beeld.leeg .ic{width:40px;height:40px;stroke-width:1.25}
.v5-tegel-tekst{display:flex;flex-direction:column;gap:4px;padding:16px 20px 18px;min-width:0}
.v5-tegel-tekst b{font:600 17px/1.3 var(--font-kop);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v5-tegel-tekst small{font-size:14px;color:var(--n500);display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v5-tegel-tekst small .dot{width:9px;height:9px}
/* een blok met een kop: de lucht ertussen komt van de ouder (gap var(--blok)) */
.v5-blok{display:flex;flex-direction:column;gap:var(--v5-ruimte-s)}
.v5-blok>h2{font:600 var(--v5-kop-2)/1.3 var(--font-kop);color:var(--n900);letter-spacing:-.01em;display:flex;align-items:center;gap:12px}

/* ---------- instructiekaart ---------- */
.instr{background:var(--n0);border:1px solid var(--lijn-zacht);border-radius:var(--r2);padding:32px 36px;max-width:760px;font-size:15px;line-height:1.55}
.instr h3{font:600 22px var(--font-kop);margin-bottom:6px;text-transform:none;letter-spacing:-.01em;color:var(--plum)}
.instr ol{padding-left:22px;margin:12px 0}
.instr .mast{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--gold);padding-bottom:12px;margin-bottom:16px}
.instr .colofon{border-top:1px solid var(--lijn-zacht);margin-top:20px;padding-top:12px;font-size:13px;color:var(--n500)}

/* ---------- lagen: toast, modal, paneel, hulp, feedback ---------- */
#layer{position:relative;z-index:70}
.toast{position:fixed;left:50%;top:calc(var(--barH) + 16px);transform:translateX(-50%);background:var(--plum);color:var(--primary-ink);padding:12px 12px 12px 20px;border-radius:var(--r2);box-shadow:0 12px 32px rgba(20,10,30,.22);z-index:80;font-weight:500;font-size:15px;display:flex;align-items:center;gap:12px;max-width:min(680px,calc(100vw - 32px));animation:fadein .2s both}
.toast button{border:0;background:none;color:inherit;opacity:.7;padding:0;display:grid;place-items:center;min-width:var(--v5-tik);min-height:var(--v5-tik)}
.toast button:hover{opacity:1}
@keyframes fadein{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
.modal{position:fixed;inset:0;background:rgba(20,10,36,.5);z-index:75;display:flex;align-items:center;justify-content:center;padding:24px}
.modal .box{background:var(--n0);border:0;border-radius:var(--r2);padding:28px 32px;width:min(600px,100%);box-shadow:0 24px 64px rgba(20,10,30,.25);display:flex;flex-direction:column;gap:20px;font-size:16px}
.modal h2{font:600 22px var(--font-kop);color:var(--plum)}
.panel{position:fixed;right:0;top:var(--barH);bottom:0;width:min(480px,100vw);background:var(--n0);border-left:1px solid var(--lijn-zacht);box-shadow:-12px 0 32px rgba(20,10,30,.08);z-index:72;display:flex;flex-direction:column}
.panel header{display:flex;align-items:center;gap:12px;padding:0 24px;height:64px;border-bottom:1px solid var(--lijn-zacht);background:var(--n0);color:var(--plum);font:600 18px var(--font-kop);flex:none}
.panel header .ic{color:var(--plum-500)}
.panel header button{margin-left:auto;border:0;background:none;color:var(--n500);padding:0;display:grid;place-items:center;border-radius:var(--r);min-width:var(--v5-tik);min-height:var(--v5-tik)}
.panel header button:hover{background:var(--n50);color:var(--n900)}
.panel .body{padding:24px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:20px;font-size:15px}
.panel .body p{margin:0;color:var(--n700);line-height:1.6}
.panel footer{display:flex;gap:12px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--lijn-zacht);flex:none;align-items:center;background:var(--n0)}
.panel footer .links{margin-right:auto;font-size:14px;color:var(--n500)}
.panel .stappen{display:flex;gap:8px;align-items:center;font:13px var(--font-mono);color:var(--n500)}
.panel .stappen b{color:var(--plum);font-weight:500}
.panel .rolnote{font-size:15px;padding:14px 16px;border-radius:var(--r);background:var(--info-100);line-height:1.55}
.panel .afdruk{border:1px solid var(--lijn-zacht);border-radius:var(--r);overflow:hidden;background:var(--n50);aspect-ratio:16/10;display:grid;place-items:center;color:var(--n500);font-size:14px}
.panel .afdruk img{width:100%;height:100%;object-fit:contain;display:block}
.fb-btn{position:fixed;right:24px;bottom:24px;width:52px;height:52px;border-radius:50%;border:1px solid var(--n200);background:var(--n0);color:var(--n700);display:grid;place-items:center;box-shadow:0 4px 16px rgba(20,10,30,.12);z-index:71;padding:0}
.fb-btn:hover{border-color:var(--plum);color:var(--plum)}
.fb-btn .ic{width:24px;height:24px}
[inert]{pointer-events:none}

/* ---------- rust-laag: tikhoogte en icoonmaat over alle pagina's heen ----------
   Wat je aanklikt is minstens 44 px hoog, een icoon in een knop, veld, pil of cel is 20 px. :where() houdt de specificiteit laag,
   zodat een pagina een bewuste uitzondering kan maken; de kiosk zelf en de geschaalde voorvertoning doen niet mee. */
:where(#app,#layer) :where(button,select,a.btn,[role="tab"],input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden])):where(:not(#kioskWrap *,.stage *)){min-height:var(--v5-tik)}
:where(#app,#layer) :where(.btn,.segm button,.viewtog button,.chip,.pill,.tag,td,th,.fld,.note,small,label) svg.ic{width:var(--v5-icoon-klein);height:var(--v5-icoon-klein)}
:where(#app,#layer) :where(select,input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file])):where(:not(#kioskWrap *,.stage *)){font-size:16px}
:where(#app,#layer) :where(.vink .box,.toggle>i) svg.ic{width:14px;height:14px}

/* ---------- print (Rapport als PDF, instructiekaart) ---------- */
@media print{
  #bar,.rail,#layer,.fb-btn,.s-actions,.tabs2,.v5-tabs,.lade{display:none!important}
  #studio{display:block}
  .s-main{padding:0;max-width:none}
  .card,.tile,.v5-tegel{break-inside:avoid;box-shadow:none}
  body{background:#fff;color:#000}
}

/* ---------- 1440 en kleiner: minder zijlucht, zelfde maten ---------- */
@media (max-width:1440px){
  .topbar{gap:16px;padding:0 24px}
  .zoek{width:300px}
  .s-main{padding:28px 32px 56px}
}
@media (max-width:1280px){
  .zoek{width:240px}
  .kruimel{display:none}
}
@media (max-width:900px){
  #studio{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;height:auto;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;border-right:0;border-bottom:1px solid var(--lijn-zacht);padding:4px 8px;gap:2px}
  .rail .post{width:auto;min-height:56px;padding:6px 12px;border-left:0;border-bottom:3px solid transparent}
  .rail .post.actief{border-bottom-color:var(--gold)}
  .rail .groep,.rail .onder{display:none}
  .editor{grid-template-columns:1fr}
  .editor .side{position:static}
  .grid2,.grid3{grid-template-columns:1fr}
  .s-main{padding:16px}
  .topbar{gap:10px;padding:0 16px}
  .versie .txt{display:none}
  .lade{left:8px;width:calc(100vw - 16px)}
}

/* ---------- zijbalk: posten krimpen niet, anders schuiven icoon en label over elkaar ---------- */
.rail>*{flex:none}
@media (max-width:1400px){ .kruimel{display:none} .zoek{width:260px} }