html {
  font-size: 62.5%; /* trick to make 1rem = 10px */
}

body {
  background-color:#fff;
  margin:0;
  padding:0;
  font-family: Verdana,Arial;
}



a {
 text-decoration:none;
 color:#000;
}

a:hover {
  color:#333;
}

/* Home */
body.home {
    background-color:#fff;
}

body.home nav a {
    color:#fff ;
}

body.home nav a:hover {
  color:#eee;
}

body.home .home_footer {
    background-color:#fff;
    text-align:center;
    padding-top: 1rem;
    font-size:  2rem;
}




.container {
  padding-left: 15rem;
  padding-top: 5rem;    
  display:grid;
  grid-template-columns: 30rem 1fr 16rem;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
      "header header header"
      "nav content sidebar"
      "footer footer footer";
  min-height: 100vh;
}


body.home .container {
  background: #fff url("../img/background.png");
  background-size:100% 100%;
  background-repeat:no-repeat;
  min-height: 80vh;		    
}

body.home footer {
}


/* Naming the Area */
header {
    grid-area:header;
    padding: 2rem;
/*    background-color: red; */
}

nav {
    grid-area:nav;
    padding: 2rem;
    font-size: 2rem;
  /*  background-color: green;   */ 
}

main {
    grid-area:content;
    padding: 2rem;
    font-size: 2rem;    
    /* background-color: blue;      */  
}

aside {
    grid-area:sidebar;
    padding: 2rem;
/*    background-color: yellow;      */  
}

footer {
    grid-area:footer;
    padding: 2rem;
/*    background-color: grey;        */
}

ul.menu { 
  margin: 0;
  padding: 0;
  list-style:none;
}

ul.menu li { 
  margin: 0.5rem 0 0 0 ;
  padding: 0;    
}

ul.menu li a{ 
  font-size: 2rem;
}



body.home ul.menu li a.m_home,
body.impressum ul.menu li a.m_impressum,
body.datenschutzerklaerung ul.menu li a.m_datenschutzerklaerung {
  font-weight:bold;
}







@media (max-width: 1024px){ /* only need for smaller screens */
    .container {
        padding-left: 0rem;
        padding-top: 0rem;    	
	grid-template-columns: 1fr;
	grid-template-rows: auto minmax(5rem,auto) 1fr minmax(5rem, auto) auto;
	grid-template-areas:
	    "header"
	    "nav"
	    "content"
	    "sidebar"
	    "footer";
    }
}




