/**
  Viewer (Collection/Blog) General
**/
#content .proz-viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

#content .proz-viewer ul.proz-viewer-hook {
  display: flex;
  width: 100%;
}

/**
  After blocks
**/
#content .proz-viewer ul.proz-viewer-hook::after {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/**
  Loading indicator
**/
#content .proz-viewer ul.proz-viewer-hook.cel-data-render::after {
  content: "";
  min-width: 128px;
  min-height: 128px;
  background-image: url(/file/resources/celRes/spinner/ajax-loader-128px.png);
  background-position: center;
  background-repeat: no-repeat;
}
/**
  Empty collection
**/
#content .proz-viewer ul.proz-viewer-hook.cel-data-empty::after {
  content: "Keine Einträge gefunden";
  font-family: var(--accent-font-sansserif);
  font-size: 25px;
  line-height: 30px;
}
#content collection-viewer.proz-viewer ul.proz-viewer-hook.cel-data-empty::after {
  content: "Keine Veranstaltungen gefunden";
}
#content blog-viewer.proz-viewer ul.proz-viewer-hook.cel-data-empty::after {
  content: "Keine Artikel gefunden";
}

/**
  Entry animation
**/
#content .proz-viewer ul.proz-viewer-hook > li {
  transition: opacity 1s ease-out;
}
#content .proz-viewer ul.proz-viewer-hook > li.cel-data-creating {
  opacity: 0;
}

/**
  Loadmore button
**/
#content .proz-viewer button.loadmore {
  padding: 0px 50px;
  margin: 20px 0px;
}

#content .proz-viewer ul.proz-viewer-hook li .eventLink > a {
  text-decoration: none;
}
#content .proz-viewer ul.proz-viewer-hook li .eventLink > a:hover {
  color: black;
}
#content .proz-viewer ul.proz-viewer-hook li .event-description img {
  display: none;
}

/**
  Block-Style
**/
#content .proz-viewer ul.proz-viewer-hook {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(296px, 1fr)); /* keep in sync with html */
  gap: 40px 30px; /* keep in sync with html */
}
#content .proz-viewer ul.proz-viewer-hook.cel-data-render::after,
#content .proz-viewer ul.proz-viewer-hook.cel-data-empty::after {
  grid-column: 1 / -1; /* span over the entire row */
}
#content .proz-viewer ul.proz-viewer-hook > li {
  width: 100%;
}
#content .proz-viewer ul.proz-viewer-hook li .event .event-img {
  display: flex;
  /* padding-top trick */
  width: 100%; /* fill width */
  padding-top: 75%; /* padding % is taken of the width, thus gives you a 4:3 aspect ratio. */
  height: 0; /* no additional height to the padding */
  position: relative;
}
#content .proz-viewer ul.proz-viewer-hook li .event .event-img img {
  border: solid 1px lightgrey;
  object-fit: cover;
  object-position: center top;
  /* padding-top trick */
  position: absolute; /* absolute to fill the area */
  top: 0;
  height: 100%; /* will fill the height of the padded area */
  width: 100%; /* will fill the width of the container */
}
#content .proz-viewer ul.proz-viewer-hook li .event .event-img .tippImgOverlay {
  display: none;
}
#content .proz-viewer ul.proz-viewer-hook li .event .event-info {
  padding: 20px 0px 0px;
}
#content .proz-viewer ul.proz-viewer-hook li .event .event-info-header {
  display: flex;
  flex-direction: row;
}
#content .proz-viewer ul.proz-viewer-hook li .event .event-info .breadcrumbs {
  margin-bottom: 6px;
}
#content .proz-viewer ul.proz-viewer-hook li .event .event-title {
  margin-bottom: 6px;
}
#content .proz-viewer ul.proz-viewer-hook li .event cel-data[field="location_name"] {
  display: block;
}
#content .proz-viewer ul.proz-viewer-hook li .event .event-date {
  display: block;
}
#content .proz-viewer ul.proz-viewer-hook li .event .event-date cel-data-datetime:not(:first-child),
#content .proz-viewer ul.proz-viewer-hook li .event .event-date cel-data-time {
  margin-left: 3px;
}
#content .proz-viewer ul.proz-viewer-hook li .event .event-date .startDate cel-data-datetime:not(:empty)::before {
  content: "Ab dem ";
}
#content .proz-viewer ul.proz-viewer-hook li .event .event-date .endDate cel-data-datetime:not(:empty)::before {
  content: "Bis zum ";
}
#content .proz-viewer ul.proz-viewer-hook li .event .event-date cel-data-time[field="startDateTime"]:not(:empty)::before {
  content: "•";
  margin-right: 6px;
}
#content .proz-viewer ul.proz-viewer-hook li .event cel-data-datetime[field="publishDate"] {
  margin-left: 10px;
  font-family: var(--font-serif);
  font-size: 15px;
}
#content .to-marker:not(:empty)::before,
#content proz-data-time[field="endDateTime"]:not(:empty)::before {
  content: "–";
  margin-right: 6px;
}
@media(max-width: 768px) {
  #content .proz-viewer ul.proz-viewer-hook li .event .event-info {
    padding-top: 12px;
    padding-bottom: 10px;
  }
}
#content .proz-viewer ul.proz-viewer-hook li .event-loc-adress,
#content .proz-viewer ul.proz-viewer-hook li .event-icons {
  display: none;
}
@media(max-width: 768px){
  #content .proz-viewer ul.proz-viewer-hook {
    display: flex;
    flex-flow: column;
  }
}

/**
  List-Style (non-mobile)
**/
@media(min-width: 769px), print {
  #content .proz-viewer ul.proz-viewer-hook.listStyle {
    display: flex;
    flex-flow: column;
    gap: 0;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li {
    display: flex;
    height: 128px;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    box-sizing: content-box;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li:first-child {
    padding-top: 0px;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li + li {
    border-top: 1px solid var(--grey-border-color);
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li > * {
    flex: 1;
    display: flex;
    flex-flow: column;
    height: 100%;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .event {
    display: flex;
    flex-flow: row;
    height: 100%;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .event .event-img {
    width: unset;
    height: unset;
    padding: 0;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .event .event-img img {
    position: unset;
    width: 170px;
    height: 128px;
    object-fit: cover;
    object-position: center top;
    border: 1px solid lightgray;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .event .event-info {
    flex: 1;
    display: flex;
    flex-flow: column;
    padding: 0 0 0 20px;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .event .event-info .breadcrumbs {
    margin-bottom: 10px;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .breadcrumbs,
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .event-title,
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .event-loc-adress cel-data-a > a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li a {
    text-decoration: none;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .event-loc-adress {
    max-width: 25%;
  }
  @media screen and (max-width: 1400px) {
    #content .proz-viewer ul.proz-viewer-hook.listStyle li .event-loc-adress {
      display: none;
    }
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .event-loc-adress div:first-child {
    display: flex;
    flex-flow: row wrap;
    flex: 0 1 auto;
    overflow: hidden;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .event-loc-adress div:first-child cel-data:first-child {
    width: 100%;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .event-loc-adress div:first-child cel-data:nth-child(n+2):nth-child(-n+3):not(:empty)::after {
    content: ",";
    padding-right: 5px;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .event-loc-adress div:nth-child(2) {
    margin-top: 10px;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .event-icons {
    flex: 0;
    gap: 15px;
  }
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .ticketLink a:not([href]),
  #content .proz-viewer ul.proz-viewer-hook.listStyle li .ticketLink a[href=""] {
    display: none;
  }
}

#content .proz-viewer ul.proz-viewer-hook cel-data-a.coloredLetters a {
  color: var(--accent-color) !important;
}

/**
  Responsiveness Lead-Text Veranstaltungen, Ausstellungen Magazin
**/
@media(max-width: 576px){
  li.cel_nav_nodeName_titleVeranstaltungen .lead,
  li.cel_nav_nodeName_titleAusstellungne .lead,
  li.cel_nav_nodeName_Title-Magazin .lead {
    display: none;
  }
}