/* ============================================================
   Vernast — Gevelcrepi (aanvullend)
   Tabs + specifieke componenten. Bouwt voort op kelder/verslag/vent/vocht.
   ============================================================ */

/* ---------- TABS ---------- */
.tabs{margin-top:44px;}
.tabbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px;}
.tabbtn{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  padding:12px 22px;border-radius:9999px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s;}
.tabbtn svg{width:17px;height:17px;}
.tabbtn:hover{border-color:rgba(0,0,0,.18);transform:translateY(-1px);}
.tabbtn.active{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 8px 22px rgba(158,0,15,.28);}
.tabpanel{display:none;}
.tabpanel.active{display:block;animation:tabfade .35s ease both;}
@keyframes tabfade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* tabbar op rode achtergrond */
.tech-section .tabbtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;}
.tech-section .tabbtn:hover{border-color:rgba(255,255,255,.4);}
.tech-section .tabbtn.active{background:#fff;color:var(--red);border-color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.28);}

/* ---------- SYSTEEM-KAARTEN (crepi types) ---------- */
.sys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.sys-grid{grid-template-columns:1fr;}}
.sys{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;}
.sys:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.sys image-slot{width:100%;height:200px;display:block;}
.sys .sb{padding:26px 26px 28px;}
.sys .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red);background:var(--red-soft);padding:5px 11px;border-radius:9999px;margin-bottom:12px;}
.sys h3{font-size:20px;margin:0 0 9px;}
.sys p{font-size:14.5px;color:var(--text-mid);line-height:1.62;margin:0;}
.sys ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:9px;}
.sys ul li{position:relative;padding-left:24px;font-size:13.5px;color:var(--text-mid);line-height:1.5;}
.sys ul li svg{position:absolute;left:0;top:2px;width:15px;height:15px;color:#10B981;}

/* ---------- DETAIL-RIJEN (blauwe steen, alu dorpels, aansluitingen) ---------- */
.det-list{display:flex;flex-direction:column;gap:16px;}
.det{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow-sm);}
.det .di{width:52px;height:52px;border-radius:14px;background:var(--red);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(158,0,15,.32);}
.det .di svg{width:26px;height:26px;}
.det h3{font-size:18px;margin:0 0 7px;}
.det p{font-size:14.5px;color:var(--text-mid);line-height:1.62;margin:0;}

/* ---------- SUBSIDIE-KAARTEN ---------- */
.sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:900px){.sub-grid{grid-template-columns:1fr;}}
.subc{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 28px 22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.subc:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.08);border-color:rgba(158,0,15,.18);}
.subc .badge2{display:inline-block;align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0a8f5f;background:rgba(16,185,129,.12);padding:5px 11px;border-radius:9999px;margin-bottom:14px;}
.subc h3{font-size:19px;margin:0 0 9px;}
.subc p{font-size:14px;color:var(--text-mid);line-height:1.62;margin:0 0 18px;}
.subc-link{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--red);text-decoration:none;letter-spacing:-.005em;transition:gap .18s ease,color .18s ease;}
.subc-link svg{width:16px;height:16px;flex:0 0 auto;transition:transform .18s ease;}
.subc-link:hover{color:#7a000c;gap:12px;}
.subc-link:hover svg{transform:translateX(2px);}

/* subsidie disclaimer */
.sub-note{margin-top:26px;background:#FEF6E7;border:1px solid rgba(245,158,11,.35);border-radius:var(--radius-lg);padding:20px 24px;display:flex;gap:14px;align-items:flex-start;}
.sub-note svg{width:22px;height:22px;flex:0 0 auto;color:#B45309;margin-top:1px;}
.sub-note p{margin:0;font-size:13.5px;color:#5b4a2a;line-height:1.6;}
.sub-note b{color:#7a3d05;}

/* ---------- ISOLATIE opbouw-lagen ---------- */
.layers{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--line);margin-top:8px;}
.layer{background:#fff;padding:18px 22px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;}
.layer .ln{width:30px;height:30px;border-radius:9px;background:var(--red-soft);color:var(--red);font-weight:800;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.layer h4{font-size:15px;margin:0 0 2px;}
.layer p{font-size:13px;color:var(--text-mid);margin:0;line-height:1.5;}