/* ==========================================================================
   Eduqa leeromgeving — centrale opmaak
   Rust, overzicht, resultaat.

   Opbouw
   1. Lettertypen (zelf gehost, geen Google-verbinding nodig)
   2. Tokens: kleur, vloeiende letter- en witruimtematen (Utopia, 360 → 1240 px)
   3. Basis
   4. Kader: bovenbalk, menu, inhoud, voettekst
   5. Lesonderdelen: intro, doelen, formules, afleidingen, kaders, tabellen, vragen
   6. Overzichtspagina's
   7. Telefoon en tablet
   8. Toegankelijkheid en print
   ========================================================================== */

/* 1. Lettertypen ---------------------------------------------------------- */
/* Lexend: ontworpen om leesvloeiendheid te verbeteren (onderzoek naar
   leesproblemen bij scholieren); ruime letters, gewone nul zonder streep.
   STIX Two: echte wiskundeletter, zodat formules op elke telefoon (ook
   Android) hetzelfde ogen. Beide zelf gehost, licentie SIL OFL. */
@font-face{font-family:"Lexend";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/lexend-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lexend";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/lexend-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"STIX Two";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/stix-two-text-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"STIX Two";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/stix-two-text-greek-wght-normal.woff2) format("woff2");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"STIX Two";font-style:italic;font-weight:400 700;font-display:swap;
  src:url(fonts/stix-two-text-latin-wght-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"STIX Two";font-style:italic;font-weight:400 700;font-display:swap;
  src:url(fonts/stix-two-text-greek-wght-italic.woff2) format("woff2");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}

/* 2. Tokens --------------------------------------------------------------- */
:root{
  /* kleur: uit het Eduqa-logo (stam, bladeren, kabouter) */
  --navy:#073660;        /* stam en 'Eduqa': koppen, merk, actieve dingen */
  --navy-2:#04284a;
  --blue:#2aa6de;        /* lichte bladeren: alleen voor vlakken en lijnen */
  --blue-dark:#0f6a9c;   /* blauw dat donker genoeg is voor tekst (contrast AA) */
  --blue-wash:#e8f4fb;
  --bark:#7a5232;        /* warm accent: 'zelf afleiden' en voorkennis */
  --bark-wash:#f6efe7;
  --orange:#b35609;      /* let op / valkuil */
  --orange-wash:#fdf1e6;
  --ink:#0e1d2b;
  --text:#26323d;
  --muted:#5f6b78;
  --mist:#f2f6f9;        /* zijbalk en rustige vlakken */
  --mist-2:#e3ebf1;
  --paper:#f3f7fa;       /* achtergrond van de figuren */
  --sand:#dbe3ea;
  --white:#fff;
  --line:#d9e2ea;
  --line-soft:#e9eff4;
  --strong:#073660;      /* donkere vlakken (tegels, knoppen) */
  --strong-2:#04284a;
  --topbar-bg:rgba(255,255,255,.88);

  /* letters */
  --font-text:"Lexend",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-math:"STIX Two","STIX Two Math","Cambria Math","Cambria","Times New Roman",serif;

  /* vloeiende letterschaal (Utopia: 17→19 px, verhouding 1,2→1,25) */
  --step-n2:clamp(0.7378rem,0.7288rem + 0.0403vw,0.7600rem);
  --step-n1:clamp(0.8854rem,0.8590rem + 0.1174vw,0.9500rem);
  --step-0:clamp(1.0625rem,1.0114rem + 0.2273vw,1.1875rem);
  --step-1:clamp(1.2750rem,1.1893rem + 0.3807vw,1.4844rem);
  --step-2:clamp(1.5300rem,1.3969rem + 0.5918vw,1.8555rem);
  --step-3:clamp(1.8360rem,1.6383rem + 0.8788vw,2.3193rem);
  --step-4:clamp(2.2032rem,1.9185rem + 1.2654vw,2.8992rem);
  --step-5:clamp(2.6438rem,2.2429rem + 1.7820vw,3.6240rem);

  /* vloeiende witruimte */
  --space-3xs:clamp(0.2656rem,0.2528rem + 0.0568vw,0.2969rem);
  --space-2xs:clamp(0.5312rem,0.5057rem + 0.1136vw,0.5938rem);
  --space-xs:clamp(0.7969rem,0.7585rem + 0.1705vw,0.8906rem);
  --space-s:clamp(1.0625rem,1.0114rem + 0.2273vw,1.1875rem);
  --space-m:clamp(1.5938rem,1.5170rem + 0.3409vw,1.7812rem);
  --space-l:clamp(2.1250rem,2.0227rem + 0.4545vw,2.3750rem);
  --space-xl:clamp(3.1875rem,3.0341rem + 0.6818vw,3.5625rem);
  --space-2xl:clamp(4.2500rem,4.0455rem + 0.9091vw,4.7500rem);

  /* vormen: klein voor labels, middel voor kaders; geen zwevende schaduwen */
  --r-s:4px;
  --r-m:10px;
  --measure:68ch;        /* prettige regellengte */

  --sidebar:300px;
  --topbar:64px;
  --tap:44px;            /* minimale tikgrootte */
}

/* 3. Basis ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar) + 1rem)}
body{margin:0;font-family:var(--font-text);font-size:var(--step-0);line-height:1.6;color:var(--text);background:var(--white);
  font-feature-settings:"kern";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3{hyphens:auto;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4;color:var(--navy);line-height:1.15;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
p,li{text-wrap:pretty}
a{color:inherit}
a:where(:not([class])){color:var(--navy);text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:.18em}
strong{font-weight:720;color:var(--ink)}
button{font:inherit}
img,svg{max-width:100%}
sub,sup{font-size:.72em;line-height:0}

/* 4. Kader ---------------------------------------------------------------- */
.topbar{height:var(--topbar);position:sticky;top:0;z-index:40;display:grid;grid-template-columns:var(--sidebar) 1fr auto auto auto;align-items:center;
  background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(8px)){.topbar{background:var(--topbar-bg);backdrop-filter:saturate(1.4) blur(12px)}}
.brand{height:100%;display:flex;align-items:center;gap:.7rem;padding:0 1.25rem;text-decoration:none;border-right:1px solid var(--line)}
.brand img{width:auto;height:46px;object-fit:contain}
.brand-text{display:grid;line-height:1.05;color:var(--navy);padding-left:.7rem;border-left:2px solid var(--blue)}
.brand-text strong{font-size:1.3rem;font-weight:800;letter-spacing:-.015em;color:var(--navy)}
.brand-text small{color:var(--blue-dark);font-size:.9rem;font-weight:500;letter-spacing:.005em}
.course-meta{padding:0 var(--space-m);display:flex;align-items:baseline;gap:.7rem;color:var(--navy);min-width:0}
.course-meta strong{font-weight:720;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-label{font-size:var(--step-n1);font-weight:600;color:var(--muted)}
.course-label::after{content:"/";margin-left:.7rem;color:var(--line)}
.progress-mini{width:150px;margin-right:1.5rem;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.55rem;font-size:var(--step-n1);font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.progress-mini div{height:6px;background:var(--mist-2);border-radius:99px;overflow:hidden}
.progress-mini i{display:block;height:100%;background:var(--blue);border-radius:inherit;transition:width .3s ease}
.menu-toggle{display:none;border:0;background:transparent;width:var(--tap);height:var(--tap);padding:11px;border-radius:var(--r-m);cursor:pointer}
.menu-toggle span{display:block;height:2px;background:var(--navy);margin:5px 0;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.layout{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);background:linear-gradient(90deg,var(--mist) calc(var(--sidebar) - 1px),var(--line) 0 var(--sidebar),var(--white) 0);min-height:calc(100vh - var(--topbar));min-height:calc(100dvh - var(--topbar))}

/* zijbalk */
.sidebar{position:sticky;top:var(--topbar);height:calc(100vh - var(--topbar));height:calc(100dvh - var(--topbar));overflow:auto;overscroll-behavior:contain;
  background:var(--mist);border-right:1px solid var(--line);padding:var(--space-m) .9rem var(--space-l)}
.sidebar-head{padding:0 .6rem var(--space-s);margin-bottom:.6rem;border-bottom:1px solid var(--line)}
.sidebar-head .eyebrow{display:block;margin-bottom:.15rem}
.sidebar-head h2{margin:0;font-size:var(--step-2)}
.sidebar-head .sk{margin:0;font-size:inherit;letter-spacing:0}
.sidebar-kop{display:grid;gap:.05rem;margin:0 -.5rem;padding:.35rem .5rem;border-radius:var(--r-m);text-decoration:none;color:var(--navy);hyphens:manual;-webkit-hyphens:manual}
.sidebar-kop:hover{background:var(--mist-2)}
.sidebar-kop:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sk-vak{font-size:var(--step-2);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.sk-klas{font-size:var(--step-0);font-weight:700;line-height:1.25;color:var(--blue-dark)}
.sidebar-head .sk + p{margin:.1rem 0 0;font-size:var(--step-n1);color:var(--muted)}
.lessons a.formule-link{font-weight:700;color:var(--navy);margin-top:.2rem;border-top:1px solid var(--line-soft)}
.sidebar-head p{margin:.2rem 0 0;color:var(--muted);font-size:var(--step-n1);line-height:1.4}
.chapter-nav details{border-bottom:1px solid var(--line-soft)}
.chapter-nav summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:.6rem;min-height:var(--tap);padding:.5rem .6rem;font-weight:700;color:var(--navy);border-radius:var(--r-m)}
.chapter-nav summary:hover{background:var(--mist-2)}
.chapter-nav summary::-webkit-details-marker{display:none}
.chapter-nav summary::after{content:"";width:.5rem;height:.5rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
.chapter-nav details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.chapter-number{width:2rem;height:2rem;border-radius:var(--r-s);display:grid;place-items:center;background:var(--white);border:1px solid var(--line);color:var(--navy);font-size:.85rem;font-weight:760;font-variant-numeric:tabular-nums}
.lessons{padding:0 0 .7rem 2.6rem;display:grid;gap:1px}
.lessons a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:40px;text-decoration:none;color:var(--text);padding:.45rem .6rem;border-radius:var(--r-s);font-size:var(--step-n1);line-height:1.35}
.lessons a:hover{background:var(--mist-2);color:var(--navy)}
.lessons a.active{background:var(--white);color:var(--navy);font-weight:700;box-shadow:inset 3px 0 0 var(--blue)}
.lessons a .ls-title{display:flex;gap:.5rem}
.lessons a .ls-num{flex:none;color:var(--muted);font-variant-numeric:tabular-nums;min-width:2.7em;white-space:nowrap;font-weight:600}
.lessons a.active .ls-num{color:var(--blue-dark)}
.lessons a.overview-link{font-weight:700;color:var(--navy)}
.lessons a.overview-link.active{color:var(--navy)}
.done{display:none;color:var(--blue-dark);font-weight:800}
.lessons a.is-read .done{display:inline}
.sidebar .home-link{display:flex;align-items:center;gap:.6rem;min-height:var(--tap);text-decoration:none;color:var(--navy);font-weight:700;padding:.45rem .6rem;border-radius:var(--r-m);font-size:var(--step-n1)}
.sidebar .home-link:hover{background:var(--mist-2)}
.sidebar .home-link.active{background:var(--white);box-shadow:inset 3px 0 0 var(--blue)}
.sidebar .home-link .chapter-number{background:var(--white)}
.back-course{display:flex;align-items:center;min-height:var(--tap);margin:var(--space-s) .6rem 0;text-decoration:none;color:var(--navy);font-weight:700;font-size:var(--step-n1)}
.back-course:hover{text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:.2em}

/* inhoud */
.content{min-width:0;background:var(--white)}
.content-wrap{max-width:calc(var(--measure) + 2 * var(--space-xl));margin:0 auto;padding:var(--space-l) var(--space-xl) var(--space-2xl)}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:.35rem .5rem;align-items:center;color:var(--muted);font-size:var(--step-n1);margin-bottom:var(--space-m);line-height:1.4}
.breadcrumbs a{text-decoration:none;color:var(--navy);font-weight:600}
.breadcrumbs a:hover{text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:.2em}
.breadcrumbs span{color:var(--muted)}

/* kleine labels: gewone zinsletters, geen hoofdletters met spatiëring */
.eyebrow{display:inline-block;font-size:var(--step-n1);font-weight:700;color:var(--blue-dark);letter-spacing:0;text-transform:none}

/* voettekst */
.footer{background:var(--strong-2);color:rgba(255,255,255,.72)}
.footer-inner{max-width:1400px;margin:0 auto;padding:1rem 2rem;padding-bottom:max(1rem,env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:center;gap:1rem;font-size:var(--step-n1);text-align:center}
.gnomeworks{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:rgba(255,255,255,.72);line-height:1.05}
.gnomeworks strong{color:#fff}
.gnomeworks small{display:block;color:rgba(255,255,255,.5);font-size:.7rem;margin-top:.18rem}
.gnome-mark{width:30px;height:30px;border-radius:var(--r-s);background:#0d4677;border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;color:#8fd3f5;font-weight:800}
.overlay{display:none}

/* 5. Lesonderdelen ------------------------------------------------------- */
.lesson-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-m);align-items:start;padding-bottom:var(--space-m);border-bottom:1px solid var(--line)}
.lesson-intro h1,.hero h1{margin:.2rem 0 var(--space-xs);font-size:var(--step-5);line-height:1.06;letter-spacing:-.035em;font-weight:720}
.lead{margin:0;color:var(--text);font-size:var(--step-1);line-height:1.5;max-width:var(--measure)}
.lesson-status{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);font-weight:700;font-size:var(--step-n1);white-space:nowrap;padding-top:.5rem}
.lesson-status::before{content:"";width:.95em;height:.95em;border:2px solid currentColor;border-radius:50%;
  background:linear-gradient(currentColor,currentColor) 50% 25%/2px 35% no-repeat}

.lesson-block{padding:var(--space-l) 0 0}
.lesson-block h2{margin:0 0 var(--space-xs);font-size:var(--step-3)}
.lesson-block h3{margin:var(--space-m) 0 var(--space-2xs);font-size:var(--step-1)}
.lesson-block p,.lesson-block ul,.lesson-block ol{max-width:var(--measure);color:var(--text)}
.lesson-block p{margin:0 0 var(--space-s)}
.lesson-block ul,.lesson-block ol{padding-left:1.3rem;margin:0 0 var(--space-s)}
.lesson-block li{margin:.3rem 0}
.lesson-block li::marker{color:var(--blue-dark);font-weight:700}

/* doelen en voorkennis: twee kolommen met een lijn, geen kaarten */
.goals{margin-top:var(--space-m);display:grid;grid-template-columns:1.5fr 1fr;gap:var(--space-l)}
.goals>div{padding-left:var(--space-s);border-left:3px solid var(--blue)}
.goals>div.prior{border-left-color:var(--sand)}
.goals h2{font-size:var(--step-0)!important;color:var(--blue-dark)!important;margin:0 0 .35rem!important;letter-spacing:0;text-transform:none}
.goals>div.prior h2{color:var(--bark)!important}
.goals ul{margin:0;padding-left:1.1rem;font-size:var(--step-n1);color:var(--text)}
.goals li{margin:.25rem 0}
.goals li::marker{color:var(--blue-dark)}
.goals p{margin:0;font-size:var(--step-n1);color:var(--text)}
.goals a{color:var(--navy);font-weight:700}

/* formules: het sterkste element van een les */
.m{font-family:var(--font-math);font-size:1.1em;white-space:nowrap;color:var(--navy-2)}
.formula{margin:var(--space-m) 0;max-width:var(--measure);display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;
  background:var(--blue-wash);border-left:4px solid var(--navy);border-radius:0 var(--r-m) var(--r-m) 0;padding:var(--space-xs) var(--space-s)}
.formula .eq{font-family:var(--font-math);font-size:var(--step-3);color:var(--navy-2);display:block;line-height:1.35;max-width:100%;overflow-x:auto;padding:.1em 0}
.formula .note{font-size:var(--step-n1);color:var(--muted);flex-basis:100%;line-height:1.45}
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;line-height:1.15;margin:0 .12em}
.frac>i{font-style:normal;padding:0 .15em}
.frac>i:first-child{border-bottom:1.5px solid currentColor}
.formula .frac{font-size:.9em}
.sqrt{white-space:nowrap}
.sqrt>i{font-style:normal;border-top:1.5px solid currentColor;padding:.08em .1em 0 .1em;display:inline-flex;align-items:center}

/* labels: rechthoekig stempeltje, gewone letters */
.tag{display:inline-block;font-family:var(--font-text);font-size:var(--step-n2);font-weight:700;letter-spacing:.01em;text-transform:none;border-radius:var(--r-s);padding:.12rem .45rem;vertical-align:.1em;white-space:nowrap;line-height:1.4}
.tag.binas{background:var(--white);color:var(--blue-dark);box-shadow:inset 0 0 0 1.5px currentColor}
.tag.afleiden{background:var(--white);color:var(--bark);box-shadow:inset 0 0 0 1.5px currentColor}
.tag.afleiden::before{content:"✎";margin-right:.25em}
p .tag,li .tag,td .tag{margin-left:.2rem}

/* afleiding in twee kolommen */
.derivation{margin:var(--space-m) 0;max-width:var(--measure);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--white)}
.derivation .d-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.65rem var(--space-s);background:var(--mist);border-bottom:1px solid var(--line);font-weight:720;color:var(--navy);font-size:var(--step-n1)}
.derivation table{width:100%;border-collapse:collapse}
.derivation td{padding:.6rem var(--space-s);border-bottom:1px solid var(--line-soft);vertical-align:middle}
.derivation tr:last-child td{border-bottom:0}
.derivation td:first-child{font-family:var(--font-math);font-size:var(--step-1);color:var(--navy-2);width:52%}
.derivation td:last-child{color:var(--muted);font-size:var(--step-n1);line-height:1.45}
.derivation tr.result td{background:var(--blue-wash)}
.derivation tr.result td:first-child{font-weight:600;box-shadow:inset 4px 0 0 var(--navy)}

/* kaders: kleur = betekenis (voorbeeld, inzicht, valkuil, samenhang) */
.box{margin:var(--space-m) 0;border-radius:var(--r-m);padding:var(--space-s) var(--space-s);max-width:var(--measure)}
.box>strong.box-title{display:flex;align-items:center;gap:.55rem;font-size:var(--step-0);font-weight:760;letter-spacing:0;text-transform:none;margin-bottom:.35rem}
.box p{margin:.35rem 0;font-size:var(--step-0)}
.box ul{margin:.35rem 0}
.box .icon{flex:none;width:1.6rem;height:1.6rem;border-radius:var(--r-s);display:grid;place-items:center;font-size:.85rem;font-weight:800}
.box.example{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--navy)}
.box.example>strong.box-title{color:var(--navy)}
.box.example .icon{background:var(--strong);color:#fff}
.box.example .steps{margin:.6rem 0 0;padding:0;list-style:none;counter-reset:st}
.box.example .steps li{counter-increment:st;position:relative;padding:.4rem 0 .4rem 2.4rem;border-top:1px dashed var(--line)}
.box.example .steps li:first-child{border-top:0}
.box.example .steps li::before{content:counter(st);position:absolute;left:0;top:.5rem;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--blue-wash);color:var(--navy);font-size:.8rem;font-weight:800;display:grid;place-items:center}
.box.insight{background:var(--blue-wash)}
.box.insight>strong.box-title{color:var(--blue-dark)}
.box.insight .icon{background:var(--blue);color:var(--navy)}
.box.pitfall{background:var(--orange-wash)}
.box.pitfall>strong.box-title{color:var(--orange)}
.box.pitfall .icon{background:var(--orange);color:#fff}
.box.connect{background:var(--strong);color:#e3eef7}
.box.connect>strong.box-title{color:#8fd3f5}
.box.connect .icon{background:var(--blue);color:var(--navy)}
.box.connect p{color:#e3eef7}
.box.connect a{color:#fff;font-weight:700;text-decoration-color:var(--blue)}
.info-card{margin:var(--space-m) 0;display:grid;grid-template-columns:2.6rem 1fr;gap:var(--space-xs);align-items:start;background:var(--blue-wash);border-radius:var(--r-m);padding:var(--space-s)}
.info-icon{width:2.6rem;height:2.6rem;border-radius:var(--r-s);background:var(--blue);display:grid;place-items:center;font-size:1.15rem;font-weight:800;color:var(--navy)}
.info-card strong{color:var(--navy)}
.info-card p{margin:.15rem 0 0;font-size:var(--step-n1)}

/* figuren */
.lesson-image{margin:var(--space-l) 0 var(--space-s);border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.lesson-image svg{display:block;width:100%;height:auto}
.lesson-image svg text{font-family:var(--font-text)}
.lesson-image figcaption{padding:.75rem var(--space-s);background:var(--white);color:var(--muted);font-size:var(--step-n1);line-height:1.45;border-top:1px solid var(--line)}

/* begrippen */
.concept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:var(--space-s);margin:var(--space-s) 0}
.concept-grid article{border-top:3px solid var(--blue);padding:var(--space-xs) 0 0}
.concept-grid article>span{display:inline-grid;place-items:center;min-width:2rem;height:2rem;border-radius:var(--r-s);background:var(--blue-wash);color:var(--navy);font-size:.8rem;font-weight:800}
.concept-grid h3{margin:.6rem 0 .25rem;color:var(--navy);font-size:var(--step-0)}
.concept-grid p{margin:0;font-size:var(--step-n1);color:var(--muted)}

/* tabellen */
.table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.data-table{width:100%;max-width:calc(var(--measure) + 6rem);border-collapse:collapse;margin:var(--space-s) 0 var(--space-m);font-size:var(--step-n1)}
.data-table th{color:var(--navy);text-align:left;font-size:var(--step-n1);font-weight:760;letter-spacing:0;text-transform:none;padding:.6rem .8rem;border-bottom:2px solid var(--navy);background:transparent;vertical-align:bottom}
.data-table td{padding:.6rem .8rem;border-bottom:1px solid var(--line);color:var(--text);vertical-align:top}
.data-table tr:hover td{background:var(--mist)}
.data-table td .m{font-size:1.15em}
.data-table a{color:var(--navy);font-weight:700;text-decoration-color:var(--blue);text-underline-offset:.2em}

/* controlevragen */
.exercise{margin-top:var(--space-l);padding:var(--space-m) var(--space-m) var(--space-s);border-radius:var(--r-m);background:var(--mist);max-width:var(--measure)}
.exercise h2{margin-top:.2rem}
.exercise .q{margin-top:var(--space-s);padding-top:var(--space-s);border-top:1px solid var(--line)}
.exercise .q:first-of-type{border-top:0;padding-top:0}
.exercise .q p{margin:.2rem 0 .7rem}
.answer-toggle{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--tap);border:1.5px solid var(--navy);border-radius:var(--r-m);background:var(--white);color:var(--navy);padding:.5rem 1rem;font-weight:720;cursor:pointer}
.answer-toggle::before{content:"";width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s ease}
.answer-toggle[aria-expanded="true"]::before{transform:rotate(45deg)}
.answer-toggle:hover{background:var(--strong);color:#fff}
.answer{margin-top:.8rem;padding:var(--space-xs) var(--space-s);background:var(--white);border-radius:var(--r-m);border-left:4px solid var(--blue);color:var(--text)}

/* gelezen-knop */
.read-row{margin-top:var(--space-xl);display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs) var(--space-s);flex-wrap:wrap;padding-top:var(--space-s);border-top:1px solid var(--line);max-width:var(--measure)}
.read-row p{margin:0;color:var(--muted);font-size:var(--step-n1);flex:1 1 18rem}
.mark-read{min-height:var(--tap);border:1.5px solid var(--navy);background:var(--white);color:var(--navy);border-radius:var(--r-m);padding:.55rem 1.1rem;font-weight:720;cursor:pointer}
.mark-read:hover{background:var(--blue-wash)}
.mark-read.is-read{background:var(--blue);border-color:var(--blue);color:var(--navy)}

/* vorige / volgende */
.lesson-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-s);margin-top:var(--space-l);max-width:var(--measure)}
.lesson-nav a{text-decoration:none;border:1px solid var(--line);border-radius:var(--r-m);padding:var(--space-xs) var(--space-s);display:grid;gap:.1rem;min-height:4rem;transition:border-color .15s ease,background .15s ease}
.lesson-nav a:hover{border-color:var(--navy)}
.lesson-nav small{color:var(--muted);font-weight:600;font-size:var(--step-n1)}
.lesson-nav strong{color:var(--navy);font-size:var(--step-0);line-height:1.3}
.lesson-nav .next{text-align:right;background:var(--strong);border-color:var(--navy)}
.lesson-nav .next:hover{background:var(--strong-2)}
.lesson-nav .next small{color:#8fd3f5}
.lesson-nav .next strong{color:#fff}
.lesson-nav .next span{color:var(--blue)}

/* 6. Overzichtspagina's -------------------------------------------------- */
.hero{padding:var(--space-2xs) 0 var(--space-m);border-bottom:1px solid var(--line)}
.chapter-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:var(--space-s);margin:var(--space-m) 0}
.chapter-card{display:grid;align-content:start;gap:.35rem;text-decoration:none;border:1px solid var(--line);border-radius:var(--r-m);padding:var(--space-s);background:var(--white);transition:border-color .15s ease}
.chapter-card:hover{border-color:var(--navy)}
.chapter-card .big{font-family:var(--font-math);font-size:var(--step-5);font-weight:600;line-height:1;color:var(--blue-dark)}
.chapter-card h3{margin:.2rem 0 0;font-size:var(--step-2)}
.chapter-card p{margin:0;color:var(--muted);font-size:var(--step-n1)}
.chapter-card .go{margin-top:.5rem;color:var(--navy);font-weight:720;font-size:var(--step-n1)}
.chapter-card.dark{background:var(--strong);border-color:var(--navy)}
.chapter-card.dark:hover{background:var(--strong-2)}
.chapter-card.dark .big{color:var(--blue)}
.chapter-card.dark h3{color:#fff}
.chapter-card.dark p{color:rgba(255,255,255,.78)}
.chapter-card.dark .go{color:#8fd3f5}

.lesson-list{list-style:none;margin:var(--space-s) 0;padding:0;display:grid;max-width:calc(var(--measure) + 4rem);border-top:1px solid var(--line)}
.lesson-list a{display:grid;grid-template-columns:3.4rem 1fr auto;gap:var(--space-xs);align-items:center;text-decoration:none;border-bottom:1px solid var(--line);padding:.8rem .4rem;min-height:var(--tap);transition:background .15s ease}
.lesson-list a:hover{background:var(--mist)}
.lesson-list .nr{font-weight:780;color:var(--blue-dark);font-size:var(--step-0);font-variant-numeric:tabular-nums}
.lesson-list strong{display:block;color:var(--navy);font-weight:720}
.lesson-list small{color:var(--muted);font-size:var(--step-n1);line-height:1.4;display:block}
.lesson-list .st{font-size:var(--step-n1);font-weight:700;color:var(--muted);white-space:nowrap}
.lesson-list a.is-read .st{color:var(--blue-dark)}

/* drie denkstappen: is echt een volgorde, dus nummers mogen */
.patterns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:var(--space-s);margin:var(--space-s) 0;counter-reset:pt}
.patterns article{padding-top:var(--space-xs);border-top:3px solid var(--navy)}
.patterns article>span{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--strong);color:#fff;font-size:.85rem;font-weight:800}
.patterns h3{margin:.6rem 0 .25rem!important;color:var(--navy);font-size:var(--step-0)}
.patterns p{margin:0;font-size:var(--step-n1)!important;color:var(--muted)!important}

/* 7. Telefoon en tablet --------------------------------------------------- */
@media (max-width:900px){
  :root{--topbar:56px}
  .topbar{grid-template-columns:auto auto 1fr auto auto auto;padding-left:max(.35rem,env(safe-area-inset-left));padding-right:env(safe-area-inset-right)}
  .menu-toggle{display:block}
  .brand{border-right:0;padding:0 .4rem}
  .brand img{width:auto;height:38px}
  .brand-text{display:none}
  .course-meta{padding:0 .4rem;justify-content:flex-start}
  .course-label{display:none}
  .course-meta strong{font-size:var(--step-n1)}
  .progress-mini{width:84px;margin-right:.9rem}
  .layout{display:block;background:none}
  .sidebar{position:fixed;left:0;top:var(--topbar);bottom:0;z-index:50;width:min(340px,88vw);height:auto;
    padding-bottom:max(var(--space-l),env(safe-area-inset-bottom));transform:translateX(-102%);transition:transform .25s cubic-bezier(.2,.8,.2,1);
    box-shadow:none}
  .sidebar.open{transform:translateX(0);box-shadow:12px 0 40px rgba(4,40,74,.18)}
  .overlay{position:fixed;inset:var(--topbar) 0 0;z-index:45;background:rgba(4,40,74,.32)}
  .overlay.show{display:block}
  .content-wrap{padding:var(--space-m) var(--space-s) var(--space-xl)}
  .lesson-intro{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .lesson-intro h1,.hero h1{font-size:clamp(2.1rem,1.4rem + 3.4vw,2.9rem)}
  .lesson-status{padding-top:0;order:-1}
  .goals{grid-template-columns:1fr;gap:var(--space-s)}
  .footer-inner{padding:1rem var(--space-s);padding-bottom:max(1rem,env(safe-area-inset-bottom))}
}

@media (max-width:600px){
  /* broodkruimel: alleen een terugknop naar het niveau erboven */
  .breadcrumbs{margin-bottom:var(--space-s)}
  .breadcrumbs>*{display:none}
  .breadcrumbs>a:nth-last-child(3),.breadcrumbs>a:only-child{display:inline-flex;align-items:center;min-height:var(--tap);gap:.4rem}
  .breadcrumbs>a:nth-last-child(3)::before,.breadcrumbs>a:only-child::before{content:"";width:.5rem;height:.5rem;border-left:2px solid var(--blue-dark);border-bottom:2px solid var(--blue-dark);transform:rotate(45deg)}

  .progress-mini span{display:none}
  .progress-mini{width:56px}

  /* formules mogen afbreken in plaats van uit het scherm te lopen */
  .m{white-space:normal}
  .formula{margin-left:calc(-1 * var(--space-s));margin-right:calc(-1 * var(--space-s));border-radius:0;padding-left:var(--space-s)}

  /* afleiding: stap boven uitleg */
  .derivation{margin-left:calc(-1 * var(--space-s));margin-right:calc(-1 * var(--space-s));border-radius:0;border-left:0;border-right:0}
  .derivation tr{display:block;border-bottom:1px solid var(--line-soft)}
  .derivation tr:last-child{border-bottom:0}
  .derivation td{display:block;width:auto!important;border-bottom:0;padding:.15rem var(--space-s)}
  .derivation td:first-child{padding-top:.6rem}
  .derivation td:last-child{padding-bottom:.6rem}

  /* tabellen: elke rij wordt een blokje, kop verdwijnt */
  .table-scroll{overflow:visible}
  .data-table,.data-table tbody{display:block}
  .data-table tr:has(th){display:none}
  .data-table tr{display:grid;grid-template-columns:1fr;gap:.15rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
  .data-table tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))){grid-template-columns:1fr auto}
  .data-table tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))) td:nth-child(1){grid-column:1}
  .data-table tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))) td:nth-child(3){grid-column:2;grid-row:1;text-align:right}
  .data-table tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))) td:nth-child(2),
  .data-table tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))) td:nth-child(4){grid-column:1 / -1}
  .data-table td{display:block;padding:0;border:0}
  .data-table td:first-child{font-weight:700;color:var(--navy)}
  .data-table td:first-child .m{font-size:1.2em}
  .data-table tr:hover td{background:none}

  .lesson-image{margin-left:calc(-1 * var(--space-s));margin-right:calc(-1 * var(--space-s));border-radius:0;border-left:0;border-right:0}
  .box{margin-left:calc(-1 * var(--space-s));margin-right:calc(-1 * var(--space-s));border-radius:0;padding-left:var(--space-s);padding-right:var(--space-s)}
  .box.example{border-left:0;border-right:0}
  .exercise{margin-left:calc(-1 * var(--space-s));margin-right:calc(-1 * var(--space-s));border-radius:0;padding-left:var(--space-s);padding-right:var(--space-s)}

  .lesson-nav{grid-template-columns:1fr}
  .lesson-nav .next{order:-1;text-align:left}
  .lesson-list a{grid-template-columns:2.8rem 1fr}
  .lesson-list .st{grid-column:2;margin-top:-.2rem}
  .footer-inner{align-items:center;flex-direction:column}
}

/* 8. Toegankelijkheid en print ------------------------------------------- */
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:var(--r-s)}
.lessons a:focus-visible,.home-link:focus-visible{outline-offset:-3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{
  .topbar,.sidebar,.overlay,.footer,.gw-credit-footer,.lesson-nav,.read-row,.answer-toggle{display:none!important}
  .layout{display:block;background:none}
  .content-wrap{padding:0;max-width:none}
  .answer[hidden]{display:block!important}
  .formula,.derivation,.box,.lesson-image{break-inside:avoid}
}

/* GnomeWorks Client Footer v1.4.0: alleen de huisstijl-tokens (component zelf ongewijzigd) */
.gw-credit-footer{
  --gw-credit-bg:#ffffff;
  --gw-credit-text:var(--muted);
  --gw-credit-strong:var(--navy);
  --gw-credit-accent:var(--navy);
  --gw-credit-logo-figure:#ffffff;
  --gw-credit-max-width:1400px;
}
/* GnomeWorks-logo: maskers als data-URI, zodat het logo ook zichtbaar is als je de pagina's
   direct vanaf je computer opent (file://); browsers blokkeren daar losse maskerbestanden. */
.gw-credit-logo::before{-webkit-mask-image:url("data:image/png;base64,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");mask-image:url("data:image/png;base64,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")}
.gw-credit-logo::after{-webkit-mask-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAACNUlEQVR42u2a207DMAyG/3lDSEggEAeJ938nxAUCAWKTALENMRCHOtyMw7aubeLGSSd/u9q6pj7EjuMGMAzDMAzDMAzDMIwgeq2MUiyNNcNudxTgNb9TFxTgyqsqKoQ/5K1GfNReT+oBjm6gqA/4E9+l9sIgMOc49LUnS3seeAYtiJ/UByEKHJSoVL9KZJeF/uNqEkVEFdpaiXup8hGpmaHIWYFmSn7lOoWSLmp6HqCuT6Fp18rpDfPALOd1gFMaSj7wncemM0MPsFcRuJ+bBwqPamkSQ3y5B4qGIziPAlw1BvqgBmNcNhA/4aYI4JpPtQ9fAFyDMUm1DrDgH/foYQcMArCXIgamDXtw62KApQYdiMR/x5bIUIV8PkgUGDYWH3GsL51CLIq25bvHONRVgIXpgttJJ6Qk/k3l/S48G8btjbrf8SmG9cMV8NnE8Lxv1I8hvsaGhjAGcDv/dr4i/lC/mCs87qJa35F+MRei9EWDqgha7XW/aCE8hGX4WNbkvLa0en2hSL2ilAoMS940ZBcDZYxwhO1UQfwkfN4jTtIGsTSEGWMcb0IWai32KOAObu14SLK+UEZeoGTid+4FxypnbRijF7UWVTAhJXqz3MEp5PJQgEVt4AgJlZTseFUxJVl7JSZRU4vXVkmfOPU3qkZji2IeDKHIky+kZTXK5dhleUu93gOkt6Gh1g++er9Lk68DBAJhAgcH4HX+nSrS6Q8fmC5ktZHXWTzDMAzDMAzDMIyu8w0QxY78PS3iCwAAAABJRU5ErkJggg==");mask-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAACNUlEQVR42u2a207DMAyG/3lDSEggEAeJ938nxAUCAWKTALENMRCHOtyMw7aubeLGSSd/u9q6pj7EjuMGMAzDMAzDMAzDMIwgeq2MUiyNNcNudxTgNb9TFxTgyqsqKoQ/5K1GfNReT+oBjm6gqA/4E9+l9sIgMOc49LUnS3seeAYtiJ/UByEKHJSoVL9KZJeF/uNqEkVEFdpaiXup8hGpmaHIWYFmSn7lOoWSLmp6HqCuT6Fp18rpDfPALOd1gFMaSj7wncemM0MPsFcRuJ+bBwqPamkSQ3y5B4qGIziPAlw1BvqgBmNcNhA/4aYI4JpPtQ9fAFyDMUm1DrDgH/foYQcMArCXIgamDXtw62KApQYdiMR/x5bIUIV8PkgUGDYWH3GsL51CLIq25bvHONRVgIXpgttJJ6Qk/k3l/S48G8btjbrf8SmG9cMV8NnE8Lxv1I8hvsaGhjAGcDv/dr4i/lC/mCs87qJa35F+MRei9EWDqgha7XW/aCE8hGX4WNbkvLa0en2hSL2ilAoMS940ZBcDZYxwhO1UQfwkfN4jTtIGsTSEGWMcb0IWai32KOAObu14SLK+UEZeoGTid+4FxypnbRijF7UWVTAhJXqz3MEp5PJQgEVt4AgJlZTseFUxJVl7JSZRU4vXVkmfOPU3qkZji2IeDKHIky+kZTXK5dhleUu93gOkt6Gh1g++er9Lk68DBAJhAgcH4HX+nSrS6Q8fmC5ktZHXWTzDMAzDMAzDMIyu8w0QxY78PS3iCwAAAABJRU5ErkJggg==")}


/* ==========================================================
   Uitwerkingen (wiskunde): formules, figuren en opdrachten
   ========================================================== */
.wb-eq{position:relative;margin:var(--space-2xs) 0 var(--space-xs);max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  padding:.35rem var(--space-s);background:var(--blue-wash);border-left:4px solid var(--navy);border-radius:0 var(--r-m) var(--r-m) 0;color:var(--navy-2)}
.wb-eq .katex-display{margin:.3em 0;text-align:left}
.wb-eq .katex-display>.katex{text-align:left}
.wb-eq .katex{font-size:1.12em}
/* KaTeX in lessen (lessen.py): formulekader, afleiding en formules in de lopende tekst */
.formula .eq .katex{font-size:.82em}
.formula .eq{overflow-y:hidden;padding-right:.15em}
.derivation{overflow-x:auto;-webkit-overflow-scrolling:touch}
.derivation .katex{font-size:1em;white-space:nowrap}
.derivation td:last-child .katex{font-size:1.05em}
.wb-fig{background:var(--white);max-width:34rem}
.wb-fig img{display:block;width:100%;height:auto;max-height:22rem;object-fit:contain;padding:var(--space-xs)}
.lesson-image img{display:block;max-width:100%;height:auto}

.wb-intro ol,.wb-intro ul{max-width:var(--measure)}
.opg-balk{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);flex-wrap:wrap;margin-bottom:var(--space-2xs)}
.opg-balk h2{margin:0!important}
.opg-alles{min-height:var(--tap);border:1.5px solid var(--navy);border-radius:var(--r-m);background:var(--white);color:var(--navy);
  padding:.4rem 1rem;font-weight:700;cursor:pointer;font-size:var(--step-n1)}
.opg-alles:hover{background:var(--blue-wash)}
.opg-sprong{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 var(--space-s)}
.opg-sprong a{display:inline-grid;place-items:center;min-width:2.9rem;min-height:2.6rem;padding:0 .55rem;border:1.5px solid var(--line);
  border-radius:var(--r-s);text-decoration:none;color:var(--navy);font-weight:700;font-size:var(--step-n1);font-variant-numeric:tabular-nums}
.opg-sprong a:hover{border-color:var(--navy);background:var(--blue-wash)}
.opg{border:1.5px solid var(--line);border-radius:var(--r-m);margin:0 0 var(--space-2xs);background:var(--white);max-width:calc(var(--measure) + 4rem);
  scroll-margin-top:calc(var(--topbar) + 1rem)}
.opg>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;min-height:var(--tap);padding:.6rem var(--space-s);font-weight:700;color:var(--navy)}
.opg>summary::-webkit-details-marker{display:none}
.opg>summary::after{content:"";margin-left:auto;width:.55rem;height:.55rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
.opg[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.opg>summary:hover{background:var(--mist)}
.opg[open]>summary{border-bottom:1px solid var(--line)}
.opg-woord{color:var(--muted);font-weight:600}
.opg-nr{font-size:var(--step-1);font-variant-numeric:tabular-nums}
.opg-body{padding:var(--space-xs) var(--space-s) var(--space-s)}
.opg-body>*:first-child{margin-top:0}
.opg-body p{margin:.5rem 0;max-width:var(--measure)}
.opg-body .wb-fig{margin:var(--space-xs) 0}
.opg-body .data-table{margin:.5rem 0}
p.deel{margin-top:var(--space-xs)!important}
.deel-letter{display:inline-grid;place-items:center;min-width:1.6rem;height:1.6rem;padding:0 .35rem;margin-right:.35rem;border-radius:50%;
  background:var(--strong);color:#fff;font-weight:800;font-size:.85rem;vertical-align:.05em}
@media (max-width:600px){
  .opg{margin-left:calc(-1 * var(--space-s));margin-right:calc(-1 * var(--space-s));border-radius:0;border-left:0;border-right:0}
  .wb-eq{margin-left:calc(-1 * var(--space-s));margin-right:calc(-1 * var(--space-s));border-radius:0}
  .opg-body .wb-eq{margin-left:calc(-1 * var(--space-s));margin-right:calc(-1 * var(--space-s))}
}
@media (max-width:600px){
  /* uitwerkingstabellen blijven tabellen; schuiven als ze te breed zijn */
  .opg-body .table-scroll,.table-scroll:has(> .wb-table){overflow-x:auto}
  .data-table.wb-table{display:table;font-size:var(--step-n2)}
  .data-table.wb-table tbody{display:table-row-group}
  .data-table.wb-table tr,.data-table.wb-table tr:has(th){display:table-row;padding:0;border:0}
  .data-table.wb-table td,.data-table.wb-table th{display:table-cell;padding:.4rem .5rem;border-bottom:1px solid var(--line);white-space:nowrap}
  .data-table.wb-table th{border-bottom:2px solid var(--navy)}
  .data-table.wb-table td:first-child{font-weight:700}
  .wb-eq .katex{font-size:1em}
}
@media print{.opg{break-inside:avoid}.opg-sprong,.opg-alles{display:none}}

/* Uitwerkingen als één scrollpagina per hoofdstuk */
.wb-inhoud{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(17rem,100%),1fr));gap:.4rem;margin:var(--space-m) 0 var(--space-s);max-width:calc(var(--measure) + 4rem)}
.wb-inhoud a{display:grid;grid-template-columns:2.4rem 1fr;align-items:center;min-height:var(--tap);padding:.45rem .8rem;border:1.5px solid var(--line);
  border-radius:var(--r-s);text-decoration:none;color:var(--navy);font-weight:700;font-size:var(--step-n1);line-height:1.3}
.wb-inhoud a:hover{border-color:var(--navy);background:var(--blue-wash)}
.wb-inhoud .nr{color:var(--blue-dark);font-variant-numeric:tabular-nums}
.opg-balk p{margin:0;color:var(--muted);font-size:var(--step-n1)}
.wb-pdf{color:var(--navy);font-weight:700;margin-left:.3rem;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:.2em}
.wb-par{margin-top:var(--space-xl);padding-top:var(--space-s);border-top:3px solid var(--navy);scroll-margin-top:calc(var(--topbar) + .5rem);max-width:calc(var(--measure) + 4rem)}
.wb-par>h2{margin:0 0 var(--space-xs);font-size:var(--step-3)}
.par-klap{display:flex;align-items:baseline;gap:.35em;width:100%;padding:.15rem 0;border:0;background:none;color:inherit;font:inherit;
  letter-spacing:inherit;text-align:left;cursor:pointer;border-radius:var(--r-s)}
.par-klap .par-titel{flex:1;min-width:0}
.par-klap::after{content:"";flex:none;align-self:center;width:.45em;height:.45em;margin:0 .3em 0 .6em;border-right:3px solid var(--blue-dark);
  border-bottom:3px solid var(--blue-dark);transform:translateY(-.15em) rotate(45deg);transition:transform .15s ease}
.par-klap[aria-expanded="true"]::after{transform:translateY(.1em) rotate(-135deg)}
.par-klap:hover .par-titel{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
.par-klap:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.par-info{margin:-.2rem 0 0;color:var(--muted);font-size:var(--step-n1)}
.wb-par:not(.is-open){margin-top:var(--space-m)}
.wb-par.is-open .par-info{display:none}
.wb-par-body{margin-top:var(--space-xs)}
@media print{.wb-par-body[hidden]{display:block!important}}
.par-nr{color:var(--blue);font-variant-numeric:tabular-nums;margin-right:.15em}
.wb-aanpak{margin:0 0 var(--space-s);border-radius:var(--r-m);background:var(--blue-wash)}
.wb-aanpak>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;min-height:var(--tap);padding:.5rem var(--space-s);font-weight:700;color:var(--navy)}
.wb-aanpak>summary::-webkit-details-marker{display:none}
.wb-aanpak>summary::before{content:"";width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s ease}
.wb-aanpak[open]>summary::before{transform:rotate(45deg)}
.wb-aanpak-body{padding:0 var(--space-s) var(--space-s)}
.wb-aanpak-body .wb-eq{background:var(--white)}
.wb-aanpak-body .wb-fig{background:var(--white)}
.wb-par .read-row{margin-top:var(--space-s)}
@media (max-width:600px){
  .wb-aanpak{margin-left:calc(-1 * var(--space-s));margin-right:calc(-1 * var(--space-s));border-radius:0}
  .wb-inhoud{grid-template-columns:1fr}
}

/* ==========================================================
   Donkere weergave (knop rechtsboven; keuze wordt onthouden)
   ========================================================== */
.thema-knop{width:var(--tap);height:var(--tap);margin-right:1rem;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:50%;
  background:transparent;color:var(--navy);cursor:pointer;padding:0}
.thema-knop:hover{border-color:var(--navy);background:var(--blue-wash)}
.thema-knop svg{width:20px;height:20px}
.thema-knop .zon{display:none}
[data-thema="donker"] .thema-knop .zon{display:block}
[data-thema="donker"] .thema-knop .maan{display:none}
@media (max-width:900px){.thema-knop{margin-right:.5rem;width:40px;height:40px}.progress-mini{margin-right:.5rem}}

[data-thema="donker"]{
  color-scheme:dark;
  --navy:#a9dbf7;        /* koppen en merk: licht blauw */
  --navy-2:#d4eefc;
  --blue:#4cbcf0;
  --blue-dark:#7fcdf3;
  --blue-wash:#12304a;
  --bark:#e0b088;
  --bark-wash:#33261b;
  --orange:#f2a25a;
  --orange-wash:#3a2716;
  --ink:#f1f6fa;
  --text:#d4dee7;
  --muted:#9cadbd;
  --mist:#132435;
  --mist-2:#1c3247;
  --sand:#2c3f52;
  --white:#0d1926;       /* achtergrond van de pagina en kaarten */
  --line:#263b50;
  --line-soft:#1b2d3f;
  --strong:#123a5f;
  --strong-2:#0a2a47;
  --topbar-bg:rgba(13,25,38,.9);
}
[data-thema="donker"] body{background:var(--white)}
[data-thema="donker"] .topbar{background:rgba(13,25,38,.97)}
@supports (backdrop-filter:blur(8px)){[data-thema="donker"] .topbar{background:var(--topbar-bg)}}
[data-thema="donker"] .brand img{background:#f3f7fa;border-radius:10px;padding:3px}
/* figuren blijven op licht papier, anders vallen de donkere lijnen weg */
[data-thema="donker"] .lesson-image,[data-thema="donker"] .wb-fig,[data-thema="donker"] .wb-fig img{background:#f3f7fa}
[data-thema="donker"] .lesson-image figcaption{background:#132435;color:var(--text);border-top-color:var(--line)}
[data-thema="donker"] .wb-aanpak-body .wb-eq{background:var(--mist)}
[data-thema="donker"] .tag.binas,[data-thema="donker"] .tag.afleiden{background:transparent}
[data-thema="donker"] .footer{background:#07121d}
[data-thema="donker"] .gw-credit-footer{--gw-credit-bg:#07121d;--gw-credit-text:var(--muted);--gw-credit-strong:var(--text);--gw-credit-accent:#1f6ea3}
[data-thema="donker"] .tile.soon{background:transparent}
[data-thema="donker"] .tile.klas{background:transparent;border-color:var(--line)}
[data-thema="donker"] .tile.klas:hover{border-color:var(--navy)}
[data-thema="donker"] .box.example .steps li::before{background:var(--mist-2);color:var(--navy)}
[data-thema="donker"] ::selection{background:#1f5f8f;color:#fff}

/* 10. Brede schermen: meer van de breedte gebruiken ------------------------ */
@media (min-width:1300px){:root{--measure:78ch}}
@media (min-width:1600px){:root{--measure:88ch}}

/* 11. Hoofdstuk in de topbalk en de formulekaart --------------------------- */
.hfd-meta{font-weight:650;color:var(--blue-dark);white-space:nowrap;flex:none}
.course-meta:has(.hfd-meta) strong{min-width:2.5em}
@media (max-width:1300px){.course-meta:has(.hfd-meta) .course-label{display:none}}
.hfd-meta::before{content:"/";margin-right:.7rem;color:var(--line)}
.kaart-knop{display:inline-flex;align-items:center;gap:.45rem;height:40px;padding:0 1rem 0 .75rem;margin-right:1.25rem;border:1.5px solid var(--navy);
  border-radius:999px;background:var(--white);color:var(--navy);font:inherit;font-size:var(--step-n1);font-weight:700;cursor:pointer;white-space:nowrap}
.kaart-knop:hover,.kaart-knop[aria-expanded="true"]{background:var(--blue-wash)}
.kaart-knop[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--navy)}
.kaart-knop svg{width:20px;height:20px;flex:none}
@media (max-width:1100px){.kaart-knop{margin-right:.75rem}}
@media (max-width:900px){
  .kaart-knop{width:40px;padding:0;justify-content:center;margin-right:.5rem}
  .kaart-knop span{display:none}
  .hfd-meta::before{display:none}
  .course-meta:has(.hfd-meta) strong{display:none}
  .hfd-meta{font-size:var(--step-n1);font-weight:720;color:var(--navy);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
}

.kaart{position:fixed;z-index:60;top:calc(var(--topbar) + 12px);right:16px;width:min(580px,calc(100vw - 32px));height:min(72vh,680px);
  min-width:300px;min-height:200px;max-width:calc(100vw - 16px);display:flex;flex-direction:column;
  background:var(--white);border:1.5px solid var(--navy);border-radius:var(--r-m);box-shadow:0 18px 50px rgba(4,40,74,.22);resize:both;overflow:hidden}
.kaart[hidden]{display:none}
.kaart-kop{display:flex;align-items:center;gap:.55rem;padding:.45rem .45rem .45rem .8rem;background:var(--strong);color:#fff;cursor:grab;user-select:none;touch-action:none;flex:none}
.kaart.sleept .kaart-kop{cursor:grabbing}
.kaart-kop svg{width:18px;height:18px;flex:none;opacity:.75}
.kaart-kop strong{flex:1;min-width:0;color:#fff;font-size:var(--step-0);font-weight:720;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaart-sluit{width:40px;height:40px;flex:none;border:0;border-radius:50%;background:transparent;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.kaart-sluit:hover,.kaart-sluit:focus-visible{background:rgba(255,255,255,.16)}
.kaart-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:.2rem var(--space-s) var(--space-s)}
.kaart-body h2{margin:var(--space-s) 0 .2rem;font-size:var(--step-0);color:var(--navy)}
.kaart-body p{font-size:var(--step-n1);color:var(--muted);margin:.3rem 0}
.kaart-body .data-table{max-width:none;margin:.3rem 0 var(--space-xs)}
.kaart-body .data-table th,.kaart-body .data-table td{padding:.42rem .55rem}
.kaart-body .data-table th:first-child,.kaart-body .data-table td:first-child{padding-left:0}
@media (max-width:600px){
  .kaart{left:0!important;right:0;top:auto!important;bottom:0;width:100%!important;height:78vh!important;max-width:none;min-width:0;
    border-radius:var(--r-m) var(--r-m) 0 0;border-bottom:0;resize:none;padding-bottom:env(safe-area-inset-bottom)}
  .kaart-kop{cursor:default}
}
/* grootheden en eenheden (formuleblad en formulekaart): symbool smal, telefoon: symbool links, grootheid en eenheid ernaast */
.data-table.grootheden td:nth-child(2){white-space:nowrap}
.data-table.grootheden td:nth-child(2) .m{font-size:1.2em}
@media (max-width:600px){
  .kaart-body .data-table th,.kaart-body .data-table td{padding:0}
  .data-table.grootheden tr{grid-template-columns:2.8rem 1fr;gap:.05rem .6rem;padding:.5rem 0}
  .data-table.grootheden td:nth-child(2){grid-column:1;grid-row:1 / span 2;align-self:center}
  .data-table.grootheden td:nth-child(1){grid-column:2;grid-row:1}
  .data-table.grootheden td:nth-child(3){grid-column:2;grid-row:2;color:var(--muted)}
}
@media print{.kaart,.kaart-knop{display:none!important}}

/* 12. Zelf afleiden: het label in een formulekader klapt de afleiding open ---- */
button.tag{border:0;font:inherit;font-family:var(--font-text);font-size:var(--step-n2);font-weight:700;cursor:pointer}
button.tag.afleiden{padding:.3rem .55rem;min-height:30px}
button.tag.afleiden::after{content:"";display:inline-block;width:.38em;height:.38em;margin-left:.45em;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform .15s ease}
button.tag.afleiden[aria-expanded="true"]::after{transform:translateY(.05em) rotate(-135deg)}
button.tag.afleiden:hover,button.tag.afleiden[aria-expanded="true"]{background:var(--bark-wash)}
button.tag.afleiden:focus-visible{outline:2px solid var(--bark);outline-offset:2px}
.afleiding-uit{flex-basis:100%;min-width:0}
.afleiding-uit .derivation{margin:.4rem 0 .2rem;max-width:none}
.afleiding-uit .d-head{font-size:var(--step-n1)}
.afleiding-uit .derivation td:first-child{font-size:var(--step-0)}
.afleiding-uit .derivation td .tag{margin-left:.35rem}
@media print{.afleiding-uit[hidden]{display:block!important}}
[data-thema="donker"] .kaart{border-color:var(--line);box-shadow:0 18px 50px rgba(0,0,0,.5)}
[data-thema="donker"] .kaart-knop{background:transparent;border-color:var(--line);color:var(--navy)}

/* zijmenu: soort achter de hoofdstuktitel als een niveau lessen én uitwerkingen heeft */
.hfd-soort-kort{font-size:var(--step-n2);font-weight:600;color:var(--muted);white-space:nowrap}

/* 13. Uitwerkingen: opdrachtblokken met iets meer contrast en een zachte tint in de kop */
.opg{border-color:#c4d3df}
.opg>summary{background:var(--blue-wash);border-radius:calc(var(--r-m) - 2px)}
.opg>summary:hover{background:#d8ecf7}
.opg[open]>summary{border-radius:calc(var(--r-m) - 2px) calc(var(--r-m) - 2px) 0 0;border-bottom-color:#c4d3df}
.opg>summary::after{border-color:var(--navy)}
.opg-woord{color:#4a5866}
.opg-sprong a{background:var(--blue-wash);border-color:#c4d3df}
.opg-sprong a:hover{background:#d8ecf7;border-color:var(--navy)}
[data-thema="donker"] .opg{border-color:var(--sand)}
[data-thema="donker"] .opg>summary:hover,[data-thema="donker"] .opg-sprong a:hover{background:#18405f}
[data-thema="donker"] .opg[open]>summary{border-bottom-color:var(--sand)}
[data-thema="donker"] .opg-woord{color:var(--muted)}
[data-thema="donker"] .opg-sprong a{border-color:var(--sand)}

/* 14. Computer: de zijbalk staat vast (scrolt niet mee en wordt niet door de footer omhooggeduwd) */
@media (min-width:901px){
  .sidebar{position:fixed;left:0;top:var(--topbar);bottom:0;width:var(--sidebar);height:auto;z-index:30}
  .layout>.content{grid-column:2}
  .footer,.gw-credit-footer{margin-left:var(--sidebar);width:auto}
}
@media print{.footer,.gw-credit-footer{margin-left:0}}