html, body {padding: 0; margin: 0; overflow-x: clip;}
body {
    font-family: Roboto;
    background: #fff;
}

.transition {
  -webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}

.transition.slow {
  -webkit-transition: all 650ms ease-in-out;
-moz-transition: all 650ms ease-in-out;
-ms-transition: all 650ms ease-in-out;
-o-transition: all 650ms ease-in-out;
transition: all 650ms ease-in-out;
}

i {
  font-size: 60px;
  margin-bottom: 30px;
  color:#fff;
}

.maske {
  opacity: 0; position: absolute; width: 100%; height: 100%; background: rgba(11, 74, 104, 0.9); top: 0; left: 0;
}

.icon {
  position: absolute;
top: 110px;
right: 20px;
margin-top: -89px;
margin-left: -89px;
opacity: 1;
width: 100px;
}

.icon2 {
  margin-top: -50px;
  width: 110px;
}

.loesung {
  width: 50%; position: relative; cursor: pointer; margin: 5px; overflow: hidden;
}
.loesung:nth-child(even) {
  margin-right: 0;
}
.loesung:hover .maske {
  opacity: 1;
}
.loesung:hover .icon {
  opacity: 0;
}
.loesung:hover .schrift {
  opacity: 1;
}

.schrift {
  display: flex;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  opacity: 0;
  color: #fff;
  font-weight: bold;
  font-size: 23px;
}

.schrift div {
  padding: 30px;
  text-align: center;
}


/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}


  header {
    height: 135px;
    z-index: 2 !important;
    position: relative;
  }

  header i {
    font-size: 20px;
    margin: 0
  }

  header.fixed {
    position: fixed;
    top: 0;
    width: 100%;
  }

  header.fixed nav > div > img {
    width: 180px;
    padding-top: 20px; padding-bottom: 20px;
  }

  header.fixed nav ul {
    padding-top: 20px; padding-bottom: 20px;
    
  }
  header.fixed nav ul li {
    font-size: 17px;
  }

  .swiper-slide img {width: 100%;}
  .swiper-pagination, .swiper-scrollbar {display: none}

  
  .video {position: relative;}
  /* .video::before {
    width: 86%;
    height: 106%;
    background: rgba(255, 255, 255, .2);
    content: "";
    position: absolute;
    display: block;
    top: -12px;
    transform: rotate(-3deg);
    left: 64px;
  } */
  video {
    position: relative;
  }

.dreieck {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 23px 100vw 0 0;
    border-color: #5167b8 transparent transparent transparent;
}

.logo {
    margin: 0 auto;
    display: block;
    padding: 35px 0 45px 0;
}

.marken {padding: 50px}

.marken img {width: 100%;}
.produkte div {margin: 7px}
.produkte .maske {margin: 0px}

.marken > div > div {
  background: #fff;
  padding: 32px 15px;
  width: 183px;
  text-align: center;
  border-radius: 12px;
}

nav {
  background-color: #554848;
  color: #fff;
  position: relative;
  top: 0;
  display: flex;
  justify-content: space-between;
  padding-left: 200px;
padding-right: 200px;
}
nav ul {display: flex; justify-content: center;margin: 0;padding: 30px 30px; align-items: center;}
nav ul li {list-style: none; font-size: 20px; padding: 8px 20px; font-weight: bold;}
nav ul li.transition:hover {background: #064a55; color: #fff}
nav ul li:nth-child(odd) {cursor: pointer;}
nav ul li:nth-child(even) {color: #fff}
nav ul li:nth-child(even):hover {background: transparent}
nav > div > img {padding: 30px 30px; width: 270px; cursor: pointer;}

.swiper {
    
  width: 80%;
  display: flex;
  align-items: center;
    height: auto;
  }

  .swiper-wrapper {width: 90% !important;}

  .swiper img {display: block}

  .swiper-vertical > .swiper-scrollbar {display: none !important}

  .swiper-button-prev, .swiper-button-next {display: none !important}

  .swiper-pagination {
    padding: 29px;
    background: #5167b8;
    right: 63px !important;
  }

  .swiper-pagination-bullet {background: #fff !important; opacity: 0.5 !important;}
  .swiper-pagination-bullet-active {background-color: #fff !important;opacity: 1 !important;}

  .leistungenwrap ul:first-child {padding-right: 40px;}
  .leistungenwrap ul:last-child {padding-left: 40px;}
  .leistungen {padding:0}
  .leistungen li {list-style: none;  text-align: left; padding: 0px;font-size: 20px;margin-left: 58px; text-indent: -58px;}
  .leistungen2 {padding:0}
  .leistungen2 li {list-style: none;  text-align: left; padding: 0px 50px;font-size: 20px; width: 278px}
  .leistungen2.img img {width: 130px; display: block; margin: 0 auto;}
  .leistungen2 li > div {display: flex;}
  .leistungen2 li div.nomobile {display: flex !important}

  .leistungen.punkte li {
    margin-left: 58px;
    text-indent: -58px;
    margin-bottom: 50px;
  }

  .fragen .boxen {display: flex; justify-content: space-between;}
  .fragen .boxen > div {
    background: #fff;
    width: 29%;
    border-radius: 10px;
    overflow: hidden;
  }
  .fragen .boxen > div:hover {
    transform: scale(1.05);
  }
  .fragen .boxen > div > div:first-child {
    padding: 13px 10px 10px 10px;
    background: rgba(0,0,0,0.15);
    color: #003f59;
    font-size: 27px;
  }
  .fragen .boxen > div > div:last-child {
    padding: 30px 40px;
    background: #fff;
    color: #003f59;
    font-size: 19px;
  }

  footer {
    background-color: #554848; padding-top: 50px;
    color: #fff;
    padding-bottom: 50px;
  }
  footer > div {
    width: 1180px;
    margin:0 auto;
    display: flex;
  justify-content: space-between;
  }

  footer .logowrapper {
    display: inline-block;
    padding: 0px 20px 20px 20px;
  }

  footer a {
    color: #fff;
    text-decoration: none;
  }

  footer img {
    display: block;
    width: 150px;
  }

  .marktplaetze.mobil {display: none}

  .marktplaetze {
    padding: 40px 90px; background: #adadad
  }
  .marktplaetze > div {
    padding: 0 250px;
  }
  .marktplaetze img:hover {
    transform: scale(1.1);
  }
  .marktplaetze img {
    width: 14%;
    height: 14%;
    padding: 43px 0px;
  }

  footer i {
    font-size: 20px;
    margin: 4px;
  }




#laschen-hg {top:0; right: 0; z-index: 1001; opacity: 0; pointer-events: none; position:fixed; width: 100%; height: 100%; background: rgba(0,0,0,.45)}
#laschen-rechts {z-index: 1002; position:fixed; top:0; height: 100%; right: -53px}
#laschen-rechts > div {position:relative}
#laschen-buttons {top: 0; margin-top: 250px; text-align: center; right: 311px; position: absolute !important; display: block !important; font-size: 18px}
#laschen-rechts .lasche-button {border-left: 1px solid #fff;border-top: 1px solid #fff; border-bottom: 1px solid #fff;cursor: pointer; margin-bottom: 10px; display: block; padding: 10px 0;  text-align: center;  height: 143px; width: 42px; outline: unset;}
#laschen-rechts .lasche-button > div {transform: rotate(90deg);width: 120px;right: 38px;position: relative;top: 52px;}
#laschen-rechts.lasche_englisch .lasche-button > div {width: 118px;right: 37px;}
#laschen-rechts > div i {margin: 0px;}
#laschen-content {font-size: 16px;background: #fff; position: absolute !important; top: 0; right: -258px; width: 311px; height: 100%; padding: 0px 30px; display: flex; flex-direction: row; align-items: center;}
#laschen-content > div {display: none}
#lasche-close {cursor: pointer; position: absolute !important; right: -246px; top: 20px; z-index: 5;}
#lasche-close i {font-size: 30px; color: #003d5c}
#lasche-header {font-size: 24px; margin-bottom: 20px;}
#lasche-telefon-content a {text-decoration: none; display: block; background: #003d5c; color: #fff; text-align: center; padding: 11px; margin: 13px 0 33px 0;}
#laschen-rechts .form-group {width: 100%; float: none}
#laschen-content label.width {width: 66px !important; font-size:14px;}
#formular.lasche input[type="text"], #formular.lasche input[type="email"], #formular.lasche textarea {padding-left: 85px}
#formular.lasche #group-dsg {margin-top: 40px;}
#formular.lasche #group-dsg label {font-size: 14px; line-height: 1.1;border:0; position: relative}
#formular.lasche #buttonsubmit {margin-top: 25px}
#formular.lasche i {margin-right: 4px}
#formular.lasche #dsg {position: relative; top: 1px;}
#formular.lasche #yform-formular-dsg {margin: 23px 0 15px 0}
#formular.lasche #yform-formular-dsg label {font-size: 12px; line-height: 1.2}
#formular.lasche .g-recaptcha {display: none}
#laschen-buttons i {font-size: 14px; color: #f5b702}
#lasche-beratung-content, #lasche-telefon-content {
  color:#003d5c
}
#lasche-isnta {
  margin-top: 10px;
  background: #003d5c;padding: 5px;
  border-left: 1px solid #fff;border-top: 1px solid #fff; border-bottom: 1px solid #fff;
}
#lasche-youtube {
  background: #003d5c;padding: 5px;
  border-left: 1px solid #fff;border-top: 1px solid #fff; border-bottom: 1px solid #fff;
}
#lasche-beratung {
  background: #f5b702;
color: #003d5c;
}
#lasche-beratung i {color: #003d5c;}

#lasche-telefon {
  background: #003d5c;
color: #f5b702;
}

#lasche-telefon i {color: #f5b702;}

*, ::before, ::after {
  box-sizing: border-box;
}

.ersterblock {display: flex; padding: 0 0;align-items: center; position: relative;margin-bottom: 5px;}
.ersterblock .idmconnector {position: absolute;top: 50%;left: 50%;z-index: 1;margin-left: -112px;text-align: center;margin-top: -64px;}
h1 {margin-top: 0; margin-bottom: 40px; color: #003f59; font-size: 35px; font-weight: normal}

.funktionen .text {font-size: 22px;line-height: 3;width: 50%;text-align: center;margin-top: 35px;margin: 41px auto 0 auto;line-height: 1.4;}

.einehand {display: flex; margin-bottom: 5px;}

/* RESPONSIVE */

@media screen and (max-width: 1600px) {
  nav {padding-left: 20px;
    padding-right: 20px;}   
}
@media screen and (max-width: 868px) {
  nav {
    display: block
  }   
  nav ul, nav > div > img {
    padding: 10px 30px;
  }
  nav > div > img {
    margin: 0 auto;
  }

  header.fixed nav ul li {font-size: 14px !important;}
  header.fixed nav ul {padding-top: 10px !important; padding-bottom: 10px !important}
  header.fixed nav > div > img {padding-top: 10px;    padding-bottom: 0;}
}
@media screen and (max-width: 600px) {
  nav ul {
    padding: 10px 0px;
  }
  nav ul li {
    font-size: 14px;
    padding: 8px 10px;
  }
  header i {
    font-size: 15px;
    margin: 0 5px 0 0;
  }
}
@media screen and (max-width: 380px) {
  nav ul li:nth-child(2n) {display: none}
  nav ul {display: block;text-align: center;}
  nav ul li {padding: 3px 10px;}
  nav > div > img {width: 220px;}
}


@media screen and (max-width: 980px) {
  .ersterblock {display: block;}
  .ersterblock > div {width: 100% !important}
  .ersterblock > div:last-child > div {padding: 50px !important; text-align: center;}
  main p, main ul, main li, .kontakt div,  .fragen .boxen > div > div:last-child, .funktionen .text {font-size: 17px !important}
}
@media screen and (max-width: 620px) {
  h1 {font-size: 25px !important;}
}
@media screen and (max-width: 450px) {
  .ersterblock .idmconnector img {width: 80%}
  .ersterblock .idmconnector > div {font-size: 25px !important}
}


@media screen and (max-width: 1270px) {
  .leistungenwrapper > div > div {padding: 30px 50px !important}
}
@media screen and (max-width: 830px) {
  .leistungenwrap {
    display: block !important;
  }
  .leistungenwrap ul {padding: 0 !important}
}
@media screen and (max-width: 400px) {
  .leistungenwrapper > div > div {
    padding: 30px 25px !important;
  }
}



@media screen and (max-width: 1450px) {
  .fragen > div > div {padding: 81px 51px !important;}
}
@media screen and (max-width: 980px) {
  .fragen .boxen {display: block;}
  .fragen .boxen > div {width: 100% !important; margin-top: 30px;
    margin-bottom: 30px;}
}



@media screen and (max-width: 1140px) {
  .marktplaetze > div {
    padding: 0 25px;
  }
}
@media screen and (max-width: 700px) {
  .marktplaetze {
    padding: 40px 20px;
  }
  .marktplaetze img {
    padding: 20px 0px;
    width: 17%;
    height: 17%;
  }
}
@media screen and (max-width: 420px) {
  .marktplaetze {display: none}
  .marktplaetze.mobil {display: block}
  .marktplaetze img {
    width: 37%;
    height: 37%;
  }
  .marktplaetze > div {
    padding: 0 55px;
  }
}

@media screen and (max-width: 800px) {
  .funktionen {padding: 50px 20px !important}
  .funktionen > div > div {display: flex}
  .funktionen .leistungen2 {display: block !important;}
  .funktionen .leistungen2.nomobile {display: none !important;}
  .funktionen .leistungen2 span {font-size: 30px !important; margin-right: 0 !important; top: 0 !important; }
  .funktionen .leistungen2 li {height: 120px !important;padding: 0px 9px !important;width: auto !important;display: flex; align-items: center;}
  .leistungen2 li > div {align-items: center;}
  .leistungen2 li div.nomobile {margin-left: 11px;}
  
}
.nomobile {display: none !important}
@media screen and (max-width: 490px) {
  .funktionen .leistungen2 .nomobile {display: block !important}
  .funktionen .nomobile {display: none !important;}
  .funktionen .leistungen2 li {display: block;margin-bottom: 40px;}
  .leistungen2 li > div {margin-top: 6px;}
  .leistungen2 li:last-child img {margin-top: -30px;}
  .funktionen .text {margin-top: -70px !important;}
  .leistungen2 li div.nomobile {margin-left: 0;}
}

@media screen and (max-width: 1600px) {
  .funktionen .text {width: 100%; padding: 0 40px; margin-top: 0}
}

@media screen and (max-width: 1900px) {
  .einehand {background: #003f59}
}
@media screen and (max-width: 1730px) {
  .einehand > div > div {padding: 30px 100px !important}
  .einehand > div:last-child > div {padding: 0 0 0 0px !important}
  .einehand > div:last-child > div:first-child {padding-top: 20px !important}
}
@media screen and (max-width: 1300px) {
  .einehand > div:last-child > div:first-child {padding-top: 40px !important}
}

@media screen and (max-width: 1200px) {
  .einehand {display: block !important;}
  .einehand > div {width: 100% !important;}
  .einehand h2 {text-align: center !important;}
  .einehand ul {width: 530px; margin: 0 auto;}
}
@media screen and (max-width: 570px) {
}
@media screen and (max-width: 650px) {
  .einehand > div > div {
    padding: 30px 50px !important;
  }
  .einehand ul {
    width: 100%;
  }
  .einehand .leistungen span {font-size: 33px !important}
  .einehand .leistungen li {margin-left: 44px !important; text-indent: -44px !important;}
}

@media screen and (max-width: 750px) {
  .kontakt > div {display: block !important}
  .kontakt > div > div {width: 100% !important;margin-bottom: 45px !important;}
  .kontakt h2 {margin-bottom: 50px !important;}
  .kontakt i {font-size: 40px !important;}
}
@media screen and (max-width: 1200px) {
footer > div {padding: 0 40px !important; width: auto;}
}
@media screen and (max-width: 950px) {
  footer > div {display: block !important}
  footer > div > div {padding: 10px 0 !important}
}