@charset "utf-8";
/* CSS Document */


body {margin: 0; padding: 0; font-family: 'Oswald', sans-serif; font-size: 18.5px; color: #121212;}
img {width: 100%; height: auto; border: 0 none; display: block;}
h1, h2, h3 {color: #3786de; margin: 0 0 40px 0;}
h1 {font-size: 28px;}
h2 {font-size: 25px;}
h3 {font-size: 20px;}
hr {height: 3px; border: 0; color: #3786de; background-color: #3786de; width: 180px; margin: 30px auto;}
.hr-top100 {height: 3px; border: 0; color: #3786de; background-color: #3786de; width: 180px; margin: 100px auto 30px auto;}
.hr-bottom100 {height: 3px; border: 0; color: #3786de; background-color: #3786de; width: 180px; margin: 30px auto 100px auto;}
.blau-btn {display: table; padding: 8px 10px; color: #ffffff!important; text-decoration: none; background-color: #3786de; border: 3px #3786de solid; border-radius: 8px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.blau-btn:hover {background-color: transparent; color: #3786de!important; -webkit-transition: all .3s ease; transition: all .3s ease;}
.middle {margin: 0 auto;}

.info-icon {width: 30%; max-width: 118px; margin: 0 auto 30px auto;}
.blau {color: #3786de;}
.smal-font {font-size: 15px;}




.header {width: 100%; padding: 15px 0; border-bottom: 3px #121212 solid;}
.header-inner {width: 90%; max-width: 1100px; margin: 0 auto; position: relative;}
.brand {width: 40%; max-width: 240px;}

.header-smal {width: 100%; padding: 10px 0; border-bottom: 3px #121212 solid; position: fixed; top: -150px; left: 0; background-color: #f5f5f5; z-index: 900000; -webkit-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s;}
.brand-smal {width: 40%; max-width: 160px;}
.present {top: 0px; -webkit-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s;}

.slider-start {width: 100%; height: 475px; background-image: url("../../../images/slider/strasse-startseite.jpg"); background-position: center center; background-size: cover; background-repeat: no-repeat; padding: 1px 0; border-bottom: 3px #121212 solid; position: relative;}
.slider-start-inner {width: 90%; max-width: 1100px; margin: 0 auto; position: relative; height: 100%; padding: 6% 0 0 0;}
.slider-start-inner h2 {color: #ffffff; font-size: 40px; display: table; margin: 0 auto; text-shadow: 4px 8px 8px #000000;}
.slider-icons {width: 80%; max-width: 560px; margin: 2% auto 0 auto;}
.seit20jahren {width: 50%; max-width: 144px; position: absolute; right: 0; bottom: 50px;}
@media screen and (max-width: 570px){
.slider-start-inner h2 {text-align: center;}
.seit20jahren {right: 50%; margin-right: -72px; bottom: 0;}
}

.top-kontakt {position: absolute; top: -15px; right: 0; background-color: #3786de; color: #ffffff; padding: 5px 10px 5px 20px; font-size: 14px; border-bottom-right-radius: 8px; border-top-left-radius: 8px;}
.top-kontakt::before {content: url("../../../images/elemente/achtung.png"); position: absolute; left: -20px; top: 5px;}
@media screen and (max-width: 580px){
.top-kontakt {display: none;}
.brand {max-width: 160px;}
}

.headbanner {width: 100%; background-image: url("../../../images/slider/strasse-startseite.jpg"); background-position: center center; background-size: cover; background-repeat: no-repeat; border-bottom: 3px #121212 solid; position: relative;}
.headbanner-inner {width: 90%; max-width: 1100px; margin: 0 auto; padding: 50px 0 70px 0;}
.headbanner-inner ul {list-style-type: none; margin: 0 0 0 -40px;}
.headbanner-inner li {float: left; color: #ffffff;}
.headbanner-inner a {background-color: #3786de; color: #ffffff; padding: 2px 4px; text-decoration: none;}
.headbanner-inner a:hover {background-color: #ffffff; color: #3786de;}


/*Menu*/
.navi::after, .navi::before {content: ""; display: table;}
.navi::after {clear: both;}
.navi {display: table; position: absolute; bottom: 2px; right: 0; z-index: 888888; font-family: 'Oswald', sans-serif;}
.navi ul {list-style-type: none; padding: 0; margin: 0;}
.navi ul li {float: left; padding: 8px 10px; background-color: transparent; position: relative; color: #121212; font-size: 20px; margin-left: 4px;}
.navi ul li:hover {border-bottom: 3px #3786de solid; color: #3786de;}
.navi ul li:hover a {color: #3786de;}
.navi ul li:hover ul li a {color: #121212;}
.navi ul li:hover ul li:hover a {color: #3786de;}
.navi ul li a {color: #121212; text-decoration: none; font-size: 20px;}
.navi ul li a:hover {color: #3786de;}
.navi ul li ul li {float: none; margin-left: 0; position: relative; font-size: 18px; background-color: #f8f8f8;}
.navi ul li ul li a {font-size: 16px;}
.navi ul li ul, .navi ul li ul li ul {display: none;}
.navi ul li:hover ul {display: block; position: absolute; top: 42px; left: 0px; border-top: 5px transparent solid; width: 230px;}
.navi ul li:hover ul li ul {display: none;}
.navi ul li ul li:hover ul {display: block; position: absolute; top: 0; left: 100%; border-left: 4px transparent solid; border-top: 0;}

.separator::after {font-family: 'FontAwesome'; content: "\f107"; margin-left: 5px;}
.navi ul li ul li:hover {background-color: #3786de; color: #ffffff;}
.navi ul li.active {border-bottom: 3px #3786de solid;}
.navi ul li.active a {color: #3786de;}
.navi .active a, .navi .active {color: #3786de;}
.navi ul li.current a {color: #3786de!important;}

.navi-pos {top: -3px;}

.blue-btn {}
.blue-btn {color: #3786de!important; border-bottom: 3px #3786de solid!important;}
.blue-b-btn a {color: #3786de!important;}
.navi li.blue-btn a {color: #3786de;}

.mobil-nav-btn {display: none;}
.close-btn-menu {width: 30%; max-width: 50px; margin: 50px auto; cursor: pointer;}

@media screen and (max-width: 950px){
.navi {display: none;}
.mobil-nav-btn {width: 70%; max-width: 50px; position: absolute; bottom: 10px; right: 0; cursor: pointer; display: block;}
}


.mobil-nav-master {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(55,133,222,0.95); display: none; z-index: 910000;}
.mobil-nav-inner {display: table; box-sizing: border-box; padding: 0; height: 70%; margin: 0 auto; overflow-x: hidden;}
.mobil-nav-on {display: block;}
.mobil-nav-inner ul {list-style-type: none;}
.mobil-nav-inner ul li {line-height: 40px; margin-left: -40px;}
.mobil-nav-inner ul li a {color: #ffffff; text-decoration: none; font-size: 26px;}
.mobil-nav-inner .blue-btn {background-color: transparent!important; color: #ffffff!important;}
.mobil-nav-inner .blue-b-btn a {color: #ffffff!important;}

/* Content */
.content-master {width: 100%; padding: 100px 0; position: relative;}
.content {width: 90%; max-width: 1100px; margin: 100px auto; position: relative;}
.content p {margin: 0 0 40px 0;}

.teiler::after, .leftright::after {content: ""; display: table; clear: left;}
.teiler-l, .teiler-r {width: 50%; max-width: 550px; box-sizing: border-box;}
.teiler-l {padding: 0 40px 0 0; float: left;}
.teiler-r {padding: 30px 0 30px 40px; float: left; border-left: 3px #121212 solid;}

 .left, .right {width: 50%; float: left; box-sizing: border-box; max-width: 550px;}
 .left {padding: 0 30px 0 0;}
 .right {padding: 0 0 0 30px;}
@media screen and (max-width: 890px){
.teiler-l, .teiler-r {width: 100%; max-width: none; float: none;}
.teiler-l {padding: 0 0 40px 0;}
.teiler-r {padding: 40px 0 0 0; border-left: none; border-top: 3px #121212 solid;}
}
@media screen and (max-width: 700px){
.left, .right {width: 100%; float: none; max-width: none;}
.left {padding: 0;}
.right {padding: 30px 0 0 0;}
}


/* Klassen Startseite */
.klassen-start-master {width: 90%; max-width: 1100px; margin: 100px auto;}
.klassen-start-master h2 {margin: 0 0 40px 0;}
.klassen-box {margin-bottom: 40px;}
.klassen-box::after, .klassen-master::after, .fahrzeuge-master::after {content: ""; display: table; clear: left;}
.kb {width: 22.27272705%; max-width: 245px; float: left; margin-left: 3.6363636%; box-sizing: border-box; padding: 15px 10px; text-align: center; background-color: #e6e6e6; border-radius: 10px; border: 3px #e6e6e6 solid; font-size: 17px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.kb:first-child {margin-left: 0;}
.kb img {display: table; max-width: 100px; margin: 0 auto 20px auto; border: 3px #ffffff solid; border-radius: 8px;}
.kb:hover, .kb-goon:hover {border: 3px #3786de solid; background-color: #ffffff; -webkit-transition: all .3s ease; transition: all .3s ease;}
.kb-goon {width: 22.27272705%; max-width: 245px; float: left; margin-left: 3.6363636%; box-sizing: border-box; padding: 15px 10px; text-align: center; border-radius: 10px; border: 3px transparent solid; font-size: 17px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.kb-goon a {color: #ffffff;}
.kb-goon a:hover {color: #3786de!important;}
/* Klassen Content */
.klassen-master {width: 100%; max-width: 900px; margin: 0 auto; box-sizing: border-box; padding: 30px; background-color: #e6e6e6; border-radius: 10px;}
.klasse-left, .klasse-right {float: left; box-sizing: border-box;}
.klasse-left {width: 22.2222222%; max-width: 200px; padding: 30px 50px 30px 0;}
.klasse-left img {max-width: 150px; border-radius: 8px; border: 3px #ffffff solid;}
.klasse-right {width: 77.7777777%; max-width: 900px; border-left: 3px #121212 solid; padding: 30px 0 30px 50px;}
.klasse-right ul {margin: 0 0 30px 30px;}

.klassenauswahl {max-width: 900px; width: 100%; box-sizing: border-box; padding: 5px; background-color: rgba(255,255,255,0.95); margin: 30px auto; border-radius: 8px; -webkit-box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.75); box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.75);}
.klassenauswahl::after {content: ""; display: table; clear: left;}
.klassenauswahl a {float: left; margin-left: 0.56179775%; max-width: 76.36363636px; display: block; width: 8.580183818%;}
.klassenauswahl a:first-child {margin-left: 0;}
.klassenauswahl a:hover {opacity: 0.75;}

.fahrzeuge-master {width: 100%; max-width: 1100px; margin: 0 auto; box-sizing: border-box; padding: 30px; background-color: #e6e6e6; border-radius: 10px;}
@media screen and (max-width: 1058px){
.kb {height: 280px;}
}
@media screen and (max-width: 695px){
.kb, .kb-goon {height: auto; float: none; width: 100%; margin-left: auto; margin-right: auto; margin-top: 20px;}
.klassen-box {margin-bottom: 20px;}
.kb:first-child {margin-left: auto; margin-top: 0;}
}
@media screen and (max-width: 650px){
.klasse-left, .klasse-right {float: none;}
.klasse-left {width: 100%; max-width: none; padding: 30px 0;}
.klasse-left img {margin: 0 auto;}
.klasse-right {width: 100%; border-left: none; border-top: 3px #121212 solid; padding: 30px 15px;}
}



/*Parallax*/
.parallax-unit {background-attachment: fixed; background-position: center center; background-size: cover; width: 100%; height: auto; padding: 100px 0; overflow: hidden; position: relative; z-index: 0; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size:cover; background-repeat: no-repeat;}
.parallax-inner {width: 90%; max-width: 800px; text-align: center; color: #ffffff; text-shadow: 4px 8px 8px #000000; margin: 0 auto;}
.parallax-inner h3 {font-size: 30px;}
.p1 {background-image: url(../../../images/slider/parallax.jpg);}


/* Footer */
.footer {width: 100%; padding: 30px 0; background-color: #121212;}
.footer-inner {width: 90%; max-width: 1100px; margin: 0 auto;}
.footer-box::after {content: ""; display: table; clear: left;}
.footer-kontakt, .footer-form {width: 47.72727225%; box-sizing: border-box; float: left; color: #ffffff;}
.footer-form {margin-left: 4.5454545%;}
.footer-map {width: 100%; margin-top: 30px;}
.footer-kontakt hr, .footer-form hr {height: 3px; border: 0; color: #3786de; background-color: #3786de; margin: 30px 0; width: 100%;}
.footer-kontakt p {margin: 0 0 40px 0;}
.footer-logo {width: 40%; max-width: 180px; margin-bottom: 40px;}

.formfield {width: 100%;}
.formfield .bfQuickMode section input[type="text"], .formfield .bfQuickMode section textarea, .formfield .bfQuickMode section select {width: 100%; box-sizing: border-box; padding: 0 10px; border: 0; height: 40px; line-height: 40px; font-family: 'Oswald', sans-serif; font-size: 17px; color: #3786de;}
.formfield .bfQuickMode .bfSubmitButton {border: 3px #3786de solid; border-radius: 8px; color: #ffffff; background-color: #3786de; padding: 8px 10px; -webkit-transition: all .3s ease; transition: all .3s ease; float: left; margin: 30px 0 0 5px; cursor: pointer;}
.formfield .bfQuickMode .bfSubmitButton:hover {background-color: transparent; -webkit-transition: all .3s ease; transition: all .3s ease;}

.last-line {padding: 0 0 20px 0; text-align: center; color: #e2e2e2; font-size: 14px;}
.last-line a {color: #ffffff; text-decoration: underline;}
.last-line a:hover {color: #3786de;}
@media screen and (max-width: 580px){
.footer-kontakt, .footer-form {width: 100%; float: none; margin-left: auto; margin-right: auto; margin-bottom: 20px;}
.footer-form {margin-left: auto;}
.formfield .bfQuickMode section input[type="text"], .formfield .bfQuickMode section textarea, .formfield .bfQuickMode section select {max-width: 100%!important; min-width: 100%!important;}
}

.profil {background-image: url("../../../images/elemente/profil.png"); position: absolute; top: 100px; left: 0; height: 100%; width: 100%; background-position: left bottom; background-size: 50% 50%; background-repeat: no-repeat;}

.aktuelles-box {background-color: #e6e6e6; padding: 30px; border-radius: 10px; box-sizing: border-box;}