/* galaxyworld.news: websitethema (v5). Zelfde beeldtaal als galaxystudios.com en galaxyexperiences.be:
   zwevende glazen kopbalk, brede koppen (loos-wide), foto's met tekst en knop erover op een verloop,
   glazen omlijnde knoppen met de pijl rechts, lichte achtergrond #FCFCFC. Formulieren blijven wit en groot leesbaar.
   Laadt na de paginastijlen en overschrijft het donkere thema. */

:root, body, body.studios, body.experiences {
  --bg: #FCFCFC !important; --bg-soft: #ffffff !important; --text: #111111 !important; --muted: #4F4A45 !important; --dim: #6B635C !important;
  --line: #E7E4E0 !important; --line-2: #D4CFC9 !important; --line-focus: var(--gw-pop-2) !important; --lavender: var(--gw-pop-2) !important;
  --ink: #111111; --card: #ffffff;
  --head: "loos-wide", "Archivo", "Arial Black", sans-serif;
  --body: "avenir-lt-pro", "Figtree", "Avenir Next", "Avenir", Arial, sans-serif;
  --glass: rgba(255,255,255,.08); --glass-line: rgba(255,255,255,.55);
  --shade: linear-gradient(to top, rgba(8,6,12,.92) 0%, rgba(8,6,12,.72) 38%, rgba(8,6,12,.25) 72%, rgba(8,6,12,.05) 100%);
}
body.studios, body { --gw-pop: #9A5BE0; --gw-pop-2: #6A2FB0; --gw-tint: #F3ECFC; --gw-glow: rgba(132,71,199,.45); }
body.experiences { --gw-pop: #F06A2E; --gw-pop-2: #DF5124; --gw-tint: #FDEDE6; --gw-glow: rgba(240,90,36,.5); --red: #DF5124 !important; --red-light: #B53C24 !important; }
html, html:has(body.experiences), body, body.experiences { background: var(--bg) !important; color: var(--ink) !important; }
body { font-size: 17px; font-family: var(--body) !important; -webkit-font-smoothing: antialiased; }
.page { font-family: var(--body) !important; }
.page :is(h1, h2, h3, .cta, .submit, .gw-next, .hc-cta, .ne-cta, .pc-cta, .submit-mini) { font-family: var(--head) !important; font-stretch: 125%; }

/* alle tekst donker; daarna de uitzonderingen */
.page, .page * { color: var(--ink) !important; text-shadow: none !important; }
.page :is(p, .sub, .hint, .legal, .opt, .pc-meta, .k, .gw-done p, .gdpr span) { color: var(--muted) !important; }
.page a:not(.cta):not(.door):not(.hero-cta):not(.past-card):not(.next-event):not(.back-link):not(.gw-lang a):not(.gw-site) { color: var(--gw-pop-2) !important; text-decoration: underline; }

/* ---------- kop: zwevende glazen balk zoals op de websites ---------- */
header.top, .portal-top {
  position: sticky !important; top: 12px; z-index: 30; margin: 12px clamp(12px, 2vw, 24px) 0 !important; padding: 14px clamp(16px, 2.4vw, 28px) !important;
  background: rgba(255,255,255,.62) !important; -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(17,17,17,.07) !important; border-radius: 12px !important; box-shadow: 0 10px 30px -20px rgba(17,17,17,.35); }
.portal-logo, header.top img, .top img, img[src*="g-exp-logo"] { filter: brightness(0) !important; }
.back-link { font-family: var(--body) !important; color: var(--ink) !important; font-size: 14px !important; letter-spacing: .2px !important; text-transform: none !important; font-weight: 600 !important;
  padding: 9px 14px; border-radius: 10px; transition: background .15s, color .15s; }
.back-link:hover { background: var(--gw-pop-2); color: #fff !important; }
.gw-lang { border: 1px solid rgba(17,17,17,.14) !important; background: rgba(255,255,255,.7) !important; border-radius: 10px !important; }
.gw-lang a { font-family: var(--body) !important; color: var(--ink) !important; border-radius: 8px !important; font-size: 12px !important; letter-spacing: 1.5px !important; text-decoration: none !important; }
.page .gw-lang a[aria-current="true"] { background: var(--ink) !important; color: #fff !important; }
.page .gw-lang a:hover { background: var(--gw-pop-2) !important; color: #fff !important; }

/* ---------- titels ---------- */
.quiz { padding-top: 56px !important; padding-bottom: 36px !important; }
.quiz h1 { color: var(--ink) !important; font-size: clamp(34px, 5.2vw, 72px) !important; font-weight: 600 !important; letter-spacing: -.5px !important; line-height: 1.02 !important; }
.quiz .sub { color: var(--muted) !important; font-size: 19px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important; line-height: 1.5 !important; max-width: 60ch !important; }

/* titel als beeld (formulierpagina's): foto, verloop, glazen paneel met de tekst erin */
.quiz.gw-hero { position: relative; margin: 18px clamp(12px, 2vw, 24px) 0 !important; padding: clamp(150px, 22vw, 260px) clamp(16px, 3vw, 40px) clamp(18px, 3vw, 36px) !important;
  border-radius: 14px; overflow: hidden; background: #120d18 var(--hero) center/cover no-repeat; text-align: left !important; display: flex; flex-direction: column; align-items: flex-start; }
.quiz.gw-hero::before { content: ""; position: absolute; inset: 0; background: var(--shade); }
.quiz.gw-hero > * { position: relative; }
.quiz.gw-hero h1, .quiz.gw-hero .sub { color: #fff !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
.quiz.gw-hero .sub { color: rgba(255,255,255,.9) !important; }
.quiz.gw-hero .gw-glass { padding: clamp(18px, 2.6vw, 30px); border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 900px; }
.quiz.gw-hero .gw-glass > :last-child { margin-bottom: 0 !important; }

/* ---------- deuren: foto vult de kaart, tekst en knop erover op een verloop, glazen paneel ---------- */
.doors { gap: clamp(14px, 2vw, 22px) !important; }
.door { position: relative !important; overflow: hidden !important; background: #120d18 !important; border: 1px solid rgba(17,17,17,.08) !important; border-radius: 14px !important;
  padding: 0 !important; min-height: clamp(420px, 46vw, 560px) !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important;
  box-shadow: 0 18px 50px -30px rgba(17,17,17,.55); filter: none !important; isolation: isolate; }
.door::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: var(--shade) !important; opacity: 1 !important; border: 0 !important; }
.door::after { display: none !important; }
.door .photo { position: absolute !important; inset: 0 !important; height: auto !important; z-index: 0 !important; border-radius: 0 !important; background-size: cover !important; background-position: center !important;
  filter: saturate(1.06) contrast(1.04) !important; transform: scale(1.001); transition: transform .9s cubic-bezier(.2,.7,.2,1) !important; }
.door .content { position: relative !important; z-index: 2 !important; margin: 14px !important; padding: clamp(18px, 2.2vw, 28px) !important; max-width: none !important; border-radius: 12px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.door h2 { color: #fff !important; font-size: clamp(24px, 2.3vw, 34px) !important; font-weight: 600 !important; line-height: 1.08 !important; margin-bottom: 10px !important; }
.door p { color: rgba(255,255,255,.9) !important; font-size: 17px !important; line-height: 1.55 !important; margin-bottom: 20px !important; max-width: 52ch !important; }
.doors:has(.door:hover) .door { filter: none !important; }
.door:hover { transform: translateY(-4px) !important; border-color: var(--gw-pop) !important; box-shadow: 0 0 0 3px var(--gw-pop), 0 30px 70px -28px var(--gw-glow) !important; }
.door:hover .photo { transform: scale(1.05); }

/* ---------- knoppen zoals op de websites: glas, witte rand, tekst links, pijl rechts ---------- */
.cta, .hc-cta, .ne-cta, .pc-cta {
  position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important;
  background: rgba(255,255,255,.08) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.7) !important; border-radius: 12px !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 17px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
  padding: 15px 60px 15px 22px !important; min-height: 54px; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s !important; }
.cta::after, .hc-cta::after, .ne-cta::after, .pc-cta::after { content: "→" !important; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-family: var(--body); font-size: 20px; transition: right .2s; display: block !important; background: none !important; width: auto !important; height: auto !important; border: 0 !important; }
.cta svg, .hc-cta svg, .ne-cta svg, .pc-cta svg { display: none !important; }
.cta *, .hc-cta *, .ne-cta *, .pc-cta * { color: #fff !important; }
.door:hover .cta, .hero-cta:hover .hc-cta, .next-event:hover .ne-cta, .past-card:hover .pc-cta, .cta:hover {
  background: var(--gw-pop-2) !important; border-color: var(--gw-pop-2) !important; color: #fff !important; box-shadow: 0 14px 34px -12px var(--gw-glow) !important; }
.door:hover .cta::after, .hero-cta:hover .hc-cta::after, .past-card:hover .pc-cta::after { right: 16px; }

/* versturen en volgende: effen zwart zoals "Contact opnemen", fel merkkleur bij hover */
.submit, .gw-next, .submit-mini {
  position: relative; background: #111 !important; color: #fff !important; border: 1px solid #111 !important; border-radius: 12px !important;
  font-size: 17px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
  padding: 16px 60px 16px 24px !important; min-height: 56px; backdrop-filter: none !important; text-align: left; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; }
.submit::after, .gw-next::after { content: "→"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-family: var(--body); font-size: 20px; }
.submit svg, .gw-next svg { display: none !important; }
.submit *, .gw-next * { color: #fff !important; }
.submit:hover, .gw-next:hover, .submit-mini:hover { background: var(--gw-pop-2) !important; border-color: var(--gw-pop-2) !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 16px 36px -14px var(--gw-glow) !important; }
.submit:disabled { opacity: .7; cursor: progress; }

/* ---------- LIVE-kaarten: ook foto met tekst erover ---------- */
.hero-cta { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; overflow: hidden !important; isolation: isolate;
  min-height: clamp(420px, 44vw, 560px) !important; background: #120d18 !important; border: 1px solid rgba(17,17,17,.08) !important; border-radius: 14px !important; grid-template-columns: none !important; }
.hero-cta .hc-photo { position: absolute !important; inset: 0 !important; height: auto !important; min-height: 0 !important; z-index: 0; }
.hero-cta .hc-photo .img { position: absolute !important; inset: 0 !important; background-size: cover !important; background-position: center !important; transition: transform .9s cubic-bezier(.2,.7,.2,1) !important; }
.hero-cta:hover .hc-photo .img { transform: scale(1.05); }
.hero-cta .hc-photo::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; background: var(--shade) !important; }
.hero-cta .hc-body { position: relative !important; z-index: 2; background: rgba(0,0,0,.28) !important; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; margin: 14px; padding: clamp(18px, 2.4vw, 30px) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 760px; }
.hero-cta .hc-body * { color: #fff !important; }
.hero-cta .hc-body p, .hero-cta .hc-body .k { color: rgba(255,255,255,.85) !important; }
.hero-cta h3 { font-size: clamp(26px, 2.8vw, 40px) !important; font-weight: 600 !important; line-height: 1.06 !important; }
.hero-cta:hover, .past-card:hover, .next-event:hover { transform: translateY(-4px) !important; border-color: var(--gw-pop) !important; box-shadow: 0 0 0 3px var(--gw-pop), 0 30px 70px -28px var(--gw-glow) !important; }
.past-card, .next-event, .open-card { background: #111 !important; border: 1px solid #111 !important; border-radius: 14px !important; }
.past-card *, .next-event * { color: #fff !important; }
.past-card .pc-meta, .past-card .pc-meta * { color: rgba(255,255,255,.75) !important; }
.pc-body, .ne-body { background: transparent !important; }
.section-head h2 { font-size: clamp(24px, 2.4vw, 34px) !important; font-weight: 600 !important; }

/* ---------- formulieren: wit, ruim, groot leesbaar ---------- */
.form-wrap, .form-body { color: var(--ink) !important; }
.form-body { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 3vw, 36px) !important; box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 24px 50px -32px rgba(17,17,17,.35); }
.quiz.gw-hero + .form-wrap, .quiz.gw-hero + section { margin-top: -28px !important; position: relative; z-index: 3; }
.field label, .field > label, .field-label { color: var(--ink) !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 600 !important; }
.req { color: var(--gw-pop-2) !important; }
.input, .textarea, .select, .page input[type="text"], .page input[type="email"], .page input[type="tel"], .page input[type="url"], .page input[type="date"], .page input[type="number"], .page select, .page textarea {
  background: #fff !important; color: var(--ink) !important; border: 1.5px solid var(--line-2) !important; border-radius: 12px !important; font-size: 17px !important; min-height: 52px; font-family: var(--body) !important; }
.input::placeholder, .textarea::placeholder { color: #8C847D !important; }
.input:hover, .textarea:hover, .select:hover { border-color: #A8A099 !important; }
.input:focus, .textarea:focus, .select:focus, .page input:focus, .page select:focus, .page textarea:focus { border-color: var(--gw-pop) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gw-pop) 22%, transparent) !important; outline: 0 !important; }
.page select option { background: #fff !important; color: var(--ink) !important; }
.choices label, .seg label { background: #fff !important; border: 1.5px solid var(--line-2) !important; border-radius: 12px !important; color: var(--ink) !important; font-size: 16px !important; padding: 12px 16px !important; font-family: var(--body) !important; }
.choices label *, .seg label * { color: inherit !important; }
.choices label:hover, .seg label:hover { border-color: var(--gw-pop) !important; background: var(--gw-tint) !important; color: var(--ink) !important; }
.choices label:has(input:checked), .seg label:has(input:checked) { background: var(--gw-pop-2) !important; border-color: var(--gw-pop-2) !important; color: #fff !important; box-shadow: 0 10px 24px -12px var(--gw-glow) !important; }
.choices label:has(input:checked) *, .seg label:has(input:checked) * { color: #fff !important; }
.seg { background: transparent !important; border: 0 !important; gap: 8px; flex-wrap: wrap; }
.gdpr { color: var(--muted) !important; }
.gdpr input { accent-color: var(--gw-pop-2); width: 20px; height: 20px; }
.info-callout, .form-body > div[style*="grid-template-columns"], .gw-step > div[style*="grid-template-columns"] { background: var(--gw-tint) !important; border-color: transparent !important; border-radius: 12px !important; }
.gw-steps { color: var(--gw-pop-2) !important; font-size: 13px !important; font-family: var(--body) !important; }
.gw-back { color: var(--gw-pop-2) !important; font-family: var(--body) !important; font-size: 15px !important; }
.gw-msg { color: #B42318 !important; }
.gw-done h3 { color: var(--ink) !important; }

/* ---------- voet ---------- */
footer.bottom { color: var(--muted) !important; border-top: 1px solid var(--line) !important; background: transparent; font-size: 13px !important; font-family: var(--body) !important; }
footer.bottom * { color: var(--muted) !important; text-decoration: none !important; }
footer.bottom a:hover { color: var(--gw-pop-2) !important; }

/* ---------- cookiebanner: glas zoals op de websites ---------- */
.gw-consent { background: rgba(17,17,17,.82) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 12px !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 30px 70px -24px rgba(17,17,17,.6) !important; font-family: var(--body) !important; font-size: 15px !important; }
.gw-consent * { color: #fff !important; }
.gw-c-btns a { color: #fff !important; text-decoration: underline; }
.gw-c-btns button { border-radius: 10px !important; border: 1px solid rgba(255,255,255,.6) !important; background: transparent !important; font-family: var(--body) !important; font-size: 14px !important; padding: 11px 18px !important; }
.gw-c-btns button:hover { background: rgba(255,255,255,.14) !important; }
.gw-c-btns .gw-yes { background: #fff !important; border-color: #fff !important; color: #111 !important; }
.gw-c-btns .gw-yes:hover { background: var(--gw-pop) !important; border-color: var(--gw-pop) !important; color: #fff !important; }

/* ---------- discoverypagina (eigen opmaak) ---------- */
html[data-page="discovery"] body { background: var(--bg) !important; font-family: var(--body) !important; --text: #111; --muted: #4F4A45; --dim: #6B635C; --lav: #6A2FB0; --pur: #8447C7; --pur2: #6A2FB0; --line: #E7E4E0; --line2: #D4CFC9; --panel: #fff; }
html[data-page="discovery"] .top img { filter: brightness(0) !important; }
html[data-page="discovery"] h1, html[data-page="discovery"] h2 { color: var(--ink) !important; text-shadow: none !important; font-family: var(--head) !important; font-stretch: 125%; font-weight: 600 !important; }
html[data-page="discovery"] section.card { background: #fff !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 24px 50px -32px rgba(17,17,17,.35); }
html[data-page="discovery"] :is(input[type=text], input[type=email], input[type=tel], select, textarea) { background: #fff !important; color: var(--ink) !important; font-size: 17px; border-radius: 12px !important; }
html[data-page="discovery"] select option { background: #fff; }
html[data-page="discovery"] .chip span, html[data-page="discovery"] .tile .b { background: #fff !important; color: var(--ink) !important; border-radius: 12px !important; }
html[data-page="discovery"] .tile .b em { color: var(--muted) !important; }
html[data-page="discovery"] .chip:hover span, html[data-page="discovery"] .tile:hover .b { background: #F3ECFC !important; border-color: #8447C7 !important; }
html[data-page="discovery"] .chip input:checked + span, html[data-page="discovery"] .tile input:checked + .b { background: #6A2FB0 !important; color: #fff !important; border-color: #6A2FB0 !important; }
html[data-page="discovery"] .tile input:checked + .b em { color: #F3ECFC !important; }
html[data-page="discovery"] .prog { background: linear-gradient(var(--bg) 70%, transparent) !important; }
html[data-page="discovery"] .follow { background: #F3ECFC !important; }
html[data-page="discovery"] button[type=submit], html[data-page="discovery"] .btn { background: #111 !important; color: #fff !important; border-radius: 12px !important; border: 1px solid #111 !important; font-family: var(--head) !important; font-stretch: 125%; font-weight: 500 !important; }
html[data-page="discovery"] button[type=submit]:hover, html[data-page="discovery"] .btn:hover { background: #6A2FB0 !important; border-color: #6A2FB0 !important; box-shadow: 0 16px 36px -14px rgba(132,71,199,.45); }
html[data-page="discovery"] .done .ok { color: #fff; }
html[data-page="discovery"] .err { color: #B42318 !important; }
html[data-page="discovery"] footer { color: var(--muted); }

@media (max-width: 720px) {
  header.top, .portal-top { top: 8px; margin: 8px 8px 0 !important; }
  .quiz.gw-hero { margin: 12px 8px 0 !important; }
  .door { min-height: 440px !important; }
  .door .content, .hero-cta .hc-body { margin: 8px !important; }
  .cta, .hc-cta, .submit, .gw-next { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .door .photo, .hero-cta .img { transition: none !important; } .door:hover .photo, .hero-cta:hover .img { transform: none; } }

/* tekst op foto's altijd licht (wint van de algemene grijze tekstregel) */
.page .door p, .page .hero-cta .hc-body p { color: rgba(255,255,255,.9) !important; }
.page .hero-cta .hc-body .k { color: rgba(255,255,255,.7) !important; }
/* een rij met maar één veld (e-mail) neemt de volle breedte */
.field-row > .field:only-child { grid-column: 1 / -1; }

/* =====================================================================
   Responsief: telefoon, iPad, laptop, groot scherm en widescreen
   ===================================================================== */
/* kop: links logo + plaats, rechts terug en taal */
.gw-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px; grid-template-columns: none !important; }
.gw-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none !important; min-width: 0; }
.gw-brand img { height: 30px !important; width: auto !important; display: block; position: static !important; transform: none !important; }
.gw-loc { font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted) !important; white-space: nowrap;
  padding-left: 14px; border-left: 1px solid rgba(17,17,17,.15); }
.gw-right { display: flex; align-items: center; gap: 10px; }
.gw-head .loc { display: none !important; }
.gw-brand:hover .gw-loc { color: var(--gw-pop-2) !important; }
@media (max-width: 560px) { .gw-loc { display: none; } .back-link { padding: 8px 10px; font-size: 13px !important; } .gw-brand img { height: 26px !important; } }

/* inhoud nooit eindeloos breed */
.quiz, .doors, .past-section, .hero-cta { box-sizing: border-box; }
.doors, .past-section { width: 100%; max-width: 1720px; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(12px, 2.4vw, 40px) !important; padding-right: clamp(12px, 2.4vw, 40px) !important; }
.hero-cta { width: auto; max-width: 1640px; margin-left: clamp(12px, 2.4vw, 40px) !important; margin-right: clamp(12px, 2.4vw, 40px) !important; }
@media (min-width: 1720px) { .hero-cta { margin-left: auto !important; margin-right: auto !important; width: calc(100% - 80px); } }

/* deuren: aantal kolommen volgt het scherm en het aantal kaarten */
.doors { display: grid !important; grid-template-columns: 1fr !important; }
@media (min-width: 760px) { .doors { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .doors:has(> :nth-child(3):last-child) > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .doors:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .doors:has(> :nth-child(3):last-child) > :last-child { grid-column: auto; } }
@media (min-width: 1600px) { .doors:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.door { min-height: clamp(380px, 34vw, 600px) !important; }
@media (min-width: 1600px) { .doors:has(> :nth-child(4):last-child) .door { min-height: clamp(460px, 30vw, 640px) !important; } }
@media (min-height: 1000px) and (min-width: 760px) and (max-width: 1099px) { .door { min-height: 460px !important; } } /* iPad staand */

/* Academy: de open kaart met formulier is licht en leesbaar */
.open-card { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 14px !important; color: var(--ink) !important; justify-content: flex-start !important; padding: clamp(20px, 2.4vw, 32px) !important;
  box-shadow: 0 24px 50px -32px rgba(17,17,17,.35); filter: none !important; }
.open-card *, .open-card h2, .open-card h3 { color: var(--ink) !important; }
.page .open-card p { color: var(--muted) !important; font-size: 16px !important; }
.open-card .form-body { box-shadow: none !important; border: 0 !important; padding: 0 !important; margin-top: 12px; }
.doors:has(.door:hover) .open-card, .doors:has(.open-card:hover) .door { filter: none !important; }

/* formulierpagina's op laptop en groter: beeld links (blijft staan), formulier rechts */
.form-wrap { box-sizing: border-box; width: 100%; max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(12px, 2.4vw, 24px) !important; padding-right: clamp(12px, 2.4vw, 24px) !important; }
@media (min-width: 1100px) {
  .page:has(> .quiz.gw-hero + .form-wrap) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(560px, 0.95fr); grid-template-rows: auto 1fr auto;
    column-gap: clamp(20px, 2vw, 36px); align-items: start; width: 100%; max-width: 1840px; margin: 0 auto; padding: 0 clamp(12px, 2vw, 24px); box-sizing: border-box; }
  .page:has(> .quiz.gw-hero + .form-wrap) > header, .page:has(> .quiz.gw-hero + .form-wrap) > footer { grid-column: 1 / -1; }
  .page:has(> .quiz.gw-hero + .form-wrap) > header { margin-left: 0 !important; margin-right: 0 !important; }
  .page:has(> .quiz.gw-hero + .form-wrap) > .quiz.gw-hero { grid-column: 1; position: sticky !important; top: 96px; margin: 18px 0 40px !important;
    height: calc(100vh - 120px); min-height: 520px; max-height: 980px; justify-content: flex-end; padding: clamp(20px, 2.4vw, 36px) !important; }
  .page:has(> .quiz.gw-hero + .form-wrap) > .form-wrap { grid-column: 2; max-width: none !important; margin: 18px 0 40px !important; padding: 0 !important; position: static; z-index: auto; }
  .page:has(> .quiz.gw-hero + .form-wrap) .quiz.gw-hero h1 { font-size: clamp(38px, 3.6vw, 68px) !important; }
}
@media (min-width: 1100px) and (max-height: 700px) { .page:has(> .quiz.gw-hero + .form-wrap) > .quiz.gw-hero { position: relative !important; top: 0; height: auto; min-height: 480px; } }
/* iPad en kleiner: beeld boven, formulier net eronder en gecentreerd */
@media (max-width: 1099px) { .quiz.gw-hero + .form-wrap { margin-top: -28px !important; } }
.quiz.gw-hero + section { margin-top: 0 !important; }

/* voet en titels netjes binnen dezelfde breedte */
footer.bottom { box-sizing: border-box; padding-left: clamp(16px, 2.4vw, 40px) !important; padding-right: clamp(16px, 2.4vw, 40px) !important; flex-wrap: wrap; gap: 10px; }
.quiz:not(.gw-hero) { padding-left: clamp(16px, 3vw, 40px) !important; padding-right: clamp(16px, 3vw, 40px) !important; }
.page .open-card :is(.submit, .submit-mini, .submit *, .submit-mini *) { color: #fff !important; }

/* =====================================================================
   v5.2: terugknop, flyerverloop (paars/zwart), Academy horizontaal, kaarten nooit hoger dan het scherm
   ===================================================================== */
.gw-left { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); min-width: 0; }
.gw-loc { display: none !important; }
.gw-backbtn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; font-family: var(--body) !important; font-weight: 600; font-size: 15px;
  color: var(--ink) !important; background: #fff; border: 1.5px solid rgba(17,17,17,.18); border-radius: 12px; padding: 10px 16px 10px 12px; line-height: 1;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s; white-space: nowrap; }
.gw-backbtn .ar { font-size: 18px; transition: transform .18s; }
.gw-backbtn .sm { display: none; }
.page .gw-backbtn:hover, .page .gw-backbtn:focus-visible { background: var(--gw-pop-2); border-color: var(--gw-pop-2); color: #fff !important; box-shadow: 0 12px 28px -12px var(--gw-glow); transform: translateY(-1px); }
.page .gw-backbtn:hover * { color: #fff !important; }
.gw-backbtn:hover .ar { transform: translateX(-3px); }
@media (max-width: 640px) { .gw-backbtn .lg { display: none; } .gw-backbtn .sm { display: inline; } .gw-backbtn { padding: 9px 12px; font-size: 14px; } }
.back-link { display: none !important; }

/* flyerverloop: zwarte basis met paarse gloed in de hoeken (zoals de Galaxy LIVE-flyers), merkkleur onderaan rechts */
:root { --flyer: radial-gradient(85% 65% at 0% 0%, rgba(132,54,192,.62) 0%, rgba(132,54,192,.18) 45%, rgba(132,54,192,0) 70%),
  radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--gw-pop) 60%, transparent) 0%, rgba(0,0,0,0) 65%),
  linear-gradient(to top, rgba(10,4,18,.94) 0%, rgba(10,4,18,.72) 34%, rgba(10,4,18,.28) 68%, rgba(10,4,18,.12) 100%); }
body, body.studios, body.experiences { --shade: var(--flyer); }
.door::before, .quiz.gw-hero::before, .hero-cta .hc-photo::after { background: radial-gradient(85% 65% at 0% 0%, rgba(132,54,192,.62) 0%, rgba(132,54,192,.18) 45%, rgba(132,54,192,0) 70%),
  radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--gw-pop) 55%, transparent) 0%, rgba(0,0,0,0) 65%),
  linear-gradient(to top, rgba(10,4,18,.94) 0%, rgba(10,4,18,.72) 34%, rgba(10,4,18,.28) 68%, rgba(10,4,18,.12) 100%) !important; }
/* stippenraster rechtsboven zoals op de flyer */
.door::after, .quiz.gw-hero::after { content: "" !important; display: block !important; position: absolute !important; top: 18px; right: 18px; width: 150px; height: 110px; z-index: 1;
  background-image: radial-gradient(rgba(255,255,255,.28) 1.6px, transparent 1.8px) !important; background-size: 18px 18px !important; opacity: .8; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(circle at 100% 0%, #000 30%, transparent 75%); border: 0 !important; inset: 18px 18px auto auto !important; }
.door .content, .quiz.gw-hero .gw-glass, .hero-cta .hc-body { background: rgba(14,6,24,.34) !important; border-color: rgba(190,150,255,.18) !important; }

/* kaarten nooit hoger dan het scherm: tekst en knop altijd zichtbaar zonder te scrollen */
.door { min-height: clamp(360px, min(34vw, 64vh), 600px) !important; }
@media (min-width: 1600px) { .doors:has(> :nth-child(4):last-child) .door { min-height: clamp(420px, min(30vw, 66vh), 640px) !important; } }
.hero-cta { min-height: clamp(380px, min(40vw, 64vh), 560px) !important; }

/* Academy: de twee academies liggen horizontaal onder elkaar, het formulier ernaast */
@media (min-width: 1100px) {
  .page .doors.doors:has(> .open-card) { grid-template-columns: minmax(0, 1.35fr) minmax(420px, 1fr) !important; grid-auto-rows: auto; align-items: stretch; }
  .doors:has(> .open-card) > .door { grid-column: 1 !important; min-height: clamp(300px, 38vh, 420px) !important; }
  .doors:has(> .open-card) > .open-card { grid-column: 2 !important; grid-row: 1 / span 2 !important; }
  .doors:has(> .open-card) > .door .content { max-width: 640px !important; }
}
@media (min-width: 760px) and (max-width: 1099px) { .page .doors.doors:has(> .open-card) { grid-template-columns: 1fr !important; } .doors:has(> .open-card) > .door { min-height: 340px !important; } }

/* =====================================================================
   v5.3: flyerstijl exact: hoog contrast, paars links, merkkleur rechts (Experiences oranje-rood),
   stippen in trapvorm rechtsboven en linksonder, filmkorrel, effen paars infovlak
   ===================================================================== */
:root { --dots-tr: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='270'><g fill='white' fill-opacity='.24'><circle cx='45' cy='15' r='7'/><circle cx='75' cy='15' r='7'/><circle cx='105' cy='15' r='7'/><circle cx='135' cy='15' r='7'/><circle cx='165' cy='15' r='7'/><circle cx='135' cy='45' r='7'/><circle cx='165' cy='45' r='7'/><circle cx='165' cy='75' r='7'/><circle cx='75' cy='105' r='7'/><circle cx='105' cy='105' r='7'/><circle cx='135' cy='105' r='7'/><circle cx='165' cy='105' r='7'/><circle cx='165' cy='135' r='7'/><circle cx='165' cy='165' r='7'/><circle cx='105' cy='195' r='7'/><circle cx='135' cy='195' r='7'/><circle cx='165' cy='195' r='7'/><circle cx='165' cy='225' r='7'/><circle cx='135' cy='255' r='7'/><circle cx='165' cy='255' r='7'/></g></svg>"); --dots-bl: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='150'><g fill='white' fill-opacity='.24'><circle cx='15' cy='15' r='7'/><circle cx='15' cy='45' r='7'/><circle cx='15' cy='75' r='7'/><circle cx='45' cy='75' r='7'/><circle cx='15' cy='105' r='7'/><circle cx='15' cy='135' r='7'/><circle cx='45' cy='135' r='7'/><circle cx='75' cy='135' r='7'/><circle cx='105' cy='135' r='7'/><circle cx='135' cy='135' r='7'/></g></svg>"); --grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url%28%23n%29'/></svg>"); --flyer-l: #8436C0; }
body, body.studios { --flyer-r: #8436C0; --panel: linear-gradient(120deg, #7A35B6 0%, #6A2FB0 100%); }
body.experiences { --flyer-r: #E5462A; --panel: linear-gradient(120deg, #7A35B6 0%, #9B3A86 52%, #DF5124 100%); }
/* overlay: foto blijft scherp en fel; kleur komt van de randen, onderaan diep zwart voor de tekst */
.door::before, .quiz.gw-hero::before, .hero-cta .hc-photo::after {
  background:
    var(--grain),
    linear-gradient(90deg, color-mix(in srgb, var(--flyer-l) 78%, transparent) 0%, color-mix(in srgb, var(--flyer-l) 30%, transparent) 22%, transparent 42%),
    linear-gradient(270deg, color-mix(in srgb, var(--flyer-r) 72%, transparent) 0%, color-mix(in srgb, var(--flyer-r) 26%, transparent) 20%, transparent 40%),
    linear-gradient(to top, #07030C 0%, rgba(7,3,12,.86) 26%, rgba(7,3,12,.2) 52%, transparent 70%) !important;
  background-size: 180px 180px, auto, auto, auto !important; mix-blend-mode: normal; opacity: 1 !important; }
.door .photo, .hero-cta .hc-photo .img, .quiz.gw-hero { filter: saturate(1.18) contrast(1.12) !important; }
.quiz.gw-hero { filter: none !important; }
/* stippen exact zoals de flyer: rechtsboven trap, linksonder kleine trap */
.door::after, .quiz.gw-hero::after { content: "" !important; display: block !important; position: absolute !important; z-index: 1 !important; pointer-events: none;
  inset: 14px 14px auto auto !important; width: 180px !important; height: 270px !important; background: var(--dots-tr) no-repeat top right / contain !important;
  -webkit-mask-image: none !important; mask-image: none !important; opacity: 1 !important; border: 0 !important; }
.door { --_bl: var(--dots-bl); }
.door .photo::after { content: ""; position: absolute; left: 14px; top: 14px; width: 180px; height: 150px; background: var(--dots-bl) no-repeat top left / contain; opacity: .9; z-index: 2; }
@media (max-width: 640px) { .door::after, .quiz.gw-hero::after { width: 120px !important; height: 180px !important; } .door .photo::after { width: 110px; height: 92px; } }
/* infovlak: effen paars zoals "Vrijdag 4 december" op de flyer (Experiences loopt van paars naar oranje-rood) */
.door .content, .quiz.gw-hero .gw-glass, .hero-cta .hc-body { background: var(--panel) !important; border: 0 !important; border-radius: 16px !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 24px 60px -24px rgba(7,3,12,.8); }
.page .door .content p, .page .quiz.gw-hero .sub, .page .hero-cta .hc-body p { color: #fff !important; opacity: .95; }
.door h2, .quiz.gw-hero h1, .hero-cta h3 { text-shadow: 0 0 28px rgba(255,255,255,.18) !important; }
/* knoppen op het paarse vlak: wit omlijnd, bij hover wit vlak met paarse tekst (fel contrast) */
.door .cta, .hero-cta .hc-cta { background: rgba(255,255,255,.1) !important; border-color: #fff !important; }
.door:hover .cta, .hero-cta:hover .hc-cta { background: #fff !important; border-color: #fff !important; color: #2A0F45 !important; box-shadow: 0 14px 34px -10px rgba(255,255,255,.45) !important; }
.door:hover .cta *, .hero-cta:hover .hc-cta * { color: #2A0F45 !important; }
.door:hover .cta::after, .hero-cta:hover .hc-cta::after { color: #2A0F45; }
.door:hover, .hero-cta:hover { box-shadow: 0 0 0 3px var(--flyer-r), 0 30px 70px -26px color-mix(in srgb, var(--flyer-r) 70%, transparent) !important; border-color: var(--flyer-r) !important; }

/* v5.3b: diepere zwarte basis voor contrast zoals de flyer */
.door::before, .quiz.gw-hero::before, .hero-cta .hc-photo::after {
  background:
    var(--grain),
    linear-gradient(90deg, color-mix(in srgb, var(--flyer-l) 82%, transparent) 0%, color-mix(in srgb, var(--flyer-l) 34%, transparent) 20%, transparent 40%),
    linear-gradient(270deg, color-mix(in srgb, var(--flyer-r) 78%, transparent) 0%, color-mix(in srgb, var(--flyer-r) 30%, transparent) 18%, transparent 38%),
    radial-gradient(120% 90% at 50% 40%, transparent 35%, rgba(7,3,12,.55) 100%),
    linear-gradient(to top, #07030C 0%, rgba(7,3,12,.9) 30%, rgba(7,3,12,.25) 58%, rgba(7,3,12,.1) 100%) !important;
  background-size: 180px 180px, auto, auto, auto, auto !important; }
.door .photo::after { display: none !important; }

/* v5.4: tekstvak terug naar glas (geen effen kleurvlak); lichte paarse/merkkleurtint in het glas */
.door .content, .quiz.gw-hero .gw-glass, .hero-cta .hc-body {
  background: linear-gradient(120deg, color-mix(in srgb, var(--flyer-l) 22%, rgba(10,4,18,.30)) 0%, rgba(10,4,18,.30) 55%, color-mix(in srgb, var(--flyer-r) 20%, rgba(10,4,18,.30)) 100%) !important;
  border: 1px solid rgba(255,255,255,.16) !important; border-radius: 14px !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important; backdrop-filter: blur(12px) saturate(1.2) !important; box-shadow: 0 20px 50px -28px rgba(7,3,12,.8); }
.door .cta, .hero-cta .hc-cta { background: rgba(255,255,255,.08) !important; }

/* v5.5: kopbalk: terugknop links in de hoek, logo helemaal rechts */
.gw-head { padding-top: 12px !important; padding-bottom: 12px !important; }
.gw-left { flex: 1 1 auto; justify-content: flex-start; }
.gw-right { flex: 0 0 auto; gap: clamp(12px, 1.6vw, 22px) !important; }
.gw-right .gw-brand { padding-left: clamp(12px, 1.6vw, 22px); }
.gw-right .gw-lang + .gw-brand { border-left: 1px solid rgba(17,17,17,.12); }
.gw-brand img { height: 32px !important; }
@media (max-width: 560px) { .gw-brand img { height: 26px !important; } .gw-right .gw-brand { padding-left: 10px; } }

/* v5.6: Experiences volledig oranje-rood (merkkleur), geen paars en geen mengeling */
body.experiences, .door.experiences { --flyer-l: #E5462A !important; --flyer-r: #E5462A !important; --gw-pop: #F06A2E; --gw-pop-2: #DF5124; --gw-glow: rgba(240,90,36,.5); }
body.experiences .door .content, body.experiences .quiz.gw-hero .gw-glass, body.experiences .hero-cta .hc-body, .door.experiences .content {
  background: linear-gradient(120deg, rgba(229,70,42,.24) 0%, rgba(10,4,18,.32) 55%, rgba(229,70,42,.2) 100%) !important; }
body.experiences .door:hover, .door.experiences:hover, body.experiences .hero-cta:hover { box-shadow: 0 0 0 3px #E5462A, 0 30px 70px -26px rgba(229,70,42,.6) !important; border-color: #E5462A !important; }
body.experiences .door:hover .cta, .door.experiences:hover .cta, body.experiences .hero-cta:hover .hc-cta { color: #7A1E0C !important; }
body.experiences .door:hover .cta *, .door.experiences:hover .cta * { color: #7A1E0C !important; }
.door.experiences:hover .cta::after, body.experiences .door:hover .cta::after { color: #7A1E0C; }

/* =====================================================================
   v5.7: glazen tekstvak met animatie, Instagram-blok onder het beeld, formulierpagina's zonder lege ruimte
   ===================================================================== */
/* glas: schuift zacht omhoog bij het laden, licht op bij hover (enkel transform en opacity: snel) */
@keyframes gwRise { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes gwSheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
.door .content, .quiz.gw-hero .gw-glass, .hero-cta .hc-body { position: relative; overflow: hidden; animation: gwRise .7s cubic-bezier(.2,.75,.2,1) both; transition: transform .35s cubic-bezier(.2,.75,.2,1), border-color .35s, box-shadow .35s !important; }
.doors > :nth-child(2) .content { animation-delay: .08s; } .doors > :nth-child(3) .content { animation-delay: .16s; } .doors > :nth-child(4) .content { animation-delay: .24s; }
.door .content::before, .hero-cta .hc-body::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); transform: translateX(-120%) skewX(-18deg); }
.door:hover .content, .hero-cta:hover .hc-body { transform: translateY(-6px); border-color: rgba(255,255,255,.34) !important; box-shadow: 0 30px 60px -26px rgba(7,3,12,.9) !important; }
.door:hover .content::before, .hero-cta:hover .hc-body::before { animation: gwSheen .9s ease-out; }
@media (prefers-reduced-motion: reduce) { .door .content, .quiz.gw-hero .gw-glass, .hero-cta .hc-body { animation: none !important; } .door:hover .content::before { animation: none; } }

/* formulierpagina's (laptop en groter): beeld en Instagram links, formulier rechts over de volle hoogte */
@media (min-width: 1100px) {
  .page:has(> .quiz.gw-hero + .form-wrap) { grid-template-rows: auto auto 1fr auto !important; }
  .page:has(> .quiz.gw-hero + .form-wrap) > .quiz.gw-hero { grid-row: 2; position: relative !important; top: 0; height: min(70vh, 720px) !important; min-height: 460px; margin-bottom: 18px !important; }
  .page:has(> .quiz.gw-hero + .form-wrap) > .form-wrap { grid-row: 2 / span 2; }
  .page:has(> .quiz.gw-hero + .form-wrap) > .gw-feed { grid-column: 1; grid-row: 3; align-self: start; margin: 0 0 40px !important; padding: 0 !important; }
  .page:has(> .quiz.gw-hero + .form-wrap) > footer { grid-row: 4; }
}
/* Instagram-blok */
.gw-feed { box-sizing: border-box; width: 100%; max-width: 760px; margin: 8px auto 40px; padding: 0 clamp(12px, 2.4vw, 24px); min-height: 1px; }
.gw-feed:not(.ready) { min-height: 240px; }
.gw-feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gw-feed-head h2 { font-family: var(--head) !important; font-stretch: 125%; font-size: clamp(22px, 2vw, 30px) !important; font-weight: 600 !important; margin: 0 !important; color: var(--ink) !important; }
.page a.gw-feed-follow { font-family: var(--body); font-weight: 600; font-size: 14px; color: var(--gw-pop-2) !important; text-decoration: none !important; }
.page a.gw-feed-follow:hover { text-decoration: underline !important; }
.gw-feed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .gw-feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gw-tile { all: unset; box-sizing: border-box; position: relative; cursor: pointer; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; isolation: isolate;
  background: radial-gradient(90% 60% at 0% 0%, rgba(132,54,192,.85), transparent 70%), radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--flyer-r, #8436C0) 80%, transparent), transparent 70%), #0B0512;
  box-shadow: 0 18px 40px -26px rgba(7,3,12,.8); transition: transform .25s, box-shadow .25s; animation: gwRise .6s cubic-bezier(.2,.75,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.gw-tile::before { content: ""; position: absolute; top: 10px; right: 10px; width: 90px; height: 135px; background: var(--dots-tr) no-repeat top right / contain; opacity: .9; z-index: -1; }
.gw-tile:hover, .gw-tile:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--gw-pop), 0 24px 50px -20px var(--gw-glow); }
.gw-tile-tag { position: absolute; top: 12px; left: 12px; font: 600 11px/1 var(--body); letter-spacing: 1.5px; text-transform: uppercase; color: #fff !important; padding: 6px 9px; border-radius: 8px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.gw-tile-play { position: absolute; left: 50%; top: 45%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(6px); transition: transform .25s, background .25s; }
.gw-tile-play::after { content: ""; position: absolute; left: 23px; top: 18px; border-left: 16px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.gw-tile:hover .gw-tile-play { transform: scale(1.1); background: var(--gw-pop-2); border-color: var(--gw-pop-2); }
.gw-tile-title { font-family: var(--head) !important; font-stretch: 125%; font-weight: 600; font-size: 17px; line-height: 1.15; color: #fff !important; }
.gw-tile-cta { font: 600 13px/1.3 var(--body); color: rgba(255,255,255,.85) !important; margin-top: 6px; }
.gw-tile-more { justify-content: center; text-align: center; text-decoration: none !important; background: linear-gradient(140deg, #111 0%, #2A0F45 100%); }
.gw-tile-live { cursor: default; padding: 0; background: #fff; aspect-ratio: auto; height: 100%; min-height: 420px; }
.gw-tile-frame { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; background: #fff; }

/* =====================================================================
   v5.8: titelanimatie en Instagram-feed als raster
   ===================================================================== */
/* titel: het eerste deel pulseert binnen, de rest volgt woord per woord, daarna een glanslijn zoals op het glas */
.gw-js .quiz h1:not(.gw-anim) { opacity: 0; animation: gwShow 0s 1.4s forwards; }
@keyframes gwShow { to { opacity: 1; } }
.quiz h1.gw-anim { position: relative; }
.gw-w { display: inline-block; opacity: 0; will-change: transform, opacity; }
.gw-w1 { animation: gwPulseIn .9s cubic-bezier(.2,.8,.2,1) var(--d) forwards; }
.gw-w2 { animation: gwWordIn .75s cubic-bezier(.2,.8,.2,1) var(--d) forwards; }
@keyframes gwPulseIn { 0% { opacity: 0; transform: scale(.7); filter: blur(8px); } 55% { opacity: 1; transform: scale(1.09); filter: blur(0); } 78% { transform: scale(.98); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes gwWordIn { 0% { opacity: 0; transform: translateY(.45em) scale(.96); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }
.quiz h1.gw-anim::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.85) 50%, transparent 100%); transform: translateX(-140%) skewX(-16deg);
  animation: gwTitleSheen 1.3s cubic-bezier(.4,0,.2,1) 1.7s forwards; }
.quiz.gw-hero h1.gw-anim::after { background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%); }
@keyframes gwTitleSheen { to { transform: translateX(420%) skewX(-16deg); } }
.quiz h1.gw-anim:hover::after { animation: gwTitleSheen 1.1s cubic-bezier(.4,0,.2,1) forwards; transform: translateX(-140%) skewX(-16deg); }
@media (prefers-reduced-motion: reduce) { .gw-js .quiz h1 { opacity: 1 !important; animation: none !important; } }

/* Instagram: raster van de laatste 6 posts (3 naast elkaar), zoals het profiel */
.gw-feed-head { align-items: flex-end !important; }
.gw-feed-sub { margin: 4px 0 0 !important; font: 500 14px/1.4 var(--body) !important; color: var(--muted) !important; }
.page a.gw-feed-follow { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 12px; background: #111; color: #fff !important; font-size: 14px; transition: background .2s, box-shadow .2s, transform .2s; }
.page a.gw-feed-follow:hover { background: var(--gw-pop-2); text-decoration: none !important; transform: translateY(-1px); box-shadow: 0 12px 28px -12px var(--gw-glow); }
.gw-feed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
.gw-post { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #160a22; text-decoration: none !important; isolation: isolate;
  animation: gwRise .6s cubic-bezier(.2,.75,.2,1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.gw-post img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s; }
.gw-post::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,4,18,.88) 0%, rgba(10,4,18,.2) 55%, transparent 75%),
  linear-gradient(90deg, color-mix(in srgb, var(--flyer-l, #8436C0) 55%, transparent), transparent 45%); opacity: 0; transition: opacity .3s; }
.gw-post:hover img, .gw-post:focus-visible img { transform: scale(1.06); }
.gw-post:hover::after, .gw-post:focus-visible::after { opacity: 1; }
.gw-post:hover, .gw-post:focus-visible { box-shadow: 0 0 0 3px var(--gw-pop), 0 20px 44px -20px var(--gw-glow); }
.gw-post-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; font: 500 12.5px/1.35 var(--body); color: #fff !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.gw-post:hover .gw-post-cap, .gw-post:focus-visible .gw-post-cap { opacity: 1; transform: none; }
.gw-post-ic { position: absolute; top: 9px; right: 9px; z-index: 2; width: 22px; height: 22px; background: no-repeat center / contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.gw-reel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E"); }
.gw-multi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='7' y='7' width='13' height='13' rx='2'/%3E%3Cpath d='M4 16V6a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E"); }
.gw-feed:not(.ready) { min-height: 0 !important; }
.quiz { overflow-x: clip; }
html, body { overflow-x: clip; }
.page .quiz.gw-hero .gw-w { color: #fff !important; }
.page .gw-feed a.gw-feed-follow, .page .gw-feed a.gw-feed-follow:hover { color: #fff !important; }
.page a.gw-feed-follow.gw-feed-follow.gw-feed-follow.gw-feed-follow.gw-feed-follow.gw-feed-follow.gw-feed-follow.gw-feed-follow.gw-feed-follow.gw-feed-follow { color: #fff !important; text-decoration: none !important; }
.quiz h1.gw-anim::after, .quiz h1.gw-anim:hover::after { content: none !important; display: none !important; animation: none !important; }

/* =====================================================================
   v5.9: de Galaxy-film (knop, voorvertoning, scherm)
   ===================================================================== */
.gw-film-pill { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 9px 16px 9px 9px; border-radius: 999px;
  font: 600 15px/1 var(--body); color: var(--ink); background: #fff; border: 1.5px solid rgba(17,17,17,.14); box-shadow: 0 10px 24px -16px rgba(17,17,17,.4);
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; animation: gwRise .7s cubic-bezier(.2,.75,.2,1) 1.3s both; }
.gw-film-pill .pl, .gw-teaser .pl { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--gw-pop-2); flex: 0 0 auto; }
.gw-film-pill .pl::after, .gw-teaser .pl::after { content: ""; position: absolute; left: 12px; top: 9px; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.gw-film-pill:hover, .gw-film-pill:focus-visible { background: var(--gw-pop-2); color: #fff; border-color: var(--gw-pop-2); transform: translateY(-2px); box-shadow: 0 14px 30px -12px var(--gw-glow); }
.gw-film-pill:hover .pl { background: #fff; } .gw-film-pill:hover .pl::after { border-left-color: var(--gw-pop-2); }
.quiz.gw-hero .gw-film-pill { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); }
.page .quiz .gw-film-pill span:last-child { color: inherit !important; }

/* voorvertoning linksonder */
.gw-teaser { position: fixed; left: 16px; bottom: 16px; z-index: 9000; display: flex; align-items: center; gap: 12px; padding: 8px 40px 8px 8px; max-width: min(380px, calc(100vw - 32px));
  border-radius: 16px; background: rgba(14,6,24,.86); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -20px rgba(7,3,12,.7); color: #fff; font-family: var(--body); opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
.gw-teaser.in { opacity: 1; transform: none; }
.gw-teaser-play { all: unset; cursor: pointer; position: relative; width: 132px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; flex: 0 0 auto; background: #000; }
.gw-teaser-play video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.gw-teaser-play .pl { position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -15px; box-shadow: 0 0 0 6px rgba(255,255,255,.18); }
.gw-teaser-play:hover video { transform: scale(1.08); }
.gw-teaser-txt { cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gw-teaser-txt b { font-family: var(--head); font-stretch: 125%; font-weight: 600; font-size: 15px; line-height: 1.15; }
.gw-teaser-txt span { font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.3; }
.gw-teaser:hover { border-color: var(--gw-pop); box-shadow: 0 0 0 2px var(--gw-pop), 0 24px 60px -20px var(--gw-glow); }
.gw-teaser-x { all: unset; cursor: pointer; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.12); text-align: center; font: 600 16px/26px var(--body); color: #fff; }
.gw-teaser-x::before { content: "×"; }
.gw-teaser-x:hover { background: #fff; color: #111; }
@media (max-width: 560px) { .gw-teaser { left: 10px; right: 10px; bottom: 10px; max-width: none; } .gw-teaser-play { width: 112px; } }

/* filmscherm */
html.gw-lock { overflow: hidden; }
.gw-film { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: clamp(10px, 3vw, 40px);
  background: radial-gradient(70% 60% at 0% 0%, rgba(132,54,192,.45), transparent 70%), radial-gradient(70% 60% at 100% 100%, color-mix(in srgb, var(--gw-pop) 40%, transparent), transparent 70%), rgba(7,3,12,.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s; }
.gw-film.in { opacity: 1; }
.gw-film-box { position: relative; width: min(1180px, 100%, calc((100vh - 140px) * 16 / 9)); border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9);
  transform: translateY(18px) scale(.97); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.gw-film.in .gw-film-box { transform: none; }
.gw-film-box video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.gw-film-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; background: #0d0616; color: #fff; font-family: var(--body); }
.gw-film-bar b { display: block; font-family: var(--head); font-stretch: 125%; font-weight: 600; font-size: 17px; }
.gw-film-bar span { font-size: 14px; color: rgba(255,255,255,.75); }
.gw-film-cta { all: unset; cursor: pointer; padding: 11px 18px; border-radius: 12px; border: 1px solid #fff; font: 600 15px/1 var(--body); color: #fff; transition: background .2s, color .2s; }
.gw-film-cta:hover { background: #fff; color: #111; }
.gw-film-x { all: unset; cursor: pointer; position: absolute; z-index: 2; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; text-align: center; font: 500 24px/40px var(--body); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gw-film-x::before { content: "×"; }
.gw-film-x:hover, .gw-film-x:focus-visible { background: #fff; color: #111; }
@media (prefers-reduced-motion: reduce) { .gw-teaser, .gw-film, .gw-film-box { transition: none; } .gw-film-pill { animation: none; } }

/* v5.9b: beeld boven de titel smaller (bovenkant weggesneden), zodat de Instagram-feed en het formulier hoger komen */
.quiz.gw-hero { padding-top: clamp(96px, 12vw, 150px) !important; background-position: center 45% !important; }
@media (min-width: 1100px) {
  .page:has(> .quiz.gw-hero + .form-wrap) > .quiz.gw-hero { height: auto !important; min-height: 0 !important; padding-top: clamp(110px, 9vw, 160px) !important; }
}
.page .gw-film-pill, .page .gw-film-pill span { color: var(--ink) !important; }
.page .quiz.gw-hero .gw-film-pill, .page .quiz.gw-hero .gw-film-pill span, .page .gw-film-pill:hover, .page .gw-film-pill:hover span { color: #fff !important; }

/* v6: bestandsvelden, voetlinks */
.gw-file input[type="file"] { padding: 12px !important; cursor: pointer; font-size: 15px !important; }
.gw-file input[type="file"]::file-selector-button { font: 600 14px var(--body); margin-right: 12px; padding: 9px 14px; border-radius: 10px; border: 0; background: #111; color: #fff; cursor: pointer; transition: background .2s; }
.gw-file input[type="file"]:hover::file-selector-button { background: var(--gw-pop-2); }
.gw-file .hint { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.gw-foot-links { display: inline-flex; gap: 18px; }
.page footer.bottom .gw-foot-links a { color: var(--ink) !important; font-weight: 600; }
.page footer.bottom .gw-foot-links a:hover { color: var(--gw-pop-2) !important; }