h1 {
  font-family: 'kepler-std', serif;
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 20px;
}
h2 {
  font-family: 'open-sans', sans-serif;
  font-weight: 400;
  font-style: normal;
}
h3 {
  font-family: 'kepler-std', serif;
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 20px;
}
p {
  font-family: 'open-sans', sans-serif;
  font-weight: 400;
  font-style: normal;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background-color: rgb(245, 240, 230);
  position: relative;
  z-index: 10;
}

/* Logo */
.logo-link {
  display: inline-block;
}
.logo-link img {
  height: 60px;
  width: auto;
  display: block; /* geen baseline-gap */
  cursor: pointer;
}

/* Rechterblok (nav + evt. CTA) – desktop */
header > .nav-contact {
  display: flex; /* nav naast eventuele knoppen */
  align-items: center;
  gap: 1.5rem;
}

/* Lijst met links – desktop horizontaal */
.nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links > li {
  display: inline-block;
  padding: 0 0.5rem; /* compact tussenruimte */
}
.nav__links li a {
  position: relative;
  color: #000;
  text-decoration: none;
  display: inline-block;
}
.nav__links li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background-color: #000;
  transition: width 0.3s ease;
}
.nav__links li a:hover::after {
  width: 100%;
}

/* Algemene button-stijl (laat staan als je die elders gebruikt) */
button {
  padding: 10px 25px;
  background-color: rgb(164, 74, 63);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  color: rgb(245, 240, 230);
}
button:hover {
  background-color: rgb(78, 52, 46);
}

/* Eventuele CTA link-stijl (optioneel) */
.cta {
  display: inline-block;
  padding: 10px 18px;
  background: rgb(164, 74, 63);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  letter-spacing: 2px;
  transition: background 0.2s ease, transform 0.1s ease;
  font-family: 'kepler-std', serif;
  font-weight: 400;
  font-size: 16px;
}
.cta:hover {
  background: rgb(130, 55, 47);
}
.cta:active {
  transform: translateY(1px);
}

/* Hamburger knop – verborgen op desktop */
.hamburger {
  display: none;
  border: 0;
  background: none;
  padding: 12px;
  cursor: pointer;
}
.hamburger-box {
  display: inline-block;
  width: 28px;
  height: 18px;
  position: relative;
}
.hamburger-line,
.hamburger-line::before,
.hamburger-line::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #000;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease,
    bottom 0.2s ease, background-color 0.2s ease;
}
.hamburger-line {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger-line::before {
  top: -8px;
}
.hamburger-line::after {
  bottom: -8px;
}

/* Overlay – basis (JS voegt element toe aan <header>) */
.menu-overlay {
  opacity: 0;
  pointer-events: none;
}

/* =========================
   RESPONSIVE TUNING
   ========================= */

/* 1) Iets compacter vóór het hamburger-breekpunt
      (zodat “Zonwering/Raamdecoratie” langer past) */
@media (max-width: 1280px) {
  header {
    padding: 26px 8%;
  }
  .logo-link img {
    height: 58px;
  }
  .nav__links > li {
    padding: 0 0.4rem;
  }
  .nav__links li a {
    font-size: 15.5px;
    letter-spacing: 0.2px;
  }
}

@media (max-width: 1200px) {
  header {
    padding: 24px 7%;
  }
  .logo-link img {
    height: 56px;
  }
  .nav__links > li {
    padding: 0 0.35rem;
  }
  .nav__links li a {
    font-size: 15px;
  }
}

/* 2) Hamburger AAN – vroeger breekpunt door lang label */
@media (max-width: 1120px) {
  /* Toon hamburger-knop */
  .hamburger {
    display: inline-block;
  }

  /* Maak van .nav-contact een off-canvas paneel (rechts) */
  header > .nav-contact {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(80vw, 340px);
    background: rgb(245, 240, 230);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 96px 24px 24px; /* ruimte boven voor header */
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.12);
    transform: translateX(100%); /* ingeklapt */
    transition: transform 0.25s ease;
    z-index: 1000; /* boven overlay */
  }
  /* Open state – jouw JS zet .open op <header> */
  header.open > .nav-contact {
    transform: translateX(0);
  }

  /* Overlay achter het paneel */
  .menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 900; /* onder het paneel */
  }
  header.open .menu-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Links onder elkaar in het paneel */
  .nav__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .nav__links > li {
    padding: 0;
    display: block;
  }
  .nav__links a {
    display: block;
    padding: 8px 0;
    font-size: 18px;
    color: #000;
    text-decoration: none;
    position: relative;
  }
  /* Subtiele underline op mobiel mag blijven */
  .nav__links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 2px;
    width: 0;
    background: #000;
    transition: width 0.3s ease;
  }
  .nav__links a:hover::after {
    width: 100%;
  }

  /* Hamburger → kruisje in open state (visueel) */
  header.open .hamburger-line {
    background: transparent;
  }
  header.open .hamburger-line::before {
    top: 0;
    transform: rotate(45deg);
  }
  header.open .hamburger-line::after {
    bottom: 0;
    transform: rotate(-45deg);
  }
}

/* 3) Heel smal: paneel full-screen en centreren van tekst */
@media (max-width: 560px) {
  header > .nav-contact {
    width: 100vw;
    align-items: center;
    padding: 96px 28px 28px;
  }
  .nav__links {
    text-align: center;
  }
}

/* ===== HERO / INTRO – minimal responsive ===== */
.intro {
  position: relative;
  width: 100%;
  height: auto; /* hoogte komt van de afbeelding zelf */
  overflow: hidden;
}

/* Afbeelding schaalt perfect mee met scherm */
.intro-img {
  width: 100%;
  height: auto;
  display: block; /* haalt witte ruimte onder de afbeelding weg */
}

/* Donkere overlay boven de afbeelding */
.intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* Tekst gecentreerd op de afbeelding */
.intro > .tekst-box {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  color: #fff;
  max-width: 70ch;
  margin-inline: auto;
  padding: clamp(24px, 6vw, 64px) 16px;
}

/* Fluid typography */
.intro .tekst-box h1 {
  line-height: 1.2;
  font-size: clamp(15px, 4vw + 10px, 44px);
  margin: 0 0 0.6em;
}
.intro .tekst-box h2 {
  line-height: 1.3;
  font-size: clamp(12px, 2.2vw + 8px, 24px);
  margin: 0 0 0.5em;
}
.intro .tekst-box p {
  line-height: 1.6;
  font-size: clamp(10px, 1vw + 10px, 18px);
  margin: 0;
}

/* CTA-knop */
.intro > .tekst-box > .knop {
  margin-top: clamp(16px, 4vw, 32px);
  padding: clamp(10px, 1vw + 8px, 14px) clamp(18px, 2vw + 10px, 28px);
  background: transparent;
  border: 2px solid rgb(164, 74, 63);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.intro > .tekst-box > .knop:hover {
  background-color: rgb(164, 74, 63);
  color: #fff;
}

/* Kleine schermen: knop iets smaller */
@media (max-width: 400px) {
  .intro > .tekst-box > .knop {
    width: auto;
    max-width: 90%;
  }
}
/* ====== ateliertitel ====== */
.ateliertitel {
  text-align: center; /* tekst in het midden */
  padding-top: clamp(40px, 8vw, 100px);
  padding-bottom: clamp(20px, 4vw, 60px);
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* centreert alles netjes */
  justify-content: center;
  background-color: rgb(245, 240, 230);
}

/* Titelstijl */
.ateliertitel h1 {
  font-size: clamp(24px, 4vw + 8px, 54px);
  line-height: 1.1;
  margin-bottom: 1rem;
  color: rgb(164, 74, 63);
}

/* Tekststijl */
.ateliertitel p {
  max-width: 80ch; /* beperkt breedte voor leesbaarheid */
  font-size: clamp(14px, 1.2vw + 10px, 20px);
  line-height: 1.6;
  color: #333;
  margin: 0 auto;
}

/* ====== Layout (full-width achtergrond, gecentreerde content) ====== */
.zone-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: clamp(16px, 3vw, 36px);
  align-items: center;
  justify-items: center; /* centreer items in kolom */
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: clamp(20px, 5vw, 48px);
  background: rgb(245, 240, 230);
}

/* laat grid-kinderen krimpen zodat tekst niet onder foto valt */
.zone-media,
.zone-content {
  min-width: 0;
}

/* Tekst */
.zone-content {
  text-align: center;
}
.zone-content h1 {
  font-size: clamp(24px, 4vw + 8px, 54px);
  line-height: 1.1;
  margin: 0 0 1rem;
  color: rgb(164, 74, 63); /* jouw accentkleur */
}
.zone-content p {
  max-width: 60ch;
  font-size: clamp(14px, 1.2vw + 10px, 20px);
  line-height: 1.6;
  color: #333;
  margin: 0;
}

/* Slider (desktop/groot) */
.zone-media {
  width: 100%;
}
.zone-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4; /* desktop: iets verticaler dan 16/9 */
  max-height: 500px; /* compact en netjes naast de tekst */
  margin: 0;
  overflow: hidden; /* geen randjes van andere slides */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  background: #ddd;
  outline: none;
  box-sizing: border-box;
}
.zone-slides {
  height: 100%;
  display: flex;
  transition: transform 400ms ease;
  will-change: transform;
}
.zone-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}
.zone-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* mooi bijsnijden, geen uitrekken */
  display: block;
}

/* Pijlen */
.zone-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
  z-index: 2;
}
.zone-prev {
  left: 15px;
}
.zone-next {
  right: 15px;
}
.zone-nav:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Dots uit (voor de zekerheid, ook al gebruik je ze niet) */
.zone-dots {
  display: none !important;
}

/* ================
   Mobiel / Tablet
   ================ */
@media (max-width: 900px) {
  .zone-hero {
    grid-template-columns: 1fr;
  }
  .zone-content {
    order: 2;
    text-align: center;
  }
  .zone-media {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Op mobiel: echt verticale slider met meer hoogte */
  .zone-slider {
    aspect-ratio: 4 / 5; /* verticaler dan desktop */
    max-height: none; /* limiet loslaten */
    height: min(80vh, 560px); /* lekker hoog, maar begrensd */
    width: min(92vw, 520px); /* slanker, verticaal uiterlijk */
    margin: 0 auto; /* centreren */
  }

  .zone-slide img {
    object-fit: cover;
    object-position: center; /* midden van de foto in beeld */
  }
}

/* Dark mode nuance */
@media (prefers-color-scheme: dark) {
  .zone-hero {
    background: #111;
  }
  .zone-content p {
    color: #ddd;
  }
}

/* content blok 1 met de button */
/* ========== BLOK 1 ========== */
.content-blok1 {
  background-color: rgb(245, 240, 230);
  padding: 60px 20px;
}
background-image .content-blok1 > .titel {
  font-size: 20px;
  color: rgb(164, 74, 63);
  letter-spacing: 4px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
}

.content-blok1 > .inhoud {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* ⬅ onderkanten uitlijnen op desktop */
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: nowrap; /* ⬅ op desktop op één rij houden */
}

.content-blok1 > .inhoud > .foto img {
  width: 100%;
  max-width: 450px;
  height: auto; /* geen vaste hoogte */
  border-radius: 8px;
  display: block;
}

.content-blok1 > .inhoud > .tekst-blok1 {
  max-width: 500px;
  text-align: left;
  display: grid; /* ✅ */
  gap: 12px; /* nette verticale spacing */
}

.content-blok1 > .inhoud > .tekst-blok1 > h3 {
  margin-bottom: 15px;
  font-size: 22px;
}

.content-blok1 > .inhoud > .tekst-blok1 > p {
  line-height: 1.6rem;
  margin-bottom: 15px;
}
.content-blok1 > .inhoud > .tekst-blok1 > .button {
  display: inline-block;
  justify-self: start; /* ✅ knop lijn links met tekst */
  padding: 12px 24px;
  background-color: rgb(164, 74, 63);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.content-blok1 > .inhoud > .tekst-blok1 > .button:hover {
  background-color: rgb(78, 52, 46);
}

/* zelfde font als je <p> */
.content-blok1 .tekst-blok1 p,
.content-blok1 .tekst-blok1 li {
  font-family: 'open-sans', sans-serif;
  font-weight: 400;
  font-style: normal;
}
.content-blok1 > .inhoud > .tekst-blok1 > p:last-child {
  margin-bottom: 0; /* strakke onderlijn met de foto */
}
/* lijst opmaak in content-blok1 */
.content-blok1 .tekst-blok1 ul.punten {
  list-style: disc;
  padding-left: 1.2rem; /* inspringing voor de bullets */
  margin: 0 0 15px 0;
}
.content-blok1 .tekst-blok1 ul.punten li {
  margin: 0.4rem 0;
  line-height: 1.6rem;
}

/* optioneel: bullets in je merk-kleur */
.content-blok1 .tekst-blok1 ul.punten li::marker {
  color: rgb(164, 74, 63);
}

/* op mobiel blijft de lijst links uitgelijnd,
   ook al centreer je de rest van de tekst */
@media (max-width: 900px) {
  .content-blok1 .tekst-blok1 ul.punten {
    display: inline-block; /* zodat links uitlijnen midden in de kolom kan */
    text-align: left;
  }
}
@media (max-width: 900px) {
  .content-blok1 > .inhoud {
    flex-direction: column; /* ✅ onder elkaar */
    align-items: center; /* centreer de kolom */
    gap: 20px;
  }

  /* Foto en tekst even breed als de foto (max 450px) */
  .content-blok1 > .inhoud > .foto,
  .content-blok1 > .inhoud > .tekst-blok1 {
    width: min(100%, 450px); /* ✅ zelfde lijnbreedte */
  }

  /* Als je echt 1-op-1 dezelfde breedte wil als de foto */
  .content-blok1 > .inhoud > .foto img {
    width: 100%;
    max-width: 450px; /* houdt foto en tekst exact gelijk */
    height: auto;
  }
}

/* ========== BLOK 2 (reverse) ========== */
.content-blok2 {
  background-color: rgb(245, 240, 230);
  padding: 20px 20px;
}

.content-blok2 > .layoutreverse {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* ⬅ onderkanten uitlijnen op desktop */
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: nowrap; /* ⬅ op desktop op één rij houden */
  flex-direction: row-reverse; /* foto rechts, tekst links */
}

.content-blok2 > .layoutreverse > .content-foto img {
  width: 100%;
  max-width: 450px;
  height: auto; /* geen vaste hoogte */
  border-radius: 20px;
  object-fit: cover;
  display: block;
}

.content-blok2 > .layoutreverse > .content-tekst {
  max-width: 500px;
  text-align: right;
}

.content-blok2 > .layoutreverse > .content-tekst h3 {
  margin-bottom: 15px;
  font-size: 22px;
}

.content-blok2 > .layoutreverse > .content-tekst p {
  line-height: 1.6rem;
  margin-bottom: 40px;
}
.content-blok2 > .layoutreverse > .content-tekst p:last-child {
  margin-bottom: 0; /* strakke onderlijn met de foto */
}
.content-blok2 > .layoutreverse > .content-tekst > .button {
  background-color: rgb(164, 74, 63);
  color: #fff;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  border-radius: 6px; /* mag weg als je ‘m niet wil */
}
.content-blok2 > .layoutreverse > .content-tekst > .button:hover {
  background-color: rgb(78, 52, 46);
}

/* ===== Tablet & mobiel: stapelen en centreren ===== */
@media (max-width: 900px) {
  .content-blok1 > .inhoud,
  .content-blok2 > .layoutreverse {
    flex-direction: column; /* foto boven, tekst onder */
    align-items: center; /* horizontaal centreren */
    text-align: center; /* tekst centreren */
    gap: 30px;
    /* flex-wrap maakt hier niet uit; kolom stapelt altijd */
  }

  /* tekstblokken mogen iets breder op tablet */
  .content-blok1 > .inhoud > .tekst-blok1,
  .content-blok2 > .layoutreverse > .content-tekst {
    max-width: 680px;
  }

  /* afbeeldingen echt in het midden */
  .content-blok1 > .inhoud > .foto img,
  .content-blok2 > .layoutreverse > .content-foto img {
    margin-inline: auto;
  }
}

/* Telefoon: compacter */
@media (max-width: 600px) {
  .content-blok1 {
    padding: 40px 16px;
  }
  .content-blok2 {
    padding: 24px 16px;
  }
}
@media (min-width: 901px) {
  .content-blok1 > .inhoud > .foto img,
  .content-blok2 > .layoutreverse > .content-foto img {
    height: 400px; /* ← pas dit getal aan naar smaak (bijv. 260–320) */
    object-fit: cover; /* vult het kader netjes zonder vervormen */
  }
}

/* ===== Mobiel & tablet: foto boven, tekst eronder, zelfde breedte ===== */
@media (max-width: 900px) {
  /* stapelen */
  .content-blok2 > .layoutreverse {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  /* foto & tekst even breed (max 450px) */
  .content-blok2 > .layoutreverse > .content-foto,
  .content-blok2 > .layoutreverse > .content-tekst {
    width: min(100%, 450px);
  }

  /* afbeelding netjes centreren en schaalbaar */
  .content-blok2 > .layoutreverse > .content-foto img {
    width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
  }

  /* tekst links uitlijnen (rustiger bij langere paragrafen) */
  .content-blok2 > .layoutreverse > .content-tekst {
    text-align: left;
  }
}

.fotoblok {
  width: 100%;
  height: clamp(
    180px,
    28vw,
    340px
  ); /* ← pas aan: min 180px, schaalt mee, max 340px */
  overflow: hidden; /* crop netjes wat te hoog is */
}

.fotoblok img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* vult het kader zonder vervormen */
  display: block;
}

/* Sectie & titel */
.realisaties-blok {
  padding: 60px 20px;
  background-color: #f9f5f0;
  text-align: center;
}
.realisaties-blok > .realisaties-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
}
.realisaties-blok > .realisaties-wrapper > .blok-titel {
  font-size: 20px;
  color: rgb(164, 74, 63);
  letter-spacing: 4px;
  font-weight: bold;
  margin: 0 0 30px 0;
  text-align: center;
}

/* Container + track */
.realisaties-blok .carousel-container {
  overflow: hidden;
  width: 100%;
}
.realisaties-blok .carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

/* Kaarten: 3 per view op desktop */
.realisaties-blok .carousel-track .card {
  flex: 0 0 calc(100% / 3); /* 3 kaarten naast elkaar */
  box-sizing: border-box;
  padding: 0 1rem; /* ruimte tussen kaarten */
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Kaart inhoud */
.realisaties-blok .carousel-track .card .card-img {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.realisaties-blok .carousel-track .card .card-img img {
  width: 100%;
  height: 300px; /* vaste, nette hoogte; pas aan naar smaak */
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* Overlay “Bekijk” op hover */
.card-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
.card:hover .card-overlay {
  opacity: 1;
}

/* Tekst onder de foto */
.realisaties-blok .carousel-track .card .card-text {
  padding-top: 1rem;
  text-align: left;
  color: #000;
  background: none;
}
.realisaties-blok .carousel-track .card .card-text h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}
.realisaties-blok .carousel-track .card .card-text p {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Dots */
.realisaties-blok .carousel-dots {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  gap: 10px;
}
.realisaties-blok .carousel-dots .dot {
  width: 10px;
  height: 10px;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.realisaties-blok .carousel-dots .dot.active {
  background-color: rgb(164, 74, 63);
}

/* “Bekijk alle projecten” knop */
.realisaties-blok .realisaties-button {
  margin-top: 40px;
  text-align: center;
}
.realisaties-blok .realisaties-button .button {
  display: inline-block;
  padding: 12px 24px;
  background-color: rgb(164, 74, 63);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.realisaties-blok .realisaties-button .button:hover {
  background-color: rgb(78, 52, 46);
}

/* ========== RESPONSIVE: 1 kaart per view ≤ 900px ========== */
@media (max-width: 900px) {
  .realisaties-blok .carousel-track .card {
    flex: 0 0 100%; /* 1 kaart per “slide” */
    padding: 0 0.75rem;
  }
  /* optioneel: iets lagere foto op kleiner scherm */
  .realisaties-blok .carousel-track .card .card-img img {
    height: 260px;
  }
}

/* Achtergrond hero */
.bg-contact {
  background-image: url('/images/headerfotozes.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 20px;
}

/* Kaart */
.contact-container {
  max-width: 650px; /* ⬅️ breder gemaakt */
  width: 90%; /* vult bijna het hele scherm op kleinere resoluties */
  margin: 50px auto;
  padding: 40px 50px; /* iets meer binnenruimte */
  padding-top: 0;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.contact-container > h1 {
  text-align: center;
  color: #333;
  padding-top: 10px;
}

.contact-container > p {
  text-align: center;
  color: #555;
}

.contact-container > p > a {
  color: rgb(164, 74, 63);
  text-decoration: none;
}

/* Nieuwe structuur: .contact-form i.p.v. form */
.contact-container .contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.contact-container .contact-form label {
  font-weight: bold;
  color: #333;
}

.contact-container .contact-form input,
.contact-container .contact-form textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Knop binnen de nieuwe .contact-form */
.contact-container .contact-form button {
  background-color: rgb(164, 74, 63);
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.05s ease;
}
.contact-container .contact-form button:hover {
  background-color: rgb(150, 66, 56);
}
.contact-container .contact-form button:active {
  transform: translateY(1px);
}

/* ===== Responsiveness ===== */
@media (max-width: 600px) {
  .bg-contact {
    padding: 56px 14px;
  }

  .contact-container {
    margin: 24px auto;
    padding: 20px;
  }

  .contact-container .contact-form {
    gap: 12px;
  }

  .contact-container .contact-form input,
  .contact-container .contact-form textarea {
    font-size: 15px;
    padding: 10px;
  }

  .contact-container .contact-form button {
    padding: 12px 14px;
    font-size: 15px;
  }
}

.contact-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 75vh;
  padding: 40px 0;
}

/* Op mobiel: meer ademruimte */
@media (max-width: 600px) {
  .contact-section {
    padding: 20px 0;
    min-height: auto;
  }
}

@media (prefers-color-scheme: dark) {
  .contact-container {
    background-color: #111;
    color: #eee;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  }
  .contact-container > h1 {
    color: #eee;
  }
  .contact-container > p {
    color: #ccc;
  }
  .contact-container .contact-form label {
    color: #ddd;
  }
  .contact-container .contact-form input,
  .contact-container .contact-form textarea {
    background: #161616;
    border-color: #2a2a2a;
    color: #eee;
  }
  .contact-container .contact-form input::placeholder,
  .contact-container .contact-form textarea::placeholder {
    color: #8a8a8a;
  }
}
/*footer*/
.site-footer {
  margin-top: 25px;
  background-color: rgb(164, 74, 63);
  color: #1a1a1a;
  padding: 60px 20px 30px;
  margin-top: 0px;
  font-family: 'Helvetica Neue', sans-serif;
}
.site-footer > .footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-logo h2 {
  font-size: 24px;
  margin-bottom: 8px;
  color: rgb(245, 240, 230); /* rouille accentkleur */
}

.footer-logo p {
  font-size: 14px;
  color: rgb(245, 240, 230);
}
.footer-logo img {
  width: 200px;
  height: auto;
}

.footer-nav h4,
.footer-contact h4,
.footer-socials h4 {
  font-size: 16px;
  margin-bottom: 12px;
  color: rgb(0, 0, 0);
}

.footer-nav ul {
  list-style: none;
  padding: 0;
}

.footer-nav li {
  margin-bottom: 8px;
}

.footer-nav a {
  text-decoration: none;
  color: rgb(245, 240, 230);
  transition: color 0.3s ease;
}

.footer-nav a:hover {
  color: #000000; /* rouille hoverkleur */
}
.footer-contact .mail-stack .mail-link {
  display: block; /* zorgt dat margin werkt */
  margin: 0 0 8px; /* ruimte tussen de twee */
  color: rgb(245, 240, 230);
  font-size: 14px;
  text-decoration: none;
}
.footer-contact .mail-stack .mail-link:last-child {
  margin-bottom: 0;
}
.footer-contact .mail-stack .mail-link:hover {
  color: #000;
}
.footer-contact > p > a:hover {
  color: #000;
}

.footer-socials > .social-icons > a:hover {
  color: #000;
}

.footer-contact p {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgb(245, 240, 230);
}
.footer-contact a {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgb(245, 240, 230);
}

.footer-socials .social-icons a {
  margin-right: 12px;
  display: inline-block;
}

.footer-socials img {
  width: 24px;
  height: 24px;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.footer-socials img:hover {
  filter: none;
}

.footer-bottom {
  text-align: center;
  margin-top: 40px;
  font-size: 12px;
  color: rgb(245, 240, 230);
}

.footer-logo-img {
  max-width: 180px;
  height: auto;
  margin-bottom: 10px;
  margin-top: 35px;
  display: block;
}

.footer-socials {
  text-align: center;
  padding: 20px 0;
}

.footer-socials h4 {
  font-size: 16px;
  margin-bottom: 10px;
}

.social-icons a {
  font-size: 20px;
  color: rgb(245, 240, 230);
  margin: 0 10px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: rgb(245, 240, 230); /* jouw rouille kleur */
}

@media (max-width: 900px) {
  .site-footer > .footer-container {
    display: flex;
    flex-direction: column; /* onder elkaar */
    align-items: center; /* alles in het midden */
    gap: 24px;
  }

  /* secties full-width (met leesbare max) en centreren */
  .site-footer .footer-logo,
  .site-footer .footer-nav,
  .site-footer .footer-contact,
  .site-footer .footer-socials {
    width: 100%;
    max-width: 640px;
    text-align: center;
  }

  /* logo echt centreren */
  .site-footer .footer-logo img {
    display: block;
    margin-inline: auto;
  }

  /* menu-items onder elkaar en gecentreerd */
  .site-footer .footer-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
  }

  /* socials mooi naast elkaar en gecentreerd */
  .site-footer .social-icons {
    display: flex;
    justify-content: center;
    gap: 12px;
  }
  /* voorkom dubbele ruimte met bestaande margin-right */
  .site-footer .footer-socials .social-icons a {
    margin-right: 0;
  }

  .footer-bottom {
    margin-top: 24px;
  }
  .footer-bottom .cookies {
    margin-top: 8px;
    font-size: 12px;
    color: rgb(245, 240, 230);
  }
  .footer-bottom .cookies a {
    color: #fff; /* of je merk-kleur */
    text-decoration: underline;
    transition: color 0.3s ease;
  }
  .footer-bottom .cookies a:hover {
    color: #000; /* hoverkleur */
  }
}

.privacy-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.privacy-container h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: rgb(164, 74, 63); /* je merk-kleur */
  text-align: center;
}

.privacy-container h2 {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  color: #222;
}

.privacy-container p {
  margin-bottom: 1rem;
}

.privacy-container ul {
  margin: 0 0 1rem 1.2rem;
  padding: 0;
  list-style: disc;
}

.privacy-container a {
  color: rgb(164, 74, 63);
  text-decoration: underline;
}
.privacy-container a:hover {
  color: #000;
}

.comingsoon {
  font-size: 50px;
  text-align: center;
}
/*project pagina */

/* 1. Projecten */
.projecten {
  position: relative;
  width: 100%;
  height: auto; /* hoogte door de afbeelding zelf */
  overflow: hidden;
}

.projecten-img {
  width: 100%;
  height: auto; /* schaal netjes mee met scherm */
  display: block;
}

/* overlay blijft gecentreerd zoals bij jou */
.projecten-overlay {
  position: absolute;
  inset: 0; /* vult de hele hero */
  display: flex;
  justify-content: center; /* zet de tekstgroep verticaal in het midden */
  align-items: center;
  text-align: center;
}
.projecten-overlay .overlay-text {
  transform: translateY(-120%); /* ⬅️ schuif alles samen wat hoger */
  max-width: 100ch;
  padding: 0 1rem;
  color: #333;
}
/* Titel: vloeiende grootte */
.projecten-overlay h1 {
  margin: 0 0 1rem;
  font-size: clamp(24px, 4vw + 8px, 54px);
  line-height: 1.1;
  color: #333;
}

/* Subtekst: blijft absoluut gepositioneerd, maar met responsive offset */
.projecten-overlay p {
  margin: 0;
  font-size: clamp(14px, 1.2vw + 10px, 20px);
  line-height: 1.4;
  color: #333;
}

/* iets compacter op small tablets/phones, zonder layout te veranderen */
@media (max-width: 900px) {
  .projecten-overlay h1 {
    font-size: clamp(22px, 5vw, 40px);
  }
  .projecten-overlay p {
    bottom: clamp(-40px, -6vh, -16px);
  }
}

@media (max-width: 600px) {
  .projecten-overlay h1 {
    font-size: clamp(20px, 6vw, 34px);
  }
  .projecten-overlay p {
    bottom: clamp(-28px, -5vh, -12px);
  }
}

/* lage schermhoogte (landscape mobiel): nog iets minder negatief */
@media (max-height: 560px) and (orientation: landscape) {
  .projecten-overlay p {
    bottom: clamp(-20px, -3vh, -8px);
  }
}

/* 2. Tekstblok */
.details {
  display: flex;
  justify-content: center;
  padding: 4rem 2rem;
  background-color: rgb(245, 240, 230);
  font-family: sans-serif;
}

.details-box {
  max-width: 66%;
  text-align: left;
  line-height: 1.8;
}
.details-box > p {
  font-family: 'open-sans', sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  color: #555;
}

.realisaties-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  text-align: center; /* of 'left' als je dat mooier vindt */
  letter-spacing: 1px;
}

/* ===================== FOTOGRID — NIEUW ===================== */
/* 4 kolommen op desktop, tekst (titel + bullets) BOVEN de foto */
.foto-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 naast elkaar */
  gap: 1rem;
  padding: 0 2rem;
  background-color: rgb(245, 240, 230);
}

/* Zorg dat elk item titel+lijst bovenaan even hoog krijgt */
.foto-item {
  display: flex;
  flex-direction: column;
}

.foto-caption {
  /* hoogte afgestemd op: 1 regel titel + 3 bullets */
  min-height: 7.2rem; /* ≈ afgesteld op je huidige fontgroottes */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0 0 0.5rem 0; /* ruimte tussen caption en foto */
  padding: 0.25rem 0;
}

/* Titel en bullets voorspelbaar maken */
.foto-title {
  margin: 0 0 0.4rem 0;
  line-height: 1.2;
}

.foto-punten {
  list-style: disc;
  padding-left: 1.2rem;
  margin: 0; /* geen extra marge rondom de lijst */
}
.foto-punten li {
  margin: 0.25rem 0; /* kleine, vaste marge per bullet */
  line-height: 1.6;
}

/* Responsive: iets compacter op kleinere schermen,
   maar nog steeds ruimte voor 3 bullets */
@media (max-width: 900px) {
  .foto-caption {
    min-height: 6.4rem;
  }
}
@media (max-width: 560px) {
  .foto-caption {
    min-height: 5.6rem;
  }
}
.foto-punten li::marker {
  color: rgb(164, 74, 63); /* merk-kleur voor bullets (optioneel) */
}

/* Foto’s consistent en compacter houden */
.foto-item > img {
  width: 100%;
  aspect-ratio: 4 / 5.2; /* was 4 / 3 → nu ~7% hoger */
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.foto-item.no-bullets .foto-caption {
  min-height: auto; /* geen vaste hoogte */
}

/* ===================== RESPONSIVE BREAKPOINTS ===================== */
/* 3 kolommen op grote tablets/small laptops */
@media (max-width: 1200px) {
  .foto-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 2 kolommen op tablet en kleiner */
@media (max-width: 900px) {
  .foto-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 0 1rem;
  }
}

/* Compactere gutters op hele kleine telefoons, blijft 2 kolommen */
@media (max-width: 560px) {
  .foto-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0 0.5rem;
  }
}

/* 1 kolom op héél kleine schermen */
@media (max-width: 480px) {
  .foto-grid {
    grid-template-columns: 1fr; /* onder elkaar */
    gap: 0.5rem;
    padding: 0 0.5rem;
  }

  /* optioneel: caption iets compacter */
  .foto-caption {
    min-height: 5rem;
  }

  /* optioneel: minder hoge foto op écht smalle schermen */
  /* .foto-item > img { aspect-ratio: 4 / 4; } */
}

/* ===================== PROJECT BUTTONS (ongewijzigd) ===================== */
.project-buttons {
  background-color: rgb(245, 240, 230);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.project-buttons .button {
  background-color: rgb(164, 74, 63);
  color: #fff;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  border-radius: 6px; /* mag weg als je ‘m niet wil */
}

.project-buttons .button:hover {
  background-color: rgb(78, 52, 46);
}

/* Details: centreren + responsive fontgrootte */
.details-box {
  text-align: center; /* i.p.v. left */
  margin-inline: auto; /* box zelf netjes in het midden */
}

.details-box > p {
  /* schaalt soepel mee: kleiner op small, groter op large */
  font-size: clamp(14px, 1.2vw + 10px, 20px);
  line-height: 1.8;
  /* optioneel voor mooie leesbreedte:
     max-width: 70ch; margin-inline: auto; */
}

/* Zorg dat de header altijd klikbaar boven alles staat */
header {
  position: relative;
  z-index: 2000; /* hoger dan hero/sectie overlays */
}

/* Overlay + paneel + hamburger z-indexen en gedrag */
@media (max-width: 900px) {
  .menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1900; /* onder paneel, onder header */
  }
  header.open .menu-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  header > .nav-contact {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(80vw, 320px);
    background: rgb(245, 240, 230);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 96px 24px 24px;
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 2001; /* boven overlay */
  }
  header.open > .nav-contact {
    transform: translateX(0);
  }

  .hamburger {
    position: relative;
    z-index: 2100; /* boven alles zodat hij klikbaar blijft */
  }

  /* optioneel: kruisje animatie */
  header.open .hamburger .hamburger-line {
    background: transparent;
  }
  header.open .hamburger .hamburger-line::before {
    top: 0;
    transform: rotate(45deg);
  }
  header.open .hamburger .hamburger-line::after {
    bottom: 0;
    transform: rotate(-45deg);
  }
}

/* Zorg dat de hero-afbeelding netjes schaalt */
.projecten .projecten-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Overlay: wat flexibele binnenruimte en centreren */
.projecten > .projecten-overlay {
  box-sizing: border-box;
  padding: 0 clamp(12px, 4vw, 48px);
  text-align: center;
}

/* Responsieve titel */
.projecten > .projecten-overlay > h1 {
  color: #000;
  margin: 0 0 1rem 0;
  line-height: 1.1;
  font-size: clamp(24px, 5vw, 56px);
  padding-bottom: clamp(1rem, 5vh, 4rem); /* was 4rem, nu schaalbaar */
}

/* Responsieve paragraaf */
.projecten > .projecten-overlay > p {
  color: #000;
  margin: 0 auto;
  max-width: min(90%, 65ch); /* prettige leesbreedte */
  line-height: 1.6;
  font-size: clamp(14px, 1.4vw + 10px, 20px);
}

/* Lage schermhoogte (bv. landscape op mobiel): iets compacter */
@media (max-height: 560px) and (orientation: landscape) {
  .projecten > .projecten-overlay > h1 {
    padding-bottom: 1rem;
  }
  .projecten > .projecten-overlay > p {
    font-size: clamp(13px, 2.2vh, 16px);
  }
}

/* Optioneel: subtiele leesbaarheid op lichte foto's */
/*
.projecten > .projecten-overlay > h1,
.projecten > .projecten-overlay > p { text-shadow: 0 1px 2px rgba(0,0,0,.06); }
*/

/* Zet de paragraaf weer in normale flow → geen overlap met H1 */
.projecten > .projecten-overlay > p {
  position: static; /* i.p.v. absolute */
  bottom: auto;
  left: auto;
  transform: none;
  margin: 0 auto;
  max-width: min(90%, 65ch);
  line-height: 1.6;
}

/* Zorg voor vaste ruimte tussen titel en tekst */
.projecten > .projecten-overlay > h1 {
  margin: 0 0 clamp(12px, 2vh, 32px);
}

/* Desktop: je oude positie behouden (optioneel) */
@media (min-width: 901px) {
  .projecten > .projecten-overlay > p {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -80px; /* jouw oude waarde */
  }
}

/* Mobiel/tablet: stapelen, dus geen overlap */
@media (max-width: 900px) {
  .projecten > .projecten-overlay > p {
    position: static;
    bottom: auto;
    left: auto;
    transform: none;
    margin-top: 0.75rem;
  }
}

/* ===== Split vacature blok ===== */
.split-vacature {
  background: #f5f0e6; /* match je site kleuren indien gewenst */
  padding: clamp(1.25rem, 1rem + 2vw, 3rem) 1rem;
}
.split-vacature > .split-container {
  width: min(1200px, 92vw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* twee kolommen desktop */
  align-items: stretch;
  gap: clamp(1rem, 1vw, 2rem);
  min-height: 420px; /* optioneel: zorgt voor mooie hoogte op desktop */
}

/* Zorg dat op desktop de foto rechts staat */
.split-vacature > .split-container > .split-tekst {
  order: 1;
  display: grid;
  align-content: center;
  gap: 0.9rem;
}
.split-vacature > .split-container > .split-media {
  order: 2;
}

/* Typo & knoppen */
.split-vacature > .split-container > .split-tekst h2 {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  line-height: 1.1;
}
.split-vacature > .split-container > .split-tekst p {
  margin: 0;
  max-width: 60ch;
  color: #4b4b55;
  line-height: 1.6;
}
.split-vacature > .split-container > .split-tekst > .btn-cta {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  background: #a44a3f; /* jouw merk-kleur? */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.05s ease, filter 0.15s ease;
}
.split-vacature > .split-container > .split-tekst .btn-cta:hover {
  filter: brightness(0.95);
}
.split-vacature > .split-container > .split-tekst > .btn-cta:active {
  transform: translateY(1px);
}

/* Afbeelding vult de helft mooi op */
.split-vacature > .split-container > .split-media {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.split-vacature > .split-container > .split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* vult het blok zonder te rekken */
  display: block;
}

@media (min-width: 901px) {
  .split-vacature .btn-cta {
    padding: 0.6rem 1.2rem; /* iets minder breed */
    font-size: 0.95rem; /* optioneel: iets kleiner lettertype */
    max-width: fit-content; /* knop wordt zo breed als de tekst */
  }
}
/* ===== Responsiveness ===== */
/* === Mobile / tablet === */
@media (max-width: 900px) {
  /* hogere specificiteit dan .split-container */
  .split-vacature > .split-container {
    grid-template-columns: 1fr; /* onder elkaar */
    min-height: unset;
  }

  /* expliciet de volgorde zetten (tekst eerst, foto erna) */
  .split-vacature > .split-container > .split-tekst {
    order: 1;
  }
  .split-vacature > .split-container > .split-media {
    order: 2;
    height: 50vh;
  }

  /* als je liever auto-hoogte wil i.p.v. 50vh: zet height:auto en img height:auto */
  /* .split-vacature > .split-container > .split-media { height: auto; }
     .split-vacature > .split-container > .split-media img { height: auto; } */
}

@media (max-width: 480px) {
  .split-vacature > .split-container > .split-media {
    height: 42vh;
  }
}