/* ===== AI-Academie — designtokens =====
   Concept 4: Paars Gamified / Engagement-platform.
   Paars primair · energieke accenten · game-mechaniek (XP, badges, streaks)
   in de leeromgeving; rustiger op de zakelijke schermen. */
:root{
  --ink:#4C1D95;        /* diep paars, nav & vlakken */
  --ink-2:#6D28D9;      /* primair paars (knoppen) */
  --ink-3:#5B21B6;      /* tussenpaars */
  --paper:#F7F6FB;      /* zeer licht lila-grijs */
  --marker:#FACC15;     /* goud-geel accent (XP/highlight) */
  --rust:#7C3AED;       /* secundair accent (binnen paarsfamilie) */
  --line:#E4E0F0;
  --muted:#615C72;
  --xp:#7C3AED;
  --ok:#16A34A; --warn:#D97706; --bad:#DC2626;
  --radius:12px;
  --font-display:"Space Grotesk","Segoe UI",sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);background:var(--paper);color:#231A3D;line-height:1.6}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.01em;color:#2B1466}
a{color:var(--ink-2)}
mark{background:linear-gradient(180deg,transparent 40%,var(--marker) 40%);padding:0 .12em;color:inherit}
.eyebrow{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2)}
.btn{display:inline-block;background:var(--ink-2);color:#fff;border:none;padding:.7rem 1.3rem;border-radius:var(--radius);font-weight:600;cursor:pointer;text-decoration:none;font-size:.95rem}
.btn:hover{background:var(--ink)}
.btn.alt{background:var(--marker);color:#3B2A00}
.btn.ghost{background:transparent;border:1.5px solid var(--ink-2);color:var(--ink-2)}
.btn.ghost:hover{background:#f1ecfb}
.btn:focus-visible{outline:3px solid var(--marker);outline-offset:2px}

/* ── App-layout: menu altijd links ── */
.layout{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.sidebar{background:var(--ink);color:#fff;padding:1.2rem .9rem;position:sticky;top:0;height:100vh;overflow:auto}
.sidebar .brand{font-family:var(--font-display);font-weight:700;font-size:1.1rem;margin-bottom:1.4rem;display:block;color:#fff;text-decoration:none}
.sidebar nav a{display:block;color:#DCE5DF;text-decoration:none;padding:.5rem .6rem;border-radius:8px;margin-bottom:.15rem;font-size:.92rem}
.sidebar nav a:hover,.sidebar nav a.active{background:rgba(233,249,99,.16);color:#fff}
.sidebar .menu-groep{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:#9FB3A8;margin:1.1rem 0 .3rem;padding:0 .6rem;font-weight:700}
.sidebar .menu-groep:first-of-type{margin-top:.2rem}
.sidebar .who{font-size:.78rem;color:#9FB3A8;margin-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);padding-top:.8rem}
/* ── paginabreedte ──────────────────────────────────────────────────
   Gecentreerd, en breder op grote schermen. Tekstpagina's blijven smal,
   want lange regels lezen slecht (.leesbaar, ~80 tekens). */
.main{padding:1.6rem 2rem;max-width:1320px;margin:0 auto;width:100%}
@media(min-width:1700px){.main{max-width:1500px}}
.main .leesbaar{max-width:80ch}
/* brede tabellen schuiven mee i.p.v. de pagina op te rekken */
.tabel-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:840px){.main{padding:1.2rem 1rem}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1rem 0}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem}
.card .big{font-family:var(--font-mono);font-size:1.7rem;font-weight:600}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
th,td{padding:.55rem .8rem;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem}
th{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;background:#EEF1EB}
.tag{display:inline-block;font-size:.75rem;padding:.15rem .55rem;border-radius:99px;background:#EEF1EB}
form.stack label{display:block;margin:.7rem 0 .2rem;font-weight:600;font-size:.88rem}
input,select,textarea{width:100%;max-width:480px;padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.flash{padding:.7rem 1rem;border-radius:var(--radius);margin:.8rem 0;background:var(--marker)}
.flash.error{background:#F9DEDC}
.progressbar{height:8px;background:#E4E8E0;border-radius:99px;overflow:hidden;min-width:90px}
.progressbar>span{display:block;height:100%;background:var(--ok)}

/* ── Publieke pagina's ── */
.pub-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-bottom:1px solid var(--line)}
.pub-header .logo{font-family:var(--font-display);font-weight:700;font-size:1.15rem;text-decoration:none;display:inline-flex;align-items:center;color:var(--ink)}
.pub-header .logo img{display:block}
.pub-header nav a{margin-left:1.2rem;text-decoration:none;font-size:.92rem}
.hero{padding:4.5rem 2rem 3rem;max-width:1000px;margin:0 auto}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin:0 0 1rem;max-width:18ch}
.hero p.lead{font-size:1.15rem;max-width:55ch;color:#2C463E}
.stamp{display:inline-block;font-family:var(--font-mono);font-size:.78rem;border:1.5px solid var(--ink);border-radius:4px;padding:.25rem .6rem;transform:rotate(-1.5deg);margin-bottom:1rem;background:#fff}
.section{max-width:1000px;margin:0 auto;padding:2.5rem 2rem}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem}
.track-card{border-left:5px solid var(--ink)}
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
.price-card .amount{font-family:var(--font-mono);font-size:2rem;font-weight:700}
footer{border-top:1px solid var(--line);padding:2rem;text-align:center;color:var(--muted);font-size:.85rem;margin-top:3rem}
@media(max-width:840px){.layout{grid-template-columns:1fr}.sidebar{position:static;height:auto}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── instellingendashboard ── */
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:1rem 0}
.tab{padding:.45rem .9rem;border:1px solid var(--line,#d8ded9);border-radius:999px;
     text-decoration:none;color:inherit;font-size:.85rem;background:#fff}
.tab.active{background:var(--ink,#4C1D95);color:#fff;border-color:var(--ink,#4C1D95)}
.pill{display:inline-block;padding:.1rem .55rem;border-radius:999px;
      background:#E9F96355;font-size:.78rem;margin-right:.25rem}
.policy-body h2,.policy-body h3{margin-top:1.4rem}
.muted{color:#5d6b62}

/* ── admin-nav groepering + knoppen ── */
.navgroup{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  color:#8a9690;margin:.9rem 0 .15rem .2rem;font-weight:600}
.btn.danger{color:#b00020;border-color:#e3b8bf}
.btn.danger:hover{background:#fbe9ec}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:840px){.grid2{grid-template-columns:1fr}}
.qcard .answers{margin:.5rem 0}

/* ── admin polish ── */
.section-head{display:flex;justify-content:space-between;align-items:center;
  margin:1.6rem 0 .6rem;border-bottom:1px solid var(--line,#e3e7e4);padding-bottom:.4rem}
.section-head h2{font-size:1.05rem;margin:0}
table.table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden}
table.table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:#6a766f;padding:.6rem .8rem;background:#f4f6f4;border-bottom:1px solid var(--line,#e3e7e4)}
table.table td{padding:.6rem .8rem;border-bottom:1px solid #eef1ee;vertical-align:middle}
table.table tr:last-child td{border-bottom:0}
.rowlink{cursor:pointer}.rowlink:hover{background:#f7faf8}
.tag{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.75rem;background:#eef1ee}
.tag.ok{background:#dff3e6;color:#0a6b3c}.tag.warn{background:#fdf3d6;color:#7d6216}
.tag.bad{background:#fbe2e6;color:#9a1230}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;margin:0}
dl.kv dt{color:#6a766f;font-size:.85rem}dl.kv dd{margin:0;font-weight:500}
.stack label{display:block;margin-bottom:.6rem;font-weight:500}
.stack input,.stack select,.stack textarea{width:100%;max-width:480px;margin-top:.2rem}
/* labels: veld altijd op een eigen regel ─────────────────────────────
   Overal in het platform staat het invoerveld BINNEN zijn label
   (<label>Naam<input></label>). Zonder onderstaande regel komt het veld
   naast de labeltekst zodra het smal genoeg is, waardoor lange labels
   als "Straat en nummer" middenin breken. Geldt bewust voor élk
   formulier, niet enkel voor .stack. */
label > input,label > select,label > textarea{display:block;margin-top:.2rem}
label{display:block}
/* uitzondering: aankruisvakjes en keuzerondjes horen juist wél inline */
label > input[type="checkbox"],label > input[type="radio"]{display:inline-block;
  width:auto;margin:0 .35rem 0 0;vertical-align:middle}

/* ── veldbreedte volgt de inhoud ──────────────────────────────────────
   Een veld hoort te tonen hoeveel er verwacht wordt: een postcode smal,
   een adres breed. Gestuurd op type en naam, zodat het overal geldt. */
input[type="date"],input[type="time"],input[type="month"]{max-width:11rem}
input[type="number"]{max-width:8rem}
input[type="color"]{max-width:3.5rem;padding:.15rem;height:2.2rem}
input[name="postal_code"],input[name="zip"],input[name*="postcode"]{max-width:8rem}
input[name="phone"],input[name*="telefoon"]{max-width:14rem}
input[name="enterprise_number"],input[name="vat_number"],input[name="kbo_number"]{max-width:16rem}
input[name="peppol_id"]{max-width:18rem}
input[name="city"],input[name*="gemeente"]{max-width:22rem}
input[name="amount"],input[name="seats"],input[name="pass_score"]{max-width:8rem}
textarea{max-width:100%}
/* naast elkaar geplaatste velden mogen hun eigen breedte houden */
.veldrij{display:flex;gap:.9rem;flex-wrap:wrap;align-items:flex-end}
.veldrij label{margin-bottom:0}

/* flowboard */
.flowboard{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;overflow-x:auto}
@media(max-width:1100px){.flowboard{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.flowboard{grid-template-columns:1fr}}
.flowcol{background:#f4f6f4;border-radius:12px;overflow:hidden;min-width:0}
.flowhead{color:#fff;padding:.7rem .8rem;font-weight:600;font-size:.9rem}
.flowstep{display:block;padding:.5rem .7rem;border-bottom:1px solid #e7eae7;
  font-size:.82rem;color:inherit;text-decoration:none;background:#fff}
.flowstep:hover{background:#eef7f2}
.flowstep .wk{display:inline-block;min-width:2.2em;color:#8a9690;font-weight:600;font-size:.75rem}
.flowstep .ms{float:right}

/* ── brede formulierpagina's ──────────────────────────────────────────
   Instellingen- en aankooppagina's stonden in één smalle kolom terwijl er
   rechts ruimte leeg bleef. .breedformulier laat het formulier de volle
   kolom gebruiken en zet de velden in twee kolommen. */
.breedformulier{max-width:none}
.breedformulier .veldpaar{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.4rem}
.breedformulier .veldpaar > .vol{grid-column:1 / -1}
.breedformulier input,.breedformulier select,.breedformulier textarea{max-width:none}
.breedformulier input[type="date"]{max-width:11rem}
.breedformulier input[type="color"]{max-width:3.5rem}
.breedformulier select[multiple]{min-height:13rem;font-size:.9rem}
@media(max-width:840px){.breedformulier .veldpaar{grid-template-columns:1fr}}
/* twee gelijke kolommen voor losse kaarten */
.tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
@media(max-width:900px){.tweeluik{grid-template-columns:1fr}}

/* ── settings-formulier uitlijning ── */
.settings-form .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.4rem}
@media(max-width:820px){.settings-form .field-grid{grid-template-columns:1fr}}
.settings-form .field{display:flex;flex-direction:column}
.settings-form .field-wide{grid-column:1 / -1}
.settings-form label{font-weight:500;font-size:.85rem;margin-bottom:.3rem;color:#33403a}
.settings-form input,.settings-form select,.settings-form textarea{
  width:100%;padding:.5rem .6rem;border:1px solid var(--line,#d8ded9);border-radius:8px;
  font:inherit;background:#fff;box-sizing:border-box}
.settings-form input:focus,.settings-form select:focus,.settings-form textarea:focus{
  outline:2px solid var(--ink,#4C1D95);outline-offset:1px}
.settings-form .checkrow{display:flex;flex-wrap:wrap;gap:.6rem .9rem}
.settings-form .checkopt{display:flex;align-items:center;gap:.35rem;font-weight:400;
  background:#f4f6f4;border:1px solid var(--line,#e3e7e4);border-radius:8px;padding:.35rem .7rem}
.settings-form .checkopt input{width:auto}
.settings-form .btn{margin-top:1.2rem}
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0}

/* ── homepage rolblokken 2x2 (klikbaar) ── */
.role-2x2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.5rem}
@media(max-width:720px){.role-2x2{grid-template-columns:1fr}}
.role-2x2 .track-card{display:block;background:#fff;border:1px solid var(--line,#e3e7e4);
  border-left-width:5px;border-radius:14px;padding:1.4rem 1.5rem;text-decoration:none;color:inherit;
  transition:transform .12s ease,box-shadow .12s ease}
.role-2x2 .track-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(16,49,43,.1)}
.role-2x2 .track-card h3{margin:0 0 .4rem}
.role-2x2 .track-card .more{display:inline-block;margin-top:.7rem;font-weight:600;font-size:.9rem}

/* rol-detailpagina */
.role-hero{background:#f4f6f4}
.learn-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:.6rem}
@media(max-width:640px){.learn-grid{grid-template-columns:1fr}}
.learn-card{background:#fff;border:1px solid var(--line,#e3e7e4);border-radius:10px;
  padding:1rem 1.1rem;font-weight:500}

/* ── FAQ accordion ── */
.accordion{margin-top:1.5rem;border:1px solid var(--line,#e3e7e4);border-radius:14px;overflow:hidden;background:#fff}
.acc-item{border-bottom:1px solid var(--line,#e3e7e4)}
.acc-item:last-child{border-bottom:0}
.acc-item summary{cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font-weight:600;
  font-size:1.02rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary:hover{background:#f7faf8}
.acc-icon{font-size:1.4rem;line-height:1;color:#4C1D95;transition:transform .15s ease;flex-shrink:0}
.acc-item[open] .acc-icon{transform:rotate(45deg)}
.acc-body{padding:0 1.3rem 1.2rem;color:#33403a}
.acc-body p{margin:0}

/* ── curriculum-matrix: gelijke kolommen, weken naast elkaar ── */
.cur-grid.bootcamp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
@media(max-width:900px){.cur-grid.bootcamp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cur-grid.bootcamp-grid{grid-template-columns:1fr}}
.cur-cell{display:flex;flex-direction:column;gap:.2rem;background:#fff;border:1px solid var(--line,#e3e7e4);
  border-radius:10px;padding:.6rem .8rem;text-decoration:none;color:inherit}
.cur-cell:hover{background:#eef7f2}
.cur-cell .wk{font-size:.72rem;color:#8a9690;font-weight:600}
.cur-cell .ttl{font-size:.85rem}

/* matrix: 1 weekkolom + N gelijke flowkolommen */
.cur-tablewrap{overflow-x:auto;margin-top:.4rem}
.cur-table{border-collapse:separate;border-spacing:.4rem;width:100%;table-layout:fixed;min-width:760px}
.cur-table th,.cur-table td{vertical-align:top}
/* kop-rij: track-namen */
.cur-table thead th{color:#fff;background:#4C1D95;border-radius:8px;padding:.5rem .6rem;
  font-weight:600;font-size:.82rem;text-align:left;line-height:1.25}
.cur-table thead th small{display:block;font-weight:400;opacity:.85;font-size:.68rem;margin-top:.1rem}
/* Week-kolom: vaste smalle breedte, maar de track-kolommen delen de rest gelijk */
.cur-table .wkcol{width:3.4rem;background:#5a6b63;text-align:center}
.cur-table thead .wkcol{display:table-cell}
.cur-table .wkcell{width:3.4rem;background:#f4f6f4;border-radius:8px;text-align:center;
  font-weight:600;color:#8a9690;font-size:.78rem;padding:.45rem .2rem;white-space:nowrap}
/* les-cellen */
.cur-table tbody td{background:#fff;border:1px solid var(--line,#e3e7e4);border-radius:8px;
  padding:.45rem .55rem;font-size:.8rem;line-height:1.3;word-break:break-word}
.cur-table tbody td a{color:inherit;text-decoration:none}
.cur-table tbody td a:hover{text-decoration:underline}

/* ── mobiel / responsive ── */
@media(max-width:840px){
  /* sidebar wordt bovenbalk */
  .sidebar{height:auto;position:static;display:flex;flex-direction:column}
  .sidebar nav{display:flex;flex-wrap:wrap;gap:.2rem}
  .sidebar nav a{flex:0 0 auto}
  .navgroup{flex-basis:100%;margin:.5rem 0 .1rem}
  main{padding:1rem !important}
  /* tabellen horizontaal scrollbaar i.p.v. samengeperst */
  table.table,table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
}
@media(max-width:600px){
  .pub-header{flex-wrap:wrap;gap:.4rem;padding:.8rem 5vw}
  .pub-header nav{display:flex;flex-wrap:wrap;gap:.2rem}
  .pub-header nav a{margin-left:0;margin-right:.6rem}
  .hero,.section{padding-left:5vw !important;padding-right:5vw !important}
  h1{font-size:1.6rem}
  .cards{grid-template-columns:1fr 1fr}
}
/* touch-doelen iets groter */
@media(pointer:coarse){
  .btn,.sidebar nav a,.acc-item summary{min-height:44px}
}

/* ═══ Concept 4 — Paars Gamified: game-laag (leeromgeving) ═══ */
.game-panel{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;
  background:var(--ink);color:#fff;
  border-radius:18px;padding:1.4rem 1.6rem;box-shadow:0 8px 24px rgba(76,29,149,.18)}
.game-level{display:flex;align-items:center;gap:1.1rem;min-width:260px}
.level-ring{--pct:0;width:74px;height:74px;border-radius:50%;flex-shrink:0;display:flex;
  flex-direction:column;align-items:center;justify-content:center;color:#fff;
  background:conic-gradient(var(--marker) calc(var(--pct)*1%), rgba(255,255,255,.22) 0);
  position:relative}
.level-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#4C1D95}
.level-num{position:relative;font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1}
.level-lbl{position:relative;font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;opacity:.85}
.game-xpinfo{display:flex;flex-direction:column;gap:.25rem}
.game-xpinfo strong{font-size:1.1rem}
.xpbar{width:180px;max-width:46vw;height:9px;background:rgba(255,255,255,.25);border-radius:99px;overflow:hidden}
.xpbar span{display:block;height:100%;background:var(--marker);border-radius:99px}
.game-xpinfo small{opacity:.85;font-size:.78rem}
.game-stats{display:flex;gap:1.6rem}
.gstat{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.gstat .g-ic{font-size:1.3rem}
.gstat strong{font-size:1.25rem;margin-top:.15rem}
.gstat small{opacity:.85;font-size:.72rem}
.badge-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.badge{background:#fff;border:1.5px solid var(--marker);color:#6D28D9;border-radius:99px;
  padding:.3rem .8rem;font-size:.8rem;font-weight:600}

/* lessenlijst als kaarten */
.lesson-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem}
.lesson-row{display:grid;grid-template-columns:3rem 1fr auto auto;align-items:center;gap:.8rem;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:.7rem 1rem}
.lesson-row .wk{font-weight:700;color:var(--ink-2);font-size:.85rem}
.lesson-row.done{border-color:#bbf7d0;background:#f0fdf4}
.lesson-row.open{border-color:var(--ink-2);box-shadow:0 2px 10px rgba(109,40,217,.08)}
.lesson-row.locked{opacity:.6}
.lesson-row .ttl{font-weight:500}
@media(max-width:640px){.lesson-row{grid-template-columns:2.4rem 1fr;row-gap:.4rem}
  .lesson-row .st,.lesson-row .act{grid-column:2}}

/* paarse sidebar + nav */
.sidebar{background:var(--ink)}
.sidebar nav a:hover,.sidebar nav a.active{background:rgba(250,204,21,.18);color:#fff}

/* publieke hero: rustig diep paars (geen regenboog) */
/* publieke hero: licht & leesbaar, paars als accent (geen zwaar paars blok) */
.hero{background:linear-gradient(160deg,#FFFFFF 0%,#EFE9FB 100%);
  border:1px solid var(--line);border-radius:22px;
  max-width:1040px;margin:1.5rem auto;padding:3.5rem 3rem}
.hero h1{color:#2B1466}
.hero p.lead{color:#3D3458}
.hero .stamp{background:#fff;border:1.5px solid var(--ink-2);color:var(--ink-2);
  border-radius:99px;padding:.3rem .9rem;font-size:.75rem;transform:none}
.hero mark{background:linear-gradient(180deg,transparent 40%,var(--marker) 40%);color:#2B1466}

/* certificaat-templatekeuze */
.cert-templates{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:.6rem}
@media(max-width:640px){.cert-templates{grid-template-columns:1fr}}
.cert-tpl{border:1px solid var(--line);border-radius:12px;padding:1rem;text-align:center;background:#fff}
.cert-tpl.active{border-color:var(--ink-2);box-shadow:0 0 0 2px rgba(109,40,217,.15)}
.cert-tpl-name{display:block;text-transform:capitalize;font-weight:600;margin-bottom:.5rem;color:var(--ink)}

/* ── rich-text editor (instellingen) ── */
.rte{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.rte-toolbar{display:flex;flex-wrap:wrap;gap:.2rem;align-items:center;background:#f4f2fb;
  padding:.4rem .5rem;border-bottom:1px solid var(--line)}
.rte-toolbar button,.rte-toolbar select{background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:.25rem .55rem;cursor:pointer;font-size:.85rem;color:var(--ink)}
.rte-toolbar button:hover{background:#ece7f9}
.rte-sep{width:1px;height:20px;background:var(--line);margin:0 .25rem}
.rte-area{min-height:140px;padding:.7rem .9rem;outline:none;line-height:1.6}
.rte-area:focus{box-shadow:inset 0 0 0 2px rgba(109,40,217,.12)}
.rte-area h2{font-size:1.2rem;margin:.4rem 0}.rte-area h3{font-size:1.05rem;margin:.3rem 0}

/* verzendplanning-grid (capaciteit) */
.plan-grid td,.plan-grid th{text-align:center;font-size:.8rem;vertical-align:top}
.plan-time{font-weight:600;color:var(--ink-2);white-space:nowrap}
.plan-cell{min-width:8rem}
.plan-empty{color:#b7b0c9}
.plan-part{background:#efe9fb}
.plan-full{background:#fde0e0}
.plan-count{display:block;font-weight:700;color:var(--ink)}
.plan-full .plan-count{color:#b3261e}
.plan-co{display:block;font-size:.72rem;color:var(--muted);margin-top:.15rem}
.plan-co a{color:var(--ink)}
.warn-box{background:#fde0e0;border:1px solid #f5b5b5;border-radius:10px;padding:.7rem .9rem;color:#7a1d1d}

/* ── takenpaneel / readiness ── */
.tasks-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.4rem;margin-bottom:1.4rem}
.tasks-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.pct-ring{--pct:0;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--ink-2) calc(var(--pct)*1%), #ece8f6 0);position:relative}
.pct-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.pct-ring span{position:relative;font-weight:700;color:var(--ink);font-size:.95rem}
.tasks-bar{height:8px;background:#ece8f6;border-radius:99px;overflow:hidden;margin:.8rem 0 1rem}
.tasks-bar span{display:block;height:100%;background:var(--ink-2);border-radius:99px}
.tasks-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.tasks-group-head{font-weight:600;color:var(--ink);font-size:.9rem;margin-bottom:.3rem}
.tasks-group ul{list-style:none;margin:0;padding:0}
.tasks-group li{font-size:.86rem;padding:.18rem 0;display:flex;gap:.4rem;align-items:baseline}
.tasks-group li .ti{font-weight:700}
.tasks-group li.ok{color:var(--muted)}.tasks-group li.ok .ti{color:var(--ok)}
.tasks-group li.todo .ti{color:#b9b2cf}

/* ── certificaat-template kiezer met preview ── */
.tpl-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
@media(max-width:680px){.tpl-picker{grid-template-columns:1fr}}
.tpl-card{position:relative;display:flex;flex-direction:column;gap:.4rem;border:1.5px solid var(--line);
  border-radius:12px;padding:.7rem;cursor:pointer;background:#fff;transition:border-color .12s,box-shadow .12s}
.tpl-card:hover{border-color:var(--ink-2)}
.tpl-card.sel,.tpl-card:has(input:checked){border-color:var(--ink-2);box-shadow:0 0 0 3px rgba(109,40,217,.15)}
.tpl-card input{position:absolute;top:.6rem;right:.6rem}
.tpl-preview svg{width:100%;height:auto;border-radius:8px;border:1px solid var(--line);display:block}
.tpl-name{font-weight:600;text-transform:capitalize;color:var(--ink)}
.tpl-pdf{font-size:.78rem;color:var(--ink-2);text-decoration:none}
.tpl-pdf:hover{text-decoration:underline}

/* ── abonnement: prijsblok + uitleglijst ── */
.price-box{background:#f4f2fb;border:1px solid var(--line);border-radius:12px;padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.3rem}
.price-box strong{font-size:1.5rem;color:var(--ink);font-family:var(--font-display)}
.price-box div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.info-list{margin:.4rem 0 0;padding-left:1.1rem}
.info-list li{margin:.45rem 0;font-size:.9rem}

/* ── dashboard-samenvatting + SMART-doel ── */
.dash-summary{display:grid;grid-template-columns:1.6fr 1fr;gap:1rem;margin-bottom:1.4rem}
@media(max-width:760px){.dash-summary{grid-template-columns:1fr}}
.dash-target,.dash-breakdown{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.3rem}
.target-line{font-size:1.05rem;margin:.2rem 0 .7rem}
.big-progress{position:relative;height:26px;background:#ece8f6;border-radius:99px;overflow:hidden;margin:.3rem 0 .6rem}
.big-progress span{display:block;height:100%;background:var(--ink-2);border-radius:99px}
.big-progress b{position:absolute;top:0;left:10px;line-height:26px;color:#fff;font-size:.85rem}
.seg-bar{display:flex;height:18px;border-radius:99px;overflow:hidden;margin:.5rem 0;background:#eee}
.seg.ok{background:#16A34A}.seg.warn{background:#FACC15}.seg.bad{background:#DC2626}
.seg-legend{list-style:none;padding:0;margin:.4rem 0 0;font-size:.85rem}
.seg-legend li{margin:.15rem 0}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.3rem}
.dot.ok{background:#16A34A}.dot.warn{background:#FACC15}.dot.bad{background:#DC2626}

/* ── hulppagina (FAQ) ── */
.faq-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;max-width:760px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.4rem .9rem}
.faq-item summary{cursor:pointer;font-weight:600;padding:.5rem 0;color:var(--ink)}
.faq-item .faq-a{padding:0 0 .7rem;color:#3D3458;font-size:.92rem}
.faq-item .faq-a ul{margin:.3rem 0;padding-left:1.1rem}
.faq-sectie{margin-bottom:1.4rem}
.faq-thema{font-size:1.05rem;margin:1.6rem 0 .5rem;padding-bottom:.3rem;
  border-bottom:2px solid var(--line);max-width:760px}

/* ── veld-hints onder formuliervelden ── */
.hint{display:block;color:var(--muted);font-size:.8rem;margin:.35rem 0 .9rem;line-height:1.45;
  max-width:60ch}
/* ── ademruimte in kaarten ── */
.card{margin-bottom:1rem}
.card > *:first-child{margin-top:0}
.card > *:last-child{margin-bottom:0}
.card form.stack > *:last-child{margin-bottom:0}
/* laatste hint in een kaart niet tegen de rand */
.card > .hint:last-child{margin-bottom:.15rem}
/* keuzelijsten en knoppen in tabellen leesbaar houden */
table select{min-width:9rem;padding:.25rem .35rem;font-size:.82rem}
table select[multiple]{min-height:3.4rem}
table td{vertical-align:middle;padding-top:.5rem;padding-bottom:.5rem}
table td form{margin:0}
/* rapport-interpretatie box */
.legend-box{background:#f4f2fb;border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;margin:1rem 0;font-size:.88rem}
.legend-box .tag{margin-right:.3rem}

/* ── Actua-feed (cursist) ── */
.actua-feed{display:flex;flex-direction:column;gap:.9rem;max-width:720px;margin-top:1rem}
.actua-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;border-left:4px solid var(--ink-2)}
.actua-card h3{margin:.1rem 0 .3rem;color:var(--ink)}
.actua-date{color:var(--marker);font-family:var(--font-mono);font-size:.75rem;font-weight:700;margin:0}
.actua-sum{font-weight:500;margin:.2rem 0}
.actua-body{font-size:.92rem;color:#3D3458}

/* ── voordelen in een prijskaart: vinkje per regel ── */
.voordelen-lijst{list-style:none;padding:0;margin:.6rem 0 .9rem}
.voordelen-lijst li{position:relative;padding-left:1.5rem;margin-bottom:.35rem;line-height:1.45}
.voordelen-lijst li::before{content:"\2713";position:absolute;left:0;top:0;
  color:#16A34A;font-weight:700}

/* ── kennisbank, artikels en FAQ ──────────────────────────────────────
   Eerder stond hier `padding: 3rem 8vw` samen met een max-width. Op een
   breed scherm ging er zo eerst 8% aan elke kant af en werd de rest nóg
   eens geknepen — vandaar de smalle kolom met veel wit ernaast. */
.leespagina{max-width:900px;margin:0 auto;padding:3rem 1.5rem}
.leespagina-breed{max-width:1100px}
.artikel{max-width:820px;margin:0 auto;padding:3rem 1.5rem}
.artikel p,.artikel li{line-height:1.7;font-size:1.02rem}
.artikel h2{font-size:1.5rem;margin:2.2rem 0 .7rem}
.artikel h3{font-size:1.15rem;margin:1.6rem 0 .5rem}
.artikel ul,.artikel ol{margin:.6rem 0 1.1rem}
.artikel li{margin-bottom:.4rem}
.artikel table{width:100%;margin:1.2rem 0}
.artikel blockquote{margin:1.4rem 0;padding:1rem 1.2rem;border-left:4px solid var(--ink-2);
  background:#F4F0FC;border-radius:0 10px 10px 0}
.artikel blockquote p:last-child{margin-bottom:0}
@media(max-width:840px){
  .leespagina,.artikel{padding:2rem 1.1rem}
}

/* ── kruimelpad en verwante artikels ── */
.kruimels{font-size:.85rem;color:var(--muted);margin:0 0 1.2rem}
.kruimels a{color:var(--muted)}
.kruimels a:hover{color:var(--ink-2)}
.kruimels span{color:var(--ink)}
.verwant{margin-top:3rem;padding-top:1.6rem;border-top:2px solid var(--line)}
.verwant h2{font-size:1.2rem;margin:0 0 1rem}
.verwant .cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.verwant .card{padding:1rem 1.1rem}
.verwant .card h3{font-size:1rem;line-height:1.35}
@media(max-width:840px){.verwant .cards{grid-template-columns:1fr}}

/* ── AI-scan: tegels, ja/nee en meter ── scan-herwerkt ────────────────
   SPECIFICITEIT, opgelet bij het aanpassen. Elders in dit bestand staan:
     form.stack label{display:block; margin:...}   -> (0,1,2)
     label > input[type="checkbox"]{display:inline-block}
   Een gewone `.keuzetegel` (0,1,1) verliest daarvan. Daarom zijn de selectors
   hieronder geschreven als `.keuzetegels label.keuzetegel` (0,2,1): dat wint,
   en zonder die extra klasse verschijnt het vakje als een streepje naast de
   tegel en valt de tekst eronder in plaats van ernaast. */
.stapje{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--ink-2);margin:0 0 .15rem}

.keuzetegels{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:1rem}
.keuzetegels label.keuzetegel{display:flex;gap:.65rem;align-items:flex-start;margin:0;
  padding:.75rem .85rem;border:1.5px solid var(--line);border-radius:10px;
  cursor:pointer;font-weight:400;font-size:1rem;background:#fff;line-height:1.35;
  transition:border-color .12s,background .12s,box-shadow .12s}
.keuzetegels label.keuzetegel:hover{border-color:#B9A9F0;background:#FDFCFF}
.keuzetegels label.keuzetegel > input[type="checkbox"]{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.keuzetegels .keuzetegel-vink{display:block;flex:0 0 18px;width:18px;height:18px;
  margin-top:.1rem;border-radius:5px;border:1.5px solid #C9C2E0;background:#fff;
  position:relative;transition:all .12s}
.keuzetegels .keuzetegel-vink::after{content:"";position:absolute;left:5px;top:1px;
  width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);transition:transform .12s}
.keuzetegels label.keuzetegel:has(> input:checked){border-color:var(--ink-2);
  background:#F7F4FE;box-shadow:0 1px 3px rgba(76,29,149,.08)}
.keuzetegels label.keuzetegel:has(> input:checked) .keuzetegel-vink{
  background:var(--ink-2);border-color:var(--ink-2)}
.keuzetegels label.keuzetegel:has(> input:checked) .keuzetegel-vink::after{
  transform:rotate(45deg) scale(1)}
.keuzetegels label.keuzetegel:focus-within{outline:2px solid var(--ink-2);outline-offset:2px}
.keuzetegels .keuzetegel-tekst{display:block;min-width:0}
.keuzetegels .keuzetegel-tekst strong{display:block;font-size:.9rem;font-weight:600;
  color:var(--ink);line-height:1.3}
.keuzetegels .keuzetegel-tekst .muted{display:block;font-size:.78rem;margin-top:.15rem;
  line-height:1.35;font-weight:400}

/* Vragen: één lichte strook per vraag, knoppen rechts. Rustiger over zeven
   vragen heen dan zeven losse blokken onder elkaar. */
.jaNee{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  padding:.65rem .1rem;border-bottom:1px solid var(--line)}
.jaNee:last-of-type{border-bottom:0}
.jaNee .jaNee-vraag{margin:0;font-weight:500;font-size:.93rem;line-height:1.4}
.jaNee .jaNee-knoppen{display:inline-flex;flex:0 0 auto;border:1.5px solid var(--line);
  border-radius:8px;overflow:hidden;background:#fff}
.jaNee .jaNee-knoppen label{display:block;margin:0;padding:0;font-weight:500;
  cursor:pointer;font-size:1rem}
.jaNee .jaNee-knoppen label > input[type="radio"]{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.jaNee .jaNee-knoppen span{display:block;padding:.34rem .85rem;font-size:.85rem;
  color:var(--muted);white-space:nowrap;transition:background .12s,color .12s}
.jaNee .jaNee-knoppen label:first-child span{border-right:1.5px solid var(--line)}
/* alleen "ja" kleurt vol; "nee" is de neutrale standaard en hoort niet te schreeuwen */
.jaNee .jaNee-knoppen label:first-child:has(> input:checked) span{
  background:var(--ink-2);color:#fff}
.jaNee .jaNee-knoppen label:last-child:has(> input:checked) span{
  background:#EFECF8;color:var(--ink);font-weight:600}
.jaNee .jaNee-knoppen label:focus-within span{outline:2px solid var(--ink-2);
  outline-offset:-2px}

.meter{display:flex;align-items:center;gap:1rem;margin:.3rem 0}
.meter-balk{flex:1;height:12px;border-radius:99px;background:#EDE9F7;overflow:hidden}
.meter-vul{height:100%;border-radius:99px;transition:width .5s ease}
.meter-cijfer{font-size:1.5rem;font-weight:800;margin:0;min-width:4rem;text-align:right}

@media(max-width:840px){
  .keuzetegels{grid-template-columns:1fr}
  .jaNee{flex-direction:column;align-items:flex-start;gap:.5rem}
}

/* ── scanband op de homepage ── */
.scanband{background:var(--ink);color:#fff;padding:2.6rem 1.5rem;margin:2.5rem 0}
.scanband-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;
  gap:2.2rem;align-items:center}
.scanband .eyebrow{color:#FBBF24}
.scanband h2{color:#fff;margin:.2rem 0 .5rem;font-size:1.9rem}
.scanband p{color:#CFC6EA}
.scanband-knop{background:#FBBF24;color:#2B1466;border-color:#FBBF24}
.scanband-knop:hover{background:#F3B008;color:#2B1466}
.scanband-lijst{list-style:none;padding:0;margin:0}
.scanband-lijst li{position:relative;padding-left:1.7rem;margin-bottom:.6rem;color:#fff;
  line-height:1.45}
.scanband-lijst li::before{content:"\2713";position:absolute;left:0;color:#FBBF24;font-weight:700}
.hero-sub{font-size:.92rem;color:var(--muted);margin-top:.6rem;max-width:44rem}

/* ── oproep onder een artikel ── */
.artikel-scan{margin-top:3rem;padding:1.6rem 1.7rem;border-radius:14px;
  background:#F7F4FE;border:2px solid #E3DCF7}
.artikel-scan h2{margin:.2rem 0 .5rem;font-size:1.35rem}
.artikel-scan p{margin:0 0 .8rem}

@media(max-width:840px){
  .keuzetegels{grid-template-columns:1fr}
  .scanband-in{grid-template-columns:1fr;gap:1.4rem}
  .meter-cijfer{font-size:1.3rem}
}

/* ── uitgebreide scan ─────────────────────────────────────────────────
   Zelfde specificiteitsval als bij de tegels: `form.stack label` is sterker
   dan een losse klasse, dus scopen onder de container. */
.rolgroepen{margin-top:1rem}
.rolgroep{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  padding:.75rem 0;border-bottom:1px solid var(--line)}
.rolgroep:last-child{border-bottom:0}
.rolgroep-tekst strong{display:block;font-size:.95rem;font-weight:600;color:var(--ink)}
.rolgroep-tekst .muted{display:block;font-size:.82rem;line-height:1.35;margin-top:.1rem}
.rolgroepen .rolgroep > input[type="number"]{flex:0 0 5.5rem;width:5.5rem;margin:0;
  text-align:center;font-size:1.05rem;font-weight:600;padding:.4rem .5rem}

.rapport-kop{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:1.2rem}
.prijskaart .prijs-groot{font-size:2.4rem;font-weight:800;color:var(--ink);margin:.2rem 0 0;
  line-height:1.1}
.stappenlijst{margin:0;padding-left:1.2rem}
.stappenlijst li{margin-bottom:.9rem;line-height:1.45}
.stappenlijst li strong{display:block;margin-bottom:.15rem}
.stappenlijst li .muted{display:block;font-size:.9rem}

/* Afdrukken: het rapport moet op papier of als PDF bruikbaar zijn — dat is hoe
   iemand het intern doorstuurt naar zijn zaakvoerder of boekhouder. */
@media print{
  header, footer, nav, .afdrukknop, #cmy-consent-bar, #cookiebar{display:none !important}
  .leespagina{max-width:none;padding:0}
  .card{break-inside:avoid;border:1px solid #ddd !important}
  a[href^="/"]::after{content:""}
  body{font-size:11pt}
}

/* ── prijsstaffel-tabel ── */
.tier-table{width:100%;border-collapse:collapse}
.tier-table th,.tier-table td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--line)}
.tier-table input{padding:.3rem .4rem}

/* ── gecentreerde auth-pagina's (inloggen + 2FA) ── */
.auth-wrap{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
.auth-card{width:100%;max-width:420px;background:linear-gradient(160deg,#FFFFFF 0%,#F4F0FC 100%);
  border:1px solid var(--line);border-radius:20px;padding:2rem 1.8rem;text-align:center;
  box-shadow:0 10px 40px rgba(76,29,149,.08)}
.auth-card h1,.auth-card h2{margin:.2rem 0 .4rem;color:var(--ink)}
.auth-card form{text-align:left;margin-top:1rem}
.auth-card label{display:block;font-weight:600;font-size:.88rem;margin:.6rem 0 .2rem;color:var(--ink)}
.auth-card input[type=email],.auth-card input[type=password],.auth-card input[name=code]{
  width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px}
.auth-card input[name=code]{letter-spacing:.3em;text-align:center;font-size:1.2rem;font-family:var(--font-mono)}
.auth-card .btn{width:100%;margin-top:1rem}
.auth-card .qr{background:#fff;padding:.8rem;border-radius:12px;display:inline-block;margin:.6rem 0}
.auth-card .muted{color:var(--muted)}
/* oude klassen blijven werken */
.login-wrap{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
.login-card{width:100%;max-width:420px}

/* ── go-live-lampje + onderhoudstoggle ── */
.golive{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:1rem 1.2rem;margin-bottom:1.2rem}
.golive.green{border-left:5px solid #16A34A}
.golive.amber{border-left:5px solid #FACC15}
.golive.red{border-left:5px solid #DC2626}
.golive-body{flex:1}
.golive-title{font-weight:700;color:var(--ink);margin:0;font-size:1.05rem;display:flex;align-items:center;gap:.6rem}
.golive-score{font-family:var(--font-mono);font-size:.85rem;color:var(--muted);font-weight:600}
.lamp{display:inline-block;width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 4px rgba(0,0,0,.04)}
.lamp-green{background:#16A34A;box-shadow:0 0 12px #16A34A,0 0 0 4px rgba(22,163,74,.15)}
.lamp-amber{background:#FACC15;box-shadow:0 0 12px #FACC15,0 0 0 4px rgba(250,204,21,.15)}
.lamp-red{background:#DC2626;box-shadow:0 0 12px #DC2626,0 0 0 4px rgba(220,38,38,.15)}
.golive-maint{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.switch{display:flex;align-items:center;gap:.5rem;cursor:default}
.switch-label{font-size:.8rem;color:var(--muted)}
.switch-track{width:42px;height:22px;background:#cfc8de;border-radius:99px;position:relative;transition:background .15s}
.switch-track.on{background:#DC2626}
.switch-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:left .15s}
.switch-track.on .switch-knob{left:22px}
.audit-table{width:100%;border-collapse:collapse;margin:.3rem 0}
.audit-table td{padding:.5rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.audit-icon{font-size:1.1rem;width:2rem}
.audit-sev{white-space:nowrap;text-align:right}
.audit-fail{background:#fdeaea}

/* ── afvinkbare manuele auditpunten ── */
.audit-check{width:24px;height:24px;border:2px solid var(--line);border-radius:6px;background:#fff;
  cursor:pointer;font-size:.9rem;color:#16A34A;line-height:1;padding:0}
.audit-check.on{background:#16A34A;border-color:#16A34A;color:#fff}

/* ── to-do-paneel (los van go-live) ── */
.todo-panel{background:#fff;border:1px solid var(--line);border-left:5px solid var(--marker);
  border-radius:14px;padding:1rem 1.2rem;margin:1rem 0}
.todo-list{margin:.3rem 0 0;padding-left:1.1rem}
.todo-list li{margin:.3rem 0}
.todo-list a{color:var(--ink)}

/* ── bulk-balk opvolging ── */
.bulkbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:.6rem .8rem;margin:.6rem 0}
.bulkbar .btn{padding:.3rem .7rem;font-size:.8rem}

/* ── quizresultaat met uitleg ── */
.quiz-score{display:flex;align-items:center;gap:1rem;border-radius:14px;padding:1rem 1.2rem;margin:.6rem 0;border:1px solid var(--line)}
.quiz-score.pass{background:#ECFDF3;border-color:#A7F3D0}
.quiz-score.fail{background:#FEF3F2;border-color:#FECDCA}
.quiz-big{font-size:2rem;font-weight:800;color:var(--ink);font-family:var(--font-mono)}
.quiz-review{display:flex;flex-direction:column;gap:.6rem}
.qr-item{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;padding:.7rem .9rem}
.qr-item.ok{border-left-color:#16A34A}
.qr-item.bad{border-left-color:#DC2626}
.qr-q{font-weight:600;margin:0 0 .3rem;color:var(--ink)}
.qr-line{margin:.15rem 0;font-size:.9rem}
.qr-expl{margin:.4rem 0 0;background:#F7F6FB;border-radius:8px;padding:.5rem .7rem;font-size:.9rem}

/* ── 'deze week'-focuskaart ── */
.focus-card{display:flex;align-items:center;gap:1rem;background:linear-gradient(160deg,#FFFFFF,#F4F0FC);
  border:1px solid var(--line);border-left:5px solid var(--rust);border-radius:16px;padding:1rem 1.2rem;margin:.4rem 0 1rem}
.focus-icon{font-size:1.8rem}
.focus-title{font-weight:700;color:var(--ink);margin:0 0 .15rem}

/* ── groei-cockpit ── */
.warn-card{border-left:4px solid #DC2626}

/* ── SSO-knoppen ── */
.sso-sep{display:flex;align-items:center;gap:.6rem;margin:1rem 0;color:var(--muted);font-size:.8rem}
.sso-sep::before,.sso-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.sso-btn{display:block;width:100%;text-align:center;margin:.4rem 0}

/* ── WCAG: consistente toetsenbord-focus + skip-link ── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:3px solid var(--ink-2);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--ink);color:#fff;
  padding:.6rem 1rem;border-radius:0 0 8px 0;text-decoration:none}
.skip-link:focus{left:0}

/* ══════════════════════════════════════════════════════════════════════
   UNIFORME OPMAAK — één ritme voor het hele platform.
   Staat bewust achteraan: deze regels vullen aan en corrigeren wat
   hierboven per pagina was gegroeid.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Koppen: vaste maten en voorspelbare witruimte ── */
.main h1{font-size:1.75rem;line-height:1.25;margin:0 0 .35rem}
.main h2{font-size:1.25rem;line-height:1.3;margin:2rem 0 .6rem}
.main h3{font-size:1.02rem;line-height:1.35;margin:0 0 .5rem}
.main .card h3{margin:0 0 .55rem}
.main .card h3 + p,.main .card h3 + ul,.main .card h3 + ol,
.main .card h3 + form,.main .card h3 + table{margin-top:0}
.main .eyebrow{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .15rem;font-weight:600}

/* ── Tekst: rustig en leesbaar ── */
.main p,.main li{line-height:1.6}
.main .card > p{max-width:75ch}
.main ul,.main ol{padding-left:1.15rem}
.main li{margin-bottom:.25rem}
.main .muted{color:var(--muted)}

/* ── Kaarten: gelijke maatvoering ── */
.main .card{padding:1.1rem 1.25rem;border-radius:14px;margin-bottom:1rem}
.main .card + .card{margin-top:0}
.main .cards{gap:1rem}
.main .card .big{line-height:1.15;margin:.1rem 0 .15rem}

/* ── Knoppen: drie formaten in plaats van tien ── */
.btn{padding:.5rem 1rem;font-size:.92rem;border-radius:9px;line-height:1.2;
  display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.btn-klein{padding:.32rem .7rem;font-size:.82rem}
.btn-mini{padding:.18rem .5rem;font-size:.76rem}
/* knoppen in tabellen zijn altijd klein, zonder inline-stijl */
.main table .btn{padding:.22rem .55rem;font-size:.78rem}
.main table form{display:inline-block;margin:0}
.main table form + form,.main table .btn + .btn{margin-left:.25rem}

/* ── Tabellen: rustig en consistent ── */
.main table{width:100%;border-collapse:collapse;margin:.6rem 0 1rem;font-size:.9rem}
.main table th{text-align:left;font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:700;
  padding:.55rem .6rem;border-bottom:2px solid var(--line);white-space:nowrap}
.main table td{padding:.6rem;border-bottom:1px solid var(--line);vertical-align:middle}
.main table tr:last-child td{border-bottom:none}
.main table td.getal,.main table th.getal{text-align:right;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ── Labels en tags: één vorm ── */
.tag,.pill{display:inline-block;padding:.12rem .5rem;border-radius:999px;
  font-size:.75rem;font-weight:600;line-height:1.5;background:#EFEAFB;color:#4C1D95;
  white-space:nowrap}
.tag.ok{background:#DCFCE7;color:#166534}
.tag.warn{background:#FEF9C3;color:#854D0E}
.tag.bad{background:#FEE2E2;color:#991B1B}

/* ── Formulieren: gelijk verticaal ritme ── */
.main form.stack label{margin:.9rem 0 .15rem;font-weight:600;font-size:.88rem}
.main form.stack > label:first-of-type{margin-top:.2rem}
.main form.stack .btn{margin-top:.9rem}
.main input,.main select,.main textarea{font-size:.92rem}
.main input:focus,.main select:focus,.main textarea:focus{outline:2px solid #C4B5FD;
  outline-offset:1px;border-color:#8B5CF6}

/* ── Meldingen ── */
.main .flash{padding:.7rem .9rem;border-radius:10px;margin:.7rem 0;font-size:.9rem}