/* ==========================================================
   GansEigenWijs — stijlblad · © Mephio Webtools
   Kleuren en lettertypes staan bovenaan als variabelen.
   Wil je een kleur aanpassen? Doe dat hier, één keer.
   ========================================================== */

:root {
  /* Kleuren volgens het kleurvoorstel van Ellen (sept 2026) */
  --creme:        #FCF8F2;   /* B  – ondergrond van de pagina */
  --creme-donker: #F6F0E6;   /* balk bovenaan (menu) */
  --zand:         #F1EBE0;   /* S  – rustige secties */
  --zand-donker:  #E4DBCB;   /* lijntjes en randen */
  --zand-rand:    #C9BDA6;   /* randje van de rustige knop */
  --salie:        #98B566;   /* LG – lichtgroen: takjes, iconen, accenten */
  --salie-licht:  #EAF0DF;   /* lichte groene vlakken */
  --terracotta:   #EB7E64;   /* T  – de hoofdknop */
  --terracotta-d: #D9684E;   /* hoofdknop bij hover */
  --inkt:         #516347;   /* DG – koppen en tekst */
  --inkt-zacht:   #5F7052;   /* lopende tekst */
  --inkt-licht:   #8A967E;   /* kleine bijschriften */
  --fuchsia:      #D14E5E;   /* klein accent */
  --oker:         #D1AC0E;   /* klein accent */
  --blauw:        #0097B2;   /* klein accent */
  --zeegroen:     #3AB497;   /* uit het logo */
  --logoblauw:    #A5EFFB;   /* het water in het logo: menubalk */
  --logoblauw-l:  #DFF7FC;   /* lichte tint daarvan: voet */

  --kop:    "Fraunces", "Georgia", "Times New Roman", serif;
  --tekst:  "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --hand:   "Caveat", "Bradley Hand", cursive;

  --maat: 1180px;
  --rand: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--creme);
  color: var(--inkt-zacht);
  font-family: var(--tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--kop); color: var(--inkt); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.375rem; }
p  { margin: 0; max-width: 60ch; }
p + p { margin-top: 1em; }

.wrap { width: min(100% - 2 * var(--rand), var(--maat)); margin-inline: auto; }
.sectie { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.sectie--zand { background: var(--zand); }

.eyebrow {
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--salie); font-weight: 700; margin-bottom: 0.9rem;
}

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.6rem; border-radius: 999px;
  font-family: var(--tekst); font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 1px solid transparent;
  transition: background 0.2s, transform 0.2s, color 0.2s;
}
.knop:focus-visible { outline: 3px solid var(--salie); outline-offset: 3px; }
.knop--primair { background: var(--knop-primair, var(--fuchsia)); color: #fff; }   /* hoofdknop 'Vertel me jullie verhaal' */
.knop--primair:hover { filter: brightness(0.9); transform: translateY(-1px); }
.nav .knop--rustig, .formulier button { background: var(--knop-primair, var(--fuchsia)); }
.kleur-fuchsia { --knop-primair: var(--fuchsia); }
.kleur-blauw { --knop-primair: var(--blauw); }
.knop--rustig { background: rgba(255, 255, 255, 0.35); color: var(--inkt); border-color: var(--zand-rand); }
.knop--rustig:hover { background: var(--zand); }
.knop svg { width: 1em; height: 1em; }

/* ---------- Header ---------- */
.header { background: var(--logoblauw); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #8FDDEE; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.6rem; }
.logo { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: var(--inkt); }
.logo img { height: 84px; width: auto; display: block; }
.logo__naam { position: absolute; left: -9999px; } /* naam staat in het beeldmerk */
.logo__sub { display: none; font-family: var(--tekst); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--inkt); font-weight: 600; max-width: 15rem; line-height: 1.5; }
@media (max-width: 1400px) { .logo__sub { display: none; } }
@media (max-width: 480px) { .logo img { height: 60px; } }
.nav { display: flex; align-items: center; gap: clamp(0.8rem, 1.8vw, 1.6rem); white-space: nowrap; }
.nav a:not(.knop) { --c: var(--salie); text-decoration: none; color: var(--inkt); font-size: 0.95rem; font-weight: 600; padding: 0.4rem 0.95rem; border-radius: 999px; transition: background 0.2s, color 0.2s; }
.nav a:nth-of-type(1) { --c: var(--zeegroen); }
.nav a:nth-of-type(2) { --c: var(--terracotta); }
.nav a:nth-of-type(3) { --c: var(--fuchsia); }
.nav a:nth-of-type(4) { --c: var(--oker); }
.nav a:nth-of-type(5) { --c: var(--blauw); }
.nav a:nth-of-type(6) { --c: var(--salie); }
.nav a:not(.knop):hover { background: rgba(255, 255, 255, 0.55); color: var(--c); }
.nav a[aria-current="page"]:not(.knop) { background: var(--c); color: #fff; }
.nav .knop--rustig { background: var(--knop-primair, var(--fuchsia)); color: #fff; border-color: transparent; }
.nav .knop--rustig:hover { filter: brightness(0.9); }
.nav .knop { padding: 0.55rem 1.1rem; font-size: 0.9rem; }
.nav-toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; color: var(--inkt); }
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%;
         flex-direction: column; align-items: flex-start; background: var(--logoblauw);
         padding: 1rem var(--rand) 1.5rem; border-bottom: 1px solid #8FDDEE; }
  .nav.is-open { display: flex; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__tekst p { font-size: 1.2rem; margin-top: 1.4rem; }
.hero__acties { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.hero__foto { position: relative; }
.hero__foto img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
}
.hand {
  font-family: var(--hand); color: var(--salie); font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.15; transform: rotate(-4deg); display: inline-block;
}
.hero__hand { position: absolute; left: -1rem; bottom: 1.5rem; background: var(--creme); padding: 0.4rem 0.9rem; border-radius: 999px; }
.takje { color: var(--salie); width: 56px; height: 56px; }

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero__foto { order: -1; max-width: 420px; }
  .hero__hand { left: 0.5rem; }
}

/* ---------- Kernzin + vier pijlers ---------- */
.kern { text-align: center; }
.kern h2 { max-width: 22ch; margin-inline: auto; }
.kern__sub { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--inkt-licht); margin: 1rem auto 0; }
.pijlers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3.5rem; }
.pijler { text-align: center; }
.pijler__icoon { width: 64px; height: 64px; border-radius: 50%; background: var(--salie-licht); color: var(--salie); display: grid; place-items: center; margin: 0 auto 1rem; }
.pijler__icoon svg { width: 28px; height: 28px; }
.pijler h3 { font-size: 1.3rem; }
.pijler p { font-size: 0.95rem; margin: 0.2rem auto 0; }
@media (max-width: 860px) { .pijlers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pijlers { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Over / Ellen kort ---------- */
.intro .wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.intro__foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.intro__tekst h2 { margin-bottom: 1.2rem; }
.intro__tekst .knop { margin-top: 1.6rem; }
@media (max-width: 860px) { .intro .wrap { grid-template-columns: 1fr; } .intro__foto { max-width: 420px; } }

/* ---------- Drie wegen ---------- */
.wegen__kop { text-align: center; margin-bottom: 3rem; }
.wegen__kop p { margin: 0.8rem auto 0; }
.wegen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.weg { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.weg img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.weg:hover .blob { transform: translateY(-3px); }
.weg h3 { margin-top: 1.25rem; }
.weg p { margin-top: 0.4rem; font-size: 0.98rem; }
.weg__link { margin-top: auto; padding-top: 1rem; color: var(--terracotta); font-weight: 600; font-size: 0.95rem; }
@media (max-width: 860px) { .wegen { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* ---------- Citaat ---------- */
.citaat .wrap { max-width: 720px; text-align: center; }
.citaat blockquote { margin: 0; font-family: var(--kop); font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-style: italic; color: var(--inkt); line-height: 1.4; }
.citaat cite { display: block; font-style: normal; font-family: var(--tekst); font-size: 0.9rem; color: var(--inkt-licht); margin-top: 1.25rem; }

/* ---------- Afsluitende uitnodiging ---------- */
.uitnodiging { background: var(--salie-licht); }
.uitnodiging .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.uitnodiging img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.uitnodiging h2 { margin-bottom: 1rem; }
.uitnodiging .knop { margin-top: 1.6rem; }
@media (max-width: 860px) { .uitnodiging .wrap { grid-template-columns: 1fr; } .uitnodiging img { max-width: 420px; } }

/* ---------- Footer ---------- */
.footer { padding-block: 2.5rem; background: var(--logoblauw-l); font-size: 0.9rem; color: var(--inkt-zacht); }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
.footer__motto { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--inkt); }

/* ==========================================================
   Onderdelen voor de overige pagina's
   ========================================================== */
body:not(.is-ready) main { opacity: 0; }
body.is-ready main { opacity: 1; transition: opacity 0.25s; }
.verborgen { position: absolute; left: -9999px; }
.sectie__intro { margin: 0.6rem 0 2.25rem; }
.alineas p { max-width: 60ch; }
.alineas p + p { margin-top: 1em; }

/* Twee kolommen tekst */
.tweeluik .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.tweeluik h2 { margin-bottom: 1rem; }
@media (max-width: 860px) { .tweeluik .wrap { grid-template-columns: 1fr; } }

/* Kaders */
.kader { background: var(--creme); border-radius: 32px 32px 48px 32px; padding: clamp(1.5rem, 3vw, 2.5rem); }
.kader--licht { background: var(--salie-licht); }
.kader--klein { padding: 1rem 1.25rem; font-size: 0.95rem; border-radius: 20px; margin-top: 1.25rem; }
.sectie--zand .kader { background: var(--creme); }
.sectie--zand .kader--licht { background: var(--salie-licht); }

/* Lijst met icoontjes (traject, verwachten, contact) */
.onderdelen { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.onderdelen li { display: flex; gap: 1rem; align-items: flex-start; }
.onderdelen strong { color: var(--inkt); font-weight: 600; }
.onderdeel__icoon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--salie-licht); color: var(--salie); display: inline-grid; place-items: center; }
.onderdeel__icoon svg { width: 20px; height: 20px; }
.onderdelen--kort li { align-items: center; color: var(--inkt); }

/* Traject + prijskaart */
.traject .wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.prijskaart { background: var(--creme); border-radius: 36px 36px 60px 36px; padding: clamp(1.5rem, 3vw, 2.5rem); position: sticky; top: 6rem; }
.prijskaart h3 { font-size: 1.15rem; font-family: var(--tekst); font-weight: 600; color: var(--inkt-zacht); }
.prijskaart__bedrag { font-family: var(--kop); font-size: 3rem; color: var(--inkt); line-height: 1; margin: 0.4rem 0 1rem; }
.prijskaart p + p { margin-top: 0.9rem; }
.prijskaart__termijnen { color: var(--salie); font-weight: 600; }
.prijskaart .knop { margin-top: 1.5rem; }
.goed { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--zand-donker); font-size: 0.95rem; }
.goed strong { color: var(--inkt); display: block; margin-bottom: 0.3rem; }
@media (max-width: 860px) { .traject .wrap { grid-template-columns: 1fr; } .prijskaart { position: static; } }

/* Waar: praktijk, natuur, online */
.waar .wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.waar h2 { margin-bottom: 0.75rem; }
.waar__opties { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.waar__opties li { background: var(--zand); border-radius: 28px 28px 40px 28px; padding: 1.4rem 1.2rem; display: grid; gap: 0.35rem; justify-items: start; }
.waar__opties strong { color: var(--inkt); font-weight: 600; margin-top: 0.5rem; }
.waar__opties span:last-child { font-size: 0.92rem; color: var(--inkt-zacht); }
.waar__opties li:nth-child(1) .onderdeel__icoon { background: #FBE5DE; color: var(--terracotta); }
.waar__opties li:nth-child(2) .onderdeel__icoon { background: var(--salie-licht); color: var(--salie); }
.waar__opties li:nth-child(3) .onderdeel__icoon { background: #DFF1F4; color: var(--blauw); }
@media (max-width: 860px) { .waar .wrap { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .waar__opties { grid-template-columns: 1fr; } }

/* Aanbod: twee manieren om te starten */
.aanbod__kop { max-width: 40rem; margin-bottom: 2rem; }
.aanbod__kop h2 { margin-bottom: 0.75rem; }
.aanbod__kaarten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.aanbod .prijskaart { position: static; display: flex; flex-direction: column; }
.aanbod .prijskaart > .knop { margin-top: auto; align-self: flex-start; }
.aanbod .prijskaart > p + p { margin-top: 0.9rem; }
.aanbod .prijskaart__termijnen { margin-bottom: 1.5rem; }
.aanbod .prijskaart .punten, .aanbod .prijskaart .onderdelen { margin-bottom: 1.5rem; }
.prijskaart__bedrag small { font-family: var(--tekst); font-size: 1rem; color: var(--inkt-zacht); font-weight: 600; }
.prijskaart--los .prijskaart__bedrag { color: var(--fuchsia); }
.prijskaart--traject .prijskaart__bedrag { color: var(--blauw); }
.punten { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.punten li { position: relative; padding-left: 1.6rem; color: var(--inkt); }
.punten li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--fuchsia); opacity: 0.85; }
.onderdelen--compact { gap: 0.8rem; font-size: 0.95rem; }
.onderdelen--compact .onderdeel__icoon { width: 36px; height: 36px; }
.onderdelen--compact .onderdeel__icoon svg { width: 17px; height: 17px; }
.onderdelen--compact li:nth-child(6n+1) .onderdeel__icoon { background: var(--salie-licht); color: var(--salie); }
.onderdelen--compact li:nth-child(6n+2) .onderdeel__icoon { background: #DFF1F4; color: var(--blauw); }
.onderdelen--compact li:nth-child(6n+3) .onderdeel__icoon { background: #F8E3E6; color: var(--fuchsia); }
.onderdelen--compact li:nth-child(6n+4) .onderdeel__icoon { background: #F7F0D3; color: var(--oker); }
.onderdelen--compact li:nth-child(6n+5) .onderdeel__icoon { background: #FBE5DE; color: var(--terracotta); }
.onderdelen--compact li:nth-child(6n+6) .onderdeel__icoon { background: #DDF3EC; color: var(--zeegroen); }
.goed--breed { max-width: 40rem; }
@media (max-width: 860px) { .aanbod__kaarten { grid-template-columns: 1fr; } }

/* Kernzin klein (belevingen) */
.kern--klein h2 { max-width: 30ch; }
.kern__tekst { margin: 1rem auto 0; max-width: 68ch; }

/* Belevingen */
.belevingen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.beleving { display: flex; flex-direction: column; }
.beleving img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.beleving h3 { margin-top: 1.25rem; }
.beleving p { margin-top: 0.5rem; font-size: 0.98rem; }
.beleving .beleving__prijs { margin-top: auto; padding-top: 1rem; font-family: var(--kop); font-size: 1.6rem; color: var(--inkt); line-height: 1.1; }
.beleving__prijs small { display: block; font-family: var(--tekst); font-size: 0.85rem; color: var(--inkt-licht); margin-top: 0.3rem; }
.beleving .knop { align-self: flex-start; margin-top: 1rem; }
@media (max-width: 1000px) { .belevingen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .belevingen { grid-template-columns: 1fr; } .beleving img { max-width: 260px; } }

/* Data meisjescirkels */
.data h2 { margin-bottom: 0.6rem; }
.datalijst { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.9rem; max-width: 720px; }
.datalijst li { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 0.5rem 1.25rem; background: var(--creme); padding: 1rem 1.4rem; border-radius: 20px; align-items: center; }
.datalijst strong { color: var(--inkt); font-weight: 600; }
.datalijst__info { grid-column: 1 / -1; font-size: 0.9rem; color: var(--inkt-licht); }
@media (max-width: 600px) { .datalijst li { grid-template-columns: 1fr; gap: 0.2rem; } }

/* Collectie */
.producten { display: grid; gap: 2rem; }
.product { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; background: var(--creme); border-radius: 36px 36px 64px 36px; padding: clamp(1.25rem, 3vw, 2.5rem); }
.product img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.product__sub { font-family: var(--kop); font-size: 1.4rem; color: var(--inkt); margin: 0.3rem 0 0.8rem; }
.product__onderdelen { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.product__onderdelen li { display: flex; flex-direction: column; font-size: 0.9rem; }
.product__onderdelen strong { color: var(--inkt); font-weight: 600; }
.product__acties { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.product__prijs { font-family: var(--kop); font-size: 1.4rem; color: var(--inkt); margin-top: 0.8rem; }
.product__links { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.35rem; }
.product__links a { color: var(--blauw); font-weight: 600; text-decoration: none; border-bottom: 1px solid #BFE3EA; }
.product__links a:hover { border-bottom-color: var(--blauw); }
.product__links li::before { content: "→ "; color: var(--blauw); }
@media (max-width: 760px) { .product { grid-template-columns: 1fr; } .product img { max-width: 360px; } }
.binnenkort { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.binnenkort__item { background: var(--zand); border-radius: 28px 28px 44px 28px; padding: 1.75rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.binnenkort__item h3 { font-size: 1.2rem; }
.binnenkort__item p { font-size: 0.93rem; margin-top: 0.5rem; }
.label { margin-top: auto; padding-top: 1.1rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta); font-weight: 700; }
@media (max-width: 960px) { .binnenkort { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .binnenkort { grid-template-columns: 1fr; } }

/* Mijn verhaal */
.rugzak { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.5rem; }
.rugzak li { padding-left: 1.5rem; position: relative; color: var(--inkt); }
.rugzak li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 10px; height: 10px; background: var(--salie); transform: rotate(-45deg); }
.intro--omgekeerd .intro__foto { order: 2; }
@media (max-width: 860px) { .intro--omgekeerd .intro__foto { order: 0; } }
.uitnodiging--midden .wrap { grid-template-columns: 1fr; text-align: center; }
.uitnodiging--midden p { margin-inline: auto; }

/* Contact */
.contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact h2 { margin-bottom: 0.6rem; }
.formulier { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.formulier label { display: grid; gap: 0.35rem; font-size: 0.95rem; color: var(--inkt); font-weight: 600; }
.formulier input, .formulier select, .formulier textarea {
  font: inherit; font-weight: 400; color: var(--inkt); background: #fff;
  border: 1px solid var(--zand-donker); border-radius: 14px; padding: 0.75rem 0.95rem; width: 100%;
}
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { outline: 2px solid var(--salie); outline-offset: 1px; border-color: var(--salie); }
.formulier button { justify-self: start; cursor: pointer; }
.direct { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.4rem; }
.direct li { display: flex; gap: 1rem; align-items: flex-start; }
.direct strong { color: var(--inkt); font-weight: 600; }
.direct small { color: var(--inkt-licht); }
.werkgebied { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--zand-donker); }
.werkgebied h3 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
@media (max-width: 860px) { .contact .wrap { grid-template-columns: 1fr; } }
.afsluiting .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.afsluiting img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hand--groot { font-size: clamp(1.8rem, 3vw, 2.4rem); text-align: center; transform: rotate(-3deg); }
.hand__naam { display: inline-block; margin-top: 0.6rem; font-size: 1.2em; }
@media (max-width: 700px) { .afsluiting .wrap { grid-template-columns: 1fr; } }

/* Bedankt */
.bedankt { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.bedankt p { margin: 1.25rem auto 2rem; }

/* ---------- Fotokaders: organische vorm met gekleurde rand (kleur wisselt per foto, zie cms.js) ---------- */
.blob { display: block; position: relative; padding: 2.6%; background: var(--kaderkleur, var(--salie)); clip-path: url(#blob1); transition: transform 0.3s; }
.blob img { width: 100%; height: auto; display: block; clip-path: url(#blob1); }
.weg .blob, .weg .blob img, .product .blob, .product .blob img { clip-path: url(#blob3); }
.beleving .blob, .beleving .blob img, .uitnodiging .blob, .uitnodiging .blob img { clip-path: url(#blob4); }
.afsluiting .blob, .afsluiting .blob img { clip-path: url(#blob2); }
.beleving .blob { padding: 3.5%; }
.kader-fuchsia    { --kaderkleur: var(--fuchsia); }
.kader-zeegroen   { --kaderkleur: var(--zeegroen); }
.kader-oker       { --kaderkleur: var(--oker); }
.kader-blauw      { --kaderkleur: var(--blauw); }
.kader-terracotta { --kaderkleur: var(--terracotta); }
.kader-salie      { --kaderkleur: var(--salie); }

/* Hero: grote foto die tot de rechter paginarand doorloopt, met een golvende linkerkant */
.hero { overflow-x: clip; }
.hero .wrap {
  width: auto; margin-right: 0;
  margin-left: max(var(--rand), (100% - var(--maat)) / 2);
  max-width: calc(var(--maat) + max(var(--rand), (100% - var(--maat)) / 2));
}
.hero__foto .blob, .hero__foto .blob img { clip-path: url(#hero); }
.hero__foto .blob { padding: 0 0 2.2% 2.2%; }
.hero__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }
.hero .wrap { grid-template-columns: 1.2fr 0.8fr; }
.hero__foto { align-self: center; }
.hero__hand { left: auto; right: 6%; bottom: -1.2rem; background: var(--creme); box-shadow: 0 0 0 6px var(--creme); }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero__foto { margin-right: calc(-1 * var(--rand)); margin-left: 15%; max-width: none; }
  .hero__foto { margin-left: 25%; }
  .hero__foto img { aspect-ratio: 4 / 3; }
  .hero__hand { right: 8%; }
}
/* Afsluitende uitnodiging: brede, lage foto */
.uitnodiging img { aspect-ratio: 16 / 10; }
.uitnodiging--midden .blob { display: none; }

.versie { color: var(--inkt-licht); opacity: 0.7; font-size: 0.75rem; margin-left: 0.5rem; }

/* ---------- Kleine kleuraccenten (fuchsia, oker, blauw) ---------- */
.pijler:nth-child(2) .pijler__icoon { background: #F8E3E6; color: var(--fuchsia); }
.pijler:nth-child(3) .pijler__icoon { background: #DFF1F4; color: var(--blauw); }
.pijler:nth-child(4) .pijler__icoon { background: #F7F0D3; color: var(--oker); }
.label { color: var(--fuchsia); }
.beleving:nth-child(1) .beleving__prijs, .beleving:nth-child(1) h3 { color: var(--fuchsia); }
.beleving:nth-child(3) .beleving__prijs, .beleving:nth-child(3) h3 { color: var(--oker); }
.beleving:nth-child(4) .beleving__prijs, .beleving:nth-child(4) h3 { color: var(--blauw); }
.binnenkort__item:nth-child(2) .pijler__icoon { background: #F8E3E6; color: var(--fuchsia); }
.binnenkort__item:nth-child(3) .pijler__icoon { background: #DFF1F4; color: var(--blauw); }
.binnenkort__item:nth-child(4) .pijler__icoon { background: #F7F0D3; color: var(--oker); }

/* ---------- Speelser: accentkleur per pagina en gekleurde knoppen per kaart ---------- */
body[data-page="home"]         { --accent: var(--zeegroen); --accent-l: #DDF3EC; }
body[data-page="begeleiding"]  { --accent: var(--terracotta); --accent-l: #FBE5DE; }
body[data-page="belevingen"]   { --accent: var(--fuchsia); --accent-l: #F8E3E6; }
body[data-page="collectie"]    { --accent: var(--oker); --accent-l: #F7F0D3; }
body[data-page="mijn-verhaal"] { --accent: var(--blauw); --accent-l: #DFF1F4; }
body[data-page="contact"]      { --accent: var(--salie); --accent-l: var(--salie-licht); }
.eyebrow, .hand, .takje { color: var(--accent, var(--salie)); }
.hero__hand { background: var(--accent-l, var(--creme)); box-shadow: 0 0 0 6px var(--accent-l, var(--creme)); }
.kern__sub { color: var(--accent, var(--inkt-licht)); }
.weg:nth-child(1) .weg__link { color: var(--terracotta); }
.weg:nth-child(2) .weg__link { color: var(--fuchsia); }
.weg:nth-child(3) .weg__link { color: var(--oker); }
.beleving .knop { color: #fff; border-color: transparent; }
.beleving:nth-child(1) .knop { background: var(--fuchsia); }
.beleving:nth-child(2) .knop { background: var(--salie); }
.beleving:nth-child(3) .knop { background: var(--oker); }
.beleving:nth-child(4) .knop { background: var(--blauw); }
.beleving:nth-child(2) .beleving__prijs, .beleving:nth-child(2) h3 { color: var(--salie); }
.beleving .knop:hover { filter: brightness(0.92); }
.product:nth-child(2) .knop--primair { background: var(--zeegroen); }
.binnenkort__item:nth-child(1) .label { color: var(--salie); }
.binnenkort__item:nth-child(3) .label { color: var(--blauw); }
.binnenkort__item:nth-child(4) .label { color: var(--oker); }
.prijskaart__termijnen { color: var(--zeegroen); }
.datalijst strong { color: var(--fuchsia); }
.direct li:nth-child(1) .onderdeel__icoon { background: #DFF1F4; color: var(--blauw); }
.direct li:nth-child(2) .onderdeel__icoon { background: #F7F0D3; color: var(--oker); }
.direct li:nth-child(3) .onderdeel__icoon { background: #DDF3EC; color: var(--zeegroen); }
.onderdelen--kort li:nth-child(1) .onderdeel__icoon { background: #F8E3E6; color: var(--fuchsia); }
.onderdelen--kort li:nth-child(3) .onderdeel__icoon { background: #F7F0D3; color: var(--oker); }
.onderdelen--kort li:nth-child(4) .onderdeel__icoon { background: #DFF1F4; color: var(--blauw); }
.onderdelen--kort li:nth-child(5) .onderdeel__icoon { background: #FBE5DE; color: var(--terracotta); }
.formulier button:hover { filter: brightness(0.9); }


/* ---------- Juridische pagina's + cookiemelding ---------- */
.wrap--smal { max-width: 760px; }
.juridisch h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.75rem; }
.juridisch__intro { font-size: 1.15rem; margin-bottom: 2rem; }
.juridisch__tekst h3 { margin: 1.75rem 0 0.5rem; font-size: 1.3rem; color: var(--accent, var(--inkt)); }
.juridisch__tekst p { max-width: 70ch; }
body[data-page="juridisch"] { --accent: var(--zeegroen); --accent-l: #DDF3EC; }
.footer__links a { text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }
.cookiemelding { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 40; max-width: 640px; margin-inline: auto;
  background: #fff; border: 1px solid var(--zand-donker); border-radius: 20px; box-shadow: 0 10px 30px rgba(60,50,40,0.18);
  padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; justify-content: space-between; font-size: 0.95rem; }
.cookiemelding p { margin: 0; flex: 1 1 320px; color: var(--inkt); }
.cookiemelding a { color: var(--blauw); }
.knop--klein { padding: 0.55rem 1.1rem; font-size: 0.9rem; }

/* Slotje in de voet: naar het beheerscherm */
.footer__slot { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.5rem; color: var(--inkt-licht); opacity: 0.55; transition: opacity 0.2s, color 0.2s; }
.footer__slot:hover, .footer__slot:focus-visible { opacity: 1; color: var(--blauw); }
.footer__slot svg { width: 14px; height: 14px; }