/* Aanvullingen voor de slim-wonen-demo bovenop kit/wereld.css (stijl A). Alleen kit-tokens, geen nieuwe kleuren buiten het papier.
   created_at: 2026-09-27T16:13:00+02:00 / status candidate
   gewijzigd: 2026-10-11 — regionoten als labels + eigen regio eerst (PORTAALOPZET r.70) + zoekveld bovenaan hub, PORTAALOPZET r.68 (.dStartZoek: ruimte rond het veld) + .dTag/.dTagGeen, PORTAALOPZET r.30 + .dTabelWrap/.dGetallen, PORTAALOPZET r.69 + .dVraag/.dVraagLabel, PORTAALOPZET r.30
   gewijzigd (vorige): 2026-10-10 — SVG-figuren bij items (manifest 3003e520); figuur op token --w-paper; #5A4E3A voor .dFiguurNoot = dezelfde letterlijke kleur als kit .wKleinDruk (kit heeft er geen token voor) */
.dMain{width:min(100%,760px);margin:0 auto;display:flex;flex-direction:column;gap:14px}
.dMidden{text-align:center}
.dStatus{align-self:center}
.wKnoppen.dKnoppen{display:flex;flex-direction:column;gap:18px}
.wKnop,.wTegel{box-sizing:border-box;min-width:0}
.wTegel .wSub{overflow-wrap:anywhere}
a.wKleinKnop{display:inline-flex;align-items:center;text-decoration:none}
a.wKleinKnop[aria-current=page]{border-color:#4FD1C5;color:#4FD1C5}
a.wKleinKnop:focus-visible,.wPapier a:focus-visible{outline:3px dashed currentColor;outline-offset:3px}
.wGroepen section{display:flex;flex-direction:column}
/* papier */
.wPapier h2{font-size:20px;margin:18px 0 6px}
.wPapier .dThema{margin:0;font:600 14px/1.2 var(--w-font);letter-spacing:.06em;text-transform:uppercase;color:#5A4E3A}
.wPapier .dKort{font-weight:500}
/* vraag van de bezoeker (PORTAALOPZET r.30): --w-paper-ink op --w-paper ≈ 17:1; label #5A4E3A ≈ 7,4:1 */
.wPapier .dVraag{margin:10px 0 0;padding:4px 0 4px 12px;border-left:4px solid var(--w-soft);font-style:italic;color:var(--w-paper-ink)}
.wPapier .dVraagLabel{font-style:normal;font-weight:600;font-size:14px;color:#5A4E3A}
.wPapier .dLijst{padding-left:1.2em}.wPapier .dLijst li{margin:6px 0}
.wPapier .dBronRef{font-size:14px;white-space:nowrap}
.wPapier .dRed{font-size:14px;color:#5A4E3A}
.wPapier .dRegio dt{font-weight:600;margin-top:8px}.wPapier .dRegio dd{margin:2px 0 0}
/* regionoten als kleine labels (PORTAALOPZET r.70); #5A4E3A op --w-paper ≈ 7,4:1 en op --w-cream ≈ 7,0:1 */
.wPapier .dRegioLabel{display:inline-block;padding:1px 8px;border:1px solid #5A4E3A;border-radius:999px;font:600 12px/1.4 var(--w-font);letter-spacing:.05em;color:#5A4E3A;background:var(--w-paper)}
.wPapier .dRegio dt.dRegioEigen,.wPapier .dRegio dd.dRegioEigen{border-left:4px solid #5A4E3A;background:var(--w-cream);padding-left:10px;padding-right:8px;margin-left:0}
.wPapier .dRegio dt.dRegioEigen{padding-top:6px;border-radius:0 10px 0 0}.wPapier .dRegio dd.dRegioEigen{padding-bottom:6px;border-radius:0 0 10px 0}
/* getallentabel uit rekenconstanten (PORTAALOPZET r.69): --w-paper-ink op --w-paper ≈ 17:1; kop op --w-cream ≈ 16:1 */
/* position:relative maakt de wrapper het bevattende blok voor de absoluut geplaatste .dVerborgen-spans in de cellen;
   zonder dat ontsnappen ze aan overflow-x:auto en geven ze paginabrede overloop op 390 px (SW-L01, afname 2026-10-21) */
.wPapier .dTabelWrap{position:relative;overflow-x:auto;margin:10px 0 4px;-webkit-overflow-scrolling:touch}
.wPapier .dGetallen{border-collapse:collapse;min-width:560px;width:100%;font-size:15px;line-height:1.4;color:var(--w-paper-ink)}
.wPapier .dGetallen caption{text-align:left;font-weight:600;padding:0 0 6px}
.wPapier .dGetallen th,.wPapier .dGetallen td{border-bottom:1px solid var(--w-soft);padding:6px 8px;text-align:left;vertical-align:top}
.wPapier .dGetallen th{background:var(--w-cream);font-weight:600}
/* Kit zet .wPapier{overflow-wrap:anywhere}; in de tabel breekt dat koppen en bron-id's midden in het woord (schermfoto 390 px, 11/10 00:54). Tabel scrollt horizontaal, dus normaal afbreken; koppen en bron-id's heel. 2026-10-11 */
.wPapier .dGetallen{overflow-wrap:normal}
.wPapier .dGetallen th,.wPapier .dGetallen td a{white-space:nowrap}
.wPapier .dGetallen .dGetal{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.wPapier .dGetallen .dRegioGeen{color:#5A4E3A;text-align:center}
/* tags als zoeklinks (PORTAALOPZET r.30): --w-paper-ink op --w-paper ≈ 17:1; gedempt #5A4E3A op --w-paper ≈ 7,4:1 */
.wPapier .dTags{display:flex;flex-wrap:wrap;gap:6px 8px;margin:4px 0}
.wPapier .dTag{display:inline-block;padding:2px 10px;border:1px solid var(--w-paper-ink);border-radius:999px;font-size:14px;line-height:1.4;color:var(--w-paper-ink);background:var(--w-paper)}
.wPapier a.dTag{text-decoration:none}.wPapier a.dTag:hover{background:var(--w-cream)}
.wPapier .dTag.dTagGeen{border-style:dashed;border-color:#5A4E3A;color:#5A4E3A}
.wPapier .dRegioEigenTekst{font-size:13px;font-weight:600;color:var(--w-paper-ink)}
.wPapier .wBronnen li{margin:6px 0}
.wPapier .dDisclaimer{margin-top:16px;border-top:1px solid var(--w-soft);padding-top:8px}
/* infographic bij een item (SVG uit ../beelden); lichte achtergrond zodat de SVG ook op het donkere thema leesbaar blijft */
.wPapier .dFiguur{margin:14px 0 6px;padding:8px;border-radius:14px 18px 12px 16px;background:var(--w-paper);border:1px solid var(--w-soft)}
.wPapier .dFiguur img{display:block;max-width:100%;width:100%;height:auto;border-radius:10px;background:var(--w-paper)}
.wPapier .dFiguur figcaption{margin-top:6px;font-size:14px;line-height:1.4;color:var(--w-paper-ink)}
.wPapier .dFiguurNoot{color:#5A4E3A;font-style:italic}
/* rekenhulp als papierlaag */
.dVelden{display:grid;gap:12px}
.dVeld{display:flex;flex-direction:column;gap:4px;font-weight:500}
.dInvoer{box-sizing:border-box;width:100%;min-height:48px;border-radius:14px;border:2px solid var(--w-mute);background:#fff;color:var(--w-paper-ink);padding:0 12px;font:inherit}
.dInvoer:focus-visible{outline:3px dashed var(--w-paper-ink);outline-offset:2px}
.dUitkomst{display:block;margin-top:14px;padding:10px 14px;border-radius:14px 18px 12px 16px;border:2px dashed var(--w-mute)}
.dUitkomst .dHoofd{font-size:19px}
.dFout{color:#8A1C1C;font-weight:600}
/* zoeken */
.dZoek{display:flex;gap:8px;align-items:center}.dZoek input{flex:1;min-width:0}
.dVerborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dStartZoek{margin:4px 0 10px}
.dTreffers{display:flex;flex-direction:column;gap:12px}
@media (min-width:640px){.dVelden{grid-template-columns:repeat(2,minmax(0,1fr))}}