/* APVA one-pager (FormSubmit variant) */
:root{--indigo:#4f46e5;--red:#cc0000;--dark:#3f3f46}
*{box-sizing:border-box}
body{margin:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:#333;background:#f5f5f7}
a{text-decoration:none;color:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
/* Header */
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.nav a{margin:0 12px;font-weight:600;color:#444}
.nav a:hover{color:var(--indigo)}
/* Hero */
.hero{background:url('assets/img/hero.jpg') center/cover no-repeat;min-height:440px;display:flex;align-items:center}
.tag{display:inline-block;background:rgba(17,24,39,.75);color:#fff;padding:16px 24px;border-radius:12px;font-weight:700;font-size:28px}
/* Tabs */
.tabbar{display:grid;grid-template-columns:repeat(3,1fr)}
.tab{background:#5f6368;color:#fff;text-align:center;padding:18px 10px;font-weight:700;border-right:1px solid rgba(0,0,0,.15)}
.tab:first-child{border-left:1px solid rgba(0,0,0,.15)}
.tab.active{background:var(--red)}
.section{padding:40px 0}
#modules,
#contact,
#klanten{
  scroll-margin-top: 90px; /* of 100/110px als hij nog net te hoog/laag staat */
}
h2{margin:0 0 6px 0;font-size:28px}
.lead{color:#6b7280}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.form{padding:18px}
.grid-2{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr}.span-2{grid-column:span 2}}
.input,.textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #d1d5db;background:#fff;font-size:14px}
.btn{display:inline-flex;gap:8px;align-items:center;border:none;border-radius:12px;background:var(--red);color:#fff;padding:12px 18px;font-weight:700;cursor:pointer}
.btn:disabled{opacity:.6;cursor:not-allowed}
/* Clients */
.clients h3{margin:0 0 8px 0}
.grid-clients{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:700px){.grid-clients{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-clients{grid-template-columns:1fr 1fr 1fr}}
/* Client images (legacy grid, still used inside carousel items) */
.client img{width:100%;height:220px;object-fit:cover;border-radius:14px;background:#fff;border:1px solid #e5e7eb}

/* Carousel styles */
.carousel-wrapper{position:relative;overflow:hidden;margin-top:16px}
.carousel-track{display:flex;transition:transform 0.5s ease}
.carousel-item{flex:0 0 calc(100%/3);padding:0.5rem}
.carousel-item img{width:100%;height:220px;object-fit:cover;border-radius:14px;background:#fff;border:1px solid #e5e7eb}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:#fff;border:none;padding:0.5rem 0.75rem;border-radius:50%;cursor:pointer;z-index:10;font-size:1.5rem;line-height:1}
.carousel-btn.prev{left:-0.75rem}
.carousel-btn.next{right:-0.75rem}

/* Footer layout */
.footer-content{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-start;justify-content:space-between}
.footer-left,.footer-middle,.footer-right{flex:1 1 200px}
.footer-logo{height:60px;margin-bottom:0.5rem}
@media(max-width:768px){
  .footer-content{flex-direction:column;text-align:center}
  .footer-middle,.footer-right{flex:none;text-align:center}
}
/* Footer */
.footer{background:#3f3f46;color:#e5e7eb;padding:28px 0;margin-top:40px}
.footer a{color:#e5e7eb;text-decoration:underline}
.small{font-size:13px;color:#9ca3af}

/* Lightbox voor klantafbeeldingen */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
}
.lightbox.show{
  display:flex;
}
.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.6);
}
.lightbox-content{
  position:relative;
  max-width:90vw;
  max-height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

#lightbox-img{
  max-width:80%;
  max-height:80%;
  display:block;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
  background:#fff;
}
.lightbox-img-wrap {
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.lightbox-close {
  position: absolute;
  top: -10px;
  right: 50px;  /* dit kun je aanpassen naar bijv. 0px of -4px */
  background: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
}