/* B2B Data, stijllaag "zakelijk databestand"
   Rustig chroom, luide data. Grijs is de norm; kleur betekent iets.

   Sinds 14-09-2026 in de vormtaal van company.info: hun groengrijze grond, hun
   randen van 1px, hun zachte grijs in plaats van wit, hun Source Sans Pro, 8px
   op kaarten en 5px op knoppen, en nergens een schaduw. Het blauw is van ons
   gebleven; hun oranje staat op de hoofdactie. Alles loopt via de variabelen
   hieronder, dus terugdraaien is dit blok terugzetten plus het blok "jasje"
   onderaan verwijderen.

   Kleur is functie, geen versiering: één accent voor "hier kun je iets", drie
   betekeniskleuren (klant, mailing, verouderd) en verder alleen grijs. Het accent
   is een diepere indigo dan het schelle blauw van eerst, dat leest rustiger over
   een scherm vol getallen. Elke kleur bestaat in beide thema's; hardgecodeerde
   tinten stonden eerder alleen goed in het lichte thema. */
:root{
  --bg:#eff3ed;
  /* Geen echt wit meer: company.info zet zijn panelen op een zacht grijs en dat
     leest rustiger boven een scherm vol getallen. Invoervelden blijven wel wit,
     anders lopen ze gelijk met de kaart eronder en zie je niet waar je typt. */
  --vlak:#f7f9f6;
  --veldvlak:#ffffff;
  --vlak2:#eef2ec;
  --vlak3:#e6ebe4;
  --ink:#141413;
  --ink2:rgba(0,0,0,.7);
  --ink3:rgba(0,0,0,.6);
  --lijn:#dddddd;
  --lijn2:#e7e7e5;

  --accent:#1e46b8;
  --accent-zacht:#e7ecfa;
  --accent-ink:#ffffff;

  --klant-bg:#d9f2e4;   --klant-fg:#0f6b3b;
  --mail-bg:#fdeecf;    --mail-fg:#8a5405;
  --oud-bg:#fde5da;     --oud-fg:#a63c14;
  --waarschuw:#c47a06;
  --rood:#c62828;

  --spoor:#e3e8e1;
  /* company.info heeft box-shadow:none op alles wat wij onderzocht hebben; de
     diepte komt van randen en vlakken. */
  --schaduw:none;
  --schaduwdiep:0 10px 40px rgba(20,20,19,.22);
  --oranje:#f08a05; --oranje-diep:#d97c04; --oranje-ink:#141413;

  /* Acht pixels, de maat van company.info. Alle 57 plekken lopen via deze
     variabele; zet hem op 0 voor de rechte hoeken van de voorpagina terug. */
  --r:8px;
  --r-knop:5px;
  /* Hoogte van de bovenbalk. De tabbalk plakt hieronder vast, dus die twee
     moeten dezelfde waarde gebruiken; eerder stonden ze los van elkaar op 46
     en 44 px en liepen ze uit de pas zodra de balk hoger werd. */
  --balkh:54px;
  /* De monostack van company.info zelf. Alleen nog voor kenmerken waar een
     vaste breedte helpt: KVK, vestigingsnummer, sbi-code, sleutel. */
  --mono:"Lucida Console",Monaco,ui-monospace,monospace;
  --sans:"Source Sans Pro",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ---------- lettermaten ----------
     Zes maten, verder geen. Elke losse pixelwaarde die hier niet in staat is een
     afwijking die niemand ziet maar iedereen voelt: het scherm leest dan als twee
     lettertypes door elkaar.
       mini  aantallen, chips, kapitalen
       fijn  bijschriften en toelichting
       klein tekst die je leest: tabel, knoppen, tabbladen
       groot invoervelden
       h3    paneelkoppen en de naam in de balk
       h2    het luidste getal op het scherm
     Op een aanraakscherm schuift de schaal mee omhoog. Dat moet ook wel: iOS eist
     16 px in een invoerveld, en naast een veld van 16 valt 12,5 uit de toon. */
  --t-mini:11px; --t-fijn:12.5px; --t-klein:14px;
  --t-groot:16px; --t-h3:20px;   --t-h2:26px;
}
@media (pointer:coarse){
  :root{
    --t-mini:13px; --t-fijn:15px; --t-klein:15px;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
html{
  /* Een tik op een knop gaf de blauwe systeemvlek van de browser; nu een eigen,
     zachtere markering in de accentkleur. */
  -webkit-tap-highlight-color:color-mix(in srgb, var(--accent) 20%, transparent);
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:var(--t-klein)/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
}
/* Zonder dit wacht een aanraakscherm 300 ms op een mogelijke dubbeltik voordat
   een klik doorkomt. De hele tool voelde daardoor traag op een telefoon. */
a,button,select,input,textarea,summary,label,.tab,.knop,.railknop{
  touch-action:manipulation}

/* Wie in zijn systeem heeft staan dat hij minder beweging wil, krijgt hier geen
   glanslopers, geen inschuivende panelen en geen zacht scrollen. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* De postcode voor de plaatsnaam mag een maat kleiner; hij stond met een vaste
   11,5 px in de opmaak van app.js en liep daarmee buiten de schaal om. */
.pc{font-size:var(--t-mini)}
.verborgen{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r)}

/* ---------- formulierelementen ---------- */
input,select,button,textarea{font:inherit;color:inherit}
input[type=text],input[type=number],input[type=password],input[type=email],select,textarea{
  width:100%;padding:6px 9px;border-radius:var(--r);border:1px solid var(--lijn);
  background:var(--vlak);color:var(--ink);font-size:var(--t-fijn);
}
input::placeholder{color:var(--ink3)}
select[multiple]{height:112px;padding:4px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 12px;border-radius:var(--r);border:1px solid var(--lijn);
  background:var(--vlak);cursor:pointer;font-size:var(--t-fijn);font-weight:500;white-space:nowrap;
}
.knop:hover{background:var(--vlak3)}
.knop.prim{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.knop.prim:hover{filter:brightness(1.1)}
.knop.klein{padding:4px 9px;font-size:var(--t-fijn)}
.knop.gevaar{color:var(--rood);border-color:var(--lijn)}
.knop:disabled{opacity:.45;cursor:default}
.vink{display:flex;align-items:center;gap:7px;font-size:var(--t-fijn);color:var(--ink2);cursor:pointer;margin-bottom:6px}
.vink input{accent-color:var(--accent);margin:0;width:auto;flex:none}

/* ---------- inloggen ---------- */
#inlog{position:fixed;inset:0;display:grid;grid-template-columns:1fr 1fr;background:var(--vlak);z-index:60}
/* Op een smal scherm staat de etalage onder het formulier in plaats van ernaast.
   Hem helemaal verbergen kostte de twee cijfers die vertellen wat de tool is. */
@media (max-width:820px){
  #inlog{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;overflow:auto}
  #inlog .form{padding:30px 18px 22px}
  #inlog .form .inner{width:100%;max-width:360px}
  #inlog .zij{padding:26px 18px calc(30px + env(safe-area-inset-bottom))}
  #inlog .zij .blok{max-width:360px}
  #inlog .zij h2{font-size:var(--t-groot)}
  #inlog .zij p{margin-bottom:18px}
  #inlog .zij .cijfer b{font-size:var(--t-h3);min-width:88px}
  .cijferrij{grid-auto-flow:column;justify-content:start;gap:24px}
  .kenmerken{margin-top:20px;grid-template-columns:1fr 1fr;display:grid;gap:7px 14px}
}
@media (max-width:420px){
  .kenmerken{grid-template-columns:1fr}
  .cijferrij{grid-auto-flow:row;gap:10px}
}
#inlog .form{display:grid;place-items:center;padding:32px}
#inlog .form .inner{width:min(340px,100%)}
#inlog h1{margin:0 0 2px;font-size:var(--t-h3);letter-spacing:-.02em}
#inlog .onder{margin:0 0 24px;color:var(--ink2);font-size:var(--t-fijn)}
#inlog label{display:block;font-size:var(--t-fijn);color:var(--ink2);margin:0 0 4px}
#inlog input{margin-bottom:14px}
#inlog .zij{background:var(--vlak2);border-left:1px solid var(--lijn);display:grid;place-items:center;padding:40px}
#inlog .zij .blok{max-width:330px}
#inlog .zij h2{margin:0 0 16px;font-size:var(--t-klein);font-weight:600}
#inlog .zij p{color:var(--ink2);font-size:var(--t-fijn);margin:0 0 22px}
.cijferrij{display:grid;gap:12px}
.cijfer{display:flex;align-items:baseline;gap:10px}
.cijfer b{font-family:var(--mono);font-size:var(--t-h3);font-weight:600;letter-spacing:-.02em;min-width:96px}
.cijfer span{font-size:var(--t-fijn);color:var(--ink2)}
.fout{color:var(--rood);font-size:var(--t-fijn);margin:10px 0 0}
.link{background:none;border:0;color:var(--accent);font-size:var(--t-fijn);cursor:pointer;padding:0;text-decoration:underline}

/* ---------- balk ---------- */
.balk{
  display:flex;align-items:center;gap:14px;padding:0 14px;min-height:var(--balkh);
  background:var(--vlak);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:30;
}
.merk{display:flex;align-items:baseline;gap:9px;flex:none}
.merk b{font-size:var(--t-klein);font-weight:700;letter-spacing:-.01em}
.merk span{font-size:var(--t-mini);color:var(--ink3);font-family:var(--mono)}
.balk .rest{margin-left:auto;display:flex;align-items:center;gap:14px}
.meter{display:flex;align-items:center;gap:7px;font-size:var(--t-mini);color:var(--ink2)}
.spoor{width:96px;height:6px;background:var(--spoor);border-radius:var(--r);overflow:hidden}
.vul{display:block;height:100%;background:var(--accent);border-radius:var(--r);transition:width .3s}
.vul.bijna{background:var(--waarschuw)}.vul.vol{background:var(--rood)}
.meter .n{font-family:var(--mono);color:var(--ink);font-size:var(--t-mini)}
.ikwie{font-size:var(--t-fijn);color:var(--ink2);text-align:right;line-height:1.3}
.ikwie b{display:block;color:var(--ink);font-weight:600}

.tabs{display:flex;gap:2px;padding:0 14px;background:var(--vlak);border-bottom:1px solid var(--lijn);position:sticky;top:var(--balkh);z-index:29}
.tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:8px 12px;font-weight:600;font-size:var(--t-fijn);color:var(--ink2);cursor:pointer}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- indeling ---------- */
.werkblad{display:grid;grid-template-columns:250px 1fr;gap:12px;padding:12px 14px 90px;align-items:start}
@media (max-width:960px){
  .werkblad{grid-template-columns:1fr}
  .rail{position:static;max-height:none}
  .railknop{display:inline-flex !important}
  .rail.dicht{display:none}
}
/* Twee klassen in de selector, en dat is met opzet: de algemene regel voor .knop staat
   verderop in het blad en zet display op inline-flex. Even zwaar, maar later, dus die won en
   de knop stond ook op een breed scherm in beeld terwijl de rail daar gewoon openstaat. De
   regel hierboven (onder 960 px) heeft !important en wint dus wel. */
.kopregel .railknop{display:none}
.railknop{margin-bottom:0}
/* De twee tellingen horen bij elkaar. Op een breed scherm staan ze gewoon naast elkaar in
   de kopregel (vandaar display:contents, het omhulsel doet dan niets); op een telefoon
   worden ze een kolommetje naast de knop Filters. */
.telblok{display:contents}
.rail{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);
  position:sticky;top:92px;max-height:calc(100vh - 108px);overflow:auto;
}
.railkop{padding:10px 13px;border-bottom:1px solid var(--lijn);font-size:var(--t-mini);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:600;
  display:flex;align-items:center;justify-content:space-between}
.railkop .aantal{font-family:var(--mono);font-size:var(--t-mini);color:var(--accent);text-transform:none;letter-spacing:0}
.groep{border-bottom:1px solid var(--lijn2)}
.groep:last-of-type{border-bottom:0}
.groep>summary{
  padding:9px 13px;font-size:var(--t-fijn);font-weight:600;color:var(--ink);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:7px;user-select:none;
}
.groep>summary::-webkit-details-marker{display:none}
.groep>summary::before{
  content:"";width:7px;height:7px;border-right:1.6px solid var(--ink3);border-bottom:1.6px solid var(--ink3);
  transform:rotate(-45deg);margin-left:2px;margin-right:2px;transition:transform .15s;flex:none;
}
.groep[open]>summary::before{transform:rotate(45deg)}
.groep>summary:hover{background:var(--vlak2)}
.groep>summary .stip{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:auto;flex:none;display:none}
.groep.actief>summary .stip{display:block}
.groep.actief>summary{color:var(--accent)}
.groepinhoud{padding:2px 13px 14px}
/* Geen bijschriften meer boven de velden: het veld is zijn eigen naam, in de
   placeholder of in de eerste regel van de keuzelijst. Dat scheelt per filter een regel
   van 15 px, en bij 67 filters is dat ruim een scherm scrollen. */
.veld{margin-bottom:7px}
.veld:last-child{margin-bottom:2px}
.duo{display:grid;grid-template-columns:1fr 12px 1fr;gap:4px;align-items:center}
.duo .tot{text-align:center;color:var(--ink3);font-size:var(--t-fijn)}
.duo input{min-width:0}
.veld select[multiple]{height:106px}
.gekozenaantal{float:right;font-family:var(--mono);font-size:var(--t-mini);color:var(--accent)}
.railvoet{padding:11px 13px;display:flex;gap:6px;position:sticky;bottom:0;background:var(--vlak);
  border-top:1px solid var(--lijn);box-shadow:0 -6px 12px -10px rgba(0,0,0,.3)}
.railvoet .knop{flex:1}

/* ---------- resultaten ---------- */
.hoofd{min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px;min-height:0}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--accent-zacht);color:var(--accent);
  border-radius:99px;padding:2px 5px 2px 9px;font-size:var(--t-mini);font-weight:500}
.chip button{background:none;border:0;color:inherit;cursor:pointer;font-size:var(--t-klein);line-height:1;padding:0 3px;opacity:.65}
.chip button:hover{opacity:1}
.chip.wisalles{background:none;color:var(--ink2);padding:2px 6px;text-decoration:underline;cursor:pointer;border:0}

.kopregel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.telling{font-size:var(--t-fijn);color:var(--ink2)}
.telling b{color:var(--ink);font-size:var(--t-klein);font-family:var(--mono)}
.kopregel .rechts{margin-left:auto;display:flex;gap:6px;align-items:center}
.kopregel .rechts select,.kopregel .rechts input{width:auto}

.tabelvlak{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);overflow:auto}
table{border-collapse:collapse;width:100%;font-size:var(--t-fijn);min-width:900px}
thead th{
  position:sticky;top:0;z-index:2;background:var(--vlak2);text-align:left;
  font-weight:600;font-size:var(--t-mini);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);
  padding:8px 11px;border-bottom:1px solid var(--lijn);white-space:nowrap;
}
thead th.sorteer{cursor:pointer;user-select:none}
thead th.sorteer:hover{color:var(--ink)}
/* De kolom waarop gesorteerd wordt, springt eruit; het pijltje wijst de richting. */
thead th.sorteer[aria-sort="ascending"],thead th.sorteer[aria-sort="descending"]{color:var(--ink)}
thead th.sorteer[aria-sort="ascending"] .vi,
thead th.sorteer[aria-sort="descending"] .vi{color:var(--ink)}
thead th .pijl{font-family:var(--mono);margin-left:3px;color:var(--accent)}
tbody td{padding:8px 11px;border-bottom:1px solid var(--lijn2);vertical-align:middle}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--vlak2)}
tbody tr.actief{background:var(--accent-zacht)}
tbody tr:last-child td{border-bottom:0}
td.kies{width:30px;cursor:default}
td.kies input{accent-color:var(--accent);margin:0}
td.naam{font-weight:600;max-width:290px;line-height:1.35}
td.naam .plaats{display:block;font-weight:400;font-size:var(--t-mini);color:var(--ink2);font-family:var(--mono)}
td.zacht{color:var(--ink2);font-size:var(--t-fijn)}
td.getal{text-align:right;font-family:var(--mono);font-size:var(--t-fijn);white-space:nowrap}
td.contact{font-size:var(--t-fijn);line-height:1.45;white-space:nowrap}

/* wagenpark als staafverdeling */
.vloot{display:flex;align-items:center;gap:7px;min-width:140px}
.vlootbalk{display:flex;height:14px;width:88px;border-radius:var(--r);overflow:hidden;background:var(--spoor);flex:none}
.vlootbalk i{display:block;height:100%}
/* Eén kleurtrap afgeleid van het accent, zodat de verdeling ook in het donkere
   thema klopt. Vaste grijstinten deden dat niet. */
.vlootbalk i.v{background:var(--accent)}
.vlootbalk i.b{background:color-mix(in srgb,var(--accent) 62%,var(--vlak3))}
.vlootbalk i.o{background:color-mix(in srgb,var(--accent) 40%,var(--vlak3))}
.vlootbalk i.a{background:color-mix(in srgb,var(--accent) 22%,var(--vlak3))}
.vlootbalk i.p{background:var(--spoor)}
.vloot .tot{font-family:var(--mono);font-size:var(--t-fijn)}
.vloot .uitsplits{font-size:var(--t-mini);color:var(--ink3);font-family:var(--mono)}

.merkje{display:inline-block;padding:1px 6px;border-radius:var(--r);font-size:var(--t-mini);font-weight:600;margin-left:6px;vertical-align:1px}
/* Alleen een vinkje, dus vierkant in plaats van een pil met tekst erin. */
.merkje.klant{background:var(--klant-bg);color:var(--klant-fg);
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;padding:0;border-radius:var(--r);vertical-align:-3px}
.merkje.klant .vinkje{width:11px;height:11px;fill:none;stroke:currentColor;
  stroke-width:2.6;flex:none}
/* "ja" in het matchrapport: zelfde groen, maar met tekst, dus een gewone pil. */
.merkje.ja{background:var(--klant-bg);color:var(--klant-fg)}
.merkje.mail{background:var(--mail-bg);color:var(--mail-fg)}
.merkje.oud{background:var(--oud-bg);color:var(--oud-fg)}
/* Herkomst van een telefoonnummer: neutraal grijs, want het is een feit, geen oordeel. */
.merkje.bron{background:var(--vlak3);color:var(--ink2);font-weight:600}

.leegvlak{padding:52px 24px;text-align:center;color:var(--ink2)}
.leegvlak h3{margin:0 0 6px;font-size:var(--t-klein);color:var(--ink)}
.leegvlak p{margin:0 auto;max-width:44ch;font-size:var(--t-fijn)}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;padding:11px;border-top:1px solid var(--lijn2)}
.pager .pos{font-family:var(--mono);font-size:var(--t-fijn);color:var(--ink2)}
/* Regel onder de tabel: dit is een venster van 300, niet de hele selectie. */
.venster{margin:0;padding:0 13px 12px;text-align:center;font-size:var(--t-fijn);color:var(--ink2)}
.venster b{font-family:var(--mono);color:var(--ink)}

/* skeleton tijdens laden */
.skelet td{padding:11px}
.skelet span{display:block;height:9px;border-radius:var(--r);background:linear-gradient(90deg,var(--lijn2),var(--vlak3),var(--lijn2));background-size:200% 100%;animation:glans 1.1s linear infinite}
@keyframes glans{from{background-position:200% 0}to{background-position:-200% 0}}

/* selectiebalk onderaan */
.keuzebalk{
  position:fixed;left:50%;transform:translateX(-50%) translateY(calc(100% + 28px));bottom:18px;
  background:var(--ink);color:var(--bg);border-radius:var(--r);padding:9px 12px;
  display:flex;align-items:center;gap:12px;box-shadow:0 12px 32px -12px rgba(0,0,0,.55);
  transition:transform .18s ease, visibility 0s .18s;z-index:1100;font-size:var(--t-fijn);visibility:hidden;
}
.keuzebalk.open{transform:translateX(-50%) translateY(0);visibility:visible;transition:transform .18s ease}

/* Melding dat er een nieuwe versie klaarstaat. Linksonder, zodat hij niet botst met de
   selectiebalk in het midden. */
.versiebalk{
  position:fixed;left:18px;bottom:18px;z-index:1100;
  background:var(--vlak);color:var(--ink);border:1px solid var(--lijn);border-radius:var(--r);
  padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:var(--t-fijn);
  box-shadow:var(--schaduw);max-width:calc(100vw - 36px);
}
.versiebalk.verborgen{display:none}
@media (max-width:760px){ .versiebalk{left:12px;right:12px;bottom:12px;flex-wrap:wrap} }
.keuzebalk b{font-family:var(--mono)}
.keuzebalk .knop{background:transparent;
  border-color:color-mix(in srgb, currentColor 30%, transparent);color:inherit}
/* De selectiebalk staat op een omgekeerde achtergrond. De gewone focusring is
   accentblauw en verdwijnt daar bijna in; hier dus de eigen tekstkleur. */
.keuzebalk .knop:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.keuzebalk .knop:hover{background:color-mix(in srgb, currentColor 12%, transparent)}
.keuzebalk .knop.prim{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- zijpaneel detail ---------- */
#paneel{position:fixed;inset:0;z-index:1200;display:none}
#paneel.open{display:block}
#paneel .waas{position:absolute;inset:0;background:rgba(10,16,24,.42)}
#paneel .blad{
  position:absolute;top:0;right:0;bottom:0;width:min(680px,100%);
  background:var(--vlak);border-left:1px solid var(--lijn);overflow:auto;
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.5);
}
.bladkop{position:sticky;top:0;background:var(--vlak);border-bottom:1px solid var(--lijn);padding:16px 20px;display:flex;gap:12px;align-items:flex-start;z-index:2}
.bladkop h2{margin:0 0 3px;font-size:var(--t-groot);letter-spacing:-.02em}
.bladkop .adres{font-size:var(--t-fijn);color:var(--ink2);font-family:var(--mono)}
.dicht{background:none;border:0;font-size:var(--t-h3);line-height:1;color:var(--ink2);cursor:pointer;margin-left:auto;padding:0 2px}
.dicht:hover{color:var(--ink)}
.bladlijf{padding:16px 20px 40px}
.snelacties{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.kpirij{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-bottom:20px}
.kpi{background:var(--vlak2);border:1px solid var(--lijn2);border-radius:var(--r);padding:9px 11px}
.kpi .n{font-family:var(--mono);font-size:var(--t-groot);font-weight:600;letter-spacing:-.02em}
.kpi .l{font-size:var(--t-mini);color:var(--ink2);margin-top:1px}
.kpi.let .n{color:var(--oud-fg)}
.sectie{margin-bottom:22px}
.sectie h3{margin:0 0 8px;font-size:var(--t-mini);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:600}
/* Eén vaste breedte voor de labelkolom, in alle blokken van de kaart. Met `auto` bepaalde
   het langste label van elk blok waar zijn eigen waardekolom begon: bij Activiteit stond de
   waarde op 185 px, bij Pand op 320 en bij Herkomst op 450, en dan lijkt elke sectie een
   eigen tabelletje. Nu lopen ze alle vijf in dezelfde lijn. */
.paar{display:grid;grid-template-columns:minmax(0,var(--paarkop,124px)) minmax(0,1fr);
  gap:6px 14px;font-size:var(--t-fijn);margin:0}
.paar dt{color:var(--ink2);overflow-wrap:break-word}
.paar dd{margin:0}
.paar dd a{color:var(--accent)}
.tweekolom{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.tweekolom{grid-template-columns:1fr}}
/* Op een telefoon is de kaart smaller; de labelkolom mag mee krimpen, maar niet zo ver
   dat "Vestigingsnummer" over twee regels breekt. */
@media (max-width:560px){:root{--paarkop:116px}}

/* leeftijdshistogram */
.histo{display:flex;align-items:flex-end;gap:3px;height:76px;margin-top:6px}
.histo .kolom{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;min-width:0}
.histo .staaf{width:100%;background:var(--accent);border-radius:var(--r) var(--r) 0 0;min-height:2px}
.histo .staaf.oud{background:var(--oud-fg)}
.histo .jr{font-size:var(--t-mini);color:var(--ink3);font-family:var(--mono)}
.histo .aant{font-size:var(--t-mini);color:var(--ink2);font-family:var(--mono)}
.legenda{font-size:var(--t-mini);color:var(--ink2);margin-top:7px}
.legenda i{display:inline-block;width:9px;height:9px;border-radius:var(--r);background:var(--oud-fg);margin-right:5px;vertical-align:-1px}

.staaflijst{display:grid;gap:4px}
.staafrij{display:grid;grid-template-columns:96px 1fr 28px;gap:8px;align-items:center;font-size:var(--t-fijn)}
.staafrij>span:first-child{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.staafrij .sp{background:var(--spoor);border-radius:var(--r);height:7px;overflow:hidden}
.staafrij .sv{display:block;height:100%;background:var(--accent);border-radius:var(--r)}
.staafrij b{text-align:right;font-family:var(--mono);font-weight:500;font-size:var(--t-mini)}
.vlootlijst{max-height:300px;overflow:auto;border:1px solid var(--lijn2);border-radius:var(--r)}
.vlootlijst table{min-width:560px;font-size:var(--t-fijn)}
/* Op een telefoon past 560 px niet: de kolom Medewerkers viel half buiten beeld. De
   markering "hoofdvestiging" gaat eruit en de tabel mag krimpen; naam, plaats en de twee
   getallen blijven. */
@media (max-width:560px){
  .vlootlijst table{min-width:0}
  .vlootlijst th:nth-child(3),.vlootlijst td:nth-child(3){display:none}
  .vlootlijst th,.vlootlijst td{padding-inline:8px}
  /* Koppen mogen afbreken: "Medewerkers" en "Voertuigen" op één regel houden de tabel
     breder dan het scherm. */
  .vlootlijst th{white-space:normal}
}
.vlootlijst tbody tr{cursor:default}
tr.oudvoertuig td:first-child{box-shadow:inset 2px 0 0 var(--oud-fg)}

/* ---------- kaarten en pagina's ---------- */
.pagina{padding:14px 14px 60px;max-width:1180px}
.kaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:16px 18px;margin-bottom:12px}
.kaart h2{margin:0 0 3px;font-size:var(--t-klein)}
.kaart .toelicht{margin:0 0 14px;color:var(--ink2);font-size:var(--t-fijn);max-width:74ch}
.velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:11px}
.velden label{display:block;font-size:var(--t-mini);color:var(--ink2);margin-bottom:3px}
.uitslag{font-size:var(--t-fijn);color:var(--ink2);margin-top:9px}
/* De sleutel is een keer te zien en moet in een keer te pakken zijn: een eigen vlak
   met een kopieerknop ernaast, en op een telefoon breekt hij af in plaats van de kaart
   op te rekken. */
.sleutelvak{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px;
  background:var(--vlak2);border:1px solid var(--lijn);border-radius:var(--r);padding:8px 10px}
.sleutelvak code{font-size:var(--t-fijn);word-break:break-all;user-select:all}
.sleepvlak{border:1.5px dashed var(--lijn);border-radius:var(--r);padding:26px;text-align:center;color:var(--ink2);font-size:var(--t-fijn);cursor:pointer;background:var(--vlak2)}
.sleepvlak.over{border-color:var(--accent);background:var(--accent-zacht);color:var(--accent)}
.orgraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:10px}
.orgkaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:14px 16px}
.orgkaart h3{margin:0 0 2px;font-size:var(--t-klein)}
.orgkaart .sub{font-size:var(--t-mini);color:var(--ink3);margin-bottom:11px}
.orgkaart .regel{display:flex;justify-content:space-between;font-size:var(--t-fijn);color:var(--ink2);margin-bottom:4px}
.orgkaart .regel b{font-family:var(--mono);color:var(--ink);font-weight:500}
.orgkaart .gebruikers{margin:10px 0;font-size:var(--t-fijn);color:var(--ink2);line-height:1.6}
.orgkaart .knoppen{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.melding{padding:9px 12px;border-radius:var(--r);background:var(--mail-bg);color:var(--mail-fg);font-size:var(--t-fijn);margin-bottom:14px}
.toast{position:fixed;bottom:18px;left:18px;background:var(--ink);color:var(--bg);padding:9px 13px;border-radius:var(--r);font-size:var(--t-fijn);z-index:70;box-shadow:var(--schaduw);opacity:0;transform:translateY(8px);transition:.2s}
.toast.op{opacity:1;transform:none}
.toast.slecht{background:var(--rood);color:var(--op-rood)}

/* ============ tabel v2: strakke uitlijning, meer kolommen ============ */
/* Vaste breedtes voor alle vijftien kolommen maakten de tabel 1.150 px breed; met de
   zes standaardkolommen paste dat niet in het venster en vielen wagenparkprofiel en
   contact buiten beeld. Nu verdeelt de browser de ruimte: de smalle kolommen houden hun
   maat via de colgroup, de brede krijgen wat er over is. Zet je alle kolommen aan, dan
   verschijnt er alsnog een schuifbalk in het tabelvlak zelf. */
.tabelvlak table{table-layout:fixed;width:100%;min-width:0}
.tabelvlak{overflow:auto}
thead th.getal,tbody td.getal{text-align:right}
thead th.mid,tbody td.mid{text-align:center}
tbody td.naam{white-space:normal}
td.sbi{line-height:1.3}
td.sbi .code{font-family:var(--mono);font-size:var(--t-mini);color:var(--ink3);display:block}
td.sbi .oms{font-size:var(--t-fijn);color:var(--ink2);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.tot{font-family:var(--mono);text-align:right;font-weight:600}
td.n0{color:var(--ink3)}
thead th .eenh{font-weight:400;opacity:.7}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--vlak2) 55%,transparent)}
tbody tr:nth-child(even):hover,tbody tr:hover{background:var(--vlak3)}
tbody tr.actief,tbody tr.actief:hover{background:var(--accent-zacht)}
/* Het kolommenmenu is weg. Een handmatige kolomkeuze vecht met een tabel die zelf
   uitrekent wat er past; zie pasKolommenToe() in app.js. */

/* ============ kaart ============ */

/* adresblok en soorttabel in het detailpaneel */
.adresblok{background:var(--vlak2);border:1px solid var(--lijn2);border-radius:var(--r);padding:11px 13px;line-height:1.55}
.adresblok .regel1{display:block;font-weight:600}
.adresblok .regel2{display:block;font-family:var(--mono);font-size:var(--t-fijn)}
.adresblok .regel3{display:block;font-size:var(--t-fijn);color:var(--ink2)}
table.soorttabel{min-width:0;width:100%;table-layout:auto;border:1px solid var(--lijn2);border-radius:var(--r);overflow:hidden}
table.soorttabel thead th{position:static;text-align:right;padding:7px 10px;font-size:var(--t-mini)}
table.soorttabel thead th:first-child{text-align:right}
table.soorttabel tbody td{text-align:right;font-family:var(--mono);font-size:var(--t-fijn);padding:8px 10px}
table.soorttabel tbody tr{cursor:default}
table.soorttabel tbody tr:hover{background:transparent}

/* ============ multi-select met insluiten/uitsluiten ============ */
.msel{position:relative}
.msel-knop{
  width:100%;text-align:left;padding:6px 24px 6px 9px;border-radius:var(--r);border:1px solid var(--lijn);
  background:var(--vlak);color:var(--ink);font-size:var(--t-fijn);cursor:pointer;position:relative;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.msel-knop:hover{border-color:var(--ink3)}
.msel-knop::after{content:"";position:absolute;right:9px;top:50%;width:6px;height:6px;
  border-right:1.5px solid var(--ink3);border-bottom:1.5px solid var(--ink3);
  transform:translateY(-70%) rotate(45deg)}
.msel-knop.aan{border-color:var(--accent);color:var(--accent);background:var(--accent-zacht)}
.msel-knop.uit{border-color:var(--oud-fg);color:var(--oud-fg);background:var(--oud-bg)}
.msel-pop{
  position:absolute;z-index:24;left:0;right:0;top:calc(100% + 3px);
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--schaduw);
  max-height:320px;min-width:230px;display:flex;flex-direction:column;overflow:hidden;
}
.msel-kop{padding:7px;border-bottom:1px solid var(--lijn2);background:var(--vlak2);flex:none}
.msel-modus{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:6px;
  background:var(--vlak3);border-radius:var(--r);padding:2px}
.msel-modus button{
  border:0;background:none;padding:4px 6px;border-radius:var(--r);font-size:var(--t-mini);font-weight:600;
  color:var(--ink2);cursor:pointer;
}
.msel-modus button[aria-pressed="true"]{background:var(--vlak);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.msel-modus button[data-m="not"][aria-pressed="true"]{color:var(--oud-fg)}
.msel-zoek{width:100%;padding:5px 8px;font-size:var(--t-fijn)}
.msel-lijst{overflow:auto;padding:4px 0}
.msel-rij{display:flex;align-items:center;gap:8px;padding:5px 9px;font-size:var(--t-fijn);cursor:pointer;color:var(--ink);line-height:1.35}
.msel-rij>span:not(.n){flex:1;min-width:0}
.msel-rij:hover{background:var(--vlak2)}
.msel-rij input{accent-color:var(--accent);margin:0;width:auto;flex:none}
.msel-rij .n{flex:none;font-family:var(--mono);font-size:var(--t-mini);color:var(--ink3);padding-left:6px}
.msel-voet{padding:7px 9px;border-top:1px solid var(--lijn2);display:flex;gap:12px;align-items:center;white-space:nowrap;
  font-size:var(--t-mini);background:var(--vlak2);flex:none}
.msel-voet button{background:none;border:0;color:var(--accent);cursor:pointer;font-size:var(--t-mini);padding:0}
.msel-voet .telling{margin-left:auto;color:var(--ink3);font-family:var(--mono)}
.msel-geen{padding:12px 10px;color:var(--ink3);font-size:var(--t-fijn);text-align:center}
/* Waar de getallen naast de opties over gaan: de hele database, of wat er van je
   selectie over is. Zonder die regel leest 112.528 als het aantal dat je overhoudt. */
.msel-bron{padding:6px 9px;border-top:1px solid var(--lijn2);font-size:var(--t-mini);color:var(--ink2);flex:none}
/* Een optie die binnen de selectie niets meer oplevert blijft staan, maar gedempt. */
.msel-rij.nul>span:not(.n){color:var(--ink3)}
.msel-rij.nul .n{opacity:.6}
.chip.uit{background:var(--oud-bg);color:var(--oud-fg)}

/* ============================================================
   Ontwerp v2: paginakoppen, resultaatbalk,
   verbruiksgrafiek, omgedraaid beheer, zijpaneel.
   ============================================================ */

/* ---------- paginakop: titel plus één regel uitleg ---------- */
.paginakop{display:flex;align-items:flex-end;gap:14px;margin:2px 0 14px}
.paginakop h1{margin:0 0 2px;font-size:var(--t-mini);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink3)}
.paginakop p{margin:0;font-size:var(--t-fijn);color:var(--ink2);max-width:70ch}
.paginakop>*:last-child:not(div){margin-left:auto;flex:none}
.paginakop .knop{margin-left:auto;flex:none}

.pagina{padding:14px 14px 60px;max-width:1180px;margin:0 auto}
.pagina.smal{max-width:760px}

/* ---------- resultaatbalk boven de tabel ---------- */
.cijferbalk{display:flex;gap:0;flex-wrap:wrap;margin-bottom:10px;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.cijferbalk:empty{display:none}
.cb{padding:9px 15px;font-size:var(--t-fijn);color:var(--ink2);border-right:1px solid var(--lijn2);flex:1 1 auto}
.cb:last-child{border-right:0}
.cb b{font-family:var(--mono);font-size:var(--t-groot);font-weight:600;color:var(--ink);
  letter-spacing:-.02em;margin-right:5px}
.cb.zacht{color:var(--ink3);font-size:var(--t-fijn)}
.cb.bezig{min-height:35px;background:linear-gradient(90deg,var(--vlak),var(--vlak3),var(--vlak));
  background-size:200% 100%;animation:glans 1.1s linear infinite}

/* ---------- rijkere lege staat ---------- */
.voorbeelden{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.voorbeeld{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  background:var(--vlak2);border:1px solid var(--lijn);border-radius:var(--r);padding:10px 13px;
  max-width:220px;color:var(--ink)}
.voorbeeld:hover{border-color:var(--accent);background:var(--accent-zacht)}
.voorbeeld b{font-size:var(--t-fijn);font-weight:600;line-height:1.35}
.voorbeeld span{font-size:var(--t-mini);color:var(--accent)}
.leegrij{color:var(--ink2);font-size:var(--t-fijn);padding:22px 14px !important;text-align:center}
.leegtekst{color:var(--ink3);font-size:var(--t-fijn);margin:0}
.skeletblok{height:64px;border-radius:var(--r);margin-bottom:8px;
  background:linear-gradient(90deg,var(--lijn2),var(--vlak3),var(--lijn2));
  background-size:200% 100%;animation:glans 1.1s linear infinite}
.skeletblok.klein{height:26px}

/* ---------- kaart ---------- */

.toprij{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}

/* ---------- mijn klanten: matchrapport ---------- */
.rapport{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:10px}
.rk{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:13px 15px}
.rk b{display:block;font-family:var(--mono);font-size:var(--t-h2);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.rk span{display:block;font-size:var(--t-mini);color:var(--ink2);margin-top:2px}
.rk.goed b{color:var(--klant-fg)}
.rk.let b{color:var(--oud-fg)}
.rk .knop{margin-top:9px}
.dekking{display:flex;align-items:center;gap:11px;margin-bottom:14px;font-size:var(--t-fijn);color:var(--ink2)}
.dekbalk{flex:1;height:7px;border-radius:var(--r);background:var(--spoor);overflow:hidden;max-width:340px}
.dekbalk i{display:block;height:100%;background:var(--klant-fg);border-radius:var(--r)}
.kaart.ingeklapt h2,.kaart.ingeklapt .toelicht{display:none}
.kaart.ingeklapt .sleepvlak{padding:12px;font-size:var(--t-fijn)}

/* ---------- verbruiksgrafiek ---------- */
.grafiek{position:relative;padding:20px 0 22px;margin-top:4px}
.vdrij{display:flex;align-items:flex-end;gap:2px;height:var(--h)}
.vd{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.vd i{display:block;width:100%;background:var(--accent);border-radius:var(--r) var(--r) 0 0;min-height:1px}
.vd.nul i{background:var(--lijn2)}
.vd.vandaag i{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.vd span{font-family:var(--mono);font-size:var(--t-mini);color:var(--ink3);margin-top:4px;height:12px}
.limietlijn,.looplijn{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--oud-fg);pointer-events:none}
.looplijn{border-top:1px solid var(--accent);opacity:.55}
.limietlijn span,.looplijn span{position:absolute;right:0;top:-15px;font-size:var(--t-mini);
  font-family:var(--mono);color:var(--oud-fg);background:var(--vlak);padding:0 4px}
.looplijn span{color:var(--accent);right:auto;left:0}
.filterkolom{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- instellingen ---------- */
.accountregel{display:flex;align-items:center;gap:12px;padding:12px 16px;margin-bottom:12px;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r)}
.accountregel .avatar{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:var(--t-klein)}
.accountregel .wie{display:grid;line-height:1.35}
.accountregel .wie b{font-size:var(--t-klein)}
.accountregel .wie span{font-size:var(--t-fijn);color:var(--ink2)}
.accountregel .rol{margin-left:auto;font-size:var(--t-mini);color:var(--ink2);
  background:var(--vlak3);border-radius:var(--r);padding:3px 8px}

/* ---------- beheer ---------- */
.orgkaart.uit{opacity:.62}
.stiplamp{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}
.stiplamp.groen{background:var(--klant-fg)}
.stiplamp.oranje{background:var(--waarschuw)}
.stiplamp.rood{background:var(--rood)}
.stiplamp.uit{background:var(--ink3)}
.orgkaart .gr{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--lijn2)}
.orgkaart .gr:last-child{border-bottom:0}
.orgkaart .ge{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-fijn)}
.orgkaart .gk{flex:none;display:flex;gap:4px}

/* ---------- zijpaneel voor formulieren ---------- */
#zijpaneel{position:fixed;inset:0;z-index:1200;display:none}
#zijpaneel.open{display:block}
#zijpaneel .waas{position:absolute;inset:0;background:rgba(10,16,24,.42)}
#zijpaneel .zijblad{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);
  background:var(--vlak);border-left:1px solid var(--lijn);box-shadow:var(--schaduw);
  display:flex;flex-direction:column;animation:schuif .18s ease}
@keyframes schuif{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.zijkop{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--lijn);flex:none}
.zijkop h2{margin:0;font-size:var(--t-klein)}
.zijkop .sluit{margin-left:auto;background:none;border:0;font-size:var(--t-h3);line-height:1;
  color:var(--ink2);cursor:pointer;padding:0 4px}
.zijkop .sluit:hover{color:var(--ink)}
.zijlijf{padding:18px;overflow:auto;flex:1}
.zijlijf h3{margin:0 0 3px;font-size:var(--t-fijn)}
.zijlijf .hint{display:block;font-size:var(--t-mini);color:var(--ink3);margin-top:3px}
.scheiding{border:0;border-top:1px solid var(--lijn);margin:22px 0}
.knop.groot{width:100%;padding:9px;font-size:var(--t-klein);margin-top:14px}

/* ---------- inlogscherm als etalage ---------- */
/* Merkteken plus titel vormen samen de weg terug naar de voorpagina. Zonder
   eigen opmaak kreeg die link de blauwpaarse browserstandaard met onderstreping. */
.merkkop a{display:inline-flex;align-items:center;gap:12px;
  color:inherit;text-decoration:none;transition:opacity .18s}
.merkkop a:visited{color:inherit}
.merkkop a:hover{opacity:.72}
.merkkop .merkteken{flex:0 0 auto;display:block}
.merkkop span{line-height:1}
#inlog .zij{background:var(--etalage);border-left:0;color:var(--op-etalage);
  position:relative;overflow:hidden;padding:var(--vak)}
#inlog .zij::before{content:"";position:absolute;inset:0;opacity:.10;
  background-image:linear-gradient(var(--op-etalage) 1px,transparent 1px),
    linear-gradient(90deg,var(--op-etalage) 1px,transparent 1px);
  background-size:34px 34px}
#inlog .zij .blok{position:relative;max-width:340px}
#inlog .zij h2{color:var(--op-etalage);font-size:var(--t-h3);font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:0 0 12px}
#inlog .zij p{color:var(--op-etalage-zacht);margin:0 0 26px;font-size:var(--t-klein)}
#inlog .zij .cijfer b{color:var(--op-etalage);font-size:var(--t-h2)}
#inlog .zij .cijfer span{color:var(--op-etalage-zacht)}
.kenmerken{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:8px}
.kenmerken li{font-size:var(--t-fijn);color:var(--op-etalage);padding-left:22px;position:relative}
.kenmerken li::before{content:"";position:absolute;left:2px;top:5px;width:9px;height:5px;
  border-left:1.8px solid var(--op-etalage);border-bottom:1.8px solid var(--op-etalage);
  transform:rotate(-45deg)}
.foutvlak{background:var(--oud-bg);color:var(--oud-fg);border-radius:var(--r);padding:8px 11px;
  font-size:var(--t-fijn);margin-top:12px}

/* ---------- compacte tabelweergave ---------- */
body.compact tbody td{padding:4px 11px}
body.compact .cb{padding:7px 13px}

@media (max-width:1000px){
}
.hint.onder{display:block;margin:-3px 0 9px 23px;line-height:1.35}

/* bij een smal venster liep de rechterkant van de bovenbalk buiten beeld */
@media (max-width:900px){
  .balk .meter{display:none}
  .balk .ikwie{min-width:0;overflow:hidden}
  .balk .ikwie b,.balk .ikwie span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
  .balk{gap:8px;padding:0 10px}
  .merk span{display:none}
}

/* ---------- overzichtspagina ---------- */
.domeinraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;margin-bottom:12px}
.domein{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:15px 17px}
.domein h2{margin:0 0 3px;font-size:var(--t-klein);display:flex;align-items:baseline;gap:8px}
.domein h2 .aant{margin-left:auto;font-size:var(--t-mini);font-weight:400;color:var(--ink3);font-family:var(--mono)}
.domein .uitleg{margin:0 0 12px;font-size:var(--t-fijn);color:var(--ink2);line-height:1.45}
.veldlijst{display:grid;gap:1px}
.veldregel{display:grid;grid-template-columns:1fr 64px 62px 34px;align-items:center;gap:9px;
  padding:5px 6px;border-radius:var(--r);font-size:var(--t-fijn);text-align:left;background:none;border:0;color:var(--ink);width:100%}
.veldregel.klikbaar{cursor:pointer}
.veldregel.klikbaar:hover{background:var(--accent-zacht)}
.veldregel .vn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.veldregel .vb{height:5px;border-radius:var(--r);background:var(--spoor);overflow:hidden}
.veldregel .vb i{display:block;height:100%;background:var(--accent);border-radius:var(--r)}
.veldregel .vg{font-family:var(--mono);font-size:var(--t-mini);text-align:right;color:var(--ink2)}
.veldregel .vp{font-family:var(--mono);font-size:var(--t-mini);text-align:right;color:var(--ink3)}
/* De index op de klantenpagina: boven de 120 oververtegenwoordigd, onder de 80
   ondervertegenwoordigd. Kleur alleen op die twee uitersten, anders wordt de lijst
   een kerstboom en zegt de kleur niets meer. */
.veldregel .vp.op{color:var(--klant-fg);font-weight:600}
.veldregel .vp.onder{color:var(--oud-fg)}
/* Een veldregel is op de klantenpagina een button; die erft geen opmaak. */
button.veldregel{width:100%;border:0;background:none;font:inherit;color:inherit;text-align:left}
#klantanalyse .domeinraster{margin-bottom:0}
#klantanalyse .kopregel{margin-bottom:6px}
#klantanalyse .kopregel h2{margin:0}
#klantanalyse .kopregel .stand{font-size:var(--t-mini);color:var(--ink3);font-family:var(--mono)}
#klantanalyse .domein h2 .aant{font-family:inherit;letter-spacing:0}
.domein .voetnoot{margin:10px 0 0;font-size:var(--t-mini);color:var(--ink3)}

/* Een uitklapbaar domeinblok. <details> brengt zijn eigen driehoekje mee en dat past
   nergens bij, dus die gaat weg en er komt een eigen pijltje voor terug, helemaal rechts
   achter de telling. Staat het blok open, dan wijst hij omlaag. */
.domein.vouw>summary{list-style:none;cursor:pointer;margin:0 0 3px;border-radius:var(--r)}
.domein.vouw>summary::-webkit-details-marker{display:none}
.domein.vouw>summary::marker{content:""}
.domein.vouw>summary:hover h2{color:var(--accent)}
.domein.vouw>summary h2{margin:0;align-items:center;gap:8px}
.domein.vouw>summary h2::after{content:"";width:6px;height:6px;flex:0 0 auto;margin:0 2px 0 4px;
  border-right:1.6px solid var(--ink3);border-bottom:1.6px solid var(--ink3);
  transform:rotate(-45deg);transition:transform .15s}
.domein.vouw[open]>summary h2::after{transform:rotate(45deg)}
/* Een lange tabel die op een telefoon is ingekort. De knop eronder haalt de klasse weg
   en dan staat de rest er alsnog. */
tbody.beknopt tr:nth-child(n+26){display:none}
.meerknop{width:100%;margin-top:8px}

/* De stijlen voor de broncatalogus stonden hier (.bronrij, .bron). Dat blok is van de
   overzichtspagina gehaald: het toonde ook de marktplaatsdata van TrucksNL, en dat hoort
   een externe klant niet te zien. De regels zelf zijn nu ook weg, want .bron pakte per
   ongeluk het bronlabel in de accountkaart (class="merkje bron") en maakte daar een
   breed grijs blok van in plaats van een klein pilletje. */

/* ============================================================
   Mobiel. Drie stappen: onder 960 px wordt de filterrail een
   schuifpaneel, onder 760 px wordt de tabel een lijst kaarten,
   onder 520 px gaat alles op één kolom.
   ============================================================ */

/* ---------- filterrail als schuifpaneel ---------- */
.railsluit{display:none;background:none;border:0;font-size:var(--t-h3);line-height:1;
  color:var(--ink2);cursor:pointer;padding:0 2px;margin-left:8px}
.railknop[data-aantal]:not([data-aantal=""])::after{
  content:attr(data-aantal);margin-left:7px;background:var(--accent);color:var(--accent-ink);
  border-radius:99px;padding:0 6px;font-size:var(--t-mini);font-family:var(--mono);font-weight:600}

@media (max-width:960px){
  .rail{
    position:fixed;inset:0;z-index:1150;max-height:none;border:0;border-radius:0;
    display:flex;flex-direction:column;overflow:auto;box-shadow:none;
    animation:railin .16s ease;
    /* De filterlade dekt het hele scherm. Zonder dit scrolt de pagina eronder
       door zodra je in de lade voorbij het einde veegt. */
    overscroll-behavior:contain;
    padding-top:env(safe-area-inset-top);
  }
  @keyframes railin{from{transform:translateY(14px);opacity:.5}to{transform:none;opacity:1}}
  .rail.dicht{display:none}
  .railkop{position:sticky;top:0;z-index:2;background:var(--vlak);padding:13px 16px;font-size:var(--t-fijn)}
  .railsluit{display:block}
  .groepinhoud{padding:2px 16px 16px}
  .groep>summary{padding:12px 16px;font-size:var(--t-klein)}
  .railvoet{position:sticky;bottom:0;padding:12px 16px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .railvoet .knop{padding:9px;font-size:var(--t-klein)}
  body.railopen{overflow:hidden}
  /* het lege plekje waar de rail stond mag geen ruimte innemen */
  #railplek-zoeken:empty{display:none}
}

/* ---------- onder 760 px: tabel wordt een lijst kaarten ---------- */
@media (max-width:760px){
  /* Op een telefoon paste de balk niet: naam, organisatie en Uitloggen liepen
     samen buiten beeld. De naam staat ook op Instellingen, dus die mag hier weg;
     de balk zelf krijgt de ruimte die zijn knoppen nodig hebben. */
  .balk{min-height:var(--balkh);padding:0 12px}
  .balk .ikwie{display:none}
  .merk b{font-size:var(--t-fijn)}
  /* De tabbalk schoof horizontaal: 445 px aan tabbladen in een venster van 390,
     met een verborgen schuifbalk, dus je zag niet eens dat er meer was. Nu
     breken ze af over twee regels, zodat alle tabbladen meteen in beeld staan. */
  .tabs{top:var(--balkh);flex-wrap:wrap;overflow:visible;padding:2px 8px 0;row-gap:0}
  /* Acht tabbladen op een telefoon: met ruime zijkanten liepen ze over drie regels en
     kostte de balk alleen al 130 px. Krapper naast de tekst, en dan passen ze op twee. */
  .tab{padding:9px 7px;font-size:var(--t-fijn);white-space:nowrap;flex:none}

  .werkblad{padding:10px 12px 96px;gap:0}
  .pagina{padding:10px 12px 80px}
  .paginakop{margin-bottom:11px;flex-wrap:wrap}
  .paginakop p{font-size:var(--t-fijn)}
  .paginakop .knop{margin-left:0;width:100%;margin-top:8px}

  .cijferbalk{flex-direction:column}
  .cb{border-right:0;border-bottom:1px solid var(--lijn2);padding:8px 13px}
  .cb:last-child{border-bottom:0}

  .kopregel{gap:7px}
  .kopregel .rechts{margin-left:0;width:100%;flex-wrap:wrap}
  .kopregel .rechts select,.kopregel .rechts input{flex:1;min-width:96px;width:auto}

  /* alleen de resultatentabel wordt een kaartenlijst; de tabellen bij Mijn klanten
     en Verbruik blijven een tabel en mogen gewoon zijwaarts schuiven */
  #p-zoeken .tabelvlak{border:0;background:none;overflow:visible;border-radius:0}
  .tabelvlak{-webkit-overflow-scrolling:touch}
  #p-zoeken #tabel{min-width:0;display:block;font-size:var(--t-fijn)}
  #p-zoeken #tabel colgroup,#p-zoeken #tabel thead{display:none}
  #p-zoeken #tabel tbody{display:block}
  /* De kaart was een rij inline-blokken: naam, adres, postcode, plaats, branche en vijf
     getallen liepen achter elkaar door en braken waar het uitkwam. Nu een raster van drie
     kolommen: alles wat tekst is loopt over de volle breedte, en elk getal krijgt zijn
     eigen vakje met het label erboven. Daarmee staat er een kaart in plaats van een
     alinea met cijfers erin. */
  #tabel tbody tr{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px;
    position:relative;background:var(--vlak);border:1px solid var(--lijn);
    border-radius:var(--r);padding:12px 48px 13px 13px;margin-bottom:8px;
  }
  #tabel tbody tr.actief{border-color:var(--accent)}
  #tabel td{grid-column:1 / -1;display:block;border:0;padding:0;min-width:0}
  #tabel td.verborgen{display:none !important}
  /* Het vinkje staat absoluut in de rechterbovenhoek. Let op: de rij is een raster, en
     een absoluut geplaatst raster-item rekent zijn plek vanaf zijn rastervak zolang er
     een grid-column op staat. Met de erfelijke `grid-column:1 / -1` was dat het contentvak
     en kwam het vinkje veertig pixels naar links, dwars over de bedrijfsnaam. Terug op
     auto rekent hij weer vanaf de rand van de kaart. */
  #tabel td.kies{position:absolute;grid-column:auto;grid-row:auto;
    top:12px;right:12px;left:auto;width:20px;padding:0}
  td.kies input{width:19px;height:19px;margin:0}
  /* De naam is de kop van de kaart en mag een maat groter dan de regels eronder;
     op een aanraakscherm staan die allebei op 15 px en verdween het verschil. */
  td[data-k="bedrijf"]{font-size:var(--t-groot);line-height:1.3;margin-bottom:2px}
  td[data-k="sbi"]{margin-top:4px}
  td[data-k="sbi"] .code{margin-right:6px}
  /* de omschrijving mag over twee regels lopen in plaats van afgekapt te worden */
  td[data-k="sbi"] .oms{font-size:var(--t-mini);white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #tabel tbody td{max-width:100%;white-space:normal}
  /* In de tabel staat "op eigen naam" vet en rechts uitgelijnd, want daar is het een
     kolom met getallen. Op een kaart staan de drie getallen naast elkaar en dan viel
     er eentje willekeurig vet uit, kopje en al. Hier dus alle drie hetzelfde. */
  #tabel td.getal,#tabel td.tot{
    grid-column:auto;text-align:left;margin:10px 0 0;font-size:var(--t-fijn);
    white-space:nowrap;font-weight:400;
  }
  /* In kaartweergave staat de naam van het veld boven de waarde. De bedrijfsnaam krijgt
     geen kopje: die is de kop van de kaart. */
  #tabel td[data-label]:not([data-k="bedrijf"])::before{
    content:attr(data-label);display:block;font-family:Inter,sans-serif;font-size:var(--t-mini);
    color:var(--ink3);letter-spacing:.02em;margin-bottom:2px;font-weight:400;
  }
  .leegvlak{padding:34px 16px}
  .voorbeelden{flex-direction:column;align-items:stretch}
  .voorbeeld{max-width:none}
  .pager{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);margin-top:4px}

  /* overzicht */
  .domeinraster{grid-template-columns:1fr}
  .domein{padding:13px 14px}
  /* De getalkolommen waren te smal voor wat erin staat: "3.182.271" heeft op een
     aanraakscherm 70 px nodig en kreeg er 46, dus liep het getal dwars door het percentage
     heen ("3.182.27100%"). De balk vervalt hier al, dus die ruimte is er. */
  .veldregel{grid-template-columns:minmax(0,1fr) 78px 44px;gap:8px}
  .veldregel .vb{display:none}
  .veldregel .vg,.veldregel .vp{white-space:nowrap}
  .kpirij{grid-template-columns:1fr 1fr}

  /* kaart */
  .toprij{grid-template-columns:1fr 1fr}

  /* mijn klanten, verbruik, beheer */
  .rapport{grid-template-columns:1fr}
  .dekking{flex-wrap:wrap}
  .dekbalk{max-width:none;order:2;flex-basis:100%}
  .orgraster{grid-template-columns:1fr}
  .orgkaart .gr{flex-wrap:wrap}
  .orgkaart .gk{width:100%}
  .filterkolom{max-width:150px}
  .grafiek{padding:20px 0 22px}
  .vd span{font-size:var(--t-mini)}

  /* detailpaneel schermvullend */
  #paneel .blad{width:100% !important;max-width:none}
  /* de tabellen in het paneel mogen zijwaarts schuiven in plaats van afgekapt te worden */
  #blad .sectie{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* de voertuiglijst is met alle kolommen te breed voor een telefoon; de minder
     gebruikte kolommen gaan eruit, ze staan wel in de export */
  #blad .vlootlijst th:nth-child(n+8),
  #blad .vlootlijst td:nth-child(n+8){display:none}
  #zijpaneel .zijblad{width:100%}
  .velden{grid-template-columns:1fr}

  /* keuzebalk boven de duimzone */
  .keuzebalk{left:12px;right:12px;transform:none;width:auto;justify-content:space-between;
    bottom:calc(14px + env(safe-area-inset-bottom))}
  .keuzebalk.open{transform:none}
}

/* ---------- onder 520 px ---------- */
@media (max-width:520px){
  .kpirij{grid-template-columns:1fr}
  .toprij{grid-template-columns:1fr}
  #inlog .form{padding:22px 18px}
  #inlog h1{font-size:var(--t-h3)}
  .kopregel .rechts .knop{flex:1}
  #tabel tbody tr{padding:11px 40px 11px 12px}
  .bronregel{grid-template-columns:1fr 40px}
}

/* Raakvlakken groot genoeg voor een vinger. */
@media (hover:none){
  .knop,.tab,.veldregel.klikbaar,.voorbeeld{min-height:38px}
  .knop.klein{min-height:34px;padding:6px 10px}
  input[type=checkbox]{width:18px;height:18px}
  .vink{padding:5px 0}
}

/* ---------- voertuigiconen ---------- */
.vi{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linejoin:round;display:inline-block;vertical-align:-3px}
th.ikoon{text-align:right;padding-top:6px;padding-bottom:6px}
th.ikoon .vi{color:var(--ink3)}
th.ikoon:hover .vi,th.sorteer.ikoon:hover .vi{color:var(--ink)}
/* alleen voor schermlezers; het icoon draagt de betekenis visueel */
.vsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* In de tabel draagt de kolomkop het icoon al. In de cel zou het alleen
   ruimte kosten en over het getal heen lopen, dus daar staat het uit. */
#p-zoeken #tabel td.getal .vi,#p-zoeken #tabel td.tot .vi{display:none}
td.getal .vi{color:var(--ink3);margin-right:5px}

/* Op de kaartweergave zijn de kolomkoppen weg; daar vervangt het icoon het label. */
@media (max-width:760px){
  #p-zoeken #tabel td.getal[data-label]::before,
  #p-zoeken #tabel td.tot[data-label]::before{content:attr(data-label)}
  #p-zoeken #tabel td.getal .vi,#p-zoeken #tabel td.tot .vi{
    display:inline-block;width:15px;height:15px;margin-right:4px}
}

/* ---------- doorklikbare waarden ---------- */
.dk{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-align:left;border-bottom:1px dotted var(--lijn);border-radius:0}
.dk:hover{color:var(--accent);border-bottom-color:var(--accent)}
.dk:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
td .dk{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.paar dd .dk{border-bottom-style:dotted}

/* ============================================================
   Ontwerplaag, 27 augustus 2026.

   Staat bewust achteraan en overschrijft de laag erboven, zodat de oude regels
   leesbaar blijven en je kunt zien wat er veranderd is en waarom.

   Aanleiding, gemeten in de tool zelf: de filterrail was 250 px breed naast een
   tabelvlak van 1615 px, de filterinhoud 5.222 px hoog in een venster van 786 px,
   en er moest onderaan op Zoeken worden gedrukt. Van de eerste 50 rijen waren er
   39 leasemaatschappijen.
   ============================================================ */

body{font-size:var(--t-klein);line-height:1.55}

/* De lichtste tekstkleur haalde 2,98 op wit en 3,91 in het donker. Ze wordt ook
   gebruikt op de twee lichtere vlakken (de railkop, de tabelkop, de slotreden), dus
   hij moet tegen alle drie de achtergronden 4,5 halen. Licht: 5,10 op wit, 4,88 op
   vlak2, 4,54 op vlak3. Donker: 4,90 / 5,14 / 4,56. */
:root{--ink3:#646f7e}

/* ---------- meer ruimte, bredere rail ---------- */
.werkblad{grid-template-columns:320px 1fr;gap:16px;padding:16px 20px 90px}
@media (max-width:960px){.werkblad{grid-template-columns:1fr}}
.rail{border-radius:var(--r)}
/* De kop had display:flex en zette de nieuwe zoekbalk naast de titel in plaats van
   eronder. En hij scrolde weg met de rest; nu blijft hij staan, net als de voet met
   het aantal, zodat je tijdens het scrollen altijd ziet wat je selectie oplevert. */
.railkop{display:block;padding:12px 14px 11px;position:sticky;top:0;z-index:2;
  background:var(--vlak);text-transform:none;letter-spacing:0;font-size:inherit;font-weight:400}
.railkoprij{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.railkoprij>span:first-child{font-size:var(--t-mini);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);font-weight:700}
.railvoet{position:sticky;bottom:0;z-index:2}
.railkop .filterzoek{width:100%;padding:8px 11px;border-radius:var(--r);border:1px solid var(--lijn);
  background:var(--vlak2);color:var(--ink);font-size:var(--t-fijn);font-family:inherit}
.railkop .filterzoek::placeholder{color:var(--ink3)}
.railkop .geenfilter{margin:9px 0 0;font-size:var(--t-fijn);color:var(--ink2)}
.groep>summary{padding:11px 14px;font-size:var(--t-fijn)}
.groepinhoud{padding:2px 14px 14px}
.veld{margin-bottom:8px}
.vink{font-size:var(--t-fijn);margin-bottom:8px;padding:3px 0;gap:9px}
.vink input{width:16px;height:16px}
input[type=text],input[type=number],input[type=password],input[type=email],select,textarea{
  padding:8px 11px;border-radius:var(--r);font-size:var(--t-fijn)}
.railvoet{display:flex;align-items:center;justify-content:space-between;gap:9px;
  padding:11px 14px;border-top:1px solid var(--lijn);background:var(--vlak2)}
.railvoet .uitslag{font-size:var(--t-fijn);color:var(--ink2)}
.railvoet .uitslag b{font-family:var(--mono);color:var(--ink);font-weight:600}

/* ---------- filterrail: rust en richting ----------
   Sinds alle acht groepen dichtgeklapt beginnen is de rail een lijst kopregels. Dan
   moet die lijst wél vertellen waar je bent en wat er aanstaat, anders klik je acht
   keer om één filter terug te vinden. */

/* De kop hangt vast bovenaan; zonder scheiding schuift de inhoud er onzichtbaar
   onderdoor. Een lijn plus een zachte schaduw is genoeg. */
.railkop{border-bottom:1px solid var(--lijn);box-shadow:0 6px 10px -10px rgba(0,0,0,.35)}

/* De kopregel van een groep is het enige waar je op klikt; maak dat voelbaar. */
.groep>summary{
  transition:background .12s ease, color .12s ease;
  border-left:2px solid transparent;padding-left:12px;
}
.groep>summary:hover{background:var(--vlak3)}
.groep[open]>summary{background:var(--vlak2);border-left-color:var(--lijn)}
.groep.actief>summary{border-left-color:var(--accent)}
.groep[open]>summary::before{border-right-color:var(--accent);border-bottom-color:var(--accent)}

/* De stip is een teller geworden: hoeveel filters staan er in deze groep aan. */
.groep>summary .stip{
  width:auto;height:17px;min-width:17px;border-radius:99px;background:var(--accent);
  color:var(--accent-ink);margin-left:auto;display:none;
  font-family:var(--mono);font-size:var(--t-mini);font-weight:600;line-height:17px;
  text-align:center;padding:0 5px;letter-spacing:0;
}
.groep.actief>summary .stip{display:block}

/* Een open groep krijgt lucht onder de kop en een lijn erboven, zodat je ziet waar
   hij begint en waar hij ophoudt. */
.groep[open]>.groepinhoud{padding-top:11px;border-top:1px solid var(--lijn2)}

/* Vinkjes stonden als losse regels tekst tussen de invulvelden. Nu een blok met
   dezelfde hoogte per regel, een echte hoverstaat en een klikvlak over de hele
   breedte, dat leest als een lijst keuzes in plaats van als losse zinnen. */
.groepinhoud .vink{
  margin:0 -8px;padding:7px 8px;border-radius:var(--r);
  min-height:32px;color:var(--ink);transition:background .12s ease;
}
.groepinhoud .vink:hover{background:var(--vlak3)}
.groepinhoud .vink:has(input:checked){color:var(--accent);font-weight:500}
.groepinhoud .veld + .vink{margin-top:4px}

/* Invoervelden en keuzelijsten reageren op de muis, zodat je ziet dat je erin kunt. */
.groepinhoud input[type=text],.groepinhoud input[type=number],.groepinhoud select,
.msel-knop{transition:border-color .12s ease, background .12s ease}
.groepinhoud input[type=text]:hover,.groepinhoud input[type=number]:hover,
.groepinhoud select:hover,.msel-knop:hover{border-color:var(--ink3)}

/* Een keuzelijst waar nog niets in gekozen is toont zijn eigen naam als eerste regel;
   die staat grijs, zodat je ziet dat het een naam is en geen gekozen waarde. */
.groepinhoud select:has(option[value=""]:checked){color:var(--ink2)}
.groepinhoud select option{color:var(--ink)}

/* ---------- een combinatie die niets kan opleveren ----------
   Geen slot meer: elke groep blijft bruikbaar, ongeacht de wagenparkkeuze. Alleen als
   de combinatie werkelijk tegenstrijdig is verschijnt hier een regel met een uitweg. */
.slotreden{background:var(--vlak3);border-radius:var(--r);padding:9px 11px;font-size:var(--t-fijn);
  color:var(--ink2);margin:0 0 12px;line-height:1.45}
.slotreden b{color:var(--ink);font-weight:600}
.slotreden.botsing{background:color-mix(in srgb, var(--oud-bg) 45%, var(--vlak3));
  border:1px solid color-mix(in srgb, var(--oud-fg) 30%, transparent)}
.slotreden.botsing .knop{margin-top:8px}

/* Eén regel uitleg boven in een filtergroep, voor een groep die anders verkeerd begrepen
   wordt. Zelfde vorm als .slotreden maar rustiger: dit is geen waarschuwing. */
.groepuitleg{background:var(--vlak3);border-radius:var(--r);padding:9px 11px;
  font-size:var(--t-fijn);color:var(--ink2);margin:0 0 12px;line-height:1.45}

/* ---------- tabel: meer lucht ---------- */
#p-zoeken thead th{padding:11px 13px;font-size:var(--t-mini)}
#p-zoeken tbody td{padding:12px 13px;font-size:var(--t-klein)}
#p-zoeken td.getal{font-size:var(--t-fijn)}
.kopregel .cijferbalk .cb b{font-size:var(--t-klein)}

/* ---------- bedrijfsprofiel: uitleg en zustervestigingen ---------- */
/* .uitleg stond alleen binnen .domein; in het profiel had hij geen stijl. */
.sectie .uitleg{margin:0 0 10px;font-size:var(--t-fijn);color:var(--ink2);line-height:1.5}
/* Een waarde die we bewust niet tonen, bijvoorbeeld een verhouding bij een
   wagenpark van minder dan vijf voertuigen. Zachter dan een echte waarde, maar
   nog wel leesbaar: het is informatie, geen ontbrekend veld. */
.paar dd .stil{color:var(--ink3);font-size:var(--t-fijn);font-style:normal}

/* ---------- wagenparkblok in de accountkaart ----------
   Het wagenpark stond verspreid over drie losse blokken met dezelfde grijze opmaak:
   een tabel met klassen, een lijst kenmerken en een lijst aankoopgedrag. Je zag niet
   waar je moest kijken. Nu is het een blok met drie lagen: wat voor wagenpark het is,
   waarom je zou bellen, en waar het uit bestaat.

   Verhoudingen staan als balkje van vijf blokjes, niet als percentage: een verkoper
   doet er hetzelfde mee en het scheelt de laatste rekenstap terug naar een individueel
   voertuig. */
.wp{border:1px solid var(--lijn);background:var(--vlak);border-radius:3px;overflow:hidden}
.wpkop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:13px 15px;background:var(--vlak2);border-bottom:1px solid var(--lijn)}
.wpkop .type{font-size:var(--t-groot);font-weight:600;color:var(--ink);line-height:1.2}
.wpkop .omvang{font-family:var(--mono);font-size:var(--t-mini);color:var(--accent);
  background:var(--accent-zacht);padding:3px 8px;border-radius:2px;white-space:nowrap}
.wpkop .lft{font-size:var(--t-fijn);color:var(--ink3)}

/* de redenen om te bellen, bovenaan omdat je daarop scant */
.wpsig{display:flex;flex-wrap:wrap;gap:6px;padding:11px 15px;border-bottom:1px solid var(--lijn2)}
.wpsig>span{font-size:var(--t-mini);line-height:1.35;padding:4px 9px;border-radius:2px;
  border:1px solid transparent;white-space:nowrap}
.wpsig>span a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.wpsig>span a:hover{border-bottom-style:solid}
.wpsig .neutraal{background:var(--vlak3);color:var(--ink2);border-color:var(--lijn)}
.wpsig .let{background:var(--oud-bg);color:var(--oud-fg)}
.wpsig .goed{background:var(--klant-bg);color:var(--klant-fg)}
.wpsig .kans{background:var(--mail-bg);color:var(--mail-fg)}

.wpraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.wpgroep{padding:13px 15px;border-right:1px solid var(--lijn2);border-top:1px solid var(--lijn2)}
.wpgroep:last-child{border-right:0}
.wpgroep h4{margin:0 0 9px;font-size:var(--t-mini);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);font-weight:600}
.wprij{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  font-size:var(--t-fijn);color:var(--ink);padding:2px 0}
.wprij .naam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wprij .kl{font-family:var(--mono);font-size:var(--t-mini);color:var(--ink2);white-space:nowrap}
.wpband{display:flex;gap:2px;flex-shrink:0}
.wpband i{width:6px;height:9px;background:var(--spoor);border-radius:1px}
.wpband i.aan{background:var(--accent)}
.wpleeg{font-size:var(--t-fijn);color:var(--ink3);padding:11px 15px;border-top:1px solid var(--lijn2)}
/* Een klasse in een getalkolom. Breder dan een getal, dus kleiner gezet en met een
   koppelteken dat niet afbreekt: "20 - 49" hoort op een regel te blijven staan. */
td.kls{font-size:var(--t-mini);white-space:nowrap;letter-spacing:-.01em}

@media (max-width:520px){
  .wpgroep{border-right:0}
}
.sectie .uitleg b{color:var(--ink)}
.vlootlijst tr.klikrij{cursor:pointer}
.vlootlijst tr.klikrij:hover{background:color-mix(in srgb, var(--accent) 7%, transparent)}
.vlootlijst tr.klikrij:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Drie cijfers naast elkaar op het inlogscherm in plaats van twee. */
#inlog .zij .cijfer b{min-width:78px}

/* ---------- links naar handleiding en productblad ---------- */
/* Op het inlogscherm: de donkere zijkant, dus lichte tekst met genoeg contrast. */
.zijvoet{margin:22px 0 0;font-size:var(--t-fijn);color:var(--op-etalage-zacht)}
.zijvoet a{color:var(--op-etalage);text-decoration:underline;text-underline-offset:2px}
.zijvoet a:hover{text-decoration-thickness:2px}
.zijvoet span{margin:0 7px;color:var(--op-etalage-zacht);opacity:.55}
/* In Instellingen staat de knopjesrij in een kaart; daar mag de marge eraf. */
.kaart .snelacties{margin-bottom:0}

/* ---------- filterrail scrollt mee ----------
   De rail had zelf al position:sticky, maar zat in een wrapper die precies even hoog
   was als de rail zelf. Een sticky element kan alleen bewegen binnen de doos van zijn
   ouder, dus er was geen ruimte om te plakken. Nu plakt de kolom, en vult de rail hem. */
.railkolom{position:sticky;top:92px;align-self:start;
  max-height:calc(100vh - 104px);display:flex;flex-direction:column;min-height:0}
/* De rail zit in een tussen-div (#railplek-zoeken); die draagt dus de hoogte,
   niet de rail zelf. Zonder deze regel groeit de div mee met zijn inhoud en steekt
   de rail onder het scherm uit. */
.railkolom>[id^="railplek-"]{flex:1;min-height:0;display:flex;flex-direction:column}
.railkolom .rail{position:static;max-height:none;flex:1;min-height:0;overflow:auto}

@media (max-width:960px){
  /* Op smal scherm is de rail een paneel over het scherm heen; dan geen plakgedrag. */
  .railkolom{position:static;max-height:none;display:block}
  /* De rail wordt door railNaar() ook op een telefoon in .railkolom gehangen, en die
     selector van twee klassen won van de laderegels hierboven: de rail stond static in
     de bladstroom en groeide met zijn inhoud mee, terwijl body.railopen het scrollen
     van de pagina tegenhoudt. Zodra je een filtergroep opende kwam je dus niet meer
     voorbij het eerste scherm. Hier staat de lade weer terug: over het scherm heen,
     met een eigen scroller. */
  .railkolom .rail{position:fixed;inset:0;max-height:none;overflow:auto;
    overscroll-behavior:contain;flex:none}
}

/* ---------- cijfers naast de telling in plaats van als eigen balk ----------
   Het aantal bedrijven stond zowel in .telling als in de cijferbalk; die dubbeling is
   eruit. Wat overblijft is bedrijven en voertuigen op één regel, met de knoppen ernaast. */
.kopregel .cijferbalk{background:none;border:0;border-radius:0;margin:0;
  padding:0;overflow:visible;display:inline-flex;gap:0}
.kopregel .cijferbalk .cb{padding:0;border:0;flex:none;font-size:var(--t-fijn);color:var(--ink2)}
.kopregel .cijferbalk .cb::before{content:"·";margin:0 8px;color:var(--ink3)}
.kopregel .cijferbalk .cb b{color:var(--ink);font-family:var(--mono)}
.kopregel .cijferbalk .cb.bezig{width:92px;height:14px;border-radius:var(--r);
  background:linear-gradient(90deg,var(--vlak2),var(--vlak3),var(--vlak2));
  background-size:200% 100%;animation:glans 1.2s linear infinite}
.kopregel .cijferbalk .cb.bezig::before{content:none}

/* ---------- het merk loopt door in de tool ----------
   Op het inlogscherm staat het logo in indigo tegen een blauw vlak. In de tool zelf
   bleef daar niets van over: alleen de vetgedrukte naam in grijs chroom. Nu staat het
   logo in de balk en is de blauwe lijn erboven zichtbaar.

   Wat bewust NIET blauw wordt: het werkblad, de tabel en de filterrail. Grijs is daar
   de norm en kleur betekent iets. Een blauw vlak achter een scherm vol getallen maakt
   de data juist slechter leesbaar. */
.balk{border-top:3px solid var(--accent)}
.merk{align-items:center}
.merklogo{color:var(--accent);flex:none;display:block;border-radius:var(--r)}
.merk b{letter-spacing:-.015em}

/* De actieve tab krijgt naast de lijn ook een lichte indigo ondergrond, zodat je in
   één oogopslag ziet waar je bent. */
.tab[aria-selected="true"]{background:var(--accent-zacht);border-radius:var(--r) var(--r) 0 0}

/* De knop die je écht gebruikt, Exporteren, is de enige die vol accent mag zijn.
   Dat was al zo voor .prim; hier trekken we hem door naar de exportknop. */
#exportknop{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
#exportknop:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 88%, #000)}
#exportknop:disabled{opacity:.55}

/* ---------- wachtwoordpaneel in Beheer ----------
   Zelfde paneel als dat voor organisaties; alleen de identiteit verschilt. */
#pwpaneel{position:fixed;inset:0;z-index:1210;display:none}
#pwpaneel.open{display:block}
#pwpaneel .waas{position:absolute;inset:0;background:rgba(10,16,24,.42)}
#pwpaneel .zijblad{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);
  background:var(--vlak);border-left:1px solid var(--lijn);display:flex;flex-direction:column;
  animation:schuif .16s ease-out}
#pwpaneel .zijkop{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--lijn)}
#pwpaneel .zijkop h2{margin:0;font-size:var(--t-klein)}
#pwpaneel .zijlijf{padding:18px;overflow:auto}
#pwpaneel .melding{margin:12px 0 16px}
#pw-nieuw{font-family:var(--mono);letter-spacing:.02em}
.uitslag.goed{color:var(--klant-fg)}
.uitslag.fout{color:var(--rood)}

/* ---------- pakketten in Beheer ---------- */
.kaartkop{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.kaartkop>div{flex:1;min-width:0}
.kaartkop h2{margin:0}
.kaartkop .toelicht{margin:3px 0 0}
.pakketrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px}
.pakket{background:var(--vlak2);border:1px solid var(--lijn);border-radius:var(--r);padding:14px 15px;
  text-align:left;cursor:pointer;display:grid;gap:3px;
  transition:border-color .12s,transform .12s,box-shadow .12s}
.pakket:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--schaduw)}
.pakket.uit{opacity:.55}
.pakket b{font-size:var(--t-klein);font-weight:650}
.pakket .prijs{font-family:var(--mono);font-size:var(--t-h3);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.pakket .prijs i{font-style:normal;font-size:var(--t-mini);color:var(--ink3);margin-left:4px;font-family:inherit}
.pakket .regels{font-size:var(--t-fijn);color:var(--ink2)}
.pakket .klanten{font-size:var(--t-mini);color:var(--ink3);margin-top:3px}

#pakketpaneel{position:fixed;inset:0;z-index:1205;display:none}
#pakketpaneel.open{display:block}
#pakketpaneel .waas{position:absolute;inset:0;background:rgba(10,16,24,.42)}
#pakketpaneel .zijblad{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);
  background:var(--vlak);border-left:1px solid var(--lijn);display:flex;flex-direction:column;
  animation:schuif .16s ease-out}
#pakketpaneel .zijlijf{padding:18px;overflow:auto}
#pak-wissen{margin-top:8px;color:var(--rood);border-color:color-mix(in srgb, var(--rood) 35%, var(--lijn))}
#pak-wissen:hover{background:var(--oud-bg)}

/* ---------- rollen: admin en klant ----------
   Twee rollen, meer niet. Een klant ziet de beheerpagina niet; de tab staat verborgen,
   de tabwissel weigert hem, en de edge function wijst elke beheer_-actie af. */
.merkje.rol{background:var(--vlak3);color:var(--ink2);font-weight:600}
.merkje.rol.admin{background:var(--accent-zacht);color:var(--accent)}
.rol.admin{color:var(--accent)}
/* De knoppenrij liep buiten de kaart: zes knoppen naast een e-mailadres passen niet in
   een kolom van een raster. Nu staat het adres op zijn eigen regel en wikkelen de
   knoppen daaronder, binnen de kaart. */
.orgkaart .gr{display:block;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--lijn2)}
.orgkaart .gr:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.orgkaart .ge{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:var(--t-fijn);color:var(--ink);word-break:break-word;margin-bottom:7px}
.orgkaart .gk{display:flex;gap:5px;flex-wrap:wrap}
.orgkaart .gk .knop{font-size:var(--t-mini);padding:4px 8px}
/* Verwijderen is definitief; die knop hoort niet op dezelfde toon als de rest. */
.knop.gevaar{color:var(--rood);border-color:color-mix(in srgb, var(--rood) 32%, var(--lijn))}
.knop.gevaar:hover{background:var(--oud-bg);border-color:var(--rood)}
#pwpaneel h3{margin:0 0 8px;font-size:var(--t-klein);font-weight:650}
#pwpaneel .let{margin-bottom:16px}
#pwpaneel .scheiding{margin:20px 0 16px}

/* ---------- meekijken als een andere gebruiker ----------
   Geen subtiel merkje maar een balk onderaan die niet weg te klikken is. Wie meekijkt
   moet dat elk moment kunnen zien, anders verklaar je vreemde cijfers aan een bug. */
#omschakelbalk{position:fixed;left:0;right:0;bottom:0;z-index:1400;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--mail-bg);color:var(--ink);border-top:2px solid var(--mail-fg);
  padding:10px 16px;font-size:var(--t-fijn)}
#omschakelbalk b{font-weight:650}
#omschakelbalk button{margin-left:auto;flex:none}
body.omgeschakeld .werkblad{padding-bottom:120px}
@media (max-width:620px){
  #omschakelbalk{font-size:var(--t-fijn);padding:9px 12px}
  #omschakelbalk button{margin-left:0;width:100%}
}

/* ---------- prijzen op het inlogscherm ---------- */
.prijsrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin:24px 0 0}
.prijskaart{display:grid;gap:2px;padding:11px 12px;border-radius:var(--r);text-decoration:none;
  background:color-mix(in srgb, var(--op-etalage) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--op-etalage) 24%, transparent);
  color:var(--op-etalage);
  transition:background .12s,border-color .12s}
.prijskaart:hover{background:color-mix(in srgb, var(--op-etalage) 20%, transparent);
  border-color:color-mix(in srgb, var(--op-etalage) 44%, transparent)}
.prijskaart b{font-size:var(--t-fijn);font-weight:650;letter-spacing:.01em}
.prijskaart .bedrag{font-family:var(--mono);font-size:var(--t-h3);font-weight:600;letter-spacing:-.02em}
.prijskaart .bedrag i{font-style:normal;font-size:var(--t-mini);opacity:.75;margin-left:3px;font-family:inherit}
.prijskaart .regels{font-size:var(--t-mini);color:var(--op-etalage-zacht);line-height:1.35}
@media (max-width:960px){ .prijsrij{margin-top:18px} }

/* ---------- inlogscherm op een breed scherm ----------
   Gemeten op 2000 px: elke helft was 1000 px terwijl de inhoud 340 px breed bleef, dus
   660 px leegte per kant. En de drie prijskaarten vielen uit elkaar in 2 + 1, wat er
   kapot uitziet. Beide opgelost: meer breedte voor de inhoud, en de kaarten altijd
   naast elkaar zolang ze passen. */
#inlog .form .inner{width:min(380px,100%)}
#inlog .zij .blok{max-width:440px}
.prijsrij{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){ .prijsrij{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))} }

/* De scheidingstekens tussen de voetlinks stonden als losse tekens in de tekst, dus bij
   het afbreken bleef er een zwevende punt achter. Nu zit de scheiding in de opmaak. */
.zijvoet{display:flex;flex-wrap:wrap;gap:6px 0;align-items:baseline}
.zijvoet a + a::before{content:"·";margin:0 8px;color:var(--op-etalage-zacht);opacity:.6;
  text-decoration:none;display:inline-block}


/* =========================================================================
   29 augustus 2026: de tool in de stijl van de voorpagina
   -------------------------------------------------------------------------
   Dit blok staat achteraan en overschrijft bewust een paar dingen hierboven.
   Zo blijft zichtbaar wat er van de oude stijl is en wat er nieuw bij komt.

   Wat er verandert:
     letters   Bebas Neue als kopletter, net als op de voorpagina. Alleen voor
               merknaam en paginakoppen; de honderd filterlabels blijven Inter,
               want smalle kapitalen lezen slecht op klein formaat.
     donker    hetzelfde palet als de voorpagina, zodat je bij het inloggen
               niet in een andere wereld stapt.
     thema     drie standen in plaats van alleen de systeeminstelling:
               systeem, licht en donker, onthouden in localStorage.
     ruimte    32 px binnen een vlak, 24 px tussen twee vlakken.
     vorm      één hoekstraal; er stonden er vijf door elkaar.
   ========================================================================= */

:root{
  --toon:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --vak:32px;      /* padding binnen een kaart of paneel */
  --tussen:24px;   /* ruimte tussen twee kaarten of panelen */

  /* De etalage naast het inlogscherm. Die had `background:var(--accent)` met
     hardgecodeerd wit erop. In het lichte thema klopt dat (10,89:1), maar in
     het donkere thema wordt het accent juist líchtblauw en haalt wit nog maar
     2,49:1: een blauwe muur met onleesbare tekst. Daarom een eigen paar. */
  --etalage:#16358d;
  --op-etalage:#ffffff;
  --op-etalage-zacht:#d2d8ee;

  /* De letter op een gekleurd vlak. Overal waar `color:#fff` op var(--accent)
     of var(--rood) stond ging het in het donkere thema mis, want daar zijn die
     twee juist licht. */
  --op-rood:#ffffff;
}

/* ---------- kopletter ---------- */
#inlog h1,
.balk .merk b,
.paginakop h1, .paginakop h2{
  font-family:var(--toon);text-transform:uppercase;font-weight:400;
  letter-spacing:.02em;line-height:1.02}
#inlog h1{font-size:var(--t-h2);margin-bottom:6px}
.balk .merk b{font-size:var(--t-h3)}
/* De naam in de balk is nu de h1 van de toepassing; de paneelkoppen zijn h2
   geworden. De opmaak blijft ongewijzigd: de h1 is alleen een omhulsel. */
.balk .merk h1{margin:0;font:inherit;line-height:1;display:flex;align-items:center}
.paginakop h1,.paginakop h2{font-size:var(--t-h2)}

/* ---------- raakvlakken op een aanraakscherm ----------
   Een vinger is grover dan een muis: onder de 44 px mis je knoppen. Alleen op
   apparaten zonder precieze aanwijzer, zodat het op een laptop compact blijft. */
@media (pointer:coarse){
  /* De balk moet meegroeien met knoppen van 44 px, anders steken ze erdoorheen
     en klopt de plakpositie van de tabbalk niet meer. */
  :root{--balkh:58px}
  .tab{min-height:44px;display:inline-flex;align-items:center}
  .knop.klein{min-height:44px}
  .balk .merk{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- ruimte: 32 binnen, 24 ertussen ---------- */
/* .paginakop hoorde hier niet bij: dat is geen kaart maar de kop van de pagina.
   Met 32 px padding stond elke titel 32 px verder naar binnen dan de kaarten
   eronder, terwijl .pagina zelf al 14 px marge heeft. Nu links gelijk, en de
   ruimte zit in de verticale marge. */
.kaart,.paneel,.vlakje,.blokje,#inlog .inner{padding:var(--vak)}
.paginakop{padding:var(--tussen) 0 0;margin-bottom:var(--tussen)}
@media (max-width:760px){ .paginakop{padding-top:16px;margin-bottom:16px} }
.kaartrij,.paneelrij,.rijblokken{gap:var(--tussen)}


/* Op een aanraakscherm blijft :hover hangen op wat je het laatst hebt aangetikt: een knop
   die je een minuut geleden indrukte staat dan nog steeds licht op alsof je erboven zweeft.
   Waar geen echte aanwijzer is, geldt hover niet. */
@media (hover:none){
  .knop:hover{background:var(--vlak)}
  .knop.prim:hover{background:var(--accent)}
  .tab:hover{background:none}
}

/* ---------- geen automatische inzoom op een telefoon ----------
   iOS Safari zoomt de hele pagina in zodra je een invoerveld aantikt waarvan de
   letter kleiner is dan 16 px, en zoomt daarna niet uit zichzelf terug. Op een
   aanraakscherm krijgt daarom alles waarin je typt of kiest 16 px; met een muis
   blijft de dichte 14 px staan. De rest van de schaal schuift op een aanraakscherm
   mee omhoog via de tokens bovenaan, zodat een veld van 16 niet naast een
   bijschrift van 12,5 komt te staan. Vinkjes en keuzerondjes vallen erbuiten: die
   hebben geen letter en zijn hierboven al op maat gezet. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]),
  select,textarea,
  .railkop .filterzoek,.msel-zoek{font-size:var(--t-groot)}

}

/* ============================================================
   6 september 2026: maat en rangorde

   Drie dingen, verder blijft alles zoals het was. De kleuren zijn niet aangeraakt.

   1. Zes lettergroottes in plaats van drieëntwintig, en de basis van 13,5 naar 14.
      (10 september: die zes staan nu als tokens bovenaan, --t-mini tot --t-h2.)
   2. Elk raakvlak minstens 40 px hoog. Een knop van 31 px is op een telefoon mikken.
   3. Rangorde: de filterrail is gereedschap en zakt weg in de grond van de pagina,
      de tabel is het enige witte vlak, en het aantal bedrijven is het luidste getal
      op het scherm in plaats van net zo groot als de rest.
   ============================================================ */

/* --- 2. raakvlakken --- */
.knop{min-height:40px;padding:10px 15px;display:inline-flex;align-items:center;gap:7px;
  justify-content:center}
.knop.klein{min-height:36px;padding:8px 12px}
.tab{min-height:44px;padding:11px 14px}
input[type=text],input[type=number],input[type=password],input[type=email],input[type=search],
select,textarea{min-height:40px}
.rail summary{min-height:44px;display:flex;align-items:center}
.msel-knop{min-height:40px}
.msel-rij{min-height:32px;padding:7px 9px}
.chip button{min-width:24px;min-height:24px;display:inline-flex;align-items:center;
  justify-content:center}

/* --- 3a. de rail is gereedschap, geen kaart --- */
.rail{background:var(--bg);border:0;border-right:1px solid var(--lijn)}
.rail .railkop{background:var(--bg);border-bottom:1px solid var(--lijn)}
/* Alleen de groep die openstaat komt naar voren, met een streep in het accent. Zo zie
   je in één blik waar je aan het werk bent zonder dat elke groep om aandacht vraagt. */
.rail details.groep[open]{background:var(--vlak);box-shadow:inset 2px 0 0 var(--accent)}
.rail details.groep[open] > summary{font-weight:600}

/* --- de schakelaar boven in de rail ---
   Bewust klein gehouden: het is een keuze die je één keer maakt, geen knop waar je
   telkens naar terugkeert. Vandaar --t-fijn in plaats van --t-klein, geen slagschaduw
   op de gekozen kant en een raakvlak van 36 px, de maat voor een kleine knop. */
.wpschuif{margin:10px 13px 6px;background:var(--vlak3);border:1px solid var(--lijn);
  padding:2px;display:grid;grid-template-columns:1fr 1fr;gap:2px;border-radius:var(--r)}
.wpschuif button{border:0;background:none;padding:4px 6px;font-size:var(--t-fijn);color:var(--ink2);
  cursor:pointer;display:grid;gap:0;justify-items:center;min-height:36px;line-height:1.3;
  font-family:inherit;border-radius:var(--r)}
.wpschuif button .n{font-family:var(--mono);font-size:var(--t-mini);color:var(--ink2);
  font-variant-numeric:tabular-nums}
.wpschuif button[aria-pressed="true"]{background:var(--vlak);color:var(--ink);font-weight:600}
.wpschuif button[aria-pressed="true"] .n{color:var(--ink2)}
.wpschuif button:hover{color:var(--ink)}

/* --- 3b. het aantal bedrijven is de uitkomst, dus het grootste getal ---
   Van 34 naar 26 px: het bleef het grootste getal op het scherm, maar op 34 riep het
   harder dan de tabel eronder, die het eigenlijke antwoord is. */
#telling{font-size:var(--t-fijn);color:var(--ink2);display:flex;align-items:baseline;gap:9px}
#telling b{font-family:var(--mono);font-size:var(--t-h2);font-weight:600;color:var(--ink);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kopregel{align-items:flex-end}

/* --- 3c. de rij ademt --- */
#p-zoeken tbody td{padding:12px 13px}
#p-zoeken tbody td.naam{font-weight:600}
/* De regel onder de bedrijfsnaam heet nu .onder en staat in het blok "resultatentabel"
   onderaan dit bestand. Hij is ink2 en niet ink3: die haalt op wit 4,49:1 en dat is net
   onder de norm. */
body.compact #p-zoeken tbody td{padding:7px 13px}

/* Lange namen, activiteiten en e-mailadressen mogen afbreken in plaats van hun kolom op
   te rekken. Zonder dit duwde één adres als planning@installatietechniek-hoekstra.nl de
   hele tabel breder dan het scherm. */
/* Alleen een e-mailadres mag middenin een woord afbreken; op een bedrijfsnaam gaf
   overflow-wrap:anywhere "Van Doo ren Transp ort B.V.". De contactcel stond bovendien op
   white-space:nowrap, en dan breekt hij helemaal niet: een adres van veertig tekens liep
   dwars door de rand van de tabel. */
#p-zoeken td.contact{overflow-wrap:anywhere;white-space:normal;font-size:var(--t-fijn);line-height:1.45}
#p-zoeken td.naam,#p-zoeken td.sbi{overflow-wrap:break-word}
/* "Wagenparkprofiel" past niet op één regel in zijn kolom; deze twee koppen mogen
   afbreken, de smalle getalkoppen niet. */

/* Contact: telefoon en e-mail elk op één regel die afkapt, met het volledige gegeven in
   de tooltip. Zonder dit brak planning@installatietechniek-hoekstra.nl over vier regels
   en was elke rij 98 px hoog. */
#p-zoeken td.contact .cr{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Op een telefoon kreeg de keuzelijst met bewaarde selecties niet genoeg ruimte en
   stond er "Bewaarde⌄". Hij mag krimpen en afkappen in plaats van uit te steken. */
@media (max-width:760px){
  /* De drie getallen (bedrijven, voertuigen, leaseauto’s) stonden als drie losse regels
     tegen de knop Filters aan geplakt: drie verschillende lengtes, drie verschillende
     getallen, en niets dat ze bij elkaar hield. Ze zijn nu één strook van drie gelijke
     vakjes naast die knop, met het getal boven en het woord eronder, hetzelfde patroon
     als de kpi-strook elders in de tool. Het kost geen extra schermregel. */
  #p-zoeken .kopregel{align-items:stretch;gap:8px}
  /* De knop rekt mee met de strook ernaast, anders staat er een vakje van 41 px naast
     een vakje van 47 en valt dat verschil meteen op. */
  #p-zoeken .kopregel .railknop{align-self:stretch;flex:none}
  #p-zoeken .telblok{display:flex;flex-grow:1;flex-shrink:1;flex-basis:0%;min-width:0;background:var(--vlak);
    border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
  /* display:contents laat de twee .cb-vakjes zelf kind van de strook worden, zodat alle
     drie de vakjes even breed zijn in plaats van "bedrijven" tegenover "de rest". */
  #p-zoeken .kopregel .cijferbalk{display:contents}
  /* De maten staan als losse eigenschappen en niet als de korte schrijfwijze flex:1 1 0:
     oudere Safari op de iPhone gooit die hele regel weg als de nulmaat geen eenheid heeft,
     en dan sprong de strook alsnog naar een eigen regel onder de knop Filters. */
  /* Vaste maten in plaats van de tekstschaal: op een aanraakscherm gaat --t-klein naar
     15 px, en dan past 3.183.644 op een scherm van 320 px niet meer in een derde van de
     strook. De clamp laat het getal met het scherm meegroeien tot diezelfde 15 px. */
  #p-zoeken #telling,
  #p-zoeken .kopregel .cijferbalk .cb{
    display:block;flex-grow:1;flex-shrink:1;flex-basis:0%;min-width:0;padding:6px 8px;
    border-left:1px solid var(--lijn2);border-bottom:0;border-right:0;
    font-size:clamp(10.5px,3.1vw,13px);color:var(--ink2);line-height:1.25;
    overflow-wrap:break-word}
  #p-zoeken #telling{border-left:0}
  #p-zoeken .telblok .cbl{display:block}
  #p-zoeken #telling b,
  #p-zoeken .kopregel .cijferbalk .cb b{
    display:block;font-size:clamp(12.5px,3.9vw,15px);line-height:1.25;
    letter-spacing:-.01em;white-space:nowrap}
  #p-zoeken .kopregel .cijferbalk .cb::before{content:none}
  /* Tijdens het rekenen staat er een grijze balkje in plaats van een getal; laat dat de
     strook niet in hoogte laten springen. */
  #p-zoeken .kopregel .cijferbalk .cb.bezig{width:auto;height:auto;min-height:36px}
  #p-zoeken .kopregel .rechts{flex-wrap:wrap;gap:8px}
  #bewaard{min-width:0;flex:1 1 100%;text-overflow:ellipsis}
}

/* Raakvlakken die bij de vorige ronde over het hoofd zijn gezien: de knoppen binnenin een
   keuzelijst (Insluiten, Uitsluiten, Alles zichtbaar, Wissen) waren 11 tot 19 px hoog, en
   de doorkliklinks in de tabel 17 tot 23. Alles haalt nu minstens 24 px, de knoppen 32. */
.msel-modus button{min-height:32px;padding:6px 10px}
.msel-voet button{min-height:32px;padding:6px 4px}
.chip .wisalles,.chip.wisalles{min-height:32px}
#p-zoeken td button.dk{display:inline-block;padding:3px 0;min-height:24px;text-align:left}

/* De accountkaart bleef achter bij de raakvlakregel: het kruisje was 20 px, en elke
   waarde waarop je kunt doorklikken (plaats, provincie, rechtsvorm, telefoonnummer,
   e-mail, de kenmerkchips) 15 tot 20. Op een telefoon vult die kaart het hele scherm en
   tik je er met een vinger; dan is twintig pixels te weinig. */
#paneel .dicht{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#paneel button.dk,#paneel .paar dd a,#paneel .paar dd button{
  display:inline-block;min-height:24px;padding:2px 0;text-align:left}
#paneel .wpsig>span{min-height:24px;display:inline-flex;align-items:center}
#paneel .band a,#paneel .band button{min-height:24px;display:inline-flex;align-items:center}

/* ---------- tabblad Vragen ----------
   Alle kleur komt uit de variabelen bovenaan; hier staat geen enkele vaste tint, zodat
   het donkere thema meteen meeloopt. Compact gehouden: een antwoord is vier regels en
   een knoppenrij, dus het past met een paar vragen tegelijk op één scherm. */
.vraagtips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 14px}
.vraagtips>span{font-size:var(--t-fijn);color:var(--ink3)}
/* Het gesprek is een kolom, geen breedbeeld: op een laptop stond de vraag helemaal
   rechts en het antwoord helemaal links, met zeshonderd pixels niets ertussen. */
.gesprek,.vraagbalk{max-width:880px}
.gesprek{display:flex;flex-direction:column;gap:10px;padding-bottom:4px}
/* De bovenbalk en de tabbalk plakken vast; zonder deze marge scrollt een antwoord er
   half achter. */
.gesprek .bubbel{scroll-margin-top:calc(var(--balkh) + 56px)}
.gesprek:empty{display:none}
.bubbel{max-width:min(620px,100%)}
.bubbel.ik{align-self:flex-end;background:var(--accent-zacht);color:var(--ink);
  border:1px solid var(--lijn);border-radius:var(--r);padding:8px 11px;font-size:var(--t-fijn);line-height:1.45}
.bubbel.uit{align-self:flex-start;width:100%}
.bubbel.uit>p{margin:0;font-size:var(--t-fijn);line-height:1.5;color:var(--ink2)}
.denkt{font-size:var(--t-fijn);color:var(--ink3)}
.denkt::after{content:"";animation:puntjes 1.2s steps(4,end) infinite}
@keyframes puntjes{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.denkt::after{animation:none;content:"…"}}

/* ---------- een antwoord in het tabblad Vragen ----------
   11 september, avond: opnieuw ingedeeld. Er stond alles tegelijk in: twee grote getallen
   boven elkaar, een mono-regel met vier cijfers, de filters als zin, drie afgekapte
   voorbeeldregels, een rij doorkliklinks, vijf knoppen en een los invoerveld ertussen, en
   onderaan nog de exportstand. Op een telefoon werd dat zeven schermen scrollen voor twee
   vragen, zonder dat iets eruit sprong.

   De volgorde is nu: het getal, de zin die zegt wat het model van je vraag maakte, de
   filters als chips, de bijcijfers, en dan één hoofdknop. Alles wat je soms nodig hebt
   (exporteren, verdelen, wat er veranderde) zit in een lade die pas
   opengaat als je erom vraagt. */
.antwoord{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);
  padding:14px 15px;box-shadow:var(--schaduw)}
/* Een telling die over een ruimere groep gaat dan gevraagd, mag er niet uitzien als een
   gewoon antwoord. */
.antwoord.let{border-inline-start:3px solid var(--waarschuw)}

.antwoord .uitkomst{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.antwoord .uitkomst b{font-family:var(--mono);font-size:var(--t-h2);line-height:1.1;
  color:var(--ink);font-weight:700;letter-spacing:-.02em}
.antwoord .uitkomst span{font-size:var(--t-fijn);color:var(--ink3)}
/* De zin is het antwoord op "heb je me goed begrepen" en staat daarom in de gewone
   tekstkleur, niet in het grijs van een bijschrift. */
.antwoord .uitleg{margin:5px 0 0;font-size:var(--t-klein);line-height:1.5;color:var(--ink)}
.antwoord .mis{margin:8px 0 0;font-size:var(--t-fijn);line-height:1.45;color:var(--waarschuw)}

/* De filters als chips, dezelfde vorm als boven de tabel in Zoeken. Als losse zin
   ("Scania · geen lease of verhuur") las het als toelichting en keek je eroverheen. */
.antwoord .afilters{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.antwoord .afilters span{padding:3px 8px;background:var(--vlak3);border:1px solid var(--lijn);
  border-radius:var(--r);font-size:var(--t-mini);color:var(--ink2)}

/* Bijcijfers: getal mono en donkerder, label ernaast in het grijs. */
.antwoord .ameta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:11px 0 0;padding:10px 0 0;
  border-top:1px solid var(--lijn2);list-style:none;font-size:var(--t-mini);color:var(--ink3)}
.antwoord .ameta b{font-family:var(--mono);color:var(--ink2);font-weight:600}

.antwoord .antwoordknoppen{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:13px}
.antwoord .anevenrij{display:flex;flex-wrap:wrap;gap:6px}
.antwoord .anevenrij .knop.aan{border-color:var(--ink);color:var(--ink);background:var(--vlak3)}

/* De lades. Een tint lichter dan de kaart, zodat je ziet dat het bij de knop erboven
   hoort en niet bij het volgende antwoord. */
.antwoord .lade{margin-top:10px;padding:11px 12px;background:var(--vlak2);
  border:1px solid var(--lijn2);border-radius:var(--r);
  display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.antwoord .exportregel{display:flex;align-items:center;gap:8px;font-size:var(--t-fijn);color:var(--ink2)}
.antwoord .exportmax{width:88px;text-align:right}
.antwoord .limietregel{font-size:var(--t-mini);color:var(--ink3)}

.antwoord .verdeelrij{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
  font-size:var(--t-fijn);color:var(--ink3)}
.antwoord .verdeelrij button{background:none;border:0;padding:2px 0;cursor:pointer;font:inherit;
  color:var(--accent);border-bottom:1px solid transparent;min-height:28px}
.antwoord .verdeelrij button:hover{border-bottom-color:var(--accent)}
.antwoord .verdeelrij button.aan{color:var(--ink);border-bottom-color:var(--ink)}
.antwoord .verdeling{margin-top:4px;flex-basis:100%;display:flex;flex-direction:column;gap:3px}
.antwoord .vrij{display:grid;grid-template-columns:minmax(90px,34%) 1fr auto;align-items:center;gap:8px}
.antwoord .vnaam{font-size:var(--t-mini);color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.antwoord .vbalk{height:7px;background:var(--spoor);border-radius:var(--r)}
.antwoord .vbalk i{display:block;height:100%;background:var(--accent);border-radius:var(--r)}
.antwoord .vgetal{font-family:var(--mono);font-size:var(--t-mini);color:var(--ink3);min-width:44px;text-align:right}

/* De selectie past niet binnen wat er nog aan exportrijen over is. Geen foutmelding,
   wel het moment om te zeggen dat er een pakket bestaat. */
.antwoord .krap{flex-basis:100%;margin:0;font-size:var(--t-mini);line-height:1.45;color:var(--ink2)}
.antwoord .krap a{color:var(--accent)}

/* Signalen: wat er bij de laatste verversing veranderde. Zelfde balkjes als de verdeling,
   maar hier zijn ze klikbaar: een signaal is een bellijst, geen statistiek. */
.signaalkop{margin-top:10px;font-size:var(--t-mini);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.signaalrij{display:flex;flex-direction:column;gap:1px;margin-top:6px}
.signaal{display:grid;grid-template-columns:minmax(140px,44%) 1fr auto auto;align-items:center;gap:10px;
  background:none;border:0;padding:6px 8px;margin:0 -8px;border-radius:var(--r);
  text-align:left;font:inherit;width:calc(100% + 16px)}
/* Een regel die je kunt openen moet er ook zo uitzien: een pijl die altijd staat, en een
   vlak dat oplicht. Alleen een muisaanwijzer die verandert helpt niet op een telefoon. */
button.signaal{cursor:pointer;transition:background .12s ease}
button.signaal:hover,button.signaal:focus-visible{background:var(--vlak3)}
button.signaal:hover .snaam,button.signaal:focus-visible .snaam{color:var(--accent)}
button.signaal:hover .spijl{color:var(--accent);transform:translateX(2px)}
.signaal .snaam{font-size:var(--t-fijn);color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signaal .sbalk{height:7px;background:var(--spoor);border-radius:var(--r)}
.signaal .sbalk i{display:block;height:100%;background:var(--accent);border-radius:var(--r)}
.signaal .sgetal{font-family:var(--mono);font-size:var(--t-mini);color:var(--ink3);min-width:52px;text-align:right}
.signaal .spijl{font-size:var(--t-groot);line-height:1;color:var(--ink3);width:12px;text-align:center;
  transition:color .12s ease, transform .12s ease}
.antwoord .wijzigingen{margin-top:2px}

/* De vraagbalk blijft onderin staan, want het gesprek groeit naar beneden. */
.vraagbalk{position:sticky;bottom:0;display:flex;gap:8px;padding:12px 0 16px;
  background:linear-gradient(to top,var(--bg) 72%,transparent)}
.vraagbalk input{flex:1;min-width:0}
@media (max-width:640px){
  /* Op een telefoon staat de hoofdknop over de volle breedte en zetten de vier andere
     zich twee bij twee. Als losse knoppen naast elkaar liepen ze over drie regels met
     een gat aan het eind, en dat las als een gereedschapskist in plaats van een keuze. */
  .gesprek .bubbel{scroll-margin-top:calc(var(--balkh) + 104px)}
  .antwoord{padding:13px 13px}
  .antwoord .antwoordknoppen{gap:8px}
  .antwoord .antwoordknoppen>.knop{width:100%}
  .antwoord .anevenrij{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .antwoord .anevenrij .knop{width:100%;padding-inline:6px}
  .antwoord .lade{gap:8px}
  .antwoord .lade>.knop{width:100%}
  .antwoord .exportregel{flex:1 1 100%;justify-content:space-between}
  .antwoord .limietregel{flex-basis:100%}
  .antwoord .ameta{gap:3px 14px}
  /* De voorbeeldvragen zijn te lang voor knoppen naast elkaar: elke knop kreeg zijn eigen
     regel en dan staan er vier kaders onder elkaar. Op een telefoon worden het gewone
     links onder elkaar, net als op de voorpagina. */
  .vraagtips{gap:2px 10px;margin-bottom:16px}
  .vraagtips>span{flex-basis:100%;margin-bottom:2px}
  .vraagtips .knop.klein{border:0;background:none;padding:3px 0;min-height:0;
    color:var(--accent);text-align:left}
  .vraagtips .knop.klein:hover{background:none;text-decoration:underline}
}

/* ================= tabblad Signalen =================
   Het signaalrijtje zelf staat hierboven al, want het begon als knopje op een antwoord.
   Hier komt alleen bij: de bereikkeuze, de monitors, en de terugleeslijst op Beheer. */

.sigkeuze{margin-left:auto;display:flex;align-items:center;gap:8px;
  font-size:var(--t-fijn);color:var(--ink2);white-space:nowrap}
.sigkeuze select{width:auto;max-width:min(56vw,320px)}

#p-signalen .kaartkop > div{flex:1;min-width:0}
#p-signalen .signaalrij{margin-top:2px}
/* Een balk die de hele breedte van een kaart van 1.100 px vult leest niet als een
   verhouding maar als een streep. Vandaar een plafond op de balkkolom. */
#p-signalen .signaal{grid-template-columns:minmax(150px,240px) minmax(0,460px) 64px 12px;
  justify-content:start;padding:6px 8px}
#p-signalen .signaal .snaam{font-size:var(--t-fijn);color:var(--ink)}
#p-signalen .signaal .sbalk{height:9px}

/* Een monitor is één regel: de schakelaar, wat er gebeurde, en een knop om te kijken.
   De regel die níét gevolgd wordt blijft bewust zichtbaar, anders weet je niet dat je
   hem aan kunt zetten. */
/* Vier korte kolommen passen op een telefoon; met een vaste minimumbreedte van 560 px
   schoof de tabel zijwaarts en zag je twee kolommen met een gat ertussen. */
.sigtabel{min-width:560px;table-layout:auto}
@media (max-width:760px){
  .sigtabel{min-width:0}
  .sigtabel th,.sigtabel td{padding-inline:8px}
  .sigtabel td.nowrap{white-space:nowrap}
}

.monitorrij{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:12px 0;
  border-top:1px solid var(--lijn2)}
.monitorrij:first-child{border-top:0}
.mkop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;width:100%}
.volgvink{display:flex;align-items:center;gap:6px;font-size:var(--t-fijn);color:var(--ink2);
  white-space:nowrap;padding-top:1px}
.monitorrij.aan .volgvink{color:var(--ink)}
.mnaam{font-size:var(--t-klein);min-width:0}
.muitslag{font-size:var(--t-fijn);color:var(--ink2)}
.monitorrij.aan .muitslag b{color:var(--ink);font-family:var(--mono)}
.mailnoot{font-size:var(--t-mini);color:var(--ink3)}
.volgvink{flex:none}
.monitorrij .knop{margin-top:3px}

/* ================= vragen die niets opleverden ================= */
.onbekendrij{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px;
  font-size:var(--t-fijn);color:var(--ink2)}
.onbekendje{display:inline-flex;align-items:baseline;gap:5px;padding:2px 8px;
  border:1px solid var(--lijn);border-radius:999px;font-size:var(--t-mini);color:var(--ink)}
.onbekendje i{font-style:normal;font-family:var(--mono);font-size:var(--t-mini);color:var(--ink3)}
/* Een select is in deze opmaak standaard breedte 100%; in een kaartkop duwt hij de kop
   dan tot één woord per regel. Vandaar hier expliciet auto, net als bij de bereikkeuze. */
#vraagproblemen .kaartkop > div{flex:1;min-width:0}
#vpdagen{width:auto;flex:none;margin-left:auto;max-width:min(50vw,220px)}
#vraagproblemen .zacht.klein{font-size:var(--t-mini);display:block;margin-top:2px}
#vraagproblemen td{vertical-align:top}

/* Onder de 820 px past de kop niet meer naast de keuzelijst; dan mag de rij breken en
   krijgt de balk zijn rekbare breedte terug, anders wordt hij een stipje. */
@media (max-width:820px){
  #p-signalen .kaartkop{flex-wrap:wrap}
  .sigkeuze{margin-left:0;width:100%}
  /* Zonder min-width:0 krimpt een keuzelijst niet onder de breedte van zijn langste optie,
     hoe klein het scherm ook is; hij stak daardoor rechts buiten de kaart. */
  .sigkeuze select{max-width:100%;min-width:0;flex:0 1 auto;text-overflow:ellipsis}
  #p-signalen .signaal{grid-template-columns:minmax(110px,44%) 1fr auto auto}
}
/* Onder de 560 px is er geen breedte meer voor naam, balk, getal en pijl naast elkaar; de
   naam werd afgekapt tot "uit het bestand verd...". Nu naam en getal op de eerste regel en
   de balk over de volle breedte eronder, zodat er niets meer wegvalt. */
@media (max-width:560px){
  .signaal,
  #p-signalen .signaal{grid-template-columns:1fr auto auto;
    grid-template-areas:"naam getal pijl" "balk balk balk";
    gap:4px 10px;padding:8px}
  .signaal .snaam{grid-area:naam;white-space:normal;font-size:var(--t-fijn);color:var(--ink)}
  .signaal .sgetal{grid-area:getal}
  .signaal .spijl{grid-area:pijl}
  .signaal .sbalk{grid-area:balk;height:6px}
  .signaalrij{gap:2px}
}
@media (max-width:640px){
  /* Op een telefoon perste de knop de tekst in een kolom van vier regels. Nu een raster:
     de schakelaar links, de tekst ernaast, en de knop op zijn eigen regel eronder. */
  .monitorrij .knop{width:100%}

  /* Een keuzelijst naast een kop laat op 390 px één woord per regel over. */
  #vraagproblemen .kaartkop{flex-wrap:wrap}
  #vpdagen{margin-left:0;max-width:none;width:100%}

  /* Het vraagveld met twee knoppen ernaast liet een veld van 200 px over. Veld op een
     eigen regel, knoppen eronder, met Vraag als de brede van de twee. */
  .vraagbalk{flex-wrap:wrap}
  .vraagbalk input{flex:1 1 100%}
  .vraagbalk #vraagknop{flex:1}
}

/* ============ resultatentabel: zeven kolommen ============
   De tabel had achttien kolommen, schoof zijwaarts, en bij een groot wagenpark liepen
   TOTAAL, LEASE en VESTIGINGEN over elkaar heen. Dat laatste kwam doordat geen van die
   kolommen een vaste breedte had. Nu zet app.js een expliciete breedte in pixels op elke
   <col>, bij table-layout: fixed. Hier staat alleen hoe het eruitziet. */

/* Overkoepelende kop boven In bezit en Lease. */
#p-zoeken #tabel thead tr.groepkop th{
  padding:6px 11px 2px;border-bottom:0;background:var(--vlak2);
  font-size:var(--t-mini);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);
}
#p-zoeken #tabel thead tr.groepkop th.wp{
  text-align:center;border-bottom:1px solid var(--lijn);
}
/* De koprij zit onder de groepkop, dus hij plakt niet op 0 maar eronder; hoe ver
   eronder meet pasKolommenToe() in app.js en zet het als inline stijl. */
#p-zoeken #tabel thead tr.groepkop th{position:sticky;top:0;z-index:3}
#p-zoeken #tabel th.wp,#p-zoeken #tabel td.kls{background:color-mix(in srgb,var(--vlak3) 45%,transparent)}
#p-zoeken #tabel tbody tr:hover td.kls{background:none}

/* Bedrijf: naam vet, daaronder klein plaats, postcode en straat. Die stonden als twee
   losse kolommen in de tabel en kostten daar samen bijna een kwart van de breedte. */
#p-zoeken #tabel td.naam{max-width:none;white-space:normal;line-height:1.3}
#p-zoeken #tabel td.naam .bn{font-weight:600;color:var(--ink)}
#p-zoeken #tabel td.naam .onder{
  display:block;margin-top:2px;font-weight:400;font-size:var(--t-mini);color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.compact #p-zoeken #tabel td.naam .onder{display:none}

/* Activiteit: omschrijving boven, sbi-code klein eronder. Omgekeerd van hiervoor: je
   zoekt op wat een bedrijf doet, niet op het nummer. */
#p-zoeken #tabel td.sbi .oms{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
#p-zoeken #tabel td.sbi .code{display:block;font-family:var(--mono);font-size:var(--t-mini);color:var(--ink3)}

/* Lege cellen blijven leeg, geen streepje. */
#p-zoeken #tabel td.leeg{color:var(--ink3)}

/* De schakelaar in de werkbalk. */
.kopregel .schakel{
  display:inline-flex;align-items:center;gap:6px;font-size:var(--t-fijn);color:var(--ink2);
  white-space:nowrap;cursor:pointer;
}
.kopregel .schakel input{width:auto;margin:0;accent-color:var(--accent)}

@media (max-width:760px){
  /* In kaartweergave staat elk veld op zijn eigen regel met zijn naam ervoor. Een leeg
     veld is daar geen streepje maar niets: het kopje alleen is rommel. */
  #tabel td.leeg{display:none}
  /* In de tabel markeert een lichte band welke twee kolommen over het wagenpark gaan.
     In kaartweergave bestaat die kolom niet meer: dan blijft er een grijs vlak achter
     twee van de drie getallen staan, zo breed als de tekst toevallig is, en dat leest
     als een knop of een selectie. Het kopje erboven zegt al wat het getal is. */
  #p-zoeken #tabel td.kls{background:none}
  #p-zoeken #tabel thead{display:none}
  #p-zoeken #tabel td.naam .onder{white-space:normal}
  /* De regel hierboven in dit bestand geeft elk invoerveld in de werkbalk flex:1 en
     een minimumbreedte van 96 px. Op een vinkje slaat dat nergens op: dat werd een
     vakje van 96 px met de tekst ver rechts ernaast. */
  .kopregel .schakel{flex:1 1 100%}
  .kopregel .schakel input{flex:none;min-width:0;width:auto}
}

/* ===========================================================================
   Jasje: company.info                                14-09-2026
   ---------------------------------------------------------------------------
   Wat de variabelen bovenaan niet kunnen dekken. Alles wat hier staat is
   opmaak: geen enkele regel verplaatst iets, verbergt iets of hernoemt iets.
   Weg te halen door dit blok te verwijderen en --vlak, --lijn, --ink*, --r,
   --schaduw en --mono terug te zetten op hun oude waarden.

   Overgenomen uit de extractie van de bedrijfspagina van company.info:
   de tweede navigatiebalk is een gekleurde band met witte tabbladen, kaarten
   hebben een rand van 1px en 8px hoeken zonder schaduw, tabellen hebben een
   gearceerde even rij, pillen zijn helemaal rond, en de hoofdactie is de
   enige knop met een vlakvulling in de tweede accentkleur.
   =========================================================================== */

/* ---------- de tabbalk als band ---------- */
.tabs{
  background:var(--accent);border-bottom:0;gap:20px;padding:0 14px;
}
.tab{
  color:rgba(255,255,255,.84);font-size:var(--t-klein);font-weight:600;
  border-bottom:3px solid transparent;margin-bottom:0;padding:11px 0;
}
.tab:hover{color:#fff;background:none}
.tab[aria-selected="true"]{
  color:#fff;background:none;border-radius:0;border-bottom-color:#fff;
}
.tab:focus-visible{outline:2px solid #fff;outline-offset:-3px}
/* De balk erboven had een accentstreep aan de bovenkant; die band eronder doet
   dat werk nu, twee gekleurde randen boven elkaar is er een te veel. */
.balk{border-top:0}

/* ---------- getallen ----------
   company.info zet zijn cijfers gewoon in Source Sans; alleen de kenmerken waar
   uitlijnen helpt (KVK, vestigingsnummer, sbi, sleutel) houden een vaste breedte.
   Die staan in de opmaak als .mono of .num, en de cijferkolommen erven --mono,
   dus zetten we --mono op de gewone letter met tabelcijfers. */
:root{--mono:var(--sans)}
.mono,.num,td.getal,.kpi .n,.telling b,.pager .pos{font-variant-numeric:tabular-nums}

/* ---------- vlakken ---------- */
.kaart,.tabelvlak,.rail,.kpi,.domein,.blad{box-shadow:none}
.kaart h2,.domein h2{font-size:17px;font-weight:700;letter-spacing:-.005em}
.kaart .toelicht{font-size:var(--t-fijn)}

/* De filterrail is een paneel met een eigen kop, niet een grijze balk met
   kapitalen; dat laatste is onze oude stijl, niet die van hen. */
.railkop{text-transform:none;letter-spacing:0;font-size:var(--t-klein);color:var(--ink);font-weight:700}
.railkop .aantal{color:var(--ink3);font-weight:400}
/* De open filtergroep krijgt links een streep, zoals hun zijbalknavigatie. */
.groep > summary{border-left:2px solid transparent}
.groep[open] > summary{color:var(--accent);border-left-color:var(--accent)}

/* ---------- tabellen ---------- */
thead th{
  background:var(--vlak);text-transform:none;letter-spacing:0;
  font-size:var(--t-fijn);font-weight:600;color:var(--ink2);
}
tbody tr:nth-child(even){background:var(--vlak2)}
tbody tr:hover{background:var(--vlak3)}
tbody tr.actief{background:var(--accent-zacht)}
tbody td{border-bottom:1px solid var(--lijn)}

/* ---------- knoppen ---------- */
.knop{border-radius:var(--r-knop);font-weight:600;font-size:var(--t-fijn)}
/* Eén knop per scherm met een vlakvulling in hun oranje: de hoofdactie.
   Wit op dat oranje haalt 2,5:1 en is onleesbaar; bijna zwart haalt 7,3:1. */
.knop.prim{background:var(--oranje);border-color:var(--oranje);color:var(--oranje-ink)}
.knop.prim:hover{background:var(--oranje-diep);border-color:var(--oranje-diep);filter:none}
.knop.gevaar{color:var(--oud-fg)}

/* ---------- pillen en merkjes ---------- */
.merkje,.chip,.pil{border-radius:999px}
.chip{background:var(--veldvlak);color:var(--ink2);border:1px solid var(--lijn);padding:2px 4px 2px 11px}
.chip b{color:var(--ink)}

/* ---------- invoer ----------
   De kaart is grijs, dus een veld dat ook grijs is verdwijnt erin. */
input[type="text"],input[type="search"],input[type="number"],input[type="email"],
input[type="password"],select,textarea{background:var(--veldvlak);border-radius:var(--r-knop)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}

/* ---------- aanraakmaten ----------
   Hangt aan de vinger, niet aan de schermbreedte: een tablet is allebei. */
@media (pointer:coarse){
  .knop{min-height:42px}
  .knop.klein{min-height:38px}
  .groep > summary{min-height:48px}
  label.vink,.schakel{min-height:44px}
  input[type="checkbox"],input[type="radio"]{width:18px;height:18px}
  .chip button,.dicht,.railsluit{min-width:40px;min-height:40px}
}

/* ---------- koppen ----------
   Bebas was de kopletter van de voorpagina. company.info zet zijn titels in
   dezelfde letter als de rest, vet en op normale hoogte; dat leest rustiger
   boven een scherm vol getallen en scheelt een tweede lettertype. */
#inlog h1,.balk .merk b,.paginakop h1,.paginakop h2{
  font-family:var(--sans);text-transform:none;font-weight:700;
  letter-spacing:-.01em;line-height:1.15;
}
.paginakop h1,.paginakop h2{font-size:clamp(24px,2.6vw,32px)}
.paginakop{align-items:flex-start;margin-bottom:18px}
.paginakop p{font-size:var(--t-groot);line-height:1.5;margin-top:6px}
#inlog h1{font-size:clamp(24px,2.6vw,32px)}
.balk .merk b{font-size:var(--t-h3);letter-spacing:0}

/* ---------- de getallen boven een pagina ----------
   Vier tegels op een rij, met het getal als het luidste op het scherm, precies
   zoals in het ontwerp. Ze stonden op de maat van een invoerveld. */
.kpirij{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);
  overflow:hidden;margin-bottom:20px}
.kpi{background:none;border:0;border-right:1px solid var(--lijn);border-radius:0;padding:20px}
.kpi:last-child{border-right:0}
.kpi .n{font-size:clamp(24px,2.2vw,30px);font-weight:700;line-height:1.1;letter-spacing:-.01em}
.kpi .l{font-size:var(--t-fijn);margin-top:3px}
@media (max-width:760px){
  .kpi{border-right:0;border-bottom:1px solid var(--lijn)}
  .kpi:last-child{border-bottom:0}
}

/* ---------- laatste losse eindjes ---------- */
/* De kop van de filterrail was een grijze balk met kapitalen; dat is onze oude
   stijl. Bij hen is het gewoon de naam van het paneel. */
.railkoprij>span:first-child{
  font-size:var(--t-klein);letter-spacing:0;text-transform:none;color:var(--ink);font-weight:700}
/* De groepkop boven Wagenpark: zelfde behandeling als de kolomkoppen eronder. */
#p-zoeken #tabel thead tr.groepkop th{
  background:var(--vlak);font-size:var(--t-fijn);letter-spacing:0;text-transform:none;color:var(--ink2)}
/* Exporteren is de hoofdactie van het scherm en daarmee de enige oranje knop. */
#exportknop{background:var(--oranje);border-color:var(--oranje);color:var(--oranje-ink)}
#exportknop:hover:not(:disabled){background:var(--oranje-diep);border-color:var(--oranje-diep)}

/* Wat over de pagina heen ligt heeft wél diepte nodig, anders zweeft het
   randloos boven de inhoud. --schaduw staat op none, dus die krijgen de diepe. */
.versiebalk,.toast,.msel-pop,#zijpaneel .zijblad{box-shadow:var(--schaduwdiep)}
.pakket:hover{box-shadow:none;border-color:var(--accent)}
/* Een antwoord in Chat is een kaart in de pagina, geen zwevend vlak. */
.antwoord{box-shadow:none}
/* Een knop die een link is, is een knop: geen accentkleur en geen streep eronder. */
a.knop{color:var(--ink);text-decoration:none}
a.knop.prim{color:var(--oranje-ink)}

@media (pointer:coarse){
  /* De voorbeeldvragen zijn op een telefoon gewone links; ze blijven dat, maar met
     genoeg ruimte eromheen om ze met een duim te raken. */
  .vraagtips .knop.klein{min-height:36px;padding:6px 0}
  .signaal{min-height:44px}
}

/* ---------- na de eerste ronde op een telefoon ----------
   De tabbalk brak over twee regels met 20 px ertussen: alleen de balk al kostte
   een kwart van het scherm. De regelafstand hoort nul te zijn; de ruimte tussen
   de tabbladen staat naast elkaar, niet onder elkaar. */
.tabs{column-gap:20px;row-gap:0}
@media (max-width:760px){
  .tabs{column-gap:14px;row-gap:0;padding:0 12px}
  .tab{padding:8px 0;font-size:var(--t-fijn)}
}
/* De kopjes op de accountkaart stonden in kapitalen met spatiëring; dat is de oude
   stijl. Bij company.info is een sectiekop gewoon vet, in dezelfde letter. */
.sectie h3{
  text-transform:none;letter-spacing:0;font-size:var(--t-groot);color:var(--ink);font-weight:700;
  margin-bottom:10px}
/* Losse tekst op de accountkaart mag niet de halve kaart vullen. */
.bladlijf .uitleg{max-width:60ch}
@media (max-width:760px){
  .vlootlijst td,.vlootlijst th{padding:7px 8px}
}

/* ---------- het tabbladmenu op een telefoon ----------
   Acht tabbladen passen daar niet, ook niet op twee regels: dat kostte een kwart van
   het scherm. Ze staan nu achter één knop met drie streepjes, die de naam draagt van
   de pagina waar je bent. Op een breed scherm doet de knop niets en staat de rij er
   gewoon, want daar is de ruimte er wel. */
.menuknop{
  display:none;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  padding:10px 0;font-size:var(--t-klein);font-weight:600;color:#fff;
  white-space:nowrap;flex:none;width:max-content;
}
.menuknop svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round}
.menuknop:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:760px){
  /* De knop hoort bovenaan te staan, ook als hij in de opmaak achter de rij komt. */
  .menuknop{display:inline-flex;order:-1}
  .tabs{flex-wrap:wrap;padding:0 12px;column-gap:0}
  /* Dicht: alleen de knop. Open: de tabbladen eronder, elk op een eigen regel. */
  .tabs:not(.uit) .tab{display:none}
  .tabs.uit{padding-bottom:6px}
  .tabs.uit .tab{
    flex:1 0 100%;text-align:left;padding:11px 0 11px 29px;
    border-bottom:1px solid rgba(255,255,255,.18);border-left:0;
    color:rgba(255,255,255,.88);font-size:var(--t-klein);
  }
  .tabs.uit .tab:last-of-type{border-bottom:0}
  .tabs.uit .tab[aria-selected="true"]{
    color:#fff;border-bottom-color:rgba(255,255,255,.18);
    box-shadow:inset 3px 0 0 #fff;
  }
}