body{
    margin: 5px;
    font-family: Calibri;
    background: white;
    background: url(Bilder/background.png) no-repeat;
    background-position: bottom;
    background-size: 100%;
    background-position: bottom;
}

@media(min-width: 30em){
    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "head"
                        "nav"
                        "main"
                        "aside"
                        "footer";
    }
}

@media (min-width: 40em){
    body{
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "head""head"
                           "nav""nav"
                           "main""main"
                           "aside""aside"
                           "footer""footer"
    }
}

@media(min-width: 60em){
    body{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-template-areas:    "head  head head head"
                           "nav nav nav nav"
                           "aside main main main"
                           "foot  foot foot foot";}
}

header, nav, main, aside, footer {
    padding: 10px;
    margin: 2px;
    width: auto;
}

.box {
    background-color: orangered;
    grid-area: nav;
    text-align: center;
}
.weiß { color: white;
        font-size: 20px;
    text-decoration: none;
}

a {
    color: black;
}

h1 { text-align: right;}

header {
    background-color: #ffffff;
    grid-area: head;
}

nav {
    background-color: #ffffff;
    grid-area: nav;
}

main {
    background-color: transparent;
    grid-area: main;
}

aside {
    background-color: transparent;
    grid-area: aside;
}

/*footer {
    background: url("Bilder/background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    background-attachment: fixed;
} */
footer {
    grid-area: foot;
    text-align: center;
}

a:hover{ table-layout: auto}