/*******************************
  Generelle Regeln
********************************/
.event-viewer ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  display: flex;
  flex-flow: column;
  gap: 35px;
}

.event-viewer .cel-data-render {
  background-color: var(--hellgelb);
  border-radius: 14px;
  width: 100%;
  height: 100%;
  min-height: 438px;
  display: flex;
  justify-content: center;
}

.event-viewer .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;
  background-color: var(--hellgelb);
  border-radius: 14px;
  align-self: center;
}

.event-viewer ul.cel-data-empty::after {
  content: "Keine Veranstaltungen gefunden.";
  display: block;
  padding: 20px;
  text-align: center;
  background-color: var(--hellgelb);
  border-radius: 14px;
}

.event-viewer ul li {
  display: flex;
  flex-flow: column;
  gap: 20px;
  background-color: var(--hellgelb);
}

.event-viewer li .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;
}

.event-viewer li .event-img img {
  border-radius: 14px;
  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 */
}

.event-viewer .event-header .event-date {
  display: flex;
  flex-flow: row wrap;
}

.event-viewer .event-header .event-date cel-data-datetime[field="eventForm,endDateTime"]:not(:empty)::before {
  content: "–";
  padding-right: 5px;
  padding-left: 5px;
}

.event-viewer .event-header .event-date cel-data-datetime:last-child:not(:empty)::before {
  content: ",";
  padding-right: 5px;
}

.event-viewer .event-header .event-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  max-height: 25px;
}

.event-viewer .event-header .event-location {
  display: flex;
  flex-flow: column;
}

.event-viewer .event-header .event-location * {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  max-height: 25px;
}

.event-viewer .event-location a[href=""],
.event-viewer .event-location a:not([href]),
.event-viewer .event-organiser a[href=""],
.event-viewer .event-organiser a:not([href]) {
  pointer-events: none;
  cursor: default;
}

.event-viewer .event-organiser cel-data[field="organiser_name"]:not(:empty)::before {
  content: "Veranstalter: ";
}

.event-viewer .event-header .event-location-address {
  display: flex;
  flex-flow: row;
}

.event-viewer .event-header .event-location-address .location_city:not(:empty)::before {
  content: ',';
  padding-right: 5px;
}

.event-viewer .event-description p:first-child {
  margin-top: 0px;
}

/*******************************
  Sonderregeln für Magazine
********************************/
.event-viewer ul li {
  padding: 6.2%;
  border-radius: 14px;
}

@media(max-width: 992px) {
  .event-viewer ul li {
    padding: 3%;
  }
}

.magazin-events .collection-name {
  display: none;
}

.magazin-events .event-viewer .event-header .event-title {
  display: block;
  overflow: visible;
  -webkit-line-clamp: revert;
  max-height: revert;
}

.magazin-events .event-viewer .event-urls {
  display: flex;
  flex-flow: column;
  font-size: 17px;
  font-weight: normal;
  line-height: 22px;
}

.magazin-events .event-viewer .event-urls a::before {
  font-weight: 500;
}

.magazin-events .event-viewer .event-urls cel-data-a[field="urls_Website"] a:not(:empty)::before {
  content: "Webseite: ";
}

.magazin-events .event-viewer .event-urls cel-data-a[field="urls_Booking"] a:not(:empty)::before {
  content: "Tickets: ";
}

.magazin-events .event-viewer .event-urls cel-data-a[field="urls_external_link"] a:not(:empty)::before {
  content: "externer Link: ";
}

.magazin-events .event-viewer .event-urls cel-data-a[field="urls_Instagram"] a:not(:empty)::before {
  content: "Instagram: ";
}

.magazin-events .event-viewer .event-urls cel-data-a[field="urls_Facebook"] a:not(:empty)::before {
  content: "Facebook: ";
}

.magazin-events .event-viewer .event-urls cel-data-a[field="urls_Twitter"] a:not(:empty)::before {
  content: "Twitter: ";
}

.magazin-events .event-viewer .event-urls cel-data-a[field="urls_Youtube"] a:not(:empty)::before {
  content: "Youtube: ";
}

.magazin-events .event-viewer .event-urls cel-data-a[field="urls_Video"] a:not(:empty)::before {
  content: "Video: ";
}

.magazin-events .event-viewer .event-urls cel-data-a[field="urls_VideoTrailer"] a:not(:empty)::before {
  content: "Video Trailer: ";
}

.magazin-events .event-viewer .event-urls cel-data-a[field="urls_Stream"] a:not(:empty)::before {
  content: "Stream: ";
}

.magazin-events .event-viewer .event-urls cel-data-a[field="urls_Soundcloud"] a:not(:empty)::before {
  content: "Soundcloud: ";
}

/*******************************
  Sonderregeln für Highlights - alle Sammlungen
********************************/
body.celdocpath_Content\.Highlights .cel_pagetype_NoEdit,
body.celdocpath_Content\.Highlights .cel_pagetype_Presentation .presentationList > ul {
  display: flex;
  flex-flow: column;
  gap: 20px;
}

.event-viewer.highlights ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(257px, 1fr));
  gap: 50px 60px; 
}

.event-viewer.highlights ul.cel-data-render {
  display: flex;
}

.event-viewer.highlights ul li {
  background-color: var(--hellgelb);
  padding: 14px;
  border-radius: 21px;
}

.event-viewer ul li .magazin-link a {
  display: flex;
  flex-flow: column;
  gap: 20px;
  text-decoration: none;
}

.event-viewer.highlights .event-location .event-location-address .location_street {
  display: none;
}

.event-viewer.highlights .event-description {
  display: none;
}