/* © 2026 DigitaleWeg (Holding B.V.). Site v2 (31 okt 2026, Bart: "kan je heel de site in deze stijl maken"): de stijl van de nieuwe home, cijfers en cases
   doorgetrokken naar alle publieke pagina's. Donkere kop met goud accent, zwaardere koppen, rondere kaarten. Geen blur, geen zware effecten (snelheid).
   Alleen geladen door publieke pagina's (niet door /v/, /opzet/, /preview/, /voorbeeld/). Terugdraaien: de <link> naar dit bestand weghalen
   (tools/site/site-v2-koppel.py --uit). */

/* ---------- kop van elke pagina ---------- */
.hero:not(.hero-home),.case-hero{background:linear-gradient(160deg,#061d1b 0%,#0a2f2c 60%,#0d3c38 100%);color:#e6f1ef;padding:92px 0 84px}
.hero:not(.hero-home):not(.haspic)::after,.case-hero::after{content:"";position:absolute;right:-180px;top:-240px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(19,145,139,.28),transparent 65%);pointer-events:none;z-index:-1}
.hero .hero-orb,.case-hero .hero-orb{display:none}
.hero:not(.hero-home) h1,.case-hero h1{color:#fff;font-weight:800;letter-spacing:-.04em;line-height:1}
.hero:not(.hero-home) h1 .grad-txt,.hero:not(.hero-home) h1 em,.case-hero h1 .grad-txt,.case-hero h1 em{font-style:normal;background:linear-gradient(100deg,#E0A43B 0%,#F4CF7E 55%,#E0A43B 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero:not(.hero-home) .lead,.case-hero .lead{color:#cfe4e1}
.hero:not(.hero-home) .lead strong,.case-hero .lead strong{color:#fff}
.hero:not(.hero-home) .lead .grad-txt{background:none;color:#F2C46B}
.hero:not(.hero-home) .eyebrow,.case-hero .eyebrow{color:#5fd3c8}
.hero:not(.hero-home) .eyebrow::before,.case-hero .eyebrow::before{background:#5fd3c8}
.hero:not(.hero-home) p,.hero:not(.hero-home) li{color:#cfe4e1}
.hero:not(.hero-home) a:not(.btn){color:#9fe3db}
.hero:not(.hero-home) [style*="color:var(--mut)"],.hero:not(.hero-home) .small,.hero:not(.hero-home) .muted{color:#a9cbc6!important}
.hero:not(.hero-home) [style*="color:var(--teal)"]{color:#5fd3c8!important}
.hero:not(.hero-home) .btn-g,.case-hero .btn-g{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28)}
.hero:not(.hero-home) .btn-g:hover,.case-hero .btn-g:hover{background:rgba(255,255,255,.16);color:#fff;border-color:#fff}
.hero-stats{border-top-color:rgba(255,255,255,.16)}
.hero:not(.hero-home) .hero-stats .s b{color:#F2C46B}
.hero:not(.hero-home) .hero-stats .s span{color:#a9cbc6}
.hero .wiz-side .ti{color:#cfe4e1}
.hero.haspic{padding-top:100px;padding-bottom:88px}
/* cases-detail */
.case-hero{padding-bottom:0}
.case-back{color:#a9cbc6}.case-back:hover{color:#fff}
.case-hero .case-meta{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.case-hero .case-meta .m{border-color:rgba(255,255,255,.12)}
.case-hero .case-meta .m span{color:#8fb3ae}
.case-hero .case-meta .m b{color:#fff}

/* ---------- secties ---------- */
.sec-head h2,.sec h2{font-weight:800;letter-spacing:-.035em;line-height:1.03}
.sec-head h2{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.sec-head h2 .grad-txt,.sec-head h2 em{font-style:normal;color:var(--teal)}
.sec-head p{font-size:1.12rem}
.sec{padding:88px 0}
.eyebrow{letter-spacing:.13em}

/* ---------- kaarten ---------- */
.card{border-radius:22px;box-shadow:0 18px 44px -30px rgba(24,20,16,.35)}
.card:hover{box-shadow:0 30px 60px -30px rgba(14,110,106,.4)}
.card h3{font-weight:800;font-size:1.3rem}

/* ---------- afsluitende band ---------- */
.cta-inner{border-radius:28px;background:linear-gradient(160deg,#061d1b 0%,#0a2f2c 55%,#0E6E6A 100%)}
.cta-inner h2{font-weight:800;letter-spacing:-.035em}
.cta-inner .btn-p{background:#F2C46B;color:#2a1f05}
.cta-inner .btn-p:hover{background:#F4CF7E;color:#2a1f05}
.cta-inner .btn-p .arr{stroke:#2a1f05}

@media (max-width:900px){
 .hero:not(.hero-home),.case-hero{padding:60px 0 56px}
 .case-hero{padding-bottom:0}
 .sec{padding:68px 0}
}

/* kop compacter + op brede schermen een voorbeeldsite in browserframe rechts (geen extra HTML nodig) */
.hero:not(.hero-home) h1,.case-hero h1{font-size:clamp(2.3rem,4.6vw,3.8rem);max-width:17ch}
.hero:not(.hero-home) .lead{max-width:620px}
@media (min-width:1240px){
 .hero:not(.hero-home):not(.haspic):not(.dc-kop) .w{min-height:330px}
 .hero:not(.hero-home):not(.haspic):not(.dc-kop)::before{content:"";position:absolute;z-index:-1;right:max(24px,calc((100vw - var(--mw))/2 + 24px));top:50%;width:440px;aspect-ratio:720/478;transform:translateY(-50%) rotate(-2deg);border-radius:14px;border:1px solid rgba(255,255,255,.16);border-top:28px solid #0a201e;background:#0c2725 url(/assets/img/voorbeelden/klein/timmerwerk.webp) top/cover no-repeat;box-shadow:0 40px 80px -30px rgba(0,0,0,.8);opacity:.92}
}

/* artikel- en vakpagina's: rustiger witruimte, tabellen als kaart, lijsten met vinkjes */
.sec:not(.sec-tint)+.sec:not(.sec-tint){padding-top:0}
.sec .w[style*="max-width:860px"]>h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:16px}
.sec table{border-collapse:separate!important;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 18px 44px -32px rgba(24,20,16,.35);margin:8px 0 18px}
.sec table th{background:#0a2f2c;color:#e6f1ef;font-family:var(--fdisp);font-weight:700;border-bottom:0!important;padding:12px 14px!important}
.sec table td{padding:11px 14px!important}
.sec table tr:last-child td{border-bottom:0!important}
.sec table tbody tr:nth-child(even) td{background:rgba(14,110,106,.035)}
.sec .w>ul:not([class]),.sec .w>ol:not([class]){margin:10px 0 0;padding:0;list-style:none}
.sec .w>ul:not([class])>li{position:relative;padding:9px 0 9px 32px;border-bottom:1px solid var(--line)}
.sec .w>ul:not([class])>li::before{content:"";position:absolute;left:4px;top:15px;width:12px;height:7px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.sec .w>ol:not([class]){counter-reset:dwol}
.sec .w>ol:not([class])>li{counter-increment:dwol;position:relative;padding:10px 0 10px 44px;border-bottom:1px solid var(--line)}
.sec .w>ol:not([class])>li::before{content:counter(dwol,decimal-leading-zero);position:absolute;left:0;top:9px;font-family:var(--fdisp);font-weight:800;color:var(--teal);letter-spacing:-.03em}
details.card summary{font-weight:700!important}
.hero:not(.hero-home)+.sec>.w>.card:first-child{border-left:4px solid var(--teal)}