*
body {
    margin:0px;padding:0px;background-color:antiquewhite;color:white;
    }
nav  {grid-area: navi; background-color:lightblue;}
header {grid-area: kopf; background-color:tomato;}
@media screen and (min-width: 1025px) and (orientation: landscape){
article {box-sizing: border-box;
    display: grid;
    grid-template-rows: 0.5fr 2.5fr 3fr 0.5fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 1vh;
    grid-row-gap: 1vh;
    
    
    grid-template-areas:  "navi navi navi navi" 
                          "kopf kopf kopf kopf"
                          "inhalt1 inhalt2 inhalt3 inhalt4"
                          "fuss fuss fuss fuss";

    height: 100vh;
    max-width:1200px;
    margin: auto;
}}

@media screen and (min-width: 600px) and (max-width: 1024px){
article {box-sizing: border-box;
    display: grid;
    grid-template-rows: 0.5fr 2.5fr 3fr 0.5fr;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1vh;
    grid-row-gap: 1vh;
    
    
    grid-template-areas:  "navi navi navi navi" 
                          "kopf kopf kopf kopf"
                          "inhalt1 inhalt2 inhalt3 inhalt4"
                          "fuss fuss fuss fuss";

    height: 100vh;
    max-width:1200px;
    margin: auto;
}}

@media screen and (max-width:480px) and (orientation:portrait)
{
article {
    display: grid;
    grid-template-rows: 0.5fr 2.5fr 3fr 0.5fr;
    grid-template-columns: 1fr 2fr;
    grid-column-gap: 1vh;
    grid-row-gap: 1vh;
    grid-template-areas:  "navi navi navi navi" 
                          "kopf kopf kopf kopf"
                          "inhalt1 inhalt2 inhalt3 inhalt4"
                          "fuss fuss fuss fuss";

    height: auto;
    max-width:1200px;
    margin: auto;
}}


section#c1 {grid-area: inhalt1; background-color: lightgreen; color:blue;}
section#c2 {grid-area: inhalt2; background-color: lightgreen; color:blue;}
section#c3 {grid-area: inhalt3; background-color: lightgreen; color:blue;}
section#c4 {grid-area: inhalt4; background-color: lightgreen; color:blue;}

footer     {grid-area: fuss; background-color: darkblue}