/* Iedere Druppel Telt — publieke rekentool (tenant-thema via --brand / --accent / --ink) */
:root{
  --brand:#0aa1dd; --brand-rgb:10,161,221; --accent:#38bdf8; --accent-rgb:56,189,248; --ink:#2f4354;
  --font:Inter,"Segoe UI",Arial,sans-serif; --radius:16px;
  --bg:#f4f7fb; --card:#ffffff; --card-2:#f9fbfd; --line:#dfe7ef; --text:#16202a; --muted:#5f6b7a;
  --good:#0f7a4a; --good-bg:#e8f7ee; --warn:#8a5a00; --warn-bg:#fff4dc; --bad:#b42318; --bad-bg:#fdecec;
  --shadow:0 8px 24px rgba(16,24,40,.07);
  --brand-soft:rgba(var(--brand-rgb),.10); --brand-line:rgba(var(--brand-rgb),.28);
  --heading:var(--ink); --brand-fg:#087aa8; --brand-solid:#087aa8;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0d1620; --card:#152230; --card-2:#1a2a3a; --line:#2a3f52; --text:#e7eef5; --muted:#9db0c3;
  --good:#5fd39a; --good-bg:rgba(95,211,154,.12); --warn:#ffcc66; --warn-bg:rgba(255,204,102,.12); --bad:#ff8a80; --bad-bg:rgba(255,138,128,.12);
  --shadow:0 10px 28px rgba(0,0,0,.4); --brand-soft:rgba(var(--brand-rgb),.18); --brand-line:rgba(var(--brand-rgb),.45);
  --heading:#e7eef5; --brand-fg:#3db8ea;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;font-size:15px;
  background-image:radial-gradient(1200px 500px at 85% -10%, rgba(var(--brand-rgb),.13), transparent 60%),radial-gradient(900px 400px at -10% 10%, rgba(var(--accent-rgb),.10), transparent 60%);background-attachment:fixed}
h1,h2,h3{color:var(--heading);margin:0;line-height:1.25}
h2{font-size:1.15rem} h3{font-size:1rem;margin-bottom:8px}
a{color:var(--brand-fg)}
.container{max-width:1500px;margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--brand-solid);color:#fff;padding:8px 12px;z-index:100}
.skip-link:focus{left:8px}
[hidden]{display:none!important}

/* Header */
.site-header{background:var(--card);border-bottom:4px solid var(--brand);box-shadow:var(--shadow);margin-bottom:20px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:18px;min-width:0}
.brand-logo{height:64px;max-width:240px;object-fit:contain}
.brand-home{display:inline-flex;flex:none;border-radius:10px}
.brand-home:has(> img[hidden]){display:none}
.brand-home[href]:hover .brand-logo{opacity:.85}
.brand-home[href]:focus-visible{outline:3px solid var(--brand-fg,#0aa1dd);outline-offset:3px}
html[data-theme="dark"] .brand-logo:not(.no-plate){background:#fff;border-radius:10px;padding:6px 10px}
.brand-text h1{font-size:1.6rem;letter-spacing:-.01em}
.subtitle{margin:2px 0 0;color:var(--muted)}
.header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.partner-logos{display:flex;gap:10px;align-items:center}
.partner-logos img{height:40px;max-width:130px;object-fit:contain;background:#fff;border-radius:10px;padding:4px 8px;border:1px solid var(--line)}
.partner-logos a.partner-home{display:inline-flex;border-radius:10px}
.partner-logos a.partner-home img{transition:border-color .15s,box-shadow .15s}
.partner-logos a.partner-home:hover img{border-color:var(--brand-line,var(--line));box-shadow:0 0 0 2px var(--brand-soft,transparent)}
.partner-logos a.partner-home:focus-visible{outline:3px solid var(--brand-fg,#0aa1dd);outline-offset:2px}
.intro{max-width:900px;color:var(--muted);margin:0 0 18px;font-size:1.02rem}

/* Layout */
.layout{display:grid;grid-template-columns:460px 1fr;gap:20px;align-items:start}
@media (max-width:1180px){.layout{grid-template-columns:1fr}}
.stack{display:grid;gap:16px}
.section-gap{margin-top:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card-header{padding:14px 18px;border-bottom:1px solid var(--line);background:var(--card-2)}
.card-header.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card-body{padding:16px 18px}
.grid-2,.grid-3{display:grid;gap:12px}
.grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:700px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Formulieren */
.field label{display:block;font-weight:700;font-size:.88rem;margin-bottom:5px}
input[type=text],input[type=number],input[type=search],input[type=email],select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font:inherit;outline:none}
input:focus,select:focus,button:focus-visible,.info:focus{outline:none;border-color:var(--brand-fg);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.25)}
.static-value{padding:9px 11px;border:1px dashed var(--line);border-radius:10px;background:var(--card-2);font-weight:700}
.info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--brand-solid);color:#fff;font-size:11px;font-weight:800;font-style:normal;line-height:1;cursor:help;margin-left:4px;vertical-align:1px;flex:none;user-select:none}
/* i-knopjes: raakvlak minimaal 26×26 px (WCAG 2.5.8) zonder dat het icoon groter oogt */
.info::after{content:"";position:absolute;inset:-4px;border-radius:50%}
.info[hidden]{display:none}
.h-info{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.h-info>h2,.h-info>h3{margin:0}
.tooltip{position:fixed;z-index:200;max-width:min(340px,calc(100vw - 16px));background:#1d2b38;color:#fff;font-size:.82rem;line-height:1.45;padding:9px 12px;border-radius:8px;box-shadow:var(--shadow);text-align:left;font-weight:400}
.tooltip ul{margin:0;padding-left:1.1em}
.tooltip li+li{margin-top:3px}
.note{font-size:.85rem;color:var(--muted);background:var(--card-2);border:1px dashed var(--line);padding:10px 12px;border-radius:10px}
.subsidy{border:1px solid var(--brand-line);background:var(--brand-soft);border-radius:12px;padding:12px 14px;font-size:.9rem}
.subsidy strong{color:var(--heading)}
.tag{display:inline-block;font-size:.72rem;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--warn-bg);color:var(--warn);margin-left:6px;vertical-align:1px}

/* Knoppen */
.btn{border:0;border-radius:10px;padding:10px 14px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:transform .12s ease, filter .12s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-primary{background:var(--brand-solid);color:#fff}
.btn-ghost{background:transparent;color:var(--heading);border:1px solid var(--line)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.icon-btn{border:1px solid var(--line);background:var(--card);color:var(--text);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.1rem}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.auto-badge{font-size:.82rem;font-weight:700;color:var(--good);background:var(--good-bg);padding:7px 10px;border-radius:999px}

/* Tabs & tabellen */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{background:var(--card-2);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:7px 12px;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.tab.active{background:var(--brand-solid);color:#fff;border-color:var(--brand-fg)}
.tab-panel{display:none}.tab-panel.active{display:block}
.table-wrap{overflow:auto;max-height:440px;border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{background:var(--card-2);position:sticky;top:0;z-index:1;font-size:.8rem;color:var(--muted)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.center,th.center{text-align:center}
td input[type=number]{width:70px;padding:5px 7px;text-align:right}
td input[type=text]{min-width:130px;padding:5px 7px}
tr.active td{background:var(--brand-soft);font-weight:700}
tr.dw td:first-child::after{content:" ⚠";color:var(--bad)}
.small{font-size:.83rem;color:var(--muted);margin:4px 0 8px}

/* Weergave & metrics */
.view-card{padding:14px 18px;background:linear-gradient(135deg,var(--brand-soft),transparent)}
.view-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.view-title{font-weight:800;color:var(--heading);font-size:1.05rem}
.segmented{display:inline-flex;background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:4px}
.segmented button{border:0;background:transparent;color:var(--text);font:inherit;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer}
.segmented button.active{background:var(--brand-solid);color:#fff}
body.view-focus-water .money-only, body.view-focus-money .water-only{display:none!important}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1400px){.metrics{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.metrics{grid-template-columns:1fr}}
.metric{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.metric.flat{box-shadow:none;background:var(--card-2)}
.metric.hl{border-color:var(--brand-line);background:linear-gradient(180deg,var(--brand-soft),var(--card))}
.metric .label{font-size:.82rem;color:var(--muted);margin-bottom:4px}
.metric .value{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--heading);font-variant-numeric:tabular-nums}
.metric .sub{font-size:.8rem;color:var(--muted);margin-top:4px}
.badge{display:inline-flex;padding:6px 12px;border-radius:999px;font-weight:800;font-size:.88rem}
.badge.good{background:var(--good-bg);color:var(--good)} .badge.warn{background:var(--warn-bg);color:var(--warn)} .badge.bad{background:var(--bad-bg);color:var(--bad)}
.alert{padding:12px 14px;border-radius:12px;font-size:.9rem}
.alert.bad{background:var(--bad-bg);color:var(--bad);border:1px solid rgba(180,35,24,.25)}
.conclusion p{margin:0 0 6px}
.summary-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
body.view-focus-water .summary-grid, body.view-focus-money .summary-grid{grid-template-columns:1fr}

/* Grafiek */
.chart{display:grid;gap:6px}
.bar-row{display:grid;grid-template-columns:96px 1fr 132px;gap:10px;align-items:center;font-size:.85rem}
.bar-row .lbl{color:var(--muted)}
.bar-track{position:relative;background:var(--card-2);border:1px solid var(--line);height:14px;border-radius:999px;overflow:visible}
.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--brand))}
.bar-fill.use{background:linear-gradient(90deg,#34d399,#0f9d58)}
.bar-mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:#0f9d58}
.pill{font-size:.72rem;font-weight:800;padding:1px 7px;border-radius:999px;margin-left:4px}
.pill.up{background:var(--good-bg);color:var(--good)} .pill.down{background:var(--bad-bg);color:var(--bad)}
.stat-list{display:grid;gap:8px}
.stat{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:.9rem}
.stat span:last-child{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.stat.total{border-color:var(--brand-line);background:var(--brand-soft)}

/* Coach */
.coach-top{display:grid;grid-template-columns:220px 1fr;gap:16px}
@media (max-width:900px){.coach-top{grid-template-columns:1fr}}
.score-card{border-radius:14px;padding:18px;text-align:center;color:#fff;background:linear-gradient(135deg,var(--ink),var(--brand-solid))}
html[data-theme="dark"] .score-card{background:linear-gradient(135deg,#0b1a26,var(--brand-solid))}
.score-value{font-size:2.6rem;font-weight:900;line-height:1}
.score-stars{font-size:1.3rem;letter-spacing:3px;margin-top:6px}
.score-class{font-weight:800}
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:900px){.ai-grid{grid-template-columns:1fr 1fr}}
.ai-tile{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card-2)}
.ai-tile h3{font-size:.85rem;margin-bottom:4px}
.ai-tile p{margin:0;font-size:.85rem}
.top-list{margin:0;padding-left:20px;display:grid;gap:6px}
.top-list li{font-size:.88rem}
.warn-list{display:grid;gap:6px}
.w{padding:8px 11px;border-radius:10px;font-size:.86rem;font-weight:600}
.w.green{background:var(--good-bg);color:var(--good)} .w.orange{background:var(--warn-bg);color:var(--warn)} .w.red{background:var(--bad-bg);color:var(--bad)}
.climate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:700px){.climate-grid{grid-template-columns:1fr 1fr}}
.climate{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:12px;padding:12px;text-align:center}
.climate .v{font-size:1.35rem;font-weight:900;color:var(--heading)} .climate .l{font-size:.78rem;color:var(--muted)}
.plan-list{display:grid;gap:6px}
.plan-list div{border-left:4px solid var(--brand);background:var(--card-2);padding:9px 12px;border-radius:8px;font-size:.88rem}

/* Scenario's */
.empty{padding:22px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px}
.reco{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.reco strong{display:block;color:var(--heading)}
.scenario-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:1000px){.scenario-cards{grid-template-columns:1fr}}
.scenario{position:relative;border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--card)}
.scenario.reco-card{border:2px solid var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.scenario .badge-reco{position:absolute;top:-11px;right:12px;background:var(--brand-solid);color:#fff;font-size:.75rem;font-weight:800;border-radius:999px;padding:3px 10px}
.scenario .icon{font-size:1.6rem}
.scenario .name{font-weight:800;color:var(--heading)}
.scenario .desc{font-size:.82rem;color:var(--muted);margin-bottom:8px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.kpi{background:var(--card-2);border-radius:8px;padding:6px 8px}
.kpi .l{font-size:.72rem;color:var(--muted)} .kpi .v{font-weight:800}
.scenario .foot{font-size:.82rem;margin-top:8px;color:var(--muted)}
.scenario-details{margin-top:14px}
.scenario-details summary{cursor:pointer;font-weight:700;margin-bottom:8px}
tr.best td{background:var(--good-bg)} tr.base td{background:var(--brand-soft)}

/* Footer */
.site-footer{margin-top:30px;border-top:1px solid var(--line);background:var(--card);padding:20px 0;font-size:.85rem;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.powered{font-size:.78rem}

/* Watercoach chat */
.coach-launch{position:fixed;right:20px;bottom:20px;z-index:60;border:0;border-radius:999px;padding:13px 18px;font:inherit;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--ink),var(--brand-solid));box-shadow:0 12px 28px rgba(0,0,0,.25);cursor:pointer}
.coach-chat{position:fixed;right:20px;bottom:20px;z-index:61;width:min(400px,calc(100vw - 24px));max-height:min(620px,calc(100vh - 40px));display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.3);overflow:hidden}
.coach-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;color:#fff;background:linear-gradient(135deg,var(--ink),var(--brand-solid))}
.coach-head .small{color:rgba(255,255,255,.85);margin:0}
.coach-head .icon-btn{width:32px;height:32px;background:rgba(255,255,255,.15);color:#fff;border:0}
.coach-body{flex:1;overflow:auto;padding:12px;display:grid;gap:8px;align-content:start;min-height:200px}
.msg{padding:9px 12px;border-radius:12px;font-size:.88rem;max-width:92%}
.msg.coach{background:var(--card-2);border:1px solid var(--line)}
.msg.user{background:var(--brand-solid);color:#fff;justify-self:end}
.msg strong{display:block;margin-bottom:2px}
.msg ul,.msg ol{margin:4px 0 0;padding-left:18px}
.coach-foot{border-top:1px solid var(--line);padding:10px;display:grid;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--brand-line);background:var(--brand-soft);color:var(--heading);border-radius:999px;padding:5px 10px;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.coach-input{display:flex;gap:6px}
.coach-input input{flex:1}

@media print{
  .info,.tooltip{display:none!important}
  .site-header .header-actions,.toolbar,.coach-launch,.coach-chat,#detailCard,.segmented,#btnScenarios{display:none!important}
  body{background:#fff} .card,.metric{box-shadow:none}
  body.view-focus-water .money-only, body.view-focus-money .water-only{display:block!important}
}

/* Systeemonderdelen in de kostentab */
tr.grp td{background:var(--card-2);font-weight:800;font-size:.78rem;color:var(--heading);text-transform:uppercase;letter-spacing:.04em}
tr.off td{color:var(--muted)} tr.off td:nth-child(4){text-decoration:line-through}
.kind{display:inline-block;font-size:.68rem;font-weight:800;padding:1px 6px;border-radius:999px;margin-left:4px;vertical-align:1px;background:var(--card-2);color:var(--muted);border:1px solid var(--line)}
.kind.k-verplicht{background:var(--brand-soft);color:var(--heading);border-color:var(--brand-line)}
.kind.k-stelpost,.kind.k-verbruiksdeel{background:var(--warn-bg);color:var(--warn);border-color:transparent}
#costTable td:nth-child(2){white-space:normal}

/* ---------- v3: adres zoeken, tankgrootte, deelbare link, insluiten ---------- */
.optional{font-weight:400;color:var(--muted);font-size:.85em}
.addr-wrap{position:relative}
.addr-list{position:absolute;z-index:20;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-height:260px;overflow:auto}
.addr-list li{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:.9rem}
.addr-list li:hover,.addr-list li.active{background:var(--brand-soft)}
.range-row{display:grid;grid-template-columns:1fr 84px;gap:10px;align-items:center}
.range-row input[type=range]{width:100%;accent-color:var(--brand-fg)}
.tank-curve{display:grid;gap:6px}
.tank-row{width:100%;background:transparent;border:1px solid transparent;border-radius:10px;padding:4px 6px;font:inherit;color:inherit;text-align:left;cursor:pointer;grid-template-columns:70px 1fr 260px}
.tank-row:hover{border-color:var(--line);background:var(--card-2)}
.tank-row:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.tank-row.current{border-color:var(--brand-fg);background:var(--brand-soft)}
.tank-row.rec .bar-fill{background:linear-gradient(90deg,var(--brand),var(--accent))}
.tank-tag{font-weight:700;color:var(--brand-fg);font-size:.78rem}
/* 3.3: droogteperiode (keuzeschakelaar + tijdlijn) */
.drt{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px}
.drt h3{margin:0;font-size:1.05rem}
.drt-switch{flex-wrap:wrap;justify-self:start}
.drt-switch button[aria-pressed="true"]{background:var(--brand-solid);color:#fff}
.drt-bar{position:relative;display:flex;height:22px;border-radius:999px;overflow:hidden;border:1px solid var(--line);background:var(--card-2)}
.drt-bar .drt-rain{background:linear-gradient(90deg,var(--accent),var(--brand));height:100%}
.drt-bar .drt-tap{background:repeating-linear-gradient(45deg,var(--warn-bg),var(--warn-bg) 6px,var(--card-2) 6px,var(--card-2) 12px);height:100%;border-left:2px solid var(--warn)}
.drt-axis{position:relative;height:18px;font-size:.75rem;color:var(--muted);margin-top:-4px}
.drt-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.drt-axis span:first-child{transform:none}.drt-axis span:last-child{transform:translateX(-100%)}
.drt-weeks{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.drt-weeks li{display:grid;grid-template-columns:72px 1fr;gap:8px;padding:6px 8px;border-radius:8px;background:var(--card-2);border-left:4px solid var(--brand)}
.drt-weeks li.leeg{border-left-color:var(--warn);background:var(--warn-bg)}
.drt-weeks li.leiding{border-left-color:var(--warn)}
.drt-weeks b{color:var(--heading)}
.drt-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.drt-opt{border:1px solid var(--line);border-radius:10px;padding:6px 8px;font-size:.82rem;background:var(--card)}
.drt-opt.on{border-color:var(--brand-fg);background:var(--brand-soft)}
.drt-opt strong{display:block;color:var(--heading)}
.drt-opt .ok{color:var(--good);font-weight:700}.drt-opt .no{color:var(--warn);font-weight:700}
@media (max-width:560px){.drt-options{grid-template-columns:repeat(2,minmax(0,1fr))}.drt-weeks li{grid-template-columns:1fr}.drt-switch button{padding:8px 10px}}

.tank-row.current .tank-tag{color:var(--heading)}
.tank-drt{font-size:.74rem;font-weight:700;color:var(--good)} /* v7: contrast op de gemarkeerde rij (axe) */
.tradeoff{border-left:4px solid var(--brand);padding:8px 12px;background:var(--card-2);border-radius:0 10px 10px 0}
.alert.info{background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--text)}
/* v5: .alert.info botste met het i-icoon (.info: 17×17 px) */
.alert.info{display:block;width:auto;height:auto;border-radius:12px;font-size:.9rem;font-weight:400;cursor:auto;margin-left:0;vertical-align:baseline;justify-content:normal}
@media (max-width:560px){.tank-row{grid-template-columns:54px 1fr 120px}.tank-row .small{display:none}}
/* ?embed=1: compacte weergave in een iframe op de gemeentesite */
html.embed .site-header{margin-bottom:10px;box-shadow:none}
html.embed .site-header .subtitle,html.embed .partner-logos,html.embed .intro,html.embed .site-footer .footer-links{display:none}
html.embed .coach-launch{bottom:12px;right:12px}
.tank-row .bar-track,.tank-row .bar-fill{display:block}

/* adres buiten deze rekentool: berekening stopt */
.outside-box{border:1px solid var(--brand-line);background:var(--brand-soft);border-radius:12px;padding:14px 16px;font-size:.92rem}
.outside-box p{margin:8px 0 0}
body.outside #report,body.outside #detailCard,body.outside #coachCard,body.outside #scenarioCard,body.outside #coachLaunch,body.outside #coachChat{display:none!important}
body.outside #app .card-body > :not(#fAddress):not(#outsideBox){display:none}
body.outside .layout{grid-template-columns:1fr;max-width:760px}
body.outside #systemLink,body.outside #permitLink{display:none!important}

/* ---------- v5: algemene rekentool (startscherm, proefberekeningen, resultaatkop) ---------- */
body.g-start #intro,body.g-start #app,body.g-start #coachCard,body.g-start #scenarioCard,body.g-start #coachLaunch,body.g-start #coachChat,body.g-start #generalBar,body.g-start #trialBanner,body.g-start #ownToolBox{display:none!important}
.gstart{display:block}
.gs-hero{max-width:900px;margin:6px 0 20px}
.gs-kicker{margin:0 0 6px;font-weight:800;font-size:.85rem;letter-spacing:.03em;text-transform:uppercase;color:var(--brand-fg)}
.gs-hero h2{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em}
.gs-lead{margin:10px 0 0;color:var(--muted);font-size:1.05rem;max-width:820px}
.gs-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px;align-items:start}
@media (max-width:980px){.gs-grid{grid-template-columns:1fr}}
.gs-new{border:2px solid var(--brand-line)}
.gs-new .card-header{background:var(--brand-soft)}
.btn-lg{padding:13px 20px;font-size:1.05rem}
.stepper{display:grid;grid-template-columns:48px 96px 48px;gap:8px;align-items:center}
.stepper input{text-align:center;font-size:1.1rem;font-weight:700}
.step-btn{justify-content:center;font-size:1.3rem;padding:6px 0;height:44px}
.field-err{margin:6px 0 0;color:var(--bad);font-weight:700;font-size:.86rem}
input[aria-invalid="true"]{border-color:var(--bad)}
.gs-steps{margin:0;padding:0;list-style:none;counter-reset:gs;display:grid;gap:12px}
.gs-steps li{counter-increment:gs;display:grid;grid-template-columns:34px 1fr;column-gap:12px}
.gs-steps li::before{content:counter(gs);grid-row:span 2;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--brand-solid);color:#fff;font-weight:800}
.gs-steps strong{color:var(--heading)} .gs-steps span{color:var(--muted);font-size:.92rem}
.gs-sources{margin:0;padding-left:20px;display:grid;gap:4px;font-size:.92rem}
.gs-examples{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.gs-example{width:100%;height:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;transition:transform .12s ease,box-shadow .12s ease}
.gs-example:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brand-line)}
.gs-example:focus-visible{outline:3px solid var(--brand-fg);outline-offset:2px}
.gs-example .ex-icon{font-size:1.8rem;line-height:1}
.gs-example .ex-title{font-weight:800;color:var(--heading);font-size:1.02rem}
.gs-example .ex-meta{font-size:.85rem;color:var(--muted)}
.gs-example .ex-result{margin-top:4px;font-size:.9rem;background:var(--brand-soft);border-radius:10px;padding:8px 10px}
.gs-example .ex-result strong{color:var(--heading)}
.gs-example .ex-go{margin-top:auto;padding-top:6px;color:var(--brand-fg);font-weight:800;font-size:.88rem}
.gbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px;padding:14px 18px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:var(--radius);box-shadow:var(--shadow)}
.gbar h2{font-size:1.15rem} .gbar .small{margin:2px 0 0}
.gbar-actions{display:flex;gap:10px;flex-wrap:wrap}
.gnote{margin:0 0 14px}
.gnote p{margin:6px 0 0}

/* ---------- v5: vragen uit de FAQ (rekentool en vergunningen) ---------- */
.fw-list{display:grid}
.fw-item{border-bottom:1px solid var(--line)}
.fw-item:first-child{border-top:1px solid var(--line)}
.fw-q{margin:0;font-size:.98rem}
.fw-q button{all:unset;box-sizing:border-box;display:flex;gap:10px;align-items:flex-start;width:100%;padding:12px 4px;cursor:pointer;font-weight:700;color:var(--heading);line-height:1.4}
.fw-q button:focus-visible{outline:3px solid var(--brand-fg);outline-offset:2px;border-radius:6px}
.fw-icon{flex:0 0 18px;height:18px;border-radius:50%;border:2px solid var(--brand-fg);position:relative;margin-top:2px}
.fw-icon::before,.fw-icon::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:2px;background:var(--brand-fg);transform:translate(-50%,-50%)}
.fw-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.fw-item.open .fw-icon::after{transform:translate(-50%,-50%) rotate(0)}
.fw-local{font-size:.72rem;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--brand-soft);color:var(--heading);white-space:nowrap}
.fw-a{padding:0 4px 14px 32px;font-size:.92rem}
.fw-a p{margin:0 0 8px;max-width:80ch}
.fw-a table{font-size:.85rem;margin:8px 0}.fw-a th,.fw-a td{white-space:normal}
.fw-a aside{border-left:4px solid var(--brand);background:var(--card-2);border-radius:0 10px 10px 0;padding:8px 12px;margin:10px 0}
.fw-a aside.todo{border-left-color:var(--warn);background:var(--warn-bg)}
.fw-a img{max-width:100%;border-radius:10px;border:1px solid var(--line)}
.fw-more{font-weight:700}
.faq-hint{font-weight:700;white-space:nowrap}

/* review v6: geen style-attributen meer (CSP) */
.nf-main{padding-top:12vh;text-align:center}.nf-icon{font-size:64px}.nf-msg{margin:12px auto}

/* ===== v7: systeemkeuze (zelfbouw / kant-en-klaar / kruipruimtezak) ===== */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* v7: altijd een gelijk raster — 4 naast elkaar (breed), 2 om 2 (normaal) of onder elkaar (smal); nooit 3 + 1 */
#systemCard .card-body,.wz-body{container-type:inline-size}
.sys-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@container (min-width:960px){.sys-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (max-width:520px){.sys-nums{grid-template-columns:1fr 1fr}.sys-nums span:last-child{grid-column:1/-1}}
@container (max-width:400px){.sys-cards{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.sys-cards{grid-template-columns:minmax(0,1fr)}}
.sys-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px 14px 12px;border:2px solid var(--line);border-radius:14px;background:var(--card-2);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.sys-card:hover{border-color:var(--brand-line)}
.sys-card.on{border-color:var(--brand-solid);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12)}
.sys-card:focus-within{outline:3px solid var(--brand-fg);outline-offset:2px}
.sys-card.single{cursor:default}
.sys-card input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.sys-head{display:flex;align-items:center;gap:10px}
.sys-icon{font-size:1.6rem;line-height:1}
.sys-title{font-weight:800;color:var(--heading);font-size:1.02rem}
.sys-card.on .sys-title::after{content:" ✓";color:var(--brand-fg)}
.sys-tag{font-size:.86rem;color:var(--muted);min-height:2.6em}
.sys-nums{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;border-top:1px solid var(--line);padding-top:8px;margin-top:auto}
.sys-nums span{display:flex;flex-direction:column}
.sys-nums strong{font-size:.98rem;color:var(--heading)}
.sys-nums small{font-size:.72rem;color:var(--muted);line-height:1.25}
.sys-badge{display:inline-block;align-self:flex-start;font-size:.74rem;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--muted)}
.sys-badge.ok{background:var(--good-bg);border-color:transparent;color:var(--good)}
.sys-detail{display:flex;flex-direction:column;gap:10px}
.sys-desc{margin:0;font-size:.95rem}
.sys-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.sys-block{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:0}
.sys-block>summary{cursor:pointer;font-weight:700;color:var(--heading);padding:10px 14px;list-style:none;display:flex;align-items:center;gap:8px}
.sys-block>summary::before{content:"▸";color:var(--brand-fg);transition:transform .15s}
.sys-block[open]>summary::before{transform:rotate(90deg)}
.sys-block>summary::-webkit-details-marker{display:none}
.sys-block>summary:focus-visible{outline:3px solid var(--brand-fg);outline-offset:-3px;border-radius:12px}
.sys-steps,.sys-notes,.sys-prov-list{margin:0;padding:0 14px 12px 32px;font-size:.9rem;display:flex;flex-direction:column;gap:6px}
.sys-steps li strong{display:block;color:var(--heading)}
.sys-steps li span{color:var(--muted)}
.sys-prov-list{list-style:none;padding-left:14px}
.sys-prov-list li strong{display:block}
.sys-prov-list li span{display:block;color:var(--muted);font-size:.86rem}
.sys-providers>.small{padding:0 14px;margin:0 0 8px}
.sys-permit{margin:0}
@media (max-width:560px){.sys-nums{grid-template-columns:1fr 1fr}.sys-nums span:last-child{grid-column:1/-1}}

/* ===== v7: kleine stappen ('Ook zonder groot systeem') ===== */
.sys-note{font-size:.8rem;color:var(--heading);background:var(--card);border:1px dashed var(--line);border-radius:8px;padding:4px 8px}
.ms-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.ms-item{border:2px solid var(--line);border-radius:14px;background:var(--card-2);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.ms-item.on{border-color:var(--brand-solid);background:var(--brand-soft)}
.ms-head{display:flex;align-items:center}
.ms-check{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:800;color:var(--heading)}
.ms-check input{width:18px;height:18px;accent-color:var(--brand-solid)}
.ms-icon{font-size:1.4rem;line-height:1}
.ms-tag{margin:0;font-size:.86rem;color:var(--muted)}
.ms-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ms-row label{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted)}
.ms-row input[type=number]{width:96px}
.ms-cost{font-weight:700;color:var(--heading);white-space:nowrap}
.ms-effect{font-size:.9rem}
.ms-effect .small{color:var(--muted)}
.ms-details{margin-top:auto}
.ms-desc{margin:0 14px 8px;font-size:.9rem}
.ms-permit{margin:0 14px 8px}
.ms-details>.small{margin:0 14px 8px}
.ms-links{list-style:none;margin:0;padding:0 14px 12px;font-size:.86rem;display:flex;flex-direction:column;gap:4px}
.ms-summary .ms-metrics{margin-top:4px}
.ms-sub{font-size:1rem;line-height:1.35}

/* ===== v7: stappenplan (begeleide invoer) ===== */
.wz{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.wz[hidden]{display:none}
.wz-backdrop{position:absolute;inset:0;background:rgba(10,20,30,.55);backdrop-filter:blur(2px)}
.wz-dialog{position:relative;width:min(760px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;background:var(--card);color:var(--text);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden}
.wz-head{padding:18px 22px 10px;border-bottom:1px solid var(--line);background:var(--card-2);position:relative}
.wz-progress{height:5px;border-radius:999px;background:var(--line);overflow:hidden;margin:0 40px 12px 0}
.wz-bar{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .25s}
.wz-steps{list-style:none;margin:0 0 8px;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.wz-steps li{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);padding:3px 8px;border-radius:999px;border:1px solid transparent}
.wz-steps li .n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--line);color:var(--heading);font-weight:800;font-size:.72rem}
.wz-steps li.done .n{background:var(--good-bg);color:var(--good)}
.wz-steps li.cur{border-color:var(--brand-line);background:var(--brand-soft);color:var(--heading);font-weight:700}
.wz-steps li.cur .n{background:var(--brand-solid);color:#fff}
.wz-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-right:40px}
.wz-view button{padding:6px 12px;font-size:.88rem}
.wz-view button[aria-pressed="true"]{background:var(--brand-solid);color:#fff}
.wz-steplabel{margin:0;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.wz-title{margin:2px 0 4px;font-size:1.35rem;color:var(--heading)}
.wz-title:focus{outline:none}
.wz-lead{margin:0;color:var(--muted);font-size:.95rem}
.wz-close{position:absolute;top:12px;right:12px}
.wz-body{padding:18px 22px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.wz-foot{display:flex;gap:10px;align-items:center;padding:12px 22px;border-top:1px solid var(--line);background:var(--card-2);flex-wrap:wrap}
.wz-foot .grow{flex:1}
.wz-field{display:flex;flex-direction:column;gap:6px}
.wz-field label{font-weight:700;color:var(--heading)}
.wz-field .hint{font-size:.85rem;color:var(--muted)}
.wz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.wz-big{font-size:1.15rem}
.wz-stepper{display:flex;align-items:center;gap:8px}
.wz-stepper input{width:90px;text-align:center;font-size:1.2rem}
.wz-stepper .btn{min-width:44px;font-size:1.2rem}
.wz-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.wz-choice label{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:var(--card-2);cursor:pointer}
.wz-choice label.on{border-color:var(--brand-solid);background:var(--brand-soft)}
.wz-choice label.off{opacity:.55;cursor:not-allowed}
.wz-choice input{width:18px;height:18px;margin-top:3px;accent-color:var(--brand-solid)}
.wz-choice strong{display:block;color:var(--heading)}
.wz-choice small{color:var(--muted)}
.wz-outside{border:2px solid var(--bad);border-radius:12px;padding:12px 14px;background:var(--bad-bg)}
.wz-outside p{margin:6px 0 0}
.wz-live{border:1px dashed var(--line);border-radius:12px;padding:10px 14px;background:var(--card-2);font-size:.92rem}
.wz-result{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.wz-result .metric{padding:12px}
.wz-done{display:flex;gap:10px;flex-wrap:wrap}
.wz-addr{position:relative}
.wz-addr .addr-list{position:absolute;left:0;right:0;z-index:5}
.ms-open>summary{padding:10px 14px}
.ms-open[open]>summary{border-bottom:1px solid var(--line)}
.ms-open .ms-list{padding:12px}
@media (max-width:560px){.wz{padding:0}.wz-dialog{max-height:100vh;border-radius:0;width:100%}.wz-head,.wz-body,.wz-foot{padding-left:14px;padding-right:14px}.wz-foot .btn-ghost#wzSkip{order:3;width:100%}}
@media (prefers-reduced-motion:reduce){.wz-bar{transition:none}}
.sys-more>summary{padding:10px 14px}
.sys-more-in{padding:0 14px 12px;display:flex;flex-direction:column;gap:10px}
body.wz-open{overflow:hidden}

/* v7.12: kaart 'Speel verder in DruppelsTellen' */
.game-body{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.game-text{flex:1 1 320px}.game-text h2{margin-bottom:4px}.game-text p{margin:0;color:var(--muted)}
.game-ico{flex:0 0 auto;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--brand-soft);color:var(--brand-fg)}
.game-ico svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.game-card .btn{min-height:44px}
html.embed .game-card{margin-top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =====================================================================================================================
   v8: antwoord eerst, keuzes daarna, details op aanvraag
   ===================================================================================================================== */
.visually-hidden,.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.alert.warn{background:var(--warn-bg);color:var(--warn);border:1px solid rgba(138,90,0,.25)}
.btn-sm{padding:6px 10px;font-size:.85rem}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--brand-fg);text-decoration:underline;cursor:pointer}
.v8-intro .intro{margin-bottom:6px}
.intro-steps{margin:0 0 16px;color:var(--muted)}
.only-narrow{display:none}
.plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,430px);gap:20px;align-items:start}
.blocks{display:grid;gap:16px;min-width:0}
.block-head{display:flex;align-items:center;gap:10px}
.block-head.row{justify-content:space-between}
.block-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--brand-solid);color:#fff;font-weight:800;font-size:.9rem;flex:none}
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;align-items:start}
.home-grid .stepper{grid-template-columns:44px minmax(56px,80px) 44px}
.sewer-hint{color:var(--muted)}
.trial-box summary,.dw-box summary,.ans-why summary,.ans-permit summary,.pp-said summary{cursor:pointer;font-weight:700;color:var(--heading)}
.trial-box[open] summary{margin-bottom:10px}
.use-choice{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.use-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:var(--card-2);cursor:pointer}
.use-opt input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--brand-solid)}
.use-opt span{display:flex;flex-direction:column}
.use-opt small{color:var(--muted)}
.use-opt.on{border-color:var(--brand-solid);background:var(--brand-soft)}
.use-opt.off{opacity:.6;cursor:not-allowed}
.use-opt:focus-within{outline:3px solid var(--brand-fg);outline-offset:2px}
.dw-box .stack{margin-top:10px}
.ack{display:flex;gap:8px;align-items:flex-start;font-weight:700;font-size:.9rem;margin-top:6px}
.ack input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--brand-solid)}
.size-choice{display:flex;flex-wrap:wrap;gap:8px}
.size-opt{position:relative;display:inline-flex;flex-direction:column;align-items:center;min-width:64px;padding:8px 12px;border:2px solid var(--line);border-radius:12px;background:var(--card-2);cursor:pointer;font-weight:800;color:var(--heading)}
.size-opt input{position:absolute;opacity:0;width:1px;height:1px}
.size-opt.on{border-color:var(--brand-solid);background:var(--brand-soft)}
.size-opt:focus-within{outline:3px solid var(--brand-fg);outline-offset:2px}
.size-opt .sz-rec{font-size:.72rem;font-weight:700;color:var(--good)}
.size-opt.rec{border-style:dashed}
.size-opt.rec.on{border-style:solid}
.tank-advice{margin:0;font-size:.95rem}
.drt-q{border:1px solid var(--line);border-radius:12px;padding:10px 14px 12px;margin:0}
.drt-q legend{font-weight:700;padding:0 6px;color:var(--heading)}
.drt-q .segmented{flex-wrap:wrap}
.drt-q p{margin:8px 0 0}
.expert>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.expert>summary::-webkit-details-marker{display:none}
.expert>summary::before{content:"▸";color:var(--brand-fg);font-weight:800}
.expert[open]>summary::before{content:"▾"}
.h2-like{font-size:1.15rem;font-weight:800;color:var(--heading)}
.sub-card{border:1px dashed var(--line);border-radius:12px;padding:12px 14px}
.row-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.compare .table-wrap{max-height:none}
.compare caption{caption-side:top;text-align:left;padding:8px 10px;color:var(--muted);font-size:.85rem}
.compare th[scope=row]{text-align:left;font-weight:700;white-space:nowrap}
.compare th[scope=col]{vertical-align:top;text-align:left}
.compare .cur{background:var(--brand-soft)}
.cmp-t{display:block;font-weight:800;margin-bottom:6px}
.cmp-on{display:inline-block;font-size:.78rem;font-weight:800;color:var(--good);background:var(--good-bg);border-radius:999px;padding:3px 8px}

/* antwoordkaart */
.answer-wrap{position:sticky;top:12px;min-width:0}
.answer{border:2px solid var(--brand-line)}
.answer:focus{outline:none}
.answer:focus-visible{outline:3px solid var(--brand-fg)}
.ans-head{padding:16px 18px 6px}
.ans-kicker{margin:0 0 4px;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:800}
.verdict{display:inline-block;font-size:1.35rem;font-weight:800;padding:4px 12px;border-radius:12px}
.verdict.good{background:var(--good-bg);color:var(--good)} .verdict.warn{background:var(--warn-bg);color:var(--warn)} .verdict.bad{background:var(--bad-bg);color:var(--bad)}
.ans-lead{margin:8px 0 0;font-size:.92rem}
.ans-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 18px}
.ans-num{display:flex;flex-direction:column;background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:10px}
.ans-num .v{font-size:1.05rem;font-weight:800;color:var(--heading);line-height:1.2;overflow-wrap:anywhere}
.ans-num .l{font-size:.78rem;color:var(--muted)}
.ans-num .chip-src{display:block;margin-top:4px}
.ans-list{margin:0;padding:4px 18px 8px;display:grid;gap:6px}
.ans-list>div{display:grid;grid-template-columns:96px 1fr;gap:8px;font-size:.9rem}
.ans-list dt{font-weight:700;color:var(--muted)}
.ans-list dd{margin:0}
.ans-permit,.ans-why{margin:0 18px 8px;border-top:1px solid var(--line);padding-top:8px}
.permit-plan .pp{display:grid;gap:8px;margin:8px 0}
.permit-plan .pp>div{display:grid;grid-template-columns:52px 1fr;gap:8px;font-size:.88rem}
.permit-plan dt{font-weight:800;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-fg);padding-top:2px}
.permit-plan dd{margin:0}
.pp-links{margin:6px 0 0;padding-left:18px}
.ans-next{margin:0 18px 10px;padding:10px 12px;border-radius:12px;background:var(--brand-soft);border:1px solid var(--brand-line)}
.ans-next p{margin:2px 0 8px;font-size:.92rem}
.nx-l{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--brand-fg)}
.why-list{margin:8px 0;padding-left:18px;font-size:.86rem}
.why-list li+li{margin-top:4px}
.ans-src{padding:0 18px 8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ans-src p{flex-basis:100%;margin:2px 0 0}
.src-l{font-weight:700;color:var(--muted)}
.chip-src{display:inline-block;font-size:.74rem;font-weight:700;color:var(--muted);background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.ans-actions{display:flex;gap:8px;flex-wrap:wrap;padding:6px 18px 4px}
.ans-fine{padding:0 18px 14px;margin:6px 0 0;color:var(--muted)}
.answer-bar{display:none}

/* verder met je plan */
.further h2{margin-bottom:12px}
.further-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.further-tile{display:flex;flex-direction:column;gap:4px;text-align:left;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.further-tile:hover{border-color:var(--brand-line)}
.further-tile:focus-visible{outline:3px solid var(--brand-fg);outline-offset:2px}
.further-tile.hl{border:2px solid var(--brand-solid)}
.further-tile[aria-expanded=true]{background:var(--brand-soft)}
.ft-ico{font-size:1.6rem;line-height:1}
.ft-ico svg{fill:none;stroke:var(--brand-fg);stroke-width:2}
.ft-title{font-weight:800;color:var(--heading)}
.ft-text{font-size:.88rem;color:var(--muted)}
.share-ask{margin-bottom:14px}
.share-ask p{margin:4px 0 10px}

/* smal (< 900 px), ook in een iframe (?embed=1): antwoord als onderbalk die opent tot de volledige kaart */
@media (max-width:899px){
  .plan{grid-template-columns:minmax(0,1fr)}
  .only-wide{display:none} .only-narrow{display:inline}
  body.v8{padding-bottom:72px}
  .answer-wrap{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;padding:0 8px 8px;pointer-events:none}
  .answer-bar{pointer-events:auto;display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:10px 14px;border:0;border-radius:14px;background:#1d2b38;color:#fff;font:inherit;font-weight:800;box-shadow:0 -6px 24px rgba(0,0,0,.25);cursor:pointer;text-align:left}
  .answer-bar:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .answer{display:none;pointer-events:auto;max-height:calc(100vh - 90px);overflow:auto;margin-bottom:8px}
  body.sheet-open .answer{display:block}
  body.sheet-open .answer-wrap{display:flex;flex-direction:column-reverse}
  body.sheet-open .answer-bar-ico{transform:rotate(180deg)}
  .coach-launch{bottom:84px}
  .ans-nums{grid-template-columns:repeat(3,minmax(0,1fr));padding:8px 12px}
  .ans-num .v{font-size:1rem}
}
@media (max-width:420px){
  .ans-nums{grid-template-columns:1fr}
  .ans-list>div{grid-template-columns:1fr}
  .permit-plan .pp>div{grid-template-columns:1fr}
}
@media print{
  .answer-wrap{position:static}
  .answer-bar,.ans-actions,.further-tiles{display:none}
}

@media (min-width:900px){body.v8 .coach-launch{right:auto;left:20px}}
.pp-links li{padding:4px 0}.pp-links a{display:inline-block;min-height:24px}
/* v8: adres buiten deze rekentool => alleen blok 1 (adres en melding) */
body.outside .answer-wrap,body.outside #blkUse,body.outside #systemCard,body.outside #blkTank,body.outside #expert,body.outside .further,body.outside #introSteps{display:none!important}
body.outside #blkHome .card-body > :not(#fAddress):not(#outsideBox){display:none}
body.outside .plan{grid-template-columns:1fr;max-width:760px}
body.outside.v8{padding-bottom:0}
.alert.info::after{content:none}
/* v8.1: Moet / Kost / Bel met status per procedure (zelfde regels als de vergunningencheck) */
.pp-procs{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:4px}
.pp-st{display:inline-block;font-size:.7rem;font-weight:800;padding:2px 7px;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.pp-st.st-nodig{background:var(--bad-bg);color:var(--bad)}.pp-st.st-waarsch{background:var(--warn-bg);color:var(--warn)}
.pp-st.st-onbekend{background:var(--card-2);color:var(--heading);border:1px solid var(--line)}.pp-st.st-aanbevolen{background:var(--brand-soft);color:var(--heading);border:1px solid var(--brand-line)}
.ans-how{align-self:center;font-weight:700;font-size:.9rem;min-height:24px;display:inline-flex;align-items:center}