/*
  Huisstijl Hoskens.be: donker met goud.

  Twee gedaanten in één stijl. Op een breed scherm een dashboard met een zijbalk
  waarin je de kennisbank onderhoudt; op een telefoon een app met grote knoppen
  waarmee iemand naast een stilstaande machine kan werken. De storingsschermen
  blijven daarom altijd mobiel-eerst, ook op een monitor.

  Het goud is de merkkleur en draagt de aandacht: het markeert waar je bent, wat
  de hoofdactie is en wat er telt. Alles wat gevaar of urgentie betekent blijft
  rood of oranje, want dat mag nooit met een merkkleur verward worden.
*/

/*
 * Twee thema's uit een set tokens.
 *
 * Donker is het uitgangspunt: dat is de huisstijl, en het is wat een scherm in
 * een werkplaats prettig maakt. Licht staat eronder als overschrijving, want
 * bij daglicht naast een machine, of op een geprinte pagina, wint licht het.
 *
 * Welke van de twee er geldt bepaalt data-thema op het html-element. Dat wordt
 * gezet door een klein script in de kop van index.html, nog voor het stijlblad
 * schildert - anders knippert een lichte pagina eerst donker voorbij.
 *
 * Regel voor het onderhoud: een kleur die alleen in een van beide blokken
 * bestaat, is een bug die je in het andere thema pas ziet.
 */
:root {
  --goud: #caa441;
  --goud-licht: #e0bd63;
  --goud-diep: #8f7229;
  --goud-waas: rgba(202, 164, 65, .13);
  --goud-rand: rgba(202, 164, 65, .32);

  /* De gouden knop houdt in beide thema's dezelfde kleur: hij is de merkkleur
     zelf, en donkere tekst erop leest overal. Vandaar eigen tokens, los van het
     goud dat als tekstkleur dient en in het lichte thema dieper moet. */
  --goud-vlak: #caa441;
  --goud-vlak-licht: #e0bd63;
  --op-goud: #17130a;

  --bg: #0d0f13;
  --paneel: #14171c;
  --paneel-2: #1b1f26;
  --paneel-glans: #191d24;
  --rand: #262b33;
  --tekst: #e9e6df;
  --zacht: #94989f;

  --zijbalk-boven: #12151a;
  --zijbalk-onder: #0f1216;
  --klantbalk-bg: #171b21;
  --kop-waas: rgba(13, 15, 19, .92);
  --invoer-bg: #0f1217;
  --schaduw-diep: rgba(0, 0, 0, .6);

  --ok: #4caf68;
  --waarschuwing: #e0a132;
  --gevaar: #e0574f;

  --radius: 12px;
  --zijbalk: 258px;
  --klantbalk: 214px;
}

:root[data-thema="licht"] {
  color-scheme: light;

  /* Goud op wit heeft meer diepte nodig om leesbaar te blijven; hetzelfde
     #caa441 op papierwit is nauwelijks van de achtergrond te onderscheiden. */
  --goud: #8a6d16;
  --goud-licht: #6b5411;
  --goud-diep: #a8851f;
  --goud-waas: rgba(138, 109, 22, .09);
  --goud-rand: rgba(138, 109, 22, .3);

  /* Koel papier tegen warm goud. Een neutraal dat naar dezelfde kant trekt als
     het accent leest als een grijs waar niemand over nagedacht heeft. */
  --bg: #eef0f3;
  --paneel: #ffffff;
  --paneel-2: #f4f6f9;
  --paneel-glans: #f8fafc;
  --rand: #d8dde4;
  --tekst: #14171c;
  --zacht: #5d646f;

  --zijbalk-boven: #ffffff;
  --zijbalk-onder: #f6f8fa;
  --klantbalk-bg: #eceff4;
  --kop-waas: rgba(255, 255, 255, .92);
  --invoer-bg: #ffffff;
  --schaduw-diep: rgba(20, 23, 28, .18);

  --ok: #1f7a48;
  --waarschuwing: #96660a;
  --gevaar: #b4323b;
}

* { box-sizing: border-box; }

/*
 * Het hidden-attribuut werkt via display:none uit de browserstijl, en elke eigen
 * display-regel wint daarvan. Zonder deze regel bleef de verborgen zijbalk een
 * lege kolom van 258px op het aanmeldscherm.
 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--goud); }
::selection { background: var(--goud-waas); }

/* ---------------------------------------------------------------- geraamte */

#app { display: flex; min-height: 100vh; }

/*
 * De twee balken zitten in een omhulsel en niet los in #app. Op een gsm schuift
 * de navigatie als geheel in beeld; waren het losse buren, dan kwam alleen de
 * eerste mee en stond de klant zonder zijn eigen menu.
 */
#navigatie { display: flex; flex: none; }

#zijbalk {
  width: var(--zijbalk);
  flex: none;
  background: linear-gradient(180deg, var(--zijbalk-boven) 0%, var(--zijbalk-onder) 100%);
  border-right: 1px solid var(--rand);
  padding: 20px 12px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#zijbalk .merk {
  padding: 2px 10px 20px;
  border-bottom: 1px solid var(--rand);
  margin-bottom: 14px;
}
#zijbalk .merk img { width: 100%; max-width: 190px; display: block; }
#zijbalk .merk .onderschrift {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--goud-diep);
  font-weight: 600;
}

.navlink {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 9px 9px 0;
  background: transparent;
  color: var(--zacht);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.navlink:hover { background: var(--paneel-2); color: var(--tekst); }
.navlink.actief {
  background: var(--goud-waas);
  border-left-color: var(--goud);
  color: var(--goud-licht);
  font-weight: 600;
}

#zijbalk .onderaan { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rand); }
#zijbalk .wie { padding: 8px 12px; font-size: 13px; color: var(--zacht); }
#zijbalk .wie strong { color: var(--tekst); font-weight: 600; }

/* --------------------------------------------------- de klantbalk bovenaan */

/*
 * De balk die zegt bij welke klant je bezig bent.
 *
 * Horizontaal en bovenaan, niet als tweede kolom. Twee kolommen naast elkaar
 * lezen als twee gelijkwaardige menu's, terwijl dit een laag dieper is: eerst
 * kies je een klant, dan kies je wat je bij die klant doet. Bovendien kost een
 * tweede kolom 214 px die je op een laptop liever aan je werk geeft.
 *
 * Plakt onder de kop mee naar beneden, zodat je bij het scrollen door driehonderd
 * motoren nog steeds ziet van wie ze zijn.
 */
/*
 * De achtergrond zit op het omhulsel en niet alleen op de klantbalk.
 *
 * De klantbalk houdt rechts ruimte vrij voor de themaknop met een marge, niet
 * met padding: in een horizontaal scrollende doos schuift padding gewoon mee en
 * valt de knop alsnog over de laatste tabs. Een marge maakt de doos smaller, en
 * dit omhulsel vult het gat dat daardoor ontstaat.
 */
#bovenbalk {
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--klantbalk-bg);
}

#klantbalk {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  /* Rechts vrijhouden voor de themaknop die daar vast zweeft. */
  margin-right: 150px;
  background: var(--klantbalk-bg);
  border-bottom: 1px solid var(--rand);
  overflow-x: auto;
  scrollbar-width: thin;
}

#klantbalk .klantkop {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding-right: 14px;
  margin-right: 6px;
  border-right: 1px solid var(--rand);
}
#klantbalk .klantlabel {
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--zacht);
  font-weight: 600;
}
#klantbalk .klantnaam {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  color: var(--tekst);
  white-space: nowrap;
}

/*
 * De menu-items worden tabs in plaats van rijen.
 *
 * Dezelfde knoppen als in de zijbalk - de bouwer maakt navlinks - maar hier
 * liggend. De actieve krijgt een streep eronder in plaats van ernaast, want dat
 * is wat een oog in een horizontale rij verwacht.
 */
#klantbalk .navlink {
  width: auto;
  flex: none;
  padding: 7px 12px;
  border-left: 0;
  border-bottom: 2px solid transparent;
  border-radius: 7px 7px 0 0;
  white-space: nowrap;
  font-size: 14px;
}
#klantbalk .navlink:hover { background: var(--paneel-2); }
#klantbalk .navlink.actief {
  background: transparent;
  border-bottom-color: var(--goud);
  color: var(--goud-licht);
}

.klantwissel {
  padding: 4px 9px;
  border: 1px solid var(--rand);
  border-radius: 7px;
  background: transparent;
  color: var(--zacht);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.klantwissel:hover { background: var(--paneel-2); color: var(--goud); border-color: var(--goud-diep); }

#hoofd { flex: 1; min-width: 0; display: flex; flex-direction: column; }

#kop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(env(safe-area-inset-top), 14px) 22px 13px;
  /* Dekkend, want de bovenbalk eronder heeft nu een eigen kleur. Blur en
     doorschijnendheid hadden zin toen de inhoud eronder doorschoof; nu plakt
     de hele bovenbalk mee en zou het alleen maar troebel zijn. */
  background: var(--bg);
  border-bottom: 1px solid var(--rand);
}
#kop h1 { flex: 1; margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.3px; }
#kop .kruimels { font-size: 12.5px; color: var(--zacht); margin-top: 2px; }

.ikoon {
  min-width: 40px; height: 40px;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--zacht);
  font-size: 18px; cursor: pointer;
}
.ikoon:hover { background: var(--paneel-2); color: var(--goud); }
#menuknop { display: none; }

#scherm { padding: 22px 22px 70px; max-width: 1120px; width: 100%; }
#scherm.smal { max-width: 720px; }

@media (max-width: 900px) {
  #navigatie {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    flex-direction: column;
    width: var(--zijbalk);
    overflow-y: auto;
    transform: translateX(-100%); transition: transform .18s;
    box-shadow: 0 0 50px var(--schaduw-diep);
  }
  #navigatie.open { transform: none; }
  /* Onder elkaar hebben ze allebei de volle breedte nodig, en de scheiding
     tussen de twee gaat van rechts naar boven. */
  #zijbalk { width: 100%; border-right: 0; }
  /* De klantbalk zit niet in de schuiflade maar boven het scherm, dus die blijft
     staan als het menu dicht is. Dat is precies de bedoeling: op een gsm wil je
     zonder menu te openen kunnen zien bij welke klant je zit.

     Rechts blijft ruimte voor de themaknop, die daar vast zweeft. Iets minder
     dan op een breed scherm, want die knop is op een gsm ook smaller. */
  #klantbalk { padding: 7px 12px; margin-right: 58px; }
  /* Op een gsm mag niets onder de 40 px hoog zijn: daaronder mis je hem met je
     duim, zeker met werkhandschoenen aan. */
  #klantbalk .navlink { padding: 10px 12px; }
  .klantwissel { padding: 9px 12px; font-size: 13px; }
  #menuknop { display: block; }
  #scherm { padding: 16px 14px calc(50px + env(safe-area-inset-bottom)); }
  html, body { font-size: 16px; }
}

/* ------------------------------------------------------------------ tekst */

h2 {
  font-size: 13px; margin: 30px 0 12px;
  text-transform: uppercase; letter-spacing: 1.3px;
  color: var(--goud); font-weight: 700;
}
h2:first-child { margin-top: 0; }
h3 { font-size: 15px; margin: 18px 0 8px; }
p { margin: 0 0 12px; }
.zacht { color: var(--zacht); font-size: 14px; }
.leeg { color: var(--zacht); padding: 30px 4px; text-align: center; font-size: 14px; }
hr { border: 0; border-top: 1px solid var(--rand); margin: 26px 0; }

/* --------------------------------------------------------------- formulier */

label { display: block; margin: 13px 0 5px; font-size: 12.5px; color: var(--zacht); font-weight: 500; }

input, textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--invoer-bg);
  color: var(--tekst);
  font: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--goud);
  box-shadow: 0 0 0 3px var(--goud-waas);
}
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.hint { font-size: 12px; color: var(--zacht); margin-top: 4px; }

.velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.velden .breed { grid-column: 1 / -1; }

button { font: inherit; cursor: pointer; }

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px;
  padding: 9px 17px;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--paneel-2);
  color: var(--tekst);
  font-weight: 550;
  transition: border-color .12s, background .12s;
}
.knop:hover { border-color: var(--goud-rand); }
.knop.hoofd {
  background: linear-gradient(180deg, var(--goud-vlak-licht), var(--goud-vlak));
  border-color: var(--goud-vlak);
  color: var(--op-goud);
  font-weight: 650;
}
.knop.hoofd:hover { filter: brightness(1.07); }
.knop.gevaar { border-color: rgba(224,87,79,.45); color: var(--gevaar); background: transparent; }
.knop.gevaar:hover { border-color: var(--gevaar); }
.knop.klein { min-height: 32px; padding: 5px 12px; font-size: 13px; font-weight: 500; }
.knop.vol { width: 100%; }
.knop.groot { min-height: 62px; font-size: 17px; }
.knop:disabled { opacity: .45; cursor: default; }

.knoprij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ------------------------------------------------------------------ kaarten */

.kaart {
  display: block; width: 100%; text-align: left;
  padding: 15px 17px; margin-bottom: 10px;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--paneel); color: inherit;
  transition: border-color .12s;
}
button.kaart:hover { border-color: var(--goud-rand); }
.kaart .naam { font-weight: 600; }
.kaart .meta { color: var(--zacht); font-size: 13px; margin-top: 3px; }

.rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 10px; }

.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.cijfer {
  padding: 16px 18px;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--paneel) 60%, var(--paneel-glans));
}
.cijfer .getal { font-size: 28px; font-weight: 700; letter-spacing: -1px; color: var(--goud); }
.cijfer .naam { font-size: 12.5px; color: var(--zacht); margin-top: 2px; }

.merk-label {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--paneel-2); color: var(--zacht);
}
.merk-label.open, .merk-label.nieuw { background: var(--goud-waas); color: var(--goud-licht); }
.merk-label.opgelost, .merk-label.omgezet, .merk-label.nagekeken { background: rgba(76,175,104,.15); color: var(--ok); }
.merk-label.escalatie, .merk-label.ruw { background: rgba(224,161,50,.15); color: var(--waarschuwing); }
.merk-label.admin { background: rgba(224,87,79,.15); color: var(--gevaar); }
.merk-label.technieker { background: var(--goud-waas); color: var(--goud-licht); }

/* --------------------------------------------------------------- boomstructuur */

.tak { border-left: 2px solid var(--goud-rand); margin-left: 12px; padding-left: 14px; }
.regel {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 13px; margin-bottom: 6px;
  border: 1px solid var(--rand); border-radius: 9px;
  background: var(--paneel); color: inherit; text-align: left;
}
button.regel:hover { border-color: var(--goud-rand); }
.regel .soort { font-size: 12px; color: var(--goud-diep); text-transform: uppercase; letter-spacing: .5px; }
.regel .rechts { margin-left: auto; font-size: 12px; color: var(--zacht); }

/* -------------------------------------------------------------------- tabel */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11.5px; color: var(--goud-diep); font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  padding: 11px 12px; border-bottom: 1px solid var(--rand);
}
td { padding: 11px 12px; border-bottom: 1px solid var(--rand); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td .knop { margin-right: 6px; }
.tabelkaart { border: 1px solid var(--rand); border-radius: var(--radius); background: var(--paneel); overflow-x: auto; }

/* ------------------------------------------------------------------ gesprek */

.bericht { padding: 13px 16px; margin-bottom: 10px; border-radius: var(--radius); background: var(--paneel); border: 1px solid var(--rand); }
.bericht.mij { background: var(--paneel-2); border-color: transparent; margin-left: 28px; }
.bericht .wie { font-size: 11.5px; color: var(--goud-diep); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .7px; font-weight: 600; }

.vraagkaart {
  padding: 20px 18px; margin: 6px 0 14px;
  border: 1px solid var(--goud); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--paneel-glans), var(--paneel));
  box-shadow: 0 0 0 3px var(--goud-waas);
}
.vraagkaart .vraag { font-size: 19px; font-weight: 600; line-height: 1.35; }
.vraagkaart .uitleg { margin-top: 9px; color: var(--zacht); font-size: 16px; }
.vraagkaart .verwacht { margin-top: 10px; font-size: 15px; color: var(--ok); }
.vraagkaart .knop { min-height: 56px; font-size: 17px; }
.vraagkaart .knop.klein { min-height: 34px; font-size: 13px; }

.let-op {
  display: flex; gap: 10px; margin-top: 13px; padding: 10px 13px; border-radius: 9px;
  background: rgba(224,161,50,.12); color: var(--waarschuwing); font-size: 15px; font-weight: 500;
}

.uitslag { padding: 17px; border-radius: var(--radius); border: 1px solid var(--ok); background: rgba(76,175,104,.06); }
.uitslag.escalatie { border-color: var(--waarschuwing); background: rgba(224,161,50,.06); }
.uitslag h3 { margin: 0 0 10px; font-size: 18px; }
.uitslag dt { font-size: 11.5px; color: var(--zacht); margin-top: 11px; text-transform: uppercase; letter-spacing: .7px; }
.uitslag dd { margin: 2px 0 0; }
.bronnen { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--rand); font-size: 13px; color: var(--zacht); }
.bronnen strong { color: var(--goud-diep); text-transform: uppercase; font-size: 11.5px; letter-spacing: .7px; }
.bronnen ul { margin: 6px 0 0; padding-left: 18px; }
.bronnen li { margin-bottom: 3px; }

/* ------------------------------------------------------------------ diversen */

.bezig { display: flex; align-items: center; gap: 10px; color: var(--zacht); padding: 14px 4px; }
.bezig::before {
  content: ""; width: 16px; height: 16px;
  border: 2px solid var(--rand); border-top-color: var(--goud);
  border-radius: 50%; animation: draai .8s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

.fout { padding: 12px 15px; border-radius: 9px; background: var(--slecht-waas); border: 1px solid var(--slecht); color: var(--gevaar); margin-bottom: 12px; }
.melding { padding: 12px 15px; border-radius: 9px; background: var(--goed-waas); border: 1px solid var(--goed); color: var(--ok); margin-bottom: 12px; }

.voortgang { height: 7px; border-radius: 999px; background: var(--paneel-2); overflow: hidden; margin-top: 8px; }
.voortgang > div { height: 100%; background: linear-gradient(90deg, var(--goud-diep), var(--goud-licht)); transition: width .3s; }

.feit { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.feit:last-child { border-bottom: 0; }
.feit input { flex: 1; }

details.blok { border: 1px solid var(--rand); border-radius: var(--radius); background: var(--paneel); margin-bottom: 10px; }
details.blok > summary { padding: 13px 17px; cursor: pointer; font-weight: 600; }
details.blok > summary::marker { color: var(--goud); }
details.blok[open] > summary { border-bottom: 1px solid var(--rand); }
details.blok > div { padding: 14px 17px 17px; }

/* --------------------------------------------------------------- aanmelden */

#aanmeldkader { max-width: 400px; margin: 8vh auto 0; }
#aanmeldkader .merk { text-align: center; margin-bottom: 28px; }
#aanmeldkader .merk img { width: 260px; max-width: 80%; }
#aanmeldkader .merk .onderschrift {
  margin-top: 12px; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--goud-diep); font-weight: 600;
}
#aanmeldkader .kader {
  padding: 26px 24px 28px;
  border: 1px solid var(--rand); border-radius: 16px;
  background: linear-gradient(170deg, var(--paneel), var(--paneel-glans));
}

/* ==========================================================================
   Dashboard: motorenpark, metingen, alarmen en taken

   Dezelfde huisstijl, maar deze schermen tonen toestand en geen tekst. Daarom
   komt er een set kleuren bij die overal hetzelfde betekent: groen is in orde,
   oranje is opvolgen, rood is niet meer in orde. Die drie staan los van het
   goud - het goud wijst waar je bent, deze drie zeggen hoe het ervoor staat.
   ========================================================================== */

:root {
  --goed: #2f9e5f;
  --letop: #d99a17;
  --slecht: #d1414a;
  --goed-waas: rgba(47, 158, 95, .14);
  --letop-waas: rgba(217, 154, 23, .14);
  --slecht-waas: rgba(209, 65, 74, .14);

  /* De meetlijn in een grafiek. Blauw, want het is geen toestand maar een
     grootheid - groen, oranje en rood zijn hier bezet. */
  --grafieklijn: #4f8ef7;
}

/*
 * Dezelfde drie betekenissen op wit.
 *
 * Donkerder, want een kleur die op zwart oplicht verdwijnt op papierwit - en
 * de waas iets steviger, want een tint van veertien procent is op een lichte
 * ondergrond nauwelijks te zien.
 */
:root[data-thema="licht"] {
  --goed: #1f7a48;
  --letop: #96660a;
  --slecht: #b4323b;
  --goed-waas: rgba(31, 122, 72, .1);
  --letop-waas: rgba(150, 102, 10, .11);
  --slecht-waas: rgba(180, 50, 59, .1);
  --grafieklijn: #1f5fc4;
}

/* ----------------------------------------------------------------- kaders */

/*
 * Het omhulsel van zowat elk blok op deze schermen: een groep velden, een
 * uitleg, een stap in een import. Het aanmeldscherm had er al een van, maar
 * alleen voor zichzelf; dit is dezelfde vorm voor de rest van het dashboard.
 */
.kader {
  padding: 16px 18px;
  margin-bottom: 16px;
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.kader > h2:first-child,
.kader > h3:first-child,
.kader > h4:first-child { margin-top: 0; }
.kader > p:last-child { margin-bottom: 0; }
/* Let op: .let-op bestond al als losse waarschuwingsbalk met een eigen flex-
   opmaak. Deze modifier heet daarom aandacht - dezelfde betekenis, maar hij
   kleurt alleen en herschikt de inhoud van het kader niet. */
.kader.aandacht { border-color: rgba(217,154,23,.4); background: var(--letop-waas); }


/* ------------------------------------------------------------- kerncijfers */

.cijferrij { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }

.kerncijfer {
  flex: 1 1 130px; min-width: 120px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; text-align: left;
  background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--radius);
  color: var(--tekst); font: inherit;
}
button.kerncijfer { cursor: pointer; }
button.kerncijfer:hover { border-color: var(--goud-rand); }
.kerncijfer .cijfer { font-size: 26px; font-weight: 600; line-height: 1.1; }
.kerncijfer .naam { color: var(--zacht); font-size: 13px; }
.kerncijfer .onder { color: var(--zacht); font-size: 12px; opacity: .8; }

.kerncijfer.niveau-goed   { border-color: rgba(47,158,95,.4);  background: var(--goed-waas); }
.kerncijfer.niveau-goed .cijfer { color: var(--goed); }
.kerncijfer.niveau-let-op { border-color: rgba(217,154,23,.4); background: var(--letop-waas); }
.kerncijfer.niveau-let-op .cijfer { color: var(--letop); }
.kerncijfer.niveau-slecht { border-color: rgba(209,65,74,.45); background: var(--slecht-waas); }
.kerncijfer.niveau-slecht .cijfer { color: var(--slecht); }

/* --------------------------------------------------------------- verdeling */

.verdeelbalk { margin-bottom: 18px; }
.verdeelbalk .balk {
  display: flex; height: 14px; border-radius: 7px; overflow: hidden;
  background: var(--paneel-2); border: 1px solid var(--rand);
}
.verdeelbalk .balk span { display: block; height: 100%; }
.verdeelbalk .legende { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; font-size: 13px; color: var(--zacht); }
.verdeelbalk .legende i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.verdeelbalk .legende strong { color: var(--tekst); }

/* ------------------------------------------------------------------- rijen */

.lijst { display: flex; flex-direction: column; gap: 6px; }

.rij {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; text-align: left;
  background: var(--paneel); border: 1px solid var(--rand); border-radius: 10px;
  color: var(--tekst); font: inherit; cursor: pointer;
}
.rij:hover { border-color: var(--goud-rand); background: var(--paneel-2); }
.rij .hoofd { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rij .hoofd strong { font-weight: 600; }
.rij .hoofd .zacht { font-size: 13px; }
/* Het kenmerk staat achteraan en stil: het is wat er op de kast geschreven
   staat, maar niet waar je op zoekt. De machinenaam vooraan doet dat werk. */
.rij .kenmerk {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px; color: var(--zacht); opacity: .75;
  min-width: 48px; text-align: right; white-space: nowrap;
}
.rij .getal { font-variant-numeric: tabular-nums; color: var(--zacht); font-size: 13px; white-space: nowrap; }
.rij .plaats { font-size: 13px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Het bolletje links zegt in een oogopslag hoe de laatste meting uitviel. */
.stip { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--zacht); }
.stip.goed { background: var(--goed); }
.stip.letop { background: var(--letop); }
.stip.slecht { background: var(--slecht); }
.stip.stil { background: var(--zacht); }
.stip.leeg { background: transparent; border: 1.5px dashed var(--rand); }

/* ---------------------------------------------------------------- merkjes */

.merkje {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--paneel-2); color: var(--zacht); border: 1px solid var(--rand);
}
.merkje.goed   { background: var(--goed-waas);   color: var(--goed);   border-color: rgba(47,158,95,.35); }
.merkje.letop, .merkje.oranje { background: var(--letop-waas); color: var(--letop); border-color: rgba(217,154,23,.35); }
.merkje.slecht, .merkje.rood  { background: var(--slecht-waas); color: var(--slecht); border-color: rgba(209,65,74,.35); }

.teller {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.teller.letop  { background: var(--letop-waas);  color: var(--letop); }
.teller.slecht { background: var(--slecht-waas); color: var(--slecht); }

/* ------------------------------------------------------------------ chips */

.chiprij { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.chip {
  padding: 6px 13px; border-radius: 999px; font-size: 13px; cursor: pointer;
  background: var(--paneel); border: 1px solid var(--rand); color: var(--zacht);
}
.chip:hover { border-color: var(--goud-rand); }
.chip.actief { background: var(--goud-waas); border-color: var(--goud-rand); color: var(--goud-licht); }

/* ------------------------------------------------------------------- tabs */

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0 0; border-bottom: 1px solid var(--rand); }
.tab {
  padding: 9px 15px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--zacht); font: inherit; cursor: pointer; min-height: 0;
}
.tab:hover { color: var(--tekst); }
.tab.actief { color: var(--goud-licht); border-bottom-color: var(--goud); }
.tabinhoud { padding-top: 18px; }

/* --------------------------------------------------------------- formulier */

/* Twee kolommen op een monitor, een op een telefoon. Lange velden lopen door. */
.veldraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.veldraster > .breed { grid-column: 1 / -1; }

.gegevens { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 10px 0 0; }
.gegevens dt { color: var(--zacht); font-size: 13px; }
.gegevens dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- tabellen */

/* Een brede tabel mag horizontaal schuiven in plaats van de pagina op te rekken. */
.tabelwrap { overflow-x: auto; margin: 12px 0; -webkit-overflow-scrolling: touch; }
.mappingtabel, .metingtabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.mappingtabel th, .metingtabel th {
  text-align: left; padding: 8px 10px; color: var(--zacht); font-weight: 500; font-size: 13px;
  border-bottom: 1px solid var(--rand); white-space: nowrap;
}
.mappingtabel td, .metingtabel td { padding: 7px 10px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
.metingtabel td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mappingtabel select { margin: 0; min-width: 190px; }

/* --------------------------------------------------------------- grafieken */

.grafiek {
  margin: 0 0 20px; padding: 14px 16px 10px;
  background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--radius);
}
.grafiek figcaption { font-weight: 600; margin-bottom: 8px; }
.grafiek figcaption .eenheid { color: var(--zacht); font-weight: 400; font-size: 13px; }
.grafiek-svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafiek-svg .as { font-size: 11px; fill: var(--zacht); }
.grafiek-svg .drempel { font-size: 10px; opacity: .9; }
.grafiek-voet { margin: 6px 0 0; font-size: 12px; color: var(--zacht); }

/* ---------------------------------------------------------------- meetblok */

.oordeel { border-left: 3px solid var(--rand); }
.oordeel.goed   { border-left-color: var(--goed); }
.oordeel.letop  { border-left-color: var(--letop); }
.oordeel.slecht { border-left-color: var(--slecht); }
.oordeelregel { margin: 6px 0 0; }

/* ----------------------------------------------------------------- alarmen */

.kaart.alarm, .kaart.regel, .kaart.kanaal, .kaart.taak {
  display: block; width: 100%; text-align: left; cursor: default;
  padding: 14px 16px; margin-bottom: 10px;
  background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--radius);
}
.kaart.alarm.slecht { border-left: 3px solid var(--slecht); }
.kaart.alarm.letop  { border-left: 3px solid var(--letop); }
.kaart.regel.uit { opacity: .5; }
.kaart.kanaal.aan { border-color: rgba(47,158,95,.35); }

.alarmkop { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 5px; }
.alarmkop strong { font-size: 15px; }
.klein { font-size: 12px; }
.aandacht { color: var(--letop); }
.alarmrij { margin-bottom: 6px; }

.regelveld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--zacht); margin: 0; }
.regelveld select, .regelveld input { margin: 0; }
select.klein, input.klein { min-height: 32px; padding: 4px 9px; font-size: 13px; }

.zoekbalk { width: 100%; margin-bottom: 12px; }

/* ------------------------------------------------------------------- taken */

/* Op een monitor drie kolommen naast elkaar, op een telefoon onder elkaar:
   slepen tussen kolommen werkt op een aanraakscherm toch niet. */
/* Vier kolommen op een breed scherm; smaller wordt het er twee en op een gsm een. */
.bord { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.bordkolom { background: var(--paneel-2); border: 1px solid var(--rand); border-radius: var(--radius); padding: 10px; }
.bordkolom header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.bordkolom h2 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--zacht); }
.bordkolom .telling { color: var(--zacht); font-size: 13px; }
.dropvak { min-height: 70px; display: flex; flex-direction: column; gap: 8px; border-radius: 9px; }
.dropvak.erboven { background: var(--goud-waas); outline: 1px dashed var(--goud-rand); }

.kaart.taak { margin: 0; cursor: grab; }
.kaart.taak.sleept { opacity: .45; }
.kaart.taak.prio-dringend { border-left: 3px solid var(--slecht); }
.kaart.taak.prio-hoog { border-left: 3px solid var(--letop); }
.taakkop { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.dagkop { margin: 20px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--zacht); }

/* Vier kolommen naast elkaar worden onder de 1100 px te smal om een taaktitel
   in te lezen. Dan liever twee brede rijen van twee dan vier kokertjes. */
@media (max-width: 1100px) {
  .bord { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .bord { grid-template-columns: 1fr; }
  .rij .plaats, .rij .getal { display: none; }
  .rij .kenmerk { display: none; }
}

/* ------------------------------------------------------- vestiging beheren */

/* Ingeklapt: op een klantscherm met vijf vestigingen zou vijf keer een open
   formulier het overzicht wegdrukken. */
.vestigingbeheer {
  margin-top: 12px; padding: 10px 12px;
  border: 1px dashed var(--rand); border-radius: 10px;
}
.vestigingbeheer > summary {
  cursor: pointer; color: var(--zacht); font-size: 13px; list-style: none;
}
.vestigingbeheer > summary::-webkit-details-marker { display: none; }
.vestigingbeheer > summary::before { content: '\2699\00a0\00a0'; }
.vestigingbeheer > summary:hover { color: var(--goud-licht); }
.vestigingbeheer[open] > summary { margin-bottom: 8px; color: var(--goud-licht); }

/* ---------------------------------------------------------- kenplaatfoto */

/* De foto blijft in beeld naast het resultaat: zie je zelf dat hij onscherp is,
   dan weet je meteen waarom het model de helft niet kon lezen. */
.kenplaatfoto { margin: 0 0 16px; }
.kenplaatfoto img {
  display: block; width: 100%; max-width: 460px;
  border-radius: var(--radius); border: 1px solid var(--rand);
}
.kenplaatfoto figcaption { margin-top: 6px; font-size: 12px; }

.mappingtabel input[type=checkbox] { width: auto; margin: 0; }

/* ---------------------------------------------------------------- stickers */

/*
 * Het etiketvel. Op het scherm een raster om na te kijken, op papier een vel
 * dat je op zelfklevend papier legt. Vandaar de vaste maat in millimeter: een
 * sticker moet echt 62 bij 34 zijn, hoe groot je scherm ook is.
 */
.etiketvel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

.etiket {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  color: #000;
  border: 1px solid #bbb;
  border-radius: 4px;
  break-inside: avoid;
}
.etiket svg { flex: none; width: 54px; height: 54px; display: block; }
.etiket-tekst { min-width: 0; display: flex; flex-direction: column; line-height: 1.28; }
.etiket-tekst strong {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 15px; font-weight: 700;
}
.etiket-tekst span { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiket-tekst .klein { font-size: 10px; color: #555; }

.scanbeeld {
  width: 100%; max-width: 420px; border-radius: var(--radius);
  border: 1px solid var(--rand); background: #000; display: block;
}

@media print {
  /* Alleen het vel op papier: geen menu, geen knoppen, geen uitleg. */
  #navigatie, #kop, .nietdrukken { display: none !important; }
  body, html { background: #fff; }
  #scherm { padding: 0; max-width: none; }
  .etiketvel { grid-template-columns: repeat(3, 62mm); gap: 3mm; }
  .etiket { border: 1px dashed #999; height: 34mm; }
}

/* ------------------------------------------------------------ themaknop */

/*
 * Rechtsboven en vast op zijn plek, want de kop is verborgen op het
 * aanmeldscherm en dan zou de knop meeverdwijnen. Boven de kopbalk, die zelf
 * plakt bij het scrollen.
 */
.themaknop {
  position: fixed;
  top: max(env(safe-area-inset-top), 10px);
  right: 14px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--paneel);
  color: var(--zacht);
  font: inherit;
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .14s, color .14s;
}
.themaknop:hover { border-color: var(--goud-rand); color: var(--tekst); }
.themaknop:focus-visible { outline: 2px solid var(--goud); outline-offset: 2px; }

/* Het spoor waarin het knopje schuift, met de zon en de maan als vaste ijkpunten. */
.thema-spoor {
  position: relative;
  display: block;
  width: 46px;
  height: 24px;
  border-radius: 999px;
  background: var(--paneel-2);
  border: 1px solid var(--rand);
  flex: none;
}

.thema-zon,
.thema-maan {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  transition: opacity .16s;
}
.thema-zon { left: 6px; color: var(--goud); }
.thema-maan { right: 6px; color: var(--zacht); }

/* Het knopje zelf. Links staat het op licht, rechts op donker. */
.thema-knop {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--goud-vlak-licht), var(--goud-vlak));
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform .18s ease;
}

:root[data-thema="donker"] .thema-knop { transform: translateX(22px); }
:root[data-thema="donker"] .thema-zon { opacity: .35; }
:root[data-thema="licht"] .thema-maan { opacity: .35; }

.thema-label {
  min-width: 3.6em;
  text-align: left;
  font-weight: 500;
  letter-spacing: .01em;
}

/*
 * De kop mag niet onder de knop doorlopen. Op een breed scherm is er ruimte
 * zat; op een telefoon staat de titel er bijna tegenaan.
 */
#kop { padding-right: 152px; }

@media (max-width: 560px) {
  /* Op een klein scherm alleen het schuifje: het woord ernaast kost de titel
     de helft van zijn breedte. */
  .thema-label { display: none; }
  .themaknop { padding: 5px 7px; right: 10px; }
  #kop { padding-right: 78px; }
}

@media print {
  .themaknop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .thema-knop, .thema-zon, .thema-maan, .themaknop { transition: none; }
}

/* ------------------------------------------------------------- gereedschap */

/*
 * De uitkomst van een berekening. Het antwoord groot bovenaan, en daaronder de
 * weg ernaartoe regel voor regel - want een doorsnede zonder de factoren waar
 * ze uit volgt kan je niet nakijken, en wat je niet kunt nakijken mag je niet
 * gebruiken om een installatie mee te leggen.
 */
.grootuitkomst {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--goud-licht);
  line-height: 1.1;
}
.grootuitkomst .zacht { font-size: 17px; font-weight: 500; letter-spacing: 0; }

.uitkomstrij {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rand);
  font-size: 14px;
}
.uitkomstrij:last-child { border-bottom: 0; }
.uitkomstrij span { color: var(--zacht); }
.uitkomstrij strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.uitkomstrij.goed strong { color: var(--goed); }
.uitkomstrij.slecht strong { color: var(--slecht); }

/* De rij die het geworden is, en de rijen die afvielen. */
tr.gekozen { background: var(--goud-waas); }
tr.gekozen td { font-weight: 600; }
tr.afgevallen td { color: var(--zacht); }

/*
 * Geen hoofdletters in de kop van een rekentabel. Een th staat elders in
 * kapitaal, maar hier staan er eenheden in: text-transform maakt van mOhm een
 * MOhm, en dat is een factor miljard. Een opmaakregel mag geen eenheid
 * veranderen.
 */
.tabelkaart td, .tabelkaart th { font-variant-numeric: tabular-nums; }
.rekentabel th { text-transform: none; font-size: 12.5px; letter-spacing: .2px; }

/*
 * De twee kabelschoenen naast elkaar: de fase en de aarde. Naast elkaar en niet
 * onder elkaar, want het zijn twee maten van dezelfde aansluiting en je wil ze
 * in een oogopslag kunnen vergelijken - de aarde is een maat kleiner en dat is
 * precies wat er in de praktijk misgaat.
 */
.schoenparen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.schoenkaart h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--goud-diep); }
.schoenmaat { font-size: 22px; font-weight: 700; color: var(--tekst); letter-spacing: -.4px; }
.schoenkaart .hint { margin-bottom: 10px; }

/* ------------------------------------------------------------- opmerkingen */

/* De laatste opmerking op een taakkaart. Ingesprongen met een streepje ervoor:
   het is een aantekening bij de taak en geen deel van de omschrijving, en dat
   verschil moet je zien zonder te lezen. */
.taakopmerking {
  margin: 6px 0 0;
  padding-left: 9px;
  border-left: 2px solid var(--goud-rand);
  font-size: 13px;
  color: var(--tekst);
}

/* De notitie boven een kolom geldt voor alles eronder, dus staat hij los van de
   kaarten en niet als eerste kaart in de rij. */
.kolomnotitie {
  margin: 0 0 9px;
  padding: 7px 9px;
  background: var(--goud-waas);
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.45;
}

.opmerkingen { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.opmerking {
  padding: 9px 11px;
  background: var(--paneel-2);
  border-radius: var(--radius);
  border: 1px solid var(--rand);
}
.opmerking p { margin: 0; }
.opmerking p + p { margin-top: 5px; }

/* -------------------------------------------------------------------- crm */

/* De kop van een rij of kaart: naam links, merkjes erachter op dezelfde lijn. */
.rijhoofd { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.relatierij { cursor: pointer; }
.relatierij:hover { border-color: var(--goud-rand); }

/* Een tussenkopje in een lijst. Kleiner dan een h3 en zonder witruimte eromheen:
   het scheidt twee groepen binnen hetzelfde kader in plaats van twee secties. */
.etiketje {
  font-size: 11px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--goud-diep);
  font-weight: 600;
  margin-top: 4px;
}

.tijdlijn { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.tijdlijnrij {
  padding: 9px 11px;
  background: var(--paneel-2);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
/* Wat nog moet gebeuren krijgt de merkkleur: het is het enige in de tijdlijn
   waar je iets mee moet, de rest is geschiedenis. */
.tijdlijnrij.open { border-left: 3px solid var(--goud); background: var(--goud-waas); }
.tijdlijnrij p { margin: 5px 0 0; }

.contactkaart { margin-bottom: 9px; }

/* Zeven fasen passen niet in vier kolommen; de pijplijn schuift horizontaal in
   plaats van de kaarten tot briefjes te knijpen. */
.pijplijnbord {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(215px, 1fr);
  overflow-x: auto;
  padding-bottom: 8px;
}
.kolomwaarde {
  margin: -4px 0 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--goud);
  font-variant-numeric: tabular-nums;
}
.kansbedrag {
  margin: 5px 0 0;
  font-size: 17px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------- offertes */

.offertenr {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--goud);
  font-weight: 600;
}
.offertebedrag { margin-top: 5px; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* De regeltabel: smal en dicht, want een offerte van twintig regels moet in
   een oogopslag te overzien zijn. */
.regeltabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.regeltabel th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--zacht);
  padding: 6px 7px;
  border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}
.regeltabel td { padding: 4px 7px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
.regeltabel td.n, .regeltabel th.n { text-align: right; font-variant-numeric: tabular-nums; }
.regeltabel .regelkop td { background: var(--paneel-2); font-weight: 600; }
.regeltabel .greep { cursor: grab; color: var(--zacht); user-select: none; width: 22px; }
.regeltotaal { font-weight: 600; white-space: nowrap; }

.regelveld {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--tekst);
  font: inherit;
}
.regelveld:hover { border-color: var(--rand); }
.regelveld:focus { border-color: var(--goud-rand); background: var(--invoer-bg); outline: none; }
.regelveld.getal { text-align: right; font-variant-numeric: tabular-nums; }

/* De voet staat rechts uitgelijnd: dat is waar een oog naar een totaal zoekt. */
.offertevoet { margin: 16px 0 0 auto; max-width: 340px; }
.voetrij {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 5px 0;
  font-variant-numeric: tabular-nums;
}
.voetrij.groot {
  border-top: 1px solid var(--rand);
  margin-top: 5px;
  padding-top: 9px;
  font-size: 17px;
}

/* --------------------------------------------------- het afdrukblad */

.offerteblad {
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 30px;
}
.bladkop { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 22px; }
.bladtitel { font-size: 24px; font-weight: 700; letter-spacing: -.4px; }
.bladvoor { margin-bottom: 22px; line-height: 1.5; }
.bladtabel { width: 100%; border-collapse: collapse; font-size: 14px; margin: 18px 0; }
.bladtabel th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--zacht);
  padding: 7px 8px;
  border-bottom: 1px solid var(--rand);
}
.bladtabel td { padding: 7px 8px; border-bottom: 1px solid var(--rand); }
.bladtabel td.n, .bladtabel th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bladtabel .bladkopregel td { background: var(--paneel-2); font-weight: 600; padding-top: 11px; }
.bladvoorwaarden { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--rand); font-size: 13px; }

/* Op papier: geen schermchroom, en het blad zelf zonder kader op wit. */
@media print {
  #zijbalk, #klantbalk, #navigatie, #kop, .themaknop, .nietprinten, .knoprij { display: none !important; }
  #scherm { padding: 0; max-width: none; }
  .offerteblad { border: 0; padding: 0; background: transparent; }
}


/* ------------------------------------------------------------- werkorders */

.wonummer {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--goud);
  font-weight: 600;
}

/* Vijf kolommen; onder de 1300 px twee, op een gsm een. Een werkorderkaart
   draagt meer regels dan een taakkaart en wordt dus eerder onleesbaar smal. */
.werkbord { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1300px) { .werkbord { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px)  { .werkbord { grid-template-columns: 1fr; } }

/* Hoever de checklist staat. Een balkje zegt in een oogopslag wat "4 van 11"
   pas na lezen zegt. */
.voortgang {
  height: 4px;
  margin-top: 8px;
  background: var(--rand);
  border-radius: 2px;
  overflow: hidden;
}
.voortgangbalk { height: 100%; background: var(--goud); transition: width .2s; }

.checklijst { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.checkrij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--paneel-2);
  cursor: pointer;
}
.checkrij:hover { border-color: var(--goud-rand); }
.checkrij input { width: 17px; height: 17px; flex: none; accent-color: var(--goud); }
.checkrij span:first-of-type { flex: 1; }
/* Afgevinkt blijft leesbaar maar zakt naar de achtergrond: je moet kunnen zien
   wat er gedaan is zonder dat het de aandacht trekt van wat nog moet. */
.checkrij.af span:first-of-type { text-decoration: line-through; color: var(--zacht); }

/* De klantverdeling boven de alarmlijst: meteen een overzicht en een filter. */
.klantverdeling { margin-top: -4px; }
.klantverdeling .chip.kritiek { border-color: var(--gevaar); color: var(--gevaar); }

/* Op een gsm alleen het schuifje, zonder het woord "Donker": dat scheelt
   negentig pixels die de klantbalk beter kan gebruiken. */
@media (max-width: 900px) {
  .themaknop .thema-label { display: none; }
  .themaknop { padding: 5px 6px; }
}

/* ---------------------------------------------------- afdelingen en borden */

/* Een afdeling is een kop met zijn borden eronder, geen kader rond de borden:
   de borden zijn zelf al kaarten, en kader-in-kader maakt het drukker zonder
   dat het iets zegt. Een dunne lijn scheidt de afdelingen. */
.knoprij.bovenaan { margin: 0 0 18px; }
.afdeling { padding-top: 16px; margin-bottom: 22px; border-top: 1px solid var(--rand); }
.afdeling:first-of-type { border-top: 0; padding-top: 0; }
.afdelingkop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.afdelingkop h2 { margin: 0 0 2px; }
.afdelingknoppen { display: flex; flex-wrap: wrap; gap: 6px; }

.bordraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.bordkaart {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0; min-height: 96px; cursor: pointer;
}
.bordkaart .meta { margin-top: 0; }
.bordtellers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }

/* Hoeveel er af is, als dunne balk onderaan. Geen percentage in cijfers: het
   gaat erom welk bord achterloopt, en dat zie je aan een lengte sneller. */
.bordvoortgang { display: block; height: 3px; border-radius: 3px; background: var(--paneel-2); overflow: hidden; }
.bordvoortgang span { display: block; height: 100%; background: var(--goud); }

.merkje.goud { background: var(--goud-waas); color: var(--goud); border-color: var(--goud-rand); }
.bordomschrijving { margin: -4px 0 14px; }

/* Een venster voor keuzes met meer dan twee antwoorden. */
.venster-achter {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .55);
}
.venster {
  width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 20px 22px; border-radius: var(--radius);
  background: var(--paneel); border: 1px solid var(--rand);
  box-shadow: 0 20px 50px var(--schaduw-diep);
}
/* Een vraag en geen sectiekop: gewone zinsbouw, zodat een naam tussen
   aanhalingstekens leesbaar blijft. */
.venster h2 { margin: 0 0 12px; font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--tekst); line-height: 1.35; }
.venster-uitleg p { margin: 0 0 8px; line-height: 1.5; }
.venster > div + div { margin-top: 10px; }
.venster label { display: block; }
.venster select, .venster input, .venster textarea { width: 100%; }

@media (max-width: 560px) {
  .venster .knoprij .knop { flex: 1 1 100%; }
  .afdelingkop { flex-direction: column; }
}

/* ------------------------------------------------------------- projecten */

/* De vier bedragen van een project naast elkaar. Op een kaart in de lijst en
   bovenaan het projectblad hetzelfde blok: je leert één plaatje en herkent het
   daarna overal. */
.projectcijfers {
  display: grid; gap: 8px; margin: 12px 0 4px;
  /* auto-fit en niet vier vaste kolommen: een bedrag kan niet smaller dan zijn
     cijfers, dus vier kolommen op een smal scherm duwen de kaart buiten beeld
     in plaats van te krimpen. */
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.projectcijfer {
  padding: 8px 10px; border-radius: 9px;
  background: var(--paneel-2); border: 1px solid var(--rand);
  display: flex; flex-direction: column; gap: 2px;
}
.projectcijfer strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.projectcijfer.slecht { border-color: rgba(209,65,74,.45); }
.projectcijfer.slecht strong { color: var(--slecht); }

.kaart.project { display: block; }
.projectkop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.projectletop {
  margin-top: 8px; padding: 6px 9px; border-radius: 7px;
  background: var(--letop-waas); color: var(--letop); font-size: 13px;
}
.bordvoortgang.groot { height: 6px; margin: 10px 0 4px; }
.kader.binnen { background: var(--paneel-2); margin: 14px 0 0; }
.kader.binnen h3 { margin: 0 0 8px; }

/* Wat uiterlijk besteld moet worden. Te laat is rood, deze weken oranje, de
   rest gewoon: een lijst waar alles brandt, leest niemand meer. */
.bestellijst { display: flex; flex-direction: column; gap: 6px; }
.bestelregel {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px;
  padding: 7px 9px; border-radius: 7px; background: var(--paneel);
  border-left: 3px solid var(--rand);
}
.bestelregel.dringend { border-left-color: var(--letop); }
.bestelregel.telaat { border-left-color: var(--slecht); background: var(--slecht-waas); }

/* De balkenplanning. Eén grid: de eerste kolom is de naam, de rest zijn dagen
   of weken. De balk zelf staat in dezelfde rij en krijgt zijn kolommen mee. */
.tijdsbalkvak { overflow-x: auto; margin-bottom: 18px; padding-bottom: 4px; }
.tijdsbalk { min-width: 100%; display: flex; flex-direction: column; gap: 3px; }
.tijdrij {
  display: grid;
  grid-template-columns: 190px repeat(var(--kolommen), minmax(34px, 1fr));
  align-items: center; gap: 2px;
}
.tijdlabel {
  font-size: 13px; padding-right: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tijdkop {
  display: flex; flex-direction: column; align-items: center;
  font-size: 11px; line-height: 1.2; padding: 3px 0; border-radius: 5px;
}
.tijdkop.weekend { color: var(--zacht); }
.tijdkop.stilstand { background: var(--goud-waas); }
.tijdkop.vandaag { outline: 1px solid var(--goud-rand); }
.tijdcel { grid-row: 1; height: 26px; border-radius: 5px; background: var(--paneel-2); }
.tijdcel.weekend { background: var(--paneel); }
.tijdbalk {
  grid-row: 1; height: 26px; margin: 0; padding: 0 8px;
  display: flex; align-items: center; gap: 6px; overflow: hidden;
  border: 0; border-radius: 6px; cursor: pointer;
  background: var(--goud-vlak); color: var(--op-goud);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tijdbalk .klein { font-weight: 400; opacity: .8; }
.tijdbalk.stand-klaar { background: var(--goed); color: #fff; }
.tijdbalk.stand-geschrapt { background: var(--paneel-2); color: var(--zacht); text-decoration: line-through; }
.tijdbalk:hover { filter: brightness(1.08); }

.kaart.werkpakket.stand-klaar { opacity: .75; }
.vergunning {
  margin: 6px 0 0; padding: 6px 9px; border-radius: 7px;
  background: var(--letop-waas); color: var(--letop); font-size: 12px;
}
.vinkrij { display: flex; flex-wrap: wrap; gap: 6px; }
.vinkrij .checkrij { width: auto; padding: 5px 9px; }
.zelfde-regel { align-self: center; }

/* De begroting. Een tabel en geen kaarten: je leest hem kolom per kolom om te
   zien waar het geld zit, en dat kan alleen als de cijfers onder elkaar staan. */
.kostentabel { overflow-x: auto; margin-bottom: 14px; }
.kostentabel table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kostentabel th, .kostentabel td { padding: 7px 9px; border-bottom: 1px solid var(--rand); text-align: left; vertical-align: top; }
.kostentabel th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); font-weight: 600; }
.kostentabel .getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kostentabel .vinkkolom { width: 28px; padding-right: 0; }
.kostentabel .soortrij td { background: var(--paneel-2); font-weight: 600; font-size: 13px; }
.kostentabel .totaalrij td { border-bottom: 0; border-top: 2px solid var(--rand); font-weight: 700; }
.kostentabel .kostenrij td:nth-child(2) { cursor: pointer; }
.kostentabel .kostenrij:hover td { background: var(--paneel-2); }
.kostentabel .aandacht { color: var(--slecht); }

.kaart.klein-kaart { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }

@media (max-width: 700px) {
  .tijdrij { grid-template-columns: 130px repeat(var(--kolommen), minmax(30px, 1fr)); }
}

/* ------------------------------------------------- de boom in de klantfiche */

/* Het pijltje staat los van de rij: op de naam klikken opent de installatie,
   op het pijltje klapt de tak open. Twee dingen op één knop is precies hoe je
   per ongeluk op een ander scherm belandt terwijl je wilde kijken wat eronder
   zit. */
.takrij { display: flex; align-items: stretch; gap: 2px; }
.takrij .regel { flex: 1; min-width: 0; }
.uitklap {
  flex: none; width: 30px; margin-bottom: 6px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--zacht);
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: transform .12s, color .12s;
}
/* Op een gsm bedien je dit met een duim: dan mag het pijltje wat breder. En de
   tellingen gaan naar een eigen regel: anders knijpt "127 motoren - 1 document"
   de naam van de machine tot drie woorden boven elkaar. */
@media (max-width: 700px) {
  .uitklap { width: 40px; }
  .takrij .regel { flex-wrap: wrap; }
  .takrij .regel .rechts { width: 100%; margin-left: 0; }
}
.uitklap:hover { color: var(--goud); border-color: var(--rand); }
.uitklap.open { transform: rotate(90deg); color: var(--goud); }
/* Een tak zonder inhoud houdt zijn plaats, anders springen alle namen uit
   lijn - maar hij nodigt niet uit om erop te drukken. */
.uitklap.leeg { visibility: hidden; cursor: default; }

.blok > summary .sitecijfers { display: block; margin-top: 2px; font-weight: 400; }
.regel .rechts .merkje { margin-left: 8px; }
.goed-tekst { color: var(--goed); }
.letop-tekst { color: var(--letop); }

/* --------------------------------------------- de uitvoering van een project */

/* Een telletje in een tab: hoeveel er openstaat zonder dat je hoeft te klikken.
   Alleen tonen waar er iets ís - een rij tabs met overal een nul leest als
   ruis. */
.chip .chiptel {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  border-radius: 999px; background: var(--goud-waas); color: var(--goud);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.chip.actief .chiptel { background: rgba(0,0,0,.18); color: inherit; }

.kaart.meerwerk, .kaart.dagrapport, .kaart.puntkaart { display: block; }
.kaart.meerwerk { border-left: 3px solid var(--goud-rand); }
.kaart.puntkaart { border-left: 3px solid var(--rand); }

/* Foto's bij een record: klein genoeg om naast de tekst te staan, groot genoeg
   om te zien wat erop staat. Aanklikken opent het origineel. */
.fotostrook { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.fotokiekje {
  display: block; width: 92px; height: 92px; overflow: hidden;
  border: 1px solid var(--rand); border-radius: 9px; background: var(--paneel-2);
}
.fotokiekje img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotokiekje:hover { border-color: var(--goud-rand); }
.fotodocument {
  display: inline-block; padding: 8px 11px; border-radius: 9px;
  border: 1px solid var(--rand); background: var(--paneel-2);
  font-size: 13px; color: var(--tekst); text-decoration: none;
}
.fotodocument:hover { border-color: var(--goud-rand); }
.knop.fotoweg { min-height: 26px; padding: 2px 9px; align-self: flex-start; }

/* ------------------------------------------------ gezondheid en portfolio */

/* De kleur van een project. Altijd met de reden ernaast: een gekleurde bol
   zonder uitleg is een mening, geen signaal. */
.gezondheid { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.bol {
  width: 11px; height: 11px; flex: none; border-radius: 50%;
  background: var(--zacht); box-shadow: 0 0 0 3px rgba(255,255,255,.04);
}
.bol.groen  { background: var(--goed); }
.bol.oranje { background: var(--letop); }
.bol.rood   { background: var(--slecht); }
.bol.grijs  { background: var(--zacht); }
.gezondheid.groen .bol  { background: var(--goed); }
.gezondheid.oranje .bol { background: var(--letop); }
.gezondheid.rood .bol   { background: var(--slecht); }
.gezondheid.rood span:last-child   { color: var(--slecht); }
.gezondheid.oranje span:last-child { color: var(--letop); }

.gezondheidskader.rood   { border-color: rgba(209,65,74,.4); }
.gezondheidskader.oranje { border-color: rgba(217,154,23,.4); }
.redenen { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.redenen li { font-size: 13.5px; display: flex; align-items: center; gap: 8px; }

/* Het overzicht over alle klanten: een tabel, want je leest hem kolom per
   kolom om te zien waar het misloopt. */
.portfoliotabel .portfoliorij { cursor: pointer; }
.portfoliotabel .portfoliorij:hover td { background: var(--paneel-2); }
.portfoliotabel td { vertical-align: top; }

/* De drie bedragen als balken: de verhouding zegt meer dan de getallen. */
.geldbalk { display: grid; grid-template-columns: 130px 1fr 90px; gap: 10px; align-items: center; margin-bottom: 7px; }
.geldbalk .staaf { height: 10px; border-radius: 6px; background: var(--paneel-2); overflow: hidden; }
.geldbalk .staaf > span { display: block; height: 100%; border-radius: 6px; }
.geldbalk .raming    { background: var(--zacht); }
.geldbalk .vast      { background: var(--goud-diep); }
.geldbalk .werkelijk { background: var(--goud); }
.geldbalk .prognose  { background: var(--goed); }
.geldbalk .prognose.slecht { background: var(--slecht); }
.geldbalk .getal { text-align: right; font-variant-numeric: tabular-nums; }

/* Mijlpalen: een ruit, zoals in elk planningspakket. */
.mijlpaal { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--rand); }
.mijlpaal:last-of-type { border-bottom: 0; }
.mijlpaal .ruit {
  width: 11px; height: 11px; flex: none; transform: rotate(45deg);
  background: var(--goud); border-radius: 2px;
}
.mijlpaal.gehaald .ruit { background: var(--goed); }
.mijlpaal.gemist .ruit { background: var(--slecht); }
.mijlpaal.te-laat-gehaald .ruit { background: var(--letop); }
.mijlpaalnaam { font-weight: 600; }
.mijlpaalknoppen { margin-left: auto; display: flex; gap: 6px; }

@media (max-width: 700px) {
  .geldbalk { grid-template-columns: 96px 1fr 76px; gap: 7px; }
  .mijlpaalknoppen { margin-left: 0; width: 100%; }
}

/* ----------------------------------------------------------------- planbord */

/* Mensen op de ene as, dagen op de andere. Dezelfde vorm als de tijdsbalk van
   een project, maar dan over alle projecten heen. */
.planbordvak { overflow-x: auto; margin-bottom: 18px; padding-bottom: 4px; }
.planbord { min-width: 100%; display: flex; flex-direction: column; gap: 3px; }
.planrij {
  display: grid;
  grid-template-columns: 150px repeat(var(--dagen), minmax(52px, 1fr));
  align-items: center; gap: 2px; min-height: 46px;
}
.planlabel { font-size: 13px; font-weight: 600; padding-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plankop { display: flex; flex-direction: column; align-items: center; font-size: 11px; padding: 3px 0; border-radius: 5px; }
.plankop.weekend { color: var(--zacht); }
.plankop.vandaag { background: var(--goud-waas); outline: 1px solid var(--goud-rand); }
.plancel { grid-row: 1; min-height: 46px; border-radius: 6px; background: var(--paneel-2); position: relative; }
.plancel.weekend { background: var(--paneel); }

/* Afwezig: de dag krijgt strepen in plaats van een blokje, zodat je ziet dat er
   niets gepland kán worden in plaats van dat er niets gepland is. */
.plancel.afwezig {
  background: repeating-linear-gradient(45deg, var(--paneel-2), var(--paneel-2) 4px, var(--paneel) 4px, var(--paneel) 8px);
}
.plancel.afwezig .afwezigtekst {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--zacht); text-transform: uppercase; letter-spacing: .04em;
}
.plancel.wachtdienst { outline: 1px dashed var(--goud-rand); }
.plancel.botst { outline: 2px solid var(--slecht); }

.planblok {
  grid-row: 1; min-height: 46px; margin: 0; padding: 4px 9px;
  display: flex; flex-direction: column; justify-content: center; gap: 1px; overflow: hidden;
  border: 1px solid var(--rand); border-left: 4px solid var(--goud); border-radius: 6px;
  background: var(--paneel); color: var(--tekst); cursor: pointer;
  font-size: 12px; line-height: 1.3; text-align: left;
}
/* Eén regel per stuk, netjes afgekapt: een blok van drie dagen kan geen alinea
   tonen, en tekst die achter de rand verdwijnt leest slechter dan tekst die
   zichtbaar afgekapt is. */
.planblok > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planblok .planbloknaam { font-weight: 600; }
.planblok .planblokkop { font-size: 10.5px; color: var(--zacht); }
.planblok:hover { border-color: var(--goud-rand); }
.planblok.af { opacity: .55; }

.kader.botsingen { border-color: rgba(209,65,74,.45); background: var(--slecht-waas); }
.kader.botsingen h3 { margin-top: 0; color: var(--slecht); }
.kader.botsingen p { margin: 4px 0; font-size: 13.5px; }

@media (max-width: 700px) {
  .planrij { grid-template-columns: 104px repeat(var(--dagen), minmax(42px, 1fr)); }
}

/* ------------------------------------------------- de assistent bij een project */

.assistentantwoord {
  margin: 14px 0 10px; padding: 10px 12px; border-radius: 9px;
  background: var(--goud-waas); border-left: 3px solid var(--goud-rand);
  font-size: 14px; line-height: 1.5;
}
.voorstellen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
/* Een voorstel is een vinkje met de velden die het model eruit gehaald heeft.
   Die velden staan er voluit bij: je moet kunnen zien welk bedrag en welke
   datum je bevestigt, niet alleen dat er "een regel" bijkomt. */
.checkrij.voorstel { align-items: flex-start; padding: 10px 12px; }
.checkrij.voorstel > span { display: flex; flex-direction: column; gap: 4px; }
.voorsteldetail { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.voorsteldetail .veldje { font-size: 13px; }
.assistentuitkomst { margin-top: 6px; }