@font-face{font-family:'Neulis Alt';font-weight:600;font-display:swap;src:url(../fonts/neulis-alt-600.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:400;font-display:swap;src:url(../fonts/plus-jakarta-sans-400.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:600;font-display:swap;src:url(../fonts/plus-jakarta-sans-600.woff2) format('woff2')}
:root{color-scheme:only light;--nacht:#1F1508;--dh:#6B4309;--honing:#E6A23C;--h60:#F0C482;--h40:#F5D6A4;--h20:#FAE7C7;--creme:#FFF8EA;--d2:#D99B2F;
 --in:cubic-bezier(.2,.7,.2,1);--merk:'Neulis Alt','Plus Jakarta Sans',system-ui,sans-serif;--g:clamp(20px,5vw,72px)}
*,*:before,*:after{box-sizing:border-box}
body,h1,p{margin:0}
body{background:var(--creme);color:var(--nacht);font:400 17px/1.55 'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.bk{position:relative;min-height:calc(100vh - var(--wp-admin--admin-bar--height, 0px));min-height:calc(100svh - var(--wp-admin--admin-bar--height, 0px));display:flex;flex-direction:column;overflow:hidden}
.bk-kop{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px var(--g) 0}
.bk-logo{display:block;height:36px;width:auto;color:var(--dh)}
.bk-kop nav{display:flex;gap:28px;font-size:15px;font-weight:600}
.bk-kop nav a{text-decoration:none;color:var(--dh);background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:2px;transition:background-size 300ms var(--in)}
.bk-kop nav a:hover,.bk-kop nav a:focus-visible{background-size:100% 1.5px}
.bk-midden{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(24px,4.5vh,72px) var(--g) 0}
.bk-label{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--dh);margin-bottom:22px}
.bk-label i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--honing)}
.bk-label i:after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 1.5px var(--honing);opacity:0;animation:puls 2.4s var(--in) infinite}
@keyframes puls{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}
h1{font:600 clamp(48px,6.8vw,108px)/0.94 var(--merk);letter-spacing:-0.035em;color:var(--dh)}
h1 span{display:block}
.bk-sub{margin:22px auto 0;max-width:30em;font-size:clamp(17px,1.35vw,20px);color:rgba(31,21,8,.82)}
:focus-visible{outline:2px solid var(--dh);outline-offset:4px;border-radius:4px}


/* het beeld */
.bk{--veld:clamp(300px,56vh,620px);padding-bottom:calc(max(var(--veld), 35vw) * .8 + 32px)}
.bk-veld{position:absolute;z-index:1;left:0;right:0;bottom:0;height:var(--veld);pointer-events:none}
.bk-beeld{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.l-tam{fill:#FAE7C7}.l-ver{fill:#FAE7C7}.l-stad{fill:#F5D6A4}.l-marin{fill:#F5D6A4}.l-water{fill:#FCEFD9}
.l-brug{fill:#E6A23C}.l-pijler{fill:#D99B2F}.l-vak{fill:none;stroke:#E6A23C;stroke-width:1.4;stroke-linejoin:round}
.l-boog{fill:none;stroke:#E6A23C;stroke-width:4}.l-fort{fill:#F0C482}.l-voor{fill:#6B4309}.l-boom path{fill:#6B4309}
.l-boot{fill:#6B4309}.l-zeil{fill:#FFF8EA;stroke:#6B4309;stroke-width:1.4;stroke-linejoin:round}
.bk-kabel{fill:none;stroke:#D99B2F;stroke-width:3;stroke-linecap:round}
.hg{stroke:#E6A23C;stroke-width:.9;opacity:.85}
.bk-schijf{fill:#E6A23C}
.gv{stroke:#F5D6A4;stroke-width:2.4;stroke-linecap:round;animation:golf 7s ease-in-out infinite;animation-delay:calc(var(--g) * -1)}
@keyframes golf{0%,100%{transform:translateX(0);opacity:.9}50%{transform:translateX(14px);opacity:.4}}
.bk-spiegel line{stroke:#F0C482;stroke-linecap:round}
.bk-mist path{fill:#FFF8EA}
.bk-mist-a{opacity:var(--mist,.85);animation:drijf 80s ease-in-out infinite alternate}
.bk-mist-b{opacity:var(--mist,.85);animation:drijf 60s ease-in-out infinite alternate-reverse}
.bk-mist-c{opacity:calc(var(--mist,.85) * .9);animation:drijf2 45s ease-in-out infinite alternate}
@keyframes drijf2{from{transform:translateX(-30px)}to{transform:translateX(40px)}}
@keyframes drijf{from{transform:translateX(-60px)}to{transform:translateX(70px)}}
.bk-mist line{stroke:#FFF8EA;stroke-linecap:round}
.l-kaap{fill:#F0C482}.l-anker{fill:#D99B2F}.l-alca{fill:#F0C482}.l-alca-b{fill:#D99B2F}.l-alca-r{fill:#F5D6A4}.l-kade path{fill:#F0C482}.l-stadland{fill:#F0C482}
.l-strand{fill:#F5D6A4}.l-nat{fill:none;stroke:#FFF8EA;stroke-width:3;stroke-linecap:round;opacity:.9}
.l-palm path{fill:#6B4309}.ps-a{fill:#E6A23C}.ps-b{fill:#FFF8EA}.ps-stok{fill:#6B4309}.ps-rand{fill:none;stroke:#6B4309;stroke-width:1.4;stroke-linejoin:round}.hd-a{fill:#E6A23C}.hd-b{fill:#D99B2F}
.w-paal,.w-dak{fill:#6B4309}.w-huis{fill:#E6A23C}.w-raam{fill:#FFF8EA}
.bk-vuur{fill:#E6A23C;opacity:0}
body[data-licht="nacht"] .bk-vuur,body[data-licht="schemer"] .bk-vuur{animation:vuur 5s steps(1) infinite}
@keyframes vuur{0%{opacity:1}12%{opacity:0}}
/* wolken */
.wk{transform:translate(var(--x),var(--y))}
.wk line{stroke:#F8E3C0;stroke-linecap:round}
.wl-1{animation:wolk 150s ease-in-out infinite alternate}
.wl-2{animation:wolk 110s ease-in-out infinite alternate-reverse}
@keyframes wolk{from{transform:translateX(-90px)}to{transform:translateX(110px)}}
/* vogels */
.vg{animation:vlieg var(--vt) linear infinite;animation-delay:var(--vd)}
.vg path{fill:none;stroke:#6B4309;stroke-width:1.6;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 100%;animation:klap .8s ease-in-out infinite alternate}
@keyframes vlieg{from{transform:translate(calc(var(--vx) - 220px),var(--vy)) scale(var(--vs))}to{transform:translate(calc(var(--vx) + 1880px),calc(var(--vy) - 50px)) scale(var(--vs))}}
@keyframes klap{to{transform:scaleY(.35)}}
/* verkeer op de brug */
.bk-autos{opacity:0;animation:verschijn 800ms var(--in) 3.8s forwards}
@keyframes verschijn{to{opacity:1}}
.au{animation-timing-function:linear;animation-iteration-count:infinite}
.au-heen{animation-name:heen}.au-terug{animation-name:terug}
.au-a{fill:#6B4309}.au-b{fill:#D99B2F}.au-c{fill:#3F2C10}
@keyframes heen{from{transform:translateX(450px)}to{transform:translateX(1640px)}}
@keyframes terug{from{transform:translateX(1640px)}to{transform:translateX(450px)}}
/* boten: rustig en continu */
.bk-boot{animation:vaar 240s linear infinite;animation-delay:-60s}
@keyframes vaar{from{transform:translate(-90px,414px)}to{transform:translate(1700px,414px)}}
.bk-veer{animation:veer 180s linear infinite;animation-delay:-40s}
@keyframes veer{from{transform:translate(1700px,368px) scale(.8)}to{transform:translate(-90px,368px) scale(.8)}}
.bk-boot-in,.bk-veer-in{transform-box:fill-box;transform-origin:50% 100%;animation:dobber 3.4s ease-in-out infinite}
@keyframes dobber{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(1.5px) rotate(2deg)}}
/* weetjes */
.bk-punten{position:absolute;z-index:4;left:0;right:0;bottom:0;height:var(--veld);pointer-events:none}
.bk-i{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:0;border-radius:50%;background:var(--creme);color:var(--dh);box-shadow:inset 0 0 0 1.5px var(--dh);font:600 15px/30px var(--merk);text-align:center;cursor:pointer;pointer-events:auto;opacity:0;animation:verschijn 600ms var(--in) 4.4s forwards;transition:background-color 200ms,color 200ms}
.bk-i:nth-child(2){animation-delay:4.6s}.bk-i:nth-child(3){animation-delay:4.8s}
.bk-i:before{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 1.5px var(--honing);opacity:0;animation:puls 2.8s var(--in) 5s infinite}
.bk-i:hover,.bk-i[aria-expanded="true"]{background:var(--dh);color:var(--creme)}
.bk-i[hidden]{display:none}
.bk-feit{position:absolute;left:50%;bottom:calc(100% + 14px);width:min(290px,calc(100vw - 32px));padding:16px 18px;border-radius:16px;background:var(--nacht);color:var(--creme);font:400 14px/1.5 'Plus Jakarta Sans',system-ui,sans-serif;text-align:left;transform:translate(-50%,6px);opacity:0;pointer-events:none;transition:opacity 220ms var(--in),transform 220ms var(--in)}
.bk-feit b{display:block;margin-bottom:4px;font:600 12px var(--merk);letter-spacing:.06em;text-transform:uppercase;color:var(--honing)}
.bk-feit:after{content:"";position:absolute;left:50%;top:100%;margin-left:-7px;border:7px solid transparent;border-top-color:var(--nacht)}
.bk-i[data-kant="r"] .bk-feit{left:auto;right:-14px;transform:translate(0,6px)}.bk-i[data-kant="r"] .bk-feit:after{left:auto;right:22px}
.bk-i[data-kant="l"] .bk-feit{left:-14px;transform:translate(0,6px)}.bk-i[data-kant="l"] .bk-feit:after{left:22px}
.bk-i[aria-expanded="true"] .bk-feit{opacity:1;transform:translate(-50%,0)}
.bk-i[data-kant][aria-expanded="true"] .bk-feit{transform:translate(0,0)}
@media (hover:hover){.bk-i:hover .bk-feit{opacity:1;transform:translate(-50%,0)}.bk-i[data-kant]:hover .bk-feit{transform:translate(0,0)}}
.bk-sterren path,.bk-ramen rect,.bk-lampen circle,.bk-baken{fill:#E6A23C;opacity:0;transition:opacity 1.2s var(--in)}
.bk-ramen rect{fill:#E6A23C}
.bk-maan{fill:#E6A23C;opacity:0;transition:opacity 1.5s var(--in)}
body[data-licht="nacht"] .bk-maan{opacity:1}
.bk-horizon{opacity:0;transition:opacity 2s var(--in)}
body[data-licht="nacht"] .bk-sterren path{opacity:.9;animation:twinkel 4s ease-in-out infinite;animation-delay:calc(var(--s) * -1)}
body[data-licht="nacht"] .bk-ramen rect,body[data-licht="schemer"] .bk-ramen rect{opacity:.9;animation:raam 9s steps(1) infinite;animation-delay:calc(var(--r) * -1)}
body[data-licht="nacht"] .bk-lampen circle,body[data-licht="schemer"] .bk-lampen circle{opacity:1}
body[data-licht="nacht"] .bk-baken,body[data-licht="schemer"] .bk-baken{opacity:1;animation:baken 2.6s ease-in-out infinite}
body[data-licht="goud"] .bk-horizon,body[data-licht="schemer"] .bk-horizon{opacity:1}
@keyframes twinkel{0%,100%{opacity:.75}50%{opacity:.2}}
@keyframes raam{0%{opacity:.9}70%{opacity:.35}}
@keyframes baken{0%,100%{opacity:1}50%{opacity:.25}}

/* de brug bouwt zich */
.bk-toren{transform-box:fill-box;transform-origin:50% 100%;animation:rijs 1100ms var(--in) both}
.bk-t1{animation-delay:150ms}.bk-t2{animation-delay:380ms}
@keyframes rijs{from{transform:scaleY(0)}}
.bk-kabel{stroke-dasharray:1;stroke-dashoffset:1;animation:trek 1500ms cubic-bezier(.6,0,.2,1) 1100ms forwards}
@keyframes trek{to{stroke-dashoffset:0}}
.hg{animation:hang 500ms var(--in) both;animation-delay:calc(1900ms + var(--d) * 900ms);transform-box:fill-box;transform-origin:50% 0}
@keyframes hang{from{transform:scaleY(0);opacity:0}}
.bk-dek{animation:dek 1300ms var(--in) 2400ms both}
@keyframes dek{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
.bk-zon{transition:transform 3s var(--in),opacity 2s var(--in)}

.bk-voet{position:absolute;z-index:3;left:var(--g);right:var(--g);bottom:24px;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:rgba(255,248,234,.86);pointer-events:none}
.bk-voet span:first-child{color:rgba(107,67,9,.75)}
.bk-voet b{font:600 15px var(--merk);letter-spacing:-0.01em;color:var(--creme)}

@media (max-width:860px){
 .bk-kop{padding-top:24px}
 .bk-logo{height:30px}
 .bk-kop nav{font-size:14px}
 .bk-midden{padding-top:56px}
 h1{font-size:clamp(44px,12.5vw,64px)}
 .bk-label{margin-bottom:16px;font-size:14px}
 .bk-sub{margin-top:18px;font-size:16px;line-height:1.5}
 .bk-voet b{display:none}
 .bk{--veld:min(calc(100vw * .9),48vh);padding-bottom:calc(var(--veld) * .84)}
 .bk-voet{display:none}
 .bk-voet{bottom:16px}
}
@media (max-width:599px) and (max-height:700px){.bk-midden{padding-top:24px}h1{font-size:40px}.bk-label{margin-bottom:12px}.bk-sub{margin-top:14px;font-size:15px}}
@media (min-width:600px) and (max-width:860px){.bk{--veld:min(58vh,100vw * .8)}h1{font-size:clamp(64px,11vw,96px)}.bk-sub{font-size:19px}.bk-midden{padding-top:72px}}
@media (min-width:861px) and (max-height:820px){.bk{--veld:clamp(260px,46vh,620px)}.bk-midden{padding-top:12px}h1{font-size:clamp(44px,10.5vh,96px)}h1 span{display:inline}.bk-sub{max-width:44em}.bk-label{margin-bottom:14px}.bk-sub{margin-top:20px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none !important;transition:none !important}.bk-kabel{stroke-dashoffset:0}}

.bk-sub p{margin:0}.bk-sub p+p{margin-top:.6em}.bk-sub a{color:var(--dh);text-underline-offset:3px}
.bk-kop nav a.pencil-field{display:inline-block}
.bk-feit:before{content:"";position:absolute;left:0;right:0;top:100%;height:18px}
.bk-i:hover .bk-feit,.bk-i[aria-expanded="true"] .bk-feit{pointer-events:auto}
.pencil-selection-active .bk-i{opacity:1;animation:none}
.bk-over{display:none;margin:14px auto 0;max-width:30em;font-size:14px;line-height:1.5;color:rgba(107,67,9,.78)}
@media (max-width:860px){.bk-over{display:block}}
@media (max-width:599px) and (max-height:620px){.bk-over{display:none}}
.bk-voet-over{display:none}
@media (min-width:1400px){.bk-voet-over{display:inline}}