.pin_spacer {
  margin: 10px 25px 0px 0px !important;
  padding: 0px;
  cursor: pointer;
}

.pin_preview_back {
  cursor: move;
}

.pin__construct {
  /*
  border-radius: 100%;
  width: 15px;
  height: 15px;
  top: 10%;
  left: 10%;
  transform: scale(0.55);
  animation: pulse 2.5s infinite;
  border: 10px solid;
  */
  border-radius: 100%;
  /*
  width: 2.1%;
  height: 2.5%;
  */

  width: 12px;
  height: 12px;


  top: 10%;
  left: 10%;
  transform: scale(0.5);
  animation: pulse 2.5s infinite;
  border: 7px solid;
}

.pin__construct_image {
  border-radius: 100%;
  /*
  width: 38px;
  height: 38px;
  */
  width: 5.3%;
  height: auto;
  aspect-ratio: 1 / 1;
  top: 10%;
  left: 10%;
  transform: scale(0.55);
  animation: pulse_img 2.5s infinite;
  background-color: inherit;
}

.pin__yellow {
  border-color: #fff453 !important;
  background-color: #fff;
}

.pin__red {
  background-color: #c90000 !important;
}

.pin__blue {
  border-color: #294b7f !important;
  background-color: #fff;
}

.pin__circle {
  border-color: #61fb31 !important;
  background-color: #fff;
}

.pin__mi_tuerkis_b {
  border-color: #00838f !important;
  background-color: #fff;
}

.pin__mi_interaktionsfarbe {
  border-color: #48bfa2 !important;
  background-color: #fff;
}

.pin__turkis {
  border-color: #0099a6 !important;
  background-color: #fff;
}

.pin__turkis__hell {
  border-color: #000000 !important;
  background-color: #fff;
}

.pin__gelbgruen {
  border-color: #48bfa2 !important;
  background-color: #fff;
}

.pin__turkis_dunkel {
  border-color: #00838f !important;
  background-color: #fff;
}

.pin__orange {
  border-color: #ff6600 !important;
  background-color: #fff;
}

.pin__pink {
  border-color: #ff00bf !important;
  background-color: #fff;
}

.pin__green {
  border-color: #45b450 !important;
  background-color: #fff;
}

.pin__black {
  border-color: #000 !important;
  background-color: #fff;
}

.pin__preview {
  cursor: pointer;
  float: left;
  margin: 5px 10px;
}

figure {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 100%;
  /* Use aspect-ratio to maintain image proportions */
  aspect-ratio: var(--image-aspect-ratio, auto);
  overflow: hidden;
  /* Fallback for browsers without aspect-ratio support */
  padding-bottom: var(--image-padding-bottom, 0);
}

figure a {
  position: absolute;
  width: 4%;
  height: 4%;
  border-radius: 50%;
  background: #000;
  /* Ensure pins scale with the image */
  transform-origin: center;
}

/* Add container for the image to maintain aspect ratio */
figure .mapimage {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  max-width: 100%;
  max-height: 100%;
  /* Fallback positioning */
  position: absolute;
  top: 0;
  left: 0;
}



.pin_o {
  height: 25px;
  float: left;
  margin: 7px 5px 0px 10px;
}

.pin_yellow {
  background: #faff00;
  float: left;
  border-radius: 50%;
  margin: 7px 5px 0px 10px;
  height: 25px;
  width: 25px;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  transform: scale(0.75);
  animation: pulse 2.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.85);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.85);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}


@keyframes pulse_img {
  0% {
    transform: scale(0.85);
  }

  70% {
    transform: scale(1.15);
    -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 15.5));
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 15.5));
  }

  100% {
    transform: scale(0.85);
  }
}

@media only screen and (max-width: 600px) {
  .pin__construct {
    border-radius: 100%;
    width: 12px;
    height: 12px;
    border: 5px solid;
  }

  .pin__yellow {
    border-color: #fff453;
  }
}