:root{
  /* patch209: huisstijl "kobalt" — kobaltblauw vlak, citroengeel als accent, Schibsted Grotesk.
     Groen, oranje en rood zijn enkel voor de toestand van een bedrijf; het merk gebruikt ze nooit,
     zodat een merkkleur nooit als een oordeel leest. */
  --r:20px;--r-s:12px;--r-xs:6px;--merk:var(--signaal);
  --h-veld:44px;
  --lettertype:"Schibsted Grotesk",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --inkt:#0E1A4F;--inkt-2:#1B2660;--grijs:#4A5580;
  --lijn:#DCE1F2;--lijn-fijn:#ECEFFA;
  --papier:#ffffff;--vlak:#F3F5FF;--vlak-2:#F8F9FF;
  --signaal:#1F3BFF;--signaal-d:#1830CC;--signaal-l:#E3E7FF;
  --accent:#FFD000;--accent-d:#E6BB00;--accent-inkt:#0E1A4F;
  --goed:#12805C;--goed-l:#E3F4EC;
  --let-op:#9A5A00;--let-op-l:#FFF1D6;--let-op-stip:#F4A300;
  --slecht:#C62828;--slecht-l:#FCE4E4;
  --onbekend:#7A8AA0;--onbekend-l:#EEF1F5;
  --data-1:#1F3BFF;--data-2:#0E1A4F;--data-3:#F4A300;--data-4:#7A8AA0;
  --chroom-boven:#1F3BFF;--chroom-onder:#1F3BFF;
  --overlay:#0E1A4F;--overlay-tekst:#ffffff;--knop-tekst:#ffffff;
  --rand-goed:#BFE3D2;--rand-let:#F5DDB0;--rand-slecht:#F2C4C4;
  --spoor:#DCE1F2;--stip-stil:#B4BDDA;--veld-plaatshouder:#8890B0;--veld-hover:#B4BDDA;
  --lift:0 1px 1px rgba(14,26,79,.04),0 8px 24px -12px rgba(14,26,79,.18);
  --lift-hoog:0 2px 4px rgba(14,26,79,.06),0 16px 40px -16px rgba(14,26,79,.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:#E8ECFF;--inkt-2:#0B1130;--grijs:#A3ACD6;
  --lijn:#2A3470;--lijn-fijn:#1E2658;
  --papier:#121A45;--vlak:#0B1130;--vlak-2:#161F52;
  --signaal:#7B8CFF;--signaal-d:#A3B0FF;--signaal-l:#1D2766;
  --accent:#FFD000;--accent-d:#FFDD33;--accent-inkt:#0B1130;
  --goed:#45C98F;--goed-l:#123329;--let-op:#F4B23A;--let-op-l:#3A2C10;--let-op-stip:#F4A300;
  --slecht:#FF8A80;--slecht-l:#3D1A1F;--onbekend:#9AA6C8;--onbekend-l:#1E2658;
  --data-1:#7B8CFF;--data-2:#E8ECFF;--data-3:#F4B23A;--data-4:#9AA6C8;
  --chroom-boven:#0B1130;--chroom-onder:#0B1130;
  --overlay:#1D2766;--overlay-tekst:#E8ECFF;--knop-tekst:#0B1130;
  --rand-goed:#1E553C;--rand-let:#55421A;--rand-slecht:#5D3330;
  --spoor:#1E2658;--stip-stil:#5C6894;--veld-plaatshouder:#7B86B3;--veld-hover:#3A4688;
  --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:26px;height:26px;flex:none}header .merk .merk-punt{color:#FFD100;margin-left:-.12em}
header .menu{display:flex;gap:.15rem;align-items:center}
.dropdown{position:relative}
.dropdown summary{list-style:none;cursor:pointer;padding:.5rem .7rem;color:rgba(255,255,255,.82);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:rgba(255,255,255,.7)}
header .zoekbalk input:focus{outline:none;background-color:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
header .zoekbalk > a{color:rgba(255,255,255,.7);font-size:.84rem;white-space:nowrap;text-decoration:none}
header .zoekbalk > a:hover{color:#fff}
header .account{color:rgba(255,255,255,.82);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:rgba(255,255,255,.82);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(min(180px,100%),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:var(--stip-stil);padding:0 .25rem;min-height:0;line-height:1;vertical-align:-2px}
.ster:hover{background:none;color:#d9a520}
.ster.aan{color:var(--accent-d)}

/* ---------- 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:var(--veld-plaatshouder);font-size:.75rem;text-align:right;white-space:nowrap;width:4.5rem;font-variant-numeric:tabular-nums}
.jr .jr-teken{color:var(--veld-plaatshouder);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}
  /* patch275: het paneel hangt onder de kopbalk zelf (die is sticky en dus het ankerpunt). Met
     position:fixed en top:auto kwam het op de plaats in de pagina terecht waar het menu ooit stond:
     wie al naar beneden gescrold had, zag het niet. */
  header .dropdown div{position:absolute;left:.7rem;right:.7rem;top:calc(100% + 4px);min-width:0;
    max-height:min(70vh, calc(100dvh - 120px));overflow-y:auto;-webkit-overflow-scrolling:touch}
  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(min(210px,100%),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:var(--stip-stil)}
@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:rgba(255,255,255,.82);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:var(--stip-stil);cursor:pointer}
button.ster.aan{color:var(--accent)}
button.ster:hover{color:var(--accent)}

/* ============================================================
   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(min(280px,100%),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 —
   "VOORBEELD 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}
  /* De naamkolom breed genoeg — maar niet als de eerste kolom een vinkje is (dashboard,
     opvolglijst): dan kreeg het vinkje dertien rem en schoof de naam uit beeld. */
  .tabelwrap td:first-child{min-width:13rem}
  .tabelwrap td:first-child:has(> input[type=checkbox]){min-width:0;width:2rem;padding-right:0}
  .tabelwrap td:first-child:has(> input[type=checkbox]) + td{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. Ook als de klasse op de cel zelf staat
     (td.muted) of de cel rechts uitgelijnd is (bedragen): anders brak een ondernemingsnummer
     op een gsm per cijfer af, onder elkaar (patch195). De tabel wordt dan breder en schuift. */
  td .muted,td.muted,td.n,.tabelwrap td[style*="text-align:right"],.tabelwrap th[style*="text-align:right"]{white-space:nowrap}
  /* Lange rechtsvormen ("Vennootschap of vereniging zonder rechtspersoonlijkheid") mogen wel
     afbreken, maar op woorden en niet smaller dan een leesbare kolom. */
  /* Niet voor de kerncijfers (.sam) en de volledige jaarrekening (.jr): die regelen hun
     kolommen zelf en passen zo op een gsm. */
  .tabelwrap table:not(.sam):not(.jr) td{min-width:9rem}
  .tabelwrap table:not(.sam):not(.jr) td:has(> input[type=checkbox]:only-child),
  .tabelwrap table:not(.sam):not(.jr) td:has(> button:only-child),
  .tabelwrap table:not(.sam):not(.jr) td:has(> form:only-child){min-width:0}
}

/* 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:#ffffff;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:var(--vlak-2)}
  .jr .jr-kop th:first-child{position:sticky;left:0;background:var(--signaal-l);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 als een gevulde balk met knoppen, niet als grijze tekst met een dun streepje eronder:
   die versie viel weg tussen de kaarten en werd overgekeken. Bovendien verwees de oude regel naar
   --merk, een variabele die niet bestaat, zodat de actieve tab nooit een kleur kreeg. De actieve tab is een witte knop
   die uit de balk springt; de balk zelf kleeft bovenaan bij het scrollen. */
.tabs{display:flex;gap:.25rem;overflow-x:auto;margin:1.4rem 0 1.1rem;padding:.3rem;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:calc(var(--r) + 2px);
  position:sticky;top:.5rem;z-index:5;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;background:none;border:1px solid transparent;border-radius:var(--r);
  padding:.55rem 1rem;font-size:var(--maat-2);font-weight:600;color:var(--inkt-2);
  cursor:pointer;white-space:nowrap;line-height:1.2}
.tab:hover{color:var(--inkt);background:var(--veld-hover)}
.tab.actief{color:var(--signaal);background:var(--papier);border-color:var(--lijn);
  box-shadow:0 1px 2px rgba(16,26,36,.08)}
.tab.actief::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--signaal);margin-right:.5rem;vertical-align:.05em}
.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 0 .9rem;padding:.25rem;top:.25rem}
  .tab{padding:.5rem .75rem;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}
}

/* ---- Iconen (patch182) ------------------------------------------------------------------- */
.ic{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}
.kop-acties .knop{display:inline-flex;align-items:center;gap:.4rem}
.tabs .tab{display:inline-flex;align-items:center;gap:.45rem}
.tabs .tab .ic{width:16px;height:16px;opacity:.75}
.tabs .tab.actief .ic{opacity:1}
.tabs .tab.actief::before{display:none}   /* het icoon vervangt het bolletje */
.sig.met-ic::before{display:none}
.sig .ic{width:14px;height:14px;stroke-width:2}
/* tijdlijn: gekleurd rondje met icoon in plaats van een stip */
.tl-lijn{width:28px}
.tl-ic{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--papier);margin-top:-3px}
.tl-ic .ic{width:14px;height:14px;stroke-width:2}
.tl-ic.tl-teal{background:var(--signaal-l);color:var(--signaal)}
.tl-ic.tl-navy{background:var(--signaal-l);color:var(--inkt-2)}
.tl-ic.tl-amber{background:var(--let-op-l);color:var(--let-op)}
.tl-ic.tl-rood{background:var(--slecht-l);color:var(--slecht)}
.tl-rij:last-child .tl-lijn::before{height:14px}

/* ---- Fichebalk: tabs en acties in één vaste balk (patch183) --------------------------------
   Feedback van een gebruiker: de tabs en knoppen vielen niet op. Nu één donkere balk die
   bovenaan blijft staan bij het scrollen, met de actieve tab in de merkkleur. */
.fichebalk{position:sticky;top:calc(var(--kop-h, 56px) + .45rem);z-index:20;display:flex;align-items:center;gap:.5rem;
  margin:1.2rem 0 1.1rem;padding:.35rem;background:var(--inkt);border-radius:calc(var(--r) + 2px);
  box-shadow:0 6px 18px rgba(16,26,36,.18)}
.fichebalk .tabs{position:static;margin:0;padding:0;background:none;border:0;border-radius:0;flex:1 1 auto;min-width:0}
.fichebalk .tab{color:rgba(255,255,255,.78);border-color:transparent}
.fichebalk .tab:hover{color:#fff;background:rgba(255,255,255,.09)}
.fichebalk .tab.actief{color:#fff;background:var(--signaal);border-color:transparent;box-shadow:none}
.fichebalk .tab .ic{opacity:.9}
.fb-naam{display:none;color:#fff;font-weight:700;font-size:.9rem;padding:0 .5rem 0 .6rem;max-width:14rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;border-right:1px solid rgba(255,255,255,.18)}
.fichebalk.vast .fb-naam{display:block}
.fb-acties{display:flex;gap:.3rem;align-items:center;flex:none}
.fb-acties form{display:inline-flex;margin:0}
.fb-acties .knop{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .7rem;font-size:.84rem;
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-s);box-shadow:none}
.fb-acties .knop:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.fb-acties .knop.fb-primair{background:#fff;color:var(--signaal-d);border-color:#fff;font-weight:700}
.fb-acties .knop.fb-primair:hover{background:var(--signaal-l)}
.fb-acties .knop.fb-aan{background:rgba(95,208,216,.18);border-color:var(--accent)}
@media (max-width:1100px){.fb-acties .fb-tekst{display:none}.fb-acties .knop{padding:.45rem .55rem}
  .fb-acties .knop.fb-primair .fb-tekst{display:inline}}
@media (max-width:760px){
  /* Op gsm neemt de sitekop al een derde van het scherm; een tweede vaste balk erbij laat
     te weinig over om te lezen. Hier scrolt de balk dus gewoon mee. */
  .fichebalk{flex-wrap:wrap;position:relative;top:0}
  .fichebalk .tabs{order:2;flex-basis:100%}
  .fb-acties{order:1;width:100%;justify-content:flex-end}
  .fichebalk.vast .fb-naam{order:0;flex:1 1 auto;border:0;max-width:none}
  .fichebalk.vast .fb-acties{width:auto;flex:none}
}

/* ---- Netwerk (patch183) ------------------------------------------------------------------ */
.nw-paginakop{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.nw{display:grid;grid-template-columns:230px 1fr;border:1px solid var(--lijn);border-radius:var(--r);background:var(--papier);overflow:hidden}
.nw-groot{height:max(520px,74vh)}
.nw-middel{height:560px}
.nw-kaart{padding:0;overflow:hidden;margin-bottom:1rem}
.nw-kaart .nw{border:0;border-radius:0;border-top:1px solid var(--lijn-fijn)}
.nw-kaartkop{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem}
.nw-kaartkop h2{margin:0;font-size:1rem;display:flex;align-items:center;gap:.45rem}
.nw-paneel{background:var(--vlak);border-right:1px solid var(--lijn-fijn);padding:.8rem .9rem;overflow-y:auto;font-size:.84rem}
.nw-kop{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--grijs);margin:.9rem 0 .4rem}
.nw-kop:first-child{margin-top:0}
.nw-datum{display:flex;gap:.35rem}
.nw-datum input{flex:1;min-width:0;padding:.35rem .45rem;font-size:.84rem}
.nw-vink{display:flex;align-items:center;gap:.45rem;padding:.22rem 0;cursor:pointer;line-height:1.25}
.nw-vink input{margin:0;flex:none}

.nw-teller{margin-left:auto;background:var(--papier);border:1px solid var(--lijn);border-radius:999px;font-size:.72rem;padding:0 .4rem;color:var(--grijs);font-variant-numeric:tabular-nums}
.nw-voet{margin-top:1rem;font-size:.74rem;color:var(--grijs);line-height:1.4}
.nw-doek{position:relative;min-width:0;min-height:0;background:
  radial-gradient(circle at 1px 1px,var(--lijn-fijn) 1px,transparent 1.2px) 0 0/22px 22px,var(--papier)}
.nw-svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none;user-select:none}
.nw-svg.nw-grijp{cursor:grabbing}
.nw-lijn{transition:opacity .15s}
.nw-lijnlabel{font-size:9.5px;fill:var(--grijs);text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:3px;pointer-events:none}
.nw-knoop{cursor:pointer;transition:opacity .15s}
.nw-knoop rect{fill:var(--inkt);stroke:#fff;stroke-width:1.5}
.nw-knoop.nw-start rect{fill:var(--signaal)}
.nw-knoop.nw-stop rect{fill:var(--lijn-fijn);stroke:var(--stip-stil)}
.nw-knoop.nw-stop .nw-naam-b{fill:var(--grijs);text-decoration:line-through}
.nw-knoop.nw-toestand rect{stroke:var(--let-op);stroke-width:2.5}
.nw-knoop circle{fill:var(--accent);stroke:#fff;stroke-width:2}
.nw-knoop.nw-start circle{fill:var(--accent-d)}
.nw-poppetje{fill:none;stroke:#5b3f00;stroke-width:1.8;stroke-linecap:round}
.nw-naam-b{fill:#fff;font-size:11.5px;font-weight:600;text-anchor:middle}
.nw-naam-p{fill:#1c2733;font-size:11px;font-weight:600;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:3px}
.nw-sub{fill:#66717d;font-size:9px;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:3px}
.nw-knoop.nw-gekozen rect,.nw-knoop.nw-gekozen circle{stroke:var(--let-op);stroke-width:3}
.nw-dim{opacity:.18}
/* patch260: "+N" voor dichtgevouwen relaties; "−" om weer dicht te vouwen; "↗" aan de rand van het geladen web */
.nw-badge{cursor:pointer}
.nw-badge rect{fill:var(--let-op);stroke:#fff;stroke-width:1.5}
.nw-badge text{fill:#fff;font-size:11px;font-weight:700;text-anchor:middle;pointer-events:none}
.nw-badge.nw-badge-open rect{fill:var(--grijs)}
.nw-badge.nw-badge-verder rect{fill:#fff;stroke:var(--grijs)}
.nw-badge.nw-badge-verder text{fill:var(--grijs)}
.nw-badge:hover rect{stroke-width:2.5}
.nw-schik+.nw-schik{margin-top:.35rem}
.nw-zoom{position:absolute;top:.6rem;right:.6rem;display:flex;flex-direction:column;gap:.25rem}
.nw-zoom button{width:32px;height:32px;border:1px solid var(--lijn);background:#fff;border-radius:7px;font-size:1rem;line-height:1;cursor:pointer;color:var(--inkt-2)}
.nw-zoom button:hover{background:var(--vlak)}
.nw-info{position:absolute;left:.7rem;bottom:2.4rem;width:min(330px,calc(100% - 1.4rem));max-height:calc(100% - 3.6rem);overflow:auto;
  background:#fff;border:1px solid var(--lijn);border-radius:var(--r);box-shadow:0 8px 24px rgba(16,26,36,.14);padding:.8rem .9rem;font-size:.84rem}
.nw-info ul{list-style:none;margin:.5rem 0;padding:0}
.nw-info li{padding:.3rem 0;border-top:1px solid var(--lijn-fijn);display:flex;flex-direction:column}
.nw-info li.nw-oud{opacity:.6}
.nw-info-sub{color:var(--grijs);font-size:.78rem}
.nw-info-knoppen{display:flex;gap:.4rem;flex-wrap:wrap}
.nw-sluit{float:right;border:0;background:none;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--grijs)}
.nw-tip{position:absolute;pointer-events:none;background:var(--inkt);color:#fff;font-size:.78rem;padding:.3rem .5rem;border-radius:6px;max-width:250px;z-index:3}
.nw-legende{position:absolute;right:.7rem;bottom:.5rem;display:flex;gap:.8rem;font-size:.72rem;color:var(--grijs);background:rgba(255,255,255,.9);padding:.2rem .5rem;border-radius:6px}
.nw-legende span{display:inline-flex;align-items:center;gap:.3rem}
.nw-legende i{display:inline-block}
.nw-l-bedrijf{width:14px;height:9px;border-radius:2px;background:var(--inkt)}
.nw-l-persoon{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.nw-l-stop{width:14px;height:9px;border-radius:2px;background:var(--lijn-fijn);border:1px solid var(--stip-stil)}
.nw-l-oud{width:16px;border-top:2px dashed #b8c2cd}
.nw-leeg{padding:2rem;color:var(--grijs);text-align:center;grid-column:1/-1}
@media (max-width:760px){
  .nw{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .nw-groot,.nw-middel{height:auto}
  .nw-doek{height:62vh}
  .nw-paneel{border-right:0;border-bottom:1px solid var(--lijn-fijn);display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem;max-height:none}
  .nw-paneel .nw-kop{grid-column:1/-1}
  .nw-datum{grid-column:1/-1}
  .nw-voet{grid-column:1/-1}
  .nw-legende{display:none}
}
.nw-schik{display:flex;gap:.35rem}
.nw-schik .knop{flex:1;justify-content:center}
.nw-schik .knop.aan{background:var(--signaal);color:#fff;border-color:var(--signaal)}
.nw-lijnstaal{width:22px;height:6px;flex:none}
.nw-lijn.nw-vet{stroke-width:3.2}
.nw-rand{transition:opacity .15s}

/* ---- toegankelijkheid (patch192) ------------------------------------------------------------- */
/* Skip-link: onzichtbaar tot iemand met Tab begint, dan de eerste stop op elke pagina. */
.skiplink{position:absolute;left:.75rem;top:-3rem;z-index:1000;background:var(--papier);color:var(--inkt);
  padding:.55rem .9rem;border-radius:var(--r-s);box-shadow:var(--lift);font-weight:600;text-decoration:none}
.skiplink:focus{top:.75rem;outline:2px solid var(--signaal);outline-offset:2px}
main:focus{outline:none}
/* Zichtbare focus op de zoekbalk en uitklapmenu's: die hadden er geen (outline:none). */
header .zoekbalk input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
summary:focus-visible{outline:2px solid var(--signaal);outline-offset:2px}
.dropdown summary:focus-visible{outline-color:var(--accent)}
.tab:focus-visible{outline:2px solid var(--signaal);outline-offset:1px}
.tabpaneel:focus{outline:none}
.tabpaneel:focus-visible{outline:2px dashed var(--signaal-l);outline-offset:4px}

/* ---- dashboard (patch193) --------------------------------------------------------------------- */
/* Alles op de middellijn, cijfers rechts onder hun kop, en de naam als één blok. */
.dash{font-variant-numeric:tabular-nums}
.dash th,.dash td{vertical-align:middle}
.dash th.n,.dash td.n{text-align:right;white-space:nowrap}
.dash td.neg{color:var(--slecht)}
.dash .dash-vink{width:2rem;padding-right:0}
.dash-naam{min-width:16rem}
.dash-naam a{font-weight:700;color:var(--signaal-d,var(--signaal));text-decoration:none}
.dash-naam a:hover{text-decoration:underline}
.dash-vorm{display:inline-block;font-size:.7rem;font-weight:600;color:var(--grijs);background:var(--vlak);border:1px solid var(--lijn);border-radius:4px;padding:0 .3rem;vertical-align:.1em}
.dash-sub{display:block;font-size:.8rem;color:var(--grijs);margin-top:.15rem;white-space:nowrap}
/* patch225: hooguit twee korte chips op één lijn; de rest achter "+N". */
.dash-sig{min-width:11.5rem}
.dash-sig-in{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;max-width:20rem}
.dash-sig .tag{white-space:nowrap;max-width:13rem;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:1.45;padding:.1rem .5rem}
.dash-sig .tag::before{display:inline-block;vertical-align:.1em;margin-right:.3rem}
.tag.rood{background:var(--slecht-l);color:var(--slecht)}
.tag.oranje{background:var(--let-op-l);color:var(--let-op)}
.tag.groen{background:var(--goed-l);color:var(--goed)}
.dash-sig-meer{display:block}
.dash-sig-meer[open]{flex-basis:100%}
.dash-sig-meer>summary{display:inline-block}
.dash-sig-meer>summary{list-style:none;cursor:pointer;font-size:.72rem;font-weight:700;color:var(--grijs);background:var(--vlak);border:1px solid var(--lijn);border-radius:999px;padding:.05rem .45rem;line-height:1.5}
.dash-sig-meer>summary::-webkit-details-marker{display:none}
.dash-sig-meer[open]>summary{color:var(--inkt);border-color:var(--grijs)}
.dash-sig-meer ul{margin:.25rem 0 0;padding:.4rem .6rem;list-style:none;background:var(--vlak-2);border:1px solid var(--lijn-fijn);border-radius:var(--r-s,8px);font-size:.78rem;line-height:1.4;white-space:normal;min-width:15rem}
.dash-sig-meer li{display:flex;gap:.1rem;align-items:baseline;padding:.2rem 0}
.dash-sig-meer li+li{border-top:1px solid var(--lijn-fijn)}
.dash-sig-meer .sig-punt{flex:none}

.dash-bm{font-size:.68rem;color:var(--grijs);margin-left:.25rem;font-weight:600}
.dash-solv{display:inline-flex;flex-direction:column;align-items:flex-end;gap:.2rem;min-width:4.5rem}
.dash-solv-b{display:block;width:4.5rem;height:4px;border-radius:2px;background:var(--lijn-fijn);overflow:hidden}
.dash-solv-b i{display:block;height:100%;border-radius:2px}
.dash-solv.stevig .dash-solv-b i{background:var(--goed)}
.dash-solv.matig .dash-solv-b i{background:var(--let-op)}
.dash-solv.zwak .dash-solv-b i{background:var(--slecht)}
.dash-solv.zwak .dash-solv-w{color:var(--slecht)}
.dash-acties{white-space:nowrap}
.dash-acties form{display:inline-flex;gap:.3rem;vertical-align:middle}
.dash-acties .opvolg-notitie{width:10rem}
.dash-weg{margin-left:.15rem}
.dash tbody tr:hover td{background:var(--vlak-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- logo's van bedrijven (patch197) ---------------------------------------------------------- */
/* Een wit vlak onder elk logo: veel logo's zijn transparant en ontworpen voor een lichte
   achtergrond, en verdwijnen anders in het donkere thema. */
.logo-icoon{display:inline-block;vertical-align:middle;flex:none;box-sizing:border-box;object-fit:contain;
  background:#fff;border:1px solid var(--lijn);border-radius:8px;padding:2px}
.logo-init{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex:none;box-sizing:border-box;
  border-radius:8px;font-weight:700;letter-spacing:-.02em;line-height:1;
  color:hsl(var(--tint) 45% 28%);background:hsl(var(--tint) 55% 92%);border:1px solid hsl(var(--tint) 35% 82%)}
html[data-thema="donker"] .logo-init{color:hsl(var(--tint) 60% 82%);background:hsl(var(--tint) 30% 20%);border-color:hsl(var(--tint) 25% 30%)}
td > .logo-icoon,td > .logo-init{margin-right:.45rem}
.met-logo{display:flex;align-items:center;gap:.6rem}
.met-logo > .naamblok{min-width:0}
h1 .logo-icoon,h1 .logo-init{margin-right:.55rem;border-radius:10px}

/* Sparkline (patch193; sinds patch198 ook op het dashboard, dus hier in plaats van in fiche.html) */
.spark{display:block;overflow:visible}
.spark polyline{fill:none;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.spark-goed polyline{stroke:var(--goed)}.spark-goed circle{fill:var(--goed)}.spark-goed .spark-vlak{fill:var(--goed);opacity:.1}
.spark-slecht polyline{stroke:var(--slecht)}.spark-slecht circle{fill:var(--slecht)}.spark-slecht .spark-vlak{fill:var(--slecht);opacity:.1}

/* ---------- Schuifbalken (patch199) ----------
   Dun en in de huisstijl in plaats van de grijze balk van het systeem. Een tabel die breder is
   dan het scherm, krijgt een schaduw aan de kant waar nog kolommen staan (klasse gezet door het
   scriptje onderaan basis.html): een zachte vervaging aan de rand. */
.tabelwrap{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--grijs) 45%,transparent) transparent;position:relative}
.tabelwrap::-webkit-scrollbar{height:8px;width:8px}
.tabelwrap::-webkit-scrollbar-track{background:transparent}
.tabelwrap::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--grijs) 38%,transparent);border-radius:99px;border:2px solid var(--papier)}
.tabelwrap::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--grijs) 60%,transparent)}
/* Het masker ligt op de wikkel zelf en schuift dus niet mee met de inhoud. */
.tabelwrap.rechts{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.tabelwrap.links:not(.zk-tabel){-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.tabelwrap.links.rechts:not(.zk-tabel){-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}

/* ---------- Paginering (patch199) ---------- */
.pag{display:flex;align-items:center;gap:.4rem .7rem;flex-wrap:wrap}
.pag-telling{font-size:.85rem;color:var(--grijs);white-space:nowrap}
.pag-nrs{display:inline-flex;align-items:center;gap:.2rem;flex-wrap:wrap}
.pag-knop{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 .5rem;border-radius:var(--r-s);
  border:1px solid var(--lijn);background:var(--papier);color:var(--inkt);text-decoration:none;font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums}
a.pag-knop:hover{border-color:var(--signaal);color:var(--signaal-d)}
.pag-knop.nu{background:var(--signaal);border-color:var(--signaal);color:var(--knop-tekst)}
.pag-knop.uit{opacity:.35}
.pag-gat{color:var(--grijs);padding:0 .15rem}
select.pag-per{width:auto;min-height:34px;padding:0 1.9rem 0 .6rem;font-size:.86rem;background-position:right .55rem center}

/* ---------- Prospecteren: resultaten (patch199) ---------- */
.zk-acties .balk{align-items:center}
.zk-totaal{font-size:1.05rem}
.zk-rek{flex:1 1 0}
.zk-onder{display:flex;justify-content:flex-end;margin:-.2rem 0 1.2rem}
.uitklap{position:relative}
.uitklap > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.uitklap > summary::-webkit-details-marker{display:none}
.uitklap > summary::after{content:"▾";font-size:.75em;opacity:.7}
.uitklap-paneel{position:absolute;top:calc(100% + 6px);left:0;z-index:30;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);
  box-shadow:var(--lift-hoog);padding:.9rem 1rem;width:min(300px,86vw)}
.uitklap-paneel.breed{width:min(440px,90vw)}
.uitklap-paneel .balk{margin:.7rem 0 0}
.zk-uitleg{font-size:.82rem;margin:0 0 .6rem}
.zk-vinkjes{display:grid;gap:.35rem}
.zk-vinkjes .vink{align-items:flex-start}
.zk-vinkjes .vink small{display:block;font-size:.78rem;line-height:1.35}
.zk-auto-teller{font-size:.72rem;font-weight:700;background:var(--signaal-l);color:var(--signaal-d);border-radius:99px;padding:0 .4rem}
.zk-tabel table{font-size:.9rem}
.zk-tabel td{vertical-align:middle}
.zk-tabel th.n,.zk-tabel td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.zk-tabel td.neg{color:var(--slecht)}
.zk-tabel .zk-vink{width:2rem;padding-right:0}
.zk-tabel .zk-naam{min-width:15rem}
.zk-tabel .zk-naam a{font-weight:650;text-decoration:none}
.zk-tabel .zk-naam a:hover{text-decoration:underline}
/* Activiteit op één regel; de volledige tekst staat in de tooltip. */
.zk-akt{max-width:20rem}
.zk-akt-in{display:flex;align-items:baseline;gap:.4rem;min-width:0}
.zk-akt-tekst{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.zk-akt-code{flex:none;font-size:.75rem;color:var(--grijs);font-variant-numeric:tabular-nums}
.zk-sig{white-space:nowrap}
/* De naamkolom blijft staan bij opzij schuiven. */
.zk-tabel th.zk-naam,.zk-tabel td.zk-naam{position:sticky;left:0;z-index:2;background:var(--papier)}
.zk-tabel thead th.zk-naam{z-index:4;background:var(--vlak-2)}
.zk-tabel.links td.zk-naam,.zk-tabel.links th.zk-naam{box-shadow:6px 0 8px -6px rgba(16,26,36,.25)}
.zk-tabel tbody tr:hover td{background:var(--vlak-2)}
@media (max-width:680px){
  .zk-tabel table{min-width:0}
  .zk-tabel table:not(.sam):not(.jr) td{min-width:0}
  .zk-tabel td.zk-naam{min-width:12rem;max-width:15rem}
  .zk-tabel .zk-naam .dash-sub{white-space:normal}
  .zk-akt{min-width:12rem}
  .zk-tabel th.zk-naam,.zk-tabel td.zk-naam{position:static}
  .zk-rek{display:none}
  .uitklap-paneel{position:fixed;left:5vw;right:5vw;top:auto;width:auto;max-height:70vh;overflow:auto}
}

/* ---------- NACE-keuzelijst (patch199) ---------- */
.nace-veld{position:relative}
@media (min-width:900px){.nace-veld{grid-column:span 2}}
.nace-doos{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;min-height:var(--h-veld);padding:.25rem .4rem;border:1px solid var(--lijn);
  border-radius:var(--r-s);background:var(--papier);cursor:text}
.nace-doos:focus-within{border-color:var(--signaal);box-shadow:0 0 0 3px var(--signaal-l)}
.nace-chips{display:contents}
.nace-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%;background:var(--signaal-l);color:var(--signaal-d);border-radius:99px;
  padding:.1rem .15rem .1rem .6rem;font-size:.8rem;font-weight:600}
.nace-chip > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16rem}
.nace-chip button{border:0;background:transparent;color:inherit;min-height:0;width:22px;height:22px;padding:0;border-radius:50%;font-size:1rem;line-height:1;cursor:pointer}
.nace-chip button:hover{background:color-mix(in srgb,var(--signaal) 20%,transparent)}
input.nace-invoer{flex:1 1 8rem;min-width:8rem;border:0;box-shadow:none;min-height:32px;padding:0 .3rem;background:transparent}
input.nace-invoer:focus{outline:none;box-shadow:none}
.nace-lijst{position:absolute;left:0;right:0;top:100%;margin:.25rem 0 0;padding:.3rem;list-style:none;z-index:40;background:var(--papier);
  border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--lift-hoog);max-height:320px;overflow:auto;min-width:min(420px,90vw)}
.nace-lijst li{display:flex;gap:.6rem;padding:.45rem .55rem;border-radius:var(--r-s);cursor:pointer;font-size:.88rem;line-height:1.35}
.nace-lijst li[aria-selected=true],.nace-lijst li:hover{background:var(--signaal-l)}
.nace-lijst li.nace-leeg{cursor:default;color:var(--grijs)}
.nace-lijst li.nace-leeg:hover{background:transparent}
.nace-code{flex:none;min-width:3.6rem;font-weight:700;color:var(--signaal-d);font-variant-numeric:tabular-nums}

/* ---------- Prospectie: menu en tabbladen (patch200) ---------- */
.dropdown .menu-stappen{min-width:270px}
.dropdown .menu-stappen a{display:flex;gap:.65rem;align-items:flex-start;white-space:normal}
.dropdown .menu-stappen strong{display:block;font-weight:620}
.dropdown .menu-stappen small{display:block;font-size:.8rem;color:var(--grijs);line-height:1.35}
.menu-stap,.pr-nr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--signaal-l);color:var(--signaal-d);font-size:.75rem;font-weight:700}
.menu-stap{margin-top:.1rem}
.pr-kop h1{margin-bottom:.25rem}
.pr-uitleg{margin:0 0 .9rem}
.pr-tabs{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem}
.pr-tabs a{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem .5rem .6rem;border:1px solid var(--lijn);border-radius:99px;
  background:var(--papier);color:var(--inkt);text-decoration:none;font-weight:600;font-size:.94rem}
.pr-tabs a:hover{border-color:var(--signaal)}
.pr-tabs a[aria-current=page]{background:var(--signaal);border-color:var(--signaal);color:var(--knop-tekst)}
.pr-tabs a[aria-current=page] .pr-nr,.pr-tabs a[aria-current=page] .menu-stap{background:rgba(255,255,255,.22);color:inherit}
.pr-aantal{font-size:.75rem;font-weight:700;background:var(--vlak);color:var(--grijs);border-radius:99px;padding:0 .45rem}
.pr-tabs a[aria-current=page] .pr-aantal{background:rgba(255,255,255,.22);color:inherit}
.pr-pijl{color:var(--grijs)}
.pr-kruimel{font-size:.85rem;color:var(--grijs);margin-bottom:.3rem}
.pr-kruimel a{color:var(--grijs)}
.zk-bewaar-label{font-weight:600;font-size:.9rem;flex-basis:100%}

/* ---------- Kaart (patch202) ---------- */
body.kaartpagina main{max-width:none;padding:0}
body.kaartpagina footer{display:none}
.kp{position:relative;height:calc(100vh - var(--kop-h,56px));height:calc(100dvh - var(--kop-h,56px));min-height:420px;display:flex}
.kp-filter select{width:100%}
.kp-kaart{flex:1;min-width:0;height:100%}
.kp-paneel{width:340px;flex:none;background:var(--papier);border-right:1px solid var(--lijn);padding:1rem 1.1rem;overflow:auto;z-index:2}
.kp-paneel-kop{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.kp-paneel h1{font-size:1.3rem;margin:0}
.kp-inklap{display:none}
.kp-zoek{position:relative;margin:.9rem 0 .8rem}
.kp-zoekrij{display:flex;gap:.4rem}
.kp-zoekrij input{flex:1;min-width:0}
.kp-zoekrij button{flex:none}
.kp-zoeklijst{position:absolute;left:0;right:0;top:100%;margin:.25rem 0 0;padding:.3rem;list-style:none;z-index:40;background:var(--papier);
  border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--lift-hoog);max-height:320px;overflow:auto}
.kp-zoeklijst li{padding:.45rem .55rem;border-radius:var(--r-s);cursor:pointer}
.kp-zoeklijst li[aria-selected=true],.kp-zoeklijst li:hover{background:var(--signaal-l)}
.kp-zoeklijst strong{display:block;font-size:.9rem}
.kp-zoeklijst small{color:var(--grijs);font-size:.8rem}
.kp-zoeklijst .kp-zoek-leeg{cursor:default;color:var(--grijs)}
.kp-filter{display:grid;gap:.7rem}
.kp-stand{margin:1rem 0 .6rem;font-size:.9rem;font-weight:600}
.kp-bewaar[hidden]{display:none}
.kp-bewaar{display:grid;gap:.45rem;padding:.8rem;border:1px solid var(--lijn);border-radius:var(--r);background:var(--vlak-2)}
.kp-bewaar label{margin:0}
.kp-voet{font-size:.8rem;margin-top:1rem;line-height:1.45}
.kp-melding{position:absolute;left:calc(340px + 1rem);top:1rem;z-index:3;background:var(--papier);border:1px solid var(--rand-let);color:var(--inkt);
  border-radius:var(--r);padding:.55rem .8rem;font-size:.86rem;box-shadow:var(--lift);max-width:min(520px,60vw)}
.kp-melding-2{top:4.2rem}
.kp .maplibregl-popup-content{border-radius:12px;padding:.85rem .95rem;box-shadow:var(--lift-hoog);font:inherit;color:var(--inkt)}
.kp-pop-kop{display:flex;gap:.6rem;align-items:flex-start}
.kp-pop-naam a{font-weight:700;color:var(--signaal-d);text-decoration:none;margin-right:.3rem}
.kp-pop-sub{display:block;font-size:.8rem;color:var(--grijs);margin-top:.1rem}
.kp-pop-akt{font-size:.82rem;margin:.55rem 0 0;color:var(--inkt-2)}
.kp-pop-cijfers{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .8rem;margin:.6rem 0 0}
.kp-pop-cijfers dt{font-size:.72rem;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em}
.kp-pop-cijfers dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}
.kp-pop-noot{font-size:.76rem;color:var(--grijs);margin:.45rem 0 0}
.kp-pop-knop{margin-top:.7rem;width:100%}
.kp-pop-lijstkop{font-weight:700;margin:0 0 .4rem;font-size:.9rem}
.kp-pop-lijst{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto}
.kp-pop-lijst li + li{border-top:1px solid var(--lijn-fijn)}
.kp-pop-lijst button{display:block;width:100%;text-align:left;background:none;border:0;min-height:0;padding:.45rem .2rem;
  color:var(--signaal-d);font-weight:650;font-size:.88rem;cursor:pointer;border-radius:6px}
.kp-pop-lijst button:hover{background:var(--signaal-l)}
.kp-pop-terug{background:none;border:0;min-height:0;padding:0 0 .5rem;color:var(--grijs);font-size:.8rem;font-weight:600;cursor:pointer}
.kp-pop-terug:hover{color:var(--signaal-d)}
@media (max-width:700px){
  .kp{flex-direction:column}
  .kp-paneel{width:auto;border-right:0;border-bottom:1px solid var(--lijn);max-height:55vh;padding:.7rem .9rem}
  .kp-inklap{display:inline-flex}
  .kp-melding{left:.6rem;right:.6rem;top:auto;bottom:2.4rem;max-width:none}
  .kp-melding-2{bottom:5.8rem}
}

/* Logo dat na het laden van de fiche binnenkomt (patch204): zacht invloeien. */
.logo-live{display:inline-flex;vertical-align:middle}
.logo-nieuw{animation:logo-in .35s ease-out}
@keyframes logo-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.logo-nieuw{animation:none}}

.kp-lijst{display:grid;gap:.2rem;margin:.6rem 0 0;padding:.6rem .7rem;border-radius:var(--r);background:var(--signaal-l);font-size:.88rem}
.kp-lijst-links{font-size:.82rem}

/* ---------- Inzicht in een lijst (patch205) ---------- */
.iz-tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--lijn);margin:-.4rem 0 1rem;flex-wrap:wrap}
.iz-tabs a{padding:.55rem .9rem;text-decoration:none;color:var(--grijs);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.iz-tabs a:hover{color:var(--inkt)}
.iz-tabs a[aria-current=page]{color:var(--signaal-d);border-bottom-color:var(--signaal)}
.iz-samenvatting{margin:0 0 1rem;color:var(--grijs)}
.iz-samenvatting strong{color:var(--inkt)}
.iz-kop{margin-top:1.4rem}
.iz-rooster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:1rem}
.iz-blok h3{margin:0 0 .7rem;font-size:1rem}
.iz-staven{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.iz-staven li{display:grid;grid-template-columns:minmax(7rem,12rem) 1fr auto;gap:.6rem;align-items:center;font-size:.86rem}
.iz-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iz-baan{height:12px;background:var(--lijn-fijn);border-radius:4px;overflow:hidden}
.iz-staaf{display:block;height:100%;background:var(--signaal);border-radius:0 4px 4px 0;min-width:2px}
.iz-overig .iz-staaf{background:var(--stip-stil)}
.iz-waarde{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap;text-align:right;min-width:6.5rem}
.iz-waarde small{font-weight:500;color:var(--grijs);margin-left:.4rem}
.iz-noot{font-size:.8rem;color:var(--grijs);margin:.6rem 0 0}
.iz-keuzes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:.7rem;align-items:end}
.iz-schaal{display:grid;gap:0}
.iz-schaal-kop{font-size:.8rem;color:var(--grijs);font-weight:500}
.iz-schaal .vink{min-height:26px;font-size:.84rem}
.iz-legende{display:flex;gap:1rem;flex-wrap:wrap;margin:.9rem 0 .3rem;font-size:.84rem;min-height:1.2rem}
.iz-leg{display:inline-flex;align-items:center;gap:.35rem}
.iz-leg i{width:10px;height:10px;border-radius:50%;display:inline-block}
.iz-plot{position:relative;width:100%}
.iz-plot svg{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}
.iz-as text{font-size:11px;fill:var(--grijs);font-variant-numeric:tabular-nums}
.iz-as .iz-astitel{font-size:12px;fill:var(--inkt);font-weight:600}
.iz-raster{stroke:var(--lijn-fijn);stroke-width:1}
.iz-nul{stroke:var(--lijn);stroke-width:1.5}
.iz-punt{stroke:var(--papier);stroke-width:1.5;fill-opacity:.85}
.iz-punt.gekozen{stroke:var(--inkt);stroke-width:2.5;fill-opacity:1}
.iz-kader{fill:color-mix(in srgb,var(--signaal) 12%,transparent);stroke:var(--signaal);stroke-dasharray:4 3}
.iz-leeg{fill:var(--grijs);font-size:14px}
.iz-tip{position:absolute;z-index:5;pointer-events:none;background:var(--papier);border:1px solid var(--lijn);border-radius:8px;
  box-shadow:var(--lift-hoog);padding:.5rem .65rem;font-size:.82rem;display:grid;gap:.1rem;max-width:220px}
.iz-tip small{color:var(--grijs)}
.iz-bewaar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.8rem;padding:.7rem;border:1px solid var(--lijn);border-radius:var(--r);background:var(--vlak-2)}
.iz-bewaar select,.iz-bewaar input[type=text]{width:auto;max-width:240px}
@media (max-width:600px){.iz-staven li{grid-template-columns:minmax(5rem,8rem) 1fr auto}}

/* Het hidden-attribuut wint altijd van een display-regel in een klasse (patch205). Zonder dit
   bleven blokken met hidden toch zichtbaar zodra hun klasse display:flex of grid zette. */
[hidden]{display:none!important}

/* patch206: stopgezette onderneming (geschrapt uit de KBO) */
.stopbalk{background:var(--slecht-l);color:var(--slecht);border-left:4px solid var(--slecht);border-radius:8px;padding:.7rem .9rem;margin:.4rem 0 .9rem;font-size:.92rem;line-height:1.5}
.stopbalk a{color:inherit;text-decoration:underline}

/* ---------- patch207: gezondheidsbalk ---------- */
.meter{--m1:var(--slecht);--m2:color-mix(in srgb,var(--slecht) 55%,var(--let-op));--m3:var(--let-op);
  --m4:color-mix(in srgb,var(--goed) 60%,var(--let-op));--m5:var(--goed);--mz:var(--m3);
  flex:none;width:250px;margin:0}
.meter-m1{--mz:var(--m1)}.meter-m2{--mz:var(--m2)}.meter-m4{--mz:var(--m4)}.meter-m5{--mz:var(--m5)}
.meter-kop{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.3rem}
.meter-cijfer{font-size:2rem;font-weight:700;line-height:1;color:var(--mz);font-variant-numeric:tabular-nums}
.meter-klasse{font-weight:600;font-size:var(--maat-2)}
.meter svg{display:block;width:100%;height:auto;overflow:visible}
.meter-zone{opacity:.3}
.meter-zone.actief{opacity:1}
.meter-zone.m1{fill:var(--m1)}.meter-zone.m2{fill:var(--m2)}.meter-zone.m3{fill:var(--m3)}
.meter-zone.m4{fill:var(--m4)}.meter-zone.m5{fill:var(--m5)}
.meter-lijn{fill:none;stroke:var(--inkt-2);stroke-width:1.4;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0;animation:meter-teken .9s ease-out both}
.meter-peil{stroke:var(--mz);stroke-width:2}
.meter-stip circle{fill:var(--papier);stroke:var(--inkt-2);stroke-width:1.4}
.meter-stip text{font-size:10px;fill:var(--grijs);font-variant-numeric:tabular-nums}
.meter-stip.nu circle{fill:var(--mz);stroke:var(--papier);stroke-width:2}
.meter-stip.nu text{font-weight:700;fill:var(--inkt)}
.meter-stip{animation:meter-stip .35s ease-out both}
.meter-schaal{font-size:10px;fill:var(--grijs)}
@keyframes meter-teken{from{stroke-dashoffset:1}}
@keyframes meter-stip{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.meter-lijn,.meter-stip{animation:none}}
.meter-trend{font-size:.8rem;color:var(--grijs);margin-top:.15rem;font-variant-numeric:tabular-nums}
.meter-trend.op{color:var(--goed)}.meter-trend.neer{color:var(--slecht)}
.oordeel-faal{margin:.55rem 0 0;font-size:.85rem}
.onderbouwing-kop{margin:.8rem 0 .35rem}
@media (max-width:560px){.oordeel{flex-direction:column;align-items:center}.oordeel-tekst{width:100%}}

/* ---------- patch207: gezondheidsmatrix ---------- */
.mx-vlak{stroke:none;opacity:.55}
.mx-vlak.actief{opacity:1}
.mx-sterk{fill:var(--goed-l)}.mx-dun,.mx-buffer{fill:var(--let-op-l)}.mx-kwetsbaar{fill:color-mix(in srgb,var(--slecht-l) 60%,var(--let-op-l))}
.mx-neg{fill:var(--slecht-l)}
.mx-grens{stroke:var(--inkt-2);stroke-width:1;stroke-dasharray:4 4;opacity:.55}
.mx-as{stroke:var(--lijn);stroke-width:1}
.mx-tick{font-size:10px;fill:var(--grijs)}
.mx-vaklabel{font-size:11px;font-weight:600;fill:var(--inkt-2);opacity:.85}
.mx-astitel{font-size:11px;fill:var(--grijs)}
.mx-pad{fill:none;stroke:var(--inkt-2);stroke-width:1.5;stroke-dasharray:3 3;opacity:.7}
.mx-jaar circle{fill:var(--papier);stroke:var(--inkt-2);stroke-width:1.5}
.mx-jaar text{font-size:10px;fill:var(--grijs)}
.mx-jaar.nu circle{fill:var(--signaal);stroke:var(--papier);stroke-width:2}
.mx-jaar.nu text{font-weight:700;fill:var(--inkt)}
.mx-fiche{margin:0 0 1rem}
.mx-fiche .mx-svg{display:block;width:100%;max-width:620px;height:auto}
.mx-oordeel{margin:.2rem 0 .6rem;line-height:1.5}
.mx-vakje{display:inline-block;width:.8rem;height:.8rem;border-radius:3px;margin-right:.4rem;vertical-align:-1px}
.mx-vakje.mx-sterk{background:var(--goed)}.mx-vakje.mx-dun,.mx-vakje.mx-buffer{background:var(--let-op)}
.mx-vakje.mx-kwetsbaar{background:color-mix(in srgb,var(--slecht) 60%,var(--let-op))}.mx-vakje.mx-neg{background:var(--slecht)}
.mx-noot{font-size:.8rem;margin:.4rem 0 0}
/* lijst (Inzicht) */
.mx-lijst .mx-plot{position:relative}
.mx-lijst svg{display:block;width:100%;height:auto;user-select:none}
.mx-punt{fill:var(--signaal);fill-opacity:.55;stroke:var(--papier);stroke-width:1;cursor:pointer}
.mx-punt.slechter{fill:var(--slecht);fill-opacity:.85}
.mx-punt.gedimd{fill-opacity:.12;stroke-opacity:.2}
.mx-punt:hover{fill-opacity:1;stroke:var(--inkt)}
.mx-spoor{fill:none;stroke:var(--inkt-2);stroke-width:1;opacity:.35}
.mx-spoor.slechter{stroke:var(--slecht);opacity:.7}
.mx-vakken{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:.5rem;margin:.8rem 0}
.mx-vakknop{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;padding:.55rem .7rem;
  border:1px solid var(--lijn);border-radius:var(--r);background:var(--vlak-2);color:var(--inkt);cursor:pointer;font:inherit;height:auto}
.mx-vakknop strong{font-size:1.15rem;font-variant-numeric:tabular-nums}
.mx-vakknop small{color:var(--grijs);line-height:1.3}
.mx-vakknop[aria-pressed="true"]{border-color:var(--inkt);box-shadow:inset 0 0 0 1px var(--inkt)}
.mx-keuzes{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;margin:.3rem 0 .6rem}
.mx-uitleg{margin:.2rem 0 .6rem}
.mx-namen{columns:2 260px;padding-left:1.1rem;margin:.4rem 0}

/* patch208: melding "bestuur kan gewijzigd zijn" */
.melding.let-op{background:var(--let-op-l);color:var(--inkt);border-color:var(--rand-let)}
.melding.let-op::before{background:var(--let-op);opacity:1}
.bestuur-nieuw a{color:inherit;text-decoration:underline}

/* ---------- patch208: gebruik per organisatie ---------- */
.gb-samen{margin:.2rem 0 .8rem}
.gb-kop{font-size:.95rem;margin:0 0 .6rem}
.gb-dagen{display:block;max-width:100%;height:auto}
.gb-uren{display:block;width:100%;height:auto;max-width:560px}
.gb-as{font-size:9px;fill:var(--grijs)}
.gb-n0{fill:var(--lijn-fijn)}.gb-n1{fill:color-mix(in srgb,var(--signaal) 30%,var(--papier))}
.gb-n2{fill:color-mix(in srgb,var(--signaal) 55%,var(--papier))}.gb-n3{fill:color-mix(in srgb,var(--signaal) 78%,var(--papier))}
.gb-n4{fill:var(--signaal)}
.gb-legende{font-size:.78rem;display:flex;align-items:center;gap:3px;margin:.4rem 0 0}
.gb-blok{display:inline-block;width:10px;height:10px;border-radius:2px}
.gb-blok.gb-n0{background:var(--lijn-fijn)}.gb-blok.gb-n1{background:color-mix(in srgb,var(--signaal) 30%,var(--papier))}
.gb-blok.gb-n2{background:color-mix(in srgb,var(--signaal) 55%,var(--papier))}.gb-blok.gb-n3{background:color-mix(in srgb,var(--signaal) 78%,var(--papier))}
.gb-blok.gb-n4{background:var(--signaal)}
.gb-functies{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.gb-functies li{display:grid;grid-template-columns:8.5rem 1fr 9.5rem;align-items:center;gap:.6rem}
.gb-baan{height:10px;background:var(--lijn-fijn);border-radius:5px;overflow:hidden}
.gb-staaf{display:block;height:100%;background:var(--signaal);border-radius:5px}
.gb-fwaarde{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.gb-fwaarde small{display:block;font-weight:400;color:var(--grijs);font-size:.75rem}
@media (max-width:560px){.gb-functies li{grid-template-columns:6.5rem 1fr 6.5rem}}

/* ============================================================================================
   patch209 — huisstijl "kobalt"
   Kobaltblauw vlak, citroengeel als accent (spaarzaam: de knop die verder helpt, "nieuw", de
   cirkel in het logo), Schibsted Grotesk. Dit blok staat bewust achteraan: het legt de nieuwe
   vormen over de bestaande bouwstenen zonder elke regel hierboven te herschrijven.
   ============================================================================================ */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

body{font-family:var(--lettertype);background:var(--vlak);color:var(--inkt)}
h1{font-weight:900;letter-spacing:-.04em}
h2,h3{font-weight:800;letter-spacing:-.025em}
a{color:var(--signaal)}

/* ---- kop: één vlak kobalt ---- */
header{background:var(--chroom-boven);box-shadow:none;min-height:60px}
/* patch316: hogere kop, groter beeldmerk, de slagzin onder de naam */
header{min-height:74px}
header .merk{font-weight:900;font-size:1.6rem;letter-spacing:-.045em;gap:.6rem}
header .merk svg{width:46px;height:46px}
header .merk-tekst{display:flex;flex-direction:column;line-height:1.05}
header .merk-slagzin{color:rgba(255,255,255,.8);font-size:.74rem;font-weight:500;letter-spacing:-.005em;white-space:nowrap;margin-top:.22rem}
@media (max-width:680px){header .merk-slagzin{display:none}header .merk svg{width:30px;height:30px}header .merk{font-size:1.2rem}}
.dropdown summary{color:rgba(255,255,255,.9);border-radius:999px;font-weight:600}
.dropdown[open] summary,.dropdown summary:hover{background:rgba(255,255,255,.16);color:#fff}
.dropdown div{border-radius:var(--r);border-color:var(--lijn-fijn)}
.dropdown div a{border-radius:var(--r-s)}
header .zoekbalk input{background-color:rgba(255,255,255,.16);border-color:transparent;color:#fff}
header .zoekbalk input::placeholder{color:rgba(255,255,255,.78)}
header .zoekbalk input:focus{background-color:#fff;color:var(--inkt);border-color:#fff}
header .zoekbalk > a,header .account{color:rgba(255,255,255,.85)}
header .zoekbalk > a:hover,header .account:hover{color:#fff}
header .afmelden button{color:#fff;border-color:rgba(255,255,255,.4);border-radius:999px;background:transparent}
.kop-formule{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:#fff;
  background:rgba(255,255,255,.16);padding:.25rem .7rem;border-radius:999px;white-space:nowrap;text-decoration:none}
.kop-upgrade{background:var(--accent);color:var(--accent-inkt);font-weight:800;font-size:.82rem;padding:.38rem .85rem;
  border-radius:999px;text-decoration:none;white-space:nowrap}
.kop-upgrade:hover{background:var(--accent-d);color:var(--accent-inkt)}
.weergave-schakel{display:inline-flex;background:rgba(255,255,255,.16);border-radius:999px;padding:3px;margin:0}
.weergave-schakel button{background:transparent;color:#fff;border:0;min-height:30px;padding:.2rem .7rem;font-size:.8rem;font-weight:600;border-radius:999px}
.weergave-schakel button[aria-pressed="true"]{background:#fff;color:var(--inkt);font-weight:800}
/* patch271: de weergaveschakelaar staat in Mijn account, op elke schermbreedte. */

/* ---- knoppen en bouwstenen ---- */
button,.knop{border-radius:999px;font-weight:700;padding:.55rem 1.2rem}
button.licht,.knop.licht{border-color:var(--lijn);color:var(--signaal)}
button.accent,.knop.accent{background:var(--accent);color:var(--accent-inkt);font-weight:800}
button.accent:hover,.knop.accent:hover{background:var(--accent-d);color:var(--accent-inkt)}
.kaart{border-color:var(--lijn-fijn);border-radius:var(--r)}
.melding{border-radius:var(--r-s)}
.tag{font-weight:700}
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{border-radius:var(--r-s)}
.tabelwrap{border-radius:var(--r)}
.nieuw-merk{display:inline-block;background:var(--accent);color:var(--accent-inkt);font-weight:800;border-radius:999px;padding:.05rem .55rem;font-size:.78rem}

/* fichebalk: kobalt in plaats van inkt, de actieve tab wit */
.fichebalk{background:var(--signaal);box-shadow:0 8px 22px -10px rgba(31,59,255,.55)}
.fichebalk .tab{color:rgba(255,255,255,.85)}
.fichebalk .tab:hover{background:rgba(255,255,255,.14)}
.fichebalk .tab.actief{background:#fff;color:var(--signaal)}
.fb-acties .knop{border-radius:999px;border-color:rgba(255,255,255,.4)}
.fb-acties .knop.fb-primair{color:var(--signaal)}
.fb-acties .knop.fb-aan{background:rgba(255,208,0,.25);border-color:var(--accent)}

/* ---- het oordeel (één blok per bedrijf) ---- */
.oordeel{display:block;background:var(--papier);border:0;border-left:0;border-radius:var(--r);padding:0;overflow:hidden;
  margin:1rem 0;box-shadow:0 0 0 1px var(--lijn-fijn)}
.oordeel-kop{display:flex;gap:.9rem;align-items:center;padding:1rem 1.25rem}
.oordeel-stip{width:1.5rem;height:1.5rem;border-radius:50%;flex:none}
.oordeel-vraag{display:block;font-size:.88rem;font-weight:700}
.oordeel-label{display:block;font-size:1.75rem;font-weight:900;letter-spacing:-.035em;line-height:1.1}
.oordeel-groen .oordeel-kop{background:var(--goed-l)}.oordeel-groen .oordeel-stip{background:var(--goed)}.oordeel-groen .oordeel-vraag,.oordeel-groen .oordeel-label{color:var(--goed)}
.oordeel-oranje .oordeel-kop{background:var(--let-op-l)}.oordeel-oranje .oordeel-stip{background:var(--let-op-stip)}.oordeel-oranje .oordeel-vraag,.oordeel-oranje .oordeel-label{color:var(--let-op)}
.oordeel-rood .oordeel-kop{background:var(--slecht-l)}.oordeel-rood .oordeel-stip{background:var(--slecht)}.oordeel-rood .oordeel-vraag,.oordeel-rood .oordeel-label{color:var(--slecht)}
/* patch265: stopgezet — afgesloten, geen nood: effen leigrijs */
.oordeel-stop{border-left-color:#4A5580}
.oordeel-stop .oordeel-kop{background:#E8EAF2}.oordeel-stop .oordeel-stip{background:#4A5580}.oordeel-stop .oordeel-vraag,.oordeel-stop .oordeel-label{color:#2E3756}
.oordeel-grijs .oordeel-kop{background:var(--onbekend-l)}.oordeel-grijs .oordeel-stip{border:3px dashed var(--onbekend);box-sizing:border-box}.oordeel-grijs .oordeel-vraag,.oordeel-grijs .oordeel-label{color:var(--grijs)}
.oordeel-redenen{margin:1rem 1.25rem 0;padding-left:1.2rem;font-size:1rem;line-height:1.65}
.oordeel-meter{padding:.6rem 1.25rem 0}
/* patch280: één zin onder het oordeel; de meter staat nu in de onderbouwing */
.oordeel-kern{margin:.9rem 1.25rem 0;font-size:1.08rem;font-weight:600;line-height:1.45}
.oordeel-kern+.oordeel-redenen{margin-top:.4rem}
.onderbouwing .oordeel-meter{padding:.6rem 0 .2rem}
.oordeel .oordeel-zin{padding:0 1.25rem;margin:.7rem 0 0;max-width:none}
.oordeel .samenvatting-mager{padding:0 1.25rem}
.oordeel-voet{padding:.8rem 1.25rem 1rem;margin:0;font-size:.85rem}
@media (max-width:560px){.oordeel{flex-direction:column}.oordeel-label{font-size:1.45rem}}

/* het oordeel in lijsten */
.oordeel-chip{display:inline-flex;gap:.4rem;align-items:center;padding:.22rem .72rem;border-radius:999px;font-weight:700;font-size:.82rem;white-space:nowrap}
.oc-stip{width:.62rem;height:.62rem;border-radius:50%;flex:none;box-sizing:border-box}
.oc-groen{background:var(--goed-l);color:var(--goed)}.oc-groen .oc-stip{background:var(--goed)}
.oc-oranje{background:var(--let-op-l);color:var(--let-op)}.oc-oranje .oc-stip{background:var(--let-op-stip)}
.oc-rood{background:var(--slecht-l);color:var(--slecht)}.oc-rood .oc-stip{background:var(--slecht)}
.oc-grijs{background:var(--onbekend-l);color:var(--grijs)}.oc-grijs .oc-stip{border:2px dashed var(--onbekend)}
.oc-stop{background:#E8EAF2;color:#2E3756}.oc-stop .oc-stip{background:#4A5580}

/* ---- weergave: eenvoudig of uitgebreid ---- */
[data-weergave="uitgebreid"] .alleen-eenvoudig{display:none!important}
[data-weergave="eenvoudig"] .alleen-uitgebreid{display:none!important}
[data-weergave="eenvoudig"] .fiche-details:not(.open){display:none}
.details-knop{margin:.4rem 0 1.2rem;background:var(--papier);color:var(--signaal);border:2px solid var(--signaal);min-height:50px;padding:.6rem 1.4rem;font-weight:800}
.details-knop:hover{background:var(--signaal-l);color:var(--signaal)}

/* ---- Gratis: dichte fiche en prospectie zonder namen ---- */
.gesloten{display:grid;border-radius:var(--r);overflow:hidden;margin:1rem 0;background:var(--papier);box-shadow:0 0 0 1px var(--lijn-fijn)}
.gesloten>*{grid-area:1/1}
.gesloten-wazig{filter:blur(7px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:1.4rem;pointer-events:none;user-select:none}
.gw-blok{background:var(--vlak);border-radius:var(--r-s);padding:1rem;min-height:140px}
.gw-staven{display:flex;align-items:flex-end;gap:.6rem;height:70px;margin-top:.8rem}
.gw-staven span{width:26px;background:var(--signaal);border-radius:8px}
.gw-staven .gw-accent{background:var(--accent)}
.gw-lijn{height:12px;background:var(--stip-stil);border-radius:6px;margin-top:.7rem}
.gw-bollen{display:flex;gap:.7rem;margin-top:1rem}
.gw-bollen span{width:40px;height:40px;border-radius:50%;background:var(--stip-stil)}
.gw-bollen span:first-child{background:var(--signaal)}
.gesloten-vraag{align-self:center;justify-self:center;margin:1.2rem;max-width:500px;background:var(--inkt);color:#fff;
  border-radius:var(--r);padding:1.6rem 1.7rem;box-shadow:var(--lift-hoog);position:relative}
.gesloten-vraag h2{color:#fff;margin:0 0 .5rem;font-size:1.45rem;line-height:1.15}
.gesloten-vraag p{color:#C9D0F5;margin:0}
.gesloten-vraag .muted{color:#A3ACD6}
.gesloten-knoppen{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.gesloten-knoppen form{margin:0}
.gesloten-vraag .knop.licht{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
@media (max-width:620px){.gesloten-wazig{grid-template-columns:minmax(0,1fr)}}
.teaser{text-align:center;padding:2.2rem 1.5rem}
.teaser-getal{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:900;letter-spacing:-.05em;color:var(--signaal);line-height:1}
.teaser p{max-width:36rem;margin:.7rem auto 1.1rem;font-size:1.05rem}
.teaser-wazig{filter:blur(5px);max-width:420px;margin:0 auto 1.3rem;display:flex;flex-direction:column;gap:.55rem;align-items:center}
.teaser-wazig span{height:12px;background:var(--stip-stil);border-radius:6px;display:block}
.lijsten > .kaart{margin:0}
/* patch209: Schibsted zet in "tabular-nums" ook punten en komma's op cijferbreedte, wat lopende
   tekst in tabellen uit elkaar trekt. Tabelcellen met tekst krijgen gewone cijfers; kolommen met
   bedragen en ratio's blijven uitgelijnd. */
td,th{font-variant-numeric:lining-nums}
.jr td,.jr th,td[style*="right"],th[style*="right"],td.n,th.n,td.getal,.dash td,.sam td,.gb-fwaarde{font-variant-numeric:tabular-nums lining-nums}
/* patch210: betaalperiode kiezen zonder JavaScript */
.periode-keuze{position:absolute;opacity:0;pointer-events:none}
.periode-schakel{display:inline-flex;background:var(--papier);border:1px solid var(--lijn);border-radius:999px;padding:4px;margin:0 0 1rem}
.periode-schakel label{cursor:pointer;padding:.45rem 1rem;border-radius:999px;font-weight:700;font-size:.92rem;color:var(--grijs)}
#periode-maand:checked ~ .periode-schakel label[for="periode-maand"],
#periode-jaar:checked ~ .periode-schakel label[for="periode-jaar"]{background:var(--signaal);color:#fff}
#periode-jaar:focus-visible ~ .periode-schakel label[for="periode-jaar"],
#periode-maand:focus-visible ~ .periode-schakel label[for="periode-maand"]{outline:2px solid var(--signaal);outline-offset:2px}
.periode-voordeel{display:inline-block;background:var(--accent);color:var(--accent-inkt);border-radius:999px;padding:.05rem .5rem;font-size:.72rem;margin-left:.3rem}
#periode-maand:checked ~ .periode-prijzen .prijs-jaar{display:none}
#periode-jaar:checked ~ .periode-prijzen .prijs-maand{display:none}
/* patch210: zoeken zonder account */
.pz{max-width:760px;margin:2rem auto 3rem}
.pz h1{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.04em;margin-bottom:1rem}
.pz-zoek{display:flex;gap:.5rem;background:var(--papier);border:2px solid var(--signaal);border-radius:999px;padding:6px;margin-bottom:1.4rem}
.pz-zoek input{flex:1 1 auto;border:0!important;box-shadow:none!important;min-height:0;background:transparent;font-size:1.05rem;padding:.5rem .9rem;min-width:0}
.pz-zoek input:focus{outline:none}
.pz-zoek button{border-radius:999px;background:var(--accent);color:var(--accent-inkt);font-weight:800;padding:.55rem 1.3rem;border:0}
.pz-lijst{list-style:none;margin:0 0 1.4rem;padding:0;border:1px solid var(--lijn);border-radius:var(--r);background:var(--papier);overflow:hidden}
.pz-lijst li{display:flex;align-items:center;gap:1rem;padding:.8rem 1.1rem;border-top:1px solid var(--lijn-fijn)}
.pz-lijst li:first-child{border-top:0}
.pz-lijst a{flex:1 1 auto;text-decoration:none;color:inherit;min-width:0}
.pz-naam{display:block;font-weight:800;color:var(--inkt)}
.pz-lijst a:hover .pz-naam{color:var(--signaal);text-decoration:underline}
.pz-sub{display:block;font-size:.86rem;color:var(--grijs)}
.pz-oordeel{flex:none;display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;color:var(--grijs);background:var(--vlak);border-radius:999px;padding:.25rem .7rem}
.pz-stip{width:.7rem;height:.7rem;border-radius:50%;background:conic-gradient(var(--goed) 0 33%,var(--let-op-stip) 0 66%,var(--slecht) 0);filter:blur(1.5px)}
.pz-lokaas{border-color:var(--signaal);background:var(--vlak-2)}
.pz-lokaas h2{font-size:1.15rem;margin-top:0}
@media (max-width:560px){.pz-oordeel{display:none}}
/* homepage: het zoekveld in het kobaltvlak */
.lp-zoek{display:flex;gap:.4rem;background:#fff;border-radius:999px;padding:6px;max-width:34rem;margin:0 0 1.1rem;box-shadow:0 10px 30px rgba(14,26,79,.25)}
.lp-zoek input{flex:1 1 auto;border:0!important;box-shadow:none!important;min-height:0;background:transparent;font:inherit;font-size:1.05rem;padding:.55rem 1rem;min-width:0;color:#0E1A4F}
.lp-zoek input:focus{outline:none}
.lp-zoek button{border:0;border-radius:999px;background:#FFD000;color:#0E1A4F;font-weight:800;font-size:1rem;padding:.6rem 1.3rem;cursor:pointer}
.lp-zoek-hulp{font-size:.92rem;color:#E3E7FF;margin:0 0 1.6rem}
/* homepage: maand of jaar */
.lp-periode-keuze{position:absolute;opacity:0;pointer-events:none}
.lp-periode{display:flex;justify-content:center;margin:0 0 1.6rem}
.lp-periode div{display:inline-flex;background:#fff;border:1px solid #DCE1F2;border-radius:999px;padding:4px}
.lp-periode label{cursor:pointer;padding:.5rem 1.2rem;border-radius:999px;font-weight:700;color:#4A5580}
#lp-maand:checked ~ .lp-periode label[for="lp-maand"],#lp-jaar:checked ~ .lp-periode label[for="lp-jaar"]{background:#1F3BFF;color:#fff}
#lp-maand:focus-visible ~ .lp-periode label[for="lp-maand"],#lp-jaar:focus-visible ~ .lp-periode label[for="lp-jaar"]{outline:3px solid #FFD000;outline-offset:2px}
.lp-periode .periode-voordeel{display:inline-block;background:#FFD000;color:#0E1A4F;border-radius:999px;padding:.05rem .5rem;font-size:.72rem;margin-left:.35rem}
#lp-maand:checked ~ .lp-formules .lp-jaarprijs{display:none}
#lp-jaar:checked ~ .lp-formules .lp-maandprijs{display:none}
.lp-bedrag small{display:block;width:100%;font-size:.85rem;color:inherit;opacity:.8;margin-top:.2rem}
/* homepage: wat je extra krijgt */
.lp-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:1rem;margin-top:1.6rem}
.lp-extra div{background:#F3F5FF;border-radius:20px;padding:1.2rem 1.3rem}
.lp-extra b{display:block;font-size:1.05rem;margin-bottom:.3rem;color:#0E1A4F}
.lp-extra span{color:#2F3A6B;line-height:1.5}
/* patch211: Scope-acties */
.kop-tegoed{background:var(--accent);color:var(--accent-inkt)!important;font-weight:800;font-size:.8rem;border-radius:999px;padding:.3rem .8rem;text-decoration:none;white-space:nowrap}
.kop-tegoed:hover{filter:brightness(.95)}
.sa{max-width:760px;margin:2rem auto}
.sa-vraag{display:flex;gap:1.2rem;align-items:flex-start;border-color:var(--signaal)}
.sa-vraag h1{font-size:1.6rem;margin:0 0 .4rem}
.sa-teller{flex:none;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--accent);color:var(--accent-inkt);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.5rem}
.tegoedbalk{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;background:var(--accent);color:var(--accent-inkt);border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:1rem}
.tegoedbalk strong{font-size:1.05rem}
.tegoedbalk .knop{background:var(--inkt);color:#fff;border-color:var(--inkt)}
@media (max-width:860px){.kop-tegoed{display:none}}
/* patch212: bekijk als formule */
.voorbeeldbalk{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;background:var(--inkt);color:#fff;padding:.55rem max(1.1rem,calc((100vw - 1248px)/2));font-size:.92rem;position:sticky;top:0;z-index:50}
.voorbeeldbalk span{flex:1 1 20rem}
.voorbeeldbalk strong{color:var(--accent)}
.voorbeeldbalk-wissel{display:flex;gap:.4rem;margin:0;align-items:center}
.voorbeeldbalk select{min-height:32px;padding:.2rem .6rem;border-radius:999px;border:0;font:inherit;font-size:.86rem}
.voorbeeldbalk button{background:var(--accent);color:var(--accent-inkt);border:0;min-height:32px}
/* patch214: publieke kerncijfers */
.pb-kern td,.pb-kern th{font-variant-numeric:tabular-nums lining-nums}
.pb-feiten{margin:.8rem 0 1.2rem;padding-left:1.1rem}
.pb-feiten li{margin:.25rem 0}
/* patch216: menu-onderdelen die een andere formule vragen */
.menu-upg{display:inline-block;margin-left:.4rem;padding:.05rem .45rem;border-radius:999px;background:var(--accent);color:var(--accent-inkt);font-size:.68rem;font-weight:800;vertical-align:middle;letter-spacing:.01em}
/* patch219: oordeel ingeklapt buiten Overzicht */
.oordeel-kort{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;margin:.6rem 0 0;padding:.6rem .9rem;border-radius:var(--r);border:1px solid var(--lijn);background:var(--papier);color:var(--inkt);font:inherit;font-size:.95rem;cursor:pointer;box-shadow:none}
.oordeel-kort[hidden]{display:none}
.oordeel-kort .oordeel-stip{width:1rem;height:1rem}
.oordeel-kort span:nth-child(2){flex:1 1 auto}
.oordeel-kort-toon{font-size:.85rem;font-weight:700;color:var(--signaal);white-space:nowrap}
.oordeel-kort-groen{background:var(--goed-l)}.oordeel-kort-groen .oordeel-stip{background:var(--goed)}
.oordeel-kort-oranje{background:var(--let-op-l)}.oordeel-kort-oranje .oordeel-stip{background:var(--let-op-stip)}
.oordeel-kort-rood{background:var(--slecht-l)}.oordeel-kort-rood .oordeel-stip{background:var(--slecht)}
.oordeel-kort-stop{background:#E8EAF2}.oordeel-kort-stop .oordeel-stip{background:#4A5580}
.oordeel-kort-grijs{background:var(--onbekend-l)}.oordeel-kort-grijs .oordeel-stip{border:2px dashed var(--onbekend);box-sizing:border-box}
.oordeel-kort:hover{border-color:var(--signaal)}
/* patch219: tabbalk op gsm — tabs eerst, en duidelijk dat er rechts nog meer staat */
.tabs-meer{display:none}
@media (max-width:760px){
  .fichebalk{gap:.35rem}
  .fichebalk .tabs{order:1}
  .fb-acties{order:2;justify-content:flex-start;padding-top:.35rem;border-top:1px solid rgba(255,255,255,.22)}
  .fb-acties .knop .fb-tekst{display:inline}
  .fb-acties .knop{padding:.4rem .65rem;font-size:.8rem}
  .fichebalk.meer-rechts .tabs{-webkit-mask-image:linear-gradient(to right,#000 78%,transparent);mask-image:linear-gradient(to right,#000 78%,transparent)}
  .fichebalk.meer-rechts .tabs-meer{display:flex}
  .tabs-meer{position:absolute;right:.4rem;top:.4rem;height:2.3rem;width:2.3rem;align-items:center;justify-content:center;border-radius:999px;border:0;padding:0;background:#fff;color:var(--signaal);font-size:1.3rem;font-weight:800;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer;z-index:2}
}
@media (max-width:420px){.fb-acties .knop:not(.fb-primair) .fb-tekst{display:none}}
/* patch219: dashboard — regio en trending */
.dh-regio{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.dh-regio h3{font-size:.95rem;margin:0 0 .5rem;display:flex;gap:.5rem;align-items:baseline}
.dh-lijst{list-style:none;margin:0;padding:0}
.dh-lijst li{padding:.45rem 0;border-bottom:1px solid var(--lijn-fijn)}
.dh-lijst li:last-child{border-bottom:0}
.dh-lijst a{font-weight:600}
.dh-lijst span{display:block;font-size:.8rem;color:var(--grijs);margin-top:.1rem}
.dh-trend{counter-reset:tr}
.dh-trend li{counter-increment:tr;padding-left:1.8rem;position:relative}
.dh-trend li::before{content:counter(tr);position:absolute;left:0;top:.5rem;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--accent);color:var(--accent-inkt);font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center}
@media (max-width:680px){.dh-regio{grid-template-columns:1fr}}
/* patch219: rondleiding */
.rl-laag{position:fixed;inset:0;z-index:900;background:transparent}
.rl-spot{position:absolute;z-index:901;border-radius:14px;box-shadow:0 0 0 4px var(--accent),0 0 0 9999px rgba(10,18,60,.55);pointer-events:none;transition:all .25s ease}
.rl-bel{position:absolute;z-index:902;background:var(--papier);color:var(--inkt);border-radius:16px;padding:1rem 1.1rem;box-shadow:0 18px 40px -12px rgba(10,18,60,.5);transition:top .25s ease,left .25s ease}
.rl-kop{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}
.rl-nieuw{background:var(--accent);color:var(--accent-inkt);font-size:.7rem;font-weight:800;border-radius:999px;padding:.1rem .55rem;text-transform:uppercase;letter-spacing:.04em}
.rl-teller{font-size:.78rem;color:var(--grijs);margin-left:auto}
.rl-titel{display:block;font-size:1.05rem;margin-bottom:.25rem}
.rl-tekst{margin:0 0 .8rem;font-size:.92rem;line-height:1.45}
.rl-knoppen{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.rl-uit{font-size:.8rem;color:var(--grijs);display:flex;gap:.35rem;align-items:center;cursor:pointer}
/* patch219: een rasteritem mag smaller worden dan zijn inhoud; brede tabellen scrollen dan in hun
   eigen .tabelwrap in plaats van de hele pagina breder te maken dan het scherm (gsm). */
.rooster>*,.dh-rooster>*,.dh-regio>*{min-width:0}
@media (max-width:480px){.pr-tabs{flex-wrap:wrap;gap:.35rem}.pr-tabs a{padding:.4rem .6rem .4rem .4rem;font-size:.84rem;white-space:nowrap;gap:.35rem;min-width:0}.pr-pijl{display:none}
  /* patch231: met de radar erbij drie tabs; het aantal selecties wijkt op een smal scherm. */
  .pr-tabs .pr-aantal{display:none}}
@media (max-width:560px){.gericht-modi{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .6rem}.gericht-modi .vink{margin:0}}

/* patch225: in het dashboard proportionele cijfers. Met tabulaire cijfers krijgt elk scheidingspunt
   de breedte van een cijfer, en dan oogt "1.830.000" als een schrijfmachine. */
.dash td,.dash th{font-variant-numeric:lining-nums proportional-nums}

/* patch227: eigen regels bij de kerncijfers beheren (tandwiel op de fiche en accountpagina). */
.kc-beheer .kc-lijst{list-style:none;margin:0 0 .7rem;padding:0;border:1px solid var(--lijn-fijn);border-radius:8px}
.kc-beheer .kc-lijst li{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem .4rem .35rem .65rem}
.kc-beheer .kc-lijst li+li{border-top:1px solid var(--lijn-fijn)}
.kc-beheer .kc-lijst form{margin:0}
.kc-beheer .kc-x{border:0;background:none;color:var(--grijs);font:inherit;font-size:1.05rem;line-height:1;padding:.15rem .4rem;border-radius:6px;cursor:pointer;min-height:0}
.kc-beheer .kc-x:hover{background:var(--slecht-l);color:var(--slecht)}
.kc-beheer .kc-voegtoe{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.kc-beheer .kc-voegtoe select{flex:1 1 14rem;min-width:0;width:auto;max-width:100%}
.kc-beheer .kc-leeg{margin:0 0 .6rem}
.kc-beheer .kc-uitleg{margin:.6rem 0 0;font-size:.8rem}

/* patch233: startpunten en live teller in Prospectie, aanspreekpersoon in de resultaten. */
.zk-start{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:0 0 .8rem}
.zk-start-label{font-size:.85rem;color:var(--grijs);font-weight:600;margin-right:.2rem}
.zk-start-knop{display:inline-block;padding:.38rem .8rem;border:1px solid var(--lijn);border-radius:999px;background:var(--papier);
  font-size:.86rem;font-weight:600;color:var(--signaal-d,var(--signaal));text-decoration:none}
.zk-start-knop:hover{border-color:var(--signaal);background:var(--signaal-l)}
.zk-live{font-size:.88rem;font-variant-numeric:tabular-nums}
.zk-aanspreek{white-space:nowrap}

/* patch234: meer zoals je klanten */
.gl-bron{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:.1rem}
.gl-bron .vink{margin:0;padding:.15rem 0;min-height:0}
.gl-bron legend{font-weight:600;font-size:.9rem;margin-bottom:.3rem}
.gl-bron select{max-width:260px;margin-left:.3rem}
.gl-bron textarea{max-width:560px}
.gl-kenmerken{margin:0;padding-left:1.1rem;line-height:1.6;font-size:.92rem}
.gl-score{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.gl-score-b{display:inline-block;width:3.2rem;height:5px;border-radius:3px;background:var(--lijn-fijn);overflow:hidden}
.gl-score-b i{display:block;height:100%;background:var(--signaal)}
.gl-waarom{font-size:.84rem;color:var(--grijs);max-width:16rem}
.zk-start-gl{border-style:dashed}

/* ---------- patch237: suggesties terwijl je typt ---------- */
.zs-houder{position:relative}
.zs-lijst{position:absolute;left:0;top:calc(100% + 6px);z-index:60;width:max(100%,440px);max-width:calc(100vw - 24px);
  max-height:min(70vh,560px);overflow-y:auto;background:var(--papier);color:var(--inkt);border:1px solid var(--lijn);
  border-radius:var(--r-s);box-shadow:var(--lift-hoog);padding:.35rem 0;text-align:left}
.zs-groep{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs);padding:.55rem .9rem .25rem}
.zs-groep:not(:first-child){border-top:1px solid var(--lijn-fijn);margin-top:.25rem}
.zs-item{display:flex;align-items:flex-start;gap:.65rem;padding:.45rem .9rem;color:var(--inkt);text-decoration:none;cursor:pointer;line-height:1.3}
.zs-item[aria-selected=true]{background:var(--signaal-l)}
.zs-item.zs-leeg{cursor:default;color:var(--grijs)}
.zs-ic{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:.75rem;font-weight:800;
  background:var(--vlak);color:var(--signaal);margin-top:.05rem}
.zs-persoon .zs-ic{background:#EFE9FF;color:#5B3CC4}
.zs-gemeente .zs-ic,.zs-sector .zs-ic,.zs-combinatie .zs-ic{background:#FFF6D1;color:#7A5B00}
.zs-tekst{min-width:0;display:flex;flex-direction:column}
.zs-label{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zs-label mark{background:none;color:inherit;font-weight:800;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:2px}
.zs-sub{font-size:.8rem;color:var(--grijs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zs-stop .zs-label{color:var(--grijs)}
.zs-tag{align-self:flex-start;font-size:.68rem;font-weight:700;color:var(--slecht);background:var(--slecht-l);border-radius:999px;padding:0 .45rem;margin:.1rem 0}
.zs-alles{display:flex;align-items:center;gap:.35rem;width:100%;border:0;border-top:1px solid var(--lijn-fijn);margin-top:.3rem;
  background:none;color:var(--signaal);font:inherit;font-size:.86rem;font-weight:500;padding:.6rem .9rem .4rem;cursor:pointer;text-align:left;border-radius:0;min-height:0}
.zs-alles:hover{background:var(--vlak-2)}
.zs-alles kbd{margin-left:auto;font:inherit;font-size:.7rem;color:var(--grijs);border:1px solid var(--lijn);border-radius:5px;padding:0 .35rem}
header .zoekbalk .zs-lijst a{color:var(--inkt);font-size:inherit;white-space:normal}
header .zoekbalk .zs-lijst a:hover{color:var(--inkt)}
@media (max-width:640px){
  .zs-lijst{width:100%;max-width:none}
  .zs-alles kbd{display:none}
}
.dh-zoek .zs-alles,header .zoekbalk .zs-alles{background:none;color:var(--signaal);border-radius:0;font-weight:500;font-size:.86rem;padding:.6rem .9rem .4rem;min-height:0;justify-content:flex-start;filter:none;box-shadow:none}
.dh-zoek .zs-alles:hover,header .zoekbalk .zs-alles:hover{background:var(--vlak-2)}
/* patch238: publieke zoekvakken (homepage, zoekpagina) */
.lp-zoek .zs-alles,.pz-zoek .zs-alles{background:none;color:var(--signaal);border-radius:0;font-weight:500;font-size:.86rem;padding:.6rem .9rem .4rem;justify-content:flex-start}
.lp-zoek .zs-lijst{max-width:min(34rem,calc(100vw - 24px))}
.pz-zoek{position:relative}

/* ---------- patch239: koopmomenten ---------- */
.zk-momenten{margin-top:.8rem}
.zk-momenten>summary{cursor:pointer;color:var(--signaal);font-weight:600}
.zk-mom-rij{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr));gap:.85rem;align-items:end;margin-top:.6rem}
.zk-mom-keuze{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .9rem;align-self:start}
.zk-mom-keuze legend{font-size:.8rem;color:var(--grijs);font-weight:500;padding:0;margin-bottom:.3rem;width:100%}
.zk-mom-uitleg{font-size:.82rem;margin:.6rem 0 .2rem}
.zk-mom-tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.2rem}
.zk-mom-tag{font-size:.72rem;font-weight:700;border-radius:999px;padding:.05rem .5rem;background:#FFF6D1;color:#6B4F00;white-space:nowrap}
.zk-mom-tag span{font-weight:500;opacity:.8}
.zk-mom-bestuur{background:#EFE9FF;color:#4B2FB0}
.zk-mom-verhuisd{background:var(--signaal-l);color:var(--signaal-d)}
.zk-mom-eerste_jr{background:var(--goed-l);color:var(--goed)}
.zk-pc{font-size:.84rem}
.zk-pc-r{display:block;max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--grijs)}
.zk-pc-r b{color:var(--inkt);font-weight:600}
@media (max-width:900px){.zk-mom-rij{grid-template-columns:1fr 1fr}.zk-mom-keuze{grid-column:1/-1}}
@media (max-width:520px){.zk-mom-rij{grid-template-columns:1fr}}
/* patch243: melding als een getypte activiteit niet gekozen werd */
.nace-lijst li.nace-waarschuwing{color:var(--let-op);background:var(--let-op-l);font-weight:600;white-space:normal}
.nace-lijst li.nace-waarschuwing:hover{background:var(--let-op-l)}
.zk-mom-onvolledig{font-size:.84rem;margin:.3rem 0 .4rem;padding:.45rem .7rem;border-radius:var(--r-xs);background:var(--let-op-l);color:var(--let-op);font-weight:600}
/* patch245: aantal bedrijven per NACE-code in de keuzelijst */
.nace-lijst li .nace-oms{flex:1;min-width:0}
.nace-aantal{flex:none;margin-left:auto;padding-left:.6rem;font-size:.78rem;color:var(--grijs);white-space:nowrap;font-variant-numeric:tabular-nums}
/* patch248: ongedaan maken in de opvolglijst */
.opv-herstel{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;text-align:left}
.opv-herstel span{flex:1}

/* patch271: Systeem en Mijn account rechts; hun uitklappaneel opent naar links. */
header .menu-rechts{margin-left:.2rem}
.dropdown div.rechts-uit{left:auto;right:0;min-width:250px}
.menu-account .account-wie{display:block;padding:.55rem .7rem .45rem;font-weight:700;color:var(--inkt);font-size:.92rem;
  border-bottom:1px solid var(--lijn-fijn);margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.menu-account .account-formule{display:inline-block;margin-left:.4rem;font-size:.72rem;font-weight:700;padding:.08rem .5rem;
  border-radius:999px;background:var(--signaal-l);color:var(--signaal-d);vertical-align:1px}
.menu-account .menu-tegoed{font-weight:700;color:var(--signaal-d)}
.menu-account .kop-upgrade{display:inline-block;margin-left:.35rem;padding:.08rem .55rem;font-size:.74rem}
.weergave-in-menu{display:flex;margin:.15rem .7rem .4rem;background:var(--signaal-l)}
.weergave-in-menu button{color:var(--inkt);flex:1}
.weergave-in-menu button[aria-pressed="true"]{background:var(--signaal-d);color:#fff}
.afmelden-in-menu{margin:.25rem 0 0;padding-top:.25rem;border-top:1px solid var(--lijn-fijn)}
.afmelden-in-menu button{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--inkt);
  font-weight:500;font-size:.94rem;padding:.5rem .7rem;border-radius:var(--r-s);min-height:0}
.afmelden-in-menu button:hover{background:var(--signaal-l);color:var(--signaal-d)}

/* patch272: starters groen, faillissementen rood op het dashboard. */
.dh-regio-start,.dh-regio-fail{border-left:3px solid var(--goed);padding-left:.9rem}
.dh-regio-fail{border-left-color:var(--slecht)}
.dh-regio-start .dh-aantal{background:var(--goed-l);color:var(--goed)}
.dh-regio-fail .dh-aantal{background:var(--slecht-l);color:var(--slecht)}
.dh-regio-start .dh-lijst a{color:var(--goed)}
.dh-regio-fail .dh-lijst a{color:var(--slecht)}

/* patch272: labels van de opvolglijst — overal dezelfde chip. */
.lbl{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:700;line-height:1;padding:.22rem .55rem;
  border-radius:999px;background:var(--lbl-l,#ECEEF5);color:var(--lbl,#4A5580);border:1px solid transparent;white-space:nowrap;text-decoration:none}
.lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.lbl-groen{--lbl:#12805C;--lbl-l:#E3F4EC}
.lbl-blauw{--lbl:#1F3BFF;--lbl-l:#E6EBFF}
.lbl-amber{--lbl:#8A5300;--lbl-l:#FFF1D6}
.lbl-rood{--lbl:#B3261E;--lbl-l:#FCE4E4}
.lbl-paars{--lbl:#6B3FA0;--lbl-l:#F0E8FA}
.lbl-grijs{--lbl:#4A5580;--lbl-l:#ECEEF5}
.lbl-leeg{background:transparent;border:1px dashed var(--lijn);color:var(--grijs);font-weight:600}
.lbl-leeg::before{display:none}
button.lbl{cursor:pointer;font-family:inherit;min-height:0}
.lbl-kies{position:relative;display:inline-block}
.lbl-kies>summary{list-style:none;cursor:pointer}
.lbl-kies>summary::-webkit-details-marker{display:none}
.lbl-kies>.lbl-paneel{position:absolute;z-index:40;top:calc(100% + 6px);left:0;background:var(--papier);border:1px solid var(--lijn);
  border-radius:var(--r);box-shadow:var(--lift-hoog);padding:.55rem;min-width:220px;display:flex;flex-wrap:wrap;gap:.35rem}
.lbl-paneel form{display:contents}
.lbl-paneel input[type=text]{flex:1 1 120px;min-height:30px;font-size:.85rem;padding:.25rem .5rem}
.lbl-vraag{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.5rem;font-size:.86rem}
.lbl-tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0 .8rem}
.lbl-tabs a{text-decoration:none}
.lbl-tabs a[aria-current="page"] .lbl{outline:2px solid var(--lbl,#4A5580);outline-offset:1px}
.dash-ster{background:transparent;border:0;padding:0 .15rem 0 0;font-size:1.05rem;line-height:1;color:#F4B400;cursor:pointer;min-height:0}
.dash-ster:hover{color:#C99100}

/* patch274: de selectiebalk onderaan, pas zichtbaar als er iets aangevinkt is. */
.selbalk{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:60;display:flex;flex-wrap:wrap;align-items:center;
  gap:.6rem 1rem;background:var(--inkt,#0E1A4F);color:#fff;border-radius:18px;padding:.6rem .8rem .6rem 1.1rem;
  box-shadow:0 12px 40px rgba(14,26,79,.35);max-width:calc(100vw - 1.4rem)}
.selbalk[hidden]{display:none}
.selbalk-tel{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;font-size:.92rem}
.selbalk-tel strong{font-size:1.05rem}
.selbalk-acties{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.selbalk .licht{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)}
.selbalk .licht:hover{background:rgba(255,255,255,.22)}
.selbalk .licht .muted{color:rgba(255,255,255,.7)}
.selbalk .gevaar{background:#E5484D;border-color:#E5484D;color:#fff}
.selbalk .sel-label{display:inline-flex;gap:.3rem}
.selbalk .sel-label input{max-width:130px;min-height:32px;font-size:.85rem;padding:.25rem .5rem}
.linkknop{background:transparent;border:0;color:inherit;text-decoration:underline;cursor:pointer;padding:.2rem .3rem;min-height:0;font:inherit}
.selbalk .sel-alle{color:#FFD000;font-weight:700}
.selbalk .sel-wis{text-decoration:none;font-size:1.05rem;opacity:.8}
body.met-selbalk{padding-bottom:6rem}
@media (max-width:680px){.selbalk{left:.7rem;right:.7rem;transform:none;bottom:.7rem}}
@media (max-width:680px){header .dropdown div.rechts-uit{left:.7rem;right:.7rem;min-width:0}}

/* patch275: icoontjes in de menu's — rond, in de signaalkleur, overal hetzelfde. */
.menu-stap svg{display:block}
.menu-iconen a,.menu-iconen .menu-tegoed{display:flex;align-items:center;gap:.6rem}
.menu-iconen .menu-stap{margin-top:0}
.afmelden-in-menu button{display:flex;align-items:center;gap:.6rem}
.dropdown .menu-stap{width:26px;height:26px}

/* patch277: de basisfiche zonder account. */
.pz-feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem 1.4rem;margin:0}
.pz-feiten div{min-width:0}
.pz-feiten .breed{grid-column:1/-1}
.pz-feiten dt{font-size:.82rem;color:var(--grijs);margin:0 0 .15rem}
.pz-feiten dd{margin:0;font-weight:600;color:var(--inkt)}
.pz-tabel{width:100%;border-collapse:collapse;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;margin-bottom:1.4rem}
.pz-tabel th{text-align:left;font-size:.8rem;color:var(--grijs);font-weight:600;padding:.6rem .9rem;background:var(--vlak-2)}
.pz-tabel td{padding:.7rem .9rem;border-top:1px solid var(--lijn-fijn);font-size:.95rem}
.pz-tabel a{font-weight:700}

/* patch280: startkaart "Aan de slag" op het dashboard */
.dh-start{background:var(--papier,#fff);border:1px solid var(--lijn-fijn);border-radius:16px;padding:1.1rem 1.25rem;margin:0 0 1.1rem}
.dh-start-kop{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.dh-start-kop h2{margin:0;font-size:1.25rem}
.dh-start-stand{font-size:.85rem;color:var(--grijs)}
.dh-start-stappen{list-style:none;margin:.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.dh-start-stappen li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;gap:.3rem .7rem;padding:.85rem;border:1px solid var(--lijn-fijn);border-radius:12px;min-width:0}
.dh-start-stappen li.volgende{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.dh-start-stappen li.klaar{opacity:.62}
.dh-start-stappen p{margin:.2rem 0 0;font-size:.9rem;line-height:1.45;color:var(--grijs)}
.dh-start-stappen .knop{grid-column:2;justify-self:start}
.dh-start-nr{width:1.8rem;height:1.8rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:var(--lijn-fijn)}
.dh-start-stappen li.volgende .dh-start-nr{background:var(--accent);color:var(--accent-inkt)}
.dh-start-stappen li.klaar .dh-start-nr{background:var(--goed-l);color:var(--goed)}
@media (max-width:860px){.dh-start-stappen{grid-template-columns:1fr}}

/* patch280: op gsm worden het dashboard en de zoekresultaten kaartjes in plaats van een tabel die
   buiten beeld loopt. Op een groter scherm verandert er niets. */
@media (max-width:680px){
  .dh-tabel{overflow:visible}
  .dh-tabel table.dash,.dh-tabel table.dash tbody,.dh-tabel table.dash td{display:block;width:auto}
  .dh-tabel table.dash thead{display:none}
  .dh-tabel table.dash tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(4.6rem,1fr));gap:.45rem .7rem;padding:.85rem 0;border-bottom:1px solid var(--lijn-fijn)}
  .dh-tabel table.dash{min-width:0}
  .dh-tabel table.dash td,.tabelwrap.dh-tabel table.dash:not(.sam):not(.jr) td{padding:0;border:0;text-align:left;white-space:normal;min-width:0}
  .dh-tabel table.dash td.dash-naam,.dh-tabel table.dash td.dash-sig,.dh-tabel table.dash td:nth-child(2){grid-column:1/-1}
  .dh-tabel table.dash td.dh-verloop,.dh-tabel table.dash td:nth-child(3){display:none}
  .dh-tabel table.dash td.n[data-label]::before{content:attr(data-label);display:block;font-size:.74rem;font-weight:600;color:var(--grijs);margin-bottom:.1rem}
  .dh-tabel table.dash .dash-solv{justify-content:flex-start}
  .dh-tabel table.dash .dash-solv{min-width:0}
  .dash-sig-in{flex-wrap:wrap}

  .tabelwrap:has(table.zk-res){overflow:visible}
  table.zk-res,table.zk-res tbody{display:block}
  table.zk-res thead{display:none}
  table.zk-res tr{display:grid;grid-template-columns:1.7rem minmax(0,1fr);gap:.2rem .5rem;padding:.8rem 0;border-bottom:1px solid var(--lijn-fijn)}
  .tabelwrap table.zk-res{min-width:0;width:100%}
  .tabelwrap table.zk-res td,.tabelwrap table.zk-res td:first-child,.tabelwrap table.zk-res td:first-child:has(> input[type=checkbox]) + td{display:block;padding:0;border:0;min-width:0;width:auto;white-space:normal}
  table.zk-res td.zk-vink{grid-row:1 / span 6;padding-top:.15rem}
  table.zk-res td:not(.zk-vink){grid-column:2}
  table.zk-res td.zk-naam{font-weight:650}
  table.zk-res td.zk-nr,table.zk-res td.zk-vorm,table.zk-res td.zk-start{font-size:.85rem;color:var(--grijs)}
  table.zk-res td.zk-status .tag.ok{display:none}
  table.zk-res td.zk-status:has(.tag.ok){display:none}
  table.zk-res td.zk-act{font-size:.9rem}
  table.zk-res td.zk-start[data-label]::before{content:attr(data-label)}
}

/* patch281: fichebalk op een breed scherm die net niet past — eerst de knoppen als icoon, dan de
   niet-actieve tabbladen. De volledige tekst blijft als tooltip (title) en voor schermlezers. */
@media (min-width:761px){
  .fichebalk.krap .fb-acties .fb-tekst{display:none}
  .fichebalk.krap .fb-acties .knop{padding:.45rem .6rem}
  .fichebalk.zeer-krap .tab:not(.actief) .tab-tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fichebalk.zeer-krap .tab{padding-left:.6rem;padding-right:.6rem}
}

/* patch317: gezondheidsscore als chip in dashboard, opvolglijst en recent bekeken */
.scorechip{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.scorechip .scorechip-kl{font-weight:400;opacity:.85}
.dh-chips .scorechip .scorechip-kl{display:none}
.dash-score{white-space:nowrap}
.scorechip.gestapeld{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;padding:.3rem .6rem}
.scorechip.gestapeld .scorechip-kl{font-size:.74rem}