@import url("reset.css");

img,
figure {
    pointer-events: none;
}

/* Elemente mit der Klasse .notsafe erhalten ihre Pointer-Events zurück*/
.notsafe {
    pointer-events: auto !important;
}


/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v44-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* open-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v44-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* open-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/open-sans-v44-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v44-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* open-sans-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/open-sans-v44-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v44-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* goldman-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Goldman';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/goldman-v21-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/goldman-v21-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* goldman-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Goldman';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/goldman-v21-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/goldman-v21-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


.clear {
    clear: both;
}

body {
    font: 400 16px/22px 'Open Sans'; color: #3c3c3b;
    /* Schriftschitt/Größe/Zeilenabstand/Art*/
}

* {
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}


header {position: relative;}
header:after {position: absolute; content: ''; background: #313131; width:75%; height: 850px; right: 0; top:0}
.flex-header {display: flex; flex-wrap: nowrap; justify-content: space-between; position: fixed;top: 0; left: 0; width: 100%; z-index: 101}
.logo {width: 25%; padding: 15px 0 15px 10%; background: rgba(255, 255, 255, 0.5);}
.logo img{width: 150px; height: auto; display: block;;}
nav {background: #313131; padding:20px 10% 20px 0; align-content: center; width: 75%}
nav ul {display: flex; flex-wrap: nowrap; justify-content: flex-end}
nav ul li {margin: 0 20px;position: relative}
nav ul li:after {position: absolute; content: '/'; color: #cc2423; right: -25px; top: 0;}
nav ul li:nth-child(5):after,
nav ul li:nth-child(6):after {content: none}
nav ul li:nth-child(6){margin-right: 0}
nav ul li a{text-decoration: none; color:#fff;transition: ease .8s; -o-transition: ease .8s; -moz-transition: ease .8s; -webkit-transition: ease .8s; -ms-transition: ease .8s }
nav ul li a:hover {color: #cc2423}
.insta {width: 20px; height: auto}

.contact {position: fixed; left: 50px; bottom: 25%; z-index: 101}
.contact a {background: #313131; width: 35px; height:35px; padding: 7px; display: block; margin: 10px 0; transition: ease .8s; -o-transition: ease .8s; -moz-transition: ease .8s; -webkit-transition: ease .8s; -ms-transition: ease .8s}
.contact a:hover {background: #cc2423}

.head-img {width: 62%; height: 800px; object-fit: cover; position: absolute; left: 135px; top: 120px; z-index: 99}
.btn {font-size: 17px; text-transform: uppercase; font-family: 'Goldman'; border: 2px solid #cc2423; padding: 10px 35px; color: #fff; text-decoration: none; display: inline-block; margin-top: 25px;transition: ease .8s; -o-transition: ease .8s; -moz-transition: ease .8s; -webkit-transition: ease .8s; -ms-transition: ease .8s }
.btn:hover {background: rgba(0,0,0,.5); border: 2px solid #fff;}

/*--------SLIDE--------*/
.slide {width: 500px; color: #fff; left: 65%; top: 35%; z-index: 100; padding-top: 300px}
.slide .big {font-size: 45px; line-height: 40px; font-family: 'Goldman'; text-transform: uppercase; font-weight: 700}
.slide .list {margin-top: 20px; font-weight: 500}
.slide .list li{position: relative;margin-left: 25px; line-height: 28px;font-size: 17px; }
.slide .list li:before {content: ''; background: url(../images/haken.svg) no-repeat center / cover; position: absolute; left: -25px; top: 2px; width: 18px; height: 20px;}

.slide-wir {position: absolute; right: 0; top: -120px}
.slide-wir .slick-slide{max-width: 250px; margin: 0 15px}
.wir-slide{background: #050505;font-family: 'Goldman'; text-transform: uppercase; font-weight: 700; font-size: 30px;line-height: 35px;   max-width: 250px; height: 650px; position: relative}
.wir-slide p{ transform: rotate(-90deg); position: absolute;bottom: 200px; left: -40px}
/*--------SLIDE--------*/

.wrapper {padding: 120px 10%}
.square {position: relative; }
.square:before {position: absolute; content: ''; background:#cc2423; width: 35px; height: 35px; left: -15px; top: -5px; z-index: 0; }
h1 span, h2 span {position: relative; font-size: 16px; font-weight: 400;z-index: 100; display: inline-block; margin-bottom: 15px}
h1, h2 {font-family: 'Goldman'; text-transform: uppercase; font-weight: 700; font-size: 30px; line-height: 30px;  margin-bottom: 30px}
h3 {font-family: 'Goldman'; text-transform: uppercase; font-weight: 700; font-size: 20px; line-height: 20px;  margin-bottom: 20px}
.underline {font-family: 'Goldman'; text-transform: uppercase; font-weight: 400; font-size: 17px; text-decoration: underline; text-decoration-color:#cc2423;}
#start {margin-top: 280px}
.col-2 {width:48% }

#warum-wir {background: #313131 url(../images/bg.svg)no-repeat left -50px bottom -100px / 1500px; color: #fff; position: relative}
#warum-wir .col-2:first-of-type {padding: 150px 0 150px 10%}
#warum-wir .col-2:last-of-type {position: relative;}
.pfeil {position: relative; display: inline-block}
.pfeil:after {position: absolute; content: ''; background: url(../images/arrow-red.svg) no-repeat center / 10px; width: 10px; height: 17px; right: -25px; top: 4px}
.flex{display: flex; justify-content: space-between; flex-wrap: nowrap;}
.center {align-items: center;}

.eyecatcher {position: relative; background: #f1f1f1 url(../images/autolack-pflege.jpg) no-repeat center right / 72%; height: 650px;}
.text-box {position: absolute; background: #cc2423; width: 450px; padding: 35px; font-family: 'Goldman';font-size: 60px; font-weight: 700; line-height: 55px; color: #fff; text-transform: uppercase; left: 10%; bottom: 0}
#deine-perspektive {background: #f1f1f1}
.white {padding: 35px; background: #fff url(../images/bildmarke.svg) no-repeat right 25px bottom 25px / 250px}
.list {margin-top: 20px; }
.list li{position: relative;margin-left: 25px; line-height: 28px; }
.list li:before {content: ''; background: url(../images/haken.svg) no-repeat center / cover; position: absolute; left: -25px; top: 6px; width: 16px; height: 18px;}


#arbeitsbedingungen {background: url(../images/mitarbeiterin.png) no-repeat right 15% bottom / 400px, url(../images/lackiererei-aachen.jpg) no-repeat center / cover; padding: 120px 10%;}
.work {width: 60%;}
.box {position: relative;color: #fff; }
.inhalt {position: relative; z-index: 100}
#arbeitsbedingungen .box:first-of-type { width: 50%;padding: 50px; }
.box:first-of-type .multiply {background: rgba(60, 60, 59, 0.9);mix-blend-mode: multiply; width: 100%; position: absolute; left: 0; top: 0; height: 100%; z-index: 99}
.box:last-of-type .multiply {background: rgba(255, 31, 30);mix-blend-mode: multiply; width: 100%; position: absolute; left: 0; top: 0; height: 100%; z-index: 99}
#arbeitsbedingungen .box:last-of-type { width: 50%;padding: 100px 50px 50px; }
.benefits {margin: 20px 0}
.benefits img {width: 50px; }
.benefits .flex {align-items: center}
.benefits p {width: 80%;font-family: 'Goldman'; text-transform: uppercase; font-weight: 700; font-size: 16px; line-height:22px; }

#sicherheit-bezahlung {background: #313131 url(../images/bg.svg)no-repeat left -50px bottom -100px / 1500px; color: #fff; position: relative; }
#sicherheit-bezahlung .col-3 {width: 32%; padding: 25px; text-align: center;font-family: 'Goldman'; text-transform: uppercase; font-weight: 700; font-size: 20px; line-height:22px; hyphens: auto;-o-hyphens: auto;-webkit-hyphens: auto;-ms-hyphens: auto;-o-hyphens: auto;}
#sicherheit-bezahlung .col-3 img {width: 50px; margin: 25px auto; display: block;}
.black {background: #050505}
.border {border: 2px solid #cc2423 }
.dark {background: #3c3c3b; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8)}

.infobox {position: absolute; background: #cc2423; width: 450px; padding: 35px; right: 10%; bottom: 0; z-index: 100}
.white-bg {position: absolute; width: 28%; height: 100%; right: 0; top: 0; z-index: 99; background: #fff}

#zukunft .left {background: url(../images/lackierer-mit-farbspritzpistole.jpg) no-repeat center left / cover; width: 50%;}
.bewertung {position: relative; width: 60%; color: #fff; font-style: italic; font-weight: 500; padding: 120px 5% 120px 10%;}
.bewertung img {width: 100px; height: auto; margin-bottom: 80px}
.bewertung span {height: 1px; width: 40%; background: #fff; display: block; margin: 25px 0}
.ma {font-family: 'Goldman'; text-transform: uppercase; font-weight: 700; font-size: 16px; line-height:22px; font-style: normal;}
.red-bg {background: rgba(255, 31, 30);;mix-blend-mode: multiply;width: 100%;position: absolute; left: 0; top: 0; height: 100%; z-index: 99 }

#zukunft .right {width: 50%; background: #f1f1f1; padding: 120px 10% 120px 5%}
#zukunft .right .btn{color:#3c3c3b }
footer {background: #050505; color: #fff;}
.col-4 {width: 24%;}
.color {color:#cc2423 }
footer a {color: #fff; transition: ease .8s; -o-transition: ease .8s; -moz-transition: ease .8s; -webkit-transition: ease .8s; -ms-transition: ease .8s}
footer h3, footer a:hover {color: #cc2423}
.data {position: fixed; left: 0; bottom: 0; background:#3c3c3b; color: #cc2423;font-size: 13px; padding: 5px 15px; z-index: 100 }
.data a {color: #fff; text-decoration: none;}
.hero header {background: url(../images/autolack-pflege.jpg) no-repeat center top/ cover; height: 450px}
.hero header:after {content: none;}
.hero #start {margin-top: 0;}
strong {font-weight: 500}
/*-------------MOBILE NAVI--------------*/
.burger-nav {
    position: fixed;
    right: 7%;
    top: 15px;
    color: #fff;
    z-index: 9999;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    font-size: 30px;
    cursor: pointer;
    transition: all .4s ease-in-out;
    padding: 16px 21px 21px 19px;
    display: none;
}

.burger-nav b {
    transition: all .4s ease-in-out;
    float: left;
    margin-left: 0;
    font-family: sans-serif;
    font-style: normal;
}

.burger-nav-anim {
    top: 15px;
  right: 7%;
    color: #fff;
}

.burger-nav-anim b:first-of-type {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.burger-nav-anim b:nth-of-type(2) {
    opacity: 0;
}

.burger-nav-anim b:last-of-type {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-left: -64%;
}

.full-screen-nav {
    position: fixed;
    z-index: 9998;
    width: 100%;
    height: 100vh;
    background: #313131 url(../images/bg.svg)no-repeat left -50px bottom -100px / 1500px;   
    display: table;
    visibility: hidden;
    transition: all .4s ease-in-out;
    opacity: 0;
    left: 0;
    top: 0;  
}

.full-screen-nav ul {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}


.full-screen-nav ul .nav-li,
.full-screen-nav ul li a {
    padding: 10px 20px;
    display: block;
    font-size: 20px;
    color: #fff;
    transition: all .4s ease-in-out;
    text-decoration: none;
    font-weight: 500;
}

.full-screen-nav ul .nav-li {
    text-decoration: underline;
    font-style: italic;
}


.fadeIn {
    opacity: 1 !important;
    visibility: visible !important;
}

.fadeUp {
    opacity: 1 !important;
    margin-top: 0 !important;
}

/*-------------MOBILE NAVI ENDE--------------*/

/*---------------------------------------
MEDIA Queries | Tablet | Phone
---------------------------------------*/

@media screen and (max-width: 1430px) {
    /*CSS*/
    .slide {left: 63%; width: 480px; }
    .head-img {width: 58%;}
    .benefits img {width:18%; }
}

@media screen and (max-width: 1350px) {
    /*CSS*/
    nav {padding: 20px 5% 20px 0}
    .slide { width: 400px; }
    .slide .big {font-size: 40px;line-height: 35px;}
    .work h2 {hyphens: auto;-o-hyphens: auto;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;}
    .benefits .flex {flex-wrap: wrap; }
    .benefits p {width: 100%;}
    .benefits img {margin:0 0 15px 0 ;}
    #arbeitsbedingungen .box:first-of-type, #arbeitsbedingungen .box:last-of-type {padding: 35px;}
    .eyecatcher {height: 550px}
    .wir-slide p {left: -74px}    
    #zukunft .left {background-position: center}
}

@media screen and (max-width: 1200px) {
    /*CSS*/
    .wrapper {padding: 120px 5%;}
    .logo {padding: 15px 0 15px 5%;}
    .contact {left: 13px;}
    .head-img {left: 64px;}
    .slide {top:0; left: 60%}
    #warum-wir .col-2:first-of-type {padding: 150px 0 150px 5%}
    .text-box {left: 5%}
    #arbeitsbedingungen {padding: 120px 5%;}
    .infobox {right: 5%}
    #sicherheit-bezahlung .flex {flex-wrap: wrap}
    #sicherheit-bezahlung .col-3:first-of-type {width: 100%; margin: 0 0 15px 0}
    #sicherheit-bezahlung .col-3 {width: 48%}
    nav ul li{display: none;}
    nav ul li:last-of-type {display: block;}
    .burger-nav {display: block;}
    .eyecatcher {background-size: 72% 100%}
    .bewertung {padding: 120px 5%}
}
@media screen and (max-width: 1050px) {
    /*CSS*/
    header::after {height: 700px}
    .head-img {height: 630px}
    .slide {padding-top: 200px; width: 300px; hyphens: auto;-o-hyphens: auto;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;}
    .slide .big {font-size: 35px; line-height: 30px}
    .wir-slide p {left: -63px;}
    .contact {left: 0}
    #arbeitsbedingungen {background-position: right 10% bottom, center}
}

@media screen and (max-width: 950px){
        #arbeitsbedingungen {background-position: right 5% bottom, center; background-size: 370px, cover}
    #arbeitsbedingungen .box:first-of-type, #arbeitsbedingungen .box:last-of-type {width: 100%}
    .benefits img {width: 40px}
    .flex {flex-wrap: wrap;}
    #sicherheit-bezahlung {margin-bottom: 200px; }
    #sicherheit-bezahlung .col-2 {width: 100%!important;}
    #sicherheit-bezahlung .col-3, #sicherheit-bezahlung:first-of-type {width: 30%!important; margin: 0!important}
    .white-bg {width: 0}
    .infobox {left: 0; bottom:-200px; height: 200px; width: 100%; right: inherit;}
    footer .col-2{width: 100%;margin-bottom: 15px}
    footer .col-4 {width: 48%;}
    
}

@media screen and (max-width: 810px){
    .head-img {width: 80%; height: 450px}
    .logo {padding: 15px 5%}
    .logo img {width: 100px}
    .slide {left: 30%!important; width: 60%; padding-top: 620px}
    header::after {height: 1000px}
    #start {  margin-top: 80px;}
    .col-2 {width: 100%}
    .wir-slide {width: 80%; height: auto;max-width: none; font-size: 20px; line-height: 25px; padding: 35px}
    .wir-slide p {position: static;transform: none;hyphens: auto;-o-hyphens: auto;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;}
    #warum-wir .col-2:first-of-type {padding: 150px 5%}
    .slide-wir .slick-slide {max-width: none;}
    .work {width: 100%;}
    #arbeitsbedingungen .box:first-of-type, #arbeitsbedingungen .box:last-of-type {width: 50%}
    #arbeitsbedingungen {background:  url(../images/lackiererei-aachen.jpg) no-repeat center / cover}
    #zukunft .left, #zukunft .right {width: 100%;}
    footer {hyphens: auto;-o-hyphens: auto;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;}
    #deine-perspektive .col-2:first-of-type{margin-bottom: 20px; }    
    .eyecatcher {background-size: cover; height: 450px;margin-bottom: 250px;}
    .text-box{left: 0;height: 250px; bottom: -250px; width: 100%; padding:50px 5%; }
    .burger-nav{top: 4px}
}

@media screen and (max-width: 600px){
    #sicherheit-bezahlung .col-3, #sicherheit-bezahlung:first-of-type {width: 100%!important; margin: 10px 0!important}
    #sicherheit-bezahlung .col-3 img {margin: 5px auto 20px}    
    #arbeitsbedingungen .box:first-of-type, #arbeitsbedingungen .box:last-of-type {width: 100%}
    .slide .big {font-size: 30px; line-height: 25px}
    
}
@media screen and (max-width: 550px){
    .logo {background: #fff; width: 50%}
    .head-img {height: 350px; left: inherit; right: 0}
    nav {background: #fff; width: 50%}
    .slide {padding-top: 500px; left: 25%!important; width: 68%}
    header::after {height: 700px; width: 100%; top: 200px; height: }
    .burger-nav b {color: #313131}
    .burger-nav-anim b{color: #fff;}
    .slick-prev, .slick-next {bottom: -120px;  }
    #start { margin-top: 120px;}
    .contact {bottom: 10%}
    .contact a {background: #cc2423}
    .infobox {height: 250px}
    .bewertung {width: 75%}
    .bewertung img {margin-bottom: 40px}
    .text-box {font-size: 50px; line-height: 45px}
    footer .col-4 {width: 100%; margin: 10px 0}
    

}


@media screen and (max-width: 360px){
    .btn {font-size: 15px;}
    .slide {width: 80%; left: 15%!important}
    
    .head-img {width: 88%}
    .eyecatcher {height: 350px}
    #sicherheit-bezahlung {margin-bottom: 300px;}
    .infobox {height: 300px; bottom: -300px}
    
}