:root{--acc:#1E3A2F;--acc2:#47663F;--ink:#16211B;--muted:#4D5D52;--line:#DCE3DA;--bg:#FFFFFF;--paper:#F1F4EF;--fs:17px;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Georgia,'Liberation Serif','Times New Roman',serif;font-size:var(--fs);line-height:1.62;transition:background .2s,color .2s;}
:root[data-theme="dark"]{--acc:#A9C79F;--acc2:#8BA383;--ink:#ECF1EA;--muted:#C9D6CB;--line:#2B3A30;--bg:#0F1612;--paper:#17211B;}
/* systeem-donkere modus vóór/zonder JS-keuze */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="dark"]){--acc:#A9C79F;--acc2:#8BA383;--ink:#ECF1EA;--muted:#C9D6CB;--line:#2B3A30;--bg:#0F1612;--paper:#17211B;}}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--acc);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-family:system-ui,Arial,sans-serif;font-weight:700;text-decoration:none;}
.skip:focus{left:0;}
:root[data-theme="dark"] .hint{background:#1B2A21;border-color:#2B3A30;}
:root[data-theme="dark"] .inl,:root[data-theme="dark"] .vblk{background:#131C17;}
:root[data-theme="dark"] .acc>button,:root[data-theme="dark"] .inl .more{background:#1B2A21;}
:root[data-theme="dark"] .panel,:root[data-theme="dark"] .modal .card,:root[data-theme="dark"] header.top,:root[data-theme="dark"] .arrow,:root[data-theme="dark"] .navsel select,:root[data-theme="dark"] .panel select,:root[data-theme="dark"] .panel input,:root[data-theme="dark"] .panel textarea,:root[data-theme="dark"] .chapnav a,:root[data-theme="dark"] .pop input.q,:root[data-theme="dark"] .card,:root[data-theme="dark"] .bkcard{background:var(--paper);color:var(--ink);}
:root[data-theme="dark"] .panel .ptext{background:#17211B;}
.sans{font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;}
a{color:var(--acc);}
header.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 14px;padding-top:max(8px,env(safe-area-inset-top));}
.row1{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.brand{font-weight:bold;color:var(--acc);font-size:18px;white-space:nowrap;text-decoration:none;}
.brand small{color:var(--muted);font-weight:normal;font-size:12px;margin-left:5px;font-family:system-ui,Arial,sans-serif;}
.navsel{display:flex;align-items:center;gap:6px;margin-left:auto;font-family:system-ui,Arial,sans-serif;font-size:14px;}
.navsel select{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;max-width:40vw;}
.arrow{border:1px solid var(--line);background:#fff;border-radius:8px;width:34px;height:34px;font-size:16px;cursor:pointer;color:var(--acc);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.arrow:disabled,.arrow[aria-disabled=true]{opacity:.35;cursor:default;pointer-events:none;}
.tabs{display:flex;gap:4px;margin-top:6px;font-family:system-ui,Arial,sans-serif;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tabs button{flex:0 0 auto;font:14px/1 inherit;font-family:system-ui,Arial,sans-serif;padding:9px 12px;border:0;background:none;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;}
.tabs button.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:700;}
main{max-width:720px;margin:0 auto;padding:22px 18px 100px;}
.chapno{font-family:system-ui,Arial,sans-serif;color:var(--muted);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 2px;}
h1.book{color:var(--acc);font-size:28px;margin:0 0 6px;}
.opschrift{font-style:italic;color:var(--muted);margin:6px 0 12px;}
.hint{font-family:system-ui,Arial,sans-serif;font-size:13.5px;color:var(--acc2);background:#F1F4EF;border:1px solid #DCE3DA;border-radius:9px;padding:9px 12px;margin:6px 0 16px;}
.peri{font-family:system-ui,Arial,sans-serif;font-weight:700;color:var(--acc);font-size:15px;margin:22px 0 8px;}
.vs{margin:0 0 3px;}
.vs.poem{padding-left:1.7em;text-indent:-1.7em;margin:0 0 6px;}
.vs.poem .v{text-indent:0;}
.v{cursor:pointer;border-radius:4px;padding:0 1px;transition:background .1s;}
.v:hover{background:#DCE3DA;box-shadow:inset 0 -2px 0 #C9D6CB;}
.v:focus-visible{outline:2px solid var(--acc);outline-offset:1px;}
.vn{font-family:system-ui,Arial,sans-serif;font-size:11px;font-weight:700;color:var(--acc);vertical-align:super;line-height:0;margin-right:2px;}
.fnref{font-size:11px;color:var(--acc);}
.inl{border:1px solid var(--line);background:#F8FAF7;border-radius:10px;margin:8px 0 16px;overflow:hidden;}
.inl .kort{padding:10px 14px;font-size:15.5px;}
.inl .kort b{font-family:system-ui,Arial,sans-serif;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--acc);display:block;margin-bottom:2px;}
.inl .more{font-family:system-ui,Arial,sans-serif;font-size:13px;color:var(--acc);background:#F1F4EF;border:0;border-top:1px solid var(--line);width:100%;text-align:left;padding:8px 14px;cursor:pointer;}
.vblk{border:1px solid var(--line);background:#F8FAF7;border-radius:10px;margin:14px 0;}
.vblk .vh{font-family:system-ui,Arial,sans-serif;font-weight:700;color:var(--acc);padding:10px 14px;font-size:14px;}
.vblk .vb{padding:2px 14px 12px;}
.vblk h5{font-family:system-ui,Arial,sans-serif;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin:12px 0 3px;}
.vblk p,.vb p{margin:3px 0 8px;} .vb ul{margin:3px 0 8px 18px;}
.tk-h{font-weight:bold;color:var(--acc2);}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 12px;}
table.gwt{border-collapse:collapse;width:100%;table-layout:fixed;font-family:system-ui,Arial,sans-serif;font-size:13.5px;}
table.gwt th,table.gwt td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top;overflow-wrap:break-word;word-break:break-word;}
table.gwt th{background:#F1F4EF;color:var(--acc);font-weight:700;}
:root[data-theme="dark"] table.gwt th{background:#1B2A21;}
table.gwt td:first-child{font-weight:600;color:var(--acc2);}
table.gwt col.c1,table.gwt th:first-child,table.gwt td:first-child{width:26%;}
table.gwt th:nth-child(2),table.gwt td:nth-child(2){width:28%;}
table.gwt th:nth-child(3),table.gwt td:nth-child(3){width:46%;}
table.gwt tr>*:only-child,table.gwt tr>*:nth-child(1):nth-last-child(2),table.gwt tr>*:nth-child(2):nth-last-child(1){width:auto;}
.vk-intro{font-family:system-ui,Arial,sans-serif;font-size:13px;color:var(--muted);margin:2px 0 8px;}
a.xref{color:var(--acc);text-decoration:none;border-bottom:1px dotted var(--acc);cursor:pointer;}
a.xref:hover{border-bottom-style:solid;}
#app .acc{max-width:100%;}
#app .acc .abody h5{font-family:system-ui,Arial,sans-serif;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin:12px 0 3px;}
#app .acc .abody p,#app .acc .abody ul{margin:4px 0 8px;} #app .acc .abody ul{margin-left:18px;}
.footnotes{border-top:1px solid var(--line);margin-top:18px;padding-top:10px;font-size:14px;color:var(--muted);}
.footnotes sup{color:var(--acc);font-weight:bold;}
.chapnav{display:flex;justify-content:space-between;gap:8px;margin:28px 0 0;font-family:system-ui,Arial,sans-serif;}
.chapnav a{font:14px inherit;font-family:system-ui,Arial,sans-serif;padding:9px 14px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;color:var(--acc);text-decoration:none;}
.chapnav a.dis{opacity:.35;pointer-events:none;}
.loading{color:var(--muted);font-family:system-ui,Arial,sans-serif;font-size:14px;padding:12px 0;}
footer.foot{max-width:720px;margin:0 auto;padding:18px;color:var(--muted);font-size:13px;font-family:system-ui,Arial,sans-serif;border-top:1px solid var(--line);}
footer.foot a{color:var(--acc);cursor:pointer;}
.hide{display:none!important;}
/* paneel */
.pback{position:fixed;inset:0;background:rgba(15,22,18,.45);z-index:40;display:none;} .pback.on{display:block;}
.panel{position:fixed;z-index:41;right:0;top:0;height:100vh;height:100dvh;width:min(460px,100%);background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.22);
  transform:translateX(100%);transition:transform .18s ease;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(16px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(60px,env(safe-area-inset-bottom)) 18px;}
.panel.on{transform:translateX(0);}
.panel .close{position:sticky;float:right;top:0;right:0;border:1px solid var(--line);background:#fff;border-radius:8px;width:38px;height:38px;font-size:24px;color:var(--muted);cursor:pointer;z-index:2;}
.panel .pref{font-family:system-ui,Arial,sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px;}
.panel h3{color:var(--acc);margin:2px 0 2px;font-size:20px;}
.panel .ptext{border-left:3px solid var(--acc);background:#F1F4EF;padding:9px 12px;margin:8px 0 6px;font-size:16px;}
.panel .ident{font-family:system-ui,Arial,sans-serif;font-size:10.5px;color:#a99;letter-spacing:.05em;margin-bottom:8px;}
.acc{border:1px solid var(--line);border-radius:9px;margin:8px 0;overflow:hidden;}
.acc>button{width:100%;text-align:left;font-family:system-ui,Arial,sans-serif;font-weight:600;color:var(--acc);background:#F1F4EF;border:0;padding:10px 12px;font-size:13.5px;cursor:pointer;display:flex;justify-content:space-between;}
.acc .abody{padding:2px 12px 10px;font-size:14.5px;line-height:1.5;}
.acc .abody h5{font-family:system-ui,Arial,sans-serif;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin:11px 0 2px;}
.acc.rf>button{background:var(--acc);color:#fff;}
.panel label{display:block;font-family:system-ui,Arial,sans-serif;font-size:13px;font-weight:600;margin:11px 0 3px;}
.panel select,.panel input,.panel textarea{width:100%;font:15px inherit;font-family:system-ui,Arial,sans-serif;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;}
.panel .legal{font-family:system-ui,Arial,sans-serif;font-size:12px;color:var(--muted);margin:11px 0;line-height:1.45;}
.panel .legal a{color:var(--acc);} .panel .chk{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;}
.panel .chk input{width:auto;margin-top:3px;} .panel .acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.panel .btn{font:14px inherit;font-family:system-ui,Arial,sans-serif;padding:9px 14px;border-radius:8px;cursor:pointer;border:1px solid var(--acc);}
.panel .btn.p{background:var(--acc);color:#fff;} .panel .btn.g{background:#fff;color:var(--acc);}
.panel .dv{margin:2px 0 8px;font:13px system-ui,Arial,sans-serif;padding:6px 12px;border:1px solid var(--line);background:var(--paper);color:var(--acc);border-radius:8px;cursor:pointer;}
.panel .status{font-family:system-ui,Arial,sans-serif;font-size:12.5px;color:var(--acc);margin-top:9px;} .panel .fallb{font-family:system-ui,Arial,sans-serif;font-size:12px;color:var(--muted);margin-top:6px;} .panel .hp{position:absolute;left:-9999px;}
.modal{position:fixed;inset:0;z-index:50;background:rgba(15,22,18,.5);display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:30px 14px;} .modal.on{display:flex;}
.modal .card{background:#fff;max-width:640px;width:100%;border-radius:12px;padding:22px 24px 30px;font-family:system-ui,Arial,sans-serif;font-size:14.5px;line-height:1.55;}
.modal h2{color:var(--acc);} .modal h3{color:var(--acc2);margin:16px 0 4px;font-size:16px;} .modal .x{float:right;border:0;background:none;font-size:24px;cursor:pointer;color:var(--muted);}
/* tools-popover */
.pop{position:absolute;right:12px;top:52px;z-index:30;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:12px;width:min(320px,92vw);font-family:system-ui,Arial,sans-serif;display:none;}
.pop.on{display:block;}
.pop h4{margin:2px 0 6px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.pop .grp{margin-bottom:12px;}
.pop input.q{width:100%;font:15px inherit;font-family:system-ui,Arial,sans-serif;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;}
.pop .scope{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:12.5px;color:var(--muted);}
.pop .btns{display:flex;gap:6px;flex-wrap:wrap;}
.pop .tb{font:14px inherit;font-family:system-ui,Arial,sans-serif;padding:8px 12px;border:1px solid var(--line);background:var(--paper);color:var(--acc);border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block;}
.pop .tb.on{background:var(--acc);color:#fff;border-color:var(--acc);}
.pop .res{margin-top:8px;max-height:44vh;overflow:auto;}
.pop .res a,.pop .res button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);padding:8px 4px;cursor:pointer;font:14px inherit;text-decoration:none;}
.pop .res b{color:var(--acc);font-family:system-ui,Arial,sans-serif;font-size:12px;}
.pop .hitmark{background:#f3d9a0;} :root[data-theme="dark"] .pop .hitmark{background:#5a4420;color:#fff;}
/* startpagina */
.hero{background:var(--paper);border-bottom:1px solid var(--line);padding:28px 18px;}
.hero .in{max-width:720px;margin:0 auto;}
.hero h1{color:var(--acc);margin:0 0 6px;font-size:30px;}
.hero p{margin:6px 0;color:var(--muted);font-family:system-ui,Arial,sans-serif;font-size:15px;}
.tsec{max-width:720px;margin:0 auto;padding:18px;}
.tsec h2{font-family:system-ui,Arial,sans-serif;color:var(--acc2);font-size:15px;letter-spacing:.05em;text-transform:uppercase;margin:22px 0 8px;}
.bkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.bkcard{display:block;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:11px 12px;text-decoration:none;color:var(--ink);font-family:system-ui,Arial,sans-serif;}
.bkcard:hover{border-color:var(--acc);}
.bkcard b{color:var(--acc);display:block;font-size:15px;}
.bkcard span{color:var(--muted);font-size:12px;}
.jump{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap;}
.jump input{flex:1;min-width:180px;font:15px inherit;font-family:system-ui,Arial,sans-serif;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);}
.jump button{font:15px inherit;font-family:system-ui,Arial,sans-serif;padding:10px 16px;border:1px solid var(--acc);background:var(--acc);color:#fff;border-radius:8px;cursor:pointer;}
@media (max-width:560px){ main{padding:16px 14px 100px;} h1.book{font-size:24px;} .navsel select{max-width:34vw;}
  .panel{right:0;left:0;top:auto;bottom:0;width:100%;height:auto;max-height:92dvh;border-radius:16px 16px 0 0;
    transform:translateY(100%);box-shadow:0 -8px 30px rgba(0,0,0,.22);
    padding:18px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));}
  .panel.on{transform:translateY(0);}
  .panel::before{content:"";position:sticky;top:0;display:block;width:44px;height:4px;margin:-6px auto 8px;border-radius:3px;background:var(--line);}
}
@media print{
  header.top,footer.foot,.pback,.panel,.modal,.pop,.chapnav,.hint,.tabs{display:none!important;}
  body{background:#fff;color:#000;font-size:12pt;} main{max-width:none;padding:0;}
  .v{cursor:auto;} .vn{color:#000;}
}

/* Voor jou — B1-uitleglaag (puur uitleggend, toegevoegd 28-09-2026) */
.inl .voorjou{padding:11px 14px;font-size:16px;line-height:1.6;background:#F1F4EF;border-bottom:1px solid var(--line);}
.inl .voorjou b{font-family:system-ui,Arial,sans-serif;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--acc);display:block;margin-bottom:3px;}
.inl .voorjou p{margin:0 0 6px;}
.inl .voorjou p:last-child{margin-bottom:0;}
:root[data-theme="dark"] .inl .voorjou{background:#17211B;}
.panel .acc .abody .vj p{margin:0 0 6px;}

/* huisstijl-groen */
:root[data-theme="dark"] .skip,:root[data-theme="dark"] .panel .btn.p,:root[data-theme="dark"] .pop .tb.on,:root[data-theme="dark"] .jump button{color:#0F1612;}
:root[data-theme="dark"] .panel .btn.g{background:var(--paper);color:var(--acc);}
:root[data-theme="dark"] .panel .close{background:var(--paper);color:var(--ink);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="dark"]) .skip,:root:not([data-theme="light"]):not([data-theme="dark"]) .acc.rf>button,:root:not([data-theme="light"]):not([data-theme="dark"]) .panel .btn.p,:root:not([data-theme="light"]):not([data-theme="dark"]) .pop .tb.on,:root:not([data-theme="light"]):not([data-theme="dark"]) .jump button{color:#0F1612;}:root:not([data-theme="light"]):not([data-theme="dark"]) .panel .btn.g{background:var(--paper);color:var(--acc);}:root:not([data-theme="light"]):not([data-theme="dark"]) .panel .close{background:var(--paper);color:var(--ink);}}
:focus-visible{outline:2px solid #8BA383;outline-offset:2px;}