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

@media (min-width: 45em) {
	body {
		grid-template-columns: 2fr 9fr 5fr;
		grid-template-rows: auto 1fr min-content;
			
	}
}


header,
nav,
main,
article,
section,
aside,
footer {
	border-radius: 0 0.5em 0.5em;
	border: thin solid;
	
}

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

header {
	
	background: #F1F3F4;
	border-color: #d5d5d5;
	//*display:grid;
	grid-template-columns: min-content 1fr;*//
	
}

nav {
   



	background: #fffbf0;
	border-color: #e7c157;
	


	
	

}


ul#left_nav {
	width: 10em;
	margin: 0;
	padding: 0.2em 0.8em 0.8em;
	background-color: #FF9933;
}

ul#left_nav li {
	list-style: none;
	margin: 0.4em;
	padding: 0;
}

ul#left_nav a {
	display: block;
	padding: 0.2em;
	text-decoration: none;
	font-weight: bold;
	border: 1px solid black;
	border-left-color: white;
	border-top-color: white;
	color: white;
	background-color: #FF0000;
}


html ul#left_nav a {
	
    width: 100%;
	//*width: 8.8em; *//
}


ul#left_nav a:hover {
	border-color: white;
	border-left-color: black;
	border-top-color: black;
	color: white;
	background-color: #FF6666;
}



main {
	padding: 0.5em;
	background: #ffede0;
	border-color: #df6c20;
}

aside {
	background: #99CCFF;
	border-color: #8db243;
	background-color: #FF9933;
}

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

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

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