/*style.css*/
@import url("https://use.typekit.net/qta6ofc.css");

@font-face {
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@import url("https://use.typekit.net/uzc4bri.css");


/*////////////// A L L G E M E I N E   F O R M A T I E R U N G E N \\\\\\\\\\\\\\\*/

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
  scroll-behavior: smooth;
  hyphens: auto;
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-chars: auto 3;
  -webkit-hyphenate-limit-lines: 4;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: auto 3;
  -ms-hyphenate-limit-lines: 4;
}

*:not(input):not(textarea) {-webkit-touch-callout:none !important; 
-webkit-tap-highlight-color:#232327; -moz-touch-callout:none !important; 
-moz-tap-highlight-color:#232327; 
-ms-touch-callout:none !important; 
-ms-tap-highlight-color:#232327}
::-moz-selection{background: rgba(151,204,4,0.8); color: #fff} 
::webkit-selection{background: rgba(151,204,4,0.8); color: #fff} 
::selection{background: rgba(151,204,4,0.8); color: #fff}

*:active,:focus{
    outline: none;
    outline:0;
}

html {
  overflow: hidden;
  height: 100vh;
}

body {
  margin: 0;
  overflow: scroll;
  height: 100vh;
  scroll-behavior: smooth;
  color:#232327;
    background-image: url('images/handwerker-hero.jpg');
  background-repeat: no-repeat;
}

.innerbox {
  max-width: 1312px;
  margin: 0 auto;
  position: relative;
  padding: 0 1rem;
}

.herobox {
  max-width: 1320px;
  margin: 0;
  position: relative;
}

.herobox-whitepaper {
  max-width: 1320px;
  margin: 0;
  position: relative;
  margin-top: 0em;
}

.content{
  padding-top:4em;
  padding-bottom:2em;
}

h1{
  font-weight:600;
  font-size:5.5em;
  margin-bottom: 0.5em;
  margin-top: 0em;

}

h2{
  font-weight:500;
  font-size:2.4em;
}

h3 {
  font-weight: 600;
  font-size: 1.6em;
  margin-bottom: 0.3em;
  color: #97CC04;
}

h4{
  font-weight: 500;
  font-size: 1.5em;
  color:#414141;
}

h4 span{
  font-weight:normal;
  line-height:1.4em;
  font-size:2.1em;
  color:#232327;
}

h5, h6{
  font-weight:400;
  font-size:0.88em;
  line-height:1.8em;
}

p {
  font-weight: 400;
  font-kerning: normal;
  -moz-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  font-size:1.8em;
  letter-spacing: 0.2px;
  line-height: 1.5em;
  color:#232327;
  margin-bottom: 3em;
  -webkit-hyphens: auto; 
  hyphens: auto; 
}


address{
  font-style:normal;
  padding-top: 2em;
  border:none;

 }

address h4{
    color: #2D7DD2;
    letter-spacing: 0.9px;
    margin-bottom: 0.5em;
}

.kontakt{
  margin-top: 2em;
  background-color: #783939;
}

address img{
  margin-bottom: 5em;
}

address a:hover{
  text-decoration:none;
}


ul{
  padding:0;
  margin:0;
  list-style: none;
}

a{
  color:#232327;
  text-decoration:none;
}

a:hover{
  color:#DA8826;
  /* font-weight: 600; */
  text-decoration:none;
}

.dark{
    color:#fff;
}

.dark a{
    color:#fff;
}

.dark p{
    color:#fff;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

.clearfix img{
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.flex { 
    display: flex; 
    justify-content: center !important; 
    align-items: center !important;
}

.object-fit { 
	width: 300px; 
	height: 200px; 
}

.object-fit img { 
	object-fit: cover; 
	width: 100%; 
	height: 100%;
}

.e-book { 
	width: auto; 
	height: auto;
  display: flex; 
  justify-content: center !important; 
  align-items: center !important;
}

.e-book img { 
	object-fit: cover; 
	width: 70%; 
	height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*////////////// N A V I G A T I O N \\\\\\\\\\\\\\\*/

#menus{
  float:left;
  margin-left: 1.2em;
  padding-top: 0.3em;
  font-family: neue-haas-unica, sans-serif;
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1em;
}

#menus span{
  font-weight:200;
  font-size: 0.8em;
  letter-spacing: 0.1em;
}

#menus-mobile{
  float:left;
  margin-left: 1.2em;
  padding-top: 0.3em;
  font-family: neue-haas-unica, sans-serif;
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1em;
  display: none;
}

#menus-mobile span{
  font-weight:200;
  font-size: 0.8em;
  letter-spacing: 0.1em;
}

.main_h {
  position: fixed;
  max-height: 5em;
  z-index: 9999;
  width: 100%;
  padding: 1em 0;
  background:none;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 1;
  top:0px;
  padding-bottom: 6px;
}




.main_h img{
  float:left;
  padding-bottom: 0.1em;
}


.open-nav {
  max-height: 500px !important;
  background-color: rgba(255, 255, 255, 0.93);
}

.open-nav .mobile-toggle span{
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease-in-out;
}

.open-nav .mobile-toggle span:first-child{
  transform-origin: 0% 0%;
  transition-timing-function: ease-in-out;
}

.open-nav .mobile-toggle span:nth-last-child(2){
  transform-origin: 0% 100%;
}

.open-nav .mobile-toggle span{
  opacity: 1;
  transform: rotate(-45deg) translate(-2px, -1px);
}

/*
 * Mitte verstecken.
 */
 .open-nav .mobile-toggle span:nth-last-child(2)
 {
   opacity: 0;
   transform: rotate(0deg) scale(0.2, 0.2);
 }

/*
 * Letzte andere Richtung*/
 
 .open-nav .mobile-toggle span:nth-last-child(3)
 {
   transform: rotate(45deg) translate(0, -1px);;

 }

.sticky {
  background-color: rgba(255, 255, 255, 0.93);
  opacity: 1;
  top: 0px;
  border-bottom: none;
}

.logo {
  width: ;
  font-weight: 500;
  font-size: 1.3em;
  letter-spacing: 0.05em;
  color: #fff;
  text-transform: ;
  float: left;
  display: block;
  margin-top: 0;
  line-height: 1;
  margin-bottom: 10px;
}

.logo span {
  font-weight:300;
  font-size: 0.8em;
  letter-spacing: 0.1em;
}




/*navigation */
nav {
 float: right;
}

nav ul {
  list-style: none;
  overflow: hidden;
  text-align: right;
  float: right;
}


nav ul li {
  display: inline-block;
  margin-left:25px;
  line-height: 1.5;
}

nav ul a {
  color: #fff;
  font-weight: 500;
  font-size: 1.6em;
  font-family: neue-haas-unica, sans-serif;
}

.sticky nav ul a,.open-nav nav ul a {
  color: #232327;
}

.sticky nav ul a:hover,.open-nav nav ul a:hover {
  color: #DA8826;
}

/* toggle - navigationsschalter für mobile geräte */
.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 30px;
  top:  20px;
  width: 30px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}


.mobile-toggle span {
  width: 36px;
  height: 2px;
  margin-bottom: 8px;
  border-radius: 1000px;
  background: #fff;
  display: block;
}
.sticky .mobile-toggle span {
  background: #232327;
}

@-webkit-keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}


/*////////////// M A I N \\\\\\\\\\\\\\\*/

main{
font-family: neue-haas-unica, sans-serif;
}

.colorflip {
  width:100%;
  height:100%;
  animation: changebackground 10s ease infinite;
}

@keyframes changebackground {
  0% {background-color: #DEDBD2;}
  25%{background-color:#B0C4B1;}
  50%{background-color:#F7E1D7;}
  75%{background-color:#A0C1D1;}
  100% {background-color: #DEDBD2;}
}



.col-3-center{
  text-align:center;
  padding:2em 0;
}

.row{
  overflow:hidden;
  position:relative;
}

.column {
  padding-bottom:1em;
}

.milky {
  background-color: rgb(0 0 0 / 0.5);
}

figure{
  margin:0;
  padding:0;
}

figure img, figure video{
  height:auto;
  width:100%;
  /*margin-bottom: 1em;*/
}

figure p{
  display: none;
  font-family: neue-haas-unica, sans-serif;
  font-weight: 400;
  font-size:1em;
  letter-spacing: 0.2px;
  line-height: 1.15em;
}

figure a:hover p{
  display: inherit;
}

figure a:hover figcaption{
  display: none;
}

figure a:hover img{
  opacity:0.7;
}

figcaption{
  font-family: neue-haas-unica, sans-serif;
  font-weight: 300;
  font-size:0.8em;
  letter-spacing: 0.9px;
  margin-top: 0.7em;
  margin-bottom: 1em;
}

figcaption h2{
  font-size:1.5em;
  margin-bottom: -0.3em;
}

.section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  position: relative;
  background-color: #000;
  border: solid;
  border-color: #000;
  border-radius: 0px;
  font-size: 1.8em;
  color: #fff;
  padding: 0.25em 1.4em;
  text-align: center;
  transition-duration: 0.8s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.button:hover {
  background-color: #fff;
  color: #232327;
  border: solid;
}

.button-box{
    margin-top: 3em;
}

.space-up{
  margin-top: 4em;
}

.icon {
    height: 0.7em;
    width: auto;
    }

.icon:hover {
    opacity: 50%;
    }

.hero{
    font-family: "veneer", sans-serif !important;
    font-weight: 400;
    font-style: normal;
    font-size: 6em;
    text-transform:uppercase;
    margin-bottom: 0.5em;
    hyphens: none;
  }

.hero-sign{
    font-weight:500;
    font-size: 7.3em;
    margin-bottom: 0.1em;
    color: #fff;
  }

.kernleistung {
    font-weight:500;
    font-size: 1.5em;
    margin-bottom: 1em;
  }

.kernleistungen {
    position:relative;
    height: 350px;  
}

.card {
  height: 400px;
}

.display-headline{
  font-family: "veneer", sans-serif !important;
  font-weight: 400;
  font-style: normal;
  font-size: 3em;
  text-transform:uppercase;
  margin-bottom: 0.5em;
  hyphens: none;
}

.why {
  min-height: 340px;
}

.banger{
  font-size:2.4em;
  line-height: 1.5em;
}

#projektanfrage{
  font-size: 6.8em;
  margin-bottom: 0.4em;
}

.textcolor {
  color: #DA8826;
 }

 .metallic-text {
  background: linear-gradient(120deg, #6c5502 3%, #f2ce00 29%, #C5A028 44%, #e4bc1b 65%, #603804 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


 .textcolor-small {
  background-image:linear-gradient(110deg,#FE1298, #7F2CBD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 }

.hooia-blue{
  color: #153DF4;
}

 .glow {
  color: #ffffff;
  text-shadow: 0 0 5px white,
               0 0 10px white,
               0 0 20px #FE1298,
               0 0 40px #FE1298,
               0 0 60px #7F2CBD;
}

.whitetext{
  color: #fff;
}

 .hooia {
  font-weight: 600;
  font-size: 9.6em !important;
 }

.wrapper{
    box-sizing: content-box;
    height: 100px;
    margin-bottom: 50px;
    display: flex;
    font-weight:500;
    font-size:5em;
}

.wrapper p{
    color:#fff;
    font-weight:500;
    padding-bottom: 20px;
    line-height: 1.15em;
}

.words{
    color:#153DF4;
    overflow: hidden;
}

.words span{
    display: block;
    height: 100%;
    padding-right: 10px;
    animation: spin_words 10s infinite;
}

@keyframes spin_words{
    10%{
        transform: translateY(-112%);
    }
    25%{
        transform: translateY(-100%);
    }
    35%{
        transform: translateY(-212%);
    }
    50%{
        transform: translateY(-200%);
    }
    60%{
        transform: translateY(-312%);
    }
    75%{
        transform: translateY(-300%);
    }
    85%{
        transform: translateY(-412%);
    }
    100%{
        transform: translateY(-400%);
    }
}

.caption{
    margin-bottom:3em;
}

#kunden img{
    height: 8em;
    width: auto;
}


.fade-in {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

.clients_list {
  grid-column-gap:3rem;
  grid-row-gap:3rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 0rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  display: flex;
}

.clients_list img{
  height: 5em;
}

.brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items:center;
}

.brands__item {
      flex: 0 0 50%;
      margin-top: 0.1em;
}

.client-mobile {
  display: none;
}

.leistungen{
  
  padding-bottom: 2em;
  padding-right: 0.5em;
}

.solutions{
    font-weight:500;
    font-size:2.2em;
    margin-bottom: 0.8em;
}

.solution .hinweis{
    font-size:1em;
    letter-spacing: 0.07em;
    margin-bottom: 0.8em;
}

ul.solution-list { 
  list-style-type:none;
}

ul.solution-list li:before {
  content: "\25BA" "\2001";
  background-image:linear-gradient(110deg,#C23F7F, #521E69);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

ul.solution-list li{
  line-height: 2.1em;
}

/*////////////// T E X T D E C O R A T I O N \\\\\\\\\\\\\\\*/


.subhead{
  font-weight:500;
  font-size:3em;
  line-height: 1.1em;
  margin-bottom: 0.8em;
}

.highlighted-text {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMjAwMTA5MDQvL0VOIgogICAgICAgICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+Cgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgICB3aWR0aD0iMWluIiBoZWlnaHQ9IjAuNWluIgogICAgIHZpZXdCb3g9IjAgMCAzMDAgMTUwIj4KICA8cGF0aAogICAgICAgIGZpbGw9IiNmZmUwMDAiIHN0cm9rZT0ibm9uZSIKICAgICAgICBkPSJNIDEyLjAwLDQ4LjAwCiAgICAgICAgICAgQyAxMi4wMCw1MC4wOSAxMS43OSw1NC45OSAxMi42MCw1Ni43MgogICAgICAgICAgICAgMTUuNTksNjMuMTggMjYuMDksNTYuNjQgMzMuMDAsNjMuMDAKICAgICAgICAgICAgIDMwLjg0LDYzLjE4IDIzLjA1LDYzLjg3IDIxLjgwLDY1LjAyCiAgICAgICAgICAgICAxOC4wMiw2Ny44OCAyMS4yOSw3Ni4zNSAyMS44MCw4MC4wMAogICAgICAgICAgICAgMjEuODAsODAuMDAgMjEuODAsODYuMDAgMjEuODAsODYuMDAKICAgICAgICAgICAgIDIxLjgwLDg2LjAwIDQwLjAwLDg3LjAwIDQwLjAwLDg3LjAwCiAgICAgICAgICAgICAzOS45Myw4OC44OCA0MC4wNiw5MS4wNCAzOC45OCw5Mi42OQogICAgICAgICAgICAgMzcuNTEsOTQuOTMgMzUuMTUsOTQuNzUgMzIuNTksOTYuMjAKICAgICAgICAgICAgIDI4LjMzLDk4LjYxIDI2Ljg3LDEwMi4yMiAyNy4zNCwxMDcuMDAKICAgICAgICAgICAgIDI3LjM0LDEwNy4wMCAzMC4wMiwxMjMuNDEgMzAuMDIsMTIzLjQxCiAgICAgICAgICAgICAzMS44MiwxMjUuNzUgNDAuMDEsMTI3Ljk1IDQzLjAwLDEyOC4wMAogICAgICAgICAgICAgNDMuMDAsMTI4LjAwIDg3LjAwLDEyOC4wMCA4Ny4wMCwxMjguMDAKICAgICAgICAgICAgIDg4LjA4LDEyMS41NiA5MS4xNiwxMjEuODAgOTcuMDAsMTIyLjA0CiAgICAgICAgICAgICA5Ny4wMCwxMjIuMDQgMTA5LjAwLDEyMy4wMCAxMDkuMDAsMTIzLjAwCiAgICAgICAgICAgICAxMDkuMDAsMTIzLjAwIDEyOC4wMCwxMjMuMDAgMTI4LjAwLDEyMy4wMAogICAgICAgICAgICAgMTI4LjAwLDEyMy4wMCAxODIuMDAsMTIyLjAwIDE4Mi4wMCwxMjIuMDAKICAgICAgICAgICAgIDE5NC41OCwxMjEuOTcgMTg4LjQyLDExOS4wMyAyMDEuMDAsMTE5LjAwCiAgICAgICAgICAgICAyMDEuMDAsMTE5LjAwIDI0My4wMCwxMTkuMDAgMjQzLjAwLDExOS4wMAogICAgICAgICAgICAgMjQzLjAwLDExOS4wMCAyNTguMDAsMTE4LjAwIDI1OC4wMCwxMTguMDAKICAgICAgICAgICAgIDI1OS41MywxMDkuMTAgMjY2LjAxLDExMy4zNyAyNzAuNDAsMTA5LjE1CiAgICAgICAgICAgICAyNzIuNjEsMTA3LjAzIDI3Mi4zMCwxMDAuODUgMjcyLjAwLDk4LjAwCiAgICAgICAgICAgICAyNzIuMDAsOTguMDAgMjgwLjAwLDk3LjAwIDI4MC4wMCw5Ny4wMAogICAgICAgICAgICAgMjgwLjAwLDk0LjEwIDI4MC4yNiw4OC41NSAyNzkuMjYsODYuMDIKICAgICAgICAgICAgIDI3Ni40OSw3OC45OCAyNjQuNjMsNzYuODggMjU4LjAwLDc2LjAwCiAgICAgICAgICAgICAyNjUuMTUsNjkuMTkgMjc2LjQwLDczLjAzIDI3NC44NSw2Mi4wNAogICAgICAgICAgICAgMjc0LjQ3LDU5LjM1IDI3My43Myw1OC44NSAyNzIuMDAsNTcuMDAKICAgICAgICAgICAgIDI4MS42OCw1My43NyAyODEuMDAsNTQuMjggMjgxLjAwLDQ0LjAwCiAgICAgICAgICAgICAyODEuMDAsNDQuMDAgMjU4LjAwLDQyLjM4IDI1OC4wMCw0Mi4zOAogICAgICAgICAgICAgMjUwLjAwLDQwLjg0IDI1MS40OCwzOC4wMyAyMzUuMDAsMzguMDAKICAgICAgICAgICAgIDIzNS4wMCwzOC4wMCAxODkuMDAsMzkuMDAgMTg5LjAwLDM5LjAwCiAgICAgICAgICAgICAxODkuMDAsMzkuMDAgMTc3LjAwLDM5LjgyIDE3Ny4wMCwzOS44MgogICAgICAgICAgICAgMTc3LjAwLDM5LjgyIDE1OS4wMCwzOC4wMCAxNTkuMDAsMzguMDAKICAgICAgICAgICAgIDE1OS4wMCwzOC4wMCAxMjguMDAsMzguMDAgMTI4LjAwLDM4LjAwCiAgICAgICAgICAgICAxMTYuOTAsMzguMDIgMTIwLjE2LDM5LjQwIDExMy4wMCw0MC42NwogICAgICAgICAgICAgMTEzLjAwLDQwLjY3IDk3LjAwLDQyLjE3IDk3LjAwLDQyLjE3CiAgICAgICAgICAgICA5Ny4wMCw0Mi4xNyA4Ny4wMCw0My44MyA4Ny4wMCw0My44MwogICAgICAgICAgICAgODcuMDAsNDMuODMgNTcuMDAsNDUuMDAgNTcuMDAsNDUuMDAKICAgICAgICAgICAgIDU3LjAwLDQ1LjAwIDMyLjAwLDQ4LjAwIDMyLjAwLDQ4LjAwCiAgICAgICAgICAgICAzMi4wMCw0OC4wMCAxMi4wMCw0OC4wMCAxMi4wMCw0OC4wMCBaIiAvPgo8L3N2Zz4K');
  background-position: 50% 50%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  background-repeat: no-repeat;
  background-size: cover;
}


.circle-sketch-highlight{
  position:relative;
}

.circle-sketch-highlight:before{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:-0.1em;
  border-width:2px;
  border-style:solid;
  border-color:red;
  position:absolute;
  border-right-color:transparent;
  width:100%;
  height:1em;
  transform:rotate(2deg);
  opacity:0.7;
  border-radius:50%;
  padding:0.1em 0.25em;
}

.circle-sketch-highlight:after{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:0.1em;
  padding:0.1em 0.25em;
  border-width:2px;
  border-style:solid;
  border-color:red;
  border-left-color:transparent;
  border-top-color:transparent;
  position:absolute;
  width:100%;
  height:1em;
  transform:rotate(-1deg);
  opacity:0.7;
  border-radius:50%;
}

/*////////////// B A C K G R O U N D \\\\\\\\\\\\\\\*/

/* image background */
#background-image {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

#video-overlay{
    position: fixed;
    right: -10em;
    bottom: -26em;
    opacity: 0.3;
    z-index: -1;
}

#video-overlay img{
    height: 70em;
    width: auto;
}

.mobile{
  display:none;
}

.blur {
  -webkit-filter: blur(2px);
  filter: blur(2px);
}

/*////////////// R O T A T I N G  A N I M A T E D  C I R C L E \\\\\\\\\\\\\\\*/

.circle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 975px;
  height: 438px;
  background-position: center;
  background-image: url("");
  background-color: #F2F2F2;
}
.loader {
  max-width: 15rem;
  width: 100%;
  height: auto;
  stroke-linecap: round;
}


circle {
  fill: none;
  stroke-width: 3.5;
  -webkit-animation-name: preloader;
          animation-name: preloader;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-transform-origin: 170px 170px;
          transform-origin: 170px 170px;
  will-change: transform;
}
circle:nth-of-type(1) {
  stroke-dasharray: 550px;
}
circle:nth-of-type(2) {
  stroke-dasharray: 500px;
}
circle:nth-of-type(3) {
  stroke-dasharray: 450px;
}
circle:nth-of-type(4) {
  stroke-dasharray: 300px;
}
circle:nth-of-type(1) {
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
}
circle:nth-of-type(2) {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
circle:nth-of-type(3) {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}
circle:nth-of-type(4) {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
@-webkit-keyframes preloader {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.clock {
  --_ow: clamp(5rem, 60vw, 40rem);
  --_w: 88cqi;
  --_r: calc((var(--_w) - var(--_sz)) / 2);
  --_sz: 12em;

  background: #c43a3a;
  block-size: var(--_ow);
  container-type: inline-size;
  display: grid;
  inline-size: var(--_ow);
  margin-inline: auto;
  place-content: center;
}

.clock-face {
  aspect-ratio: 1;
  background: var(--_bgc, #FFF);
  border-radius: 50%;
  block-size: var(--_w);
  font-size: 1em;
  font-weight: 400;
  list-style-type: none;
  inline-size: var(--_w);
  padding: unset;
  position: relative;
}

.clock-face time {
  --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));
  --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));
  display: grid;
  height: var(--_sz);
  left: var(--_x);
  place-content: center;
  position: absolute;
  top: var(--_y);
  width: var(--_sz);
}

.clock-face time:nth-child(1) { --_d: 270deg; }
.clock-face time:nth-child(2) { --_d: 300deg; }
.clock-face time:nth-child(3) { --_d: 330deg; }
.clock-face time:nth-child(4) { --_d: 0deg; }
.clock-face time:nth-child(5) { --_d: 30deg; }
.clock-face time:nth-child(6) { --_d: 60deg; }
.clock-face time:nth-child(7) { --_d: 90deg; }
.clock-face time:nth-child(8) { --_d: 120deg; }
.clock-face time:nth-child(9) { --_d: 150deg; }
.clock-face time:nth-child(10) { --_d: 180deg; }
.clock-face time:nth-child(11) { --_d: 210deg; }
.clock-face time:nth-child(12) { --_d: 240deg; }



/*////////////// R O T A T I N G  P E R C E N T A G E  C I R C L E \\\\\\\\\\\\\\\*/

.circle-wrap {
  margin: 50px auto;
  width: 350px;
  height: 350px;
  background: #F2F2F2;
  border-radius: 100%;
}

.circle-wrap .projektleistung .mask,
.circle-wrap .projektleistung .fill {
  width: 350px;
  height: 350px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrap .projektleistung .mask {
  clip: rect(0px, 350px, 350px, 175px);
}

.circle-wrap .projektleistung .mask .fill {
  clip: rect(0px, 175px, 350px, 0px);
  background-image: radial-gradient(#DC007A, #500064);
  
}
.circle-wrap .projektleistung .mask.full,
.circle-wrap .projektleistung .fill {
  animation: fill ease-in-out 6s;
  transform: rotate(160deg);
}
 
@keyframes fill {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(160deg);
  }
}

.circle-wrap .inside-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #fff;
  line-height: 150px;
  text-align: center;
  margin-top: 100px;
  margin-left: 100px;
  position: absolute;
  z-index: 100;
  font-weight: 500;
  font-size: 2em;
}

/*////////////// A N I M A T E D  D O N U T  C H A R T \\\\\\\\\\\\\\\*/

.svg-item {
  width: 100%;
  font-size: 16px;
  margin: 0 auto;
  animation: donutfade 1s;
}

.donut-ring {
  stroke: #EBEBEB;
}

.donut-segment {
  transform-origin: center;
  stroke: #FF6200;
}

.donut-segment-2 {
  stroke: #521E69;
  animation: donut1 3s;
}

.donut-segment-3 {
  stroke: #d9e021;
  animation: donut2 3s;
}

.donut-segment-4 {
  stroke: #ed1e79;
  animation: donut3 3s;
}

.segment-1{fill:#ccc;}
.segment-2{fill:#521E69}
.segment-3{fill:#d9e021;}
.segment-4{fill:#ed1e79;}

@keyframes donutfade {
  /* this applies to the whole svg item wrapper */
    0% {
        opacity: .2;
    }
    100% {
        opacity: 1;
    }
}
@keyframes donutfadelong {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
 
@keyframes donut1 {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 90, 10;
    }
}
 
@keyframes donut2 {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 10, 90;
    }
}
 
@keyframes donut3{
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 1, 99;
    }
}

.donut-percent {
  animation: donutfadelong 1s;
}
.donut-data {
  font-size: 0.12em;
  line-height: 1;
  transform: translateY(0.5em);
  text-align: center;
  text-anchor: middle;
  color:#666;
  fill: #666;
  animation: donutfadelong 1s;
}

.donut-text {
  fill: #FF6200;
}
.donut-text-1 {
  fill: #232327;
}
.donut-text-2 {
  fill: #d9e021;
}
.donut-text-3 {
  fill: #ed1e79;
}

.donut-label {
  font-size: 0.28em;
  font-weight: 700;
  line-height: 1;
  fill: #000;
  transform: translateY(0.25em);
}

.donut-percent {
  font-size: 0.5em;
  line-height: 1;
  transform: translateY(0.5em);
  font-weight: bold;
}


/*////////////// A C C O R D I O N \\\\\\\\\\\\\\\*/

.intro{
  margin-bottom: 3em;
}

.accordion-dark {
  background-color: rgba(255,0,0,0);
  color: #232327;
  cursor: pointer;
  padding: 25px 0 25px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-weight:500;
  font-size:1.1em;
  transition: 0.4s;
  border-top: 0.5px solid #000;
}


.active, .accordion-dark:hover {
  color: #DA8826;
}

.accordion img{
  height: 1.6em;
  width: auto;
  display: inline-block;
  margin-bottom: -0.4em;
}

.panel {
  padding: 0 1px 0px;
  background-color: rgba(255,0,0,0);rgbablur

  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.panel .button-box{
  margin-bottom: 3em;
}

.accordion{
  background-color: rgba(255,0,0,0);
  color: #232327;
  cursor: pointer;
  padding: 25px 0 25px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-weight:500;
  font-size:1.em;
  letter-spacing: 0.05em;
  transition: 0.4s;
  border-top: 0.5px solid #232327;
}


.active, .accordion:hover {
  color: #DA8826;
}

.panel{
  padding: 0 1px 0px;
  background-color: rgba(255,0,0,0);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.panel .button-box{
  margin-bottom: 3em;
}

.topic {
  padding: 25px 0 25px;
  text-align: left;
  font-weight:500;
  font-size:1.8em;
  letter-spacing: 0.05em;
  transition: 0.4s;
  border-top: 0.5px solid #ffffff;
}



.transition, ul li i:before, ul li i:after, p {
  transition: all 0.25s ease-in-out;
}

.flipIn, ul li, h1 {
  animation: flipdown 0.5s ease both;
}

.no-select, h2 {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.schwerpunkte {
    margin-top: 1.5em;
}

.schwerpunkte span {
    float: right;
}


.schwerpunkte p {
    margin-top: 2em;
}

.schwerpunkte li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 1.5em;
  padding-top: 18px;
  border-bottom: 1px solid black;
}

.dark .schwerpunkte li {
  border-bottom: 1px solid black;
}

.schwerpunkte li:nth-of-type(1) {
  animation-delay: 0.5s;
}
.schwerpunkte li:nth-of-type(2) {
  animation-delay: 0.75s;
}
.schwerpunkte li:nth-of-type(3) {
  animation-delay: 1s;
}
.schwerpunkte li:nth-of-type(4) {
  animation-delay: 1.25s;
}
.schwerpunkte li:nth-of-type(5) {
  animation-delay: 1.5s;
}

.schwerpunkte li:last-of-type {
  padding-bottom: 0;
}

.schwerpunkte li:last-child {
    border: none;
}

.schwerpunkte li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
.schwerpunkte li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #000;
  width: 3px;
  height: 9px;
}

.dark .schwerpunkte li i:before, ul li i:after {
  background-color: #000;
}

.schwerpunkte li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
.schwerpunkte li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
.schwerpunkte li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
.schwerpunkte li input[type=checkbox]:checked ~ p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
.schwerpunkte li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
.schwerpunkte li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}

/*////////////// Z U S A M M E N A R B E I T \\\\\\\\\\\\\\\*/


.benefit-dark{
  background-color: #fff;
  transition: 1s ease;
  padding: 28px 28px 40px;
}

.benefit{
  background-color: #192547;
  transition: 1s ease;
  padding: 28px 28px 40px;
  color: #fff;
}

.benefit h2{
  font-weight:400;
  font-size:1.6em;
  line-height: 1.2em;
  color: #fff;
}

.benefit p{
  color: #fff;
}

.benefit-dark h2{
  font-weight:600;
  font-size:1.6em;
  line-height: 1.2em;
  color: #fff;
}

.benefit-icon {
  margin-bottom: 1em;
}

.solution{
  background-color: #192547;
  transition: 1s ease;
  padding: 28px 28px 40px;
  color: #fff;
}

.solution h2{
  font-weight:400;
  font-size:3em;
  line-height: 1.2em;
  letter-spacing: 0.05em;;
  color: #fff;
}

.solution p{
  color: #fff;
}

/*////////////// C - L E V E L \\\\\\\\\\\\\\\*/

.hero-pricture{
  width:100%;
  height:auto;
  margin: 2em 0em 3em;
}

.white-paper-img-hover-zoom{
  overflow: hidden;
}

.white-paper-img-hover-zoom img{
  transition: transform 1s ease;
}

.white-paper img:hover {
  transform: scale(1.05);
}

.project-cases{
  position: relative;
  background-color: #e5ebf3;
  color: ;
  transition: 1s ease;
  margin-top: 0;
  padding: 28px 28px 30px;
  min-height: 10px;
}

.project-cases h3{
  font-weight:400;
  font-size:1.6em;
  line-height: 1.2em;
  margin-top: 0;
}

.project-cases p{
  margin-bottom: 0 !important;
}

.weiter{
  font-weight:600;
  color: #153DF4;
  position:absolute; 
  bottom:28px; 
  right:28px;
  letter-spacing: 0.1em;
}

.weiter .arrow{
  display: inline-block;
  transition: 0.1s ease-in;
}


.white-paper:hover .arrow {
  transform: translateX(50%);
}

.weiter{
  margin-top: 1.5em;
  letter-spacing: 0.1em;
}

/*////////////// S C H W E R P U N K T E \\\\\\\\\\\\\\\*/

.main-topic{
  margin-top: 0.1em;
  margin-bottom: 3em;
  background-color: #F2F2F2;
  transition: 1s ease;
  padding: 28px 28px 40px;
}

.main-topic h2{
  font-weight:400;
  font-size:1.6em;
  line-height: 1.2em;
}

.main-topic:hover {
  background-color: #153DF4;
  color: #fff !important;
}

.main-topic:hover .non-hover{
  opacity: 0;
}

.hovered{
  opacity: 0;
}

.main-topic:hover .hovered{
  opacity: 1;
}


.inner-glow{
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), linear-gradient(120.74deg, #FFB4B7 -1.19%, #DEB5E7 29.65%, #84B5FF 62.61%, #C68CFF 93.58%);
}

/*////////////// K U N D E N  U N D  C A S E S \\\\\\\\\\\\\\\*/

.case-study{
  margin-top: 0.1em;
  color: rgb(173, 173, 173);
  /*border-radius: 25px;*/
  background-color: #ffffff;
  transition: 1s ease;
}

.case-study-image{
  /*border-radius: 25px 25px 0 0;*/
  opacity: 1;
}

.case-study:hover{
  color:#232327;
  transition: 1s ease;
  }

  .case-study:hover img{
    opacity: 0.5;
    transition: 1s ease;
    }

.case-study-caption {
  padding: 28px 28px 40px;
}

.case-study-client {
  color: rgb(173, 173, 173);
}

.case-study-statistics {
  margin-top: 8px;
}

.case-study-statistics-text{
  color:#232327;
}

.case-study-text {
  margin-top: 25px;
}

/*////////////// F A L L B E I S P I E L E \\\\\\\\\\\\\\\*/

.container {
  transition: 0.5s;
}

.container.active{
  filter: blur(20px);
  pointer-events: none;
  user-select: none;
}

.popup{
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 550px;
  padding: 35px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.25);
  background: #fff;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}

.popup.active{
  top: 50%;
  visibility: visible;
  opacity: 1;
  transition: 0.5s;
}

.casestudy{
  height:auto;
  min-width:100%;
  padding-bottom: 4em;
  }

.impact{
  height: 15rem;
  width: 10rem;
  object-fit: contain;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  }


.challenge{
  margin-top: 3em;
}

.whitepaper{
  font-weight: 400;
  font-kerning: normal;
  -moz-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  font-size:1.8em;
  letter-spacing: 0.2px;
  line-height: 1.5em;
  color:#232327;
  margin-bottom: 1em;
  -webkit-hyphens: auto; 
  hyphens: auto; 
}

.less-space-down{
  margin-bottom: 2em !important;
}

.list-disc{
  list-style-type:square;
  font-size: 1.6em;
  line-height: 1.5em;
}

.list-inside{
  list-style-position: inside !important;
}

@mixin cross($size: 20px, $color: currentColor, $thickness: 1px) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
  width: $size;
  height: $size;

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: ($size - $thickness) / 2;
    left: 0;
    right: 0;
    height: $thickness;
    background: $color;
    border-radius: $thickness;
  }

  &:before {
    transform: rotate(45deg);
  }

  &:after {
    transform: rotate(-45deg);
  }

  span {
    display: block;
  }

}



.btn-closer {
  font-size: 3.5em;
  margin: 0;
  border: 0;
  padding: 0;
  /*float:right;*/
  position: absolute;
  top:1em;
  right: 1em;
  background: hsl(216, 100, 50);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  /*display: flex;*/
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 150ms;
  z-index:3000;
  
  .icon-cross {
    @include cross(40px, #fff, 6px);   
  }
  
  &:hover,
  &:focus {
    transform: rotateZ(90deg);
    background: hsl(216, 100, 40);
  }

}

.cross-stand-alone {
  @include cross(40px, #000, 4px);  
}

.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}



/*////////////// P R O J E C T S \\\\\\\\\\\\\\\*/
   
.hero-project{
  width:100%;
  height:auto;
}

.img2-3{
  width:100%;
  height:auto;
}

.img3-2{
  width:100%;
  height:auto;
}

.center{
  width:100%;
  text-align:center;
}

#annotation{
  font-weight:400;
  letter-spacing:0.2em;
  line-height:1.4em;
  font-size:1.4em;
  text-align:left;
  color:#fff;
  position:absolute;
  top:5em;
  right:-2em;
  width:30%;
  z-index:3;
  display:none;
}

#annotation span{
  background: rgba(0, 0, 255, 0.7);
  padding: 0 0.2em;
}

.wordquote{
  font-size: 1.2em;
}

/*////////////// S U B N A V - P R O J E K T \\\\\\\\\\\\\\\*/



.subnav-project{
}

.subnav-project span{
  padding-bottom: ;
  display:none;
}


#middle{
  text-align:center;
}

.previous-project{
  float:left;
}

.next-project{
  text-align:right;
  float:right;
  margin-top: 2em;
}

.next-project span{
  text-align:right;
  float:right;
}

.next-project .arrow{
  display: inline-block;
  transition: 0.1s ease-in;
}

.next-project:hover .arrow {
  transform: translateX(50%);
}



.column.subnav-project{
  float: left;
}
.column.subnav-project.third {
  width: 33.3%;
}
.subnav-project.flow-opposites {
  float: right;
}


.next{
  border-top: solid 1px #d6d6d6;
  padding-top: 1em;;
}

.next p{
  color:#153DF4;
  font-size: 1em;
}

.subnav{
  margin-top: 3em;
}

.subnav p{
  text-align:center;
}

/*////////////// P O R T F O L I O \\\\\\\\\\\\\\\*/

#hero-portfolio{
	background-image: linear-gradient(-45deg, #FE1298, #7F2CBD, #84B1BE);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.story {
  font-weight: 400;
  font-kerning: normal;
  -moz-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  font-size:1.2em;
  letter-spacing: 0.2px;
  line-height: 1.8em;
  color:#232327;
  margin-top: 2em;
  margin-bottom: 3em;
  -webkit-hyphens: auto; 
  hyphens: auto; 
}

.story-image{
  display: block;
  max-width: 100%;
  height: auto;
  padding-bottom: 4em;
  }

  .story-image:hover{
    opacity:0.7;
  }

.space-down{
  margin-bottom: 4em;
}


/*////////////// P R E S S E \\\\\\\\\\\\\\\*/

.press-release {
  color: #232327;
  cursor: pointer;
  padding: 25em 25px;
  width: 100%;
  text-align: left;
  font-weight:500;
  font-size:1.1em;
  transition: 0.4s;

}

.distance{
  padding-bottom: 10em;
}

#download{
  margin-top: 1.5em;
}

/*////////////// V I D E O  S E I T E \\\\\\\\\\\\\\\*/

.stream {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 3em;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.elastic-video {
  position: relative;
  padding-bottom: 55%;
  padding-top: 15px;
  height: 0;
  overflow: hidden;
  }

.elastic-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

/*////////////// K O N T A K T F O R M U L A R \\\\\\\\\\\\\\\*/

form { 
      max-width: 100%;
}

input[type=text], input[type=tel], input[type=email], select, textarea {
  width: 100%;
  padding: 12px;
  border-radius: none;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=checkbox] {
  width: 30px;
  height: 30px;
  padding: 12px;
  border-radius: none;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

label {
  display: flex; /* Ordnet das Kontrollkästchen und den Text nebeneinander an */
  align-items: center; /* Zentriert die Elemente vertikal */
  margin-right: 10px; /* Fügt Abstand zwischen Kontrollkästchen und Text hinzu */
}
    
input[type=submit] {
  width: auto;
  position: relative;
  background-color: #DA8826;
  border: none;
  border-radius: none;
  font-size: 1.6em;
  color: #192547;
  font-family: neue-haas-unica, sans-serif;
  padding: 0.25em 1.4em;
  margin-top: 2em;
  margin-bottom: 4em;
  text-align: center;
  transition-duration: 0.8s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}


.white-button {
  position: relative;
  background-color: #DA8826;
  border: solid;
  border-color: #DA8826;
  border-radius: 0px;
  font-size: 1.8em;
  color: #192547 !important;
  padding: 0.25em 1.4em;
  text-align: center;
  transition-duration: 0.8s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  -webkit-hyphens: none !important;
  -moz-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
}

.white-button:hover {
  background-color: #97CC04;
  border: solid;
  border-color: #97CC04;
}

input[type=submit]:hover {
  background-color: #97CC04;
  border: none;
}

    #downloadLink {
      display: none; 
      margin-top: 20px;
    }

/*////////////// I M P R E S S U M    D A T E N S C H U T Z \\\\\\\\\\\\\\\*/

.ccm-modal--header,
.ccm-modal--footer,
.ccm-modal--body {
  font-family: neue-haas-unica, sans-serif;
}

.ccm-root .ccm-widget--buttons .button { 
  border-radius: 0px !important; 
}

.ccm--ctrl-init { 
  border-radius: 0px !important; 
}

.job-description{
  padding-top: 0.2em;
  line-height: 1.1em !important; 
}

.infos{
  margin-top: 3em;
}


ul.datenschutz {
  list-style-type: square;
  font-size: 1.5em;
  line-height: normal;
  margin-left: 1em;
  margin-top: -2em;
}

ul.datenschutz li::marker {
  font-size: 0.8em;
  vertical-align:middle;
}

ol.inhalt {
  list-style-type:decimal;
  font-size: 1.5em;
  line-height: normal;
  margin-left: 1.8em;
  margin-top: 0.2em;
}

/*////////////// A S I D E  S H O R T C U T  N A V \\\\\\\\\\\\\\\*/


#side-shortcut{
  text-align:center;
  position:fixed;
  right:15px;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:99999;
  display:none;
}

#side-shortcut ul li a {
  display:inline-block;
  color:black;
  background-color: rgba(255,255,255,0.7);
  width:2.2em;
  height:2.2em;
  margin-bottom:0.1em;
  padding-top:0.55em;
  -webkit-transition: all 0.2s ease-in-out 0.2s;
  -moz-transition: all 0.2s ease-in-out 0.2s;
  -ms-transition: all 0.2s ease-in-out 0.2s;
  -o-transition: all 0.2s ease-in-out 0.2s;
  transition: all 0.2s ease-in-out 0.2s;
}

#side-shortcut.colored ul li a {
  background-color: none;
}

#side-shortcut ul li a:hover {
  color: #fff;
  background: #153DF4;
}

.tooltip:hover .info, .tooltip:focus .info {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.info {
  box-sizing: border-box;
  position: absolute;
  top: -1.3em;
  right: 3.3em;
  padding: 1em 1.1em;
  display: block;
  background: #eee;
  width: 300px;
  cursor: text;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

.info:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 14px;
  bottom: -14px;
  left: 0;
}

.info:after {
  position: absolute;
  content: '';
  width: 0.6em;
  height: 0.6em;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 50%;
  right: -0.3em;
  margin-top: -0.3em;
  background: #eee;
}


/*////////////// F O O T E R \\\\\\\\\\\\\\\*/

img{
    height: 50px
}


footer{
  background-color: #192547;
  color:#fff;
  font-family: neue-haas-unica, sans-serif;
  font-weight:400;
  font-size:1em;
  letter-spacing:0.1em;
  padding-top: 2em;
}

footer p{
  color:#fff;
}

footer a{
  color:#fff;
}

footer a:hover{
  color:#DA8826;
  padding-bottom:0.2em;
  text-decoration:none;
}

#footerbox{
  padding-top: 1.2em;
  padding-bottom: 0.6em;
  margin-top: 0em;
  border-top: solid 1px grey;
}

#footerbox p{
    font-size: 1.1em;
    letter-spacing: 0.1em;
 }


/*////////////// M E D I A  Q U E R Y S \\\\\\\\\\\\\\\*/

@media (max-width: 1024px) {
  .mobile{
    display:none;
  }
  h1 {    
    font-size: 10vw;  
  }
  h2 {
    font-size: 1.8em;
  }

  #anspruch h3{
    font-size: 1.6em;
  }
  #cta h1{
    font-size: 10vw;
  }
  .hero{
    font-size: 13vw;
    margin-top: 0em;}
}
.hero br{
display:none;
}
.benefit{
    
}

.benefit br{
display:none;
}
.kernleistungen .weiter{
display:none;
}

@media (max-width: 768px) {  
  section{
    padding: 0px 15px;
  }
  .mobile{
    display:inherit;
  }
  .desktop{
    display:none;
  }  
  .desktop-only{
    display:none;
  }  
  }
  h2 {
    font-size: 1.8em;
  }

  p {    
    font-size: 1.6em;  
  }
  .button{font-size: 1.6em;}
  .white-button{font-size: 1.6em;}
  input[type=submit]{
    font-size: 1.1em;
  }
@media (max-width: 640px) {  
  .mobile{
    display:inherit;
  }
  .desktop{
    display:none;
  }
  .hero {
    font-size: 2.5em;    
  }
  h1 {
    font-size: 2em;    
  }

  h2 {
    font-size: 1.2em;
  }
  h3 {    
    font-size: 1.1em;  
  }
  #anspruch h3{
    font-size: 1.2em;
  }
  .banger {    
    font-size: 1.3em;  
  }
  p {    
    font-size: 1.1em;  
  }
  .list-disc{
  font-size: 1.1em;
  line-height: 1.5em;
  }
  .clients_list {
  grid-column-gap:0.1em;
  grid-row-gap:1rem;
  margin-top: 2rem;
}
  .clients_list img{
  height:4em;
}
  .button{font-size: 1.1em;}
  .white-button{
    font-size: 1.1em;
    padding: 0.25em 0.1em;
    
  }
  input[type=submit]{
    font-size: 1.1em;
  }
  #footerbox p{
    font-size: 0.8em;
 }
}

@media (max-width: 417px) {  
  .client-desktop{
    display: none;
  }
  .client-mobile{
    display:inherit;
  }
}

@media (max-width: 340px) {  
  #menus{
    display: none;
  }
  #menus-mobile{
    display:inherit;
  }
}

/* Medium screens (640px) */
@media (min-width: 40rem) {
  #menus h2{
    transition: 0.5s;
    transition-timing-function: ease-in-out;
    }
  .mobile-gallery{display: inherit;}
  .column {
    float: left;
    padding-left: 0rem;
    padding-right: 1rem;
  }
  .column.full { width: 100%; }
  .column.two-thirds { width: 66.7%; }
  .column.half { width: 50%; }
  .column.third { width: 33.3%; }
  .column.fourth { width: 25%; }
  .column.flow-opposite { float: right; }
    form { 
      max-width: 80%;
  } 
}

@media (min-width: 700px) {
  .brands__item {
    flex: 0 0 33.33%;
  }
}

@media only screen and (min-width: 10px) {
  .main_h {
    padding-top: 15px;
  }
  .logo {
    float: none;
  }
  nav {
    width: 100%;
  }
  nav ul {
    padding-top: 10px;
    margin-bottom: 22px;
    float: left;
    text-align: center;
    width: 100%;
  }
  nav ul li {
    width: 100%;
    padding: 7px 0;
    margin: 0;
  }
  nav ul a {
    font-size: 3em;
  }
  .mobile-toggle {
    display: block;
  }
}

/* Large screens (1024px) */
@media (min-width: 1100px) {
  .brands__item {
    flex: 0 0 25%;
          margin: 2em 1.6em;
  }
  form { 
      max-width: 80%;
  }
  input[type=submit] {
  margin-bottom: inherit;
}
}