/* * NWZ Mapplic - Fork of Mapplic for NordWestZentrum Frankfurt * Based on Version 5.0.2 by @sekler * https://www.mapplic.com/ * * Accessibility improvements by Frahm und Wandelt */ /* Base */.mapplic-element{display:grid;grid-template-rows:min(50vh,400px) auto;overflow:hidden;overflow:clip;position:relative}@media screen and (min-width:768px){.mapplic-element{column-gap:1rem;grid-template-columns:1fr auto;grid-template-rows:unset;height:calc(min(80vh, 800px))}} /* loading state */.mapplic-element.mapplic-loading{background:url(images/loader.gif) no-repeat 50%}.mapplic-element>*{opacity:1;transition:opacity .4s}.mapplic-element.mapplic-loading>*{opacity:0} /* Screen reader only - visually hidden but accessible */.mapplic-sr-only{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px} /* Components */ /* Map container */.mapplic-container{height:100%;outline:none;overflow:clip;position:relative}@media screen and (min-width:768px){.mapplic-container{overflow:visible}} /* .mapplic-zoomable::before { content: ''; position: absolute; top: calc(var(--inset-top, 0) + 0px); right: calc(var(--inset-right, 0) + 0px); bottom: calc(var(--inset-bottom, 0) + 0px); left: calc(var(--inset-left, 0) + 0px); pointer-events: none; background-color: rgb(255 0 0 / 0.1); } .mapplic-zoomable::after { content: ''; position: absolute; top: calc(0px - var(--zoom-margin, 0)); right: calc(var(--inset-right, 0) - var(--zoom-margin, 0)); bottom: calc(0px - var(--zoom-margin, 0)); left: calc(var(--inset-right, 0) - var(--zoom-margin, 0)); background-color: rgb(0 0 255 / 0.1); outline: 1px solid #0000ff; outline-offset: -2px; z-index: -1; } */.mapplic-container:focus-visible{box-shadow:inset 0 0 0 3px var(--color-gray-700,#000)}.mapplic-map{--map-scale:1;--map-x:0;--map-y:0;overflow:visible;position:absolute;transform:translate(var(--map-x),var(--map-y)) scale(var(--map-scale));transform-origin:0 0;transition:--map-scale var(--zoom-duration,0s) ease-in-out,--map-x var(--zoom-duration,0s) ease-in-out,--map-y var(--zoom-duration,0s) ease-in-out}.mapplic-map .mapplic-map-image{height:100%;position:absolute;user-select:none;width:100%}.mapplic-map[data-zoomable]{cursor:grab;touch-action:none}.mapplic-map[data-zoomable][data-dragging]{cursor:grabbing} /* Map SVG */.mapplic-map-image svg{height:100%;width:100%}.mapplic-clickable:not(g),.mapplic-map-image svg a,g.mapplic-clickable>*{cursor:pointer}.mapplic-clickable:hover{filter:brightness(.8) saturate(1.2)} /* yellow */.mapplic-clickable[data-category=gesundheit_beauty]:hover{filter:brightness(.9) saturate(1.2)} /* .mapplic-clickable:focus { outline: none; } */ /* .mapplic-clickable:focus-visible { outline: 1px solid #000; outline-offset: 2px; } */.mapplic-map-image [id^=nopointer]{pointer-events:none}[id^=landmarks] .mapplic-clickable{cursor:pointer} /* Active elements */.mapplic-active,a.mapplic-active>path,g.mapplic-active>*{opacity:1}.mapplic-error{align-items:center;display:flex;flex-direction:column;gap:.5rem;justify-content:center;margin-inline:auto;max-width:640px;text-align:center}.mapplic-error__icon{color:var(--clr-brand,#222);height:3.5rem;width:3.5rem}.mapplic-error__icon>svg{height:100%;margin-inline:auto;width:100%}.mapplic-error__title{color:var(--clr-brand,#222);font-size:var(--font-size-h3,1.5rem);font-weight:var(--font-weight-medium,500);line-height:1.2;margin-block:0;text-wrap:balance}.mapplic-error__message{line-height:1.4;margin-block:0;text-wrap:balance} /* Pin types */.mapplic-pin{background-image:url(images/pin.png);background-position:50%;background-repeat:no-repeat;background-size:18px 24px;font-size:0;height:24px;margin-left:-9px;margin-top:-23px;position:absolute;transform:scale(calc(1/var(--map-scale, 1)));transform-origin:50% 100%;transition:opacity .2s,transform var(--zoom-duration,.6s) ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:18px}.mapplic-pin.hide{display:none} /* Marker types */.mapplic-pin.mapplic-active{display:block!important}.mapplic-pin.pin-classic{background-color:#f23543;background-image:none;border-color:#f23543;border-radius:10px;height:20px;line-height:22px!important;margin-left:-10px;margin-top:-20px;transform-origin:50% 100%;width:20px}.mapplic-pin.pin-classic:before{border-color:inherit;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;border-style:solid;border-width:9px 8px 0;content:"";display:block;left:2px;position:absolute;top:16px}.mapplic-pin:before{box-sizing:content-box!important}.mapplic-pin.pin-marker{background-color:#fdca2a;background-image:none;border-color:#fdca2a;border-radius:8px;height:16px;margin-left:-8px;margin-top:-8px;transform-origin:50% 50%;width:16px}.mapplic-pin.pin-marker:before{border:6px solid;border-color:inherit;border-radius:16px;content:"";display:block;height:16px;left:-6px;opacity:.4;position:absolute;top:-6px;width:16px}.mapplic-pin.pin-disk{background-color:#fff!important;background-image:none;border-color:#f19819;border-radius:8px;color:#333!important;height:16px;margin-left:-8px;margin-top:-8px;transform-origin:50% 50%;width:16px}.mapplic-pin.pin-disk:before{border:3px solid;border-color:inherit;border-radius:16px;content:"";display:block;height:16px;left:-3px;position:absolute;top:-3px;width:16px}.mapplic-pin.pin-ribbon{background-color:#46b450;background-image:none;border-color:#46b450;border-radius:2px 2px 2px 0;height:16px;margin-left:-8px;margin-top:-20px;min-width:10px;padding:0 3px;transform-origin:8px 20px;width:auto}.mapplic-pin.pin-ribbon:after{border-color:transparent rgba(0,0,0,.5) transparent transparent}.mapplic-pin.pin-ribbon:after,.mapplic-pin.pin-ribbon:before{border-style:solid;border-width:0 8px 4px 0;content:"";display:block;left:0;position:absolute;top:16px}.mapplic-pin.pin-ribbon:before{border-color:inherit;border-bottom-color:transparent;border-left-color:transparent;border-top-color:transparent}.mapplic-pin.pin-dot{background-color:transparent!important;background-image:none;border-color:#29afa1;color:#333!important;height:16px;margin-left:4px;margin-top:-8px;min-width:10px;padding:0 3px;transform-origin:-4px 8px;width:auto}.mapplic-pin.pin-dot:before{border:3px solid;border-color:inherit;border-radius:12px;content:"";display:block;height:0;left:-7px;position:absolute;top:5px;width:0} /* Image pin */.mapplic-pin.pin-image{background-size:32px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.15);box-sizing:border-box;height:32px;margin-left:-16px;margin-top:-16px;transform-origin:50%;width:32px} /* Color variants */.mapplic-pin.orange{background-image:url(images/pin-orange.png)}.mapplic-pin.yellow{background-image:url(images/pin-yellow.png)}.mapplic-pin.green{background-image:url(images/pin-green.png)}.mapplic-pin.blue{background-image:url(images/pin-blue.png)}.mapplic-pin.purple{background-image:url(images/pin-purple.png)}.mapplic-pin.circular{background-color:#fb7575;background-image:none;border-radius:6px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.1);height:12px;width:12px}.mapplic-pin.circle,.mapplic-pin.circular{margin-left:-6px;margin-top:-6px;transform-origin:50% 50%}.mapplic-pin.circle{background:none!important;border:2px solid #fb7575;height:8px;width:8px}.mapplic-pin.transparent{background-color:#795ecd;background-image:none;border-radius:10px;height:20px;margin-left:-10px;margin-top:-10px;opacity:.5!important;transform-origin:50% 50%;width:20px} /* Label pins */.mapplic-pin.pin-label{color:#fff;font-size:10px;font-weight:600;line-height:16px;text-align:center;text-decoration:none}.mapplic-pin.pin-label:visited{color:#fff} /* Size variants */.mapplic-pin.pin-md{border-radius:50%;height:20px;line-height:20px;margin-left:-10px;margin-top:-10px;width:20px}.mapplic-pin.pin-lg{border-radius:50%;height:30px;line-height:30px;margin-left:-15px;margin-top:-15px;width:30px}.mapplic-pin.pin-xl{border-radius:50%;height:40px;line-height:40px;margin-left:-20px;margin-top:-20px;width:40px} /* Pulse animation */.mapplic-pin.pin-pulse:before{animation:pulsate 1.8s ease-out;animation-delay:1s;animation-iteration-count:infinite;border:2px solid #888;border-radius:30px;box-sizing:content-box;content:"";height:inherit;left:-2px;opacity:0;position:absolute;top:-2px;width:inherit}@-webkit-keyframes pulsate{0%{opacity:0;-webkit-transform:scale(1)}25%{opacity:.5}50%{opacity:0;-webkit-transform:scale(1.6)}} /* Retina */@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx){.mapplic-pin{background-image:url(images/pin@2x.png)}.mapplic-pin.orange{background-image:url(images/pin-orange@2x.png)}.mapplic-pin.yellow{background-image:url(images/pin-yellow@2x.png)}.mapplic-pin.green{background-image:url(images/pin-green@2x.png)}.mapplic-pin.blue{background-image:url(images/pin-blue@2x.png)}.mapplic-pin.purple{background-image:url(images/pin-purple@2x.png)}} /* Zoom Buttons */.mapplic-zoom-buttons{bottom:1rem;display:flex;filter:drop-shadow(0 0 6px rgb(0 0 0/.1));gap:.25rem; /* box-shadow: 0 0 12px rgba(0, 0, 0, 0.06); */position:absolute;right:1rem;z-index:1}@media screen and (min-width:768px){.mapplic-zoom-buttons{right:0}}.mapplic-zoom-button{--focus-color:var(--clr-brand,#222);align-items:center;background-color:var(--clr-surface,#fff);border:1px solid var(--clr-gray-500,#ccc);border-radius:.125rem;display:flex;height:2rem;justify-content:center;width:2rem}.mapplic-zoom-button:focus-visible{box-shadow:0 0 0 2px var(--focus-color);outline:2px solid var(--clr-surface,#fff);outline-offset:2px;z-index:1}.mapplic-zoom-button:not(:disabled):hover{border-color:var(--clr-brand,#222);color:var(--clr-brand,#222)}.mapplic-zoom-button:disabled{color:var(--clr-gray-300,#eee)}.mapplic-zoom-button>svg{height:100%;width:100%} /* Levels */.mapplic-level-switcher{display:flex;filter:drop-shadow(0 0 6px rgb(0 0 0/.1));flex-direction:column;position:absolute;right:0;top:1rem;z-index:1}.mapplic-level-switcher__btn{--focus-offset:0;--focus-color:var(--clr-brand,#222);background-color:var(--clr-surface,#fff);border:none;color:var(--clr-gray-700,#333);cursor:pointer;font-size:var(--font-size-xs,.875em);font-weight:var(--font-weight-medium,500);padding:.5em .75em;transition:background-color .15s ease,color .15s ease}.mapplic-level-switcher__btn:focus-visible{box-shadow:0 0 0 2px var(--focus-color);outline:2px solid var(--clr-surface,#fff);outline-offset:2px;z-index:1}.mapplic-level-switcher__btn[aria-pressed=true]:focus-visible{box-shadow:0 0 0 2px var(--clr-surface,#fff);outline:2px solid var(--focus-color)} /* Buttons are sticking to the right edge on mobile * so border-radius is only applied on the top-left * and bottom-leef */.mapplic-level-switcher__btn:first-of-type{border-radius:.25rem 0 0 0}.mapplic-level-switcher__btn:last-of-type{border-radius:0 0 0 .25rem}@media screen and (min-width:768px){ /* on larger screens buttons are floating */.mapplic-level-switcher__btn:first-of-type{border-radius:.25rem .25rem 0 0}.mapplic-level-switcher__btn:last-of-type{border-radius:0 0 .25rem .25rem}}.mapplic-level-switcher__btn:not([aria-pressed=true]):hover{color:var(--clr-brand,#222)}.mapplic-level-switcher__btn[aria-pressed=true]{background-color:var(--clr-brand,#222);color:var(--clr-surface,#fff)} /* Sidebar */.mapplic-sidebar{align-self:flex-start;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr;height:100%;order:1;overflow:hidden;position:relative} /* .mapplic-sidebar > * { width: 100vw; } */@media screen and (min-width:768px){.mapplic-sidebar{filter:drop-shadow(0 0 6px rgb(0 0 0/.1));padding-block:var(--space-md,1rem);padding-inline-end:1rem;z-index:1}.mapplic-sidebar>*{max-width:360px;min-width:240px;width:25vw}}@media screen and (min-width:1240px){.mapplic-sidebar{padding-inline-end:2rem}} /* .mapplic-sidebar > * { pointer-events: auto; } */ /* Toggle */ /* .mapplic-toggle { display: block; cursor: pointer; font-size: 14px; position: relative; min-width: 20px; min-height: 20px; } .mapplic-toggle > .mapplic-toggle-circle { background-color: #aaa; border-radius: 50%; position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; transform-origin: center; transform: scale(0); transition: 0.2s; } .mapplic-toggle:before { background-color: #fff; border: 1px solid #e4e4e4; border-radius: 50%; box-sizing: content-box; content: ''; display: block; position: absolute; left: 0; top: 0; width: 18px; height: 18px; } .mapplic-toggle > input { display: none; } .mapplic-toggle > input:checked + span { transform: scale(0.7); } /* Reveal */ /* .mapplic-revealed { display: block !important; } */ /* Search */.mapplic-sidebar__filter{background-color:var(--clr-surface,#fff);border-radius:.5rem .5rem 0 0;padding:1rem}.mapplic-sidebar__filter:has(.mapplic-sidebar__tags[aria-hidden=false]){padding-block-end:0}.mapplic-search{align-items:center;background-color:var(--clr-gray-100,#ccc);border-radius:.5rem;display:flex}.mapplic-search:focus-within{outline:1px solid var(--clr-brand,#222)} /* Search icon (inline SVG, visible in high-contrast mode) */.mapplic-search__icon{align-items:center;color:#222;display:flex;flex-shrink:0;height:2rem;justify-content:center;pointer-events:none;width:2rem;z-index:1}.mapplic-search .mapplic-search__icon>svg{height:1rem;width:1rem}.mapplic-search__input{background:transparent;border:none;box-shadow:none;box-sizing:border-box;font-family:inherit;font-size:var(--font-size-base,1.125rem);height:2.5rem;margin:0;padding:0;text-align:center;width:100%}.mapplic-search__input:focus,.mapplic-search__input:focus-visible{outline:none}.mapplic-search__input::placeholder{color:#767676; /* WCAG AA contrast fix: was #ccc (1.6:1), now 4.5:1 */font-weight:400}.mapplic-search__input::-ms-clear{display:none;height:0;width:0}.mapplic-search__clear{align-items:center;background:transparent;border:none;box-shadow:none;color:var(--clr-gray-600,#555);cursor:pointer;display:flex;flex-shrink:0;height:2rem;justify-content:center;opacity:1;transition:opacity .15s ease;width:2rem}.mapplic-search__clear:disabled{cursor:default;opacity:0;pointer-events:none}.mapplic-search__clear svg{height:.75rem;width:.75rem} /* Tags */.mapplic-sidebar__tags{background-color:var(--clr-surface,#fff)}.mapplic-tag{align-items:baseline;color:var(--clr-brand,#222);display:flex;font-weight:var(--font-weight-medium,500);gap:.5rem;justify-content:space-between;line-height:1.3;padding:.5em 0}.mapplic-tag:before{background-color:var(--category-color,#888);border-radius:50%;content:"";height:.75rem;width:.75rem}.mapplic-tag__remove{align-items:center;background:none;border:none;border-radius:.25rem;cursor:pointer;display:flex;height:2rem;justify-content:center;margin-left:auto;width:2rem}.mapplic-tag__remove>svg{height:.7rem;transition:opacity .2s;width:.7rem}.mapplic-tag__remove:hover>svg{fill:var(--clr-brand,#222);transform:scale(1.2)} /* Sidebar list */.mapplic-sidebar__list-container{height:auto;max-height:100%;overflow-y:auto;position:relative;-webkit-overflow-scrolling:touch;align-self:start;background:var(--clr-surface,#fff);border-radius:0 0 .5rem .5rem}@media screen and (min-width:768px){.mapplic-sidebar__list-container{height:100%}}.mapplic-list{font-size:.875rem;height:100%;list-style:none;margin:0;overflow-y:auto;padding:.5rem 0}@media screen and (min-width:1240px){.mapplic-list{padding-block:0 1rem}}.mapplic-sidebar__list-container ol{border-color:#eee;list-style:none;margin:0;padding:0}.mapplic-list-expandable{background-color:#fff;padding:10px 0}.mapplic-sidebar__list-container li{margin:0} /* Category link/button - support both and