/* ==========================================================================
   Huisstijl lesmateriaal — werkAI
   Eén bron voor elke presentatie, elk werkboekje en elke opdracht.

   Dit bestand stuur je nooit door. Het wordt ingebakken in het materiaal zelf,
   tussen de twee merktekens die in de head van elk bestand staan.
   Verander je hier iets, draai dan:  python huisstijl/bak-in.py

   ⚠ Schrijf de merktekens hier nooit voluit. Staan ze in dit bestand, dan
   staan ze na het inbakken twee keer in het lesmateriaal en knipt bak-in.py
   de volgende keer op de verkeerde plek. Het script weigert daarom te draaien
   als het ze hier tegenkomt.

   De hoofdkleur is het paars #6c2a8e dat Tijn in k2-hart-les1.html voor de
   titels gebruikte: dieper en duidelijker dan het webpaars van de school, en
   gemeten ook aantoonbaar beter (8,90 op wit tegen 5,29). De tweede kleur is
   de Durendael-oranje #f76b1c, opgehaald uit de stylesheet van www.2college.nl
   (--pn-color-secondary; Durendael is daar `site_3`).

   De neutralen komen ook uit de hartpresentatie en het hart-werkboekje:
   --papier #faf8fc, --paars-licht #f1e9f6, --lijn #e0d8e8 en #c9c6cf,
   --inkt #1c1a20, --grijs #6a6673. Dat is geen toeval maar het punt: die
   tinten zijn op dat paars gekozen en in print al een keer bekeken.

   De tokennamen zijn Engels, net als op Tijns portfoliosite
   (schoolAi/website/assets/css/style.css). De rollen zijn daar hetzelfde, de
   kleuren niet: dat is werk tegenover opleiding, en dat mag verschillen.

   Opbouw:
     1. Designtokens
     2. Basis en gedeelde bouwstenen
     3. .presentatie  — wat op de beamer komt
     4. .werkboekje   — wat op A4 wordt geprint
     5. .gids         — de stijlgids zelf
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGNTOKENS
   Alles wat je wilt kunnen omzetten staat hier, en alleen hier. Een andere
   huisstijl is: deze regels wijzigen en bak-in.py draaien. Verder niets.
   -------------------------------------------------------------------------- */
:root{
  /* Kleurrollen. Achter elke regel staat waar de kleur voor is en wat hij
     gemeten haalt. Het paars en de neutralen komen uit het hartmateriaal, de
     oranje van Durendael. Alles gecontroleerd met controle.py. */
  --bg:#faf8fc;             /* paginaachtergrond, het papier waar iets op ligt */
  --bg-deep:#e9e7ee;        /* dieper grijs achter losse witte bladen, alleen
                               op het scherm: zo zie je waar een vel ophoudt   */
  --surface:#ffffff;        /* een vlak dat vooraan ligt: kaart, blad, kader   */
  --surface-soft:#f1e9f6;   /* een gedempt vlak: terzijde, tabelkop, invulvak  */
  --text:#1c1a20;           /* hoofdtekst (17,2 op wit)                        */
  --muted:#6a6673;          /* bijschrift, tweederangs tekst (5,6 op wit)      */
  --primary:#6c2a8e;        /* accent 1, paars. Mag tekst dragen (8,9 op wit)  */
  --primary-dark:#55206f;   /* koppen op een licht vlak, en hover (11,5)       */
  --accent:#f76b1c;         /* accent 2, Durendael-oranje. DRAAGT NOOIT TEKST (2,97) */
  --accent-soft:#fdf0e6;    /* oranjevlak dat licht genoeg is om tekst te dragen */
  --border:#e0d8e8;         /* elke rand                                       */
  --border-strong:#c9c6cf;  /* rand die op zichzelf moet opvallen, zoals een
                               invulkader dat een leerling moet zien           */

  /* De zes punten van de design circle (V6).
     Deze namen blijven Nederlands: het zijn de namen van de punten zelf, geen
     rollen. Ze staan al identiek in les 1, les 2 en het hart-werkboekje. */
  --challenge:#3AAA35;
  --onderzoeken:#EF4123;
  --brainstormen:#F07F26;
  --creeren:#E4DC2A;
  --argumenteren:#C7D42C;
  --reflecteren:#77BC44;
  /* Het geel en het limoen van V6 zijn op een beamer en op wit onleesbaar.
     Draagt de fase tekst, gebruik dan deze twee. De ronde stip, de balk en het
     vlak mogen wel de originele kleur houden.
     Gemeten op wit: --argumenteren-diep haalt 3,11 en mag dus grote tekst
     dragen. --creeren-diep haalt 2,85 en blijft daar nét onder. BESLUIT van
     Tijn, 28-08-2026: zo laten. Het verschil is klein en op de beamer in 013
     is het leesbaar genoeg. Wil je de drempel alsnog halen, dan is #8a7f00 de
     dichtstbijzijnde tint (4,10), en dan moet k2-hart-les2.html mee. */
  --creeren-diep:#a99b00;
  --argumenteren-diep:#8d9a00;

  /* Letter. Systeemletters, geen Google Fonts: het moet offline werken. */
  --font-body:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --font-heading:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;

  /* Vorm en ruimte. In .werkboekje worden deze in millimeters overschreven. */
  --radius:12px;
  --radius-sm:8px;
  --rand:1px;               /* dikte van een gewone rand          */
  --accentrand:4px;         /* dikte van een gekleurde linkerbalk */
  --shadow:0 1px 3px rgba(28,26,32,.07), 0 6px 24px rgba(28,26,32,.07);

  /* Letterspatiëring. Koppen trekken samen, kentekens gaan uit elkaar. */
  --kop-spatie:-.015em;
  --kenteken-spatie:.11em;
}


/* --------------------------------------------------------------------------
   2. BASIS EN GEDEELDE BOUWSTENEN
   Vier bouwstenen komen overal terug. Ze zien er op een dia anders uit dan op
   papier, maar het gebaar is hetzelfde: een gekleurde linkerbalk, een wit vlak
   met een dunne rand, een gedempt terzijde, en een kenteken in klein
   hoofdletterschrift.
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

/* PRINTREGEL, GELDT OVERAL.
   Firefox en Edge printen achtergrondkleuren standaard niet. Bij de
   naamkaartjes stond print-color-adjust:exact er al en kwamen de kaartjes
   toch wit uit de printer. Ga er dus niet van uit dat deze regel je redt.
   Daarom: ELK gevuld vlak in deze huisstijl heeft ook een rand of een
   linkerbalk. Valt de vulling weg, dan staat het blok er nog steeds.
   Voeg je een vlak toe, houd je dan aan die regel. */
.werkboekje,.werkboekje *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

/* Kenteken: klein, hoofdletters, uit elkaar. Boven een blok, in een voet, of
   naast een kop. Zegt wat iets is, niet wat er staat. */
.kenteken{
  font-size:.78em;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--kenteken-spatie);
  color:var(--muted);
}
.kenteken.hoofd{color:var(--primary)}

/* Kaart: een wit vlak dat vooraan ligt. Voor iets dat op zichzelf staat. */
.kaart{
  background:var(--surface);
  border:var(--rand) solid var(--border);
  border-radius:var(--radius-sm);
  padding:1em 1.15em;
}

/* Terzijde: een gedempt vlak voor iets ernaast. Uitleg, voorbeeld, of ruimte
   om iets in te vullen. Heeft altijd een rand, zie de printregel hierboven. */
.terzijde{
  background:var(--surface-soft);
  border:var(--rand) solid var(--border);
  border-radius:var(--radius-sm);
  padding:.8em 1em;
}

/* Let op: hetzelfde als terzijde, maar met de oranje balk ervoor. Voor een
   waarschuwing of iets dat je niet mag missen. De oranje draagt hier geen
   tekst, alleen de balk. */
.let-op{
  background:var(--accent-soft);
  border:var(--rand) solid var(--border);
  border-left:var(--accentrand) solid var(--accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:.8em 1em;
}

/* Accentbalk: het gebaar dat door al het bestaande materiaal loopt. Een blok
   met een gekleurde rand aan de linkerkant. De kleur komt uit --k, zodat één
   klasse alle zes de fasen aankan:
       <div class="accentblok" style="--k:var(--onderzoeken)">
   Zonder --k is het de hoofdkleur. */
.accentblok{
  background:var(--surface-soft);
  border:var(--rand) solid var(--border);
  border-left:var(--accentrand) solid var(--k,var(--primary));
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:.8em 1em;
}

/* Stip: de ronde markering in fasekleur. Werkt ook in zwart-wit doordat er
   altijd een woord naast staat, nooit de stip alleen. */
.stip{
  display:inline-block;
  width:.7em;height:.7em;
  border-radius:50%;
  background:var(--k,var(--primary));
  flex:0 0 auto;
}


/* ==========================================================================
   3. .presentatie — WAT OP DE BEAMER KOMT
   Eén <section class="slide"> per dia. De voet leest data-fase en data-kleur
   van de actieve dia. Bediening: pijltjes, spatie, Home, End, F.
   Maten in vw en vh met clamp(): een dia moet op een beamer van 1024 breed
   net zo goed staan als op een scherm van 2560.
   ========================================================================== */
.presentatie{
  margin:0;
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow:hidden;
}

.presentatie .slide{
  display:none;
  position:absolute;
  inset:0;
  padding:5vh 7vw 9vh;
  flex-direction:column;
  justify-content:center;
}
.presentatie .slide.actief{display:flex}

/* Kop van een dia. */
.presentatie h2{
  font-family:var(--font-heading);
  font-size:clamp(24px,3.9vw,50px);
  line-height:1.15;
  letter-spacing:var(--kop-spatie);
  margin:0 0 .6em;
}
.presentatie h3{
  font-family:var(--font-heading);
  font-size:clamp(17px,2.1vw,30px);
  line-height:1.2;
  margin:0 0 .3em;
}

/* Aanloop: het zinnetje boven de startvraag. Zet de vraag in context. */
.presentatie .aanloop{
  font-size:clamp(17px,2.1vw,30px);
  color:var(--muted);
  font-weight:600;
  margin:0 0 .6em;
}

/* Startvraag: het grootste wat er op een dia staat. Eén dia, één vraag. */
.presentatie .vraag{
  font-size:clamp(30px,5.6vw,76px);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--primary);
  margin:0;
}

/* Opdracht: wat de leerling nu moet doen. Smal gehouden, dan leest het. */
.presentatie .opdracht{
  margin:1.1em 0 0;
  font-size:clamp(17px,2.2vw,30px);
  line-height:1.45;
  max-width:26em;
}

.presentatie ul{list-style:none;margin:0;padding:0}
.presentatie li{
  font-size:clamp(16px,2.3vw,32px);
  line-height:1.35;
  padding:.3em 0 .3em 1.5em;
  position:relative;
}
.presentatie li::before{
  content:"";
  position:absolute;
  left:0;top:.7em;
  width:.55em;height:.55em;
  background:var(--k,var(--primary));
  border-radius:50%;
}
.presentatie li b{color:var(--primary-dark)}

/* Raster van korte begrippen, twee kolommen, elk met de accentbalk. */
.presentatie .onderdelen{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.5em 1.5em;
  margin-top:.3em;
}
.presentatie .onderdelen div{
  font-size:clamp(18px,2.6vw,36px);
  font-weight:600;
  padding:.35em .6em;
  background:var(--surface-soft);
  border:var(--rand) solid var(--border);
  border-left:.25em solid var(--k,var(--primary));
  border-radius:0 6px 6px 0;
}

/* Spoorboekje: tijd links, wat er gebeurt rechts. */
.presentatie table{border-collapse:collapse;width:100%;margin-top:.3em}
.presentatie td{
  font-size:clamp(13px,1.75vw,25px);
  padding:.28em .7em .28em 0;
  border-bottom:var(--rand) solid var(--border);
}
.presentatie td:first-child{
  color:var(--primary);
  font-weight:700;
  white-space:nowrap;
  width:1%;
}
.presentatie td.fasecel{font-weight:700;white-space:nowrap;width:1%}

/* Drie blokken naast elkaar: drie dingen die even zwaar wegen. */
.presentatie .blokken{display:flex;gap:1.2em;margin-top:.5em;flex-wrap:wrap}
.presentatie .blok{
  flex:1 1 12em;
  background:var(--surface);
  border:var(--rand) solid var(--border);
  border-top:.3em solid var(--k,var(--primary));
  border-radius:var(--radius-sm);
  padding:1em 1.1em;
}
.presentatie .blok p{
  font-size:clamp(14px,1.7vw,23px);
  color:var(--muted);
  line-height:1.4;
  margin:0;
}

/* Let op op een dia: iets groter dan de gedeelde bouwsteen. */
.presentatie .let-op{
  margin-top:1em;
  font-size:clamp(15px,1.95vw,26px);
  line-height:1.4;
  max-width:34em;
}

/* Groot beeld. Zet het schema of de foto als background-image (data-URI) en
   geef de verhouding mee met aspect-ratio, dan schaalt hij mee zonder te
   vervormen:
       <div class="beeld" style="--beeld:url(data:...);aspect-ratio:1438/1055"> */
.presentatie .beeld{
  background-image:var(--beeld);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  display:block;
  width:min(86vw,168vh);
  max-width:100%;
  max-height:66vh;
  margin:0 auto;
}
/* Beeld links, tekst rechts. */
.presentatie .beeld-blok{display:flex;align-items:center;gap:2em;flex-wrap:wrap}
.presentatie .beeld-half{flex:1 1 24em;max-height:54vh;margin:0;width:auto}
.presentatie .naast{flex:1 1 18em;min-width:14em}

/* Lijst met een stip in fasekleur ervoor. Naast de stip staat altijd het
   woord, want in zwart-wit zeggen zes grijstinten niets. */
.presentatie .fasenlijst div{
  display:flex;
  align-items:baseline;
  gap:.6em;
  padding:.3em 0;
  font-size:clamp(14px,1.85vw,26px);
  line-height:1.3;
}
.presentatie .fasenlijst .stip{transform:translateY(-.05em)}
.presentatie .fasenlijst span.vr{color:var(--muted)}

/* De voet: waar je bent in de les, en waar je bent in de stapel. */
.presentatie .voet{
  position:fixed;
  left:0;right:0;bottom:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.1vh 7vw 2vh;
  font-size:clamp(12px,1.3vw,17px);
  color:var(--muted);
}
.presentatie .fase{
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:700;
  color:var(--primary);
  display:flex;
  align-items:center;
  gap:.5em;
}
.presentatie .fase .stip{width:.75em;height:.75em;background:currentColor}
.presentatie .knoppen{display:flex;align-items:center;gap:.6em}
.presentatie .knoppen button{
  background:none;
  border:var(--rand) solid var(--border);
  color:var(--muted);
  border-radius:5px;
  font-size:1.1em;
  line-height:1;
  padding:.25em .6em;
  cursor:pointer;
  font-family:inherit;
}
.presentatie .knoppen button:hover{border-color:var(--primary);color:var(--primary)}
.presentatie .knoppen button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.presentatie .balk{
  position:fixed;
  left:0;bottom:0;
  height:4px;
  background:var(--primary);
  transition:width .18s ease;
}


/* ==========================================================================
   4. .werkboekje — WAT OP A4 WORDT GEPRINT
   Eén <section class="pagina"> per bladzijde, dubbelzijdig geprint. Maten in
   millimeters, want een blad heeft een echte maat. De bladmaat hieronder is
   overgenomen uit het hart-werkboekje en daar op tien pagina's nagemeten.
   ========================================================================== */
@page{size:A4 portrait;margin:13mm 14mm}

.werkboekje{
  /* Op papier zijn de rondingen kleiner: 12px is op een A4 een ballon. */
  --radius:2.5mm;
  --radius-sm:1.5mm;
  --rand:.25mm;
  --accentrand:1.2mm;

  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  font-size:10.5pt;
  line-height:1.35;
  background:var(--bg-deep);   /* zie --bg-deep: zo zie je op het scherm waar een vel ophoudt */
}

.werkboekje .pagina{
  width:182mm;
  min-height:262mm;
  margin:0 auto 6mm;
  background:var(--surface);
  padding:8mm 9mm 10mm;
  position:relative;
  display:flex;
  flex-direction:column;
}

.werkboekje h1{font-family:var(--font-heading);font-size:20pt;line-height:1.1;letter-spacing:-.02em;margin:0}
.werkboekje h2{font-family:var(--font-heading);font-size:13pt;letter-spacing:-.01em;margin:0 0 2mm}
.werkboekje h3{font-family:var(--font-heading);font-size:10.5pt;margin:0 0 1.5mm}
.werkboekje p{margin:0 0 2mm}
.werkboekje .klein{font-size:9pt;color:var(--muted)}

/* Bladkop: links waar je bent in het project, rechts welk punt van de design
   circle. De streep eronder is inktzwart, dus die overleeft elke printer. */
.werkboekje .kop{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:.5mm solid var(--text);
  padding-bottom:1.5mm;
  margin-bottom:4mm;
}
.werkboekje .kop .week{font-weight:800;font-size:11pt}
.werkboekje .kop .fase{
  font-weight:800;
  font-size:9pt;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--k,var(--text));
}
.werkboekje .paginanr{
  position:absolute;
  right:9mm;bottom:5mm;
  font-size:8pt;
  color:var(--muted);
}

/* Schrijfregels. Gestippeld, 9mm hoog: dat is de regelhoogte waarop een
   tweedeklasser met een balpen normaal schrijft. */
.werkboekje .lijnen{margin:1.5mm 0 3mm}
.werkboekje .lijnen span{display:block;border-bottom:.25mm dotted var(--border-strong);height:9mm}

/* Leeg kader om in te tekenen of te schrijven. De rand is --border-strong,
   want een leerling moet zien waar hij binnen moet blijven. */
.werkboekje .vak{
  border:.25mm solid var(--border-strong);
  border-radius:var(--radius);
  min-height:30mm;
}
.werkboekje .vak.groot{min-height:62mm}

/* Aankruisvakje. Inktzwart, dus altijd zichtbaar. */
.werkboekje .hokje{
  display:inline-block;
  width:4mm;height:4mm;
  border:.35mm solid var(--text);
  border-radius:.7mm;
  vertical-align:-.6mm;
  margin-right:1.5mm;
}
/* Rondje om aan te kruisen, in fasekleur. Het woord staat er altijd naast. */
.werkboekje .bol{
  display:inline-block;
  width:4mm;height:4mm;
  border:.4mm solid var(--k,var(--text));
  border-radius:50%;
}

.werkboekje ul{list-style:none;margin:0;padding:0}
.werkboekje li{margin-bottom:1.2mm;font-size:10pt}
.werkboekje .vraagblok{margin-bottom:3.5mm}
.werkboekje .vraagblok b{font-size:10pt}

/* Gedempte vlakken op papier. Alle drie hebben een rand, want zonder
   achtergrondkleur moeten ze blijven bestaan. */
.werkboekje .terzijde,
.werkboekje .let-op,
.werkboekje .accentblok{padding:2.5mm 4mm .5mm;margin-bottom:3.5mm}
.werkboekje .terzijde .lijnen,
.werkboekje .let-op .lijnen,
.werkboekje .accentblok .lijnen{margin:1.2mm 0 1.5mm}

.werkboekje table{border-collapse:collapse;width:100%;margin-top:2mm}
.werkboekje th,.werkboekje td{
  border:.25mm solid var(--border-strong);
  padding:2mm 1.5mm;
  font-size:8.5pt;
  text-align:center;
}
.werkboekje th{background:var(--surface-soft);font-weight:700}
.werkboekje td.weekcel{text-align:left;font-weight:700;width:22mm}

/* Beoordelingsblad. Kleiner gezet, want er moet veel op één blad. */
.werkboekje table.rubriek th,
.werkboekje table.rubriek td{font-size:7.4pt;padding:1.5mm 1.4mm;text-align:left;vertical-align:top}
.werkboekje table.rubriek th{text-align:center}
.werkboekje table.rubriek td.nr{text-align:center;font-weight:700;width:6mm}
.werkboekje table.rubriek td.wat{font-weight:700;width:30mm}
.werkboekje table.rubriek td.wat em{display:block;font-style:normal;font-weight:400;color:var(--muted);font-size:6.8pt}
.werkboekje table.rubriek tr.groep td{
  background:var(--surface-soft);
  font-weight:800;
  font-size:8pt;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.werkboekje .uitslag{
  display:flex;
  justify-content:flex-end;
  align-items:baseline;
  gap:3mm;
  margin-top:4mm;
  font-size:11pt;
  font-weight:700;
}

/* Voorblad. */
.werkboekje .voorblad{align-items:center;text-align:center;justify-content:center}
.werkboekje .voorblad h1{font-size:30pt;line-height:1.05;margin-bottom:3mm}
.werkboekje .voorblad .invulvak{
  width:100%;
  border:.25mm solid var(--border-strong);
  border-radius:var(--radius);
  padding:4mm 5mm;
  text-align:left;
}
.werkboekje .voorblad .invulvak div{
  display:flex;
  align-items:baseline;
  gap:3mm;
  padding:2.5mm 0;
  font-size:10pt;
  color:var(--muted);
}
.werkboekje .voorblad .invulvak div span{flex:1;border-bottom:.25mm dotted var(--border-strong);height:6mm}

/* Beeld op papier. */
.werkboekje .plaatje{display:block;flex:0 0 auto;max-width:100%;height:auto}
.werkboekje .metplaatje{display:flex;gap:5mm;align-items:center}
.werkboekje .metplaatje > div{flex:1}
.werkboekje .bijschrift{
  font-size:8pt;
  color:var(--muted);
  text-align:center;
  margin-top:1mm;
  font-weight:700;
  letter-spacing:.04em;
}

/* Knop die alleen op het scherm bestaat. */
.werkboekje .knop{
  position:fixed;
  right:6mm;bottom:6mm;
  background:var(--primary);color:var(--surface);
  border:0;border-radius:var(--radius-sm);
  padding:2.5mm 4mm;
  font-family:inherit;font-size:9pt;cursor:pointer;
}
.werkboekje .knop:hover{background:var(--primary-dark)}

@media print{
  .werkboekje{background:var(--surface)}
  .werkboekje .knop{display:none}
  .werkboekje .pagina{
    width:auto;
    min-height:263mm;          /* vult het vel, zodat het paginanummer onderaan blijft */
    margin:0;
    padding:0 0 7mm;           /* strook onderaan voor het paginanummer */
    page-break-after:always;
  }
  .werkboekje .paginanr{right:0;bottom:0}
  .werkboekje .pagina:last-child{page-break-after:auto}
}


/* ==========================================================================
   5. .gids — DE STIJLGIDS ZELF
   De stijlgids gebruikt zijn eigen huisstijl, anders klopt hij niet.
   ========================================================================== */
.gids{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
}
.gids .binnen{max-width:1080px;margin:0 auto;padding:0 1.25rem}
.gids h1{font-family:var(--font-heading);font-size:2.2rem;line-height:1.2;letter-spacing:var(--kop-spatie);margin:0 0 .4rem}
.gids h2{font-family:var(--font-heading);font-size:1.5rem;line-height:1.25;letter-spacing:var(--kop-spatie);margin:0 0 .3rem}
.gids h3{font-family:var(--font-heading);font-size:1.1rem;margin:0 0 .3rem;color:var(--primary-dark)}
.gids p{margin:0 0 1rem}
.gids ul{margin:0 0 1rem;padding-left:1.2rem}
.gids li{margin-bottom:.35rem}

.gids .balkkop{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:1.6rem 0 1.3rem;
}
.gids .blad{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.6rem 1.8rem;
  margin-bottom:1.6rem;
}
.gids .blad > .kenteken{display:block;margin-bottom:.15rem}
.gids .wanneer{
  color:var(--muted);
  font-size:.95rem;
  margin:0 0 1.1rem;
  padding-left:.9rem;
  border-left:3px solid var(--accent);
}
.gids .toonvak{
  background:var(--bg);
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-sm);
  padding:1.2rem 1.3rem;
  margin-bottom:1rem;
}
.gids .raster{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.gids .staal{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--surface);
}
.gids .staal .kleur{height:64px;border-bottom:1px solid var(--border)}
.gids .staal .naam{padding:.55rem .7rem .7rem;font-size:.85rem;line-height:1.35}
.gids .staal code{font-family:var(--font-mono);font-size:.78rem;color:var(--muted);display:block}
.gids table{border-collapse:collapse;width:100%;font-size:.9rem}
.gids th,.gids td{border:1px solid var(--border);padding:.5rem .65rem;text-align:left;vertical-align:top}
.gids th{background:var(--surface-soft);font-weight:700}
.gids td.goed{color:var(--primary-dark);font-weight:700}
/* De 'nee' in de contrasttabel krijgt geen eigen kleur: rood en groen zijn in
   zwart-wit hetzelfde, en dat is nu juist waar deze gids over gaat. Het woord
   zegt het. */
.gids td.fout{font-weight:700}
.gids code{font-family:var(--font-mono);font-size:.88em}
.gids .knoppenbalk{
  position:sticky;top:0;z-index:5;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:.7rem 0;
  margin-bottom:1.6rem;
}
.gids .schakel{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-right:1.4rem;font-size:.92rem;font-weight:600;cursor:pointer;
}
.gids .schakel input{width:17px;height:17px;accent-color:var(--primary)}
.gids .hint{font-size:.86rem;color:var(--muted)}

/* De twee schakelaars van de stijlgids. Ze doen na wat een printer doet:
   alles grijs, of alle vullingen weg. Wat dan verdwijnt, is fout gebouwd. */
.gids.zwartwit .binnen{filter:grayscale(1)}
.gids.geenvulling .binnen *:not(.kleur){background-color:transparent!important}
.gids.geenvulling .binnen *{background-image:none!important}