/* Verandahuis De Linde — voorbeeldontwerp van Gevelwebstudio
   Huisstijl: antraciet aluminium (RAL 7016), warm kalkwit, lindegroen en zonlicht-amber. */
:root {
  --kalk: #F5F1E8;
  --wit: #FFFDF8;
  --zand: #EAE2D3;
  --lijn: #DCD3C2;
  --antraciet: #23272B;
  --ral: #383E42;
  --leisteen: #565D63;
  --linde: #4E6B2F;
  --linde-donker: #3B5323;
  --linde-licht: #DFE7CB;
  --linde-fel: #B9CF7A;
  --zon: #E8A33D;
  --zon-licht: #F7DDAE;
  --avond: #1B2433;
  --avond-licht: #26324A;
  --fout: #A3361E;

  --f-kop: "Fraunces", Georgia, "Times New Roman", serif;
  --f-tekst: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --breed: 1200px;
  --rond: 14px;
  --schaduw: 0 1px 2px rgba(35,39,43,.06), 0 12px 32px -12px rgba(35,39,43,.22);
  --demobalk: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--kalk); color: var(--antraciet); font: 17px/1.6 var(--f-tekst); padding-bottom: var(--demobalk); overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg { max-width: 100%; }
a { color: var(--linde); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--zon); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-kop); font-weight: 650; line-height: 1.08; margin: 0; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: 1.3rem; }
p, ul, ol { margin: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--wit); padding: 8px 12px; z-index: 100; }
.sr-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: var(--breed); margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.label { font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--linde); }
.klein { font-size: .88rem; color: var(--leisteen); }
.sectie { padding-block: clamp(64px, 9vw, 120px); }
.sectie-kop { display: grid; gap: 14px; max-width: 720px; margin-bottom: clamp(28px, 5vw, 52px); }
.sectie-kop > p:not(.label) { color: var(--leisteen); font-size: 1.1rem; }
.donker { background: var(--avond); color: var(--kalk); }
.donker .label { color: var(--linde-fel); }
.donker .sectie-kop > p:not(.label), .donker .klein { color: #C3CAD3; }
.donker a { color: var(--zon-licht); }

/* Demobalk */
.demobalk { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; min-height: var(--demobalk); display: flex; align-items: center; justify-content: center; gap: 6px 16px; flex-wrap: wrap; padding: 6px 16px; background: #111417; color: #E9E6DE; font-size: .82rem; text-align: center; }
.demobalk a { color: var(--zon-licht); font-weight: 700; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; background: var(--zon); color: var(--antraciet); border: 2px solid var(--zon); font: 800 1rem/1.1 var(--f-tekst); text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.knop:hover { background: #F0B455; border-color: #F0B455; transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(232,163,61,.8); }
.knop:active { transform: translateY(0); }
.knop-licht { background: rgba(255,253,248,.92); border-color: rgba(255,253,248,.92); }
.knop-licht:hover { background: var(--wit); border-color: var(--wit); box-shadow: none; }
.knop-rand { background: transparent; border-color: var(--antraciet); }
.knop-rand:hover { background: var(--antraciet); color: var(--wit); border-color: var(--antraciet); box-shadow: none; }
.knop-klein { min-height: 42px; padding: 9px 18px; font-size: .95rem; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 2px solid var(--lijn); background: var(--wit); color: var(--antraciet); font: 700 .95rem/1 var(--f-tekst); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.chip:hover { border-color: var(--antraciet); }
.chip[aria-pressed="true"] { background: var(--antraciet); color: var(--wit); border-color: var(--antraciet); }
.donker .chip { background: transparent; color: var(--kalk); border-color: #45526A; }
.donker .chip:hover, .donker .chip.actief { border-color: var(--zon); }
.tekstlink { font-weight: 800; color: var(--linde); text-decoration: none; display: inline-flex; gap: 6px; }
.tekstlink span { transition: transform .2s; }
.tekstlink:hover span { transform: translateX(4px); }

/* Kopbalk */
.kop { position: sticky; top: 0; z-index: 80; background: rgba(245,241,232,.9); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgba(35,39,43,.08); }
.kop-binnen { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--antraciet); }
.logo svg { width: 36px; height: 36px; flex: none; }
.logo b { display: block; font-family: var(--f-kop); font-size: 1.15rem; font-weight: 650; line-height: 1.1; }
.logo small { display: block; font-size: .75rem; color: var(--leisteen); letter-spacing: .02em; }
.menu-knop { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border: 2px solid var(--antraciet); border-radius: 999px; background: transparent; font: 800 .95rem/1 var(--f-tekst); color: var(--antraciet); cursor: pointer; }
.menu-streep, .menu-streep::before { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
.menu-streep { box-shadow: 0 -5px 0 currentColor; }
.menu-streep::before { content: ""; top: 5px; position: absolute; }
.menu { display: none; }
.menu.open { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--kalk); padding: 12px 16px 20px; gap: 4px; border-bottom: 1px solid var(--lijn); box-shadow: var(--schaduw); }
.menu a { padding: 12px 8px; color: var(--antraciet); text-decoration: none; font-weight: 700; border-radius: 8px; }
.menu a:not(.knop):hover { background: var(--zand); }
.menu .knop { margin-top: 8px; }
@media (min-width: 1000px) {
  .menu-knop { display: none; }
  .menu, .menu.open { display: flex; position: static; align-items: center; gap: 2px; padding: 0; background: none; border: 0; box-shadow: none; }
  .menu a { padding: 10px 11px; font-size: .95rem; }
  .menu .knop { margin: 0 0 0 10px; }
}

/* Hero met video */
.hero { position: relative; isolation: isolate; min-height: min(calc(100svh - 68px), 860px); display: grid; align-items: end; padding-block: 72px 56px; color: var(--wit);
  background: radial-gradient(120% 90% at 80% 20%, #4A5A72 0%, #26324A 45%, #141A26 100%); overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video.weg:not([poster]) { display: none; }
.hero-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,18,24,.35) 0%, rgba(14,18,24,.25) 35%, rgba(14,18,24,.82) 100%), linear-gradient(90deg, rgba(14,18,24,.55), rgba(14,18,24,0) 70%); }
.hero-inhoud { position: relative; display: grid; gap: 18px; }
.hero h1 { max-width: 12ch; color: var(--wit); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero-intro { max-width: 44ch; font-size: 1.15rem; color: #E9E6DE; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .85rem; color: var(--linde-fel); }
.kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.hero-verder { position: absolute; right: clamp(16px, 4vw, 40px); bottom: 24px; color: var(--wit); font-weight: 700; font-size: .9rem; text-decoration: none; display: none; }
.hero-verder span { display: inline-block; animation: zakken 1.8s ease-in-out infinite; }
@keyframes zakken { 50% { transform: translateY(5px); } }
@media (min-width: 900px) { .hero { padding-block: 96px 88px; } .hero-verder { display: block; } }

/* Bouw-animatie */
.bouw { position: relative; background: #DCEBEC; overflow: hidden; display: flex; flex-direction: column; }
.bouw-inhoud { position: relative; z-index: 2; padding-top: 40px; display: grid; gap: 14px; }
.bouw h2 { max-width: 14ch; }
.bouw-intro { max-width: 40ch; font-size: 1.1rem; color: #33393E; }
.bouw-scene { position: relative; order: 2; margin-top: 20px; }
.bouw-scene svg { display: block; width: 100%; height: auto; aspect-ratio: 780 / 560; }
.bouw-schemer { display: none; }
.bouw-stappen { order: 3; position: relative; z-index: 2; padding-block: 14px 18px; background: var(--antraciet); color: var(--kalk); max-width: none; }
.bouwstappen { list-style: none; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.bouwstappen li { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; color: #9AA3AB; transition: color .3s; }
.bouwstappen b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #4A5560; font-size: .8rem; transition: background .3s, border-color .3s, color .3s; }
.bouwstappen li.klaar b { border-color: var(--linde-fel); color: var(--linde-fel); }
.bouwstappen li.actief { color: var(--wit); }
.bouwstappen li.actief b { background: var(--zon); border-color: var(--zon); color: var(--antraciet); }
.bouwstappen li:not(.actief) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bouwbalk { height: 3px; background: #3A434C; border-radius: 3px; margin-top: 12px; overflow: hidden; }
.bouwbalk i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--linde-fel), var(--zon)); transform-origin: left; }
.scrollhint { display: none; }
.wolk { animation: drijf 60s linear infinite alternate; }
.w2 { animation-duration: 80s; }
@keyframes drijf { to { transform: translateX(120px); } }
.kruin { transform-origin: 300px 560px; animation: wiegen 7s ease-in-out infinite alternate; }
@keyframes wiegen { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }

@media (min-width: 900px) {
  .bouw { height: calc(100svh - 68px); min-height: 620px; max-height: 1000px; display: block; }
  .bouw-scene { position: absolute; inset: 0; margin: 0; }
  .bouw-scene svg { height: 100%; aspect-ratio: auto; }
  .bouw-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(245,241,232,.94) 0%, rgba(245,241,232,.82) 34%, rgba(245,241,232,0) 58%); pointer-events: none; }
  .bouw-schemer { display: block; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgba(16,22,38,.9) 0%, rgba(16,22,38,.72) 34%, rgba(16,22,38,0) 58%); }
  .bouw-inhoud { padding-top: clamp(40px, 9vh, 110px); }
  .bouw h2 { max-width: 12ch; }
  .bouw-stappen { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(23,27,31,.85), rgba(23,27,31,0)); padding-block: 40px 22px; max-width: none; padding-inline: max(40px, calc((100% - var(--breed)) / 2 + 40px)); }
  .bouwstappen { gap: 10px 22px; }
  .bouwstappen li:not(.actief) span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .bouwbalk { max-width: 720px; }
  .scrollhint { display: block; margin-top: 10px; font-size: .82rem; color: #C3CAD3; }
}

/* Cijfers */
.cijfers { background: var(--antraciet); color: var(--kalk); padding-block: 36px 24px; }
.cijfers-rij { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
.cijfers-rij p { display: grid; gap: 2px; }
.cijfers strong { font-family: var(--f-kop); font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1; color: var(--zon); font-weight: 650; font-variant-numeric: tabular-nums; }
.cijfers span { font-size: .92rem; color: #C3CAD3; }
.klein-noot { font-size: .75rem; color: #8F98A1; margin-top: 18px; }
@media (min-width: 760px) { .cijfers-rij { grid-template-columns: repeat(4, 1fr); } }

/* Aanbod */
.aanbod-grid { display: grid; gap: 22px; }
@media (min-width: 720px) { .aanbod-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .aanbod-grid { grid-template-columns: repeat(4, 1fr); } }
.product { background: var(--wit); border-radius: var(--rond); overflow: hidden; box-shadow: var(--schaduw); display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.product:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(35,39,43,.06), 0 24px 44px -16px rgba(35,39,43,.3); }
.product-beeld { position: relative; aspect-ratio: 4 / 3; background: var(--zand); overflow: hidden; }
.product-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.product:hover .product-beeld img { transform: scale(1.04); }
.product-beeld .ill { position: absolute; right: 12px; bottom: 12px; width: 44%; height: auto; display: block; border-radius: 10px; border: 3px solid var(--wit); box-shadow: 0 8px 20px -8px rgba(0,0,0,.45); }
.product-beeld.geen-foto img { display: none; }
.product-beeld.geen-foto .ill { inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.product-tekst { padding: 20px 22px 24px; display: grid; gap: 12px; flex: 1; align-content: start; }
.product-tekst > p:first-of-type { color: var(--leisteen); }
.vinklijst { list-style: none; padding: 0; display: grid; gap: 6px; font-size: .95rem; }
.vinklijst li { position: relative; padding-left: 26px; }
.vinklijst li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2.5px solid var(--linde); border-bottom: 2.5px solid var(--linde); transform: rotate(-45deg); }
.vinklijst.licht li::before { border-color: var(--linde-fel); }
.vinklijst.groot { font-size: 1.05rem; gap: 10px; margin-block: 18px; }
.prijs { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--lijn); font-size: .95rem; }
.prijs b { font-family: var(--f-kop); font-size: 1.8rem; font-weight: 650; color: var(--antraciet); }
.prijs small { display: block; font-size: .78rem; color: var(--leisteen); }
/* hover-animaties in de illustraties */
.ill .wand { transition: transform .9s cubic-bezier(.6,0,.2,1); }
.ill-tuinkamer .wand-b { --dx: -62px; } .ill-tuinkamer .wand-c { --dx: -124px; } .ill-tuinkamer .wand-d { --dx: -188px; }
.ill-schuif .wand-b { --dx: -64px; } .ill-schuif .wand-c { --dx: -128px; } .ill-schuif .wand-d { --dx: -196px; }
.product:hover .ill .wand, .product:focus-within .ill .wand { transform: translateX(var(--dx, 0)); }
.product.demo .ill .wand { animation: schuifDemo 2.8s .2s cubic-bezier(.6,0,.2,1); }
@keyframes schuifDemo { 35%, 65% { transform: translateX(var(--dx, 0)); } }
.lamellen-mini rect { transform-box: fill-box; transform-origin: center; transform: rotate(70deg); transition: transform .8s cubic-bezier(.6,0,.2,1); }
.product:hover .lamellen-mini rect, .product:focus-within .lamellen-mini rect { transform: rotate(0deg); }
.product.demo .lamellen-mini rect { animation: lamelDemo 2.8s .2s cubic-bezier(.6,0,.2,1); }
@keyframes lamelDemo { 35%, 65% { transform: rotate(0deg); } }
#regen path { stroke-dasharray: 10 30; animation: regen .7s linear infinite; }
.druppels { stroke-dasharray: 6 40; animation: regen 1.2s linear infinite; }
@keyframes regen { from { stroke-dashoffset: 46; } to { stroke-dashoffset: 0; } }

/* Lamellen */
.lamel-sectie { overflow: hidden; }
.lamel-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 980px) { .lamel-grid { grid-template-columns: 5fr 7fr; gap: 56px; } }
.lamel-beeld { background: linear-gradient(180deg, #2C3B57 0%, #3A4E6E 60%, #4F5E54 100%); border-radius: var(--rond); overflow: hidden; }
.lamel-beeld svg { display: block; width: 100%; height: auto; }
.lamel-bediening { display: grid; gap: 12px; margin-top: 10px; }
.lamel-bediening label { font-weight: 700; }
.lamel-bediening output { color: var(--zon); font-variant-numeric: tabular-nums; }
.knoppen-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.lamel-status { color: #C3CAD3; min-height: 3.2em; }
input[type="range"] { width: 100%; accent-color: var(--zon); height: 32px; cursor: pointer; }

/* Rekenhulp */
.rekenhulp { display: grid; gap: 22px; background: var(--wit); border-radius: calc(var(--rond) + 6px); padding: clamp(18px, 3vw, 34px); box-shadow: var(--schaduw); }
@media (min-width: 980px) { .rekenhulp { grid-template-columns: 1fr 1fr 1fr; gap: 34px; } .rk-types { grid-column: 1 / -1; } }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 800; margin-bottom: 12px; padding: 0; font-size: 1.02rem; }
.rk-types, .wz-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rk-types legend { grid-column: 1 / -1; }
@media (min-width: 760px) { .rk-types { grid-template-columns: repeat(4, 1fr); } }
.keuzekaart { position: relative; cursor: pointer; }
.keuzekaart input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.keuzekaart span { display: grid; gap: 4px; height: 100%; padding: 14px 16px; border: 2px solid var(--lijn); border-radius: 12px; font-weight: 800; background: var(--kalk); transition: border-color .2s, background .2s, transform .2s; }
.keuzekaart small { font-weight: 500; color: var(--leisteen); font-size: .85rem; }
.keuzekaart:hover span { border-color: var(--leisteen); }
.keuzekaart input:checked + span { border-color: var(--linde); background: var(--linde-licht); box-shadow: inset 0 0 0 1px var(--linde); }
.keuzekaart input:focus-visible + span { outline: 3px solid var(--zon); outline-offset: 2px; }
.rk-maten { display: grid; gap: 20px; }
@media (min-width: 980px) { .rk-maten { grid-column: span 2; grid-template-columns: 1fr 1fr; align-content: start; } .rk-opties { grid-column: 1 / -1; } }
.schuif label { display: flex; justify-content: space-between; font-weight: 800; }
.schuif output { font-variant-numeric: tabular-nums; color: var(--linde); }
.schuif.uit { opacity: .45; }
.schaal { display: flex; justify-content: space-between; font-size: .8rem; color: var(--leisteen); }
.rk-opties { display: grid; gap: 8px; }
.rk-opties label, .wz-opties label, .akkoord { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; cursor: pointer; }
.rk-opties label[hidden] { display: none; }
.rk-opties em { font-style: normal; color: var(--leisteen); white-space: nowrap; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--linde); width: 20px; height: 20px; flex: none; margin: 2px 0 0; }
.rk-uitkomst { display: grid; gap: 10px; align-content: start; background: var(--kalk); border-radius: var(--rond); padding: 20px; }
@media (min-width: 980px) { .rk-uitkomst { grid-column: 3; grid-row: 2; } }
.rk-plan { width: 100%; height: auto; display: block; }
#rk-plan-vlak { transition: width .4s cubic-bezier(.2,.7,.2,1), height .4s cubic-bezier(.2,.7,.2,1), x .4s cubic-bezier(.2,.7,.2,1); }
.rk-type-naam { font-weight: 700; }
.rk-prijs { display: grid; }
.rk-prijs span { font-size: .85rem; color: var(--leisteen); font-weight: 700; }
.rk-prijs strong { font-family: var(--f-kop); font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.05; font-weight: 650; font-variant-numeric: tabular-nums; }
.rk-uitkomst .knop { margin-top: 6px; }

/* Projecten */
.projecten-sectie { background: var(--zand); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
#proj-aantal { margin-bottom: 20px; }
.projecten { list-style: none; padding: 0; display: grid; gap: 20px; margin-bottom: 20px; }
@media (min-width: 640px) { .projecten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .projecten { grid-template-columns: repeat(3, 1fr); } }
.project { background: var(--wit); border-radius: var(--rond); overflow: hidden; box-shadow: var(--schaduw); transition: opacity .35s, transform .35s; }
.project[hidden] { display: none; }
.project-beeld { position: relative; aspect-ratio: 4 / 3; background: var(--zand); overflow: hidden; }
.project-beeld svg, .project-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.project:hover .project-beeld svg, .project:hover .project-beeld img { transform: scale(1.04); }
.project-beeld.geen-foto img { display: none; }
.project > div { padding: 16px 20px 20px; display: grid; gap: 6px; position: relative; background: var(--wit); }
.project h3 { font-size: 1.15rem; }
.project > div > p:last-child { color: var(--leisteen); font-size: .92rem; }
.project-type { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--linde); }
.project.in { animation: kaartIn .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes kaartIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* Werkwijze */
.stappen { list-style: none; padding: 0; display: grid; gap: 18px; position: relative; counter-reset: stap; }
@media (min-width: 860px) { .stappen { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.stappen::before { content: ""; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 3px; background: var(--lijn); }
.stappen::after { content: ""; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 3px; background: linear-gradient(var(--linde), var(--zon)); transform-origin: top; transform: scaleY(var(--voortgang, 1)); }
@media (min-width: 860px) {
  .stappen::before, .stappen::after { left: 40px; right: 40px; top: 39px; bottom: auto; width: auto; height: 3px; }
  .stappen::after { background: linear-gradient(90deg, var(--linde), var(--zon)); transform-origin: left; transform: scaleX(var(--voortgang, 1)); }
}
.stap { position: relative; z-index: 1; display: grid; gap: 8px; padding-left: 100px; }
@media (min-width: 860px) { .stap { padding-left: 0; } }
.stap-icoon { position: absolute; left: 0; top: 0; width: 80px; height: 80px; border-radius: 50%; background: var(--wit); border: 3px solid var(--antraciet); display: grid; place-items: center; color: var(--antraciet); box-shadow: 0 0 0 8px var(--kalk); }
@media (min-width: 860px) { .stap-icoon { position: relative; margin-bottom: 10px; } }
.stap-icoon svg { width: 42px; height: 42px; }
.stap-tijd { font-weight: 800; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--linde); }
.stap > p:last-child { color: var(--leisteen); }

/* Vergunning */
#vergunning { background: var(--wit); }
.verg-grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 940px) { .verg-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.verg-grid h2 { margin-top: 12px; }
.lead { font-size: 1.12rem; margin-top: 14px; color: var(--leisteen); }
.noot { background: var(--zon-licht); border-radius: 12px; padding: 14px 18px; font-size: .92rem; }
.verg-beeld { margin: 0; }
.verg-beeld svg { display: block; width: 100%; height: auto; border-radius: var(--rond); border: 1px solid var(--lijn); }
.verg-beeld figcaption { font-size: .82rem; color: var(--leisteen); margin-top: 8px; }

/* Reviews-plek */
.review-plek { border: 3px dashed var(--zon); border-radius: calc(var(--rond) + 6px); padding: clamp(24px, 5vw, 56px); display: grid; gap: 14px; justify-items: center; text-align: center; background: repeating-linear-gradient(-45deg, rgba(232,163,61,.06) 0 14px, transparent 14px 28px); }
.review-plek p:not(.label) { max-width: 62ch; color: var(--leisteen); }
.sterren { display: flex; gap: 6px; }
.sterren svg { width: 30px; height: 30px; fill: none; stroke: var(--zon); stroke-width: 1.8; stroke-linejoin: round; }

/* Formulieren algemeen */
.veld { display: grid; gap: 6px; margin-bottom: 14px; }
.veld label, .veld-label { font-weight: 800; font-size: .95rem; }
.optioneel { font-weight: 500; color: var(--leisteen); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 2px solid var(--lijn); border-radius: 10px; background: var(--wit); font: 500 1rem/1.4 var(--f-tekst); color: var(--antraciet); transition: border-color .2s; }
input:focus, select:focus, textarea:focus { border-color: var(--linde); }
[aria-invalid="true"] { border-color: var(--fout) !important; }
.velden-2 { display: grid; gap: 0 16px; }
@media (min-width: 620px) { .velden-2 { grid-template-columns: 1fr 1fr; } }
.fout { color: var(--fout); font-weight: 700; font-size: .95rem; }
.fout:empty { display: none; }
.donker .fout { color: #FFB59E; }

/* Offerte-wizard */
.offerte-sectie { background: linear-gradient(180deg, var(--kalk), var(--zand)); }
.off-grid { display: grid; gap: 20px; }
@media (min-width: 980px) { .off-grid { grid-template-columns: 4fr 7fr; gap: 56px; align-items: start; } }
.wizard { background: var(--wit); border-radius: calc(var(--rond) + 6px); padding: clamp(18px, 3.4vw, 36px); box-shadow: var(--schaduw); }
.wz-voortgang { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 26px; }
.wz-voortgang li { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 700; color: var(--leisteen); padding-top: 10px; border-top: 4px solid var(--lijn); transition: border-color .3s, color .3s; }
.wz-voortgang b { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--lijn); color: var(--antraciet); font-size: .78rem; }
.wz-voortgang li.actief, .wz-voortgang li.klaar { color: var(--antraciet); border-color: var(--linde); }
.wz-voortgang li.actief b, .wz-voortgang li.klaar b { background: var(--linde); color: var(--wit); }
.wz-stap legend { font-family: var(--f-kop); font-size: 1.5rem; font-weight: 650; margin-bottom: 18px; }
.wz-stap legend:focus { outline: none; }
.wz-types { margin-bottom: 8px; }
.wz-types .keuzekaart span { min-height: 64px; align-content: center; }
.wz-knoppen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 18px; }
.wz-knoppen .knop:only-child { margin-left: auto; }
.kleuren { display: flex; flex-wrap: wrap; gap: 8px; }
.kleur { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 2px solid var(--lijn); border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .92rem; }
.kleur i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
.kleur:has(input:checked) { border-color: var(--linde); background: var(--linde-licht); }
.wz-opties { display: grid; gap: 8px; }
@media (min-width: 620px) { .wz-opties { grid-template-columns: 1fr 1fr; } }
.akkoord { margin: 6px 0 4px; }
.wz-klaar, .af-klaar { display: grid; gap: 12px; justify-items: start; }
.wz-klaar:focus, .af-klaar:focus { outline: none; }
.wz-klaar[hidden], .af-klaar[hidden], .wz-stap[hidden] { display: none; }
.vinkje { width: 56px; height: 56px; }
.vinkje circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: teken .7s ease-out forwards; }
.vinkje path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: teken .4s .55s ease-out forwards; }
@keyframes teken { to { stroke-dashoffset: 0; } }
.stap-in { animation: stapIn .45s cubic-bezier(.2,.7,.2,1); }
@keyframes stapIn { from { opacity: 0; transform: translateX(18px); } }

/* Showroom */
.show-grid { display: grid; gap: 24px; }
@media (min-width: 980px) { .show-grid { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } }
.afspraak { background: var(--avond-licht); border-radius: calc(var(--rond) + 6px); padding: clamp(18px, 3.4vw, 34px); display: grid; gap: 22px; }
.afspraak legend { color: var(--wit); }
.afspraak label { color: var(--kalk); }
.afspraak input:not([type="radio"]), .afspraak select { background: var(--avond); color: var(--wit); border-color: #45526A; }
.dagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.tijden { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.slot { position: relative; }
.slot input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.slot span { display: grid; justify-items: center; gap: 0; padding: 10px 6px; border: 2px solid #45526A; border-radius: 12px; font-size: .78rem; color: #C3CAD3; line-height: 1.25; transition: border-color .2s, background .2s; }
.slot span b { font-size: 1.25rem; color: var(--wit); font-family: var(--f-kop); font-weight: 650; }
.tijden .slot span { font-size: 1rem; font-weight: 800; color: var(--wit); padding: 12px 6px; }
.slot:hover span { border-color: var(--zon-licht); }
.slot input:checked + span { background: var(--zon); border-color: var(--zon); color: var(--antraciet); }
.slot input:checked + span b { color: var(--antraciet); }
.slot input:focus-visible + span { outline: 3px solid var(--zon); outline-offset: 2px; }
.slot input:disabled + span { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.slot input:disabled { cursor: not-allowed; }
.af-klaar { background: var(--avond); border-radius: var(--rond); padding: 20px; border-left: 4px solid var(--linde-fel); }

/* Footer */
.voet { background: #15191D; color: #C3CAD3; padding-block: 56px 24px; font-size: .95rem; }
.voet-grid { display: grid; gap: 34px; }
@media (min-width: 760px) { .voet-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .voet-grid { grid-template-columns: 1.3fr 1.2fr 1fr .7fr; } }
.logo-licht { color: var(--wit); margin-bottom: 14px; }
.logo-licht small { color: #9AA3AB; }
.voet-kop { font-family: var(--f-tekst); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--linde-fel); margin-bottom: 12px; }
.voet a { color: var(--wit); }
.voet address { font-style: normal; line-height: 1.8; overflow-wrap: anywhere; }
.tijden-tabel { border-collapse: collapse; width: 100%; }
.tijden-tabel th, .tijden-tabel td { text-align: left; padding: 5px 0; border-bottom: 1px solid #2A3138; font-weight: 500; }
.tijden-tabel td { text-align: right; color: var(--wit); white-space: nowrap; }
.voet-links { list-style: none; padding: 0; display: grid; gap: 6px; }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 44px; padding-top: 20px; border-top: 1px solid #2A3138; font-size: .82rem; color: #8F98A1; }

/* Beweging uit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .lamellen-mini rect { transform: rotate(35deg); }
  .vinkje circle, .vinkje path { stroke-dashoffset: 0; }
}
@media (max-width: 560px) { body { padding-bottom: 62px; } .demobalk { font-size: .76rem; gap: 2px 12px; } }