/* Beheerscherm Rittal Bewerkings Service: één stijlsysteem voor alle pagina's.
   Lagen: pagina (grijs) -> kaart (wit, schaduw) -> invoer. Rood alleen voor de
   hoofdactie, de actieve plek en het belangrijkste getal. Donkere modus via
   [data-thema=donker] op <html> (knop in de kopbalk). Geen inline stijl: de
   CSP staat dat niet toe; balken zijn SVG met breedte als attribuut. */

:root{
  --pagina:#f3f4f6;--kaart:#fff;--kaart2:#f9fafb;--invoer:#fff;
  --tekst:#111827;--tekst2:#374151;--zacht:#6b7280;--vaag:#9ca3af;
  --lijn:#e5e7eb;--lijn2:#d1d5db;
  --rood:#e2001a;--rood-hover:#c20016;--rood-zacht:#fdecee;--rood-tekst:#b80015;
  --goed:#047857;--goed-zacht:#ecfdf5;--let:#b45309;--let-zacht:#fffbeb;
  --fout:#b91c1c;--fout-zacht:#fef2f2;--info:#1d4ed8;--info-zacht:#eff6ff;
  --balk:#4b5563;--balk-zacht:#e5e7eb;
  --schaduw1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --schaduw2:0 4px 8px -2px rgba(16,24,40,.08),0 2px 4px -2px rgba(16,24,40,.06);
  --schaduw3:0 20px 40px -12px rgba(16,24,40,.18);
  --ring:0 0 0 3px rgba(226,0,26,.18);
  --r1:6px;--r2:10px;--r3:14px;
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
:root[data-thema=donker]{
  --pagina:#0f1115;--kaart:#171a21;--kaart2:#1d212a;--invoer:#12151b;
  --tekst:#f3f4f6;--tekst2:#d1d5db;--zacht:#9ca3af;--vaag:#6b7280;
  --lijn:#262b35;--lijn2:#353b47;
  --rood:#ff2d43;--rood-hover:#ff4a5d;--rood-zacht:#3a1219;--rood-tekst:#ff8a97;
  --goed:#34d399;--goed-zacht:#0f2a22;--let:#fbbf24;--let-zacht:#2d2410;
  --fout:#f87171;--fout-zacht:#2f1416;--info:#93c5fd;--info-zacht:#132036;
  --balk:#9ca3af;--balk-zacht:#2a2f3a;
  --schaduw1:0 1px 2px rgba(0,0,0,.5);--schaduw2:0 6px 16px -4px rgba(0,0,0,.6);
  --schaduw3:0 24px 48px -12px rgba(0,0,0,.7);--ring:0 0 0 3px rgba(255,45,67,.30);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:14px/1.55 var(--font);background:var(--pagina);color:var(--tekst);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-color:var(--rood);text-underline-offset:3px}
a:hover{color:var(--rood-tekst)}
.zacht{color:var(--zacht)}
.vaag{color:var(--vaag)}
:focus-visible{outline:2px solid var(--rood);outline-offset:2px}
h1{font-size:26px;line-height:1.2;font-weight:700;margin:0;letter-spacing:-.015em}
h2{font-size:16px;line-height:1.3;font-weight:650;margin:0}
h3{font-size:14px;font-weight:650;margin:18px 0 8px}
p{margin:0 0 10px}p:last-child{margin-bottom:0}
svg.icoon{width:18px;height:18px;flex:none}
.verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- schil: zijbalk + kopbalk ---------- */
.schil{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.zijbalk{position:sticky;top:0;height:100vh;background:var(--kaart);border-right:1px solid var(--lijn);
  display:flex;flex-direction:column;padding:0 14px 16px;z-index:2}
.merk{display:flex;align-items:center;gap:12px;padding:20px 8px 22px;text-decoration:none;color:inherit}
.merkteken{width:38px;height:38px;border-radius:var(--r2);background:var(--rood);color:#fff;display:grid;
  place-items:center;font-weight:800;font-size:13px;letter-spacing:.04em;box-shadow:var(--schaduw2)}
.merknaam{display:flex;flex-direction:column;line-height:1.15}
.merknaam b{font-size:15px;letter-spacing:.24em;color:var(--rood)}
.merknaam span{font-size:11.5px;color:var(--zacht);margin-top:3px}
.navkop{font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--vaag);
  padding:14px 10px 6px}
.zijbalk nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;margin:1px 0;border-radius:var(--r1);
  color:var(--tekst2);text-decoration:none;font-weight:500}
.zijbalk nav a:hover{background:var(--kaart2);color:var(--tekst)}
.zijbalk nav a.actief{background:var(--rood-zacht);color:var(--rood-tekst);font-weight:650}
.zijbalk nav a.actief svg{color:var(--rood)}
.zijbalk .voet{margin-top:auto;padding:12px 10px 0;border-top:1px solid var(--lijn);font-size:12px;color:var(--vaag)}
.rechterdeel{display:flex;flex-direction:column;min-width:0}
.topbalk{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:14px;height:64px;padding:0 32px;
  background:color-mix(in srgb,var(--kaart) 88%,transparent);backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--lijn)}
.snelzoek{flex:1;max-width:520px;display:flex;align-items:center;gap:8px;background:var(--kaart2);
  border:1px solid var(--lijn);border-radius:999px;padding:0 14px;height:40px;color:var(--zacht)}
.snelzoek:focus-within{border-color:var(--rood);box-shadow:var(--ring);background:var(--invoer)}
.snelzoek input{flex:1;border:0;background:transparent;height:38px;padding:0;color:var(--tekst);font:inherit;outline:0}
.snelzoek kbd{font:11px var(--font);color:var(--vaag);border:1px solid var(--lijn2);border-radius:4px;padding:1px 6px}
.topbalk .rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
.gebruiker{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tekst);padding:4px 8px 4px 4px;
  border-radius:999px}
.gebruiker:hover{background:var(--kaart2);color:var(--tekst)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--rood-zacht);color:var(--rood-tekst);display:grid;
  place-items:center;font-weight:700;font-size:12px}
.gebruiker small{display:block;color:var(--zacht);font-size:11.5px;line-height:1.1}
.gebruiker b{display:block;font-weight:600;font-size:13px;line-height:1.2}
main{padding:28px 32px 64px;max-width:1360px;width:100%}

/* ---------- paginakop ---------- */
.kruimel{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--zacht);margin:0 0 10px}
.kruimel a{color:var(--zacht);text-decoration:none}.kruimel a:hover{color:var(--tekst)}
.kruimel span.scheid{color:var(--vaag)}
.paginakop{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px 20px;margin:0 0 22px}
.paginakop .titel{display:flex;align-items:center;flex-wrap:wrap;gap:12px;min-width:0}
.paginakop .onder{flex-basis:100%;color:var(--zacht);margin-top:-4px;max-width:820px}
.paginakop .acties{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- kaarten ---------- */
.kaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r3);box-shadow:var(--schaduw1);
  margin-bottom:20px;overflow:hidden}
.kaart>.kop{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--lijn)}
.kaart>.kop .uitleg{color:var(--zacht);font-size:13px;margin-left:2px}
.kaart>.kop .acties{margin-left:auto;display:flex;gap:8px;align-items:center}
.kaart>.romp{padding:20px 22px}
.kaart>.romp.vol{padding:0}
.kaart>.voet{padding:12px 22px;border-top:1px solid var(--lijn);background:var(--kaart2);color:var(--zacht);font-size:12.5px}
.kaart.smal{max-width:520px}
.raster{display:grid;gap:20px;grid-template-columns:repeat(12,minmax(0,1fr))}
.raster>.k4{grid-column:span 4}.raster>.k5{grid-column:span 5}.raster>.k6{grid-column:span 6}
.raster>.k7{grid-column:span 7}.raster>.k8{grid-column:span 8}.raster>.k12{grid-column:span 12}
.raster>.kaart{margin-bottom:0}
.stapel>*+*{margin-top:20px}

/* ---------- kerncijfers ---------- */
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:0 0 20px}
.cijfer{position:relative;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r3);
  box-shadow:var(--schaduw1);padding:16px 18px 16px 18px;display:flex;gap:14px;align-items:flex-start}
.cijfer .teken{width:40px;height:40px;border-radius:var(--r2);display:grid;place-items:center;background:var(--kaart2);
  color:var(--zacht);flex:none}
.cijfer .teken svg{width:20px;height:20px}
.cijfer.hoofd .teken{background:var(--rood-zacht);color:var(--rood)}
.cijfer span.naam{display:block;color:var(--zacht);font-size:12.5px;font-weight:500}
.cijfer b{display:flex;align-items:baseline;gap:8px;font-size:26px;font-weight:700;line-height:1.15;margin-top:2px;
  letter-spacing:-.01em}
.cijfer b small{font-size:13px;font-weight:500;color:var(--zacht)}
.cijfer b.tekst{font-size:17px;line-height:1.3;margin-top:5px}
.cijfer.let .teken{background:var(--let-zacht);color:var(--let)}
.cijfer>div{min-width:0}
.cijfer .sub{display:block;font-size:12px;color:var(--zacht);margin-top:3px}

/* ---------- knoppen ---------- */
button,.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;
  border-radius:var(--r1);border:1px solid var(--lijn2);background:var(--kaart);color:var(--tekst);
  font:600 13.5px/1 var(--font);cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:var(--schaduw1);
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
button:hover,.knop:hover{background:var(--kaart2);border-color:var(--vaag);color:var(--tekst)}
button:active,.knop:active{transform:translateY(1px)}
button svg,.knop svg{width:17px;height:17px;flex:none}
.knop.rood,button.rood,button.primair{background:var(--rood);border-color:var(--rood);color:#fff}
.knop.rood:hover,button.rood:hover,button.primair:hover{background:var(--rood-hover);border-color:var(--rood-hover);color:#fff}
.knop.donker,button.donker{background:var(--tekst);border-color:var(--tekst);color:var(--kaart)}
.knop.donker:hover,button.donker:hover{opacity:.9;color:var(--kaart);background:var(--tekst)}
.knop.stil,button.stil{background:transparent;border-color:transparent;box-shadow:none;color:var(--tekst2)}
.knop.stil:hover,button.stil:hover{background:var(--kaart2)}
.knop.klein,button.klein{height:32px;padding:0 12px;font-size:12.5px}
.knop.rond,button.rond{width:38px;padding:0;border-radius:50%}
button.weg,.knop.weg{color:var(--fout);border-color:color-mix(in srgb,var(--fout) 35%,var(--lijn2))}
button.weg:hover,.knop.weg:hover{background:var(--fout-zacht);color:var(--fout);border-color:var(--fout)}
button.licht{background:var(--kaart)}
.knoppen{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center}
.breed-knop{width:100%;height:44px;font-size:14.5px}

/* ---------- formulieren ---------- */
input,select,textarea{font:inherit;color:var(--tekst);background:var(--invoer);border:1px solid var(--lijn2);
  border-radius:var(--r1);height:38px;padding:0 12px;box-shadow:inset 0 1px 1px rgba(16,24,40,.04)}
textarea{height:auto;padding:10px 12px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--rood);box-shadow:var(--ring)}
input::placeholder{color:var(--vaag)}
input[type=checkbox]{height:16px;width:16px;accent-color:var(--rood);box-shadow:none;padding:0;margin:0}
.veld{display:block;margin:0 0 16px}
.veld>span{display:block;font-weight:600;font-size:13px;margin:0 0 6px;color:var(--tekst2)}
.veld input,.veld select{width:100%;height:42px}
.veld small{display:block;color:var(--zacht);font-size:12px;margin-top:6px}
.vink-veld{display:flex;align-items:center;gap:9px;margin:0 0 18px;color:var(--tekst2);font-size:13.5px}
form.stapel label{display:block;margin:0 0 14px;font-weight:600;font-size:13px;color:var(--tekst2)}
form.stapel input{display:block;width:100%;margin-top:6px;height:42px;font-weight:400}
form.inline{display:inline}
form.zoek{display:flex;align-items:center;gap:10px;background:var(--invoer);border:1px solid var(--lijn2);
  border-radius:var(--r2);padding:6px 6px 6px 16px;box-shadow:var(--schaduw2);max-width:900px}
form.zoek:focus-within{border-color:var(--rood);box-shadow:var(--ring),var(--schaduw2)}
form.zoek>svg{width:22px;height:22px;color:var(--zacht);flex:none}
form.zoek input{flex:1;border:0;box-shadow:none;height:46px;font-size:17px;padding:0 4px;background:transparent}
form.zoek input:focus{box-shadow:none}
form.zoek button{height:46px;padding:0 26px;font-size:15px}
.toevoegen{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input.tijd{width:110px;text-align:right}
input.breed{width:100%}

/* ---------- labels, meldingen ---------- */
.label{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;
  font-weight:650;vertical-align:middle;white-space:nowrap;background:var(--kaart2);color:var(--tekst2);
  border:1px solid var(--lijn)}
.label:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.label.kaal:before{display:none}
.label.goed{background:var(--goed-zacht);color:var(--goed);border-color:color-mix(in srgb,var(--goed) 25%,transparent)}
.label.let{background:var(--let-zacht);color:var(--let);border-color:color-mix(in srgb,var(--let) 25%,transparent)}
.label.fout{background:var(--fout-zacht);color:var(--fout);border-color:color-mix(in srgb,var(--fout) 25%,transparent)}
.label.info{background:var(--info-zacht);color:var(--info);border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.label.vink{background:var(--rood-zacht);color:var(--rood-tekst);border-color:transparent}
.label.groot{height:28px;font-size:12.5px;padding:0 12px}
.melding{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin:0 0 20px;border-radius:var(--r2);
  border:1px solid;background:var(--info-zacht);border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.melding:before{content:"i";flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font:700 12px/1 var(--font);color:#fff;background:var(--info);margin-top:1px}
.melding.goed{background:var(--goed-zacht);border-color:color-mix(in srgb,var(--goed) 30%,transparent)}
.melding.goed:before{content:"✓";background:var(--goed)}
.melding.fout{background:var(--fout-zacht);border-color:color-mix(in srgb,var(--fout) 30%,transparent)}
.melding.fout:before{content:"!";background:var(--fout)}
.melding.let{background:var(--let-zacht);border-color:color-mix(in srgb,var(--let) 30%,transparent)}
.melding.let:before{content:"!";background:var(--let)}
.melding ul{margin:6px 0 0;padding-left:18px}
.leeg{padding:36px 20px;text-align:center;color:var(--zacht)}
.leeg svg{width:34px;height:34px;color:var(--vaag);margin-bottom:8px}
.leeg b{display:block;color:var(--tekst);font-size:15px;margin-bottom:4px}

/* ---------- tabellen ---------- */
.tabelvak{overflow-x:auto}
table{border-collapse:separate;border-spacing:0;width:100%}
th,td{padding:11px 16px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--lijn)}
th{font-size:11.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--zacht);
  background:var(--kaart2);white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover td,table tr:hover td{background:color-mix(in srgb,var(--kaart2) 70%,transparent)}
td.getal,th.getal{text-align:right;white-space:nowrap}
tr.tussen td{background:var(--kaart2);font-size:12.5px;font-weight:600;color:var(--tekst2);padding:9px 16px}
.matrix tr.tussen td{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--zacht)}
tr.totaal td{font-weight:650}
tr:has(td:first-child>b:only-child) td{background:var(--kaart2);border-top:1px solid var(--lijn2)}
.kaart .romp:not(.vol) .tabelvak{border:1px solid var(--lijn);border-radius:var(--r2);margin:6px 0 14px}
.kaart .romp:not(.vol) .tabelvak:last-child{margin-bottom:0}
.kaart .romp>h2{margin:0 0 6px}
.kaart .romp>h2~h2{margin-top:24px}
.kaart .romp>h3{margin:18px 0 6px}
/* balken (SVG): spoor + kleuren; k0 = grootste stap */
.spoor{fill:var(--balk-zacht)}
.k0{fill:var(--rood)}.k1{fill:#374151}.k2{fill:#6b7280}.k3{fill:#9ca3af}.k4{fill:#b8bec7}.k5{fill:#cfd4da}.k6{fill:#dfe3e8}
:root[data-thema=donker] .k1{fill:#d1d5db}:root[data-thema=donker] .k2{fill:#9ca3af}
:root[data-thema=donker] .k3{fill:#6b7280}:root[data-thema=donker] .k4{fill:#4b5563}
:root[data-thema=donker] .k5{fill:#374151}:root[data-thema=donker] .k6{fill:#2b313b}
.kleur-stip.k0{background:var(--rood)}.kleur-stip.k1{background:#374151}.kleur-stip.k2{background:#6b7280}
.kleur-stip.k3{background:#9ca3af}.kleur-stip.k4{background:#b8bec7}.kleur-stip.k5{background:#cfd4da}
.kleur-stip.k6{background:#dfe3e8}
:root[data-thema=donker] .kleur-stip.k1{background:#d1d5db}:root[data-thema=donker] .kleur-stip.k2{background:#9ca3af}
:root[data-thema=donker] .kleur-stip.k3{background:#6b7280}:root[data-thema=donker] .kleur-stip.k4{background:#4b5563}
:root[data-thema=donker] .kleur-stip.k5{background:#374151}:root[data-thema=donker] .kleur-stip.k6{background:#2b313b}
td .stapbalk{min-width:80px}
.legenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--zacht);margin:14px 0 0}
.legenda b{color:var(--tekst);margin-right:4px}
/* Gegevens zoals in de calculatietool: per regel twee velden, naam links,
   waarde in een licht vak met een lijn eronder */
.formulier{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px;margin:0 0 8px;padding:0}
.formulier .formveld{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:12px;min-width:0}
.formulier .formveld.breed{grid-column:1/-1}
.formulier dt{font-size:13.5px;font-weight:600;color:var(--tekst)}
.formulier dd{margin:0;min-height:36px;padding:8px 10px;background:var(--kaart2);border-bottom:1px solid var(--lijn2);
  overflow-wrap:anywhere;font-size:13.5px}
.romp>h3:first-child,.romp>.melding+h3{margin-top:0}
/* De klantgegevens bovenaan in de kop, zoals in de calculatietool */
/* Versies van dezelfde order: wisselen in de kop van de analyse */
.versiebalk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;font-size:13px}
.objectkop>.melding{margin:0 0 14px}
.menu-lijst.versielijst{min-width:300px;max-height:60vh;overflow:auto}
a.menu-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;
  border-radius:var(--r1);color:inherit;text-decoration:none;font-size:13px}
a.menu-item:hover{background:var(--kaart2)}
a.menu-item.actief{background:var(--kaart2);box-shadow:inset 3px 0 0 var(--rood)}
a.menu-item small{color:var(--zacht);font-size:12px}
.menu-voet{margin:6px 10px 2px;font-size:12px}
.kopklant{margin:4px 0 18px}.kopklant .formulier{margin:0}
p.kopklant{font-size:13px}
/* Sparingen zoals in de calculatietool: aantallen in vakjes per onderdeel */
table.calc th,table.calc td{padding:7px 8px}
table.calc th.vakcel,table.calc td.vakcel{text-align:center;white-space:nowrap}
table.calc th{text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--tekst);font-weight:650}
table.calc td.soort{color:var(--tekst2);min-width:260px}
table.calc .vak{display:inline-block;min-width:44px;padding:5px 8px;background:var(--kaart2);
  border-bottom:1px solid var(--lijn2);font-variant-numeric:tabular-nums}
table.calc .vak.gevuld{font-weight:700;color:var(--tekst)}
table.calc td.som{color:var(--zacht);font-variant-numeric:tabular-nums}
table.calc td.som.gevuld{color:var(--tekst);font-weight:700}
table.calc tr.totaal td{font-weight:700;border-top:2px solid var(--lijn2)}
@media (max-width:600px){.formulier{grid-template-columns:minmax(0,1fr)}
  .formulier .formveld{grid-template-columns:minmax(0,1fr);gap:4px}}
.tabelbalk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 22px;border-bottom:1px solid var(--lijn)}
.filter{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--lijn2);
  border-radius:var(--r1);background:var(--invoer);color:var(--zacht);min-width:240px}
.filter:focus-within{border-color:var(--rood);box-shadow:var(--ring)}
.filter input{border:0;box-shadow:none;height:34px;padding:0;background:transparent;flex:1;min-width:0}
.filter input:focus{box-shadow:none}
.tabelbalk .tel{margin-left:auto;color:var(--zacht);font-size:12.5px}
tr.weg-gefilterd{display:none}

/* ---------- tabbladen ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--lijn);margin:0 0 22px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;text-decoration:none;color:var(--zacht);
  font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--tekst)}
.tabs a.actief{color:var(--tekst);border-bottom-color:var(--rood)}
.tabs a svg{width:16px;height:16px}
.teller{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--kaart2);border:1px solid var(--lijn);font-size:11.5px;color:var(--zacht)}
.tabs a.actief .teller{background:var(--rood-zacht);color:var(--rood-tekst);border-color:transparent}
.tabblad[hidden]{display:none}

/* ---------- orderpagina ---------- */
.objectkop{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r3);box-shadow:var(--schaduw1);
  padding:22px 24px 0;margin:0 0 22px}
.objectkop .paginakop{margin-bottom:16px}
.objectkop .tabs{margin:0 -24px;padding:0 14px;border-bottom:0;border-top:1px solid var(--lijn)}
.feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 24px;margin:0 0 20px;padding:0}
.feiten div{margin:0;min-width:0}
.feiten dt{font-size:12px;color:var(--zacht);font-weight:500}
.feiten dd{margin:3px 0 0;font-weight:600;overflow-wrap:anywhere}
.tekeningen{list-style:none;margin:0;padding:0}
.tekeningen li{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--lijn)}
.tekeningen li:last-child{border-bottom:0}
.tekeningen .bestandsteken{width:40px;height:40px;border-radius:var(--r2);display:grid;place-items:center;flex:none;
  background:var(--kaart2);color:var(--zacht);font:700 10px/1 var(--font);letter-spacing:.04em;border:1px solid var(--lijn)}
.tekeningen .bestandsteken.officieel{background:var(--rood-zacht);color:var(--rood-tekst);border-color:transparent}
.tekeningen .naam{flex:1;min-width:0}
.tekeningen .naam b{display:block;overflow-wrap:anywhere;font-weight:600;line-height:1.35}
.tekeningen .naam span{font-size:12.5px;color:var(--zacht)}
.stapbalk{display:block;width:100%;height:10px;border-radius:5px;overflow:hidden}
.verdeling{display:block;width:100%;height:16px;border-radius:8px;overflow:hidden;margin:4px 0 18px}
.stappen{width:100%}
.stappen td{padding:10px 0;border-bottom:1px solid var(--lijn)}
.stappen td:first-child{width:34%;padding-right:16px}
.stappen td.balk{width:44%;padding-right:16px}
.stappen td.getal{width:11%}
.stappen td.aandeel{width:11%;color:var(--zacht);text-align:right}
.stappen tr.nul td{color:var(--vaag)}
.stappen tr.som td{border-bottom:0;font-weight:700;padding-top:14px}
.stappen tr:hover td{background:transparent}
.kleur-stip{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:9px;vertical-align:-1px}
.machines{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.machine{border:1px solid var(--lijn);border-radius:var(--r2);padding:16px;background:var(--kaart2)}
.machine .boven{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.machine .boven b{font-size:15px}
.machine dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.machine dt{font-size:12px;color:var(--zacht)}.machine dd{margin:2px 0 0;font-weight:650;font-size:16px}
.machine p{margin:12px 0 0;font-size:12.5px;color:var(--zacht);border-top:1px dashed var(--lijn2);padding-top:10px}
.label.m-laser{background:var(--rood-zacht);color:var(--rood-tekst);border-color:transparent}
.label.m-pons{background:var(--info-zacht);color:var(--info);border-color:transparent}
.label.m-hand{background:var(--let-zacht);color:var(--let);border-color:transparent}

/* ---------- opzoeken / start ---------- */
.held{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r3);box-shadow:var(--schaduw1);
  padding:28px 30px;margin:0 0 22px;position:relative;overflow:hidden}
.held:after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(closest-side,var(--rood-zacht),transparent);pointer-events:none}
.held h1{margin-bottom:6px}
.held p{color:var(--zacht);max-width:720px;margin-bottom:18px}
.held .tips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--zacht)}
.resultaat{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 24px;padding:16px 22px;
  border-bottom:1px solid var(--lijn)}
.resultaat:last-child{border-bottom:0}
.resultaat:hover{background:color-mix(in srgb,var(--kaart2) 70%,transparent)}
.resultaat .titel{font-weight:700;font-size:15.5px;text-decoration:none}
.resultaat .titel:hover{color:var(--rood-tekst)}
.resultaat .meta{color:var(--zacht);font-size:13px;margin:3px 0 8px}
.bestandjes{display:flex;flex-wrap:wrap;gap:6px}
.bestandje{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;background:var(--kaart2);
  border:1px solid var(--lijn);border-radius:var(--r1);padding:3px 9px}
.bestandje svg{width:14px;height:14px}
.kop{display:flex;flex-wrap:wrap;gap:8px 32px;margin:0}.kop div span{display:block;color:var(--zacht);font-size:12px}

/* ---------- normtijden ---------- */
.opslaan{position:sticky;bottom:16px;z-index:2;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r3);box-shadow:var(--schaduw3);
  padding:12px 14px 12px 18px;margin-top:8px}
.opslaan .status{font-weight:600}
.opslaan .status.gewijzigd{color:var(--rood-tekst)}
.opslaan input{flex:1;min-width:240px}
input.tijd.gewijzigd{border-color:var(--let);background:var(--let-zacht)}
details.paneel{border-top:1px solid var(--lijn)}
details.paneel>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:14px 22px;
  font-weight:600;color:var(--tekst2)}
details.paneel>summary::-webkit-details-marker{display:none}
details.paneel>summary:hover{color:var(--rood-tekst)}
details.paneel[open]>summary{border-bottom:1px solid var(--lijn)}
details.paneel>.binnen{padding:16px 22px;background:var(--kaart2)}
.uitleg-blok{font-size:13px;color:var(--zacht);padding:14px 22px;border-bottom:1px solid var(--lijn);background:var(--kaart2)}

/* ---------- rechten ---------- */
.matrix th.midden,.matrix td.midden{text-align:center;width:1%;min-width:110px}
.matrix th{white-space:normal;line-height:1.3}
.matrix td:first-child{min-width:300px;font-weight:500}
.schakel{width:42px;height:24px;padding:0;border-radius:999px;border:0;box-shadow:inset 0 0 0 1px var(--lijn2);
  background:var(--balk-zacht);position:relative;font-size:0}
.schakel:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.schakel.aan{background:var(--rood);box-shadow:none}
.schakel.aan:after{left:21px}
.schakel:hover{background:var(--lijn2)}.schakel.aan:hover{background:var(--rood-hover)}
.vink{font-weight:700;font-size:15px}.vink.ja{color:var(--rood)}.vink.nee{color:var(--vaag)}
.rollen{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.rollen li{border:1px solid var(--lijn);border-radius:var(--r2);padding:12px 14px;background:var(--kaart2);font-size:13px;color:var(--zacht)}
.rollen li b{display:block;color:var(--tekst);font-size:14px;margin-bottom:2px}
.acties{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.acties form{display:inline}
.code{font:700 22px/1.4 ui-monospace,Consolas,monospace;letter-spacing:3px;background:var(--kaart2);
  border:1px dashed var(--lijn2);padding:10px 16px;border-radius:var(--r2);display:inline-block}
img.qr{width:220px;height:220px;background:#fff;padding:8px;border-radius:var(--r2)}
details summary{cursor:pointer}

/* ---------- aanmeldschil ---------- */
.los{min-height:100vh;display:flex;flex-direction:column;background:var(--pagina)}
.los-kop{display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:68px;background:var(--kaart);
  border-bottom:1px solid var(--lijn)}
.los-kop .merk{padding:0}
.los-midden{flex:1;display:grid;place-items:center;padding:48px 20px}
.los-kaart{width:100%;max-width:440px;background:var(--kaart);border:1px solid var(--lijn);border-radius:18px;
  box-shadow:var(--schaduw3);padding:38px 40px 34px}
.los-kaart .merkteken{width:60px;height:60px;border-radius:16px;font-size:18px;margin:0 auto 18px}
.los-kaart h1{text-align:center;font-size:24px}
.los-kaart .intro{text-align:center;color:var(--zacht);margin:8px 0 26px}
.los-kaart .klein{font-size:12.5px;color:var(--zacht);text-align:center;margin:18px 0 0}
.los-voet{text-align:center;padding:18px 20px;color:var(--vaag);font-size:12px;border-top:1px solid var(--lijn);
  background:var(--kaart)}
.los-kaart .melding{text-align:left}

@media (max-width:1100px){.raster>.k4,.raster>.k5,.raster>.k6,.raster>.k7,.raster>.k8{grid-column:span 12}}
@media (max-width:900px){
  .schil{grid-template-columns:minmax(0,1fr)}
  .cijfers{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cijfer{padding:12px;gap:10px}.cijfer .teken{width:32px;height:32px}.cijfer b{font-size:20px}
  .filter{min-width:0;flex:1}.opslaan input{min-width:0}
  .matrix td:first-child{min-width:180px}
  .paginakop .acties{margin-left:0}
  .snelzoek kbd{display:none}
  .snelzoek{min-width:0}.topbalk .rechts .label{display:none}
  .zijbalk{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;padding:0 12px;border-right:0;
    border-bottom:1px solid var(--lijn)}
  .zijbalk .merk{padding:12px 6px}.merknaam span,.navkop,.zijbalk .voet{display:none}
  .zijbalk nav{display:flex;overflow-x:auto;width:100%;padding-bottom:8px}
  .zijbalk nav a{white-space:nowrap}
  .topbalk{padding:0 16px;height:58px}.gebruiker .wie-tekst{display:none}
  main{padding:20px 16px 48px}
  h1{font-size:22px}
  .resultaat{grid-template-columns:1fr}
  .objectkop{padding:18px 16px 0}.objectkop .tabs{margin:0 -16px}
  .los-kaart{padding:28px 22px}
  .kaart>.kop,.kaart>.romp,.tabelbalk,.tekeningen li,.resultaat{padding-left:16px;padding-right:16px}
  .kaart .romp:not(.vol)>.tabelvak{margin:-20px -16px}
  .tekeningen li{flex-wrap:wrap}
  .tekeningen .naam{flex:1 1 calc(100% - 54px)}
  .tekeningen li>.knoppen{flex:1 1 100%;padding-left:54px}
}
@media print{
  .zijbalk,.topbalk,.tabs,.opslaan,.knop,button,.snelzoek{display:none!important}
  .schil{display:block}main{padding:0;max-width:none}
  .tabblad[hidden]{display:block!important}
  .kaart,.cijfer,.objectkop{box-shadow:none;break-inside:avoid}
  body{background:#fff}
}

/* ---------- actiemenu (gebruikers) ---------- */
details.menu{position:relative;display:inline-block}
details.menu>summary{list-style:none}
details.menu>summary::-webkit-details-marker{display:none}
details.menu>summary:after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px}
.menu-lijst{position:fixed;z-index:20;min-width:210px;background:var(--kaart);
  border:1px solid var(--lijn);border-radius:var(--r2);box-shadow:var(--schaduw3);padding:6px}
.menu-lijst form{display:block}
button.menu-item{display:flex;width:100%;justify-content:flex-start;height:34px;border:0;box-shadow:none;
  background:transparent;font-weight:500;padding:0 10px;border-radius:var(--r1)}
button.menu-item:hover{background:var(--kaart2)}
button.menu-item.weg{color:var(--fout)}button.menu-item.weg:hover{background:var(--fout-zacht)}
.persoon{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.persoon .avatar{width:28px;height:28px;font-size:11px}
td .knoppen{flex-wrap:nowrap}
td select{height:32px;font-size:13px}
.persoon small{display:block;color:var(--zacht);font-size:12px;line-height:1.2}
.persoon b{display:inline}
.js .zonder-js{display:none}
.leeg .knop svg{width:17px;height:17px;margin:0;color:inherit}
.cijfer b{flex-wrap:wrap;row-gap:4px}
@media (max-width:900px){
  .menu-lijst{position:fixed;left:16px;right:16px;top:auto;bottom:16px;min-width:0;padding:8px}
  button.menu-item{height:44px;font-size:15px}}

/* ---------- tijd per stap: uitklapbaar (zoals de MCT) ---------- */
.stappenlijst{margin-top:4px}
.stapkop,.stapregel{display:grid;grid-template-columns:minmax(150px,36%) minmax(60px,1fr) 64px 60px 22px;
  gap:14px;align-items:center}
.stapkop{font-size:11.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--zacht);
  padding:0 0 8px;border-bottom:1px solid var(--lijn)}
.stapregel{padding:11px 0}
.stapregel .getal,.stapkop .getal{text-align:right;white-space:nowrap}
.stapregel .aandeel,.stapkop .aandeel{text-align:right;color:var(--zacht);white-space:nowrap}
details.stap{border-bottom:1px solid var(--lijn)}
details.stap>summary{list-style:none;cursor:pointer;border-radius:var(--r1)}
details.stap>summary::-webkit-details-marker{display:none}
details.stap>summary:hover{background:var(--kaart2)}
details.stap .pijl{width:8px;height:8px;border-right:1.5px solid var(--zacht);border-bottom:1.5px solid var(--zacht);
  transform:rotate(-45deg);justify-self:center;transition:transform .15s}
details.stap[open] .pijl{transform:rotate(45deg)}
details.stap.zonder>summary{cursor:default}
details.stap.zonder>summary:hover{background:transparent}
details.stap.zonder .pijl{display:none}
details.stap.nul .stapnaam,details.stap.nul .getal{color:var(--vaag)}
.stapnaam{display:flex;align-items:center;min-width:0}
.stapregels{padding:2px 0 16px 19px}
.stapregels .tabelvak{border:1px solid var(--lijn);border-radius:var(--r2);margin:0}
table.regels th,table.regels td{padding:8px 12px;font-size:12.5px}
.stapregel.som{font-weight:700;border-top:2px solid var(--lijn2);margin-top:-1px}
.bronlabel{display:inline-block;font:600 11.5px/1.6 var(--font);padding:0 7px;border-radius:5px;
  background:var(--info-zacht);color:var(--info);cursor:help;white-space:nowrap}
.kaart>.voet b{color:var(--tekst2)}
@media (max-width:900px){
  .stapkop,.stapregel{grid-template-columns:minmax(0,1fr) 54px 44px 18px;gap:8px}
  .stapkop>span:nth-child(2),.stapregel .stapbalkvak,.stapregel.som>span:nth-child(2){display:none}
  .stapregels{padding-left:0}
}
.cijfer b{min-width:0;overflow-wrap:anywhere}
.stapregel.som .getal{white-space:normal;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
@media (max-width:900px){.stapkop,.stapregel{grid-template-columns:minmax(0,1fr) auto 44px 18px}
  .cijfer b.tekst{font-size:15px}}
details.techniek{margin-top:8px;font-size:12px;color:var(--zacht)}
details.techniek summary{cursor:pointer}
details.techniek code{display:block;margin-top:6px;padding:8px 10px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r1);overflow-wrap:anywhere;font:12px ui-monospace,Consolas,monospace}