/* ============================================================
   PlayKinetix — nieuwe site. Huisstijl uit het oude thema:
   donker #151515, gradient magenta→oranje, Bebas Neue + Poppins.
   ============================================================ */
:root{
  --pk-bg:#151515;
  --pk-bg-2:#1d1d1d;
  --pk-bg-3:#242424;
  --pk-text:#ffffff;
  --pk-muted:#b9b9c2;
  --pk-magenta:#b500b5;
  --pk-magenta-2:#a414b5;
  --pk-orange:#fe4802;
  --pk-yellow:#ffd600;
  --pk-grad:linear-gradient(54deg,#a414b5 12%,#fe4802 84%);
  --pk-grad-soft:linear-gradient(54deg,rgba(164,20,181,.18),rgba(254,72,2,.18));
  --pk-maxw:1180px;
  --pk-radius:16px;
  --pk-shadow:0 18px 40px rgba(0,0,0,.35);
  --pk-head:"Bebas Neue",Impact,sans-serif;
  /* ---- Standaard bandje ("chip") ----------------------------------------
     Eén maatvoering voor álle bandjes: de kenmerken in de hero, het
     "1 jaar"-bandje, het bandje op de foto en het tijdbandje bij een stap.
     Platter, ronder of groter maken doe je hier — de rest volgt vanzelf. */
  --pk-chip-pad:5px 14px;
  --pk-chip-radius:11px;
  --pk-chip-font:.94rem;
  --pk-chip-gap:8px;
  --pk-chip-vulling:#0d0c11;
  --pk-chip-rand:linear-gradient(96deg,#a855f7 0%,#ff2fd6 48%,#fe4802 100%);
  --pk-body:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--pk-bg);color:var(--pk-text);
  font-family:var(--pk-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0 0 .4em;line-height:1.05}
p{margin:0 0 1em}
.pk-container{width:100%;max-width:var(--pk-maxw);margin:0 auto;padding:0 22px}
.pk-skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:10px 16px;z-index:200}
.pk-skip:focus{left:12px;top:12px;border-radius:8px}

/* ---------- Knoppen ---------- */
.pk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--pk-body);font-weight:600;font-size:1rem;
  padding:.85em 1.5em;border-radius:999px;cursor:pointer;border:2px solid transparent;
  transition:transform .12s ease,box-shadow .12s ease,background .2s,color .2s;
  white-space:nowrap;
}
.pk-btn:hover{transform:translateY(-2px)}
.pk-btn--cta{background:var(--pk-orange);color:#fff;box-shadow:0 8px 22px rgba(254,72,2,.38)}
.pk-btn--cta:hover{background:#ff5c1a;box-shadow:0 12px 30px rgba(254,72,2,.55)}
.pk-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.pk-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- Header / nav ---------- */
.pk-header{
  position:sticky;top:0;z-index:100;
  background:rgba(21,21,21,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* Geen eigen max-width meer: de balk volgt nu dezelfde containerbreedte als de
   pagina-inhoud, zodat het logo exact boven de tekst van de pagina uitlijnt.
   De verbreding naar 1340px was er alleen om de oranje knop erbij te passen. */
.pk-header__inner{display:flex;align-items:center;justify-content:space-between;min-height:54px;gap:14px}
.pk-logo{font-family:var(--pk-head);font-size:1.9rem;letter-spacing:.04em;line-height:1;display:inline-flex;align-items:center}
/* Logo meeschalen met de lagere balk, anders bepaalt het logo de hoogte. */
.pk-logo__img{height:38px;width:auto;display:block}
.pk-logo__play{color:#fff}
.pk-logo__kx{background:var(--pk-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pk-logo--footer{font-size:1.7rem;margin-bottom:.5rem}
.pk-nav{display:flex;align-items:center;gap:16px}
.pk-nav ul{display:flex;gap:clamp(6px,.7vw,13px);list-style:none;margin:0;padding:0;flex-wrap:nowrap;min-width:0}
.pk-nav a{white-space:nowrap;font-weight:700;font-size:clamp(.64rem,.72vw,.81rem);text-transform:uppercase;letter-spacing:.02em;color:#eff0f3;position:relative;padding:6px 0;transition:color .2s}
.pk-nav a:hover,.pk-nav a[aria-current="page"]{color:#fff}
.pk-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--pk-grad);border-radius:2px}
.pk-navtoggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.pk-navtoggle span{width:26px;height:3px;background:#fff;border-radius:3px;transition:.25s}
.pk-navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.pk-navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.pk-navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Promo-/aankondigingsbalken ---------- */
/* Zwarte topbalk: alleen de ticket-ticker, gecentreerd */
.pk-topbar{background:#0c0c0c;padding:8px 18px;text-align:center;border-bottom:1px solid rgba(255,255,255,.06)}
.pk-ticker{color:#fff;font-size:.86rem;font-weight:600}
.pk-ticker:hover{color:var(--pk-yellow)}
.pk-ticker__arrow{display:inline-block;transition:transform .2s}
.pk-ticker:hover .pk-ticker__arrow{transform:translateX(4px)}
/* Gekleurde balk: socials links (witte kadertjes) + gratis-parkeren gecentreerd */
.pk-parkbar{display:flex;align-items:center;justify-content:center;background:var(--pk-grad);color:#fff;padding:9px 18px}
.pk-parkbar__text{text-align:center;font-weight:700;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:560px){.pk-parkbar{padding:8px 14px}.pk-parkbar__text{font-size:.74rem;letter-spacing:.05em}}
/* Op de allersmalste toestellen wint de tekst het van het icoontje. */
@media (max-width:360px){.pk-hero__usps svg{display:none}.pk-hero__usps li{gap:0}}
.pk-marquee{overflow:hidden;background:var(--pk-grad);color:#fff;white-space:nowrap}
.pk-marquee__track{display:flex;width:max-content;padding:8px 0;animation:pk-marquee 38s linear infinite;will-change:transform}
.pk-marquee__group{display:flex;flex-shrink:0}
.pk-marquee__item{font-weight:700;font-size:.84rem;letter-spacing:.05em;text-transform:uppercase;padding:0 6px}
.pk-marquee__dot{opacity:.55;padding:0 12px}
@keyframes pk-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.pk-marquee__track{animation:none}}
.pk-marquee:hover .pk-marquee__track{animation-play-state:paused}

/* ---------- Hero ---------- */
.pk-hero{position:relative;overflow:hidden;background:
   radial-gradient(1100px 500px at 78% -10%,rgba(254,72,2,.28),transparent 60%),
   radial-gradient(900px 500px at 12% 8%,rgba(164,20,181,.30),transparent 60%),
   var(--pk-bg);
   padding:clamp(18px,3vw,36px) 0 clamp(14px,2.4vw,28px)}
.pk-hero__inner{max-width:820px;min-width:0}
/* Alleen zichtbaar op de telefoon; op desktop draagt de video het beeld. */
.pk-hero__foto{display:none}
.pk-hero__eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.8rem;font-weight:600;color:var(--pk-yellow);margin-bottom:.5rem}
.pk-hero__promo{display:inline-block;background:rgba(255,214,0,.14);border:1px solid rgba(255,214,0,.5);color:var(--pk-yellow);font-weight:600;font-size:.88rem;padding:5px 14px;border-radius:999px;margin:0 0 .55rem}
/* "1 jaar PlayKinetix" — omlijnd bandje boven de kop. */
/* ---------- Standaard bandje ----------
   Vier plekken, één maatvoering. De rand verschilt per bandje; de vorm, de
   hoogte en de letters komen allemaal uit de --pk-chip-* variabelen bovenaan. */
.pk-hero__badge,
.pk-hero__usps li,
.pk-kf__pill,
.pk-hwtl__tijd{
  display:inline-flex;align-items:center;gap:var(--pk-chip-gap);
  padding:var(--pk-chip-pad);border-radius:var(--pk-chip-radius);
  color:#fff;font-family:var(--pk-head);font-size:var(--pk-chip-font);
  letter-spacing:.05em;text-transform:uppercase;line-height:1.15;
}
/* Verlopende rand: vulling op padding-box, verloop op border-box. */
.pk-hero__usps li,
.pk-kf__pill,
.pk-hwtl__tijd{
  border:2px solid transparent;
  background:linear-gradient(var(--pk-chip-vulling),var(--pk-chip-vulling)) padding-box,
             var(--pk-chip-rand) border-box;
}
.pk-hero__badge svg,.pk-hero__usps svg,.pk-hwtl__tijd svg{flex:0 0 auto;width:17px;height:17px}

/* Het "1 jaar"-bandje houdt zijn eigen oranje rand. */
.pk-hero__badge{margin:0 0 .7rem;border:2px solid var(--pk-orange);
  background:var(--pk-chip-vulling);letter-spacing:.09em}
.pk-hero__badge svg{color:var(--pk-yellow)}

/* Op de telefoon bepaalt de schermbreedte de maat (12,8vw ≈ 48 px op een
   375-scherm); op groot scherm zet de bovengrens van 4rem hem stil. */
.pk-hero__title{font-family:var(--pk-head);font-size:clamp(2.6rem,12.8vw,4rem);letter-spacing:.01em;
  text-transform:uppercase;line-height:.98;margin:0 0 .5rem}
/* Slotregel in het huisstijlverloop magenta → oranje, en bewust groter dan de
   regel erboven zodat hij ook langer uitvalt dan "11 gamekamers.". */
.pk-hero__accent{display:inline-block;font-size:1.28em;
  background:linear-gradient(92deg,#c026d3 0%,#ff2fd6 28%,#fe4802 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pk-hero__sub{font-size:clamp(.98rem,1.7vw,1.12rem);line-height:1.5;color:var(--pk-muted);max-width:560px;margin:0 0 1rem}

/* Drie kenmerken als omlijnde bandjes. */
.pk-hero__usps{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 1.1rem;padding:0}
/* Rand met kleurverloop paars → oranje. Twee achtergronden: de vulling op
   padding-box, het verloop op border-box — anders kun je een gradient niet als
   rand gebruiken en volgt hij ook de ronde hoeken niet. */
/* Afgeronde rechthoek, géén capsule — dat is de vorm uit het ontwerp. */
/* Vorm, hoogte en letters komen uit de standaard hierboven. */
.pk-hero__usps svg{color:#fff}
/* "Vanaf €23 p.p." is de kortste tekst en houdt ruimte over binnen het bandje.
   Alleen die tekst groter; het bandje zelf blijft even breed omdat de drie
   kolommen op gelijke breedte staan. */
/* Alleen op de homepage: "Vanaf €23 p.p." is de kortste tekst en houdt ruimte
   over, dus die mag groter. Op andere pagina's blijven de drie gelijk. */
.pk-hero--video .pk-hero__usps li:first-child{font-size:1.16rem}

/* line-height:1.05 is hier belangrijk: zonder die regel erft de knop de
   regelafstand van de body (1.65) en wordt hij een stuk hoger dan nodig. */
.pk-hero__knop{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:14px 30px;line-height:1.05;border-radius:12px;color:#fff;background:var(--pk-orange);
  font-family:var(--pk-head);font-size:clamp(1.05rem,1.6vw,1.28rem);letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 12px 30px -10px var(--pk-orange);transition:transform .2s ease,box-shadow .2s ease}
.pk-hero__knop:hover{transform:translateY(-2px);box-shadow:0 18px 38px -8px var(--pk-orange)}
.pk-hero__gerust{display:flex;align-items:center;gap:9px;margin:.85rem 0 0;color:var(--pk-muted);font-size:.92rem}
.pk-hero__gerust svg{width:17px;height:17px;color:#c084fc;flex:0 0 auto}
.pk-hero__link{display:inline-block;margin-top:.6rem;color:#c084fc;text-decoration:underline;
  font-family:var(--pk-head);font-size:1rem;letter-spacing:.07em;text-transform:uppercase}
.pk-hero__link:hover{color:#fff}
.pk-hero--foto{background:
   linear-gradient(90deg,rgba(21,21,21,.92) 0%,rgba(21,21,21,.72) 45%,rgba(21,21,21,.5) 100%),
   var(--hero-img,none) center/cover no-repeat,var(--pk-bg)}
/* Hero met achtergrondvideo (autoplay/muted/loop) + leesbaarheids-overlay */
/* Sfeerbeeld in de hero. Was tot 22 aug een autoplay-video (3,6 MB); dat is nu
   het stilstaande beeld dat de video als poster gebruikte — zelfde uitsnede,
   45 KB in plaats van 3,6 MB. De ::after hieronder legt er het donkere waas
   overheen zodat de witte tekst leesbaar blijft, precies als voorheen. */
.pk-hero--video{min-height:min(40vh,340px);
   background-image:url(../video/hero-poster.jpg);
   background-image:image-set(url(../video/hero-poster.webp) type("image/webp"),
                              url(../video/hero-poster.jpg)  type("image/jpeg"));
   background-position:center;background-size:cover;background-repeat:no-repeat}
.pk-hero--video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
   linear-gradient(180deg,rgba(21,21,21,.45) 0%,rgba(21,21,21,.38) 42%,rgba(21,21,21,.72) 100%),
   linear-gradient(90deg,rgba(21,21,21,.55) 0%,rgba(21,21,21,.15) 60%,rgba(21,21,21,0) 100%)}
.pk-hero--video>.pk-container{position:relative;z-index:2}
/* Feestelijke split-hero met de 1-jaar-trofee */
.pk-hero__grid{display:grid;grid-template-columns:1.18fr .82fr;align-items:center;gap:24px}
.pk-hero__viz{position:relative;display:grid;place-items:center;align-self:center}
.pk-warp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150%;height:150%;z-index:0;pointer-events:none;
   -webkit-mask:radial-gradient(ellipse closest-side at 50% 50%,#000 46%,transparent 98%);
           mask:radial-gradient(ellipse closest-side at 50% 50%,#000 46%,transparent 98%)}
.pk-hero__glow{position:absolute;width:56%;aspect-ratio:1;border-radius:50%;z-index:1;filter:blur(30px);
   background:radial-gradient(circle,rgba(254,72,2,.5),rgba(180,20,181,.3) 50%,transparent 72%);
   animation:pk-glow 4s ease-in-out infinite}
@keyframes pk-glow{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.08);opacity:1}}
/* Grote hero op een contentpagina: dezelfde opmaak als de homepage, maar met de
   paginafoto als achtergrond in plaats van de video. */
.pk-hero--paginagroot{background-image:var(--hero-foto);background-size:cover;background-position:center 40%;
  background-repeat:no-repeat;position:relative;isolation:isolate}
.pk-hero--paginagroot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,21,21,.5) 0%,rgba(21,21,21,.42) 45%,rgba(21,21,21,.8) 100%),
             linear-gradient(90deg,rgba(21,21,21,.6) 0%,rgba(21,21,21,.15) 62%,rgba(21,21,21,0) 100%)}
.pk-hero--paginagroot .pk-hero__viz{min-height:220px}

@media (max-width:820px){
  .pk-hero__grid{grid-template-columns:1fr}
  /* Op de telefoon draagt de fotoband het beeld; de sectie-achtergrond eronder
     zou er dan dubbel doorheen schijnen. */
  .pk-hero--paginagroot{background-image:none}
  .pk-hero--paginagroot::after{display:none}
  .pk-hero--paginagroot .pk-hero__foto{background-image:var(--hero-foto)}
  /* De sfeerkolom is puur decoratief; op een telefoon zou hij een half scherm
     opsnoepen vóór de kop. Daar telt de boodschap, niet de gloed. */
  .pk-hero__viz{display:none}
  /* Telefoon: de foto is een eigen band bóven de tekst, niet een achtergrond
     eronder. De video gaat uit en het donkere waas over de hero ook — dat waas
     is er voor leesbaarheid van tekst óver beeld, en die staat hier los. */
  .pk-hero{padding-top:0}
  /* Op de telefoon draagt .pk-hero__foto het beeld; het sfeerbeeld eronder zou
     er dan dubbel doorheen schijnen, net als het donkere waas. Allebei uit. */
  .pk-hero--video{background-image:none}
  .pk-hero--video::after{display:none}
  /* De foto loopt door áchter het bandje, de eyebrow en de eerste kopregels —
     zoals in het ontwerp. Vandaar een hogere band (aspect .9) plus een flinke
     negatieve ondermarge die de tekst eroverheen trekt. */
  /* Vaste verhouding: een flinke foto die op elk toestel hetzelfde oogt. De
     boek-knop valt op kleinere schermen net onder de rand — bewuste keuze van
     Michel, mensen scrollen toch. */
  .pk-hero__foto{
    display:block;position:relative;width:100%;aspect-ratio:.8;margin-bottom:-224px;
    background-image:url(../img/foto/hero-vloer-940.jpg);
    background-image:image-set(url(../img/foto/hero-vloer-940.webp) type("image/webp"),
                               url(../img/foto/hero-vloer-940.jpg)  type("image/jpeg"));
    /* Uitsnede lager gelegd zodat er een extra rij vloertegels in beeld komt —
       na de oranje tegel hoort de paarse rij eronder ook zichtbaar te zijn.
       47% snijdt er bovendien nog eens ~5% van de foto vanaf aan de bovenkant
       (minder plafond), en schuift dus ook de vloer verder in beeld. */
    background-position:center 47%;background-size:cover;background-repeat:no-repeat}
  /* Lange uitloop naar de paginakleur: geen harde naad, én donker genoeg waar de
     witte tekst overheen valt. */
  .pk-hero__foto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;
    background:linear-gradient(180deg,rgba(21,21,21,0) 0%,rgba(21,21,21,.4) 38%,
                               rgba(21,21,21,.88) 76%,var(--pk-bg) 100%)}
  .pk-hero__inner{position:relative;z-index:2}
  .pk-hero__knop{width:100%}
  /* Drie gelijke kolommen in plaats van laten omvallen: in het ontwerp staan de
     bandjes naast elkaar op één regel. De tekst schaalt mee met de schermbreedte
     zodat "Gratis parkeren" ook op een smalle telefoon op één regel past. */
  /* Niet drie gelijke kolommen maar elk bandje zo breed als zijn eigen tekst,
     zoals in het ontwerp. Nowrap houdt ze op één rij; de tekstmaat is zo gekozen
     dat de drie samen op een 375-scherm binnen de kolom blijven. */
  .pk-hero__usps{display:flex;flex-wrap:wrap;gap:6px}
  /* flex:1 1 auto → de bandjes groeien vanaf hun eigen tekstbreedte tot de rij
     precies zo breed is als de knop eronder. Ze houden dus hun onderlinge
     verhouding, maar de rij sluit links en rechts aan op "Boek je speeltijd". */
  .pk-hero__usps li{flex:1 1 auto;max-width:100%;justify-content:center;gap:6px;padding:5px 8px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:11px;line-height:1.15;
    font-size:clamp(.62rem,3.07vw,.9rem);letter-spacing:.02em}
  .pk-hero--video .pk-hero__usps li:first-child{font-size:clamp(.72rem,3.47vw,1.16rem)}
  .pk-hero__usps svg{width:16px;height:16px}
  .pk-hero__gerust,.pk-hero__link{justify-content:center;text-align:center;width:100%}
  .pk-hero__link{text-align:center}
}
@media (prefers-reduced-motion:reduce){.pk-hero__glow{animation:none}}

/* ---------- Secties ---------- */
.pk-section{padding:clamp(48px,7vw,86px) 0}
.pk-section--alt{background:var(--pk-bg-2)}
.pk-section__title{font-family:var(--pk-head);font-size:clamp(2rem,4.5vw,3rem);text-transform:uppercase;letter-spacing:.02em}
.pk-section__lead{color:var(--pk-muted);max-width:640px;margin-bottom:2rem}
.pk-section__title--center{text-align:center;font-size:clamp(2.5rem,5.6vw,4.3rem)}
.pk-section__lead--center{max-width:640px;margin:0 auto;text-align:center}
.pk-section__lead strong{color:#fff;font-weight:600}
.pk-divider{display:block;width:96px;height:5px;margin:16px auto 36px;border-radius:3px;background:linear-gradient(90deg,#8b17c9,#ff1e3c)}
/* Sier-elementen (originele graphics: neon-pijlen links, stippenwand rechts) */
.pk-neonsec{position:relative;overflow:hidden;background:#0d0d10}
.pk-section.pk-neonsec{padding:clamp(36px,5vw,64px) 0}
.pk-neonsec>.pk-container{position:relative;z-index:1}
.pk-deco{position:absolute;pointer-events:none;z-index:0;height:auto;display:block}
.pk-deco--chev{top:0;left:0;width:clamp(140px,14vw,265px)}
.pk-deco--dots{top:0;right:0;width:clamp(150px,16vw,300px)}
.pk-deco--chev.pk-deco--b,.pk-deco--dots.pk-deco--b{top:50%;transform:translateY(-50%)}

/* ---------- Sectie-achtergronden ----------
   Elke sectie op de homepage heeft een EIGEN achtergrond; geen enkele komt twee
   keer voor en er wordt nooit getegeld (no-repeat). Op desktop staat de plaat op
   ware breedte bovenaan, zodat de neon aan de linker- en rechterrand echt in
   beeld valt; is de sectie hoger dan de plaat, dan loopt hij uit in de basiskleur.
   Op mobiel is de plaat te smal voor die truc, daar vult 'cover' het vlak. */
/* overflow:clip knipt net als hidden af, maar breekt geen position:sticky —
   de party-builders hebben een plakkende prijsbalk die anders stil zou vallen. */
.pk-bgsec{position:relative;overflow:hidden;overflow:clip;background:#0d0d10;isolation:isolate}
/* De plaat is 2:1, dus bij een lange sectie (denk aan de party-builder van
   3000+ px) vult hij alleen de bovenkant en is de rest kaal zwart — dan lijken
   alle secties op elkaar. Daarom ligt er onder de plaat een kleurwas in de
   tint van diezelfde plaat, over de volle hoogte. Kort of lang: elke sectie
   houdt zo zijn eigen kleur. */
.pk-bgsec::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--pk-secbg), var(--pk-secwas,none);
  background-repeat:no-repeat, no-repeat;
  background-position:center top, center center;
  background-size:100% auto, 100% 100%;
  opacity:.85;
}
/* Boven- en onderrand laten vervloeien, anders zie je een harde naad tussen
   twee secties met verschillende platen. */
.pk-bgsec::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#0d0d10 0,rgba(13,13,16,0) 14%,rgba(13,13,16,0) 82%,#0d0d10 100%);
}
.pk-bg1{--pk-secbg:url(../img/bg/bg-paars-1-1600.webp);--pk-secwas:radial-gradient(120% 78% at 50% 34%, rgba(168,85,247,.13), rgba(13,13,16,0) 72%)}
.pk-bg2{--pk-secbg:url(../img/bg/bg-blauw-1-1600.webp);--pk-secwas:radial-gradient(120% 78% at 50% 34%, rgba(79,125,255,.13), rgba(13,13,16,0) 72%)}
.pk-bg3{--pk-secbg:url(../img/bg/bg-oranje-1-1600.webp);--pk-secwas:radial-gradient(120% 78% at 50% 34%, rgba(254,72,2,.13), rgba(13,13,16,0) 72%)}
.pk-bg4{--pk-secbg:url(../img/bg/bg-paars-2-1600.webp);--pk-secwas:radial-gradient(120% 78% at 50% 34%, rgba(181,0,181,.13), rgba(13,13,16,0) 72%)}
.pk-bg5{--pk-secbg:url(../img/bg/bg-groen-1-1600.webp);--pk-secwas:radial-gradient(120% 78% at 50% 34%, rgba(82,226,82,.13), rgba(13,13,16,0) 72%)}
.pk-bg6{--pk-secbg:url(../img/bg/bg-paars-3-1600.webp);--pk-secwas:radial-gradient(120% 78% at 50% 34%, rgba(155,70,255,.13), rgba(13,13,16,0) 72%)}
.pk-bg7{--pk-secbg:url(../img/bg/bg-oranje-2-1600.webp);--pk-secwas:radial-gradient(120% 78% at 50% 34%, rgba(254,106,2,.13), rgba(13,13,16,0) 72%)}
.pk-bg8{--pk-secbg:url(../img/bg/bg-groen-2-1600.webp);--pk-secwas:radial-gradient(120% 78% at 50% 34%, rgba(34,211,238,.13), rgba(13,13,16,0) 72%)}
@media (max-width:900px){
  .pk-bgsec::before{background-size:cover;background-position:center center}
  .pk-bg1{--pk-secbg:url(../img/bg/bg-paars-1-900.webp)}
  .pk-bg2{--pk-secbg:url(../img/bg/bg-blauw-1-900.webp)}
  .pk-bg3{--pk-secbg:url(../img/bg/bg-oranje-1-900.webp)}
  .pk-bg4{--pk-secbg:url(../img/bg/bg-paars-2-900.webp)}
  .pk-bg5{--pk-secbg:url(../img/bg/bg-groen-1-900.webp)}
  .pk-bg6{--pk-secbg:url(../img/bg/bg-paars-3-900.webp)}
  .pk-bg7{--pk-secbg:url(../img/bg/bg-oranje-2-900.webp)}
  .pk-bg8{--pk-secbg:url(../img/bg/bg-groen-2-900.webp)}
}
@media (max-width:980px){
  .pk-deco--chev{top:clamp(64px,18vw,125px);width:clamp(58px,15vw,150px)}
  .pk-deco--dots{top:clamp(58px,17vw,118px);width:clamp(66px,17vw,170px)}
  .pk-section__title--center{font-size:clamp(1.55rem,6.6vw,2.8rem)}
  .pk-section__lead--center{font-size:clamp(.72rem,2.7vw,1rem)}
  .pk-divider{width:clamp(56px,15vw,96px);height:4px;margin:10px auto 22px}
}

/* ---------- Kies jouw avontuur — kader met kleurverloop ----------
   Zelfde truc als bij de bandjes in de hero: vulling op padding-box, verloop op
   border-box. Zo volgt de gradient netjes de ronde hoeken. */
.pk-avontuur{border:2px solid transparent;border-radius:26px;
  padding:clamp(20px,3.4vw,42px) clamp(14px,2.4vw,32px);
  background:linear-gradient(#0d0d10,#0d0d10) padding-box,
             linear-gradient(96deg,#a855f7 0%,#ff2fd6 46%,#fe4802 100%) border-box}
@media (max-width:640px){.pk-avontuur{border-radius:20px;padding:20px 12px}}

/* ---------- Doelgroep-cards ---------- */
.pk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.pk-card{
  background:var(--pk-bg-3);border:1px solid rgba(255,255,255,.06);border-radius:var(--pk-radius);
  padding:26px 24px;display:flex;flex-direction:column;gap:8px;
  transition:transform .16s,border-color .16s,box-shadow .16s;position:relative;overflow:hidden;
}
.pk-card::before{content:"";position:absolute;inset:0;background:var(--pk-grad-soft);opacity:0;transition:opacity .2s}
.pk-card:hover{transform:translateY(-4px);border-color:rgba(254,72,2,.5);box-shadow:var(--pk-shadow)}
.pk-card:hover::before{opacity:1}
.pk-card>*{position:relative}
.pk-card__ico{font-size:2rem}
.pk-card__title{font-family:var(--pk-head);font-size:1.5rem;letter-spacing:.02em;text-transform:uppercase}
.pk-card__text{color:var(--pk-muted);font-size:.96rem}
.pk-card__more{margin-top:auto;font-weight:600;color:var(--pk-yellow);font-size:.92rem}

/* ---------- Mijlpalen-tijdlijn (1 jaar) ---------- */
.pk-mp{background:#0d0d10;padding:clamp(36px,5vw,64px) 0}
.pk-mp__kop{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 36px;font-family:var(--pk-head);font-size:clamp(1.25rem,2.7vw,1.9rem);letter-spacing:.03em;text-transform:uppercase;text-align:center;line-height:1.15}
.pk-mp__kop b{font-weight:400;color:#a855f7;text-shadow:0 0 14px rgba(168,85,247,.5)}
.pk-mp__ln{flex:0 1 110px;height:2px;background:#3a3a42;border-radius:1px}
.pk-mp__scroll{overflow:hidden;padding-bottom:4px}
.pk-mp__set{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.pk-mp__set+.pk-mp__set{display:none}
.pk-mp__set::after{content:"";position:absolute;left:3%;right:3%;bottom:8px;height:3px;border-radius:2px;background:linear-gradient(90deg,#7a1fa2,#a855f7 45%,#ff9d00)}
.pk-mp__item{position:relative;text-align:center;padding:0 6px 40px;color:#fff}
.pk-mp__ico{display:block;width:50px;height:50px;margin:0 auto 10px;color:#a855f7;filter:drop-shadow(0 0 8px rgba(168,85,247,.5))}
.pk-mp__ico svg{width:100%;height:100%;display:block}
.pk-mp__item strong{display:block;font-size:.92rem;letter-spacing:.02em;margin-bottom:3px}
.pk-mp__item p{margin:0;font-size:.78rem;color:var(--pk-muted);line-height:1.35}
.pk-mp__dot{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:15px;height:15px;border-radius:50%;background:#fff;border:4px solid var(--d,#a855f7);z-index:1}
.pk-mp__item--goud .pk-mp__ico{color:#ff9d00;filter:drop-shadow(0 0 9px rgba(255,157,0,.65))}
.pk-mp__ster{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);z-index:1;font-size:27px;line-height:1;color:#ffc73a;text-shadow:0 0 12px rgba(255,180,0,.9)}
@media (max-width:980px){
  .pk-mp__kop{gap:12px}
  .pk-mp__ln{flex-basis:44px}
  .pk-mp__track{display:flex;width:max-content;animation:pk-mp-loop 30s linear infinite}
  .pk-mp__track:active{animation-play-state:paused}
  .pk-mp__set{display:flex;gap:0}
  .pk-mp__set+.pk-mp__set{display:flex}
  .pk-mp__set::after{left:0;right:0}
  .pk-mp__item{width:152px;flex:0 0 auto}
}
@keyframes pk-mp-loop{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .pk-mp__track{animation:none}
  .pk-mp__scroll{overflow-x:auto}
  .pk-mp__set+.pk-mp__set{display:none}   /* geen dubbele tijdlijn zonder animatie */
}

/* ---------- Foto-categorie-kaarten (Waarvoor kom je?) — Neon arcade ---------- */
.pk-catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pk-cat{position:relative;display:block;aspect-ratio:7/10;border-radius:var(--pk-radius);overflow:hidden;background:#000;isolation:isolate;--c:#ee4ed0;
  box-shadow:0 0 0 1px rgba(238,78,208,.6);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 62%,transparent),0 0 14px color-mix(in srgb,var(--c) 10%,transparent);
  transition:box-shadow .25s ease,transform .25s ease}
.pk-cat__media{position:absolute;inset:0;opacity:.82;transition:opacity .3s}
.pk-cat__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pk-cat::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(3,2,6,.96) 26%,rgba(3,2,6,.5) 56%,rgba(3,2,6,0) 76%)}
.pk-cat__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.pk-cat__title{position:absolute;top:13px;left:8px;right:8px;z-index:2;text-align:center;font-family:var(--pk-head);font-size:1.7rem;letter-spacing:.03em;text-transform:uppercase;color:var(--c,#fff);line-height:1;
  text-shadow:0 1px 8px rgba(0,0,0,.85);
  text-shadow:0 1px 8px rgba(0,0,0,.85),0 0 18px color-mix(in srgb,var(--c) 45%,transparent)}
/* Kerngetal (prijs/vanaf-groep) vlak onder de titel — geeft meteen een concreet
   houvast zonder dat de bezoeker hoeft door te klikken. */
.pk-cat__feit{position:absolute;top:46px;left:8px;right:8px;z-index:2;text-align:center;
  font-family:var(--pk-body);font-weight:600;font-size:.74rem;letter-spacing:.02em;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.pk-cat__feit::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  margin-right:6px;vertical-align:middle;background:var(--c,#fe4802);box-shadow:0 0 6px var(--c,#fe4802)}
.pk-cat::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(3,2,6,.85) 0%,rgba(3,2,6,.28) 15%,rgba(3,2,6,0) 27%)}
.pk-cat__text{display:none}
.pk-cat__usps{margin:10px 0 2px;display:flex;flex-direction:column;gap:6px;text-align:left}
.pk-cat__pt{display:flex;align-items:flex-start;gap:8px;font-size:.8rem;line-height:1.25;color:#e9e9f2}
.pk-cat__vink{flex:0 0 auto;width:15px;height:15px;margin-top:1px;border:1.5px solid var(--c,#fe4802);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--c,#fe4802)}
.pk-cat__btn{margin-top:12px;align-self:center;white-space:nowrap;display:inline-flex;padding:9px 18px;border:1.5px solid var(--c,#fe4802);border-radius:4px;color:var(--c,#fe4802);background:transparent;transform:skewX(-11deg);box-shadow:0 0 14px -6px var(--c,#fe4802);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.2;transition:background .2s,box-shadow .2s}
.pk-cat__btn>span{display:inline-flex;gap:7px;transform:skewX(11deg)}
.pk-cat:hover{transform:translateY(-5px);
  box-shadow:0 0 0 1.5px var(--c,#fe4802),0 0 24px rgba(254,72,2,.45);
  box-shadow:0 0 0 1.5px var(--c),0 0 24px color-mix(in srgb,var(--c) 45%,transparent),0 0 44px color-mix(in srgb,var(--c) 28%,transparent)}
.pk-cat:hover .pk-cat__media{opacity:.95}
.pk-cat:hover .pk-cat__media img{transform:scale(1.06)}
.pk-cat:hover .pk-cat__btn{background:rgba(255,255,255,.06);background:color-mix(in srgb,var(--c) 15%,transparent);box-shadow:0 0 20px -6px var(--c)}
@media (max-width:980px){
  .pk-catgrid{grid-template-columns:repeat(2,1fr);gap:clamp(10px,2.4vw,16px)}
  .pk-cat{border-radius:14px}
  .pk-cat__body{padding:clamp(10px,2.6vw,16px)}
  .pk-cat__title{font-size:clamp(1.05rem,4.6vw,1.6rem)}
  .pk-cat__feit{top:clamp(34px,9vw,44px);font-size:clamp(.58rem,2.2vw,.7rem)}
  .pk-cat__btn{margin-top:.6em;font-size:clamp(.56rem,2.3vw,.7rem);padding:.55em 1em;letter-spacing:.04em}
  .pk-cat__usps{gap:4px;margin:8px 0 0}
  .pk-cat__pt{font-size:clamp(.6rem,2.6vw,.78rem);gap:6px}
  .pk-cat__vink{width:12px;height:12px;font-size:7px;border-width:1.2px}
}

/* ---------- Hoe werkt het? — verticale tijdlijn (variant 3) ---------- */
/* Links uitgelijnd (wens Michel 15 aug): nummers tegen de linkerkant, tekst rechts
   ervan — niet meer als zwevend blok in het midden met een leeg gat links. */
.pk-hwtl{list-style:none;max-width:660px;margin:0;padding:0 0 0 44px;position:relative}
.pk-hwtl::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--pk-grad)}
.pk-hwtl__stap{position:relative;padding:0 0 22px}
.pk-hwtl__stap:last-child{padding-bottom:0}
.pk-hwtl__dot{position:absolute;left:-44px;top:-2px;width:32px;height:32px;border-radius:50%;background:var(--pk-bg);border:2px solid var(--pk-orange);display:flex;align-items:center;justify-content:center;font-family:var(--pk-head);font-size:1.05rem;color:#fff}
/* Tijdbandje bij een stap — huisstijl: donkere vulling met verlopende rand,
   geen platte oranje pil met een emoji-klokje. */
.pk-hwtl__tijd{margin:0 0 6px}
.pk-hwtl__titel{display:block;font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.pk-hwtl__tekst{color:var(--pk-muted);font-size:.85rem;line-height:1.5;margin:3px 0 0}
@media (max-width:560px){.pk-hwtl{padding-left:38px}.pk-hwtl::before{left:12px}.pk-hwtl__dot{left:-38px;width:27px;height:27px;font-size:.9rem}}


/* ---------- Zo werkt het — zes stappen met foto en genummerde badge ---------- */
/* Gloed achter de kop: oranje links, groen rechts, precies als in het ontwerp. */
.pk-zw__kop{position:relative;margin-bottom:6px}
.pk-zw__kop::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:-1;
  width:min(560px,92%);height:70%;pointer-events:none;filter:blur(26px);opacity:.55;
  background:linear-gradient(90deg,rgba(254,72,2,.75),rgba(255,255,255,0) 42%,rgba(255,255,255,0) 58%,rgba(82,226,82,.7))}

.pk-zw__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);
  list-style:none;margin:26px 0 0;padding:0}
.pk-zw__kaart{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  border:2px solid var(--c);background:#0b0a0f;
  box-shadow:0 0 18px -8px color-mix(in srgb,var(--c) 70%,transparent);
  transition:transform .25s ease,box-shadow .25s ease}
.pk-zw__kaart:hover{transform:translateY(-4px);box-shadow:0 0 28px -6px var(--c)}

/* Géén overflow:hidden hier — dat zou de nummerbadge afknippen die bewust over
   de onderrand hangt. De kaart zelf klipt al op de ronde hoeken. */
.pk-zw__beeld{position:relative;display:block;aspect-ratio:16/10;background:#08070c}
.pk-zw__beeld picture{display:block;width:100%;height:100%;overflow:hidden}
.pk-zw__beeld img{width:100%;height:100%;object-fit:cover;display:block}
/* Plaatshouder zolang de definitieve foto nog niet geleverd is. */
.pk-zw__leeg{position:absolute;inset:0;display:grid;place-items:center;color:var(--c);
  background:radial-gradient(120% 120% at 50% 30%,color-mix(in srgb,var(--c) 22%,transparent),transparent 65%)}
.pk-zw__leeg svg{width:54px;height:54px;opacity:.75}
/* Genummerde badge: gevulde cirkel met wit cijfer, hangt over de onderrand van
   de foto. Op de telefoon springt hij terug in de tekst, vóór de titel. */
.pk-zw__nr{position:absolute;left:15px;top:-19px;z-index:2;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--pk-head);font-size:1.22rem;line-height:1;color:#fff;
  background:var(--c);box-shadow:0 0 14px -2px color-mix(in srgb,var(--c) 85%,transparent)}

.pk-zw__body{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px 15px 15px;border-top:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.pk-zw__kaartkop{display:block;margin-bottom:5px}
.pk-zw__titel{display:block;font-family:var(--pk-head);font-size:clamp(1.02rem,1.4vw,1.3rem);
  letter-spacing:.03em;text-transform:uppercase;color:#fff}
.pk-zw__rij{display:flex;align-items:center;gap:12px}
.pk-zw__uitleg{flex:1 1 auto;min-width:0;color:var(--pk-muted);font-size:.9rem;line-height:1.45}
.pk-zw__ico{flex:0 0 auto;color:var(--c)}
.pk-zw__ico svg{width:38px;height:38px;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c) 55%,transparent))}

/* Afsluitende balk met klok en boek-knop. */
.pk-zw__balk{display:flex;align-items:center;gap:clamp(14px,2vw,26px);margin-top:clamp(16px,2.4vw,26px);
  padding:clamp(14px,1.8vw,22px);border-radius:16px;
  border:2px solid var(--pk-orange);background:rgba(254,72,2,.05)}
.pk-zw__balk-ico{flex:0 0 auto}
.pk-zw__balk-ico svg{width:clamp(40px,4vw,58px);height:clamp(40px,4vw,58px);
  filter:drop-shadow(0 0 10px rgba(254,72,2,.5))}
.pk-zw__balk-tekst{flex:1 1 auto;min-width:0}
.pk-zw__balk-tekst strong{display:block;font-family:var(--pk-head);font-size:clamp(1.25rem,2.4vw,2rem);
  letter-spacing:.03em;text-transform:uppercase;color:#fff;line-height:1.05;margin-bottom:4px}
.pk-zw__balk-tekst span{color:var(--pk-muted);font-size:.95rem;line-height:1.45}
.pk-zw__balk-knop{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:10px;
  font-family:var(--pk-head);font-size:1.06rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:var(--pk-orange);box-shadow:0 10px 26px -10px var(--pk-orange);
  transition:transform .2s ease,box-shadow .2s ease}
.pk-zw__balk-knop:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px var(--pk-orange)}

@media (max-width:1000px){ .pk-zw__raster{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){
  /* Telefoon: de kaarten worden liggende rijen — foto links, tekst rechts, met
     het nummer vóór de titel in plaats van over de foto heen. */
  .pk-zw__raster{grid-template-columns:1fr;gap:14px}
  .pk-zw__kaart{flex-direction:row;align-items:stretch}
  .pk-zw__beeld{flex:0 0 43%;aspect-ratio:auto;align-self:stretch;min-height:132px}
  .pk-zw__beeld picture,.pk-zw__beeld img{height:100%}
  .pk-zw__leeg svg{width:44px;height:44px}
  .pk-zw__body{flex:1 1 auto;min-width:0;justify-content:center;padding:14px;border-top:0}
  .pk-zw__kaartkop{display:flex;align-items:center;gap:11px;margin-bottom:7px}
  .pk-zw__nr{position:static;width:34px;height:34px;flex:0 0 auto;font-size:1.1rem}
  .pk-zw__titel{font-size:1.12rem;line-height:1.1}
  .pk-zw__ico svg{width:34px;height:34px}
  /* Balk: klok en tekst naast elkaar, knop eronder over de volle breedte. */
  .pk-zw__balk{flex-wrap:wrap;gap:12px 14px}
  .pk-zw__balk-knop{flex:1 0 100%;justify-content:center}
}

/* ---------- Kinderfeestjes — uitgelicht blok ----------
   Foto links, tekst rechts. De teller staat er alleen als er echt iets te
   tellen valt; die logica zit in pk_kinderfeest_teller(). */
/* Bedrijfsuitje staat ónder het kinderfeestje, allebei op volle breedte. Bewust
   niet naast elkaar: het zijn twee heel verschillende doelgroepen, en in een
   halve kolom verliest het kinderfeestje z'n formaat. Wél gespiegeld — foto
   rechts — zodat de twee blokken elkaar afwisselen in plaats van te herhalen. */
.pk-zak{margin-top:clamp(18px,2.6vw,32px);grid-template-columns:.98fr 1.02fr}
.pk-zak .pk-kf__foto {grid-column:2;grid-row:1}
.pk-zak .pk-kf__tekst{grid-column:1;grid-row:1}
@media (max-width:860px){
  /* Gestapeld: foto weer bovenaan, dus de vaste plaatsing eruit. */
  .pk-zak .pk-kf__foto,.pk-zak .pk-kf__tekst{grid-column:auto;grid-row:auto}
}

/* Eigen kleurverloop (blauw → cyaan → paars) zodat het zich onderscheidt van
   het kinderfeestje erboven. */
.pk-zak{background:linear-gradient(#0e0d12,#0e0d12) padding-box,
                   linear-gradient(145deg,#4f7dff 0%,#22d3ee 45%,#a855f7 100%) border-box !important}
.pk-zak .pk-kf__pill{background:linear-gradient(#121016,#121016) padding-box,
                                linear-gradient(90deg,#4f7dff,#a855f7) border-box}
.pk-zak .pk-kf__merk{background:linear-gradient(95deg,#4f7dff 0%,#22d3ee 50%,#a855f7 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pk-zak .pk-kf__cta{background:#4f7dff;box-shadow:0 10px 28px -8px #4f7dff}
.pk-zak .pk-kf__cta:hover{box-shadow:0 16px 34px -6px #4f7dff}
.pk-zak .pk-kf__link{color:#7ea2ff}

/* Buitenkader met verlopende neon-rand (oranje → magenta → paars). De truc met
   twee achtergronden — padding-box voor de vulling, border-box voor het verloop —
   is de enige manier om een gradient als rand te krijgen die de ronde hoeken volgt. */
.pk-kf__doos{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(18px,2.6vw,36px);align-items:center;
  border-radius:26px;padding:clamp(14px,1.8vw,20px);border:2px solid transparent;
  background:linear-gradient(#0e0d12,#0e0d12) padding-box,
             linear-gradient(145deg,#fe4802 0%,#ff2fd6 55%,#a855f7 100%) border-box}

.pk-kf__foto{position:relative;margin-bottom:22px}
.pk-kf__foto picture{display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 18px 44px rgba(0,0,0,.45)}
.pk-kf__foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Het bandje hangt over de onderrand van de foto heen. */
.pk-kf__pill{position:absolute;left:clamp(12px,2vw,22px);bottom:-15px;z-index:2;
  white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.55)}

.pk-kf__kop{font-family:var(--pk-head);font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.0;
  text-transform:uppercase;letter-spacing:.02em;margin:0 0 14px;color:#fff}
.pk-kf__merk{background:linear-gradient(95deg,#fe4802 0%,#ff2fd6 52%,#a855f7 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pk-kf__lead{color:var(--pk-muted);margin:0 0 18px;max-width:46ch;line-height:1.6}

/* Drie feitvakjes, elk in een eigen kleur. */
.pk-kf__feiten{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;margin:0 0 16px;padding:0}
.pk-kf__feiten li{padding:12px 8px;border-radius:13px;text-align:center;
  border:1.5px solid color-mix(in srgb,var(--c) 62%,transparent);
  background:color-mix(in srgb,var(--c) 7%,transparent)}
.pk-kf__feiten strong{display:block;font-family:var(--pk-head);font-size:clamp(1.05rem,1.6vw,1.42rem);
  letter-spacing:.02em;color:var(--c);text-shadow:0 0 12px color-mix(in srgb,var(--c) 45%,transparent)}
.pk-kf__feiten span{display:block;margin-top:3px;font-size:.68rem;color:var(--pk-muted);
  text-transform:uppercase;letter-spacing:.06em}

/* De belofte die ouders over de streep trekt. */
.pk-kf__belofte{display:flex;gap:17px;align-items:flex-start;margin:0 0 18px;padding:17px;
  border-radius:18px;border:1.5px solid rgba(255,255,255,.13);background:rgba(255,255,255,.03)}
.pk-kf__belofte-ico{flex:0 0 auto;width:76px;height:76px;display:grid;place-items:center;border-radius:17px;
  border:1.5px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04)}
.pk-kf__belofte-ico svg{width:44px;height:44px;filter:drop-shadow(0 0 8px rgba(254,72,2,.4))}
.pk-kf__belofte strong{display:block;margin-bottom:7px;color:#fff;
  font-family:var(--pk-head);font-size:1.34rem;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.pk-kf__belofte p{margin:0 0 13px;color:var(--pk-muted);font-size:.95rem;line-height:1.55}
.pk-kf__merken{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0}
.pk-kf__merken li{padding:6px 15px;border-radius:99px;color:var(--c);
  font-family:var(--pk-head);font-size:.94rem;letter-spacing:.05em;text-transform:uppercase;
  border:2px solid color-mix(in srgb,var(--c) 65%,transparent)}

.pk-kf__teller{margin:0 0 16px;font-size:.9rem;color:var(--pk-muted)}
.pk-kf__teller strong{color:#fff;font-family:var(--pk-head);font-size:1.15rem}

.pk-kf__knoppen{margin:0}
.pk-kf__cta{display:block;text-align:center;padding:16px 24px;border-radius:12px;color:#fff;
  font-family:var(--pk-head);font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:.05em;text-transform:uppercase;
  background:var(--pk-orange);box-shadow:0 10px 28px -8px var(--pk-orange);
  transition:transform .2s ease,box-shadow .2s ease}
.pk-kf__cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px -6px var(--pk-orange)}
.pk-kf__link{display:block;text-align:center;margin-top:13px;color:var(--pk-orange);
  font-family:var(--pk-head);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase}
.pk-kf__link:hover{text-decoration:underline}

@media (max-width:860px){
  .pk-kf__doos{grid-template-columns:1fr;gap:20px;border-radius:22px}
  .pk-kf__pill{white-space:normal;font-size:.72rem;right:clamp(12px,2vw,22px);text-align:center}
  .pk-kf__belofte{padding:14px;gap:14px}
  .pk-kf__belofte-ico{width:64px;height:64px;border-radius:15px}
  .pk-kf__belofte-ico svg{width:37px;height:37px}
  .pk-kf__belofte strong{font-size:1.2rem}
  .pk-kf__merken li{font-size:.86rem;padding:5px 13px}
}

/* ---------- Gamekamers — kaartenraster met neon-randen ----------
   Elke kaart is een link naar díe kamer op /game-rooms (anker #kamer-<naam>).
   Kleur rouleert oranje → paars → groen. Kamers die nog moeten openen krijgen
   een 'Binnenkort'-label en een gedempte foto, zodat niemand denkt dat hij er
   nu al kan spelen. */
.pk-gk__kop{margin-bottom:0}

/* Gekleurde woorden in een sectiekop, met neon-gloed. Herbruikbaar: zet zo'n
   klasse om het woord dat je wilt uitlichten. */
.pk-accent--paars {color:#a855f7;text-shadow:0 0 18px rgba(168,85,247,.55)}
.pk-accent--groen {color:#52e252;text-shadow:0 0 18px rgba(82,226,82,.50)}
.pk-accent--oranje{color:#fe4802;text-shadow:0 0 18px rgba(254,72,2,.55)}
.pk-accent--geel  {color:#ffd600;text-shadow:0 0 18px rgba(255,214,0,.50)}
.pk-accent--roze  {color:#ff2fd6;text-shadow:0 0 18px rgba(255,47,214,.50)}

/* Flexbox in plaats van grid: bij 11 kamers staan er 6 boven en centreert de
   rij van 5 zich vanzelf, en dat blijft kloppen als er ooit een kamer bij komt
   of afvalt. Met een grid zou je dat per aantal moeten narekenen. */
.pk-gkraster{--gk-gap:clamp(10px,1.3vw,18px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gk-gap);margin-top:4px}

.pk-gkkaart{flex:0 0 calc((100% - 5*var(--gk-gap))/6);
  position:relative;display:block;border-radius:14px;overflow:hidden;
  border:2px solid var(--c);background:#07060b;
  box-shadow:0 0 18px -6px color-mix(in srgb,var(--c) 70%,transparent);
  transition:transform .25s ease,box-shadow .25s ease}
.pk-gkkaart:hover{transform:translateY(-5px);
  box-shadow:0 0 26px -4px var(--c),0 14px 30px rgba(0,0,0,.5)}
.pk-gkkaart__foto{display:block;position:relative;aspect-ratio:.82;background:#000}
.pk-gkkaart__foto picture{display:block;width:100%;height:100%}
.pk-gkkaart__foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pk-gkkaart:hover .pk-gkkaart__foto img{transform:scale(1.06)}
.pk-gkkaart__foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(3,2,6,.92) 22%,rgba(3,2,6,.25) 52%,transparent 72%)}

.pk-gkkaart__voet{position:absolute;left:12px;right:12px;bottom:11px;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:8px;pointer-events:none}
.pk-gkkaart__naam{font-family:var(--pk-head);font-size:clamp(.82rem,1.15vw,1.12rem);letter-spacing:.03em;
  text-transform:uppercase;line-height:1.05;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.95)}
.pk-gkkaart__naam::after{content:"";display:block;width:34px;height:3px;margin-top:6px;border-radius:2px;
  background:var(--c);box-shadow:0 0 9px color-mix(in srgb,var(--c) 70%,transparent)}
.pk-gkkaart__pijl{flex:0 0 auto;color:var(--c);font-size:1.05rem;line-height:1;transition:transform .2s ease}
.pk-gkkaart:hover .pk-gkkaart__pijl{transform:translateX(4px)}

.pk-gkkaart__soon{position:absolute;top:9px;left:9px;z-index:3;
  font-family:var(--pk-head);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;color:#07060b;background:var(--c);
  box-shadow:0 4px 14px color-mix(in srgb,var(--c) 55%,transparent)}
.pk-gkkaart.is-binnenkort .pk-gkkaart__foto img{filter:grayscale(.4) brightness(.72)}

.pk-gk__knop{display:flex;justify-content:center;margin:clamp(20px,3vw,32px) 0 0}
.pk-gk__btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;border-radius:10px;
  font-family:var(--pk-head);font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--pk-orange);border:2px solid var(--pk-orange);background:transparent;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.pk-gk__btn:hover{background:var(--pk-orange);color:#fff;box-shadow:0 0 24px -4px var(--pk-orange)}

.pk-gk__balk{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:clamp(20px,3vw,30px) 0 0;padding:16px 10px;
  border:1px solid rgba(255,255,255,.1);border-radius:14px;
  /* Stevig genoeg dekkend, anders lopen de lijnen van de sectie-achtergrond
     dwars door de balk heen en oogt het rommelig. */
  background:rgba(8,7,12,.72);backdrop-filter:blur(3px)}
.pk-gk__balk li{display:flex;align-items:center;justify-content:center;gap:10px;padding:4px 8px;
  font-family:var(--pk-head);font-size:clamp(.8rem,1.1vw,1rem);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.pk-gk__balk li + li{border-left:1px solid rgba(255,255,255,.09)}
.pk-gk__balk svg{width:24px;height:24px;flex:0 0 auto}

@media (max-width:900px){
  .pk-gkkaart{flex-basis:calc((100% - 2*var(--gk-gap))/3)}
  .pk-gk__balk{grid-template-columns:1fr;gap:10px;padding:12px}
  .pk-gk__balk li + li{border-left:0;border-top:1px solid rgba(255,255,255,.09);padding-top:12px}
  .pk-gk__btn{width:100%;justify-content:center}
}
@media (max-width:560px){
  /* Telefoon: twee liggende kaarten naast elkaar. Bij een oneven aantal blijft
     de laatste alleen op zijn rij — die gaat dan over de volle breedte in plaats
     van half, zoals in het ontwerp van Michel. Werkt bij elk oneven aantal
     kamers, dus ook als er ooit eentje bijkomt of afvalt. */
  .pk-gkkaart{flex-basis:calc((100% - var(--gk-gap))/2)}
  .pk-gkkaart__foto{aspect-ratio:1.5}
  .pk-gkkaart:last-child:nth-child(odd){flex-basis:100%}
  .pk-gkkaart:last-child:nth-child(odd) .pk-gkkaart__foto{aspect-ratio:2.6}
  /* Cijferbalk links uitlijnen, met het icoon voorop. */
  .pk-gk__balk li{justify-content:flex-start;gap:14px;padding:8px 6px}
}

/* ---------- Sfeer-galerij (bento, losse foto's) ---------- */
.pk-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px;margin-top:26px}
/* Neon-omlijning, net als bij de doelgroepkaarten en de gamekamers. De kleur
   komt per foto uit $pkPalet in home.php, als --c in de style-regel. */
.pk-bento figure{--c:#ff2fd6;position:relative;margin:0;border-radius:14px;overflow:hidden;background:var(--pk-bg-3);
  border:2px solid var(--c);box-shadow:0 0 16px -6px color-mix(in srgb,var(--c) 70%,transparent);
  transition:box-shadow .3s ease}
.pk-bento figure:hover{box-shadow:0 0 26px -4px var(--c)}
.pk-bento img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.pk-bento figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.28),rgba(0,0,0,0) 55%);opacity:.7;transition:opacity .4s}
.pk-bento figure:hover img{transform:scale(1.07)}
.pk-bento figure:hover::after{opacity:.3}
.pk-bento figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.pk-bento figure:nth-child(6){grid-column:span 2}
@media (max-width:1000px){.pk-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}.pk-bento figure:nth-child(1){grid-column:span 2;grid-row:span 2}.pk-bento figure:nth-child(6){grid-column:span 2}}
@media (max-width:560px){.pk-bento{grid-auto-rows:128px;gap:10px}.pk-bento figure:nth-child(1){grid-row:span 2}}

/* ---------- Reviews ("Wat onze spelers zeggen") — minimal lijst ---------- */
.pk-reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:4px}
.pk-rev{display:flex;flex-direction:column;padding:6px 0 6px 18px;border-left:3px solid #b500b5;border-image:linear-gradient(180deg,#a414b5,#fe4802) 1}
.pk-rev__st{color:#ffc73a;letter-spacing:2px;font-size:1rem}
.pk-rev__txt{color:#e6e6ee;font-size:.85rem;line-height:1.5;margin:8px 0 0}
.pk-rev__wie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;font-weight:700;font-size:.85rem}
.pk-score{margin-top:clamp(26px,3.5vw,40px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.pk-score__badge{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;border:1.5px solid rgba(255,199,58,.6);border-radius:999px;padding:12px 26px;background:linear-gradient(180deg,#17130a,#100d08);box-shadow:0 0 26px -6px rgba(255,180,0,.55);font-weight:600;font-size:clamp(.9rem,2.6vw,1.02rem);color:#fff;transition:box-shadow .2s,transform .2s}
.pk-score__badge:hover{box-shadow:0 0 36px -4px rgba(255,180,0,.7);transform:translateY(-2px)}
.pk-score__plaats{color:var(--pk-muted);font-size:.85rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.pk-score__plaats:hover{color:#ffc73a}
.pk-score__st{position:relative;display:inline-block;line-height:1;letter-spacing:3px;font-size:1.05rem}
.pk-score__leeg{color:#3a3a44}
.pk-score__vol{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#ffc73a;text-shadow:0 0 9px rgba(255,180,0,.7)}
/* Reviews → Google (22 aug 2026). De citaten staan op onze eigen site; deze twee
   links laten de bezoeker ze bij Google zelf nalezen en er een achterlaten. */
.pk-revlinks{margin-top:clamp(18px,2.4vw,26px);display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.pk-revlinks__a{display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(255,255,255,.22);border-radius:999px;padding:11px 22px;font-weight:600;font-size:clamp(.84rem,2.4vw,.95rem);color:#fff;text-decoration:none;background:rgba(255,255,255,.04);transition:border-color .2s,background .2s,transform .2s}
.pk-revlinks__a:hover,.pk-revlinks__a:focus-visible{border-color:rgba(255,199,58,.75);background:rgba(255,199,58,.10);transform:translateY(-2px)}
.pk-revlinks__a--schrijf{border-color:rgba(255,199,58,.6);box-shadow:0 0 22px -8px rgba(255,180,0,.55)}
.pk-revlinks__a--schrijf:hover,.pk-revlinks__a--schrijf:focus-visible{box-shadow:0 0 30px -6px rgba(255,180,0,.75)}
@media (max-width:420px){.pk-revlinks{flex-direction:column;align-items:stretch}.pk-revlinks__a{justify-content:center}}
@media (max-width:900px){.pk-reviews{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (max-width:560px){.pk-reviews{grid-template-columns:1fr;gap:18px}.pk-rev__txt{font-size:.82rem}}

/* ---------- USP's — neon-kaarten ---------- */
.pk-uspframe{position:relative;border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:clamp(32px,4.5vw,54px) clamp(18px,4vw,42px);box-shadow:0 0 60px -30px rgba(180,0,181,.5),inset 0 0 60px -40px rgba(254,72,2,.22)}
.pk-corner{position:absolute;width:30px;height:30px;pointer-events:none;filter:drop-shadow(0 0 6px currentColor)}
.pk-corner--tl{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid;border-top-left-radius:24px;color:var(--pk-orange)}
.pk-corner--tr{top:-1px;right:-1px;border-top:2px solid;border-right:2px solid;border-top-right-radius:24px;color:#c81fce}
.pk-corner--bl{bottom:-1px;left:-1px;border-bottom:2px solid;border-left:2px solid;border-bottom-left-radius:24px;color:#c81fce}
.pk-corner--br{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid;border-bottom-right-radius:24px;color:var(--pk-orange)}
/* ---------- Melding ----------
   Eén korte, belangrijke boodschap in een omlijst kader. Vulling en verlopende
   rand komen uit de bandjes-standaard bovenaan, alleen op kaartformaat: zo
   hoort hij zichtbaar bij de rest zonder een tweede huisstijl te worden.
   De kop is bewust kleiner dan een sectiekop — dit blok staat vaak vlak onder
   de hero en mag niet met de hero-titel gaan concurreren. */
.pk-melding{position:relative;max-width:860px;margin:0 auto;
  border:2px solid transparent;border-radius:18px;
  padding:clamp(22px,3.4vw,34px) clamp(18px,3.4vw,36px);
  background:linear-gradient(var(--pk-chip-vulling),var(--pk-chip-vulling)) padding-box,
             var(--pk-chip-rand) border-box;
  box-shadow:0 0 60px -34px rgba(180,0,181,.75)}
.pk-melding__ico{display:block;font-size:1.5rem;line-height:1;margin:0 0 .5rem}
.pk-melding__kop{font-family:var(--pk-head);font-size:clamp(1.5rem,3.4vw,2.1rem);
  letter-spacing:.02em;text-transform:uppercase;line-height:1.06;margin:0 0 .55em;color:#fff}
.pk-melding p{margin:0 0 .85em;color:var(--pk-muted);
  font-size:clamp(.96rem,1.6vw,1.05rem);line-height:1.65}
.pk-melding p:last-child{margin-bottom:0}
/* Nadruk in de lopende tekst: wit in plaats van gedempt grijs. Op een donkere
   achtergrond springt dat er meteen uit, zonder dat er een kleur bij komt die
   niet in de huisstijl zit. */
.pk-melding strong{color:#fff;font-weight:600}
.pk-melding__knop{margin:1.2rem 0 0}

/* Flex i.p.v. grid: bij een blok waarvan het aantal kaarten geen veelvoud van 4
   is (6, 3...) komt de onvolledige laatste rij nu gecentreerd te staan in
   plaats van links uitgelijnd met een leeg gat rechts.
   --k = gewenst aantal kolommen (komt uit PHP: het aantal kaarten in dit blok,
   met 4 als terugval bij meer dan zes). --kmax knijpt dat af op smallere
   schermen, zodat zes kaarten naast elkaar nooit tot postzegels verschrompelen. */
.pk-usps{--k:4;--kmax:6;--g:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g)}
.pk-usps__veeg{display:none}
.pk-usp{--kk:min(var(--k),var(--kmax));
  position:relative;flex:0 1 calc((100% - (var(--kk) - 1) * var(--g)) / var(--kk));min-width:0;
  background:linear-gradient(180deg,#151019,#0e0b13);border-radius:18px;padding:30px 18px 28px;text-align:center;box-shadow:0 0 0 1.5px var(--u,#b500b5),0 0 24px -6px var(--ug,rgba(180,0,181,.5));transition:transform .28s ease,box-shadow .28s ease}
.pk-usp:hover{transform:translateY(-6px);box-shadow:0 0 0 1.5px var(--u,#b500b5),0 0 40px -4px var(--ug,rgba(180,0,181,.6))}
/* Icoon in een gloeiende ronde badge i.p.v. los zwevend. Dit repareert een
   echte tekortkoming: deze klasse was gemaakt voor de SVG-iconen op de
   homepage (die de hele 74-96px vullen), maar de kenmerken-secties op de
   subpagina's zetten er gewoon een emoji-teken in — dat vult die ruimte niet,
   vandaar het lege, onafgemaakte gevoel. De badge geeft elk icoon nu een
   vast, gevuld silhouet in de kaartkleur, of het nu een SVG of een emoji is. */
.pk-usp__ico{
  display:flex;align-items:center;justify-content:center;
  width:clamp(52px,6vw,64px);height:clamp(52px,6vw,64px);
  margin:0 auto 18px;border-radius:50%;font-size:1.5rem;line-height:1;
  color:var(--u,#b500b5);
  background:radial-gradient(circle at 35% 28%,var(--uf,rgba(180,0,181,.18)),transparent 72%);
  box-shadow:0 0 0 1.5px var(--u,#b500b5),0 0 18px -4px var(--ug,rgba(180,0,181,.6));
}
.pk-usp__ico svg{width:54%;height:54%;display:block}
.pk-usp h3{font-family:var(--pk-head);font-size:1.4rem;line-height:1.05;letter-spacing:.02em;text-transform:uppercase;margin:0 0 10px;color:#fff}
.pk-usp__line{display:block;width:40px;height:3px;margin:0 auto 12px;border-radius:2px;background:var(--pk-grad)}
.pk-usp p{color:var(--pk-muted);font-size:.9rem;margin:0;line-height:1.45}
@media (max-width:1100px) and (min-width:761px){
  .pk-uspframe{padding:clamp(20px,4vw,40px) clamp(12px,2.4vw,26px)}
  .pk-usps{--kmax:4;--g:14px}
  .pk-usp{padding:28px 14px 24px}
  .pk-usp h3{font-size:1.15rem}
  .pk-usp p{font-size:.84rem}
}
@media (max-width:920px) and (min-width:761px){
  .pk-usps{--kmax:3}
}
/* Telefoon: één veegbare rij in plaats van acht piepkleine hokjes. De kaarten
   klikken één voor één op hun plek (scroll-snap), zodat vegen niet halverwege
   blijft hangen. */
@media (max-width:760px){
  .pk-uspframe{padding:clamp(20px,5vw,30px) 0 clamp(16px,4vw,24px);border-radius:16px}
  .pk-uspframe > .pk-skop{margin-left:16px;margin-right:16px}
  .pk-usps{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding:0 16px;padding:4px 16px 12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pk-usps::-webkit-scrollbar{display:none}
  .pk-usp{flex:0 0 76%;max-width:320px;scroll-snap-align:center;
    border-radius:14px;padding:26px 18px 24px}
  .pk-usp:hover{transform:none}
  .pk-usp__ico{width:56px;height:56px;margin:0 auto 14px}
  .pk-usp h3{font-size:1.2rem;margin-bottom:8px}
  .pk-usp__line{width:32px;height:3px;margin-bottom:10px}
  .pk-usp p{font-size:.88rem;line-height:1.5}
  .pk-usps__veeg{display:block;margin:2px 16px 0;text-align:center;
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#6f6f78}
}

/* ---------- Voor elk moment een uitje — kaarten per onderdeel ----------
   Neon-kaart naar het ontwerp van Michel: gloeiende rand in de kleur van het
   onderdeel, uitgeknipt neon-icoon links, titel ernaast, daaronder een streep
   en drie feiten met scheidingslijntjes. De rand, de gloed, de rasterpuntjes
   en de lichtbalk zijn CSS — die blijven op elk scherm scherp en schuiven mee
   op mobiel. Alleen de zes icoontjes zijn echte plaatjes. */
.pk-uitjes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pk-uitje{
  position:relative;display:block;isolation:isolate;overflow:hidden;
  border-radius:20px;padding:24px 24px 24px;
  background:
    radial-gradient(130% 100% at 0% 0%,color-mix(in srgb,var(--c) 20%,transparent),transparent 62%),
    linear-gradient(158deg,#141019 0%,#0c0a11 58%,#0a0910 100%);
  border:1.5px solid color-mix(in srgb,var(--c) 60%,transparent);
  box-shadow:0 0 26px -10px color-mix(in srgb,var(--c) 75%,transparent);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
/* Rasterpuntjes in de rechterbovenhoek, net als in het ontwerp. */
.pk-uitje::before{
  content:"";position:absolute;top:0;right:0;width:130px;height:78px;pointer-events:none;z-index:-1;
  background-image:radial-gradient(color-mix(in srgb,var(--c) 75%,transparent) 1.3px,transparent 1.5px);
  background-size:9px 9px;
  -webkit-mask-image:linear-gradient(215deg,#000,transparent 60%);
          mask-image:linear-gradient(215deg,#000,transparent 60%);
  opacity:.55;
}
/* Lichtbalk onder de kaart. */
.pk-uitje::after{
  /* Binnen de kaart houden: de kaart heeft overflow:hidden voor de rasterpuntjes,
     dus een balk die eronder uitsteekt zou juist worden weggeknipt. */
  content:"";position:absolute;left:24%;right:24%;bottom:0;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--c),transparent);
  box-shadow:0 0 16px 3px color-mix(in srgb,var(--c) 55%,transparent);
}
.pk-uitje:hover{transform:translateY(-6px);border-color:var(--c);
  box-shadow:0 0 34px -6px color-mix(in srgb,var(--c) 80%,transparent)}

.pk-uitje__kop{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.pk-uitje__ico{flex:0 0 auto;width:84px;height:84px;
  background:var(--ico) center/contain no-repeat;
  filter:drop-shadow(0 0 11px color-mix(in srgb,var(--c) 50%,transparent))}
.pk-uitje__titel{font-family:var(--pk-head);font-style:italic;font-size:clamp(1.35rem,2vw,1.95rem);
  letter-spacing:.02em;text-transform:uppercase;color:#fff;margin:0;line-height:1.02}
.pk-uitje__line{display:block;width:58px;height:3px;margin-top:9px;border-radius:2px;
  background:linear-gradient(90deg,var(--c),transparent);
  box-shadow:0 0 9px color-mix(in srgb,var(--c) 65%,transparent)}
.pk-uitje__scheiding{display:block;height:1px;margin:0 0 14px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 40%,transparent) 10%,
             color-mix(in srgb,var(--c) 40%,transparent) 90%,transparent)}

.pk-uitje__feiten{display:grid;grid-template-columns:repeat(3,1fr)}
.pk-uitje__feit{padding:0 9px;text-align:center;border-left:1px solid rgba(255,255,255,.08)}
.pk-uitje__feit:first-child{border-left:0;padding-left:0}
.pk-uitje__feit:last-child{padding-right:0}
.pk-uitje__feit strong{display:block;font-family:var(--pk-head);font-size:1.24rem;color:var(--c);
  letter-spacing:.01em;text-shadow:0 0 12px color-mix(in srgb,var(--c) 45%,transparent)}
.pk-uitje__feit span{display:block;margin-top:2px;font-size:.66rem;color:var(--pk-muted);line-height:1.25;
  text-transform:uppercase;letter-spacing:.04em}
.pk-uitje__pijl{position:absolute;top:15px;right:17px;color:var(--c);font-size:.95rem;letter-spacing:-1px;
  opacity:.5;transition:opacity .2s,transform .2s}
.pk-uitje:hover .pk-uitje__pijl{opacity:1;transform:translateX(3px)}

@media (max-width:1000px){
  .pk-uitjes__grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .pk-uitje{padding:16px 16px 18px;border-radius:16px}
  .pk-uitje__kop{gap:13px;margin-bottom:13px}
  .pk-uitje__ico{width:62px;height:62px}
  .pk-uitje__feit strong{font-size:1.05rem}
  .pk-uitje__feit span{font-size:.58rem}
  .pk-uitje__pijl{display:none}
}
@media (max-width:640px){
  .pk-uitjes__grid{grid-template-columns:1fr}
  .pk-uitje__ico{width:72px;height:72px}
}

/* ---------- CTA-band ---------- */
/* Slotblok "Klaar om te spelen?" — donkere kaart op zwart, met een verlopende
   haarrand, een paarse gloed links en een oranje rechts, en het X-merk als
   watermerk bovenin. Alle maten en kleuren zijn nagemeten in het goedgekeurde
   ontwerp en als VERHOUDING van de kaartbreedte overgenomen, zodat het beeld
   op elk scherm dezelfde indeling houdt. */
.pk-cta-band{background:#000;padding:clamp(34px,5.6vw,74px) 0}
.pk-cta-band__inner{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:clamp(18px,4.4vw,52px);
  padding:clamp(40px,14.9vw,176px) clamp(18px,4.4vw,58px) clamp(30px,8.1vw,95px);
  text-align:center;
  background:
    radial-gradient(16% 36% at 0% 63%, rgba(150,10,240,.48), transparent 64%),
    radial-gradient(21% 43% at 100% 63%, rgba(254,72,2,.55), transparent 62%),
    #050308;
  /* De gloed schijnt in het ontwerp ook búiten de kaart door; overflow:hidden
     knipt dat af, dus die aura komt van een schaduw. */
  box-shadow:-10px 0 55px -6px rgba(155,49,207,.45), 10px 0 55px -6px rgba(255,168,40,.40);
}
/* Haarrand die van paars naar oranje verloopt: een 1px-laag die met een masker
   alleen de rand overhoudt. Zo blijft de kaartvulling zelf onaangeroerd. */
.pk-cta-band__inner::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(115deg,#8a29b7 0%,#4a1246 26%,#241a22 52%,#4a2a16 74%,#a85a22 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:2;
}
/* Het merk staat als watermerk in de bovenhelft en is rond een derde van de
   kaartbreedte al volledig weggevaagd — het mag niet achter de knoppen liggen. */
.pk-cta-band__merk{
  position:absolute;top:-3%;left:50%;transform:translateX(-50%);
  width:min(62.5%,710px);height:auto;opacity:.11;filter:saturate(.5);
  z-index:0;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,#000 0 14%,rgba(0,0,0,.5) 31%,rgba(0,0,0,.2) 45%,transparent 58%);
          mask:linear-gradient(180deg,#000 0 14%,rgba(0,0,0,.5) 31%,rgba(0,0,0,.2) 45%,transparent 58%);
}
.pk-cta-band__inner > *:not(.pk-cta-band__merk){position:relative;z-index:1}
/* LET OP: de kicker is een <p>, dus .pk-cta-band p wint van een enkele klasse.
   Vandaar de zwaardere selector — anders slaan lettergrootte, kleur, marge en
   max-width hieronder allemaal niet aan. */
.pk-cta-band p.pk-cta-band__kicker{
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.4vw,28px);
  margin:0 0 clamp(10px,2.1vw,25px);max-width:none;
  font-size:clamp(1rem,2.4vw,1.77rem);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
}
.pk-cta-band__kicker::before,.pk-cta-band__kicker::after{
  content:"";height:2.5px;width:clamp(22px,6.1vw,72px);border-radius:2px;flex:none;
}
/* Beide streepjes verlopen links→rechts (ze zijn géén spiegelbeeld): links
   eindigt in oranje aan de tekstzijde, rechts begint roze en gaat naar oranje. */
.pk-cta-band__kicker::before{background:linear-gradient(90deg,#a617c0,#f2591f)}
.pk-cta-band__kicker::after{background:linear-gradient(90deg,#d42972,#eb732a)}
/* fit-content is hier wezenlijk: anders spant het verloop over de volle
   kaartbreedte en ziet de tekst alleen het middenstuk — het oranje aan het
   eind valt dan buiten beeld en de kop wordt overwegend roze. */
.pk-cta-band h2{
  font-family:var(--pk-head);margin:0 auto;width:fit-content;max-width:100%;
  font-size:clamp(2.4rem,11vw,8.15rem);line-height:.98;text-transform:uppercase;letter-spacing:.005em;
  background:linear-gradient(90deg,#ff0199 0%,#ff0193 15%,#ff0188 25%,#ff0471 45%,#ff1758 55%,#ff322e 63%,#ff5a04 75%,#ff6602 85%,#ff6906 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pk-cta-band p{margin:clamp(12px,1.9vw,22px) auto 0;color:#ededef;font-size:clamp(1.05rem,2.6vw,1.94rem);max-width:44ch}
.pk-cta-band__btns{
  display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(12px,3vw,35px);margin-top:clamp(20px,4.5vw,53px);
  max-width:85.5%;margin-left:auto;margin-right:auto;
}
/* De twee knoppen in dit blok staan los van de algemene .pk-btn-stijl: ze zijn
   breder, ronder en de tweede heeft een verlopende rand in plaats van vulling. */
.pk-cta-band .pk-btn--cta{
  display:flex;align-items:center;justify-content:center;gap:1.2em;
  background:linear-gradient(100deg,#fe5f01,#fd5303);color:#fff;border:0;
  border-radius:999px;padding:clamp(16px,2.5vw,25px) 26px;
  font-weight:700;font-size:clamp(1.05rem,3.4vw,2.4rem);letter-spacing:.04em;text-transform:uppercase;
  /* In het ontwerp heeft deze knop géén gloed: 2px eronder is de kaart al vlak.
     Expliciet none, anders slaat de schaduw van .pk-btn--cta alsnog toe. */
  box-shadow:none;white-space:normal;
}
.pk-cta-band .pk-btn--cta:hover{background:linear-gradient(100deg,#ff7616,#ff6104);box-shadow:none}
.pk-cta-band .pk-btn--cta svg{flex:none;width:1.2em;height:auto}
/* white-space mag hier niet op nowrap staan (dat erft van .pk-btn): op een
   telefoon steekt deze lange tekst dan dwars door de kaartrand heen. */
.pk-cta-band .pk-btn--ghost{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:transparent;color:#fff;border:0;border-radius:999px;
  padding:clamp(12px,1.8vw,18px) clamp(16px,3vw,26px);font-weight:600;font-size:clamp(.92rem,2.6vw,1.85rem);
  margin:0 auto;width:89%;white-space:normal;text-align:center;line-height:1.35;
}
.pk-cta-band .pk-btn--ghost::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;
  background:linear-gradient(90deg,#c6189b,#b01969 42%,#b7602c 74%,#d4772c);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.pk-cta-band .pk-btn--ghost:hover{background:rgba(255,255,255,.045)}
.pk-cta-band__note{margin:clamp(12px,1.6vw,16px) auto 0;color:rgba(255,255,255,.7);font-size:.9rem}
/* Op een telefoon wordt de kicker anders zo breed dat de streepjes ernaast
   wegvallen; met minder letterafstand houden ze hun plek. */
@media (max-width:560px){
  .pk-cta-band p.pk-cta-band__kicker{letter-spacing:.06em;font-size:.72rem}
  .pk-cta-band__kicker::before,.pk-cta-band__kicker::after{width:clamp(16px,9vw,44px)}
  .pk-cta-band__btns{max-width:94%}
}
/* Nog smaller is er echt geen ruimte meer: dan liever helemaal geen streepjes
   dan twee stipjes van een paar pixels. */
@media (max-width:480px){
  .pk-cta-band__kicker::before,.pk-cta-band__kicker::after{display:none}
}

/* ---------- Pagina-hero (subpagina's) ---------- */
.pk-pagehero{background:
   radial-gradient(700px 320px at 85% -30%,rgba(254,72,2,.22),transparent 60%),
   radial-gradient(600px 300px at 5% 0%,rgba(164,20,181,.24),transparent 60%),
   var(--pk-bg);padding:clamp(40px,6vw,72px) 0}
.pk-pagehero--foto{background:
   linear-gradient(90deg,rgba(21,21,21,.93) 0%,rgba(21,21,21,.74) 50%,rgba(21,21,21,.55) 100%),
   var(--hero-img,none) center/cover no-repeat,var(--pk-bg)}
.pk-pagehero--center{text-align:center}
.pk-pagehero--center .pk-pagehero__cta{justify-content:center}
.pk-breadcrumb{font-size:.85rem;color:var(--pk-muted);margin-bottom:1rem}
.pk-breadcrumb a:hover{color:#fff}
.pk-pagehero__title{font-family:var(--pk-head);font-size:clamp(2.4rem,6vw,4rem);text-transform:uppercase;letter-spacing:.01em}
.pk-pagehero__lead{font-size:1.15rem;color:var(--pk-muted);max-width:640px}
.pk-pagehero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.4rem}

/* ---------- Prose / placeholder ---------- */
.pk-prose{max-width:760px}
.pk-soon{background:var(--pk-bg-2);border:1px dashed rgba(255,255,255,.18);border-radius:var(--pk-radius);padding:26px 28px;color:var(--pk-muted)}
.pk-soon strong{color:#fff}

/* ---------- Footer ---------- */
.pk-footer{background:linear-gradient(180deg,#030409,#000);border-top:1px solid #17181d;margin-top:0}
.pk-footer__grid{display:grid;grid-template-columns:1fr 1.07fr 1fr;gap:0;padding:clamp(38px,5vw,58px) 22px clamp(32px,4vw,46px)}
/* Verticale haarlijnen tússen de kolommen — niet ervoor of erna. */
.pk-footer__col + .pk-footer__col{position:relative;padding-left:clamp(22px,4vw,46px)}
.pk-footer__col + .pk-footer__col::before{content:"";position:absolute;left:0;top:0;bottom:18px;width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.055) 10px)}
.pk-footer__col{padding-right:clamp(18px,3vw,38px)}
.pk-footer h3{
  font-family:var(--pk-head);font-size:1.32rem;letter-spacing:.045em;text-transform:uppercase;
  margin:0 0 .35rem;color:#fff;
}
/* Kort verlopend streepje onder elk kopje, precies zoals in het ontwerp. */
.pk-footer h3::after{content:"";display:block;width:58px;height:2px;border-radius:2px;margin-top:.5rem;
  background:linear-gradient(90deg,#b500b5,#fe4802)}
.pk-footer a{color:var(--pk-muted);transition:color .2s}
.pk-footer a:hover{color:#fff}
.pk-footer__slogan{color:#c9c9d2;font-size:.98rem;line-height:1.5;margin:.1rem 0 0;max-width:22ch}
.pk-footer__streep{display:block;width:180px;max-width:100%;height:2px;border-radius:2px;margin:1.15rem 0 1.15rem;
  background:linear-gradient(90deg,#b500b5,#fe4802)}
/* Regel met een icoon ervoor: icoon vast, tekst loopt door onder zichzelf. */
.pk-footer__regel{display:flex;align-items:flex-start;gap:12px;color:#c9c9d2;font-size:.97rem;line-height:1.5;margin:0 0 .85rem}
.pk-footer__regel svg{flex:none;margin-top:2px}
.pk-footer__regel--park{color:var(--pk-yellow)}
.pk-footer__regel--park .pk-footer__pico{flex:none;width:22px;height:22px;border-radius:5px;background:#1877f2;color:#fff;
  display:grid;place-items:center;font:700 13px/1 var(--pk-body);margin-top:1px}
.pk-footer__volg{color:#8a8a93;font-size:.92rem;margin:1.3rem 0 .6rem}
.pk-footer__social{display:flex;gap:27px;margin:0}
.pk-soc{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;position:relative;color:#e0219b}
.pk-soc::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(45deg,#fe4802,#ff2fd6 52%,#b500b5);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.pk-soc:hover{color:#fff}
.pk-soc:hover::before{background:linear-gradient(45deg,#ff6a1e,#ff5ce0 52%,#d926d9)}
.pk-hours{border-collapse:collapse;font-size:.95rem;color:#c9c9d2;width:100%;max-width:270px}
.pk-hours th{text-align:left;font-weight:400;padding:.2rem 1.2rem .2rem 0;white-space:nowrap}
.pk-hours td{text-align:right;color:#e6e6ea;font-variant-numeric:tabular-nums}
.pk-hours__note{font-size:.86rem;color:#8a8a93;margin-top:.9rem;font-style:italic;max-width:24ch}
/* Sierlijn onder de kolommen: gloeit paars aan de ene en oranje aan de andere
   kant, met het X-merk in het midden waar de lijn onderbroken wordt. */
.pk-footer__sier{display:flex;align-items:center;justify-content:center;gap:0;padding:6px 0 4px}
.pk-footer__sier::before,.pk-footer__sier::after{content:"";flex:1;height:2px;min-width:0}
.pk-footer__sier::before{background:linear-gradient(90deg,#c344cf 0%,#ff8bff 5%,#cf44d5 10%,#b026ad 34%,#983296 57%,#5f266d 79%,#431752 100%);
  box-shadow:0 8px 26px rgba(207,68,213,.45)}
.pk-footer__sier::after{background:linear-gradient(90deg,#3e1152 0%,#7b2a6f 22%,#a23b59 45%,#d06924 68%,#ffb428 90%,#b3742d 100%);
  box-shadow:0 8px 26px rgba(255,180,40,.38)}
.pk-footer__x{width:54px;height:54px;margin:0 4px;flex:none}
.pk-footer__bar{border-top:0;background:transparent}
.pk-footer__bar .pk-container{display:flex;flex-wrap:wrap;gap:8px 0;justify-content:center;align-items:center;
  padding-top:60px;padding-bottom:46px;font-size:.86rem;color:#cdcdd3;text-align:center}
.pk-footer__bar a{color:inherit}
.pk-footer__bar nav{display:flex;flex-wrap:wrap;justify-content:center}
/* Staande streepjes tussen de onderdelen, zoals in het ontwerp. Het eerste
   streepje staat vóór "Privacy" en scheidt die van de bedrijfsnaam. */
.pk-footer__bar nav a{position:relative;padding:0 clamp(14px,2vw,26px)}
.pk-footer__bar nav a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:rgba(255,255,255,.16)}
.pk-footer__bar > .pk-container > span{padding-right:clamp(14px,2vw,26px)}

/* ---------- Content-secties (Fase 2) ---------- */
.pk-intro{max-width:820px}
.pk-intro__p{font-size:1.12rem;color:#d9d9e2}
.pk-intro__p:first-of-type{font-size:1.22rem;color:#fff}

/* Pakketten / arrangementen */
.pk-pakketten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;align-items:stretch}
.pk-pakket{display:flex;flex-direction:column;background:var(--pk-bg-3);border:1px solid rgba(255,255,255,.08);border-radius:var(--pk-radius);padding:26px 24px;position:relative;overflow:hidden}
.pk-pakket::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--pk-grad)}
.pk-pakket__naam{font-family:var(--pk-head);font-size:1.6rem;letter-spacing:.02em;text-transform:uppercase;margin-bottom:.15em}
.pk-pakket__prijs{font-family:var(--pk-head);font-size:2.1rem;background:var(--pk-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.pk-pakket__meta{color:var(--pk-muted);font-size:.9rem;margin:.35rem 0 1rem}
.pk-pakket__lijst{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.pk-pakket__lijst li{padding-left:1.6em;position:relative;color:#e2e2ea;font-size:.96rem}
.pk-pakket__lijst li::before{content:"✓";position:absolute;left:0;color:var(--pk-yellow);font-weight:700}
.pk-pakket__btn{margin-top:auto;align-self:flex-start}
.pk-pakketten__note{color:var(--pk-muted);font-size:.92rem;margin-top:1.4rem;max-width:720px}

/* Stappen */
.pk-stappen{list-style:none;counter-reset:stap;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.pk-stap{counter-increment:stap;background:var(--pk-bg-3);border:1px solid rgba(255,255,255,.06);border-radius:var(--pk-radius);padding:24px 22px 22px;position:relative}
.pk-stap::before{content:counter(stap);display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--pk-grad);font-family:var(--pk-head);font-size:1.4rem;margin-bottom:.6rem}
.pk-stap h3{font-family:var(--pk-head);font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase;margin:0 0 .3em}
.pk-stap p{color:var(--pk-muted);font-size:.96rem;margin:0}

/* Beeld + tekst */
.pk-beeldtekst{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}
.pk-beeldtekst--rechts .pk-beeldtekst__media{order:2}
.pk-beeldtekst__body p{color:#d9d9e2}
.pk-media-ph{aspect-ratio:4/3;border-radius:var(--pk-radius);background:var(--pk-grad-soft),var(--pk-bg-3);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:2.4rem;opacity:.8}
.pk-beeldtekst__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--pk-radius);display:block;box-shadow:var(--pk-shadow)}

/* FAQ */
.pk-faq{max-width:820px}
.pk-faq__item{border-bottom:1px solid rgba(255,255,255,.1)}
.pk-faq__item summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;font-weight:600;font-size:1.05rem;position:relative}
.pk-faq__item summary::-webkit-details-marker{display:none}
.pk-faq__item summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:1.5rem;color:var(--pk-yellow);transition:transform .2s}
.pk-faq__item[open] summary::after{content:"–"}
.pk-faq__a{padding:0 0 18px;color:var(--pk-muted)}
.pk-faq__a p{margin:0}

/* Citaat */
.pk-citaat{margin:0;max-width:820px;border-left:4px solid transparent;border-image:var(--pk-grad) 1;padding:6px 0 6px 24px}
.pk-citaat p{font-family:var(--pk-head);font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.01em;line-height:1.2;color:#fff}
.pk-citaat cite{color:var(--pk-yellow);font-style:normal;font-size:.95rem}

/* ---------- Video ---------- */
.pk-video{max-width:960px;border-radius:var(--pk-radius);overflow:hidden;box-shadow:var(--pk-shadow);background:#000;line-height:0}
.pk-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}

/* ---------- Blog ---------- */
.pk-bloglist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.pk-blogcard{display:flex;flex-direction:column;background:var(--pk-bg-3);border:1px solid rgba(255,255,255,.06);border-radius:var(--pk-radius);overflow:hidden;transition:transform .16s,border-color .16s,box-shadow .16s}
.pk-blogcard:hover{transform:translateY(-4px);border-color:rgba(254,72,2,.5);box-shadow:var(--pk-shadow)}
.pk-blogcard__media{display:block;aspect-ratio:4/3;overflow:hidden}
.pk-blogcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.pk-blogcard:hover .pk-blogcard__media img{transform:scale(1.05)}
.pk-blogcard__body{display:flex;flex-direction:column;gap:8px;padding:20px 22px}
.pk-blogcard__title{font-weight:600;font-size:1.12rem;line-height:1.25;color:#fff;margin:0;font-family:inherit;letter-spacing:normal;text-transform:none}
.pk-blogcard__meta{color:var(--pk-muted);font-size:.92rem;flex:1}
.pk-blogcard__more{color:var(--pk-yellow);font-weight:600;font-size:.9rem}
.pk-pagehero__title--blog{font-size:clamp(1.9rem,4.5vw,3rem)}

/* Artikel-opmaak (blog) */
.pk-article{max-width:760px;margin:0 auto;font-size:1.08rem;line-height:1.75;color:#dcdce4}
.pk-article h2{font-family:var(--pk-head);font-size:clamp(1.6rem,3.5vw,2.2rem);text-transform:uppercase;letter-spacing:.02em;color:#fff;margin:1.8em 0 .5em}
.pk-article h3{font-size:1.3rem;font-weight:600;color:#fff;margin:1.5em 0 .4em}
.pk-article p{margin:0 0 1.1em}
.pk-article strong{color:#fff}
.pk-article a{color:var(--pk-yellow);text-decoration:underline;text-underline-offset:2px}
.pk-article ul,.pk-article ol{margin:0 0 1.2em;padding-left:1.3em}
.pk-article li{margin:.35em 0}
.pk-article blockquote{border-left:4px solid var(--pk-magenta);margin:1.2em 0;padding:.3em 0 .3em 1.1em;color:#fff}
.pk-article__fig{margin:1.8em 0}
.pk-article__fig img{width:100%;border-radius:var(--pk-radius);box-shadow:var(--pk-shadow);display:block}
.pk-article__foot{max-width:760px;margin:2.4em auto 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);padding-top:1.6em}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  /* Gestapeld hoort de scheiding horizontaal te zijn, niet verticaal. */
  .pk-footer__grid{grid-template-columns:1fr;gap:30px}
  .pk-footer__col{padding-right:0}
  .pk-footer__col + .pk-footer__col{padding-left:0;border-top:1px solid rgba(255,255,255,.075);padding-top:28px}
  .pk-footer__col + .pk-footer__col::before{display:none}
  .pk-hours{max-width:none}
}
@media (max-width:980px){
  .pk-navtoggle{display:flex}
  .pk-nav{
    position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--pk-bg-2);border-bottom:1px solid rgba(255,255,255,.1);
    padding:12px 22px 22px;transform:translateY(-140%);transition:transform .28s ease;
    max-height:calc(100vh - 68px);overflow:auto;
  }
  .pk-nav.pk-open{transform:translateY(0)}
  .pk-nav ul{flex-direction:column;gap:2px}
  .pk-nav a{display:block;padding:12px 0;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.06)}
}
@media (max-width:720px){
  .pk-beeldtekst{grid-template-columns:1fr;gap:22px}
  .pk-beeldtekst--rechts .pk-beeldtekst__media{order:0}
}
@media (max-width:520px){
  .pk-hero__facts{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* ── Subpagina-secties in homepage-stijl (2 aug 2026) ───────────────────── */
/* Pakket-kaart met eigen accentkleur + "meest gekozen"-badge. */
.pk-pakket{--c:#ee4ed0}
.pk-pakket::after{background:linear-gradient(90deg,var(--c),var(--c))}
.pk-pakket--top{box-shadow:0 0 0 1.5px var(--c),0 0 30px -8px var(--c)}
.pk-pakket__badge{position:absolute;top:14px;right:-34px;transform:rotate(38deg);background:var(--c);color:#0d0d10;
  font-family:var(--pk-head);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 40px;line-height:1.2}
.pk-pakket__btn{margin-top:auto}
/* Opsomming binnen een tekst-sectie. */
.pk-prose__lijst{margin:14px 0 0;padding-left:1.1em;color:var(--pk-muted);line-height:1.7}
.pk-prose__lijst li{margin-bottom:.4em}
/* Een link in de lopende tekst erfde de grijze tekstkleur en had geen
   onderstreping — dus onzichtbaar als link (22 aug 2026, regio-links).

   :not(.pk-btn) is er op 24 aug bijgekomen. Zonder die uitzondering pakte deze
   regel ook de KNOPPEN die middenin een tekstblok staan: een knop heeft al een
   oranje achtergrond, en kreeg hier oranje letters bovenop. Resultaat was een
   leeg oranje pilletje zonder woord erop — gemeten rgb(254,72,2) op
   rgb(254,72,2), op 15 paginas plus alle zes vertalingen.
   Deze selector is specifieker (0,1,2) dan .pk-btn--cta (0,1,0) en won dus. */
.pk-prose p a:not(.pk-btn),.pk-prose__lijst a:not(.pk-btn){color:var(--pk-orange);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pk-prose p a:not(.pk-btn):hover,.pk-prose__lijst a:not(.pk-btn):hover{color:#fff}
/* Score-regel onder losse review-blokken op subpagina's. */
.pk-revsec .pk-score strong{font-family:var(--pk-head);font-size:2.4rem;color:#ffc73a;line-height:1}
.pk-revsec .pk-score span{color:var(--pk-muted);font-size:.9rem}
.pk-sec-knop{text-align:center;margin-top:clamp(22px,3vw,34px)}
.pk-beeldtekst__bron{color:var(--pk-muted);font-size:.85rem;font-style:italic;margin-top:10px}

/* ── Gamekamer-kaarten (alle spelkamers met eigen verhaal) ──────────────── */
.pk-kamerlijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:clamp(14px,1.8vw,22px)}
.pk-kamerkaart{--c:#ee4ed0;position:relative;display:flex;flex-direction:column;overflow:hidden;
  /* De homepage linkt hierheen met #kamer-<naam>; deze marge houdt de kaart
     onder de plakkende koptekst vandaan bij het springen. */
  scroll-margin-top:96px;
  background:linear-gradient(180deg,#151019,#0e0b13);border-radius:16px;
  box-shadow:0 0 0 1.5px var(--c),0 0 26px -10px var(--c);transition:transform .25s ease,box-shadow .25s ease}
.pk-kamerkaart:hover{transform:translateY(-4px);box-shadow:0 0 0 1.5px var(--c),0 0 34px -6px var(--c)}
.pk-kamerkaart__media{aspect-ratio:16/10;overflow:hidden;background:#000}
.pk-kamerkaart__media picture,.pk-kamerkaart__img{display:block;width:100%;height:100%;object-fit:cover}
.pk-kamerkaart__body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px}
.pk-kamerkaart__type{align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c);border:1px solid var(--c);border-radius:999px;padding:4px 10px}
.pk-kamerkaart__naam{font-family:var(--pk-head);font-size:1.5rem;line-height:1.05;letter-spacing:.02em;
  text-transform:uppercase;color:#fff;margin:0}
.pk-kamerkaart__tekst{color:var(--pk-muted);font-size:.92rem;line-height:1.5;margin:0}
.pk-kamerkaart__meta{color:#8b8b96;font-size:.8rem;margin:2px 0 0}
.pk-kamerkaart.is-binnenkort{opacity:.92}
.pk-kamerkaart.is-binnenkort .pk-kamerkaart__naam::after{content:"binnenkort";display:inline-block;vertical-align:middle;
  margin-left:10px;font-family:var(--pk-body,inherit);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:#0d0d10;background:var(--c);border-radius:999px;padding:3px 9px}
@media (max-width:520px){
  .pk-kamerlijst{grid-template-columns:1fr}
  .pk-kamerkaart__naam{font-size:1.25rem}
}

/* ── Ingebouwde boek-/offertemodules (admin/snippets) ───────────────────── */
/* De snippets brengen hun eigen opmaak mee; wij geven ze alleen ademruimte
   en zorgen dat ze binnen de kolom blijven op mobiel. */
.pk-module{margin-top:clamp(18px,2.4vw,30px)}
.pk-module img{max-width:100%;height:auto}
.pk-module input,.pk-module select,.pk-module textarea{max-width:100%}
.pk-modulesec{scroll-margin-top:96px}


/* ============================================================
   Lounge — door Michel gekozen ontwerpen (10 aug):
   desktop = "Bento Luxe" (L2), mobiel = "Accordeon" (M4).
   Titel, tekst, foto's en bandlabels beheerbaar via
   Admin → 🛋️ Lounge (nieuw/content/lounge.json).
   ============================================================ */
/* ---- Desktop: bento-grid ---- */
.pk-lb{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;grid-auto-rows:minmax(170px,auto);
  grid-template-areas:"f1 f1 f1 tx tx tx" "f1 f1 f1 f2 f2 f5" "f3 f3 f4 f4 f4 f5"}
.pk-lb--js .pk-lb__tile{opacity:0;transform:translateY(18px) scale(.985)}
.pk-lb--js .pk-lb__tx{opacity:0;transform:translateY(18px) scale(.985)}
.pk-lb__tile{position:relative;border-radius:20px;overflow:hidden;background:#1c1c1c;
  border:1px solid color-mix(in srgb, var(--c,#ff2fd6) 45%, transparent);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 22px -6px color-mix(in srgb, var(--c,#ff2fd6) 38%, transparent),0 14px 30px rgba(0,0,0,.35);
  transition:opacity .6s ease,transform .6s ease,box-shadow .35s ease}
.pk-lb--js .pk-lb__tile.pk-lb--in,.pk-lb--js .pk-lb__tx.pk-lb--in{opacity:1;transform:none}
.pk-lb__tile:hover{box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 34px -4px color-mix(in srgb, var(--c,#ff2fd6) 60%, transparent),0 18px 36px rgba(0,0,0,.4)}
.pk-lb__tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 26%);mix-blend-mode:soft-light}
.pk-lb__tile picture,.pk-lb__tile img{width:100%;height:100%;display:block}
.pk-lb__tile img{object-fit:cover;transform:scale(1.001);transition:transform .55s ease}
.pk-lb__tile:hover img{transform:scale(1.05)}
.pk-lb__f1{grid-area:f1}.pk-lb__f2{grid-area:f2}.pk-lb__f3{grid-area:f3}.pk-lb__f4{grid-area:f4}.pk-lb__f5{grid-area:f5}
.pk-lb__tx{grid-area:tx;position:relative;border-radius:20px;padding:30px 32px 24px;
  display:flex;flex-direction:column;justify-content:center;border:1px solid transparent;
  background:linear-gradient(160deg,#241a17 0%,#1d1518 55%,#1a1416 100%) padding-box,
             linear-gradient(120deg,rgba(254,72,2,.85) 0%,rgba(255,214,0,.55) 45%,rgba(181,0,181,.75) 100%) border-box;
  box-shadow:0 0 30px -6px rgba(254,72,2,.30),0 0 46px -14px rgba(181,0,181,.28),0 14px 30px rgba(0,0,0,.35);
  transition:opacity .6s ease,transform .6s ease}
.pk-lb__tx.pk-lb--in{opacity:1;transform:none}
.pk-lb__tx::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(360px 160px at 18% 0%,rgba(254,72,2,.16),transparent 70%)}
.pk-lb__tx .pk-skop{margin:0}
.pk-lb__tx .pk-skop__titel{font-size:clamp(1.9rem,3.2vw,2.7rem)}
.pk-lb__tx .pk-skop__lead{color:#d9d4d6;max-width:46ch}
@media (max-width:980px){
  .pk-lb{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);
    grid-template-areas:"tx tx tx tx" "f1 f1 f1 f1" "f2 f2 f5 f5" "f3 f3 f4 f4"}
  .pk-lb__f1{min-height:280px}
  .pk-lb__tx{padding:26px 26px 20px}
}
/* ---- Mobiel: accordeon ---- */
.pk-lacc{display:none}
.pk-lacc__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--pk-yellow);font-weight:600;margin:0 0 10px}
.pk-lacc__eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,#a414b5,#fe4802)}
.pk-lacc__kop{font-family:var(--pk-head);font-size:clamp(2rem,9vw,2.6rem);line-height:1.02;margin:0 0 12px;letter-spacing:.01em;
  background:linear-gradient(54deg,#ff2fd6 8%,#fe4802 60%,#ffd600 105%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#fe4802}
.pk-lacc__tekst{margin:0 0 22px;font-size:.92rem;line-height:1.65;color:var(--pk-muted)}
.pk-lacc__stapel{display:flex;flex-direction:column;gap:10px}
.pk-lacc__band{display:block;width:100%;padding:0;margin:0;border:0;background:#1d1d1d;color:#fff;text-align:left;
  font-family:inherit;cursor:pointer;position:relative;overflow:hidden;height:58px;border-radius:14px;
  border-left:4px solid var(--c,#ff2fd6);
  transition:height .5s cubic-bezier(.33,1,.35,1),box-shadow .3s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pk-lacc__band:focus-visible{outline:2px solid var(--pk-yellow);outline-offset:2px}
.pk-lacc__band.is-open{height:min(64vw,280px);
  box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 22px color-mix(in srgb,var(--c,#ff2fd6) 35%,transparent)}
.pk-lacc__band picture,.pk-lacc__band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pk-lacc__band img{filter:saturate(.65) brightness(.55);transform:scale(1.06);
  transition:filter .5s ease,transform .6s cubic-bezier(.33,1,.35,1)}
.pk-lacc__band.is-open img{filter:saturate(1) brightness(.94);transform:scale(1)}
.pk-lacc__band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(21,21,21,.78) 0%,rgba(21,21,21,.28) 55%,rgba(21,21,21,.55) 100%);transition:opacity .5s ease}
.pk-lacc__band.is-open::after{background:linear-gradient(180deg,rgba(21,21,21,0) 45%,rgba(21,21,21,.72) 100%)}
.pk-lacc__titel{position:absolute;left:16px;top:50%;transform:translateY(-50%);z-index:2;
  font-family:var(--pk-head);font-size:1.5rem;letter-spacing:.34em;line-height:1;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.8);white-space:nowrap;
  transition:top .5s cubic-bezier(.33,1,.35,1),transform .5s cubic-bezier(.33,1,.35,1),font-size .5s ease,letter-spacing .5s ease}
.pk-lacc__band.is-open .pk-lacc__titel{top:calc(100% - 16px);transform:translateY(-100%);font-size:1.9rem;letter-spacing:.16em;
  color:var(--c,#ff2fd6);text-shadow:0 2px 12px rgba(0,0,0,.85),0 0 18px color-mix(in srgb,var(--c,#ff2fd6) 55%,transparent)}
.pk-lacc__plus{position:absolute;right:14px;top:50%;z-index:2;width:26px;height:26px;margin-top:-13px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(21,21,21,.55);
  border:1px solid color-mix(in srgb,var(--c,#ff2fd6) 60%,transparent);color:var(--c,#ff2fd6);
  font-size:1rem;line-height:1;font-weight:600;pointer-events:none;
  transition:transform .45s cubic-bezier(.33,1,.35,1),opacity .3s ease}
.pk-lacc__plus::before{content:"+"}
.pk-lacc__band.is-open .pk-lacc__plus{transform:rotate(45deg)}
.pk-lacc__hint{margin:14px 0 0;text-align:center;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#6f6f78}
@media (max-width:620px){
  .pk-lb{display:none}
  .pk-lacc{display:block}
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pk-lacc__band.is-open{box-shadow:0 14px 34px rgba(0,0,0,.45)}
  .pk-lacc__plus{border-color:var(--c,#ff2fd6)}
}
@media (prefers-reduced-motion: reduce){
  .pk-lb .pk-lb__tile,.pk-lb .pk-lb__tx{opacity:1;transform:none;transition:none}
  .pk-lb__tile img{transition:none}
  .pk-lb__tile:hover img{transform:none}
  .pk-lacc__band,.pk-lacc__band img,.pk-lacc__band::after,.pk-lacc__titel,.pk-lacc__plus{transition:none}
}

/* ---------- Sectiekop (door Michel gekozen, 10 aug) ----------
   Een streepje met een geel labeltje, daaronder de kop met kleurverloop —
   dezelfde opmaak als het lounge-blok op de telefoon. Staat links, want het
   streepje voor het label is een linkse vorm. */
/* De sierpijlen/stippen (.pk-deco) staan met z-index:0 boven gewone tekst en
   liepen daardoor dwars door koppen én alinea's. De hele inhoudskolom hoort
   erboven te staan, niet alleen de kop. */
.pk-section > .pk-container,
.pk-bgsec > .pk-container{position:relative;z-index:1}
.pk-skop{margin:0 0 clamp(20px,2.8vw,32px);position:relative;z-index:1}
.pk-skop__label{display:inline-flex;align-items:center;gap:10px;margin:0 0 10px;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--pk-yellow)}
.pk-skop__label::before{content:"";width:26px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#a414b5,#fe4802)}
.pk-skop__titel{font-family:var(--pk-head);font-size:clamp(2.1rem,5.2vw,3.6rem);line-height:1.02;
  letter-spacing:.01em;text-transform:uppercase;margin:0;
  background:linear-gradient(54deg,#ff2fd6 8%,#fe4802 60%,#ffd600 105%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#fe4802}
.pk-skop__lead{color:var(--pk-muted);margin:14px 0 0;max-width:60ch;
  font-size:clamp(.95rem,1.5vw,1.05rem);line-height:1.65}
.pk-skop__lead strong{color:#fff;font-weight:600}
@media (max-width:620px){
  .pk-skop__titel{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  .pk-skop__label{font-size:.7rem;letter-spacing:.2em}
}
/* Oudere browsers zonder background-clip:text zouden onzichtbare tekst geven. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .pk-skop__titel{background:none;-webkit-text-fill-color:currentColor;color:#fff}
}

/* Merknaam in koppen: "Play" wit, "Kinetix" houdt de kleur van de kop.
   -webkit-text-fill-color is nodig omdat koppen met een kleurverloop hun
   vulling op transparant zetten; alleen 'color' zou daar niets doen. */
.pk-beeldtekst__body .pk-skop{margin-bottom:18px}
.pk-beeldtekst__body .pk-skop__titel{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.pk-breadcrumb--hero{margin:0 0 14px}
.pk-merk-play{color:#fff;-webkit-text-fill-color:#fff}

/* ===== Gamekamer-specificaties (sectietype kamers_specs) =====
   Eén blok per kamer: nummer + naam, dan verhaal en foto naast elkaar, met
   daaronder de harde cijfers als tegels. Op de telefoon stapelt alles. */
.pk-kspec{position:relative;margin:0 0 clamp(20px,3vw,34px);padding:clamp(18px,2.4vw,26px);
  border:1px solid rgba(255,255,255,.10);border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  box-shadow:0 10px 40px rgba(0,0,0,.28);overflow:hidden}
.pk-kspec::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--c,#ff2fd6)}
.pk-kspec.is-binnenkort{opacity:.92}
.pk-kspec__kop{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.pk-kspec__nr{font-family:var(--pk-head);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;
  color:var(--c,#ff2fd6);opacity:.55;min-width:2.2ch}
.pk-kspec__type{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c,#ff2fd6);margin:0 0 2px}
.pk-kspec__naam{font-family:var(--pk-head);font-size:clamp(1.25rem,2.4vw,1.9rem);margin:0;color:#fff;letter-spacing:.02em}
.pk-kspec__badge{margin-left:auto;flex:none;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;padding:5px 11px;border-radius:999px;background:rgba(255,214,0,.14);
  border:1px solid rgba(255,214,0,.45);color:#ffd600}
/* Foto rekt mee met de tekstkolom (wens Michel 15 aug): begint bij de eerste
   tekstregel en eindigt onderaan het "Hier win je mee"-blok. De afbeelding staat
   absoluut, anders zou haar eigen hoogte de rij juist oprekken en bepaalt de
   foto de hoogte in plaats van de tekst. */
.pk-kspec__body{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(14px,2vw,24px);align-items:stretch}
.pk-kspec__media{border-radius:14px;overflow:hidden;background:rgba(0,0,0,.25);position:relative;min-height:240px}
.pk-kspec__img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* Band dwars over de foto voor kamers die nog openen ("Binnenkort — oktober 2026") */
.pk-kspec__lint{position:absolute;left:-8%;right:-8%;top:50%;z-index:2;
  transform:translateY(-50%) rotate(-5deg);text-align:center;padding:10px 6px;
  font-weight:900;font-size:clamp(.78rem,1.3vw,.98rem);letter-spacing:.07em;text-transform:uppercase;
  color:#fff;background:linear-gradient(90deg,#a414b5,#fe4802);box-shadow:0 4px 18px rgba(0,0,0,.45)}
/* Gele markering in lopende tekst ([geel]…[/geel]) — zelfde geel als "gratis parkeren" in de mail */
.pk-geel{background:#fde047;color:#111;padding:0 6px;border-radius:5px;font-weight:800}

/* ---------- Taalkiezer in de menubalk (16 aug) ---------- */
.pk-taal{position:relative;margin-left:14px}
.pk-taal__knop{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#eff0f3;
  border-radius:999px;padding:7px 13px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap}
.pk-taal__knop:hover{border-color:#fe4802}
/* De lijst is een <ul> BINNEN .pk-nav; `.pk-nav ul{display:flex}` (0,1,1) won
   daardoor van `.pk-taal__lijst{display:none}` (0,1,0) en de lijst stond dus
   altijd open als horizontale balk (gemeld door Michel 25 aug). De extra
   `.pk-taal `-voorloper tilt dit naar (0,2,0) zodat dicht echt dicht is. */
.pk-taal .pk-taal__lijst{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:60;list-style:none;margin:0;padding:6px;
  background:#1d1d24;border:1px solid rgba(255,255,255,.12);border-radius:12px;min-width:150px;
  box-shadow:0 14px 40px rgba(0,0,0,.5)}
.pk-taal.is-open .pk-taal__lijst{display:block}
.pk-taal__lijst a{display:block;padding:8px 12px;border-radius:8px;color:#eff0f3;text-decoration:none;font-size:.88rem;text-transform:none}
.pk-taal__lijst a:hover{background:rgba(254,72,2,.15);color:#fff}
.pk-taal__lijst a.is-actief{color:#fe4802;font-weight:800}
@media(max-width:900px){.pk-taal{margin:10px 0 0}.pk-taal__lijst{position:static;margin-top:6px}}

/* ---------- Cadeaubon-bestelformulier — neon-huisstijl (16 aug) ----------
   Buitenkant: neon-gloed zoals de rest van de site. Binnenkant: licht oranje
   met donkere tekst (wens Michel) — warm cadeaugevoel, perfect leesbaar. */
.cbf{background:linear-gradient(160deg,#fff7ee,#ffe9d3);border:1px solid rgba(254,72,2,.35);border-radius:18px;
     padding:clamp(20px,3vw,34px);max-width:680px;margin:0 auto;color:#2a2118;
     box-shadow:0 0 0 1px rgba(255,47,214,.16),0 0 46px rgba(254,72,2,.22),0 18px 50px rgba(0,0,0,.45)}
.cbf h3{font-family:var(--pk-head);font-size:1.3rem;letter-spacing:.03em;text-transform:uppercase;color:#1d1712;margin:24px 0 12px}
.cbf h3:first-child{margin-top:0}
.cbf label{font-size:.92rem;color:#4a3b2c;font-weight:600}
.cbf input[type=text],.cbf input[type=email],.cbf input[type=number],.cbf textarea{
  width:100%;padding:12px;border-radius:10px;border:1px solid #eccdaa;
  background:#fff;color:#1d1712;font-family:inherit;font-size:1rem;box-sizing:border-box;font-weight:500}
.cbf input:focus,.cbf textarea:focus{outline:none;border-color:#fe4802;box-shadow:0 0 0 3px rgba(254,72,2,.20)}
.cbf ::placeholder{color:#b09a82}
.cbf-snellijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin-bottom:14px}
.cbf-snel{padding:14px 6px;background:#fff;border:2px solid #eccdaa;border-radius:10px;
  cursor:pointer;font-weight:800;font-size:1rem;color:#1d1712;font-family:inherit}
.cbf-snel:hover{border-color:#ff2fd6}
.cbf-snel.is-aan{border-color:#fe4802;background:#ffe1c4;box-shadow:0 0 14px rgba(254,72,2,.35)}
.cbf-waarde{font-size:1.6rem !important;font-weight:800;text-align:center}
.cbf-check{display:flex;gap:10px;align-items:center;margin:18px 0;cursor:pointer;font-weight:700;color:#1d1712;font-size:1rem}
.cbf-check input{width:20px;height:20px;accent-color:#fe4802}
.cbf-sub{background:#fff;border:1px solid #eccdaa;border-left:4px solid #fe4802;
  padding:18px;border-radius:12px;margin-bottom:14px}
.cbf-sub h4{margin:0 0 10px;color:#fe4802;font-family:var(--pk-head);letter-spacing:.04em;text-transform:uppercase;font-size:1.05rem}
.cbf-bzlijst{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.cbf-bz{display:flex;gap:12px;align-items:flex-start;padding:14px;border:2px solid #eccdaa;
  border-radius:12px;cursor:pointer;background:#fff}
.cbf-bz strong{color:#1d1712}
.cbf-bz small{color:#7a6a52}
.cbf-bz input{margin-top:4px;accent-color:#fe4802}
.cbf-bz.is-aan{border-color:#fe4802;background:#ffe9d2;box-shadow:0 0 16px rgba(254,72,2,.30)}
.cbf-totaal{display:none;justify-content:space-between;background:#fff;border:1px solid #eccdaa;
  border-radius:10px;padding:13px 16px;margin-bottom:14px;font-weight:800;color:#1d1712}
.cbf-betaal{display:block;width:100%;border:0;cursor:pointer;padding:17px 32px;border-radius:12px;
  font-family:inherit;font-weight:800;font-size:1.08rem;color:#fff;
  background:linear-gradient(90deg,#a414b5,#fe4802);box-shadow:0 8px 26px rgba(254,72,2,.4)}
.cbf-betaal:hover{filter:brightness(1.08)}
.cbf-klein{text-align:center;color:#7a6a52;font-size:.8rem;margin-top:14px}
.cbf-hint{color:#7a6a52;font-size:.8rem;font-weight:500}
.cbf-fout{color:#c2410c;font-weight:700;font-size:.85rem}
.cbf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
@media(max-width:560px){.cbf-grid2{grid-template-columns:1fr}}

/* Zelfde melding, maar dan als eerste regel in de tekstkolom */
.pk-kspec__opent{margin:0 0 10px;padding:7px 13px;border-radius:9px;display:inline-block;
  font-weight:800;font-size:.9rem;color:#fff;
  background:color-mix(in srgb,var(--c,#ff2fd6) 24%,transparent);
  border:1px solid color-mix(in srgb,var(--c,#ff2fd6) 55%,transparent)}
.pk-kspec__lead{margin:0 0 8px;color:#eff0f3;font-size:clamp(.95rem,1.2vw,1.05rem);line-height:1.6}
.pk-kspec__uitleg{margin:0 0 12px;color:#c9cbd6;font-size:.95rem;line-height:1.65}
.pk-kspec__gameskop{margin:12px 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#9aa0b4}
.pk-kspec__games{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 10px;padding:0}
.pk-kspec__games li{font-size:.82rem;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:#eff0f3}
.pk-kspec__tech{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.pk-kspec__tech span{font-size:.74rem;padding:3px 9px;border-radius:6px;color:var(--c,#ff2fd6);
  background:color-mix(in srgb,var(--c,#ff2fd6) 12%,transparent);border:1px solid color-mix(in srgb,var(--c,#ff2fd6) 35%,transparent)}
.pk-kspec__specs{grid-column:1/-1;display:grid;gap:10px;margin:16px 0 0;padding:14px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-top:1px solid rgba(255,255,255,.09)}
.pk-kspec__specs dt{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#9aa0b4;margin:0 0 3px}
.pk-kspec__specs dd{margin:0;font-weight:800;color:#fff;font-size:clamp(.9rem,1.3vw,1.02rem)}
@media (max-width:760px){
  .pk-kspec__body{grid-template-columns:1fr}
  /* Eén kolom: geen tekstkolom naast de foto om hoogte aan te ontlenen,
     dus hier houdt de foto gewoon zijn vaste vorm. position:relative blijft,
     anders verliest de binnenkort-band zijn ankerpunt. */
  .pk-kspec__media{max-width:100%;position:relative;min-height:0}
  .pk-kspec__img{position:static;height:auto;aspect-ratio:4/3}
  .pk-kspec__media--leeg{aspect-ratio:4/3}
  .pk-kspec__badge{margin-left:0;order:3;width:100%;text-align:center}
  .pk-kspec__kop{flex-wrap:wrap}
}
/* "Hier win je mee" — de vaardigheden die een kamer van je vraagt */
.pk-kspec__keys{margin:14px 0 4px;padding:12px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--c,#ff2fd6) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--c,#ff2fd6) 28%,transparent)}
.pk-kspec__keyskop{margin:0 0 8px;font-size:.72rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c,#ff2fd6)}
.pk-kspec__keys ul{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:0;padding:0}
.pk-kspec__keys li{position:relative;padding-left:20px;font-size:.9rem;font-weight:700;color:#fff}
.pk-kspec__keys li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;
  border-radius:50%;background:var(--c,#ff2fd6);box-shadow:0 0 10px var(--c,#ff2fd6)}
/* Plaatshouder zolang er nog geen kamerfoto is geüpload */
/* Geen vaste verhouding meer op desktop: de plaatshouder rekt mee met de tekst,
   net als een echte foto (op mobiel krijgt hij zijn 4:3 terug, zie media query). */
.pk-kspec__media--leeg{display:grid;place-items:center;position:relative;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c,#ff2fd6) 22%,#12121c),#0d0d14);
  border:1px dashed color-mix(in srgb,var(--c,#ff2fd6) 40%,transparent)}
.pk-kspec__plh{font-family:var(--pk-head);font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;
  color:var(--c,#ff2fd6);opacity:.75;text-shadow:0 0 24px color-mix(in srgb,var(--c,#ff2fd6) 60%,transparent)}
.pk-kspec__plhtxt{position:absolute;bottom:10px;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8b90a4}

/* ===== "Wat ze trainen" — vaardigheden uit de gamekamers (sectietype vaardigheden) ===== */
.pk-vaardig__grid{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.pk-vaardig__kaart{position:relative;padding:20px 18px 16px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10);transition:transform .18s,border-color .18s}
.pk-vaardig__kaart:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c,#ff2fd6) 55%,transparent)}
.pk-vaardig__ico{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;
  font-size:1.4rem;margin:0 0 12px;
  background:color-mix(in srgb,var(--c,#ff2fd6) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--c,#ff2fd6) 38%,transparent)}
.pk-vaardig__naam{font-family:var(--pk-head);font-size:1.05rem;margin:0 0 6px;color:#fff;letter-spacing:.01em}
.pk-vaardig__txt{margin:0 0 10px;font-size:.9rem;line-height:1.55;color:#c9cbd6}
.pk-vaardig__tel{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c,#ff2fd6)}

/* ---------- Partnerblok (Runderkamp-catering) ----------
   Koptekst staat links boven, zoals elke andere sectie; daaronder de foto
   naast de tekst met het logo van de partner. Zo blijft het herkenbaar
   PlayKinetix, terwijl duidelijk is dat het om een échte partner gaat. */
.pk-partner{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(22px,4vw,48px);align-items:center;margin-top:clamp(18px,2.6vw,30px)}
.pk-partner__beeld{position:relative;border-radius:18px;
  box-shadow:0 0 0 1.5px rgba(254,106,2,.45),0 0 40px -12px rgba(254,106,2,.55)}
.pk-partner__beeld img,.pk-partner__beeld picture img{display:block;width:100%;height:auto;border-radius:18px}
/* Fotoreeks: alle dia's liggen op elkaar, alleen de actieve is zichtbaar.
   De eerste bepaalt de hoogte van het vak, de rest zweeft eroverheen — zo
   springt de pagina niet bij het wisselen. */
.pk-partner__beeld--reeks .pk-partner__dia{transition:opacity .9s ease}
.pk-partner__beeld--reeks .pk-partner__dia:not(:first-child){position:absolute;inset:0}
.pk-partner__beeld--reeks .pk-partner__dia:not(.is-aan){opacity:0;pointer-events:none}
.pk-partner__beeld--reeks .pk-partner__dia.is-aan{opacity:1}
/* De dia's 2 en verder liggen absoluut over de eerste heen. Zonder hoogte op
   de <picture> blijft de foto op 0 px staan — vandaar een leeg kader. */
.pk-partner__beeld--reeks .pk-partner__dia:not(:first-child),
.pk-partner__beeld--reeks .pk-partner__dia:not(:first-child) picture{display:block;width:100%;height:100%}
.pk-partner__beeld--reeks .pk-partner__dia:not(:first-child) img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){
  .pk-partner__beeld--reeks .pk-partner__dia{transition:none}
}
.pk-partner__logo{display:block;height:auto;width:clamp(150px,17vw,200px);margin:0 0 14px;opacity:.95}
.pk-partner__kop{font-family:var(--pk-head);font-size:clamp(1.5rem,3vw,2.1rem);text-transform:uppercase;
  letter-spacing:.02em;margin:0 0 12px;
  background:var(--pk-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pk-partner__body p{color:var(--pk-muted);line-height:1.65;margin:0 0 14px}
.pk-partner__body strong{color:#fff}
.pk-partner__lijst{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px}
.pk-partner__lijst li{position:relative;padding-left:26px;color:var(--pk-muted)}
.pk-partner__lijst li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;
  background:var(--pk-grad);box-shadow:0 0 10px rgba(254,106,2,.65)}
@media (max-width:900px){
  .pk-partner{grid-template-columns:1fr;gap:22px}
}

/* ---------- Referenties: "deze bedrijven gingen jullie voor" (25 aug) ----------
   Neon-kaarten in de huisstijl (zelfde verlopende rand als de hero-pillen):
   donkere kaart met gradient-rand, en het logo op een wit "schermpje" — want
   bedrijfslogo's zijn voor een lichte ondergrond ontworpen en vallen op donker
   anders weg. Naam in de display-letter, soort als standaard-chipje. */
.pk-refs{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.8vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));max-width:960px}
.pk-refs__item{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;
  gap:10px;padding:14px 14px 16px;border-radius:18px;
  border:2px solid transparent;
  background:linear-gradient(#15151c,#15151c) padding-box,var(--pk-chip-rand) border-box;
  box-shadow:0 0 40px -22px rgba(200,31,206,.6);
  transition:transform .18s ease,box-shadow .18s ease}
.pk-refs__item:hover{transform:translateY(-4px);box-shadow:0 14px 40px -12px rgba(254,72,2,.5)}
.pk-refs__logo{display:flex;align-items:center;justify-content:center;width:100%;height:88px;
  background:#fff;border-radius:10px;padding:12px 16px}
.pk-refs__logo img{max-width:100%;max-height:100%;object-fit:contain}
.pk-refs__logo--tekst{color:#15151b;font-family:var(--pk-head);font-weight:800;
  font-size:clamp(.95rem,1.4vw,1.15rem);text-transform:uppercase;letter-spacing:.03em;line-height:1.15}
.pk-refs__naam{font-family:var(--pk-head);font-weight:700;font-size:.9rem;color:#fff;
  text-transform:uppercase;letter-spacing:.06em;line-height:1.2;margin-top:2px}
.pk-refs__soort{font-size:.66rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;border-radius:999px;padding:3px 12px;
  border:2px solid transparent;
  background:linear-gradient(var(--pk-chip-vulling),var(--pk-chip-vulling)) padding-box,
             var(--pk-chip-rand) border-box}
@media (max-width:640px){
  .pk-refs{grid-template-columns:repeat(2,1fr)}
  .pk-refs__item{padding:10px 10px 12px;gap:8px}
  .pk-refs__logo{height:74px;padding:10px 12px}
  .pk-refs__naam{font-size:.78rem}
}
/* Bij meer dan 4 bedrijven wordt het een doorlopende band (zelfde truc als
   .pk-marquee): de lijst staat er twee keer in, de track schuift -50% en elke
   lijst draagt de tussenruimte als margin — zo sluit de herhaling naadloos. */
.pk-refs-band{overflow:hidden;max-width:960px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pk-refs-band__track{display:flex;width:max-content;
  animation:pk-refs-loop var(--pk-refs-duur,40s) linear infinite;will-change:transform}
.pk-refs.pk-refs--band{display:flex;flex-shrink:0;gap:20px;margin-right:20px;max-width:none}
.pk-refs--band .pk-refs__item{width:210px;flex-shrink:0}
@keyframes pk-refs-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pk-refs-band:hover .pk-refs-band__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .pk-refs-band__track{animation:none}
  .pk-refs-band{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .pk-refs-band__track > ul[aria-hidden="true"]{display:none}
}
@media (max-width:640px){
  .pk-refs--band .pk-refs__item{width:170px}
}

/* ---------- Offerte-aanvraagformulier ----------
   Alles op één pagina in vier blokken. Elk blok heeft een neonrand die de
   merkkleuren doorloopt (Michels wens: "de omlijsting is niet bijzonder, wij
   gebruiken neon kleuren") in plaats van een grijs lijntje. De rand is een
   verlopende laag die met een masker alleen de omtrek overhoudt. */
.pk-off{margin-top:clamp(16px,2.4vw,26px)}
.pk-off__blok{position:relative;border:0;border-radius:18px;margin:0 0 18px;
  padding:clamp(20px,2.8vw,30px) clamp(16px,2.6vw,28px);
  background:rgba(6,4,10,.55)}
.pk-off__blok::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;
  background:linear-gradient(115deg,#ff2fd6,#b500b5 22%,#7b2ff7 42%,#4f7dff 58%,#fe4802 82%,#ffd600);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.75}
.pk-off__blok::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:0 0 30px -10px rgba(255,47,214,.4),0 0 46px -18px rgba(254,72,2,.3)}
.pk-off__blok legend{display:flex;align-items:center;gap:11px;padding:0 10px;
  font-family:var(--pk-head);font-size:1.28rem;letter-spacing:.03em;text-transform:uppercase;color:#fff}
.pk-off__nr{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;
  font:700 .82rem/1 var(--pk-body);background:var(--pk-grad);color:#fff;
  box-shadow:0 0 14px -3px rgba(254,72,2,.8)}

/* Keuzekaarten */
.pk-off__inp{position:absolute;opacity:0;width:1px;height:1px}
.pk-off__kaarten{display:flex;flex-wrap:wrap;gap:12px}
.pk-off__kaart{flex:1 1 150px;cursor:pointer;text-align:center;border-radius:14px;padding:16px 10px 14px;
  background:linear-gradient(180deg,#151019,#0e0b13);box-shadow:0 0 0 1.4px rgba(255,255,255,.14);
  transition:box-shadow .22s ease,transform .22s ease}
.pk-off__kaarten--duo .pk-off__kaart{flex:1 1 240px;padding:22px 16px 20px}
.pk-off__kaart:hover{transform:translateY(-3px)}
.pk-off__ico{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 10px;border-radius:50%;font-size:1.25rem;
  background:radial-gradient(circle at 35% 28%,var(--uf,rgba(255,255,255,.12)),transparent 72%);
  box-shadow:0 0 0 1.4px var(--u,#b500b5),0 0 16px -5px var(--ug,rgba(180,0,181,.6))}
.pk-off__titel{display:block;font-family:var(--pk-head);font-size:1.04rem;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.pk-off__sub{display:block;margin-top:5px;font-size:.78rem;line-height:1.4;color:var(--pk-muted)}
.pk-off__inp:checked + .pk-off__kaart{box-shadow:0 0 0 2.2px var(--u,#b500b5),0 0 28px -6px var(--ug,rgba(180,0,181,.75))}
.pk-off__inp:focus-visible + .pk-off__kaart{outline:2px solid #fff;outline-offset:3px}

/* Pillen */
.pk-off__pills{display:flex;flex-wrap:wrap;gap:9px}
.pk-off__pill{cursor:pointer;padding:8px 15px;border-radius:999px;font-size:.88rem;color:#c9c9d2;
  border:1.4px solid rgba(255,255,255,.2);transition:all .18s ease}
.pk-off__pill:hover{color:#fff;border-color:rgba(255,255,255,.45)}
.pk-off__inp:checked + .pk-off__pill{color:#fff;border-color:transparent;background:var(--pk-grad);font-weight:600;
  box-shadow:0 0 16px -5px rgba(254,72,2,.8)}
.pk-off__inp:focus-visible + .pk-off__pill{outline:2px solid #fff;outline-offset:2px}

/* Invulvelden */
.pk-off__velden{display:grid;gap:14px;margin:6px 0 4px}
.pk-off__velden--2{grid-template-columns:repeat(2,1fr)}
.pk-off__velden--3{grid-template-columns:repeat(3,1fr)}
.pk-off__velden label,.pk-off__vol{display:flex;flex-direction:column;gap:6px;font-size:.86rem;font-weight:600;color:#c9c9d2}
.pk-off__vol{margin-top:14px}
.pk-off input[type=text],.pk-off input[type=email],.pk-off input[type=tel],.pk-off input[type=date],
.pk-off input[type=number],.pk-off select,.pk-off textarea{
  padding:11px 13px;border-radius:9px;border:1.4px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.045);color:#fff;font:inherit;font-size:.95rem;font-weight:400}
.pk-off input:focus,.pk-off select:focus,.pk-off textarea:focus{
  outline:0;border-color:#fe4802;box-shadow:0 0 0 3px rgba(254,72,2,.22)}
.pk-off select option{background:#12101a;color:#fff}
.pk-off__ster{color:#fe6a02}
.pk-off__sublabel{margin:16px 0 8px;font-size:.86rem;font-weight:600;color:#c9c9d2}
.pk-off__vervolg{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.pk-off__verstuur{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.pk-off__belofte{margin:0;color:#8a8a93;font-size:.84rem}
.pk-off__melding{margin-top:16px;padding:16px 18px;border-radius:12px;font-size:.92rem;line-height:1.6}
.pk-off__melding--ok{border:1.6px solid #52e252;background:rgba(82,226,82,.08);color:#e2f2e2}
.pk-off__melding--fout{border:1.6px solid #ff2d3a;background:rgba(255,45,58,.08);color:#ffdfe1}
.pk-off__melding b{color:#fff}
@media (max-width:900px){ .pk-off__velden--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){
  .pk-off__velden--2,.pk-off__velden--3{grid-template-columns:1fr}
  .pk-off__kaart{flex-basis:calc(50% - 6px)}
  .pk-off__kaarten--duo .pk-off__kaart{flex-basis:100%}
}

/* ============================================================
   TICKETSHOP-POPUP
   De shop opent in een overlay in plaats van als losse pagina
   (wens Michel 20 aug 2026, zoals op www.playkinetix.nl).
   Mobiel schermvullend, op een groter scherm een venster.
   ============================================================ */
.pk-shop{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,6,14,.84);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .2s ease;
}
.pk-shop.is-open{opacity:1}
.pk-shop[hidden]{display:none}

.pk-shop__venster{
  position:relative; display:flex; flex-direction:column;
  width:100%; max-width:720px; height:100%; max-height:100%;
  background:var(--pk-bg,#151515); overflow:hidden;
}
@media (min-width:760px){
  .pk-shop{padding:26px}
  .pk-shop__venster{
    height:auto; max-height:92vh;
    border-radius:var(--pk-radius,16px);
    box-shadow:0 26px 80px rgba(0,0,0,.6);
  }
}

/* Donkere balk met het paars-oranje verloop alleen in de letters en als dun
   streepje eronder (keuze Michel, 21 aug). Het verloop over de volle breedte
   uitrekken week af van de rest van de site: daar is het altijd een accent —
   een lijn van 2-4px (.pk-nav a::after, .pk-pakket::after), het logo
   (.pk-logo__kx) of een bolletje (.pk-stap::before) — nooit een groot vlak. */
.pk-shop__balk{
  position:relative;
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; padding-top:calc(13px + env(safe-area-inset-top));
  background:rgba(21,21,21,.97);
  color:#fff;
}
.pk-shop__balk::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--pk-grad,linear-gradient(54deg,#a414b5 12%,#fe4802 84%));
}
.pk-shop__titel{
  font-family:var(--pk-head,"Bebas Neue",Impact,sans-serif);
  font-size:1.45rem; letter-spacing:.04em; line-height:1; text-transform:uppercase;
  /* Wit staat er eerst als terugval: een browser zonder background-clip:text
     toont dan gewone witte letters in plaats van niets. */
  color:#fff;
  background:var(--pk-grad,linear-gradient(54deg,#a414b5 12%,#fe4802 84%));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pk-shop__sluit{
  flex:0 0 auto; width:40px; height:40px; border:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  /* Lichte knop, want de balk is nu donker (was rgba(0,0,0,.28) op kleur). */
  background:rgba(255,255,255,.13); color:#fff; font-size:1rem; line-height:1;
  cursor:pointer; transition:background .15s; touch-action:manipulation;
}
.pk-shop__sluit:hover{background:rgba(255,255,255,.26)}
.pk-shop__sluit:focus-visible{outline:3px solid #fff; outline-offset:2px}

.pk-shop__body{
  flex:1 1 auto; position:relative; overflow-y:auto;
  -webkit-overflow-scrolling:touch; background:var(--pk-bg,#151515);
}
.pk-shop__frame{
  display:block; width:100%; height:100%; min-height:70vh; border:0;
  background:var(--pk-bg,#151515);
}
@media (min-width:760px){ .pk-shop__frame{min-height:560px} }

.pk-shop__laden{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:var(--pk-bg,#151515); color:var(--pk-muted,#b9b9c2); font-weight:600;
}
.pk-shop__spin{
  width:40px; height:40px; border-radius:50%;
  border:4px solid rgba(255,255,255,.14); border-top-color:var(--pk-orange,#fe4802);
  animation:pk-shop-spin .8s linear infinite;
}
@keyframes pk-shop-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .pk-shop{transition:none}
  .pk-shop__spin{animation-duration:2.4s}
}

/* Achtergrond niet mee laten scrollen zolang de shop openstaat */
body.pk-shop-open{overflow:hidden}