@import url("https://rsms.me/inter/inter.css");
html {
  font-family: "Inter", sans-serif;
}
body {
  font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
  html {
    font-family: "Inter var", sans-serif;
  }
}
/* Damit das Drowdown funktioniert im Edge*/
@media (min-width: 1088px) {
  .navbar-item.is-hoverable:hover .navbar-dropdown {
    display: block;
  }
}
::selection {
  background: #48c774;
  color: #fff;
}
/* und hiermit der Firefox >=1 */
::-moz-selection {
  background: #48c774;
  color: #fff;
}
.navbar-item:hover {
  color: hsl(141, 53%, 53%);
  background-color: #fafafa;
}
.input:focus {
  outline: none !important;
  border: 1px solid hsl(141, 53%, 53%)	;
  box-shadow: 0 0 10px hsl(141, 53%, 53%)	;
}

.img-referenzen {
  padding-left: 80px;
  padding-right: 80px;
  -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
   -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
      filter: grayscale(100%); 
}
.img-referenzen:hover {
  -webkit-filter: grayscale(0%);
 -moz-filter: grayscale(0%);
   -o-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
      filter: grayscale(0%); 
}

.navbar-link.is-active,
.navbar-link:focus,
.navbar-link:focus-within,
.navbar-link:hover,
a.navbar-item.is-active,
a.navbar-item:focus,
a.navbar-item:focus-within,
a.navbar-item:hover {
  background-color: #fafafa;
  border-top: 3px solid hsl(141, 53%, 53%);
  color: #000000;
}

.navbar {
  height: 60px;
}
.navbar-item img {
  /*max-height: 2.6rem; */
}
.chat {
  background-color: #48c774;
  height: 80px;
  width: 80px;
  border-radius: 100px;
  position: fixed;
  z-index: 999;
  right: 15px;
  bottom: 15px;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
    0 0 0 1px rgba(10, 10, 10, 0.02);
  cursor: pointer;
  animation-name: chat-pulse;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
.chat i {
  margin-top: 28px;
  margin-left: 26px;
  font-size: 30px;
  color: #ffffff;
}
.chat-fenster {
  background-color: #fcfcfc;
  border-radius: 5px;
  position: fixed;
  z-index: 999;
  right: 10px;
  bottom: 10px;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
    0 0 0 1px rgba(10, 10, 10, 0.02);
}
.header-section {
  padding-top: 100px;
  padding-bottom: 200px;
  background-size: cover !important;
  background-size: cover !important;
  background-position: top !important;
}

.header-section::after {
  content: "";
  display: block;
  position: absolute;
  margin-top: 80px;
  right: 0;
  left: 0;
  width: 100%;
  min-height: 300px;
  background-image: linear-gradient(#fff, #fff);
  transform: skewY(-3deg);
  transform-origin: top left;
}
.main-section {
  margin-top: -100px;
}
.info-leistungen {
  min-height: 270px;
}
.referenz {
  min-height: 350px;
  background-color: aquamarine;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 30px;
  padding-right: 30px;
}
.zusatz-info {
  display: inline;
}
.show {
  display: none;
}
.icons {
  padding: 15px;
  border-radius: 100px;
  cursor: pointer;
  animation-name: icon-pulse;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
.chat-notification {
  bottom: 30px;
  right: -400px;
  background-color: #ffffff;
  z-index: 998;
  position: fixed;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
    0 0 0 1px rgba(10, 10, 10, 0.02);
  border-radius: 3px;
  padding: 15px;
  padding-right: 20px;
  -webkit-animation: chat-notification 40s ease-in-out forwards;
  animation: chat-notification 40s ease-in-out forwards;
  animation-delay: 3s;
  display: none;
}
.info-items {
}
.info-items li {
  margin-bottom: 15px;
}
.ul-list {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}
.ol-list {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}
.icon-in-box {
  color: #349e59;
  font-size: 2em;
  margin-bottom: 7px;
}





/*checker */


.justify-content-center {
  justify-content: center;
}
.step-content {
  padding-top: 30px;
  padding-bottom: 30px;
  padding: 30px
}
.radio-opt{ 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.column-radio {
  padding: 0;
}
.img-opt:hover {
  outline: 2px solid hsl(0, 0%, 29%);
}

.button-inactive {
  display: none;
}

.radio-is-active {
 border:  3px solid hsl(141, 53%, 53%);
}




/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .chat-fenster {
    width: 100%;
  }

}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .chat-fenster {
    width: 60%;
  }
  .chat-notification {
    display: inline;
  }
  .img-referenzen {
    padding: 20px;
  }

}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .chat-fenster {
    width: 40%;
  }
  .pic {
    display: inline;
  }
}
img {
  /* border-radius: 8px; */
}

.toastify {
  padding: 10px 20px;
  color: #ffffff;
  display: inline-block;
  background: hsl(171, 100%, 41%);
  position: fixed;
  top: -150px;
  right: 15px;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 2px;
  cursor: pointer;
  z-index: 9999;
}

.toastify.on {
  opacity: 1;
}


/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .chat-fenster {
    width: 30%;
  }
}

@keyframes chat-pulse {
  0% {
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
      0 0 0 1px rgba(10, 10, 10, 0.02);
    background-color: #48c774;
  }
  50% {
    -webkit-box-shadow: 0px 0px 54px 6px rgba(72, 199, 116, 1);
    -moz-box-shadow: 0px 0px 54px 6px rgba(72, 199, 116, 1);
    box-shadow: 0px 0px 54px 6px rgba(72, 199, 116, 1);
    background-color: #349e59;
  }
  100% {
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
      0 0 0 1px rgba(10, 10, 10, 0.02);
    background-color: #48c774;
  }
}
@keyframes icon-pulse {
  0% {
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
      0 0 0 1px rgba(10, 10, 10, 0.02);
  }
  50% {
    -webkit-box-shadow: 0px 0px 54px 13px rgb(57, 156, 92);
    -moz-box-shadow: 0px 0px 54px 13px rgb(37, 109, 62);
    box-shadow: 0px 0px 54px 13px rgb(44, 126, 72);
    color: #ddeee3;
  }
  100% {
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
      0 0 0 1px rgba(10, 10, 10, 0.02);
  }
}
@keyframes chat-notification {
  0% {
    right: -400px;
    display: inline !important;
  }
  2% {
    bottom: 30px;
    right: 80px;
    padding-right: 40px;
  }
  95% {
    bottom: 30px;
    right: 80px;
    padding-right: 40px;
  }
  100% {
    right: -400px;
  }
}