/*
######################################
        Media-Queries
###################################### */

@media (max-width: 1280px) {
         #header { background-image: url(../images/header.png); background-size: 190% auto; }

         #header { height: 800px; }
         #header .hero { width: calc(100% - 30px); max-height: 400px; padding: 28% 0px 0px 30px; }
         #header .hero .headline { width: 50% !important; font-size: 1.2em; line-height: 1.2em; }

         /*
         #anfrage_form input[type="checkbox"] + label { width: calc(100% / 3 - 30px - 20px - 4px); margin: 20px 15px 20px 15px; padding: 20px 10px 20px 10px; }
         #anfrage_form input[type="radio"]:hover + label,
         #anfrage_form input[type="checkbox"]:hover + label { width: calc(100% / 3 - 20px - 20px - 4px); margin: 20px 10px 20px 10px; padding: 20px 10px 20px 10px; }

         #anfrage_form .anfrage_step_1 input[type="radio"] + label { width: calc(100% / 4 - 30px - 20px - 4px); height: auto; margin: 15px 15px 15px 15px; padding: 20px 10px 10px 10px; }
         #anfrage_form .anfrage_step_1 input[type="radio"]:hover + label { width: calc(100% / 4 - 20px - 20px - 4px); height: auto; margin: 15px 10px 15px 10px; padding: 20px 10px 10px 10px; }
         */

         #anfrage_form input[type="radio"] + label i .icon img,
         #anfrage_form input[type="checkbox"] + label i .icon img { width: 100px; height: auto; }
         #anfrage_form input[type="radio"] + label i .text,
         #anfrage_form input[type="checkbox"] + label i .text { height: 105px; overflow: hidden; }
         #anfrage_form input[type="radio"] + label i .text span,
         #anfrage_form input[type="checkbox"] + label i .text span { height: 55px; font-size: 0.7em; }
         #anfrage_form input[type="radio"] + label i .text b,
         #anfrage_form input[type="checkbox"] + label i .text b { padding: 10px 0px; font-size: 1.1em; }

         #anfrage_form div[class^="anfrage_step_2"] input[type="checkbox"] + label { width: calc(100% / 4 - 20px - 20px - 4px); margin: 10px 10px 20px 10px; padding: 20px 10px 10px 10px; }
         #anfrage_form div[class^="anfrage_step_2"] input[type="checkbox"]:hover + label { width: calc(100% / 4 - 20px - 0px - 4px); margin: 0px 0px 0px 0px; padding: 30px 10px 20px 10px; }
         #anfrage_form div[class^="anfrage_step_2"] input[type="checkbox"] + label i .text { height: 105px !important; }
         #anfrage_form div[class^="anfrage_step_2"] span { height: 55px !important; }
}

@media (max-width: 1080px) {
         h1 { font-size: 1.6em; }
         h2 { font-size: 1.4em; }
         h3 { font-size: 1.2em; }
         h4 { font-size: 1.8em; padding: 0px 10px; }

         #referenzen .item img  { max-width: 70%;  }
         #referenzen .item video  { height: auto; width: auto; max-width: 70%; }

         /*
         #referenzen .item { vertical-align: top; padding: 50px; width: calc(100vw - 50px - 100px); height: calc(100vh - 75px - 100px); }

         #referenzen .navi span.n { top: auto; bottom: 20px; right: 10px; }
         #referenzen .navi span.p { top: auto; bottom: 20px; left: 10px; } */

}

@media (max-width: 980px) {
         #header { height: 720px; }
         #header .hero { width: calc(100% - 20px); padding: 28% 0px 0px 20px; font-size: 0.9em; }

         #anfrage_form .anfrage_kontakt input { width: calc(100% - 0px - 20px); font-size: 1.2em; }
         #anfrage_form .anfrage_kontakt select { width: calc(100% - 0px - 0px); font-size: 1.2em; }
         #anfrage_form .anfrage_kontakt label.show { width: calc(100% - 0px - 20px); height: 20px; padding-top: 10px; }
         #anfrage_form .anfrage_kontakt hr { width: calc(100% - 0px - 0px); }

         #anfrage_form input[type="radio"] + label,
         #anfrage_form input[type="checkbox"] + label { width: calc(100% / 4 - 20px - 20px - 4px); margin: 10px 10px 20px 10px; padding: 20px 10px 10px 10px; }

         #anfrage_form input[type="radio"]:hover + label,
         #anfrage_form input[type="checkbox"]:hover + label { width: calc(100% / 4 - 0px - 20px - 4px); margin: 10px 0px 20px 0px; padding: 20px 10px 10px 10px; }

         #anfrage_form div[class^="anfrage_step_2"] input[type="checkbox"] + label { width: calc(100% / 3 - 20px - 20px - 4px); margin: 10px 10px 20px 10px; padding: 20px 10px 10px 10px; }
         #anfrage_form div[class^="anfrage_step_2"] input[type="checkbox"]:hover + label { width: calc(100% / 3 - 20px - 0px - 4px); margin: 10px 0px 20px 0px; padding: 20px 10px 10px 10px; }


         #anfrage_form label.show u { display: inline-block; float: right; padding-top: 5px; }
}

@media (max-width: 880px) {
         #anfrage_form input[type="radio"] + label i .text b,
         #anfrage_form input[type="checkbox"] + label i .text b { font-size: 1.0em !important; padding: 0px 0px 20px 0px; height: 20px; }

         #anfrage_form input[type="radio"] + label i .text span,
         #anfrage_form input[type="checkbox"] + label i .text span { height: 65px !important; font-size: 0.7em; line-height: 1.2em; }

         #anfrage_form div[class^="anfrage_step_2"] input[type="checkbox"] + label i .text b { padding: 10px 0px 10px 0px; }
}

@media (max-width: 800px) {
         #header { height: 670px; }
         #header { background-image: url(../images/header_mobile.png); background-size: 100% auto; }
         #header .hero { width: calc(100% - 0px); max-height: 400px; padding: 32% 0px 0px 0px; }
         #header .hero .headline { width: 80% !important; margin: 0px 10%; font-size: 1.1em; line-height: 1.2em; text-align: center; }
         #header .hero .headline a.button:link, #header .hero .headline a.button:visited, #header .hero .headline .button { padding: 10px 20px 10px 20px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);  }

         #anfrage_form div[class^="anfrage_step_"] .daten { width: calc(100% - 0px); margin: 0px 0px; padding: 20px 0px; }
         #anfrage_form div[class^="anfrage_step_2"] { padding: 0px 0px; width: calc(100% - 0px); }
         #anfrage_form div[class^="anfrage_step_2"] span { height: 42px !important; text-transform: none; }

         div[class^="anfrage_step_"] label.a { float: left !important;  }
         div[class^="anfrage_step_"] label.b { float: right !important; }
         div[class^="anfrage_step_"] input[type="radio"] + label,
         div[class^="anfrage_step_"] input[type="checkbox"] + label { width: calc(100% / 2 - 10px - 20px - 4px) !important; margin: 10px 0px 10px 0px !important; padding: 20px 10px 10px 10px !important; }
         div[class^="anfrage_step_"] input[type="radio"]:hover + label,
         div[class^="anfrage_step_"] input[type="checkbox"]:hover + label { width: calc(100% / 2 - 10px - 20px - 4px) !important; margin: 10px 0px 10px 0px !important; padding: 20px 10px 10px 10px !important; }

         div[class^="anfrage_step_"] input[type="radio"] + label i .text span,
         div[class^="anfrage_step_"] input[type="checkbox"] + label i .text span { height: 42px; overflow: hidden; font-size: 0.7em; }

         #anfrage_form .anfrage_step_3, #anfrage_form .anfrage_kontakt { width: calc(100% - 40px) !important; margin: 20px 0px !important; padding: 10px 20px 20px 20px !important; }


         li { width: calc(100% / 2 - 10px - 60px - 4px); }
         .refs .img_left, .refs .img_right { text-align: justify; display: block; }
         .refs b { text-align: center; }
         .refs img { width: calc(100% - 50px); max-width: 400px; height: auto; }
         .refs .img_right img, .refs .img_left img { display: block; float: none; margin: 0px auto 20px auto !important; }
}

@media (max-width: 640px) {
         #header { background-size: 115% auto; }
         #header { height: 620px; }

         .content { text-align: justify; line-height: 1.5em; }

         #anfrage_form .anfrage_kontakt label.show { width: calc(100% - 0px - 20px); height: 20px; padding-top: 0px; }
         #anfrage_form .anfrage_kontakt .l, #anfrage_form .anfrage_kontakt .r { width: calc(100% - 0px); float: none; }
         #anfrage_form .anfrage_kontakt .r { margin-top: 20px; border-top: 3px dotted var(--font-color-light); }
         #anfrage_form .anfrage_kontakt input[type="submit"] { margin-top: 20px; width: 100%; font-size: 1.1em; }
         #anfrage_form div[class^="anfrage_step_2"] input[type="checkbox"] + label i .text b { font-size: 1.0em; height: 30px; }

         div[class^="anfrage_step_3"] textarea { height: 300px; }
         a.button.font-bigger { font-size: 1.3em !important; }

         #faq .item h5 { font-size: 1.0em; }

}

@media (max-width: 480px) {
         li { width: calc(100% / 1 - 10px - 60px - 4px); }
         a.button.font-bigger { font-size: 1.1em !important; }

         #header { height: 590px; }
         #header .hero { width: calc(100% - 0px); max-height: 400px; padding: 36% 0px 0px 0px; }
         #header .hero .headline { width: 90% !important; margin: 0px 5%; font-size: 1.0em; line-height: 1.2em; text-align: center; }

         div[class^="anfrage_step_"] input[type="radio"] + label,
         div[class^="anfrage_step_"] input[type="checkbox"] + label { width: calc(100% / 2 - 10px - 10px - 4px) !important; margin: 10px 0px 10px 0px !important; padding: 20px 5px 10px 5px !important; }
         div[class^="anfrage_step_"] input[type="radio"]:hover + label,
         div[class^="anfrage_step_"] input[type="checkbox"]:hover + label { width: calc(100% / 2 - 10px - 10px - 4px) !important; margin: 10px 0px 10px 0px !important; padding: 20px 5px 10px 5px !important; }

         #anfrage_form input[type="radio"] + label i .text,
         #anfrage_form input[type="checkbox"] + label i .text { font-size: 0.9em; }
         #anfrage_form input[type="radio"] + label i .text b,
         #anfrage_form input[type="checkbox"] + label i .text b { padding: 5px 0px; font-size: 1.0em; height: 20px;  }

         #anfrage_form div[class^="anfrage_step_2"] span { height: 50px !important; }

         #anfrage_form .anfrage_kontakt input[type="submit"] { font-size: 1.0em; }

         #anfrage_form .h3 {  width: calc(100% - 10px); font-size: 1.4em; margin: 0px 0px 10px 0px; padding: 10px 10px; }
         #anfrage_form .h3 i { width: calc(100% - 20px); padding: 0px 10px; font-size: 0.6em;  margin: 10px 0px 10px 0px; }

         #anfrage_form .anfrage_step_1 .font-bigger { font-size: 1.2em !important; }
         #anfrage_form .anfrage_step_3 { width: calc(100% - 20px) !important; padding: 10px 10px 0px 10px !important; }
         #anfrage_form .anfrage_step_3 textarea { width: calc(100% - 40px);  margin: 0px 5px 0px 5px; }
}