/* Veldgids: wit papier, warme inkt, serif-koppen, secties gescheiden door
   regels in plaats van dozen. Kleur draagt betekenis: pine is interactie/positief,
   clay is voorbehoud, en verder is de pagina zwart-wit. Gekozen 12 aug 2026
   boven een 'atlas'-variant; de prototypes staan in het sessiescratchpad. */
:root{--paper:#fff;--ink:#191813;--muted:#6d685e;--hair:#e6e2d8;--rule:#191813;
--pine:#22593c;--pine-deep:#1b4830;--clay:#9a4d1c;
--serif:"Iowan Old Style","Charter","Bitstream Charter",Georgia,"Times New Roman",serif;
--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
/* Ruimteschaal. Dezelfde overgang -- kop naar tekst, sectie naar sectie -- had op
   drie sjablonen drie hoogtes, omdat elke regel zijn eigen getal koos: 2, 4, 6, 9,
   11, 14, 18, 20, 22, 26, 44, 64, 68, 88. Vanaf hier kiest alles uit deze reeks.
   De regel erachter: wat bij elkaar hoort staat op s2/s3, wat een nieuwe gedachte
   begint op s7 of meer. */
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
/* Twee breedtes, niet één. Roosters mogen de volle bak gebruiken; lopende tekst
   niet, want een regel van 1012 px is ruim honderd tekens en die leest niemand
   twee keer. 1060 blijft de bak: bij 1100 klapt het zescellige 'What do you need'
   van twee rijen van drie naar 4+2, en dat rooster was met opzet symmetrisch. */
--page:1060px;--prose:74ch}
@media (prefers-color-scheme:dark){:root{--paper:#161512;--ink:#eae7e0;--muted:#a19b8f;
--hair:#2e2b26;--rule:#eae7e0;--pine:#8cc7a4;--pine-deep:#a5d6b9;--clay:#d8a06a}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.62 var(--sans)}
a{color:var(--pine)}
.wrap{max-width:var(--page);margin:0 auto;padding:0 24px}
/* Lopende tekst krijgt een leesbare regellengte, roosters de volle bak. De
   methodepagina is de enige met echt lange stukken tekst; daar zijn de secties
   gescheiden door een haarlijn in plaats van door de zware sectiekop, omdat zes
   van die koppen onder elkaar de pagina in blokken zou hakken die er niet zijn. */
.prose{max-width:var(--prose)}
.prose h2{font:700 23px/1.25 var(--serif);letter-spacing:-.01em;max-width:none;
 margin:var(--s7) 0 var(--s4);padding-top:var(--s5);border-top:1px solid var(--hair)}
.prose.top>h2:first-child{margin-top:var(--s5);padding-top:0;border-top:0}
/* Het cijferblok breekt bewust uit de tekstbreedte, dus het heeft zijn eigen lucht
   nodig; anders leest de kop eronder als bijschrift bij de cijfers. */
.cijfers.bewijs{margin:var(--s5) 0 var(--s7)}
.smal{max-width:var(--prose)}
.prose p{margin:0 0 var(--s4);font-size:16.5px;line-height:1.72}
.prose ul{margin:0 0 var(--s4);padding-left:19px}
.prose li{margin:0 0 var(--s3);line-height:1.7}
.prose li:last-child{margin-bottom:0}
.prose strong{font-weight:650}

/* masthead: een kleine krantekop, geen appbalk. Merk en navigatie staan als één
   groep links, met genoeg lucht ertussen dat het geen doorlopende zin wordt. */
header.top{border-bottom:2px solid var(--rule);background:var(--paper)}
header.top .wrap{display:flex;align-items:baseline;gap:var(--s6);
 padding:var(--s5) 24px var(--s4)}
.brand{font:700 23px/1 var(--serif);letter-spacing:-.015em;text-decoration:none;color:var(--ink)}
.brand span{color:var(--pine);font-style:italic}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand .mark{width:28px;height:28px;flex:none;border-radius:6px}
nav.top{display:flex;gap:var(--s5);flex-wrap:wrap}
nav.top a{color:var(--muted);text-decoration:none;font-size:12.5px;
 text-transform:uppercase;letter-spacing:.1em;font-weight:650}
nav.top a:hover,nav.top a[aria-current]{color:var(--ink)}
/* Op een telefoon past merk plus twee navigatie-items niet op één regel zonder de
   merknaam te knijpen. Dan liever twee regels met een haarlijn ertussen: dat leest
   nog steeds als masthead. */
@media(max-width:600px){
 header.top .wrap{flex-direction:column;align-items:stretch;gap:0;
  padding:var(--s4) 20px var(--s2)}
 .brand{font-size:20px}
 .brand .mark{width:25px;height:25px}
 nav.top{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--hair);
  gap:var(--s5)}
 .wrap{padding-left:20px;padding-right:20px}}

/* Afstand kop-naar-inhoud stond op de kruimels (20px) én op h1 (14px), dus een
   pagina zonder kruimels begon 34 px hoger dan een pagina met. Nu draagt main de
   ruimte en zijn beide gevallen gelijk. */
main.wrap{padding-top:var(--s5)}
.crumbs{font-size:13px;color:var(--muted);margin:0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
h1{font:700 clamp(31px,4.2vw,44px)/1.08 var(--serif);letter-spacing:-.015em;
 margin:var(--s3) 0 var(--s2);max-width:28ch}
h2{font:700 25px/1.2 var(--serif);letter-spacing:-.01em;margin:0 0 var(--s3);max-width:32ch}
.lede{color:var(--muted);margin:0 0 var(--s4);font-size:16.5px;
 font-variant-numeric:tabular-nums;max-width:var(--prose)}

/* acties: één primaire knop, de rest is een link */
.btnrow{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
 margin:var(--s4) 0 var(--s4)}
.btn{display:inline-block;padding:10px 18px;background:var(--pine);color:var(--paper);
 text-decoration:none;font-weight:600;font-size:14.5px;border-radius:3px}
.btn:hover{background:var(--pine-deep)}
.btn.ghost{background:none;color:var(--pine);padding:0;border-radius:0;
 text-decoration:underline;text-underline-offset:3px}

/* attributenrij op de detailpagina: typografisch, het vinkje in pine */
.goodfor{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0 0 var(--s6);padding:12px 0;
 border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.goodfor .pill{font-size:15px;font-weight:600;color:var(--ink);background:none;padding:0;margin:0}
.pill i{font-style:normal;color:var(--pine)}

/* sectiekop: kleinkapitaal boven een zware inktregel, het ritme van elke pagina.
   Eén plek, niet twee: dit blok stond ook onderaan de stylesheet nog eens met
   andere getallen, en dan is niet meer te zien welke ruimte de bedoeling was. */
.eyebrow{font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
 color:var(--pine);margin:var(--s8) 0 var(--s3);padding-top:var(--s5);
 border-top:2px solid var(--rule)}
/* Onderaan de pagina wordt de inhoud kleiner terwijl de tussenruimte gelijk bleef,
   waardoor alles als een aaneengesloten brij ging lezen. Na iets zeer dichts --
   een tabel van tachtig rijen, een A-Z-lijst -- hoort meer lucht: dat is wat de
   lezer vertelt dat er een nieuwe gedachte begint. */
.scroll + .eyebrow, table + .eyebrow, .azlist + .eyebrow,
details.faq + .eyebrow, .cards + .eyebrow, .contrib + .eyebrow{margin-top:var(--s9)}
.scroll{margin-bottom:var(--s2)}
/* Een sectiekop die meteen op een andere volgt zou twee zware regels boven elkaar
   zetten. */
.eyebrow + .eyebrow{margin-top:var(--s5)}
.duo .eyebrow,.terrain .eyebrow{margin-top:0;padding-top:0;border-top:0}

/* feitenlijst: geregelde rijen, bron als redactionele voetnoot */
.kv .row{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:9px 2px;
 border-bottom:1px solid var(--hair);font-size:15px}
.kv .k{font:600 11.5px/1.9 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kv .v b{font-weight:650}
.kv .src,.know .src{display:block;font:italic 12.5px/1.5 var(--serif);color:var(--muted);margin-top:2px}
/* Cursieve toelichting onder een kop. Hij had geen ondermarge, waardoor de
   bovenregel van het rooster eronder dwars door de staarten van de letters liep. */
.trustline{font:italic 13px/1.55 var(--serif);color:var(--muted);
 margin:var(--s2) 0 var(--s4);max-width:var(--prose)}

/* de kaart als plaat in een gids: passe-partout en cursief bijschrift */
.duo{display:grid;grid-template-columns:370px 1fr;gap:34px;align-items:start;margin:0 0 8px}
.duo>div{min-width:0}
@media(max-width:900px){.duo{grid-template-columns:1fr}}
.hero{margin:0;border:1px solid var(--hair);background:var(--paper);padding:12px}
.hero img{width:100%;height:auto;display:block}
.hero figcaption{font:italic 13px/1.55 var(--serif);color:var(--muted);
 padding:10px 4px 0;text-align:center}
.shot{position:relative;line-height:0}
.shot .overlay{position:absolute;inset:0;width:100%;height:100%}
.mapwrap{position:relative;border:1px solid var(--hair)}
.mapwrap img{width:100%;display:block}
.pin.leeg{width:15px;height:15px;border-width:2px}
.pin{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;
 background:var(--ink);color:var(--paper);font-size:13px;font-weight:700;display:flex;
 align-items:center;justify-content:center;border:2px solid var(--paper);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.maplegend{display:block;padding:10px 4px 0;font:13.5px/1.7 var(--sans);color:var(--muted)}
.maplegend span{display:flex;align-items:center;margin:3px 0}
.maplegend b{display:inline-flex;width:19px;height:19px;border-radius:50%;background:var(--ink);
 color:var(--paper);font-size:11px;align-items:center;justify-content:center;margin-right:8px;
 border:1.5px solid var(--paper);outline:1px solid var(--hair);flex:none}
.maplegend i{font-style:normal;margin-left:5px}

/* observaties: kolommen tekst met een fijne regel erboven; voorbehoud in clay */
.knowlist{display:grid;grid-template-columns:1fr 1fr;gap:2px 34px;margin:6px 0 2px}
@media(max-width:700px){.knowlist{grid-template-columns:1fr}}
.know{padding:11px 0;border-top:1px solid var(--hair)}
.know .k{font:650 16.5px/1.3 var(--serif)}
.know .v{font-size:14px;color:var(--muted);margin-top:3px;line-height:1.55;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.knowlist.warns{margin-top:var(--s5)}
.know.warn .k{color:var(--clay)}
.know.warn .k::before{content:"▲ ";font-size:11px;vertical-align:2px}

/* heatmap: het enige vlak waar pine als datakleur vol aan mag */
table.heat{border-collapse:separate;border-spacing:2px;font-size:12px;width:100%;
 max-width:840px;table-layout:fixed}
table.heat th{padding:3px 5px;border:0;color:var(--muted);font-weight:600;
 font-variant-numeric:tabular-nums;font-size:11.5px}
table.heat th:first-child{width:36px;text-align:left}
table.heat td{height:25px;background:var(--pine);opacity:.06;border:0;padding:0}
table.heat td.l0{opacity:.13}table.heat td.l1{opacity:.3}table.heat td.l2{opacity:.5}
table.heat td.l3{opacity:.72}table.heat td.l4{opacity:1}
.heatscale{display:flex;align-items:center;gap:7px;margin:8px 0 0;font-size:12px;color:var(--muted)}
.heatscale i{display:inline-block;width:26px;height:12px;background:var(--pine)}

/* praktisch, nabij, faq: rustige geregelde lijsten */
.plan{padding:2px 0;margin:4px 0;font-size:15px}
.plan div{margin:5px 0}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 34px;margin:6px 0}
.fact{border-top:1px solid var(--hair);padding:11px 0;background:none}
.fact .k a{font:650 16.5px/1.3 var(--serif);color:var(--ink);text-decoration:none}
.fact .k a:hover{color:var(--pine)}
.fact .v{font-size:13.5px;color:var(--muted);margin-top:3px}
details.faq{border-top:1px solid var(--hair)}
details.faq:last-of-type{border-bottom:1px solid var(--hair)}
details.faq summary{cursor:pointer;padding:11px 2px;font:650 16px/1.35 var(--serif);list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:"+";float:right;color:var(--muted);font-family:var(--sans)}
details.faq[open] summary:after{content:"−"}
details.faq .a{padding:0 2px 14px;color:var(--muted);font-size:14.5px;max-width:70ch}

/* bijdragen en methode: de enige omkaderde vlakken op de pagina */
.contrib{border:2px solid var(--rule);background:var(--paper);padding:20px 22px;
 margin:var(--s3) 0}
.contrib h3{margin:0 0 4px;font:700 20px/1.2 var(--serif)}
.contrib .sub{color:var(--muted);font-size:14px;margin:0 0 14px}
.contrib .acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}

/* bijdrageformulier — zelfde taal als de rest: regels, geen dozen */
.cform{margin:4px 0 0}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 18px}
.cform label{display:block;font:600 11.5px/1.9 var(--sans);letter-spacing:.09em;
 text-transform:uppercase;color:var(--muted);margin:10px 0 0}
.cform label.full{display:block}
.cform input,.cform select,.cform textarea{display:block;width:100%;margin-top:3px;
 font:15px/1.5 var(--sans);color:var(--ink);background:var(--paper);
 border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:6px 2px;
 text-transform:none;letter-spacing:0}
.cform textarea{resize:vertical;border:1px solid var(--hair);padding:8px 10px}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:0;
 border-color:var(--pine);box-shadow:0 1px 0 0 var(--pine)}
.cform button{margin:18px 0 0;padding:10px 20px;background:var(--pine);color:#fff;
 border:0;border-radius:3px;font:600 14.5px var(--sans);cursor:pointer}
.cform button:hover{background:#1b4830}
.contrib a.act{display:block;border:1px solid var(--hair);background:var(--paper);
 padding:11px 14px;text-decoration:none;color:var(--ink)}
.contrib a.act:hover{border-color:var(--ink)}
.contrib a.act b{display:block;font-size:14.5px}
.contrib a.act span{font-size:12.5px;color:var(--muted)}
.contrib .rev{font:italic 12.5px/1.5 var(--serif);color:var(--muted);margin:12px 0 0}
.method{display:grid;grid-template-columns:190px 1fr;gap:18px;align-items:start;
 border:1px solid var(--hair);background:var(--paper);padding:16px 18px;margin:var(--s3) 0}
.method img{width:100%;display:block;border:1px solid var(--hair)}
.method p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6}
@media(max-width:600px){.method{grid-template-columns:1fr}}

/* hub- en lijstpagina's: kaarten als krantenkolommen, chips als meta-tekst */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 34px}
.card{border-top:1px solid var(--hair);background:none;overflow:hidden}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;margin-top:14px}
.card .body{padding:10px 0 16px}
.card a{text-decoration:none;font:650 17px/1.3 var(--serif);color:var(--ink)}
.card a:hover{color:var(--pine)}
.card .meta{font-size:13px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.card .pill,.chips .pill{display:inline;background:none;padding:0;margin:0;
 font-size:12.5px;color:var(--muted)}
.card .pill:not(:last-child)::after,.chips .pill:not(:last-child)::after{content:" · ";color:var(--muted)}
.card .pill.soft{color:var(--clay);font-weight:600}
.chips{margin-top:8px;line-height:1.7}

/* tabellen (filterpagina's) */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--hair)}
th{font:600 11.5px/1.9 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
td a{font-weight:650;color:var(--ink);text-decoration:none}
td a:hover{color:var(--pine)}
.scroll{overflow-x:auto}
.note{font:italic 13.5px/1.6 var(--serif);color:var(--muted);border-left:2px solid var(--hair);
 padding-left:14px;margin:18px 0}

/* stadsnavigatie: tweede laag onder de kruimels */
.localnav{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 18px;
 margin:var(--s2) 0 var(--s5);padding:10px 0;
 border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
/* De balk is zelf al een scheiding; de sectiekop erna hoeft er geen volle
   sectie-afstand meer bij te doen. */
.localnav + .eyebrow{margin-top:var(--s7)}
.localnav .here{font:700 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
 color:var(--ink);margin-right:6px}
.localnav a{font-size:14.5px;color:var(--muted);text-decoration:none}
.localnav a:hover{color:var(--pine)}
.localnav a[aria-current]{color:var(--ink);font-weight:650;
 text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* de complete A–Z-lijst: compacte kolommen, geen kaarten */
.azlist{columns:3 220px;column-gap:34px;margin:10px 0 4px}
.azgroep{break-inside:avoid;margin:0 0 14px}
.azgroep h3{font:700 12px/1 var(--sans);letter-spacing:.14em;color:var(--pine);
 margin:0 0 7px;padding-bottom:5px;border-bottom:1px solid var(--hair)}
.azgroep ul{list-style:none;margin:0;padding:0}
.azgroep li{font-size:14px;line-height:1.5;margin:0 0 5px}
.azgroep a{text-decoration:none;color:var(--ink)}
.azgroep a:hover{color:var(--pine);text-decoration:underline}
.azgroep i{font-style:normal;color:var(--muted);font-size:12.5px}

/* groepen van intenties op de stadshub */
.intent{margin:0 0 var(--s2)}
.intent h3{font:700 12px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
 color:var(--muted);margin:22px 0 10px}
.intent .rij{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 34px}
.intent .cel{border-top:1px solid var(--hair);padding:11px 0}
.intent .cel a{font:650 16.5px/1.3 var(--serif);color:var(--ink);text-decoration:none}
.intent .cel a:hover{color:var(--pine)}
.intent .cel .n{font-size:13.5px;color:var(--muted);margin-top:2px}
.intent .cel .w{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.combi .cel{border-top:2px solid var(--pine)}
.cijfers .rij{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 22px}
.cijfers .groot{font:700 30px/1.05 var(--serif);letter-spacing:-.02em;color:var(--pine);
 font-variant-numeric:tabular-nums}
.cijfers .wat{font-size:14.5px;font-weight:650;margin-top:3px}
/* kopjes die geen link zijn, wel dezelfde typografie */
.intent .cel a.nolink{color:var(--ink);text-decoration:none;cursor:default}
/* kernfeiten onder een showcase-kaart */
.showcase .feiten{margin-top:9px;border-top:1px solid var(--hair);padding-top:7px}
.showcase .fr{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;
 line-height:1.75;border-bottom:1px solid var(--hair)}
.showcase .fr:last-child{border-bottom:0}
.showcase .fr span{color:var(--muted)}
.showcase .fr b{font-weight:650;text-align:right}
/* puntenkaart per stad of filter */
.kaart{margin:8px 0 4px}
.kaart svg{width:100%;height:auto;max-height:56vh;display:block;margin:0 auto;
 border:1px solid var(--hair)}
.kaart .bg{fill:#f7f4ec}
.kaart .p{fill:var(--pine);opacity:.5}
.kaart a:hover .p{opacity:1;r:5}
.kaart .p.hi{fill:var(--clay);opacity:.95}
.kaart .pl{font:600 11px var(--sans);fill:#9b9484;text-anchor:middle;letter-spacing:.04em}
.kaart figcaption{font:italic 12.5px/1.5 var(--serif);color:var(--muted);padding:7px 2px 0}
@media(prefers-color-scheme:dark){.kaart .bg{fill:#1a1c19}.kaart .pl{fill:#6f6a5f}}
.combi .cel .n{color:var(--pine);font-weight:650}

/* voettekst: één component voor de hele site. De stadslinks staan er als losse
   groep boven, zodat de vaste kolommen op elke pagina hetzelfde zijn en de
   contextuele laag herkenbaar apart. */
.voetctx{padding-bottom:var(--s5);margin-bottom:var(--s5);
 border-bottom:1px solid var(--hair)}
.voetctx b{display:block;font:700 11.5px/1.7 var(--sans);letter-spacing:.1em;
 text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.voetctx .rij{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.voetctx a{font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap}
.voetctx a:hover{color:var(--pine);text-decoration:underline}
.voet{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s5) 34px;margin:0;
 padding-bottom:var(--s5);border-bottom:1px solid var(--hair)}
.vmerk b{display:block;font:700 19px/1.2 var(--serif);color:var(--ink)}
.vmerk span{display:block;margin-top:var(--s1);font-size:13.5px;color:var(--muted);max-width:32ch}
.vkol b{display:block;font:700 11.5px/1.7 var(--sans);letter-spacing:.1em;
 text-transform:uppercase;color:var(--muted);margin-bottom:var(--s1)}
.vkol a{display:block;font-size:14px;line-height:1.9;color:var(--ink);text-decoration:none}
.vkol a:hover{color:var(--pine);text-decoration:underline}
@media(max-width:700px){.voet{grid-template-columns:1fr 1fr;gap:var(--s5)}
 .vmerk{grid-column:1/-1}}
@media(max-width:700px){.azlist{columns:2 160px}}
@media(max-width:460px){.azlist{columns:1}}

/* de stedenindex: staat als kolomkop, plaatsen als lopende regel. Acht staten in
   losse secties met een eigen zware regel maakten er 1.200 px van voor elf links;
   dit blijft werken bij honderd metro's. */
.staten{border-top:2px solid var(--rule);margin-top:var(--s5)}
.staat{display:grid;grid-template-columns:160px 1fr;gap:var(--s2) var(--s5);
 padding:var(--s4) 0;border-bottom:1px solid var(--hair);align-items:baseline}
.staat>b{font:700 11.5px/1.7 var(--sans);letter-spacing:.1em;text-transform:uppercase;
 color:var(--muted)}
.plaatsen{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.plaatsen a{font:650 16.5px/1.35 var(--serif);color:var(--ink);text-decoration:none;
 white-space:nowrap}
.plaatsen a:hover{color:var(--pine)}
.plaatsen i{font-style:normal;font:400 13px/1 var(--sans);color:var(--muted);margin-left:6px}
.staat.dichtbij>b{color:var(--pine)}
@media(max-width:620px){.staat{grid-template-columns:1fr;gap:var(--s1)}}

/* De vinder. Het enige stuk van de site dat als gereedschap werkt in plaats van
   als tekst, en dus het enige waar iets aan te klikken valt dat geen link is. Hij
   houdt zich verder aan dezelfde taal: regels in plaats van dozen, invoervelden
   met alleen een onderstreping, geen pillen en geen paneel. */
.vinder[hidden]{display:none}
.vinder{border-top:2px solid var(--rule);margin-top:var(--s5)}
.vrij{display:grid;grid-template-columns:180px 1fr;gap:var(--s2) var(--s5);
 padding:var(--s4) 0;border-bottom:1px solid var(--hair);align-items:baseline}
.vrij>b{font:700 11.5px/1.9 var(--sans);letter-spacing:.1em;text-transform:uppercase;
 color:var(--muted)}
.vwaar{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3)}
.vwaar .invoer{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3)}
.vwaar .of{color:var(--muted);font-size:14px}
.vwaar [hidden]{display:none}
.vinder input[type=text]{font:15.5px/1.5 var(--sans);color:var(--ink);background:none;
 border:0;border-bottom:1px solid var(--hair);padding:5px 2px;width:210px;border-radius:0}
.vinder input[type=text]:focus{outline:0;border-color:var(--pine);
 box-shadow:0 1px 0 0 var(--pine)}
.vinder select{font:15.5px/1.5 var(--sans);color:var(--ink);background:none;
 border:0;border-bottom:1px solid var(--hair);padding:5px 2px;border-radius:0}
.vinder select:focus{outline:0;border-color:var(--pine)}
.opts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.opts label{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;cursor:pointer}
.opts input{width:16px;height:16px;accent-color:var(--pine);margin:0;flex:none}
.hier{font-size:15.5px;color:var(--muted)}
.hier b{color:var(--ink);font-weight:650}
.hier[hidden]{display:none}
.vdoen{display:flex;align-items:baseline;gap:var(--s5);flex-wrap:wrap;padding:var(--s5) 0 0}
button.btn{border:0;font:600 14.5px var(--sans);cursor:pointer}
button.link{background:none;border:0;padding:0;color:var(--pine);font:600 15px var(--sans);
 cursor:pointer;text-decoration:underline;text-underline-offset:3px}
button.link:hover{color:var(--pine-deep)}
.vmelding{font:italic 14px/1.6 var(--serif);color:var(--clay);margin:var(--s3) 0 0}
/* Resultaten lenen het kaartrooster van de rest van de site, met twee extra
   regels: waarom het er staat, en wat de drukte doet op het gekozen moment. */
.res .card .waarom{font-size:13px;color:var(--muted);margin-top:var(--s1)}
.res .card .rustig{font-size:13px;color:var(--pine);margin-top:var(--s1)}
.res .card .door{font-size:12.5px;color:var(--muted);margin-top:var(--s2);
 text-decoration:none;display:inline-block}
.res .card .door:hover{color:var(--pine)}
.res .ok{font-size:13.5px;color:var(--muted);margin:0 0 var(--s3);
 font-variant-numeric:tabular-nums}
.res .card .chips i{font-style:normal;color:var(--pine)}
/* Op een telefoon zijn dit de enige dingen op de site die aangeraakt worden, dus
   krijgen ze de ruimte: twee vaste kolommen in plaats van een vloeiende rij (waarin
   "Splash pad" precies tegen de rechterrand aan liep), grotere vakjes, en genoeg
   hoogte per regel om er met een duim naast te kunnen zitten. */
@media(max-width:640px){
 .vrij{grid-template-columns:1fr;gap:var(--s2);padding:var(--s4) 0}
 .vinder input[type=text]{width:100%;font-size:16px;padding:8px 2px}
 .opts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s4)}
 .opts label{font-size:16px;padding:7px 0;align-items:center}
 .opts input{width:20px;height:20px}
 .vinder select{font-size:16px;padding:8px 2px}
 button.link{padding:7px 0;font-size:16px}
 .vdoen{padding-top:var(--s4)}
 .vinder .btn{padding:13px 22px;font-size:16px}}

/* footer.wrap, niet footer: het element draagt class="wrap", en .wrap zet
   margin:0 auto. Een kale footer-selector verliest dat specificiteitsduel, dus de
   marge onder de inhoud heeft nooit gewerkt — de scheidslijn plakte altijd tegen
   de laatste sectie aan. */
/* De afsluitende regel hoort op de inhoudsbreedte te liggen, net als elke
   sectiekop. Stond hij op footer.wrap zelf, dan liep hij 48 px door aan beide
   kanten, want de horizontale padding van .wrap valt binnen de rand. */
footer.wrap{margin:var(--s9) auto var(--s7);padding:0 24px;
 font-size:13px;color:var(--muted)}
.voetbak{border-top:2px solid var(--rule);padding-top:var(--s6)}
footer a{color:var(--muted)}
footer .fijn{max-width:var(--prose);margin:var(--s5) 0 0;line-height:1.7}
footer .fijn+.fijn{margin-top:var(--s2)}
details.faq:last-of-type{margin-bottom:var(--s2)}
@media(max-width:560px){.kv .row{grid-template-columns:92px 1fr}}