/* KADelek — ontwerp Fotogedreven. Contract: kennisbank/DESIGN.md */

:root {
  --zwart: #111;
  --wit: #fff;
  --oranje: #ff6a13;        /* accent op donker: knoppen, labels, sterren */
  --oranje-donker: #c94d0b; /* accent op licht: links en labels op wit (4,6:1 op wit, AA voor kleine tekst) */
  --grijs-licht: #f1f1f1;
  --lijn: #ddd;
  --lijn-donker: #2a2a2a;
  --tekst: #333;
  --tekst-zacht: #555;
  --tekst-licht: #bbb;

  --font-kop: 'Barlow Condensed', sans-serif;
  --font-tekst: 'Barlow', sans-serif;

  --breedte: 1440px;
  --rand: 36px;
}

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

/* Ankers en toetsenbordfocus landen onder de (vaste) kopbalk. */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--wit);
  color: var(--zwart);
  font-family: var(--font-tekst);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--oranje-donker); }
a:hover { color: var(--zwart); }

input,
select,
textarea,
button { font: inherit; }

img { max-width: 100%; }

.binnen {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 0 var(--rand);
}

/* Koppen en labels */

.kop-l,
.kop-m,
.label,
.knop,
.tekstlink {
  font-family: var(--font-kop);
  text-transform: uppercase;
}

.kop-l {
  font-weight: 800;
  font-size: clamp(40px, 5vw, 72px);
  line-height: .95;
  margin: 0;
}

.kop-m {
  font-weight: 800;
  font-size: clamp(38px, 4vw, 60px);
  line-height: .95;
  margin: 0 0 20px;
}

.label {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--oranje-donker);
}

.tekstlink {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .05em;
  color: var(--oranje-donker);
  text-decoration: none;
}

/* Knoppen */

.knop {
  display: inline-block;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .05em;
  text-decoration: none;
  cursor: pointer;
  border: 0;
}

.knop--wit { background: var(--wit); color: var(--zwart); padding: 15px 26px; }
.knop--wit:hover { color: var(--zwart); }
.knop--rand { border: 2px solid var(--wit); color: var(--wit); padding: 13px 24px; }
.knop--rand:hover { color: var(--wit); }
.knop--zwart { background: var(--zwart); color: var(--wit); padding: 16px 30px; }
.knop--oranje { background: var(--oranje); color: var(--zwart); padding: 16px 30px; }
.knop--oranje:hover { color: var(--zwart); }
.knop:disabled { opacity: .4; cursor: not-allowed; }

/* Kopbalk */

.kop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

/* Met script staat de balk vast: doorzichtig boven de hero, zwart en compacter daaronder
   (site.js zet .kop--vast). Zonder script blijft hij bovenaan de pagina staan. */
.js .kop { position: fixed; }
.js .kop__binnen { transition: padding .2s; }
.kop--vast { background: var(--zwart); }
.kop--vast .kop__binnen { padding-top: 12px; padding-bottom: 12px; }

.kop__binnen {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 22px var(--rand);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  color: var(--wit);
}

/* Logo van de klant: bliksem + woordmerk, negatief (wit) voor de donkere kopbalk */
.logo { display: block; line-height: 0; }
.logo img { display: block; width: auto; height: 40px; }

.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 26px;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.menu__links { display: contents; }
.menu__knop { display: none; }

.menu__link { color: var(--wit); opacity: .85; text-decoration: none; }
.menu__link:hover { color: var(--wit); opacity: 1; }

.menu__tel {
  color: var(--zwart);
  background: var(--oranje);
  text-decoration: none;
  padding: 10px 16px;
}

.menu__tel:hover { color: var(--zwart); }

/* Hero */

.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  background: var(--zwart);
  color: var(--wit);
  overflow: hidden;
}

.hero__beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

/* Het verticale verloop onderaan houdt de tekst op de foto op 4,5:1 (gemeten op de helderste pixel). */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .45) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .2) 55%, rgba(0, 0, 0, 0) 100%);
}

.hero__inhoud {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 var(--rand) 56px;
}

.hero__raster {
  max-width: var(--breedte);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: 24px;
  align-items: end;
}

.hero h1 {
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: clamp(52px, 8vw, 128px);
  line-height: .9;
  text-transform: uppercase;
  margin: 0 0 22px;
  letter-spacing: -.005em;
}

.hero__tekst {
  font-size: 20px;
  line-height: 1.5;
  max-width: 520px;
  margin: 0 0 28px;
  color: #eee;
}

.hero__knoppen { display: flex; flex-wrap: wrap; gap: 10px; }

.hero__onderschrift {
  justify-self: end;
  text-align: right;
  font-size: 14px;
  color: #ddd;
  max-width: 280px;
  border-right: 3px solid var(--oranje);
  padding-right: 14px;
  margin: 0;
}

/* Beloftes */

.beloftes { background: var(--zwart); color: var(--wit); }

.beloftes__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.belofte { padding: 26px 24px 26px 0; }

.belofte h2 {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--oranje);
  margin: 0 0 4px;
}

.belofte p { font-size: 15px; line-height: 1.5; color: var(--tekst-licht); margin: 0; }

/* Dienstpanelen: kop bovenaan, diensten onderaan, op één lijn in alle drie de panelen. Elke dienst klapt
   in de foto open. Een sluier bovenaan en een sluier die met de lijst meegroeit houden de tekst leesbaar;
   de rest van de foto blijft licht (12-10-2026: de laag over de hele foto en de zwarte tekstvlakken vond Michiel allebei niet mooi). */

.panelen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.paneel {
  position: relative;
  min-height: 640px;
  display: flex;
  color: var(--wit);
  overflow: hidden;
}

.paneel img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.paneel__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .5) 90px, rgba(0, 0, 0, 0) 160px);
}

.paneel__inhoud {
  position: relative;
  z-index: 0; /* eigen stapel: de sluier van de lijst (z-index -1) ligt boven de foto en onder de tekst */
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 32px 32px 36px;
}

.paneel h2 {
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: 56px;
  text-transform: uppercase;
  line-height: .95;
  margin: 0 0 24px;
}

/* De sluier onderaan hoort bij de lijst: hij begint 130 px erboven en groeit mee als er een dienst openklapt. */
.paneel__diensten { margin-top: auto; position: relative; }

.paneel__diensten::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -130px;
  right: -32px;
  bottom: -36px;
  left: -32px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .68) 130px, rgba(0, 0, 0, .84) 100%);
  pointer-events: none;
}

.dienst { border-top: 1px solid rgba(255, 255, 255, .25); }

.dienst summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 0;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

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

.dienst summary::after {
  content: '+';
  content: '+' / '';  /* teken is decoratie: schermlezers horen het open/dicht al van de summary */
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--oranje);
}

.dienst[open] summary::after { content: '−'; content: '−' / ''; }
.dienst summary:hover { color: var(--oranje); }
.dienst[open] summary { font-weight: 600; }

.dienst p { font-size: 16px; line-height: 1.55; color: #eee; margin: 0 0 14px; max-width: 34em; }

/* Van de werf */

.werf { padding: 96px 0 80px; }

.werf__kop {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 28px;
}

.werf__rij {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 var(--rand) 12px;
  scroll-snap-type: x mandatory;
}

.project {
  margin: 0;
  flex: none;
  width: min(420px, 80vw);
  scroll-snap-align: start;
}

.project__beeld { aspect-ratio: 3 / 4; overflow: hidden; background: #eee; }

.project__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s;
}

.project:hover .project__beeld img { transform: scale(1.04); }

.project figcaption { padding-top: 12px; }
.project__titel { font-size: 17px; font-weight: 500; margin-top: 2px; }

/* Brede schermen: alle projecten in één raster in plaats van een rij om opzij te scrollen, die met een muis
   lastig is en er hooguit vier tegelijk toont (Michiel, 12-10-2026). Vier kolommen, vierkante uitsnede, de eerste
   foto 2x2: met 13 projecten precies 4x4. Smaller blijft het de scrollrij. */
@media (min-width: 1100px) {
  .werf__rij {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 12px;
    max-width: var(--breedte);
    margin: 0 auto;
    padding-bottom: 0;
    overflow: visible;
  }

  .project { width: auto; display: flex; flex-direction: column; }
  .project__beeld { aspect-ratio: 1; }

  .project:first-child { grid-column: span 2; grid-row: span 2; }
  .project:first-child .project__beeld { aspect-ratio: auto; flex: 1; position: relative; min-height: 0; }
  .project:first-child .project__beeld img { position: absolute; inset: 0; }
}

/* Over */

.over {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  background: var(--grijs-licht);
}

/* De tekst bepaalt de hoogte, de foto vult het vak (13-10-2026: zonder lege plafond- en kamerstrook). */
.over__beeld { position: relative; min-height: 520px; overflow: hidden; }

.over__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
  display: block;
}

.over__tekst {
  padding: 72px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 680px;
}

.over__tekst p { font-size: 19px; line-height: 1.6; color: var(--tekst); margin: 0 0 16px; }

.over__gegevens {
  font-size: 15px;
  color: var(--tekst-zacht);
  line-height: 1.7;
  border-top: 3px solid var(--zwart);
  padding-top: 16px;
  margin: 12px 0 28px;
}

/* Reviews: een eigen zwart vlak, zodat het blok niet wegvalt tussen "Over" en de vragen (12-10-2026) */

.reviews { background: var(--zwart); color: var(--wit); padding: 88px 0 80px; }
.reviews .kop-l { margin-bottom: 40px; }

.reviews__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 40px;
}

.review { margin: 0; border-top: 3px solid var(--wit); padding-top: 20px; }
.review__sterren { color: var(--oranje); font-size: 18px; margin-bottom: 10px; }
.review blockquote { margin: 0 0 12px; font-size: 21px; line-height: 1.45; }
.review figcaption { font-size: 14px; color: var(--tekst-licht); }
.review figcaption a { color: var(--tekst-licht); }
.review figcaption a:hover { color: var(--oranje); }

/* Veelgestelde vragen */

/* Lichtgrijs vlak: los van de reviews erboven en het witte formulier eronder (12-10-2026) */
.faq { padding: 96px 0; background: var(--grijs-licht); }
.faq .vraag, .faq__lijst { border-color: #d2d2d2; }

.faq__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px 56px;
  align-items: start;
}

.faq__vervolg { font-size: 17px; line-height: 1.6; color: var(--tekst); margin: 20px 0 12px; max-width: 420px; }
.faq__vervolg a { color: var(--zwart); }
.faq__vervolg a:hover { color: var(--oranje-donker); }

.faq__lijst { border-bottom: 1px solid var(--lijn); }

.vraag { border-top: 1px solid var(--lijn); }

.vraag summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

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

.vraag summary::after {
  content: '+';
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--oranje-donker);
}

.vraag[open] summary::after { content: '−'; }
.vraag summary:hover { color: var(--oranje-donker); }

.vraag p { font-size: 17px; line-height: 1.6; color: var(--tekst); margin: 0 0 18px; max-width: 640px; }

/* Contact */

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
}

.contact__beeld { position: relative; min-height: 620px; color: var(--wit); }

.contact__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }

.contact__gegevens { position: absolute; left: 36px; right: 36px; bottom: 48px; }

.contact h2 {
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: clamp(46px, 6vw, 96px);
  text-transform: uppercase;
  line-height: .9;
  margin: 0 0 24px;
}

.contact__tel {
  display: block;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 44px;
  color: var(--oranje);
  text-decoration: none;
}

.contact__tel:hover { color: var(--wit); }

.contact__mail { display: block; font-size: 20px; color: var(--wit); margin: 6px 0 16px; }
.contact__mail:hover { color: var(--oranje); }

.contact__adres { font-size: 16px; color: #ddd; line-height: 1.6; margin: 0; }

.contact__formulier { padding: 72px 48px; }

.formulier { display: grid; gap: 18px; max-width: 560px; }

.formulier__intro { font-size: 19px; line-height: 1.6; color: var(--tekst); margin: 0 0 8px; }

.formulier label {
  display: grid;
  gap: 6px;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.formulier input,
.formulier select,
.formulier textarea {
  font-family: var(--font-tekst);
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 2px solid var(--zwart);
  border-radius: 0;
  background: transparent;
  color: var(--zwart);
  outline: none;
}

.formulier input:focus-visible,
.formulier select:focus-visible,
.formulier textarea:focus-visible {
  border-bottom-color: var(--oranje-donker);
  box-shadow: 0 2px 0 var(--oranje-donker);
}

.formulier .knop { justify-self: start; }

/* Formulier-states (assets/contact-form.js): veldfout, statusregel, bedankt-blok */

/* Honeypot: buiten beeld, niet display:none (bots vullen hem dan nog wel in). */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.formulier [aria-invalid="true"] { border-bottom-color: var(--oranje-donker); }

.formulier__fout {
  margin: -10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tekst);
}
.formulier__fout::before { content: '— '; color: var(--oranje-donker); }

.formulier__status {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid var(--oranje-donker);
  font-size: 17px;
  line-height: 1.5;
  color: var(--zwart);
}
.formulier__status:empty { display: none; }

.formulier__privacy { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tekst-zacht); }

.formulier__bedankt { padding-top: 20px; border-top: 3px solid var(--zwart); }
.formulier__bedankt:focus { outline: none; }
.formulier__bedankt h3 {
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: clamp(30px, 3vw, 40px);
  line-height: .95;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.formulier__bedankt p { font-size: 19px; line-height: 1.6; color: var(--tekst); margin: 0; }

/* Na het versturen blijft alleen het bedankt-blok staan, op de plek van het formulier. */
.formulier--verstuurd > :not(.formulier__bedankt) { display: none; }

/* De privacyverklaring als laag boven het formulier (contact-form.js bouwt de <dialog>
   bij de eerste klik op een privacylink); de href naar /privacy.html blijft de terugval. */
body:has(.privacy-laag[open]) { overflow: hidden; }

.privacy-laag {
  /* Geen eigen padding: de kinderen vullen de dialog, dus een klik op de dialog zelf
     is een klik op de achtergrond. */
  padding: 0;
  width: min(720px, calc(100% - 32px));
  max-height: min(85svh, 900px);
  border: 0;
  border-top: 3px solid var(--oranje);
  border-radius: 0;
  background: var(--wit);
  color: var(--zwart);
  overflow: hidden;
}
.privacy-laag[open] { display: flex; flex-direction: column; }
.privacy-laag::backdrop { background: rgba(0, 0, 0, .6); }

.privacy-laag-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--lijn);
}
.privacy-laag-kop h2 {
  min-width: 0;   /* anders duwt de titel de sluitknop uit de laag */
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  margin: 0;
}
.privacy-laag-sluit {
  flex: none;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 8px 18px;
  border: 2px solid var(--zwart);
  border-radius: 0;
  background: transparent;
  color: var(--zwart);
  cursor: pointer;
}
.privacy-laag-sluit:hover { background: var(--zwart); color: var(--wit); }

.privacy-laag-tekst {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 28px 28px;
}
.privacy-laag-tekst h3 {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 26px 0 10px;
}
.privacy-laag-tekst p,
.privacy-laag-tekst li { font-size: 17px; line-height: 1.6; color: var(--tekst); }
.privacy-laag-tekst p { margin: 0 0 14px; }
.privacy-laag-tekst ul { margin: 0 0 14px; padding-left: 20px; }
.privacy-laag-tekst .juridisch__bijgewerkt { font-size: 14px; color: var(--tekst-zacht); }

/* Voet */

.voet { background: var(--zwart); color: #aaa; font-size: 15px; }

.voet__raster {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 64px var(--rand) 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}

.voet__logo {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.voet h2 {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wit);
  margin: 0 0 10px;
}

.voet p { line-height: 1.7; margin: 0; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li a { display: block; padding: 3px 0; color: #aaa; text-decoration: none; }
.voet li a:hover { color: var(--oranje); }
.voet__tel { color: var(--oranje); }
.voet__mail { color: var(--wit); }
.voet__wa { color: var(--wit); font-weight: 600; }
.voet__tel:hover,
.voet__mail:hover,
.voet__wa:hover { color: var(--oranje); }

.voet__onder {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 16px var(--rand) 28px;
  border-top: 1px solid var(--lijn-donker);
  font-size: 13px;
}

.voet__onder a { color: #aaa; }
.voet__onder a:hover { color: var(--oranje); }

/* Privacyverklaring (privacy.html): leestekst op wit onder de zwarte kopbalk, net als de foutpagina */

.juridisch { padding: 160px 0 96px; }
.juridisch .binnen > * { max-width: 760px; }
.juridisch .kop-l { margin: 0 0 24px; overflow-wrap: anywhere; }
.juridisch h2 {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 40px 0 12px;
}
.juridisch p,
.juridisch li { font-size: 18px; line-height: 1.6; color: var(--tekst); }
.juridisch p { margin: 0 0 16px; }
.juridisch ul { margin: 0 0 16px; padding-left: 22px; }
/* Lange adressen (www.gegevensbeschermingsautoriteit.be) breken op een smalle telefoon af. */
.juridisch a,
.privacy-laag-tekst a { overflow-wrap: anywhere; }
.juridisch .juridisch__bijgewerkt { margin-top: 40px; padding-top: 16px; border-top: 3px solid var(--zwart); font-size: 15px; color: var(--tekst-zacht); }

/* Foutpagina (fout.html): wit vlak onder de zwarte kopbalk, met een weg terug */

.fout { padding: 160px 0 96px; }
.fout .kop-l { margin: 12px 0 24px; }
.fout__tekst { font-size: 19px; line-height: 1.6; color: var(--tekst); max-width: 640px; margin: 0 0 16px; }
.fout__knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 40px; }
.fout__links { list-style: none; margin: 0; padding: 24px 0 0; border-top: 3px solid var(--zwart); display: flex; flex-wrap: wrap; gap: 12px 32px; }

/* ==========================================================================
   Media queries — van breed naar smal (de basisregels hierboven zijn desktop)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
}

/* Kopbalk, mobiel menu: onder 900 px past het tekstmenu niet meer naast woordmerk en telefoon.
   De links gaan achter een menuknop; de telefoonknop blijft in de balk. */
@media (max-width: 900px) {
  .js .kop__binnen { flex-wrap: nowrap; }
  .js .menu { flex-wrap: nowrap; gap: 8px; }
  .js .menu__tel { order: 1; white-space: nowrap; }

  .js .menu__knop {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0 9px;
    margin-right: -9px;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .menu__knop span { display: block; height: 2px; background: var(--wit); transition: transform .2s, opacity .2s; }
  .kop--open .menu__knop span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .kop--open .menu__knop span:nth-child(2) { opacity: 0; }
  .kop--open .menu__knop span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .js .menu__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    flex-direction: column;
    padding: 0 var(--rand) 20px;
    background: var(--zwart);
    font-size: 22px;
  }

  .js .kop--open { background: var(--zwart); }
  .js .kop--open .menu__links { display: flex; }
  .js .menu__links .menu__link { padding: 14px 0; border-top: 1px solid var(--lijn-donker); }
}

/* Contact: één kolom */
@media (max-width: 900px) {
  /* Eén kolom: het blok is precies zo hoog als zijn minimum, het beeld mag dus meestromen. */
  .contact__beeld img { position: static; display: block; height: 620px; }
}

/* Hero: smal */
@media (max-width: 860px) {
  /* Smal loopt de tekst over de volle breedte: het horizontale verloop dekt hem daar niet. */
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .4) 55%, rgba(0, 0, 0, .45) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .2) 55%, rgba(0, 0, 0, 0) 100%);
  }
}

/* Mobiel: rijen worden horizontale scrollrijen in plaats van lange stapels (webdesign.md, mobiel-regel) */

@media (max-width: 768px) {
  .beloftes__raster,
  .panelen,
  .reviews__raster {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--rand);
  }

  .belofte,
  .paneel,
  .review {
    flex: none;
    scroll-snap-align: start;
  }

  .belofte { width: 78%; }
  .panelen { scroll-padding: 0; }
  .paneel { width: 86%; }
  .paneel h2 { font-size: clamp(36px, 12vw, 56px); }

  .reviews__raster {
    gap: 24px;
    margin: 0 calc(-1 * var(--rand));
    padding: 0 var(--rand) 12px;
  }

  .review { width: 84%; }
}

/* Hero: staand beeld (de <source> in index.html wisselt op dezelfde breedte) */
@media (max-width: 759px) {
  .hero__beeld { object-position: 60% 40%; }
}

/* Privacylaag: smal */
@media (max-width: 600px) {
  .privacy-laag-kop { padding: 14px 16px; }
  .privacy-laag-kop h2 { font-size: 24px; }
  .privacy-laag-tekst { padding: 16px 16px 22px; }
}

/* Kopbalk: logo krimpt op smalle telefoons */
@media (max-width: 420px) {
  .logo img { height: 32px; }
  .js .menu__tel { padding: 10px 12px; }
}

@media (max-width: 345px) {
  .logo img { height: 27px; }
  .js .menu { gap: 4px; }
  .js .menu__tel { padding: 10px 8px; letter-spacing: .02em; }
}