/* SLB Nieuwe Technologie — opmaak. Stoer en technisch: navy kopbalk, raster, condensed koppen; licht en donker thema. Zie DESIGN.md. */
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

/* licht thema (standaard) */
:root{
  --papier:#EEF2F7;--vlak:#FFFFFF;--vlak2:#F4F7FB;--inkt:#0B1F38;--kopkleur:#012B5A;--zacht:#55677D;--lijn:#D6DFEA;--hover:#E8EEF6;
  --navy:#012B5A;--blauw:#005ECC;--blauw-zacht:#E2EDFB;--groen:#2F7A05;--groen-zacht:#E6F3DA;--op-groen:#FFFFFF;
  --bol:#005ECC;--bol-zacht:#E2EDFB;--bbl:#2F7A05;--bbl-zacht:#E6F3DA;
  --accent:#005ECC;--accent-zacht:#E2EDFB;--op-accent:#FFFFFF;
  --goed:#2F7A05;--goed-zacht:#E6F3DA;--let:#8F5B00;--let-zacht:#FBEFD6;--slecht:#B3261E;--slecht-zacht:#FBE3E1;
  --raster:rgba(1,43,90,.055);--gloed:rgba(0,94,204,.10);
  --podium:#00172F;--podium2:#0A2D57;--podium-inkt:#F1F5FA;--podium-zacht:#8FA6C2;
  --f-kop:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-tekst:"Barlow","Segoe UI",system-ui,sans-serif;
  --f-mono:ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --r:4px;color-scheme:light;
}
/* donker thema: volgt het apparaat, tenzij iemand zelf licht kiest */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --papier:#00172F;--vlak:#062447;--vlak2:#0A2D57;--inkt:#E6EEF8;--kopkleur:#FFFFFF;--zacht:#8FA6C2;--lijn:#1C3E66;--hover:#0C335F;
  --blauw:#2C8BFF;--blauw-zacht:#0E3463;--groen:#5FC41A;--groen-zacht:#173F17;--op-groen:#00172F;
  --bol:#2C8BFF;--bol-zacht:#0E3463;--bbl:#5FC41A;--bbl-zacht:#173F17;
  --accent:#2C8BFF;--accent-zacht:#0E3463;--op-accent:#00172F;
  --goed:#5FC41A;--goed-zacht:#173F17;--let:#F0B43C;--let-zacht:#3A2C0C;--slecht:#FF7A70;--slecht-zacht:#43191A;
  --raster:rgba(44,139,255,.07);--gloed:rgba(0,94,204,.32);color-scheme:dark}}
:root[data-theme="dark"]{
  --papier:#00172F;--vlak:#062447;--vlak2:#0A2D57;--inkt:#E6EEF8;--kopkleur:#FFFFFF;--zacht:#8FA6C2;--lijn:#1C3E66;--hover:#0C335F;
  --blauw:#2C8BFF;--blauw-zacht:#0E3463;--groen:#5FC41A;--groen-zacht:#173F17;--op-groen:#00172F;
  --bol:#2C8BFF;--bol-zacht:#0E3463;--bbl:#5FC41A;--bbl-zacht:#173F17;
  --accent:#2C8BFF;--accent-zacht:#0E3463;--op-accent:#00172F;
  --goed:#5FC41A;--goed-zacht:#173F17;--let:#F0B43C;--let-zacht:#3A2C0C;--slecht:#FF7A70;--slecht-zacht:#43191A;
  --raster:rgba(44,139,255,.07);--gloed:rgba(0,94,204,.32);color-scheme:dark}
body.lijn-bol{--accent:var(--bol);--accent-zacht:var(--bol-zacht)}
body.lijn-bbl{--accent:var(--bbl);--accent-zacht:var(--bbl-zacht)}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--inkt);font:1rem/1.55 var(--f-tekst)}
h1,h2,h3{font-family:var(--f-kop);line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.01em}
h2{font-size:1.35rem;font-weight:700}
h3{font-size:1.08rem;font-weight:700}
p{margin:0}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
img{max-width:100%}
code{font-family:var(--f-mono);font-size:.9em;background:var(--hover);padding:1px 5px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.label{display:block;font:600 .72rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--zacht);margin-bottom:6px}
.muted{color:var(--zacht)}
.klein{font-size:.88rem}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:.92em}
.intro{max-width:64ch;margin-top:8px;color:var(--zacht)}
.hulp{font-size:.88rem;color:var(--zacht)}

/* kop */
.kop{position:sticky;top:0;z-index:5;background:var(--vlak);border-bottom:1px solid var(--lijn)}
.kop-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-block:10px}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.12rem/1.1 var(--f-kop)}
.merk small{display:block;font:400 .78rem var(--f-tekst);color:var(--zacht)}
.hoofdnav{display:flex;gap:2px;flex-wrap:wrap;margin-right:auto}
.hoofdnav a{text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:700;color:var(--zacht)}
.hoofdnav a:hover{color:var(--inkt)}
.hoofdnav a[aria-current="page"]{background:var(--hover);color:var(--inkt)}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--slecht);color:#fff;font-size:.75rem}
.account{display:flex;align-items:center;gap:10px;margin-left:auto}
.account form{margin:0}
.wie{text-decoration:none;text-align:right;line-height:1.2}
.wie span{display:block;font-weight:700;font-size:.92rem}
.wie small{color:var(--zacht);font-size:.78rem}
.inhoud{padding-block:28px 64px;display:grid;gap:22px;align-content:start}
.voet{padding-block:24px;color:var(--zacht);font-size:.8rem}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--lijn);background:var(--vlak);padding:9px 16px;border-radius:8px;cursor:pointer;font-weight:700;text-decoration:none;white-space:nowrap}
.knop:hover{background:var(--hover)}
.knop.primair{background:var(--accent);border-color:var(--accent);color:var(--op-accent)}
.knop.primair:hover{filter:brightness(1.08)}
.knop.klein{padding:5px 10px;font-size:.86rem}
.knop.breed{width:100%}
.knop.gevaar{color:var(--slecht);border-color:var(--slecht)}
.knop[disabled]{opacity:.5;cursor:not-allowed}
.acties{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}

/* meldingen */
.melding{padding:12px 16px;border-radius:var(--r);background:var(--goed-zacht);color:var(--inkt);border-left:4px solid var(--goed)}
.melding.fout{background:var(--slecht-zacht);border-color:var(--slecht)}
.melding.info{background:var(--accent-zacht);border-color:var(--accent)}
.melding.waarschuwing{background:var(--let-zacht);border-color:var(--let)}

/* structuur */
.paginakop{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.terug{display:inline-block;text-decoration:none;color:var(--zacht);font-weight:700;font-size:.9rem;margin-bottom:10px}
.terug:hover{color:var(--inkt)}
.kaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:20px;display:grid;gap:12px;align-content:start;min-width:0}
.kaart ul,.kaart ol{margin:0;padding-left:20px;display:grid;gap:6px}
.kaart.tip{background:var(--accent-zacht);border-color:transparent}
.kaart.signaal{background:var(--let-zacht);border-color:transparent}
.gevaarzone{border-color:var(--slecht-zacht)}
.twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.twee.breedlinks{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.stapel{display:grid;gap:20px;align-content:start;min-width:0}
.kolommen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.sectie{display:grid;gap:12px}
.leeg{border:1.5px dashed var(--lijn);border-radius:var(--r);padding:32px;text-align:center;color:var(--zacht);display:grid;gap:12px;justify-items:center}
.leeg h1,.leeg h2{color:var(--inkt)}
.smal{max-width:560px;margin:0 auto;width:100%;display:grid;gap:20px}

/* formulieren */
.formulier{display:grid;gap:14px}
.veld{display:grid;gap:6px;min-width:0}
.veld label,.vlabel{font-weight:700;font-size:.92rem}
input[type=text],input[type=email],input[type=password],input[type=number],input:not([type]),input[type=file],textarea,select{width:100%;border:1px solid var(--lijn);background:var(--vlak);border-radius:8px;padding:10px 12px;min-width:0}
textarea{resize:vertical;min-height:96px}
.rij2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vink{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.vink input{margin-top:5px;accent-color:var(--accent)}
.vinklijst{display:grid;gap:6px;max-height:340px;overflow:auto;padding:4px}
.filter{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.filter .veld{min-width:180px;flex:1}
.inline{display:inline-flex;gap:8px;align-items:flex-end}
.kopregel{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-end}
.scheiding{display:flex;align-items:center;gap:12px;color:var(--zacht);font-size:.88rem}
.scheiding::before,.scheiding::after{content:"";flex:1;height:1px;background:var(--lijn)}

/* tabs & segment */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--lijn);overflow-x:auto}
.tabs a{text-decoration:none;padding:10px 14px;font-weight:700;color:var(--zacht);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a[aria-current="page"]{color:var(--inkt);border-bottom-color:var(--accent)}
.tel{font:600 .78rem var(--f-mono);color:var(--zacht)}
.seg{display:inline-flex;border:1px solid var(--lijn);border-radius:999px;padding:3px;gap:2px;background:var(--vlak)}
.seg a{text-decoration:none;padding:6px 16px;border-radius:999px;font-weight:700;color:var(--zacht)}
.seg a[aria-current="page"]{background:var(--accent);color:var(--op-accent)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--hover);color:var(--zacht);white-space:nowrap;vertical-align:middle}
.chip.goed{background:var(--goed-zacht);color:var(--goed)}
.chip.let{background:var(--let-zacht);color:var(--let)}
.chip.slecht{background:var(--slecht-zacht);color:var(--slecht)}
.chip.nu{background:var(--accent);color:var(--op-accent)}
.chip.lijn-bol{background:var(--bol-zacht);color:var(--bol)}
.chip.lijn-bbl{background:var(--bbl-zacht);color:var(--bbl)}

/* statistieken */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.stat{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:14px 16px;text-decoration:none;display:block}
a.stat:hover{border-color:var(--accent)}
.stat b{display:block;font:800 1.9rem/1.1 var(--f-kop);font-variant-numeric:tabular-nums}
.stat small{color:var(--zacht);font-size:.85rem}
.stat.aandacht{border-color:var(--let);background:var(--let-zacht)}
.stappen ol{display:grid;gap:8px}

/* tabellen */
.tabelvak{overflow-x:auto;background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r)}
.tabel{border-collapse:collapse;width:100%;font-size:.93rem}
.tabel th,.tabel td{padding:10px 12px;border-bottom:1px solid var(--lijn);text-align:left;vertical-align:top}
.tabel thead th{font:600 .72rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--zacht);background:var(--papier);white-space:nowrap}
.tabel tbody tr:last-child td{border-bottom:0}
.tabel a{text-decoration:none}
.tabel a:hover{text-decoration:underline}
.foutrij{background:var(--slecht-zacht)}
.fouttekst{color:var(--slecht);font-size:.86rem}
.matrix th:not(:first-child),.matrix td:not(:first-child){text-align:center;padding-inline:6px}
.matrix td:first-child{position:sticky;left:0;background:var(--vlak);min-width:200px}
.matrix th.act{color:var(--accent)}
.stip{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;font:700 .82rem var(--f-mono);background:var(--hover);color:var(--zacht)}
.stip.s1,.stip.s2{background:var(--slecht-zacht);color:var(--slecht)}
.stip.s3{background:var(--let-zacht);color:var(--let)}
.stip.s4,.stip.s5{background:var(--goed-zacht);color:var(--goed)}
.opgedaan{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:3px;vertical-align:middle}
.regels{list-style:none;margin:0;padding:0!important;display:grid;gap:0!important}
.regels li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--lijn);flex-wrap:wrap}
.regels li:first-child{border-top:0}
.regels form{margin:0}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.checks li{padding:8px 12px;border-radius:8px;background:var(--goed-zacht)}
.checks li::before{content:"✓ ";color:var(--goed);font-weight:700}
.checks li.fout{background:var(--slecht-zacht)}
.checks li.fout::before{content:"✕ ";color:var(--slecht)}
.checks li.let{background:var(--let-zacht)}
.checks li.let::before{content:"! ";color:var(--let)}
.gegevens{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0}
.gegevens dt{font-size:.82rem;color:var(--zacht)}
.gegevens dd{margin:0;font-weight:700}

/* verzoeken */
.verzoeken{display:grid;gap:12px}
.verzoek{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;align-items:end}
.toelichting{margin-top:6px;font-style:italic}

/* programma */
.lessen{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.lkaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:16px;display:grid;gap:8px;align-content:start;text-decoration:none;transition:border-color .15s,transform .15s}
.lkaart:hover{border-color:var(--accent);transform:translateY(-1px)}
.lkaart .nr{font:800 2rem/1 var(--f-kop);color:var(--accent)}
.lkaart p{font-size:.9rem;color:var(--zacht)}
.strip{display:flex;height:6px;border-radius:3px;overflow:hidden;gap:2px;margin-top:4px}
.strip span{background:var(--accent);opacity:.35}
.strip span:nth-child(odd){opacity:.7}
.groepen{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.groepkaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:18px;text-decoration:none;display:grid;gap:8px;align-content:start;justify-items:start}
.groepkaart:hover{border-color:var(--bol)}
.groepkaart.lijn-bbl:hover{border-color:var(--bbl)}

/* les */
.lesindeling{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px}
.zij{display:grid;gap:2px;align-content:start;position:sticky;top:80px}
.zij a:not(.terug){display:flex;gap:10px;align-items:baseline;text-decoration:none;padding:7px 10px;border-radius:8px;color:var(--zacht);font-size:.92rem}
.zij a .mono{min-width:1.6em;font-size:.8rem}
.zij a[aria-current="true"]{background:var(--accent-zacht);color:var(--inkt);font-weight:700}
.zij a:hover{color:var(--inkt)}
.lesinhoud{display:grid;gap:20px;min-width:0}
.paneel{display:grid;gap:20px;min-width:0}
.tijdbalk{display:flex;border-radius:8px;overflow:hidden;border:1px solid var(--lijn);height:44px}
.tijdbalk div{display:flex;align-items:center;justify-content:center;padding:0 6px;font-size:.78rem;font-weight:700;background:var(--accent-zacht);border-right:2px solid var(--vlak);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.tijdbalk div:nth-child(even){background:var(--hover)}
.tijdbalk div:last-child{border-right:0}
.tijdlijn{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.tijdlijn .rij{display:grid;grid-template-columns:92px minmax(0,1fr) minmax(0,1fr);gap:16px;padding:14px 18px;border-top:1px solid var(--lijn)}
.tijdlijn .rij:first-child{border-top:0}
.tijdlijn .rij.kop{background:var(--papier);padding-block:8px}
.tijdlijn .rij.kop .label{margin:0}
.tijdlijn .t{font:500 .9rem/1.4 var(--f-mono);font-variant-numeric:tabular-nums}
.tijdlijn .t small{display:block;color:var(--zacht)}
.tijdlijn .doc{color:var(--zacht);font-size:.93rem}
.theorie{max-width:68ch;display:grid;gap:18px}
.theorie .lead{font-size:1.12rem}
.theorie h3{color:var(--accent);margin-bottom:4px}
.groepsopdracht{display:grid;gap:10px}
.groepsopdracht ol{margin:0;padding-left:22px;display:grid;gap:6px}
.vragen{display:grid;gap:18px}

/* vragen */
.vraag{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.vraag>label,.vraag legend{font-weight:700;padding:0;margin-bottom:8px}
.schaal{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.schaalknop{width:48px;height:48px;border-radius:10px;border:1px solid var(--lijn);background:var(--vlak);cursor:pointer;font:700 1.05rem var(--f-mono)}
.schaalknop[aria-pressed="true"]{background:var(--accent);color:var(--op-accent);border-color:var(--accent)}
.schaal .eind{font-size:.82rem;color:var(--zacht)}
.opties{display:grid;gap:6px}
.opties label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--lijn);border-radius:8px;background:var(--vlak);cursor:pointer;font-weight:400}
.opties label:has(input:checked){border-color:var(--accent);background:var(--accent-zacht)}
.opties input{margin-top:4px;accent-color:var(--accent)}

/* student */
.student{max-width:780px;margin:0 auto;width:100%;display:grid;gap:22px}
.leslijst{display:grid;gap:8px}
.leslijst a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:12px 14px;text-decoration:none}
.leslijst a:hover{border-color:var(--accent)}
.leslijst a.vandaag{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)}
.leslijst .nr{font:800 1.3rem/1 var(--f-kop);color:var(--accent)}
.leslijst small{display:block;color:var(--zacht);font-size:.88rem}
.stap{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:20px;display:grid;gap:16px}
.stap>header{display:flex;gap:12px;align-items:baseline}
.stap .n{font:800 1.4rem/1 var(--f-kop);color:var(--accent)}
.lesnav{display:flex;justify-content:space-between;gap:10px}
.opslagbalk{position:sticky;bottom:12px;display:flex;justify-content:center;pointer-events:none}
.opslagbalk span{background:var(--inkt);color:var(--papier);padding:7px 14px;border-radius:999px;font-size:.85rem;font-weight:700}
.opslagbalk.fout span{background:var(--slecht);color:#fff}

/* antwoorden & profiel */
.antwoorden{display:grid;gap:18px}
.antwoord{display:grid;gap:8px}
.antwoord ul{list-style:none;margin:0;padding:0!important;display:grid;gap:6px}
.antwoord li{background:var(--papier);border-radius:8px;padding:8px 12px;font-size:.93rem}
.antwoord li b{margin-right:8px}
.antwoordenlijst details{border-top:1px solid var(--lijn);padding-top:10px}
.antwoordenlijst summary{cursor:pointer;font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.antwoordenlijst dl{margin:10px 0 4px;display:grid;gap:10px}
.antwoordenlijst dt{font-size:.85rem;color:var(--zacht)}
.antwoordenlijst dd{margin:2px 0 0}
.lijngrafiek{width:100%;height:auto}
.lijngrafiek line{stroke:var(--lijn);stroke-width:1}
.lijngrafiek text{fill:var(--zacht);font:10px var(--f-mono)}
.lijngrafiek path{fill:none;stroke:var(--accent);stroke-width:2.5}
.lijngrafiek circle{fill:var(--accent)}

/* login */
body.los{min-height:100vh;display:grid;place-items:start center;padding:6vh 16px}
.logoregel{display:flex;gap:12px;align-items:center}
.logoregel b{display:block;font:800 1.3rem/1.1 var(--f-kop)}
.logoregel small{color:var(--zacht)}
.login .kaart{padding:28px;gap:16px}

/* presentatie */
body.podium{background:var(--podium);color:var(--podium-inkt);height:100vh;overflow:hidden}
body.p-bol{--pacc:#4CD3AE}
body.p-bbl{--pacc:#A3A9FF}
.presentatie{height:100vh;display:grid;grid-template-rows:auto 1fr auto;outline:0}
.pbalk,.pnav{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 20px}
.pbalk{font:500 .8rem var(--f-mono);color:var(--podium-zacht);letter-spacing:.06em;text-transform:uppercase}
.pbalk button,.pnav button{background:var(--podium2);color:var(--podium-inkt);border:0;border-radius:8px;padding:8px 12px;cursor:pointer;font:700 .85rem var(--f-tekst)}
.pbalk button:hover,.pnav button:hover{filter:brightness(1.3)}
.pnav button[disabled]{opacity:.35}
.dia{display:grid;align-content:center;gap:3.2vh;padding:2vh 8vw;min-height:0;overflow:auto}
.dia .k{font:800 clamp(2rem,5.4vw,4.6rem)/1.05 var(--f-kop);text-wrap:balance;letter-spacing:-.015em}
.dia .s{font-size:clamp(1.1rem,2.2vw,1.9rem);color:var(--podium-zacht);max-width:40ch}
.dia .tag{font:600 clamp(.8rem,1.1vw,1rem) var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pacc)}
.dia ul{margin:0;padding:0;list-style:none;display:grid;gap:2.2vh;font-size:clamp(1.15rem,2.6vw,2.2rem);max-width:34ch}
.dia ul li{display:grid;grid-template-columns:auto 1fr;gap:.7em;align-items:baseline}
.dia ul li::before{content:"";width:.5em;height:.5em;border-radius:2px;background:var(--pacc)}
.dia ol{margin:0;padding:0;list-style:none;display:grid;gap:2vh;font-size:clamp(1.1rem,2.4vw,2rem);counter-reset:st;max-width:40ch}
.dia ol li{counter-increment:st;display:grid;grid-template-columns:1.6em 1fr;gap:.6em}
.dia ol li::before{content:counter(st);font:800 1em var(--f-kop);color:var(--pacc)}
.dia.vraag .k,.dia.stelling .k{font-size:clamp(1.8rem,4.6vw,4rem);max-width:22ch}
.dia.titel .groot{font:800 clamp(5rem,16vw,13rem)/.85 var(--f-kop);color:var(--pacc);letter-spacing:-.04em}
.timer{display:flex;gap:14px;align-items:center;font:600 clamp(1.4rem,3vw,2.6rem) var(--f-mono);font-variant-numeric:tabular-nums}
.timer button{background:var(--pacc);color:var(--podium);border:0;border-radius:10px;padding:10px 18px;font:700 1rem var(--f-tekst);cursor:pointer}
.stippen{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.stippen i{width:8px;height:8px;border-radius:50%;background:var(--podium2)}
.stippen i.aan{background:var(--pacc)}

@media (max-width:900px){
  .twee,.twee.breedlinks,.lesindeling{grid-template-columns:minmax(0,1fr)}
  .zij{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;padding-bottom:4px}
  .zij .terug{align-self:center;margin:0 8px 0 0}
  .tijdlijn .rij{grid-template-columns:72px minmax(0,1fr)}
  .tijdlijn .rij .doc{grid-column:2}
  .tijdlijn .rij.kop .doc{display:none}
  .verzoek{grid-template-columns:minmax(0,1fr)}
  .account .wie{display:none}
}
@media (max-width:560px){
  .rij2{grid-template-columns:minmax(0,1fr)}
  .hoofdnav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ===== Stoer en technisch ===== */
body{background-color:var(--papier);background-image:radial-gradient(ellipse 80% 50% at 75% 0%,var(--gloed),transparent 70%),linear-gradient(var(--raster) 1px,transparent 1px),linear-gradient(90deg,var(--raster) 1px,transparent 1px);background-size:auto,40px 40px,40px 40px;background-attachment:fixed}
h1{font:800 clamp(2.1rem,4.4vw,3.4rem)/1 var(--f-kop);text-transform:uppercase;letter-spacing:.01em;color:var(--kopkleur)}
h2{font:700 1.3rem/1.15 var(--f-kop);text-transform:uppercase;letter-spacing:.06em;color:var(--kopkleur)}
h3{font:700 1.15rem/1.2 var(--f-kop);text-transform:uppercase;letter-spacing:.04em;color:var(--kopkleur)}
.label{font:600 .74rem/1.3 var(--f-mono);letter-spacing:.08em;color:var(--goed)}
.label::before{content:"// "}
.kop{background:var(--navy);border-bottom:3px solid #5FC41A;color:#E6EEF8}
.merk img{height:44px;width:auto;display:block}
.merk-tekst{display:flex;flex-direction:column;line-height:1.1;font:800 1.05rem var(--f-kop);text-transform:uppercase;letter-spacing:.04em;color:#fff}
.merk-tekst small{font:500 .78rem var(--f-tekst);text-transform:none;letter-spacing:0;color:#8FA6C2}
.hoofdnav a{font:700 1rem var(--f-kop);text-transform:uppercase;letter-spacing:.08em;color:#8FA6C2;border-radius:0;padding:10px 14px}
.hoofdnav a:hover{color:#fff}
.hoofdnav a[aria-current="page"]{background:none;color:#fff;box-shadow:inset 0 -3px 0 #2C8BFF}
.wie span{color:#fff}.wie small{color:#8FA6C2}
.kop .knop{background:transparent;border-color:#1C3E66;color:#E6EEF8}
.kop .knop:hover{background:#0A2D57}
.themaknop{background:transparent;border:1px solid #1C3E66;color:#E6EEF8;width:38px;height:36px;border-radius:2px;cursor:pointer;display:grid;place-items:center}
.themaknop:hover{background:#0A2D57}
.themaknop svg{width:18px;height:18px}
.knop{border-radius:2px;font:700 .98rem var(--f-kop);text-transform:uppercase;letter-spacing:.07em;background:var(--vlak);color:var(--inkt)}
.knop.primair{background:var(--groen);border-color:var(--groen);color:var(--op-groen);padding-right:26px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
.knop.primair.breed{clip-path:none;padding-right:16px}
.knop.klein{font-size:.85rem}
.kaart,.stap,.stat,.tijdlijn,.tabelvak,.lkaart,.groepkaart,.leslijst a{border-radius:var(--r);position:relative}
.kaart::before,.stap::before,.groepkaart::before{content:"";position:absolute;left:-1px;top:-1px;width:28px;height:3px;background:var(--groen)}
.kaart.tip::before,.kaart.signaal::before{display:none}
.kaart.tip{background:var(--accent-zacht)}
.stat b{font:800 2.2rem/1 var(--f-kop);color:var(--kopkleur)}
.stat{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.stat.aandacht{background:var(--let-zacht);border-color:var(--let)}
.lkaart .nr,.leslijst .nr,.stap .n{font-family:var(--f-kop);font-weight:800;font-variant-numeric:tabular-nums}
.lkaart .nr{font-size:2.4rem;color:var(--accent)}
.lkaart h3{font-size:1.1rem}
.strip span{background:var(--groen)}
input[type=text],input[type=email],input[type=password],input[type=number],input:not([type]),input[type=file],textarea,select{border-radius:2px;background:var(--vlak);color:var(--inkt)}
.schaalknop{border-radius:2px;font:800 1.4rem var(--f-kop);background:var(--vlak);width:56px;height:56px}
.schaalknop[aria-pressed="true"]{background:var(--blauw);border-color:var(--blauw);color:#fff}
.opties label{border-radius:2px}
.opties label:has(input:checked){border-color:var(--blauw);background:var(--blauw-zacht)}
.chip{border-radius:2px;font:600 .72rem var(--f-mono);text-transform:uppercase;letter-spacing:.06em}
.chip.nu{background:var(--blauw);color:#fff}
.leslijst a{border-radius:var(--r)}
.leslijst a.vandaag{border-color:var(--blauw);box-shadow:inset 3px 0 0 var(--blauw);background:linear-gradient(90deg,var(--blauw-zacht),var(--vlak) 60%)}
.leslijst .nr{font-size:1.6rem;color:var(--zacht)}
.leslijst a.vandaag .nr{color:var(--blauw)}
.stap .n{font-size:1.6rem;color:var(--groen)}
.tabs a{font:700 1rem var(--f-kop);text-transform:uppercase;letter-spacing:.07em}
.tabs a[aria-current="page"]{border-bottom-color:var(--blauw)}
.seg{border-radius:2px}.seg a{border-radius:2px;font:700 .95rem var(--f-kop);letter-spacing:.08em}
.seg a[aria-current="page"]{background:var(--blauw);color:#fff}
.tabel thead th{background:var(--vlak2)}
.stip{border-radius:2px;font-family:var(--f-kop);font-size:.95rem}
.opgedaan{border-radius:0;background:var(--groen)}
.zij a[aria-current="true"]{background:var(--blauw-zacht);box-shadow:inset 3px 0 0 var(--blauw);border-radius:0}
.tijdbalk{border-radius:2px}
.tijdbalk div{background:var(--blauw-zacht);color:var(--inkt);font-family:var(--f-kop);font-size:.86rem;text-transform:uppercase;letter-spacing:.04em}
.tijdbalk div:nth-child(even){background:var(--groen-zacht)}
.theorie h3{color:var(--blauw)}
.melding{border-radius:2px}
.opslagbalk span{background:var(--navy);color:#fff;border-radius:2px;font:600 .8rem var(--f-mono);letter-spacing:.04em}
.voet{color:var(--zacht)}
/* login */
body.los{background-color:var(--papier)}
.logo-groot{width:220px;height:auto;margin:0 auto;display:block}
:root[data-theme="dark"] .logo-groot,:root[data-theme="dark"] .logo-licht{display:none}
.logo-donker{display:none}
:root[data-theme="dark"] .logo-donker{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-licht{display:none}:root:not([data-theme="light"]) .logo-donker{display:block}}
.logoblok{display:grid;place-items:center;padding:4px 0 8px}
/* presentatie */
body.p-bol{--pacc:#2C8BFF}
body.p-bbl{--pacc:#5FC41A}
body.podium{background-image:linear-gradient(rgba(44,139,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(44,139,255,.06) 1px,transparent 1px);background-size:48px 48px}
.dia .k{text-transform:uppercase;letter-spacing:.005em}
.dia.vraag .k,.dia.stelling .k{text-transform:none}
.pbalk{border-bottom:3px solid #5FC41A;background:#012B5A}
.pbalk img{height:30px;vertical-align:middle;margin-right:12px}
.timer button{border-radius:2px;font:800 1rem var(--f-kop);text-transform:uppercase;letter-spacing:.06em}
.themaknop.los-knop{color:var(--inkt);border-color:var(--lijn)}
.themaknop.los-knop:hover{background:var(--hover)}
.login{gap:16px}

/* ===== inlogscherm: foto links, formulier rechts ===== */
body.inlog{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:100vh;background-image:none;background-color:var(--vlak)}
.inlog-foto{background:#012B5A url(inlogfoto.jpg) 58% center/cover no-repeat;min-height:100vh;position:sticky;top:0}
.inlog-vak{display:grid;align-items:center;padding:48px max(24px,5vw)}
.inlog-in{width:100%;max-width:520px;display:grid;gap:18px}
.inlog-logo img{height:96px;width:auto;display:block}
.inlog-logo .logo-donker{display:none}
:root[data-theme="dark"] .inlog-logo .logo-licht{display:none}
:root[data-theme="dark"] .inlog-logo .logo-donker{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .inlog-logo .logo-licht{display:none}:root:not([data-theme="light"]) .inlog-logo .logo-donker{display:block}}
.inlog h1{font-size:clamp(2.2rem,3.4vw,3rem)}
.inlog-sub{color:var(--zacht);font-size:1.15rem;line-height:1.45;margin-top:-6px}
.roltabs{display:flex;gap:28px;border-bottom:1px solid var(--lijn);margin-top:6px}
.roltabs a{text-decoration:none;padding:10px 0;font:700 1.15rem var(--f-kop);text-transform:uppercase;letter-spacing:.07em;color:var(--zacht);border-bottom:3px solid transparent;margin-bottom:-1px}
.roltabs a[aria-current="page"]{color:var(--kopkleur);border-bottom-color:var(--groen)}
.inlog .veld input{padding:14px 16px;font-size:1.05rem}
.wwvak{position:relative}
.wwvak input{padding-right:52px!important}
.oog{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:none;color:var(--zacht);cursor:pointer;display:grid;place-items:center;border-radius:2px}
.oog:hover{color:var(--inkt);background:var(--hover)}
.oog[aria-pressed="true"]{color:var(--blauw)}
.knop.groot{padding:15px 20px;font-size:1.15rem}
.loginlinks{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.loginlinks a,.vergeten summary{color:var(--blauw);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.vergeten{max-width:300px}
.vergeten summary{list-style:none;text-align:right}
.vergeten summary::-webkit-details-marker{display:none}
.vergeten p{margin-top:8px;font-size:.92rem;color:var(--zacht)}
.inlog-voet{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:.85rem}
@media (max-width:860px){
  body.inlog{grid-template-columns:minmax(0,1fr)}
  .inlog-foto{min-height:30vh;position:static;background-image:url(inlogfoto-klein.jpg);background-position:62% 40%}
  .inlog-vak{padding:28px 20px 40px}
  .inlog-logo img{height:72px}
}

/* ===== mobiel: niet zoomen, goed leesbaar ===== */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}
/* iOS zoomt in op velden met tekst kleiner dan 16px: daarom minimaal 16px */
input,select,textarea{font-size:16px!important}

/* ===== robuust schalen: niets mag breder worden dan het scherm ===== */
.inhoud,.kaart,.formulier,.paneel,.stapel,.lesinhoud,.student,.smal,.stap,.sectie,.antwoorden,.vragen,.verzoeken,.inlog-in{grid-template-columns:minmax(0,1fr)}
.kaart>*,.formulier>*,.paneel>*,.stap>*,.lesinhoud>*{min-width:0}
.tijdbalk{width:100%;min-width:0}
.kolommen{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.knop{max-width:100%;white-space:normal;text-align:center;line-height:1.2}
.hoofdnav a,.tabs a,.seg a,.roltabs a{white-space:nowrap}
p,li,dd,dt,td,h1,h2,h3,label,legend,summary{overflow-wrap:break-word}
.theorie p,.groepsopdracht li,.antwoord li,.tijdlijn p{hyphens:auto;-webkit-hyphens:auto}

/* ===== leesbaarheid: kleinste tekst 13px ===== */
.label{font-size:.82rem}
small,.hulp,.klein{font-size:.86rem}
.tabel{font-size:.95rem}
.tabel thead th{font-size:.8rem}
.chip{font-size:.8rem;padding:4px 9px}
.voet{font-size:.85rem}
.opslagbalk span{font-size:.86rem}
.mono{font-size:.9em}
.stat small{font-size:.88rem}
.lijngrafiek text{font-size:11px}

/* ===== mobiel en tablet: grote tikdoelen, rustige opbouw ===== */
@media (max-width:899px){
  .knop{min-height:44px;padding:10px 16px}
  .knop.klein{min-height:40px;padding:8px 12px;font-size:.9rem}
  .themaknop{width:44px;height:44px}
  .hoofdnav a{min-height:44px;display:inline-flex;align-items:center}
  .tabs a,.roltabs a{min-height:44px;display:inline-flex;align-items:center}
  .seg a{min-height:40px;display:inline-flex;align-items:center;padding-inline:20px}
  .terug{display:inline-flex;align-items:center;min-height:40px;margin-bottom:4px}
  .zij a:not(.terug){min-height:44px;align-items:center}
  .loginlinks a,.vergeten summary{display:inline-flex;align-items:center;min-height:44px}
  .vink{min-height:44px;align-items:center}
  .vink input{margin-top:0;width:20px;height:20px}
  .opties label{min-height:48px;align-items:center}
  .opties input{margin-top:0;width:20px;height:20px}
  .schaal{gap:8px}
  .schaalknop{flex:1 1 0;min-width:44px;max-width:64px;height:52px}
  .schaal .eind{flex-basis:100%;order:2}
  .schaal .eind:first-child{order:0}
  .melding a{display:inline-block;padding:8px 0}
  .pnav button{min-height:44px;padding:10px 16px}
  .pbalk button{min-height:40px}
  .inhoud{padding-block:20px 48px;gap:18px}
  .paginakop{align-items:flex-start}
  .paginakop .acties{width:100%}
  .paginakop .acties .knop{flex:1 1 auto}
  .inline{flex-wrap:wrap;width:100%}
  .inline .veld{flex:1 1 220px}
  .kaart,.stap{padding:16px}
  .tijdbalk{height:auto;min-height:44px;flex-wrap:wrap}
  .tijdbalk div{flex-basis:auto!important;flex-grow:1;padding:10px 8px;white-space:normal;text-align:center}
}
@media (max-width:560px){
  .kop-in{gap:10px;padding-block:8px}
  .merk img{height:38px}
  .merk-tekst{font-size:.95rem}
  .account{gap:8px}
  .hoofdnav{margin-inline:-16px;padding-inline:16px;border-top:1px solid #1C3E66;gap:0}
  .hoofdnav a{padding:10px 12px}
  h1{font-size:2rem}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:12px}
  .stat b{font-size:1.8rem}
  .leslijst a{grid-template-columns:36px minmax(0,1fr);row-gap:6px}
  .leslijst a .chip{grid-column:2;justify-self:start}
  .lesnav .knop{flex:1}
  .loginlinks{flex-direction:column;gap:0}
  .vergeten summary{text-align:left}
  .verzoek .acties .knop{flex:1}
  .matrix td:first-child{min-width:150px}
  .tabel th,.tabel td{padding:10px 8px}
}
.merk-tekst small,.wie small{font-size:.84rem}
.zij a .mono{font-size:.86rem}
.tabel thead th{font-size:.84rem}
.antwoordenlijst summary{min-height:44px}
@media (max-width:899px){.merk{min-height:44px}}
.chip{font-size:.82rem}
.pbalk{font-size:.84rem}
.tel{font-size:.84rem}

/* ===== mobiel: compacte kop, menu op twee regels, check-in schaal ===== */
.checkreeks{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.checkreeks div{display:grid;gap:4px;justify-items:center;font:600 .82rem var(--f-mono);color:var(--zacht)}
.checkreeks .stip{width:100%;max-width:44px;height:40px;font-size:1.05rem}
@media (max-width:899px){
  .schaal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .schaal .eind{order:0;flex-basis:auto;grid-row:2;font-size:.86rem}
  .schaal .eind:first-child{grid-column:1/3;text-align:left}
  .schaal .eind:last-child{grid-column:4/6;text-align:right}
  .schaalknop{width:100%;max-width:none;min-width:0;height:54px}
  .opslagbalk{bottom:calc(10px + env(safe-area-inset-bottom))}
  .opslagbalk span{font:600 .9rem var(--f-tekst);letter-spacing:0;padding:8px 14px;box-shadow:0 4px 16px rgba(0,23,47,.35)}
  .student{padding-bottom:24px}
}
@media (max-width:560px){
  .kop-in{flex-wrap:wrap;row-gap:0}
  .merk{order:0}
  .merk-tekst{display:none}
  .account{order:1;margin-left:auto}
  .wie{display:none}
  .hoofdnav{order:2;width:100%;flex-wrap:wrap;overflow:visible;margin:6px -16px 0;padding:0 8px}
  .hoofdnav a{padding:10px 10px;font-size:.95rem;letter-spacing:.06em}
  .badge{min-width:18px;height:18px;font-size:.72rem;margin-left:4px}
  .pbalk{flex-wrap:wrap;padding:10px 14px}
  .pbalk>span:first-child{flex:1 1 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pnav{padding:10px 14px}
  .stippen{display:none}
  .dia{padding:2vh 6vw}
}
@media (min-width:900px){
  .kop-in{flex-wrap:nowrap}
  .hoofdnav{flex-wrap:nowrap;min-width:0}
  .hoofdnav a{padding:10px 10px;letter-spacing:.05em;white-space:nowrap}
  .merk-tekst{white-space:nowrap}
}
@media (min-width:900px) and (max-width:1320px){
  .merk-tekst small{display:none}
  .wie small{display:none}
  .wie span{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (min-width:900px) and (max-width:1100px){
  .merk-tekst{display:none}
}
@media (min-width:561px) and (max-width:899px){
  .kop-in{flex-wrap:wrap;row-gap:0}
  .account{order:1;margin-left:auto}
  .wie{display:none}
  .hoofdnav{order:2;width:calc(100% + 20px);flex-wrap:wrap;margin:4px -10px 0}
}

/* ===== BPV en praktijkcheck ===== */
.checkreeks{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}
.blokkop{margin:14px 0 0}
.blokkop-breed{margin-top:18px;display:grid;gap:4px;max-width:70ch}
.zijblok{margin:14px 10px 4px}
.bpvvak.aan{border-color:var(--groen);background:var(--groen-zacht)}
.praktijkuitleg ul{margin:0}
@media (max-width:899px){.zijblok{display:none}}

/* ===== elk scherm: liggende telefoon, grote schermen, beamer ===== */
@media (max-height:500px) and (orientation:landscape){
  .kop{position:static}
  .zij{position:static}
  body.inlog{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .inlog-foto{position:sticky;top:0;min-height:100vh;height:100vh;background-image:url(inlogfoto-klein.jpg);background-position:50% 40%}
  .inlog-vak{padding:20px max(20px,env(safe-area-inset-right))}
  .inlog-in{gap:12px}
  .inlog-logo img{height:52px}
  .inlog h1{font-size:1.9rem}
  .inlog-sub{font-size:1rem}
  .opslagbalk{bottom:6px}
  .dia{gap:2vh}
}
@media (min-width:1600px){
  html{font-size:17px}
  .wrap{max-width:1440px}
  .inlog-in{max-width:560px}
}
@media (min-width:2200px){
  html{font-size:19px}
  .wrap{max-width:1680px}
  .inlog-in{max-width:620px}
  .student{max-width:900px}
}
.dia .k{font-size:clamp(2rem,5.6vw,7.5rem)}
.dia .s{font-size:clamp(1.1rem,2.3vw,2.8rem);max-width:44ch}
.dia ul,.dia ol{font-size:clamp(1.15rem,2.6vw,3.2rem);max-width:36ch}
.dia.vraag .k,.dia.stelling .k{font-size:clamp(1.8rem,4.8vw,6.5rem)}
.dia.titel .groot{font-size:clamp(5rem,17vw,20rem)}
.timer{font-size:clamp(1.4rem,3vw,3.6rem)}
@media (min-width:1600px){.pbalk,.pnav{padding:16px 32px}.pbalk img{height:38px}.pbalk button,.pnav button{font-size:1rem;padding:10px 16px}}

/* ===== Overzicht in de stijl van de proefweergave ===== */
.overzicht{background:#012B5A;color:#E6EEF8;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;padding:20px;border:1px solid #1C3E66}
.overzicht .label{color:#5FC41A}
.cijfers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.cijfer{background:#0A2D57;padding:12px 14px;display:flex;gap:12px;align-items:center;min-width:0}
.cijfer b{display:block;font:800 1.9rem/1 var(--f-kop);color:#fff;font-variant-numeric:tabular-nums}
.cijfer small{color:#A9BCD3;font-size:.86rem}
.ic{width:38px;height:38px;flex:none;display:grid;place-items:center;font:800 1.05rem var(--f-kop);color:#00172F}
.ic-goed{background:#5FC41A}.ic-blauw{background:#2C8BFF}.ic-let{background:#F0B43C}.ic-slecht{background:#FF7A70}.ic-grijs{background:#8FA6C2}
.ring{display:grid;place-items:center}
.ring svg{width:min(160px,100%);height:auto}
.ring-bg{fill:none;stroke:#0A2D57;stroke-width:12}
.ring-v{fill:none;stroke-width:12;stroke-linecap:butt}
.ring-goed{stroke:#5FC41A}.ring-blauw{stroke:#2C8BFF}
.ring-t{fill:#fff;font:800 28px var(--f-kop);text-anchor:middle}
.ring-s{fill:#A9BCD3;font:500 11px var(--f-tekst);text-anchor:middle}
.verdeling{display:flex;gap:6px;min-height:110px}
.verdeling .blok{padding:12px 14px;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.verdeling .blok b{font:800 2.4rem/1 var(--f-kop)}
.verdeling .blok small{font-size:.86rem;font-weight:600}
.blok.g{background:var(--goed-zacht);color:var(--goed)}.blok.y{background:var(--let-zacht);color:var(--let)}.blok.r{background:var(--slecht-zacht);color:var(--slecht)}.blok.leeg{background:var(--hover);color:var(--zacht)}
.balk{display:inline-flex;gap:2px;vertical-align:middle;margin-right:8px}
.balk i{width:7px;height:12px;background:var(--lijn)}
.balk i.a{background:var(--groen)}
.tabelvak.kaal{border:0;background:none}
.groepstabel td,.groepstabel th{white-space:nowrap}
.aandachtlijst{display:grid;gap:8px}
.persoon{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:10px;background:var(--vlak2);text-decoration:none;color:var(--inkt);border:1px solid transparent}
.persoon:hover{border-color:var(--blauw)}
.persoon b{display:block;font-weight:600}
.persoon small{color:var(--zacht);font-size:.86rem}
.av{width:40px;height:40px;display:grid;place-items:center;font:800 1rem var(--f-kop);background:var(--blauw-zacht);color:var(--blauw)}
.matrixvak summary{cursor:pointer;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;list-style:none;min-height:44px}
.matrixvak summary::-webkit-details-marker{display:none}
.matrixvak summary h2::before{content:"▸ ";color:var(--groen)}
.matrixvak[open] summary h2::before{content:"▾ "}
/* student */
.studenthome{max-width:980px;margin:0 auto;width:100%;display:grid;gap:18px}
.checkinvak .vraag .vlabel{font-size:1rem}
.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.kolom{display:grid;gap:8px;align-content:start;background:var(--vlak2);border:1px solid var(--lijn);padding:10px;min-width:0}
.kolom h3{display:flex;justify-content:space-between;font-size:1rem;color:var(--zacht)}
.kaartje{background:var(--vlak);border:1px solid var(--lijn);padding:10px 12px;display:grid;gap:2px;text-decoration:none;color:var(--inkt);min-height:44px}
.kaartje:hover{border-color:var(--blauw)}
.kaartje b{font-weight:600;font-size:.98rem}
.kaartje small{color:var(--zacht);font:600 .8rem var(--f-mono);letter-spacing:.04em;text-transform:uppercase}
.kaartje.nu{border-color:var(--blauw);box-shadow:inset 3px 0 0 var(--blauw)}
.kaartje.bpv small{color:var(--groen)}
@media (max-width:899px){
  .overzicht{grid-template-columns:minmax(0,1fr)}
  .ring svg{width:140px}
  .kanban{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .cijfers{grid-template-columns:minmax(0,1fr)}
  .verdeling{flex-direction:column;min-height:0}
  .verdeling .blok{flex:none!important;flex-direction:row;align-items:center;justify-content:space-between;min-height:56px}
}
.kaartje small{font-size:.86rem}

/* ===== vaste lesopbouw: vier fases ===== */
.fz-start{--fz:#2C8BFF;--fz-z:var(--blauw-zacht)}
.fz-uitleg{--fz:#8E7CF0;--fz-z:#ECE8FD}
.fz-werk{--fz:#5FC41A;--fz-z:var(--groen-zacht)}
.fz-afronding{--fz:#F0B43C;--fz-z:var(--let-zacht)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fz-uitleg{--fz-z:#2A2552}}
:root[data-theme="dark"] .fz-uitleg{--fz-z:#2A2552}
.fasestrook{display:flex;gap:4px;flex-wrap:wrap}
.fasestrook .fz{background:var(--fz-z);border-top:4px solid var(--fz);padding:10px 12px;min-width:120px;display:grid;gap:2px}
.fasestrook .fz b{font:700 1rem var(--f-kop);text-transform:uppercase;letter-spacing:.06em;color:var(--kopkleur)}
.fasestrook .fz span{font-size:.86rem;color:var(--zacht)}
.tijdbalk div.fz-start,.tijdbalk div.fz-uitleg,.tijdbalk div.fz-werk,.tijdbalk div.fz-afronding{background:var(--fz-z);box-shadow:inset 0 3px 0 var(--fz)}
.fasechip{display:inline-block;font:600 .78rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;margin:0 8px 4px 0;background:var(--fz-z);color:var(--kopkleur);border-left:3px solid var(--fz)}
.fasekop{display:flex;align-items:center;gap:10px;margin:6px 0 -6px;font:700 .9rem var(--f-kop);text-transform:uppercase;letter-spacing:.1em;color:var(--zacht)}
.fasekop::before{content:"";width:14px;height:14px;background:var(--fz)}
.fasekop::after{content:"";flex:1;height:1px;background:var(--lijn)}
/* presentatie */
.fasebalk{list-style:none;margin:0;padding:0;display:flex;gap:4px;font:600 .78rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.fasebalk li{padding:5px 10px;background:#0A2D57;color:#8FA6C2}
.fasebalk li.nu{background:var(--pacc);color:#00172F}
.dia.vandaag ul{font-size:clamp(1.05rem,2.1vw,2.4rem)}
.dia .fasestrook{margin-top:1vh;max-width:min(1100px,100%)}
.dia .fasestrook .fz{background:#0A2D57;min-width:0;flex-basis:0}
.dia .fasestrook .fz b{color:#fff;font-size:clamp(.9rem,1.4vw,1.6rem)}
.dia .fasestrook .fz span{color:#A9BCD3;font-size:clamp(.8rem,1.1vw,1.2rem)}
.dia .volgende{margin-top:2vh;font:700 clamp(1rem,1.8vw,2rem) var(--f-kop);text-transform:uppercase;letter-spacing:.05em;color:var(--pacc)}
@media (max-width:899px){.fasebalk{order:3;width:100%;overflow-x:auto}.fasebalk li{white-space:nowrap}.fasestrook .fz{min-width:0;flex:1 1 45%!important}}
.fasebalk{font-size:.84rem}
.fasechip{font-size:.84rem}
.pbalk>*{min-width:0}
.fasebalk{max-width:100%;min-width:0;overflow-x:auto}
@media (max-width:560px){.fasebalk li{padding:5px 7px;letter-spacing:.03em}}
.presentatie{grid-template-columns:minmax(0,1fr);width:100%}

/* ===== schaalt mee met het venster ===== */
/* basisgrootte groeit vloeiend mee vanaf 1280px breed (16px) tot 2560px (19px); alles in rem schaalt mee */
html{font-size:clamp(16px, calc(0.234vw + 13px), 19px)}
.wrap{max-width:75rem}
.student{max-width:48.75rem}
.studenthome{max-width:61.25rem}
.smal{max-width:35rem}
@media (min-width:1600px){html{font-size:clamp(16px, calc(0.234vw + 13px), 19px)}.wrap{max-width:75rem}.inlog-in{max-width:27.5rem}}
@media (min-width:2200px){html{font-size:clamp(16px, calc(0.234vw + 13px), 19px)}.wrap{max-width:75rem}.inlog-in{max-width:27.5rem}.student{max-width:48.75rem}}

/* ===== inlogscherm zoals Railative ===== */
/* pc: foto links, formulier rechts, past precies in het venster */
body.inlog{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:100vh;height:100dvh;min-height:0;overflow:hidden;background:var(--vlak)}
.inlog-foto{position:relative;min-height:0;height:100%;top:auto;background:#012B5A url(inlogfoto.jpg) 58% center/cover no-repeat}
.inlog-vak{height:100%;overflow-y:auto;display:grid;align-items:center;padding:clamp(24px,5vh,64px) clamp(24px,5vw,96px)}
.inlog-in{max-width:27.5rem;width:100%;gap:clamp(12px,2vh,18px)}
.inlog-logo img{height:clamp(56px,9vh,96px)}
.inlog-mobielkop{display:none}
/* telefoon en smalle vensters: geen foto, donkere balk met logo bovenaan, formulier over de volle breedte */
@media (max-width:860px), (max-height:500px) and (orientation:landscape){
  body.inlog{display:block;height:auto;min-height:100vh;min-height:100dvh;overflow:visible}
  .inlog-foto{display:none}
  .inlog-mobielkop{display:flex;align-items:center;gap:12px;background:#012B5A;border-bottom:3px solid #5FC41A;padding:10px max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left));padding-top:calc(10px + env(safe-area-inset-top))}
  .inlog-mobielkop img{height:44px;width:auto}
  .inlog-mobielkop span{font:800 1.1rem var(--f-kop);text-transform:uppercase;letter-spacing:.05em;color:#fff}
  .inlog-vak{height:auto;overflow:visible;display:block;padding:28px max(20px,env(safe-area-inset-right)) 32px max(20px,env(safe-area-inset-left))}
  .inlog-in{max-width:none}
  .inlog-logo{display:none}
  .inlog h1{font-size:2rem}
}

/* presentatie vult altijd precies het venster, ook met de adresbalk van een telefoon */
body.podium,.presentatie{height:100vh;height:100dvh}

/* ===== inlogkolom past ook in lage vensters (laptop met schaalvergroting, bladwijzerbalk) ===== */
@media (min-width:861px) and (min-height:501px){
  .inlog-vak{padding-block:clamp(16px,4vh,64px);scrollbar-width:none}
  .inlog-vak::-webkit-scrollbar{display:none}
  .inlog-in{gap:clamp(8px,1.6vh,18px)}
  .inlog-logo img{height:clamp(44px,8.5vh,96px)}
  .inlog h1{font-size:clamp(1.7rem,5.2vh,3rem)}
  .inlog-sub{font-size:clamp(.92rem,2vh,1.1rem);line-height:1.35;margin-top:0}
  .inlog .roltabs a{min-height:0;padding-block:clamp(6px,1.2vh,10px)}
  .inlog .formulier{gap:clamp(8px,1.6vh,14px)}
  .inlog .veld input{padding-block:clamp(8px,1.5vh,14px)}
  .inlog .knop.groot{padding-block:clamp(10px,1.7vh,15px)}
  .inlog .loginlinks a,.inlog .vergeten summary{min-height:0}
  .inlog-voet{margin-top:clamp(0px,1vh,10px)}
  .inlog .melding{padding-block:8px}
}

/* ---------- 1.8: eigen variant, privacy, wachtwoordherstel ---------- */
.chip.extra{background:var(--groen-zacht);color:var(--groen);border-color:transparent;vertical-align:middle}
.vandocent{border-left:4px solid var(--groen);background:var(--groen-zacht);padding:.7rem 1rem;border-radius:0 var(--r) var(--r) 0;margin:.4rem 0 1rem}
.vandocent p{margin:.25rem 0 0}
.variantregel{margin:.2rem 0 1rem;color:var(--zacht)}
.variantvak .knoppenrij{margin-top:.5rem}
.knoppenrij{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.extravraag{border:1px solid var(--lijn);border-radius:var(--r);padding:.8rem 1rem 1rem;margin:0 0 1rem;display:grid;gap:.75rem;min-width:0}
.extravraag legend{font-family:var(--f-kop);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;color:var(--kopkleur);padding:0 .35rem}
.variantform h2{margin-top:.5rem}
.variantform h2:first-of-type{margin-top:0}
.veld.smal{max-width:14rem}
.wisvak{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--lijn)}
@media (min-width:700px){.extravraag{grid-template-columns:2fr 1fr}.extravraag .veld:last-child{grid-column:1/-1}}

/* ---------- 1.9: studentkant op de telefoon ---------- */
/* compact overzicht: ring en cijfers naast elkaar, ook op de telefoon */
.overzicht.compact{grid-template-columns:auto minmax(0,1fr);align-items:center;padding:16px 20px}
.overzicht.compact>div:first-child{order:2}
.overzicht.compact .ring{order:1}
.overzicht.compact .ring svg{width:112px}
.overzicht.compact .cijfers{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
@media (max-width:700px){.overzicht.compact{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:14px}.overzicht.compact .ring svg{width:96px}.overzicht.compact .cijfers{grid-template-columns:minmax(0,1fr)}}
/* lesbord: inklapbare kolommen */
details.kolom>summary{list-style:none;cursor:pointer}
details.kolom>summary::-webkit-details-marker{display:none}
details.kolom>summary h3::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:2px 2px 0 10px}
details.kolom[open]>summary h3::after{transform:rotate(-135deg);margin-top:8px}
details.kolom>summary h3{align-items:center;min-height:32px;margin:0}
details.kolom>summary h3 span{margin-left:auto}
details.kolom[open]>summary{margin-bottom:8px}
/* les: snel naar een fase springen */
.fasenav{position:sticky;top:var(--kop-h,0px);z-index:4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:var(--papier);padding:8px 0;margin:-4px 0}
.fasenav a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:4px 6px;text-align:center;text-decoration:none;font:700 .9rem/1.15 var(--f-kop);text-transform:uppercase;letter-spacing:.04em;color:var(--inkt);background:var(--vlak);border:1px solid var(--lijn);box-shadow:inset 0 3px 0 var(--fz)}
.fasenav a:hover{background:var(--hover)}
.fasekop{scroll-margin-top:calc(var(--kop-h,0px) + 64px)}
@media (max-width:700px){body.lesmodus .kop{position:static}.fasenav a{font-size:.82rem;letter-spacing:.02em}}
/* klasafspraken: ingeklapt, behalve in les 1 */
details.afspraken>summary{cursor:pointer;font:700 1rem var(--f-kop);text-transform:uppercase;letter-spacing:.04em;color:var(--kopkleur);min-height:28px;display:flex;align-items:center}
details.afspraken[open]>summary{margin-bottom:6px}
/* opslagmelding: alleen even zichtbaar na bewaren, of bij een fout */
.opslagbalk span:empty{display:none}
.student .opslagbalk{opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none}
.student .opslagbalk.toon,.student .opslagbalk.fout{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.student .opslagbalk{transition:none}}
/* leesbaarheid: geen afgebroken woorden, rustige alinea's */
.theorie p,.groepsopdracht li,.antwoord li,.tijdlijn p{hyphens:manual;-webkit-hyphens:manual}
.theorie section{display:grid;gap:8px}
.theorie p{margin:0}
.theorie{line-height:1.65}

/* ---------- 1.9: docentkant ---------- */
.begroet{margin:0 0 2px;color:var(--zacht);font-weight:600}
.kenmerken{margin:4px 0 0;color:var(--zacht)}
/* antwoorden per les: elke vraag inklapbaar */
.antwoorden{gap:0;border-top:1px solid var(--lijn)}
details.antwoord{display:block;border-bottom:1px solid var(--lijn)}
details.antwoord>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:12px 2px;min-height:44px}
details.antwoord>summary::-webkit-details-marker{display:none}
details.antwoord>summary .label{grid-column:1/-1;margin:0}
details.antwoord .vraagkop{font:700 1.05rem/1.3 var(--f-kop);color:var(--kopkleur);text-transform:uppercase;letter-spacing:.02em}
details.antwoord .telling{color:var(--zacht);font-size:.88rem;white-space:nowrap;display:flex;align-items:center;gap:8px}
details.antwoord .telling::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px}
details.antwoord[open] .telling::after{transform:rotate(-135deg);margin-top:4px}
details.antwoord>ul,details.antwoord>p{margin:0 0 14px}
details.antwoord>ul{display:grid;gap:8px;padding:0;list-style:none}
.lesopbouw h3{margin:0}

/* ---------- 1.9: rustiger labels (gewone tekst, geen // en geen hoofdletters) ---------- */
.label{font:600 .88rem/1.35 var(--f-tekst);letter-spacing:0;text-transform:none;color:var(--zacht)}
.label::before{content:none}
.overzicht .label{color:#A9BCD3}
.chip{font:600 .8rem/1.2 var(--f-tekst);letter-spacing:0;text-transform:none}
.kaartje small{font:600 .86rem var(--f-tekst);letter-spacing:0;text-transform:none}
.opslagbalk span{font:600 .88rem var(--f-tekst);letter-spacing:0}

/* ---------- 1.9: gelijk aan DESIGN.md: 2px afronding, geen slagschaduw, blauwe focusrand ---------- */
.zij a:not(.terug),.antwoord li,.pbalk button,.pnav button,.checks li,.badge{border-radius:2px}
@media (max-width:700px){.opslagbalk span{box-shadow:none;border:1px solid rgba(255,255,255,.18)}}
:focus-visible{outline-color:var(--blauw)}
details.afspraken>summary{list-style:none;justify-content:space-between}
details.afspraken>summary::-webkit-details-marker{display:none}
details.afspraken>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-4px 4px 0 10px}
details.afspraken[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
@media (min-width:701px){.overzicht.compact .cijfers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chip{font-size:.85rem}
details.afspraken>summary,details.kolom>summary h3{min-height:44px}
.logo-groot{width:140px}

/* ---------- 1.9.3: menubalk staat stil ---------- */
/* ruimte voor de schuifbalk altijd vrijhouden, zodat de menubalk niet verspringt tussen korte en lange pagina's;
   niet op het inlogscherm en in de presentatie (die passen precies in het venster) */
html{scrollbar-gutter:stable}
html:has(body.inlog),html:has(body.podium),html:has(body.los){scrollbar-gutter:auto}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}html:has(body.inlog),html:has(body.podium){overflow-y:auto}}

/* ---------- 1.9.4: inlogscherm: naam naast het logo ---------- */
.inlog-logo{display:flex;align-items:center;gap:14px}
.inlog-logo img{height:clamp(52px,7.5vh,72px)}
.inlog-naam{font:800 clamp(1.3rem,2.6vh,1.6rem)/1.05 var(--f-kop);text-transform:uppercase;letter-spacing:.02em;color:var(--kopkleur);max-width:9em}
@media (max-width:860px), (max-height:500px) and (orientation:landscape){.inlog-logo{display:none}}

/* ---------- 1.9.5: review ---------- */
/* contrast in donker thema: blauwe tekst op donkerblauwe vlakken lichter (alleen gewone tekstlinks, initialen en BOL-label) */
:root[data-theme="dark"] main a:not([class]),:root[data-theme="dark"] .av,:root[data-theme="dark"] .chip.lijn-bol{color:#7DB6FF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) main a:not([class]),:root:not([data-theme="light"]) .av,:root:not([data-theme="light"]) .chip.lijn-bol{color:#7DB6FF}}
/* focus nooit achter de vaste kopbalk of fasebalk; ook niet achter de opslagmelding onderaan */
html{scroll-padding-top:calc(var(--kop-h,0px) + 16px);scroll-padding-bottom:64px}
html:has(body.lesmodus){scroll-padding-top:calc(var(--kop-h,0px) + 76px)}
/* alleen voor schermlezers */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* overslalink: zichtbaar zodra hij focus krijgt */
.overslaan{position:absolute;left:12px;top:-60px;z-index:20;background:var(--vlak);color:var(--kopkleur);border:2px solid var(--blauw);padding:10px 14px;font-weight:700;text-decoration:none}
.overslaan:focus{top:12px}
#inhoud:focus{outline:none}
/* menu (en tabs) op telefoon en tablet: één rij die schuift, met vervaging rechts als er meer is */
@media (max-width:899px){
  .hoofdnav{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hoofdnav::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
  .tabs{scrollbar-width:none}
  .hoofdnav.meer,.tabs.meer{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
}
.tel{font:600 .9em var(--f-tekst);color:var(--zacht);vertical-align:baseline}
/* Personen: op de telefoon elke persoon als kaartje */
@media (max-width:700px){
  .kaarttabel,.kaarttabel tbody{display:block}
  .kaarttabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .kaarttabel tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 14px;border-bottom:1px solid var(--lijn)}
  .kaarttabel td{display:block;padding:0;border:0;white-space:normal}
  .kaarttabel td.naamcel{grid-column:1;font-size:1.05rem}
  .kaarttabel td.statuscel{grid-column:2;grid-row:1;align-self:start}
  .kaarttabel td[data-label]{grid-column:1/-1;color:var(--zacht);font-size:.92rem}
  .kaarttabel td[data-label]::before{content:attr(data-label) ": ";font-family:var(--f-tekst);font-weight:600;color:var(--inkt)}
  .tabelvak:has(.kaarttabel){overflow:visible}
}
/* groepspagina: lange groepsnaam neemt minder ruimte */
h1.titel-compact{font-size:clamp(1.6rem,2.6vw,2.4rem)}
/* donker thema: verdeling met gekleurde rand in plaats van volle kleurvlakken */
:root[data-theme="dark"] .verdeling .blok{background:var(--vlak);border:1px solid var(--lijn);border-top-width:4px}
:root[data-theme="dark"] .blok.g{border-top-color:var(--goed)}:root[data-theme="dark"] .blok.y{border-top-color:var(--let)}:root[data-theme="dark"] .blok.r{border-top-color:var(--slecht)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .verdeling .blok{background:var(--vlak);border:1px solid var(--lijn);border-top-width:4px}
  :root:not([data-theme="light"]) .blok.g{border-top-color:var(--goed)}:root:not([data-theme="light"]) .blok.y{border-top-color:var(--let)}:root:not([data-theme="light"]) .blok.r{border-top-color:var(--slecht)}
}
/* bestand kiezen met een Nederlandse knop */
.bestandkiezer{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bestandkiezer input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.bestandkiezer input[type=file]:focus-visible+label{outline:3px solid var(--blauw);outline-offset:2px}
.bestandkiezer label{cursor:pointer;margin:0}
/* inlogfoto: lichter WebP-bestand waar de browser dat kan */
.inlog-foto{background-image:image-set(url(inlogfoto.webp) type("image/webp"),url(inlogfoto.jpg) type("image/jpeg"))}
@media (max-width:860px){.inlog-foto{background-image:image-set(url(inlogfoto-klein.webp) type("image/webp"),url(inlogfoto-klein.jpg) type("image/jpeg"))}}
@media (max-height:500px) and (orientation:landscape){.inlog-foto{background-image:image-set(url(inlogfoto-klein.webp) type("image/webp"),url(inlogfoto-klein.jpg) type("image/jpeg"))}}
.bestandkiezer input[type=file]{width:1px!important;height:1px!important;padding:0!important;border:0!important;min-height:0!important;margin:-1px;clip:rect(0 0 0 0);clip-path:inset(50%)}


/* ---------- 1.10: inlogscherm pc: groot logo met naam op één regel ---------- */
@media (min-width:861px){
  .inlog-logo{gap:clamp(12px,1.6vh,18px);margin-bottom:clamp(8px,3.2vh,32px)}
  .inlog-logo img{height:clamp(60px,13.5vh,88px)}
  .inlog-naam{font-size:clamp(1.45rem,5vh,2.15rem);max-width:none;white-space:nowrap;line-height:1}
}
@media (min-width:861px){
  .inlog-in{container-type:inline-size}
  .inlog-naam{font-size:min(5vh,2.1rem,calc((100cqw - 116px) / 10.8))}
}

/* ---------- Weergave "Effen": het originele thema zonder streepjes (raster) op de achtergrond ---------- */
:root[data-stijl="effen"],:root[data-stijl="effen"][data-theme="dark"]{--raster:transparent}
@media (prefers-color-scheme:dark){:root[data-stijl="effen"]:not([data-theme="light"]){--raster:transparent}}

/* ---------- app installeren ---------- */
.inlog-voet .appknop{margin-left:auto;font-weight:600;color:var(--blauw);text-decoration:underline;text-underline-offset:3px;min-height:40px;display:inline-flex;align-items:center}
.appwrap{padding-top:24px;padding-bottom:40px;max-width:60rem}
.appknoppen{margin:8px 0 16px}
.appknoppen .melding{margin:0}
.appuitleg ol,.appuitleg ul{margin:0;padding-left:1.3em;display:grid;gap:8px}
/* inlogfoto (werkplaats): mentor en studenten zo veel mogelijk in beeld */
.inlog-foto{background-position:49% 30%}
@media (max-width:860px){.inlog-foto{background-position:60% 30%}}
/* voortgang (zorgcoördinator) */
.vg-meter{display:inline-block;width:80px;height:8px;background:var(--lijn);vertical-align:middle;margin-right:8px;border-radius:2px;overflow:hidden}
.vg-meter i{display:block;height:100%;background:var(--blauw)}
.vg-meter.vg-inv i{background:var(--groen)}
.vg-pct{font-variant-numeric:tabular-nums}
.vg-getal{white-space:nowrap;margin-right:10px}
.vg-tabel td{vertical-align:middle}
.vg-tabel .naamcel .chip{margin-left:4px}
.vg-cohort{display:block;color:var(--zacht);font-size:.85rem;margin-top:2px}
.uitfilter{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);margin:0 0 16px}
.uitfilter>summary{cursor:pointer;padding:12px 16px;min-height:44px;display:flex;align-items:center;gap:10px;font-weight:600;list-style:none}
.uitfilter>summary::-webkit-details-marker{display:none}
.uitfilter>summary::before{content:"›";display:inline-block;transition:transform .15s;font-size:1.2em;line-height:1;color:var(--zacht)}
.uitfilter[open]>summary::before{transform:rotate(90deg)}
.uitfilter-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px;padding:4px 16px 16px;border-top:1px solid var(--lijn)}
.uitfilter-in .veld{margin:0}
.uitfilter-knoppen{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.vg-uitleg{margin-top:24px;color:var(--zacht)}
.vg-uitleg summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--inkt)}
.vg-uitleg ul{margin:4px 0 0;padding-left:20px;max-width:68ch}
.vg-uitleg li{margin:4px 0}
@media (max-width:860px){.vg-getal{margin-right:8px}.uitfilter-in{grid-template-columns:repeat(2,minmax(0,1fr))}.uitfilter-in .veld:first-child{grid-column:1/-1}}
@media (max-width:420px){.uitfilter-in{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.uitfilter>summary::before{transition:none}}
.uitfilter-knoppen{grid-column:1/-1;align-items:center}
@media (min-width:861px){.vg-tabel td[data-label="Lessen"],.vg-tabel td[data-label="Ingevuld"],.vg-tabel td[data-label^="Lessen"]{white-space:nowrap}}
.vg-uitleg>summary{list-style:none;gap:10px}
.vg-uitleg>summary::-webkit-details-marker{display:none}
.vg-uitleg>summary::before{content:"›";display:inline-block;font-size:1.2em;line-height:1;color:var(--zacht);transition:transform .15s}
.vg-uitleg[open]>summary::before{transform:rotate(90deg)}
/* lessen op slot tot de mentor ze klaarzet */
.kaartje.dicht{opacity:.62;cursor:default;border-style:dashed}
.kaartje.dicht .slot{display:block;font-size:.85rem;color:var(--zacht);margin-top:2px}
.kolom .kolomkop{margin:14px 0 6px;font-weight:600;color:var(--zacht);font-size:.9rem}
.kolom .kolomkop span{font-variant-numeric:tabular-nums}
.lesnav-slot{align-self:center;text-align:right}
.kaartje.dicht:hover{border-color:var(--lijn)}

/* ===== knop Aa: tekstgrootte en thema ===== */
:root[data-tekst="klein"]{font-size:calc(clamp(16px, calc(0.234vw + 13px), 19px) * .9)}
:root[data-tekst="groot"]{font-size:calc(clamp(16px, calc(0.234vw + 13px), 19px) * 1.15)}
:root[data-tekst="extragroot"]{font-size:calc(clamp(16px, calc(0.234vw + 13px), 19px) * 1.3)}
input,select,textarea{font-size:max(16px,1rem)!important}
.weergave{position:relative;display:flex}
.weergaveknop{background:transparent;border:1px solid #1C3E66;color:#E6EEF8;width:38px;height:36px;border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;font:700 1.05rem/1 var(--f-tekst);padding:0}
.weergaveknop span:nth-child(2){font-size:.75em}
.weergaveknop:hover,.weergaveknop[aria-expanded="true"]{background:#0A2D57}
.weergaveknop[aria-expanded="true"]{border-color:#2C8BFF}
.weergaveknop.los-knop{color:var(--inkt);border-color:var(--lijn)}
.weergaveknop.los-knop:hover,.weergaveknop.los-knop[aria-expanded="true"]{background:var(--hover)}
.weergavepaneel{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(340px,calc(100vw - 16px));background:var(--vlak);color:var(--inkt);border:1px solid var(--lijn);border-radius:4px;padding:14px;box-shadow:0 10px 30px rgba(0,23,47,.28);text-align:left}
.weergavepaneel[hidden]{display:none}
.weergave.los .weergavepaneel{top:auto;bottom:calc(100% + 8px);left:0;right:auto}
.wp-kop{margin:0 0 6px;font:700 .9rem var(--f-tekst);color:var(--inkt);text-transform:none;letter-spacing:0}
.wp-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:14px}
.wp-seg.drie{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:0}
.wp-seg button{min-height:52px;display:grid;place-items:center;gap:0;border:1px solid var(--lijn);background:var(--vlak);color:var(--inkt);border-radius:2px;padding:6px 2px;font-family:var(--f-tekst);cursor:pointer}
.wp-seg.drie button{min-height:44px}
.wp-seg button:hover{border-color:var(--blauw)}
.wp-seg button span{font-weight:700;line-height:1}
.wp-seg button small{font-size:12.5px;color:var(--zacht);font-weight:500;line-height:1.2}
.wp-seg button[aria-pressed="true"]{border:2px solid var(--blauw);background:var(--bol-zacht)}
.wp-seg button[aria-pressed="true"] small{color:var(--inkt);font-weight:700}
.uitlog-ic{display:none}

/* geen zijwaarts schuiven van de pagina */
html,body{overflow-x:clip;overscroll-behavior-x:none}

/* ===== compacte kopbalk op telefoon en tablet: één rij van 48px ===== */
@media (max-width:860px){
  .kop{border-bottom-width:2px}
  .kop-in{flex-wrap:nowrap;gap:2px;row-gap:0;padding-block:0;min-height:48px}
  .merk{order:0;flex:none;min-height:44px}
  .merk img{height:28px;width:auto}
  .hoofdnav{order:1;width:auto;flex:1 1 auto;min-width:0;margin:0;padding:0 0 0 6px;border-top:0;gap:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .hoofdnav::-webkit-scrollbar{display:none}
  .hoofdnav a{padding:0 9px;font-size:.85rem;min-height:46px;letter-spacing:.06em}
  .account{order:2;margin-left:0;gap:0;flex:none}
  .account .wie{display:none}
  .account .weergaveknop,.account .knop.uitlog{width:44px;height:44px;min-height:44px;padding:0;border:0;background:none;color:#E6EEF8;display:grid;place-items:center}
  .account .weergaveknop{display:flex;font-size:1.15rem}
  .account .weergaveknop[aria-expanded="true"]{background:rgba(255,255,255,.12)}
  .account .uitlog-ic{display:block}
  .account .uitlog-tekst{display:none}
  .account .weergavepaneel{right:-44px}
}

/* ===== studentoverzicht: vandaag, nog inhalen en de lesroute ===== */
.sn{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px 32px;align-items:start}
.sn-kopregel{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sn-kopregel h1{font-size:clamp(1.6rem,2.4vw,2rem);margin:0}
.sn-links{display:grid;gap:24px}
.sn-voet{grid-column:1/-1}
.sn-wanneer{margin:0 0 4px;font-weight:600;color:var(--accent)}
.sn-titel{font-family:var(--f-tekst,inherit);text-transform:none;letter-spacing:0;font-weight:700;font-size:1.5rem;line-height:1.25;margin:0 0 14px;color:var(--kopkleur)}
.sn-vandaag .acties{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.sn-vandaagstand{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--lijn)}
.sn-voortgang{margin-top:12px}
.sn-voortgang p{margin:6px 0 0}
.sn-balk{height:8px;background:var(--lijn);border-radius:2px;overflow:hidden}
.sn-balk i{display:block;height:100%;background:var(--groen)}
.sn-kop{font-size:1.15rem;margin:0 0 10px}
.sn-inhalen ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sn-inhalen a{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--vlak);border:1px solid var(--lijn);border-left:3px solid var(--let);text-decoration:none;color:var(--inkt);min-height:44px}
.sn-inhalen a:hover{border-color:var(--let)}
.sn-wat{display:grid;gap:1px;flex:1;min-width:0}
.sn-wat small{color:var(--zacht);font-size:.85rem}
.sn-wat b{font-weight:600}
.sn-mist{color:var(--let);font-size:.9rem;font-weight:600}
.sn-pijl{font-size:1.4rem;color:var(--zacht)}
.sn-route ol{list-style:none;margin:0;padding:0;position:relative}
.sn-route>ol::before,.sn-later ol::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:var(--lijn)}
.sn-route li{position:relative;display:flex;align-items:center;gap:14px;min-height:52px;padding:4px 0}
.sn-route li>a{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:var(--inkt);padding:6px 10px;margin-left:-10px;border-radius:2px}
.sn-route li>a:hover{background:var(--hover)}
.sn-punt{position:relative;z-index:1;flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;background:var(--vlak);border:2px solid var(--lijn);color:var(--zacht)}
.sn-route li.klaar .sn-punt{background:var(--goed);border-color:var(--goed);color:var(--op-groen,#fff)}
.sn-route li.inhalen .sn-punt{background:var(--vlak);border-color:var(--let);color:var(--let)}
.sn-route li.nu .sn-punt{border-color:var(--blauw);box-shadow:inset 0 0 0 5px var(--vlak);background:var(--blauw)}
.sn-route li.nu b{color:var(--kopkleur);font-weight:700}
.sn-route li.dicht .sn-punt{color:var(--zacht);background:var(--vlak2)}
.sn-route li.dicht .sn-wat{padding:6px 0}
.sn-route li.dicht b{color:var(--zacht);font-weight:500}
.sn-slot{display:block;font-size:.85rem;color:var(--zacht)}
li.dicht .sn-slot{position:absolute;left:42px;bottom:-4px}
.sn-route li.dicht:has(.sn-slot){padding-bottom:18px}
.sn-nu{background:var(--blauw);color:#fff;font-weight:700;font-size:.82rem;padding:1px 6px;border-radius:2px;margin-left:4px}
.sn-bpv{color:var(--groen);font-weight:700}
.sn-stippen{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex:none}
.sn-stippen li{width:9px;height:9px;min-height:0;padding:0;border-radius:50%;border:1.5px solid var(--zacht);display:block}
.sn-stippen li.af{background:var(--goed);border-color:var(--goed)}
.sn-stippen.met-tekst{gap:8px;flex-wrap:wrap}
.sn-stippen.met-tekst li{width:auto;height:auto;border:1px solid var(--lijn);border-radius:2px;padding:3px 8px;font-size:.85rem;color:var(--zacht)}
.sn-stippen.met-tekst li.af{background:var(--goed-zacht);border-color:transparent;color:var(--goed);font-weight:600}
.sn-stippen.met-tekst li.af span::before{content:"✓ "}
.sn-later{margin-top:2px}
.sn-later>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:10px;color:var(--zacht);font-weight:600;padding-left:42px;list-style:none}
.sn-later>summary::-webkit-details-marker{display:none}
.sn-later>summary::after{content:"›";transition:transform .15s}
.sn-later[open]>summary::after{transform:rotate(90deg)}
.sn-legenda{margin-top:14px;line-height:1.8}
.sn-legenda i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--goed);margin:0 4px 0 8px;vertical-align:middle}
.sn-legenda i:first-child{margin-left:4px}
.sn .sn-stippen{display:flex;flex-direction:row;align-items:center;padding:0}
.sn .sn-stippen>li{display:block;margin:0}
.sn .sn-stippen.met-tekst>li{display:inline-block}
@media (max-width:860px){
 .sn{grid-template-columns:1fr;gap:20px}
 .sn-titel{font-size:1.3rem}
 .sn-vandaag .acties .knop{flex:1 1 auto;justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){.sn-later>summary::after{transition:none}}
@media (max-width:899px){.weergaveknop.los-knop{width:44px;height:44px}}
@media (max-width:860px){.merk{min-width:40px;justify-content:center}}
input[type="date"]{min-height:44px}
@media (max-width:860px){
  .hoofdnav.links{-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px);mask-image:linear-gradient(90deg,transparent,#000 20px)}
  .hoofdnav.links.meer{-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20px,#000 80%,transparent)}
}
/* presentatie: een dia past altijd in het venster (te veel inhoud wordt kleiner geschaald, geen schuifbalk) */
.dia{overflow:hidden}
.dia-in{display:grid;align-content:center;gap:inherit;justify-items:inherit;text-align:inherit;min-width:0;transform-origin:center center}
/* de presentatie heeft altijd dezelfde tekstgrootte, ook als iemand bij Aa "Groot" kiest */
:root[data-tekst]:has(body.podium){font-size:clamp(16px, calc(0.234vw + 13px), 19px)}
/* presentatie op een liggende telefoon of laag scherm: smalle balken, zodat de dia zo groot mogelijk blijft */
@media (max-height:500px){
  .pbalk{flex-wrap:nowrap;padding:4px 12px;gap:8px;border-bottom-width:2px}
  .pbalk>span:first-child{flex:0 1 auto;font-size:0;white-space:nowrap}
  .pbalk img{height:24px;margin-right:0}
  .pbalk button,.pnav button{min-height:36px;padding:4px 10px;font-size:.8rem;white-space:nowrap}
  .pbalk .fasebalk{order:0;width:auto;flex:1 1 auto;min-width:0;justify-content:center}
  .pbalk .fasebalk li{font-size:.72rem;padding:3px 6px}
  .pnav{padding:4px 12px}
  .dia{padding:1.5vh 5vw}
}
.wp-seg.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
.wp-seg.twee button{min-height:44px}
.subnav{margin-top:10px;flex-wrap:wrap}
.subnav a{display:inline-flex;align-items:center;gap:6px}

/* ===== overzicht mentor (mijn groepen, groep) en zorgcoördinator (overzicht, personen) ===== */
.vn{display:grid;gap:20px}
.vn-kop h1,.vn-titel{margin:0}
.vn-titel{text-transform:none;letter-spacing:0;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.15}
.vn-kop .kenmerken{margin:4px 0 0;color:var(--zacht)}
.vn-kop .begroet{margin:0;color:var(--zacht)}
.vn-kop-rij{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.vn-tellers{margin:4px 0 0}
.vn-boven{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start}
.vn-knoppen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vn-lesrij .veld{margin:0}
.vn-les .vn-knoppen{margin-top:12px}
.vn-cijfers{display:flex;gap:6px 18px;flex-wrap:wrap;margin:16px 0 8px;padding-top:14px;border-top:1px solid var(--lijn)}
.vn-cijfers b{font:800 1.25rem var(--f-kop);color:var(--kopkleur);margin-right:4px}
.vn-verdeling{display:flex;height:10px;border-radius:2px;overflow:hidden;background:var(--lijn)}
.vn-verdeling i.g{background:var(--goed)}.vn-verdeling i.y{background:var(--let)}.vn-verdeling i.r{background:var(--slecht)}.vn-verdeling i.l{background:var(--lijn)}
.vn-legenda{display:flex;gap:4px 14px;flex-wrap:wrap;margin:6px 0 0;font-size:.85rem}
.vn-legenda span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}
.vn-legenda .g::before{background:var(--goed)}.vn-legenda .y::before{background:var(--let)}.vn-legenda .r::before{background:var(--slecht)}.vn-legenda .l::before{background:var(--lijn)}
.vn-nog{margin:4px 0 0}
.vn-aandacht{border-left:3px solid var(--let)}
.vn-aandacht.rustig{border-left-color:var(--goed)}
.vn-aandacht h2,.vn-acties h2{display:flex;align-items:center;gap:8px}
.vn-tel{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;background:var(--let);color:#fff;font:800 .95rem var(--f-kop);border-radius:2px}
.vn-aandacht ul,.vn-acties ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.vn-aandacht li a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--lijn);text-decoration:none;color:var(--inkt);min-height:44px}
.vn-aandacht li:first-child a{border-top:0}
.vn-aandacht li a b{display:block;font-weight:600}
.vn-aandacht li a small{color:var(--zacht);font-size:.88rem}
.vn-aandacht li a:hover b{color:var(--blauw)}
.vn-tabs{margin-top:4px}
.vn .groepstabel a b{font-weight:600}
.vn .antwoord .vraagkop{text-transform:none;letter-spacing:0;font-family:var(--f-tekst);font-weight:600;font-size:1rem}
/* mijn groepen */
.vn-groepen{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.vn-groep{display:grid;gap:10px;align-content:start}
.vn-groep-kop{display:flex;justify-content:space-between;gap:8px;align-items:center}
.vn-groep-kop a.chip{text-decoration:none}
.vn-groepnaam{margin:0;text-transform:none;letter-spacing:0;font-size:1.3rem;line-height:1.25}
.vn-groepnaam a{color:var(--kopkleur);text-decoration:none}
.vn-groepnaam a:hover{text-decoration:underline}
.vn-vandaag{margin:0}
.vn-ingevuld p{margin:6px 0 0}
.vn-groep .vn-knoppen{margin-top:4px}
.vn-verzoeken ul{margin:0;padding-left:20px}
.vn-aanvraag>summary{cursor:pointer;font-weight:600;color:var(--blauw);min-height:44px;display:inline-flex;align-items:center}
.vn-aanvraag .kaart{margin-top:8px;max-width:640px}
/* zorg: actielijst */
.vn-acties li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--lijn)}
.vn-acties li:first-child{border-top:0}
.vn-punt{width:12px;height:12px;border-radius:50%;background:var(--zacht)}
.vn-acties li.let .vn-punt{background:var(--let)}.vn-acties li.slecht .vn-punt{background:var(--slecht)}
.vn-tekst b{display:block;font-weight:600}
.vn-tekst small{color:var(--zacht);font-size:.88rem}
.vn-mini-kop{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.vn-mini-kop h2{margin:0}
.vn-mini-cijfers{display:grid;gap:12px;margin-top:12px}
.vn-mini-cijfers p{margin:0;display:flex;align-items:baseline;gap:10px}
.vn-mini-cijfers b{font:800 1.8rem var(--f-kop);color:var(--kopkleur);min-width:2.6ch}
/* personen per groep */
.vn-zoek{display:flex;gap:8px;max-width:560px}
.vn-zoek input{flex:1}
.vn-groepblok{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r)}
.vn-groepblok>summary{cursor:pointer;display:flex;gap:4px 12px;flex-wrap:wrap;align-items:baseline;padding:12px 16px;min-height:48px}
.vn-groepblok[open]>summary{border-bottom:1px solid var(--lijn)}
.vn-mensen{list-style:none;margin:0;padding:0}
.vn-mensen a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:8px 16px;min-height:44px;text-decoration:none;color:var(--inkt);border-top:1px solid var(--lijn)}
.vn-mensen li:first-child a{border-top:0}
.vn-mensen a:hover{background:var(--hover)}
.vn-mensen b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:860px){
  .vn-boven{grid-template-columns:1fr}
  .vn-groepen{grid-template-columns:1fr}
  .vn-les .vn-knoppen .knop.primair{flex:1 1 100%}
  .vn-acties li{grid-template-columns:12px minmax(0,1fr);}
  .vn-acties li .knop{grid-column:2;justify-self:start}
  .vn-mensen a{grid-template-columns:minmax(0,1fr) auto}
  .vn-mensen .mono{display:none}
  .vn-kop-rij .vn-knoppen .knop{flex:1}
}
@media (max-width:860px){
  .vn-groep-kop a.chip{min-height:40px;padding-inline:12px}
  .vn-groepnaam a{display:inline-flex;align-items:center;min-height:44px}
  .vn-mini-kop a{display:inline-flex;align-items:center;min-height:44px}
}
/* lesvoorbereiding (PDF) */
.pdfknop::before{content:"";width:14px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M2 0h7l5 5v9a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm6.5 1.5V5.5h4z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M2 0h7l5 5v9a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm6.5 1.5V5.5h4z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat}
.paginakop .pdfknop{margin-top:10px}
.lkaart-wrap{position:relative;display:grid}
.lkaart-wrap .lkaart{height:100%}
.lkaart-pdf{position:absolute;top:10px;right:10px;display:inline-grid;place-items:center;min-width:44px;min-height:32px;padding:0 8px;font:700 .85rem var(--f-tekst);letter-spacing:.04em;color:var(--blauw);background:var(--vlak);border:1px solid var(--lijn);border-radius:2px;text-decoration:none}
.lkaart-pdf:hover{border-color:var(--blauw)}
@media (max-width:860px){.lkaart-pdf{min-height:40px}}
/* lesKaartjes: de balk met de lesopbouw staat altijd onderaan, zodat de balken in een rij op één lijn liggen */
.lessen .lkaart{grid-template-rows:auto auto 1fr auto;align-content:stretch}
.lessen .lkaart .strip{align-self:end;margin-top:8px}
/* schakelaar Zorg | Mentor (zorgcoördinator die ook mentor is) */
.pet{display:inline-flex;border:1px solid #1C3E66;border-radius:2px;padding:2px;gap:2px;margin-right:6px;flex:none}
.pet a{font:700 .84rem var(--f-kop);letter-spacing:.06em;text-transform:uppercase;color:#8FA6C2;text-decoration:none;padding:0 10px;border-radius:2px;display:inline-flex;align-items:center;min-height:32px}
.pet a:hover{color:#fff}
.pet a[aria-current]{background:#2C8BFF;color:#00172F}
@media (max-width:860px){.pet{margin-right:2px}.pet a{padding:0 6px;min-height:40px;min-width:44px;justify-content:center;font-size:.82rem;letter-spacing:.03em}}
.vn-mijn{border-left:3px solid var(--blauw)}
.vn-mijn ul{list-style:none;margin:0;padding:0}
.vn-mijn li{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--lijn)}
.vn-mijn li:first-child{border-top:0}
.ookmentor{display:block;font-size:.85rem}
.mentor-toevoegen{margin-top:12px;padding-top:12px;border-top:1px solid var(--lijn);display:grid;gap:10px}
/* klassen: groepen die samen in de klas zitten */
.vn-klas{border-left:3px solid var(--blauw)}
.vn-inklas{margin:-4px 0 0}
.chip.groepchip{background:var(--vlak2);color:var(--zacht);border:1px solid var(--lijn)}
.groepfilter{margin:-4px 0 0;flex-wrap:wrap}
.groepfilter a{display:inline-flex;align-items:center;min-height:40px}

/* inlezen: kolommen koppelen */
.koppelen{gap:0;max-width:880px}
.kp-kop,.kp-regel{display:grid;grid-template-columns:minmax(150px,1fr) minmax(180px,1.3fr) minmax(0,1.4fr);gap:8px 16px;align-items:center}
.kp-kop{font-size:.82rem;font-weight:600;color:var(--zacht);text-transform:uppercase;letter-spacing:.04em;padding:0 0 8px;border-bottom:1px solid var(--lijn)}
.kp-regel{padding:10px 0;border-bottom:1px solid var(--lijn)}
.kp-veld{font-weight:600}
.kp-nodig{display:inline-block;margin-left:6px;font-size:.8rem;font-weight:600;color:var(--let);background:var(--let-zacht);border-radius:999px;padding:1px 8px;vertical-align:1px}
.kp-regel select{width:100%;min-height:44px}
.kp-vb{font-size:.88rem;overflow-wrap:anywhere}
.kp-mist select{border-color:var(--slecht)}
.kp-mist .kp-nodig{color:var(--slecht);background:var(--slecht-zacht)}
.koppelen .hulp{margin-top:12px}
.koppelen .acties{margin-top:16px}
@media (max-width:700px){
  .kp-kop{display:none}
  .kp-regel{grid-template-columns:1fr;gap:6px}
  .kp-vb:empty{display:none}
}

/* horizontale strips (tabs, navigatie, fases): nooit een verticale schuifbalk tonen */
.tabs,.vn-tabs,.zij,.hoofdnav,.fasebalk{overflow-y:hidden;scrollbar-width:none}
.tabs::-webkit-scrollbar,.vn-tabs::-webkit-scrollbar,.zij::-webkit-scrollbar,.hoofdnav::-webkit-scrollbar,.fasebalk::-webkit-scrollbar{display:none}
/* voortgang per groep: BOL/BBL-labels in één rechte kolom */
.vg-gkop{display:grid;grid-template-columns:min(var(--vg-naam,10ch),55vw) max-content;align-items:center;column-gap:10px;justify-content:start}
.vg-gkop a{overflow-wrap:anywhere}

/* uitlijning: vaste kolommen zodat labels en knoppen onder elkaar staan */
.regels li.srij{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px 14px;flex-wrap:nowrap}
.srij-meta{display:grid;grid-template-columns:7ch 8.6rem;align-items:center;gap:10px;justify-items:start}
.srij>form{justify-self:end}
@media (max-width:640px){
  .regels li.srij{grid-template-columns:minmax(0,1fr) auto}
  .srij>a{grid-column:1}.srij-meta{grid-column:1;grid-row:2}
  .srij>form{grid-column:2;grid-row:1/3}
}
.vn-mini-cijfers b{min-width:2.3em}
.vg-getal{display:inline-block;min-width:6.4em;font-variant-numeric:tabular-nums}
.vg-gkop{align-items:baseline}
.tabs a .tel{margin-left:.3em}
.vn-groepblok>summary{flex-direction:column;align-items:flex-start;gap:2px}
@media (max-width:760px){.paginakop .acties{align-items:stretch}.paginakop .acties .knop{flex:1 1 0;min-width:0;white-space:normal;text-align:center}}
/* studenttabel: labels (groep, check-in, nog niet ingelogd) op een eigen regel onder de naam, altijd links uitgelijnd */
.st-cel .st-tags{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:4px}
.st-cel .st-tags .chip{margin:0}
.melding a{display:inline;padding:4px 0}
@media (max-width:760px){.paginakop .vn-knoppen{width:100%;align-items:stretch}.paginakop .vn-knoppen .knop{flex:1 1 0;min-width:0;white-space:normal;text-align:center}}
@media (max-width:760px){.vn-kop-rij .vn-knoppen{width:100%;align-items:stretch}.vn-kop-rij .vn-knoppen .knop{flex:1 1 0;min-width:0;white-space:normal;text-align:center}}
.vn-mini-cijfers b{min-width:2em}