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

.anfrage-page1, .anfrage-page2 {width: 100%;}

.hinweis-box {width: 100%; background-color: #00adef; color: #ffffff; text-align: center; padding: 40px 0; margin-bottom: 80px; font-size: 22px;}

.vorgang-master {width: 100%; margin-bottom: 80px;}
.vorgang-box {width: 31.42857124%; max-width: 440px; float: left; margin-left: 2.85714284%; padding-bottom: 20px; text-transform: uppercase; line-height: 60px; display: inline-flex;}
.vorgang-box:first-child {margin-left: 0;}
.vorgang-master .aktuell {border-bottom: 5px #00adef solid; color: #032b44}
.vorgang-master .nextstep {border-bottom: 5px #dddddd solid; color: #dddddd;}
.aktuell .fa, .nextstep .fa {font-size: 60px; margin-right: 30px; font-weight: 100;}
.aktuell .fa {color: #00adef;}
.nextstep .fa {color: #dddddd;}
.vorgang-box .checker {max-width: 50px; max-height: 50px; margin-right: 30px;}

.kennung-master {width: 100%; background-color: #f3f3f3; padding: 45px 0; text-transform: uppercase;}
.greybar {width: 100%; padding: 10px 0; background-color: #f3f3f3; margin: 50px 0 0 0;}
.kennung1, .kennung2, .kennung3, .kennung4, .kennung5 {float: left;}
.kennung1 {width: 14.99999991%; max-width: 210px;}
.kennung2 {width: 17.85714275%; max-width: 250px;}
.kennung3 {width: 41.07142833%; max-width: 575px;}
.kennung4 {width: 21.78571416%; max-width: 305px;}
.kennung5 {width: 4.28571426%; max-width: 60px;}
.kennung-artikel {width: 100%; padding: 50px 0; border-bottom: 1px #b8b8b8 solid;}
.prod-desciption {width: 50%;}
.kennung2 .image {width: 80%; max-width: 165px;}
.kennung1 input.checkbox[type="checkbox"] {display: none;}
.kennung1 input.checkbox[type="checkbox"] + label::before {width: 32px; height: 32px; border-radius: 0; border: 1px #b8b8b8 solid; background-color: #ffffff; display: block; content: "";}
.kennung1 input.checkbox[type="checkbox"]:checked+label::before {background-color: #00adef;}
.kennung4 .anzahl {line-height: 56px; height: 56px; padding: 0 25px; border: 1px #b8b8b8 solid; width: 90px;}
.kennung5 .fa {font-size: 30px; color: #b8b8b8; margin: 0 auto; cursor: pointer;}
.kennung5 .fa:hover {color: #00adef;}

.kennung21, .kennung22 {float: left; box-sizing: border-box; padding: 0 0 0 30px;}
.kennung21 {width: 59.6428571428%; max-width: 835px;}
.kennung22 {width: 40.3571428571%; max-width: 565px;}
.anfragedetails {width: 100%; padding: 50px 0;}
/*.anfrageformfeld, .anfrageliste {float: left;}*/
.anfrageformfeld {width: 59.6428571428%; max-width: 835px; box-sizing: border-box; /*border-right: 1px #b9b9b9 solid; padding-right: 60px;*/ margin: 0 auto;}
.anfrageliste {width: 40.3571428571%; max-width: 565px; box-sizing: border-box; padding-left: 60px;}
.anfrageformfeld select, .anfrageformfeld .smalfield, .anfrageformfeld .normfield {line-height: 70px; height: 70px; font-size: 18px; box-sizing: border-box; border: 1px #b9b9b9 solid; color: #032b44; padding: 0 20px; margin-bottom: 30px;}
.anfrageformfeld textarea {height: 225px; font-size: 18px; box-sizing: border-box; border: 1px #b9b9b9 solid; color: #032b44; padding: 25px 20px; margin-bottom: 30px; width: 100%; font-family: 'Source Sans Pro', sans-serif;}
.anfrageformfeld select, .anfrageformfeld .normfield {width: 100%;}
.anfrageformfeld .smalfield {width: 48.38709677%; float: left; margin-left: 3.225806451%;}
.anfrageformfeld .smalfield:first-child {margin-left: 0;}

.anfrageliste .list {width: 100%; max-width: 505px;}
.anfrageliste .list::after {content: ""; display: table; clear: left;}
.anfrageliste .image {width: 32.67326732673267%; max-width: 165px; float: left;}
.anfrageliste .discription {width: 61.38613861386139%; max-width: 310px; margin-left: 5.940594059405941%; float: left;}

/* Warenkorb Anzahl */
.anzahl-basket {position: absolute; top: -10px; right: 5px; background-color: #00adef; color: #ffffff; text-align: center; border-radius: 8px; padding: 0 5px; font-size: 12px; font-weight: bold;}
.anzahl-basket a {color: #ffffff; text-decoration: none;}
.anzahl-basket:hover {background-color: #032b44;}

@media screen and (max-width: 700px){
	.anfrage-page2 .vorgang-master .aktuell:first-child {display: none;}
	.vorgang-master {margin-bottom: 0px;}
	.vorgang-master .nextstep {display: none;}
	.vorgang-box {width: 100%; max-width: none; float: none; margin-left: 0;}
	.vorgang-box:last-child {line-height: 0; padding-bottom: 0;}
	.kennung-master {display: none;}
	.kennung1, .kennung2, .kennung3 {float: none; width: 100%; max-width: 500px; margin: 0 auto;}
	.kennung1 input.checkbox[type="checkbox"] + label::before {margin: -23px 0 20px 0;}
	.kennung2 .image {width: 100%; max-width: none;}
	.kennung2, .kennung3 {margin-bottom: 20px;}
	.prod-desciption {width: 100%;}
	.kennung4, .kennung5 {width: 50%; max-width: none;}
	.kennung4 {border-right: 1px #e2e2e2 solid; padding: 10px 20px 10px 0; box-sizing: border-box; text-align: right;}
	.kennung5 {box-sizing: border-box; padding: 23px 0 0 20px;}
	.anfrageformfeld .smalfield {width: 100%; float: none; margin-left: 0;}
	.anfrageliste .image {width: 100%; max-width: none; float: none; margin-bottom: 20px;}
    .anfrageliste .discription {width: 100%; max-width: none; margin-left: 0; float: none; padding-bottom: 20px; border-bottom: 1px #e2e2e2 solid;}
}
@media screen and (max-width: 620px){
	.anfrageformfeld {padding-right: 20px;}
	.anfrageliste {padding-left: 20px;}
}
@media screen and (max-width: 500px){
	.anfrageformfeld, .anfrageliste {float: none;}
	.anfrageformfeld {width: 100%; max-width: none; border-right: none; padding-right: 0px;}
    .anfrageliste {width: 100%; max-width: none; padding-left: 0px;}
}