/**************************************************************

  Veranstaltungsübersicht

**************************************************************/  

main  .datecol, main   .maincol  {
  background-color: #FAF7F5;
}

main  .datecol:not(.datecol2) {
 border-right: 6px solid #ffff; 
}


main  li + li {
  margin-top: 0.625rem;
}

/* Variante auf kleinen Bildschirmen */
main   .datecol span.werktag {
  font-size: 1rem;
  font-weight: 400;
  line-height: 150%;
}

/* Variante auf großen Bildschirmen */
main   .datecol2 span.werktag {
  font-size: 1rem;
  font-weight: 600;
  line-height: 150%;
}

/* Variante auf großen Bildschirmen */
main   .datecol.d-xl-flex span.monattag {
  font-size: 1.43rem;
  font-weight: 600;
  line-height: 150%;
}

/* kleinere Datumsanzeige bei Artikelseiten */
body#body.tpl-2003_standard_flex .datecol.d-xl-flex span.monattag {
  font-size: 1.1rem;
}


/* Variante auf kleinen Bildschirmen */
main   .datecol2 span.monattag {
  font-size: 1rem;
  font-weight: 600;
  line-height: 150%;
}


main   .maincol  {
  padding-left: 2.5rem;
  padding-right: 2rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

main   .datecol2 {
  padding-left: 2.5rem;
  padding-right: 2rem;
  padding-top: 1.5rem;
}


main   .maincol h2 {
  text-align: left; 
  margin-top: 0px;
}

main   .maincol span.bg-success {
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 1rem;
  /* border-color: rgb(130, 125, 115, 0.1); */
  border-color: #3C914B;
  background-color: #378544!important;
  color: #ffffff;
  line-height: 140%; 
  
}

main   .maincol .location {
  margin-bottom: 1rem;
}

main   .maincol h2.event__title a:before {
  content: '';
      background-position: center;
      background-repeat: no-repeat;
      background-image: url(/images/x22/icons/arrow-right-red.svg);
      margin-right: 0.25rem;
      background-size: contain;
      height: 1rem;
      width: 1rem;
      display: inline-block;
}

main   .maincol span.event__location:before  {
  content: '';
      background-position: center;
      background-repeat: no-repeat;
      background-image: url(/images/x22/icons/pin-location.svg);
      background-size: contain;
      height: 0.8rem;
      width: 0.8rem;
      display: inline-block;
      color: #2d2d2d;
}

main   .maincol h2.event__title {
  font-size: 1.5rem;
}

main   .maincol div,  main   .datecol span.bis  {
  font-size: 1rem;
  line-height: 150%;
}

main  div.event-list-module {
margin-bottom: 7.5rem;
}

main  div.event-list-module article {
  min-height: 200px;
  padding: 0px;
}

/* unterer Leiste */

main  div.event-list-module .row.bottom {
  margin-top: 1rem;
  padding: 0 25px;
}

.tpl-2003_standard_flex div.event-list-module .row.bottom {
margin: auto;
}

main  div.event-list-module .row.bottom .mehr, main  div.conevent-list-module .row.bottom .totop, main  div.event-list-module .row.bottom .results {
  font-size: 1rem;
  margin-top: 0.5rem;
  line-height: 140%;
}

main  div.event-list-module .row.bottom .btn.btn-primary {
  font-size: 1rem;
  display: inline-flex;
  height: 48px;
  padding: 0 2rem;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

main  div.event-list-module .row.bottom .mehr button[hidden] + .totop {
  margin-left: 	0px;
}
main  div.event-list-module .row.bottom .totop {
  border-bottom: 1px solid transparent;
  font-size: 1rem;
  line-height: 140%;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-top: 0.75rem;
}

main  div.event-list-module .event-list.row {
  padding: 0 12px;
}

/*******************************************/
/*    Datumsfilter und Suche               */
/********************************************/
.search-filter {
  --accent: #ed0000;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 23px 0;
  border-bottom: 1px solid #d7d7d7;
  color: #333;
  font-size: 1rem;
  gap: 16px;
}

.search-filter__search-row {
flex: 0 0 100%;
min-width: 0;
}

.search-filter__range {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}


.search-filter *,
.search-filter *::before,
.search-filter *::after {
  box-sizing: border-box;
}

.search-filter input,
.search-filter button {
  font: inherit;
}

.search-filter__search {
  display: flex;
  height: 42px;
}

.search-filter__search input {
  padding: 0 11px;
  border: 1px solid #9298a3;
  border-right: 0;
  border-radius: 6px 0 0 6px;
  background: #fff;
  color: #333;
}

.search-filter__search input::placeholder {
  color: #333;
  opacity: 1;
}

.search-filter button {
  border: 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.search-filter__search button {
  display: grid;
  place-items: center;
  width: 36px;
  padding: 0;
  border-radius: 0 6px 6px 0;
}

.search-filter__search svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.search-filter__period {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-filter__date {
  height: 42px;
  padding: 0 8px;
  border: 1px solid #9298a3;
  border-radius: 6px;
  background: #fff;
  color: #333;
  width: 148px;
}

.search-filter__date::-webkit-calendar-picker-indicator {
  margin-left: 8px;
  padding: 13px 0 13px 9px;
  border-left: 1px solid #9298a3;
  cursor: pointer;
  filter: invert(15%) sepia(100%) saturate(6500%)
    hue-rotate(355deg) brightness(95%) contrast(120%);
  color: #E00;
}

.search-filter__apply {
  display: flex;
  height: 40px;
  padding: 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-weight: 700 !important;
  border-radius: 32rem;
  background: #E00;
}

.search-filter :is(input, button):focus-visible {
  outline: 2px solid #333;
  outline-offset: 3px;
}

@media (min-width: 1200px) {
.search-filter__search-row {
  flex: 0 0 auto;
}
}

@media (max-width: 768px) {
.search-filter__range {
  width: 100%;
}

.search-filter__period {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.search-filter__date {
  width: 100%;
  min-width: 0;
}

.search-filter__apply {
  width: 100%;
}
}

.event-category-selected {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: #eee;
}

.event-category-selected__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.event-category-selected__remove {
  padding: 0.25rem 0.75rem;
  border: 1px solid #777;
  border-radius: 1rem;
  background-color: #fff;
  cursor: pointer;
}

.event__text {
  /* min-height: 3lh; */
}

.event__text > span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

h2.event__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

main  div.event-list-module .mehr > button,
main  div.event-list-module .mehr > .totop {
  flex-shrink: 0;
  white-space: nowrap;
}

.event-list-module .totop[hidden] {
display: none !important;
}

.tpl-2003_standard_flex div.results + div.px-0 {
margin-bottom: var(--margin-extra-sm);
}

/* Fokus-Border um Suchfeld und Button */
.search-filter__search:focus-within {
outline: 2px solid #333;
outline-offset: 3px;
border-radius: 6px;
}

.search-filter .search-filter__search input:focus-visible {
outline: none;
}