﻿:root{--g:#d0101a;--g2:#fdeaea;--ink:#16221b;--mut:#66756c;--line:#dfe6e1;--bg:#f4f7f5;--red:#7a1219;--or:#d9780f;--ok:#2e7d4f;--r:14px}
*{box-sizing:border-box}
body{margin:0;font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);padding-bottom:80px}
#top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;background:var(--g);color:#fff;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
#top h1{font-size:1.15rem;margin:0;flex:1}
#back{color:#fff;text-decoration:none;font-size:1.5rem;line-height:1}
.who{font-size:.72rem;display:flex;flex-direction:column;gap:2px;opacity:.95}
.who select{font-size:.85rem;border-radius:8px;border:0;padding:4px 6px}
main{max-width:720px;margin:0 auto;padding:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:14px}
.card h2{margin:0 0 8px;font-size:1.05rem}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.row:last-child{border-bottom:0}
.row .body{flex:1;min-width:0}.row .t{font-weight:600}.row .s{color:var(--mut);font-size:.88rem}
.pill{display:inline-block;border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:600;white-space:nowrap}
.pill.red{background:#fde7e4;color:var(--red)}.pill.or{background:#fdf0dd;color:var(--or)}.pill.ok{background:var(--g2);color:var(--ok)}.pill.gr{background:#eceff0;color:var(--mut)}
.dot{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.8rem;flex:none}
.btn{appearance:none;border:0;border-radius:12px;background:var(--g);color:#fff;font:inherit;font-weight:600;padding:12px 16px;cursor:pointer}
.btn.sec{background:#fff;color:var(--g);border:1.5px solid var(--g)}.btn.red{background:var(--red)}.btn.block{display:block;width:100%}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
input,select,textarea{width:100%;font:inherit;padding:11px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
label{display:block;font-size:.85rem;color:var(--mut);margin:10px 0 0}label input,label select,label textarea{margin-top:4px;color:var(--ink)}
.muted{color:var(--mut);font-size:.88rem}
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px 10px;font-size:.95rem}.kv b{color:var(--mut);font-weight:500}
.photo{width:100%;max-height:260px;object-fit:cover;border-radius:12px;margin-bottom:10px;background:var(--g2)}
.empty{text-align:center;color:var(--mut);padding:24px 8px}
#tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
#tabs a{flex:1;text-align:center;padding:12px 4px;text-decoration:none;color:var(--mut);font-size:.82rem;font-weight:600}
#tabs a.on{color:var(--g)}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#16221b;color:#fff;padding:10px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90%}
#toast.show{opacity:1}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:#fff;width:100%;max-width:720px;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:90vh;overflow:auto}
.sheet h2{margin:0 0 4px}
.filters{display:flex;gap:8px;overflow:auto;margin:10px 0}.filters button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font:inherit;font-size:.88rem;white-space:nowrap}.filters button.on{background:var(--g);color:#fff;border-color:var(--g)}

.map{height:300px;border-radius:12px;overflow:hidden;background:var(--g2)}
.map.big{height:calc(100vh - 230px);min-height:320px}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gal .g{padding:0;border:0;background:none;border-radius:12px;overflow:hidden}
.gal img{width:100%;height:130px;object-fit:cover;display:block}
.sheet-bg{z-index:1000}
.who{display:none}
.map{isolation:isolate}

.logo{width:34px;height:34px;border-radius:9px;flex:none}
.pill.bl{background:#e3eeff;color:#0b4fd1}
.pill.sz{color:#fff}
.pl{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.row .t{font-size:1.02rem}
.btn.sm{padding:8px 12px;font-size:.85rem;margin-top:8px}
a.btn{text-decoration:none;text-align:center;display:block}
.filters select{width:auto;padding:6px 10px;border-radius:999px;font-size:.88rem}
.hero{padding:0;overflow:hidden}
.hero .stroom{color:#fff;font-size:1.35rem;font-weight:800;padding:14px 16px}.hero .stroom span{font-weight:500;opacity:.9}
.hero .adres{font-size:1.45rem;font-weight:800;line-height:1.2;padding:14px 16px 4px}.hero .adres span{font-size:1.1rem;font-weight:600;color:var(--mut)}
.hero .bereik{margin:10px 16px;padding:10px 12px;border-radius:12px}
.hero .bereik.bl{background:#e3eeff;color:#0b4fd1}.hero .bereik.or{background:#fdf0dd;color:#9a4f00}.hero .bereik span{font-size:.88rem}
.hero .kv,.hero .btns{margin-left:16px;margin-right:16px}.hero .kv{margin-top:6px}.hero>button{margin:10px 16px 16px;width:calc(100% - 32px)}
.map.tall{height:55vh;min-height:300px}
.mf{width:100%;max-height:200px;object-fit:cover;border-radius:10px;margin-top:8px}
.mkw{background:none;border:0}
.mk{width:34px;height:34px;border-radius:50%;border:3px solid #fff;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.85rem;box-shadow:0 1px 6px rgba(0,0,0,.55)}
.mk.z{border-radius:8px}.mk.bad{box-shadow:0 0 0 3px #d0101a,0 1px 6px rgba(0,0,0,.55)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.8rem;color:var(--mut);margin:8px 0}.legend span{display:inline-flex;align-items:center;gap:5px}
.lg{width:14px;height:14px;border-radius:50%;display:inline-block}.lg.sq{border-radius:3px}
.map.big{height:calc(100vh - 360px);min-height:300px}
.brand{display:block;background:#000;padding:max(10px,env(safe-area-inset-top)) 14px 10px;border-bottom:3px solid var(--g);box-shadow:0 2px 14px rgba(208,16,26,.55)}
.brand img{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
#top{padding:9px 16px}
#top h1{font-size:1.05rem}
#top{background:linear-gradient(180deg,#141414,#050505);border-bottom:1px solid transparent;border-image:linear-gradient(90deg,#d0101a,rgba(208,16,26,0)) 1;padding:8px 14px;padding-top:max(8px,env(safe-area-inset-top));gap:12px;box-shadow:none}
#top .brand{display:block;flex:none;padding:0;background:none;border:0;box-shadow:none}
#top .brand img{display:block;height:46px;width:auto;max-width:none;margin:0}
#top h1{flex:1;text-align:right;font-size:.95rem;font-weight:600;color:rgba(255,255,255,.82);letter-spacing:.2px}
.navbtn{grid-column:1/-1}
