/* De kaartpagina */
/* voorbeeldstand (alleen op je eigen computer): gele balk bovenaan */
.demo-balk{background:var(--geel);color:var(--inkt);font-size:0.875rem;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 statusstrook: drie kolommen (de stand, het weer, de lucht), elk met een plaatje links en daarnaast een kleine kop,
   de waarde en een regel erbij, op vaste hoogtes; dunne lijnen ertussen ---------- */
.kop-groot .band{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,1.97fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"nu weer lucht";align-items:stretch;min-height:120px;background:var(--papier)}
.band-nu{grid-area:nu;display:flex;align-items:center;gap:16px;min-width:0;padding:0 24px 0 28px}
.band-weer{display:contents}
.cel{min-width:0;padding:0 20px 0 28px;border-left:1px solid var(--lijn);display:grid;align-content:center}
.cel-weer{grid-area:weer}.cel-lucht{grid-area:lucht}
.cel-label{margin:0;font:700 0.75rem/0.875rem var(--tekst);letter-spacing:.09em;text-transform:uppercase;color:var(--grijs)}
.nu-tekst{min-width:0}
.nu-tekst .live{min-height:14px;margin:0 0 4px;line-height:0.875rem}
.nu-woord{margin:0;font:800 1.5rem/1.875rem var(--kop);letter-spacing:-.01em;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:4px 0 0;font-size:0.8438rem;line-height:1.25rem;color:var(--inkt-2)}
/* de link naar de cijfers staat rechts op de live-regel: kost geen eigen regel. De ruime tikvlak (padding met negatieve marge) kost ook geen hoogte */
.nu-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px}
.nu-tekst .nu-kop .live{margin:0}
.nu-kop .cijfers-link{flex:none;margin:-12px 0;padding:12px 0 12px 8px;font-size:0.8125rem;line-height:0.875rem;font-weight:700;color:var(--inkt);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.nu-kop .cijfers-link:hover{color:var(--baksteen)}
/* delen: rechtsboven in de balk, naast de taalknop */
.deel{position:absolute;top:10px;right:28px;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;min-width:84px;padding:0 13px;font:700 0.875rem/1 var(--tekst);color:var(--inkt);background:var(--papier);border:1px solid #8795aa;border-radius:8px;cursor:pointer}
.deel:hover{border-color:var(--inkt)}
.deel svg{width:16px;height:16px}


/* 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:104px;height:auto;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:58px;height:27px;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: dezelfde indeling als de stand (plaatje links; kop, waarde en regel rechts) */
.cel p{margin:0}
.cel-weer{grid-template-columns:56px minmax(0,1fr);grid-template-rows:0.875rem 1.875rem auto;column-gap:16px;row-gap:4px}
.weer-nu,.weer-nu>div{display:contents}
.weer-nu svg{grid-area:1/1/4/2;align-self:center;width:40px;height:40px}
.cel-weer .cel-label{grid-area:1/2}
.weer-temp{grid-area:2/2;font:800 1.5rem/1.875rem var(--kop);letter-spacing:-.01em}
.weer-nu span{grid-area:3/2;font-size:0.8438rem;line-height:1.25rem;color:var(--inkt-2)}
.cel-weer .code{grid-column:1/-1;margin-top:8px}
/* de lucht: de wijzer, het woord in de kleur van de stand en de waarde op de schaal van 1 tot 11.
   Aanwijzen of tikken: een klein overzicht van de stoffen naast het WHO-advies. */
.cel-lucht{position:relative}
.lucht{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:0.875rem 1.875rem 1.25rem;column-gap:16px;row-gap:4px;align-content:center;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:10px}
.lucht .minimeter{grid-area:1/1/4/2;align-self:center;width:56px;height:auto}
.lucht-tekst{display:contents}
.lucht .cel-label{grid-area:1/2}
.lucht-woord{grid-area:2/2;font:800 1.5rem/1.875rem var(--kop);letter-spacing:-.01em}
.l-goed{color:var(--groen-tekst)}.l-matig{color:var(--geel-tekst)}.l-onvoldoende{color:var(--oranje-tekst)}.l-slecht,.l-zeerslecht{color:var(--rood)}
.lucht-waarde{grid-area:3/2;font-size:0.8438rem;line-height:1.25rem;color:var(--inkt-2);font-variant-numeric:tabular-nums}
.lucht-waarde b{font-weight:700;color:var(--inkt)}

.lucht-info{position:absolute;z-index:1300;left:20px;top:calc(100% - 6px);width:340px;padding:13px 16px 12px;background:var(--papier);border:1px solid var(--lijn);border-radius:14px;box-shadow:var(--schaduw-2);display:none;font-size:0.8125rem;line-height:1.4;color:var(--inkt-2)}
.cel-lucht:hover .lucht-info,.cel-lucht:focus-within .lucht-info,.cel-lucht.open .lucht-info{display:block}
.lucht-info p{margin:0}
.lucht-kop{font:800 0.9375rem/1.25 var(--kop);color:var(--inkt);letter-spacing:-.01em}
.lucht-schaal{margin-top:3px!important;font-size:0.7812rem}
.lucht-info table{width:100%;margin:9px 0 2px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.lucht-info th,.lucht-info td{padding:3px 0;text-align:left;font-weight:400;white-space:nowrap}
.lucht-info thead th{font-size:0.75rem;letter-spacing:.04em;color:var(--grijs)}
.lucht-info tbody th{color:var(--inkt)}
.lucht-info td:nth-child(2){text-align:right;font-weight:600;color:var(--inkt);padding-right:10px}
.lucht-info td:nth-child(3){width:70px;padding-right:10px}
.lucht-info td:last-child{text-align:right}
.lucht-info .balk{display:block;height:6px;border-radius:3px;background:var(--veld-2);position:relative;overflow:hidden}
.lucht-info .balk::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:3px;background:var(--groen)}
.lucht-info .balk.boven::after{background:var(--oranje)}
.lucht-voet{margin-top:6px!important;font-size:0.75rem;color:var(--grijs)}
/* weerwaarschuwing (KNMI): klein, maar met de kleur van de code */
.code{display:flex;align-items:center;gap:6px;font-size:0.8125rem}
.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 b{font-weight:700}
/* de rails liggen stil: een strookje onder de balk, alleen als er een heel traject (bijna) uit is. Klik = naar de rails op de kaart */
.rails{flex:none;background:var(--veld);border-bottom:1px solid var(--lijn)}
.rails:empty{display:none}
.rails-binnen{display:flex;align-items:center;gap:14px;width:100%;padding:5px 24px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.rails-binnen:hover{background:var(--veld-2)}
.rails-svg{width:92px;height:auto;flex:none}
.rails-tekst{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.rails-tekst b{font:800 0.9375rem/1.2 var(--kop);letter-spacing:-.01em}
.rails-tekst span{font-size:0.8438rem;line-height:1.3;color:var(--inkt-2)}
.rails-binnen .pijl{flex:none;width:8px;height:8px;border-top:2px solid var(--grijs);border-right:2px solid var(--grijs);transform:rotate(45deg);opacity:.6}
/* op de kaart: de slapende trein met een label, en de treinen die stilstaan */
.rails-merk{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;padding:3px 11px 3px 8px;background:#fff;border:1px solid var(--lijn);border-radius:999px;box-shadow:0 2px 8px rgba(21,33,59,.18);font:600 0.75rem/1 var(--tekst);color:var(--inkt);white-space:nowrap;pointer-events:auto;cursor:pointer}
.rails-mini{width:40px;height:auto;flex:none}
.rails-merk.n1{opacity:.9}
.trein-stil{position:absolute;transform:translate(-50%,-70%);width:40px;filter:drop-shadow(0 1px 2px rgba(21,33,59,.45));cursor:pointer}
.trein-stil svg{display:block;width:100%;height:auto;overflow:visible}
.trein-stil.om svg{transform:scaleX(-1)}
.uitleg .u-rails{width:30px;height:10px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--inkt) 0 2px,transparent 2px 7px);position:relative}
.uitleg .u-rails::after{content:"";position:absolute;left:0;right:0;top:3px;height:4px;background:repeating-linear-gradient(90deg,#ffc917 0 6px,var(--inkt) 6px 12px)}

/* ---------- 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 1.125rem/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:0.9062rem;line-height:1.25}
.route .tijd{grid-column:2;font-size:0.8125rem;color:var(--grijs);margin-top:1px}
.route .tijd b{font:800 1.0625rem/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:0.75rem;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:0.8438rem}
.route.kort .min{grid-column:2;font-size:0.8125rem;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}
.route.kort .oorzaak.waarom{grid-column:1/-1;grid-row:2;margin-top:2px;padding-right:32px}
.elders-kop{margin:0;padding:12px 16px 4px;border-top:1px solid var(--lijn);font:600 0.75rem/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:0.875rem;line-height:1.25}
.plek .plaats{font-weight:400;color:var(--grijs)}
.plek .tijd{grid-column:2;font-size:0.7812rem;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:0.75rem;line-height:1.3;color:var(--inkt-2)}
.plek .waar.ook{color:var(--grijs)}
.geen-vertraging{margin:0;padding:12px 16px 14px;font-size:0.875rem;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 0.8125rem/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}
/* de zin onder het rijtje: wat deze kaart is, voor wie hem nog niet kent (en voor zoekmachines) */
.zij-uitleg{margin:0;padding:12px 16px 14px;border-top:1px solid var(--lijn);font-size:0.7812rem;line-height:1.45;color:var(--grijs)}

/* ---------- 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 0.75rem/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 0.75rem/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:0.75rem;line-height:1.3;padding:0 5px;color:var(--grijs);background:rgba(255,255,255,.7)!important}
.leaflet-popup-content-wrapper{border-radius:12px;box-shadow:var(--schaduw-2)}
.leaflet-popup-content{margin:12px 16px;font-size:0.875rem;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 */
.advies{margin-top:8px;font-weight:600;font-size:0.875rem;line-height:1.35}
.straks{margin-top:8px;padding-top:8px;border-top:1px solid var(--lijn)}
.straks-rij{display:flex;gap:10px;margin:3px 0;font-size:0.8125rem;white-space:nowrap}
.straks-rij b{font-weight:600}
.pop h3{margin:0 0 4px;font:700 0.9375rem/1.25 var(--tekst)}
.pop .groot{font:800 1.625rem/1.1 var(--kop);letter-spacing:-.02em}
.pop .groot small{font:500 0.8125rem var(--tekst);color:var(--grijs);letter-spacing:0}
.pop .m{color:var(--grijs);font-size:0.7812rem}
.pop .woord{font:600 0.75rem/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:#9a5400}.pop .w2{background:var(--rood-zacht);color:#b81e24}
.pop .tekst{margin-top:8px;max-height:140px;overflow:auto;white-space:pre-line;font-size:0.8125rem;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:2.625rem;font-size:1.5rem;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 Amsterdam": 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:0.875rem;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:0.7812rem;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 0.7812rem/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 0.75rem/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:0.8125rem;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}
/* de knop op het kaartvoorbeeld (telefoon) pulseert zachtjes, tot iemand de kaart een keer heeft geopend */
.kaart-groot.nieuw{animation:groot-puls 2.4s ease-out 1.2s infinite}
@keyframes groot-puls{0%{box-shadow:0 0 0 0 rgba(21,33,59,.45)}70%,100%{box-shadow:0 0 0 12px rgba(21,33,59,0)}}
@media (prefers-reduced-motion:reduce){.kaart-groot.nieuw{animation: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 0.7812rem/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:0.8125rem}
.lichtje .label span{color:var(--grijs)}
.lichtje.stil .label{top:-19px;font-size:0.75rem;padding:4px 9px 5px}
/* alleen het ergste knelpunt heeft altijd een label; de andere bij muis erop (zo overlappen ze niet) */
.lichtje.stil .label,.verkend .lichtje .label{opacity:0;pointer-events:none;transition:opacity .15s}
.lichtje.stil:hover .label,.verkend .lichtje:hover .label{opacity:1}
/* na zelf slepen of zoomen krimpt ook het label van het ergste knelpunt (terug via "Heel Amsterdam") */
.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 = beide brugdelen omhoog met een zeilbootje ertussen, 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:5px 12.5px;animation-name:klep-l}
.klep-r{transform-origin:23px 12.5px;animation-name:klep-r}
@keyframes klep-l{from{transform:rotate(48deg)}to{transform:rotate(0)}}
@keyframes klep-r{from{transform:rotate(-48deg)}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 0.75rem/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}
/* een melding van de hulpdiensten: een zwaailicht in de kleur van de hulpdienst */
.zwaai{display:block;width:20px;height:22px;color:var(--lamp,#1d5fd1)}
.l-brandweer{--lamp:#d8232a}.l-ambulance{--lamp:#e0a100}.l-politie,.l-hulp{--lamp:#1d5fd1}.l-uit{--lamp:#9aa3b2}
.inzet-merk{position:relative;width:30px;height:33px;transform:translate(-50%,-92%);filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 1px 2px rgba(21,33,59,.4));cursor:pointer}
.inzet-merk::after{content:"";position:absolute;inset:-8px -7px}
.inzet-merk .zwaai{width:30px;height:33px}
.inzet-merk.vers .zwaai-straal{animation:lamp-knip 2.4s ease-in-out 3}
@keyframes lamp-knip{0%,100%{opacity:1}50%{opacity:.35}}
.inzet-pop h3{display:flex;align-items:center;gap:8px}
.inzet-pop h3 .zwaai{width:18px;height:20px}
.route .oorzaak.waarom{display:flex;align-items:center;gap:6px;margin-top:4px}
.route .oorzaak.waarom .zwaai{flex:none;width:13px;height:15px}
.route .inzet,.plek .inzet{grid-column:2;display:flex;align-items:flex-start;gap:9px;margin-top:6px;padding:7px 10px 7px 8px;border-radius:2px;background:var(--veld);background:color-mix(in srgb,var(--lamp) 8%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lamp) 22%,transparent)}
.inzet .zwaai{width:22px;height:24px}
.inzet-lamp{flex:none;padding-top:1px}
.punt{display:inline-block;width:3px;height:3px;margin:0 .5em;border-radius:50%;background:currentColor;vertical-align:middle;opacity:.7}
.inzet-tekst{min-width:0}
.inzet-tekst b{display:block;font-size:0.8125rem;font-weight:700;line-height:1.3;color:var(--inkt)}
.inzet-tekst small{display:block;margin-top:2px;font-size:0.75rem;line-height:1.3;color:var(--inkt-2)}
.route.kort .inzet,.route.kort .oorzaak.waarom{grid-column:1/-1;grid-row:2}
/* 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 0.75rem/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:0.8438rem}
.morgen-rij .tijd{grid-column:1;font-size:0.7812rem;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:0.75rem;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 0.75rem/0.8125rem 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 0.875rem/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 0.75rem/1rem 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:0.7812rem;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 0.75rem/1.25rem 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 0.7812rem/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:0.8125rem}
.tip small{font-size:0.75rem;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}
.sym-dertig svg{width:34px;height:34px}
.sym-msi svg{width:34px;height:34px}
.msi-merk{width:26px;height:26px;margin:-13px 0 0 -13px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}.msi-merk svg{width:100%;height:100%;display:block}
.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:0.8438rem;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:1180px){.zijkant{width:280px}}
/* iets smaller (1041 tot 1180): de kolommen van de strook krijgen minder lucht, zodat de tekst minder vaak afbreekt */
@media (min-width:1041px) and (max-width:1180px){
  .band-nu{gap:12px;padding:0 16px 0 20px}
  .band-nu .meter{width:88px}
  .cel{padding:0 12px 0 20px}
  .cel-weer,.lucht{grid-template-columns:44px minmax(0,1fr);column-gap:12px}
  .weer-nu svg{width:36px;height:36px}
  .lucht .minimeter{width:44px}
}
/* ---------- de statusstrook op een kleiner scherm: links de stand, rechts het weer boven de lucht, met lijnen ertussen ---------- */
@media (max-width:1040px){
  .kop-groot .band{grid-column:1/-1;grid-row:2;grid-template-areas:none;grid-template-columns:54px minmax(0,1fr) clamp(124px,40vw,158px);grid-template-rows:minmax(2.625rem,auto) minmax(2.625rem,auto) auto;min-height:0;padding-left:16px;border-top:1px solid var(--lijn);align-items:center}
  .band-nu{display:contents}
  .band-nu .meter{grid-column:1;grid-row:1/3;align-self:center;width:54px;margin:0}
  .nu-tekst{grid-column:2;grid-row:1/3;align-self:center;padding:8px 8px 8px 9px}
  .nu-tekst .live{font-size:0.75rem;min-height:13px;line-height:0.8125rem;margin-bottom:3px}
  .nu-woord{font-size:1.0625rem;line-height:1.3125rem}
  .nu-feiten{margin-top:2px;font-size:0.7812rem;line-height:0.9375rem}
  .cel{grid-column:3;align-self:stretch;min-height:42px;padding:3px 12px 3px 14px}
  .cel-weer{grid-row:1;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;row-gap:0}
  .cel-lucht{grid-row:2;border-top:1px solid var(--lijn)}
  .cel:only-child{grid-row:1/3}
  .cel-weer .cel-label{display:none}
  .weer-nu svg{grid-area:1/1/3/2;width:24px;height:24px}
  .weer-temp{grid-area:1/2;font-size:1rem;line-height:1.0625rem;letter-spacing:0}
  .weer-nu span{grid-area:2/2;font-size:0.75rem;line-height:0.8125rem}
  .cel-weer .code{grid-column:1/-1;margin-top:4px;font-size:0.75rem}
  .lucht{grid-template-columns:24px auto minmax(0,1fr);grid-template-rows:1.0625rem 0.875rem;column-gap:8px;row-gap:0}
  .lucht .minimeter{grid-area:1/1/3/2;width:24px}
  .lucht-woord{grid-area:1/2/2/4;font-size:1rem;line-height:1.0625rem;letter-spacing:0}
  .lucht .cel-label{grid-area:2/2;font:400 0.75rem/0.875rem var(--tekst);letter-spacing:0;text-transform:none}
  .lucht-waarde{grid-area:2/3;margin-left:4px;font-size:0.75rem;line-height:0.875rem}
  .deel{top:6px;right:64px;width:44px;height:44px;min-width:0;padding:0;border-radius:8px}
  .deel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .deel svg{width:20px;height:20px}
}
/* Tussen 761 en 1040 px is de menuknop breder (met woord "Menu"): de deelknop staat links ernaast, niet erop */
@media (min-width:761px) and (max-width:1040px){.deel{right:140px}}

/* ---------- telefoon ---------- */
@media (max-width:760px){
  body.kaartpagina{height:auto;overflow:auto;display:block}
  .lucht-info{left:auto;right:0;width:min(330px,calc(100vw - 24px))}
  .rails-tekst span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rails-binnen{padding:4px 16px 3px;gap:10px}
  .rails-svg{width:70px}
  .rails-tekst b{font-size:0.9375rem}
  .rails-tekst span{font-size:0.8125rem}
  .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:0.75rem;padding:4px 9px 5px}
  .legenda{bottom:10px;left:10px;font-size:0.75rem;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 0.875rem/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 0.875rem/1 var(--tekst);box-shadow:var(--schaduw-2);cursor:pointer}
  .kaartvak.groot .kaart-terug::before{content:"←";font-size:1rem}
  .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 0.7812rem/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:.8}
.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:0.75rem;line-height:1.3;color:var(--grijs)}
.pop .vorig{margin-top:4px;font-size:0.7812rem;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){
  .nu-mijn{grid-column:1/-1;grid-row:3;display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px 0}
  .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 0.8438rem/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)}
}

/* ---------- ronde 14: de taal van het bord — rechthoekig, met een donkere kop, dunne lijnen en geen schaduwen ---------- */
/* knoppen en vlakken: scherp, als een bord; geen schaduwen, geen pillen */
.deel,.menuknop{border-radius:2px;border-color:var(--inkt);border-width:1.5px}
/* de kaart: een eigen toon (perkament, het water blijft Spaarne-blauw) */
.leaflet-tile-pane{filter:saturate(.78) brightness(1.03)!important}
.leaflet-tile-pane::after{content:"";position:absolute;left:-4000px;top:-4000px;width:9000px;height:9000px;background:var(--perkament);mix-blend-mode:multiply;pointer-events:none;z-index:50}
#kaart{background:#f3ecdc}
.naam-wijk{color:rgba(143,58,44,.78);text-shadow:0 0 3px var(--perkament),0 0 3px var(--perkament),0 0 6px var(--perkament)}
/* het routebord: een vertrekbord, rechthoekig, met een donkere kop */
.zijkant{border:1.5px solid var(--inkt);border-radius:2px;box-shadow:none;top:14px;right:14px}
.zijkant h2{margin:0;padding:11px 16px 10px;background:var(--inkt);color:#fff;font:800 1rem/1.2 var(--kop);letter-spacing:0;display:flex;justify-content:space-between;align-items:baseline}
.route,.plek{border-radius:0}
.route .pijl,.plek .pijl{display:none}
.route,.plek{grid-template-columns:40px minmax(0,1fr)}
.route.k2{box-shadow:inset 6px 0 0 var(--rood)}
.route.k1{box-shadow:inset 6px 0 0 var(--oranje)}
.route.k0,.route.kort{box-shadow:inset 6px 0 0 #8cc9a4}
.route.k1,.route.k2{padding-left:20px}
.route .tijd b{display:inline-block;padding:3px 7px 2px;margin-right:3px;border:1.5px solid currentColor;border-radius:2px;font:800 1.0625rem/1 var(--kop);letter-spacing:0}
.route.k2 .tijd b{background:var(--rood);border-color:var(--rood);color:#fff}
.route.kort .min{font:800 0.875rem/1 var(--kop);color:var(--inkt);padding:3px 6px 2px;border:1.5px solid var(--lijn);border-radius:2px;font-variant-numeric:tabular-nums}
.route.kort.k0 .min{color:var(--groen-tekst);border-color:#8cc9a4}
.elders-kop,.zij-uitleg{color:var(--grijs)}
.toon-alle{color:var(--inkt);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.toon-alle::after{display:none}
/* het kaartbord: de lagen en de legenda samen, met woorden */
.lagen{top:14px;left:14px;gap:0;width:218px;background:var(--papier);border:1.5px solid var(--inkt);border-radius:2px}
.lagen::before{content:attr(data-kop);display:block;padding:9px 12px 8px;background:var(--inkt);color:#fff;font:800 0.875rem/1.2 var(--kop)}
.filter{width:100%;height:48px;justify-content:flex-start;gap:12px;padding:0 12px 0 8px;border:0;border-top:1px solid var(--lijn);border-radius:0;box-shadow:none;background:var(--papier);text-align:left}
.filter:first-of-type{border-top:0}
.filter:hover{background:var(--veld)}
.filter .sym{width:38px}
.filter .sym svg{transform:scale(.88)}
.filter .teller{position:static;order:3;margin-left:auto;box-shadow:none;border-radius:2px;background:var(--inkt);min-width:24px;height:22px;line-height:1.375rem;font-size:0.75rem}
.filter[aria-pressed="false"] .teller{background:#5f6b7f}
.filter .tip{position:static;order:2;opacity:1;transform:none;background:none;color:var(--inkt);padding:0;box-shadow:none;max-width:none;width:auto;border-radius:0;font:700 0.875rem/1.2 var(--tekst)}
.filter .tip::before,.filter .tip span,.filter .tip small{display:none}
.filter .tip b{font-weight:700;font-size:0.875rem}
.filter[aria-pressed="true"]{background:var(--spaarne-zacht);box-shadow:inset 6px 0 0 var(--spaarne)}
.filter[aria-pressed="true"] .tip::after{content:" · aan";font-weight:600;color:var(--spaarne)}
.legenda{position:static;display:flex;flex-wrap:wrap;gap:6px 12px;border:0;border-top:1.5px solid var(--inkt);border-radius:0;box-shadow:none;background:var(--papier);padding:9px 12px;font-size:0.8125rem;color:var(--inkt)}
.legenda i{height:6px;width:18px;border-radius:0}
.legenda .l2{background:var(--rood);box-shadow:0 0 0 1.5px var(--rood)}
.legenda-meer{margin:0;padding:0;border:0;color:var(--inkt);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.legenda-meer::after{display:none}
.kaart-groot,.kaart-terug{border-radius:2px}
.melding,.zoomhint{border-radius:2px}
/* de kop: een lettertje strakker */
.cel-label{color:var(--baksteen)}
.band .cel-label{letter-spacing:.1em}
/* ===== telefoon: het kaartbord onderaan, in vier vakken ===== */
@media (max-width:760px){
  .kaartvak.groot .lagen{top:auto;bottom:calc(10px + env(safe-area-inset-bottom));left:10px;right:10px;width:auto;display:grid;grid-template-columns:repeat(4,1fr)}
  .kaartvak.groot .lagen::before{display:none}
  .kaartvak.groot .filter{flex-direction:column;justify-content:center;gap:2px;height:78px;padding:6px 4px 4px;border-top:0;border-left:1px solid var(--lijn);text-align:center}
  .kaartvak.groot .filter:first-of-type{border-left:0}
  .kaartvak.groot .filter .tip{font-size:0.75rem;line-height:1.15;text-align:center}
  .kaartvak.groot .filter .tip b{font-size:0.75rem}
  .kaartvak.groot .filter[aria-pressed="true"]{box-shadow:inset 0 -5px 0 var(--spaarne)}
  .kaartvak.groot .filter[aria-pressed="true"] .tip::after{content:none}
  .kaartvak.groot .filter .teller{position:absolute;top:4px;right:4px;margin:0}
  .kaartvak.groot .legenda{grid-column:1/-1;font-size:0.7812rem}
  .kaartvak.groot .zoomhint{bottom:170px}
}
@media (hover:none){.filter .tip{display:block}}
/* in het kleine kaartvoorbeeld op de telefoon blijft alleen de legenda staan, bovenin */
@media (max-width:760px){
  .kaartvak:not(.groot) .lagen{display:contents}
  .kaartvak:not(.groot) .lagen::before,.kaartvak:not(.groot) .filter{display:none}
  .kaartvak:not(.groot) .legenda{position:absolute;top:10px;left:10px;border:1.5px solid var(--inkt)}
}

/* ---------- toegankelijkheid op de kaartpagina ---------- */
.lucht-laag{display:none}
@media (min-width:1381px){.lucht-laag{display:inline;color:var(--grijs)}.lucht-laag::before{content:"·";margin:0 .4em}}
.lichtje.stil:focus-within .label,.lichtje.stil:focus .label{opacity:1}
/* weinig hoogte (200% zoom, telefoon liggend): de pagina moet kunnen scrollen */
@media (max-width:1040px) and (max-height:700px){
  body.kaartpagina{height:auto;overflow:auto;display:block}
  .werkvlak{display:flex;flex-direction:column}
  .kaartvak{position:relative;inset:auto;order:1;height:420px}
  .zijkant{position:static;order:2;width:auto;max-height:none;border:0;border-top:1.5px solid var(--inkt);overflow:visible}
}
.route .oorzaak,.route .waar,.plek .waar,.route .vorig{font-size:.8125rem}

/* ---------- ronde 15: de telefoon, veel rustiger ----------
   Eerst het antwoord, dan het weer, dan een klein kaartje, dan de lijst. Het logo wordt een smal kopje,
   Deel zit in het menu, de lagen zitten achter één knop en het kaartvoorbeeld heeft geen namen en ballonnen. */
.menu-deel,.lagen-knop,.meer-meldingen{display:none}
@media (max-width:760px){
  .kop,.kop-klein,.kop-groot{--fs:17px;--sy:.5}
  .kop .merk{padding:9px 14px 8px}
  .merk-vraag{display:none}
  .kop-balk{padding:6px 12px 0 0}
  .deel{display:none}
  .menu-deel{display:flex;align-items:center;min-height:48px;padding:0;border:0;border-bottom:1px solid var(--lijn);background:none;font:inherit;font-size:1.0625rem;color:var(--inkt);text-align:left;cursor:pointer}
  .taal>*{min-width:48px;height:48px}

  /* het antwoord */
  .kop-groot .band{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;padding:0}
  .band-nu{grid-column:1;grid-row:1;display:flex;align-items:center;gap:14px;padding:12px 16px 12px 14px;border-left:6px solid var(--lijn)}
  .band-nu:has(.nu-groen){border-left-color:#5fb987}.band-nu:has(.nu-geel){border-left-color:var(--geel)}
  .band-nu:has(.nu-oranje){border-left-color:var(--oranje)}.band-nu:has(.nu-rood){border-left-color:var(--rood)}
  .band-nu .meter{grid-column:auto;grid-row:auto;flex:none;width:56px}
  .nu-tekst{grid-column:auto;grid-row:auto;padding:0}
  .nu-woord{font-size:1.5rem;line-height:1.2}
  .nu-feiten{font-size:.875rem;line-height:1.35}
  /* weer en lucht: één strook */
  .band-weer{grid-column:1;grid-row:2;display:flex;border-top:1px solid var(--lijn)}
  .cel{grid-column:auto;grid-row:auto;flex:1 1 50%;min-width:0;min-height:0;border-left:0;padding:8px 14px 8px 16px}
  .cel-lucht{border-left:1px solid var(--lijn);border-top:0}
  .lucht-waarde,.lucht-woord{white-space:nowrap}
  .lucht-info{left:auto;right:0}

  /* het kaartvoorbeeld: alleen de lijnen */
  .kaartvak:not(.groot){height:clamp(280px,46vh,440px);height:clamp(280px,46svh,440px);min-height:0}
  .kaartvak:not(.groot) :is(.leaflet-namen-pane,.leaflet-bordjes-pane,.leaflet-popup-pane){display:none}
  .kaartvak:not(.groot) .legenda{top:auto;bottom:8px;left:8px;border:0;background:rgba(255,255,255,.92);padding:3px 8px;font-size:.75rem}
  .kaart-groot{bottom:8px;right:8px;padding:12px 16px}

  /* de lijst */
  .zijkant h2{padding:14px 16px;font-size:1rem}
  .route .mini-auto{display:none}
  .route,.plek.route{grid-template-columns:minmax(0,1fr)}
  .route .naam,.route .tijd,.route .waar,.route .oorzaak,.route .vorig{grid-column:1}
  .route .oorzaak{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .route .oorzaak.waarom{display:flex}
  .route .inzet,.plek .inzet{grid-column:1}
  .meer-meldingen{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 16px 0 12px;border:0;border-top:1px solid var(--lijn);background:none;font:700 1rem/1.2 var(--tekst);color:var(--rood-tekst);text-align:left;cursor:pointer}
  .meer-meldingen svg{flex:none;width:26px;height:26px;margin-left:2px}
  .meer-meldingen span{flex:1}
  .meer-meldingen::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
  .meer-meldingen[aria-expanded="true"]::after{transform:rotate(225deg)}
  .ster{width:44px;height:44px;right:16px}

  /* de grote kaart: de lagen zitten achter één knop */
  .kaartvak.groot .lagen-knop{display:flex;align-items:center;justify-content:space-between;grid-column:1/-1;min-height:48px;padding:0 14px;border:0;background:var(--inkt);color:#fff;font:800 .9375rem/1 var(--kop);cursor:pointer;text-align:left}
  .kaartvak.groot .lagen-knop::after{content:"";width:8px;height:8px;border-right:2px solid #fff;border-top:2px solid #fff;transform:rotate(-45deg) translate(-2px,2px);transition:transform .15s}
  .kaartvak.groot .lagen:not(.open) .filter{display:none}
  .kaartvak.groot .lagen.open .lagen-knop::after{transform:rotate(135deg) translate(-2px,2px)}
  .kaartvak.groot .kaart-terug{min-height:44px}
}
@media (max-width:760px){.kaartvak:not(.groot) .lichtje .label{display:none}}
@media (max-width:760px){.kaartvak:not(.groot) .kaart-groot{top:8px;bottom:auto}}

/* de plekken met een tijd (knelpunten): een kleurbalk links, net als de routes */
.plek.k1{box-shadow:inset 6px 0 0 var(--oranje)}.plek.k2{box-shadow:inset 6px 0 0 var(--rood)}
.plek.k1,.plek.k2{padding-left:20px}
@media (max-width:760px){
  /* geen kopbalk in het donker meer: een gewone kop met een dikke lijn erboven, zoals bij Cijfers */
  .zijkant{border-top:2px solid var(--inkt)}
  .zijkant h2{background:none;color:var(--inkt);padding:14px 16px 8px;font-size:1.125rem}
  /* de rijen met een tijd: geen autootje, de kleurbalk en de minuten zeggen het */
  .plek:not(.melding-rij):not(.brug-rij){grid-template-columns:minmax(0,1fr)}
  .plek:not(.melding-rij):not(.brug-rij) .mini-auto{display:none}
  .plek:not(.melding-rij):not(.brug-rij) :is(.naam,.tijd,.waar){grid-column:1}
}

@media (max-width:760px){
  .zijkant{border:0;border-top:2px solid var(--inkt)}
  .meer-meldingen{color:var(--inkt)}
}

/* telefoon: weer en lucht elk op één regel (het antwoord erboven blijft de hoofdzaak) */
@media (max-width:760px){
  .band-weer .cel{min-height:40px;padding:6px 12px 6px 14px;align-content:center}
  .cel-weer{flex:1 1 60%;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
  .cel-lucht{flex:1 1 40%}
  .weer-nu svg{grid-area:auto;flex:none;width:22px;height:22px}
  .weer-temp{grid-area:auto;font-size:1.0625rem;line-height:1.25rem}
  .weer-nu span{grid-area:auto;flex:1 1 auto;min-width:0;font-size:0.75rem;line-height:1rem}
  .cel-weer .code{flex:0 0 100%;margin-top:4px}
  .lucht{grid-template-columns:22px auto auto;grid-template-rows:auto;align-items:center;column-gap:8px}
  .lucht .minimeter{grid-area:1/1;width:22px}
  .lucht .cel-label{grid-area:1/2}
  .lucht-woord{grid-area:1/3;font-size:1.0625rem;line-height:1.25rem}
  .lucht-waarde{display:none}
}

/* Grote evenementen (strook onder de kop, net als de treinen): alleen als er een evenement is */
.evenement{flex:none;background:var(--oranje-zacht);border-bottom:1px solid var(--lijn)}
.evenement:empty{display:none}
.evenement-binnen{display:flex;align-items:flex-start;gap:12px;padding:6px 24px}
.evenement-label{flex:none;margin-top:2px;padding:2px 8px;border:1.5px solid var(--oranje-tekst);color:var(--oranje-tekst);font:800 0.6875rem/1.2 var(--kop);letter-spacing:.06em;text-transform:uppercase}
.evenement-tekst{display:flex;flex-wrap:wrap;gap:0 8px;min-width:0;flex:1;font-size:0.8438rem;line-height:1.35;color:var(--inkt-2)}
.evenement-tekst b{font:800 0.9375rem/1.3 var(--kop);color:var(--inkt)}
.evenement-tekst b a{color:inherit;text-decoration:none}
.evenement-tekst b a:hover,.evenement-tekst b a:focus-visible{text-decoration:underline}
.evenement-wanneer{font-weight:700;color:var(--oranje-tekst)}
.evenement-tekst>span:last-child{flex-basis:100%}
@media (max-width:760px){
  .evenement-binnen{padding:5px 16px;gap:8px}
  .evenement-tekst>span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}