/* PCO-beheerscherm. Huisstijl van pco-group.com: signaalrood #db0812 op wit.
   Ontwerprichting: industriele precisie, een werkbon en geen dashboard. PCO levert
   machines aan bioscopen en de monteur staat aan zo'n machine, dus rechte hoeken,
   harde randen, tabulaire cijfers en rood alleen waar het echt een signaal is.

   GEEN externe bronnen: op de klantomgeving staat het uitgaand verkeer dicht, dus geen
   webfont en geen CDN. Dat dwingt een systeemstack af, en die is met de juiste maten en
   letterafstand prima. */

:root{
  --rood:#e2000f;          /* het echte PCO-rood, uit hun logo-svg */
  --rood-diep:#b30009;
  --rood-was:#fdf0f0;
  --inkt:#14161a;
  --grijs:#5b626c;
  --grijs-licht:#8b929c;
  --lijn:#dfe3e8;
  --lijn-hard:#c2c8d0;
  --vlak:#f6f7f9;
  --goed:#0e6b3a;  --goed-was:#eef7f1;
  --let-op:#8a5a00; --let-op-was:#fdf6e7;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Ubuntu,
         "Helvetica Neue",Helvetica,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --schaduw:0 1px 2px rgba(20,22,26,.06), 0 1px 1px rgba(20,22,26,.04);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--vlak); color:var(--inkt);
  font:16px/1.55 var(--sans); font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---- kop: de rode band is het merk, niet een gekleurde pagina ---- */
header{background:#fff; border-bottom:1px solid var(--lijn); padding:0}
header::before{
  content:"PCO"; display:block; background:var(--rood); color:#fff;
  font-weight:800; font-size:.82rem; letter-spacing:.22em;
  padding:.55rem 1rem .5rem;
}
header .wie{
  color:var(--grijs); font-size:.82rem; padding:.7rem 1rem .1rem;
  letter-spacing:.01em;
}
header .wie b{color:var(--inkt); font-weight:650}

nav{display:flex; flex-wrap:wrap; gap:0; padding:.5rem 1rem 0; margin:0}
nav a{
  display:block; padding:.75rem .85rem; min-height:46px; line-height:1.6;
  text-decoration:none; color:var(--grijs); font-size:.93rem; font-weight:550;
  border-bottom:3px solid transparent; margin-bottom:-1px;
  transition:color .12s ease, border-color .12s ease;
}
nav a:hover{color:var(--inkt)}
nav a.actief{color:var(--inkt); font-weight:700; border-bottom-color:var(--rood)}

main{max-width:58rem; margin:0 auto; padding:1.4rem 1rem 4rem}

h1{
  font-size:1.5rem; font-weight:750; letter-spacing:-.018em;
  margin:.1rem 0 .3rem; line-height:1.2;
}
h2{font-size:1.02rem; font-weight:700; letter-spacing:-.008em; margin:1.8rem 0 .6rem}
h3{margin:0 0 .45rem; font-size:1.02rem; font-weight:700; letter-spacing:-.008em}
p{margin:.5rem 0}

/* ---- kaart als werkbon ---- */
.kaart{
  background:#fff; border:1px solid var(--lijn); border-left:3px solid var(--lijn-hard);
  border-radius:3px; padding:1.05rem 1.1rem; margin-bottom:.85rem;
  box-shadow:var(--schaduw);
}
main > .kaart, main > form > .kaart{animation:opkomst .26s ease both}
.kaart:nth-of-type(2){animation-delay:.04s}
.kaart:nth-of-type(3){animation-delay:.08s}
.kaart:nth-of-type(4){animation-delay:.12s}
.kaart:nth-of-type(n+5){animation-delay:.16s}
@keyframes opkomst{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kaart{animation:none}}

/* ---- merkjes: ticket, onderwerp, rol. Voorrang is het enige dat rood mag ---- */
.merk{
  display:inline-block; padding:.2rem .5rem; margin:0 .35rem .35rem 0;
  border:1px solid var(--lijn-hard); border-radius:2px; background:#fff;
  color:var(--grijs); font-size:.74rem; font-weight:650;
  letter-spacing:.06em; text-transform:uppercase; vertical-align:middle;
}
.merk:first-of-type{font-family:var(--mono); letter-spacing:.02em; text-transform:none}
.merk.voorrang{
  background:var(--rood); border-color:var(--rood); color:#fff; letter-spacing:.08em;
}

.uitleg{color:var(--grijs); font-size:.88rem; line-height:1.5}
.groot{
  font-size:2.4rem; font-weight:750; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1.05;
}

blockquote{
  margin:.65rem 0; padding:.7rem .9rem; background:var(--vlak);
  border-left:2px solid var(--lijn-hard); border-radius:0 2px 2px 0;
  white-space:pre-wrap; font-size:.95rem;
}

/* ---- invoer ---- */
label{
  display:block; margin:1rem 0 .3rem; font-size:.78rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--grijs);
}
input[type=text],input[type=password],textarea,select,input[type=file]{
  width:100%; padding:.72rem .8rem; min-height:48px; font:inherit;
  color:var(--inkt); background:#fff;
  border:1px solid var(--lijn-hard); border-radius:3px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:none; border-color:var(--rood); box-shadow:0 0 0 3px var(--rood-was);
}
textarea{min-height:8rem; line-height:1.5; resize:vertical}

button{
  min-height:52px; padding:.85rem 1.3rem; margin-top:1.1rem; width:100%;
  font:inherit; font-weight:700; letter-spacing:.01em; color:#fff;
  background:var(--rood); border:1px solid var(--rood); border-radius:3px;
  cursor:pointer; transition:background .12s ease;
}
button:hover{background:var(--rood-diep); border-color:var(--rood-diep)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:3px solid var(--rood-was); outline-offset:2px}
button.stil{background:#fff; color:var(--inkt); border-color:var(--lijn-hard)}
button.stil:hover{background:var(--vlak); border-color:var(--grijs-licht)}

a.knop{
  display:block; margin-top:1.1rem; padding:.9rem; min-height:52px;
  text-align:center; text-decoration:none; font-weight:700;
  color:var(--inkt); background:#fff;
  border:1px solid var(--lijn-hard); border-radius:3px;
}
a.knop:hover{background:var(--vlak)}
.rij-knoppen{display:flex; gap:.7rem; flex-wrap:wrap}
.rij-knoppen form,.rij-knoppen a{flex:1 1 12rem}

/* ---- meldingen ---- */
.melding{
  padding:.85rem 1rem; margin-bottom:1.1rem; border:1px solid; border-left-width:3px;
  border-radius:0 3px 3px 0; font-size:.93rem; font-weight:550;
}
.melding.goed{background:var(--goed-was); border-color:var(--goed); color:var(--goed)}
.melding.fout{background:var(--rood-was); border-color:var(--rood); color:var(--rood-diep)}
.melding.let-op{background:var(--let-op-was); border-color:var(--let-op); color:var(--let-op)}

/* ---- tabellen: cijfers horen uitgelijnd ---- */
table{width:100%; border-collapse:collapse; font-size:.94rem}
th{
  color:var(--grijs); font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.5rem .5rem .45rem 0; border-bottom:1px solid var(--lijn-hard);
}
td{padding:.6rem .5rem .6rem 0; border-bottom:1px solid var(--lijn)}
tr:last-child td{border-bottom:none}
td.getal,th.getal{text-align:right; font-variant-numeric:tabular-nums; padding-right:0}

a{color:var(--rood-diep); text-decoration-thickness:1px; text-underline-offset:2px}
/* In een tabel is elke regel een link; allemaal rood onderstreept leest als een
   waarschuwing in plaats van een lijst. De streep komt terug bij aanwijzen. */
table a{color:var(--inkt); text-decoration:none}
table a:hover{color:var(--rood); text-decoration:underline}
a:hover{color:var(--rood)}

/* ---- het echte PCO-logo, als data-URI want er mag niets extern geladen worden ---- */
header::before{
  content:""; display:block; box-sizing:content-box; height:34px;
  margin:0; padding:.9rem 1rem .35rem;
  background:#fff url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xX0tvcGllIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE3Ni4xcHgiIGhlaWdodD0iNzIuNHB4IiB2aWV3Qm94PSItMjAxLjYgMzgzLjggMTc2LjEgNzIuNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAtMjAxLjYgMzgzLjggMTc2LjEgNzIuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPiAuc3Qwe2ZpbGw6I0UyMDAwRjt9IC5zdDF7ZGlzcGxheTpub25lO30gLnN0MntkaXNwbGF5OmlubGluZTtmaWxsOiNFMjAwMEY7fSA8L3N0eWxlPiA8Zz4gPGc+IDxnPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTU0LjgsNDQyLjhjLTguMiwwLTE1LjEtMi45LTIwLjctOC42Yy01LjctNS43LTguNS0xMi43LTguNS0yMC45YzAtOC4yLDIuOC0xNS4yLDguNS0yMC45IGM1LjctNS43LDEyLjYtOC42LDIwLjctOC42YzguMiwwLDE1LjEsMi45LDIwLjgsOC42YzUuNyw1LjcsOC41LDEyLjcsOC41LDIwLjljMCw4LjItMi44LDE1LjItOC41LDIwLjkgQy0zOS43LDQzOS45LTQ2LjYsNDQyLjgtNTQuOCw0NDIuOHogTS01NC44LDQwNS43Yy0xLjYsMC0zLDAuNi00LDEuN2MtMS4xLDEuMS0xLjYsMi42LTEuNiw0LjNzMC41LDMuMSwxLjYsNC4zIGMxLjEsMS4xLDIuNCwxLjcsNCwxLjdjMS42LDAsMy0wLjYsNC4xLTEuN2MxLjEtMS4xLDEuNi0yLjYsMS42LTQuM3MtMC41LTMuMS0xLjYtNC4zQy01MS44LDQwNi4zLTUzLjEsNDA1LjctNTQuOCw0MDUuN3oiLz4gPC9nPiA8Zz4gPGc+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tMTk1LjUsNDIzLjFjLTAuNiwwLTAuOSwwLjMtMC45LDF2MC41aDEuOFY0MjRDLTE5NC42LDQyMy41LTE5NC45LDQyMy4xLTE5NS41LDQyMy4xeiBNLTE5My45LDQxMi42IGMtMS4zLDAtMi40LDAuMi0yLjQsMS4yYzAsMC45LDAuOSwxLjIsMi40LDEuMmMxLjUsMCwyLjQtMC4zLDIuNC0xLjJDLTE5MS41LDQxMy0xOTIuMSw0MTIuNi0xOTMuOSw0MTIuNnogTS0xOTUuNSwzOTIuMSBjLTAuNSwwLTAuOSwwLjItMC45LDF2MC42aDEuOXYtMC41Qy0xOTQuNSwzOTIuMy0xOTQuOSwzOTIuMS0xOTUuNSwzOTIuMXogTS0xNjcsMzg0LjdoLTM0LjZ2NTcuMWgyNS4zdi0yMy41IGM0LjMsMy4zLDguNyw1LDEzLjEsNWM1LjIsMCw5LjctMS45LDEzLjQtNS42YzMuNy0zLjcsNS42LTguMyw1LjYtMTMuNmMwLTUuNS0yLTEwLTUuOS0xMy44IEMtMTU0LjEsMzg2LjYtMTU5LjcsMzg0LjctMTY3LDM4NC43eiBNLTE5Ny43LDM5Mi45YzAtMS44LDEuMi0yLjUsMi4zLTIuNWMwLjgsMCwyLjIsMC40LDIuMiwyLjV2MC43aDMuMXYxLjdoLTcuNlYzOTIuOXogTS0xOTMuOCw0MzcuMWMtMi4zLDAtNC0xLjQtNC0zLjRjMC0wLjcsMC4yLTEuMywwLjYtMmgxLjZjLTAuNSwwLjctMC43LDEuMS0wLjcsMS44YzAsMS4yLDAuOSwxLjksMi42LDEuOSBjMS40LDAsMi40LTAuNSwyLjQtMS41YzAtMC4yLTAuMS0wLjUtMC4yLTAuN2gtMS4zdjAuOWgtMS4zdi0yLjZoMy4zYzAuNSwwLjcsMC45LDEuNSwwLjksMi41IEMtMTkwLDQzNS43LTE5MS42LDQzNy4xLTE5My44LDQzNy4xeiBNLTE5MC4xLDQyNC42djEuN2gtNy42di0yLjVjMC0xLjYsMC45LTIuNCwyLjEtMi40YzAuOSwwLDEuNCwwLjQsMS44LDEuMyBjMC40LTAuNywyLjEtMC45LDMuNy0xLjZ2MS44bC0xLjQsMC40Yy0xLjYsMC41LTEuOCwwLjYtMS44LDEuM0gtMTkwLjF6IE0tMTk0LDQxNi44Yy0yLjYsMC0zLjgtMS41LTMuOC0zYzAtMS40LDEuMS0zLDMuOS0zIGMzLDAsMy45LDEuNywzLjksM0MtMTkwLDQxNS4zLTE5MS4xLDQxNi44LTE5NCw0MTYuOHogTS0xOTIuNyw0MDUuOWgtNXYtMS43aDUuMmMwLjYsMCwxLTAuMywxLTAuOWMwLTAuNy0wLjQtMC45LTEuMS0wLjloLTUuMSB2LTEuN2g1YzEuNywwLDIuNywwLjksMi43LDIuN0MtMTkwLDQwNC44LTE5MC44LDQwNS45LTE5Mi43LDQwNS45eiBNLTE2OS43LDQwOGMtMS4yLDEuMi0yLjcsMS44LTQuNiwxLjggYy0wLjYsMC0xLjMtMC4xLTIuMS0wLjN2LTEyLjRoMi43YzEuOCwwLDMuMywwLjYsNC4zLDEuN2MxLDEuMSwxLjUsMi42LDEuNSw0LjVDLTE2Ny45LDQwNS4yLTE2OC41LDQwNi44LTE2OS43LDQwOHogTS0xMDUsNDE3LjJjLTIuOCwwLTQuOS0wLjQtNi40LTEuMmMtMS41LTAuOC0yLjItMS45LTIuMi0zLjNjMC0yLjksMi43LTQuNCw4LTQuNGMzLjcsMCw3LjIsMC41LDEwLjMsMS42bDEwLjYtMjAuMiBjLTIuOC0xLjgtNi40LTMuMy0xMC42LTQuNGMtNC4zLTEuMS04LjQtMS42LTEyLjQtMS42Yy05LjIsMC0xNi44LDIuOC0yMi44LDguNGMtNiw1LjYtOSwxMi44LTksMjEuNGMwLDguMiwyLjksMTUuMSw4LjYsMjAuNyBjNS44LDUuNiwxMy41LDguNCwyMy4yLDguNGMzLjksMCw3LjktMC41LDEyLjItMS42YzQuMi0xLjEsNy45LTIuNSwxMC44LTQuM2wtMTAuNi0yMS42Qy05OCw0MTYuNi0xMDEuMiw0MTcuMi0xMDUsNDE3LjJ6Ii8+IDwvZz4gPC9nPiA8ZyBjbGFzcz0ic3QxIj4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS0yMDEuNiw0NDYuOWgyLjVjMS44LDAsMi41LDEuMiwyLjUsMi4zYzAsMC44LTAuNCwyLjItMi41LDIuMmgtMC43djMuMWgtMS43VjQ0Ni45eiBNLTE5OS40LDQ1MC4xIGMwLjgsMCwxLTAuNCwxLTAuOWMwLTAuNS0wLjItMC45LTEtMC45aC0wLjZ2MS45SC0xOTkuNHoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS0xOTEuNSw0NDYuOGMxLjQsMCwzLDEuMSwzLDMuOWMwLDMtMS43LDMuOS0zLDMuOWMtMS41LDAtMy0xLjEtMy00Qy0xOTQuNSw0NDguMS0xOTMsNDQ2LjgtMTkxLjUsNDQ2Ljh6IE0tMTkxLjUsNDUzLjFjMC44LDAsMS4yLTAuNiwxLjItMi40YzAtMS4zLTAuMi0yLjQtMS4yLTIuNGMtMC45LDAtMS4yLDAuOS0xLjIsMi40Qy0xOTIuNyw0NTIuMi0xOTIuNCw0NTMuMS0xOTEuNSw0NTMuMXoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS0xODUuOSw0NDYuOWgyLjVjMS44LDAsMi41LDEuMiwyLjUsMi4zYzAsMC44LTAuNCwyLjItMi41LDIuMmgtMC43djMuMWgtMS43VjQ0Ni45eiBNLTE4My43LDQ1MC4xIGMwLjgsMCwxLTAuNCwxLTAuOWMwLTAuNS0wLjItMC45LTEtMC45aC0wLjZ2MS45SC0xODMuN3oiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS0xNzMuOSw0NTQuMWMtMC41LDAuNC0xLDAuNi0xLjgsMC42Yy0xLjgsMC0zLjEtMS41LTMuMS0zLjhjMC0yLjQsMS4yLTQsMy4xLTRjMC42LDAsMS4yLDAuMSwxLjcsMC40djEuNSBjLTAuNi0wLjMtMC45LTAuNC0xLjMtMC40Yy0xLDAtMS43LDAuOC0xLjcsMi40YzAsMS42LDAuNiwyLjUsMS42LDIuNWMwLjQsMCwxLTAuMiwxLjQtMC42VjQ1NC4xeiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTE2OC41LDQ0Ni44YzEuNCwwLDMsMS4xLDMsMy45YzAsMy0xLjcsMy45LTMsMy45Yy0xLjUsMC0zLTEuMS0zLTRDLTE3MS41LDQ0OC4xLTE3MCw0NDYuOC0xNjguNSw0NDYuOHogTS0xNjguNSw0NTMuMWMwLjgsMCwxLjItMC42LDEuMi0yLjRjMC0xLjMtMC4yLTIuNC0xLjItMi40Yy0wLjksMC0xLjIsMC45LTEuMiwyLjRDLTE2OS43LDQ1Mi4yLTE2OS40LDQ1My4xLTE2OC41LDQ1My4xeiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTE2Mi45LDQ0Ni45aDIuNWMxLjYsMCwyLjQsMC45LDIuNCwyLjFjMCwwLjktMC40LDEuNC0xLjMsMS44YzAuNywwLjQsMC45LDIuMSwxLjYsMy43aC0xLjhsLTAuNC0xLjQgYy0wLjUtMS42LTAuNi0xLjgtMS4zLTEuOHYzLjJoLTEuN1Y0NDYuOXogTS0xNjAuNiw0NTBjMC42LDAsMC45LTAuMywwLjktMC45YzAtMC42LTAuMy0wLjktMS0wLjloLTAuNXYxLjhILTE2MC42eiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTE1NS4zLDQ0Ni45aDEuNmwyLjEsNC4zaDB2LTQuM2gxLjZ2Ny42aC0xLjVsLTIuMi00LjVoMHY0LjVoLTEuNlY0NDYuOXoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS0xNDEuOSw0NDYuOWgxLjZsMi4xLDQuM2gwdi00LjNoMS42djcuNmgtMS41bC0yLjItNC41aDB2NC41aC0xLjZWNDQ2Ljl6Ii8+IDxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0tMTMyLjMsNDQ2LjloMS44bDIsNy42aC0xLjdsLTAuNC0xLjZoLTEuN2wtMC40LDEuNmgtMS43TC0xMzIuMyw0NDYuOXogTS0xMzAuOCw0NTEuN2wtMC42LTIuOGgwbC0wLjYsMi44IEgtMTMwLjh6Ii8+IDxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0tMTIxLjgsNDU0LjFjLTAuNSwwLjQtMSwwLjYtMS44LDAuNmMtMS44LDAtMy4xLTEuNS0zLjEtMy44YzAtMi40LDEuMi00LDMuMS00YzAuNiwwLDEuMiwwLjEsMS43LDAuNHYxLjUgYy0wLjYtMC4zLTAuOS0wLjQtMS4zLTAuNGMtMSwwLTEuNywwLjgtMS43LDIuNGMwLDEuNiwwLjYsMi41LDEuNiwyLjVjMC40LDAsMS0wLjIsMS40LTAuNlY0NTQuMXoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS0xMTksNDQ2LjloMS43djMuMWgxLjl2LTMuMWgxLjd2Ny42aC0xLjd2LTMuMmgtMS45djMuMmgtMS43VjQ0Ni45eiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTEwOC4xLDQ0Ni44YzEuNCwwLDMsMS4xLDMsMy45YzAsMy0xLjcsMy45LTMsMy45Yy0xLjUsMC0zLTEuMS0zLTRDLTExMS4xLDQ0OC4xLTEwOS42LDQ0Ni44LTEwOC4xLDQ0Ni44eiBNLTEwOC4xLDQ1My4xYzAuOCwwLDEuMi0wLjYsMS4yLTIuNGMwLTEuMy0wLjItMi40LTEuMi0yLjRjLTAuOSwwLTEuMiwwLjktMS4yLDIuNEMtMTA5LjMsNDUyLjItMTA5LDQ1My4xLTEwOC4xLDQ1My4xeiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTEwMi43LDQ1Mi40YzAuNywwLjYsMS4xLDAuOCwxLjYsMC44YzAuNCwwLDAuNy0wLjMsMC43LTAuNmMwLTEuMS0yLjQtMS45LTIuNC0zLjhjMC0xLjEsMC45LTEuOSwyLjItMS45IGMwLjUsMCwxLjEsMC4xLDEuNywwLjV2MS40Yy0wLjgtMC40LTEuMS0wLjUtMS41LTAuNWMtMC40LDAtMC43LDAuMi0wLjcsMC41YzAsMC45LDIuNSwyLDIuNSwzLjhjMCwxLjItMC45LDIuMS0yLjIsMi4xIGMtMC42LDAtMS4xLTAuMi0xLjktMC42VjQ1Mi40eiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTkwLjksNDQ2LjloNC40djEuM2gtMi43djEuOGgyLjV2MS4zaC0yLjV2MS45aDIuOHYxLjNoLTQuNVY0NDYuOXoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS04NC4xLDQ1MC43YzAtMi43LDEuNS0zLjksMy0zLjljMC44LDAsMS41LDAuMywyLDAuOWMwLjcsMC43LDEsMS43LDEsM2MwLDEuOS0wLjcsMy4yLTEuOSwzLjcgYzAuMywwLjQsMC44LDAuNiwxLjIsMC42YzAuMiwwLDAuMiwwLDAuNS0wLjFsMC4xLDBsMC4yLDAuMWwtMC45LDEuMmMtMS4zLDAtMi4zLTAuOS0yLjctMS43Qy04My4zLDQ1NC4yLTg0LjEsNDUyLjgtODQuMSw0NTAuNyB6IE0tODEuMiw0NTMuMWMwLjksMCwxLjItMC43LDEuMi0yLjRjMC0xLjQtMC4yLTIuNC0xLjItMi40Yy0wLjksMC0xLjIsMC44LTEuMiwyLjRDLTgyLjQsNDUyLjMtODIuMSw0NTMuMS04MS4yLDQ1My4xeiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTczLjksNDQ2Ljl2NS4yYzAsMC42LDAuMywxLDAuOSwxYzAuNywwLDAuOS0wLjQsMC45LTEuMXYtNS4xaDEuN3Y1YzAsMS43LTAuOSwyLjctMi43LDIuNyBjLTEuNiwwLTIuNy0wLjgtMi43LTIuN3YtNUgtNzMuOXoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS02Ny41LDQ0Ni45aDEuN3Y3LjZoLTEuN1Y0NDYuOXoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS02Mi44LDQ0Ni45aDIuNWMxLjgsMCwyLjUsMS4yLDIuNSwyLjNjMCwwLjgtMC40LDIuMi0yLjUsMi4yaC0wLjd2My4xaC0xLjdWNDQ2Ljl6IE0tNjAuNiw0NTAuMSBjMC44LDAsMS0wLjQsMS0wLjljMC0wLjUtMC4yLTAuOS0xLTAuOWgtMC42djEuOUgtNjAuNnoiLz4gPHBhdGggY2xhc3M9InN0MiIgZD0iTS01NS4zLDQ0Ni45aDEuNmwxLjcsMy4xbDEuNy0zLjFoMS42djcuNmgtMS42di00LjloMGwtMS41LDIuOWgtMC4zbC0xLjUtMi45aDB2NC45aC0xLjZWNDQ2Ljl6Ii8+IDxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0tNDUuOCw0NDYuOWg0LjR2MS4zaC0yLjd2MS44aDIuNXYxLjNoLTIuNXYxLjloMi44djEuM2gtNC41VjQ0Ni45eiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTM4LjcsNDQ2LjloMS42bDIuMSw0LjNoMHYtNC4zaDEuNnY3LjZoLTEuNWwtMi4yLTQuNWgwdjQuNWgtMS42VjQ0Ni45eiIvPiA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNLTI5LjIsNDQ4LjNILTMxdi0xLjNoNS4ydjEuM2gtMS43djYuM2gtMS43VjQ0OC4zeiIvPiA8L2c+IDwvZz4gPGc+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tMjAxLjYsNDUyLjRjMC43LDAuNiwxLjEsMC44LDEuNiwwLjhjMC40LDAsMC43LTAuMywwLjctMC42YzAtMS4xLTIuNC0xLjktMi40LTMuOGMwLTEuMSwwLjktMS45LDIuMi0xLjkgYzAuNSwwLDEuMSwwLjEsMS43LDAuNXYxLjRjLTAuOC0wLjQtMS4xLTAuNS0xLjUtMC41Yy0wLjQsMC0wLjcsMC4yLTAuNywwLjVjMCwwLjksMi41LDIsMi41LDMuOGMwLDEuMi0wLjksMi4xLTIuMiwyLjEgYy0wLjYsMC0xLjEtMC4yLTEuOS0wLjZWNDUyLjR6Ii8+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tMTkyLjYsNDQ2LjloMS42bDIuMSw0LjNoMHYtNC4zaDEuNnY3LjZoLTEuNWwtMi4yLTQuNWgwdjQuNWgtMS42VjQ0Ni45eiIvPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTE4MC44LDQ0Ni45aDEuOGwyLDcuN2gtMS43bC0wLjQtMS42aC0xLjdsLTAuNCwxLjZoLTEuN0wtMTgwLjgsNDQ2Ljl6IE0tMTc5LjMsNDUxLjdsLTAuNi0yLjhoMGwtMC42LDIuOCBILTE3OS4zeiIvPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTE2OCw0NTQuMWMtMC41LDAuNC0xLDAuNi0xLjgsMC42Yy0xLjgsMC0zLjEtMS41LTMuMS0zLjhjMC0yLjQsMS4yLTQsMy4xLTRjMC42LDAsMS4yLDAuMSwxLjcsMC40djEuNSBjLTAuNi0wLjMtMC45LTAuNC0xLjMtMC40Yy0xLDAtMS43LDAuOC0xLjcsMi40YzAsMS42LDAuNiwyLjUsMS42LDIuNWMwLjQsMCwxLTAuMiwxLjQtMC42VjQ1NC4xeiIvPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTE2My4xLDQ0Ni45aDEuN3YzLjdoMGwxLjktMy43aDEuN2wtMS45LDMuNmwyLjQsNGgtMS45bC0yLjItMy43aDB2My43aC0xLjdWNDQ2Ljl6Ii8+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tMTUyLjgsNDQ2LjloNHYxLjNoLTIuM3YxLjhoMi4ydjEuM2gtMi4ydjMuMmgtMS43VjQ0Ni45eiIvPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTE0MS40LDQ0Ni44YzEuNCwwLDMsMS4xLDMsMy45YzAsMy0xLjcsMy45LTMsMy45Yy0xLjUsMC0zLTEuMS0zLTRDLTE0NC40LDQ0OC4xLTE0Mi45LDQ0Ni44LTE0MS40LDQ0Ni44eiBNLTE0MS40LDQ1My4xYzAuOCwwLDEuMi0wLjYsMS4yLTIuNGMwLTEuMy0wLjItMi40LTEuMi0yLjRjLTAuOSwwLTEuMiwwLjktMS4yLDIuNEMtMTQyLjcsNDUyLjItMTQyLjQsNDUzLjEtMTQxLjQsNDUzLjF6Ii8+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tMTMwLjksNDQ2LjhjMS40LDAsMywxLjEsMywzLjljMCwzLTEuNywzLjktMywzLjljLTEuNSwwLTMtMS4xLTMtNEMtMTMzLjksNDQ4LjEtMTMyLjQsNDQ2LjgtMTMwLjksNDQ2Ljh6IE0tMTMwLjksNDUzLjFjMC44LDAsMS4yLTAuNiwxLjItMi40YzAtMS4zLTAuMi0yLjQtMS4yLTIuNGMtMC45LDAtMS4yLDAuOS0xLjIsMi40Qy0xMzIuMSw0NTIuMi0xMzEuOSw0NTMuMS0xMzAuOSw0NTMuMXoiLz4gPHBhdGggY2xhc3M9InN0MCIgZD0iTS0xMjMsNDQ2LjloMi4yYzIuNCwwLDMuMywxLjksMy4zLDMuN2MwLDEuNy0wLjgsMy45LTMuMiwzLjloLTIuM1Y0NDYuOXogTS0xMjAuOSw0NTMuM2MxLjIsMCwxLjYtMSwxLjYtMi41IGMwLTEuNC0wLjQtMi42LTEuNS0yLjZoLTAuNXY1SC0xMjAuOXoiLz4gPHBhdGggY2xhc3M9InN0MCIgZD0iTS0xMDUuNSw0NTIuNGMwLjcsMC42LDEuMSwwLjgsMS42LDAuOGMwLjQsMCwwLjctMC4zLDAuNy0wLjZjMC0xLjEtMi40LTEuOS0yLjQtMy44YzAtMS4xLDAuOS0xLjksMi4yLTEuOSBjMC41LDAsMS4xLDAuMSwxLjcsMC41djEuNGMtMC44LTAuNC0xLjEtMC41LTEuNS0wLjVjLTAuNCwwLTAuNywwLjItMC43LDAuNWMwLDAuOSwyLjUsMiwyLjUsMy44YzAsMS4yLTAuOSwyLjEtMi4yLDIuMSBjLTAuNiwwLTEuMS0wLjItMS45LTAuNlY0NTIuNHoiLz4gPHBhdGggY2xhc3M9InN0MCIgZD0iTS05My45LDQ0Ni44YzEuNCwwLDMsMS4xLDMsMy45YzAsMy0xLjcsMy45LTMsMy45Yy0xLjUsMC0zLTEuMS0zLTRDLTk2LjksNDQ4LjEtOTUuMyw0NDYuOC05My45LDQ0Ni44eiBNLTkzLjksNDUzLjFjMC44LDAsMS4yLTAuNiwxLjItMi40YzAtMS4zLTAuMi0yLjQtMS4yLTIuNGMtMC45LDAtMS4yLDAuOS0xLjIsMi40Qy05NS4xLDQ1Mi4yLTk0LjgsNDUzLjEtOTMuOSw0NTMuMXoiLz4gPHBhdGggY2xhc3M9InN0MCIgZD0iTS04Niw0NDYuOWgxLjd2Ni4yaDIuOHYxLjRILTg2VjQ0Ni45eiIvPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTc1LjMsNDQ2Ljl2NS4yYzAsMC42LDAuMywxLDAuOSwxYzAuNywwLDAuOS0wLjQsMC45LTEuMXYtNS4xaDEuN3Y1YzAsMS43LTAuOSwyLjctMi43LDIuNyBjLTEuNiwwLTIuNy0wLjgtMi43LTIuN3YtNUgtNzUuM3oiLz4gPHBhdGggY2xhc3M9InN0MCIgZD0iTS02NS41LDQ0OC4yaC0xLjd2LTEuM2g1LjJ2MS4zaC0xLjd2Ni4zaC0xLjdWNDQ4LjJ6Ii8+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tNTcuNCw0NDYuOWgxLjd2Ny42aC0xLjdWNDQ2Ljl6Ii8+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tNDcuOCw0NDYuOGMxLjQsMCwzLDEuMSwzLDMuOWMwLDMtMS43LDMuOS0zLDMuOWMtMS41LDAtMy0xLjEtMy00Qy01MC44LDQ0OC4xLTQ5LjMsNDQ2LjgtNDcuOCw0NDYuOHogTS00Ny44LDQ1My4xYzAuOCwwLDEuMi0wLjYsMS4yLTIuNGMwLTEuMy0wLjItMi40LTEuMi0yLjRjLTAuOSwwLTEuMiwwLjktMS4yLDIuNEMtNDksNDUyLjItNDguNyw0NTMuMS00Ny44LDQ1My4xeiIvPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTM5LjksNDQ2LjloMS42bDIuMSw0LjNoMHYtNC4zaDEuNnY3LjZoLTEuNWwtMi4yLTQuNWgwdjQuNWgtMS42VjQ0Ni45eiIvPiA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTI5LjYsNDUyLjRjMC43LDAuNiwxLjEsMC44LDEuNiwwLjhjMC40LDAsMC43LTAuMywwLjctMC42YzAtMS4xLTIuNC0xLjktMi40LTMuOGMwLTEuMSwwLjktMS45LDIuMi0xLjkgYzAuNSwwLDEuMSwwLjEsMS43LDAuNXYxLjRjLTAuOC0wLjQtMS4xLTAuNS0xLjUtMC41Yy0wLjQsMC0wLjcsMC4yLTAuNywwLjVjMCwwLjksMi41LDIsMi41LDMuOGMwLDEuMi0wLjksMi4xLTIuMiwyLjEgYy0wLjYsMC0xLjEtMC4yLTEuOS0wLjZWNDUyLjR6Ii8+IDwvZz4gPC9nPiA8L3N2Zz4=") no-repeat left center;
  background-size:auto 34px;
  /* Zonder deze regel begint de achtergrond bij de RAND en niet bij de padding:
     background-origin staat standaard op padding-box. Het logo plakte dan
     linksboven vast en werd bovenaan afgesneden, terwijl de padding er wel stond. */
  background-origin:content-box; background-position:left top;
}
header{padding:0 0 .1rem}

@media (min-width:44rem){
  header::before,header .wie,nav{padding-left:calc((100vw - 58rem)/2 + 1rem)}
  main{padding-top:1.8rem}
  h1{font-size:1.75rem}
  button,a.knop{width:auto; min-width:14rem}
  .kaart{padding:1.2rem 1.35rem}
}



/* ---- wachtrij: scanbaar, niet vijf uitgeklapte formulieren ---- */
.reden .vak{color:var(--grijs); font-weight:550}
.reden .vak::after{content:' · '; color:var(--grijs-licht)}
/* ---- toegangsbeheer ---- */
.vinkjes{display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin:.2rem 0 .9rem}
label.vink{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:500;
  color:var(--inkt); font-size:.95rem; margin:0; cursor:pointer;
}
label.vink input{width:auto; min-height:0; margin:0}
.let-op{
  margin:.2rem 0 .7rem; padding:.5rem .7rem; font-size:.9rem;
  color:var(--rood-diep); background:#fdf3f4; border-left:3px solid var(--rood);
}
.kaart.gebruiker .vraag{margin-bottom:.2rem}

/* ---- gesprekken: de lijst van wat er gebeurd is ---- */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem}
a.filter{
  display:inline-flex; align-items:baseline; gap:.4rem; padding:.45rem .8rem;
  border:1px solid var(--lijn); border-radius:2px; background:#fff;
  color:var(--grijs); text-decoration:none; font-size:.9rem; font-weight:550;
}
a.filter b{color:var(--inkt); font-variant-numeric:tabular-nums}
a.filter:hover{border-color:var(--grijs-licht); color:var(--inkt)}
a.filter.aan{border-color:var(--rood); color:var(--inkt); box-shadow:inset 0 -2px 0 var(--rood)}
.kaart.gesprek .bon{margin-bottom:.5rem}
.merk.goed{border-color:#b7d9c0; color:#1f6b3a; background:#f2fbf5}
/* Niet aangekomen is een SIGNAAL en geen bijschrift: dit is de enige stand waarin een
   mens iets moet doen dat niemand anders gaat doen. */
.merk.niet-aangekomen{background:var(--rood); border-color:var(--rood); color:#fff}
.let-op.niet-aangekomen p{margin:0 0 8px}
.let-op.niet-aangekomen form{margin:0}
.wanneer{font-family:var(--mono); font-size:.72rem; color:var(--grijs-licht)}
.bon .wanneer + .ticket{margin-left:.6rem}
.onbekend{
  font-weight:550; font-size:.78rem; color:var(--rood-diep);
  border:1px solid #f2c9cc; border-radius:2px; padding:.05rem .3rem; margin-left:.3rem;
}
.gaf{margin:.5rem 0 0; padding-left:.8rem; border-left:3px solid var(--lijn); color:var(--inkt)}
.gaf.leeg{color:var(--grijs); font-style:italic}
/* ---- het overzicht boven de wachtrij ---- */
.kaart.overzicht{padding-bottom:1rem}
.tellingen{display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; margin-bottom:.9rem}
.telling{display:flex; flex-direction:column; gap:.1rem}
.telling b{
  font-size:2.1rem; line-height:1; font-weight:750; color:var(--inkt);
  font-variant-numeric:tabular-nums;
}
.telling span{font-size:.82rem; color:var(--grijs); letter-spacing:.01em}
.telling.dringend b{color:var(--rood)}
.botregel{margin:0 0 .8rem; color:var(--grijs)}
.botregel b{color:var(--inkt)}
.botregel.fout-tekst{color:var(--rood-diep)}
a.schakel{font-weight:600; font-size:.93rem}
/* De afhandelknop is de stille tweede keus naast een kennisitem maken. */
details.doen.terug summary{color:var(--inkt)}
details.doen.terug summary::before{content:'> '; color:var(--grijs)}
form.afdoen{margin:.7rem 0 0}
button.stil{
  width:auto; min-width:0; min-height:0; padding:.3rem 0; background:none;
  border:none; color:var(--grijs); font-size:.88rem; font-weight:550;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
button.stil:hover{color:var(--rood)}
.bon{display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; margin-bottom:.6rem}
.bon .ticket{
  margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--grijs-licht);
  letter-spacing:.02em;
}
.vraag{
  font-size:1.12rem; font-weight:600; line-height:1.4; letter-spacing:-.012em;
  margin:.1rem 0 .55rem; color:var(--inkt);
}
.reden{margin:0 0 .7rem; font-size:.86rem; color:var(--grijs)}
.reden b{color:var(--inkt); font-weight:650}
.reden .poort{color:var(--grijs-licht)}
.concept{
  background:var(--vlak); border-left:2px solid var(--lijn-hard);
  padding:.6rem .8rem; font-size:.93rem; border-radius:0 2px 2px 0;
}
.concept .cl{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--grijs-licht); margin-bottom:.2rem;
}
.geen-concept{margin:.3rem 0; font-size:.86rem; color:var(--grijs-licht); font-style:italic}

.kaart.dringend{border-left-color:var(--rood)}
.merk.voorrang{background:var(--rood); border-color:var(--rood); color:#fff}

details.doen{margin-top:.8rem; border-top:1px solid var(--lijn); padding-top:.2rem}
details.doen > summary{
  cursor:pointer; list-style:none; padding:.65rem 0 .2rem;
  font-size:.88rem; font-weight:650; color:var(--rood-diep);
}
details.doen > summary::-webkit-details-marker{display:none}
details.doen > summary::before{content:"+ "; font-weight:700}
details.doen[open] > summary::before{content:"3 "}
details.doen > summary:hover{color:var(--rood)}
details.doen[open] > summary{color:var(--grijs)}
details.doen label:first-of-type{margin-top:.6rem}

/* ---- breed scherm: gebruik de ruimte, houd de regel leesbaar ---- */
@media (min-width:60rem){
  main{max-width:64rem}
  .kaart{padding:1.3rem 1.5rem}
  .vraag{font-size:1.2rem; max-width:46rem}
  header::before,header .wie,nav{padding-left:calc((100vw - 64rem)/2 + 1rem)}
}