/* ------------------------------------------------------------- POPUP BILDANZEIGE UND GALERIE ---------------------------------------------------------------  */

/* ------------------------------------------------------ Bilderanimation (PUMPEN BEIM DRUEBERFAHREN) ---------------- GILT FUER ALLE BILDER AUCH GALLERIE----- */

.gallery-img {
  transition: transform 0.5s;
  padding: 0.2%; /* Hinzugefügter Innenabstand */
  background-color: black; /* Hinzugefügter Hintergrund */
             }
.gallery-img:hover {
  transform: scale(1.03);
  padding: .1%; /* Hinzugefügter Innenabstand */
   
  opacity: 1; /* Stellen Sie sicher, dass die Opazität auf 1 (vollständig sichtbar) eingestellt ist */
  background-color: transparent; /* Stellen Sie sicher, dass der Hintergrund transparent ist */
                   }
 img:hover {
   /*  box-shadow: 0 0 20em rgba(180, 112, 180, 0.8);*/
    cursor: pointer;
    z-index: 999; /* Setze den Ausgangs-Z-Index */
           }

 /* Styles für das Popup-Fenster */
   
     .popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0, 0.9);
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s, opacity 1.3s ease;
           }
    .popup.active {
      visibility: visible;
      opacity: 1;
                  }
  
     .popup-close {
      position: absolute;
      top: 2%;
      right: 2%;
      font-size: 500%;
      color: #999;
      cursor: pointer;
                 }

    .popup-img {
    width: auto;
    height: 75%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20em rgba(200, 200, 255, 1);
    border: 2px solid #BBBBBB; /* Hinzufügen einer 1px weißen Rahmen */
               }
   
  .popup-title {
      position: absolute;
      bottom: 4vh;
      left: 36vh;
      width: 100%;
      text-align: left;
      font-size: 18px;
      color: #f0e1c9;
    }
  
  .circle-button-links {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 10px;
    height: 50px;
    border-radius: 10%;
    cursor: pointer;
    border: none;
    background-color: grey;
    background-image: url('navigationspfeilrechts.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: background-color 0.3s;
  }
  
  .circle-button-links:hover {
    background-color: rgba(255, 255, 255, 1);
  }
  
  .circle-button-rechts {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 10px;
    height: 50px;
    border-radius: 10%;
    cursor: pointer;
    border: none;
    background-color: grey;
    background-image: url('navigationspfeillinks.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: background-color 0.3s;
  }
  
  .circle-button-rechts:hover {
    background-color: rgba(255, 255, 255, 1);
  }