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

@media (max-width: 1800px) {
         #startpage .text { font-size: 1.2em; }
         #startpage .text li { width: calc((100% / 3) - 40px - 20px); padding: 0px 0px 0px 40px; line-height: 35px; background-size: 32px 32px; font-size: 1.2em; }
}

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

         #startpage .logo { position: absolute; z-index: 100; top: 20px; left: 40px; width: 240px; height: 150px; }
         #startpage .footer { left: 40px; }
         #startpage .text { font-size: 1.0em; width: calc(50% - 50px - 40px);top: calc(55% - (350px / 2)); }


         #startpage .text li { width: calc((100% / 3) - 30px - 20px); padding: 0px 0px 0px 30px; line-height: 35px; background-size: 25px 25px; font-size: 1.2em; }
}

@media (max-width: 1280px) {
         #startpage .text { font-size: 1.0em; top: 200px; }

         #startpage .text button { padding: 20px 30px 15px 30px; margin: 10px 0px 0px 0px; line-height: 40px; }
         #startpage .text button b { line-height: 40px; font-size: 1.8em; }
         #startpage .text button img { width: 40px; height: 40px; }
}

@media (max-width: 1200px) {
         #startpage .text h1 { font-size: 1.5em; }
         #startpage .text h1 b { font-size: 2.4em; }
}

@media (max-width: 1080px) {
         #startpage { background-position: right top; }
         #startpage .text { width: calc(55%); }
         #startpage .layer1 { z-index: 51; width: calc(65vw + 60px); }
         #startpage .layer2 { z-index: 52; width: calc(65vw + 30px); }
         #startpage .layer3 { z-index: 53; width: calc(65vw + 0px); background: rgba(130,179,59,1.0) !important; }

         #startpage .testsieger { right: 30px; bottom: 30px; width: 200px; height: 200px; }
         #startpage .testsieger img { width: 200px; height: 200px; }
}

@media (max-width: 920px) {
         #startpage .text button { padding: 15px 20px 10px 20px; margin: 20px 0px 0px 0px; line-height: 30px; }
         #startpage .text button b { line-height: 30px; font-size: 1.8em; }
         #startpage .text button img { width: 30px; height: 30px; }

         #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; }
         #site ul { margin: 0px; padding: 0px; }

         #rechner_datenschutz_label { width: 170px; }
         #rechner_datenschutz_label span { width: 155px; font-size: 0.55em; padding-top: 10px; }
}

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

         #startpage { min-height: 750px; width: 100%; background-size: 70vh auto; background-position: center bottom; }
         #startpage.img1 { background-image: url(../images/bg_image_1_mobile.jpg) !important; }
         #startpage.img2 { background-image: url(../images/bg_image_2_mobile.jpg) !important; background-size: 60vh auto; }
         #startpage.img3 { background-image: url(../images/bg_image_3_mobile.jpg) !important; }
         #startpage.img4 { background-image: url(../images/bg_image_4_mobile.jpg) !important; background-size: 65vh auto; }

         #startpage div[class^="layer"] { display: block; position: absolute; width: 100%; height: auto; background: rgba(130,179,59,0.5); clip-path: polygon(0 0, 100% 0%, 100% 90%, 0% 100%); }
         #startpage .layer1 { z-index: 51; height: calc(48vh + 60px) !important; min-height: calc(460px + 60px) !important; }
         #startpage .layer2 { z-index: 52; height: calc(48vh + 30px) !important; min-height: calc(460px + 30px) !important; }
         #startpage .layer3 { z-index: 53; height: calc(48vh + 0px) !important; min-height: calc(460px + 0px) !important; }

         #startpage .logo { position: absolute; z-index: 100; top: 10px; left: 20px; width: 240px; height: 100px; }
         #startpage .logo a { background-size: auto 90%; }
         #startpage .logo span { margin-top: -10px; font-size: 0.68em; }
         #startpage .footer { position: absolute; z-index: 100; background: var(--main-color); bottom: 0px; left: auto; width: 100%; height: 70px; padding: 10px 0px 10px 0px; margin: 0px 0px; text-align: center; }

         #startpage .text { width: calc(100% - 60px); border: 0px #000 solid; text-align: center; top: 150px; }
         #startpage .text h1 { font-size: 1.8em; text-align: center; margin-bottom: 20px; }
         #startpage .text h1 b { font-size: 1.0em; }
         #startpage .text ul { padding: 0px; text-align: center; }
         #startpage .text li { display: inline-block; width: auto; font-size: 1.1em; }
         #startpage .testsieger { z-index: 101; bottom: 100px; left: 20px; right: auto; }
         #startpage .text button { margin-top: 0px; }

         #site { height: 100%; }
         #site .header { height: 110px; padding: 0px 0px; margin: 0px 0px 60px 0px; }
         #site .logo { height: 100px; }
         #site .logo a { background-size: auto 90%; }
         #site .footer { position: relative; width: calc(100% - 20px); background: var(--main-color); padding: 10px; border: 0px #000 solid; text-align: center; }
         #site .footer div { text-align: center; }
         .footer span { display: none; }

         #scala { position: absolute; z-index: 50; width: calc(100% - 60px); top: 160px; bottom: auto; left: auto; }

         #pkvabfrage_pos div[id^="form_step_"] .hilfe { font-size: 1.1em; }
         #pkvabfrage_pos div[id^="form_step_"] .step_icon { display: block; width: calc(100% - 0px); margin-bottom: 20px; text-align: center; }
         #pkvabfrage_pos div[id^="form_step_"] .step_icon img { width: 80%; max-width: 200px; min-width: 64px; height: auto; }
         #pkvabfrage_pos div[id^="form_step_"] .step_selection { display: block; width: 100%; max-width: 600px; margin: 0px auto; border: 0px #000 solid; }



         #formular { width: calc(100% - 0px); height: auto; margin: 10px auto; font-size: 1.0em; }
         #formular .hilfe { width: calc(100% - 50px - 4px); background-size: 32px; margin: 30px 0px 10px 0px; padding: 8px 40px 8px 10px; font-size: 1.2em; }

         /*#formular div[id^="form_step"] label, #formular div[id^="form_step"] .label { width: calc(100% - 5px); padding: 10px 0px 10px 0px; margin: 5px 0px 5px 0px; }  */
         #formular .select_check { width: 24px; height: 24px; background-size: 20px 20px; }
         #formular div[id^="form_step"] label span { font-size: 0.75em; }

         #pkvabfrage_pos #form_step_12 .step_icon { margin: 0px; padding-top: 0px; height: auto; border: 0px #000000 solid; }
         #pkvabfrage_pos #form_step_12 .hilfe { margin-bottom: 0px; }

         #formular #daten_info { display: inline-block; width: calc(100% - 200px - 2px - 16px - 10px); max-width: 450px; margin: 10px 0px 0px 10px; }
         #formular #daten_info .counter { float: left; margin: 15px 5px 5px 5px; padding: 0px; line-height: 80px; width: 80px; }
         #formular #daten_info .tarif_info { float: right; width: calc(100% - 110px); background: rgba(255,255,255,0.0); border: 1px rgba(255,255,255,0.0) solid; }

         #site .vorteil { background-size: 30px; line-height: 22px; padding: 0px 0px 0px 40px; margin: 0px 0px 0px 0px;  font-size: 1.1em; }
}

@media (max-width: 680px) {
         #formular div[id^="form_step"] label, #formular div[id^="form_step"] .label { width: calc((100% / 2) - 20px); padding: 5px 0px 5px 0px; margin: 5px 0px 5px 0px; }
         #formular div[id^="form_step"] label:nth-child(3n + 2), #formular div[id^="form_step"] .label:nth-child(3n + 2) { margin: 5px 0px 5px 0px; }
         #formular div[id^="form_step"] label:nth-child(2n + 2), #formular div[id^="form_step"] .label:nth-child(2n + 2) { margin: 5px 10px 5px 10px; }
         #formular #daten_info { width: calc(100% - 2px - 16px - 10px); max-width: 80%; text-align: left; }
}

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

         #startpage { background-size: 65vh auto; }
         #startpage .text { width: calc(100% - 40px); border: 0px #000 solid; text-align: center; top: 150px; }
         #startpage .text h1 b { display: inline; }
         #startpage .text li { width: auto; display: inline; padding: 0px 0px 0px 25px; line-height: 35px; background-size: 20px 20px; font-size: 1.0em; }
         #startpage .text button b { font-size: 1.6em; }
         #startpage .footer .hotline { font-size: 0.8em; }

         #site { height: 100%; }

         #pkvabfrage_pos div[id^="form_step_"] .step_icon { height: auto; padding-top: 10px; }
         #pkvabfrage_pos div[id^="form_step_"] .step_icon img { width: 90%; height: auto; }

         #formular .select_check { width: 24px; height: 24px; background-size: 20px 20px; }
         #formular .hilfe { padding: 8px 45px 8px 25px; width: calc(100% - 70px); }
         #formular #daten_info { width: calc(100% - 2px - 16px); max-width: 100%; text-align: left; }

         #rechner_datenschutz_label { width: 0px; }

         #startpage .testsieger { width: 170px; height: 170px; }
         #startpage .testsieger img { width: 170px; height: 170px; }
}

@media (max-width: 440px) {
         #startpage .text { width: calc(100% - 40px); border: 0px #000 solid; text-align: center; top: 120px; }
         #startpage .text ul { margin: 10px 0px; }
         #startpage .text li { font-size: 0.8em; padding: 4px 0px 4px 25px; }
         #startpage .footer .hotline { font-size: 0.7em; }

         #startpage .layer1 { z-index: 51; height: calc(45vh + 60px) !important; min-height: calc(450px + 60px) !important; }
         #startpage .layer2 { z-index: 52; height: calc(45vh + 30px) !important; min-height: calc(450px + 30px) !important; }
         #startpage .layer3 { z-index: 53; height: calc(45vh + 0px) !important; min-height: calc(450px + 0px) !important; }
}