/* Layout: één letter, extreem strak gespatieerd. Glas over zaaldonker. Eén lichtbundel per scherm. */
:root{
  --bg:#050506;
  --bg-2:#0d0d10;
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.1);
  --stroke:rgba(255,255,255,.09);
  --fg:#f5f5f7;
  --muted:#8e8e96;
  --a1:#ffd23f;  --a2:#ffb000;         /* Spotlight: zaallampgeel */
  --ink:#0a0a0a;
  --font:"Geist",-apple-system,"SF Pro Display",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --r-xl:34px; --r-l:24px; --r-m:16px;
  color-scheme:dark;
}
:root[data-accent="velvet"]{--a1:#b49cff;--a2:#8b6cff}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.45;margin:0;letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
button{font:inherit;color:inherit;cursor:pointer;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--a1);outline-offset:3px}
.wrap{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));max-width:1360px;margin:0 auto}
.grad{background:linear-gradient(100deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* nav: zwevende glazen pil */
.nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:40;display:flex;justify-content:center;pointer-events:none;margin-top:12px}
.nav-inner{pointer-events:auto;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 18px;border-radius:999px;background:rgba(22,22,26,.62);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border:1px solid var(--stroke);box-shadow:0 10px 40px -10px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);max-width:calc(100% - 32px)}
.brand{font-weight:800;font-size:15px;letter-spacing:-.03em;display:flex;align-items:center;gap:8px;white-space:nowrap;margin-right:8px}
.mark{width:22px;height:22px;border-radius:7px;background:conic-gradient(from 200deg,var(--a1),var(--a2),var(--a1));position:relative;flex:none}
.mark::after{content:"";position:absolute;inset:6px 6px 6px 9px;border-radius:50% 50% 50% 0;background:var(--bg);transform:rotate(-45deg)}
.seg{display:flex;background:rgba(255,255,255,.05);border-radius:999px;padding:3px}
.seg button{border:0;background:none;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--glass-2);color:var(--fg)}
.pill{border:0;border-radius:999px;padding:10px 18px;font-weight:600;font-size:14px;background:var(--fg);color:var(--ink);white-space:nowrap}
.pill.lit{background:linear-gradient(100deg,var(--a1),var(--a2));color:#fff;box-shadow:0 8px 30px -8px var(--a2)}
.pill.glass{background:var(--glass-2);color:var(--fg);border:1px solid var(--stroke)}
.pill.big{padding:17px 28px;font-size:17px}

/* hero */
.hero{position:relative;padding-block:72px 40px;overflow:hidden}
.beam{position:absolute;left:50%;top:-30%;width:120vw;max-width:1600px;height:130%;transform:translateX(-50%);background:radial-gradient(40% 55% at 50% 0%,color-mix(in srgb,var(--a1) 40%,transparent),transparent 70%),radial-gradient(30% 40% at 62% 20%,color-mix(in srgb,var(--a2) 30%,transparent),transparent 70%);filter:blur(30px);opacity:.75;pointer-events:none;animation:sway 14s ease-in-out infinite alternate}
@keyframes sway{to{transform:translateX(-46%) rotate(2deg)}}
.hero .wrap{position:relative;text-align:center}
.hero h1{font-weight:800;font-size:clamp(56px,11.5vw,176px);line-height:.86;letter-spacing:-.065em;margin:18px 0 26px;text-wrap:balance}
.hero h1 .thin{font-weight:300;letter-spacing:-.06em}
.hero p{font-size:clamp(18px,2vw,22px);color:var(--muted);max-width:34ch;margin:0 auto 34px;letter-spacing:-.02em;font-weight:400}
.hero p b{color:var(--fg);font-weight:500}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.stats{display:flex;justify-content:center;gap:clamp(24px,6vw,72px);margin-top:56px;flex-wrap:wrap}
.stat b{display:block;font-size:clamp(40px,6vw,64px);font-weight:700;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--muted)}

/* spotlight: hoofdrol */
.feature{margin-top:24px;border-radius:var(--r-xl);overflow:hidden;position:relative;min-height:440px;display:flex;align-items:flex-end;isolation:isolate;border:1px solid var(--stroke)}
.feature .art{position:absolute;inset:0;z-index:-2}
.feature::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 55%,transparent),linear-gradient(0deg,rgba(0,0,0,.6),transparent 50%)}
.feature .txt{padding:clamp(24px,5vw,56px);max-width:620px}
.feature h2{font-size:clamp(48px,8vw,108px);font-weight:800;letter-spacing:-.065em;line-height:.86;margin:12px 0 16px;text-wrap:balance}
.feature p{color:rgba(255,255,255,.75);font-size:17px;margin:0 0 22px;max-width:44ch}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14)}
.chip .live{width:7px;height:7px;border-radius:50%;background:#ff453a;box-shadow:0 0 10px #ff453a}

/* rows */
main{padding-bottom:80px}
.row{margin-top:64px}
.row-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.row-head h3{font-size:clamp(26px,3.2vw,38px);font-weight:700;letter-spacing:-.045em;margin:0;line-height:1}
.row-head span{color:var(--muted);font-size:14px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(178px,212px);gap:18px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.card{scroll-snap-align:start;background:none;border:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:10px;min-width:0}
.card .cap{font-size:14px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.card .cap small{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:2px}
.poster{aspect-ratio:2/3;max-width:100%;width:100%;border-radius:var(--r-l);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.card:hover .poster,.card:focus-visible .poster{transform:scale(1.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 30px 60px -24px color-mix(in srgb,var(--a2) 70%,transparent)}
.poster::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%,transparent 50%,rgba(0,0,0,.7))}
.poster .art{position:absolute;inset:0;z-index:-2}
.pt{font-weight:800;color:#fff;font-size:30px;line-height:.88;letter-spacing:-.06em;text-wrap:balance;overflow-wrap:anywhere}
.badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;padding:5px 9px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.15)}
.badge.hot{background:linear-gradient(100deg,var(--a1),var(--a2));border-color:transparent}

/* genummerde rij */
.rank{grid-auto-columns:minmax(260px,300px)}
.rcard{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;background:none;border:0;padding:0;text-align:left;scroll-snap-align:start}
.rcard .n{font-size:clamp(150px,16vw,200px);font-weight:900;letter-spacing:-.08em;line-height:.74;color:var(--bg);-webkit-text-stroke:2px rgba(255,255,255,.28);margin-right:-26px;z-index:1;font-variant-numeric:tabular-nums}
.rcard .poster{z-index:2}

/* moods: grote tegels */
.moods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mood{border:1px solid var(--stroke);background:var(--glass);border-radius:var(--r-l);padding:22px;text-align:left;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transition:background .3s}
.mood:hover{background:var(--glass-2)}
.mood b{font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.05em;line-height:1}
.mood span{font-size:13px;color:var(--muted)}
.mood i{position:absolute;right:-20px;top:-20px;width:110px;height:110px;border-radius:50%;filter:blur(30px);opacity:.55}

/* overlays */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.72);backdrop-filter:blur(30px) saturate(140%);-webkit-backdrop-filter:blur(30px) saturate(140%);overflow-y:auto;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);animation:fade .35s ease}
@keyframes fade{from{opacity:0}}
.sheet{max-width:880px;margin:0 auto;padding-block:24px 64px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));animation:rise .5s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(24px);opacity:0}}
.topbar{display:flex;align-items:center;gap:16px;position:sticky;top:12px;z-index:3;margin-bottom:28px}
.x{width:42px;height:42px;border-radius:50%;border:1px solid var(--stroke);background:rgba(40,40,46,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:16px;flex:none}
.bar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--a1),var(--a2));border-radius:2px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.qn{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.qt{font-size:clamp(22px,2.6vw,28px);font-weight:500;letter-spacing:-.03em;color:var(--muted);margin:8px 0 18px}
.stage{position:relative;min-height:calc(100vh - 160px);display:flex;flex-direction:column;justify-content:center}
.ghostnum{position:absolute;right:-2%;top:50%;transform:translateY(-55%);font-size:clamp(220px,38vw,520px);font-weight:900;letter-spacing:-.09em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);pointer-events:none;font-variant-numeric:tabular-nums;z-index:-1}
.qbeam{position:fixed;inset:-20% -20% auto auto;width:80vw;height:90vh;border-radius:50%;filter:blur(80px);opacity:.35;pointer-events:none;z-index:-1;transition:background 1s,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.opts{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--stroke)}
.opt{border:0;border-bottom:1px solid var(--stroke);background:none;text-align:left;padding:clamp(10px,1.6vw,18px) 0;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;position:relative}
.opt b{font-size:clamp(40px,7.4vw,92px);font-weight:800;letter-spacing:-.065em;line-height:.95;color:rgba(255,255,255,.28);transition:color .35s,transform .45s cubic-bezier(.2,.8,.2,1);display:inline-block}
.opt span{font-size:15px;color:var(--muted);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.opt .arrow{margin-left:auto;font-size:clamp(28px,4vw,48px);font-weight:300;opacity:0;transform:translateX(-12px);transition:opacity .3s,transform .3s;color:var(--fg)}
.opt:hover b,.opt:focus-visible b{color:var(--fg);transform:translateX(10px)}
.opt:hover span,.opt:focus-visible span,.opt:hover .arrow,.opt:focus-visible .arrow{opacity:1;transform:none}
.opt[aria-pressed="true"] b{background:linear-gradient(100deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateX(10px)}
.opt[aria-pressed="true"] span{opacity:1;transform:none}
@media (hover:none){.opt span{opacity:1;transform:none}.opt b{color:rgba(255,255,255,.6)}}
.back{margin-top:24px;background:none;border:0;color:var(--muted);font-size:15px;padding:8px 0}

/* resultaat */
.rh{font-size:clamp(52px,10vw,120px);font-weight:800;letter-spacing:-.07em;line-height:.85;margin:0 0 18px}
.rsub{color:var(--muted);font-size:19px;letter-spacing:-.02em;max-width:40ch;margin:0 0 36px}
.win{border-radius:var(--r-xl);overflow:hidden;position:relative;isolation:isolate;min-height:420px;display:flex;align-items:flex-end;border:1px solid var(--stroke)}
.win .art{position:absolute;inset:0;z-index:-2}
.win::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.2) 70%)}
.win .txt{padding:clamp(22px,4vw,40px);width:100%}
.win h3{font-size:clamp(46px,8vw,88px);font-weight:800;letter-spacing:-.065em;line-height:.86;margin:10px 0 8px}
.ring{display:inline-flex;align-items:baseline;gap:4px;font-size:15px;font-weight:600}
.ring b{font-size:30px;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.why{list-style:none;padding:0;margin:16px 0 20px;display:flex;flex-wrap:wrap;gap:8px}
.why li{font-size:13.5px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.alt{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:center;border:1px solid var(--stroke);background:var(--glass);border-radius:var(--r-l);padding:12px;text-align:left}
.alt .pt{font-size:18px}
.alt .poster{padding:10px;border-radius:var(--r-m)}
.alt h4{font-size:24px;font-weight:700;letter-spacing:-.045em;line-height:1;margin:6px 0}
.alt .whyline{font-size:13.5px;color:var(--muted)}
.foot-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.note{font-size:13px;color:var(--muted)}

/* detail */
.dhero{border-radius:var(--r-xl);overflow:hidden;position:relative;isolation:isolate;min-height:460px;display:flex;align-items:flex-end;border:1px solid var(--stroke)}
.dhero .art{position:absolute;inset:0;z-index:-2}
.dhero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--bg) 2%,rgba(5,5,6,.5) 45%,transparent)}
.dhero .txt{padding:clamp(22px,4vw,40px)}
.dhero h2{font-size:clamp(52px,10vw,120px);font-weight:800;letter-spacing:-.07em;line-height:.84;margin:12px 0 14px;text-wrap:balance}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.who{font-size:clamp(24px,3.4vw,36px);font-weight:600;letter-spacing:-.045em;line-height:1.12;margin:40px 0 0;text-wrap:balance}
.who em{font-style:normal;color:var(--muted);font-weight:400}
.grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:36px}
.tile{background:var(--glass);border:1px solid var(--stroke);border-radius:var(--r-m);padding:16px}
.tile b{display:block;font-size:17px;font-weight:600;letter-spacing:-.025em;margin-top:6px;line-height:1.2}
.story{font-size:19px;line-height:1.55;letter-spacing:-.02em;color:#d6d6dc;margin:36px 0 0;max-width:60ch}
.block{margin-top:36px;padding:22px;border-radius:var(--r-l);border:1px dashed rgba(255,255,255,.14)}
.block h5{margin:0 0 6px;font-size:17px;font-weight:600;letter-spacing:-.025em}
.buy{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom,0px));margin-top:36px;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 20px;border-radius:999px;background:rgba(30,30,34,.72);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border:1px solid var(--stroke);box-shadow:0 20px 50px -20px #000}
.buy div{flex:1;min-width:0;font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buy small{color:var(--muted)}

body.dragging .poster,body.dragging .feature,body.dragging .dhero,body.dragging .win{outline:2px dashed var(--a1);outline-offset:3px}
.hint{margin:18px auto 0;font-size:13px;color:var(--muted)}
.art.img{overflow:hidden;background:#000}
.art.img i{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(36px) saturate(1.3) brightness(.55)}
.art.img img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.poster.has-img .pt{display:none}
.poster.has-img::after{background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 25%)}
.feature .art.img img,.dhero .art.img img,.win .art.img img{object-position:right center}
.poster.ovl::after{background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.85))}
.castblk{margin-top:28px}.castblk p{margin:8px 0 0;font-size:18px;letter-spacing:-.02em;line-height:1.5}
.art.img.hero img{position:absolute;inset:0;width:100%;height:100%}
footer{border-top:1px solid var(--stroke);color:var(--muted);font-size:13px}
footer .wrap{padding-block:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:820px){
  .moods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duo{grid-template-columns:1fr}
  .grid6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seg{display:none}
  .feature{min-height:520px}
  .hero{padding-block:48px 24px}
  .rank{grid-auto-columns:minmax(230px,250px)}
}
@media (max-width:420px){ .seg{display:none} }
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}

.opts.many{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:0}
.opts.many .opt{border:1px solid var(--stroke);border-radius:var(--r-l);background:var(--glass);padding:20px;flex-direction:column;align-items:flex-start;gap:6px;min-height:132px;justify-content:flex-end;transition:background .3s,border-color .3s}
.opts.many .opt b{font-size:clamp(24px,2.6vw,32px);color:var(--fg);letter-spacing:-.05em}
.opts.many .opt span{opacity:1;transform:none}
.opts.many .opt .arrow{display:none}
.opts.many .opt:hover{background:var(--glass-2)}.opts.many .opt:hover b{transform:none}
.opts.many .opt[aria-pressed="true"]{border-color:var(--a1)}.opts.many .opt[aria-pressed="true"] b{transform:none}
.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:10px}
.modec{border:1px solid var(--stroke);background:var(--glass);border-radius:var(--r-xl);padding:28px;text-align:left;display:flex;flex-direction:column;gap:10px;min-height:250px;justify-content:flex-end;transition:background .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.modec:hover{background:var(--glass-2);transform:translateY(-3px)}
.modec b{font-size:clamp(44px,6vw,72px);font-weight:800;letter-spacing:-.065em;line-height:.9}
.modec:first-child b{background:linear-gradient(100deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.modec>span:last-child{color:var(--muted);font-size:15px;max-width:34ch}
.revs{margin-top:44px}
.rev{margin:0 0 14px;padding:24px;border-radius:var(--r-l);background:var(--glass);border:1px solid var(--stroke)}
.rev blockquote{margin:0 0 14px;font-size:clamp(22px,2.8vw,30px);font-weight:600;letter-spacing:-.04em;line-height:1.15;text-wrap:balance}
.rev:first-of-type blockquote{font-size:clamp(26px,3.6vw,40px)}
.rev figcaption{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:14px;color:var(--muted)}
.rev figcaption b{color:var(--fg);font-weight:600}
.rev .stars{color:var(--a1);letter-spacing:.08em}
.rev a{color:var(--fg);margin-left:auto;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
@media (max-width:820px){.opts.many{grid-template-columns:repeat(2,minmax(0,1fr))}.modes{grid-template-columns:1fr}.modec{min-height:180px}.rev a{margin-left:0}}

/* ===== Pro Design ronde, 24 oktober 2026 =====
   Merkblad De Musicalgids
   Kleuren: Zaaldonker #050506 · Toneelvloer #0d0d10 · Spotlight #ffd23f · Amberlamp #ffb000 · Velvet #b49cff · Wit licht #f5f5f7
   Letters: Geist voor alles wat je leest (zwaar, strak, Apple-achtig), Geist Mono alleen voor cijfers en data
   Toon: een ervaren vriend uit de zaal die precies weet wat bij jouw avond past
   Signatuur: de lichtbundel die opengaat, één keer, bij binnenkomst */
.grad{background:none;-webkit-text-fill-color:currentColor;color:var(--a1)}
.rh .grad{color:inherit}
.pill.lit{background:var(--a1);color:#0a0a0a;box-shadow:0 10px 34px -12px var(--a1)}
.pill.lit:hover{filter:brightness(1.06)}
.pill{transition:transform .18s ease-out,filter .18s ease-out}
.pill:active,.opt:active,.card:active .poster,.modec:active,.mood:active{transform:scale(.97)}
.bar i{background:var(--a1)}
.badge.hot{background:var(--a1);color:#0a0a0a}
.opt[aria-pressed="true"] b{background:none;-webkit-text-fill-color:currentColor;color:var(--a1)}
.modec:first-child b{background:none;-webkit-text-fill-color:currentColor;color:var(--a1)}
.mark{background:var(--a1)}
.rev .stars{color:var(--a1)}
/* labels: geen kleine kapitalen boven elke kop meer */
.label{font-family:var(--font);font-size:14px;letter-spacing:-.01em;text-transform:none;color:var(--muted);font-weight:500}
.tile .label{font-size:13px}
/* hero: volle letter, geen dunne regel */
.hero h1 .l1{font-weight:800;letter-spacing:-.065em}
.hero p{color:#b4b4bc}
.beam{animation:none;background:radial-gradient(38% 55% at 50% 0%,color-mix(in srgb,var(--a1) 42%,transparent),transparent 70%)}
/* het ene georkestreerde moment: het doek gaat op */
@keyframes beamOpen{from{opacity:0;transform:translateX(-50%) scaleX(.15)}to{opacity:.75;transform:translateX(-50%) scaleX(1)}}
@keyframes lineUp{from{opacity:0;transform:translateY(.25em)}}
.beam{animation:beamOpen .9s cubic-bezier(.2,.8,.2,1) both}
.hero h1 span{display:inline-block;animation:lineUp .7s cubic-bezier(.2,.8,.2,1) both}
.hero h1 .l1{animation-delay:.15s}.hero h1 .l2{animation-delay:.3s}
.hero p,.hero .ctas,.hero .stats{animation:lineUp .6s ease-out both}
.hero p{animation-delay:.4s}.hero .ctas{animation-delay:.48s}.hero .stats{animation-delay:.56s}
/* geen schaal-sprong op elke kaart, wel licht dat aangaat */
.card:hover .poster,.card:focus-visible .poster{transform:none;box-shadow:inset 0 0 0 2px var(--a1),0 24px 50px -24px color-mix(in srgb,var(--a1) 60%,transparent)}
.poster{transition:box-shadow .2s ease-out}
.modec:hover{transform:none}
/* tekst nooit meer over de foto: beeld en tekst naast of onder elkaar */
.feature,.win,.dhero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;min-height:0;background:var(--bg-2)}
.feature::after,.win::after,.dhero::after{display:none}
.feature .art,.win .art,.dhero .art{position:relative;inset:auto;z-index:0;order:2;min-height:420px}
.feature .txt,.win .txt,.dhero .txt{order:1;align-self:center;max-width:none}
.feature .art.img img,.dhero .art.img img,.win .art.img img{object-fit:cover;object-position:center}
.feature h2{font-size:clamp(48px,6.4vw,96px)}
.feature p{color:#c9c9d0}
.win h3{font-size:clamp(40px,5.6vw,72px)}
.dhero h2{font-size:clamp(46px,7vw,92px)}
.chip{background:rgba(255,255,255,.08)}
.why li{background:rgba(255,255,255,.07)}
.story{color:#e2e2e6}
@media (max-width:820px){
  .feature,.win,.dhero{grid-template-columns:1fr}
  .feature .art,.win .art,.dhero .art{order:0;min-height:0;aspect-ratio:4/3}
  .feature{min-height:0}
}

/* verificatieronde 1: beeld altijd heel, tekst eronder */
.feature,.win,.dhero{min-height:0!important}
.feature .art,.win .art,.dhero .art{align-self:start;padding:0!important}
.feature,.win,.dhero{grid-template-columns:1fr}
.feature .art,.win .art,.dhero .art{order:0;min-height:0;aspect-ratio:auto;background:#000}
.feature .art.img.hero img,.win .art.img.hero img,.dhero .art.img.hero img{position:static;display:block;width:100%;height:auto}
.feature .art:not(.hero),.win .art:not(.hero),.dhero .art:not(.hero){aspect-ratio:21/9}
.feature .txt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 48px;align-items:end;padding:clamp(22px,4vw,44px)}
.feature .txt>.chip{grid-column:1/-1;justify-self:start}
.feature .txt>h2{margin:0}.feature .txt>p{margin:0}.feature .txt>.ctas{grid-column:1/-1;margin-top:12px}
.ring{flex-wrap:wrap;row-gap:2px}
@media (max-width:820px){
  .feature .txt{grid-template-columns:1fr}
  .row-head{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ===== één beeldformaat: liggend 2:1, overal ===== */
.poster{aspect-ratio:2/1;border-radius:var(--r-m);padding:12px}
.poster .art.img.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster.has-img::after{background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 40%)}
.rail{grid-auto-columns:minmax(280px,320px)}
.rank{grid-auto-columns:minmax(380px,420px)}
.rcard .n{font-size:clamp(110px,11vw,150px);margin-right:-18px}
.alt{grid-template-columns:180px minmax(0,1fr)}
.alt .poster{padding:0}
.feature .art,.win .art,.dhero .art{aspect-ratio:2/1}
@media (max-width:820px){
  .rail{grid-auto-columns:minmax(250px,270px)}
  .rank{grid-auto-columns:minmax(300px,320px)}
  .rcard .n{font-size:110px}
  .alt{grid-template-columns:130px minmax(0,1fr)}
}

/* ===== letters: Unbounded voor koppen en cijfers, Onest voor tekst ===== */
:root{--font:"Onest",-apple-system,system-ui,sans-serif;--display:"Unbounded","Onest",system-ui,sans-serif;--mono:"Onest",system-ui,sans-serif}
body{letter-spacing:0}
.hero h1,.hero h1 .l1,.feature h2,.row-head h3,.mood b,.rcard .n,.pt,.rh,.win h3,.dhero h2,.opt b,.opts.many .opt b,.modec b,.stat b,.alt h4,.brand,.ghostnum,.ring b,.rev blockquote,.calc-t b{font-family:var(--display);letter-spacing:-.025em}
.hero h1{font-size:clamp(40px,7.6vw,118px);line-height:.98;font-weight:700}
.hero h1 .l1{font-weight:700}
.feature h2{font-size:clamp(34px,4.6vw,66px);line-height:1;font-weight:700}
.row-head h3{font-size:clamp(20px,2.3vw,28px);font-weight:600}
.mood b{font-size:clamp(18px,1.8vw,24px);font-weight:600}
.rcard .n{font-size:clamp(84px,8vw,118px);font-weight:800;letter-spacing:-.06em;line-height:.82}
.rh{font-size:clamp(36px,6.4vw,84px);line-height:1;font-weight:700}
.win h3{font-size:clamp(30px,4vw,52px);line-height:1;font-weight:700}
.dhero h2{font-size:clamp(32px,5vw,66px);line-height:1;font-weight:700}
.opt b{font-size:clamp(26px,4.6vw,58px);line-height:1.05;font-weight:700}
.opts.many .opt b{font-size:clamp(18px,1.9vw,24px)}
.modec b{font-size:clamp(32px,4vw,52px)}
.stat b{font-size:clamp(30px,4vw,48px);font-weight:700}
.alt h4{font-size:clamp(17px,1.8vw,21px);font-weight:600;line-height:1.1}
.brand{font-weight:700;font-size:14px;letter-spacing:-.01em}
.ghostnum{letter-spacing:-.06em}
.rev blockquote{font-size:clamp(19px,2.2vw,25px);font-weight:500;line-height:1.25}
.rev:first-of-type blockquote{font-size:clamp(22px,2.8vw,32px)}
.who{letter-spacing:-.02em}
.qn{font-variant-numeric:tabular-nums;font-size:13px}
.hero p,.feature p{letter-spacing:-.005em}
/* berekening */
.calc{margin-top:22px;border:1px solid var(--stroke);border-radius:var(--r-l);background:var(--glass);padding:0 20px}
.calc summary{cursor:pointer;padding:18px 0;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between}
.calc summary::after{content:"+";color:var(--a1);font-size:22px;line-height:1}
.calc[open] summary::after{content:"−"}
.calc h5{font-size:15px;margin:18px 0 6px;color:var(--a1);font-weight:600}
.calc p,.calc li{color:#c9c9d0;font-size:15px;line-height:1.5;margin:0 0 6px}
.calc ul{padding-left:18px;margin:0 0 6px}
.tblwrap{overflow-x:auto;margin:12px 0 4px}
.calc-t{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
.calc-t th,.calc-t td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--stroke);vertical-align:top}
.calc-t th{font-weight:600;color:var(--muted);font-size:13px}
.calc-t td small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.calc-t b{font-size:18px;font-weight:600}
.calc-t tr.tot td{border-bottom:0;padding-top:14px}
.calc-t tr.tot b{color:var(--a1)}
.calc{margin-bottom:6px}.calc[open]{padding-bottom:16px}
/* rijen: geen verticale wiebel */
.rail{overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.rank{padding-bottom:20px}

/* ===== reparaties voor livegang ===== */
html.locked,html.locked body{overflow:hidden}
.overlay{overscroll-behavior:contain}
/* contrast: keuzes altijd leesbaar, uitleg altijd zichtbaar */
.opt b{color:rgba(255,255,255,.78)}
.opt span{opacity:1;transform:none;color:#b4b4bc}
.opt:hover b,.opt:focus-visible b{color:var(--fg)}
.backlbl{font-weight:600;font-size:15px}
.back-top3{font-size:18px}
.footr{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
@media (max-width:600px){.opt .arrow{display:none}}
.accbtn{background:var(--glass);border:1px solid var(--stroke);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--fg)}

/* ===== letter: Schibsted Grotesk (richting D, strak en helder) ===== */
:root{--font:"Schibsted Grotesk",-apple-system,"SF Pro Display",system-ui,sans-serif;--display:"Schibsted Grotesk",-apple-system,"SF Pro Display",system-ui,sans-serif;--mono:"Schibsted Grotesk",system-ui,sans-serif}
body{letter-spacing:-.005em}
.hero h1,.hero h1 .l1,.feature h2,.row-head h3,.mood b,.rcard .n,.pt,.rh,.win h3,.dhero h2,.opt b,.opts.many .opt b,.modec b,.stat b,.alt h4,.brand,.ghostnum,.ring b,.rev blockquote,.calc-t b{letter-spacing:-.04em}
.hero h1{font-size:clamp(50px,9.4vw,146px);line-height:.92;font-weight:800}
.hero h1 .l1{font-weight:800}
.feature h2{font-size:clamp(44px,6vw,88px);line-height:.95;font-weight:800}
.row-head h3{font-size:clamp(24px,2.8vw,34px);font-weight:700}
.mood b{font-size:clamp(22px,2.3vw,29px);font-weight:700}
.rcard .n{font-size:clamp(104px,10vw,146px);font-weight:900;letter-spacing:-.07em;line-height:.8}
.rh{font-size:clamp(46px,8vw,108px);line-height:.92;font-weight:800}
.win h3{font-size:clamp(38px,5.2vw,68px);line-height:.95;font-weight:800}
.dhero h2{font-size:clamp(42px,6.6vw,88px);line-height:.94;font-weight:800}
.opt b{font-size:clamp(34px,6.2vw,78px);line-height:1;font-weight:800}
.opts.many .opt b{font-size:clamp(21px,2.3vw,29px);font-weight:700}
.modec b{font-size:clamp(40px,5vw,64px);font-weight:800}
.stat b{font-size:clamp(38px,5.2vw,60px);font-weight:800}
.alt h4{font-size:clamp(19px,2vw,24px);font-weight:700;line-height:1.05}
.brand{font-weight:800;font-size:15px;letter-spacing:-.03em}
.rev blockquote{font-size:clamp(21px,2.5vw,28px);font-weight:600;line-height:1.2;letter-spacing:-.025em}
.rev:first-of-type blockquote{font-size:clamp(25px,3.2vw,36px)}
.calc-t b{letter-spacing:-.02em}
.hero p.hero-lead{max-width:48ch;text-wrap:balance}

/* socials */
.socs{margin-top:44px}
.soc-row{display:flex;flex-wrap:wrap;gap:10px}
.soc{display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--stroke);color:var(--fg);text-decoration:none;font-weight:600;font-size:15px;min-height:48px;transition:background .18s ease-out,border-color .18s ease-out}
.soc:hover,.soc:focus-visible{background:var(--glass-2);border-color:var(--a1)}
.soc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.soc svg .dot{fill:currentColor;stroke:none}
.rev blockquote.noq{font-size:clamp(19px,2.2vw,24px);color:var(--muted);font-weight:600}

/* ===== huisstijl Voetlicht: nachtblauw en koraal =====
   Nachtblauw #060b14 · Zaalblauw #0c1526 · Koraal #ff8a5c · Koraal diep #ff5a3d · Wit licht #eef3f8 · Stil blauwgrijs #9aa8b8 */
:root,:root[data-accent="velvet"]{--bg:#060b14;--bg-2:#0c1526;--fg:#eef3f8;--muted:#9aa8b8;--a1:#ff8a5c;--a2:#ff5a3d;--ink:#160803;--stroke:rgba(190,215,255,.11);--glass:rgba(150,185,235,.06);--glass-2:rgba(150,185,235,.11)}
.seg,.accbtn{display:none!important}
.pill.lit,.badge.hot{color:#160803}
.nav-inner{background:rgba(12,21,38,.66)}
.x{background:rgba(20,32,56,.75)}
.buy{background:rgba(14,24,44,.78)}
.hero p,.feature p,.story,.calc p,.calc li,.opt span{color:#b9c5d3}
.why li,.chip{background:rgba(150,185,235,.1)}
.art.img{background:#060b14}
.feature .art,.win .art,.dhero .art{background:#060b14}

/* ===== huisstijl Kobalt: merk in kobalt en warm wit, site op nachtblauw =====
   Nachtblauw #070c1c · Zaalblauw #0e1630 · Kobalt #2f4cf0 · Kobalt licht #7d93ff · Warm wit #f7f2e8 · Stil blauwgrijs #a9b0c8
   Woordmerk: "De Musical" rechtop, "gids" cursief */
:root,:root[data-accent="velvet"]{--bg:#070c1c;--bg-2:#0e1630;--fg:#f7f2e8;--muted:#a9b0c8;--a1:#7d93ff;--a2:#2f4cf0;--ink:#f7f2e8;--stroke:rgba(170,190,255,.12);--glass:rgba(125,147,255,.07);--glass-2:rgba(125,147,255,.13)}
.pill.lit,.badge.hot{background:#2f4cf0;color:#f7f2e8;box-shadow:0 10px 30px -12px #2f4cf0}
.pill.lit:hover{background:#3d58ff;filter:none}
.nav-inner{background:rgba(14,22,48,.7)}
.x{background:rgba(22,32,66,.78)}
.buy{background:rgba(16,24,54,.8)}
.hero p,.feature p,.story,.calc p,.calc li,.opt span{color:#c3c8da}
.why li,.chip{background:rgba(125,147,255,.12)}
.art.img,.feature .art,.win .art,.dhero .art{background:#070c1c}
.wm{font-weight:800;letter-spacing:-.035em;white-space:nowrap}
.wm em{font-style:italic;font-weight:800;color:var(--a1);letter-spacing:-.02em;padding-left:.02em}
.brand .wm{font-size:17px}
.wm-s{font-size:15px;color:var(--fg)}
.badge{background:rgba(7,12,28,.6)}
.soc:hover,.soc:focus-visible{border-color:var(--a1)}

/* ===== kobaltfamilie: Kobalt #2440e6 (hero, merk) · Diep kobalt #13218f (pagina) · Kobalt vlak #1b2db0 · Warm wit #f7f2e8 · Kobalt mist #c9d0ff */
:root,:root[data-accent="velvet"]{--bg:#13218f;--bg-2:#1b2db0;--fg:#f7f2e8;--muted:#c9d0ff;--a1:#f7f2e8;--a2:#f7f2e8;--ink:#2440e6;--stroke:rgba(247,242,232,.16);--glass:rgba(247,242,232,.07);--glass-2:rgba(247,242,232,.13)}
section.hero{background:#2440e6;margin-top:-70px;padding-top:140px}
.beam{background:radial-gradient(38% 55% at 50% 0%,rgba(247,242,232,.22),transparent 70%)}
.hero .grad{font-style:normal;letter-spacing:-.03em}
.pill.lit,.badge.hot{background:#f7f2e8;color:#2440e6;box-shadow:0 10px 30px -14px rgba(0,0,0,.45)}
.pill.lit:hover{background:#ffffff}
.pill.glass{background:rgba(247,242,232,.1);border-color:rgba(247,242,232,.25)}
.pill.big:not(.lit):not(.glass){background:#f7f2e8;color:#2440e6}
.nav-inner{background:rgba(27,45,176,.72);border-color:rgba(247,242,232,.18)}
.overlay{background:rgba(14,26,120,.86)}
.x{background:rgba(36,64,230,.8);border-color:rgba(247,242,232,.2)}
.buy{background:rgba(27,45,176,.88)}
.hero p,.feature p,.story,.calc p,.calc li,.opt span,.hero p.hero-lead{color:#dfe3ff}
.hero p b{color:#f7f2e8}
.why li,.chip{background:rgba(247,242,232,.12)}
.art.img,.feature .art,.win .art,.dhero .art{background:#0d1870}
.feature,.win,.dhero{background:#1b2db0}
.badge{background:rgba(13,24,112,.7)}
.card:hover .poster,.card:focus-visible .poster{box-shadow:inset 0 0 0 2px #f7f2e8,0 24px 50px -24px rgba(0,0,0,.6)}
.rcard .n{-webkit-text-stroke:2px rgba(247,242,232,.35);color:var(--bg)}
.wm em{color:#f7f2e8}
.opt b{color:rgba(247,242,232,.8)}
.opt[aria-pressed="true"] b{color:#ffffff;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.bar{background:rgba(247,242,232,.18)}
.calc h5{color:#f7f2e8}
.calc-t tr.tot b,.ring b{color:#f7f2e8}
.mood i{opacity:.35}
:focus-visible{outline-color:#f7f2e8}
footer{border-top-color:rgba(247,242,232,.16)}

/* één knoppensysteem: hoofdknop warm wit met kobalt tekst, tweede knop witte rand */
.pill,.pill.big,.pill.lit,.badge.hot{background:#f7f2e8!important;color:#2440e6!important;border:1.5px solid #f7f2e8!important;box-shadow:none}
.pill:hover,.pill.lit:hover{background:#ffffff!important}
.pill.glass,.soc,.accbtn{background:transparent!important;color:#f7f2e8!important;border:1.5px solid rgba(247,242,232,.5)!important}
.pill.glass:hover,.soc:hover,.soc:focus-visible{background:rgba(247,242,232,.1)!important;border-color:#f7f2e8!important}
.chip,.why li,.badge{color:#f7f2e8}

/* ===== Inktkobalt: Inkt #0b1040 · Inkt vlak #131a5c · Kobalt #2f4cf0 · Kobalt licht #9aa8ff · Warm wit #f7f2e8 · Mist #c3c9ee */
:root,:root[data-accent="velvet"]{--bg:#0b1040;--bg-2:#131a5c;--fg:#f7f2e8;--muted:#c3c9ee;--a1:#9aa8ff;--a2:#2f4cf0;--ink:#f7f2e8;--stroke:rgba(200,210,255,.14);--glass:rgba(154,168,255,.07);--glass-2:rgba(154,168,255,.13)}
section.hero{background:transparent}
.beam{background:radial-gradient(38% 55% at 50% 0%,rgba(47,76,240,.55),transparent 70%)}
.hero .grad{color:#9aa8ff}
.pill,.pill.big,.pill.lit,.badge.hot{background:#2f4cf0!important;color:#f7f2e8!important;border:1.5px solid #2f4cf0!important}
.pill:hover,.pill.lit:hover{background:#4360ff!important;border-color:#4360ff!important}
.pill.glass,.soc,.accbtn{background:transparent!important;color:#f7f2e8!important;border:1.5px solid rgba(247,242,232,.45)!important}
.nav-inner{background:rgba(19,26,92,.75);border-color:rgba(200,210,255,.16)}
.overlay{background:rgba(9,13,52,.9)}
.x{background:rgba(19,26,92,.85);border-color:rgba(200,210,255,.22)}
.buy{background:rgba(19,26,92,.92)}
.feature,.win,.dhero{background:#131a5c}
.art.img,.feature .art,.win .art,.dhero .art,.gal-it{background:#080c30}
.badge{background:rgba(9,13,52,.72)}
.hero p,.feature p,.story,.calc p,.calc li,.opt span,.hero p.hero-lead{color:#d3d8f5}
.wm em{color:#9aa8ff}
.bar i{background:#2f4cf0}
.opt[aria-pressed="true"] b{color:#9aa8ff;text-decoration:none}
.calc h5,.calc-t tr.tot b,.ring b{color:#9aa8ff}
.rcard .n{-webkit-text-stroke:2px rgba(154,168,255,.4)}
.card:hover .poster,.card:focus-visible .poster{box-shadow:inset 0 0 0 2px #9aa8ff,0 24px 50px -24px rgba(47,76,240,.6)}
.mood i{opacity:.55}
:focus-visible{outline-color:#9aa8ff}
.gal-box{background:rgba(9,13,52,.95)}
.gal-x,.gal-nav{background:rgba(47,76,240,.85)}

/* scènefoto's */
.gal{margin-top:40px}
.gal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gal-it{padding:0;border:0;background:#0d1870;border-radius:14px;overflow:hidden;aspect-ratio:3/2;cursor:zoom-in}
.gal-it img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease-out}
.gal-more{margin-top:12px;background:transparent;color:var(--fg);border:1.5px solid rgba(247,242,232,.45);border-radius:999px;padding:10px 16px;font-weight:600;font-size:14px}
.gal-it:hover img,.gal-it:focus-visible img{transform:scale(1.03)}
.gal-box{position:fixed;inset:0;z-index:120;background:rgba(8,14,60,.94);display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top,0px)) 20px}
.gal-box figure{margin:0;max-width:min(1100px,100%);display:flex;flex-direction:column;gap:12px}
.gal-box img{max-width:100%;max-height:78vh;border-radius:12px;object-fit:contain}
.gal-box figcaption{color:#dfe3ff;font-size:14px;display:flex;justify-content:space-between;gap:12px}
.gal-x,.gal-nav{position:absolute;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(247,242,232,.5);background:rgba(36,64,230,.8);color:#f7f2e8;font-size:18px}
.gal-x{top:max(16px,env(safe-area-inset-top,0px));right:16px}
.gal-nav.prev{left:16px;top:50%}.gal-nav.next{right:16px;top:50%}
@media (max-width:820px){.gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gal-nav{top:auto!important;bottom:20px}}
a.pill{text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.sp{margin-top:40px}.sp-l{list-style:none;margin:0;padding:0;border-top:1px solid rgba(247,242,232,.14)}
.sp-r{display:grid;grid-template-columns:170px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(247,242,232,.14)}
.sp-d{font-weight:700;font-variant-numeric:tabular-nums}.sp-t{color:var(--muted)}.sp-t b{color:var(--fg);font-weight:600;margin-right:8px}
.sp-k{color:var(--fg);text-decoration:none;border:1.5px solid rgba(247,242,232,.45);border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px;white-space:nowrap}
.sp-k:hover{background:#2f4cf0;border-color:#2f4cf0}
@media (max-width:620px){.sp-r{grid-template-columns:1fr auto;gap:4px 12px}.sp-d{grid-column:1/-1}}

/* hero met beeld */
.hero.bb{padding-top:112px;padding-bottom:28px}
.hero.bb .wrap{text-align:left}
.bb-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero.bb h1{font-size:clamp(44px,5.4vw,88px);line-height:.95;margin:0 0 20px}
.hero.bb p.hero-lead{margin:0 0 26px;max-width:34ch;font-size:clamp(17px,1.5vw,20px)}
.hero.bb .ctas{justify-content:flex-start;flex-wrap:wrap}
.hero.bb p.bb-meta{margin:22px 0 0;font-size:14px;color:#aeb6e6;max-width:none}
.bb-meta b{color:#f7f2e8;font-weight:700}
.bb-stage{position:relative;border-radius:22px;overflow:hidden;background:#131a5c;box-shadow:0 30px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(247,242,232,.08)}
.bb-sp{display:block;aspect-ratio:2/1;margin-bottom:78px}
.bb-slide{position:absolute;inset:0;display:flex;flex-direction:column;padding:0;border:0;background:#131a5c;color:var(--fg);text-align:left;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s;font:inherit}
.bb-slide.on{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.hero .bb-img{position:relative;display:block;aspect-ratio:2/1;overflow:hidden}
.hero .bb-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 6s ease-out}
.bb-slide.on .bb-img img{transform:scale(1.04)}
.bb-cap{height:78px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 22px;background:#131a5c}
.bb-cap small{display:block;font-size:13px;color:#aeb6e6;margin-bottom:2px}
.bb-cap b{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.03em}
.bb-go{flex:none;background:#2f4cf0;color:#f7f2e8;border-radius:999px;padding:10px 16px;font-weight:600;font-size:15px}
.bb-dots{position:absolute;right:16px;bottom:94px;display:flex;gap:6px;z-index:2;background:rgba(11,16,64,.55);padding:7px 9px;border-radius:999px}
.bb-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(247,242,232,.45);cursor:pointer}
.bb-dots button.on{background:#f7f2e8;width:22px;border-radius:999px}
@media (max-width:860px){
 .hero.bb{padding-top:88px;padding-bottom:12px}
 .bb-grid{grid-template-columns:1fr;gap:22px}
 .bb-stage{order:-1;border-radius:18px}
 .hero.bb h1{font-size:clamp(38px,11vw,58px);margin-bottom:14px}
 .hero.bb p.hero-lead{margin-bottom:20px}
 .bb-sp{margin-bottom:66px}.bb-cap{height:66px;padding:0 14px}.bb-cap b{font-size:20px}.bb-cap small{font-size:12px}
 .bb-go{padding:8px 13px;font-size:14px}.bb-dots{bottom:80px;right:10px}
 .hero.bb .ctas .pill.big{flex:1 1 auto}
}
/* stipjes onder het beeld, nooit over de foto */
.bb-sp{margin-bottom:106px!important}
.bb-slide{bottom:28px}
.bb-dots{left:50%!important;right:auto!important;bottom:9px!important;transform:translateX(-50%);background:none!important;padding:0!important}
.bb-dots button{background:rgba(247,242,232,.35)}
@media (max-width:860px){.bb-sp{margin-bottom:94px!important}}

/* mobiel: staande kaarten */
@media (max-width:860px){
 .rail{grid-auto-columns:clamp(128px,37vw,170px);gap:12px}
 .rail .poster{aspect-ratio:2/3;border-radius:12px}
 .rail .poster.has-img:not(.pm){background:#131a5c}
 .rail .poster.has-img:not(.pm) .art{position:absolute;inset:0 0 auto 0;aspect-ratio:2/1;height:auto}
 .rail .poster.has-img:not(.pm) .pt{display:block;position:absolute;left:10px;right:10px;bottom:12px;font-size:17px;line-height:1}
 .rail .poster.has-img::after{background:none}
 .rail.rank{grid-auto-columns:clamp(160px,46vw,210px)}
 .rcard .n{font-size:86px;margin-right:-14px}
 .card .cap{font-size:13px}.card .cap small{font-size:12px}
 .bb-po .bb-sp{aspect-ratio:2/3;width:min(76vw,330px);margin-inline:auto}
 .bb-po .bb-img{aspect-ratio:2/3;width:min(76vw,330px);margin-inline:auto}
 .bb-po.bb-stage{background:none;box-shadow:none;border-radius:0;overflow:visible}
 .bb-po .bb-slide{background:none}
 .bb-po .bb-img{border-radius:16px;box-shadow:0 30px 60px -24px rgba(0,0,0,.8)}
 .bb-po .bb-cap{background:none;width:min(76vw,330px);margin-inline:auto;padding:0 2px}
 .bb-po .bb-dots{left:50%;right:auto;transform:translateX(-50%);bottom:76px}
}
@media (prefers-reduced-motion:reduce){.bb-slide,.bb-slide.on{transition:none}.bb-slide.on .bb-img img{transform:none}}

/* inschrijven */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.subblk{margin-top:40px;padding:24px;border-radius:20px;background:#131a5c;box-shadow:inset 0 0 0 1px rgba(247,242,232,.1)}
.sub-quiz h4{font-family:var(--display);font-size:24px;letter-spacing:-.03em;margin:0 0 4px}
.sub-quiz>p{margin:0 0 14px;color:var(--muted)}
.subf{display:flex;flex-direction:column;gap:12px;margin:0}
.subrow{display:flex;gap:10px;flex-wrap:wrap}
.subrow input{flex:1 1 220px;min-width:0;height:50px;border-radius:999px;border:1.5px solid rgba(247,242,232,.35);background:#0b1040;color:var(--fg);padding:0 20px;font:inherit;font-size:16px}
.subrow input:focus{outline:none;border-color:#9aa8ff;box-shadow:0 0 0 3px rgba(154,168,255,.3)}
.subrow .pill{height:50px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4;color:#d3d8f5;cursor:pointer}
.chk input{width:20px;height:20px;margin:1px 0 0;accent-color:#2f4cf0;flex:none}
.alerts{border:0;margin:6px 0 2px;padding:0;display:flex;flex-direction:column;gap:10px}
.regio{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.regio select{height:46px;border-radius:12px;border:1.5px solid rgba(247,242,232,.35);background:#0b1040;color:var(--fg);padding:0 12px;font:inherit;font-size:16px;max-width:280px}
.subnote{margin:0;font-size:13px;color:#aeb6e6}.subnote a{color:#f7f2e8}
.subok{margin:0;font-size:15px;color:#f7f2e8}.subok.err{color:#ffb4a8}
.gidsblk{margin-top:72px;padding:56px 0;background:#2f4cf0}
.gids-in{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.gidsblk .wm{font-size:20px}
.gidsblk h3{font-family:var(--display);font-size:clamp(28px,3.4vw,44px);letter-spacing:-.04em;line-height:1;margin:10px 0 10px;color:#f7f2e8}
.gidsblk p{margin:0;color:#e4e8ff}
.gidsblk .subrow input{background:#f7f2e8;color:#0b1040;border-color:#f7f2e8}
.gidsblk .subrow .pill,.gidsblk .subrow .pill.lit{background:#0b1040!important;color:#f7f2e8!important;border-color:#0b1040!important}
.gidsblk .subnote,.gidsblk .subnote a{color:#e4e8ff}
@media (max-width:860px){.gids-in{grid-template-columns:1fr;gap:20px}.gidsblk{padding:40px 0}.subblk{padding:18px}}

/* zoeken */
.zoek{padding:8px 0 4px;scroll-margin-top:88px}
.zk{position:relative;display:flex;align-items:center;max-width:720px}
.zk input{width:100%;height:56px;border-radius:999px;border:1.5px solid rgba(247,242,232,.28);background:#131a5c;color:var(--fg);font:inherit;font-size:17px;padding:0 52px 0 52px;-webkit-appearance:none;appearance:none}
.zk input::placeholder{color:#aeb6e6}
.zk input:focus{outline:none;border-color:#9aa8ff;box-shadow:0 0 0 3px rgba(154,168,255,.28)}
.zk input::-webkit-search-cancel-button{display:none}
.zk-ic{position:absolute;left:19px;color:#aeb6e6;display:flex}
.zk-x{position:absolute;right:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(247,242,232,.12);color:var(--fg);font-size:14px;cursor:pointer}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chipf{height:40px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(247,242,232,.3);background:transparent;color:var(--fg);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.chipf[aria-pressed=true]{background:#2f4cf0;border-color:#2f4cf0}
#zres:empty{display:none}
.zr-head{display:flex;justify-content:space-between;align-items:center;margin:22px 0 10px;font-size:15px;color:var(--muted)}
.zr-head b{color:var(--fg);font-size:20px;font-family:var(--display);letter-spacing:-.02em}
.zr-reset,.linkbtn{background:none;border:0;color:#9aa8ff;font:inherit;font-weight:600;cursor:pointer;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.zr{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.zr-it{width:100%;display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:10px 14px 10px 10px;border-radius:16px;border:0;background:#131a5c;color:var(--fg);text-align:left;font:inherit;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(247,242,232,.08)}
.zr-it:hover,.zr-it:focus-visible{box-shadow:inset 0 0 0 2px #9aa8ff}
.zr-po{width:64px;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:#0b1040;display:block}
.zr-po img{width:100%;height:100%;object-fit:cover;display:block}
.zr-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.zr-tx b{font-size:17px;letter-spacing:-.02em}
.zr-tx span{font-size:14px;color:var(--muted)}
.zr-d{color:#f7f2e8!important;font-weight:600}.zr-d em{font-style:normal;font-weight:400;color:var(--muted)}
.zr-go{font-size:20px;color:#9aa8ff}
.zr-none{color:var(--muted)}
@media (max-width:860px){.zk input{height:52px;font-size:16px}.zr{grid-template-columns:1fr}.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}.chips::-webkit-scrollbar{display:none}.chipf{flex:none}}

.revchip{display:inline-flex;align-items:center;gap:6px;margin:4px 0 10px;padding:6px 12px;border-radius:999px;background:rgba(247,242,232,.1);color:#f7f2e8;text-decoration:none;font-size:14px}
.revchip .stars{color:#ffd166;letter-spacing:1px}.revchip span:last-child{color:#d3d8f5}
.sp-acts{display:flex;gap:8px;align-items:center}
.sp-cal{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(247,242,232,.35);background:transparent;color:var(--fg);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sp-cal:hover{background:rgba(247,242,232,.12)}

/* samen kiezen */
.samen h4,.sm-banner h4{font-family:var(--display);font-size:24px;letter-spacing:-.03em;margin:0 0 4px}
.sm-note{margin:0 0 14px;color:var(--muted)}
.sm-sub{margin:18px 0 8px;color:var(--muted);font-size:14px}
.sm-share{display:flex;gap:10px;flex-wrap:wrap}
.sm-share input{flex:1 1 220px;min-width:0;height:48px;border-radius:999px;border:1.5px solid rgba(247,242,232,.3);background:#0b1040;color:var(--fg);padding:0 18px;font:inherit;font-size:15px}
.sm-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.sm-top{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:sm}
.sm-banner{margin-top:8px;margin-bottom:20px;padding:22px;border-radius:20px;background:#2f4cf0}
.sm-banner .sm-note{color:#e4e8ff}
.sm-banner .pill.glass{border-color:rgba(247,242,232,.6)}
.sm-res:empty{display:none}.sm-res{margin-top:16px}

.trl{margin-top:40px}
.trl-play,.trl-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:16px;overflow:hidden;background:#000;padding:0;cursor:pointer}
.trl-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trl-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:#2f4cf0;color:#f7f2e8;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.trl-btn svg{margin-left:4px}
.trl-play:hover .trl-btn{transform:translate(-50%,-50%) scale(1.06)}
.trl-note{margin:8px 0 0;font-size:13px;color:#aeb6e6}

/* zoekblok los van de Musicalwijzer */
.zoek{margin-top:28px}
.zk-card{padding:26px;border-radius:24px;background:#131a5c;box-shadow:inset 0 0 0 1px rgba(247,242,232,.08)}
.zk-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.zk-head h2{margin:0;font-family:var(--display);font-size:clamp(24px,2.6vw,32px);letter-spacing:-.035em;line-height:1}
.zk-head p{margin:0;color:var(--muted);font-size:15px}
.zk-card .zk input{background:#0b1040}
.zk-card .zr-it{background:#0b1040}
.hero.bb{padding-bottom:8px}
/* footer */
.foot-links{display:flex;gap:22px;flex-wrap:wrap;width:100%;margin-bottom:14px}
.foot-links a{color:#f7f2e8;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.foot-links a:hover{text-decoration:underline;text-underline-offset:3px}
footer .wrap{flex-wrap:wrap}
@media (max-width:860px){.zoek{margin-top:20px}.zk-card{padding:18px;border-radius:20px;margin-inline:-4px}.zk-card .chips{margin-inline:0;padding-inline:0}}

.chipx{display:inline-flex;align-items:center;gap:6px}
.chipx[aria-pressed=true]{background:#2f4cf0;border-color:#2f4cf0}
.chipx[aria-expanded=true]{border-color:#9aa8ff}
.xpanel{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px;padding:14px;border-radius:16px;background:#0b1040}
.xp-in{height:46px;border-radius:999px;border:1.5px solid rgba(247,242,232,.3);background:#131a5c;color:var(--fg);font:inherit;font-size:16px;padding:0 16px;min-width:0}
#xp-pc{flex:1 1 180px}.xp-km{flex:none;width:auto}
.xp-loc{height:46px;display:inline-flex;gap:8px;align-items:center}
.xp-or{color:var(--muted);font-size:14px}
.xp-clear{background:none;border:0;color:#9aa8ff;font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.xp-msg{flex-basis:100%;margin:0;color:#ffb4a8;font-size:14px}.xp-msg:empty{display:none}
.km{font-style:normal;color:#f7f2e8;font-weight:600}
input[type=date].xp-in{color-scheme:dark}

.prk{margin-top:36px}
.prk-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0}
.prk-l div{padding:14px 16px;border-radius:14px;background:#131a5c}
.prk-l dt{font-size:13px;color:var(--muted);margin-bottom:2px}.prk-l dd{margin:0;font-weight:600}
.prk-t{margin:12px 0 0;color:#d3d8f5}
.lst{display:flex;align-items:center;gap:12px;margin-top:12px;padding:14px 16px;border-radius:14px;background:#131a5c;color:var(--fg);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(247,242,232,.08)}
.lst span:nth-child(2){flex:1;display:flex;flex-direction:column}.lst small{color:var(--muted);font-size:13px}
.lst:hover{box-shadow:inset 0 0 0 2px #1db954}
.prk-n{margin:10px 0 0;font-size:13px;color:#aeb6e6}

.uitg{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#0b1040;background:#ffd166;border-radius:6px;padding:2px 6px;margin:0 6px 4px 0;vertical-align:middle}

/* archief */
.archbar{display:flex;flex-direction:column;gap:4px;margin:18px 0 6px;padding:16px 18px;border-radius:18px;background:#131a5c;box-shadow:inset 0 0 0 1.5px #ffd166}
.archbar b{font-size:18px;color:#ffd166}
.archbar span{color:var(--muted);font-size:15px}
.zr-arch{margin-top:18px}
.zr-ah{margin:0 0 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#ds .row{margin-top:30px}
@media (prefers-reduced-motion:reduce){.hero h1 span,.hero p,.hero .ctas,.hero .stats,.beam{animation:none!important;opacity:1}}

/* ===== proef: verfijning na review ===== */
/* kop bovenaan: twee regels, niet drie */
@media (min-width:861px){.bb-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1.22fr)}.hero h1 .l1,.hero h1 .l2{white-space:nowrap}.hero h1{font-size:clamp(40px,5.6vw,84px)}}
/* geen sierlicht en geen zwevende schaduwen: vlakke kleur */
.beam{display:none}
.bb-stage{box-shadow:none}
.zk-card{box-shadow:none}
/* gevoelstegels: vlak vlak, geen lijn en geen vage vlek */
.mood{border:0;background:#131a5c}
.mood:hover{background:#1b2478}
.mood i{display:none}
/* labels op posters: dicht vlak in plaats van glas, en groter */
.badge{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0b1040;border:0;font-size:13px;padding:5px 10px}
.chip,.why li{backdrop-filter:none;-webkit-backdrop-filter:none}
.chip{background:#1b2478;font-size:13px}
/* leesbaarheid van de kaarten */
.card .cap{font-size:16px;line-height:1.3}
.card .cap small{font-size:14px;color:#c9cff5;margin-top:3px}
.row-head span{font-size:15px;color:#c9cff5}
.bb-cap small{font-size:14px;color:#c9cff5}
/* footer: geen haarlijn, de naam sluit de pagina groot af */
footer{border-top:0;font-size:15px}
footer .wrap{padding-block:48px 40px}
footer .footr{width:100%;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:18px}
footer .wm-s{font-size:clamp(44px,9.5vw,148px);line-height:.9;letter-spacing:-.05em}
.gidsblk .wm em{color:#ffffff}
/* rijen: pijlknoppen op apparaten met een muis */
.row-head{position:relative}
.rail-nav{display:none;gap:8px;margin-left:12px}
@media (pointer:fine) and (min-width:861px){.row-head{align-items:center;justify-content:flex-start}.row-head>span:not(.rail-nav){margin-left:auto}.rail-nav{display:inline-flex}.rail-nav[hidden]{display:none}}
.rail-nav button{width:42px;height:42px;border-radius:50%;border:0;background:#1b2478;color:#f7f2e8;display:grid;place-items:center;cursor:pointer;transition:background-color .2s,opacity .2s}
.rail-nav button:hover{background:#2f4cf0}
.rail-nav button:disabled{opacity:.35;cursor:default;background:#1b2478}
.rail-nav button:focus-visible{outline:3px solid #9aa8ff;outline-offset:2px}
/* kleine interactiedetails */
a,button,.card,.mood{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.overlay{overscroll-behavior:contain}
select{background-color:#131a5c;color:#f7f2e8}
.story,.who{max-width:62ch}
@media (max-width:860px){
  .card .cap{font-size:15px}.card .cap small{font-size:13px}
  .bb-cap small{font-size:13px}
  .badge{font-size:13px;top:8px;left:8px;padding:4px 8px;white-space:nowrap;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis}
  footer .wm-s{font-size:clamp(34px,11vw,72px)}
}