/**
* Block Name: referenzen
*/
/* section.referenzen ul.cards_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

section.referenzen .square_card {
  height: 303px;
  border-radius: 5px;
  background: -o-linear-gradient(var(--Gelb), var(--Gelb)) padding-box,

      -o-linear-gradient(left, #ffffff 40%, #ffca00 100%) border-box;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--Gelb)), to(var(--Gelb))) padding-box,

      -webkit-gradient(linear, left top, right top, color-stop(40%, #ffffff), to(#ffca00)) border-box;
  background: -o-linear-gradient(var(--Gelb), var(--Gelb)) padding-box,

      -o-linear-gradient(left, #ffffff 40%, #ffca00 100%) border-box;
  background: linear-gradient(var(--Gelb), var(--Gelb)) padding-box,

      linear-gradient(to right, #ffffff 40%, #ffca00 100%) border-box;
  position: relative;
  margin-bottom: 30px;
  border: 2px solid transparent;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: nowrap;
  cursor: pointer;
  flex-wrap: nowrap;
  -webkit-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

section.referenzen .square_card::before {
  position: absolute;
  content: "";
  display: block;
  padding-top: 100%;
}


section.referenzen .square_card:hover,
section.referenzen .square_card.active:hover {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

section.referenzen .square_card .card_button {
  color: #ffffff;
  font-family: "HelveticaNeueLTPro-Ex";
  position: absolute;
  bottom: 10px;
  left: 15px;
  width: calc(100% - 30px);
  opacity: 0;
  -webkit-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  margin-left: 5px;
}

section.referenzen .square_card:hover .card_button {
  opacity: 1;
}

section.referenzen .square_card:not(.active):hover .card_button {
  opacity: 1;
}

section.referenzen .square_card:hover .card_button p {
  margin-bottom: 50px;
}

section.referenzen .square_card .card_content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  color: var(--Blau);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  font-family: "HelveticaNeueLTPro-BdEx";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  -webkit-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  -webkit-transition-delay: translate 200ms;
       -o-transition-delay: translate 200ms;
          transition-delay: translate 200ms;
}

section.referenzen .square_card:hover .card_content {
  color: #ffffff;
  text-shadow: 0px 0.5px 2px rgba(125, 103, 18, 0.05),
    0px 2px 3px rgba(125, 103, 18, 0.05), 0px 4px 4px rgba(125, 103, 18, 0.05),
    0px 8px 5px rgba(125, 103, 18, 0.05);
}

section.referenzen .square_card:hover .card_content {
  transform: translateY(-60px);
  -webkit-transform: translateY(-60px);
  -moz-transform: translateY(-60px);
  -ms-transform: translateY(-60px);
  -o-transform: translateY(-60px);
}

Hiding showing description on hover

section.referenzen #card:hover p.referenzen_paragraph,
section.referenzen #card.active p.referenzen_paragraph {
  visibility: hidden;
  opacity: 0;
}

section.referenzen #card p.referenzen_paragraph {
  font-family: "Roboto", serif;
  font-weight: 400;
  margin-bottom: 15px;
}

section.referenzen .square_card .default_icon {
  width: 60px;
  -webkit-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  margin: 0 auto;
}

@media (min-width: 1660px) {
  section.referenzen .square_card .default_icon {
    width: 100px;
  }
}
section.referenzen .square_card:hover .default_icon {
  opacity: 0;
  visibility: hidden;
}

section.referenzen .filter {
  opacity: 1;
  visibility: visible;
  display: block;
}

section.referenzen .out {
  opacity: 0;
  visibility: hidden;
  display: none;
}

section.referenzen .btn_default {
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}

@media (max-width: 992px) {
  section.referenzen .btn_default {
    margin-bottom: 15px;
  }
}

section.referenzen .btn_default::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='10' viewBox='0 0 11 10' fill='none'%3E%3Cpath d='M10.4583 1.0405L9.45959 0.041748L5.5 4.00133L1.54042 0.041748L0.541668 1.0405L4.50125 5.00008L0.541668 8.95967L1.54042 9.95842L5.5 5.99883L9.45959 9.95842L10.4583 8.95967L6.49875 5.00008L10.4583 1.0405Z' fill='white'/%3E%3C/svg%3E");
  position: absolute;
  height: 10px;
  width: 11px;
  bottom: 10px;
  right: 15px;
}

section.referenzen .btn_default.selected {
  background-color: var(--Blau);
  color: var(--Weiss);
}

section.referenzen .btn_default.selected:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14' fill='none'%3E%3Cpath d='M5.99999 11.2001L1.79999 7.0001L0.399994 8.4001L5.99999 14.0001L18 2.0001L16.6 0.600098L5.99999 11.2001Z' fill='%23FFC72C'/%3E%3C/svg%3E");
  height: 15px;
  width: 17px;
  bottom: 9px;
  right: 13px;
} */

/* New */

/**
* Block Name: referenzen
*/

section.referenzen .card_content {
  padding: 15px;
  height: 100%;
  border-radius: 5px;
  position: relative;
  border: 2px solid transparent;
  background: -o-linear-gradient(var(--Gelb), var(--Gelb)) padding-box,
    -o-linear-gradient(top, #ffe59c 0%, #ffc72c 100%) border-box;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--Gelb)), to(var(--Gelb))) padding-box,
    -webkit-gradient(linear, left top, left bottom, from(#ffe59c), to(#ffc72c)) border-box;
  background: linear-gradient(var(--Gelb), var(--Gelb)) padding-box,
    linear-gradient(to bottom, #ffe59c 0%, #ffc72c 100%) border-box;
  color: var(--Blau);
}

section.referenzen img.icon,
section.referenzen div.icon {
  margin: 15px 0px 20px;
  height: 60px;
  width: auto;
  -webkit-transition: 0.3s 0.2s ease-in-out;
  -o-transition: 0.3s 0.2s ease-in-out;
  transition: 0.3s 0.2s ease-in-out;
}

section.referenzen div.icon svg {
  height: 100%;
  width: auto;
}

section.referenzen h4 {
  font-size: 16px;
  -webkit-transition: 0.3s 0.1s ease-in-out;
  -o-transition: 0.3s 0.1s ease-in-out;
  transition: 0.3s 0.1s ease-in-out;
}

section.referenzen .general_information {
    -webkit-transition: 0.3s 0.2s ease-in-out;
    -o-transition: 0.3s 0.2s ease-in-out;
    transition: 0.3s 0.2s ease-in-out;
}

section.referenzen .hover_content {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 0px;
  opacity: 0;
  color: #fff;
  -webkit-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

/* On Hover */

section.referenzen .card_content:hover img.icon,
section.referenzen .card_content:hover div.icon,
section.referenzen .card_content:hover .general_information {
  opacity: 0;
  -webkit-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
}
section.referenzen .card_content:hover h4 {
  -webkit-transform: translateY(-60px);
  -ms-transform: translateY(-60px);
  transform: translateY(-60px);
  color: #fff;
  -webkit-transition-delay: 0.1s;
       -o-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
section.referenzen .card_content:hover .hover_content {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
       -o-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
