/* TEMPLATE — huisstijl. Alle kleuren staan hier als variabele; nergens in een template
   een losse hexcode. Dezelfde waarden staan in KLEUREN in merk.js, voor PDF's en e-mails
   die geen stylesheet kunnen laden — WIJZIG JE ER ÉÉN, WIJZIG DAN ALLEBEI.
   Ze liepen uiteen bij het maken van deze template: merk.js stond al neutraal terwijl hier
   nog het palet van het vorige portal stond (gevonden 16-08-2026 bij het opzetten van firmai).
   Geen donkere uitvoering — dezelfde keuze als bij Codex en aiacta. */
:root{
  --papier:#FFFFFF; --tint1:#F7F7F5; --tint2:#E9E9E4; --lijn:#D9D9D2;
  --accent:#26467A; --accent-donker:#182F55; --tweede:#7A5A1E;
  --inkt:#1B222B; --inkt-zacht:#5C6673; --kansrijk:#1F6B41;
  --risico-verboden:#A33232; --risico-hoog:#8A5B06; --risico-transparantie:#2A72A8;
  --risico-minimaal:#2F6F4E; --risico-nvt:#5E6A76;
  --serif:Georgia,'Times New Roman',serif;
  --radius:10px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--tint1);color:var(--inkt);
  font:400 17px/1.65 system-ui,'Segoe UI',Roboto,sans-serif;
}
img{max-width:100%;height:auto}
a{color:var(--accent)}
a:hover{color:var(--accent-donker)}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:760px}
.mid{text-align:center}
.section{padding:56px 0}
.section.band{background:var(--tint2)}
.muted{color:var(--inkt-zacht)}
.sub{color:var(--inkt-zacht);font-size:1.05rem}

h1,h2,h3,h4{font-family:var(--serif);color:var(--accent);line-height:1.25;font-weight:700}
h1{font-size:clamp(1.7rem,4vw,2.5rem);margin:0 0 .4em}
h2{font-size:clamp(1.25rem,2.6vw,1.6rem);margin:1.6em 0 .5em}
h3{font-size:1.1rem;margin:0 0 .4em}
p{margin:0 0 1em}
.eyebrow{
  display:inline-block;font-family:system-ui,sans-serif;font-size:.74rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tweede);margin-bottom:.6em;
}

/* ---------- kopbalk ---------- */
.top{background:var(--accent);color:#fff}
.top-in{display:flex;align-items:center;gap:22px;min-height:64px;flex-wrap:wrap}
.wm{text-decoration:none;color:#fff;display:inline-flex;align-items:baseline}
.wm-word{font-family:var(--serif);font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.wm-staart{opacity:.72;font-weight:400}
.topnav{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.topnav a{color:#fff;text-decoration:none;font-size:.94rem;opacity:.9;padding:4px 0;border-bottom:2px solid transparent}
.topnav a:hover{opacity:1;border-bottom-color:rgba(255,255,255,.5)}
.topnav a.active{opacity:1;border-bottom-color:#fff;font-weight:600}
.topacc{display:flex;align-items:center;gap:12px}
.topacc .lnk{color:#fff;opacity:.9;text-decoration:none;font-size:.94rem}
.langbar{background:var(--accent-donker);padding:4px 20px;text-align:right;font-size:.8rem}
.langbar a{color:#fff;opacity:.75;text-decoration:none;margin-left:6px}
.langbar a:hover{opacity:1}

/* ---------- knoppen ---------- */
.btn{
  display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  border:1px solid var(--accent);border-radius:var(--radius);padding:10px 20px;
  font-weight:600;font-size:.95rem;cursor:pointer;font-family:inherit;
}
.btn:hover{background:var(--accent-donker);border-color:var(--accent-donker);color:#fff}
.btn-groot{padding:13px 26px;font-size:1rem}
.btn-sm{padding:7px 14px;font-size:.88rem}
.btn-ghost{background:transparent;color:var(--accent)}
.btn-ghost:hover{background:rgba(38,70,122,.07);color:var(--accent-donker)}
.top .btn{background:#fff;color:var(--accent);border-color:#fff}
.top .btn:hover{background:var(--tint2);color:var(--accent-donker)}

/* ---------- hero ---------- */
.hero{background:var(--papier);border-bottom:1px solid var(--lijn);padding:62px 0}
.hero-in{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:start}
.hero-sub{font-size:1.1rem;color:var(--inkt);max-width:36em}
.hero-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 10px}
.hero-klein{font-size:.88rem;color:var(--inkt-zacht);margin:0}
.hero-kaart{background:var(--tint2);border:1px solid var(--lijn);border-radius:var(--radius);padding:22px 24px}
.hero-kaart h2{margin-top:0;font-size:1.15rem}
.hero-kaart p{font-size:.94rem;color:var(--inkt-zacht)}
.risicolijst{list-style:none;margin:0;padding:0;font-size:.92rem}
.risicolijst li{padding:9px 0;border-top:1px solid var(--lijn);color:var(--inkt-zacht)}
.chip{
  display:inline-block;padding:2px 9px;border-radius:999px;color:#fff;
  font-size:.74rem;font-weight:700;margin-right:6px;white-space:nowrap;
}
/* De drie uitkomsten van de check. De kleuren komen uit LABELS in merk.js en staan hier
   omdat public/index.html geen JavaScript leest; een losse hexcode in die pagina zou bij
   de volgende huisstijlwijziging stilletjes achterblijven. Wit op alle drie gemeten:
   6,5 : 1 (kansrijk), 6,3 : 1 (mogelijk), 5,8 : 1 (niet) - ruim boven de 4,5 die lopende
   tekst nodig heeft. Kleur draagt hier bovendien nooit alleen: er staan woorden in. */
.chip-kansrijk{background:var(--kansrijk)}
.chip-mogelijk{background:var(--tweede)}
.chip-niet{background:var(--inkt-zacht)}
/* Redactionele vlag bij een bronverwijzing. Bewust GEEN .chip: die is gevuld met een
   risicokleur, en een gevulde okerkleur naast een bron leest als de risicoklasse
   "Hoog risico" — de kleurcodering van de site draagt daar betekenis. Dit is geen
   oordeel over de wet maar over onze eigen verwijzing, en dat hoort er ook anders uit
   te zien: open, zacht, en zonder alarmkleur (gevonden door Erik, 16-08-2026). */
.bronvlag{
  display:inline-block;padding:1px 8px;border-radius:999px;
  border:1px solid var(--lijn);background:var(--tint1);color:var(--inkt-zacht);
  font-size:.72rem;font-weight:600;font-style:normal;white-space:nowrap;
}

/* ---------- kaarten ---------- */
.kaartrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:26px}
.kaart{
  display:block;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:22px 24px;text-decoration:none;color:inherit;
}
.kaart:hover{border-color:var(--accent);box-shadow:0 6px 18px -12px rgba(7,42,74,.5)}
.kaart p{font-size:.94rem;color:var(--inkt-zacht);margin-bottom:.6em}
.meer{color:var(--accent);font-weight:600;font-size:.9rem}
.waarschuwing{
  background:var(--tint2);border-left:3px solid var(--tweede);border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 18px;font-size:.95rem;
}
.kader{background:var(--tint2);border:1px solid var(--lijn);border-radius:var(--radius);padding:14px 18px;margin:18px 0}
.kader p{margin:0;font-size:.95rem}
.cta-band,.cta-slot{background:var(--papier);border-top:1px solid var(--lijn)}
.cta-band{padding:26px 0;text-align:center;margin-top:30px;border:none;background:none}

/* ---------- stappen, faq, juridisch ---------- */
.stappen{counter-reset:stap;list-style:none;padding:0;margin:26px 0}
.stappen li{
  position:relative;padding:0 0 4px 52px;margin-bottom:22px;counter-increment:stap;
}
.stappen li::before{
  content:counter(stap);position:absolute;left:0;top:2px;width:34px;height:34px;
  border-radius:50%;background:var(--accent);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
}
.stappen h2{margin:0 0 .3em;font-size:1.08rem}
.stappen p{margin:0;color:var(--inkt-zacht);font-size:.95rem}
.faq{border-top:1px solid var(--lijn);padding:16px 0}
.faq h2{margin:0 0 .35em;font-size:1.08rem}
.faq p{margin:0;color:var(--inkt-zacht)}
.juridisch h2{font-size:1.1rem;margin:1.8em 0 .4em}
.juridisch p{font-size:.97rem}

/* ---------- prijzen ---------- */
.prijsrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:26px 0}
.prijskaart{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--radius);padding:22px 24px;text-align:center}
.prijskaart.uitgelicht{border:2px solid var(--accent)}
.prijskaart h2{margin:0 0 .3em;font-size:1.05rem}
.prijs{font-family:var(--serif);font-size:2.1rem;color:var(--accent);font-weight:700}
.prijskaart .muted{font-size:.86rem;margin:0}
.vergelijk{width:100%;border-collapse:collapse;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--radius);font-size:.94rem}
.vergelijk th,.vergelijk td{padding:11px 14px;border-bottom:1px solid var(--lijn);text-align:left}
.vergelijk th:not(:first-child),.vergelijk td:not(:first-child){text-align:center;width:9rem}
.vergelijk thead th{background:var(--tint2);font-family:var(--serif);color:var(--accent)}

/* ---------- nieuws ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:26px}
.post-card{
  display:block;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;
}
.post-card:hover{border-color:var(--accent)}
.pc-img img{display:block;width:100%;height:auto;object-fit:cover}
.pc-body{padding:18px 20px}
.pc-date{display:block;font-size:.8rem;color:var(--inkt-zacht);margin-bottom:6px}
.pc-body h2{margin:0 0 .35em;font-size:1.05rem}
.pc-body p{font-size:.92rem;color:var(--inkt-zacht);margin-bottom:.6em}
.pc-more{color:var(--accent);font-weight:600;font-size:.88rem}
.post-hero{border-radius:var(--radius);margin:0 0 20px;border:1px solid var(--lijn)}
.post-body{font-size:1.02rem}
.post-body h2{font-size:1.25rem}
.post-body img{border-radius:var(--radius)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start}
.contact-details{list-style:none;padding:0;margin:18px 0;font-size:.94rem}
.contact-details li{padding:7px 0;border-bottom:1px solid var(--lijn);display:flex;gap:12px}
.cd-lb{color:var(--inkt-zacht);min-width:6.5rem}
.contact-card{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--radius);padding:24px}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:5px}
.field input,.field textarea,.field select{
  width:100%;padding:10px 12px;border:1px solid var(--lijn);border-radius:8px;
  font:inherit;font-size:.95rem;background:var(--papier);color:var(--inkt);
}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form-note{padding:11px 14px;border-radius:8px;margin-bottom:16px;font-size:.93rem}
.form-note.ok{background:#E7F1EA;color:var(--risico-minimaal);border:1px solid #BFDCC9}
.form-note.err{background:#F7E9E9;color:var(--risico-verboden);border:1px solid #E6C6C6}

/* ---------- voettekst ---------- */
.foot{background:var(--accent);color:#fff;padding:44px 0 26px;margin-top:60px}
.foot a{color:#fff;opacity:.85;text-decoration:none}
.foot a:hover{opacity:1;text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.foot h4{color:#fff;font-family:system-ui,sans-serif;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .8em;opacity:.75}
.foot ul{list-style:none;padding:0;margin:0;font-size:.92rem}
.foot li{margin-bottom:6px}
.foot p{font-size:.9rem;opacity:.82;max-width:34em}
.foot-brand{display:block;margin-bottom:10px}
.foot-brand .wm-word{color:#fff;font-size:1.25rem}
.wm-tag{display:block;font-size:.82rem;opacity:.7;margin-top:2px}
.foot-bar{
  border-top:1px solid rgba(255,255,255,.22);margin-top:30px;padding-top:18px;
  display:flex;flex-direction:column;gap:6px;font-size:.82rem;opacity:.85;
}

@media (max-width:900px){
  .hero-in,.contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .section{padding:40px 0}
  .veld-rij,.foot-grid{grid-template-columns:1fr}
  .topnav{gap:12px;font-size:.9rem}
}

/* ---------- artikelen ---------- */
.kruimels{font-size:.85rem;color:var(--inkt-zacht);margin-bottom:10px}
.artikel h1{margin-top:.3em}
.antwoord{font-size:1.08rem}
.antwoord > p:first-child{font-size:1.14rem}
.cat-blok{margin-bottom:34px}
.artikellijst{list-style:none;padding:0;margin:0}
.artikellijst li{border-top:1px solid var(--lijn);padding:11px 0;display:flex;gap:10px;align-items:center;justify-content:space-between}
.artikellijst a{font-weight:600;text-decoration:none}
.artikellijst a:hover{text-decoration:underline}
/* Zoeken in de onderwerpen. De lijst staat al volledig in de pagina; dit filtert hem in
   de browser. Zonder JavaScript blijft alles gewoon zichtbaar — het veld is dan het
   enige dat niets doet, en dat is de goede kant om op te falen. */
.onderwerp-zoek{margin:22px 0 6px}
.onderwerp-zoek input{
  width:100%;padding:12px 14px;font-size:1rem;font-family:inherit;
  border:1px solid var(--lijn);border-radius:var(--radius);background:var(--papier);color:var(--inkt);
}
.onderwerp-zoek input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.sprongrij{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 26px}
.sprong{
  display:inline-block;padding:4px 12px;border-radius:999px;text-decoration:none;
  border:1px solid var(--lijn);background:var(--tint1);color:var(--inkt-zacht);font-size:.85rem;
}
.sprong:hover{border-color:var(--accent);color:var(--accent)}
.verwant{margin:30px 0 0;padding-top:8px;border-top:2px solid var(--lijn)}
.verwant h2{font-size:1.05rem;margin:0 0 .3em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bronnen{background:var(--tint2);border-left:3px solid var(--tweede);border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin:26px 0}
.bronnen h2{margin:0 0 .4em;font-size:1.05rem}
.bronnen ul{margin:0;padding-left:20px;font-size:.94rem}
.bronnen li{margin-bottom:6px}
.bronnen .muted{margin:10px 0 0;font-size:.86rem}
.verdieping,.landblok{border-top:1px solid var(--lijn);padding-top:20px;margin-top:26px}
.muur{background:var(--tint2);border:1px dashed var(--lijn);border-radius:var(--radius);padding:20px 22px;margin:26px 0}
.muur h2{margin:0 0 .35em;font-size:1.1rem}
.muur p{color:var(--inkt-zacht);font-size:.95rem}
.muur .btn{margin-right:8px}
.voetnoot{border-top:1px solid var(--lijn);margin-top:34px;padding-top:16px;font-size:.9rem}
.voetnoot p{margin-bottom:.6em}

/* ---------- taalvlaggen ---------- */
/* De SVG's uit lib/geo.js hebben geen eigen afmetingen: zonder deze regels vult elke
   vlag de volle breedte van de balk. Vandaar een vaste maat hier. */
.langbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}
.langbar .flag{display:inline-flex;line-height:0;border-radius:2px;overflow:hidden;
  outline:1px solid rgba(255,255,255,.35);opacity:.65;transition:opacity .15s}
.langbar .flag:hover{opacity:1}
.langbar .flag.active{opacity:1;outline:2px solid #fff}
.langbar .flagimg{display:block;width:22px;height:15px}

/* ---------- quick-scan ---------- */
.scan-form{margin-top:26px}
.scan-vraag{border:1px solid var(--lijn);border-radius:var(--radius);background:var(--papier);
  padding:18px 22px 20px;margin:0 0 18px}
.scan-vraag legend{font-family:var(--serif);font-weight:700;color:var(--accent);font-size:1.05rem;padding:0 6px}
.scan-toelichting{font-size:.88rem;margin:0 0 12px}
.scan-opties{display:flex;flex-direction:column;gap:2px}
.scan-optie{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;cursor:pointer}
.scan-optie:hover{background:var(--tint1)}
.scan-optie input{margin:3px 0 0;width:auto;flex:none}
/* De drie invoervragen van de WOZ-check: adres, bedrag en oppervlakte. Zonder deze regels
   vallen ze terug op de browserstandaard en staan ze naast de keuzevragen als iets uit een
   ander formulier — op hetzelfde scherm, in dezelfde stap. De eenheid staat ernaast en niet
   in de placeholder, want een placeholder verdwijnt zodra iemand begint te typen, en juist
   dan wil je nog kunnen zien of er een bedrag of een oppervlakte wordt gevraagd. */
.scan-invoer{
  width:100%;max-width:320px;padding:10px 12px;font-size:1rem;font-family:inherit;
  border:1px solid var(--lijn);border-radius:8px;background:var(--papier);color:var(--inkt);
}
.scan-invoer:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.scan-invoerrij{display:flex;align-items:center;gap:8px}
.scan-eenheid{color:var(--inkt-zacht);font-size:1rem;flex:none}
.scan-redenen,.scan-stappen{padding-left:22px}
.scan-redenen li,.scan-stappen li{margin-bottom:10px}
.scan-email{margin-top:6px}
.scan-email .btn{margin-top:4px}