html {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: .5em .5em;
  font: normal 1em Arial, sans-serif;
  /* Keine Mindestschriftgröße! Dies wird dem Browser, bzw. dem Nutzer überlassen! */
  color: #593825;
  background: #d9d9d9;
}

main {display: block;}

.flex-container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

/* große Viewports */
@media all and (min-width: 30em) {
.flex-container {
    flex-direction: row;
  }
}

.flex-item {
	flex: 1;
	min-width: 20em;
	border: 4px solid;
	border-color: #8c8c8c;
	margin: .2em;
	padding: .5em;
	background: #d9d9d9;
	background-image: none;
}

p.flex-item {
	font-weight: bold;
	text-align: justify;
	min-width: 5em;
}
/* 
.flex-item:nth-of-type(2) {
	background: #fdfcf3;
}

.flex-item:nth-of-type(3) {
	background: #ebf5d7;
}

.flex-item:nth-of-type(4) {
	background: #e6f2f7;
}

.flex-item:nth-of-type(5) {
	background: hsla(277, 53%, 73%, 0.3);
}
 */
.header-banner {
  background: url("../img/Design02-green.svg") no-repeat right,
  #000 repeating-linear-gradient(-45deg, #d9d9d9, #d94625 8em);
  background-size: contain, auto;
  padding: .5em 2em .5em 2em;
}