/* Projectkaarten met lightbox.
   Gebruikt door de homepage (een selectie) en door /projecten/ (alles).
   Steunt op de kleurvariabelen die beide paginas definieren. */
.projecten{display:grid;grid-template-columns:1fr;gap:clamp(22px,2.6vw,32px);
           margin-top:clamp(34px,4vw,54px)}
/* vier kaarten passen niet op een rij van drie; twee bij twee leest rustiger */
@media(min-width:820px){.projecten{grid-template-columns:repeat(2,1fr)}}
.project-kaart{background:var(--bg);border:1px solid var(--line);border-radius:4px;
               overflow:hidden;display:flex;flex-direction:column}
.omslag{position:relative;display:block;width:100%;border:0;padding:0;cursor:pointer;
        background:none;overflow:hidden}
.omslag img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}
.omslag:hover img{transform:scale(1.03)}
.omslag .telling{position:absolute;left:14px;bottom:14px;background:rgba(7,31,51,.88);color:#fff;
                 font-size:.8rem;font-weight:500;padding:8px 15px;border-radius:999px}
.project-info{padding:20px 22px 24px}
.project-info h3{font-size:1.22rem;margin-bottom:8px}
.project-info .meta{font-size:.88rem;color:var(--muted)}

.lightbox{border:0;padding:0;max-width:min(1100px,94vw);max-height:92vh;width:100%;
          background:#0b1620;color:#fff}
.lightbox::backdrop{background:rgba(6,18,28,.88)}
.lb-kop{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;
        border-bottom:1px solid rgba(255,255,255,.12)}
.lb-titel{font-size:.94rem;font-weight:500}
.lb-sluit{background:none;border:0;color:#fff;font-size:1.2rem;cursor:pointer;line-height:1;padding:6px}
.lb-beeld figure{margin:0;display:none}
.lb-beeld figure.aan{display:block}
.lb-beeld img{display:block;width:100%;max-height:64vh;object-fit:contain;background:#000}
.lb-beeld figcaption{padding:14px 20px;font-size:.94rem;color:rgba(255,255,255,.78);
                     border-top:1px solid rgba(255,255,255,.1)}
.lb-voet{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px 16px}
.lb-knop{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;
         width:42px;height:42px;cursor:pointer;font-size:1rem}
.lb-knop:hover{background:#fff;color:#0b1620}
.lb-stippen{display:flex;gap:7px}
.lb-stippen span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}
.lb-stippen span.aan{background:#fff}


/* ── diensten: een paneel voor het hoofdproduct, de rest als index ───────
   Zes kaders van gelijk formaat beweerden dat dit zes gelijkwaardige diensten
   zijn. De doorbraak is het hoofdproduct met een vaste prijs; dat mag de
   indeling laten zien. De volledige omschrijvingen staan op /kosten/,
   /legalisatie/ en /bouwdossier/. */
.dienst-blok{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,44px)}
@media(min-width:940px){
  /* Niet uitrekken tot de hoogte van de lijst: dan wordt de liggende foto in een
     smalle hoge bak zo ver ingezoomd dat er niets van te zien is. Een eigen
     verhouding houdt de doorgang in beeld. */
  .dienst-blok{grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);align-items:start}
}
.paneel{position:relative;overflow:hidden;border-radius:4px;background:var(--navy-deep);
        color:#fff;display:flex;flex-direction:column;justify-content:flex-end;min-height:400px;
        text-decoration:none;height:100%}
/* Het paneel staat rechtop, de foto is liggend: cover snijdt aan de zijkanten.
   Het uitsnijpunt ligt op de doorgang zelf. */
.paneel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
            object-position:50% 50%}
.paneel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,
  rgba(7,31,51,.94) 6%,rgba(7,31,51,.52) 46%,rgba(7,31,51,.06) 100%)}
.paneel .inhoud{position:relative;z-index:2;padding:clamp(24px,3vw,34px)}
.paneel h3{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:0 0 10px;color:#fff}
.paneel p{color:rgba(255,255,255,.82);font-size:.97rem;max-width:38ch}
.paneel .prijsregel{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-top:20px;
                    padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
.paneel .bedrag{font-size:1.65rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.paneel .bij{font-size:.86rem;color:rgba(255,255,255,.68)}
@media(min-width:940px){
  .paneel{width:100%;height:auto;aspect-ratio:5/6;max-height:620px}
}

.dienst-idx{border-top:1px solid var(--hair,#c9c4b8)}
.dienst-idx a{display:grid;grid-template-columns:1fr;gap:2px 30px;padding:20px 0;
              border-bottom:1px solid var(--line);text-decoration:none;
              transition:padding-left .25s ease,background .25s ease}
@media(min-width:700px){
  .dienst-idx a{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto;align-items:baseline}
}
.dienst-idx a:hover{padding-left:12px;background:rgba(255,255,255,.6)}
.dienst-idx h3{font-size:1.28rem;line-height:1.14}
.dienst-idx .zin{color:var(--muted);font-size:.95rem}
.dienst-idx .naar{font-size:.92rem;font-weight:600;color:var(--accent);white-space:nowrap;
                  display:flex;align-items:baseline;gap:12px}
.dienst-idx .pijl{color:var(--hair,#c9c4b8);transition:transform .25s ease,color .25s ease}
.dienst-idx a:hover .pijl{color:var(--accent);transform:translateX(5px)}