/* ============================================================
   Vernast — Salpeter & zouten in vochtige muren
   Eigen layout-laag bovenop kelder.css + verslag.css
   Rood-wit ritme; nieuwe componenten voor kennis-/SEO-pagina
   ============================================================ */

/* ---------- intro-lead onder hero (kleine kerngedachte) ---------- */
.zlead{max-width:900px;margin:0 auto;}
.zlead .two{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.zlead .two .zc{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow-sm);}
.zlead .two .zc .k{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);}
.zlead .two .zc h3{font-size:19px;margin:10px 0 8px;}
.zlead .two .zc p{font-size:14.5px;color:var(--text-mid);line-height:1.6;}

/* ---------- ZSPLIT: tekst + foto naast elkaar (omkeerbaar) ---------- */
.zsplit{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.zsplit.flip{direction:rtl;}
.zsplit.flip>*{direction:ltr;}
.zsplit .zs-body .eyebrow{margin-bottom:16px;}
.zsplit .zs-body h2{font-size:36px;margin:0 0 18px;text-wrap:balance;}
.zsplit .zs-body p{font-size:16px;color:var(--text-mid);line-height:1.7;margin:0 0 14px;}
.zsplit .zs-body p b{color:var(--ink);}
.zsplit .zs-body .termbar{margin-top:22px;background:var(--red-soft);border:1px solid rgba(158,0,15,.14);border-radius:var(--radius);padding:16px 20px;font-size:14.5px;color:var(--ink);line-height:1.6;}
.zsplit .zs-body .termbar b{color:var(--red);}
.zs-media{position:relative;}
.zs-media image-slot{width:100%;height:440px;border-radius:var(--radius-lg);box-shadow:var(--shadow);display:block;}
.zs-media .tag{position:absolute;left:18px;bottom:18px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:9999px;box-shadow:0 10px 26px rgba(0,0,0,.18);}
.zs-media .cap{font-size:12.5px;color:var(--text-dim);margin-top:11px;}

/* ---------- SALTTABLE: gekleurde zoutgroepen-rijen (op rood) ---------- */
.salt-wrap{margin-top:50px;display:grid;gap:14px;}
.saltrow{background:#fff;border-radius:var(--radius);padding:22px 26px;display:grid;grid-template-columns:200px 1fr 1fr;gap:26px;align-items:center;border-left:6px solid var(--sc,#9e000f);box-shadow:0 16px 40px rgba(0,0,0,.18);}
.saltrow .sname{display:flex;align-items:center;gap:12px;}
.saltrow .sdot{width:34px;height:34px;border-radius:9px;background:var(--sc,#9e000f);flex:none;display:inline-flex;align-items:center;justify-content:center;}
.saltrow .sdot svg{width:18px;height:18px;color:#fff;}
.saltrow .sname b{font-size:16.5px;color:var(--ink);}
.saltrow .scol .lab{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:5px;}
.saltrow .scol p{font-size:14px;color:var(--text-mid);line-height:1.55;margin:0;}
.salt-note{margin-top:26px;font-size:14px;color:rgba(255,255,255,.82);text-align:center;max-width:760px;margin-left:auto;margin-right:auto;line-height:1.6;}

/* zoutkleuren */
.s-nitraat{--sc:#d9822b;}
.s-chloride{--sc:#1f9c8f;}
.s-sulfaat{--sc:#7b5bd6;}
.s-carbonaat{--sc:#5b6b7b;}
.s-natrium{--sc:#2f9e5b;}

/* ---------- SRCGRID: bronnen-chips + intro ---------- */
.src-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start;}
.src-intro h2{font-size:34px;margin:14px 0 16px;text-wrap:balance;}
.src-intro p{font-size:15.5px;color:var(--text-mid);line-height:1.7;margin:0 0 14px;}
.src-chips{display:flex;flex-wrap:wrap;gap:11px;align-content:flex-start;}
.src-chips .sch{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:9999px;padding:11px 18px;font-size:14px;font-weight:600;color:var(--ink);box-shadow:var(--shadow-sm);}
.src-chips .sch svg{width:16px;height:16px;color:var(--red);flex:none;}
.src-warn{margin-top:26px;grid-column:1/-1;background:#fef6e7;border:1px solid #f2d59a;border-left:4px solid #d9822b;border-radius:var(--radius);padding:20px 24px;display:flex;gap:16px;align-items:flex-start;}
.src-warn .i{flex:none;width:40px;height:40px;border-radius:11px;background:#d9822b;display:inline-flex;align-items:center;justify-content:center;}
.src-warn .i svg{width:20px;height:20px;color:#fff;}
.src-warn h4{font-size:16px;margin:0 0 5px;color:#7a4a12;}
.src-warn p{font-size:14px;color:#7a4a12;line-height:1.6;margin:0;}

/* ---------- ZZSTEPS: zig-zag genummerde stappen met foto (op rood) ---------- */
.zzsteps{margin-top:52px;display:grid;gap:30px;}
.zzstep{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:#F8FAFC;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;}
.zzstep.alt{direction:rtl;}
.zzstep.alt>*{direction:ltr;}
.zz-media image-slot{width:100%;height:300px;border-radius:var(--radius);box-shadow:0 20px 46px rgba(0,0,0,.34);display:block;}
.zz-media .cap{font-size:12px;color:var(--text-dim);margin-top:10px;}
.zz-body .zn{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:hsl(0 72% 35%);color:#fff;font-size:24px;font-weight:800;margin-bottom:16px;}
.zz-body h3{color:#000;font-size:23px;margin:0 0 12px;letter-spacing:-.01em;}
.zz-body p{color:#000;font-size:15px;line-height:1.7;margin:0 0 10px;}
.zz-body p b{color:#000;}
.zz-body .flag{display:inline-flex;align-items:center;gap:8px;margin-top:8px;background:hsl(0 72% 35%);border-radius:9999px;padding:8px 15px;font-size:12.5px;font-weight:700;color:#fff;}
.zz-body .flag svg{width:15px;height:15px;color:#ffb3ac;}

/* ---------- MECHGRID: krachten achter zoutschade ---------- */
.mech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;}
.mech{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s;}
.mech:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.mech .mnum{position:absolute;right:18px;top:10px;font-family:var(--serif);font-size:52px;color:rgba(158,0,15,.09);font-weight:400;}
.mech .mi{width:46px;height:46px;border-radius:12px;background:var(--red-soft);color:var(--red);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;}
.mech .mi svg{width:23px;height:23px;}
.mech h3{font-size:17.5px;margin:0 0 9px;}
.mech p{font-size:14px;color:var(--text-mid);line-height:1.6;}

/* ---------- MATGRID: wat zouten doen met materialen (foto boven, op rood) ---------- */
.mat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px;}
.matcard{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.2);display:flex;flex-direction:column;}
.matcard image-slot{width:100%;height:170px;display:block;}
.matcard .mc-body{padding:22px 22px 26px;}
.matcard .mc-tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:9px;}
.matcard .mc-tag svg{width:15px;height:15px;}
.matcard h3{font-size:18px;margin:0 0 9px;}
.matcard ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.matcard ul li{position:relative;padding-left:18px;font-size:13.5px;color:var(--text-mid);line-height:1.5;}
.matcard ul li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--red);}

/* ---------- WARNBOX: waarom losse behandeling niet werkt ---------- */
.warnbox{max-width:940px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px 44px;box-shadow:var(--shadow-sm);}
.warnbox .wtop{display:flex;gap:18px;align-items:flex-start;padding-bottom:24px;border-bottom:1px solid var(--line);}
.warnbox .wtop .i{flex:none;width:50px;height:50px;border-radius:13px;background:var(--red);display:inline-flex;align-items:center;justify-content:center;}
.warnbox .wtop .i svg{width:25px;height:25px;color:#fff;}
.warnbox .wtop h3{font-size:23px;margin:0 0 8px;}
.warnbox .wtop p{font-size:15px;color:var(--text-mid);line-height:1.65;margin:0;}
.warnbox .wprod{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.warnbox .wprod .wp{background:var(--bg-soft);border-radius:var(--radius);padding:20px 22px;}
.warnbox .wprod .wp .pn{font-size:15px;font-weight:800;color:var(--ink);}
.warnbox .wprod .wp .pn em{color:var(--red);font-style:italic;}
.warnbox .wprod .wp p{font-size:13.5px;color:var(--text-mid);line-height:1.55;margin:8px 0 0;}
.warnbox .concl{margin-top:26px;text-align:center;font-size:16px;font-weight:700;color:var(--ink);}
.warnbox .concl b{color:var(--red);}

/* ---------- METHODE: Vernast aanpak (op rood) ---------- */
.mline{margin-top:50px;display:grid;gap:16px;}
.mstep{background:#F4F4F4;border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px;display:grid;grid-template-columns:64px 1fr;gap:24px;align-items:start;}
.mstep .mn{width:52px;height:52px;border-radius:14px;background:var(--red);color:#fff;font-size:22px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;}
.mstep h3{color:#000;font-size:20px;margin:0 0 9px;}
.mstep p{color:#000;font-size:14.5px;line-height:1.65;margin:0 0 10px;}
.mstep p b{color:#000;}
.mstep .subgrid{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mstep .subgrid .sg{background:#F8FAFC;border:1px solid var(--line);border-radius:10px;padding:12px 15px;font-size:13px;color:#000;line-height:1.5;}
.mstep .subgrid .sg b{color:#000;}

/* ---------- PRODGRID: producten die wij inzetten ---------- */
.prod-grid2{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;}
.prodcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;}
.prodcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.prodcard image-slot{width:100%;height:260px;display:block;background:var(--bg-soft);}
.prodcard .pc-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;}
.prodcard .pc-fn{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--red);border-radius:9999px;padding:5px 12px;margin-bottom:13px;}
.prodcard .pc-fn.blue{background:#1f9c8f;}
.prodcard .pc-fn.violet{background:#7b5bd6;}
.prodcard .pc-fn.slate{background:#5b6b7b;}
.prodcard .pc-fn.green{background:#2f9e5b;}
.prodcard h3{font-size:19px;margin:0 0 4px;}
.prodcard .pc-sub{font-size:12.5px;color:var(--text-dim);font-weight:600;margin-bottom:11px;}
.prodcard p{font-size:14px;color:var(--text-mid);line-height:1.6;margin:0;}
.prod-disclaimer{margin-top:28px;font-size:13px;color:var(--text-dim);text-align:center;max-width:820px;margin-left:auto;margin-right:auto;line-height:1.6;}

/* brandnote — merkonafhankelijk callout */
.brandnote{margin:34px 0 6px;background:#eef7f0;border:1px solid #bfe3c9;border-left:4px solid #2f9e5b;border-radius:var(--radius);padding:20px 24px;display:flex;gap:16px;align-items:flex-start;}
.brandnote .i{flex:none;width:40px;height:40px;border-radius:11px;background:#2f9e5b;display:inline-flex;align-items:center;justify-content:center;}
.brandnote .i svg{width:20px;height:20px;color:#fff;}
.brandnote h4{font-size:16px;margin:0 0 5px;color:#1c5f34;}
.brandnote p{font-size:14px;color:#245c39;line-height:1.6;margin:0;}

/* extra-comp — twee bijkomende componenten */
.extra-comp{margin-top:30px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 34px;}
.extra-comp .ec-head{display:block;text-align:center;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:22px;}
.extra-comp .ec-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.extra-comp .ec{display:flex;gap:16px;align-items:flex-start;}
.extra-comp .ec-i{flex:none;width:46px;height:46px;border-radius:12px;background:var(--red-soft);color:var(--red);display:inline-flex;align-items:center;justify-content:center;}
.extra-comp .ec-i svg{width:23px;height:23px;}
.extra-comp .ec h3{font-size:17px;margin:0 0 7px;}
.extra-comp .ec p{font-size:13.5px;color:var(--text-mid);line-height:1.6;margin:0;}
@media (max-width:1000px){.extra-comp .ec-grid{grid-template-columns:1fr;}.brandnote{flex-direction:column;}}

/* ---------- ZMATRIX: vergelijkingsmatrix (op rood) ---------- */
.zmatrix{margin-top:50px;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.24);}
.zmatrix table{width:100%;border-collapse:collapse;}
.zmatrix th,.zmatrix td{padding:16px 18px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--line);}
.zmatrix thead th{background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em;vertical-align:bottom;}
.zmatrix tbody th{font-weight:700;color:var(--ink);background:var(--bg-soft);width:26%;}
.zmatrix td{color:var(--text-mid);}
.zmatrix .yes{color:#2f9e5b;font-weight:700;}
.zmatrix .no{color:#c0392b;font-weight:700;}
.zmatrix tbody tr:last-child th,.zmatrix tbody tr:last-child td{border-bottom:0;}
.zmatrix .fn{color:var(--ink);font-weight:600;}

/* ---------- NA INJECTIE (wit, tekst + lijst) ---------- */
.after-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;}
.after-grid .a-body h2{font-size:34px;margin:14px 0 16px;text-wrap:balance;}
.after-grid .a-body p{font-size:15.5px;color:var(--text-mid);line-height:1.7;margin:0 0 14px;}
.after-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.after-list li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:15px 18px;display:flex;gap:13px;align-items:flex-start;font-size:14.5px;color:var(--text);line-height:1.5;}
.after-list li .d{flex:none;width:22px;height:22px;border-radius:50%;background:var(--red-soft);color:var(--red);display:inline-flex;align-items:center;justify-content:center;margin-top:1px;}
.after-list li .d svg{width:12px;height:12px;}
.after-cross{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;}
.after-cross a{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;border-radius:9999px;padding:12px 20px;font-size:14px;font-weight:700;transition:background .2s,transform .2s;}
.after-cross a:hover{background:#000;transform:translateY(-2px);}
.after-cross a svg{width:16px;height:16px;}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .zsplit,.src-grid,.after-grid{grid-template-columns:1fr;gap:38px;}
  .zsplit.flip{direction:ltr;}
  .mech-grid{grid-template-columns:1fr 1fr;}
  .mat-grid{grid-template-columns:1fr 1fr;}
  .prod-grid2{grid-template-columns:1fr 1fr;}
  .zzstep,.zzstep.alt{grid-template-columns:1fr;direction:ltr;gap:24px;}
  .zlead .two,.warnbox .wprod,.mstep .subgrid{grid-template-columns:1fr;}
  .saltrow{grid-template-columns:1fr;gap:14px;}
}
@media (max-width:620px){
  .mech-grid,.mat-grid,.prod-grid2{grid-template-columns:1fr;}
  .zsplit .zs-body h2,.src-intro h2,.after-grid .a-body h2{font-size:27px;}
  .zmatrix{overflow-x:auto;}
  .zmatrix table{min-width:560px;}
  .warnbox{padding:28px 22px;}
  .mstep{grid-template-columns:1fr;gap:14px;}
}

/* ---------- FIT-GRID: geschikt / niet voldoende ---------- */
.fit-grid{margin-top:50px;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.fitcol{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 32px 26px;}
.fitcol .fh{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.fitcol .fi{flex:none;width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;}
.fitcol .fi svg{width:22px;height:22px;color:#fff;}
.fitcol h3{font-size:20px;margin:0;color:var(--ink);}
.fitcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.fitcol li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:var(--text-mid);}
.fitcol li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;}
.fitcol.good .fi{background:#2f9e5b;}
.fitcol.good li::before{background:#2f9e5b;}
.fitcol.bad .fi{background:var(--red);}
.fitcol.bad li::before{background:var(--red);}
@media (max-width:820px){.fit-grid{grid-template-columns:1fr;}}

/* ---------- SPECS: sleutel/waarde-lijst in een zsplit-body ---------- */
.zs-body .specs{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.zs-body .specs li{background:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:5px;}
.zs-body .specs li:nth-child(4n),.zs-body .specs li:nth-child(4n-1){background:var(--bg-soft);}
.zs-body .specs .sk{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}
.zs-body .specs .sv{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.4;}
@media (max-width:520px){.zs-body .specs{grid-template-columns:1fr;}.zs-body .specs li:nth-child(4n),.zs-body .specs li:nth-child(4n-1){background:#fff;}.zs-body .specs li:nth-child(even){background:var(--bg-soft);}}