/*  www.sinfona.de  */
@font-face {
    font-family: 'FiraSans-Regular';
    src: url("../../files/otosense/fonts/FiraSans-Regular.eot");
    src: url("../../files/otosense/fonts/FiraSans-Regular.eot?#iefix") format('embedded-opentype'),
         url("../../files/otosense/fonts/FiraSans-Regular.woff") format('woff'),
         url("../../files/otosense/fonts/FiraSans-Regular.ttf") format('truetype'),
         url("../../files/otosense/fonts/FiraSans-Regular.svg#firasans-regular-") format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'FiraSans-Medium';
    src: url("../../files/otosense/fonts/FiraSans-Medium.eot");
    src: url("../../files/otosense/fonts/FiraSans-Medium.eot?#iefix") format('embedded-opentype'),
         url("../../files/otosense/fonts/FiraSans-Medium.woff") format('woff'),
         url("../../files/otosense/fonts/FiraSans-Medium.ttf") format('truetype'),
         url("../../files/otosense/fonts/FiraSans-Medium.svg#firasans-medium") format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'FiraSans-ExtraBold';
    src: url("../../files/otosense/fonts/FiraSans-ExtraBold.eot");
    src: url("../../files/otosense/fonts/FiraSans-ExtraBold.eot?#iefix") format('embedded-opentype'),
         url("../../files/otosense/fonts/FiraSans-ExtraBold.woff") format('woff'),
         url("../../files/otosense/fonts/FiraSans-ExtraBold.ttf") format('truetype'),
         url("../../files/otosense/fonts/FiraSans-ExtraBold.svg#firasans-extrabold") format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Armata-Regular';
    src: url("../../files/otosense/fonts/Armata-Regular.eot");
    src: url("../../files/otosense/fonts/Armata-Regular.eot?#iefix") format('embedded-opentype'),
         url("../../files/otosense/fontsArmata-Regular.woff") format('woff'),
         url("../../files/otosense/fonts/Armata-Regular.ttf") format('truetype'),
         url("../../files/otosense/fonts/Armata-Regular.svg#armata-regular-") format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'icon-worksregular';
    src: url("../../files/otosense/fonts/icon-works-webfont.eot");
    src: url("../../files/otosense/fonts/icon-works-webfont.eot?#iefix") format('embedded-opentype'),
         url("../../files/otosense/fonts/icon-works-webfont.woff") format('woff'),
         url("../../files/otosense/fonts/icon-works-webfont.ttf") format('truetype'),
         url("../../files/otosense/fonts/icon-works-webfont.svg#icon-worksregular") format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.ccm-settings-summoner.ccm-show{
  z-index: 990;
}
/*  SECTIONS  */
.section {
	clear: both;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 10em 5em;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 2%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWELVE  */
.span_12_of_12 {
  width: 100%;
  margin-left: 0;
  float: none;
  clear: both;
}
.span_11_of_12 {
  	width: 91.5%;
}
.span_10_of_12 {
  	width: 83%;
}
.span_9_of_12 {
  	width: 74.5%;
}
.span_8_of_12 {
  	width: 66%;
}
.span_7_of_12 {
  	width: 57.5%;
}
.span_6_of_12 {
  	width: 49%;
}
.span_5_of_12 {
  	width: 40.5%;
}
.span_4_of_12 {
  	width: 32%;
}
.span_3_of_12 {
  	width: 23.5%;
}
.span_2_of_12 {
  	width: 15%;
}
.span_1_of_12 {
  	width: 6.5%;
}

/* LAYOUT */
* {
  box-sizing: border-box;
  transition: all .35s ease-in-out;
}
:root{
  --prim: #083EA0;
  --primdunk: #073079;
  --footer: #EBEBEB;
  --schrift: #fff;
  --himmelblau: #2570A7;
  --blk: #000;
}
::selection {
  background: #96c11f;
  color: #fff;
}
::-moz-selection {
  background: #96c11f;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
  font: 100%/1.5 'FiraSans-Regular', 'helvetica', sans-serif;
  line-height: 1.5em;
  color: #000;
}
.bg.blue{
  color: var(--schrift);
  position: relative;
}
.bg.blue .section {
  padding-top: 10em;
}
#wrapper {
  overflow: hidden;
}

#header {
  background: var(--blk);
}
#header .inside {
  clear: both;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 1em 5em;
}
#header .inside .col{
  margin-top: 0;
  margin-bottom: 0;
}
#header .inside .span_12_of_12 {
  display: flex;
  align-items: center;
}
#header p, .foot .span_6_of_12 p, .cta p {
  margin: 0;
}
h1, h2{
  color: var(--schrift);
  line-height: 1em;
  margin: 0;
  text-align: left;
  font-family: 'FiraSans-ExtraBold';
  letter-spacing: 2px;
}
h1{
  font-size: 5em;
}
h2{
  font-size: 5em;
  width: fit-content;
}
h3{
  color: var(--schrift);
  line-height: 1em;
  margin: 0;
  font-family: 'FiraSans-ExtraBold';
  font-size: 2em;
}
h4{
  color: var(--schrift);
  line-height: 1em;
  margin: 1em 0 0;
  text-align: center;
  font-size: 1.5em;
}
strong, h4 {
  font-family: 'Armata-Regular';
}
h1, h2, h3, h4, h5{
  hyphens: auto;
  -webkit-hyphens: auto;
}
h1, h2, h3, h4, h5, .tbox strong, .txt p:nth-child(2n){
  text-transform: uppercase;
}
img, svg, iframe{
	display: block;
	max-width: 100%;
	height: auto;
}
svg {
  display: inline-block;
  overflow: visible;
  height: 100%;
}
picture{
  display: block;
}
p, table{
	margin: 1em 0;
}
table, iframe{
	width: 100%;
}
table{
  margin:0;
}
figure{
  margin:0;
}
a {
  color: #000;
  text-decoration: none;
  outline: 0;
  position: relative;
  display: inline-block;
}
a:hover{
  color: var(--prim);
}
.bg.blue a{
  color: var(--schrift);
}
.btn, button{
  padding: .5em 1em;
  text-decoration: none !important;
  text-transform: uppercase;
}
.btn, button, .bbox a.icon-shop{
  background: linear-gradient(to right, var(--primdunk), var(--primdunk) 50%, var(--prim) 50%);
  background-size: 250% 105%;
  background-position: 100%;
  -webkit-text-fill-color: #fff;
  box-shadow: none;
}
.bbox a{
  -webkit-text-fill-color: #fff;
  font-size: 1.3em;
  font-family: 'Armata-Regular';
  text-transform: uppercase;
  padding: 0;
}
.bbox a strong {
  background: linear-gradient(to right, var(--prim), var(--prim) 50%, var(--blk) 50%);
  background-size: 250% 105%;
  background-position: 100%;
  box-shadow: none;
  padding: .5em;
}
.bbox a.icon-shop {
  padding: .5em;
  height: fit-content;
}
#header .bbox a p{
  margin-top:.75em;
  font-family: 'Armata-Regular';
}
.btn:hover, .bbox a:hover strong, .bbox a.icon-shop:hover{
  background-position: 0 100%;
  box-shadow: none;
}
.span_9_of_12.headline, .headline.sec{
  width: fit-content;
  margin: 0 0 5em;
}
.headline h1 span:nth-child(3), .headline h2 span:nth-child(3), .headline h3 span:nth-child(3){
  margin-left: 1.5em;
}
h2 span, .headline span{
  background: #000;
  padding: .25em .6em .15em .6em;
  display: inline-block;
}
.headline, .cta h2 {
  transform: rotate(-4deg);
}
header .span_12_of_12:first-child{
  display: flex;
  align-items: center;
}
.hero {
  justify-content: center;
  display: flex;
  align-items: center;
  padding-top: 17em;
  width: 100%;
}
.hero .section {
  padding: 5em 2em;
}
.hero .headline img{
  position: absolute;
  height: 260px;
  width: auto;
}
.hero .headline img:first-child{
  z-index: 1;
  top: -14em;
}
.hero .headline img:nth-child(2){
  right: 0;
  top: -15em;
}
.headline {
  width: fit-content;
}
.hero h1{
  position: relative;
  z-index: 5;
}
.hero h3{
  text-align: right;
  background: var(--prim);
}
.hero h4{
  margin-left: 5em;
}
header .span_4_of_12 {
  width: 23.5%;
}
.bbox {
  display: flex;
  justify-content: flex-end;
  text-align: center;
  width: 74.5%;
  margin-top: 2.5em;
} 
.bbox a {
  padding: 1em 1em .65em 1em;
  font-size: 1.3em;
  margin-left: 1em;
}
.bbox a:first-child {
  margin-left: 0;
}
.bbox a p{
  margin: 0;
}
.bbox p{
  text-transform: uppercase; 
}
.vis1130, .vis720{
  display: none;
}
.tbox{
  margin-bottom: 10em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.tbox:last-child {
  margin-bottom: 0;
}
.tbox ul {
  padding: 0;
}
.tbox li::marker{
  content: none;
}
.txt p+p{
  margin-top: 0;
}
.txt p:first-child{
  margin-bottom: 0;
}
.tbott{
  display: inline-flex;
  align-items: end;
  justify-content: end;
  margin-top: 2em;
}
.vbox .span_3_of_12 {
  width: 32%;
}
.vbox strong{
  text-transform: uppercase;
}
.vbox img{
  margin-bottom: 2em;
}
.vbox .col p:last-child {
  line-height: 1em;
}
.headline h3{
  margin-bottom: 1.5em;
  font-size: 3em;
}
.headline, .cta h2 {
  transform: rotate(-4deg);
}
.cta span:first-child{
  margin-left: 1.5em;
}
.cta span:nth-child(3){
  margin-left: 2.5em;
}
sup {
  position: relative;
  vertical-align: baseline;
  top: -0.4em;
}
.bg.blue{
  background: -webkit-linear-gradient(top,  rgba(8,62,160,1) 0%,rgba(41,137,216,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(8,62,160,1) 0%,rgba(41,137,216,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.head {
  clip-path: polygon(0 0, 100% 0%, 100% 94%, 0% 100%);
  z-index: 10;
  position: relative;
  background: -webkit-linear-gradient(top, rgba(8,62,160,1) 0%,rgba(41,137,216,1) 100%);
  background: linear-gradient(to bottom, rgba(8,62,160,1) 0%,rgba(41,137,216,1) 100%);
}

#otosense.bg.blue {
  clip-path: polygon(0 0, 100% 0%, 100% 94%, 0% 100%);
  z-index: 9;
  top: -3.5em;
}
#otosense .section {
  padding-bottom: 13em;
}
#starter, #team {
  clip-path: polygon(0 0, 100% -4%, 100% 96%, 0% 100%);
  z-index: 8;
  position: relative;
}
#team {
  clip-path: polygon(0 0, 100% -12%, 100% 100%, 0% 100%);
}
#starter::before, #team::before{
  content:" ";
  width: 100%;
  height: 150px;
  background: rgba(8,62,160,1);
  position: absolute;
  top: -9em;
  z-index: 15;
}
#starter, #ansprechpartner, #shop, #team {
  top: -5em;
}
#team .span_9_of_12:last-child {
  margin-left: 0;
}
.hero .bg.blue.dark{
  background: none;
}
.bg.grey, #footer{
  background: #EBEBEB
}
.bg h4{
  font-size: 2.5em;
  margin-top: .6em;
  margin-left: 1.5em;
}
.tright, .tright a{
  text-align: right;
}
.tcenter, .tcenter a{
  text-align: center;
}
.tbox strong{
  font-size: 1.2em;
}
.price {
  font-size: 1.7em;
  font-family: 'FiraSans-Medium';
}
[class^="icon-"]::before, [class*=" icon-"]::before {
  font-family: 'icon-worksregular';
  font-style: normal;
  font-size: 1.4em;
  height: 100%;
  width: auto;
  margin-right: .3em;
  bottom: 0;
}
a[class^="icon-tel"]::before {
  content: '\000C0';
}
a[class^="icon-mail"]::before {
  content: '\000C1';
}
a[class^="icon-shop"]::before {
  content: '\0005B';
}
#aside a[class^="icon-"]::before, a[class*=" icon-"]::before {
  color: #fff;
}
a.remove::before {
  content:'x';
  display: inline-block;
  font-size: 2.5em;
}
.footer.first a, a.icon, a[href^="tel:"], a[href^="mailto:"], a[href^="https://"], a[href^="http://"], .sign {
  display: initial;
}
a.btn[href^="https://"], a.btn[href^="http://"]{
  display: inline-flex;
  align-items: center;
}
a.btn[href^="https://"]::before, a.btn[href^="http://"]::before {
  -webkit-mask: url('../../files/otosense/images/inserts/blatt.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/inserts/blatt.svg') no-repeat 50% 50%;
  width: 22px;
  margin-right: .5em;
  bottom: .1em;
  background-color: #fff;
}
.contact-btn::after {
  -webkit-mask: url('../../files/otosense/images/inserts/contact-btn.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/inserts/contact-btn.svg') no-repeat 50% 50%;
  display: inline-block;
  content: '';
  height: 80px;
  width: 100px;
  margin-right: .25em;
  -webkit-mask-size: cover;
  mask-size: cover;
  position: relative;
  background: linear-gradient(to right, var(--primdunk), var(--primdunk) 50%, var(--prim));
  background-size: 250% 105%;
  background-position: 100%;
  -webkit-text-fill-color: #fff;
  box-shadow: none;
}
.contact-btn:hover::after {
  background-position: 0 100%;
  box-shadow: none;
}
a.btn[href^="https://"]::before, a.btn[href^="http://"]::before, #aside a[href^="https://shop.sinfona.de/"]::before{
  bottom: 0;
}
#container .img a[href^="https://"]::before, #container .img a[href^="http://"].btn::before{
  content: none;
}
#trockenbox .headline div {
  display: flex;
  align-items: end;
  position: relative;
}
#trockenbox .headline h2 span:nth-child(3) {
  padding-right: 3em;
}
#trockenbox .headline img{
  position: absolute;
  right: -5em;
  height: 260px;
  width: auto;
}
.cta {
  position: relative;
}
.cta img:nth-child(2){
  position: absolute;
  z-index: 5;
  height: 280px;
  width: auto;
  right: 2em;
  top: 6em;
}
.cta span:first-child {
  padding-right: 2em;
}
.cta h2{
  z-index: 3;
  position: relative;
  top: -.55em;
}
.cta img:nth-child(1){
  z-index: 1;
  position: relative;
  width: 300px;
  height: auto;
  left: 7em;
}
#footer {
  position: relative;
}
#footer::before {
  background: url('../../files/otosense/images/inserts/balken.svg') top;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 60%;
  top: -9.2em;
  content: '';
}
#footer .section{
  padding-top: 0;
  padding-bottom: 5em;
}
.nav-foot, .nav-foot .col{
  margin-top: 0;
}
.nav-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2em;
}
.nav-foot .span_2_of_12:last-child{
  text-align: right;
}
.nav-foot .span_2_of_12:last-child a[href^="https://"]::before{
  content: none;
}
.nav-foot a{
  display: block;
}
.foot, .expl{
  font-size: 85%;
}
.author{
  display: flex;
  justify-content: flex-end;
}
#footer .author a{
  background: none;
}
.footer .author a[href^="http://"]::before{
  background: none;
}
.author .icon-heart{
  margin-left: .5em;
}
.author .icon-heart:before{
  display: inline-block;
  color: var(--prim);
}
.author:hover .icon-heart::before{
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%{transform: scale(1);}
  10%{transform: scale(1.3);}
  20%{transform: scale(1);}
  30%{transform: scale(1.1);}
  40%{transform: scale(1);}
  50%{transform: scale(1);}
  100%{transform: scale(1);}
}
/*animation*/
.fadescroll .img, .fadescroll .txt, .cta .fadescroll {
  opacity: 0;
  transition: all 1.25s ease-in-out;
}
.fadescroll .img {
  transform: translateX(-90%);
}
.fadescroll .txt, .cta .fadescroll {
  transform: translateX(90%);
}
.fade.tbox .img, .fade.tbox .txt, .cta .fade{
  transform:translateX(0);
  opacity: 1;
}
.vbox .fadescroll:first-child {
  transition: all 1s;
  opacity: 0;
  transform: translate(0, 50px);
}
.vbox .fadescroll:nth-child(2n) {
  transition: all 1.3s;
  opacity: 0;
  transform: translate(0, 70px);
}
.vbox .fadescroll:nth-child(3n) {
  transition: all 1.5s;
  opacity: 0;
  transform: translate(0, 90px);
}
.vbox .fadescroll:nth-child(4n) {
  transition: all 1.7s;
  opacity: 0;
  transform: translate(0, 110px);
}
.vbox .fade:first-child {
  opacity: 1;
  transform: translate(0px, 0);
}
.vbox .fade:nth-child(2n) {
  opacity: 1;
  transform: translate(0px, 0);
}
.vbox .fade:nth-child(3n) {
  opacity: 1;
  transform: translate(0px, 0);
}
.vbox .fade:nth-child(4n) {
  opacity: 1;
  transform: translate(0px, 0);
}
/*aside*/
#aside:after{
  content: "";
  position: absolute;
  width: 220px;
  margin-left: 0;
  bottom: .5em;
  background: url("../../files/otosense/images/inserts/otosense_bildmarke.svg");
  right: 0;
  height: 315px;
  background-size: cover;
  box-sizing: border-box;
}
#aside .content{
  visibility: hidden;
  opacity: 0;
  transform: translateY(10%);
  z-index: 500;
  transition: none;
  height: 100vh;
  color: #fff;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body.active-aside #aside .content{
  color: #fff;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  z-index: 999;
  height: 100vh;
  position: relative;
}
#aside{
  position: fixed;
  z-index: 599;
  transition: none;
}
body.active-aside #aside{
  width: 100vw;
  height: 100vh;
  color: #fff;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  z-index: 999;
  background: #00303e; /* Old browsers */
  overflow: hidden;
  background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(30, 37, 62, 1) 100%);
  background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(30, 37, 62, 1) 100%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(30, 37, 62, 1) 100%);
}
body.active-aside .contact-btn {
  display: none;
}
#aside .menu, body.active-aside .contact-btn{
  opacity: 0;
}
#aside.navigation .menu, body.active-aside #aside .content{
  opacity: 1;
}
#aside.kontakt .span_12_of_12:first-child {
  display: flex;
  justify-content: flex-end;
}
#aside .span_3_of_12.close {
  text-align: right;
  color: #626161;
}
#aside .aside-contact, #aside .span_12_of_12.menu{
  margin-top: 1.5em;
}
#aside .span_12_of_12{
  float: left;
}
#aside .content .span_6_of_12:last-child {
  transition: transform .25s ease-in-out, opacity 1s ease-in-out;
}
#aside .level_1 {
  padding: 0;
}
#aside .contact-btn{
  position: fixed;
  right: -10em;
  bottom: 5%;
  color: #fff;
  cursor: pointer;
  z-index: 700;
  transition: all .6s ease-in-out;
  padding: 1em;
  border-radius: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: .85em;
  line-height: 1.3em;
  text-transform: uppercase;
}
body.scroll #aside .contact-btn {
  right: 2.5em;
}
#aside .contact-btn:hover {
  background-position: right center;
}
body.active-aside #aside .contact-btn{
  display: none;
}
#container .layout_latest .image_container > a:before, #container .sbox a:before, #container .tbox>a:first-child::before, #container .layout_latest h2 a:before {
  content: none !important;
}
.level_1 a[href^="https://"]::before, .level_1 a[href^="http://"].btn::before {
  color: #fff;
}
.sitemap .level_1 a[href^="https://"]::before, .sitemap .level_1 a[href^="http://"].btn::before {
  color: #194451;
}
ul li{
  list-style-type: none;
}
#aside li{
  margin-bottom: .65em;
  font-size: 2.2em;
  text-transform: none;
  padding: 0;
  line-height: 1.3em;
}
#aside li strong{
  opacity: .3;
  color: #fff;
  font-weight: normal;
}
#aside ul li a{
  color: #fff;
  padding: 0;
}
body.active-aside .navi{
  display: none;
}
body.active-aside #aside .inside{
  width: 100%;
  padding: 1em 5em 3em;
  transition: none;
  height: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  transition: none;
}
#aside .aside-contact .span_6_of_12:nth-child(3){
  margin-left: 0;
}
#aside .out{
  display: inline-block;
}
#aside .at{
  margin-top: 5em;
}
#aside h3{
  text-transform: none;
  text-align: left;
}
#aside.navigation .desk {
  display: block;
  text-align: center;
}
#aside.kontakt .menu, #aside.navigation .aside-contact, body.active-aside .contact-btn, #aside.kontakt .aside-nav{
  display: none;
}
#aside ul li a::after{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #aaa;
  height: 1px;
}
#aside ul li a:hover::after{
  width: 100%;
}
#aside a, #aside ul li a::after, #aside ul li a::before {
  transition: all .5s;
}
#aside .span_12_of_12 .span_6_of_12:last-child{
  text-align: right;
}
#aside .span_6_of_12 p{
  font-size: 1.4em;
  line-height: 1.5em;
}
#aside a {
  color: #fff;
}
.expl{
  font-size: .75em;
}
#aside a[href^="mailto:"]::after, #aside a[href^="tel:"]::after, #aside [class^="icon-"]::after, .aside-nav a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #aaa;
  height: 1px;
  transition: all .5s;
}
#aside a[href^="mailto:"]:hover::after, #aside a[href^="tel:"]:hover::after, #aside [class^="icon-"]:hover::after, .aside-nav a:hover::after  {
  width: 100%;
}
.imp a.cbox[href^="https://"]::before, .imp a.cbox[href^="http://"]::before, .acbox .more::before, #aside .icon-remove::after {
  content: none;
}
#container a.cbox[href^="https://"]::before, #container a.cbox[href^="http://"].btn::before {
  content: none;
}
.aside-line{
  font-family: 'Armata-Regular';
  font-size: 3.5em;
  line-height: 1em;
  font-weight: normal;
  color: #fff;
}
#aside li, #aside .aside-contact .span_6_of_12:first-child .aside-line, #aside .aside-contact .span_6_of_12:first-child p, .aside .aside-nav{
  transform: translateX(-50%);
  opacity: 0;
  transition: none;
}
#aside.kontakt .aside-contact .span_6_of_12:first-child .aside-line, #aside.kontakt .aside-contact .span_6_of_12:first-child p, .aside.navigation .aside-nav{
  transform: translateX(0);
  opacity: 1;
  transition: all .5s ease-in-out;
  transition-delay: .2s;
}
#aside p.hlabel{
  font-size: 1.2em;
}
#aside .hlabel{
  font-size: .9em;
}
#aside .content .span_6_of_12:last-child p {
  line-height: 1.2em;
  margin-bottom: 1.3em;
}
.aside-nav, .social {
  display: flex;
  flex-direction: column;
}
.aside-nav{
  margin-top: 3em;
}
.aside-nav a {
  margin-bottom: 1em;
  font-size: 1.5em;
  text-transform: none;
  padding: 0;
  line-height: 1.3em;
  text-transform: uppercase;
}
.icon-shop{
  margin-bottom: 0;
}
.social a {
  font-size:1.2em;
  width: fit-content;
}
body .contact-btn img {
  position: relative;
  z-index: 500;
}
body .contact-btn p:first-child {
  z-index: 501;
  position: absolute;
  margin: 0 .5em 0 0;
}
#aside a.download::before {
  background-color: #fff;
}
.bg.full {
  z-index: 400;
  position: relative;
}
.bg.full .section{
  padding: 0;
  margin: 0;
  max-width: none !important;
}
.flexbox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.flexbox .span_4_of_12.acc {
  margin: 0;
  width: 33.333%;
  display: flex;
  text-align: center;
  position: relative;
}
.acc {
  overflow: hidden;
}
.acc p {
  position: absolute;
  font-family: 'FiraSans-ExtraBold';
  font-weight: normal;
  color: #fff;
  text-shadow: 0 3px 2px rgba(0,0,0,.5);
  z-index: 100;
  font-size: 2.4em;
  line-height: 1.3em;
  margin: 0;
  left: 5%;
  bottom: 5%;
  width: 250px;
  text-align: left;
  text-transform: uppercase;
}
.taccordion {
  margin: 0;
  display: none;
  align-items: center;
  transition: height 0s ease-in-out, opacity .75s ease-in-out;
  color: var(--schrift);
  background: -webkit-linear-gradient(top, #105282 0%,#09A7DE 100%);
  background: linear-gradient(to bottom, #105282 0%,#09A7DE 100%);
}
.taccordion.flex-open {
    display: flex !important;
}
.heading-style-h3 {
  font-family: 'FiraSans-Medium';
}
.heading-style-h3 + p{
  margin: 0;
}
.taccordion p strong{
  text-transform: uppercase;
  font-size: 1.2em;
  margin: .25em 0 1.5em;
  display: block;
}
.taccordion p.text-strong {
  font-size: 1.5em;
  font-family: 'FiraSans-Medium';
  line-height: 1.7em;
  font-weight: bolder;
  margin-top: 1.5em;
}
.taccordion p.text-strong span{
  font-family: 'FiraSans-Regular';
  font-weight: light;
}
.taccordion a{
  color: var(--schrift);
}
.taccordion .span_6_of_12{
  margin: 0;
  padding: 8em 3em;
}
hr {
  margin: 3em 0;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.6);
  clear: both;
}
.acc.first {
  order: 1;
}
.acc.sec {
  order: 2;
}
.acc.third {
  order: 3;
}
.taccordion.first {
  order: 4;
}
.taccordion.sec {
  order: 5;
}
.taccordion.third {
  order: 6;
}
.img-box picture{
  margin-bottom: 1.5em;
}
.img-box picture:last-child{
  margin-bottom: 0;
}
.img-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
}
.acc:hover{
  filter: grayscale(100%);
  cursor: pointer;
}
.acc.active img{
  filter: grayscale(100%);
}

@media only screen and (max-width: 1560px) {
  #footer::before {
    top: -7em;
  }
}
@media only screen and (max-width: 1300px) {
  .hero .section {
    padding-left: 2em;
    padding-right: 2em;
  }
  .bbox {
    margin-top: 1.5em;
  } 
}
@media only screen and (max-width: 1285px) {
  #starter {
    clip-path: polygon(0 0, 100% -5%, 100% 100%, 0% 100%);
  }
  #otosense .section, #starter .section {
    padding-bottom: 10em;
  }
  #starter .section, #team .section {
    padding-top: 8em;
  }
}
@media only screen and (max-width: 1280px) {
  .cta img:nth-child(2) {
    height: 230px;
    top: 8.5em;
  }
  .cta span:nth-child(3) {
    margin-left: 1.75em;
  }
  .cta h2 {
    font-size: 4.5em;
  }
  h1, h2 {
    letter-spacing: 1px;
  }
  h2 {
    font-size: 4em;
  }
}
@media only screen and (max-width: 1285px) {
  .bbox a {
    padding: .75em .75em .5em .75em;
  }
  .bbox a {
    font-size: 1.1em;
  }
}
@media only screen and (max-width: 1170px) {
  .nav-foot .span_2_of_12:nth-child(2){
    width: 32%;
  }
  #footer::before {
    top: -5.4em;
  }
}
@media only screen and (max-width: 1130px) {
  .cta img:nth-child(2) {
    height: 180px;
    top: 7.5em;
    right: 4em;
  }
  .cta span:nth-child(3) {
    margin-left: 1.75em;
  }
  .cta h2 {
    font-size: 4em;
  }
  .cta img:nth-child(1) {
    width: 250px;
  }
}
@media only screen and (max-width: 1050px) {
  .section.group {
    padding: 6.5em 3em;
  }
}
@media only screen and (max-width: 1020px) {
  .hero .section {
    padding: 5em 2em;
  }
}
@media only screen and (max-width: 980px) {
  .fbox, .img-box{
    width: 100%;
    margin-left: 0;
  }
  .img-box {
    flex-wrap: inherit;
    margin-top: 5em;
  }
  .img-box picture {
    margin-right: 1em;
  }
  .img-box picture:last-child {
    margin-right: 0;
  }
  #otosense.bg.blue {
    clip-path: polygon(0 0, 100% 0%, 100% 97%, 0% 100%);
  }
  #starter::before {
    height: 100px;
    top: -5em;
  }
}
@media only screen and (max-width: 950px) {
  h2 {
    font-size: 4em;
  }
  .cta span:first-child {
    margin-left: .5em;
  }
  .cta h2 {
    font-size: 3.5em;
  }
  .cta img:nth-child(2) {
    right: 6em;
  }
  .cta img:nth-child(1) {
    left: 3em;
  }
  .desktop{
    display: none;
  }
  .mob-nav {
    margin  : 20px auto;
    width   : 20px;
    height  : 14px;
    cursor  : pointer;
    position: relative;
  }
  .mob-nav span {
    background-color: var(--schrift);
    height          : 2px;
    position        : absolute;
    width           : 100%;
    left            : 0;
    transition      : all 0.3s ease;
    border-radius   : 10px;
  }
  .mob-nav span:first-child {
    top: 0;
  }
  .mob-nav span:nth-child(2) {
    top: 6px;
  }
  .mob-nav span:last-child {
    top: 12px;
  }
}
@media only screen and (max-width: 870px) {
  .cta h2, .headline h3  {
    font-size: 3em;
  }
  .cta span:first-child {
    margin-left: .25em;
  }
  .cta img:nth-child(2) {
    height: 156px;
    top: 6.75em;
    right: 4em;
  }
  .cta img:nth-child(1) {
    width: 220px;
  }
  .bbox a{
    padding: .5em;
    margin-left: .7em;
  }
  .bbox a:first-child {
    padding-left: 0;
  }
}
@media only screen and (max-width: 850px) {
  .flexbox .span_4_of_12.acc {
    width: 100%;
  }
  .acc.first {
    order: 1;
  }
   .taccordion.first {
    order: 2;
  }
  .acc.sec {
    order: 3;
  }
  .taccordion.sec {
    order: 4;
  }
  .acc.third {
    order: 5;
  }
  .taccordion.third {
    order: 6;
  }
  .taccordion .span_6_of_12 {
    margin: 0;
    padding: 3em;
  }
  .taccordion p.text-strong {
    margin-bottom: 0;
    line-height: 1.3em;
  }
  .taccordion p.text-strong a{
    margin-bottom: .4em;
    display: inline-block;
  }
  .taccordion p.text-strong a:last-child {
    margin-bottom: 0;
  }
  .taccordion a {
    -moz-hyphens: auto;
    hyphens: auto;
  }
  h3 {
    line-height: 1.2em;
  }
  .img-box {
    display: block;
    margin-top: 5em;
  }
  .img-box picture {
    margin-right: 0;
  }
}
@media only screen and (max-width: 830px) {
  .cta h2 {
    font-size: 2.5em;
  }
  .cta img:nth-child(2) {
    top: 6.2em;
  }
  .cta img:nth-child(1) {
    top: 1em;
  }
  #article-9.bg.blue .section {
    padding-top: 6em;
  }
  #otosense.bg.blue {
    clip-path: polygon(0 0, 100% 0%, 100% 98%, 0% 100%);
  }
}
@media only screen and (max-width: 800px) {
  #trockenbox .headline img {
    right: -2.5em;
    height: 220px;
  }
  h1 {
    font-size: 4em;
  }
  .hero .headline img:first-child {
    left: -2em;
  }
  #header .inside {
    padding: 1em 0;
  }
  .hero .headline img:nth-child(2) {
    right: -5em;
  }
}
@media only screen and (max-width: 780px) {
  .headline h3 {
    margin-bottom: 1.5em;
    font-size: 2.3em;
  }
  .bbox a {
    margin-left: .5em;
  }
  .vbox .span_3_of_12{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2em;
  }
  .vbox .span_3_of_12:nth-child(2n+1){
    margin-left: 0;
  }
  .vbox img, .vbox p {
    margin-bottom: .5em;
  }
  .vbox p:last-child {
    margin-top: 0;
  }
}
@media only screen and (max-width: 750px) {
  .cta {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
  }
  .cta img:nth-child(2) {
    order: 3;
    position: relative;
    top: 0;
    right: 0;
    width: 70%;
    height: auto;
  }
  .cta img:nth-child(1) {
    order: 1;
    left:0;
    top: 0;
  }
  .cta h2{
    order: 2;
    text-align: center;
  }
  .cta span:first-child {
    padding-right: .6em;
  }
  .cta span:nth-child(3) {
    margin-left: 0;
  }
  .cta p{
    order: 4;
    width: 100%;
    margin-top: 1.5em;
  }
  .vis1130{
    display: block;
  }
  .vis720 {
    display: inline-block;
  }
  .bbox a{
    margin-top: 1em;
    margin-left: 0;
  }
  .bbox a:first-child{
    margin-top: 0;
  }
  .bbox a p{
    display: none;
  }
  .bbox {
    order:3;
    margin-top: 3em;
  } 
  header .ce_text{
    display: grid;
  }
  header .span_4_of_12{
    order: 1;
  }
  .hero{
    order: 2;
  }
  #header .inside {
    padding-left: 3em;
    padding-right: 3em;
  }
  body.active-aside #aside .inside {
    width: 100%;
    padding: 1em 3em 3em;
  }
  header .span_4_of_12 a {
    width: 180px;
  }
}
@media only screen and (max-width: 730px) {
  h2 {
    font-size: 3em;
  }
  .tbox .span_6_of_12{
    width: 100%;
    margin-left: 0;
  }
  .span_9_of_12.headline, .headline.sec {
    margin: 0 0 3em;
  }
  .tbox {
    margin-bottom: 5em;
  }
  .tbox:last-child {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 650px) {
  .tbott {
    display: block;
  }
  .tbott ul, .tbott li:last-child, .tbott .span_6_of_12:first-child{
    margin-bottom: 0;
  }
  .tbott ul:last-child, .tbott .span_6_of_12:last-child{
    margin-top: 0;
  }
  .headline h1 span:nth-child(3), h1 span:first-child {
    padding-left: .4em;
    padding-right: .4em;
  }
  .hero h4 {
    margin-left: 0;
  }
  .hero .headline img:nth-child(2){
    display: none;
  }
  .hero .headline img:first-child {
    left: 50%;
    transform: translateX(-50%);
  }
  #header p{
    text-align: center;
  }
  .taccordion .span_6_of_12 {
    width: 60%;
  }
}
@media only screen and (max-width: 630px) {
  .section.group {
    padding: 6.5em 2em;
  }
  .hero .section {
    padding: 5em 1em 0;
  }
  body.active-aside #aside .inside {
    padding: 1em 2.5em 3em;
  }
}
@media only screen and (max-width: 600px) {
  .vbox .span_3_of_12{
    width: 100%;
    margin-left: 0;
    margin-bottom: 2em;
  }
  #footer .section {
    padding-bottom: 5em;
  }
  .nav-foot {
    display: flow-root;
  }
  .nav-foot .span_4_of_12:first-child{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 2em;
  }
  .nav-foot .span_2_of_12:nth-child(2), .nav-foot .span_2_of_12:last-child{
    width: 49%;
  }
  .nav-foot .span_2_of_12:nth-child(2){
    margin-left: 0;
  }
  #trockenbox .headline img {
    right: 0;
    height: 180px;
  }
  .nav-foot .span_4_of_12 p{
    margin-top: 0;
  }
}
@media only screen and (max-width: 550px) {
  h1 {
    font-size: 3.5em;
  }
  .headline h1 span:nth-child(3) {
    margin-left: 1em;
  }
  .taccordion.flex-open {
    flex-wrap:wrap;
  }
  .taccordion .span_6_of_12 {
    width: 100%;
    order: 1;
  }
  .taccordion .image_container{
    order: 2;
  }
}
@media only screen and (max-width: 540px) {
  .headline h2{
    order: 2;
  }
  .headline h4{
    width: 100%;
    top: 0;
    margin-left: 0;
  }
  #trockenbox .headline img {
    right: 0;
    order: 1;
    position: relative;
  }
  #trockenbox .headline div {
    flex-wrap: wrap;
    justify-content: center;
  }
  #trockenbox .headline h2 span{
    padding-right: 1.5em;
  }
    #trockenbox .headline h2 span:nth-child(3){
    padding-right: 1em;
  }
  .bg h4 {
    font-size: 1.7em;
  }
}
@media only screen and (max-width: 530px) {
  #aside .aside-contact .span_6_of_12 {
    width: 100%;
    margin-left: 0;
  }
  #aside .span_12_of_12 .span_6_of_12:last-child {
    text-align: left;
  }
}
@media only screen and (max-width: 500px) {
  .foot {
    margin-top: 3em;
  }
  .foot .span_6_of_12{
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
  .author{
    justify-content: center;
  }
}
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }

  .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
	   width: 100%;
	}
  h2, .cta h2 {
    font-size: 2.5em;
  }
  .headline h2 span:nth-child(3), .headline h3 span:nth-child(3){
    margin-left: 1em;
  }
  h4 {
    margin-left: 2em;
  }
  .tbox {
    margin-bottom: 5em;
  }
  .tbox:last-child {
    margin-bottom: 0;
  }
  h1 {
    font-size: 3em;
  }
  .hero h4{
    font-size: 1.3em;
  }
  .bbox, .foot {
    margin-top: 2.5em;
  }
  .bg.blue .section {
    padding-top: 5em;
  }
  .img-box {
    margin-top: 4em;
  }
}
@media only screen and (max-width: 450px) {
  .section.group {
    padding: 4em 1.5em;
  }
  #header .inside{
    padding: 1em 1.5em;
  }
  .hero .section {
    padding: 5em 1em 0;
  }
  header .span_4_of_12 img {
    width: revert-layer;
  }
  .hero .headline img:first-child {
    height: 230px;
    top: -12em;
  }
  .hero {
    padding-top: 13em;
  }
  body.scroll #aside .contact-btn {
    right: .5em;
  }
  #aside .contact-btn {
    bottom: 2%;
  }
  body.active-aside #aside .inside {
    padding: 1em 1.5em 3em;
  }
  header .span_4_of_12 a {
    width: 130px;
  }
    /*
  #header .inside {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
  */
}
@media only screen and (max-width: 430px) {
  .headline h3 {
    margin-bottom: 1.5em;
    font-size: 2em;
  }
  .cta img:nth-child(2) {
    max-width: 100%;
    height: auto;
  }
}
@media only screen and (max-width: 390px) {
  h1 {
    font-size: 2.8em;
    letter-spacing: 0;
  }
  .headline h1 span:nth-child(3) {
    margin-left: 1em;
  }
}
@media only screen and (max-width: 380px) {
  .nav-foot .span_2_of_12:nth-child(2), .nav-foot .span_2_of_12:last-child {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
  .nav-foot .span_2_of_12:last-child {
    margin-top: 1.5em;
  }
  #trockenbox .headline h2 span:nth-child(3), #trockenbox .headline h2 span{
    padding-right: .5em;
  }
  #footer::before {
    top: -4em;
  }
  .hero .headline img:first-child {
    top: -12em;
  }
  .bbox {
    margin-top: 2em;
  }
  .bbox a {
    font-size: 1.1em;
    margin-top: .75em;
  }
  h1 {
    font-size: 2.5em;
    letter-spacing: 0;
  }
  #otosense.bg.blue {
    clip-path: polygon(0 0, 100% 0%, 100% 98.5%, 0% 100%);
  }
}
@media only screen and (max-width: 330px) {
  .acc p {
    font-size: 1.5em;
  }
}
@media only screen and (max-width: 315px) {
  h1 {
    font-size: 2.3em;
  }
}