/* Aanvullende stijl voor de gegenereerde tool- en kennisbankpagina's.
   Staat los van style.css zodat de handgemaakte pagina's onaangeroerd blijven. */

/* ---------- rekentool ---------- */
.tool-wrap{max-width:1120px;margin:0 auto;padding:0 24px 8px}
.tool-kaart{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px;margin:-28px 0 20px}
.tool-kaart h2{font-size:1.15rem;margin:0 0 14px}
.tool-kaart h3{font-size:1rem;margin:18px 0 8px;color:var(--navy)}
.veldrij{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.veldrij.twee{grid-template-columns:repeat(2,1fr)}
.veldrij.vier{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.veldrij,.veldrij.vier{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.veldrij,.veldrij.twee,.veldrij.vier{grid-template-columns:1fr}}
.veld{display:flex;flex-direction:column;gap:5px}
.veld label{font-size:.85rem;font-weight:600;color:var(--navy)}
.veld small{font-size:.78rem;color:var(--muted);line-height:1.4}
.veld input,.veld select,.veld textarea{font:inherit;font-size:.95rem;padding:9px 11px;
  border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);width:100%}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--blue)}
.veld input[readonly]{background:var(--bg);color:var(--muted)}
.veld.plat{flex-direction:row;align-items:center;gap:9px}
.veld.plat input[type=checkbox]{width:auto}
.veld.plat label{font-weight:500;font-size:.9rem}

/* ---------- uitkomst ---------- */
.tool-uitkomst{margin:0 0 18px}
.sum-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px}
@media(max-width:980px){.sum-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.sum-cards{grid-template-columns:1fr}}
.sum-card{background:var(--navy);color:#fff;border-radius:12px;padding:16px}
.sum-card b{display:block;font-size:1.35rem;line-height:1.25;margin:3px 0;letter-spacing:-.3px}
.sum-card small{opacity:.78;font-size:.8rem;display:block}
.sum-card.warn{background:#7f1d1d}
.sum-card.good{background:var(--green)}
.sum-card.neutraal{background:var(--navy-700,#123167)}
.oordeel{font-size:.95rem;padding:14px 16px;border-radius:10px;background:var(--blue-light);margin-bottom:16px}
.oordeel.slecht{background:#fef2f2;color:#7f1d1d}
.oordeel.goed{background:var(--green-light);color:#14532d}
.oordeel.let{background:#fffbeb;color:#7c4a03}
.oordeel a{color:inherit;text-decoration:underline}
.uit-tabel{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:12px;background:#fff}
.uit-tabel th{background:var(--bg);text-align:left;font-weight:600}
.uit-tabel th,.uit-tabel td{border:1px solid var(--line);padding:7px 9px;vertical-align:top}
.uit-tabel td.getal,.uit-tabel th.getal{text-align:right;white-space:nowrap}
.uit-tabel tr.tekort td{background:#fef2f2;color:#7f1d1d}
.uit-tabel tr.totaal td{font-weight:700;background:var(--bg)}
@media(max-width:640px){.uit-tabel{font-size:.8rem}.uit-tabel th,.uit-tabel td{padding:5px 6px}}

/* ---------- acties ---------- */
.tool-acties{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 20px}
.btn-licht{background:#fff;border:1.5px solid var(--line);color:var(--navy);font-weight:600;
  padding:9px 16px;border-radius:10px;cursor:pointer;font-size:.9rem;font-family:inherit}
.btn-licht:hover{border-color:var(--blue);color:var(--blue)}
.deel-status{font-size:.86rem;color:var(--green)}

/* ---------- leadblok ---------- */
.lead-blok{background:var(--blue-light);border-radius:var(--radius);padding:22px 24px;margin:0 0 34px}
.lead-blok h3{font-size:1.08rem;margin:0 0 6px;color:var(--navy)}
.lead-blok p{font-size:.93rem;margin:0 0 12px;color:var(--ink)}
.lead-form{display:flex;flex-wrap:wrap;gap:10px}
.lead-form input{flex:1 1 210px;font:inherit;font-size:.95rem;padding:11px 13px;
  border:1.5px solid #cbd8f2;border-radius:10px;background:#fff}
.lead-form input:focus{outline:none;border-color:var(--blue)}
.lead-form button{flex:0 0 auto;cursor:pointer;font-family:inherit}
.lead-klein{font-size:.8rem;color:var(--muted);margin:10px 0 0}
.lead-status{font-size:.9rem;margin:8px 0 0;min-height:1.2em}
.lead-status.goed{color:var(--green)}
.lead-status.fout{color:#b91c1c}

/* ---------- veelgestelde vragen ---------- */
details.faq{border:1px solid var(--line);border-radius:11px;margin:0 0 9px;background:#fff}
details.faq summary{cursor:pointer;font-weight:600;padding:13px 16px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--navy)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:1.25rem;font-weight:400;color:var(--blue);flex:0 0 auto}
details.faq[open] summary::after{content:"–"}
details.faq div{padding:0 16px 14px;font-size:.95rem}
details.faq div p{margin:0 0 9px}
details.faq div p:last-child{margin-bottom:0}

/* ---------- verwante links ---------- */
.verwant{border-top:1px solid var(--line);margin:38px 0 10px;padding-top:20px}
.verwant h3{font-size:1rem;color:var(--navy);margin:0 0 12px}
.verwant-links{display:flex;flex-wrap:wrap;gap:9px}
.verwant-links a{display:inline-block;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:7px 15px;font-size:.88rem;color:var(--navy);font-weight:500}
.verwant-links a:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}

/* ---------- gebouwkaart ---------- */
.gebouw{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start}
@media(max-width:860px){.gebouw{grid-template-columns:1fr}}
.gebouw svg{width:100%;height:auto;background:var(--bg);border-radius:12px;border:1px solid var(--line)}
.gebouw .deel{cursor:pointer;transition:opacity .15s}
.gebouw .deel:hover{opacity:.75}
.gebouw .deel.aan{stroke:var(--blue);stroke-width:3}
.deel-paneel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.deel-paneel h3{margin:0 0 4px;font-size:1.1rem;color:var(--navy)}
.deel-paneel .wie{display:inline-block;font-size:.8rem;font-weight:700;border-radius:999px;
  padding:4px 12px;margin:0 0 12px}
.wie.vve{background:var(--blue-light);color:var(--navy)}
.wie.eigenaar{background:#fff1ec;color:#b3400f}
.wie.gedeeld{background:#fffbeb;color:#7c4a03}
.deel-paneel dl{font-size:.9rem;margin:10px 0 0}
.deel-paneel dt{font-weight:600;color:var(--navy);margin-top:10px}
.deel-paneel dd{margin:2px 0 0}
.deel-lijst{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.deel-lijst button{font:inherit;font-size:.84rem;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}
.deel-lijst button.aan,.deel-lijst button:hover{border-color:var(--blue);color:var(--blue)}

/* ---------- wizard / scorecard ---------- */
.stap{display:none}
.stap.aan{display:block}
.stap-balk{display:flex;gap:6px;margin:0 0 18px}
.stap-balk span{flex:1;height:5px;border-radius:3px;background:var(--line)}
.stap-balk span.aan{background:var(--blue)}
.wizard-knoppen{display:flex;justify-content:space-between;gap:12px;margin-top:20px}
.score-ring{display:grid;place-items:center;width:132px;height:132px;border-radius:50%;
  background:conic-gradient(var(--blue) calc(var(--p,0)*1%),var(--line) 0);margin:0 auto 14px}
.score-ring b{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;
  background:#fff;font-size:1.7rem;color:var(--navy)}
.check-lijst{list-style:none;margin:14px 0 0;padding:0;font-size:.93rem}
.check-lijst li{padding:8px 0 8px 28px;position:relative;border-bottom:1px solid var(--line)}
.check-lijst li::before{position:absolute;left:0;top:8px;font-weight:700}
.check-lijst li.ok::before{content:"✓";color:var(--green)}
.check-lijst li.nee::before{content:"!";color:#b91c1c}
.check-lijst li.let::before{content:"~";color:#b45309}

/* ---------- afdrukken ---------- */
@media print{
  .topbar,header,footer,.tool-acties,.lead-blok,.cta-band,.verwant,.nav-knop{display:none!important}
  body{font-size:11pt}
  .tool-kaart{box-shadow:none;border:1px solid #ccc;margin:0 0 12px}
  .sum-card{background:#fff!important;color:#000!important;border:1px solid #999}
  .sum-card small{opacity:1}
  a[href]::after{content:""}
  details.faq{page-break-inside:avoid}
  details.faq div{display:block!important}
}