:root{color-scheme:dark;--bg:#0c1421;--paneel:#131f30;--rand:#29384b;--tekst:#edf2f7;--muted:#9dacc0;--oranje:#ff9e2c;--rood:#fa6672;--groen:#50d4b0;--blauw:#65b8ee}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tekst);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}a:hover{color:var(--oranje)}button,.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:9px;background:var(--oranje);color:#101927;font-weight:750;font-size:14px;padding:11px 16px;cursor:pointer;line-height:1.3;text-decoration:none}button:hover,.knop:hover{filter:brightness(1.12);color:#101927}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #7acfff;outline-offset:3px}.secundair{background:#1d2c40;border-color:#35465d;color:var(--tekst)}.secundair:hover{color:white}.tekstknop{background:transparent;color:var(--muted);border:0;padding:4px 0;font-size:12px}.tekstknop:hover{color:var(--oranje)}.klein{padding:7px 10px;font-size:12px}.balk{height:84px;padding:14px 4vw;display:flex;align-items:center;border-bottom:1px solid var(--rand);gap:30px;background:#101a29}.logo{width:230px;max-height:58px;object-fit:contain}.balk nav{display:flex;gap:22px;align-items:center;margin-left:auto}.versie{color:var(--muted);font-size:12px}.bovenregel{color:var(--oranje);font-size:10px;font-weight:800;letter-spacing:1.8px;margin:0 0 9px}h1,h2,h3,p{margin-top:0}h1{font-size:40px;line-height:1.15;letter-spacing:-1px;margin-bottom:20px}h2{font-size:20px;line-height:1.25;margin-bottom:10px}h3{font-size:15px;line-height:1.3;margin-bottom:6px}p{color:var(--muted)}small{color:var(--muted)}.paneel{border:1px solid var(--rand);background:var(--paneel);border-radius:14px;padding:25px}.smal{max-width:550px;margin:65px auto;padding:0 18px}.breed{max-width:1050px}label{display:block;font-size:13px;margin:15px 0;color:var(--muted)}input:not([type=checkbox]):not([type=range]),select,textarea{width:100%;padding:11px 12px;border:1px solid #3b4b61;border-radius:8px;background:#0e1929;color:var(--tekst);font:inherit}input[type=checkbox]{width:17px;height:17px;accent-color:var(--oranje);flex-shrink:0}input[type=range]{width:100%;accent-color:var(--oranje)}textarea{min-height:100px}form button{margin-top:5px}.regel{display:flex;gap:8px;align-items:center}.scheiding{height:1px;background:var(--rand);margin:28px 0}.fout{background:#4b2532;color:#ffb5ba;padding:12px;border-radius:8px}.goed{color:var(--groen)}.valstrik{position:absolute;left:-10000px}.knoppen{display:flex;gap:9px;flex-wrap:wrap}.landing{max-width:1440px;margin:auto;padding:0 5vw}.held{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;min-height:650px;padding:65px 0}.held h1{font-size:clamp(40px,4.7vw,74px);font-weight:850;letter-spacing:-2.8px;line-height:1.06}.held h1 em{font-style:normal;color:var(--oranje)}.intro{font-size:17px;max-width:530px;line-height:1.75}.held-beeld{position:relative;isolation:isolate}.held-beeld img{position:relative;width:115%;margin-left:-8%;filter:drop-shadow(0 30px 35px #0008)}.cirkel{position:absolute;inset:5%;border-radius:50%;background:radial-gradient(circle,#b46a1f33,#121e3000 70%);z-index:-1}.zwevend{position:absolute;bottom:0;right:10%;padding:15px 23px;border:1px solid #7d582b;border-radius:12px;background:#1e2934;font-size:11px;letter-spacing:1px;box-shadow:0 15px 35px #0004}.zwevend strong{display:block;font-size:16px;letter-spacing:0;margin-top:5px}.stip{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--groen);margin-right:5px}.held-feiten{display:flex;gap:30px;margin-top:35px;color:var(--muted);font-size:12px}.held-feiten strong{display:block;font-size:23px;color:white}.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.nummer{color:var(--oranje);font-size:24px;font-weight:800;display:block;margin-bottom:20px}footer{max-width:1300px;margin:50px auto 25px;padding:20px;color:var(--muted);font-size:12px;border-top:1px solid var(--rand)}footer a{float:right}table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px}th,td{padding:14px;border-bottom:1px solid var(--rand)}.tabelscroll{overflow:auto}.spelbalk{height:76px;padding:10px 22px;gap:24px}.spelbalk .logo{width:185px}.spelbalk nav{gap:9px;font-size:12px}.spelbalk nav a{padding:5px}.depotkop{border-left:1px solid var(--rand);padding-left:22px}.depotkop strong,.depotkop small{display:block}.depotkop strong{font-size:16px}.depotkop small{font-size:11px}.statistieken{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rand);border-bottom:1px solid var(--rand)}.statistieken>div{background:#101a29;padding:13px 24px}.statistieken small{display:block;font-size:9px;letter-spacing:1px}.statistieken strong{font-size:23px}.statistieken strong small{display:inline;font-size:13px;letter-spacing:0}.werkplek{display:grid;grid-template-columns:minmax(310px,355px) minmax(340px,1fr) minmax(280px,315px);gap:14px;padding:16px;height:calc(100dvh - 153px);min-height:650px}.werkplek>.paneel{padding:0;overflow:hidden}.paneelkop{padding:18px 17px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}.paneelkop h2{font-size:17px;margin:0}.paneelkop .bovenregel{font-size:8px}.paneelkop>span,.paneelkop h2 span{color:var(--muted);font-size:13px}.pakkettenpaneel{display:flex;flex-direction:column}.filters{display:flex;gap:8px;padding:9px 14px}.filters select{font-size:11px;padding:8px}.pakketlijst{overflow:auto;flex:1;min-height:120px;padding:0 12px 10px}.pakket{background:#192639;border:1px solid #2a3a50;border-radius:9px;margin:8px 0;padding:12px}.pakket.spoed{border-left:3px solid var(--rood)}.pakket.geselecteerd{background:#3b3023;border-color:var(--oranje)}.pakketkeuze{display:flex;align-items:center;gap:9px;cursor:pointer;margin:0}.pakketkeuze b{color:var(--tekst);font-size:12px;display:block}.pakketkeuze small{font-size:10px;display:block;margin-top:3px}.pakketkeuze>span:nth-child(2){flex:1}.pakketkeuze .tijd{text-align:right;color:var(--muted);font-size:8px;white-space:nowrap}.pakket.spoed .tijd{color:var(--rood)}.tijd b{font-size:14px;margin-top:3px}.pakketdetails{font-size:10px;color:var(--muted);margin-top:10px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px}.labels{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}.labels span{font-size:9px;background:#0c1625aa;border-radius:4px;padding:3px 5px;color:#b5c3d5}.routevak{padding:14px;border-top:1px solid var(--rand);background:#182639}.routevak>strong{font-size:12px}.routevak label{margin:10px 0 6px}.routevak select{font-size:12px;padding:9px}.routevak .knoppen{flex-wrap:nowrap}.routevak button{font-size:12px;flex:1;padding:10px}.ritinfo{font-size:10px;color:var(--muted);margin:8px 0 12px}#volgorde{display:flex;gap:6px;flex-wrap:wrap;max-height:80px;overflow:auto;padding:0;margin:5px 0;list-style:none}#volgorde li{background:#0d1929;padding:2px 6px;border-radius:5px;font-size:10px}#volgorde button{padding:0 3px;min-width:18px}.kaartkolom{display:flex;flex-direction:column;min-height:0}.kaartkop{display:flex;align-items:center;gap:12px;padding:3px 3px 13px;font-size:13px}.kaartkop span{margin-left:auto;font-size:10px;color:var(--oranje)}#kaart{height:100%;min-height:320px;flex:1;background:#263644;border-radius:12px;border:1px solid var(--rand);z-index:0}.kaartlegenda{font-size:9px;display:flex;gap:10px;padding:9px 2px;flex-wrap:wrap;color:var(--muted)}.kaartlegenda small{margin-left:auto;font-size:9px}.oranje{color:var(--oranje)}.rood{color:var(--rood)!important}.blauw{color:var(--blauw)}.meldingen{padding:0;flex:0 0 190px;overflow:hidden}.meldingen .paneelkop{padding:12px 15px}#meldingen{height:138px;overflow:auto;padding:0 15px 12px}.log{display:flex;gap:13px;font-size:11px;padding:6px 0;border-bottom:1px solid #263447}.log time{color:var(--muted);font-size:10px;padding-top:1px}.log.waarschuwing span{color:var(--oranje)}.log.fout span{color:var(--rood)}.vlootpaneel{display:flex;flex-direction:column}#vloot{overflow:auto;padding:0 12px 15px}.voertuig{border:1px solid var(--rand);border-radius:10px;margin-top:10px;padding:12px;background:#182638}.voertuig.aandacht{border-color:var(--rood)}.voertuigkop{display:flex;gap:8px;align-items:center}.voertuigkop img{width:93px;height:70px;object-fit:contain}.voertuigkop small{font-size:10px}.voertuigkop>div>small{display:block;margin-top:6px}.status{font-size:9px;border-radius:4px;padding:3px 6px;background:#263a4d;color:#b1c9df}.status.depot{background:#193c37;color:var(--groen)}.status.aandacht{background:#472c38;color:var(--rood)}.voertuigvoet{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:7px;font-size:10px;color:var(--muted)}.voertuigvoet span:nth-child(2){text-align:right}.voortgang{height:4px;background:#34465c;border-radius:5px;margin-top:13px}.voortgang i{display:block;height:100%;background:var(--oranje);border-radius:5px;transition:width 1s}.probleem{padding:10px 0 0;border-top:1px solid var(--rand);margin-top:10px}.probleem b{font-size:11px}.probleem .knoppen{margin:10px 0}.probleem select{font-size:11px;padding:8px;margin-bottom:7px}.extra-menu{position:absolute;right:16px;top:72px;z-index:999;background:var(--paneel);border:1px solid var(--rand);padding:15px;border-radius:10px;box-shadow:0 10px 30px #0009}.extra-menu a,.extra-menu>button,.extra-menu form{display:block;width:100%;margin:7px 0}.extra-menu form button{width:100%}[hidden]{display:none!important}dialog{background:var(--bg);color:var(--tekst);border:1px solid var(--rand);border-radius:18px;padding:30px;width:min(1100px,95vw);max-height:90dvh;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#020813b8;backdrop-filter:blur(4px)}#instellen{max-width:580px}dialog .dialoogkop{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}#instellen .dialoogkop{display:block}dialog h1{font-size:31px}dialog .sluiten{flex-shrink:0;padding:9px 13px}dialog p{font-size:13px}dialog small{display:block;margin-top:12px}.zoekregel{display:flex;gap:8px}.zoekregel input{flex:1}.zoekregel button{margin:0}.plaatskeuze{display:block;width:100%;text-align:left;font-size:12px;margin-top:6px}.winkelraster{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:20px}.winkelkaart{background:var(--paneel);border:1px solid var(--rand);border-radius:13px;padding:18px}.winkelbeeld{height:145px;background:radial-gradient(ellipse,#ff9e2c16,transparent 70%);margin-bottom:12px}.winkelbeeld img{width:100%;height:100%;object-fit:contain}.winkelkaart h2{font-size:21px}.winkelkaart p{font-size:12px;min-height:40px}.winkelkaart dl{font-size:11px}.winkelkaart dl div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--rand)}dt{color:var(--muted)}dd{margin:0;font-weight:650}.koopregel{display:flex;align-items:center;justify-content:space-between;margin-top:15px}.koopregel strong{font-size:23px;color:var(--oranje)}.eigenvloot{grid-column:1/-1;padding:15px 0}.eigenvloot button{margin:4px}#toost{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#f4a13a;color:#101927;border-radius:10px;padding:13px 22px;z-index:10000;box-shadow:0 8px 35px #0008;max-width:90vw;font-weight:650;font-size:13px}.melding{background:#503c19;padding:10px;text-align:center}.depot-marker{background:#152233;border:2px solid #ffa12e;border-radius:10px;color:#ffa12e;font-size:24px;line-height:29px;text-align:center;box-shadow:0 3px 9px #0008}.automaat-marker{background:#1b5083;border:1px solid #82bce2;border-radius:6px;color:white;text-align:center;line-height:23px;font-size:18px}.rijdend-marker{position:relative;filter:drop-shadow(0 3px 2px #0008)}.rijdend-marker img{width:64px;height:45px;object-fit:contain}.rijdend-marker b{position:absolute;right:0;bottom:0;border-radius:10px;background:#0d1b2c;color:white;padding:0 4px;font-size:9px}.knipper{animation:knipper 1.3s infinite}@keyframes knipper{50%{filter:drop-shadow(0 0 8px #fa6672)}}.leeg{padding:30px;text-align:center;font-size:12px}.kaartmelding{padding:40px}.inhoud h2{margin-top:30px}.inhoud li{color:var(--muted);margin:8px 0}.beheer-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.bezig #vertrekken{opacity:.5}@media(min-width:1700px){.werkplek{grid-template-columns:390px 1fr 350px}}@media(max-width:1200px){.spelbalk{gap:10px;padding:10px 14px}.spelbalk .logo{width:150px}.depotkop{padding-left:12px}.spelbalk nav{gap:5px}.spelbalk nav button{font-size:11px;padding:9px}.werkplek{grid-template-columns:305px minmax(280px,1fr) 270px;padding:10px;gap:10px}.statistieken>div{padding:12px 15px}.voertuigkop img{width:75px}}@media(max-width:980px){.spelbalk{height:auto;flex-wrap:wrap;min-height:90px}.spelbalk nav{width:100%;justify-content:flex-end;flex-wrap:wrap}.depotkop{margin-left:auto}.werkplek{height:auto;grid-template-columns:1fr 1fr;min-height:0}.kaartkolom{grid-column:1/-1;grid-row:1;height:530px}.pakkettenpaneel,.vlootpaneel{height:650px}.statistieken strong{font-size:19px}.statistieken>div{padding:10px}.winkelraster{grid-template-columns:repeat(2,1fr)}.extra-menu{top:110px}}@media(max-width:600px){.balk{gap:12px;padding:12px 15px;height:auto;flex-wrap:wrap}.balk .logo{width:170px}.balk nav{gap:12px;font-size:12px}.balk .versie{display:none}.held{grid-template-columns:1fr;padding:40px 0;min-height:0}.held h1{font-size:43px;letter-spacing:-1.5px}.held-beeld{max-width:90%;margin:auto}.held-beeld img{width:105%;margin:0}.held-feiten{gap:20px}.drie{grid-template-columns:1fr}.intro{font-size:15px}footer a{float:none;display:block;margin-top:8px}.statistieken{grid-template-columns:repeat(3,1fr)}.statistieken strong{font-size:21px}.statistieken small{font-size:8px}.werkplek{display:flex;flex-direction:column;padding:8px;gap:12px}.kaartkolom{height:430px;flex-shrink:0}.kaartkolom #kaart{min-height:220px}.meldingen{flex-basis:130px}#meldingen{height:85px}.pakkettenpaneel{height:630px}.vlootpaneel{height:auto;max-height:650px}.kaartlegenda small{margin:0}.spelbalk nav{justify-content:flex-start;gap:7px}.spelbalk nav button{font-size:11px}.spelbalk .logo{width:145px}.depotkop strong{font-size:13px}.kaartkop{font-size:11px}.kaartkop span{max-width:130px;font-size:9px}.winkelraster{grid-template-columns:1fr}.winkelbeeld{height:170px}dialog{padding:20px}.beheer-grid{grid-template-columns:1fr}.smal{margin:35px auto}h1{font-size:32px}.paneel{padding:20px}.kaartlegenda{font-size:8px}.zoekregel{flex-wrap:wrap}.zoekregel input{min-width:170px}}

/* Geluidinstellingen en volledig scherm */
#geluidVenster{max-width:590px}.geluidsoorten{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;margin:20px 0}.geluidsoorten label{margin:7px 0}.geluiduitleg{margin:18px 0 0;font-size:12px}html:fullscreen{background:var(--bg)}html:fullscreen .werkplek{height:calc(100dvh - 153px)}.spelbalk nav{flex-wrap:wrap}.spelbalk{height:auto;min-height:76px}.spelpagina{height:100dvh;display:flex;flex-direction:column}.spelpagina>.balk,.spelpagina>.statistieken{flex-shrink:0}.spelpagina>.werkplek{flex:1;min-height:500px;height:auto}html:fullscreen .spelpagina>.werkplek{height:auto}@media(max-width:980px){.spelpagina{height:auto;min-height:100dvh}.spelpagina>.werkplek{flex:none;height:auto}.spelbalk nav{justify-content:flex-start}}@media(max-width:600px){.geluidsoorten{grid-template-columns:1fr}#volledigScherm{white-space:nowrap}}

.accountknop{width:100%;min-height:46px}#accountNaam,#accountWachtwoord,#accountHerhalen{font-size:16px;min-height:46px}#formulierFout:focus{outline:2px solid var(--rood);outline-offset:3px}
