h1{
	font-size:1.5em
}
h2{
	font-size:1.2em;
}
p {
	font-size:0.9em;
}
a {
	font-size:1.1em;
}
.logo{
	grid-area:logo;
}
.header {grid-area:header;}
.nav {grid-area:nav;}
.footer {grid-area:footer;}
.art1 {grid-area:art1;}
.art2 {grid-area:art2;}
.art3 {grid-area:art3;}
.art4 {grid-area:art4;}
.spalte1{grid-area:spalte1;}
.spalte2{grid-area:spalte2;}
.spalte3{grid-area:spalte3;}

@media screen and (min-width:80em){
.page-wrapper{
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr 1fr; /*Diese Zeile ist nixht unbedingt nötig*/
grid-template-areas:
'logo header header header header'
'nav art1 art2 art3 art4'
'nav spalte1 spalte2 spalte3 spalte3'
'footer footer footer footer footer'
}
.nav a{
display:block;
border-bottom:1px solid #333;
}
.nav a:hover {
background:red;
}
.spalte1 a{
display:block;
}
.spalte2 a{
display:block;	
}
.spalte3 a{
display:block;	
}
}

@media screen and (min-width:36em) and (max-width:79.938em){
.page-wrapper{
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr; /*Diese Zeile ist nixht unbedingt nötig*/
grid-template-areas:
'logo header header header'
'nav nav nav nav'
'art1 art1 art2 art2'
'art3 art3 art4 art4'
'spalte1 spalte2 spalte3 spalte3'
'footer footer footer footer'
}
.nav a{
display:inline-block;
border-right:1px solid #333;
float:left;
}
.nav a:hover {
background:red;
}
.spalte1 a{
	display:block;
}
.spalte2 a{
	display:block;
}
.spalte3 a{
	display:block;
}
}

@media screen and (max-width:35.938em){
.page-wrapper{
display:grid;
grid-template-columns:1fr;  /*Diese Zeile ist nixht unbedingt nötig*/
grid-template-areas:
'header'
'nav'
'art1'
'art2'
'art3' 
'art4'
'spalte1'
'spalte2'
'spalte3'
'footer'
}
.logo{
	display:none;
}
a {
	font-size:0.9em;
}
.nav a{
display:inline-block;
border-right:1px solid #333;
float:left;
}
.nav a:hover {
background:red;
}
.spalte1 a{
	display:block;
}
.spalte2 a{
	display:block;	
}
.spalte3 a{
	display:block;	
}
}