/* HETT Veranda 2027 - eigen thema (22-10-2026)
Richting B: wit en licht zoals EG. Kleuren uit het logo: antraciet #1D2425, oranje #E1711D.
Koel lichtgrijs voor vlakken (geen crème). Oranje alleen op knoppen en kleine accenten.
Lettertypes: Archivo (koppen en tekst), IBM Plex Mono (maten, labels). */
.h27{
--wit:#FFFFFF; --licht:#F5F6F7; --licht2:#EEF0F2; --lijn:#E5E7EA;
--ink:#1D2425; --tekst:#3A4147; --grijs:#6B737A;
--oranje:#E1711D; --oranje-d:#C9611A; --oranje-zacht:#FCF2EA;
--r-s:10px; --r:16px; --r-l:24px; --max:1280px;
--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
margin:0;background:var(--wit);color:var(--tekst);font:400 17px/1.65 "Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
}
.h27 *,.h27 *::before,.h27 *::after{box-sizing:border-box}
.h27 img{max-width:100%;display:block;height:auto}
.h27 a{color:inherit}
.h27 h1,.h27 h2,.h27 h3{margin:0 0 .45em;color:var(--ink);font-weight:700;letter-spacing:-.025em;line-height:1.06;font-stretch:96%}
.h27 h1{font-size:clamp(2.5rem,5.2vw,4.6rem)}
.h27 h2{font-size:clamp(1.9rem,3.5vw,3rem)}
.h27 h3{font-size:1.28rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.h27 p{margin:0 0 1em}
.h27-wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.h27-sec{padding:112px 0}
.h27-sec.licht{background:linear-gradient(180deg,#fff 0,var(--licht) 96px,var(--licht) calc(100% - 96px),#fff 100%)}
.h27-groot{font-size:1.18rem;line-height:1.6;color:var(--grijs);max-width:580px}
.h27-label{display:inline-flex;align-items:center;gap:12px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grijs);margin-bottom:22px}
.h27-label::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--oranje)}
.h27-kop{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.h27-kop h2{margin:0}
.h27-kop p{margin:0;color:var(--grijs);max-width:520px;justify-self:end}
.h27-btn{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:0 24px;border-radius:var(--r-s);font:600 1rem/1 "Archivo",sans-serif;text-decoration:none;border:0;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.h27-btn::after{content:"→";font-weight:400;transition:transform .2s}
.h27-btn:hover::after{transform:translateX(4px)}
.h27-btn.o{background:var(--oranje);color:#fff;box-shadow:0 10px 24px -12px rgba(225,113,29,.7)}
.h27-btn.o:hover{background:var(--oranje-d)}
.h27-btn.l{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #CDD2D6}
.h27-btn.l:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.h27-knoppen{display:flex;gap:12px;flex-wrap:wrap}
.h27-tlink{font-weight:600;text-decoration:none;border-bottom:2px solid var(--oranje);padding-bottom:2px}
.h27-tlink:hover{color:var(--oranje)}
.h27-sterren{color:var(--oranje);letter-spacing:2px}
.h27-top{background:var(--licht);border-bottom:1px solid var(--lijn);font-size:.86rem;color:var(--tekst)}
.h27-top .h27-wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;height:40px}
.h27-top ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.h27-top li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.h27-top li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--oranje)}
.h27-top a{text-decoration:none;font-weight:600}
.h27-hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--lijn)}
.h27-hdr .h27-wrap{display:flex;align-items:center;gap:40px;height:84px}
.h27-logo img{height:52px;width:auto}
.h27-nav{display:flex;gap:30px;margin-right:auto}
.h27-nav a{text-decoration:none;font-weight:500;color:var(--ink);position:relative;padding:30px 0;white-space:nowrap}
.h27-nav a::after{content:"";position:absolute;left:0;right:0;bottom:22px;height:2px;border-radius:2px;background:var(--oranje);transform:scaleX(0);transition:transform .2s}
.h27-nav a:hover::after,.h27-nav a.actief::after{transform:scaleX(1)}
.h27-tel{font:500 .95rem var(--mono);text-decoration:none;color:var(--ink);white-space:nowrap}
.h27-hdr .h27-btn{min-height:46px}
.h27-menuknop{display:none;margin-left:auto;background:none;border:1px solid var(--lijn);border-radius:var(--r-s);padding:10px 14px;font:600 .95rem "Archivo";color:var(--ink)}
.h27-mobmenu{display:none}
.h27-hero{padding:48px 0 0}
.h27-hero .h27-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.h27-hero h1 span{color:var(--oranje)}
.h27-hero p{font-size:1.18rem;color:var(--grijs);max-width:520px;margin-bottom:32px}
.h27-hero-foto{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:5/4}
.h27-hero-foto img{width:100%;height:100%;object-fit:cover}
.h27-score{display:flex;align-items:center;gap:12px;margin-top:28px;font-size:.95rem;color:var(--grijs)}
.h27-score b{font:500 1.05rem var(--mono);color:var(--ink)}
.h27-feiten{margin-top:56px}
.h27-feiten ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--lijn);border-radius:var(--r);background:#fff}
.h27-feiten li{padding:24px 26px;border-left:1px solid var(--lijn)}
.h27-feiten li:first-child{border-left:0}
.h27-feiten b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.h27-feiten span{font-size:.92rem;color:var(--grijs)}
.h27-prods{display:grid;grid-template-columns:repeat(12,1fr);gap:48px 28px}
.h27-prod{grid-column:span 4;text-decoration:none;display:block}
.h27-prod.groot{grid-column:span 6}
.h27-beeld{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--licht);margin-bottom:20px}
.h27-prod.groot .h27-beeld{aspect-ratio:16/11}
.h27-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.h27-prod:hover .h27-beeld img{transform:scale(1.035)}
.h27-prod h3{display:flex;justify-content:space-between;gap:16px;margin-bottom:6px}
.h27-prod h3::after{content:"→";color:var(--oranje);font-weight:400;transition:transform .2s}
.h27-prod:hover h3::after{transform:translateX(4px)}
.h27-prod p{margin:0;color:var(--grijs);font-size:.98rem}
.h27-leeg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(135deg,var(--licht),var(--licht2));color:var(--grijs);font:500 12px/1.5 var(--mono);padding:20px}
.h27-leeg b{display:block;font:600 15px "Archivo";color:var(--ink);margin-bottom:4px}
.h27-split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.h27-split.om>:first-child{order:2}
.h27-split .h27-foto{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/5;background:var(--licht)}
.h27-split .h27-foto.breed{aspect-ratio:5/4}
.h27-split .h27-foto img{width:100%;height:100%;object-fit:cover}
.h27-lijst{list-style:none;padding:0;margin:24px 0 32px}
.h27-lijst li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--lijn)}
.h27-lijst li:first-child{border-top:1px solid var(--lijn)}
.h27-lijst li::before{content:"";position:absolute;left:0;top:21px;width:20px;height:20px;border-radius:50%;background:var(--oranje-zacht) url('data:image/svg+xml;utf8,') center/13px no-repeat}
.h27-maten{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:64px}
.h27-maat{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:28px}
.h27-maat b{display:block;font:400 clamp(2rem,3.2vw,2.8rem)/1 var(--mono);color:var(--ink);letter-spacing:-.04em;margin-bottom:12px;white-space:nowrap}
.h27-maat b small{font-size:.42em;letter-spacing:0;color:var(--oranje);margin-left:6px}
.h27-maat span{color:var(--grijs);font-size:.95rem}
.h27-stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s;padding:0;margin:0;list-style:none}
.h27-stappen li{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:28px 26px}
.h27-stappen li::before{counter-increment:s;content:"0" counter(s);display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--oranje-zacht);color:var(--oranje);font:600 .9rem var(--mono);margin-bottom:20px}
.h27-stappen h3{margin-bottom:8px}
.h27-stappen p{margin:0;color:var(--grijs);font-size:.97rem}
.h27-gal{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:120px;gap:16px}
.h27-gal figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r)}
.h27-gal img{width:100%;height:100%;object-fit:cover}
.h27-gal figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.95);border-radius:8px;padding:6px 12px;font:500 12px var(--mono);color:var(--ink)}
.g1{grid-column:1/8;grid-row:span 4}.g2{grid-column:8/13;grid-row:span 2}.g3{grid-column:8/13;grid-row:span 2}
.g4{grid-column:1/5;grid-row:span 3}.g5{grid-column:5/9;grid-row:span 3}.g6{grid-column:9/13;grid-row:span 3}
.h27-reviewscore{display:flex;align-items:center;gap:16px;justify-self:end}
.h27-reviewscore b{font:400 3.4rem/1 var(--mono);color:var(--ink);letter-spacing:-.05em}
.h27-reviewscore span{color:var(--grijs);font-size:.95rem}
.h27-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.h27-quote{margin:0;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:30px}
.h27-quote p{font-size:1.15rem;line-height:1.55;color:var(--ink);margin:14px 0 18px}
.h27-quote footer{font:500 13px var(--mono);color:var(--grijs)}
.h27-showroom{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--licht);border-radius:var(--r-l);overflow:hidden}
.h27-showroom .tekst{padding:64px}
.h27-showroom dl{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;margin:28px 0 34px;padding:22px 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.h27-showroom dt{font:500 12px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--grijs)}
.h27-showroom dd{margin:0;color:var(--ink);font-weight:500}
.h27-showroom .h27-foto{position:relative;min-height:480px}
.h27-showroom .h27-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h27-faqgrid{display:grid;grid-template-columns:1fr 1.6fr;gap:80px}
.h27-faq details{border-bottom:1px solid var(--lijn);padding:22px 0}
.h27-faq details:first-child{border-top:1px solid var(--lijn)}
.h27-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;font-weight:600;font-size:1.1rem;color:var(--ink)}
.h27-faq summary::-webkit-details-marker{display:none}
.h27-faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--licht);font:400 1.1rem/1 var(--mono);color:var(--oranje)}
.h27-faq details[open] summary::after{content:"−"}
.h27-faq details p{margin:12px 0 0;color:var(--grijs);max-width:640px}
.h27-cta{padding:0 0 112px}
.h27-cta .h27-wrap>div{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;background:var(--oranje-zacht);border-radius:var(--r-l);padding:56px 64px}
.h27-cta h2{margin:0 0 6px}
.h27-cta p{margin:0;color:var(--grijs)}
.h27-pkop{padding:40px 0 0}
.h27-kruimel{font:500 12px var(--mono);color:var(--grijs);margin-bottom:20px}
.h27-kruimel a{text-decoration:none}
.h27-pkop .h27-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.h27-pkop h1{font-size:clamp(2.3rem,4.4vw,3.9rem)}
.h27-pkop .h27-foto{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3}
.h27-pkop .h27-foto img{width:100%;height:100%;object-fit:cover}
.h27-sub{position:sticky;top:84px;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn);margin-top:56px}
.h27-sub .h27-wrap{display:flex;gap:32px;height:58px;align-items:center;overflow-x:auto}
.h27-sub a{text-decoration:none;font:500 13px var(--mono);color:var(--grijs);white-space:nowrap}
.h27-sub a:hover{color:var(--ink)}
.h27-sub a.door{margin-left:auto;color:var(--oranje);font-weight:600}
.h27-opties{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.h27-optie .h27-beeld{margin-bottom:18px}
.h27-optie h3{margin-bottom:6px}
.h27-optie p{margin:0;color:var(--grijs);font-size:.98rem}
.h27-code{display:block;font:500 12px var(--mono);color:var(--grijs);margin-bottom:8px;letter-spacing:.04em}
.h27-stalen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.h27-staal i{display:block;aspect-ratio:1;border-radius:var(--r);margin-bottom:10px;border:1px solid rgba(0,0,0,.06)}
.h27-staal b{display:block;color:var(--ink);font-weight:600}
.h27-staal small{font:500 12px var(--mono);color:var(--grijs)}
.h27-spec{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.h27-spec th,.h27-spec td{text-align:left;vertical-align:top;padding:16px 22px;border-bottom:1px solid var(--lijn)}
.h27-spec tr:last-child th,.h27-spec tr:last-child td{border-bottom:0}
.h27-spec th{width:34%;font:500 12px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--grijs)}
.h27-spec td{color:var(--ink);font-weight:500}
.h27-config{border:1px solid var(--lijn);border-radius:var(--r-l);padding:24px;background:#fff;min-height:500px}
.h27-punten{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.h27-punt{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:26px}
.h27-punt h3{font-size:1.1rem;margin-bottom:6px}
.h27-punt p{margin:0;color:var(--grijs);font-size:.97rem}
.h27-ftr{background:var(--licht);border-top:1px solid var(--lijn);padding:80px 0 28px;font-size:.95rem;color:var(--tekst)}
.h27-ftr .kol{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:48px}
.h27-ftr h4{margin:0 0 18px;font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--grijs)}
.h27-ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.h27-ftr a{text-decoration:none;color:var(--ink);font-weight:500}
.h27-ftr a:hover{color:var(--oranje)}
.h27-ftr .logo img{height:48px;width:auto;margin-bottom:18px}
.h27-ftr .onder{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:56px;padding-top:22px;border-top:1px solid var(--lijn);font:500 12px var(--mono);color:var(--grijs)}
.h27-ftr .onder a{font-weight:500;color:var(--grijs)}
.h27-mobiel{display:none}
@media (max-width:1100px){
.h27-nav,.h27-tel,.h27-hdr .h27-btn{display:none}
.h27-menuknop{display:block}
.h27-mobmenu.open{display:grid;gap:4px;padding:12px 32px 20px;border-bottom:1px solid var(--lijn);background:#fff}
.h27-mobmenu a{padding:10px 0;text-decoration:none;font-weight:600;color:var(--ink)}
.h27-top li:nth-child(n+2){display:none}
.h27-hero .h27-wrap,.h27-kop,.h27-split,.h27-faqgrid,.h27-showroom,.h27-pkop .h27-wrap{grid-template-columns:1fr;gap:36px}
.h27-kop p,.h27-reviewscore{justify-self:start}
.h27-split.om>:first-child{order:0}
.h27-feiten ul,.h27-maten,.h27-stappen{grid-template-columns:1fr 1fr}
.h27-feiten li:nth-child(3){border-left:0}
.h27-feiten li:nth-child(n+3){border-top:1px solid var(--lijn)}
.h27-prod,.h27-prod.groot{grid-column:span 6}
.h27-opties,.h27-quotes,.h27-punten{grid-template-columns:1fr}
.h27-showroom .tekst{padding:40px 32px}
.h27-ftr .kol{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.h27{font-size:16px;padding-bottom:70px}
.h27-wrap{padding:0 16px}
.h27-sec{padding:72px 0}
.h27-top{display:none}
.h27-hdr .h27-wrap{height:68px}
.h27-logo img{height:40px}
.h27-sub{top:68px}
.h27-hero{padding-top:20px}
.h27-feiten ul,.h27-maten,.h27-stappen{grid-template-columns:1fr}
.h27-feiten li{border-left:0!important;border-top:1px solid var(--lijn)}
.h27-feiten li:first-child{border-top:0}
.h27-prod,.h27-prod.groot{grid-column:1/-1}
.h27-gal{grid-auto-rows:90px;gap:10px}
.g1,.g4{grid-column:1/-1}.g2,.g3,.g5,.g6{grid-column:span 6;grid-row:span 2}
.h27-cta .h27-wrap>div{padding:32px 24px}
.h27-ftr .kol{grid-template-columns:1fr}
.h27-mobiel{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--lijn);padding:10px 12px}
.h27-mobiel a{text-align:center;padding:12px 6px;border-radius:var(--r-s);font-weight:600;font-size:.92rem;text-decoration:none;color:var(--ink);box-shadow:inset 0 0 0 1px #CDD2D6}
.h27-mobiel a.o{background:var(--oranje);color:#fff;box-shadow:none}
}
.h27-hero .h27-wrap.h27-feiten{display:block}
/* ===== 2027 extra (22-10): showroompagina zoals EG + professionele afwerking ===== */
.h27-klein{font-weight:600;color:var(--ink);margin:18px 0 8px}
.h27-ticker{overflow:hidden;background:var(--licht);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);margin-top:56px}
.h27-ticker-rij{display:flex;gap:56px;width:max-content;padding:16px 0;animation:h27-loop 40s linear infinite}
.h27-ticker span{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-weight:500;color:var(--ink)}
.h27-ticker span::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--oranje-zacht) url('data:image/svg+xml;utf8,') center/12px no-repeat}
@keyframes h27-loop{to{transform:translateX(-50%)}}
.h27-twee{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.h27-kaart{background:#fff;border:1px solid var(--lijn);border-radius:var(--r-l);padding:20px 20px 28px;display:flex;flex-direction:column}
.h27-kaart .h27-beeld{margin-bottom:22px}
.h27-kaart>*:not(.h27-beeld){margin-left:12px;margin-right:12px}
.h27-kaart .h27-btn{align-self:flex-start;margin-top:auto}
.h27-kaart.uitgelicht{border:2px solid var(--oranje)}
.h27-vink{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:8px}
.h27-vink li{position:relative;padding-left:30px;color:var(--tekst)}
.h27-vink li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--oranje-zacht) url('data:image/svg+xml;utf8,') center/13px no-repeat}
.h27-tijden{border-collapse:separate;border-spacing:0;margin-top:24px;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;min-width:320px}
.h27-tijden th,.h27-tijden td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--lijn)}
.h27-tijden tr:last-child th,.h27-tijden tr:last-child td{border-bottom:0}
.h27-tijden th{font-weight:500;color:var(--grijs)}
.h27-tijden td{font:500 .95rem var(--mono);color:var(--ink)}
.h27-tegels{display:grid;gap:14px}
.h27-tegel{background:var(--licht);border-radius:var(--r);padding:24px 26px;border-left:4px solid var(--oranje)}
.h27-tegel b{display:block;color:var(--ink);font-size:1.08rem;margin-bottom:4px}
.h27-tegel span{color:var(--grijs)}
.h27-badge{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.95);color:var(--ink);font:500 12px var(--mono);padding:6px 10px;border-radius:8px}
.h27-winkel{display:grid;grid-template-columns:1fr 1.2fr;background:#fff;border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden}
.h27-winkel .tekst{padding:48px}
.h27-winkel dl{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;margin:24px 0 32px}
.h27-winkel dt{font:500 12px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--grijs)}
.h27-winkel dd{margin:0;color:var(--ink);font-weight:500}
.h27-winkel dd a{text-decoration:none}
.h27-winkel .kaart{min-height:440px;background:var(--licht)}
.h27-winkel iframe{width:100%;height:100%;min-height:440px;border:0;display:block}
.h27-calendly{background:#fff;border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden;padding:8px}
.h27-hdr{transition:box-shadow .25s}
.h27-hdr.scrolled{box-shadow:0 8px 24px -16px rgba(29,36,37,.35)}
.h27 .h27-in{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.h27 .h27-in.zien{opacity:1;transform:none}
.h27 :focus-visible{outline:2px solid var(--oranje);outline-offset:3px;border-radius:6px}
.h27 ::selection{background:var(--oranje-zacht)}
@media (prefers-reduced-motion:reduce){.h27-ticker-rij{animation:none}.h27 .h27-in{opacity:1;transform:none;transition:none}}
@media (max-width:1100px){.h27-twee,.h27-winkel{grid-template-columns:1fr}.h27-winkel .tekst{padding:32px}}
.h27-raster{columns:3 320px;column-gap:16px}
.h27-raster figure{break-inside:avoid;margin:0 0 16px;position:relative;border-radius:var(--r);overflow:hidden}
.h27-raster img{width:100%;height:auto}
.h27-raster figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.95);border-radius:8px;padding:6px 12px;font:500 12px var(--mono);color:var(--ink)}
/* ===== v5 (22-10): EG-stijl - lettertypes Montserrat + Outfit, hero-kaart, tegels, productrail, fabriek, hotspots, popup, WhatsApp ===== */
.h27{--mono:"Montserrat",system-ui,sans-serif;--paneel:#EEF2F4;font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.7}
.h27 h1,.h27 h2,.h27 h3,.h27 h4{font-family:"Outfit","Montserrat",sans-serif;font-stretch:normal;letter-spacing:-.02em}
.h27 h1,.h27 h2{font-weight:400;line-height:1.08}
.h27 h1 b,.h27 h2 b{font-weight:700}
.h27 h3{font-weight:600}
.h27-btn{border-radius:999px;font-family:"Montserrat",sans-serif;font-weight:600;font-size:.95rem;min-height:50px;padding:0 26px}
.h27-btn.w{background:#fff;color:var(--ink)}
.h27-btn.w:hover{background:var(--oranje);color:#fff}
.h27-btn.klein{min-height:38px;padding:0 16px;font-size:.85rem;font-style:normal}
.h27-label,.h27-code,.h27-kruimel,.h27-sub a,.h27-maat b,.h27-spec th,.h27-tijden td,.h27-quote footer,.h27-ftr h4,.h27-ftr .onder,.h27-gal figcaption,.h27-raster figcaption,.h27-badge,.h27-tel,.h27-score b,.h27-reviewscore b,.h27-showroom dt,.h27-winkel dt{font-family:"Montserrat",sans-serif;letter-spacing:.02em}
.h27-maat b,.h27-reviewscore b{font-family:"Outfit",sans-serif;font-weight:600}
.h27-hdr .h27-btn{border-radius:999px}
.h27-nav a{font-weight:600;font-size:.95rem}
.h5-kop{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:48px}
.h5-kop h2{margin:0;font-size:clamp(2.2rem,4vw,3.4rem)}
.h5-kop p{margin:0;color:var(--grijs)}
.h5-hero{padding:16px 20px 0}
.h5-hero-kaart{position:relative;border-radius:28px;overflow:hidden;min-height:min(84vh,780px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:80px 24px 150px}
.h5-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:h5-zoom 20s ease-out both}
@keyframes h5-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.h5-hero-kaart::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,26,.25) 0%,rgba(20,24,26,.45) 55%,rgba(20,24,26,.7) 100%)}
.h5-hero-inhoud{position:relative;z-index:2;max-width:900px}
.h5-boven{display:inline-block;color:#fff;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;margin-bottom:18px;opacity:.9}
.h5-hero h1{color:#fff;font-size:clamp(2.6rem,6vw,5.2rem);margin-bottom:32px;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.h5-hero h1 b{color:#fff}
.h5-hero .h27-knoppen{justify-content:center}
.h5-tabs{position:absolute;z-index:3;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:8px;background:#fff;border-radius:20px;padding:10px;box-shadow:0 20px 40px -20px rgba(0,0,0,.4);max-width:calc(100% - 40px);overflow-x:auto}
.h5-tabs a{display:flex;flex-direction:column;align-items:center;gap:6px;width:112px;flex:none;text-decoration:none;font-size:.78rem;font-weight:600;color:var(--ink);padding:6px;border-radius:14px;transition:background .2s}
.h5-tabs a:hover{background:var(--paneel)}
.h5-tabs img,.h5-tab-leeg{width:100%;height:62px;object-fit:cover;border-radius:10px;display:block;background:linear-gradient(135deg,#E9EDF0,#DCE2E6)}
.h5-hero .h27-feiten{margin-top:28px}
.h5-tegels{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.h5-tegel{position:relative;display:block;border-radius:28px;overflow:hidden;min-height:440px;text-decoration:none;color:#fff}
.h5-tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.h5-tegel:hover img{transform:scale(1.04)}
.h5-tegel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%)}
.h5-rondje{position:absolute;z-index:2;left:-40px;top:-40px;width:210px;height:210px;border-radius:50%;background:rgba(29,36,37,.88);display:flex;flex-direction:column;justify-content:center;padding:40px 30px 0 66px;font-size:.82rem;line-height:1.35;color:rgba(255,255,255,.85)}
.h5-rondje b{display:block;color:#fff;font-size:1rem;margin-bottom:4px;font-family:"Outfit",sans-serif}
.h5-tegel-voet{position:absolute;z-index:2;left:28px;right:28px;bottom:26px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.h5-tegel-voet b{font-family:"Outfit",sans-serif;font-size:1.7rem;font-weight:600}
.h5-advies{border-radius:28px;background:var(--paneel);padding:36px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;min-height:440px}
.h5-advies img{width:180px;height:auto;margin-bottom:12px}
.h5-advies h3{font-size:1.6rem;margin-bottom:8px}
.h5-advies p{color:var(--grijs);max-width:360px}
.h5-paneel{background:var(--paneel);border-radius:32px;margin:0 20px;padding:72px 0}
.h5-pijlen{justify-self:end;display:flex;gap:10px}
.h5-pijlen button{width:48px;height:48px;border-radius:50%;border:1px solid #CDD5DA;background:#fff;font-size:1.1rem;cursor:pointer;color:var(--ink)}
.h5-pijlen button:hover{background:var(--oranje);border-color:var(--oranje);color:#fff}
.h5-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3.4);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.h5-rail::-webkit-scrollbar{display:none}
.h5-kaart{position:relative;display:block;aspect-ratio:3/4;border-radius:24px;overflow:hidden;scroll-snap-align:start;text-decoration:none}
.h5-kaart img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.h5-kaart:hover img{transform:scale(1.05)}
.h5-glas{position:absolute;left:18px;right:18px;bottom:18px;padding:22px 16px;border-radius:18px;background:rgba(255,255,255,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:center;font-family:"Outfit",sans-serif;font-weight:600;font-size:1.45rem;color:var(--ink)}
.h5-tag{position:absolute;left:16px;top:16px;background:var(--ink);color:#fff;font-size:.72rem;font-weight:600;padding:6px 12px;border-radius:999px}
.h5-voortgang{height:4px;border-radius:4px;background:#D6DEE3;margin-top:28px;overflow:hidden}
.h5-voortgang i{display:block;height:100%;width:30%;background:var(--ink);border-radius:4px;transition:width .2s}
.h5-fabriek{display:grid;gap:16px}
.h5-usps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.h5-usps div{background:var(--paneel);border-radius:18px;padding:18px 20px}
.h5-usps b{display:block;color:var(--ink);font-family:"Outfit",sans-serif;font-size:1.05rem}
.h5-usps span{font-size:.9rem;color:var(--grijs)}
.h5-hotspots{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/5}
.h5-hotspots img{width:100%;height:100%;object-fit:cover}
.h5-spot{position:absolute;z-index:2;background:none;border:0;padding:0;cursor:pointer}
.h5-spot i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--oranje);font-style:normal;font-weight:700;font-size:1.3rem;box-shadow:0 0 0 6px rgba(255,255,255,.35);animation:h5-puls 2.4s ease-out infinite}
@keyframes h5-puls{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
.h5-spot span{position:absolute;left:46px;top:-4px;width:220px;background:#fff;color:var(--tekst);text-align:left;border-radius:14px;padding:12px 14px;font-size:.85rem;line-height:1.45;box-shadow:0 14px 30px -14px rgba(0,0,0,.35);opacity:0;pointer-events:none;transform:translateY(6px);transition:.2s}
.h5-spot span b{display:block;color:var(--ink)}
.h5-spot:hover span,.h5-spot:focus span,.h5-spot.open span{opacity:1;transform:none}
.h5-popup{position:fixed;right:24px;bottom:100px;z-index:80;width:min(380px,calc(100vw - 32px));background:#fff;border-radius:24px;padding:28px 28px 26px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);transform:translateY(20px);opacity:0;pointer-events:none;transition:.35s}
.h5-popup.open{transform:none;opacity:1;pointer-events:auto}
.h5-popup img{position:absolute;right:16px;top:-64px;width:96px}
.h5-popup h3{font-size:1.6rem;margin:0 0 8px;padding-right:40px}
.h5-popup p{color:var(--grijs);font-size:.92rem;margin-bottom:18px}
.h5-popup .sluit{position:absolute;right:14px;top:12px;background:none;border:0;font-size:1.3rem;cursor:pointer;color:var(--grijs)}
.h5-wa{position:fixed;right:24px;bottom:24px;z-index:79;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 24px -10px rgba(0,0,0,.4);transform:scale(.6);opacity:0;transition:.3s}
.h5-wa.zien{transform:none;opacity:1}
.h5-wa svg{width:32px;height:32px;fill:#fff}
@media (max-width:1100px){.h5-kop,.h5-tegels{grid-template-columns:1fr}.h5-rail{grid-auto-columns:calc((100% - 24px)/1.6)}.h5-pijlen{justify-self:start}}
@media (max-width:640px){
.h5-hero{padding:8px 8px 0}.h5-hero-kaart{border-radius:20px;min-height:auto;padding:64px 16px 130px}
.h5-tabs a{width:84px}.h5-tabs img,.h5-tab-leeg{height:48px}
.h5-paneel{margin:0 8px;padding:56px 0;border-radius:24px}
.h5-rail{grid-auto-columns:78%}
.h5-tegel,.h5-advies{min-height:360px}
.h5-wa{bottom:84px;right:16px;width:54px;height:54px}
.h5-popup{right:16px;bottom:150px}
.h5-spot span{width:180px}
}
@media (prefers-reduced-motion:reduce){.h5-hero-bg,.h5-spot i{animation:none}}
.h5-tegel::after{z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.7) 100%)}
.h5-tegel-voet b{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.h5-rondje{z-index:2}
.h5-spot[style*="left:58%"] span,.h5-spot[style*="left:78%"] span{left:auto;right:46px}
@media (max-width:640px){.h5-hero-kaart{padding-bottom:190px}.h5-hero .h27-knoppen{flex-direction:column;align-items:center}.h5-popup{display:none}.h5-tegel-voet b{font-size:1.4rem}.h5-tegel-voet{flex-direction:column;align-items:flex-start}}
/* ===== v6 (22-10): eigen HETT-gezicht - zon/regen-hero, snelstart, logo-balklabels, tellers, bever-bubbel, seizoensbalk ===== */
.h6-hero{padding:16px 20px 0}
.h6-kaart{position:relative;border-radius:28px;overflow:hidden;min-height:min(86vh,800px);display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:32px;padding:56px}
.h6-kaart>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter 1s ease}
.h6-kaart::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(18,22,24,.72) 0%,rgba(18,22,24,.35) 55%,rgba(18,22,24,.15) 100%),linear-gradient(0deg,rgba(18,22,24,.55),rgba(18,22,24,0) 50%);transition:background 1s}
.h6-regen{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1s;background-image:repeating-linear-gradient(105deg,rgba(255,255,255,.0) 0 14px,rgba(255,255,255,.22) 14px 15px,rgba(255,255,255,0) 15px 38px);background-size:200px 400px;animation:h6-val .5s linear infinite}
@keyframes h6-val{to{background-position:-60px 400px}}
.h6-kaart.regen>img{filter:saturate(.55) brightness(.75)}
.h6-kaart.regen .h6-regen{opacity:1}
.h6-tekst{position:relative;z-index:2;color:#fff;max-width:640px}
.h6-boven{display:inline-flex;align-items:center;gap:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;margin-bottom:18px}
.h6-boven::before{content:"";width:32px;height:4px;border-radius:2px;background:var(--oranje)}
.h6-hero h1{color:#fff;font-size:clamp(2.6rem,5.6vw,4.9rem);margin-bottom:18px}
.h6-hero h1 b{color:#fff}
.h6-tekst p{color:rgba(255,255,255,.85);font-size:1.08rem;max-width:520px;margin-bottom:26px}
.h6-weer{display:inline-flex;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border-radius:999px;padding:5px;margin-bottom:26px;border:1px solid rgba(255,255,255,.25)}
.h6-weer button{border:0;background:none;color:#fff;font:600 .88rem "Montserrat",sans-serif;padding:9px 18px;border-radius:999px;cursor:pointer}
.h6-weer button.aan{background:#fff;color:var(--ink)}
.h6-droog{position:absolute;z-index:2;top:28px;right:28px;background:#fff;color:var(--ink);font-weight:700;font-size:.85rem;padding:10px 16px;border-radius:999px;opacity:0;transform:translateY(-8px);transition:.5s}
.h6-kaart.regen .h6-droog{opacity:1;transform:none}
.h6-start{position:relative;z-index:2;background:#fff;border-radius:22px;padding:26px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.h6-start h3{font-size:1.35rem;margin:0 0 4px}
.h6-start p{font-size:.88rem;color:var(--grijs);margin:0 0 18px}
.h6-start label{display:flex;justify-content:space-between;font-weight:600;font-size:.88rem;color:var(--ink);margin-bottom:8px}
.h6-start input[type=range]{width:100%;accent-color:var(--oranje);margin-bottom:18px}
.h6-keus{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.h6-keus input{position:absolute;opacity:0}
.h6-keus span{display:block;text-align:center;border:1.5px solid var(--lijn);border-radius:12px;padding:12px 8px;font-weight:600;font-size:.86rem;cursor:pointer;color:var(--ink)}
.h6-start .h27-btn{width:100%;justify-content:center}
.h6-balk{position:absolute;z-index:2;left:0;top:28px;background:var(--oranje);color:#fff;padding:10px 20px 10px 28px;border-radius:0 999px 999px 0;font-size:.8rem;line-height:1.3;box-shadow:0 10px 20px -10px rgba(0,0,0,.4)}
.h6-balk b{display:block;font-family:"Outfit",sans-serif;font-size:1rem}
.h5-rondje{display:none}
.h5-glas small{display:block;font-family:"Montserrat",sans-serif;font-weight:500;font-size:.78rem;color:var(--grijs);margin-top:4px;letter-spacing:0}
.h6-tellers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.h6-tellers div{background:var(--paneel);border-radius:18px;padding:22px}
.h6-tellers b{display:block;font-family:"Outfit",sans-serif;font-weight:700;font-size:2.4rem;line-height:1;color:var(--ink);margin-bottom:6px}
.h6-tellers b em{font-style:normal}
.h6-tellers span{font-size:.88rem;color:var(--grijs)}
.h6-seizoen{background:var(--ink);color:#fff;text-align:center;font-size:.86rem;padding:10px 16px}
.h6-seizoen a{color:#fff;font-weight:700;text-decoration:none;border-bottom:2px solid var(--oranje);margin-left:8px}
.h6-bever{position:fixed;left:20px;bottom:20px;z-index:80;display:flex;align-items:flex-end;gap:4px;transform:translateY(140%);transition:transform .6s cubic-bezier(.2,.9,.3,1.2)}
.h6-bever.open{transform:none}
.h6-bever img{width:110px;height:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.25))}
.h6-bubbel{position:relative;background:#fff;border-radius:20px 20px 20px 4px;padding:18px 20px;max-width:280px;margin-bottom:70px;box-shadow:0 20px 40px -18px rgba(0,0,0,.4)}
.h6-bubbel b{display:block;font-family:"Outfit",sans-serif;font-size:1.1rem;color:var(--ink);margin-bottom:4px}
.h6-bubbel p{margin:0 0 12px;font-size:.86rem;color:var(--grijs);line-height:1.5}
.h6-bubbel a{font-weight:700;font-size:.88rem;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--oranje)}
.h6-bubbel .sluit{position:absolute;right:10px;top:6px;border:0;background:none;font-size:1.1rem;color:var(--grijs);cursor:pointer}
.h5-popup{display:none!important}
@media (max-width:1100px){.h6-kaart{grid-template-columns:1fr;padding:40px 28px}}
@media (max-width:640px){.h6-hero{padding:8px 8px 0}.h6-kaart{border-radius:20px;padding:56px 18px 18px;min-height:auto}.h6-start{padding:20px}.h6-bever{display:none}.h6-tellers b{font-size:2rem}.h6-seizoen{font-size:.8rem}}
@media (prefers-reduced-motion:reduce){.h6-regen{animation:none}}
/* ===== kleur-opschoning: één strak oranje, geen gloed, geen perzik, geen oranje lopende tekst ===== */
.h27{--oranje:#E1711D;--oranje-d:#C25E12;--oranje-zacht:#F2F4F5;--paneel:#F2F4F5;--lijn:#E3E6E8;--ink:#1D2425;--tekst:#3B4247;--grijs:#677077}
.h27-btn.o{background:var(--oranje);color:#fff;box-shadow:none!important}
.h27-btn.o:hover{background:var(--oranje-d)}
.h27-btn.l{box-shadow:inset 0 0 0 1.5px #C9CFD3}
.h27-btn.l:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.h27-lijst li::before,.h27-vink li::before,.h27-ticker span::before{background:var(--ink) url('data:image/svg+xml;utf8,') center/12px no-repeat}
.h27-stappen li::before{background:var(--ink);color:#fff}
.h27-maat b small{color:var(--grijs)}
.h27-faq summary::after{color:var(--ink);background:var(--paneel)}
.h27-top li::before{background:var(--ink)}
.h27-tlink{border-bottom-color:var(--ink)}
.h27-tlink:hover{color:var(--ink);border-bottom-color:var(--oranje)}
.h27-prod h3::after,.h27-sub a.door{color:var(--ink)}
.h27-kaart.uitgelicht{border-color:var(--ink)}
.h27-tegel{border-left-color:var(--ink)}
.h27-cta .h27-wrap>div{background:var(--paneel)}
.h6-keus input:checked+span{border-color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.h5-glas{background:rgba(255,255,255,.92);backdrop-filter:none;-webkit-backdrop-filter:none}
.h5-spot i{color:var(--ink);box-shadow:none}
.h27 :focus-visible{outline-color:var(--ink)}
.h27 ::selection{background:#E3E6E8}
.h6-hero h1{font-size:clamp(2.3rem,4.2vw,3.9rem)}
.h6-kaart{min-height:min(88vh,820px);align-items:center}
.h6-start{align-self:end}
.h6-regen{background-image:repeating-linear-gradient(105deg,rgba(255,255,255,0) 0 10px,rgba(220,232,240,.45) 10px 11.5px,rgba(255,255,255,0) 11.5px 26px);background-size:160px 320px}
@keyframes h6-val{to{background-position:-50px 320px}}
/* logo 2026 */
.h27-logo img{height:46px;width:auto}
.h27-ftr .logo img{height:44px;width:auto}
.h6-regen,.h6-droog,.h6-weer{display:none!important}
@media (max-width:640px){.h27-logo img{height:36px}}
/* ===== configuratorpagina (22-10): compacte kop, geen dubbel kader, laadmelding, geen WhatsApp-knop over de configurator ===== */
.h27-cfgkop{padding:28px 0 18px}
.h27-cfgkop .h27-kruimel{margin-bottom:10px}
.h27-cfgkop h1{font-size:clamp(1.9rem,3.2vw,2.8rem);margin:0 0 6px}
.h27-cfgkop p{margin:0;color:var(--grijs);max-width:760px}
.h27-cfgvak{padding:0 0 80px}
.h27-config{position:relative;border:0;padding:0;background:var(--paneel);border-radius:24px;min-height:780px;overflow:hidden}
.h27-config::before{content:"De configurator wordt geladen…";position:absolute;left:0;right:0;top:140px;text-align:center;font-weight:600;color:var(--grijs);font-size:.95rem}
.h27-config::after{content:"";position:absolute;left:50%;top:84px;width:36px;height:36px;margin-left:-18px;border-radius:50%;border:3px solid #D5DBDF;border-top-color:var(--oranje);animation:h27-draai .9s linear infinite}
@keyframes h27-draai{to{transform:rotate(360deg)}}
.h27-config [data-meetpiloot]{position:relative;z-index:1;display:block}
.page-id-37 .h5-wa,.page-id-38 .h5-wa,.page-id-39 .h5-wa,.page-id-40 .h5-wa{display:none!important}
@media (max-width:1100px){.h27-pkop .h27-wrap[style]{grid-template-columns:1fr!important;gap:20px!important}}
@media (max-width:640px){.h27-cfgkop{padding:18px 0 12px}.h27-cfgkop p{font-size:.92rem}.h27-config{border-radius:16px;min-height:980px}.h27-cfgvak .h27-wrap{padding:0 8px}}
@media (prefers-reduced-motion:reduce){.h27-config::after{animation:none}}
/* ===== eigen fabriek (22-10): banner + keten van fabriek tot tuin ===== */
.h7-banner{position:relative;border-radius:28px;overflow:hidden;min-height:560px;display:flex;align-items:center}
.h7-banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h7-banner::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(18,22,24,.82) 0%,rgba(18,22,24,.55) 45%,rgba(18,22,24,.05) 80%)}
.h7-banner-tekst{position:relative;z-index:2;max-width:600px;padding:56px;color:rgba(255,255,255,.86)}
.h7-banner h2{color:#fff;font-size:clamp(2.2rem,4vw,3.4rem);margin-bottom:16px}
.h7-banner h2 b{color:#fff}
.h7-banner .h6-boven{color:#fff}
.h7-chips{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.h7-chips li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:9px 16px;font-size:.88rem;color:#fff}
.h7-chips b{font-family:"Outfit",sans-serif;font-weight:700}
.h7-keten{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:k}
.h7-keten li{background:#fff;border:1px solid var(--lijn);border-radius:22px;overflow:hidden;padding-bottom:22px}
.h7-foto{aspect-ratio:4/3;overflow:hidden}
.h7-foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.h7-keten li:hover .h7-foto img{transform:scale(1.05)}
.h7-keten span{display:block;margin:18px 22px 6px;font-weight:700;font-size:.8rem;letter-spacing:.12em;color:var(--grijs)}
.h7-keten h3{margin:0 22px 6px;font-size:1.2rem}
.h7-keten p{margin:0 22px;color:var(--grijs);font-size:.92rem}
.h7-keten li:last-child{background:var(--ink);border-color:var(--ink)}
.h7-keten li:last-child h3{color:#fff}
.h7-keten li:last-child p,.h7-keten li:last-child span{color:rgba(255,255,255,.7)}
.h7-knoppen{margin-top:28px;justify-content:center}
@media (max-width:1100px){.h7-keten{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.h7-banner{min-height:0;border-radius:20px}.h7-banner::before{background:linear-gradient(0deg,rgba(18,22,24,.85),rgba(18,22,24,.45))}.h7-banner-tekst{padding:120px 22px 28px}.h7-keten{grid-template-columns:1fr}}
/* ===== regen-hero (22-10): echte regen over een verlichte veranda ===== */
.h8-regenkaart>img{filter:saturate(.8) brightness(.78) contrast(1.05)}
.h8-regenkaart::before{background:linear-gradient(180deg,rgba(60,72,84,.55) 0%,rgba(30,38,46,.25) 35%,rgba(18,22,24,.15) 60%,rgba(18,22,24,.6) 100%),linear-gradient(90deg,rgba(18,22,24,.7) 0%,rgba(18,22,24,.25) 55%,rgba(18,22,24,0) 100%)!important}
.h8-regen{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.h8-droog{position:absolute;z-index:2;top:26px;right:26px;display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.94);color:var(--ink);font-weight:700;font-size:.86rem;padding:10px 16px;border-radius:999px}
.h8-droog::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--oranje)}
.h6-weer,.h6-regen,.h6-droog{display:none!important}
@media (max-width:640px){.h8-droog{top:14px;right:14px;font-size:.78rem;padding:8px 12px}}
.h8-regenkaart>img{filter:saturate(.95) brightness(.88) contrast(1.05)!important}
.h8-regenkaart::before{background:linear-gradient(180deg,rgba(70,82,94,.45) 0%,rgba(30,38,46,.12) 40%,rgba(18,22,24,.1) 60%,rgba(18,22,24,.55) 100%),linear-gradient(90deg,rgba(18,22,24,.66) 0%,rgba(18,22,24,.2) 50%,rgba(18,22,24,0) 100%)!important}
/* ===== taalkiezer (22-10): subtiel in de topbalk + suggestie op browsertaal; Google-vertaling pas na keuze ===== */
.h9-rechts{display:flex;align-items:center;gap:18px}
.h9-taal{position:relative}
.h9-taal-knop{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 6px;border-radius:8px;font:600 .82rem "Montserrat",sans-serif;color:var(--ink);cursor:pointer}
.h9-taal-knop:hover{background:rgba(0,0,0,.05)}
.h9-taal-knop svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
.h9-taal-knop::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px}
.h9-taal-lijst{position:absolute;right:0;top:calc(100% + 6px);z-index:200;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--lijn);border-radius:14px;box-shadow:0 20px 40px -20px rgba(0,0,0,.3);min-width:170px;display:none;max-height:360px;overflow:auto}
.h9-taal.open .h9-taal-lijst{display:block}
.h9-taal-lijst li{padding:8px 12px;border-radius:9px;font-size:.88rem;color:var(--ink);cursor:pointer;white-space:nowrap}
.h9-taal-lijst li:hover,.h9-taal-lijst li.aan{background:var(--paneel)}
.h9-taal-lijst li.aan{font-weight:700}
.h9-voorstel{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:300;display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:999px;padding:8px 8px 8px 18px;font-size:.88rem;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.h9-voorstel button{border:0;border-radius:999px;padding:7px 14px;font:600 .82rem "Montserrat",sans-serif;cursor:pointer}
.h9-voorstel .ja{background:var(--oranje);color:#fff}
.h9-voorstel .nee{background:rgba(255,255,255,.12);color:#fff}
.goog-te-banner-frame,.skiptranslate>iframe,#goog-gt-tt,.goog-te-balloon-frame,#google_translate_element{display:none!important}
body{top:0!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
@media (max-width:1100px){.h27-top li:nth-child(n+2){display:none}}
@media (max-width:640px){.h27-top{display:block!important}.h27-top ul{display:none}.h27-top .h27-wrap{justify-content:space-between;height:34px}.h9-voorstel{top:auto;bottom:84px;width:calc(100% - 24px);border-radius:16px;flex-wrap:wrap}}
.h27-top .h9-taal-lijst{display:none!important;flex-direction:column;gap:0}
.h27-top .h9-taal.open .h9-taal-lijst{display:block!important}
.h27-top .h9-taal-lijst li{display:block!important;white-space:nowrap}
.h27-top .h9-taal-lijst li::before{display:none!important;content:none!important}
.h9-rechts a{white-space:nowrap}
/* ===== stappen interactief (22-10) ===== */
.h10{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:stretch}
.h10-lijst{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.h10-lijst button{position:relative;width:100%;display:flex;align-items:center;gap:18px;text-align:left;background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:20px 22px;cursor:pointer;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.h10-lijst button:hover{border-color:#C9CFD3}
.h10-lijst button.aan{border-color:var(--ink);box-shadow:0 14px 30px -20px rgba(0,0,0,.35)}
.h10-nr{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--paneel);font:700 .9rem "Montserrat",sans-serif;color:var(--ink);transition:.25s}
.h10-lijst button.aan .h10-nr{background:var(--oranje);color:#fff}
.h10-tt b{display:block;font-family:"Outfit",sans-serif;font-size:1.2rem;color:var(--ink)}
.h10-tt em{font-style:normal;font-size:.9rem;color:var(--grijs)}
.h10-balk{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.h10-balk i{display:block;height:100%;width:0;background:var(--oranje)}
.h10-lijst button.aan .h10-balk i{animation:h10-loop var(--h10-duur,6s) linear forwards}
.h10.gestopt .h10-lijst button.aan .h10-balk i{animation:none;width:100%}
@keyframes h10-loop{to{width:100%}}
.h10-paneel{position:relative;border-radius:28px;overflow:hidden;min-height:460px;background:var(--paneel)}
.h10-paneel figure{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.03);transition:opacity .6s ease,transform .9s ease;pointer-events:none}
.h10-paneel figure.aan{opacity:1;transform:none;pointer-events:auto}
.h10-paneel img{width:100%;height:100%;object-fit:cover}
.h10-paneel figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,22,24,.78) 0%,rgba(18,22,24,.15) 55%,rgba(18,22,24,0) 100%)}
.h10-paneel figure.bever{background:radial-gradient(circle at 70% 40%,#fff 0%,var(--paneel) 70%)}
.h10-paneel figure.bever img{object-fit:contain;padding:30px 30px 150px;width:100%;height:100%}
.h10-paneel figure.bever::after{background:linear-gradient(0deg,rgba(18,22,24,.85) 0%,rgba(18,22,24,0) 45%)}
.h10-paneel figcaption{position:absolute;z-index:2;left:30px;right:30px;bottom:28px;color:rgba(255,255,255,.85)}
.h10-paneel figcaption span{display:inline-block;font-weight:700;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;color:#fff;opacity:.8}
.h10-paneel figcaption b{display:block;font-family:"Outfit",sans-serif;font-size:1.7rem;color:#fff;margin-bottom:6px}
.h10-paneel figcaption p{margin:0 0 14px;max-width:520px}
@media (max-width:1100px){.h10{grid-template-columns:1fr}.h10-paneel{min-height:380px;order:-1}}
@media (max-width:640px){.h10-lijst button{padding:14px 16px}.h10-paneel{min-height:340px;border-radius:20px}.h10-paneel figcaption b{font-size:1.3rem}}
@media (prefers-reduced-motion:reduce){.h10-lijst button.aan .h10-balk i{animation:none;width:100%}.h10-paneel figure{transition:none}}
/* knoppen: roze hover/focus van Hello Elementor neutraliseren */
.h27 button:not(.h27-btn):hover,.h27 button:not(.h27-btn):focus,.h27 button:not(.h27-btn):active{background-color:transparent;color:inherit;border-color:inherit}
.h10-lijst button,.h10-lijst button:hover,.h10-lijst button:focus,.h10-lijst button:active{background:#fff!important;color:var(--ink)!important}
.h10-lijst button:hover{border-color:#C9CFD3!important}
.h10-lijst button.aan{border-color:var(--ink)!important}
.h5-pijlen button:hover,.h5-pijlen button:focus{background:var(--oranje)!important;border-color:var(--oranje)!important;color:#fff!important}
.h9-taal-knop:hover,.h9-taal-knop:focus{background:rgba(0,0,0,.05)!important;color:var(--ink)!important}
.h6-keus span{background:#fff}
/* ===== v7 kleur en actie (22-10): feller logo-oranje, minder grijs, color grading hero, schuivende actiebalk ===== */
.h27{--oranje:#EE711E;--oranje-d:#D35F10;--paneel:#F4F6F8;--lijn:#E6E9EC;--ink:#1A2226;--tekst:#343C42;--grijs:#5F6870}
/* hero color grading: koel-blauwe schaduwen, warme lichten, meer contrast */
.h8-regenkaart>img{filter:contrast(1.12) saturate(1.25) brightness(.95)!important}
.h8-regenkaart::before{background:linear-gradient(90deg,rgba(10,20,32,.72) 0%,rgba(10,20,32,.28) 52%,rgba(10,20,32,0) 100%),linear-gradient(180deg,rgba(25,55,85,.35) 0%,rgba(0,0,0,0) 45%,rgba(10,18,26,.55) 100%)!important}
.h8-regenkaart::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 45% 40% at 62% 58%,rgba(255,170,80,.38),rgba(255,170,80,0) 70%),linear-gradient(135deg,rgba(0,90,140,.22),rgba(255,140,40,.14));mix-blend-mode:soft-light}
/* schuivende actiebalk */
.h6-seizoen{display:none}
.h11-actie{background:var(--oranje);color:#fff;overflow:hidden;height:40px;position:relative}
.h11-rij{position:relative;height:40px;max-width:1280px;margin:0 auto}
.h11-actie p{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:.88rem;padding:0 16px;text-align:center;transform:translateY(100%);opacity:0;transition:transform .6s ease,opacity .6s ease}
.h11-actie p.aan{transform:none;opacity:1}
.h11-actie p.weg{transform:translateY(-100%);opacity:0}
.h11-actie a{color:#fff;font-weight:800;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.7);white-space:nowrap}
/* actiestrook bij de configurator */
.h11-winactie{display:flex;align-items:center;gap:18px;background:linear-gradient(110deg,var(--ink),#26333A);color:rgba(255,255,255,.85);border-radius:20px;padding:16px 22px;margin-bottom:16px}
.h11-winactie b{display:block;color:#fff;font-family:"Outfit",sans-serif;font-size:1.15rem}
.h11-winactie p{margin:2px 0 0;font-size:.9rem}
.h11-prijs{flex:none;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:var(--oranje);color:#fff;font:800 1.05rem "Outfit",sans-serif;transform:rotate(-8deg);box-shadow:0 10px 24px -10px rgba(238,113,30,.8)}
/* meer kleur en contrast door de pagina */
.h27-top{background:#fff}
.h5-paneel{background:var(--paneel)}
.h27-feiten ul{border-color:var(--lijn);box-shadow:0 18px 40px -30px rgba(26,34,38,.35)}
.h27-feiten b{color:var(--ink)}
.h27-feiten li:first-child b,.h27-feiten li b{position:relative}
.h27-cta .h27-wrap>div{background:var(--oranje)!important;color:#fff}
.h27-cta h2{color:#fff}
.h27-cta p{color:rgba(255,255,255,.9)!important}
.h27-cta .h27-btn.o{background:var(--ink)}
.h27-cta .h27-btn.o:hover{background:#000}
.h7-keten li:last-child{background:var(--oranje);border-color:var(--oranje)}
.h7-keten li:last-child p,.h7-keten li:last-child span{color:rgba(255,255,255,.9)}
.h6-boven::before,.h27-label::before{background:var(--oranje)}
.h5-kop h2 b,.h27 h2 b{color:var(--ink)}
.h5-tag{background:var(--oranje)}
@media (max-width:640px){.h11-actie,.h11-rij{height:46px}.h11-actie p{font-size:.78rem;line-height:1.3}.h11-winactie{padding:14px;gap:12px}.h11-prijs{width:58px;height:58px;font-size:.9rem}}
/* ===== v8 (22-10-2026): productkeuze in hero, fabriek, hotspots, reviews, FAQ, footer, dealer ===== */
/* kop: showroomknop naast samenstellen */
.h27-hdr .h27-wrap{gap:28px}
.h27-tel{display:inline-flex;align-items:center;gap:8px}
.h27-tel svg{width:18px;height:18px;fill:none;stroke:var(--oranje);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.h27-hdr .h12-showknop{margin-left:auto;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)!important;background:#fff}
.h27-hdr .h12-showknop:hover{background:var(--ink);color:#fff}
.h27-hdr .h12-showknop+.h27-btn{margin-left:-14px}
.h27-hdr .h12-showknop::after,.h27-hdr .h27-btn.o::after{display:none}
.h27-tel{margin-left:auto}
@media (max-width:1440px){.h27-tel span{display:none}.h27-tel{width:44px;height:44px;justify-content:center;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--lijn)}.h27-hdr .h12-showknop{margin-left:0}}
@media (max-width:1100px){.h27-hdr .h12-showknop{display:none}}
/* hero: productkeuze in plaats van snelstart */
.h12-kies{position:relative;z-index:2;align-self:end;background:#fff;border-radius:22px;padding:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);display:grid;gap:8px;min-width:0}
.h12-kies h3{font-size:1.3rem;margin:0}
.h12-kies>p{font-size:.88rem;color:var(--grijs);margin:0 0 8px}
.h12-kies a{display:grid;grid-template-columns:52px 1fr 34px;align-items:center;gap:14px;padding:8px;border-radius:14px;text-decoration:none;color:var(--ink);background:var(--paneel);transition:background .2s,transform .2s,box-shadow .2s}
.h12-kies a img{width:52px;height:52px;object-fit:cover;border-radius:10px}
.h12-kies a b{display:block;font-size:.98rem}
.h12-kies a small{display:block;font-size:.8rem;color:var(--grijs)}
.h12-kies a i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--oranje);font-style:normal;transition:background .2s,color .2s,transform .2s}
.h12-kies a:hover{background:#fff;box-shadow:0 0 0 2px var(--oranje);transform:translateX(3px)}
.h12-kies a:hover i{background:var(--oranje);color:#fff;transform:translateX(2px)}
@media (max-width:820px){.h12-kies{margin:0 12px}}
/* fabriek: stappen met nummer op de foto en verbindingslijn */
.h12-keten{position:relative}
.h12-keten li{position:relative;transition:transform .3s,box-shadow .3s,border-color .3s}
.h12-keten li:hover{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(26,34,38,.45);border-color:var(--oranje)}
.h12-keten .h7-foto{position:relative;overflow:hidden;aspect-ratio:4/3}
.h12-keten .h7-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.h12-keten .h7-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35));transition:opacity .3s}
.h12-keten li:hover .h7-foto::after{opacity:.3}
.h7-keten .h12-nr{position:absolute;top:14px;left:14px;margin:0;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--oranje);font:700 .9rem/1 "Outfit",sans-serif;letter-spacing:0;box-shadow:0 8px 20px -8px rgba(0,0,0,.4);transition:background .3s,color .3s}
.h12-keten li:hover .h12-nr{background:var(--oranje);color:#fff}
.h12-keten h3{margin-top:20px!important}
.h7-keten.h12-keten li:last-child{background:#fff;border-color:var(--lijn)}
.h7-keten.h12-keten li:last-child h3{color:var(--ink)}
.h7-keten.h12-keten li:last-child p{color:var(--grijs)}
.h7-keten.h12-keten li:last-child .h12-nr{background:var(--oranje);color:#fff}
.h7-keten.h12-keten li:last-child{box-shadow:inset 0 -4px 0 var(--oranje)}
.h7-chips li{transition:background .25s,border-color .25s}
.h7-chips li:hover{background:var(--oranje);border-color:var(--oranje)}
/* hotspots: oranje pulserende plusjes, gekoppeld aan de blokken */
.h5-spot i{width:40px;height:40px;background:var(--oranje)!important;color:#fff!important;font-size:1.4rem;box-shadow:0 0 0 0 rgba(238,113,30,.6)!important;animation:h12-puls 2.2s ease-out infinite;transition:transform .3s,background .2s}
.h5-spot:hover i{transform:scale(1.1)}
.h5-spot.open i{transform:rotate(45deg);background:#fff!important;color:var(--oranje)!important;animation:none}
@keyframes h12-puls{0%{box-shadow:0 0 0 0 rgba(238,113,30,.6)}70%{box-shadow:0 0 0 16px rgba(238,113,30,0)}100%{box-shadow:0 0 0 0 rgba(238,113,30,0)}}
.h5-spot span{border-left:4px solid var(--oranje);width:210px;padding:14px 16px}
.h12-maten .h27-maat{font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s,background .2s}
.h12-maten .h27-maat:hover{border-color:var(--oranje);transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(26,34,38,.4);background:#fff!important}
.h12-maten .h27-maat.aan{border-color:var(--oranje);box-shadow:inset 0 0 0 1px var(--oranje);background:#FFF6EF!important}
.h12-maten .h27-maat.aan b small,.h12-maten .h27-maat:hover b small{color:var(--oranje)}
.h12-maten .h27-maat:focus{outline:none;color:inherit}
.h12-maten .h27-maat b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.h5-spot i{animation:none}}
/* reviews */
.h12-reviews .h27-reviewscore{background:#fff;border-radius:18px;padding:14px 22px;box-shadow:0 14px 30px -22px rgba(26,34,38,.4)}
.h12-reviews .h27-reviewscore .h27-sterren{color:#FBBC05;letter-spacing:2px}
.h12-g{width:28px;height:28px;flex:none}
.h12-reviews .h27-quote{position:relative;transition:transform .3s,box-shadow .3s;overflow:hidden}
.h12-reviews .h27-quote::before{content:"\201C";position:absolute;right:22px;bottom:-34px;font:700 9rem/1 "Outfit",sans-serif;color:var(--oranje);opacity:.12}
.h12-reviews .h27-quote:hover{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(26,34,38,.45)}
.h12-q-kop{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.h12-q-kop b{display:block;color:var(--ink);font-size:.98rem}
.h12-q-kop small{display:block;color:var(--grijs);font-size:.8rem}
.h12-q-kop .h12-g{margin-left:auto;width:22px;height:22px}
.h12-av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--oranje),#F59A4E);color:#fff;font:700 1.05rem/1 "Outfit",sans-serif}
.h12-reviews .h27-quote p{margin-top:10px}
.h12-alle{text-align:center;margin-top:28px}
/* FAQ */
.h27-faq details{padding:0;border-radius:0;transition:background .2s}
.h27-faq summary{padding:22px 4px;align-items:center;transition:color .2s}
.h27-faq summary:hover{color:var(--oranje)}
.h27-faq summary::after{content:"+"!important;width:36px;height:36px;font-size:1.3rem;background:var(--paneel)!important;color:var(--ink)!important;transition:transform .3s,background .3s,color .3s}
.h27-faq summary:hover::after{background:var(--oranje)!important;color:#fff!important}
.h27-faq details[open] summary::after{transform:rotate(45deg);background:var(--oranje)!important;color:#fff!important}
.h27-faq details p{margin:0 4px 22px!important;animation:h12-open .35s ease}
@keyframes h12-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.h12-hulp{display:grid;gap:12px;margin-top:26px;max-width:380px}
.h12-hulp a{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--lijn);border-radius:16px;text-decoration:none;color:var(--tekst);font-size:.9rem;transition:border-color .2s,transform .2s,box-shadow .2s}
.h12-hulp a:hover{border-color:var(--oranje);transform:translateX(4px);box-shadow:0 14px 30px -22px rgba(26,34,38,.4)}
.h12-hulp b{display:block;color:var(--ink);font-size:1rem}
.h12-hulp i,.h12-contact i{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#FFF1E6}
.h12-hulp svg,.h12-contact svg{width:21px;height:21px;fill:none;stroke:var(--oranje);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.h12-hulp svg.vol,.h12-contact svg.vol{fill:var(--oranje);stroke:none}
/* footer */
.h12-ftr{background:#16191B!important;color:#AEB5BA!important;border-top:0!important;padding:0 0 28px!important}
.h12-ftr-band{background:var(--oranje);color:#fff;padding:38px 0;margin-bottom:72px;position:relative;overflow:hidden}
.h12-ftr-band::after{content:"";position:absolute;right:-60px;top:-80px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.08)}
.h12-ftr-band .h27-wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative;z-index:1}
.h12-ftr-band h3{color:#fff;font-size:clamp(1.5rem,2.4vw,2rem);margin:4px 0}
.h12-ftr-band p{margin:0;color:rgba(255,255,255,.9)}
.h12-ftr-boven{font:600 .75rem "Montserrat",sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.h12-ftr-band .h27-btn.o{background:#16191B}
.h12-ftr-band .h27-btn.o:hover{background:#000}
.h12-ftr-band .h27-btn.w:hover{background:#fff;color:var(--oranje)}
.h12-ftr .kol{grid-template-columns:1.5fr .9fr .9fr .8fr 1.4fr!important;gap:40px!important}
.h12-ftr h4{color:#fff!important;font:600 .8rem "Montserrat",sans-serif!important;letter-spacing:.12em!important;margin-bottom:22px!important;position:relative;padding-bottom:12px}
.h12-ftr h4::after{content:"";position:absolute;left:0;bottom:0;width:24px;height:2px;background:var(--oranje)}
.h12-ftr a{color:#D9DEE1!important;font-weight:500;transition:color .2s}
.h12-ftr a:hover{color:var(--oranje)!important}
.h12-ftr .logo img{height:46px;filter:brightness(0) invert(1);margin-bottom:18px}
.h12-ftr-merk p{color:#AEB5BA;line-height:1.65;max-width:330px}
.h12-ftr-score{display:inline-flex;align-items:center;gap:12px;margin:6px 0 22px;padding:10px 16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;text-decoration:none}
.h12-ftr-score b{font:600 1.7rem/1 "Outfit",sans-serif;color:#fff}
.h12-ftr-score span{display:block;font-size:.8rem;color:#AEB5BA;line-height:1.4}
.h12-ftr-score .h27-sterren{display:block;color:#FBBC05}
.h12-sociaal{display:flex;gap:10px}
.h12-sociaal a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);transition:background .25s,transform .25s}
.h12-sociaal svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.8}
.h12-sociaal svg.vol{fill:#fff;stroke:none}
.h12-sociaal svg .punt{fill:#fff;stroke:none}
.h12-sociaal a:hover{background:var(--oranje);transform:translateY(-3px)}
.h12-contact{gap:18px!important}
.h12-contact li{display:flex;align-items:center;gap:14px;line-height:1.45}
.h12-contact small{display:block;font-size:.8rem;color:#8E979D}
.h12-ftr .h12-contact i{width:44px;height:44px;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.06),0 10px 22px -10px rgba(238,113,30,.6);transition:transform .25s}
.h12-ftr .h12-contact li:hover i{transform:scale(1.08)}
.h12-ftr .h12-dealer::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--oranje);margin-right:8px;vertical-align:middle}
.h12-ftr .onder{border-top-color:rgba(255,255,255,.1)!important;color:#7F888E!important;margin-top:64px!important}
.h12-ftr .onder a{color:#AEB5BA!important}
@media (max-width:1100px){.h12-ftr .kol{grid-template-columns:1fr 1fr!important}.h12-ftr-merk{grid-column:1/-1}.h12-ftr .kol>div:last-child{grid-column:1/-1}}
@media (max-width:560px){.h12-ftr .kol{grid-template-columns:1fr!important}.h12-ftr-band .h27-knoppen{width:100%}.h12-ftr-band .h27-btn{width:100%;justify-content:center}.h12-ftr{padding-bottom:90px!important}}
/* dealerpagina */
.h12-dkop{position:relative;min-height:560px;display:flex;align-items:flex-end;margin:14px 20px 0;border-radius:28px;overflow:hidden;color:#fff}
.h12-dkop>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.08) saturate(1.15)}
.h12-dkop::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,17,19,.86) 0,rgba(14,17,19,.55) 50%,rgba(14,17,19,.15) 100%)}
.h12-dkop .h27-wrap{position:relative;z-index:1;padding-top:90px;padding-bottom:64px;width:100%}
.h12-dkop h1{color:#fff;font-size:clamp(2.3rem,5vw,4rem);line-height:1.05;margin:12px 0 18px;font-weight:300}
.h12-dkop h1 b{font-weight:700}
.h12-dkop p{max-width:560px;color:rgba(255,255,255,.88);font-size:1.08rem}
.h12-dkop .h27-kruimel,.h12-dkop .h27-kruimel a{color:rgba(255,255,255,.7)}
.h12-dkop .h6-boven{color:#fff}
.h12-voordelen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.h12-voordelen>div{background:#fff;border:1px solid var(--lijn);border-radius:22px;padding:28px;transition:transform .3s,box-shadow .3s,border-color .3s}
.h12-voordelen>div:hover{transform:translateY(-6px);border-color:var(--oranje);box-shadow:0 26px 50px -30px rgba(26,34,38,.45)}
.h12-voordelen i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#FFF1E6;color:var(--oranje);font:700 .9rem/1 "Outfit",sans-serif;font-style:normal;margin-bottom:18px;transition:background .3s,color .3s}
.h12-voordelen>div:hover i{background:var(--oranje);color:#fff}
.h12-voordelen h3{font-size:1.2rem;margin:0 0 8px}
.h12-voordelen p{color:var(--grijs);margin:0;font-size:.95rem}
.h12-dfotos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.h12-dfotos img{width:100%;height:100%;object-fit:cover;border-radius:18px;aspect-ratio:4/3}
.h12-dfotos img:first-child{grid-column:1/-1;aspect-ratio:16/8}
.h12-dstappen{list-style:none;counter-reset:d;padding:0;margin:26px 0 0;display:grid;gap:14px}
.h12-dstappen li{counter-increment:d;position:relative;padding:18px 20px 18px 72px;background:#fff;border:1px solid var(--lijn);border-radius:18px}
.h12-dstappen li::before{content:counter(d);position:absolute;left:18px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--oranje);color:#fff;font:700 1rem/1 "Outfit",sans-serif}
.h12-dstappen b{display:block;color:var(--ink)}
.h12-dstappen span{color:var(--grijs);font-size:.93rem}
.h12-dform{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}
.h12-contact.licht{list-style:none;padding:0;margin:28px 0 0;display:grid}
.h12-contact.licht a{color:var(--ink);font-weight:600;text-decoration:none}
.h12-formkaart{background:#fff;border:1px solid var(--lijn);border-radius:24px;padding:32px;box-shadow:0 30px 60px -40px rgba(26,34,38,.45)}
.h12-velden{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.h12-velden p{margin:0 0 12px}
.h12-velden p.vol{grid-column:1/-1}
.h12-velden label{display:block;font-weight:600;font-size:.85rem;color:var(--ink);margin-bottom:6px}
.h12-velden input,.h12-velden textarea{width:100%;border:1.5px solid var(--lijn);border-radius:12px;padding:12px 14px;font:inherit;font-size:.95rem;background:var(--paneel);transition:border-color .2s,background .2s}
.h12-velden input:focus,.h12-velden textarea:focus{outline:none;border-color:var(--oranje);background:#fff}
.h12-akkoord{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--grijs);margin:6px 0 20px}
.h12-akkoord input{accent-color:var(--oranje);margin-top:3px}
.h12-formkaart .h27-btn{width:100%;justify-content:center}
.h12-honey{position:absolute;left:-9999px}
.h12-ok,.h12-fout{padding:18px 20px;border-radius:14px;background:#EAF7EE;color:#1C5B32}
.h12-fout{background:#FDECEC;color:#8A1F1F;margin-bottom:16px}
@media (max-width:1100px){.h12-voordelen{grid-template-columns:1fr 1fr}.h12-dform{grid-template-columns:1fr;gap:32px}}
@media (max-width:640px){.h12-voordelen,.h12-velden{grid-template-columns:1fr}.h12-dkop{margin:10px 10px 0;min-height:520px}.h12-formkaart{padding:22px}}
.h5-spot span{white-space:normal!important;width:220px!important}
.h27 .hett-totop,.h27 .hett-mobilebar{display:none!important}
.h12-ftr-band{background:#22282B}
.h12-ftr-band::after{background:radial-gradient(circle,rgba(238,113,30,.35),transparent 70%)}
.h12-ftr-boven{color:var(--oranje);opacity:1}
.h12-ftr-band p{color:#AEB5BA}
.h12-ftr-band .h27-btn.o{background:var(--oranje)}
.h12-ftr-band .h27-btn.o:hover{background:var(--oranje-d)}
.h12-ftr-band .h27-btn.w{color:var(--ink)!important;background:#fff}
.h12-ftr-band .h27-btn.w:hover{color:var(--oranje)!important}
.h12-ftr-band .h27-btn.o{color:#fff!important}
.h12-ftr .logo{display:inline-block;background:#fff;padding:10px 16px;border-radius:14px;margin-bottom:18px}
.h12-ftr .logo img{filter:none;height:40px;margin:0}
.h12-dkop>img{z-index:0}.h12-dkop::before{z-index:1}.h12-dkop .h27-wrap{z-index:2}
/* fabrieksvideo */
.h7-banner{position:relative}
.h7-banner .h12-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 78%;opacity:0;transition:opacity 1.2s;z-index:0;filter:contrast(1.08) saturate(1.1)}
.h7-banner.h12-met-video .h12-video{opacity:1}
.h7-banner.h12-met-video>img{opacity:0;transition:opacity 1.2s}
.h7-banner .h7-banner-tekst{position:relative;z-index:2}
.h7-banner.h12-met-video::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,17,19,.82) 0,rgba(14,17,19,.45) 55%,rgba(14,17,19,.1) 100%);pointer-events:none}
/* configurator: minder witruimte eronder */
.h27-cfgvak{padding-bottom:32px!important}
.h27-cfgvak+.h27-sec{padding-top:56px!important;background:var(--paneel)!important}
/* mobiel: niets breder dan het scherm */
html,body.h27{overflow-x:clip}
.h27-split>*,.h27-faqgrid>*,.h12-dform>*{min-width:0}
@media (max-width:700px){
.h12-maten{grid-template-columns:1fr 1fr!important;gap:10px!important}
.h12-maten .h27-maat{padding:18px 16px;min-width:0}
.h12-maten .h27-maat b{font-size:1.9rem;white-space:normal}
.h12-maten .h27-maat b small{display:inline-block}
.h5-spot span{width:190px!important}
.h5-spot[style*="left:58%"] span,.h5-spot[style*="left:78%"] span{left:auto;right:46px}
.h27-mobiel{left:0;right:0;width:auto!important;max-width:100vw}
}
/* Google-score in de feitenbalk in Google-kleuren */
.h12-gfeit a{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.h12-gfeit .h12-g{width:30px;height:30px}
.h12-gfeit b{display:flex;align-items:center;gap:6px}
.h12-gfeit>a>span>span{display:block}
.h27-feiten .h27-sterren,.h27-top .h27-sterren,.h12-gfeit .h27-sterren{color:#FBBC05!important;letter-spacing:1px}
.h12-gfeit a:hover b{color:#4285F4}
.h5-spot.links span{left:auto!important;right:46px!important}
/* footer zonder band: ruimte boven */
.h12-ftr{padding-top:72px!important}
/* reviews met klantfoto's */
.h12-rquotes{grid-template-columns:1.15fr 1.15fr .9fr!important;align-items:stretch}
.h12-metfoto{padding:0!important;display:flex;flex-direction:column}
.h12-rfoto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--lijn)}
.h12-rfoto>img{width:100%;height:100%;object-fit:cover;transition:transform .6s,opacity .25s}
.h12-metfoto:hover .h12-rfoto>img{transform:scale(1.04)}
.h12-rduim{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;z-index:2}
.h12-rduim button{width:46px;height:46px;padding:0;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.6)!important;background:#fff!important;cursor:pointer;opacity:.85;transition:opacity .2s,border-color .2s,transform .2s}
.h12-rduim button img{width:100%;height:100%;object-fit:cover;display:block}
.h12-rduim button.aan,.h12-rduim button:hover{opacity:1;border-color:var(--oranje)!important;transform:translateY(-2px)}
.h12-rlabel{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);color:var(--ink);font:600 .72rem "Montserrat",sans-serif;padding:6px 10px;border-radius:99px}
.h12-rtekst{padding:24px 26px 26px}
.h12-metfoto .h27-sterren{display:block}
.h12-rquotes .h27-quote:not(.h12-metfoto){display:flex;flex-direction:column;justify-content:center}
@media (max-width:1100px){.h12-rquotes{grid-template-columns:1fr!important}}
/* zakelijk bestellen */
.h12-zak-kaart{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;background:#fff;border:1px solid var(--lijn);border-radius:28px;padding:48px;margin-top:20px;box-shadow:0 30px 60px -44px rgba(26,34,38,.45)}
.h12-zak h1{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:300;margin:12px 0 16px}
.h12-zak h1 b{font-weight:700}
.h12-zak-mail a{font-weight:600;color:var(--oranje);text-decoration:none}
.h12-zak-lijst{background:var(--paneel);border-radius:20px;padding:28px}
.h12-zak-lijst h3{margin:0 0 4px}
.h12-zak-nog{margin-top:22px;color:var(--grijs)}
.h12-zak-nog a{color:var(--ink);font-weight:600}
@media (max-width:900px){.h12-zak-kaart{grid-template-columns:1fr;padding:26px;gap:28px}}
/* kop: logo nooit samendrukken */
.h27-logo{flex:none!important;display:block}
.h27-logo img{width:auto!important;height:46px!important;max-width:none!important;object-fit:contain}
.h27-nav{min-width:0;flex-wrap:nowrap}
.h27-nav a{white-space:nowrap}
@media (max-width:1320px){.h27-hdr .h27-wrap{gap:20px}.h27-nav{gap:20px!important}.h27-nav a{font-size:.9rem}}
@media (max-width:1100px){.h27-logo img{height:40px!important}}
/* footer strak */
.h12-ftr{padding:64px 0 24px!important}
.h12-ftr .kol{grid-template-columns:1.35fr 1fr 1fr 1fr 1.35fr!important;gap:48px!important;align-items:start}
.h12-ftr h4{font-size:.74rem!important;letter-spacing:.14em!important;margin:0 0 20px!important;padding-bottom:12px;line-height:1}
.h12-ftr ul{gap:12px!important}
.h12-ftr ul li,.h12-ftr ul a{font-size:.92rem;line-height:1.4}
.h12-ftr .logo{padding:0!important;background:none!important;margin:0 0 18px!important;line-height:0}
.h12-ftr .logo img{height:34px!important;filter:brightness(0) invert(1)}
.h12-ftr-merk p{font-size:.9rem;margin:0 0 20px}
.h12-ftr-score{margin:0 0 18px!important;padding:8px 14px!important;border-radius:12px}
.h12-ftr-score b{font-size:1.4rem!important}
.h12-sociaal a{width:38px;height:38px}
.h12-sociaal svg{width:17px;height:17px}
.h12-ftr .h12-dealer::before{display:none}
.h12-contact{gap:14px!important}
.h12-contact li{gap:12px!important;align-items:flex-start}
.h12-ftr .h12-contact i{width:34px!important;height:34px!important;background:rgba(238,113,30,.12)!important;box-shadow:none!important;margin-top:-6px}
.h12-ftr .h12-contact svg{width:16px;height:16px}
.h12-contact small{font-size:.78rem}
.h12-ftr .onder{margin-top:48px!important;padding-top:20px!important;font-size:.78rem!important}
@media (max-width:1100px){.h12-ftr .kol{grid-template-columns:1fr 1fr 1fr!important}.h12-ftr-merk,.h12-ftr .kol>div:last-child{grid-column:1/-1}}
@media (max-width:640px){.h12-ftr .kol{grid-template-columns:1fr 1fr!important;gap:32px 20px!important}}
.h12-ftr .logo{background:#fff!important;padding:9px 14px!important;border-radius:10px!important;line-height:0}
.h12-ftr .logo img{filter:none!important;height:30px!important}
.h27-nav{flex:1 1 auto;justify-content:center}
.h27-hdr .h12-showknop{margin-left:0!important}
.h27-tel{margin-left:0!important;flex:none}
@media (max-width:1480px) and (min-width:1101px){.h27-tel{display:none!important}}
/* fabrieksbanner: vette kop wit */
.h7-banner h2 b,.h7-banner h2{color:#fff!important}
/* wij tegenover gangbaar */
.h13-tabel{background:#fff;border:1px solid var(--lijn);border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -44px rgba(26,34,38,.4)}
.h13-rij{display:grid;grid-template-columns:.8fr 1.35fr 1.1fr;border-top:1px solid var(--lijn);transition:background .2s}
.h13-rij:first-child{border-top:0}
.h13-rij>div{padding:18px 24px;display:flex;align-items:flex-start;gap:12px;font-size:.95rem;line-height:1.5}
.h13-ond{font-weight:700;color:var(--ink)}
.h13-wij{background:#FFF6EF;color:var(--ink);font-weight:500;border-left:3px solid var(--oranje)}
.h13-zij{color:var(--grijs)}
.h13-rij i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-weight:700;font-size:.8rem;margin-top:1px}
.h13-wij i{background:var(--oranje);color:#fff}
.h13-zij i{background:var(--paneel);color:var(--grijs)}
.h13-rij:not(.h13-titel):hover{background:#FCFCFD}
.h13-rij:not(.h13-titel):hover .h13-wij{background:#FFEBDD}
.h13-titel>div{padding-top:22px;padding-bottom:22px;align-items:center;font:700 .78rem "Montserrat",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs)}
.h13-titel .h13-wij img{height:34px;width:auto}
.h13-bezwaren{display:grid;grid-template-columns:.8fr 1.6fr;gap:56px;margin-top:64px;align-items:start}
.h13-bez-kop{position:sticky;top:120px}
.h13-bez-kop h3{font-size:clamp(1.5rem,2.4vw,2rem);margin:10px 0 22px;line-height:1.2}
.h13-bez-lijst{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.h13-bez{background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:0;transition:border-color .2s,box-shadow .2s}
.h13-bez summary{list-style:none;cursor:pointer;padding:18px 52px 18px 20px;font-weight:600;color:var(--ink);position:relative;line-height:1.4}
.h13-bez summary::-webkit-details-marker{display:none}
.h13-bez summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paneel);color:var(--ink);transition:transform .3s,background .3s,color .3s}
.h13-bez:hover{border-color:var(--oranje)}
.h13-bez[open]{border-color:var(--oranje);box-shadow:0 18px 40px -30px rgba(238,113,30,.6)}
.h13-bez[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--oranje);color:#fff}
.h13-bez p{margin:0;padding:0 20px 20px;color:var(--grijs);font-size:.93rem;animation:h12-open .35s ease}
@media (max-width:1100px){.h13-bezwaren{grid-template-columns:1fr;gap:28px}.h13-bez-kop{position:static}}
@media (max-width:760px){
.h13-rij{grid-template-columns:1fr 1fr}
.h13-ond{grid-column:1/-1;padding-bottom:4px!important;background:var(--paneel)}
.h13-rij>div{padding:12px 14px;font-size:.86rem}
.h13-titel .h13-ond{display:none}
.h13-titel .h13-wij img{height:24px}
.h13-bez-lijst{grid-template-columns:1fr}
}
/* kop: nooit overlap. Telefoon staat in de topbalk */
@media (min-width:1101px){.h27-hdr .h27-tel{display:none!important}}
.h27-hdr .h27-wrap{gap:24px!important}
.h27-nav{flex:1 1 auto!important;min-width:0;justify-content:flex-start!important;gap:26px!important;margin-left:16px}
@media (max-width:1360px){.h27-nav{gap:18px!important;margin-left:4px}.h27-nav a{font-size:.88rem!important}.h27-hdr .h27-btn{padding:0 18px!important}}
@media (max-width:1220px){.h27-hdr .h12-showknop{display:none!important}}
.h14-toptel{font-weight:600;margin-right:14px}
/* topbalk: punten die niet passen vallen weg, nooit breder dan het scherm */
.h27-top .h27-wrap{display:flex;align-items:center;gap:20px;min-width:0}
.h27-top .h27-wrap>ul{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;height:1.6em;overflow:hidden;column-gap:22px}
.h27-top .h27-wrap>ul li{white-space:nowrap}
.h9-rechts{flex:none}
/* vertaalde site: compactere kop */
.h14-vertaald .h27-nav{gap:16px!important}
.h14-vertaald .h27-nav a{font-size:.86rem!important}
@media (max-width:1560px){.h14-vertaald .h27-hdr .h12-showknop{display:none!important}}
.h14-vertaald .h6-tekst h1{font-size:clamp(2rem,4vw,3.4rem)}
.h7-banner .h12-video{object-position:50% 50%!important}
/* reviews met foto's als schuifrij */
.h14-rrail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 18px}
.h14-rrail::-webkit-scrollbar{display:none}
.h14-rrail .h27-quote{scroll-snap-align:start;margin:0}
.h14-rrail .h12-rtekst p{font-size:1rem}
.h14-rrail .h27-sterren .leeg{font-style:normal;color:#D5D9DD}
.h14-rnav{display:flex;justify-content:center;gap:10px;margin-top:10px}
.h14-rnav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--lijn)!important;background:#fff!important;color:var(--ink)!important;cursor:pointer;font-size:1.1rem;transition:background .2s,color .2s,border-color .2s}
.h14-rnav button:hover{background:var(--oranje)!important;color:#fff!important;border-color:var(--oranje)!important}
@media (max-width:1100px){.h14-rrail{grid-auto-columns:calc((100% - 20px)/2)}}
@media (max-width:640px){.h14-rrail{grid-auto-columns:85%}}
/* Instagram-feed */
.h14-insta .h5-kop{align-items:center}
.h14-insta #sb_instagram{padding:0!important}
.h14-insta #sb_instagram .sbi_item .sbi_photo_wrap,.h14-insta #sb_instagram .sbi_photo{border-radius:16px;overflow:hidden}
.h14-insta #sb_instagram .sbi_photo img{transition:transform .5s}
.h14-insta #sb_instagram .sbi_item:hover .sbi_photo img{transform:scale(1.05)}
.h14-insta #sb_instagram #sbi_images{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:12px!important;padding:0!important}
.h14-insta #sb_instagram #sbi_images .sbi_item{width:auto!important;padding:0!important}
.h14-insta #sb_instagram .sbi_item:nth-child(n+9){display:none!important}
@media (max-width:760px){.h14-insta #sb_instagram #sbi_images{grid-template-columns:repeat(2,1fr)!important}}
.h14-insta #sb_instagram .sb_instagram_header,.h14-insta #sb_instagram #sbi_load{display:none!important}
.h14-insta .h5-kop .h27-btn{justify-self:end;width:auto}
/* vergelijking compacter */
.h13-tabel{max-width:1040px;margin:0 auto;border-radius:20px}
.h13-rij{grid-template-columns:.7fr 1.3fr 1.1fr}
.h13-rij>div{padding:12px 20px;font-size:.88rem;line-height:1.45;align-items:center}
.h13-titel>div{padding-top:14px;padding-bottom:14px}
.h13-titel .h13-wij img{height:26px}
.h13-rij i{width:20px;height:20px;font-size:.7rem}
.h13-wij{border-left-width:2px}
.h13-meer{display:none}
.h13-tabel.open .h13-meer{display:grid;animation:h12-open .35s ease}
.h13-toon{text-align:center;margin-top:16px}
.h13-toon button{background:none!important;border:0!important;color:var(--ink)!important;font:600 .9rem "Montserrat",sans-serif;cursor:pointer;padding:8px 14px;border-radius:99px;transition:color .2s}
.h13-toon button:hover{color:var(--oranje)!important}
.h13-toon button::after{content:" ↓"}
.h13-toon button.open::after{content:" ↑"}
.h13-bezwaren{margin-top:48px}
@media (max-width:760px){.h13-rij{grid-template-columns:1fr 1fr}}
/* SEO-landingspagina's */
.h15-kop{padding:40px 0 64px}
.h15-kop .h27-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.h15-kop h1{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.05;margin:14px 0 18px}
.h15-kop p.h27-groot{max-width:560px}
.h15-kop .h15-beeld{border-radius:28px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px -40px rgba(26,34,38,.5)}
.h15-kop .h15-beeld img{width:100%;height:100%;object-fit:cover}
.h15-usp{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:22px 0 26px;font-size:.9rem;color:var(--tekst)}
.h15-usp li::before{content:"✓";color:var(--oranje);font-weight:700;margin-right:6px}
.h15-tekst{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:64px;align-items:start}
.h15-tekst article h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:44px 0 14px}
.h15-tekst article h2:first-child{margin-top:0}
.h15-tekst article p,.h15-tekst article li{font-size:1.04rem;line-height:1.75;color:var(--tekst)}
.h15-tekst article ul{padding-left:1.1em}
.h15-tekst article a{color:var(--oranje-d);font-weight:600}
.h15-tekst article figure{margin:28px 0;border-radius:20px;overflow:hidden}
.h15-tekst article figure img{width:100%;display:block}
.h15-zij{position:sticky;top:110px;display:grid;gap:16px}
.h15-zij .h15-box{background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:24px}
.h15-zij .h15-box.o{background:var(--oranje);border-color:var(--oranje);color:#fff}
.h15-zij .h15-box.o h3,.h15-zij .h15-box.o p{color:#fff}
.h15-zij .h15-box.o .h27-btn{background:#16191B;width:100%;justify-content:center}
.h15-zij h3{margin:0 0 8px;font-size:1.15rem}
.h15-zij p{margin:0 0 14px;font-size:.92rem}
.h15-zij ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.9rem}
.h15-zij ul li::before{content:"✓";color:var(--oranje);font-weight:700;margin-right:8px}
.h15-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.h15-rel a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;background:#fff;border:1px solid var(--lijn);border-radius:16px;text-decoration:none;color:var(--ink);font-weight:600;transition:border-color .2s,transform .2s}
.h15-rel a:hover{border-color:var(--oranje);transform:translateY(-3px)}
.h15-rel a i{color:var(--oranje);font-style:normal}
@media (max-width:1100px){.h15-kop .h27-wrap,.h15-tekst{grid-template-columns:1fr;gap:32px}.h15-zij{position:static}.h15-rel{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.h15-rel{grid-template-columns:1fr}}
.h15-formkop{font:700 .78rem "Montserrat",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--oranje);margin:6px 0 12px}
.h15-stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;padding:0;margin:0;counter-reset:s}
.h15-stappen li{counter-increment:s;background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:26px;position:relative}
.h15-stappen li::before{content:counter(s);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--oranje);color:#fff;font:700 1rem/1 "Outfit",sans-serif;margin-bottom:16px}
.h15-stappen b{display:block;color:var(--ink);font-size:1.1rem;margin-bottom:6px}
.h15-stappen span{color:var(--grijs);font-size:.95rem}
.h15-beloning{display:inline-flex;align-items:baseline;gap:10px;background:#FFF1E6;color:var(--ink);border-radius:16px;padding:14px 20px;margin:6px 0 22px;font-weight:600}
.h15-beloning b{font:700 2rem/1 "Outfit",sans-serif;color:var(--oranje)}
@media (max-width:900px){.h15-stappen{grid-template-columns:1fr}}
/* vacatures */
.h16-vac{display:grid;gap:18px}
.h16-vac details{background:#fff;border:1px solid var(--lijn);border-radius:24px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.h16-vac details[open]{border-color:var(--oranje);box-shadow:0 26px 50px -36px rgba(238,113,30,.6)}
.h16-vac summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:200px 1fr auto;gap:24px;align-items:center;padding:16px 24px 16px 16px}
.h16-vac summary::-webkit-details-marker{display:none}
.h16-vac summary img{width:200px;height:130px;object-fit:cover;border-radius:16px}
.h16-vac summary b{display:block;font:600 1.35rem "Outfit",sans-serif;color:var(--ink);margin-bottom:6px}
.h16-vac summary span{color:var(--grijs);font-size:.95rem}
.h16-vac summary .h16-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.h16-vac summary .h16-tags em{font-style:normal;font-size:.78rem;font-weight:600;background:var(--paneel);color:var(--ink);padding:4px 10px;border-radius:99px}
.h16-vac summary::after{content:"+";display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--paneel);font-size:1.3rem;transition:transform .3s,background .3s,color .3s}
.h16-vac details[open] summary::after{transform:rotate(45deg);background:var(--oranje);color:#fff}
.h16-inhoud{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:8px 28px 28px}
.h16-inhoud h3{font-size:1.05rem;margin:0 0 10px}
.h16-inhoud ul{margin:0;padding-left:1.1em;color:var(--tekst);font-size:.95rem;line-height:1.7}
.h16-sol{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:#FFF6EF;border-radius:18px;padding:18px 22px}
.h16-sol p{margin:0;color:var(--ink)}
@media (max-width:900px){.h16-vac summary{grid-template-columns:1fr auto}.h16-vac summary img{grid-column:1/-1;width:100%;height:180px}.h16-inhoud{grid-template-columns:1fr;padding:4px 20px 22px}}
.h16-populair{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem}
.h16-populair span{color:#7F888E;font-weight:600}
.h12-ftr .h16-populair a{color:#AEB5BA!important;font-weight:500}
.h12-ftr .h16-populair a:hover{color:var(--oranje)!important}
.h12-ftr .h16-populair+.onder{margin-top:24px!important}
/* overzichtspagina's */
.h17-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.h17-filter button{border:1px solid var(--lijn)!important;background:#fff!important;color:var(--ink)!important;border-radius:99px;padding:9px 16px;font:600 .85rem "Montserrat",sans-serif;cursor:pointer}
.h17-filter button.aan,.h17-filter button:hover{background:var(--oranje)!important;border-color:var(--oranje)!important;color:#fff!important}
.h17-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.h17-kaart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--lijn);border-radius:20px;overflow:hidden;text-decoration:none;color:var(--ink);position:relative;transition:transform .3s,box-shadow .3s,border-color .3s}
.h17-kaart:hover{transform:translateY(-5px);border-color:var(--oranje);box-shadow:0 26px 50px -32px rgba(26,34,38,.45)}
.h17-foto{aspect-ratio:16/10;overflow:hidden;background:var(--lijn)}
.h17-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.h17-kaart:hover .h17-foto img{transform:scale(1.05)}
.h17-tekst{padding:18px 54px 20px 20px;display:grid;gap:6px}
.h17-tekst em{font-style:normal;font:700 .7rem "Montserrat",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--oranje)}
.h17-tekst b{font:600 1.1rem/1.3 "Outfit",sans-serif}
.h17-tekst small{color:var(--grijs);font-size:.86rem;line-height:1.5}
.h17-kaart i{position:absolute;right:18px;bottom:20px;font-style:normal;color:var(--oranje);transition:transform .2s}
.h17-kaart:hover i{transform:translateX(4px)}
.h17-raster.stad{grid-template-columns:repeat(4,1fr)}
.h17-raster.stad .h17-tekst{padding:18px 44px 18px 20px}
.h17-raster.stad .h17-kaart i{bottom:auto;top:50%;transform:translateY(-50%)}
@media (max-width:1100px){.h17-raster,.h17-raster.stad{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.h17-raster{grid-template-columns:1fr}}
/* overzichtskop: één kolom */
.h17-kop .h27-wrap{grid-template-columns:1fr!important;max-width:1280px}
.h17-kop .h27-wrap>div{max-width:760px}
/* uitklapmenu veranda's */
.h17-sub{position:relative;display:flex;align-items:center}
.h17-sub-menu{position:absolute;top:100%;left:-18px;margin-top:14px;width:520px;display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:12px;box-shadow:0 30px 60px -30px rgba(26,34,38,.4);opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s;z-index:60}
.h17-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px}
.h17-sub:hover .h17-sub-menu,.h17-sub:focus-within .h17-sub-menu{opacity:1;visibility:visible;transform:none}
.h17-sub-menu a{display:block;padding:10px 12px;border-radius:12px;text-decoration:none!important;color:var(--ink)!important}
.h17-sub-menu a::after{display:none!important}
.h17-sub-menu a:hover{background:#FFF6EF}
.h17-sub-menu b{display:block;font-size:.92rem}
.h17-sub-menu small{display:block;font-size:.78rem;color:var(--grijs);font-weight:400}
.h17-sub-menu a.alle{grid-column:1/-1;text-align:center;font-weight:600;color:var(--oranje)!important;background:var(--paneel)}
.h17-kop{padding-bottom:8px!important}
.h17-kop+.h27-sec{padding-top:24px!important}