:root{
  --inkt:#1F2B37; --papier:#fff; --vlak:#F2F3F1; --lijn:#DCDFDA; --grijs:#5E6872;
  --kraft:#B0814E; --groen:#2E7656; --rood:#A63D32; --focus:#2F6FB3;
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--vlak);color:var(--inkt);font-size:16px;line-height:1.5}
[hidden]{display:none!important}

.kop{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem clamp(1rem,4vw,2.5rem);background:var(--inkt);color:#fff}
.merk{display:flex;flex-direction:column;line-height:1.2}
.merk-naam{font-weight:750;font-stretch:118%;letter-spacing:-.01em;font-size:1.05rem}
.merk-sub{color:#B9C2CB;font-size:.85rem}
.kop-rechts{display:flex;align-items:center;gap:1rem;font-size:.9rem;text-align:right}
.kop .link{color:#fff}

main{max-width:64rem;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,2.5rem) 4rem}
.smal{max-width:26rem;margin-inline:auto}
h1{font-size:clamp(1.8rem,4vw,2.4rem);font-weight:780;font-stretch:115%;line-height:1.1;letter-spacing:-.015em;margin:0 0 .5rem}
h2{font-size:1.15rem;font-weight:720;font-stretch:110%;margin:2.25rem 0 .75rem}
.intro{color:var(--grijs);margin:0 0 1.75rem}
.stil{color:var(--grijs)} .klein{font-size:.85rem}

.tabs{display:flex;border-bottom:1px solid var(--lijn);margin-bottom:1.25rem}
.tabs button{flex:1;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:.7rem 0;font:inherit;font-weight:600;color:var(--grijs);cursor:pointer}
.tabs button[aria-selected=true]{color:var(--inkt);border-color:var(--kraft)}

.formulier{display:grid;gap:1rem}
label{display:grid;gap:.35rem;font-weight:600;font-size:.92rem}
.optioneel{font-weight:400;color:var(--grijs)}
input{font:inherit;font-weight:400;padding:.7rem .8rem;border:1px solid var(--lijn);border-radius:6px;background:#fff;color:var(--inkt);width:100%}
input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.knop{font:inherit;font-weight:650;background:var(--inkt);color:#fff;border:1px solid var(--inkt);border-radius:6px;padding:.75rem 1.1rem;cursor:pointer;display:inline-block;text-decoration:none;white-space:nowrap}
.knop:hover{background:#2C3B4A}
.knop.tweede{background:transparent;color:var(--inkt)}
.knop.tweede:hover{background:#fff}
.knop.gevaar{background:transparent;color:var(--rood);border-color:currentColor}
.knop.klein{padding:.45rem .8rem;font-size:.9rem}
.knop:disabled{opacity:.55;cursor:wait}
.link{background:none;border:0;padding:0;font:inherit;color:var(--inkt);text-decoration:underline;text-underline-offset:3px;cursor:pointer;justify-self:start}
.melding{min-height:1.5em;margin:1rem 0 0;color:var(--rood);font-size:.92rem}
.melding.ok{color:var(--groen)}

.statuskaart{background:#fff;border:1px solid var(--lijn);border-radius:8px;padding:clamp(1.25rem,4vw,2rem)}
.statuskaart h1{font-size:1.6rem}
.acties{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* Werkorders */
.overzicht-kop{margin-bottom:1.5rem}
.balk{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:1rem}
.filters{display:inline-flex;background:#fff;border:1px solid var(--lijn);border-radius:6px;padding:3px}
.filters button{border:0;background:none;font:inherit;font-weight:600;font-size:.92rem;padding:.45rem .9rem;border-radius:4px;color:var(--grijs);cursor:pointer}
.filters button[aria-selected=true]{background:var(--inkt);color:#fff}
.tel{font-weight:400;opacity:.75;margin-left:.25rem;font-variant-numeric:tabular-nums}
#zoek{max-width:20rem}
.orders{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.order{background:#fff;border:1px solid var(--lijn);border-left:4px solid var(--kraft);border-radius:6px;padding:1.1rem 1.25rem 1.2rem}
.order.klaar{border-left-color:var(--groen)}
.order-hoofd{display:grid;grid-template-columns:1fr auto;gap:.75rem 2rem;align-items:start}
.nr{font-weight:750;font-stretch:112%;font-size:1.05rem;font-variant-numeric:tabular-nums}
.art{display:block;margin-top:.1rem}
.code{display:block;color:var(--grijs);font-size:.85rem}
.cijfers{display:flex;gap:2rem;margin:0;text-align:right}
.cijfers dt{color:var(--grijs);font-size:.8rem}
.cijfers dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.eenheid{font-weight:400;color:var(--grijs)}

/* De statusbalk: elke stap is een strook; tijdens productie vult de strook zich met het gereed aantal */
.stappen{list-style:none;display:flex;gap:3px;margin:1.1rem 0 0;padding:0;font-size:.82rem;color:var(--grijs)}
.stappen li{flex:1;padding-top:.75rem;position:relative}
.stappen li::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;border-radius:1px;background:var(--lijn)}
.stappen li.gedaan,.stappen li.nu{color:var(--inkt)}
.stappen li.nu{font-weight:700}
.stappen li.gedaan::before,.stappen li.nu::before{background:var(--kraft)}
.stappen li.nu[style]::before{background:linear-gradient(90deg,var(--kraft) var(--p),var(--lijn) var(--p))}
.order.klaar .stappen li::before{background:var(--groen)}
.pct{font-weight:400;color:var(--grijs);font-variant-numeric:tabular-nums}
.leeg{background:#fff;border:1px dashed var(--lijn);border-radius:6px;padding:2rem;text-align:center;color:var(--grijs)}

/* Beheer */
.gebruikers{display:grid;gap:.75rem}
.gebruiker{background:#fff;border:1px solid var(--lijn);border-radius:6px;padding:1.1rem 1.25rem}
.g-kop{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.g-kop strong{font-size:1.05rem}
.badge{display:inline-block;font-size:.78rem;font-weight:650;padding:.1rem .55rem;border-radius:99px;margin-left:.4rem;vertical-align:.1em}
.badge.wachtend{background:#F6E9D7;color:#7A5426}
.badge.goedgekeurd{background:#DDEEE5;color:var(--groen)}
.badge.geblokkeerd{background:#F4DEDB;color:var(--rood)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 .6rem}
.chip{display:inline-flex;align-items:center;gap:.2rem;background:var(--vlak);border:1px solid var(--lijn);border-radius:99px;padding:.15rem .25rem .15rem .7rem;font-size:.88rem}
.chip button{border:0;background:none;cursor:pointer;font-size:1.05rem;line-height:1;padding:.15rem .4rem;border-radius:99px;color:var(--grijs)}
.koppel{display:flex;gap:.5rem;max-width:30rem}
.koppel input{padding:.45rem .7rem}
/* Zoeklijst klantnamen (/beheer) */
.kz{position:relative;flex:1;min-width:0}
.kz input{width:100%}
.kz-lijst{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 2px);margin:0;padding:.25rem 0;list-style:none;background:#fff;
  border:1px solid #cbd5e1;border-radius:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:16rem;overflow:auto;font-size:.9rem}
.kz-lijst li{padding:.4rem .7rem;cursor:pointer}
.kz-lijst li .stil{margin-left:.15rem}
.kz-lijst li.actief,.kz-lijst li[data-naam]:hover{background:#eef4ec}
.kz-lijst .kz-leeg{cursor:default}
.gebruiker .acties{margin-top:1rem}
.gebruiker .melding{margin-top:.5rem;min-height:0}
.google{display:inline-flex;align-items:center;gap:.6rem}

@media (max-width:640px){
  .order-hoofd{grid-template-columns:1fr}
  .cijfers{text-align:left;gap:1.5rem}
  #zoek{max-width:none}
  .balk{flex-direction:column;align-items:stretch}
  .stappen{font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Verkooporders */
.vo{padding:0}
.vo summary{list-style:none;cursor:pointer;padding:1.1rem 1.25rem 1rem}
.vo summary::-webkit-details-marker{display:none}
.vo summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.vo-onder{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.8rem}
.vo-status{font-size:.8rem;font-weight:650;padding:.15rem .6rem;border-radius:99px;background:#F6E9D7;color:#7A5426}
.vo-status.deels{background:#E3ECF6;color:#2B5A88}
.vo-status.geleverd{background:#DDEEE5;color:var(--groen)}
.vo-status.geannuleerd{background:var(--vlak);color:var(--grijs)}
.uitklap{font-size:.88rem;text-decoration:underline;text-underline-offset:3px}
.uitklap .verberg,details[open] .uitklap .toon{display:none}
details[open] .uitklap .verberg{display:inline}
.regels{list-style:none;margin:0;padding:0 1.25rem 1rem;border-top:1px solid var(--lijn)}
.regel{padding:1rem 0;border-bottom:1px solid var(--lijn)}
.regel:last-child{border-bottom:0}
.regel-kop{display:flex;justify-content:space-between;gap:1rem}
.regel-naam{font-weight:600;display:block}
.regel-bedrag{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.regel-cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem 1rem;margin:.6rem 0 0}
.regel-cijfers dt{color:var(--grijs);font-size:.78rem}
.regel-cijfers dd{margin:0;font-variant-numeric:tabular-nums;font-size:.92rem}
.regel .stappen{margin-top:.8rem}
@media (max-width:640px){.regel-cijfers{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Werkorder onder een orderregel */
.wo{margin-top:.8rem;padding:.75rem .9rem;background:var(--vlak);border-radius:6px}
.wo-kop{display:flex;justify-content:space-between;gap:1rem;font-weight:600;font-size:.9rem}
.wo-kop .stil{font-weight:400;font-variant-numeric:tabular-nums}
.wo-cijfers{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-top:.4rem}
.wo .stappen{margin-top:.6rem}

/* Medewerkers: alle klanten gegroepeerd */
.overzicht-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.medewerker-login{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--lijn);display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
#klantFilter{font:inherit;padding:.6rem .7rem;border:1px solid var(--lijn);border-radius:6px;background:#fff;color:var(--inkt);max-width:18rem}
.balk{gap:.75rem}
.klantgroep{list-style:none}
.klantgroep>details{background:#fff;border:1px solid var(--lijn);border-radius:6px}
.klantgroep>details>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;flex-wrap:wrap;padding:1rem 1.25rem}
.klantgroep>details>summary::-webkit-details-marker{display:none}
.klantgroep>details>summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.kg-naam{font-weight:720;font-stretch:110%;font-size:1.1rem}
.kg-naam::before{content:"▸";display:inline-block;width:1.1em;color:var(--grijs)}
.klantgroep>details[open]>summary .kg-naam::before{content:"▾"}
.kg-info{color:var(--grijs);font-size:.9rem;font-variant-numeric:tabular-nums}
.klantgroep .orders{padding:0 1rem 1rem}
.klantgroep .order{background:#fff}
@media (max-width:640px){#klantFilter{max-width:none}}

/* Privacy en activiteit */
.vinkje{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.9rem}
.vinkje input{width:auto;margin-top:.2rem;accent-color:var(--inkt)}
.voet{max-width:64rem;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem) 2.5rem;font-size:.85rem}
.voet a,.stil a{color:inherit}
.act-regel{margin:.6rem 0 0}
.act-regel .link{font-size:inherit;margin-left:.3rem}
.tabel-wrap{overflow-x:auto;background:#fff;border:1px solid var(--lijn);border-radius:6px}
table.act{width:100%;border-collapse:collapse;font-size:.9rem}
table.act th{text-align:left;font-weight:600;color:var(--grijs);font-size:.8rem;padding:.6rem .8rem;border-bottom:1px solid var(--lijn);white-space:nowrap}
table.act td{padding:.6rem .8rem;border-bottom:1px solid var(--vlak);vertical-align:top}
table.act td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums}
table.act td .klein{display:block}
#actPersoon,#actType{font:inherit;padding:.55rem .7rem;border:1px solid var(--lijn);border-radius:6px;background:#fff;color:var(--inkt);max-width:100%}
.privacy h2{margin-top:2rem}
.privacy p,.privacy li{max-width:44rem}
.invullen{background:#F6E9D7;padding:0 .25rem;border-radius:3px}

/* ================================================================
   Huisstijl van BPC Labels (slate + blauw, systeemlettertype)
   ================================================================ */
:root{
  --inkt:#0f172a; --vlak:#f8fafc; --lijn:#e2e8f0; --grijs:#64748b;
  --kraft:#2563eb; --groen:#059669; --rood:#dc2626; --focus:#3b82f6;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
body{background:#f8fafc;color:#1e293b}
body.donker{background:#0f172a}
body.donker .kop{display:none}
body.donker .voet a{color:#94a3b8}
h1,h2,.nr,.kg-naam,.merk-naam{font-stretch:100%}
h1{font-weight:700;letter-spacing:-.02em;color:#0f172a}
h2{font-weight:700;color:#0f172a}

/* Kop */
.kop{background:#0f172a;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);padding:1.25rem clamp(1rem,4vw,2.5rem);margin-bottom:.5rem}
.merk{flex-direction:row;align-items:center;gap:.75rem}
.merk-tekst{display:flex;flex-direction:column}
.merk-icoon{background:#2563eb;border-radius:.75rem;padding:.6rem;display:flex;box-shadow:inset 0 2px 4px rgba(0,0,0,.2)}
.merk-icoon svg{width:1.6rem;height:1.6rem;color:#fff}
.merk-naam{font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
.merk-sub{color:#94a3b8;font-size:.75rem;margin-top:.15rem}
.kop .link{background:#1e293b;border:1px solid #334155;color:#e2e8f0;text-decoration:none;padding:.5rem .85rem;border-radius:.75rem;font-weight:600;font-size:.8rem}
.kop .link:hover{background:#334155}
.kop-rechts{color:#cbd5e1;font-size:.8rem}

/* Aanmeldscherm zoals BPC Labels: witte kaart op donkere achtergrond */
.loginkaart{background:#fff;border-radius:1rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.35);padding:2rem;margin-top:8vh}
.loginkaart h1{font-size:1.4rem;text-align:center;margin-top:1rem}
.loginkaart .intro{text-align:center;font-size:.85rem}
.login-icoon{margin:0 auto;background:#2563eb;width:3.5rem;height:3.5rem;border-radius:1rem;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 4px rgba(0,0,0,.2)}
.login-icoon svg{width:2rem;height:2rem;color:#fff}
.google-knop{width:100%;display:flex;align-items:center;justify-content:center;gap:.75rem;border:1px solid #cbd5e1;background:#fff;border-radius:.75rem;padding:.65rem 1rem;font:inherit;font-size:.9rem;font-weight:600;color:#1e293b;cursor:pointer;transition:background .15s}
.google-knop:hover{background:#f8fafc}
.medewerker-login{flex-direction:column;align-items:stretch;gap:.6rem;text-align:center}

/* Knoppen en velden */
.knop{border-radius:.75rem;background:#2563eb;border-color:#2563eb;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.knop:hover{background:#1d4ed8}
.knop.tweede{background:#fff;color:#1e293b;border-color:#cbd5e1}
.knop.tweede:hover{background:#f8fafc}
.knop.gevaar{background:#fff;color:#dc2626;border-color:#fecaca}
.knop.gevaar:hover{background:#fef2f2}
input,#klantFilter,#actPersoon,#actType{border-radius:.75rem;border-color:#cbd5e1}
input:focus-visible,select:focus-visible{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}
.link{color:#2563eb}
.tabs button[aria-selected=true]{color:#2563eb;border-color:#2563eb}

/* Segmentknoppen zoals 'Soort etiket' */
.filters{background:#f1f5f9;border:none;border-radius:.75rem;padding:.375rem}
.filters button{border-radius:.5rem;font-size:.8rem;font-weight:700}
.filters button[aria-selected=true]{background:#fff;color:#2563eb;box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* Kaarten */
.order,.gebruiker,.statuskaart,.klantgroep>details,.tabel-wrap,.leeg{border-radius:1rem;border-color:#e2e8f0;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.order{border-left:4px solid #2563eb}
.order.klaar{border-left-color:#059669}
.klantgroep .order{box-shadow:none}
.wo{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.75rem}
.vo-status{background:#fef3c7;color:#92400e}
.vo-status.deels{background:#dbeafe;color:#1d4ed8}
.vo-status.geleverd{background:#d1fae5;color:#047857}
.vo-status.geannuleerd{background:#f1f5f9;color:#64748b}
.badge.wachtend{background:#fef3c7;color:#92400e}
.badge.goedgekeurd{background:#d1fae5;color:#047857}
.badge.geblokkeerd{background:#fee2e2;color:#b91c1c}
.order.klaar .stappen li::before{background:#059669}

/* Taalkeuze NL | FR */
.taalkeuze{display:inline-flex;background:#1e293b;border:1px solid #334155;border-radius:.6rem;padding:2px}
.taalkeuze button{border:0;background:none;color:#94a3b8;font:inherit;font-size:.75rem;font-weight:700;padding:.3rem .55rem;border-radius:.45rem;cursor:pointer}
.taalkeuze button[aria-pressed=true]{background:#2563eb;color:#fff}
.taalkeuze.los{float:right;background:#f1f5f9;border-color:#e2e8f0;margin:-.75rem -.75rem 0 0}
.taalkeuze.los button{color:#64748b}
.taalkeuze.los button[aria-pressed=true]{background:#fff;color:#2563eb;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.kop-rechts{gap:.75rem}
#kopGebruiker{display:inline-flex;align-items:center;gap:.75rem}
#kopGebruiker[hidden]{display:none}

/* ================================================================
   Huisstijl Belgian Paper Convertors: logo en groen (#326028)
   ================================================================ */
:root{
  --bpc:#326028; --bpc-donker:#24461d; --bpc-licht:#eaf1e7; --bpc-zacht:#7fae6f;
  --kraft:#326028; --groen:#7fae6f; --focus:#326028;
}
/* Kop: wit met groen logo en een groene lijn eronder */
.kop{background:#fff;color:#1e293b;border-bottom:3px solid var(--bpc);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.merk{gap:1rem;align-items:center}
.merk-logo{display:flex;color:var(--bpc)}
.merk-logo svg{height:2.6rem;width:auto}
.merk-sub{color:#64748b;font-size:.8rem;font-weight:600;padding-left:1rem;border-left:1px solid #e2e8f0;margin:0}
.kop-rechts{color:#475569}
.kop .link{background:#fff;border:1px solid #cbd5e1;color:#1e293b}
.kop .link{white-space:nowrap}
@media (max-width:860px){.kop-rechts .link + #kopNaam{display:none}}
.kop .link:hover{background:var(--bpc-licht)}
.taalkeuze{background:#f1f5f9;border-color:#e2e8f0}
.taalkeuze button{color:#64748b}
.taalkeuze button[aria-pressed=true]{background:var(--bpc);color:#fff}
.taalkeuze.los button[aria-pressed=true]{background:#fff;color:var(--bpc)}
@media (max-width:640px){.merk-logo svg{height:2rem}.merk-sub{display:none}}

/* Aanmeldscherm: logo op witte kaart, donkergroene achtergrond */
body.donker{background:var(--bpc-donker)}
.login-logo{display:flex;justify-content:center;color:var(--bpc);margin:.5rem 0 .25rem}
.login-logo svg{height:3.2rem;width:auto}
.loginkaart h1{font-size:1.15rem;color:#64748b;font-weight:600;margin-top:.5rem}

/* Accentkleur groen in plaats van blauw */
.knop{background:var(--bpc);border-color:var(--bpc)}
.knop:hover{background:var(--bpc-donker)}
.knop.tweede{background:#fff;color:#1e293b;border-color:#cbd5e1}
.knop.tweede:hover{background:var(--bpc-licht)}
.link{color:var(--bpc)}
.tabs button[aria-selected=true]{color:var(--bpc);border-color:var(--bpc)}
.filters button[aria-selected=true]{color:var(--bpc)}
input:focus-visible,select:focus-visible{box-shadow:0 0 0 2px var(--bpc);border-color:var(--bpc)}
.vinkje input{accent-color:var(--bpc)}
.order{border-left-color:var(--bpc)}
.order.klaar{border-left-color:var(--bpc-zacht)}
.stappen li.gedaan::before,.stappen li.nu::before{background:var(--bpc)}
.stappen li.nu[style]::before{background:linear-gradient(90deg,var(--bpc) var(--p),var(--lijn) var(--p))}
.order.klaar .stappen li::before{background:var(--bpc-zacht)}
.vo-status.geleverd,.badge.goedgekeurd{background:var(--bpc-licht);color:var(--bpc)}
.kg-naam::before{color:var(--bpc)}
.voet a{color:#64748b}
.voet .cookie-instellingen{color:#64748b;font-size:inherit}
body.donker .voet a,body.donker .voet .cookie-instellingen{color:#c7d6c1}
.loginkaart{position:relative}
.taalkeuze.los{position:absolute;top:1rem;right:1rem;float:none;margin:0}
.login-logo{margin-top:1.5rem}

/* Werkorderstatus: elke stap een eigen kleur (Ongepland grijs, Ingepland blauw, In productie oranje, Gereed groen) */
.stappen li{--k:#94a3b8;--kt:#64748b}
.stappen li.s-ingepland{--k:#2563eb;--kt:#1d4ed8}
.stappen li.s-productie{--k:#ea8a0c;--kt:#b45309}
.stappen li.s-gereed{--k:#16a34a;--kt:#15803d}
.stappen li.gedaan::before,.stappen li.nu::before,
.order.klaar .stappen li.gedaan::before,.order.klaar .stappen li.nu::before{background:var(--k)}
.stappen li.nu[style]::before{background:linear-gradient(90deg,var(--k) var(--p),var(--lijn) var(--p))}
.order.klaar .stappen li:not(.gedaan):not(.nu)::before{background:var(--lijn)}
.stappen li.nu{color:var(--kt)}

/* Gsm: kop compact houden (logo, taalkeuze en afmelden passen op één rij) */
@media (max-width:640px){
  .kop{padding:.75rem 1rem;gap:.5rem}
  .merk-logo svg{height:1.7rem}
  #kopNaam{display:none}
  .kop-rechts{gap:.5rem}
  .kop .link{padding:.4rem .6rem;font-size:.75rem}
  .taalkeuze button{padding:.25rem .45rem}
}

/* Beheer: weergavenaam */
.weergave{display:block;margin-top:.8rem;font-size:.85rem;font-weight:600;color:#475569}
.weergave .koppel{margin-top:.35rem}

/* ================================================================
   Tabbladen Bestellingen | Catalogus, prijstabellen en rekentool
   ================================================================ */
.hoofdtabs{display:flex;gap:1.5rem;border-bottom:1px solid var(--lijn);margin:-.5rem 0 1.75rem}
.hoofdtabs button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:.6rem .1rem;font:inherit;font-weight:650;color:var(--grijs);cursor:pointer}
.hoofdtabs button:hover{color:var(--inkt)}
.hoofdtabs button[aria-selected=true]{color:var(--bpc);border-color:var(--bpc)}
.hoofdtabs .tab-link{position:relative;border-bottom:3px solid transparent;margin-bottom:-1px;padding:.6rem .1rem;font-weight:650;color:var(--grijs);text-decoration:none}
.hoofdtabs .tab-link:hover{color:var(--inkt)}
.hoofdtabs .tab-link .dot{position:absolute;top:.45rem;right:-.6rem;width:.55rem;height:.55rem;border-radius:50%;background:#dc2626;box-shadow:0 0 0 2px var(--vlak)}

/* Gepersonaliseerd | Standaard: zelfde segmentknoppen als de filters */
.segment{display:inline-flex;background:#f1f5f9;border-radius:.75rem;padding:.375rem}
.segment button{border:0;background:none;font:inherit;font-size:.85rem;font-weight:700;padding:.45rem .9rem;border-radius:.5rem;color:var(--grijs);cursor:pointer}
.segment button[aria-selected=true]{background:#fff;color:var(--bpc);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.kies-tabel{flex:1;min-width:0;max-width:34rem}
#catTabel,#rekArtikel,select[data-cli]{font:inherit;font-weight:400;padding:.6rem .7rem;border:1px solid #cbd5e1;border-radius:.75rem;background:#fff;color:var(--inkt);width:100%}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cat-kaart{background:#fff;border:1px solid var(--lijn);border-radius:1rem;box-shadow:0 1px 2px rgba(0,0,0,.05);padding:clamp(1rem,3vw,1.5rem);margin-top:1rem}
.cat-kaart h2{margin:0 0 .25rem;font-size:1.1rem}
.cat-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem 1.5rem;flex-wrap:wrap;margin-bottom:1rem}
.cat-kop .stil{margin:0;font-size:.88rem}
.cat-foto{flex:0 0 auto;width:200px;aspect-ratio:4/3;object-fit:contain}
.cat-kop-tekst{flex:1 1 16rem}
.cat-incl{margin:0;font-size:.85rem;background:var(--bpc-licht);color:var(--bpc-donker);padding:.35rem .7rem;border-radius:.5rem}

/* Prijstabel: eerste kolom blijft staan bij horizontaal scrollen (gsm) */
.cat-kaart .tabel-wrap{border-radius:.75rem;box-shadow:none}
table.prijstabel{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem}
.prijstabel th,.prijstabel td{padding:.55rem .7rem;border-bottom:1px solid var(--lijn);text-align:left;vertical-align:top}
.prijstabel thead th{font-size:.75rem;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;background:#f8fafc}
.prijstabel .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.prijstabel tbody td.num{font-weight:600}
.prijstabel .vast{position:sticky;left:0;background:#fff;z-index:1;min-width:13rem;max-width:22rem;box-shadow:1px 0 0 var(--lijn)}
.prijstabel thead .vast{background:#f8fafc}
.prijstabel tbody th{font-weight:400}
.cat-code{display:block;font-weight:700}
.cat-naam{display:block;color:var(--grijs);font-size:.82rem}
.cat-verp-gsm{display:none}
.prijstabel td .klein{display:block;margin-top:.15rem;white-space:normal;min-width:9rem}
.prijstabel td.verp{white-space:nowrap}
.prijstabel tbody tr[tabindex]{cursor:pointer}
.prijstabel tbody tr[tabindex]:hover td,.prijstabel tbody tr[tabindex]:hover th{background:var(--bpc-licht)}
.prijstabel tbody tr.gekozen td,.prijstabel tbody tr.gekozen th{background:var(--bpc-licht)}
.prijstabel tbody tr.gekozen th{box-shadow:inset 4px 0 0 var(--bpc),1px 0 0 var(--lijn)}
.prijstabel tbody tr:focus-visible{outline:3px solid var(--bpc);outline-offset:-3px}
.prijstabel tfoot th,.prijstabel tfoot td{font-size:.82rem;font-weight:700;color:var(--bpc-donker);background:#f8fafc;border-bottom:0}
.prijstabel tfoot .vast{background:#f8fafc}
.cat-toeslagen{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:baseline;margin:.9rem 0 0;font-size:.85rem}
.toeslag{background:var(--vlak);border:1px solid var(--lijn);border-radius:99px;padding:.15rem .65rem}

/* Rekentool */
.rek-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1.5rem 2rem;margin-top:1rem}
.met-eenheid{display:flex;align-items:center;gap:.6rem}
.met-eenheid input{max-width:10rem}
.met-eenheid .eenheid{font-weight:400}
.rek-opties{border:0;margin:0;padding:0;display:grid;gap:.45rem}
.rek-opties legend{font-weight:600;font-size:.92rem;margin-bottom:.4rem;padding:0}
.rek-groep{display:grid;gap:.35rem;padding:.6rem .75rem;background:var(--vlak);border-radius:.6rem}
.rek-opties .vinkje input{accent-color:var(--bpc)}
.rek-uitkomst{background:var(--vlak);border:1px solid var(--lijn);border-radius:.75rem;padding:1rem 1.1rem;align-self:start}
.rek-staffel{margin:0 0 .5rem}
.rek-let{margin:.25rem 0 .5rem;font-size:.85rem;color:#92400e}
.rek-let.stil{color:var(--grijs)}
table.berekening{width:100%;border-collapse:collapse;font-size:.9rem;margin:.5rem 0 .75rem}
.berekening th{text-align:left;font-weight:400;padding:.35rem 0}
.berekening td{text-align:right;padding:.35rem 0 .35rem 1rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.berekening .stil{font-size:.82rem}
.berekening tr.tussen th,.berekening tr.tussen td{font-weight:600;border-top:1px dashed var(--lijn)}
.berekening tr.totaal th,.berekening tr.totaal td{font-weight:750;font-size:1.05rem;border-top:2px solid var(--bpc);padding-top:.6rem;color:var(--bpc-donker)}
.berekening tr.fost th,.berekening tr.fost td{color:var(--grijs)}
.rek-sub{font-size:.95rem;margin:1.1rem 0 .1rem;padding-top:.8rem;border-top:1px solid var(--lijn);color:var(--bpc-donker)}
.rek-cliche{margin-top:1rem}
.cliche .formulier{align-content:start}

@media (max-width:760px){
  .rek-raster{grid-template-columns:1fr}
  .kies-tabel{max-width:none}
  .segment{align-self:flex-start}
  table.prijstabel{font-size:.82rem}
  .prijstabel th,.prijstabel td{padding:.5rem .55rem}
  .prijstabel .vast{min-width:8.5rem;max-width:9.5rem}
  .prijstabel td .klein{display:none}
  .prijstabel .niet-gsm{display:none}
  .cat-verp-gsm{display:block;font-size:.76rem;color:var(--grijs);margin-top:.2rem}
  .hoofdtabs{margin-top:-.75rem;gap:1.1rem;overflow-x:auto;scrollbar-width:none}
  .hoofdtabs::-webkit-scrollbar{display:none}
  .hoofdtabs button,.hoofdtabs .tab-link{flex:0 0 auto;white-space:nowrap}
  .hoofdtabs .tab-link{padding-right:.75rem}
  .hoofdtabs .tab-link .dot{right:0}
}

/* Keuzehulp in de catalogus */
.keuzehulp h2{margin:.25rem 0 .9rem}
.keuze-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.1rem;padding:0}
.keuze-chip{display:inline-flex;align-items:baseline;gap:.35rem;font:inherit;font-size:.85rem;font-weight:650;background:var(--bpc-licht);color:var(--bpc-donker);border:1px solid #cfe0c8;border-radius:99px;padding:.3rem .75rem;cursor:pointer}
.keuze-chip .stil{font-weight:400;color:#4b6343}
.keuze-chip:hover{background:#dbe9d5}
.keuze-chip.vast{background:#f1f5f9;border-color:var(--lijn);color:var(--inkt);cursor:default}
.keuze-chip.vast .stil{color:var(--grijs)}
.keuze-opties{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.6rem}
.keuze-opties.formaten{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.keuze-optie{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;font:inherit;background:#fff;border:1px solid #cbd5e1;border-radius:.75rem;padding:.7rem .85rem;cursor:pointer;color:var(--inkt)}
.keuze-optie:hover{border-color:var(--bpc);background:var(--bpc-licht)}
.keuze-optie{min-width:0}
.keuze-optie strong{font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.keuze-optie .klein{line-height:1.3}
.resultaten{list-style:none;margin:0 0 .75rem;padding:0;display:grid;gap:.6rem}
.resultaat{border:1px solid var(--lijn);border-radius:.75rem;padding:.8rem 1rem}
.resultaat[data-res]{cursor:pointer}
.resultaat[data-res]:hover{border-color:var(--bpc)}
.resultaat.gekozen{border-color:var(--bpc);box-shadow:inset 4px 0 0 var(--bpc);background:var(--bpc-licht)}
.resultaat:focus-visible{outline:3px solid var(--bpc);outline-offset:2px}
.res-kop{display:flex;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap}
.res-foto{flex:0 0 auto;width:72px;aspect-ratio:4/3;object-fit:contain;align-self:flex-start}
.res-tekst{flex:1 1 12rem}
.res-kop .klein{display:block;margin-top:.15rem}
.res-fost{white-space:nowrap}
.res-prijzen{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:.6rem 0 0}
.res-prijzen dt{font-size:.72rem;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.02em}
.res-prijzen dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}
.res-per dd{font-weight:400;color:var(--grijs)}
@media (max-width:760px){
  .keuze-opties,.keuze-opties.formaten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .keuze-optie{padding:.6rem .7rem}
  .keuze-optie strong{font-size:.92rem}
}

/* Catalogus: zoeken, Fost+-vinkje en PDF-knop */
.cat-balk{margin-bottom:.6rem}
.cat-zoek{flex:1;min-width:14rem;max-width:30rem}
.cat-opties{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;margin-bottom:.4rem}
.cat-opties .vinkje{font-weight:600}
.pdf-menu{position:relative}
.pdf-menu summary{list-style:none;cursor:pointer}
.pdf-menu summary::-webkit-details-marker{display:none}
.pdf-keuzes{position:absolute;z-index:5;left:0;top:calc(100% + .35rem);display:grid;gap:.55rem;min-width:15rem;background:#fff;border:1px solid var(--lijn);border-radius:.75rem;box-shadow:0 10px 25px -5px rgba(0,0,0,.15);padding:.8rem 1rem}
.pdf-keuzes .link{text-align:left;font-size:.92rem}
.res-verp{display:block}
.res-verp>span{white-space:nowrap}
.res-lijst{display:inline-block;font-size:.72rem;font-weight:700;background:var(--bpc-licht);color:var(--bpc-donker);border-radius:99px;padding:0 .45rem;margin-right:.15rem}
@media (max-width:760px){.cat-zoek{min-width:0;max-width:none;flex-basis:100%}}

/* Afdrukversie van de prijslijsten (knop PDF → Opslaan als PDF) */
#printversie{display:none}
@media print{
  @page{size:A4;margin:12mm 10mm}
  body.print-modus{background:#fff!important}
  body.print-modus>*:not(#printversie){display:none!important}
  body.print-modus #printversie{display:block;color:#1e293b;font-size:8.5pt;line-height:1.35}
  #printversie .p-kop{display:flex;align-items:center;gap:1rem;border-bottom:2px solid #326028;padding-bottom:.4rem;margin-bottom:.6rem}
  #printversie .p-logo{color:#326028}
  #printversie .p-logo svg{height:30pt;width:auto}
  #printversie h1{font-size:15pt;margin:0;color:#24461d}
  #printversie .p-kop p{margin:.1rem 0 0;color:#64748b}
  #printversie .p-tabel{break-inside:avoid;margin:0 0 .9rem}
  #printversie h2{font-size:10.5pt;margin:0 0 .1rem;color:#24461d}
  #printversie .p-sub{margin:.1rem 0 .3rem;color:#64748b;font-size:7.5pt}
  #printversie .p-ts{white-space:nowrap}
  #printversie table{width:100%;border-collapse:collapse}
  #printversie th,#printversie td{border-bottom:.5pt solid #cbd5e1;padding:2.5pt 4pt;text-align:left;vertical-align:top}
  #printversie thead th{background:#eaf1e7;color:#24461d;font-size:7pt;text-transform:uppercase;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printversie tfoot td{font-weight:700;color:#24461d}
  #printversie .num{text-align:right;white-space:nowrap}
  #printversie .p-voet{margin-top:.8rem;border-top:.5pt solid #cbd5e1;padding-top:.3rem;color:#64748b;font-size:7pt}
}

/* Rekentool: wat de klant precies koopt */
.rek-bestelt{margin:0 0 .35rem;padding:.55rem .7rem;background:#fff;border:1px solid var(--lijn);border-radius:.6rem;font-size:.92rem}
.rek-bestelt strong{font-variant-numeric:tabular-nums}
.rek-bestelt .heel{white-space:nowrap}

/* Bestellingen: naamdruk en productiestatus per order (kleuren zoals de stappenbalk) */
.naamdruk{display:block;font-weight:700;margin-top:.15rem;color:var(--inkt)}
.vo-labels{display:flex;flex-wrap:wrap;gap:.35rem}
.po-status{font-size:.8rem;font-weight:650;padding:.15rem .6rem;border-radius:99px;background:#f1f5f9;color:#64748b}
.po-status.gepland{background:#dbeafe;color:#1d4ed8}
.po-status.productie{background:#ffedd5;color:#b45309}
.po-status.gereed{background:#dcfce7;color:#15803d}
.po-extra{font-weight:500}
.filters{flex-wrap:wrap;max-width:100%}
@media (max-width:640px){.filters button{padding:.45rem .7rem}}

/* Meerdere naamdrukken: per naam de eigen productiestatus; orders met hetzelfde PO */
.naamdruk.meerdere{display:flex;flex-direction:column;gap:.2rem;margin:.25rem 0 .1rem}
.naamdruk .nd{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.po-status.klein{font-size:.72rem;padding:.05rem .45rem;font-weight:600}
.zelfde-po{display:block;font-size:.85rem;margin-top:.15rem;text-align:left}

/* Portaalbeheer: overzicht van klantaccounts */
table.accounts{width:100%;border-collapse:collapse;font-size:.9rem}
.accounts th{text-align:left;font-weight:600;color:var(--grijs);font-size:.78rem;padding:.6rem .8rem;border-bottom:1px solid var(--lijn);white-space:nowrap}
.accounts td{padding:.65rem .8rem;border-bottom:1px solid var(--lijn);vertical-align:top}
.accounts td .klein{display:block}
.accounts .chips{margin:0}
.chip.klein{padding:.1rem .6rem;font-size:.8rem}
.acc-rij{cursor:pointer}
.acc-rij:hover td,.acc-rij.open td{background:var(--bpc-licht)}
.acc-knop{text-align:right;white-space:nowrap}
.acc-detail>td{background:#f8fafc;padding:1rem 1.1rem}
.gebruiker.detail{border:0;box-shadow:none;background:none;padding:0}
.detail-raster{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem;margin-bottom:.75rem}
.detail h3{font-size:.85rem;margin:0 0 .4rem}
.waarschuwing{font-size:.8rem;font-weight:650;color:#92400e;background:#fef3c7;border-radius:99px;padding:.1rem .6rem}
.tedoen{background:#fffbeb;border:1px solid #fde68a;border-radius:1rem;padding:1rem 1.25rem;margin:0 0 1.25rem}
.tedoen h2{margin:0 0 .75rem}
.tedoen .gebruiker{background:#fff;margin-top:.6rem}
.stappenplan{margin:.75rem 0 0;padding-left:1.2rem;display:grid;gap:.75rem}
.stappenplan .chips{margin:.4rem 0}
.voorstellen{margin:.3rem 0 .5rem}
.chip.voorstel{cursor:pointer;border-style:dashed;background:#fff;margin:0 .3rem .3rem 0;font:inherit;font-size:.82rem;padding:.15rem .65rem}
.chip.voorstel:hover{background:var(--bpc-licht);border-color:var(--bpc)}
#accZoek{max-width:22rem}
@media (max-width:760px){
  .accounts thead{display:none}
  .accounts tr.acc-rij{display:grid;grid-template-columns:1fr;gap:.25rem;padding:.7rem .2rem;border-bottom:1px solid var(--lijn)}
  .accounts .acc-knop{text-align:left}
  .chip.klein{white-space:nowrap}
  .accounts tr.acc-rij td{border:0;padding:.15rem .6rem}
  .accounts tr.acc-detail,.accounts tr.acc-detail>td{display:block}
  .detail-raster{grid-template-columns:1fr}
  #accZoek{max-width:none}
}

/* Tabblad Documenten */
.documenten{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.documenten .document{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;background:#fff;border:1px solid var(--lijn);border-radius:1rem;padding:1rem 1.25rem}
.documenten h2{font-size:1rem;margin:0 0 .2rem}
.documenten .stil{margin:0}
.document-knoppen{display:flex;gap:.5rem;flex-wrap:wrap}

/* ================================================================
   Huisstijl van www.belpaper.com (laatste laag, overschrijft de vorige):
   Archivo, zwarte drukinkt, wit zakkenpapier, kraft-accenten, BPC-groen voor acties, rechte knoppen, geribd kraft
   ================================================================ */
:root{
  --bpc:#336029; --bpc-donker:#22421B; --bpc-licht:#EEF3EC; --focus:#B8895A;
  --kraft-hout:#B8895A; --kraft-donker:#8A5F33; --kraft-rib:#9C6A3A;
  --mist:#F5F3EE; --vlak:#F5F3EE; --lijn:#E2DDD3; --inkt:#1D1D1B; --tekst:#26241F; --grijs:#67625A;
  --ribs:repeating-linear-gradient(90deg,rgba(0,0,0,.075) 0 1px,transparent 1px 4px,rgba(255,255,255,.07) 4px 5px,transparent 5px 7px);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
}
body{background:var(--mist);color:var(--tekst);font-family:"Archivo","Helvetica Neue",Arial,sans-serif}
:focus-visible{outline:3px solid var(--kraft-hout);outline-offset:3px}
h1{font-weight:800;font-stretch:118%;letter-spacing:-.025em;line-height:1;color:var(--inkt)}
h2{font-weight:800;font-stretch:112%;letter-spacing:-.015em;color:var(--inkt)}
h3{font-stretch:110%;color:var(--inkt)}
.stil{color:var(--grijs)}
.link{color:var(--kraft-donker);font-weight:600}

/* Kop: wit papier met een dunne lijn, zoals de website */
.kop{background:rgba(255,255,255,.97);border-bottom:1px solid var(--lijn);box-shadow:none;position:sticky;top:0;z-index:30;margin-bottom:0}
.merk-sub{color:var(--grijs);border-left-color:var(--lijn)}
.kop-rechts{color:var(--grijs)}
.kop .link{border:2px solid var(--bpc);color:var(--bpc);border-radius:4px;background:#fff;font-weight:600}
.kop .link:hover{background:var(--mist)}
.taalkeuze{background:#fff;border:1px solid var(--lijn);border-radius:24px;padding:3px}
.taalkeuze button{border-radius:20px;color:var(--grijs)}
.taalkeuze button[aria-pressed=true]{background:var(--bpc);color:#fff}

/* Aanmeldscherm: geribd kraft als achtergrond, witte papieren kaart */
body.donker{background-color:var(--kraft-rib);background-image:var(--ribs)}
body.donker .voet a,body.donker .voet .cookie-instellingen{color:#fff}
.loginkaart{border-radius:6px;box-shadow:0 18px 40px rgba(29,29,27,.28);border-top:4px solid var(--inkt)}
.loginkaart h1{color:var(--inkt);font-weight:800;font-stretch:112%}
.google-knop{border-radius:4px;border:2px solid var(--lijn)}

/* Hoofdtabs: zoals de navigatie van de website */
.hoofdtabs{border-bottom:3px solid var(--inkt)}
.hoofdtabs button,.hoofdtabs .tab-link{color:var(--grijs);font-weight:600;margin-bottom:-3px;border-bottom-width:4px}
.hoofdtabs button:hover,.hoofdtabs .tab-link:hover{color:var(--kraft-donker)}
.hoofdtabs button[aria-selected=true]{color:var(--inkt);border-color:var(--bpc)}
.tabs{border-bottom-color:var(--lijn)}
.tabs button[aria-selected=true]{color:var(--inkt);border-color:var(--bpc)}

/* Knoppen: recht, groen, 2px rand (btn-solid / btn-line) */
.knop{border-radius:4px;border:2px solid var(--bpc);background:var(--bpc);color:#fff;font-weight:600;box-shadow:none}
.knop:hover{background:var(--bpc-donker);border-color:var(--bpc-donker)}
.knop.tweede{background:transparent;color:var(--bpc);border-color:var(--bpc)}
.knop.tweede:hover{background:#fff}
.knop.gevaar{background:transparent;color:#A63D32;border-color:#A63D32}
.knop.gevaar:hover{background:#fff}
input,select,#klantFilter,#actPersoon,#actType,textarea{border-radius:4px;border:1px solid #CFC7B8;background:#fff;color:var(--inkt)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--kraft-hout);outline-offset:1px;box-shadow:none;border-color:var(--kraft-hout)}

/* Segmentknoppen (filters, Gepersonaliseerd/Standaard): pillen zoals de papierkeuze op de website */
.filters,.segment{background:#fff;border:1px solid var(--lijn);border-radius:24px;padding:4px}
.filters button,.segment button{border-radius:20px;color:var(--grijs);font-weight:600}
.filters button[aria-selected=true],.segment button[aria-selected=true]{background:var(--bpc);color:#fff;box-shadow:none}
.filters button[aria-selected=true] *,.segment button[aria-selected=true] *{color:#fff}

/* Kaarten: wit papier, dunne lijn, kraft-accent links */
.order,.gebruiker,.statuskaart,.klantgroep>details,.tabel-wrap,.cat-kaart,.resultaat,.loginkaart{border-radius:6px;box-shadow:none}
.order,.gebruiker,.statuskaart,.klantgroep>details,.cat-kaart,.resultaat{border-color:var(--lijn)}
.order{border-left:4px solid var(--kraft-hout)}
.order.klaar{border-left-color:var(--bpc)}
.leeg{border-radius:6px;border-color:#CFC7B8;background:#fff}
.wo{background:var(--mist);border-color:var(--lijn);border-radius:4px}
.chip{background:var(--mist);border-color:var(--lijn)}
.resultaat[data-res]:hover,.resultaat.gekozen{border-color:var(--bpc)}
.resultaat.gekozen{background:var(--bpc-licht);box-shadow:inset 4px 0 0 var(--bpc)}
.res-lijst{background:var(--mist);color:var(--kraft-donker);border:1px solid var(--lijn)}
.kz-lijst{border-radius:4px;border-color:var(--lijn)}
.kz-lijst li.actief,.kz-lijst li[data-naam]:hover{background:var(--mist)}

/* Paginakop: brede zwarte titel met een inktlijn eronder, zoals de secties op de website */
.overzicht-kop h1{font-size:clamp(2rem,4.6vw,3rem)}
.statuskaart{border-top:4px solid var(--inkt)}
.taalkeuze.los{background:#fff;border-color:var(--lijn)}
.taalkeuze.los button[aria-pressed=true]{background:var(--bpc);color:#fff;box-shadow:none}
.voet a,.voet .cookie-instellingen{color:var(--grijs)}
.statuskaart a:not(.knop),.intro a,main p a:not(.knop){color:var(--kraft-donker)}
.domein-vinkje{margin:.6rem 0 .2rem}
p.waarschuwing{background:#FBF1E4;border-left:3px solid var(--kraft-hout);padding:.45rem .7rem;margin:.6rem 0;color:#6B4520}
.g-kop .badge{margin-left:.3rem}

/* Doos op gewicht (vetvrij papier): prijs per doos onder de prijs per 1000 vellen */
.res-prijzen dd.res-doos{font-weight:500;font-size:.85rem;color:var(--grijs);margin-top:.1rem}
.prijstabel .per-doos{display:block;font-weight:400;white-space:nowrap}

/* ---------- Proefdrukken: /beheer → Proeven (proeven-beheer.js) en de proefpagina /proeven/{nr} (proef-klant.js) ---------- */
textarea{font:inherit;font-weight:400;padding:.6rem .7rem;width:100%;resize:vertical}
select{font:inherit;padding:.55rem .6rem}
.badge.ps-wacht_op_klant{background:#F6E9D7;color:#7A5426}
.badge.ps-aanpassing_gevraagd{background:#F4DEDB;color:#A63D32}
.badge.ps-in_bewerking{background:#E4E9EF;color:#3D5167}
.badge.ps-in_voorbereiding{background:#ECEAE5;color:#5C5850;border:1px dashed #B8B2A6}
.badge.ps-on_hold{background:#1D1D1B;color:#F5F3EE;letter-spacing:.02em}
.pd-mail-melding.pd-hold{border-left:4px solid #1D1D1B}
.badge.ps-goedgekeurd{background:var(--bpc-licht);color:var(--bpc)}
.badge.ps-besteld{background:#336029;color:#fff}
.badge.ps-geleverd{background:#1D1D1B;color:#F5F3EE}
.badge.ps-te-bestellen{background:#FBF1E4;color:#8A5F33;border:1px solid #B8895A}
.badge.ps-geannuleerd,.badge.tl-intern{background:#ECEAE5;color:var(--grijs)}
.pb-kop{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:1.5rem 0 1rem}
.pb-kop h2{margin:0}
.pb-kop .stil{margin-left:.75rem}
.pb-inst{background:#fff;border:1px solid var(--lijn);border-radius:6px;padding:.75rem 1rem;margin-top:1rem}
.pb-inst summary{cursor:pointer;font-weight:650}
.pb-inst summary .waarschuwing,.pb-inst summary .stil{margin-left:.5rem;font-weight:400}
.pb-rij{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;margin:.6rem 0}
.pb-rij>label{flex:1 1 12rem}
.pb-rij input{width:auto;flex:1 1 10rem}
.pb-rij .vinkje{flex:0 0 auto}
.pb-tabel{width:100%;border-collapse:collapse;font-size:.9rem}
.pb-tabel th{text-align:left;font-size:.8rem;color:var(--grijs);font-weight:600;padding:.6rem .75rem;border-bottom:2px solid var(--inkt);white-space:nowrap}
.pb-tabel td{padding:.6rem .75rem;border-bottom:1px solid var(--lijn);vertical-align:top}
.pb-tabel td .stil.klein{display:block}
.pb-rij-dossier{cursor:pointer}
.pb-rij-dossier:hover,.pb-rij-dossier:focus-visible{background:var(--mist)}
.pb-form{display:grid;gap:1rem;max-width:44rem}
.pb-form h2{margin:0}
.pb-form fieldset{border:1px solid var(--lijn);border-radius:6px;padding:.75rem 1rem}
.pb-form legend{font-weight:600;font-size:.92rem;padding:0 .3rem}
.pb-codes-preview:empty{display:none}
.pb-codes-preview{margin:-.5rem 0 0}
.pb-ontv{list-style:none;margin:.3rem 0;padding:0;display:grid;gap:.3rem}
.pb-ontv li{display:flex;gap:.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pb-ontv .badge{margin-left:.3rem}
span.waarschuwing{color:#8A5F33;font-weight:600}

/* Dossier in /beheer */
.pd-kop{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:flex-start;margin:.5rem 0 1rem}
.pd-kop h2{margin:0;font-size:1.6rem}
.pd-titel{font-size:1.1rem;font-weight:600;margin:.3rem 0}
.pd-ok{background:var(--bpc-licht);color:var(--bpc);border-left:3px solid var(--bpc);padding:.45rem .7rem;font-weight:600}
.pd-links-kop{display:grid;gap:.4rem;justify-items:end}
.pd-raster,.pr-raster{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(16rem,1fr);gap:1.25rem;align-items:start}
.pd-versies{display:inline-flex;margin-bottom:.6rem}
.pdf-kader{background:#fff;border:1px solid var(--lijn);border-radius:6px;padding:.5rem}
.pdf-kader iframe{width:100%;height:min(75vh,46rem);border:0;display:block;background:var(--mist)}
.pdf-kader+.klein,.pdf-kader .klein{margin:.5rem 0 0}
.pd-opm{display:block;margin-top:.3rem;color:var(--tekst)}
.pd-info{display:grid;gap:.6rem;margin:0 0 1rem;background:#fff;border:1px solid var(--lijn);border-radius:6px;padding:.75rem 1rem}
.pd-info dt{font-size:.8rem;color:var(--grijs);font-weight:600}
.pd-info dd{margin:.2rem 0 0}
.pd-knoppen{margin-bottom:.6rem}
.pd-actie{background:#fff;border:1px solid var(--lijn);border-radius:6px;padding:.6rem .9rem;margin-bottom:.5rem}
.pd-actie summary{cursor:pointer;font-weight:650;color:var(--inkt)}
.pd-actie[open]{border-color:var(--bpc)}
.pd-actie[open]>summary{margin-bottom:.6rem}
.pd-actie>label,.pd-actie>textarea,.pd-actie>input{margin-bottom:.6rem}
.pd-actie.gevaar summary{color:#A63D32}

/* Tijdlijn (beheer en klant) */
.tijdlijn{list-style:none;margin:0;padding:0 0 0 1rem;border-left:2px solid var(--lijn)}
.tijdlijn>li{position:relative;padding:.55rem 0 .75rem .9rem}
.tijdlijn>li::before{content:"";position:absolute;left:-1.42rem;top:.85rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--kraft-hout);border:2px solid var(--mist)}
.tijdlijn>li.intern::before{background:#CFC7B8}
.tijdlijn>li.tl-goedgekeurd::before{background:var(--bpc)}
.tijdlijn>li.tl-aanpassing_gevraagd::before{background:#A63D32}
.tijdlijn>li.intern{color:var(--grijs)}
.tl-kop{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.8rem;color:var(--grijs)}
.tl-kop .badge{margin-left:0}
.tl-tekst{font-weight:600;color:var(--inkt)}
.tijdlijn>li.intern .tl-tekst{color:var(--tekst);font-weight:500}
.tl-notitie{margin:.25rem 0 0;white-space:pre-wrap;background:#fff;border:1px solid var(--lijn);border-radius:4px;padding:.4rem .6rem;max-width:44rem}
/* Antwoord van de klant op een proefmail (mail_in van Make): valt op tot een medewerker het verwerkt */
.tijdlijn>li.tl-make{color:var(--tekst)}
.tijdlijn>li.tl-make .tl-tekst{color:var(--inkt);font-weight:600}
.tijdlijn>li.tl-mail-open{background:#FBF5EA;border:1px solid var(--kraft);border-left:4px solid var(--kraft);border-radius:6px;padding:.7rem .9rem .8rem;margin:.3rem 0 .6rem}
.tijdlijn>li.tl-mail-open::before{background:var(--kraft);left:-1.42rem}
.tl-mailtekst{margin:.35rem 0 0;white-space:pre-wrap;background:#fff;border:1px solid var(--lijn);border-radius:4px;padding:.5rem .7rem;max-width:44rem;max-height:18rem;overflow:auto;color:var(--inkt)}
.tl-voorstel{margin:.5rem 0 .4rem;font-size:.9rem}
.badge.tl-vs-akkoord{background:var(--bpc-licht);color:var(--bpc)}
.badge.tl-vs-aanpassing{background:#F6E3DF;color:#A63D32}
.badge.tl-vs-onduidelijk{background:#ECEAE5;color:var(--grijs)}
.badge.pb-mail-badge{background:#FBF0DD;color:#8A5F33}
.pd-mail-melding{background:#FBF5EA;border-left:3px solid var(--kraft);padding:.45rem .7rem;font-weight:600;color:var(--inkt)}
.pd-uit-mail{background:#FBF5EA;border-left:3px solid var(--kraft);padding:.3rem .7rem;margin:.4rem 0}
.pd-uit-mail p{margin:0}
.pd-mail-akkoord{font-weight:600}
.pd-aanvraag{background:#FBF5EA;border-left:3px solid var(--kraft);padding:.4rem .7rem;margin:.4rem 0;color:var(--inkt)}

/* Proefpagina voor de klant */
.intro-proef{color:var(--inkt);font-weight:600}
.pr-terug{margin:0 0 1rem}
.pr-nr{font-weight:700;color:var(--kraft-donker);letter-spacing:.02em;margin:0 0 .3rem}
.pr-kop h1{margin-bottom:.6rem}
.pr-meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0}
.pr-meta .badge{margin-left:0}
.pr-stappen{margin:1.25rem 0 1.5rem}
.pr-stappen li{--k:var(--bpc);--kt:var(--bpc)}
.pr-stappen li.nu{--k:var(--kraft-hout);--kt:var(--kraft-donker)}
.pr-stappen.geannuleerd li{--k:#CFC7B8;--kt:var(--grijs);color:var(--grijs)}
.pr-goed{background:var(--bpc-licht);color:var(--bpc);border-left:4px solid var(--bpc);padding:.6rem .9rem;font-weight:700;margin:0 0 1.25rem}
.pr-geannuleerd{background:#ECEAE5;color:var(--grijs);border-left:4px solid #CFC7B8;padding:.6rem .9rem;font-weight:700}
.pr-links h2{margin-top:0}
.pr-opm{background:#fff;border-left:4px solid var(--kraft-hout);padding:.5rem .8rem;margin:0 0 .75rem}
.pr-opm p{margin:.15rem 0 0;white-space:pre-wrap}
.pr-pdf-knoppen{margin-top:.75rem}
.pr-versies{list-style:none;padding:0;margin:.3rem 0;display:grid;gap:.25rem}
.pr-versies .stil{margin-left:.4rem}
.pr-kaart{position:sticky;top:5.5rem}
.pr-kaart h2{margin-top:0}
.pr-keuze{display:flex;margin-bottom:1rem}
.pr-keuze button{flex:1;padding:.5rem .6rem;border:0;background:none;font:inherit;cursor:pointer}
.pr-bevestig{background:var(--mist);border:1px solid var(--lijn);border-radius:4px;padding:.6rem .8rem;margin:0;font-size:.92rem}
.pr-tl-kop{margin-top:2.5rem}
.pr-geen{margin-top:2rem}
@media (max-width:820px){
  .pd-raster,.pr-raster{grid-template-columns:1fr}
  .pr-kaart{position:static}
  .pdf-kader iframe{height:60vh}
  .pd-links-kop{justify-items:start}
}

/* Formaten binnen één clichénummer (lijst links, gekozen formaat rechts) */
main:has(#scherm-proef:not([hidden])),main:has(#btab-proeven:not([hidden]) .pd){max-width:84rem}
.pd-sub{margin:1.75rem 0 .6rem;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grijs)}
.pd-raster{grid-template-columns:minmax(14rem,19rem) minmax(0,1fr)}
.pf-lijst{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;max-height:75vh;overflow:auto}
.pf-item{display:grid;gap:.2rem;width:100%;text-align:left;background:#fff;border:1px solid var(--lijn);border-radius:6px;padding:.55rem .7rem;font:inherit;cursor:pointer;color:var(--inkt)}
.pf-item:hover{border-color:var(--kraft-hout)}
.pf-item.gekozen{border-color:var(--bpc);box-shadow:inset 4px 0 0 var(--bpc);background:var(--bpc-licht)}
.pf-naam-lijst{font-weight:650}
.pf-meta .badge{margin-left:0}
.pf-codes-lijst{overflow-wrap:anywhere}
.pf-kop h3{margin:0 0 .3rem;font-size:1.15rem}
.pf-kop .pd-versies{margin:.5rem 0}
#pdFormaatActies{margin-top:.75rem}
.pf-modus{display:inline-flex;margin-bottom:.6rem}
.pf-drop{border:2px dashed #CFC7B8;border-radius:6px;padding:.9rem;background:var(--mist);margin-bottom:.6rem}
.pf-tabel{width:100%;border-collapse:collapse;font-size:.9rem;margin:.4rem 0}
.pf-tabel th{text-align:left;font-size:.78rem;color:var(--grijs);padding:.3rem .4rem}
.pf-tabel td{padding:.3rem .4rem;vertical-align:top;border-top:1px solid var(--lijn)}
.pf-tabel input{padding:.45rem .55rem}
.pf-tabel .chips{margin:.3rem 0 0}
.pf-nr{color:var(--grijs);width:1.5rem}
.pd-formaten-keuze{border:1px solid var(--lijn);border-radius:6px;padding:.5rem .8rem;margin:0 0 .6rem;display:grid;gap:.25rem;max-height:14rem;overflow:auto}
.pd-tl-kop{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.25rem}
.pd-tl-kop h2{margin:0}
.pd-tl-kop select{width:auto}
.pb-telling{white-space:nowrap}
.pr-telling{font-weight:600;color:var(--inkt)}
.pr-raster-f{grid-template-columns:minmax(12rem,17rem) minmax(0,1.6fr) minmax(16rem,1fr)}
.pr-raster-f.een{grid-template-columns:minmax(0,1.6fr) minmax(16rem,1fr)}
.pr-raster-f.een .pr-formaten{display:none}
.pr-formaten h2{margin:0 0 .6rem;font-size:1rem}
.pr-formaat-kop h2{margin-top:0}
.pr-formaat-kop .pr-stappen{margin:.75rem 0 1rem}
.pr-formaatnaam{font-weight:700;margin:-.3rem 0 .75rem;color:var(--kraft-donker)}
.pr-alles{margin:1.25rem 0;border-top-color:var(--bpc)}
.pr-alles summary{cursor:pointer}
.pr-alles form{margin-top:1rem;max-width:40rem}
@media (max-width:1100px){
  .pr-raster-f{grid-template-columns:minmax(12rem,16rem) minmax(0,1fr)}
  .pr-raster-f .pr-rechts{grid-column:2}
  .pr-raster-f.een{grid-template-columns:1fr}
  .pr-raster-f.een .pr-rechts{grid-column:auto}
}
@media (max-width:820px){
  .pr-raster-f,.pd-raster{grid-template-columns:1fr}
  .pr-raster-f .pr-rechts{grid-column:auto}
  .pf-lijst{max-height:none}
}
.pf-tabel td:nth-child(2){width:40%}
.pf-tabel .pf-naam{min-width:9rem}
.pf-tabel td.stil{max-width:9rem;overflow-wrap:anywhere}
.pf-item{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.6rem}
.pf-item .pf-codes-lijst{grid-column:1 / -1}
.pr-kop{margin-bottom:1.25rem}
.pd-paneel-waarsch .waarschuwing{margin-top:0}
/* Clichékost per formaat */
.pd-prijs,.pr-prijs{margin:.2rem 0 .4rem}
.pd-prijs-totaal{margin:.3rem 0 0;color:var(--inkt)}
.pf-tabel .pf-prijs{width:6.5rem}
.pr-prijs b{font-size:1.05rem;color:var(--inkt)}
.pr-alles-lijst{list-style:none;margin:.2rem 0 .6rem;padding:0;display:grid;gap:.15rem;font-size:.92rem}
.pr-alles-lijst li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--lijn);padding:.2rem 0}
.pr-alles-lijst li.totaal{font-weight:700;border-bottom:0}
.ontv-taal{width:auto;padding:.3rem .4rem;font-size:.85rem}
/* Clichénummer: directe controle in het formulier */
.pb-nummer input[name=nummer]{max-width:10rem}
.pb-nrcheck{margin:.2rem 0 0;padding:.4rem .6rem;border-left:3px solid var(--lijn)}
.pb-nrcheck:empty{display:none}
.pb-nrcheck.ok{border-left-color:var(--bpc);background:var(--bpc-licht);color:var(--bpc)}
.pb-nrcheck.fout{border-left-color:#A63D32;background:#F4DEDB;color:#7A2A22}
.pb-keuzes{display:grid;gap:.35rem;margin:.2rem 0 .5rem}

/* ---------- Tabblad Proeven (proeven-overzicht.js): zelfde tegels als de bestellingen ---------- */
.po-tegel{padding:0}
.po-link{display:block;padding:1.1rem 1.25rem 1.2rem;color:inherit;text-decoration:none;border-radius:inherit}
.po-link:hover{background:#FCFBF8}
.po-link:hover .nr{color:var(--kraft-donker)}
.po-link:focus-visible{outline:3px solid var(--kraft-hout);outline-offset:-3px}
.po-tegel .art{font-weight:600;color:var(--inkt)}
.po-laatste{color:var(--grijs);font-size:.85rem;text-align:right}
/* statuskleuren: wacht op klant oranje, aanpassing/in bewerking blauw, goedgekeurd groen, geannuleerd grijs */
.vo-status.ps-wacht_op_klant{background:#F6E9D7;color:#7A5426}
.vo-status.ps-aanpassing_gevraagd,.vo-status.ps-in_bewerking{background:#E3ECF6;color:#2B5A88}
.vo-status.ps-goedgekeurd{background:var(--bpc-licht);color:var(--bpc)}
.vo-status.ps-geannuleerd{background:var(--vlak);color:var(--grijs)}
.po-tegel.klaar{border-left-color:var(--bpc)}
.po-klant{width:auto}
/* badge op het tabblad + melding op de startpagina */
.hoofdtabs .tab-badge{display:inline-block;min-width:1.25rem;margin-left:.4rem;padding:0 .35rem;border-radius:99px;background:#C2410C;color:#fff;
  font-size:.75rem;font-weight:700;line-height:1.25rem;text-align:center;vertical-align:.1em}
.po-melding{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin:0 0 1rem;padding:.7rem 1rem;
  background:#FBF1E4;border-left:4px solid var(--kraft-hout);border-radius:4px;font-weight:600;color:var(--inkt)}
@media (max-width:640px){ .po-laatste{text-align:left} .vo-onder{flex-wrap:wrap} }

/* Klantenbeheer (enkel medewerkers): knop in de kop naast Afmelden, niet meer bij de tabbladen */
.kop .kop-beheer{position:relative;display:inline-flex;align-items:center;text-decoration:none}
.kop .kop-beheer[hidden]{display:none}
.kop .kop-beheer .dot{position:absolute;top:-.3rem;right:-.3rem;width:.6rem;height:.6rem;border-radius:50%;background:#dc2626;box-shadow:0 0 0 2px #fff}
.kop .kop-beheer-ico{display:none}
@media (max-width:640px){
  .kop .kop-beheer-ico{display:block}
  .kop .kop-beheer-tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Inbox (/beheer → Inbox, enkel intern): kaarten per mail zoals de tegels van orders en proeven */
.ib-fout{margin:0 0 .75rem;padding:.7rem 1rem;background:#FBE9E6;border-left:4px solid #A63D32;border-radius:4px;color:#7A2A22}
.ib-fout .klein{display:block;color:#7A2A22;opacity:.85}
.ib-info{margin:0 0 1rem;padding:.7rem 1rem;background:#FBF1E4;border-left:4px solid var(--kraft-hout);border-radius:4px;font-weight:600;color:var(--inkt)}
.ib-status{margin:-.5rem 0 1rem}
.ib-status.ib-oud{color:#A63D32;font-weight:600}
.ib-balk{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-bottom:.75rem}
.ib-balk #ibZoek{flex:1 1 22rem;min-width:0}
.ib-balk .vinkje{margin:0}
.ib-lijst{display:grid;gap:.75rem;margin-top:1rem}
.ib-kaart{background:#fff;border:1px solid var(--lijn);border-left:4px solid var(--kraft-hout);border-radius:6px;padding:.9rem 1.1rem}
.ib-kaart.ib-uit{border-left-color:var(--lijn)}
.ib-kaart.ib-is-verwerkt{border-left-color:var(--bpc)}
.ib-kop{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.ib-wie{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--inkt)}
.ib-meta{display:flex;gap:.6rem;align-items:center;flex:0 0 auto;color:var(--grijs);font-size:.85rem;font-variant-numeric:tabular-nums}
.ib-mb{font-size:.75rem;font-weight:650;padding:.05rem .45rem;border:1px solid var(--lijn);border-radius:99px;color:var(--kraft-donker);background:var(--mist)}
.ib-open{display:block;margin:.35rem -.4rem 0;padding:.25rem .4rem;border-radius:4px;color:inherit;text-decoration:none}
.ib-open:hover{background:#FCFBF8}
.ib-open:hover .ib-onderwerp{color:var(--kraft-donker)}
.ib-onderwerp{display:flex;gap:.35rem;align-items:center;font-weight:650;color:var(--inkt)}
.ib-onderwerp svg,.ib-meta svg,.ib-bijlagen svg{flex:0 0 auto;color:var(--grijs)}
.ib-belangrijk{display:inline-grid;place-items:center;width:1.1rem;height:1.1rem;border-radius:50%;background:#A63D32;color:#fff;font-size:.75rem;font-weight:800}
.ib-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--grijs);font-size:.9rem;margin-top:.15rem}
.ib-koppel{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin-top:.6rem;padding-top:.55rem;border-top:1px dashed var(--lijn);font-size:.88rem}
.ib-k{display:inline-flex;align-items:center;gap:.35rem;color:var(--tekst)}
.ib-l{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grijs);margin-right:.15rem}
.ib-onbekend{color:#A63D32;font-weight:600}
.ib-kaart a:not(.ib-open),.ib-proef a{color:var(--kraft-donker);font-weight:600}
.ib-vg{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;padding:0;border:1px solid var(--lijn);border-radius:4px;background:#fff;color:var(--inkt);cursor:pointer}
.ib-vg:hover{border-color:var(--kraft-hout);color:var(--kraft-donker)}
.ib-voorstellen{margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.ib-onder{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.75rem}
.ib-vw{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem}
.ib-onder .ib-ok{color:var(--bpc);font-weight:700}
.ib-verwerkt-knop{min-width:7rem}
.ib-menu{position:relative}
.ib-menu>summary{list-style:none;cursor:pointer;user-select:none}
.ib-menu>summary::-webkit-details-marker{display:none}
.ib-acties{display:inline-flex;align-items:center;gap:.35rem}
.ib-menu[open]>.ib-acties{background:var(--mist);border-color:var(--inkt)}
/* Actiemenu: opent naar onder (standaard) of naar boven als er onderaan geen plaats is (klasse naar-boven, inbox.js) */
.ib-menu-inhoud{position:absolute;right:0;top:calc(100% + .35rem);z-index:20;width:19rem;max-width:calc(100vw - 2rem);padding:.35rem;
  background:#fff;border:1px solid var(--lijn);border-top:3px solid var(--inkt);border-radius:6px;box-shadow:0 14px 32px rgba(29,29,27,.18)}
.ib-menu.naar-boven .ib-menu-inhoud{top:auto;bottom:calc(100% + .35rem)}
.ib-menu-groep{padding:.3rem 0}
.ib-menu-groep+.ib-menu-groep{border-top:1px solid var(--lijn)}
.ib-menu-kop{margin:.1rem .6rem .2rem;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs)}
.ib-menu-nu{text-transform:none;letter-spacing:0;font-weight:600;color:var(--kraft-donker)}
.ib-mi{display:flex;align-items:flex-start;gap:.65rem;width:100%;padding:.45rem .6rem;border:0;border-left:3px solid transparent;border-radius:4px;
  background:none;font:inherit;text-align:left;color:var(--inkt);cursor:pointer}
.ib-mi svg{flex:0 0 auto;margin-top:.1rem;color:var(--kraft-donker)}
.ib-mi:hover,.ib-mi:focus-visible{background:var(--mist);border-left-color:var(--kraft-hout);outline:none}
.ib-mi[hidden]{display:none}
.ib-mi-tekst{display:grid;min-width:0}
.ib-mi-titel{font-weight:650;font-size:.92rem;line-height:1.3}
.ib-mi-uitleg{font-size:.8rem;line-height:1.3;color:var(--grijs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-editor{display:grid;gap:.6rem;margin-top:.75rem;padding:.8rem 1rem;background:var(--mist);border:1px solid var(--lijn);border-radius:6px}
.ib-editor label{display:grid;gap:.25rem;font-weight:600;font-size:.88rem}
.ib-vrij{display:flex;flex-wrap:wrap;gap:.5rem}
.ib-vrij input{flex:1 1 12rem}
.ib-vrij[hidden]{display:none}
.ib-editor .acties{display:flex;gap:.5rem;align-items:center}
.ib-gesprek h2{margin:.25rem 0}
.ib-gesprek .ib-kaart{margin-top:.75rem}
.ib-bericht>summary{display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;cursor:pointer;list-style:none}
.ib-bericht>summary::-webkit-details-marker{display:none}
.ib-bericht>summary .ib-preview{grid-column:1/-1;-webkit-line-clamp:1}
.ib-bericht[open]>summary .ib-preview{display:none}
.ib-adressen{display:grid;gap:.1rem;margin:.6rem 0;padding:.5rem .75rem;background:var(--mist);border-radius:4px}
.ib-proef{margin:.5rem 0;padding:.5rem .75rem;background:#FBF1E4;border-left:3px solid var(--kraft-hout);border-radius:4px}
.ib-afb{margin:.25rem 0 .4rem;color:var(--grijs)}
.ib-frame{display:block;width:100%;height:min(65vh,640px);border:1px solid var(--lijn);border-radius:4px;background:#fff;resize:vertical}
.ib-bijlagen{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.ib-bijlagen li{display:inline-flex;align-items:center;gap:.35rem}
.ib-bijlagen .link{display:inline-flex;align-items:center;gap:.3rem}
@media (max-width:640px){
  .ib-kop{flex-direction:column;gap:.15rem}
  .ib-wie{white-space:normal}
  .ib-menu-inhoud{right:0;left:auto}
  .ib-frame{height:60vh}
}

/* Orders (/beheer → Orders, enkel intern): zelfde tegels als de Inbox; status links als kleurstreep */
.or-info{margin:0 0 1rem;padding:.7rem 1rem;background:#FBF1E4;border-left:4px solid var(--kraft-hout);border-radius:4px;color:var(--inkt)}
.or-ok{margin:0 0 1rem;padding:.7rem 1rem;background:var(--bpc-licht);border-left:4px solid var(--bpc);border-radius:4px;color:var(--inkt)}
.or-tellerlijn{margin:-.5rem 0 .75rem}
.or-reeks-paneel{margin:0 0 1rem}
.or-reeks-paneel>summary{cursor:pointer}
.or-reeks{display:grid;gap:.6rem;max-width:34rem;margin-top:.6rem;padding:.8rem 1rem;background:#fff;border:1px solid var(--lijn);border-radius:6px}
.or-reeks label:not(.vinkje){display:grid;gap:.25rem;font-weight:600;font-size:.9rem}
.or-reeks .knop{justify-self:start}
.or-reeks-exact p{margin:0}
.or-reeks-knoppen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem!important}
.or-lijst{display:grid;gap:.75rem;margin-top:1rem}
.or-tegel{display:block;color:inherit;text-decoration:none}
.or-tegel:hover{background:#FCFBF8}
.or-tegel:hover strong{color:var(--kraft-donker)}
.or-regel{margin-top:.35rem}
.or-rand-in_exact{border-left-color:var(--bpc)}
.or-rand-fout_exact{border-left-color:#A63D32}
.or-rand-geannuleerd{border-left-color:var(--lijn)}
.badge.or-st{background:#F6E9D7;color:#7A5426}
.badge.or-naar_exact{background:#E3ECF6;color:#2B5A88}
.badge.or-in_exact{background:var(--bpc-licht);color:var(--bpc)}
.badge.or-fout_exact{background:#FBE9E6;color:#A63D32}
.badge.or-geannuleerd{background:var(--vlak);color:var(--grijs)}
.badge.or-test{background:#FFF4CC;color:#7A5C00;border:1px dashed #C9A227}
.or-kop{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.or-kop h2{margin:.25rem 0}
.or-form{display:grid;gap:1rem}
.or-form fieldset{border:0;padding:0;margin:0;min-width:0}
.or-form fieldset[disabled] input,.or-form fieldset[disabled] select,.or-form fieldset[disabled] textarea{background:var(--mist);color:var(--grijs)}
.or-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.8rem 1.2rem}
.or-raster>label{display:grid;gap:.25rem;font-weight:600;font-size:.9rem}
.or-raster select,.or-raster input,.or-raster textarea{width:100%;min-width:0;max-width:100%}
.or-vrij{display:flex;gap:.5rem;flex-wrap:wrap;align-self:end}
.or-vrij[hidden]{display:none}
.or-vrij input{flex:1 1 10rem}
.or-goedk[hidden]{display:none}
.or-regels{width:100%;border-collapse:collapse}
.or-regels th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--grijs);padding:.4rem .5rem;border-bottom:2px solid var(--inkt)}
.or-regels td{padding:.45rem .5rem;border-bottom:1px solid var(--lijn);vertical-align:top}
.or-regels td span{display:block}
.or-aantal,.or-prijs{width:6.5rem}
.or-zoek{display:grid;gap:.3rem}
.or-resultaten{list-style:none;margin:0;padding:.4rem .6rem;background:#fff;border:1px solid var(--lijn);border-radius:6px;max-height:18rem;overflow:auto}
.or-resultaten li{padding:.2rem 0}
.or-resultaten .link{text-align:left}
.or-vorige>summary{cursor:pointer;font-weight:600}
.or-vorige ul{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.3rem}
.or-notitie{display:flex;gap:.5rem;margin-bottom:.75rem}
.or-notitie input{flex:1}
@media (max-width:640px){ .or-regels{min-width:34rem} }
.or-blok{margin:0;padding:.9rem 1rem 1rem !important;border:1px solid var(--lijn) !important;border-left:4px solid var(--kraft-hout) !important;border-radius:6px;background:#FCFBF8;display:grid;gap:.75rem}
.or-blok-standaard{border-left-color:var(--grijs) !important}
.or-blok-hdpe{border-left-color:var(--bpc) !important}
.or-blok>legend{display:flex;align-items:center;gap:.6rem;padding:0 .3rem;font-weight:700}
.or-blok>legend select{font-weight:700;width:auto}
.or-blokinfo:empty{display:none}
.or-blokinfo .or-info,.or-blokinfo .or-ok{margin:0}
.or-cliches{list-style:none;margin:0;padding:0;display:grid;gap:.2rem;font-size:.9rem}
.or-nieuwblok{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.or-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.or-vorige-kop{margin:.4rem 0 .2rem}
.badge.or-soortbadge{background:#fff;border:1px solid var(--lijn);color:var(--inkt)}
.pd-orders{margin:.25rem 0 .75rem}
.badge.or-nieuw{background:#fff;border:1px solid var(--lijn);color:var(--inkt)}
.badge.or-wacht_op_goedkeuring{background:#F6E9D7;color:#7A5426}
.badge.or-goedgekeurd{background:var(--bpc-licht);color:var(--bpc)}
.badge.or-gereed{background:var(--bpc);color:#fff}
.or-rand-gereed{border-left-color:var(--bpc)}
.or-rand-goedgekeurd{border-left-color:var(--bpc)}
.or-rand-wacht_op_goedkeuring{border-left-color:var(--kraft-hout)}
.or-prijsvraag{align-self:end}
.or-tl-mail{background:#FCFBF8}
.or-c-dozen span,.or-c-exact span,.or-c-lijst span{display:block;max-width:15rem}
.or-prijskeuze{font:inherit;font-weight:700;padding:.15rem .5rem;border:1px solid var(--lijn);border-radius:4px;background:#fff;color:var(--inkt);cursor:pointer;font-variant-numeric:tabular-nums}
.or-prijskeuze:hover{border-color:var(--bpc);color:var(--bpc)}
.or-prijskeuze.actief{background:var(--bpc-licht);border-color:var(--bpc);color:var(--bpc)}
.or-prijskeuze:disabled{cursor:default}
.or-c-totaal{display:block;margin-top:.3rem;font-variant-numeric:tabular-nums}
.or-ordertotaal{margin:.8rem 0 .2rem;font-size:1.05rem;display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:baseline}
.or-ordertotaal b{font-size:1.25rem;color:var(--inkt);font-variant-numeric:tabular-nums}
.or-regels{min-width:40rem}
.or-pr{display:grid;grid-template-columns:4.6rem 1fr;gap:.4rem;align-items:start;padding:.15rem 0}
.or-pr + .or-pr{border-top:1px dashed var(--lijn);margin-top:.25rem;padding-top:.35rem}
.or-pr-l{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grijs);padding-top:.25rem}
/* Proeven: IPG-velden (datum en uur aangevraagd, datum besteld) */
.pd-ipg{gap:1rem;flex-wrap:wrap;align-items:flex-end}
.pd-ipg label{flex:1 1 14rem}
.pd-ipg .pb-rij{align-items:center;gap:.5rem}
/* Relatiebeheer (/beheer → Relatiebeheer, enkel intern): klanten en contactpersonen uit Exact, zelfde kaarten als Inbox en Orders */
.rb-vernieuwen{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:baseline;margin:-.25rem 0 .9rem}
.rb-vernieuwen .link:disabled{color:var(--grijs);cursor:default;text-decoration:none}
.rb-lijst{display:grid;gap:.75rem}
.rb-kaart .rb-titel{color:inherit;text-decoration:none}
.rb-kaart .rb-titel:hover strong{color:var(--kraft-donker);text-decoration:underline}
.rb-geblokkeerd{border-left-color:#A63D32}
.rb-regel{margin-top:.2rem}
.rb-personen{list-style:none;margin:.5rem 0 0;padding:.5rem 0 0;border-top:1px dashed var(--lijn);display:grid;gap:.2rem}
.rb-personen li{display:flex;flex-wrap:wrap;gap:.15rem .5rem;align-items:baseline}
.rb-terug{margin:0 0 .5rem}
.rb-kop{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-bottom:.25rem}
.rb-kop h2{margin:0}
.rb-kop .knop{margin-left:auto}
.badge.rb-code{background:#fff;border:1px solid var(--lijn);color:var(--inkt)}
.rb-sectie{margin-top:1rem;border-top-width:1px}
.rb-sectie>h3{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .6rem}
.rb-sectie>h3 .knop{margin-left:auto}
.rb-gegevens{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.6rem 1.2rem;margin:0}
.rb-gegevens dt{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grijs)}
.rb-gegevens dd{margin:0;overflow-wrap:anywhere}
.rb-tabel{width:100%;border-collapse:collapse;min-width:40rem}
.rb-tabel th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--grijs);padding:.45rem .6rem;border-bottom:2px solid var(--inkt)}
.rb-tabel td{padding:.45rem .6rem;border-bottom:1px solid var(--lijn);vertical-align:top;overflow-wrap:anywhere}
.rb-tabel td .badge{margin-left:.35rem}
.rb-weg{margin-top:.6rem}
.rb-weg>summary{cursor:pointer;color:var(--grijs)}
.rb-weg .rb-tabel{opacity:.75}
.rb-items{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.rb-items li{display:flex;flex-wrap:wrap;gap:.15rem .5rem;align-items:baseline}
.rb-datum{min-width:6.5rem;font-variant-numeric:tabular-nums}
.rb-rij{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.5rem}
.rb-rij select{font:inherit;padding:.5rem .6rem;border:1px solid var(--lijn);border-radius:4px;background:#fff;color:var(--inkt);max-width:100%}
#rbNotitie{width:100%;font:inherit;padding:.6rem .7rem;border:1px solid var(--lijn);border-radius:4px;background:#fff;color:var(--inkt);resize:vertical}
.rb-form{display:grid;gap:.9rem;margin:0 0 1rem;border-top-width:1px;background:#FCFBF8}
.rb-form h3{margin:0}
.rb-form .or-raster select{font:inherit;padding:.6rem .7rem;border:1px solid var(--lijn);border-radius:4px;background:#fff;color:var(--inkt)}
.rb-form ul{margin:.4rem 0;padding-left:1.2rem}
.rb-form .ib-fout,.rb-form .or-info{margin:0}
.rb-voorstel{margin:.2rem 0 0;align-self:end}
.rb-wijziging{margin:0 0 .75rem;padding:.6rem .9rem;border-left:4px solid var(--kraft-hout);background:#FBF1E4;border-radius:4px}
.rb-wijziging p{margin:.1rem 0}
.rb-wijziging.rb-w-in_exact{border-left-color:var(--bpc);background:var(--bpc-licht)}
.rb-wijziging.rb-w-fout{border-left-color:#A63D32;background:#F4DEDB}
.rb-knoppen{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.35rem!important}
.badge.rb-w-wacht,.badge.rb-w-bezig{background:#F6E9D7;color:#7A5426}
.badge.rb-w-in_exact{background:var(--bpc-licht);color:var(--bpc)}
.badge.rb-w-fout{background:#F4DEDB;color:#A63D32}
.ib-fiche{color:inherit;text-decoration:none}
.ib-fiche:hover b{color:var(--kraft-donker);text-decoration:underline}
.ib-nieuwcontact{margin-left:.4rem}
@media (max-width:640px){ .rb-kop .knop{margin-left:0} .rb-datum{min-width:0} }
/* Klantenportaal (/beheer): keuze Accounts / Activiteit bovenaan */
.kp-sub{display:inline-flex;margin:0 0 1rem}

/* Mailen vanuit het portaal (stap 2): opstelvenster (mail-opstellen.js), knoppen in het gesprek */
.mo-dialoog{width:min(56rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);padding:0;border:1px solid var(--lijn);border-top:4px solid var(--inkt);border-radius:6px;
  background:#fff;color:var(--tekst);box-shadow:0 18px 40px rgba(29,29,27,.28)}
.mo-dialoog::backdrop{background:rgba(29,29,27,.45)}
.mo-dialoog.mo-slepen{outline:3px dashed var(--kraft-hout);outline-offset:-8px}
.mo-form{display:grid;gap:.7rem;padding:1rem 1.25rem 1.1rem}
.mo-kop{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.mo-kop h2{margin:0;font-size:1.35rem}
.mo-sluit{border:0;background:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--grijs);padding:.1rem .4rem}
.mo-sluit:hover{color:var(--inkt)}
.mo-over{margin:-.35rem 0 0}
.mo-velden{display:grid;gap:.4rem}
.mo-rij{display:grid;grid-template-columns:6.5rem 1fr;align-items:center;gap:.6rem;font-weight:600;font-size:.9rem}
.mo-rij[hidden]{display:none}
.mo-rij input,.mo-rij select{padding:.5rem .65rem;font-size:.95rem}
.mo-rij select{font:inherit;border:1px solid var(--lijn);border-radius:6px;background:#fff;color:var(--inkt);justify-self:start}
.mo-van{font-weight:400}
.mo-adres{position:relative;display:block;font-weight:400}
.mo-voorstel{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:30;list-style:none;margin:0;padding:.25rem;max-height:20rem;overflow:auto;
  background:#fff;border:1px solid var(--lijn);border-top:3px solid var(--inkt);border-radius:6px;box-shadow:0 14px 32px rgba(29,29,27,.18)}
.mo-voorstel[hidden]{display:none}
.mo-voorstel li{display:grid;grid-template-columns:auto 1fr;gap:0 .5rem;padding:.4rem .6rem;border-left:3px solid transparent;border-radius:4px;cursor:pointer}
.mo-voorstel li.actief,.mo-voorstel li:hover{background:var(--mist);border-left-color:var(--kraft-hout)}
.mo-vs-naam{font-weight:650;color:var(--inkt)}
.mo-vs-mail{color:var(--grijs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-vs-org{grid-column:1/-1;font-size:.8rem;color:var(--kraft-donker)}
.mo-contacten{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin-left:7.1rem}
.mo-contacten[hidden]{display:none}
.mo-bcc-knop{margin:0 0 0 7.1rem}
.mo-bcc-knop[hidden]{display:none}
.mo-werkbalk{display:flex;flex-wrap:wrap;gap:.3rem;padding:.35rem;border:1px solid var(--lijn);border-bottom:0;border-radius:6px 6px 0 0;background:var(--mist);margin-bottom:-.7rem}
.mo-werkbalk button{font:inherit;font-size:.85rem;padding:.3rem .6rem;border:1px solid var(--lijn);border-radius:4px;background:#fff;color:var(--inkt);cursor:pointer;min-width:2.1rem}
.mo-werkbalk button:hover{border-color:var(--kraft-hout);color:var(--kraft-donker)}
.mo-tekst{min-height:12rem;max-height:45vh;overflow:auto;padding:.7rem .85rem;border:1px solid var(--lijn);border-radius:0 0 6px 6px;background:#fff;
  font:14px/1.5 Arial,Helvetica,sans-serif;color:#1D1D1B;overflow-wrap:anywhere}
.mo-tekst:focus{outline:2px solid var(--kraft-hout);outline-offset:-1px}
.mo-tekst p{margin:0 0 .6em}
.mo-tekst a{color:#336029}
.mo-tekst img{max-width:100%;height:auto}
.mo-tekst table{border-collapse:collapse;margin:.4em 0}
.mo-tekst td,.mo-tekst th{min-width:2em;vertical-align:top}
.mo-handtekening{padding:.5rem .85rem;border-left:3px solid var(--lijn);font:13px/1.5 Arial,Helvetica,sans-serif;color:#1D1D1B}
.mo-handtekening .mo-logo{display:block;width:140px;height:auto;margin:.5rem 0 .4rem}
.mo-hregels{border-top:3px solid #B8895A;padding-top:5px;font-size:12px;color:#5F5A52}
.mo-hform{display:grid;gap:.3rem;font:600 .88rem/1.4 "Archivo","Helvetica Neue",Arial,sans-serif}
.mo-hform textarea{font:13px/1.5 Arial,Helvetica,sans-serif;padding:.5rem;border:1px solid var(--lijn);border-radius:6px}
.mo-citaat{margin:-.2rem 0 0}
.mo-bijlagen{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem}
.mo-bijlagen ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;flex:1 1 100%}
.mo-bijlagen ul:empty{display:none}
.mo-bijlagen li{display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:baseline}
.mo-bijlage-knop{cursor:pointer}
.mo-acties{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center}
.mo-form .melding:empty{display:none}
.mo-toast{position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%);z-index:100;max-width:calc(100vw - 2rem);padding:.75rem 1.1rem;
  background:var(--inkt);color:#fff;border-radius:6px;box-shadow:0 10px 24px rgba(29,29,27,.3);font-weight:600}
.mo-toast[hidden]{display:none}
.ib-antwoord{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.ib-gesprek-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem}
.ib-via{color:var(--bpc);font-weight:600}
@media (max-width:640px){
  .mo-dialoog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0}
  .mo-form{padding:.8rem 16px 1rem}
  .mo-rij{grid-template-columns:1fr;gap:.2rem}
  .mo-contacten,.mo-bcc-knop{margin-left:0}
}
/* Prijsafspraken (Relatiebeheer → klantfiche; orderscherm) */
.pa-sectie .rb-tabel{min-width:34rem}
.pa-tabel td>span.klein{display:block}
.pa-code{display:inline-block;margin:0 .25rem .2rem 0;padding:.05rem .45rem;border:1px solid var(--lijn);border-radius:3px;background:#fff;font-size:.85rem;font-weight:600}
.pa-acties{white-space:nowrap;text-align:right}
.pa-acties .link+.link{margin-left:.6rem}
.pa-form{display:grid;gap:.8rem;margin:.4rem 0 .8rem;padding:.9rem 1rem;border:1px solid var(--lijn);border-left:4px solid var(--kraft-hout);border-radius:6px;background:#FCFBF8}
.pa-form>label,.pa-tekst{display:grid;gap:.3rem;font-weight:600}
.pa-form select,.pa-form input:not([type=radio]):not([type=checkbox]),.pa-tekst textarea{font:inherit;font-weight:400;padding:.55rem .7rem;border:1px solid var(--lijn);border-radius:4px;background:#fff;color:var(--inkt);max-width:100%}
.pa-form select{max-width:22rem}
#paPrijs,#paKorting{max-width:10rem}
.pa-form>label.vinkje{display:flex;align-items:center;gap:.5rem;font-weight:400}
.pa-form label .klein,.pa-tekst .klein{font-weight:400}
.pa-label{font-weight:600}
.pa-artikels{display:grid;gap:.4rem}
.pa-chip{padding-right:.1rem}
.pa-vorm{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}
.pa-vorm legend{padding:0;margin-bottom:.3rem}
.pa-tekst{margin-top:.8rem}
.pa-tekst textarea{width:100%;resize:vertical}
.pa-historie{margin-top:.8rem}
.pa-historie summary{cursor:pointer}
.or-afspraken{margin:0 0 1rem;padding:.7rem 1rem;background:var(--bpc-licht);border-left:4px solid var(--bpc);border-radius:4px;color:var(--inkt)}
.or-afspraken p{margin:.15rem 0}
.or-afspraken ul{margin:.3rem 0;padding-left:1.2rem}
.or-afspraken-tekst{white-space:pre-line}
.or-afspraak{font-weight:600;color:var(--bpc)}
.or-afspraak.afwijkend{color:var(--kraft-donker)}
.or-korting{width:4rem}
.or-korting-veld{white-space:nowrap}

/* Orders, stap 4: goedkeuring door de besteller en orderbevestiging sturen */
.or-besteller{margin:0 0 1rem;border-left:4px solid var(--kraft-hout)}
.or-besteller.or-te-doen{border-left-color:#A63D32}
.or-besteller h3{margin:0 0 .5rem}
.or-besteller>p{margin:.3rem 0}
.or-besteller .acties{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.75rem}
.or-antwoord{margin:.6rem 0;padding:.6rem .8rem;background:var(--mist);border-left:3px solid var(--lijn);border-radius:4px}
.or-antwoord.nieuw{border-left-color:#A63D32;background:#FBF1E4}
.or-antwoord p{margin:0}
.or-antwoord-tekst{margin-top:.35rem!important;white-space:pre-wrap;font-size:.92rem;color:var(--inkt)}
.badge.or-vs-akkoord{background:var(--bpc-licht);color:var(--bpc)}
.badge.or-vs-aanpassing{background:#FBE7E4;color:#A63D32}
.badge.or-vs-onduidelijk{background:var(--mist);color:var(--grijs)}
.badge.or-actie{background:#FBF1E4;color:var(--kraft-donker);border:1px solid var(--kraft-hout)}
.or-beslis{display:grid;gap:.6rem;margin-top:.75rem;padding:.8rem 1rem;background:var(--mist);border:1px solid var(--lijn);border-radius:6px}
.or-beslis label:not(.vinkje){display:grid;gap:.25rem;font-weight:600;font-size:.9rem}
.or-beslis select,.or-beslis textarea{font:inherit;padding:.5rem .65rem;border:1px solid var(--lijn);border-radius:6px;background:#fff}
.or-beslis .acties{display:flex;gap:.6rem;align-items:center}
.or-beslis .melding:empty{display:none}
.or-bevestiging{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:-.5rem 0 1rem;padding:.6rem 1rem;background:#fff;border:1px solid var(--lijn);border-radius:6px}
/* Bestellingen in voorbereiding (tabblad Bestellingen): nog niet bevestigde orders en waarop we wachten */
.voorbereiding{margin:0 0 1.75rem}
.voorbereiding[hidden]{display:none}
.voorbereiding h2{font-size:1.25rem;margin:0 0 .25rem}
.voorbereiding>.stil{margin:0 0 .9rem;max-width:52em}
.vb-melding{display:inline-block;margin:0 0 .9rem;padding:.4rem .75rem;background:#F6E9D7;color:#7A5426;font-weight:650;border-radius:4px}
.order.vb{border-left-color:var(--kraft-hout)}
.order.vb.vb-actie{border-left-color:#C77A1E}
.order.vb.vb-verwerking{border-left-color:var(--bpc)}
.vo-status.vb-actie{background:#F6E9D7;color:#7A5426}
.vo-status.vb-bpc{background:#E3ECF6;color:#2B5A88}
.vo-status.vb-verwerking{background:var(--bpc-licht);color:var(--bpc)}
.vb-testlabel{display:inline-block;margin-top:.3rem;font-size:.78rem;font-weight:650;padding:.1rem .5rem;border-radius:99px;background:var(--vlak);color:var(--grijs)}
.vb-wacht{margin-top:.9rem;padding:.85rem 1rem;background:var(--mist);border-radius:6px}
.vb-vraag{margin:0 0 .55rem;font-weight:750;color:var(--inkt)}
.vb-stappen{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.vb-stappen>li{position:relative;padding-left:2rem;display:grid;gap:.1rem;justify-items:start}
.vb-stappen>li::before{content:"";position:absolute;left:0;top:.05rem;width:1.3rem;height:1.3rem;border-radius:50%;box-sizing:border-box;
  border:2px solid var(--lijn);background:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:800;line-height:1.1rem;text-align:center}
.vb-stappen>li.klaar::before{content:"✓";background:var(--bpc);border-color:var(--bpc);color:#fff}
.vb-stappen>li.actie::before{content:"!";background:#C77A1E;border-color:#C77A1E;color:#fff}
.vb-stappen>li.bpc::before{content:"…";border-color:#2B5A88;color:#2B5A88;line-height:.8rem}
.vb-stappen>li.volgt{color:var(--grijs)}
.vb-stappen>li.klaar .vb-titel{color:var(--grijs)}
.vb-titel{font-weight:650;color:var(--inkt)}
.vb-uitleg{font-size:.92rem;color:var(--grijs)}
.vb-stappen>li.actie .vb-uitleg{color:#7A5426;font-weight:600}
.vb-stappen .knop{margin-top:.3rem}
.vb-opmerking{margin:.75rem 0 0;font-size:.92rem}
.vb-artikels{margin-top:.75rem}
.vb-artikels>summary{cursor:pointer;color:var(--kraft-donker);font-weight:600;list-style:none}
.vb-artikels>summary::-webkit-details-marker{display:none}
.vb-artikels .verberg,.vb-artikels[open] .toon{display:none}
.vb-artikels[open] .verberg{display:inline}
.vb-blokken{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.7rem}
.vb-blokkop{font-size:.85rem;font-weight:700;color:var(--kraft-donker);text-transform:uppercase;letter-spacing:.03em}
.vb-blok ul{list-style:none;margin:.25rem 0 0;padding:0;display:grid;gap:.3rem}
.vb-blok li{display:flex;flex-wrap:wrap;gap:.1rem .6rem;align-items:baseline;padding:.35rem 0;border-bottom:1px solid var(--lijn)}
.vb-blok li .code{font-size:.85rem;color:var(--grijs)}
.vb-aantal{margin-left:auto;font-weight:650;font-variant-numeric:tabular-nums}
.vb-bevestigd-titel{font-size:1.25rem;margin:0 0 .6rem}
.vb-bevestigd-titel[hidden]{display:none}

/* Orders: verplichte velden om in te dienen (PO, leverdatum) */
.or-verplicht{color:#A63D32;font-weight:700}

/* Relatiebeheer: ontvangers van de dagmail per klant */
.rb-dagmail{margin:.9rem 0;padding:.8rem 1rem;background:var(--mist);border:1px solid var(--lijn);border-radius:6px}
.rb-dagmail-kop{margin:0 0 .4rem}
.rb-dagmail-lijst{list-style:none;margin:0 0 .6rem;padding:0;display:grid;gap:.2rem}
.rb-dagmail-lijst .vinkje{margin:0}
.rb-dagmail-extra{display:grid;gap:.25rem;font-weight:600;font-size:.9rem;margin-bottom:.4rem}
.rb-dagmail .acties{display:flex;gap:.6rem;align-items:center}

/* Orders: klanttype (Grossier / Grossier mandaat) ontbreekt */
.or-klanttype{margin:0 0 1rem;padding:.7rem 1rem;background:#FBE7E4;border-left:4px solid #A63D32;border-radius:4px;color:var(--inkt)}
.or-klanttype p{margin:0 0 .5rem}
.or-klanttype .acties{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.or-klanttype select{font:inherit;padding:.45rem .6rem;border:1px solid var(--lijn);border-radius:6px;background:#fff}
/* Proeven: controle van het clichénummer tegen Exact */
.pd-exact-waarsch{border-left:3px solid #A63D32;background:#FBEDEA;padding:.5rem .8rem;margin:.4rem 0;color:var(--inkt);border-radius:2px}
.pd-exact-waarsch p{margin:.2rem 0}
.pb-controle{margin:.2rem 0 .5rem;padding-left:1.2rem}
/* Proeven: stappen van een clichédossier, formaten kiezen, bronbestanden en briefing aan IPG */
.pd-stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.4rem;list-style:none;padding:0;margin:.6rem 0 1rem;counter-reset:stap}
.pd-stappen li{counter-increment:stap;background:#fff;border:1px solid var(--lijn);border-top:3px solid #D6D0C4;padding:.45rem .6rem;display:flex;flex-direction:column;gap:.1rem}
.pd-stappen li::before{content:counter(stap);font-size:.75rem;font-weight:700;color:var(--grijs)}
.pd-stappen li.klaar{border-top-color:var(--bpc)}
.pd-stappen li.klaar::before{content:counter(stap) " ✓";color:var(--bpc)}
.pd-voorb{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1rem;margin-bottom:.5rem}
.pd-voorb-blok{background:#fff;border:1px solid var(--lijn);padding:.6rem .9rem .8rem}
.pd-voorb-blok .pd-sub{margin-top:0}
.pd-bron{list-style:none;padding:0;margin:.2rem 0 .5rem}
.pd-bron li{padding:.2rem 0;border-bottom:1px solid var(--lijn)}
.pd-bron-op{cursor:pointer;display:inline-block;margin:.2rem 0}
.pd-ok-tekst{color:var(--bpc);font-weight:600}
.pd-kies-rij{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;border-bottom:1px solid var(--lijn);padding:.4rem 0}
.pd-kies-rij label{flex:1 1 10rem}
.pd-kies-rij .kies-banen-l{flex:0 1 7rem}
/* Proeven: contactpersonen uit Exact als voorstel bij de ontvangers */
.pb-contacten{margin:.6rem 0}
.pb-contacten ul{list-style:none;padding:0;margin:.2rem 0;display:flex;flex-direction:column;gap:.25rem}
.pb-contacten li{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}

/* Relatiebeheer: leveranciers (13 okt 2026) */
.badge.rb-lev{background:#EFE4D6;border:1px solid var(--kraft);color:#8A5F33}
.rb-lev-lijst{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.35rem}
.rb-lev-lijst li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem .8rem;padding:.35rem 0;border-bottom:1px dashed var(--lijn)}
.rb-lev-lijst li:last-child{border-bottom:0}
#rbLevZoek{width:100%;max-width:32rem}
/* Relatiebeheer: hoofdcontactpersoon en dubbels samenvoegen (13 okt 2026) */
.badge.rb-hoofd{background:var(--bpc-licht);border:1px solid var(--bpc);color:var(--bpc)}
.rb-dubbel{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem}
.rb-samen{margin:0 0 1rem;border:2px solid var(--kraft)}
.rb-samen h4{margin:0 0 .3rem}
.rb-samen td:nth-child(-n+2){width:3.5rem;text-align:center}
.rb-samen tr:not(.rb-samen-aan) td{color:var(--grijs)}
.rb-samen-aan td{background:#FBF1E4}
.rb-samen .or-raster label{display:flex;flex-direction:column;gap:.2rem}
.rb-samen-waarde{padding:.4rem 0;font-weight:600}
.rb-samen-uitleg{margin:.6rem 0;padding-left:1.2rem}
.rb-samen-uitleg li{margin:.15rem 0}

/* Orders → Dashboard (13 okt 2026): kerncijfers, bestelwaarde per soort, top 5 klanten */
.or-dash-periode label{display:inline-flex;align-items:center;gap:.4rem}
.or-dash-periode input[type=date]{padding:.35rem .5rem;border:1px solid var(--lijn);border-radius:4px;font:inherit;background:#fff}
.or-dash-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;margin:1rem 0}
.or-dash-kpi .statuskaart{margin:0;display:flex;flex-direction:column;gap:.25rem}
.or-dash-kpi span{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--grijs)}
.or-dash-kpi b{font-size:1.9rem;font-weight:800;font-stretch:110%;color:var(--inkt);font-variant-numeric:tabular-nums}
.or-dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:.75rem;align-items:start}
.or-dash-grid .statuskaart{margin:0}
.or-dash-grid h3{margin:0 0 .75rem}
.or-dash-rij{margin:.6rem 0}
.or-dash-tekst{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.75rem;align-items:baseline}
.or-dash-tekst>span:first-child{overflow-wrap:anywhere;line-height:1.3}
.or-dash-tekst>span:last-child{white-space:nowrap;text-align:right}
.or-dash-tekst b{font-variant-numeric:tabular-nums}
.or-dash-balk{height:8px;background:var(--mist);border-radius:4px;overflow:hidden;margin-top:.3rem}
.or-dash-balk i{display:block;height:100%;background:var(--bpc);border-radius:4px}
.or-dash-top{list-style:none;margin:0;padding:0;counter-reset:top}
.or-dash-top li{counter-increment:top;display:grid;grid-template-columns:1.4rem minmax(0,1fr);align-items:start}
.or-dash-top li::before{content:counter(top);font-weight:800;color:var(--kraft-donker);line-height:1.3;margin-top:.6rem}
.or-dash-top a{color:var(--inkt);font-weight:600}
@media (max-width:480px){.or-dash-tekst{grid-template-columns:1fr}.or-dash-tekst>span:last-child{text-align:left}}

/* Orders → blok nieuwe druk: nieuw clichénummer of extra formaat op een bestaand cliché (13 okt 2026) */
.or-proefkeuze{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-top:.5rem}
.or-proefkeuze .or-bestaand-nr{width:9rem;padding:.45rem .6rem;border:1px solid var(--lijn);border-radius:4px;font:inherit;background:#fff}
/* Proeven: formaten als tabel met details eronder, knoppen Formaten toevoegen / Proeven opladen (13 okt 2026) */
.pd-fkop{display:flex;justify-content:space-between;align-items:flex-end;gap:.75rem;flex-wrap:wrap;margin-top:1.4rem}
.pd-fkop .pd-sub{margin:0}
.pd-fknoppen{display:flex;gap:.5rem;flex-wrap:wrap}
.pd-fpaneel{margin:.6rem 0}
.pf-overzicht{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--lijn);margin:.6rem 0}
.pf-overzicht th{text-align:left;font-size:.75rem;font-weight:600;color:var(--grijs);padding:.5rem .7rem;border-bottom:2px solid var(--kraft);white-space:nowrap}
.pf-overzicht td{padding:.55rem .7rem;border-bottom:1px solid var(--lijn);vertical-align:top}
.pf-overzicht td span.klein{display:block}
.pf-overzicht .getal{text-align:right;white-space:nowrap}
.pf-overzicht .badge{margin-left:0}
.pf-rij{cursor:pointer}
.pf-rij:hover td{background:#FBF8F2}
.pf-rij.gekozen td{background:var(--bpc-licht)}
.pf-rij.gekozen td:first-child{box-shadow:inset 4px 0 0 var(--bpc)}
.pd-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1.25rem;align-items:start;background:#fff;border:1px solid var(--lijn);padding:1rem;margin-bottom:1rem}
.pd-detail .pdf-kader:empty{display:none}
@media (max-width:900px){.pd-detail{grid-template-columns:1fr}}
.pd-ipg-datums{margin-top:.7rem}
.pd-detail.zonder-pdf{grid-template-columns:1fr}
.pd-detail.zonder-pdf .pd-detail-info{max-width:44rem}
/* Koppeling proefdossier ↔ orders (13 okt 2026) */
.pd-orderblok{background:#fff;border:1px solid var(--lijn);border-left:4px solid var(--kraft);padding:.7rem 1rem;margin:.8rem 0}
.pd-orderkop{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.pd-orderkop .pd-sub{margin:0}
.pd-orderkop .tel{display:inline-block;min-width:1.4em;text-align:center;font-size:.75rem;background:var(--kraft);color:#fff;border-radius:999px;padding:0 .4em;margin-left:.3rem}
.pd-ordertabel{margin:.6rem 0 0}
.or-proefkop{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 .8rem}
.or-proefkaart{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;padding:.5rem .8rem;background:#fff;border:1px solid var(--lijn);border-left:4px solid var(--kraft);color:var(--inkt);text-decoration:none}
.or-proefkaart:hover{border-color:var(--kraft)}
.or-proefkaart.klaar{border-left-color:var(--bpc)}
.or-proefkaart .stil{flex-basis:100%}
/* Orders: cliché zoeken (lijst onder het veld) */
label:has(> .or-czoek-veld),.or-proefkeuze{position:relative}
.or-czoek{position:absolute;z-index:30;left:0;right:0;top:100%;min-width:22rem;max-height:20rem;overflow:auto;list-style:none;margin:2px 0 0;padding:.2rem 0;background:#fff;border:1px solid var(--lijn);box-shadow:0 6px 18px rgba(0,0,0,.12);font-weight:400}
.or-czoek li{padding:.4rem .7rem;cursor:pointer;font-size:.9rem;line-height:1.35}
.or-czoek li.actief,.or-czoek li[data-czoek]:hover{background:var(--bpc-licht)}
.or-proefkeuze .or-czoek{left:auto;right:0;width:min(30rem,90vw)}

/* Proeven: klaargezet (opgeladen, nog niet naar de klant), knop per formaat minder opvallend, opmerking aan IPG (13 okt 2026) */
.pd-klaar-badge{display:inline-block;font-size:.75rem;font-weight:700;padding:.1rem .45rem;border:1px dashed #8A5F33;color:#8A5F33;background:#FBF1E4;white-space:nowrap}
.pd-klaar-info{margin:.6rem 0 0;padding:.55rem .8rem;background:#FBF1E4;border-left:4px solid #B8895A;font-size:.9rem}
.pd-actie.pd-actie-stil{border-style:dashed;background:transparent}
.pd-actie.pd-actie-stil>summary{font-weight:500;font-size:.85rem;color:#67625A}
.pd-ipg-corr{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid #E2DDD3}
.pd-ipg-corr .pd-sub{font-size:.95rem;margin:0 0 .4rem}
.pd-nota{display:block;margin-top:.2rem;font-size:.8rem;font-style:italic;color:#67625A}

/* Inbox → Bestaande order koppelen (13 okt 2026) */
.ib-orderzoek{display:flex;gap:.5rem;align-items:center}
.ib-orderzoek input{flex:1;min-width:0}
.ib-orders{list-style:none;margin:.4rem 0;padding:0;display:grid;gap:.35rem}
.ib-orders li{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.4rem .6rem;border:1px solid var(--lijn);border-radius:4px;background:#fff;font-size:.88rem}

/* Orders → overzicht: eindklant en orderwaarde op de tegel (13 okt 2026) */
.or-eindklant{color:var(--grijs);font-size:.9rem;margin-left:.25rem}
.or-eindklant b{color:var(--inkt);font-weight:600}
.or-waarde{font-weight:800;font-variant-numeric:tabular-nums;color:var(--inkt);margin-right:.5rem;white-space:nowrap}
.or-tegel .ib-wie{white-space:normal}
.or-tegel .ib-meta{flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;row-gap:.3rem}
@keyframes pd-flits{from{background:#E4EDDF}to{background:transparent}}
.melding.pd-flits{animation:pd-flits 2.5s ease-out;padding:.3rem .5rem}
.pd-weg-formaat{margin:.6rem 0 0}
.pd-versies-rijen input[name^=vfnota]{min-width:12rem}

/* Klantenportaal → Accounts per klant: kopregel per klant, de accounts (personen) eronder ingesprongen */
.accounts tr.klant-kop td{background:var(--mist);padding:.85rem .8rem .55rem;border-bottom:1px solid var(--lijn);border-top:2px solid var(--inkt)}
.accounts tbody tr.klant-kop:first-child td{border-top:0}
.klant-kop .kk-naam{display:block;font-weight:750;font-size:1rem;color:var(--inkt)}
.klant-kop .kk-naam a{color:var(--inkt);text-decoration:none;border-bottom:1px solid var(--lijn)}
.klant-kop .kk-naam a:hover{border-bottom-color:var(--inkt)}
.accounts td.acc-persoon{padding-left:1.6rem}
@media (max-width:760px){
  .accounts tr.klant-kop,.accounts tr.klant-kop td{display:block}
  .accounts td.acc-persoon{padding-left:.6rem}
}

/* Orders → toeslagen per regel: compacte chips (13 okt 2026) */
.or-ts-rij td{padding-top:0!important;border-top:0!important}
.or-ts-rij:has(.or-c-toeslagen:empty){display:none}
.or-c-toeslagen{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem;padding:.35rem .5rem;margin-bottom:.3rem;background:var(--mist);border-radius:4px}
.or-c-toeslagen .or-pr-l{padding-top:0}
.or-ts-lijst{display:flex;flex-wrap:wrap;gap:.25rem .3rem}
.or-c-toeslagen label.or-ts{display:inline-flex;align-items:center;gap:.3rem;margin:0;padding:.12rem .5rem;border:1px solid var(--lijn);border-radius:999px;background:#fff;
  font-size:.76rem;font-weight:500;line-height:1.35;color:var(--grijs);cursor:pointer;white-space:nowrap;position:relative}
.or-c-toeslagen label.or-ts input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.or-c-toeslagen label.or-ts b{font-weight:600;color:inherit}
.or-c-toeslagen label.or-ts:hover{border-color:var(--kraft-hout)}
.or-c-toeslagen label.or-ts:focus-within{outline:2px solid var(--kraft-hout);outline-offset:1px}
.or-c-toeslagen label.or-ts.aan{background:var(--bpc-licht);border-color:var(--bpc);color:var(--bpc-donker)}
.or-c-toeslagen label.or-ts.aan::before{content:"✓";font-weight:700}
.or-c-toeslagen label.or-ts:has(input:disabled){cursor:default;opacity:.8}
.or-ts-melding{flex-basis:100%;margin:0;line-height:1.45}
.or-ts-prijs{display:block;white-space:nowrap;color:var(--bpc-donker)}
.or-ts-hint{display:block;white-space:nowrap}

/* Opstelvenster: knop "Vertaal naar het Frans" (enkel als IPG een ontvanger is, 13 okt 2026) */
.mo-werkbalk button[hidden]{display:none}
.mo-werkbalk .mo-vertaal{margin-left:auto;border-color:var(--bpc);color:var(--bpc-donker);font-weight:600}

/* Privacyverklaring: bij privacy#cookies of #recaptcha valt de titel niet onder de vaste kopbalk (13 okt 2026) */
.privacy h2[id] { scroll-margin-top: 6rem; }

/* Proeven: kleuren en artikels van de proef (uit het stempel van IPG, 13 okt 2026) */
.pd-kleuren:empty{display:none}
.pd-kleuren{background:#fff;border:1px solid var(--lijn);padding:1rem;margin:-.25rem 0 1rem}
.pd-kleuren .pd-sub{margin-top:0}
.pd-kl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,16rem);gap:1rem;align-items:start}
@media (max-width:700px){.pd-kl{grid-template-columns:1fr}}
.pd-kl-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.35rem 0}
.pd-kl-chip{font-weight:600}
.pd-kl-bron{margin:0}
.pd-kl-foto img{display:block;max-width:100%;max-height:16rem;border:1px solid var(--lijn);background:#fff}
.pd-kl-foto .link{padding:0}
.pd-kl-edit{margin-top:.5rem}
.pd-kl-velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.4rem;margin:.4rem 0}
.pd-kl-sub{font-size:.95rem;margin:1rem 0 .3rem}
.pd-kl-tabel td{vertical-align:top}
.pd-kl-tabel td b + .stil{display:block}
.pd-kl-tabel select{max-width:14rem}
.pd-kl-mini{width:3.5rem;height:3.5rem;object-fit:contain;border:1px solid var(--lijn);background:#fff}
.pd-kl-vg{display:inline-block;font-size:.75rem;font-weight:700;padding:.1rem .45rem;white-space:nowrap;border:1px solid}
.pd-kl-ok{color:#336029;border-color:#336029;background:#EEF4EC}
.pd-kl-let{color:#8A5F33;border-color:#8A5F33;background:#FBF1E4}
.pd-kl-fout{color:#A12A1C;border-color:#A12A1C;background:#FBEDEA}
.pf-overzicht .pd-kl-cel{max-width:14rem}
.pd-kl-chip{cursor:pointer;font:inherit;border:1px solid var(--lijn)}
.pd-kl-chip:hover{border-color:#8A5F33}
.pd-kl-chip .pd-kl-kop{color:#8A5F33}
.pd-kl-chip.gekopieerd,.pd-kl-chips .link.gekopieerd{background:#EEF4EC;border-color:#336029}
.pd-kl-chip.gekopieerd .pd-kl-kop::after{content:" gekopieerd";font-size:.75rem;color:#336029}
/* HDPE: aankoop bij Vas és Tàrsai in het orderscherm (orders.js hdpeHtml, 14 okt 2026) */
.or-hdpe{margin:.6rem 0 .9rem;padding:.75rem 1rem;background:#fff;border:1px solid var(--lijn);border-left:4px solid var(--kraft-hout)}
.or-hdpe>p{margin:0 0 .6rem}
.or-hdpe-stappen{list-style:none;margin:0;padding:0;counter-reset:hs;display:grid;gap:.55rem}
.or-hdpe-stappen>li{counter-increment:hs;display:grid;grid-template-columns:1.6rem 11rem 1fr;gap:.2rem .6rem;align-items:start;color:var(--grijs)}
.or-hdpe-stappen>li::before{content:counter(hs);width:1.35rem;height:1.35rem;border-radius:50%;border:1px solid var(--lijn);display:grid;place-items:center;font-size:.75rem;font-weight:700}
.or-hdpe-stappen>li.nu{color:var(--tekst)}
.or-hdpe-stappen>li.nu::before{background:var(--kraft-hout);border-color:var(--kraft-donker);color:#fff}
.or-hdpe-stappen>li.klaar{color:var(--tekst)}
.or-hdpe-stappen>li.klaar::before{content:"✓";background:var(--bpc);border-color:var(--bpc);color:#fff}
.or-hdpe-stappen>li>b{padding-top:.1rem}
.or-hdpe-stappen>li>div{font-size:.9rem;line-height:1.5}
.or-hdpe-stappen>li>div .knop{margin:0 .5rem .2rem 0}
.or-hdpe-lever{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem;margin:.35rem 0 0;font-weight:400}
.or-hdpe-lever input{width:auto;max-width:11rem;padding:.3rem .5rem}
.or-vas{background:var(--mist);margin:-.15rem -.3rem .3rem;padding:.25rem .3rem}
.or-vas .or-prijs{max-width:6.5rem}
.or-aankoop{border-left:4px solid var(--kraft-hout)}
.or-aankoop-groep{display:contents}
@media (max-width:700px){.or-hdpe-stappen>li{grid-template-columns:1.6rem 1fr}.or-hdpe-stappen>li>div{grid-column:2}}
/* HDPE: offertes van Vas in het orderscherm (orders.js offertesHtml, 14 okt 2026) */
.or-hdpe-offertes{margin-top:.5rem;display:grid;gap:.5rem}
.or-offerte{border:1px solid var(--lijn);border-left:4px solid var(--lijn);padding:.5rem .7rem;background:var(--mist)}
.or-offerte.past{border-left-color:var(--bpc)}
.or-offerte>p{margin:0 0 .35rem}
.or-offerte-gegevens{display:grid;grid-template-columns:max-content 1fr;gap:.1rem .8rem;margin:0 0 .4rem;font-size:.85rem}
.or-offerte-gegevens dt{color:var(--grijs)}
.or-offerte-gegevens dd{margin:0}
.or-offerte-optie{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem;margin:.25rem 0}
/* Aanpassing gevraagd: vraag van de klant + knop naar IPG (14 okt 2026) */
.pd-aanpassing p,.pd-bestel p{margin:.2rem 0}
.pd-aanpassing blockquote{margin:.35rem 0;padding:.4rem .7rem;background:#fff;border-left:3px solid #B8895A;font-weight:400;white-space:pre-wrap}

/* Orders: automatisch bewaren (14 okt 2026) – stand naast de knoppen */
.or-bewaard{margin-left:auto;align-self:center}
.or-bewaard.fout{color:#B42318;font-weight:600}

/* AI in de Inbox en het orderscherm (14 okt 2026): soort + samenvatting, voorstel van de AI om na te kijken */
.ib-ai{margin:.35rem 0 .1rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:baseline;line-height:1.45}
.ib-ai-soort{display:inline-block;padding:.05rem .45rem;border:1px solid #B8895A;color:#8A5F33;background:#F5F3EE;font-weight:600;font-size:.78rem;white-space:nowrap}
.ib-ai-bestelling,.ib-ai-wijziging{border-color:#336029;color:#336029;background:#E8F0E5}
.ib-ai-leveringsvraag,.ib-ai-klacht{border-color:#1D1D1B;color:#1D1D1B;background:#fff}
.ib-ai-andere{border-color:#ccc;color:#777;background:#fafafa}
.ib-ai-knop{margin-left:.25rem}
.or-ai-kop,.mo-ai{background:#F5F3EE;border-left:4px solid #B8895A;padding:.6rem .9rem;margin:.6rem 0}
.or-ai-kop p{margin:.15rem 0}.or-ai-kop ul{margin:.3rem 0 0;padding-left:1.2rem}
.or-ai{display:block;color:#8A5F33;margin-top:.15rem}
.mo-ai{margin:0 0 .6rem}

/* Mailen vanuit het proefdossier (14 okt 2026) */
.pd-links-kop .pd-mailknoppen{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-bottom:.4rem}
.tl-item .pd-mailknoppen,.pd-knoppen.pd-mailknoppen{margin-top:.4rem}
/* HDPE: orderlijst van Vas nakijken (vas-controle-venster.js, 14 okt 2026) */
.ib-vas{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin:.4rem 0;padding:.45rem .7rem;background:var(--mist);border-left:4px solid var(--kraft-hout);font-size:.9rem}
.ib-vas .knop{margin-left:auto}
.vc-dialoog{width:min(60rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);padding:0;border:1px solid var(--lijn);border-top:4px solid var(--inkt);border-radius:6px;background:var(--papier,#fff);color:var(--tekst)}
.vc-dialoog::backdrop{background:rgba(29,29,27,.45)}
.vc-kop{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--lijn);position:sticky;top:0;background:inherit;z-index:1}
.vc-kop h2{margin:0;font-size:1.15rem}
.vc-inhoud{padding:.8rem 1.1rem 1.1rem}
.vc-oordeel{margin:.6rem 0;padding:.6rem .8rem;font-weight:700;border-left:5px solid var(--lijn)}
.vc-oordeel.ok,.vc-al.ok{background:var(--bpc-licht);border-left-color:var(--bpc)}
.vc-oordeel.let,.vc-al.let{background:#FBF3E6;border-left-color:var(--kraft-hout)}
.vc-oordeel.fout{background:#FBEAE8;border-left-color:#B42318;color:#7A1A12}
.vc-al{margin:.4rem 0;padding:.4rem .7rem;border-left:4px solid var(--lijn);font-size:.9rem}
.vc-regel{margin:.8rem 0;padding:.6rem .8rem;border:1px solid var(--lijn);border-left:4px solid var(--lijn)}
.vc-regel.ok{border-left-color:var(--bpc)}.vc-regel.let{border-left-color:var(--kraft-hout)}.vc-regel.fout{border-left-color:#B42318}
.vc-regel h3{margin:0 0 .4rem;font-size:1rem}
.vc-punten{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.vc-punten li{display:grid;grid-template-columns:1.3rem 7.5rem 1fr auto;gap:.2rem .5rem;align-items:start;font-size:.9rem;padding:.15rem 0}
.vc-punten li.ok{color:var(--grijs)}
.vc-punten li.let .vc-ic{color:var(--kraft-donker);font-weight:700}
.vc-punten li.fout{color:#7A1A12}.vc-punten li.fout .vc-ic{color:#B42318;font-weight:700}
.vc-punten li.ok .vc-ic{color:var(--bpc)}
.vc-mee{display:inline-flex;flex-direction:row;align-items:center;gap:.3rem;margin:0;font-size:.8rem;font-weight:400;white-space:nowrap;color:var(--grijs);cursor:pointer}
.vc-mee input{margin:0;width:auto}
.vc-meer{margin-top:.4rem}
.vc-dl{display:grid;grid-template-columns:max-content 1fr;gap:.1rem .8rem;font-size:.85rem;margin:.4rem 0}
.vc-dl dt{color:var(--grijs)}.vc-dl dd{margin:0}
.vc-vorige{width:100%;border-collapse:collapse;font-size:.8rem}
.vc-vorige th,.vc-vorige td{text-align:left;padding:.2rem .4rem;border-bottom:1px solid var(--lijn);vertical-align:top}
.vc-acties{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--lijn)}
@media (max-width:700px){.vc-dialoog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0}
  .vc-punten li{grid-template-columns:1.3rem 1fr}.vc-punten li>span:not(.vc-ic){grid-column:2}.vc-mee{grid-column:2}}
/* Geleerde koppelingen (14 okt 2026): artikel kiezen voor een regel uit de mail */
.or-ai-kies{background:#F5F3EE;border-left:3px solid #B8895A;padding:.35rem .6rem;margin:.3rem 0}
.or-ai-ander{display:block;margin-top:.1rem;color:#8A5F33;opacity:.75}.or-ai-ander:hover{opacity:1}
.or-ai-kop details{margin-top:.3rem}.or-ai-kop summary{cursor:pointer;color:#8A5F33}
/* Proefdrukken bij de orderbevestiging (14 okt 2026): per klant, archiefdossier opladen */
.or-proefob{border:1px solid #B8895A;background:#FBFAF7;padding:.6rem .8rem;margin:.8rem 0}
.or-proefob h3{margin:0 0 .4rem;font-size:1rem}
.or-proefob ul{margin:.2rem 0 0;padding-left:1.1rem}.or-proefob li{margin:.3rem 0}
.or-proefob-waarom{background:#F5F3EE;border-left:3px solid #B8895A;padding:.4rem .6rem;margin:.2rem 0 .5rem}
.or-proefob-geen{color:#1D1D1B}
.or-proefob-op{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.3rem}
.or-proefob-formaten{margin:.25rem 0 .2rem;padding-left:1.1rem}.or-proefob-formaten li{margin:.25rem 0}
.pa-staffel{display:block}
.pa-staffels{display:grid;gap:.4rem;justify-items:start}
.pa-staffelrij{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.pa-staffelrij input{width:6.5rem}
.pa-bestelbon{margin:.2rem 0 .9rem}
.pa-bestelbon .klein{display:block;font-weight:400;margin-top:.15rem}
/* "Klopt niet" (14 okt 2026): het AI-label in de Inbox is een knop */
button.ib-ai-soort{cursor:pointer;font-family:inherit;line-height:1.4}button.ib-ai-soort:hover{filter:brightness(.95);text-decoration:underline}
.or-ai-klopt{margin-left:.4rem}

/* AI leest proefantwoorden (14 okt 2026): voorstel per formaat in het kraftblok van een onverwerkte mail */
.pd-ai{margin:.4rem 0}
.pd-ai .tl-voorstel{margin:.3rem 0}
.badge.pd-ai-label{background:#1D1D1B;color:#F5F3EE;font-size:.7rem;letter-spacing:.04em}
.pd-ai-lijst{margin:.2rem 0 .4rem;padding-left:1.1rem;font-size:.9rem}
.pd-ai-lijst>li{margin:.25rem 0}
.pd-ai-aanp{margin:.2rem 0 .2rem;padding-left:1.1rem}
.badge.pd-ai-akkoord{background:var(--bpc-licht);color:var(--bpc)}
.badge.pd-ai-aanpassing{background:#F6E3DF;color:#A63D32}
.badge.pd-ai-onduidelijk,.badge.pd-ai-geen{background:#ECEAE5;color:var(--grijs)}
.pd-ai-vraag{margin:.25rem 0;padding:.3rem .5rem;border-left:3px solid #B8895A;background:#F5F3EE}
.pd-ai-details summary{cursor:pointer}
.pd-ai-details ul{padding-left:1.1rem;font-size:.9rem}
.ib-proefvoorstel{margin:.3rem 0;padding:.4rem .6rem;border-left:3px solid #B8895A;background:#F5F3EE}

/* ---------- Offertes (/beheer/offertes, 14 okt 2026): één scherm van boven naar onder, rechts het voorbeeld voor de klant ---------- */
main:has(#btab-offertes:not([hidden]) .ofe-raster){max-width:96rem}
.ofe-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);gap:1rem;align-items:start;margin-top:.75rem}
.ofe-form{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;min-width:0}
.ofe-form fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.ofe-stap{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;min-width:0}
.ofe-stap h3{display:flex;align-items:center;gap:.55rem;margin:0}
.ofe-nr{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;background:var(--kraft-hout);color:#fff;font-weight:800;font-size:.9rem;border-radius:2px}
.ofe-klantsoort{justify-self:start}
.ofe-fost{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center}
.ofe-fost .vinkje{margin:0}
.ofe-afspraken{padding:.55rem .8rem;border-left:3px solid var(--bpc);background:var(--bpc-licht)}
.ofe-afspraken ul{margin:.3rem 0;padding-left:1.1rem}
.ofe-let{margin:0;padding:.5rem .75rem;background:#FFF4CC;border:1px dashed #C9A227;color:#7A5C00}
.ofe-regel{position:relative;display:grid;gap:.55rem;padding:.8rem .9rem;border:1px solid var(--lijn);border-left:4px solid var(--kraft-hout);border-radius:6px;background:#FCFBF8}
.ofe-regel-vrij{border-left-color:var(--grijs)}
.ofe-regel-cliche{border-left-color:var(--bpc)}
.ofe-regel+.ofe-regel{margin-top:.6rem}
.ofe-regel-kop{padding-right:7rem}
.ofe-regel-kop .stil{display:block}
.ofe-regel-acties{position:absolute;top:.6rem;right:.8rem;display:flex;gap:.7rem}
.ofe-weg{color:#A63D32}
.ofe-perso{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center}
.ofe-perso label:not(.or-ts){display:flex;gap:.4rem;align-items:center;font-weight:600}
.ofe-perso select{width:auto;padding:.3rem .4rem}
.ofe-tsgroep{display:inline-flex;flex-wrap:wrap;gap:.3rem}
.ofe-staffels{width:100%;border-collapse:collapse;font-size:.88rem}
.ofe-staffels th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--grijs);padding:.3rem .4rem;border-bottom:2px solid var(--kraft-hout)}
.ofe-staffels td{padding:.3rem .4rem;border-bottom:1px solid var(--lijn);vertical-align:middle}
.ofe-staffels .num{text-align:right;white-space:nowrap}
.ofe-staffels .vinkje{margin:0;font-weight:600;align-items:center}
.ofe-staffels .ib-onbekend{display:block}
.ofe-uit td{opacity:.5}
.ofe-uit td:first-child{opacity:1}
.ofe-prijs{width:6.5rem;text-align:right;padding:.35rem .45rem;font-variant-numeric:tabular-nums}
.ofe-bron{display:inline-block;font-size:.72rem;font-weight:700;padding:.05rem .45rem;border-radius:99px;background:var(--vlak);color:var(--grijs);margin-right:.3rem}
.ofe-afspraak{background:var(--bpc-licht);color:var(--bpc)}
.ofe-hand{background:#FBF1E4;color:var(--kraft-donker)}
.ofe-eigen{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.ofe-eigen input{width:6rem;padding:.35rem .45rem}
.ofe-eigen select{width:auto;padding:.35rem .45rem}
.ofe-notitie{display:flex;gap:.5rem;align-items:center;font-weight:600}
.ofe-notitie input{flex:1;padding:.35rem .5rem}
.ofe-vect{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:center}
.ofe-vect legend{font-weight:600;font-size:.9rem;padding:0;margin-bottom:.25rem}
.ofe-picker{margin-top:.6rem;padding-top:.8rem;border-top:1px dashed var(--lijn);display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem}
.ofe-picker #ofePkZoek{flex:1 1 18rem;min-width:0}
.ofe-chips,.ofe-stappen,.ofe-stap-keuze{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.ofe-stappen{flex-direction:column;align-items:flex-start}
.ofe-chip{font:inherit;font-size:.86rem;font-weight:600;padding:.3rem .65rem;border:1px solid var(--lijn);border-radius:99px;background:#fff;color:var(--inkt);cursor:pointer}
.ofe-chip:hover{border-color:var(--kraft-hout)}
.ofe-chip.aan{background:var(--inkt);border-color:var(--inkt);color:#fff}
.ofe-chip.aan .stil{color:#ddd}
.ofe-resultaten{list-style:none;margin:0;padding:.4rem .6rem;background:#fff;border:1px solid var(--lijn);border-radius:6px;max-height:22rem;overflow:auto;display:grid;gap:.25rem}
.ofe-resultaten .vinkje{margin:0}
.ofe-pk-acties{display:flex;flex-wrap:wrap;gap:.5rem}
.ofe-acties{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.ofe-acties #ofeKlaar{flex-basis:100%}
.ofe-acties #ofeKlaar ul{margin:.2rem 0 0;padding-left:1.1rem}
.ofe-acties .melding{flex-basis:100%;margin:0}
.ok-tekst{color:var(--bpc);font-weight:700}
.ofe-status{padding:.8rem 1rem;margin-top:.5rem}
.ofe-voorbeeld{position:sticky;top:4.5rem;background:#fff;border:1px solid var(--lijn);border-top:4px solid var(--kraft-hout);border-radius:8px;padding:.8rem;max-height:calc(100vh - 6rem);overflow:auto}
.ofe-vb-kop{display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:center;margin-bottom:.6rem}
.ofe-vb-kop .filters{margin-left:auto}
.ofe-vb-mail{font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;color:#1D1D1B}
.ofe-vb-mail p{margin:0 0 .8em}
.badge.ofe-concept{background:var(--vlak);color:var(--grijs)}
.badge.ofe-verstuurd{background:#E3ECF6;color:#2B5A88}
.badge.ofe-aanvaard,.badge.ofe-order{background:var(--bpc-licht);color:var(--bpc)}
.badge.ofe-geweigerd{background:#FBE9E6;color:#A63D32}
.badge.ofe-verlopen{background:#F6E9D7;color:#7A5426}
.ofe-rand-verstuurd{border-left-color:#2B5A88}
.ofe-rand-aanvaard,.ofe-rand-order{border-left-color:var(--bpc)}
.ofe-rand-verlopen,.ofe-rand-geweigerd{border-left-color:var(--lijn)}
@media (max-width:1100px){ .ofe-raster{grid-template-columns:1fr} .ofe-voorbeeld{position:static;max-height:none} }
@media (max-width:640px){
  .ofe-regel-kop{padding-right:0;padding-top:1.4rem}
  .ofe-staffels thead{display:none}
  .ofe-staffels tr{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;border-bottom:1px solid var(--lijn);padding:.25rem 0}
  .ofe-staffels td{border:0;padding:.15rem .3rem}
  .ofe-staffels td[data-uitleg]{grid-column:1/-1;order:5}
}
.ofe-tsgroep label.or-ts{display:inline-flex;align-items:center;gap:.3rem;margin:0;padding:.15rem .55rem;border:1px solid var(--lijn);border-radius:999px;background:#fff;
  font-size:.8rem;font-weight:500;line-height:1.35;color:var(--grijs);cursor:pointer;white-space:nowrap;position:relative}
.ofe-tsgroep label.or-ts input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ofe-tsgroep label.or-ts b{font-weight:600;color:inherit}
.ofe-tsgroep label.or-ts:hover{border-color:var(--kraft-hout)}
.ofe-tsgroep label.or-ts:focus-within{outline:2px solid var(--kraft-hout);outline-offset:1px}
.ofe-tsgroep label.or-ts.aan{background:var(--bpc-licht);border-color:var(--bpc);color:var(--bpc-donker)}
.ofe-tsgroep label.or-ts.aan::before{content:"✓";font-weight:700}
.ofe-cliche{align-items:start}
.ofe-vect .vinkje{display:inline-flex;align-items:center;gap:.4rem}
.ofe-vect input,.or-raster .ofe-vect input{width:auto;margin:0}
/* Bedrukking uit de proef (14 okt 2026) */
.pd-kl-bedrukking{margin:.5rem 0}
.pd-kl-ipg{margin:.5rem 0;padding:.4rem .6rem;border-left:3px solid var(--kraft,#B8895A);background:rgba(184,137,90,.08)}
.pd-ipg-werkelijk input{width:6em;padding:.15rem .35rem;margin:0 .3rem}
.pb-ipg-tabel{width:100%;border-collapse:collapse}.pb-ipg-tabel th,.pb-ipg-tabel td{padding:.3rem .45rem;border-bottom:1px solid #E5E1D8;text-align:left;vertical-align:top}.pb-ipg-tabel .r{text-align:right;white-space:nowrap}
.pd-kl-volvlak{color:#8A5F33;font-weight:700}
.badge.pd-kl-volvlak{background:#FBF1E4;border:1px solid #B8895A;margin-left:.4rem}

.pa-tabellen{display:grid;gap:.4rem}
.pa-tablijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:.6rem 1.2rem;max-height:22rem;overflow:auto;padding:.5rem .7rem;border:1px solid var(--lijn);border-radius:4px;background:#fff}
.pa-tabgroep{display:grid;gap:.25rem;align-content:start}
.pa-tabgroep .vinkje{font-size:.85rem}
.pa-perstaffel{border:0;margin:0;padding:0;display:grid;gap:.4rem}
.pa-perstaffel legend{padding:0;margin-bottom:.2rem}
.ofe-mail{padding:.7rem 1rem;margin-top:.5rem;border-left:4px solid var(--kraft-hout)}
.ofe-mail-tekst{margin:.3rem 0 0;white-space:pre-line;max-height:4.5em;overflow:hidden}
/* Bestaand cliché: proeven uit het archief (15 okt 2026) */
.pd-archief{background:#fff;border:1px solid var(--lijn);border-left:4px solid #B8895A;padding:.6rem .9rem .8rem;margin:0 0 1rem}
.pd-archief>summary{font-weight:700;cursor:pointer}
.pd-arch-rij{display:grid;grid-template-columns:minmax(12rem,1fr) minmax(12rem,1.4fr) auto;gap:.6rem;align-items:center;padding:.35rem 0;border-bottom:1px solid var(--lijn)}
.pd-arch-rij input.pd-arch-naam{width:100%}
.pd-arch-klaar{margin:.3rem 0 .6rem;padding-left:0;list-style:none}
@media (max-width:640px){.pd-arch-rij{grid-template-columns:1fr}}
.ofe-vorm{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center;margin-top:.6rem}
/* Offertes: verwijderd en transportkosten (15 okt 2026) */
.badge.ofe-verwijderd{background:#EEE9E1;color:#67625A;text-decoration:line-through}
.ofe-weg-blok{border-left:4px solid #A63D32}
.ofe-transport{display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:center}
.ofe-transport .vinkje{margin:0}
.ofe-transport-velden{display:inline-flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.ofe-transport-velden input{width:6.5rem}
.ofe-transport p{flex-basis:100%;margin:0}
/* Offertes: artikel van de klant uit Exact (16 okt 2026) */
.ofe-exact{display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:center;padding:.45rem .6rem;margin:.3rem 0;background:#FBF1E4;border-left:3px solid var(--kraft-hout)}
.ofe-exact .ofe-klantcode{display:inline-flex;gap:.4rem;align-items:center;margin:0;flex-basis:100%}
.ofe-exact .ofe-klantcode input{width:12rem}
.pd-arch-zoek{position:relative}
.pd-arch-lijst{position:absolute;z-index:20;left:0;right:0;top:100%;margin:2px 0 0;padding:0;list-style:none;background:#fff;border:1px solid var(--lijn);box-shadow:0 4px 14px rgba(0,0,0,.12);max-height:20rem;overflow:auto}
.pd-arch-lijst li{padding:.4rem .6rem;border-bottom:1px solid var(--lijn);cursor:pointer;line-height:1.3}
.pd-arch-lijst li[data-pactie]:hover{background:#F5F3EE}
.pd-arch-lijst li .stil{display:block}
.pd-arch-gekozen{display:block;margin-top:.15rem}
/* Automatisch gekoppeld aan order of proefdossier (15 okt 2026) */
.ib-auto{display:inline-block;margin-left:.25rem;padding:0 .3rem;font-size:.7rem;line-height:1.4;border:1px solid #B8895A;color:#8A5F33;border-radius:2px;cursor:help;vertical-align:1px}
/* Prijsafspraak per staffel en aantal kleuren (Joke, 15 okt 2026) */
.pa-kleurtabellen{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0}
.pa-kleurtabel{border-collapse:collapse;font-size:13px}
.pa-kleurtabel th,.pa-kleurtabel td{padding:2px 8px;text-align:right;border-bottom:1px solid #e3ded4;white-space:nowrap}
.pa-kleurtabel th:first-child,.pa-kleurtabel td:first-child{text-align:left}
.pa-kleurtabel input{width:6.5em;text-align:right}
/* Proeven: lijst compacter (15 okt 2026) */
.pb-tabel .pb-nr strong{white-space:nowrap}
.pb-tabel .pb-codes{font-size:.82rem;line-height:1.35}
.pb-tabel .pb-code{display:block;white-space:nowrap;font-family:inherit}
.pb-tabel .pb-status{min-width:9rem}
.pb-tabel .pb-status .badge{white-space:nowrap;display:inline-block;margin:0 .25rem .25rem 0}
.pb-tabel td:last-child{font-size:.85rem;min-width:13rem;max-width:18rem}
.pb-tabel td.pb-telling{white-space:normal;min-width:7rem}
.pb-tabel td:nth-child(3){min-width:8rem}
/* Orderscherm: mail van de klant ernaast + klad van een nieuwe order (15 okt 2026) */
main:has(#btab-orders:not([hidden]) .or-werk.met-mail){max-width:110rem}
.or-werk.met-mail{display:grid;grid-template-columns:minmax(0,1fr) minmax(22rem,42%);gap:1.25rem;align-items:start}
.or-mail{position:sticky;top:.75rem;max-height:calc(100vh - 1.5rem);overflow:auto;background:#fff;border:1px solid #e3ded3;border-left:4px solid #B8895A;padding:.6rem .8rem}
.or-mail.ingeklapt{position:static;max-height:none;margin:.5rem 0}
.or-werk:not(.met-mail) .or-mail{position:static;max-height:none}
.or-mail-kop{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.3rem}
.or-mail-blok p{margin:.2rem 0}
.or-mail-tabs{display:flex;flex-wrap:wrap;gap:.3rem;margin:.35rem 0 .5rem}
.or-mail-tab{font:inherit;font-size:.82rem;padding:.2rem .55rem;border:1px solid #d8d1c3;background:#F5F3EE;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.or-mail-tab.actief{background:#1D1D1B;color:#fff;border-color:#1D1D1B}
.or-mail-frame{width:100%;height:60vh;border:1px solid #e3ded3;background:#fff}
.or-mail-pdf{width:100%;height:calc(100vh - 13rem);min-height:24rem;border:1px solid #e3ded3;background:#fff}
.or-mail-beeld{max-width:100%;height:auto;border:1px solid #e3ded3}
.or-klad{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;background:#eef4ea;border-left:4px solid #336029;padding:.5rem .8rem;margin:.6rem 0;font-size:.9rem}
.or-kladden ul{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.35rem}
.or-kladden li{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
@media (max-width:1100px){ .or-werk.met-mail{display:flex;flex-direction:column;align-items:stretch} .or-werk.met-mail .or-mail{order:-1;position:static;max-height:none;width:100%;box-sizing:border-box} .or-mail-pdf{height:55vh;min-height:18rem} }

/* Zoeken in gewone taal (index.html, 15 okt 2026): balk onder de tabbladen met wat Claude van de zin maakte */
.slim-balk{display:flex;align-items:flex-start;gap:.8rem;background:#fff;border:1px solid var(--lijn);border-left:4px solid var(--kraft-hout);padding:.6rem .9rem;margin:0 0 1rem}
.slim-balk .slim-tekst{flex:1;min-width:0}
.slim-balk p{margin:.1rem 0}
.slim-balk .slim-uitleg{font-weight:600}
.slim-balk .slim-periode{display:inline-block;font-weight:400;font-size:.85rem;padding:0 .45rem;border:1px solid var(--lijn);border-radius:999px;margin-left:.3rem}
.slim-balk .slim-niet{color:#8A5F33}
.slim-balk .slim-acties{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.9rem}
.slim-balk .slim-acties .link{text-align:left;padding:0}
.slim-balk .slim-sluit{background:none;border:0;cursor:pointer;font-size:1rem;line-height:1;padding:.2rem;color:inherit}
.documenten .document.uitgelicht{border-color:var(--kraft-hout);box-shadow:0 0 0 2px var(--kraft-hout)}
/* Zoeken in gewone taal in /beheer (artikelzoekers Orders en Offertes, slim-beheer.js) */
.slim-balk-klein{margin:0 0 .4rem;padding:.45rem .75rem}
.slim-balk-klein .slim-uitleg{font-size:.95rem}
.slim-balk .slim-los{color:#8A5F33}
.slim-bezig{margin:.2rem 0}
.act-slim{display:inline-block;font-size:.72rem;font-weight:650;text-transform:uppercase;letter-spacing:.04em;padding:0 .4rem;margin-left:.35rem;border:1px solid var(--kraft-hout);color:var(--kraft-donker);border-radius:999px;vertical-align:.1em}

/* ---------- Clichécalculator: ontwerp laten nakijken en offerte aanvragen (15 okt 2026) ---------- */
.ow{border:1px solid var(--lijn);border-left:4px solid var(--kraft-hout,#B8895A);background:#FBFAF7;padding:.8rem 1rem;margin:0 0 1rem;display:grid;gap:.55rem}
.ow p{margin:0}
.ow-titel{font-size:1rem}
.ow-modus{display:flex;flex-wrap:wrap;gap:.4rem}
.ow-tab{font:inherit;font-size:.9rem;padding:.4rem .8rem;border:1px solid var(--lijn);background:#fff;color:var(--inkt);cursor:pointer}
.ow-tab[aria-pressed=true]{border-color:#1D1D1B;background:#1D1D1B;color:#fff}
.ow-bestand{display:grid;gap:.3rem;font-size:.92rem}
.ow-bestand input[type=file]{padding:.45rem;background:#fff}
.ow textarea,.oa textarea{font:inherit;width:100%;padding:.6rem .7rem;border:1px solid var(--lijn);background:#fff;resize:vertical}
.ow-bezig{color:#8A5F33}
.ow-res{border:1px solid var(--lijn);background:#fff;padding:.7rem .85rem;display:grid;gap:.35rem}
.ow-res ul{margin:0;padding-left:1.1rem}
.ow-res.ow-drukklaar{border-left:4px solid #336029}
.ow-res.ow-reproductie{border-left:4px solid #B8895A}
.ow-res.ow-niet_geschikt{border-left:4px solid var(--rood)}
.oa{margin-top:1rem;display:grid;gap:.55rem;justify-items:start}
.oa textarea{max-width:40rem}
/* /beheer → Offertes: aanvragen uit het portaal */
.ofe-aanvragen{margin:0 0 1rem;display:grid;gap:.6rem}
.ofe-aanvragen h3{margin:0}
.ofe-aanvraag{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;border-top:1px solid var(--lijn);padding-top:.6rem}
.ofe-aanvraag-knoppen{display:flex;flex-direction:column;gap:.35rem;align-items:flex-end;flex-shrink:0}
@media (max-width:640px){.ofe-aanvraag{flex-direction:column}.ofe-aanvraag-knoppen{align-items:flex-start;flex-direction:row}}

/* Medewerkerslijst (17 okt 2026, knop "Medewerkers" in de kop van /beheer; enkel Dimitri en Laura) */
.mw-dialoog { max-width: 720px; }
.mw-dialoog h3 { margin: 20px 0 6px; font-size: 1rem; }
.mw-tabel { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: .92rem; }
.mw-tabel th, .mw-tabel td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #E4DFD4; vertical-align: top; }
.mw-tabel th { font-weight: 600; color: #5E5A52; }
.mw-tabel td:last-child { text-align: right; white-space: nowrap; }
.mw-label { display: inline-block; font-size: .72rem; padding: 1px 6px; margin-left: 4px; background: #F5F3EE; border: 1px solid #B8895A; color: #8A5F33; }
.mw-toevoegen { display: flex; gap: 8px; margin: 10px 0; }
.mw-toevoegen input { flex: 1; min-width: 0; }

/* Mogelijk dubbele order (17 okt 2026) */
.or-dubbel{border-left:4px solid #a4441d;background:#fbefe8}
.or-dubbel p{margin:.2rem 0}.or-dubbel ul{margin:.3rem 0 .4rem 1.1rem;padding:0}
/* Partners (17 okt 2026, partners-beheer.js): zelfde venster als Medewerkers */
.pa-dialoog .mw-tabel td:last-child{white-space:normal;text-align:left;overflow-wrap:anywhere}
.pa-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
/* IPG-portaal (17 okt 2026): nieuwe proef van IPG in het proefdossier (proeven-beheer.js tekenIpgProef) en de to-do in de Inbox */
.badge.ps-ipg-na{background:#FBF1E4;color:#8A5F33;border:1px solid #B8895A}
.pd-ipgproef{background:#fff;border:1px solid var(--lijn);border-top:4px solid var(--kraft-hout);border-radius:6px;padding:.9rem 1.1rem;margin:1rem 0}
.pd-ipgproef h3{margin:0 0 .6rem;font-size:1.05rem}
.pd-ipgproef h3 .stil{font-weight:400;margin-left:.4rem}
.pd-ipgproef-f{padding:.6rem 0;border-top:1px solid var(--lijn)}
.pd-ipgproef-f:first-of-type{border-top:0}
.pd-ipgproef-f p{margin:.25rem 0}
.pd-ipgproef-check{margin:.3rem 0;padding-left:1.1rem;font-size:.88rem;color:var(--grijs)}
.pd-ipgproef-check li.waarschuwing{color:#8A5F33;font-weight:600}
.pd-ipgproef-prijs{display:block;margin:.4rem 0;font-weight:600}
.pd-ipgproef-prijs input{width:7rem;padding:.35rem .5rem}
.pd-ipgproef .pd-knoppen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.ib-kaart.ib-todo{border-left:4px solid var(--kraft-hout)}
.ib-todo-band{display:inline-block;background:var(--kraft-hout);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.1rem .5rem;border-radius:3px;margin-right:.4rem}
.ib-todo-f{margin:.25rem 0;font-size:.9rem}
.ib-todo-check{font-size:.82rem;color:var(--grijs);margin:.2rem 0}
/* Opvolging IPG (proeven-beheer.js tekenOpvolging) */
.pb-weergave{margin-left:auto}
.ipg-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1rem 0}
@media (max-width:620px){.ipg-cijfers{grid-template-columns:1fr}}
.ipg-cijfer{background:#fff;border:1px solid var(--lijn);border-radius:6px;padding:.75rem 1rem}
.ipg-cijfer b{display:block;font-size:1.9rem;font-weight:800;font-stretch:118%;color:var(--inkt);line-height:1.1;font-variant-numeric:tabular-nums}
.ipg-cijfer.rood{border-left:4px solid #A63D32}.ipg-cijfer.oranje{border-left:4px solid var(--kraft-hout)}.ipg-cijfer.blauw{border-left:4px solid #3D5167}
.ipg-dagen{font-weight:800;font-variant-numeric:tabular-nums;padding:.05rem .5rem;border-radius:99px;font-size:.8rem;white-space:nowrap;background:var(--mist)}
.ipg-dagen.oranje{background:#F6E9D7;color:#7A5426}.ipg-dagen.rood{background:#F4DEDB;color:#A63D32}
.pb-kop-rechts{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.pb-ipg-na{margin:.3rem 0 1rem;padding-left:1.1rem}
.verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================================================================
   Prijzenbeheer (/beheer/prijzen, 17 okt 2026): zijbalk met onderdelen, tabellen met een kraftrand voor wijzigingen die nog niet live zijn
   ================================================================ */
main:has(#btab-prijzen:not([hidden]) .pz){max-width:96rem}
.pz{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.pz-melding{border:1px solid var(--lijn);border-left:4px solid var(--kraft-hout);background:#fff;padding:10px 14px;border-radius:6px}
.pz-melding.fout{border-left-color:#A63D32;color:#A63D32}
.pz-melding.ok{border-left-color:var(--bpc)}
.pz-kop{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pz-kop .pz-zoek{flex:1 1 220px;min-width:180px;padding:.5rem .7rem}
.pz-kop .pz-live{font-size:.85rem;color:var(--grijs);margin-left:auto}
.pz-kop select{padding:.45rem .6rem;max-width:280px}
.pz-lijf{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:start}
.pz-zij{background:#fff;border:1px solid var(--lijn);border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:2px;position:sticky;top:76px}
.pz-zij a{display:flex;justify-content:space-between;gap:6px;padding:7px 10px;border-radius:4px;color:var(--grijs);font-weight:600;text-decoration:none;font-size:.92rem}
.pz-zij a:hover{background:var(--bpc-licht);color:var(--inkt)}
.pz-zij a[aria-current=page]{background:var(--bpc-licht);color:var(--bpc)}
.pz-zij .pz-wie{border-top:1px solid var(--lijn);margin-top:6px;padding:8px 10px 2px;font-size:.8rem;color:var(--grijs)}
.pz-hoofd{display:flex;flex-direction:column;gap:12px;min-width:0}
.pz-balk{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pz-balk h2{font-size:1.35rem;margin:0 auto 0 0}
.pz-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.pz-filters label{display:flex;flex-direction:column;gap:3px;font-size:.78rem;font-weight:600;color:var(--grijs)}
.pz-filters select,.pz-filters input{padding:.4rem .55rem;font-size:.9rem}
.pz-wrap{overflow-x:auto;background:#fff;border:1px solid var(--lijn);border-radius:6px}
table.pz-t{border-collapse:collapse;width:100%;font-size:.88rem}
table.pz-t th{font-weight:600;color:var(--grijs);text-align:left;padding:7px 8px;border-bottom:1px solid var(--lijn);font-size:.78rem;white-space:nowrap;background:var(--mist)}
table.pz-t td{padding:7px 8px;border-bottom:1px solid var(--lijn);vertical-align:top;font-variant-numeric:tabular-nums}
table.pz-t td.num,table.pz-t th.num{text-align:right}
table.pz-t td.pz-code{font-family:ui-monospace,Menlo,monospace;font-size:.82rem;white-space:nowrap}
table.pz-t tr.klik{cursor:pointer}
table.pz-t tr.klik:hover td{background:#FBF8F2}
table.pz-t tr.pz-gewijzigd td{background:#FBF5EC}
table.pz-t tr.pz-gewijzigd td:first-child{box-shadow:inset 4px 0 0 var(--kraft-hout)}
table.pz-t tr.pz-groep td{background:var(--mist);font-weight:700;color:var(--bpc);font-size:.8rem;letter-spacing:.02em}
table.pz-t input,table.pz-t select{padding:.3rem .45rem;font-size:.86rem;width:100%;min-width:5em}
table.pz-t input.num{text-align:right;max-width:8em}
.pz-tag{display:inline-block;font-size:.72rem;font-weight:650;padding:.1rem .5rem;border-radius:99px;background:var(--mist);color:var(--grijs);border:1px solid var(--lijn);white-space:nowrap;margin:0 .2rem .1rem 0}
.pz-tag.ok{background:var(--bpc-licht);color:var(--bpc);border-color:transparent}
.pz-tag.kraft{background:#F6E9D7;color:#7A5426;border-color:transparent}
.pz-tag.warn{background:#FDF0DC;color:#b45309;border-color:transparent}
.pz-tag.fout{background:#F4DEDB;color:#A63D32;border-color:transparent}
.pz-tag.zwart{background:var(--inkt);color:#fff;border-color:transparent}
.pz-oud{text-decoration:line-through;color:var(--grijs);font-weight:400;margin-right:.3em}
.pz-nieuw{color:var(--bpc);font-weight:700}
.pz-twee{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:start}
.pz-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.pz-paneel{background:#fff;border:1px solid var(--lijn);border-radius:6px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pz-paneel h3{margin:0;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--bpc);font-weight:700}
.pz-velden{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.pz-veld{display:flex;flex-direction:column;gap:3px;min-width:0}
.pz-veld>span{font-size:.76rem;font-weight:600;color:var(--tekst);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pz-veld input,.pz-veld select,.pz-veld textarea{padding:.45rem .55rem;font-size:.9rem;width:100%}
.pz-veld.breed{grid-column:1/-1}
.pz-calc{font-family:ui-monospace,Menlo,monospace;font-size:.85rem;padding:.45rem .55rem;border-radius:4px;background:var(--mist);color:var(--grijs);border:1px dashed var(--lijn);min-height:2.1em;overflow-wrap:anywhere}
.pz-slot{font-size:.75rem;opacity:.7}
.pz-veld.vast input{border-color:var(--kraft-hout);background:#FBF5EC}
.pz-veld.anders input,.pz-veld.anders select{border-color:var(--kraft-hout);box-shadow:inset 3px 0 0 var(--kraft-hout)}
.pz-voorbeeld{background:var(--mist);border-left:3px solid var(--kraft-hout);border-radius:4px;padding:10px 12px;font-size:.86rem;display:flex;flex-direction:column;gap:4px}
.pz-voorbeeld b{font-stretch:110%}
.pz-log{list-style:none;margin:0;padding:0;font-size:.85rem}
.pz-log li{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--lijn)}
.pz-log li time{color:var(--grijs);font-size:.78rem}
.pz-boom{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.pz-boom li{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--lijn);border-radius:6px;background:#fff;font-size:.9rem}
.pz-boom li.l1{font-weight:780;font-stretch:110%;background:var(--bpc-licht);border-color:transparent}
.pz-boom li.l2{margin-left:20px;font-weight:650}
.pz-boom li.l3{margin-left:40px}
.pz-boom li.l4{margin-left:60px;font-size:.84rem}
.pz-boom li[draggable=true]{cursor:grab}
.pz-boom li.sleep{opacity:.5}
.pz-boom li.boven{box-shadow:0 -3px 0 var(--bpc)}
.pz-boom .grip{color:var(--grijs);letter-spacing:-2px}
.pz-boom .rechts{margin-left:auto;display:flex;gap:6px;align-items:center}
.pz-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.pz-foto{margin:0;background:#fff;border:1px solid var(--lijn);border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:6px}
.pz-foto.pz-gewijzigd{border-color:var(--kraft-hout);box-shadow:inset 4px 0 0 var(--kraft-hout)}
.pz-foto .beeld{aspect-ratio:4/3;background:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pz-foto .beeld img{max-width:100%;max-height:100%;object-fit:contain}
.pz-foto .beeld.leeg{border:2px dashed var(--lijn);background:var(--mist);color:var(--grijs);font-size:.8rem;text-align:center;padding:6px}
.pz-foto .beeld.slepen{border-color:var(--bpc)}
.pz-foto figcaption{font-size:.8rem;line-height:1.3;display:flex;flex-direction:column}
.pz-concept{border:1px solid var(--lijn);border-left:4px solid var(--kraft-hout);background:#fff;border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.pz-concept.gepland{border-left-color:var(--bpc)}
.pz-concept header{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pz-concept header b{font-size:1rem;margin-right:auto}
.pz-concept ol{margin:0;padding-left:1.2em;font-size:.84rem;max-height:260px;overflow:auto}
.pz-concept ol li{padding:2px 0}
.pz-banner{background:var(--bpc-licht);border:1px solid var(--bpc);border-radius:6px;padding:8px 12px;margin:10px 0 0;font-size:.9rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pz-banner a{color:var(--bpc);font-weight:700}
.pz-nummers{display:flex;gap:14px;flex-wrap:wrap}
.pz-nummers div{background:#fff;border:1px solid var(--lijn);border-radius:6px;padding:8px 14px;min-width:120px}
.pz-nummers b{display:block;font-size:1.4rem;font-stretch:110%}
@media (max-width:860px){
  .pz-lijf{grid-template-columns:1fr}
  .pz-zij{position:static;flex-direction:row;flex-wrap:wrap}
  .pz-zij .pz-wie{width:100%}
  .pz-twee,.pz-drie{grid-template-columns:1fr}
}
/* Kostprijscalculator (Prijzenbeheer, 18 okt 2026; enkel Dimitri): cel van de Excel naast elk veld, gekozen opslag, kostprijzen vet */
.pz-zij .pz-zijkop{border-top:1px solid var(--lijn);margin-top:6px;padding:8px 10px 2px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--kraft-donker)}
.kp{display:flex;flex-direction:column;gap:12px}
.kp-inhoud{display:flex;flex-direction:column;gap:12px}
.kp-kopregel{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.kp-cel{font-family:ui-monospace,Menlo,monospace;font-size:.7rem;font-weight:600;color:var(--kraft-donker);background:#F6E9D7;border-radius:3px;padding:0 .3rem;margin-left:auto;white-space:nowrap}
td.kp-cel{background:none;padding-left:4px}
.pz-veld input.kp-ongeldig,table.pz-t input.kp-ongeldig{border-color:#A63D32;box-shadow:inset 3px 0 0 #A63D32}
table.pz-t tr.kp-kost td{font-weight:700;color:var(--inkt)}
table.pz-t tr.kp-kostrij td{background:var(--mist);font-weight:700}
table.pz-t tr.kp-gekozen td{background:var(--bpc-licht);color:var(--bpc);font-weight:700}
table.pz-t tr.kp-gekozen td:first-child{box-shadow:inset 4px 0 0 var(--bpc)}
.kp-stappen td:first-child{white-space:normal}
.kp-offerte-t td:last-child{white-space:nowrap}
.kp-hulp{border:1px dashed var(--lijn);border-radius:6px;padding:8px 10px;background:var(--mist)}
.kp-hulp summary{cursor:pointer;font-size:.84rem;font-weight:600;color:var(--tekst)}
.kp-hulp[open] summary{margin-bottom:8px}
.kp-hulp-uit{display:flex;gap:8px;align-items:center;min-height:2.1em}
table.pz-t.kp-snel input{min-width:3.2em;padding:.25rem .35rem;text-align:right}
table.pz-t.kp-snel input.kp-formaat{min-width:15em;text-align:left}
.kp-opbouw{font-size:.84rem}
.kp-opm li{grid-template-columns:190px 1fr}
.kp-opslag-paneel>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.kp-opslag-paneel>summary::before{content:"▸";color:var(--bpc);font-size:.8rem}
.kp-opslag-paneel[open]>summary::before{content:"▾"}
.kp-opslag-paneel>summary::-webkit-details-marker{display:none}
table.pz-t.kp-volume-t input{max-width:9em}
table.pz-t.kp-volume-t select{min-width:6em;max-width:7em}
table.pz-t.kp-volume-t td{vertical-align:middle;white-space:nowrap}
td.kp-knoppen{white-space:nowrap}
td.kp-knoppen .knop{margin:0 0 4px 0}
/* Maatwerk uit de Kostprijscalculator in een offerte (18 okt 2026) */
.ofe-maatwerk td{vertical-align:middle}
.ofe-maatwerk td:first-child{white-space:nowrap}
.ofe-maatwerk input[data-of-volume]{width:8em;text-align:right}
.ofe-maatwerk select{margin-right:6px}
.ofe-mw{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.ofe-mw input{padding:.45rem .6rem;max-width:420px}
@media (max-width:860px){ .kp-opm li{grid-template-columns:1fr} }
/* Order met een oudere prijslijst (Prijzenbeheer, 17 okt 2026) */
.or-prijsversie{border-left:4px solid var(--kraft-hout);background:#FBF5EC}
.or-prijsversie p{margin:.2rem 0}.or-prijsversie ul{margin:.3rem 0 .2rem 1.1rem;padding:0}
/* Bestellingen in voorbereiding – compacte tabel (17 okt 2026): één regel per order, "Wie moet wat doen?", details bij een klik */
.voorbereiding h2 .vb-melding{display:inline-block;margin:0 0 0 .4rem;padding:.15rem .55rem;font-size:.8rem;vertical-align:middle}
.voorbereiding>.vb-sub{margin:0 0 .5rem;font-size:.88rem}
.vb-tabel-wrap{background:#fff;border:1px solid var(--lijn);border-radius:6px;overflow-x:auto}
.vb-tabel{width:100%;border-collapse:collapse;font-size:.88rem}
.vb-tabel th{text-align:left;font-weight:600;font-size:.74rem;color:var(--grijs);padding:.45rem .6rem;border-bottom:1px solid var(--lijn);white-space:nowrap}
.vb-tabel td{padding:.4rem .6rem;border-bottom:1px solid var(--lijn);vertical-align:top}
.vb-r{cursor:pointer}
.vb-r:hover td,.vb-r.open td{background:var(--mist)}
.vb-r td:first-child{border-left:4px solid var(--kraft-hout)}
.vb-r.vb-actie td:first-child{border-left-color:#C77A1E}
.vb-r.vb-verwerking td:first-child{border-left-color:var(--bpc)}
.vb-c-nr{font-weight:750;color:var(--inkt);white-space:nowrap}
.vb-c-naam{font-weight:650;color:var(--inkt)}
.vb-c-ref,.vb-c-lev{white-space:nowrap;color:var(--grijs)}
.vb-w{display:block;line-height:1.35}
.vb-w.actie{color:#7A5426}
.vb-w.bpc{color:#2B5A88}
.vb-w a{color:inherit;font-weight:650}
.vb-wie{color:var(--inkt)}
.vb-w.actie .vb-wie{color:#9A5B12}
.vb-c-meer{width:1.5rem;text-align:right}
.vb-meer{background:none;border:0;cursor:pointer;color:var(--kraft-donker);font:inherit;padding:0 .2rem}
.vb-detail td{background:var(--mist);padding:.3rem .8rem .6rem 1.4rem;font-size:.85rem}
.vb-art{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.15rem}
.vb-art li{display:flex;flex-wrap:wrap;gap:.1rem .6rem;align-items:baseline}
.vb-art .code{color:var(--grijs);font-size:.8rem}
.vb-k-klaar,.vb-k-info{margin:.2rem 0 0;color:var(--grijs)}
.vb-k-klaar{color:var(--bpc)}
@media (max-width:700px){
  .vb-tabel thead{display:none}
  .vb-tabel tr.vb-r{display:grid;grid-template-columns:auto 1fr auto;gap:0 .5rem;border-bottom:1px solid var(--lijn);border-left:4px solid var(--kraft-hout)}
  .vb-tabel tr.vb-r.vb-actie{border-left-color:#C77A1E}
  .vb-tabel tr.vb-r.vb-verwerking{border-left-color:var(--bpc)}
  .vb-tabel tr.vb-r td{border:0;padding:.2rem .5rem}
  .vb-tabel tr.vb-r td:first-child{border-left:0}
  .vb-c-wacht{grid-column:1/-1}
  .vb-c-ref,.vb-c-lev,.vb-c-klant{font-size:.8rem}
  .vb-tabel tr.vb-detail,.vb-tabel tr.vb-detail td{display:block}
}

/* Startpagina "Vandaag" (17 okt 2026): begroeting, vier tegels en "Deze week" – kraft en inkt zoals de website */
.vandaag{margin:0 0 1.5rem;background:#fff;border:1px solid var(--lijn);border-radius:8px;overflow:hidden}
.vandaag[hidden]{display:none}
.vd-kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem 1rem;padding:.9rem 1.1rem .7rem;
  background:var(--inkt);color:#fff;background-image:var(--ribs)}
.vd-kop h2{margin:0;color:#fff;font-size:1.35rem}
.vd-datum{color:#E7D3BC;font-size:.9rem}
.vd-tegels{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--lijn)}
.vd-tegel{display:flex;flex-direction:column;align-items:flex-start;gap:.05rem;padding:.75rem 1.1rem .8rem;background:#fff;border:0;
  border-right:1px solid var(--lijn);border-top:4px solid var(--lijn);font:inherit;text-align:left;cursor:pointer;color:var(--inkt)}
.vd-tegel:last-child{border-right:0}
.vd-tegel:hover{background:var(--mist)}
.vd-getal{font-size:1.9rem;font-weight:800;font-stretch:115%;line-height:1.05;letter-spacing:-.02em}
.vd-label{font-weight:650;font-size:.9rem}
.vd-sub{font-size:.78rem;color:var(--grijs)}
.vd-wacht{border-top-color:#C77A1E}.vd-wacht .vd-getal{color:#B8650F}
.vd-productie{border-top-color:#D99A2B}
.vd-gereed{border-top-color:var(--bpc)}.vd-gereed .vd-getal{color:var(--bpc)}
.vd-levering{border-top-color:var(--kraft-hout)}.vd-levering .vd-getal{font-size:1.35rem;padding:.3rem 0 .15rem}
.vd-tegel.leeg .vd-getal{color:#C9C3B8}
.vd-week{padding:.55rem 1.1rem .7rem;font-size:.86rem}
.vd-week-titel{display:block;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--kraft-donker);margin-bottom:.25rem}
.vd-week ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.vd-week li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .5rem;padding-left:.9rem;position:relative}
.vd-week li::before{content:"";position:absolute;left:0;top:.45rem;width:.45rem;height:.45rem;border-radius:50%;background:#2B5A88}
.vd-week li.vd-productie::before{background:#D99A2B}
.vd-week li.vd-gereed::before{background:var(--bpc)}
.vd-wanneer{min-width:5.2rem;color:var(--grijs)}
.vd-wat{font-weight:650}
.vd-art{color:var(--inkt)}
.vd-nr,.vd-meer{color:var(--grijs);font-size:.8rem}
@media (max-width:700px){
  .vd-tegels{grid-template-columns:1fr 1fr}
  .vd-tegel:nth-child(2){border-right:0}
  .vd-tegel:nth-child(-n+2){border-bottom:1px solid var(--lijn)}
  .vd-wanneer{min-width:0}
}
/* Vandaag → "Wat moet u doen?" (klik op de tegel wacht op u) */
.vd-wacht .vd-sub{color:#9A5B12;font-weight:600}
.vd-todo{padding:.6rem 1.1rem .7rem;background:#FBF3E8;border-bottom:1px solid var(--lijn);font-size:.9rem}
.vd-todo ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.vd-todo li{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .8rem}
.vd-td-wat{font-weight:650;color:var(--inkt)}
.vd-td-hoe{flex-basis:100%;color:#7A5426;font-size:.85rem}
.vd-todo .knop{padding:.3rem .7rem}

/* Proeven → weergave "IPG-portaal" (18 okt 2026): het portaal van IPG ingebed (zelfde domein) */
.pb-ipg-frame{display:block;width:100%;height:calc(100vh - 230px);min-height:520px;border:1px solid var(--lijn,#d9d4c7);background:#fff}
.pa-cliche{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;margin:0 0 .9rem}
.pa-cliche label{flex:0 0 auto;white-space:nowrap}
.pa-cliche input{width:5.5rem}
.pa-cliche .klein{flex-basis:100%}
.pd-geleverd{display:block;margin-top:.2rem;color:#336029;font-weight:600}

/* Proeven → weergave "Facturen IPG" (18 okt 2026, fase 3 van het IPG-portaal): maandfacturen van IPG naast de prijzen in het portaal */
.ipgf-opladen{margin:.9rem 0 1.1rem}
.ipgf-drop{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:1.1rem 1rem;border:2px dashed var(--lijn);border-radius:6px;background:#fff;cursor:pointer;text-align:center}
.ipgf-drop:hover,.ipgf-drop.over{border-color:var(--bpc);background:var(--bpc-licht)}
.ipgf-drop input{position:absolute;width:1px;height:1px;opacity:0}
.ipgf-drop b{color:var(--bpc)}
.ipgf-uploads{list-style:none;margin:.5rem 0 0;padding:0;font-size:.88rem}
.ipgf-uploads li{padding:.3rem .6rem;border-left:3px solid var(--lijn);margin-top:.25rem}
.ipgf-u-klaar{border-left-color:var(--bpc)!important;background:var(--bpc-licht)}
.ipgf-u-fout{border-left-color:#A63D32!important;background:#F4DEDB;color:#7A2A22}
.ipgf-ontbreekt{margin:.5rem 0 1rem;padding:.55rem .8rem;border-left:4px solid var(--kraft-hout);background:#F6E9D7;color:#5E4220}
.ipgf-kaart{background:#fff;border:1px solid var(--lijn);border-left:4px solid var(--bpc);border-radius:6px;padding:.85rem 1rem;margin:0 0 .9rem}
.ipgf-kaart.probleem{border-left-color:#A63D32}
.ipgf-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.ipgf-kop h4{margin:0 0 .15rem;font-size:1.05rem}
.ipgf-kop .stil.klein{display:block}
.ipgf-totaal{text-align:right}
.ipgf-totaal b{display:block;font-size:1.25rem;font-variant-numeric:tabular-nums}
.ipgf-tellers{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0 .3rem}
.ipgf-chip{display:inline-block;font-size:.78rem;font-weight:700;padding:.12rem .55rem;border-radius:99px;background:var(--mist);color:var(--grijs);white-space:nowrap}
.ipgf-chip.ipgf-klopt{background:var(--bpc-licht);color:var(--bpc)}
.ipgf-chip.ipgf-wijkt_af{background:#F4DEDB;color:#A63D32}
.ipgf-chip.ipgf-nakijken{background:#F6E9D7;color:#7A5426}
.ipgf-todo{margin:.3rem 0;font-size:.9rem;color:var(--grijs)}
.ipgf-todo.open{color:#7A2A22}
.ipgf-fout{color:#7A2A22}
p.ipgf-fout{margin:.3rem 0;padding:.4rem .6rem;background:#F4DEDB;border-left:3px solid #A63D32;font-size:.88rem}
.ipgf-acties{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin-top:.6rem}
.ipgf-regels{margin-top:.8rem}
.ipgf-filter{margin-bottom:.5rem}
.ipgf-tabel{font-size:.85rem}
.ipgf-tabel td.ipgf-bedrag,.ipgf-tabel .ipgf-bedrag{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ipgf-nowrap{white-space:nowrap}
.ipgf-tabel tr.ipgf-r-wijkt_af td{background:#FBF0EE}
.ipgf-tabel tr.ipgf-r-nakijken td{background:#FBF3E8}
.ipgf-tabel tr.ipgf-r-onbekend td,.ipgf-tabel tr.ipgf-r-gratis td{color:var(--grijs)}
.ipgf-tabel tr.ipgf-laat td{background:#FBF3E8}
.ipgf-meldingen{margin:0;padding-left:1rem;font-size:.82rem;color:var(--grijs)}
.ipgf-tabel tr:has(+ tr > td.ipgf-sub) td{border-bottom:0;padding-bottom:.2rem}
.ipgf-tabel td.ipgf-sub{padding-top:0}
.ipgf-meldingen li.ipgf-fout{color:#7A2A22;font-weight:600}
.ipgf-niet{margin:1rem 0}
.ipgf-niet summary{cursor:pointer;font-weight:650}
.ipgf-niet ul{margin:.4rem 0;padding-left:1.1rem;font-size:.88rem}
.ipgf-niet li{margin:.35rem 0}
.ipgf-niet .ipgf-acties{display:inline-flex;margin:0 0 0 .5rem}
.ib-todo-lijst{margin:.25rem 0 .4rem;padding-left:1.1rem;font-size:.85rem}
.ib-todo-lijst li{margin:.15rem 0}
@media (max-width:620px){.ipgf-totaal{text-align:left}}
.ipgf-kaart{scroll-margin-top:5.5rem}

/* Order aanpassen nadat ze in Exact staat (19 okt 2026) */
.or-aanpas{margin:1rem 0;padding:.8rem 1rem;background:#fff;border:1px solid var(--kraft, #B8895A);border-left:4px solid var(--kraft, #B8895A);border-radius:2px}
.or-aanpas ul{margin:.3rem 0 .6rem;padding-left:1.2rem}
.or-aanpas .acties{margin-top:.5rem}
.or-slot{display:block;color:var(--kraft-dark, #8A5F33);margin-top:.15rem}

/* Voorbeeld van de proef van IPG naast de controles (19 okt 2026) */
.pd-ipgproef-f{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
@media (min-width:900px){.pd-ipgproef-f{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pd-ipgproef-pdf iframe{width:100%;height:520px;border:1px solid var(--lijn);border-radius:4px;background:#f4f2ee}