/* se.css — StemExpert (Brecht Corbeel · schoolium.me)
   GEGENEREERD door tools/maak_assets.py: basis (tools/_basis_pq.css) + eigen laag (tools/se_eigen.css).
   Pas se_eigen.css aan, niet dit bestand. */
/* ===================================================================
   pq.css — PyQt5-cursus
   Laag boven styles.css/tokens.css.

   Basis = dezelfde designtaal als de andere lesprojecten (Baloo 2 +
   Nunito, pastelwas, witte kaarten met accentbalk, icoontegels,
   genummerde bolletjes, pilletjes) en de bladstructuur van de
   Blendercursus.

   Eigenheid = Qt Designer en de code-editor:
     * de layoutblauwdruk: rode (verticaal), blauwe (horizontaal) en
       paarse (raster) layoutkaders die meeademen met de breedte
     * elk beeld als venster op een bureaublad, met het etiket van de
       objectinspector (QMainWindow · 480×320)
     * code in een editorvenster, naast het venster dat die code oplevert
     * oefeningen: per stap de nieuwe regels in het groen
   =================================================================== */

:root{
  --brand:#0f766e; --brand-2:#f59e0b; --brand-ink:#115e59;
  --maxw:1240px;
  --dc:#0f766e;                              /* deelkleur, per pagina gezet */
  --dc-d:color-mix(in srgb,var(--dc) 72%,#1b1530);
  --dc-bg:color-mix(in srgb,var(--dc) 13%,#fff);
  --as-x:#ff3352; --as-y:#8bdc00; --as-z:#2890ff;   /* Blenders eigen askleuren */
  --film:#0d1016; --film-2:#161b26; --film-lijn:rgba(255,255,255,.12);
  --st-uitleg:var(--dc); --st-code:#3776ab; --st-ontleed:#10a5b8; --st-tabel:#5b6bd6; --st-doe:#f59e0b;
  --papier:#f8f7fd;
}
:root[data-theme="dark"]{
  --dc-bg:color-mix(in srgb,var(--dc) 22%,#191d33);
  --papier:#10131f;
}

/* ------------------------------------------------------------ achtergrond */
body{background:var(--papier)}
body::before{
  background:
    radial-gradient(52% 38% at 4% 0%, color-mix(in srgb,var(--dc) 20%,transparent) 0%, transparent 64%),
    radial-gradient(46% 34% at 100% 0%, #eaf2ff 0%, transparent 60%),
    radial-gradient(60% 40% at 96% 100%, #fdeef7 0%, transparent 62%),
    radial-gradient(50% 36% at 0% 100%, color-mix(in srgb,var(--dc) 12%,transparent) 0%, transparent 60%),
    var(--papier);
}
:root[data-theme="dark"] body::before{
  background:
    radial-gradient(52% 38% at 4% 0%, color-mix(in srgb,var(--dc) 22%,transparent) 0%, transparent 64%),
    radial-gradient(60% 40% at 96% 100%, #231428 0%, transparent 62%),
    var(--papier);
}
/* stippenraster uit de klasafspraken, als viewportraster */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--dc) 60%,transparent) 0 1.1px, transparent 1.6px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.18) 70%);
          mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.18) 70%);
}
:root[data-theme="dark"] body::after{opacity:.35}
main{max-width:calc(var(--maxw) + var(--rail-w))}

/* ------------------------------------------------------------ rail: merkteken */

.rail-sep{height:1px;margin:6px 8px;background:var(--line);flex:none}

/* ===================================================================
   HOOFDSTUKKOP — een scène, geen titelbalk
   =================================================================== */
.hs-hero{position:relative;border-radius:30px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#fff 0%,color-mix(in srgb,var(--dc) 8%,#fff) 100%);
  border:1px solid color-mix(in srgb,var(--dc) 18%,var(--line));box-shadow:var(--e-2);margin-bottom:26px}
:root[data-theme="dark"] .hs-hero{background:linear-gradient(160deg,#171b30 0%,color-mix(in srgb,var(--dc) 16%,#131729) 100%)}
.hs-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:30px;
  padding:34px 36px 30px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font:900 12px/1 var(--font-body);
  text-transform:uppercase;letter-spacing:.9px;color:var(--dc-d)}
:root[data-theme="dark"] .kicker{color:color-mix(in srgb,var(--dc) 70%,#fff)}
.kicker .kl{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:9px;
  background:var(--dc);color:#fff;font:800 14px/1 var(--font-display);box-shadow:0 3px 0 var(--dc-d)}
.hs-titel{margin:12px 0 10px;font:800 clamp(30px,3.5vw,48px)/1.02 var(--font-display);letter-spacing:-.6px;color:var(--ink);text-wrap:balance}
.hs-titel .hs-nr{display:block;font-size:15px;line-height:1;letter-spacing:1px;text-transform:uppercase;color:var(--dc);margin-bottom:8px;font-weight:900}
.hs-titel .streep{display:inline;background:linear-gradient(transparent 64%,color-mix(in srgb,var(--dc) 30%,transparent) 64% 92%,transparent 92%)}
.hs-sub{margin:0 0 10px;font-weight:800;color:var(--ink-soft);font-size:17px;line-height:1.35}
.hs-intro{margin:0;color:var(--ink-soft);line-height:1.68;max-width:62ch}
.hs-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pil{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border-radius:99px;background:#fff;
  font-weight:800;font-size:13px;color:var(--ink);box-shadow:0 2px 8px rgba(30,41,59,.10);border:1px solid var(--line)}
:root[data-theme="dark"] .pil{background:var(--surface)}
.pil i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--dc));display:block}
.pil .ico{color:var(--c,var(--dc))}

/* inhoudsopgave onder de kop: elk blad een chip met zijn soort */
.toc{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;padding:14px 36px 22px;
  background:none;border:0;border-radius:0;box-shadow:none;font-size:13px;
  border-top:1px dashed color-mix(in srgb,var(--dc) 25%,var(--line))}
.toc a{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 6px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;
  transition:transform var(--dur-1) var(--ease),border-color var(--dur-1)}
.toc a:hover{transform:translateY(-2px);border-color:var(--c);text-decoration:none}
.toc.lang{max-height:108px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.toc.lang.open{max-height:none;-webkit-mask-image:none;mask-image:none}
.toc-meer{position:relative;z-index:1;display:block;margin:-12px auto 18px;padding:7px 16px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);font:800 13px var(--font-body);color:var(--ink);cursor:pointer}
.toc-meer:hover{border-color:var(--dc);color:var(--dc-d)}
.toc a b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--c);color:#fff;
  font:800 11px var(--font-display)}

/* ===================================================================
   BLADEN — witte kaarten met accentbalk (klasafspraken)
   =================================================================== */
.blad{position:relative;background:var(--surface);border-radius:26px;margin:0 0 22px;padding:0 0 24px;
  border:1px solid var(--line);box-shadow:0 2px 10px rgba(30,41,59,.06);scroll-margin-top:84px}
.blad > *:not(.kop){margin-left:28px;margin-right:28px}
.kop{position:relative;display:flex;align-items:center;gap:14px;padding:18px 24px 16px 22px;margin:0 0 18px;
  border-left:9px solid var(--sc,var(--dc));border-radius:26px 26px 0 0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--sc,var(--dc)) 7%,transparent),transparent 70%)}
.kop .tegel{flex:none;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--sc) 15%,#fff);color:color-mix(in srgb,var(--sc) 78%,#1b1530)}
:root[data-theme="dark"] .kop .tegel{background:color-mix(in srgb,var(--sc) 25%,#191d33);color:color-mix(in srgb,var(--sc) 60%,#fff)}
.kop .tegel svg{width:26px;height:26px;stroke-width:2}
.kop .eyebrow{display:block;font:900 11.5px/1 var(--font-body);text-transform:uppercase;letter-spacing:1px;
  color:color-mix(in srgb,var(--sc) 80%,#1b1530);margin-bottom:5px}
:root[data-theme="dark"] .kop .eyebrow{color:color-mix(in srgb,var(--sc) 65%,#fff)}
.kop h2{margin:0;font:800 clamp(21px,2.1vw,27px)/1.12 var(--font-display);color:var(--ink)}
.kop .kop-nr{margin-left:auto;flex:none;font:800 13px var(--font-display);color:var(--ink-faint);
  padding:4px 10px;border-radius:99px;background:var(--surface-2)}
.b-uitleg{--sc:var(--st-uitleg)} .b-ontleed{--sc:var(--st-ontleed)} .b-tabel{--sc:var(--st-tabel)} .b-doe{--sc:var(--st-doe)}

.prose{font-size:16.5px;line-height:1.72;color:var(--ink)}
.prose p{margin:0 0 .85em}
.prose p:last-child{margin-bottom:0}
.prose ul,.prose ol{padding-left:1.25em;margin:.4em 0 .9em}
.prose li{margin:.25em 0}
.prose li::marker{color:var(--dc);font-weight:800}
.prose b,.prose strong{color:var(--ink)}
code{font-family:Consolas,monospace;font-size:.84em;font-weight:700;padding:.12em .45em;border-radius:7px;
  background:color-mix(in srgb,var(--dc) 9%,#fff);border:1px solid color-mix(in srgb,var(--dc) 22%,var(--line));
  color:color-mix(in srgb,var(--dc) 55%,#1d2036);white-space:nowrap}
:root[data-theme="dark"] code{background:color-mix(in srgb,var(--dc) 16%,#191d33);color:color-mix(in srgb,var(--dc) 45%,#fff)}
figcaption code{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#ffd2b0}

/* uitleg: screenshot op volle breedte (leesbaar), illustratie ernaast */
.ub{display:grid;gap:20px}
.ub.naast{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}
.ub.naast .prose{padding-top:2px}
.ub .prose{max-width:78ch}
.ub.smal{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);align-items:start}

/* ===================================================================
   ONTLEED — aanwijzers met cameravolg ("rack focus")
   =================================================================== */
.ob{display:grid;gap:18px}
.ob-stage{position:relative;transition:transform .65s cubic-bezier(.2,.8,.2,1);transform-origin:0 0}
.ob-stage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle at var(--fx,50%) var(--fy,50%), transparent 0 12%, rgba(5,7,11,.55) 34%)}
.ob.focus .ob-stage::after{opacity:1}
.pin{position:absolute;z-index:2;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:34px;height:34px;padding:0;
  border-radius:50%;border:3px solid #fff;background:var(--st-ontleed);color:#fff;font:800 16px/1 var(--font-display);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 color-mix(in srgb,var(--st-ontleed) 60%,#000),0 6px 16px rgba(0,0,0,.45);
  transition:transform .3s var(--ease-spring),background .2s}
.pin::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(255,255,255,.75);animation:pols 2.2s ease-out infinite}
@keyframes pols{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.ob.focus .ob-stage .pin{transform:translate(-50%,-50%) scale(calc(1 / var(--zoom,2.1)))}
.ob.focus .ob-stage .pin:not(.aan){opacity:.35}
.pin.aan{background:var(--brand)}
.ob-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.ob-lijst li{position:relative;display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;padding:12px 14px 12px 12px;
  border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 2px 6px rgba(30,41,59,.05);
  cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.ob-lijst li:hover,.ob-lijst li.aan{border-color:var(--st-ontleed);transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,165,184,.18)}
.ob-lijst b{display:block;font:800 16.5px/1.2 var(--font-display);color:var(--ink);margin:2px 0 3px}
.ob-lijst p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}

/* genummerd bolletje met diepte (klasafspraken) */
.nr{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;
  font:800 18px/1 var(--font-display);background:var(--c,var(--st-ontleed));
  box-shadow:0 3px 0 color-mix(in srgb,var(--c,var(--st-ontleed)) 62%,#000)}
.ob-hint{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-faint)}
.ob-hint .ico{color:var(--st-ontleed)}

/* ===================================================================
   NASLAG — tabellen
   =================================================================== */
.tbl-intro{font-size:15.5px;line-height:1.65;color:var(--ink);margin:0 0 12px}
.tbl-intro.tbl-gotcha{padding:12px 16px;border-radius:16px;background:var(--warn-bg);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
:root[data-theme="dark"] .tbl-intro.tbl-gotcha{background:color-mix(in srgb,var(--warn) 14%,#191d33)}
.tabel-wrap > p.tbl-intro{margin:14px 16px 12px}
.tabel-wrap{position:relative;overflow-x:auto;border-radius:18px;border:1px solid var(--line);margin:0 0 16px;background:var(--surface)}
.tabel-wrap.ingeklapt{max-height:560px;overflow:hidden}
.tabel-wrap.ingeklapt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:linear-gradient(transparent,var(--surface))}
.tbl-meer{display:flex;justify-content:center;margin:-8px 0 18px}
.tbl-meer button{font:800 14px var(--font-body);padding:9px 18px;border-radius:99px;border:2px solid var(--st-tabel);background:var(--surface);
  color:var(--st-tabel);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.tbl-meer button:hover{background:var(--st-tabel);color:#fff}
.tabelblad-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.tabelblad-tbl caption{caption-side:top;text-align:left;padding:14px 16px 10px;font:800 18px var(--font-display);color:var(--ink);
  background:linear-gradient(90deg,color-mix(in srgb,var(--st-tabel) 9%,transparent),transparent)}
.tabelblad-tbl caption .tbl-klasse{margin-left:8px;font:700 12px Consolas,monospace;color:var(--ink-faint)}
.tabelblad-tbl th{position:sticky;top:0;z-index:1;text-align:left;padding:10px 12px;font:900 11px var(--font-body);text-transform:uppercase;
  letter-spacing:.7px;color:var(--ink-soft);background:var(--surface-2);border-bottom:2px solid var(--line)}
.tabelblad-tbl th .tbl-bron{text-transform:none;letter-spacing:0;font-weight:700;color:var(--ink-faint)}
.tabelblad-tbl td{padding:9px 12px;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.45;color:var(--ink)}
.tabelblad-tbl tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.tabelblad-tbl tbody tr:hover td{background:color-mix(in srgb,var(--st-tabel) 7%,var(--surface))}
.tabelblad-tbl td.tbl-id{font-weight:800;white-space:nowrap;color:var(--ink)}
.tabelblad-tbl td.tbl-toets{font:700 13px Consolas,monospace;white-space:nowrap}
.tabelblad-tbl td.tbl-node-uitleg{color:var(--ink-soft)}
.ty{display:inline-block;padding:2px 8px;border-radius:99px;font:900 10.5px/1.5 var(--font-body);letter-spacing:.5px;
  color:var(--t);background:color-mix(in srgb,var(--t) 13%,transparent);border:1px solid color-mix(in srgb,var(--t) 30%,transparent)}

/* ===================================================================
   DOEN — oefening + oefenbestand
   =================================================================== */
.doe{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
.opdracht{margin:0 0 14px;font-size:17px;font-weight:700;line-height:1.55;color:var(--ink)}
.stappen{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;counter-reset:st}
.stappen>li::before{content:none !important;display:none !important}
.stappen li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:10px 14px 10px 10px !important;margin:0 !important;border-radius:16px;
  background:var(--surface-2);border:1px solid var(--line);font-size:15px;line-height:1.5}
.stappen .nr{width:34px;height:34px;font-size:16px;--c:var(--st-doe)}
.resultaat{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:12px 14px 12px 10px;border-radius:16px;
  background:var(--ok-bg);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);font-size:15px;line-height:1.5}
:root[data-theme="dark"] .resultaat{background:color-mix(in srgb,var(--ok) 14%,#191d33)}
.resultaat .nr{--c:var(--ok);width:34px;height:34px}
.resultaat b{display:block;font:800 15px var(--font-display);color:color-mix(in srgb,var(--ok) 70%,#0a2b20)}
:root[data-theme="dark"] .resultaat b{color:#6fe3b8}

/* voor/na-schuif (start tegenover klaar) */
.vergelijk{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:#000;cursor:ew-resize;user-select:none;
  box-shadow:0 14px 34px rgba(13,16,22,.28);touch-action:pan-y}
.vergelijk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.vergelijk .na{clip-path:inset(0 0 0 var(--v,50%))}
.vergelijk .greep{position:absolute;top:0;bottom:0;left:var(--v,50%);width:3px;margin-left:-1.5px;background:#fff;z-index:2;
  box-shadow:0 0 12px rgba(0,0,0,.6)}
.vergelijk .greep::after{content:"◀ ▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:8px 10px;border-radius:99px;
  background:#fff;color:#111;font:900 11px var(--font-body);white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.vergelijk .lbl{position:absolute;top:14px;z-index:2;padding:5px 11px;border-radius:99px;font:900 11px var(--font-body);letter-spacing:.8px;
  text-transform:uppercase;background:rgba(13,16,22,.7);color:#fff}
.vergelijk .lbl.v{left:14px}.vergelijk .lbl.n{right:14px;background:var(--ok)}

/* ===================================================================
   LICHTBAK
   =================================================================== */
.lichtbak{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;background:rgba(6,8,12,.94);backdrop-filter:blur(8px)}
.lichtbak.open{display:flex}
.lb-balk{display:flex;align-items:center;gap:12px;padding:12px 18px;color:#dfe4f2;font:700 14px var(--font-body)}
.lb-balk .lb-titel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-balk button{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;display:grid;place-items:center;font:800 16px var(--font-body)}
.lb-balk button:hover{background:rgba(255,255,255,.14)}
.lb-veld{flex:1;overflow:auto;display:grid;place-items:center;padding:0 18px 18px}
.lb-veld img{max-width:100%;max-height:calc(100vh - 90px);border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6);cursor:zoom-in}
.lb-veld.echt img{max-width:none;max-height:none;cursor:zoom-out}

/* ===================================================================
   DEELOVERZICHT, STARTPAGINA, BIBLIOTHEEK
   =================================================================== */
.hero-groot{position:relative;border-radius:34px;overflow:hidden;isolation:isolate;margin-bottom:28px;min-height:420px;
  background:var(--film);color:#fff;box-shadow:var(--e-3)}
.hero-groot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-groot::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,10,16,.88) 0%,rgba(8,10,16,.55) 45%,rgba(8,10,16,.05) 80%),
             linear-gradient(0deg,rgba(8,10,16,.7),transparent 40%)}
.hero-groot .balk{position:absolute;left:0;right:0;height:34px;background:#000;z-index:2}
.hero-groot .balk.b{top:0}.hero-groot .balk.o{bottom:0}
.hero-groot-in{position:relative;z-index:3;padding:64px 48px 62px;max-width:720px}
.hero-groot .kicker{color:#b9f5c9}
.titel-mega{margin:14px 0 12px;font:800 clamp(44px,6.4vw,86px)/.92 var(--font-display);letter-spacing:-1.5px}
.titel-mega span{display:inline-block;-webkit-text-stroke:3px #fff;paint-order:stroke fill;color:var(--c,#f5792a);
  text-shadow:4px 5px 0 rgba(0,0,0,.55)}
.hero-groot p{font-size:18px;line-height:1.6;color:#dfe4f2;max-width:56ch;margin:0}
.hero-groot .hs-meta .pil{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.18);box-shadow:none}

.sectiekop{display:flex;align-items:center;gap:12px;margin:34px 0 16px}
.sectiekop h2{margin:0;font:800 28px var(--font-display)}
.sectiekop .tegel{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--dc-bg);color:var(--dc-d)}
.sectiekop .tegel svg{width:24px;height:24px}
.sectiekop p{margin:0 0 0 auto;color:var(--ink-faint);font-weight:700}

.delengrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.deel-card{position:relative;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;text-decoration:none !important;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 2px 10px rgba(30,41,59,.06);color:var(--ink);
  transition:transform .25s var(--ease-out),box-shadow .25s}
.deel-card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 18px 36px rgba(30,41,59,.16)}
.deel-card .dc-beeld{position:relative;aspect-ratio:16/9;background:var(--film);overflow:hidden}
.deel-card .dc-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.deel-card:hover .dc-beeld img{transform:scale(1.06)}
.deel-card .dc-letter{position:absolute;left:14px;bottom:-20px;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--dc);color:#fff;font:800 26px var(--font-display);box-shadow:0 4px 0 var(--dc-d),0 10px 20px rgba(0,0,0,.2);
  border:3px solid #fff;z-index:2}
.deel-card .dc-tekst{padding:28px 16px 16px;display:grid;gap:4px}
.deel-card b{font:800 19px/1.15 var(--font-display)}
.deel-card span{font-size:13.5px;font-weight:700;color:var(--ink-faint)}

.tegelgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.tegel{position:relative;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;text-decoration:none !important;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-top:6px solid var(--dc);box-shadow:0 2px 10px rgba(30,41,59,.06);
  transition:transform .25s var(--ease-out),box-shadow .25s}
.tegel:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(30,41,59,.16)}
.tegel-beeld{position:relative;aspect-ratio:16/9;background:var(--film);overflow:hidden}
.tegel-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.tegel:hover .tegel-beeld img{transform:scale(1.06)}
.tegel-leeg{position:absolute;inset:0}
.tegel .t-nr{position:absolute;right:12px;top:12px;z-index:2;padding:4px 10px;border-radius:99px;background:rgba(13,16,22,.72);
  color:#fff;font:800 13px var(--font-display);backdrop-filter:blur(4px)}
.tegel-tekst{padding:14px 16px 16px;display:grid;gap:5px}
.tegel-tekst b{font:800 18px/1.18 var(--font-display)}
.tegel-tekst .bk-sub{font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.tegel-tel{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tegel-tel span{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--ink-faint);
  padding:2px 8px;border-radius:99px;background:var(--surface-2)}
.tegel-tel i{width:8px;height:8px;border-radius:50%;background:var(--c)}

/* bibliotheek van oefenbestanden */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.filters button{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 8px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);font:800 13px var(--font-body);color:var(--ink);cursor:pointer}
.filters button b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--c);color:#fff;font:800 12px var(--font-display)}
.filters button.aan{border-color:var(--c);box-shadow:0 0 0 2px var(--c) inset}
.bib{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.bib .blendkaart.verborgen{display:none}
.bk-waar{font-size:12.5px;color:#aeb6cf;line-height:1.45}
.bk-waar a{color:#ffd2b0}

/* callouts uit styles.css iets warmer */
.callout{border-radius:18px}

/* zoekpagina */
.zoek-invoer{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:20px;background:var(--surface);border:2px solid var(--line);
  box-shadow:var(--e-1);margin-bottom:16px}
.zoek-invoer:focus-within{border-color:var(--brand)}
.zoek-invoer input{flex:1;border:0;outline:0;background:transparent;font:700 18px var(--font-body);color:var(--ink)}
.zoek-resultaten{display:grid;gap:8px}
.zoek-item{display:grid;gap:2px;padding:12px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);
  text-decoration:none !important;color:var(--ink)}
.zoek-item:hover{border-color:var(--brand);transform:translateX(3px)}
.zi-pad{font-size:12px;font-weight:800;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.6px}
.zi-titel{font:800 17px var(--font-display)}
.zi-kernwoorden{font-size:13px;color:var(--ink-soft)}
.zoek-leeg{color:var(--ink-faint);font-weight:700}

/* ===================================================================
   BEWEGING
   =================================================================== */
.opkomst{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.opkomst.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .bd-venster,.pin::before,.collage img{animation:none}
  .opkomst{opacity:1;transform:none;transition:none}
  .ob-stage{transition:none}
}

/* ===================================================================
   SMAL SCHERM
   =================================================================== */
@media (max-width:1100px){
  .hs-hero-in{grid-template-columns:1fr}
  .ub.naast,.ub.smal,.doe{grid-template-columns:1fr}
}
@media (max-width:680px){
  .blad > *:not(.kop){margin-left:16px;margin-right:16px}
  .kop{padding:14px 16px 12px 14px;border-left-width:7px}
  .kop .tegel{width:40px;height:40px}
  .kop .kop-nr{display:none}
  .hs-hero-in{padding:24px 18px 20px}
  .toc{padding:12px 18px 18px}
  .hero-groot-in{padding:52px 22px 56px}
  .ob-lijst{grid-template-columns:1fr}
  .qlabel{display:none}
}

/* ===================================================================
   AFDRUK / PDF
   =================================================================== */
@media print{
  body::before,body::after,.blauwdruk,.qlabel,.zoek-knop,.loep,.lichtbak,.toc,.draai-hint,.tbl-meer,.pin::before{display:none !important}
  .blad{break-inside:auto;box-shadow:none;border:1px solid #d9dcef}
  .kop{break-after:avoid}
  figure.ill,.codeblok,.ob-lijst li,.stappen li{break-inside:avoid;box-shadow:none}
  .tabel-wrap.ingeklapt{max-height:none;overflow:visible}
  .tabel-wrap.ingeklapt::after{display:none}
  .opkomst{opacity:1 !important;transform:none !important}
  .ob.focus .ob-stage{transform:none}
  .hs-hero{box-shadow:none}
  .rail,.topbar,.no-print{display:none !important}
  main{margin:0 !important;padding:0 !important;max-width:none}
}
.pdf-hoofdstuk-start{break-before:page}

/* ===================================================================
   GALERIJ — rasters van echte renders (v2, 2026-09-23)
   =================================================================== */
:root{--st-galerij:#e356a7}
.b-galerij{--sc:var(--st-galerij)}
.galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.galerij.klein{margin-top:18px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.gal-item{display:grid;gap:8px;align-content:start}
.gal-titel{font:800 17px/1.15 var(--font-display);color:var(--ink);display:flex;align-items:center;gap:8px}
.gal-titel::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--st-galerij);transform:rotate(45deg);flex:none}
figure.ill.gal{border-radius:16px}
figure.ill.gal figcaption{font-size:13px;padding:8px 12px 9px}
.tbl-kop{margin-bottom:14px}
.tbl-kop .tbl-intro{margin:0}

/* ===================================================================
   OEFENINGEN (projecten, 2026-09-26)
   =================================================================== */
.niveau{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 10px;border-radius:99px;background:#fff;
  border:1px solid var(--line);font-weight:900;font-size:13px;color:var(--nk);box-shadow:0 2px 8px rgba(30,41,59,.08)}
:root[data-theme="dark"] .niveau{background:var(--surface)}
.niveau .bollen{display:inline-flex;gap:3px}
.niveau .bollen i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--nk) 18%,transparent);display:block}
.niveau .bollen i.aan{background:var(--nk)}
.niveau.klein{padding:0;border:0;box-shadow:none;background:none;font-size:0}
.sectiekop .tegel .niveau.klein .bollen i{width:6px;height:6px}

.oef-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.oef-groep{margin-bottom:10px}
.oef-kaart{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;text-decoration:none !important;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-top:6px solid var(--nk);box-shadow:0 2px 10px rgba(30,41,59,.06);
  transition:transform .25s var(--ease-out),box-shadow .25s}
.oef-kaart:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(30,41,59,.16)}
.ok-beeld{position:relative;aspect-ratio:16/9;background:var(--film);overflow:hidden}
.ok-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.oef-kaart:hover .ok-beeld img{transform:scale(1.06)}
.ok-nr{position:absolute;left:12px;bottom:10px;font:800 44px/1 var(--font-display);color:#fff;
  -webkit-text-stroke:2px rgba(0,0,0,.25);text-shadow:0 3px 12px rgba(0,0,0,.6)}
.ok-tekst{padding:14px 16px 16px;display:grid;gap:6px}
.ok-tekst .niveau{justify-self:start;padding:3px 10px 3px 8px;font-size:12px;box-shadow:none}
.ok-tekst b{font:800 20px/1.15 var(--font-display)}
.ok-sub{font-size:14px;line-height:1.45;color:var(--ink-soft)}
.ok-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;font-weight:800;color:var(--ink-faint)}
.ok-meta span{display:inline-flex;align-items:center;gap:5px}
.ok-tech{display:flex;flex-wrap:wrap;gap:5px}
.ok-tech span{padding:2px 8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink-soft)}
.oef-groep.verborgen{display:none}

.oef-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.oef-knoppen .bk-dl.tweede{background:var(--film-2);color:#fff !important}

/* voortgang: blijft bovenaan staan tijdens het werken */
.voortgang{position:sticky;top:calc(var(--topbar-h) + 8px);z-index:40;display:flex;align-items:center;gap:14px;
  margin:0 0 22px;padding:10px 16px;border-radius:18px;background:var(--glass-strong);backdrop-filter:blur(12px);
  border:1px solid var(--line);box-shadow:var(--e-2)}
.vg-balk{flex:1;height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.vg-balk i{display:block;height:100%;width:var(--p,0%);border-radius:99px;
  background:linear-gradient(90deg,#12b981,#8bdc00);transition:width .4s var(--ease-out)}
.vg-tekst{font-size:14px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.vg-tekst b{font:800 18px var(--font-display);color:var(--ink)}
.vg-wis{border:0;background:none;font:700 13px var(--font-body);color:var(--ink-faint);cursor:pointer;text-decoration:underline}
.voortgang.klaar .vg-tekst::after{content:" \00B7  klaar!";color:#12b981;font-weight:900}

.leer{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:6px}
.leer li{position:relative;padding-left:28px}
.leer li::before{content:"\2713";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:#12b981;color:#fff;
  font:900 12px/20px var(--font-body);text-align:center}
.hs-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.hs-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:10px;background:var(--surface);
  border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink) !important;text-decoration:none !important}
.hs-chip b{display:grid;place-items:center;min-width:24px;height:22px;padding:0 5px;border-radius:7px;background:var(--c);color:#fff;font:800 11px var(--font-display)}
.fase-lijst{display:grid;gap:6px}
.fase-lijst a{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:8px 12px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink) !important;text-decoration:none !important;font-weight:800}
.fase-lijst a b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--dc);color:#fff;font:800 14px var(--font-display)}
.fase-lijst a span{font-size:12.5px;color:var(--ink-faint)}

/* fasen en stappen */
.fase{margin:34px 0 10px;scroll-margin-top:140px}
.fase-kop{position:relative;padding:22px 26px;border-radius:26px;margin-bottom:16px;color:#fff;overflow:hidden;
  background:linear-gradient(120deg,var(--film) 0%,color-mix(in srgb,var(--dc) 55%,var(--film)) 100%)}
.fase-kop::after{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:28px 28px;-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
.fase-nr{font:900 12px var(--font-body);letter-spacing:1.2px;text-transform:uppercase;color:#b9f5c9}
.fase-kop h2{margin:4px 0 6px;font:800 30px/1.1 var(--font-display);color:#fff}
.fase-kop p{margin:0;max-width:75ch;color:#dfe4f2;line-height:1.6;position:relative;z-index:1}
.fase-kop code{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#b9f5c9}

.stap{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:24px;margin:0 0 16px;
  box-shadow:0 2px 10px rgba(30,41,59,.06);scroll-margin-top:140px;transition:border-color .3s,box-shadow .3s}
.stap.gedaan{border-color:color-mix(in srgb,#12b981 45%,var(--line))}
.stap.gedaan .st-in{opacity:.55}
.st-kop{display:flex;align-items:center;gap:12px;padding:14px 18px 0}
.st-kop h3{margin:0;font:800 21px/1.2 var(--font-display);color:var(--ink)}
.st-nr{--c:var(--dc);width:40px;height:40px;font-size:18px}
.stap.gedaan .st-nr{--c:#12b981}
.st-modus{display:block;font:900 11px var(--font-body);letter-spacing:.9px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px}
.st-vink{order:3;margin-left:auto;cursor:pointer;display:grid;place-items:center}
.st-vink input{position:absolute;opacity:0;pointer-events:none}
.st-vink span{width:34px;height:34px;border-radius:11px;border:2px solid var(--line);background:var(--surface-2);display:grid;place-items:center;
  transition:all .2s}
.st-vink span::after{content:"\2713";font:900 18px var(--font-body);color:#fff;opacity:0;transform:scale(.4);transition:all .2s}
.st-vink input:checked + span{background:#12b981;border-color:#12b981}
.st-vink input:checked + span::after{opacity:1;transform:none}
.st-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;padding:12px 18px 18px;transition:opacity .3s}
.stap.zonder-beeld .st-in{grid-template-columns:1fr}
.st-tekst p{margin:10px 0 0;font-size:16px;line-height:1.7;color:var(--ink)}
.st-beeld{align-self:start}
.st-beeld figcaption{display:none}

.toetsen{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.toetsen .dan{color:var(--ink-faint);font-weight:900}
.kbd-combi{display:inline-flex;align-items:center;gap:3px}
.kbd-combi i{font-style:normal;font-weight:900;color:var(--ink-faint);font-size:12px}
kbd{display:inline-block;min-width:30px;padding:4px 9px 5px;border-radius:8px;text-align:center;
  font:800 13px/1.1 var(--font-body);color:var(--ink);background:linear-gradient(#fff,#eef0f7);
  border:1px solid #c9cde2;box-shadow:0 3px 0 #b7bcd6,0 4px 8px rgba(30,41,59,.12)}
:root[data-theme="dark"] kbd{background:linear-gradient(#2a2f4c,#20243d);border-color:#3a4063;box-shadow:0 3px 0 #141729;color:#eef0fb}
.muis{display:inline-block;padding:4px 10px;border-radius:99px;background:var(--surface-2);border:1px dashed var(--line);font-size:12.5px;font-weight:800;color:var(--ink-soft)}
.menupad{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:8px;padding:5px 10px;border-radius:10px;
  background:#2b2b2b;color:#e6e6e6;font:600 13px var(--font-body)}
.menupad .ico{color:#9aa0a6}
.menupad b{color:#777;font-weight:900}
.waarden{margin-top:12px;width:100%;border-collapse:separate;border-spacing:0;border-radius:12px;overflow:hidden;background:#2b2b2b;
  color:#e6e6e6;font-size:13.5px}
.waarden caption{caption-side:top;text-align:left;padding:7px 12px;background:#3d3d3d;color:#fff;font:800 12px var(--font-body);
  border-radius:12px 12px 0 0}
.waarden caption .ico{vertical-align:-3px;margin-right:4px}
.waarden th{text-align:right;font-weight:600;color:#b8b8b8;padding:5px 10px;width:45%}
.waarden td{padding:5px 10px;font-weight:800}
.waarden td code,.waarden th code{background:none;border:0;color:inherit;padding:0}
.waarden tr + tr th,.waarden tr + tr td{border-top:1px solid #353535}
.st-tip,.st-letop{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:14px;font-size:14.5px;line-height:1.5}
.st-tip{background:var(--info-bg);color:color-mix(in srgb,var(--info) 60%,#0b1b33)}
.st-letop{background:var(--warn-bg);color:color-mix(in srgb,var(--warn) 55%,#2b1a00)}
:root[data-theme="dark"] .st-tip{background:color-mix(in srgb,var(--info) 14%,#191d33);color:#b9d6ff}
:root[data-theme="dark"] .st-letop{background:color-mix(in srgb,var(--warn) 14%,#191d33);color:#ffd9a0}
.st-tip b,.st-letop b{margin-right:4px}

@media (max-width:980px){ .st-in{grid-template-columns:1fr} }
@media (max-width:680px){ .voortgang{top:calc(var(--topbar-h) + 4px);padding:8px 12px} .vg-wis{display:none} .fase-kop h2{font-size:24px} }

/* PDF / afdruk van een oefening */
@media print{
  .voortgang,.st-vink,.oef-knoppen{display:none !important}
  .fase-kop{break-after:avoid}
  .stap{break-inside:avoid;box-shadow:none;border:1px solid #d9dcef;margin-bottom:10px}
  .st-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;opacity:1 !important}
  .stap.zonder-beeld .st-in{grid-template-columns:1fr}
  .st-tekst p{font-size:12.5px;line-height:1.55}
  .st-kop h3{font-size:17px}
  .waarden{font-size:11.5px}
  kbd{box-shadow:none}
}
@media print{
  .fase{break-before:page;margin-top:0}
  .fase-kop{break-inside:avoid;padding:14px 18px;border-radius:16px;background:#1a1f2b !important}
  .fase-kop::after{display:none}
  .fase-kop h2{font-size:22px}
  .waarden{background:#f4f5f9 !important;color:#1d2036 !important;border:1px solid #d9dcef}
  .waarden caption{background:#e3e6f1 !important;color:#1d2036 !important}
  .waarden th,.waarden td{background:none !important;text-transform:none !important;letter-spacing:0 !important;
    font-size:11.5px !important;border-bottom:0 !important}
  .waarden th{color:#555a78 !important;font-weight:600 !important}
  .waarden td{color:#1d2036 !important;font-weight:800 !important}
  .waarden tr + tr th,.waarden tr + tr td{border-top:1px solid #dfe2ee !important}
  .menupad{background:#eceef5 !important;color:#1d2036 !important}
  .menupad b{color:#8a90ab !important}
}

/* kopregel die enkel op papier verschijnt (was ongestijld: een kaal tekstblokje) */
.printkop{display:none}
@media print{
  .printkop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 10px;padding:0 0 8px;
    border-bottom:2px solid var(--dc);font:700 10px var(--font-body);color:#555a78}
  .pk-mark{display:flex;align-items:center;gap:8px}
  .pk-mark b{font:800 13px var(--font-display);color:#1d2036}
  .pk-dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff,#ffd2b0 40%,#f5792a 72%)}
  .pk-r{text-align:right;line-height:1.35}
  .merkregel{color:#8a90ab;font-weight:600}
}

/* ===================================================================
   PYQT-LAAG
   =================================================================== */
:root{
  --bureau-a:#e8eef9; --bureau-b:#f4effb; --bureau-stip:rgba(55,118,171,.14);
  --code-bg:#1d1f27; --code-kop:#15161c; --code-lijn:#2a2d3b; --code-ink:#d9dcea; --code-nr:#5c6079;
  --qt:#2fa84f; --qt-licht:#41cd52; --py-blauw:#3776ab; --py-geel:#ffd43b;
  --st-galerij:#e356a7;
}
:root[data-theme="dark"]{
  --bureau-a:#1a2034; --bureau-b:#211a33; --bureau-stip:rgba(255,255,255,.06);
}
.b-code{--sc:var(--st-code)}

/* ------------------------------------------------------------ merktekens */
.qt-logo{display:inline-grid;place-items:center;padding:1px 6px 2px;border-radius:9px 9px 9px 3px;background:#fff;color:var(--qt);
  font:800 17px/1 var(--font-display);letter-spacing:-.5px;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.qt-logo.klein{font-size:12px;padding:1px 5px 2px;border-radius:6px 6px 6px 2px;background:var(--qt);color:#fff;box-shadow:none}
.py-badge{position:relative;display:inline-block;width:22px;height:22px;flex:none}
.py-badge i{position:absolute;width:13px;height:13px;border-radius:4px}
.py-badge i:first-child{left:0;top:0;background:var(--py-blauw)}
.py-badge i:last-child{right:0;bottom:0;background:var(--py-geel);box-shadow:-1px -1px 0 2px var(--code-kop)}

/* ------------------------------------------------------------ layoutblauwdruk */
.blauwdruk{position:absolute;right:-2%;top:-6%;width:58%;height:112%;z-index:0;pointer-events:none;opacity:.55;
  display:flex;align-items:center;justify-content:flex-end;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
.blauwdruk.groot{width:62%;opacity:.35}
:root[data-theme="dark"] .blauwdruk{opacity:.28}
.bd-venster{width:92%;min-width:320px;border:1.6px solid color-mix(in srgb,var(--dc) 45%,transparent);border-radius:12px;
  background:color-mix(in srgb,#fff 45%,transparent);animation:bd-adem 11s ease-in-out infinite alternate;margin-right:4%}
:root[data-theme="dark"] .bd-venster{background:rgba(255,255,255,.03)}
@keyframes bd-adem{0%{width:92%}100%{width:64%}}
.bd-titel{display:flex;justify-content:flex-end;gap:7px;padding:6px 10px;border-bottom:1.6px solid color-mix(in srgb,var(--dc) 35%,transparent)}
.bd-titel i{width:9px;height:9px;border-radius:3px;border:1.5px solid color-mix(in srgb,var(--dc) 55%,transparent)}
.bd-v{display:flex;flex-direction:column;gap:9px;margin:12px;padding:10px;border:1.6px dashed #dc2626;border-radius:4px}
.bd-h{display:flex;gap:9px;padding:6px;border:1.6px dashed #2563eb;border-radius:4px}
.bd-w{height:20px;border-radius:5px;background:color-mix(in srgb,var(--dc) 18%,#fff);border:1px solid color-mix(in srgb,var(--dc) 30%,transparent)}
:root[data-theme="dark"] .bd-w{background:color-mix(in srgb,var(--dc) 22%,#191d33)}
.bd-w.k{flex:0 0 70px}
.bd-w.g{flex:1}
.bd-w.knop{flex:0 0 74px;background:color-mix(in srgb,var(--dc) 55%,#fff)}
.bd-stretch{flex:1;align-self:center;height:8px;
  background:repeating-linear-gradient(90deg,transparent 0 5px,color-mix(in srgb,#2563eb 55%,transparent) 5px 7px);
  -webkit-mask-image:linear-gradient(transparent 3px,#000 3px 5px,transparent 5px);mask-image:linear-gradient(transparent 3px,#000 3px 5px,transparent 5px)}
.bd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:6px;border:1.6px dashed #7c3aed;border-radius:4px}
.bd-grid span{height:34px;border-radius:6px;background:color-mix(in srgb,var(--dc) 12%,#fff);border:1px solid color-mix(in srgb,var(--dc) 25%,transparent)}
:root[data-theme="dark"] .bd-grid span{background:color-mix(in srgb,var(--dc) 16%,#191d33)}

/* ------------------------------------------------------------ bureaublad: het kader rond elk beeld */
figure.ill{margin:0 auto;position:relative;border-radius:18px;overflow:hidden;max-width:calc(var(--lw,100%) + 28px);
  background:linear-gradient(150deg,var(--bureau-a),var(--bureau-b));border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(30,41,59,.05)}
figure.ill .zoeker{position:relative;padding:4px}
figure.ill .zoeker::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
  background-image:radial-gradient(circle at 50% 50%,var(--bureau-stip) 0 1px,transparent 1.5px);background-size:16px 16px}
figure.ill img{position:relative;display:block;width:100%;height:auto;margin:0 auto}
figure.ill.illustratie{--lw:100%}
figure.ill.illustratie .zoeker{padding:0}
figure.ill.illustratie .zoeker::before{display:none}
figure.ill figcaption{position:relative;padding:9px 14px 10px;font-size:13.5px;line-height:1.45;color:var(--ink-soft);
  background:color-mix(in srgb,var(--surface) 80%,transparent);border-top:1px solid var(--line)}
figure.ill figcaption .fc-id{display:inline-block;margin-right:8px;padding:1px 7px;border-radius:6px;background:var(--surface-2);
  border:1px solid var(--line);font:700 11px Consolas,monospace;color:var(--ink-faint);vertical-align:1px}
figcaption code{white-space:normal;background:var(--surface-2);border-color:var(--line);color:color-mix(in srgb,var(--dc) 60%,#1d2036)}
:root[data-theme="dark"] figcaption code{color:color-mix(in srgb,var(--dc) 45%,#fff)}
.qlabel{position:absolute;z-index:3;left:10px;top:10px;display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;
  border-radius:8px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);
  font:600 11.5px/1.2 Consolas,monospace;color:var(--ink-soft);backdrop-filter:blur(4px);pointer-events:none;
  opacity:.0;transform:translateY(-3px);transition:opacity var(--dur-2),transform var(--dur-2)}
.qlabel b{color:var(--qt);font-weight:800}
.qlabel .ico{width:14px;height:14px;color:var(--qt)}
figure.ill:hover .qlabel{opacity:1;transform:none}
.zoek-knop{position:absolute;z-index:4;right:10px;bottom:10px;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);cursor:zoom-in;
  display:grid;place-items:center;color:var(--ink);background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(4px);transition:opacity var(--dur-2),transform var(--dur-2)}
figure.ill:hover .zoek-knop{opacity:1;transform:none}
.zoek-knop svg{width:19px;height:19px}
figure.ill.shot .zoeker{cursor:crosshair}
figure.ill.held{max-width:100%;box-shadow:var(--e-2)}
figure.ill.held img{max-height:400px;width:auto;max-width:100%}
.loep{position:fixed;z-index:120;width:230px;height:230px;border-radius:50%;pointer-events:none;display:none;
  border:4px solid #fff;box-shadow:0 0 0 2px var(--dc),0 18px 40px rgba(0,0,0,.35);background-repeat:no-repeat;background-color:#fff}
.loep::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(var(--dc),var(--dc)) center/1.5px 22px no-repeat,linear-gradient(var(--dc),var(--dc)) center/22px 1.5px no-repeat}
figure.ill.ontbreekt{min-height:200px;display:flex;flex-direction:column;--lw:100%}
figure.ill.ontbreekt img{display:none}
figure.ill.ontbreekt .ontbreekt-kop{flex:1;display:grid;place-items:center;gap:8px;padding:30px 20px;text-align:center;color:var(--ink-soft)}
.ontbreekt-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;background:var(--surface);border:1px dashed var(--line);font-weight:800;font-size:13px}
.ontbreekt-id{font:700 12px Consolas,monospace;color:var(--ink-faint)}
figure.ill.gal{border-radius:16px}
figure.ill.gal figcaption{font-size:13px;padding:8px 12px 9px}

/* ------------------------------------------------------------ code-editor */
.codeblok{position:relative;border-radius:16px;overflow:hidden;background:var(--code-bg);border:1px solid #0d0e12;
  box-shadow:0 12px 30px rgba(13,16,22,.22),0 2px 6px rgba(13,16,22,.16);color:var(--code-ink);min-width:0}
.cb-kop{display:flex;align-items:center;gap:9px;padding:7px 8px 7px 12px;background:var(--code-kop);border-bottom:1px solid var(--code-lijn)}
.cb-naam{font:700 13px Consolas,"Cascadia Code",monospace;color:#f1f3fa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cb-info{font:700 11.5px var(--font-body);color:#7d8199;white-space:nowrap}
.cb-ruimte{flex:1}
.cb-knop{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:9px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);color:#e6e8f2 !important;font:700 12px var(--font-body);cursor:pointer;text-decoration:none !important;
  white-space:nowrap}
.cb-knop:hover{background:rgba(255,255,255,.14)}
.cb-knop .ico{width:15px;height:15px}
.cb-knop.gekopieerd{background:var(--qt);border-color:var(--qt)}
.cb-code{margin:0;padding:10px 0 12px;overflow:auto;font:13.4px/1.62 Consolas,"Cascadia Code","Courier New",monospace;tab-size:4;
  background:none;border:0;border-radius:0;color:var(--code-ink)}
.codeblok.lang .cb-code{max-height:760px}
.cb-code code{display:block;min-width:max-content;background:none;border:0;padding:0;color:inherit;font:inherit;white-space:normal}
.r{display:block;position:relative;padding:0 18px 0 60px;white-space:pre;min-height:1.62em}
.r::before{content:attr(data-n);position:absolute;left:0;width:42px;text-align:right;color:var(--code-nr);user-select:none;-webkit-user-select:none}
.r.hl{background:rgba(65,205,82,.13);box-shadow:inset 3px 0 0 var(--qt-licht)}
.r.hl::before{color:#8ee6a0}
.r.nieuw{background:rgba(65,205,82,.15);box-shadow:inset 3px 0 0 var(--qt-licht)}
.r.nieuw::before{color:#8ee6a0}
.r.nieuw::after{content:"+";position:absolute;left:47px;color:#8ee6a0;font-weight:700}
.r.weg{background:rgba(239,68,68,.13);box-shadow:inset 3px 0 0 #ef4444;opacity:.8}
.r.weg::before{color:#f19c9c}
.r.weg::after{content:"−";position:absolute;left:47px;color:#f19c9c;font-weight:700}
.r.weg span,.r.weg{text-decoration:line-through;text-decoration-color:rgba(241,156,156,.6)}
.r.verborgen{display:none}
.r.plooi{padding:2px 18px 2px 60px}
.r.plooi::before{content:"⋯"}
.plooi-knop,.r.plooi.vast span{display:block;width:100%;text-align:left;padding:3px 10px;border-radius:7px;border:1px dashed #3a3e52;
  background:rgba(255,255,255,.03);color:#8d92ad;font:700 12px var(--font-body);cursor:pointer}
.r.plooi.vast span{cursor:default}
.plooi-knop:hover{background:rgba(255,255,255,.08);color:#dfe2f0}
/* Pygments-kleuren (One Dark-achtig); qk = Qt-klasse */
.cb-code .k,.cb-code .kn,.cb-code .kd,.cb-code .kr,.cb-code .kp,.cb-code .ow,.py-kort .k,.py-kort .kn,.py-kort .kd,.py-kort .kr,.py-kort .ow{color:#c792ea}
.cb-code .kc,.py-kort .kc{color:#f78c6c}
.cb-code .nc,.cb-code .nn,.py-kort .nc,.py-kort .nn{color:#ffcb6b}
.cb-code .nf,.cb-code .fm,.py-kort .nf,.py-kort .fm{color:#82aaff}
.cb-code .nb,.py-kort .nb{color:#89ddff}
.cb-code .bp,.py-kort .bp{color:#f07178;font-style:italic}
.cb-code .nd,.py-kort .nd{color:#ffcb6b}
.cb-code .ne,.py-kort .ne{color:#ff8a80}
.cb-code [class^="s"],.cb-code .dl,.py-kort [class^="s"],.py-kort .dl{color:#c3e88d}
.cb-code .sd,.py-kort .sd{color:#9fbf8a;font-style:italic}
.cb-code .se,.cb-code .si,.py-kort .se,.py-kort .si{color:#89ddff}
.cb-code [class^="c"],.py-kort [class^="c"]{color:#7f879e;font-style:italic}
.cb-code [class^="m"],.cb-code .il,.py-kort [class^="m"],.py-kort .il{color:#f78c6c}
.cb-code .o,.py-kort .o{color:#89ddff}
.cb-code .p,.py-kort .p{color:#a6accd}
.cb-code .qk,.py-kort .qk{color:#5ee27a;font-weight:600}
pre.py-kort{margin:.7em 0 1em;padding:11px 16px;border-radius:12px;background:var(--code-bg);border:1px solid #0d0e12;overflow:auto;
  font:13.4px/1.6 Consolas,"Cascadia Code",monospace;color:var(--code-ink);white-space:pre;box-shadow:0 6px 16px rgba(13,16,22,.14)}
pre.py-kort code{background:none;border:0;padding:0;color:inherit;font:inherit;white-space:pre}

/* ------------------------------------------------------------ code -> venster */
.cr{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-areas:"code pijl" "code beeld";
  grid-template-rows:auto 1fr;gap:10px 20px;align-items:start;margin-top:4px}
.cr-code{grid-area:code;min-width:0}
.cr-pijl{grid-area:pijl}
.cr-beeld{grid-area:beeld;min-width:0}
.cr.naast{grid-template-columns:minmax(0,1fr) min(50%,calc(var(--lw,420px) + 30px))}
.cr.onder{grid-template-columns:minmax(0,1fr);grid-template-areas:"code" "pijl" "beeld"}
.cr-pijl span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:10px;background:var(--code-kop);
  color:#9fe6b4;font:700 12.5px Consolas,monospace;box-shadow:0 4px 10px rgba(13,16,22,.14)}
.cr-pijl span::before{content:"$";color:#5c6079}
.cr-pijl span::after{content:"";width:0;height:0;border-left:6px solid #9fe6b4;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:4px}
.cr.onder .cr-pijl span::after{border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #9fe6b4;border-bottom:0}
.cr-pijl .ico{width:15px;height:15px}
.prose.na{margin-top:16px}
.ob-code{margin-top:18px}
.ob-lijst code,.stappen code,.tbl-uitleg code,.st-tekst code{white-space:normal;overflow-wrap:anywhere}

/* ------------------------------------------------------------ naslag */
.tabelblad-tbl td.tbl-std{font:600 12.5px Consolas,monospace;color:var(--ink-soft);white-space:nowrap}
.tabelblad-tbl td.tbl-uitleg{color:var(--ink-soft);min-width:220px}
.tabelblad-tbl td.tbl-sig code{white-space:normal;display:inline-block;margin:1px 0}
.tabelblad-tbl td.tbl-id{font-family:Consolas,monospace;font-size:13px;white-space:normal}
.tbl-leeg{color:var(--ink-faint);font-style:italic}
.tabelblad-tbl a{color:var(--st-tabel);font-weight:700}
.ty-BOOL{--t:#d9480f}.ty-INT{--t:#0b7285}.ty-FLOAT{--t:#1c7ed6}.ty-STR{--t:#2b8a3e}.ty-ENUM{--t:#7048e8}.ty-VLAG{--t:#9c36b5}
.ty-KLEUR{--t:#e8590c}.ty-FONT{--t:#5f3dc4}.ty-BEELD{--t:#c2255c}.ty-GEOM{--t:#1864ab}.ty-TIJD{--t:#0c8599}.ty-TOETS{--t:#495057}.ty-OVERIG{--t:#868e96}
.ty{text-transform:none;font-family:Consolas,monospace;font-weight:700;letter-spacing:0}
.tbl-intro.prose{font-size:15.5px}
.hs-klassen{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.kl-chip{display:inline-block;padding:3px 9px;border-radius:8px;font:700 12.5px Consolas,monospace;text-decoration:none !important;
  color:color-mix(in srgb,var(--dc) 70%,#1b1530) !important;background:color-mix(in srgb,var(--dc) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--dc) 28%,var(--line))}
:root[data-theme="dark"] .kl-chip{background:color-mix(in srgb,var(--dc) 16%,#191d33);color:color-mix(in srgb,var(--dc) 55%,#fff) !important}
.kl-chip:hover{border-color:var(--dc)}

/* ------------------------------------------------------------ kaders */
.callout.ok{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 30%,transparent);color:var(--ink)}
.callout.ok::before{background:var(--ok)}
.callout.danger{background:#fdeaea;border-color:rgba(220,38,38,.3);color:var(--ink)}
.callout.danger::before{background:#dc2626}
.callout.pyqt6{background:color-mix(in srgb,#8b5cf6 9%,var(--surface));border-color:color-mix(in srgb,#8b5cf6 28%,transparent);color:var(--ink)}
.callout.pyqt6::before{background:#8b5cf6}
:root[data-theme="dark"] .callout.danger{background:color-mix(in srgb,#dc2626 14%,#191d33)}
.callout{position:relative;border:1px solid transparent}
.callout .ico{width:18px;height:18px}
.callout pre.py-kort{margin:.6em 0 .2em}

/* ------------------------------------------------------------ doen: downloadkaarten */
.doe-rechts{display:grid;gap:14px;align-content:start}
.codekaarten{display:grid;gap:10px}
.codekaart{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--code-bg);color:#eef0f8 !important;
  text-decoration:none !important;border:1px solid #0d0e12;box-shadow:0 4px 0 #0b0c10,0 10px 20px rgba(13,16,22,.2);
  transition:transform .15s,box-shadow .15s}
.codekaart:hover{transform:translateY(-2px)}
.codekaart .ck-tekst{flex:1;display:grid;gap:1px;min-width:0}
.codekaart b{font:800 16px var(--font-display)}
.codekaart span span,.codekaart .ck-tekst span{font:600 12.5px Consolas,monospace;color:#9aa0bb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.codekaart > .ico{width:22px;height:22px;color:#9fe6b4}
.codekaart.tweede{background:var(--surface);color:var(--ink) !important;border-color:var(--line);box-shadow:0 4px 0 var(--line)}
.codekaart.tweede .ck-tekst span{color:var(--ink-faint)}
.codekaart.tweede > .ico{color:var(--ok)}
.bk-dl{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;font:800 14px var(--font-body);
  background:linear-gradient(135deg,#2fa84f,#41cd52);color:#fff !important;text-decoration:none !important;
  box-shadow:0 4px 0 #1f7a38,0 10px 20px rgba(47,168,79,.3);transition:transform .15s,box-shadow .15s}
.bk-dl:hover{transform:translateY(-2px)}
.bk-dl.tweede{background:var(--code-bg);box-shadow:0 4px 0 #0b0c10}
.bk-dl small{font-weight:700;opacity:.8}

/* ------------------------------------------------------------ koppen en startpagina */
.hs-hero{background:linear-gradient(160deg,#fff 0%,color-mix(in srgb,var(--dc) 7%,#fff) 100%)}
.hs-hero figure.ill.held{align-self:center}
.hero-groot{background:linear-gradient(135deg,#0e1d16 0%,#11243a 55%,#1b1631 100%);min-height:460px}
.hero-groot::before{background:linear-gradient(90deg,rgba(8,12,18,.94) 0%,rgba(8,12,18,.72) 42%,rgba(8,12,18,.08) 78%)}
.hero-groot .blauwdruk{--dc:#41cd52;opacity:.22;z-index:-1}
.hero-groot .bd-w,.hero-groot .bd-grid span{background:rgba(65,205,82,.14)}
.collage{position:absolute;inset:0 0 0 40%;z-index:-1;pointer-events:none}
.collage img{position:absolute;height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35));animation:zweef 9s ease-in-out infinite alternate}
.collage .c0{width:min(60%,640px);right:5%;top:9%;transform:rotate(-2.5deg)}
.collage .c1{width:min(46%,480px);right:36%;top:44%;transform:rotate(2deg);animation-delay:-3s}
.collage .c2{width:min(42%,440px);right:2%;top:50%;transform:rotate(3.5deg);animation-delay:-6s}
@keyframes zweef{to{translate:0 -10px}}
.hero-groot-in{max-width:640px}
.titel-mega span{-webkit-text-stroke:0;text-shadow:0 4px 0 rgba(0,0,0,.35)}
.hoe .hoe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.hoe-item{padding:16px 16px 14px;border-radius:18px;background:var(--surface-2);border:1px solid var(--line)}
.hoe-item b{display:block;font:800 18px var(--font-display);margin:10px 0 4px}
.hoe-item p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.hoe-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--qt) 14%,#fff);color:#1f7a38}
.hoe-ico .ico{width:23px;height:23px}
:root[data-theme="dark"] .hoe-ico{background:color-mix(in srgb,var(--qt) 22%,#191d33);color:#8ee6a0}
.tegel-beeld,.deel-card .dc-beeld,.ok-beeld{background:linear-gradient(150deg,var(--bureau-a),var(--bureau-b))}
.tegel-beeld img,.deel-card .dc-beeld img,.ok-beeld img{object-fit:contain;padding:6px}
.tegel-leeg{background:repeating-linear-gradient(45deg,transparent 0 10px,color-mix(in srgb,var(--dc) 8%,transparent) 10px 20px)}
.ok-nr{color:var(--ink);-webkit-text-stroke:0;text-shadow:0 2px 0 #fff}
:root[data-theme="dark"] .ok-nr{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.rail-brand .qt-logo{font-size:16px}

/* ------------------------------------------------------------ oefeningen: stappen met code */
.st-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.st-tekst .prose{font-size:16px;margin-top:8px}
.st-code{padding:0 18px 18px}
.st-test{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:14px;font-size:14.5px;line-height:1.5;
  background:var(--ok-bg);color:color-mix(in srgb,var(--ok) 55%,#0a2b20)}
:root[data-theme="dark"] .st-test{background:color-mix(in srgb,var(--ok) 14%,#191d33);color:#a7f0cf}
.st-test b{margin-right:4px}
.diff-tel{font:800 12px Consolas,monospace;white-space:nowrap}
.diff-tel .plus{color:#8ee6a0}.diff-tel .min{color:#f19c9c}
.stap.gedaan .st-code{opacity:.55}
.fase-kop{background:linear-gradient(120deg,#11161f 0%,color-mix(in srgb,var(--dc) 50%,#11161f) 100%)}

/* ------------------------------------------------------------ smal scherm */
@media (max-width:1100px){
  .cr{grid-template-columns:minmax(0,1fr);grid-template-areas:"code" "pijl" "beeld"}
  .st-in{grid-template-columns:1fr}
  .collage{inset:auto 0 0 30%;opacity:.35}
}
@media (max-width:680px){
  .blauwdruk{display:none}
  .st-code{padding:0 10px 12px}
  .r{padding-left:46px}
  .r::before{width:32px}
  .r.nieuw::after,.r.weg::after{left:36px}
  .cb-knop span{display:none}
}

/* ------------------------------------------------------------ afdruk */
@media print{
  .codeblok{box-shadow:none;break-inside:auto}
  .codeblok.lang .cb-code{max-height:none;overflow:visible}
  /* lange regels afbreken op papier: één te brede regel laat Chromium anders
     het HELE document verkleinen (shrink to fit) */
  .cb-code{white-space:pre-wrap;overflow:visible}
  .cb-code code{min-width:0}
  .r{white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere}   /* bij een spatie, midden in een woord alleen als het moet */
  pre.py-kort,pre.py-kort code{white-space:pre-wrap;word-break:break-all;overflow:visible}
  .prose pre,.ub pre,pre{white-space:pre-wrap;overflow-wrap:anywhere;overflow:visible}
  /* tabellen scrollen op het scherm; op papier zou de rechterkant wegvallen */
  .tabel-wrap{overflow:visible}
  .tabel-wrap table{width:100%}
  .tabelblad-tbl td.tbl-uitleg{min-width:0}
  .tabelblad-tbl td.tbl-std{white-space:normal}
  .tabel-wrap td,.tabel-wrap th,.tabel-wrap code{white-space:normal;overflow-wrap:anywhere}
  .r.verborgen{display:block}
  .r.plooi{display:none}
  /* op papier: code over de volle breedte, het beeld eronder */
  .cr,.cr.naast{grid-template-columns:minmax(0,1fr);grid-template-areas:"code" "pijl" "beeld"}
  .collage,.blauwdruk{display:none}
  figure.ill{box-shadow:none}
  .qlabel,.zoek-knop{display:none !important}
  .hero-groot{min-height:0;background:#11243a !important}
  .st-code{break-inside:auto}
}

/* ------------------------------------------------------------ schema's (inline SVG in de tekst) */
svg.schema{display:block;width:100%;height:auto;max-width:780px;margin:14px auto 6px;overflow:visible}
.schema .vak{fill:var(--surface-2);stroke:var(--line);stroke-width:1.5}
.schema .accent{fill:color-mix(in srgb,var(--dc) 13%,var(--surface));stroke:color-mix(in srgb,var(--dc) 70%,transparent);stroke-width:1.6}
.schema .code{fill:var(--code-bg);stroke:#0d0e12}
.schema text{fill:var(--ink);font:700 13px var(--font-body)}
.schema text.klein{font-weight:600;font-size:11.5px;fill:var(--ink-soft)}
.schema text.mono{font:600 12px Consolas,monospace;fill:#d9dcea}
.schema .pijl{stroke:var(--ink-soft);stroke-width:1.7;fill:none}
.schema .pijlpunt{fill:var(--ink-soft)}


/* ===================================================================
   StemExpert — eigen laag (boven de basis van de lesprojecten)
   Eigenheid: het werkboek (opdrachten met antwoordruimte, drie treden,
   één schaal over drie niveaus), exacte STEM-figuren (IEC-schema's,
   grafieken), uitgewerkte voorbeelden en proeven, leerlijnen en Habitat.
   =================================================================== */
:root{
  --brand:#0f766e; --brand-2:#f59e0b; --brand-ink:#115e59;
  --nF:#10b981; --nI:#3b82f6; --nE:#7c3aed;
  --bureau-a:#ffffff; --bureau-b:#f6f7fb; --bureau-stip:rgba(100,116,139,.18);
  /* schema's en grafieken */
  --s-ink:#1f2937; --s-zacht:#64748b; --s-lijn:#cbd5e1; --s-raster:#e5e9f2; --s-bg:#ffffff; --s-vak:#f3f5fa;
  --k1:#2563eb; --k2:#e11d48; --k3:#16a34a; --k4:#9333ea; --k5:#d97706; --k6:#0d9488;
  --kracht:#dc2626; --snelheid:#2563eb; --stroom:#d97706;
  --papierlijn:#b9c2d3; --papierruit:#dde3ee; --papiermm:#f1c7c0; --papiermm-dik:#e59b90;
}
:root[data-theme="dark"]{
  --bureau-a:#1a1f36; --bureau-b:#151a2d; --bureau-stip:rgba(148,163,184,.14);
  --s-ink:#e5e7eb; --s-zacht:#9aa4b8; --s-lijn:#475569; --s-raster:#2a3148; --s-bg:#171b30; --s-vak:#1f2540;
  --k1:#60a5fa; --k2:#fb7185; --k3:#4ade80; --k4:#c084fc; --k5:#fbbf24; --k6:#2dd4bf;
  --kracht:#f87171; --snelheid:#60a5fa; --stroom:#fbbf24;
  --papierlijn:#3b4560; --papierruit:#2a3148; --papiermm:#4b2a33; --papiermm-dik:#6b3540;
}

/* ------------------------------------------------------------ merk */
.se-logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px 10px 10px 3px;
  background:linear-gradient(135deg,#0f766e,#14b8a6);color:#fff;font:800 14px/1 var(--font-display);letter-spacing:.3px;
  box-shadow:0 3px 0 #115e59}
.se-logo.klein{width:22px;height:22px;font-size:11px;border-radius:7px 7px 7px 2px;box-shadow:none}
.rail-brand{background:linear-gradient(135deg,#0f766e,#f59e0b) !important}
.rail-brand .se-logo{background:none;box-shadow:none;font-size:15px}
.rail-letter{font:800 15px var(--font-display);color:#fff}
.rail-sub{display:flex;align-items:center;gap:10px;margin:0 0 2px 22px;padding:6px 10px;border-radius:12px;color:var(--ink-soft);
  font-weight:700;font-size:13.5px;text-decoration:none !important;transition:background var(--dur-1)}
.rail-sub i{flex:none;width:9px;height:9px;border-radius:3px;background:var(--c)}
.rail-sub:hover{background:color-mix(in srgb,var(--c) 10%,transparent);color:var(--ink)}
.rail-sub.active{background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--ink)}
.rail-sub .rail-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail.ingeklapt .rail-sub{margin-left:12px;padding:6px}
.rail.ingeklapt .rail-sub .rail-label{display:none}

/* ------------------------------------------------------------ leerlijn-chips, niveaubadges */
.hs-lijnen{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.lijn-chip{display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 3px;border-radius:99px;text-decoration:none !important;
  background:color-mix(in srgb,var(--c) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 32%,transparent);
  color:var(--ink);font-weight:800;font-size:13px}
.lijn-chip b{display:grid;place-items:center;width:24px;height:24px;border-radius:99px;background:var(--c);color:#fff;font:800 12.5px var(--font-display)}
.lijn-chip.klein{font-size:12px;padding:2px 9px 2px 2px}
.lijn-chip.klein b{width:20px;height:20px;font-size:11px}
.lijn-chip:hover{border-color:var(--c)}
.niv-badge{display:inline-block;padding:2px 9px;border-radius:99px;background:var(--c);color:#fff;font:800 11.5px var(--font-body)}

/* ------------------------------------------------------------ kop: beeldkaart als het beeld nog niet bestaat */
.hero-kaart{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(90% 80% at 85% 10%, color-mix(in srgb,var(--c) 55%,transparent), transparent 60%),
    radial-gradient(70% 70% at 0% 100%, color-mix(in srgb,var(--dc) 45%,transparent), transparent 65%),
    linear-gradient(150deg,#0f172a,#1e293b);
  box-shadow:var(--e-2);display:grid;align-content:space-between;padding:22px}
.hero-kaart::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:28px 28px}
.hk-niv{justify-self:start;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.14);color:#fff;font:800 12px var(--font-body);
  letter-spacing:1px;text-transform:uppercase}
.hk-nr{font:800 clamp(90px,11vw,150px)/.8 var(--font-display);color:#fff;letter-spacing:-4px;opacity:.95;
  text-shadow:0 10px 30px rgba(0,0,0,.35)}
.hk-lijnen{display:flex;gap:6px}
.hk-lijnen i{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--c);color:#fff;font:800 14px var(--font-display);font-style:normal}
.hk-prompt{position:absolute;right:14px;bottom:12px;display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.55);font:700 11px Consolas,monospace}
.hk-prompt .ico{width:14px;height:14px}

/* ------------------------------------------------------------ figuren */
figure.ill.svgfig{--lw:100%;background:var(--s-bg)}
figure.ill.svgfig .svg-wrap{padding:14px 16px 10px}
figure.ill.svgfig svg.schema{margin:0 auto;max-width:100%}
.figrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:start}
figure.ill.illustratie img{aspect-ratio:auto}
figure.ill.r-16x9 .plaats{aspect-ratio:16/9} figure.ill.r-4x3 .plaats{aspect-ratio:4/3}
figure.ill.r-1x1 .plaats{aspect-ratio:1/1} figure.ill.r-3x4 .plaats{aspect-ratio:3/4}
figure.ill.r-3x2 .plaats{aspect-ratio:3/2} figure.ill.r-breed .plaats{aspect-ratio:21/9}
figure.ill.ontbreekt{min-height:0}
.plaats{position:relative;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px 20px;
  background:repeating-linear-gradient(135deg,var(--surface-2) 0 12px,var(--surface) 12px 24px);min-height:160px}
.plaats-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:99px;
  background:var(--surface);border:1px dashed color-mix(in srgb,var(--dc) 50%,var(--line));font-weight:800;font-size:12.5px;color:var(--dc-d)}
.plaats-badge .ico{width:16px;height:16px}
.plaats-id{align-self:flex-start;font:700 11.5px Consolas,monospace;color:var(--ink-faint);background:var(--surface);padding:1px 6px;border-radius:6px}
.plaats-prompt{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-soft);font-style:italic;max-height:9.5em;overflow:hidden}
figure.ill.held .plaats{min-height:260px}
.hs-hero figure.ill.held{align-self:center}

/* schema's: alle kleuren uit het thema */
svg.schema{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font-body)}
.schema text{fill:var(--s-ink);font:700 14px var(--font-body)}
.schema text.klein{font-weight:600;font-size:12px;fill:var(--s-zacht)}
.schema text.vet{font-weight:800;font-size:15px}
.schema text.mono{font:600 13px Consolas,monospace}
.schema text.wit{fill:#fff}
.schema .vak{fill:var(--s-vak);stroke:var(--s-lijn);stroke-width:1.5}
.schema .accent{fill:color-mix(in srgb,var(--dc) 14%,var(--s-bg));stroke:color-mix(in srgb,var(--dc) 70%,transparent);stroke-width:1.6}
.schema .leeg{fill:none;stroke:var(--s-lijn);stroke-width:1.5;stroke-dasharray:5 4}
.schema .lijn{fill:none;stroke:var(--s-ink);stroke-width:2}
.schema .lijn.dun{stroke-width:1.2}
.schema .lijn.tk-zicht{stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.schema .lijn.tk-midden{stroke-width:1.6}
.schema .lijn.tk-verb{stroke-dasharray:5 3.5}
.schema .lijn.tk-hart{stroke-dasharray:16 3 2.5 3}
.schema .lijn.tk-licht{opacity:.45}
.schema .lijn.tk-schets{stroke-width:1.7;stroke-linecap:round}
.schema .raster{stroke:var(--s-raster);stroke-width:1}
.schema .doorzichtig{fill-opacity:.35}
.schema .lijn.stippel,.schema .stippel{stroke-dasharray:6 5}
.schema .vlak{fill:var(--s-vak);stroke:var(--s-ink);stroke-width:2}
.schema .grond{fill:url(#none);stroke:var(--s-ink);stroke-width:2}
.schema .draad{fill:none;stroke:var(--s-ink);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.schema .knoop{fill:var(--s-ink)}
.schema .sym path,.schema .sym rect,.schema .sym circle{fill:none;stroke:var(--s-ink);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.schema .sym .romp{fill:var(--s-bg)}
.schema .sym .vol{fill:var(--s-ink);stroke:none}
.schema .sym circle.vol{fill:var(--s-ink)}
.schema .sym .dik{stroke-width:3.2}
.schema .sym .dik4{stroke-width:5}
.schema .sym .stip{stroke-dasharray:3 3}
.schema .sym.actief path,.schema .sym.actief rect,.schema .sym.actief circle{stroke:var(--dc)}
.schema .sym.actief .vol,.schema .sym.actief circle.vol{fill:var(--dc)}
.schema .sym.actief .romp{fill:color-mix(in srgb,var(--dc) 14%,var(--s-bg))}
.schema .sym-letter{font:800 15px var(--font-display);fill:var(--s-ink)}
.schema .sym-label{font:700 13.5px var(--font-body);fill:var(--s-ink)}
.schema .pl .pl-lijn{fill:none;stroke:var(--s-zacht);stroke-width:2}
.schema .pl .pl-kop{fill:var(--s-zacht)}
.schema .pl.kracht .pl-lijn{stroke:var(--kracht);stroke-width:3}
.schema .pl.kracht .pl-kop{fill:var(--kracht)}
.schema .pl.snelheid .pl-lijn{stroke:var(--snelheid);stroke-width:3}
.schema .pl.snelheid .pl-kop{fill:var(--snelheid)}
.schema .pl.stroom .pl-lijn{stroke:var(--stroom);stroke-width:2.4}
.schema .pl.stroom .pl-kop{fill:var(--stroom)}
.schema .pl.dun .pl-lijn{stroke-width:1.4}
.schema .k1{--k:var(--k1)} .schema .k2{--k:var(--k2)} .schema .k3{--k:var(--k3)}
.schema .k4{--k:var(--k4)} .schema .k5{--k:var(--k5)} .schema .k6{--k:var(--k6)}
.schema rect.k1,.schema rect.k2,.schema rect.k3,.schema rect.k4,.schema rect.k5,.schema rect.k6,
.schema circle.k1,.schema circle.k2,.schema circle.k3,.schema circle.k4,.schema circle.k5,.schema circle.k6,
.schema path.vlak.k1,.schema path.vlak.k2,.schema path.vlak.k3,.schema path.vlak.k4,.schema path.vlak.k5,.schema path.vlak.k6{
  fill:color-mix(in srgb,var(--k) 16%,var(--s-bg));stroke:var(--k);stroke-width:1.8}
.schema text.k1,.schema text.k2,.schema text.k3,.schema text.k4,.schema text.k5,.schema text.k6{fill:var(--k)}
.schema .pl.k1 .pl-lijn,.schema .pl.k2 .pl-lijn,.schema .pl.k3 .pl-lijn,.schema .pl.k4 .pl-lijn,.schema .pl.k5 .pl-lijn,.schema .pl.k6 .pl-lijn{stroke:var(--k);stroke-width:2.6}
.schema .pl.k1 .pl-kop,.schema .pl.k2 .pl-kop,.schema .pl.k3 .pl-kop,.schema .pl.k4 .pl-kop,.schema .pl.k5 .pl-kop,.schema .pl.k6 .pl-kop{fill:var(--k)}
.schema path.lijn.k1,.schema path.lijn.k2,.schema path.lijn.k3,.schema path.lijn.k4,.schema path.lijn.k5,.schema path.lijn.k6{stroke:var(--k)}
/* grafieken */
.grafiek .raster{stroke:var(--s-raster);stroke-width:1}
.grafiek .as{stroke:var(--s-ink);stroke-width:1.6;fill:none}
.grafiek .as-kop{fill:var(--s-ink)}
.grafiek .as-getal{font:600 12.5px var(--font-body);fill:var(--s-zacht)}
.grafiek .as-label{font:800 13.5px var(--font-body);fill:var(--s-ink)}
.grafiek .reeks{fill:none;stroke:var(--k);stroke-width:2.8;stroke-linejoin:round;stroke-linecap:round}
.grafiek .reeks.stippel{stroke-dasharray:7 6}
.grafiek .punt{fill:var(--s-bg);stroke:var(--k);stroke-width:2.4}
.grafiek .foutbalk{stroke:var(--k);stroke-width:1.5;fill:none}
.grafiek .vulling{fill:color-mix(in srgb,var(--k) 22%,transparent);stroke:none}
.grafiek .hulplijn{stroke:var(--s-zacht);stroke-width:1.4;stroke-dasharray:5 5;fill:none}
.grafiek .hl-label,.grafiek .notitie{font:700 12.5px var(--font-body);fill:var(--s-ink)}
.grafiek .legenda{font:700 13px var(--font-body);fill:var(--s-ink)}
.grafiek .staaf{fill:color-mix(in srgb,var(--k) 70%,var(--s-bg));stroke:var(--k);stroke-width:1.2}
.grafiek .staaf-getal{font:700 12px var(--font-body);fill:var(--s-ink)}

/* ------------------------------------------------------------ wiskunde */
.katex{font-size:1.08em}
.tex-blok{display:block;margin:.5em 0;overflow-x:auto;overflow-y:hidden;padding:2px 0}
.tex-blok .katex-display{margin:.2em 0}
.tex-fout{background:#fde2e2;color:#b91c1c;border-radius:4px;padding:0 4px;font:600 13px Consolas,monospace}
.formulekader{position:relative;margin:14px 0;padding:12px 18px 12px 20px;border-radius:16px;
  background:color-mix(in srgb,var(--dc) 7%,var(--surface));border:1.5px solid color-mix(in srgb,var(--dc) 35%,transparent)}
.formulekader::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:5px;border-radius:0 5px 5px 0;background:var(--dc)}
.fk-naam{display:block;font:900 11.5px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--dc-d);margin-bottom:2px}
:root[data-theme="dark"] .fk-naam{color:color-mix(in srgb,var(--dc) 65%,#fff)}
.fk-tex .tex-blok{margin:.2em 0}
.fk-tex .katex-display{font-size:1.15em}
.fk-uitleg{font-size:14.5px;color:var(--ink-soft);line-height:1.55}

/* ------------------------------------------------------------ kaders */
.callout.misvatting{background:color-mix(in srgb,#9333ea 8%,var(--surface));border-color:color-mix(in srgb,#9333ea 28%,transparent);color:var(--ink)}
.callout.misvatting::before{background:#9333ea}
.callout.misvatting b .ico{color:#9333ea}
.callout.veilig{background:color-mix(in srgb,#dc2626 7%,var(--surface));border-color:color-mix(in srgb,#dc2626 28%,transparent);color:var(--ink)}
.callout.veilig::before{background:#dc2626}
.callout.veilig b .ico{color:#dc2626}
.callout > b{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.callout p{margin:.3em 0}

/* ------------------------------------------------------------ bladen */
.b-voorbeeld{--sc:#0284c7} .b-proef{--sc:#16a34a} .b-naslag{--sc:#6366f1} .b-verhaal{--sc:#db2777}
.b-verband{--sc:#f97316} .b-code{--sc:#2563eb} .b-kort{--sc:#0f766e} .b-begrippen{--sc:#16a34a}
.b-verhaal{background:linear-gradient(180deg,color-mix(in srgb,#db2777 4%,var(--surface)),var(--surface) 60%)}
.vb-label{display:inline-block;margin:0 0 6px;font:900 11.5px var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--sc)}
.vb{display:grid;gap:14px}
.vb-vraag{font-size:16.5px}
.vb-gg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.vb-kolom{padding:12px 16px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line)}
.vb-kolom ul{margin:0;padding-left:1.1em;line-height:1.6}
.vb-stappen{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:none}
.vb-stappen li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;padding:10px 14px 10px 10px;border-radius:14px;
  background:color-mix(in srgb,var(--sc) 5%,var(--surface));border:1px solid color-mix(in srgb,var(--sc) 18%,var(--line));line-height:1.65}
.vb-stappen li::before{content:none}
.vb-stappen .nr{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--sc);color:#fff;font:800 15px var(--font-display)}
.vb-antwoord{display:grid;gap:4px;padding:12px 16px;border-radius:16px;border:2px solid var(--sc);background:color-mix(in srgb,var(--sc) 8%,var(--surface));
  font-size:16.5px;font-weight:700}
.vb-controle{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:14px;background:var(--ok-bg);color:var(--ink);font-size:15px;line-height:1.55}
.vb-controle .ico{flex:none;width:20px;height:20px;color:var(--ok);margin-top:2px}
:root[data-theme="dark"] .vb-controle{background:color-mix(in srgb,var(--ok) 14%,#191d33)}
.proef{display:grid;gap:14px}
.proef-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.proef-kop > div:first-child{display:grid;gap:12px}
.proef-kop:has(> :only-child){grid-template-columns:1fr}
.materiaal{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.materiaal li{padding:4px 10px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;font-weight:700}
.proef-wv{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.pv-vak{padding:12px 16px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line)}
.pv-vak.verklaring{background:color-mix(in srgb,var(--sc) 7%,var(--surface));border-color:color-mix(in srgb,var(--sc) 30%,transparent)}
.stappen .nr{display:grid;place-items:center;border-radius:10px;background:var(--sc,var(--dc));color:#fff;font:800 15px var(--font-display)}
.formulelijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:0 0 16px}
.fl-item{padding:12px 16px;border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:0 1px 3px rgba(30,41,59,.05)}
.fl-naam{font:800 15px var(--font-display);color:var(--ink)}
.fl-tex .tex-blok{margin:.3em 0 .5em}
.fl-tabel{width:100%;border-collapse:collapse;font-size:13.5px}
.fl-tabel th{text-align:left;font:900 10.5px var(--font-body);letter-spacing:.7px;text-transform:uppercase;color:var(--ink-faint);padding:4px 6px;border-bottom:1px solid var(--line)}
.fl-tabel td{padding:4px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.fl-sym{width:52px} .fl-eh{white-space:nowrap;color:var(--ink-soft)}
.tabel-wrap table:not(.tabelblad-tbl){width:100%;border-collapse:collapse;font-size:14.5px}
.tabel-wrap table:not(.tabelblad-tbl) th{text-align:left;padding:9px 12px;font:900 11px var(--font-body);letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-soft);background:var(--surface-2);border-bottom:2px solid var(--line)}
.tabel-wrap table:not(.tabelblad-tbl) td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.tabel-wrap table:not(.tabelblad-tbl) tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.prose table{border-collapse:collapse;margin:.6em 0 1em;font-size:15px}
.prose table th,.prose table td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.prose table th{background:var(--surface-2);font-weight:800}
.verbanden{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:14px}
.vbd{padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--surface-2)}
.vbd p{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.hs-link{display:inline-flex;align-items:baseline;gap:6px;font-weight:800;color:var(--ink);text-decoration:none !important;
  border-bottom:2px solid color-mix(in srgb,var(--c) 45%,transparent)}
.hs-link b{display:inline-grid;place-items:center;min-width:30px;padding:1px 6px;border-radius:7px;background:var(--c);color:#fff;font:800 12px var(--font-display)}
.hs-link:hover{border-bottom-color:var(--c)}
.hs-link.nog{color:var(--ink-soft);border-bottom-style:dashed}
.habitat-kader{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:12px 16px;border-radius:16px;
  background:linear-gradient(120deg,color-mix(in srgb,#f97316 10%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,#f97316 30%,transparent)}
.habitat-kader > .ico{flex:none;width:26px;height:26px;color:#f97316}
.habitat-kader b{display:block;font:800 14px var(--font-display);color:#c2410c;margin-bottom:2px}
:root[data-theme="dark"] .habitat-kader b{color:#fdba74}
.doelen{margin:0 0 22px;padding:16px 22px;border-radius:22px;background:var(--surface);border:1px solid var(--line);
  border-left:9px solid var(--dc);box-shadow:0 2px 10px rgba(30,41,59,.05)}
.doelen-kop{display:flex;align-items:center;gap:9px;font:800 17px var(--font-display);margin-bottom:6px}
.doelen-kop .ico{width:22px;height:22px;color:var(--dc)}
.doelen-kop span{margin-left:auto;font:700 12.5px var(--font-body);color:var(--ink-faint)}
.doelen-lijst{margin:0;padding-left:1.2em;columns:2 340px;column-gap:28px;line-height:1.6}
.doelen-lijst li{break-inside:avoid;margin:.2em 0}
.kort-lijst{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.kort-lijst li{position:relative;padding:10px 14px 10px 42px;border-radius:14px;background:var(--surface-2);line-height:1.6}
.kort-lijst li::before{content:"";position:absolute;left:14px;top:15px;width:16px;height:16px;border-radius:5px;background:var(--sc)}
.begrippen-lijst{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.begrippen-lijst > div{padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.begrippen-lijst dt{font:800 16px var(--font-display);color:var(--ink)}
.begrippen-lijst dd{margin:3px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.bg-bron{margin-left:6px;padding:1px 7px;border-radius:6px;background:var(--c);color:#fff !important;font:800 11px var(--font-display);text-decoration:none !important;vertical-align:2px}

/* ------------------------------------------------------------ navigatie handboek/werkboek */
.wisselbalk{display:flex;gap:8px;margin:-10px 0 20px;flex-wrap:wrap}
.wissel{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);
  font-weight:800;color:var(--ink-soft);text-decoration:none !important}
.wissel .ico{width:18px;height:18px}
.wissel.aan{background:var(--dc);border-color:var(--dc);color:#fff;box-shadow:0 3px 0 var(--dc-d)}
.wissel:not(.aan):hover{border-color:var(--dc);color:var(--ink)}
.naar-werkboek{display:flex;align-items:center;gap:14px;margin:6px 0 20px;padding:18px 22px;border-radius:22px;text-decoration:none !important;
  background:linear-gradient(120deg,#f59e0b,#f97316);color:#fff;box-shadow:0 6px 0 #c2410c}
.naar-werkboek > .ico{width:30px;height:30px;flex:none}
.naar-werkboek span{display:grid;gap:2px;font-weight:700}
.naar-werkboek span b{font:800 20px var(--font-display)}
.naar-werkboek > .ico:last-child{margin-left:auto}
.burennav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.buur{display:grid;gap:3px;padding:14px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--c);
  color:var(--ink);text-decoration:none !important}
.buur.rechts{text-align:right;border-left:1px solid var(--line);border-right:6px solid var(--c)}
.buur span{font:800 12px var(--font-body);color:var(--ink-faint);text-transform:uppercase;letter-spacing:.8px}
.buur b{font:800 16px var(--font-display)}

/* ------------------------------------------------------------ werkboek */
.legende{margin:0 0 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.legende summary{cursor:pointer;padding:12px 18px;font-weight:800;display:flex;align-items:center;gap:8px;list-style:none}
.legende summary .ico{width:18px;height:18px;color:var(--dc)}
.legende-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;padding:0 18px 16px}
.legende-in b{display:block;margin-bottom:6px;font-family:var(--font-display);font-size:16px}
.legende-in .tier{margin:0 6px 6px 0}
.legende-in p{margin:6px 0 0;color:var(--ink-soft);font-size:14.5px;line-height:1.55}
.tredekop{display:flex;align-items:center;gap:12px;margin:28px 0 14px;padding-bottom:8px;border-bottom:3px solid color-mix(in srgb,var(--c) 40%,transparent)}
.tredekop h2{margin:0;font:800 26px var(--font-display);color:var(--ink)}
.tredekop > span:last-child{margin-left:auto;color:var(--ink-faint);font-weight:700;font-size:14px}
.tier{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 7px;border-radius:99px;font:800 12px var(--font-body);
  background:color-mix(in srgb,var(--c) 12%,var(--surface));color:color-mix(in srgb,var(--c) 75%,var(--ink));border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
.tier i{width:9px;height:9px;border-radius:50%;border:1.8px solid var(--c);display:block}
.tier i.aan{background:var(--c)}
.tier i + i{margin-left:-3px}
.schaal{display:inline-flex;align-items:center;gap:2px;padding:3px 8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line)}
.schaal i{width:6px;height:12px;border-radius:2px;background:color-mix(in srgb,var(--c) 18%,transparent);display:block}
.schaal i.aan{background:var(--c)}
.schaal b{margin-left:5px;font:800 12px var(--font-display);color:var(--ink)}
.op-type,.op-duur{display:inline-flex;align-items:center;gap:5px;font:800 12.5px var(--font-body);color:var(--ink-soft)}
.op-type .ico,.op-duur .ico{width:15px;height:15px}
.opdr{position:relative;margin:0 0 18px;padding:0 0 18px;border-radius:24px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(30,41,59,.05);scroll-margin-top:84px}
.opdr > *:not(.opdr-kop){margin-left:24px;margin-right:24px}
.opdr.t1{--tc:#10b981} .opdr.t2{--tc:#3b82f6} .opdr.t3{--tc:#e11d48}
.opdr.habitat{background:linear-gradient(180deg,color-mix(in srgb,#f97316 5%,var(--surface)),var(--surface) 50%)}
.opdr-kop{display:flex;gap:14px;align-items:flex-start;padding:16px 20px 12px 18px;margin-bottom:10px;border-left:8px solid var(--tc);
  border-radius:24px 24px 0 0;background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 7%,transparent),transparent 70%)}
.opdr-nr{flex:none;min-width:54px;padding:6px 10px;border-radius:14px;background:var(--tc);color:#fff;font:800 19px/1.1 var(--font-display);text-align:center}
.opdr-titel{flex:1;min-width:0}
.opdr-titel h3{margin:1px 0 7px;font:800 20px/1.2 var(--font-display);color:var(--ink)}
.opdr-meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.vink{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:12px;border:1px solid var(--line);cursor:pointer;
  font-weight:800;font-size:13px;color:var(--ink-soft);background:var(--surface)}
.vink input{width:17px;height:17px;accent-color:var(--tc)}
.opdr.gedaan{opacity:.72}
.opdr.gedaan .vink{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.opdr-ctx{margin-bottom:12px}
.opdr .prose{font-size:16px}
.vragen{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:14px}
.vragen li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start}
.vragen.enkel li{grid-template-columns:minmax(0,1fr)}
.vragen.enkel .v-letter{display:none}
.v-letter{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;border:2px solid var(--tc);color:var(--tc);font:800 14px var(--font-display);margin-top:1px}
.vraag-tekst{font-size:16px;line-height:1.65}
.vraag-tekst p{margin:0 0 .5em}
.keuzes{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.keuzes li{display:flex !important;gap:10px;align-items:flex-start;padding:7px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2)}
.kz-bol{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--ink-faint);font:800 12px var(--font-display);color:var(--ink-soft)}
.blanco{display:inline-block;min-width:110px;height:1.1em;border-bottom:1.5px solid var(--ink-faint);vertical-align:-3px;margin:0 3px}
/* antwoordruimte: ziet er op scherm en op papier uit als papier */
.ruimte{margin-top:8px;border-radius:10px;border:1px solid var(--line);background-color:var(--surface)}
.ruimte.lijnen{height:calc(var(--n) * 34px + 8px);border:none;border-radius:0;
  background-image:repeating-linear-gradient(to bottom,transparent 0 33px,var(--papierlijn) 33px 34px);background-position:0 6px}
.ruimte.ruit{height:calc(var(--n) * 30px);background-image:linear-gradient(var(--papierruit) 1px,transparent 1px),linear-gradient(90deg,var(--papierruit) 1px,transparent 1px);
  background-size:15px 15px}
.ruimte.kader{height:calc(var(--n) * 30px);border:1.5px dashed var(--ink-faint)}
.ruimte.millimeter{height:calc(var(--n) * 30px);
  background-image:linear-gradient(var(--papiermm-dik) 1px,transparent 1px),linear-gradient(90deg,var(--papiermm-dik) 1px,transparent 1px),
    linear-gradient(var(--papiermm) 1px,transparent 1px),linear-gradient(90deg,var(--papiermm) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px}
.ruimte.code{height:calc(var(--n) * 24px + 12px);background:var(--code-bg,#0f1320);border-color:#0d0e12;
  background-image:repeating-linear-gradient(to bottom,transparent 0 23px,rgba(255,255,255,.06) 23px 24px);background-position:0 6px}
.ruimte.tabel{border:none;background:none;overflow-x:auto}
.ruimte.tabel table{border-collapse:collapse;min-width:60%}
.ruimte.tabel th{padding:6px 14px;border:1.5px solid var(--ink-faint);background:var(--surface-2);font-weight:800;font-size:14px}
.ruimte.tabel td{height:32px;min-width:90px;border:1.5px solid var(--ink-faint)}
details.hint{margin-top:12px;border-radius:14px;background:color-mix(in srgb,#f59e0b 8%,var(--surface));border:1px solid color-mix(in srgb,#f59e0b 30%,transparent)}
details.hint summary{cursor:pointer;padding:8px 14px;font-weight:800;color:#b45309;display:flex;align-items:center;gap:7px;list-style:none}
details.hint summary .ico{width:17px;height:17px}
details.hint .prose{padding:0 14px 10px;font-size:15px}
.rubric{margin-top:14px}
.rubric table{width:100%;border-collapse:collapse;font-size:14.5px}
.rubric th{width:30%;text-align:left;padding:8px 12px;background:var(--surface-2);border:1px solid var(--line);vertical-align:top}
.rubric td{padding:8px 12px;border:1px solid var(--line);line-height:1.5}
.opl-antwoord{display:flex;gap:10px;align-items:flex-start;margin-top:8px;padding:10px 14px;border-radius:14px;background:var(--ok-bg);
  border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);line-height:1.62}
.opl-antwoord > .ico{flex:none;width:20px;height:20px;color:var(--ok);margin-top:3px}
.opl-antwoord > div{min-width:0}
:root[data-theme="dark"] .opl-antwoord{background:color-mix(in srgb,var(--ok) 12%,#191d33)}
.zelfeval{margin:24px 0 10px;padding:16px 22px;border-radius:22px;background:var(--surface);border:1px solid var(--line);border-left:9px solid var(--ok)}
.zelfeval ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.zelfeval li{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
.ze-tekst{flex:1;line-height:1.5}
.ze-vakjes{display:flex;gap:6px}
.ze-vakjes i{width:22px;height:22px;border-radius:6px;border:2px solid var(--ok)}
.ze-vakjes i:nth-child(2){border-color:#f59e0b}
.ze-vakjes i:nth-child(3){border-color:#e11d48}
.voortgang-pil b{font-weight:900}

/* ------------------------------------------------------------ tegels */
.se-tegel{cursor:default}
.se-tegel .tegel-beeld{display:block}
.tegel-motief{position:absolute;inset:0;
  background:radial-gradient(80% 90% at 90% 0%, color-mix(in srgb,var(--c) 60%,transparent), transparent 60%),
             linear-gradient(150deg,#0f172a,#1e293b)}
.tegel-motief::after{content:"";position:absolute;inset:0;opacity:.3;
  background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:22px 22px}
.se-tegel .t-nr{left:12px;right:auto;font:800 18px var(--font-display)}
.t-lijnen{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;gap:4px}
.t-lijnen i{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--c);color:#fff;font:800 12px var(--font-display);font-style:normal}
.t-nog{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  background:rgba(255,255,255,.14);color:#e2e8f0;font:800 11.5px var(--font-body)}
.t-nog .ico{width:14px;height:14px}
.se-tegel .tegel-tekst a{color:inherit;text-decoration:none}
.tegel-knoppen{display:grid;gap:6px;margin-top:6px}
.tegel-knoppen a{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line);
  font-weight:800;font-size:13px;color:var(--ink);text-decoration:none !important}
.tegel-knoppen a:hover{border-color:var(--dc)}
.tegel-knoppen .ico{width:16px;height:16px;color:var(--dc)}
.se-tegel.nog{opacity:.92}
.se-tegel.nog:hover{transform:none}
.kern-mini{margin:4px 0 0;padding-left:1.1em;font-size:13px;line-height:1.45;color:var(--ink-soft)}
.kern-mini li{margin:2px 0}

/* ------------------------------------------------------------ niveau- en startpagina */
.niv-hero{position:relative;border-radius:32px;overflow:hidden;isolation:isolate;margin-bottom:22px;color:#fff;
  background:radial-gradient(70% 90% at 100% 0%, color-mix(in srgb,var(--c) 70%,transparent), transparent 60%),
             linear-gradient(150deg,#0b1220,#1e293b)}
.niv-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.25;
  background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:32px 32px}
.niv-hero-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:center;padding:44px 44px 40px}
.niv-letter{display:grid;place-items:center;width:clamp(120px,14vw,180px);aspect-ratio:1;border-radius:40px;background:var(--c);
  font:800 clamp(80px,10vw,130px)/1 var(--font-display);color:#fff;box-shadow:0 10px 0 color-mix(in srgb,var(--c) 60%,#000)}
.niv-hero .kicker{color:color-mix(in srgb,var(--c) 40%,#fff)}
.niv-hero .titel-mega{margin:10px 0 10px}
.niv-hero .titel-mega span{-webkit-text-stroke:0;color:#fff}
.niv-hero p{margin:0;max-width:70ch;color:#dbe2ef;font-size:17px;line-height:1.6}
.niv-hero .pil{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2);box-shadow:none}
.niv-hero .pil .ico{color:#fff}
.niv-hero .oef-knoppen{margin-top:16px}
.niv-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin:0 0 10px}
.ni-vak{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.ni-vak > .ico{flex:none;width:28px;height:28px;color:var(--dc)}
.ni-vak b{font:800 17px var(--font-display)}
.ni-vak p{margin:4px 0 6px;color:var(--ink-soft);line-height:1.55}
.ni-vak.habitat > .ico{color:#f97316}
.sectiekop .tegel b{font:800 15px var(--font-display);color:var(--dc-d)}
.sectiekop h2 a{color:inherit;text-decoration:none}
.se-hero{background:linear-gradient(150deg,#062a2a,#0b1220 60%,#1c1133) !important;min-height:0}
.se-hero::before{background:radial-gradient(60% 80% at 100% 0%, rgba(20,184,166,.35), transparent 60%),
  radial-gradient(50% 70% at 80% 100%, rgba(245,158,11,.25), transparent 60%) !important}
.se-hero .titel-mega span{-webkit-text-stroke:0}
.se-hero .kicker{color:#99f6e4}
.se-hero-baan{position:absolute;right:28px;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(4,56px);gap:10px;opacity:.95}
.se-hero-baan span{display:grid;place-items:center;height:56px;border-radius:16px;background:var(--c);color:#fff;font:800 24px var(--font-display);
  box-shadow:0 5px 0 color-mix(in srgb,var(--c) 60%,#000);transform:rotate(-4deg)}
.se-hero-baan span:nth-child(even){transform:rotate(5deg) translateY(8px)}
.niv-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:0 0 26px}
.niv-kaart{position:relative;display:grid;gap:8px;align-content:start;padding:24px 24px 20px;border-radius:28px;background:var(--surface);
  border:1px solid var(--line);border-top:10px solid var(--c);color:var(--ink);text-decoration:none !important;box-shadow:0 2px 12px rgba(30,41,59,.06);
  transition:transform var(--dur-2),box-shadow var(--dur-2)}
.niv-kaart:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(30,41,59,.14)}
.nk-letter{position:absolute;right:20px;top:14px;font:800 64px/1 var(--font-display);color:color-mix(in srgb,var(--c) 25%,transparent)}
.nk-leeftijd{font:900 12px var(--font-body);text-transform:uppercase;letter-spacing:1px;color:var(--c)}
.nk-naam{font:800 30px/1 var(--font-display)}
.niv-kaart p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.55}
.nk-habitat{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,#f97316 8%,var(--surface));
  font-size:14px;line-height:1.5;font-weight:700}
.nk-habitat .ico{flex:none;width:18px;height:18px;color:#f97316;margin-top:2px}
.nk-tel{font:800 12.5px var(--font-body);color:var(--ink-faint)}
.mini-matrix{overflow-x:auto}
.mini-matrix table{width:100%;border-collapse:separate;border-spacing:0 6px}
.mini-matrix th{text-align:left;font:800 14px var(--font-display);padding:0 8px}
.mini-matrix thead th{font-size:15px}
.mini-matrix td{padding:0 8px;width:22%}
.mm-balk{display:inline-block;vertical-align:middle;height:12px;width:calc(var(--n) * 8px);max-width:75%;border-radius:99px;background:var(--c)}
.mm-n{margin-left:8px;font:800 13px var(--font-display);color:var(--ink-soft)}

/* ------------------------------------------------------------ leerlijnen en Habitat */
.lijn-tegel{color:#fff !important}
.lijn-tegel b{font:800 22px var(--font-display);color:#fff}
.lijn-oms{margin:0 28px 14px;color:var(--ink-soft);font-size:16px}
.lijn-kolommen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lk{border-radius:18px;background:var(--surface-2);border:1px solid var(--line);border-top:6px solid var(--c);padding:10px 12px}
.lk-kop{display:flex;justify-content:space-between;font:800 15px var(--font-display);color:var(--ink);margin-bottom:6px}
.lk-kop span{color:var(--ink-faint)}
.lk ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.lk li{font-size:14px;line-height:1.35}
.lk li.hoofd .hs-link{font-weight:900}
.lk li:not(.hoofd) .hs-link{font-weight:600}
.lk li.leeg{color:var(--ink-faint)}
.habitat-tijdlijn{list-style:none;margin:0 28px;padding:0 0 0 22px;border-left:3px solid color-mix(in srgb,var(--sc) 40%,var(--line));display:grid;gap:8px}
.habitat-tijdlijn li{position:relative;display:flex;gap:12px;align-items:flex-start;padding:8px 12px;border-radius:14px;background:var(--surface-2)}
.habitat-tijdlijn li::before{content:"";position:absolute;left:-31px;top:14px;width:14px;height:14px;border-radius:50%;background:var(--c);border:3px solid var(--surface)}
.habitat-tijdlijn li.eind{background:color-mix(in srgb,#f97316 12%,var(--surface));border:2px solid #f97316}
.habitat-tijdlijn li > div{display:grid;gap:2px}
.habitat-tijdlijn li > div > span{font-size:14px;color:var(--ink-soft);line-height:1.45}
.ht-nr{flex:none;min-width:38px;padding:2px 6px;border-radius:8px;background:var(--c);color:#fff;font:800 12.5px var(--font-display);text-align:center}
.habitat-tijdlijn .hs-link b{display:none}
.az{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.az a{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font:800 15px var(--font-display);
  color:var(--ink);text-decoration:none}
.az-groep h2{font:800 30px var(--font-display);margin:18px 0 10px;color:var(--dc)}
table.plan td.mat{font-size:13px;color:var(--ink-soft)}
table.plan tr.nog td{color:var(--ink-faint)}
.zoek-filter{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 16px}
.zoek-filter button{padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-weight:800;color:var(--ink-soft);cursor:pointer}
.zoek-filter button.aan{background:var(--dc);border-color:var(--dc);color:#fff}
.voet{margin-top:40px;padding:18px 0 6px;border-top:1px solid var(--line)}
.voet-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--ink-faint);font-size:13.5px}
.voet-in b{color:var(--ink-soft)}
.voet-r{margin-left:auto}

/* ------------------------------------------------------------ code */
.cb-taal{padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.12);color:#cbd5e1;font:800 11px var(--font-body);letter-spacing:.4px}
.cr{display:grid;gap:18px}
.cr.naast{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}

/* ------------------------------------------------------------ smal scherm */
@media (max-width:900px){
  .proef-kop,.cr.naast{grid-template-columns:1fr}
  .lijn-kolommen{grid-template-columns:1fr}
  .niv-hero-in{grid-template-columns:1fr;padding:28px}
  .se-hero-baan{display:none}
  .burennav{grid-template-columns:1fr}
  .opdr > *:not(.opdr-kop){margin-left:14px;margin-right:14px}
  .opdr-kop{flex-wrap:wrap}
}

/* ------------------------------------------------------------ afdruk */
@media print{
  @page{size:A4;margin:14mm 12mm 16mm}
  body{background:#fff !important}
  .wisselbalk,.naar-werkboek,.burennav,.legende,.vink,details.hint,.voet,.toc,.toc-meer,.zoek-filter{display:none !important}
  .hs-hero,.niv-hero{box-shadow:none;border:1px solid #d6dbe6}
  .hero-kaart{max-height:70mm}
  .blad,.opdr,.doelen,.zelfeval{box-shadow:none}
  .opdr{break-inside:auto}
  .opdr-kop{break-after:avoid}
  .vragen li{break-inside:avoid}
  figure.ill,.vb-stappen li,.fl-item,.pv-vak,.vb-antwoord,.formulekader,.callout,.rubric{break-inside:avoid}
  .kop{break-after:avoid}
  .ruimte.lijnen{height:calc(var(--n) * 9mm + 2mm);background-image:repeating-linear-gradient(to bottom,transparent 0 8.7mm,#9aa3b5 8.7mm 9mm)}
  .ruimte.ruit{height:calc(var(--n) * 8mm);background-size:5mm 5mm;background-image:linear-gradient(#d3d9e4 .3mm,transparent .3mm),linear-gradient(90deg,#d3d9e4 .3mm,transparent .3mm)}
  .ruimte.kader{height:calc(var(--n) * 8mm)}
  .ruimte.millimeter{height:calc(var(--n) * 8mm);background-size:10mm 10mm,10mm 10mm,1mm 1mm,1mm 1mm}
  .ruimte.code{height:calc(var(--n) * 7mm + 3mm);background:#fff;border:1.5px solid #9aa3b5;
    background-image:repeating-linear-gradient(to bottom,transparent 0 6.7mm,#e3e7ef 6.7mm 7mm)}
  .ruimte,.ruimte.tabel td{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  figure.ill,.hero-kaart,.tier,.schaal,.opdr-nr,.v-letter,.lijn-chip b,.t-lijnen i,.hk-lijnen i{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .tex-blok{overflow:visible}
  .plaats{background:#fff;border:1px dashed #b8c0cf}
  .plaats-prompt{max-height:none}
}

/* ------------------------------------------------------------ bijsturing na de eerste proef */
figure.ill.svgfig{width:100%;max-width:min(100%, calc(var(--lw,100%) + 28px))}
.schema text{font-size:15px}
.schema text.klein{font-size:13.5px}
.schema text.vet{font-size:16px}
.grafiek .as-getal{font-size:15px}
.grafiek .as-label{font-size:16px}
.grafiek .legenda,.grafiek .hl-label,.grafiek .notitie{font-size:15px}
.grafiek .staaf-getal{font-size:14px}
.schema .gevuld{fill:var(--k,var(--s-ink));stroke:none}
.schema .donker{fill:var(--s-ink);stroke:var(--s-ink)}
.schema text.groot{font:800 40px Consolas,monospace}
.prose table th,.tabel-wrap table th,.ruimte.tabel th,.fl-tabel th,.rubric th{text-transform:none !important;letter-spacing:0 !important}
.prose table th,.tabel-wrap table:not(.tabelblad-tbl) th{font-size:13.5px}
.callout p b,.callout li b,.callout td b,.callout span b{display:inline;margin:0}
.ruimte.tabel td.gegeven{padding:4px 12px;font-weight:700;background:var(--surface-2)}
.pdf-anker{position:absolute;font-size:2px;color:#fff;opacity:.01}
figure.ill.svgfig.breed{max-width:min(100%, 880px);margin-left:auto;margin-right:auto}
.ob figure.ill.svgfig{max-width:min(100%, 760px);margin-left:auto;margin-right:auto}
.schema circle.gevuld,.schema rect.gevuld,.schema path.gevuld,.schema ellipse.gevuld{fill:var(--k,var(--s-ink));stroke:none}
.schema circle.donker,.schema rect.donker,.schema path.donker{fill:var(--s-ink);stroke:var(--s-ink)}
.callout b:not(.co-titel),.callout strong{display:inline !important;margin:0 !important;font-size:inherit}
.callout > b.co-titel{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.grafiek .reeks.dun{stroke-width:1.8}
.blad > .figrij{margin-top:14px}
.figrij > .breed{grid-column:1 / -1}
.schema text.klein.vet{font-size:13.5px;font-weight:800;fill:var(--s-ink)}
.schema .lijn.dik,.schema .draad.dik{stroke-width:3.4}
.grafiek text.notitie.k1,.grafiek text.notitie.k2,.grafiek text.notitie.k3,.grafiek text.notitie.k4,.grafiek text.notitie.k5,.grafiek text.notitie.k6{fill:var(--k)}
.schema ellipse.vak{fill:var(--s-vak);stroke:var(--s-lijn);stroke-width:1.5}
.grafiek text.notitie,.grafiek text.hl-label{paint-order:stroke;stroke:var(--s-bg);stroke-width:4px;stroke-linejoin:round}
.schema ellipse.k1,.schema ellipse.k2,.schema ellipse.k3,.schema ellipse.k4,.schema ellipse.k5,.schema ellipse.k6{fill:color-mix(in srgb,var(--k) 16%,var(--s-bg));stroke:var(--k);stroke-width:1.8}
.grafiek .band{fill:color-mix(in srgb,var(--k) 14%,transparent);stroke:none}
.schema text.invers,.schema text.klein.invers,.schema text.vet.invers{fill:var(--s-bg) !important}

/* bijlagen: extra downloadbestanden bij een blad */
.bijlagen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 4px}
.bijlagen .bl-kop{font:700 12.5px var(--font-body);color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;margin-right:4px}
.bijlage{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);text-decoration:none !important;color:var(--ink);font-size:13.5px}
.bijlage:hover{border-color:var(--dc)}
.bijlage .ico{width:15px;height:15px}
.bijlage span{color:var(--ink-faint);font-size:12.5px}

/* halo voor alle figuurtekst: een smalle rand in de achtergrondkleur, zodat een lijn door een label de tekst niet
   onleesbaar maakt (zoals op technische tekeningen en kaarten). Niet voor witte of zelf gekleurde tekst op een vlak,
   code, of de letter in een symbool; klasse geen-halo zet hem uit. */
.schema text:not(.invers):not(.wit):not(.mono):not(.sym-letter):not(.geen-halo):not([style*="fill"]){paint-order:stroke;
  stroke:var(--s-bg);stroke-width:3.5px;stroke-linejoin:round}

/* halo niet in de afdruk: Chromium drukt tekst met een omtrek af als contouren, wat de PDF's meer dan verdubbelt.
   De halo van grafieknotities en hulplijnlabels (van vóór de algemene halo) blijft. */
@media print{.schema text:not(.notitie):not(.hl-label){stroke:none !important;paint-order:normal !important}}