body,html {
  margin: 0;
  padding: 0;
  background-color: #b6c9dc;
  font-size: 16px;
  font-family: "Roboto Mono", monospace;
  scroll-behavior: smooth;
}

 /*NAVIGATION*/
 .logo {
  width: 80px;
  height: 80px;
}

.nav-item:hover {
  background-color: #b6c9dc;
}

#collapsibleNavbar {
  background-color: black;
}

ul li {
  margin-right: 3%;
}

.navbar-nav {
  margin-right: 150px;
}

/*IMAGE CLASS="Header-image"*/
.header-image {
  height: auto;
  width: 100%;
  object-fit: cover;
}

/*STARTSEITE-ÜBERSCHRIFT <h1>*/
.headline {
  position: absolute;
  left: 50px;
  top: 150px;
  font-size: 4.2vw;
  color: #fff;
  overflow: hidden;
  white-space:wrap;
  text-shadow: 5px 5px 5px rgba(0,0,0, 0.7);
  margin: 0;
  animation: typing 3s steps(40, end), step-end infinite;
}

@keyframes typing {
  from {width: 0}
  to {width: 50%}
}

.lime {
  color: #58FFBE;
}

/*BENEFITS-SLIDE*/
.slide-container {
  background-color: rgb(33, 70, 96);
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 5px 5px 5px rgba(0,0,0, 0.7);
}

.slider p {
  font-size: 0.875em;
  line-height: 1.6em;
  color: white;
  font-family: "Roboto Mono", monospace;
  text-align: center;
}

.slider {
  overflow: hidden;
  color: white;
}

.slide {
  width: 20%;
  float: left;
  height: 300px;
  background: #b6c9dc;
  border: none;
}

.clearfix::after {
  clear: both;
}

.slide-container {
  padding: 20px;
  margin-top: 50px;
  border: none;
}

.wrapper {
  margin-top:0;
  padding-top: 0;
  background: #b6c9dc;
  border: none;
}

.slider .wrapper {
  margin-top: 0;
  position: relative;
  width: 500%;
  -webkit-animation: 20s slide-it infinite;
  animation: 30s slide-it infinite;
  border: none;
}

@-webkit-keyframes slide-it {
  0%, 18.1818181818% {
    left: 0%;
  }
  19.9545454545%, 38.1363636364% {
    left: -100%;
  }
  39.9090909091%, 58.0909090909% {
    left: -200%;
  }
  59.8636363636%, 78.0454545455% {
    left: -300%;
  }
  79.8181818182%, 98% {
    left: -400%;
  }
  100% {
    left: 0%;
  }
}

@keyframes slide-it {
  0%, 18.1818181818% {
    left: 0%;
  }
  19.9545454545%, 38.1363636364% {
    left: -100%;
  }
  39.9090909091%, 58.0909090909% {
    left: -200%;
  }
  59.8636363636%, 78.0454545455% {
    left: -300%;
  }
  79.8181818182%, 98% {
    left: -400%;
  }
  100% {
    left: 0%;
  }
}
/*ENDE BENEFITS SLIDE*/


/*MAIN-GRID-TESTS*/
div div {
  background-color: #fff;
  border-top: solid 2px rgb(33, 70, 96);
  border-radius: 8px;
  padding: 20px;
  margin-top: 0;
  color: black;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 25px;
  background-color: #b6c9dc;
  font-size: clamp(15px, 1vw, 14px);
}

h4 {
color: rgb(33, 70, 96);
}

.span-col-2 {
  grid-column: span 2 / auto;
}

.span-row-2 {
  grid-row: span 2 / auto;
  background-color: #fff;
}

@media (max-width: 700px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 25px;
    }
.span-col-2 {
  grid-column: span 3 / auto;
  }

body {
  font-size: 14px;
  }
}

@media (max-width: 550px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    }
  .span-row-2 {
    grid-row: auto
    }
  .span-col-2 {
    grid-column: auto
    }
  .headline {
    max-width: 60%;
    top: 130px;
    text-shadow: 5px 5px 5px rgba(0,0,0, 0.7);
    left: 10px;
    }
  .header-image {
    max-width: 110%;
    height: auto;
    object-fit: cover;
    margin-top: 50px;
    margin-bottom: 20px;
    }
  .header-image-leistungen {
      max-width: 110%;
      height: auto;
      object-fit: cover;
      margin-top: 50px;
      margin-bottom: 20px;
    }
  .footer-link {
      display: block;
    }
}
  /*ENDE MAIN GRID-TESTS*/


/*HEADER-IMAGE-LEISTUNGEN*/
.header-image-leistungen {
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-top: 30px;
}
 
/*TOOLS IMG-STARTSITE*/
.tools-div {
  text-align: center;
  background-color: #fff;
  margin-top: 20px;
}

 .testing-tools {
  max-width: 40%;
  transition: transform 1s;
} 

.testing-tools:hover {
transform: rotateZ(360deg);
}

/*KONTAKT-SITE-FORMULAR*/
#kontakt-seite {
  background-color: rgb(182, 201, 220); 
  text-align: center;
  font-size: 14px; 
}

#kontakt {
  height: auto;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
} 

#kontakt > h2 {
  color: black;
  text-align: center;
  font-family: "Roboto Mono", monospace;
}

#kontakt a {
  color: #000000;
}

 #kontakt a:hover {
  color: #fff;
}

form {
  background-color: whitesmoke;
  padding: 1rem;
  display: block;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

button {
  background-color: whitesmoke;
  margin-bottom: 20px;
  margin-top: 20px;
  font-size: inherit;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 5px 5px 5px rgba(0,0,0, 0.7);
}

label {
  letter-spacing: -0,8px;
}
/*ENDE KONTAKT SITE UND FORMULAR*/


/*REFERENZEN*/
.ref-h3 {
margin-top: 140px;
margin-bottom: 0px;
}

.partner-logos {
  background-color: #fff;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction:row;
  align-items: center;
}

.partner-logo {
  margin: 20px 20px;
}

.partner-logo img {
  max-width: 100%;
  height: auto;
}

/*KUNDEN STIMMEN*/
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
  gap: 20px;
}

.referenzen {
  background-color: whitesmoke;
  border-left: 4px solid #b6c9dc;
  color: black;
}

i {
  font-weight: 400;
}
/*ENDE KUNDEN STIMMEN*/


/*IMPRESSUM*/
#impressum {
  text-align: left;
  display: block;
  margin-top: 150px;
  margin-left: 20px;
  font-family: "Roboto Mono", monospace;
  font-size: 14px;
}

#impressum  a {
  color: #000000;
}

#impressum a:hover {
  color: #fff;
}

/*FOOTER*/
footer {
  background:linear-gradient(to left,rgba(5,5,5,1) 1%,rgb(143, 202, 244) 99%);
  color: #fff;
  text-align: center;
  padding: 10px;
  bottom: 0;
  width: 100%;
}

footer > a {
  color: black;
}

.footer-link:hover {
  color: #fff;
  text-decoration: none;
}
/*ENDE FOOTER*/
 

/*DANKE-SITE*/
.danke-container {
  display: flex;
  justify-content: center;
}

.danke-container > * {
  flex: 1 1 280px;
}

.danke-card {
  display: flex;
  flex-wrap: wrap;
  margin-top: 100px;
}

.danke-card > * {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 280px;
}

.danke-media {
  min-height: 400px;
}

.danke-img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

.danke-content {
  padding: 1em 2em;
  margin-bottom: auto;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .danke-card {
    margin-top: auto;
    margin-bottom: auto;
  }
}
/*ENDE DANKE-SITE*/


/*DATENSCHUTZ*/
.DSGVO {
  background-color: white;
  font-family: "Roboto Mono", monospace;
  padding:80px 30px 0px 30px;
  text-align:left;
  margin: 100px 0px 0 0px;
}

.datenschutz {
  text-align: left;
  color: #585961;
  background-color: white;
}

.datenschutz p {
  font-size: 17px;
}

.datenschutz h1 {
  color: inherit;
  font-weight: 400;
  padding-bottom: 30px;
}

.datenschutz a {
  color: black;
}

.datenschutz a:hover {
  color: #b6c9dc;
}
/*ENDE DATENSCHUTZ*/