/**
* Block Name: referenzen
*/

/**
* Block Name: referenzen
*/

section.referenzen .filter_list {
  list-style: none;
}

section.referenzen .filter_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  padding: 0px 12px;
  height: 34px;
  border-radius: 0px 0px 6px 0px;
  background: #262b2e;
  margin-right: 49px;
  margin-bottom: 15px;
  position: relative;
  color: #fff;
  border: 0px transparent;
}

section.referenzen .filter_btn span.indicator {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  top: 0px;
  left: 100%;
  height: 34px;
  width: 34px;
  background: #000;
  border-radius: 0px 0px 6px 6px;
  -webkit-transition: 0.15s linear;
  -o-transition: 0.15s linear;
  transition: 0.15s linear;
}

section.referenzen .filter_btn span.indicator:before,
section.referenzen .filter_btn span.indicator:after {
  content: "";
  position: absolute;
  height: 34px;
  width: 34px;
  -webkit-mask-image: url("data: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 24 24' width='18'%3E%3Cpath d='M0 0h24v24H0z' fill='none' /%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  mask-image: url("data: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none' /%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: #fff;
  opacity: 0;
  -webkit-transition: 0s linear;
  -o-transition: 0s linear;
  transition: 0s linear;
}
section.referenzen .filter_btn span.indicator:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.00001 0.666687C4.40001 0.666687 0.666672 4.40002 0.666672 9.00002C0.666672 13.6 4.40001 17.3334 9.00001 17.3334C13.6 17.3334 17.3333 13.6 17.3333 9.00002C17.3333 4.40002 13.6 0.666687 9.00001 0.666687ZM9.00001 15.6667C5.31667 15.6667 2.33334 12.6834 2.33334 9.00002C2.33334 7.45835 2.85834 6.04169 3.74167 4.91669L13.0833 14.2584C11.9583 15.1417 10.5417 15.6667 9.00001 15.6667ZM14.2583 13.0834L4.91667 3.74169C6.04167 2.85835 7.45834 2.33335 9.00001 2.33335C12.6833 2.33335 15.6667 5.31669 15.6667 9.00002C15.6667 10.5417 15.1417 11.9584 14.2583 13.0834Z' fill='white'/%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.00001 0.666687C4.40001 0.666687 0.666672 4.40002 0.666672 9.00002C0.666672 13.6 4.40001 17.3334 9.00001 17.3334C13.6 17.3334 17.3333 13.6 17.3333 9.00002C17.3333 4.40002 13.6 0.666687 9.00001 0.666687ZM9.00001 15.6667C5.31667 15.6667 2.33334 12.6834 2.33334 9.00002C2.33334 7.45835 2.85834 6.04169 3.74167 4.91669L13.0833 14.2584C11.9583 15.1417 10.5417 15.6667 9.00001 15.6667ZM14.2583 13.0834L4.91667 3.74169C6.04167 2.85835 7.45834 2.33335 9.00001 2.33335C12.6833 2.33335 15.6667 5.31669 15.6667 9.00002C15.6667 10.5417 15.1417 11.9584 14.2583 13.0834Z' fill='white'/%3E%3C/svg%3E%0A");
}

section.referenzen .filter_btn.active span.indicator:before,
section.referenzen .filter_btn:not(.active) span.indicator:after {
  opacity: 1;
  -webkit-transition: 0.1s linear;
  -o-transition: 0.1s linear;
  transition: 0.1s linear;
}

section.referenzen .filter_btn:active span.indicator,
section.referenzen .filter_btn:hover span.indicator:before,
section.referenzen .filter_btn:hover span.indicator:after {
  background-color: #00b5e2;
}

section.referenzen .teaser_card {
  border-radius: 0px 0px 7px 0px;
  border: 2px solid #000;
  background-color: #fff;
}

section.referenzen .image_title {
  padding-left: 70px;
}

section.referenzen .teaser_card h3 {
  position: absolute;
  left: 15px;
  bottom: 0px;
  padding-bottom: 15px;
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl; /* `vertical-rl` and a rotation will achieve the same effect */
  -webkit-transform: scaleX(-1) scaleY(-1);
  -ms-transform: scaleX(-1) scaleY(-1);
  transform: scaleX(-1) scaleY(-1);
  margin-bottom: 0;
}

section.referenzen .image_title .img_wrapper {
  padding-top: 420px;
  padding-top: max(420px, 100%);
  position: relative;
  width: 100%;
}
section.referenzen .image_title .img_wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

section.referenzen .teaser_card .svg_wrapper {
  width: 70px;
  min-width: 70px;
}
section.referenzen .teaser_card .svg_wrapper svg {
  margin-left: 15px;
  margin-top: 15px;
}

section.referenzen .teaser_card p {
  padding-right: 30px;
  font-family: "IBM Plex Mono", monospace;
  -webkit-transition: 0.15s linear all;
  -o-transition: 0.15s linear all;
  transition: 0.15s linear all;
  font-size: 16px;
}
section.referenzen .teaser_card a:hover p {
  color: #00b5e2;
  -webkit-transition: 0.3s ease all;
  -o-transition: 0.3s ease all;
  transition: 0.3s ease all;
}

section.referenzen .row > div {
  margin-top: 30px;
}

@media (max-width: 991.98px) {
  section.referenzen .teaser_card h3 {
    font-size: 28px;
  }
}