:root{
  --inkt:#101a24;--inkt-2:#1b2b3a;--grijs:#5d6b7a;
  --lijn:#dde3e9;--lijn-fijn:#eef1f4;
  --papier:#ffffff;--vlak:#f5f7f9;--vlak-2:#fafbfc;
  --signaal:#0d7d76;--signaal-d:#0a625d;--signaal-l:#e2f2f1;
  --goed:#1c7a4b;--goed-l:#e4f4ea;
  --let-op:#a8690a;--let-op-l:#fdf1dd;
  --slecht:#b02a24;--slecht-l:#fbe8e6;
  --data-1:#0d7d76;--data-2:#1b2b3a;--data-3:#a8690a;--data-4:#6a4c93;
  --chroom-boven:#101a24;--chroom-onder:#1b2b3a;
  --overlay:#101a24;--overlay-tekst:#ffffff;--knop-tekst:#ffffff;
  --rand-goed:#c4e6d1;--rand-let:#f2ddb6;--rand-slecht:#f0c6c2;
  --spoor:#dfe7ec;--stip-stil:#b8c2cc;--veld-plaatshouder:#9aa7b4;--veld-hover:#c0ccd8;
  --lift:0 1px 1px rgba(16,26,36,.04),0 8px 24px -12px rgba(16,26,36,.18);
  --lift-hoog:0 2px 4px rgba(16,26,36,.06),0 16px 40px -16px rgba(16,26,36,.28);
}

/* ============================================================
   Donker thema — beschikbaar als voorkeur, niet als standaard.
   Voor wie de hele dag naar alerts kijkt. Minder verzadigd dan
   een klassiek marineblauw, want dit scherm staat vol cijfers.
   ============================================================ */
html[data-thema="donker"]{
  --inkt:#e6ecf2;--inkt-2:#0f1720;--grijs:#93a4b5;
  --lijn:#2b3a49;--lijn-fijn:#222e3a;
  --papier:#18222c;--vlak:#131b23;--vlak-2:#1d2833;
  --signaal:#2bbd95;--signaal-d:#22a07f;--signaal-l:#123028;
  --goed:#45c98f;--goed-l:#122c21;--let-op:#e0a534;--let-op-l:#332711;
  --slecht:#f0837a;--slecht-l:#361b19;
  --data-1:#2bbd95;--data-2:#6aa9dd;--data-3:#e0a534;--data-4:#a68ae0;
  --chroom-boven:#0f1720;--chroom-onder:#1b2835;
  --overlay:#243240;--overlay-tekst:#eef3f8;--knop-tekst:#06231b;
  --rand-goed:#1e553c;--rand-let:#55421a;--rand-slecht:#5d3330;
  --spoor:#222e3a;--stip-stil:#5c7084;--veld-plaatshouder:#7b8da0;--veld-hover:#3a4f64;
  --lift:0 1px 1px rgba(0,0,0,.2),0 8px 24px -12px rgba(0,0,0,.5);
  --lift-hoog:0 2px 4px rgba(0,0,0,.25),0 16px 40px -16px rgba(0,0,0,.6);
}


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--vlak);color:var(--inkt);
  font:15px/1.55 ui-sans-serif,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"tnum" 1,"cv05" 1;   /* cijfers lijnen uit */
  -webkit-font-smoothing:antialiased;
}
a{color:var(--signaal-d);text-decoration-color:color-mix(in srgb,var(--signaal-d) 30%,transparent);text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}
h1{font-size:1.55rem;line-height:1.2;letter-spacing:-.018em;margin:.1rem 0 1.1rem;font-weight:650}
h2{font-size:1.05rem;line-height:1.3;letter-spacing:-.01em;margin:1.6rem 0 .7rem;font-weight:650}
code{font:.88em ui-monospace,"SF Mono",Menlo,Consolas,monospace;background:var(--lijn-fijn);padding:.1rem .35rem;border-radius:var(--r-xs)}

/* ---------- Header ---------- */
header{
  background:linear-gradient(180deg,var(--chroom-boven) 0%,var(--chroom-onder) 100%);color:#fff;
  padding:0 1.1rem;display:flex;gap:.9rem;align-items:center;min-height:56px;flex-wrap:wrap;
  position:sticky;top:0;z-index:40;box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 30px -20px rgba(0,0,0,.9);
}
header .merk{color:#fff;text-decoration:none;font-weight:680;font-size:1.08rem;letter-spacing:-.02em;display:flex;align-items:center;gap:.55rem}
header .merk svg{width:24px;height:24px;flex:none}
header .menu{display:flex;gap:.15rem;align-items:center}
.dropdown{position:relative}
.dropdown summary{list-style:none;cursor:pointer;padding:.5rem .7rem;color:#c3d0dc;border-radius:var(--r-s);display:flex;align-items:center;gap:.35rem;font-size:.94rem;transition:background .12s,color .12s}
.dropdown summary::-webkit-details-marker{display:none}
.dropdown summary::after{content:"";width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-2px);opacity:.6}
.dropdown[open] summary,.dropdown summary:hover{background:rgba(255,255,255,.09);color:#fff}
.dropdown div{position:absolute;top:calc(100% + 8px);left:0;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--lift-hoog);padding:.35rem;min-width:215px;z-index:50}
.dropdown div a{display:block;padding:.5rem .7rem;border-radius:var(--r-s);text-decoration:none;color:var(--inkt);white-space:nowrap;font-size:.94rem}
.dropdown div a:hover{background:var(--signaal-l);color:var(--signaal-d)}
header .zoekbalk{margin-left:auto;display:flex;align-items:center;gap:.7rem;flex:1;max-width:500px;min-width:210px}
header .zoekbalk input{
  width:100%;border-radius:999px;padding:.48rem 1rem .48rem 2.3rem;min-height:38px;font-size:.94rem;color:#fff;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%2394a6b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5'/%3E%3Cpath d='m10.5 10.5 3.5 3.5'/%3E%3C/svg%3E") no-repeat .8rem center;
}
header .zoekbalk input::placeholder{color:#8fa1b3}
header .zoekbalk input:focus{outline:none;background-color:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
header .zoekbalk a{color:#8fa1b3;font-size:.84rem;white-space:nowrap;text-decoration:none}
header .zoekbalk a:hover{color:#fff}
header .account{color:#c3d0dc;text-decoration:none;font-size:.88rem;white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
header .account:hover{color:#fff}
header .afmelden button{background:transparent;color:#c3d0dc;border:1px solid rgba(255,255,255,.18);font-weight:500}
header .afmelden button:hover{background:rgba(255,255,255,.1);color:#fff}

main{padding:1.3rem 1.1rem 3rem;max-width:1340px;margin:0 auto}

/* ---------- Bouwstenen ---------- */
.kaart{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);padding:1.05rem 1.15rem;margin-bottom:1rem}
.kaart>h2:first-child{margin-top:0}
.rooster{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.85rem}
/* ---------- Formulieren ----------
   Eén laag voor de hele site. De selector werkt op :where() zodat hij
   geen specificiteit heeft: header-zoekbalk, .hero en .paginering
   blijven hun eigen vorm houden. Belangrijk: hij matcht ook een input
   ZONDER type-attribuut, zodat een vergeten type="text" nooit meer
   een kaal browserveld oplevert. */
label{display:block;font-size:.8rem;color:var(--grijs);margin-bottom:.28rem;font-weight:500}
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=hidden])),
select,textarea{
  width:100%;padding:0 .75rem;border:1px solid var(--lijn);border-radius:var(--r-s);
  font:inherit;font-size:.94rem;font-weight:400;line-height:1.4;
  min-height:var(--h-veld);background:var(--papier);color:var(--inkt);
  transition:border-color .12s,box-shadow .12s,background-color .12s;
}
textarea{padding:.55rem .75rem;min-height:calc(var(--h-veld) * 2)}
input::placeholder,textarea::placeholder{color:var(--veld-plaatshouder)}
input:hover,select:hover,textarea:hover{border-color:var(--veld-hover)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--signaal);box-shadow:0 0 0 3px var(--signaal-l)}
input:disabled,select:disabled,textarea:disabled{background:var(--vlak);color:var(--grijs);cursor:not-allowed}
/* Eigen pijl: de OS-pijl wisselt per platform en breekt de rij */
select{
  appearance:none;-webkit-appearance:none;padding-right:2.2rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%235d6b7a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4.5 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;
}
/* Label + veld als één blok */
.veld{display:block;margin-bottom:.8rem}
.veld>span:first-child{display:block;font-size:.8rem;color:var(--grijs);font-weight:500;margin-bottom:.3rem}
.veld>span:first-child .muted{font-weight:400}
.veld:last-child{margin-bottom:0}
.veld-hulp{display:block;font-size:.78rem;color:var(--grijs);margin:.32rem 0 0;font-weight:400}
.veld-fout{display:block;font-size:.78rem;color:var(--slecht);margin:.32rem 0 0;font-weight:500}
.veld.mis input,.veld.mis select,.veld.mis textarea{border-color:var(--slecht)}
.veld.mis input:focus,.veld.mis select:focus{box-shadow:0 0 0 3px var(--slecht-l)}
/* Rij velden die onderaan uitlijnen met de knop */
.veldrij{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:.2rem}
.veldrij>.veld{flex:1 1 210px;margin-bottom:0;min-width:0}
.veldrij>.zoekveld{flex:1 1 260px;min-width:0}
.veldrij>button,.veldrij>.knop{flex:none}
/* Tekstveld met vergrootglas: wikkel enkel de input, niet het label */
.zoekveld{position:relative;display:block}
.zoekveld>input{padding-left:2.5rem}
.zoekveld::before{
  content:"";position:absolute;left:.85rem;top:50%;margin-top:-8px;width:16px;height:16px;pointer-events:none;opacity:.6;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235d6b7a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat center;
}
.vink{display:flex;align-items:center;gap:.5rem;min-height:var(--h-veld);font-size:.92rem}
/* Leeswijzer bovenaan de fiche */
.samenvatting{border-left:4px solid var(--lijn);font-size:.98rem;line-height:1.5}
.samenvatting-groen{border-left-color:var(--goed)}.samenvatting-oranje{border-left-color:var(--let-op)}.samenvatting-rood{border-left-color:var(--slecht)}
.samenvatting-mager{margin:0 0 .4rem;color:var(--grijs);font-size:.9rem}
td.slecht{color:var(--slecht);font-weight:600}td.let-op{color:var(--let-op);font-weight:600}

/* Bronnenlijst: één regel per bron, details achter een tik */
.bronlijst{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.bronrij + .bronrij{border-top:1px solid var(--lijn)}
.bronrij > summary{display:flex;align-items:baseline;gap:.55rem;padding:.75rem .9rem;cursor:pointer;list-style:none}
.bronrij > summary::-webkit-details-marker{display:none}
.bronrij > summary:hover{background:var(--vlak)}
.bronrij[open] > summary{background:var(--vlak);font-weight:600}
.stip{flex:none;width:9px;height:9px;border-radius:50%;align-self:center}
.stip-groen{background:var(--goed)}.stip-oranje{background:var(--let-op)}.stip-rood{background:var(--slecht)}.stip-grijs{background:var(--stip-stil)}
.bronnaam{flex:0 1 auto;min-width:0}
.bronstatus{flex:1 1 auto;font-size:.84rem;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brondetail{padding:0 .9rem 1rem;border-top:1px dashed var(--lijn);margin-top:-1px}
.brondetail code{font-size:.82rem}
@media (max-width:680px){
  .bronrij > summary{flex-wrap:wrap;padding:.7rem .8rem}
  .bronnaam{flex:1 1 auto;font-weight:600}
  .bronstatus{flex:1 1 100%;text-align:left;white-space:normal;padding-left:1.05rem}
}
.vink input{width:17px;height:17px;accent-color:var(--signaal);flex:none}
button,.knop{
  background:var(--signaal);color:var(--knop-tekst);border:1px solid transparent;border-radius:var(--r-s);padding:.55rem 1rem;font:inherit;font-size:.94rem;font-weight:600;
  min-height:var(--h-veld);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  transition:background .12s,transform .06s,box-shadow .12s;
}
button:hover,.knop:hover{background:var(--signaal-d)}
button:active,.knop:active{transform:translateY(1px)}
button:focus-visible,.knop:focus-visible,a:focus-visible{outline:2px solid var(--signaal);outline-offset:2px}
button.licht,.knop.licht{background:var(--papier);color:var(--signaal-d);border-color:var(--lijn)}
button.licht:hover,.knop.licht:hover{background:var(--signaal-l);border-color:color-mix(in srgb,var(--signaal) 30%,var(--lijn))}
button.gevaar{background:var(--slecht);color:var(--knop-tekst)}button.gevaar:hover{filter:brightness(.9)}
button.klein,.knop.klein{padding:.28rem .6rem;min-height:30px;font-size:.84rem;font-weight:500}
.melding{padding:.7rem 1rem;border-radius:var(--r-s);margin-bottom:1rem;border:1px solid transparent;font-size:.94rem;display:flex;gap:.5rem;align-items:flex-start}
.melding::before{content:"";width:4px;align-self:stretch;border-radius:2px;background:currentColor;opacity:.5;flex:none}
.melding.ok{background:var(--goed-l);color:var(--goed);border-color:var(--rand-goed)}
.melding.fout{background:var(--slecht-l);color:var(--slecht);border-color:var(--rand-slecht)}

/* Tabellen: raster, geen doos */
.tabelwrap{overflow-x:auto;border:1px solid var(--lijn);border-radius:var(--r);background:var(--papier);margin-bottom:1rem;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--papier)}
th,td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--lijn-fijn);vertical-align:top}
th{background:var(--vlak-2);color:var(--grijs);font-weight:600;font-size:.78rem;letter-spacing:.01em;position:sticky;top:0;border-bottom:1px solid var(--lijn);z-index:1}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--vlak-2)}
td:has(+ td[style*="right"]),td[style*="right"]{font-variant-numeric:tabular-nums}
.muted{color:var(--grijs);font-size:.85rem}
.leeg{padding:2.4rem 1.2rem;text-align:center;color:var(--grijs)}
.balk{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;margin:.85rem 0}

/* Pillen met betekenisstip */
.tag{display:inline-flex;align-items:center;gap:.35rem;padding:.14rem .55rem .14rem .45rem;border-radius:999px;font-size:.75rem;font-weight:600;background:var(--signaal-l);color:var(--signaal-d);vertical-align:middle;line-height:1.5}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75;flex:none}
.tag.grijs{background:var(--lijn-fijn);color:var(--grijs)}
.tag.ok{background:var(--goed-l);color:var(--goed)}
.tag.fout{background:var(--slecht-l);color:var(--slecht)}
.tag.amber{background:var(--let-op-l);color:var(--let-op)}

.login{max-width:400px;margin:5vh auto}
.ster{background:none;border:0;font-size:1.5rem;cursor:pointer;color:#c3ccd6;padding:0 .25rem;min-height:0;line-height:1;vertical-align:-2px}
.ster:hover{background:none;color:#d9a520}
.ster.aan{color:#e8a90c}

/* ---------- Start ---------- */
.hero{position:relative;padding:3rem 0 2rem;text-align:center;overflow:hidden}
.hero .ringen{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(860px,150vw);height:auto;pointer-events:none}
.hero form{position:relative;display:flex;gap:.5rem;max-width:660px;margin:0 auto;background:var(--papier);padding:.35rem;border-radius:999px;border:1px solid var(--lijn);box-shadow:var(--lift)}
.hero form:focus-within{border-color:var(--signaal);box-shadow:0 0 0 4px var(--signaal-l),var(--lift)}
.hero input{border:0;border-radius:999px;padding:.65rem 1.15rem;font-size:1.02rem;min-height:44px;background:transparent}
.hero input:focus{outline:none;box-shadow:none}
.hero button{border-radius:999px;padding:.55rem 1.35rem}
.hero p{position:relative;margin:.9rem 0 0}
.home-kop{font-size:.82rem;font-weight:650;color:var(--grijs);margin:1.9rem 0 .7rem;display:flex;align-items:center;gap:.6rem}
.home-kop::after{content:"";flex:1;height:1px;background:var(--lijn)}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.tool{display:flex;gap:.8rem;align-items:flex-start;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);padding:.95rem 1rem;text-decoration:none;color:var(--inkt);transition:border-color .14s,transform .14s,box-shadow .14s}
.tool:hover{border-color:color-mix(in srgb,var(--signaal) 45%,var(--lijn));transform:translateY(-2px);box-shadow:var(--lift)}
.tool strong{display:block;margin-bottom:.1rem;font-weight:620}
.tool-icoon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.tool-icoon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tool-icoon.teal{background:var(--signaal-l);color:var(--signaal-d)}
.tool-icoon.navy{background:var(--vlak-2);color:var(--signaal)}
.tool-icoon.amber{background:var(--let-op-l);color:var(--let-op)}
.tool-icoon.ok{background:var(--goed-l);color:var(--goed)}
.lijsten{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.lijst{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);padding:.25rem .55rem}
.bedrijf-rij{display:flex;gap:.8rem;align-items:center;padding:.62rem .45rem;border-bottom:1px solid var(--lijn-fijn)}
.bedrijf-rij:last-child{border-bottom:0}
.bedrijf-rij a{text-decoration:none;color:var(--inkt)}
.bedrijf-rij a:hover{color:var(--signaal-d)}
.avatar{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:680;font-size:.8rem;color:#fff;flex:none;letter-spacing:.01em}
.rechts{margin-left:auto;text-align:right}

/* ---------- Fiche: kopband met kerncijfers ---------- */
.fiche-kop{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);padding:1.1rem 1.2rem;margin-bottom:1rem}
.fiche-kop h1{margin:0 0 .45rem}
.kerncijfers{display:flex;flex-wrap:wrap;gap:0;margin-top:.9rem;border-top:1px solid var(--lijn-fijn);padding-top:.85rem}
.kerncijfer{flex:1 1 130px;padding:0 1rem;border-left:1px solid var(--lijn-fijn)}
.kerncijfer:first-child{padding-left:0;border-left:0}
.kerncijfer .lab{font-size:.74rem;color:var(--grijs);font-weight:500}
.kerncijfer .waarde{font-size:1.22rem;font-weight:660;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.25}
.kerncijfer .delta{font-size:.76rem;font-variant-numeric:tabular-nums}
.delta.op{color:var(--goed)}.delta.neer{color:var(--slecht)}

/* Jaarrekening-tabellen */
.jr{width:100%;border-collapse:collapse;font-size:.86rem;background:var(--papier);margin-bottom:1.1rem;font-variant-numeric:tabular-nums}
.jr th,.jr td{padding:.3rem .55rem;border-bottom:1px solid var(--lijn-fijn);vertical-align:top}
.jr .jr-kop th{background:var(--vlak-2);color:var(--inkt);font-weight:660;font-size:.9rem;border-top:0;border-bottom:2px solid var(--signaal);text-align:left;position:static;letter-spacing:-.01em}
.jr .jr-kop th:not(:first-child){text-align:right}
.jr .jr-n0 td{font-weight:660;background:var(--vlak-2)}
.jr .jr-code{color:#93a0ac;font-size:.75rem;text-align:right;white-space:nowrap;width:4.5rem;font-variant-numeric:tabular-nums}
.jr .jr-teken{color:#93a0ac;font-size:.73rem;white-space:nowrap;width:2.4rem}
.jr td:first-child{width:46%}
.jr tbody tr:hover{background:var(--vlak-2)}

.paginering{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
.paginering .knop{min-height:34px;padding:.3rem .75rem}
.paginering select{width:auto;min-height:34px;padding:0 1.9rem 0 .6rem;font-size:.88rem;background-position:right .55rem center}
.opvolg-notitie{width:100%;border:1px solid var(--lijn);border-radius:var(--r-s);padding:.32rem .5rem;font-size:.85rem;min-height:34px}
.balk>.zoekveld{flex:1 1 260px;min-width:0}

/* ---------- Responsive ---------- */
@media (max-width:1000px){.tools{grid-template-columns:1fr 1fr}.lijsten{grid-template-columns:1fr}}
@media (max-width:680px){:root{--h-veld:46px}}
@media (max-width:680px){
  header{padding:.5rem .7rem;gap:.45rem;min-height:0}
  header .merk{font-size:1rem}header .merk svg{width:21px;height:21px}
  /* Geen overflow op .menu: dat knipt het uitklapmenu weg. Panelen zweven vast over de pagina. */
  header .menu{order:6;flex-basis:100%;gap:.3rem;flex-wrap:wrap}
  header .menu .dropdown{flex:1 1 auto;position:static}
  header .menu summary{background:rgba(255,255,255,.08);justify-content:center;white-space:nowrap}
  header .dropdown div{position:fixed;left:.7rem;right:.7rem;top:auto;min-width:0;max-height:60vh;overflow-y:auto}
  header .dropdown div a{padding:.7rem .9rem;font-size:1rem}
  header .zoekbalk{order:5;flex-basis:100%;max-width:none;margin:.15rem 0}
  header .zoekbalk a{display:none}
  header .account{font-size:.8rem;max-width:110px}
  header .afmelden button{min-height:34px;padding:.3rem .6rem}
  main{padding:.85rem .7rem 2.5rem}
  h1{font-size:1.25rem}h2{font-size:.98rem;margin:1.2rem 0 .6rem}
  .hero{padding:1.4rem 0 .8rem}
  .hero .ringen{display:none}
  .hero form{flex-direction:column;border-radius:var(--r);padding:.5rem;gap:.45rem}
  .hero input{font-size:16px;text-align:left}
  .hero button{border-radius:var(--r-s);width:100%}
  input,select,textarea{font-size:16px}
  .veldrij{gap:.55rem}
  .veldrij>.veld,.veldrij>.zoekveld{flex:1 1 100%}
  .veldrij>button,.veldrij>.knop{flex:1 1 100%}
  .tools{grid-template-columns:1fr}
  .kaart{padding:.85rem}
  .rooster{grid-template-columns:1fr!important;gap:.65rem}
  .balk>button,.balk>.knop{flex:1 1 100%}
  .balk form{flex:1 1 100%}.balk form button{width:100%}
  .kerncijfers{gap:.5rem 0}
  .kerncijfer{flex:1 1 42%;border-left:0;padding:.35rem 0}
  .kerncijfer .waarde{font-size:1.05rem}
  table{font-size:.84rem}th,td{padding:.42rem .45rem}
  .tabelwrap{border-radius:var(--r-s)}
  .tabelwrap::after{content:"→ veeg voor meer kolommen";display:block;font-size:.72rem;color:var(--grijs);padding:.25rem .55rem;background:var(--vlak-2);border-top:1px solid var(--lijn-fijn)}
  .jr td:first-child{width:auto;min-width:145px}
  .avatar{width:34px;height:34px;font-size:.74rem}
  .paginering{width:100%;justify-content:space-between}
}
@media (max-width:420px){header .account{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Risicosignalen */
.signalen{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem;padding-top:.8rem;border-top:1px solid var(--lijn-fijn)}
.sig{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:550;padding:.24rem .6rem .24rem .5rem;border-radius:var(--r-s);border:1px solid transparent}
.sig::before{content:"";width:7px;height:7px;border-radius:2px;background:currentColor;flex:none}
.sig-rood{background:var(--slecht-l);color:var(--slecht);border-color:var(--rand-slecht)}
.sig-oranje{background:var(--let-op-l);color:var(--let-op);border-color:var(--rand-let)}
.sig-groen{background:var(--goed-l);color:var(--goed);border-color:var(--rand-goed)}
.sig-punt{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:-1px;margin-right:.3rem}
.sig-punt.rood{background:var(--slecht)}.sig-punt.oranje{background:var(--let-op)}.sig-punt.groen{background:var(--goed)}

/* Lopende tekst (juridische pagina's) */
.tekst{max-width:68ch;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);padding:1.6rem 1.8rem}
.tekst h2{font-size:1rem;margin:1.6rem 0 .5rem}
.tekst p,.tekst li{font-size:.95rem;line-height:1.65}
.tekst ul{padding-left:1.15rem}
.tekst li{margin-bottom:.35rem}
footer{max-width:1340px;margin:0 auto;padding:1.5rem 1.1rem 2.5rem;color:var(--grijs);font-size:.82rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center;border-top:1px solid var(--lijn);margin-top:2rem}
footer a{color:var(--grijs)}
@media (max-width:680px){.tekst{padding:1rem}}

/* Sectorvergelijking */
.bm td{vertical-align:middle}
.bm-balk{position:relative;height:10px;border-radius:5px;background:var(--lijn-fijn);margin:.25rem 0 .3rem}
.bm-band{position:absolute;top:0;height:10px;background:var(--spoor);border-radius:5px}
.bm-mediaan{position:absolute;top:-2px;width:2px;height:14px;background:var(--grijs)}
.bm-punt{position:absolute;top:-3px;width:14px;height:16px;margin-left:-7px;border-radius:4px;border:2px solid var(--papier);box-shadow:0 1px 3px rgba(16,26,36,.3)}
.bm-hoog{background:var(--goed)}.bm-boven{background:#5aa06f}.bm-onder{background:var(--let-op)}.bm-laag{background:var(--slecht)}

/* Gezondheidsscore */
.score-blok{display:flex;gap:1.1rem;align-items:flex-start;margin-top:.9rem;padding-top:.85rem;border-top:1px solid var(--lijn-fijn)}
.score-cijfer{flex:none;width:74px;height:74px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;color:#fff}
.score-cijfer.score-rood{background:var(--slecht)}.score-cijfer.score-oranje{background:var(--let-op)}.score-cijfer.score-groen{background:var(--goed)}
.score-uitleg{flex:1;min-width:0}
.score-delen{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.15rem .9rem;margin-top:.5rem}
/* Label links, waarde rechts uitgelijnd — en het label mag afbreken zonder de waarde mee te
   slepen. Met een vaste labelbreedte viel "Brutobedrijfsrentabiliteit" over twee regels terwijl
   het getal op de eerste bleef staan. */
.score-deel{display:grid;grid-template-columns:1fr auto;gap:.2rem .6rem;align-items:baseline;font-size:.82rem}
.score-deel .lab{color:var(--grijs);min-width:0}
.score-deel .waarde{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.score-lijn{position:relative;flex:1;height:6px;background:var(--lijn-fijn);border-radius:3px;min-width:60px}
.score-vul{position:absolute;top:0;height:6px;background:var(--goed);border-radius:3px}
.score-vul.neg{background:var(--slecht)}
.score-nul{position:absolute;left:50%;top:-2px;width:1px;height:10px;background:#c3ccd6}
@media (max-width:680px){.score-blok{gap:.7rem}.score-cijfer{width:58px;height:58px;font-size:1.2rem}
  .score-delen{grid-template-columns:1fr}}

/* Tijdlijn */
.tijdlijn{padding:.9rem 1.1rem}
.tl-rij{display:flex;gap:.85rem;align-items:flex-start}
.tl-datum{width:5.5rem;flex:none;color:var(--grijs);font-size:.82rem;font-variant-numeric:tabular-nums;padding-top:.1rem}
.tl-lijn{width:14px;flex:none;position:relative;align-self:stretch;display:flex;justify-content:center}
.tl-lijn::before{content:"";position:absolute;top:0;bottom:-.2rem;width:2px;background:var(--lijn)}
.tl-rij:last-child .tl-lijn::before{bottom:auto;height:10px}
.tl-punt{position:relative;width:10px;height:10px;border-radius:50%;margin-top:5px;border:2px solid var(--papier);z-index:1}
.tl-teal{background:var(--signaal)}.tl-navy{background:var(--inkt-2)}.tl-rood{background:var(--slecht)}.tl-amber{background:var(--let-op)}
.tl-inhoud{flex:1;font-size:.9rem;padding-bottom:.75rem;min-width:0}
@media (max-width:680px){.tl-datum{width:4.6rem;font-size:.76rem}}
/* Kaart */
.kaartblok{margin-bottom:1rem}

/* Vergelijkingsmandje */
.mandje-balk{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:60;display:flex;gap:.6rem;align-items:center;
  background:var(--overlay);color:var(--overlay-tekst);border-radius:999px;padding:.45rem .5rem .45rem 1.1rem;box-shadow:var(--lift-hoog);font-size:.9rem}
.mandje-balk form{margin:0}
.mandje-balk .knop.klein{border-radius:999px}
.mandje-balk button.licht{background:transparent;color:#c3d0dc;border:1px solid rgba(255,255,255,.25);border-radius:999px}
.mandje-balk button.licht:hover{background:rgba(255,255,255,.12);color:#fff}
th a.sorteer{color:inherit;text-decoration:none;display:inline-flex;gap:.25rem;align-items:center;white-space:nowrap}
th a.sorteer:hover{color:var(--signaal-d)}
th a.sorteer .pijl{opacity:.35;font-size:.7em}
th a.sorteer.actief{color:var(--signaal-d)}th a.sorteer.actief .pijl{opacity:1}
@media (max-width:680px){.mandje-balk{left:.7rem;right:.7rem;transform:none;justify-content:space-between;padding-left:.9rem}}

textarea{width:100%;font:inherit;font-size:.94rem;padding:.5rem .7rem;border:1px solid var(--lijn);border-radius:var(--r-s);resize:vertical}
input[type=file]{width:100%;padding:.45rem;border:1px dashed var(--lijn);border-radius:var(--r-s);background:var(--vlak-2);font-size:.88rem}
details.kaart summary{list-style:none}details.kaart summary::-webkit-details-marker{display:none}
details.kaart summary::before{content:"+ ";color:var(--signaal)}
details.kaart[open] summary::before{content:"– "}
.home-kop a{margin-left:auto}

/* Bedrijfsstructuur */
.st-blok{margin:.3rem 0}
.st-titel{font-size:.78rem;font-weight:650;color:var(--grijs);margin-bottom:.35rem}
.st-knoop{border:1px solid var(--lijn);border-radius:var(--r-s);padding:.5rem .7rem;margin:.3rem 0;background:var(--papier)}
.st-knoop.st-zelf{border-color:var(--signaal);background:var(--signaal-l);border-width:2px}
.st-naam{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;font-size:.94rem}
.st-naam a{text-decoration:none}
.st-niveau2{margin-left:1.6rem;position:relative}
.st-niveau2::before{content:"";position:absolute;left:-.9rem;top:0;bottom:50%;width:1px;background:var(--lijn)}
.st-niveau2::after{content:"";position:absolute;left:-.9rem;top:50%;width:.75rem;height:1px;background:var(--lijn)}
.st-pijl{color:var(--grijs);text-align:center;font-size:1.1rem;line-height:1;margin:.1rem 0}
@media (max-width:680px){.st-niveau2{margin-left:1rem}}

/* Kerncijfers in "Wat is er nieuw" */
.nw-cijfers{display:flex;flex-wrap:wrap;gap:.15rem 1.1rem;margin-top:.35rem;padding-top:.35rem;border-top:1px dotted var(--lijn);
  font-size:.84rem;font-variant-numeric:tabular-nums}
.nw-cijfers .lab{color:var(--grijs);font-size:.76rem;margin-right:.3rem}
@media (max-width:680px){.nw-cijfers{gap:.1rem .7rem;font-size:.8rem}}

/* Uitleg bij kengetallen */
.info{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:.35rem;border-radius:50%;
  background:var(--lijn-fijn);color:var(--grijs);font-size:9px;font-weight:700;font-style:normal;cursor:help;position:relative;vertical-align:1px}
.info:hover,.info:focus{background:var(--signaal-l);color:var(--signaal-d);outline:none}
.info-tekst{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:min(340px,80vw);
  background:var(--overlay);color:var(--overlay-tekst);padding:.7rem .85rem;border-radius:var(--r-s);font-size:.82rem;font-weight:400;line-height:1.5;
  box-shadow:var(--lift-hoog);z-index:70;text-align:left;white-space:normal}
.info-tekst strong{display:block;margin-bottom:.25rem;font-weight:600}
.info-tekst em{display:block;margin-top:.35rem;color:#a9bccb;font-style:normal}
.info-tekst::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--inkt)}
.info:hover .info-tekst,.info:focus .info-tekst{display:block}
@media (max-width:680px){.info-tekst{left:auto;right:-1rem;transform:none;width:min(300px,88vw)}.info-tekst::after{left:auto;right:1.4rem}}
/* Wettelijke waarschuwingen */
.wet-blok{margin-top:.9rem;padding-top:.85rem;border-top:1px solid var(--lijn-fijn)}
.wet-titel{font-size:.78rem;font-weight:650;color:var(--slecht);margin-bottom:.4rem;letter-spacing:.01em}
.wet-regel{display:flex;gap:.6rem;align-items:flex-start;background:var(--slecht-l);border:1px solid var(--rand-slecht);border-radius:var(--r-s);
  padding:.55rem .7rem;margin-bottom:.35rem;font-size:.88rem}
.wet-icoon{flex:none;width:18px;height:18px;border-radius:50%;background:var(--slecht);color:var(--papier);font-weight:700;font-size:12px;
  display:flex;align-items:center;justify-content:center;margin-top:.1rem}
.wet-jaar{display:inline-block;background:var(--papier);border:1px solid var(--rand-slecht);border-radius:4px;padding:0 .3rem;margin-left:.25rem;
  font-size:.74rem;color:var(--slecht);font-variant-numeric:tabular-nums}
@media print{.info{display:none}}

button.ster{background:none;border:0;padding:0;font-size:1.15rem;line-height:1;color:#c3ccd6;cursor:pointer}
button.ster.aan{color:#f2b705}
button.ster:hover{color:#f2b705}

/* ============================================================
   Verfijning — het eigenlijke ontwerpwerk, niet enkel kleur.
   Drie dingen bepalen of software duur aanvoelt: de typografie,
   het verticale ritme en de rust in de tabellen. Kleur komt
   daarna, en draagt hier enkel betekenis.
   ============================================================ */
:root{
  --maat-1:.78rem;--maat-2:.86rem;--maat-3:.95rem;--maat-4:1.06rem;
  --maat-5:1.3rem;--maat-6:1.75rem;--maat-7:2.3rem;
  --ruimte-1:.35rem;--ruimte-2:.7rem;--ruimte-3:1.1rem;--ruimte-4:1.6rem;--ruimte-5:2.4rem;
  --leesbreedte:68ch;
}
body{font-size:var(--maat-3);line-height:1.55;-webkit-font-smoothing:antialiased;
     font-feature-settings:"kern" 1,"liga" 1}
h1{font-size:clamp(1.5rem,3.2vw,var(--maat-7));line-height:1.15;letter-spacing:-.022em;
   margin:0 0 var(--ruimte-2);font-weight:700}
h2{font-size:var(--maat-5);line-height:1.25;letter-spacing:-.015em;margin:var(--ruimte-5) 0 var(--ruimte-2);font-weight:650}
h3{font-size:var(--maat-4);letter-spacing:-.01em;margin:var(--ruimte-3) 0 var(--ruimte-1);font-weight:650}
p{margin:0 0 var(--ruimte-2)}
.tekst p,.tekst li{max-width:var(--leesbreedte);line-height:1.62}
.muted{color:var(--grijs)}

/* Cijfers horen onder elkaar te staan, overal. */
table,.kerncijfer strong,.kpi dd,.delta,td,th{font-variant-numeric:tabular-nums lining-nums}

/* Kaarten: minder rand, meer lucht. Een kader dat je ziet, is een kader te veel. */
.kaart{border:1px solid var(--lijn);border-radius:var(--r);background:var(--papier);
       padding:var(--ruimte-3) var(--ruimte-4);box-shadow:none}
.kaart + .kaart{margin-top:var(--ruimte-3)}
.kaart > h2:first-child,.kaart > h3:first-child{margin-top:0}

/* Tabellen: hogere regels, één hairline, geen zebra. Rust leest sneller dan contrast. */
table{border-collapse:separate;border-spacing:0}
th{font-size:var(--maat-1);font-weight:600;letter-spacing:.02em;text-transform:none;
   color:var(--grijs);padding:.55rem .7rem;border-bottom:1px solid var(--lijn);white-space:nowrap}
td{padding:.62rem .7rem;border-bottom:1px solid var(--lijn-fijn);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--vlak-2)}

/* Kerncijfers: het getal is de held, het label fluistert. */
.kerncijfer{padding:var(--ruimte-2) 0}
.kerncijfer .muted{font-size:var(--maat-1);letter-spacing:.01em;margin-bottom:.15rem}
.kerncijfer strong{font-size:var(--maat-6);font-weight:650;letter-spacing:-.02em;line-height:1.1;display:block}
.kerncijfer .delta{font-size:var(--maat-1);color:var(--grijs)}

/* Tags: kleiner en rustiger; ze staan met tientallen naast elkaar. */
.tag{font-size:var(--maat-1);padding:.12rem .5rem;border-radius:999px;font-weight:500;
     border:1px solid transparent;line-height:1.45}

/* Knoppen: iets meer gewicht, iets minder ronding. */
button,.knop{font-weight:550;letter-spacing:-.005em;border-radius:var(--r-s)}
.knop.klein,button.klein{font-size:var(--maat-2);min-height:34px;padding:0 .8rem}

/* De balk bovenaan: lager en strakker, want ze staat op elk scherm. */
header{padding-block:.55rem}
header .merk{letter-spacing:-.015em}

/* Het samenvattingsblok bovenaan de fiche draagt het oordeel: geef het lucht. */
.samenvatting{padding:var(--ruimte-3) var(--ruimte-4);font-size:var(--maat-4);line-height:1.6}
.samenvatting p{max-width:72ch;margin:0}

@media (max-width:680px){
  :root{--ruimte-4:1.1rem;--ruimte-5:1.8rem}
  .kaart{padding:var(--ruimte-3)}
  th,td{padding:.5rem .5rem}
}

/* Groepskoppen in een uitklapmenu: nodig zodra een menu meer dan zes regels telt. */
.dropdown .groep{display:block;padding:.6rem .9rem .2rem;font-size:.72rem;letter-spacing:.06em;
                 text-transform:uppercase;color:var(--grijs);font-weight:600}
.dropdown .groep:first-child{padding-top:.3rem}

/* Systeemoverzicht: kaarten die naar een scherm leiden, met hun toestand erop. */
.systeemkaart{display:flex;flex-direction:column;gap:.3rem;text-decoration:none;color:inherit;
              transition:border-color .12s,background .12s}
.systeemkaart:hover{border-color:var(--signaal);background:var(--vlak-2)}
.systeemkaart strong{font-size:1rem}
.systeemkaart .muted{font-size:.88rem;line-height:1.45}
.systeemkaart .tag{align-self:flex-start;margin-top:.2rem}

/* Keuze tussen de kantoorlijst en de eigen lijst. */
.lijstkeuze{display:flex;gap:.2rem;border-bottom:1px solid var(--lijn);margin-bottom:1rem;flex-wrap:wrap}
.lijstkeuze a{padding:.55rem .9rem;text-decoration:none;color:var(--grijs);font-weight:550;
              border-bottom:2px solid transparent;margin-bottom:-1px}
.lijstkeuze a:hover{color:var(--inkt)}
.lijstkeuze a.aan{color:var(--inkt);border-bottom-color:var(--signaal)}

/* ---------- Responsiviteit: vangnet en verfijning ----------
   De wikkel om elke tabel vangt brede kolommen op. Wat overblijft zijn blokken die op een
   telefoon net te krap worden: de nieuwe verkoop-, systeem- en tekstschermen. */
@media (max-width:680px){
  /* Niets mag breder zijn dan het scherm — ook een lange url of een nummer niet. */
  body{overflow-x:hidden}
  main,footer{padding-left:.85rem;padding-right:.85rem}
  h1{font-size:1.45rem}
  .lijstkeuze{gap:0;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .lijstkeuze a{white-space:nowrap;padding:.5rem .7rem}
  .lijsten{grid-template-columns:1fr}
  .vk-held{padding:2rem 0 1.5rem}
  .vk-bewijs{gap:1.2rem 2rem}
  .vk-formules{gap:.8rem}
  .vk-bedrag{font-size:2rem}
  .balk{gap:.45rem}
  .balk > button,.balk > .knop{flex:1 1 auto;justify-content:center}
  /* Filters en zoekbalken: één veld per regel leest beter dan drie halve. */
  .veldrij > .veld,.veldrij > .zoekveld{flex:1 1 100%}
  /* Lange nummers en e-mailadressen mogen afbreken in plaats van de tabel op te rekken. */
  td,.brondetail code,.systeemkaart{overflow-wrap:anywhere}
}
@media (max-width:420px){
  .kerncijfer strong{font-size:1.4rem}
  .vk-bewijs b{font-size:1.25rem}
  .tag{font-size:.72rem}
}

/* Een keuze met haar gevolg eronder: twee vlakken die je aanklikt, niet twee bolletjes op een rij. */
.keuzeblok{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.7rem;margin:.6rem 0}
.keuze{display:flex;gap:.65rem;align-items:flex-start;padding:.9rem 1rem;border:1px solid var(--lijn);
       border-radius:var(--r);cursor:pointer;background:var(--papier);line-height:1.5}
.keuze:hover{border-color:var(--signaal)}
.keuze:has(input:checked){border-color:var(--signaal);box-shadow:0 0 0 1px var(--signaal);background:var(--signaal-l)}
.keuze input{margin-top:.25rem;flex:none}
.keuze .muted{font-size:.88rem}

/* Verbruiksmeter: één balk per grens, kleur pas wanneer er iets te melden valt. */
.meterbalk{background:var(--lijn-fijn);border-radius:99px;height:8px;overflow:hidden;margin-top:.45rem}
.meterstand{height:8px;border-radius:99px;transition:width .2s}
.meterstand-ok{background:var(--signaal)}
.meterstand-amber{background:var(--let-op)}
.meterstand-fout{background:var(--slecht)}
.meterstand-grijs{background:var(--stip-stil)}

/* Verwijzingen naar externe bronnen: gebundeld, ingeklapt, en visueel rustiger dan de acties. */
.bronnenlijst{margin-top:1rem;padding:.75rem 1rem;background:var(--vlak-2)}
.bronnenlijst > summary{cursor:pointer;font-weight:550;list-style:none;font-size:.95rem}
.bronnenlijst > summary::-webkit-details-marker{display:none}
.bronnenlijst > summary::before{content:"↗";margin-right:.5rem;color:var(--grijs)}
.bronnenlijst[open] > summary::before{content:"↘"}

/* ---------- Tabellen op een smal scherm ----------
   De wikkel schuift horizontaal, maar dat helpt alleen als de tabel haar eigen breedte houdt.
   Zonder ondergrens perst de browser de kolommen samen tot woorden letter per letter breken —
   "CLUMA ENGINEERIN G" — en dan is de tabel onleesbaar terwijl er niets te schuiven valt. */
@media (max-width:680px){
  .tabelwrap table{min-width:44rem}
  .tabelwrap td,.tabelwrap th{white-space:normal}
  .tabelwrap td:first-child{min-width:13rem}
  /* Een tag hoort nooit af te breken: het is één label, geen zin. */
  .tag{white-space:nowrap}
  /* Nummers, data en bedragen blijven bij elkaar. */
  td .muted{white-space:nowrap}
}

/* Voettekst: links op één rij, identificatie eronder in kleinere letter. */
footer .voet-links{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
footer .voet-uitbater{font-size:.84rem;line-height:1.5}
footer .voet-uitbater a{color:inherit}

/* Proefbalk op het dashboard: aanwezig maar niet schreeuwend, dringend pas op het einde. */
.proefbalk{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:.8rem 1.1rem;border:1px solid var(--signaal);border-radius:var(--r);
  background:var(--signaal-l);margin-bottom:1.2rem}
.proefbalk.dringend{border-color:var(--let-op);background:var(--let-op-l)}
.proefbalk .muted{display:block;font-size:.88rem}