header,footer{display:none}section.map.map{width:100vw;max-width:100%;height:100vh;height:100dvh;margin:0;padding:0;overflow:hidden}section.map>#map{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background:#efefef}section.map>nav{position:absolute;top:0;left:0;z-index:1;width:auto;height:auto;margin:1rem;display:flex;gap:.5rem;align-items:center}section.map>nav a{background:var(--myWhite);border-radius:.5rem;display:flex;flex-direction:column;padding:1em}section.map>nav a :is(h2,p){margin:0}section.map>nav a h2{font-size:calc(var(--font-size-body) * 1.5)}section.map>nav a p{font-size:calc(var(--font-size-body) * 1);text-transform:uppercase;max-width:18em;font-weight:500;opacity:.75}section.map>nav a img{height:var(--h);padding:.75rem}section.map .controls{position:absolute;top:0;left:0;height:100%;padding:1rem;display:flex;flex-direction:column;align-items:flex-end;z-index:2;font-size:.8rem;gap:.25rem;pointer-events:none;width:100%}section.map .controls>*{pointer-events:all}section.map .controls figure{clip-path:inset(0 0 100% 0);transition:clip-path .25s ease-in-out;z-index:2;pointer-events:none}section.map .controls figure img{max-width:16rem;height:auto}section.map button{background:var(--myWhite);padding:.6em 1.2em;border-radius:.5em;border:1px solid var(--myBlue);font-weight:var(--font-medium);transition:background 333ms,color 333ms;user-select:none;z-index:12;position:relative}section.map button:hover{background:var(--myBlue);color:var(--myWhite)}section.map button[data-active=true]{background:var(--myBlue);color:var(--myWhite)}section.map button[data-active=true]+figure{clip-path:inset(0 0 0 0);pointer-events:all}section.map .controls button~button{margin:auto auto 0 0}section.map .controls button~button+figure{position:absolute;left:1rem;bottom:5em;transition:transform .25s ease-in-out,clip-path .25s ease-in-out;width:100%;max-width:max-content;clip-path:inset(100% 0 0 0)}section.map .controls button~button[data-active=true]+figure{clip-path:inset(0 0 0 0)}section.map figure.mini-map{padding:.1rem;background:var(--myWhite);border-radius:.25rem}section.map figure.legend{background:var(--myWhite);padding:1rem;border-radius:.25rem;font-size:.7rem;max-height:calc(100dvh - var(--font-size-body) * 13);overflow:auto}section.map figure.legend ul li{display:flex;align-items:center;margin-bottom:.3rem}section.map figure.legend ul li.gemeentegrenzen-nzkg:before{content:"";width:2em;height:1.2em;position:relative;background:var(--ownColor);display:inline-block;margin-right:.85rem;border:1px solid var(--ownColor)}section.map figure.legend ul li.gemeentegrenzen-nzkg:before{border:1px dashed #202020}section.map figure.legend ul li img{position:relative;height:auto;width:2em;margin:0 calc(.75rem + .2em) 0 0}section.map figure.legend ul li:nth-of-type(2) img{border-radius:50%;border:.5px solid var(--myBlue)}section.map .projectcard p{margin:0 0 .5em;font-size:.65rem}section.map .projectcard article{padding:.75rem;display:flex;flex-direction:column;align-items:flex-start}section.map .projectcard a{display:flex;justify-content:flex-end;align-items:center;font-weight:var(--font-medium);font-family:var(--primaryFont);margin-left:auto}section.map .projectcard a span{margin-left:1em}section.map.helper #map{cursor:default}li.stedelijk-gebied{--ownColor:#EEC096}li.industrie{--ownColor: #D8BBE2 }li.natuur-en-recreatie{--ownColor: #C6D8AD }li.landelijk-gebied{--ownColor: #E2E8C8 }li.zand{--ownColor: #F4E6B6 }li.water{--ownColor: #A1D5FD }section.map figure.legend ul li:is(.elektriciteit,.waterstof,.stoom,.koolstof):before{height:1.6em;width:1.6em;border-radius:50%;background:center center / 70% 70% no-repeat;border:.5px solid var(--myBlue);margin:0 calc(.2em + .75rem) 0 .2em}section.map figure.legend ul li.elektriciteit:before{background-image:url(/img/elektriciteit.svg?_cchid=6f20667e2fcc3233f7d32f4677f92d81)}section.map figure.legend ul li.waterstof:before{background-image:url(/img/waterstof.svg?_cchid=c189279bcb2e98286c67b9f737f245b1)}section.map figure.legend ul li.stoom:before{background-image:url(/img/stoom.svg?_cchid=80b9bd54f4f6adeb0382975e11242b66)}section.map figure.legend ul li.koolstof:before{background-image:url(/img/koolstof.svg?_cchid=bf1c069c9a731420e0bd7b008ce2b5ea)}.copy-notice{position:fixed;bottom:2rem;left:0;right:0;margin:0 auto;width:max-content;transform:translateY(10px);background:var(--myBlue);color:var(--myWhite);padding:.5rem 1rem;border-radius:8px;font-size:1.3rem;opacity:0;pointer-events:none;transition:all .3s ease;z-index:10000}section.map ul.popups{position:fixed;width:100%;height:100%;pointer-events:none;z-index:3;display:none}section.map ul.popups .projectcard{position:absolute;bottom:0;left:0;max-width:17.5rem;width:calc(100% - 4rem);margin:1rem;pointer-events:all;transition:transform 333ms;transform:translateY(calc(100% + 1rem));border-radius:.5rem .5rem .25rem .25rem}section.map ul.popups .projectcard a{margin-top:.5rem}section.map ul.popups .projectcard[data-active=true]{transform:none}@media only screen and (min-width: 768px){section.map[data-flipped=true] .projectcard{translate:0 calc(100% + 3.5rem)}section.map[data-flipped=true] .projectcard .leaflet-popup-tip-container{top:0;transform:rotate(180deg);transform-origin:top;margin-top:1px}}section.map .leaflet-control-attribution{display:none}section.map .leaflet-right .leaflet-control{border-radius:100vmin;overflow:hidden;background:var(--myWhite);border:1px solid var(--myBlue);margin:1rem}section.map .leaflet-touch .leaflet-bar a{background:none}section.map .leaflet-touch .leaflet-bar a span{transform:translate(-1px,-1px);display:inline-block;color:var(--myBlue)}section.map .leaflet-touch .leaflet-bar a.leaflet-control-zoom-out span{transform:translate(-1px,-2px)}section.map .leaflet-marker-icon{background:none;border:none}section.map .leaflet-marker-icon>div{animation:wiggle 5s ease infinite var(--delay, 0s);transform-origin:bottom center}section.map .leaflet-marker-icon:hover>div,section.map .leaflet-marker-icon:hover p{animation-play-state:paused}section.map .leaflet-marker-icon>div:has(.active){animation-play-state:paused}section.map .leaflet-marker-icon img{max-width:100%!important;transform:scale(var(--scale));transition:transform .1s linear;will-change:transform}section.map .leaflet-marker-icon:hover img:not(.active){transform:scale(calc(var(--scale) + .1))}section.map .leaflet-marker-icon p{text-align:center;font-size:1.2em;top:.2em;transform:translateY(-100%);text-wrap:nowrap;left:calc(100% - .2em);position:absolute;background:var(--myBlue);padding:.1em .4em;border-radius:.2em;opacity:0;transition:opacity .25s;pointer-events:none;box-shadow:var(--dropShadow);color:var(--myWhite);animation:wiggle-counter 5s ease infinite var(--delay, 0s)}section.map .leaflet-marker-icon:hover{z-index:10000!important}section.map .leaflet-marker-icon:hover .prop-pin:not(.active)+p{opacity:1}section.map .leaflet-popup-content-wrapper{padding:0}section.map .leaflet-popup-content{margin:0}.leaflet-popup-content-wrapper,.leaflet-popup-tip{box-shadow:var(--dropShadow)}@keyframes wiggle{0%{transform:rotate(0)}10%{transform:rotate(-5deg)}20%{transform:rotate(5deg)}30%{transform:rotate(0)}to{transform:rotate(0)}}@keyframes wiggle-counter{0%{transform:translateY(-100%) rotate(0)}10%{transform:translate(.25rem,-50%) rotate(5deg)}20%{transform:translate(-.25rem,-125%) rotate(-5deg)}30%{transform:translateY(-100%) rotate(0)}to{transform:translateY(-100%) rotate(0)}}@media only screen and (max-width: 768px){section.map ul.popups{display:flex}section.map .leaflet-popup.projectcard{display:none}section.map .controls{top:unset;right:unset;left:0;bottom:0;align-items:flex-start;flex-direction:column-reverse;width:auto;height:auto;width:100%}section.map .controls figure{clip-path:inset(100% 0 0 0)}section.map .controls figure.mini-map{z-index:13}section.map figure.legend ul li img{width:1.5em}section.map figure.legend ul li.gemeentegrenzen-nzkg:before{width:1.5em}section.map .controls button{font-size:.7rem}section.map .controls button~button{right:unset;bottom:4.5em;top:unset;left:0;transform:none;margin:0;position:absolute;left:1rem;transform:translateY(calc(var(--top, 0) * -1));transition:background .25s,color .25s,transform .25s}section.map .controls button~button+figure{right:unset;left:1rem;bottom:7.7em;top:unset;transform:none;font-size:.7rem;padding:.8rem .5rem .4rem}section.map button[data-active=true]+figure{clip-path:inset(0 0 0 0)}section.map .controls figure img{max-width:11.6rem}section.map>nav a h2{font-size:calc(var(--font-size-body) * 1.2)}section.map>nav a p{font-size:calc(var(--font-size-body) * .8)}}
