/* ---------------------------------------------------------------------------
   AI-register — visuele taal

   Uitgangspunt: dit is een naslagwerk over wetgeving, geen dashboard. De
   vormgeving leunt op een document: warm papier, een schreefletter voor de
   koppen, rustige kleur, en veel wit. Kleur is semantisch — ze duidt uitsluitend
   risiconiveau aan en wordt nergens decoratief gebruikt.
--------------------------------------------------------------------------- */

:root{
  /* papier en inkt */
  --papier:#f5f2ec;
  --vlak:#fffdfa;
  --vlak-2:#faf7f1;
  --inkt:#1a1613;
  --inkt-zacht:#6d655c;
  --lijn:#e4ddd1;
  --lijn-sterk:#d3c9b8;

  /* accenten */
  --goud:#b08927;          /* actieve staat, markeringen — spaarzaam */
  --petrol:#1b4a5a;        /* verwijzingen */

  /* risiconiveaus */
  --verboden:#8a1c2b;      --verboden-vlak:#f9ecee;
  --hoog:#9a5412;          --hoog-vlak:#fbf1e4;
  --transparantie:#1b4a5a; --transparantie-vlak:#e9f0f2;
  --minimaal:#2f6b4a;      --minimaal-vlak:#eaf2ed;
  --onbekend:#7d746a;      --onbekend-vlak:#f0ece5;

  --schreef:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",
            Georgia,"Times New Roman",serif;
  --schreefloos:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
            "Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font:16px/1.65 var(--schreefloos);
  /* Nederlandse en Duitse samenstellingen worden lang: één woord als
     'Gegevensbeschermingseffectbeoordeling' past op een smal scherm niet in
     zijn cel en duwde de hele pagina breder. Alleen wat anders zou uitsteken
     wordt afgebroken; gewone regelafbreking verandert niet. */
  overflow-wrap:break-word;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
}
main{max-width:58rem;margin:0 auto;padding:2.5rem 1.5rem 5rem}

/* --- typografie ---------------------------------------------------------- */

h1{
  font:400 2.35rem/1.15 var(--schreef);
  margin:0 0 .5rem;letter-spacing:-.015em;
}
h2{
  font:400 1.4rem/1.3 var(--schreef);
  margin:3rem 0 1rem;letter-spacing:-.01em;
  padding-bottom:.5rem;border-bottom:1px solid var(--lijn-sterk);
}
h3{font:600 .98rem/1.4 var(--schreefloos);margin:0 0 .35rem;letter-spacing:-.005em}
p{margin:.6rem 0}
a{color:var(--petrol);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--inkt)}

.lead{
  font:400 1.12rem/1.6 var(--schreef);
  color:var(--inkt-zacht);margin:0 0 2rem;max-width:44rem;
}
.klein{font-size:.855rem;line-height:1.55;color:var(--inkt-zacht)}
.nuance{
  border-left:2px solid var(--lijn-sterk);padding-left:.9rem;
  color:var(--inkt-zacht);
}
.ontbreekt{color:var(--hoog);font-style:italic}
.leeg{
  color:var(--inkt-zacht);padding:3rem 1.5rem;text-align:center;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:3px;
  font:400 1.05rem/1.5 var(--schreef);
}
.goed{color:var(--minimaal)}

/* --- hoofding ------------------------------------------------------------ */

.kop{
  background:var(--vlak);border-bottom:1px solid var(--lijn-sterk);
  padding:0 1.5rem;display:flex;gap:2.5rem;align-items:stretch;flex-wrap:wrap;
}
.merk{
  font:400 1.12rem/1 var(--schreef);color:var(--inkt);text-decoration:none;
  display:flex;align-items:center;gap:.5rem;padding:1rem 0;letter-spacing:-.01em;
  white-space:nowrap;
}
.merk::before{
  content:"";width:.5rem;height:.5rem;background:var(--goud);
  border-radius:50%;flex:none;
}
/* De navigatie zit in een balk zodat de schuifaanduiding aan die balk kan
   hangen en niet met de inhoud meeschuift. Op een breed scherm genereert de
   balk geen eigen vak, zodat daar niets verandert. */
.navbalk{display:contents}
.navpijl{display:none}
.kop nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.kop nav a{
  color:var(--inkt-zacht);text-decoration:none;font-size:.9rem;
  display:flex;align-items:center;padding:1rem 0;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.kop nav a:hover{color:var(--inkt)}
.kop nav a.actief{color:var(--inkt);border-bottom-color:var(--goud);font-weight:600}

.titelrij{
  /* Op de basislijn, niet op de bovenkant: de knop hing anders boven de titel
     omdat de regelhoogte van de h1 hem naar beneden duwt en de knop niet. */
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:.5rem;
}

/* --- verdeelbalk --------------------------------------------------------- */

.verdeling{margin:0 0 2.5rem}
.verdeelbalk{
  display:flex;height:.6rem;border-radius:2px;overflow:hidden;
  background:var(--lijn);margin-bottom:.9rem;
}
.verdeelbalk span{display:block;height:100%}
.verdeelbalk .n-verboden{background:var(--verboden)}
.verdeelbalk .n-hoog{background:var(--hoog)}
.verdeelbalk .n-transparantie{background:var(--transparantie)}
.verdeelbalk .n-minimaal{background:var(--minimaal)}
.verdeelbalk .n-onbekend{background:var(--onbekend)}

.legende{display:flex;gap:1.5rem;flex-wrap:wrap}
.legende a{
  text-decoration:none;color:var(--inkt);display:flex;
  align-items:baseline;gap:.45rem;
}
.legende a:hover .naam{color:var(--inkt);text-decoration:underline}
.legende .stip{
  width:.5rem;height:.5rem;border-radius:50%;flex:none;
  transform:translateY(-1px);
}
.legende .aantal{
  font:400 1.05rem/1 var(--schreef);font-variant-numeric:tabular-nums;
}
.legende .naam{font-size:.85rem;color:var(--inkt-zacht)}
.stip.n-verboden{background:var(--verboden)}
.stip.n-hoog{background:var(--hoog)}
.stip.n-transparantie{background:var(--transparantie)}
.stip.n-minimaal{background:var(--minimaal)}
.stip.n-onbekend{background:var(--onbekend)}

/* --- aandachtspunten ----------------------------------------------------- */

.hiaat{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:3px;
  padding:1rem 1.15rem;margin-bottom:.6rem;position:relative;
  padding-left:1.6rem;
}
.hiaat::before{
  content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;
  background:var(--onbekend);border-radius:3px 0 0 3px;
}
.hiaat.e-kritiek::before{background:var(--verboden)}
.hiaat.e-hoog::before{background:var(--hoog)}
.hiaat.e-middel::before{background:var(--transparantie)}
.hiaat h3{margin-bottom:.25rem}
.hiaat p{margin:.25rem 0;font-size:.9rem;color:var(--inkt-zacht)}

/* --- tijdlijn ------------------------------------------------------------ */
/* Verticale chronologie: horizontaal liep de lijn over bij acht punten. */

.tijdlijn{position:relative;margin:0;padding-left:1.5rem}
.tijdlijn::before{
  content:"";position:absolute;left:.25rem;top:.45rem;bottom:1.4rem;
  width:1px;background:var(--lijn-sterk);
}
.tijdpunt{
  display:grid;grid-template-columns:7.5rem 1fr;gap:0 1.25rem;
  padding-bottom:1.4rem;position:relative;
}
.tijdpunt::before{
  content:"";position:absolute;left:-1.5rem;top:.3rem;width:.55rem;height:.55rem;
  border-radius:50%;background:var(--vlak);border:1.5px solid var(--lijn-sterk);
}
.tijdpunt.verleden::before{background:var(--inkt-zacht);border-color:var(--inkt-zacht)}
.tijdpunt.nu::before{
  background:var(--goud);border-color:var(--goud);
  box-shadow:0 0 0 3px rgba(176,137,39,.22);
}
.tijdpunt .datum{
  font:600 .74rem/1.75 var(--schreefloos);text-transform:uppercase;
  letter-spacing:.055em;color:var(--inkt-zacht);
}
.tijdpunt .titel{font:400 1.02rem/1.45 var(--schreef)}
.tijdpunt .detail{
  grid-column:2;font-size:.84rem;line-height:1.5;color:var(--inkt-zacht);
  margin-top:.1rem;max-width:38rem;
}
.tijdpunt.toekomst .titel{color:var(--inkt-zacht)}
.tijdpunt.nu{padding-bottom:1.4rem;align-items:center}
.tijdpunt.nu .datum{color:var(--goud)}
.tijdpunt.nu::after{
  content:"";height:1px;background:linear-gradient(to right,
    rgba(176,137,39,.55),rgba(176,137,39,0));
}

/* --- risicoladder -------------------------------------------------------- */

.ladder{
  display:flex;flex-direction:column;gap:0;margin:0;
  border:1px solid var(--lijn);border-radius:3px;overflow:hidden;
  background:var(--vlak);
}
.sport{
  display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;
  border-top:1px solid var(--lijn);font-size:.9rem;color:var(--inkt-zacht);
}
.sport:first-child{border-top:none}
.sport .merkteken{
  width:.55rem;height:.55rem;border-radius:50%;flex:none;
  background:var(--lijn-sterk);
}
.sport .grond{font-size:.8rem;margin-left:auto;text-align:right;opacity:.75}
.sport.actief{
  background:var(--vlak-2);color:var(--inkt);font-weight:600;
  box-shadow:inset 3px 0 0 currentColor;
}
.sport.actief.n-verboden{color:var(--verboden)}
.sport.actief.n-hoog{color:var(--hoog)}
.sport.actief.n-transparantie{color:var(--transparantie)}
.sport.actief.n-minimaal{color:var(--minimaal)}
.sport.actief .merkteken{background:currentColor}

/* --- uitspraak (systeemdetail) ------------------------------------------- */

.uitspraak{
  border:1px solid var(--lijn-sterk);border-radius:3px;background:var(--vlak);
  padding:1.6rem 1.75rem;margin:0 0 1.75rem;position:relative;overflow:hidden;
}
.uitspraak::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--onbekend);
}
.uitspraak.n-verboden::before{background:var(--verboden)}
.uitspraak.n-hoog::before{background:var(--hoog)}
.uitspraak.n-transparantie::before{background:var(--transparantie)}
.uitspraak.n-minimaal::before{background:var(--minimaal)}
.uitspraak .etiket{
  font:600 .72rem/1 var(--schreefloos);text-transform:uppercase;
  letter-spacing:.09em;color:var(--inkt-zacht);
}
.uitspraak .niveau{
  font:400 1.95rem/1.15 var(--schreef);margin:.4rem 0 .5rem;
  letter-spacing:-.015em;
}
.uitspraak.n-verboden .niveau{color:var(--verboden)}
.uitspraak.n-hoog .niveau{color:var(--hoog)}
.uitspraak.n-transparantie .niveau{color:var(--transparantie)}
.uitspraak.n-minimaal .niveau{color:var(--minimaal)}
.uitspraak .samenvatting{color:var(--inkt-zacht);margin:0;max-width:40rem}
.uitspraak .grondslag{
  margin-top:1.15rem;padding-top:.95rem;border-top:1px solid var(--lijn);
}
.uitspraak .grondslag .etiket{display:block;margin-bottom:.4rem}
.uitspraak .grondslag ul{margin:0;padding-left:1.1rem;max-width:44rem}
.uitspraak .grondslag li{
  margin:.3rem 0;font-size:.92rem;line-height:1.55;
}
.uitspraak .grondslag li::marker{color:var(--lijn-sterk)}
.uitspraak .termijn{
  margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--lijn);
  display:flex;gap:.55rem;align-items:baseline;flex-wrap:wrap;
}
.uitspraak .termijn .wanneer{font:400 1.05rem/1 var(--schreef)}

/* --- kaders en verplichtingen -------------------------------------------- */

.kader{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:3px;
  padding:1.1rem 1.25rem;margin-bottom:.6rem;
}
.kader h3+.klein{margin-top:-.15rem}

.plicht{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:3px;
  padding:1.1rem 1.25rem;margin-bottom:.6rem;
}
.plicht .opschrift{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-bottom:.35rem;flex-wrap:wrap;
}
.plicht .wetsartikel{
  font:600 .72rem/1.4 var(--schreefloos);text-transform:uppercase;
  letter-spacing:.075em;color:var(--goud);
}
.plicht .wanneer{
  font-size:.78rem;color:var(--inkt-zacht);
}
.plicht h3{font-size:1.02rem;font-weight:600}

/* --- pillen -------------------------------------------------------------- */

.pil{
  display:inline-block;padding:.16rem .6rem;border-radius:2px;
  font:600 .76rem/1.5 var(--schreefloos);letter-spacing:.015em;
  background:var(--onbekend-vlak);color:var(--onbekend);white-space:nowrap;
}
.pil.n-verboden{background:var(--verboden-vlak);color:var(--verboden)}
.pil.n-hoog{background:var(--hoog-vlak);color:var(--hoog)}
.pil.n-transparantie{background:var(--transparantie-vlak);color:var(--transparantie)}
.pil.n-minimaal{background:var(--minimaal-vlak);color:var(--minimaal)}
.pil-nu{background:var(--minimaal-vlak);color:var(--minimaal)}
.pil-later{background:var(--onbekend-vlak);color:var(--onbekend)}

/* --- tabellen ------------------------------------------------------------ */

table{
  width:100%;border-collapse:collapse;background:var(--vlak);
  border:1px solid var(--lijn);border-radius:3px;font-size:.92rem;
}
th{
  text-align:left;font:600 .71rem/1.4 var(--schreefloos);text-transform:uppercase;
  letter-spacing:.075em;color:var(--inkt-zacht);background:var(--vlak-2);
  padding:.6rem .85rem;border-bottom:1px solid var(--lijn-sterk);
}
td{padding:.7rem .85rem;border-top:1px solid var(--lijn);vertical-align:top}
tbody tr:hover{background:var(--vlak-2)}
td a{font-weight:600;text-decoration:none}
td a:hover{text-decoration:underline}
.tabelomhulsel{overflow-x:auto}

/* Op een telefoon worden tabellen een lijst met kaarten. Zeven kolommen in
   355px betekent horizontaal scrollen naar het risiconiveau — juist de kolom
   waarvoor men de lijst opent. Elke cel krijgt haar kolomnaam ervoor, uit
   data-kop; die wordt bij het tekenen uit de koprij afgeleid.

   Alleen op het scherm: op papier is er breedte genoeg en is een tabel de
   juiste vorm — het rapport wordt afgedrukt om te tonen. */
@media screen and (max-width:640px){
  .tabelomhulsel{overflow-x:visible}
  .tabelomhulsel table,
  .tabelomhulsel tbody,
  .tabelomhulsel tr,
  .tabelomhulsel td{display:block}
  /* De selector draagt .laaginhoud mee omdat .laaginhoud table verderop
     in dit bestand een min-width van 32rem zet; met gelijke specificiteit
     zou die regel winnen en blijft de tabel te breed. */
  .tabelomhulsel table,
  .laaginhoud .tabelomhulsel table{border:0;background:none;min-width:0;font-size:.95rem}
  .tabelomhulsel tr:first-child{display:none}          /* de kolomkoppen */
  .tabelomhulsel tr{
    background:var(--vlak);border:1px solid var(--lijn);border-radius:3px;
    padding:.85rem 1rem .9rem;margin-bottom:.6rem;position:relative;
  }
  .tabelomhulsel td{border:0;padding:.18rem 0}
  .tabelomhulsel td[data-kop]::before{
    content:attr(data-kop);display:block;
    font:600 .66rem/1.5 var(--schreefloos);text-transform:uppercase;
    letter-spacing:.08em;color:var(--inkt-zacht);
  }
  /* De eerste cel is de kop van de kaart en heeft geen etiket nodig. */
  .tabelomhulsel td[data-eerste]::before{display:none}
  .tabelomhulsel td[data-eerste]{font-size:1.02rem;margin-bottom:.35rem}
  .tabelomhulsel td[data-eerste] .klein{font-size:.84rem}
  /* Het vinkje van de systeemlijst hangt linksboven in de kaart. */
  .systeemtabel tr{padding-left:2.6rem}
  .systeemtabel td.vinkkolom{
    position:absolute;top:.85rem;left:.9rem;width:auto;padding:0;
  }
}
}

/* --- formulieren --------------------------------------------------------- */

form.stapel{
  display:flex;flex-direction:column;gap:1rem;background:var(--vlak);
  border:1px solid var(--lijn);border-radius:3px;padding:1.4rem 1.5rem;
}
form.stapel label:not(.vink):not(.toepassing),
.rij label:not(.vink):not(.toepassing){
  display:flex;flex-direction:column;gap:.3rem;flex:1;
  font:600 .81rem/1.4 var(--schreefloos);
  text-transform:uppercase;letter-spacing:.05em;color:var(--inkt-zacht);
}
.rij{display:flex;gap:1rem;flex-wrap:wrap}
input,select,textarea{
  font:400 .95rem/1.5 var(--schreefloos);padding:.55rem .7rem;
  border:1px solid var(--lijn-sterk);border-radius:2px;background:#fff;
  color:var(--inkt);width:100%;text-transform:none;letter-spacing:0;
}
textarea{font-family:var(--schreefloos);resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--goud);
  box-shadow:0 0 0 3px rgba(176,137,39,.16);
}
input::placeholder,textarea::placeholder{color:#a79e92}
form.stapel label.vink,.rij label.vink,label.vink{
  flex-direction:row;align-items:flex-start;gap:.6rem;text-transform:none;
  letter-spacing:0;font-weight:400;font-size:.92rem;color:var(--inkt);
}
form.stapel label.vink input,label.vink input{
  width:auto;margin-top:.25rem;accent-color:var(--inkt);
}

button{
  font:600 .88rem/1 var(--schreefloos);padding:.68rem 1.35rem;border-radius:2px;
  border:1px solid var(--inkt);background:var(--inkt);color:var(--papier);
  cursor:pointer;letter-spacing:.01em;
}
/* align-self hoort niet in de basisregel: hij is alleen nodig in de
   formulieren die als kolom staan, waar een knop anders over de volle breedte
   uitrekt. In een rij haalde hij de knop uit de uitlijning van die rij — de
   titelrij, de filterbalk en de melding in de kop stonden er scheef door. */
form.stapel > button{align-self:flex-start}
button:hover{background:#000;border-color:#000}
button:focus-visible{outline:2px solid var(--goud);outline-offset:2px}
.knop{
  display:inline-block;padding:.62rem 1.25rem;border-radius:2px;
  background:var(--inkt);color:var(--papier);text-decoration:none;
  font:600 .88rem/1.2 var(--schreefloos);border:1px solid var(--inkt);
  cursor:pointer;white-space:nowrap;
}
.knop:hover{background:#000;color:var(--papier)}
.knop.stil{background:transparent;color:var(--inkt);border-color:var(--lijn-sterk)}
.knop.stil:hover{background:var(--vlak-2);color:var(--inkt)}
button.mini{
  padding:.15rem .5rem;background:none;border:none;color:var(--inkt-zacht);
  font-size:1.05rem;line-height:1;
}
button.mini:hover{color:var(--verboden);background:none}
button.gevaarlijk{
  background:none;color:var(--verboden);border-color:var(--verboden);
}
button.gevaarlijk:hover{background:var(--verboden);color:var(--papier)}
.verwijder{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--lijn)}

form.filter{display:flex;gap:.6rem;align-items:center;margin:0 0 1.25rem;flex-wrap:wrap}
form.filter input[type=search]{flex:1;min-width:15rem}
form.filter select,form.filter button{width:auto}
form.filter button{padding:.55rem 1rem}

/* --- wizard -------------------------------------------------------------- */

.wizard section{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:3px;
  padding:1.4rem 1.5rem;margin-bottom:1rem;position:relative;
}
.wizard section.gevaar{border-color:#e6c4c9;background:#fffbfb}
.wizard section.gevaar .stapnummer{background:var(--verboden)}
.wizard h2{
  margin:0 0 .3rem;border:none;padding:0;font-size:1.22rem;
  display:flex;align-items:baseline;gap:.7rem;
}
.stapnummer{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:1.55rem;height:1.55rem;border-radius:50%;background:var(--inkt);
  color:var(--papier);font:600 .8rem/1 var(--schreefloos);
  transform:translateY(-.1rem);
}
.wizard section>.klein{margin:0 0 .5rem}
label.keuze{
  display:flex;gap:.75rem;align-items:flex-start;padding:.7rem 0;
  border-top:1px solid var(--lijn);cursor:pointer;
}
label.keuze:hover{color:var(--inkt)}
label.keuze input{width:auto;margin-top:.35rem;flex:none;accent-color:var(--inkt)}
.waarschuwing{
  background:var(--hoog-vlak);border-left:3px solid var(--hoog);
  padding:.75rem .95rem;font-size:.88rem;border-radius:0 2px 2px 0;
  color:#7a4210;
}
.wizard>button{padding:.78rem 1.7rem;font-size:.92rem}
.afsluiting{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}

/* --- sjablonen ----------------------------------------------------------- */

.sjabloonkeuze{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));
  gap:.6rem;margin-bottom:2rem;
}
.kaart{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:3px;
  padding:.95rem 1.05rem;text-decoration:none;color:var(--inkt);display:flex;
  flex-direction:column;gap:.35rem;
}
.kaart:hover{border-color:var(--lijn-sterk);background:var(--vlak-2)}
.kaart strong{font:400 1.02rem/1.3 var(--schreef);letter-spacing:-.005em}
.kaart.gekozen{border-color:var(--inkt);box-shadow:inset 0 0 0 1px var(--inkt)}
pre.uitvoer{
  background:var(--vlak);border:1px solid var(--lijn-sterk);border-radius:3px;
  padding:1.35rem 1.5rem;white-space:pre-wrap;
  font:15px/1.7 var(--schreef);overflow-x:auto;margin:0 0 .85rem;
}

/* --- voettekst ----------------------------------------------------------- */

.voet{
  max-width:58rem;margin:0 auto;padding:1.75rem 1.5rem 4rem;
  border-top:1px solid var(--lijn-sterk);color:var(--inkt-zacht);
  font-size:.83rem;line-height:1.6;
}
.voet p{margin:.4rem 0;max-width:46rem}

/* --- afdrukken ----------------------------------------------------------- */

@media print{
  .kop,.voet,.knop,button,form.filter{display:none}
  main{max-width:none;padding:0}
  body{background:#fff;font-size:11pt}
  .kader,.plicht,table,.uitspraak{break-inside:avoid;border-color:#bbb}
  h2{break-after:avoid}
  a{color:inherit;text-decoration:none}
}

/* --- smal scherm --------------------------------------------------------- */

@media (max-width:640px){
  main{padding:1.75rem 1.1rem 3.5rem}
  h1{font-size:1.85rem}
  .rij{flex-direction:column;gap:1rem}
  /* .koprechts is hier display:contents, dus merk, taalkiezer en
     Excel-knop staan los in deze balk. Zonder kolomafstand raken ze
     elkaar; de rijen scheiden zichzelf al. */
  .kop{column-gap:.7rem;row-gap:0;padding:0 1.1rem}
  .kop nav{gap:1.1rem;overflow-x:auto;padding-bottom:0}
  .kop nav a{padding:.6rem 0 .75rem;font-size:.86rem}
  .merk{padding:.85rem 0 .35rem}
  .uitspraak{padding:1.25rem 1.35rem}
  .uitspraak .niveau{font-size:1.6rem}
  .tijdpunt{grid-template-columns:1fr;gap:0}
  .tijdpunt .detail{grid-column:1}
  .legende{gap:1rem}
}

/* --- introductie: gelaagd overzicht -------------------------------------- */

.inhoudsopgave{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:3px;
  padding:1.1rem 1.35rem;margin:0 0 2.5rem;
}
.inhoudsopgave .etiket{
  display:block;font:600 .72rem/1 var(--schreefloos);text-transform:uppercase;
  letter-spacing:.09em;color:var(--inkt-zacht);margin-bottom:.6rem;
}
.inhoudsopgave ol{
  margin:0;padding:0;list-style:none;counter-reset:toc;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:.3rem 1.5rem;
}
.inhoudsopgave li{counter-increment:toc;display:flex;gap:.6rem;align-items:baseline}
.inhoudsopgave li::before{
  content:counter(toc);font:600 .74rem/1.6 var(--schreefloos);
  color:var(--goud);flex:none;min-width:.9rem;
}
.inhoudsopgave a{text-decoration:none;font-size:.92rem}
.inhoudsopgave a:hover{text-decoration:underline}

.laag{
  display:grid;grid-template-columns:3.5rem 1fr;gap:0 1.5rem;
  padding:2.25rem 0;border-top:1px solid var(--lijn-sterk);
  scroll-margin-top:1.5rem;
}
.laag:first-child{border-top:none;padding-top:.5rem}
.laagnr{
  font:400 2.6rem/1 var(--schreef);color:var(--lijn-sterk);
  text-align:right;letter-spacing:-.03em;
}
/* grid-items krimpen standaard niet onder hun min-content breedte; zonder
   min-width:0 duwt een brede tabel de hele kolom uit het scherm. */
.laag>*{min-width:0}
.laaginhoud h2{
  margin:0 0 .5rem;border:none;padding:0;font-size:1.5rem;
}
.laaginhoud .kern{
  font:400 1.08rem/1.55 var(--schreef);color:var(--inkt);
  margin:0 0 1.1rem;max-width:42rem;
}
.laaginhoud>p{max-width:44rem}
.blokkop{
  margin:1.5rem 0 .5rem;font:600 .74rem/1.4 var(--schreefloos);
  text-transform:uppercase;letter-spacing:.075em;color:var(--inkt-zacht);
}
ul.opsomming{margin:.5rem 0 1rem;padding-left:1.1rem;max-width:44rem}
ul.opsomming li{margin:.45rem 0;line-height:1.6}
ul.opsomming li::marker{color:var(--lijn-sterk)}
ol.stappen{margin:.6rem 0 1rem;padding-left:1.3rem;max-width:44rem;counter-reset:st}
ol.stappen li{margin:.7rem 0;line-height:1.6;padding-left:.2rem}
ol.stappen li::marker{font-weight:600;color:var(--goud)}

.verdieping{
  border:1px solid var(--lijn);border-radius:3px;background:var(--vlak);
  margin:.75rem 0 1rem;max-width:46rem;
}
.verdieping summary{
  cursor:pointer;padding:.7rem 1rem;font:600 .9rem/1.4 var(--schreefloos);
  list-style:none;display:flex;align-items:center;gap:.6rem;
}
.verdieping summary::-webkit-details-marker{display:none}
.verdieping summary::before{
  content:"+";font:400 1.05rem/1 var(--mono);color:var(--goud);flex:none;
}
.verdieping[open] summary::before{content:"\2212"}
.verdieping[open] summary{border-bottom:1px solid var(--lijn)}
.verdieping summary:hover{background:var(--vlak-2)}
.verdiepinginhoud{padding:.85rem 1rem 1rem}
.verdiepinginhoud p{margin:0 0 .5rem}
.verdiepinginhoud ul.opsomming{margin:.25rem 0 0}

.laaginhoud .tabelomhulsel{margin:.75rem 0 1rem}
.laaginhoud table{font-size:.89rem;min-width:32rem}
.vervolg{margin-top:1.5rem}

@media (max-width:640px){
  .laag{grid-template-columns:1fr;gap:0}
  .laagnr{text-align:left;font-size:1.8rem;margin-bottom:.2rem}
  .inhoudsopgave ol{grid-template-columns:1fr}
}

/* --- dashboardpanelen ---------------------------------------------------- */

.paneelrij{
  display:grid;grid-template-columns:1.45fr 1fr;gap:.75rem;margin:0 0 .5rem;
}
.paneel{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:3px;
  padding:1.2rem 1.35rem;min-width:0;
}
.paneelkop{
  margin:0 0 .15rem;padding:0;border:none;
  font:600 .74rem/1.4 var(--schreefloos);text-transform:uppercase;
  letter-spacing:.075em;color:var(--inkt-zacht);
}
.paneel>.klein:first-of-type{margin-bottom:1rem}

.meter{
  display:block;text-decoration:none;color:var(--inkt);
  padding:.55rem 0;border-top:1px solid var(--lijn);
}
.meter:first-of-type{border-top:none}
.meterkop{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.meterlabel{font-size:.9rem}
.metercijfer{
  font:400 .95rem/1 var(--schreef);font-variant-numeric:tabular-nums;
  color:var(--inkt-zacht);
}
.meter.af .metercijfer{color:var(--minimaal)}
.meterbalk{
  display:block;height:3px;background:var(--lijn);border-radius:2px;
  margin-top:.4rem;overflow:hidden;
}
.meterbalk span{display:block;height:100%;background:var(--inkt-zacht)}
.meter.af .meterbalk span{background:var(--minimaal)}
.meterhint{display:block;margin-top:.3rem}
.meter:hover .meterlabel{text-decoration:underline}

.aftelling{display:flex;align-items:baseline;gap:.45rem;margin:.35rem 0 .2rem}
.aftelling .dagen{
  font:400 2.6rem/1 var(--schreef);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.aftelling .eenheid{font-size:.9rem;color:var(--inkt-zacht)}
.termijntitel{font:400 1.05rem/1.35 var(--schreef);margin:.2rem 0 .3rem}

/* --- actielijst ---------------------------------------------------------- */

ul.acties{list-style:none;margin:0;padding:0}
.actie{
  display:grid;grid-template-columns:auto 1fr;gap:.15rem .85rem;
  align-items:baseline;background:var(--vlak);border:1px solid var(--lijn);
  border-radius:3px;padding:.75rem 1rem;margin-bottom:.45rem;
  border-left:3px solid var(--onbekend);
}
.actie.e-kritiek{border-left-color:var(--verboden)}
.actie.e-hoog{border-left-color:var(--hoog)}
.actie.e-middel{border-left-color:var(--transparantie)}
.actiewat{font-weight:600;text-decoration:none;font-size:.95rem;white-space:nowrap}
.actiewat:hover{text-decoration:underline}
.actiesysteem{color:var(--inkt-zacht);font-size:.92rem;min-width:0}
.actiewaarom{grid-column:2}
@media (max-width:640px){
  .actie{grid-template-columns:1fr}
  .actiewaarom{grid-column:1}
  .actiewat{white-space:normal}
}

ul.activiteit{list-style:none;margin:0;padding:0;font-size:.9rem}
ul.activiteit li{
  display:flex;gap:1rem;padding:.4rem 0;border-top:1px solid var(--lijn);
}
ul.activiteit li:first-child{border-top:none}
ul.activiteit .tijd{flex:none;min-width:5.5rem;font-variant-numeric:tabular-nums}

/* --- onboarding ---------------------------------------------------------- */

.stappenbalk{
  display:flex;list-style:none;margin:0 0 2.5rem;padding:0;gap:.35rem;
  flex-wrap:wrap;counter-reset:none;
}
.stappenbalk li{
  display:flex;align-items:center;gap:.5rem;flex:1 1 8rem;min-width:0;
  padding:.5rem .35rem .6rem 0;border-bottom:2px solid var(--lijn);
  font-size:.84rem;color:var(--inkt-zacht);
}
.stappenbalk .bol{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:1.45rem;height:1.45rem;border-radius:50%;
  border:1px solid var(--lijn-sterk);background:var(--vlak);
  font:600 .74rem/1 var(--schreefloos);
}
.stappenbalk .naam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stappenbalk li.af{border-bottom-color:var(--inkt-zacht);color:var(--inkt)}
.stappenbalk li.af .bol{
  background:var(--inkt-zacht);border-color:var(--inkt-zacht);color:var(--papier);
}
.stappenbalk li.bezig{border-bottom-color:var(--goud);color:var(--inkt);font-weight:600}
.stappenbalk li.bezig .bol{background:var(--goud);border-color:var(--goud);color:#fff}

.toepassingen{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.4rem;
}
label.toepassing{
  display:flex;gap:.65rem;align-items:flex-start;padding:.75rem .85rem;
  border:1px solid var(--lijn);border-radius:3px;cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:400;
  background:var(--vlak-2);
}
label.toepassing:hover{border-color:var(--lijn-sterk)}
label.toepassing input{width:auto;margin-top:.25rem;flex:none;accent-color:var(--inkt)}
label.toepassing span{display:flex;flex-direction:column;gap:.15rem;min-width:0}
label.toepassing strong{font-size:.92rem;font-weight:600}
label.toepassing.reeds{opacity:.55;cursor:default}
.reedsmelding{color:var(--minimaal)}

button.tekstknop{
  background:none;border:none;color:var(--inkt-zacht);padding:.6rem .4rem;
  font-weight:400;font-size:.85rem;text-decoration:underline;
}
button.tekstknop:hover{background:none;color:var(--inkt)}

@media (max-width:760px){
  .paneelrij{grid-template-columns:1fr}
}

/* --- demodatabalk -------------------------------------------------------- */

.opslagbalk{
  background:#fdecec;border-bottom:1px solid #e9b4b4;
  padding:.6rem 1.5rem;display:flex;gap:1rem;align-items:center;
  justify-content:space-between;flex-wrap:wrap;font-size:.87rem;color:#8a1f1f;
}
.opslagbalk .mini-knop{border-color:#c25b5b;color:#8a1f1f;text-decoration:none}
.opslagbalk .mini-knop:hover{background:#8a1f1f;border-color:#8a1f1f;color:#fdecec}

.demobalk{
  background:#fdf6e7;border-bottom:1px solid #e8d5a8;
  padding:.6rem 1.5rem;display:flex;gap:1rem;align-items:center;
  justify-content:space-between;flex-wrap:wrap;font-size:.87rem;color:#7a4210;
}
.demobalk form{margin:0}
.mini-knop{
  background:none;border:1px solid #c79a4a;color:#7a4210;
  padding:.3rem .8rem;font-size:.82rem;border-radius:2px;
}
.mini-knop:hover{background:#7a4210;border-color:#7a4210;color:#fdf6e7}
.demo-aanbod{margin-top:2rem}
.demo-aanbod form{margin-top:.75rem}
code{
  font:.9em/1.4 var(--mono);background:var(--vlak-2);
  padding:.08em .35em;border-radius:2px;border:1px solid var(--lijn);
}

/* --- kopie maken en terugzetten ------------------------------------------ */

.importknop{
  display:inline-block;padding:.62rem 1.25rem;border-radius:2px;
  background:transparent;color:var(--inkt);border:1px solid var(--lijn-sterk);
  font:600 .88rem/1.2 var(--schreefloos);cursor:pointer;
  text-transform:none;letter-spacing:0;
}
/* Knoppen naast elkaar: als rij, niet als losse inline-blokken. Met een
   margin-left op de tweede knop sprong die bij het afbreken naar rechts en
   stond hij niet meer onder de eerste. */
.knoprij{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0}
@media (max-width:420px){
  /* Op de smalste schermen is naast elkaar te krap: dan onder elkaar, even
     breed, zodat ze één blok vormen in plaats van een trapje. */
  .knoprij{flex-direction:column;align-items:stretch}
  .knoprij>.knop,.knoprij>.importknop{text-align:center}
}
.importknop:hover{background:var(--vlak-2)}
#opslagstatus{margin-top:.75rem}

/* --- terug in de stappenbalk --------------------------------------------- */

.stappenbalk a{
  display:flex;align-items:center;gap:.5rem;min-width:0;
  text-decoration:none;color:inherit;
}
.stappenbalk li.af a:hover .naam{text-decoration:underline}
.stappenbalk li.af a:hover .bol{background:var(--inkt);border-color:var(--inkt)}
.stappenbalk li.komt{opacity:.7}
.terugknop{text-decoration:none}
.terugknop:hover{text-decoration:underline}

/* --- reactieve wizard ---------------------------------------------------- */

.verfijning{
  margin-top:1rem;padding:.9rem 1.1rem;background:var(--vlak-2);
  border:1px solid var(--lijn);border-radius:3px;
}
.verfijning .blokkop{margin-top:0}
.verfijning label.keuze:first-of-type{border-top:none}

#uitzonderinggroep.uitgeschakeld{opacity:.45;pointer-events:none}

/* Zodra artikel 5 van toepassing is, stopt de beoordeling: de rest telt niet
   meer mee. Dimmen in plaats van verbergen — u moet uw antwoord kunnen zien
   en herzien. */
.wizard.gestopt section.na-verbod{opacity:.5}
.wizard.gestopt section.na-verbod:focus-within{opacity:1}
#verbodmelding{margin-bottom:1rem}

.voorlopig{
  position:sticky;bottom:0;z-index:5;
  background:var(--vlak);border:1px solid var(--lijn-sterk);border-radius:3px;
  padding:.85rem 1.1rem;margin:1.25rem 0 1rem;
  box-shadow:0 -6px 16px -12px rgba(0,0,0,.35);
}
.voorlopig .etiket{
  display:block;font:600 .7rem/1 var(--schreefloos);text-transform:uppercase;
  letter-spacing:.09em;color:var(--inkt-zacht);margin-bottom:.45rem;
}
.voorlopigrij{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.3rem;
}
.voorlopigrij .klein{min-width:0}
.beoordeeldop{margin:-.2rem 0 1rem;max-width:44rem}

/* --- bronlink, begrippen, motivering, ondertekening ---------------------- */

a.wetsartikel{
  font:600 .72rem/1.4 var(--schreefloos);text-transform:uppercase;
  letter-spacing:.075em;color:var(--goud);text-decoration:none;
}
a.wetsartikel:hover{color:var(--inkt);text-decoration:underline}

dl.begrippen{
  margin:0;background:var(--vlak);border:1px solid var(--lijn);
  border-radius:3px;padding:.4rem 1.15rem 1rem;
}
dl.begrippen dt{margin-top:.85rem;font-weight:600;font-size:.93rem}
dl.begrippen dt a{text-decoration:none}
dl.begrippen dt a:hover{text-decoration:underline}
dl.begrippen dd{
  margin:.15rem 0 0;padding:0;font-size:.88rem;line-height:1.55;
  color:var(--inkt-zacht);max-width:44rem;
}

label.motivering{
  display:flex;flex-direction:column;gap:.3rem;margin-top:.85rem;
  text-transform:none;letter-spacing:0;font-weight:600;font-size:.9rem;
  color:var(--inkt);
}
label.motivering textarea{font-weight:400}

.ondertekening{
  display:grid;grid-template-columns:1fr 1fr;gap:.35rem 2.5rem;
  margin:1.5rem 0 1rem;max-width:40rem;
}
.ondertekening .lijn{
  border-bottom:1px solid var(--lijn-sterk);height:2.2rem;margin:0;
}
@media (max-width:640px){.ondertekening{grid-template-columns:1fr}}

/* --- vooruitwerken en gegroepeerde acties -------------------------------- */

.vooruit{
  background:var(--vlak-2);border-left:2px solid var(--goud);
  padding:.55rem .85rem;font-size:.88rem;line-height:1.55;
  border-radius:0 2px 2px 0;margin:.6rem 0;
}
.verdieping.groep{max-width:none;margin:1.25rem 0}
.verdieping.groep>summary{font-size:.95rem}
.verdieping.groep .plicht:last-child{margin-bottom:0}
.verdieping.groep dl.begrippen{border:none;padding:0;background:none}

.actiesyst{grid-column:2;margin-top:.15rem}
.actiesyst a{color:var(--inkt-zacht);text-decoration:none}
.actiesyst a:hover{color:var(--inkt);text-decoration:underline}
@media (max-width:640px){.actiesyst{grid-column:1}}

/* --- keuzeblok op de introductie ----------------------------------------- */

.keuzeblok{
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:0 0 2.5rem;
}
.keuzeblok.bestaand{
  grid-template-columns:1fr;background:var(--vlak);border:1px solid var(--lijn);
  border-radius:3px;padding:1.1rem 1.35rem;
}
.keuzekaart{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:3px;
  padding:1.25rem 1.35rem;display:flex;flex-direction:column;gap:.4rem;
}
.keuzekaart.nadruk{border-color:var(--lijn-sterk);background:var(--vlak-2)}
.keuzekaart h3{font:400 1.15rem/1.3 var(--schreef);margin:0}
.keuzekaart .klein{flex:1}
.keuzekaart .knop,.keuzekaart button{align-self:flex-start;margin-top:.5rem}
@media (max-width:640px){.keuzeblok{grid-template-columns:1fr}}

/* --- leveranciersdossier -------------------------------------------------- */

form.dossier{gap:0;padding-top:.6rem}
.dossierrij{
  display:grid;grid-template-columns:1fr 11rem;gap:1rem;align-items:start;
  padding:.85rem 0;border-top:1px solid var(--lijn);
}
.dossierrij:first-child{border-top:none}
.dossierrij>div{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.dossierrij strong{font-size:.95rem}
.pil-select{font-size:.88rem;font-weight:600}
.pil-select.n-minimaal{color:var(--minimaal);border-color:var(--minimaal)}
.pil-select.n-hoog{color:var(--hoog);border-color:var(--hoog)}
form.dossier .rij{margin-top:1rem}
form.dossier button{margin-top:1rem}
@media (max-width:640px){.dossierrij{grid-template-columns:1fr;gap:.5rem}}

/* --- incidenten ---------------------------------------------------------- */

ul.incidentlijst{list-style:none;margin:0 0 1rem;padding:0}
.incident{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:3px;
  padding:.9rem 1.1rem;margin-bottom:.6rem;border-left:3px solid var(--onbekend);
  position:relative;
}
.incident.e-kritiek{border-left-color:var(--verboden)}
.incident.e-hoog{border-left-color:var(--hoog)}
.incident.e-middel{border-left-color:var(--transparantie)}
.incident.af{opacity:.62}
.incidentkop{
  display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.35rem;
}
.incidentkop .status{
  margin-left:auto;text-transform:uppercase;letter-spacing:.06em;
  font-size:.72rem;font-weight:600;
}
/* De knoppen stonden absoluut in de rechterbovenhoek en botsten daar met de
   status, die met margin-left:auto naar dezelfde plek loopt. Nu staan ze in
   dezelfde flexrij, zodat de breedte van 'bewerken' per taal mag verschillen. */
.incident p{margin:.25rem 0}
.incidentmerken{border-top:1px solid var(--lijn);padding-top:.45rem;margin-top:.6rem}
.incidentknoppen{display:flex;gap:.5rem;align-items:center;flex-shrink:0}
#ernstuitleg{margin:-.4rem 0 .2rem}

/* --- voorpagina ---------------------------------------------------------- */

ol.kernlijst{
  counter-reset:kern;list-style:none;margin:0 0 1.5rem;padding:0;max-width:46rem;
}
ol.kernlijst li{
  counter-increment:kern;position:relative;padding:.6rem 0 .6rem 2.4rem;
  border-top:1px solid var(--lijn);line-height:1.6;
}
ol.kernlijst li:first-child{border-top:none}
ol.kernlijst li::before{
  content:counter(kern);position:absolute;left:0;top:.62rem;
  font:400 1.05rem/1 var(--schreef);color:var(--goud);
  font-variant-numeric:tabular-nums;
}
.kernslot{
  font:400 1.08rem/1.6 var(--schreef);max-width:44rem;
  border-left:2px solid var(--lijn-sterk);padding-left:1rem;margin:0 0 2rem;
}
.kruimel{margin:0 0 .75rem;font-size:.88rem}
.kruimel a{text-decoration:none}
.kruimel a:hover{text-decoration:underline}

/* --- contacthulp bij een incident ---------------------------------------- */

.contacthulp{
  background:var(--vlak-2);border:1px solid var(--lijn);border-radius:3px;
  padding:.75rem 1rem;margin:-.25rem 0 .25rem;
}
.contacthulp .etiket{
  display:block;font:600 .7rem/1 var(--schreefloos);text-transform:uppercase;
  letter-spacing:.09em;color:var(--inkt-zacht);margin-bottom:.4rem;
}
.contacthulp p{margin:.15rem 0}
.contactregel{font-size:.95rem}

/* --- opslagmelding in de header ------------------------------------------ */

.opslagnoot{
  /* Een knop die een venster opent, geen verwijzing naar een pagina. De
     eigen font-size moet blijven staan: font:inherit zou hem terugzetten
     op 1rem en de Franse tekst uit de header duwen. */
  margin-left:auto;display:flex;align-items:center;gap:.4rem;
  padding:1rem 0;text-decoration:none;color:var(--inkt-zacht);
  font-family:inherit;font-size:.8rem;white-space:nowrap;
  background:none;border:0;cursor:pointer;text-align:left;
}
/* button:hover (0,1,1) wint van .opslagnoot (0,1,0) en gaf de melding een
   zwarte achtergrond; vandaar de elementnaam erbij, net als bij button.mini.
   Bij hover blijft de tint staan: alles tegelijk donker maken wist het
   verschil tussen de zachte aanhef en het vette 'deze browser' uit. Een
   onderstreping op dat vette deel laat zien dat er iets te openen valt. */
button.opslagnoot:hover,
button.opslagnoot:focus-visible{background:none;border-color:transparent}
.opslagnoot:hover strong,
.opslagnoot:focus-visible strong{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
}
.opslagnoot:hover .opslagstip{transform:scale(1.25)}
.opslagstip{transition:transform .12s ease}
.opslagnoot:focus-visible{outline:2px solid var(--hoog);outline-offset:2px}
.opslagnoot strong{font-weight:600;color:var(--inkt)}
.opslagstip{
  width:.45rem;height:.45rem;border-radius:50%;background:var(--goud);flex:none;
}

/* --- opleidingssessies --------------------------------------------------- */

.sessie{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:3px;
  padding:1rem 1.15rem;margin-bottom:.6rem;
}
.sessiekop{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:1rem;flex-wrap:wrap;margin-bottom:.35rem;
}
.sessiekop>div{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.sessiekop strong{font-size:1rem}
ul.deelnemers{
  list-style:none;margin:.6rem 0 0;padding:.6rem 0 0;
  border-top:1px solid var(--lijn);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.1rem .9rem;
}
ul.deelnemers li{
  display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  padding:.18rem 0;font-size:.92rem;min-width:0;
}
ul.deelnemers li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sessieknoppen{margin:.75rem 0 0}

@media (max-width:860px){
  .opslagnoot{margin-left:0;padding:0 0 .7rem}
  .kop{flex-wrap:wrap}
}

/* --- sorteren, selecteren, bulk ------------------------------------------ */

a.sorteerkop{
  color:inherit;text-decoration:none;display:inline-flex;align-items:center;
  gap:.35rem;white-space:nowrap;
}
a.sorteerkop:hover{color:var(--inkt)}
a.sorteerkop .pijl{font-size:.7em;opacity:.45}
a.sorteerkop.aan{color:var(--inkt)}
a.sorteerkop.aan .pijl{opacity:1;color:var(--goud)}

th.vinkkolom,td.vinkkolom{width:2.2rem;padding-right:0}
td.vinkkolom input,th.vinkkolom input{width:auto;accent-color:var(--inkt);margin:0}
tr:has(input.kies:checked){background:var(--accent-zacht)}

[hidden]{display:none!important}
.bulkbalk{
  position:sticky;top:0;z-index:6;
  display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  background:var(--inkt);color:var(--papier);border-radius:3px;
  padding:.7rem 1rem;margin-bottom:.6rem;font-size:.9rem;
}
.bulkbalk strong{font-variant-numeric:tabular-nums}
.bulkvelden{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-left:auto}
.bulkvelden input,.bulkvelden select{
  width:auto;padding:.4rem .6rem;font-size:.88rem;border-color:transparent;
}
.bulkvelden button{padding:.42rem .9rem;font-size:.85rem;
  background:var(--papier);color:var(--inkt);border-color:var(--papier)}
.bulkvelden button:hover{background:#fff;color:#000}
.bulkvelden button.gevaarlijk{
  background:transparent;color:#f3b3bb;border-color:#8a4550;
}
.bulkvelden button.gevaarlijk:hover{background:var(--verboden);color:#fff;border-color:var(--verboden)}
.csvknop{padding:.5rem .9rem;font-size:.85rem}
@media (max-width:760px){
  .bulkvelden{margin-left:0;width:100%}
  .bulkvelden input,.bulkvelden select{flex:1;min-width:8rem}
}

/* --- Excel in de header --------------------------------------------------- */

.koprechts{
  margin-left:auto;display:flex;align-items:center;gap:.7rem;flex-wrap:nowrap;
}
.koprechts .opslagnoot{margin-left:0}
.excelmenu{position:relative;display:flex;align-items:center;padding:.6rem 0}

/* Eigen uitklapmenu in plaats van een <select>: het venster van het
   besturingssysteem opende naast de knop, viel over de kop en toonde de
   taalcodes in een lettergrootte waar geen CSS bij kan. */
.taalmenu{position:relative;display:flex;align-items:center;padding:.6rem 0}
.taallijst{
  position:absolute;top:100%;right:0;z-index:15;min-width:11rem;
  background:var(--vlak);border:1px solid var(--lijn-sterk);border-radius:3px;
  box-shadow:0 10px 28px -14px rgba(0,0,0,.45);padding:.3rem;
  display:flex;flex-direction:column;gap:.1rem;
}
.taallijst button{
  display:flex;gap:.6rem;align-items:baseline;width:100%;text-align:left;
  background:none;border:none;border-radius:2px;padding:.5rem .6rem;
  cursor:pointer;color:var(--inkt);font:400 .9rem/1.3 var(--schreefloos);
  text-transform:none;letter-spacing:0;
}
.taallijst button:hover{background:var(--vlak-2);border-color:transparent}
.taallijst button[aria-current]{font-weight:600}
.taallijst .taalcode{
  font:600 .72rem/1.3 var(--schreefloos);color:var(--inkt-zacht);
  letter-spacing:.06em;min-width:1.8rem;
}
.taallijst button[aria-current] .taalcode{color:var(--goud)}

.excellijst{
  position:absolute;top:100%;right:0;z-index:15;min-width:15rem;
  background:var(--vlak);border:1px solid var(--lijn-sterk);border-radius:3px;
  box-shadow:0 10px 28px -14px rgba(0,0,0,.45);padding:.3rem;
  display:flex;flex-direction:column;gap:.1rem;
}
.excellijst button,.excellijst label{
  display:flex;gap:.6rem;align-items:flex-start;width:100%;text-align:left;
  background:none;border:none;border-radius:2px;padding:.55rem .65rem;
  cursor:pointer;color:var(--inkt);font:400 .88rem/1.35 var(--schreefloos);
  text-transform:none;letter-spacing:0;
}
.excellijst button:hover,.excellijst label:hover{background:var(--vlak-2)}
.excellijst strong{display:block;font-weight:600;font-size:.9rem}
.excellijst .klein{display:block}
.excellijst .pijltje{
  flex:none;color:var(--goud);font-weight:600;line-height:1.5;
}
.kopknop{
  font:600 .8rem/1 var(--schreefloos);padding:.38rem .55rem;border-radius:2px;
  border:1px solid var(--lijn);background:var(--vlak);color:var(--inkt-zacht);
  cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;
  text-transform:none;letter-spacing:0;
}
.kopknop:hover{background:var(--vlak-2);color:var(--inkt);border-color:var(--inkt-zacht)}
/* Past de balk niet op één regel, dan breken we hem bewust op twee rijen:
   merk en hulpmiddelen boven, navigatie eronder. Laten wrappen levert een
   lege strook op met alles rechtsonder; dit leest als een kop. */
@media (max-width:1180px){
  /* De gap van 2.5rem geldt ook tussen de rijen. Zodra de balk afbreekt komt
     die als lege strook tussen de kop en de navigatie te staan; de navigatie
     zet haar eigen scheidingslijn en ruimte al. */
  .kop{padding-bottom:0;row-gap:0}
  .merk{order:1;padding:.85rem 0 .5rem}
  .koprechts{order:2;margin-left:auto;padding:.5rem 0}
  .koprechts .opslagnoot{padding:0}
  .excelmenu,.taalmenu{padding:0}
  /* Navigatie op één scrollbare regel: twee rijen menu-items maken de kop
     hoger dan de eerste inhoud die eronder staat. */
  .navbalk{display:block;position:relative;order:3;width:100%;
    border-top:1px solid var(--lijn)}
  .kop nav{gap:1.35rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .kop nav::-webkit-scrollbar{display:none}
  .kop nav a{padding:.6rem 0 .7rem;white-space:nowrap}
  /* Past het menu niet, dan verschijnt rechts een vervagende rand met een
     dubbele punthaak: zonder die aanwijzing lijkt het menu bij 'Rapport' te
     eindigen. De aanduiding verdwijnt zodra men aan het eind is. */
  .navbalk.kan-schuiven .navpijl{
    display:flex;align-items:center;justify-content:flex-end;
    position:absolute;top:0;bottom:0;right:0;width:3.2rem;
    padding-right:.15rem;pointer-events:none;
    color:var(--inkt-zacht);font:600 .95rem/1 var(--schreefloos);
    background:linear-gradient(to right,rgba(255,253,250,0) 0%,var(--vlak) 62%);
    opacity:1;transition:opacity .15s ease;
  }
  .navbalk.aan-eind .navpijl{opacity:0}
}
/* Op een smal scherm is de knop te dicht bij de rand: het menu zou links
   buiten beeld vallen. Daarom daar ankeren aan de headerrand in plaats van
   aan de knop. */
@media (max-width:640px){
  /* Hier past de melding niet meer naast de taalkiezer en de Excel-knop.
     Ze krijgt een eigen regel. Met .koprechts als eigen vak zou die regel de
     hele balk opeisen en het merk een regel hoger duwen; display:contents
     maakt de drie kinderen rechtstreeks deel van de kopbalk, zodat merk,
     taalkiezer en Excel-knop samen op de eerste regel passen. */
  .kop{position:relative}
  .koprechts{display:contents}
  /* De twee knoppen horen bij elkaar en staan rechts; het merk houdt links.
     De marge staat op de eerste van de twee, zodat de tussenruimte die .kop
     zet er tussenin blijft en niet vóór het blok terechtkomt. */
  .taalmenu{order:2;margin-left:auto}
  .excelmenu{order:2}
  .opslagnoot{order:3;width:100%;margin-left:0;padding:.15rem 0 .6rem}
  /* De navigatiebalk heeft order:3 uit de regel hierboven; met dezelfde
     waarde beslist de DOM-volgorde en belandt de melding eronder. De order
     hoort op de balk, niet op de nav erin: de balk is het flexkind. */
  .navbalk{order:4}
  .excelmenu{position:static}
  /* Het menu hangt nu aan de kopbalk in plaats van aan .koprechts; die
     heeft zijmarge, dus uitlijnen op de inhoud en niet op de schermrand. */
  .excellijst{right:1.1rem;left:auto;min-width:0;width:min(20rem,calc(100vw - 2.2rem))}
  /* Zelfde reden voor het taalmenu: aan de knop hangend valt het lijstje links
     buiten beeld, want de knop staat vlak bij de rechterrand. */
  .taalmenu{position:static}
  .taallijst{right:1.1rem;left:auto;min-width:0;width:min(13rem,calc(100vw - 2.2rem))}
}
@media (max-width:520px){
  .kop{column-gap:.55rem;row-gap:0}
  .koprechts{gap:.5rem}
  /* Op de smalste schermen mag de tekst over twee regels: inkorten zou de
     melding haar betekenis kosten, en ze staat hier toch op een eigen regel. */
  .opslagnoot{white-space:normal;min-width:0}
  .opslagnoot span:not(.opslagstip){font-size:.76rem}
  .kop nav{gap:1rem}
}

/* --- modaal -------------------------------------------------------------- */

.modaaldek{
  position:fixed;inset:0;z-index:20;background:rgba(26,22,19,.45);
  display:flex;align-items:center;justify-content:center;padding:1.25rem;
  overflow-y:auto;
}
.modaal{
  background:var(--vlak);border:1px solid var(--lijn-sterk);border-radius:3px;
  padding:1.6rem 1.75rem;max-width:44rem;width:100%;
  box-shadow:0 18px 48px -20px rgba(0,0,0,.5);
}
.modaal h2{margin:0 0 .5rem;border:none;padding:0;font-size:1.4rem}
.modaalkeuze{
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.25rem 0 .5rem;
}
.modaal .keuzekaart h3{font-size:1.05rem}
.modaal .afsluiting{margin:0}
@media (max-width:640px){.modaalkeuze{grid-template-columns:1fr}}

/* --- taalkeuze en terugvalmelding ---------------------------------------- */

.terugvalbalk{
  background:var(--vlak-2);border-bottom:1px solid var(--lijn);
  padding:.5rem 1.5rem;font-size:.82rem;color:var(--inkt-zacht);
}