@media only screen and (max-width: 1200px) {
    .mewnu_loginout{
        right: 0px;
    }
}

@media only screen and (max-width: 1000px) {
    .menu_loginout{
        right: 130px;
    }
    .menu_admin{
        display:none;
    }
}


@media only screen and (max-width: 900px), screen and (max-height: 700px) {
    #header {
        height: 104px;
    }
    #header h2 {
        top: -20px;
        left: 70px;
    }
    #header h2 div#stoerdienst_warnung {
        font-size: 0.45em;
        padding-top: 2px;
        padding-bottom: 2px;
        top: 0px;
    }
    #header h2 div#stations_warnung {
        font-size: 0.35em;
        padding-top: 2px;
        top: 20px;
    }
    #bremen_logo{
        position: absolute;
        top: 0px;
        left: 0px;
    }
    #menu {
        width: calc(100% - 146px);
        bottom: 36px;
        left: 68px;   
    }
    #submenu {
        width: calc(100% - 146px);
        bottom: 5px;
        left: 68px;   
    }
    
    .menu_loginout {
        right: 105px;
    }

    #hydrotec_logo{
        position: absolute;
        top: 0px;
        right: 60px;
    }

    #gesig_logo{
        position: absolute;
        top: 0px;
        right: 0px;
    }
    #message_history {
        display: none;
    }


  .maincontent{
     padding: 0;
     position: relative;
     height: calc(100% - 104px);
     overflow-y: auto;
  }
  p#stoerruf {
    top: -10px;
  }

  .maincontent_mit_auswahl{
     padding: 0px;
     height: calc(100% - 166px);
     overflow-y: auto;
  }

  #auswahl_bach{
    padding-left: 0px;
    float: left;
  }

  #auswahl_zeitbereich{
    padding-right: 0px;
    padding-left: 0px;
    float: right;
  }

}

@media only screen and (max-width: 800px) {
    .menu_item, .menu_aktiv, .menu_item_bl, .menu_loginout {
        font-size: 0.7em;
    }
    #header {
        height: 72px;
    }
    #header h2 {
        top: -11px;
        left: 59px;
        font-size: 1em;
    }
    #header h2 div#stoerdienst_warnung {
        font-size: 0.7em;
        padding: 4px 0 3px 30px;
        left: 210px;
        top: 0px;
    }
    #header h2 div#stations_warnung {
        font-size: 0.55em;
        padding: 3px 0 2px 30px;
        left: 212px;
        top: 20px;
    }
    #menu {
        bottom: 27px;
    }
    #submenu {
        bottom: 2px;
    }
}

@media only screen and (max-width: 700px), screen and (max-height: 500px) {
    #header {
        height: 50px;
        background-color: #AAFFAA;
        line-height: 25px;
        vertical-align: middle;
    }
    #header h2 #normal_head_h2 {
        top: -13px;
        left: 55px;
        font-size: 1em;
    }
    #header h2 #flucht_head_h2 {
        display: none;
        font-size: 1em;
    }
    #header h2 div#stoerdienst_warnung {
        
        font-size: 0.7em;
        padding: 0px 0 6px 30px;
        left: -25px;
        top: 0px;
    }
    #header h2 div#stations_warnung {
        font-size: 0.55em;
        padding: 0px 0 5px 30px;
        left: -23px;
        top: 20px;
    }


    #menu, #menu div {
        width: 150px;
        top: 50px;
        right: 0px;
        float: none;
        left: auto;
        z-index: 110;
    }
    #submenu, #submenu div {
        width: 100px;
        top: 80px;
        right: 150px;
        float: none;
        left: auto;
        z-index: 112;
    }
    body {
        overflow-x: hidden;
    }

    #menu{
        position: absolute;
        transform: translateX(150px);
        transition: 0.3s;
        /*display:none;*/
    }

    #submenu{
        position: absolute;
        transform: translateX(250px);
        transition: 0.5s;
        /*display:none;*/
    }

    .not_first, .menu_test, .menu_admin{
        border-width: 3px 0px 0px 0px;
    }

    .menu_item, .menu_aktiv, .menu_item_bl, .menu_loginout, .menu_admin{
        font-size: 1em;
        width: 134px;
        position: relative;
        z-index: 111;
    }
    #submenu .menu_item, #submenu .menu_aktiv {
        font-size: 0.7em;
        width: 100px;
        z-index: 113;
    }
    .menu_loginout {
        right: 0px;
    }

    #bremen_logo{
        height: 50px;
        width:50px;
        adisplay: none;
    }
    
    #hydrotec_logo{
        display: none;
    }

    #gesig_logo{
        display: none;
    }

    #mobile_nav{
        position: absolute;
        top: 5px;
        right: 10px;
        display: block;
    }

  .maincontent{
     padding: 0;
     position: relative;
     height: calc(100% - 50px);
     overflow-y: auto;
  }

}

@media only screen and (max-height: 500px) {
  /* Bilder.php */
  .imgdiv_rechts{
    height: 100%;
    width: calc(50% - 20px);
    float:right;
    padding:0px;
  }

  .imgdiv_links{
    height: 100%;
    width: calc(50% - 20px);
    float:left;
    clear:right;
    padding:0px;
  }

  bach_img{
    width: 100%;
    height: 100%;
  }
/* ende Bilder.php */
}