/* De kaartpagina */
/* voorbeeldstand (alleen op je eigen computer): gele balk bovenaan */
.demo-balk{background:var(--geel);color:var(--inkt);font-size:14px;font-weight:500;padding:8px 24px;text-align:center}
.demo-balk a{color:var(--inkt);font-weight:600;margin-left:6px}
body.kaartpagina{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}

/* ---------- de band bovenaan: één slanke rij met de meter, het weer en delen ---------- */
.band{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"nu letop weer deel";align-items:center;column-gap:32px;padding:9px 24px 10px;border-bottom:1px solid var(--lijn);background:var(--papier)}
.band-nu{grid-area:nu;display:flex;align-items:center;gap:16px;min-width:0}
.nu-tekst{min-width:0}
.nu-woord{margin:1px 0 0;font:800 25px/1.05 var(--kop);letter-spacing:-.02em;color:var(--inkt)}
.nu-groen .nu-woord{color:var(--groen-tekst)}.nu-geel .nu-woord{color:var(--geel-tekst)}.nu-oranje .nu-woord{color:var(--oranje-tekst)}.nu-rood .nu-woord{color:var(--rood)}
.nu-feiten{margin:2px 0 0;font-size:14px;line-height:1.4;color:var(--inkt-2)}
.nu-feiten a{color:var(--grijs);white-space:nowrap}
.nu-feiten a:hover{color:var(--inkt)}

/* de meter: een autootje rijdt over de boog van groen (links) naar rood (rechts).
   Rustig: vaart. Druk: kruipen. Muurvast: stilstand met remlicht en uitlaatwolkjes. */
.meter{width:134px;height:77px;flex:none;overflow:visible}
:is(.meter,.minimeter) .boog path{fill:none;stroke-width:9}
.meter .boog path{stroke-width:7}
:is(.meter,.minimeter) .b-groen{stroke:#5fb987}:is(.meter,.minimeter) .b-geel{stroke:var(--geel)}:is(.meter,.minimeter) .b-oranje{stroke:var(--oranje)}:is(.meter,.minimeter) .b-rood{stroke:var(--rood)}
.naald{transform-box:view-box;transition:transform 1.6s cubic-bezier(.34,1.45,.5,1)}
.meter .rit{transform-origin:70px 74px}
.a-romp{fill:var(--inkt)}
.a-raam{fill:#fff;opacity:.9}
.a-wiel{fill:var(--inkt);stroke:#fff;stroke-width:1.2}
.a-voor{fill:#ffd66b}
.a-achter{fill:#8a96ab}
.a-rem{fill:var(--rood);animation:a-rem 1.2s ease-in-out infinite}
.a-streep{stroke:#9aa6b6;stroke-width:1.3;stroke-linecap:round;animation:a-streep .7s linear infinite}
.a-rook{fill:#b9c3ce;transform-box:fill-box;transform-origin:center;animation:a-rook 1.5s ease-out infinite}
.a-rij{animation:a-rij 1.4s ease-in-out infinite}
.a-kruip{animation:a-kruip 2.4s ease-in-out infinite}
.a-tril{animation:a-tril .32s linear infinite}
@keyframes a-rij{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-.9px)}}
@keyframes a-kruip{0%,100%{transform:translateX(0)}40%,55%{transform:translateX(1.8px)}}
@keyframes a-tril{0%,100%{transform:translate(0,0)}25%{transform:translate(-.5px,-.4px)}50%{transform:translate(.4px,.2px)}75%{transform:translate(-.3px,.3px)}}
@keyframes a-streep{0%{transform:translateX(3px);opacity:0}30%{opacity:1}100%{transform:translateX(-6px);opacity:0}}
@keyframes a-rook{0%{transform:translate(0,0) scale(.5);opacity:.9}100%{transform:translate(-9px,-7px) scale(2.2);opacity:0}}
@keyframes a-rem{0%,100%{filter:drop-shadow(0 0 1.5px #ff3b3b)}50%{filter:drop-shadow(0 0 3.5px #ff3b3b)}}
/* de kleine meter voor de lucht: een wijzer, rustig (wiebelt niet) */
.minimeter{width:36px;height:17px;flex:none;overflow:visible}
.minimeter .boog path{stroke-width:15}
.minimeter .naald{transform-origin:70px 60px}
.minimeter .naald path{stroke:var(--inkt);stroke-width:7;stroke-linecap:round}
.minimeter .naald circle{fill:var(--inkt);r:9}.minimeter .naald .dop{display:none}

/* het weer en de lucht */
.band-weer{grid-area:weer;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:22px;row-gap:3px}
.band-weer:empty{display:none}
.band-weer p{margin:0}
.weer-nu{grid-row:span 2;display:flex;align-items:center;gap:10px}
.weer-nu svg{width:38px;height:38px;flex:none}
.weer-nu div{display:flex;flex-direction:column}
.weer-temp{font:800 24px/1 var(--kop);letter-spacing:-.02em}
.weer-nu span{font-size:13px;color:var(--inkt-2);margin-top:3px}
.lucht{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--inkt-2)}
.lucht b{font-weight:600}
.vakantie{font-size:12.5px;color:var(--grijs)}
/* treinen uit Haarlem: één regel bij het weer; klik = de vertrektijden van het komende uur */
.trein{display:flex;align-items:center;gap:6px;font-size:12.5px}
.trein-svg{width:17px;height:17px;flex:none}
.trein-knop{padding:0;border:0;background:none;font:inherit;color:var(--inkt-2);cursor:pointer;text-align:left}
.trein-knop b{font-weight:600;color:var(--groen-tekst)}
.trein-knop.mis b{color:var(--oranje-tekst)}
.trein-knop:hover{text-decoration:underline}
.trein-lijst{width:360px}
.trein-rij{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:8px 16px;border-top:1px solid var(--lijn);font-size:13.5px}
.trein-rij b{font-variant-numeric:tabular-nums}
.trein-rij small{display:block;font-size:12px;color:var(--grijs)}
.trein-rij em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--grijs);white-space:nowrap}
.trein-rij.mis em{color:var(--rood)}
/* weerwaarschuwing (KNMI): klein, maar met de kleur van de code */
.code{display:flex;align-items:center;gap:6px;font-size:12.5px;grid-column:1/-1}
.code svg{width:17px;height:17px;flex:none}
.code-geel svg path:first-child{fill:#f0b400}.code-oranje svg path:first-child{fill:var(--oranje)}.code-rood svg path:first-child{fill:var(--rood)}
.code-rood svg path:nth-child(2),.code-rood svg circle{stroke:#fff;fill:#fff}
.code a{color:var(--inkt);text-decoration:none}
.code a:hover{text-decoration:underline}
.code b{font-weight:700}
/* let op: een knopje met de belangrijkste afsluiting; klik = de hele lijst */
.band-letop{grid-area:letop;min-width:0}
.band-letop:empty{display:none}
.letop-knop{display:flex;align-items:center;gap:10px;max-width:340px;padding:7px 12px 7px 9px;border:1px solid var(--lijn);border-radius:14px;background:var(--papier);color:var(--inkt);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.letop-knop:hover,.letop-knop[aria-expanded="true"]{border-color:var(--inkt);box-shadow:var(--schaduw)}
.letop-knop .bord{width:26px;height:26px;flex:none}
.letop-tekst{display:flex;flex-direction:column;min-width:0}
.letop-tekst b{font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.letop-tekst span{font-size:12.5px;line-height:1.3;color:var(--inkt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.letop-meer{flex:none;margin-left:2px;min-width:26px;height:22px;padding:0 7px;border-radius:999px;background:var(--veld);font:600 12px/22px var(--tekst);color:var(--inkt-2);text-align:center}
.letop-lijst{position:absolute;z-index:1200;top:calc(100% - 6px);width:380px;max-height:min(520px,calc(100vh - 170px));overflow:auto;background:var(--papier);border:1px solid var(--lijn);border-radius:14px;box-shadow:var(--schaduw-2)}
.letop-kop{margin:0;padding:13px 16px 8px;font:600 11.5px/1.2 var(--tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--grijs)}
.letop-rij{display:grid;grid-template-columns:28px minmax(0,1fr) 12px;column-gap:12px;align-items:center;width:100%;padding:10px 16px;border:0;border-top:1px solid var(--lijn);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.letop-rij:hover{background:var(--veld)}
.letop-rij .bord{width:28px;height:28px}
.letop-rij b{display:block;font-size:14px;line-height:1.3}
.letop-rij span span{display:block;font-size:13px;color:var(--inkt-2);margin-top:1px}
.letop-rij small{display:block;font-size:12px;line-height:1.35;color:var(--grijs);margin-top:3px}
.letop-rij .pijl{width:8px;height:8px;border-top:2px solid var(--grijs);border-right:2px solid var(--grijs);transform:rotate(45deg);opacity:.55}
.letop-voet{margin:0;padding:10px 16px 12px;border-top:1px solid var(--lijn);font-size:12px;color:var(--grijs)}
.letop-merk{transform:translate(-50%,-50%);filter:drop-shadow(0 1px 2px rgba(21,33,59,.4))}
.letop-merk .bord{display:block;width:26px;height:26px}
.deel{grid-area:deel;font:500 13px/1 var(--tekst);color:var(--inkt-2);background:var(--papier);border:1px solid var(--lijn);border-radius:999px;padding:8px 14px;cursor:pointer}
.deel:hover{border-color:var(--inkt);color:var(--inkt)}
.deel{display:inline-flex;align-items:center;gap:6px}
.deel svg{width:15px;height:15px}

/* ---------- werkgebied: routes links, kaart rechts ---------- */
.werkvlak{flex:1;min-height:0;position:relative}
.zijkant{position:absolute;z-index:1001;top:12px;right:12px;width:300px;max-height:calc(100% - 120px);overflow:auto;background:var(--papier);border:1px solid var(--lijn);border-radius:14px;box-shadow:var(--schaduw-2);display:flex;flex-direction:column}
.zijkant h2{margin:0;padding:14px 16px 10px;font:800 18px/1.2 var(--kop);letter-spacing:-.02em}
/* alleen de routes met vertraging; elke rij is een knop naar de kaart (pijltje rechts) */
.route{display:grid;grid-template-columns:40px minmax(0,1fr) 14px;column-gap:10px;align-items:center;padding:11px 14px 11px 12px;border:0;border-top:1px solid var(--lijn);cursor:pointer;background:none;width:100%;text-align:left;font:inherit;color:inherit}
.route:hover{background:var(--veld)}
.route.aan{background:var(--veld);box-shadow:inset 3px 0 0 var(--inkt)}
.route .mini-auto{grid-column:1;grid-row:1/4;width:40px;height:26px;overflow:visible}
.mini-weg{stroke-width:3.2;stroke-linecap:round}.mini-weg.k1{stroke:var(--oranje)}.mini-weg.k2{stroke:var(--rood)}
.route .naam{grid-column:2;font-weight:600;font-size:14.5px;line-height:1.25}
.route .tijd{grid-column:2;font-size:13px;color:var(--grijs);margin-top:1px}
.route .tijd b{font:800 17px/1 var(--kop);letter-spacing:-.02em}
.route.k1 .tijd b{color:var(--oranje-tekst)}.route.k2 .tijd b{color:var(--rood)}
.route .oorzaak{grid-column:2;margin-top:3px;font-size:12px;line-height:1.3;color:var(--inkt-2)}
.route .pijl{grid-column:3;grid-row:1/4;width:8px;height:8px;border-top:2px solid var(--grijs);border-right:2px solid var(--grijs);transform:rotate(45deg);opacity:.55;transition:opacity .15s,transform .15s}
.route:hover .pijl,.route.aan .pijl{opacity:1;transform:translateX(2px) rotate(45deg)}
.route.kort{grid-template-columns:minmax(0,1fr) auto 14px;padding:8px 14px 8px 16px}
.route.kort .naam{grid-column:1;font-weight:500;font-size:13.5px}
.route.kort .min{grid-column:2;font-size:13px;font-weight:600;color:var(--grijs);white-space:nowrap}
.route.kort.k0 .min{color:var(--groen-tekst)}
.route.kort .pijl{grid-column:3;grid-row:1}
.elders-kop{margin:0;padding:12px 16px 4px;border-top:1px solid var(--lijn);font:600 11.5px/1.2 var(--tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--grijs)}
/* plekken buiten de routes: net als een route, met het autootje, de straat en van waar tot waar */
.plek{display:grid;grid-template-columns:40px minmax(0,1fr) 14px;column-gap:10px;align-items:center;width:100%;padding:9px 14px 10px 12px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.plek + .plek{border-top:1px solid var(--lijn)}
.plek:hover{background:var(--veld)}
.plek .mini-auto{grid-column:1;grid-row:1/4;width:40px;height:26px;overflow:visible}
.plek .naam{grid-column:2;font-weight:600;font-size:14px;line-height:1.25}
.plek .plaats{font-weight:400;color:var(--grijs)}
.plek .tijd{grid-column:2;font-size:12.5px;color:var(--grijs);margin-top:1px}
.plek .tijd b{font-weight:700;color:var(--inkt)}
.plek.k1 .tijd b{color:var(--oranje-tekst)}.plek.k2 .tijd b{color:var(--rood)}
.plek .pijl{grid-column:3;grid-row:1/4;width:8px;height:8px;border-top:2px solid var(--grijs);border-right:2px solid var(--grijs);transform:rotate(45deg);opacity:.55}
.plek:hover .pijl{opacity:1}
/* van waar tot waar het druk is of vaststaat */
.route .waar,.plek .waar{grid-column:2;margin-top:2px;font-size:12px;line-height:1.3;color:var(--inkt-2)}
.plek .waar.ook{color:var(--grijs)}
.geen-vertraging{margin:0;padding:12px 16px 14px;font-size:14px;color:var(--inkt-2);border-top:1px solid var(--lijn);display:flex;align-items:center;gap:12px}
.geen-vertraging .mini-auto{width:40px;height:26px;flex:none;overflow:visible}
.mini-weg.k0{stroke:#8cc9a4}
.toon-alle{display:block;width:100%;text-align:left;border:0;border-top:1px solid var(--lijn);background:none;padding:11px 16px;font:500 13px/1.2 var(--tekst);color:var(--spaarne);cursor:pointer}
.toon-alle:hover{background:var(--veld)}
.toon-alle::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.toon-alle[aria-expanded="true"]::after{transform:translateY(0) rotate(-135deg)}
.rest .route:first-child{border-top-color:var(--veld-2)}
.zij-voet{display:none}

/* ---------- kaart ---------- */
.kaartvak{position:absolute;inset:0}
#kaart{position:absolute;inset:0;background:#eef1f4}
/* het water van de kaart is fel blauw: zachter maken, zodat het verkeer de kleur houdt */
.leaflet-tile-pane{filter:saturate(.5) brightness(1.04)}
/* namen op het overzicht: wijken als rustige kaartletters, wegnummers als de bordjes langs de weg */
.naam-wijk,.naam-a,.naam-n{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}
.naam-wijk{font:600 11px/1 var(--tekst);letter-spacing:.12em;text-transform:uppercase;color:rgba(21,33,59,.55);text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff}
.naam-a,.naam-n{font:700 10.5px/1 var(--tekst);padding:3px 5px 2px;border-radius:4px;box-shadow:0 0 0 1.5px #fff,0 1px 3px rgba(21,33,59,.3)}
.naam-a{background:#c8102e;color:#fff}
.naam-n{background:#f7c600;color:#15213b}
#kaart.focus :is(.leaflet-namen-pane,.leaflet-bordjes-pane){opacity:.35}
.leaflet-container{font:inherit}
.leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.8)!important}
.leaflet-popup-content-wrapper{border-radius:12px;box-shadow:var(--schaduw-2)}
.leaflet-popup-content{margin:12px 16px;font-size:14px;line-height:1.45;min-width:190px}
.routelabel .leaflet-popup-content-wrapper{box-shadow:var(--schaduw)}
.routelabel .leaflet-popup-tip-container{display:none} /* zwevend kaartje: het zoekt zelf een vrije plek naast de route */
.straks{margin-top:8px;padding-top:8px;border-top:1px solid var(--lijn)}
.straks-rij{display:flex;gap:10px;margin:3px 0;font-size:13px;white-space:nowrap}
.straks-rij b{font-weight:600}
.pop h3{margin:0 0 4px;font:700 15px/1.25 var(--tekst)}
.pop .groot{font:800 26px/1.1 var(--kop);letter-spacing:-.02em}
.pop .groot small{font:500 13px var(--tekst);color:var(--grijs);letter-spacing:0}
.pop .m{color:var(--grijs);font-size:12.5px}
.pop .woord{font:600 11px/1 var(--tekst);text-transform:uppercase;letter-spacing:.08em;padding:4px 7px;border-radius:999px;vertical-align:3px;margin-left:4px}
.pop .w0{background:var(--groen-zacht);color:var(--groen-tekst)}.pop .w1{background:var(--oranje-zacht);color:#a95e00}.pop .w2{background:var(--rood-zacht);color:var(--rood)}
.pop .tekst{margin-top:8px;max-height:140px;overflow:auto;white-space:pre-line;font-size:13px;color:var(--inkt-2)}

/* zoomen: grote knoppen en een hint zolang iemand nog niet heeft gezoomd */
.leaflet-touch .leaflet-bar a,.leaflet-bar a{width:44px;height:44px;line-height:42px;font-size:24px;color:var(--inkt)}
.leaflet-bar{border:1px solid var(--lijn)!important;box-shadow:var(--schaduw)!important;border-radius:12px!important;overflow:hidden}
.leaflet-control-zoom.pols .leaflet-control-zoom-in{animation:pols 1.4s ease-in-out 3}
/* "Heel Haarlem": alleen als je bent ingezoomd of weggeschoven */
.overzicht{display:none}
.weg-van-overzicht .overzicht{display:block}
/* op een groot scherm naast de zoomknoppen, anders valt hij achter de routekaart */
@media (min-width:761px){.leaflet-right .overzicht{position:absolute;right:56px;bottom:0}}
.overzicht a{display:flex!important;align-items:center;justify-content:center}
.overzicht svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* rijrichting op een gekozen route */
.pijltje{position:absolute;left:-5px;top:-5px;width:10px;height:10px;pointer-events:none}
.pijltje::before{content:"";position:absolute;left:2px;top:3px;width:5px;height:5px;border-left:2.2px solid #fff;border-top:2.2px solid #fff;transform:rotate(45deg)}
@keyframes pols{0%,100%{box-shadow:inset 0 0 0 0 rgba(31,122,140,0)}50%{box-shadow:inset 0 0 0 3px rgba(31,122,140,.45);background:var(--spaarne-zacht)}}
/* live-label licht even op als er een nieuwe meting binnenkomt */
.live.vers span{animation:vers 1.6s ease-out}
@keyframes vers{0%{color:var(--rood)}100%{color:var(--grijs)}}
.zoomhint{position:absolute;z-index:1001;left:50%;bottom:64px;transform:translate(-50%,8px);background:var(--inkt);color:#fff;font-size:14px;padding:9px 16px;border-radius:999px;box-shadow:var(--schaduw-2);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.zoomhint.aan{opacity:1;transform:translate(-50%,0)}

.legenda{position:absolute;z-index:1000;left:12px;bottom:12px;display:flex;gap:12px;background:rgba(255,255,255,.94);border:1px solid var(--lijn);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--inkt-2);box-shadow:var(--schaduw)}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda i{display:inline-block;width:16px;height:5px;border-radius:3px}
.legenda .l0{background:#8cc9a4}.legenda .l1{background:var(--oranje)}.legenda .l2{background:var(--rood)}
/* "Uitleg": wat alle tekens op de kaart betekenen */
.legenda-meer{margin:-3px -6px -3px 2px;padding:3px 10px;border:0;border-left:1px solid var(--lijn);border-radius:0 999px 999px 0;background:none;font:600 12.5px/1.2 var(--tekst);color:var(--spaarne);cursor:pointer}
.legenda-meer::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:translateY(-1px) rotate(-45deg)}
.legenda-meer[aria-expanded="true"]::after{transform:translateY(-3px) rotate(135deg)}
.legenda-meer:hover{text-decoration:underline}
.uitleg{position:absolute;z-index:1002;left:12px;bottom:52px;width:330px;max-height:calc(100% - 80px);overflow:auto;background:var(--papier);border:1px solid var(--lijn);border-radius:14px;box-shadow:var(--schaduw-2);padding:12px 14px}
.uitleg h3{margin:0 0 8px;font:600 11.5px/1.2 var(--tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--grijs)}
.uitleg dl{display:grid;grid-template-columns:34px minmax(0,1fr);gap:7px 10px;align-items:center;margin:0;font-size:13px;line-height:1.35;color:var(--inkt-2)}
.uitleg dt{display:flex;align-items:center;justify-content:center;height:26px}
.uitleg dd{margin:0}
.uitleg dt svg{width:26px;height:24px}
.uitleg .u-licht{width:14px;height:14px;border-radius:50%;background:var(--rood);border:3px solid #fff;box-shadow:0 0 0 2px rgba(216,35,42,.35),0 2px 6px rgba(216,35,42,.5)}
.uitleg .u-dicht{width:28px;height:0;border-top:4px dotted var(--inkt)}
.uitleg .u-route{display:flex;gap:4px;align-items:center}
.uitleg .u-route i{width:11px;height:11px;border-radius:50%;border:3px solid var(--inkt);background:#fff}
.uitleg .u-route i + i{background:var(--inkt);border-color:#fff;box-shadow:0 0 0 1.5px var(--inkt)}
.uitleg .naam-a{position:static;transform:none;display:inline-block}

.kaart-groot,.kaart-terug{display:none}

/* focus: een route gekozen, de rest doet een stap terug */
#kaart.focus .leaflet-overlay-pane path{opacity:.22!important;filter:none!important}
#kaart.focus .leaflet-marker-pane{opacity:.3}
.leaflet-overlay-pane path,.leaflet-marker-pane{transition:opacity .35s}

/* lichtjes bij de ergste knelpunten */
.lichtje{position:relative}
.lichtje .kern{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--rood);border:3px solid #fff;box-shadow:0 2px 8px rgba(216,35,42,.5)}
.lichtje .gloed{position:absolute;left:-28px;top:-28px;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,rgba(216,35,42,.42),rgba(216,35,42,0) 70%);animation:gloei 2.8s ease-in-out infinite}
.lichtje .ring{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;border:2px solid var(--rood);animation:ring 2.8s ease-out infinite}
.lichtje.stil .gloed,.lichtje.stil .ring{display:none}
.lichtje.stil .kern{width:14px;height:14px;left:-7px;top:-7px;border-width:2.5px}
.lichtje .label{position:absolute;left:16px;top:-21px;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis;background:var(--papier);border:1px solid var(--lijn);border-radius:10px;padding:5px 11px 6px;font:400 12.5px/1.3 var(--tekst);box-shadow:var(--schaduw);color:var(--inkt-2)}
.lichtje .label b{display:block;color:var(--rood);font-weight:700;font-size:13px}
.lichtje .label span{color:var(--grijs)}
.lichtje.stil .label{top:-19px;font-size:12px;padding:4px 9px 5px}
/* alleen het ergste knelpunt heeft altijd een label; de andere bij muis erop (zo overlappen ze niet) */
.lichtje.stil .label{opacity:0;pointer-events:none;transition:opacity .15s}
.lichtje.stil:hover .label{opacity:1}
.lichtje.links .label{left:auto;right:16px}
/* het label schuift boven of onder het lichtje als het anders een ander lichtje afdekt */
.lichtje.boven .label{top:-60px}
.lichtje.onder .label{top:14px}
.lichtje.midden .label{left:0;right:auto;transform:translateX(-50%)}
.lichtje .label b{overflow:hidden;text-overflow:ellipsis}
@keyframes gloei{0%,100%{transform:scale(.8);opacity:.7}50%{transform:scale(1.15);opacity:1}}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.leaflet-overlay-pane path.vast{filter:drop-shadow(0 0 4px rgba(216,35,42,.5))}

/* bruggen: een ophaalbrug van opzij; open = klep omhoog (oranje), met een oranje rand die zacht pulseert */
.brug{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#fff;border:1.5px solid var(--lijn);box-shadow:0 1px 4px rgba(21,33,59,.3);transform:translate(-50%,-50%)}
.brug .brug-svg{width:22px;height:19px}
.brug.open{width:38px;height:38px;border:2.5px solid var(--oranje);animation:brug-puls 2.4s ease-out infinite}
.brug.open .brug-svg{width:28px;height:24px}
/* de kleppen gaan omhoog als de brug net op de kaart komt */
.klep-l,.klep-r{transform-box:view-box;animation:.9s cubic-bezier(.3,1.4,.5,1) both}
.klep-l{transform-origin:7px 11.3px;animation-name:klep-l}
.klep-r{transform-origin:21px 11.3px;animation-name:klep-r}
@keyframes klep-l{from{transform:rotate(62deg)}to{transform:rotate(0)}}
@keyframes klep-r{from{transform:rotate(-62deg)}to{transform:rotate(0)}}
@keyframes brug-puls{0%{box-shadow:0 0 0 0 rgba(233,131,0,.45),0 1px 4px rgba(21,33,59,.3)}70%,100%{box-shadow:0 0 0 12px rgba(233,131,0,0),0 1px 4px rgba(21,33,59,.3)}}
.brug-label{position:absolute;left:24px;top:-12px;white-space:nowrap;background:var(--papier);border:1px solid var(--lijn);border-radius:8px;padding:3px 8px;font:600 12px/1.3 var(--tekst);color:var(--oranje-tekst);box-shadow:var(--schaduw)}
.pop .brug-open-woord{color:var(--oranje-tekst)}
/* meldingen: ongeluk, stilstaande auto, iets op de weg */
.melding-merk{transform:translate(-50%,-70%);filter:drop-shadow(0 1px 2px rgba(21,33,59,.4))}
.melding-merk .melding-svg{display:block;width:26px;height:26px}
/* in het rijtje: een icoon in plaats van het autootje */
.plek .rij-icoon{grid-column:1;grid-row:1/4;display:flex;align-items:center;justify-content:center;width:40px;height:30px}
.plek .rij-icoon svg{width:30px;height:26px}
.brug-rij .naam{color:var(--oranje-tekst)}
.melding-rij .naam{color:var(--rood)}
.route .oorzaak.brug-open{color:var(--oranje-tekst);font-weight:600}
.sym-brug svg{width:40px;height:34px}
/* uit: af en toe gaat het brugdek even omhoog, net als de pion, het busje en de P om de beurt */
.filter[aria-pressed="false"] .sym-brug svg{animation:none}
.filter[aria-pressed="false"] .sym-brug .brug-dek{transform-box:view-box;transform-origin:14px 11px;animation:dek 8s ease-in-out 5s infinite}
@keyframes dek{0%,80%,100%{transform:translateY(0)}86%,92%{transform:translateY(-2.2px)}97%{transform:translateY(0)}}


/* morgen in de ochtendspits */
.morgen{margin:0 12px 10px;padding:10px 12px 8px;border-radius:12px;background:var(--veld)}
.morgen h3{margin:0 0 4px;font:600 11.5px/1.2 var(--tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--grijs)}
.morgen-rij{display:grid;grid-template-columns:minmax(0,1fr) 12px;column-gap:8px;align-items:center;width:100%;padding:7px 0;border:0;border-top:1px solid var(--lijn);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.morgen-rij:first-of-type{border-top:0}
.morgen-rij .naam{font-weight:600;font-size:13.5px}
.morgen-rij .tijd{grid-column:1;font-size:12.5px;color:var(--inkt-2)}
.morgen-rij .tijd b{color:var(--oranje-tekst)}
.morgen-rij .pijl{grid-column:2;grid-row:1/3;width:7px;height:7px;border-top:2px solid var(--grijs);border-right:2px solid var(--grijs);transform:rotate(45deg);opacity:.55}
.morgen-rij:hover .naam{text-decoration:underline}
.morgen-voet{margin:4px 0 0;font-size:11.5px;color:var(--grijs)}

/* bus, parkeren, werk */
/* een te laat busje: blauw, rood als hij 8 minuten of meer te laat is; lijnnummer ernaast */
.bus{display:flex;align-items:center;gap:2px;color:var(--spaarne);transform:translate(-50%,-50%);width:max-content;filter:drop-shadow(0 1px 1.5px rgba(21,33,59,.35))}
.bus svg{width:27px;height:19px;flex:none}
/* het lijnnummer als het bordje voorop de bus (donker met oranje letters), niet los ernaast: dan leest het als een aantal */
.bus{position:relative}
.bus b{position:absolute;left:50%;top:-11px;transform:translateX(-50%);background:#15213b;color:#ffc34d;border-radius:4px;padding:0 4px;font:700 9.5px/13px var(--tekst);white-space:nowrap;box-shadow:0 0 0 1.5px #fff}
.bus.erg{color:var(--rood)}
/* parkeergarage: blauw P-bord zoals de knop; stipje groen (plek), oranje (bijna vol), rood (vol) */
.park{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:#2d63b8;border:2px solid #fff;font:800 14px/1 var(--kop);color:#fff;box-shadow:0 1px 4px rgba(21,33,59,.35);transform:translate(-50%,-50%)}
.park b{display:none}
.park::after{content:"";position:absolute;right:-4px;bottom:-4px;width:9px;height:9px;border-radius:50%;background:var(--groen);border:2px solid #fff}
.park.bijna::after{background:var(--oranje)}.park.vol::after{background:var(--rood)}
.park-vrij{display:none;position:absolute;left:25px;top:50%;transform:translateY(-50%);white-space:nowrap;background:#fff;border:1px solid var(--lijn);border-radius:6px;padding:1px 6px;font:600 11px/16px var(--tekst);font-style:normal;color:var(--inkt);box-shadow:var(--schaduw)}
.dichtbij .park-vrij{display:block}
.pop details.meer-tekst{margin-top:8px}
.pop details.meer-tekst summary{cursor:pointer;font-size:12.5px;color:var(--spaarne)}
.werk{width:20px;height:20px;transform:translate(-50%,-85%);filter:drop-shadow(0 1px 1.5px rgba(21,33,59,.35))}
.werk svg{display:block;width:100%;height:100%}
.werk.licht{width:14px;height:14px;opacity:.85}

/* aan en uit op de kaart: drie kleine symboolknoppen linksboven; muis erop geeft uitleg */
.lagen{position:absolute;z-index:1000;top:14px;left:14px;display:flex;flex-direction:column;gap:9px}
.filter{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;background:#fff;border:1px solid var(--lijn);border-radius:14px;box-shadow:var(--schaduw);cursor:pointer;transition:background .15s,border-color .15s}
.filter:hover{border-color:var(--inkt)}
.filter[aria-pressed="true"]{background:var(--spaarne-zacht);border-color:var(--spaarne);box-shadow:inset 0 0 0 1px var(--spaarne),var(--schaduw)}
.teller{position:absolute;top:-7px;right:-9px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--inkt);color:#fff;font:600 11px/20px var(--tekst);text-align:center;box-shadow:0 0 0 2px #fff}
.filter[aria-pressed="false"] .teller{background:#8a96ab}
.tip{position:absolute;left:62px;top:50%;transform:translate(-4px,-50%);display:flex;flex-direction:column;gap:1px;width:max-content;max-width:240px;background:var(--inkt);color:#fff;border-radius:10px;padding:8px 12px;font:400 12.5px/1.35 var(--tekst);text-align:left;box-shadow:var(--schaduw-2);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.tip::before{content:"";position:absolute;left:-5px;top:50%;width:10px;height:10px;background:var(--inkt);transform:translateY(-50%) rotate(45deg);border-radius:2px}
.tip b{font-weight:600;font-size:13px}
.tip small{font-size:11.5px;color:rgba(255,255,255,.7);margin-top:2px}
.filter:hover .tip,.filter:focus-visible .tip{opacity:1;transform:translate(0,-50%)}
@media (hover:none){.tip{display:none}}
.sym{display:inline-flex;align-items:center;justify-content:center;flex:none}
.sym svg{display:block}
.sym-pion svg{width:34px;height:34px}
.sym-bus{color:var(--spaarne)}.sym-bus svg{width:39px;height:27px}
.sym-p svg{width:33px;height:33px}
.filter:hover .sym{transform:scale(1.1)}
.sym{transition:transform .15s}
/* om de beurt een klein bewegingetje, zolang ze uit staan: de pion wiebelt, het busje trekt op, de P klopt.
   Alleen transform (goedkoop voor de browser), en bij minder beweging staat alles stil. */
.filter[aria-pressed="false"] .sym svg{animation:6s ease-in-out infinite}
.filter[aria-pressed="false"] .sym-pion svg{animation-name:pion;transform-origin:50% 92%}
.filter[aria-pressed="false"] .sym-bus svg{animation-name:busje;animation-delay:2s}
.filter[aria-pressed="false"] .sym-p svg{animation-name:klop;animation-delay:4s}
@keyframes pion{0%,82%,100%{transform:rotate(0)}85%{transform:rotate(-13deg)}88%{transform:rotate(11deg)}91%{transform:rotate(-7deg)}94%{transform:rotate(4deg)}97%{transform:rotate(-1deg)}}
@keyframes busje{0%,82%,100%{transform:translate(0,0)}86%{transform:translate(4px,-1.5px)}89%{transform:translate(3px,0)}92%{transform:translate(-2px,-1px)}95%{transform:translate(0,0)}97%{transform:translate(0,-.8px)}}
@keyframes klop{0%,82%,100%{transform:scale(1)}86%{transform:scale(1.16)}90%{transform:scale(.95)}94%{transform:scale(1.06)}}

/* melding als de metingen oud zijn */
.melding{position:absolute;z-index:1001;bottom:28px;left:50%;transform:translateX(-50%);background:var(--inkt);color:#fff;font-size:13.5px;padding:8px 14px;border-radius:999px;box-shadow:var(--schaduw-2);display:none;white-space:nowrap}
.melding.aan{display:block}

/* ---------- tablet ---------- */
/* op een groot scherm is er ruimte genoeg: een bredere routekaart, zodat "van ... tot ..." minder afbreekt */
@media (min-width:1360px){.zijkant{width:340px}}
/* niet zo breed: het knopje 'Let op' op een eigen regel onder de tekst, anders wordt de tekst een smalle kolom */
@media (max-width:1279px) and (min-width:961px){
  .band{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"nu weer deel" "letop letop letop";row-gap:4px}
  .band-letop{justify-self:start;margin-left:150px}
  .letop-knop{padding-top:5px;padding-bottom:5px}
}
@media (max-width:1180px){
  .zijkant{width:280px}
  .band{column-gap:22px}
}
@media (max-width:960px){
  .band{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nu deel" "weer letop";row-gap:8px}
  .band-weer{justify-self:start}
  .band-letop{justify-self:end}
}
/* ---------- telefoon ---------- */
@media (max-width:760px){
  body.kaartpagina{height:auto;overflow:auto;display:block}
  .band{padding:10px 16px 12px;column-gap:12px}
  .band-nu{gap:12px}
  .meter{width:108px;height:62px}
  .nu-woord{font-size:22px}
  .nu-feiten{font-size:13.5px}
  .deel{align-self:start;padding:11px 14px}
  .band-weer{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding-top:9px;border-top:1px solid var(--lijn);justify-self:stretch}
  .weer-nu span,.lucht span{white-space:nowrap}
  .weer-nu{grid-row:auto;gap:8px}
  .weer-nu svg{width:28px;height:28px}
  .weer-nu div{flex-direction:row;align-items:baseline;gap:6px}
  .weer-temp{font-size:19px}
  .weer-nu span{margin:0;font-size:12.5px}
  .lucht{font-size:12.5px}
  .vakantie{flex-basis:100%}
  .band{grid-template-areas:"nu deel" "weer weer" "letop letop"}
  .band-letop{justify-self:stretch}
  .letop-knop{max-width:none;width:100%}
  .letop-lijst{left:12px!important;right:12px;width:auto;max-height:70vh}
  .werkvlak{display:flex;flex-direction:column}
  .kaartvak{position:relative;inset:auto;order:1;height:44vh;height:44svh;min-height:260px}
  .zijkant{position:static;order:2;width:auto;max-height:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
  .zijkant h2{padding:18px 16px 0}
  .route{padding-left:14px;padding-right:16px}
  .zij-voet{display:none}
  .lagen{top:62px;left:10px;gap:8px}
  .filter{width:46px;height:46px;border-radius:13px}
  .sym-pion svg{width:30px;height:30px}.sym-bus svg{width:34px;height:24px}.sym-p svg{width:29px;height:29px}
  .lichtje .label{font-size:11.5px;padding:4px 9px 5px}
  .legenda{bottom:10px;left:10px;font-size:12px;padding:5px 10px;gap:10px}

  /* kaartvoorbeeld: je vinger scrolt de pagina; tik om de kaart groot te maken */
  .kaartvak:not(.groot){cursor:pointer}
  .kaartvak:not(.groot) .leaflet-pane,.kaartvak:not(.groot) .leaflet-control-zoom{pointer-events:none}
  .kaartvak:not(.groot) .lagen{display:none}
  .kaartvak:not(.groot) .leaflet-control-zoom{display:none}
  .kaartvak:not(.groot) .overzicht{display:none}
  .kaartvak:not(.groot) .legenda{bottom:auto;top:10px;pointer-events:none}
  .kaartvak:not(.groot) .legenda-meer{display:none}
  .uitleg{left:10px;right:10px;width:auto;bottom:calc(56px + env(safe-area-inset-bottom))}
  .kaart-groot{display:inline-flex;position:absolute;z-index:1001;right:10px;bottom:28px;align-items:center;gap:8px;background:var(--inkt);color:#fff;border:0;border-radius:999px;padding:10px 16px;font:600 14px/1 var(--tekst);box-shadow:var(--schaduw-2);cursor:pointer}
  .kaart-groot svg{width:15px;height:15px}
  .kaartvak.groot{position:fixed;inset:0;z-index:3000;height:100vh;height:100dvh;min-height:0;background:#eef1f4}
  .kaartvak.groot .kaart-groot{display:none}
  .kaartvak.groot .kaart-terug{display:inline-flex;position:absolute;z-index:1002;top:10px;left:10px;align-items:center;gap:6px;background:var(--inkt);color:#fff;border:0;border-radius:999px;padding:10px 16px;font:600 14px/1 var(--tekst);box-shadow:var(--schaduw-2);cursor:pointer}
  .kaartvak.groot .kaart-terug::before{content:"←";font-size:16px}
  .kaartvak.groot .legenda{bottom:calc(14px + env(safe-area-inset-bottom))}
  .kaartvak.groot .leaflet-bottom{bottom:env(safe-area-inset-bottom)}
  body.kaart-open{overflow:hidden}
}
.pop h3 small{display:block;margin-top:2px;font:400 12.5px/1.3 var(--tekst);letter-spacing:0;color:var(--grijs)}

/* ---------- jouw route: het sterretje zet een route bovenaan ---------- */
#mijn:not(:empty){border-bottom:6px solid var(--veld)}
.rij{position:relative}
.rij .route .naam{padding-right:30px}
.rij .route.kort .min{margin-right:32px}
.ster{position:absolute;top:6px;right:28px;width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:none;color:var(--grijs);cursor:pointer;opacity:.5}
.rij .route.kort + .ster{top:50%;transform:translateY(-50%)}
.ster svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.ster:hover,.ster:focus-visible{opacity:1;background:var(--veld)}
.ster.aan{opacity:1}
.ster.aan svg{fill:#f0b400;stroke:#c98f00}
.route.k0 .tijd b{color:var(--groen-tekst)}
.route .vorig{grid-column:2;margin-top:3px;font-size:12px;line-height:1.3;color:var(--grijs)}
.pop .vorig{margin-top:4px;font-size:12.5px;color:var(--grijs)}
/* rood pulserend stipje: dit is de plek van het lichtje op de kaart */
.stip{display:inline-block;width:9px;height:9px;margin:0 7px 2px 1px;border-radius:50%;background:var(--rood);vertical-align:middle;animation:stip 2.8s ease-out infinite}
@keyframes stip{0%{box-shadow:0 0 0 0 rgba(216,35,42,.55)}70%,100%{box-shadow:0 0 0 7px rgba(216,35,42,0)}}
.stip.stil{animation:none;width:8px;height:8px}
@media (prefers-reduced-motion:reduce){.stip{animation:none}}
/* jouw route in de balk: alleen op de telefoon (op een groot scherm staat hij bovenaan de routekaart) */
.nu-mijn{display:none}
@media (max-width:760px){
  .band-nu{flex-wrap:wrap;row-gap:8px}
  .band-nu > .nu-tekst{flex:1 1 0}
  .nu-mijn{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
  .nu-mijn button{display:inline-flex;align-items:center;gap:5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--lijn);background:var(--papier);border-radius:999px;padding:6px 12px 6px 9px;font:500 13.5px/1.2 var(--tekst);color:var(--inkt);cursor:pointer}
  .nu-mijn svg{width:14px;height:14px;fill:#f0b400;stroke:#c98f00;stroke-width:1.5}
  .nu-mijn b{font-weight:700}
  .nu-mijn .k0 b{color:var(--groen-tekst)}.nu-mijn .k1 b{color:var(--oranje-tekst)}.nu-mijn .k2 b{color:var(--rood)}
}
/* geen dunne lijntjes tussen de kaartplaatjes (bij halve zoomstappen) */
.leaflet-tile-container img{width:256.5px!important;height:256.5px!important}