:root {
  --navy: #173B65;
  --blauw: #3B78A1;
  --teal: #307C6C;
  --papier: #F3EFE5;
  --wit: #FFFFFF;
  --roest: #A84B1F;
  --grijs: #4A4A4A;
  --link: #356B90;
  --rand: 2px solid var(--blauw);  /* [w2-huisstijl-2] --rand met kleur */
  --hoek: 10px;
}
*, *::before, *::after { box-sizing: border-box; }
/* De basismaat staat op <html> en niet op <body>: 1rem rekent altijd vanaf de WORTEL.
   Stond hij op body, dan bleef 1rem de 16 px van de browser en kwam elke maat die in
   rem geschreven is (citaten, voettekst, menu) stiekem onder de eis van stijl.json uit.
   Gemeten in een echte browser op 390 px: 144 tekstknopen te klein. */
html {
  -webkit-text-size-adjust: 100%;
  font-size: 18px;
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--navy);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}
h1, h2, h3 { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-weight: 700; line-height: 1.25; color: var(--navy); }
h1 { font-size: 2.1rem; margin: 0 0 .6rem; }
h2 { font-size: 1.5rem; margin: 2.2rem 0 .7rem; }
h3 { font-size: 1.18rem; margin: 1.5rem 0 .4rem; }
p, li { color: var(--navy); }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--link); outline-offset: 2px;
}
.wrap { max-width: 52rem; margin: 0 auto; padding: 0 1.1rem; }

/* ---- balk bovenaan: de site is in voorbereiding */
.voorbereiding {
  background: var(--navy); color: #fff; font-size: .98rem; line-height: 1.5;
  padding: .7rem 0;
}
.voorbereiding .wrap { display: flex; gap: .6rem; align-items: flex-start; }
.voorbereiding strong { color: #fff; }

/* ---- kopbalk + menu */
header.kop { border-bottom: 2px solid var(--blauw); background: var(--wit); }
header.kop .wrap { padding-top: 1rem; padding-bottom: .4rem; }
nav.menu ul { list-style: none; margin: .7rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem .35rem; }
nav.menu a {
  display: block; padding: .55rem .75rem; text-decoration: none;
  border: 2px solid var(--blauw); border-radius: var(--hoek);
  background: var(--papier); font-size: 1rem; min-height: 44px; line-height: 1.9;
}
nav.menu a[aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.ondertitel { margin: .1rem 0 0; color: var(--grijs); font-size: 1rem; }

/* ---- kopknoppen rechtsboven (werker #2, 30-10-2026) ----
   de opdrachtgever 21:20: "ik wil rechtsbovenin 2 knoppen. 1 knop om te registreren en 1 voor
   login." Op een breed scherm staan ze naast het logo tegen de rechterkantlijn; op een
   telefoon is daar geen plek (het logo vult daar de hele kolom), dus zakken ze naar een
   eigen regel ERONDER - nog steeds rechts en nog steeds boven het menu. */
.kopbalk { display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: .5rem .9rem; }
.kopmerk { flex: 1 1 300px; min-width: 0; max-width: 520px; }
.kopknoppen { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end;
  margin-left: auto; }
.kopknoppen .knop { margin: 0; padding: .6rem 1rem; font-size: 1rem;
  line-height: 1.6; box-shadow: 2px 2px 0 var(--navy); }
@media (max-width: 760px) { .kopknoppen { width: 100%; } }

/* ---- blokken */
main { padding: 1.6rem 0 2.5rem; }
.lead { font-size: 1.14rem; }
.kaart {
  background: var(--wit); border: 2px solid var(--blauw); border-radius: var(--hoek);
  padding: 1.1rem 1.1rem .9rem; margin: 1.2rem 0;
}
.kaart > :first-child { margin-top: 0; }
.kaart > :last-child { margin-bottom: 0; }
.let-op { border-color: var(--roest); border-width: 3px; }
.let-op > h2::before, .let-op > h3::before { content: "⚠ "; }
.stil { color: var(--grijs); font-size: .97rem; }

/* ---- PRIJSKNOP-W2-2026-11-01: de twee knoppen onder "Wat het kost" staan naast
   elkaar en zijn EVEN GROOT. Er staat hier met opzet GEEN maat, GEEN kleur en GEEN
   font-size: alles komt van .knop, dus de gratis knop kan nooit kleiner worden dan de
   betaalknop. Op een smal scherm vallen ze onder elkaar en worden ze even breed. */
.knoprij-prijs { display: flex; flex-wrap: wrap; gap: .2rem .4rem; }
.knoprij-prijs > .knop { margin-right: 0; }
@media (max-width: 560px) {
  .knoprij-prijs > .knop { flex: 1 1 100%; justify-content: center; text-align: center; }
}

/* ---- knop */
.knop {
  display: inline-block; text-decoration: none; font-weight: 700;
  background: var(--teal); color: #fff; border: 2px solid var(--navy);
  border-radius: var(--hoek); padding: .8rem 1.2rem; min-height: 48px;
  box-shadow: 3px 3px 0 var(--navy); margin: .2rem .4rem .6rem 0;
}
.knop.tweede { background: var(--wit); color: var(--navy); }
.knop[aria-disabled="true"], .knop:disabled {
  background: #e7e3dc; color: var(--grijs); border-color: var(--grijs);
  box-shadow: none; cursor: not-allowed;
}

/* ---- citaat uit de wet */
blockquote.wet {
  margin: .6rem 0; padding: .6rem .9rem; background: var(--papier);
  border-left: 5px solid var(--blauw); border-radius: 0 var(--hoek) var(--hoek) 0;
  font-size: 1rem;
}
blockquote.wet p { margin: 0 0 .3rem; }

/* ---- het uitklapvenstertje om een wetcitaat heen (werker #2, 30-10-2026) */
details.bronuit { margin: .6rem 0; }

/* ---- B1-W2-2026-10-31: pictogram + klapje 'Meer weten?' */
svg.ic { flex: 0 0 auto; vertical-align: -.18em; }
h1.metic, h2.metic, h3.metic { display: flex; align-items: flex-start; gap: .5rem; }
h1.metic > span, h2.metic > span, h3.metic > span { display: block; }
h2.metic > svg.ic-kop, h3.metic > svg.ic-kop { margin-top: .12em; }
a.knop.metic, .knop.metic { display: inline-flex; align-items: center; gap: .55rem; }
details.meer { margin: .7rem 0 .2rem; }
details.meer > summary {
  cursor: pointer; display: flex; align-items: center; gap: .45rem;
  color: var(--link, #356B90); font-weight: 600; padding: .35rem 0; list-style: none;
}
details.meer > summary::-webkit-details-marker { display: none; }
details.meer > summary::after { content: '›'; transform: rotate(90deg); margin-left: .1rem; }
details.meer[open] > summary::after { transform: rotate(-90deg); }
details.meer > summary:hover { color: var(--navy); }
details.meer > p { margin: .45rem 0; }
details.meer[open] { border-left: 3px solid var(--blauw, #3B78A1); padding-left: .8rem; }
@media print { details.meer > summary { display: none; } details.meer::details-content { content-visibility: visible; } }
/* ---- einde B1-W2-2026-10-31 */

details.bronuit > summary {
  cursor: pointer; color: var(--grijs); font-size: .97rem;
  padding: .45rem 0; min-height: 44px; line-height: 1.6; list-style-position: outside;
}
details.bronuit > summary:hover { color: var(--navy); }
details.bronuit[open] > summary { margin-bottom: .1rem; }
details.bronuit > blockquote.wet:first-of-type { margin-top: .2rem; }
/* Op PAPIER staat alles open: een bewoner drukt dit af voor zijn dossier, en een
   wettekst die alleen op het scherm bestaat is daar geen bewijs. */
@media print {
  details.bronuit > summary { display: none; }
  /* Chromium sluit een <details> met content-visibility op ::details-content, NIET met
     display:none op de kinderen - een regel op de kinderen doet hier dus niets (zelf
     gemeten: 0 van de 22 citaten op papier). Oudere browsers slaan deze regel stil
     over; daarvoor staat de beforeprint-haak in /static/uitklap.js. */
  details.bronuit::details-content { content-visibility: visible; }
}
blockquote.wet cite { display: block; font-style: normal; color: var(--grijs); font-size: .93rem; }

/* ---- beeld */
figure.beeld { margin: 1rem 0; }
figure.beeld img {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--blauw); border-radius: var(--hoek); background: var(--papier);
}
figure.beeld figcaption { color: var(--grijs); font-size: .9rem; margin-top: .35rem; }

/* ---- klachtsoorten */
.zoekveld { margin: 1.2rem 0; }
.zoekveld label { display: block; font-weight: 700; margin-bottom: .3rem; }
.zoekveld input {
  width: 100%; padding: .75rem .8rem; font-size: 1.05rem; font-family: inherit;
  border: 2px solid var(--navy); border-radius: var(--hoek); background: var(--wit); color: var(--navy);
  min-height: 48px;
}
.telling { margin: .5rem 0 0; color: var(--grijs); }
details.soort {
  background: var(--wit); border: 2px solid var(--blauw); border-radius: var(--hoek);
  margin: .6rem 0; padding: .1rem .9rem;
}
details.soort > summary {
  cursor: pointer; padding: .75rem 0; font-weight: 700; font-size: 1.06rem;
  min-height: 44px; line-height: 1.5;
}
details.soort .herken { color: var(--grijs); font-style: italic; margin: 0 0 .6rem; }
.merk-rij { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .2rem; }
.merkje {
  display: inline-block; font-size: .86rem; padding: .22rem .55rem;
  border: 2px solid var(--blauw); border-radius: var(--hoek); background: var(--papier);
  color: var(--navy);
}
.merkje.hc-nee { border-color: var(--grijs); color: var(--grijs); }
.merkje.gezondheid { border-color: var(--roest); }

/* ---- stappen */
ol.stappen { list-style: none; margin: 0; padding: 0; counter-reset: stap; }
ol.stappen > li {
  background: var(--wit); border: 2px solid var(--blauw); border-radius: var(--hoek);
  padding: 1rem 1.1rem; margin: 1rem 0;
}
ol.stappen > li > h2 { margin-top: 0; }
.stapnr {
  display: inline-block; background: var(--navy); color: #fff; font-weight: 700;
  border-radius: var(--hoek); padding: .1rem .6rem; margin-right: .5rem; font-size: 1rem;
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}
.termijn { display: block; color: var(--grijs); margin: .2rem 0 .6rem; }
/* ---- [w5-instructiebeeld] een plaatje bij een stap. De regels gelden ALLEEN voor een
   stapvakje dat er een heeft (li.met-beeld); een stap zonder beeld blijft precies zoals
   hij was. Op een telefoon gaat het beeld ONDER de tekst staan: boven de tekst zou de
   lezer eerst langs vijf plaatjes moeten scrollen voor hij stap 1 ziet. */
ol.stappen > li.met-beeld { display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: .9rem; }
ol.stappen > li.met-beeld > .stap-tekst { flex: 1 1 9rem; min-width: 0; }
/* 9rem en niet 14rem: de leeskolom van /meten/ is op een scherm van 1280 px maar
   412 px breed (gemeten in een echte browser), en met 14rem + 7rem + de tussenruimte
   past het beeld er niet meer naast en valt het eronder. */
ol.stappen > li.met-beeld > .stap-tekst > *:first-child { margin-top: 0; }
ol.stappen > li.met-beeld > figure.stap-beeld { flex: 0 0 7rem; width: 7rem; margin: 0;
  order: 2; }
ol.stappen > li.met-beeld > figure.stap-beeld img { width: 100%; height: auto;
  display: block; border-radius: var(--hoek); }
@media (max-width: 34rem) {
  ol.stappen > li.met-beeld { flex-direction: column; }
  ol.stappen > li.met-beeld > .stap-tekst { order: 1; flex: 1 1 100%; }
  ol.stappen > li.met-beeld > figure.stap-beeld { order: 2; flex: 1 1 100%; width: 100%;
    max-width: 14rem; }
}

/* ---- formulier (staat uit) */
fieldset.veldblok {
  border: 2px solid var(--blauw); border-radius: var(--hoek); background: var(--wit);
  margin: 1.2rem 0; padding: .9rem 1rem 1.1rem;
}
fieldset.veldblok legend { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-weight: 700; font-size: 1.2rem; padding: 0 .4rem; }
.veld { margin: 1rem 0; }
.veld > label, .veld > .vraag { display: block; font-weight: 700; margin-bottom: .3rem; }
.veld .hulp { color: var(--grijs); font-size: .95rem; margin: .25rem 0 .4rem; }
.veld input[type=text], .veld input[type=email], .veld input[type=number],
.veld select, .veld textarea {
  width: 100%; padding: .7rem .75rem; font-size: 1.03rem; font-family: inherit;
  border: 2px solid var(--grijs); border-radius: var(--hoek); background: #f0eeea;
  color: var(--grijs); min-height: 48px;
}
.veld textarea { min-height: 7rem; }
.keuzes { list-style: none; margin: .3rem 0 0; padding: 0; }
.keuzes li { margin: .35rem 0; }
.keuzes label { display: flex; gap: .55rem; align-items: flex-start; color: var(--grijs); }
.gezondheidswacht {
  border: 3px solid var(--roest); border-radius: var(--hoek);
  background: var(--papier); padding: .7rem .85rem; margin: .5rem 0;
}
.gezondheidswacht p { margin: 0 0 .4rem; }
.gezondheidswacht p:last-child { margin-bottom: 0; }

/* ---- de onderdelen-matrix en het open formulier (30-10-2026) */
.onderdeel { margin: .6rem 0 1.2rem; }
div.onderdeel {
  background: var(--papier); border-left: 5px solid var(--teal);
  border-radius: 0 var(--hoek) var(--hoek) 0; padding: .2rem .9rem .6rem;
}
div.onderdeel > h3 { margin-top: .8rem; }
.veldfout { color: var(--roest); font-weight: 700; margin: .3rem 0 0; }
.veld.mis > label, .veld.mis > .vraag { color: var(--roest); }
.woordwacht {
  background: #f6e8c8; border: 2px solid var(--roest); border-radius: var(--hoek);
  padding: .5rem .7rem; margin: .4rem 0 0;
}
form.meldform .veld input[type=text], form.meldform .veld input[type=email],
form.meldform .veld input[type=number], form.meldform .veld input[type=month],
form.meldform .veld textarea {
  background: var(--wit); color: var(--navy); border-color: var(--navy);
}
form.meldform .keuzes label { color: var(--navy); min-height: 44px; align-items: center; }
form.meldform .veld input[type=checkbox], form.meldform .veld input[type=radio] {
  width: 1.4rem; height: 1.4rem; flex: 0 0 auto;
}
form.meldform button[type=submit] { font: inherit; font-weight: 700; cursor: pointer; }
.fotolijst { list-style: none; margin: .5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; }
.fotolijst li { font-size: .95rem; }
.fotolijst img { display: block; width: 7rem; height: 7rem; object-fit: cover;
  border: 2px solid var(--blauw); border-radius: var(--hoek); }
.rapport .rdatum, .rapport .rcode { margin: .3rem 0 1rem; }
.rlijst { margin: 0; }
.rlijst .rrij { border-bottom: 1px solid var(--blauw); padding: .45rem 0; }
.rlijst dt { font-weight: 700; }
.rlijst dd { margin: .15rem 0 0; }
.rfotos { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0 0; }
.rfotos img { display: block; width: 9rem; height: 9rem; object-fit: cover;
  border: 2px solid var(--blauw); border-radius: var(--hoek); }
.rfotos figcaption { font-size: .9rem; color: var(--grijs); }
@media print {
  .voorbereiding, nav.menu, footer.voet, .nietdrukken, .ssw-logo { display: none; }
  body { background: #fff; }
  .kaart { break-inside: avoid; border-color: #666; }
}

/* ---- privacy */
.verklaring table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 1rem; }
.verklaring th, .verklaring td {
  border: 1px solid var(--blauw); padding: .5rem .6rem; text-align: left; vertical-align: top;
}
.verklaring th { background: var(--papier); }
.verklaring h2 { font-size: 1.35rem; }
mark.nogin {
  background: #f6e8c8; border: 2px dashed var(--roest); border-radius: var(--hoek);
  padding: .15rem .4rem; color: var(--navy);
}

/* ---- fase 1: de termijnrekenhulp en de open brief (werker #2, 30-10-2026) */
.rekenhulp {
  background: var(--wit); border: 3px solid var(--teal); border-radius: var(--hoek);
  padding: 1rem 1.1rem 1.1rem; margin: 1.2rem 0;
}
.rekenhulp label { display: block; font-weight: 700; margin-bottom: .3rem; }
.rekenhulp .hulp { color: var(--grijs); font-size: .95rem; margin: .25rem 0 .5rem; }
.rekenhulp input[type=date], .invulblok input[type=text], .invulblok input[type=date],
.invulblok textarea {
  width: 100%; padding: .7rem .75rem; font-size: 1.05rem; font-family: inherit;
  border: 2px solid var(--navy); border-radius: var(--hoek);
  background: var(--wit); color: var(--navy); min-height: 48px;
}
.invulblok textarea { min-height: 8rem; }
.rekenhulp button, .knoprij button, .invulblok button { font: inherit; cursor: pointer; }
dl.uitslag { margin: 1.2rem 0 0; }
dl.uitslag > div {
  background: var(--wit); border: 2px solid var(--blauw); border-radius: var(--hoek);
  padding: .8rem .95rem; margin: .7rem 0;
}
dl.uitslag > div.zwaar { border-color: var(--roest); border-width: 3px; }
dl.uitslag dt { font-weight: 700; font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-size: 1.1rem; }
dl.uitslag dd { margin: .3rem 0 0; }
dl.uitslag .datum {
  display: block; font-size: 1.3rem; font-weight: 700; font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  color: var(--navy); margin: .15rem 0 .35rem;
}
dl.uitslag .datum:empty::before { content: "—"; color: var(--grijs); }
dl.uitslag .wat { color: var(--grijs); }
.knoprij { display: flex; flex-wrap: wrap; gap: .2rem .4rem; margin: .8rem 0 .2rem; }
.melding { margin: .6rem 0 0; font-weight: 700; }
.melding.fout { color: var(--roest); }
.invulblok .veldrij { margin: 1rem 0; }
.invulblok .vinkrij label { display: flex; gap: .55rem; align-items: center; font-weight: 700;
  min-height: 44px; }
.invulblok input[type=checkbox] { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; }
pre.brieftekst {
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 1rem; line-height: 1.7; color: var(--navy);
  background: var(--wit); border: 2px solid var(--blauw); border-radius: var(--hoek);
  padding: 1rem 1.1rem; margin: 0;
}
.brieflengte { color: var(--grijs); font-size: .95rem; margin: .5rem 0 0; }
@media print {
  .rekenhulp, .invulblok, .knoprij { display: none; }
  body.alleen-brief header.kop, body.alleen-brief main > .wrap > *:not(.briefkaart) {
    display: none;
  }
  body.alleen-brief .briefkaart { border: none; padding: 0; margin: 0; }
  pre.brieftekst { border: none; padding: 0; }
}

/* ---- voet */
footer.voet { border-top: 2px solid var(--blauw); background: var(--wit); padding: 1.4rem 0 2.2rem; }
footer.voet p { color: var(--grijs); font-size: 1rem; margin: .3rem 0; }

@media (max-width: 30rem) {
  h1 { font-size: 1.72rem; }
  h2 { font-size: 1.32rem; }
  .verklaring table, .verklaring thead, .verklaring tbody,
  .verklaring th, .verklaring td, .verklaring tr { display: block; }
  .verklaring thead { display: none; }
  .verklaring td { border-top: none; }
  .verklaring tr { border: 1px solid var(--blauw); border-radius: var(--hoek);
                   margin: .6rem 0; padding: .2rem; }
  .verklaring td::before { content: attr(data-kop) ": "; font-weight: 700; }
}

/* --- de gemeente-laag (werker #2, 30-10-2026) ------------------------------- */
.gemlijst { list-style: none; padding: 0; margin: .4rem 0 0;
  display: grid; gap: .1rem .9rem; grid-template-columns: 1fr; }
@media (min-width: 30rem) { .gemlijst { grid-template-columns: 1fr 1fr; } }
@media (min-width: 52rem) { .gemlijst { grid-template-columns: 1fr 1fr 1fr; } }
.gemlijst li { padding: .12rem 0; }
.prov { margin: .7rem 0; }
.prov > summary { cursor: pointer; font-weight: 700; padding: .45rem .2rem; }
.gemtreffers { list-style: none; padding: 0; margin: .5rem 0 0; }
.gemtreffers li { padding: .35rem 0; border-bottom: 1px solid var(--lijn, #d8dde3); }
.gemtreffers .plaats { color: var(--grijs); }
.gemfeiten { margin: .4rem 0 0; }
.gemfeiten div { padding: .3rem 0; border-bottom: 1px solid var(--lijn, #d8dde3); }
.gemfeiten div:last-child { border-bottom: 0; }
.gemfeiten dt, .gemfeiten .wat { font-weight: 700; }
.gemfeiten .waarde { overflow-wrap: anywhere; }
.plaatsen { overflow-wrap: anywhere; }

    /* ---------- woningcorporaties OPGESOMD per gemeente (werker #4, 31-10-2026)
       de opdrachtgever: "geen uitklap venster maar netjes opgesomt op de pagina met alle
       contactgegevens erbij en link naar klacht indienen". Er is hier met opzet
       geen <select> en geen dichte <details>: alles staat open op de pagina. */
    .corpgroep{border:0;margin:.2rem 0 0;padding:0;min-width:0}
    .corpgroep>legend{font-weight:700;padding:0;margin:0 0 .5rem}
    ul.corplijst-op{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
    @media (min-width:48rem){ul.corplijst-op{grid-template-columns:repeat(2,minmax(0,1fr))}}
    li.corpitem{border:2px solid var(--lijn);border-radius:var(--hoek);
      background:var(--wit);padding:.85rem .9rem;min-width:0}
    li.corpitem>h3{margin:0 0 .15rem;font-size:1.12rem;line-height:1.25}
    li.corpitem .corpaant{margin:0 0 .5rem;color:var(--stil);font-size:.95rem}
    li.corpitem .corpaangemeld{color:var(--stil);font-size:.95rem}
    dl.corpcontact{margin:0 0 .55rem;display:grid;grid-template-columns:auto 1fr;
      gap:.15rem .6rem;font-size:.97rem}
    dl.corpcontact dt{font-weight:700;margin:0}
    dl.corpcontact dd{margin:0;min-width:0;overflow-wrap:break-word}
    /* op een telefoon is de tweede kolom te smal: dan brak "www.rijswijkwonen.nl"
       midden in het adres af. Daar staat het label boven de waarde. */
    @media (max-width:28rem){
      dl.corpcontact{grid-template-columns:1fr;gap:0}
      dl.corpcontact dt{margin:.3rem 0 0}
      dl.corpcontact dt:first-child{margin-top:0}
    }
    li.corpitem .corpgeen{margin:0 0 .55rem;color:var(--stil);font-size:.95rem}
    li.corpitem .corpfusie{margin:0 0 .55rem;font-size:.95rem;font-weight:600}
    p.corpklachtrij{margin:0}
    p.corpklachtrij a{font-weight:700}
    p.corpkiesrij{margin:.55rem 0 0;padding-top:.5rem;border-top:1px solid var(--lijn)}
    p.corpkiesrij label{display:flex;align-items:center;gap:.45rem;cursor:pointer;
      font-weight:700}
    p.corpkiesrij input{width:1.15rem;height:1.15rem;flex:0 0 auto;accent-color:var(--accent)}
    p.corpkiesrij input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
    li.corpitem.corpnietbij{background:var(--papier)}
    .corpuit{margin:.6rem 0 0;font-weight:700}
    .corpvraag{margin:.9rem 0 0}
    .corpvraag .veld{margin:0 0 .7rem}
    .corpvraag label{display:block;font-weight:700;margin:0 0 .2rem}
    .corpvraag input{width:100%;max-width:34rem;padding:.55rem .5rem;font:inherit;
      border:2px solid var(--lijn);border-radius:var(--hoek);background:var(--wit);
      color:var(--tekst)}
    .corpvraag input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
    .corpvraag .hint{font-weight:400;color:var(--stil);font-size:.95rem;margin:.15rem 0 0}
    .corpvraag textarea{width:100%;min-height:11rem;padding:.6rem;font:inherit;
      border:2px solid var(--lijn);border-radius:var(--hoek);background:var(--wit);
      color:var(--tekst)}
    .corpfout{color:var(--roest);font-weight:700;margin:.4rem 0 0}
    .corpmelding{margin:.4rem 0 0;font-weight:700}
    @media (max-width:430px){.corpvraag input{max-width:100%}}
    
    .hulporg{border-left:6px solid var(--accent)}
    .hulplijst{list-style:none;margin:.6rem 0 0;padding:0}
    .hulpkaart{border-top:1px solid var(--lijn);padding:.9rem 0 .2rem}
    .hulpkaart:first-child{border-top:0;padding-top:.2rem}
    .hulpkaart h3{margin:0 0 .3rem;font-size:1.08rem}
    .hulpkaart h3 .merkje{vertical-align:middle}
    .hulpkaart p{margin:.35rem 0}
    .hulpfeiten{color:var(--tekst)}
    .hulpletop{border-left:4px solid var(--lijn);padding-left:.6rem}
    .hulpgemeente{background:rgba(0,0,0,.03);border-radius:8px;padding:.8rem .7rem}
    .hulpstap{margin:.6rem 0 0;padding:.5rem .7rem;border-left:4px solid var(--accent);
      background:rgba(0,0,0,.03);border-radius:0 8px 8px 0}
    details.hulpbron{margin:.5rem 0 .2rem}
    details.hulpbron summary{cursor:pointer;color:var(--stil)}
    .hulpcitaat{margin:.5rem 0;padding:.5rem .7rem;border-left:4px solid var(--lijn)}
    .hulpcitaat p{margin:0 0 .3rem}
    .hulpcitaat cite{font-style:normal;color:var(--stil);font-size:.95rem;word-break:break-word}
    .hulpvolgorde{margin:.5rem 0 0;padding-left:1.2rem}
    .hulpvolgorde li{margin:.35rem 0}
    @media (max-width:430px){.hulpkaart .knop{display:block;text-align:center}}
    
    .hulpkaart.hulpzelf{background:var(--wit);border:2px solid var(--teal);
      border-left-width:8px;border-radius:var(--hoek);padding:.9rem .8rem .3rem;
      margin:.6rem 0}
    .hulpkaart.hulpzelf:first-child{padding-top:.9rem}
    .merkje.eigenmerk{border-color:var(--teal);border-width:3px;font-weight:700}
    
/* [w2-logokleur-1] het vlak van kop, voet en menuknop - uit huisstijl.json -> oppervlak */
    header.kop { background: var(--papier); }
    footer.voet { background: var(--papier); }
    nav.menu a { background: var(--wit); }

/* [w2-huisstijl-3] huisstijl-laag */
    /* Huisstijl-laag, werker #2 30-10-2026, uit data-de opdrachtgever/ssw-huisstijl-2026-10-30/huisstijl.json.
       Staat ACHTERAAN met opzet: een latere regel wint bij gelijke specificiteit, dus hoeft er
       geen bestaande regel herschreven te worden terwijl er andere werkers in dit bestand zitten. */

    /* Vier variabelen werden gebruikt maar nergens gedefinieerd; een var() die niet bestaat maakt
       de HELE declaratie ongeldig, dus 20 regels deden niets (o.a. de rand om de keuzelijst op de
       340 gemeentepaginas). Hier als alias van de huisstijl, zodat niemands regel herschreven hoeft. */
    :root {
      --accent: var(--teal);
      --lijn: var(--blauw);
      --stil: var(--grijs);
      --tekst: var(--navy);
    }

    /* De achtergrondfoto. Ondoorzichtige kaarten liggen eroverheen, dus hij is alleen in de
       marges te zien en raakt de leesbaarheid van de tekst niet. Uit = "aan": false in
       data-de opdrachtgever/ssw-huisstijl-2026-10-30/huisstijl.json, dan blijft de kale papierkleur over. */
    body { background-color: #F3EFE5; background-image: url('/static/achtergrond/c-papierlagen.webp');
           background-size: cover; background-position: center top;
           background-attachment: fixed; background-repeat: no-repeat; }
    @media (max-width: 700px) { body { background-attachment: scroll; } }
    @media print { body { background-image: none !important; } }

    /* --- alles afgerond, zoals de knoppen (de opdrachtgever: "geen hoekige dingen, maar afgerond") --- */
    blockquote.wet { border-radius: 10px; }
    .voorbereiding, table, .rlijst, figure, img, .ab-beeld img { border-radius: 8px; }
    table { border-collapse: separate; border-spacing: 0; overflow: hidden; }
    thead th:first-child { border-top-left-radius: 8px; }
    thead th:last-child  { border-top-right-radius: 8px; }
    tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
    tbody tr:last-child td:last-child  { border-bottom-right-radius: 8px; }

    /* --- alle tekst op EEN kantlijn (de opdrachtgever: "lijn het uit") ---
       Een kaart met een dikkere accentbalk links duwde zijn tekst verder naar binnen dan de kaart
       ernaast. Dat viel niet op zolang GEEN kaart een zichtbare rand had; nu wel. De som van
       rand+padding is daarom op elke variant gelijk. Maten uit huisstijl.json -> uitlijning. */
    .kaart.hulporg { padding-left: calc(21.8px - 6px); padding-right: calc(21.8px - 6px); }
    .kaart.let-op { padding-left: calc(21.8px - 3px); padding-right: calc(21.8px - 3px); }

    /* --- verschil in kleuren: elk soort blok zijn eigen heel lichte tint --- */
    .fam-gewoon { background: #FFFFFF; border-color: var(--blauw); }
    .fam-uitleg { background: #F2F6F9; border-color: var(--blauw); }
    .fam-doen { background: #EFF5F4; border-color: var(--teal); }
    .fam-letop { background: #FBF2EA; border-color: var(--roest); }
    .fam-formulier { background: #F8F9FA; border-color: var(--blauw); }

    /* --- waar je TYPT is wit met een rand; de VRAAG erboven heeft een eigen vlak ---
       de opdrachtgever 30-10: "alles is alleen maar wit op wit, dan zie je geen verschil." */
    .veld, fieldset.veldblok .veld { background: #F2F6F9; border-radius: 8px;
        padding: .7rem .8rem; border: 1px solid rgba(59,120,161,.35); }
    .veld > label, .veld > .vraag, .veld > legend { font-weight: 700; color: var(--navy); }
    .veld input[type=text], .veld input[type=email], .veld input[type=number],
    .veld input[type=date], .veld input[type=month], .veld select, .veld textarea,
    .rekenhulp input, .invulblok input, .invulblok textarea, form input[type=text],
    form input[type=email], form input[type=number], form input[type=date], form textarea, form select,
    main select, main input[type=text], main input[type=email], main input[type=number],
    main input[type=date], main input[type=month], main textarea {
        background: #FFFFFF; border: 2px solid #3B78A1; border-radius: 8px;
        box-shadow: inset 0 2px 0 rgba(23,59,101,.07); color: var(--navy); }
    /* een typveld heeft overal DEZELFDE hoek; vinkjes en keuzerondjes houden hun eigen vorm */
    input[type=text], input[type=email], input[type=number], input[type=date],
    input[type=month], input[type=search], input[type=tel], input[type=url],
    textarea, select { border-radius: 8px; }
    .veld input::placeholder, .veld textarea::placeholder,
    form input::placeholder, form textarea::placeholder { color: #7c8694; opacity: 1; }
    .veld input:focus, .veld textarea:focus, .veld select:focus,
    form input:focus, form textarea:focus, form select:focus,
    main select:focus, main input:focus, main textarea:focus {
        outline: none; border-color: #307C6C; box-shadow: 0 0 0 3px rgba(48,124,108,.45); }
    /* een veld dat (nog) dicht staat blijft herkenbaar dicht */
    .veld input:disabled, .veld textarea:disabled, .veld select:disabled,
    form input:disabled, form textarea:disabled, form select:disabled {
        background: #efedea; border-color: #b9b6b1; color: #6d6a66; box-shadow: none; cursor: not-allowed; }

    
    .hulpkaart { display: flow-root; }
    .hulpbeeld { margin: 0 0 .6rem; }
    .hulpbeeld img { display: block; width: 100%; height: auto; border-radius: var(--hoek);
                     border: 1px solid var(--lijn); background: var(--papier); }
    @media (max-width: 560px) { .hulpbeeld { max-width: 18rem; } }
    @media (min-width: 561px) {
      .hulpbeeld { float: right; width: 11rem; margin: .1rem 0 .6rem .9rem; }
    }
    @media print { .hulpbeeld { float: none; max-width: 11rem; } }
    
.briefadres{border:2px solid;border-radius:10px;padding:1.1rem;margin:0 0 1.4rem}
.briefadres h3{margin-top:0}
.ba-rij{display:flex;flex-wrap:wrap;gap:.9rem;margin:.6rem 0 .2rem}
.ba-rij span{display:flex;flex-direction:column;flex:1 1 9rem;min-width:7rem}
.ba-rij input{max-width:100%}
.ba-rij .hulp{display:block;flex:0 0 auto;margin:.25rem 0 0}
.ba-keuze{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--lijn)}
.ba-keuze label{display:block;margin-top:.6rem}
.ba-keuze select{display:block;width:100%;max-width:34rem;margin-top:.25rem}
@media print{.briefadres{display:none}}

    /* ---- beeld en tekst om en om (werker #2, 30-10-2026) */
    .ab-blok{display:flex;flex-wrap:wrap;align-items:flex-start;
      gap:clamp(14px,2.5vw,28px);margin:0}
    .ab-blok>.ab-tekst{flex:1 1 300px;min-width:0}
    .ab-blok>.ab-tekst>*:first-child{margin-top:0}
    .ab-blok>figure.ab-beeld{flex:1 1 300px;min-width:0;margin:0}
    .ab-blok>figure.ab-beeld img{width:100%;height:auto}
    /* [w4-hero-1] werker #4, 31-10-2026, op de schermafdruk van 01:47 ("video klopt niet
       met de rest van de uitlijning"). Het kopbeeld brak boven 760 px HALF uit de wrap:
       gemeten op 1280 px stond zijn rand op 50,0 px terwijl de negen andere omlijnde kaders
       op die pagina op 191,8 px staan - 141,8 px verschil, en rechts liep hij er net zo ver
       voorbij. Onder 760 px deed de formule zelf al niets (rand 19,8 px, gelijk aan de
       kaarten), dus dit maakt alle breedtes gelijk aan elkaar.
       NIET van rand tot rand gemaakt: over 361 paden x 2 breedtes (722 metingen) is dit het
       ENIGE kader dat buiten de wrap stak - een beeld tot de schermrand zou hier dus een
       nieuwe uitzondering zijn in plaats van een kantlijn. [w4-hero-1-einde] */
    figure.ab-hero{margin:1.2rem 0 1.8rem}
    /* [w2-herolus-3] de knop onder een hero die maar een keer afspeelt. Zelfde maatvoering
       als .knop elders, maar los gehouden zodat een wijziging daar deze niet verschuift. */
    .ab-herknop{display:block;margin:.6rem auto 0;padding:.5rem 1.1rem;font:inherit;
      font-weight:600;color:var(--navy);background:var(--wit);
      border:2px solid var(--blauw);border-radius:var(--hoek);cursor:pointer}
    .ab-herknop:hover,.ab-herknop:focus{background:var(--papier)}
    .ab-herknop[hidden]{display:none}
    figure.ab-hero video,figure.ab-hero img{display:block;width:100%;height:auto;
      object-fit:cover;border:2px solid var(--blauw);border-radius:var(--hoek);
      background:var(--papier)}
    figure.ab-gemeente img{width:100%;height:auto}
    /* ---- verspringen OVERAL (werker #3, 30-10-2026, spraak de opdrachtgever 17:13)
       Een blok ZONDER beeld krijgt DEZELFDE wikkel met alleen de tekstkolom, links en
       afgetopt. Harde les van zachtaan (26-10-2026): een kop zonder foto bleef daar in de
       smalle kolom staan en begon 230 px verder naar rechts dan de blokken eronder.
       De aftopping staat in _AB_SOLO_MAX en nergens anders. */
    .ab-blok>.ab-tekst.ab-alleen{flex:1 1 100%;max-width:min(52rem,100%)}
    /* ---- volbreedte (werker #3, 30-10-2026, de opdrachtgever 23:03 "bij bepaalde kopjes geen foto")
       In een blok met een formulier, een keuzelijst of een kaartenrij mag het beeld niet
       NAAST de tekst staan: dan wordt het formulier geknepen. Hier staat het beeld BOVEN de
       kop over de volle breedte en houdt de tekstkolom de hele breedte. Welke pagina's dit
       krijgen staat in volbreedte.json (DATA), niet hier. */
    .ab-blok.ab-vol{flex-wrap:wrap}
    .ab-blok.ab-vol>figure.ab-beeld{flex:1 1 100%;max-width:100%;margin:0 0 .9rem}
    .ab-blok.ab-vol>figure.ab-beeld img{width:100%;height:auto;max-height:17rem;
      object-fit:cover}
    .ab-blok.ab-vol>.ab-tekst.ab-breed{flex:1 1 100%;max-width:100%}
    /* de bovenkant van de kop en van de foto op GELIJKE hoogte, ook in het blok waar de
       foto EERST staat: dan is .ab-tekst het tweede kind en zou een regel voor een <div>
       die op iets anders volgt er een bovenmarge op zetten (les van 27-10-2026). Deze
       selector weegt zwaarder en hangt niet van de volgorde af. */
    section.ab-blok>.ab-tekst{margin-top:0;margin-block-start:0}
    section.ab-blok>.ab-tekst>*:first-child{margin-top:0;margin-block-start:0}
    section.ab-blok>figure.ab-beeld{margin-top:0;margin-block-start:0}
    /* Een blok dat NIET in een .kaart staat stond 19,8 px verder naar links en was
       19,8 px breder dan de blokken ernaast (gemeten 30-10-2026: /klachten/ en
       /privacy/ op 191,8 px en 896,4 px breed tegen 211,6 px en 856,8 px in een kaart;
       op 390 px 19,8 tegen 39,6). Dezelfde insprong als een kaart zet elke kop op EEN
       kantlijn en geeft elke tekstkolom DEZELFDE breedte, op elke pagina. De maat staat
       in _AB_KAART_INSPRONG. */
    section.ab-blok{padding-left:calc(1.1rem + 2px);
      padding-right:calc(1.1rem + 2px)}
    /* Een KAART-achtige ouder zet die insprong zelf al; daar moet hij er weer af.
       Gemeten 30-10-2026: .kaart, nav.kaart en ol.stappen>li hebben alle drie
       padding ...1.1rem; section.groep (/klachten/) en div.verklaring (/privacy/)
       hebben er GEEN - die hebben de insprong dus wel nodig. */
    .kaart section.ab-blok,ol.stappen>li section.ab-blok{padding-left:0;padding-right:0}
    /* [w4-kantlijn] werker #4, 31-10-2026. Wat RECHTSTREEKS in main > .wrap staat heeft geen
       ouder met een insprong, dus stond de <h1>, de introalinea en 3 kale <h2>'s 21,8 px links
       van alle 2.471 blokkoppen (gemeten op 390 en 1280 px, 13 pagina's). Zelfde maat als
       section.ab-blok hierboven, uit _AB_KAART_INSPRONG.
       MARGIN en niet PADDING: padding verschuift het kader van het element niet, dus de kantlijn
       die de uitlijnmeter (en het oog) leest bleef er onveranderd van - gemeten, 26 van de 26.
       figure.beeld blijft er met OPZET buiten: een foto tot de rand van de wrap is een keuze. */
    main>.wrap>h1,main>.wrap>h2,main>.wrap>h3,main>.wrap>p,main>.wrap>dl,
    main>.wrap>div.zoekveld,
    main>.wrap>div.verklaring>h2,main>.wrap>div.verklaring>h3,main>.wrap>div.verklaring>p,
    main>.wrap>div.verklaring>ul,main>.wrap>div.verklaring>ol,main>.wrap>div.verklaring>dl{
      margin-left:calc(1.1rem + 2px);
      margin-right:calc(1.1rem + 2px)}
    /* Een figuur die IN de tekstkolom staat (niet ernaast) had geen breedtegrens: op
       /klachten/ @390 px stak die 23,5 px buiten zijn kolom (334,3 tegen 310,8).
       .ab-blok>figure.ab-beeld img heeft die grens wel, een gewone figure.beeld niet. */
    section.ab-blok .ab-tekst img{max-width:100%;height:auto}
    @media (max-width:760px){
      .ab-blok{flex-direction:column;align-items:stretch}
      .ab-blok>.ab-tekst{order:1}
      .ab-blok>figure.ab-beeld{order:2}
      /* [w4-hero-2] stond hier om de uitbraak hierboven onder 760 px terug te draaien.
         Die uitbraak is weg, dus deze regel zet alleen nog dezelfde waarden nog een keer.
         Blijft staan zodat een smal scherm zijn eigen regel houdt. [w4-hero-2-einde] */
      figure.ab-hero{width:auto;margin-left:0;margin-right:0}
    }