/* Look & feel naar MikroDash (indeling en sfeer, geen code of assets overgenomen).
   Kleuren: referenties/design-tokens.json (bij benadering). Lettertypen lokaal, geen CDN. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  --achtergrond: #070a12; --rail: #060810; --kaart: #0c101c; --rand: #1a2233; --tabelkop: #111827;
  --tekst: #e2e8f0; --gedempt: #94a3b8;
  --accent: var(--cyaan);   /* 0.51: werd sinds 0.47 gebruikt maar was nooit gezet (randen/lijnen bleven onzichtbaar) */
  --cyaan: #38bdf8; --groen: #34d399; --oranje: #fb923c; --roze: #f472b6; --paars: #a78bfa; --rood: #f87171;
  --rail-b: 56px; --kop-h: 56px; --hoek: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--achtergrond); color: var(--tekst); font: 14px/1.5 "IBM Plex Sans", system-ui, sans-serif; }
.rail { position: fixed; z-index: 61; inset: 0 auto 0 0; width: var(--rail-b); background: var(--rail); border-right: 1px solid var(--rand);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 10px; }
.rail .logo { width: 32px; height: 32px; border-radius: 8px; background: #c36b01; color: #05070b;
  display: grid; place-items: center; font-weight: 600; font-size: 12.5px; letter-spacing: .01em; margin-bottom: 8px; }   /* woordmerk MYdrawingPortal: 'MY' zwart op de logokleur YES #C36B01 (BESLUITEN 13-10) */
.naam .my { font-style: normal; background: #c36b01; color: #05070b; font-weight: 600; padding: 0 .2em .04em; border-radius: .16em;
  margin-right: .1em; display: inline-block; line-height: 1.12; letter-spacing: .01em; }
.rail a { width: 100%; height: 44px; display: grid; place-items: center; color: var(--gedempt); text-decoration: none; }
.rail a.actief { color: var(--cyaan); box-shadow: inset 3px 0 0 var(--cyaan); background: #0c1422; }
.kop { position: fixed; z-index: 60; top: 0; left: var(--rail-b); right: 0; height: var(--kop-h); background: var(--rail);
  border-bottom: 1px solid var(--rand); display: flex; align-items: center; gap: 16px; padding: 0 20px; }
.kop .naam { font-size: 18px; font-weight: 600; }
.kop .naam b { color: var(--cyaan); font-weight: 600; }
.kop .pagina { color: var(--gedempt); border-left: 1px solid var(--rand); padding-left: 16px; }
.kop .ruimte { flex: 1; }
.pil { font-family: "IBM Plex Mono", monospace; font-size: 12px; border: 1px solid var(--rand); border-radius: 8px; padding: 6px 12px; }
.stip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--groen); margin-right: 8px; }
main { margin: var(--kop-h) 0 0 var(--rail-b); padding: 20px; display: grid; gap: 16px; }
.kaart { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--hoek); overflow: hidden; }
.kaart h2 { margin: 0; padding: 14px 18px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
table { width: 100%; border-collapse: collapse; }
th { background: var(--tabelkop); color: var(--gedempt); text-align: left; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: 8px 18px; }
td { padding: 9px 18px; border-top: 1px solid var(--rand); }
td.code, .code { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; }
.status { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; padding: 1px 8px; border-radius: 5px; border: 1px solid; }
.status.ok { color: var(--groen); background: #0b2a22; border-color: #1f5c47; }
.status.fout { color: var(--rood); background: #2c1216; border-color: #6b2a30; }
.status.nvt { color: var(--gedempt); background: #111827; border-color: var(--rand); }
.gedempt { color: var(--gedempt); font-size: 12px; margin: 0; }

/* fase 1: schil, formulieren, boom */
.rail a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rail a:hover { color: var(--tekst); }
.rail .ruimte { flex: 1; }
.rail a:last-child { margin-bottom: 10px; }
.pil.context { display: inline-flex; align-items: center; padding: 0 4px 0 12px; }
.pil select { background: transparent; color: var(--tekst); border: 0; font: inherit; padding: 6px 4px; max-width: 320px; }
.pil select option { background: var(--kaart); }
.knop { background: #0f1626; color: var(--tekst); border: 1px solid var(--rand); border-radius: 8px; padding: 8px 14px;
  font: 600 13px "IBM Plex Sans", sans-serif; cursor: pointer; }
.knop:hover { border-color: #2a3650; }
.knop.klein { padding: 5px 10px; font-size: 12px; font-weight: 400; }
.knop.primair { background: var(--cyaan); color: #04121c; border-color: var(--cyaan); }
.knop:disabled { opacity: .5; cursor: default; }
.kaartkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 14px; }
.kaart h3 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gedempt); margin: 18px 0 8px; }
.pad { padding: 4px 18px 18px; }
.tellers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.teller { padding-bottom: 14px; }
.teller .waarde { font: 500 26px "IBM Plex Mono", monospace; padding: 0 18px; }
.teller .waarde.klein { font-size: 15px; padding-top: 8px; padding-bottom: 6px; }
.teller .gedempt { padding: 0 18px; }
.twee { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
.boomlijst, .boomlijst ul { list-style: none; margin: 0; padding: 0; }
.boomlijst { padding: 4px 10px 14px; }
.boomlijst ul { padding-left: 18px; border-left: 1px solid var(--rand); margin-left: 10px; }
.knoop { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 1px solid transparent;
  color: var(--tekst); font: 13.5px "IBM Plex Sans", sans-serif; padding: 5px 8px; border-radius: 7px; cursor: pointer; }
.knoop:hover { background: #0f1626; }
.knoop.gekozen { border-color: var(--cyaan); background: #0c1422; }
.soortlabel { font: 10px "IBM Plex Mono", monospace; text-transform: uppercase; color: var(--gedempt); border: 1px solid var(--rand);
  border-radius: 4px; padding: 0 5px; min-width: 76px; text-align: center; }
.knoop.installatie .soortlabel { color: var(--cyaan); }
.knoop.systeem .soortlabel { color: var(--paars); }
.toevoegen { background: none; border: 0; color: var(--gedempt); font: 12px "IBM Plex Sans", sans-serif; padding: 4px 8px; cursor: pointer; }
.toevoegen:hover { color: var(--cyaan); }
.formulier { display: grid; gap: 12px; max-width: 560px; }
.veld { display: grid; gap: 5px; }
label { font-size: 12px; color: var(--gedempt); }
input, select, textarea { background: #080c16; color: var(--tekst); border: 1px solid var(--rand); border-radius: 8px;
  padding: 9px 11px; font: 14px "IBM Plex Sans", sans-serif; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyaan); }
input[readonly], textarea[readonly], select:disabled { opacity: .75; }
.knoppen { display: flex; gap: 10px; justify-content: flex-end; }
.fouttekst { color: var(--rood); font-size: 13px; margin: 0; min-height: 1px; }
.leeg { color: var(--gedempt); }
.verschil s { color: var(--rood); text-decoration-color: var(--rood); }
.verschil b { color: var(--groen); font-weight: 400; }
.verschil { font-size: 12.5px; }
.loginscherm { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login { width: min(380px, 100%); padding: 26px; display: grid; gap: 8px; }
.login .naam.groot { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.login .naam b { color: var(--cyaan); font-weight: 600; }
.login .knop { margin-top: 10px; }
.melding { position: fixed; right: 20px; bottom: 20px; background: var(--kaart); border: 1px solid #1f5c47; color: var(--groen);
  padding: 10px 16px; border-radius: 8px; z-index: 10; }
.melding.fout { border-color: #6b2a30; color: var(--rood); }
@media (max-width: 900px) { .tellers { grid-template-columns: repeat(2, 1fr); } .twee { grid-template-columns: 1fr; } }
.takkop { padding: 0 18px; margin-top: 14px !important; }
.leegregel { padding: 4px 8px; }
.knoop.werf .soortlabel { color: var(--tekst); }
.knoop.boot .soortlabel { color: var(--cyaan); }
.knoop.locatie .soortlabel { color: var(--groen); }
.knoop.installatie .soortlabel { color: var(--paars); }
.knoop.object .soortlabel { color: var(--gedempt); }
.knoop.systeem .soortlabel { color: var(--groen); border-style: dashed; }
.knoop.klant .soortlabel { color: var(--cyaan); }
.archiefpad { margin: 0; font-size: 12.5px; }
form.inline { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
form.inline input, form.inline select { width: auto; flex: 1 1 120px; padding: 6px 9px; font-size: 13px; }
tr.klikbaar { cursor: pointer; }
tr.klikbaar:hover td { background: #0c1422; }
a { color: var(--cyaan); text-decoration: none; }
a:hover { text-decoration: underline; }
#zoekveld { font-size: 15px; padding: 11px 13px; }
optgroup { background: var(--kaart); color: var(--gedempt); }
@media (max-width: 700px) { .kop .pagina, #omgeving { display: none; } td, th { padding-left: 10px; padding-right: 10px; } .pil select { max-width: 150px; } }

/* fase 2: uploaden, verdelen, opdrachten */
.stapel { display: grid; gap: 16px; }
.kop a.knop { text-decoration: none; }
.knoppen.links { justify-content: flex-start; flex-wrap: wrap; }
.knop.aan { border-color: var(--cyaan); color: var(--cyaan); }
.uploadzone { border: 1.5px dashed #2a3650; border-radius: var(--hoek); padding: 28px 20px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.uploadzone.sleep { border-color: var(--cyaan); background: #0c1422; }
.uploadzone .groot { font-size: 16px; margin: 0; }
.balk { height: 6px; background: #111827; border-radius: 3px; overflow: hidden; min-width: 80px; }
.balk i { display: block; height: 100%; background: var(--cyaan); }
.verdelen { display: grid; grid-template-rows: auto 1fr auto; min-height: calc(100vh - var(--kop-h) - 40px); }
.verdeelkop { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rand); flex-wrap: wrap; }
.drie { display: grid; grid-template-columns: minmax(200px, 300px) 1fr minmax(260px, 320px); min-height: 0; }
.raster { border-right: 1px solid var(--rand); padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; align-content: start; grid-auto-rows: max-content;
  overflow: auto; max-height: calc(100vh - 210px); }
.groepkop { grid-column: 1 / -1; font: 11px "IBM Plex Mono", monospace; color: var(--gedempt); padding-top: 6px; }
.tegel { position: relative; background: #080c16; border: 1px solid var(--rand); border-left: 3px solid var(--oranje); border-radius: 7px; padding: 0; cursor: pointer;
  overflow: hidden; height: 132px; display: grid; grid-template-rows: 106px auto; color: var(--tekst); }
.tegel.toegewezen { border-left-color: var(--groen); }
.tegel.negeren { border-left-color: var(--gedempt); opacity: .6; }
.tegel.gekozen { border-color: var(--cyaan); border-left-width: 3px; }
.tegel.actief { box-shadow: 0 0 0 2px var(--cyaan); }
.tegel img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.tegel .geenbeeld { display: grid; place-items: center; font: 12px "IBM Plex Mono", monospace; color: var(--gedempt); }
.tegel .typelabel, .tegel .notitielabel, .tegel .dubbellabel { position: absolute; top: 5px; font: 9.5px "IBM Plex Mono", monospace; padding: 0 4px; border-radius: 3px; background: #060810cc; }
.tegel .typelabel { left: 5px; }
.tegel .notitielabel { right: 5px; color: var(--oranje); }
.tegel .dubbellabel { right: 5px; top: 22px; color: var(--roze); }
.tegel .tegelnaam { font-size: 11px; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; border-top: 1px solid var(--rand); }
.midden { padding: 10px 14px; display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 8px; min-width: 0; }
.bediening { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bediening .ruimte { flex: 1; }
.beeldvak { background: #fff; border-radius: 8px; overflow: hidden; display: grid; place-items: center; min-height: 360px; height: max(360px, calc(100vh - 380px)); cursor: grab; touch-action: none; }
.beeldvak img { max-width: 100%; max-height: max(360px, calc(100vh - 380px)); transform-origin: center; user-select: none; }
.geenpreview { color: #111; text-align: center; padding: 30px; }
.geenpreview .gedempt { color: #555; }
.paginastrip { display: flex; gap: 4px; flex-wrap: wrap; }
.paginastrip .pag { position: relative; background: #080c16; border: 1px solid var(--rand); color: var(--tekst); border-radius: 5px; min-width: 30px; padding: 3px 7px; cursor: pointer; font: 12px "IBM Plex Mono", monospace; }
.paginastrip .pag.aan { border-color: var(--cyaan); color: var(--cyaan); }
.stipje { position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--oranje); }
.bestandinfo { word-break: break-all; }
.notitie { display: grid; gap: 5px; }
.opgeslagen { font-size: 11.5px; min-height: 16px; }
.rechts { border-left: 1px solid var(--rand); padding: 10px 12px; display: grid; gap: 10px; align-content: start; grid-auto-rows: max-content; overflow: auto; max-height: calc(100vh - 210px); }
.selinfo { margin: 0; font-size: 12.5px; color: var(--cyaan); }
.vink { display: flex; gap: 6px; align-items: center; }
.vink input { width: auto; }
.objectlijst { display: grid; gap: 4px; max-height: 280px; overflow: auto; grid-auto-rows: max-content; }
.objectknop { position: relative; display: grid; text-align: left; gap: 1px; background: #080c16; border: 1px solid var(--rand); border-radius: 7px; padding: 6px 30px 6px 9px;
  color: var(--tekst); cursor: pointer; font: 13px "IBM Plex Sans", sans-serif; }
.objectknop:hover:not(:disabled) { border-color: var(--groen); }
.objectknop .klein { font-size: 11px; }
.objectknop .aantal { position: absolute; right: 8px; top: 8px; font: 11px "IBM Plex Mono", monospace; color: var(--groen); }
.formulier.compact { gap: 6px; }
.formulier.compact input, .formulier.compact select { padding: 6px 9px; font-size: 13px; }
.formulier.compact h3 { margin: 8px 0 2px; }
.voet { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--rand); flex-wrap: wrap; }
.voet .ruimte { flex: 1; }
.voet select, .voet input { width: auto; padding: 6px 9px; font-size: 13px; }
.voet input { min-width: 240px; }
pre.brief { margin: 0; padding: 14px 18px; white-space: pre-wrap; font: 12.5px/1.55 "IBM Plex Mono", monospace; max-height: 600px; overflow: auto; }
.maplijst { margin: 0; padding-left: 18px; }
@media (max-width: 1100px) { .drie { grid-template-columns: 1fr; } .raster, .rechts { max-height: none; border: 0; } .raster { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); } }

/* tekeningenbrowser + fase 3 */
.status.bezig { color: var(--cyaan); background: #0a1e2c; border-color: #1c4a66; }
.status.review { color: var(--oranje); background: #2a1a0c; border-color: #6b3f1a; }
.belplek { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.livestip { width: 7px; height: 7px; border-radius: 50%; background: var(--groen); }
.livestip.uit { background: var(--gedempt); }
.bel { position: relative; background: transparent; border: 1px solid var(--rand); border-radius: 8px; width: 34px; height: 32px;
  color: var(--gedempt); cursor: pointer; display: grid; place-items: center; }
.bel svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bel.nieuw { color: var(--tekst); border-color: var(--oranje); }
.belteller { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--oranje);
  color: #1a0d02; font: 600 10px/16px "IBM Plex Mono", monospace; padding: 0 4px; }
.belteller:empty { display: none; }
.belpaneel { position: absolute; top: 40px; right: 0; width: 360px; max-height: 70vh; overflow: auto; z-index: 30;
  background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--hoek); box-shadow: 0 10px 30px #0008; }
.belkop { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--rand); }
.belitem { display: block; padding: 10px 14px; border-bottom: 1px solid var(--rand); color: var(--tekst); text-decoration: none; }
.belitem:hover { background: #0f1626; }
.belitem.ongelezen { box-shadow: inset 3px 0 0 var(--oranje); }
.belitem.engine_fout.ongelezen { box-shadow: inset 3px 0 0 var(--rood); }
#banners { margin: var(--kop-h) 0 0 var(--rail-b); padding: 12px 20px 0; }
#banners:not(:empty) + main { margin-top: 0; }
#banners:empty { display: none; }

.banner { box-shadow: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #6b3f1a; background: #1c1209;
  border-radius: var(--hoek); color: var(--oranje); }
.banner .ruimte { flex: 1; }
.bannerstip { width: 8px; height: 8px; border-radius: 50%; background: var(--oranje); }
.statusblok { display: grid; gap: 10px; }
.grotestatus .status { font-size: 14px; padding: 3px 12px; }
.redenveld { max-width: 520px; }
.testsim { display: inline-flex; gap: 6px; align-items: center; padding-left: 12px; border-left: 1px dashed var(--rand); }
tr.geweigerd td { color: var(--rood); }
.kopknoppen { display: inline-flex; gap: 12px; align-items: center; }
.tbfilters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 0 18px 12px; }
.filter { display: grid; gap: 4px; }
.filter > span { font-size: 11px; color: var(--gedempt); text-transform: uppercase; letter-spacing: .06em; }
.filter select, .filter input { padding: 5px 8px; font-size: 12.5px; }
.filter.breed select { min-width: 240px; max-width: 360px; }
.tbtelling { padding-top: 0; padding-bottom: 6px; }
.tbresultaat.laden { opacity: .5; }
.tbtegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 0 18px 18px; }
.tbtegels.klein { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); padding-top: 12px; }
.tbtegel { display: grid; grid-template-rows: 150px auto; background: #080c16; border: 1px solid var(--rand); border-radius: 8px;
  overflow: hidden; color: var(--tekst); text-decoration: none; }
.tbtegels.klein .tbtegel { grid-template-rows: 110px auto; }
.tbtegel:hover { border-color: var(--cyaan); }
.tbtegel.ontbreekt { opacity: .55; border-style: dashed; }
.tbbeeld { background: #000; display: grid; place-items: center; overflow: hidden; }
.tbbeeld img { width: 100%; height: 100%; object-fit: contain; }
.tbbeeld .geenbeeld { color: #777; font: 12px "IBM Plex Mono", monospace; }
.tbonder { padding: 8px 10px; border-top: 1px solid var(--rand); display: grid; gap: 2px; min-width: 0; }
.tbnummer { display: flex; justify-content: space-between; gap: 6px; font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.revlabel { font: 10.5px "IBM Plex Mono", monospace; color: var(--groen); border: 1px solid #1f5c47; border-radius: 4px; padding: 0 5px; }
.tbtitel, .tbpad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
tr.ontbreekt td { opacity: .55; }
.tbdetail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); gap: 16px; align-items: start; }
.tbgroot { background: #000; height: max(420px, calc(100vh - 260px)); overflow: hidden; display: grid; place-items: center; cursor: grab;
  touch-action: none; }
.tbgroot img { max-width: 100%; max-height: 100%; transform-origin: center; user-select: none; }
.objvinkjes { display: grid; gap: 4px; max-height: 220px; overflow: auto; border: 1px solid var(--rand); border-radius: 8px; padding: 8px; }
.vinkje { font-size: 13px; color: var(--tekst); display: block; }
.vinkje input { width: auto; }
@media (max-width: 1000px) { .tbdetail { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .belpaneel { position: fixed; left: 8px; right: 8px; width: auto; top: 60px; } }
.tbdetail td { overflow-wrap: anywhere; }
/* Gegevens: labelkolom nooit afbreken (woorden bleven halverwege hangen), waarde krijgt de rest */
.tbdetail table.gegevens { table-layout: auto; width: 100%; }
.tbdetail table.gegevens td:first-child { white-space: nowrap; overflow-wrap: normal; width: 1%; padding-right: 14px; vertical-align: top; }
/* mapkeuze (inklapbare boom) */
.mapkeuze { position: relative; }
.mapknop { min-width: 240px; max-width: 460px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mappaneel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 340px; max-width: 560px; max-height: 60vh; overflow: auto;
  background: var(--kaart, #1b1f24); border: 1px solid var(--rand); border-radius: 8px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.mapboom { list-style: none; margin: 0; padding: 0 0 0 16px; }
.mappaneel > .mapboom { padding-left: 0; }
.maprij { display: flex; align-items: center; gap: 2px; border-radius: 6px; }
.maprij.aan { background: rgba(120,160,255,.14); }
.mappijl { width: 22px; flex: none; background: none; border: 0; color: var(--gedempt); cursor: pointer; padding: 3px 0; font-size: 12px; }
.mappijl.leeg { display: inline-block; cursor: default; }
.mapnaam { flex: 1; text-align: left; background: none; border: 0; color: var(--tekst); cursor: pointer; padding: 4px 6px; font-size: 13px; white-space: nowrap; }
.mapnaam:hover { text-decoration: underline; }
.mapnaam.boot span:first-child { font-weight: 600; }
.mapvoet { border-top: 1px solid var(--rand); margin-top: 6px; padding-top: 6px; }
.statusblok .knoppen select { width: auto; padding: 5px 8px; font-size: 12.5px; }
.twee.breedrechts { grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); }
.statusblok .redenveld { width: 100%; }
td.nowrap, .nowrap td.code { white-space: nowrap; }
.twee > .kaart { overflow-x: auto; }

/* tekeningvoorbeelden: donker vel (zoals AutoCAD, kleuren zoals getekend) of licht vel (plot-achtig) */
body.tblicht .tbbeeld, body.tblicht .tbgroot { background: #fff; }
body.tblicht .tbbeeld img, body.tblicht .tbgroot img { filter: invert(1) hue-rotate(180deg); }
.fmtlabel { font: 10.5px "IBM Plex Mono", monospace; color: var(--oranje, #e0a040); border: 1px solid #6b4a1a; border-radius: 4px; padding: 0 5px; margin-right: 4px; }

/* fase 4: engine */
.rij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rij .ruimte { flex: 1; }
.enginesessie { border-top: 1px solid var(--rand); padding: 10px 0; }
.enginesessie p { margin: 4px 0 0; }
.indieningen { margin: 6px 0 0; padding-left: 18px; }
.indieningen .fouten { margin: 4px 0; padding-left: 18px; color: var(--rood); font-size: 13px; }
.waarschuwing { border: 1px solid var(--oranje); color: var(--oranje); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.waarschuwing input { width: 100%; }
.kaart h4 { margin: 18px 18px 6px; color: var(--gedempt); font-weight: 500; }
.kaart > div > .veld, .kaart > div > .formulier, .kaart > div > .rij, .kaart > div > p, .kaart > div > .waarschuwing { margin-left: 18px; margin-right: 18px; }
.kaart .veld { margin-bottom: 10px; }
.veld input[type=password], .veld input[type=text], .veld input:not([type]) { min-width: 380px; }

/* instellingen: zijmenu + secties met groepen (instelling | waarde | status | bron) */
.instellingen { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.instnav { display: grid; gap: 18px; }
.instnavkop { font: 600 10.5px "IBM Plex Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--gedempt); padding: 0 10px 6px; }
.instnav a { display: block; color: var(--tekst); padding: 7px 10px; border-radius: 7px; font-size: 13.5px; border-left: 2px solid transparent; }
.instnav a:hover { background: #0f1626; text-decoration: none; }
.instnav a.actief { background: #0c1422; color: var(--cyaan); border-left-color: var(--cyaan); }
.instrechts { display: grid; gap: 16px; min-width: 0; max-width: 1100px; }
.instkeuze { display: none; }
.instkop h1 { margin: 0 0 2px; font-size: 20px; font-weight: 600; }
.instinhoud { display: grid; gap: 16px; }
.instgroep { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--hoek); overflow: hidden; }
.instgroep > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px 10px; border-bottom: 1px solid var(--rand); }
.instgroep > header h3 { margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst); }
.instgroep > header p { margin-top: 3px; }
.instgroep table td:first-child, .instgroep table th:first-child { padding-left: 18px; }
.instgroep tr.uit td { opacity: .55; }
.instrijen { display: grid; }
.instrij { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) 130px 70px; gap: 14px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--rand); }
.instrij:first-child { border-top: 0; }
.instlabel span { display: block; }
.instlabel small { display: block; color: var(--gedempt); font-size: 11.5px; line-height: 1.35; }
.instwaarde { min-width: 0; overflow-wrap: anywhere; }
.instwaarde input:not([type=checkbox]), .instwaarde select { max-width: 460px; padding: 6px 9px; font-size: 13px; }
.instwaarde .rij input { flex: 1 1 240px; }
.instwaarde input[type=checkbox] { width: 18px; height: 18px; }
.inststatus { justify-self: start; }
.instbron { justify-self: end; }
.bron { font: 10.5px "IBM Plex Mono", monospace; color: var(--gedempt); border: 1px solid var(--rand); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.bron.portaal { color: var(--cyaan); border-color: #1e3a52; }
td .bron.portaal { margin-left: 8px; }
.instpad { padding: 14px 18px; }
.instpad .formulier { max-width: 420px; }
.insttellers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.waarschuwingtekst { color: var(--oranje); }
select.klein, input.klein { width: auto; padding: 5px 8px; font-size: 12.5px; }
@media (max-width: 1000px) {
  .instellingen { grid-template-columns: 1fr; }
  .instnav { display: none; }
  .instkeuze { display: block; max-width: 320px; }
  .instrij { grid-template-columns: 1fr; gap: 4px; }
  .instbron, .inststatus { justify-self: start; }
  .insttellers { grid-template-columns: repeat(2, 1fr); }
}
.status { white-space: nowrap; }
th { white-space: nowrap; }
.enginenaam .bron { margin-left: 8px; }
.enginenaam .gedempt { margin-top: 2px; }
.instgroep td.code:last-child { white-space: nowrap; }

/* hulp */
.hulpknop { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 7px; vertical-align: 1px;
  border-radius: 50%; border: 1px solid #2a3650; background: transparent; color: var(--gedempt);
  font: italic 600 10.5px Georgia, serif; cursor: pointer; padding: 0; letter-spacing: 0; text-transform: none; }
.hulpknop:hover, .hulpknop.open { color: var(--cyaan); border-color: var(--cyaan); }
.hulprij { padding: 0 18px 12px; }
tr.hulprij td { padding-top: 0; border-top: 0; }
.instgroep > .hulprij { border-bottom: 1px solid var(--rand); padding-top: 12px; }
.hulppaneel { background: #0a1322; border: 1px solid #1e3a52; border-left: 3px solid var(--cyaan); border-radius: 8px;
  padding: 10px 14px; display: grid; gap: 6px; font-size: 13px; color: var(--tekst); max-width: 900px; }
.hulppaneel b { color: var(--cyaan); font-weight: 600; }
.instpad .hulppaneel + .hulppaneel { margin-top: 10px; }
.hulpintro { display: grid; gap: 6px; }
.hulpzoek { max-width: 560px; font-size: 15px; padding: 11px 13px; }
details.gids { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--hoek); padding: 0 18px; }
details.gids summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; }
details.gids summary::-webkit-details-marker { display: none; }
details.gids summary::before { content: "▸"; color: var(--gedempt); display: inline-block; width: 18px; }
details.gids[open] summary::before { content: "▾"; }
details.gids ol { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; }
details.gids li { line-height: 1.5; }
.gidsletop { margin: 0 0 14px; padding: 8px 12px; border-radius: 8px; background: #2a1a0c; border: 1px solid #5c3a17; color: #fcd9b6; font-size: 13px; }
.gidsletop b { color: var(--oranje); }

/* sets: stapels met voorblad bovenop */
.setgroep { padding: 4px 18px 14px; }
.setgroepkop { margin: 10px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--gedempt); }
.stapels { padding-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 18px; }
.stapel { background: none; border: 0; padding: 0; text-align: left; color: var(--tekst); cursor: pointer; font: inherit; }
.stapelvellen { position: relative; aspect-ratio: 1.414 / 1; margin: 20px 20px 6px 6px; }
.stapelvellen .vel { position: absolute; inset: 0; border: 1px solid #26324a; border-radius: 3px; background: #0b1120; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,.35); transition: transform .18s ease, box-shadow .18s ease; }
.stapelvellen .vel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stapelvellen .achter1 { transform: translate(7px, -7px) rotate(2deg); filter: brightness(.7); border-color: #3a4866; }
.stapelvellen .achter2 { transform: translate(13px, -13px) rotate(4deg); filter: brightness(.5); border-color: #3a4866; }
.stapelvellen .achter3 { transform: translate(4px, -16px) rotate(-3deg); filter: brightness(.4); border-color: #3a4866; }
.stapelvellen .voor { display: grid; place-items: center; }
.stapel:hover .achter1, .stapel:focus-visible .achter1 { transform: translate(12px, -10px) rotate(4deg); }
.stapel:hover .achter2, .stapel:focus-visible .achter2 { transform: translate(22px, -18px) rotate(7.5deg); }
.stapel:hover .achter3, .stapel:focus-visible .achter3 { transform: translate(2px, -24px) rotate(-6deg); }
.stapel:hover .voor, .stapel:focus-visible .voor { transform: translate(-2px, 2px); border-color: var(--cyaan); box-shadow: 0 2px 4px rgba(0,0,0,.5), 0 12px 24px rgba(0,0,0,.45); }
body.tblicht .stapelvellen .vel { background: #fff; border-color: #c9ced8; }
@media (prefers-reduced-motion: reduce) { .stapelvellen .vel { transition: none; } }
.stapeltal { position: absolute; z-index: 2; right: -10px; top: -12px; background: var(--cyaan); color: #04121c; font: 600 11px "IBM Plex Mono", monospace; border-radius: 10px; padding: 1px 7px; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.stapelonder { padding-top: 8px; }
.stapelonder b { display: block; font-size: 13.5px; }
.stapel.soort-algemeen .voor { border-style: dashed; }
.stapel.soort-uitzoeken .voor { border-color: #5c3a17; }
.setkop { display: flex; align-items: center; gap: 6px; }
.wervenoverzicht { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 4px 18px 18px; }
.werfkaart { border: 1px solid var(--rand); border-radius: var(--hoek); padding: 12px 14px; }
.werfkaart ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; }
.werfnaam, .bootnaam { background: none; border: 0; padding: 0; color: var(--cyaan); font: inherit; cursor: pointer; }
.werfnaam { font-weight: 600; font-size: 14.5px; }
.werfnaam:hover, .bootnaam:hover { text-decoration: underline; }

/* archiefstructuur: inklapbare boom */
.boomkop { display: grid; gap: 8px; padding-bottom: 6px; }
.boomtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rand); }
.boomtab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--gedempt); padding: 6px 10px; font: 600 13px "IBM Plex Sans", sans-serif; cursor: pointer; margin-bottom: -1px; }
.boomtab.aan { color: var(--tekst); border-bottom-color: var(--cyaan); }
.boomzoek { width: 100%; }
.boombediening { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.boomlijst li { margin: 0; }
.boomrij { display: flex; align-items: center; gap: 2px; }
.boompijl { flex: 0 0 24px; height: 28px; background: none; border: 0; color: var(--gedempt); cursor: pointer; font-size: 12px; border-radius: 4px; }
.boompijl:hover { color: var(--cyaan); background: #0f1626; }
.boompijl.leeg { display: inline-block; cursor: default; }
.boomlijst .knoop { flex: 1; min-width: 0; }
.boomlijst .knoop > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boomtal { margin-left: auto; font: 11px "IBM Plex Mono", monospace; color: var(--gedempt); border: 1px solid var(--rand); border-radius: 9px; padding: 0 6px; flex: 0 0 auto; }
.knoop.treffer { background: #0c1a24; }
.knoop mark { background: #33507a; color: var(--tekst); border-radius: 2px; }
.knoop:focus-visible { outline: 2px solid var(--cyaan); outline-offset: -2px; }
.kruimels { display: flex; flex-wrap: wrap; gap: 2px; font-size: 12.5px; padding-bottom: 0; }
.kruimel { background: none; border: 0; color: var(--cyaan); cursor: pointer; padding: 0; font: inherit; }
.kruimel:hover { text-decoration: underline; }
.kruimel + .kruimel::before { content: "›"; color: var(--gedempt); margin: 0 6px; }
.toevoegblok { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* archief: bredere, verstelbare boom; minder inspringing per niveau; namen lopen door i.p.v. afkappen */
.twee.kernraster { grid-template-columns: var(--boombreedte, minmax(420px, 45%)) 10px minmax(420px, 1fr); gap: 6px; }
.kerngreep { align-self: stretch; cursor: col-resize; border-radius: 4px; position: relative; min-height: 120px; }
.kerngreep::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; border-radius: 1px; background: var(--rand); }
.kerngreep:hover::after, .kerngreep:focus-visible::after, .kernraster.slepen .kerngreep::after { background: var(--cyaan); }
.kernraster.slepen { user-select: none; cursor: col-resize; }
.kernraster .boomlijst ul { padding-left: 10px; margin-left: 11px; }
.kernraster .boomlijst .knoop { flex-wrap: wrap; row-gap: 2px; }
.kernraster .boomlijst .knoop > span { white-space: normal; overflow: visible; }
.kernraster .boomlijst .knoop > .soortlabel { white-space: nowrap; }
.kernraster > .boom { overflow-x: auto; }
@media (max-width: 1000px) { .twee.kernraster { grid-template-columns: 1fr; } .kerngreep { display: none; } }

/* detailpaneel archiefstructuur */
.detailkop { padding: 16px 18px 6px; }
.detailsoort { display: flex; gap: 8px; align-items: center; }
.kaart h2.detailnaam { margin: 6px 0 4px; padding: 0; font-size: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tekst); }
.detailkop .kruimels { padding: 0 0 6px; }
.kaart .detailkop p.detailuitleg { padding: 0 !important; margin-left: 0 !important; }
.detailuitleg { margin: 4px 0 0; color: var(--gedempt); font-size: 13px; max-width: 70ch; }
.detailtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rand); padding: 0 18px; margin-top: 8px; }
.detailblok { border-top: 1px solid var(--rand); padding-top: 4px; }
.detailinhoud > .detailblok:first-child { border-top: 0; }
.detailblok h3 { padding: 10px 18px 0; margin: 0; }
.blokkop { display: flex; justify-content: space-between; align-items: center; padding-right: 18px; }
.detaillijst { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: 6px 18px; margin: 0; font-size: 13.5px; }
.detaillijst dt { color: var(--gedempt); }
.detaillijst dd { margin: 0; overflow-wrap: anywhere; }
.tabuitleg { margin: 10px 0 0; max-width: 70ch; }
.achterknopvak { margin-top: 10px; }
.detailleeg p { max-width: 60ch; }

/* ---------- fase 5: review ---------- */
.rvkopkaart { overflow: visible; }
.rvkop { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap; }
.rvkop select { width: auto; min-width: 150px; }
.rvtitel { font-size: 15px; display: flex; gap: 8px; align-items: center; }
.rvkop .ruimte, .rvvoet .ruimte, .rvbalk .ruimte { flex: 1; }
.schakel .knop.aan, .rvstatus .knop.aan { border-color: var(--cyaan); color: var(--cyaan); }
.rvraster { display: grid; grid-template-columns: 220px minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
.rvlinks, .rvrechts { position: sticky; top: calc(var(--kop-h) + 12px); max-height: calc(100vh - var(--kop-h) - 150px); overflow: auto; }
.rvbladen { display: grid; padding: 0 8px 10px; }
.rvtek { font: 11px "IBM Plex Mono", monospace; color: var(--gedempt); padding: 10px 8px 4px; overflow-wrap: anywhere; }
.rvblad { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid transparent; border-radius: 6px; color: var(--tekst);
  padding: 6px 8px; text-align: left; cursor: pointer; font: inherit; }
.rvblad:hover { background: #0f1626; }
.rvblad.aan { border-color: var(--cyaan); background: #0c1422; }
.rvbladnaam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bstat { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; border: 2px solid var(--gedempt); }
.bstat.opmerking { border-color: var(--oranje); background: var(--oranje); }
.bstat.akkoord { border-color: var(--groen); background: var(--groen); }
.gewijzigd { color: var(--oranje); font-size: 10px; }
.rvteller { font: 600 11px "IBM Plex Mono", monospace; background: var(--oranje); color: #1a0d02; border-radius: 9px; padding: 0 6px; }
.rvmeldingen { font-size: 12px; color: var(--gedempt); }
.rvmeldingen ul { padding-left: 16px; margin: 6px 0 0; }
.rvmidden { min-width: 0; }
.rvbladvak { display: grid; }
.rvbalk { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--rand); flex-wrap: wrap; font-size: 13px; }
.rvzoom { position: relative; overflow: hidden; background: #1b2130; height: calc(100vh - var(--kop-h) - 260px); min-height: 380px; cursor: crosshair;
  display: grid; place-items: center; touch-action: none; }
.rvzoom.slepen { cursor: grabbing; }
.rvzoominhoud { transform-origin: 0 0; width: 100%; height: 100%; display: grid; place-items: center; padding: 14px; }
.rvoverlay { align-content: center; }
.rvzoominhoud > div:not(.rvvel):not(.rvnaast) { display: grid; place-items: center; width: 100%; }
.rvvel { position: relative; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.5); max-width: 100%; height: auto; }
.rvvel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
.rvnaast { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; height: 100%; }
.rvnaast figure { margin: 0; display: grid; grid-template-rows: auto 1fr; min-height: 0; place-items: center; }
.rvnaast figcaption { font-size: 12px; color: var(--gedempt); }
.rvnaast .rvvel { height: auto; }
.rvoverlay { position: relative; display: grid; width: 100%; height: 100%; place-items: center; }
.rvoverlay > .rvvel { grid-area: 1 / 1; }
.rvoverlay > .rvvel:last-child { background: transparent; box-shadow: none; }
.rvschuif { display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 12px; color: var(--gedempt); padding-bottom: 6px; }
.rvkader { position: absolute; border: 2px dashed var(--oranje); background: rgba(251,146,60,.08); pointer-events: none; }
.rvpin { position: absolute; transform: translate(-50%, -100%); min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px 11px 11px 2px;
  background: var(--oranje); color: #1a0d02; border: 2px solid #fff; font: 700 11px "IBM Plex Mono", monospace; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.rvpin.opgelost_engine { background: var(--cyaan); }
.rvpin.opgelost { background: var(--groen); }
.rvpin.vervallen { background: #64748b; color: #fff; }
.rvpin.nieuw { background: #fff; color: #000; border-color: var(--oranje); }
.rvpin.klein { position: static; transform: none; display: inline-block; cursor: default; border-width: 1px; }
.rvstatus { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--rand); }
.rvstatus .knop.st-akkoord { border-color: var(--groen); color: var(--groen); }
.rvstatus .knop.st-opmerking { border-color: var(--oranje); color: var(--oranje); }
.rvnieuw { display: grid; gap: 8px; border-bottom: 1px solid var(--rand); }
.rvnieuw textarea, .rvnieuw select { width: 100%; }
.rvopmlijst { display: grid; }
.rvopm { padding: 10px 14px; border-top: 1px solid var(--rand); transition: background .3s; }
.rvopm.flits { background: #1c2a40; }
.rvopm.st-opgelost, .rvopm.st-vervallen { opacity: .65; }
.rvopmkop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.opmstatus { font: 11px "IBM Plex Mono", monospace; border: 1px solid var(--rand); border-radius: 5px; padding: 0 6px; }
.opmstatus.open { color: var(--oranje); border-color: #5c3a17; }
.opmstatus.opgelost_engine { color: var(--cyaan); }
.opmstatus.opgelost { color: var(--groen); }
.rvopmtekst { margin: 6px 0; white-space: pre-wrap; }
.rvengine { margin: 0 0 6px; font-size: 12.5px; border-left: 2px solid var(--cyaan); padding-left: 8px; }
.rvvoet { position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--kaart); border: 1px solid var(--rand);
  border-radius: var(--hoek); padding: 10px 14px; z-index: 5; }
.klein { font-size: 12px; }
@media (max-width: 1200px) { .rvraster { grid-template-columns: 200px minmax(0, 1fr); } .rvrechts { grid-column: 1 / -1; position: static; max-height: none; } }

/* meldingen: rustige regel + bel met voet + meldingenpagina */
.bannerlinks { display: flex; gap: 10px; flex-wrap: wrap; }
.bannerlinks a { color: var(--oranje); font-weight: 600; }
.belsoort { font-weight: 600; }
.belvoet { display: block; padding: 10px 14px; border-top: 1px solid var(--rand); color: var(--cyaan); text-decoration: none; font-size: 13px; }
.belvoet:hover { text-decoration: underline; }
.mlfilters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mlrij { display: grid; grid-template-columns: 14px 170px 1fr auto; gap: 12px; align-items: start; padding: 10px 18px; border-top: 1px solid var(--rand); }
.mlrij.ongelezen { background: #0f1626; }
.mlrij .stip2 { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: transparent; }
.mlrij.ongelezen .stip2 { background: var(--oranje); }
.mlsoort { font-weight: 600; }
.mluitleg { font-size: 12.5px; }

/* ---------- opdrachtdetail 0.10.1: tekening centraal ---------- */
.odkop { overflow: visible; }
.odtitel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px 6px; }
.kaart h2.odnaam { padding: 0; font-size: 20px; letter-spacing: 0; text-transform: none; }
.odctx { flex: 1 1 100%; font-size: 13px; }
.odstap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 6px 18px 12px; }
.odstap p { margin: 0; flex: 1 1 380px; font-size: 14.5px; }
.odmeer { padding: 0 18px 12px; font-size: 13px; color: var(--gedempt); }
.odmeer summary { cursor: pointer; }
.odmeer .knoppen { margin-top: 8px; align-items: center; }
.odraster { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.odlinks { display: grid; gap: 16px; min-width: 0; }
.odtekening { display: grid; }
.odtekkop { padding: 12px 16px; border-bottom: 1px solid var(--rand); font-size: 13.5px; }
.odbeeld { display: grid; place-items: center; background: #1b2130; padding: 16px; min-height: 320px; }
.odbeeld.donker { background: #000; }
.odbeeld img { max-width: 100%; max-height: calc(100vh - 380px); background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.5); }
.odbeeld.donker img { background: transparent; }
.odtekening.leeg { padding: 40px; text-align: center; }
.odbladen { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--rand); }
.odblad { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--rand); border-radius: 6px; padding: 3px 8px; color: var(--tekst); text-decoration: none; font-size: 12.5px; }
.odrechts { position: sticky; top: calc(var(--kop-h) + 12px); max-height: calc(100vh - var(--kop-h) - 30px); overflow: auto; }
.tijdlijn { list-style: none; margin: 0; padding: 4px 16px 16px 30px; position: relative; }
.tijdlijn::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 16px; width: 1px; background: var(--rand); }
.tl { position: relative; padding: 8px 0 10px; display: grid; gap: 4px; }
.tlstip { position: absolute; left: -15px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--gedempt); border: 2px solid var(--kaart); }
.tl-status .tlstip { background: var(--cyaan); }
.tl-engine .tlstip { background: var(--paars); }
.tl-melding .tlstip { background: var(--oranje); }
.tl-geweigerd .tlstip { background: var(--rood); }
.tlkop { display: grid; gap: 1px; }
.tltekst { font-size: 13px; overflow-wrap: anywhere; }
.odmappen details { margin: 4px 0; }
.odmappen summary { cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; }
.linkknop { background: none; border: 0; padding: 0; color: var(--cyaan); cursor: pointer; font: inherit; text-align: left; overflow-wrap: anywhere; }
.linkknop:hover { text-decoration: underline; }
.vensterachter { position: fixed; inset: 0; background: rgba(2,6,14,.72); z-index: 100; display: grid; place-items: center; padding: 30px; }
.venster { width: min(1100px, 100%); max-height: 100%; display: grid; grid-template-rows: auto 1fr; background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--hoek); overflow: hidden; box-shadow: 0 20px 60px #000c; }
.vensterkop { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rand); }
.vensterkop .ruimte { flex: 1; }
.vensterpre { margin: 0; padding: 14px 16px; overflow: auto; font: 12.5px/1.5 "IBM Plex Mono", monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .odraster { grid-template-columns: 1fr; } .odrechts { position: static; max-height: none; } }

/* ---------- opdrachten als stapels ---------- */
.odfilters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.odfilters .ruimte { flex: 1; }
.odstapels { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.odkaart { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 14px; border: 1px solid var(--rand); border-radius: var(--hoek);
  color: var(--tekst); text-decoration: none; background: #0a0e19; }
.odkaart:hover { border-color: var(--cyaan); }
.odkaart.st-jij { border-left: 3px solid var(--oranje); }
.odkaart .stapelvellen { margin: 16px 18px 4px 4px; }
.odkaartbeeld.bron .vel { background: #000; }
.odkaartinfo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.odkaartkop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 16px; }
.prio { font: 11px "IBM Plex Mono", monospace; border: 1px solid var(--oranje); color: var(--oranje); border-radius: 5px; padding: 0 6px; }
.stapk { font-size: 13px; }
.stapk.jij { color: var(--oranje); font-weight: 600; }
.stapk.bezig { color: var(--cyaan); }
.stapk.klaar { color: var(--gedempt); }
.odkaartdl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 4px 0 0; font-size: 12.5px; }
.odkaartdl dt { color: var(--gedempt); }
.odkaartdl dd { margin: 0; overflow-wrap: anywhere; }
.vel.blanco { background: #f4f5f7 !important; }
.vel.blanco .geenbeeld { color: #6b7280; }
.stapel.bron .vel { background: #000; }
/* opdracht: per object */
.odobject { padding: 4px 16px 14px; border-top: 1px solid var(--rand); }
.odtekeningen { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.odtek { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: start; }
.odtek .stapel { display: block; }
.odtek .stapelvellen { margin: 16px 18px 4px 4px; }
.odtekinfo { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.odbladknoppen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
/* review: object in de bladenlijst, genummerde kaders, lijst wijzigingen */
.rvobj { font-weight: 600; font-size: 12.5px; padding: 12px 8px 0; color: var(--tekst); }
.rvkader { border: 2.5px solid var(--oranje) !important; background: rgba(251,146,60,.14) !important; border-style: dashed !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 0 4px rgba(251,146,60,.25); }
.rvkader.aan { background: rgba(251,146,60,.28) !important; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(251,146,60,.55); }
.rvkadernr { position: absolute; top: -20px; left: -2px; background: var(--oranje); color: #1a0d02; font: 700 10.5px "IBM Plex Mono", monospace;
  padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.rvkadernr.los { position: static; }
.rvwijz { border-bottom: 1px solid var(--rand); }
.rvwijzlijst { display: grid; padding: 0 10px 10px; }
.rvwijzitem { display: flex; gap: 8px; align-items: flex-start; text-align: left; background: none; border: 1px solid transparent; border-radius: 6px; padding: 6px;
  color: var(--tekst); cursor: pointer; font: inherit; font-size: 13px; }
.rvwijzitem:hover { background: #0f1626; border-color: var(--rand); }

/* ---------- fase 6a: historie ---------- */
.stapel.soort-vervallen { opacity: .55; filter: grayscale(1); }
.stapel.soort-vervallen .vel.voor { background: #2a3040; }
.hsbladen, .hsvergelijk { padding: 14px 16px; overflow: auto; display: grid; gap: 12px; }
.hsraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hsblad { margin: 0; display: grid; gap: 6px; border: 1px solid var(--rand); border-radius: 8px; padding: 8px; }
.hsblad img { width: 100%; background: #fff; }
.hsblad.st-gewijzigd { border-color: var(--oranje); }
.hsblad.st-nieuw { border-color: var(--groen); }
.hsblad.st-vervallen { opacity: .6; }
.hsblad figcaption { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.hsnaast { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hsnaast figure { margin: 0; display: grid; gap: 4px; }
.hsnaast img, .hsoverlay img { width: 100%; background: #fff; justify-self: start; align-self: start; }
.hsoverlay { display: grid; }
.hsoverlay img { grid-area: 1 / 1; }
.hsoverlay img + img { background: transparent; }

.hslink { background: none; border: 0; padding: 0; margin-top: 2px; color: var(--cyaan); font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.hslink:hover { text-decoration: underline; }
.hsgegevens { border-bottom: 1px solid var(--rand); }
.hsgegevens .filter { width: 100%; }
.hskeuze { width: 100%; }
.hsgegevens .hskeuzerij[hidden] { display: none; }
.hsgegevens:has(.hskeuzerij[hidden]) { display: none; }
.hsbalk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 16px 10px; padding: 8px 12px; border: 1px solid var(--oranje);
  border-radius: 8px; background: rgba(251,146,60,.1); font-size: 13px; }
.hsbalk .ruimte { flex: 1; }
.hsblad > a { display: block; }

/* ---------- fase 6b: PDF ---------- */
.setkop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setkop .ruimte { flex: 1; }
.pdfknop { display: inline-flex; gap: 6px; align-items: center; }
.pdfformaat { padding: 4px 6px; font-size: 12.5px; }
.pdfvak { display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: 10px 14px 14px; min-height: 0; height: calc(100vh - 130px); }
.pdfframe { width: 100%; height: 100%; min-height: 60vh; border: 1px solid var(--rand); border-radius: 6px; background: #525659; }
.pdfconcept { margin: 0; padding: 6px 10px; border: 1px solid var(--rood); border-radius: 6px; color: var(--rood); font-size: 13px; }
.pdfmeldingen { font-size: 13px; }
.pdfmeldingen summary { cursor: pointer; color: var(--oranje); }
.pdfmeldingen ul { margin: 6px 0 0; padding-left: 20px; max-height: 160px; overflow: auto; }

/* ---------- fase 6c: vrijgave ---------- */
.vgvak { padding: 14px 16px; overflow: auto; display: grid; gap: 12px; }
.vgkop { display: flex; gap: 16px; flex-wrap: wrap; }
.vgkop .filter { min-width: 160px; }
.vgbreed input, .vgoms { width: 100%; }
.vgkort { width: 100%; min-width: 260px; }
.vgstatus { font: 11.5px "IBM Plex Mono", monospace; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--rand); }
.vgstatus.gewijzigd { border-color: var(--oranje); color: var(--oranje); }
.vgstatus.nieuw { border-color: var(--groen); color: var(--groen); }
.vgstatus.vervallen { border-color: var(--rood); color: var(--rood); }
.vgblok { border: 1px solid var(--rood); border-radius: 8px; padding: 6px 12px; color: var(--rood); }
.vgblok p { margin: 4px 0; }
.vgok { color: var(--groen); margin: 0; }
.vgopdr { display: grid; gap: 4px; }
.knop.primair:disabled { opacity: .45; cursor: not-allowed; }
.knop.gevaar { border-color: var(--rood); color: var(--rood); }
.knop.gevaar:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- fase 7: kennisbank ---------- */
.kbraster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; padding: 0 20px 20px; }
.kblijst { display: grid; gap: 10px; }
.kbles { padding: 12px 14px; display: grid; gap: 6px; }
.kbkop { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kbtekst { margin: 0; white-space: pre-wrap; }
.kbstatus { font: 11.5px "IBM Plex Mono", monospace; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--rand); }
.kbstatus.voorstel { border-color: var(--oranje); color: var(--oranje); }
.kbstatus.actief { border-color: var(--groen); color: var(--groen); }
.kbstatus.fout, .kbstatus.afgewezen { border-color: var(--rood); color: var(--rood); }
.kbbeoordeel { display: grid; gap: 8px; }
.kbbeoordeel textarea, .kbbeoordeel input, .kbbeoordeel select, .kbles textarea { width: 100%; }
.kbvervangt { max-width: 180px; } .kbdrempel { max-width: 90px; }
@media (max-width: 1000px) { .kbraster { grid-template-columns: 1fr; } }
.kbafwijs { display: flex; gap: 8px; align-items: center; } .kbafwijs input { flex: 1; } .kbafwijs .kbdrempel { flex: 0 0 90px; }
.kbvoorbeeld, .kblijkt { background: var(--vlak2, rgba(255,255,255,.03)); border-radius: 6px; padding: 6px 8px; }
.kblijkt { border-left: 3px solid var(--oranje); }

/* ---------- 0.58: een voorstel in eigen woorden, de engine werkt uit (vijf stations per kaart) ---------- */
.kbles.beurt { border-color: #f5b041; box-shadow: 0 0 0 3px rgba(245,176,65,.10); }
.kbles.eng { border-color: var(--paars); box-shadow: 0 0 0 3px rgba(167,139,250,.10); }
.kbles.klaar { border-color: var(--groen); } .kbles.weg { border-color: var(--rood); opacity: .85; }
.kbles.nieuw { border-style: dashed; }
.kbst { display: flex; gap: 0; margin: 0 0 4px; }
.kbst1 { flex: 1; border-top: 3px solid var(--rand); padding: 5px 8px 2px; font-size: 11.5px; color: var(--gedempt); min-width: 0; }
.kbst1 b { display: block; color: var(--tekst); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbst1 .wie { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.kbst1.ok { border-color: var(--groen); } .kbst1.nu { border-color: #f5b041; background: rgba(245,176,65,.07); } .kbst1.nu b { color: #fcd34d; }
.kbst1.eng { border-color: var(--paars); background: rgba(167,139,250,.07); } .kbst1.eng b { color: #ddd6fe; }
.kbkop2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kbkop2 .titel { font-weight: 600; font-size: 14px; } .kbkop2 .sub { font-size: 12px; color: var(--gedempt); }
.kbkop2 .groen { color: var(--groen); }
.kbtwee { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 16px; }
@media (max-width: 1300px) { .kbtwee { grid-template-columns: 1fr; } }
.kbk { font-size: 11.5px; color: var(--gedempt); letter-spacing: .02em; } .kbk.paars { color: #c4b5fd; }
.kbwoorden { border-left: 3px solid #334155; padding: 6px 12px; color: var(--tekst); font-style: italic; white-space: pre-wrap; margin: 4px 0; }
.kbbijl { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 6px 0 2px; }
.kbitem { position: relative; width: 132px; cursor: zoom-in; }
.kbitem .lbl { font-size: 10.5px; color: var(--gedempt); display: block; margin-top: 6px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kbblad { position: relative; width: 96px; height: 68px; }
.kbblad i { position: absolute; inset: 0; background: #0b1220; border: 1px solid #cbd5e1; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.6); overflow: hidden; }
.kbblad img, .kbfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kbfoto { width: 96px; height: 68px; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.6); background: #e8e4da; transform: rotate(-2deg); }
.kbbadge { position: absolute; right: 22px; top: -8px; font-size: 10px; border-radius: 999px; padding: 1px 6px; background: #f5b041; color: #1a1200; font-weight: 600; }
.kbbadge.tel { background: var(--cyaan); color: #001a26; }
.kbweg { position: absolute; right: 26px; top: 46px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--rand); background: var(--kaart); color: var(--gedempt); font: 13px/1 sans-serif; cursor: pointer; opacity: 0; }
.kbitem:hover .kbweg, .kbitem:focus-within .kbweg { opacity: 1; }
.kbtools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.kbles .kn { font: inherit; font-size: 12.5px; border: 1px solid #334155; border-radius: 9px; padding: 5px 11px; background: var(--vlak2, #0b1220); color: var(--tekst); cursor: pointer; }
.kbles .kn:hover { border-color: var(--cyaan); } .kbles .kn.ja { border-color: var(--groen); background: rgba(52,211,153,.12); }
.kbles .kn.nee { border-color: var(--rood); color: #fca5a5; } .kbles .kn.eng { border-color: var(--paars); background: rgba(167,139,250,.14); }
.kbles .kn.zacht { border-style: dashed; color: var(--gedempt); }
.kbpaneel { border: 1px solid var(--rand); border-radius: 10px; padding: 8px 10px; margin-top: 8px; background: var(--vlak2, rgba(255,255,255,.02)); display: grid; gap: 6px; }
.kbpaneel input[type=text], .kbles input[type=text], .kbles textarea, .kbles select { font: inherit; width: 100%; background: var(--invoer, #0b1220); border: 1px solid #334155; border-radius: 10px; color: var(--tekst); padding: 7px 10px; }
.kbles textarea { min-height: 72px; resize: vertical; }
.kbbladen { display: flex; gap: 10px; flex-wrap: wrap; }
.kbbladkeus { background: none; border: 0; padding: 0; width: 132px; text-align: left; color: var(--tekst); cursor: pointer; font: inherit; }
.kbbladkeus .lbl { font-size: 10.5px; color: var(--gedempt); display: block; margin-top: 6px; line-height: 1.2; }
.kbbladkeus:hover .kbblad i { border-color: var(--cyaan); }
.kbkrab { position: relative; width: min(100%, 640px); margin-top: 4px; }
.kbkrab img { width: 100%; display: block; border-radius: 4px; border: 1px solid #cbd5e1; background: #000; }
.kbkrabcanvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.kbqr { display: grid; grid-template-columns: 126px 1fr; gap: 14px; align-items: start; border: 1px solid var(--cyaan); border-radius: 10px; padding: 10px 12px; margin-top: 8px; background: rgba(56,189,248,.05); }
.kbqrsvg { background: #fff; border-radius: 8px; padding: 6px; line-height: 0; } .kbqrsvg svg { width: 110px; height: 110px; display: block; }
.kbtl { border-left: 2px solid var(--rand); padding-left: 12px; margin: 10px 0 0 6px; }
.kbtl div { margin: 3px 0; font-size: 12px; color: var(--tekst); } .kbtl span { color: var(--gedempt); margin-right: 6px; font-family: "IBM Plex Mono", monospace; font-size: 11px; }
.kbwolk { position: relative; background: rgba(109,40,217,.08); border: 1px solid #6d28d9; border-radius: 12px; padding: 10px 12px; margin: 4px 0 8px; display: grid; gap: 6px; }
.kbwolk .wie, .kbvraag .wie { font-size: 11px; color: #c4b5fd; text-transform: uppercase; letter-spacing: .06em; }
.kbwolk .v { white-space: pre-wrap; }
.kbnotitie { border: 1px solid var(--rand); border-radius: 10px; background: var(--vlak2, #0b1220); padding: 10px 12px; margin: 4px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: pre-wrap; color: var(--tekst); overflow-wrap: anywhere; }
.kbnotitie .pad { font-family: inherit; font-size: 11px; color: var(--gedempt); margin-bottom: 6px; display: block; font-family: Inter, system-ui, sans-serif; }
.kbnotitie .nw { color: #a7f3d0; } .kbnotitie .zacht { color: var(--gedempt); }
.kbnk { display: inline-flex; flex-direction: column; border: 1px solid #334155; border-radius: 10px; padding: 7px 10px; background: var(--vlak2, #0b1220); min-width: 210px; max-width: 100%; margin: 2px 0; vertical-align: top; }
.kbnk.aan { border-color: var(--paars); background: rgba(167,139,250,.10); } .kbnk b { font-size: 13px; } .kbnk .id { font-size: 11px; color: var(--paars); } .kbnk .oms { font-size: 11.5px; color: var(--gedempt); }
.kblijktop { font-size: 12.5px; margin: 6px 0; } .kblijktop code { color: #ddd6fe; background: #1e1b4b; border-radius: 4px; padding: 0 4px; }
.kbvraag { border: 1px solid #f5b041; border-radius: 10px; padding: 8px 10px; margin: 8px 0; background: rgba(245,176,65,.06); display: grid; gap: 4px; }
.kbvraag .wie { color: #fcd34d; } .kbvraag.eig { border-color: var(--cyaan); background: rgba(56,189,248,.06); } .kbvraag.eig .wie { color: var(--cyaan); }
.kbvraag.beantwoord { border-style: dashed; }
.kbvb { border: 1px solid var(--rand); border-radius: 10px; padding: 6px 8px; background: var(--vlak2, #0b1220); margin: 6px 0; white-space: pre-wrap; }
.kbzelf { margin-top: 8px; } .kbzelf summary { cursor: pointer; color: var(--gedempt); font-size: 12.5px; }
.kbles label.veld { display: block; margin: 6px 0; } .kbles label.veld > span { display: block; font-size: 11.5px; color: var(--gedempt); margin-bottom: 2px; }
.kbkeuze { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; font-size: 12.5px; } .kbkeuze input { margin-top: 3px; }
.kbmeer2 > summary { cursor: pointer; font-size: 12px; color: var(--gedempt); } .kbmeer2[open] > summary { margin-bottom: 6px; }
.kbgroot { background: var(--kaart); border: 1px solid var(--rand); border-radius: 10px; padding: 10px; max-width: min(92vw, 1400px); display: grid; gap: 6px; }
.kbgroot img { max-width: 100%; max-height: 82vh; object-fit: contain; display: block; border-radius: 4px; }

/* ---------- fase 8: impact ---------- */
.implijst { display: grid; gap: 8px; margin: 8px 0; }
.impsig { border: 1px solid var(--rand); border-radius: 8px; padding: 8px 12px; }
.impsig.meenemen { border-color: var(--oranje); } .impsig.overslaan { opacity: .6; }
.impkop { display: flex; gap: 10px; align-items: center; }
.impsig p { margin: 4px 0; }
.impvia { font: 11.5px "IBM Plex Mono", monospace; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--rand); }
.impvia.kabel { color: var(--oranje); border-color: var(--oranje); } .impvia.kruisverwijzing { color: var(--accent, #38bdf8); border-color: currentColor; }
.impkeuze .knop.aan { background: var(--oranje); color: #111; }

/* ---------- impactkaart ---------- */
.impvlak { position: relative; margin: 10px 0; border: 1px solid var(--rand); border-radius: 10px; background: var(--vlak2, rgba(255,255,255,.02)); overflow: hidden; }
.impvlak.twee { display: grid; grid-template-columns: minmax(200px, 300px) minmax(80px, 1fr) minmax(260px, 420px); padding: 14px; min-height: 260px; }
.implaag { position: absolute; left: 0; top: 0; pointer-events: none; }
.impknoop { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center;
  background: var(--kaart, #111827); border: 1.5px solid var(--rand); border-radius: 10px; padding: 7px 10px; max-width: 210px; z-index: 1; color: inherit; font: inherit; }
.impknoop.bron { border: 2.5px solid var(--oranje); cursor: pointer; padding: 10px 14px; box-shadow: 0 0 0 4px rgba(251,146,60,.12); }
.impknoop.bron:hover { box-shadow: 0 0 0 6px rgba(251,146,60,.25); }
.impknoop.meenemen, .impblad.meenemen { border-color: #22c55e; }
.impknoop.overslaan, .impblad.overslaan { opacity: .65; border-style: dashed; }
.impknoop.klopt_niet, .impblad.klopt_niet { opacity: .45; border-color: #ef4444; border-style: dotted; }
.impknoop.gemengd { border-color: #eab308; }
.impkolom { display: flex; flex-direction: column; gap: 8px; z-index: 1; }
.impsetkop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.impblad { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; background: var(--kaart, #111827); border: 1.5px solid var(--rand);
  border-radius: 8px; padding: 5px 8px; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.impblad.bron { border-color: var(--oranje); grid-template-columns: 64px 1fr; }
.impblad.geheel { grid-template-columns: 1fr; border-style: dashed; cursor: default; }
.impblad img, .impblad .geenbeeld { width: 64px; height: 45px; object-fit: contain; background: #fff; border-radius: 3px; font-size: 9px; display: grid; place-items: center; }
.impblad:hover { box-shadow: 0 0 0 2px var(--oranje); }
.impvias { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.impvia.object { color: #94a3b8; } .impvia.bron { color: #a78bfa; border-color: #a78bfa; }
.implegenda { display: flex; gap: 14px; flex-wrap: wrap; color: var(--gedempt, #94a3b8); }
.implegenda i { display: inline-block; width: 20px; border-top: 3px solid; vertical-align: middle; margin-right: 5px; }
.impkeuzes { display: inline-flex; gap: 3px; }
.impk { font: 600 11.5px inherit; border: 1px solid var(--rand); background: transparent; color: inherit; border-radius: 5px; padding: 2px 7px; cursor: pointer; }
.impkeuzes.klein .impk { padding: 1px 6px; min-width: 22px; }
.impk.meenemen.aan { background: #22c55e; color: #04130a; border-color: #22c55e; }
.impk.overslaan.aan { background: #64748b; color: #fff; border-color: #64748b; }
.impk.klopt_niet.aan { background: #ef4444; color: #fff; border-color: #ef4444; }
.impwraster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
.impwvak { overflow: hidden; border: 1px solid var(--rand); border-radius: 6px; background: #fff; height: min(70vh, 720px); cursor: grab; }
.impwbinnen { position: relative; transform-origin: 0 0; }
.impwbinnen img { display: block; width: 100%; user-select: none; }
.impwlaag { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.impw.aan path { fill-opacity: .32; }
.impw.klopt_niet { opacity: .35; }
.impwlijst { display: flex; flex-direction: column; gap: 8px; max-height: min(74vh, 760px); overflow: auto; }
.impwrij { border: 1px solid var(--rand); border-radius: 8px; padding: 7px 9px; cursor: pointer; }
.impwrij.aan { border-color: var(--oranje); box-shadow: 0 0 0 1px var(--oranje); }
.impwrij p { margin: 3px 0; }
@media (max-width: 1000px) { .impwraster { grid-template-columns: 1fr; } }
.impwlabel { position: absolute; transform-origin: 0 100%; background: #111827; color: #fff; border: 1.5px solid; border-radius: 4px;
  font: 700 11px "IBM Plex Mono", monospace; padding: 0 4px; white-space: nowrap; pointer-events: none; }
.impw.aan path { fill-opacity: .34; }

/* ---------- impactkaart als netwerk (stapels) ---------- */
.odcentraal { margin-bottom: 16px; padding: 0; overflow: hidden; }
.odwissel { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--rand); }
.nkbalk { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 14px; }
.nkbalk .ruimte { flex: 1; }
.nkhouder { position: relative; }
.nkvak { position: relative; height: min(76vh, 820px); overflow: hidden; cursor: grab; touch-action: none;
  background: radial-gradient(circle at 50% 50%, rgba(251,146,60,.07), transparent 55%),
              radial-gradient(rgba(148,163,184,.13) 1px, transparent 1px) 0 0 / 22px 22px; }
.nkvak:active { cursor: grabbing; }
.nkwereld { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.nklijnen { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.nkrand { opacity: .55; transition: opacity .15s, stroke-width .15s; }
.nkrand.klopt_niet { opacity: .22; }
.nkvak.focus .nkrand { opacity: .12; }
.nkvak.focus .nkrand.licht { opacity: 1; }
.nkknoop { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: opacity .15s; }
.nkknoop .stapelvellen { margin: 16px 18px 4px 4px; }
.nkknoop.bron .vel.voor { border: 2px solid var(--oranje); box-shadow: 0 0 0 6px rgba(251,146,60,.14), 0 14px 34px rgba(0,0,0,.55); }
.nkknoop.doel .vel.voor { box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.nkknoop:hover .vel.voor, .nkknoop.licht .vel.voor { border-color: var(--cyaan); }
.nkvak.focus .nkknoop:not(.licht):not(.buur) { opacity: .3; }
.nkknoop.gedimd { opacity: .35; }
.nkknoop.k-meenemen .vel.voor { border: 2px solid #22c55e; }
.nkknoop.k-overslaan { opacity: .6; } .nkknoop.k-overslaan .vel.voor { border: 2px dashed #64748b; }
.nkknoop.k-klopt_niet { opacity: .4; } .nkknoop.k-klopt_niet .vel.voor { border: 2px dotted #ef4444; }
.nkknoop.k-gemengd .vel.voor { border: 2px solid #eab308; }
.nkonder { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; max-width: 280px;
  background: rgba(10,15,28,.82); border-radius: 6px; padding: 3px 8px 5px; }
.nkknoop.bron .nkonder b { font-size: 15px; }
.nklabel { position: absolute; transform: translate(-50%, -50%); font: 600 11px "IBM Plex Mono", monospace; padding: 1px 6px; border-radius: 9px;
  background: #0b1120; border: 1px solid currentColor; white-space: nowrap; pointer-events: none; opacity: .85; }
.nklabel.kabel { color: #f59e0b; } .nklabel.kruisverwijzing { color: #38bdf8; } .nklabel.object { color: #94a3b8; }
.nkvak.focus .nklabel:not(.licht) { opacity: .15; }
.nkset { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 15px; padding: 5px 10px; border-radius: 8px; background: rgba(10,15,28,.7); border: 1px dashed var(--rand); pointer-events: none; }
.nkset.aan { border-color: var(--oranje); }
body.tblicht .nkonder, body.tblicht .nkset { background: rgba(255,255,255,.85); }
.nkgroep { position: absolute; border: 2px dashed rgba(251,146,60,.55); border-radius: 16px; background: rgba(251,146,60,.04); }
.nkgroep.licht { border-color: var(--oranje); background: rgba(251,146,60,.09); }
.nkgroepnaam { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 700; font-size: 14px; color: var(--oranje); }
.nkset.wolk { border: 0; background: rgba(10,15,28,.55); font-size: 16px; }
.nkset.wolk b { color: inherit; }
.nkwolk circle { transition: opacity .15s; }
.nkvak.focus .nkwolk { opacity: .16; }
.nkset.wolk.groot b { font-size: 30px; } .nkset.wolk.groot .klein { font-size: 18px; }
/* klapper (bronbladen) */
.nkrol { position: absolute; transform: translate(-50%, -50%); perspective: 900px; z-index: 5; outline: none;
  border: 2px dashed rgba(251,146,60,.55); border-radius: 18px; background: rgba(251,146,60,.05); }
.nkrol:focus-visible { border-color: var(--oranje); }
.nkrolkop { position: absolute; top: -52px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; white-space: nowrap; color: var(--oranje); }
.nkrolkop b { font-size: 16px; }
.nkrolbaan { position: absolute; inset: 0; overflow: hidden; border-radius: 16px;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.nkrolitem { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; cursor: pointer; will-change: transform, opacity; }
.nkrolitem .stapelvellen { margin: 8px 10px 3px 4px; }
.nkrolitem.aan .vel.voor { border: 2px solid var(--oranje); box-shadow: 0 0 0 6px rgba(251,146,60,.18), 0 12px 30px rgba(0,0,0,.6); }
.nkrolknoppen { position: absolute; bottom: -44px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; }
.nkknoop.nkuit { opacity: .16; }
.nkknoop.nkraak .vel.voor { box-shadow: 0 0 0 3px rgba(251,146,60,.5), 0 8px 22px rgba(0,0,0,.5); }
.nkbronlaag .nkrand { opacity: .9; }
.nkknoop.nkraak { z-index: 4; }
.nkknoop.nkraak .nkonder { background: rgba(10,15,28,.92); }
.nkwereld { will-change: transform; }
.nkvak.beweegt .vel, .nkvak.beweegt .nkrand, .nkvak.beweegt .nkknoop { transition: none !important; box-shadow: none !important; }
.nkvak.beweegt .nkonder { background: rgba(10,15,28,.9); }
.nkknoop .vel img { image-rendering: auto; }
.nkknoop.nkraak .vel.voor { border: 2px solid var(--wolk, var(--oranje)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wolk, #fb923c) 35%, transparent), 0 8px 22px rgba(0,0,0,.5); }
.impwvak.laden { display: grid; place-items: center; background: #000; }
.impwvak.laden img { max-width: 100%; max-height: 100%; opacity: .6; filter: blur(1px); }

/* ---------- TO-DO (werkstroom) en tab Documenten ---------- */
.tdkop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tdstappen { display: flex; gap: 3px; margin: 2px 0 4px; }
.tdstap { width: 22px; height: 5px; border-radius: 3px; background: var(--rand); }
.tdstap.k { background: var(--groen); }
.tdstap.n { background: var(--oranje); }
.tdtoel { margin: 2px 0 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vdoel { margin: 4px 0 2px; }
.vdoel .knop.aan { border-color: var(--oranje); color: var(--oranje); }
.tddialoog { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 90; }
.tddlgvak { background: var(--kaart, #111827); border: 1px solid var(--rand); border-radius: 10px; padding: 16px; width: min(560px, 92vw); display: flex; flex-direction: column; gap: 8px; }
.tddlgvak h3 { margin: 0; }
.objectknop.aan { border-color: var(--oranje); }
.tddockop { margin-bottom: 8px; }
.tddocgroep { margin-bottom: 14px; }
.tddocs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tddoc { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--rand); border-radius: 8px; padding: 6px; color: inherit; text-decoration: none; }
.tddoc:hover { border-color: var(--oranje); }
.tddocbeeld { height: 120px; display: grid; place-items: center; background: #0b1120; border-radius: 4px; overflow: hidden; }
.tddocbeeld img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tddocwat { display: flex; gap: 4px; flex-wrap: wrap; }
.tddocwat .pil { font-size: 11px; border: 1px solid var(--rand); border-radius: 9px; padding: 0 6px; cursor: pointer; }
.tddocwat .pil.naslag { cursor: default; color: var(--gedempt); }
.tddocnot { margin: 0; }
.nkvervolg { margin-top: 4px; border-color: var(--groen); color: var(--groen); }

.rail a.raillabel { height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.rail a.raillabel span { font-size: 9.5px; letter-spacing: .03em; font-weight: 600; }

/* ---------- TO-DO als werkbord ---------- */
.wbpagina { display: flex; flex-direction: column; gap: 14px; }
.wbbalk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wbnu { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border: 1px solid var(--rand); border-radius: 999px; font-size: 14px; color: var(--gedempt); }
.wbnu.aan { color: var(--tekst); border-color: var(--cyaan); background: color-mix(in srgb, var(--cyaan) 10%, transparent); }
.wbbord { display: grid; grid-template-columns: repeat(4, minmax(280px, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1250px) { .wbbord { grid-template-columns: repeat(2, minmax(260px, 1fr)); } }
.wbkolom { background: var(--kaart, #0f172a); border: 1px solid var(--rand); border-radius: 12px; min-height: 240px; display: flex; flex-direction: column; }
.wbkolom.k-binnen { border-top: 4px solid var(--oranje); }
.wbkolom.k-engine { border-top: 4px solid var(--cyaan); }
.wbkolom.k-review { border-top: 4px solid #eab308; }
.wbkolom.k-klaar { border-top: 4px solid var(--groen); }
.wbkolkop { display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 10px; border-bottom: 1px solid var(--rand); position: relative; }
.wbkolkop h3 { margin: 0; font-size: 17px; font-weight: 650; display: flex; gap: 8px; align-items: center; letter-spacing: 0; text-transform: none; }
.wbkolkop p { margin: 3px 0 0; font-size: 12.5px; color: var(--gedempt); line-height: 1.35; }
.wbstap { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; border: 2px solid currentColor; }
.k-binnen .wbstap { color: var(--oranje); } .k-engine .wbstap { color: var(--cyaan); } .k-review .wbstap { color: #eab308; } .k-klaar .wbstap { color: var(--groen); }
.wbaantal { font-size: 12px; font-weight: 600; border-radius: 10px; padding: 1px 8px; background: var(--rand); color: var(--tekst); }
.wbpijl { position: absolute; right: -19px; top: 16px; font-size: 30px; line-height: 1; color: var(--gedempt); z-index: 2; }
.wbkaarten { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.wbleeg { color: var(--gedempt); font-size: 13px; margin: 6px 2px; }
.wbkaart { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--rand); border-radius: 10px; padding: 10px; color: inherit; text-decoration: none; background: rgba(255,255,255,.015); }
.wbkaart:hover { border-color: var(--cyaan); }
.wbbeeld { position: relative; padding: 4px 18px 0 2px; }
.wbbeeld .stapelvellen { margin: 16px 16px 4px 4px; }
.wbbeeld.bron .vel { background: #000; }
.wbkaart .vel { transition: transform .2s ease, box-shadow .2s ease; }
.wbkaart:hover .achter1 { transform: translate(12px, -10px) rotate(4deg); }
.wbkaart:hover .achter2 { transform: translate(22px, -18px) rotate(7.5deg); }
.wbkaart:hover .achter3 { transform: translate(2px, -24px) rotate(-6deg); }
.wbkaart:hover .voor { border-color: var(--cyaan); box-shadow: 0 12px 24px rgba(0,0,0,.45); }
.wbnrop { position: absolute; left: 10px; top: 24px; z-index: 3; font-weight: 700; font-size: 15px; padding: 2px 8px; border-radius: 6px; background: rgba(4,10,22,.82); border: 1px solid var(--rand); }
.wbwat { position: absolute; left: 10px; bottom: 10px; z-index: 3; font-size: 11.5px; padding: 1px 7px; border-radius: 6px; background: rgba(4,10,22,.82); color: var(--gedempt); }
.wbprio { position: absolute; right: 26px; bottom: 10px; z-index: 3; font-size: 11.5px; padding: 1px 7px; border-radius: 6px; background: var(--oranje); color: #111; font-weight: 600; }
.wbtitel { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wbtitel b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbtitel span { font-size: 12.5px; color: var(--gedempt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbvoortgang { height: 5px; border-radius: 3px; background: var(--rand); overflow: hidden; }
.wbvoortgang span { display: block; height: 100%; background: var(--oranje); }
.wbstatus { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; font-size: 13px; background: rgba(255,255,255,.04); }
.wbstatus div { display: flex; flex-direction: column; min-width: 0; }
.wbstatus span:not(.wbspin):not(.wbicoon) { color: var(--gedempt); font-size: 12px; }
.wbstatus.jij { background: color-mix(in srgb, var(--oranje) 14%, transparent); } .wbstatus.jij b { color: var(--oranje); }
.wbstatus.bezig, .wbstatus.wacht { background: color-mix(in srgb, var(--cyaan) 12%, transparent); } .wbstatus.bezig b, .wbstatus.wacht b { color: var(--cyaan); }
.wbstatus.stil { background: color-mix(in srgb, #eab308 14%, transparent); } .wbstatus.stil b { color: #eab308; }
.wbstatus.fout { background: color-mix(in srgb, #ef4444 16%, transparent); } .wbstatus.fout b { color: #f87171; }
.wbstatus.klaar b { color: var(--groen); }
.wbicoon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1.5px solid currentColor; }
.wbstatus.jij .wbicoon { color: var(--oranje); } .wbstatus.fout .wbicoon { color: #f87171; } .wbstatus.stil .wbicoon { color: #eab308; } .wbstatus.klaar .wbicoon { color: var(--groen); }
.wbspin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--cyaan) 30%, transparent); border-top-color: var(--cyaan); animation: wbdraai .9s linear infinite; }
@keyframes wbdraai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wbspin { animation: none; border-top-color: var(--cyaan); } }

/* ---------- fase 9: thema licht en compact ---------- */
body.thema-licht .stapelvellen .vel, body.thema-licht .tddocbeeld { border-color: #c9ced8; }
body.thema-licht .wbnrop, body.thema-licht .wbwat { background: rgba(255,255,255,.9); color: #0f172a; }
body.thema-licht .wbkaart { background: #fff; }
body.thema-licht .tddlgvak { background: #fff; }
body.compact main { gap: 10px; padding: 12px; }
body.compact .wbkaarten { gap: 6px; padding: 8px; }
body.compact .wbkaart { padding: 7px; gap: 5px; }
body.compact .instrij { padding-top: 4px; padding-bottom: 4px; }

/* ---------- handleiding ---------- */
.hlpagina { display: grid; grid-template-columns: 240px minmax(0, 860px); gap: 20px; align-items: start; }
.hlinhoud { position: sticky; top: calc(var(--kop-h) + 16px); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.hlinhoud a { color: var(--gedempt); text-decoration: none; } .hlinhoud a:hover { color: var(--cyaan); }
.hlartikel { padding: 20px 28px; line-height: 1.6; font-size: 14.5px; }
.hlartikel h2 { margin-top: 0; } .hlartikel h3 { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--rand); }
.hlartikel code { font: 12.5px "IBM Plex Mono", monospace; background: var(--rand); padding: 0 4px; border-radius: 4px; }
.hltabel { margin: 8px 0 14px; }
@media (max-width: 1000px) { .hlpagina { grid-template-columns: 1fr; } .hlinhoud { position: static; } }

/* licht thema: vaste donkere vlakken omzetten (knoppen, velden, tabellen, panelen) */
body.thema-licht .knop:not(.primair) { background: #f4f6fa; color: var(--tekst); border-color: var(--rand); }
body.thema-licht .knop:not(.primair):hover { border-color: #9aa6b8; }
body.thema-licht .knop.primair { color: #fff; }
body.thema-licht input, body.thema-licht select, body.thema-licht textarea { background: #fff; color: var(--tekst); }
body.thema-licht .belpaneel, body.thema-licht .mappaneel { background: #fff; }
body.thema-licht #uitloggen { background: #f4f6fa; color: var(--tekst); }
body.thema-licht .wbstatus { background: #f1f4f8; }
body.thema-licht .code, body.thema-licht code { color: #1e293b; }
.hlartikel p { margin: 0 0 10px; }

/* ---------- plan 2 fase A: menu met labels en groepen, TEST-band, kruimelpad, snel zoeken ---------- */
:root { --rail-b: 76px; }
body.rail-compact { --rail-b: 56px; }
.rail { gap: 0; padding: 8px 0 6px; overflow-y: auto; }
.rail .logo { margin-bottom: 4px; flex: none; }
.rail .railgrp { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #475569; margin: 8px 0 2px; }
.rail .railsep { display: block; width: 60%; height: 1px; background: var(--rand); margin: 6px auto 0; }
.rail a { height: auto; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 2px; flex: none; }
.rail a span { font-size: 10.5px; line-height: 1.1; text-align: center; }
.rail a svg { flex: none; }
.rail a.raillabel { height: auto; }
.rail .ruimte { flex: 1; min-height: 8px; }
body.rail-compact .rail a span, body.rail-compact .rail .railgrp { display: none; }
body.rail-compact .rail a { min-height: 44px; }
.testband { position: fixed; z-index: 62; top: 0; left: 0; right: 0; height: 18px; background: #ea580c; color: #1c0a00; font-weight: 700; font-size: 11px; letter-spacing: .22em; text-align: center; line-height: 18px; }
body.omgeving-test .rail { top: 18px; }
body.omgeving-test .kop { top: 18px; }
body.omgeving-test main, body.omgeving-test #banners { margin-top: calc(var(--kop-h) + 18px); }
body.omgeving-test #banners:not(:empty) + main { margin-top: 0; }
.kop .pagina { white-space: nowrap; }
.kruimel { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gedempt); min-width: 0; overflow: hidden; white-space: nowrap; }
.kruimel a { color: var(--tekst); text-decoration: none; border-bottom: 1px dotted var(--gedempt); }
.kruimel a:hover { color: var(--cyaan); border-color: var(--cyaan); }
.kruimelsep { color: #475569; }
.kruimelhier { color: var(--gedempt); overflow: hidden; text-overflow: ellipsis; }
.kop .pagina + .kruimel:not([hidden]) { border-left: 1px solid var(--rand); padding-left: 12px; }
.snelzoek { display: flex; align-items: center; gap: 8px; min-width: 240px; max-width: 380px; flex: 0 1 380px; background: transparent; border: 1px solid var(--rand); border-radius: 8px; padding: 6px 10px; color: var(--gedempt); font: inherit; font-size: 12.5px; cursor: text; }
.snelzoek:hover { border-color: var(--cyaan); }
.snelzoek svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.snelzoek span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snelzoek kbd, .szhulp kbd { border: 1px solid #334155; border-radius: 4px; padding: 0 5px; font: 10.5px "IBM Plex Mono", monospace; }
@media (max-width: 1100px) { .snelzoek span { display: none; } .snelzoek { min-width: 0; flex: 0 0 auto; } }
.szachter { position: fixed; inset: 0; z-index: 95; background: rgba(2,6,14,.6); display: flex; justify-content: center; align-items: flex-start; padding-top: 9vh; }
.szvak { width: min(760px, 94vw); max-height: 76vh; display: flex; flex-direction: column; background: var(--kaart); border: 1px solid #334155; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.6); overflow: hidden; }
.szveld { border: 0; border-bottom: 1px solid var(--rand); border-radius: 0; padding: 16px 18px; font-size: 16px; background: transparent; }
.szveld:focus { outline: none; }
.szlijst { overflow-y: auto; padding: 6px 12px 12px; }
.szkop { display: flex; gap: 8px; align-items: center; margin: 12px 0 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #64748b; font-weight: 600; }
.szaantal { background: var(--rand); color: var(--tekst); border-radius: 8px; padding: 0 6px; letter-spacing: 0; }
.szbladen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.szblad { display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid transparent; border-radius: 8px; color: inherit; text-decoration: none; }
.szblad.aan, .szblad:hover { border-color: var(--cyaan); background: rgba(56,189,248,.07); }
.szvel { aspect-ratio: 1.414 / 1; background: #0b1120; border: 1px solid #26324a; border-radius: 3px; display: grid; place-items: center; overflow: hidden; margin-bottom: 3px; }
.szvel img { width: 100%; height: 100%; object-fit: contain; }
.szblad.geraakt .szvel { border-color: var(--oranje); box-shadow: 0 0 0 3px rgba(251,146,60,.2); }
.szblad b { font-size: 13px; }
.szset { font-size: 11.5px; color: var(--gedempt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.szvia { font-size: 11px; color: var(--oranje); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.szrij { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 7px; color: inherit; text-decoration: none; font-size: 13px; }
.szrij.aan, .szrij:hover { background: rgba(56,189,248,.1); }
.szrij .pil { font-size: 11px; border: 1px solid var(--rand); border-radius: 8px; padding: 0 7px; color: var(--gedempt); flex: none; }
.szles { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.szhulp { display: flex; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--rand); font-size: 11.5px; color: var(--gedempt); }
body.thema-licht .szvel { background: #fff; border-color: #c9ced8; }

.kop .knop, #uitloggen { white-space: nowrap; }
body.omgeving-test #omgeving { display: none; }
.kop .pil.context select { max-width: 220px; }
#uitloggen { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.logintest { background: #ea580c; color: #1c0a00; font-weight: 700; font-size: 11px; letter-spacing: .22em; text-align: center; border-radius: 6px; padding: 4px 0; margin-bottom: 6px; }

.kop { gap: 12px; }
.kop .kruimel:not([hidden]) { flex: 1 1 auto; }
body.met-kruimel .kop .pagina { display: none; }
body.met-kruimel .kop .pagina + .kruimel { border-left: 1px solid var(--rand); padding-left: 12px; }
.kruimel a, .kruimelhier { flex: 0 1 auto; min-width: 0; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kruimelhier { flex-shrink: 0; }
body.met-kruimel .snelzoek { flex: 0 1 240px; min-width: 150px; }
body.met-kruimel .snelzoek span { display: none; }
body.met-kruimel .snelzoek::after { content: "Zoeken"; font-size: 12.5px; flex: 1; text-align: left; }

/* ---------- plan 2 fase B: startpagina Overzicht ---------- */
.ovpagina { display: flex; flex-direction: column; gap: 26px; position: relative; min-width: 0; }
.ovblok { min-width: 0; }  /* #inhoud is een grid: zonder min-width 0 duwt de strook de pagina breed */
.ovsys { position: absolute; right: 0; top: -4px; display: flex; gap: 7px; align-items: center; font-size: 12px; color: var(--gedempt); text-decoration: none; z-index: 2; }
.ovsys .ovbol { width: 10px; height: 10px; border-radius: 50%; background: var(--gedempt); }
.ovsys.groen .ovbol { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.ovsys.geel .ovbol { background: #eab308; box-shadow: 0 0 0 3px rgba(234,179,8,.25); }
.ovsys.rood .ovbol { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.25); } .ovsys.rood { color: #f87171; }
.ovkop { margin: 0 0 12px; font-size: 17px; font-weight: 650; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; letter-spacing: 0; text-transform: none; }
.ovuitleg { font-size: 12px; color: var(--gedempt); font-weight: 400; }
.ovboven { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; }
.ovboven.zonder { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .ovboven { grid-template-columns: minmax(0, 1fr); } .ovblok.aandacht { order: -1; } }
.ovkaarten { display: grid; gap: 16px; }
.ovkaarten.groot { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.ovkaarten.klein { grid-template-columns: repeat(auto-fill, minmax(180px, 210px)); }
.ovkaarten.klein .wbtitel b { font-size: 13px; } .ovkaarten.klein .wbstatus { font-size: 12px; padding: 5px 8px; }
.ovachter { margin-top: 10px; display: inline-flex; }
.ovniets { display: flex; align-items: center; gap: 16px; border: 1px dashed var(--rand); border-radius: 12px; padding: 16px; color: var(--gedempt); }
.ovniets > div:nth-child(2) { display: flex; flex-direction: column; gap: 3px; } .ovniets b { color: var(--tekst); font-size: 15px; } .ovniets span { font-size: 12.5px; }
.ovniets .knop { margin-left: auto; }
.ovnietsvel { width: 92px; height: 65px; border: 1px dashed var(--gedempt); border-radius: 3px; opacity: .6; flex: none; }
.ovaandachten { display: flex; flex-direction: column; gap: 14px; }
.ovaandacht { display: block; border: 1px solid var(--rand); border-left: 3px solid var(--oranje); border-radius: 10px; padding: 10px; background: var(--kaart); color: inherit; text-decoration: none; }
a.ovaandacht:hover { border-color: var(--cyaan); }
.ovaandacht.les { border-left-color: var(--paars); }
.ovakop { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13.5px; }
.ovnet { position: relative; height: 130px; width: 276px; max-width: 100%; }
.ovnetlijn { position: absolute; inset: 0; width: 276px; height: 130px; }
.ovnetlijn line { stroke: var(--roze); stroke-width: 1.6; opacity: .75; }
.ovnetblad { position: absolute; width: 74px; height: 50px; border: 1px solid #3a4866; border-radius: 3px; background: #000; overflow: hidden; display: grid; place-items: center; }
.ovnetblad img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ovnetblad.bron { border-color: var(--cyaan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyaan) 30%, transparent); z-index: 2; }
.ovaonder { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; font-size: 12.5px; } .ovaonder span { color: var(--gedempt); font-size: 11.5px; }
.ovlessen { display: flex; flex-direction: column; gap: 10px; }
.ovles { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; }
.ovles:hover b { color: var(--cyaan); }
.ovlesblad { position: relative; width: 104px; height: 74px; flex: none; border: 1px solid #3a4866; border-radius: 3px; background: #fff; overflow: hidden; }
.ovlesblad img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ovlesblad.leeg { background: #0b1120; display: grid; place-items: center; color: var(--paars); font-weight: 700; }
.ovpin { position: absolute; width: 14px; height: 14px; margin: -14px 0 0 -2px; border-radius: 50% 50% 50% 0; background: var(--paars); transform: rotate(-45deg); border: 2px solid #0b1120; }
.ovlestxt { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; min-width: 0; } .ovlestxt span { font-size: 11.5px; color: var(--gedempt); }
.ovles.st-afgewezen .ovlestxt span { color: #f87171; } .ovles.st-actief .ovlestxt span { color: var(--groen); }
.ovstrook { display: flex; gap: 22px; overflow-x: auto; padding: 14px 2px 10px; scroll-snap-type: x proximity; }
.ovdag { display: flex; flex-direction: column; gap: 7px; flex: none; scroll-snap-align: start; }
.ovdagkop { font-size: 11px; color: var(--gedempt); letter-spacing: .08em; text-transform: uppercase; }
.ovdagrij { display: flex; gap: 12px; }
.ovmini { width: 132px; color: inherit; text-decoration: none; flex: none; }
.ovminibeeld { position: relative; }
.ovminibeeld.blad { width: 132px; height: 93px; border: 1px solid #3a4866; border-radius: 3px; background: #000; overflow: hidden; }
.ovminibeeld.blad img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ovmini.vg .ovminibeeld.blad, .ovmini.vg .stapelvellen .voor { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.3); }
.ovmini:hover .ovminibeeld.blad, .ovmini:hover .stapelvellen .voor { border-color: var(--cyaan); }
.ovmini.stapel .stapelvellen { margin: 12px 14px 2px 2px; }
.ovtag { position: absolute; right: 4px; top: 4px; z-index: 4; font-size: 9.5px; border-radius: 4px; padding: 0 4px; background: rgba(4,10,22,.85); border: 1px solid var(--rand); color: var(--gedempt); }
.ovtag.g { border-color: #22c55e; color: #86efac; }
.ovhis { position: absolute; left: 4px; bottom: 4px; font-size: 9.5px; color: var(--gedempt); background: rgba(4,10,22,.85); border-radius: 4px; padding: 0 4px; }
.ovminitxt { display: flex; flex-direction: column; margin-top: 4px; font-size: 11.5px; line-height: 1.25; }
.ovminitxt small { color: var(--gedempt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovleeg { margin: 0; }
body.thema-licht .ovtag, body.thema-licht .ovhis { background: rgba(255,255,255,.9); color: #0f172a; }
.ovmini.stapel .ovtag { right: auto; left: 4px; top: 16px; }

/* ---------- plan 2 fase B, ronde 2: vier weergaven (rustiger, vloeiender) ---------- */
.ovpagina { gap: 30px; padding: 6px 4px 20px; }
.ovgroet { display: flex; align-items: flex-start; gap: 20px; }
.ovgroet h2 { margin: 0; font-size: 25px; font-weight: 600; letter-spacing: -.01em; }
.ovgroet p { margin: 6px 0 0; color: var(--gedempt); font-size: 14.5px; max-width: 760px; line-height: 1.5; }
.ovgroet p b { color: var(--tekst); font-weight: 600; } .ovgroet p a { color: var(--cyaan); }
.ovpillen { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; }
.ovpil { display: inline-flex; gap: 7px; align-items: center; font-size: 12px; color: var(--gedempt); border: 1px solid var(--rand); border-radius: 999px; padding: 4px 11px; background: var(--kaart); text-decoration: none; white-space: nowrap; }
.ovpil.ovsys { position: static; }
.ovpil .wbspin { width: 10px; height: 10px; }
.ovpil.st-stil { color: #eab308; border-color: rgba(234,179,8,.4); }
.ovsectie { min-width: 0; }
.ovkop2 { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ovkop2 small { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; opacity: .8; }
.ovklein { font-size: 11.5px; color: var(--gedempt); }
.ovweekzin { margin: -8px 0 0; } .ovweekzin a { color: var(--cyaan); }
.bknr { font-size: 11px; color: var(--gedempt); border: 1px solid var(--rand); border-radius: 6px; padding: 0 5px; margin-right: 6px; font-weight: 500; }
.knop.bkknop { background: rgba(251,146,60,.14); color: #fdba74; border: 1px solid rgba(251,146,60,.45); white-space: nowrap; }
.knop.bkknop:hover { background: rgba(251,146,60,.25); }
.bkmeer { align-self: center; color: var(--gedempt); font-size: 12.5px; border: 1px dashed var(--rand); border-radius: 12px; padding: 14px 18px; text-decoration: none; }
/* bureau */
.bkrij { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 22px; }
.bk { border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--kaart) 100%, #fff 3%), var(--kaart)); border: 1px solid var(--rand); padding: 20px 20px 16px; min-width: 0; }
.bkbeeld { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: center; min-height: 190px; }
.bkbeeld.met { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.bkstapel { display: block; padding: 12px 18px 6px 4px; }
.bkstapel .stapelvellen { max-width: 300px; }
.bksat { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-decoration: none; color: inherit; padding-left: 24px; }
.bklijn { position: absolute; left: 0; top: 0; width: 40px; height: 100%; }
.bklijn path { fill: none; stroke: var(--roze); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: .7; vector-effect: non-scaling-stroke; }
.bksatbladen { display: flex; flex-direction: column; gap: 6px; }
.bksatblad { width: 96px; height: 67px; border: 1px solid color-mix(in srgb, var(--roze) 45%, var(--rand)); border-radius: 3px; background: #000; overflow: hidden; }
.bksatblad img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bksatzin { font-size: 11px; color: var(--roze); text-align: right; }
.bksat:hover .bksatblad { border-color: var(--roze); }
.bktit { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.bktit > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bktit b { font-size: 15.5px; } .bktit > div > span { font-size: 12px; color: var(--gedempt); }
.bktit .knop { margin-left: auto; }
.bk.st-fout { border-color: rgba(239,68,68,.45); }
/* de week */
.wwrij { display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; }
.rt { display: flex; flex-direction: column; gap: 6px; margin-right: 10px; }
.rtbalk { display: flex; gap: 8px; align-items: flex-end; height: 76px; border-bottom: 1px solid var(--rand); padding: 0 2px; }
.rtdag { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; color: var(--gedempt); opacity: .75; }
.rtdag.nu { opacity: 1; color: var(--tekst); }
.rtdag i { width: 16px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--cyaan), color-mix(in srgb, var(--cyaan) 25%, transparent)); display: block; }
.rtdag i.g { background: linear-gradient(180deg, #22c55e, rgba(34,197,94,.25)); }
.wwboot { background: none; border: 1px solid transparent; border-radius: 14px; padding: 10px 14px 12px; cursor: pointer; color: inherit; text-align: left; display: flex; flex-direction: column; gap: 2px; font: inherit; width: 250px; transition: background .2s; }
.wwboot:hover, .wwboot.aan { background: var(--kaart); border-color: var(--rand); }
.wwboot b { font-size: 13.5px; position: relative; z-index: 3; } .wwboot > span { font-size: 11.5px; color: var(--gedempt); position: relative; z-index: 3; }
.ww { position: relative; height: 150px; margin-bottom: 4px; }
.wwblad { position: absolute; left: 50%; top: 8px; width: 140px; height: 99px; margin-left: -70px; border: 1px solid #3a4866; border-radius: 3px; background: #000; overflow: hidden; transform-origin: 50% 130%; transition: transform .35s ease; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.wwblad img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wwblad.vg { border-color: #22c55e; }
.wwsets { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; padding: 16px; border-radius: 14px; background: var(--kaart); border: 1px solid var(--rand); }
.wwsets[hidden] { display: none; }
.wwset { width: 140px; color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.wwset small { color: var(--gedempt); } .wwset.vg small { color: #86efac; }
.wwsetbeeld .stapelvellen { margin: 10px 12px 4px 2px; }
.wwset.vg .stapelvellen .voor { border-color: #22c55e; }
/* rivier */
.rv { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, .9fr); gap: 18px; padding: 10px 6px 16px; min-height: 280px; }
.rv.compact { min-height: 230px; }
.rvbed { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; pointer-events: none; }
.rvbed path { fill: none; stroke: url(#ovrivier); stroke: color-mix(in srgb, var(--cyaan) 18%, transparent); stroke-width: 60; stroke-linecap: round; }
.rvkol { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rvlab { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gedempt); }
.rvlab.nu { color: #fb923c; text-align: center; }
.rvkol.komt .rvlab { text-align: right; }
.rvrij { display: flex; gap: 14px; align-items: flex-end; flex: 1; }
.rvkol.nu .rvrij { justify-content: center; align-items: flex-start; gap: 22px; }
.rvkol.komt .rvrij { justify-content: flex-end; }
.rvoud { max-width: 120px; text-align: center; } .rvoud span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.rvoud, .rvkomt { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--gedempt); font-size: 11px; }
.rvoud small, .rvkomt small { font-size: 10.5px; opacity: .8; }
.rvvel { aspect-ratio: 1.414; width: 84px; border: 1px solid #3a4866; border-radius: 3px; background: #000; overflow: hidden; }
.rvvel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rvvel.vg { border-color: #22c55e; }
.rvkomt .rvvel { border-color: color-mix(in srgb, var(--cyaan) 60%, transparent); }
.rvkomt.st-stil .rvvel { border-color: #eab308; }
.rvkomt > span { display: inline-flex; gap: 5px; align-items: center; }
.rvnu { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; width: 190px; }
.rv.compact .rvnu { width: 160px; }
.rvgroot { display: block; width: 100%; aspect-ratio: 1.414; border: 2px solid #fb923c; border-radius: 4px; background: #000; overflow: hidden; box-shadow: 0 0 0 6px rgba(251,146,60,.12), 0 0 34px rgba(251,146,60,.28); transition: transform .25s; }
.rvgroot:hover { transform: translateY(-3px); }
.rvgroot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rvnu b { font-size: 13px; margin-top: 4px; } .rvnu small { font-size: 11px; color: var(--gedempt); }
.rvnu .knop { margin-top: 4px; }
.rvleeg { display: flex; flex-direction: column; gap: 2px; align-items: center; color: var(--gedempt); padding-top: 30px; } .rvleeg b { color: var(--tekst); }
/* sterrenkaart */
.cb { position: relative; border-radius: 16px; background: radial-gradient(ellipse at 25% 30%, color-mix(in srgb, var(--cyaan) 7%, transparent), transparent 60%), radial-gradient(ellipse at 78% 28%, color-mix(in srgb, var(--paars) 7%, transparent), transparent 55%); }
.cbscheid { border-top: 1px dashed var(--rand); margin: 0 12px; }
.cblijn { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; overflow: visible; }
.cblijn path { fill: none; stroke: var(--roze); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: .6; }
.sk { position: relative; }
.sklijn { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.skboot { position: absolute; top: 10px; text-align: center; font-size: 11px; color: var(--gedempt); display: flex; flex-direction: column; gap: 1px; pointer-events: none; }
.skboot b { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.skster { position: absolute; aspect-ratio: 1.414; transform: translate(-50%, -50%); border: 1px solid #334155; border-radius: 3px; background: #000; overflow: visible; opacity: .5; transition: transform .25s, opacity .25s; z-index: 2; }
.skster img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 2px; }
.skster:hover { opacity: 1; transform: translate(-50%, -50%) scale(1.25); z-index: 6; }
.skster.recent { opacity: .9; border-color: #4b5d80; }
.skster.vg { border-color: #22c55e; }
.skster.geraakt { opacity: 1; border-color: var(--roze); box-shadow: 0 0 0 4px color-mix(in srgb, var(--roze) 18%, transparent); z-index: 4; }
.sknaam { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 3px; font-size: 11px; background: color-mix(in srgb, var(--achtergrond, #070a12) 80%, transparent); padding: 0 4px; border-radius: 4px; color: var(--roze); white-space: nowrap; pointer-events: none; }
.sklabel { padding: 20px; }
.skjij { display: flex; justify-content: center; gap: 26px; padding: 8px 0 18px; position: relative; z-index: 3; }
.skjijblad { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.skjijbeeld { width: 150px; aspect-ratio: 1.414; border: 2px solid #fb923c; border-radius: 4px; background: #000; overflow: hidden; box-shadow: 0 0 0 6px rgba(251,146,60,.12), 0 0 34px rgba(251,146,60,.28); }
.skjijbeeld img { width: 100%; height: 100%; object-fit: contain; display: block; }
.skjijblad > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .skjijblad small { font-size: 11px; color: var(--gedempt); }
.ovlos { display: flex; gap: 24px; flex-wrap: wrap; }
.ovlos .ovles { width: 320px; }
@media (max-width: 1100px) { .rv { grid-template-columns: 1fr; } .rvkol.komt .rvlab, .rvlab.nu { text-align: left; } .rvkol.nu .rvrij, .rvkol.komt .rvrij { justify-content: flex-start; } .bkrij { grid-template-columns: 1fr; } }
/* instellingen: keuze startpagina */
.spkeuzes { display: flex; gap: 12px; flex-wrap: wrap; }
.spkz { width: 156px; border: 1px solid var(--rand); border-radius: 12px; padding: 10px; cursor: pointer; background: var(--kaart); text-align: left; color: inherit; font: inherit; display: flex; flex-direction: column; gap: 2px; }
.spkz.aan { border-color: var(--cyaan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyaan) 20%, transparent); }
.spkz .vb { height: 84px; border-radius: 8px; background: #070b14; position: relative; overflow: hidden; margin-bottom: 6px; }
.spkz .vb i { position: absolute; border: 1px solid #33415c; border-radius: 2px; background: #0b1120; }
.spkz .vb i.o { border-color: #fb923c; box-shadow: 0 0 8px rgba(251,146,60,.5); }
.spkz b { font-size: 12.5px; } .spkz span { font-size: 11px; color: var(--gedempt); line-height: 1.35; }
.spkz small { color: var(--gedempt); font-weight: 400; }

/* ---------- plan 2 fase B, ronde 3: beweging (rustig, nooit afleidend) ---------- */
.rv { overflow: hidden; border-radius: 0 0 16px 16px; }
.rvbed { height: 100%; top: 0; bottom: auto; }
.rvlaag { will-change: transform; }
.rvlaag.l1 { animation: ovstroom 46s linear infinite; opacity: .55; }
.rvlaag.l2 { animation: ovstroom 29s linear infinite; opacity: .45; }
.rvlaag.l3 { animation: ovstroom 19s linear infinite; opacity: .5; mix-blend-mode: screen; }
@keyframes ovstroom { from { transform: translateX(0); } to { transform: translateX(-1000px); } }
.rvoud { animation: ovdobber var(--zd, 7s) ease-in-out var(--zv, 0s) infinite; }
@keyframes ovdobber { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.rvgroot { animation: ovadem 4.5s ease-in-out infinite; }
.rvnu:nth-child(2) .rvgroot { animation-delay: -1.5s; } .rvnu:nth-child(3) .rvgroot { animation-delay: -3s; }
.skjijbeeld { animation: ovadem 4.5s ease-in-out infinite; }
@keyframes ovadem { 0%, 100% { box-shadow: 0 0 0 5px rgba(251,146,60,.10), 0 0 24px rgba(251,146,60,.20); } 50% { box-shadow: 0 0 0 9px rgba(251,146,60,.16), 0 0 46px rgba(251,146,60,.38); } }
.skster { animation: ovzweef var(--zd, 7s) ease-in-out var(--zv, 0s) infinite, ovster .7s ease-out var(--in, .2s) both; }
@keyframes ovzweef { 0%, 100% { translate: 0 0; } 33% { translate: 2px -4px; } 66% { translate: -2px 3px; } }
@keyframes ovster { from { opacity: 0; scale: .6; } }
.skster.geraakt { animation: ovzweef var(--zd, 7s) ease-in-out var(--zv, 0s) infinite, ovster .7s ease-out var(--in, .2s) both, ovroze 3.2s ease-in-out infinite; }
@keyframes ovroze { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--roze) 14%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--roze) 24%, transparent), 0 0 22px color-mix(in srgb, var(--roze) 30%, transparent); } }
.cblijn path { stroke-dasharray: 5 7; animation: ovvloei 1.6s linear infinite; }
@keyframes ovvloei { to { stroke-dashoffset: -24; } }
.cblijn { animation: ovfade .8s ease-out both; }
@keyframes ovfade { from { opacity: 0; } }
.ovin { animation: ovop .6s cubic-bezier(.2,.7,.2,1) var(--in, 0s) both; }
@keyframes ovop { from { opacity: 0; translate: 0 12px; } }
.bklijn path { stroke-dasharray: 3 5; animation: ovvloei 1.6s linear infinite; }
.bk { transition: transform .25s, border-color .25s; } .bk:hover { transform: translateY(-2px); border-color: color-mix(in srgb, #fb923c 40%, var(--rand)); }
.wwboot:hover .wwblad { translate: 0 -3px; }
@media (prefers-reduced-motion: reduce) {
  .rvlaag, .rvoud, .rvgroot, .skjijbeeld, .skster, .skster.geraakt, .cblijn, .cblijn path, .ovin, .bklijn path { animation: none !important; }
}

/* ---------- ronde 4/5: alles op de achtergrond; de bron onder de muis laat zijn sets oplichten ----------
   De animatielijst van een ster blijft in elke toestand gelijk (anders start de verschijn-animatie opnieuw vanaf
   onzichtbaar = het 'doorschieten'). De gloed zit op ::after en gaat alleen via opacity. Oplichten snel (.3 s),
   terugzakken rustig (.9 s). */
.skster { animation: ovzweef var(--zd, 7s) ease-in-out var(--zv, 0s) infinite, ovster .7s ease-out var(--in, .2s) backwards;
  transition: transform .9s cubic-bezier(.25,.1,.25,1), opacity .9s ease, filter .9s ease, border-color .9s ease; }
.skster.geraakt { opacity: .62; border-color: color-mix(in srgb, var(--roze) 55%, #334155); box-shadow: none;
  animation: ovzweef var(--zd, 7s) ease-in-out var(--zv, 0s) infinite, ovster .7s ease-out var(--in, .2s) backwards; }
.skster::after { content: ""; position: absolute; inset: -3px; border-radius: 5px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--roze) 22%, transparent), 0 0 26px color-mix(in srgb, var(--roze) 38%, transparent);
  transition: opacity .9s ease; animation: ovgloed 2.4s ease-in-out infinite; }
@keyframes ovgloed { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
.sknaam { transition: opacity .9s ease; }
.skster.geraakt .sknaam { opacity: .7; }
.cblijn path { opacity: .16; transition: opacity .9s ease, stroke-width .9s ease; }
.cb.focus .skster { opacity: .2; filter: saturate(.6); }
.cb.focus .skster.licht { opacity: 1; filter: none; transform: translate(-50%, -50%) scale(1.06); z-index: 7; border-color: var(--roze);
  transition-duration: .3s; }
.cb.focus .skster.licht::after { opacity: 1; transition-duration: .3s; }
.cb.focus .skster.licht .sknaam { opacity: 1; transition-duration: .3s; }
.cb.focus .cblijn path.licht { opacity: .95; stroke-width: 2.2; transition-duration: .3s; }
.rvnu, .skjijblad { transition: opacity .9s ease; }
.cb.focus .rvnu, .cb.focus .skjijblad { opacity: .45; }
.cb.focus .rvnu.licht, .cb.focus .skjijblad.licht { opacity: 1; transition-duration: .3s; }
@media (prefers-reduced-motion: reduce) { .skster::after { animation: none !important; } }

/* ---------- plan 3: Instellingen → Skill ---------- */
.skversies { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.skkaart { width: 230px; min-height: 190px; border: 1px solid var(--rand); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 5px; background: var(--kaart); }
.skkaart.goed { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .14); }
.skkaart.uit { opacity: .55; }
.skkaart.nieuwe { border-style: dashed; }
.skkaart p { margin: 0; }
.skversie { font-size: 18px; }
.skpil { align-self: flex-start; font-size: 11px; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--rand); }
.skpil.goed { border-color: #22c55e; color: #4ade80; }
.skpil.nieuw { border-color: #38bdf8; color: #7dd3fc; }
.skpil.uit { color: var(--gedempt); }
.skengines { display: flex; flex-direction: column; gap: 8px; }
.skengine { background: var(--kaart); display: grid; grid-template-columns: 18px minmax(160px, 240px) 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--rand); border-radius: 10px; padding: 9px 13px; }
.skbol { width: 12px; height: 12px; border-radius: 50%; background: #94a3b8; }
.skbol.goed { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.skbol.let { background: #fb923c; box-shadow: 0 0 0 3px rgba(251, 146, 60, .25); }
.knop.let { border-color: rgba(251, 146, 60, .6); color: #fdba74; }
.skpoort { margin-top: 10px; font-size: 13px; color: #fdba74; background: rgba(251, 146, 60, .08); border: 1px solid rgba(251, 146, 60, .3); border-radius: 8px; padding: 8px 12px; }
.skvoorstellen { display: flex; gap: 12px; flex-wrap: wrap; }
.skvoorstel { background: var(--kaart); width: 330px; border: 1px solid var(--rand); border-left: 3px solid #a78bfa; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.skvoorstel.klaar { opacity: .65; border-left-color: var(--rand); }
.skvoorstel p { margin: 2px 0; }
@media (max-width: 700px) { .skengine { grid-template-columns: 18px 1fr; } .skkaart, .skvoorstel { width: 100%; } }
.rvvangnet:empty { display: none; }
.rvvangnet { border-top: 1px solid var(--rand); }
.rvvangkop { display: flex; align-items: center; gap: 8px; }

/* ---------- land: functie (=) en plaats (+), kasten als stapels ---------- */
.astabs { margin-top: 6px; }
.astabs .boomtab { font-size: 12px; padding: 4px 10px; }
.boomrij { position: relative; }
.boomplus { margin-left: 4px; width: 22px; height: 22px; flex: none; border-radius: 6px; border: 1px dashed var(--rand); background: transparent; color: var(--gedempt);
  font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.boomrij:hover .boomplus, .boomrij:focus-within .boomplus, .knoop.gekozen ~ .boomplus { opacity: 1; }
.boomplus:hover { color: var(--cyaan); border-color: var(--cyaan); }
@media (hover: none) { .boomplus { opacity: .6; } }
.plusmenu { position: absolute; z-index: 90; min-width: 230px; background: var(--kaart); border: 1px solid var(--rand); border-radius: 10px; padding: 5px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45); display: flex; flex-direction: column; }
.plusmenu button { text-align: left; background: none; border: 0; color: var(--tekst); padding: 7px 10px; border-radius: 6px; cursor: pointer; font: inherit; }
.plusmenu button:hover, .plusmenu button:focus { background: rgba(56, 189, 248, .1); outline: none; }
.knoop.plaats .soortlabel, .soortlabel.plaats { border-color: #0891b2; color: #67e8f9; }
.kastenblok .kastzin { font-size: 15px; margin: 0; }
.kastenblok .kastzin b { color: #67e8f9; }
.kastterrein { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 18px 16px; }
.kastgebouw { flex: 1 1 170px; min-width: 170px; border: 1px solid var(--rand); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px;
  background: radial-gradient(circle at 20% 0%, rgba(56, 189, 248, .05), transparent 70%); }
.kastgebouw.buiten { border-style: dashed; flex-basis: 100%; background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(148, 163, 184, .06) 22px 34px); }
.kastgebouw.zonder { opacity: .75; border-style: dotted; }
.kastgebouwkop { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.kastgebouwkop b { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.kasten { display: flex; flex-wrap: wrap; gap: 14px; }
.kast { background: none; border: 0; color: inherit; font: inherit; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 104px; text-align: left; }
.kast b { font-size: 12.5px; }
.kaststapel { position: relative; width: 92px; height: 64px; margin: 7px 0 2px; }
.kaststapel i { position: absolute; inset: 0; border-radius: 4px; background: #f8fafc; border: 1px solid #cbd5e1; overflow: hidden; transition: transform .25s; }
.kaststapel i:nth-child(1) { transform: translate(7px, -7px); opacity: .45; }
.kaststapel i:nth-child(2) { transform: translate(3.5px, -3.5px); opacity: .7; }
.kaststapel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kast:hover .kaststapel i:nth-child(3), .kast:focus .kaststapel i:nth-child(3) { box-shadow: 0 0 0 2px #a78bfa; }
.kast:hover .kaststapel i:nth-child(1) { transform: translate(10px, -10px); }
@media (prefers-reduced-motion: reduce) { .kaststapel i { transition: none; } }

/* =====================================================================================================
   TO-DO-weergaven (Yuri 01-10): werktafel, nieuwe opdracht, lichtbak, voor/na-schuif
   ===================================================================================================== */
.wtpagina { display: grid; gap: 14px; }
.wtkop { display: flex; align-items: center; gap: 12px; }
.wtzin { margin: 0; font-size: 18px; line-height: 1.35; }
.wtzin b { color: var(--oranje); font-weight: 600; } .wtzin i { font-style: normal; color: var(--cyaan); font-weight: 600; }
.wttafel { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 200px; grid-template-areas: "jouw engine nieuw" "los los klaar"; gap: 18px 26px;
  padding: 22px 26px 18px; min-height: 480px; border-radius: 16px; border: 1px solid var(--rand);
  background: radial-gradient(ellipse at 25% 35%, rgba(251,146,60,.06), transparent 55%), radial-gradient(ellipse at 70% 30%, rgba(56,189,248,.06), transparent 50%),
    repeating-linear-gradient(0deg, rgba(148,163,184,.035) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(148,163,184,.035) 0 1px, transparent 1px 28px), var(--kaart); }
.wttafel.wtdrop { outline: 2px dashed var(--cyaan); outline-offset: -8px; }
.wtzone.jouw { grid-area: jouw; } .wtzone.engine { grid-area: engine; } .wtzone.nieuw { grid-area: nieuw; }
.wtzonekop { margin: 0 0 14px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gedempt); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.wtzonekop .stip { margin: 0; background: #475569; } .wtzonekop .stip.o { background: var(--oranje); } .wtzonekop .stip.b { background: var(--cyaan); }
.wtrij { display: flex; flex-wrap: wrap; gap: 34px 40px; align-items: flex-start; padding: 12px 0 4px 6px; }
.wtleeg { color: var(--gedempt); font-size: 13px; margin: 0; }
.wtop { position: relative; display: block; color: inherit; text-decoration: none; width: 230px; }
.wtop.groot { width: 270px; } .wtop.midden { width: 190px; }
.wtop .wtbeeld { position: relative; aspect-ratio: 1.414 / 1; }
.wtop.wtdrop .wtbeeld { outline: 2px dashed var(--cyaan); outline-offset: 10px; border-radius: 6px; }
.wtstapel { position: absolute; inset: 0; }
.wtvel { position: absolute; inset: 0; border-radius: 4px; background: #f8fafc; box-shadow: 0 8px 22px rgba(0,0,0,.45); overflow: hidden; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.wtvel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wtvel.blanco { background: repeating-linear-gradient(45deg, #e2e8f0 0 6px, #f1f5f9 6px 12px); display: grid; place-items: center; }
.wtleegtekst { font-size: 12px; color: #64748b; }
.wtvel.v1 { transform: translate(7px, -7px) rotate(1.5deg); opacity: .8; } .wtvel.v2 { transform: translate(13px, -13px) rotate(3deg); opacity: .55; }
.wtop:hover .wtvel.v1, .wtop:focus-visible .wtvel.v1 { transform: translate(40px, -16px) rotate(5deg); opacity: 1; }
.wtop:hover .wtvel.v2, .wtop:focus-visible .wtvel.v2 { transform: translate(78px, -28px) rotate(9deg); opacity: 1; }
.wtop:hover .wtvel.v0, .wtop:focus-visible .wtvel.v0 { transform: translate(-5px, 4px) rotate(-2deg); }
.wtstapel.bron .wtvel { background: #1e293b; } .wtstapel.bron .wtvel img { object-fit: cover; }
.wtbadge { position: absolute; z-index: 4; right: -12px; top: -16px; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; background: var(--oranje); color: #fff;
  box-shadow: 0 0 0 4px rgba(249,115,22,.18); animation: wtadem 3.2s ease-in-out infinite; white-space: nowrap; }
.wtbadge.bezig, .wtbadge.wacht { background: var(--cyaan); color: #04121c; box-shadow: none; animation: none; }
.wtbadge.fout { background: var(--rood); }
@keyframes wtadem { 50% { box-shadow: 0 0 0 9px rgba(249,115,22,.04); } }
.wtpinnetje { position: absolute; z-index: 4; left: 16%; top: 26%; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: var(--oranje); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.wtpinnetje { text-indent: 0; } .wtpinnetje::after { content: none; }
.wtscan { position: absolute; inset: 0; z-index: 3; border-radius: 4px; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(56,189,248,.3) 50%, transparent 70%);
  background-size: 220% 100%; animation: wtscan 2.6s linear infinite; }
@keyframes wtscan { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.wtlabel { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.wtlabel b { font-size: 13.5px; font-weight: 600; } .wtlabel span { font-size: 12px; color: var(--gedempt); }
.wtwat.st-jij { color: var(--oranje) !important; } .wtwat.st-bezig, .wtwat.st-wacht { color: var(--cyaan) !important; } .wtwat.st-fout, .wtwat.st-stil { color: var(--rood) !important; }
.wtpunten { display: flex; gap: 4px; margin-top: 3px; } .wtpunten i { width: 9px; height: 9px; border-radius: 50%; background: #334155; }
.wtpunten i.g { background: var(--groen); } .wtpunten i.o { background: var(--oranje); }
.wtnieuw { width: 100%; aspect-ratio: 1.414 / 1; border: 2px dashed var(--cyaan); border-radius: 8px; background: rgba(56,189,248,.05); color: var(--cyaan); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; transition: background .2s, transform .2s; }
.wtnieuw:hover, .wtnieuw.wtdrop { background: rgba(56,189,248,.12); transform: translateY(-2px); }
.wtnieuw span { font-size: 30px; line-height: 1; } .wtnieuw b { font-size: 14px; } .wtnieuw small { color: var(--gedempt); font-size: 11.5px; }
.wtlos { grid-area: los; display: flex; align-items: center; gap: 22px; border: 2px dashed rgba(148,163,184,.25); border-radius: 16px; padding: 16px 20px; }
.wtlosbeeld { display: flex; gap: 22px; }
.wtlosvel { position: relative; display: block; width: 92px; aspect-ratio: 1.33 / 1; color: inherit; text-decoration: none; cursor: grab; transform: rotate(-4deg); transition: transform .25s; }
.wtlosvel:nth-child(2n) { transform: rotate(5deg); } .wtlosvel:hover { transform: rotate(0) translateY(-3px); }
.wtlosvel.sleept { opacity: .4; }
.wtlosvel small { position: absolute; left: 0; top: calc(100% + 8px); font-size: 10.5px; color: var(--gedempt); white-space: nowrap; }
.wtlostal { position: absolute; z-index: 3; right: -9px; top: -9px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--oranje); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.wtlosuitleg { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; max-width: 360px; } .wtlosuitleg b { color: var(--oranje); } .wtlosuitleg span { color: var(--gedempt); }
.wtklaar { grid-area: klaar; align-self: end; justify-self: end; display: flex; align-items: flex-end; gap: 10px; opacity: .6; transition: opacity .2s; } .wtklaar:hover { opacity: 1; }
.wtklaarvel { position: relative; display: block; width: 52px; aspect-ratio: 1.414 / 1; }
.wtklaarvel i { position: absolute; right: -6px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--groen); color: #04120a; font-size: 10px; font-style: normal; display: grid; place-items: center; z-index: 3; }
@media (max-width: 1100px) { .wttafel { grid-template-columns: 1fr; grid-template-areas: "nieuw" "jouw" "engine" "los" "klaar"; } }
.rustig .wtvel, .rustig .wtbadge, .rustig .wtscan { transition: none !important; animation: none !important; }

/* ---- + nieuwe opdracht ---- */
.nbachter { position: fixed; inset: 0; z-index: 90; background: rgba(2,4,10,.7); display: grid; place-items: center; padding: 3vh 2vw; }
.nbvak { width: min(1180px, 96vw); max-height: 94vh; overflow: auto; background: var(--achtergrond); border: 1px solid var(--rand); border-radius: 16px; padding: 16px 20px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.nbkop { display: flex; align-items: center; } .nbkop h2 { margin: 0; font-size: 17px; }
.nbraster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; margin-top: 12px; }
@media (max-width: 900px) { .nbraster { grid-template-columns: 1fr; } }
.nbarchief { border: 1px solid var(--rand); border-radius: 14px; background: var(--kaart); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 380px; }
.nbkruimel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--gedempt); }
.nbkruimel select { border-radius: 999px; padding: 5px 12px; max-width: 260px; }
.nbuitleg { margin: 0; font-size: 12.5px; color: var(--gedempt); }
.nbsets { display: flex; flex-direction: column; gap: 12px; }
.nbgroepkop { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt); margin: 4px 0 2px; }
.nbrij { display: flex; flex-wrap: wrap; gap: 26px 30px; padding: 14px 6px 34px; }
.nbset { position: relative; width: 122px; aspect-ratio: 1.414 / 1; border: 0; padding: 0; background: none; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.nbset:hover .wtvel.v1 { transform: translate(14px, -8px) rotate(4deg); opacity: 1; } .nbset:hover .wtvel.v2 { transform: translate(26px, -14px) rotate(7deg); opacity: 1; }
.nbset.gekozen .wtvel.v0 { box-shadow: 0 0 0 3px var(--cyaan), 0 6px 16px rgba(0,0,0,.45); }
.nbset.gekozen::after { content: "✓"; position: absolute; right: -10px; top: -14px; z-index: 5; width: 22px; height: 22px; border-radius: 50%; background: var(--cyaan); color: #04121c; font-weight: 800; display: grid; place-items: center; }
.nbsetnaam { position: absolute; left: 0; top: calc(100% + 7px); width: 160px; font-size: 11.5px; display: flex; flex-direction: column; } .nbsetnaam span { color: var(--gedempt); }
.nbset.nieuw { border: 2px dashed var(--cyaan); border-radius: 5px; background: rgba(56,189,248,.05); color: var(--cyaan); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.nbset.nieuw span { font-size: 22px; line-height: 1; } .nbset.nieuw b { font-size: 12px; } .nbset.nieuw small { font-size: 10.5px; color: var(--gedempt); }
.nbrechts { border: 1px solid var(--rand); border-radius: 14px; background: var(--kaart); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.nbvraag { font-size: 15px; font-weight: 600; } .nbvraag b { color: var(--cyaan); } .nbvraag.klein { font-size: 13px; }
.nbchips { display: flex; gap: 8px; flex-wrap: wrap; }
.nbchip { border: 1px solid var(--rand); border-radius: 999px; padding: 6px 13px; background: transparent; color: var(--tekst); font: inherit; font-size: 12.5px; cursor: pointer; }
.nbchip.aan { border-color: var(--cyaan); background: rgba(56,189,248,.12); }
.nbrechts textarea { width: 100%; box-sizing: border-box; }
.nbbijlagen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-height: 58px; border-radius: 10px; }
.nbbijlagen.wtdrop { outline: 2px dashed var(--cyaan); outline-offset: 4px; }
.nbbijlage { position: relative; width: 70px; height: 52px; border-radius: 3px; background: #f8fafc; box-shadow: 0 4px 12px rgba(0,0,0,.4); overflow: hidden; display: grid; place-items: center; transform: rotate(-3deg); }
.nbbijlage:nth-child(2n) { transform: rotate(3deg); } .nbbijlage img { width: 100%; height: 100%; object-fit: cover; }
.nbbijlage.fout { outline: 2px solid var(--rood); } .nbext { font: 700 11px "IBM Plex Mono", monospace; color: #15803d; }
.nbweg { position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(15,23,42,.8); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; }
.nbtal { position: absolute; right: 3px; bottom: 3px; background: var(--oranje); color: #fff; border-radius: 8px; padding: 0 5px; font-size: 10.5px; font-weight: 700; }
.nbdrop { flex: 1; min-width: 160px; height: 52px; border: 2px dashed var(--rand); border-radius: 10px; background: transparent; color: var(--gedempt); font: inherit; font-size: 12px; cursor: pointer; }
.nbvoet { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.knop.groot { padding: 9px 18px; font-size: 14px; }

/* ---- lichtbak ---- */
body.lb-donker main { background: #05070d; }
.lbkamer { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) 190px; gap: 20px; padding: 18px; border-radius: 18px; background: #05070d; border: 1px solid #121a2a; color: #e2e8f0; min-height: calc(100vh - var(--kop-h) - 80px); }
@media (max-width: 1100px) { .lbkamer { grid-template-columns: 1fr; } }
.lbtitel { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #64748b; }
.lbmidden { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lbzinbalk { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px; } .lbzinbalk .lbtitel { grid-column: 1 / -1; }
.lbzin { margin: 0; font-size: 17px; } .lbzin b { color: #fdba74; }
.lbbak { position: relative; border-radius: 10px; padding: 22px; background: #eef6ff; box-shadow: 0 0 0 1px #1e293b, 0 0 120px 30px rgba(186,230,253,.14), 0 40px 80px rgba(0,0,0,.7); overflow: hidden; }
.lbbak.leeg { min-height: 380px; display: grid; place-items: center; color: #475569; }
.lbbak > .lbvel { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; }
.lbbak.tekent::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(56,189,248,.25) 50%, transparent 70%); background-size: 220% 100%; animation: wtscan 2.8s linear infinite; }
.lbleeg { color: #64748b; text-align: center; padding: 80px 0; }
.lbvelvak { position: relative; width: min(100%, calc((100vh - 360px) * 1.414)); margin: 0 auto; cursor: crosshair; user-select: none; touch-action: none; }
.lbvelvak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.lbvelvak .lbonder.half { opacity: .55; filter: grayscale(1); } .lbvelvak .lbboven.calque { mix-blend-mode: multiply; }
.lbzaklamp { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 160px at var(--x, 60%) var(--y, 45%), transparent 0 130px, rgba(5,7,13,.18) 260px, rgba(5,7,13,.38) 520px); transition: background .1s; }
.rustig .lbzaklamp { display: none; }
.lbwolk { position: absolute; border: 2px dashed #f97316; border-radius: 8px; background: rgba(249,115,22,.08); pointer-events: none; animation: lbwolk 3s ease-in-out infinite; }
@keyframes lbwolk { 50% { background: rgba(249,115,22,.16); } }
.lbpotlood { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.lbv { fill: rgba(220,38,38,.06); stroke: #dc2626; stroke-width: .45; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.lbv { stroke-width: 2.4px; } polyline.lbv { fill: none; }
.lbv.opgelost, .lbv.vervallen { stroke: #94a3b8; opacity: .5; } .lbv.opgelost_engine { stroke: #2563eb; }
.lbv.nieuw { stroke-dasharray: 5 4; }
.lbpin { position: absolute; z-index: 4; width: 30px; height: 30px; margin: -30px 0 0 0; border: 0; padding: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); transform-origin: 0 100%;
  background: #f97316; color: #fff; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.4); cursor: pointer; }
.lbpin b { transform: rotate(45deg); font-size: 13px; } .lbpin.opgelost, .lbpin.vervallen { background: #64748b; } .lbpin.opgelost_engine { background: #2563eb; }
.lbpin.nieuw { animation: lbval .8s cubic-bezier(.2,1.6,.4,1) both; } @keyframes lbval { from { opacity: 0; margin-top: -60px; } }
.lbbubbel { position: absolute; z-index: 6; width: 270px; background: #0d1322; color: #e2e8f0; border: 1px solid #f97316; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; box-shadow: 0 12px 30px rgba(0,0,0,.5); cursor: auto; }
.lbbubbel textarea { width: 100%; box-sizing: border-box; margin: 6px 0; } .lbbubbel p { margin: 6px 0; } .lbbubbel .knoppen { justify-content: flex-end; }
.lbsnel { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.lbsnel button { font: inherit; font-size: 11px; border: 1px solid #334155; border-radius: 999px; padding: 2px 8px; background: transparent; color: #94a3b8; cursor: pointer; }
.lbsnel button.aan { border-color: #f97316; color: #fed7aa; }
.lblagen { display: flex; flex-direction: column; gap: 12px; padding-top: 58px; }
.lblaag { position: relative; text-align: left; border-radius: 8px; background: rgba(238,246,255,.05); border: 1px solid #1e293b; padding: 9px 11px; font: inherit; font-size: 11.5px; color: #94a3b8; cursor: pointer; display: flex; flex-direction: column; transition: transform .25s; }
.lblaag b { color: #e2e8f0; font-size: 12.5px; } .lblaag .lboog { position: absolute; right: 8px; top: 8px; }
.lblaag.aan { transform: translateX(8px); } .lblaag.uit { opacity: .4; cursor: default; }
.lblaag.blauw.aan { border-color: #0284c7; background: rgba(2,132,199,.12); } .lblaag.rood.aan { border-color: #b91c1c; background: rgba(185,28,28,.12); }
.lblaag.oranje.aan { border-color: #f97316; background: rgba(249,115,22,.1); } .lblaag.grijs.aan { border-color: #64748b; background: rgba(100,116,139,.15); }
.lbgereed { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; background: #0b1120; border: 1px solid #1e293b; border-radius: 12px; padding: 4px; }
.lbgr { border: 0; border-radius: 9px; background: transparent; color: #cbd5e1; padding: 7px 10px; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.lbgr.aan { background: #f97316; color: #fff; font-weight: 600; }
.lbhint { font-size: 11.5px; color: #64748b; margin: 0; }
.lbonder { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.lbfilm { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.lbmini { position: relative; width: 86px; aspect-ratio: 1.414 / 1; border-radius: 3px; border: 0; padding: 0; background: #eef6ff; overflow: hidden; cursor: pointer; opacity: .7; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.lbmini img { width: 100%; height: 100%; object-fit: contain; } .lbmini.aan { opacity: 1; box-shadow: 0 0 0 3px var(--cyaan), 0 4px 10px rgba(0,0,0,.4); }
.lbmini .bst { position: absolute; right: 4px; bottom: 4px; width: 11px; height: 11px; border-radius: 50%; background: #64748b; border: 2px solid #fff; }
.lbmini .bst.akkoord { background: #22c55e; } .lbmini .bst.opmerking { background: #f97316; }
.lbmini span { position: absolute; left: 4px; top: 4px; background: #f97316; color: #fff; border-radius: 8px; padding: 0 5px; font-size: 10.5px; font-weight: 700; }
.lbnotities { display: flex; gap: 12px; flex-wrap: wrap; }
.lbnotitie { position: relative; width: 190px; background: #fef3c7; color: #422006; border-radius: 3px; padding: 10px 12px; font-size: 12px; transform: rotate(-1.2deg); box-shadow: 0 6px 14px rgba(0,0,0,.4); text-align: left; }
.lbnotitie:nth-child(2n) { transform: rotate(1.4deg); } .lbnotitie b { display: block; margin-bottom: 3px; }
.lbnotitie.st-opgelost { opacity: .5; } .lbnotitie.nieuw { background: rgba(167,139,250,.08); color: #c4b5fd; border: 2px dashed #a78bfa; font: inherit; font-size: 12px; cursor: pointer; transform: none; box-shadow: none; }
.lbnotknop { position: absolute; right: 6px; bottom: 4px; border: 0; background: transparent; color: #92400e; font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; }
.lbvoet { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.lbtijd { flex: 1; min-width: 300px; display: flex; align-items: center; gap: 12px; }
.lbwiel { position: relative; flex: 1; height: 50px; border-radius: 999px; background: #0b1120; border: 1px solid #1e293b; }
.lbspoor { position: absolute; left: 24px; right: 24px; top: 40%; height: 2px; background: #334155; }
.lbtik { position: absolute; top: 40%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); background: #334155; border: 2px solid #05070d; padding: 0; cursor: pointer; }
.lbtik.k { background: #22c55e; } .lbtik span { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10.5px; color: #64748b; }
.lbtik.nu { width: 22px; height: 22px; background: #f97316; box-shadow: 0 0 0 6px rgba(249,115,22,.18); } .lbtik.nu span { color: #fdba74; font-weight: 700; top: 20px; }
.lbbesluit { display: flex; gap: 10px; flex-wrap: wrap; }
.knop.groen { background: #22c55e; border-color: #22c55e; color: #04120a; }
.lbdias { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.lbdia { position: relative; display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center; min-height: 72px; border-radius: 8px; background: #0d1322; border: 1px solid #1e293b; padding: 8px; color: inherit; text-decoration: none; font: inherit; text-align: left; cursor: pointer; transition: transform .3s; }
.lbdia:hover { transform: translateX(-8px); } .lbdia.wtdrop { outline: 2px dashed var(--cyaan); }
.lbdiabeeld { position: relative; height: 52px; border-radius: 2px; background: #eef6ff; overflow: hidden; } .lbdiabeeld img { width: 100%; height: 100%; object-fit: contain; }
.lbdiabeeld.scan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(56,189,248,.45) 50%, transparent 70%); background-size: 220% 100%; animation: wtscan 2.6s linear infinite; }
.lbdiatekst { display: flex; flex-direction: column; font-size: 11px; color: #94a3b8; min-width: 0; } .lbdiatekst b { color: #e2e8f0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbdia.st-jij .lbdiatekst span { color: #fdba74; } .lbdia.st-bezig .lbdiatekst span, .lbdia.st-wacht .lbdiatekst span { color: #7dd3fc; }
.lbdia.nieuw { display: flex; flex-direction: column; justify-content: center; align-items: center; border-style: dashed; border-color: #334155; color: #94a3b8; font-size: 12px; }
.lbdia.nieuw b { color: #7dd3fc; }
.wtlosvel.lblos { width: 80px; margin: 6px 0 18px 10px; }
.rustig .lbwolk, .rustig .lbpin, .rustig .lbdia, .rustig .lblaag { animation: none !important; transition: none !important; }

/* ---- opdrachtpagina: voor/na ---- */
.vnbeeld { position: relative; width: min(100%, calc((100vh - 300px) * 1.414)); margin: 0 auto; background: #f8fafc; border-radius: 10px; overflow: hidden; cursor: ew-resize; user-select: none; touch-action: none; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.vnbeeld > img, .vnna img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.vnna { position: absolute; inset: 0; background: #f8fafc; }
.vnschuif { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: var(--cyaan); box-shadow: 0 0 12px var(--cyaan); }
.vnschuif::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: var(--cyaan); color: #04121c; display: grid; place-items: center; font-weight: 800; }
.vnlabel { position: absolute; top: 10px; font: 700 11px "IBM Plex Mono", monospace; padding: 3px 8px; border-radius: 6px; background: rgba(15,23,42,.85); color: #e2e8f0; }
.vnlabel.l { left: 10px; } .vnlabel.r { right: 10px; }
.vnstrook { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }

/* ---- review (alle weergaven): algemene opmerkingen, vormen, duidelijkere pin-uitleg ---- */
.rvalgemeen { border-top: 1px solid var(--rand); margin-top: 8px; }
.rvpin.alg { width: auto; padding: 0 6px; border-radius: 6px; background: #a78bfa; }
.rvvorm { position: absolute; border: 2px dashed #dc2626; border-radius: 6px; background: rgba(220,38,38,.06); pointer-events: none; }
.rvvorm.opgelost, .rvvorm.vervallen { border-color: #94a3b8; opacity: .5; }
.rvpinuitleg { font-size: 12px; color: var(--gedempt); } .rvpinuitleg b { color: var(--oranje); }
@media (prefers-reduced-motion: reduce) {
  .wtvel, .wtbadge, .wtscan, .lbwolk, .lbpin, .lbdia, .lblaag, .lbbak.tekent::after, .lbdiabeeld.scan::after { animation: none !important; transition: none !important; }
  .lbzaklamp { display: none; }
}

.nbkop .knop { margin-left: auto; }
.wttafel.engine-vrij { grid-template-columns: minmax(0, 1fr) 170px 200px; }
.wttafel.engine-vrij .wtzone.engine .wtrij { padding-top: 0; }

/* Yuri 01-10 (na proef): lichtbak = beoordelingsscherm van de werktafel; zaklamp tot een minimum; wijzigingen bijna
   transparant zodat de lijnen leesbaar blijven (alleen een dunne stippelrand met een hoekje, geen vlak, geen beweging) */
.lbzaklamp { background: radial-gradient(circle 260px at var(--x, 60%) var(--y, 45%), transparent 0 220px, rgba(5,7,13,.05) 700px); }
.lbwolk { background: none; border: 1px dashed rgba(234,88,12,.55); border-radius: 4px; animation: none; }
.lbwolk::before { content: ""; position: absolute; left: -1px; top: -1px; width: 7px; height: 7px; background: rgba(234,88,12,.8); border-radius: 0 0 3px 0; }
.lbterug { align-self: flex-start; margin-bottom: 6px; }

/* lichtbak: zoomen (Yuri 01-10). Het vak blijft even groot; het blad erin wordt groter getekend en verschoven. */
.lbvelvak { overflow: hidden; border-radius: 2px; }
.lbvel { position: absolute; left: 0; top: 0; width: 100%; }
.lbvel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.lbvel .lbonder.half { opacity: .55; filter: grayscale(1); } .lbvel .lbboven.calque { mix-blend-mode: multiply; }
.lbvelvak.ingezoomd { box-shadow: inset 0 0 0 1px rgba(56,189,248,.35); }
.lbvelvak.spatie, .lbvel.schuift { cursor: grabbing; }
.lbbak { padding-bottom: 46px; }
.lbzoombalk { position: absolute; right: 22px; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 4px; background: rgba(13,19,34,.9); border: 1px solid #243049; border-radius: 999px; padding: 3px; }
.lbzoombalk button { border: 0; background: transparent; color: #cbd5e1; font: inherit; font-size: 13px; min-width: 28px; height: 26px; border-radius: 999px; cursor: pointer; padding: 0 9px; }
.lbzoombalk button:hover { background: #1e293b; }
.lbzoomtal { font: 12px "IBM Plex Mono", monospace; color: #94a3b8; min-width: 46px; text-align: center; }

/* lichtbak: zwart vel (kleuren zoals getekend, zoals AutoCAD) */
.lbbak.donker { background: #0b0f17; box-shadow: 0 0 0 1px #1e293b, 0 40px 80px rgba(0,0,0,.7); }
.lbvel.donker { background: #000; }
.lbvel.laadt::after { content: "zwart vel wordt getekend…"; position: absolute; left: 50%; top: 45%; transform: translateX(-50%); color: #94a3b8; font-size: 13px; }
.lbbak.donker .lbzaklamp { display: none; }
.lbbak.donker .lbwolk { border-color: rgba(251,146,60,.6); }
.lbbak.donker .lbv { fill: rgba(248,113,113,.08); stroke: #f87171; }
.lbvelknop { border-right: 1px solid #243049 !important; border-radius: 999px 0 0 999px !important; }

/* het spoor (Yuri 01-10): 5 stations onder elke stapel; impact als schaduwvellen */
.wtspoor { display: flex; gap: 4px; margin-top: 5px; }
.wtspoor i { width: 22px; height: 5px; border-radius: 3px; background: #243049; }
.wtspoor i.k { background: var(--groen); } .wtspoor i.n { background: var(--oranje); } .wtspoor i.b { background: var(--cyaan); } .wtspoor i.p { background: var(--paars); }
.wtimpact { color: #c4b5fd !important; }
.wtbadge.impact { background: var(--paars); color: #1e1035; box-shadow: 0 0 0 4px rgba(167,139,250,.18); }
.wtschaduw { position: absolute; left: 100%; top: 0; bottom: 0; width: 70px; pointer-events: none; opacity: 0; transition: opacity .35s; }
.wtop:hover .wtschaduw, .wtop:focus-visible .wtschaduw { opacity: 1; }
.wtschvel { position: absolute; left: 22px; width: 60px; aspect-ratio: 1.414 / 1; background: #f8fafc; border-radius: 3px; overflow: hidden; opacity: .75; box-shadow: 0 0 0 1px rgba(167,139,250,.6), 0 4px 10px rgba(0,0,0,.4); transition: transform .4s; }
.wtschvel img { width: 100%; height: 100%; object-fit: contain; }
.wtschvel.s0 { top: -14px; } .wtschvel.s1 { top: calc(50% - 21px); left: 36px; } .wtschvel.s2 { bottom: -14px; }
.wtdraad { position: absolute; left: 0; top: 0; width: 40px; height: 100%; overflow: visible; }
.wtdraad path { fill: none; stroke: #a78bfa; stroke-width: 1.2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: .8; }
.wtop.groot .wtrij, .wtzone.jouw .wtrij { gap: 34px 90px; }
.lbstappen { display: flex; gap: 6px; background: #0b1120; border: 1px solid #1e293b; border-radius: 14px; padding: 4px; align-self: flex-start; }
.lbstap { display: flex; flex-direction: column; align-items: flex-start; border: 0; border-radius: 10px; background: transparent; color: #cbd5e1; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.lbstap small { font-size: 11px; color: #64748b; }
.lbstap.aan { background: #f97316; color: #fff; } .lbstap.aan small { color: #ffedd5; }
.lbstap.p.aan { background: #a78bfa; color: #1e1035; } .lbstap.p.aan small { color: #3b2470; }
.lbstap.klaar:not(.aan) { color: #86efac; }
.lbmidden.breed { grid-column: 1 / 3; }
.lbimpact { border-radius: 12px; background: var(--kaart); border: 1px solid #1e293b; min-height: 420px; padding: 8px; color: var(--tekst); }
.lbvoorlopig { margin: 0; font-size: 12.5px; color: #fde68a; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.35); border-radius: 10px; padding: 7px 12px; }

/* spoor B: herkenning ("lijkt 02-4000 · VK2 — klopt dat?") en ✎ Revisie */
.wtloswrap { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.wtherkend { display: flex; flex-direction: column; gap: 5px; max-width: 240px; font-size: 12px; background: rgba(13,19,34,.9); border: 1px solid #334155; border-radius: 10px; padding: 7px 9px; }
.wtherkend.z-zeker, .wtherkend.z-waarschijnlijk { border-color: rgba(251,191,36,.6); }
.wthvraag b { color: #fde68a; } .wthvraag small { color: #c4b5fd; }
.wthknoppen { display: flex; gap: 6px; }
.wthknoppen button { border: 1px solid #334155; background: transparent; color: #cbd5e1; border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 11.5px; cursor: pointer; }
.wthknoppen button.ja { border-color: #22c55e; color: #86efac; }
.wtlosbeeld { flex-wrap: wrap; align-items: flex-start; }
.nbherkend { margin: 0; font-size: 12.5px; color: #cbd5e1; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.35); border-radius: 10px; padding: 7px 11px; }
.nbherkend b { color: #fde68a; }
.wtherkend.z-geen .wthvraag b { color: #94a3b8; }
.wthknoppen.kol { flex-wrap: wrap; }

/* spoor C: zeker geraakt (de kabel/verwijzing is echt veranderd) */
.impzeker { display: inline-block; margin: 2px 0; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #a78bfa; color: #1e1035; }

/* kastenlade: tijdens het slepen van een los bestand */
.wtlade { position: fixed; z-index: 70; top: calc(var(--kop-h) + 16px); right: 16px; bottom: 16px; width: 270px; overflow: auto; padding: 14px; border-radius: 14px;
  background: rgba(9,13,23,.96); border: 1px solid #243049; box-shadow: 0 20px 60px rgba(0,0,0,.6); transform: translateX(calc(100% + 30px)); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.wtlade.open { transform: none; }
.wtladekop { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .wtladekop b { color: var(--cyaan); } .wtladekop span { font-size: 11.5px; color: var(--gedempt); }
.wtladeinst { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt); margin: 8px 0 6px; }
.wtladekasten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wtladekast { position: relative; padding: 6px 6px 8px; border: 1px solid #1e293b; border-radius: 8px; background: #0d1322; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.wtladekast .wtstapel { position: relative; aspect-ratio: 1.414 / 1; height: auto; margin-bottom: 6px; }
.wtladekast small { color: var(--gedempt); } .wtladekast.herkend { border-color: rgba(251,191,36,.6); }
.wtladekast.wtdrop { outline: 2px dashed var(--cyaan); outline-offset: 2px; background: rgba(56,189,248,.08); }
@media (prefers-reduced-motion: reduce) { .wtlade { transition: none; } }

/* algemene schema's (map _algemeen, 0027) */
.kastgebouw.algemeen { border-style: dashed; }
.kast.algemeen b, .nbset.algemeen b { color: #c4b5fd; }
.kast.nieuw { opacity: .75; } .kast.nieuw:hover { opacity: 1; }
.kastterrein > .kastgebouw.algemeen { flex: 1 1 100%; }
.kastgebouw.algemeen .kasten { display: flex; flex-wrap: wrap; gap: 18px; }
.kastgebouw.algemeen .kast { width: 170px; }

/* spraak (02-10): microfoon in de bubbel en bij de algemene notitie */
.lbtekstvak { position: relative; }
.lbtekstvak textarea { width: 100%; padding-right: 40px; box-sizing: border-box; }
.lbtekstvak textarea.tussen { color: #94a3b8; font-style: italic; }
.lbmic { position: absolute; right: 6px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #334155; background: #0f172a; font-size: 14px; line-height: 1; cursor: pointer; }
.lbmic:hover { border-color: #f472b6; }
.lbmic.uit { opacity: .35; cursor: help; filter: grayscale(1); }
.lbmic.luistert { border-color: #f472b6; background: rgba(244,114,182,.18); box-shadow: 0 0 0 0 rgba(244,114,182,.5); animation: lbmicgolf 1.4s ease-out infinite; }
@keyframes lbmicgolf { 0% { box-shadow: 0 0 0 0 rgba(244,114,182,.5); } 100% { box-shadow: 0 0 0 12px rgba(244,114,182,0); } }
.lbbubbel.luistert, .lbnotitie.luistert { border-color: #f472b6 !important; }
.lbnotitie.nieuw.open { display: flex; flex-direction: column; gap: 6px; min-width: 260px; }
.lbnotitie.nieuw.open .knoppen { display: flex; gap: 6px; justify-content: flex-end; }
.lbhint.uit { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .lbmic.luistert { animation: none; box-shadow: 0 0 0 3px rgba(244,114,182,.35); } }

/* schaafweek 02-10 */
.wtspoorvak { display: flex; flex-direction: column; gap: 3px; }
.wtspoorwoord { font-size: 11px; color: var(--gedempt); white-space: nowrap; }
.wtspoorwoord.n { color: #fdba74; } .wtspoorwoord.b { color: #7dd3fc; } .wtspoorwoord.p { color: #c4b5fd; }
.bkmeer { white-space: nowrap; }
.lbookkop { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--gedempt); font: inherit; }
.lbdias.dicht .lbdia { display: none; }
.lbzegt { border: 1px solid #1e293b; border-radius: 10px; padding: 10px 12px; background: #0b111d; font-size: 12px; line-height: 1.45; }
.lbzegt ul { margin: 6px 0 6px; padding-left: 16px; } .lbzegt li { margin: 3px 0; color: #cbd5e1; }
.lbzegt li.aanname { color: #fde68a; } .lbzegt li.nietvast { color: #fca5a5; }
.lbtwijfel { position: absolute; border: 1.5px dashed rgba(250,204,21,.85); background: rgba(250,204,21,.07); border-radius: 6px; pointer-events: none; }
.lbtwlabel { position: absolute; left: 0; top: 100%; margin-top: 3px; max-width: 260px; padding: 2px 7px; border-radius: 6px; background: rgba(250,204,21,.92); color: #1c1403; font-size: 11px; line-height: 1.3; white-space: normal; }
.lblaag.geel.aan { border-color: rgba(250,204,21,.7); background: rgba(250,204,21,.08); }
.lbhulp summary { cursor: pointer; font-size: 11.5px; color: var(--gedempt); }
.lbkamer { grid-template-columns: 140px minmax(0, 1fr) 220px; }
.lbvelvak { width: min(100%, calc((100vh - 270px) * 1.414)); }
.impk { font-size: 11px; padding: 2px 7px; }
.wttoel { font-size: 11.5px; color: #94a3b8; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lbtwijfel.boven .lbtwlabel { top: auto; bottom: 100%; margin: 0 0 3px; }
.lbtwijfel.binnen .lbtwlabel { top: 4px; left: 4px; margin: 0; }

/* telefoon als scanner (0.27.0) */
.wttelefoon { margin-top: 12px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px; border-radius: 12px; border: 1px solid #1e293b; background: #0b111d; color: #cbd5e1; cursor: pointer; font: inherit; }
.wttelefoon span { font-size: 22px; } .wttelefoon small { color: var(--gedempt); font-size: 11.5px; }
.wttelefoon:hover { border-color: #38bdf8; }
.tlachter { position: fixed; inset: 0; z-index: 80; background: rgba(2,6,15,.72); display: grid; place-items: center; }
.tlvenster { width: min(640px, 94vw); border-radius: 16px; background: #0b111d; border: 1px solid #243049; box-shadow: 0 30px 80px rgba(0,0,0,.6); padding: 16px 18px; color: #e2e8f0; }
.tlkop, .tlvoet { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tlvoet { margin-top: 14px; } .tlvoet .ruimte { flex: 1; }
.tlmidden { display: flex; gap: 18px; margin-top: 12px; align-items: flex-start; }
.tlqr { flex: none; background: #fff; border-radius: 10px; padding: 8px; line-height: 0; }
.tlqr svg { width: 220px; height: 220px; }
.tluitleg p { margin: 0 0 8px; line-height: 1.45; }
.tlteller { margin: 10px 0 6px; }
.tlbinnen { display: flex; flex-wrap: wrap; gap: 6px; }
.tlbinnen i { width: 54px; height: 40px; border-radius: 4px; background: #1e293b; overflow: hidden; }
.tlbinnen img { width: 100%; height: 100%; object-fit: cover; }
.wtherkend.z-gekozen { border-color: rgba(56,189,248,.45); }
.wtlosvel { position: relative; }
.wtlosweg { position: absolute; left: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #334155; background: #0f172a; color: #94a3b8; font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s; z-index: 3; }
.wtlosvel:hover .wtlosweg, .wtlosweg:focus { opacity: 1; } .wtlosweg:hover { color: #fca5a5; border-color: #f87171; }
.bestandweg { margin-left: 10px; }
.ovteller { color: var(--gedempt); }

/* de wijziging als gezicht */
.wtvel.v0 { position: relative; }
.wtuitsnede { position: absolute; inset: 0; overflow: hidden; background: #f8fafc; }
.wtuitsnede img { position: absolute; height: auto; max-width: none; object-fit: fill; }
.wtuitsnedetekst { position: absolute; left: 6px; right: 6px; bottom: 5px; padding: 2px 6px; border-radius: 5px; background: rgba(15,23,42,.78); color: #e2e8f0; font-size: 10.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtstapel.metuitsnede .wtvel.v0 > img { opacity: .15; }
.wtop:hover .wtuitsnede { opacity: 0; transition: opacity .25s; }
@media (prefers-reduced-motion: reduce) { .wtop:hover .wtuitsnede { transition: none; } }
.tbmeer { flex-basis: 100%; } .tbmeer > summary { cursor: pointer; font-size: 12px; color: var(--gedempt); padding: 2px 0; }
.tbmeer[open] > .tbfilters { margin-top: 8px; }
.nbklant { color: var(--gedempt); font-size: 12px; margin-left: 8px; }
.wtstapel.metuitsnede .wtvel.v0 { aspect-ratio: 1.414 / 1; height: auto; }
.wtstapel.metuitsnede .wtvel.v0 > img { width: 100%; height: 100%; object-fit: contain; }

/* overkant-venster */
.lbkabel { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 1.5px solid rgba(167,139,250,.75); background: rgba(167,139,250,.12); cursor: pointer; padding: 0; z-index: 2; }
.lbkabel:hover, .lbkabel:focus { background: rgba(167,139,250,.45); }
.lbkabel.los { border-color: rgba(251,146,60,.85); background: rgba(251,146,60,.15); }
.lbelders { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; max-height: 260px; overflow: auto; }
.lbelder { display: flex; gap: 8px; align-items: center; text-decoration: none; color: inherit; padding: 4px; border-radius: 6px; border: 1px solid #1e293b; }
.lbelder:hover { border-color: #a78bfa; }
.lbelder img, .lbelder i { width: 64px; height: 45px; object-fit: contain; background: #f8fafc; border-radius: 3px; flex: none; }
.lbelder span { display: flex; flex-direction: column; font-size: 11.5px; } .lbelder small { color: var(--gedempt); }
.lblaag.paars.aan { border-color: rgba(167,139,250,.6); background: rgba(167,139,250,.08); }
.lbkabel.veel { border-color: rgba(248,113,113,.85); background: rgba(248,113,113,.15); }
.lbkabelzin { font-size: 12.5px; margin: 6px 0; } .lbkabelzin.los { color: #fdba74; } .lbkabelzin.veel { color: #fca5a5; }

/* backupdoelen */
.bdtegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.bdtegel { border: 1px solid #1e293b; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: rgba(15,23,42,.35); }
.bdtegel.aan { border-color: rgba(52,211,153,.35); }
.bdkop { display: flex; align-items: center; gap: 8px; } .bdkop b { flex: 1; } .bdicoon { font-size: 18px; }
.bdveld { display: flex; align-items: center; gap: 6px; font-size: 12px; } .bdveld input[type=text], .bdveld input:not([type]) { flex: 1; min-width: 0; }
.bdschakel { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gedempt); }
.bdok { color: #6ee7b7; } .bdfout { color: #fca5a5; }
.bdstappen { margin: 0; padding-left: 18px; font-size: 12px; display: flex; flex-direction: column; gap: 6px; }
.bdstappen textarea { width: 100%; margin-top: 4px; font-family: ui-monospace, monospace; font-size: 11px; }
.bdkopieer { cursor: copy; word-break: break-all; } .bdlos { align-self: flex-start; opacity: .7; }

/* balken (tekst boven, regel onder) en backups per klant */
.bdbalk { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.bdbalkkop { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.bdbalkvak { height: 8px; border-radius: 99px; background: #1e293b; overflow: hidden; }
.bdbalkvak i { display: block; height: 100%; border-radius: 99px; background: #34d399; transition: width .4s; }
.bdbalkvak i.o { background: #fb923c; } .bdbalkvak i.r { background: #f87171; }
@media (prefers-reduced-motion: reduce) { .bdbalkvak i { transition: none; } }
.bdos { display: flex; gap: 4px; } .bdos button { font-size: 11.5px; padding: 2px 9px; border-radius: 6px; border: 1px solid #1e293b; background: transparent; color: var(--gedempt); cursor: pointer; }
.bdos button.aan { color: inherit; border-color: #38bdf8; }
.kbkaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 14px; }
.kbkaart { border: 1px solid #1e293b; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: rgba(15,23,42,.35); }
.kbkaart.aan { border-color: rgba(52,211,153,.35); }
.kbinstel { display: flex; flex-wrap: wrap; gap: 6px 14px; } .kbgetal { width: 70px; }
.kbmeer > summary { cursor: pointer; font-size: 12px; color: var(--gedempt); }
.kbmeer[open] { padding-bottom: 4px; } .kbweg td { opacity: .5; }
.kbklant { border: 1px dashed #334155; border-radius: 8px; padding: 10px; margin-top: 6px; }
.kbtotaal { padding: 4px 18px 0; } .kbkaarten { padding: 0 18px 4px; }
.kbinstel input.kbgetal { width: 72px; flex: none; }
.kbpakketten { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.kbpakket { border-top: 1px solid #1e293b; padding-top: 6px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.kbpakket.kbweg { opacity: .5; }

/* gemiste impact */
.lbgemist { position: absolute; transform: translate(-30%, -90%); background: none; border: 0; padding: 0; font-size: 16px; color: #fb923c; cursor: pointer; z-index: 3; text-shadow: 0 0 3px rgba(0,0,0,.6); }
.lbgemist.verwerkt { color: #64748b; }
.lbsnel button.aan { color: inherit; border-color: #fb923c; background: rgba(251,146,60,.12); }
.lbgm input.klein, .lbgm textarea.klein { width: 100%; box-sizing: border-box; margin-top: 6px; }
.lbkabel.vfout { border-style: dashed; border-color: rgba(248,113,113,.9); }

/* kabelcontrole */
.kcpagina { display: flex; flex-direction: column; gap: 10px; max-width: 1200px; }
.kckopregel { display: flex; align-items: center; gap: 14px; } .kckopregel h2 { margin: 0; font-size: 20px; }
.kczin { font-size: 15px; margin: 0; }
.kcgroep { border: 1px solid #1e293b; border-radius: 10px; padding: 8px 12px; background: rgba(15,23,42,.35); }
.kcgroep > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.kcrij { border-top: 1px solid #1e293b; padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.kckop { display: flex; gap: 10px; align-items: baseline; } .kckop .kcn { margin-left: auto; color: var(--gedempt); font-size: 12px; }
.kcuitleg { color: #fdba74; } .kcrij.vfout .kcuitleg, .kcrij.te_veel .kcuitleg { color: #fca5a5; }
.kcplekken { display: flex; flex-wrap: wrap; gap: 8px; }
.kcplek { display: flex; gap: 8px; align-items: center; padding: 5px; border: 1px solid #1e293b; border-radius: 8px; text-decoration: none; color: inherit; min-width: 220px; }
.kcplek:hover { border-color: #a78bfa; } .kcplek.vfout { border-color: rgba(248,113,113,.6); } .kcplek.vok { border-color: rgba(52,211,153,.35); }
.kcplek img { width: 72px; height: 51px; object-fit: contain; background: #f8fafc; border-radius: 4px; flex: none; }
.kcplek span { display: flex; flex-direction: column; font-size: 12px; } .kcplek small { color: var(--gedempt); }
.kcplek.kopie { opacity: .5; border-style: dashed; }

/* controles */
.ctegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ctegel { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid #1e293b; border-radius: 12px; background: rgba(15,23,42,.35); text-decoration: none; color: inherit; }
.ctegel:hover { border-color: #38bdf8; } .ctegel.let { border-color: rgba(251,146,60,.4); } .ctegel.ok { border-color: rgba(52,211,153,.3); }
.ctkop { display: flex; justify-content: space-between; align-items: center; } .ctgetal { font-size: 22px; font-weight: 700; }
.ctegel.let .ctgetal { color: #fdba74; } .ctegel.ok .ctgetal { color: #6ee7b7; } .ctegel p { margin: 0; font-size: 13px; }
.ctsub { margin: 14px 0 0; font-size: 15px; }
.ctsets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ctset { display: flex; gap: 8px; align-items: center; padding: 6px; border: 1px solid #1e293b; border-radius: 10px; text-decoration: none; color: inherit; }
.ctset:hover { border-color: #a78bfa; }
.ctset img, .ctset i { width: 84px; height: 59px; object-fit: contain; background: #f8fafc; border-radius: 4px; flex: none; }
.ctset span { display: flex; flex-direction: column; font-size: 12.5px; } .ctset small { color: var(--gedempt); }
.kcoordeel { display: flex; gap: 8px; align-items: center; }
.kcpagina.breed { max-width: none; } .nkpagina { min-height: 70vh; }

.ctcat { display: flex; flex-direction: column; gap: 8px; }
.ctcatkop { display: flex; align-items: center; gap: 10px; } .ctcatkop h3 { margin: 6px 0 0; font-size: 15px; }
.ctcatkop .ctgetal { font-size: 15px; } .ctgetal.let { color: #fdba74; } .ctgetal.ok { color: #6ee7b7; }
.ctalles { display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; }
.tbctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 18px 8px; padding: 9px 12px; border: 1px solid #1e293b; border-radius: 10px; background: rgba(15,23,42,.35); }
.tbctlzin { font-size: 13px; color: #6ee7b7; } .tbctlzin.let { color: #fdba74; }
.tbctlcat { font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid #1e293b; color: var(--gedempt); text-decoration: none; }
.tbctlcat.let { border-color: rgba(251,146,60,.5); color: #fdba74; } .tbctlcat:hover { border-color: #38bdf8; }
.tbctl .ruimte { flex: 1; }
.lbctl { border: 1px solid #1e293b; border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 12.5px; }
.lbctl.let { border-color: rgba(251,146,60,.4); } .lbctl ul { margin: 6px 0 0; padding-left: 16px; } .lbctl li { margin: 3px 0; color: #fdba74; } .lbctl li.info { color: var(--gedempt); }

/* ---------- keuren per set (02-10) ---------- */
.ktmenu { position: absolute; z-index: 60; width: 340px; border: 1px solid #334155; border-radius: 12px; background: #0b111d; padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.ktmenu h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; color: var(--gedempt); font-weight: 600; }
.ktseg { display: flex; border: 1px solid #1e293b; border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.ktseg button { flex: 1; font: inherit; font-size: 12.5px; padding: 6px 4px; background: none; border: 0; color: var(--gedempt); cursor: pointer; }
.ktseg button.aan { background: rgba(56,189,248,.14); color: var(--tekst); }
.ktcat { margin: 8px 0; } .ktcat b { font-size: 12.5px; }
.ktchip { font: inherit; display: inline-flex; align-items: center; margin: 4px 4px 0 0; padding: 3px 10px; border-radius: 999px; border: 1px solid #334155; background: none; font-size: 12px; color: var(--gedempt); cursor: pointer; }
.ktchip.aan { border-color: #38bdf8; color: var(--tekst); background: rgba(56,189,248,.08); }
.ktchip.alle { border-color: rgba(167,139,250,.5); color: #c4b5fd; } .ktchip.alle.aan { background: rgba(167,139,250,.12); color: #ede9fe; }
.ktonder { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 0; }
.ktstempel { position: absolute; z-index: 3; left: 8px; bottom: 8px; font: 700 10px "IBM Plex Mono", monospace; padding: 2px 6px; border-radius: 4px; transform: rotate(-4deg); background: rgba(255,255,255,.82); border: 1.5px solid; }
.ktstempel.ok { color: #059669; border-color: #10b981; } .ktstempel.open { color: #c2410c; border-color: #f97316; } .ktstempel.oud { color: #64748b; border-color: #94a3b8; }
.ktpagina { padding: 4px 4px 30px; }
.ktkop { display: flex; align-items: center; gap: 12px; } .ktzin { font-size: 16px; margin: 0; } .ktkop .ruimte, .ktlegenda .ruimte { flex: 1; }
.ktsub { margin: 4px 0 16px; font-size: 12.5px; color: var(--gedempt); } .ktlet { color: #fdba74; font-weight: 500; }
.kttafelplek { position: relative; }
.kttafel { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.kttafel.alleen .okblad { display: none; }
.ktblad { background: none; border: 0; padding: 0; text-align: left; color: var(--tekst); font: inherit; cursor: pointer; }
.ktvel { position: relative; background: #f8fafc; border-radius: 2px; overflow: hidden; transition: opacity .3s, box-shadow .2s; }
.ktvel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ktvel.ok { opacity: .38; } .ktblad:hover .ktvel { opacity: 1; box-shadow: 0 0 0 2px #38bdf8; }
.ktvel.let { box-shadow: 0 0 0 1px rgba(251,146,60,.5), 0 6px 22px rgba(251,146,60,.12); }
.ktbn { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--gedempt); margin-top: 5px; }
.ktbn b { color: var(--tekst); font-weight: 600; white-space: nowrap; } .ktbn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.ktring { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid #fb923c; box-shadow: 0 0 0 4px rgba(251,146,60,.2); pointer-events: none; animation: ktpuls 2.6s ease-in-out infinite; }
.ktring.tekenhoofd, .ktring.set { border-color: #f87171; box-shadow: 0 0 0 4px rgba(248,113,113,.2); }
.ktring.verwijzing { border-color: #38bdf8; box-shadow: 0 0 0 4px rgba(56,189,248,.2); }
.ktring.aanpassen { border-color: #ef4444; border-style: dashed; animation: none; }
.ktring.bewust { border-color: #10b981; box-shadow: none; animation: none; opacity: .7; }
.ktring.info { border-color: #94a3b8; box-shadow: none; animation: none; opacity: .6; width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.ktring.dim { opacity: .25; animation: none; }
@keyframes ktpuls { 50% { box-shadow: 0 0 0 8px rgba(251,146,60,.04); } }
.ktdraad { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.ktdraad path { fill: none; stroke-width: 2; pointer-events: stroke; }
.ktdraad .paars { stroke: #a78bfa; opacity: .75; } .ktdraad .rood { stroke: #f87171; opacity: .8; }
.ktdraad .los { stroke: #fb923c; stroke-dasharray: 4 4; } .ktdraad .losstip { fill: #fb923c; }
.ktlegenda { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; font-size: 11.5px; color: var(--gedempt); }
.ktlegenda .ktring { position: relative; display: inline-block; margin: 0 5px -3px 0; width: 12px; height: 12px; animation: none; box-shadow: none; }
.ktpaars { color: #a78bfa; } .ktoranje { color: #fb923c; }
.ktbezig { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 80px 0; }
.ktbezigstapel { position: relative; width: 160px; height: 112px; }
.ktbezigstapel i { position: absolute; inset: 0; background: #f8fafc; border-radius: 2px; opacity: .3; animation: ktblad 1.8s ease-in-out infinite; }
.ktbezigstapel i:nth-child(2) { animation-delay: .3s; } .ktbezigstapel i:nth-child(3) { animation-delay: .6s; }
@keyframes ktblad { 50% { transform: translate(8px,-8px); opacity: .7; } }
.ktachter { position: fixed; inset: 0; z-index: 70; background: rgba(2,6,15,.82); display: flex; align-items: center; justify-content: center; }
.ktvenster { width: min(1500px, 96vw); height: 92vh; background: #05070d; border: 1px solid #1e293b; border-radius: 14px; display: flex; flex-direction: column; }
.ktvkop { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #121a2a; } .ktvkop .ruimte { flex: 1; }
.ktvlijf { flex: 1; display: flex; gap: 16px; padding: 14px; min-height: 0; }
.ktgrootplek { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 0; }
.ktgroot { position: relative; background: #f8fafc; max-width: 100%; max-height: 100%; width: 100%; cursor: zoom-in; transition: transform .25s; }
.ktgroot.zoom { transform: scale(2.4); cursor: zoom-out; }
.ktgroot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ktgroot .ktring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.ktzij { width: 330px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.ktkaart { border: 1px solid #1e293b; border-radius: 10px; padding: 10px 12px; background: #0b111d; cursor: pointer; }
.ktkaart.akt { border-color: #fb923c; } .ktkaart.bewust { border-color: rgba(16,185,129,.4); } .ktkaart.aanpassen { border-color: rgba(239,68,68,.5); }
.ktkaart.info { opacity: .7; }
.ktkaart b { display: block; font-size: 13px; margin-top: 2px; } .ktkaart p { margin: 4px 0 8px; color: #cbd5e1; font-size: 12.5px; line-height: 1.4; }
.ktk { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vgkeur { margin: 0 0 10px; padding: 8px 10px; border: 1px solid #1e293b; border-radius: 8px; font-size: 12.5px; }
.ktrapport { display: none; }
@media print {
  body > *:not(.ktrapport) { display: none !important; }
  .ktrapport { display: block; color: #000; font: 11pt sans-serif; }
  .ktrapport section { break-inside: avoid; margin-bottom: 18pt; }
  .ktrvel { position: relative; width: 100%; border: 1px solid #999; } .ktrvel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .ktrvel .ktring { animation: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .ktring, .ktbezigstapel i { animation: none; } .ktgroot, .ktvel { transition: none; } }
.ktlaatste.open { color: #fdba74; border-color: rgba(251,146,60,.5); } .ktlaatste.ok { color: #6ee7b7; } .ktlaatste.oud { color: var(--gedempt); }

.ktlos { position: absolute; width: 0; height: 0; pointer-events: auto; }
.ktlos i { position: absolute; left: 0; top: 0; width: 46px; border-top: 2px dashed #fb923c; transform-origin: 0 0; transform: rotate(-35deg); }
.ktlos b { position: absolute; left: 36px; top: -40px; white-space: nowrap; font: 600 11px "IBM Plex Sans", sans-serif; color: #c2410c; background: rgba(255,247,237,.92); border: 1px solid #fdba74; border-radius: 4px; padding: 1px 5px; }
.ktlos.links i { transform: rotate(-145deg); } .ktlos.links b { left: auto; right: 36px; }
.dlbalk { position: fixed; right: 16px; bottom: 16px; z-index: 65; display: flex; flex-direction: column; gap: 8px; width: 340px; }
.dlbalk[hidden] { display: none; }   /* 0.51.1 (toets 2 §3.9): display:flex won van het hidden-attribuut */
.dlitem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #0b111d; border: 1px solid #334155; border-radius: 10px; padding: 9px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.dlitem.klaar { border-color: rgba(16,185,129,.55); } .dlitem.fout { border-color: rgba(239,68,68,.55); }
.dlnaam { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dlnaam b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dlnaam small { font-size: 11.5px; }
.dlvoort { flex-basis: 100%; order: 3; height: 4px; background: #1e293b; border-radius: 2px; overflow: hidden; } .dlvoort i { display: block; height: 100%; background: #38bdf8; transition: width .6s; }
.dlknoppen { display: flex; gap: 4px; }
.dlweg { background: none; border: 0; color: var(--gedempt); font-size: 16px; cursor: pointer; padding: 0 2px; }
@media print { .dlbalk { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .dlvoort i { transition: none; } }

.tbsetgroepen { display: flex; flex-direction: column; gap: 22px; }
.tbsetkop { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; padding: 0 0 6px; border-bottom: 1px solid #1e293b; }
.tbsetkop .linkknop { font-size: 14px; font-weight: 600; color: var(--tekst); }
.lijstfilter th { padding: 4px 4px 8px; } .lijstfilter input { width: 100%; min-width: 50px; font: inherit; font-size: 12px; padding: 3px 6px; background: #0b111d; border: 1px solid #1e293b; border-radius: 6px; color: var(--tekst); }

.dlbalk { align-items: flex-end; }
.dlbalk .dlitem { width: 340px; }
.dlknop { font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid #334155; background: #0b111d; color: var(--tekst); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.4); order: 9; }
.dlknop.klaar { border-color: rgba(16,185,129,.6); color: #6ee7b7; } .dlknop.loopt { border-color: rgba(56,189,248,.6); color: #7dd3fc; }
.ktmenu { z-index: 80; }
.tbsetgroepen { padding: 0 18px; }

.ktmidden { position: relative; width: 420px; max-width: 94vw; }
.ktmidden h3 { margin: 0 0 6px; font-size: 15px; }
.ktpen { position: absolute; pointer-events: none; object-fit: fill; }
.ktpenbadge { position: absolute; right: 6px; top: 6px; background: #1d4ed8; color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 6px; }
.ktterug { color: #93c5fd; }
.ktnotitie { border-color: rgba(59,130,246,.5); cursor: default; }
.ktnotitietekst { color: #bfdbfe !important; font-style: italic; }
.ktnotitiebeeld { width: 100%; background: #fff; border-radius: 4px; margin-top: 6px; }

/* stand per blad op de keurtafel (02-10): alles waar iets uit kwam licht op, elk met eigen kleur */
.ktvel.s-open { box-shadow: 0 0 0 1px rgba(251,146,60,.6), 0 6px 22px rgba(251,146,60,.14); }
.ktvel.s-aanpassen { box-shadow: 0 0 0 1.5px rgba(239,68,68,.75), 0 6px 22px rgba(239,68,68,.14); }
.ktvel.s-bewust { box-shadow: 0 0 0 1.5px rgba(16,185,129,.6); }
.ktvel.s-info { box-shadow: 0 0 0 1px rgba(148,163,184,.6); }
.ktbn.s-open span { color: #fdba74; } .ktbn.s-aanpassen span { color: #fca5a5; } .ktbn.s-bewust span { color: #6ee7b7; }

/* 0.39.6 (Yuri 02-10): foto's (staand) in een losse aanlevering bleven niet binnen hun vel en vielen over de tekst */
.wtlosvel .wtstapel:not(.metuitsnede) .wtvel.v0 { position: absolute; }
.wtlosvel .wtvel { overflow: hidden; }
/* herstel in delen en per blad */
.kthersteldeel { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kthersteldeel .pill { text-decoration: none; }
.ktherstelblad { cursor: default; border-style: dashed; }
.ktkastlijst { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; margin: 8px 0; }
.ktkast { text-align: left; border: 1px solid #1e293b; background: #0f172a; color: inherit; border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; }
.ktkast:hover { border-color: var(--cyaan); }
.ktkast small { display: block; font-size: 11px; }
.ktmidden .veld { width: 100%; box-sizing: border-box; }

/* 0.40 kast-voorstel uit de tekenhoofden: licht, gestippeld = nog niet vastgelegd */
.kvvak:empty { display: none; }
.kvoorstel { margin: 6px 0 10px; padding: 8px 12px; border: 1px dashed color-mix(in srgb, var(--accent, #6aa0ff) 55%, transparent);
  border-radius: 10px; background: color-mix(in srgb, var(--accent, #6aa0ff) 5%, transparent); font-size: .9em; }
.kvkop { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.kvboot { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, currentColor 8%, transparent); }
.kvkasten { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; align-items: center; }
.kvkast { display: inline-flex; gap: 6px; align-items: center; padding: 3px 8px; border-radius: 8px; cursor: pointer;
  border: 1px dashed color-mix(in srgb, currentColor 30%, transparent); opacity: .65; }
.kvkast.aan { opacity: 1; border-style: solid; border-color: color-mix(in srgb, var(--accent, #6aa0ff) 60%, transparent); }
.kvoorstel input.kvnaam { width: auto; min-width: 6ch; field-sizing: content; flex: none; }
.kvkast .kvn { white-space: nowrap; }
.kvnaam { font: inherit; font-weight: 600; background: transparent; border: 0; border-bottom: 1px dotted currentColor; color: inherit; padding: 0 2px; }
.kvn, .kvlos { opacity: .7; font-size: .92em; }
.kvlos { cursor: default; }
.kvverschil { margin: 4px 0; padding-left: 18px; color: #c9893a; }
.kvknoppen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kvklein { font-size: .85em; opacity: .75; margin: 4px 0; }
.kvhl { outline: 2px solid var(--accent, #6aa0ff); outline-offset: 2px; border-radius: 6px; }
.kvdim { opacity: .3; transition: opacity .15s; }
.kvtegels { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.kvtegel { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; padding: 4px; border-radius: 6px; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent); position: relative; }
.kvtegel input { position: absolute; top: 4px; left: 4px; }
.kvtegel img, .kvtegel .geenbeeld { width: 84px; height: 60px; object-fit: contain; background: #1d1f24; border-radius: 3px; }
.kvtegel.aan { border-color: var(--accent, #6aa0ff); box-shadow: 0 0 0 1px var(--accent, #6aa0ff); }

/* 0.41 kast herkennen: groepen als stapels echte bladen */
.kvgroepen { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; margin: 8px 0 10px; }
.kvgroep { width: 210px; cursor: pointer; user-select: none; }
.kvgroep.alg { cursor: default; opacity: .75; }
.kvgstapel { position: relative; }
.kvstapel { position: relative; height: 146px; margin: 12px 12px 8px 0; }
.kvstapel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.kvstapel img:nth-child(1) { transform: translate(12px,-12px); filter: brightness(.55); }
.kvstapel img:nth-child(2) { transform: translate(6px,-6px); filter: brightness(.75); }
.kvgroep:not(.alg):hover .kvstapel { transform: translateY(-2px); }
.kvgroep.kies .kvstapel img:last-of-type { outline: 3px solid var(--accent, #38bdf8); outline-offset: 2px; }
.kvvink { position: absolute; right: -4px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent, #38bdf8); color: #04121c; font-weight: 700; display: none; align-items: center; justify-content: center; z-index: 3; }
.kvgroep.kies .kvvink { display: flex; }
.kvoms { font-size: .86em; opacity: .7; margin-top: 2px; }
.kvont { font-size: .86em; margin-top: 3px; color: #c4b5fd; }
.kvsys { position: absolute; right: -6px; bottom: -6px; z-index: 4; background: #f59e0b; color: #1a1204; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 5px; }
.kvnaam2 { font: inherit; font-weight: 600; background: transparent; border: 1px solid var(--accent, #38bdf8); border-radius: 7px; color: inherit; padding: 4px 8px; min-width: 220px; }
.kvkasten2 { display: flex; flex-direction: column; gap: 12px; margin: 8px 0; }
.kvkastkader { border: 2px solid var(--accent, #38bdf8); border-radius: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--accent, #38bdf8) 4%, transparent); }
.kvkastkader.zeker { border-color: #34d399; background: rgba(52,211,153,.04); }
.kvkastkop { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.kvkastkop b { font-size: 1.1em; }
.kvcomps { display: flex; gap: 14px; flex-wrap: wrap; }
.kvcomp { border: 1px solid var(--rand, #1e293b); border-radius: 10px; padding: 6px 10px 8px; width: 210px; }
.kvcomp.los { border-style: dashed; opacity: .85; }
.kvck { display: flex; justify-content: space-between; font-size: .88em; gap: 6px; }
.kvalg { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; font-size: .9em; }
.kvoorstel input.kvnaam2 { width: auto; flex: 0 1 320px; min-width: 240px; }
.kvoorstel .kvknoppen > span { white-space: nowrap; }
.kvoorstel label.kvalg { display: inline-flex; width: auto; flex-direction: row; gap: 6px; align-items: center; white-space: nowrap; }
.kvoorstel label.kvalg input { width: auto; margin: 0; }
.kvkastkop .gedempt { white-space: nowrap; }
/* bladbeelden zijn donker getekend (CAD-kleuren op zwart): licht maken zoals de tegels in 'licht' */
.kvstapel img { filter: invert(1) hue-rotate(180deg); background: #000; }
.kvstapel img:nth-child(1) { filter: invert(1) hue-rotate(180deg) brightness(.55); }
.kvstapel img:nth-child(2) { filter: invert(1) hue-rotate(180deg) brightness(.75); }

/* 0.42 stil label op een setstapel */
.nietingedeeld { display: inline-block; margin-top: 3px; font-size: 11px; padding: 0 7px; border-radius: 999px; border: 1px dashed color-mix(in srgb, currentColor 35%, transparent); opacity: .65; cursor: pointer; }
.nietingedeeld:hover { opacity: 1; border-color: var(--accent, #38bdf8); }
.ovplan { margin: 4px 0 8px; padding-left: 18px; } .ovplan code { font-size: .9em; }
.ovvak { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* ===== 0.43 Boten & gebouwen: één beeld dat inzoomt ===== */
.zoombeeld { padding: 4px 18px 10px; }
.zbkop .kruimels { padding: 0; margin: 2px 0 2px; }
.zbtitel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 4px; }
.zbtitel h2 { margin: 0; font-size: 23px; }
.zbfeit { font-size: 13px; color: var(--gedempt, #94a3b8); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.zbfeit b { color: var(--tekst, #e2e8f0); }
.zbpaars { color: #a78bfa; }
.zbbalk { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; padding: 10px 0 12px; border-bottom: 1px solid var(--rand, #1e293b); margin-bottom: 6px; }
.zbbalk .knop.aan { background: rgba(167,139,250,.16); border-color: #a78bfa; }
.zbzoek { width: 210px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--rand, #1e293b); background: transparent; color: inherit; font: inherit; font-size: 12.5px; }
.zbnotitie { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: rgba(167,139,250,.07); border: 1px dashed rgba(167,139,250,.6); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; margin: 8px 0; }
.zbinst { margin: 10px 0 4px; }
.zbrij { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 2px; }
.zbrij h3 { margin: 0; font-size: 15px; }
.zbstapels { display: flex; flex-wrap: wrap; gap: 26px 24px; padding: 14px 4px 6px; }
.zbst { width: 190px; cursor: pointer; position: relative; outline: none; }
.zbpak { position: relative; height: 136px; }
.zbpak > i { position: absolute; inset: 0; border-radius: 6px; background: #000; border: 1px solid #263248; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.45); transition: transform .2s; }
.zbpak > i img, .zbmini i img, .zbbeeld i img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zbpak > i.c { transform: translate(8px,-8px); opacity: .5; } .zbpak > i.b { transform: translate(4px,-4px); opacity: .75; }
.zbst:hover .zbpak > i.a, .zbst:focus-visible .zbpak > i.a { outline: 2px solid var(--accent, #38bdf8); }
.zbst:hover .zbpak > i.c { transform: translate(11px,-11px); }
body.tblicht .zbpak > i, body.tblicht .zbbeeld i, body.tblicht .zbmini i { background: #fff; border-color: #c9ced8; }
body.tblicht .zbpak > i img, body.tblicht .zbbeeld i img, body.tblicht .zbmini i img { filter: invert(1) hue-rotate(180deg); }
.zbtabjes { position: absolute; right: -8px; top: 8px; display: flex; flex-direction: column; gap: 3px; z-index: 2; }
.zbtabjes span { font-size: 9.5px; background: #1b2440; border: 1px solid #2f3d63; border-left: 0; border-radius: 0 5px 5px 0; padding: 1px 6px; color: #cbd5e1; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zbst.leeg .zbpak { border: 1.5px dashed #2a3650; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--gedempt, #94a3b8); font-size: 12px; }
.zbst.los .zbpak > i { border-style: dashed; border-color: #a78bfa; }
.zbst.los .zbnaam { color: #a78bfa; }
.zbst.alg .zbnaam::before { content: "◇ "; color: var(--gedempt, #94a3b8); }
.zbst.doel .zbpak > i.a { outline: 3px solid #a78bfa; }
.zbst.sleept { opacity: .45; }
.zbgrip { position: absolute; left: 0; top: -16px; font-size: 10.5px; color: #a78bfa; }
.zbnaam { margin-top: 8px; font-weight: 600; font-size: 13px; }
.zbsub { font-size: 11.5px; color: var(--gedempt, #94a3b8); }
.zbstempels { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.zbsp { font-size: 10.5px; padding: 0 6px; border-radius: 999px; border: 1px solid currentColor; color: var(--gedempt, #94a3b8); white-space: nowrap; }
.zbsp.g { color: #34d399; } .zbsp.b { color: #38bdf8; } .zbsp.v { color: #a78bfa; } .zbsp.o { color: #f5b041; }
.zbnieuw { width: 190px; height: 136px; border: 1.5px dashed #a78bfa; border-radius: 8px; background: none; color: #a78bfa; font: inherit; cursor: pointer; }
.zbloopt { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.zblp { display: flex; gap: 9px; align-items: center; border: 1px solid var(--rand, #1e293b); border-radius: 10px; padding: 6px 10px; font-size: 12px; color: inherit; text-decoration: none; max-width: 380px; }
.zblp:hover { border-color: var(--accent, #38bdf8); }
.zbmini { width: 46px; height: 32px; position: relative; flex: none; } .zbmini i { position: absolute; inset: 0; border-radius: 4px; background: #000; overflow: hidden; }
.zbcomp { margin: 14px 0 6px; border-left: 3px solid #2f3d63; padding-left: 12px; }
.zbcomp.alg { border-left-color: #475569; }
.zbcomp h3 { margin: 0 0 8px; font-size: 13.5px; } .zbcomp h3 small { font-weight: 400; color: var(--gedempt, #94a3b8); margin-left: 8px; }
.zbbladen { display: flex; gap: 14px; flex-wrap: wrap; }
.zbbl { width: 164px; display: flex; flex-direction: column; color: inherit; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.zbbeeld { height: 112px; position: relative; display: block; }
.zbbeeld i { position: absolute; inset: 0; border-radius: 5px; background: #000; border: 1px solid #263248; overflow: hidden; }
.zbbl:hover .zbbeeld i { outline: 2px solid var(--accent, #38bdf8); }
.zbbl.meer .zbbeeld { border: 1.5px dashed #2a3650; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--gedempt, #94a3b8); }
.zbnr { font-size: 12px; font-weight: 600; margin-top: 5px; } .zbt { font-size: 11px; color: var(--gedempt, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zbtijd { display: flex; margin: 18px 0 4px; font-size: 11px; color: var(--gedempt, #94a3b8); }
.zbtijd > div { flex: 1; border-top: 2px solid #1e293b; padding: 6px 8px 0 0; position: relative; }
.zbtijd > div::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #34d399; }
.zbtijd > div.opdracht::before { background: #38bdf8; }
.zbinfo { margin: 6px 18px 18px; border-top: 1px solid var(--rand, #1e293b); padding-top: 8px; }
.zbinfo > summary { cursor: pointer; color: var(--gedempt, #94a3b8); font-size: 12.5px; padding: 4px 0; }
.zbdlg { width: min(1100px, 94vw); max-height: 88vh; overflow: auto; }

/* ===== 0.44 Opdelen in sets ===== */
.opdelen .odkop { display: flex; align-items: center; gap: 12px; padding: 14px 18px 4px; }
.opdelen .odkop h2 { margin: 0; }
.odstappen { display: flex; margin: 8px 18px 4px; }
.odstappen .odstap { flex: 1; padding: 8px 12px; border-top: 3px solid var(--rand, #1e293b); color: var(--gedempt, #94a3b8); font-size: 12.5px; cursor: pointer; display: flex; flex-direction: column; }
/* 0.51.1: alleen binnen .odstappen (Opdelen). Zonder die beperking gaf flex-direction:column de zin in het
   opdrachtdetail (ook .odstap) een hoogte van 380px: het lege vlak uit toets 2 §3.5. */
.odstappen .odstap b { color: var(--tekst, #e2e8f0); font-size: 13px; } .odstappen .odstap.klaar { border-top-color: #34d399; } .odstappen .odstap.aan { border-top-color: var(--accent, #38bdf8); background: rgba(56,189,248,.06); } .odstappen .odstap.later { opacity: .55; cursor: default; }
.odlijf { padding: 12px 18px 20px; }
.odkop2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.odbalk { height: 8px; border-radius: 4px; background: #1e293b; overflow: hidden; max-width: 520px; } .odbalk i { display: block; height: 100%; background: var(--accent, #38bdf8); transition: width .4s; }
.odset { border: 1px solid var(--rand, #1e293b); border-radius: 12px; margin: 0 0 12px; }
.odsetkop { display: flex; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--rand, #1e293b); flex-wrap: wrap; }
.odnr { width: 24px; height: 24px; border-radius: 50%; background: #1b2440; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.odsetkop input { font: inherit; font-weight: 600; font-size: 14px; background: transparent; border: 1px solid transparent; border-radius: 7px; color: inherit; padding: 3px 6px; width: 260px; }
.odsetkop input:hover, .odsetkop input:focus { border-color: var(--rand, #1e293b); outline: none; }
.odsp { font-size: 11px; padding: 0 7px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.odsp.g { color: #34d399; } .odsp.v { color: #a78bfa; } .odsp.o { color: #f5b041; }
.odstrook { display: flex; align-items: flex-start; overflow-x: auto; padding: 12px 14px 10px; }
.odpg { width: 150px; flex: none; cursor: pointer; position: relative; }
.odbl { height: 106px; border-radius: 4px; background: #fff; border: 1px solid #cbd5e1; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.odbl img, .odstapel img, .odmini img { width: 100%; height: 100%; object-fit: contain; display: block; }
.odpg:hover .odbl { outline: 2px solid var(--accent, #38bdf8); }
.odn { font-size: 11.5px; font-weight: 600; margin-top: 4px; } .odt { font-size: 10.5px; color: var(--gedempt, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odpg.weg .odbl { opacity: .25; filter: grayscale(1); } .odpg.weg .odn { text-decoration: line-through; color: var(--gedempt, #94a3b8); }
.odpg.weg::after { content: "negeren"; position: absolute; top: 40px; left: 42px; font-size: 11px; color: #f87171; border: 1px solid #f87171; border-radius: 6px; padding: 1px 6px; background: #0b0f18; }
.odtussen { width: 18px; flex: none; height: 106px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: transparent; }
.odtussen:hover { color: #a78bfa; background: linear-gradient(90deg, transparent 8px, rgba(167,139,250,.6) 8px, rgba(167,139,250,.6) 10px, transparent 10px); }
.odknip { display: flex; align-items: center; gap: 10px; margin: -4px 0 8px 14px; color: #a78bfa; font-size: 12px; cursor: pointer; }
.odknip .lijn { flex: 1; border-top: 1.5px dashed #a78bfa; } .odknip .weg { opacity: .6; border: 1px solid #a78bfa; border-radius: 6px; padding: 0 6px; } .odknip:hover .weg { opacity: 1; }
.odnotitie { background: rgba(167,139,250,.07); border: 1px dashed rgba(167,139,250,.55); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }
.odtwee { display: grid; grid-template-columns: 330px 1fr; gap: 20px; align-items: start; }
.odlinks { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 10px; }
.odsetkaart { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; border: 1px solid var(--rand, #1e293b); border-radius: 10px; padding: 10px; cursor: grab; }
.odsetkaart.gekozen { border-color: #a78bfa; background: rgba(167,139,250,.08); } .odsetkaart.sleept { opacity: .45; }
.odstapel { position: relative; height: 66px; }
.odstapel i { position: absolute; inset: 0; background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; overflow: hidden; }
.odstapel i.l2 { transform: translate(8px,-8px); opacity: .6; } .odstapel i.l1 { transform: translate(4px,-4px); opacity: .8; }
.oddoel { font-size: 12px; color: #34d399; margin-top: 3px; } .oddoel.leeg { color: #f5b041; }
.odinst { border: 1px solid var(--rand, #1e293b); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.odinst.nieuw { border-style: dashed; border-color: #a78bfa; }
.odinstkop { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.odkasten { display: flex; flex-wrap: wrap; gap: 10px; }
.oddoelvak { width: 170px; min-height: 120px; border: 1px solid var(--rand, #1e293b); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; font-size: 12.5px; }
.oddoelvak.nieuw { border: 1.5px dashed #a78bfa; color: #a78bfa; } .oddoelvak.instnieuw { width: 100%; min-height: 60px; border: 1.5px dashed #a78bfa; color: #a78bfa; }
.oddoelvak.over { outline: 2px solid #a78bfa; background: rgba(167,139,250,.1); }
.odmini { height: 52px; border-radius: 4px; background: #000; overflow: hidden; }
.odrij .odmini { width: 60px; height: 42px; background: #fff; }
.odchips { display: flex; flex-wrap: wrap; gap: 4px; } .odchip { font-size: 10.5px; color: #e2e8f0; background: rgba(167,139,250,.25); border-radius: 999px; padding: 0 7px; }
.odrijen { display: flex; flex-direction: column; gap: 10px; }
.odrij { display: grid; grid-template-columns: 60px 260px 1fr 280px; gap: 14px; align-items: center; }
.odkeus { display: flex; gap: 6px; flex-wrap: wrap; }
.odkeus label { border: 1px solid var(--rand, #1e293b); border-radius: 8px; padding: 4px 9px; font-size: 12px; cursor: pointer; }
.odkeus input { display: none; } .odkeus label:has(input:checked) { border-color: var(--accent, #38bdf8); background: rgba(56,189,248,.12); }
.odonder { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .odtoel { width: 100%; max-width: 700px; font: inherit; background: transparent; color: inherit; border: 1px solid var(--rand, #1e293b); border-radius: 8px; padding: 6px 9px; }
.zbbeeld.pdf i { background: #fff; }
.odboot { width: auto !important; min-width: 260px; max-width: 420px; }
.opdelen .odkop .knop { margin-left: auto; }
.wtlostekst { display: flex; flex-direction: column; gap: 1px; }
.wtlosnaam { font-weight: 600; color: var(--tekst, #e2e8f0); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wthknoppen .knopje { border: 1px solid currentColor; border-radius: 999px; padding: 1px 9px; font-size: 12px; color: #34d399; text-decoration: none; margin-right: 6px; }
.wtnaarlos { color: inherit; text-decoration: underline dotted; }

.odhulp { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--gedempt, #94a3b8); margin: -2px 0 12px; }
.odhulp b { color: #a78bfa; font-weight: 600; }
.odknip { display: flex; align-items: center; gap: 10px; margin: -2px 0 10px; color: #a78bfa; font-size: 12px; cursor: default; }
.odknip .lijn { flex: 1; border-top: 1.5px dashed #a78bfa; }
.odknipmid { display: flex; align-items: center; gap: 10px; }
.odknipmid .knop { border-color: #a78bfa; color: #e2e8f0; }
.odtussen span { font-size: 15px; }
.tpvraag p { margin: 0; } .tpvraaginv { font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--rand, #1e293b); background: transparent; color: inherit; }

/* 0.44.2 ongedaan maken: prominent, licht op na elke actie */
.odterug { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; opacity: .45; }
.odterug.aan { opacity: 1; border-color: #a78bfa; background: rgba(167,139,250,.14); color: #f1edff; }
.odterug.aan:hover { background: rgba(167,139,250,.26); }
.odterugpijl { font-size: 17px; line-height: 1; }
.odterugn { font-size: 11px; background: #a78bfa; color: #0b0f18; border-radius: 999px; padding: 0 6px; }
.odterug.gloei { animation: odgloei 1.6s ease-out 1; }
@keyframes odgloei { 0% { box-shadow: 0 0 0 0 rgba(167,139,250,.9); transform: scale(1.06); } 35% { box-shadow: 0 0 0 9px rgba(167,139,250,.25); transform: scale(1); } 100% { box-shadow: 0 0 0 14px rgba(167,139,250,0); } }
.odkop2 { position: sticky; top: 0; z-index: 5; background: var(--kaart, #0b0f18); padding: 8px 0; }

/* plan 2 fase G: loginscherm */
.loginscherm { position: relative; overflow: hidden; }
.loginpatroon { position: absolute; inset: -20px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='240' height='160' viewBox='0 0 240 160'><g fill='none' stroke='%2338bdf8' stroke-width='1' opacity='.55'><path d='M0 40h60m20 0h40v40h60M120 80v50h-50M200 80h40M0 130h30'/><path d='M60 32v16M80 32v16M60 40h-2M80 40h2'/><circle cx='120' cy='40' r='3'/><circle cx='120' cy='80' r='3'/><circle cx='200' cy='80' r='3'/><rect x='160' y='72' width='24' height='16' rx='2'/><path d='M30 122v16l14-8z'/><path d='M70 130h-14'/><path d='M200 20h30v20h-30zM215 40v40'/></g></svg>"); background-size: 240px 160px;
  opacity: .16; mask-image: radial-gradient(ellipse at center, transparent 0 22%, #000 70%); -webkit-mask-image: radial-gradient(ellipse at center, transparent 0 22%, #000 70%);
  animation: loginschuif 120s linear infinite; pointer-events: none; }
@keyframes loginschuif { to { background-position: 240px 160px; } }
@media (prefers-reduced-motion: reduce) { .loginpatroon { animation: none; } }
.loginscherm .login { position: relative; z-index: 1; backdrop-filter: blur(6px); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.loginband { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: #ea580c; color: #1c0a00; font-weight: 700; font-size: 12px; letter-spacing: .3em; text-align: center; padding: 6px 0; }
.loginscherm.test .login { border-color: #ea580c; }
.loginvoet { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; font-size: 11.5px; color: var(--gedempt, #94a3b8); z-index: 1; }

/* security 1.3 */
.wtverdacht { position: absolute; top: -6px; left: -6px; z-index: 3; background: #f87171; color: #1c0a00; font-weight: 700; font-size: 11px; border-radius: 999px; padding: 1px 7px; }
.verdachtbalk { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; background: rgba(127,29,29,.92); color: #fee2e2; border: 1px solid #f87171; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; }

.odverdacht { background: rgba(127,29,29,.35); border: 1px solid #f87171; color: #fee2e2; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 10px; }
.odpg.verdacht .odbl { outline: 3px solid #f87171; outline-offset: 1px; }
.odpg.verdacht::before { content: "⚠"; position: absolute; top: -8px; left: -6px; z-index: 2; background: #f87171; color: #1c0a00; font-weight: 700; font-size: 11px; border-radius: 999px; padding: 0 6px; }

/* proef binnenkomen v2 (04-10) */
.bnvak { grid-area: los; border: 1px solid rgba(148,163,184,.22); border-radius: 16px; padding: 14px 18px 18px; }
.bnkop { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .bnkop .wtzonekop { margin: 0; }
.bnlade { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.bndrop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 150px; border: 2px dashed rgba(148,163,184,.3); border-radius: 12px; background: none; color: var(--gedempt); font: inherit; font-size: 12.5px; cursor: pointer; }
.bndrop b { color: var(--tekst, #e2e8f0); font-size: 15px; } .bndrop:hover, .bndrop.wtdrop { border-color: var(--accent); color: var(--tekst, #e2e8f0); }
.bnkaart { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 10px 14px; border: 1px solid rgba(148,163,184,.25); border-radius: 12px; padding: 14px 14px 12px; }
.bnkaart.wtdrop { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.bnkaart .wtlosvel { width: 100px; transform: rotate(-3deg); }
.bntekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bnnaam { font: inherit; font-weight: 600; font-size: 14px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: inherit; padding: 2px 5px; margin-left: -6px; }
.bnnaam:hover, .bnnaam:focus { border-color: rgba(148,163,184,.35); outline: none; }
.bnhint { font: inherit; font-size: 12px; resize: vertical; background: transparent; border: 1px dashed rgba(148,163,184,.3); border-radius: 6px; color: inherit; padding: 4px 7px; margin-top: 2px; }
.bnhint:focus { outline: none; border-style: solid; border-color: var(--accent); }
.bnlabel { display: inline-block; font-size: 11px; border: 1px solid currentColor; border-radius: 999px; padding: 0 7px; color: #94a3b8; margin-left: 2px; }
.bnlabel.paars { color: #a78bfa; } .bnlabel.groen { color: #34d399; } .bnlabel.rood { color: #f87171; }
.bnacties { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 6px; }
.bnacties .knopje { font: inherit; font-size: 12px; border: 1px solid rgba(148,163,184,.35); border-radius: 8px; padding: 4px 10px; background: transparent; color: inherit; cursor: pointer; }
.bnacties .knopje.ja { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.bnacties .knopje:disabled { opacity: .45; cursor: default; }
.bnweg { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--gedempt); font-size: 16px; cursor: pointer; } .bnweg:hover { color: #f87171; }
.odterugbinnen { font-size: 12.5px; color: var(--accent); text-decoration: none; margin-right: 8px; }
.odterugbalk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--gedempt); border: 1px dashed rgba(148,163,184,.3); border-radius: 10px; padding: 6px 10px; margin-top: 6px; }
.bnkaart .wtlostekst, .bnkaart .wtverdacht { display: none; }
.tpvraag p { white-space: pre-line; }
/* 0.47.2: uitleg bij aanwijzen in portaalstijl (data-uitleg) */
[data-uitleg] { position: relative; }
[data-uitleg]:hover::after, [data-uitleg]:focus-visible::after { content: attr(data-uitleg); position: absolute; left: 0; top: calc(100% + 8px); z-index: 50; width: max-content; max-width: 340px;
  white-space: pre-line; text-align: left; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--tekst, #e2e8f0); background: #0b1220; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 10px; padding: 8px 11px; box-shadow: 0 10px 30px rgba(0,0,0,.45); pointer-events: none; animation: uitlegIn .12s ease-out .35s both; }
@keyframes uitlegIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.bntip { grid-column: 1 / 3; font-size: 11.5px; color: var(--gedempt); }
.bnkop .hulpknop { align-self: center; }
.bnvak.licht { animation: bnlicht 2.4s ease-out; }
@keyframes bnlicht { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.topbalk [data-uitleg]:hover::after, header [data-uitleg]:hover::after { left: auto; right: 0; }
/* 0.48: opdelen stap 3/4 (binnenkomen v2, deel B en C) */
.oddragerblok { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin: 6px 0 14px; }
.oddragers { display: flex; gap: 10px; flex-wrap: wrap; }
.oddrager { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 190px; text-align: left; font: inherit; color: inherit; background: none; border: 1px solid rgba(148,163,184,.25); border-radius: 12px; padding: 9px 14px; cursor: pointer; }
.oddrager small { font-size: 10.5px; letter-spacing: .06em; color: var(--gedempt); } .oddrager b { font-size: 14.5px; } .oddrager span { font-size: 12px; color: var(--gedempt); }
.oddrager.aan { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.oddragerzoek { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 4px; }
.odzoek { font: inherit; width: 100%; padding: 8px 11px; border-radius: 9px; border: 1px solid rgba(148,163,184,.25); background: rgba(0,0,0,.25); color: inherit; }
.odzoek:focus { outline: none; border-color: var(--accent); }
.odvoorstelbalk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; border: 1px dashed #a78bfa; color: #ddd6fe; border-radius: 10px; padding: 7px 12px; margin-bottom: 6px; }
.odwaarrij, .odwatrij { display: grid; grid-template-columns: 130px 220px 1fr; gap: 16px; align-items: start; border-top: 1px solid rgba(148,163,184,.12); padding: 14px 0; }
.odwaarrij .odstapel, .odwatrij .odstapel { position: relative; height: 92px; }
.odwaarrij.klaar { opacity: .92; }
.odgekozen { display: flex; align-items: center; gap: 8px; background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.5); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.odgekozen > span:first-child { color: #34d399; } .odgekozen a { color: var(--accent); }
.odzoekvak { display: flex; flex-direction: column; gap: 6px; }
.odvoorstel { font: inherit; font-size: 12px; border: 1px dashed #a78bfa; color: #e9e3ff; background: none; border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.odvoorstel:hover { border-style: solid; background: rgba(167,139,250,.12); }
.odres { border: 1px solid rgba(148,163,184,.25); border-radius: 10px; overflow: hidden; }
.odresrij { display: flex; gap: 6px; align-items: baseline; width: 100%; text-align: left; font: inherit; font-size: 12.5px; color: inherit; background: none; border: 0; border-top: 1px solid rgba(148,163,184,.12); padding: 7px 10px; cursor: pointer; }
.odresrij:first-child { border-top: 0; } .odresrij:hover { background: rgba(148,163,184,.08); }
.odresleeg { padding: 7px 10px; }
.odselect { font: inherit; font-size: 12.5px; padding: 6px 9px; border-radius: 9px; border: 1px solid rgba(148,163,184,.25); background: rgba(0,0,0,.25); color: inherit; max-width: 100%; }
.odkaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.odkz { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: inherit; background: none; border: 1px solid rgba(148,163,184,.25); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.odkz b { font-size: 13.5px; } .odkz .wat { font-size: 12px; color: var(--gedempt); } .odkz .krijg { font-size: 11.5px; margin-top: 4px; }
.odkz.aan { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.odkz.uit { opacity: .4; cursor: default; }
.odaanbev { position: absolute; top: -9px; right: 10px; font-size: 10.5px; background: #34d399; color: #022c22; border-radius: 999px; padding: 0 7px; }
.odsamen { margin-top: 14px; border: 1px solid rgba(148,163,184,.25); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.odsamen ul { margin: 0; padding-left: 20px; } .odsamen li { margin: 2px 0; }
.odsamenknop { display: flex; justify-content: flex-end; gap: 8px; }
/* 0.48.1 groot bekijken + revisie-match */
.odpgweg { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 999px; border: 1px solid rgba(148,163,184,.5); background: rgba(11,15,24,.85); color: #e2e8f0; font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.odbl { position: relative; } .odpg:hover .odpgweg, .odpg.weg .odpgweg { opacity: 1; } .odpgweg:hover { border-color: #f87171; color: #f87171; }
.odstapel.klik { cursor: zoom-in; }
.odkijk { position: fixed; inset: 0; z-index: 900; background: rgba(2,4,9,.94); display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 14px 20px; }
.odkijkkop, .odkijkknoppen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.odkijkvak { overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 0; }
.odkijkimg { max-width: 100%; max-height: 100%; background: #fff; border-radius: 4px; cursor: zoom-in; transition: transform .2s; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.odkijkimg.zoom { transform: scale(2.6); cursor: zoom-out; }
.odkijkvd { color: #fca5a5; font-size: 12.5px; }
.odkz.let { border-color: rgba(245,176,65,.6); } .odaanbev.let { background: #f5b041; color: #1c1200; }

/* ===== 0.49 opdelen visueel (Yuri's schetsen 04-10) ===== */
.oddragerblok { align-items: center; } .oddragerlabel { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt); }
.odwaaier { position: relative; display: grid; grid-template-columns: 260px 1fr; gap: 60px; margin: 14px 0 6px; }
.oddraden { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.oddraden path { fill: none; stroke-width: 2; opacity: .55; } .oddraden path.aan { stroke-width: 3.5; opacity: 1; }
.odorig { align-self: center; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; z-index: 1; }
.odorigstapel { position: relative; width: 210px; height: 150px; cursor: zoom-in; margin-bottom: 10px; }
.odorigstapel i, .odhstapel i { position: absolute; inset: 0; background: #fff; border: 1px solid #cbd5e1; border-radius: 5px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.odorigstapel i img, .odhstapel i img, .odkbl img, .odrp img, .odskp img { width: 100%; height: 100%; object-fit: contain; display: block; }
.odorigstapel i.l2, .odhstapel i.l2 { transform: translate(14px,-14px) rotate(3deg); opacity: .55; } .odorigstapel i.l1, .odhstapel i.l1 { transform: translate(7px,-7px) rotate(1.5deg); opacity: .8; }
.odsetlijst { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.odsetrij { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; border: 1px solid transparent; border-radius: 14px; padding: 10px 12px; cursor: pointer; transition: background .15s; }
.odsetrij:hover { background: rgba(148,163,184,.05); border-color: rgba(148,163,184,.15); } .odsetrij.aan { background: rgba(56,189,248,.06); border-color: var(--accent); }
.odklapper { position: relative; width: 196px; height: 140px; perspective: 700px; cursor: zoom-in; }
.odkbl { position: absolute; inset: 0; background: #fff; border: 1px solid #cbd5e1; border-top: 4px solid var(--c); border-radius: 5px; overflow: hidden; box-shadow: 0 5px 14px rgba(0,0,0,.5); transform-origin: 50% 0; }
.odkbl.achter1 { transform: translate(8px,-8px); opacity: .75; } .odkbl.achter2 { transform: translate(16px,-16px); opacity: .5; }
.odkbl.voor { animation: odklap .28s ease-out; } .odkbl.voor.omslaan { animation: odklapterug .28s ease-out; }
@keyframes odklap { from { transform: rotateX(70deg); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes odklapterug { from { transform: rotateX(-70deg); opacity: .3; } to { transform: none; opacity: 1; } }
.odkbl.verdacht { outline: 3px solid #f87171; } .odkbl.leeg { display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 12px; }
.odknr { position: absolute; left: 6px; bottom: 6px; z-index: 3; background: rgba(2,4,9,.82); color: #e2e8f0; border-radius: 6px; padding: 1px 7px; font-size: 11.5px; font-weight: 600; }
.odkteller { position: absolute; right: -8px; bottom: -10px; z-index: 3; background: #0b1220; color: #cbd5e1; border: 1px solid #334155; border-radius: 999px; padding: 0 8px; font-size: 11px; }
.odinfo { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12.5px; align-items: baseline; }
.odinfo .l { color: var(--gedempt); } .odinfonaam { grid-column: 1 / 3; display: flex; gap: 8px; align-items: center; font-size: 15px; margin-bottom: 2px; }
.odkl { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.odbewerk { font-size: 11.5px; color: var(--accent); opacity: .8; } .odsetrij:hover .odbewerk { opacity: 1; }
.odlijkt { color: #fbbf24; } .rood { color: #f87171; }
.odchip2 { display: inline-block; font: inherit; font-size: 12px; border-radius: 999px; padding: 2px 10px; background: none; cursor: pointer; border: 1px dashed #a78bfa; color: #e9e3ff; }
.odchip2.ok { border: 1px solid #34d399; color: #d1fae5; background: rgba(52,211,153,.1); } .odchip2.ok:hover { background: rgba(52,211,153,.2); } .odchip2.leeg { border-color: #475569; color: var(--gedempt); }
.odchip2.voorstel:hover { background: rgba(167,139,250,.14); border-style: solid; }
.odalle { margin-top: 18px; border-top: 1px solid rgba(148,163,184,.15); padding-top: 12px; } .odallekop { margin-bottom: 8px; }
.odraster { display: flex; flex-wrap: wrap; gap: 12px 0; align-items: flex-start; }
.odrbl { width: 120px; cursor: zoom-in; position: relative; } .odrp { position: relative; height: 86px; background: #fff; border: 1px solid #cbd5e1; border-top: 4px solid var(--c); border-radius: 4px; overflow: hidden; }
.odrbl small { display: block; font-size: 11px; margin-top: 2px; } .odrbl.weg .odrp { opacity: .25; filter: grayscale(1); } .odrbl.weg small { color: #f87171; }
.odrbl.verdacht .odrp { outline: 3px solid #f87171; outline-offset: 1px; } .odrbl:hover .odpgweg, .odrbl.weg .odpgweg { opacity: 1; }
.odrknip { width: 18px; height: 86px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: #334155; cursor: pointer; font-size: 12px; padding: 0; }
.odrknip:hover { color: var(--accent); } .odrknip.aan { color: #f5b041; font-size: 14px; }
.odpaneel { position: fixed; right: 22px; top: 86px; bottom: 22px; width: 460px; overflow: auto; z-index: 60; background: #0b1220; border: 1px solid #334155; border-top: 4px solid var(--c); border-radius: 14px; padding: 14px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.odpaneelkop { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.odvelden { display: grid; grid-template-columns: 96px 1fr; gap: 8px 10px; align-items: center; font-size: 12.5px; margin-top: 10px; }
.odvelden input:not([type]), .odvelden > input { font: inherit; font-size: 12.5px; background: rgba(0,0,0,.3); border: 1px solid #334155; border-radius: 7px; color: inherit; padding: 6px 9px; width: 100%; }
.odbron { font-size: 11px; color: #a78bfa; margin-top: -4px; }
.odstrip { display: flex; gap: 10px; overflow-x: auto; padding: 10px; border: 1px solid rgba(148,163,184,.15); border-radius: 12px; margin: 8px 0 4px; }
.odsk { flex: none; width: 156px; display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center; font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: 10px; padding: 6px; cursor: pointer; }
.odsk.aan { border-color: var(--accent); background: rgba(56,189,248,.08); } .odsk b { font-size: 12px; }
.odskp { width: 100%; height: 84px; background: #fff; border: 1px solid #cbd5e1; border-top: 4px solid var(--c); border-radius: 4px; overflow: hidden; }
.odskwat { font-size: 11px; color: #34d399; } .odskwat.negeren { color: #f87171; } .odskwat.bewaren { color: #cbd5e1; }
.odhub { position: relative; display: grid; grid-template-columns: 1fr 1.1fr 1fr; grid-template-rows: auto auto auto; gap: 26px 40px; align-items: center; justify-items: center; padding: 16px 10px; }
.odpijlen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.odpijlen path { fill: none; stroke: #334155; stroke-width: 2; } .odpijlen path.aan { stroke: #38bdf8; stroke-width: 3; }
.odhk { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; max-width: 290px; }
.odhk.orig { grid-column: 1; grid-row: 1; } .odhk.midden { grid-column: 2; grid-row: 2; } .odhk.b-natekenen { grid-column: 3; grid-row: 1; }
.odhk.b-revisie { grid-column: 3; grid-row: 3; } .odhk.b-bewaren { grid-column: 1; grid-row: 3; } .odhk.negeer { grid-column: 2; grid-row: 3; align-self: start; }
.odhstapel { position: relative; width: 170px; height: 120px; margin-bottom: 10px; } .odhk.midden .odhstapel { width: 210px; height: 150px; }
.odhstapel.klik { cursor: zoom-in; } .odhstapel.glans i.l0 { box-shadow: 0 0 0 2px #f5b041, 0 0 24px rgba(245,176,65,.5); }
.odhstapel.dwg i { background: #0b1220; border-color: #38bdf8; } .odhstapel.dwg i span { display: flex; height: 100%; align-items: center; justify-content: center; color: #38bdf8; font-weight: 700; font-size: 20px; }
.odbest { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 270px; font: inherit; color: inherit; background: rgba(0,0,0,.25); border: 1px solid rgba(148,163,184,.25); border-radius: 16px; padding: 16px 14px 12px; cursor: pointer; transition: all .15s; }
.odbest:hover { border-color: #64748b; } .odbest.aan { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.odbest.uit { opacity: .38; cursor: default; } .odbest.let { border-color: rgba(245,176,65,.6); }
.odbest b { font-size: 14px; } .odbest .wat { font-size: 12px; color: var(--gedempt); } .odbest .krijg { font-size: 11.5px; margin-top: 4px; }
.odbadge { position: absolute; top: -10px; right: 12px; z-index: 3; font-size: 10.5px; border-radius: 999px; padding: 0 8px; } .odbadge.g { background: #34d399; color: #022c22; } .odbadge.o { background: #f5b041; color: #1c1200; }
.odkast { width: 110px; height: 128px; border: 2px solid #64748b; border-radius: 8px; display: flex; flex-direction: column; gap: 8px; padding: 10px; margin-bottom: 10px; }
.odkast i { flex: 1; border: 1.5px solid #64748b; border-radius: 4px; position: relative; } .odkast i::after { content: ""; position: absolute; left: 35%; right: 35%; top: 40%; height: 6px; border: 1.5px solid #64748b; border-radius: 3px; }
.odgeenpdf { font-size: 11.5px; color: #f5b041; } .knop.rood { border-color: #f87171; color: #f87171; }
@media (max-width: 1500px) { .odpaneel { width: 400px; } }

/* 0.49.1 */
.odsetbreuk { flex: 0 0 100%; display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; font-size: 12px; }
.odsetbreuk .lijn { flex: 1; height: 0; border-top: 2px dashed var(--c); opacity: .6; }
.odsetbreuk .midden { display: flex; align-items: center; gap: 8px; } .odsetbreuk .midden b { color: var(--c); }
.odrknip { opacity: 0; color: #64748b; } .odraster:hover .odrknip { opacity: .5; } .odrknip:hover { opacity: 1 !important; color: var(--accent); }
.odwegband { position: absolute; left: 0; right: 0; top: 36%; text-align: center; background: rgba(127,29,29,.9); color: #fee2e2; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.odkijk.weg .odkijkimg { filter: grayscale(1) brightness(.4); }
.odkijkvak { position: relative; }
.odkijk.weg .odkijkvak::after { content: attr(data-weg); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-8deg); padding: 14px 28px; border: 4px solid #f87171; border-radius: 14px; color: #f87171; background: rgba(2,4,9,.75); font-size: 30px; font-weight: 800; letter-spacing: .08em; pointer-events: none; white-space: nowrap; }
.odkijk.weg .odkijkkop b { text-decoration: line-through; color: #f87171; }
.oddragerblok.paneel { flex-direction: column; align-items: stretch; margin: 6px 0 0; }
.oddragerblok.paneel .oddragers { flex-direction: column; } .oddragerblok.paneel .oddrager { min-width: 0; width: 100%; }
.oddragerkeus summary { cursor: pointer; color: var(--accent); font-size: 12px; margin-top: 4px; }
.odwaar { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: baseline; font-size: 12px; margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(148,163,184,.08); width: 100%; }
.odwaar .l { color: var(--gedempt); text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; } .odwaar a { color: var(--accent); font-size: 11.5px; }
.odklaarpdf { display: inline-flex; gap: 6px; align-items: center; }
.odplekvak { display: flex; flex-direction: column; gap: 6px; }
/* 0.50 kast verplaatsen/samenvoegen */
.zbinst.doel { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.zbst[draggable="true"] { cursor: grab; } .zbst.sleept { opacity: .45; }
.zbst.doel .zbpak > i.a { outline: 3px solid var(--accent); }
.zbpak { position: relative; }
/* 0.51 melding met knop (ongedaan maken) */
.melding .mldknop { margin-left: 12px; }
/* 0.51 compartimenten in het portaal */
.zbcomp.portaal > h3 { color: #c4b5fd; }
.zbcomp.doel { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.zbcomp > h3 .knop, .zbcomp > h3 .zbsp { margin-left: 10px; font-weight: 400; }
.zbbl.verplaatst .zbbeeld { outline: 2px dashed #a78bfa; outline-offset: 2px; }
.zbbl[draggable="true"] { cursor: grab; } .zbbl.sleept { opacity: .4; }
.zbleeg { border: 2px dashed var(--rand, #1e293b); border-radius: 10px; padding: 18px; text-align: center; color: var(--gedempt, #94a3b8); font-size: 12.5px; margin: 4px 0; }
.zbwissel { display: inline-flex; gap: 4px; margin-right: 6px; }
/* 0.51 netwerk van sets (fase E, proef) */
.netvak { margin-top: 8px; }
.netkop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.netleg { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--gedempt, #94a3b8); }
.netleg .lg { display: inline-block; width: 24px; height: 0; border-top: 4px solid #64748b; margin-left: 10px; } .netleg .lg.stip { border-top: 2px dashed #64748b; }
.netraster { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.netraster > .netveld { flex: 1 1 560px; min-width: 0; } .netraster > .netzij { flex: 1 1 260px; max-width: 100%; }
.netveld { position: relative; height: 640px; border: 1px solid var(--rand, #1e293b); border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(56,189,248,.05), transparent 70%); }
.netveld svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.netlijn { fill: none; stroke: #64748b; stroke-linecap: round; cursor: pointer; transition: opacity .2s; }
.netlijn.zwak { stroke-dasharray: 4 6; } .netlijn.aan { stroke: var(--accent); } .netlijn.uit { opacity: .12; }
.netlab { font-size: 11px; fill: #cbd5e1; paint-order: stroke; stroke: #03050a; stroke-width: 4px; pointer-events: none; } .netlab.uit { opacity: 0; }
.netkn { position: absolute; width: 128px; transform: translate(-50%, -50%); text-align: center; cursor: pointer; transition: opacity .2s; user-select: none; }
.netkn b { display: block; font-size: 12px; } .netkn small { font-size: 11px; color: var(--gedempt, #94a3b8); }
.netst { position: relative; height: 88px; margin-bottom: 6px; }
.netst i { position: absolute; inset: 0; border: 1px solid #334155; border-radius: 4px; background: #0b1220; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.55); }
.netst i img { width: 100%; height: 100%; object-fit: contain; }
.netst i:nth-child(1) { transform: translate(8px, -8px); opacity: .5; } .netst i:nth-child(2) { transform: translate(4px, -4px); opacity: .75; }
.netkn.los .netst i { border-style: dashed; border-color: #a78bfa; }
.netkn.aan .netst i:last-child { outline: 3px solid var(--accent); } .netkn.buur .netst i:last-child { outline: 2px solid #64748b; } .netkn.uit { opacity: .25; }
.netzij { border: 1px solid var(--rand, #1e293b); border-radius: 12px; padding: 12px 14px; max-height: 640px; overflow: auto; }
.netzij h3 { margin: 0 0 6px; font-size: 15px; }
.netreg { border-top: 1px solid var(--rand, #1e293b); padding: 8px 0; font-size: 12.5px; }
.netchip { display: inline-block; border: 1px solid #334155; border-radius: 999px; padding: 0 8px; margin: 2px; font-size: 11.5px; } .netchip.v { border-color: #7c3aed; color: #ddd6fe; }
/* 0.51.1 bronnen als strook miniaturen (opdrachtdetail) */
.bsvak > p { margin: 0 0 8px; }
.bsstrook { display: flex; flex-wrap: wrap; gap: 8px; }
.bsmini { position: relative; width: 92px; height: 92px; padding: 0; border: 1px solid var(--rand); border-radius: 6px; background: #0b1220; overflow: hidden; cursor: zoom-in; }
.bsmini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsmini:hover { border-color: var(--cyaan); }
.bsmini.metnotitie { border-color: #a78bfa; }
.bsnot { position: absolute; right: 3px; top: 3px; font-style: normal; font-size: 11px; background: #a78bfa; color: #0b1220; border-radius: 4px; padding: 0 4px; }
.bsgeen { display: grid; place-items: center; height: 100%; font-size: 11px; color: var(--gedempt); }
.venster.bsgroot { width: min(1200px, 94vw); grid-template-rows: auto auto 1fr; }
.bsgrootvak { display: grid; place-items: center; background: #05070d; max-height: 78vh; overflow: auto; }
.bsgrootbeeld { max-width: 100%; max-height: 78vh; object-fit: contain; }
.bsnotitie { margin: 0; padding: 8px 14px; color: #ddd6fe; font-size: 13px; }
/* 0.51.2 Binnengekomen: één aanbevolen knop, de rest achter ‘anders…’ */
.bnanders { display: contents; }
.bnanders[hidden] { display: none; }
.bnacties .bnanderskn { border-style: dashed; color: var(--gedempt); }
/* 0.52 infopaneel Opdelen: plek als pad boot › systeem › installatie › kast (Yuri 05-10) */
.odp2 { font-size: 14px; }
.odp2kop { display: grid; grid-template-columns: 86px 1fr; gap: 14px; align-items: center; padding: 6px 2px 12px; }
.odp2stapel { position: relative; height: 90px; cursor: zoom-in; }
.odp2stapel i { position: absolute; inset: 0; background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 12px #0009; }
.odp2stapel i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.odp2stapel i.l2 { transform: translate(7px, -6px); opacity: .55; } .odp2stapel i.l1 { transform: translate(3px, -3px); opacity: .8; }
.odp2naam { font: inherit; font-size: 18px; font-weight: 600; width: 100%; background: transparent; border: 0; border-bottom: 1px dashed #334155; color: var(--tekst); padding: 2px 0; }
.odp2naam:focus { outline: none; border-bottom-color: var(--cyaan); }
.odp2feit { font-size: 13px; color: var(--gedempt); margin-top: 3px; } .odp2feit b { color: #cbd5e1; font-weight: 500; } .odp2feit.paars { color: #c4b5fd; }
.odp2blok { border-top: 1px solid var(--rand); padding: 12px 2px 8px; }
.odp2titel { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.odi { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid #475569; font-size: 11px; color: var(--gedempt); cursor: help; position: relative; text-transform: none; letter-spacing: 0; font-style: normal; }
.odi:hover, .odi:focus { border-color: var(--cyaan); color: var(--cyaan); outline: none; }
.odp2pad { position: relative; margin-left: 8px; border-left: 2px solid #1e293b; padding-left: 18px; }
.odp2trede { position: relative; margin: 0 0 12px; }
.odp2trede:before { content: ""; position: absolute; left: -26px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--achtergrond); border: 2px dashed #475569; }
.odp2trede.ok:before { background: #34d399; border: 2px solid #34d399; } .odp2trede.voor:before { border: 2px solid #a78bfa; background: #2e1065; }
.odp2lbl { font-size: 12.5px; color: var(--gedempt); display: flex; gap: 6px; align-items: center; }
.odp2waarde { font-size: 14.5px; margin-top: 2px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.odp2wijzig { font: inherit; font-size: 12.5px; color: var(--cyaan); background: none; border: 0; cursor: pointer; padding: 0 2px; }
.odcode { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; color: #7dd3fc; background: #0b1a2a; border-radius: 6px; padding: 1px 6px; }
.odp2kiezer { margin-top: 8px; display: grid; gap: 8px; }
.odp2sub { font-size: 12.5px; color: #c4b5fd; }
.odp2vs { font: inherit; text-align: left; border: 1px solid #4c1d95; background: #0f0a1f; border-radius: 12px; padding: 9px 12px; color: var(--tekst); cursor: pointer; }
.odp2vs:hover { border-color: #a78bfa; } .odp2vs .r1 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.odp2vs .waarom { font-size: 12.5px; color: #c4b5fd; margin-top: 3px; }
.odp2bron { margin-left: auto; font-size: 11px; color: #8b7fc0; border: 1px solid #4c1d95; border-radius: 999px; padding: 0 7px; }
.odp2zelf { display: grid; grid-template-columns: 96px 1fr auto; gap: 6px; }
.odp2zelf input, .odp2klasse, .odp2notitie { font: inherit; font-size: 13.5px; background: #0b1220; border: 1px solid #334155; border-radius: 9px; color: var(--tekst); padding: 6px 9px; }
.odp2notitie { width: 100%; resize: vertical; }
.odp2obj { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.odp2klasse { width: 70px; text-transform: uppercase; }
.odp2archief { font-size: 15px; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 9px; background: #0b1220; word-break: break-word; }
.odp2schakel { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 8px; cursor: pointer; }
.odsch { width: 34px; height: 18px; border-radius: 9px; background: var(--cyaan); position: relative; flex: none; }
.odsch:after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--achtergrond); }
.odsch.uit { background: #334155; } .odsch.uit:after { right: auto; left: 2px; }
.odp2 [data-uitleg]:hover::after, .odp2 [data-uitleg]:focus-visible::after { max-width: 270px; white-space: pre-line; }
.odp2titel .odi:hover::after, .odp2titel .odi:focus-visible::after { left: auto; right: -6px; }
.odp2klasse2 { max-width: 300px; }
/* 0.52.2 systeemkiezer compact: ingeklapte boom */
.odp2meer { font: inherit; font-size: 13px; color: var(--cyaan); background: none; border: 0; padding: 2px 0; cursor: pointer; text-align: left; }
.odboom { display: grid; gap: 2px; }
.odboomkop { font-size: 12px; color: var(--gedempt); margin-top: 4px; }
.odboomsys, .odboomrij { font: inherit; font-size: 13.5px; text-align: left; display: flex; gap: 6px; align-items: center; background: none; border: 0; border-radius: 8px; padding: 4px 6px; color: var(--tekst); cursor: pointer; }
.odboomsys:hover, .odboomrij:hover { background: #0f1b2d; }
.odboomsys .pijl { width: 12px; color: var(--gedempt); }
.odboomsub { margin-left: 18px; border-left: 1px solid #1e293b; padding-left: 6px; display: grid; }
.odp2nodig { color: #fbbf24; font-size: 13px; }

/* 0.53 Opdelen: rugetiket + zin + tegels (Yuri 05-10: advies in werkelijkheid) */
.odbootbalk { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 4px 0 14px; padding: 10px 14px; border: 1px solid var(--rand); border-radius: 12px; font-size: 14.5px; }
.odbootbalk > .oddragerblok { flex-basis: 100%; margin-top: 8px; }
.odbootherk { font-size: 12px; color: #34d399; border: 1px solid #065f46; border-radius: 999px; padding: 0 8px; }
.odinfo2 { display: grid; gap: 8px; align-content: center; justify-items: start; }
.odzacht { font-size: 12.5px; color: var(--gedempt); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.odzacht .odkl { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.odetvak { display: flex; gap: 12px; align-items: center; }
.odetiket { position: relative; min-width: 300px; max-width: 470px; border-radius: 6px; background: #e8edf3; color: #0f172a; padding: 9px 14px 10px 14px; border-left: 9px solid var(--c);
  box-shadow: 0 6px 18px #000a; cursor: pointer; transition: transform .12s; }
.odetiket:hover { transform: translateY(-2px); }
.odetiket.voorstel { background: #e4dcfb; } .odetiket.leeg, .odetiket.half { background: #f6ecc9; } .odetiket.open { outline: 2px solid var(--cyaan); outline-offset: 3px; }
.odetcode { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.odetnaam { font-size: 15px; font-weight: 600; margin-top: 1px; line-height: 1.25; }
.odetpad { font-size: 12px; color: #475569; margin-top: 2px; }
.odetstip { position: absolute; right: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: #f59e0b; color: #0f172a; box-shadow: 0 2px 6px #0008; }
.odetiket.vast .odetstip { background: #34d399; } .odetiket.voorstel .odetstip { background: #a78bfa; }
.odvenster { margin: -4px 0 18px 150px; border: 1px solid #1e293b; border-left: 3px solid var(--c); border-radius: 14px; background: #060a13; padding: 14px 16px; display: grid; gap: 10px; }
.odzin { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 15px; line-height: 1.9; }
.odzinnaam { font-size: 16px; } .odzinpijl { color: var(--gedempt); }
.odzinstuk { font: inherit; font-size: 14.5px; display: inline-flex; gap: 6px; align-items: center; border: 1px solid #1e293b; border-radius: 999px; padding: 2px 13px 2px 6px; background: #0b1220; color: var(--tekst); cursor: pointer; }
.odzinstuk:hover { border-color: var(--cyaan); } .odzinstuk.aan { border-color: var(--cyaan); background: rgba(56,189,248,.12); }
.odzinstuk.ok { border-color: #065f46; } .odzinstuk.leeg { border-style: dashed; color: var(--gedempt); padding-left: 13px; } .odzinstuk.nodig { border: 1px dashed #f59e0b; color: #fbbf24; padding-left: 13px; }
.odzinstuk.voorstel { border-color: #6d28d9; background: #120a24; font-size: 13px; }
.odzinstuk .odcode { background: none; }
.odvoorregel { display: flex; gap: 12px; align-items: center; font-size: 13px; color: #c4b5fd; } .odvoorregel.stil { color: #6ee7b7; }
.odvensterkiezer { border-top: 1px solid #121a2a; padding-top: 10px; }
.odvenstervoet { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px solid #121a2a; padding-top: 10px; }
.odvenstervoet .odp2notitie { flex: 1; min-width: 240px; } .odvenstervoet .odp2schakel { margin: 0; } .odfeit { flex-basis: 100%; }
.odtegelvak { display: grid; gap: 10px; }
.odandere { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.odtegels { display: flex; gap: 7px; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; }
.odtegelkol { width: 84px; flex: none; display: grid; gap: 6px; }
.odtegelfam { font-size: 10.5px; color: var(--gedempt); line-height: 1.2; height: 26px; }
.odtegel { font: inherit; text-align: left; border: 1px solid #1e293b; border-radius: 9px; background: #070b14; color: #cbd5e1; padding: 5px 7px; height: 64px; cursor: pointer; font-size: 10.5px; line-height: 1.2; display: grid; align-content: start; gap: 2px; overflow: hidden; }
.odtegel b { font-family: "IBM Plex Mono", monospace; font-size: 17px; color: var(--c); }
.odtegel:hover { border-color: #cbd5e1; } .odtegel.boot { background: color-mix(in srgb, var(--c) 15%, #070b14); border-color: var(--c); }
.odtegel.voorstel { outline: 2px dashed #a78bfa; outline-offset: 1px; } .odtegel.aan { box-shadow: 0 0 0 2px var(--cyaan); }
.odtegel.klein { width: 168px; height: 56px; font-size: 12px; } .odtegel.klein b { font-size: 13.5px; }
.odsubkop { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .odsubrij { display: flex; flex-wrap: wrap; gap: 7px; }
.odzoekres { display: grid; gap: 1px; } .odzoekgroep { font-size: 11px; color: var(--gedempt); text-transform: uppercase; letter-spacing: .07em; margin: 6px 4px 2px; }
.odzoekrij { font: inherit; font-size: 14px; text-align: left; display: flex; gap: 8px; align-items: center; background: none; border: 0; border-radius: 8px; padding: 5px 8px; color: var(--tekst); cursor: pointer; }
.odzoekrij:hover { background: #0f1b2d; }
/* 0.53: tegels compact in kolommen (geen schuifbalk) */
.odtegels { display: block; columns: 5 150px; column-gap: 12px; overflow: visible; }
.odtegelkol { width: auto; break-inside: avoid; margin-bottom: 10px; display: grid; gap: 4px; }
.odtegelfam { height: auto; font-size: 11px; margin-bottom: 1px; }
.odtegel.rij { height: auto; display: flex; gap: 7px; align-items: baseline; padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.odtegel.rij b { font-size: 13.5px; flex: none; } .odtegel.rij span { overflow: hidden; text-overflow: ellipsis; }
.odetcode.stil { font-weight: 400; color: #64748b; font-size: 12.5px; }
.odetiket { background: #dfe5ec; } .odetiket.voorstel { background: #dcd3f5; } .odetiket.leeg, .odetiket.half { background: #efe3bd; }
.odtegel.rij { flex-wrap: nowrap; } .odtegel.rij span { min-width: 0; flex: 1; white-space: nowrap; }

/* 0.55: alleen afdrukken in het keurmenu */
.ktafdruk { border-top: 1px solid var(--rand); padding-top: 10px; margin-top: 4px; }
.ktafdruk button { white-space: nowrap; flex: none; }

/* 0.56 Opdelen: klant, notitie naast de naam, per blad ⇄ en ✎, keuzemenu */
.odklantblok { display: inline-flex; gap: 6px; align-items: center; margin-left: 10px; }
.odklant { font: inherit; font-size: 13.5px; background: #0b1220; color: var(--tekst); border: 1px solid #334155; border-radius: 8px; padding: 2px 6px; }
.odsetnotitie { font: inherit; font-size: 13px; width: min(470px, 100%); resize: vertical; background: #070b14; color: var(--tekst); border: 1px dashed #334155; border-radius: 8px; padding: 4px 8px; }
.odsetnotitie:focus { border-style: solid; border-color: var(--cyaan); outline: none; }
.odkastnaam { font: inherit; font-size: 13.5px; min-width: 260px; background: #0b1220; color: var(--tekst); border: 1px solid #334155; border-radius: 8px; padding: 3px 8px; }
.odrp .odpgnaar, .odrp .odpgnot { position: absolute; bottom: 4px; width: 24px; height: 22px; border-radius: 6px; border: 1px solid #334155; background: #0b1220e6; color: #cbd5e1; font-size: 12px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.odrp .odpgnaar { left: 4px; } .odrp .odpgnot { left: 32px; }
.odrbl:hover .odpgnaar, .odrbl:hover .odpgnot, .odrp .odpgnot.aan { opacity: 1; }
.odrp .odpgnot.aan { background: #f59e0b; color: #0f172a; border-color: #f59e0b; }
.odpgnottekst { color: #fbbf24; font-weight: 400; display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odmenu { position: absolute; z-index: 60; min-width: 260px; max-width: 330px; background: #0b1220; border: 1px solid #334155; border-radius: 12px; padding: 6px; box-shadow: 0 12px 30px #000c; display: grid; gap: 2px; }
.odmenukop { font-size: 11.5px; color: var(--gedempt); padding: 4px 8px 6px; }
.odmenurij { font: inherit; font-size: 13.5px; text-align: left; display: flex; gap: 8px; align-items: center; background: none; border: 0; border-radius: 8px; padding: 6px 8px; color: var(--tekst); cursor: pointer; }
.odmenurij:hover { background: #12203a; } .odmenurij.nieuw { color: var(--cyaan); border-top: 1px solid #1e293b; border-radius: 0 0 8px 8px; margin-top: 2px; }
.odmenurij .odkl { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.odpgnotitie { font: inherit; font-size: 13px; width: 300px; background: #070b14; color: var(--tekst); border: 1px solid #334155; border-radius: 8px; padding: 6px 8px; }
.odmenuvoet { display: flex; gap: 6px; justify-content: flex-end; padding: 6px 2px 2px; }
.odklantblok { white-space: nowrap; flex-wrap: nowrap; }

/* 0.56.1: plek-venster rechts in beeld (sticky) */
.odwaaier.metpaneel { grid-template-columns: 200px minmax(330px, 1fr) minmax(460px, 560px); gap: 40px; }
.odpaneelvak { position: relative; z-index: 2; }
.odpaneelvak .odvenster { position: sticky; top: 12px; margin: 0; max-height: calc(100vh - 24px); overflow: auto; padding-top: 22px; }
.odpaneeldicht { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--gedempt); font-size: 20px; cursor: pointer; line-height: 1; }
.odpaneeldicht:hover { color: var(--tekst); }
.odwaaier.metpaneel .odetiket { min-width: 0; }
.odwaaier.metpaneel .odtegels { columns: 3 140px; }
.odpaneelvak .odvenster { top: 84px; max-height: calc(100vh - 96px); }
.odwaaier.metpaneel > .odpaneelvak { align-self: stretch; }
.kaart.opdelen { overflow: visible; }

/* 0.57 boot nog onbekend / dit is boot … */
.bvbanner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; padding: 10px 14px; border: 1px solid #b45309; background: rgba(245,158,11,.08); border-radius: 12px; font-size: 13.5px; }
.bvbanner b { color: #fbbf24; }
.bvachter { position: fixed; inset: 0; background: #000a; z-index: 80; display: grid; place-items: start center; padding-top: 8vh; }
.bvvak { width: min(680px, 94vw); background: #070b14; border: 1px solid #1e293b; border-radius: 16px; padding: 18px 20px; display: grid; gap: 12px; box-shadow: 0 20px 60px #000c; }
.bvvelden { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; align-items: center; }
.bvvelden p { grid-column: 1 / -1; margin: 0; }
.bvin { font: inherit; font-size: 14px; background: #0b1220; color: var(--tekst); border: 1px solid #334155; border-radius: 8px; padding: 5px 9px; }
.bvplan { border: 1px solid #065f46; border-radius: 12px; padding: 10px 14px; display: grid; gap: 6px; font-size: 13.5px; }
.bvplan.fout { border-color: #b91c1c; }
.bvplan ul { margin: 0; padding-left: 18px; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #cbd5e1; }
.bvknoppen { display: flex; gap: 8px; justify-content: flex-end; }
.odonbekend { color: #fbbf24 !important; }

/* 0.57.1: blad slepen naar een andere set */
.odrbl[draggable=true] { cursor: grab; }
body.odsleept .odrbl { opacity: .75; } body.odsleept .odrbl.drop, .odrbl.drop { opacity: 1; outline: 2px dashed var(--cyaan); outline-offset: 3px; }
body.odsleept .odsetrij { outline: 1px dashed #334155; outline-offset: 4px; border-radius: 10px; }
.odsetrij.drop { outline: 2px dashed var(--cyaan) !important; background: rgba(56,189,248,.06); }
.odnieuwzone { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70; display: flex; gap: 12px; align-items: center;
  padding: 14px 26px; border: 2px dashed #38bdf8; border-radius: 16px; background: #070b14f0; color: #e0f2fe; font-size: 14px; box-shadow: 0 10px 30px #000c; }
.odnieuwzone.drop { background: #0c4a6e; }
.odnieuwzone[hidden] { display: none; }

/* 0.57.2: blad precies neerzetten (vóór/na, tussen twee bladen, achteraan een set) */
.odrbl.dropvoor { box-shadow: -6px 0 0 -1px var(--cyaan); } .odrbl.dropna { box-shadow: 6px 0 0 -1px var(--cyaan); }
.odrknip.drop { background: var(--cyaan) !important; color: #0f172a !important; opacity: 1 !important; transform: scale(1.2); }
.odsetbreuk.drop .lijn { background: var(--cyaan) !important; height: 3px; }
body.odsleept .odrknip { opacity: 1; }
.odrbl { position: relative; }
.odrbl.dropvoor, .odrbl.dropna { box-shadow: none; }
.odrbl.dropvoor::before, .odrbl.dropna::before { content: ""; position: absolute; top: -6px; bottom: 14px; width: 5px; border-radius: 3px; background: var(--cyaan); box-shadow: 0 0 12px var(--cyaan); }
.odrbl.dropvoor::before { left: -12px; } .odrbl.dropna::before { right: -12px; }

/* 0.57.3: verplaatste bladen zichtbaar + terug */
.odrbl.verplaatst .odrp { outline: 2px solid #f59e0b; outline-offset: 2px; border-radius: 4px; }
.odvpl { display: flex; gap: 6px; align-items: center; color: #fbbf24; font-size: 11.5px; font-weight: 400; max-width: 150px; }
.odvpl > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odvplterug { font: inherit; font-size: 11px; background: #1f2937; color: #fde68a; border: 1px solid #92400e; border-radius: 6px; padding: 0 6px; cursor: pointer; flex: none; }
.odvplterug:hover { background: #92400e; color: #fff; }
.odrbl.flits .odrp { animation: odflits 1.6s ease-out; }
@keyframes odflits { 0%, 40% { box-shadow: 0 0 0 6px #38bdf8, 0 0 30px #38bdf8; } 100% { box-shadow: none; } }
.odvpl { flex-wrap: wrap; max-width: 122px; gap: 3px 6px; } .odvpl > span { white-space: normal; overflow: visible; line-height: 1.25; }

/* 0.57.4: naam als invulveld bovenaan het venster; venster past in beeld */
.odnaamin { font: inherit; font-size: 16px; font-weight: 700; color: var(--tekst); background: #0b1220; border: 1px dashed #334155; border-radius: 8px; padding: 3px 9px; min-width: 180px; max-width: 100%; }
.odnaamin:hover { border-color: #64748b; } .odnaamin:focus { outline: none; border-style: solid; border-color: var(--cyaan); }
.odwaaier.metpaneel { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 520px); gap: 28px; }
.odpaneelvak { min-width: 0; } .odpaneelvak .odvenster { min-width: 0; overflow-x: hidden; }
.odpaneelvak .odzin { flex-wrap: wrap; }

/* 0.57.5: geen boot / boot + klant in het venster */
.odbootweg { font: inherit; font-size: 12.5px; background: none; border: 1px solid #334155; color: #fca5a5; border-radius: 999px; padding: 1px 10px; cursor: pointer; }
.odbootweg:hover { border-color: #f87171; }
.odklantkies .odklantblok { margin-left: 0; }

/* ---------- 0.59: illustratie voor → na (twee plekken bij ERBIJ; 'zo ziet het eruit' op de kaart) ---------- */
.kbslots { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 6px 0 4px; }
.kbslot { border: 1px dashed var(--rand); border-radius: 10px; padding: 6px 10px 6px; }
.kbslot .t { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.kbslot.nu .t { color: #fca5a5; }
.kbslot.na .t { color: #6ee7b7; }
.kbslot .kbbijl { margin: 2px 0 4px; min-height: 40px; }
.kbslot .kbtools { margin-top: 4px; }
.kbslot .kn.zacht { padding: 2px 8px; font-size: 12px; }
.kbfoto.eng { border: 1px solid #10b981; border-radius: 6px; overflow: hidden; transform: none; background: #000; }
.kbbadge.eng { background: #10b981; color: #022c22; }
.kbweg.rol { top: 20px; font-size: 12px; }
.kbitem:hover .kbweg.rol { opacity: 1; }
.kbvoorna { display: grid; gap: 6px; margin: 2px 0 6px; }
.kbvn { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.kbvn .b { position: relative; border: 1px solid var(--rand); border-radius: 10px; padding: 8px 8px 6px; background: #000; cursor: zoom-in; display: grid; grid-template-rows: auto 1fr auto; gap: 6px; }
.kbvn .b.leeg { cursor: default; background: var(--vlak2, rgba(255,255,255,.02)); align-content: start; }
.kbvn .b .t { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.kbvn .b.voor .t { color: #fca5a5; }
.kbvn .b.na .t { color: #6ee7b7; }
.kbvn .b .t { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.kbvn .b .t .kbbadge { position: static; margin: 0; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.kbvn .b .onder a { color: var(--accent, #38bdf8); text-decoration: none; }
.kbtwee { container-type: inline-size; }
@container (max-width: 760px) { .kbvn { grid-template-columns: 1fr; } .kbvn .pijl { transform: rotate(90deg); justify-self: center; } }
.kbvn .b img { width: 100%; max-height: 460px; object-fit: contain; display: block; background: #000; border-radius: 6px; }
.kbvn .b .onder { font-size: 11px; color: var(--gedempt); line-height: 1.35; }
.kbvn .pijl { align-self: center; font-size: 26px; color: #94a3b8; padding: 0 2px; }
@media (max-width: 1100px) { .kbvn { grid-template-columns: 1fr; } .kbvn .pijl { transform: rotate(90deg); justify-self: center; } }

/* ---------- kennisbank 0.60: de kaart als spoor, snippets, MYdrawingPortal zichtbaar ---------- */
.kbslots { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .kbslots { grid-template-columns: 1fr; } }
.kbfoto.snip { transform: none; background: #000; border: 1px solid #475569; border-radius: 6px; width: 132px; height: 80px; }
.kbfoto.snip img { object-fit: contain; }
.kbbadge.groen { background: #10b981; color: #022c22; } .kbbadge.snip { background: #475569; color: #e2e8f0; }
.kbweg.bewerk { top: 46px; right: 50px; font-size: 12px; } .kbitem:hover .kbweg.bewerk { opacity: 1; }
.kbslot .kbk .paars, .kbslot b.paars { color: #c4b5fd; font-weight: 600; }
.kbspoor { position: relative; margin: 4px 0 0 4px; }
.kbstap { position: relative; padding: 7px 12px 9px 34px; border-radius: 10px; margin: 2px 0; border: 1px solid transparent; }
.kbstap::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: #1f2937; }
.kbstap:first-child::before { top: 18px; } .kbstap:last-child::before { bottom: auto; height: 18px; }
.kbnode { position: absolute; left: 3px; top: 10px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #334155; background: var(--kaart); font-size: 11px; line-height: 14px; text-align: center; color: var(--gedempt); z-index: 1; }
.kbstap.ok .kbnode { border-color: #059669; background: #059669; color: #042f2e; } .kbstap.ok .kbnode::after { content: "✓"; }
.kbstap.nu .kbnode { border-color: #f5b041; background: #f5b041; color: #1a1200; animation: kbpuls 1.6s infinite; } .kbstap.nu .kbnode::after { content: "●"; }
.kbstap.tp .kbnode { border-color: #7c3aed; background: #7c3aed; color: #fff; } .kbstap.tp .kbnode::after { content: "⚙"; }
.kbstap.nu { background: rgba(245,176,65,.06); border-color: rgba(245,176,65,.35); }
.kbstap.tp { background: rgba(124,58,237,.07); border-color: rgba(124,58,237,.4); }
.kbstap.wacht { opacity: .55; }
@keyframes kbpuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,176,65,.5); } 50% { box-shadow: 0 0 0 6px rgba(245,176,65,0); } }
.kbstkop { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; flex-wrap: wrap; }
.kbstap.wacht .kbstkop { cursor: default; }
.kbstkop .n b { font-weight: 700; font-size: 13px; letter-spacing: .02em; } .kbstkop .n small { color: var(--gedempt); font-weight: 500; margin-left: 6px; font-size: 11.5px; }
.kbpil { font-size: 11px; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--rand); color: var(--gedempt); white-space: nowrap; }
.kbpil.ok { border-color: #059669; color: var(--groen); }
.kbpil.nu { border-color: #f5b041; color: #fcd34d; background: rgba(245,176,65,.12); font-weight: 700; }
.kbpil.tp { border-color: #7c3aed; color: #ddd6fe; background: rgba(124,58,237,.14); font-weight: 600; }
.kbpil.rood { border-color: var(--rood); color: #fca5a5; font-weight: 700; }
.kbstbody { margin-top: 8px; display: grid; gap: 4px; } .kbstap.dicht .kbstbody { display: none; }
.kbsamenv { color: var(--gedempt); font-size: 12.5px; margin-top: 3px; } .kbstap:not(.dicht):not(.wacht) .kbsamenv { display: none; }
.kbhint { color: var(--gedempt); font-size: 12.5px; font-style: italic; }
.kbkomt { margin: 6px 0 2px; font-size: 13px; } .kbkomt .groen { color: var(--groen); }
.kbrg summary { cursor: pointer; color: var(--gedempt); font-size: 12.5px; } .kbrg[open] summary { margin-bottom: 4px; }
.kbvg { display: grid; gap: 3px; margin: 4px 0 6px; }
.kbvg > div { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.kbvg .tijd { color: var(--gedempt); font-size: 11px; min-width: 58px; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.kbvg .ok::before { content: "✓"; color: var(--groen); font-weight: 700; } .kbvg .bezig::before { content: "●"; color: #c4b5fd; animation: kbknip 1s infinite; }
.kbvg .later::before { content: "○"; color: #475569; } .kbvg .later { color: var(--gedempt); }
.kbvg .fout::before { content: "✗"; color: var(--rood); font-weight: 700; } .kbvg .geen::before { content: "–"; color: #fcd34d; }
.kbvg .groen { color: var(--groen); } .kbvg .rood { color: #fca5a5; }
@keyframes kbknip { 50% { opacity: .3; } }
.kbwaar { font-size: 12px; color: var(--gedempt); border-top: 1px solid #1f2937; padding-top: 5px; margin-top: 2px; }
.kbklok, .kbaftel { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.kbles .kn.aan { border-color: var(--cyaan); color: var(--cyaan); }
.kbkeuze input[type=checkbox], .snipvoet input[type=checkbox] { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 16px; padding: 0; }
.kbmeer2 > .kbspoor { margin-top: 6px; }

/* snippet-modus: balk bovenaan, de rest van het menu grijs */
.snipbalk { position: fixed; top: var(--kop-h); left: var(--rail-b); right: 0; z-index: 60; display: flex; gap: 12px; align-items: center; padding: 8px 16px; background: #1e1b4b; border-bottom: 2px solid #7c3aed; color: #e9e5ff; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.snipbalk .ic { font-size: 18px; } .snipbalk .tx { flex: 1; } .snipbalk .tx span { color: #c4b5fd; }
body.snippet-modus main { padding-top: 62px; }
body.snippet-modus .rail a:not([data-pagina="tekeningen"]):not([data-pagina="kern"]) { opacity: .25; pointer-events: none; filter: grayscale(1); }
body.snippet-modus .rail a[data-pagina="tekeningen"], body.snippet-modus .rail a[data-pagina="kern"] { color: #ddd6fe; }
.snipblad { display: grid; gap: 8px; }
.sniptip { color: var(--gedempt); font-size: 12.5px; }
.snipvel { position: relative; overflow: auto; background: #030712; height: max(420px, calc(100vh - 250px)); border: 1px solid var(--rand); border-radius: 10px; cursor: crosshair; user-select: none; touch-action: none; }
.snipvak { position: relative; }
.snipvak img { display: block; user-select: none; -webkit-user-drag: none; }
.snipsel { position: absolute; border: 2px dashed #f5b041; background: rgba(245,176,65,.10); pointer-events: none; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); }
.snipvoet { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0 14px; }
.snipvoet .ruimte, .sbpop footer .ruimte { flex: 1; }
.snipvoet .kn, .snipbed .kn, .sbpop .kn { font: inherit; font-size: 12.5px; border: 1px solid #334155; border-radius: 9px; padding: 5px 11px; background: var(--vlak2, #0b1220); color: var(--tekst); cursor: pointer; }
.snipvoet .kn.ja, .sbpop .kn.ja { border-color: var(--groen); background: rgba(52,211,153,.12); font-weight: 600; }
.snipvoet .kn:disabled { opacity: .45; cursor: default; }
.snipvoet .kn.zacht, .snipbed .kn.zacht, .sbpop .kn.zacht { border-style: dashed; color: var(--gedempt); }
.snipbed .kn.aan { border-color: var(--cyaan); color: var(--cyaan); }
.snipvoet .kbkeuze { font-size: 12.5px; display: flex; gap: 6px; align-items: center; }

/* de snippet-bewerker */
.sbov { position: fixed; inset: 0; background: rgba(2,6,23,.84); z-index: 95; display: grid; place-items: center; }
.sbpop { background: #0f172a; border: 1px solid var(--rand); border-radius: 14px; width: min(1240px, 97vw); height: min(820px, 95vh); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.sbpop header, .sbpop footer { display: flex; gap: 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid #1f2937; flex-wrap: wrap; }
.sbpop footer { border-bottom: 0; border-top: 1px solid #1f2937; }
.sbpop header b { font-size: 14px; } .sbpop header .kbk { flex: 1; }
.sbbody { display: grid; grid-template-columns: 200px 1fr; min-height: 0; }
.sbbody:has(.sbbib:not([hidden])) { grid-template-columns: 200px 1fr 260px; }
.sbgereed { border-right: 1px solid #1f2937; padding: 10px; display: grid; gap: 4px; align-content: start; font-size: 13px; overflow: auto; }
.sbgereed button, .sbzoom button { font: inherit; font-size: 12.5px; text-align: left; background: #0b1220; border: 1px solid #1f2937; border-radius: 8px; color: var(--tekst); padding: 5px 10px; cursor: pointer; }
.sbgereed button.aan { border-color: var(--cyaan); color: var(--cyaan); }
.sbkl { display: flex; gap: 6px; margin: 4px 0; } .sbkl i { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; } .sbkl i.aan { border-color: #fff; }
.sbrange { display: grid; grid-template-columns: 50px 1fr; align-items: center; font-size: 11.5px; color: var(--gedempt); gap: 6px; } .sbrange input { width: 100%; }
.sbzoom { display: flex; gap: 4px; align-items: center; } .sbz { font: inherit; font-size: 12px; background: transparent; border: 0; color: var(--tekst); cursor: pointer; min-width: 56px; }
.sbvel { position: relative; overflow: auto; background: #030712; user-select: none; touch-action: none; }
.sbwrap { position: relative; } .sbwrap img { display: block; user-select: none; -webkit-user-drag: none; }
.sbcv { position: absolute; left: 0; top: 0; cursor: crosshair; }
.sbtekst { position: absolute; transform: translate(0, -60%); width: 200px; font: bold 14px Inter, system-ui, sans-serif; background: rgba(11,18,32,.9); border: 1px solid; border-radius: 4px; padding: 2px 6px; z-index: 2; }
.sbbib { border-left: 1px solid #1f2937; padding: 10px; display: grid; gap: 6px; align-content: start; overflow: auto; font-size: 12.5px; }
.sbbib[hidden] { display: none; }
.sbbib input[type=text] { font: inherit; width: 100%; background: #0b1220; border: 1px solid #334155; border-radius: 8px; color: var(--tekst); padding: 6px 8px; }
.sbbiblijst { display: grid; gap: 4px; }
.sbfam summary { cursor: pointer; color: var(--gedempt); font-size: 12px; padding: 3px 0; }
.sbsym { display: grid; gap: 3px; margin: 2px 0 6px; }
.sbsymk { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: center; text-align: left; font: inherit; font-size: 11.5px; background: #0b1220; border: 1px solid #1f2937; border-radius: 8px; color: var(--tekst); padding: 3px 6px; cursor: pointer; }
.sbsymk img { width: 54px; height: 30px; object-fit: contain; background: #000; border-radius: 4px; }
.sbsymk.aan { border-color: var(--cyaan); } .sbsymk:hover { border-color: #64748b; }

/* 0.60.1: vaste knop 'stap terug' op de kaart + weggehaalde bijlagen */
.kbkop2 .kbterug { margin-left: auto; font-size: 12.5px; font-weight: 600; padding: 4px 12px; border: 1px solid #f5b041; border-radius: 9px; color: #1a1200; background: #f5b041; }
.kbkop2 .kbterug:hover { background: #fcd34d; }
.kbles .kn.terug { border-color: #f5b041; color: #fcd34d; background: rgba(245,176,65,.10); font-weight: 600; }
/* 0.61.1: ×, ✎ en → op een bijlage altijd zichtbaar (niet alleen bij hover) */
.kbweg { opacity: .7; } .kbitem:hover .kbweg { opacity: 1; }
.kbweglijst { margin: 2px 0 4px; } .kbweglijst > summary { cursor: pointer; font-size: 12px; color: var(--gedempt); }
.kbwegitem { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; padding: 3px 0; }
.kbwegitem img { width: 56px; height: 36px; object-fit: contain; background: #000; border-radius: 4px; opacity: .7; }
.kbkop2 .kbterug.leeg { border: 1px dashed #334155; border-radius: 9px; padding: 3px 10px; font-size: 12px; color: var(--gedempt); margin-left: auto; background: none; cursor: default; }

/* 0.61 klantportaal-beheer (Klanten → klant) */
.kpbeheer { border-top: 1px solid var(--rand, #26344f); margin-top: 10px; }
.kpbrij { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0; }
.kpbgroep { margin: 14px 0 6px; }
.kpbacc { display: inline-flex; gap: 6px; align-items: center; background: #16223a; border: 1px solid #26344f; border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.kpbacc.uit { opacity: .6; }
.kpbwaarschuw { color: #f59e0b; font-size: 12.5px; }
.kpbrij select, .kpbrij input:not([type=checkbox]) { width: auto; min-width: 0; margin: 0; padding: 5px 9px; }
.kpbrij label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.kpbrij input[type=checkbox] { width: auto; margin: 0; }
.kpbeheer td .linkknop + .linkknop { margin-left: 14px; }

/* ---------- 0.62: AI-model en verbruik (alleen beheerder) ---------- */
.vbpil { font-size: 11px; border: 1px solid var(--rand); border-radius: 999px; padding: 2px 9px; color: var(--gedempt); white-space: nowrap; }
.vbpil.ok { border-color: #059669; color: var(--groen); }
.vbpil.or { border-color: var(--oranje); color: var(--oranje); }
.vbactief { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid var(--rand); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; font-size: 13px; background: rgba(255,255,255,.015); }
.vbstip { width: 9px; height: 9px; border-radius: 50%; background: var(--groen); box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
.vbstip.uit { background: #475569; box-shadow: none; }
.vbknoppen { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vbknoppen select { font-size: 12px; padding: 4px 8px; }
.vbtegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; }
.vbtegel { border: 1px solid var(--rand); border-radius: 10px; padding: 9px 12px; }
.vbtegel .k { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--gedempt); font-weight: 600; }
.vbtegel .w { font-size: 17px; font-weight: 700; margin: 2px 0; white-space: nowrap; }
.vbtegel .w small { font-size: 12.5px; font-weight: 500; color: var(--gedempt); }
.vbvak { padding: 12px 18px 16px; }
.vbstaven { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; height: 190px; border-bottom: 1px solid var(--rand); }
.vbweek { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.vbweek:hover .vbstapel { filter: brightness(1.15); }
.vbstapel { display: flex; flex-direction: column-reverse; border-radius: 5px 5px 0 0; overflow: hidden; opacity: .78; }
.vbweek.aan .vbstapel { opacity: 1; }
.vbstapel i { display: block; }
.vbtot { font-size: 11px; text-align: center; padding-bottom: 3px; color: var(--gedempt); }
.vblbl { font-size: 11px; text-align: center; padding-top: 5px; color: var(--gedempt); }
.vbweek.aan .vblbl { color: var(--cyaan); font-weight: 700; }
.vbo { background: #38bdf8; } .vbk { background: #a78bfa; } .vbov { background: #64748b; }
.vbleg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--gedempt); margin: 8px 0 0; }
.vbleg i, .vbdot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.vbkop { margin: 16px 0 4px; font-size: 13px; }
.vbtabel td.r, .vbtabel th.r { text-align: right; font-variant-numeric: tabular-nums; }
.vbbalk { display: flex; height: 5px; border-radius: 3px; background: #1f2937; overflow: hidden; min-width: 80px; }
.vbbalk.breed { margin-top: 4px; max-width: 160px; }
.vbbalk i { display: block; height: 100%; }
.vbbalk .uit { background: #34d399; } .vbbalk .inn { background: #60a5fa; } .vbbalk .inn.zacht { opacity: .55; } .vbbalk .cache { background: #475569; }
.vbmeter { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border-top: 1px dashed #3f3f46; margin-top: 8px; padding-top: 7px; font-size: 12.5px; color: var(--gedempt); }
.vbmeter b { color: var(--tekst); font-weight: 600; }
.vbmeter .vbopen { color: var(--cyaan); text-decoration: none; }
.vbuitklap { width: 100%; }
.vbmini { display: grid; grid-template-columns: auto minmax(120px, 260px) auto; gap: 3px 10px; align-items: center; font-size: 12px; margin: 4px 0 6px; }
@media (max-width: 900px) { .vbtegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vbtabel td { white-space: nowrap; vertical-align: middle; }
.vbtabel td:nth-child(2) { white-space: normal; min-width: 260px; }

/* 0.62.1: kennisbank-beelden donker of licht (dezelfde keuze als Tekeningen: body.tblicht, ◑ donker / ◐ licht) */
.kbvnkop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.kbvnkop .tglicht, .kbgrootvoet .tglicht { font-size: 12px; padding: 2px 10px; }
.kbgrootvoet { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sbpop header .tglicht { font-size: 12px; padding: 3px 10px; }
body.tblicht .kbvn .b.tg { background: #fff; }
body.tblicht .kbvn .b.tg .onder { color: #475569; }
body.tblicht img.tginv, body.tblicht .kbwegitem img, body.tblicht .sbsymk img, body.tblicht .sbwrap img, body.tblicht .sbcv, body.tblicht .snipvak img { filter: invert(1) hue-rotate(180deg); }
body.tblicht .kbfoto.tg, body.tblicht .kbblad.tg i { background: #fff; border-color: #c9ced8; }
body.tblicht .sbvel, body.tblicht .snipvel { background: #fff; }
body.tblicht .kbgroot.tg { background: #fff; } body.tblicht .kbgroot.tg .gedempt { color: #475569; }
body.tblicht .kbvn .b.tg img.tgkb, body.tblicht .kbfoto.tg, body.tblicht .kbblad.tg i { background: #fff; }
.kbvraaguitleg { margin-top: 4px; }
.kbtools .kn[hidden] { display: none; }

/* 0.64 Weggehaald: terugzetten / definitief verwijderen (weggehaald.js) */
.wgvak { padding: 14px 16px; overflow: auto; display: grid; gap: 18px; min-width: min(860px, 90vw); max-height: 72vh; }
.wgdeel h3 { margin: 0 0 6px; font-size: 1rem; }
.wgdeel td { vertical-align: top; }
.wgbezig { opacity: .7; }
.wgstatus { font-weight: 600; }
.wgstatus.weg { color: var(--oranje); }
.wgstatus.fout { color: var(--rood); }
.wgstatus.terug, .wgstatus.ingetrokken { color: var(--groen); }
.wgstatus.definitief { color: var(--gedempt); }

/* 0.64.1 prullenmand (weggehaald.js) en selecteren in een set (fase3.js) */
.tpprul { position: fixed; left: calc(var(--rail-b) + 22px); bottom: 22px; z-index: 64; width: 62px; height: 62px; border-radius: 18px;
  display: grid; place-items: center; padding: 0; cursor: pointer; color: var(--gedempt);
  background: linear-gradient(160deg, #111827, var(--kaart)); border: 1px solid var(--rand);
  box-shadow: 0 10px 30px rgba(0,0,0,.45); transition: transform .22s ease, border-color .22s, color .22s, background .22s, box-shadow .22s; }
.tpprul[hidden] { display: none; }
.tpprul:hover { color: var(--tekst); border-color: #334155; transform: translateY(-2px); }
.tpprul::after { content: ""; position: absolute; inset: -7px; border-radius: 24px; border: 2px solid var(--oranje); opacity: 0;
  transition: opacity .9s; pointer-events: none; }
.tpprulbeeld { width: 34px; height: 34px; display: block; }
.tpprulsvg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.tpprulsvg .deksel { transform-origin: 9px 13.5px; transition: transform .28s cubic-bezier(.3,1.6,.5,1); }
.tpprulsvg .bak { transform-origin: 24px 42px; }
.tpprultal { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--oranje); color: #1c0a00; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--achtergrond); }
.tpprultal[hidden] { display: none; }
.tpprullabel { position: absolute; left: 0; bottom: calc(100% + 14px); transform: translateY(6px); white-space: nowrap; display: grid; gap: 1px;
  padding: 7px 11px; border-radius: 10px; background: var(--kaart); border: 1px solid var(--rand); color: var(--tekst); text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.tpprullabel small { color: var(--gedempt); font-size: 11px; }
.tpprul:hover .tpprullabel { opacity: 1; transform: none; }
body.tp-sleept .tpprul { transform: scale(1.15); color: var(--oranje); border-color: var(--oranje); background: linear-gradient(160deg, #1f1309, var(--kaart)); }
body.tp-sleept .tpprul::after { opacity: .55; transition: opacity .3s; }
body.tp-sleept .tpprul .tpprullabel { opacity: 1; transform: none; }
body.tp-sleept .tpprul .tpprullabel small { display: none; }
body.tp-sleept .tpprul .tpprullabel b::after { content: " · sleep hierheen"; font-weight: 400; color: var(--oranje); }
body.tp-sleept .tpprul.erboven { transform: scale(1.28); background: linear-gradient(160deg, #3a1d08, #1f1309); }
body.tp-sleept .tpprul.erboven::after { opacity: 1; }
.tpprul.erboven .deksel { transform: rotate(-32deg) translate(-2px, -4px); }
body.tp-sleept .tpprul.erboven .tpprullabel b::after { content: " · laat los"; font-weight: 700; }
.tpprul.slik .bak { animation: tpslik .55s ease; }
.tpprul.slik .deksel { animation: tpdeksel .55s ease; }
@keyframes tpslik { 0% { transform: scale(1); } 35% { transform: scale(1.12, .9); } 70% { transform: scale(.96, 1.04); } 100% { transform: scale(1); } }
@keyframes tpdeksel { 0% { transform: rotate(-32deg) translate(-2px, -4px); } 60% { transform: rotate(4deg); } 100% { transform: none; } }
/* sleepbeeld: klein stapeltje met het aantal (buiten beeld gemaakt, alleen als drag-image) */
.tpsleepbeeld { position: fixed; top: -500px; left: -500px; width: 150px; height: 128px; pointer-events: none; }
.tpsbkaart { position: absolute; left: 14px; top: 8px; width: 118px; height: 84px; border-radius: 6px; overflow: hidden;
  background: #080c16; border: 1px solid #334155; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.tpsbkaart img { width: 100%; height: 100%; object-fit: contain; background: #080c16; }
.tpsbkaart.k1 { transform: rotate(-5deg) translate(-6px, 4px); }
.tpsbkaart.k2 { transform: rotate(6deg) translate(8px, 6px); }
.tpsbtal { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--oranje); color: #1c0a00; font-weight: 700; font-size: 12px; }
/* selecteren in een set */
.tbtegel { position: relative; }
.tbvink { display: none; }
.tbtegels.kiesmodus .tbtegel { cursor: pointer; }
.tbtegels.kiesmodus .tbvink { display: grid; place-items: center; position: absolute; z-index: 2; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(226,232,240,.6); background: rgba(7,10,18,.75); transition: background .15s, border-color .15s, transform .15s; }
.tbtegels.kiesmodus .tbtegel:hover .tbvink { border-color: var(--cyaan); transform: scale(1.08); }
.tbtegels.kiesmodus .tbtegel.gekozen { border-color: var(--cyaan); box-shadow: 0 0 0 2px var(--cyaan), 0 8px 24px rgba(56,189,248,.12); }
.tbtegels.kiesmodus .tbtegel.gekozen .tbvink { background: var(--cyaan); border-color: var(--cyaan); }
.tbtegels.kiesmodus .tbtegel.gekozen .tbvink::after { content: ""; width: 10px; height: 5px; border: solid #04121c; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
body.tp-sleept .tbtegels.kiesmodus .tbtegel.gekozen { opacity: .45; }
.tbselbalk { position: fixed; left: calc(50% + var(--rail-b) / 2); bottom: 22px; transform: translateX(-50%); z-index: 63; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: 14px; background: rgba(12,16,28,.96); border: 1px solid var(--cyaan); box-shadow: 0 14px 40px rgba(0,0,0,.55);
  max-width: calc(100vw - var(--rail-b) - 160px); white-space: nowrap; animation: tpbalkin .25s ease; }
.tbselbalk .pdfformaat { width: auto; flex: 0 0 auto; }
.tbselbalk > * { flex: 0 0 auto; }
@media (max-width: 1250px) { .tbselbalk small.gedempt { display: none; } }
.tbselbalk.leeg { border-color: var(--rand); }
.tbseltal b { color: var(--tekst); }
.tbselbalk.leeg .tbseltal b { color: var(--gedempt); font-weight: 400; }
.tbselsep { width: 1px; height: 22px; background: var(--rand); }
.tbselweg:not([disabled]) { border-color: var(--oranje); color: var(--oranje); }
@keyframes tpbalkin { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tbresultaat { padding-bottom: 90px; }
@media (prefers-reduced-motion: reduce) {
  .tpprul, .tpprul::after, .tpprulsvg .deksel, .tbvink { transition: none; }
  .tpprul.slik .bak, .tpprul.slik .deksel, .tbselbalk { animation: none; }
  body.tp-sleept .tpprul, body.tp-sleept .tpprul.erboven, .tpprul:hover { transform: none; }
}
/* 0.64.7 opdracht op de TO-DO naar de prullenmand: 🗑 bij aanwijzen */
.wtopweg { position: absolute; z-index: 4; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; padding: 0; font-size: 13px; line-height: 26px;
  border: 1px solid #334155; background: #0f172a; color: var(--gedempt); cursor: pointer; opacity: 0; transform: scale(.85);
  transition: opacity .2s, transform .2s, border-color .2s; box-shadow: 0 4px 12px rgba(0,0,0,.45); }
.wtop:hover .wtopweg, .wtopweg:focus { opacity: 1; transform: scale(1); }
.wtopweg:hover { border-color: var(--oranje); background: #1f1309; }
body.tp-sleept .wtop .wtopweg { opacity: 0; }
/* 0.64.9 Nieuwe set bij het aanleveren: naam van de set */
.nbrechts .nbsetnaaminv { width: 100%; box-sizing: border-box; font-size: 15px; padding: 8px 10px; border-color: var(--cyaan); }
.nbrechts .nbsetnaaminv::placeholder { color: var(--gedempt); }
.nbrij { padding-bottom: 52px; }   /* 0.64.9: naam onder de stapel mag 3 regels zijn zonder over de volgende kop te lopen */
/* 0.65 opdelen: land (locatie › installatie › set), uitleg per stap, lege set opheffen */
.odkiesuitleg { margin: 0 0 8px; font-size: 13px; color: var(--gedempt); line-height: 1.45; } .odkiesuitleg b { color: var(--tekst); }
.odlandinsts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.odlandinst { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 160px; text-align: left; font: inherit; color: inherit; background: none;
  border: 1px solid rgba(148,163,184,.25); border-radius: 12px; padding: 9px 14px; cursor: pointer; }
.odlandinst b { font-size: 14px; } .odlandinst span { font-size: 12px; color: var(--gedempt); }
.odlandinst:hover { border-color: var(--accent); } .odlandinst.aan { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.odp2kiezer .odp2zelf:has(> input:only-of-type) { grid-template-columns: 1fr auto; }
.odinfo2.odleeg p { margin: 0; font-size: 13px; }
.odklanttip { display: inline-flex; gap: 6px; }
/* ===== 0.66 handleiding: drie boeken, plaatjes met pijlen, werkstroom, zoeken, print/PDF ===== */
.hlpagina { grid-template-columns: 270px minmax(0, 980px); }
.hlboeken { display: grid; gap: 6px; margin-bottom: 6px; }
.hlboek { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rand); color: inherit; text-decoration: none; }
.hlboek .hlboekicoon { grid-row: span 2; font-size: 18px; text-align: center; } .hlboek b { font-size: 13.5px; } .hlboek small { color: var(--gedempt); font-size: 11.5px; }
.hlboek.aan { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.hlboek:hover { border-color: var(--accent); }
.hlzoek { width: 100%; box-sizing: border-box; margin: 4px 0 6px; }
.hlinhkop { margin-top: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt); }
.hlinhgroep { display: flex; flex-direction: column; gap: 3px; } .hlinhgroep .hlsub { padding-left: 12px; font-size: 12px; }
.hlinhoud { max-height: calc(100vh - var(--kop-h) - 32px); overflow: auto; padding-right: 4px; }
.hlartikel h4 { margin: 30px 0 8px; font-size: 19px; font-weight: 600; color: var(--tekst); }
/* 10-10: boektitel en hoofdstukken duidelijk groot (de .kaart-regels maken h2/h3 klein en grijs) */
.hlartikel > h2 { padding: 0; margin: 0 0 10px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--tekst); }
.hlhoofdstuk { margin-top: 56px; }
.hlhoofdstuk > h3 { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding-top: 22px; border-top: 3px solid var(--accent);
  font-size: 27px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--tekst); line-height: 1.2; }
.hlhnr { flex: none; display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px; box-sizing: border-box; border-radius: 12px;
  background: var(--accent); color: #0b1220; font-size: 24px; font-weight: 800; }
.hlintro { font-size: 15.5px; line-height: 1.65; margin: 12px 0 14px; }
.hlhoofdstuk { scroll-margin-top: calc(var(--kop-h) + 12px); }
.hlartikel h4, .hlartikel h3 { scroll-margin-top: calc(var(--kop-h) + 12px); }
.hldoel { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 9%, transparent); border-left: 3px solid var(--accent); }
.hldoel > span:first-child { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; flex: none; }
.hlfig { margin: 14px 0 18px; }
.hlfig img { display: block; max-width: 100%; border-radius: 10px; border: 1px solid var(--rand); box-shadow: 0 6px 24px rgba(0,0,0,.35); cursor: zoom-in; }
.hlfig figcaption { margin-top: 6px; font-size: 12.5px; color: var(--gedempt); }
.hlgroot { position: fixed; inset: 0; z-index: 3000; background: rgba(2,6,15,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; cursor: zoom-out; }
.hlgroot img { max-width: 96vw; max-height: 86vh; border-radius: 8px; } .hlgroot p { color: #cbd5e1; margin: 0; } .hlgrootdicht { position: absolute; top: 14px; right: 20px; color: #cbd5e1; font-size: 13px; }
.hlstroom { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 12px 0 18px; }
.hlstap { display: flex; flex-direction: column; gap: 2px; min-width: 120px; max-width: 170px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--rand); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.hlstapicoon { font-size: 20px; } .hlstap b { font-size: 13px; } .hlstap small { font-size: 11.5px; color: var(--gedempt); line-height: 1.35; }
.hlkeuzes .hlstap { font: inherit; color: inherit; text-align: left; cursor: pointer; flex: 1 1 140px; max-width: none; }
.hlkeuzes .hlstap:hover { border-color: var(--accent); }
.hlpijl { align-self: center; color: var(--accent); font-size: 18px; font-weight: 700; }
.hlknoppen { display: grid; gap: 6px; margin: 4px 0 18px; }
.hlknop { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.hlknop > div { display: flex; flex-direction: column; } .hlknop > div span { color: var(--gedempt); font-size: 13.5px; }
.hlnr { width: 26px; height: 26px; border-radius: 50%; background: #f97316; color: #111; font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.hlkader { margin: 10px 0 14px; padding: 10px 14px; border-radius: 10px; border-left: 3px solid var(--cyaan); background: rgba(56,189,248,.07); }
.hlkader p { margin: 0 0 4px; } .hlkader p:last-child { margin: 0; }
.hlkader.let-op { border-left-color: var(--oranje); background: rgba(249,115,22,.08); }
.hlkader.voorbeeld { border-left-color: #a78bfa; background: rgba(167,139,250,.08); }
.hlkader.waarom { border-left-color: #34d399; background: rgba(52,211,153,.07); }
/* printweergave (#/handleiding/<boek>?print=1) en PDF: licht papier, geen menu, elk hoofdstuk op een nieuwe pagina */
body.hlprint .rail, body.hlprint .kop, body.hlprint #testband, body.hlprint #banners { display: none !important; }
body.hlprint main { margin: 0 !important; padding: 0 !important; }
body.hlprint { background: #fff !important; color: #111 !important; --gedempt: #555; --rand: #ddd; --accent: #0369a1; --cyaan: #0369a1; }
body.hlprint .hlprintvak { max-width: 1000px; margin: 0 auto; }
body.hlprint .hlartikel { background: #fff !important; color: #111; border: 0; box-shadow: none; padding: 0; font-size: 12.5px; }
body.hlprint .hlhoofdstuk { break-before: page; } body.hlprint .hlhoofdstuk:first-of-type { break-before: auto; }
body.hlprint .hlfig, body.hlprint .hlstroom, body.hlprint .hlknop, body.hlprint .hlkader { break-inside: avoid; }
body.hlprint .hlfig img { box-shadow: none; border-color: #ccc; }
body.hlprint .hlartikel code { background: #eee; }
body.hlprint .hlhoofdstuk { margin-top: 0; } body.hlprint .hlhnr { color: #fff; }
@page { size: A4; }
/* 0.66: de print-regel van het keurrapport verbergt alles behalve .ktrapport; de handleiding mag wel */
@media print {
  body.hlprint > #app { display: block !important; }
  body.hlprint main { display: block !important; margin: 0 !important; padding: 0 !important; }
  body.hlprint .hlartikel { overflow: visible !important; }
}
/* 0.66.1 menu: een tweede regel onder Tekeningen en Installaties zegt waar de knop over gaat */
.rail a span small { display: block; font-size: 9px; line-height: 1.15; color: var(--gedempt); opacity: .85; letter-spacing: 0; font-weight: 400; }
.rail a.actief span small { color: inherit; }

/* 0.66.5 afgerond: nog niet vrijgegeven = oranje halve stip; boom-filter-regel */
.wtklaarvel.nietvrij i { background: var(--oranje, #e8913a); }
.boomfilter { list-style: none; font-size: 12px; color: var(--gedempt); padding: 4px 8px 8px; }
.boomfilter a { margin-left: 4px; }

/* 0.67.0 lichtbak stap 6 'De deur uit' */
.lbstap.d.aan { background: #22c55e; color: #052e16; } .lbstap.d.aan small { color: #14532d; }
.lbstap:disabled { opacity: .45; cursor: not-allowed; }
.lbdeur { display: flex; flex-direction: column; gap: 14px; max-width: 820px; padding: 18px 20px; border: 1px solid #1e293b; border-radius: 16px; background: #0b1120; }
.lbdeurkop { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lbdeurkop h3 { margin: 0; font-size: 18px; }
.lbdeurpad { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lbdeurpad span { padding: 3px 10px; border-radius: 999px; border: 1px solid #334155; color: #64748b; }
.lbdeurpad span.aan { border-color: #22c55e; color: #86efac; }
.lbdeurpad span.uit { text-decoration: line-through; }
.lbdeurpad i { color: #475569; font-style: normal; }
.lbdeursets { display: flex; flex-direction: column; gap: 10px; }
.lbdeurset { display: flex; gap: 14px; align-items: center; }
.lbdeurrevrij { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.lbdeurrev { font-size: 15px; color: #86efac; }
.lbdeurrevin { width: 70px; font-weight: 700; }
.lbdeurkeuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lbdeurkeus { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid #334155; background: transparent; color: #cbd5e1; font: inherit; cursor: pointer; }
.lbdeurkeus span { font-size: 12px; color: #94a3b8; }
.lbdeurkeus.aan { border-color: #22c55e; background: rgba(34, 197, 94, .08); }
.lbdeurkeus:disabled { opacity: .5; cursor: not-allowed; }
.lbdeurvelden { display: flex; gap: 10px; }
.lbdeurvelden label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #94a3b8; flex: 1; }
.lbdeurvelden label.smal { flex: 0 0 110px; }
.lbdeurvoet { display: flex; align-items: center; gap: 10px; }
.knop.groot { padding: 10px 18px; font-size: 15px; }
.lbdeurstapel { position: relative; flex: 0 0 150px; width: 150px; aspect-ratio: 1.414 / 1; }
.lbdeurstapel .wtvel img { width: 100%; height: 100%; object-fit: contain; }
.lbdeurset > div:last-child { flex: 1; min-width: 0; }
.lbdeurrevlab { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #86efac; }

/* 0.69.0 lichtbak: origineel ernaast (zoom en verschuiven samen) */
.lbnaast { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lbnaastkol { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lbnaastkop { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #475569; white-space: nowrap; overflow: hidden; }
.lbnaastkop span { overflow: hidden; text-overflow: ellipsis; }
.lbbak.donker .lbnaastkop { color: #94a3b8; }
.lbnaast .lbvelvak { width: 100%; }
.lborigvak { cursor: grab; } .lborigvak.schuift { cursor: grabbing; }
.lbkiezer { position: absolute; inset: 0; overflow: auto; background: rgba(238, 246, 255, .97); padding: 10px; z-index: 5; color: #0f172a; font-size: 12px; cursor: default; }
.lbkiezer p { margin: 0 0 8px; }
.lbkiesgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.lbkies { display: flex; flex-direction: column; gap: 3px; padding: 4px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #334155; font: inherit; font-size: 10px; cursor: pointer; text-align: left; }
.lbkies img { position: static; width: 100%; height: auto; aspect-ratio: 1.414 / 1; object-fit: contain; background: #f8fafc; }
.lbkies.aan, .lbkies:hover { outline: 2px solid #22c55e; }
.lblaag.groen.aan { border-color: #16a34a; background: rgba(22,163,74,.12); }
.lborigvak:has(.lbkiezer) { min-height: 320px; aspect-ratio: auto !important; }
/* 0.69.3 bladeren door het origineel */
.lbbladeren { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.lbbladeren button { border: 1px solid #94a3b8; background: #fff; color: #0f172a; border-radius: 6px; width: 26px; height: 22px; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.lbbladeren button:disabled { opacity: .35; cursor: default; }
.lbbladeren b { font-size: 12px; color: #0f172a; min-width: 54px; text-align: center; }
.lbbak.donker .lbbladeren b { color: #e2e8f0; }
/* 0.69.5 bronnen: PDF = één plaatje, bladeren in het venster */
.bsmini { position: relative; }
.bspag { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(15,23,42,.85); color: #e2e8f0; font-size: 10px; font-weight: 600; }
.bspagina { margin-left: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(56,189,248,.15); color: #7dd3fc; font-size: 12px; font-weight: 600; }

/* 0.70: skill-update (Instellingen → Skill) */
.skupdate { display: grid; grid-template-columns: 1fr 320px; gap: 20px; border: 1px solid #38bdf8; border-radius: 14px; padding: 16px 18px;
  background: linear-gradient(180deg, rgba(56, 189, 248, .08), rgba(56, 189, 248, .02)); margin-bottom: 16px; }
.skupdate h3 { margin: 0 0 2px; font-size: 17px; }
.skupdblok { margin-top: 10px; border: 1px solid var(--rand); border-radius: 10px; background: var(--kaart); padding: 10px 12px; }
.skmd { font-size: 13px; } .skmd ul { margin: 4px 0 6px 18px; padding: 0; } .skmd li { margin: 2px 0; } .skmd p { margin: 4px 0; }
.skmd .skmdkop { display: block; margin: 8px 0 2px; } .skmd code { font-size: 12px; }
.skupdrechts { display: flex; flex-direction: column; gap: 10px; }
.skstappen { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.skstap { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; color: var(--gedempt, #94a3b8); }
.skstap i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #334155; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; }
.skstap b { color: var(--tekst, inherit); }
.skstap.ok i { border-color: #22c55e; background: rgba(34, 197, 94, .15); color: #86efac; }
.skstap.bezig i { border-color: #38bdf8; color: #7dd3fc; animation: skpuls 1s ease-in-out infinite; }
.skstap.fout i { border-color: #ef4444; color: #fca5a5; }
@keyframes skpuls { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .skstap.bezig i { animation: none; } }
.skupdklaar { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--rand); padding-top: 8px; }
.skkoppel { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; border: 1px dashed #475569; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.skkoppel ol { margin: 6px 0 0 18px; padding: 0; font-size: 13px; } .skkoppel li { margin: 3px 0; }
.skcontrole { display: flex; align-items: center; gap: 8px; }
@media (max-width: 800px) { .skupdate, .skkoppel { grid-template-columns: 1fr; } }

/* 0.70.1: knoppen op een algemene notitie (opgelost / intrekken / heropenen) */
.lbnotknoppen { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.lbnotknoppen .lbnotknop { position: static; }
.lbnotitie.st-opgelost, .lbnotitie.st-vervallen { opacity: .55; }

/* 0.70.2: in het vak 'in de set / vrijgeven' kreeg elke regel de flex-basis 380px van .odstap p, in een kolom = 380px
   hoogte (grote lege vlakken, Yuri 12-10). */
.odstap .ovvak { flex: 1 1 100%; }
.odstap .ovvak p { flex: none; }

/* 0.71.0: aanvullen binnen dezelfde revisie of een nieuwe revisie */
.lbdeuraanv { border: 1px solid var(--rand, #334155); background: transparent; color: inherit; border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; margin-right: 6px; }
.lbdeuraanv.aan { border-color: #34d399; background: rgba(52, 211, 153, .1); }

/* 0.72 plotstijlen (Instellingen › Tekenstandaard › Plotstijlen): het echte blad centraal, rechts lagen/kleuren/tabel */
.pspad { padding: 12px 18px 18px; }
.pstegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.pstegel { background: #0f1626; border: 1px solid var(--rand); border-radius: 10px; padding: 7px; text-align: left; color: var(--tekst); cursor: pointer; display: flex; flex-direction: column; gap: 4px; font: inherit; }
.pstegel:hover { border-color: var(--cyaan); }
.pstegel.aan { border-color: var(--cyaan); box-shadow: 0 0 0 1px var(--cyaan) inset; }
.pstegel small { color: var(--gedempt); font-size: 11.5px; }
.psvelmini { display: block; aspect-ratio: 1.414; background: #fff; border-radius: 5px; overflow: hidden; }
.psvelmini img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pstegelkop { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.pstegelkop b { font-family: ui-monospace, Menlo, monospace; }
.pstegel.nieuw { align-items: center; justify-content: center; border-style: dashed; min-height: 150px; }
.psplus { font-size: 28px; color: var(--cyaan); }
.pspil { font-size: 10.5px; border-radius: 99px; padding: 0 7px; border: 1px solid var(--rand); color: var(--gedempt); white-space: nowrap; }
.pspil.v { color: var(--groen); border-color: color-mix(in srgb, var(--groen) 50%, transparent); }
.pspil.c { color: var(--oranje); border-color: color-mix(in srgb, var(--oranje) 50%, transparent); }
.pspil.std { color: var(--cyaan); border-color: color-mix(in srgb, var(--cyaan) 50%, transparent); }
.pswerk { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .pswerk { grid-template-columns: 1fr; } }
.pslinks { position: sticky; top: 8px; }
.psvelbalk { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.psvelnaam { font-family: ui-monospace, Menlo, monospace; margin-right: 4px; }
.pssel { background: #0f1626; color: var(--tekst); border: 1px solid var(--rand); border-radius: 7px; padding: 4px 7px; font-size: 12.5px; max-width: 100%; }
.psvel { position: relative; background: #cfd5de; border-radius: 8px; overflow: auto; max-height: 72vh; border: 1px solid var(--rand); }
.psvel.donker { background: #05080f; }
.psbeeld { display: block; width: 100%; background: #fff; }
.psvel.donker .psbeeld { background: #000; }
.psstatus { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(11, 18, 32, .9); color: var(--gedempt); border: 1px solid var(--rand); border-radius: 99px; padding: 4px 12px; font-size: 12px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.psstatus.zicht { opacity: 1; } .psstatus.fout { color: var(--rood); }
.psrechts { background: #0f1626; border: 1px solid var(--rand); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.pstabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.pstab { background: none; border: 1px solid transparent; color: var(--gedempt); border-radius: 99px; padding: 4px 11px; cursor: pointer; font: inherit; font-size: 12.5px; }
.pstab.aan { color: var(--tekst); border-color: var(--rand); background: var(--kaart); }
.pstabel { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pstabel th { text-align: left; color: var(--gedempt); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 4px 5px; border-bottom: 1px solid var(--rand); }
.pstabel td { padding: 5px; border-bottom: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); vertical-align: middle; }
.pstabel td small { display: block; color: var(--gedempt); font-size: 11px; }
.pstabel td.c { text-align: center; white-space: nowrap; }
.psrij { cursor: pointer; } .psrij:hover { background: color-mix(in srgb, var(--cyaan) 8%, transparent); }
.psnoot { font-size: 11.5px; margin-top: 8px; }
.pssw { display: inline-flex; flex-direction: column; width: 40px; height: 22px; border-radius: 5px; overflow: hidden; border: 1px solid var(--rand); vertical-align: middle; }
.pssw i { flex: 1; } .pssw i.pap { box-shadow: inset 0 0 0 3px #fff; }
.psraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; max-height: 64vh; overflow: auto; }
.psrcel { background: none; border: 1px solid transparent; border-radius: 6px; padding: 2px; cursor: pointer; color: var(--gedempt); display: flex; flex-direction: column; align-items: center; font: inherit; }
.psrcel:hover { border-color: var(--cyaan); } .psrcel small { font-size: 10px; } .psrcel.extra small { color: var(--oranje); }
.pspenkop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.pspenkop small { display: block; color: var(--gedempt); font-size: 11.5px; }
.psvelden { display: grid; gap: 7px; }
.psveld { display: grid; grid-template-columns: 130px 1fr; gap: 2px 10px; align-items: center; font-size: 12.5px; }
.psveld > span:first-child { color: var(--gedempt); }
.psveld small { grid-column: 2; color: var(--gedempt); font-size: 11px; }
.psrijin { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.psvink { display: inline-flex; gap: 5px; align-items: center; }
.pshex, .psoms, .psgetal { background: #0b1220; color: var(--tekst); border: 1px solid var(--rand); border-radius: 6px; padding: 3px 7px; font: inherit; font-size: 12.5px; }
.pshex { width: 90px; font-family: ui-monospace, Menlo, monospace; } .psgetal { width: 72px; } .psoms { width: 100%; }
.psnel { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--rand); cursor: pointer; padding: 0; }
.psnel:hover { outline: 2px solid var(--cyaan); }
.psdikten { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 4px; }
.psbalk { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding: 9px 10px; background: #0f1626; border: 1px solid var(--rand); border-radius: 10px; position: sticky; bottom: 6px; z-index: 2; }
.psbalk .ruimte, .pspenkop .ruimte, .psversie .ruimte { flex: 1; }
.psvuil { color: var(--oranje); }
.psversies { margin-top: 12px; font-size: 12.5px; }
.psverskop { margin-bottom: 4px; }
.psversie { display: flex; gap: 8px; align-items: center; padding: 5px 4px; border-bottom: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); }
.psversie.aan { background: color-mix(in srgb, var(--cyaan) 7%, transparent); }
.psvelmini { position: relative; }
.pswacht { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 12px; font-style: normal; }
.psveld input[type=color] { width: 44px; height: 26px; padding: 0 2px; border: 1px solid var(--rand); border-radius: 6px; background: #0b1220; }
/* 0.73 (Yuri 12-10): fout -> terug naar je opmerkingen; opmerkingen aanpassen in de lichtbak */
.odfout { display: flex; flex-direction: column; gap: 10px; flex: 1 1 100%; }
.odfoutopm { display: flex; flex-direction: column; gap: 6px; }
.odfoutkaart { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border: 1px solid var(--rand); border-left: 3px solid var(--rood); border-radius: 6px; background: rgba(248,113,113,.05); font-size: 13.5px; }
.odfoutkaart b { white-space: nowrap; color: var(--gedempt); font-weight: 600; }
.lbbewerk { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.lbbewerk .knoppen { justify-content: flex-end; }
.lbnotitie .lbbewerk { min-width: 0; }
.lbnotitie.bewerkt { width: 280px; transform: none; }
.lbnotitie .lbbewerk textarea { font: inherit; font-size: 12px; }
.pskeuze { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: -4px 0 14px; padding: 8px 10px; background: #0f1626; border: 1px solid var(--rand); border-radius: 10px; font-size: 12.5px; }
.pspil.k { color: var(--paars); border-color: color-mix(in srgb, var(--paars) 50%, transparent); }

/* 0.73.5 (Yuri 12-10: "waar zijn de schema's gebleven?"): de hele set in de strook; bestaande bladen grijs, alleen kijken */
.lbmini.inset { opacity: .45; filter: grayscale(1); background: #dfe6ee; }
.lbmini.inset:hover { opacity: .8; }
.lbmini.inset.aan { opacity: 1; filter: none; box-shadow: 0 0 0 3px var(--gedempt), 0 4px 10px rgba(0,0,0,.4); }
.lbmini.inset.meer { opacity: .8; filter: none; background: transparent; border: 1px dashed var(--gedempt); color: var(--gedempt); font: inherit; font-size: 11px; padding: 4px; }
.lbmini small.lbnr { position: absolute; left: 3px; bottom: 3px; font-size: 9.5px; line-height: 1.3; background: rgba(15,23,42,.82); color: #e2e8f0; border-radius: 3px; padding: 0 4px; }
.lbmini small.lbnr.nieuw { background: rgba(14,116,144,.9); }
.lbzinset { color: var(--gedempt); font-size: .92em; }
.lbsetbak { background: #0b1220; }
.lbsetlabel { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 6px 10px; font-size: 13px; }
.lbsetlabel span { color: var(--gedempt); font-size: 12px; }
.lbsetvel { background: #fff; }
.lbsetvak { cursor: grab; margin: 0 auto; } .lbsetvak.schuift { cursor: grabbing; }
.odinset .stapel { opacity: .75; }

/* 0.75 huisstijl tekeningen (sjablonen) */
.sjkolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 22px; margin-top: 12px; }
.sjkolom { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--hoek); padding: 16px 18px 18px; }
.sjkolom header { display: flex; align-items: baseline; gap: 12px; }
.sjkolom h3 { margin: 0; font-size: 18px; }
.sjkolom h4 { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--gedempt); font-weight: 600; }
.sjblad { display: block; padding: 0; border: 1px solid var(--rand); background: #fff; border-radius: 3px; cursor: pointer; aspect-ratio: 1.4142; width: 100%; overflow: hidden; }
.sjblad img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sjleeg { display: grid; place-items: center; height: 100%; color: #667; font-size: 11px; background: #f4f5f7; }
.sjstapel { position: relative; height: 300px; margin: 14px 0 4px; }
.sjstapelblad { position: absolute; top: calc(var(--i) * 18px); left: calc(var(--i) * 13%); width: 46%; transition: transform .15s; }
.sjstapelblad:hover { transform: translateY(-6px); z-index: 9; }
.sjstapelblad .sjblad { box-shadow: 0 6px 22px rgba(0,0,0,.45); }
.sjlabel { font-size: 11px; color: var(--gedempt); margin-top: 3px; padding-left: 2px; }
.sjnu { margin: 6px 0 0; font-size: 13px; }
.sjkies { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.sjoptie { border: 1px solid transparent; border-radius: 6px; padding: 5px; }
.sjoptie.aan { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sjoptie:not(.aan) .sjblad:hover, .sjoptie:not(.aan) .sjmini:hover { outline: 2px solid var(--accent); }
.sjonder { display: grid; grid-template-columns: 1fr auto; gap: 0 6px; font-size: 12px; margin-top: 5px; line-height: 1.3; }
.sjonder .gedempt { grid-column: 1; font-size: 11px; }
.sjloep { grid-row: 1 / 3; grid-column: 2; background: none; border: 1px solid var(--rand); color: var(--tekst); border-radius: 5px; cursor: pointer; padding: 0 6px; }
.sjoptie.stijl { grid-column: span 2; }
.sjmini { position: relative; display: block; width: 100%; height: 172px; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 4px; }
.sjmini img, .sjmini .sjleeg { position: absolute; width: 58%; aspect-ratio: 1.4142; height: auto; top: calc(var(--i) * 9px); left: calc(var(--i) * 13%);
  background: #fff; border: 1px solid var(--rand); box-shadow: 0 3px 12px rgba(0,0,0,.4); }
.sjgroot { position: fixed; inset: 0; z-index: 200; background: rgba(4,6,12,.86); display: grid; place-items: center; padding: 24px; }
.sjgroot figure { margin: 0; max-width: min(96vw, 1500px); }
.sjgroot img { display: block; width: 100%; max-height: 82vh; object-fit: contain; background: #fff; border-radius: 3px; }
.sjgroot figcaption { display: flex; gap: 12px; align-items: center; margin-top: 10px; color: var(--tekst); }
.sjgroot figcaption .knop { margin-left: auto; }
.sjgroot figcaption .knop + .knop { margin-left: 0; }
.sjkop { float: right; }
.sjstapelblad.uit .sjblad { opacity: .28; filter: grayscale(1); }
.sjstapelblad.uit .sjlabel { text-decoration: line-through; }
.sjbladen { display: flex; flex-wrap: wrap; gap: 8px; }
.sjchip { display: inline-flex; align-items: center; gap: 7px; background: #0f1626; color: var(--gedempt); border: 1px solid var(--rand); border-radius: 18px; padding: 6px 13px 6px 8px; cursor: pointer; font: inherit; font-size: 13px; }
.sjchip .sjvink { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--rand); border-radius: 4px; font-size: 11px; }
.sjchip.aan { color: var(--tekst); border-color: var(--accent); }
.sjchip.aan .sjvink { background: var(--accent); border-color: var(--accent); color: #000; }
.sjchip[disabled] { cursor: default; opacity: .8; }
.sjklein { font-size: 12px; margin: 6px 0 0; }

/* plan 6: tweestapsverificatie (tweestaps.js) */
.tsstappen{display:grid;gap:18px;max-width:560px}
.tsstappen .tsstap{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.tsnr{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:700;font-size:13px}
.tsqr{background:#fff;display:grid;place-items:center;width:192px;height:192px;padding:10px;box-sizing:border-box;border-radius:8px;margin:8px 0}
.tsqr svg{display:block;width:100%;height:100%}
.tssleutel{word-break:break-all;user-select:all}
.tsrij{display:flex;gap:10px;align-items:center;margin-top:6px}
.tscodein{width:9em;font-size:20px;letter-spacing:.2em;text-align:center;font-variant-numeric:tabular-nums}
.tscodes{columns:2;gap:24px;margin:10px 0;padding-left:1.4em}
.tscodes li{font-size:15px;padding:2px 0}
.tsstatus .knoppen,.tsreserve .knoppen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tsscherm{max-width:620px}

/* 15-10 bladkeuze.js: welk blad is dit? (alleen als het portaal het niet herkent) */
.bkvak { margin: 6px 0 4px; }
.bkherkend { margin: 4px 0; font-size: 12.5px; color: var(--gedempt); }
.bkherkend b { color: var(--groen); }
.linkknop { background: none; border: 0; padding: 0; color: var(--cyaan); cursor: pointer; font: inherit; text-decoration: underline; }
.bkrij { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin: 6px 0; }
.bkrij figure { margin: 0; width: 112px; display: grid; gap: 3px; font-size: 11.5px; }
.bkrij img { width: 112px; height: 80px; object-fit: contain; background: #f8fafc; border-radius: 4px; cursor: zoom-in; border: 2px solid transparent; }
.bkrij figcaption { line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bkrij .bkbron { border-right: 1px dashed var(--rand); padding-right: 10px; width: 122px; }
.bkrij .bkbron img { border-color: var(--oranje); }
.bkrij .bkblad.aan img { border-color: var(--groen); }
.bkchips { display: inline-flex; gap: 6px; margin-left: 8px; }
.bkchip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 8px; border-radius: 10px; background: rgba(34,197,94,.15); color: var(--groen); font-size: 12px; }
.bkchip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 14px; }
.bkgroot { position: fixed; inset: 0; z-index: 400; background: rgba(5,8,12,.94); display: grid; grid-template-rows: auto 1fr; }
.bkgbalk { display: flex; gap: 8px; align-items: center; padding: 10px 16px; color: var(--tekst); }
.bkgtwee { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 16px; min-height: 0; }
.bkgtwee figure { margin: 0; display: grid; grid-template-rows: 1fr auto; min-height: 0; overflow: auto; }
.bkgtwee img { width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 4px; }
.bkgtwee img.zoom { width: 220%; height: auto; cursor: zoom-out; }
.bkgtwee figcaption { color: var(--gedempt); font-size: 12px; padding-top: 4px; }

/* plan 8 M2: telefoon-aanlevering in Binnengekomen */
.bntelblok { border: 1px solid rgba(239,68,68,.35); background: rgba(239,68,68,.05); border-radius: 8px; padding: 6px 9px; margin-top: 4px; font-size: 12.5px; }
.bntelkop { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.bntellijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bntel { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bntelnr { min-width: 19px; height: 19px; border-radius: 99px; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; box-sizing: border-box; background: #ef4444; }
.bntel.foto .bntelnr { background: #f59e0b; } .bntel.memo .bntelnr { background: #a855f7; }
.bntelt { flex: 1; min-width: 0; } .bntelt small { opacity: .7; }
.bntelaudio { height: 28px; max-width: 220px; }