/*
#############################
         Media-Querys
#############################
*/

@media (max-width: 1200px) {
         .in { width: calc(100% - 40px); }

         #header .navigation { height: auto; padding: 15px 0px 15px 0px; }
         #header .navigation a { padding: 6px 12px; font-size: 1.3em; }
         #header .navigation a:hover { font-size: 1.3em; }
         #header .logo.top { left: 25px; width: calc(100% - 155px); }
         #header .logo.top img { width: 300px; }

         #footer { width: calc(100% - 40px); padding: 10px 20px; }

         #search { left: calc(100% - 100px + 25px); }
         #search_bar { top: 115px; width: calc(100% - 40px); }
         #search_bar form input { padding: 10px 15px; font-size: 1.4em; }

         #menu_bar .in { width: 100%; padding: 0px; }

         #top_items .item .info a.title { height: 44px; }
         #top_items .item .info .text { height: 66px; }

         #start_cats .item .image { height: 100px; }
}


@media (max-width: 1080px) {
         #header .logo img { max-width: 350px; }

         #header .navigation { width: calc(100% - 20px); padding: 10px 10px 10px 10px; }
         #header .navigation a { padding: 5px 10px; font-size: 1.2em; }
         #header .navigation a:hover { font-size: 1.2em; }
}


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

         img.cat  { max-width: 200px; }

         #header .logo { width: calc(100% - 140px); margin: 20px 70px 10px 70px; }
         #header .logo span { display: none; }
         #header .logo.top { top: 10px; left: 0; right: 0; width: calc(100% - 140px); }
         #header .logo.top img { width: 200px; }

         #search { left: auto; right: 15px; }
         #search_bar { top: 150px; width: calc(100% - 30px); }

         #footer { font-size: 0.9em; }
         #footer a { font-size: 1.1em; }

         #start_cats .item { font-size: 0.9em; }
         #start_cats .item .image { height: 80px; }

         .item_box { width: calc((100% / 3) - ((2*20px) / 3)); font-size: 0.8em; }
         .item_box:nth-child(4n + 4){ margin: 10px 20px 10px 0px; }
         .item_box:nth-child(3n + 3){ margin: 10px 0px 10px 0px; }

         #top_items .item .info .text { font-size: 1.0em; }

         /* Listing 4er */
         #listing { overflow-x: auto;  display: flex; padding-bottom: 10px; }
         #listing div[class^="list_"]{ float: none; width: calc((100% / 4) - 4px) !important; min-width: calc((100% / 4) - 4px) !important; max-height: 100vh; }
         .listing-info { display: block; }
}

@media (max-width: 640px) {
         #header .navigation a { padding: 5px 10px; font-size: 1.1em; }
         #header .navigation a:hover { font-size: 1.1em; }

         #search_bar { top: 130px;  width: calc(100% - 30px); height: auto; }
         #search_bar form input { padding: 10px 15px; font-size: 1.3em; }
         #search_bar form input[type="text"], #search_bar form input[type="submit"] { float: none; width: calc(100% - 10px) !important; margin: 5px; }

         #start_cats .item { width: calc(50% - 10px - 20px); }
         #start_cats .item:nth-child(3n + 2){ margin: 10px 0px 10px 0px; }
         #start_cats .item:nth-child(2n + 2){ margin: 10px 0px 10px 20px; }

         #top_items .item { width: calc(50% - 10px - 0px); font-size: 0.9em; }
         #top_items .item:nth-child(3n + 2){ margin: 10px 0px 10px 0px; }
         #top_items .item:nth-child(2n + 2){ margin: 10px 0px 10px 20px; }
         #top_items .item .info .text { font-size: 1.1em; }

         .item_box { width: calc((100% / 2) - ((1*20px) / 2)); font-size: 0.9em; }
         .item_box:nth-child(3n + 3){ margin: 10px 20px 10px 0px; }
         .item_box:nth-child(2n + 2){ margin: 10px 0px 10px 0px; }

         /* Listing 3er */
         #listing div[class^="list_"]{ width: calc((100% / 3) - 4px) !important; min-width: calc((100% / 3) - 4px) !important; }

         .content_big.magazin img.l { width: calc(100% - 20px); height: auto; max-width: 500px; }
}

@media (max-width: 520px) {
         #search_bar { top: 120px; }
         #start_cats .item { font-size: 0.8em; }
         img.cat, img.vergleich  { width: calc(50% - 20px); height: auto; max-width: 300px; margin: 0px 20px 20px 0px; }
         .content_big h1 { text-align: center; }

         #top_items .item .info { width: calc(100% - 14px); padding: 10px 7px; }

         .boxed { width: calc(100% - 30px); padding: 15px; }

         /* Artikel-Box Klein */
         .item_box { display: block; float: none; width: calc(100% - 0px); height: 150px; overflow: hidden; padding: 0px 0px; margin: 10px 0px 10px 0px; }
         .item_box:nth-child(4n + 4), .item_box:nth-child(3n + 3), .item_box:nth-child(2n + 2){ margin: 10px 0px 10px 0px; }
         .item_box .image { display: inline-block; float: left; width: 150px; height: auto; margin-bottom: 10px; }
         .item_box .image img { width: 100%; height: auto; -webkit-border-radius: 20px; -webkit-border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius: 20px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topright: 0px; border-radius: 20px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; }
         .item_box .cat, .item_box .date { display: block; float: right; width: calc(100% - 170px - 2px); height: 20px; padding: 10px 10px 5px 10px; margin: 0px; text-align: left; }
         .item_box .info { display: block; float: right;  width: calc(100% - 170px - 2px); height: 100px; padding: 0px 10px 10px 10px; margin: 0px; text-align: left; }
         .item_box .info.bigger { height: 100px; line-height: 1.0em; }
         .item_box .info a { margin-bottom: 6px; text-align: left; border: 0px #000000 solid; }

         #category_items .info { margin-top: 10px; height: 110px; }

         /* Listing 2er */
         #listing div[class^="list_"]{ width: calc((100% / 2) - 4px) !important; min-width: calc((100% / 2) - 4px) !important; }
         /*#listing div[class^="list_"]:nth-child(1) { position: absolute; left: 20px; bottom: 0; top: 10px; z-index: 10000; background-color: #FFFFFF; }
         #listing div[class^="list_"]:nth-child(2) { margin-left: calc((100% / 2) - 4px); } */
}

@media (max-width: 460px) {
         #search_bar { top: 110px; }
         img.cat, img.vergleich  { width: calc(100% - 20px); height: auto; max-width: 420px; margin: 0px 10px 10px 10px; }

         .content_big.magazin .boxed { font-size: 1.1em; }
         .content_big.magazin ul { font-size: 0.8em; }
}