/* ============================================================
   base-events, aansluiting op Betheme
   Betheme zet om elke sectie, wrap en element eigen wrappers.
   In secties met de klasse "be-raw" worden die wrappers
   doorzichtig (display:contents), zodat de opmaak uit het
   concept één op één werkt. In BeBuilder (body.be-vb) blijven
   de wrappers zichtbaar, zodat alles aanklikbaar blijft.
   ============================================================ */

/* ---------- basis ---------- */
html body.be-site{background:var(--ink); color:var(--paper); font-family:var(--f); font-weight:200}
.be-site #Wrapper,.be-site #Content,.be-site .content_wrapper,.be-site .sections_group,.be-site .entry-content{background:transparent !important}
.be-site #Content{padding:0 !important}
.be-site #Content .content_wrapper,.be-site .sections_group,.be-site .entry-content{display:block; width:100%; max-width:none; margin:0; padding:0; float:none}
.be-site .the_content_wrapper{margin:0}
.be-site{--r:28px; --soft:rgba(255,255,255,.62)}
.be-site .sections_group{overflow:hidden}

/* lettertype en kleuren van Betheme terugzetten naar het handboek */
:where(.be-site) :is(h1,h2,h3,h4,h5,h6,p,li,td,th,blockquote,figcaption,label,input,textarea,select,button,a,span,b,strong,em,small,dt,dd){font-family:var(--f)}
:where(.be-site) :is(h1,h2,h3,h4,h5,h6){color:inherit}
:where(.be-site) a{color:inherit}
:where(.be-site) a:hover{color:inherit; text-decoration:none}
:where(.be-site) button{background:none; border:0; box-shadow:none; color:inherit; font:inherit; padding:0; margin:0; border-radius:0; line-height:inherit; min-height:0}
:where(.be-site) ::selection{background:var(--base); color:#fff}

/* ---------- secties uit BeBuilder ---------- */
body:not(.be-vb) .mcb-section.be-raw > .section_wrapper,
body:not(.be-vb) .mcb-section.be-raw .mcb-wrap-inner,
body:not(.be-vb) .mcb-section.be-raw .mcb-wrap.be-pass,
body:not(.be-vb) .mcb-section.be-raw .mcb-column,
body:not(.be-vb) .mcb-section.be-raw .mcb-column-inner,
body:not(.be-vb) .mcb-section.be-raw .column_attr{display:contents}
body:not(.be-vb) .mcb-section.be-raw .mcb-background-overlay,
body:not(.be-vb) .mcb-section.be-raw .mcb-wrap-background-overlay{display:none}
.mcb-section.be-raw .mcb-wrap-inner{min-height:0}

/* ---------- Betheme-elementen met conceptklassen ---------- */
/* Heading: klasse op de kolom, de kop zelf is .title */
.mcb-column[class*="h3"] .title{margin:0; color:inherit}
.mcb-column.h3title .title,.mcb-column.h3big .title{font-family:var(--f); font-weight:900; text-transform:lowercase}
.mcb-column.h3title .title{margin-top:22px}
.mcb-column.h3big .title{margin:22px auto 0}
.h3work__head .mcb-column.h3big .title{margin-left:0; text-align:left}
.mcb-column.h3title--end .title{margin-top:0}
.mcb-column.h3big--ink .title{color:var(--ink)}

/* Button: de link heet bij Betheme .button */
.mcb-column.h3btn .button{display:inline-flex; align-items:center; margin:0; padding:1.05em 1.9em; border:0; border-radius:999px; background:var(--paper); color:var(--ink); box-shadow:none; font-family:var(--f); font-weight:800; font-size:1.05rem; line-height:1.2; letter-spacing:0; text-transform:none}
.mcb-column.h3btn .button:hover{background:#EAE5DB; color:var(--ink)}
.mcb-column.h3btn .button .button_label{padding:0; font:inherit}
.mcb-column.h3btn .button .button_icon{display:none}
.mcb-column.h3btn .button:after{display:none}

/* Column Text: geen extra marges uit het thema */
.mcb-section.be-raw .column_attr > p:last-child{margin-bottom:0}

/* ---------- header en menu boven Betheme ---------- */
.be-site .hdr{z-index:9000}
.be-site .menu{z-index:8990}
.be-site .loader{z-index:9500}
.be-site .fcta,.be-site .fwa{z-index:8980}
.admin-bar .hdr{top:32px}
.admin-bar .menu{top:32px}
@media (max-width:782px){ .admin-bar .hdr,.admin-bar .menu{top:46px} }
@media (max-width:600px){ html #wpadminbar{position:fixed} }
.hdr .nav .menu-list a,.menu .menu-list a{color:inherit}
.hdr .nav .menu-list > li > a.is-current,.hdr .nav .menu-list > li.current-menu-item > a,.hdr .nav .menu-list > li.current-menu-ancestor > a{opacity:1}
.menu-list li{list-style:none}

/* eerste bezoek gehad: geen logo-opening meer */
html.be-seen .loader,html.no-anim .loader,body.be-vb .loader{display:none}

/* ---------- paginawissel ---------- */
html:not(.no-anim) body.be-site:not(.be-vb) #Content{animation:be-fadein .45s ease-out both}
@keyframes be-fadein{from{opacity:0}to{opacity:1}}

/* ---------- BeBuilder: rustiger voorbeeld ---------- */
body.be-vb .rv,body.be-vb .h3in,body.be-vb .h3steps span{opacity:1 !important; transform:none !important}
body.be-vb .h3steps b,body.be-vb .h3big .w{opacity:1}
body.be-vb .mcb-section.be-raw .mcb-column{width:100%}

/* ---------- toegankelijkheid ---------- */
.skip:focus{left:16px !important; top:16px; z-index:9999; background:#fff; color:#000; padding:10px 16px; border-radius:999px}

/* ---------- zonder JavaScript alles zichtbaar ---------- */
html:not(.be-js) .rv{opacity:1; transform:none}
html:not(.be-js) .h3steps span,html:not(.be-js) .h3sub .steps p{opacity:1; transform:none}
html:not(.be-js) .h3steps b,html:not(.be-js) .h3sub .steps h3{opacity:1}
html:not(.be-js) .loader{display:none}

/* ---------- homepage-blokken in BeBuilder ---------- */
body:not(.be-vb) .h3work__head{display:grid; grid-template-columns:1fr auto; align-items:end; column-gap:20px}
body:not(.be-vb) .h3work__head .h3eye{grid-column:1 / -1; justify-self:start}
body:not(.be-vb) .h3work__head .h3link{margin:0 0 .4em}
.h3what__head .h3eye{justify-content:center}
.h3end .mcb-column.h3btn .button{margin-top:38px}
.h3stats .be-stat{text-align:center}
.h3hero .h3cta .h3who{color:#fff}
@media (max-width:760px){ body:not(.be-vb) .h3work__head{grid-template-columns:1fr} body:not(.be-vb) .h3work__head .h3link{justify-self:start; margin:16px 0 22px} }

/* Betheme zet clearfix-pseudo's op zijn wrappers; in be-raw zouden die als extra blokken meetellen */
body:not(.be-vb) .be-raw :is(.section_wrapper,.mcb-wrap,.mcb-wrap-inner,.mcb-column,.mcb-column-inner,.column_attr)::before,
body:not(.be-vb) .be-raw :is(.section_wrapper,.mcb-wrap,.mcb-wrap-inner,.mcb-column,.mcb-column-inner,.column_attr)::after{content:none; display:none}

/* reviews: geen blockquote-stijl van Betheme */
.h3rev__q blockquote{font-style:normal; color:#fff; background:none; border:0; padding:0; quotes:none; font-family:var(--f)}
.h3rev__q blockquote::before,.h3rev__q blockquote::after{content:none; display:none}
.h3rev__q blockquote p{margin:0; font:inherit; color:inherit}
.h3end .h3contact{margin-top:34px}

/* ---------- subpagina's: containers en koppen ---------- */
.mcb-wrap.be-wrap{max-width:1560px; margin-left:auto; margin-right:auto; padding-left:var(--gut); padding-right:var(--gut); box-sizing:border-box}
.h3sub .sec-head .mcb-column.be-h .title,.h3sub .sec-head .title{margin:0; text-align:center; font-size:clamp(2.3rem,5.4vw,5rem); line-height:.94; letter-spacing:-.05em; font-weight:900; text-transform:lowercase}
.sand .title,.sand .sec-head .lede{color:var(--ink)}
.sand .sec-head .lede.muted{color:rgba(0,0,0,.6)}

/* ---------- FAQ-element van Betheme in de stijl van het concept ---------- */
.mcb-column .faq{margin-left:auto; margin-right:auto; max-width:900px}
.faq > .heading{display:none}
.faq .mfn-acc{border:0; background:none}
.faq .mfn-acc .question{margin:0; padding:0; border:0; border-top:1px solid var(--line); border-radius:0; background:none; box-shadow:none}
.faq .mfn-acc .question:last-child{border-bottom:1px solid var(--line)}
.faq .mfn-acc .question > .title{position:relative; display:flex; justify-content:space-between; align-items:center; gap:24px; margin:0; padding:22px 0; background:none; border:0; color:var(--paper); font-family:var(--f); font-weight:700; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.3; letter-spacing:-.01em; text-transform:none; cursor:pointer}
.faq .mfn-acc .question > .title .num,.faq .mfn-acc .question > .title i{display:none}
.faq .mfn-acc .question > .title::after{content:"+"; flex:none; font-weight:200; font-size:1.8em; line-height:.6; transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.faq .mfn-acc .question.active > .title::after{transform:rotate(45deg)}
.faq .mfn-acc .question > .answer{margin:0; padding:0 0 24px; background:none; border:0; max-width:70ch; font-size:1rem; line-height:1.6; color:rgba(255,255,255,.68)}
.sand .faq .mfn-acc .question{border-color:var(--line-dark)}
.sand .faq .mfn-acc .question > .title{color:var(--ink)}
.sand .faq .mfn-acc .question > .answer{color:rgba(0,0,0,.66)}
.faq .mfn-acc .question > .title,.faq .mfn-acc .question.active > .title,.faq .mfn-acc .question > .title:hover{color:var(--paper) !important; background:none !important; border:0 !important; box-shadow:none !important}
.faq .mfn-acc .question > .title::before{content:none !important; display:none !important}
.faq .mfn-acc .question.active{background:none !important; box-shadow:none !important}
.sand .faq .mfn-acc .question > .title{color:var(--ink) !important}
.faq .mfn-acc .question::before,.faq .mfn-acc .question::after,.faq .mfn-acc .question.active::before,.faq .mfn-acc .question.active::after{content:none !important; display:none !important}

/* ============================================================
   Header en footer uit de Betheme-templates (Templates > Header / Footer)
   ============================================================ */
.mcb-section.hdr{margin:0}
.mcb-section.hdr:not(.solid){background-color:transparent}
.mcb-section.slogan,.mcb-section.ft2__photos,.mcb-section.ft2__main{margin:0}
.mcb-wrap.ft2__grid,.mcb-wrap.ft2__bottom{max-width:1560px; margin-left:auto; margin-right:auto; padding-left:var(--gut); padding-right:var(--gut); box-sizing:border-box; position:relative; z-index:1}
.mcb-wrap.ft2__bottom{border-top:0; padding-top:0; margin-top:clamp(44px,7vh,84px) !important}
.mcb-wrap.ft2__bottom::before{content:""; flex:0 0 100%; height:1px; background:var(--line); margin-bottom:8px}
.ft2__photos .ft2__row + .ft2__insta,.ft2__photos .ft2__insta{z-index:2}
.ft2__lead p{margin:0}
.ft2__lead .ft2__claim{margin-top:26px}
.be-site .ft2 .ft2__logo,.be-site .ft2__lead img{height:clamp(28px,2.6vw,38px) !important; width:auto !important; max-width:100%; display:block}
.ft2 .socials{flex-wrap:wrap}
@media (max-width:1000px){ .ft2__grid .ft2__lead{grid-column:1/-1} }
@media (max-width:560px){
  .ft2__grid{gap:34px 20px}
  .ft2__grid{grid-template-columns:1fr 1fr}
  .ft2 .socials{gap:8px; max-width:100px}
  .ft2 .socials a{width:42px; height:42px; margin-right:0}
  .ft2__claim{font-size:clamp(1.9rem,9vw,2.4rem)}
  .ft2__cta .btn{flex:1 1 auto; justify-content:center}
  .ft2__bottom{font-size:.78rem}
}

/* ============================================================
   Rustig scherm: aanvraag en portalen (alleen logo, geen menu en footer)
   ============================================================ */
.hdr--app{justify-content:space-between}
.hdr--app .hdr__back{font-size:.92rem; font-weight:700; color:rgba(255,255,255,.7); text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.3)}
.hdr--app .hdr__back:hover{color:#fff}
.be-app .slogan,.be-app .ft2,.be-app .fcta,.be-app .fwa{display:none !important}
.ft-app{padding:40px var(--gut) 34px; text-align:center; font-size:.8rem; color:rgba(255,255,255,.4)}
.ft-app a{text-decoration:underline; text-underline-offset:3px}
.ft-app a:hover{color:#fff}

/* ============================================================
   Reviews: hoogte volgt het langste citaat, niets schuift meer over de bolletjes
   ============================================================ */
.h3rev__stage{display:grid; min-height:0}
.h3rev__q{position:relative; inset:auto; grid-area:1 / 1}
.h3rev__q figcaption{margin-top:22px}
.h3rev__dots{margin-top:34px}

/* ============================================================
   Afsluiter "start at the base": kleiner en rustiger uitgelijnd
   ============================================================ */
.h3title--end,.mcb-column.h3title--end .title{font-size:clamp(3rem,8.6vw,8.4rem); line-height:.9; letter-spacing:-.055em}
.h3end .h3lead{margin-top:30px}
.be-site .h3end .mcb-column.h3btn a.button{display:flex; width:max-content; margin:34px auto 0 !important; transition:background-color .3s, color .3s}
.h3end .h3contact{margin-top:30px}

/* ============================================================
   Mobiel: soepeler scrollen (geen zware blur tijdens het scrollen)
   ============================================================ */
@media (max-width:820px), (pointer:coarse){
  .hdr,.hdr.solid{backdrop-filter:none !important; -webkit-backdrop-filter:none !important}
  .hdr.solid{background:rgba(0,0,0,.94)}
  .h3pill,.fcta{backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(20,20,20,.82)}
  .h3marq__row,.slogan__track,.ft2__row{will-change:transform}
}
/* ============================================================
   Privacyverklaring en algemene voorwaarden
   ============================================================ */
.mcb-section.legal-sec{padding-top:0}
.mcb-wrap.legal-wrap{max-width:860px; margin:0 auto; padding-left:var(--gut); padding-right:var(--gut); box-sizing:border-box}
.legal{font-size:1.02rem; line-height:1.7; font-weight:400; color:rgba(255,255,255,.8)}
.legal > p{margin:0 0 18px}
.legal__art{padding:34px 0 22px; border-top:1px solid var(--line)}
.legal h2{margin:0 0 16px; color:#fff; font-weight:900; font-size:clamp(1.35rem,2.2vw,1.85rem); line-height:1.15; letter-spacing:-.03em; text-transform:none}
.legal h3{margin:24px 0 8px; color:#fff; font-weight:800; font-size:1.05rem; letter-spacing:-.01em; text-transform:none}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 14px; padding-left:1.25em}
.legal li{margin:6px 0}
.legal li::marker{color:#8FD3C2}
.legal b{color:#fff; font-weight:700}
.legal__n{color:#8FD3C2; font-weight:800; margin-right:4px}
.legal__meta{font-size:.85rem; color:rgba(255,255,255,.45)}

/* grote koppen: iets meer lucht tussen woorden, letters niet afsnijden */
.h3big .mw,.be-h .mw{padding:0 .05em;margin:0 .015em}
/* over ons: teamfoto met meer ruimte boven de hoofden */
img[src*="be-team-smile"]{object-position:50% 15% !important}
/* detailpagina's: shows, dj's en cases */
.be-detail .be-dtext{max-width:62ch}
.be-detail .h3why .be-dtext{margin-left:auto; margin-right:auto}
.be-detail .be-dtext p{margin:0 0 1em}
.be-detail .be-dtext p:last-child{margin-bottom:0}
.be-detail .h3why--sub .be-dtext{font-size:clamp(1rem,1.2vw,1.15rem)}
.be-detail .be-dgal{padding-top:0}
.be-video{position:relative; aspect-ratio:16/9; border-radius:var(--r,24px); overflow:hidden; background:#0d0d0d}
.be-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.be-detail .be-dmore .h3cards{margin-top:clamp(28px,4vh,48px)}
.be-detail .story__img{display:block; border-radius:var(--r,24px)}
.be-detail .facts b{font-size:clamp(1.3rem,2.2vw,2rem)}
/* fotoslider detailpagina's */
.be-dgal{padding-top:0 !important; overflow:hidden}
.be-slider__track{display:flex; gap:clamp(12px,1.6vw,22px); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-inline:max(var(--gut,24px),calc((100vw - 1560px)/2 + var(--gut,24px))); cursor:grab; outline:0}
.be-slider__track::-webkit-scrollbar{display:none}
.be-slider__track.is-drag{cursor:grabbing; scroll-snap-type:none; user-select:none}
.be-slider__slide{flex:0 0 min(78vw,1100px); margin:0; aspect-ratio:3/2; border-radius:var(--r,24px); overflow:hidden; background:#0d0d0d; scroll-snap-align:center}
.be-slider__slide img{width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none}
.be-slider__ctl{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:clamp(18px,2.6vh,30px)}
.be-slider__btn{width:52px; height:52px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); color:#fff; font-size:1.2rem; transition:background-color .3s,color .3s}
.be-slider__btn:hover{background:#fff; color:#000}
.be-slider__count{font-size:.9rem; color:rgba(255,255,255,.6); min-width:56px; text-align:center}
.be-slider__count b{color:#fff}
@media (max-width:700px){ .be-slider__slide{flex-basis:86vw; aspect-ratio:4/5} .be-slider__track{padding-inline:7vw} }
/* links naar de verhuurpagina's onderaan verhuur */
.be-seolinks{margin-top:clamp(50px,7vh,90px); text-align:center}
.be-seolinks h3{margin-bottom:6px}
.be-seolinks .tags{justify-content:center}
.be-seolinks .tags a:hover{color:#2f6b5e}
/* lange woorden in koppen netjes afbreken op mobiel */
.h3hero .h3l > span{max-width:100%; -webkit-hyphens:manual; hyphens:manual; overflow-wrap:break-word}

/* cases: uitgelichte case los bovenaan */
.cbig--top{margin-bottom:clamp(44px,7vh,80px)}

/* showreel: knop op de video en pop-up met YouTube */
.be-reelbtn{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:flex-start;gap:12px;padding:clamp(16px,3vw,32px);background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0) 45%);border:0;color:#fff;cursor:pointer;font:inherit;text-align:left}
.be-reelbtn__p{width:clamp(54px,6vw,74px);height:clamp(54px,6vw,74px);border-radius:50%;background:#fff;position:relative;flex:0 0 auto;transition:transform .3s}
.be-reelbtn__p:after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #000}
.be-reelbtn__t{font-weight:800;font-size:clamp(1rem,1.4vw,1.2rem);letter-spacing:-.01em;line-height:clamp(54px,6vw,74px);text-shadow:0 2px 12px rgba(0,0,0,.4)}
.be-reelbtn:hover .be-reelbtn__p,.be-reelbtn:focus-visible .be-reelbtn__p{transform:scale(1.08)}
.be-yt{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,48px)}
.be-yt__box{position:relative;width:min(1200px,100%)}
.be-yt__v{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.be-yt__v iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.be-yt__x{position:absolute;right:0;top:-52px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#000;font-size:28px;line-height:1;cursor:pointer}
html.be-yt-on{overflow:hidden}