/* wauw.css — 4 nov 2026 (Bart: "doe de andere pagina's ook in deze stijl", zoals de nieuwe homepage).
   Laag bovenop site.css + site-v2.css. Alleen vorm: geen teksten, links of URL's. Uitzetten = link weghalen (tools/site/wauw-koppel.py --uit). */
:root{--wz-zw:#05100E;--wz-zw2:#0B1C19;--wz-goud:#F2C46B;--wz-goud-h:#FFD585;--wz-teal:#19B9C5;--teal:#0E6E6A}
body{background:#fff}
.grain{display:none}

/* NAV donker, zoals home */
html body nav.nav{background:rgba(5,16,14,.82)!important;border-bottom:1px solid rgba(255,255,255,.07)!important;box-shadow:none!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
html body nav.nav .logo,html body nav.nav .nav-links a:not(.btn){color:#fff!important}
html body nav.nav .nav-links a:not(.btn):hover,html body nav.nav .nav-links a.active:not(.btn){color:var(--wz-goud)!important}
html body nav.nav .nav-links a:not(.btn)::after{background:var(--wz-goud)!important}
html body nav.nav .burger span{background:#fff!important}
html body nav.nav .nav-cta,html body nav.nav .nav-mcta{background:var(--wz-goud)!important;color:#241a04!important;border-color:var(--wz-goud)!important;box-shadow:none!important;border-radius:4px!important}
.cap{display:none!important}

/* KNOPPEN: vierkant, goud */
.btn{border-radius:4px;font-weight:700;letter-spacing:-.005em}
.btn-p{background:var(--wz-goud)!important;color:#241a04!important;box-shadow:none!important;border-color:var(--wz-goud)!important}
.btn-p:hover{background:var(--wz-goud-h)!important;color:#241a04!important;transform:translateY(-2px)}
.btn-p .arr{stroke:#241a04!important}
.btn-g{background:transparent;color:var(--wz-zw);border:2px solid var(--wz-zw)}
.btn-g:hover{background:var(--wz-zw)!important;color:#fff!important;border-color:var(--wz-zw)!important}

/* HERO: schermvullend donker met de wand van echt werk, grote letters */
.hero:not(.hero-home),.case-hero{position:relative;overflow:hidden;isolation:isolate;min-height:min(78svh,820px);display:flex;align-items:flex-end;padding:120px 0 96px!important;
 background:linear-gradient(90deg,rgba(5,16,14,.98) 0%,rgba(5,16,14,.92) 38%,rgba(5,16,14,.6) 72%,rgba(5,16,14,.75) 100%),linear-gradient(0deg,rgba(5,16,14,1) 0%,rgba(5,16,14,0) 45%),url(/assets/img/hero-wand.webp) 70% 40%/cover no-repeat,var(--wz-zw)!important;color:#fff}
.hero:not(.hero-home)>.w,.case-hero>.w{width:100%;position:relative;z-index:2}
.hero:not(.hero-home) .hero-orb,.case-hero .hero-orb{display:none!important}
.hero:not(.hero-home):not(.haspic):not(.dc-kop)::before{display:none!important}
.hero:not(.hero-home) h1,.case-hero h1{color:#fff!important;font-weight:800!important;letter-spacing:-.045em!important;line-height:.95!important;font-size:clamp(2.6rem,6.2vw,5.8rem)!important;max-width:17ch;margin-bottom:26px}
.hero:not(.hero-home) h1 .grad-txt,.case-hero h1 .grad-txt,.hero:not(.hero-home) h1 em,.hero:not(.hero-home) h1 strong{background:none!important;-webkit-text-fill-color:currentColor;color:var(--wz-goud)!important;font-style:normal}
.hero:not(.hero-home) .eyebrow,.case-hero .eyebrow{color:var(--wz-goud)!important;letter-spacing:.2em!important;font-size:.78rem}
.hero:not(.hero-home) .eyebrow::before,.case-hero .eyebrow::before{background:var(--wz-goud)!important}
.hero:not(.hero-home) .lead,.case-hero .lead{color:rgba(255,255,255,.82)!important;font-size:clamp(1.05rem,1.45vw,1.25rem)!important;max-width:640px}
.hero:not(.hero-home) .small,.hero:not(.hero-home) [style*="color:var(--mut)"]{color:rgba(255,255,255,.55)!important}
.hero:not(.hero-home) .btn,.case-hero .btn{padding:17px 26px;font-size:1rem}
.hero:not(.hero-home) .btn-g,.case-hero .btn-g{background:transparent!important;color:#fff!important;border:2px solid rgba(255,255,255,.85)!important}
.hero:not(.hero-home) .btn-g:hover,.case-hero .btn-g:hover{background:#fff!important;color:var(--wz-zw)!important}
.hero:not(.hero-home) .hero-stats{border-top-color:rgba(255,255,255,.14)}
.hero:not(.hero-home) .hero-stats .s b{color:var(--wz-goud);font-size:2.2rem}
/* pagina's met eigen kopfoto (contact, over, prijzen…) houden hun foto, donkerder */
.hero.haspic{background:var(--wz-zw)!important}
.hero.haspic::before{opacity:.55!important}
.hero.haspic::after{content:""!important;position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,16,14,.97) 0%,rgba(5,16,14,.85) 45%,rgba(5,16,14,.35) 100%),linear-gradient(0deg,rgba(5,16,14,1) 0%,rgba(5,16,14,0) 45%)!important;animation:none!important;width:auto!important;height:auto!important;border-radius:0!important;top:0!important;right:0!important}
/* bewegende woordenband onderin elke kop */
.hero:not(.hero-home):not(.haspic)::after,.case-hero::after{content:"Website \2726  Webshop \2726  Online boeken \2726  Offertes \2726  iDEAL \2726  Facturen \2726  Domein en mail \2726  Google \2726  WhatsApp \2726  Reviews \2726  Website \2726  Webshop \2726  Online boeken \2726  Offertes \2726  iDEAL \2726  Facturen \2726  Domein en mail \2726  Google \2726  WhatsApp \2726  Reviews \2726 "!important;
 position:absolute!important;left:0!important;right:auto!important;top:auto!important;bottom:0!important;width:max-content!important;height:auto!important;border-radius:0!important;background:none!important;z-index:1!important;
 padding:16px 0 16px 24px;border-top:1px solid rgba(255,255,255,.1);white-space:pre;font-family:var(--fdisp);font-weight:700;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);animation:wz-band 60s linear infinite!important;opacity:1!important;filter:none!important}
@keyframes wz-band{to{transform:translateX(-50%)}}

/* SECTIES: grote koppen, strak */
.sec h2,.sec-head h2,.kennis-art h2{font-weight:800!important;letter-spacing:-.04em!important;line-height:1!important}
.sec-head h2,.sec>.w>h2:first-child,.sec .w>span.eyebrow+h2{font-size:clamp(2.2rem,4.6vw,4rem)!important}
.eyebrow{letter-spacing:.2em!important;color:#0E6E6A}
.eyebrow::before{background:var(--wz-goud)!important}
.grad-txt{color:#0E6E6A}
.card{border-radius:14px!important;box-shadow:none!important;border:1px solid #DCE2E6!important}
.card:hover{border-color:#0B1714!important;transform:translateY(-4px);box-shadow:0 18px 40px rgba(5,16,14,.10)!important}
.card h3{letter-spacing:-.025em;font-weight:800}
.card .ic{background:var(--wz-zw)!important;border-radius:10px!important;box-shadow:none!important}
.card .ic svg{stroke:var(--wz-goud)!important}
.hero:not(.hero-home)+.sec>.w>.card:first-child,.hero:not(.hero-home)+.sec .card.rv:first-child{border-left:5px solid var(--wz-goud)!important}
.sec a:not(.btn):not(.card):not([class]){color:#0E6E6A;text-decoration-thickness:1px;text-underline-offset:3px}

/* getinte secties worden donker (alle kleuren via variabelen, dus ook inline-stijlen gaan mee) */
.sec-tint{--paper:#05100E;--paper2:#0B1C19;--card:#0E211D;--ink:#fff;--ink2:rgba(255,255,255,.86);--mut:rgba(255,255,255,.66);--dim:rgba(255,255,255,.5);--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.22);--teal:#5FD3C8;--teal-soft:rgba(95,211,200,.12);
 background:var(--wz-zw)!important;color:#fff;border:0!important}
.sec-tint h1,.sec-tint h2,.sec-tint h3,.sec-tint h4,.sec-tint b,.sec-tint strong{color:#fff}
.sec-tint h2 em,.sec-tint h2 .grad-txt{color:var(--wz-goud)!important;font-style:normal}
.sec-tint .eyebrow{color:var(--wz-goud)!important}
.sec-tint p,.sec-tint li,.sec-tint td{color:rgba(255,255,255,.78)}
.sec-tint .card{background:#0E211D!important;border-color:rgba(255,255,255,.1)!important}
.sec-tint .card:hover{border-color:var(--wz-goud)!important}
.sec-tint a:not(.btn){color:var(--wz-goud)}
.sec-tint .btn-g{color:#fff;border-color:rgba(255,255,255,.85)}
.sec-tint .btn-g:hover{background:#fff!important;color:var(--wz-zw)!important}
.sec-tint table th{color:#fff}
.sec-tint details,.sec-tint summary{color:#fff}

/* CTA-band: donker vlak met goud */
.cta-inner{background:var(--wz-zw)!important;border-radius:18px!important;box-shadow:none!important;padding:80px 40px!important}
.cta-inner::before,.cta-inner::after,.cta-inner .hero-orb{display:none!important}
.cta-inner h2{color:#fff!important;font-weight:800!important;letter-spacing:-.045em!important;line-height:.98!important;font-size:clamp(2.2rem,5vw,4.4rem)!important;text-transform:uppercase}
.cta-inner p{color:rgba(255,255,255,.78)!important}
.cta-inner .btn-p{background:var(--wz-goud)!important;color:#241a04!important}
.cta-inner .btn-g{background:transparent!important;color:#fff!important;border:2px solid rgba(255,255,255,.85)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* FOOTER zwart */
.foot{background:var(--wz-zw)!important}
.foot::after,.foot::before{display:none!important}
.foot-grid h4{color:var(--wz-goud)!important}
.foot .btn-g{border-radius:4px}

/* showband (groene band "Meer dan een website") → zwart met wand */
.showband{background:linear-gradient(0deg,rgba(5,16,14,.94),rgba(5,16,14,.94)),url(/assets/img/hero-wand.webp) center/cover no-repeat,var(--wz-zw)!important;animation:none!important}
.showband::before,.showband::after{display:none!important}
.sb-in h2{font-weight:800!important;letter-spacing:-.045em!important;line-height:.98!important;font-size:clamp(2.2rem,5vw,4.4rem)!important}
.sb-in h2 .grad-txt{color:var(--wz-goud)!important}
.sb-in .eyebrow{color:var(--wz-goud)!important}

#website-professioneel{padding-top:64px!important}
/* portfolio: AI-video met onleesbare tekst eruit, wand van echt werk erin */
.pfx-hero video.cine{display:none!important}
.pfx-hero{background:linear-gradient(90deg,rgba(5,16,14,.97) 0%,rgba(5,16,14,.88) 40%,rgba(5,16,14,.55) 75%,rgba(5,16,14,.75) 100%),url(/assets/img/hero-wand.webp) 70% 40%/cover no-repeat,var(--wz-zw)!important}
.pfx-hero .vig,.pfx-hero .vig2{display:none!important}
.pfx-hero h1{font-weight:800!important;letter-spacing:-.045em!important}
.pfx-grad{background:none!important;-webkit-text-fill-color:var(--wz-goud)!important;color:var(--wz-goud)!important}
.pfx-eyebrow{color:var(--wz-goud)!important}

/* cases/ en cijfers/ (hs-*): zelfde kop met wand, lichte vlakken wit */
.hs-hero{background:linear-gradient(90deg,rgba(5,16,14,.97) 0%,rgba(5,16,14,.9) 42%,rgba(5,16,14,.6) 75%,rgba(5,16,14,.8) 100%),url(/assets/img/hero-wand.webp) 70% 40%/cover no-repeat,var(--wz-zw)!important}
.hs-hero::after{display:none!important}
.hs-hero h1{font-size:clamp(2.8rem,6.4vw,5.8rem)!important;letter-spacing:-.045em!important}
.hs-hero h1 em{background:none!important;color:var(--wz-goud)!important;-webkit-text-fill-color:var(--wz-goud)}
.hs-sec{background:#fff!important}.hs-zacht{background:#F3F5F6!important;border-color:#E3E8EB!important}

/* labels "Aanrader"/"Meest gekozen" en knoppen op donkere portfolio */
.pop{background:var(--wz-goud)!important;color:#241a04!important;box-shadow:none!important}
.pfx .btn-g{background:transparent!important;color:#fff!important;border:2px solid rgba(255,255,255,.85)!important}
.pfx .btn-g:hover{background:#fff!important;color:var(--wz-zw)!important}

.foot .btn-g{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)!important}
.foot .btn-g:hover{background:#fff!important;color:var(--wz-zw)!important}

@media(prefers-reduced-motion:reduce){.hero:not(.hero-home)::after,.case-hero::after{animation:none!important}}
@media(max-width:760px){
 .hero:not(.hero-home),.case-hero{min-height:auto;padding:84px 0 86px!important;
  background:linear-gradient(0deg,rgba(5,16,14,1) 20%,rgba(5,16,14,.86) 60%,rgba(5,16,14,.62) 100%),url(/assets/img/hero-wand-m.webp) center top/cover no-repeat,var(--wz-zw)!important}
 .hero:not(.hero-home) h1,.case-hero h1{font-size:clamp(2.2rem,10.5vw,3.4rem)!important}
 .hero:not(.hero-home) .btn,.case-hero .btn{flex:1 1 100%;justify-content:center}
 .hero:not(.hero-home)::after,.case-hero::after{font-size:.8rem;padding:13px 0 13px 16px}
 .sec-head h2,.sec>.w>h2:first-child,.sec .w>span.eyebrow+h2{font-size:clamp(1.9rem,8.4vw,2.6rem)!important}
 .cta-inner{padding:56px 22px!important}
}