/* ==================================================================
   DAAN VAN TOP TOT TEEN — stijl
   Kleuren en maten staan bovenaan in :root. De rest volgt de
   volgorde van de pagina: kop, hero, secties, footer, belbalk.
   ================================================================== */

:root{
  --inkt:#1C1619;
  --wit:#FFFFFF;
  --room:#FBF7F4;          /* warm crème: de achtergrond van de pagina */
  --room-diep:#F3EBE6;
  --bessen:#962676;
  --bessen-diep:#6E1B57;
  --bessen-zacht:#F6EAF2;
  --bessen-nevel:#EFD9E8;
  --goud:#B8905A;          /* heel spaarzaam: sterren en dunne lijnen */
  --grijs:#5A4F55;         /* op crème nog ruim 7:1 contrast */
  --lijn:#E6DAD8;
  --vlak:#EDE2E6;

  --breed:1160px;
  --tekst:34em;
  --radius:14px;
  --schaduw:0 18px 50px -24px rgba(110,27,87,.35);

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;

  --serif:Lora,Georgia,"Times New Roman",serif;
  --sans:"Nunito Sans",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--room);
  color:var(--inkt);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}

.wrap{max-width:var(--breed);margin:0 auto;padding:0 20px}
@media (min-width:700px){ .wrap{padding:0 36px} }
.smal{max-width:var(--tekst)}

h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.18;margin:0 0 var(--s2);
         letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(34px,5.6vw,58px);font-weight:400;line-height:1.1}
h2{font-size:clamp(28px,3.8vw,40px);font-weight:400}
h3{font-size:21px;font-weight:500;margin-bottom:var(--s1)}
h1 em,h2 em{font-style:italic;color:var(--bessen);font-weight:400}
p{margin:0 0 var(--s2);max-width:var(--tekst)}
.lead{font-size:clamp(19px,2.1vw,22px);line-height:1.55;color:var(--grijs)}

/* klein bovenkopje boven een sectiekop */
.bovenkop{
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 var(--s2);font-size:14px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bessen);
}
.bovenkop::before{content:"";width:22px;height:1px;background:var(--bessen)}

a{color:var(--bessen);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--bessen-diep)}
:focus-visible{outline:3px solid var(--bessen);outline-offset:3px;border-radius:3px}
[id]{scroll-margin-top:110px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;
      background:var(--wit);color:var(--bessen);padding:14px 20px;font-weight:700}
.skip:focus-visible{left:0}

/* ---------- inloop-animatie (alleen als JS de klasse zet) ---------- */
.js .onthul{opacity:0;transform:translateY(18px);
            transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .onthul.zichtbaar{opacity:1;transform:none}
.js .onthul[data-vertraging="1"]{transition-delay:.1s}
.js .onthul[data-vertraging="2"]{transition-delay:.2s}
.js .onthul[data-vertraging="3"]{transition-delay:.3s}
.js .onthul[data-vertraging="4"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  .js .onthul{opacity:1;transform:none}
}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:12px 30px;border-radius:999px;border:2px solid transparent;
  font-family:inherit;font-weight:700;font-size:17px;line-height:1.2;
  text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,
             transform .18s ease,box-shadow .18s ease;
}
.knop:hover{transform:translateY(-1px)}
.knop-bessen{background:var(--bessen);color:var(--wit);border-color:var(--bessen);
             box-shadow:0 10px 24px -12px rgba(150,38,118,.6)}
.knop-bessen:hover{background:var(--bessen-diep);border-color:var(--bessen-diep);color:var(--wit)}
.knop-lijn{background:transparent;color:var(--bessen);border-color:var(--bessen)}
.knop-lijn:hover{color:var(--bessen-diep);border-color:var(--bessen-diep);background:var(--bessen-zacht)}
.knoppen{display:flex;gap:var(--s2);flex-wrap:wrap}
@media (max-width:480px){
  .knoppen{flex-direction:column;align-items:stretch}
  .knoppen .knop{width:100%}
}

/* ---------- foto's en plaatshouders ---------- */
.foto{
  display:block;width:100%;height:auto;object-fit:cover;
  background:var(--vlak);border-radius:var(--radius);
}
.foto-kader{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--vlak)}
.foto-kader .foto{border-radius:0}
.foto-kader.plaatshouder::after{
  content:attr(data-bijschrift);
  position:absolute;left:0;right:0;bottom:0;padding:12px 16px;
  font-size:14px;color:var(--wit);line-height:1.35;
  background:linear-gradient(to top,rgba(70,15,55,.55),rgba(70,15,55,0));
}

/* ---------- kop ---------- */
.kop{
  background:rgba(251,247,244,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.kop.krimpt{border-bottom-color:var(--lijn);box-shadow:0 8px 30px -22px rgba(28,22,25,.35)}
@media (min-width:760px){ .kop{position:sticky;top:0;z-index:60} }
.kop-binnen{display:flex;align-items:center;gap:var(--s3);padding:18px 0;
            transition:padding .2s ease}
.kop.krimpt .kop-binnen{padding:10px 0}
.kop-logo{flex:0 0 auto;line-height:0}
.kop-logo img{display:block;width:200px;height:auto;transition:width .2s ease}
.kop.krimpt .kop-logo img{width:170px}
.kop-nav{display:none}
@media (min-width:1000px){
  .kop-nav{display:flex;gap:var(--s3);margin-left:auto;font-size:16px}
  .kop-nav a{color:var(--inkt);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;
             transition:color .15s ease,border-color .15s ease}
  .kop-nav a:hover{color:var(--bessen);border-bottom-color:var(--bessen)}
}
.kop-rechts{margin-left:auto;text-align:right;line-height:1.35}
@media (min-width:1000px){ .kop-rechts{margin-left:0} }
.kop-rechts .bel{display:inline-block;font-weight:700;font-size:19px;white-space:nowrap;color:var(--inkt);
                 text-decoration:none}
.kop-rechts .bel:hover{color:var(--bessen)}
.status{margin:2px 0 0;font-size:15px;color:var(--grijs);white-space:nowrap;max-width:none}
.status a{color:var(--grijs);text-decoration:none}
.status a:hover{color:var(--bessen);text-decoration:underline}
.stip{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--grijs);margin-right:7px;
      position:relative;top:-1px}
.stip.open{background:#2E8B57;box-shadow:0 0 0 3px rgba(46,139,87,.18)}

/* menu-knop (mobiel en tablet) */
.menu-knop{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--lijn);background:var(--wit);color:var(--inkt);
  font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;
}
.menu-knop:hover{border-color:var(--bessen);color:var(--bessen)}
.menu-knop .streepjes{display:block;width:18px;height:2px;background:currentColor;position:relative}
.menu-knop .streepjes::before,.menu-knop .streepjes::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;
  transition:transform .2s ease,top .2s ease}
.menu-knop .streepjes::before{top:-6px}
.menu-knop .streepjes::after{top:6px}
.menu-knop[aria-expanded="true"] .streepjes{background:transparent}
.menu-knop[aria-expanded="true"] .streepjes::before{top:0;transform:rotate(45deg)}
.menu-knop[aria-expanded="true"] .streepjes::after{top:0;transform:rotate(-45deg)}
@media (min-width:1000px){ .menu-knop{display:none} }

.menu-paneel{
  border-top:1px solid var(--lijn);
  padding:var(--s2) 0 var(--s3);
}
.menu-paneel[hidden]{display:none}
.menu-paneel ul{list-style:none;margin:0 0 var(--s2);padding:0;display:grid;gap:2px}
.menu-paneel li a{
  display:block;padding:12px 4px;font-family:var(--serif);font-size:22px;
  color:var(--inkt);text-decoration:none;border-bottom:1px solid var(--lijn);
}
.menu-paneel li a:hover{color:var(--bessen)}
.menu-paneel .knoppen{margin-top:var(--s2)}
@media (min-width:1000px){ .menu-paneel{display:none !important} }

@media (max-width:519px){
  .kop-binnen{gap:var(--s2);flex-wrap:wrap}
  .kop-logo img{width:150px}
  .kop.krimpt .kop-logo img{width:140px}
  .kop-rechts{flex-basis:100%;text-align:left;margin-left:0;order:3;
              padding-top:10px;border-top:1px solid var(--lijn)}
  .kop-rechts .bel{font-size:18px}
  .menu-knop{margin-left:auto}
}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:var(--s4);padding-bottom:var(--s5)}
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--s6);
        padding-top:var(--s5);padding-bottom:var(--s6)}
}
.hero-tekst{position:relative}
.hero-tekst p.lead{margin-bottom:var(--s3)}
.hero-tekst .knoppen{margin-top:var(--s3)}
.watermerk{
  position:absolute;pointer-events:none;z-index:-1;
  width:min(520px,80vw);height:auto;opacity:.07;
  left:-140px;top:-120px;transform:rotate(-14deg);
}
.hero-beeld{position:relative;margin-top:var(--s4)}
@media (min-width:900px){ .hero-beeld{margin-top:0} }
.hero-beeld .foto-kader{aspect-ratio:4/5;box-shadow:var(--schaduw)}
@media (min-width:900px){ .hero-beeld .foto-kader{aspect-ratio:4/5} }
.hero-beeld .foto{width:100%;height:100%}
.hero-beeld::before{
  content:"";position:absolute;inset:auto -18px -18px auto;width:62%;height:62%;
  border-radius:var(--radius);background:var(--bessen-nevel);z-index:-1;
}
.hero-badge{
  position:absolute;left:-10px;bottom:28px;
  background:var(--wit);border-radius:12px;padding:12px 18px;
  box-shadow:0 14px 34px -16px rgba(28,22,25,.45);
  font-size:15px;line-height:1.3;color:var(--grijs);
  display:flex;align-items:center;gap:12px;
}
.hero-badge strong{display:block;font-family:var(--serif);font-size:24px;color:var(--inkt);font-weight:500;line-height:1}
.hero-badge img{width:28px;height:auto}
@media (min-width:900px){ .hero-badge{left:-28px;bottom:40px} }

.kenmerken{list-style:none;margin:var(--s4) 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--lijn);
           display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:16px;color:var(--grijs)}
.kenmerken li{display:flex;align-items:center;gap:8px}
.kenmerken li::before{
  content:"";width:14px;height:18px;flex:0 0 auto;
  background:url("daan-bloem-bessen.png") center/contain no-repeat;
}

/* ---------- merken: een doorlopende regel ---------- */
.merken{padding:var(--s3) 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);overflow:hidden}
.merken-binnen{display:flex;align-items:center;gap:var(--s3)}
.merken-label{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
              color:var(--grijs);white-space:nowrap;margin:0;max-width:none;flex:0 0 auto}
.merken-loop{
  flex:1 1 auto;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.merken-spoor{display:flex;width:max-content;will-change:transform}
.js .merken-spoor.loopt{animation:loop-schuif var(--loop-duur,60s) linear infinite}
.merken-loop:hover .merken-spoor,.merken-loop:focus-within .merken-spoor{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .js .merken-spoor.loopt{animation:loop-schuif var(--loop-duur,60s) linear infinite !important}
  .merken-loop:hover .merken-spoor,.merken-loop:focus-within .merken-spoor{animation-play-state:paused !important}
}
.merken-lijst{list-style:none;margin:0;padding:0 var(--s3) 0 0;display:flex;gap:var(--s4)}
.merken-lijst li{font-family:var(--serif);font-size:21px;white-space:nowrap;color:var(--inkt);
                 font-style:italic;letter-spacing:.01em;display:flex;align-items:center;gap:var(--s4)}
.merken-lijst li::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--bessen);opacity:.6}
html:not(.js) .merken-loop{overflow-x:auto;scrollbar-width:none}
html:not(.js) .merken-loop::-webkit-scrollbar{display:none}
@media (max-width:519px){
  .merken-binnen{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .merken-loop{width:100%}
}

/* ---------- secties ---------- */
section{padding:var(--s6) 0}
@media (max-width:700px){ section{padding:var(--s5) 0} }
.lijn-boven{border-top:1px solid var(--lijn)}
.sectie-kop{margin-bottom:var(--s4)}
.sectie-kop > :last-child{margin-bottom:0}

/* ---------- categorieen ---------- */
.categorieen{list-style:none;margin:0;padding:0;display:grid;
             grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s2)}
@media (min-width:700px){ .categorieen{grid-template-columns:repeat(3,1fr);gap:var(--s4) var(--s3)} }
@media (min-width:1000px){ .categorieen{grid-template-columns:repeat(5,1fr);gap:var(--s3)} }
.categorie{position:relative}
.categorie .foto-kader{aspect-ratio:3/4;margin-bottom:var(--s2);
                       transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
.categorie .foto{width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.categorie:hover .foto-kader{transform:translateY(-4px);box-shadow:var(--schaduw)}
.categorie:hover .foto{transform:scale(1.04)}
.categorie h3{margin-bottom:4px}
.categorie p{font-size:17px;margin:0;max-width:26em;color:var(--grijs)}

/* ---------- advies ---------- */
.advies{background:var(--bessen-zacht);position:relative;overflow:hidden}
.advies .watermerk{left:auto;right:-160px;top:auto;bottom:-140px;transform:rotate(18deg);opacity:.08;z-index:0}
.advies .wrap{position:relative;z-index:1}
.stappen{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:780px){ .stappen{grid-template-columns:repeat(3,1fr);gap:var(--s4)} }
.stappen li{background:var(--wit);border-radius:var(--radius);padding:var(--s3) var(--s3) var(--s4);
            box-shadow:0 12px 34px -26px rgba(110,27,87,.5)}
.stappen .nr{display:block;font-family:var(--serif);font-style:italic;font-size:48px;line-height:1;
             color:var(--bessen);margin-bottom:var(--s2)}
.stappen p{margin:0;color:var(--grijs)}
.citaat{margin:var(--s5) 0 0;padding-top:var(--s4);border-top:1px solid var(--bessen-nevel)}
.citaat blockquote{margin:0;font-family:var(--serif);font-size:clamp(22px,2.8vw,30px);
                   line-height:1.35;max-width:22em;text-wrap:balance}
.citaat figcaption{margin-top:var(--s2);font-size:16px;color:var(--grijs)}

/* ---------- maten ---------- */
.maten-grid{display:grid;gap:var(--s4);grid-template-columns:1fr;align-items:center}
@media (min-width:820px){ .maten-grid{grid-template-columns:auto 1fr;gap:var(--s6)} }
.maten-getal{position:relative;font-family:var(--serif);font-size:clamp(64px,11vw,132px);line-height:.95;
             white-space:nowrap;margin:0;letter-spacing:-.03em;padding-left:.1em}
.maten-getal .streep{color:var(--bessen);font-style:italic;margin:0 .06em}
.maten-getal span.onder{display:block;font-size:17px;font-family:var(--sans);letter-spacing:.14em;
                        text-transform:uppercase;font-weight:700;color:var(--grijs);margin-top:var(--s2)}
.maten-getal .watermerk{width:220px;left:-60px;top:-70px;opacity:.09;transform:rotate(12deg)}

/* ---------- klantverhalen: doorlopende loop ---------- */
.verhalen{background:var(--room-diep);overflow:hidden}
.verhalen .lead .sterren{margin-right:4px}
.loop{
  position:relative;overflow:hidden;padding:var(--s1) 0 var(--s3);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.loop-spoor{display:flex;width:max-content;will-change:transform}
.js .loop-spoor.loopt{animation:loop-schuif var(--loop-duur,70s) linear infinite}
.loop:hover .loop-spoor,.loop:focus-within .loop-spoor{animation-play-state:paused}
@keyframes loop-schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.loop-lijst{list-style:none;margin:0;padding:0 calc(var(--s3) / 2);display:flex;gap:var(--s3)}
.verhaal{
  flex:0 0 auto;width:min(340px,78vw);margin:0;
  background:var(--wit);border-radius:var(--radius);padding:var(--s3);
  display:flex;flex-direction:column;gap:var(--s2);
  box-shadow:0 12px 34px -26px rgba(28,22,25,.4);
}
.sterren{color:var(--goud);letter-spacing:3px;font-size:16px;margin:0}
.verhaal blockquote{margin:0;font-family:var(--serif);font-size:19px;line-height:1.45;flex:1 1 auto}
.verhaal blockquote p{margin:0;max-width:none}
.verhaal-naam{font-size:15px;color:var(--grijs);margin:0}
.verhaal-naam strong{color:var(--inkt);font-weight:700}
.verhalen-onder{margin:var(--s3) 0 0}
/* De band loopt altijd, ook bij "verminder beweging": hij is traag en
   stopt zodra je erop staat. Zonder JS kun je gewoon schuiven. */
@media (prefers-reduced-motion:reduce){
  .js .loop-spoor.loopt{animation:loop-schuif var(--loop-duur,70s) linear infinite !important}
  .loop:hover .loop-spoor,.loop:focus-within .loop-spoor{animation-play-state:paused !important}
}
html:not(.js) .loop{overflow-x:auto;scrollbar-width:none}
html:not(.js) .loop::-webkit-scrollbar{display:none}

/* ---------- over ---------- */
.over-fotos{display:grid;gap:var(--s2);grid-template-columns:1fr;margin-top:var(--s4)}
@media (min-width:700px){ .over-fotos{grid-template-columns:repeat(3,1fr);gap:var(--s3)} }
.over-fotos figure{margin:0}
.over-fotos .foto-kader{aspect-ratio:4/3}
.over-fotos .foto{width:100%;height:100%}
.over-fotos figcaption{margin-top:var(--s1);font-size:15px;color:var(--grijs)}
@media (min-width:700px){
  .over-fotos figure:nth-child(2){transform:translateY(var(--s3))}
}

.ook-in{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--lijn);color:var(--grijs)}

/* ---------- veelgestelde vragen ---------- */
.vragen{list-style:none;margin:0;padding:0;max-width:44em}
.vraag{border-bottom:1px solid var(--lijn)}
.vraag:first-child{border-top:1px solid var(--lijn)}
.vraag summary{
  cursor:pointer;list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:18px 4px;font-family:var(--serif);font-size:21px;line-height:1.3;
  transition:color .15s ease;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary:hover{color:var(--bessen)}
.vraag summary::after{
  content:"+";flex:0 0 auto;font-family:var(--sans);font-size:26px;line-height:1;color:var(--bessen);
  transition:transform .2s ease;
}
.vraag[open] summary::after{transform:rotate(45deg)}
.vraag[open] summary{color:var(--bessen)}
.vraag .antwoord{padding:0 4px var(--s3);border-left:3px solid var(--bessen);margin-left:0;
                 padding-left:18px;margin-bottom:var(--s2)}
.vraag .antwoord p{color:var(--grijs)}
.vraag .antwoord p:last-child{margin-bottom:0}

/* ---------- praktisch ---------- */
.praktisch-grid{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:860px){ .praktisch-grid{grid-template-columns:1fr 1fr;gap:var(--s6)} }
address{font-style:normal}
.tijden{width:100%;border-collapse:collapse;margin:0 0 var(--s3);max-width:26em}
.tijden th,.tijden td{padding:12px 0;border-bottom:1px solid var(--lijn);text-align:left;font-size:18px}
.tijden th{font-weight:400;width:10em}
.tijden td{font-weight:600}
.tijden tr.vandaag th,.tijden tr.vandaag td{color:var(--bessen);font-weight:700}
.tijden tr.vandaag{background:linear-gradient(to right,var(--bessen-zacht),transparent)}
.tijden tr.vandaag th{padding-left:10px;border-radius:6px 0 0 6px}
.tijden caption{text-align:left;font-family:var(--serif);font-size:22px;padding-bottom:var(--s1)}
.vandaag-label{font-size:15px;font-weight:400;color:var(--bessen);margin-left:8px}

.kaart{position:relative}
.kaart-vak{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  background:var(--bessen-zacht);border:1px solid var(--lijn);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--s3);
}
.kaart-vak iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kaart-vak .kaart-uitleg{max-width:22em;margin:0 auto}
.kaart-vak .kaart-uitleg p{color:var(--grijs);font-size:16px;margin-bottom:var(--s2)}
.kaart-vak .kaart-uitleg img{width:44px;height:auto;margin-bottom:var(--s2)}
.kaart-onder{margin-top:var(--s2)}

/* ---------- facebook ---------- */
.fb{background:var(--bessen-zacht)}
.fb-klein{font-size:15px;color:var(--grijs)}
.fb-onder{margin-top:var(--s3)}

.car-spoor{
  list-style:none;margin:0;padding:0 0 var(--s2);
  display:flex;gap:var(--s3);
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.car-spoor:focus-visible{outline:3px solid var(--bessen);outline-offset:4px}
.car-kaart{flex:0 0 78%;scroll-snap-align:start;display:flex}
@media (min-width:700px){ .car-kaart{flex-basis:calc(50% - var(--s3))} }
@media (min-width:1000px){ .car-kaart{flex-basis:calc(25% - (3 * var(--s3) / 4))} }

.car-vak{
  position:relative;display:block;width:100%;padding:0;
  aspect-ratio:9/16;overflow:hidden;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius);
  cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;
}
.car-vak:hover{border-color:var(--bessen);transform:translateY(-3px);box-shadow:var(--schaduw)}
.car-foto{display:block;width:100%;height:100%;object-fit:cover}
.car-vak iframe{display:block;width:100%;height:100%;border:0}

.car-speel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;
  background:var(--bessen);border:2px solid var(--wit);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.car-speel::after{
  content:"";border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--wit);margin-left:4px;
}

.car-knoppen{display:flex;gap:var(--s2);margin-top:var(--s3)}
.car-knoppen[hidden]{display:none}
.car-knop{
  min-height:48px;padding:10px 22px;border-radius:999px;cursor:pointer;
  background:var(--wit);color:var(--bessen);border:2px solid var(--bessen);
  font-family:inherit;font-weight:700;font-size:16px;
}
.car-knop:hover:not([disabled]){background:var(--bessen-zacht);color:var(--bessen-diep);border-color:var(--bessen-diep)}
.car-knop[disabled]{opacity:.4;cursor:default}

.fb-uitnodiging{
  display:flex;gap:var(--s3);align-items:flex-start;
  background:var(--wit);border-radius:var(--radius);padding:var(--s3) var(--s3) var(--s3);
  box-shadow:0 12px 34px -26px rgba(110,27,87,.5);max-width:44em;
}
.fb-uitnodiging img{width:44px;height:auto;flex:0 0 auto;margin-top:4px}
.fb-uitnodiging-kop{font-family:var(--serif);font-size:22px;line-height:1.3;margin-bottom:var(--s1)}
.fb-uitnodiging p{color:var(--grijs)}
.fb-uitnodiging .knoppen{margin-top:var(--s2)}
@media (max-width:519px){ .fb-uitnodiging{flex-direction:column} .fb-uitnodiging img{display:none} }

/* ---------- uitnodiging (voor de footer) ---------- */
.uitnodiging{background:var(--bessen);color:var(--wit);position:relative;overflow:hidden}
.uitnodiging .watermerk{opacity:.12;right:-120px;left:auto;top:-160px;transform:rotate(10deg);
                        filter:brightness(0) invert(1);z-index:0}
.uitnodiging .wrap{position:relative;z-index:1}
.uitnodiging h2{color:var(--wit);font-size:clamp(30px,4.4vw,48px);max-width:14em}
.uitnodiging h2 em{color:var(--bessen-nevel)}
.uitnodiging p{color:rgba(255,255,255,.85)}
.uitnodiging .knop-bessen{background:var(--wit);color:var(--bessen);border-color:var(--wit);box-shadow:none}
.uitnodiging .knop-bessen:hover{background:var(--bessen-zacht);border-color:var(--bessen-zacht)}
.uitnodiging .knop-lijn{color:var(--wit);border-color:rgba(255,255,255,.7)}
.uitnodiging .knop-lijn:hover{background:rgba(255,255,255,.12);border-color:var(--wit);color:var(--wit)}
.uitnodiging :focus-visible{outline-color:var(--wit)}

/* ---------- footer ---------- */
footer{background:var(--inkt);color:var(--room);padding:var(--s5) 0 var(--s4)}
footer img.logo{display:block;width:210px;height:auto;margin-bottom:var(--s4)}
footer a{color:var(--room)}
footer a:hover{color:var(--bessen-nevel)}
footer :focus-visible{outline-color:var(--room)}
.footer-grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:700px){ .footer-grid{grid-template-columns:1.2fr 1fr 1fr 1fr;gap:var(--s4)} }
.footer-grid h2{font-size:14px;font-family:var(--sans);font-weight:700;letter-spacing:.14em;
                text-transform:uppercase;color:var(--bessen-nevel);margin-bottom:var(--s2)}
.footer-grid p{margin-bottom:var(--s1);max-width:none}
.footer-ook{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid rgba(255,255,255,.14);font-size:16px}
.footer-tijden{list-style:none;margin:0;padding:0;font-size:16px}
.footer-tijden li{display:flex;justify-content:space-between;gap:var(--s2);padding:3px 0;
                  border-bottom:1px solid rgba(255,255,255,.08)}
.footer-onder{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.14);
              font-size:15px;color:rgba(251,247,244,.7);display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);
              justify-content:space-between}
.footer-onder p{max-width:none;margin:0}

/* ---------- belbalk op mobiel ---------- */
.belbalk{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(251,247,244,.96);border-top:1px solid var(--lijn);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;gap:10px;
  transform:translateY(110%);transition:transform .25s ease;
}
.belbalk.zichtbaar{transform:translateY(0)}
.belbalk .knop{flex:1;min-height:52px;padding:12px 14px;font-size:16px}
@media (min-width:760px){ .belbalk{display:none} }
@media (prefers-reduced-motion:reduce){ .belbalk{transition:none} }

@media print{
  .kop,.belbalk,.fb,.skip,.menu-knop,.menu-paneel,.watermerk,.uitnodiging{display:none}
  body{font-size:11pt;background:#fff}
  a{color:var(--inkt);text-decoration:none}
  section{page-break-inside:avoid;padding:24px 0}
  .vraag{page-break-inside:avoid}
  .vraag .antwoord{display:block}
  .foto-kader{display:none}
}