/*
Theme Name: A'DAM LOOKOUT
Theme URI: https://adamlookout.com
Author: A'DAM LOOKOUT
Description: Custom mobile-first theme voor A'DAM LOOKOUT — 360° Amsterdam + Over the Edge.
Version: 1.0
Text Domain: adamlookout
*/

/* ============================================
   A'DAM LOOKOUT - Main Stylesheet
   ============================================ */

/* === FONTS === */
@font-face{font-family:'HelveticaNeue';src:url('fonts/helveticaneuebold.woff2') format('woff2'),url('fonts/helveticaneuebold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}

/* === RESET & VARIABLES === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --red:#E8001E;
  --rd:#b80018;
  --blk:#0C0C0C;
  --ow:#F2F0ED;
  --mg:#7A7A7A;
  --dg:#161616;
  --br:rgba(255,255,255,.1);
  /* Losse RGB-waarden, zodat vlakken en randen binnen een sectie in één keer
     kunnen omklappen van licht-op-donker naar donker-op-licht. */
  --sc-tint-rgb:255,255,255;
  --sc-ow-rgb:242,240,237;
  --sh:72px;
  --nh:60px;


  /* =============================================
     TYPOGRAFIE — PAS HIER ALLE MATEN AAN
     ============================================= */

  /* Broodtekst */
  --font-body: 'Outfit', Helvetica, Arial, sans-serif;
  --font-heading: 'HelveticaNeue', Helvetica, Arial, sans-serif;

  /* Koppen */
  --fs-h1: clamp(44px, 12vw, 76px);        /* Hero titels, paginatitels */
  --fs-h2: clamp(32px, 8vw, 52px);         /* Sectietitels */
  --fs-h3: 20px;                            /* Kaart-titels, ticket-namen */
  --fs-h4: clamp(18px, 3vw, 22px);         /* Lijstitems: features, openingstijden, FAQ, stappen */

  /* Labels & sub-koppen (klein, uppercase) */
  --fs-label: 11px;                         /* Sectie-labels, card-labels */
  --fs-label-sm: 10px;                      /* Breadcrumbs, tags */
  --ls-label: .18em;                        /* Letter-spacing labels */

  /* Broodtekst */
  --fs-body: 16.5px;                        /* Standaard broodtekst */
  --fs-body-sm: 15.5px;                     /* Secundaire tekst, beschrijvingen */
  --lh-body: 1.65;                          /* Regelafstand broodtekst */
  --c-body: rgba(242,240,237,.78);           /* Broodtekst kleur */

  /* Buttons */
  --fs-btn: 13px;                           /* Button tekst */
  --ls-btn: -.022em;                        /* Letter-spacing buttons */

  /* Footer */
  --fs-footer-link: 14px;                   /* Footer links */
  --fs-footer-bottom: 12px;                 /* Onderste balk */
  --c-footer-link: rgba(242,240,237,.78);   /* Footer link kleur */
  --c-footer-bottom: rgba(242,240,237,.55); /* Onderste balk kleur */
}
body{font-family:var(--font-body);font-weight:400;letter-spacing:-.005em;background:var(--blk);color:var(--ow);overflow-x:hidden;-webkit-font-smoothing:antialiased}
.hb,.nav-ol a,.nav-sub a,.nav-el,.nec-t,.nec-n,.sl-lbl,.ec-lb,.ec-ttl,.ec-lk,.tkn,.tkbg,.tkpn,.tkpf,.fqq,.stk-info,.lang,.sec-btn,.br,.bg,.stk-btn,.hdr-tk,.sl{font-family:var(--font-heading)}
.hb{font-weight:700;letter-spacing:var(--ls-btn)}

/* === SKIP LINK (toegankelijkheid) === */
.skip-link{position:absolute;top:-100px;left:16px;z-index:9999;background:var(--red);color:#fff;padding:10px 20px;border-radius:0 0 6px 6px;font-size:14px;font-weight:700;text-decoration:none;transition:top .2s}
.skip-link:focus{top:0}

/* === HEADER === */
.sh{position:fixed;top:0;left:0;right:0;height:var(--nh);z-index:300;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid transparent;transition:background .4s ease,backdrop-filter .4s ease,border-bottom .4s ease}
/* Logo + buttons uitlijnen met de content (max 1320px gecentreerd) */
@media(min-width:768px){.sh{padding-left:5%;padding-right:5%}}
@media(min-width:1400px){.sh{padding-left:max(5%,calc((100vw - 1320px) / 2));padding-right:max(5%,calc((100vw - 1320px) / 2))}}
.sh.sc,.sh.scrolled{background:rgba(255,255,255,.08);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border-bottom:1px solid rgba(255,255,255,.1)}
.sh-logo{text-decoration:none;display:flex;align-items:center}
.sh-logo img{height:34px;width:auto}
.sh-r{display:flex;align-items:center;gap:10px}
.sh-socials{display:none;align-items:center;gap:4px}
.sh-google{display:none;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.18);border-radius:6px;height:36px;padding:0 12px;text-decoration:none;transition:border-color .2s}
.sh-google:hover{border-color:rgba(255,255,255,.35)}
.sh-gscore{font-weight:700;letter-spacing:-.022em;font-size:14px;color:var(--ow)}
.sh-gstars{display:flex;gap:1px}
.lang-wrap{position:relative}
.lang{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.06em;color:rgba(242,240,237,.7);background:none;border:1px solid rgba(255,255,255,.18);height:36px;padding:0 14px;border-radius:6px;cursor:pointer;font-family:inherit;text-transform:uppercase;transition:border-color .2s,color .2s}
.lang-flag{font-size:18px;line-height:1}
.lang-wrap.open .lang,.lang:hover{border-color:rgba(255,255,255,.5);color:var(--ow)}
.lang-dd{display:none;position:absolute;top:calc(100% + 8px);right:0;background:rgba(16,16,16,.97);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:6px 0;min-width:140px;backdrop-filter:blur(20px);z-index:400;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.lang-wrap.open .lang-dd{display:block}
.lang-dd a{display:flex;align-items:center;gap:12px;padding:12px 18px;color:rgba(242,240,237,.7);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:background .15s,color .15s;white-space:nowrap}
.lang-dd a:hover{background:rgba(255,255,255,.1);color:var(--ow)}
.lang-dd .lang-flag{font-size:20px}
.hbtn{width:32px;height:32px;display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;background:none;border:none;padding:2px}
.hbtn span{display:block;height:1.5px;background:var(--ow);transition:all .28s cubic-bezier(.4,0,.2,1)}
.hbtn.op span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hbtn.op span:nth-child(2){opacity:0;transform:scaleX(0)}
.hbtn.op span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Header Ticket Button (Desktop) */
.hdr-tk{display:none;background:var(--red);color:#fff;font-family:'HelveticaNeue',Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.022em;font-size:12px;text-transform:uppercase;height:36px;padding:0 16px;border-radius:6px;text-decoration:none;white-space:nowrap;transition:background .2s}
.hdr-tk:hover{background:var(--rd)}

/* === SOCIAL BUTTONS === */
.soc{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:rgba(242,240,237,.6);text-decoration:none;transition:color .2s,border-color .2s,background .2s}
.soc:hover{color:var(--ow);border-color:rgba(255,255,255,.4)}
.soc.ig:hover{background:linear-gradient(135deg,#f09433,#dc2743,#bc1888);border-color:transparent;color:#fff}
.soc.tt:hover{background:#000;border-color:#333;color:#fff}
.soc.fb:hover{background:#1877f2;border-color:#1877f2;color:#fff}
.sh-chat{height:36px;border-radius:6px;border:1px solid rgba(255,255,255,.18);display:none;align-items:center;gap:6px;padding:0 14px;color:rgba(242,240,237,.6);background:none;cursor:pointer;font-size:12px;transition:color .2s,border-color .2s,background .2s}
.sh-chat:hover{color:var(--ow);border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.chat-btn{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;border:none;border-radius:6px;padding:16px 28px;font-size:15px;font-weight:700;letter-spacing:-.022em;cursor:pointer;transition:background .2s}
.chat-btn:hover{background:var(--rd);transform:translateY(-2px);box-shadow:0 5px 16px rgba(232,0,30,.25)}

/* Chat CTA block */
.chtc{padding:56px 20px}
.chtc--full .chtc-in{display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(var(--sc-tint-rgb),.06);border:1px solid var(--br);border-radius:16px;padding:24px 28px}
.chtc--full .chtc-txt{display:flex;flex-direction:column;gap:4px}
.chtc--full .chtc-ttl{font-size:var(--fs-h3);color:#fff;text-transform:uppercase}
.chtc--full .chtc-sub{font-size:var(--fs-body-sm);color:var(--c-body)}
.chtc .chtc-btn{background:var(--red);color:#fff;border:none;border-radius:6px;padding:14px 28px;font-size:var(--fs-btn);font-weight:700;letter-spacing:var(--ls-btn);text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .2s,transform .2s,box-shadow .2s}
.chtc .chtc-btn:hover{background:var(--rd);transform:translateY(-2px);box-shadow:0 5px 16px rgba(232,0,30,.25)}
.chtc--card{display:flex;justify-content:center}
.chtc-card{background:rgba(var(--sc-tint-rgb),.06);border:1px solid var(--br);border-radius:16px;padding:32px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:400px;width:100%}
.chtc-card .chtc-icon{width:48px;height:48px;border-radius:50%;background:rgba(232,0,30,.15);display:flex;align-items:center;justify-content:center;color:var(--red)}
.chtc-card .chtc-icon svg{width:22px;height:22px}
.chtc-card .chtc-ttl{font-size:var(--fs-h3);color:#fff;text-transform:uppercase}
.chtc-card .chtc-sub{font-size:var(--fs-body-sm);color:var(--c-body);line-height:var(--lh-body)}
.chtc-card .chtc-btn{margin-top:4px;padding:14px 32px}
.chtc--btn{text-align:center}
.chtc-btn--lg{background:var(--red);color:#fff;border:none;border-radius:6px;padding:16px 36px;font-size:15px;font-weight:700;letter-spacing:-.022em;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:background .2s,transform .2s,box-shadow .2s}
.chtc-btn--lg:hover{background:var(--rd);transform:translateY(-2px);box-shadow:0 5px 16px rgba(232,0,30,.25)}
.chtc--btn .chtc-sub{font-size:var(--fs-body-sm);color:var(--c-body);margin-top:8px}
@media(max-width:767px){.chtc--full .chtc-in{flex-direction:column;text-align:center;padding:20px}.chtc--full .chtc-txt{align-items:center}.chtc--full .chtc-btn{width:100%;justify-content:center}.chtc-card{padding:24px 20px}}
@media(min-width:768px){.chtc{padding:64px 32px}}
@media(min-width:1024px){.chtc{padding:80px 48px}}
@media(min-width:1320px){.chtc{padding-left:max(48px,calc((100vw - 1224px) / 2));padding-right:max(48px,calc((100vw - 1224px) / 2))}}
.sc-chat{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;border:none;border-radius:6px;padding:12px 24px;margin:8px 0;font-size:var(--fs-btn);font-weight:700;letter-spacing:var(--ls-btn);text-transform:uppercase;cursor:pointer;transition:background .2s,transform .2s;vertical-align:middle}
@media(hover:hover){.sc-chat:hover{background:#c5001a;transform:scale(1.03)}}
.nav-chat{margin-top:16px}
.nav-chat button{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--red);color:#fff;border:none;border-radius:4px;padding:14px 20px;font-size:14px;font-weight:700;letter-spacing:-.022em;cursor:pointer;transition:background .2s}
.nav-chat button:hover{background:var(--rd)}
@media(min-width:768px){.nav-chat{margin-top:16px}.nav-chat button{width:auto;padding:12px 24px;font-size:14px;letter-spacing:-.022em;text-transform:uppercase;border-radius:6px;background:var(--red);border:none}.nav-chat button:hover{background:var(--rd)}}

/* === NAVIGATION (Mobile Menu) === */
.nav{position:fixed;inset:0;z-index:299;background:rgba(8,8,12,.97);display:flex;flex-direction:column;padding:calc(var(--nh) + 20px) 24px 40px;clip-path:circle(0% at calc(100% - 44px) 32px);transition:clip-path .55s cubic-bezier(.77,0,.18,1);overflow-y:auto;pointer-events:none}
.nav.op{clip-path:circle(150% at calc(100% - 44px) 32px);pointer-events:auto}
.nav-el{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);margin-bottom:14px}
.nav-eg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}
.nec{border-radius:6px;overflow:hidden;position:relative;aspect-ratio:1/1;text-decoration:none;color:inherit;display:flex;flex-direction:column;justify-content:flex-end}
.nec img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.nec:hover img{transform:scale(1.06)}
.nec-g{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,12,12,0) 25%,rgba(12,12,12,.7) 100%);transition:opacity .4s}
.nec:hover .nec-g{opacity:.85}
.nec-b{position:relative;z-index:2;padding:14px}
.nec-t{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(242,240,237,.85);margin-bottom:5px}
.nec-n{font-weight:700;letter-spacing:-.022em;font-size:var(--fs-h3);text-transform:uppercase;color:var(--ow);line-height:1;text-shadow:0 1px 10px rgba(0,0,0,.4)}
@media(min-width:1024px){.nec-n{font-size:clamp(18px,1.8vw,24px)}}
.nav-div{height:1px;background:var(--br);margin:0 0 12px}
.nav-ol{display:flex;flex-direction:column;gap:2px}
.nav-ol a{position:relative;display:flex;align-items:center;justify-content:space-between;font-weight:700;letter-spacing:-.022em;font-size:22px;text-transform:uppercase;color:var(--ow);text-decoration:none;padding:12px 16px;border-bottom:1px solid var(--br);transition:color .25s,background .25s;border-radius:4px;overflow:hidden}
.nav-ol a::before{content:'';position:absolute;inset:0;background:rgba(232,0,30,.08);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.nav-ol a:hover::before{transform:scaleX(1)}
.nav-ol a:hover,.nav-ol a.cur{color:var(--red)}
.nav-ol a span{position:relative;font-size:16px;color:var(--red);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.nav-ol a:hover span{transform:translateX(6px)}
.nav-dd{border-bottom:1px solid var(--br);border-radius:4px;overflow:hidden}
.nav-dd-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--font-heading);font-weight:700;letter-spacing:-.022em;font-size:22px;text-transform:uppercase;color:var(--ow);background:none;border:none;padding:12px 16px;cursor:pointer;transition:color .25s;text-align:left}
.nav-dd-toggle:hover{color:var(--red)}
.nav-dd-arr{font-size:20px;color:var(--red);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.nav-dd.open .nav-dd-arr{transform:rotate(90deg)}
.nav-dd-items{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.22,1,.36,1)}
.nav-dd.open .nav-dd-items{max-height:500px}
.nav-ol .nav-dd-item{display:block;font-family:var(--font-heading);font-weight:600;font-size:14px!important;letter-spacing:.02em;color:var(--ow);text-decoration:none;padding:9px 16px 9px 36px;border-bottom:none;text-transform:uppercase;transition:color .2s,background .2s}
.nav-ol .nav-dd-item::before{content:'→';margin-right:8px;font-size:11px;color:var(--red);display:inline-block;position:static;background:none;transform:none}
.nav-ol .nav-dd-item:hover{color:var(--red);background:rgba(255,255,255,.04)}
.nav-ol .nav-dd-item:hover::before{transform:none}
.nav-soc{margin-top:20px;padding-top:20px;border-top:1px solid var(--br)}
.nav-soc-r{display:flex;gap:16px;justify-content:center}
.nav-si{display:flex;align-items:center;justify-content:center;width:48px;height:48px;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.15);border-radius:50%;transition:background .2s,border-color .2s,transform .2s}
.nav-si:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);transform:scale(1.08)}
.nav-si svg{color:#fff}
.nav-sub{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0}
.nav-sub a{font-family:'HelveticaNeue',Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(242,240,237,.7);text-decoration:none;border:1px solid var(--br);border-radius:3px;padding:8px 14px;transition:color .2s,border-color .2s,background .2s}
.nav-sub a:hover{color:var(--ow);border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.06)}

/* === STICKY BAR (Mobile) === */
.stk{position:fixed;bottom:0;left:0;right:0;z-index:250;display:flex;align-items:stretch;padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px));background:rgba(12,12,12,.97);border-top:1px solid var(--br);transition:opacity .3s,transform .3s}
.stk-btn{flex:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent;flex-wrap:wrap;column-gap:12px;row-gap:2px;background:var(--red);color:#fff;border:none;padding:15px clamp(13px,4vw,18px);font-family:'HelveticaNeue',Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.022em;font-size:14px;text-transform:uppercase;cursor:pointer;border-radius:6px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;text-decoration:none;transition:background .2s}
/* Knoptekst + vanaf-prijs even groot op één regel; --stk-max wordt per taal gezet (lange talen iets kleiner) */
.stk-main{font-size:min(var(--stk-max,20px),6.2vw);letter-spacing:-.01em;flex:0 1 auto;display:inline-flex;align-items:center;gap:2px}
/* Prijs-labeltje achter de knoptekst — donkerder rood, kleine radius */
.cta-price{display:inline-block;background:#fff;color:var(--rd);font-weight:700;font-size:.9em;letter-spacing:-.01em;line-height:1.2;padding:.3em .62em;border-radius:6px;margin-left:.55em;white-space:nowrap;vertical-align:baseline}
.cta-arr{flex:none;margin-left:.6em;vertical-align:middle}
@media(hover:hover){.stk-btn:hover{background:var(--rd)}}
.stk-main{white-space:nowrap}
/* Korting rechts op 2 regels; valt netjes onder de knoptekst als het naast elkaar niet past */
/* Rechterkolom: prijstag + kortingstekst, netjes gescheiden */
.stk-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}
.stk-right .cta-price{font-size:clamp(13px,3.9vw,15.5px);margin-left:0}
.stk-sub{font-size:clamp(10px,2.9vw,11.5px);font-weight:600;letter-spacing:.01em;text-align:left;line-height:1.2;opacity:.88;
  flex:0 1 auto;min-width:0;white-space:normal;max-width:6.5em}
.stk-sub strong{display:block;font-size:clamp(10.5px,3vw,11.5px);opacity:1;line-height:1.15}

/* === BUTTONS === */
.br{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;font-family:var(--font-heading);font-weight:700;letter-spacing:var(--ls-btn);font-size:var(--fs-btn);text-transform:uppercase;padding:14px 24px;border-radius:2px;border:none;text-decoration:none;cursor:pointer;transition:background .2s;white-space:nowrap}
.br:hover{background:var(--rd)}
.br::after{content:"→"}
.bg{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--ow);font-family:var(--font-heading);font-weight:700;letter-spacing:var(--ls-btn);font-size:var(--fs-btn);text-transform:uppercase;padding:13px 22px;border-radius:2px;border:1px solid rgba(var(--sc-tint-rgb),.35);text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s;white-space:nowrap}
.bg:hover{border-color:rgba(var(--sc-tint-rgb),.65);background:rgba(var(--sc-tint-rgb),.08)}

/* === CTA BLOCK === */
.cta-section{text-align:center}
.cta-inner{max-width:680px;margin:0 auto}
.cta-section .sl{justify-content:center}
.cta-ttl{font-weight:700;letter-spacing:-.022em;line-height:.95;margin-bottom:16px;text-transform:uppercase}
.cta-h1{font-size:var(--fs-h1)}
.cta-h2{font-size:var(--fs-h2)}
.cta-h3{font-size:clamp(26px,5vw,36px)}
.cta-h4{font-size:var(--fs-h4)}
.cta-sub{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-body);margin-bottom:28px}
.cta-btn{margin-top:8px}

/* === CONTENT SECTION === */
.cs-content{padding-left:28px;padding-right:28px}
.cs-content .sl{color:var(--ow)}

/* === CONTENT SECTION IMAGE === */
.cs-img--top{margin-bottom:28px;border-radius:12px;overflow:hidden}
.cs-img--top img{width:100%;height:auto;display:block}
.cs-layout{display:flex;flex-direction:column}
.cs-col--img{margin-bottom:24px;border-radius:12px;overflow:hidden}
.cs-col--img img{width:100%;height:auto;display:block}
@media(min-width:768px){
  .cs-layout{flex-direction:row;gap:48px;align-items:center}
  .cs-layout--right .cs-col--img{order:2}
  .cs-layout--right .cs-col--txt{order:1}
  .cs-layout--left .cs-col--img{order:1}
  .cs-layout--left .cs-col--txt{order:2}
  .cs-col--txt{flex:1;min-width:0}
  .cs-col--img{flex:1;min-width:0;margin-top:0}
}

/* === SECTIONS === */
.cs{padding:40px 20px;background:var(--dg)}
.cs.dk{background:var(--dg)}
.cs.rd{background:var(--red)}
.cs.lt{background:#F2F0ED;color:var(--blk)}
.sl{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);margin-bottom:12px;display:inline-flex;align-items:center;gap:14px;background:rgba(var(--sc-tint-rgb),.07);padding:5px 12px;border-radius:4px}
.sl::after{display:none}
.cs.rd .sl{color:rgba(var(--sc-tint-rgb),.65)}
.st{font-weight:700;letter-spacing:-.032em;font-size:var(--fs-h2);text-transform:uppercase;line-height:.92;margin-bottom:20px}
.st.st-h1{font-size:var(--fs-h1)}
.st.st-h3{font-size:clamp(26px, 5vw, 38px);text-transform:none}
.st.st-h4{font-size:clamp(22px, 4vw, 30px);text-transform:none}
.cs.rd .st{color:#fff}
/* Tweede zin van een sectiekop op een eigen regel in rood — zoals in de hero. */
.st em{font-style:normal;color:var(--red);display:block}
.cs.lt .st{color:var(--blk)}
.sb{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-body);max-width:680px}
.sb p + p{margin-top:1em}
.cs.rd .sb{color:rgba(var(--sc-tint-rgb),.82)}
.cs.lt .sb{color:rgba(12,12,12,.55)}
.sec-cta{margin-top:28px}
.sec-btn{display:inline-flex;align-items:center;gap:8px;font-family:'HelveticaNeue',Helvetica,Arial,sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-decoration:none;padding:13px 24px;border:1px solid var(--br);border-radius:3px;transition:background .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s}
.sec-btn:hover{background:rgba(232,0,30,.1);border-color:var(--red);color:var(--red);transform:translateY(-2px);box-shadow:0 4px 12px rgba(232,0,30,.15)}
.cs.rd .sec-btn{border-color:rgba(var(--sc-tint-rgb),.3);color:#fff}
.cs.rd .sec-btn:hover{background:rgba(var(--sc-tint-rgb),.12);border-color:#fff;box-shadow:0 4px 12px rgba(var(--sc-tint-rgb),.1)}
.cs.lt .sec-btn{color:var(--blk);border-color:rgba(12,12,12,.15)}
.cs.lt .sec-btn:hover{background:rgba(232,0,30,.06);border-color:var(--red);color:var(--red)}

/* === PAGE HERO (Detail pages - short) === */
.ph{position:relative;padding:calc(var(--nh) + 40px) 20px 48px;background:var(--dg);border-bottom:1px solid var(--br);overflow:hidden}
.ph::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red)}
.ph-lbl{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);margin-bottom:12px;display:inline-flex;align-items:center;gap:10px;background:rgba(var(--sc-tint-rgb),.07);padding:5px 12px;border-radius:4px}
.ph-lbl::after{content:"";width:32px;height:1px;background:var(--red);opacity:.6}
.ph-ttl{font-weight:700;letter-spacing:-.022em;font-size:var(--fs-h1);text-transform:uppercase;line-height:.9;margin-bottom:16px}
.ph-ttl em{font-style:normal;color:var(--red);display:block}
.ph-dsc{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-body);max-width:420px;margin-bottom:24px}
.hbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* === DETAIL HERO (Full-screen with background) === */
.dh{position:relative;height:100svh;min-height:640px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 44px 36px 20px;overflow:hidden}
.dh-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.dh-bg--desk{display:none}
.dh-bg--mob{display:block}
@media(min-width:768px){.dh-bg--desk{display:block}.dh-bg--mob{display:none}}
.dh-gr{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,12,12,.2) 0%,rgba(12,12,12,.04) 30%,rgba(12,12,12,.5) 70%,rgba(12,12,12,.95) 100%)}
.dh-rl{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);z-index:2}
.dh-ct{position:relative;z-index:3}
.dh-bc{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(var(--sc-ow-rgb),.55);margin-bottom:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dh-bc a{color:rgba(var(--sc-ow-rgb),.55);text-decoration:none;transition:color .2s}
.dh-bc a:hover{color:var(--ow)}
.dh-bc .sep{color:var(--red)}
.dh-lbl{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);margin-bottom:12px;display:inline-flex;align-items:center;gap:10px;background:rgba(var(--sc-tint-rgb),.1);padding:5px 12px;border-radius:4px;backdrop-filter:blur(8px)}
.dh-lbl::after{display:none}
.dh-ttl{font-weight:700;letter-spacing:-.022em;font-size:var(--fs-h1);text-transform:uppercase;line-height:.92;margin-bottom:14px;text-shadow:0 2px 20px rgba(0,0,0,.5),0 0 40px rgba(0,0,0,.3)}
.dh-ttl em{font-style:normal;color:var(--red);display:block}
.dh-dsc{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-body);max-width:360px;margin-bottom:20px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.full-photo{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.photo-cap{font-size:12px;color:rgba(var(--sc-ow-rgb),.45);padding:8px 20px;letter-spacing:.05em}

/* === HOMEPAGE HERO (Slideshow) === */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.slide.ac{opacity:1;pointer-events:auto}
.sl-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.sl-bg--desk{display:none}
.sl-bg--mob{display:block}
@media(min-width:768px){.sl-bg--desk{display:block}.sl-bg--mob{display:none}}
.sl-gr{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,12,12,.25) 0%,rgba(12,12,12,.05) 30%,rgba(12,12,12,.5) 60%,rgba(12,12,12,.92) 100%)}
.sl-rl{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);z-index:2}
.sl-ct{position:absolute;bottom:0;left:20px;right:20px;padding:0 44px 36px 0;z-index:10}
.sl-lbl{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);margin-bottom:12px;display:inline-flex;align-items:center;gap:10px;background:rgba(var(--sc-tint-rgb),.1);padding:5px 12px;border-radius:4px;backdrop-filter:blur(8px);opacity:0;transform:translateY(12px);transition:opacity .5s .2s,transform .5s .2s}
.sl-lbl::after{display:none}
.slide.ac .sl-lbl{opacity:1;transform:none}
.sl-ttl{font-weight:700;letter-spacing:-.022em;font-size:var(--fs-h1);text-transform:uppercase;line-height:.92;margin-bottom:14px;opacity:0;transform:translateY(16px);transition:opacity .55s .3s,transform .55s .3s;text-shadow:0 2px 20px rgba(0,0,0,.5),0 0 40px rgba(0,0,0,.3)}
.slide.ac .sl-ttl{opacity:1;transform:none}
.sl-ttl em{font-style:normal;color:var(--red);display:block}
.sl-dsc{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-body);max-width:360px;margin-bottom:20px;opacity:0;transform:translateY(12px);transition:opacity .5s .4s,transform .5s .4s;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.slide.ac .sl-dsc{opacity:1;transform:none}
.sl-btns{display:flex;gap:10px;flex-wrap:wrap;opacity:0;transform:translateY(10px);transition:opacity .45s .5s,transform .45s .5s}
.slide.ac .sl-btns{opacity:1;transform:none}
.sl-dots{display:none}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(var(--sc-tint-rgb),.3);border:none;cursor:pointer;transition:background .25s,transform .25s;padding:0}
.dot.ac{background:var(--red);transform:scale(1.4)}
.sl-arrs{position:absolute;bottom:calc(var(--sh) + 96px);right:16px;z-index:10;display:flex;flex-direction:column;gap:6px;align-items:center}
.sl-arr{width:36px;height:36px;border:1px solid rgba(var(--sc-tint-rgb),.2);border-radius:2px;background:rgba(12,12,12,.5);backdrop-filter:blur(8px);color:var(--ow);font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,background .2s}
.sl-arr:hover{border-color:var(--red);background:rgba(232,0,30,.2)}
.sl-timer{width:20px;height:20px;margin-top:6px;opacity:.7;display:flex;align-items:center;justify-content:center}
.sl-timer svg{width:20px;height:20px;transform:rotate(-90deg)}
.sl-timer-bg{fill:none;stroke:rgba(var(--sc-tint-rgb),.15);stroke-width:1.5}
.sl-timer-fill{fill:none;stroke:rgba(var(--sc-tint-rgb),.6);stroke-width:1.5;stroke-dasharray:100.53;stroke-dashoffset:100.53;stroke-linecap:round}
@keyframes sl-progress{to{stroke-dashoffset:0}}
.sl-ctr{position:absolute;bottom:calc(var(--sh) + 38px);right:20px;z-index:10;font-size:12px;font-weight:700;letter-spacing:.12em;color:rgba(var(--sc-tint-rgb),.25);font-family:'HelveticaNeue',Helvetica,Arial,sans-serif}
.sl-ctr .cur{color:var(--ow);font-size:22px;letter-spacing:-.02em}
.sl-ctr .sep{margin:0 2px;color:rgba(var(--sc-tint-rgb),.15)}

/* === SCROLL HINT === */
.scrl{position:absolute;bottom:calc(var(--sh) + 20px);left:50%;transform:translateX(-50%);z-index:10;opacity:.6;transition:opacity .3}
@media(max-width:767px){.scrl{bottom:16px}}
.scrl:hover{opacity:.9}
.scrl span{display:block;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:11px solid #fff;animation:_scrollPulse 2s ease-in-out infinite}
@keyframes _scrollPulse{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(8px);opacity:1}}

/* === GOOGLE STRIP === */
.gs{display:flex;align-items:center;gap:14px;padding:20px 22px;background:rgba(var(--sc-tint-rgb),.05);border:none;border-radius:12px;text-decoration:none;color:inherit;transition:background .3s,transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;margin-top:24px}
.gs:hover{background:rgba(var(--sc-tint-rgb),.08);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.gs-n{font-weight:700;letter-spacing:-.022em;font-size:36px;color:var(--ow);line-height:1}
.gs-s{display:flex;gap:2px;margin-bottom:3px;--star-on:#E8001E;--star-off:rgba(232,0,30,.28)}
.gs-l{font-size:12px;color:rgba(var(--sc-ow-rgb),.55);display:flex;align-items:center;gap:5px}
.gs-c{font-size:12px;color:rgba(var(--sc-ow-rgb),.55)}
.gs-ar{margin-left:auto;font-size:12px;color:rgba(var(--sc-ow-rgb),.5)}

/* === STERREN (tonen de echte score, bv. 4,6 → laatste ster deels gevuld) === */
.adl-stars{position:relative;display:inline-flex;line-height:0;vertical-align:middle}
.adl-stars-off{display:inline-flex;gap:1px;color:var(--star-off,rgba(232,0,30,.28))}
.adl-stars-on{position:absolute;top:0;left:0;display:inline-flex;gap:1px;overflow:hidden;white-space:nowrap;color:var(--star-on,#E8001E)}
.adl-stars svg{flex:none;display:block}
.ft-stars{--star-on:#E8001E;--star-off:rgba(232,0,30,.28)}

/* === FEATURE LIST === */
.fl{margin-top:24px;display:flex;flex-direction:column;gap:2px}
.fr{background:var(--dg);border-radius:4px;padding:18px 20px;transition:background .2s}
.fr:hover{background:#1e1e1e}
.fb_{flex:1}
.fn{font-weight:700;letter-spacing:-.022em;font-size:var(--fs-h4);color:var(--ow);line-height:1.3;margin-bottom:5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fd{font-size:var(--fs-body-sm);color:var(--c-body);line-height:1.55}
.fbg{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--red);border:none;color:#fff;padding:4px 10px;border-radius:3px;flex-shrink:0;white-space:nowrap}

/* === INFO TABLE === */
.it{margin-top:28px;display:flex;flex-direction:column;gap:2px}
.ir{display:flex;flex-direction:column;background:var(--dg);border-radius:4px;padding:18px 20px}
.ik{font-size:var(--fs-label-sm);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.ik::after{content:"";flex:1;height:1px;background:rgba(var(--sc-ow-rgb),.06)}
.iv{padding:0}
.ivm{font-weight:700;letter-spacing:-.022em;font-size:var(--fs-h4);color:var(--ow);line-height:1.25;margin-bottom:4px}
.ivs{font-size:var(--fs-body-sm);color:var(--c-body);line-height:1.5}
.cs.rd .ir{background:rgba(var(--sc-tint-rgb),.08)}
.cs.rd .ik{color:rgba(var(--sc-tint-rgb),.7)}
.cs.rd .ik::after{background:rgba(var(--sc-tint-rgb),.1)}
.cs.rd .ivm{color:#fff}
.cs.rd .ivs{color:rgba(var(--sc-tint-rgb),.5)}
.cs.lt .ir{background:rgba(12,12,12,.03)}
.cs.lt .ik{color:var(--red)}
.cs.lt .ik::after{background:rgba(12,12,12,.06)}
.cs.lt .ivm{color:var(--blk)}
.cs.lt .ivs{color:rgba(12,12,12,.5)}

/* === STATS GRID === */
.sg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(var(--sc-tint-rgb),.06);border:1px solid rgba(var(--sc-tint-rgb),.06);border-radius:4px;overflow:hidden;margin-top:24px}
.sc_{padding:28px 22px;background:var(--dg)}
.cs.dk .sc_{background:#1e1e1e}
.cs.rd .sc_{background:rgba(var(--sc-tint-rgb),.1)}
.sv{font-weight:700;letter-spacing:-.022em;font-size:32px;color:var(--ow);line-height:1;margin-bottom:6px}
.sv span{font-size:16px}
.cs.rd .sv{color:#fff}
.slb{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--sc-ow-rgb),.35)}
.cs.rd .slb{color:rgba(var(--sc-tint-rgb),.55)}

/* === STATS GRID LAYOUT (intro + stats side-by-side) === */
.sg-layout{display:flex;flex-direction:column;gap:28px}
.sg-intro .st{margin-bottom:16px}

/* === PHOTO GRID === */
.pg{display:grid;grid-template-columns:1fr;gap:8px;margin-top:28px}
.pg-item{border-radius:6px;overflow:hidden;position:relative}
.pg-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.pg-item:hover img{transform:scale(1.03)}
.pg-item:not(.pg-main){aspect-ratio:16/9}
.pg-main{aspect-ratio:16/10}
.pg-video-wrap{position:relative;width:100%;height:100%}
.pg-video-thumb{position:relative;width:100%;height:100%;cursor:pointer}
.pg-video-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pg-video-thumb:hover img{opacity:.85}
.pg-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:none;border:none;cursor:pointer;z-index:2;transition:transform .2s;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.pg-play:hover{transform:translate(-50%,-50%) scale(1.1)}
.pg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pg-cap{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);color:var(--ow);font-size:12px;font-weight:500;letter-spacing:.01em;line-height:1.4;padding:8px 12px;border-radius:4px;z-index:2;pointer-events:none}

/* === YOUTUBE VIDEO BLOCK === */
.yv{margin-top:28px}
.yv-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#000}
.yv-thumb{position:relative;width:100%;height:100%;cursor:pointer}
.yv-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .3s}
.yv-thumb:hover img{transform:scale(1.03);opacity:.8}
.yv-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45) 0%,transparent 50%);pointer-events:none;z-index:1}
.yv-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:none;border:none;cursor:pointer;z-index:2;transition:transform .25s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 4px 16px rgba(0,0,0,.5))}
.yv-play .yv-ring{transition:stroke .25s}
.yv-thumb:hover .yv-play{transform:translate(-50%,-50%) scale(1.1)}
.yv-thumb:hover .yv-ring{stroke:var(--red)}
.yv-cap{margin-top:12px;font-size:var(--fs-body-sm);color:var(--c-body);line-height:var(--lh-body);text-align:center}

/* === TICKETS === */
.tks{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.tk{display:flex;align-items:stretch;border:1px solid var(--br);border-radius:4px;overflow:hidden;text-decoration:none;color:inherit;background:var(--dg);transition:border-color .3s,background .3s,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;position:relative}
.tk:hover{border-color:rgba(232,0,30,.4);background:#1c1c1c;transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 0 1px rgba(232,0,30,.15)}
.tk.ft{border-color:var(--red)}
.tk.ft:hover{box-shadow:0 16px 40px rgba(232,0,30,.2),0 0 0 1px rgba(232,0,30,.4)}
.tka{width:4px;flex-shrink:0;background:transparent;transition:background .2s}
.tk.ft .tka,.tk:hover .tka{background:var(--red)}
.tkb{flex:1;padding:20px 18px;min-width:0}
.tkbg{display:inline-block;font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:rgba(var(--sc-tint-rgb),.07);color:var(--ow);padding:4px 10px;border-radius:4px;margin-bottom:8px}
.tkn{font-weight:700;letter-spacing:-.022em;font-size:var(--fs-h4);color:var(--ow);line-height:1;margin-bottom:6px}
.tki{font-size:var(--fs-body-sm);color:var(--c-body);line-height:1.55}
.tkdc{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--red);margin-top:8px;padding:3px 0;opacity:.85}
.tkp{padding:20px 18px 20px 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;flex-shrink:0}
.tkpo{font-size:16px;font-weight:500;color:rgba(var(--sc-ow-rgb),.35);text-decoration:line-through;line-height:1;margin-bottom:4px}
.tkpn{font-weight:700;letter-spacing:-.022em;font-size:34px;line-height:1;color:var(--ow)}
.tk.ft .tkpn{color:var(--red)}
.tk-img{width:72px;flex-shrink:0;background-size:cover;background-position:center;border-right:1px solid var(--br)}
.tk.has-img .tka{display:none}
.cs.lt .tk{background:#fff;border-color:rgba(12,12,12,.08)}
.cs.lt .tk.ft{border-color:var(--red)}
.cs.lt .tkn{color:var(--blk)}
.cs.lt .tki{color:rgba(12,12,12,.5)}
.cs.lt .tkpo{color:rgba(12,12,12,.3)}
.cs.lt .tkpn{color:var(--blk)}
.cs.lt .tk.ft .tkpn{color:var(--red)}
.cs.lt .tkdc{color:var(--red)}

/* === TICKET CTA === */
.tcta-wrap{padding:0 20px}
.tcta{display:flex;flex-direction:column;gap:16px;padding:24px 22px;background:rgba(var(--sc-tint-rgb),.04);border:1px solid rgba(var(--sc-tint-rgb),.08);border-radius:6px;text-decoration:none;transition:background .25s,border-color .25s}
.tcta:hover{background:rgba(var(--sc-tint-rgb),.07);border-color:rgba(232,0,30,.3)}
.tcta-left{display:flex;flex-direction:column;gap:6px}
.tcta-price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tcta-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--sc-ow-rgb),.45);font-weight:600}
.tcta-old{font-size:15px;color:rgba(var(--sc-ow-rgb),.3);text-decoration:line-through;font-weight:500}
.tcta-new{font-size:28px;font-weight:700;color:var(--ow);letter-spacing:-.02em;line-height:1}
.tcta-save{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);font-weight:700;background:rgba(232,0,30,.1);padding:3px 8px;border-radius:3px}
.tcta-sub{font-size:13px;color:rgba(var(--sc-ow-rgb),.45)}
.tcta-cta{display:flex;align-items:center;justify-content:center;background:var(--red);color:#fff;padding:14px 24px;border-radius:4px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:background .2s}
.tcta:hover .tcta-cta{background:#c4001a}

/* === FAQ === */
.fql{margin-top:24px;border:1px solid var(--br);border-radius:3px;overflow:hidden}
.fqi{border-bottom:1px solid var(--br)}
.fqi:last-child{border-bottom:none}
.fqq{width:100%;text-align:left;background:none;border:none;padding:16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:inherit;font-weight:700;letter-spacing:-.022em;font-size:var(--fs-h4);color:var(--ow);transition:color .2s;gap:12px}
.fqq:hover{color:var(--red)}
.fqq .ar{font-size:16px;color:var(--red);transition:transform .25s;flex-shrink:0}
.fqi.op .fqq .ar{transform:rotate(45deg)}
.fqa{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .3s ease;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-body);padding:0 16px}
.fqi.op .fqa{max-height:800px;padding:0 16px 18px}

/* === OTHER EXPERIENCES GRID === */
.oeg{display:grid;grid-template-columns:1fr;gap:12px;margin-top:28px}
.oec{border-radius:6px;overflow:hidden;position:relative;aspect-ratio:16/9;text-decoration:none;color:inherit;display:flex;flex-direction:column;justify-content:flex-end}
.oec img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.oec:hover img{transform:scale(1.06)}
.oeg_{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,12,12,0) 30%,rgba(12,12,12,.75) 100%);transition:opacity .4s}
.oec:hover .oeg_{opacity:.85}
.oeb{position:relative;z-index:2;padding:20px;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.oec:hover .oeb{transform:translateY(-4px)}
.oel{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);margin-bottom:6px;display:inline-flex;background:rgba(var(--sc-tint-rgb),.07);padding:5px 12px;border-radius:4px}
.oen{font-weight:700;letter-spacing:-.022em;font-size:var(--fs-h3);text-transform:uppercase;color:var(--ow);line-height:1.05;text-shadow:0 1px 10px rgba(0,0,0,.4)}

/* === STEP LIST === */
.stpl{margin-top:24px;display:flex;flex-direction:column;gap:2px}
.stpi{background:var(--dg);border-radius:4px;transition:background .2s}
.stpi:hover{background:#1e1e1e}
.stpb{padding:18px 20px}
.stpt{font-weight:700;letter-spacing:-.022em;font-size:var(--fs-h4);color:var(--ow);line-height:1.3;margin-bottom:5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stpd{font-size:var(--fs-body-sm);color:var(--c-body);line-height:1.55}
.stpbg{flex-shrink:0;display:flex;align-items:center;padding-right:16px}

/* === EXPERIENCE CARDS (Homepage) === */
.exp-g{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ec{border-radius:6px;overflow:hidden;position:relative;display:block;text-decoration:none;color:inherit;aspect-ratio:4/5}
.ec img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.ec:hover img{transform:scale(1.06)}
.ec-gr{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,12,12,0) 20%,rgba(12,12,12,.6) 70%,rgba(12,12,12,.9) 100%);transition:opacity .4s}
.ec:hover .ec-gr{opacity:.8}
.ec-ct{position:absolute;bottom:0;left:0;right:0;padding:16px;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.ec:hover .ec-ct{transform:translateY(-4px)}
.ec-lb{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);margin-bottom:5px}
.ec-ttl{font-weight:700;letter-spacing:-.022em;font-size:var(--fs-h3);text-transform:uppercase;color:var(--ow);line-height:1;text-shadow:0 1px 10px rgba(0,0,0,.4)}

/* === REVIEW TRACK === */
.rv-track{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -20px;padding:0 20px 12px}
.rv-track::-webkit-scrollbar{display:none}
.rv-tile{min-width:260px;max-width:260px;flex-shrink:0;border:none;border-radius:12px;padding:22px;background:rgba(var(--sc-tint-rgb),.05)}
.rv-stars{font-size:13px;margin-bottom:10px}
.rv-txt{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-body);margin-bottom:14px}
.rv-who{font-size:var(--fs-label-sm);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mg)}
.t-pill{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--br);border-radius:2px;padding:5px 10px;color:rgba(var(--sc-ow-rgb),.65)}

/* === FORM ELEMENTS === */
.form-input{width:100%;background:var(--blk);border:1px solid var(--br);border-radius:2px;padding:11px 13px;font-family:inherit;font-size:14px;color:var(--ow);outline:none;transition:border-color .2s}
.form-input:focus{border-color:rgba(232,0,30,.5)}
.form-input::placeholder{color:rgba(var(--sc-ow-rgb),.25)}
.form-lbl{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mg);display:block;margin-bottom:6px}
.form-row{margin-bottom:14px}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}

/* === EVENT CARDS === */
.ev-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:32px}
@media(min-width:768px){.ev-grid--2{grid-template-columns:1fr 1fr}.ev-grid--3{grid-template-columns:repeat(3,1fr)}.ev-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ev-grid--4{grid-template-columns:repeat(4,1fr)}}
.ev-card{border:1px solid var(--br);border-radius:3px;overflow:hidden;background:var(--dg);transition:border-color .2s}
.ev-card:hover{border-color:rgba(232,0,30,.4)}
.ev-img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block}
.ev-ph{width:100%;aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;font-size:48px}
.ev-body{padding:20px 18px}
.ev-tag{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);margin-bottom:8px;display:inline-flex;background:rgba(var(--sc-tint-rgb),.07);padding:5px 12px;border-radius:4px}
.ev-ttl{font-weight:700;letter-spacing:-.022em;font-size:var(--fs-h3);line-height:1;margin-bottom:8px}
.ev-dsc{font-size:var(--fs-body-sm);color:var(--c-body);line-height:var(--lh-body);margin-bottom:14px}
.ev-pills{display:flex;gap:6px;flex-wrap:wrap}
.ev-pill{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--br);border-radius:2px;padding:4px 9px;color:rgba(var(--sc-ow-rgb),.62)}

/* === EVENT CARDS CAROUSEL === */
.ev-carousel{margin-top:32px;position:relative}
.ev-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;cursor:grab}
.ev-track.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.ev-track::-webkit-scrollbar{display:none}
.ev-carousel .ev-card{min-width:280px;max-width:320px;flex-shrink:0;scroll-snap-align:start}
@media(min-width:768px){.ev-carousel .ev-card{min-width:300px;max-width:360px}}
.ev-nav{display:flex;align-items:center;gap:16px;margin-top:20px}
.ev-prev,.ev-next{width:40px;height:40px;border:1px solid rgba(var(--sc-tint-rgb),.15);border-radius:50%;background:rgba(var(--sc-tint-rgb),.05);backdrop-filter:blur(8px);color:var(--ow);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s;flex-shrink:0}
@media(hover:hover){.ev-prev:hover,.ev-next:hover{background:rgba(232,0,30,.15);border-color:var(--red)}}
.ev-progress{flex:1;height:2px;background:rgba(var(--sc-tint-rgb),.08);border-radius:1px;overflow:hidden}
.ev-progress-bar{height:100%;width:0;background:var(--red);border-radius:1px;transition:width .15s ease-out}

/* === FOOTER === */
.ft{display:block;background:var(--bg);border-top:none;padding:0;position:relative}
.ft-in{padding:48px 20px 32px}
.ft-top{display:flex;flex-direction:column;gap:16px;padding-bottom:32px}
.ft-top>div:first-child{background:rgba(255,255,255,.04);border-radius:12px;padding:28px 24px}
.ft-logo{height:36px;width:auto;display:block;margin-bottom:14px}
.ft-tag{font-size:14px;color:var(--c-body);line-height:1.65;max-width:280px;margin-bottom:20px}
.ft-sr{display:flex;gap:10px}
.ft-sb{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:rgba(242,240,237,.7);text-decoration:none;transition:color .3s,border-color .3s,background .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.ft-sb:hover{color:#fff;transform:translateY(-3px)}
.ft-sb.ig:hover{background:linear-gradient(135deg,#f09433,#dc2743,#bc1888);border-color:transparent}
.ft-sb.tt:hover{background:#010101;border-color:#333}
.ft-sb.fb:hover{background:#1877f2;border-color:#1877f2}
.ft-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ft-cols>div{background:rgba(255,255,255,.04);border-radius:12px;padding:22px 20px}
.ft-ct{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);margin-bottom:14px}
.ft-cl{display:flex;flex-direction:column;gap:10px}
.ft-cl a{font-size:var(--fs-footer-link);color:var(--c-footer-link);text-decoration:none;transition:color .25s}
.ft-cl a:hover{color:var(--ow)}
.ft-bot{padding:20px 20px;display:flex;flex-direction:column;gap:10px}
.ft-bl{font-size:var(--fs-footer-bottom);color:var(--c-footer-bottom);letter-spacing:.02em}
.ft-br{display:flex;gap:20px;flex-wrap:wrap}
.ft-br a{font-size:var(--fs-footer-bottom);color:var(--c-footer-bottom);text-decoration:none;transition:color .2s;letter-spacing:.02em}
.ft-br a:hover{color:var(--ow)}

/* === REVEAL ANIMATION === */
.rv{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.rv.in,.rv.ac{opacity:1;transform:none}

/* === UX UPGRADES === */
a.br:active,a.bg:active,.stk-btn:active,.tk:active,.ec:active{transform:scale(.96);transition:transform .1s ease}
p,.tki,.ivs,.fd,.sl-dsc,.ec-dsc,.ph-dsc{color:var(--c-body);line-height:var(--lh-body)}
h1,h2,h3,.hb,.tkpn,.stk-info strong{color:#fff}
.ivs a,.ivm a,.fd a,.tki a,.fqa a,.stpd a,.vc-dsc a,.ph-dsc a,.sl-dsc a,.ec-dsc a,p a{color:var(--ow);text-decoration:none;border-bottom:1px solid rgba(var(--sc-ow-rgb),.3);transition:border-color .2s}
@media(hover:hover){.ivs a:hover,.ivm a:hover,.fd a:hover,.tki a:hover,.fqa a:hover,.stpd a:hover,.vc-dsc a:hover,.ph-dsc a:hover,.sl-dsc a:hover,.ec-dsc a:hover,p a:hover{border-color:var(--ow)}}

/* === VENUE CARDS === */
.vc-grid{display:grid;grid-template-columns:1fr;gap:16px}
.vc{background:rgba(var(--sc-tint-rgb),.06);border:1px solid var(--br);border-radius:12px;overflow:hidden;color:inherit;display:block}
.vc-img-wrap{overflow:hidden;aspect-ratio:16/10}
.vc-img{width:100%;height:100%;object-fit:cover}
.vc-ct{padding:20px}
.vc-lb{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ow);margin-bottom:6px;display:inline-flex;background:rgba(var(--sc-tint-rgb),.07);padding:5px 12px;border-radius:4px}
.vc-nm{font-size:clamp(26px,6vw,38px);font-weight:700;letter-spacing:-.022em;margin-bottom:8px}
.vc-dsc{font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--c-body);margin-bottom:16px}
.vc-btn{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-btn);font-weight:700;letter-spacing:var(--ls-btn);text-transform:uppercase;color:#fff;text-decoration:none;background:rgba(var(--sc-tint-rgb),.08);border:1px solid var(--br);border-radius:6px;padding:10px 20px;transition:background .2s,border-color .2s}
@media(hover:hover){.vc-btn:hover{background:var(--red);border-color:var(--red)}}

/* === RESPONSIVE === */
@media(min-width:768px){
  .nav-eg{grid-template-columns:repeat(4,1fr)}
  .nec{aspect-ratio:1/1}
  .sg{grid-template-columns:repeat(4,1fr)}
  .sl-ct{bottom:8%;left:4%;max-width:600px}
  .dh{padding-left:4%;padding-bottom:8%}
  .dh-ct{max-width:600px}
  .cs{padding:48px 32px}
  .ph{padding-left:32px;padding-right:32px}
  .tcta-wrap{padding:0 32px}
  .tcta{flex-direction:row;align-items:center;justify-content:space-between;padding:22px 28px}
  .tcta-price-row{gap:12px}
  .tcta-new{font-size:32px}
  .tcta-cta{padding:14px 32px;white-space:nowrap}
  .exp-g{gap:14px}
  .vc-grid--2{grid-template-columns:1fr 1fr;gap:20px}
  .vc-grid--3{grid-template-columns:repeat(3,1fr);gap:20px}
  .vc-grid--4{grid-template-columns:repeat(2,1fr);gap:20px}
  .tks{gap:12px}
  .oeg{grid-template-columns:1fr 1fr 1fr;gap:14px}
  .oec{aspect-ratio:3/4}
  .oeb{padding:22px}
  .oen{font-size:clamp(20px,2.5vw,26px)}
  .pg{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
  .pg-main{grid-row:1/3;aspect-ratio:auto}
  .pg-item:not(.pg-main){aspect-ratio:4/3}
  .tcta-btn{width:auto;padding:18px 40px}
}

@media(min-width:1024px){
  :root{--sh:0px}
  /* Zwevende ticketknop midden onderin (i.p.v. de volle balk op mobiel) */
  /* Zwevende ticketknop op desktop staat UIT (te commercieel naast de knop in de header).
     Weer aanzetten? Haal onderstaande regel .stk{display:none} weg. */
  .stk{display:none}
  /* Centreren zonder transform — de JS gebruikt transform voor het in/uit schuiven */
  .stk{left:0;right:0;width:-moz-fit-content;width:fit-content;margin:0 auto;max-width:min(680px,92vw);
       padding:0;background:none;border-top:none;border-radius:999px;
       box-shadow:0 12px 40px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);bottom:24px}
  .stk-btn{border-radius:999px;padding:14px 16px 14px 28px;column-gap:18px}
  .stk-main{font-size:min(var(--stk-max,22px),3vw)}
  .stk-right{gap:14px}
  .stk-right .cta-price{font-size:16px}
  .stk-sub{font-size:11px}
  .stk-sub strong{font-size:13px}
  .hdr-tk{display:flex;align-items:center;gap:0}
  .hdr-tk{font-size:14px;height:40px;padding:0 20px}
  .sh-socials{display:flex}
  .sh-google{display:flex}
  .sh-chat{display:flex}
  .exp-g{grid-template-columns:repeat(4,1fr);gap:16px}
  .ec{aspect-ratio:3/4}
  .dh-gr{background:linear-gradient(to top right,rgba(12,12,12,.85) 0%,rgba(12,12,12,.55) 25%,rgba(12,12,12,.12) 55%,transparent 100%)}
  .sl-gr{background:linear-gradient(to top right,rgba(12,12,12,.8) 0%,rgba(12,12,12,.45) 25%,rgba(12,12,12,.1) 55%,transparent 100%)}
  .tk-img{width:100px}
  .vc-grid--4{grid-template-columns:repeat(4,1fr)}

  /* Desktop premium spacing & typography */
  .cs{padding:56px 48px}
  .ph{padding-left:48px;padding-right:48px}
  .tcta-wrap{padding:0 48px}
  .st{font-size:clamp(42px,4vw,56px);letter-spacing:-.04em;margin-bottom:24px}
  .sb{font-size:var(--fs-body);max-width:680px}
  .sl{font-size:var(--fs-label);margin-bottom:14px}

  /* Stats grid side-by-side on desktop */
  .sg-layout{flex-direction:row;align-items:flex-start;gap:48px}
  .sg-intro{flex:1;min-width:0}
  .sg-layout .sg{flex:0 0 280px;margin-top:0;grid-template-columns:1fr 1fr}
  .pg{gap:14px}
  .ph-ttl{font-size:clamp(52px,6vw,76px)}
  .dh-ttl{font-size:clamp(56px,6vw,90px)}
  .sl-ttl{font-size:clamp(56px,6vw,90px)}
  .tkn{font-size:var(--fs-h4)}
  .tkpn{font-size:38px}

  /* Related experiences desktop */
  .oeg{gap:18px}
  .oeb{padding:28px}
  .oel{font-size:11px}
  .oen{font-size:clamp(22px,2vw,28px)}
}

@media(min-width:1320px){
  .cs{padding-left:max(48px,calc((100vw - 1224px) / 2));padding-right:max(48px,calc((100vw - 1224px) / 2))}
  .ph{padding-left:max(48px,calc((100vw - 1224px) / 2));padding-right:max(48px,calc((100vw - 1224px) / 2))}
  .tcta-wrap{padding-left:max(48px,calc((100vw - 1224px) / 2));padding-right:max(48px,calc((100vw - 1224px) / 2))}
  .ft-in{padding-left:max(48px,calc((100vw - 1224px) / 2));padding-right:max(48px,calc((100vw - 1224px) / 2))}
  .ft-bot{padding-left:max(48px,calc((100vw - 1224px) / 2));padding-right:max(48px,calc((100vw - 1224px) / 2))}
}

@media(min-width:1440px){
  .cs{padding-top:60px;padding-bottom:60px}
  .st{font-size:clamp(48px,3.9vw,62px)}
}

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

/* === ANIMATIONS === */
.img-rv{opacity:0;transform:scale(1.04);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.img-rv.img-in{opacity:1;transform:scale(1)}

/* === MENU OPENT: onderdelen komen gefaseerd in beeld ===
   Bewust met transitions (niet animation): de zichtbare staat is de standaard, dus als de
   overgang om welke reden dan ook niet draait, staat het menu er gewoon. */
.nav .nav-tickets,
.nav .nav-el,
.nav .nav-eg .nec,
.nav .nav-ol > a,
.nav .nav-ol > .nav-dd,
.nav .nav-sub a,
.nav .nav-chat-btn,
.nav .nav-soc-r{opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.nav .nav-eg .nec{transform:translateY(20px) scale(.95)}

.nav.op .nav-tickets,
.nav.op .nav-el,
.nav.op .nav-eg .nec,
.nav.op .nav-ol > a,
.nav.op .nav-ol > .nav-dd,
.nav.op .nav-sub a,
.nav.op .nav-chat-btn,
.nav.op .nav-soc-r{opacity:1;transform:none}

/* Volgorde van binnenkomen */
.nav.op .nav-tickets{transition-delay:.06s}
.nav.op .nav-el{transition-delay:.10s}
.nav.op .nav-eg .nec:nth-child(1){transition-delay:.14s}
.nav.op .nav-eg .nec:nth-child(2){transition-delay:.20s}
.nav.op .nav-eg .nec:nth-child(3){transition-delay:.26s}
.nav.op .nav-eg .nec:nth-child(4){transition-delay:.32s}
.nav.op .nav-ol > *:nth-child(1){transition-delay:.14s}
.nav.op .nav-ol > *:nth-child(2){transition-delay:.19s}
.nav.op .nav-ol > *:nth-child(3){transition-delay:.24s}
.nav.op .nav-ol > *:nth-child(4){transition-delay:.29s}
.nav.op .nav-ol > *:nth-child(5){transition-delay:.34s}
.nav.op .nav-ol > *:nth-child(6){transition-delay:.39s}
.nav.op .nav-ol > *:nth-child(n+7){transition-delay:.44s}
.nav.op .nav-sub a:nth-child(1){transition-delay:.44s}
.nav.op .nav-sub a:nth-child(2){transition-delay:.48s}
.nav.op .nav-sub a:nth-child(3){transition-delay:.52s}
.nav.op .nav-sub a:nth-child(n+4){transition-delay:.56s}
.nav.op .nav-chat-btn{transition-delay:.60s}
.nav.op .nav-soc-r{transition-delay:.66s}

/* Minder beweging gewenst? Dan alles direct zichtbaar. */
@media(prefers-reduced-motion:reduce){
  .nav .nav-tickets,.nav .nav-el,.nav .nav-eg .nec,.nav .nav-ol > a,.nav .nav-ol > .nav-dd,
  .nav .nav-sub a,.nav .nav-chat-btn,.nav .nav-soc-r{opacity:1;transform:none;transition:none}
}

/* === DOORKLIK-PIJL OP TEGELS (home-ervaringen + 'nog meer te beleven') === */
.card-go{position:absolute;right:12px;top:12px;z-index:3;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;color:#fff;
  background:rgba(12,12,12,.42);border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  transition:background .3s ease,border-color .3s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.card-go .cta-arr{margin-left:0}
@media(hover:hover){
  .ec:hover .card-go,.oec:hover .card-go{background:var(--red);border-color:var(--red);transform:translateX(3px) scale(1.08)}
}
.ec:active .card-go,.oec:active .card-go{background:var(--red);border-color:var(--red)}
.nec{position:relative}
.nec .card-go{width:32px;height:32px;right:10px;top:10px}
@media(hover:hover){.nec:hover .card-go{background:var(--red);border-color:var(--red);transform:translateX(3px) scale(1.08)}}
@media(min-width:768px){
  .card-go{right:14px;top:14px;width:42px;height:42px}
}
.ec{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}
.ec:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,.35),0 0 0 1px rgba(232,0,30,.08)}
.oec{transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease}
.oec:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,.3)}

.br,.bg,.stk-btn,.hdr-tk{transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,background .2s ease}
@media(hover:hover){
  .br:hover,.stk-btn:hover,.hdr-tk:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(232,0,30,.25)}
  .bg:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(0,0,0,.2)}
}
.br:active,.bg:active,.stk-btn:active,.hdr-tk:active{transform:translateY(0) scale(.97);transition-duration:.08s}

.tk{transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s,box-shadow .35s}
.tk:hover{transform:translateY(-4px)}
.fqq .ar{transition:transform .28s cubic-bezier(.22,1,.36,1)}
.fr{transition:background .2s,transform .25s cubic-bezier(.22,1,.36,1)}
.fr:hover{transform:translateX(4px)}
.rv-tile{transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s}
.rv-tile:hover{transform:translateY(-3px);background:rgba(255,255,255,.08)}
.ev-card{transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .2s}
.ev-card:hover{transform:translateY(-3px)}

.ft-cl a{position:relative}
.ft-cl a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:currentColor;transition:width .3s cubic-bezier(.22,1,.36,1)}
.ft-cl a:hover::after{width:100%}

/* === AWWWARDS PREMIUM TOUCHES === */

/* First section without hero — add space for fixed header */
/* Eerste sectie van een pagina moet onder de vaste header beginnen.
   Geldt ook als de secties in <main> staan (contentpagina's zoals Contact/Pers/FAQ). */
body > .cs:first-of-type,
body > section.cs:first-of-type,
main > .cs:first-of-type,
main > section.cs:first-of-type{padding-top:calc(var(--nh) + 40px)}
@media(min-width:768px){
  body > .cs:first-of-type,body > section.cs:first-of-type,
  main > .cs:first-of-type,main > section.cs:first-of-type{padding-top:calc(var(--nh) + 52px)}
}
@media(min-width:1024px){
  body > .cs:first-of-type,body > section.cs:first-of-type,
  main > .cs:first-of-type,main > section.cs:first-of-type{padding-top:calc(var(--nh) + 64px)}
}

/* Section divider accent — thin red line between sections */
/* Geen scheiding tussen opeenvolgende secties: het rode streepje en de haarlijn erboven
   zijn eruit gehaald omdat de sectiekoppen zelf al genoeg structuur geven. */

/* Smooth cursor on interactive elements */
.ec,.oec,.nec,.tk,.rv-tile,.gs,.ev-card{cursor:pointer}

/* Premium body text rendering */
body{text-rendering:optimizeLegibility}

/* Subtle grain texture on dark sections */
.cs.dk::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0}
.cs.dk{position:relative}
.cs.dk>*{position:relative;z-index:1}

/* Page hero accent line animation */
.ph::before{height:0;animation:_accentLine .6s cubic-bezier(.22,1,.36,1) .2s forwards}
.dh-rl{height:0;animation:_accentLine .6s cubic-bezier(.22,1,.36,1) .2s forwards}
.sl-rl{height:0;animation:_accentLine .6s cubic-bezier(.22,1,.36,1) .2s forwards}
@keyframes _accentLine{from{height:0}to{height:100%}}

/* Stats grid hover */
.sc_{transition:background .3s}
.sc_:hover{background:#222}
.cs.dk .sc_:hover{background:#262626}

/* Feature list premium hover */
.fr{border-radius:2px}
.fr:hover{background:rgba(232,0,30,.03)}

/* Review tile quote styling */
.rv-txt{font-style:italic}

/* Footer desktop refinements */
@media(min-width:1024px){
  .ft-in{padding:64px 48px 48px}
  .ft-top{flex-direction:row;align-items:stretch;gap:16px;padding-bottom:40px}
  .ft-top>div:first-child{flex:0 0 280px}
  .ft-cols{flex:1;grid-template-columns:repeat(4,1fr);gap:16px}
  .ft-bot{flex-direction:row;justify-content:space-between;align-items:center;padding:24px 48px}
  .ft-logo{height:40px;margin-bottom:18px}
  .ft-tag{font-size:15px;max-width:300px}
  .ft-cl a{font-size:var(--fs-footer-link)}
  .ft-cl{gap:12px}
  .ft-sr{gap:12px}
  .ft-sb{width:44px;height:44px}
}
@media(min-width:1320px){
  .ft-in{padding-left:max(48px,calc((100vw - 1224px) / 2));padding-right:max(48px,calc((100vw - 1224px) / 2))}
}

/* === TOUCH: disable transform hovers to prevent double-tap === */
@media(hover:none){
  .pg-item:hover img,.nec:hover img,.ec:hover img,.oec:hover img{transform:none!important}
  .tk:hover,.ec:hover,.oec:hover,.ev-card:hover,.rv-tile:hover,.fr:hover,.gs:hover{transform:none!important}
  .br:hover,.bg:hover,.stk-btn:hover,.hdr-tk:hover,.sec-btn:hover,.tcta-cta:hover{transform:none!important}
  .pg-play:hover{transform:translate(-50%,-50%)!important}
  .nav-si:hover{transform:none!important}
  .pg-video-thumb:hover img{opacity:1!important}
  .nec:hover .nec-g,.oec:hover .oeg_{opacity:.7!important}
  .scrl:hover{opacity:.6!important}
}

/* =======================================================================
   HOME HERO — commercieel (niet fullscreen, ±65vh)
   ======================================================================= */
/* Mobiel: hero zo hoog dat hero + USP-strip samen het scherm vullen → iconen onderaan */
.hh{position:relative;min-height:calc(100svh - 158px);display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--blk)}
.hh-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hh-bg--desk{display:none}
.hh-bg--mob{display:block}
@media(min-width:768px){.hh-bg--desk{display:block}.hh-bg--mob{display:none}}
/* Verloop start eerder donker zodat de onderrand van de foto bedekt is */
.hh-gr{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,12,12,.35) 0%,rgba(12,12,12,.04) 22%,rgba(12,12,12,.4) 52%,rgba(12,12,12,.9) 85%,rgba(12,12,12,.96) 100%);z-index:1}
.hh-in{position:relative;z-index:2;width:100%;padding:calc(var(--nh) + 60px) 20px 18px;display:flex;flex-direction:column;gap:14px;max-width:640px}
.hh-eyebrow{font-family:'HelveticaNeue',Helvetica,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#fff}
.hh-ttl{font-weight:700;letter-spacing:-.028em;font-size:clamp(40px,11vw,76px);line-height:.92;text-transform:uppercase;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.hh-ttl em{font-style:normal;color:var(--red);display:block}
.hh-sub{font-family:'HelveticaNeue',Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(15px,1.7vw,18px);line-height:1.4;letter-spacing:-.01em;color:rgba(255,255,255,.92);max-width:480px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hh-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin-top:8px}
.hh-btn-pri,.hh-btn-sec{min-height:52px;box-sizing:border-box}
.hh-btn-pri{display:inline-flex;touch-action:manipulation;align-items:center;gap:9px;background:var(--red);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:17px;letter-spacing:-.01em;text-transform:uppercase;padding:15px 30px;border-radius:6px;text-decoration:none;transition:background .2s,transform .2s,box-shadow .25s;box-shadow:0 6px 20px rgba(232,0,30,.3)}

.hh-btn-pri:hover{background:var(--rd);transform:translateY(-2px);box-shadow:0 10px 28px rgba(232,0,30,.45)}
.hh-btn-sec{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:13px;letter-spacing:-.01em;text-transform:uppercase;padding:17px 22px;border-radius:6px;border:1px solid rgba(255,255,255,.3);text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.hh-btn-sec:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
/* Subtiele Google rating onder de CTA's — monochroom, premium */
/* === PRIJSREGEL IN DE HERO (alleen home) === */
.hh-price{margin:-2px 0 0;font-size:13px;font-weight:500;letter-spacing:.01em;
  color:rgba(255,255,255,.72);text-shadow:0 1px 6px rgba(0,0,0,.45)}
.hh-price strong{font-weight:700;color:#fff}
.hh-price .cur{font-size:.82em;vertical-align:.06em;margin:0 .03em}
@media(min-width:768px){.hh-price{font-size:14px}}
.hh-rating{display:inline-flex;align-items:center;gap:9px;margin-top:18px;text-decoration:none;width:fit-content;transition:opacity .2s}
.hh-rating:hover{opacity:.8}
.hh-rating-stars{display:inline-flex;gap:1px;--star-on:rgba(255,255,255,.95);--star-off:rgba(255,255,255,.3)}
.hh-rating-stars svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.hh-rating-score{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.01em;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.hh-rating-label{font-size:12px;font-weight:500;color:rgba(255,255,255,.65);letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.4)}
@media(min-width:768px){
  /* Vaste hoogte die NIET met de breedte verandert (geen breakpoint-sprongen).
     Schaalt alleen mee als het scherm écht laag wordt (84svh). */
  .hh{min-height:unset;height:min(660px,84svh)}
  .hh-in{padding:calc(var(--nh) + 60px) 5% 56px;gap:18px}
}
@media(min-width:1024px){
  /* Foto-positie komt nu uit het ACF-veld 'Positie desktop' — geen !important meer */
  .hh-gr{background:linear-gradient(to top right,rgba(12,12,12,.8) 0%,rgba(12,12,12,.4) 30%,rgba(12,12,12,.1) 60%,transparent 95%),linear-gradient(to bottom,transparent 50%,rgba(12,12,12,.6) 100%)}
  /* Tekst volgt exact dezelfde linkermarge als het logo in de header (5%) */
  .hh-in{width:100%;max-width:none;margin:0;padding-left:5%;padding-right:5%;padding-bottom:64px}
  .hh-ttl{font-size:clamp(56px,6.5vw,92px)}
  .hh-sub{max-width:520px}
}
/* Grote schermen: breedte gecapt zodat de rest van de site zichtbaar blijft.
   Hoogte blijft dezelfde min(660px,84svh) — dus GEEN sprong t.o.v. kleinere schermen. */
@media(min-width:1280px){
  html,body{background:var(--blk)}
  .hh{max-width:1560px;margin-left:auto;margin-right:auto}
  /* Tekst volgt de header-uitlijning (logo) op elke breedte. */
  .hh-in{max-width:none;margin:0;padding-left:min(max(5%,calc((100vw - 1320px) / 2)),120px);padding-right:min(max(5%,calc((100vw - 1320px) / 2)),120px);padding-bottom:48px}
  /* Titel-grootte NIET opnieuw zetten — erft clamp(56px,6.5vw,92px) van de 1024px-regel,
     die op grote schermen op het max van 92px blijft (geen sprong). */
  .hh-sub{max-width:560px}
}

/* =======================================================================
   USP STRIP — 3 scanbare USP's onder de hero
   ======================================================================= */
.usp{background:var(--dg);padding:18px 20px;border-bottom:1px solid var(--br)}
.usp-in{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1100px;margin:0 auto}
.usp-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:4px 4px}
.usp-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;flex-shrink:0}
.usp-ic svg{width:19px;height:19px}
.usp-tx{display:flex;flex-direction:column;gap:2px}
.usp-ttl{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ow);line-height:1.2;text-transform:uppercase}
.usp-sub{font-size:12px;color:rgba(242,240,237,.6);line-height:1.3}
@media(min-width:768px){
  .usp{padding:32px 5%}
  .usp-in{gap:24px}
  .usp-item{flex-direction:row;text-align:left;gap:14px;justify-content:center}
  .usp-ic{width:48px;height:48px}
  .usp-ic svg{width:24px;height:24px}
  .usp-ttl{font-size:16px}
  .usp-sub{font-size:13px}
}

/* =======================================================================
   HEADER BUTTONS — wit met zwarte tekst, hamburger wit blokje (zoals V2)
   ======================================================================= */
/* Chat + taal: witte pill, zwarte tekst/icoon */
.sh-chat,
.sh.sc .sh-chat,
.sh.scrolled .sh-chat{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(255,255,255,.5) !important;
  color:#0C0C0C !important;
}
.sh-chat svg{stroke:#0C0C0C}
.sh-chat:hover,
.sh.sc .sh-chat:hover{background:#fff !important;color:#000 !important}

.lang,
.sh.sc .lang,
.sh.scrolled .lang{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(255,255,255,.5) !important;
  color:#0C0C0C !important;
}
.lang:hover,
.sh.sc .lang:hover{background:#fff !important;color:#000 !important}
.lang .lang-flag{filter:none}

/* Hamburger: wit blokje met zwarte streepjes */
.hbtn,
.sh.sc .hbtn,
.sh.scrolled .hbtn{
  width:40px;height:40px;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(255,255,255,.5) !important;
  border-radius:8px;
  padding:11px 10px !important;
  gap:4px;
  align-items:stretch;
}
.hbtn span,
.sh.sc .hbtn span,
.sh.scrolled .hbtn span{
  width:100% !important;height:2px !important;margin:0 !important;
  background:#0C0C0C !important;
}

/* Tickets-knop blijft rood (primaire CTA) */

/* Anker-links stoppen precies onder de fixed header (geen overlap, geen USP-strip zichtbaar).
   Eén mechanisme — niet stapelen met scroll-margin. */
html{scroll-padding-top:12px}

/* =======================================================================
   MENU REDESIGN — rode tickets-knop, compacte tegels, 2-koloms desktop,
   duidelijk onderscheid hoofdmenu/submenu, past op iPhone-scherm
   ======================================================================= */
/* Menu-container: ruimte voor scroll, nette padding */
.nav{padding:calc(var(--nh) + 10px) 20px 16px;justify-content:flex-start;gap:0}

/* Grote rode TICKETS knop bovenaan (mobiel: ruimer boven + onder) */
.nav-tickets{display:flex;touch-action:manipulation;-webkit-tap-highlight-color:transparent;align-items:center;justify-content:space-between;gap:12px;background:var(--red);color:#fff;text-decoration:none;font-family:var(--font-heading);font-weight:700;font-size:17px;letter-spacing:-.01em;text-transform:uppercase;padding:18px 22px;border-radius:8px;margin:8px 0 22px;box-shadow:0 6px 20px rgba(232,0,30,.32);transition:background .2s,transform .2s,box-shadow .25s;flex-shrink:0}
.nav-tickets:hover{background:var(--rd);transform:translateY(-2px);box-shadow:0 10px 28px rgba(232,0,30,.42)}
.nav-tickets-main{display:inline-flex;align-items:center;gap:2px;line-height:1.1;font-size:var(--nav-tk,17px);flex:0 1 auto}
.nav-tickets-right{display:flex;align-items:center;gap:11px;margin-left:auto;flex:0 0 auto}
.nav-tickets-right .cta-price{font-size:14px;margin-left:0}
.nav-tickets-sub{font-size:12px;font-weight:600;letter-spacing:.01em;line-height:1.2;opacity:.88;text-align:left;
  white-space:normal;max-width:6.5em;flex:0 1 auto;min-width:0}
.nav-tickets-sub strong{display:block;font-size:12.5px;opacity:1;line-height:1.2}
.nav-tickets-arr{display:inline-flex;align-items:center;line-height:1;flex-shrink:0;margin-left:12px}

/* Kolommen-wrapper */
.nav-cols{display:flex;flex-direction:column;gap:0}
.nav-col{min-width:0}

/* Sectie-koppen (eyebrow) — duidelijk onderscheid */
.nav-el{font-family:'HelveticaNeue',Helvetica,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.nav-el--sub{margin-top:16px}

/* Compactere experience-tegels (passen op mobiel) */
.nav-eg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.nec{aspect-ratio:16/11}
.nec-t{font-size:9px;letter-spacing:.14em;margin-bottom:2px}
.nec-n{font-size:16px;line-height:1.05}

/* Hoofdmenu-links: compacter, geen scheidingslijntjes */
.nav-ol a,.nav-dd-toggle{font-size:20px;padding:9px 14px;border-bottom:none}

  /* === RUSTIG TEKSTMENU (mobiel) — geen tegels, alleen tekst met dunne scheidingslijnen === */
  .nav .nav-col--exp{display:none}
  .nav .nav-ol{gap:0;border-top:1px solid rgba(255,255,255,.12)}
  .nav .nav-ol > a,.nav .nav-ol .nav-dd-toggle{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    font-family:var(--font-heading);font-weight:700;font-size:22px;letter-spacing:-.02em;
    text-transform:none;color:var(--ow);text-decoration:none;background:none;border:none;
    padding:11.5px 2px;border-bottom:1px solid rgba(255,255,255,.12);cursor:pointer;text-align:left;line-height:1.15}
  .nav .nav-ol > a::before{display:none}
  .nav .nav-lbl{display:inline;min-width:0;color:inherit;font-size:inherit;position:static}
  .nav .nav-exp-sub{font-weight:500;color:var(--ow);opacity:.9}
  .nav .nav-ol > a:active,.nav .nav-ol .nav-dd-toggle:active{color:var(--red)}
  /* De vier ervaringen vormen één blok; 'Plan je Bezoek' en 'Groepen' staan daar los onder,
     iets kleiner en rustiger, zodat in één oogopslag duidelijk is wat de hoofditems zijn.
     Alleen op mobiel: op desktop staan de vier al apart als tegels in de linkerkolom. */
  @media(max-width:1023px){
    .nav .nav-ol > .nav-exp-link:nth-of-type(4){border-bottom:none}
    .nav .nav-ol > .nav-exp-link + a:not(.nav-exp-link),
    .nav .nav-ol > .nav-exp-link + .nav-dd{margin-top:26px;border-top:1px solid rgba(255,255,255,.12)}
    .nav .nav-ol > a:not(.nav-exp-link),
    .nav .nav-ol .nav-dd-toggle{font-size:18px;color:rgba(242,240,237,.82)}
  }
  /* Oude regel liet spans 6px opzij schuiven — trof alleen Skydeck (die heeft een label-span) */
  .nav .nav-ol a:hover .nav-lbl,.nav .nav-ol a:hover .nav-exp-sub{transform:none}
  @media(hover:hover){
    .nav .nav-ol > a:hover,.nav .nav-ol .nav-dd-toggle:hover{color:var(--red)}
    .nav .nav-ol > a:hover .nav-arr,.nav .nav-ol .nav-dd-toggle:hover .nav-dd-arr{
      border-color:var(--red);transform:rotate(-45deg) translate(2px,2px)}
  }
  /* Chevron rechts (dezelfde vorm voor gewone items en uitklapbare items) */
  .nav .nav-arr,.nav .nav-dd-arr{
    flex:none;width:7px;height:7px;margin:0 4px 0 12px;font-size:0;background:none;
    border-right:2px solid rgba(255,255,255,.45);border-bottom:2px solid rgba(255,255,255,.45);
    transform:rotate(-45deg);transition:transform .25s ease,border-color .2s ease}
  .nav .nav-dd.open .nav-dd-arr{transform:rotate(45deg) translate(-2px,-2px)}
  .nav .nav-ol > a:active .nav-arr{border-color:var(--red)}
  .nav .nav-ol .nav-dd-items{padding:0}
  .nav .nav-ol .nav-dd.open .nav-dd-items{padding:2px 0 8px}
  .nav .nav-ol .nav-dd-item{font-family:var(--font-heading);font-weight:500;font-size:17px;
    letter-spacing:-.01em;text-transform:none;color:rgba(242,240,237,.62);padding:9px 2px 9px 16px;border:none}
  .nav .nav-ol .nav-dd-item::before{content:'';display:none}
  .nav .nav-ol .nav-dd-item:active{color:var(--red);background:none}

  /* Submenu: kleiner en gedimd, onder het hoofdmenu */
  .nav .nav-sub{display:flex;flex-direction:column;gap:0;padding:12px 2px 0;margin:0;border-top:none}
  .nav .nav-sub a{font-family:var(--font-heading);font-size:14px;font-weight:500;letter-spacing:.01em;
    text-transform:none;color:rgba(242,240,237,.58);padding:6px 0;border:none;background:none}
  .nav .nav-sub a:active{color:var(--ow);background:none;border:none}

  /* Chatknop over de volle breedte, met notificatie-bolletje */
  .nav .nav-foot-row{display:block;margin-top:24px;padding-top:0;border-top:none}
  .nav .nav-chat-btn{position:relative;display:flex;align-items:center;gap:13px;width:100%;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:10px;
    padding:14px 18px;font-family:var(--font-heading);color:#fff;cursor:pointer;text-align:left;
    text-transform:none;letter-spacing:normal}
  .nav .nav-chat-btn:active{background:rgba(255,255,255,.13)}
  .nav .nav-chat-ic{flex:none;display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1)}
  .nav .nav-chat-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
  .nav .nav-chat-q{font-size:12.5px;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.62);line-height:1.25}
  .nav .nav-chat-cta{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:#fff;line-height:1.15}
  /* Notificatie-bolletje: rechtsboven, half over de rand */
  .nav .nav-chat-badge{position:absolute;top:-10px;right:-8px;
    display:inline-flex;align-items:center;justify-content:center;
    min-width:24px;height:24px;padding:0 6px;border-radius:12px;
    background:var(--red);color:#fff;font-size:12.5px;font-weight:700;line-height:1;
    box-shadow:0 2px 10px rgba(232,0,30,.5)}
  .nav .nav-soc-r{display:flex;gap:12px;justify-content:center;margin-top:14px}
.nav-dd{border-bottom:none}
.nav-dd.open .nav-dd-items{margin-bottom:2px}

/* Submenu (Meer) — MOBIEL: kleine pill-tags, met scheidingslijn + ruimte boven het hoofdmenu */
.nav-sub{display:flex;gap:6px;flex-wrap:wrap;padding:0;margin-bottom:14px}
.nav-sub a{font-size:11px;padding:7px 12px}
.nav-sub--spaced{margin-top:18px;padding-top:18px;border-top:1px solid var(--br)}

/* Chat-knop (mobiel: in de footer-rij met socials) */
.nav-chat-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--br);border-radius:8px;padding:11px 18px;font-family:var(--font-heading);font-weight:700;font-size:13px;letter-spacing:-.01em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s}
.nav-chat-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}

/* Chat-knop + socials samen op één regel (mobiel + desktop) */
.nav-si{width:40px;height:40px}
.nav-foot-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--br)}
.nav-soc-r{display:flex;gap:10px;align-items:center}

/* De desktop-tickets-knop (in rechterkolom) is op mobiel verborgen */
.nav-tickets--desk{display:none}

/* === DESKTOP: 2 echte kolommen via CSS Grid ===
   Links: tegels (.nav-col--exp). Rechts: tickets → menu → submenu → chat (.nav-col--right).
   Socials onderaan over de volle breedte. */
@media(min-width:768px){
  .nav{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    grid-auto-rows:min-content;
    column-gap:72px;row-gap:0;
    align-content:center;
    /* Achtergrond blijft fullscreen (inset:0 van basis-.nav); content gecentreerd op 1320px via padding */
    padding-top:calc(var(--nh) + 20px);
    padding-bottom:40px;
    padding-left:max(6%, calc((100vw - 1320px) / 2));
    padding-right:max(6%, calc((100vw - 1320px) / 2));
  }
  /* Mobiele tickets-knop bovenaan verbergen op desktop; de desk-versie tonen */
  .nav > .nav-tickets:not(.nav-tickets--desk){display:none}
  .nav-tickets--desk{display:flex}

  /* Linkerkolom — tegels */
  .nav-col--exp{grid-column:1;grid-row:1;align-self:start;min-width:0}
  /* Rechterkolom — tickets + menu + submenu + footer-rij (chat links, socials rechts) */
  .nav-col--right{grid-column:2;grid-row:1;display:flex;flex-direction:column;min-width:0;align-self:start;
    /* Beide kolommen starten bovenaan, dus ticketknop en tegels lijnen exact uit */
    padding-top:0}

  .nav-tickets--desk{margin:0 0 22px;font-size:18px}
  .nav-tickets--desk .nav-tickets-sub{font-size:12px}

  /* Desktop: tegels links weer zichtbaar; de 4 ervaringen staan daar, dus niet in de tekstlijst */
  .nav .nav-col--exp{display:block}
  .nav .nav-ol > a.nav-exp-link{display:none}
  .nav .nav-ol > a,.nav .nav-ol .nav-dd-toggle{font-size:20px;padding:9px 2px}
  .nav .nav-ol .nav-dd-item{font-size:16px;padding:7px 2px 7px 16px}
  .nav .nav-sub{padding-top:12px}
  .nav .nav-sub a{font-size:15px;padding:8px 0}
  .nav .nav-chat-btn{padding:15px 20px}
  .nav .nav-chat-q{font-size:13px}
  .nav .nav-chat-cta{font-size:18px}
  .nav .nav-soc-r{justify-content:flex-start;margin-top:18px}
  .nav-tickets--desk .nav-tickets-sub strong{font-size:13.5px}
  .nav-tickets--desk .cta-price{font-size:15px}
  .nav-eg{gap:12px;margin-bottom:0}
  .nec{aspect-ratio:4/3}
  .nec-b{padding:18px}
  .nec-t{font-size:10px;letter-spacing:.15em;margin-bottom:5px}
  .nec-n{font-size:clamp(18px,1.7vw,22px);line-height:1.05}
  /* Hoofdmenu-links links uitgelijnd met submenu (geen inspringen) */
  .nav-ol a,.nav-dd-toggle{font-size:20px;padding-left:2px;padding-right:2px}
  .nav-dd-item{padding-left:18px !important}

  /* Footer-rij in rechterkolom: chat-knop links, socials rechts uitgelijnd */
  .nav-foot-row{margin-top:28px;padding-top:0;border-top:none}
  .nav-chat-btn{font-size:15px;padding:15px 30px}
  .nav-chat-btn svg{width:20px;height:20px}

  /* Submenu op desktop: verticaal, witte tekst zoals hoofdmenu maar kleiner — zelfde linkermarge */
  .nav-sub{flex-direction:column;flex-wrap:nowrap;gap:0;margin:0}
  /* Subtiele scheiding tussen hoofdmenu en sublinks (label 'Meer' is weg) */
  .nav-sub--spaced{margin-top:16px;padding-top:16px;border-top:1px solid var(--br)}
  .nav-sub a{font-size:15px;font-weight:500;color:rgba(242,240,237,.58);border:none;border-radius:0;padding:8px 0;letter-spacing:.01em;text-transform:none;width:100%}
  .nav-sub a:hover{color:var(--ow);background:none}
}
@media(min-width:1024px){
  .nav{column-gap:72px}
  .nec-n{font-size:clamp(20px,1.7vw,25px)}
}

/* ============================================================
   A'DAM AI — de assistent in een eigen venster

   Het widget wordt met embed() in .adl-chat-mnt gezet, dus er is geen
   zwevende knop van henzelf. Op de telefoon komt het venster van onderen
   omhoog en pakt het bijna het hele scherm; op desktop staat het rechtsonder.
   ============================================================ */
/* Boven de vaste balken uit: header 300, menu 299, ticketknop 250.
   Alleen de skip-link (9999) hoort er nog overheen. */
.adl-chat{position:fixed;inset:0;z-index:900}
.adl-chat[hidden]{display:none}
body.adl-chat-open{overflow:hidden}

.adl-chat-bd{position:absolute;inset:0;background:rgba(0,0,0,.62);opacity:0;
  transition:opacity .4s cubic-bezier(.22,1,.36,1);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.adl-chat.is-op .adl-chat-bd{opacity:1}

.adl-chat-pnl{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;
  height:min(92dvh,780px);background:var(--dg);color:var(--ow);
  border-radius:16px 16px 0 0;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--br),0 -20px 60px rgba(0,0,0,.55);
  /* Komt van onderen omhoog — de beweging van een chat die opengaat. */
  transform:translateY(101%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.adl-chat.is-op .adl-chat-pnl{transform:none}

@media(min-width:760px){
  .adl-chat-pnl{inset:auto clamp(18px,3vw,32px) clamp(18px,3vw,32px) auto;
    width:min(410px,calc(100vw - 48px));height:min(80dvh,720px);border-radius:16px}
}
/* Op een laag scherm houdt 80dvh te weinig over: het widget zet zijn invoerveld
   onderaan en dat valt dan buiten beeld. Hier mag hij bijna alle hoogte pakken. */
@media(min-width:760px) and (max-height:850px){
  .adl-chat-pnl{inset:auto clamp(18px,3vw,32px) 16px auto;height:calc(100dvh - 72px)}
}

.adl-chat-hd{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px;border-bottom:1px solid var(--br)}
.adl-chat-ttl{display:flex;align-items:center;gap:9px;font-family:var(--font-heading);
  font-weight:700;font-size:17px;letter-spacing:-.022em;color:var(--ow)}
.adl-chat-ttl svg{flex:none;color:var(--red)}

.adl-chat-x{position:relative;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:9px;
  background:transparent;box-shadow:inset 0 0 0 1px var(--br);cursor:pointer;
  touch-action:manipulation;transition:background-color .25s ease,box-shadow .25s ease}
@media(hover:hover){.adl-chat-x:hover{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}}
.adl-chat-x span{position:absolute;left:50%;top:50%;width:14px;height:2px;margin-left:-7px;
  background:var(--ow);border-radius:2px}
.adl-chat-x span:first-child{transform:rotate(45deg)}
.adl-chat-x span:last-child{transform:rotate(-45deg)}

.adl-chat-mnt{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.adl-chat-mnt > *{flex:1 1 auto;min-height:0}
.adl-chat-wait{margin:auto;padding:24px;font-size:14px;color:rgba(242,240,237,.55)}
.adl-chat-mnt.is-klaar .adl-chat-wait{display:none}
.adl-chat-mnt.is-mislukt .adl-chat-wait::after{content:' — probeer het zo nog eens'}

@media(prefers-reduced-motion:reduce){
  .adl-chat-bd,.adl-chat-pnl{transition:none}
}

/* easyJet-actiepagina — één kolom met de knop meteen in beeld op mobiel,
   tekst links en de schommel rechts vanaf tablet. De kop is kleiner dan elders:
   de aangeleverde headline is twee volle zinnen. */
.page-easyjet .cs-content{padding-top:56px}
.page-easyjet .st.st-h1{font-size:clamp(30px,7.2vw,42px)}
.page-easyjet .sb p:first-child{color:var(--ow);font-weight:700}
.page-easyjet .hbtns a{flex:1 1 100%;justify-content:center;white-space:normal;text-align:center}
@media(max-width:767px){
  /* Tekst en knop eerst; de foto volgt eronder. */
  .page-easyjet .cs-col--txt{order:1}
  .page-easyjet .cs-col--img{order:2;margin:28px 0 0}
}

/* 404 — ruimte onder de vaste kop, en lucht voor de verwijzingen eronder. */
.e404{padding-top:calc(var(--nh) + 56px);padding-bottom:64px}
.e404-sep{margin-top:48px}
@media(min-width:768px){.e404{padding-top:calc(var(--nh) + 72px);padding-bottom:80px}}

/* === LICHT THEMA ==========================================================
   Alleen de secties tussen de hero en de footer klappen om. Kop, hero's,
   USP-strip, menu, ticketbalk en footer blijven donker: daar ligt tekst over
   foto's en het logo is wit — dat omkeren levert alleen maar gedoe op.

   De omschakeling gebeurt via de variabelen, niet per regel: binnen een lichte
   sectie krijgen --ow, --c-body, --br en de twee RGB-tripletjes hun tegenpool,
   waarna alles wat die variabelen gebruikt vanzelf meegaat.

   Secties die al een eigen kleur hebben blijven buiten schot: .rd is rood en
   .lt was al licht — die zou je twee keer omkeren.
========================================================================== */
[data-theme="light"] .cs:not(.rd):not(.lt){
  --ow:#0C0C0C;
  --c-body:rgba(12,12,12,.62);
  --br:rgba(12,12,12,.12);
  --dg:#FFFFFF;
  --mg:#6B6B6B;
  --sc-tint-rgb:12,12,12;
  --sc-ow-rgb:12,12,12;
  background:#F6F4F1;
  color:#0C0C0C;
}
/* Koppen en knoplabels staan globaal op wit; hier volgen ze de tekstkleur. */
[data-theme="light"] .cs:not(.rd):not(.lt) :is(h1,h2,h3,.hb,.tkpn,.sec-btn,.vc-btn,.chtc-ttl){color:var(--ow)}
/* Ook de 'donkere' sectie krijgt de zandtint: de pagina bestaat vrijwel volledig uit
   dk-secties, dus wit zou hier de hele site zijn. Het contrast komt van de kaarten
   binnenin, die via --dg wél wit worden. */
[data-theme="light"] .cs.dk:not(.rd):not(.lt){background:#F6F4F1}
[data-theme="light"] .cs:not(.rd):not(.lt) .form-input{background:#FFFFFF}
/* Kaarten met een foto houden hun donkere verloop — dat ligt over het beeld. */
[data-theme="light"] .cs:not(.rd):not(.lt) :is(.ec,.nec,.evc,.oec){color:#fff}
[data-theme="light"] .cs:not(.rd):not(.lt) :is(.ec,.nec,.evc,.oec) :is(.hb,h1,h2,h3){color:#fff}

/* Themaknop in de kop — zelfde witte pil als de chat- en taalknop ernaast.
   In het donkere thema staat er een zon (klik = naar licht), in het lichte een maan. */
.sh-thema{width:36px;height:36px;flex:0 0 36px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.5);color:#0C0C0C;cursor:pointer;
  padding:0;transition:background .2s,transform .2s}
.sh-thema:hover{background:#fff}
.sh-thema:active{transform:scale(.94)}
.sh-thema .ic-maan{display:none}
[data-theme="light"] .sh-thema .ic-zon{display:none}
[data-theme="light"] .sh-thema .ic-maan{display:block}
/* Vier vlakken staan op een vaste donkere kleur in plaats van een variabele, en gaan dus
   niet vanzelf mee. Ze zijn hier apart gezet in plaats van in de regels zelf, zodat het
   donkere thema exact blijft zoals het was. */
[data-theme="light"] .cs.dk:not(.rd):not(.lt) .sc_{background:#FFFFFF}
[data-theme="light"] .cs:not(.rd):not(.lt) .tk:hover{background:#FAF9F7}
[data-theme="light"] .cs:not(.rd):not(.lt) :is(.fr:hover,.stpi:hover){background:rgba(12,12,12,.04)}
/* Bovenaan is de kop doorzichtig, net als in het donkere thema; zodra je scrolt wordt
   het donker glas in plaats van licht, want daaronder ligt dan een lichte sectie.
   Blijft over: een pagina die zónder donkere hero begint (Plan je bezoek, de 404, de
   easyJet-pagina). Daar staat het witte logo bovenaan op zandkleur, dus dáár — en alleen
   zolang er niet gescrold is — keert het om. */
[data-theme="light"] .sh.sc,[data-theme="light"] .sh.scrolled{background:rgba(12,12,12,.85);border-bottom:1px solid rgba(255,255,255,.1)}
[data-theme="light"] body:not(:has(.hh,.ph,.dh,.hero)) .sh:not(.sc):not(.scrolled) .sh-logo img{filter:invert(1)}
/* Liever rood dan zwart. Het logo is één kleur met transparantie, dus het bestand dient
   als masker en de merkkleur komt eronder — exact --red, en maar één logobestand te
   onderhouden. Het masker moet op de omhullende link staan en niet op de <img> zelf:
   op de afbeelding zou het de wítte pixels doorlaten en zie je wit met een rode rand.
   Vandaar dat de afbeelding hier alleen nog de maat bepaalt. Browsers zonder
   mask-ondersteuning houden het zwarte logo van de regel hierboven. */
@supports ((-webkit-mask-image:url(images/image_01.png)) or (mask-image:url(images/image_01.png))){
  [data-theme="light"] body:not(:has(.hh,.ph,.dh,.hero)) .sh:not(.sc):not(.scrolled) .sh-logo{
    background-color:var(--red);
    -webkit-mask:url(images/image_01.png) no-repeat left center/contain;
    mask:url(images/image_01.png) no-repeat left center/contain;
  }
  [data-theme="light"] body:not(:has(.hh,.ph,.dh,.hero)) .sh:not(.sc):not(.scrolled) .sh-logo img{
    filter:none;
    visibility:hidden;
  }
}
/* Rood blijft in beide thema's rood, dus de tekst dáárop blijft wit. Zonder deze regel
   zet de omkering hierboven zwarte letters op een rode knop. De hover van .sec-btn is
   geen rood vlak maar rode tekst op een lichte waas — die houdt dus de rode letter. */
[data-theme="light"] .cs:not(.rd):not(.lt) :is(.br,.fbg,.tka,.tcta-cta,.chat-btn,.sc-chat,.chtc-btn,.chtc-btn--lg,.stk-btn,.vi-btn){color:#fff}
[data-theme="light"] .cs:not(.rd):not(.lt) :is(.br,.tcta-cta,.chtc-btn,.chtc-btn--lg,.chat-btn,.sc-chat,.vi-btn):hover{color:#fff}
[data-theme="light"] .cs:not(.rd):not(.lt) .vc-btn:hover{color:#fff}
[data-theme="light"] .cs:not(.rd):not(.lt) .sec-btn:hover{color:var(--red)}

/* Het balkje staat stil in het midden en faadt in en uit, met een doorschijnend kader
   erachter dat het wat prominenter maakt. Boven de vouw is dit de hele melding: daar staat
   de hero, die in beide thema's gelijk is, dus van de omslag zelf zie je daar niets.
   Kader en balkje nemen de kleur van het thema waar je naartoe gaat. Dat gaat via de klasse
   .naar-licht en niet via [data-theme]: de View Transition zet het thema pas in de volgende
   frame om, dus anders springt de melding zichtbaar van kleur. */
@keyframes adl-melding-fade{0%{opacity:0;transform:translate(-50%,-50%) translateZ(0) scale(.96)}
  13%{opacity:1;transform:translate(-50%,-50%) translateZ(0) scale(1)}
  74%{opacity:1;transform:translate(-50%,-50%) translateZ(0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) translateZ(0) scale(1)}}

.adl-kader{position:fixed;left:50%;top:50%;z-index:1201;pointer-events:none;
  transform:translate(-50%,-50%) translateZ(0);opacity:0;
  will-change:opacity;
  display:flex;align-items:center;justify-content:center;padding:34px 42px;border-radius:14px;
  background:rgba(12,12,12,.45);border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.adl-kader.aan{animation:adl-melding-fade 1.5s ease forwards}
.adl-kader.naar-licht{background:rgba(246,244,241,.55);border-color:rgba(12,12,12,.08)}

.adl-melding{display:flex;align-items:center;gap:11px;padding:15px 26px;border-radius:6px;
  background:#1C1C1C;color:#fff;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 40px rgba(0,0,0,.4);
  font-family:var(--font-heading);font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap}
.adl-melding svg{display:block;flex:0 0 auto}
.adl-kader.naar-licht .adl-melding{background:#FFFFFF;color:var(--blk);
  border-color:rgba(12,12,12,.1);box-shadow:0 14px 40px rgba(0,0,0,.16)}

@media(prefers-reduced-motion:reduce){
  .adl-kader.aan{animation:adl-melding-fade 1.3s ease forwards}
}

/* Openingstijden in de hero — zelfde ingetogen toon als de prijsregel ernaast. */
.hh-uren{font-size:13px;color:rgba(var(--sc-ow-rgb),.72);letter-spacing:.01em;margin-top:-2px}

/* Roulerende hero-foto's (alleen waar het repeaterveld gevuld is). De lagen liggen op
   elkaar en wisselen met een crossfade; de tekst en het verloop erboven blijven staan.
   Zonder de klasse hh--rouleert verandert er niets aan de bestaande hero. */
.hh-laag{position:absolute;inset:0;z-index:0}
.hh--rouleert .hh-laag{opacity:0;transition:opacity 1.2s ease-in-out}
.hh--rouleert .hh-laag.is-actief{opacity:1}
@media(prefers-reduced-motion:reduce){
  .hh--rouleert .hh-laag{transition:opacity .4s ease}
}

/* Praktische strook: openingstijden, adres, route. Zelfde kader als de chatstrook
   eronder (.chtc--full), zodat die twee samen de afsluiting van de pagina vormen. */
.vi{padding:10px 20px}
@media(min-width:768px){.vi{padding:12px 32px}}
@media(min-width:1024px){.vi{padding:14px 48px}}
@media(min-width:1320px){.vi{padding-left:max(48px,calc((100vw - 1224px) / 2));
  padding-right:max(48px,calc((100vw - 1224px) / 2))}}
.vi-in{display:flex;align-items:center;gap:clamp(28px,5vw,64px);
  background:rgba(var(--sc-tint-rgb),.06);border:1px solid var(--br);border-radius:16px;
  padding:24px 28px}
.vi-kol{display:flex;flex-direction:column;gap:2px}
.vi-lb{font-size:var(--fs-label-sm);font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--red)}
.vi-nm{font-size:var(--fs-h4);font-weight:700;letter-spacing:-.018em;line-height:1.2}
.vi-ds{font-size:var(--fs-body-sm);color:var(--c-body);line-height:1.4}
.vi-btn{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;
  background:var(--red);color:#fff;border-radius:6px;padding:14px 24px;text-decoration:none;
  font-weight:700;font-size:var(--fs-btn);letter-spacing:var(--ls-btn);text-transform:uppercase;
  transition:background .2s,transform .2s}
.vi-btn svg{flex:0 0 auto}
@media(hover:hover){.vi-btn:hover{background:var(--rd);transform:translateY(-2px)}}
@media(max-width:767px){
  .vi-in{flex-direction:column;align-items:flex-start;gap:20px;padding:22px 20px}
  .vi-btn{width:100%;justify-content:center;margin-left:0}
}