/* ==========================================================================
   Vlaanderenwaakt - schil
   --------------------------------------------------------------------------
   Deze stylesheet wordt NA style.css geladen en herwerkt de buitenkant:
   kopbalk, hero, sectiekoppen, knoppen, uitleg, voettekst en cookiebanner.
   De binnenkant van de app (kaarttooltips, detailpaneel, grafieken, tabellen)
   blijft in style.css staan.

   Vormtaal: het politieregister zelf. Cijfers en labels in monospace, de
   institutionele stem. Koppen in een grotesk met karakter. Donker papier,
   geel als enige signaalkleur, precies zoals in de bron.
   ========================================================================== */

/* De lettertypes worden hier geladen in plaats van alleen via een <link> in
   de HTML. Zo staat de opmaak ook goed op pagina's waar die verwijzing
   ontbreekt; zonder deze regel valt de titel terug op Georgia. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Inter+Tight:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --inkt: #0a0b0d;
  --laag: #121418;
  --laag-2: #171a20;
  --lijn: #262a31;
  --lijn-zacht: #1d2128;

  --geel: #f5c518;
  --geel-zacht: #ffe27a;
  --geel-diep: #8a6d0a;

  --tekst: #e9e7e2;
  --zacht: #8b929c;
  --zachter: #626871;

  --display: "Bricolage Grotesque", Georgia, serif;
  --body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maat: 1140px;
}

/* --------------------------------------------------------------- basis -- */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--inkt);
  color: var(--tekst);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::selection,
body *::selection {
  background: var(--geel);
  color: #0a0b0d;
}

.wrap {
  max-width: var(--maat);
  margin: 0 auto;
  padding: 0 24px;
}

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--geel);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------- kopbalk -- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 24px;
  border-bottom: 1px solid var(--lijn);
  background: rgba(10, 11, 13, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.logo {
  text-decoration: none;
}

.logo-merk {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tekst);
}

.logo-merk em {
  font-style: normal;
  color: var(--geel);
}

.nav-tabs {
  display: flex;
  gap: 4px;
}

.nav-tabs button {
  padding: 7px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--zacht);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.nav-tabs button:hover {
  color: var(--tekst);
  background: var(--laag-2);
}

.nav-tabs button.actief {
  border-color: var(--geel-diep);
  background: rgba(245, 197, 24, 0.1);
  color: var(--geel);
}

/* ---------------------------------------------------------------- hero -- */

.hero {
  max-width: var(--maat);
  margin: 0 auto;
  padding: 64px 24px 8px;
}

.hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zacht);
}

.eyebrow-stip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--geel);
  box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.65);
  animation: puls 2.6s ease-out infinite;
}

@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(245, 197, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); }
}

.hero-titel {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(38px, 5.4vw, 62px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--tekst);
}

.hero-titel em {
  display: inline-block;
  font-style: normal;
  color: var(--geel);
  /* Onderstreping als een markeerstreep in een dossier. */
  background-image: linear-gradient(var(--geel-diep), var(--geel-diep));
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 92%;
  padding-bottom: 2px;
}

.hero-lead {
  max-width: 46ch;
  margin: 0 0 30px;
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--zacht);
}

.hero-zoek {
  max-width: 470px;
  margin-bottom: 30px;
}

/* Zoekbalk: opnieuw opgebouwd, hij is het belangrijkste element van de hero. */
.zoekbalk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--laag);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.zoekbalk:focus-within {
  border-color: var(--geel-diep);
  box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.09);
}

.zoekbalk > .ti {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--zachter);
}

.zoekbalk input {
  flex: 1;
  width: 100%;
  padding: 15px 0;
  border: 0;
  background: transparent;
  color: var(--tekst);
  font-family: var(--body);
  font-size: 15.5px;
}

.zoekbalk input::placeholder {
  color: var(--zachter);
}

.zoekbalk input:focus {
  outline: none;
}

.zoek-resultaten {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 950;
  display: none;
  overflow: hidden;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--laag-2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}

.zoek-resultaten.open {
  display: block;
}

.zoek-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--lijn-zacht);
  font-size: 14.5px;
  cursor: pointer;
  transition: background 0.14s ease;
}

.zoek-item:last-child { border-bottom: 0; }
.zoek-item:hover { background: rgba(245, 197, 24, 0.08); color: var(--geel); }

.zoek-item span {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--zachter);
}

/* Kerncijfers onder de zoekbalk. */
.hero-cijfers {
  display: flex;
  gap: 34px;
  margin: 0;
}

.hero-cijfer dt {
  margin-bottom: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--zachter);
}

.hero-cijfer dd {
  margin: 0;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tekst);
}

/* ------------------------------------------------------- stippenkaart -- */

.stippen {
  margin: 0;
}

.stippen svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.stip {
  fill: #2f3641;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: stipIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
  transition: fill 0.16s ease;
}

.stip-direct {
  animation: none;
  transform: scale(1);
}

@keyframes stipIn {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

.stip:hover,
.stip.stip-actief {
  fill: var(--geel);
}

.stip:hover {
  r: 6px;
}

.stippen-bijschrift {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--lijn);
  font-family: var(--mono);
  font-size: 12px;
}

#stipNaam {
  color: var(--geel);
  letter-spacing: 0.01em;
}

.stippen-hint {
  color: var(--zachter);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ jarenlint -- */
/* Elk jaar is een echte knop die het jaarfilter zet. Als doorlopende
   cijferreeks werd dit op iOS bovendien als telefoonnummer herkend. */

.jarenlint {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 54px;
  padding: 15px 18px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(245, 197, 24, 0.05), transparent 38%),
    var(--laag);
}

.jaar-kop {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zachter);
}

/* Het veld begrenst de schuifzone; min-width 0 laat flex hem krimpen
   in plaats van het kader open te duwen. */
.jaren-veld {
  position: relative;
  flex: 1;
  min-width: 0;
}

.jaren {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.jaren::-webkit-scrollbar { display: none; }

.jaren > li {
  flex-shrink: 0;
  scroll-snap-align: start;
}

.jaar {
  display: block;
  padding: 7px 11px;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background: var(--laag-2);
  color: var(--geel);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease,
              transform 0.16s ease;
}

.jaar:hover {
  border-color: var(--geel-diep);
  background: rgba(245, 197, 24, 0.1);
  transform: translateY(-2px);
}

.jaar:active { transform: translateY(0); }

.jaar-nu {
  border-color: rgba(245, 197, 24, 0.45);
  background: rgba(245, 197, 24, 0.11);
  font-weight: 600;
}

/* Het jaar dat op dit moment op de kaart staat. */
.jaar-actief {
  border-color: var(--geel);
  background: var(--geel);
  color: #0a0b0d;
  font-weight: 600;
}

.jaar-gat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
}

.gat-lijn {
  width: 20px;
  height: 1px;
  background: repeating-linear-gradient(
    to right, var(--zachter) 0 3px, transparent 3px 6px
  );
}

.gat-tekst {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--zachter);
  white-space: nowrap;
}

/* -------------------------------------------------------- sectiekoppen -- */

section#sectie-stats,
section#sectie-community,
section#sectie-artikels {
  padding: 56px 0 20px;
}

.sectie-kop {
  margin-bottom: 30px;
}

.sectie-label {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--geel);
}

.sectie-kop h2 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(27px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--tekst);
}

.sectie-kop p {
  max-width: 62ch;
  margin: 0;
  font-size: 15.5px;
  color: var(--zacht);
}

/* ------------------------------------------------------------- knoppen -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--lijn);
  border-radius: 9px;
  background: var(--laag-2);
  color: var(--tekst);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.btn:hover {
  border-color: #3a414c;
  background: #1e222a;
}

.btn-primair {
  border-color: var(--geel);
  background: var(--geel);
  color: #0a0b0d;
  font-weight: 600;
}

.btn-primair:hover {
  border-color: var(--geel-zacht);
  background: var(--geel-zacht);
  color: #0a0b0d;
}

/* -------------------------------------------------------------- velden -- */

.filterbalk {
  padding: 16px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--laag);
}

.f-veld > span,
.filter-titel {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zachter);
}

.filter-select,
.veld select {
  padding: 9px 12px;
  border: 1px solid var(--lijn);
  border-radius: 9px;
  background: var(--laag-2);
  color: var(--tekst);
  font-family: var(--body);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.16s ease;
}

.filter-select:hover,
.veld select:hover {
  border-color: #3a414c;
}

/* --------------------------------------------------------------- kaart -- */

#map,
#map-stats,
#map-artikels {
  border: 1px solid var(--lijn);
  border-radius: 14px;
  overflow: hidden;
}

/* Gemeenten waarvan de grens ontbreekt, staan als losse stip op de kaart. */
.losse-stip {
  filter: drop-shadow(0 0 5px rgba(245, 197, 24, 0.45));
}

.kaart-waarschuwing {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-top: 10px;
  border: 1px solid var(--geel-diep);
  border-radius: 10px;
  background: rgba(245, 197, 24, 0.06);
  color: var(--geel-zacht);
  font-size: 13.5px;
  line-height: 1.55;
}

.waarschuwing-namen {
  width: 100%;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--zacht);
}

.stat-info {
  margin: 10px 2px 0;
  min-height: 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--zachter);
}

/* ----------------------------------------------------------- kerncijfers -- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.stat {
  padding: 16px 18px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--laag);
}

.stat .label {
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zachter);
}

.stat .waarde {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tekst);
}

.stat .waarde.klein {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------- disclaimer -- */

.disclaimer {
  padding: 15px 18px;
  margin: 26px 0 10px;
  border-left: 2px solid var(--geel-diep);
  border-radius: 0 8px 8px 0;
  background: var(--laag);
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--zacht);
}

.disclaimer strong {
  color: var(--tekst);
}

/* --------------------------------------------------------------- uitleg -- */

.uitleg {
  margin-top: 40px;
  padding: 66px 0;
  border-top: 1px solid var(--lijn);
  background: linear-gradient(180deg, var(--laag) 0%, var(--inkt) 100%);
}

.uitleg-titel {
  max-width: 20ch;
  margin: 0 0 40px;
  font-family: var(--display);
  font-size: clamp(25px, 3.5vw, 37px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--tekst);
}

.uitleg-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1px;
  border: 1px solid var(--lijn);
  border-radius: 14px;
  background: var(--lijn);
  overflow: hidden;
}

.uitleg-kaart {
  padding: 26px 24px;
  background: var(--inkt);
  transition: background 0.2s ease;
}

.uitleg-kaart:hover {
  background: var(--laag);
}

.uitleg-kaart h3 {
  margin: 0 0 11px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--geel);
}

.uitleg-kaart p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--zacht);
}

/* ------------------------------------------------------------ voettekst -- */

.voet {
  padding: 40px 0;
  border-top: 1px solid var(--lijn);
  background: var(--inkt);
}

.voet-raster {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}

.voet-merk {
  font-size: 16px;
}

.voet-tekst {
  max-width: 42ch;
  margin: 9px 0 0;
  font-size: 13.5px;
  color: var(--zachter);
}

.voet-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.voet-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--zacht);
  font-family: var(--mono);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid var(--lijn);
  transition: color 0.16s ease, border-color 0.16s ease;
}

.voet-link:hover {
  color: var(--geel);
  border-color: var(--geel-diep);
}

/* ---------------------------------------------------------- cookiebanner -- */

.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 9999;
  display: none;
  gap: 22px;
  align-items: center;
  width: min(760px, calc(100% - 32px));
  padding: 20px 22px;
  transform: translateX(-50%);
  border: 1px solid var(--lijn);
  border-radius: 14px;
  background: var(--laag-2);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.72);
}

.cookie-banner.tonen {
  display: flex;
  animation: bannerIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes bannerIn {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.cookie-tekst { flex: 1; }

.cookie-tekst strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--geel);
}

.cookie-tekst p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--zacht);
}

.cookie-knoppen {
  display: flex;
  flex-shrink: 0;
  gap: 9px;
}

/* --------------------------------------------------------------- mobiel -- */

@media (max-width: 900px) {
  .hero {
    padding-top: 40px;
  }

  .hero-raster {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-kaart {
    order: -1;
  }

  .jarenlint {
    margin-top: 36px;
  }
}

@media (max-width: 640px) {
  .wrap,
  .hero,
  .topbar {
    padding-left: 16px;
    padding-right: 16px;
  }

  .nav-tabs button {
    padding: 6px 11px;
    font-size: 11.5px;
  }

  .hero-cijfers {
    gap: 24px;
  }

  .hero-cijfer dd {
    font-size: 21px;
  }

  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    bottom: 12px;
  }

  .cookie-knoppen .btn {
    flex: 1;
    justify-content: center;
  }

  .jaar-gat {
    display: none;
  }
}

/* ------------------------------------------------- minder beweging aub -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .stip { transform: scale(1); }
}


/* ==========================================================================
   WIE MAAKT DIT
   ========================================================================== */

.maker {
  padding: 70px 0;
  border-top: 1px solid var(--lijn);
  background: var(--inkt);
}

.maker-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 54px;
  align-items: start;
}

.maker-titel {
  max-width: 18ch;
  margin: 0 0 24px;
  font-family: var(--display);
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--tekst);
}

.maker-titel em {
  font-style: normal;
  color: var(--geel);
}

.maker-tekst p {
  max-width: 60ch;
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--zacht);
}

.maker-tekst p:last-child {
  margin-bottom: 0;
}

.maker-onder {
  margin-top: 22px !important;
  padding-top: 16px;
  border-top: 1px solid var(--lijn);
  font-size: 13.5px !important;
  color: var(--zachter) !important;
}

/* De streepjesachtergrond liep niet gelijk met de regels en gaf een
   rommelig beeld. Nu een rustig vlak met een gele accentrand. */
.maker-kaart {
  padding: 26px 24px;
  border: 1px solid var(--lijn);
  border-top: 2px solid var(--geel);
  border-radius: 4px 4px 14px 14px;
  background: var(--laag);
}

.maker-kaart-kop {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--geel);
}

.maker-kaart-tekst {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--zacht);
}

.maker-feiten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--lijn);
}

.maker-feiten dt {
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zachter);
}

.maker-feiten dd {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tekst);
}

.maker-noot {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--lijn);
  font-size: 13px;
  line-height: 1.6;
  color: var(--zachter);
}

/* ==========================================================================
   MOBIEL
   ========================================================================== */

@media (max-width: 900px) {
  .maker-raster {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .jarenlint {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
  }

  .jaren-veld {
    width: 100%;
  }
}

@media (max-width: 640px) {
  /* De navigatie verhuist naar onderaan, binnen duimbereik. */
  body {
    padding-bottom: 74px;
  }

  .topbar {
    justify-content: center;
    padding: 14px 16px;
  }

  .nav-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 940;
    gap: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--lijn);
    background: rgba(10, 11, 13, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .nav-tabs button {
    flex: 1;
    padding: 11px 4px;
    border-radius: 10px;
    font-size: 12px;
  }

  /* De schuifzone loopt tot aan de rand van het kader, zodat de
     jaartallen niet halverwege lijken te worden afgesneden. */
  .jaren-veld {
    margin: 0 -18px;
  }

  .jaren {
    padding: 2px 18px 6px;
  }

  /* Vervaging rechts als hint dat er meer staat. */
  .jaren-veld::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(90deg, transparent, var(--laag));
    pointer-events: none;
  }

  .jaar {
    min-height: 40px;
    padding: 9px 13px;
  }

  .gat-tekst {
    font-size: 10px;
  }

  .maker-feiten {
    grid-template-columns: 1fr 1fr;
  }

  .hero {
    padding-top: 32px;
  }

  .hero-titel {
    font-size: clamp(32px, 9vw, 44px);
  }

  .stippen-hint {
    display: none;
  }

  .maker,
  .uitleg {
    padding: 46px 0;
  }

  .uitleg-kaart {
    padding: 22px 20px;
  }

  /* Ruimere raakvlakken op alle knoppen en keuzelijsten. */
  .btn,
  .filter-select,
  .veld select {
    min-height: 44px;
  }
}

/* ==========================================================================
   TOEGANKELIJKHEID
   ========================================================================== */

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  background: var(--geel);
  color: #0a0b0d;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.skiplink:focus {
  left: 0;
}

/* ==========================================================================
   TEKSTPAGINA'S
   ========================================================================== */

.tekstpagina .nav-tabs {
  position: static;
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav-terug {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  color: var(--zacht);
  font-family: var(--mono);
  font-size: 12.5px;
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.nav-terug:hover {
  color: var(--geel);
  border-color: var(--geel-diep);
}

.artikel {
  padding: 60px 0 30px;
}

.artikel-wrap {
  max-width: 760px;
}

.artikel-titel {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--tekst);
}

.artikel-lead {
  margin: 0 0 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--lijn);
  font-size: 18px;
  line-height: 1.6;
  color: var(--zacht);
}

.artikel h2 {
  margin: 44px 0 14px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--geel);
}

.artikel h3 {
  margin: 30px 0 10px;
  font-family: var(--body);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tekst);
}

.artikel p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--zacht);
}

.artikel ul {
  margin: 0 0 18px;
  padding-left: 20px;
}

.artikel li {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--zacht);
}

.artikel li::marker {
  color: var(--geel-diep);
}

.artikel a {
  color: var(--geel);
  text-decoration: none;
  border-bottom: 1px solid var(--geel-diep);
}

.artikel a:hover {
  border-bottom-color: var(--geel);
}

.artikel code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--laag-2);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--geel-zacht);
}

.artikel em {
  font-style: italic;
  color: var(--tekst);
}

.artikel-datum {
  margin-top: 50px !important;
  padding-top: 22px;
  border-top: 1px solid var(--lijn);
  font-family: var(--mono);
  font-size: 11.5px !important;
  letter-spacing: 0.04em;
  color: var(--zachter) !important;
}

.contact-groot {
  font-size: 21px !important;
  font-weight: 500;
}

.contact-groot a {
  color: var(--geel);
}

/* Blok dat de beheerder eraan herinnert nog iets in te vullen. */
.let-op {
  padding: 16px 18px;
  margin-bottom: 32px;
  border: 1px dashed var(--geel-diep);
  border-radius: 10px;
  background: rgba(245, 197, 24, 0.06);
  font-size: 14px;
  line-height: 1.6;
  color: var(--geel-zacht);
}

@media (max-width: 640px) {
  .tekstpagina {
    padding-bottom: 0;
  }

  .artikel {
    padding-top: 34px;
  }

  .artikel-lead {
    font-size: 16.5px;
    margin-bottom: 30px;
  }

  .voet-links {
    flex-direction: column;
    gap: 12px;
  }
}

/* ==========================================================================
   VERGELIJKER
   ========================================================================== */

.vergelijk {
  padding: 66px 0;
  border-top: 1px solid var(--lijn);
  background: linear-gradient(180deg, var(--laag) 0%, var(--inkt) 100%);
}

.vergelijk-titel {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--tekst);
}

.vergelijk-lead {
  max-width: 60ch;
  margin: 0 0 28px;
  font-size: 15.5px;
  line-height: 1.66;
  color: var(--zacht);
}

.vgl-balk {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}

.vgl-zoek {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--lijn);
  border-radius: 10px;
  background: var(--laag-2);
  transition: border-color 0.16s ease;
}

.vgl-zoek:focus-within { border-color: var(--geel-diep); }
.vgl-zoek > .ti { color: var(--geel); font-size: 16px; }

.vgl-zoek input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: transparent;
  color: var(--tekst);
  font-family: var(--body);
  font-size: 14.5px;
}

.vgl-zoek input:focus { outline: none; }
.vgl-zoek input::placeholder { color: var(--zachter); }

.vgl-veld > span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zachter);
}

.vgl-veld .filter-select { width: 100%; }

.vgl-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 34px;
  margin-bottom: 14px;
}

.vgl-leeg {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--zachter);
}

.vgl-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 11px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--laag-2);
  font-size: 13.5px;
  color: var(--tekst);
}

.vgl-stip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kleur, var(--geel));
}

/*
  De knoppen in een chip krijgen hun uiterlijk verderop, bij het blok
  VERGELIJKER, UITGEBREID. Hier alleen wat ze gemeen hebben. Een algemene
  hoverregel op .vgl-chip button stond daar vroeger ook; die won het qua
  specificiteit van de latere regels en is daarom weg.
*/
.vgl-chip button {
  border: 0;
  background: none;
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
}

.vgl-grafiek {
  padding: 18px 16px 12px;
  border: 1px solid var(--lijn);
  border-radius: 14px;
  background: var(--laag);
  transition: opacity 0.2s ease;
}

.vgl-grafiek.laden { opacity: 0.5; }
.vgl-grafiek svg { display: block; width: 100%; height: auto; }

.vgl-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  color: var(--zachter);
  font-size: 14px;
}

.vgl-onder {
  margin: 10px 4px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--zachter);
}

/* ==========================================================================
   ANALYSES
   ========================================================================== */

.analyses-blok {
  padding: 66px 0;
  border-top: 1px solid var(--lijn);
}

.analyses-titel {
  margin: 0 0 30px;
  font-family: var(--display);
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--tekst);
}

.analyses-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.analyse-mini,
.analyse-kaart {
  display: block;
  padding: 24px 22px;
  border: 1px solid var(--lijn);
  border-radius: 14px;
  background: var(--laag);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease,
              background 0.18s ease;
}

.analyse-mini:hover,
.analyse-kaart:hover {
  border-color: var(--geel-diep);
  background: var(--laag-2);
  transform: translateY(-3px);
}

.analyse-cijfer {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--geel);
}

.analyse-mini h3,
.analyse-kaart h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--tekst);
}

.analyse-mini p,
.analyse-kaart p {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--zacht);
}

.analyses-alles {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--geel);
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid var(--geel-diep);
  padding-bottom: 3px;
}

.analyse-lijst {
  display: grid;
  gap: 14px;
  margin: 0 0 44px;
}

.analyse-kaart h2 { font-size: 21px; }

.analyse-lees {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--geel);
}

/* ==========================================================================
   DATATABELLEN IN ARTIKELS
   ========================================================================== */

.data-tabel {
  width: 100%;
  margin: 24px 0 28px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 14.5px;
}

.data-tabel caption {
  padding: 0 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: left;
  color: var(--zachter);
}

.data-tabel th {
  padding: 11px 14px;
  background: var(--laag-2);
  border-bottom: 1px solid var(--lijn);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--zacht);
}

.data-tabel th + th,
.data-tabel td + td { text-align: right; }

.data-tabel td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--lijn-zacht);
  color: var(--tekst);
  font-variant-numeric: tabular-nums;
}

.data-tabel tbody tr:last-child td { border-bottom: 0; }
.data-tabel tbody tr:hover td { background: rgba(245, 197, 24, 0.04); }

.data-tabel td.op { color: #f4795b; font-weight: 600; }
.data-tabel td.neer { color: #66bd63; font-weight: 600; }

@media (max-width: 900px) {
  .vgl-balk { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .vergelijk,
  .analyses-blok { padding: 46px 0; }

  .vgl-grafiek { padding: 12px 8px 8px; }

  .data-tabel { font-size: 13px; }
  .data-tabel th,
  .data-tabel td { padding: 9px 10px; }
}

/* ==========================================================================
   RANGBOLLETJE
   Het nummer stond buiten het bolletje omdat dat maar 12 pixels breed was.
   ========================================================================== */

.gem-rang {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rang-bol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--kleur, var(--geel));
  border-radius: 50%;
  background: var(--laag-2);
  color: var(--kleur, var(--geel));
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ==========================================================================
   LOGO
   Hoofdletter V en W, iets groter gezet.
   ========================================================================== */

.logo-merk b {
  font-weight: 800;
  font-size: 1.16em;
  line-height: 1;
}

.logo-merk {
  color: #ffffff;
}

.logo-merk em {
  font-style: normal;
  color: var(--geel);
}

/* ==========================================================================
   SOORT GRAFIEK KIEZEN
   ========================================================================== */

.soort-kiezer {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--lijn);
  border-radius: 10px;
  background: var(--laag-2);
}

.soort-kiezer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--zacht);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.soort-kiezer button:hover { color: var(--tekst); }

.soort-kiezer button.actief {
  background: var(--geel);
  color: #0a0b0d;
  font-weight: 600;
}

.soort-kiezer.klein button {
  padding: 6px 9px;
  font-size: 11px;
}

.soort-kiezer .ti { font-size: 14px; }

/* De kiezer in het detailpaneel staat naast de titel. */
.detail-titel-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Bij staafweergave zijn de losse punten overbodig. */
.trend-punt-plat .trend-punt-kern {
  opacity: 0;
}

/* ==========================================================================
   ANALYSES OP DE STARTPAGINA
   ========================================================================== */

.analyses-kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.analyses-kop .analyses-titel { margin: 0; }

.analyses-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px;
}

.analyses-kolom {
  display: grid;
  gap: 14px;
  align-content: start;
}

.analyse-groot {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border: 1px solid var(--lijn);
  border-top: 2px solid var(--geel);
  border-radius: 4px 4px 16px 16px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(245, 197, 24, 0.09), transparent 60%),
    var(--laag);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.analyse-groot:hover {
  transform: translateY(-3px);
  border-color: var(--geel-diep);
  border-top-color: var(--geel);
}

.analyse-tag {
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245, 197, 24, 0.14);
  color: var(--geel);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.analyse-cijfer.groot {
  font-size: 40px;
  margin-bottom: 14px;
}

.analyse-groot h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.028em;
  color: var(--tekst);
}

.analyse-groot p {
  margin: 0;
  font-size: 15px;
  line-height: 1.66;
  color: var(--zacht);
}

.analyse-groot .analyse-lees { margin-top: auto; padding-top: 20px; }

.analyse-mini {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--lijn);
  border-radius: 14px;
  background: var(--laag);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease,
              background 0.18s ease;
}

.analyse-mini:hover {
  transform: translateX(4px);
  border-color: var(--geel-diep);
  background: var(--laag-2);
}

.analyse-mini .analyse-cijfer { margin-bottom: 7px; font-size: 19px; }

.analyse-mini h3 {
  margin: 0 0 5px;
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--tekst);
}

.analyse-mini p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--zacht);
}

@media (max-width: 900px) {
  .analyses-raster { grid-template-columns: 1fr; }
  .analyse-groot { padding: 24px 22px; }
  .analyse-cijfer.groot { font-size: 32px; }
  .analyse-groot h3 { font-size: 21px; }
}

@media (max-width: 640px) {
  .soort-kiezer button span { display: none; }
  .analyses-kop { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* ==========================================================================
   VERDRAAGZAME OPMAAK
   --------------------------------------------------------------------------
   Artikelpagina's komen in twee vormen voor:

     A. <main class="artikel"><div class="wrap artikel-wrap"> ... </div></main>
        met <a class="nav-terug"> en <footer class="voet">

     B. <div class="wrap artikel-wrap"> ... </div>
        met <p class="nav-terug"><a> en <footer class="artikel-voet">

   Vorm B mist de wikkel waar de artikelopmaak aan hangt. De regels hieronder
   vangen dat op, zodat beide vormen er hetzelfde uitzien.
   ========================================================================== */

/* --- terugknop: ook als de link binnenin een <p> staat ------------------- */

p.nav-terug {
  display: inline-flex;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
}

p.nav-terug a,
.nav-terug a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  color: var(--zacht);
  font-family: var(--mono);
  font-size: 12.5px;
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease;
}

p.nav-terug a:visited,
.nav-terug a:visited {
  color: var(--zacht);
}

p.nav-terug a:hover,
.nav-terug a:hover {
  color: var(--geel);
  border-color: var(--geel-diep);
}

/* --- artikelopmaak zonder de <main class="artikel"> wikkel --------------- */

.artikel-wrap h2 {
  margin: 44px 0 14px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--geel);
}

.artikel-wrap h3 {
  margin: 30px 0 10px;
  font-family: var(--body);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tekst);
}

.artikel-wrap p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--zacht);
}

.artikel-wrap ul,
.artikel-wrap ol {
  margin: 0 0 18px;
  padding-left: 20px;
}

.artikel-wrap li {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--zacht);
}

.artikel-wrap li::marker {
  color: var(--geel-diep);
}

.artikel-wrap a {
  color: var(--geel);
  text-decoration: none;
  border-bottom: 1px solid var(--geel-diep);
}

.artikel-wrap a:visited {
  color: var(--geel);
}

.artikel-wrap a:hover {
  border-bottom-color: var(--geel);
}

.artikel-wrap code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--laag-2);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--geel-zacht);
}

/* De lead en de titel horen niet mee te gaan in de bovenstaande p-regel. */
.artikel-wrap .artikel-lead {
  margin: 0 0 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--lijn);
  font-size: 18px;
  line-height: 1.6;
  color: var(--zacht);
}

.artikel-wrap .sectie-label {
  margin: 0 0 12px;
  font-size: 11px;
  color: var(--geel);
}

/* Zonder <main> ontbreekt de bovenruimte. */
body:not(.tekstpagina) > .artikel-wrap,
body > .wrap.artikel-wrap {
  padding-top: 34px;
  padding-bottom: 40px;
}

/* --- de eenvoudige voettekst van vorm B ---------------------------------- */

.artikel-voet {
  max-width: 760px;
  margin: 50px auto 0;
  padding: 24px 24px 40px;
  border-top: 1px solid var(--lijn);
}

.artikel-voet p {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--zachter);
}

.artikel-voet p.voet-links {
  margin-top: 16px;
  font-size: 12px;
}

.artikel-voet a {
  color: var(--zacht);
  text-decoration: none;
  border-bottom: 1px solid var(--lijn);
}

.artikel-voet a:visited {
  color: var(--zacht);
}

.artikel-voet a:hover {
  color: var(--geel);
  border-color: var(--geel-diep);
}

/* --- pagina's zonder kopbalk krijgen toch het merk ----------------------- */

body > .wrap.artikel-wrap::before {
  content: "VlaanderenWaakt";
  display: block;
  margin-bottom: 22px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--zachter);
}

/* ==========================================================================
   BETAMELDING
   Verschijnt eenmalig voor de bezoeker de site in gaat. Zolang deze open
   staat blijft de cookiebanner weg; zie index.html.
   ========================================================================== */

.beta-scherm {
  display: flex;
  position: fixed;
  z-index: 4000;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 5, 7, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: beta-in 0.22s ease both;
}

.beta-scherm[hidden] { display: none; }

body.beta-open { overflow: hidden; }

/* Twee vensters tegelijk is er een te veel. */
body.beta-open .cookie-banner { display: none; }

.beta-venster {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 40px);
  padding: 30px 30px 24px;
  overflow-y: auto;
  border: 1px solid var(--lijn);
  border-top: 3px solid var(--geel);
  border-radius: 16px;
  background: var(--laag);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: beta-op 0.26s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.beta-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--geel);
}

.beta-punt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--geel);
  box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.55);
  animation: beta-pols 2.1s ease-out infinite;
}

.beta-titel {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(21px, 4vw, 27px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--tekst);
}

.beta-tekst p {
  margin: 0 0 13px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--zacht);
}

.beta-tekst .beta-nadruk {
  padding: 13px 15px;
  border-left: 2px solid var(--geel-diep);
  border-radius: 0 8px 8px 0;
  background: var(--laag-2);
  color: var(--tekst);
}

.beta-tekst a {
  color: var(--geel);
  text-decoration: none;
  border-bottom: 1px solid var(--geel-diep);
}

.beta-tekst a:hover { border-bottom-color: var(--geel); }

.beta-knop {
  width: 100%;
  min-height: 46px;
  margin-top: 20px;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--geel);
  color: #14150f;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.beta-knop:hover { background: var(--geel-zacht); }
.beta-knop:active { transform: translateY(1px); }

.beta-klein {
  margin: 13px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: var(--zachter);
}

.beta-klein a { color: var(--zacht); }

@keyframes beta-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes beta-op {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes beta-pols {
  0% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(245, 197, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .beta-scherm,
  .beta-venster { animation: none; }
  .beta-punt { animation: none; }
}

@media (max-width: 520px) {
  .beta-venster { padding: 24px 20px 20px; }
}

/* ==========================================================================
   VERGELIJKER, UITGEBREID
   Tien gemeenten in plaats van vier, met zichtbare verwijderknoppen en een
   kaartje dat alle reeksen tegelijk toont.
   ========================================================================== */

.vgl-koprij {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 8px;
  min-height: 22px;
}

.vgl-teller {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--zachter);
}

.vgl-teller.vol { color: var(--geel); }

.vgl-vol {
  margin: 0;
  font-size: 12.5px;
  color: var(--geel);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.vgl-vol.tonen {
  opacity: 1;
  transform: none;
}

/* --- chips ---------------------------------------------------------------- */

.vgl-chip {
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.vgl-chip.uitgelicht {
  border-color: var(--kleur, var(--geel));
  background: var(--laag-2);
}

.vgl-chip-naam {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 4px 6px 11px;
  border: 0;
  background: none;
  color: var(--tekst);
  font-family: var(--body);
  font-size: 13.5px;
  cursor: pointer;
}

.vgl-chip-naam:hover { color: var(--geel); }

/*
  De verwijderknop was er altijd al, maar stond in de tertiaire grijstint op
  een donker vlak, zonder eigen lettergrootte. Daardoor was hij in de praktijk
  onzichtbaar en dacht iedereen dat de mogelijkheid ontbrak.
*/
.vgl-chip-weg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-height: 34px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--lijn);
  border-radius: 0;
  background: none;
  color: var(--zacht);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.vgl-chip-weg:hover {
  background: rgba(244, 121, 91, 0.16);
  color: #f4795b;
}

.vgl-chip-weg:focus-visible {
  outline: 2px solid var(--geel);
  outline-offset: -2px;
}

.vgl-wis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px dashed var(--lijn);
  border-radius: 999px;
  background: none;
  color: var(--zachter);
  font-family: var(--body);
  font-size: 12.5px;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}

.vgl-wis:hover {
  color: #f4795b;
  border-color: rgba(244, 121, 91, 0.5);
}

/* --- grafiek -------------------------------------------------------------- */

.vgl-svg-houder { position: relative; }

.vgl-reeks {
  transition: opacity 0.18s ease;
}

.vgl-reeks.dof { opacity: 0.16; }

.vgl-staaf { transition: opacity 0.14s ease; }

.vgl-strook { cursor: crosshair; }

.vgl-kaartje {
  position: absolute;
  top: 12px;
  z-index: 3;
  min-width: 190px;
  max-width: 260px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 197, 24, 0.34);
  border-radius: 10px;
  background: rgba(12, 13, 16, 0.96);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.vgl-kaartje[hidden] { display: none; }

.vgl-kaartje-jaar {
  margin: 0 0 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--lijn);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--geel);
}

.vgl-kaartje-regel {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2.5px 0;
  font-size: 12.5px;
  color: var(--tekst);
}

.vgl-kaartje-regel.dof { opacity: 0.4; }

.vgl-kaartje-naam {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vgl-kaartje-waarde {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--zacht);
}

.vgl-onder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.vgl-download {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--lijn);
  border-radius: 7px;
  background: none;
  color: var(--zachter);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}

.vgl-download:hover {
  color: var(--geel);
  border-color: var(--geel-diep);
}

@media (max-width: 640px) {
  .vgl-kaartje {
    max-width: 200px;
    font-size: 12px;
  }

  .vgl-chip-naam { font-size: 13px; }
}

/* ==========================================================================
   TRENDGRAFIEK IN HET DETAILPANEEL
   ========================================================================== */

.trend-staaf {
  opacity: 0.82;
  transition: opacity 0.14s ease;
}

.trend-staaf.actief { opacity: 1; }

.trend-svg { cursor: crosshair; }

.trend-verschil {
  display: block;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
}

.trend-verschil.op { color: #f4795b; }
.trend-verschil.neer { color: #66bd63; }

.trend-verschil span {
  display: block;
  font-size: 10.5px;
  color: var(--zachter) !important;
}

/* ==========================================================================
   AFDRUKKEN
   Analysepagina's worden geregeld uitgeprint of als pdf bewaard. Op wit
   papier is donkere achtergrond met geel niet te lezen.
   ========================================================================== */

@media print {
  .topbar,
  .voet,
  .cookie-banner,
  .beta-scherm,
  .skiplink,
  .nav-terug,
  .vgl-download { display: none !important; }

  body,
  body.tekstpagina {
    background: #fff !important;
    color: #111 !important;
  }

  .artikel-titel,
  .artikel-lead,
  .artikel p,
  .artikel li { color: #111 !important; }

  .sectie-label { color: #666 !important; }

  .data-tabel,
  .data-tabel th,
  .data-tabel td {
    border-color: #bbb !important;
    background: #fff !important;
    color: #111 !important;
  }

  .data-tabel td.op { color: #a3301c !important; }
  .data-tabel td.neer { color: #1d6b2a !important; }

  a { color: #111 !important; text-decoration: underline; }

  /* De bron achter een verwijzing gaat op papier verloren. */
  .artikel a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10px;
    color: #555;
  }
}

/* ==========================================================================
   TABEL "ALLE BESCHIKBARE CIJFERS"
   Toont sinds juli 2026 alle twaalf jaargangen in plaats van de laatste
   tien. Met twaalf kolommen wordt een kale getallenbrij snel onleesbaar,
   vandaar de arcering, de vastgezette eerste kolom en de markering van de
   onderbreking.
   ========================================================================== */

.tabel-uitleg {
  margin: 0 2px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--zachter);
}

.tabel-scroll {
  overflow: auto;                 /* ook horizontaal, twaalf kolommen is breed */
  overscroll-behavior: contain;
}

.cat-tabel {
  min-width: 640px;               /* dwingt horizontaal schuiven af ipv wringen */
}

/* De categorienaam blijft staan tijdens het horizontaal schuiven. */
.cat-tabel th:first-child,
.cat-tabel td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 190px;
  background: var(--laag);
  box-shadow: 1px 0 0 var(--lijn);
}

.cat-tabel thead th:first-child {
  z-index: 3;
}

.cat-tabel thead th {
  z-index: 2;
}

.cat-tabel th.cijfer,
.cat-tabel td.cijfer {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cat-tabel th.cijfer {
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

/*
  Arcering naar verhouding binnen de rij. De sterkte komt uit de variabele
  --vulling, die per cel door app.js wordt gezet.
*/
.cat-tabel td.cijfer {
  background: rgba(245, 197, 24, var(--vulling, 0));
}

.cat-tabel tr:hover td.cijfer {
  background:
    linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    rgba(245, 197, 24, var(--vulling, 0));
}

.cat-tabel .leeg {
  color: var(--zachter);
  opacity: 0.6;
}

/* De kolom na de onderbreking krijgt een dubbele scheiding. */
.cat-tabel th.na-gat,
.cat-tabel td.na-gat {
  border-left: 3px double var(--zachter);
}

@media (max-width: 640px) {
  .cat-tabel th:first-child,
  .cat-tabel td:first-child {
    min-width: 132px;
    max-width: 132px;
    white-space: normal;
  }

  .cat-tabel { font-size: 12px; }
}

/* ==========================================================================
   GEMEENTEN MET EEN GERECONSTRUEERDE GRENS
   Mesen en Gingelom ontbreken in het officiele kaartbestand. Hun vorm is
   afgeleid uit de inkeping die ze in de omtrek van Vlaanderen achterlaten:
   aan de Vlaamse kant exact, aan de landsgrens een benadering. Een eigen
   rand maakt dat zichtbaar zonder de kaart onrustig te maken.
   ========================================================================== */

.gem-vlak.grens-benaderd {
  filter: saturate(0.92);
}

.tip-benaderd {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--zacht);
}

/* ==========================================================================
   GRAFIEKEN OP EEN SMAL SCHERM
   De SVG's krijgen hun eigen afmetingen al mee vanuit JavaScript. Hier
   alleen wat daar niet in past.
   ========================================================================== */

@media (max-width: 640px) {
  .vgl-grafiek {
    padding: 12px 6px 10px;
  }

  .vgl-kaartje {
    top: auto;
    bottom: 8px;
    left: 8px !important;
    right: 8px;
    max-width: none;
    width: calc(100% - 16px);
  }

  .vgl-onder {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Genoeg trefvlak om met een duim te raken. */
  .vgl-chip-weg { width: 38px; min-height: 40px; }
  .vgl-chip-naam { min-height: 40px; }
  .vgl-wis { min-height: 40px; }

  .trend-tooltip {
    top: 8px;
    right: 8px;
    padding: 7px 10px;
    font-size: 12px;
  }
}

/* ==========================================================================
   SCHUIFBALKEN IN HET THEMA
   De standaardschuifbalk van de browser is licht, en dat valt hard op tegen
   het donkere papier van deze site.

   Twee schrijfwijzen naast elkaar: scrollbar-color is de standaard en werkt
   in Firefox en in recente Chrome-versies; ::-webkit-scrollbar dekt Safari
   en de oudere Chrome. Beide zijn nodig.

   Het jarenlint valt hier bewust buiten: dat schuift horizontaal met een
   vervaging aan de rand en heeft scrollbar-width: none. Daarom staat de
   opsomming in :where(), dat geen specificiteit toevoegt en die keuze dus
   niet overrulet.
   ========================================================================== */

html {
  scrollbar-width: thin;
  scrollbar-color: #2f343d transparent;
}

:where(
  .tabel-scroll,
  .beta-venster,
  .zoek-resultaten,
  .vgl-grafiek,
  .detail-paneel,
  #statLijst,
  #gemDetail
) {
  scrollbar-width: thin;
  scrollbar-color: #2f343d transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  background-color: #2f343d;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--geel-diep);
}

/* Het jarenlint houdt zijn onzichtbare balk. */
.jarenlint::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* ==========================================================================
   JAARKEUZE BIJ "GROOTSTE CATEGORIEEN"
   De verdeling toonde altijd het laatste jaar. Met deze keuzelijst kun je
   elk gepubliceerd jaar bekijken; de balken en de percentages worden dan
   opnieuw berekend tegen het totaal van DAT jaar.
   ========================================================================== */

.cat-jaarkeuze {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cat-jaarkeuze-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zachter);
}

.cat-jaarkeuze select {
  min-height: 32px;
  padding: 5px 30px 5px 11px;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background-color: var(--laag-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b929c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  color: var(--tekst);
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease;
}

.cat-jaarkeuze select:hover { border-color: var(--geel-diep); }

.cat-jaarkeuze select:focus-visible {
  outline: 2px solid var(--geel);
  outline-offset: 1px;
}

.categorie-leeg {
  margin: 6px 0;
  font-size: 13.5px;
  color: var(--zachter);
}

/* ==========================================================================
   VOETTEKST OP EEN SMAL SCHERM
   De links stonden onder elkaar als een rij losse onderstreepte woorden.
   Op mobiel worden het nu twee kolommen met echte trefvlakken, en het merk
   staat er los boven met een scheiding ertussen.
   ========================================================================== */

@media (max-width: 640px) {
  .voet {
    padding: 30px 0 34px;
  }

  .voet-raster {
    flex-direction: column;
    gap: 0;
  }

  .voet-merk {
    font-size: 18px;
  }

  .voet-tekst {
    max-width: none;
    margin: 8px 0 20px;
    font-size: 14px;
    line-height: 1.55;
  }

  .voet-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    border-top: 1px solid var(--lijn);
  }

  .voet-links .voet-link {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 6px 2px;
    border: 0;
    border-bottom: 1px solid var(--lijn);
    font-family: var(--body);
    font-size: 14.5px;
    color: var(--tekst);
    text-align: left;
  }

  /* De rechterkolom krijgt wat lucht van de linker. */
  .voet-links .voet-link:nth-child(even) {
    padding-left: 16px;
  }

  .voet-links .voet-link:active {
    color: var(--geel);
  }

  /* Cookievoorkeuren is geen navigatie; die staat apart, over de volle
     breedte, in de rustiger tint. */
  .voet-links #cookieHerzien {
    grid-column: 1 / -1;
    padding-left: 2px;
    border-bottom: 0;
    color: var(--zacht);
    font-family: var(--mono);
    font-size: 12.5px;
  }
}