.referenzen__content {
  width: 100%;
}

.referenz__box {
  position: relative;
  z-index: 1;
}

.referenzen-top {
  padding: 1rem;
}

.referenzen__headline {
  font-size: clamp(1.25rem, 0.6457rem + 2.4793vw, 3.125rem);
  font-weight: 500;
  display: block;
  line-height: 1.2;
}

.reference__categories {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.reference__categories ul {
  display: flex;
  padding: 0;
  list-style: none;
  margin: 0;
  align-items: baseline;
}

span.reference__categories__labels {
  margin-left: 0.5rem;
  pointer-events: none;
}

.reference__categories__labels a[href^="tel"] {
  color: inherit;
  text-decoration: inherit;
}

.reference__categories__labels li:not(:last-of-type):after {
  content: ",\00a0";
}

.referenzen__icons {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.referenzen__icons ul {
  display: flex;
  padding: 0;
  width: 100%;
  list-style: none;
  justify-content: space-evenly;
}

.referenzen__icons a {
  color: #fff;
  outline: 0;
  -webkit-transition: all 0.25ms ease-in-out;
  -moz-transition: all 0.25ms ease-in-out;
  -ms-transition: all 0.25ms ease-in-out;
  -o-transition: all 0.25ms ease-in-out;
  transition: all 0.25ms ease-in-out;
}

.referenzen__icons a:hover {
  opacity: 0.6;
}

.referenzen__icons li {
  width: 30px;
}

.referenzen__galerie {
  height: 0px;
}

.isotope-grid {
  padding: 0;
  margin: 0;
  display: flex;
  width: 100%;
  flex-direction: column;
}

.isotope-grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  background: #000;
  text-align: center;
  cursor: pointer;
}

.isotope-grid figure img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  object-fit: cover;
}

.isotope-grid figure figcaption {
  color: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.isotope-grid figure figcaption::before,
.isotope-grid figure figcaption::after {
  pointer-events: none;
}

.isotope-grid figure figcaption,
.isotope-grid figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.isotope-grid figure figcaption > a {
  z-index: 1000;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

figure.hover--effect {
  margin: 0 0 2rem;
}

figure.hover--effect figcaption::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(53, 116, 63, 0.9) 90%
  );
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(53, 116, 63, 0.9) 90%
  );
  content: "";
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.hover--effect .referenzen-top {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  color: transparent;
  -webkit-transition: -webkit-transform 0.35s, color 0.35s;
  transition: transform 0.35s, color 0.35s;
  color: #fff;
  -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
  transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
}

figure.hover--effect figcaption::before,
figure.hover--effect .referenzen-bottom {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.hover--effect .referenzen-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2em;
  width: 100%;
  /*opacity: 0;
  -webkit-transform: translate3d(0, 90px, 0);
  transform: translate3d(0, 90px, 0);*/
}

a.fresco img {
  opacity: 0;
}

article.referenz__box {
  font-weight: 500;
}

.fr-window.fr-mobile-touch,
.fr-overlay.fr-mobile-touch {
  /*position: fixed;*/
  overflow: visible;
}

@media only screen and (min-width: 1200px) {
  .isotope-grid figure {
    max-height: 50vh;
    min-height: 400px;
  }

  .isotope-grid figure img {
    min-height: 400px;
  }
}

@media only screen and (min-width: 360px) and (orientation: portrait) {
  .isotope-grid figure {
    height: 450px;
  }

  .isotope-grid figure img {
    height: 450px;
  }
}

@media only screen and (min-width: 360px) and (orientation: landscape) {
  .isotope-grid figure {
    height: 400px;
  }

  .isotope-grid figure img {
    height: 400px;
  }
}

@media only screen and (min-width: 390px) and (orientation: portrait) {
  .isotope-grid figure {
    height: 450px;
  }

  .isotope-grid figure img {
    height: 450px;
  }
}

@media only screen and (min-width: 390px) and (orientation: landscape) {
  .isotope-grid figure {
    height: 400px;
  }

  .isotope-grid figure img {
    height: 400px;
  }
}

@media only screen and (min-width: 576px) and (orientation: portrait) {
  .isotope-grid figure {
    height: 450px;
  }

  .isotope-grid figure img {
    height: 450px;
  }
}

@media only screen and (min-width: 576px) and (orientation: landscape) {
  .isotope-grid figure {
    height: 400px;
  }

  .isotope-grid figure img {
    height: 400px;
  }
}

@media only screen and (min-width: 768px) and (orientation: portrait) {
  .isotope-grid figure {
    height: 450px;
  }

  .isotope-grid figure img {
    height: 450px;
  }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
  .isotope-grid figure {
    height: 400px;
  }

  .isotope-grid figure img {
    height: 400px;
  }
}

@media only screen and (min-width: 992px) and (orientation: portrait) {
  .isotope-grid figure {
    height: 450px;
  }

  .isotope-grid figure img {
    height: 450px;
  }
}

@media only screen and (min-width: 992px) and (orientation: landscape) {
  .isotope-grid figure {
    height: 400px;
  }

  .isotope-grid figure img {
    height: 400px;
  }
}

@media only screen and (min-width: 1024px) and (orientation: portrait) {
  .isotope-grid figure {
    height: 350px;
  }

  .isotope-grid figure img {
    height: 350px;
  }
}

@media only screen and (min-width: 1024px) and (orientation: landscape) {
  .isotope-grid figure {
    height: 450px;
  }

  .isotope-grid figure img {
    height: 450px;
  }
}

@media only screen and (min-width: 1112px) and (orientation: portrait) {
  .isotope-grid figure {
    height: 450px;
  }

  .isotope-grid figure img {
    height: 450px;
  }
}

@media only screen and (min-width: 1112px) and (orientation: landscape) {
  .isotope-grid figure {
    height: 400px;
  }

  .isotope-grid figure img {
    height: 400px;
  }
}

@media only screen and (min-width: 1200px) {
  article.referenz__box {
    font-weight: 300;
  }

  .isotope-grid figure {
    height: 400px;
  }

  .isotope-grid figure img {
    height: 400px;
  }
  figure.hover--effect figcaption::before {
    opacity: 0;
  }

  figure.hover--effect figcaption::before,
  figure.hover--effect .referenzen-bottom {
    opacity: 0;
  }

  figure.hover--effect .referenzen-top {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }

  figure.hover--effect .referenzen-bottom {
    opacity: 0;
    -webkit-transform: translate3d(0, 90px, 0);
    transform: translate3d(0, 90px, 0);
  }

  figure.hover--effect:hover .referenzen-top {
    color: #fff;
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
    transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
    opacity: 1;
  }

  figure.hover--effect:hover figcaption::before,
  figure.hover--effect:hover .referenzen-bottom {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@media only screen and (min-width: 1400px) {
  .isotope-grid figure {
    height: 400px;
  }

  .isotope-grid figure img {
    height: 400px;
  }
}

@media only screen and (min-width: 1600px) {
  .isotope-grid figure {
    height: 450px;
  }

  .isotope-grid figure img {
    height: 450px;
  }
}

@media only screen and (min-width: 1920px) {
  .isotope-grid figure {
    height: 650px;
  }

  .isotope-grid figure img {
    height: 650px;
  }
}