/* ============================================================
   Bouwwerken VK, ontwerpvoorstel
   Kleuren komen uit het eigen logo (rood CC0000 met zwart) en uit
   de eigen foto's: het leisteengrijs van de zinken goten en het
   warme zand van de gevels. Afstanden zijn veelvouden van 8px.
   Opbouw: mobiel eerst, daarna verbreedt de layout op 640px,
   960px en 1200px. Er staan geen vaste pixelbreedtes op de
   hoofdlayout.
   ============================================================ */

:root{
  --rood:#CC0000;
  --rood-donker:#A30000;
  --rood-zacht:#FCECEC;
  --inkt:#15171A;
  --leisteen:#2C343B;
  --tekst:#3A4048;
  --grijs:#616973;
  --lijn:#E3E0DB;
  --zand:#F7F5F2;
  --wit:#FFFFFF;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:80px; --s8:96px;

  --kop:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --lopend:'Inter', 'Helvetica Neue', Arial, sans-serif;

  --rand:20px;                 /* zijmarge van de inhoud op mobiel */
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:var(--lopend);
  font-size:16px;
  line-height:1.65;
  color:var(--tekst);
  background:var(--wit);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--kop); color:var(--inkt); margin:0; line-height:1.18; letter-spacing:-0.01em}
h1{font-size:clamp(30px, 5vw, 56px); font-weight:700; line-height:1.1}
h2{font-size:clamp(24px, 3.2vw, 38px); font-weight:700}
h3{font-size:clamp(18px, 1.5vw, 22px); font-weight:600}
h4{font-size:16px; font-weight:600}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:var(--rood-donker)}
img{display:block; max-width:100%}
strong{font-weight:600}

:focus-visible{outline:3px solid var(--rood); outline-offset:2px}
[hidden]{display:none !important}

.overslaan{
  position:absolute; left:var(--rand); top:-200px; z-index:60;
  background:var(--wit); color:var(--inkt); font-weight:600;
  padding:12px 18px; border:2px solid var(--rood); border-radius:3px; text-decoration:none;
}
.overslaan:focus{top:12px}

.verborgen{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.wrap{width:100%; max-width:1240px; margin:0 auto; padding:0 var(--rand)}
.lood{max-width:62ch}

.oogje{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rood); margin-bottom:12px;
}
.oogje-licht{color:#FF8080}

/* ---------- Knoppen ---------- */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 22px; border-radius:3px; text-align:center;
  font-family:var(--lopend); font-size:16px; font-weight:600; text-decoration:none;
  border:2px solid transparent; cursor:pointer;
}
.knop-primair{background:var(--rood); color:var(--wit); border-color:var(--rood)}
.knop-primair:hover{background:var(--rood-donker); border-color:var(--rood-donker)}
.knop-lijn{background:transparent; color:var(--wit); border-color:rgba(255,255,255,.6)}
.knop-lijn:hover{border-color:var(--wit); background:rgba(255,255,255,.12)}
.knop-donker{background:var(--inkt); color:var(--wit); border-color:var(--inkt)}
.knop-donker:hover{background:#000}

.tekstlink{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-weight:600; font-size:16px; color:var(--rood-donker); text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--rood-zacht);
}
.tekstlink:hover{box-shadow:inset 0 -2px 0 var(--rood)}

.acties{display:grid; gap:12px}
.acties .knop{width:100%}

/* ---------- Topbalk ---------- */
.topbalk{background:var(--leisteen); color:#D6DBE1; font-size:12px; text-align:center; padding:8px 0}
.topbalk strong{color:var(--wit)}
.topbalk a{color:var(--wit)}
.topbalk-extra{display:none}

/* ---------- Kop ---------- */
.kop{position:sticky; top:0; z-index:40; background:var(--wit); border-bottom:1px solid var(--lijn)}
.kop-rij{display:flex; align-items:center; gap:10px; min-height:72px; padding:8px var(--rand)}
.merk{flex:none; display:inline-flex; align-items:center; text-decoration:none}
.merk img{width:104px; height:auto}

/* Het telefoonnummer staat op elk formaat in de kop, dus ook op een
   telefoon zonder dat de bezoeker moet scrollen. */
.kop-acties{margin-left:auto; display:flex; align-items:center; gap:10px; flex:none}
.beltegel{
  display:inline-flex; align-items:center; gap:8px;
  min-height:48px; padding:0 14px; border-radius:3px;
  background:var(--rood); color:var(--wit); text-decoration:none;
  font-family:var(--kop); font-weight:700; font-size:16px; white-space:nowrap;
}
.beltegel:hover{background:var(--rood-donker)}
.beltegel svg{width:18px; height:18px; fill:currentColor; flex:none}
.beltegel span{display:none}

.kop-offerte{display:none}

/* Tweede regel in de kop, alleen op smalle schermen. Samen met de rode
   belknop hierboven staan bellen en een offerte aanvragen zo altijd
   binnen bereik, zonder dat een zwevende balk over de inhoud valt. */
.kop-offerte-mobiel{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  min-height:50px; padding:6px var(--rand);
  background:var(--inkt); color:var(--wit); text-decoration:none;
  font-size:16px; font-weight:600; text-align:center;
}
.kop-offerte-mobiel span{font-size:13px; font-weight:400; color:#A9B0B8}
.kop-offerte-mobiel:hover{background:#000}

/* Uitklapmenu zonder JavaScript. */
.menu{flex:none}
.menu summary{
  list-style:none; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:48px; height:48px; border:1px solid var(--lijn); border-radius:3px;
}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{display:block; width:20px; height:2px; background:var(--inkt)}
.menu[open] summary{background:var(--zand)}
.menu-lijst{
  position:absolute; left:0; right:0; top:100%;
  background:var(--wit); border-top:1px solid var(--lijn);
  box-shadow:0 18px 34px rgba(21,23,26,.16);
  padding:var(--s2) var(--rand) var(--s3);
  max-height:calc(100vh - 180px); overflow-y:auto;
}
.menu-lijst a{
  display:flex; align-items:center; min-height:48px;
  font-size:17px; font-weight:600; color:var(--inkt); text-decoration:none;
  border-bottom:1px solid var(--lijn);
}
.menu-lijst .sub a{font-weight:400; font-size:15px; color:var(--grijs); padding-left:16px; min-height:44px}
.menu-lijst a[aria-current="page"]{color:var(--rood-donker)}

.hoofdnav{display:none}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--inkt)}
.hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 60%}
.hero-waas{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,23,26,.86) 0%, rgba(21,23,26,.78) 55%, rgba(21,23,26,.92) 100%);
}
.hero .wrap{position:relative}
.hero-tekst{padding:var(--s4) 0 var(--s5); color:#E7EAEE}
.hero h1{color:var(--wit); margin-bottom:var(--s2)}
.hero-tekst > p{font-size:17px; margin-bottom:var(--s4); max-width:56ch}

/* Compacte paginakop voor de binnenpagina's. */
.paginakop{background:var(--leisteen); color:#D6DBE1; position:relative; overflow:hidden}
.paginakop > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.paginakop .waas{position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,23,26,.88), rgba(21,23,26,.80))}
.paginakop .wrap{position:relative; padding-top:var(--s5); padding-bottom:var(--s5)}
.paginakop h1{color:var(--wit); margin-bottom:var(--s2)}
.paginakop p{max-width:62ch; font-size:17px}
.paginakop .acties{margin-top:var(--s4)}
.kruimels{font-size:13px; color:#A9B6C2; margin-bottom:var(--s2)}
.kruimels a{color:#D6DBE1; text-decoration:none}
.kruimels a:hover{color:var(--wit)}

/* ---------- Troeven ---------- */
.troeven{background:var(--zand); border-bottom:1px solid var(--lijn)}
.troeven li{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--lijn); font-size:15px}
.troeven li:last-child{border-bottom:0}
.troeven b{font-family:var(--kop); color:var(--inkt); flex:none; width:120px; font-size:15px}
.troeven span{color:var(--grijs); line-height:1.45}

/* ---------- Secties ---------- */
section{padding:clamp(48px, 7vw, 96px) 0}
.zand{background:var(--zand)}
.donker{background:var(--leisteen); color:#D6DBE1}
.donker h2,.donker h3,.donker h4{color:var(--wit)}
.donker .sectiekop p{color:#B9C2CB}

.sectiekop{margin-bottom:var(--s4)}
.sectiekop p{margin-top:12px; color:var(--grijs); font-size:17px}

/* ---------- Werkdomeinen ---------- */
.domeinen{display:grid; gap:var(--s3)}
.domein{background:var(--wit); border:1px solid var(--lijn); border-top:4px solid var(--rood); padding:var(--s4) var(--s3) var(--s3)}
.domein h3{margin-bottom:12px}
.domein > p{font-size:15px; margin-bottom:var(--s2)}
.domein ul{margin-bottom:var(--s2)}
.domein ul li{font-size:15px; color:var(--grijs); padding:8px 0 8px 20px; position:relative; border-bottom:1px solid var(--lijn)}
.domein ul li::before{content:""; position:absolute; left:0; top:18px; width:8px; height:2px; background:var(--rood)}

/* ---------- Strook met beeld en tekst ---------- */
.strook{display:grid; gap:var(--s3)}
.strook-beeld{margin:0}
.strook-beeld img{width:100%; height:220px; object-fit:cover; border-radius:4px}
.strook-beeld figcaption{margin-top:10px; font-size:13px; color:var(--grijs)}
.donker .strook-beeld figcaption{color:#96A2AF}
.strook h2{margin-bottom:var(--s2)}
.strook-tekst > p{margin-bottom:var(--s3)}
.strook-tekst > p:last-of-type{margin-bottom:var(--s4)}

.dienstenlijst{display:grid; gap:var(--s2); margin-bottom:var(--s4)}
.dienstenlijst li{border-top:1px solid var(--lijn); padding-top:10px}
.dienstenlijst strong{display:block; font-family:var(--kop); font-size:16px; color:var(--inkt)}
.dienstenlijst span{font-size:15px; color:var(--grijs); line-height:1.5}
.donker .dienstenlijst li{border-top-color:rgba(255,255,255,.16)}
.donker .dienstenlijst strong{color:var(--wit)}
.donker .dienstenlijst span{color:#A8B3BE}

.puntlijst{margin-bottom:var(--s4)}
.puntlijst li{position:relative; padding:12px 0 12px 26px; border-bottom:1px solid var(--lijn); font-size:16px}
.puntlijst li::before{content:""; position:absolute; left:0; top:21px; width:12px; height:2px; background:var(--rood)}
.donker .puntlijst li{border-bottom-color:rgba(255,255,255,.14)}

/* ---------- Dienstenblokken op de dienstenpagina's ---------- */
.blokken{display:grid; gap:var(--s3)}
.blok{background:var(--wit); border:1px solid var(--lijn); padding:var(--s3); scroll-margin-top:120px}
.zand .blok{background:var(--wit)}
.blok h3{margin-bottom:10px}
.blok p{font-size:15px; color:var(--tekst)}
.blok p + p{margin-top:10px}
.blok .kenmerk{margin-top:12px; font-size:14px; color:var(--grijs)}

/* ---------- Realisaties ---------- */
.realisaties{display:grid; gap:var(--s3)}
.realisatie{background:var(--wit); border:1px solid var(--lijn); display:flex; flex-direction:column}
.zand .realisatie{background:var(--wit)}
.realisatie img{width:100%; height:210px; object-fit:cover}
.realisatie div{padding:var(--s3)}
.realisatie span{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rood-donker); background:var(--rood-zacht); padding:4px 10px; border-radius:2px; margin-bottom:10px;
}
.realisatie h3{font-size:18px; margin-bottom:6px}
.realisatie p{font-size:15px; color:var(--grijs)}
.slotregel{margin-top:var(--s4)}
.slotregel p{color:var(--grijs); font-size:15px; margin-bottom:var(--s3); max-width:56ch}

/* ---------- Werkwijze ---------- */
.stappen{position:relative; padding-left:56px}
.stappen::before{content:""; position:absolute; left:18px; top:10px; bottom:40px; width:2px; background:var(--lijn)}
.stap{position:relative; padding-bottom:var(--s3)}
.stap:last-child{padding-bottom:0}
.stap b{
  position:absolute; left:-56px; top:0; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--rood); color:var(--wit);
  font-family:var(--kop); font-size:16px;
}
.stap h3{font-size:18px; margin-bottom:4px}
.stap p{font-size:15px; color:var(--grijs); line-height:1.55}

/* ---------- Vragen ---------- */
.vragen details{border-bottom:1px solid var(--lijn)}
.vragen summary{
  cursor:pointer; list-style:none; padding:18px 0; min-height:56px;
  font-family:var(--kop); font-size:17px; font-weight:600; color:var(--inkt);
  display:flex; justify-content:space-between; align-items:center; gap:var(--s2);
}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+"; font-size:24px; color:var(--rood); font-weight:600; line-height:1}
.vragen details[open] summary::after{content:"\2013"}
.vragen details p{padding:0 0 20px; color:var(--grijs); font-size:15px; max-width:66ch}

/* ---------- Offerteblok ---------- */
.offerteblok{background:var(--inkt); color:#C3C9D0}
.offerteblok h2{color:var(--wit); margin-bottom:var(--s2)}
.offerteblok p{max-width:56ch; margin-bottom:var(--s4)}
.offerteblok .acties{max-width:420px}

/* ---------- Formulier en contact ---------- */
.contactraster{display:grid; gap:var(--s3); align-items:start}
.formulier{background:var(--wit); border:1px solid var(--lijn); padding:var(--s3); border-radius:4px}
.veldrij{display:grid; gap:var(--s2)}
.veld{display:flex; flex-direction:column; gap:6px; margin-bottom:var(--s2)}
.veldrij .veld{margin-bottom:0}
.veldrij + .veld, .veldrij + .veldrij{margin-top:var(--s2)}
label{font-size:14px; font-weight:600; color:var(--inkt)}
input[type=text],input[type=tel],input[type=email],select,textarea{
  font-family:var(--lopend); font-size:16px; color:var(--tekst);
  padding:14px; border:1px solid #CFCBC5; border-radius:3px; background:var(--wit); width:100%;
}
textarea{min-height:120px; resize:vertical}
input[type=file]{font-family:var(--lopend); font-size:14px; padding:12px 0}
.hint{font-size:13px; color:var(--grijs)}
.akkoord{display:flex; gap:12px; align-items:flex-start; margin:var(--s2) 0 var(--s3)}
.akkoord label{font-weight:400; font-size:14px; color:var(--grijs); line-height:1.5}
.akkoord input{margin-top:3px; width:20px; height:20px; flex:none}
.formulier .knop{width:100%}
.formulier .naast{margin-top:var(--s2); text-align:center; font-size:15px; color:var(--grijs)}
.formulier .naast a{font-weight:600; color:var(--rood-donker); text-decoration:none}
.demoregel{
  margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--lijn);
  font-size:13px; color:var(--grijs); text-align:center;
}

.bedankt{
  background:var(--wit); border:1px solid var(--lijn); border-top:4px solid var(--rood);
  padding:var(--s4) var(--s3); border-radius:4px;
}
.bedankt h3{margin-bottom:12px}
.bedankt p{font-size:16px; margin-bottom:var(--s2)}
.bedankt .knop{margin-top:var(--s1)}

.contactkaart{background:var(--leisteen); color:#D6DBE1; padding:var(--s3); border-radius:4px}
.contactkaart h2,.contactkaart h3{color:var(--wit); margin-bottom:12px}
.contactkaart > p{font-size:15px}
.contactkaart dl{margin:0}
.contactkaart dt{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#9DA9B5; margin-top:var(--s3)}
.contactkaart dd{margin:4px 0 0; font-size:16px; color:var(--wit)}
.contactkaart dd a{color:var(--wit); text-decoration:none}
.contactkaart .groot{font-family:var(--kop); font-size:26px; font-weight:700; line-height:1.2}

/* Eenvoudig kaartvlak in de huisstijl. In de definitieve site komt hier
   een echte kaart met de ligging. */
.kaartvlak{
  margin-top:var(--s3); height:170px; border-radius:4px; position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 30px),
    linear-gradient(135deg,#3A444E,#232A30);
}
.kaartvlak .weg{position:absolute; left:-10%; right:-10%; top:52%; height:12px; background:rgba(255,255,255,.14); transform:rotate(-7deg)}
.kaartvlak .speld{position:absolute; left:44%; top:32%; width:18px; height:18px; border-radius:50% 50% 50% 0; background:var(--rood); transform:rotate(-45deg); box-shadow:0 0 0 6px rgba(204,0,0,.22)}
.kaartvlak p{position:absolute; left:16px; bottom:14px; font-size:13px; color:#C9D2DB}

/* ---------- Voet ---------- */
footer{background:var(--inkt); color:#A9B0B8; padding:var(--s5) 0 0; font-size:15px}
.voetraster{display:grid; gap:var(--s4)}
.voetmerk{display:inline-block; background:var(--wit); padding:12px 16px; border-radius:4px; margin-bottom:var(--s2)}
.voetmerk img{width:150px; height:auto}
footer h2{color:var(--wit); font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; font-weight:600}
footer li{padding:2px 0}
footer a{color:#A9B0B8; text-decoration:none}
footer a:hover{color:var(--wit)}
footer nav a{display:inline-flex; align-items:center; min-height:40px}
footer address{font-style:normal; line-height:1.9}
footer .telefoon{font-family:var(--kop); font-size:24px; font-weight:700; color:var(--wit); text-decoration:none; display:inline-block; margin-bottom:6px}
.voetslot{border-top:1px solid rgba(255,255,255,.12); margin-top:var(--s4); padding:var(--s3) 0; font-size:13px}
.voetslot p + p{margin-top:8px}

/* ---------- Voorstel-strook ---------- */
.voorstel{background:#0B0C0D; color:#8C949C; font-size:12px; text-align:center; padding:12px var(--rand); letter-spacing:.02em}

/* ============================================================
   Vanaf 640px: twee kolommen waar dat leesbaar blijft
   ============================================================ */
@media (min-width:640px){
  :root{--rand:32px}
  .domeinen,.realisaties,.blokken{grid-template-columns:repeat(2,1fr)}
  .veldrij{grid-template-columns:1fr 1fr}
  .acties{grid-auto-flow:column; grid-auto-columns:max-content; align-items:center}
  .acties .knop{width:auto}
  .strook-beeld img{height:300px}
  .troeven ul{display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s4)}
  .troeven b{width:136px}
  .voetraster{grid-template-columns:1fr 1fr}
  .merk img{width:120px}
  .beltegel span{display:inline}
  .beltegel{font-size:18px; padding:0 18px}
  .hero-tekst{padding:var(--s6) 0}
}

/* ============================================================
   Vanaf 960px: de desktoplayout
   ============================================================ */
@media (min-width:960px){
  body{font-size:17px}
  :root{--rand:32px}

  .topbalk{font-size:14px; text-align:left; padding:0}
  .topbalk .wrap{display:flex; align-items:center; justify-content:space-between; min-height:44px; gap:var(--s3)}
  .topbalk-extra{display:flex; align-items:center; gap:var(--s4)}

  .kop-rij{min-height:104px; gap:var(--s3)}
  .merk img{width:150px}
  .menu{display:none}

  .hoofdnav{display:block; margin-left:auto}
  .hoofdnav > ul{display:flex; align-items:center; gap:18px}
  .hoofdnav > ul > li{position:relative}
  .hoofdnav a{
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
    font-size:15px; font-weight:600; color:var(--inkt); text-decoration:none;
    padding:10px 0; border-bottom:3px solid transparent;
  }
  .hoofdnav a:hover{border-bottom-color:var(--rood)}
  .hoofdnav a[aria-current="page"]{border-bottom-color:var(--rood)}
  .caret{width:7px; height:7px; border-right:2px solid var(--grijs); border-bottom:2px solid var(--grijs); transform:rotate(45deg) translateY(-2px)}

  .heeft-uitklap .uitklap{
    display:none; position:absolute; top:100%; left:-20px; z-index:5;
    min-width:280px; padding:var(--s2) 0; background:var(--wit);
    border:1px solid var(--lijn); border-top:3px solid var(--rood);
    box-shadow:0 18px 40px rgba(21,23,26,.14);
  }
  .heeft-uitklap:hover .uitklap,
  .heeft-uitklap:focus-within .uitklap{display:block}
  .uitklap li a{display:block; padding:8px 20px; font-weight:500; border-bottom:0}
  .uitklap li a:hover{background:var(--zand); color:var(--rood-donker)}

  .beltegel{
    background:transparent; color:var(--rood); padding:0;
    flex-direction:column; align-items:flex-end; gap:0; text-align:right;
  }
  .beltegel:hover{background:transparent; color:var(--rood-donker)}
  .beltegel svg{display:none}
  .beltegel span{display:block; font-family:var(--lopend); font-size:12px; color:var(--grijs); font-weight:500; line-height:1.2}
  .beltegel strong{display:block; font-size:22px; line-height:1.25}
  .kop-offerte{display:inline-flex; min-height:52px}
  .kop-acties{gap:var(--s3); margin-left:var(--s3)}

  .hero{min-height:600px; display:flex; align-items:center}
  .hero > img{object-position:center 62%}
  .hero-waas{background:linear-gradient(90deg, rgba(21,23,26,.92) 0%, rgba(21,23,26,.80) 42%, rgba(21,23,26,.20) 100%)}
  .hero .wrap{width:100%}
  .hero-tekst{max-width:640px; padding:var(--s7) 0}
  .hero-tekst > p{font-size:19px; margin-bottom:var(--s5)}

  .paginakop .wrap{padding-top:var(--s7); padding-bottom:var(--s7)}
  .paginakop p{font-size:19px}

  .troeven{border-bottom:0; background:transparent; position:relative; z-index:2; margin-top:-56px}
  .troeven ul{
    grid-template-columns:repeat(4,1fr); column-gap:0;
    background:var(--wit); border:1px solid var(--lijn);
    box-shadow:0 20px 50px rgba(21,23,26,.10);
  }
  .troeven li{display:block; padding:var(--s4) var(--s3); border-bottom:0; border-right:1px solid var(--lijn)}
  .troeven li:last-child{border-right:0}
  .troeven b{display:block; width:auto; font-size:17px; margin-bottom:4px}

  .sectiekop{margin-bottom:var(--s6)}
  .domeinen,.realisaties{grid-template-columns:repeat(3,1fr); gap:var(--s4)}
  .blokken{grid-template-columns:repeat(3,1fr); gap:var(--s4)}
  .blok{padding:var(--s4)}

  .strook{grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center}
  .strook-top{align-items:start}
  .strook-beeld img{height:460px}
  .beeld-rechts .strook-beeld{order:2}
  .dienstenlijst{grid-template-columns:1fr 1fr; gap:var(--s3) var(--s4)}
  .realisatie img{height:250px}

  .stappen{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s3); padding-left:0}
  .stappen::before{display:none}
  .stap{padding-top:var(--s4); padding-bottom:0}
  .stap::before{content:""; position:absolute; top:18px; left:0; right:0; height:2px; background:var(--lijn)}
  .stap b{position:relative; left:auto; top:auto; margin:-38px 0 var(--s3)}

  .slotregel{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); margin-top:var(--s5)}
  .slotregel p{margin-bottom:0; font-size:16px}

  .contactraster{grid-template-columns:1.1fr .9fr; gap:var(--s6)}
  .formulier{padding:var(--s5)}
  .contactkaart{padding:var(--s5)}
  .contactkaart .groot{font-size:30px}
  .kaartvlak{height:190px}

  .offerteblok .acties{max-width:none}

  footer{padding-top:var(--s7)}
  .voetraster{grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:var(--s5)}
  .voetslot{display:flex; justify-content:space-between; gap:var(--s4); font-size:14px}
  .voetslot p + p{margin-top:0}

  .kop-offerte-mobiel{display:none}
}

/* ============================================================
   Vanaf 1200px: iets meer lucht
   ============================================================ */
@media (min-width:1200px){
  :root{--rand:40px}
  .hero{min-height:620px}
}