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

@media (max-width: 1300px) {
         #layout_header .layout_logo { width: 300px; margin: 15px 0px 0px 0px; padding: 0px 0px 0px 0px; }
         #layout_header .layout_menu { width: calc(100% - 300px); }

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

@media (max-width: 1200px) {

}

@media (max-width: 1120px) {
         #layout_header .layout_menu span .x1, #layout_header .layout_menu span .header-gross a:first-child { display: none; }
         #layout_splash .text { font-size: 1.2em;  }
         #layout_splash .text a.button { height: auto !important; }

         #layout_sidebar { width: 220px; }
         #layout_content { width: calc(100% - 220px - 20px); }
}

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

         #layout_header .layout_menu a, #layout_header .layout_menu a.active:hover { background-size: auto 16px; margin: 3px 4px; padding: 4px 8px; font-size: 1.0em; }
         #layout_header .layout_menu span { margin-top: 30px; padding: 5px 5px; }
         #layout_header .layout_menu span button { padding: 2px 2px; }
         #layout_header .layout_menu span button svg { height: 20px; width: 20px; }
         #layout_header .layout_menu span button span { font-size: 10px; right: -5px; }

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

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

         #layout_sidebar .box .box_head, .box .box_head, .box .box_head a { font-size: 1.1em; }

         div.kampagnen-kategorien-box, div.kampagnen-startseitenbox-box { width:calc(100% / 2 - 16px - 2px - 16px) !important; }
}


@media (max-width: 880px) {
         body  { font-size: 0.9em; }

         #layout_header  { width: calc(100% - 14px);font-size: 1.0em; margin: 20px 0px 10px 0px; padding: 5px 5px; }
         #layout_header .color { width: calc(100% - 10px); height: 80px; padding: 5px 5px; }
         #layout_header .layout_logo { width: 240px; margin: 10px 0px 0px 0px; }
         #layout_header .layout_menu { width: calc(100% - 240px); }
         #layout_header .layout_menu span { margin-top: 18px; padding: 5px 5px; }

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

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

         #layout_sidebar .box .box_head { height: auto; line-height: auto; padding: 0px 10px 0px 10px; margin-bottom: 10px; background-image: none; font-size: 1.1em; }
         #layout_sidebar .box .box_head, .box .box_head, .box .box_head a { font-size: 1.0em; }

         #layout_footer .f_l, #layout_footer .f_r { float: none;  width: calc(100% - 20px); text-align: center; }

         #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) {
         #layout_sidebar, #layout_content { float: none; width: calc(100% - 0px); }
         #layout_sidebar .navigations-boxen { display: none; }

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

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


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

         #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); }

         #layout_header .layout_logo { width: 200px; }
         #layout_header .layout_menu { width: calc(100% - 200px); }

         #layout_splash .text { width: 100%; }
         #layout_splash .image { display: none; }

}

@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; }

         #layout_header .color { display: block; height: auto; }
         #layout_header .layout_logo { display: block; float: none; width: calc(100% - 0px); cursor: pointer; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: center; }
         #layout_header .layout_logo img { width: auto; padding: 0; margin: 5px; height: 50px; }
         #layout_header .layout_menu { display: block; float: none; width: calc(100% - 0px); margin: 0px 0px 0px 0px; padding: 0px 0px; text-align: center; }
         #layout_header .layout_menu span { float: none; display: inline-block; padding: 5px 15px; margin: 0px 15px 10px 15px; }
}