@keyframes fade-in {
  0%, 70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes showText {
  0% {
    opacity: 0;
  }
  5%, 100% {
    opacity: 1;
  }
}
@keyframes hideText {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* styles for images inserted with event configurator */
.alignright {
  display: block;
  margin-left: auto;
}

.alignleft {
  display: block;
  margin-right: auto;
}

.aligncenter {
  display: block;
  margin: auto;
}

.em-view-container {
  background-color: var(--wp--preset--color--sand);
  padding-top: 100px;
}
.em-view-container .em-list {
  color: var(--wp--preset--color--white) !important;
  font-family: var(--wp--preset--font-family--montblanc) !important;
  font-size: 1.125rem !important;
}
.em-view-container .pellegrin-event {
  font-family: var(--wp--preset--font-family--montblanc);
  position: relative;
  margin: 0 auto;
  width: 62.5vw;
  padding-top: 47px !important;
  overflow: hidden;
  max-height: 232px;
  transition: max-height 0.5s ease-out;
  padding: 0;
  cursor: pointer;
}
.em-view-container .pellegrin-event:first-of-type {
  padding-top: 0px !important;
}
.em-view-container .pellegrin-event.expanded {
  /* max-height: 150vh; set via js to the content depending height, to have the configured animation duration time */
}
.em-view-container .pellegrin-event.expanded .description {
  /* done to be able to have the bottom 50px distance when expanded */
  margin-bottom: 0 !important;
}
.em-view-container .pellegrin-event.expanded .description h2, .em-view-container .pellegrin-event.expanded .description h3 {
  color: var(--wp--preset--color--dark-blue);
}
.em-view-container .pellegrin-event.expanded .description a {
  color: var(--wp--preset--color--pink) !important;
}
.em-view-container .pellegrin-event.expanded .description a:hover {
  text-decoration: underline;
}
.em-view-container .pellegrin-event.expanded .description.show {
  /* this is important for the transparent events pattern startseite */
  /* without hiding and showing the text would be visible under the events icon  */
  animation: showText 500ms forwards;
}
.em-view-container .pellegrin-event.expanded .icon.close {
  animation: fade-in 300ms forwards;
}
.em-view-container .pellegrin-event.expanded .icon.open {
  animation: fade-out 300ms forwards;
}
.em-view-container .pellegrin-event.initial-config {
  /* used to setup icons and text at load without animation, class gets removed with js when event is clicked  */
}
.em-view-container .pellegrin-event.initial-config .description {
  opacity: 0;
  animation: none;
}
.em-view-container .pellegrin-event.initial-config .icon.close {
  opacity: 0;
  animation: none;
}
.em-view-container .pellegrin-event.initial-config .icon.open {
  opacity: 1;
  animation: none;
}
.em-view-container .pellegrin-event:hover {
  border-color: var(--wp--preset--color--pink);
}
.em-view-container .pellegrin-event:hover .icon {
  fill: var(--wp--preset--color--pink) !important;
}
.em-view-container .pellegrin-event:focus .icon {
  fill: var(--wp--preset--color--pink);
}
.em-view-container .pellegrin-event .icon {
  position: absolute;
  width: 100%;
  height: 27px;
  left: 0;
  right: 0;
  bottom: 0;
  margin-right: auto;
  margin-left: auto;
  background-color: var(--wp--preset--color--sand);
  fill: silver;
  transition: opacity 0.5s ease-out, fill 0.3s ease;
}
.em-view-container .pellegrin-event .icon.close {
  animation: fade-out 300ms forwards;
}
.em-view-container .pellegrin-event .icon.open {
  animation: fade-in 300ms forwards;
}
.em-view-container .pellegrin-event .icon.mobile {
  display: none;
}
.em-view-container .pellegrin-event .title {
  display: flex;
  flex-direction: row;
  color: var(--wp--preset--color--dark-blue);
  margin-bottom: 50px;
}
.em-view-container .pellegrin-event .title .first {
  display: flex;
  flex-direction: column;
  width: 25%;
}
.em-view-container .pellegrin-event .title .first .date {
  font-weight: 200;
  font-size: 3.125rem;
  line-height: var(--wp--custom--line-height--head) !important;
  letter-spacing: 0;
  margin-bottom: 18px !important;
}
.em-view-container .pellegrin-event .title .first .time {
  border-top: 2px solid var(--wp--preset--color--dark-blue);
  padding-top: 10px !important;
  width: fit-content;
  font-weight: 300;
  font-size: 1.43rem;
  line-height: var(--wp--custom--line-height--head) !important;
  letter-spacing: -0.5px;
}
.em-view-container .pellegrin-event .title .second {
  display: flex;
  flex-direction: column;
}
.em-view-container .pellegrin-event .title .second .name {
  font-weight: 200;
  font-size: 3.125rem;
  line-height: var(--wp--custom--line-height--head) !important;
  letter-spacing: 0;
  margin-bottom: 30px !important;
}
.em-view-container .pellegrin-event .title .second .location {
  font-weight: 300;
  font-size: 1.43rem;
  line-height: var(--wp--custom--line-height--head) !important;
  letter-spacing: -0.5px;
}
.em-view-container .pellegrin-event .description {
  cursor: auto;
  margin-bottom: 50px;
  /* without transition the collapse animation jerked because the margin bottom was added back at once */
  transition: margin-bottom 0.5s ease;
  animation: hideText 500ms forwards;
  /* button style, to identify link as button strikethrough styling is used */
  /* p:has(del) { */
  /* padding-top: 2.629vh !important; /\* less then bottom, because it accounts for margin-bottom of previous element *\/ */
  /* padding-bottom: 4.629vh !important; */
  /* } */
}
.em-view-container .pellegrin-event .description p:last-child {
  /* this adds the 20px height of the bottom icon to final bottom distance, to get the white space to have 50px */
  padding-bottom: 20px;
}
.em-view-container .pellegrin-event .description p:not(:empty) {
  margin-bottom: 50px !important;
  color: var(--wp--preset--color--dark-blue);
  font-weight: 300;
  font-size: 1.43rem;
  line-height: 1.35 !important;
  letter-spacing: 0;
}
.em-view-container .pellegrin-event .description a {
  transition: all 0.3s ease;
}
.em-view-container .pellegrin-event .description a:hover {
  color: var(--wp--preset--color--pink) !important;
}
.em-view-container .pellegrin-event .description del {
  text-decoration: none;
}
.em-view-container .pellegrin-event .description del a {
  text-transform: uppercase;
  padding: 12px 20px;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.078125rem;
  color: var(--wp--preset--color--dark-blue) !important;
  border: 2px solid var(--wp--preset--color--dark-blue);
  border-radius: 2px;
}
.em-view-container .pellegrin-event .description del a:hover {
  color: var(--wp--preset--color--white) !important;
  background-color: var(--wp--preset--color--pink) !important;
  border: 2px solid var(--wp--preset--color--pink);
}
.em-view-container .pellegrin-event .description img {
  border-radius: 3px;
}
.em-view-container .em.pixelbones p {
  margin: 0 0 !important;
}
.em-view-container .em.em-list {
  grid-gap: 0;
}

/* styling for project specific event patterns */
.project-events-wrapper {
  background-color: var(--wp--preset--color--sand);
  gap: 0;
}
.project-events-wrapper .wp-block-button {
  padding-top: 50px;
  padding-bottom: 100px;
  text-transform: uppercase;
  color: var(--wp--preset--color--dark-blue);
}

/* styling for index page */
/* background #66667b */
/* color white */
/* styling for index specific event patterns */
.index-events-wrapper {
  background-color: transparent;
  gap: 0;
}
.index-events-wrapper .em-view-container {
  background-color: transparent;
}
.index-events-wrapper .em-view-container .pellegrin-event p {
  color: var(--wp--preset--color--white) !important;
  border-top-color: var(--wp--preset--color--white) !important;
}
.index-events-wrapper .em-view-container .pellegrin-event .description h2, .index-events-wrapper .em-view-container .pellegrin-event .description h3 {
  color: var(--wp--preset--color--white) !important;
}
.index-events-wrapper .em-view-container .pellegrin-event .description del a {
  color: var(--wp--preset--color--white) !important;
  border-color: var(--wp--preset--color--white) !important;
}
.index-events-wrapper .em-view-container .pellegrin-event .icon {
  background-color: transparent;
  fill: var(--wp--preset--color--white);
}
.index-events-wrapper .wp-block-button {
  padding-top: 50px;
  padding-bottom: 100px;
  text-transform: uppercase;
  color: var(--wp--preset--color--white);
}
.index-events-wrapper .wp-block-button a:hover {
  border-color: var(--wp--preset--color--white);
}

/* RESPONSIV */
@media screen and (max-width: 1535px) {
  .em-view-container .pellegrin-event {
    width: 70vw;
  }
  .em-view-container .pellegrin-event .description p:not(:empty) {
    font-size: 1.3125rem;
  }
}
@media screen and (max-width: 1439px) {
  .em-view-container .pellegrin-event {
    width: 75vw;
  }
}
@media screen and (max-width: 1279px) {
  .em-view-container {
    /* padding-top: 100px !important; */
  }
  .em-view-container .pellegrin-event {
    width: 89.8vw;
    max-height: 222px;
  }
  .em-view-container .pellegrin-event .title {
    padding-bottom: 40px;
  }
  .em-view-container .pellegrin-event .title .first .date {
    font-size: 2.5rem;
  }
  .em-view-container .pellegrin-event .title .first .time {
    font-size: 1.375rem;
  }
  .em-view-container .pellegrin-event .title .second .name {
    font-size: 2.5rem;
  }
  .em-view-container .pellegrin-event .title .second .location {
    font-size: 1.375rem;
  }
  .em-view-container .pellegrin-event .description p:not(:empty) {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 1023px) {
  .em-view-container {
    padding-top: 100px !important;
  }
  .em-view-container .pellegrin-event {
    width: 89.8vw;
  }
}
@media screen and (max-width: 767px) {
  .em-view-container {
    padding-top: 100px !important;
  }
  .em-view-container .pellegrin-event {
    width: 89.8vw;
    max-height: 320px;
  }
  .em-view-container .pellegrin-event .title {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .em-view-container .pellegrin-event .title .first, .em-view-container .pellegrin-event .title .second {
    align-items: center;
  }
  .em-view-container .pellegrin-event .title .first {
    margin-bottom: 30px;
  }
  .em-view-container .pellegrin-event .title .first .date {
    margin-bottom: 10px !important;
  }
  .em-view-container .pellegrin-event .title .first .time {
    white-space: nowrap;
  }
  .em-view-container .pellegrin-event .title .second .name {
    margin-bottom: 20px !important;
  }
}
.project-events-wrapper:has(+ .video-wrapper) {
  padding-bottom: 100px;
}

.index-events-wrapper:has(+ .video-wrapper) {
  padding-bottom: 100px;
}

.em-view-container:has(+ .video-wrapper) {
  padding-bottom: 100px;
}

.project-events-wrapper:has(+ .audio-player-wrapper) {
  padding-bottom: 68px;
}

.index-events-wrapper:has(+ .audio-player-wrapper) {
  padding-bottom: 68px;
}

.em-view-container:has(+ .audio-player-wrapper) {
  padding-bottom: 68px;
}

.project-events-wrapper:has(+ .newsletter-teaser-wrapper) {
  padding-bottom: 100px;
}

.index-events-wrapper:has(+ .newsletter-teaser-wrapper) {
  padding-bottom: 100px;
}

.em-view-container:has(+ .newsletter-teaser-wrapper) {
  padding-bottom: 100px;
}

@media screen and (max-width: 1279px) {
  .project-events-wrapper:has(+ .video-wrapper) {
    padding-bottom: 100px;
  }
  .index-events-wrapper:has(+ .video-wrapper) {
    padding-bottom: 100px;
  }
}
@media screen and (max-width: 767px) {
  .project-events-wrapper:has(+ .video-wrapper) {
    padding-bottom: 100px;
  }
  .index-events-wrapper:has(+ .video-wrapper) {
    padding-bottom: 100px;
  }
}
@media screen and (max-width: 600px) {
  .em-view-container .pellegrin-event .icon {
    display: none;
  }
  .em-view-container .pellegrin-event .icon.mobile {
    display: block;
  }
}