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

@media (max-width: 1300px) {
         #wrapper { background-size: 500px auto, 500px auto; }

         #header { height: 100px; }
         #logo { width: 300px; height: 150px; margin: 15px 0px 0px 0px; padding: 0px 0px 0px 0px; }
         #menu { width: calc(100% - 250px); height: 80px; }
         #menu span { float: right; display: block; text-align: center; width: calc(100% - 80px); padding-top: 5px; margin-right: 20px; border: 0px #FFFFFF solid; }

         #startseite .box4er { font-size: 0.9em; }
         #startseite .box4er .item b { font-size: 1.5em; height: 40px; }
         #startseite .box4er img { width: 120px; height: auto; }
}

@media (max-width: 1200px) {
         #wrapper { background-image: none, none; }

         #header, #menu { height: auto; }
         #logo { width: 300px; height: auto; margin: 8px 0px 0px 0px; padding: 0px 0px 0px 0px; }
         #menu a, #menu a.active:hover { background-size: auto 16px; margin: 3px 4px; padding: 4px 8px; font-size: 1.0em; }
}

@media (max-width: 1120px) {
         #menu span .x1 { display: none; }
         #splash .text { width: 50%; font-size: 1.2em;  }
}

@media (max-width: 980px) {
         .f_big       { font-size: 1.1em; }
         .f_bigger    { font-size: 1.2em; }

         #menu span .x2 { display: none; }

         #splash .text {  font-size: 1.1em; }
         #splash .text a.button { font-size: 1.1em; }
         #splash .image { width: calc(50%); }
         #splash .image img { width: 100%; max-width: 350px; height: auto; }
         #splash .text h1 { font-size: 1.8em; }

         #startseite .box4er .item { width: calc((100% / 2) - 50px); margin: 10px 10px; }
         #startseite .box4er .item b { font-size: 1.5em; height: auto; }

         #sidebar { width: 280px; }
         #content { width: calc(100% - 280px - 20px); }
}


@media (max-width: 880px) {
         body  { font-size: 0.9em; }
         #logo { width: 240px; }
         #header  { font-size: 1.1em; }
         #menu { width: calc(100% - 220px); }
         #menu span { width: calc(100% - 60px); }

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

         #splash .text { font-size: 1.1em; }
         #splash .text a.button { font-size: 0.9em; padding: 5px 15px; }
         #splash .text a.button img { display: none; }

         #startseite .bg0 .in .w50 img.w80 { width: 90%; max-width: 400px; height: auto; }
         #startseite .bg0 .in .w50 { width: 100%; float: none; text-align: center; }
         #startseite .bg0 .in h2 { text-align: center; }
         #startseite .bg0 .in .w50 .liste .item { min-height: 25px; }

         #sidebar { width: 200px; }
         #content { width: calc(100% - 200px - 20px); }

         #hinweis_button { width: calc(90% - 40px); left: calc(5% - 0px); font-size: 0.9em; padding: 10px 20px; }
         #hinweis_button img { width: 80px; height: 80px; }
         #hinweis_button button { width: calc(50% - 24px - 40px); }
}

@media (max-width: 820px) {
/*
         #menu div.header-gross { display: none; }
         #menu div.header-klein { display: inline; } */

         #menu span .x4 { display: none; }
         #menu a, #menu a.active:hover { font-size: 0.9em; }

         #sidebar, #content { float: none; width: calc(100% - 0px); }
         #sidebar .navigations-boxen { display: none; }

         #sidebar div.boxen-boxenkopf-mobil { display:block; }
         #sidebar nav.boxen-mobil { display:block; }

         #sidebar div.boxen-boxenkopf-normal { display:none; }
         #sidebar nav.boxen-normal { display:none; }

}

@media (max-width: 800px) {
         body { min-width: 560px; }
         #wrapper { min-height: auto; height: auto; }
         .in { min-width: 520px; }

         #header { height: auto; }
         #logo { display: block; width: calc(100% - 60px); min-width: 480px; height: 80px; text-align: center; border: 0px #000000 solid; margin-top: -10px; }
         #logo img { width: 80%; max-width: 300px; padding: 0; height: auto; margin: 0px auto; }

         #menu { display: block; float: none; width: calc(100% - 30px); border: 0px #000000 solid; height: auto; margin: 30px auto 0px auto; padding-bottom: 0px; }
         #menu span { float: none; display: block; text-align: center; width: calc(100% - 0px); height: auto; margin: 25px auto 0px auto; padding: 0px; border: 0px #FFFFFF solid; }
         #menu .submenu { display: block; min-height: 0px; margin: 0px 0px 5px 0px; padding-bottom: 5px; }

         #menu div.header-gross { display: inline; }
         #menu div.header-klein { display: none; }

         #cookie_info { position: fixed; top: 180px !important; left: 10vw; bottom: auto; width: calc(80vw - 30px); height: auto; -webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5); box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5); }
         #footer .footer_bar .in .f_l, #footer .footer_bar .in .f_r { float: none; width: calc(100% - 0px); text-align: center; }


         #startseite .box4er { font-size: 0.85em; }
         #startseite .box4er .item b { font-size: 1.3em; height: 30px; }
         #startseite .box4er .item { height: 240px; }

         .headerbanner, .footerbanner { overflow: hidden; text-align: center; }
}

@media (max-width: 640px) {
         #top_navi { width: calc(100% - 80px); margin: 5px auto 10px auto; padding: 0px 0px 0px 0px; text-align: center; }
         #top_navi .icons { float: none; display: block; width: 100%; text-align: center; margin-top: 5px; }
         #top_navi .icons b { display: none; float: none; }
}