/* Daphne Boer Fotografie, variant B: warm en persoonlijk */

@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("fonts/nunito-sans.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* neutraal (R, G en B binnen 4 punten) */
  --grond: #f5f4f2;
  --wit: #ffffff;
  --inkt: #222221;
  --inkt-zacht: #50504e;
  --lijn: #dad9d6;
  /* kleurvlakken richting B */
  --zand: #ebe1d0;
  --zand-diep: #e0d2bb;
  --klei: #7a573f;
  --klei-tekst: #f7f6f4;
  /* enige accent: gedempt groen, afgeleid van haar huidige site */
  --groen: #3d6a4e;
  --groen-donker: #2e533c;

  --kop: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --tekst: "Nunito Sans", "Segoe UI", system-ui, sans-serif;

  --rond-s: 12px;
  --rond-m: 24px;
  --rond-l: 40px;
  --rond-vol: 999px;

  --ruimte-sectie: clamp(4rem, 9vw, 7.5rem);
  --binnen: 1160px;
  --rand: clamp(1rem, 4vw, 2rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 8rem;
}
@media (min-width: 960px) {
  html { scroll-padding-top: 10.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--groen); color: var(--wit); }

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

h1, h2, h3 {
  font-family: var(--kop);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.75rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 800; }
p { margin: 0; text-wrap: pretty; }

a { color: var(--groen); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--groen-donker); }

:focus-visible {
  outline: 3px solid var(--groen);
  outline-offset: 3px;
  border-radius: 6px;
}

.ic {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.binnen {
  width: min(100% - 2 * var(--rand), var(--binnen));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  background: var(--inkt);
  color: var(--wit);
  padding: 0.6rem 1rem;
  border-radius: var(--rond-vol);
}
.skip:focus, .skip:hover { top: 1rem; color: var(--wit); }

.concept {
  margin: 0;
  padding: 0.5rem var(--rand);
  background: var(--inkt);
  color: var(--klei-tekst);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
}

/* knoppen */
.knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--rond-vol);
  background: var(--groen);
  color: var(--wit);
  font-family: var(--kop);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid var(--groen);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.knop:hover { background: var(--groen-donker); border-color: var(--groen-donker); color: var(--wit); }
.knop-rustig { background: transparent; color: var(--groen); }
.knop-rustig:hover { background: var(--wit); color: var(--groen-donker); border-color: var(--groen-donker); }
.knop-klein { min-height: 2.75rem; padding: 0.5rem 1.2rem; font-size: 1rem; }

.tekstlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
}
.tekstlink .ic { transition: transform 0.2s ease; }
.tekstlink:hover .ic { transform: translateX(3px); }

/* kop */
.kop {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(245 244 242 / 0.96);
  border-bottom: 1px solid var(--lijn);
}
.kop-binnen {
  width: min(100% - 2 * var(--rand), var(--binnen));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}
.logo { display: block; flex: none; padding-block: 0.6rem; }
.logo img { width: 190px; }

.menu { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }
.kop-acties { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.kop-bel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.7rem;
  border: 2px solid var(--groen);
  border-radius: var(--rond-vol);
  color: var(--groen);
  font: 800 1rem/1 var(--kop);
  text-decoration: none;
  white-space: nowrap;
}
.kop-bel:hover { background: var(--wit); color: var(--groen-donker); border-color: var(--groen-donker); }
.kop-bel-nr { display: none; }
@media (max-width: 479px) {
  .kop .kop-binnen .logo img { width: 112px; }
  .kop .kop-binnen { gap: 0.375rem; }
  .kop .kop-acties { gap: 0.375rem; }
  .kop .kop-acties .knop { padding-inline: 0.75rem; font-size: 0.9375rem; }
}
@media (min-width: 1280px) {
  .kop-bel { padding-inline: 1rem; }
  .kop-bel-nr { display: inline; }
}
.menu ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.menu ul a {
  color: var(--inkt);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.menu ul a:hover { color: var(--groen-donker); border-bottom-color: currentColor; }

.menu-knop {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-vol);
  background: var(--wit);
  color: var(--inkt);
  font: 700 1rem/1 var(--kop);
  cursor: pointer;
}
.menu-knop .ic-dicht { display: none; }
.menu-knop[aria-expanded="true"] .ic-open { display: none; }
.menu-knop[aria-expanded="true"] .ic-dicht { display: block; }

@media (max-width: 1119px) {
  .js .menu-knop { display: inline-flex; order: 2; }
  .kop-acties { order: 1; margin-left: auto; }
  .kop-binnen { gap: 0.5rem; }
  .logo img { width: 128px; }
  .kop-acties .knop { padding-inline: 1rem; }
  .menu-knop { padding-inline: 0.75rem; min-width: 2.75rem; justify-content: center; }
  .menu-knop span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .js .menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem var(--rand) 1.5rem;
    background: var(--grond);
    border-bottom: 1px solid var(--lijn);
  }
  .js .menu.open { display: flex; }
  .js .menu ul { flex-direction: column; gap: 0; }
  .js .menu ul a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--lijn); }
  /* zonder JavaScript: menu als rustige regel onder het logo */
  html:not(.js) .kop-binnen { flex-wrap: wrap; padding-block: 0.75rem; }
  html:not(.js) .menu { flex-wrap: wrap; gap: 0.75rem 1.25rem; }
  html:not(.js) .menu ul { flex-wrap: wrap; gap: 0.25rem 1rem; }
}

/* hero */
.hero { padding-block: clamp(1.5rem, 4vw, 4rem) var(--ruimte-sectie); }
.hero-binnen {
  width: min(100% - 2 * var(--rand), var(--binnen));
  margin-inline: auto;
  display: grid;
  gap: 2rem;
}
.hero-beeld { position: relative; margin: 0 0.75rem 2.5rem 0; isolation: isolate; }
.hero-beeld::before {
  content: "";
  position: absolute;
  inset: 0.75rem -0.75rem -0.75rem 0.75rem;
  z-index: -1;
  background: var(--zand);
  border-radius: 999px 999px var(--rond-l) var(--rond-l) / 52% 52% var(--rond-l) var(--rond-l);
}
.hero-foto {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 8%;
  /* boog: ronde bovenkant, zachte onderhoeken */
  border-radius: 999px 999px var(--rond-l) var(--rond-l) / 52% 52% var(--rond-l) var(--rond-l);
  box-shadow: 0 18px 40px -24px rgb(34 34 33 / 0.45);
}
.hero-daphne {
  position: absolute;
  left: -0.25rem;
  bottom: -2.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 1.1rem 0.4rem 0.4rem;
  background: var(--wit);
  border-radius: var(--rond-vol);
  box-shadow: 0 10px 28px -16px rgb(34 34 33 / 0.5);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--inkt);
}
.hero-daphne img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 40% 30%;
}

.hero-tekst h1 {
  margin-top: 1rem;
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 700;
  color: var(--inkt-zacht);
  letter-spacing: 0;
}
.hero-belofte {
  font-family: var(--kop);
  font-weight: 800;
  font-size: clamp(2.35rem, 1.5rem + 3.6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero-intro {
  margin-top: 1.5rem;
  max-width: 34rem;
  font-size: 1.125rem;
  color: var(--inkt-zacht);
}
.hero-tekst .knoppen { margin-top: 2rem; }
.hero-voet { margin-top: 1.25rem; font-size: 0.95rem; color: var(--inkt-zacht); }

@media (min-width: 960px) {
  .hero-binnen {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
  }
  .hero-beeld { order: 2; margin: 0 1.5rem 1.5rem 0; }
  .hero-beeld::before { inset: 1.5rem -1.5rem -1.5rem 1.5rem; }
  .hero-foto { aspect-ratio: 4 / 5; max-height: calc(100svh - 9rem); min-height: 520px; }
  .hero-daphne img { width: 6rem; height: 6rem; }
  .hero-daphne { left: -2.5rem; bottom: 2.5rem; }
}

/* geruststelling */
.geruststelling {
  background: var(--zand);
  padding-block: var(--ruimte-sectie);
  border-radius: var(--rond-l) var(--rond-l) 0 0;
}
.geruststelling-kop { max-width: 40rem; }
.geruststelling-kop p { margin-top: 1rem; font-size: 1.2rem; color: var(--inkt-zacht); }
.drie {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.drie li {
  padding-top: 1.25rem;
  border-top: 2px solid rgb(34 34 33 / 0.14);
}
.drie p { margin-top: 0.6rem; color: var(--inkt-zacht); }
.geruststelling-slot {
  margin-top: 2.5rem;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  line-height: 1.3;
  max-width: 34rem;
}
@media (min-width: 760px) {
  .drie { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* sectiekoppen */
.sectie-kop { max-width: 42rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.sectie-kop p { margin-top: 1rem; font-size: 1.125rem; color: var(--inkt-zacht); }

/* aanbod */
.aanbod { padding-block: var(--ruimte-sectie); }
.uitgelicht {
  display: grid;
  gap: 2rem;
  background: var(--wit);
  border-radius: var(--rond-l);
  padding: clamp(1rem, 3vw, 2rem);
}
.uitgelicht img {
  width: 100%;
  aspect-ratio: 4 / 4.2;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: var(--rond-m);
}
.uitgelicht-tekst { padding: 0 0.5rem 0.5rem; align-self: center; }
.uitgelicht-tekst h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.uitgelicht-tekst .voor-wie { margin-top: 0.4rem; font-weight: 700; color: var(--groen); }
.uitgelicht-tekst p + p { margin-top: 1rem; }
.uitgelicht-tekst p:not(.voor-wie) { max-width: 36rem; color: var(--inkt-zacht); }
.uitgelicht-acties { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
@media (min-width: 960px) {
  .uitgelicht { grid-template-columns: 420px 1fr; gap: 3.5rem; padding: 1.5rem 3.5rem 1.5rem 1.5rem; }
  .uitgelicht img { aspect-ratio: 4 / 5; }
}

.diensten {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.dienst {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--lijn);
}
.dienst img {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  border-radius: 50% 50% var(--rond-s) var(--rond-s) / 50% 50% var(--rond-s) var(--rond-s);
}
.dienst p { max-width: 40rem; margin-top: 0.35rem; color: var(--inkt-zacht); font-size: 1rem; }
.dienst .tekstlink { margin-top: 0.5rem; }
@media (min-width: 760px) {
  .diensten { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .dienst { grid-template-columns: 7rem 1fr; }
  .dienst img { width: 7rem; height: 7rem; }
  .dienst:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* stappen */
.stappen {
  background: var(--wit);
  padding-block: var(--ruimte-sectie);
  border-radius: var(--rond-l);
}
.pad {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
  position: relative;
}
.pad li { position: relative; padding-left: 4.25rem; }
.pad li::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: 3rem;
  bottom: -2rem;
  width: 2px;
  background: var(--zand-diep);
  border-radius: 2px;
}
.pad li:last-child::before { display: none; }
.pad-nr {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--zand);
  color: var(--inkt);
  font-family: var(--kop);
  font-weight: 800;
  font-size: 1.15rem;
}
.pad h3 { padding-top: 0.45rem; }
.pad p { margin-top: 0.5rem; color: var(--inkt-zacht); max-width: 30rem; }
@media (min-width: 960px) {
  .pad { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .pad li { padding-left: 0; padding-top: 4.25rem; }
  .pad li::before { left: 3.4rem; right: -2rem; top: 1.4rem; bottom: auto; width: auto; height: 2px; }
  .pad h3 { padding-top: 0; }
}

/* over mij */
.over { padding-block: var(--ruimte-sectie); }
.over-binnen { display: grid; gap: 2.5rem; align-items: center; }
.over-foto {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 999px 999px var(--rond-l) var(--rond-l) / 46% 46% var(--rond-l) var(--rond-l);
  box-shadow: 0 18px 40px -24px rgb(34 34 33 / 0.45);
}
.over-tekst p { margin-top: 1rem; max-width: 36rem; }
.over-tekst h2 + p { margin-top: 1.5rem; }
.feiten { margin: 2rem 0 0; display: grid; gap: 0.75rem; max-width: 36rem; }
.feiten div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--lijn);
}
.feiten dt { font-weight: 700; }
.feiten dd { margin: 0; color: var(--inkt-zacht); }
@media (min-width: 960px) {
  .over-binnen { grid-template-columns: 400px 1fr; gap: 5rem; }
}

/* tarieven */
.tarieven {
  background: var(--zand);
  padding-block: var(--ruimte-sectie);
  border-radius: var(--rond-l) var(--rond-l) 0 0;
}
.tarieven .sectie-kop p { color: var(--inkt-zacht); }
.tarieven-raster { display: grid; gap: 1.5rem; align-items: start; }
.inbegrepen {
  background: var(--grond);
  border-radius: var(--rond-l);
  padding: 1rem 1rem 1.75rem;
}
.inbegrepen img { border-radius: var(--rond-m); width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.inbegrepen h3 { margin: 1.5rem 0.75rem 0; }
.vinkjes { list-style: none; margin: 1rem 0.75rem 0; padding: 0; display: grid; gap: 0.6rem; }
.vinkjes li { display: flex; gap: 0.65rem; align-items: flex-start; line-height: 1.45; }
.vinkjes .ic { color: var(--groen); margin-top: 0.1rem; }
.inbegrepen .klein { margin: 1.25rem 0.75rem 0; }
.klein { font-size: 0.9rem; color: var(--inkt-zacht); }

.prijslijst {
  list-style: none;
  margin: 0;
  padding: 0.5rem clamp(1.25rem, 3vw, 2.25rem);
  background: var(--wit);
  border-radius: var(--rond-l);
}
.prijslijst li { padding: 1.4rem 0; border-bottom: 1px solid var(--lijn); }
.prijslijst li:last-child { border-bottom: 0; }
.prijs-regel { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.prijs-regel h3 { font-size: 1.15rem; }
.bedrag {
  flex: none;
  font-family: var(--kop);
  font-weight: 800;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prijslijst li > p { margin-top: 0.35rem; color: var(--inkt-zacht); font-size: 1rem; max-width: 34rem; }
.tarieven-extra { margin-top: 1.5rem; max-width: 40rem; color: var(--inkt-zacht); }
@media (min-width: 960px) {
  .tarieven-raster { grid-template-columns: 360px 1fr; gap: 2rem; }
  .inbegrepen { position: sticky; top: 11rem; }
}

/* conceptlabel */
.concept-label {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.2rem 0.75rem;
  border: 1px dashed var(--inkt-zacht);
  border-radius: var(--rond-vol);
  color: var(--inkt);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
}

/* Google-reviews */
.greviews { padding-bottom: var(--ruimte-sectie); }
.greviews-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; }
.greviews-kop h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); }
.greviews-score { color: var(--inkt-zacht); font-size: 0.95rem; font-weight: 600; }
.greviews-lijst {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}
.greview {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.75rem;
  background: var(--wit);
  border-radius: var(--rond-m);
}
.sterren { display: inline-flex; gap: 0.15rem; color: var(--groen); }
.sterren svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.greview blockquote { margin: 0; flex: 1; }
.greview blockquote p { font-family: var(--kop); font-weight: 600; font-size: 1.1rem; line-height: 1.5; }
.greview figcaption { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; font-size: 0.95rem; }
.greview-naam { font-weight: 700; }
.greview-bron { color: var(--inkt-zacht); }
.greviews .tekstlink { margin-top: 1.25rem; }

/* voorbereidingskaart */
.kaart {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--zand);
  border-radius: var(--rond-l);
}
.kaart-tekst h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); }
.kaart-tekst p:not(.concept-label) { margin-top: 1rem; max-width: 36rem; color: var(--inkt-zacht); }
.kaart-voorbeeld {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  align-self: center;
}
.kaart-voorbeeld li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 8.5rem;
  padding: 1rem 0.75rem;
  background: var(--grond);
  border-radius: var(--rond-m);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  text-align: center;
}
.kaart-voorbeeld img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; }
.kaart-voorbeeld .ic { width: 2.25rem; height: 2.25rem; color: var(--groen); }
@media (min-width: 960px) {
  .kaart { grid-template-columns: 1fr minmax(0, 26rem); gap: 3rem; }
}

/* cadeaubon */
.cadeau { padding-block: var(--ruimte-sectie); }
.cadeau-binnen { display: grid; gap: 2.5rem; align-items: center; }
.cadeau-tekst p:not(.concept-label) { margin-top: 1rem; max-width: 34rem; font-size: 1.125rem; color: var(--inkt-zacht); }
.cadeau-voorbeelden { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 26rem; }
.cadeau-voorbeelden li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--lijn);
  font-weight: 700;
}
.cadeau-tekst .knop { margin-top: 1.75rem; }
.cadeau-beeld { position: relative; margin: 0 0 2rem; }
.cadeau-beeld > img { width: 100%; border-radius: var(--rond-l); box-shadow: 0 18px 40px -24px rgb(34 34 33 / 0.45); }
.bon {
  position: absolute;
  right: 1rem;
  bottom: -2rem;
  width: min(15rem, 60%);
  display: grid;
  justify-items: start;
  gap: 0.25rem;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--zand);
  border-radius: var(--rond-m);
  box-shadow: 0 10px 28px -16px rgb(34 34 33 / 0.5);
}
.bon img { width: 4.5rem; margin-bottom: 0.25rem; }
.bon-titel { font-family: var(--kop); font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.bon-tekst { color: var(--inkt-zacht); font-size: 0.95rem; }
@media (min-width: 960px) {
  .cadeau-binnen { grid-template-columns: 1fr 520px; gap: 5rem; }
  .cadeau-beeld { margin: 0; }
  .bon { right: -1.5rem; }
}

/* blog */
.blog { padding-bottom: var(--ruimte-sectie); }
.blog .sectie-kop .concept-label { margin-top: 0; margin-left: 0.25rem; vertical-align: 0.1em; }
.blog-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.blog-kaart {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border: 1px dashed var(--inkt-zacht);
  border-radius: var(--rond-m);
}
.blog-kaart h3 { font-size: 1.15rem; line-height: 1.3; }
@media (min-width: 760px) {
  .blog-lijst { grid-template-columns: repeat(3, 1fr); }
}

/* vragen */
.vragen { padding-block: var(--ruimte-sectie); }
.vragen-binnen { display: grid; gap: 2rem; }
.faq { display: grid; gap: 0.75rem; }
.faq details { background: var(--wit); border-radius: var(--rond-m); }
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.35;
  cursor: pointer;
  border-radius: var(--rond-m);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--groen); }
.faq summary:hover { color: var(--groen-donker); }
.faq details[open] .ic-plus { display: none; }
.faq details p { padding: 0 1.5rem 1.4rem; color: var(--inkt-zacht); max-width: 42rem; }
@media (min-width: 960px) {
  .vragen-binnen { grid-template-columns: 1fr 1.8fr; gap: 4rem; align-items: start; }
}

/* contact */
.contact {
  background: var(--klei);
  color: var(--klei-tekst);
  padding-block: var(--ruimte-sectie);
  border-radius: var(--rond-l) var(--rond-l) 0 0;
}
.contact :focus-visible { outline-color: var(--wit); }
.contact-kop { max-width: 40rem; }
.contact-kop h2 { color: var(--wit); }
.contact-kop p { margin-top: 1rem; font-size: 1.15rem; }
/* zo plan je een shoot */
.routes {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.75rem;
  background: var(--wit);
  color: var(--inkt);
  border-radius: var(--rond-m);
}
.route > .ic {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.65rem;
  border-radius: 50%;
  background: var(--groen);
  color: var(--wit);
}
.route h3 { font-size: 1.3rem; }
.route p { color: var(--inkt-zacht); flex: 1; }
.route .knop { margin-top: 0.5rem; }
.route-knoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.route-knoppen .knop { margin-top: 0.5rem; }
.contact-na { margin-top: 2rem; max-width: 46rem; line-height: 2; }
.contact-na a { display: inline-block; padding-block: 0.25rem; line-height: 1.5; }
.contact-na a { color: var(--wit); text-decoration-thickness: 1px; font-weight: 700; }
.contact-na a:hover { color: var(--wit); text-decoration-thickness: 2px; }
@media (min-width: 960px) {
  .routes { grid-template-columns: repeat(3, 1fr); }
}

/* voet */
.voet { background: var(--grond); padding-block: 3rem 2.5rem; font-size: 0.95rem; }
.voet-binnen { display: grid; gap: 1.5rem; align-items: start; }
.voet img { width: 180px; }
.voet p { color: var(--inkt-zacht); line-height: 1.6; }
.voet a { display: inline-block; padding-block: 0.2rem; }
@media (min-width: 760px) {
  .voet-binnen { grid-template-columns: auto 1fr 1fr; gap: 3rem; }
  .voet .klein { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}