.acf-map {
  width: 100%;
  height: 500px;
  border: #ccc solid 1px;
  margin: 20px 0;
}

.acf-map img {
 max-width: inherit !important;
}

.groups__container {
    margin-bottom: 30px;
    font-size: 200%;
}

.groups__container .group__container {
    display: block;
    float: left;
    width: calc(100% / 27);
    cursor: pointer;
    transition: .25s all ease-in-out;
    text-align: center;
}

.groups__container .group__container.filter--active {
    transform: scale(1.3);
}

.groups__container .group__container[data-count="0"] {
  opacity: .2;
}

.groups__container .group__container:hover {
  opacity: .8;
}

.list__container .group__container[data-count]:not([data-count="0"]) {
    display: block;
}

.list__container .list__item {
    padding: 10px;
    width: 100%;
    display: block;
}

.list__container .list__item .list__data {
  float: left;
  width: 30%;
  display: block;
}

.list__container .list__data.type--postcode,
.list__container .list__data.type--city,
.list__container .list__data.type--place,
.list__container .list__data.type--number {
    display: none !important;
}

.list__container .list__item .list__data.type--number,
.list__container .list__item .list__data.type--marker {
  width: 5%;
}

.list__container .list__item .list__data.type--marker {
  text-align: right;
}

.list__container .group__container .list__item:after,
.list__container .group__container:after,
.search__container:after {
  content: "";
  display: block;
  min-height: 1px;
  clear: both;
}

.list__container .group__container {
  padding-left: 100px;
  position: relative;
  display: none;
}

.list-type--date .group__container {
  padding-left: 150px;
}

.list__container .group__container:before {
  content: attr(data-display);
  position: absolute;
  padding: 5px;
  font-size: 200%;
  color: #9BB6B1;
  left: 0;
}

.list__container.filter--active .group__container:not(.filter--active) {
  display: none;
}

/* List Styles */

.style--list .list__container .list__item {
  border-bottom: 1px solid #ddd;
}

.style--list .list__data {
  min-height: 1px;
}

.style--list .list__data.type--text {
    display: none;
}

.style--list .list__data.type--category {
  display: none;
}

/* Block Styles */

.style--block .list__container .group__container .list__item .list__data {
  display: block;
  float: none;
  width: 100%;
  text-align: left;
}

.style--block .list__container .group__container .list__item {
  width: 30%;
  float: left;
  margin-right: 5%;
  min-height: 150px;
}

.style--block .list__container .group__container .list__item:nth-child(3n) {
  margin-right: 0;
}

.style--block .list__data.type--title {
    font-size: 150%;
}

.style--block .list__data.type--url,
.style--block .list__data.type--marker {
    margin-top: 10px;
}

.style--block .list__data.type--address {
  margin-bottom: 10px;
}

.style--block .list__data.type--marker span {
    border: 1px solid #000;
    padding: 5px;
    border-radius: 5px;
    display: inline-block !important;
    width: auto !important;
    transition: .25s all ease-in-out;
    cursor: pointer;
}

.style--block .list__data.type--marker span:hover {
    background: #000;
    color: #fff;
}

.style--block .list__container .group__container {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.style--block .list__data.type--marker span:after {
    content: "Auf Karte zeigen";
    margin-left: 10px;
}

.style--block .list__data.type--category {
  display: none !important;
}

.style--block .list__data.type--category span {
    font-size: 80%;
    padding: 3px;
    background: rgba(0,0,0,.1);
    border-radius: 3px;
    margin-right: 5px;
}

.cat__list {
    display: none;
}


/* Image Map */

.image-map__container {
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
}

.image-map__container .map__container {
    position: relative;
    transition: .25s transform ease-in-out;
}

.image-map__container:hover .map__container {
    /* transform: scale(1.3); */
}

.image-map__container .map__container img {
    max-width: 100%;
}

.image-map__container .marker__container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.image-map__container .marker {
  position: absolute;
  width: 20px;
  height: 20px;
  background: transparent;
  opacity: 0;
  transform: translate(-50%, -50%);
  color: #000;
  border-radius: 100%;
  transition: .25s all ease-in-out;
  /*
    box-shadow: 0 0 20px rgba(0,0,0,.6);
  */
}

.image-map__container .marker__content {
  opacity: 0;
  pointer-events: none;
}

.image-map__container .marker:hover,
.image-map__container .marker.active,
.image-map__container .marker:hover .marker__content,
.image-map__container .marker.active .marker__content {
  opacity: 1;
}

.image-map__container .marker:hover,
.image-map__container .marker.active {
  z-index: 10;
}

.image-map__container .marker__content {
  position: absolute;
  left: 50%;
  background: #fff;
  width: 150px;
  padding: 10px;
  top: 0;
  transform: translate(-50%, 25px);
  border-radius: 5px;
  font-size: 70%;
}

.search__container {
    margin-bottom: 40px;
}

.search-cat__container,
.search-text__container {
  width: 49%;
  margin-right: 2%;
  float: left;
  position: relative;
}

.search-text__container {
  margin-right: 0;
}

.search-cat__container,
.search-text__container input {
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    font-size: 20px !important;
}

.search-text__container input {
  padding: 15px !important;
  width: 100%;
  background-color: transparent;
}

.search-cat__container .cat__container {
  padding: 15px 0;
  width: 100%;
  background-color: transparent;
}

.search-cat__container {
  padding: 15px;
  cursor: pointer;
}

.cat__container {
  display: none;
  padding-top: 15px;
}

.cat__container span {
  display: block;
  font-size: 80%;
}

.cat__container span:not(:last-child) {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,.3);
}

.cat__toggle {
  position: relative;
  padding: 15px 0 !important;
  margin: -15px 0;
}

.cat__toggle:before {
  content: "\f107";
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.cat__toggle[data-filter]:not([data-filter=""]):after {
    content: ": "attr(data-filter);
}

.cat__container span {
    position: relative;
    transition: .25s all ease-in-out;
}

.cat__container span:before {
  content: "\f058";
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  left: 0;
  opacity: 0;
  transition: .25s all ease-in-out;
}

.cat__container span.filter--active {
  padding-left: 20px;
}

.cat__container span.filter--active:before {
    opacity: 1;
}

.list__container.cat-filter--active [data-category-match="false"] {
    display: none !important;
}

/*.list__wrapper.toggle--true .list__container {
    display: none;
}*/

.list__toggle {
    margin: auto;
    text-align: center;
}

@media all and (max-width: 800px) {

  .groups__container .group__container {
      width: 10%;
  }

  .list__container .list__item .list__data,
  .list__container .list__item .list__data:last-child {
      display: block;
      width: 100%;
      text-align: left;
  }

  .list__container .group__container {
    padding-left: 50px;
  }

  .list__data.type--marker span {
      border: 1px solid #000;
      padding: 5px;
      border-radius: 5px;
      display: inline-block !important;
      width: auto !important;
  }

  .list__data.type--marker span {
      margin-top: 10px;
  }

  .list__data.type--marker span:after {
      content: "Auf Karte zeigen";
      margin-left: 10px;
  }

  .style--block .list__container .group__container .list__item {
      width: 100% !important;
      margin: 0;
      min-height: auto !important;
  }

  .style--block .list__container .list__item:not(:last-child) {
    margin-bottom: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
  }
}