:root{
  --kw-black:#0b0b0d;
  --kw-black2:#07070a;
  --kw-white:#fff;
  --kw-muted:#b9bec4;
  --kw-orange:#ff7a00;
  --kw-blue:#1f6fff;
  --border:rgba(255,255,255,.10);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --radius:18px;
  --max:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(900px 380px at 15% 0%, rgba(31,111,255,.18), transparent 55%),
              radial-gradient(900px 380px at 85% 0%, rgba(255,122,0,.18), transparent 55%),
              linear-gradient(180deg,var(--kw-black),var(--kw-black2));
  color:var(--kw-white);
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}

/* HEADER */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,.80);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:12px 0;
}
.brand{display:flex;align-items:center;min-width:220px}
.site-logo{height:64px;width:auto;display:block;object-fit:contain}
.menu{display:flex;gap:10px;flex:1;justify-content:center;align-items:center;white-space:nowrap}
.menu a{padding:10px 14px;border-radius:12px;border:1px solid transparent;color:var(--kw-muted)}
.menu a:hover{color:#fff;background:rgba(255,255,255,.06)}
.menu a.active{color:#fff;border-color:rgba(255,122,0,.45);background:rgba(255,122,0,.12)}
.cta{display:flex;align-items:center;gap:12px;min-width:280px;justify-content:flex-end}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#fff;font-weight:650;
}
.btn.primary{background:linear-gradient(135deg,var(--kw-orange),#ff9a2e);border-color:rgba(255,122,0,.65);color:#111}

/* CARDS */
.card{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-pad{padding:18px}

/* IMAGE BOX (dit is de fix) */
.img-box{
  width:100%;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
  margin-top:12px;
}
.img-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* GRID */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* RESPONSIVE */
@media (max-width:980px){
  .nav{flex-wrap:wrap}
  .menu{order:3;width:100%;justify-content:flex-start;flex-wrap:wrap;white-space:normal}
  .cta{order:2}
  .grid2,.grid3{grid-template-columns:1fr}
}
@media (max-width:520px){
  .site-logo{height:48px}
  .cta{width:100%}
  .btn{width:100%}
}
/* =========================
   MOBILE FIX – KozijnWrappers
   ========================= */

@media (max-width: 768px){

  /* HERO */
  h1{
    font-size:30px !important;
    line-height:1.15;
  }

  .page-title h1{
    font-size:28px;
  }

  /* Hero grid onder elkaar */
  .grid2{
    grid-template-columns:1fr !important;
  }

  /* Chips compacter */
  .chips{
    gap:8px;
  }
  .chip{
    font-size:13px;
    padding:6px 9px;
  }

  /* Buttons netjes onder elkaar */
  .cta{
    width:100%;
    justify-content:flex-start;
  }
  .btn{
    width:100%;
  }

  /* Hero buttons */
  header .btn{
    width:100%;
  }

  /* Afbeeldingen iets rustiger */
  .img-box{
    aspect-ratio: 4 / 3;
  }

  /* Menu beter klikbaar */
  .menu a{
    padding:10px 12px;
  }

  /* Minder ruimte boven/onder */
  .section{
    padding:12px 0 20px;
  }
}
/* =========================
   MOBILE HEADER FIX
   ========================= */
@media (max-width: 768px){

  /* Header layout onder elkaar */
  .nav{
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  /* Logo groter en gecentreerd */
  .brand{
    justify-content:center;
    width:100%;
  }

  .site-logo{
    height:100px;          /* groter logo */
    width:auto;
    display:block;
    margin:0 auto;
  }

  /* Menu onder logo */
  .menu{
    justify-content:center;
    width:100%;
  }

  /* CTA knoppen onder menu */
  .cta{
    width:100%;
    justify-content:center;
  }

  .btn{
    width:auto;
  }
}
/* =========================
   EXTRA RUIMTE & CARD FIX
   ========================= */

/* Meer ruimte onderaan de hele site */
footer{
  margin-top:60px;
}

/* Cards meer ademruimte onderin */
.card{
  padding-bottom:28px;
}

/* Afbeeldingen iets omhoog in cards */
.card .img-box{
  margin-top:12px;
  margin-bottom:16px;
}

/* Tekst in cards altijd zichtbaar */
.card p,
.card b,
.card h3{
  position:relative;
  z-index:2;
}
@media (max-width: 768px){

  /* Nog iets meer ruimte onderaan */
  footer{
    margin-top:85px;
  }

  /* Cards compacter maar veilig */
  .card{
    padding-bottom:32px;
  }

  /* Afbeelding hoger in kaart */
  .card .img-box{
    margin-top:0px;
    margin-bottom:20px;
  }
}footer{
  padding:60px 0;   /* was waarschijnlijk 24px of 32px */
}
footer{
  padding:80px 0;
}
footer{
  margin-top:80px;
  padding:60px 0;
}
footer{
  margin-top:80px;
  padding:60px 0;
}

@media (max-width: 768px){
  footer{
    margin-top:100px;
    padding:72px 0;
  }
}
@media (max-width: 768px){
  footer{
    margin-top:100px;
    padding:72px 0;
  }
}