.wrapper {
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 

    position: fixed;
    width: 100%;
    height: 100%;

    display: grid;
            grid-gap: 20px;
            grid-template-columns: minmax(0, 1fr) 3fr;
  	    grid-template-rows: auto 1fr auto;
            grid-template-areas:
                "header header"
                "sidebar contents"
                "footer footer";
}

@media screen and (max-width: 500px) {
    .wrapper {
        grid-template-columns: 2fr; 
  	grid-template-rows: auto 1fr auto;
	grid-template-areas:
            "header"
            "contents"
            "footer";
    }
   .content {
	text-align: center;
	padding: 1em 1em 1em 1em;
	margin: 0 auto;
   }
   .sidebar_left {
	display: none;
   }
   .visibles {
	display: inline;
   }
   #menu {
	display: none;
   }
   #menu-toggle {
    	cursor: pointer;
    	font-size: 24px;
	display: flex;
   }
   #ToggleButton {
   	display: flex; 
	justify-content: space-between; 
	align-items: center;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	width: 100%;
	border-style: none;
   }
   #handymenue {
	display: none;
	flex-direction: column;
	padding-left: 5px;
	padding-right: 5px;
   }
   .MenueButton {
	font-weight: bold;
	padding: 5px;
	text-align: center;
   }

}



@media screen and (min-width: 500px) {
    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ui-navbar {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        width: 100%;
    }	
  
   .li-navbar {
	flex:1;
   }
   .logo {
	width: 30%; 
	max-width: 100%;
	height: auto;
	max-height: 100%; 
   }
   #titel 
   {
	flex:2;
	text-align:center;
   }
   #login
   {
	flex:1;
	text-align:right;
   }
   .content {
	text-align: center;
	padding: 1em 5em 1em 10em;
	margin: 0 auto;
  }
 
  .visibles {
	display: none;
   }
  #menu-toggle {
  	display: none;
  }
  #handymenue {
	display: none;
	flex-direction: column;
  }
  .MenueButton {
  	border-style: none;
	text-align: left;
  }

}


header {
    grid-area: header;
    width: 98%; 
    top: 2%;
    margin: 0 auto;
    padding: 10px 0;
}


main {
    grid-area: contents;
    width: 97%; 
    overflow-y: auto;max-height: 800px;
    margin: 0 auto;
}

footer {
    grid-area: footer;
    width: 98%;

    display: grid;
    grid-template-columns: 35% 35% auto;
    text-align: center;
    margin: 0 auto;
}


body {
}



.sidebar_left {
 	grid-area: sidebar;
	width: 97%; 
	margin-left:5%;
	max-height: 800px;
}

.sidebar_menue {
        display: flex;
        flex-direction: column;
        height: 90%;
	max-height:800px; 
        justify-content: space-between;
        padding: 10px; 
	margin: 1em;
    }

    .ui-sidebar {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .sidebar_Info {
       
    }

.titel {
	font-size: 1.5em;
	font-weight: bold;
}

input[type=text], input[type=password], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  text-align: left;
}

label {
	display:block;
	text-align: left;
	padding: 6px;
}

input[type=submit] {
  padding: 12px 20px;
  border: none;
  border-radius: 5em;
  cursor: pointer;
  float:right;
}

input[type=submit]:hover {
}