/* Gedeelde opmaak voor de storingspagina's (koelcel, vriescel, compressor, ijsopbouw, lekdetectie, airco).
   Wordt na de eigen <style> van de pagina geladen en zet dezelfde hiërarchie neer als de homepage. */

/* ---------- Hero ---------- */
.hero-landing{background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,41,59,.92));padding:64px 0 58px}
.sp-crumbs{font-size:13px;font-weight:700;color:#94a3b8;margin-bottom:16px}
.sp-crumbs a{color:#cbd5e1}
.sp-crumbs a:hover{color:#fff}
.sp-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:800;color:#e2e8f0;margin-bottom:18px}
.live-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;flex-shrink:0;animation:live-pulse 2s infinite}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.hero-landing h1{font-size:clamp(30px,4.6vw,50px);line-height:1.08;letter-spacing:-.01em;max-width:900px}
.hero-landing p{color:#cbd5e1;font-size:18px;line-height:1.65;max-width:680px}
.hero-landing .btn{padding:15px 24px;font-size:16px}
.hero-landing .btn-outline{background:rgba(255,255,255,.06);color:#e2e8f0;border:1px solid rgba(255,255,255,.2)}
.hero-landing .btn-outline:hover{background:rgba(255,255,255,.12)}

/* ---------- Blokken ---------- */
.section-block{border-radius:22px;padding:32px;margin-top:24px;border:1px solid var(--border);box-shadow:0 10px 30px rgba(15,23,42,.06)}
.section-block > .section-title{display:flex;flex-direction:column;gap:12px;font-size:clamp(22px,2.6vw,30px);line-height:1.2;letter-spacing:-.01em}
.section-block > .section-title::before{content:"";width:36px;height:4px;border-radius:4px;background:var(--accent)}
.section-block .grid-2 .section-title{font-size:20px}

/* Intro: geen kaart, gewoon een duidelijke kop met inleiding */
.section-block.sb-intro{background:none;border:none;box-shadow:none;padding:0 0 4px}
.sb-intro > .section-title{font-size:clamp(26px,3.4vw,38px)}
.sb-intro .section-subtitle{font-size:18px;line-height:1.65;max-width:820px;margin-bottom:14px}

/* Opsommingen als nette vinkjes-lijst */
.section-block ul{list-style:none;padding:0;margin:10px 0 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.section-block li{position:relative;padding:11px 14px 11px 46px;background:#f8fafc;border:1px solid #eef2f7;border-radius:12px;color:var(--text);font-weight:600;line-height:1.45}
.section-block li::before{content:"✓";position:absolute;left:13px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:#dcfce7;color:#16a34a;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
.section-block .grid-2 ul{grid-template-columns:1fr}

/* Oorzaken en stappen (koppen met uitleg) als kaartjes */
.section-block div:has(> div > h4):not(.grid-2){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.section-block .grid-2:has(> div > h4){gap:14px}
.section-block div:has(> h4):not(:has(div)){background:#f0f9ff;border:1px solid #e0f2fe;border-left:4px solid var(--accent);border-radius:14px;padding:16px 18px;margin:0 !important}
.section-block h4{margin:0 0 6px;color:var(--primary);font-size:17px;line-height:1.3}
.section-block div:has(> h4) p{margin:0;color:var(--muted)}

/* Donkere band: "Waarom kiezen voor ..." */
.section-block.sb-dark{background:linear-gradient(135deg,#0f172a,#1e293b);border:none;color:#fff}
.sb-dark > .section-title{color:#fff}
.sb-dark > .section-title::before{background:#38bdf8}
.sb-dark .card,.sb-dark .feature-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);box-shadow:none}
.sb-dark h3{color:#fff}
.sb-dark p{color:#cbd5e1 !important}

/* Lichtblauwe tint: preventie / onderhoud */
.section-block.sb-tint{background:linear-gradient(180deg,#f0f9ff,#e0f2fe);border-color:#bae6fd}
.sb-tint li{background:#fff;border-color:#dbeafe}

/* Kaarten binnen blokken */
.section-block .card,.section-block .feature-card{border-top:4px solid var(--accent)}
.sb-dark .card,.sb-dark .feature-card{border-top:4px solid #38bdf8}
.section-block .card:has(> h4),.section-block .feature-card:has(> h4){border-top:1px solid #e0f2fe}

/* Afsluitende call-to-action */
.sp-cta{margin-top:32px;padding:44px 32px !important;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border-radius:28px;text-align:center;box-shadow:0 20px 40px rgba(15,23,42,.18)}
.sp-cta .section-title{color:#fff;font-size:clamp(24px,3.2vw,34px)}
.sp-cta p{color:#cbd5e1 !important;max-width:720px;margin-left:auto;margin-right:auto}
.sp-cta strong{color:#fff}

@media (max-width:720px){
  .sticky-mobile{transition:transform .3s ease,opacity .3s ease}
  .sticky-mobile.is-hidden{transform:translateY(140%);opacity:0;pointer-events:none}
  .hero-landing{padding:46px 0 40px}
  .section-block{padding:22px 18px;border-radius:18px}
  .section-block ul,.section-block div:has(> div > h4):not(.grid-2){grid-template-columns:1fr}
  .sp-cta{padding:32px 20px !important;border-radius:22px}
}

/* ===== v2: hero met kaart, iconen in koppen, meescrollende inhoudsopgave ===== */
.sp-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:40px;align-items:center}
.sp-hero-card{background:#fff;color:var(--text);border-radius:22px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.sp-hero-card h3{margin:0 0 12px;font-size:20px;color:var(--primary)}
.sp-facts{list-style:none;margin:0 0 16px;padding:0;display:grid}
.sp-facts li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-weight:700;font-size:15px;color:var(--primary)}
.sp-facts li:last-child{border-bottom:none}
.sp-facts .ico{width:34px;height:34px;flex-shrink:0;border-radius:10px;background:#f0f9ff;display:flex;align-items:center;justify-content:center;font-size:17px}
.sp-hero-call{display:flex;justify-content:center;gap:8px;padding:13px 16px;border-radius:14px;background:var(--light);color:var(--accent);font-weight:900;transition:background .2s}
.sp-hero-call:hover{background:#e0f2fe}

/* Iconen in de koppen vervangen het blauwe streepje */
.sp-ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex-shrink:0;border-radius:14px;background:#e0f2fe;font-size:22px;line-height:1}
.section-block > .section-title:has(.sp-ico){flex-direction:row;align-items:center;gap:14px}
.section-block > .section-title:has(.sp-ico)::before{display:none}
.sb-dark .sp-ico{background:rgba(56,189,248,.15)}
.section-block .grid-2 .section-title,.sp-faq .section-title{display:flex;align-items:center;gap:12px}
.section-block .grid-2 .sp-ico,.sp-faq .sp-ico{width:38px;height:38px;font-size:18px;border-radius:12px}
.sp-cta .sp-ico{display:none}

/* Inhoud + zijbalk */
.sp-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:32px;align-items:start}
.sp-main > .section-block:first-child,.sp-main > .sb-intro{margin-top:0}
.sp-aside{position:sticky;top:110px;display:grid;gap:16px}
.sp-toc{background:#fff;border:1px solid var(--border);border-radius:20px;padding:18px;box-shadow:0 10px 30px rgba(15,23,42,.06);display:grid;gap:2px}
.sp-toc-title{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 8px 6px}
.sp-toc a{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:10px;font-size:14px;font-weight:700;color:var(--primary);line-height:1.3;transition:background .15s,color .15s}
.sp-toc a:hover,.sp-toc a.active{background:#f0f9ff;color:var(--accent)}
.sp-toc .ico{width:26px;flex-shrink:0;text-align:center;font-size:15px}
.sp-aside-cta{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border-radius:20px;padding:20px;display:grid;gap:10px}
.sp-aside-cta strong{font-size:16px;margin-bottom:4px}
.sp-aside-cta .btn{width:100%;padding:12px 14px}
[id^="s-"]{scroll-margin-top:100px}
.sp-faq{padding:0;margin-top:32px}

@media (max-width:1100px){
  .sp-layout{grid-template-columns:1fr}
  .sp-aside{display:none}
}
@media (max-width:980px){
  .sp-hero-grid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:720px){
  .sp-hero-card{padding:18px}
  .sp-hero-call{display:none}
  .sp-ico{width:40px;height:40px;font-size:19px;border-radius:12px}
}

/* ===== v3: koelcel intro-kaarten + tijdlijn, open secties i.p.v. losse dozen ===== */
.sb-intro .grid-2{gap:22px;margin-top:26px !important}
.sb-intro .grid-2 > div{background:#fff;border:1px solid var(--border);border-radius:20px;padding:26px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.sb-intro .grid-2 > div > p{color:var(--muted);margin:0 0 12px}
.sb-intro .grid-2 li{background:#f8fafc}
.sp-steps{position:relative;display:grid;gap:4px;margin-top:6px}
.sp-steps::before{content:"";position:absolute;left:17px;top:22px;bottom:22px;width:2px;background:#bae6fd}
.sp-step{position:relative;display:flex;gap:14px;align-items:flex-start;padding:10px 0}
.sp-step[hidden]{display:none}
.sp-step-num{position:relative;z-index:1;flex-shrink:0;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#0284c7);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(14,165,233,.35)}
.sp-step strong{display:block;color:var(--primary);font-size:16px;margin:6px 0 2px}
.sp-step span:not(.sp-step-num){display:block;color:var(--muted);font-size:15px;line-height:1.55}

/* Open secties: geen witte doos, wel een rustige scheidingslijn */
.sp-open .section-block:not(.sb-intro):not(.sb-tint):not(.sb-dark){background:none;border:none;border-top:1px solid #dbe4ef;border-radius:0;box-shadow:none;padding:40px 0 4px;margin-top:36px}
.sp-open .section-block li{background:#fff}
.sp-open .section-block.sb-tint{margin-top:44px}
.sp-open .section-block .grid-2 > div:has(> h4){background:#fff;border:1px solid var(--border);border-top:3px solid var(--accent);box-shadow:0 8px 20px rgba(15,23,42,.05)}