/* ═══════════ HOST RESET ═══════════
   Overgenomen uit de artifact-host van current-page.html. Op desktop maakt
   dit blok geen pixel verschil, maar de safe-area-padding telt wel op
   telefoons met een notch; daarom blijft het staan. */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* ═══════════ TOKENS ═══════════ */
:root {
  --green:      #2BA45F;
  --green-600:  #1E8449;
  --green-900:  #12492A;
  --green-50:   #EDF7F0;
  --sand:       #C58A2A;
  --sand-600:   #A87322;
  --sand-50:    #FBF4E8;
  --sand-200:   #EBD7B4;

  --bg:        #FFFFFF;
  --bg-soft:   #F8FAF8;
  --bg-wash:   var(--sand-50);
  --card:      #FFFFFF;
  --ink:       #14231A;
  --muted:     #5F7365;
  --faint:     #93A597;
  --line:      #E4EBE5;
  --line-s:    #CFDBD1;
  --accent:    var(--green);
  --accent-h:  var(--green-600);
  --shadow:    0 1px 2px rgba(20,35,26,.04), 0 8px 28px rgba(20,35,26,.06);
  --shadow-lg: 0 2px 4px rgba(20,35,26,.04), 0 18px 50px rgba(20,35,26,.10);

  --r-img:  16px;
  --r-card: 14px;
  --r-pill: 999px;
  --sec:    7rem;
  --cap:    1220px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1A12; --bg-soft: #142118; --bg-wash: #16211A; --card: #16241B;
    --ink: #E9F1EA; --muted: #9BB2A2; --faint: #6B8375;
    --line: #22332A; --line-s: #32473A;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.35);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.3), 0 18px 50px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --bg: #0E1A12; --bg-soft: #142118; --bg-wash: #16211A; --card: #16241B;
  --ink: #E9F1EA; --muted: #9BB2A2; --faint: #6B8375;
  --line: #22332A; --line-s: #32473A;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.3), 0 18px 50px rgba(0,0,0,.45);
}

/* ═══════════ RESET ═══════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400; line-height: 1.05; letter-spacing: -.015em; text-wrap: balance;
}
h1 em, h2 em, h3 em { font-style: italic; color: var(--sand); }
a { color: inherit; text-decoration: none; }
img, canvas { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.wrap { width: min(var(--cap), 100% - 3rem); margin-inline: auto; }

.eyebrow {
  font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ''; width: 1.6rem; height: 1px; background: currentColor; opacity: .55; flex-shrink: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'DM Sans', sans-serif; font-size: .9rem; font-weight: 500;
  padding: .85rem 1.75rem; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
  white-space: nowrap;
}
.btn-fill { background: var(--accent); color: #fff; }
.btn-fill:hover { background: var(--accent-h); transform: translateY(-1px); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-s); }
.btn-line:hover { border-color: var(--accent); color: var(--accent); }

/* ═══════════ PHOTO SLOTS ═══════════ */
.slot {
  position: relative; overflow: hidden;
  border-radius: var(--r-img); background: var(--green-50); isolation: isolate;
}
.slot > canvas, .slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot > img { opacity: 0; transition: opacity .5s ease; z-index: 1; }
.slot > img.loaded { opacity: 1; }
.slot-tag {
  position: absolute; z-index: 2; left: .85rem; bottom: .85rem;
  font-size: .68rem; font-weight: 500; letter-spacing: .05em;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  color: var(--green-900); opacity: 0; transition: opacity .25s; pointer-events: none;
}
.slot:hover .slot-tag { opacity: 1; }
.slot > img.loaded ~ .slot-tag { display: none; }   /* bijschrift weg zodra de foto er is */

/* ═══════════ NAV ═══════════ */
nav {
  position: fixed; inset: 0 0 auto; z-index: 300; padding: 1rem 0;
  transition: background .3s, border-color .3s, padding .3s;
  border-bottom: 1px solid transparent;
}
nav.on {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line); padding: .7rem 0;
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: flex; align-items: center; }
.brand-logo { height: 38px; width: auto; display: block; }
.nav-links { display: flex; gap: 2.25rem; list-style: none; }
.nav-links a { font-size: .875rem; color: var(--muted); transition: color .2s; position: relative; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1.5px; background: var(--accent); transition: right .25s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }
.nav-cta { padding: .6rem 1.35rem; font-size: .85rem; }
/* Taalkeuze NL/EN (Luc, 30 sept 2026): klein, naast de knop, ook op mobiel zichtbaar. */
.nav-rechts { display: flex; align-items: center; gap: 1.1rem; }
.taal { font-size: .78rem; font-weight: 500; letter-spacing: .08em; color: var(--muted); transition: color .2s; }
.taal:hover { color: var(--accent); }

/* ═══════════ HERO ═══════════ */
.hero { padding: 9.5rem 0 var(--sec); }
.hero-top { display: grid; grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items: end; margin-bottom: 3rem; }
.hero h1 { font-size: clamp(3rem, 7.5vw, 6.5rem); margin: 0; max-width: 13ch; }
.hero-sub { font-size: 1.075rem; font-weight: 300; color: var(--muted); line-height: 1.75; max-width: 46ch; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-band { aspect-ratio: 21 / 8; border-radius: 22px; box-shadow: var(--shadow-lg); }

/* ═══════════ AANBOD ═══════════ */
.aanbod { padding: var(--sec) 0; background: var(--bg-soft); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 3rem; flex-wrap: wrap; }
.sec-head h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); margin-top: 1rem; max-width: 18ch; }
.sec-head > p { font-size: .95rem; color: var(--muted); max-width: 34ch; line-height: 1.7; }

.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.kaart {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.kaart:hover { border-color: var(--line-s); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.kaart-img { aspect-ratio: 3 / 2; border-radius: 0; }
.kaart-body { padding: 1.6rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; gap: .7rem; }
.kaart-plaats { font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sand-600); }
.kaart h3 { font-size: 1.7rem; }
.kaart > .kaart-body > p { font-size: .9rem; color: var(--muted); line-height: 1.7; flex: 1; }

.soorten { display: flex; flex-wrap: wrap; gap: .35rem; }
.soort {
  font-size: .72rem; padding: .22rem .6rem; border-radius: var(--r-pill);
  background: var(--green-50); color: var(--green-600); font-weight: 500;
}

.kaart-meta { display: flex; gap: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.km-l { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); display: block; }
.km-v { font-size: .85rem; color: var(--ink); font-variant-numeric: tabular-nums; display: block; margin-top: .1rem; }

.kaart-voet { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .35rem; }
.prijs { font-family: 'Instrument Serif', serif; font-size: 1.7rem; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.prijs small { font-family: 'DM Sans', sans-serif; font-size: .72rem; color: var(--faint); margin-left: .3rem; }
.kaart-voet .btn { padding: .7rem 1.35rem; font-size: .82rem; }

/* ── instapper ── */
.instap-kop { margin: 3.25rem 0 1.25rem; display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.instap-kop h3 { font-size: 1.75rem; }
.instap-kop p { font-size: .92rem; color: var(--muted); }

.instap {
  display: grid; grid-template-columns: .38fr .62fr;
  background: var(--bg-wash); border: 1px solid var(--sand-200);
  border-radius: var(--r-card); overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.instap:hover { border-color: var(--sand); box-shadow: var(--shadow-lg); }
.instap-foto { border-radius: 0; min-height: 260px; }
.instap-body { padding: 2rem 2.25rem; display: flex; flex-direction: column; gap: .8rem; }
.instap-top { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.badge {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--sand); color: #fff; padding: .25rem .65rem; border-radius: var(--r-pill);
}
.instap h3 { font-size: 2rem; }
.instap-body > p { font-size: .95rem; color: var(--muted); line-height: 1.75; max-width: 58ch; }
.instap .soort { background: rgba(255,255,255,.6); border: 1px solid var(--sand-200); color: var(--sand-600); }
.instap .kaart-meta { border-top-color: var(--sand-200); }
.instap .kaart-voet { border-top: 0; }

/* ═══════════ GIDS ═══════════ */
.gids { padding: var(--sec) 0; }
.gids-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5rem; align-items: center; }
.gids-foto { aspect-ratio: 8 / 9; box-shadow: var(--shadow); }
.gids h2 { font-size: clamp(2rem, 4vw, 3.25rem); margin: 1.1rem 0 1.5rem; max-width: 18ch; }
.gids p { font-size: 1.02rem; font-weight: 300; color: var(--muted); line-height: 1.8; max-width: 54ch; }
.gids p + p { margin-top: 1rem; }
.creds { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--line); list-style: none; }
.cred {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; color: var(--ink);
  background: var(--bg-wash); border: 1px solid var(--sand-200);
  padding: .4rem .85rem; border-radius: var(--r-pill);
}
.cred svg { flex-shrink: 0; color: var(--sand-600); }

/* ═══════════ ERVARINGEN ═══════════ */
.ervaringen { padding: var(--sec) 0; background: var(--bg-soft); }
.erv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.erv-grid.solo { grid-template-columns: 1fr; justify-items: center; }
.erv-grid.solo .erv { max-width: 640px; padding: 2.5rem 3rem; }
.erv-grid.solo blockquote { font-size: 1.2rem; text-align: center; }
.erv-grid.solo .sterren { justify-content: center; }
.erv-grid.solo .erv-wie { justify-content: center; }

.erv-carousel-wrap { margin-top: 2.5rem; }
.erv-carousel {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .6rem; -webkit-overflow-scrolling: touch;
}
.erv-carousel::-webkit-scrollbar { height: 6px; }
.erv-carousel::-webkit-scrollbar-thumb { background: var(--line-s); border-radius: 999px; }
.erv-carousel-item {
  flex: 0 0 auto; width: min(380px, 78vw); aspect-ratio: 4 / 3;
  border-radius: var(--r-img); overflow: hidden; scroll-snap-align: center;
  box-shadow: var(--shadow); background: var(--green-50);
}
.erv-carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.erv {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 1.9rem 1.75rem; display: flex; flex-direction: column; gap: 1.1rem;
}
.sterren { display: flex; gap: 1px; color: var(--sand); font-size: .82rem; letter-spacing: .08em; }
.erv blockquote { font-size: 1.02rem; font-weight: 300; line-height: 1.7; color: var(--ink); flex: 1; }
.erv-wie { display: flex; align-items: center; gap: .8rem; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--sand-50); border: 1px solid var(--sand-200); color: var(--sand-600);
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; flex-shrink: 0;
}
.erv cite { font-style: normal; font-size: .85rem; line-height: 1.4; display: block; }
.erv cite strong { display: block; font-weight: 500; color: var(--ink); }
.erv cite span { color: var(--faint); font-size: .78rem; }

/* ═══════════ BOEKEN ═══════════ */
.boeken { padding: var(--sec) 0; background: var(--bg-wash); }
.boek-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5rem; align-items: start; }
.boeken h2 { font-size: clamp(2rem, 4vw, 3.25rem); margin: 1.1rem 0 1.25rem; }
.boek-lead { font-size: 1rem; font-weight: 300; color: var(--muted); line-height: 1.8; margin-bottom: 2.25rem; max-width: 42ch; }
.b-rows { display: flex; flex-direction: column; gap: 1rem; }
.b-row { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: baseline; }
.b-l { font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.b-v { font-size: .92rem; color: var(--ink); }

.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 2rem; box-shadow: var(--shadow); }
form { display: flex; flex-direction: column; gap: 1.1rem; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.veld { display: flex; flex-direction: column; gap: .4rem; }
label { font-size: .78rem; font-weight: 500; color: var(--ink); }
input, select, textarea {
  font-family: 'DM Sans', sans-serif; font-size: .92rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-s); border-radius: 9px;
  padding: .72rem .9rem; outline: none; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
textarea { resize: vertical; min-height: 100px; }
select {
  cursor: pointer; appearance: none; padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.f-voet { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: space-between; margin-top: .25rem; }
.f-noot { font-size: .78rem; color: var(--faint); }
.optioneel { color: var(--faint); font-weight: 400; }
.toestemming {
  display: flex; align-items: flex-start; gap: .55rem; margin-top: .2rem;
  font-size: .8rem; font-weight: 400; color: var(--muted); line-height: 1.5; cursor: pointer;
}
.toestemming[hidden] { display: none; }
.veld[hidden] { display: none; }
/* Honeypot voor aanvragen (bouwstap 7): onzichtbaar voor mensen, bots vullen het in. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.toestemming input { width: auto; margin: .2rem 0 0; accent-color: var(--accent); flex-shrink: 0; }
/* Eenmalige kortingscode (Luc, 29 sept 2026): veld met een kleine knop, kleine lettertjes eronder,
   en na "Toepassen" de prijs die de server teruggeeft. */
.code-rij { display: flex; gap: .6rem; align-items: stretch; }
.code-rij input { flex: 1; min-width: 0; text-transform: uppercase; }
.code-rij input::placeholder { text-transform: none; }
.code-knop { padding: .55rem 1.1rem; font-size: .82rem; flex-shrink: 0; }
.code-noot { font-size: .76rem; color: var(--faint); }
.prijsregels { display: flex; flex-direction: column; gap: .3rem; margin-top: .35rem; padding: .75rem .9rem;
  border-radius: 9px; background: var(--bg-wash); font-size: .85rem; color: var(--muted); }
.prijsregels > div { display: flex; justify-content: space-between; gap: 1rem; }
.prijsregels .pr-totaal { color: var(--ink); font-weight: 600; padding-top: .3rem; border-top: 1px solid var(--line); }
.prijsregels[hidden] { display: none; }
.veld-fout { font-size: .76rem; color: #B4691A; }
.veld .ongeldig { border-color: #B4691A; }
#melding {
  padding: .85rem 1rem; border-radius: 9px; font-size: .88rem; line-height: 1.5;
  background: var(--sand-50); border: 1px solid color-mix(in srgb, #B4691A 35%, transparent); color: var(--ink);
}
#melding[hidden] { display: none; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ═══════════ FOOTER ═══════════ */
footer { background: var(--green-900); padding: 4rem 0 2rem; color: #DCEAE0; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.foot-brand { display: flex; align-items: center; margin-bottom: .9rem; }
.foot-brand-logo { height: 46px; width: auto; display: block; }
.foot-blurb { font-size: .9rem; font-weight: 300; line-height: 1.75; color: rgba(220,234,224,.7); max-width: 34ch; }
.foot-h { font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(220,234,224,.45); margin-bottom: 1rem; }
.foot-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.foot-list a, .foot-list li { font-size: .9rem; color: rgba(220,234,224,.78); transition: color .2s; }
.foot-list a:hover { color: var(--sand); }
/* Instagram (Luc, 20 okt 2026): icoon in de kleur van de tekst, met de accountnaam erachter. */
.foot-list .insta { display: inline-flex; align-items: center; gap: .5rem; }
.foot-list .insta svg { flex-shrink: 0; }
.foot-bot a:hover { color: var(--sand); }
.foot-bot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; font-size: .78rem; color: rgba(220,234,224,.4); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1000px) {
  :root { --sec: 4.5rem; }
  .hero { padding-top: 7.5rem; }
  .hero-top { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  .hero-sub { max-width: 56ch; }
  .kaarten { grid-template-columns: 1fr; }
  .instap { grid-template-columns: 1fr; }
  .instap-foto { min-height: 0; aspect-ratio: 16 / 9; }
  .instap-body { padding: 1.6rem 1.5rem; }
  .gids-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .gids-foto { aspect-ratio: 16 / 10; }
  .erv-grid { grid-template-columns: 1fr; }
  .boek-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .nav-links { display: none; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 620px) {
  :root { --sec: 3.5rem; }
  .wrap { width: min(var(--cap), 100% - 2.25rem); }
  .hero h1 { font-size: 2.8rem; }
  .hero-band { aspect-ratio: 4 / 3; border-radius: var(--r-img); }
  .f2 { grid-template-columns: 1fr; }
  .form-card { padding: 1.4rem; }
  .foot-top { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .kaart-voet { flex-direction: column; align-items: stretch; gap: .75rem; }
  .kaart-voet .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ═══════════ BESCHIKBAARHEID ═══════════ */
.beschikbaar { display: flex; align-items: flex-start; gap: .45rem; font-size: .8rem; color: var(--muted); }
/* Stip op de eerste regel, ook als de tekst op mobiel over twee regels loopt.
   Bij één regel staat hij precies waar align-items: center hem zette. */
.beschikbaar .stip { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--faint);
  margin-top: calc(.8rem * 1.6 / 2 - 3.5px); }
.beschikbaar .stip.open { background: var(--accent); }
.beschikbaar .stip.vol { background: var(--sand-600); }
.instap .beschikbaar { order: 2; }