: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}

/* ============================================================
   patch134 — leesbaarheid van de fiche en de kopbalk op een telefoon.
   Drie problemen: de kopbalk at een derde van het scherm op, hetzelfde
   oordeel stond drie keer op de pagina, en de acties stonden vóór de
   inhoud waarvoor de bezoeker komt.
   ============================================================ */

/* ---------- Kopbalk: alles achter één knop op een smal scherm ---------- */
.menuknop{display:none;flex:none;width:40px;height:36px;padding:0;border-radius:var(--r-s);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer}
.menuknop span{display:block;width:17px;height:1.6px;background:#dfe7ee;border-radius:2px}
header.open .menuknop{background:rgba(255,255,255,.18)}

@media (max-width:680px){
  header{gap:.4rem .5rem;padding:.45rem .75rem}
  .menuknop{display:flex;margin-left:auto;order:2}
  /* Het menu, het account en de afmeldknop zitten in het uitschuifpaneel. */
  header .menu,header .account,header .afmelden{display:none}
  header.open .menu{display:flex;order:7;flex-basis:100%;margin-top:.25rem}
  header.open .account{display:block;order:8;flex-basis:100%;max-width:none;font-size:.85rem;
    padding:.5rem .2rem;border-top:1px solid rgba(255,255,255,.1);margin-top:.3rem}
  header.open .afmelden{display:block;order:9;flex-basis:100%}
  header.open .afmelden button{width:100%}
  /* De zoekbalk blijft staan: dat is waarvoor men de app opent. */
  header .zoekbalk{order:3;flex-basis:100%;margin:.1rem 0 0}
  header .zoekbalk input{min-height:36px;padding-top:.4rem;padding-bottom:.4rem}
  header .menu summary{font-size:.9rem;padding:.45rem .6rem}
}

/* ---------- Fiche: één oordeel, één keer ---------- */
.fiche-kop h1{margin-bottom:.35rem;font-size:clamp(1.25rem,4.4vw,1.85rem)}
.fiche-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.9rem}

.oordeel{display:flex;gap:1rem;align-items:flex-start;padding:.85rem 1rem;
  border:1px solid var(--lijn);border-left:4px solid var(--lijn);border-radius:var(--r);
  background:var(--vlak-2);margin-bottom:.9rem}
.oordeel-groen{border-left-color:var(--goed)}
.oordeel-oranje{border-left-color:var(--let-op)}
.oordeel-rood{border-left-color:var(--slecht)}
.oordeel-tekst{flex:1;min-width:0}
.oordeel-zin{margin:0;font-size:var(--maat-3);line-height:1.55;max-width:64ch}
.oordeel .samenvatting-mager{margin:.45rem 0 0;font-size:var(--maat-2)}

/* De badge droeg een vaste breedte terwijl de tekst varieert: "0.19%" liep over de rand. */
.oordeel-badge{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:74px;padding:.5rem .6rem;border-radius:12px;color:#fff;line-height:1.15;text-align:center}
.oordeel-badge .kans{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.oordeel-badge .sub{font-size:.62rem;font-weight:500;opacity:.88;letter-spacing:.01em}
.oordeel-badge.score-groen{background:var(--goed)}
.oordeel-badge.score-oranje{background:var(--let-op)}
.oordeel-badge.score-rood{background:var(--slecht)}

/* ---------- Onderbouwing: ingeklapt, want het is bewijs, geen boodschap ---------- */
.onderbouwing{margin:.9rem 0 0;padding:.6rem .85rem;background:var(--vlak-2);
  border:1px solid var(--lijn-fijn);border-radius:var(--r)}
.onderbouwing > summary{cursor:pointer;list-style:none;font-size:var(--maat-2);font-weight:550}
.onderbouwing > summary::-webkit-details-marker{display:none}
.onderbouwing > summary::before{content:"›";display:inline-block;margin-right:.5rem;color:var(--grijs);
  transition:transform .12s}
.onderbouwing[open] > summary::before{transform:rotate(90deg)}
.onderbouwing .score-delen{margin-top:.7rem}
.onderbouwing-tekst{margin:.7rem 0 0;font-size:.8rem;line-height:1.5;max-width:78ch}

/* ---------- Acties: onderaan de kop ---------- */
.fiche-acties{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--lijn-fijn)}
.fiche-acties form{display:inline-flex}

@media (max-width:680px){
  .fiche-kop{padding:.9rem .95rem}
  .oordeel{gap:.75rem;padding:.75rem .8rem}
  .oordeel-badge{min-width:64px;padding:.45rem .5rem}
  .oordeel-badge .kans{font-size:1.1rem}
  .kerncijfers{margin-top:.8rem;padding-top:.75rem}
  .kerncijfer .lab{font-size:.72rem}
  .kerncijfer .waarde{font-size:1.12rem}
  .kerncijfer .delta{font-size:.72rem}
  .fiche-acties > .knop,.fiche-acties form,.fiche-acties form button{flex:1 1 46%;justify-content:center}
}

/* ---------- patch135 — sectorpositie op de beknopte fiche ----------
   Een kengetal zonder referentie zegt niets: 38 % solvabiliteit is sterk in de bouw en zwak
   bij een holding. Vier regels in woorden; de volledige tabel met spreidingsbalken blijft in
   het volledige rapport. */
.sectorpositie{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--lijn-fijn)}
.sp-kop{font-size:var(--maat-2);font-weight:600;margin-bottom:.5rem}
.sp-kop .muted{font-weight:400}
.sp-regel{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  padding:.3rem 0;border-bottom:1px solid var(--lijn-fijn);font-size:var(--maat-2)}
.sp-regel:last-child{border-bottom:0}
.sp-lab{flex:1 1 11rem;color:var(--grijs)}
.sp-waarde{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-mediaan{font-size:.78rem;white-space:nowrap;margin-left:auto}
.sp-zone{font-size:.76rem;padding:.08rem .45rem;border-radius:999px;white-space:nowrap;
  border:1px solid transparent}
.sp-zone.sp-hoog{background:var(--goed-l);color:var(--goed);border-color:var(--rand-goed)}
.sp-zone.sp-boven{background:var(--goed-l);color:var(--goed);border-color:var(--rand-goed)}
.sp-zone.sp-onder{background:var(--let-op-l);color:var(--let-op);border-color:var(--rand-let)}
.sp-zone.sp-laag{background:var(--slecht-l);color:var(--slecht);border-color:var(--rand-slecht)}
@media (max-width:680px){
  .sp-lab{flex:1 1 100%}
  .sp-mediaan{margin-left:0}
  .sp-regel{gap:.45rem;padding:.4rem 0}
}

/* ---------- patch136 — brede tabellen op een telefoon ----------
   Het vangnet (wikkel met min-width 44rem en een labelkolom van 13rem) liet op 380 px geen
   enkel cijfer over: je zag een scherm vol rijnamen en moest blind naar rechts vegen. De
   labelkolom blijft nu staan en wordt smaller, de twee metadatakolommen krimpen weg, en de
   tabel wordt net smal genoeg dat het recentste boekjaar meteen in beeld valt. */
.bm-getal{text-align:right;white-space:nowrap}

@media (max-width:680px){
  /* Jaarrekeningtabellen: teken- en codekolom weg (metadata, geen cijfers). Niet met
     display:none — er staan rijen met colspan in, en die zouden dan extra kolommen forceren. */
  .jr .jr-teken,.jr .jr-code{width:0;max-width:0;padding-left:0;padding-right:0;font-size:0;overflow:hidden}
  .jr td:first-child{width:10.5rem;min-width:10.5rem;max-width:10.5rem;
    overflow-wrap:anywhere;position:sticky;left:0;background:var(--papier);z-index:2}
  .jr .jr-n0 td:first-child{background:#f4f6f9}
  .jr .jr-kop th:first-child{position:sticky;left:0;background:#e9f1fb;z-index:3}
  .jr td,.jr th{padding:.3rem .35rem}
  .jr td:not(:first-child){white-space:nowrap}
  .tabelwrap .jr{min-width:33rem}

  /* Sectortabel: de kwartielkolommen zitten al in de balk, dus die mogen weg. Geen colspan
     in deze tabel, dus display:none kan hier wel. */
  .bm-kwart{display:none}
  .tabelwrap .bm{min-width:30rem}
  .bm td:first-child,.bm th:first-child{position:sticky;left:0;background:var(--papier);
    z-index:2;min-width:8.5rem;max-width:8.5rem;overflow-wrap:anywhere}
  .bm th:first-child{background:var(--vlak)}
}

/* ---------- patch138 — het volledige rapport in tabs ----------
   Eén pagina met vijftien blokken en zes tabellen betekende minutenlang scrollen voor je bij
   de balans was. De kop met naam, oordeel en kerncijfers blijft boven de tabs staan; alles
   daaronder verdeelt zich over vier panelen. */
.tabs{display:flex;gap:.15rem;overflow-x:auto;margin:1.2rem 0 1rem;
  border-bottom:1px solid var(--lijn);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;
  padding:.6rem .85rem;font-size:var(--maat-2);font-weight:550;color:var(--grijs);
  cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--inkt)}
.tab.actief{color:var(--merk);border-bottom-color:var(--merk)}
.tabpaneel{display:none}
.tabpaneel.actief{display:block}

/* Activa, passiva, resultatenrekening en sociale balans: ingeklapt. */
.jr-sectie{margin-bottom:.6rem;border:1px solid var(--lijn-fijn);border-radius:var(--r);
  background:var(--vlak-2)}
.jr-sectie > summary{cursor:pointer;list-style:none;padding:.6rem .85rem;
  font-size:var(--maat-2);font-weight:600}
.jr-sectie > summary::-webkit-details-marker{display:none}
.jr-sectie > summary::before{content:"›";display:inline-block;margin-right:.5rem;
  color:var(--grijs);transition:transform .12s}
.jr-sectie[open] > summary::before{transform:rotate(90deg)}
.jr-sectie .tabelwrap{margin:0}
.jr-sectie .jr{margin-bottom:0}

@media (max-width:680px){
  .tabs{margin:1rem -.95rem .9rem;padding:0 .95rem}
  .tab{padding:.55rem .7rem;font-size:.85rem}
}

/* ---------- patch139 — handelen los van consulteren ----------
   De knoppen die iets dóén (pdf, opvolgen, vergelijken) stonden groot tussen de inhoud. Nu
   klein rechtsboven, naast de naam. Netwerk is een andere pagina en hoort bij de structuur. */
.kop-rij{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.kop-rij h1{margin-bottom:.35rem;flex:1 1 16rem;min-width:0}
.kop-acties{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;flex:none;padding-top:.35rem}
.kop-acties form{display:inline-flex;margin:0}
.knop.klein{padding:.32rem .7rem;font-size:.82rem}

@media (max-width:680px){
  .kop-rij{gap:.5rem}
  .kop-acties{padding-top:0;width:100%}
  .kop-acties > *{flex:1 1 auto}
  .kop-acties .knop{width:100%;justify-content:center}
}

/* ---------- patch140 — breedte benutten ----------
   Kaarten met een brede tabel stonden in een kolom van 360 px terwijl de helft van het scherm
   leeg bleef, en de tekstpagina's stonden smal én links tegen de rand. */

/* Leespagina's: gecentreerd en ruimer. Ruimer dan de klassieke 68 tekens is niet ideaal voor
   lange lopende tekst, maar het gaat hier om juridische pagina's die men scant, niet leest. */
.tekst{max-width:none;width:min(92ch,100%);margin-left:auto;margin-right:auto}
:root{--leesbreedte:84ch}

/* De onderbouwing van het oordeel vult nu de kaart in plaats van een kolom in het midden. */
.onderbouwing-tekst{max-width:none}
.oordeel-zin{max-width:none}

/* Bronnen met uitleg: wat is het, en wat vind je er dat hier niet staat. */
.bronnen{margin:.8rem 0 0;display:grid;gap:.9rem}
.bron dt{font-weight:620;margin-bottom:.15rem}
.bron dd{margin:0;color:var(--grijs);font-size:var(--maat-2);line-height:1.55;max-width:80ch}

/* ---------- patch141 — de structuur als boom in plaats van een lijst ----------
   Het was een stapel even zware kaders met één pijl ertussen: je zag niet wie onder wie hing,
   en niet welk belang groot of klein was. Nu een stam met aftakkingen, een balkje voor het
   aangehouden percentage, en een kleur naar de faalkans van de deelneming zelf. */
.st-blok{margin:.3rem 0;position:relative}
.st-blok .st-knoop{position:relative;margin-left:1.35rem}
.st-blok::before{content:"";position:absolute;left:.42rem;top:.9rem;bottom:1.4rem;width:1px;background:var(--lijn)}
.st-blok .st-knoop::before{content:"";position:absolute;left:-.93rem;top:1.15rem;width:.8rem;height:1px;background:var(--lijn)}
.st-knoop{border:1px solid var(--lijn);border-left:3px solid var(--lijn);border-radius:var(--r-s);
  padding:.45rem .7rem .45rem .75rem;margin:.25rem 0;background:var(--papier);overflow:hidden}
.st-knoop.st-groen{border-left-color:var(--goed)}
.st-knoop.st-oranje{border-left-color:var(--let-op)}
.st-knoop.st-rood{border-left-color:var(--slecht)}
.st-knoop.st-grijs{border-left-color:var(--lijn)}
/* Het aandeel als balk onderaan de knoop: 100 % loopt door, 5 % is meteen zichtbaar klein. */
.st-aandeel{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lijn-fijn)}
.st-aandeel::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--deel);background:var(--signaal);opacity:.55}
.st-knoop.st-zelf{border:2px solid var(--signaal);border-left-width:4px;background:var(--signaal-l);margin-left:0}
.st-blok .st-niveau2{margin-left:1.5rem}
.st-niveau2 .st-knoop{margin-left:1.35rem}
.st-pijl{color:var(--grijs);text-align:left;font-size:1rem;line-height:1;margin:.15rem 0 .15rem .3rem}

@media (max-width:680px){
  .st-blok .st-niveau2{margin-left:.7rem}
  .st-naam{font-size:.88rem}
}

/* ---------- patch142 — wat de onderneming zelf opgeeft over vervallen schulden ---------- */
.eigen-verklaring{margin-top:.9rem;padding:.7rem .85rem;border:1px solid var(--rand-let);
  background:var(--let-op-l);border-radius:var(--r)}
.ev-kop{font-size:.78rem;font-weight:650;color:var(--let-op);margin-bottom:.45rem}
.ev-regel{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.22rem 0;font-size:var(--maat-2);border-bottom:1px solid var(--rand-let)}
.ev-regel:last-of-type{border-bottom:0}
.ev-regel strong{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- patch152 — voorproef van de sectorvergelijking op de publieke pagina ----------
   Echte labels, vaste placeholderwaarden. Vervagen met CSS verbergt niets: de tekst blijft in
   de broncode staan, en de kwartielkleur verraadt het oordeel ook als het cijfer onleesbaar is.
   Daarom staat hier voor elk bedrijf hetzelfde. */
.voorproef{margin:.2rem 0 .3rem;border-top:1px solid var(--lijn-fijn);
  -webkit-user-select:none;user-select:none;pointer-events:none}
.vp-regel{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  padding:.34rem 0;border-bottom:1px solid var(--lijn-fijn);font-size:var(--maat-2)}
.vp-lab{flex:1 1 11rem;color:var(--grijs)}
.vp-waarde{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.vp-zone{font-size:.76rem;padding:.08rem .45rem;border-radius:999px;white-space:nowrap;
  background:var(--vlak);border:1px solid var(--lijn);color:var(--grijs)}
.vp-mediaan{font-size:.78rem;white-space:nowrap;margin-left:auto;color:var(--grijs)}
.vervaagd{filter:blur(4.5px);opacity:.85}
@media (max-width:680px){
  .vp-lab{flex:1 1 100%}
  .vp-mediaan{margin-left:0}
}