/* ============================================================
   Mathias Sypré — Ceremoniespreker
   Editorial · warm · zand, beige, klei, olijf
   ============================================================ */

:root{
  /* Warme basis */
  --ivoor:      #FCFAF6;
  --papier:     #F7F2E9;
  --zand:       #EFE6D7;
  --zand-diep:  #E3D6C1;
  --klei:       #C9B79C;
  /* Taupe is donker genoeg gehouden voor 4.5:1 contrast op zand */
  --taupe:      #736450;

  /* Groen accent */
  --olijf:      #4E5E45;
  --olijf-diep: #37432F;
  --salie:      #8FA083;      /* decoratief */
  --salie-op-donker:#A8B89C;  /* tekst op olijf-diep */
  --salie-licht:#DDE3D7;

  /* Inkt */
  --inkt:       #262320;
  --inkt-zacht: #4E483F;
  --inkt-licht: #6F675C;

  --lijn:       rgba(38,35,32,.16);
  --lijn-fijn:  rgba(38,35,32,.09);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --max:    1240px;
  --breed:  1500px;
  --smal:   720px;
  --radius: 2px;

  --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2.5rem;
  --sp-5: 4rem;   --sp-6: 7rem;    --sp-7: 10rem;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-uit: cubic-bezier(.16,1,.3,1);

  /* z-index schaal */
  --z-beeld: 1; --z-inhoud: 10; --z-nav: 50; --z-menu: 40; --z-korrel: 90;

  /* Eén warme look over alle fotografie */
  --foto-filter: sepia(.14) saturate(.94) contrast(1.03) brightness(1.02);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ivoor);
  color:var(--inkt);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; }

/* Zichtbare focus voor toetsenbordgebruik */
:focus-visible{ outline:2px solid var(--olijf); outline-offset:3px; border-radius:2px; }

/* Papierkorrel */
body::before{
  content:""; position:fixed; inset:0; z-index:var(--z-korrel); pointer-events:none;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.015em;
  line-height:1.1;
  margin:0 0 var(--sp-2);
  text-wrap:balance;
}
h1{ font-size:clamp(3.2rem, 8.5vw, 7rem); line-height:.98; letter-spacing:-.025em; }
h2{ font-size:clamp(2.2rem, 5vw, 4rem); }
h3{ font-size:clamp(1.35rem, 2.1vw, 1.8rem); }
p{ margin:0 0 1.15em; max-width:62ch; }
.cursief{ font-family:var(--serif); font-style:italic; }
.zacht{ color:var(--taupe); font-style:italic; }

.label{
  font-family:var(--sans);
  font-size:.68rem; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--taupe);
  margin:0 0 var(--sp-3);
  display:flex; align-items:center; gap:.9rem;
}
.label::before{ content:""; width:32px; height:1px; background:var(--klei); flex:none; }
.label.midden{ justify-content:center; }
.label.midden::after{ content:""; width:32px; height:1px; background:var(--klei); }

.lead{
  font-family:var(--serif);
  font-size:clamp(1.3rem, 2.2vw, 1.75rem);
  line-height:1.5; color:var(--inkt-zacht); font-weight:300;
}
.klein{ font-size:.85rem; color:var(--inkt-licht); line-height:1.7; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:clamp(1.4rem, 5vw, 3.5rem); }
.wrap.breed{ max-width:var(--breed); }
.smal{ max-width:var(--smal); }
section{ padding-block:var(--sp-6); position:relative; }
@media(max-width:700px){ section{ padding-block:var(--sp-5); } }
.midden{ text-align:center; }
.midden p{ margin-inline:auto; }

.vlak-zand{ background:var(--papier); }
.vlak-diep{ background:var(--zand); }
.vlak-groen{ background:var(--olijf-diep); color:var(--papier); }
.vlak-groen .label{ color:var(--salie-op-donker); }
.vlak-groen .label::before,.vlak-groen .label::after{ background:rgba(221,227,215,.42); }
.vlak-groen .lead{ color:rgba(247,242,233,.85); }

/* ---------- Fotografie ---------- */
.foto{ position:relative; overflow:hidden; background:linear-gradient(158deg,var(--zand),var(--klei)); }
.foto img{
  width:100%; height:100%; object-fit:cover;
  filter:var(--foto-filter);
  transform:scale(1.06);
  transition:transform 1.6s var(--ease-uit), opacity 1.2s var(--ease);
}
.foto.zichtbaar img,.op.zichtbaar .foto img{ transform:scale(1); }
/* Volvlakse achtergrondbeelden animeren niet mee */
.citaatband .foto img,.slotband .foto img{ transform:none; }
.foto::after{  /* warme unificerende waas */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(239,230,215,.10), rgba(78,94,69,.07));
  mix-blend-mode:multiply;
}
.bijschrift{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--taupe); margin-top:.9rem;
}

/* ---------- Knoppen ---------- */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  min-height:48px; padding:1rem 2.1rem;
  border:1px solid var(--olijf); background:var(--olijf); color:var(--papier);
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; border-radius:var(--radius); cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.knop:hover{ background:var(--olijf-diep); border-color:var(--olijf-diep); }
.knop.leeg{ background:transparent; color:var(--inkt); border-color:var(--klei); }
.knop.leeg:hover{ background:var(--inkt); border-color:var(--inkt); color:var(--papier); }
.knop.licht{ background:transparent; color:var(--papier); border-color:rgba(247,242,233,.5); }
.knop.licht:hover{ background:var(--papier); color:var(--olijf-diep); border-color:var(--papier); }
.knop-rij{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:var(--sp-3); }
.midden .knop-rij{ justify-content:center; }

.link-tekst{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--olijf);
  border-bottom:1px solid var(--klei); padding-bottom:.3rem;
  transition:border-color .4s var(--ease), gap .4s var(--ease);
}
.link-tekst:hover{ border-color:var(--olijf); gap:.9rem; }

/* ---------- Navigatie ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:1.5rem clamp(1.4rem, 5vw, 3.5rem);
  color:var(--papier);
  transition:background .5s var(--ease), padding .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.vast{
  background:rgba(252,250,246,.94);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  padding-block:.9rem; color:var(--inkt);
  border-bottom-color:var(--lijn-fijn);
}
.merk{ text-decoration:none; display:flex; flex-direction:column; line-height:1; position:relative; z-index:3; }
/* Boven de hero blijft de naam weg — hij verschijnt pas als de balk verschijnt.
   visibility (niet display) houdt de ruimte vast, zodat het menu niet verspringt. */
.nav:not(.vast) .merk{
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.nav.vast .merk{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .5s var(--ease) .05s, transform .5s var(--ease) .05s;
}
.menu-open .nav .merk{ opacity:1; visibility:visible; transform:none; }
.merk b{ font-family:var(--serif); font-size:1.38rem; font-weight:500; letter-spacing:.01em; }
.merk span{ font-size:.58rem; letter-spacing:.34em; text-transform:uppercase; opacity:.72; margin-top:.45rem; }

.nav-links{ display:flex; align-items:center; gap:2.2rem; }
.nav-links a{
  text-decoration:none; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  position:relative; padding:.6rem 0; opacity:.85;
  transition:opacity .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:.3rem; width:0; height:1px;
  background:currentColor; transition:width .45s var(--ease);
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ width:100%; }
.nav > .knop{ padding:.75rem 1.5rem; min-height:44px; font-size:.68rem; }
.nav:not(.vast) > .knop{ background:transparent; color:var(--papier); border-color:rgba(247,242,233,.5); }
.nav:not(.vast) > .knop:hover{ background:var(--papier); color:var(--olijf-diep); }

.hamburger{
  display:none; background:none; border:0; padding:.6rem;
  width:44px; height:44px; position:relative; z-index:3;
}
.hamburger span{ display:block; width:22px; height:1px; background:currentColor; margin:6px 0; transition:transform .4s var(--ease), opacity .3s; }
.menu-open .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-open .hamburger span:nth-child(2){ opacity:0; }
.menu-open .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.menu-open .nav{ color:var(--inkt); }

@media(max-width:960px){
  .hamburger{ display:block; }
  .nav-links{
    position:fixed; inset:0; z-index:var(--z-menu); background:var(--papier); color:var(--inkt);
    flex-direction:column; justify-content:center; gap:1.9rem;
    transform:translateY(-100%); transition:transform .65s var(--ease-uit);
  }
  .menu-open .nav-links{ transform:translateY(0); }
  .nav-links a{ font-size:1.05rem; letter-spacing:.22em; opacity:1; }
  .nav > .knop{ display:none; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  /* padding-top houdt de navigatiebalk vrij, ook op lage schermen */
  padding:clamp(7.5rem,13vh,10rem) 0 clamp(2.5rem,6vh,5rem);
  overflow:hidden; isolation:isolate;
}
.hero-achtergrond{ position:absolute; inset:0; z-index:var(--z-beeld); }
.hero-achtergrond img{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
  filter:var(--foto-filter);
  animation:traag 22s ease-out forwards;
}
@keyframes traag{ from{ transform:scale(1.1); } to{ transform:scale(1); } }
.hero-achtergrond::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(190deg, rgba(38,35,32,.34) 0%, rgba(38,35,32,.04) 38%, rgba(38,35,32,.14) 60%, rgba(31,29,25,.76) 100%),
    linear-gradient(85deg, rgba(55,67,47,.26) 0%, rgba(55,67,47,0) 58%);
}
.hero-inhoud{ position:relative; z-index:var(--z-inhoud); color:var(--papier); width:100%; }
.hero h1{ color:var(--papier); max-width:15ch; margin-bottom:var(--sp-3); }
.hero h1 .zacht{ color:rgba(233,224,208,.88); }
.hero .label{ color:rgba(233,224,208,.8); }
.hero .label::before{ background:rgba(233,224,208,.5); }
.hero .lead{ color:rgba(247,242,233,.9); max-width:38ch; }

.hero-onder{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-4); margin-top:var(--sp-5);
  padding-top:var(--sp-3); border-top:1px solid rgba(247,242,233,.22);
}
.hero-drieluik{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem); }
.hero-drieluik div b{ display:block; font-family:var(--serif); font-size:2.1rem; font-weight:400; line-height:1; color:var(--papier); }
.hero-drieluik div span{ font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(233,224,208,.88); }
@media(max-width:640px){
  .hero .lead{ font-size:1.1rem; }
  .hero-onder{ margin-top:var(--sp-4); }
  .hero-drieluik{ gap:1.4rem; }
  .hero-drieluik div b{ font-size:1.5rem; }
}
/* Lage schermen (laptops, liggende telefoon): titel kleiner houden
   zodat alles onder de balk blijft passen */
@media(max-height:820px) and (min-width:641px){
  .hero h1{ font-size:clamp(2.6rem,5.4vw,4.2rem); }
  .hero .lead{ font-size:1.1rem; }
  .hero-onder{ margin-top:var(--sp-3); padding-top:1.1rem; }
  .hero-drieluik div b{ font-size:1.6rem; }
}
@media(max-height:640px){
  .hero{ padding-top:6.5rem; }
  .hero h1{ font-size:clamp(2.1rem,4.6vw,3.2rem); }
  .hero .hero-drieluik{ display:none; }
}

/* ---------- Lopende regel ---------- */
.strook{
  border-block:1px solid var(--lijn-fijn); background:var(--ivoor);
  padding-block:1.15rem; overflow:hidden; white-space:nowrap;
}
.strook-inhoud{ display:inline-flex; gap:3.5rem; animation:schuif 44s linear infinite; }
.strook span{
  font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--taupe);
  display:inline-flex; align-items:center; gap:3.5rem;
}
.strook span::after{ content:"·"; color:var(--klei); font-style:normal; }
@keyframes schuif{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .strook-inhoud{ animation:none; } }

/* ---------- Twee kolommen ---------- */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.duo.links-smal{ grid-template-columns:.88fr 1.12fr; }
.duo.rechts-smal{ grid-template-columns:1.12fr .88fr; }
@media(max-width:900px){ .duo,.duo.links-smal,.duo.rechts-smal{ grid-template-columns:1fr; gap:var(--sp-4); } }

/* Overlappende beeldcombinatie */
.beeldduo{ position:relative; padding:0 0 4.5rem 0; }
.beeldduo .groot{ aspect-ratio:4/5; }
.beeldduo .klein{
  position:absolute; right:-1.5rem; bottom:0; width:46%; aspect-ratio:1/1;
  border:6px solid var(--ivoor);
}
.vlak-zand .beeldduo .klein{ border-color:var(--papier); }
.beeldduo::before{
  content:""; position:absolute; left:-1.4rem; top:-1.4rem; width:42%; height:36%;
  border:1px solid var(--klei); z-index:0;
}
@media(max-width:520px){
  .beeldduo .klein{ width:52%; right:0; }
  .beeldduo{ padding-bottom:3rem; }
}

/* ---------- Pijlers ---------- */
.pijlers{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.8rem); margin-top:var(--sp-5); }
@media(max-width:900px){ .pijlers{ grid-template-columns:1fr; } }
.pijler{ display:flex; flex-direction:column; }
.pijler .foto{ aspect-ratio:4/3; margin-bottom:1.6rem; }
.pijler .nr{
  font-size:.66rem; letter-spacing:.26em; color:var(--taupe);
  display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem;
}
.pijler .nr::after{ content:""; flex:1; height:1px; background:var(--lijn-fijn); }
.pijler h3{ margin-bottom:.7rem; }
.pijler p{ font-size:.95rem; color:var(--inkt-zacht); margin:0; }

/* ---------- Traject ---------- */
.stappen{ margin-top:var(--sp-5); border-top:1px solid var(--lijn); }
.stap{
  display:grid; grid-template-columns:5rem 1fr 1.1fr; gap:clamp(1rem,3vw,3.5rem);
  padding:clamp(1.8rem,3vw,2.8rem) 0; border-bottom:1px solid var(--lijn-fijn); align-items:start;
}
.stap .tel{ font-family:var(--serif); font-size:2.6rem; color:var(--klei); line-height:.85; }
.stap h3{ margin:0 0 .35rem; }
.stap .wanneer{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); }
.stap p{ margin:0; font-size:.95rem; color:var(--inkt-zacht); }
@media(max-width:800px){
  .stap{ grid-template-columns:2.8rem 1fr; }
  .stap > div:last-child{ grid-column:2; margin-top:.8rem; }
}

/* ---------- Citaat over foto ---------- */
.citaatband{ position:relative; isolation:isolate; min-height:64svh; display:grid; place-items:center; text-align:center; overflow:hidden; }
.citaatband .foto{ position:absolute; inset:0; z-index:var(--z-beeld); }
.citaatband .foto::after{ background:linear-gradient(180deg, rgba(31,29,25,.58), rgba(55,67,47,.62)); mix-blend-mode:normal; }
.citaatband .wrap{ position:relative; z-index:var(--z-inhoud); color:var(--papier); padding-block:var(--sp-6); }
.citaatband blockquote{
  margin:0 auto; max-width:20ch; font-family:var(--serif); font-style:italic;
  font-size:clamp(2rem,5vw,3.6rem); line-height:1.22; color:var(--papier);
}
.citaatband .bron{ margin-top:var(--sp-3); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(233,224,208,.88); }
.ornament{ width:110px; height:auto; margin:0 auto var(--sp-3); display:block; stroke:rgba(233,224,208,.6); fill:none; stroke-width:1; }

/* ---------- Sfeerstrook (slank, horizontaal) ---------- */
.sfeer{ padding-block:var(--sp-5); }
.sfeer-kop{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-bottom:var(--sp-3);
}
.sfeer-kop h2{ font-size:clamp(1.6rem,3vw,2.4rem); margin:0; }
.sfeer-kop p{ margin:0; max-width:40ch; font-size:.92rem; color:var(--inkt-zacht); }
.strip-knoppen{ display:flex; gap:.6rem; flex:none; }

.strip{
  display:flex; gap:clamp(.6rem,1.2vw,1rem);
  overflow-x:auto; scroll-snap-type:x proximity;
  padding-inline:clamp(1.4rem,5vw,3.5rem); padding-block:.2rem;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab; overscroll-behavior-x:contain;
}
.strip::-webkit-scrollbar{ display:none; }
.strip.sleept{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.strip.sleept .foto img{ transition:none; }
.strip img{ user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
.strip .foto{
  flex:0 0 auto; width:clamp(180px,22vw,270px); height:clamp(240px,30vw,360px);
  scroll-snap-align:start;
}
.strip .foto:nth-child(even){ height:clamp(210px,26vw,310px); align-self:flex-end; }
.sfeer-hint{
  margin:1rem 0 0; padding-inline:clamp(1.4rem,5vw,3.5rem);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe);
}

/* ---------- Wat een stap oplevert ---------- */
.oplevering{
  list-style:none; margin:.9rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem .5rem;
}
.oplevering li{
  font-size:.74rem; letter-spacing:.03em; color:var(--inkt-zacht);
  border:1px solid var(--lijn-fijn); border-radius:99px;
  padding:.32rem .85rem; background:var(--ivoor);
}
.vlak-zand .oplevering li{ background:var(--papier); }

/* ---------- Compacte beloftebalk ---------- */
.belofte-band{ padding-block:var(--sp-4); }
.belofte-band .wrap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3);
}
.belofte-band h3{
  margin:0; color:var(--papier); font-size:clamp(1.5rem,2.6vw,2.1rem); max-width:14ch;
}
.belofte-band p{ margin:0; max-width:40ch; color:rgba(247,242,233,.8); font-size:.95rem; }
.belofte-band .knop-rij{ margin:0; }

/* ---------- Ervaringen ---------- */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2.2rem); margin-top:var(--sp-4); }
@media(max-width:900px){ .reviews{ grid-template-columns:1fr; } }
.review{ background:var(--ivoor); border:1px solid var(--lijn-fijn); padding:clamp(1.8rem,3vw,2.5rem); display:flex; flex-direction:column; }
.review .aanhaling{ font-family:var(--serif); font-size:2.8rem; color:var(--klei); line-height:1; display:block; margin-bottom:.3rem; }
.review p{ font-size:.98rem; color:var(--inkt-zacht); font-style:italic; flex:1; }
.review cite{ font-style:normal; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); }

/* ---------- Agenda ---------- */
.agenda-duo{ display:grid; grid-template-columns:1fr minmax(320px,430px); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media(max-width:900px){ .agenda-duo{ grid-template-columns:1fr; } }

.agenda-schil{ background:var(--ivoor); border:1px solid var(--lijn-fijn); padding:clamp(1rem,2.2vw,1.6rem); }
.agenda-balk{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:1rem; }
.agenda-balk h3{ margin:0; font-size:1.15rem; letter-spacing:0; text-transform:capitalize; }
.maandknop{
  width:36px; height:36px; min-width:36px; border:1px solid var(--lijn); background:transparent;
  display:grid; place-items:center; border-radius:50%; cursor:pointer;
  transition:background .35s var(--ease), border-color .35s var(--ease), opacity .3s;
}
.maandknop:hover:not(:disabled){ background:var(--zand); border-color:var(--klei); }
.maandknop:disabled{ opacity:.25; cursor:not-allowed; }
.maandknop svg{ width:12px; height:12px; stroke:var(--inkt); fill:none; stroke-width:1.5; }
@media(pointer:coarse){ .maandknop{ width:44px; height:44px; min-width:44px; } }

.kalender{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.kal-kop{ text-align:center; font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe); padding-bottom:.5rem; }
.dag{
  aspect-ratio:1/1; min-height:32px; border:1px solid transparent; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:.78rem; border-radius:var(--radius); position:relative; padding:0;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s;
}
@media(pointer:coarse){ .dag{ min-height:40px; } }
.dag.leeg{ visibility:hidden; }
.dag .stip{ width:3px; height:3px; border-radius:50%; margin-top:3px; background:transparent; }
.dag.verleden{ color:rgba(111,103,92,.38); }
.dag.vrij{ background:var(--salie-licht); color:var(--olijf-diep); border-color:rgba(78,94,69,.2); cursor:pointer; }
.dag.vrij:hover{ background:var(--olijf); color:var(--papier); }
.dag.vrij .stip{ background:var(--olijf); }
.dag.optie{ background:var(--zand); color:var(--taupe); border-color:var(--zand-diep); cursor:pointer; }
.dag.optie:hover{ background:var(--zand-diep); }
.dag.optie .stip{ background:var(--klei); }
.dag.bezet{ color:rgba(78,72,63,.68); text-decoration:line-through; text-decoration-thickness:.5px; }
.dag.vandaag{ box-shadow:inset 0 0 0 1px var(--olijf); }
.dag.gekozen{ background:var(--olijf) !important; color:var(--papier) !important; border-color:var(--olijf) !important; }
.dag.gekozen .stip{ background:var(--papier); }

.legende{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--lijn-fijn); }
.legende span{ display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; color:var(--inkt-zacht); }
.legende i{ width:12px; height:12px; border-radius:2px; display:block; flex:none; }
.i-vrij{ background:var(--salie-licht); border:1px solid rgba(78,94,69,.35); }
.i-optie{ background:var(--zand); border:1px solid var(--zand-diep); }
.i-bezet{ background:transparent; border:1px solid var(--lijn); position:relative; }
.i-bezet::after{ content:""; position:absolute; inset:50% 2px auto; height:1px; background:var(--inkt-licht); }
.agenda-voet{ margin-top:1rem; font-size:.74rem; color:var(--inkt-licht); line-height:1.5; }

/* ---------- Formulier ---------- */
.form-schil{ background:var(--ivoor); border:1px solid var(--lijn-fijn); padding:clamp(1.6rem,4vw,3.2rem); }
.tabs{ display:flex; flex-wrap:wrap; border-bottom:1px solid var(--lijn-fijn); margin-bottom:var(--sp-4); }
.tab{
  background:none; border:0; border-bottom:1px solid transparent; margin-bottom:-1px;
  min-height:48px; padding:.9rem 1.6rem .9rem 0; margin-right:1.8rem;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--inkt-licht);
  transition:color .3s, border-color .3s;
}
.tab[aria-selected="true"]{ color:var(--inkt); border-bottom-color:var(--olijf); }

.velden{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.veld{ display:flex; flex-direction:column; gap:.5rem; }
.veld.breed{ grid-column:1 / -1; }
@media(max-width:700px){ .velden{ grid-template-columns:1fr; } }
.veld label{ font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); }
.veld input,.veld textarea,.veld select{
  font:inherit; font-size:1rem; color:var(--inkt); width:100%; max-width:100%;
  background:transparent; border:0; border-bottom:1px solid var(--lijn);
  padding:.65rem 0; border-radius:0; min-height:44px;
  transition:border-color .4s var(--ease);
}
.veld input:focus,.veld textarea:focus,.veld select:focus{ outline:0; border-bottom-color:var(--olijf); }
.veld input:focus-visible,.veld textarea:focus-visible,.veld select:focus-visible{ outline:2px solid var(--olijf); outline-offset:4px; }
.veld textarea{ resize:vertical; min-height:120px; line-height:1.7; }
.veld select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238E7F6B' fill='none' stroke-width='1'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .2rem center; }
.veld .hint{ font-size:.78rem; color:var(--inkt-licht); }

.akkoord{ display:flex; gap:.8rem; align-items:flex-start; font-size:.82rem; color:var(--inkt-licht); grid-column:1/-1; cursor:pointer; }
.akkoord input{ margin-top:.4rem; accent-color:var(--olijf); width:18px; height:18px; min-height:0; flex:none; }

.melding{ margin-top:var(--sp-3); padding:1rem 1.2rem; background:var(--salie-licht); border-left:2px solid var(--olijf); font-size:.9rem; display:none; }
.melding.aan{ display:block; }
.melding.fout{ background:#F5E6DE; border-left-color:#A2543A; }

/* ---------- FAQ ---------- */
.faq{ margin-top:var(--sp-4); border-top:1px solid var(--lijn); }
.faq details{ border-bottom:1px solid var(--lijn-fijn); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.5rem 3rem 1.5rem 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.15rem,1.9vw,1.4rem); transition:color .3s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%; width:12px; height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%238E7F6B' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:translateY(-50%); transition:transform .4s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(135deg); }
.faq summary:hover{ color:var(--olijf); }
.faq .antwoord{ padding:0 3rem 1.7rem 0; }
.faq .antwoord p{ font-size:.96rem; color:var(--inkt-zacht); margin:0 0 .8em; }
.faq .antwoord p:last-child{ margin:0; }

/* ---------- Slot-CTA over foto ---------- */
.slotband{ position:relative; isolation:isolate; overflow:hidden; }
.slotband .foto{ position:absolute; inset:0; z-index:var(--z-beeld); }
.slotband .foto::after{ background:linear-gradient(180deg, rgba(31,29,25,.5), rgba(31,29,25,.72)); mix-blend-mode:normal; }
.slotband .wrap{ position:relative; z-index:var(--z-inhoud); color:var(--papier); padding-block:var(--sp-6); text-align:center; }
.slotband h2{ color:var(--papier); max-width:17ch; margin-inline:auto; }
.slotband .lead{ color:rgba(247,242,233,.86); max-width:44ch; margin-inline:auto; }
.slotband .label{ color:rgba(233,224,208,.75); }
.slotband .label::before,.slotband .label::after{ background:rgba(233,224,208,.45); }

/* ---------- Footer ---------- */
footer{ background:var(--olijf-diep); color:rgba(247,242,233,.74); padding-block:var(--sp-5) var(--sp-3); font-size:.88rem; }
.voet-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--sp-4); }
@media(max-width:800px){ .voet-grid{ grid-template-columns:1fr; } }
footer h4{ font-family:var(--sans); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--salie-op-donker); margin:0 0 1.2rem; }
footer .merk b{ color:var(--papier); }
footer .merk span{ color:var(--salie-op-donker); opacity:1; }
footer a{ color:rgba(247,242,233,.74); text-decoration:none; transition:color .3s; }
footer a:hover{ color:var(--papier); }
footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.voet-onder{
  margin-top:var(--sp-4); padding-top:var(--sp-3);
  border-top:1px solid rgba(221,227,215,.18);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-size:.74rem; color:rgba(221,227,215,.7);
}

/* ---------- Animatie ---------- */
.op{ opacity:0; transform:translateY(30px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease-uit); }
.op.zichtbaar{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .op{ opacity:1; transform:none; }
  .foto img{ transform:none !important; }
  html{ scroll-behavior:auto; }
}