body    { color: #191970; font-size: 100%; font-family: Helvetica, Arial, sans-serif; background-color: white; margin: 0; padding: 1em; min-width: 150px;max-width: 95%; display: grid;
	grid-template-columns: repeat(3, 1fr);
}

p  { width: 90% 
}
h1   { text-align: center; margin: 0 0 0.7em; padding: 0.3em; width: 80%; color:black; font-size:120%
}
h2    { text-align: center; margin: 0 0 0.7em; padding: 0.3em; width: 80%; color:black
}
h3   { ext-align: center; margin: 0.2em 0 0.7em; padding-right: 0.3em; padding-bottom: 0.3em; padding-left: 0.3em; color: black; width: 90% 
}
.content          { margin-top: 2em; margin-left: 18em; position: relative; z-index: 3; top: 5px; left: 0.5em; max-width: 80% 
}
.spalterechts     { margin: 1em; padding: 0.5em; position: relative; top: 180px; left: 2em; width: 20%; height: 90%;  float: right 
}
.seitenfuss     { text-align: center; margin: 0; padding: 0.1em; position: absolute; clear: both; border: solid 1px 
}
td  { font-weight: bold; text-align: center; border-width: 2px; border-color: transparent; outline: solid 2px gray 
}
.monatleft     { left: 0.5em; width: 45%; float: left 
}
caption { font-size: 1.2em; font-weight: bold 
}
.monatright    { position: relative; left: 1em; width: 45% 
}
.monatswahl { text-align: center; margin: 10px 10px 30px; padding: 5px; width: 50% 
}
.navigation   { font-size: 0.91em; margin-left: 1em; position: absolute; z-index: 4; top: 10em; left: 0.1em; width: 15%; float: left 
}
img {margin-top : 0.5em; margin-bottom: 0.05em; max-width: 90%; height: auto;
}
.flex{	display: flex; justify-content: center; align-items: center; 
}


header {
	background: #F1F3F4;
	border-color: #d5d5d5;
	grid-column: 1 / 6;
	grid-row: 1 / 2;
}

nav {
	background: #fffbf0;
	border-color: #e7c157;
	grid-column: 1 / 4;

	grid-template-columns: 1fr 1fr 1fr 1fr;	
}

article {
	background:none;
	border-color: #df6c20;
	grid-column: 1 / 4;
	grid-row: 2 / 4;
}

section {
	text-align: center
}

aside {
	background: #ebf5d7;
	border-color: #8db243;
	grid-column: 5 / 6;
}

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
	grid-column: 1 / 6;
	grid-row: 4 / 5;
}

header,
nav,
main,
article,
section,
aside,
footer {
	
	border: 1px solid;
	padding: .5em;
	margin: .5em;
}

/*neues*/
.red {
	background:red
}
.blau {
	background:#87CEFA;
}
.green {
	background:green
}
.flex-container {
	display: flex;
	flex-direction: column;
}
/* große Viewports */

@media all and (min-width: 30em) {
	.flex-container {
		flex-direction: row;
	}
}

.flex-item {
	border: 1px solid;
	margin: .5em;
	padding: .5em;
	background:  #e6f2f7;
}