*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%;font-family:Fira Sans,sans-serif;font-weight:400;font-style:normal;overflow:hidden}#main-window{height:100%;position:relative}#loader{width:100%;height:100%;background-color:#eee;display:flex;align-items:center;justify-content:center}#map-view{width:100%;height:100%;background-color:#fff;box-sizing:border-box}#detail-view{position:fixed;top:0;right:-80%;width:80%;height:100%;background:#fffc;transition:right .4s cubic-bezier(.4,0,1,.6);padding:20px;box-sizing:border-box}#detail-view-verkehr,#detail-view-park{position:fixed;top:0;right:0;width:40%;color:#fff;background:#0f281ecc;margin:60px;padding:60px;box-sizing:border-box;line-height:1.6;opacity:0;z-index:9}.hide-me{display:none}.controller-container{position:absolute;bottom:30px;right:30px}.controller-button{margin-top:10px;position:relative;width:200px;height:50px;padding:10px 14px;background-color:#ffffffe6;border:rgb(113,113,113) solid 1px;border-radius:8px}.controller-button:hover{cursor:pointer;background-color:#e7e7e7e6}.back-button{pointer-events:all;display:inline-block;border:rgb(255,255,255) solid 1px;border-radius:8px;padding:10px 14px}.back-button:hover{cursor:pointer;background-color:#e7e7e733}:root{--tram-farbe: #eb660c;--bus-farbe: #189cd8}.tram-haltestelle-label{width:30px;height:30px;background:#fff;color:var(--tram-farbe);font-size:23px;padding:0 6px;border:var(--tram-farbe) solid 1px;border-radius:15px;opacity:0;transition:opacity .5s}.tram-haltestelle-span{width:30px;height:30px;background:#fff;color:var(--tram-farbe);font-size:23px;padding:0 6px;border:var(--tram-farbe) solid 1px;border-radius:15px}.bus-haltestelle-label{width:30px;height:30px;background:#fff;color:var(--bus-farbe);font-size:23px;padding:0 6px;border:var(--bus-farbe) solid 1px;border-radius:15px;opacity:0;transition:opacity .5s}.bus-haltestelle-span{width:30px;height:30px;background:#fff;color:var(--bus-farbe);font-size:23px;padding:0 6px;border:var(--bus-farbe) solid 1px;border-radius:15px}.info-img{width:100%;height:auto}.bubble-label{width:210px}.bubble{position:relative;transform:translate(50%,-48px);line-height:1.4em;margin:40px auto;background-color:#fff;border:1px solid #333;padding:5px 25px}.bubble:before,.bubble:after{content:" ";position:absolute;width:0;height:0}.speech:before{left:-1px;bottom:-24px;border:12px solid;border-color:#333 transparent transparent #333}.speech:after{left:0;bottom:-22px;border:12px solid;border-color:#fff transparent transparent #fff}.loader{width:48px;height:48px;border:5px solid #FFF;border:5px solid #99C352;border-radius:50%;display:inline-block;box-sizing:border-box;position:relative;animation:pulse 1s linear infinite}.loader:after{content:"";position:absolute;width:48px;height:48px;border:5px solid #FFF;border:5px solid #99C352;border-radius:50%;display:inline-block;box-sizing:border-box;left:50%;top:50%;transform:translate(-50%,-50%);animation:scaleUp 1s linear infinite}@keyframes scaleUp{0%{transform:translate(-50%,-50%) scale(0)}60%,to{transform:translate(-50%,-50%) scale(1)}}@keyframes pulse{0%,60%,to{transform:scale(1)}80%{transform:scale(1.2)}}