/* Munsters Dakbedekkingen – style.css (responsive optimized v3) */
:root{
  --brand-red:#e53935;
  --brand-dark:#1b1b1b;
  --brand-gray:#f5f5f7;
  --text:#222;
  --muted:#666;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{width:min(1120px, 92vw); margin:0 auto;}

a{color:var(--brand-red); text-decoration:none}
a:hover{text-decoration:underline}

.menu{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.menu a{color:#333;font-weight:600}
.menu a.active{color:var(--brand-red)}
.actions{display:flex;align-items:center;gap:.6rem}

.floating-call{
  position:fixed; right:16px; bottom:16px; z-index:999;
  background:var(--brand-red); color:#fff; padding:12px 16px; border-radius:999px;
  box-shadow:var(--shadow); font-weight:800;
}

.floating-whatsapp {
  position: fixed;
  right: 16px;
  bottom: 70px; /* boven de bel-knop */
  z-index: 999;
  background: #25D366; /* WhatsApp groen */
  color: #fff;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-weight: 800;
  font-size: 15px;
}
.floating-whatsapp:hover {
  filter: brightness(0.9);
}

/* --- Floating knoppen goed positioneren (iOS safe areas etc.) --- */
.floating-call{
  right:12px; bottom:12px; padding:14px 16px; z-index:1000;
}
.floating-whatsapp{
  right:12px; bottom:60px; padding:14px 16px; z-index:1000;
}
@supports (padding: max(0px)) {
  .floating-call{ bottom: max(12px, env(safe-area-inset-bottom)); }
  .floating-whatsapp{ bottom: max(60px, calc(env(safe-area-inset-bottom) + 48px)); }
}

.btn{
  display:inline-block;
  background:var(--brand-red);
  color:#fff;
  padding:0.95rem 1.2rem;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:var(--shadow);
  border:2px solid var(--brand-red);
  transition:.2s ease;
  line-height:1;
}
.btn:hover{
  transform:translateY(-1px);
  text-decoration:none;
}
.btn.outline {
  background: transparent;
  color: #e53935;
  border: 2px solid #e53935;
}

.btn.outline:hover {
  background: #e53935;
  color: #fff;
}


.btn.block{display:block; width:100%; text-align:center}
.btn.lg{padding:1.05rem 1.35rem; font-size:1.05rem}

.tag{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .8rem;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:999px;
  font-size:.92rem;
  color:#333;
}

/* Header / Nav */
header{
  position:sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid #eee;
  backdrop-filter:saturate(180%) blur(6px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem 0;
}
.nav img{height:44px}
.nav .actions{display:flex; align-items:center; gap:.6rem}
.nav ul{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.nav a{color:#333; font-weight:600}
.nav .cta-phone{white-space:nowrap}
.mobile-toggle{display:none; font-size:1.7rem; cursor:pointer; background:none; border:0}

/* Hero */
.hero{
  position:relative;
  background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.32)), url('../assets/hero.jpg') center/cover no-repeat;
  color:#fff; padding:96px 0 80px;
}
.hero h1{font-size:clamp(30px, 4.5vw, 54px); line-height:1.1; margin:0 0 12px; text-shadow:0 2px 12px rgba(0,0,0,.28)}
.hero p{font-size:clamp(16px, 2.3vw, 20px); color:#f6f6f6; max-width:780px; text-shadow:0 1px 8px rgba(0,0,0,.25)}
.hero .cta{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap}
.hero .badges{margin-top:18px; display:flex; gap:10px; flex-wrap:wrap}
/* READABLE badges */
.badge{
  display:inline-block; padding:.4rem .7rem; border-radius:999px; font-size:.9rem;
  background:#e53935; color:#fff; font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.25);
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}

/* Sections */
.section{padding:64px 0}
.section.gray{background:var(--brand-gray)}
h2{font-size:clamp(24px, 3.2vw, 36px); margin:0 0 12px}
.sub{color:var(--muted); margin-top:0}

.grid{display:grid; gap:20px}
.grid.cols-3{grid-template-columns:repeat(3, 1fr)}
.grid.cols-4{grid-template-columns:repeat(4, 1fr)}

.card{
  background:#fff; border:1px solid #eee; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px;
}
.card h3{margin:.2rem 0 .6rem; font-size:1.2rem}
.card p{color:#555; margin:0}

.projects .item{
  border-radius:var(--radius); overflow:hidden; border:1px solid #eee; box-shadow:var(--shadow);
}
.projects .item img{width:100%; height:220px; object-fit:cover; display:block}
.projects .item .caption{padding:10px; font-weight:600}

.testimonials .quote{
  background:#fff; border-left:4px solid var(--brand-red); padding:18px; border-radius:10px;
  box-shadow:var(--shadow);
}

.cta-strip{
  background:linear-gradient(90deg, var(--brand-dark), #333);
  color:#fff; padding:28px 0;
}
.cta-strip .inner{display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap}

/* Contact */
.contact{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:22px;
}
.form{
  background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
label{font-weight:600; font-size:.95rem}
input, textarea, select{
  width:100%; padding:1rem 1rem; margin-top:.35rem; margin-bottom:.9rem;
  border:1px solid #ddd; border-radius:12px; font-size:1rem;
}
textarea{min-height:140px; resize:vertical}
small.help{color:#777}

aside .info{
  background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}

/* Footer */
footer{
  background:#0f0f10; color:#cfcfd2; padding:40px 0 60px;
}
footer .columns{display:grid; gap:24px; grid-template-columns: 1.5fr 1fr 1fr}
footer h4{margin-top:0; color:#fff}
footer a{color:#e8e8ea}

.floating-call{
  position:fixed; right:16px; bottom:16px; z-index:999;
  background:var(--brand-red); color:#fff; padding:12px 16px; border-radius:999px;
  box-shadow:var(--shadow); font-weight:800;
}

/* Responsive */
@media (max-width: 1024px){
  .grid.cols-3{grid-template-columns:1fr 1fr}
  .grid.cols-4{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
}
@media (max-width: 780px){
  .nav ul{display:none}
  .mobile-toggle{display:block}
  .hero{padding:72px 0 64px}
  .hero .cta .btn{width:100%}
  .projects .item img{height:200px}
  footer .columns{grid-template-columns: 1fr}
}

/* ==== SPACING FIX (meer lucht) ==== */

/* Algemene tekst & paragrafen */
body{ line-height: 1.7; }
.content p{ margin: 0 0 16px; }

/* Container rond de hele content */
.content{ padding: 56px 0 96px; }

/* Snelle chips onder de hero */
.quicklinks{ margin-top: 14px; gap: 12px; }

/* Section-headers */
.service{ padding: 44px 0; }              /* was 28px */
.service + .service{ margin-top: 12px; }  /* extra scheiding */
.service-head{ margin-bottom: 14px; }
.service h2{ margin: 0 0 10px; }

/* Grids & kaarten */
.grid{ gap: 28px; }                        /* was 20px */
.cards .card h3{ margin-top: 0; }
.card{ padding: 22px; }                     /* iets ruimer */
.card + .card{ margin-top: 10px; }          /* voor stacked cards */

.list{ margin: 0; padding-left: 1.25rem; }
.list li{ margin: 6px 0; }                  /* bullet spacing */

/* Notities & CTA’s */
.note{ margin-top: 16px; }
.cta{ margin-top: 18px; gap: 14px; }

/* Slot-CTA meer adem */
.section-cta{ padding: 56px 0; }
.section-cta .cta-wrap{ row-gap: 10px; }

/* Mobiel finetune */
@media (max-width: 780px){
  .content{ padding: 40px 0 72px; }
  .service{ padding: 36px 0; }
  .grid{ gap: 20px; }
  .card{ padding: 18px; }
  .list li{ margin: 5px 0; }
  .cta{ gap: 10px; }
}

.service-links a {
  display: inline-block;
  background: #e53935;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  margin: 5px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.25s, transform 0.15s;
}

.service-links a:hover {
  background: #d32f2f;
  transform: translateY(-2px);
}