/* Renoperfect — statische site, copy bouwplan v1.1 */
:root {
  /* Palet uit het voorstel (2026-09-06). De oude namen blijven staan zodat de hele site
     in een keer meekleurt; alleen de waarden zijn vervangen.
       ink #1a1a2e  - donker, bijna zwart: autoriteit
       oranje #e8611a - warm accent, de enige kleur die nog opvalt
     De gekleurde sectievlakken (geel voor schade, blauw voor renovatie) zijn vervallen:
     wit en #f7f7fa wisselen elkaar af, verder niets. */
  --primair: #1a1a2e;
  --ink-light: #2d2d44;
  --cta: #e8611a;
  --cta-hover: #cf5215;
  --secundair-hover: #2d2d44;
  --accent: #e8611a;
  --accent-licht: #fef0e8;
  --link: #cf5215;
  --licht: #f7f7fa;
  --vocht: #fef0e8;
  --renovatie: #f7f7fa;
  --tekst: #333345;
  --grijs: #7a7a8c;
  --rand: #e5e5ed;
  --wit: #ffffff;
  --donker: #111122;
  --dringend: #c0392b;
  --dringend-hover: #a02d21;
  --whatsapp: #25d366;
  --whatsapp-hover: #1ebe5d;
  --schaduw: 0 4px 20px rgba(0, 0, 0, 0.08);
  --radius: 4px;
  --radius-lg: 6px;
  --max: 1180px;
}

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

html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 90px;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--wit);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--link);
}

h1,
h2,
h3,
h4,
.logo,
.btn,
.nav a,
.badge,
.stat-title,
.step-label {
  /* Poppins is een geometrische letter met ronde, bijna kinderlijke vormen. Inter is een
     neutrale grotesk: dezelfde leesbaarheid, een zakelijker toon (2026-09-06, vraag
     Bartel). */
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1,
h2,
h3 {
  color: var(--primair);
  margin: 0 0 12px;
  line-height: 1.2;
}

h1 {
  font-weight: 700;
  font-size: 54px;
  line-height: 1.06;
  letter-spacing: -1.4px;
}

h2 {
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.8px;
  text-align: center;
}

h3 {
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.3px;
}

p {
  margin: 0 0 16px;
}

.wrap {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.sectie {
  padding: 96px 0;
}

.sectie-licht {
  background: var(--licht);
}

.lead {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 16px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--grijs);
}

/* Tweede regel onder de lead (2026-09-06, vraag Bartel). De lead zegt VOOR WIE we komen,
   deze regel zegt WAT we doen. Donkerder en zwaarder dan de lead, met een kort streepje
   eronder, zodat de twee regels als kop en belofte lezen en niet als twee halve zinnen. */
/* Klein etiket in de kleur van het accent, zoals de section-kicker uit het voorstel. */
.lead-belofte {
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cta);
  margin: 0 0 36px;
}

.intro {
  max-width: 850px;
  margin: 0 auto 40px;
  text-align: center;
}

.center {
  text-align: center;
}

/* Een tel:-link die op de computer niets doet, mag er ook niet uitzien alsof hij iets
   doet (2026-09-06). De klasse wordt door main.js gezet, alleen op toestellen zonder
   aanraakscherm. */
.tel-statisch {
  cursor: default;
  user-select: text;
}

.tel-statisch:hover,
.tel-statisch:focus-visible {
  transform: none;
}

/* Header */
/* Donkere, semi-transparante balk uit het voorstel. Hij ligt over de hero in plaats van
   erboven, waardoor de pagina bovenaan een geheel wordt. */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(26, 26, 46, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}

.logo img {
  display: block;
  height: 42px;
  width: auto;
}

.footer-logo {
  display: block;
  height: 60px;
  width: auto;
  margin: 0 auto 24px;
}

.nav {
  display: flex;
  gap: 28px;
}

.nav a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease;
}

.nav a:hover,
.nav a:focus {
  color: var(--wit);
  border-bottom-color: var(--cta);
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 26px;
  color: var(--wit);
  cursor: pointer;
}

/* Knoppen */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: var(--radius);
  padding: 14px 28px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
  transition: background .15s ease, border-color .15s ease;
}

/* Het pijltje mag meebewegen maar niet meeschreeuwen. */
.btn-pijl {
  font-size: 1.05em;
  opacity: .85;
}

.btn-primair {
  background: var(--cta);
  color: var(--wit);
}

.btn-primair:hover {
  background: var(--cta-hover);
  color: var(--wit);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(232, 97, 26, 0.30);
}

.btn-secundair {
  background: var(--primair);
  color: var(--wit);
}

.btn-secundair:hover {
  background: var(--secundair-hover);
  color: var(--wit);
}

/* Icoon in een knop (2026-08-31): meeschalend met de tekst, zodat de waterdruppel
   even groot blijft als je de knoptekst ooit groter of kleiner zet. */
.btn-icoon {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
  vertical-align: -0.15em;
  margin-right: 9px;
}

/* Dringende interventie (2026-08-31, vraag Bartel): eigen ROOD, los van de oranje
   merkkleur. Rood zegt "nu", oranje is gewoon de huisstijl - en de belknop elders op
   de pagina gebruikt btn-spoed, dus die mocht niet meeverkleuren. */
.btn-dringend {
  background: var(--dringend);
  color: var(--wit);
}

.btn-dringend:hover {
  background: var(--dringend-hover);
  color: var(--wit);
}

.btn-spoed {
  background: var(--cta);
  color: var(--wit);
  font-size: 20px;
  padding: 18px 36px;
}

.btn-spoed:hover {
  background: var(--cta-hover);
  color: var(--wit);
}

.btn-ghost {
  background: transparent;
  color: var(--wit);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-ghost:hover {
  border-color: var(--wit);
  color: var(--wit);
}

.btn-whatsapp {
  background: var(--wit);
  border: 1px solid rgba(44, 62, 80, 0.22);
  color: var(--primair);
}

.btn-whatsapp:hover {
  background: var(--licht);
  color: var(--primair);
}

.btn-whatsapp i {
  color: var(--whatsapp);
  font-size: 17px;
}

.btn-wit-oranje {
  background: var(--wit);
  color: var(--cta);
}

.btn-wit-oranje:hover {
  background: var(--licht);
  color: var(--cta-hover);
}

.btn-full {
  width: 100%;
}

/* Hero */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: 120px 0 90px;
  /* Luchtfoto met een donkere sluier die VAN LINKS zwaar is en naar rechts oplost
     (2026-09-06). De tekst staat links en blijft daardoor rustig leesbaar zonder de foto
     over de volle breedte plat te drukken. */
  background:
    linear-gradient(135deg, rgba(26, 26, 46, 0.94) 0%, rgba(26, 26, 46, 0.72) 100%),
    url('../img/hero.jpg') center / cover no-repeat,
    var(--donker);
  /* WebP (305 KB) i.p.v. JPG (419 KB) waar de browser het ondersteunt; de regel hierboven
     blijft als fallback staan voor browsers zonder image-set(). De gradient-sluier en de
     stapelvolgorde blijven exact zoals ze waren (2026-09-08). */
  background:
    linear-gradient(135deg, rgba(26, 26, 46, 0.94) 0%, rgba(26, 26, 46, 0.72) 100%),
    -webkit-image-set(url('../img/hero.webp') type('image/webp'),
                      url('../img/hero.jpg') type('image/jpeg')) center / cover no-repeat,
    var(--donker);
  background:
    linear-gradient(135deg, rgba(26, 26, 46, 0.94) 0%, rgba(26, 26, 46, 0.72) 100%),
    image-set(url('../img/hero.webp') type('image/webp'),
              url('../img/hero.jpg') type('image/jpeg')) center / cover no-repeat,
    var(--donker);
  background-color: var(--donker);
  color: var(--wit);
}

.hero h1,
.hero p {
  color: var(--wit);
}

/* Een leeskolom links in plaats van alles gecentreerd. */
.hero-inhoud {
  max-width: 640px;
}

/* Klein etiket boven de titel: zegt in drie woorden wat we doen, zonder een tweede
   kop te worden. Het oranje stipje is de enige kleur in dit blok. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 6px 14px 6px 12px;
  border: 1px solid rgba(232, 97, 26, 0.45);
  border-radius: var(--radius);
  background: rgba(232, 97, 26, 0.08);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cta);
}

.hero-badge-stip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cta);
}

.hero h1 {
  margin: 0 0 18px;
  font-size: 56px;
}

.hero .lead-hero {
  max-width: 540px;
  margin: 0 0 34px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
}

.hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Spoed: een rustige regel onder een dun lijntje, geen tweede blok vol kleur. */
.hero-spoed {
  /* Ruimer van de twee knoppen erboven gezet (2026-09-06, vraag Bartel): het spoedblok
     is een aparte boodschap en moet niet aan de knoppenrij vastplakken. */
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 560px;
}

.hero-spoed-label {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.hero-spoed-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Het nummer is het enige element dat hier opvalt. */
.hero-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--wit);
  text-decoration: none;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.hero-tel i {
  font-size: 15px;
  color: var(--cta);
}

.hero-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s ease, border-color .15s ease;
}

.hero-wa:hover,
.hero-wa:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--wit);
}

/* Het WhatsApp-teken is overal groen; de knop eromheen blijft neutraal (2026-09-06,
   vraag Bartel: "enkel het icoontje"). */
.hero-wa i {
  font-size: 16px;
  color: var(--whatsapp);
}

.hero-spoed-noot {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
}

.hero-spoed-noot a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Stats */
/* Trust bar uit het voorstel: vier cijfers op een lijn, gescheiden door dunne strepen.
   Het getal is de boodschap; het icoontje erboven is weggelaten. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 44px 0;
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
  padding: 32px 0;
}

.stat {
  text-align: center;
  padding: 0 16px;
}
.stat + .stat {
  border-left: 1px solid var(--rand);
}

.stat i {
  display: none;
}

.stat-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--primair);
}

.stat span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grijs);
}

.tekst-smal {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* Kaarten diensten */
.twee-kol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* Kaarten uit het voorstel: een dunne rand in plaats van een zwevende schaduw, en bij
   hover een oranje lijn die vanaf links openschuift. */
.kaart {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.kaart::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.kaart:hover {
  border-color: var(--cta);
  box-shadow: var(--schaduw);
}

.kaart:hover::before {
  transform: scaleX(1);
}

.kaart-vocht {
  background: var(--vocht);
}

.kaart-renovatie {
  background: var(--renovatie);
}

.kaart-wit {
  background: var(--wit);
}

.kaart-grijs {
  background: var(--licht);
}

.sub-oranje {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--cta);
  margin-bottom: 12px;
}

.sub-blauw {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--primair);
  margin-bottom: 12px;
}

.check {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.check li {
  position: relative;
  padding: 6px 0 6px 28px;
  font-size: 16px;
}

.check li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f00c";
  position: absolute;
  left: 0;
  color: var(--cta);
}

.check-blauw li::before {
  color: var(--primair);
}

.check-accent li::before {
  color: var(--accent);
}

.check-wit li {
  color: var(--wit);
  font-size: 17px;
  padding: 8px 0 8px 32px;
}

.check-wit li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f058";
  color: var(--cta);
}

/* 3 kolommen */
.drie-kol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 32px 0;
}

.step-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--cta);
  margin-bottom: 8px;
}

 /* Iconen (2026-09-06, vraag Bartel: "veel te kinderlijk"). Font Awesome heeft alleen
    massieve glyphs; op 40 pixels in fel oranje worden dat pictogrammen uit een
    kinderboek. Klein, grijsblauw en in een rustig vierkantje lezen ze als een label bij
    de tekst in plaats van als een plaatje. */
.icoon-groot,
.icoon-donker,
.keuze i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--accent-licht);
  font-size: 19px;
  color: var(--cta);
  margin-bottom: 20px;
}

/* Projecten */
.projecten-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.project {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.project:hover {
  border-color: var(--cta);
  box-shadow: var(--schaduw);
}

/* ===== Voor en na, elk met een eigen carrousel (2026-09-06, vraag Bartel) ================
   Twee gelijke rechthoeken naast elkaar. Een dunne witte naad ertussen maakt duidelijk dat
   het om twee losse beelden gaat en niet om een panorama. */
.voor-na {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--wit);
}

.fotos {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #d7dde3;
}

.fotos-spoor {
  display: flex;
  height: 100%;
  transition: transform .35s ease;
}

.foto {
  flex: 0 0 100%;
  height: 100%;
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.foto-leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grijs);
  font-size: 13px;
  font-weight: 600;
}

.fotos-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: rgba(26, 26, 46, 0.78);
  color: var(--wit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius);
}

/* Pijltjes en stippen worden door main.js toegevoegd, en alleen als er meer dan een foto
   in de rechthoek zit. */
.fotos-knop {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 26, 46, 0.55);
  color: var(--wit);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}

.fotos-knop:hover,
.fotos-knop:focus-visible {
  background: rgba(26, 26, 46, 0.85);
}

.fotos-vorige { left: 8px; }
.fotos-volgende { right: 8px; }

.fotos-stippen {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.fotos-stip {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.fotos-stip[aria-current="true"] {
  background: var(--cta);
}

/* ===== Foto uitvergroten (2026-09-06, vraag Bartel) ======================================
   Een klik op een projectfoto opent hem groot over de pagina. Alleen echte foto's zijn
   klikbaar; op een lege plaatshouder valt niets te vergroten. */
.foto img {
  cursor: zoom-in;
}

/* Het uitvergrootvenster mag niet in het bronbestand belanden; de bewerker haalt het
   samen met de andere door JavaScript gemaakte onderdelen weg. */

.vergroot {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 34, 0.94);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.vergroot.toon {
  display: flex;
}

.vergroot img {
  max-width: 92vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius);
}

.vergroot-bijschrift {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  text-align: center;
  padding: 0 20px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
}

.vergroot-knop {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: var(--wit);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}

.vergroot-knop:hover,
.vergroot-knop:focus-visible {
  background: rgba(255, 255, 255, 0.24);
}

.vergroot-sluit { top: 18px; right: 18px; }
.vergroot-vorige { top: 50%; left: 18px; transform: translateY(-50%); }
.vergroot-volgende { top: 50%; right: 18px; transform: translateY(-50%); }

@media (max-width: 767px) {
  .vergroot-vorige { left: 10px; }
  .vergroot-volgende { right: 10px; }

  .vergroot img {
    max-width: 96vw;
    max-height: 70vh;
  }
}

.project-body {
  padding: 24px;
}

.badge {
  display: inline-block;
  color: var(--wit);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius);
  margin-bottom: 12px;
}

.badge-vocht {
  background: var(--cta);
}

.badge-renovatie {
  background: var(--primair);
}

.project h3 {
  font-size: 20px;
}

.project p {
  font-size: 15px;
  color: var(--grijs);
}

/* Reviews */
.sterren {
  color: var(--cta);
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.citaat {
  font-style: italic;
  font-size: 16px;
}

.naamregel {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--primair);
}

/* Steden */
.steden {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 24px;
  margin: 24px 0 32px;
}

.steden li {
  list-style: none;
  padding: 6px 0 6px 22px;
  position: relative;
}

.steden {
  padding: 0;
}

.steden li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f3c5";
  position: absolute;
  left: 0;
  color: var(--cta);
}

.rp-maps iframe {
  width: 100%;
  height: 350px;
  border: 0;
  border-radius: 12px;
}

/* Waarom */
.waarom {
  background: var(--primair);
  color: var(--wit);
}

.waarom h2 {
  color: var(--wit);
}

.waarom .twee-kol {
  gap: 40px;
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  margin-top: 32px;
}

.form label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  font: inherit;
  margin-bottom: 16px;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--cta);
  box-shadow: 0 0 0 3px rgba(232, 97, 26, 0.12);
}

.form .accept {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 15px;
}

.form .accept input {
  width: auto;
  margin: 4px 0 0;
}

.succes {
  display: none;
  background: #eafaf1;
  border: 1px solid #2ecc71;
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.succes.toon {
  display: block;
}

.fout {
  display: none;
  background: #fdecea;
  border: 1px solid #e74c3c;
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.fout.toon {
  display: block;
}

.zijbalk-lijst {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.zijbalk-lijst li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.zijbalk-lijst i {
  color: var(--cta);
  width: 20px;
  margin-top: 4px;
}

.zijbalk-lijst a {
  color: var(--tekst);
  text-decoration: none;
}

.zijbalk-lijst a:hover {
  color: var(--cta);
}

.nummer-label {
  color: #7f8c8d;
  font-size: 0.85rem;
}

.spoedbox {
  background: var(--cta);
  color: var(--wit);
  border-radius: 12px;
  padding: 28px;
  margin-top: 24px;
}

/* Let op: dit geldt bewust NIET voor knoppen. Een .btn in dit vak heeft een witte
   achtergrond, en die kreeg hier ook witte tekst - onzichtbaar (hersteld 31/08). */
.spoedbox a:not(.btn) {
  color: var(--wit);
  text-decoration: underline;
}

/* Footer */
.footer {
  background: var(--donker);
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 56px 20px 32px;
  font-size: 14px;
}

.footer p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}
.footer a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  transition: color .2s ease;
}
.footer a:hover {
  color: var(--cta);
}

.footer .muted,
.footer .muted a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.social {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 16px 0;
}

.social a {
  color: var(--wit);
  font-size: 22px;
}

.social a:hover {
  color: var(--cta);
}

/* Float knoppen */
.rp-belknop {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  background: var(--cta);
  color: #fff;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  text-decoration: none;
}

.rp-belknop:hover {
  background: var(--cta-hover);
  color: #fff;
}

.rp-wa {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  /* Was een fel groene bal - in het rustiger geheel was dat het luidste op het scherm.
     Donker met een wit teken blijft even herkenbaar aan zijn vorm (2026-09-06). */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primair);
  color: var(--whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.rp-wa:hover {
  background: var(--secundair-hover);
  color: var(--whatsapp-hover);
}

.privacy-pagina {
  padding: 120px 0 80px;
}

.privacy-pagina h1 {
  font-size: 38px;
}

@media (max-width: 1024px) {
  .stats,
  .drie-kol,
  .projecten-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: 34px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 20px;
  }

  .sectie {
    padding: 50px 0;
  }

  .hero {
    /* De balk staat vast bovenaan en is 72px hoog; zonder extra ruimte plakt het etiket
       eronder tegen het logo. */
    padding: 118px 0 64px;
    min-height: auto;
  }

  .hero .lead-hero {
    font-size: 17px;
  }

  .hero h1 {
    font-size: 34px;
    letter-spacing: -0.8px;
  }

  /* Op een telefoon is naast elkaar te krap: de knoppen onder elkaar en even breed,
     zodat elke knop een volwaardig trefvlak is. */
  .hero-btns {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-tel {
    font-size: 20px;
  }

  .logo img {
    height: 44px;
  }

  .footer-logo {
    height: 44px;
  }

  .menu-toggle {
    display: block;
  }

  .nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(26, 26, 46, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-direction: column;
    padding: 16px 24px 24px;
    gap: 8px;
    box-shadow: var(--schaduw);
  }

  .nav.open {
    display: flex;
  }

  .stats,
  .twee-kol,
  .drie-kol,
  .projecten-grid,
  .contact-grid,
  .steden {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .steden {
    grid-template-columns: 1fr 1fr;
  }

  .kaart {
    padding: 24px;
  }

  /* Op gsm lagen deze twee zwevende knoppen boven op de vaste belbalk (#belbalk) en
     verborgen ze het telefoonnummer. De belbalk biedt bellen en WhatsApp al aan, dus
     hier zijn ze overbodig (2026-09-18). Op desktop blijft de WhatsApp-knop staan. */
  .rp-belknop,
  .rp-wa {
    display: none;
  }

  .rp-maps iframe {
    height: 250px;
  }

  .btn-spoed {
    font-size: 16px;
    padding: 14px 18px;
  }
}

/* Werkgebied-kaart (2026-08-31). Vaste hoogte, want een leeg kaartvak heeft geen inhoud
   die het zelf kan opspannen. */
#werkgebied-kaart {
  height: 420px;
  width: 100%;
  border-radius: 12px;
  z-index: 0;
}

.kaart-legende {
  margin-top: 12px;
  font-size: 15px;
  color: var(--grijs);
  text-align: center;
}

.legende-vlak {
  display: inline-block;
  width: 18px;
  height: 12px;
  background: rgba(230, 126, 34, 0.18);
  border: 2px solid var(--cta);
  border-radius: 3px;
  vertical-align: -1px;
}

.legende-speld {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #3388ff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* ===== Keuzeblok: schade of renovatie (2026-08-31, vraag Bartel) ==========================
   "Er moet een duidelijk onderscheid zijn (...) ik wil wel dat de klant snel bij het juiste
   onderdeel terechtkomt." Vandaar twee grote kaarten die zelf de link ZIJN - je hoeft geen
   knopje te mikken, de hele kaart is klikbaar. */
.keuze {
  display: block;
  padding: 34px 30px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  background: var(--wit);
  box-shadow: var(--schaduw);
  color: var(--tekst);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.keuze:hover,
.keuze:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}



.keuze h3 {
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--primair);
}

.keuze p {
  color: var(--grijs);
  margin: 0 0 16px;
}

.keuze-actie {
  font-weight: 600;
}

/* Links het spoor 'schade' in het oranje/rood van de urgentie, rechts renovatie in het
   blauw van de huisstijl. Zo herkent de bezoeker de twee sporen verderop terug. */
.keuze-schade .keuze-actie {
  color: var(--cta-hover);
}

.keuze-schade:hover,
.keuze-schade:focus-visible {
  border-color: var(--dringend);
}

.keuze-renovatie .keuze-actie {
  color: var(--primair);
}

.keuze-renovatie:hover,
.keuze-renovatie:focus-visible {
  border-color: var(--primair);
}

.keuze-spoed {
  margin-top: 26px;
  font-size: 17px;
}

.tussenkop {
  margin: 38px 0 18px;
  font-size: 21px;
  color: var(--primair);
}

/* ===== Afsluitblok "bel ons" (2026-08-31, vraag Bartel) ==================================
   Het telefoonnummer is hier het belangrijkste element op het scherm, dus het staat groot
   en alleen. De reden om te bellen staat erboven, de bereikbaarheid eronder - in die
   volgorde leest iemand het ook. */
.bel-blok {
  margin: 42px auto 0;
  max-width: 720px;
  text-align: center;
  background: var(--vocht);
  border: 1px solid rgba(230, 126, 34, 0.22);
  border-radius: 10px;
  padding: 30px 28px 26px;
}

.bel-blok h3 {
  margin: 0 0 8px;
  font-size: 21px;
  color: var(--primair);
}

.bel-blok > p {
  color: var(--grijs);
  margin: 0 auto 22px;
  max-width: 520px;
}

/* Herzien op 2026-09-06 (vraag Bartel: te veel kleur). Een felrode pil van 30 pixels met
   een gekleurde slagschaduw schreeuwt; donkerblauw op een rustig vlak leest even dringend
   maar volwassen. Groen komt alleen nog terug in het WhatsApp-teken zelf. */
.bel-groot {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--primair);
  color: var(--wit);
  text-decoration: none;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.3px;
  padding: 13px 24px;
  border-radius: 8px;
  transition: background .15s ease;
}

.bel-groot:hover,
.bel-groot:focus-visible {
  background: var(--secundair-hover);
  color: var(--wit);
}

.bel-groot i {
  font-size: 16px;
  color: var(--cta);
}

/* Bellen of WhatsApp naast elkaar (2026-09-06, vraag Bartel). Het nummer blijft de
   grootste knop: wie schade heeft belt het liefst. WhatsApp staat ernaast voor wie
   liever eerst een foto stuurt. */
.bel-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.bel-wa {
  background: var(--wit);
  border: 1px solid rgba(44, 62, 80, 0.22);
  color: var(--primair);
  font-size: 16px;
  font-weight: 600;
  padding: 12px 20px;
}

.bel-wa:hover,
.bel-wa:focus-visible {
  background: var(--licht);
  color: var(--primair);
}

.bel-wa i {
  font-size: 18px;
  color: var(--whatsapp);
}

.bel-blok .bel-onder {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--grijs);
}

.bel-blok .bel-voor {
  margin: 18px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(230, 126, 34, 0.3);
  font-size: 14.5px;
  color: var(--grijs);
  max-width: 600px;
}

/* Op een telefoon moet het nummer niet over de rand lopen. */
@media (max-width: 520px) {
  .bel-groot {
    font-size: 19px;
    padding: 13px 18px;
  }

  .bel-acties {
    flex-direction: column;
    align-items: stretch;
  }

  .bel-acties .bel-groot {
    justify-content: center;
    font-size: 19px;
    padding: 13px 16px;
    gap: 10px;
  }

  /* Het nummer moet op een telefoon op een lijn passen; afgebroken leest het als twee
     nummers. */
  .bel-acties .bel-groot span {
    white-space: nowrap;
  }

  .bel-acties .bel-groot i {
    font-size: 16px;
  }
}

/* '(huishoudelijk)' hoort bij de kop maar mag ze niet overschreeuwen (31/08). */
.kop-toevoeging {
  font-weight: 400;
  font-size: .82em;
  opacity: .75;
  text-transform: none;
}

/* Hetzelfde afsluitblok als bij schade, maar in het blauw van het renovatiespoor
   (31/08). Zelfde vorm = de bezoeker herkent waar hij is; andere kleur = hij weet
   in welk van de twee sporen. */
.blok-renovatie {
  background: var(--renovatie);
  border-color: rgba(44, 62, 80, 0.28);
}

.blok-renovatie .bel-groot {
  background: var(--cta);
  font-size: 17px;
  font-weight: 600;
}

.blok-renovatie .bel-groot i {
  color: var(--wit);
}

.blok-renovatie .bel-groot:hover,
.blok-renovatie .bel-groot:focus-visible {
  background: var(--cta-hover);
}

.blok-renovatie .bel-voor {
  border-top-color: rgba(44, 62, 80, 0.22);
}

.blok-renovatie .bel-onder a {
  color: var(--link);
}

/* ===== Leesbare opbouw van een dienstenspoor (2026-08-31) =================================
   Bartel: "dit is nog steeds een heel lelijke layout."
   De oorzaak was uitlijning: gecentreerde koppen boven een links uitgelijnde lijst die over
   de volle schermbreedte liep. Hier krijgt elk onderdeel een eigen, begrensde vorm. */
.sectie-intro {
  max-width: 780px;
  margin: 0 auto 30px;
  text-align: center;
}

.sectie-intro .intro {
  margin: 0 0 14px;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--grijs);
}

.sectie-intro .intro:first-child {
  font-size: 19px;
  color: var(--tekst);
}

.sectie-intro .intro:last-child {
  margin-bottom: 0;
}

/* De opsomming als kaart, in twee kolommen. Acht punten onder elkaar over de volle breedte
   lezen als een boodschappenlijst; naast elkaar in een kader lezen ze als een aanbod. */
.dienst-lijst {
  max-width: 960px;
  margin: 0 auto;
  background: var(--wit);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 30px 34px;
}

.dienst-lijst .check {
  margin: 0;
  columns: 2;
  column-gap: 40px;
}

.dienst-lijst .check li {
  break-inside: avoid;
  margin-bottom: 12px;
}

@media (max-width: 780px) {
  .dienst-lijst .check {
    columns: 1;
  }
  .dienst-lijst {
    padding: 24px 22px;
  }
}

/* De slotzin is geen gewone alinea maar een aantekening bij het aanbod. */
/* Belofte en werkwijze staan sinds 2026-09-06 samen in dit kader, direct onder de
   opsomming van de diensten (vraag Bartel). De belofte is de kop, de werkwijze de
   toelichting eronder. */
.dienst-noot {
  max-width: 960px;
  margin: 22px auto 0;
  padding: 20px 24px;
  border-left: 4px solid var(--cta);
  background: var(--vocht);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--tekst);
  font-size: 16px;
}

.dienst-noot p {
  margin: 0;
}

.dienst-noot-kop {
  margin-bottom: 6px !important;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cta);
}

/* De tussenkop hoorde bij de kolom eronder, niet aan de linkerrand van het scherm. */
.tussenkop {
  max-width: 960px;
  margin: 46px auto 20px;
  text-align: center;
}

/* ===== Juridische pagina's (2026-09-06) =================================================
   Algemene voorwaarden, gebruiksvoorwaarden en privacyverklaring delen dezelfde opmaak:
   een smalle leeskolom, links uitgelijnde koppen en rustige tekst. Juridische tekst wordt
   gelezen, niet gescand, dus geen gecentreerde koppen of kaders hier. */
.juridisch {
  padding: 132px 0 90px;
}

.juridisch .wrap {
  max-width: 780px;
}

.juridisch-kruimel {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--grijs);
}

.juridisch h1 {
  font-size: 40px;
  margin-bottom: 14px;
}

.juridisch h2 {
  text-align: left;
  font-size: 21px;
  margin: 38px 0 10px;
}

.juridisch p,
.juridisch li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--tekst);
}

.juridisch-inleiding {
  font-size: 18px !important;
  color: var(--grijs) !important;
  margin-bottom: 8px;
}

.juridisch ol,
.juridisch ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.juridisch li {
  margin-bottom: 10px;
}

/* De prijsherzieningsformule moet als formule leesbaar blijven. */
.juridisch-formule {
  margin: 16px 0;
  padding: 14px 18px;
  background: var(--licht);
  border-left: 3px solid var(--cta);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 15px !important;
}

.juridisch-datum {
  margin-top: 34px;
  font-size: 14px !important;
  color: var(--grijs) !important;
}

.juridisch-terug {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--rand);
}

@media (max-width: 767px) {
  .juridisch {
    padding: 112px 0 64px;
  }

  .juridisch h1 {
    font-size: 30px;
  }
}

/* Gemeentelijst onder de kaart (2026-09-06). Kleiner en grijzer dan de zin erboven: het is
   nuttige informatie voor wie zoekt op zijn gemeente, maar het mag de sectie niet
   overnemen. Bewust zichtbaar - verstopte tekst is voor Google een reden tot straf. */
.werkgebied-gemeenten {
  max-width: 780px;
  margin: 10px auto 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--grijs);
}

/* Taalkiezer in de balk (2026-09-07). Drie korte codes, de huidige taal opgelicht.
   Klein gehouden: het is navigatie voor een minderheid van de bezoekers. */
.taalkiezer {
  display: flex;
  gap: 2px;
  margin-left: 18px;
}

.taalkiezer a {
  padding: 5px 9px;
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color .15s ease, background .15s ease;
}

.taalkiezer a:hover {
  color: var(--wit);
  background: rgba(255, 255, 255, 0.10);
}

.taalkiezer a.taal-actief {
  color: var(--wit);
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 767px) {
  .taalkiezer {
    margin: 0 auto 0 0;
    order: 2;
  }

  .header-inner {
    flex-wrap: wrap;
  }
}

/* Knop die de kaart pas laadt als de bezoeker het vraagt (2026-09-07, uit de audit).
   Zolang er niet geklikt is, vertrekt er geen enkel gegeven naar OpenStreetMap. */
.kaart-starten {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  background: var(--licht);
  color: var(--grijs);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.kaart-starten:hover,
.kaart-starten:focus-visible {
  background: var(--wit);
  border-color: var(--cta);
}

.kaart-starten strong {
  font-size: 16px;
  color: var(--primair);
}

.kaart-starten span {
  max-width: 380px;
  font-size: 13.5px;
  line-height: 1.6;
}

#werkgebied-kaart {
  position: relative;
}

/* ===== Dienstpagina's (2026-09-07, uit de audit) =========================================
   Vijf aparte pagina's per dienst, zodat "dakwerken Kortrijk" en "gevelrenovatie Kortrijk"
   niet langer op dezelfde URL met elkaar concurreren. */
.dienst {
  padding: 132px 0 90px;
}

.dienst .wrap {
  max-width: 860px;
}

.dienst h1 {
  font-size: 40px;
  margin-bottom: 18px;
}

.dienst h2 {
  text-align: left;
  font-size: 24px;
  margin: 46px 0 14px;
}

.dienst p {
  font-size: 16.5px;
  line-height: 1.75;
}

.dienst .sectie-intro {
  max-width: none;
  margin-bottom: 0;
  text-align: left;
}

.dienst .sectie-intro .intro {
  text-align: left;
}

.dienst .dienst-lijst {
  margin-top: 0;
}

.dienst-fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 34px 0 10px;
}

.dienst-foto {
  margin: 0;
}

.dienst-foto picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rand);
}

.dienst-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.dienst-foto figcaption {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--grijs);
}

/* Veelgestelde vragen: dichtgeklapt zodat de pagina leesbaar blijft, maar de tekst
   staat wel in de HTML zodat Google en AI-assistenten hem meenemen. */
.vragen {
  margin-top: 6px;
}

.vraag {
  border-bottom: 1px solid var(--rand);
}

.vraag summary {
  padding: 16px 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 16.5px;
  color: var(--primair);
  list-style: none;
  position: relative;
  padding-right: 30px;
}

.vraag summary::-webkit-details-marker {
  display: none;
}

.vraag summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 14px;
  font-size: 20px;
  font-weight: 400;
  color: var(--cta);
}

.vraag[open] summary::after {
  content: "‘2";
}

.vraag p {
  margin: 0 0 18px;
  color: var(--grijs);
}

@media (max-width: 767px) {
  .dienst {
    padding: 112px 0 64px;
  }

  .dienst h1 {
    font-size: 29px;
  }

  .dienst-fotos {
    grid-template-columns: 1fr;
  }
}

/* Verwijzingen naar de dienstpagina's onder de twee keuzekaarten. */
.dienst-links {
  max-width: 780px;
  margin: 0 auto 26px;
  text-align: center;
  font-size: 15px;
  color: var(--grijs);
}

.dienst-links a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid rgba(207, 82, 21, 0.35);
}

.dienst-links a:hover {
  border-bottom-color: var(--cta);
}

/* Link onderaan een dienstkaart op de homepage naar de eigen dienstpagina (2026-09-18). */
.kaart-link {
  margin: 18px 0 0;
  font-size: 15px;
}

.kaart-link a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid rgba(207, 82, 21, 0.35);
}

.kaart-link a:hover {
  border-bottom-color: var(--cta);
}

/* Regel met de diensten in de footer (2026-09-18): zo linkt elke Nederlandstalige pagina naar
   elke dienst, ook naar /spoedherstelling, die voordien nergens gelinkt was. Geen scheidingstekens
   in de tekst: elke link is een eigen blokje dat niet afbreekt, met genoeg hoogte om op een gsm
   aan te tikken. */
.footer .footer-diensten {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 6px;
}

.footer .footer-diensten a {
  display: inline-block;
  padding: 8px 8px;
  white-space: nowrap;
}

/* ── Vaste belbalk op mobiel (2026-09-08) ─────────────────────────────────
   Waarom: op de homepage staan acht tel:-links, maar geen enkele blijft in
   beeld tijdens het scrollen. Wie met een daklek op zijn telefoon zoekt, moet
   het nummer altijd binnen duimbereik hebben — niet terugscrollen naar boven.

   Alleen onder 767px: op desktop staat het nummer al in de vaste navigatie.
   De balk verbergt zich zodra het contactformulier in beeld komt, anders dekt
   hij het verzendknopje af. Dat gebeurt in main.js.

   env(safe-area-inset-bottom) houdt rekening met de streep onderaan iPhones
   zonder thuisknop. */

.belbalk {
  display: none;
}

@media (max-width: 767px) {
  .belbalk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    gap: .5rem;
    padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom, 0px));
    background: rgba(26, 26, 46, .97);
    backdrop-filter: blur(6px);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .28);
    transform: translateY(0);
    transition: transform .22s ease;
  }

  .belbalk[hidden],
  .belbalk.weg {
    transform: translateY(110%);
  }

  .belbalk a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 46px;              /* Apple/Google richtlijn: 44px minimum */
    border-radius: 8px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
  }

  .belbalk-bel {
    background: var(--cta, #e8611a);
    color: #fff;
    flex: 1.6;                      /* bellen is de hoofdactie */
  }

  .belbalk-bel:active {
    background: var(--cta-hover, #cf5215);
  }

  .belbalk-wa {
    background: #25d366;
    color: #0b3d1f;
  }

  /* Het nummer op één regel (2026-09-18): "Bel nu 0499 52 33 25" brak af en "25" stond
     alleen op de tweede regel. En de belknop echt breder dan WhatsApp: ".belbalk a" (flex: 1)
     woog zwaarder dan ".belbalk-bel" (flex: 1.6), waardoor beide even breed waren. Gemeten:
     past op 320, 360 en 375 px in het Nederlands, Frans en Engels. */
  .belbalk .belbalk-bel {
    flex: 1.6;
  }

  .belbalk a span {
    white-space: nowrap;
  }

  .belbalk svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    fill: currentColor;
  }

  /* De balk dekt de laatste regels van de pagina af; die ruimte geven we terug. */
  body {
    padding-bottom: 62px;
  }
}

/* Wie liever geen bewegende elementen ziet, krijgt geen schuifanimatie. */
@media (prefers-reduced-motion: reduce) {
  .belbalk {
    transition: none;
  }
}

/* Label "Erkend aannemer Klasse 1" (2026-09-19). Het linkt naar de officiële vermelding
   bij de FOD Economie, zodat een bezoeker de erkenning zelf kan nakijken. Eén klasse voor alle
   pagina's; --donker is voor de hero's met een donkere achtergrond. `a.` ervoor zodat de
   gewone linkkleur en onderstreping het label niet overschrijven. */
a.erkend-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--wit);
  color: var(--primair);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

a.erkend-label i {
  color: var(--cta);
  font-size: 16px;
}

a.erkend-label:hover,
a.erkend-label:focus-visible {
  border-color: var(--cta);
  color: var(--primair);
  text-decoration: none;
}

a.erkend-label--donker,
a.erkend-label--donker:hover,
a.erkend-label--donker:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--wit);
}

a.erkend-label--donker {
  border-color: rgba(255, 255, 255, 0.38);
}

.erkend-rij {
  margin: 0 0 22px;
}

.erkend-rij--midden {
  text-align: center;
}

.hero-erkend {
  margin: -14px 0 30px;
}

.hero-erkend--spoed {
  margin: 1rem 0 0;
}