/* AI in de klas: docentenpakket, handleiding (1 A4 staand) + schermweergave.
   Gebruik: <body class="handleiding"> ... <main class="blad"> ... </main>
   Zelfstandig: leunt niet op assets/site.css. Fonts: ../assets/fonts/fonts.css (zie <link> in de pagina). */

:root{
  --ink:#0d1117; --muted:#4a5260; --line:#b9bfc9; --papier:#fff; --bg:#eceef2;
  --accent:#1a47c4; --accent-zacht:#e8edfb;
  --amber:#8a5200; --amber-zacht:#fdf1dc;
  --kop-font:"Bricolage Grotesque", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --tekst-font:"Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --mono-font:"DM Mono", ui-monospace, monospace;
}
*{box-sizing:border-box; min-width:0}
html{overflow-x:hidden}
body.handleiding, body.kaarten-pagina{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--tekst-font); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.handleiding :focus-visible, .kaarten-pagina :focus-visible{outline:3px solid var(--accent); outline-offset:2px}

/* werkbalk (alleen scherm) */
.werkbalk{max-width:900px; margin:0 auto; padding:14px 18px; display:flex; flex-wrap:wrap;
  gap:10px 16px; align-items:center; justify-content:space-between}
.werkbalk a{color:var(--accent); font-size:15px}
.knop-print{min-height:44px; min-width:44px; padding:0 22px; border:0; border-radius:10px; cursor:pointer;
  background:var(--accent); color:#fff; font:700 16px var(--tekst-font)}
.knop-print:hover{background:#12379a}

/* het blad */
.blad{max-width:900px; margin:0 auto 40px; background:var(--papier); padding:30px 36px 24px;
  border:1px solid var(--line); border-radius:10px;
  box-shadow:0 1px 2px rgba(13,17,23,.06), 0 14px 30px -22px rgba(13,17,23,.5)}
.blad h1, .blad h2, .blad h3{font-family:var(--kop-font); font-weight:700; letter-spacing:-.01em;
  margin:0; overflow-wrap:anywhere; text-wrap:balance; line-height:1.15}
.blad p{margin:0 0 .55em}
.blad ul, .blad ol{margin:0 0 .55em; padding-left:1.25em}
.blad li{margin:.18em 0}

.blad-kop{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.3em 1.2em; align-items:end;
  padding-bottom:.6em; border-bottom:2.5px solid var(--ink); margin-bottom:.8em}
.eyebrow{grid-column:1/-1; font:500 .72em var(--mono-font); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0}
.blad-kop h1{font-size:1.9em}
.kop-meta{margin:0; display:flex; flex-wrap:wrap; gap:.3em .5em; justify-content:flex-end; list-style:none; padding:0}
.kop-meta li{margin:0; padding:.12em .6em; border:1.2px solid var(--ink); border-radius:99px; font-size:.82em; font-weight:700; white-space:nowrap}

.blad h2{font-size:1.12em; margin:.9em 0 .35em; padding-bottom:.15em; border-bottom:1px solid var(--line)}
.blad h2:first-child{margin-top:0}
.leerdoel{font-size:1.06em; font-weight:700; margin:0 0 .5em}
.kolommen-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.6em}
.kolommen-2 > *{break-inside:avoid}

/* tijdschema */
table.schema{width:100%; border-collapse:collapse; margin:.2em 0 .5em; font-size:.95em}
.schema caption{text-align:left; font:500 .74em var(--mono-font); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-bottom:.25em}
.schema th, .schema td{border:1px solid var(--ink); padding:.3em .55em; text-align:left; vertical-align:top}
.schema thead th{background:#e3e6ec; font-weight:700}
.schema td:first-child{white-space:nowrap; font-family:var(--mono-font); font-weight:500; width:6.2em}
.schema tbody tr:nth-child(even) td{background:#f5f6f8}
.schema tr{break-inside:avoid}

/* gespreksvragen */
ol.vragen{counter-reset:v; list-style:none; padding:0}
ol.vragen li{counter-increment:v; position:relative; padding-left:1.9em; margin:.28em 0}
ol.vragen li::before{content:counter(v); position:absolute; left:0; top:.05em; width:1.4em; height:1.4em; border-radius:50%;
  border:1.5px solid var(--ink); font:700 .82em var(--kop-font); display:grid; place-items:center; line-height:1}

/* kaders: onderscheid ook zonder kleur (rand + etiket + vorm) */
.kader{position:relative; margin:.4em 0 .5em; padding:.95em .8em .45em; border-radius:6px; break-inside:avoid}
.kader > h3{position:absolute; top:-.7em; left:.7em; margin:0; padding:.12em .65em; font-size:.82em;
  letter-spacing:.06em; text-transform:uppercase; border-radius:99px}
.kader p:last-child, .kader ul:last-child{margin-bottom:.2em}
.kader.misgaat{border:2.2px solid var(--ink); background:var(--amber-zacht)}
.kader.misgaat > h3{background:var(--ink); color:#fff}
.kader.misgaat > h3::before{content:"\25B2\00a0"; font-size:.8em}   /* driehoek */
.kader.misvattingen{border:1.5px dashed var(--ink); background:var(--accent-zacht)}
.kader.misvattingen > h3{background:#fff; color:var(--ink); border:1.5px solid var(--ink)}
.kader.misvattingen > h3::before{content:"\25CF\00a0"; font-size:.8em}  /* cirkel */
.kader.tip{border:1.5px solid var(--line); background:#f5f6f8}
.kader.tip > h3{background:#fff; color:var(--ink); border:1.5px solid var(--line)}
.fout{font-weight:700}               /* misvatting zelf */
.waar::before{content:"Dus: "; font-weight:700}

.blad-voet{margin-top:.8em; padding-top:.4em; border-top:1px solid var(--line); display:flex; justify-content:space-between;
  gap:1em; font:500 .74em var(--mono-font); color:var(--muted)}

@media (max-width:640px){
  .blad{padding:20px 16px; border-radius:0; border-left:0; border-right:0}
  .kolommen-2{grid-template-columns:minmax(0,1fr)}
  .blad-kop{grid-template-columns:minmax(0,1fr)}
  .kop-meta{justify-content:flex-start}
  .schema td:first-child{white-space:normal}
}

/* ---------- print: precies 1 A4 staand ---------- */
@page{size:A4 portrait; margin:13mm 14mm}
@media print{
  html, body.handleiding{background:#fff !important; width:auto}
  body.handleiding{font-size:10.2pt; line-height:1.38; color:#000}
  .werkbalk, .knop-print, .niet-printen{display:none !important}
  .blad{max-width:none; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:#fff}
  .blad h2{break-after:avoid}
  .kolommen-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blad-kop{grid-template-columns:minmax(0,1fr) auto}
  .kop-meta{justify-content:flex-end}
  .schema td:first-child{white-space:nowrap}
  .schema thead th{background:#ddd !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .schema tbody tr:nth-child(even) td{background:#f1f1f1 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .kader.misgaat{background:#efefef !important}
  .kader.misvattingen{background:#fff !important}
  .kader, .kader > h3{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  a{color:#000; text-decoration:none}
}