:root{
  --bg:#eef1f6; --wit:#ffffff; --rand:#e2e6ee; --rand2:#c9d0dd;
  --tekst:#0b1220; --zacht:#46506a; --zachter:#7a8499;
  --accent:#e11d48; --link:#1d4ed8;
  --brandweer:#ea580c; --ambulance:#dc2626; --politie:#2563eb; --knrm:#0891b2; --overig:#64748b;
  --trauma:#dc2626; --kustwacht:#0891b2; --defensie:#4b5563;
  --ok:#059669; --waarschuwing:#b45309; --waarschuwing-bg:#fef3c7;
  --r:16px; --schaduw:0 1px 2px rgba(11,18,32,.06),0 10px 30px -14px rgba(11,18,32,.25);
  --zweef:0 2px 6px rgba(11,18,32,.12),0 18px 40px -18px rgba(11,18,32,.35);
  --font:'Sora',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --top:58px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
/* footer altijd onderaan, ook op korte pagina's */
body{margin:0; background:var(--bg); color:var(--tekst); font:15px/1.5 var(--font); min-height:100vh; display:flex; flex-direction:column}
.inhoud{flex:1 0 auto}
.voet{flex:none}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.2}
a{color:var(--link)} a:hover{text-decoration:underline}
button{font-family:inherit}
svg{display:inline-block; vertical-align:middle}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
.skip{position:absolute; left:-999px; top:8px; background:var(--wit); padding:8px 12px; z-index:99} .skip:focus{left:8px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* iconen */
.nav-ico svg,.lg svg,.chip svg,.knop svg,.knop-route svg,.detail-meta svg,.feit h2 svg,.cijfers i svg,.heli-ico svg{width:18px;height:18px}
.lg{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; color:#fff; background:var(--overig); flex:none}
.lg svg{width:15px;height:15px}
.lg.brandweer{background:var(--brandweer)} .lg.ambulance{background:var(--ambulance)} .lg.politie{background:var(--politie)} .lg.knrm{background:var(--knrm)}
.lg.heli{background:#111827} .lg.trauma{background:var(--trauma)} .lg.kustwacht{background:var(--kustwacht)} .lg.defensie{background:var(--defensie)} .lg.overig{background:var(--overig)}

/* ── kop ─────────────────────────────────────────────────── */
.top{position:sticky; top:0; z-index:30; height:var(--top); background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--rand)}
.top-binnen{max-width:1440px; margin:0 auto; padding:0 18px; height:100%; display:flex; align-items:center; gap:14px}
/* merkteken: kaartspeld met signaalgolven — wat de site doet in één vorm */
.logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none !important; color:var(--tekst); font-weight:800; font-size:21px; letter-spacing:-.03em; white-space:nowrap}
.merkteken{width:1.3em; height:1.66em; flex:none}
.logo-tekst{letter-spacing:-.04em}
.logo-nl{color:var(--zachter); font-weight:700}
.logo.klein{font-size:18px}
.hoofdnav{display:flex; gap:2px; margin-left:6px; overflow-x:auto; scrollbar-width:none}
.hoofdnav a{display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:9px; color:var(--zacht); font-weight:600; font-size:13.5px; text-decoration:none !important; white-space:nowrap}
.hoofdnav a:hover{background:var(--bg); color:var(--tekst)}
.hoofdnav a.actief{background:var(--tekst); color:#fff}
.hoofdnav a.brandweer .nav-ico{color:var(--brandweer)} .hoofdnav a.ambulance .nav-ico{color:var(--ambulance)} .hoofdnav a.politie .nav-ico{color:var(--politie)}
.hoofdnav a.actief .nav-ico{color:#fff}
.top-rechts{margin-left:auto; display:flex; align-items:center; gap:8px}
.knop-locatie{display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:9px; border:1px solid var(--rand2); background:var(--wit); color:var(--zacht); font-size:13px; font-weight:600; cursor:pointer}
.knop-locatie.aan{border-color:var(--ok); color:var(--ok); background:#ecfdf5}
.live-pill{display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 9px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:#ecfdf5; color:var(--ok); border:1px solid #a7f3d0}
.live-pill .stip{width:8px;height:8px;border-radius:50%;background:currentColor; animation:puls 2.1s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(5,150,105,.45)}70%{box-shadow:0 0 0 9px rgba(5,150,105,0)}100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}}
.live-pill.weg{background:#fef2f2; color:#b91c1c; border-color:#fecaca}
.live-pill.bezig{background:var(--waarschuwing-bg); color:var(--waarschuwing); border-color:#fde68a}

/* ── layout ──────────────────────────────────────────────── */
/* width:100% is nodig: body is een flex-container en `margin:0 auto` blokkeert
   het uitrekken van een flex-item, waardoor de pagina anders naar zijn inhoud krimpt */
.inhoud{max-width:1200px; width:100%; margin:0 auto; padding:18px 18px 40px}
.inhoud.breed{max-width:1680px; padding:14px 16px 40px}
.werkblad{display:grid; grid-template-columns:minmax(0,1fr) clamp(380px, 26vw, 520px); gap:14px; align-items:start}
.kaart-blok{position:sticky; top:calc(var(--top) + 14px); border-radius:var(--r); overflow:hidden; box-shadow:var(--zweef); background:#0b1220}
.leaflet-kaart{background:#cfdbe6}
.leaflet-kaart.hero{height:calc(100vh - var(--top) - 28px); min-height:520px}
.leaflet-kaart.detail{height:440px}
.kaart-toolbar{position:absolute; z-index:1000; top:12px; left:12px; right:60px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; pointer-events:none}
.kaart-toolbar > *{pointer-events:auto}
.regio-select select{appearance:none; -webkit-appearance:none; padding:9px 34px 9px 13px; border-radius:11px; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.96) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1220' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center/14px; font:600 13.5px var(--font); color:var(--tekst); box-shadow:var(--zweef); cursor:pointer; max-width:240px}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:8px 12px; border-radius:11px; font-size:13px; font-weight:600; background:rgba(255,255,255,.96); color:var(--zacht); border:1px solid rgba(255,255,255,.4); box-shadow:var(--zweef)}
.chip svg{width:16px;height:16px}
.chip.brandweer svg{color:var(--brandweer)} .chip.ambulance svg{color:var(--ambulance)} .chip.politie svg{color:var(--politie)}
.chip.actief{background:var(--tekst); color:#fff; border-color:var(--tekst)} .chip.actief svg{color:#fff}
.zoek{position:relative; min-width:180px}
.zoek svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--zachter); pointer-events:none}
.zoek input{width:100%; padding:9px 12px 9px 33px; border-radius:11px; font:inherit; font-size:13.5px; background:rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.4); color:var(--tekst); box-shadow:var(--zweef)}
.zoek input:focus{outline:none; border-color:var(--tekst)}
.kaart-lagen{position:absolute; z-index:1000; right:12px; bottom:52px; display:flex; background:rgba(255,255,255,.96); border-radius:11px; box-shadow:var(--zweef); overflow:hidden}
.kaart-lagen.in-blok{bottom:auto; top:12px}
.laag-knop{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:0; background:transparent; color:var(--zacht); font-size:12.5px; font-weight:700; cursor:pointer}
.laag-knop svg{width:15px;height:15px}
.laag-knop.actief{background:var(--tekst); color:#fff}
.kaart-legenda{position:absolute; z-index:1000; left:12px; bottom:12px; display:flex; flex-wrap:wrap; gap:10px 14px; padding:8px 12px; font-size:12px; font-weight:600; color:var(--tekst); background:rgba(255,255,255,.92); border-radius:11px; box-shadow:var(--zweef); align-items:center; max-width:calc(100% - 24px)}
.kaart-legenda span{display:inline-flex; align-items:center; gap:6px}
.kaart-legenda .lg{width:22px;height:22px;border-radius:7px} .kaart-legenda .lg svg{width:13px;height:13px}
.legenda-uitleg{font-weight:500; color:var(--zachter)}
.leaflet-top.leaflet-left{top:56px}
@media (min-width:1025px){.leaflet-top.leaflet-left{top:12px; left:auto; right:12px}.leaflet-left .leaflet-control{margin-left:0; margin-right:10px}}

/* markers */
.pin{width:34px;height:34px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);display:grid;place-items:center;background:var(--overig);border:2.5px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.45)}
.pin svg{width:17px;height:17px;color:#fff;transform:rotate(45deg)}
.pin.brandweer{background:var(--brandweer)} .pin.ambulance{background:var(--ambulance)} .pin.politie{background:var(--politie)} .pin.knrm{background:var(--knrm)}
.pin.urgent::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid currentColor;color:#fff;opacity:0;animation:pinring 1.8s ease-out infinite}
@keyframes pinring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.pin.nieuw{animation:pinpop .6s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pinpop{from{transform:rotate(-45deg) scale(.2)}to{transform:rotate(-45deg) scale(1)}}
.cluster{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--tekst);font-weight:800;font-size:13px;border:3px solid var(--overig);box-shadow:0 3px 10px rgba(0,0,0,.4)}
.cluster.brandweer{border-color:var(--brandweer)} .cluster.ambulance{border-color:var(--ambulance)} .cluster.politie{border-color:var(--politie)} .cluster.knrm{border-color:var(--knrm)}
.heli-marker{width:38px;height:38px;border-radius:50%;background:#111827;display:grid;place-items:center;border:2.5px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.5);color:#fff}
.heli-marker svg{width:20px;height:20px}
.heli-marker.trauma{background:var(--trauma)} .heli-marker.politie{background:var(--politie)} .heli-marker.kustwacht{background:var(--kustwacht)} .heli-marker.defensie{background:var(--defensie)}
.heli-marker .neus{position:absolute;top:-9px;left:50%;margin-left:-6px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:9px solid #fff}
.heli-label{background:rgba(255,255,255,.96); border:0; border-radius:8px; padding:3px 8px; font:700 11.5px var(--font); box-shadow:var(--zweef); white-space:nowrap; color:var(--tekst)}
.heli-label small{display:block; font-weight:500; color:var(--zachter)}
.leaflet-tooltip-right.heli-label::before{border-right-color:rgba(255,255,255,.96)}
.leaflet-container{font-family:var(--font); font-size:13px}
.leaflet-popup-content-wrapper{border-radius:12px; box-shadow:var(--zweef)}
.leaflet-popup-content{margin:12px 14px; line-height:1.45; min-width:200px}
.pop-kop{display:flex; align-items:center; gap:8px; margin-bottom:4px}
.pop-kop .lg{width:24px;height:24px;border-radius:7px} .pop-kop .lg svg{width:13px;height:13px}
.pop-kop b{font-size:13.5px}
.pop-sub{color:var(--zachter); font-size:12px}
.pop-link{display:inline-block; margin-top:6px; font-weight:700}
.mijn-positie{width:16px;height:16px;border-radius:50%;background:#059669;border:3px solid #fff;box-shadow:0 0 0 6px rgba(5,150,105,.25)}

/* ── zijkolom ────────────────────────────────────────────── */
.zijkolom{min-width:0; display:flex; flex-direction:column; gap:10px}
/* naast de kaart scrolt de lijst in zijn eigen vak, zodat de rest van de pagina direct volgt */
@media (min-width:1101px){
  .zijkolom{position:sticky; top:calc(var(--top) + 14px); max-height:calc(100vh - var(--top) - 28px); overflow-y:auto; padding-right:4px; scrollbar-width:thin}
}
.zij-kop{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.zij-kop h1{font-size:22px; letter-spacing:-.03em} .zij-kop h1 em{font-style:normal; color:var(--accent)} .zij-kop h2{font-size:17px}
.feed-teller{font-size:12px; color:var(--zachter); background:var(--wit); border:1px solid var(--rand); border-radius:999px; padding:2px 9px; font-variant-numeric:tabular-nums}
.sub{font-size:12.5px; color:var(--zachter); margin:0}
.cijfers{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.cijfers li{background:var(--wit); border:1px solid var(--rand); border-radius:12px; padding:9px 10px; box-shadow:var(--schaduw); display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; min-width:0}
.cijfers i{grid-row:1/3; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--bg); color:var(--zacht)} .cijfers i svg{width:16px;height:16px}
.cijfers b{font-size:18px; font-weight:800; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cijfers b.klein{font-size:13px}
.cijfers span{font-size:10.5px; color:var(--zachter); text-transform:uppercase; letter-spacing:.06em}
.feed{display:grid; gap:8px}
.feed.raster{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.leeg{padding:34px 18px; text-align:center; color:var(--zacht); background:var(--wit); border:1px dashed var(--rand2); border-radius:var(--r)}
/* Meldingskaartje: één accentkleur (de dienst), verder alles neutraal.
   Elk gegeven staat precies één keer — plaats zit al in de titel. */
.melding{display:grid; grid-template-columns:38px 1fr; gap:11px; background:var(--wit); border:1px solid var(--rand); border-left:3px solid var(--overig); border-radius:0 12px 12px 0; padding:11px 13px; box-shadow:var(--schaduw); transition:transform .18s, box-shadow .18s; cursor:pointer}
.melding:hover{transform:translateY(-1px); box-shadow:var(--zweef)}
.melding.actief{box-shadow:0 0 0 2px var(--tekst)}
.melding.brandweer{border-left-color:var(--brandweer)} .melding.ambulance{border-left-color:var(--ambulance)}
.melding.politie{border-left-color:var(--politie)} .melding.knrm{border-left-color:var(--knrm)}
.m-avatar{display:grid; place-items:center; width:38px; height:38px; border-radius:10px; text-decoration:none !important; background:#eef0f5; color:var(--overig)}
.m-avatar svg{width:20px;height:20px}
.m-avatar.brandweer{background:#ffedd5; color:#9a3412} .m-avatar.ambulance{background:#fee2e2; color:#991b1b}
.m-avatar.politie{background:#dbeafe; color:#1e40af} .m-avatar.knrm{background:#cffafe; color:#155e75}
.melding.urgent .m-avatar{box-shadow:inset 0 0 0 2px currentColor}
.m-body{min-width:0}
.m-kop{display:flex; align-items:baseline; gap:8px}
.m-soort{font-size:12.5px; color:var(--zacht); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.m-soort b{color:var(--tekst); font-weight:700; cursor:help}
.m-tijd{margin-left:auto; font-size:12px; color:var(--zachter); font-variant-numeric:tabular-nums; white-space:nowrap}
.m-titel{margin:2px 0 0; font-size:15px; font-weight:700; line-height:1.35; letter-spacing:-.01em; overflow-wrap:anywhere}
.m-titel a{color:var(--tekst); text-decoration:none}
.m-voet{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:7px; font-size:12.5px; color:var(--zacht)}
.m-context{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.m-waarschuwing{color:var(--waarschuwing); cursor:help}
.m-route{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:5px 11px; border-radius:9px; border:1px solid var(--rand2); background:var(--wit); color:var(--zacht); text-decoration:none !important; flex:none}
.m-route:hover{border-color:var(--tekst); color:var(--tekst)} .m-route svg{width:13px;height:13px}
.afstand{font-variant-numeric:tabular-nums; color:var(--zacht)}
.afstand.dichtbij{color:var(--ok); font-weight:700}
.afstand.groot{font-size:15px; font-weight:700}

.melding-body{min-width:0}
.melding-kop{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:3px}
.prio{padding:2px 7px; border-radius:6px; font-size:11px; font-weight:800; letter-spacing:.04em; background:#eef0f5; color:var(--overig); white-space:nowrap}
.prio.brandweer{background:#ffedd5;color:#9a3412} .prio.ambulance{background:#fee2e2;color:#991b1b} .prio.politie{background:#dbeafe;color:#1e40af} .prio.knrm{background:#cffafe;color:#155e75}
.prio.groot{font-size:18px; padding:5px 12px; border-radius:9px}
.urgentie{font-size:12px; font-weight:600; color:var(--zacht)} .urgentie.groot{font-size:14px}
.dienst-label{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--zachter); font-weight:700}
.tijd{margin-left:auto; font-size:12px; color:var(--zachter); font-variant-numeric:tabular-nums; white-space:nowrap}
.melding-leesbaar{margin:0; font-size:14.5px; font-weight:700; line-height:1.35; letter-spacing:-.01em; overflow-wrap:anywhere}
.melding-leesbaar a{color:var(--tekst); text-decoration:none}
.melding-waar{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:4px; font-size:12.5px}
.waar-plaats{color:var(--zacht); text-decoration:none; font-weight:600}
.regio-label{font-size:11.5px; color:var(--zachter); text-decoration:none}
.afstand{font-weight:700; color:var(--ok); font-variant-numeric:tabular-nums} .afstand.groot{font-size:14px}
.melding-voet{display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; align-items:center}
.tag{font-size:11px; padding:2.5px 8px; border-radius:7px; background:#f1f3f8; color:var(--zacht); border:1px solid var(--rand)}
.tag.eenheid{background:#ecfdf5; color:#065f46; border-color:#a7f3d0}
.tag.term{background:#eef2ff; color:#3730a3; border-color:#c7d2fe; cursor:help}
.tag.waarschuwing{background:var(--waarschuwing-bg); color:var(--waarschuwing); border-color:#fde68a; cursor:help}
.knop-route{margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:5px 10px; border-radius:8px; background:var(--tekst); color:#fff; text-decoration:none !important}
.knop-route svg{width:13px;height:13px}
@keyframes binnen{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:none}}
.melding.nieuw{animation:binnen .45s cubic-bezier(.2,.8,.3,1)}
.meer-houder{display:flex; justify-content:center}
.meer-knop{cursor:pointer; padding:9px 20px; border-radius:10px; font-size:13.5px; font-weight:600; background:var(--wit); color:var(--zacht); border:1px solid var(--rand2)}
.meer-knop:hover{color:var(--tekst); border-color:var(--tekst)} .meer-knop:disabled{opacity:.45; cursor:default}

/* incidenten */
.incident-strip{display:grid; gap:8px; margin-bottom:2px}
.incident-strip:empty{display:none}
.incident-kaart{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:11px 14px; border-radius:14px; background:#fffbeb; color:var(--tekst); text-decoration:none !important; box-shadow:var(--schaduw); border:1px solid #fde68a; border-left:6px solid #f59e0b; transition:transform .18s}
.incident-kaart:hover{transform:translateY(-1px)}
.incident-kaart.groot{background:#fef2f2; border-color:#fecaca; border-left-color:#ef4444}
.incident-kaart .ik-niveau{font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:4px 8px; border-radius:7px; background:#fde68a; color:#78350f; white-space:nowrap}
.incident-kaart.groot .ik-niveau{background:#ef4444; color:#fff}
.incident-kaart b{display:block; font-size:14.5px; line-height:1.25}
.incident-kaart span{display:block; font-size:12px; color:var(--zacht); margin-top:2px}
.incident-kaart .ik-diensten{display:flex; gap:4px} .incident-kaart .ik-diensten .lg{width:24px;height:24px;border-radius:7px} .incident-kaart .ik-diensten .lg svg{width:13px;height:13px}
.halo{fill:#f59e0b; fill-opacity:.18; stroke:#f59e0b; stroke-width:2}
.halo.groot{fill:#ef4444; stroke:#ef4444; animation:halo 2.4s ease-in-out infinite}
@keyframes halo{0%,100%{fill-opacity:.15}50%{fill-opacity:.35}}
.incident-detail .detail-hero{border-top-color:var(--waarschuwing)} .incident-detail.groot .detail-hero{border-top-color:#ef4444}
.incident-detail .detail-avatar{background:#111827} .incident-detail.groot .detail-avatar{background:#b91c1c}
.ernst-balk{height:8px; border-radius:99px; background:#eef0f5; overflow:hidden; margin:8px 0 4px} .ernst-balk span{display:block; height:100%; background:linear-gradient(90deg,#fbbf24,#ef4444)}
.tijdlijn{list-style:none; margin:0; padding:0; display:grid; gap:0}
.tijdlijn li{display:grid; grid-template-columns:52px 26px 1fr; gap:10px; align-items:start; padding:8px 0; border-bottom:1px solid var(--rand)}
.tijdlijn time{font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; padding-top:3px}
.tijdlijn .tl-tekst{font-size:13.5px} .tijdlijn .tl-tekst a{color:var(--tekst); text-decoration:none; font-weight:600}
.tijdlijn .tl-sub{display:block; font-size:12px; color:var(--zachter)}

/* ── rij twee / panelen ──────────────────────────────────── */
.rij-twee{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:14px}
.paneel{background:var(--wit); border:1px solid var(--rand); border-radius:var(--r); padding:16px 18px; box-shadow:var(--schaduw)}
.paneel-kop{display:flex; align-items:baseline; gap:10px; margin-bottom:10px}
.paneel-kop h2{font-size:15.5px}
.paneel-voet{margin:12px 0 0; font-size:12.5px; color:var(--zachter)}
.regio-wrap{display:grid; gap:8px}
.nl-kaart{width:100%; height:auto; max-height:240px; display:block}
.regio{fill:rgb(37 99 235 / calc(0.08 + var(--heat,0) * 0.6)); stroke:#fff; stroke-width:1.2; stroke-linejoin:round; cursor:pointer; transition:fill .3s}
.regio[style*="--heat:1"]{fill:var(--accent)} .regio:hover{fill:var(--tekst)}
.regio.thuis{stroke:var(--tekst); stroke-width:1.6; stroke-dasharray:3 2}
.regio-top,.plaats-top{list-style:none; margin:0; padding:0; display:grid; gap:4px; counter-reset:r}
.regio-top li,.plaats-top li{display:flex; align-items:center; gap:8px; font-size:13px; counter-increment:r}
.regio-top li::before,.plaats-top li::before{content:counter(r); width:18px; height:18px; border-radius:6px; display:grid; place-items:center; font-size:10.5px; font-weight:800; background:#fff1f4; color:var(--accent)}
.regio-top a,.plaats-top a{color:var(--tekst); text-decoration:none; font-weight:600}
.regio-top b,.plaats-top b{margin-left:auto; font-variant-numeric:tabular-nums; color:var(--zacht)}
.plaats-top{margin-top:12px; padding-top:10px; border-top:1px solid var(--rand)}
.leeg-regel{color:var(--zachter); font-size:13px} .leeg-regel::before{display:none !important}
.grafiek{display:flex; align-items:flex-end; gap:3px; height:70px; margin-top:12px}
.staaf-houder{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%}
.staaf{width:100%; border-radius:3px 3px 1px 1px; min-height:3px; margin-top:auto; background:linear-gradient(180deg,var(--accent),#fb7185)}
.staaf-uur{font-size:9px; color:var(--zachter); height:10px}
.verdeling{display:grid; gap:4px}
.verdeling-rij{display:grid; grid-template-columns:26px 80px 1fr 30px; align-items:center; gap:9px; font-size:12.5px; color:var(--zacht)}
.vd-balk{height:6px; border-radius:99px; background:#eef0f5; overflow:hidden} .vd-balk span{display:block; height:100%; border-radius:99px; background:var(--overig)}
.verdeling-rij[data-dienst="brandweer"] .vd-balk span{background:var(--brandweer)} .verdeling-rij[data-dienst="ambulance"] .vd-balk span{background:var(--ambulance)}
.verdeling-rij[data-dienst="politie"] .vd-balk span{background:var(--politie)} .verdeling-rij[data-dienst="knrm"] .vd-balk span{background:var(--knrm)}
.vd-n{text-align:right; color:var(--tekst); font-variant-numeric:tabular-nums}

/* helikopters */
.heli-lijst{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.heli-item{display:grid; grid-template-columns:44px 1fr auto; gap:11px; align-items:center; background:var(--wit); border:1px solid var(--rand); border-radius:14px; padding:10px 12px; box-shadow:var(--schaduw); cursor:pointer}
.heli-item.volgt{border-color:var(--tekst); box-shadow:0 0 0 2px var(--tekst)}
.heli-item .heli-ico{display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#111827; color:#fff}
.heli-item .heli-ico svg{width:22px;height:22px}
.heli-item.trauma .heli-ico{background:var(--trauma)} .heli-item.politie .heli-ico{background:var(--politie)} .heli-item.kustwacht .heli-ico{background:var(--kustwacht)} .heli-item.defensie .heli-ico{background:var(--defensie)}
.heli-item b{display:block; font-size:14px} .heli-sub{display:block; font-size:12px; color:var(--zachter)}
.heli-feiten{display:grid; grid-template-columns:repeat(3,auto); gap:4px 12px; margin-top:5px; font-size:12px; color:var(--zacht)}
.heli-feiten b{display:inline; font-size:12.5px; color:var(--tekst); font-variant-numeric:tabular-nums}
.heli-kompas{width:34px;height:34px;border-radius:50%;background:var(--bg);display:grid;place-items:center;color:var(--tekst)}
.heli-kompas svg{width:20px;height:20px}
.heli-lijst.compact .heli-item{grid-template-columns:36px 1fr; padding:8px 10px} .heli-lijst.compact .heli-ico{width:36px;height:36px}

/* ── detail ──────────────────────────────────────────────── */
.kruimels{font-size:13px; color:var(--zachter); margin:2px 0 12px} .kruimels a{color:var(--zacht); text-decoration:none}
.detail{background:var(--wit); border:1px solid var(--rand); border-radius:20px; overflow:hidden; box-shadow:var(--schaduw)}
.detail-hero{display:grid; grid-template-columns:72px 1fr auto; gap:18px; align-items:start; padding:24px 26px; border-top:6px solid var(--overig); background:linear-gradient(180deg,#fafbfd,#fff)}
.detail.brandweer .detail-hero{border-top-color:var(--brandweer)} .detail.ambulance .detail-hero{border-top-color:var(--ambulance)} .detail.politie .detail-hero{border-top-color:var(--politie)} .detail.knrm .detail-hero{border-top-color:var(--knrm)}
.detail-avatar{display:grid; place-items:center; width:72px; height:72px; border-radius:20px; color:#fff; background:var(--overig); box-shadow:var(--zweef)}
.detail-avatar svg{width:36px;height:36px}
.detail-avatar.brandweer{background:var(--brandweer)} .detail-avatar.ambulance{background:var(--ambulance)} .detail-avatar.politie{background:var(--politie)} .detail-avatar.knrm{background:var(--knrm)}
.detail-badges{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.detail-kop h1{font-size:28px; letter-spacing:-.03em; line-height:1.15}
.detail-meta{display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px 0 0; font-size:14px; color:var(--zacht)}
.detail-meta a,.detail-meta span{display:inline-flex; align-items:center; gap:6px; color:var(--zacht); text-decoration:none; font-weight:600}
.detail-meta svg{width:16px;height:16px; color:var(--zachter)}
.detail-acties{display:flex; flex-direction:column; gap:8px; min-width:150px}
.knop{display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; padding:10px 16px; border-radius:11px; font-size:14px; font-weight:700; background:var(--wit); color:var(--tekst); border:1px solid var(--rand2); text-decoration:none !important}
.knop svg{width:16px;height:16px}
.knop.primair{background:var(--accent); color:#fff; border-color:var(--accent)}
.detail-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:0; border-top:1px solid var(--rand)}
.detail-kaart-blok{position:relative; border-right:1px solid var(--rand)}
.kaart-noot{margin:0; padding:9px 14px; font-size:12px; color:var(--zachter); border-top:1px solid var(--rand); background:#fafbfd}
.geen-kaart{height:440px; display:grid; place-items:center; align-content:center; gap:8px; color:var(--zachter); background:#f4f6fa} .geen-kaart svg{width:36px;height:36px} .geen-kaart p{margin:0}
.feit-kaarten{display:grid; grid-template-columns:1fr 1fr; gap:0}
.feit{padding:18px 20px; border-bottom:1px solid var(--rand)}
.feit:nth-child(odd){border-right:1px solid var(--rand)}
.feit h2{display:flex; align-items:center; gap:7px; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--zachter); margin-bottom:8px}
.feit h2 svg{width:15px;height:15px}
.feit p{margin:0 0 4px; font-size:13.5px; color:var(--zacht)} .feit p a{color:var(--link)}
.feit-groot{font-size:20px !important; font-weight:800; color:var(--tekst) !important; letter-spacing:-.02em; line-height:1.2}
.feit-noot{font-size:12.5px !important; color:var(--zachter) !important; margin-top:6px !important}
.eenheden-lijst{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.eenheden-lijst li{display:flex; align-items:center; gap:10px; font-size:13.5px}
.eenheden-lijst b{display:block; color:var(--tekst)} .eenheden-lijst span{display:block; font-size:12px; color:var(--zachter)}
.buurt{margin-top:22px} .buurt h2{font-size:18px; margin-bottom:12px}
.buurt.eerder h2{display:flex; align-items:center; gap:8px} .buurt.eerder h2 svg{width:19px;height:19px; color:var(--waarschuwing)}
.buurt.eerder .sub{margin:-8px 0 12px}
.voertuig-lijst{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.voertuig-lijst li{display:flex; align-items:baseline; gap:8px; font-size:13.5px}
.voertuig-lijst b{font-variant-numeric:tabular-nums} .voertuig-lijst span{font-size:12px; color:var(--zachter)}

.storing-balk{display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:12px; background:var(--waarschuwing-bg); border:1px solid #fde68a; color:#78350f; font-size:13px}
.storing-balk svg{width:20px;height:20px; flex:none}

/* ── alerts ──────────────────────────────────────────────── */
.alerts-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:14px; align-items:start}
.alert-status{position:sticky; top:calc(var(--top) + 14px)}
.alert-status-kop{display:flex; gap:12px; align-items:center; margin-bottom:14px}
.alert-status-kop .lg{width:44px; height:44px; border-radius:12px} .alert-status-kop .lg svg{width:22px;height:22px}
.alert-status-kop b{display:block; font-size:16px} .alert-status-kop .sub{display:block; margin-top:2px}
.alert-status.aan .lg{background:var(--ok)}
.alert-acties{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.alert-form h2{font-size:17px}
.veldgroep{border:0; padding:0; margin:18px 0 0}
.veldgroep legend{font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--zachter); font-weight:700; margin-bottom:8px}
.regio-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:4px 10px}
.vink{display:flex; align-items:center; gap:8px; font-size:13.5px; padding:5px 6px; border-radius:8px; cursor:pointer}
.vink:hover{background:var(--bg)} .vink input{width:17px; height:17px; accent-color:var(--accent); flex:none}
.vink.groot{align-items:flex-start; padding:8px 6px} .vink.groot input{margin-top:2px}
.dienst-rij{display:flex; flex-wrap:wrap; gap:6px 14px} .dienst-rij .lg{width:24px;height:24px;border-radius:7px} .dienst-rij .lg svg{width:13px;height:13px}
.punt-rij{display:flex; gap:8px; align-items:center} .punt-rij .zoek{flex:1}
.punt-rij .zoek input{box-shadow:none; border:1px solid var(--rand2); background:var(--wit)}
.suggesties{list-style:none; margin:4px 0 0; padding:4px; background:var(--wit); border:1px solid var(--rand2); border-radius:10px; box-shadow:var(--zweef)}
.suggesties li{padding:8px 10px; border-radius:7px; cursor:pointer; font-size:13.5px} .suggesties li:hover{background:var(--bg)}
.punt-gekozen{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:10px; padding:10px 12px; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:10px; font-size:13.5px}
.punt-gekozen svg{width:15px;height:15px; vertical-align:-2px; margin-right:4px} .punt-gekozen select{font:inherit; padding:4px 8px; border-radius:7px; border:1px solid var(--rand2)}
.tekstknop{background:none; border:0; color:var(--link); cursor:pointer; font:inherit; font-size:13px; text-decoration:underline}
@media (max-width:900px){.alerts-grid{grid-template-columns:1fr} .alert-status{position:static}}
@media (max-width:640px){.tabbar{grid-template-columns:repeat(5,1fr)} .tabbar a{font-size:10px}}

/* ── archief ─────────────────────────────────────────────── */
.archief-filters{margin-bottom:14px; display:grid; gap:10px}
.af-rij{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end}
.af-veld{display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--zachter); font-weight:600}
.af-veld select,.af-veld input{font:inherit; font-size:13.5px; font-weight:400; color:var(--tekst); padding:8px 11px; border-radius:10px; border:1px solid var(--rand2); background:var(--wit); min-width:130px}
.zoek.breed{flex:1; min-width:220px} .zoek.breed input{box-shadow:none; border:1px solid var(--rand2); background:var(--wit); padding-top:9px; padding-bottom:9px}
.archief-cijfers{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:14px}
.archief-cijfers .tegel{background:var(--wit); border:1px solid var(--rand); border-radius:14px; padding:14px 16px; box-shadow:var(--schaduw)}
.archief-grafieken{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:14px; margin-bottom:14px}
.archief-lijsten{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-bottom:14px}
.grafiek.breed{height:110px; gap:3px; justify-content:center}
.grafiek.breed .staaf-houder{max-width:44px}   /* bij weinig dagen geen breed vlak */
.grafiek.breed .staaf{border-radius:3px 3px 0 0}
.grafiek-as{display:flex; justify-content:space-between; font-size:11px; color:var(--zachter); margin-top:6px}
.verdeling-rij .vd-naam{color:var(--zacht); text-decoration:none} .verdeling-rij .vd-naam:hover{color:var(--tekst)}
.blader{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px}
@media (max-width:900px){.archief-grafieken{grid-template-columns:1fr}}
@media (max-width:640px){.af-veld,.af-veld select,.af-veld input{min-width:0; width:100%} .af-rij{gap:8px} .af-veld{flex:1 1 140px}}

/* ── over ────────────────────────────────────────────────── */
.over-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; margin-bottom:14px}
.over-grid h2,.paneel.over h2{font-size:17px; margin-bottom:10px}
.over-grid p,.paneel.over p{color:var(--zacht); margin:0 0 10px; max-width:70ch}
.stappen{margin:0; padding-left:20px; color:var(--zacht)} .stappen li{margin-bottom:8px}
.stappen b{color:var(--tekst)}
.changelog{list-style:none; margin:0; padding:0}
.changelog li{display:grid; grid-template-columns:96px 1fr; gap:14px; padding:11px 0; border-top:1px solid var(--rand)}
.changelog li:first-child{border-top:0}
.changelog time{font-size:12.5px; color:var(--zachter); font-variant-numeric:tabular-nums; padding-top:1px}
.changelog b{display:block; font-size:14.5px}
.changelog span{display:block; font-size:13.5px; color:var(--zacht); margin-top:2px; max-width:70ch}
@media (max-width:640px){.changelog li{grid-template-columns:1fr; gap:2px} .changelog time:empty{display:none}}

/* ── uitleg / voet / fout ────────────────────────────────── */
.lijst-kop{padding:8px 0 16px} .lijst-kop h1{font-size:26px}
.uitleg-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
.uitleg-blok h2{font-size:16px; margin-bottom:12px}
.uitleg-blok dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 12px; font-size:14px}
.uitleg-blok dt{font-weight:700; white-space:nowrap; font-size:12.5px; display:flex; gap:4px; align-items:center}
.uitleg-blok dd{margin:0; color:var(--zacht); line-height:1.5}
.over{margin-top:14px; max-width:80ch} .over h2{font-size:18px; margin-bottom:8px} .over p{color:var(--zacht)}
.fout-blok{text-align:center; padding:60px 0}
.voet{background:var(--wit); border-top:1px solid var(--rand); margin-top:30px; width:100%}
.voet-binnen{max-width:1200px; margin:0 auto; padding:28px 18px 34px; display:grid; grid-template-columns:2fr 1fr 1.4fr 1fr; gap:24px; font-size:13.5px}
.voet-kol p{color:var(--zacht); margin:10px 0 0; max-width:48ch}
.voet-bedrijf{font-size:12.5px; color:var(--zachter) !important}
.voet-kol h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--zachter); margin-bottom:8px}
.voet-kol a{display:block; color:var(--zacht); text-decoration:none; padding:2px 0; font-size:13px} .voet-kol a:hover{color:var(--tekst)}
.voet-kol:nth-child(3){columns:2; column-gap:16px}

/* ── responsief ──────────────────────────────────────────── */
@media (max-width:1100px){
  .werkblad{grid-template-columns:1fr}
  .kaart-blok{position:relative; top:auto}   /* blijft het anker voor de zwevende werkbalk */
  .leaflet-kaart.hero{height:60vh; min-height:380px}
  .rij-twee{grid-template-columns:1fr 1fr}
  .feed.ingekort .melding:nth-child(n+11){display:none}   /* mobiel: eerst 10, rest via knop */
  .detail-grid{grid-template-columns:1fr} .detail-kaart-blok{border-right:0; border-bottom:1px solid var(--rand)}
  .voet-binnen{grid-template-columns:1fr 1fr}
}
/* ── mobiel: app-indeling (tabbalk onderaan, filters in schuifpaneel) ── */
.tabbar,.filter-knop,.sheet-kop,.installeer,.sheet-only{display:none}
@media (max-width:640px){
  :root{--top:52px}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .top-binnen{padding:0 12px; gap:8px}
  .hoofdnav{display:none}
  .knop-locatie span{display:none} .live-pill span:last-child{display:none}
  .inhoud,.inhoud.breed{padding:10px 10px 30px}
  .leaflet-kaart.hero{height:46vh; min-height:300px}
  .kaart-legenda{display:none}
  .kaart-lagen:not(.in-blok){display:none}          /* keuze zit in het filterpaneel */
  .sheet-only{display:flex}
  .leaflet-control-zoom{display:none}               /* knijpen om te zoomen */
  /* de werkbalk wordt een schuifpaneel van onderen */
  .kaart-toolbar{position:fixed; left:0; right:0; top:auto; bottom:0; z-index:60; flex-direction:column; align-items:stretch; gap:12px;
    background:var(--wit); border-radius:20px 20px 0 0; padding:14px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -10px 40px rgba(11,18,32,.25);
    transform:translateY(105%); transition:transform .28s cubic-bezier(.2,.8,.3,1); pointer-events:auto; max-height:80vh; overflow:auto}
  body.sheet-open .kaart-toolbar{transform:none}
  .sheet-kop{display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:16px}
  .sheet-kop button{border:0; background:var(--bg); width:34px; height:34px; border-radius:10px; font-size:18px; cursor:pointer}
  .regio-select select{max-width:none; width:100%; box-shadow:none; border-color:var(--rand2)}
  .chips{gap:8px} .chip{box-shadow:none; border-color:var(--rand2); padding:9px 13px}
  .zoek input{box-shadow:none; border-color:var(--rand2)}
  .sheet-lagen{display:flex; gap:8px} .sheet-lagen .laag-knop{flex:1; justify-content:center; border:1px solid var(--rand2); border-radius:11px; padding:10px} .sheet-lagen .laag-knop span{display:inline}
  .sheet-achter{position:fixed; inset:0; background:rgba(11,18,32,.35); z-index:55; opacity:0; pointer-events:none; transition:opacity .25s}
  body.sheet-open .sheet-achter{opacity:1; pointer-events:auto}
  .filter-knop{display:inline-flex; position:absolute; z-index:1000; left:12px; top:12px; align-items:center; gap:7px; padding:9px 13px; border-radius:11px; border:0; background:var(--tekst); color:#fff; font-weight:700; font-size:13px; box-shadow:var(--zweef); cursor:pointer}
  .filter-knop svg{width:15px;height:15px} .filter-knop .teller{background:var(--accent); border-radius:999px; padding:0 6px; font-size:11px}
  /* tabbalk */
  .tabbar{display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-top:1px solid var(--rand); padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; color:var(--zachter); text-decoration:none !important; font-size:10.5px; font-weight:700; border-radius:10px}
  .tabbar a svg{width:22px;height:22px} .tabbar a.actief{color:var(--accent)}
  .cijfers{grid-template-columns:repeat(4,1fr); gap:6px} .cijfers li{padding:8px 6px; grid-template-columns:1fr} .cijfers i{display:none} .cijfers b{font-size:16px} .cijfers span{font-size:9.5px}
  .zij-kop h1{font-size:19px}
  .installeer{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:#fff1f4; border:1px solid #fecdd3; font-size:13px; margin-bottom:2px}
  .installeer b{color:var(--accent)} .installeer button{margin-left:auto; border:0; background:var(--accent); color:#fff; font-weight:700; padding:7px 11px; border-radius:9px; cursor:pointer; white-space:nowrap}
  .installeer .sluit{background:transparent; color:var(--zachter); padding:4px 6px; margin-left:0}
  .cijfers{grid-template-columns:repeat(2,1fr)}
  .rij-twee{grid-template-columns:1fr}
  .detail-hero{grid-template-columns:52px 1fr; padding:16px} .detail-avatar{width:52px;height:52px;border-radius:14px} .detail-avatar svg{width:26px;height:26px}
  .detail-kop h1{font-size:21px} .detail-acties{grid-column:1/3; flex-direction:row; flex-wrap:wrap}
  .feit-kaarten{grid-template-columns:1fr} .feit:nth-child(odd){border-right:0}
  .leaflet-kaart.detail{height:300px}
  .voet-binnen{grid-template-columns:1fr} .voet-kol:nth-child(3){columns:1}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important; transition:none !important}}