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


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

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

         #header .menu .l { width: calc(50% - 0px); text-align: left; }
         #header .menu .r { width: calc(50% - 0px); text-align: right; }
         #header-cats .categories { width: calc(100% - 40px - (4 * 10px)) !important; }

         /* Geizkragen Design Elemente */
         .gk_elements.gold { top: 90px; left: auto; right: 20px; }
         .gk_elements.kilt { top: 77px; left: 420px; }

}

@media (max-width: 1020px) {
         /* Layout */
         #newsletter .info { width: 240px; }
         #newsletter .form { width: calc(100% - 260px - 200px); }

         #header .menu-tabs { width: calc(100% - 240px - 5px); border: 0px #000 solid; }
         #header .menu-tabs a { padding: 0px 8px 0px 8px !important; }
         #header .logo { width: 240px; height: 40px; margin: 10px 0px 0px 0px; }
         #header .bar .navi { width: 200px; }
         #header .bar .form { width: calc(100% - 70px - 200px); }

         #header-cats .categories { grid-template-columns: repeat(4, 1fr); gap: 10px; }

         /* Geizkragen Design Elemente */
         .gk_elements.kilt { display: none; }

}

@media (max-width: 920px) {
         /* Layout */
         #newsletter .form { width: calc(100% - 260px - 200px); }
         #start-marken img { width: calc(100% / 4 - 4px); }

         #header .menu .x { display: none; }

         #header .bar .form form { width: calc(100% - 120px); }
         #header .bar .form form input[type="submit"] { width: 80px; padding-left: 10px; }
         #header .bar .form form input  { width: calc(50% - 20px - 40px); }
         #header .bar .form form select { width: calc(50% - 10px - 40px); }

         /* Geizkragen Design Elemente */
         .gk_elements.gold { width: 100px; height: 115px; top: 105px; }
}

@media (max-width: 800px) {
         /* Layout */
         #socials { display: inline-block; float: none; width: auto; margin-top: 20px; }
         #socials a { margin: 5px 5px; }

         #header .bar .navi { width: 60px; }
         #header .bar .navi a { text-indent: -9999px; }
         #header .bar .form { width: calc(100% - 70px - 60px); }

         #header .bar .form form input  { width: calc(50% - 20px - 20px); }
         #header .bar .form form select { width: calc(50% - 10px - 20px); }
         #header .bar .form form input[type="submit"] { width: 40px; padding: 0px; text-indent: -9999px; background-position: center center; }

         #header-cats .categories { grid-template-columns: repeat(3, 1fr); gap: 10px; }
         #header-cats .slider-cat .items .item .boxed { border: 2px transparent solid; }

         /* Geizkragen Design Elemente */
         .gk_elements.gold { width: 80px; height: 100px; top: 125px; right: 25px; }

}

@media (max-width: 680px) {
         /* Layout */
         #newsletter .info { width: 240px; }
         #newsletter .form { width: calc(100% - 240px - 0px); }
         #newsletter .form form { float: right; min-width: 200px; }
         #newsletter .form form input[type="text"] { width: calc(100% - 16px - 40px); }
         #newsletter .form form input[type="submit"] { width: 40px; padding: 10px 0px 10px 0px; background-position: center center; text-indent: -9999px; }
         #newsletter .gk_elements.doctor { display: none; }
}


/* Switch zu Mobile */
@media (max-width: 640px) {
         /* Layout */
         body { background: linear-gradient(180deg, #ffffff 0px, #ffffff 139px, var(--blue-color-light) 140px, #eff8fd 500px); }

         #header .in { width: 100%; margin: 0px; }
         #header .menu, #header .menu-tabs { display: none; }
         #header .logo { position: absolute; display: block; float: none; top: 0px; left: 90px; width: calc(100% - 70px - 100px); height: 70px; margin: 5px 0px 0px 0px; }
         #header .logo a { display: table-cell; height: 70px; vertical-align: middle; }
         #header .logo img { width: 90%; max-width: 280px; height: auto; }

         #header .bar, #header .bar .mid, #header .bar .form { background-image: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }
         #header .bar .navi { display: block; width: 70px; height: 70px; }
         #header .bar .mid { display: block; width: 100%; height: 5px; }
         #header .bar .form { display: block; width: calc(100% - 20px); height: auto; background: var(--second-color); padding: 10px; background: linear-gradient(180deg,var(--main-color) 0%, var(--main-color-light) 20%, var(--main-color) 100%); }
         #header .bar .form form { width: calc(100% - 10px); margin: 5px 5px 5px 5px; }

         #header-cats .categories { grid-template-columns: repeat(2, 1fr); gap: 10px; }
         #header-cats .categories .boxed { margin: 10px 5px; }
         #header-cats .categories .boxed a { font-size: 1.0em; padding: 3px 5px; }
         #header-cats .categories .boxed a:hover { background-color: rgba(0,0,0,0.2); }
         #header-cats .slider-cat .items .item a.icon { border: 2px transparent solid; }

         #footer span::after { content:""; }

         /* Geizkragen Design Elemente */
         .gk_elements.gold { display: none; }
         .gk_elements.preis { background: transparent url(../images/gk_header_preis.png) center -10px no-repeat; width: 90px; height: 80px; position: absolute; top: 0px; left: calc(100% - 120px); }
}

@media (max-width: 520px) {
         /* Layout */
         #header-cats .categories { grid-template-columns: repeat(2, 1fr); gap: 0px; }
         #header-cats .categories .boxed a { font-size: 0.9em; padding: 5px 5px; }

         #newsletter .news { margin-left: calc(50% - 50px); }
         #newsletter .info { float: none; width: calc(100% - 0px); text-align: center; }
         #newsletter .form { float: none; width: calc(100% - 0px); }
         #newsletter .form form { float: none; min-width: 200px; width: 100%; }


}

@media (max-width: 420px) {
         /* Layout */
         #header .logo { left: 70px; }

         #header-cats .slider-cat { display: none; }
         #header-cats .categories { grid-template-columns: repeat(1, 1fr); gap: 0px; }
         #header-cats .categories .boxed a { display: inline-block; }
         #header-cats .categories .boxed a:first-child { display: block; }
         #header-cats .categories .boxed a b { display: block !important; width: 100% !important; }

         #header .bar .form form input { float: left; margin: 2px 0px; height: 45px; line-height: 45px; font-size: 1.1em; }
         #header .bar .form form input[type="text"] { width: calc(100% - 60px - 20px); padding: 0px 10px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
         #header .bar .form form select { display: none; }
         #header .bar .form form input[type="submit"] { float: right; width: 60px; padding: 0px; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px;}

         a.button { padding: 8px 30px 8px 10px !important; background-size: auto 42% !important; } 

         /* Geizkragen Design Elemente */
         .gk_elements.preis { left: calc(100% - 100px); }

}