/* Waar staat Amsterdam 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:#9a5400; --oranje-zacht:#fff1dd; --groen-tekst:#1f7a47; --groen:#2b9e5f; --groen-zacht:#e3f4ea;
  --spaarne:#1f7a8c; --spaarne-zacht:#e2f1f4; --geel:#f0b400; --geel-tekst:#8a6400;
  --kop:"Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tekst:"Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"DM Serif Display", Georgia, "Times New Roman", serif;  /* alleen in het logo */
  --vraag:"Newsreader", Georgia, "Times New Roman", serif;       /* alleen de vraag onder het logo */
  --blauw:#1f66c2; --rood-tekst:#c21d23;
  --r:12px; --schaduw:0 4px 18px rgba(21,33,59,.08); --schaduw-2:0 10px 30px rgba(21,33,59,.14);
}
*{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)}

/* ---------- de kop: het logo links, menu en taalknop rechts; op de kaartpagina daaronder de statusstrook ----------
   Alles staat in één raster met dunne lijnen ertussen: het logo in een eigen cel over de volle hoogte, de balk met het menu
   (de actieve pagina onderstreept op de lijn), en op de kaart de strook met drie kolommen. */
.kop{position:relative;z-index:1100;display:grid;grid-template-columns:var(--merk-breed) minmax(0,1fr);background:var(--papier);--merk-breed:296px;--fs:29.9px;--sy:.72}
.kop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--lijn);pointer-events:none}
.kop-klein{--merk-breed:296px;--fs:21.5px;--sy:.58;min-height:92px}
.kop-groot{grid-template-rows:3.5rem auto}

/* het logo: de fijne lijn van de Bavo, het woord eronder (de toren staat boven de l) en op de kaart de vraag met de remlichtjes.
   Alles in em, dus het hele logo schaalt mee met --fs (de breedte van het woord is 6,964 em). */
.merk{grid-column:1;grid-row:1/-1;display:flex;align-items:center;justify-content:center;padding:14px 12px;border-right:1px solid var(--lijn);color:var(--inkt);text-decoration:none;font-size:var(--fs);line-height:1}
.merk-blok{display:block;width:8.373em}
.merk-kerk,.merk-vlag{display:block;width:100%;height:auto;overflow:visible}
.merk-kerk path{fill:none;stroke:var(--inkt);stroke-width:1.4px;stroke-linejoin:miter;stroke-miterlimit:8;vector-effect:non-scaling-stroke}
.merk-kerk .k-detail{stroke-width:.95px;stroke-linecap:round}
.merk-woord{display:block;margin-top:.12em;font:400 1em/1.02 var(--serif);letter-spacing:0;white-space:nowrap;color:var(--inkt)}
.merk-woord i{font-style:italic;color:var(--blauw)}
.merk-vraag{display:flex;align-items:center;justify-content:space-between;gap:.3em;margin-top:.16em;font-family:var(--vraag);font-style:italic;font-weight:500;font-size:max(.47em,12.5px);line-height:1.25;white-space:nowrap;color:var(--blauw)}
.merk-vraag b{font-weight:700;color:var(--rood-tekst)}
/* de twee remlichtjes: uit als het rustig is, zacht aan bij druk, fel met gloed als het vaststaat (alleen versiering; de zin zelf is de tekst) */
.lamp{flex:none;width:max(calc(var(--fs)*.43),14px);height:max(calc(var(--fs)*.25),8px);border-radius:calc(var(--fs)*.115);background:#e3e8ef;box-shadow:inset 0 0 0 .8px #b5c0d0;transition:background .6s,box-shadow .6s,opacity .6s;position:relative}
.lamp::after{content:"";position:absolute;left:24%;top:22%;width:34%;height:20%;border-radius:2px;background:#ffb3b6;opacity:0;transition:opacity .6s}
.merk[data-stand="druk"] .lamp{background:#e98300;opacity:1;box-shadow:0 0 0 calc(var(--fs)*.05) rgba(216,35,42,.1)}
.merk[data-stand="vast"] .lamp{background:#d8232a;box-shadow:0 0 0 calc(var(--fs)*.07) rgba(216,35,42,.26),0 0 0 calc(var(--fs)*.14) rgba(216,35,42,.1)}
.merk[data-stand="druk"] .lamp::after{opacity:.55}
.merk[data-stand="vast"] .lamp::after{opacity:.85}

/* de balk: het menu links, de taalknop rechts; elke pagina een tabje dat op de lijn rust */
.kop-balk{grid-column:2;grid-row:1;position:relative;min-width:0;height:56px;display:flex;align-items:stretch;justify-content:space-between;gap:20px;padding:0 28px}
.kop-klein .kop-balk{height:auto;align-self:end;min-height:56px}
.kop-groot .kop-balk{padding-right:150px}
.kop-groot .kop-balk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--lijn);pointer-events:none}
.kop-menu{display:contents}
.menuknop{display:none}
.menu{display:flex;align-items:stretch;gap:28px}
.menu a{position:relative;z-index:1;display:flex;align-items:center;height:56px;padding-top:3px;font-size:0.9375rem;font-weight:600;color:var(--inkt);text-decoration:none;border-bottom:3px solid transparent}
.menu a:hover{color:#0f4c97}
.menu a[aria-current="page"]{border-bottom-color:var(--inkt)}
/* NL | EN: de twee kanten van een weg met een stippellijn ertussen */
.taal{display:inline-flex;align-items:center;align-self:center;font:700 0.8125rem/1 var(--tekst);letter-spacing:.06em;color:var(--grijs)}
.taal>*{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 9px;text-decoration:none;color:var(--grijs)}
.taal>*+*::before{content:"";position:absolute;left:0;top:11px;bottom:11px;border-left:1.5px dashed #b5c0d0}
.taal-nu{color:var(--inkt)!important}
.taal-ander:hover{color:#0f4c97}

/* ---------- live-label ---------- */
.live{display:inline-flex;align-items:center;gap:7px;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--grijs)}
/* groen stipje: de metingen zijn vers (rood betekent op deze site "staat vast") */
.live i{width:7px;height:7px;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 0.875rem/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 1.625rem/1.15 var(--kop);letter-spacing:-.02em;margin:48px 0 8px}
.blad p{margin:0 0 16px}
.blad .inleiding{font-size:1.1875rem;color:var(--inkt-2)}
.klein{font-size:0.8125rem;color:var(--grijs)}

/* ---------- voet ---------- */
.voet{border-top:1px solid var(--lijn);padding:18px 24px;font-size:0.75rem;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){
  .alleen-smal{display:flex}
  .blad{padding:32px 18px 64px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- steun (public/js/steun.js en public/css/steun.css) ---------- */
.steun-link{display:none}
.steun-aan .steun-link{display:inline}

/* ---------- de kop op een kleiner scherm: het logo met twee knoppen; het menu en de taal achter de menuknop ---------- */
@media (max-width:1040px){
  .kop{grid-template-columns:minmax(0,1fr) auto;--merk-breed:auto;--fs:25px;--sy:.54}
  .kop-klein{--fs:21px;--sy:.52;min-height:0}
  .kop-groot{grid-template-rows:auto auto}
  .merk{grid-row:1;border-right:0;justify-content:flex-start;padding:8px 16px}
  .kop-groot .merk{padding-bottom:6px}
  .kop-balk,.kop-klein .kop-balk,.kop-groot .kop-balk{position:static;grid-column:2;grid-row:1;height:auto;min-height:0;align-self:start;justify-content:flex-end;gap:8px;padding:6px 12px 0 0}
  .kop-groot .kop-balk::after{display:none}
  .menuknop{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid #8795aa;border-radius:8px;background:var(--papier);color:var(--inkt);cursor:pointer}
  .menuknop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  .mk-dicht{display:none}
  .kop.menu-open .mk-open{display:none}
  .kop.menu-open .mk-dicht{display:inline}
  .kop-menu{display:none;position:absolute;z-index:6;left:16px;right:16px;top:100%;flex-direction:column;background:var(--papier);border:1px solid var(--lijn);border-radius:10px;box-shadow:0 12px 32px rgba(20,33,58,.22);padding:6px 18px 10px}
  .kop.menu-open .kop-menu{display:flex}
  .kop.menu-open::before{content:"";position:fixed;inset:0;background:rgba(21,33,59,.28);z-index:5}
  .menu{flex-direction:column;gap:0}
  .menu a{height:auto;min-height:48px;padding:0;font-size:1.0625rem;border-bottom:1px solid var(--lijn)}
  .menu a[aria-current="page"]{border-bottom-color:var(--lijn)}
  .menu a[aria-current="page"]::after{content:"";width:8px;height:8px;margin-left:auto;border-radius:50%;background:var(--inkt)}
  .taal{align-self:stretch;justify-content:flex-start;min-height:52px;font-size:0.9375rem}
  .taal::before{content:attr(aria-label);margin-right:auto;font-weight:600;color:var(--grijs)}
  .taal>*{min-width:48px;height:44px}
}
@media (min-width:761px) and (max-width:1040px){
  .kop-menu{left:auto;width:340px;right:14px}
}

@media (min-width:1041px) and (max-width:1380px){
  .kop{--merk-breed:252px;--fs:26px}
  .kop-groot .band{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
}

/* ---------- ronde 14: tweede kleur en scherpe hoeken ---------- */
:root{--baksteen:#8f3a2c;--perkament:#f9f4e8;--r:2px}
.knop{border-radius:2px}

/* ---------- toegankelijkheid ---------- */
.skip{position:absolute;left:12px;top:-60px;z-index:5000;padding:12px 18px;background:var(--inkt);color:#fff;font:700 0.9375rem/1 var(--tekst);text-decoration:none;border-radius:2px}
.skip:focus{top:10px}
.steun,.steun-munt{border-radius:2px}
.steun{border:1.5px solid var(--inkt)}
@media (max-width:1040px){.kop-menu,.menuknop{border-radius:2px}.kop-menu{box-shadow:none;border:1.5px solid var(--inkt)}}

/* ---------- het menu duidelijker ---------- */
.menu a{font-size:1.0625rem;font-weight:700}
.menu a:not([aria-current="page"]):hover{color:var(--baksteen);border-bottom-color:var(--baksteen)}
.menu a[aria-current="page"]{border-bottom-width:4px}
.mk-tekst{display:none}
@media (max-width:1040px){
  .menuknop{width:auto;min-width:104px;padding:0 14px 0 12px;gap:8px;background:var(--inkt);color:#fff;border-color:var(--inkt);font:700 1rem/1 var(--tekst)}
  .mk-open-t{display:inline}
  .kop.menu-open .mk-open-t{display:none}
  .kop.menu-open .mk-dicht-t{display:inline}
}
/* proef: een vaste onderbalk op de telefoon (alleen met ?onderbalk=1) */
.onderbalk{display:none}
@media (max-width:760px){
  body.onderbalk-aan{padding-bottom:64px}
  body.onderbalk-aan .menuknop{display:none}
  .onderbalk{position:fixed;left:0;right:0;bottom:0;z-index:2500;display:flex;background:var(--papier);border-top:2px solid var(--inkt)}
  .onderbalk a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:62px;color:var(--inkt);text-decoration:none;font:700 .8125rem/1 var(--tekst)}
  .onderbalk a svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .onderbalk a[aria-current="page"]{background:var(--inkt);color:#fff}
}

/* pictogram voor elke menupagina (alleen op een breed scherm) */
.menu .mi{display:none}
@media (min-width:1041px){
  .menu{gap:16px}
  .menu .mi{display:block;flex:none;width:20px;height:20px;margin-right:6px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .menu a{font-size:1rem}
}
@media (min-width:1281px){.menu{gap:26px}.menu .mi{margin-right:8px}.menu a{font-size:1.0625rem}}

/* de kop springt niet meer tussen pagina's: de schuifbalk heeft altijd zijn plek, en het menu en de taalknop staan overal op dezelfde plek */
html{scrollbar-gutter:stable}
@media (min-width:1041px){
  .kop-klein .kop-balk{align-self:start;min-height:56px;padding-right:150px}
  .kop-klein .kop-balk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--lijn);pointer-events:none}
}
/* een stipje bij Cijfers in het menu, tot je die pagina een keer hebt bekeken */
.menu a.nieuw-stipje::after{content:"";position:absolute;top:17px;right:-11px;width:8px;height:8px;border-radius:50%;background:var(--baksteen)}
@media (max-width:1040px){.menu a.nieuw-stipje::after{position:static;flex:none;margin:-14px 0 0 6px}}