/* =========================================================================
   Schrijnwerkerij Frederic Van de Voorde
   Eén responsieve stylesheet, opgebouwd uit de twee artboards van de
   ontwerpfunnel (desktop 1440 en mobiel 390). Mobiel is het vertrekpunt,
   de bredere schermen komen erbij via media queries.

   Kleuren komen uit het logo: rood #8B0303 uit het woordmerk,
   inkt #2A2421 uit de ondertitel.
   Koppen in Oswald, omdat dat aansluit bij het vette smalle woordmerk.
   Lopende tekst in Source Sans 3.
   Afstanden zijn veelvouden van 8px, via --s1 tot --s9.

   Breekpunten: 560px (twee kolommen), 900px (bovenbalk en drie kolommen),
   1200px (volledige desktopnavigatie).
   ========================================================================= */

:root{
  /* kleur */
  --rood:#8B0303;
  --rood-donker:#6B0202;
  --inkt:#2A2421;
  --inkt-zacht:#453D38;
  --grijs:#5C544D;
  --lijn:#E3DBD2;
  --lijn-donker:#CFC5B9;
  --zand:#F7F3EE;
  --zand-diep:#EFE8E0;
  --wit:#FFFFFF;
  --hout:#C08A52;          /* accent, uitsluitend op donkere vlakken */

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

  /* structuur */
  --kader:1200px;
  --lees:66ch;
  --rand:20px;             /* zijmarge, groeit mee met het scherm */
  --radius:4px;
  --raakdoel:52px;         /* ruim boven de 44px die een vinger nodig heeft */
  --kopbalk:66px;          /* hoogte van de plakkende header */
}

*{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* De header plakt bovenaan, dus ankers moeten er net onder uitkomen. */
  scroll-padding-top:calc(var(--kopbalk) + var(--s2));
}

body{
  margin:0;
  font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  font-size:16.5px;
  line-height:1.6;
  color:var(--inkt);
  background:var(--wit);
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:Oswald,"Arial Narrow",system-ui,sans-serif;
  font-weight:600;
  line-height:1.14;
  margin:0;
  color:var(--inkt);
  letter-spacing:.005em;
}
/* Vloeiende koptrappen tussen de twee artboards: 34px op 390, 52px op 1440. */
h1{font-size:clamp(2.125rem,1.35rem + 3.3vw,3.25rem);line-height:1.12}
h2{font-size:clamp(1.6875rem,1.25rem + 1.9vw,2.375rem)}
h3{font-size:clamp(1.25rem,1.19rem + .25vw,1.375rem);line-height:1.25}

p{margin:0 0 var(--s2)}
p:last-child{margin-bottom:0}
a{color:var(--rood);text-decoration:none}
a:hover{text-decoration:underline}
img{display:block;max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}

/* Zichtbare toetsenbordfocus, want die is voor de helft van de bezoekers
   het enige navigatiemiddel. */
:focus-visible{outline:3px solid var(--rood);outline-offset:2px}
.spoed :focus-visible,.voet :focus-visible,.gegevens :focus-visible{
  outline-color:var(--hout)
}

/* ---- raamwerk ---------------------------------------------------------- */
.kader{
  width:100%;
  max-width:var(--kader);
  margin:0 auto;
  padding-left:var(--rand);
  padding-right:var(--rand);
}
.lees{max-width:var(--lees)}
.sectie{padding:var(--s6) 0}
.sectie--zand{background:var(--zand)}
.sectie--smal{padding:var(--s5) 0}

/* Overslaan naar de inhoud, voor wie met het toetsenbord navigeert. */
.overslaan{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--rood);color:var(--wit);padding:12px var(--s3);
  font-family:Oswald,sans-serif;letter-spacing:.05em;text-transform:uppercase;
}
.overslaan:focus{left:0;text-decoration:none}

/* ---- strook van het ontwerpvoorstel ------------------------------------ */
/* Discreet en niet plakkend, zodat het de site zelf niet in de weg staat. */
.voorstel{
  background:var(--zand-diep);
  color:var(--grijs);
  border-bottom:1px solid var(--lijn-donker);
  font-size:13.5px;
  line-height:1.4;
  text-align:center;
  padding:9px var(--rand);
  letter-spacing:.01em;
}

/* ---- merkelement: het ronde zaagblad van de bestaande site ------------- */
.zaagblad{display:block;margin:var(--s3) 0 0;color:var(--rood)}

.kop{max-width:var(--lees)}
.kop--midden{margin-left:auto;margin-right:auto;text-align:center}
.kop--midden .zaagblad{margin-left:auto;margin-right:auto}
.opschrift{
  font-family:Oswald,sans-serif;font-weight:500;font-size:13px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--rood);
  margin:0 0 12px;
}
.inleiding{font-size:17px;color:var(--grijs);margin-top:var(--s3)}

/* ---- knoppen ----------------------------------------------------------- */
/* Op mobiel over de volle breedte onder elkaar, vanaf 560px naast elkaar
   met hun eigen breedte. */
.knop{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:var(--raakdoel);padding:0 var(--s3);
  font-family:Oswald,sans-serif;font-weight:600;font-size:16px;
  letter-spacing:.05em;text-transform:uppercase;text-align:center;
  border:2px solid transparent;border-radius:var(--radius);
  cursor:pointer;text-decoration:none;
}
.knop:hover{text-decoration:none}
.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--rand{background:var(--wit);color:var(--inkt);border-color:var(--lijn-donker)}
.knop--rand:hover{border-color:var(--inkt)}
.knop--licht{background:transparent;color:var(--wit);border-color:rgba(255,255,255,.5)}
.knop--licht:hover{border-color:var(--wit);background:rgba(255,255,255,.08)}
.knop--klein{min-height:44px;padding:0 var(--s3);font-size:15px}
.pijl{font-family:"Source Sans 3",sans-serif;font-weight:400}

.tekstlink{
  font-family:Oswald,sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--rood);
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
}

/* ---- balk boven de header ---------------------------------------------- */
/* Verschijnt pas vanaf 900px. Daaronder staan dezelfde gegevens in het
   uitklapmenu en in de voettekst. */
.bovenbalk{display:none}

/* ---- header ------------------------------------------------------------ */
/* Plakt bovenaan, zodat het nummer en de offerteknop altijd in beeld
   blijven. Onder 1200px is de navigatie een uitklapmenu. */
.kop-balk{
  position:sticky;top:0;z-index:30;
  background:var(--wit);border-bottom:1px solid var(--lijn);
}
.kop-rij{
  display:flex;align-items:center;gap:var(--s1);
  max-width:var(--kader);margin:0 auto;
  min-height:var(--kopbalk);
  padding-left:var(--rand);padding-right:calc(var(--raakdoel) + var(--rand) + 8px);
  position:relative;
}
.merk{display:block;flex:0 0 auto}
.merk img{width:126px}
.belknop{
  margin-left:auto;display:flex;align-items:center;gap:6px;
  min-height:44px;padding:0 12px;border-radius:var(--radius);
  background:var(--rood);color:var(--wit);white-space:nowrap;
  font-family:Oswald,sans-serif;font-weight:600;font-size:15px;letter-spacing:.02em;
}
.belknop:hover{background:var(--rood-donker);color:var(--wit);text-decoration:none}
.belknop svg{flex:0 0 auto}

/* Uitklapmenu zonder javascript, met het native details-element. */
.menu{position:static}
.menu > summary{
  position:absolute;top:7px;right:var(--rand);
  width:var(--raakdoel);height:var(--raakdoel);
  border:1px solid var(--lijn-donker);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  color:var(--inkt);background:var(--wit);cursor:pointer;list-style:none;
}
.menu > summary::-webkit-details-marker{display:none}
.menu-inhoud{
  padding:var(--s2) var(--rand) var(--s4);
  background:var(--zand);border-top:1px solid var(--lijn);
}
.menu-inhoud a{
  display:flex;align-items:center;min-height:var(--raakdoel);
  border-bottom:1px solid var(--lijn-donker);color:var(--inkt);
  font-family:Oswald,sans-serif;font-weight:500;font-size:17px;
  letter-spacing:.04em;text-transform:uppercase;
}
.menu-inhoud a:hover{color:var(--rood);text-decoration:none}
.menu-inhoud a[aria-current="page"]{color:var(--rood)}
.menu-inhoud .knop{margin-top:var(--s3);border-bottom:none}
.menu-gegevens{
  margin-top:var(--s3);font-size:15.5px;color:var(--grijs);line-height:1.7;
}
.menu-gegevens a{
  display:inline;min-height:0;border:0;text-transform:none;
  font-family:inherit;font-size:inherit;letter-spacing:normal;color:var(--rood);
}

/* De volledige navigatiebalk staat er pas vanaf 1200px. */
.hoofdnav{display:none}
.kop-acties{display:none}

/* ---- hero -------------------------------------------------------------- */
.hero{background:var(--zand);border-bottom:1px solid var(--lijn)}
.hero-tekst{padding-top:var(--s5);padding-bottom:var(--s4)}
.hero h1{margin-bottom:var(--s3)}
.hero p.leidend{font-size:17px;color:var(--inkt-zacht)}
.hero-acties{display:flex;flex-direction:column;gap:12px;margin-top:var(--s4)}
.belofte{
  display:flex;gap:12px;margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid var(--lijn-donker);
  font-size:15.5px;color:var(--grijs);
}
.belofte svg{flex:0 0 auto;margin-top:3px;color:var(--rood)}
/* Het beeld loopt op mobiel schermbreed onder de tekst door, dus buiten de
   zijmarge van het kader. Vanaf 560px blijft het binnen het kader. */
.hero-beeld{
  margin-top:var(--s5);position:relative;
  margin-left:calc(var(--rand) * -1);margin-right:calc(var(--rand) * -1);
}
.hero-beeld img{width:100%;height:250px;object-fit:cover}
.hero-stempel{
  background:var(--rood);color:var(--wit);margin:0;
  padding:var(--s3) var(--rand);
  display:flex;align-items:center;gap:var(--s3);
}
.hero-stempel .cijfer{
  font-family:Oswald,sans-serif;font-weight:700;font-size:34px;
  line-height:1;flex:0 0 auto;
}
.hero-stempel .bij{font-size:15px;line-height:1.4}

/* Smallere variant voor de binnenpagina's: alleen tekst, geen beeld. */
.hero--pagina{padding:var(--s5) 0}
.hero--pagina .hero-tekst{padding:0}
.hero--pagina .kruimels{margin-bottom:var(--s3)}

.kruimels{font-size:14.5px;color:var(--grijs)}
.kruimels ol{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kruimels li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--lijn-donker)}
.kruimels a{color:var(--grijs);text-decoration:underline}
.kruimels a:hover{color:var(--rood)}

/* ---- feitenbalk -------------------------------------------------------- */
.feiten{border-bottom:1px solid var(--lijn)}
.feiten dl{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3) var(--s2);
  padding-top:var(--s4);padding-bottom:var(--s4);margin:0;
}
.feit dt{font-family:Oswald,sans-serif;font-weight:600;font-size:17px;margin-bottom:2px}
.feit dd{margin:0;font-size:15px;color:var(--grijs)}

/* ---- diensten ---------------------------------------------------------- */
.diensten{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s5)}
.dienst{
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;
}
.dienst img{width:100%;height:190px;object-fit:cover}
.dienst-tekst{padding:var(--s3);display:flex;flex-direction:column;flex:1}
.dienst h3{margin-bottom:12px}
.dienst p{color:var(--grijs);font-size:16px}
.dienst-lijst{margin:var(--s3) 0 var(--s2);border-top:1px solid var(--lijn)}
.dienst-lijst li{
  padding:10px 0 10px 24px;border-bottom:1px solid var(--lijn);
  font-size:16px;position:relative;
}
.dienst-lijst li::before{
  content:"";position:absolute;left:0;top:17px;
  width:9px;height:9px;background:var(--rood);border-radius:2px;
  transform:rotate(45deg);
}
.dienst .tekstlink{margin-top:auto}

/* ---- onderdelen van een dienstpagina ----------------------------------- */
/* Beeld en tekst wisselen van kant vanaf 900px. */
.onderdeel{
  display:grid;grid-template-columns:1fr;gap:var(--s3);
  padding:var(--s5) 0;border-top:1px solid var(--lijn);
}
.onderdeel:first-of-type{border-top:0;padding-top:var(--s2)}
.onderdeel img{width:100%;height:230px;object-fit:cover;border-radius:var(--radius)}
.onderdeel h3{margin-bottom:12px}
.onderdeel p{color:var(--inkt-zacht);font-size:16.5px}
.onderdeel .details{
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--lijn);
  font-size:16px;color:var(--grijs);
}
.onderdeel .details li{padding:6px 0 6px 22px;position:relative}
.onderdeel .details li::before{
  content:"";position:absolute;left:0;top:14px;width:8px;height:8px;
  background:var(--rood);border-radius:2px;transform:rotate(45deg);
}
.beeldnoot{font-size:13.5px;color:var(--grijs);margin-top:10px;font-style:italic}

/* ---- tekstblokken op een dienstpagina ---------------------------------- */
/* Eén kolom op mobiel, twee vanaf 560px. Elk blok is één onderdeel van het
   aanbod, dat op de bestaande site alleen in een opsomming voorkwam. */
.blokken{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s5)}
.blok{
  background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--radius);padding:var(--s3);
}
.blok h3{margin-bottom:10px}
.blok p{color:var(--grijs);font-size:16px}
.blok .details{margin-top:var(--s2);border-top:1px solid var(--lijn);padding-top:var(--s2)}
.blok .details li{padding:6px 0 6px 22px;position:relative;font-size:16px}
.blok .details li::before{
  content:"";position:absolute;left:0;top:14px;width:8px;height:8px;
  background:var(--rood);border-radius:2px;transform:rotate(45deg);
}

/* ---- sfeerbeelden ------------------------------------------------------ */
/* Twee beelden naast elkaar, met eronder de eerlijke noot dat het om
   illustratie gaat en niet om eigen werk. */
.sfeerbeelden{display:grid;grid-template-columns:1fr;gap:var(--s2);margin-top:var(--s4)}
.sfeerbeelden img{
  width:100%;height:220px;object-fit:cover;border-radius:var(--radius);
}

/* ---- afsluitend offerteblok ------------------------------------------- */
/* Staat onder elke dienstpagina en verwijst met een anker naar het juiste
   type werk in het formulier. */
.cta{background:var(--zand-diep);border-top:1px solid var(--lijn-donker)}
.cta .kader{padding-top:var(--s6);padding-bottom:var(--s6)}
.cta-acties{display:flex;flex-direction:column;gap:12px;margin-top:var(--s4)}

/* ---- spoedbalk dakschade ---------------------------------------------- */
.spoed{background:var(--inkt);color:#EFE9E3}
.spoed .kader{padding-top:var(--s5);padding-bottom:var(--s5)}
.spoed h2{color:var(--wit);font-size:clamp(1.5rem,1.3rem + .9vw,1.75rem)}
.spoed p{color:#CFC6BE;margin-top:12px;font-size:16px;max-width:62ch}
.spoed .knop{margin-top:var(--s3)}

/* ---- realisaties ------------------------------------------------------- */
/* Op mobiel een horizontaal schuivende reeks, vanaf 560px een raster. */
.werk{
  display:flex;gap:var(--s2);margin-top:var(--s5);
  overflow-x:auto;scroll-snap-type:x mandatory;
  margin-left:calc(var(--rand) * -1);margin-right:calc(var(--rand) * -1);
  padding:0 var(--rand) var(--s2);
}
.werk figure{
  margin:0;flex:0 0 300px;scroll-snap-align:start;
  background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--radius);overflow:hidden;
}
.werk img{width:100%;height:200px;object-fit:cover}
.werk figcaption{padding:var(--s3)}
.werk .soort{
  font-family:Oswald,sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rood);
  display:block;margin-bottom:6px;
}
.werk h3{font-size:19px;margin-bottom:6px}
.werk p{font-size:15.5px;color:var(--grijs)}
.werk-voet{margin-top:var(--s3)}

/* Filter op de realisatiepagina. Werkt met gewone knoppen; het script
   zet alleen de zichtbaarheid van de kaarten om. */
.filter{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
.filter button{
  font-family:Oswald,sans-serif;font-weight:500;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;
  min-height:44px;padding:0 18px;cursor:pointer;
  background:var(--wit);color:var(--inkt);
  border:1px solid var(--lijn-donker);border-radius:100px;
}
.filter button:hover{border-color:var(--inkt)}
.filter button[aria-pressed="true"]{
  background:var(--rood);color:var(--wit);border-color:var(--rood);
}
.filter button[disabled]{
  border-style:dashed;color:var(--grijs);cursor:not-allowed;background:transparent;
}
.filter button[disabled]:hover{border-color:var(--lijn-donker)}

/* ---- kaartje op de contactpagina -------------------------------------- */
/* Een echte kaart komt er pas in als die zonder externe trackers geladen kan
   worden. Tot dan staat hier het adres in leesbare vorm. */
.kaart{
  margin-top:var(--s3);background:var(--zand-diep);
  border:1px dashed var(--lijn-donker);border-radius:var(--radius);
  padding:var(--s4) var(--s3);text-align:center;
}
.kaart .zaagblad{margin:0 auto var(--s3);color:var(--lijn-donker)}
.kaart address{font-style:normal;font-size:17px;color:var(--inkt)}
.kaart p{font-size:14px;color:var(--grijs);margin-top:var(--s2)}

/* Het overzicht op de realisatiepagina staat wel meteen in een raster. */
.werk--raster{
  display:grid;grid-template-columns:1fr;gap:var(--s3);
  overflow:visible;margin-left:0;margin-right:0;padding:0;
}
.werk--raster figure{flex:none}
.werk--raster img{height:220px}

/* ---- werkwijze --------------------------------------------------------- */
/* Onder elkaar met een doorlopende lijn, vanaf 1080px vijf kolommen. */
.stappen{margin-top:var(--s5);counter-reset:stap}
.stap{position:relative;padding:0 0 var(--s4) 56px}
.stap::before{
  counter-increment:stap;content:counter(stap);
  position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  background:var(--rood);color:var(--wit);
  font-family:Oswald,sans-serif;font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.stap::after{
  content:"";position:absolute;left:18px;top:44px;bottom:6px;
  width:2px;background:var(--lijn-donker);
}
.stap:last-child{padding-bottom:0}
.stap:last-child::after{display:none}
.stap h3{margin-bottom:6px;padding-top:6px}
.stap p{font-size:16px;color:var(--grijs)}
.stap .verwachting{
  display:block;margin-top:10px;font-size:15px;color:var(--inkt-zacht);
  border-left:3px solid var(--lijn-donker);padding-left:12px;
}

/* ---- over Frederic ----------------------------------------------------- */
.over{display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:start}
.over-tekst p{color:var(--inkt-zacht)}
.gegevens{
  background:var(--inkt);color:#EFE9E3;border-radius:var(--radius);
  padding:var(--s4) var(--s3);
}
.gegevens .zaagblad{margin:0 0 var(--s3);color:var(--hout)}
.gegevens h3{color:var(--wit);margin-bottom:var(--s3)}
.gegevens dl{margin:0}
.gegevens dt{
  font-family:Oswald,sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--hout);
  margin-top:var(--s3);
}
.gegevens dt:first-child{margin-top:0}
.gegevens dd{margin:2px 0 0;font-size:16.5px}
.gegevens a{color:var(--wit);word-break:break-word}
.gegevens address{font-style:normal}

/* Plaatshouder waar nog geen foto van Frederic of het atelier is. */
.geen-beeld{
  background:var(--zand-diep);border:1px dashed var(--lijn-donker);
  border-radius:var(--radius);padding:var(--s5) var(--s3);text-align:center;
  color:var(--grijs);font-size:15.5px;
}
.geen-beeld .zaagblad{margin:0 auto var(--s3);color:var(--lijn-donker)}

/* ---- werkgebied -------------------------------------------------------- */
.gemeenten{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s3)}
.gemeenten li{
  border:1px solid var(--lijn-donker);border-radius:100px;
  padding:9px 16px;font-size:15.5px;background:var(--wit);
}
.gemeenten li.meer{border-style:dashed;color:var(--grijs)}

/* ---- getuigenissen ----------------------------------------------------- */
/* De site heeft vandaag geen enkele getuigenis. Deze blokken tonen de
   plaats en de vorm, met tekst die als voorbeeld gemarkeerd staat, zodat
   er niets aan klanten wordt toegeschreven wat zij niet gezegd hebben. */
.getuigenissen{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s5)}
.getuigenis{
  background:var(--wit);border:1px dashed var(--lijn-donker);
  border-radius:var(--radius);padding:var(--s3);
}
.getuigenis .merkje{
  display:inline-block;font-family:Oswald,sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grijs);background:var(--zand-diep);
  border-radius:100px;padding:4px 12px;margin-bottom:var(--s2);
}
.getuigenis blockquote{margin:0;font-size:17px;color:var(--inkt-zacht)}
.getuigenis figcaption{
  margin-top:var(--s2);padding-top:var(--s2);
  border-top:1px solid var(--lijn);font-size:15px;color:var(--grijs);
}

/* ---- offerte en contact ------------------------------------------------ */
.offerte{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s4)}
.formulier{
  background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--radius);padding:var(--s3);
}
.veldrij{display:grid;grid-template-columns:1fr;gap:var(--s3)}
.veld{display:flex;flex-direction:column;margin:0}
.veld label{
  font-family:Oswald,sans-serif;font-weight:500;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;color:var(--inkt);
}
.veld .uitleg{font-size:14px;color:var(--grijs);margin:6px 0 0}
.veld input,.veld select,.veld textarea{
  font-family:"Source Sans 3",sans-serif;font-size:16.5px;color:var(--inkt);
  border:1px solid var(--lijn-donker);border-radius:var(--radius);
  padding:13px 14px;background:var(--wit);min-height:var(--raakdoel);width:100%;
}
.veld textarea{min-height:120px;resize:vertical;line-height:1.55}
.veld input::placeholder,.veld textarea::placeholder{color:#8A8078}
.bestand{
  border:1px dashed var(--lijn-donker);border-radius:var(--radius);
  padding:var(--s3);font-size:15.5px;color:var(--grijs);background:var(--zand);
}
.formulier-voet{
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--lijn);
}
.formulier-voet p{font-size:14.5px;color:var(--grijs);margin-top:12px}

/* Bedanktekst na het versturen. Zit in de pagina zelf, er gaat niets weg. */
.bedankt{
  background:var(--zand);border:1px solid var(--lijn-donker);
  border-left:4px solid var(--rood);border-radius:var(--radius);
  padding:var(--s4) var(--s3);
}
.bedankt h3{margin-bottom:12px}
.bedankt p{color:var(--inkt-zacht);font-size:16.5px}
.bedankt .demo-noot{
  font-size:14px;color:var(--grijs);margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--lijn-donker);
}
.bedankt-acties{display:flex;flex-direction:column;gap:12px;margin-top:var(--s4)}

.contactkaart{
  background:var(--zand-diep);border-radius:var(--radius);
  padding:var(--s4) var(--s3);
}
.contactkaart h3{margin-bottom:var(--s2)}
.bel-groot{
  display:block;font-family:Oswald,sans-serif;font-weight:700;
  font-size:clamp(1.875rem,1.6rem + 1.2vw,2.125rem);
  color:var(--rood);line-height:1.1;min-height:44px;
}
.bel-groot:hover{color:var(--rood-donker);text-decoration:none}
.contact-lijst{margin-top:var(--s3);border-top:1px solid var(--lijn-donker)}
.contact-lijst > div{padding:14px 0;border-bottom:1px solid var(--lijn-donker)}
.contact-lijst dt{
  font-family:Oswald,sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--grijs);
}
.contact-lijst dd{margin:4px 0 0;font-size:16.5px}
.contact-lijst address{font-style:normal}
.contact-lijst a{word-break:break-word}
.te-bevestigen{
  display:block;font-size:13.5px;color:var(--grijs);
  font-style:italic;margin-top:6px;
}

/* ---- wettelijke pagina's ---------------------------------------------- */
.tekstpagina{padding:var(--s6) 0}
.tekstpagina h2{margin-top:var(--s5);margin-bottom:var(--s2)}
.tekstpagina h2:first-of-type{margin-top:var(--s4)}
.tekstpagina p,.tekstpagina li{color:var(--inkt-zacht)}
.tekstpagina ul{margin:var(--s2) 0}
.tekstpagina li{padding:6px 0 6px 22px;position:relative}
.tekstpagina li::before{
  content:"";position:absolute;left:0;top:14px;width:8px;height:8px;
  background:var(--rood);border-radius:2px;transform:rotate(45deg);
}

/* ---- voettekst --------------------------------------------------------- */
.voet{
  background:var(--inkt);color:#C7BEB6;font-size:16px;
  padding-top:var(--s6);padding-bottom:var(--s4);
}
.voet-boven{display:grid;grid-template-columns:1fr;gap:var(--s4)}
.voet h3{
  color:var(--wit);margin:0 0 var(--s2);font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;
}
.voet a{color:#E4DDD6}
.voet a:hover{color:var(--wit)}
.voet-merk img{
  width:190px;background:var(--wit);padding:10px 14px;border-radius:var(--radius);
}
.voet-merk p{margin-top:var(--s3);font-size:16px;max-width:38ch}
.voet nav a{
  display:flex;align-items:center;min-height:44px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.voet address{font-style:normal;line-height:1.8}
.voet-onder{
  margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid rgba(255,255,255,.16);font-size:14.5px;
}
.voet-onder ul{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:12px}

/* ---- vaste actiebalk onderaan ----------------------------------------- */
/* Bellen en offerte aanvragen blijven binnen bereik van de duim. Vanaf
   1200px verdwijnt de balk, want dan zit dezelfde keuze in de header. */
.actiebalk{
  position:sticky;bottom:0;z-index:20;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:12px var(--rand) 14px;
  background:var(--wit);border-top:1px solid var(--lijn-donker);
  box-shadow:0 -6px 18px rgba(42,36,33,.12);
}
.actiebalk .knop{font-size:15px;padding:0 12px}

/* =========================================================================
   560px en breder: twee kolommen, knoppen op hun eigen breedte
   ========================================================================= */
@media (min-width:560px){
  :root{--rand:28px}

  .knop{display:inline-flex;width:auto}
  .knop--vol{width:100%}
  .hero-acties{flex-direction:row;flex-wrap:wrap;gap:var(--s2)}
  .bedankt-acties{flex-direction:row;flex-wrap:wrap;gap:var(--s2)}

  .feiten dl{gap:var(--s4) var(--s3)}

  .diensten{grid-template-columns:repeat(2,1fr);gap:var(--s3)}
  .dienst img{height:200px}

  /* Het horizontale schuiven maakt plaats voor een raster. */
  .werk{
    display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);
    overflow:visible;margin-left:0;margin-right:0;padding:0;
  }
  .werk figure{flex:none}
  .werk img{height:220px}
  .werk-voet{margin-top:var(--s4)}

  .veldrij{grid-template-columns:1fr 1fr}
  .veld--vol{grid-column:1 / -1}
  .formulier{padding:var(--s4)}
  .formulier-voet{display:flex;align-items:center;gap:var(--s3)}
  .formulier-voet p{margin-top:0}
  /* De knop mag niet krimpen, anders valt het opschrift over twee regels. */
  .formulier-voet .knop{flex:0 0 auto;white-space:nowrap}

  .getuigenissen{grid-template-columns:repeat(2,1fr)}

  .hero-beeld{margin-left:0;margin-right:0;border-radius:var(--radius);overflow:hidden}
  .hero-beeld img{height:320px}
  .hero-stempel{padding:var(--s3) var(--s4)}

  .blokken{grid-template-columns:repeat(2,1fr)}
  .sfeerbeelden{grid-template-columns:repeat(2,1fr);gap:var(--s3)}
  .cta-acties{flex-direction:row;flex-wrap:wrap;gap:var(--s2)}
}

/* =========================================================================
   900px en breder: bovenbalk, drie kolommen, tekst naast beeld
   ========================================================================= */
@media (min-width:900px){
  :root{--rand:40px}

  body{font-size:17px;line-height:1.65}
  .sectie{padding:var(--s7) 0}
  .inleiding{font-size:19px}
  .opschrift{font-size:14px;letter-spacing:.16em}

  /* De contactgegevens boven de header. */
  .bovenbalk{
    display:block;background:var(--inkt);color:#CFC6BE;font-size:15px;
  }
  .bovenbalk .kader{
    display:flex;align-items:center;justify-content:flex-end;
    flex-wrap:wrap;gap:4px var(--s3);min-height:44px;
    padding-top:8px;padding-bottom:8px;
  }
  /* De inleidende regel is het eerste wat wijkt als het krap wordt. */
  .bovenbalk .inleidend{display:none}
  .bovenbalk a{color:#EFE9E3}
  .bovenbalk ul{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
  .bovenbalk li + li{padding-left:var(--s3);border-left:1px solid rgba(255,255,255,.18)}

  .feiten dl{
    grid-template-columns:repeat(4,1fr);gap:var(--s4);
    padding-top:var(--s5);padding-bottom:var(--s5);
  }
  .feit dt{font-size:19px;margin-bottom:4px}
  .feit dd{font-size:16px}

  .diensten{grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6)}
  .dienst img{height:220px}
  .dienst-tekst{padding:var(--s4)}

  .werk{grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6)}
  .werk img{height:250px}
  .werk figcaption{padding:var(--s3) var(--s3) var(--s4)}
  .werk h3{font-size:20px}
  .werk p{font-size:16px}
  .werk-voet{margin-top:var(--s5);text-align:center}
  .werk--raster{grid-template-columns:repeat(3,1fr)}

  /* Beeld en tekst naast elkaar, om en om van kant. */
  .onderdeel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:center;
    padding:var(--s6) 0}
  .onderdeel img{height:340px}
  .onderdeel:nth-of-type(even) .onderdeel-beeld{order:-1}

  .spoed .kader{display:flex;align-items:center;gap:var(--s5)}
  .spoed p{margin-top:6px}
  .spoed .knop{margin-top:0;margin-left:auto;flex:0 0 auto}

  .over{grid-template-columns:minmax(0,1fr) 380px;gap:var(--s6)}
  .gegevens{padding:var(--s5) var(--s4)}
  .gegevens dt{font-size:13px}
  .gegevens dd{font-size:17px}

  .getuigenissen{grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6)}
  .getuigenis{padding:var(--s4)}

  .blokken{grid-template-columns:repeat(2,1fr);gap:var(--s4);margin-top:var(--s6)}
  .blok{padding:var(--s4)}
  .sfeerbeelden img{height:280px}
  .cta .kader{padding-top:var(--s7);padding-bottom:var(--s7)}

  .offerte{grid-template-columns:minmax(0,1fr) 380px;gap:var(--s6);align-items:start;
    margin-top:var(--s6)}
  .formulier{padding:var(--s5)}
  .veldrij{gap:var(--s3)}
  .contactkaart{padding:var(--s5) var(--s4)}
  .contact-lijst{margin-top:var(--s4)}
  .contact-lijst > div{padding:var(--s3) 0}
  .contact-lijst dt{font-size:13px}
  .contact-lijst dd{font-size:17px}

  .hero-tekst{padding-top:var(--s7);padding-bottom:var(--s5)}
  .hero-beeld img{height:400px}
  .hero p.leidend{font-size:19px;max-width:52ch}
  .belofte{font-size:16px;max-width:56ch;margin-top:var(--s5)}

  .voet{padding-top:var(--s7)}
  .voet-boven{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .voet-merk{grid-column:1 / -1}
  .voet nav a{min-height:0;border:0;margin-bottom:10px;display:block}
  .voet-onder{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:var(--s6);font-size:15px;
  }
  .voet-onder ul{margin-top:0}
  .voet-onder p{margin:0}
}

/* =========================================================================
   1200px en breder: volledige navigatiebalk in plaats van het uitklapmenu

   De grens ligt op 1200 en niet lager, omdat het logo, zeven menu-items, het
   telefoonnummer en de offerteknop samen die breedte nodig hebben. Daaronder
   is de compacte header met de rode belknop en het uitklapmenu beter, en
   staat het nummer daar even prominent.
   ========================================================================= */
@media (min-width:1200px){
  :root{--kopbalk:100px}

  .kop-rij{
    gap:var(--s2);min-height:var(--kopbalk);
    padding-right:var(--rand);
  }
  .merk img{width:170px}

  /* Het uitklapmenu en de losse belknop verdwijnen. */
  .menu{display:none}
  .belknop{display:none}

  .hoofdnav{display:block;margin-left:auto;flex:0 1 auto;min-width:0}
  .hoofdnav ul{display:flex;gap:14px}
  .hoofdnav a{
    font-family:Oswald,sans-serif;font-weight:500;font-size:13.5px;
    letter-spacing:.04em;text-transform:uppercase;color:var(--inkt);
    display:block;padding:12px 2px;border-bottom:3px solid transparent;
    white-space:nowrap;
  }
  .hoofdnav a:hover{
    color:var(--rood);border-bottom-color:var(--rood);text-decoration:none;
  }
  .hoofdnav a[aria-current="page"]{color:var(--rood);border-bottom-color:var(--rood)}

  .bovenbalk .kader{justify-content:space-between;flex-wrap:nowrap}
  .bovenbalk .inleidend{display:block}

  .kop-acties{display:flex;align-items:center;gap:14px;flex:0 0 auto}
  .bel-kop{
    display:flex;flex-direction:column;line-height:1.15;
    color:var(--inkt);white-space:nowrap;
  }
  .bel-kop:hover{text-decoration:none;color:var(--rood)}
  .bel-kop .label{font-size:13px;color:var(--grijs);letter-spacing:.04em}
  .bel-kop .nummer{font-family:Oswald,sans-serif;font-weight:600;font-size:21px}

  /* De vaste balk onderaan is hier niet meer nodig. */
  .actiebalk{display:none}

  .sectie{padding:var(--s8) 0}

  /* Hero in twee kolommen, met de stempel over de hoek van het beeld. */
  .hero .kader{
    display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:var(--s7);
    align-items:center;padding-top:var(--s8);padding-bottom:var(--s8);
  }
  .hero-tekst{padding:0}
  .hero h1{max-width:16ch}
  /* De stempel steekt buiten het beeld, dus hier niets afsnijden. */
  .hero-beeld{margin-top:0;overflow:visible;border-radius:0}
  .hero-beeld img{width:100%;height:420px;border-radius:var(--radius)}
  .hero-stempel{
    position:absolute;left:-40px;bottom:-32px;max-width:230px;
    border-radius:var(--radius);padding:var(--s3) var(--s4);
    display:block;
  }
  .hero-stempel .cijfer{font-size:42px}
  .hero-stempel .bij{display:block;margin-top:6px}

  /* Vijf stappen naast elkaar, met de lijn boven in plaats van ernaast. */
  .stappen{
    display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);
    margin-top:var(--s7);
  }
  .stap{padding:var(--s4) 0 0;border-top:3px solid var(--lijn-donker)}
  .stap::before{top:-22px}
  .stap::after{display:none}
  .stap h3{font-size:19px;padding-top:0;margin-bottom:var(--s1)}

  .over{grid-template-columns:minmax(0,1fr) 420px;gap:var(--s7)}
  .offerte{grid-template-columns:minmax(0,1fr) 400px;gap:var(--s7)}

  .voet-boven{grid-template-columns:300px repeat(3,minmax(0,1fr));gap:var(--s5)}
  .voet-merk{grid-column:auto}
  .voet-merk img{width:220px}
  .voet-merk p{max-width:34ch}
}

/* Wie liever geen beweging ziet, krijgt die ook niet. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* Afdrukken: de balken en knoppen mogen weg, de gegevens moeten blijven. */
@media print{
  .actiebalk,.menu,.bovenbalk,.kop-acties,.belknop,.overslaan{display:none}
  .voorstel{border-bottom:1px solid #999}
  body{font-size:11pt}
  .kop-balk{position:static}
}