*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:var(--f-ui);font-size:15px;line-height:1.5;color:var(--c-tekst);background-color:var(--c-bg);background-image:linear-gradient(var(--c-raster) 1px,transparent 1px),linear-gradient(90deg,var(--c-raster) 1px,transparent 1px);background-size:32px 32px;-webkit-font-smoothing:antialiased}h1,h2,h3,p{margin:0}a{color:var(--c-blauw)}button,input{font:inherit}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.laden{display:grid;place-items:center;min-height:100vh;color:var(--c-tekst-zacht)}.knop{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border-radius:8px;border:1.5px solid transparent;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}.knop:focus-visible,.link-knop:focus-visible,.tegel-open:focus-visible,input:focus-visible{outline:2px solid var(--c-blauw);outline-offset:2px}.knop:disabled{opacity:.55;cursor:not-allowed}.knop-primair{background:var(--c-blauw-vlak);color:var(--c-op-blauw)}.knop-primair:hover:not(:disabled){filter:brightness(1.08)}.knop-ghost{background:transparent;color:var(--c-tekst);border-color:var(--c-tekst)}.knop-ghost:hover{background:var(--c-blauw-tint)}.knop-icoon{width:40px;padding:0;background:var(--c-paneel);color:var(--c-tekst);border-color:var(--c-lijn);font-size:17px;font-weight:500}.knop-icoon:hover{border-color:var(--c-blauw)}.knop-breed{width:100%;margin-top:8px;min-height:46px;font-size:15px}.link-knop{margin-top:18px;background:none;border:0;padding:4px 0;cursor:pointer;color:var(--c-blauw);font-size:14px;font-weight:500}.link-knop:hover{text-decoration:underline}.status{border-radius:8px;padding:10px 14px;margin:12px 0;font-size:14px;border:1.5px solid}.status-fout{background:var(--c-rood-tint);border-color:var(--c-rood);color:var(--c-tekst)}.status-ok{background:var(--c-groen-tint);border-color:var(--c-groen);color:var(--c-tekst)}.status-amber{background:var(--c-amber-tint);border-color:var(--c-amber);color:var(--c-tekst)}.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;position:relative}.login-bovenaan{position:absolute;top:16px;right:16px}.login-kaart{width:100%;max-width:420px;background:var(--c-paneel);border:1px solid var(--c-lijn);border-radius:12px;box-shadow:0 8px 28px var(--c-schaduw);padding:36px 32px 28px;text-align:center}.login-logo{display:flex;justify-content:center;margin-bottom:28px}.login-titel{font-size:20px;font-weight:700}.login-sub{margin-top:6px;margin-bottom:22px;color:var(--c-tekst-zacht);font-size:14px}.login form{text-align:left}.veld{display:block;margin-bottom:14px}.veld span{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--c-tekst-zacht)}.veld input{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--c-lijn);border-radius:8px;background:var(--c-paneel);color:var(--c-tekst)}.veld input:focus{border-color:var(--c-blauw);outline:none}.voet{margin-top:24px;text-align:center;font-size:12px;color:var(--c-gedimd);padding:0 16px 24px}.start{min-height:100vh;display:flex;flex-direction:column}.kop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;background:var(--c-paneel);border-bottom:1px solid var(--c-lijn);position:sticky;top:0;z-index:2}.kop-merk{display:inline-flex;text-decoration:none}.kop-merk-klein{display:none}.kop-rechts{display:flex;align-items:center;gap:10px;min-width:0}.kop-gebruiker{font-size:14px;font-weight:500;color:var(--c-tekst-zacht);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inhoud{width:100%;max-width:1080px;margin:0 auto;padding:36px 24px 8px;flex:1}.welkom h1{font-size:28px;font-weight:700;line-height:1.25}.welkom-sub{margin-top:6px;color:var(--c-tekst-zacht)}.welkom-sub strong{color:var(--c-tekst);font-weight:600}.melding{margin-top:24px;padding:20px 22px;border-radius:12px;background:var(--c-paneel);border:1.5px solid var(--c-amber)}.melding h2{font-size:16px;font-weight:700}.melding p{margin:6px 0 14px;color:var(--c-tekst-zacht);font-size:14px;max-width:640px}.sectie-titel{margin:36px 0 14px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-tekst-zacht)}.tegels{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.tegel{position:relative;display:flex;flex-direction:column;background:var(--c-paneel);border:1px solid var(--c-lijn);border-radius:12px;padding:20px 20px 16px;border-top:3px solid var(--c-cyaan);transition:border-color .15s,transform .15s,box-shadow .15s}.tegel:not(.tegel-uit):hover{border-color:var(--c-blauw);border-top-color:var(--c-cyaan);transform:translateY(-2px);box-shadow:0 8px 22px var(--c-schaduw)}.tegel-uit{border-top-color:var(--c-lijn)}.tegel-uit .tegel-titel,.tegel-uit .tegel-tekst{color:var(--c-gedimd)}.tegel-module{font-size:12px;font-weight:600;letter-spacing:.38em;text-transform:uppercase;color:var(--c-tekst-zacht)}.tegel-module:before{content:"VYQERO ";color:var(--c-tekst);font-weight:700}.tegel-titel{margin-top:10px;font-size:18px;font-weight:700}.tegel-tekst{margin-top:6px;font-size:14px;color:var(--c-tekst-zacht);flex:1}.tegel-voet{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:18px}.tegel-open{font-size:14px;font-weight:700;text-decoration:none;color:var(--c-blauw);white-space:nowrap}.tegel-open:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px}.tegel-open-uit{color:var(--c-gedimd)}.badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px;border:1.5px solid;white-space:nowrap}.badge-account{color:var(--c-groen);border-color:var(--c-groen);background:var(--c-groen-tint)}.badge-apart{color:var(--c-amber);border-color:var(--c-amber);background:var(--c-amber-tint)}.badge-offline{color:var(--c-merk);border-color:var(--c-merk);background:var(--c-merk-tint)}.badge-gepland{color:var(--c-gedimd);border-color:var(--c-lijn);background:transparent}@media(max-width:600px){.kop{padding:10px 16px}.kop-merk-groot{display:none}.kop-merk-klein{display:inline-flex}.kop-gebruiker{display:none}.inhoud{padding:24px 16px 8px}.welkom h1{font-size:23px}.tegels{grid-template-columns:1fr}.login-kaart{padding:28px 20px 22px}}