/* ============================================================
   altilia.nl — pagina-specifieke secties (homepage)
   ============================================================ */

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--inkt);color:#fff;min-height:min(86vh,820px);display:grid;align-items:end;isolation:isolate}
.hero video,.hero .hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(25,28,24,.72) 0%,rgba(25,28,24,.5) 34%,rgba(25,28,24,.12) 62%,rgba(25,28,24,0) 78%),linear-gradient(180deg,rgba(25,28,24,.2) 0%,rgba(25,28,24,0) 35%,rgba(25,28,24,.55) 100%)}
@media (max-width:700px){.hero::after{background:linear-gradient(180deg,rgba(25,28,24,.35) 0%,rgba(25,28,24,.55) 45%,rgba(25,28,24,.8) 100%)}}
/* lagen expliciet: beeld (0) < schaduw (1) < tekst (2); negatieve z-index liet de video soms over de schaduw vallen */
.hero video,.hero .hero-poster{z-index:0}
.hero::after{z-index:1}
.hero .wrap,.hero .hero-plek{position:relative;z-index:2}
.hero .wrap{padding-block:clamp(6rem,14vw,10rem) clamp(2.5rem,5vw,4rem);display:grid;gap:1.5rem}
.hero .eyebrow{color:#DFEEDD}
.hero h1{color:#fff;max-width:15ch;font-size:clamp(2.5rem,5.4vw,4.4rem)}
.hero .lead{color:rgba(255,255,255,.88);max-width:52ch;font-size:clamp(1.05rem,1.5vw,1.3rem)}
.hero .knoppen{margin-top:.5rem}
.hero .knop.secundair{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);backdrop-filter:blur(6px)}
.hero .knop.secundair:hover{background:rgba(255,255,255,.24)}
.hero-noot{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-sm);color:rgba(255,255,255,.8)}
.hero-noot .hand{color:#fff;font-size:1.35rem}
.hero-plek{position:absolute;right:var(--gutter);bottom:1.1rem;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:.5rem}
.hero-plek .vlag{box-shadow:none}
.hero-geluid{position:absolute;left:var(--gutter);bottom:1rem;display:none}

/* ---------- vertrouwensbalk ---------- */
.vertrouwen{background:var(--paper);box-shadow:0 1px 0 var(--lijn),0 -1px 0 var(--lijn)}
.vertrouwen .wrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;padding-block:1.25rem}
.vertrouwen .item{display:flex;align-items:center;gap:.8rem;min-width:0}
.vertrouwen .item b{font-size:1.35rem;font-weight:700;color:var(--inkt);letter-spacing:-.02em;line-height:1;white-space:nowrap}
.vertrouwen .item span{font-size:var(--fs-sm);color:var(--muted);line-height:1.3}
.vertrouwen .sterren{color:var(--actie);letter-spacing:-1px;font-size:1.05rem}
@media (max-width:1000px){.vertrouwen .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.vertrouwen .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}.vertrouwen .item b{font-size:1.15rem}}

/* ---------- doelgroepen (tabs) ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.tabs [role="tab"]{padding:.75rem 1.1rem;border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--schaduw-kaart);font-weight:600;font-size:.95rem;color:var(--tekst);cursor:pointer;transition:background .2s,color .2s}
.tabs [role="tab"][aria-selected="true"]{background:var(--actie-vlak);color:#fff;box-shadow:none}
.tabs [role="tab"]:hover:not([aria-selected="true"]){background:var(--veld)}
.doelgroep{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:stretch;background:var(--paper);border-radius:var(--r-paneel);box-shadow:var(--schaduw-kaart);overflow:hidden}
.doelgroep .foto{border-radius:0;min-height:400px}
.doelgroep .foto img{position:absolute;inset:0}
.doelgroep .tekst{align-self:center}
.doelgroep .tekst{padding:clamp(1.5rem,3.5vw,3rem) clamp(1.25rem,3.5vw,3rem) clamp(1.5rem,3.5vw,3rem) 0}
.doelgroep ul{list-style:none;margin:1.25rem 0 1.5rem;padding:0;display:grid;gap:.6rem}
.doelgroep li{display:flex;gap:.6rem;align-items:flex-start;color:var(--tekst)}
.doelgroep li .ic{width:20px;height:20px;color:var(--actie);margin-top:.2rem}
@media (max-width:900px){.doelgroep{grid-template-columns:1fr}.doelgroep .foto{aspect-ratio:16/10;min-height:0}.doelgroep .tekst{padding:1.5rem}}

/* ---------- saldering 2027 ---------- */
.saldering .paneel{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.teller{display:grid;gap:.25rem;justify-items:start}
.teller b{font-size:clamp(3.5rem,9vw,6.5rem);font-weight:700;color:var(--sage-diep);letter-spacing:-.04em;line-height:.95}
.teller span{font-size:var(--fs-sm);color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.saldering h2{max-width:18ch}
.saldering p{max-width:60ch}
@media (max-width:760px){.saldering .paneel{grid-template-columns:1fr}}

/* ---------- levend systeem ---------- */
.levend{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
.levend .paneel{padding:clamp(1.25rem,3vw,2.5rem)}
.levend .toelichting{display:grid;gap:1rem;margin-top:1.25rem}
.levend .toelichting .kaart{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.1rem}
.levend .toelichting h4{margin-bottom:.2rem}
.levend .toelichting p{font-size:var(--fs-sm);color:var(--tekst-2)}
@media (max-width:1000px){.levend{grid-template-columns:1fr}}

/* ---------- app-showcase ---------- */
.app-toon{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,4vw,3rem);align-items:end}
.browserframe{background:var(--paper);border-radius:18px;box-shadow:var(--schaduw-kaart);overflow:hidden}
.browserframe .balk{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-bottom:1px solid var(--lijn);background:#FBFAF7}
.browserframe .balk i{width:10px;height:10px;border-radius:50%;background:var(--lijn-2);display:inline-block}
.browserframe .balk span{margin-left:.5rem;font-size:var(--fs-xs);color:var(--muted);background:var(--canvas);padding:.25rem .7rem;border-radius:var(--r-pill);flex:1;text-align:center}
.browserframe img{width:100%;height:auto;display:block}
.phoneframe{width:min(300px,80%);margin-inline:auto;border-radius:38px;padding:10px;background:var(--inkt);box-shadow:0 20px 40px -24px rgba(25,28,24,.5);position:relative}
.phoneframe::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:90px;height:22px;background:var(--inkt);border-radius:12px;z-index:2}
.phoneframe img{border-radius:30px;width:100%;height:auto;display:block}
.app-punten{display:grid;gap:1rem;margin-top:1.5rem}
.app-punten .kaart{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.1rem}
.app-punten p{font-size:var(--fs-sm);color:var(--tekst-2)}
.demo-knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
@media (max-width:900px){.app-toon{grid-template-columns:1fr}.phoneframe{margin-top:1rem}}

/* ---------- productfamilie (schaalreis) ---------- */
.familie{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;align-items:end}
.familie > a{display:grid;gap:.6rem;justify-items:center;text-align:center;padding:1rem .75rem 1.25rem;border-radius:var(--r-kaart);background:var(--paper);box-shadow:var(--schaduw-kaart);transition:transform .3s var(--ease),box-shadow .3s}
.familie > a:hover{transform:translateY(-4px);box-shadow:var(--schaduw-kaart-hover)}
.familie .beeld{height:var(--h,120px);display:flex;align-items:flex-end;justify-content:center;width:100%}
.familie .beeld img{max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(25,28,24,.14))}
.familie h3{font-size:1rem}
.familie .cap{font-weight:700;color:var(--sage-diep);font-size:1.1rem;letter-spacing:-.01em}
.familie small{font-size:var(--fs-xs);color:var(--muted);line-height:1.4}
.familie-as{display:flex;justify-content:space-between;margin-top:1rem;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
@media (max-width:1000px){.familie{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.familie{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- waarom Altilia ---------- */
.vergelijk{width:100%;border-collapse:separate;border-spacing:0;background:var(--paper);border-radius:var(--r-kaart);box-shadow:var(--schaduw-kaart);overflow:hidden;font-size:var(--fs-sm)}
.vergelijk th,.vergelijk td{padding:.9rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--lijn)}
.vergelijk tr:last-child td{border-bottom:0}
.vergelijk th{background:var(--veld);font-weight:600;color:var(--inkt);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase}
.vergelijk th:last-child,.vergelijk td:last-child{background:var(--sage-zacht);color:var(--inkt);font-weight:400}
.vergelijk td:first-child{font-weight:600;color:var(--inkt);width:20%}
.vergelijk td:nth-child(2){color:var(--muted)}
.vergelijk-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.zes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
.zes .kaart{display:grid;gap:.6rem}
.zes .kop-rij{display:flex;align-items:center;gap:.75rem}
.zes h3{font-size:1.05rem}
.zes p{font-size:var(--fs-sm);color:var(--tekst-2)}
@media (max-width:900px){.zes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.zes{grid-template-columns:1fr}}

/* ---------- in actie (filmstrook) ---------- */
.actie{overflow:hidden}
.strook{display:flex;gap:1rem;width:max-content;animation:strook 60s linear infinite;padding-block:.5rem}
.actie:hover .strook,.actie:focus-within .strook{animation-play-state:paused}
.strook figure{margin:0;flex:none;width:clamp(240px,26vw,380px);border-radius:var(--r-kaart);overflow:hidden;background:var(--veld);box-shadow:var(--schaduw-kaart);position:relative}
.strook figure.staand{width:clamp(180px,18vw,260px)}
.strook img,.strook video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.strook figure.staand img,.strook figure.staand video{aspect-ratio:4/5}
.strook figcaption{position:absolute;left:.75rem;right:.75rem;bottom:.6rem;color:#fff;font-size:var(--fs-sm);line-height:1.3;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.strook figcaption .hand{color:#fff;font-size:1.3rem;display:block}
@keyframes strook{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strook{animation:none;width:auto;overflow-x:auto}}
.actie-kop{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-bottom:1.5rem}

/* ---------- reviews ---------- */
.reviews-kop{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.google-score{display:inline-flex;align-items:center;gap:.6rem;background:var(--paper);box-shadow:var(--schaduw-kaart);border-radius:var(--r-pill);padding:.5rem 1rem .5rem .8rem}
.google-score b{font-size:1.25rem;color:var(--inkt)}
.google-score .sterren{color:var(--actie);font-size:1.1rem;letter-spacing:-1px}
.google-score span{font-size:var(--fs-sm);color:var(--muted)}
.carrousel{position:relative}
.carrousel .baan{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem .25rem 1rem;scrollbar-width:none}
.carrousel .baan::-webkit-scrollbar{display:none}
.review{flex:0 0 min(360px,85vw);scroll-snap-align:start;display:grid;gap:.75rem;align-content:start}
.review .sterren{color:var(--actie);letter-spacing:-1px}
.review blockquote{margin:0;font-size:1rem;line-height:1.6;color:var(--inkt);font-weight:400}
.review footer{font-size:var(--fs-sm);color:var(--muted)}
.review footer b{color:var(--inkt);font-weight:600}
.carrousel .pijlen{display:flex;gap:.5rem;justify-content:flex-end}
.carrousel .pijlen button{width:44px;height:44px;border-radius:50%;background:var(--paper);box-shadow:var(--schaduw-kaart);display:grid;place-items:center;color:var(--inkt)}
.carrousel .pijlen button:hover{background:var(--veld)}

/* ---------- zakelijk ---------- */
.zakelijk .split{align-items:stretch}
.zakelijk .foto{min-height:420px}
.zakelijk .cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1.25rem 0}
.zakelijk .cijfers .kaart{padding:.9rem 1rem;display:grid;gap:.15rem}
.zakelijk .cijfers b{font-size:1.5rem;color:var(--sage-diep);letter-spacing:-.02em;line-height:1.1}
.zakelijk .cijfers span{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
@media (max-width:560px){.zakelijk .cijfers{grid-template-columns:1fr 1fr}}

/* ---------- partners ---------- */
.partners{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.partners .kaart{display:grid;gap:1rem;align-content:start}
.partners .kaart .foto{aspect-ratio:16/10}
.partners ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.partners li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-sm);color:var(--tekst)}
.partners li .ic{width:18px;height:18px;color:var(--actie);margin-top:.15rem}
.partners blockquote{margin:0;padding:1rem 1.1rem;background:var(--veld);border-radius:var(--r-klein);font-size:var(--fs-sm);line-height:1.6;color:var(--inkt)}
.partners blockquote footer{margin-top:.4rem;color:var(--muted);font-size:var(--fs-xs)}
.logo-rij{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;align-items:center}
.logo-rij .pill{background:var(--paper);box-shadow:var(--schaduw-kaart);text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:500;color:var(--tekst)}
@media (max-width:800px){.partners{grid-template-columns:1fr}}

/* ---------- Renswoude ---------- */
.renswoude .mozaiek{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:auto auto;gap:1rem}
.renswoude .mozaiek .foto:first-child{grid-row:span 2}
.renswoude .mozaiek .foto{aspect-ratio:4/3}
.renswoude .mozaiek .foto:first-child{aspect-ratio:auto}
.renswoude .adres{display:grid;gap:.25rem;margin-top:1.25rem;font-size:var(--fs-sm)}
.renswoude .adres b{color:var(--inkt)}
@media (max-width:800px){.renswoude .mozaiek{grid-template-columns:1fr 1fr}.renswoude .mozaiek .foto:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}}

/* ---------- kennisbank ---------- */
.artikelen .kaart{display:grid;gap:.5rem;align-content:start}
.artikelen .kaart .foto{aspect-ratio:16/10;margin-bottom:.5rem}
.artikelen .kaart h3{font-size:1.1rem}
.artikelen .kaart p{font-size:var(--fs-sm);color:var(--tekst-2)}
.artikelen .kaart .lees{color:var(--sage-diep);font-weight:600;font-size:var(--fs-sm);display:inline-flex;gap:.35rem;align-items:center;margin-top:.25rem}

/* ---------- adviesgesprek ---------- */
.advies .paneel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.advies form{display:grid;gap:.75rem}
.advies .rij{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.advies label{display:grid;gap:.3rem;font-size:var(--fs-sm);font-weight:600;color:var(--inkt)}
.advies input,.advies select{font:inherit;font-weight:400;padding:.75rem .9rem;border-radius:var(--r-klein);border:1px solid var(--lijn-2);background:var(--paper);color:var(--inkt);width:100%}
.advies input:focus,.advies select:focus{outline:2px solid var(--actie);outline-offset:1px;border-color:var(--actie)}
.advies .vink{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:var(--fs-sm);color:var(--tekst-2)}
.advies .vink input{width:auto;margin-top:.2rem}
.advies .melding{background:var(--veld);border-radius:var(--r-klein);padding:.8rem 1rem;font-size:var(--fs-sm);color:var(--sage-diep)}
.advies .bel{display:grid;gap:.25rem;margin-top:1.25rem}
.advies .bel b{font-size:1.5rem;color:var(--inkt);letter-spacing:-.02em}
.advies .portret{display:flex;gap:1rem;align-items:center;margin-top:1.5rem}
.advies .portret img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:top}
.advies .portret span{font-size:var(--fs-sm);color:var(--tekst-2)}
@media (max-width:860px){.advies .paneel{grid-template-columns:1fr}.advies .rij{grid-template-columns:1fr}}

/* ---------- algemeen ---------- */
.kicker-rij{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.sectie-kop{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.sectie-kop .knop{flex:none}
.bijschrift-hand{font-family:var(--hand);color:var(--sage-diep);font-size:1.4rem;line-height:1.1}

@media (max-width:700px){
  .hero{min-height:0}
  .hero .wrap{padding-top:5rem}
  .hero h1{font-size:2.4rem}
  .hero-plek{position:static;margin-top:1.25rem;justify-content:flex-start;padding-inline:var(--gutter);padding-bottom:1rem}
  .hero-noot{flex-wrap:wrap;gap:.25rem}
  .vertrouwen .item{flex-direction:column;align-items:flex-start;gap:.2rem}
  .vertrouwen .item b{white-space:normal}
}
@media (max-width:1000px){.vertrouwen .item span{font-size:var(--fs-xs)}}

/* ---------- paginabrede vlagband (onder elke paginabrede foto/video, zoals op altilia.nl) ---------- */
.vlagband{height:12px;width:100%;background:linear-gradient(to bottom,var(--vlag-rood) 0 33.4%,#fff 33.4% 66.7%,var(--vlag-blauw) 66.7% 100%);display:block}

/* ---------- hero met afspeellijst (twee clips, overvloeiend) ---------- */
.hero video{opacity:0;transition:opacity 1.2s ease}
.hero video.actief{opacity:1}
.hero-pauze{position:absolute;right:var(--gutter);top:1rem;z-index:3;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(25,28,24,.55);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.35);transition:background .2s}
.hero-pauze:hover{background:rgba(25,28,24,.8)}
.hero-pauze:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero-pauze .ic{width:16px;height:16px;fill:currentColor}
@media (max-width:700px){.hero-pauze{width:36px;height:36px}}
.hero .hero-extra{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;font-size:var(--fs-sm);color:rgba(255,255,255,.85)}
.hero .hero-extra a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:700px){.hero .hero-extra{font-size:var(--fs-xs)}}

/* ---------- vertrouwensbalk ---------- */
.vertrouwen .item span{max-width:16ch}
@media (max-width:640px){.vertrouwen .item.optioneel{display:none}}

/* ---------- vergelijkingstabel op mobiel: gestapelde kaartjes ---------- */
@media (max-width:700px){
  .vergelijk,.vergelijk tbody,.vergelijk tr,.vergelijk td{display:block;width:100%}
  .vergelijk thead{display:none}
  .vergelijk tr{padding:.9rem 1rem;border-bottom:1px solid var(--lijn)}
  .vergelijk td{padding:.2rem 0;border:0;background:transparent!important}
  .vergelijk td:first-child{font-size:1rem;margin-bottom:.35rem}
  .vergelijk td:nth-child(2)::before{content:"Gewoon: ";font-weight:600;color:var(--muted)}
  .vergelijk td:nth-child(3)::before{content:"Altilia: ";font-weight:600;color:var(--sage-diep)}
  .vergelijk td:nth-child(3){color:var(--inkt)}
}

/* ---------- filmstrook: leesbare bijschriften, mobiel scrollbaar ---------- */
.strook figure::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(25,28,24,.78),rgba(25,28,24,0));pointer-events:none}
.strook figcaption{z-index:1;text-shadow:none}
@media (max-width:700px){.strook{animation:none;width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gutter)}.strook figure{scroll-snap-align:start}.strook figure[aria-hidden="true"]{display:none}}

/* ---------- app-tabs per doelgroep ---------- */
.apptabs .schermen{display:grid;grid-template-columns:1.15fr .85fr;gap:1.25rem;align-items:start}
.apptabs .browserframe img{aspect-ratio:16/10;object-fit:cover;object-position:top}
.apptabs .punten{display:grid;gap:.75rem;margin-top:1.25rem}
.apptabs .punten .kaart{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 1rem}
.apptabs .punten h4{margin-bottom:.15rem}
.apptabs .punten p{font-size:var(--fs-sm);color:var(--tekst-2)}
.apptabs .klein-frame{background:var(--paper);border-radius:14px;box-shadow:var(--schaduw-kaart);overflow:hidden}
.apptabs .klein-frame img{width:100%;height:auto;display:block}
.apptabs .klein-frame + .klein-frame{margin-top:1rem}
.apptabs .klein-frame figcaption{font-size:var(--fs-xs);color:var(--muted);padding:.5rem .75rem}
@media (max-width:900px){.apptabs .schermen{grid-template-columns:1fr}}

/* ---------- stappenrij ---------- */
.stappen{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:1rem;counter-reset:stap}
.stappen .stap{background:var(--paper);border-radius:var(--r-kaart);box-shadow:var(--schaduw-kaart);padding:1.1rem 1.15rem;display:grid;gap:.4rem;counter-increment:stap;align-content:start}
.stappen .stap::before{content:counter(stap);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--actie);color:#fff;font-weight:700;font-size:.85rem;margin-bottom:.25rem}
.stappen h4{font-size:1rem}
.stappen p{font-size:var(--fs-sm);color:var(--tekst-2)}
@media (max-width:900px){.stappen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stappen{grid-template-columns:1fr}}

/* ---------- productfamilie: specs ---------- */
.familie > div{display:grid;gap:.5rem;justify-items:center;text-align:center;padding:1rem .75rem 1.25rem;border-radius:var(--r-kaart);background:var(--paper);box-shadow:var(--schaduw-kaart)}
.familie .specs{list-style:none;margin:.25rem 0 0;padding:0;display:grid;gap:.15rem;font-size:var(--fs-xs);color:var(--tekst-2);text-align:center}

/* ---------- veelgestelde vragen ---------- */
.vragen{display:grid;gap:.6rem}
.vragen details{background:var(--paper);border-radius:var(--r-kaart);box-shadow:var(--schaduw-kaart);padding:0 1.25rem}
.vragen summary{cursor:pointer;list-style:none;font-weight:600;color:var(--inkt);padding:1rem 2rem 1rem 0;position:relative;font-size:1.02rem}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";position:absolute;right:0;top:.85rem;font-size:1.4rem;color:var(--sage-diep);font-weight:300;transition:transform .2s}
.vragen details[open] summary::after{transform:rotate(45deg)}
.vragen .antwoord{padding:0 0 1.1rem;color:var(--tekst-2);max-width:70ch}
.vragen .antwoord p+p{margin-top:.5rem}

/* ---------- reviews: hoogte op inhoud, pijlen bij de kop ---------- */
.carrousel .baan{align-items:start}
.reviews-kop{gap:.75rem}
.reviews-kop .pijlen{display:flex;gap:.5rem}
.reviews-kop .pijlen button{width:44px;height:44px;border-radius:50%;background:var(--paper);box-shadow:var(--schaduw-kaart);display:grid;place-items:center;color:var(--inkt)}
.carrousel::after{content:"";position:absolute;top:0;right:0;bottom:1rem;width:60px;background:linear-gradient(to right,rgba(247,246,241,0),var(--canvas));pointer-events:none}

/* ---------- certificering ---------- */
.normen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.normen .pill{background:var(--paper);box-shadow:var(--schaduw-kaart);text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:500;color:var(--inkt)}

/* ---------- partners: grote namen ---------- */
.namen{display:flex;flex-wrap:wrap;gap:.6rem .9rem;margin-top:1rem}
.namen span{font-weight:600;color:var(--inkt);font-size:1.05rem;background:var(--paper);box-shadow:var(--schaduw-kaart);border-radius:var(--r-klein);padding:.55rem .9rem}

/* ---------- AI-uitleg citaat ---------- */
.ai-citaat{background:var(--blauw-zacht);border-radius:var(--r-kaart);padding:1.1rem 1.25rem;display:grid;gap:.4rem;border-left:4px solid var(--blauw)}
.ai-citaat .label{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--blauw)}
.ai-citaat p{color:var(--inkt);font-size:.98rem}

/* ---------- formulier-varianten ---------- */
.advies .alleen-partner{display:none}
.advies form[data-wie="partner"] .alleen-partner{display:grid}
.advies form[data-wie="partner"] .alleen-thuis{display:none}

/* ---------- nalooprondje 2 ---------- */
/* productkaarten: beeld, naam, capaciteit en specs per rij op één lijn (subgrid) */
.familie{align-items:stretch;grid-template-rows:auto auto auto auto auto}
.familie > div{grid-row:span 5;grid-template-rows:subgrid;gap:.35rem;align-content:end}
.familie > div .beeld{height:auto;min-height:var(--h,120px);align-self:end}
.familie > div .beeld img{max-height:var(--h,120px)}
.familie .specs{align-self:start}
@media (max-width:1000px){.familie{grid-template-rows:none}.familie > div{grid-row:auto;grid-template-rows:none}}

/* vertrouwensbalk: kolommen op inhoud, geen woord per regel */
@media (min-width:1001px){.vertrouwen .wrap{grid-template-columns:repeat(5,auto);justify-content:space-between}.vertrouwen .item span{max-width:15ch}}

/* energiehuis: waarden nooit over twee regels */
.eh-label b{white-space:nowrap}

/* stappen van zes: twee rijen van drie op desktop */
@media (min-width:901px){.stappen[style*="--n:6"]{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Renswoude: drie foto's, één breed bovenaan en twee eronder */
.renswoude .mozaiek{grid-template-columns:1fr 1fr;grid-template-rows:none}
.renswoude .mozaiek .foto:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
.familie-as{margin-top:1.5rem}

/* fotorij (installateurs: 2fr/1fr/1fr; groothandels: drie gelijke) */
.fotorij{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem;margin-top:1.5rem}
.fotorij figure{margin:0;border-radius:var(--r-kaart);overflow:hidden;background:var(--veld);position:relative;height:clamp(220px,26vw,340px)}
.fotorij img{width:100%;height:100%;object-fit:cover;display:block}
.fotorij figcaption{position:absolute;left:.75rem;bottom:.6rem;right:.75rem;color:#fff;font-size:var(--fs-sm);font-weight:500;z-index:1}
.fotorij figure::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(25,28,24,.7),rgba(25,28,24,0));pointer-events:none}
.fotorij.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.fotorij.drie figure{height:auto;aspect-ratio:4/3}
.fotorij.drie figcaption{font-size:var(--fs-xs)}
@media (max-width:700px){.fotorij{grid-template-columns:1fr 1fr}.fotorij figure:first-child{grid-column:span 2}.fotorij.drie{grid-template-columns:1fr 1fr}.fotorij.drie figure:first-child{grid-column:span 2}}

/* producten: detailrij onder de familie */
.detailrij{display:grid;grid-template-columns:1.4fr 1fr;gap:1rem;margin-top:2rem}
.detailrij figure{margin:0;display:grid;grid-template-columns:1fr;gap:.5rem;padding:1.25rem;align-content:start}
.detailrij img{width:100%;height:clamp(200px,24vw,320px);object-fit:contain}
.detailrij figcaption{display:grid;gap:.2rem}
.detailrij figcaption .hand{font-size:1.4rem;color:var(--sage-diep);line-height:1}
.detailrij figcaption b{font-size:1.05rem}
.detailrij figcaption span:last-child{font-size:var(--fs-sm);color:var(--tekst-2)}
@media (max-width:760px){.detailrij{grid-template-columns:1fr}}

/* icoontjes in kaarten nooit laten krimpen */
.icoon{flex:none}
@media (max-width:700px){
  .vergelijk td:first-child{width:auto}
  .zakelijk .cijfers{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .zakelijk .cijfers .kaart{padding:.7rem .6rem}
  .zakelijk .cijfers b{font-size:1.15rem}
  .zakelijk .cijfers span{font-size:.62rem;letter-spacing:.05em}
}

/* ---------- productfamilie: alle producten even groot (feedback 01-10) ---------- */
.familie > div .beeld{height:230px;min-height:0;align-self:end;display:flex;align-items:flex-end;justify-content:center}
.familie > div .beeld img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:1000px){.familie > div .beeld{height:200px}}
@media (max-width:560px){.familie > div .beeld{height:160px}}

/* ---------- vergelijking: Altilia-kolom als groen paneel (feedback 01-10) ---------- */
.vergelijk-wrap{overflow-x:auto;padding-top:.25rem}
.vergelijk{background:transparent;box-shadow:none;border-radius:0;overflow:visible;font-size:.95rem;border-collapse:separate;border-spacing:0}
.vergelijk th,.vergelijk td{padding:1.05rem 1.2rem;border-bottom:1px solid var(--lijn);vertical-align:top;line-height:1.5}
.vergelijk thead th{background:transparent;border-bottom:0;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);padding-bottom:.85rem}
.vergelijk thead th:last-child{background:var(--actie);color:#fff;border-radius:16px 16px 0 0;padding:1rem 1.2rem;font-size:.85rem}
.vergelijk tbody td{background:var(--paper)}
.vergelijk tbody tr:first-child td:first-child{border-top-left-radius:16px}
.vergelijk tbody tr:last-child td{border-bottom:0}
.vergelijk tbody tr:last-child td:first-child{border-bottom-left-radius:16px}
.vergelijk tbody td:first-child{width:20%;font-weight:600;color:var(--inkt);box-shadow:inset 1px 0 0 var(--lijn)}
.vergelijk tbody tr:first-child td{box-shadow:inset 0 1px 0 var(--lijn)}
.vergelijk tbody tr:first-child td:first-child{box-shadow:inset 1px 1px 0 var(--lijn)}
.vergelijk tbody td:nth-child(2){color:var(--muted);padding-left:3rem;position:relative}
.vergelijk tbody td:nth-child(3){background:var(--veld)!important;color:var(--inkt);font-weight:500;padding-left:3rem;position:relative;border-bottom-color:var(--lijn-sage);box-shadow:inset 2px 0 0 var(--actie),inset -2px 0 0 var(--actie)!important}
.vergelijk tbody tr:last-child td:nth-child(3){border-radius:0 0 16px 16px;box-shadow:inset 2px 0 0 var(--actie),inset -2px 0 0 var(--actie),inset 0 -2px 0 var(--actie)!important}
.vergelijk tbody td:nth-child(2)::before,.vergelijk tbody td:nth-child(3)::before{content:"";position:absolute;left:1.1rem;top:1.15rem;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E5E3D8'/%3E%3Cpath d='M8.6 8.6l6.8 6.8M15.4 8.6l-6.8 6.8' fill='none' stroke='%237E7C71' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.vergelijk tbody td:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%236FA071'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media (max-width:700px){
  .vergelijk thead{display:block}
  .vergelijk thead tr{display:flex;gap:.5rem;margin-bottom:.75rem}
  .vergelijk thead th{display:block;padding:.45rem .8rem;border-radius:999px!important;font-size:.7rem}
  .vergelijk thead th:first-child{display:none}
  .vergelijk thead th:nth-child(2){background:var(--paper);box-shadow:inset 0 0 0 1px var(--lijn)}
  .vergelijk tbody tr{background:var(--paper);border-radius:16px;box-shadow:inset 0 0 0 1px var(--lijn);margin-bottom:.75rem;padding:.9rem 1rem;border-bottom:0}
  .vergelijk tbody td{background:transparent!important;box-shadow:none!important;border:0;border-radius:0!important}
  .vergelijk tbody td:first-child{width:auto;padding:0 0 .5rem}
  .vergelijk tbody td:nth-child(2){padding:.1rem 0 .55rem 2rem}
  .vergelijk tbody td:nth-child(3){background:var(--veld)!important;border-radius:12px!important;padding:.65rem .8rem .65rem 2.6rem;box-shadow:inset 0 0 0 2px var(--actie)!important}
  .vergelijk tbody td:nth-child(2)::before{content:"";left:0;top:.15rem;width:20px;height:20px}
  .vergelijk tbody td:nth-child(3)::before{content:"";left:.65rem;top:.7rem;width:20px;height:20px}
}

.familie > div .beeld img{max-width:86%}
@media (max-width:700px){.vergelijk thead th{white-space:nowrap;font-size:.66rem;letter-spacing:.08em}.vergelijk thead tr{flex-wrap:wrap}}

/* ---------- productfamilie als serie: één studiovlak, één vloerschaduw (feedback 01-10) ---------- */
.familie > div{padding:.6rem .6rem 1.25rem}
.familie > div .beeld{height:250px;background:var(--canvas);border-radius:14px;padding:22px 16px 26px;position:relative;box-sizing:border-box}
.familie > div .beeld::after{content:"";position:absolute;left:16%;right:16%;bottom:14px;height:16px;background:radial-gradient(ellipse at center,rgba(25,28,24,.20) 0%,rgba(25,28,24,.08) 45%,rgba(25,28,24,0) 72%);z-index:0}
.familie > div .beeld img{position:relative;z-index:1;filter:none;max-width:100%}
@media (max-width:1000px){.familie > div .beeld{height:220px}}
@media (max-width:560px){.familie > div .beeld{height:180px;padding:16px 12px 20px}}

@media (max-width:1000px){.familie > div{align-content:start}}

/* doelgroep-tabs in het midden (feedback 01-10) */
#voor-wie .tabs{justify-content:center}

/* ---------- slim energiebeheer: drie korte kaarten onder het paneel (herontwerp 01-10) ---------- */
.slim-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
.slim-drie .kaart{display:grid;gap:.45rem;align-content:start;padding:1.1rem 1.2rem}
.slim-drie h4{margin:.2rem 0 0;font-size:1.02rem}
.slim-drie p{margin:0;font-size:var(--fs-sm);color:var(--tekst-2)}
@media (max-width:760px){.slim-drie{grid-template-columns:1fr}}
/* energiehuis-labels iets rustiger */
.eh-label b{font-size:clamp(.9rem,1.4vw,1.2rem);box-shadow:0 0 0 1px var(--lijn)}

/* keten: offerte-oproep eronder */
.keten-cta{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;background:var(--veld);border-radius:var(--r-kaart);padding:1rem 1.25rem}
.keten-cta p{margin:0;color:var(--inkt)}

/* productkaarten → productpagina */
/* Kaarten zijn sinds 01-10 een div met een losse link (vijfde rij van het raster); de oude
   kaartlink-stijl (.familie > a) mag deze link niet meer raken. */
.familie .naar-product{display:inline-flex;align-items:center;align-self:end;gap:.35rem;margin-top:.5rem;font-size:var(--fs-sm);font-weight:600;color:var(--sage-diep)}
.familie .naar-product .ic{width:16px;height:16px}
.familie .naar-product:hover{color:var(--inkt)}