body {
	color: white;
	background-color: black;
	margin: 0;
	box-sizing: border-box;
	font-family:Arial, Helvetica, sans-serif;
}
	
body *{
	box-sizing: border-box;
}

.banner{
	display:flex;
	justify-content: center;
}

.flex-container {
	width: 100%;
	height: 100vh;
	padding: 2%;
	display: grid;
	grid-template-columns: calc(100%/8) calc(100%/8) calc(100%/8) calc(100%/8) calc(100%/8) calc(100%/8) calc(100%/8) calc(100%/8);
	justify-content: center;
	align-items: center;
}


.flex-item-title {
	grid-column: span 8;
	padding: 10px;
	margin-top: 32px;

	justify-self: center;
}

.sectionTitle {
	min-width: 224px;
}

.flex-item-menue {
	background-color: #5964B9;
	grid-column: span 8;
	padding: 8px;
	margin-bottom: 32px;

	width: 100%;

	justify-self: center;
}

.flex-item-text {
	grid-column: span 8;
	padding: 8px;
	font-size: 1.0rem;
	line-height: 1.5rem;

	justify-self: center;
	max-width:960px;
}

.flex-item-text p:first-child{
	margin-top: 0;
}


.flex-item-2 {
	padding: 6px;
	background-color: black;

	grid-column: span 2;

	justify-self: stretch;
	align-self: stretch;
}

.flex-item-3 {
	padding: 6px;
	background-color: black;

	grid-column: span 3;

	justify-self: stretch;
	align-self: stretch;
}

.flex-item-4 {
	padding: 6px;
	background-color: black;

	grid-column: span 4;

	justify-self: stretch;
	align-self: stretch;
}


.flex-item-8 {
	grid-column: span 8;

	justify-self: stretch;
	align-self: stretch;
}

.flex-item-2 img,
.flex-item-3 img,
.flex-item-4 img{
	border-radius: 3%;
	filter: brightness(1);
}

.flex-item-2 img:hover,
.flex-item-3 img:hover,
.flex-item-4 img:hover{
	filter: brightness(1.1);
}

.button{
	display: inline-flex;
}

.button img {
	height:50px;
	margin:6px;
	
	transition-property: transform;
  	transition-duration: 0.1s;
}

.button:hover img {
	transform: scale(1.05);	
	transition-property: transform;
  	transition-duration: 0.1s;
}

.gallery{
	display: flex;
}

.link,
.link:visited{
	color: #5964B9;
}

.link:hover,
.link:focus{
	color: #e7effb;
}


/*Für kleine Bildschirme*/
@media only screen and (max-width: 600px) {
	.banner{
		overflow: clip;
	}
	
	.banner img{
		min-width: 480px;
	}
	
	.button img {
		height: 36px;
	}
}


/*Für sehr kleine Bildschirme*/
@media only screen and (max-width: 320px) {
	.flex-container {
		padding: 0;
	}
}