body {
	display: grid;
	gap: 0.5em;
}
/* 2-spaltiges Layout für breitere Viewports */

@media (min-width: 30em) {
	body {
		grid-template-columns: 1fr 3fr;
		grid-template-rows: auto 1fr min-content;
	}
}

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

header {
	border-color: #d5d5d5;
	display: grid;
	grid-template-columns: min-content 1fr;
	gap: 1em;
}

header img {
	width: 5em;
}

main {
	border-color: #df6c20;
}

aside {
	border-color: #8db243;
}

footer {
	border-color: #8a9da8;
}

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

body {
	margin: 0 auto;
	max-width: 99%;
	font-family: sans-serif;
}

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