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

@media (max-width: 1520px) {
         #testsieger .items { padding-left: 180px; width: calc(100% - 180px); }
         #testsieger .items .item { font-size: 0.9em; }
         #testsieger .items .item .head { font-size: 1.3em; height: 25px; }
         #testsieger .items .item.highlight .cta a { background-size: 100% 100%; font-size: 1.0em; overflow:hidden; }
         #testsieger_info { position: absolute; margin-top: -293px; margin-left: calc(50% - (var(--max-width) / 2) - 0px); display: block; width: 180px; height: auto; }
}

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

         h1 { font-size: 2.0em; }
         h2 { font-size: 1.8em; }
         h3 { font-size: 1.6em; }
         h4 { font-size: 1.4em; }

         #hero { font-size: 0.9em; }
         #hero .info { display: block; width: 440px; height: 300px; padding: 25px 10px; border: 0px #000 solid; }
         #hero .info ul li { background-size: 24px; padding: 0px 0px 0px 35px; }

         #hero_header { width: calc(100vw - 40px); height: calc(100vw / 6); background-size: 100% auto; }

         #testsieger .items { padding-left: 150px; width: calc(100% - 150px); border-spacing: 10px; }
         #testsieger_info { position: absolute; margin-top: -282px; margin-left: 10px; display: block; width: 150px; height: auto; }
         #testsieger_info div[class^="usp_"] { font-size: 0.8em; }

}

@media (max-width: 1020px) {
         #header .navi a { font-size: 1.2em; }

         #hero { font-size: 0.8em; background-size: auto 280px; }
         #hero .info { width: 400px; height: 250px; }
         #hero .info .badge { font-size: 1.2em; margin-bottom: 10px; }
         #hero .info h1 { font-size: 2.5em; }
         #hero img { margin-top: -20px; }

         #footer .logo { width: 200px; }
         #footer .info { width: calc(100% - 250px - 3px - 0px - 30px); padding: 10px 0px 10px 0px; }

         #testsieger .items { padding-left: 0px; width: calc(100% - 0px); }
         #testsieger_info { display: none; }

         #testsieger .items .item div[class^="usp_"] { padding: 3px 10px 10px 10px; text-align: center; height: 30px; overflow: hidden; }
         #testsieger .items .item .usp_3 { padding: 5px 10px; height: 35px !important; }
         #testsieger .items .item div[class^="usp_"] span { display: block; padding: 2px 10px; font-size: 0.7em; text-align: center; height: 12px; overflow: hidden; }

         #testsieger .items .item .usp_2 { height: 60px !important; }

         #ranking .item { width: calc(100% - 8px - 0px); border: 4px #FFFFFF solid; font-size: 0.9em; }
         #ranking .item.highlight { border: 4px var(--main-color) solid; }
         #ranking .item .product_l { width: 260px; padding: 15px; }
         #ranking .item .product_r { width: calc(100% - 290px - 30px); padding: 15px; }
}

@media (max-width: 800px) {
         #header .logo, #header .navi { display: block; float: none; width: calc(100% - 40px); padding: 0px; margin: 10px 0px 0px 0px; text-align: center; }
         #header .logo { margin-top: 15px; }
         #header .navi { margin-bottom: 10px; }
         #header .navi a { font-size: 1.3em; background-color:#FFFFFF; }

         #hero_header { width: calc(100vw - 40px); height: calc(100vw / 4) !important; background-size: 100% auto; }
         #hero_header { background-image: url(../images/hero_header_mobile.jpg); }
         #hero_header.testing { background-image: url(../images/hero_header_mobile_testing.jpg);  }

         .badge { background-image: url(../images/bg_gold.png); }

         #hero { height: auto; padding-bottom: 20px; background-image: url(../images/header_img.jpg); }
         #hero .info { width: 350px; padding: 10px 10px; }
         #hero .info h1 { font-size: 2.4em; }
         #hero .info .badge { font-size: 1.1em; margin-top: 0px; margin-bottom: 10px; font-weight: bold; }
         #hero img { width: calc(60%); height: auto; }

         #footer .logo span img { width: 90%; max-width: 350px; height: auto; }
         #footer .logo, #footer .info { float: none; display: block; width: calc(100% - 40px); margin: 10px 0px; padding: 10px 20px 10px 20px; border: 0px; }

         #experts .info { width: calc(100% - 180px); font-size: 1.2em; }

         /* Listing 4er */
         #testsieger .anzeige { display: block; }
         #testsieger .items { overflow-x: auto; display: flex; padding-bottom: 10px; }
         #testsieger .items .item { float: none; width: calc((100% / 4) - 20px) !important; min-width: calc((100% / 4) - 20px) !important; max-height: 100vh; margin: 8px; }

         #ranking .item { width: calc(100% - 6px - 0px); border: 3px #FFFFFF solid; }
         #ranking .item.highlight { border: 3px var(--main-color) solid; }
         #ranking .item .product_l { width: 200px; padding: 15px; }
         #ranking .item .product_r { width: calc(100% - 230px - 30px); padding: 15px; }
         #ranking .item .product_l .points i { width: 60px; }
         #ranking .item .product_l .points, #ranking .item .product_l .voting_details { font-size: 1.2em; }
         #ranking .item .product_l .voting_details .scale b { width: 100px; font-size: 0.9em; }
         #ranking .item .product_l .voting_details .scale .fortschritt { height: 14px; width: calc(100% - 100px); }
         #ranking .item .product_l .voting_details .scale .fortschritt span { height: 12px; font-size: 0.9em; }

         #ranking .item .product_r .box.positives, #ranking .item .product_r .box.nagative { width: calc(50% - 30px); padding: 10px; }
         #ranking .item .product_r .box.positives li, #ranking .item .product_r .box.nagative li { background-size: 14px; padding: 0px 0px 0px 22px; font-size: 0.9em; }

         #blog .item { display: block; float: left; width: calc(100% / 2 - 20px - 30px); margin: 10px; padding: 10px 15px; }

}

@media (max-width: 680px) {
         #hero { background-size: auto 280px; }
         #hero .info { width: 240px; }
         #hero .info h1 { font-size: 2.2em; }
         #hero img { margin-top: 0px; }

         #experts { margin: 0px; padding: 20px 0px !important; }
         #experts img { width: 120px; height: auto; margin-top: 0px !important; }
         #experts .box { background-color: #fbfbfb; margin: 10px 0px !important; position: relative; float: none; }
         #experts .info { width: calc(100% - 140px); font-size: 1.0em; }

         #testsieger .items .item{ width: calc((100% / 3) - 20px) !important; min-width: calc((100% / 3) - 20px) !important; }
         #testsieger .items .item .usp_2 { height: 50px !important; }

         #ranking h2, #ranking h3 { text-align: center; }
         #ranking .item .head_bar { height: auto; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }
         #ranking .item .head_bar .title { width: calc(100% - 20px - 60px - 120px); padding: 10px 10px; }
         #ranking .item .head_bar .voting { display: inline-block; float: left; width: 120px; padding: 10px 0px; }
         #ranking .item .product_r .box.positives, #ranking .item .product_r .box.nagative { float: none; width: calc(100% - 20px); padding: 10px; margin: 10px 0px; }

         #blog h3, #blog h4 { text-align: center; }
         #blog .item { display: block; float: none; width: calc(100% / 1 - 20px - 30px); margin: 10px; padding: 10px 15px; }
}


@media (max-width: 620px) {
         #ranking .item .product_l, #ranking .item .product_r { float: none; width: calc(100% - 50px); padding: 15px 25px; }
         #ranking .item .product_r { background-position: top right !important; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }

         #ranking .item .product_l .points b { font-size: 1.3em; }
         #ranking .item .product_l .points i { width: 50%; min-width: 100px; font-size: 1.8em; }
         #ranking .item .product_l .points, #ranking .item .product_l .voting_details { font-size: 1.2em; }
         #ranking .item .product_l .voting_details .scale b { width: 50%; font-size: 1.2em; }
         #ranking .item .product_l .voting_details .scale .fortschritt { height: 16px; width: calc(50% - 0px); }
         #ranking .item .product_l .voting_details .scale .fortschritt span { height: 14px; font-size: 1.0em; }
         #ranking .item .product_r .cta a { padding: 20px 0px; font-size: 1.4em !important; }
}

@media (max-width: 520px) {
         #header .logo, #header .navi { width: calc(100% - 20px); }
         /*#header .navi a:first-child { display: none; } */

         #hero { background-size: auto 250px; font-size: 0.7em; }
         #hero img { width: calc(100% - 0px); height: auto; margin-top: -20px; }
         #hero .info { width: 200px; padding: 10px 0px; }
         #hero .info .badge { font-size: 1.10em; margin: 5px 0px; padding: 3px 8px; }
         #hero .info ul li { background-size: 22px; line-height: 22px; padding: 0px 0px 0px 30px; }

         #ranking .item .head_bar .title { width: calc(100% - 20px - 60px - 0px); }
         #ranking .item .head_bar .voting { display: none; }
         #ranking .item .product_l .voting { display: block; }


         #testsieger .items .item{ width: calc((100% / 2) - 20px) !important; min-width: calc((100% / 2) - 20px) !important; }

}

@media (max-width: 420px) {
         #header .navi a { font-size: 1.1em; }

         #hero { background-size: auto 220px; background-position: right 5px; font-size: 0.6em; }
         #hero img { margin-top: -40px; }
         #hero .info { width: 170px; padding: 10px 0px; }

         #experts img { width: 100px; }
         #experts .info { width: calc(100% - 120px); font-size: 0.9em; }
}

@media (max-width: 360px) {
         #testsieger .items .item{ width: calc((100% / 1) - 20px) !important; min-width: calc((100% / 1) - 20px) !important; }
         #testsieger .items .item .cta a { padding: 20px 0px; font-size: 1.4em !important; }
}