/* Waar staat Haarlem vast? — huisstijl
   Licht en rustig; kleur alleen waar het verkeer staat. */
:root{
  --papier:#ffffff; --veld:#f2f5f8; --veld-2:#e8edf2; --inkt:#15213b; --inkt-2:#34405a; --grijs:#5f6b7f; --lijn:#dde3ea;
  --rood:#d8232a; --rood-zacht:#fde8e8; --oranje:#e98300; --oranje-tekst:#a95e00; --oranje-zacht:#fff1dd; --groen-tekst:#1f7a47; --groen:#2b9e5f; --groen-zacht:#e3f4ea;
  --spaarne:#1f7a8c; --spaarne-zacht:#e2f1f4; --geel:#f0b400; --geel-tekst:#9a7000;
  --kop:"Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --tekst:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:12px; --schaduw:0 4px 18px rgba(21,33,59,.08); --schaduw-2:0 10px 30px rgba(21,33,59,.14);
  --kopbalk:58px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--inkt);font:16px/1.5 var(--tekst);font-feature-settings:"tnum" 1}
a{color:inherit}
:focus-visible{outline:3px solid var(--spaarne);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- kopbalk: donker, zodat je meteen ziet waar het menu zit ---------- */
.balk{height:var(--kopbalk);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;background:var(--inkt);color:#fff;position:relative;z-index:1100}
.balk :focus-visible{outline-color:#fff}
.merk{font:800 24px/1 var(--kop);letter-spacing:-.02em;text-decoration:none;white-space:nowrap;color:#fff}
.merk em{font-style:normal;color:#ff6b70}
.merk small{display:block;font:500 11px/1 var(--tekst);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:5px}
.menu{display:flex;gap:4px}
.menu a{text-decoration:none;font-size:15px;font-weight:500;color:rgba(255,255,255,.88);padding:8px 14px;border-radius:999px}
.menu a:hover{background:rgba(255,255,255,.12);color:#fff}
.menu a[aria-current="page"]{background:#fff;color:var(--inkt)}

/* ---------- live-label ---------- */
.live{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--grijs)}
/* groen stipje: de metingen zijn vers (rood betekent op deze site "staat vast") */
.live i{width:8px;height:8px;border-radius:50%;background:var(--groen);box-shadow:0 0 0 0 rgba(43,158,95,.5);animation:puls 2s infinite}
.live.oud i{background:var(--grijs);animation:none}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(43,158,95,.45)}70%{box-shadow:0 0 0 7px rgba(43,158,95,0)}100%{box-shadow:0 0 0 0 rgba(43,158,95,0)}}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lijn);background:var(--papier);color:var(--inkt);font:500 14px/1 var(--tekst);padding:9px 14px;border-radius:999px;cursor:pointer;text-decoration:none}
.knop:hover{border-color:var(--inkt)}
.knop.vol{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.knop.vol:hover{background:var(--inkt-2)}

/* ---------- inhoudspagina's ---------- */
.blad{max-width:760px;margin:0 auto;padding:48px 24px 80px}
.blad.breed{max-width:1120px}
.blad h1{font:800 clamp(34px,4.4vw,56px)/1.02 var(--kop);letter-spacing:-.03em;margin:0 0 16px}
.blad h2{font:800 26px/1.15 var(--kop);letter-spacing:-.02em;margin:48px 0 8px}
.blad p{margin:0 0 16px}
.blad .inleiding{font-size:19px;color:var(--inkt-2)}
.klein{font-size:13px;color:var(--grijs)}

/* ---------- voet ---------- */
.voet{border-top:1px solid var(--lijn);padding:18px 24px;font-size:12px;color:var(--grijs);display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
.voet a{color:var(--grijs)}
.alleen-smal{display:none}

@media (max-width:760px){
  .balk{padding:0 14px;--kopbalk:54px}
  .merk{font-size:19px}.merk small{display:none}
  .menu{gap:0}
  .menu a{padding:11px 9px;font-size:13.5px}
  .menu a.alleen-breed{display:none}
  .alleen-smal{display:flex}
  .blad{padding:32px 18px 64px}
}
@media (max-width:430px){
  /* smal: de hele naam op twee regels ("Haarlem vast?" alleen klinkt als een klacht) */
  .merk .lang{display:block;font:600 10px/1 var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:3px}
  .merk{font-size:20px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- steun de kaart: de popup met de slagboom (public/js/steun.js) ---------- */
.steun-link,.bakkie{display:none}
.steun-aan .steun-link{display:inline}
.steun-aan .bakkie{display:flex}
.steun{width:min(440px,calc(100vw - 32px));box-sizing:border-box;border:0;border-radius:18px;padding:22px 24px 22px;background:var(--papier);color:var(--inkt);box-shadow:0 24px 70px rgba(10,20,40,.35)}
.steun::backdrop{background:rgba(21,33,59,.55)}
.steun h2{margin:4px 0 6px;font:800 26px/1.1 var(--kop);letter-spacing:-.02em}
.steun p{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--inkt-2)}
.steun .steun-klein{margin:14px 0 0;font-size:12.5px;color:var(--grijs)}
.steun-dicht{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:var(--veld);color:var(--inkt);font-size:20px;line-height:1;cursor:pointer}
.steun-weg{display:block;width:100%;height:auto;margin:8px 0 6px}
.steun-lamp{fill:var(--rood);transition:fill .3s}
.steun-arm{transform-box:view-box;transform-origin:264px 77px;transition:transform .8s cubic-bezier(.5,1.6,.5,1)}
.steun-auto{transform:translate(40px,86px);transition:transform 1.4s ease-in .35s}
.steun.open .steun-arm{transform:rotate(-78deg)}
.steun.open .steun-lamp{fill:#2b9e5f}
.steun.open .steun-auto{transform:translate(460px,86px)}
.steun-open-deel{display:none}
.steun.open .steun-open-deel{display:block}
.steun.open .steun-dicht-deel{display:none}
.steun-munten{display:flex;gap:10px}
.steun-munt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:76px;border-radius:14px;border:2px solid #b88a00;background:var(--geel);color:var(--inkt);text-decoration:none;transition:transform .15s}
.steun-munt:hover,.steun-munt:focus-visible{transform:translateY(-3px)}
.steun-munt b{font:800 24px/1 var(--kop)}
.steun-munt small{font-size:12px}
/* het gele kaartje onder de routes, alleen als alles doorrijdt */
.bakkie{align-items:center;gap:12px;width:calc(100% - 24px);margin:0 12px 12px;padding:11px 14px;border:0;border-radius:12px;background:#fff4d6;color:var(--inkt);font:inherit;text-align:left;cursor:pointer}
.bakkie:hover{background:#ffecb8}
.bakkie svg{width:36px;height:36px;flex:none}
.bakkie b{display:block;font-size:14px}
.bakkie span span{display:block;font-size:12.5px;color:var(--inkt-2)}