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


@media (max-width: 1400px) {
         #icon_badge { top: calc(50vh - 0px); }
}

@media (max-width: 1240px) {
         .f_bigger h2 { font-size: 1.3em; }
         h1 { font-size: 1.8em; }
         h2 { font-size: 1.5em; }
         h3 { font-size: 1.4em; }
         h4 { font-size: 1.2em; }

         .in { width: calc(100% - 60px); padding: 0px 30px; }

         #header { background-image: url(../images/header_1_mid.jpg); }
         #hero_rechner { position: relative; float: none; width: 540px; max-width: 540px; left: auto; right: auto; padding: 0px 20px 1px 20px; margin: 30px 0px 60px calc(100% - 540px - 60px); }
         #hero_rechner .headline, #hero_rechner .headline_last { width: calc(100% - 40px); padding: 10px 20px 0px 20px; font-size: 1.4em; }

         #icon_phone { left: auto; right: 20px; }
         #icon_badge { right: 0px; width: 220px; height: 150px; }
         #socials { top: 40px; left: 20px; }

         div[class^="grafik_"]{ height: calc(100vw / 4); }
         .testsieger, .sparen, .vergleich_pkv_gkv, .beihilfe { width: 40%; height: auto; }
}

@media (max-width: 1020px) {
         #hero_rechner { position: relative; float: none; width: 520px; max-width: 520px; margin-left: calc(100% - 520px - 60px); }

         #bewertungen { font-size: 0.9em; }

         #footer .logos img { width: calc(100% / 5 - 30px); }
         #footer .vorteile { width: calc(100% - 100px); padding: 20px 40px 20px 60px; }
         #footer .vorteile .item, #footer .vorteile ul li { background-size: 30px auto; width: calc(50% - 60px); line-height: 40px; padding: 0px 20px 0px 40px; margin-right: 0px; }

         #icon_badge { width: 180px; height: 130px; }
         div[class^="grafik_"]{ height: calc(100vw / 3); }
         .grafik_beamte { background-image: url(../images/grafik_beamte_mid.jpg); }
         .grafik_3steps { background-image: url(../images/grafik_3steps_mid.png); }
         .grafik_angestellt { background-image: url(../images/grafik_vorteile_mid.jpg); }
         .grafik_selbststaendig { background-image: url(../images/grafik_leistung_mid.jpg); margin: 20px 0px 20px 0px; }

         .f_big .button { text-align: center; }
}

@media (max-width: 800px) {
         #header { background-color: #edeae8; background-image: url(../images/header_1_mini.jpg); background-position: top center; height: auto; padding-bottom: 30px; background-size: 800px auto; }

         #header .logo { margin-top: 10px; }
         #hero_rechner { width: calc(100% - 60px); height: auto; margin: 360px auto 40px auto; padding: 10px; background-color: rgba(255,255,255, 0.8);  }
         #hero_rechner .headline, #hero_rechner .headline_last { height: auto; padding: 10px 20px 15px 20px; font-size: 1.3em; }
         #hero_rechner .form { margin: 10px 0px 10px 0px !important; }
         #hero_rechner .secure { margin-left: -10px; margin-top: 20px; }

         #formular input, #formular select { font-size: 1.1em; padding: 6px 4px 5px 6px; }

         #socials { display: block; background: var(--main-color); position: relative; top: 0px; left: 0px; width: clac(100% - 0px); padding: 5px; height: 50px; text-align: center; }
         #socials a { background-image: url(../images/socials_hover.png); float: none; width: 50px; height: 50px; background-size: 300px 100px;}
         #socials a.youtube { background-position: 0px 0px; } #socials a.youtube:hover { background-position: 0px 50px; }
         #socials a.instagram { background-position: -50px 0px; } #socials a.instagram:hover { background-position: -50px 50px; }
         #socials a.facebook { background-position: -100px 0px; } #socials a.facebook:hover { background-position: -100px 50px; }
         #socials a.whatsapp { background-position: -150px 0px; } #socials a.whatsapp:hover { background-position: -150px 50px; }
         #socials a.linkedin { background-position: -200px 0px; } #socials a.linkedin:hover { background-position: -200px 50px; }
         #socials a.tiktok { background-position: -250px 0px; } #socials a.tiktok:hover { background-position: -250px 50px; }

         .testsieger, .sparen, .vergleich_pkv_gkv, .beihilfe { float: none; margin: 20px auto 20px auto; width: 100%; height: auto; max-width: 500px; }
         .f_big h3 { text-align: center; }
         .f_big     { font-size: 1.1em !important; }
         .f_bigger  { font-size: 1.2em !important; }

         #icon_phone { z-index: 20; margin-top: -15px; }
         #icon_badge { position: absolute; top: 180px; }

         #bewertungen { padding: 10px; }

         #footer .logos img { width: calc(100% / 4 - 30px); }
         #footer .vorteile { width: calc(100% - 40px); padding: 20px 20px 20px 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
         #footer .vorteile .item, #footer .vorteile ul li { background-size: 30px auto; width: calc(50% - 60px); line-height: 1.3em; padding: 5px 20px 5px 40px; }

         div[class^="grafik_"]{ height: calc(100vw / 2 - 20px); }
         .grafik_beamte { background-image: url(../images/grafik_beamte_small.jpg); }
         .grafik_3steps { background-image: url(../images/grafik_3steps_small.png); }
         .grafik_angestellt { background-image: url(../images/grafik_vorteile_small.jpg); }
         .grafik_selbststaendig { background-image: url(../images/grafik_leistung_small.jpg); }

         #cashbackpopup { left: calc(50% - 160px); top: calc(50% - 150px); background-size: 320px auto; width: 320px; height: 300px; }
         #cashbackpopup .title { display: block; float: none; width: 240px; font-size:1.4em; margin: 10px 0px 10px 30px; }
         #cashbackpopup .time { display: block; background-color: var(--main-color); float: none; width:  calc(100% - 16px - 40px); padding: 8px 8px 8px 8px; margin: 0px 20px 0px 20px; font-size: 1.0em; }

         #trust_logos .logos img { width: calc(100% / 6 - 30px); }
         #trust_logos .logos img:nth-child(2), #trust_logos .logos img:nth-child(4), #trust_logos .logos img:nth-child(5) { display: none; }

}

@media (max-width: 680px) {
         #header { background-size: 680px auto; }
         #hero_rechner { width: calc(100% - 20px); margin: 270px auto 20px auto; padding-bottom: 10px; }

         #header .logo {  background: transparent url(../images/logo_shadow.png) center calc(100% - 8px) no-repeat; margin-top: -5px; }
         #header .logo span { font-size: 0.8em; margin-top: -10px; }

         .testsieger, .sparen, .vergleich_pkv_gkv, .beihilfe { width: 90%; }

         #cashbackpopup { display: none; }
         #phonepopup { left: 0px; width: 80%; margin: 0px 10%; }

         #formular input[type="submit"] { width: 270px; font-size: 1.0em; font-weight: bold; text-align: center; padding: 6px 30px 6px 10px; }

         #waiting { width: 100%; height: 360px; margin-top: -360px; background-size: 96% auto; }

}

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

         #hero_rechner .headline, #hero_rechner .headline_last { font-size: 1.1em; height: auto; }

         #formular .hilfe { font-size: 0.9em !important; }
         #formular div[id^="form_step"] .label { width: calc(96% - 30px - 2px); max-width: calc(96% - 30px - 2px); padding: 10px 15px 10px 15px; margin: 0px 2% 10px 2%; }
         #formular div[id^="form_step"] div[class^="zusatzinfo_"]{ width: calc(100% - 40px); max-width: calc(100% - 40px); padding: 0px 10px; margin-top: 15px; }

         #footer .logos img { width: calc(100% / 3 - 30px); }
         #footer .vorteile .item, #footer .vorteile ul li { width: calc(100% - 60px); padding: 5px 20px 5px 40px; }

         a.button:link, a.button:visited { padding: 10px 50px 10px 25px; font-size: 1.2em; }

         #socials { text-align: left; }
         #icon_badge { display: none; }

         div[class^="grafik_"]{ width: calc(100vw - 40px); height: calc(100vw - 40px); }
         .grafik_beamte { background-image: url(../images/grafik_beamte_mini.jpg); }
         .grafik_3steps { background-image: url(../images/grafik_3steps_mini.png); }
         .grafik_angestellt { background-image: url(../images/grafik_vorteile_mini.jpg); }
         .grafik_selbststaendig { background-image: url(../images/grafik_leistung_mini.jpg); }

         #trust_logos .logos img { width: calc(100% / 3 - 40px); }

}

@media (max-width: 460px) {
         #socials a.whatsapp { display: none; }

         #header { margin-top: -50px; background-size: 500px auto; }
         #header .logo { margin-top: 40px; background-image: none; }
         #header .logo img { width: calc(100% - 20px); max-width: 260px; }

         #hero_rechner { margin: 200px auto 20px auto; }
         #hero_rechner .headline, #hero_rechner .headline_last { font-size: 1.0em; }
         #hero_rechner .headline span, #hero_rechner .headline_last span { display: none; font-size: 0.7em; }
         #hero_rechner .form { min-height: 200px; }

         #formular div[id^="form_step"] label span { width: calc(100% - 10px); padding: 0px 5px; }
         #formular div[id^="form_step"] label div[class^="image_"]{ height: 70px; background-size: 60px 60px; }
         #formular #form_step_2 label, #formular #form_step_2 .label { width: calc((100% / 3) - 10px - 2px); padding: 10px 0px 10px 0px; margin: 5px 5px 5px 5px; font-size: 0.8em; }
         #formular #form_step_2 label div[class^="image_"]{ height: 70px; background-size: 60px 60px; }

         #formular input, #formular select  { font-size: 0.8em; }
         #formular input[name="vorname"] { min-width: 100px; }
         #formular input[name="nachname"] { width: calc(50% - 15px - 3px); min-width: 100px; }
         #formular input[name="strasse"] { min-width:100px; }
         #formular input[name="nr"] { min-width: 80px; }
         #formular input[name="plz"] { min-width: 60px; }
         #formular input[name="ort"] { min-width: 100px; }
         #formular select[name="geburtsdatum_tag"] { min-width: 50px; }
         #formular select[name="geburtsdatum_monat"] { min-width: 50px; }
         #formular select[name="geburtsdatum_jahr"] { min-width: 50px; }

         #formular #button_panel.start .f_n { float: right; }
}