html,body,#map{
  margin:0;
  height:100%
}


#map.map-detail {
  height: 833px;
  width: 930px;
  margin: 0 auto;
  max-width: 100%
}


.pin {
  position:absolute;
  width:70px;
  height:40px;
  color:#fff;
  font: 700 22px radikal, Arial, Helvetica, Sans-Serif;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  z-index: 1;
}

.pin::after {
  content:'';
  position:absolute;
  background:#000;
  z-index: -1;
}

.normal-pin {
  /*border-radius:50%;*/
  background:#000;
  z-index: 0;
}
.normal-pin::after {
  left:50%;
  bottom:-4px;
  transform:translateX(-50%) rotate(45deg);
  width:14px;
  height:14px;
  z-index: -1;
}

.raute-pin {
  background: none;
  display:flex;
  z-index: 1;
}
.raute-pin::after {
  bottom:0;
  transform: rotate(45deg);
  width:33px;
  height:33px;
  z-index: -1;
}

/* für Detail View */
.pin.non-focus {
  color: #fff;
  width:40px;
  height:27px;
  font-size: 14px;
}

.normal-pin.non-focus, .pin.non-focus::after {
  background:#000;
  /*border: 1px solid #c452b4;*/
}
.maplibregl-canvas {
  filter: grayscale(100%);
}

.normal-pin.non-focus::after {
  bottom:-3px;
  width:10px;
  height:10px;
}

.raute-pin.non-focus::after {
  width: 26px;
  height: 26px;
}
.maplibregl-ctrl-top-right {
    z-index: 0;
}