:root{--zwart:#000;--accent:#f4ebdc;--goud:#e6b85c;--wit:#fff;--grijs:#a7a39c;--lijn:#ffffff38;--serif:"Instrument Serif", "Cormorant Garamond", Georgia, serif;--sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{background:var(--zwart);color:var(--wit);margin:0;padding:0}html{scroll-behavior:auto;scrollbar-width:none}html::-webkit-scrollbar{display:none}body{font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5;overflow-x:hidden}a{color:inherit}button{font:inherit}h1,h2,h3{font-family:var(--serif);letter-spacing:-.01em;margin:0;font-weight:400}#spoor{pointer-events:none;width:100%;position:relative}#gang{z-index:0;width:100%;height:100%;display:block;position:fixed;inset:0}#laag{z-index:2;pointer-events:none;position:fixed;inset:0}#welkom{text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;padding:0 24px;transition:opacity .6s;display:flex;position:absolute;inset:0}#welkom.weg{opacity:0}#welkom .regel{opacity:0;animation:1.1s cubic-bezier(.2,.7,.2,1) forwards onthul;transform:translateY(14px)}#welkom .regel:first-child{animation-delay:.3s}#welkom .regel:nth-child(2){animation-delay:1.1s}#welkom .regel:nth-child(3){animation-delay:1.9s}#welkom .regel:nth-child(4){pointer-events:auto;animation-delay:2.6s}#start{letter-spacing:.08em;margin-top:26px;padding:14px 36px;font-size:15px}#welkom h1{color:var(--wit);font-size:clamp(40px,7vw,104px);line-height:1.02}#welkom h1 em{color:var(--accent);font-style:italic}#welkom p{font-family:var(--serif);color:var(--grijs);margin:18px 0 0;font-size:clamp(22px,3vw,38px);line-height:1.15}#welkom small{letter-spacing:.18em;text-transform:uppercase;color:var(--grijs);margin-top:28px;font-size:12px;display:block}@keyframes onthul{to{opacity:1;transform:none}}#kaartlabel{white-space:nowrap;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s;position:absolute;top:0;left:0;transform:translate(-50%)}#kaartlabel .naam{font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);line-height:1.1}#kaartlabel .status{letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-top:6px;font-size:11px}#kaartlabel .status:before{content:"";background:var(--accent);vertical-align:1px;border-radius:50%;width:6px;height:6px;margin-right:8px;display:inline-block}#kaartklik{cursor:pointer;pointer-events:auto;display:none;position:absolute}#kaartklik.aan{display:block}.scherm{opacity:0;visibility:hidden;pointer-events:none;padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));background:#000000eb;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.scherm.open{pointer-events:auto}.scherm .binnen{transform-origin:50%;flex-direction:column;align-items:center;gap:22px;width:min(1500px,100%);display:flex}.scherm .kop{text-align:center}.teller{flex-direction:column;align-items:center;gap:6px;display:flex}.teller .tijd{font-family:var(--serif);color:var(--wit);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:clamp(56px,8vw,120px);line-height:.95}.scherm.klaar .teller .tijd{color:var(--goud);text-shadow:0 0 30px #e6b85c8c}.scherm .binnen{z-index:2;position:relative}.lichtstraal{z-index:1;pointer-events:none;opacity:0;background:linear-gradient(#e6b85ce6,#e6b85c40);width:2px;height:0;margin-left:-1px;transition:opacity .6s;position:absolute;top:0;left:50%;overflow:hidden}.lichtstraal:after{content:"";background:linear-gradient(transparent, var(--goud) 55%, #fff);border-radius:2px;width:4px;height:160px;animation:1.7s cubic-bezier(.4,0,.6,1) infinite puls;position:absolute;top:-160px;left:-1px;box-shadow:0 0 22px 4px #e6b85ce6}.scherm.klaar .lichtstraal{opacity:1}@keyframes puls{0%{top:-140px}to{top:100%}}.scherm .kaders{position:relative}.gloed{pointer-events:none;opacity:0;z-index:3;width:0;height:0;box-shadow:0 0 0 2px var(--goud), 0 0 28px #e6b85cbf, 0 0 90px #e6b85c73;border-radius:10px;transition:left .9s cubic-bezier(.4,0,.2,1),top .9s cubic-bezier(.4,0,.2,1),width .9s cubic-bezier(.4,0,.2,1),height .9s cubic-bezier(.4,0,.2,1),opacity .4s;position:absolute;top:0;left:0}.gloed.aan{opacity:1}.scherm .kop h2{font-size:clamp(34px,4.6vw,72px);line-height:1}.scherm .kop p{color:var(--grijs);margin:8px 0 0;font-size:clamp(13px,1.1vw,16px)}.scherm .resultaat{font-family:var(--serif);color:var(--accent);margin-top:10px;font-size:clamp(40px,6vw,96px);line-height:1}.scherm .kaders{justify-content:center;align-items:flex-start;gap:28px;width:100%;display:flex}.kolom{flex-direction:column;flex:1 1 0;align-items:center;gap:12px;min-width:0;max-width:720px;display:flex}.kolom .kader{flex:none;width:100%}.kolom .kant{font-family:var(--serif);letter-spacing:.02em;color:var(--grijs);font-size:clamp(28px,3.2vw,48px);line-height:1}.kolom.nieuw .kant{color:var(--accent)}.kolom.nieuw .kant:after{content:"";background:var(--accent);vertical-align:middle;width:8px;height:8px;box-shadow:0 0 14px var(--accent);border-radius:50%;margin-left:12px;display:inline-block}.kolom.nieuw .kader{box-shadow:0 30px 80px #0009}.kolom.oud .kader{opacity:.85}.kolom .knoppen{margin-top:2px}.kader{border:1px solid var(--lijn);background:#0a0a0a;border-radius:10px;flex:1 1 0;max-width:720px;position:relative;overflow:hidden}.kader.een{max-width:1100px}.kolom:has(.kader.een){max-width:1100px}.kader.m{flex:0 auto;width:auto}.kolom:has(.kader.m){flex:0 auto}.kolom:has(.kader.m) .kader{width:auto}.kader .balk{border-bottom:1px solid var(--lijn);background:#111;align-items:center;gap:6px;height:26px;padding:0 10px;display:flex}.kader .balk i{background:#2a2a2a;border-radius:50%;width:8px;height:8px;display:block}.kader .balk span{letter-spacing:.2em;text-transform:uppercase;color:var(--grijs);margin-left:auto;font-size:10px}.kader.nieuw .balk span{color:var(--accent)}.kader video{aspect-ratio:16/10;object-fit:cover;object-position:top;background:#000;width:100%;height:auto;max-height:calc(50vh - 26px);display:block}.kader.m video{aspect-ratio:390/844;width:auto;max-width:100%;max-height:50vh}.kader .leeg{aspect-ratio:16/10;color:var(--grijs);justify-content:center;align-items:center;font-size:13px;display:flex}.scherm .knoppen{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.knop{border:1px solid var(--lijn);color:var(--wit);cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:10px;padding:12px 22px;font-size:14px;font-weight:500;text-decoration:none;transition:background .2s,border-color .2s,color .2s;display:inline-flex}.knop:hover{background:var(--wit);color:var(--zwart);border-color:var(--wit)}.knop.vol{background:var(--accent);color:var(--zwart);border-color:var(--accent)}.knop.vol:hover{background:var(--wit);border-color:var(--wit)}.scherm .contact{text-align:center;margin-top:6px}.scherm .contact h3{max-width:16ch;margin:0 auto 18px;font-size:clamp(30px,4vw,60px);line-height:1.05}#voortgang{pointer-events:auto;opacity:0;flex-direction:column;align-items:flex-end;gap:10px;transition:opacity .4s;display:flex;position:absolute;top:50%;right:18px;transform:translateY(-50%)}#voortgang.aan{opacity:1}#voortgang button{cursor:pointer;background:0 0;border:0;place-items:center;width:22px;height:22px;padding:0;display:grid}#voortgang button:after{content:"";background:#ffffff59;border-radius:50%;width:6px;height:6px;transition:transform .25s,background .25s}#voortgang button:hover:after{background:var(--wit)}#voortgang button.actief:after{background:var(--accent);transform:scale(1.5)}#voortgang .lijn{background:var(--lijn);width:1px;height:18px;margin:-6px 10px}#haltenaam{font-family:var(--serif);color:var(--grijs);opacity:0;pointer-events:none;font-size:clamp(18px,1.8vw,24px);transition:opacity .4s;position:absolute;bottom:24px;left:24px}#haltenaam.aan{opacity:1}#haltenaam b{color:var(--wit);font-weight:400}#haltenaam small{font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-top:4px;font-size:11px;display:block}#hint{letter-spacing:.22em;text-transform:uppercase;color:var(--wit);opacity:0;z-index:3;pointer-events:none;text-indent:.22em;flex-direction:column;align-items:center;gap:8px;font-size:11px;animation:1s 2.6s forwards onthulHint;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}@keyframes onthulHint{to{opacity:1;transform:translate(-50%)}}#hint i{background:linear-gradient(var(--accent), transparent);width:1px;height:34px;animation:1.6s ease-in-out infinite zak;display:block}#hint.weg{transition:opacity .4s;opacity:0!important}@keyframes zak{0%{transform-origin:top;transform:scaleY(0)}50%{transform-origin:top;transform:scaleY(1)}51%{transform-origin:bottom}to{transform-origin:bottom;transform:scaleY(0)}}@media (width<=767px){.scherm{padding:14px 12px 60px}.kolom{gap:8px}.kolom .kant{font-size:24px}.kolom .kader video{max-height:46vh}.scherm .binnen{gap:12px}.scherm .kaders{gap:10px}.kader.m{flex:0 auto}.kader.een.m{max-width:60vw}.scherm .kop h2{font-size:clamp(28px,9vw,40px)}.scherm .kop p{font-size:12px}.scherm .resultaat{font-size:40px}.knop{padding:10px 16px;font-size:13px}#voortgang{gap:6px;right:8px}#voortgang .lijn{height:10px;margin:-4px 10px}#haltenaam{font-size:16px;bottom:16px;left:16px}#kaartlabel .naam{font-size:20px}}#rustig{max-width:1100px;margin:0 auto;padding:8vh 20px 12vh}#rustig header{text-align:center;padding:10vh 0 8vh}#rustig header h1{font-size:clamp(40px,7vw,96px);line-height:1.02}#rustig header h1 em{color:var(--accent)}#rustig header p{color:var(--grijs);font-family:var(--serif);margin:14px 0 0;font-size:clamp(20px,3vw,32px)}#rustig section{border-top:1px solid var(--lijn);padding:7vh 0}#rustig section h2{font-size:clamp(30px,4vw,56px);line-height:1.05}#rustig section .regel{color:var(--grijs);margin:6px 0 20px}#rustig .hero{border:1px solid var(--lijn);border-radius:10px;width:100%;margin-bottom:18px;display:block}#rustig .kaders{grid-template-columns:1fr 1fr;gap:18px;display:grid}#rustig .kaders.een{grid-template-columns:1fr}#rustig video{aspect-ratio:16/10}#rustig .knoppen{flex-wrap:wrap;gap:10px;margin-top:18px;display:flex}#rustig .contact{text-align:center;padding:8vh 0 0}#rustig .contact h3{margin-bottom:18px;font-size:clamp(28px,4vw,52px)}@media (width<=767px){#rustig .kaders{grid-template-columns:1fr}}.scherm .contact h3{margin-bottom:14px;font-size:clamp(26px,3.2vw,46px)}.kolom:has(.kader.een){width:auto;max-width:100%}.kader.een{width:auto}.kader.een video:not(.kader.m video){object-fit:fill;width:auto;max-width:100%;height:min(46vh,60vw)}.kader.een.m{width:auto}@media (width<=767px){.kader.een video{height:auto;max-height:50vh}}#geluid{border:1px solid var(--lijn);color:var(--grijs);font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;pointer-events:auto;z-index:4;background:#00000080;border-radius:999px;align-items:center;gap:10px;padding:8px 14px;transition:color .2s,border-color .2s;display:flex;position:absolute;bottom:24px;right:56px}#geluid:hover{color:var(--wit);border-color:var(--wit)}#geluid i{background:currentColor;border-radius:1px;width:2px;height:6px;display:block}#geluid.aan{color:var(--accent)}#geluid.aan i{animation:.9s ease-in-out infinite balk}#geluid.aan i:nth-child(2){animation-delay:.15s}#geluid.aan i:nth-child(3){animation-delay:.3s}#geluid.aan i:nth-child(4){animation-delay:.45s}@keyframes balk{0%,to{height:4px}50%{height:14px}}@media (width<=767px){#geluid{padding:7px 11px;bottom:16px;right:40px}#geluid span{display:none}}body.voor-start #hint,body.voor-start #geluid,body.voor-start #voortgang{opacity:0!important;pointer-events:none!important}#welkom.weg #start{pointer-events:none}@media (width<=767px){.teller .tijd{font-size:48px}}.scherm.contact .kader.een video:not(.kader.m video){height:min(34vh,60vw)}.scherm.contact .contact h3{margin-bottom:12px}.scherm.contact .binnen{gap:14px}#hint span{transition:font-size .4s,letter-spacing .4s}#hint.opvallend span{letter-spacing:.3em;color:var(--goud);text-shadow:0 0 18px #e6b85cbf,0 0 40px #e6b85c59;font-size:15px}#hint.opvallend i{background:linear-gradient(var(--goud), transparent);height:72px;box-shadow:0 0 12px #e6b85cb3}#hint.opvallend span{animation:2.2s ease-in-out infinite knipper}#hint.opvallend i{animation:1.6s ease-in-out infinite zak,2.2s ease-in-out infinite knipper}@keyframes knipper{0%,to{opacity:.55;text-shadow:0 0 8px #e6b85c4d}50%{opacity:1;text-shadow:0 0 22px #e6b85cf2,0 0 48px #e6b85c80}}#overtuigd{color:var(--wit);font:500 12px/1 var(--sans);letter-spacing:.06em;opacity:0;pointer-events:none;z-index:4;background:#0000008c;border:1px solid #e6b85c99;border-radius:999px;align-items:center;gap:8px;padding:10px 18px;text-decoration:none;transition:opacity .4s,transform .4s,background .2s,border-color .2s;display:inline-flex;position:absolute;bottom:62px;right:24px;transform:translateY(8px)}#overtuigd span{color:var(--goud)}#overtuigd.aan{opacity:1;pointer-events:auto;transform:none}#overtuigd:hover{background:var(--goud);color:var(--zwart);border-color:var(--goud)}#overtuigd:hover span{color:var(--zwart)}body.voor-start #overtuigd{opacity:0!important;pointer-events:none!important}#voortgang button.contact{position:relative}#voortgang button.contact:after{background:var(--goud)}#voortgang button.contact em{font:500 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--goud);white-space:nowrap;font-style:normal;position:absolute;top:50%;right:26px;transform:translateY(-50%)}@media (width<=767px){#overtuigd{padding:9px 14px;font-size:11px;top:14px;bottom:auto;right:12px}#voortgang button.contact em{display:none}body.gestapeld .scherm .kaders{flex-direction:column;align-items:stretch;gap:10px}body.gestapeld .kolom{flex:none;gap:4px;width:100%;max-width:none}body.gestapeld .kolom .kant{font-size:18px}body.gestapeld .kolom .kader{width:100%}body.gestapeld .kader video{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%;height:auto;max-height:26vh}body.gestapeld .kader.een video{height:auto;max-height:30vh}body.gestapeld .kolom:has(.kader.een){width:100%}body.gestapeld .teller .tijd{font-size:40px}body.gestapeld .scherm{padding-bottom:54px}}body.gestapeld .lichtstraal{z-index:3}.kader .scrolbalk{pointer-events:none;z-index:2;background:#00000059;border-radius:2px;width:4px;position:absolute;top:32px;bottom:6px;right:4px}.kader .scrolbalk b{background:var(--goud);border-radius:2px;width:100%;height:18%;position:absolute;top:0;left:0;box-shadow:0 0 8px #e6b85ccc}.kolom{position:relative}.kolom .scrollabel{color:var(--goud);font:500 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;pointer-events:none;z-index:2;background:#0009;border:1px solid #e6b85c80;border-radius:999px;align-items:center;gap:7px;padding:5px 10px 5px 7px;display:inline-flex;position:absolute;bottom:-24px;right:0}.kolom .scrollabel em{border:1.5px solid var(--goud);border-radius:5px;width:9px;height:14px;display:block;position:relative}.kolom .scrollabel em:after{content:"";background:var(--goud);border-radius:1px;width:1.5px;height:3px;margin-left:-.75px;animation:1.4s ease-in-out infinite wiel;position:absolute;top:2px;left:50%}@keyframes wiel{0%,to{opacity:1;top:2px}70%{opacity:.2;top:7px}71%{opacity:0;top:2px}}@media (width<=767px){.kolom .scrollabel{padding:4px 8px 4px 6px;font-size:8px;bottom:-26px}}
