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

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

.main-box__item {
  width: max-content;
  border: solid 0.5px rgb(70, 70, 70, 20%);
  padding: 1rem 0 1rem;
  margin: 2rem 0;
  background-color: white;

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

  transition: all 1s ease-in-out;

  /* background-color: linen; */
}

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

.main-box__year {
  text-align: center;
  width: 100%;

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

.main-box__image {
  display: block;

  /* Zentrieren des Plakats */
  text-align: left;
  margin: 1rem auto 0;

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

.main-box__image:hover {
  box-shadow: 8px 8px 10px rgb(0, 159, 227, 10%);
  cursor: default;
}

.main-box__button {
  color: rgb(0, 159, 227);
  font-size: 1.15rem;
  padding: 0.5rem;
  border: none;
  background-color: transparent;
  text-align: center;
  width: 100%;

  transition: all 0.5s ease-in-out;

  /* background-color: thistle; */
}

.main-box__button:hover {
  /* background-color: rgba(219, 219, 219, 0.651); */
  /* box-shadow: inset 0 0 20px rgba(219, 219, 219, 75%); */
  border: 3px solid rgb(0, 159, 227);
  color: rgb(0, 159, 227);
  cursor: pointer;
  padding: 1rem;
}

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

  transition: all 0.5s ease-in-out;

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

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

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

.main-box__addon__text {
  /* background-color: lightpink; */
}

.main-box__addon__year {
  font-size: 0.8rem;
  margin: 0 0 0.5rem;

  /* background-color: lightsalmon; */
}

.main-box__addon__title {
  /* color: rgb(145, 0, 80, 95%); */
}

.main-box__addon__author {
  font-weight: 400;
  margin: 0.75rem 0 0 0;

  /* background-color: lightskyblue; */
}

.main-box__addon__author + p {
  /* background-color: seagreen; */
  margin: 1rem 0 0;
}

.main-box__addon__images {
  background-color: rgb(0, 159, 227, 10%);

  /* background-color: darkblue; */
}


/* --- AKKORDEON --- */

.akkordeon {
  margin: 1rem 0 0;
}

.main-box__addon__content {
  box-shadow: none;
  margin: 0;
  padding: 1rem 0 0;

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

.show,
.hide {
  color: rgb(0, 159, 227);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  margin: 1rem 0;
  border: none;
  background-color: transparent;
  text-align: center;
  width: 100%;
  box-shadow: none!important;
}

.show:hover,
.hide:hover {
  border-bottom: 3px solid rgb(230,0,126);
  cursor: pointer;
  color: rgb(230,0,126)!important;

  /* transition: 10s ease-in-out!important; */
}

/* 2020 */
#akkordeon-2020:not(:target) .main-box__addon__content,
#akkordeon-2020:not(:target) .hide,
#akkordeon-2020:target .show {
  display: none;
}
#akkordeon-2020:target .main-box__addon__content {
  display: block;
}

/* 2019 */
#akkordeon-2019:not(:target) .main-box__addon__content,
#akkordeon-2019:not(:target) .hide,
#akkordeon-2019:target .show {
  display: none;
}
#akkordeon-2019:target .main-box__addon__content {
  display: block;
}

/* 2018 */
#akkordeon-2018:not(:target) .main-box__addon__content,
#akkordeon-2018:not(:target) .hide,
#akkordeon-2018:target .show {
  display: none;
}
#akkordeon-2018:target .main-box__addon__content {
  display: block;
}

/* 2017 */
#akkordeon-2017:not(:target) .main-box__addon__content,
#akkordeon-2017:not(:target) .hide,
#akkordeon-2017:target .show {
  display: none;
}
#akkordeon-2017:target .main-box__addon__content {
  display: block;
}

/* 2016 */
#akkordeon-2016:not(:target) .main-box__addon__content,
#akkordeon-2016:not(:target) .hide,
#akkordeon-2016:target .show {
  display: none;
}
#akkordeon-2016:target .main-box__addon__content {
  display: block;
}

/* 2015-1 */
#akkordeon-2015-1:not(:target) .main-box__addon__content,
#akkordeon-2015-1:not(:target) .hide,
#akkordeon-2015-1:target .show {
  display: none;
}
#akkordeon-2015-1:target .main-box__addon__content {
  display: block;
}

/* 2015-2 */
#akkordeon-2015-2:not(:target) .main-box__addon__content,
#akkordeon-2015-2:not(:target) .hide,
#akkordeon-2015-2:target .show {
  display: none;
}
#akkordeon-2015-2:target .main-box__addon__content {
  display: block;
}

/* 2014 */
#akkordeon-2014:not(:target) .main-box__addon__content,
#akkordeon-2014:not(:target) .hide,
#akkordeon-2014:target .show {
  display: none;
}
#akkordeon-2014:target .main-box__addon__content {
  display: block;
}

/* 2013 */
#akkordeon-2013:not(:target) .main-box__addon__content,
#akkordeon-2013:not(:target) .hide,
#akkordeon-2013:target .show {
  display: none;
}
#akkordeon-2013:target .main-box__addon__content {
  display: block;
}

/* 2012 */
#akkordeon-2012:not(:target) .main-box__addon__content,
#akkordeon-2012:not(:target) .hide,
#akkordeon-2012:target .show {
  display: none;
}
#akkordeon-2012:target .main-box__addon__content {
  display: block;
}

/* 2011 */
#akkordeon-2011:not(:target) .main-box__addon__content,
#akkordeon-2011:not(:target) .hide,
#akkordeon-2011:target .show {
  display: none;
}
#akkordeon-2011:target .main-box__addon__content {
  display: block;
}


/* --- 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;
    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,
  .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,
  .main-box__addon {
    max-width: 30vw;
  }
}

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

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