body {
    display: grid;
                gap: 0.5em;
}

/* 2-spaltiges Layout für breitere Viewports */
@media (min-width: 50em) {
        body {
                grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr min-content;
        }
}

header,footer {
        grid-column: 1 / -1;
}

header {
        background: #F1F3F4;
        border-color: #d5d5d5;
        justify-content: center;
        grid-template-columns: min-content 1fr;
gap: 1em;
}

header img {
        width: 800px;
        margin: auto;
        display: block;
}

header h1 {
        text-align:center;
}

main {
        background: #ccdd99;
        border-color: #df6c20;
}

aside {
        background: #eeffdd;
        border-color: #8db243;
}

footer {
        background: #e4ebf2;
        border-color: #8a9da8;
}

footer * {
  float: right;
        clear: right;
  margin: 0 0 1em;
}

body {
        margin: 0 auto;
    max-width: 80em;
    font-family: sans-serif;
}

header, nav, main, article, section, aside, footer {
   border-radius: 0 0.5em 0.5em;
   border: 1px solid;
   padding: 10px;
}