/* BuurtVector, onderdeel van De Vector.
   Verwant aan De Vector: papier, inkt en donkerrood, Newsreader als tekstletter, Archivo als woordmerk.
   Eigen: de Wegwijzer als bewegwijzering, blauwe borden met een pijlpunt en Overpass als bordletter.
   Rood = termijnen en urgentie (wat je niet mag missen). Blauw = hulp en richting (waar je heen kunt). */

@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-normal-400-700.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-normal-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("/fonts/overpass-normal-400-800.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

:root {
  --papier: #f6f2ea;      /* De Vector */
  --papier-2: #efe9dd;
  --vlak: #fffdf8;
  --inkt: #1c1a17;
  --inkt-2: #4a4640;
  --inkt-3: #77726b;
  --lijn: #d6cebf;
  --rood: #8b1e1e;        /* De Vector-accent: termijnen */
  --rood-zacht: #f3e1dc;
  --bord: #1d4f91;        /* wegwijzerblauw */
  --bord-2: #163e74;
  --bord-tekst: #ffffff;
  --bord-zacht: #e3eaf4;
  --groen: #2f6b45;       /* voor de buurt */
  --paal: #bdb5a6; --paal-voet: #a69e8f;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --bordletter: "Overpass", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --woordmerk: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #17161a; --papier-2: #1f1e23; --vlak: #211f24; --inkt: #ece7dc; --inkt-2: #bdb6a8; --inkt-3: #8f8a80; --lijn: #3a383f;
    --rood: #e07a72; --rood-zacht: #3a2424; --bord: #2f68b5; --bord-2: #3a76c4; --bord-zacht: #1d2738; --groen: #7cc191; --paal: #4a4852; --paal-voet: #34323a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #17161a; --papier-2: #1f1e23; --vlak: #211f24; --inkt: #ece7dc; --inkt-2: #bdb6a8; --inkt-3: #8f8a80; --lijn: #3a383f;
  --rood: #e07a72; --rood-zacht: #3a2424; --bord: #2f68b5; --bord-2: #3a76c4; --bord-zacht: #1d2738; --groen: #7cc191; --paal: #4a4852; --paal-voet: #34323a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.krant { margin: 0; background: var(--papier); color: var(--inkt); font: 18px/1.55 var(--serif); padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
a { color: inherit; }
a:hover { color: var(--rood); }
:focus-visible { outline: 3px solid var(--bord); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1.12; letter-spacing: -.005em; }
p { margin: 0 0 .8em; }
.binnen { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.stil { color: var(--inkt-3); }
.skip { position: absolute; left: -999px; top: 0; background: var(--bord); color: var(--bord-tekst); padding: 8px 12px; font-family: var(--bordletter); }
.skip:focus { left: 8px; z-index: 100; }
.leeg { padding: 48px 16px; text-align: center; color: var(--inkt-3); font-style: italic; }

/* Labels in de bordletter, in zinsletters */
.kicker { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 700 14px/1.2 var(--bordletter); color: var(--rood); }
.kicker .sub { color: var(--inkt-3); font-weight: 600; }
.meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font: 500 14px/1.4 var(--bordletter); color: var(--inkt-3); }

/* ── Kop ─────────────────────────────────────────────────────────── */
.masthead { border-bottom: 1px solid var(--inkt); background: var(--papier); }
.kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 10px; }
.merk { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--inkt); }
.merk:hover { color: var(--inkt); }
.merk-icoon { width: 40px; height: 40px; flex: none; }
.merk-tekst { display: flex; flex-direction: column; }
.woordmerk { font: 800 22px/1 var(--woordmerk); letter-spacing: -.02em; }
.buurtnaam { font: italic 400 20px/1.15 var(--serif); color: var(--inkt-2); margin-top: 3px; }
.kop-rechts { display: flex; align-items: center; gap: 16px; font: 600 15px/1 var(--bordletter); color: var(--inkt-2); }
.datum { display: none; }
.kop-link { text-decoration: none; padding: 9px 14px; border: 1px solid var(--lijn); border-radius: 999px; }
.kop-link:hover { border-color: var(--inkt); color: var(--inkt); }
.motto { margin: 0 auto 10px; font-style: italic; color: var(--inkt-2); font-size: 17px; }
.motto:empty { display: none; }
@media (min-width: 800px) {
  .woordmerk { font-size: 28px; }
  .buurtnaam { font-size: 24px; }
  .merk-icoon { width: 52px; height: 52px; }
  .datum { display: inline; }
}

/* Twee pijlers: de krant (tekstlinks) en de Wegwijzer (een bord) */
.pijlers { display: none; }
@media (min-width: 800px) {
  .pijlers { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; padding-top: 4px; }
  .pijler { display: flex; gap: 26px; }
  .pijler a { display: block; padding: 12px 0 11px; font: 650 16px/1 var(--bordletter); color: var(--inkt-2); text-decoration: none; border-bottom: 3px solid transparent; }
  .pijler a:hover { color: var(--inkt); }
  .pijler a.actief { color: var(--inkt); border-bottom-color: var(--rood); }
  .pijler-bord { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 6px; padding: 9px 30px 8px 14px; background: var(--bord); color: var(--bord-tekst); text-decoration: none; font: 750 16px/1 var(--bordletter); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); border-radius: 3px 0 0 3px; }
  .pijler-bord:hover, .pijler-bord.actief { background: var(--bord-2); color: var(--bord-tekst); }
  .pijler-bord svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
}

/* Tabbalk op de telefoon */
.tabbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--vlak); border-top: 1px solid var(--lijn); padding-bottom: env(safe-area-inset-bottom); }
.tabbalk a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 8px; font: 650 12px/1 var(--bordletter); color: var(--inkt-3); text-decoration: none; }
.tabbalk a.actief { color: var(--rood); }
.tabbalk a.tab-weg { color: var(--bord); }
.tabbalk a.tab-weg.actief { background: var(--bord); color: var(--bord-tekst); }
.tabbalk svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 800px) { body.krant { padding-bottom: 0; } .tabbalk { display: none; } }

/* ── Voorpagina ──────────────────────────────────────────────────── */
.voorpagina { display: grid; gap: 28px; padding-top: 26px; }
@media (min-width: 1000px) { .voorpagina { grid-template-columns: minmax(0, 1fr) 560px; gap: 56px; align-items: start; } }
.hoofd .kicker { margin-bottom: 12px; }
.hoofd h2 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.06; margin-bottom: 16px; overflow-wrap: break-word; hyphens: auto; }
.hoofd h2 a { text-decoration: none; }
.hoofd .samenvatting { font-size: 21px; line-height: 1.45; color: var(--inkt-2); max-width: 36em; }
.hoofd-betekenis { max-width: 36em; padding-left: 14px; border-left: 3px solid var(--groen); font-size: 18px; }
.hoofd-betekenis strong { display: block; font: 700 14px/1.4 var(--bordletter); color: var(--groen); }

/* De wegwijzerpaal: de radar als kop, borden aan de paal. Smal om en om, breed in twee richtingen. */
.paal { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.paal-kop { align-self: flex-start; margin-bottom: 12px; font: 800 15px/1 var(--bordletter); color: var(--inkt); text-decoration: none; }
.paal-radar { width: min(220px, 62vw); }
.paal-telling { margin: 10px 0 0; text-align: center; font: 600 15px/1.3 var(--bordletter); color: var(--groen); }
.paal-borden { position: relative; width: 100%; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.paal-borden::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -14px; width: 10px; margin-left: -5px; border-radius: 3px; background: var(--paal); }
.bord { position: relative; display: block; padding: 12px 34px 12px 16px; background: var(--bord); color: var(--bord-tekst); text-decoration: none; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); border-radius: 3px 0 0 3px; }
.bord:hover { background: var(--bord-2); color: var(--bord-tekst); }
.bord strong { display: block; font: 750 18px/1.15 var(--bordletter); }
.bord span { display: block; font: 500 14.5px/1.35 var(--bordletter); opacity: .88; margin-top: 3px; }
.paal .bord { width: 88%; box-sizing: border-box; align-self: flex-end; }
.paal .bord.links { align-self: flex-start; text-align: right; padding: 12px 16px 12px 34px; clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%); border-radius: 0 3px 3px 0; }
.paal-voet { width: 90px; height: 14px; margin-top: 14px; border-radius: 7px 7px 0 0; background: var(--paal-voet); }
@media (min-width: 1000px) {
  .paal-kop { align-self: center; }
  .paal-radar { width: 250px; }
  .paal-borden { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; column-gap: 36px; row-gap: 12px; }
  .paal-borden::before { width: 14px; margin-left: -7px; }
  .paal .bord { width: auto; grid-column: 2; }
  .paal .bord.links { grid-column: 1; }
  .paal-voet { width: 120px; height: 18px; border-radius: 9px 9px 0 0; }
}

/* Wat speelt er bij jou: de opening van de voorpagina */
.straat-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 36px; }
.straat-tekst { flex: 999 1 380px; min-width: 0; }
/* De radar, zoals het logo: groen scherm in een oranje rand, rode stip is jouw plek */
.radar { display: block; width: 100%; height: auto; }
.radar-scherm { fill: #0f2a1c; stroke: #c4561f; stroke-width: 15; }
.radar-ring { fill: none; stroke: #2c5a3d; stroke-width: 1.5; }
.radar-label { font: 600 13px var(--bordletter); fill: #7cc191; text-anchor: middle; }
.radar-zwaai path { fill: #3fae6a; opacity: .22; }
.radar-zwaai { transform-origin: 160px 160px; animation: radar-zwaai 16s linear infinite; }
@keyframes radar-zwaai { to { transform: rotate(360deg); } }
.radar-stip { fill: #9ff0b8; }
.radar a.open .radar-stip { fill: #f1a097; }
.radar a:hover .radar-stip, .radar a:focus .radar-stip { fill: #ffffff; r: 8; }
.radar-thuis { fill: var(--rood); stroke: #ffffff; stroke-width: 2.5; }
@media (prefers-reduced-motion: reduce) { .radar-zwaai { animation: none; } }
.straat-kop h1 { font-size: clamp(38px, 6vw, 60px); line-height: 1.02; margin: 4px 0 14px; }
.straat-lead { font-size: 21px; line-height: 1.45; color: var(--inkt-2); max-width: 30em; }
.straat-zoek { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; margin-top: 18px; }
.straat-zoek label { flex-basis: 100%; font: 700 15px/1.3 var(--bordletter); color: var(--inkt-2); }
.straat-zoek input { flex: 1 1 240px; min-width: 0; font: 20px/1.3 var(--serif); color: var(--inkt); background: var(--vlak); border: 1px solid var(--lijn); border-radius: 4px; padding: 13px 14px; }
.straat-zoek input:focus { outline: 3px solid var(--bord-zacht); border-color: var(--bord); }
.straat-zoek .knop { padding: 15px 22px; font-size: 17px; }
.straat-noot { margin-top: 12px; font: 500 14px/1.4 var(--bordletter); color: var(--inkt-3); }
.straat-noot .link { font: inherit; color: var(--bord); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.straat-acties { display: flex; flex-wrap: wrap; gap: 18px; font: 650 16px/1.3 var(--bordletter); }
.straat-acties a { color: var(--bord); }
.straat-kop .plek-treffers { margin-top: 12px; }
/* Gratis account: de radar volgt je plek */
.volg-blok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 32px; padding: 22px 24px; background: var(--bord-zacht); border-top: 4px solid var(--bord); }
.volg-blok > div { flex: 999 1 420px; min-width: 0; }
.volg-blok h2 { font-size: 26px; color: var(--bord); margin-bottom: 6px; }
.volg-blok p { margin: 0 0 6px; max-width: 42em; }
.volg-belofte { font: 600 15px/1.4 var(--bordletter); color: var(--inkt-2); }

/* Dichtbij eerst: afstand groot links, status rechts */
.dichtbij { list-style: none; margin: 0; padding: 0; }
.dichtbij-rij { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 18px 0; border-bottom: 1px solid var(--lijn); }
.afstand-groot { flex: 0 0 84px; font: 800 22px/1.1 var(--bordletter); color: var(--groen); }
.dichtbij-tekst { flex: 999 1 380px; min-width: 0; }
.dichtbij-tekst a { font-size: 23px; font-weight: 700; line-height: 1.2; text-decoration: none; overflow-wrap: break-word; hyphens: auto; }
.dichtbij-tekst p { margin: 6px 0 0; font-size: 17px; color: var(--inkt-2); }
.dichtbij-status { flex: 0 0 auto; align-self: flex-start; }
.dichtbij-status .termijn, .dichtbij-status .label { margin: 0; }

/* Reageren vóór: kalenderbladen */
.strook { margin-top: 40px; }
.strook-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .strook-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .strook-lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.strook-lijst a { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; gap: 4px 14px; text-decoration: none; padding: 12px 0; border-top: 1px solid var(--lijn); }
.blad { grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 66px; border: 1px solid var(--rood); border-top-width: 8px; border-radius: 4px; background: var(--vlak); font: 650 13px/1 var(--bordletter); color: var(--rood); }
.blad b { font: 700 28px/1 var(--serif); margin-bottom: 2px; }
.strook-kop { font-weight: 700; line-height: 1.25; font-size: 17px; min-width: 0; overflow-wrap: anywhere; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rest { font: 600 14px/1.3 var(--bordletter); color: var(--inkt-3); }
.rest.urgent { color: var(--rood); }
.voorpagina-voet { display: grid; gap: 28px; margin-top: 40px; }
@media (min-width: 860px) { .voorpagina-voet { grid-template-columns: 340px minmax(0, 1fr); gap: 48px; align-items: start; } .voorpagina-voet .wegwijzer { margin-top: 0; } }

/* ── Blokken en teasers ──────────────────────────────────────────── */
.blok { margin-top: 40px; }
.blok-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 3px solid var(--inkt); padding-top: 10px; margin-bottom: 4px; }
.blok-kop h2 { font-size: 26px; }
.blok-kop a { font: 650 15px/1 var(--bordletter); color: var(--inkt-2); }
.blok-kop .uitleg { font-style: italic; color: var(--inkt-2); font-size: 16px; }
.rooster { display: grid; gap: 0 32px; }
@media (min-width: 640px) { .rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .rooster.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.teaser { padding: 16px 0 18px; border-top: 1px solid var(--lijn); }
.blok-kop + .rooster > .teaser:nth-child(-n+3) { border-top: none; }
.teaser .kicker { margin-bottom: 6px; }
.teaser h3 { font-size: 22px; margin-bottom: 6px; overflow-wrap: break-word; hyphens: auto; }
.teaser h3 a { text-decoration: none; }
.teaser .samenvatting { font-size: 17px; color: var(--inkt-2); line-height: 1.45; margin-bottom: 8px; }
.teaser.groot h3 { font-size: 32px; }
.teaser.groot .samenvatting { font-size: 19px; }

.termijn { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1 var(--bordletter); padding: 7px 11px 6px; border-radius: 4px; background: var(--rood-zacht); color: var(--rood); margin: 4px 0 8px; }
.termijn.voorbij { background: transparent; color: var(--inkt-3); border: 1px solid var(--lijn); }
.termijn.rustig { background: transparent; color: var(--rood); border: 1px solid currentColor; }
.label { display: inline-block; font: 650 13.5px/1 var(--bordletter); padding: 6px 10px 5px; border-radius: 4px; background: var(--papier-2); color: var(--inkt-2); margin: 4px 6px 6px 0; vertical-align: middle; }
.label-vergunning-besluit, .label-ontwerp, .label-plan, .label-verkeer { background: var(--rood-zacht); color: var(--rood); }
.label-niveau { background: transparent; border: 1px solid var(--lijn); color: var(--inkt-3); }
.meta .label { margin: 0; }

/* ── Artikel ─────────────────────────────────────────────────────── */
.artikel { max-width: 720px; margin: 28px auto 0; }
.artikel .kicker { margin-bottom: 12px; }
.artikel h1 { font-size: clamp(32px, 6vw, 50px); line-height: 1.05; margin-bottom: 14px; }
.artikel .intro { font-size: 22px; line-height: 1.45; color: var(--inkt-2); margin-bottom: 16px; }
.artikel .meta { padding: 10px 0; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); margin-bottom: 20px; }
.artikel .tekst { font-size: 19px; line-height: 1.65; }
.artikel .tekst p { margin: 0 0 1em; }
.artikel .bron { font: 500 15px/1.4 var(--bordletter); color: var(--inkt-3); }
.artikel .bron a { font-weight: 700; color: var(--inkt-2); text-underline-offset: 3px; }
.terugknop { display: inline-block; font: 650 15px/1 var(--bordletter); color: var(--inkt-2); margin: 22px 0 4px; }
.betekenis { margin: 20px 0; padding: 14px 18px; border-left: 4px solid var(--groen); background: color-mix(in srgb, var(--groen) 9%, var(--papier)); }
.betekenis h3 { font: 700 15px/1.2 var(--bordletter); color: var(--groen); margin-bottom: 6px; }
.betekenis p { margin: 0; font-size: 19px; line-height: 1.5; }
/* Wat kun je doen: het doen-blok krijgt de Wegwijzer-kleur */
.actie { border-left: 4px solid var(--lijn); background: var(--papier-2); padding: 14px 18px 12px; margin: 20px 0; }
.actie.open { border-left-color: var(--bord); background: var(--bord-zacht); }
.actie h3 { font: 700 15px/1.2 var(--bordletter); color: var(--inkt-3); margin-bottom: 8px; }
.actie.open h3 { color: var(--bord); }
.actie-zin { margin: 0 0 4px; font-weight: 700; font-size: 19px; }
.actie-uitleg { margin: 0 0 6px; font-size: 17px; color: var(--inkt-2); }
.actie.verlopen .actie-zin { font-weight: 500; color: var(--inkt-3); }
.actie-knoppen { margin: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.artikel .kader { margin: 22px 0; padding: 14px 18px 12px; background: var(--vlak); border: 1px solid var(--lijn); border-top: 4px solid var(--rood); }

/* Kaders en termijnlijsten */
.kader { border-top: 3px solid var(--inkt); padding-top: 10px; }
.kader.accent { border-top-color: var(--rood); }
.kader h3 { font: 750 16px/1.2 var(--bordletter); margin-bottom: 12px; }
.termijn-lijst { list-style: none; margin: 0; padding: 0; }
.termijn-lijst li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--lijn); align-items: start; }
.termijn-lijst li:first-child { border-top: none; padding-top: 0; }
.termijn-lijst .dag { font: 700 28px/1 var(--serif); color: var(--rood); }
.termijn-lijst .dag small { display: block; font: 650 13px/1.2 var(--bordletter); color: var(--inkt-3); margin-top: 3px; }
.termijn-lijst .titel-klein-regel { font-size: 18px; font-weight: 700; line-height: 1.25; text-decoration: none; }
.mijn-locaties p { font-size: 17px; color: var(--inkt-2); }

/* ── Sectie- en Wegwijzerkoppen ──────────────────────────────────── */
.sectiekop { padding: 30px 0 10px; border-bottom: 1px solid var(--inkt); margin-bottom: 8px; }
.sectiekop h2 { font-size: clamp(34px, 6vw, 50px); line-height: 1.05; }
.sectiekop p { font-style: italic; color: var(--inkt-2); margin: 8px 0 6px; max-width: 40em; font-size: 19px; }
.sectiekop.weg { border-bottom: 3px solid var(--bord); }
.sectiekop.weg h2 { color: var(--bord); }
.terugbord { display: inline-block; margin-bottom: 12px; padding: 6px 12px 5px 22px; background: var(--bord); color: var(--bord-tekst); text-decoration: none; font: 700 14px/1 var(--bordletter); clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); border-radius: 0 3px 3px 0; }
.terugbord:hover { background: var(--bord-2); color: var(--bord-tekst); }
.pagina-uitleg { max-width: 40em; color: var(--inkt-2); }

/* Wegwijzer-overzicht: subdelen met grote borden */
.wegwijzer-delen { display: grid; gap: 34px; margin-top: 24px; }
.weg-deel { display: grid; gap: 6px 40px; }
@media (min-width: 860px) { .weg-deel { grid-template-columns: 280px minmax(0, 1fr); } }
.weg-deel h3 { font-size: 24px; }
.weg-deel > p { color: var(--inkt-2); font-size: 17px; margin: 0; }
@media (min-width: 860px) { .weg-deel h3, .weg-deel > p { grid-column: 1; } .weg-deel .borden { grid-column: 2; grid-row: 1 / span 3; } }
.borden { display: grid; gap: 10px; }
@media (min-width: 640px) { .borden { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bord.groot { min-height: 96px; padding: 14px 40px 14px 18px; }
.bord.groot svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; float: right; margin: 0 -18px 0 8px; opacity: .8; }

/* Begrippen en hulp, met bronnen */
.begrippen { margin: 18px 0 24px; display: grid; gap: 0 40px; }
@media (min-width: 860px) { .begrippen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.begrippen > div { padding: 14px 0; border-top: 1px solid var(--lijn); }
.begrippen dt { font: 750 19px/1.2 var(--bordletter); color: var(--bord); margin-bottom: 4px; }
.begrippen dd { margin: 0; font-size: 17px; line-height: 1.5; }
.bronnen { display: block; margin-top: 6px; font: 500 14px/1.4 var(--bordletter); color: var(--inkt-3); }
.bron-link { color: var(--inkt-2); text-underline-offset: 3px; }
.hulp-lijst { display: grid; gap: 0 40px; margin-top: 12px; }
@media (min-width: 860px) { .hulp-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hulp-item { padding: 16px 0; border-top: 1px solid var(--lijn); }
.hulp-item h3 { font-size: 22px; margin-bottom: 4px; }
.hulp-item p { font-size: 17px; margin-bottom: 6px; }
.hulp-item strong { font: 750 15px/1 var(--bordletter); color: var(--bord); }

/* Lokale websites */
.wegwijzer { margin-top: 40px; }
.wegwijzer-groep { padding: 12px 0; border-top: 1px solid var(--lijn); }
.wegwijzer-groep h4 { margin: 0 0 8px; font: 700 15px/1.2 var(--bordletter); color: var(--inkt-3); }
.wegwijzer-groep ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 28px; }
@media (min-width: 640px) { .wegwijzer-groep ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wegwijzer-groep li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: 16px; }
.wegwijzer-groep li a { font-weight: 700; text-underline-offset: 3px; text-decoration-color: var(--lijn); }
.wegwijzer-groep .afstand { margin-left: auto; font: 500 13px/1 var(--bordletter); color: var(--inkt-3); white-space: nowrap; }
.wegwijzer-groep .oms { color: var(--inkt-3); font-size: 15px; }

/* ── Formulieren en knoppen ──────────────────────────────────────── */
.formulier { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 6px; padding: 22px; max-width: 640px; margin-top: 18px; }
.formulier .veld { display: grid; gap: 6px; margin-bottom: 16px; }
.formulier label { font: 700 15px/1.3 var(--bordletter); color: var(--inkt-2); }
.formulier input, .formulier select, .formulier textarea, .radar-kop input, .inschrijf-mini input { font: 17px/1.4 var(--serif); color: var(--inkt); background: var(--papier); border: 1px solid var(--lijn); border-radius: 4px; padding: 11px 12px; width: 100%; }
.formulier textarea { min-height: 140px; resize: vertical; }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { outline: 3px solid var(--bord-zacht); border-color: var(--bord); }
.formulier .hulp { font: 500 14px/1.4 var(--bordletter); color: var(--inkt-3); }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.knop { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--inkt); background: var(--inkt); color: var(--papier); border-radius: 4px; padding: 11px 18px 10px; font: 750 16px/1 var(--bordletter); text-decoration: none; cursor: pointer; }
.knop:hover { color: var(--papier); background: var(--inkt-2); border-color: var(--inkt-2); }
.knop.licht { background: transparent; color: var(--inkt); border-color: var(--lijn); }
.knop.licht:hover { border-color: var(--inkt); color: var(--inkt); }
.knop.accent { background: var(--bord); border-color: var(--bord); color: var(--bord-tekst); }
.knop.accent:hover { background: var(--bord-2); border-color: var(--bord-2); color: var(--bord-tekst); }
.knop:disabled { opacity: .5; cursor: default; }
.melding { padding: 12px 14px; border-radius: 4px; margin: 0 0 14px; font: 600 15px/1.4 var(--bordletter); }
.melding.fout { background: var(--rood-zacht); color: var(--rood); }
.melding.goed { background: color-mix(in srgb, var(--groen) 13%, var(--papier)); color: var(--groen); }
.stappen { counter-reset: stap; list-style: none; padding: 0; margin: 18px 0 24px; max-width: 680px; }
.stappen li { counter-increment: stap; display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--lijn); font-size: 17px; }
.stappen li::before { content: counter(stap); font: 800 26px/1 var(--bordletter); color: var(--bord); }
.stappen strong { display: block; margin-bottom: 2px; font-size: 19px; }

/* Inschrijven klein, radar */
.inschrijf-mini { display: grid; gap: 8px; }
.inschrijf-mini .knop { justify-content: center; }
.radar-kop { display: flex; gap: 8px; max-width: 640px; margin: 18px 0; }
.radar-kop input { flex: 1; }
.radar-punt { font-size: 19px; margin-bottom: 14px; }
.radar-punt strong { color: var(--bord); }

/* Mijn buurt: kaart en straal (kaart.js) */
.mijn-instellen { max-width: 700px; margin-top: 18px; }
.plek-treffers { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 12px; }
.plek-treffers:empty { display: none; }
.filter { font: 650 14px/1 var(--bordletter); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt-2); cursor: pointer; }
.filter.actief { background: var(--bord); border-color: var(--bord); color: var(--bord-tekst); }
.kaart-vlak { height: 340px; }
.kaart { position: relative; overflow: hidden; background: #e4ddcf; border: 1px solid var(--lijn); border-radius: 6px; touch-action: none; cursor: grab; user-select: none; }
.kaart.sleept { cursor: grabbing; }
.kaart-tegels { position: absolute; inset: 0; }
.kaart-tegels img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; pointer-events: none; }
.kaart-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kaart-straal { fill: color-mix(in srgb, var(--bord) 14%, transparent); stroke: var(--bord); stroke-width: 2; }
.kaart-pin { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--rood); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); pointer-events: none; }
.kaart-knoppen { position: absolute; right: 8px; top: 8px; display: grid; gap: 4px; }
.kaart-knop { width: 34px; height: 34px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt); border-radius: 4px; font: 700 18px/1 var(--bordletter); cursor: pointer; }
.kaart-bron { position: absolute; left: 0; bottom: 0; font: 11px/1.3 var(--bordletter); background: rgba(255, 255, 255, .85); color: #333; padding: 2px 6px; }
.kaart-bron a { color: inherit; }
/* Op de kaart: lagen als gekleurde stippen; kleur per laag, ook in de filterknoppen en de lijst */
.laag-berichten { --laag: #8b1e1e; }
.laag-werkzaamheden { --laag: #d9822b; }
.laag-evenement { --laag: #7a4fa3; }
.laag-ziekenhuis { --laag: #c0392b; }
.laag-huisartsenpost { --laag: #1f7a86; }
.kaart-vlak.groot { height: min(62vh, 520px); }
.kaart-punten { position: absolute; inset: 0; pointer-events: none; }
.kaart-punt { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; padding: 0; border-radius: 50%; background: var(--laag, var(--bord)); border: 1.5px solid #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); cursor: pointer; pointer-events: auto; }
.kaart-punt.laag-ziekenhuis, .kaart-punt.laag-huisartsenpost { border-radius: 4px; }
.kaart-punt.laag-ziekenhuis, .kaart-punt.laag-huisartsenpost { width: 16px; height: 16px; left: -8px; top: -8px; border-width: 2px; }
.kaart-punt:hover, .kaart-punt:focus-visible, .kaart-punt.gekozen { width: 22px; height: 22px; left: -11px; top: -11px; border-width: 2.5px; z-index: 2; }
.kaart-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.laag-knop { display: inline-flex; align-items: center; gap: 7px; }
.laag-knop:not(.actief) .laag-stip { background: transparent; box-shadow: inset 0 0 0 2px var(--laag); }
.laag-tel { color: inherit; opacity: .7; }
.laag-aed { text-decoration: underline; }
.laag-stip { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--laag); vertical-align: baseline; margin-right: 6px; flex: none; }
.laag-knop .laag-stip { margin-right: 0; }
.kaart-detail { margin-top: 12px; padding: 14px 16px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 6px; }
.kaart-detail h3 { margin: 2px 0 6px; font-size: 21px; }
.kaart-detail p { margin: 0 0 6px; }
.kaart-detail-soort { font: 700 14px/1.3 var(--bordletter); color: var(--inkt-2); }
.kaart-detail-wanneer { font: 650 15px/1.3 var(--bordletter); }
.kaart-rijen { list-style: none; margin: 0; padding: 0; }
.kaart-rijen li { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.kaart-rijen p { margin: 4px 0 0; color: var(--inkt-2); font-size: 16px; }
.afstand-klein { font: 800 16px/1.3 var(--bordletter); color: var(--bord); }
.kaart-noot { margin-top: 18px; font-size: 15px; }
.straal-rij { margin: 14px 0 8px; }
.straal-rij label { display: block; font: 700 15px/1.3 var(--bordletter); color: var(--inkt-2); margin-bottom: 6px; }
.straal-rij input[type=range] { width: 100%; accent-color: var(--bord); }
.straal-keuzes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ── Voet en meldingen ───────────────────────────────────────────── */
.voet { margin-top: 56px; border-top: 1px solid var(--inkt); padding: 22px 0 30px; color: var(--inkt-3); }
.voet-rij { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.voet-merk { font-size: 16px; margin: 0; }
.voet-merk .woordmerk { font-size: 18px; color: var(--inkt); }
.voet-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; font: 600 15px/1.4 var(--bordletter); }
.voet-links a { color: var(--inkt-2); }
#toasts { position: fixed; bottom: calc(80px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 50; width: min(92vw, 420px); }
@media (min-width: 800px) { #toasts { bottom: 20px; left: auto; right: 20px; transform: none; } }
.toast { background: var(--inkt); color: var(--papier); padding: 11px 16px; border-radius: 6px; font: 600 15px/1.4 var(--bordletter); }
.toast.fout { background: var(--rood); color: #fff; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media print {
  .tabbalk, .pijlers, .kop-rechts, .voet, #toasts, .knop, .paal { display: none !important; }
  body.krant { background: #fff; color: #000; }
}