/* #main-ensemble {
  background-color: rgb(230, 0, 126, 10%);
} */

.main-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.main-box__item {
  max-width: 300px;
  border: solid 0.5px rgba(88, 62, 62, 0.2);
  padding: 0 0 1rem;
  margin: 2rem 0;
  background-color: white;
  z-index: 50;

  box-shadow: 1px 1px 10px rgb(70, 70, 70, 30%);

  /* background-color: linen; */
}

.main-box__item:hover {
  background-color: rgb(230, 0, 126, 10%);
}

.main-box__image,
.main-box__addon {
  max-width: 80vw;
  z-index: 100;

  transition: all 2s ease-in-out;
}

.main-box__image {
  display: block;
  overflow: hidden;

  transition: box-shadow 1s ease-in-out;
}

.main-box__image:hover {
  box-shadow: 8px 8px 10px rgb(230, 0, 126, 10%);
}

.main-box__image-pic {
  /* Zentrieren des Fotos */
  display: block;
  text-align: left;
  margin: 0 auto 0;
  padding: 0;

  width: 100%;

  transition: transform 1s ease-in-out;
}

.main-box__image-pic:hover {
  transform: scale(1.03);
}

.main-box__addon {
  padding: 2rem 1rem 0;
  margin: 0;
  border-top: 4px solid rgb(230, 0, 126);

  transition: all 0.5s ease-in-out;

  /* display:flex;
    flex-wrap: wrap; */
}

.main-box__addon__name {
  text-align: center;
  width: 100%;
  /* color:rgb(145, 0, 80, 95%); */
  /* padding: 0 0 1rem; */

  /* background-color: rgb(0,159,227, 10%); */
}

.main-box__addon__task {
  text-align: center;
  font-weight: 400;
  margin: 0;
  padding: 0.25rem 0 1.5rem;

  /* background-color: lightskyblue; */
}

.main-box__addon__text {
  margin: 0;
  padding: 0;
}


/* --- MEDIA QUERIES --- */

/* Smartphones - Bis zu einer Breite des Viewports von 640px ... wie oben angeführt */

/* Größer als Smartphones (FÜR ALLES FOLGENDE) - Ab einer Breite des Viewports von 640px  ... */
@media screen and (min-width: 40rem) {
  .main-box {
    justify-content: space-evenly;
    /* background-color: seagreen; */
  }

  .main-box__item {
    width: max-content;
    max-width: 380px;
    margin: 2rem 0;
    padding: 1rem 2rem 2rem;
  }

  .main-box__image {
    margin: 1rem auto 1rem;
  }

  .main-box__addon {
    padding: 2rem;
    margin: 2rem 0 0;
  }

  .main-box__addon:hover {
    background-color: white;
  }
}


/* Tablet - Ab Viewportbreite von 640px bis 992px... */
@media screen and (min-width: 40rem) and (max-width: 61.99rem) {
  .main-box__image-pic,
  .main-box__addon {
    max-width: 40vw;
  }
}

/* Desktop - Ab Viewportbreite von 992px bis 1200px... */
@media screen and (min-width: 62rem) and (max-width: 74.99rem) {
  .main-box__image-pic,
  .main-box__addon {
    max-width: 30vw;
  }
}

/* Widescreen - Ab einer Viewportbreite von 1200px ... */
@media screen and (min-width: 75rem) and (max-width: 79.99rem) {
  .main-box__image-pic,
  .main-box__addon {
    max-width: 20vw;
  }
}

/* Widescreen - noch größer ... */
@media screen and (min-width: 80rem) {
  .main-box__image-pic,
  .main-box__addon {
    max-width: 17vw;
  }
}