/* Mason v1 — familie van Mats: zelfde ronde vormen, eigen kleur (zeegroen) */
:root{--m:#25B5A3;--m2:#178A7B;--donker:#0f3b36;--inkt:#16302c;--zacht:#5d7773;--vlak:#fff;--bg:#eef6f4;--lijn:#d5e6e2;--goud:#FFE066;--rood:#c62f3d;--r:20px}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--inkt);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
#app{max-width:600px;margin:0 auto;min-height:100%;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.laden{text-align:center;padding:25vh 20px;color:var(--zacht)}
.kop{background:linear-gradient(160deg,var(--m2),var(--donker));color:#fff;padding:calc(14px + env(safe-area-inset-top,0px)) 18px 22px;border-radius:0 0 28px 28px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:5;box-shadow:0 4px 14px rgba(15,59,54,.25)}
.kop img{width:54px;height:62px;flex-shrink:0}
.kop h1{margin:0;font-size:24px;line-height:1.1}.kop p{margin:2px 0 0;font-size:14px;opacity:.85}
.kop .terug,.kop .uit{margin-left:auto;background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:999px;padding:10px 14px;font-size:15px;font-weight:600}
.kop .terug{margin-left:0;margin-right:2px;padding:10px 13px}
main{padding:16px 14px 0}
.kaart{background:var(--vlak);border-radius:var(--r);padding:16px;margin-bottom:14px;box-shadow:0 2px 10px rgba(15,59,54,.07)}
.kaart h2{margin:0 0 4px;font-size:20px}.kaart h3{margin:0 0 10px;font-size:16px;color:var(--m2)}
.zacht{color:var(--zacht)}.klein{font-size:14px}.stand{font-size:15px;color:var(--zacht);margin:2px 0 12px}
.rij{display:flex;gap:10px}.rij>*{flex:1}
.knop{appearance:none;border:0;border-radius:999px;background:var(--m2);color:#fff;font-size:17px;font-weight:700;padding:14px 16px;min-height:50px;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.knop:active{transform:scale(.98)}.knop[disabled]{opacity:.5}
.knop.licht{background:#fff;color:var(--inkt);box-shadow:inset 0 0 0 2px var(--lijn)}
.knop.gevaar{background:#fff;color:var(--rood);box-shadow:inset 0 0 0 2px #efc4c8}
.knop.groot{font-size:20px;min-height:72px;border-radius:24px}
.knop.aan{background:var(--goud);color:var(--inkt);box-shadow:none}
.knop.klein{font-size:15px;min-height:42px;padding:9px 14px}
input[type=text],input[type=password],select{width:100%;font-size:18px;padding:14px 16px;border-radius:16px;border:2px solid var(--lijn);background:#fff;color:var(--inkt)}
input:focus,select:focus{outline:0;border-color:var(--m)}
.inlog{padding:9vh 22px 0;text-align:center}.inlog img{width:170px;height:198px}.inlog h1{font-size:40px;margin:6px 0 0}.inlog p{color:var(--zacht);margin:4px 0 22px}
.inlog .kaart{text-align:left}.fout{color:var(--rood);min-height:22px;margin:8px 2px 0;font-size:15px}
.slidenr{font-size:15px;color:var(--zacht);margin:14px 0 2px}.slidetitel{font-size:20px;font-weight:700;margin:0 0 14px;min-height:26px}
.lijst{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto;margin-top:6px}
.lijst button{appearance:none;border:0;text-align:left;background:var(--bg);border-radius:14px;padding:12px 14px;font-size:15px;color:var(--inkt)}
.lijst button.nu{background:var(--m2);color:#fff;font-weight:700}
.schakel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
.schakel b{font-size:17px}.schakel small{display:block;color:var(--zacht);font-size:13px}
.wissel{appearance:none;width:62px;height:36px;border-radius:999px;background:#c9d8d5;border:0;position:relative;flex-shrink:0;transition:background .15s}
.wissel::after{content:"";position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:left .15s}
.wissel.aan{background:var(--m2)}.wissel.aan::after{left:30px}
.tellers{display:flex;gap:8px;margin:6px 0 2px}.tellers div{flex:1;background:var(--bg);border-radius:14px;padding:10px 6px;text-align:center}
.tellers b{display:block;font-size:22px}.tellers span{font-size:12px;color:var(--zacht)}
.rooster{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rooster button{appearance:none;border:0;padding:0;border-radius:14px;overflow:hidden;aspect-ratio:1;background:#dfe9e7;position:relative}
.rooster img{width:100%;height:100%;object-fit:cover;display:block}
.rooster .dof img{opacity:.35;filter:grayscale(1)}
.rooster em{position:absolute;left:6px;bottom:6px;background:rgba(15,59,54,.82);color:#fff;font-style:normal;font-size:11px;border-radius:999px;padding:3px 8px}
.wacht{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--lijn)}.wacht:first-of-type{border-top:0}
.wacht img{width:118px;height:118px;object-fit:cover;border-radius:14px;flex-shrink:0;background:#dfe9e7}
.wacht .rij{margin-top:8px}
#toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--donker);color:#fff;padding:12px 18px;border-radius:999px;font-size:15px;opacity:0;pointer-events:none;transition:all .2s;z-index:30;max-width:90vw;text-align:center}
#toast.zien{opacity:1;transform:translateX(-50%)}
.blad{position:fixed;inset:0;background:rgba(15,59,54,.55);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.blad>div{background:#fff;border-radius:26px 26px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px));width:100%;max-width:600px;max-height:92vh;overflow:auto}
.blad img.groot{width:100%;max-height:52vh;object-fit:contain;border-radius:16px;background:#0f3b36;margin-bottom:12px}
.blad .knop{width:100%;margin-top:8px}
@media (prefers-color-scheme:dark){:root{--bg:#0c2420;--vlak:#12332e;--inkt:#e8f5f2;--zacht:#9dbab5;--lijn:#24514a}.knop.licht,.knop.gevaar{background:#12332e}input[type=text],input[type=password],select{background:#0c2420}.lijst button,.tellers div{background:#0c2420}.blad>div{background:#12332e}.rooster button,.wacht img{background:#0c2420}}