@import url("/brand.css");
/* Wat hierboven staat is de gedeelde huisstijl; hieronder staat alleen
   wat de rekentool zelf nodig heeft. */
/* Het hidden-attribuut moet altijd winnen. Een auteursregel als
   .pdfrow{display:flex} overschrijft anders de browserstandaard
   [hidden]{display:none}, waardoor verborgen blokken toch zichtbaar zijn. */


.steps{display:flex;margin:26px 0 4px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.steps button{flex:1;border:0;background:#fff;padding:10px 4px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);cursor:pointer;border-right:1px solid var(--line)}
.steps button:last-child{border-right:0}
.steps button.active{background:var(--ink);color:#fff}
.steps button.done{color:var(--floor)}

section.screen{display:none;margin-top:14px}
section.screen.active{display:block}
h1{font-size:26px;line-height:1.2;margin:26px 0 6px;font-weight:650}
h2{font-size:17px;margin:0 0 12px;font-weight:650}
.sub{color:var(--ink-soft);font-size:14px;margin-bottom:14px}
.sub-lead{margin-bottom:6px}

.presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.presets button{padding:9px 14px;border:1px solid var(--line);background:#fff;border-radius:6px;font-size:14px;cursor:pointer;color:var(--ink)}
.presets button.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.presets button.opt{border-style:dashed;border-color:var(--floor);color:var(--floor)}
.presets button.opt.sel{background:var(--floor);color:#fff;border-style:solid}
/* Het veld "anders: __ %" onder de knoppen van het eigen risico. Een
   gekozen waarde krijgt dezelfde rand als een gekozen knop; een ongeldige de
   waarschuwingskleur. */
.vloer-anders{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px}
.vloer-anders label{display:inline;margin:0;font-weight:400;font-size:14px}
.vloer-anders input{width:4.5em;padding:9px 10px;border:1px solid var(--line);border-radius:6px;font-size:15px;font-family:var(--body);background:#fff;color:var(--ink)}
.vloer-anders input.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.vloer-anders input[aria-invalid="true"]{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn)}
.spot{font-family:var(--mono);font-size:13px;color:var(--ink-soft);margin-top:6px}
.spot a{color:var(--floor)}
.spot.mt8{margin-top:8px}
.nav{display:flex;justify-content:space-between;margin-top:10px;gap:10px}
/* CSP staat geen `style=` toe (style-src 'self'); elke plek die vroeger een
   losse margin-top nodig had, krijgt hier een naam in plaats van een attribuut. */
.nav.mt{margin-top:14px}
#unlockPricing{max-width:420px;margin-top:14px}
.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}

/* max-width hier én op het veld: de listbox is absoluut gepositioneerd op
   .combobox, dus zonder dit zou hij breder worden dan het invoerveld. */
.combobox{position:relative;max-width:520px}
/* brand.css stileert alleen input[type=number|email] en select, niet
   input[type=text] -- vandaar dat dit veld zijn eigen regels heeft in plaats
   van de gedeelde te erven. Rechts is ruimte vrijgehouden voor de loep en de
   info-knop, die allebei binnen het veld staan. */
.combobox-field{position:relative;display:block;max-width:520px}
.combobox-field input[role=combobox]{width:100%;max-width:none;padding:11px 74px 11px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:var(--body);background:#fff;color:var(--ink)}
.combobox-icon{position:absolute;right:44px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--ink-soft);pointer-events:none}
.combobox-info{position:absolute;right:11px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-soft);cursor:pointer}
.combobox-info svg{width:19px;height:19px}
.combobox-info:hover{color:var(--ink)}
.combobox-info[aria-expanded="true"]{color:var(--floor)}
.combobox-info-panel{max-width:520px;margin-top:6px;padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:8px;font-size:13px;line-height:1.45;color:var(--ink-soft)}
.combobox-list{list-style:none;margin:2px 0 0;padding:4px;position:absolute;left:0;right:0;top:100%;z-index:20;max-height:340px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.combobox-group-label{padding:8px 10px 4px;font-size:11px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.combobox-option{padding:9px 10px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.combobox-option:hover,.combobox-option.active{background:var(--paper)}
.combobox-option .opt-name{font-weight:600;font-size:14px}
.combobox-option .opt-meta{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.combobox-option .opt-status{font-size:12px;font-weight:600}
.combobox-option .opt-status.status-available{color:var(--floor)}
.combobox-option .opt-status.status-limited{color:var(--warn)}
.combobox-option .opt-status.status-unavailable{color:var(--ink-soft)}
.combobox-empty,.combobox-loading,.combobox-error{padding:12px 10px;font-size:13px;color:var(--ink-soft)}
.combobox-error{color:var(--warn)}
.combobox-error button{margin-left:8px}

.selected-instrument{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--card);margin-top:8px;display:flex;flex-direction:column;gap:4px}
.selected-instrument .si-name{font-weight:650;font-size:15px}
.selected-instrument .si-meta{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}
.selected-instrument .si-status{font-size:12.5px;font-weight:600}
.selected-instrument .si-status.status-available{color:var(--floor)}
.selected-instrument .si-status.status-limited,.selected-instrument .si-status.status-unavailable{color:var(--warn)}
.selected-instrument .si-change{align-self:flex-start;margin-top:4px}

.modeswitch{display:flex;gap:8px;margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.modeswitch button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
#advancedPanel{margin-top:10px;display:flex;flex-direction:column;gap:2px}
#advancedPanel input{margin-bottom:6px}
.text-sm{font-size:14px}
.text-sm.mt{margin-top:8px}


.cards{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.card h3{font-size:15px;font-weight:700}
.card h3 .tag{font-family:var(--mono);font-weight:400;font-size:10.5px;color:var(--ink-soft);display:block;letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.contract{font-family:var(--mono);font-size:14px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.contract small{display:block;font-size:10.5px;color:var(--ink-soft);margin-top:3px;font-family:var(--body)}
.locked-bar{font-family:var(--mono);font-size:13px;background:#EEF1F4;border:1px dashed var(--ink-soft);border-radius:6px;padding:10px;color:var(--ink-soft);text-align:center}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:13px}
.kv dt{color:var(--ink-soft)}
.kv dd{text-align:right;font-family:var(--mono)}
.floorline{border-left:3px solid var(--floor);padding:6px 10px;background:#EDF6F1;font-size:13px;border-radius:0 6px 6px 0}
.oddlot{border-left:3px solid var(--ink);padding:6px 10px;background:#EEF1F4;font-size:12.5px;border-radius:0 6px 6px 0}
.warn{border-left:3px solid var(--warn);padding:6px 10px;background:#FBEFE3;font-size:12.5px;border-radius:0 6px 6px 0;color:#7A3E0B}
.smart{border-left:3px solid var(--floor);padding:6px 10px;background:#EDF6F1;font-size:12.5px;border-radius:0 6px 6px 0}
.div-offset{font-size:12.5px;color:var(--floor)}
details.explain{border-top:1px dashed var(--line);padding-top:8px;font-size:13px}
details.explain summary{cursor:pointer;font-weight:600;font-size:12.5px;color:var(--ink-soft)}
details.explain p{margin-top:6px}
.payoff{width:100%;height:auto;display:block}

.card.locked .blurwrap{filter:blur(5px);opacity:.55;pointer-events:none;user-select:none}
.lockbadge{position:absolute;inset:auto 0 0 0;background:linear-gradient(180deg,rgba(247,246,242,0),var(--card) 45%);padding:26px 14px 14px;text-align:center;font-size:13px;font-weight:600}
.lockbadge span{display:block;font-weight:400;font-size:12px;color:var(--ink-soft);margin-top:2px}
.skl{height:12px;border-radius:4px;background:#E4E8EC;margin:4px 0}
.skl.w60{width:60%}.skl.w80{width:80%}.skl.w40{width:40%}

.unlock{background:var(--card);border:2px solid var(--floor);border-radius:10px;padding:20px;margin:16px 0}
.unlock h2{color:var(--floor)}
.unlock ul{margin:8px 0 0 18px;font-size:14px}
.unlock li{margin-bottom:3px}
.promo{background:#EDF6F1;border-radius:6px;padding:8px 10px;font-size:13px;margin-top:12px}
.emailrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}

.pdfrow{margin-top:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.loading{font-family:var(--mono);font-size:13px;color:var(--ink-soft);padding:20px;text-align:center}

/* article pages */
article.post{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:26px;margin:20px 0;font-size:15px}
article.post h1{margin-top:0;font-size:24px}
article.post h2{margin:20px 0 8px;font-size:17px}
article.post p{margin:10px 0}
article.post ol,article.post ul{margin:10px 0 10px 22px}
article.post table{border-collapse:collapse;width:100%;margin:12px 0;font-size:14px}
article.post th,article.post td{border:1px solid var(--line);padding:7px 10px;text-align:left}
article.post th{background:var(--paper);font-size:12.5px}
article.post caption{caption-side:top;text-align:left;font-size:12.5px;color:var(--ink-soft);padding-bottom:6px}
/* brede tabellen scrollen zelf op mobiel; de pagina scrollt nooit horizontaal */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0}
.tablewrap table{margin:0;min-width:440px}
.tablewrap:focus-visible{outline:2px solid var(--floor);outline-offset:2px}
article.post thead th{background:var(--paper);vertical-align:bottom}
/* eerste kolom blijft herkenbaar tijdens horizontaal scrollen */
article.post tbody th[scope="row"]{position:sticky;left:0;background:var(--card);font-weight:600;text-align:left}
article.post thead th:first-child{position:sticky;left:0;background:var(--paper);z-index:1}
.swipe-hint{display:none;font-size:12.5px;color:var(--ink-soft);margin:12px 0 -6px}
@media(max-width:600px){.swipe-hint{display:block}}
/* scopevermelding onder iedere resultaattabel */
.tabel-scope{font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin:6px 0 0}
/* term met korte toelichting bij hover of focus */
.uitleg{border-bottom:1px dotted var(--ink-soft);cursor:help}
/* korte melding bij ieder rekenvoorbeeld */
.note-indicatief{background:#EEF1F4;border-left:3px solid var(--ink-soft);border-radius:0 6px 6px 0;padding:7px 10px;margin:12px 0;font-size:13px;color:var(--ink)}
/* uitgeschreven som onder een afgerond tabelbedrag */
article.post .calc{display:block;margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--ink-soft)}

/* winst-verliesgrafieken (payoff-chart.js) */
.payoff-figure{margin:18px 0;padding:14px 14px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.payoff-figure .payoff-title{margin:0 0 8px;font-size:14.5px;font-weight:650;line-height:1.3}
.payoff-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 8px;padding:0;list-style:none;font-size:12.5px}
.payoff-legend li{display:flex;align-items:center;gap:6px;margin:0;color:var(--ink)}
.payoff-legend svg{flex:0 0 auto}
.payoff-chartwrap{width:100%}
.payoff-chart{display:block;width:100%;height:auto}
.payoff-figure figcaption{margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.payoff-figure figcaption b{color:var(--ink);font-weight:600}
.payoff-note{display:block;margin-top:5px}
.payoff-fallback{font-size:13px;color:var(--ink-soft)}
/* kerngetallen: samenvattingsregel op desktop, informatieblokken op mobiel */
.payoff-keys{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.payoff-keys li{font-size:12.5px;line-height:1.4;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-left-width:3px;border-radius:0 6px 6px 0;padding:5px 9px}
.payoff-keys li.tone-floor{border-left-color:var(--floor)}
.payoff-keys li.tone-warn{border-left-color:var(--warn)}
.payoff-keys li.tone-soft{border-left-color:var(--ink-soft)}
@media(max-width:600px){
  .payoff-figure{padding:12px 8px 10px}
  .payoff-figure .payoff-title{font-size:14px}
  .payoff-legend{gap:5px 12px;font-size:12.5px}
  /* op mobiel elk kerngetal op een eigen regel, goed leesbaar */
  .payoff-keys{flex-direction:column;gap:5px}
  .payoff-keys li{width:100%}
}
/* bronvermelding met controledatum */
.bron{font-size:13px;color:var(--ink-soft);margin:12px 0}
.bron a{color:var(--floor)}
.bronnenlijst{font-size:13.5px;line-height:1.55}
.bronnenlijst li{margin-bottom:8px}
.bronnenlijst a{color:var(--floor)}

/* opvallende informatieblokken */
.callout{background:#EDF6F1;border:1px solid var(--floor);border-left-width:4px;border-radius:0 8px 8px 0;padding:14px 16px;margin:18px 0}
.callout>h2{margin-top:0;color:var(--floor)}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout-warn{background:#FBEFE3;border-color:var(--warn)}
.callout-warn>h2{color:#7A3E0B}

/* schematische, brokerneutrale orderkaart */
.ordercard-figure{margin:16px 0}
.ordercard{border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden}
.ordercard-head{margin:0;padding:10px 14px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:12.5px}
.ordercard-head span{display:block;font-size:11px;color:#AEB9C6;margin-top:2px}
.ordercard-grid{margin:0;padding:0}
.oc-row{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;padding:9px 14px;border-top:1px solid var(--line);font-size:13.5px}
.oc-row:first-child{border-top:0}
.ordercard dt{display:flex;align-items:center;gap:8px;font-weight:600;margin:0;color:var(--ink)}
.ordercard dd{margin:0;font-family:var(--mono);font-size:13px;color:var(--ink);text-align:right}
.oc-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:var(--floor);color:#fff;font-family:var(--mono);font-size:11.5px;font-weight:400}
.oc-total{background:var(--paper);font-weight:600}
.ordercard-figure figcaption{margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
@media(max-width:600px){
  .oc-row{flex-direction:column;align-items:flex-start;gap:2px}
  .ordercard dd{text-align:left;padding-left:28px}
}
/* leesbare, identieke disclaimer onder ieder artikel: bewust niet in microtekst */
article.post .legal{margin-top:28px;border-top:2px solid var(--line);padding-top:16px}
article.post .legal h2{font-size:15px;margin:0 0 10px}
article.post .legal p{font-size:13.5px;line-height:1.65;color:var(--ink);margin:10px 0}
article.post .cta{display:block;background:#EDF6F1;border:1px solid var(--floor);border-radius:8px;padding:12px 14px;margin:16px 0;color:var(--floor);font-weight:600;text-decoration:none}
.postlist{list-style:none;margin:16px 0}
.postlist li{background:var(--card);border:1px solid var(--line);border-radius:8px;margin-bottom:10px}
.postlist a{display:block;padding:14px 16px;text-decoration:none;color:var(--ink)}
.postlist a:hover{border-color:var(--floor)}
.postlist .cat{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}

/* toestemming en statusmelding bij de gratis introductie */
.checkrow{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:13px;font-weight:400;color:var(--ink)}
.checkrow input{margin-top:2px;flex:0 0 auto}


/* uitleg over het filter dat de bezoeker zelf instelde (BUG-001) */
.altnotice{border-left:3px solid var(--warn);padding:8px 12px;background:#FBEFE3;font-size:13px;border-radius:0 6px 6px 0;color:#7A3E0B;margin:10px 0}
.altnotice p{margin:0}
.altnotice p+p{margin-top:6px}

/* Wat tot 21 september 2026 in `style=`-attributen stond (BUG-012). De CSP
   van de zoeksite is `style-src 'self'` zonder `'unsafe-inline'`, dus die
   attributen werden geblokkeerd: de kostenmeter stond altijd op 0% en het
   meterwoord verloor zijn kleur. De naaldstand is een gemeten waarde en
   wordt in app.js via `element.style` gezet -- dat is de CSSOM en valt niet
   onder `style-src-attr`. */
.floorline-krap{margin-bottom:10px}
.floorlijst{margin:6px 0 0 18px}

/* De cookiebanner (web/consent.js). Onderaan vast, zonder de pagina te
   blokkeren: zoeken en betalen werken ook zolang er nog niet gekozen is. De
   body krijgt zolang ruimte onderaan, zodat de banner geen knop bedekt.
   Weigeren en accepteren zien er bewust hetzelfde uit. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card,#fff);border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(0,0,0,.08);padding:12px 16px}
.consent-tekst{max-width:860px;margin:0 auto 10px;font-size:13px;line-height:1.45;color:var(--ink)}
.consent-knoppen{max-width:860px;margin:0 auto;display:flex;gap:10px;flex-wrap:wrap}
.consent-knoppen .btn{padding:9px 18px;font-size:14px}
body.consent-open{padding-bottom:210px}
@media (min-width:700px){body.consent-open{padding-bottom:140px}}

/* Campagnepagina's (web/landing/). */
.landing h1{margin-top:28px}
.landing-punten{margin:14px 0 18px 20px;line-height:1.6}
.landing-cta{margin:6px 0 30px}
/* "Cookie-instellingen" in de voet: een knop (hij opent de banner, gaat
   nergens heen) die eruitziet als de links ernaast. */
.linkknop{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* "Belangrijke informatie" (web/belangrijke-informatie.html): gewone lopende
   tekst, korte alinea's, lucht tussen de secties. */
.info-tekst{max-width:720px;line-height:1.6}
.info-tekst h1{margin-top:28px}
.info-tekst h2{font-size:18px;margin:28px 0 8px}
.info-tekst p{margin:0 0 10px}
.info-tekst ul{margin:0 0 12px 20px}
.info-gegevens{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:4px 16px;margin:0 0 12px}
.info-gegevens dt{font-weight:600}
.info-gegevens dd{margin:0;overflow-wrap:anywhere}
@media (max-width:520px){.info-gegevens{grid-template-columns:1fr}.info-gegevens dd{margin-bottom:8px}}
.info-tekst .mist{color:var(--warn);font-style:italic}