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


@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 .in { width: 100% !important; padding: 0px !important; margin: 0px !important; background-position: calc(110% + 0px) top; border: 0px #000 solid; }
         #hero .info { display: block; width: calc(50% - 50px); padding: 20px 0px 20px 50px; border: 0px #000 solid; }
         #hero .info h1 { font-size: 2.4em; }

         #versicherer { width: calc(100% - 40px); margin: 10px 20px 30px 20px; }

         #leistungen .auswahl [data-auswahl] { height: calc((100vw / 5) - 80px) !important; background-size: 90% auto; }
}

@media (max-width: 1020px) {
         #header { width: calc(100% - 2px); border: 1px var(--bg-color) solid; margin: 0px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important; }
         #header .navi { width: calc(100% - 320px - 65px); }
         #header .navi a { font-size: 1.2em; }

         #header .hotline { float: right; width: 70px; margin-top: 16px; }
         #header .hotline a { text-indent: -9999px; }
         #header .hotline a span { display: none; }
         #header .navi .dropdown-content { right: 5%; }

         #hero { font-size: 0.9em; }
         #hero .in { background-position: calc(100% + 140px) top; }
         #hero .info { width: 450px; padding: 20px 0px 20px 40px; }
         #hero .info h1 { font-size: 2.2em; }
         #hero .form { padding: 8px 15px; }

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

         #blog .items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
         #versicherer_show .items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

         div[id^="vorteile-"] .item { float: left; width: calc(100% / 4 - 0px - 2px); margin: 0px; padding: 0px; border-right: 2px rgba(0,0,0,0.1) solid; text-align: center; }
         div[id^="vorteile-"] .item:nth-last-child(2) { float: left; width: calc(100% / 4 - 0px - 2px); margin: 0px; padding: 0px; }
         div[id^="vorteile-"] .item img { float: none; display: inline-block; width: 60px; height: auto; }
         div[id^="vorteile-"] .item span { float: none; display: block; width: calc(100% - 20px) !important; padding: 10px !important; margin: 0px !important; text-align: center; color: var(--font-color); font-size: 0.8em; }
         div[id^="vorteile-"] .item span b { padding: 0px 0px 10px 0px; }

         #vergleich div[class^="item"] { width: calc(100% / 3 - 20px - 20px - 30px); background-size: 135px 95px; background-position: center top; padding: 110px 10px 20px 10px; margin: 10px; text-align: center; }

         #leistungen .info { float: none; display: none;  }
         #leistungen .rechnung { float: none; display: block; width: calc(100% - 20px - 20px); padding: 10px 10px 10px 10px; margin: 10px; }
         #leistungen .tariflink.mobile { display: inline-block; }

         #reviews .bewertungen td:nth-child(1){ display: none; }
}

@media (max-width: 920px) {
         #hero .in { background-image: url(../images/hero2_small.jpg); background-position: calc(100% + 0px) top; }
}

@media (max-width: 800px) {
         #header .logo { display: block; float: left; width: calc(100% - 70px - 70px - 2px); text-align: left; padding: 0px; margin: 0px; border: 0px #000 solid; }
         #header .navi { float: left; width: 70px; height: 60px; padding: 5px 0px 5px 0px; border-right: 2px rgba(0,0,0,0.1) solid; text-align: left; }
         #header .navi .dropdown .dropbtn { display: block; float: right; width: 60px; height: 60px; background-size: 60px 60px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
         #header .navi .dropdown-content { width: calc(100% - 20px - 4px); left: 0%; right: 0%; margin-top: 60px; border-top-left-radius: 0px; border-top-right-radius: 0px; }
         #header .navi .dropdown-content a { max-width: 100%; text-align: left;  }
         #header .navi .dropdown:hover .dropdown-content { display: none; }

         #header .hotline { float: right; width: 60px; height: 60px; padding: 5px 0px 5px 0px; border: 0px #000 solid; }
         #header .hotline a { background-size: 60px 60px; height: 60px; padding: 0px; }

         #hero .in { background-image: url(../images/hero2_mobile.jpg); background-position: calc(100% + 10px) top; }
         #hero .info { width: 420px; padding: 20px 0px 20px 30px; }
         /*#hero .sterne b span { display: none; } */
         #hero .sterne { display: block; width: 220px; }
         #hero .sterne b { display: block; line-height: 20px; background-position: left top;  }
         #hero .sterne b span { float: left; display: block; width: 220px; border: 0px; padding: 0px 0px 0px 0px; margin: 2px 2px 2px -110px; color: rgba(0,0,0,0.4); }
         #reviews .sterne b span::before, #reviews .sterne b span::after { content:" - "; }

         #versicherer { background-image: url(../upload/versicherer/komplett_small.jpg); }
         #versicherer_show .items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

         #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: 0px 20px 0px 20px; border: 0px #FFF solid; text-align: center; font-size: 1.1em; line-height: 1.6em; }
         #socials { display: block; width: 100%; float: none; width: auto; margin: 20px 0px 0px 0px; text-align: center; }
         #socials a { margin: 5px 5px; float: none; }

         #blog h3.start, #blog h4.start, #reviews h3, #reviews h4 { display: block; width: calc(100% - 20px); text-align: center; }
         #blog .items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
         #blog .item { font-size: 0.9em; }
         #blog .button.r, #reviews .button.r { float: none; margin-bottom: 20px; }

         #reviews .sterne { display: block; width:100%; margin: 0px auto 0px auto; text-align: center; }
         #reviews .button.r { float: none; margin: 10px auto !important; }

         .review-filter { text-align: center; }
         .review-filter button, .review-filter button[disabled] { float: none !important; display: inline-block !important; }

         #leistungen .auswahl [data-auswahl], #leistungen .s_items [data-auswahl] { width: calc(100% / 5 - 10px - 0px - 4px); height: calc(100vw / 5 - 80px); padding: 10px 0px 8px 0px; margin: 5px; background-position: center 12px; }

         #kontakt-form .formular, #kontakt-form .info { float: none; width: calc(100% - 40px); padding: 10px 20px; }
         #kontakt-form .info .text { float: none; width: calc(100% - 0px); padding: 0px 0px; text-align: center; }
         #kontakt-form .info .text h4 { text-align: center; }
         #kontakt-form .info .text .hotline { float: left; width: 50%; min-width: 260px; border: 0px #000 solid; }
         #kontakt-form .info .text li { display: inline-block; margin: 5px 20px; }
}

@media (max-width: 740px) {
         #leistungen .auswahl [data-auswahl], #leistungen .s_items [data-auswahl] { height: calc(100vw / 5 - 75px); padding: 10px 0px 8px 0px; margin: 5px; background-position: center 12px; }
}

@media (max-width: 680px) {
         #header .navi a { font-size: 1.3em; }
         #hero { height: auto; }
         #hero .in { background-image: url(../images/hero2_mobile.jpg); background-position: calc(100% + 10px) top; min-height: 350px; }
         #hero .info { width: 380px; padding: 10px 0px 10px 30px; }
         #hero .info h1 { font-size: 2.0em; }
         #hero .form { padding: 8px 15px; }
         #hero .form b { font-size: 1.3em; }
         #hero .form form input { font-size: 1.2em; }
         #hero .form form input[type="number"] { width: 85px; }
         #hero .form form input[type="submit"] { padding: 6px 30px 6px 10px; }

         #blog .items { display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; }
         #blog .item { width: calc(100% - 30px - 20px - 4px); margin: 0px 10px; padding: 10px 15px 0px 15px; font-size: 1.1em; }

         div[id^="vorteile-"] .item, div[id^="vorteile-"] .item:nth-last-child(2) { float: left; width: calc(100% / 2 - 2px - 0px); margin: 1px; padding: 0px; border-right: 0px rgba(0,0,0,0.1) solid; }
         #vorteile-zahnselect { background: var(--main-color-light); padding: 1px; }
         #vorteile-zahnselect .item { background: #FFFFFF; padding: 10px !important; width: calc(100% / 2 - 2px - 20px) !important; }
         #vorteile-zahnselect.dark .item { background: rgba(255,255,255,0.2); border-right: 0px rgba(255,255,255,0.2) solid; }
         #vorteile-zahnselect .item span { height: 90px; overflow:hidden; padding-bottom: 5px; }

         #vergleich div[class^="item"] { width: calc(100% / 3 - 20px - 20px - 0px); background-size: 100px auto; background-position: center top; padding: 90px 10px 20px 10px; margin: 10px; text-align: center; }
         #vergleich .arrow { display: none; }

         #leistungen .auswahl [data-auswahl]{ height: 120px; }

         #reviews .bewertungen, #reviews .kundenvorteile { display: block; float: none; width: calc(100% - 40px); font-size: 0.9em; padding: 10px; margin: 10px 10px 10px 10px; }
         .pagination, .pagination_text { float: none; display: inline-block; width: calc(100% - 20px); font-size: 0.8em; text-align: center; }

         #leistungen .auswahl { display: none; }
         #slider_leistungen { display: inline-block; }
         #leistungen .s_items [data-auswahl] { background-position: center center; background-size: 180px auto; }
         #leistungen .s_items [data-auswahl="1"] { background-image: url(../images/zahnselect_2_1b.jpg); }
         #leistungen .s_items [data-auswahl="2"] { background-image: url(../images/zahnselect_2_2b.jpg); }
         #leistungen .s_items [data-auswahl="3"] { background-image: url(../images/zahnselect_2_3b.jpg); }
         #leistungen .s_items [data-auswahl="4"] { background-image: url(../images/zahnselect_2_4b.jpg); }
         #leistungen .s_items [data-auswahl="5"] { background-image: url(../images/zahnselect_2_5b.jpg); }
}


@media (max-width: 620px) {
         #hero .info { width: 360px; padding: 10px 0px 10px 20px; }
         #hero .info h1 { font-size: 1.8em; }
         #hero .in { background-position: calc(100% + 40px) top; min-height: 330px; }
         #hero .info ul li { background-size: 20px; line-height: 22px; padding: 0px 0px 0px 30px; font-size: 1.1em; }

         #versicherer { background-image: url(../upload/versicherer/komplett_mobile.jpg); height: 100px; }
         #versicherer_show .items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }

         #reviews .sterne b { display: block; width: calc(100% - 40px); padding: 40px 10px 0px 10px; margin: 2px 10px 2px 10px; text-align: center; background-position: top center; font-size: 1.2em; background-size: auto 30px; }
         #reviews .sterne b span { display: inline-block; width: calc(100% - 40px); padding: 2px 10px 0px 10px; margin: 2px 10px 2px 10px; text-align: center; color: #AFAFAF; border-left: 0px var(--font-color2) solid; font-size: 0.8em; font-weight: normal; }
         #reviews .sterne b span::before, #reviews .sterne b span::after { content:" - "; }

         #pu { top: 40%; left: 10%; right: 10%; width: calc(80% - 40px); }
         #pu .x { left: 96%; }

         #leistungen .rechnung img { width: 90%; margin: 0px 5%; }

         #kontakt-form .info .text { text-align: center; }
         #kontakt-form .info .text .hotline { float: none; display: inline-block; width: 50%; min-width: 280px; }
         #kontakt-form .info .text li { display: inline-block; width: 50%; min-width: 240px; margin: 5px 0px; }
}

@media (max-width: 520px) {
         .in { width: calc(100% - 20px); margin: 0px 10px; padding: 0px 0px; border: 0px #000 solid; }
         .box { width: calc(100% - 20px - 4px); margin: 15px 0px 10px 0px; padding: 10px 10px 10px 10px; }

         #reviews { width: calc(100% - 20px); padding: 10px 10px; margin: 20px 0px; }

         #hero .info { width: calc(100% - 40px); padding: 20px 20px 10px 20px; }
         #hero .info h1 { font-size: 2.0em; margin-top: 10px; }
         #hero .info .mobile { display: none; }
         #hero .in { background-image: url(../images/hero_mobile2.jpg); background-position: calc(100% - 0px) bottom; background-size: 100%; min-height: 350px; }
         #hero .info ul { width: 180px; }
         #hero .info ul li { background-size: 20px; line-height: 22px; padding: 0px 0px 0px 30px; font-size: 1.2em; background-position: top left; }
         #hero .form { padding: 8px 15px; width: calc(100% - 0px - 30px); margin: 10px 0px; text-align: center; }
         #hero .form img, #hero .form i { float: none; display: inline-block; /**/}
         #hero .form img { position: relative; top: 5px; }
         #hero .form form input[type="number"] { width: calc(100% - 220px - 30px); }
         #hero .form form input[type="submit"] { width: 200px; }
         #versicherer { margin: 0px auto 10px auto; padding: 10px 0px 10px 0px; }

         #vergleich div[class^="item"] { width: calc(100% / 1 - 10px - 20px - 140px); min-height: 65px; background-size: 120px auto; background-position: left top; padding: 10px 10px 10px 140px; margin: 10px; text-align: left; }

         #leistungen h2 { font-size: 1.4em; }
         #leistungen .auswahl [data-auswahl]{ display: inline-block; float: none; width: calc(100% / 2 - 20px - 30px - 4px); height: 140px; }

         #slider_reviews .s_items .item .info { min-height: auto; overflow: none; }

         h1 { font-size: 2.0em; }
         h2 { font-size: 1.6em; }
         h3 { font-size: 1.4em; }
         h4 { font-size: 1.3em; }
         h5 { font-size: 1.2em; }
}

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

         #header .logo { width: calc(100% - 60px - 60px - 2px); padding-top: 10px; }
         #header .navi { width: 60px; height: 50px; padding: 5px 0px 5px 0px; }
         #header .navi .dropdown .dropbtn { width: 50px; height: 50px; background-size: 50px 50px;}
         #header .navi .dropdown-content { margin-top: 50px; }
         #header .hotline { width: 50px; height: 50px; padding: 5px 0px 5px 0px; }
         #header .hotline a { background-size: 50px 50px; height: 50px; padding: 0px; }

         #hero .info h1 { font-size: 1.5em; }


         #blog .item img { width: 100px; height: auto; }
         #blog_text h1 { font-size: 1.6em !important; }

         #leistungen h2 { font-size: 1.2em; }
}