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

@media (max-width: 1600px) {
         .in { width: calc(100% - 80px); max-width: calc(1600px - 80px); padding: 0px 40px; }

         #header { min-height: 750px; background-position: -50px bottom !important; }
         #hero_rechner { left: calc(45% + 0px); width: calc(55% - 0px - 40px); margin: 25px 0px 0px 0px; }
         #rechner_datenschutz_label { left: calc(45% - 40px); margin: 500px 0px 0px -260px; }
}

@media (max-width: 1400px) {
         #header { min-height: 665px; min-height: 715px; background-size: auto 80%; background-position: -50px bottom !important; }
         #hero_rechner { height: 510px; height: 570px; left: calc(45% + 0px); width: calc(55% - 0px - 40px); }

         #hero_rechner .headline { width: calc(100% - 40px); height: 60px; padding: 10px 20px 0px 20px; font-size: 1.2em; }
         #hero_rechner .banderole { width: 120px; height: 75px; background-size: 100%; margin: -74px -4px 0px 0px; }

         #rechner_datenschutz_label { left: calc(45% - 50px); margin: 430px 0px 0px -250px; }


         #formular { height: 570px; }
         #formular div[id^="form_step"] label, #formular div[id^="form_step"] .label { width: calc((100% / 3) - (30px / 3) - 5px); height: 90px; padding: 0px 0px 5px 0px; margin: 8px 0px 8px 0px; }
         #formular div[id^="form_step"] label:nth-child(3n + 2), #formular div[id^="form_step"] .label:nth-child(3n + 2) { margin: 8px 15px 8px 15px; }
         #formular #form_step_12 .label { height: 250px; }
         #formular #form_step_12 .label { padding-top: 10px; }
         #formular .hilfe { background-size: 24px;  margin: 4px 0px 4px 0px; width: calc(100% - 40px); padding: 3px 30px 3px 10px; }
         #formular .datenschutz { display: block; }
         #formular #box_datenschutz { margin: 2px auto; padding: 5px 0px !important; }
         #formular input[type="submit"] { width: 315px; margin-top: -5px; }
         #formular #daten_info .tarif_info u, #formular .datenschutz b { display: inline-block; margin-bottom: 0px; }
         #formular .select_check { margin: -80px 0px 0px calc((( (100% / 3) - 10px )*0.28) - 0px); }
         #formular #form_step_2 .select_check { margin: -97px 0px 0px calc((( (100% / 3) - 10px )*0.28) - 0px); }
         .kill { display: none; }
}

@media (max-width: 1200px) {
         #header { background-image: var(--hero-image-ohne); }

         #versicherer .slide_logo { width: 100%; }

         #site ul { margin: 0px; padding: 0px; }
         #site ul li { font-size: 1.4em; padding: 5px 0px 0px 70px;  }
         #site .big { font-size: 1.0em !important; }
         #site .tarifvergleich.bigger { font-size: 1.2em !important; }
         #site .tarifvergleich.bigger .button { font-size: 1.2em; padding: 10px 60px 10px 20px; }
}

@media (max-width: 1024px) {
         .in { width: calc(100% - 60px); max-width: calc(1600px - 60px); padding: 0px 30px; }

         #hero_rechner { height: 500px;  height: 560px; left: calc(100% - 560px); width: 520px; }
         #hero_rechner .fortschritt, #hero_rechner .fortschritt span { height: 6px; }
         #rechner_datenschutz_label { left: calc(100% - 600px); background-size: 100%, 40px; width: 220px; height: 36px; padding: 4px 0px 0px 45px; margin: 450px 0px 0px -180px; font-size: 0.5em; }

         #formular .select_check { margin: -82px 0px 0px /*62px*/ calc((( (100% / 3) - 10px )*0.28) - 0px); }
         #formular #form_step_2 .select_check { margin: -100px 0px 0px calc((( (100% / 3) - 10px )*0.28) - 0px); }
         #formular .datenschutz img { width: 45px; height: 45px; }
         #formular .datenschutz { font-size: 0.70em; }
}

@media (max-width: 920px) {
         #header .title { font-size: 0.6em; }
         #header { background-size: auto 75%; }

         #site .l.w50, #site .r.w50 { float: none; width: calc(100% - 0px); text-align: justify !important; }
         #site .r.w50.pad_top { margin-top: -20px; padding-top: 20px; border-top: 5px var(--main-color) dotted; }
         #site .l.w50 .big { text-align: justify !important; }

         #bewertungen { font-size: 0.9em; }

         #footer .l, #footer .r { float: none; width: calc(100% - 0px); text-align: center !important; }
         #footer .l { margin-bottom: 10px; }
}

@media (max-width: 800px) {
         #header { background-image: var(--hero-image-mobile); background-position: center 150px !important; background-size: auto 500px; padding-bottom: 20px; height: auto; }
         #header .top { height: auto; }
         #header .top .in { width: 100%; max-width: 100%; padding: 0px; margin: 0px; }
         #header .logo { width: 100%; height: auto; margin-top: 10px; text-align: center;  }
         #header .logo img { width: 400px; height: auto; }
         #header .title { background-color: var(--main-color); width: calc(100% - 0px); margin-top: 5px; font-size: 0.6em; text-align: center; }
         #header .title h1 { color: #FFFFFF; text-align: center; margin: 5px 0px; }
         #header .title h2 { text-align: center; margin: 5px 0px; }

         #formular { overflow: visible; height: auto; }
         #hero_rechner { position: relative; float: none; height: auto !important; left: auto; width: calc(100% - 40px); margin: 300px auto 20px auto; padding: 0px 0px 10px 0px; }
         #formular #daten_info { margin-bottom: 20px; }
         #formular .datenschutz img { margin-bottom: 10px; }

         #rechner_datenschutz_label { display: none; }
         .kill { display: block; }
}

@media (max-width: 680px) {
         #header { background-position: center 120px !important; background-size: auto 400px; }
         #header .logo img { width: 300px; }
         #header .title { font-size: 0.5em; }

         #hero_rechner { width: calc(100% - 20px); margin: 260px auto 20px auto; }
         #hero_rechner .banderole { display: none; }

         #site .tarifvergleich.bigger { font-size: 1.0em !important; }

         #formular { font-size: 1.0em; }
         #formular div[id^="form_step"] label, #formular div[id^="form_step"] .label { width: calc((100% / 3) - (20px / 3) - 5px); height: 90px; padding: 0px 0px 5px 0px; margin: 6px 0px 6px 0px; }
         #formular div[id^="form_step"] label:nth-child(3n + 2), #formular div[id^="form_step"] .label:nth-child(3n + 2) { margin: 6px 10px 6px 10px; }
         #formular div[id^="form_step"] label > input[type="radio"] + img { width: 44px; }
         #formular div[id^="form_step"] label span { font-size: 0.70em; }

         #formular #daten_info .counter { font-size:2.0em; }
         #formular #form_step_10 .label.karte { width: calc(100% - 2px); height: 280px; }
         #formular #karte { height: 140px; width: 100%; background: #FFFFFF url(../images/karte.png) center top no-repeat; background-size: 90px auto; padding: 0%; padding-top: 120px; text-align: center; }
         #formular #karte input[name="region_plz"] { font-size: 1.1em; width: 70px; margin: 2px; }
         #formular #karte input[name="region_ort"] { font-size: 1.1em; width: calc(100% - 70px - 50px - 4px); margin: 2px; }
         #formular #karte .button { margin: 5px auto 10px auto; width: calc(100% - 66px - 0px - 0px); }

         #formular #form_step_12 .label { width: calc(100% - 2px - 20px); padding: 10px; height: auto; }
         #formular input { width: calc(100% - 17px - 5px); border: 1px rgba(0,0,0,0.3) solid; padding: 3px 4px 2px 6px !important; margin: 2px 5px 3px 0px !important; }
         #formular input[name="vorname"], #formular input[name="nachname"] { width: calc(50% - 17px - 5px) !important; }
         #formular input[name="strasse"] { width: calc(100% - 34px - 70px - 10px); }
         #formular input[name="nr"] { width: 70px; }
         #formular input[name="ort"] { width: calc(100% - 34px - 60px - 10px); }
         #formular input[name="plz"] { width: 60px; }
         #formular input[name="telefon"], #formular input[name="email"] { width: calc(100% - 17px - 5px); }
         #formular input[type="submit"] { width: calc(100% - 2px); padding: 10px 0px 10px 0px !important; font-size: 1.1em; text-align: center; border: 0px rgba(0,0,0,0.3) solid;  }
         #formular .select_check { margin: -72px 0px 0px /*62px*/ calc((( (100% / 3) - 10px )*0.28) - 5px); }
         #formular #form_step_2 .select_check { margin: -90px 0px 0px calc((( (100% / 3) - 10px )*0.28) - 5px); }

         #formular #button_panel { height: auto; min-height: 40px; }
}

@media (max-width: 480px) {
         .in { width: calc(100% - 40px); max-width: calc(1600px - 40px); padding: 0px 20px; }

         #header .logo img { width: 280px; }
         #header .title { font-size: 0.4em; }
         #header .title h2 { font-size: 2.2em; }

         #hero_rechner .headline { height: auto; padding: 10px 20px 10px 20px; font-size: 1.0em; }

         #formular div[id^="form_step"] label, #formular div[id^="form_step"] .label { width: calc((100% / 2) - 10px); height: 80px; padding: 10px 0px 5px 0px; margin: 6px 0px 6px 0px; }
         #formular div[id^="form_step"] label:nth-child(3n + 2), #formular div[id^="form_step"] .label:nth-child(3n + 2) { margin: 6px 0px 6px 0px; }
         #formular div[id^="form_step"] label:nth-child(2n + 2), #formular div[id^="form_step"] .label:nth-child(2n + 2) { margin: 6px 10px 6px 0px; }

         #formular .select_check { margin: -82px 0px 0px /*62px*/ calc((( (100% / 2) - (20px / 2) )*0.28) - 0px); }
         #formular #form_step_2 .select_check { margin: -100px 0px 0px calc((( (100% / 2) - (20px / 2) )*0.28) - 0px); }

         #formular input { padding: 6px 4px 4px 6px !important; font-size: 1.1em !important; }
         #formular input[type="submit"] { padding: 10px 0px 10px 0px; background-image: none; text-align: center; font-size: 0.9em !important; font-weight: bold; }
}