/* ---------- Rondleiding: speler ---------- */
.tour { --tc: #101423; display: grid; gap: 12px; }
.tour-screen { position: relative; border-radius: 20px; overflow: hidden; background: #101423; box-shadow: 0 18px 40px rgba(16,20,35,.25); }
.tour-stage-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.tour-stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; background: #FCFBF5; overflow: hidden; font-family: var(--font-body, "DM Sans", system-ui, sans-serif); color: #101423; }
.tour-caption { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: min(92%, 900px); background: rgba(16,20,35,.86); color: #fff; font-size: clamp(13px, 1.6vw, 19px); line-height: 1.35; padding: 8px 16px; border-radius: 12px; text-align: center; pointer-events: none; transition: opacity .25s; }
.tour-caption:empty { opacity: 0; }
.tour-bigplay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 0; background: rgba(16,20,35,.55); color: #fff; font: 700 18px var(--font-body, sans-serif); cursor: pointer; }
.tour-bigplay svg { transition: transform .2s; filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
.tour-bigplay:hover svg { transform: scale(1.08); }
.tour.is-started .tour-bigplay { display: none; }
.tour-controls { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--peach, #F2AA91); border-radius: 16px; padding: 8px 12px; flex-wrap: wrap; }
.tc-btn { border: 0; background: #f3eee4; color: #101423; min-width: 38px; height: 38px; border-radius: 10px; font-size: 16px; cursor: pointer; font-weight: 700; }
.tc-btn:hover { background: #ffe2d3; }
.tc-play { background: #EC644F; color: #fff; }
.tc-play:hover { background: #d9523d; }
.tc-txt { padding: 0 12px; font-size: 14px; }
.tc-btn[aria-pressed="true"] { background: #101423; color: #fff; }
.tc-time { font-variant-numeric: tabular-nums; font-size: 13px; color: #5a6174; min-width: 86px; }
.tc-bar { position: relative; flex: 1 1 200px; height: 10px; border-radius: 99px; background: #ebe7dc; cursor: pointer; }
.tc-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #EC644F; border-radius: 99px; width: 0; pointer-events: none; }
.tc-marks i { position: absolute; top: -3px; width: 2px; height: 16px; background: #fff; opacity: .9; }
.tour-chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; counter-reset: ch; }
.tour-chapters li button { width: 100%; text-align: left; border: 1px solid #ebe3d6; background: #fff; border-radius: 12px; padding: 9px 12px; cursor: pointer; font: 600 14px var(--font-body, sans-serif); color: #101423; display: flex; gap: 8px; align-items: baseline; }
.tour-chapters li button::before { counter-increment: ch; content: counter(ch); font-family: var(--font-display, sans-serif); font-weight: 800; color: #EC644F; min-width: 18px; }
.tour-chapters li button small { margin-left: auto; color: #8a90a0; font-weight: 500; }
.tour-chapters li.is-current button { border-color: #EC644F; background: #fff4ee; }
.tour:fullscreen { background: #101423; padding: 10px; align-content: center; }
.tour:fullscreen .tour-chapters { display: none; }
.tour:fullscreen .tour-screen { max-width: calc((100vh - 90px) * 16 / 9); width: 100%; margin: 0 auto; }

/* ---------- Rondleiding: nagemaakte schermen (1280 × 720) ---------- */
.tour-stage * { box-sizing: border-box; }
.tv { position: absolute; }
.tv-app { position: absolute; inset: 0; display: flex; background: #FCFBF5; }
.tv-side { width: 210px; background: linear-gradient(180deg, #1a2140, #101423); color: #cfd4e2; padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; }
.tv-brand { display: flex; align-items: center; gap: 10px; color: #fff; font: 800 26px var(--font-display, sans-serif); margin-bottom: 14px; }
.tv-brand svg { width: 38px; height: 38px; color: #fff; }
.tv-nav { padding: 9px 12px; border-radius: 12px; font-size: 15px; font-weight: 500; }
.tv-nav.on { background: #EC644F; color: #fff; font-weight: 700; }
.tv-main { flex: 1; position: relative; padding: 26px 30px; overflow: hidden; }
.tv-h1 { font: 800 46px/1 var(--font-display, sans-serif); text-transform: uppercase; letter-spacing: -.02em; margin: 0; }
.tv-eyebrow { font: 700 12px var(--font-body, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: #4c5570; }
.tv-card { position: absolute; background: #fff; border: 1.5px solid #F2AA91; border-radius: 20px; padding: 18px; }
.tv-dark { background: #101423; color: #fff; border-color: #101423; }
.tv-coral { background: #EC644F; color: #fff; border-color: #EC644F; }
.tv-peach { background: #F2AA91; border-color: #F2AA91; }
.tv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; font: 700 15px var(--font-body, sans-serif); background: #101423; color: #fff; white-space: nowrap; }
.tv-btn.coral { background: #EC644F; }
.tv-btn.ghost { background: #fff; color: #101423; border: 1.5px solid #F2AA91; }
.tv-btn.strava { background: #fc4c02; }
.tv-btn.zwift { background: #fc6719; }
.tv-btn.wa { background: #fff; color: #1d8f4a; border: 1.5px solid #1d8f4a; }
.tv-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1.5px solid #F2AA91; font-size: 14px; font-weight: 600; background: #fff; }
.tv-pill.on { background: #101423; color: #fff; border-color: #101423; }
.tv-big { font: 800 44px/1 var(--font-display, sans-serif); letter-spacing: -.02em; }
.tv-muted { color: #6b7185; }
.tv-input { background: #fff; border: 1.5px solid #d9dce6; border-radius: 12px; padding: 11px 14px; font-size: 16px; color: #101423; white-space: nowrap; overflow: hidden; }
.tv-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px solid #ebe3d6; font-size: 15px; }
.tv-row b { font-weight: 700; }
.tv-row.joined { background: #EC644F; color: #fff; border-color: #EC644F; }
.tv-av { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 13px var(--font-body, sans-serif); background: #F2AA91; color: #101423; flex: none; }
.tv-av.c { background: #EC644F; color: #fff; }
.tv-av.n { background: #222C49; color: #fff; }
.tv-bar { height: 10px; border-radius: 99px; background: #ebe7dc; overflow: hidden; }
.tv-bar > i { display: block; height: 100%; width: 0; background: #EC644F; border-radius: 99px; }
.tv-map { position: absolute; border-radius: 18px; overflow: hidden; background: #101423; }
.tv-map svg { width: 100%; height: 100%; display: block; }
.tv-badge svg { display: block; filter: drop-shadow(0 6px 10px rgba(16,20,35,.25)); }
.tv-tag { display: inline-block; font: 700 11px var(--font-body, sans-serif); padding: 3px 9px; border-radius: 99px; background: #EC644F; color: #fff; }
.tv-tag.strava { background: #fc4c02; }
.tv-grid7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.tv-day { background: #f7f3ea; border-radius: 12px; padding: 8px; min-height: 120px; font-size: 13px; font-weight: 700; color: #4c5570; }
.tv-day.today { outline: 2px solid #EC644F; background: #fff; }
.tv-chip { margin-top: 8px; background: #EC644F; color: #fff; border-radius: 10px; padding: 6px 8px; font-size: 12px; font-weight: 600; line-height: 1.25; border-left: 4px solid #101423; }
.tv-chip.w { background: #fff; color: #101423; border: 1.5px solid #d9dce6; border-left: 4px solid #fc6719; }
.tv-kpi b { display: block; font: 800 34px/1 var(--font-display, sans-serif); color: #EC644F; }
.tv-kpi span { font-size: 14px; color: #4c5570; }
/* regie-elementen */
.tv-cursor { position: absolute; left: 0; top: 0; width: 34px; height: 40px; z-index: 50; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.tv-ripple { position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; border: 3px solid #EC644F; z-index: 49; opacity: 0; pointer-events: none; }
.tv-ring { position: absolute; border: 4px solid #EC644F; border-radius: 18px; z-index: 40; opacity: 0; pointer-events: none; box-shadow: 0 0 0 9999px rgba(16,20,35,.28); }
.tv-note { position: absolute; z-index: 45; max-width: 330px; background: #101423; color: #fff; padding: 12px 16px; border-radius: 14px; font-size: 17px; line-height: 1.35; font-weight: 500; opacity: 0; box-shadow: 0 10px 24px rgba(16,20,35,.3); }
.tv-note b { color: #F2AA91; }
.tv-note.coral { background: #EC644F; }
.tv-note.coral b { color: #fff; }
.tv-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; background: #101423; color: #fff; }
.tv-title .num { font: 800 22px var(--font-display, sans-serif); color: #EC644F; letter-spacing: .1em; }
.tv-title h2 { font: 800 76px/1 var(--font-display, sans-serif); text-transform: uppercase; margin: 0; letter-spacing: -.02em; }
.tv-title p { font-size: 24px; color: #F2AA91; margin: 0; max-width: 820px; }
.tv-topo { position: absolute; inset: 0; opacity: .35; }
.tour:not(.is-started) .tour-caption { opacity: 0; }
@media (max-width: 600px) { .tour-caption { font-size: 12px; padding: 5px 10px; bottom: 8px; } .tc-time { min-width: 0; } }
.tc-voice { height: 38px; border-radius: 10px; border: 1px solid #ebe3d6; background: #fff; padding: 0 8px; font: 600 13px var(--font-body, sans-serif); max-width: 190px; color: #101423; }

/* ---------- Promofilmpje (publieke startpagina) ---------- */
.promo-section { display: grid; gap: 16px; }
.promo { display: grid; gap: 10px; }
.promo-screen { position: relative; border-radius: 22px; overflow: hidden; background: #101423; box-shadow: 0 22px 50px rgba(16,20,35,.22); }
.promo-stage-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.promo-stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; background: #FCFBF5; overflow: hidden; font-family: var(--font-body, "DM Sans", system-ui, sans-serif); color: #101423; }
.promo-stage * { box-sizing: border-box; }
.promo-head { display: flex; flex-direction: column; gap: 4px; background: #101423; color: #fff; padding: 14px 22px 16px; border-radius: 18px; box-shadow: 0 14px 30px rgba(16,20,35,.3); max-width: 760px; }
.promo-head span { font: 700 13px var(--font-body, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: #F2AA91; }
.promo-head b { font: 800 34px/1.1 var(--font-display, sans-serif); }
.promo-chips span { display: inline-block; padding: 9px 18px; border-radius: 99px; border: 1.5px solid #F2AA91; color: #fff; font: 700 18px var(--font-body, sans-serif); }
.promo-toggle { position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(16,20,35,.7); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: .75; transition: opacity .2s; }
.promo-screen:hover .promo-toggle, .promo.is-paused .promo-toggle, .promo-toggle:focus-visible { opacity: 1; }
.promo-dots { display: flex; gap: 6px; }
.promo-dots button { position: relative; flex: 1; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; }
.promo-dots button::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 99px; background: #ebe3d6; }
.promo-dots i { position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 99px; background: #EC644F; transform: scaleX(0); transform-origin: 0 50%; }
.promo-dots button.is-done i, .promo.is-paused .promo-dots button.is-on i { transform: scaleX(1); }