html,
body {
  position: relative;
  height: 100vh;
  font-size: 16px;
}



body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.caption {
  font-size: .9em;
  background: #fff;
  opacity: .4;
  display: block;
  height: 18px;
  text-align: center;
  z-index: 30000;
  position: absolute;
  bottom: 5%;
  position: absolute;
  bottom: 0px;
  border: 0 solid red;

}

/* bildzähler */
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  top: 20px;
  left: 0;
  width: 100%;
  height: 1em;
  font-size: .9em;
  opacity: .5;
  border: 0 solid rgb(38, 198, 46);


}

/*------------------------------------------------------
closebutton on click
---------------------------------------------------------*/
.close-button {
  position: absolute;
  top: 20px;
  right: 10px;
  background: transparent;

  color: rgb(130, 128, 128);
  border: none;
  border-radius: 0%;
  font-size: 30px;
  cursor: pointer;
  display: flex;
  align-items: start;
  justify-content: end;
  z-index: 40000;
}

/*------------------------------------------------------
closebutton-space on click
---------------------------------------------------------*/
.close-button-space {
  position: absolute;
  top: 20px;
  right: 13%;
  height: 100vh;
  width: 75%;
  background: transparent;
  color: rgb(130, 128, 128);
  border: none;
  border-radius: 0%;
  font-size: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 40000;
  border: 0 solid rgb(51, 0, 255);
}

.caption {
  top: 97vh;
  position: absolute;
  border: 0 solid rgb(30, 0, 255);
  position: absolute;
}

/* bildzähler */
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  top: 20px;
  left: 0;
  width: 100%;


}



.swiper {
  width: 100%;
  height: 100%;
  border: 0 solid red !important;

}

.swiper-slide {
  text-align: center;
  background: #444;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  object-fit: cover;
  border: 1px solid rgb(12, 255, 57);

}

.mySwiper {
  border: 0 solid orange;
}




/*------------------------------------------------------
#media screen 600 Landscape phones caption ausschließen
---------------------------------------------------------*/
@media screen and (max-height:415px) {
  .caption {
    visibility: hidden;
    visibility: visible;

  }

  .caption {
    top: 90vh !important;
    position: absolute;
    border: 0 solid rgb(30, 0, 255);
    position: absolute;
  }

  .swiper-slide img {
    display: block;
    width: 29% !important;
    height: auto;
    object-fit: cover;
    border: 0 solid rgb(12, 255, 57);

  }


  .swiper-button-next {
    z-index: 50000 !important;
    background-color: #f1f1f1;
    opacity: .8;
    border-radius: 1px;
    padding: 2%;
  }

  .swiper-button-prev {
    z-index: 50000 !important;
    background-color: #f1f1f1;
    opacity: .8;
    border-radius: 1px;
    padding: 2%;
  }
}









/*------------------------------------------------------
#media big screen min width 1400
---------------------------------------------------------*/
@media screen and (min-width: 1400px) {
  .swiper-slide {
    xbackground-size: auto 800px;
  }

  .caption {
    top: 97vh;
    position: absolute;
    border: 0 solid red;
    position: absolute;

  }




  .swiper-slide img {
    display: block;
    object-fit: cover;
    border: 0 solid rgb(12, 255, 57);

  }
}


@media screen and (max-width:980px) {
  .swiper-slide img {
    display: block;
    width: 92%;
    max-width: 500px;
    height: auto;
    object-fit: cover;
    border: 0 solid rgb(12, 255, 57);

  }


}




@media screen and (max-width:1024px) {
  .swiper-slide img {
    display: block;
    width: 82%;
    max-width: 980px;
    height: auto;
    object-fit: cover;
    border: 0 solid rgb(12, 255, 57);

  }

}

@media screen and (max-width:1280px) {
  .swiper-slide img {
    display: block;
    width: 56%;
    height: auto;
    object-fit: cover;
    border: 0 solid rgb(12, 255, 57);

  }

  .caption {
    top: 94vh;
    position: absolute;
    border: 0 solid red;
    position: absolute;

  }

}


@media screen and (max-width:1440px) {
  .swiper-slide img {
    display: block;
    width: 45%;
    height: auto;
    object-fit: cover;
    border: 0 solid rgb(12, 255, 57);

  }


}


@media screen and (max-width:440px) {
  .swiper-slide img {
    display: block;
    width: 55%;
    height: auto;
    object-fit: cover;
    border: 0 solid rgb(12, 255, 57);

  }


}

.swiper-button-next {
  z-index: 50000 !important;
  background-color: #fff;
  background-color: transparent;
  opacity: 1;
  border-radius: 1px;
  padding: 2%;
}

.swiper-button-prev {
  z-index: 50000 !important;
  background-color: #fff;
    background-color: transparent;

  opacity: 1;
  border-radius: 1px;
  padding: 2%;
}













/*Änderungen für Desktop Lösungen */




/* Reset – wichtig für Fullscreen */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  /* verhindert Scrollen */
}

/* Swiper Container */
.swiper {
  width: 100%;
  height: 100dvh;
  /* BESTE Lösung für Mobile */
}

/* Slides */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: #ffffff;
  /* optional für Galerie-Look */
}

/* Bilder perfekt skalieren */
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* wichtig für Kunstwerke */
}

/* Caption unten drüberlegen */
.caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: rgb(37, 37, 37);
  font-size: 14px;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.4);
  padding:0;
}



/* Pagination lesbarer */
.swiper-pagination {
  color: rgb(47, 47, 47);
  font-size: 14px;
}
  .swiper-horizontal {

      .swiper-button-next,
      .swiper-button-prev,
      ~.swiper-button-next,
      ~.swiper-button-prev {
        margin-left: 0;
        color:rgb(197, 196, 196);

        margin-top: calc(0px - var(--swiper-navigation-size) / 2);
        top: var(--swiper-navigation-top-offset, 82%);
      }

    }


/* Close Button */
.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  font-size: 20px;
  background: rgb(255 255 255 / 50%);
  color: #676767;
  border: none;
  padding: 8px 12px;
}

/* unsichtbarer Klickbereich (optional behalten) */
.close-button-space {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: transparent;
  border: none;
  z-index: 5;
}


/* =========================
   DESKTOP & TABLET
   ========================= */
@media (min-width: 768px) {

  .swiper {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .swiper-wrapper {
    align-items: center;
  }

  .swiper-slide {
    flex-direction: column;
    /* WICHTIG */
    background: white;
  }

  /* Bild kleiner machen */
  .swiper-slide img {
    width: auto;
    height: 70vh;
    /* Hauptsteuerung der Bildgröße */
    max-width: 90%;
    object-fit: contain;
  }

  /* Caption unter das Bild */
  .caption {
    position: static;
    /* entfernt overlay */
    background: none;
    color: black;
    margin-top: 15px;
    max-width: 800px;
    text-align: center;
  }

  /* Pagination nach unten */
  .xswiper-pagination {
    position: static;
    margin-top: 20px;
    color: black;
    border: 1px solid red
  }

  /* Navigation Buttons etwas rausziehen */
  .swiper-button-next {
    right: 20px;
  }

  .swiper-button-prev {
    left: 20px;
  }
}


@media (min-width: 768px) {
  .swiper-slide {
    gap: 10px;
  }

  .caption {
    font-size: 16px;
    opacity: 0.8;
        color: #676767;

  }
}
@media (min-width: 768px) {
  .swiper .swiper-pagination {
    color: #000;
  }
   .swiper-horizontal {

      .swiper-button-next,
      .swiper-button-prev,
      ~.swiper-button-next,
      ~.swiper-button-prev {
        margin-left: 0;
        color:rgb(197, 196, 196);

        margin-top: calc(0px - var(--swiper-navigation-size) / 2);
        top: var(--swiper-navigation-top-offset, 50%);
      }

    }

}