/* Luxklus Schilders: eigen branche-onderdelen (kleurkiezer op de gevel en de opbouw van een verfsysteem) */
.lux-kleur .kk-kaart{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center;
  background:var(--wit);border-radius:var(--r-kaart);box-shadow:0 24px 50px -24px rgba(var(--ink-rgb),.35);padding:clamp(16px,2.4vw,28px);max-width:1120px;margin-inline:auto}
.kk-veld{position:relative;border-radius:14px;overflow:hidden;background:#eef1f6}
.kk-huis{display:block;width:100%;height:auto}
.kk-huis{--kozijn:#383e42;--deur:#27352a;--boei:#f1ece1;--gevel:#a9573f}
.kk-kozijn{fill:var(--kozijn);transition:fill .6s var(--ease)}
.kk-kozijn-lijn{stroke:var(--kozijn);transition:stroke .6s var(--ease)}
.kk-deur{fill:var(--deur);transition:fill .6s var(--ease)}
.kk-boei{stroke:var(--boei);transition:stroke .6s var(--ease)}
.kk-gevel{fill:var(--gevel);transition:fill .6s var(--ease)}
.kk-huis .kk-flits{animation:none}
.kk-label{position:absolute;left:14px;bottom:14px;background:rgba(var(--ink-rgb),.88);color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em;
  padding:7px 14px;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.8)}
.kk-info{text-align:center;min-width:0}
.kk-stap{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);margin:4px 0 10px}
.kk-delen{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:18px}
.kk-deel{font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:var(--tint);border:1px solid rgba(var(--ink-rgb),.14);
  border-radius:999px;padding:9px 16px;cursor:pointer;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.kk-deel:hover{border-color:#ef7f1a}
.kk-deel.actief{background:var(--ink);color:#fff;border-color:var(--ink)}
.kk-stalen{display:grid;grid-template-columns:repeat(9,32px);justify-content:center;gap:9px;margin-bottom:16px}
.kk-staal{width:32px;height:32px;border-radius:50%;background:var(--k);border:3px solid #fff;box-shadow:0 0 0 1px rgba(var(--ink-rgb),.25);cursor:pointer;transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.kk-staal:hover{transform:translateY(-2px)}
.kk-staal.actief{box-shadow:0 0 0 2px var(--accent)}
.kk-overzicht{list-style:none;padding:0;margin:4px auto 20px;display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:440px}
.kk-overzicht li{background:var(--tint);border-radius:12px;padding:9px 12px;display:flex;flex-direction:column;gap:2px;align-items:center}
.kk-overzicht b{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--petrol)}
.kk-overzicht span{font-size:13.5px;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:6px}
.kk-overzicht i{width:12px;height:12px;border-radius:50%;background:var(--k);box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.kk-noot{margin-top:12px;font-size:13px;color:var(--tekst)}
@media(max-width:900px){.lux-kleur .kk-kaart{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.kk-stalen{grid-template-columns:repeat(5,32px)}.kk-overzicht{grid-template-columns:1fr}}

.lux-opbouw .opbouw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;max-width:1060px;margin-inline:auto}
.opbouw-doorsnede{border-radius:var(--r-kaart);overflow:hidden;box-shadow:0 24px 50px -24px rgba(0,0,0,.45);background:#b88a5a}
.opbouw-doorsnede .laag{position:relative;opacity:0;transform:translateY(24px);
  transition:opacity .85s var(--ease),transform .85s var(--ease),filter .45s var(--ease)}
.opbouw.is-open .laag{opacity:1;transform:none}
.opbouw.is-open .laag[data-laag="4"]{transition-delay:0ms}
.opbouw.is-open .laag[data-laag="3"]{transition-delay:220ms}
.opbouw.is-open .laag[data-laag="2"]{transition-delay:440ms}
.opbouw.is-open .laag[data-laag="1"]{transition-delay:660ms}
.opbouw.is-open .laag[data-laag="0"]{transition-delay:880ms}
.laag-aflak{height:46px;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 45%),#2b4172}
.laag-voorlak{height:34px;background:#8e9ab5}
.laag-grond{height:34px;background:#e7e2d6}
.laag-plamuur{height:26px;background:radial-gradient(circle,rgba(0,0,0,.07) 1px,transparent 1.5px) 0 0/6px 6px,#d4ccbd}
.laag-hout{height:150px;background:repeating-linear-gradient(176deg,rgba(0,0,0,.08) 0 2px,transparent 2px 13px),repeating-linear-gradient(183deg,rgba(255,255,255,.07) 0 3px,transparent 3px 22px),#b88a5a}
.opbouw-doorsnede.focus .laag{filter:saturate(.45) brightness(.8)}
.opbouw-doorsnede.focus .laag.aan{filter:none}
.opbouw-lijst{list-style:none;padding:0;margin:0;counter-reset:laag;display:grid;gap:10px}
.opbouw-lijst li{counter-increment:laag;background:var(--wit);border-radius:14px;padding:14px 18px;text-align:center;cursor:default;
  border:1px solid transparent;transition:border-color .45s var(--ease),box-shadow .45s var(--ease)}
.opbouw-lijst li::before{content:counter(laag);display:grid;place-items:center;width:28px;height:28px;margin:0 auto 6px;border-radius:50%;
  background:var(--accent);color:var(--op-accent);font-weight:700;font-size:14px}
.opbouw-lijst li b{display:block;color:var(--ink)}
.opbouw-lijst li span{display:block;color:var(--tekst);font-size:14.5px;margin-top:2px}
.opbouw-lijst li.aan{border-color:#ef7f1a;box-shadow:0 10px 26px -12px rgba(239,127,26,.5)}
@media(max-width:900px){.lux-opbouw .opbouw{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion: reduce){.opbouw-doorsnede .laag{opacity:1;transform:none;transition:none}.kk-kozijn,.kk-deur,.kk-boei,.kk-gevel,.kk-kozijn-lijn{transition:none}}
.no-js .opbouw-doorsnede .laag{opacity:1;transform:none}
/* dienstgrid homepage: vier kaarten op een rij (2x2 op tablet) */
@media(min-width:641px) and (max-width:1100px){#aanbod .kaart-grid.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.product-hero .binnen>div{min-width:0}.product-hero h1{font-size:clamp(28px,8.6vw,44px);overflow-wrap:break-word}}