/* Huisstijl van de bezwaar-koepel: bordeaux op warm gebroken wit. 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:#FAF7F2; --tint1:#F3EDE6; --tint2:#E5DDD5; --lijn:#E5DDD5;
  --accent:#7F1D1D; --accent-donker:#5C1414; --tweede:#B45309;
  --inkt:#2B2321; --inkt-zacht:#6B5D55;
  --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}
/* De staart van het woordmerk (.eu, .nl, .com) stond op 72% dekking. Op een lichte accentbalk
   zakt dat onder de contrastgrens: bij eudri (accent #3F6B34) haalde het 4,15 tegen een eis van
   4,5 -- vijfenvijftig bevindingen op negen paginas, allemaal dezelfde drie tekens. Bij donkere
   accenten viel het niet op, en juist dat maakt het lastig: dezelfde regel is in het ene portal
   goed en in het andere niet.
   85% haalt het op elk accent in het portfolio (eudri 5,07, theos 7,28, axessia 6,73) en het
   verschil met de kern blijft zichtbaar. Gemeten met axessia-app/lib/contrast.js (20-08-2026). */
.wm-staart{opacity:.85;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)}
/* Een chip zonder eigen achtergrondkleur is WIT OP WIT. De kleur wordt per gebruik inline
   meegegeven; wie er een neerzet zonder, maakt onzichtbare tekst. Gevonden door onze eigen
   scan-engine op onze eigen sites (20-08-2026), twee keer los. Een fout die van oplettendheid
   afhangt, komt terug -- vandaar een terugvalkleur die het contrast haalt. --accent is per
   portal al gemeten met lib/contrast.js. */
.chip{
  display:inline-block;padding:2px 9px;border-radius:999px;color:#fff;background:var(--accent);
  font-size:.74rem;font-weight:700;margin-right:6px;white-space:nowrap;
}
/* 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 .foot-kop{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}
.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}

/* ---------- De wizard: één vraag per scherm ---------- */
/* Groot genoeg om met een muis die niet meer zo vast is te raken. De hele regel is
   klikbaar, niet alleen het bolletje -- dat scheelt de meeste misklikken. */
.wiz-kop{margin-bottom:26px}
.wiz-balk{height:6px;border-radius:99px;background:var(--edge,#e3e3e3);overflow:hidden;margin-top:10px}
.wiz-balk > span{display:block;height:100%;border-radius:99px;background:var(--accent,#12807F);transition:width .25s ease}
@media (prefers-reduced-motion: reduce){.wiz-balk > span{transition:none}}
.wiz-vraag{margin:0 0 6px;font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.2;text-wrap:balance}
.wiz-hint{margin:0 0 14px;font-size:.9rem}
.wiz-opties{display:flex;flex-direction:column;gap:10px;margin:22px 0 28px}
.wiz-optie{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:2px solid var(--edge,#e3e3e3);
  border-radius:10px;cursor:pointer;background:var(--paper,#fff);font-size:1.05rem;line-height:1.45;transition:border-color .12s ease,background .12s ease}
.wiz-optie:hover{border-color:var(--accent,#12807F);background:var(--tint1,#f6f6f6)}
.wiz-optie input{margin-top:.28em;width:1.15rem;height:1.15rem;flex:0 0 auto;accent-color:var(--accent,#12807F)}
.wiz-optie:has(input:checked){border-color:var(--accent,#12807F);background:var(--tint1,#f6f6f6)}
.wiz-optie:focus-within{outline:3px solid var(--accent,#12807F);outline-offset:2px}
.wiz-knoppen{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.wiz-knoppen .btn-groot{flex:1 1 auto;min-width:12rem}
.btn-stil{background:transparent;border:1px solid var(--edge,#e3e3e3);color:var(--muted,#666)}
.btn-stil:hover{border-color:var(--ink,#222);color:var(--ink,#222)}
.wiz-bewaard{margin-top:22px;font-size:.86rem}
@media (max-width:520px){
  .wiz-knoppen{flex-direction:column-reverse;align-items:stretch}
  .wiz-knoppen .btn{width:100%;text-align:center}
}

/* ---------- De vervolgstap na de uitkomst ---------- */
/* Staat bewust boven de e-mailvraag: dit is het moment waarop iemand weet wat er voor hem
   geldt. Vandaar ook het bedrag -- 'neem contact op' is geen vervolgstap. */
.vervolg{margin:34px 0 28px;padding:26px 28px;border-radius:12px;border:2px solid var(--accent,#12807F);background:var(--tint1,#f6f6f6)}
.vervolg h2{margin:6px 0 12px;font-size:1.5rem;line-height:1.2;text-wrap:balance}
.vervolg-eerste{margin:0 0 12px;font-size:1.05rem}
.vervolg-prijs{margin:16px 0 4px;font-size:1.15rem}
/* NU / DAARNA / WIJ naast elkaar. Drie kolommen op een breed scherm, onder elkaar op een telefoon.
   De derde krijgt de nadruk: dat is de kolom waar het om gaat. */
.vervolg-drie{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:18px 0 6px}
.vervolg-stap{padding:14px 16px;border-radius:10px;background:var(--kaart,#fff);border:1px solid var(--edge,#e3e3e3)}
.vervolg-stap p{margin:6px 0 0;font-size:.95rem;line-height:1.5}
.vervolg-nr{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#666)}
.vervolg-wij{border-color:var(--accent,#12807F);border-width:2px}
.vervolg-wij .vervolg-nr{color:var(--accent,#12807F)}
.vervolg-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.vervolg-klein{margin-top:14px;font-size:.86rem}
@media (max-width:520px){.vervolg{padding:20px}.vervolg-knoppen .btn{width:100%;text-align:center}}

/* Invoervragen in de wizard: adres, bedrag, oppervlakte. Groot genoeg om op een telefoon
   te raken, en met een eenheid ernaast in plaats van in de vraag. */
.wiz-invoer{margin:22px 0 28px}
.wiz-invoer .scan-invoer{width:100%;padding:14px 16px;font-size:1.15rem;border:2px solid var(--edge,#e3e3e3);border-radius:10px;background:var(--paper,#fff);color:inherit}
.wiz-invoer .scan-invoer:focus{outline:3px solid var(--accent,#12807F);outline-offset:2px;border-color:var(--accent,#12807F)}
.wiz-invoerrij{display:flex;align-items:center;gap:10px}
.wiz-eenheid{font-size:1.15rem;color:var(--muted,#666);flex:0 0 auto}
.wiz-overslaan{margin:16px 0 0;text-align:center}
.knop-als-link{background:none;border:none;padding:6px 10px;font:inherit;font-size:.92rem;color:var(--muted,#666);text-decoration:underline;cursor:pointer;border-radius:6px}
.knop-als-link:hover{color:var(--ink,#222)}
.knop-als-link:focus-visible{outline:3px solid var(--accent,#12807F);outline-offset:2px}
.visueel-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Het voorbeeld achter een optie: leesbaar, maar niet zo zwaar dat het met het antwoord concurreert. */
.wiz-optie-hint{display:block;margin-top:3px;font-size:.85rem;line-height:1.45;color:var(--muted,#666)}
/* ===================================================================================================
   DE BEZWAAR-ENGINE OP HET SCHERM
   =================================================================================================== */

/* De termijnstrook staat bóven de vraag en niet eronder. Hoeveel dagen iemand nog heeft, is het
   enige onherstelbare gegeven in dit systeem — dat hoort hij te zien zonder ernaar te zoeken. */
.termijn-strook{margin:0 0 18px;padding:10px 14px;border-radius:8px;background:var(--tint2);
  font-size:.92rem;font-variant-numeric:tabular-nums}

/* De uitkomst van de kansencheck. De rand draagt de kleur; de chip draagt het woord. Kleur is
   nooit de enige drager — bij "eerlijke nee" staat er ook eerlijke nee. */
.kans{margin:8px 0 26px;padding:24px 26px;border:2px solid var(--lijn);border-radius:14px;background:var(--papier)}
.kans h1{margin:.35em 0 .5em}
.kans p{font-size:.98rem;line-height:1.6}
.kans-termijn{margin-top:14px;padding-top:12px;border-top:1px solid var(--lijn);font-variant-numeric:tabular-nums}
.kans-nee,.kans-stop{background:var(--tint1)}

.grondenlijst{list-style:none;margin:14px 0 0;padding:0}
.grondenlijst li{padding:12px 0;border-top:1px solid var(--lijn)}
.grondenlijst strong{display:block;font-size:.98rem}
.grondenlijst span{font-size:.83rem}

/* Het stuk zelf, zoals het eruit komt. Monospace en met de regeleindes intact: dit is een brief en
   geen webpagina, en dat mag je zien. */
.brief{margin:22px 0;padding:26px 28px;border:1px solid var(--lijn);border-radius:10px;
  background:var(--papier);white-space:pre-wrap;font:400 .92rem/1.7 ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  overflow-x:auto}

@media (max-width:560px){
  .kans{padding:18px 20px}
  .brief{padding:18px 16px;font-size:.85rem}
}

/* De terugweg naar de geldscan. Rustiger dan de eigen vervolgstap: dit is een aanbod van de
   overkant, geen tweede verkoopblok. Hij staat er ook bij een eerlijke nee — juist dan. */
.overkant{margin:26px 0;padding:22px 24px;border:1px dashed var(--lijn);border-radius:12px}
.overkant h2{margin:.3em 0 .5em;font-size:1.12rem}
.overkant p{font-size:.95rem;line-height:1.6}
.herkomst{margin:0 0 14px;font-size:.86rem}

/* De terugweg naar de geldscan. Twee vormen, en het verschil is inhoudelijk: bij een verhuizing of
   een pensioen mag er een knop staan, bij een overlijden of een scheiding niet. Daar is een blok
   over geld het laatste waar iemand op zit te wachten — dus geen kader, geen knop, geen eyebrow. */
.overkant{margin:26px 0;padding:22px 24px;border:1px dashed var(--lijn);border-radius:12px}
.overkant h2{margin:.3em 0 .5em;font-size:1.12rem}
.overkant p{font-size:.95rem;line-height:1.6}
.overkant-stil{border:0;border-top:1px solid var(--lijn);border-radius:0;padding:18px 0 0;margin-top:32px}
.overkant-stil h2{font-size:1rem;font-weight:600}
.herkomst{margin:0 0 14px;font-size:.86rem;line-height:1.5}