/* De huisstijl van moneyscan.eu. 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:#F5F8F6; --tint2:#E4EDE8; --lijn:#D2DED7;
  --accent:#12805A; --accent-donker:#0B5B3F; --tweede:#8A5A1E;
  --inkt:#17211C; --inkt-zacht:#57635C;
  --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}
/* 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)}
.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}

/* ===================================================================================================
   DE UITKOMST VAN DE GELDSCAN

   Drie blokken, en de volgorde waarin ze op het scherm staan is de volgorde waarin iemand ze
   nodig heeft: het bedrag, wat wij ervan overnemen, en dan pas de posten zelf.

   Het totaalblok is met opzet het enige element op de hele site met een bedrag in deze grootte.
   Als er nog iets anders zo groot wordt, is dit blok zijn werk kwijt.
   =================================================================================================== */

.geld-totaal{
  margin:8px 0 26px;padding:26px 28px;border-radius:14px;
  background:var(--accent);color:#fff;
}
.geld-label{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;opacity:.85;
}
.geld-bedrag{
  margin:6px 0 4px;font-family:var(--serif);font-weight:700;color:#fff;
  font-size:clamp(2rem,6vw,3.2rem);line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.geld-totaal .chip{background:rgba(255,255,255,.18)!important;color:#fff;border:1px solid rgba(255,255,255,.4)}
.geld-onder{margin:10px 0 0;font-size:.95rem;opacity:.92}
/* De regel die zegt dat dit géén toezegging is, staat IN het blok en niet in de kleine lettertjes
   onderaan. Op de plek van het bedrag is de verleiding het grootst, dus daar hoort hij ook. */
.geld-mits{margin:12px 0 0;font-size:.86rem;line-height:1.5;opacity:.85;border-top:1px solid rgba(255,255,255,.25);padding-top:12px}
.geld-totaal-leeg{background:var(--tint2);color:var(--inkt)}
.geld-totaal-leeg .geld-bedrag,.geld-totaal-leeg .geld-label{color:var(--inkt-zacht)}
.geld-totaal-leeg .geld-bedrag{font-size:clamp(1.4rem,3.5vw,2rem)}
.geld-totaal-leeg .geld-mits{border-top-color:var(--lijn)}

/* De geldposten. Eén kaart per post, met het bedrag links uitgelijnd onder de titel en de
   rekensom er direct onder — die twee horen bij elkaar en mogen nooit uit elkaar geraken. */
.geldpostenlijst{display:flex;flex-direction:column;gap:16px;margin:18px 0 8px}
.geldpost{
  padding:20px 22px;border:1px solid var(--lijn);border-radius:12px;background:var(--papier);
}
.geldpost-voorrang{border-color:var(--accent);border-width:2px;background:var(--tint1)}
.geldpost-kop{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.geldpost-kop h3{margin:0;font-size:1.12rem;flex:1 1 16rem}
.geldpost-bedrag{
  margin:10px 0 4px;font-family:var(--serif);font-weight:700;color:var(--accent-donker);
  font-size:1.6rem;line-height:1.1;font-variant-numeric:tabular-nums;
}
.geldpost-geenbedrag{margin:10px 0 4px;font-size:1.05rem;font-weight:600;color:var(--inkt-zacht)}
/* De rekensom. Kleiner dan het bedrag maar niet weggemoffeld: dit is wat het bedrag geloofwaardig
   maakt, en het is het enige stuk tekst op deze pagina dat een bezoeker kan narekenen. */
.geldpost-grondslag{
  margin:0 0 12px;padding-left:12px;border-left:3px solid var(--tint2);
  font-size:.9rem;line-height:1.55;color:var(--inkt-zacht);
}
.geldpost-uitleg{margin:0 0 12px;font-size:.96rem}
.geldpost-bron{margin:0 0 14px;font-size:.83rem;color:var(--inkt-zacht)}
.geldpost-bron span{font-weight:700}
.geldpost-bron-leeg{font-style:italic}
.geldpost-knop{margin-top:4px}
.geldpost-stand{margin:8px 0 0;font-size:.85rem;line-height:1.5}
.geldpost-wacht{margin:0;padding:12px 14px;border-radius:8px;background:var(--tint2);font-size:.9rem}
.geldpost-wacht-aan{border-left:3px solid var(--accent)}
.inline-form{display:inline}

/* De eerlijke nee: wat wij hebben nagekeken en niet gevonden. Bewust rustig vormgegeven —
   dit is geen waarschuwing en geen verkoopblok, het is een verantwoording. */
.eerlijk-nee{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.eerlijk-nee li{padding:11px 0;border-top:1px solid var(--lijn);display:flex;gap:14px;flex-wrap:wrap}
.eerlijk-nee strong{flex:0 0 13rem;font-size:.95rem}
.eerlijk-nee span{flex:1 1 16rem;font-size:.9rem;color:var(--inkt-zacht)}

/* Het kader op de startpagina en de scan-intro dat de eerlijkheidsbelofte draagt. */
.kader-eerlijk{background:var(--papier);border-left:4px solid var(--accent)}

/* ===================================================================================================
   HET GELDPLAN — de kassa
   =================================================================================================== */

.planlijst{display:flex;flex-direction:column;gap:10px;margin:22px 0 18px}
.plan-regel{
  display:flex;gap:14px;align-items:flex-start;padding:15px 18px;
  border:2px solid var(--lijn);border-radius:10px;background:var(--papier);cursor:pointer;
}
.plan-regel:hover{border-color:var(--accent);background:var(--tint1)}
.plan-regel:has(input:checked){border-color:var(--accent);background:var(--tint1)}
.plan-regel:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.plan-regel input{margin-top:.3em;width:1.15rem;height:1.15rem;flex:0 0 auto;accent-color:var(--accent)}
.plan-tekst{flex:1 1 auto;display:flex;flex-direction:column;gap:3px}
.plan-tekst small{font-size:.85rem;color:var(--inkt-zacht);line-height:1.45}
.plan-levert{font-variant-numeric:tabular-nums}
.plan-prijs{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Een actie zonder prijs is geen fout maar wél zichtbaar: zolang er geen bedrag is, wordt er
   niets afgerekend, en dat hoort de bezoeker te zien in plaats van te merken. */
.plan-prijs-leeg{font-weight:400;font-size:.82rem;color:var(--inkt-zacht);white-space:normal;max-width:9rem;text-align:right}
.plan-totaal{padding:18px 20px;border-radius:10px;background:var(--tint2);margin:8px 0 20px}
.plan-los,.plan-korting{margin:0 0 4px;font-size:.95rem;font-variant-numeric:tabular-nums}
.plan-korting{color:var(--accent-donker)}
.plan-som{margin:8px 0 0;font-size:1.25rem;font-variant-numeric:tabular-nums}
.plan-som-leeg{font-size:1rem;color:var(--inkt-zacht)}
.plan-kassa{margin:0 0 12px}
.plan-terug{margin-top:26px;font-size:.9rem}
.plan-opdracht{margin:22px 0;padding-left:1.2em}
.plan-opdracht li{margin-bottom:16px}
.plan-opdracht span{display:block;font-size:.9rem;color:var(--inkt-zacht);margin:2px 0 8px}

@media (max-width:560px){
  .geld-totaal{padding:20px}
  .geldpost{padding:16px 18px}
  .geldpost-knop .btn{width:100%;text-align:center}
  .plan-regel{padding:13px 15px}
  .plan-prijs-leeg{max-width:none;text-align:left}
  .eerlijk-nee strong{flex:1 1 100%}
}