/* Sedum van Lensen. Huisstijl van lensenhoveniers.nl: F37 Saint voor koppen, Georgia voor tekst,
   donkergroen, middengroen, geel en crème. Eén lichte stijl, bewust (zoals de hoofdsite). */
@font-face{font-family:"F37 Saint";src:url(fonts/F37Saint-Bold.woff2) format("woff2");font-weight:600 800;font-display:swap;unicode-range:U+0000-00B1,U+00B4-FFFF}
:root{
  --groen-donker:#1C2A1C; --groen:#55833D; --groen-tekst:#3D6A2A; --groen-licht:#E7EEDD; --geel:#F2ED94; --creme:#F7F6F0;
  --wit:#FFFFFF; --tekst:#1C2A1C; --grijs:#55605A; --lijn:#DAD9CC; --oranje:#9A5B00;
  --kop:"F37 Saint","Century Gothic","Avenir Next","Segoe UI",system-ui,sans-serif;
  --romp:Georgia,"Times New Roman",serif;
  --breed:1120px; --tekstbreed:68ch; --r:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--tekst);font:18px/1.6 var(--romp)}
img{max-width:100%;height:auto;display:block}
a{color:var(--groen-donker);text-decoration-color:var(--groen);text-underline-offset:3px}
a:hover{color:var(--groen)}
:focus-visible{outline:3px solid var(--groen);outline-offset:2px}
h1,h2,h3{font-family:var(--kop);font-weight:700;line-height:1.15;margin:0 0 .5em;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:clamp(2rem,1.4rem + 3vw,3.3rem)}
h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);margin-top:0}
h3{font-size:1.2rem}
p,ul,ol{margin:0 0 1em}
.sprong{position:absolute;left:-999px;top:8px;background:var(--geel);padding:8px 12px;z-index:10}
.sprong:focus{left:8px}

/* kop */
.kop{background:var(--wit);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:5}
.kop-binnen{max-width:1220px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--groen-donker);flex:none}
.logo{width:52px;height:52px;flex:none}
.merk-tekst{display:flex;flex-direction:column;line-height:1.1}
.merk-tekst strong{font:700 1.15rem var(--kop)}
.merk-tekst small{font:500 .78rem var(--kop);color:var(--grijs)}
.menu{display:flex;gap:16px;margin-left:auto;font:600 .95rem var(--kop)}
.menu a{text-decoration:none;color:var(--groen-donker);padding:6px 0;border-bottom:2px solid transparent}
.menu a[aria-current="page"],.menu a:hover{border-bottom-color:var(--groen)}
.kop-knop{flex:none}
@media (max-width:1180px){ /* kop met 9 menu-items past pas vanaf ca. 1180 px op één regel */
  .kop{position:static}
  .kop-binnen{flex-wrap:wrap;gap:6px 12px;padding-block:8px}
  .merk{flex:1 1 auto;min-width:0}
  .menu{order:3;flex:1 1 100%;margin:0;overflow-x:auto;gap:18px;padding-bottom:2px;scrollbar-width:none}
  .menu a{white-space:nowrap}
  .kop-knop{min-height:42px;padding:8px 16px}
}
@media (max-width:480px){.merk-tekst small{display:none}.logo{width:44px;height:44px}.merk-tekst strong{font-size:1.05rem}}

.kruimels{max-width:var(--breed);margin:0 auto;padding:12px 16px 0;font:500 .85rem var(--kop);color:var(--grijs)}
.kruimels a{color:var(--grijs)}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:999px;font:700 1rem var(--kop);text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center}
.knop-hoofd{background:var(--groen-donker);color:var(--wit)}
.knop-hoofd:hover{background:var(--groen);color:var(--wit)}
.knop-tweede{background:transparent;border-color:var(--groen-donker);color:var(--groen-donker)}
.knop-tweede:hover{background:var(--groen-donker);color:var(--wit)}
.knop-geel{background:var(--geel);color:var(--groen-donker)}

/* blokken */
.blok{max-width:var(--breed);margin:0 auto;padding:48px 16px}
.blok-smal{max-width:calc(var(--tekstbreed) + 32px)}
.blok > *:last-child{margin-bottom:0}
.tekst{max-width:var(--tekstbreed)}
.intro{font-size:1.2rem;color:var(--grijs);max-width:var(--tekstbreed)}
.band{background:var(--wit);border-block:1px solid var(--lijn)}
.band-groen{background:var(--groen-licht)}

.held{max-width:var(--breed);margin:0 auto;padding:28px 16px 40px;display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center}
.held > *{min-width:0}
.held .eyebrow{font:700 .85rem var(--kop);letter-spacing:.08em;text-transform:uppercase;color:var(--groen-tekst)}
.held-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 14px}
.held figure{margin:0}
.held img{border-radius:var(--r);width:100%}
.beloften{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:6px;font:600 1rem var(--kop)}
.beloften li::before{content:"✓";color:var(--groen);font-weight:800;margin-right:8px}
@media (max-width:820px){.held{grid-template-columns:1fr;gap:22px;padding-top:16px}}

figcaption,.bron{font:500 .8rem var(--kop);color:var(--grijs);margin-top:6px}

.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:22px;min-width:0}
.kaart h3{margin-bottom:.35em}
.kaart p:last-child{margin-bottom:0}
.kaart .getal{font:800 2rem var(--kop);color:var(--groen-tekst);display:block;line-height:1;margin-bottom:8px}

.stappen{counter-reset:stap;list-style:none;padding:0;display:grid;gap:14px;margin-top:20px}
.stappen li{counter-increment:stap;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.stappen li::before{content:counter(stap);width:44px;height:44px;border-radius:50%;background:var(--geel);display:grid;place-items:center;font:800 1.1rem var(--kop)}
.stappen strong{font-family:var(--kop)}

.twee{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.twee > *{min-width:0}
@media (max-width:820px){.twee{grid-template-columns:1fr}}
.twee figure{margin:0}
.twee img{border-radius:var(--r)}

/* tabellen */
.tabelvak{overflow-x:auto;margin:18px 0 8px;border:1px solid var(--lijn);border-radius:var(--r);background:var(--wit)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
caption{text-align:left;font:700 .9rem var(--kop);padding:14px 16px 4px;color:var(--grijs)}
th,td{padding:12px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--lijn)}
thead th{font:700 .85rem var(--kop);color:var(--grijs);border-top:0}
tbody th{font-family:var(--kop);font-weight:700}
.prijstabel td:last-child{text-align:right;font:700 1.05rem var(--kop);white-space:nowrap;font-variant-numeric:tabular-nums;width:1%}
@media (max-width:520px){th,td{padding:10px 12px}.prijstabel td:last-child{font-size:.95rem}}
table.subsidie{min-width:720px}
.pil{display:inline-block;border-radius:999px;padding:3px 10px;font:700 .78rem var(--kop);white-space:nowrap}
.pil-open{background:#DCEBD0;color:#2F5A1E}
.pil-dicht{background:#FBE8C8;color:#7A4A00}
.pil-geen{background:#ECEBE4;color:#55605A}
.klein{font-size:.9rem;color:var(--grijs)}
.noot{border-left:4px solid var(--geel);padding:8px 12px;background:var(--wit);border-radius:0 8px 8px 0}

/* prijscheck */
.prijscheck{background:var(--wit);border:2px solid var(--groen-donker);border-radius:var(--r);padding:22px;display:grid;gap:14px;max-width:560px}
.prijscheck h2{font-size:1.4rem;margin:0}
.pc-rij{display:grid;gap:6px}
.pc-rij label{font:700 .95rem var(--kop)}
.pc-vink{grid-template-columns:auto 1fr;align-items:center;gap:10px}
.pc-vink input{width:22px;height:22px;accent-color:var(--groen)}
select,input[type=number],input[type=text],input[type=email],input[type=tel],textarea{width:100%;min-height:48px;border:2px solid var(--lijn);border-radius:10px;padding:10px 12px;font:500 1rem var(--kop);background:var(--wit);color:var(--tekst)}
textarea{min-height:110px;font-family:var(--romp)}
.pc-uitkomst{display:block;background:var(--groen-licht);border-radius:10px;padding:16px}
.pc-prijs{font:800 2rem var(--kop);display:block;line-height:1.1}
.pc-regel{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(28,42,28,.12);padding-top:8px;margin-top:8px;font:600 .95rem var(--kop)}
.pc-regel span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.pc-uitkomst .knop{margin-top:14px;width:100%}

/* cta */
.cta{max-width:var(--breed);margin:24px auto;padding:30px 24px;background:var(--groen-donker);color:var(--wit);border-radius:20px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.cta > div:first-child{flex:1 1 360px;min-width:0}
.cta h2{color:var(--wit);margin-bottom:.3em}
.cta p{margin:0;color:#E9EDE3}
.cta-knoppen{display:flex;flex-wrap:wrap;gap:12px}
.cta .knop-hoofd{background:var(--geel);color:var(--groen-donker)}
.cta .knop-hoofd:hover{background:var(--wit)}
.cta .knop-tweede{border-color:var(--wit);color:var(--wit)}
.cta .knop-tweede:hover{background:var(--wit);color:var(--groen-donker)}
@media (max-width:640px){.cta{margin-inline:16px;padding:24px 18px}.cta-knoppen .knop{width:100%}}

/* vragen */
.vragen{display:grid;gap:10px;margin-top:18px;max-width:var(--tekstbreed)}
.vragen details{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:0 18px}
.vragen summary{cursor:pointer;font:700 1.05rem var(--kop);padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.vragen summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--groen)}
.vragen details[open] summary::after{content:"–"}
.vragen summary::-webkit-details-marker{display:none}
.vragen details > div{padding-bottom:16px}

/* persoon */
.persoon{display:flex;gap:16px;align-items:center;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:18px;max-width:560px}
.persoon-foto{width:72px;height:72px;border-radius:50%;background:var(--geel);object-fit:cover;flex:none}
.persoon p{margin:0}

/* team (pagina team/) */
.persoon-groot .persoon-foto{width:120px;height:120px}
@media (max-width:480px){.persoon-groot{flex-direction:column;text-align:center}}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;margin-top:22px}
.team .kaart{display:flex;flex-direction:column;align-items:center;text-align:center}
.team-foto{width:112px;height:112px;border-radius:50%;object-fit:cover;background:var(--geel);margin-bottom:12px}
.team .rol{font:700 .78rem var(--kop);letter-spacing:.06em;text-transform:uppercase;color:var(--groen-tekst);margin:0 0 .5em}
.team .kaart p{font-size:.95rem}
.team .kaart .klein{margin-top:auto;font-size:.85rem}
.team-collage{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:420px;margin:0 auto}
.held .team-collage img{border-radius:50%;aspect-ratio:1;object-fit:cover}
@media (max-width:520px){.team{grid-template-columns:1fr 1fr;gap:12px}.team .kaart{padding:14px}.team-foto{width:88px;height:88px}}

/* formulier */
.formulier{display:grid;gap:16px;max-width:640px}
.veld{display:grid;gap:6px}
.veld label,.veld legend{font:700 .95rem var(--kop)}
.veld .hulp{font-size:.85rem;color:var(--grijs)}
.velden-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.velden-2{grid-template-columns:1fr}}
fieldset{border:0;padding:0;margin:0}
.keuzes{display:flex;flex-wrap:wrap;gap:8px}
.keuzes label{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--lijn);border-radius:999px;padding:8px 14px;font:600 .95rem var(--kop);background:var(--wit);cursor:pointer}
.keuzes input{accent-color:var(--groen)}
.potje{position:absolute;left:-5000px}
.melding{border-radius:12px;padding:16px;font:600 1rem var(--kop)}
.melding-goed{background:#DCEBD0}
.melding-fout{background:#FBE8C8}

.voet{background:var(--groen-donker);color:#DDE3D6;margin-top:48px}
.voet a{color:var(--geel)}
.voet-binnen{max-width:var(--breed);margin:0 auto;padding:40px 16px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;font-size:.95rem}
.voet-merk strong{font:700 1.3rem var(--kop);color:var(--wit)}
.voet-klein{max-width:var(--breed);margin:0 auto;padding:12px 16px 28px;font:500 .8rem var(--kop);color:#B9C3B3}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* galerij projecten */
.galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:24px}
.galerij figure{margin:0;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.galerij img{width:100%;aspect-ratio:4/3;object-fit:cover}
.galerij figcaption{font:700 .95rem var(--kop);color:var(--groen-donker);padding:10px 14px;margin:0}

/* Contact op telefoon en tablet vooraan in het menu, zodat het zonder scrollen zichtbaar is (Martin 11-10-2026) */
@media (max-width:1180px){.menu a[href*="contact/"]{order:-1}}

/* Kleine foto bij elke laag op de opbouwpagina */
.stappen .laagfoto{float:left;width:96px;height:72px;object-fit:cover;border-radius:8px;margin:2px 14px 6px 0}
.stappen li>div::after{content:"";display:block;clear:both}

/* Blogkaarten met foto */
.kaart-blog{padding:0 0 18px;overflow:hidden;text-decoration:none;color:inherit;align-items:stretch;text-align:left}
.kaart-blog img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:0;margin-bottom:14px}
.kaart-blog h3,.kaart-blog p{padding:0 18px}
.kaart-blog:hover h3{text-decoration:underline}

/* Blogkaarten: vaste kolombreedte, zodat één kaart niet schermbreed wordt */
.kaarten-blog{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* Fototegels per daktype op de homepage (informatieve foto's, link naar de voorbeelden) */
.fototegels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}
@media (max-width:700px){.fototegels{grid-template-columns:repeat(2,1fr);gap:10px}.fototegel span{font-size:.9rem;padding:24px 10px 10px}}
.fototegel{position:relative;display:block;border-radius:var(--r);overflow:hidden;color:#fff;text-decoration:none}
.fototegel img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;transition:transform .3s}
.fototegel span{position:absolute;left:0;right:0;bottom:0;padding:32px 14px 12px;background:linear-gradient(transparent,rgba(13,40,25,.88));font:700 1rem var(--kop)}
.fototegel:hover img,.fototegel:focus-visible img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.fototegel img{transition:none}}

/* Balk bovenaan met link naar de hoofdsite van Lensen Hoveniers */
/* Blok onderaan: door naar de hoofdsite voor de tuin */
.voet-hoofdsite{max-width:var(--breed);margin:8px auto 0;padding:18px 16px;border-top:1px solid rgba(255,255,255,.15);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.voet-hoofdsite p{margin:0;max-width:70ch}
.voet-hoofdsite .knop{background:var(--geel);color:var(--groen-donker);border-color:var(--geel)}