@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:700;font-display:swap;src:url(fonts/barlow-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}

:root{
  --schaal:1.8px;
  --staal:#E9EDF2; --paneel:#FFFFFF; --inkt:#0D2246; --grijs:#5A6574; --lijn:#CDD4DC; --zacht:#F3F5F7;
  --tape:#F5C518; --blauw:#2F62A5; --blauw-d:#1F4A86;
  --groen:#2E7D4F; --oranje:#C26A12; --rood:#B53A2C; --neutraal:#8A94A3;
  --glas:#CFE2EE; --servies:#E0DBF0; --bak:#E8D6AE; --lek:#6E7986; --boven:#F5C518;
  --smal:'Barlow Condensed','Arial Narrow',sans-serif; --tekst:Barlow,system-ui,sans-serif;
  --r:4px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--staal);color:var(--inkt);font:400 17px/1.45 var(--tekst)}
a{color:var(--blauw)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blauw);outline-offset:2px}
h1,h2,h3{font-family:var(--smal);font-weight:700;line-height:1.1;margin:0}
h1{font-size:34px}
h2{font-size:24px;margin:28px 0 10px}
h3{font-size:19px}
p{margin:0 0 10px}
.klein{font-size:14px;color:var(--grijs)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

/* balk */
.balk{background:var(--paneel);color:var(--inkt);border-bottom:1px solid var(--lijn)}
.balk .wrap{display:flex;align-items:center;gap:20px;min-height:56px;flex-wrap:wrap}
.merk{font-family:var(--smal);font-weight:700;font-size:20px;color:var(--inkt);text-decoration:none;display:flex;align-items:center;gap:12px}
.merk img{height:32px;width:auto;display:block}
.merk span{background:var(--tape);color:var(--inkt);padding:2px 8px 1px;border-radius:2px;line-height:24px}
.inlogkop{margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--lijn)}
.inlogkop img{height:40px;width:auto;display:block}
.druklogo{display:none}
.nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.nav a{color:var(--grijs);text-decoration:none;padding:8px 12px;border-radius:var(--r);font-weight:500}
.nav a[aria-current=page]{background:#E3EAF4;color:var(--inkt);font-weight:600}
.nav a:hover{color:var(--inkt)}
.wie{font-size:14px;color:var(--grijs)}
.wie a{color:var(--blauw);margin-left:10px}
.wie a.wienaam{margin-left:0;font-weight:600}
.wie .wierol{margin-left:6px;color:var(--grijs);font-size:12px}

main{padding:20px 0 60px}

/* dagkiezer */
.strook{display:flex;gap:6px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:thin}
.strook a{flex:0 0 auto;text-decoration:none;color:var(--inkt);background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);padding:6px 12px;text-align:center;min-width:76px}
.strook a b{display:block;font-family:var(--smal);font-size:19px}
.strook a span{font-size:13px;color:var(--grijs)}
.strook a[aria-current=date]{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.strook a[aria-current=date] span{color:#C9D1DA}

.kopregel{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:8px 0 16px}
.cijfers{display:flex;gap:28px;flex-wrap:wrap}
.cijfers div{font-size:14px;color:var(--grijs)}
.cijfers b{display:block;font-family:var(--smal);font-size:30px;color:var(--inkt);line-height:1}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:var(--r);border:1px solid var(--blauw);
  background:var(--blauw);color:#fff;font:600 17px var(--tekst);text-decoration:none;cursor:pointer}
.knop:hover{background:var(--blauw-d)}
.knop.licht{background:var(--paneel);color:var(--blauw)}
.knop.licht:hover{background:var(--zacht)}
.knop.goed{background:var(--groen);border-color:var(--groen)}
.knoppen{display:flex;gap:10px;flex-wrap:wrap}

/* orderlijst */
.lijst{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r)}
.rij{display:grid;grid-template-columns:96px 1fr auto;gap:4px 16px;padding:14px 16px;border-top:1px solid var(--lijn);text-decoration:none;color:var(--inkt);align-items:center}
.rij:first-child{border-top:0}
.rij:hover{background:var(--zacht)}
.rij .nr{font-family:var(--smal);font-weight:700;font-size:24px}
.rij .waar b{font-weight:600}
.rij .wat{grid-column:2/3;font-size:15px;color:var(--grijs)}
.rij .tot{text-align:right;font-family:var(--smal);font-size:15px;color:var(--grijs);grid-row:1/3;grid-column:3}
.rij .tot b{display:block;font-size:30px;color:var(--inkt);line-height:1}
.vlag{display:inline-block;font-size:13px;font-weight:600;padding:1px 8px;border-radius:99px;margin-left:6px;vertical-align:2px}
.vlag.v-ok{background:#DCEFE3;color:var(--groen)}
.vlag.v-af{background:#F7E3DF;color:var(--rood)}
.vlag.v-let{background:#FBEBD5;color:var(--oranje)}
.leeg{background:var(--paneel);border:1px dashed var(--lijn);border-radius:var(--r);padding:28px;text-align:center;color:var(--grijs)}

/* pickvoorstel */
.orderkop{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
.orderkop h1{font-size:44px}
.adres{font-size:19px;margin-top:4px}
.feiten{display:flex;gap:24px;flex-wrap:wrap;margin-top:10px;font-size:15px;color:var(--grijs)}
.feiten b{color:var(--inkt);font-weight:600}
.paneel{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);padding:16px}
.dragers{display:flex;flex-direction:column;gap:0;background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r)}
.drager{display:grid;grid-template-columns:84px 1fr;gap:6px 16px;padding:14px 16px;border-top:1px solid var(--lijn);align-items:start}
.drager:first-child{border-top:0}
.tape{display:inline-flex;align-items:baseline;gap:6px;background:var(--tape);color:var(--inkt);font-family:var(--smal);font-weight:700;
  padding:4px 12px 3px;border-radius:2px;line-height:1;white-space:nowrap;box-shadow:inset 0 -3px 0 rgba(0,0,0,.08)}
.tape .n{font-size:30px}
.tape .c{font-size:24px}
.drager .naam,.teller .naam{font-family:var(--smal);font-weight:700;font-size:23px;line-height:1.15}
.maat{font-family:var(--tekst);font-size:14px;color:var(--grijs);margin-left:4px;font-weight:400;white-space:nowrap}
.drager ul{margin:6px 0 0;padding:0;list-style:none}
.drager li{padding:3px 0}
.drager li .k{font-family:var(--smal);font-weight:600;font-size:18px;display:inline-block;min-width:34px}
.deelvol{color:var(--oranje);font-size:14px}

/* kratstapels */
.stapels{display:flex;gap:18px;flex-wrap:wrap}
.stapel{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);padding:14px 16px;flex:1 1 300px;max-width:520px}
.stapel h3{margin-bottom:10px}
.kolommen{display:flex;gap:6px;align-items:flex-end;position:relative;padding-top:4px}
.kolom{width:170px;height:calc(var(--h) * var(--schaal) + 2px);position:relative;display:flex;flex-direction:column-reverse;border:2px solid #9AA4B0;border-top:0;border-radius:0 0 3px 3px;background:repeating-linear-gradient(0deg,transparent 0 9px,#F1F3F5 9px 10px)}
.kolom .rand{position:absolute;left:-2px;right:-2px;bottom:calc(var(--h) * var(--schaal));border-top:2px dashed var(--neutraal)}
.laag{height:calc(var(--h) * var(--schaal));flex:none;border-top:1px solid rgba(28,37,49,.35);font-size:12.5px;line-height:1.2;padding:2px 6px;overflow:hidden;position:relative}
.laag.glas{background:var(--glas)} .laag.groot,.laag.klein{background:var(--servies)} .laag.bak{background:var(--bak)}
.laag.lek{background:var(--lek);color:#fff;font-size:11px;line-height:1;padding-top:1px} .laag.boven{background:var(--boven)}
.laag b{font-family:var(--smal);font-size:15px}
.kolomvoet{font-size:13px;color:var(--grijs);margin-top:4px;width:170px}
.legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--grijs);margin:4px 0 12px}
.legenda span::before{content:'';display:inline-block;width:14px;height:14px;border:1px solid rgba(28,37,49,.35);vertical-align:-2px;margin-right:6px;background:var(--c)}

.blok{margin-top:6px}
.los li,.let li{margin:4px 0}
.let{background:#FFF8E1;border:1px solid #EED68A;border-radius:var(--r);padding:12px 16px}
.let ul,.los ul{margin:0;padding-left:20px}
.fout{background:#FBEAE7;border:1px solid #E4B1A9;border-radius:var(--r);padding:12px 16px}
.goedmelding{background:#E3F2E8;border:1px solid #A9D3B7;border-radius:var(--r);padding:12px 16px;margin-bottom:16px}
details.vrd{margin-top:28px}
details.vrd summary{cursor:pointer;font-weight:600;padding:8px 0}
table{border-collapse:collapse;width:100%;background:var(--paneel)}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--lijn);vertical-align:top;font-size:15px}
th{font-weight:600;color:var(--grijs);font-size:14px}
td.n{text-align:right;font-variant-numeric:tabular-nums}
.code{font-family:var(--smal);font-weight:600;font-size:17px}

/* formulieren */
label{display:block;font-weight:600;margin:16px 0 6px}
input[type=text],input[type=password],input[type=number],select,textarea{width:100%;font:400 17px var(--tekst);padding:11px 12px;border:1px solid #AEB8C4;border-radius:var(--r);background:#fff;color:var(--inkt)}
input[type=number]{width:96px;text-align:center;font-family:var(--smal);font-size:22px;padding:6px}
textarea{min-height:110px}
.teller{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--lijn)}
.keuzes label{display:flex;gap:10px;align-items:center;font-weight:400;margin:0;padding:10px 0;border-bottom:1px solid var(--lijn)}
.keuzes input{width:22px;height:22px}
.inlog{max-width:420px;margin:10vh auto 0}

/* ritten */
.rit{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.rit header{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--lijn);border-left:6px solid var(--neutraal)}
.rit.groen header{border-left-color:var(--groen)} .rit.oranje header{border-left-color:var(--oranje)} .rit.rood header{border-left-color:var(--rood)}
.balkje{height:10px;background:var(--zacht);border-radius:99px;overflow:hidden;width:220px;margin-top:6px}
.balkje i{display:block;height:100%;background:var(--neutraal)}
.groen .balkje i{background:var(--groen)} .oranje .balkje i{background:var(--oranje)} .rood .balkje i{background:var(--rood)}
.stops{margin:0;padding:0;list-style:none;counter-reset:stop}
.stops li{display:grid;grid-template-columns:40px 1fr auto;gap:2px 12px;padding:10px 16px;border-top:1px solid var(--lijn)}
.stops li:first-child{border-top:0}
.stops li::before{counter-increment:stop;content:counter(stop);font-family:var(--smal);font-weight:700;font-size:22px;grid-row:1/3}
.stops .rechts{text-align:right;font-family:var(--smal);font-size:18px}
.rit footer{padding:10px 16px;background:var(--zacht);font-size:15px}
.wagens{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.wagens div{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);padding:10px 14px}
.wagens .extra{border-color:var(--rood);color:var(--rood)}

.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

@media (max-width:640px){
  body{font-size:16px}
  .balk .wrap{gap:4px 12px;padding-top:6px}
  .merk{font-size:19px;gap:9px}
  .merk img{height:24px}
  .merk span{line-height:20px;padding:1px 6px 0}
  .wie{margin-left:auto}
  .nav{order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;margin:0 -8px 4px}
  .nav a{padding:8px 10px;white-space:nowrap}
  h1{font-size:28px}
  .orderkop h1{font-size:36px}
  .drager{grid-template-columns:62px 1fr;gap:6px 12px}
  .tape .n{font-size:24px}
  .drager .naam,.teller .naam{font-size:20px}
  .rij{grid-template-columns:1fr auto}
  .rij .nr{grid-column:1}
  .rij .waar,.rij .wat{grid-column:1/2}
  .rij .tot{grid-column:2;grid-row:1/4}
  .kolom,.kolomvoet{width:calc(50vw - 46px)}
  .teller{grid-template-columns:1fr auto;grid-template-areas:"t n" "o o";gap:6px 12px}
  .teller > :first-child{grid-area:t;justify-self:start;max-width:100%}
  .teller input{grid-area:n}
  .teller .oms{grid-area:o;font-size:14px;color:var(--grijs)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* afdruk */
@page{size:A4;margin:12mm}
.afdruk body,body.afdruk{background:#fff;font-size:12pt}
@media print{
  .balk,.geen-druk,.knoppen{display:none!important}
  body{background:#fff;font-size:11pt}
  main{padding:0}
  .wrap{max-width:none;padding:0}
  .pagina{break-after:page}
  .pagina:last-child{break-after:auto}
  .tape{box-shadow:none;border:1.5px solid #000;background:#fff!important}
  .paneel,.dragers,.stapel,.rit,.lijst{border-color:#888}
  .stapel,.drager,.rit{break-inside:avoid}
  a{color:inherit;text-decoration:none}
  .laag,.legenda span::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{font-size:10pt}
  h2{font-size:15pt;margin:12px 0 6px;break-after:avoid}
  .orderkop h1{font-size:26pt}
  .cijfers b{font-size:20pt}
  .drager{padding:6px 10px;grid-template-columns:60px 1fr}
  .drager .naam{font-size:14pt}
  .tape .n{font-size:20pt} .tape .c{font-size:16pt}
  .stapels{gap:8px}
  .stapel{flex:0 0 auto;max-width:none;padding:6px 8px}
  :root{--schaal:1.15px}
  .kolom,.kolomvoet{width:150px}
  .laag{font-size:10px;line-height:1.1;padding:1px 4px}
  .laag.lek{font-size:8px}
  .kolomvoet{font-size:9pt}
  details.vrd{display:none}
  .druklogo{display:block;height:9mm;width:auto;margin:0 0 4mm}
  .let,.paneel{padding:8px 10px}
}

/* ritten (goedgekeurd door de planning) */
.vlag.v-rit{background:#E3EAF4;color:var(--blauw-d)}
.rit-goed{background:#E8F3EC;border:1px solid #BCDCC7;border-radius:var(--r);padding:12px 16px;margin-bottom:16px;display:flex;gap:12px 20px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.rit-goed.let{background:#FBEBD5;border-color:#EBC896}
.rit-goed.nog{background:var(--zacht);border-color:var(--lijn)}
.rit-goed form{display:inline}
.ritkaart{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.ritkaart>header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-end;padding:14px 16px;background:var(--zacht);border-bottom:1px solid var(--lijn)}
.ritkaart h2{margin:0;font-size:24px}
.ritkaart .rijen .rij{grid-template-columns:72px 1fr auto;grid-template-areas:"laad waar tot" "laad wat tot";align-items:start}
.ritkaart .rijen .rij .laad{grid-area:laad}
.ritkaart .rijen .rij .waar{grid-area:waar}
.ritkaart .rijen .rij .wat{grid-area:wat}
.ritkaart .rijen .rij .tot{grid-area:tot;align-self:center}
@media (max-width:640px){.ritkaart .rijen .rij{grid-template-columns:48px 1fr auto;gap:2px 12px;padding:12px}.ritkaart .laad b{font-size:26px}}
.ritkaart .laad{font-family:var(--smal);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--grijs);display:block}
.ritkaart .laad b{display:block;font-size:30px;line-height:1;color:var(--inkt);letter-spacing:0}
.ritkaart footer{padding:12px 16px;border-top:1px solid var(--lijn)}
/* regelbeheer */
a.paneel:hover{background:var(--zacht)}
.vlag.v-rit{vertical-align:2px}

/* memo's van kantoor */
.memo{background:#FFF3C4;border:2px solid #E0B400;border-left-width:10px;border-radius:var(--r);padding:10px 14px;margin:14px 0;break-inside:avoid}
.memo-kop{font-family:var(--smal);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:#6B4E00}
.memo-tekst{font-size:19px;font-weight:600;white-space:pre-line;margin:2px 0 4px;overflow-wrap:anywhere}
.memo form{margin-top:8px}
.vlag.v-memo{background:#FFE08A;color:#6B4E00}
.memoregel{display:block;font-weight:600;color:#6B4E00;margin-top:3px;white-space:pre-line;overflow-wrap:anywhere}
.memoformulier textarea{min-height:90px}
@media print{.memo{background:#fff;border:2px solid #000;border-left-width:10px}.memo-kop,.memo-tekst,.memoregel{color:#000}}
.tabelrol{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabelrol table{min-width:520px}