@charset "utf-8";
/* CSS Document */
/* große Viewports / für Bildschirme mit großer Auflösung (>1100) */
@media all and (min-width: 1100px) {
html, body{
margin: auto;
padding:0;
width: 90%;
justify-content: center;
	align-items: center;
	
/*overflow:hidden;*/
}
.flex-container {
    flex-direction: row;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	z-index: 100;
	  }
.flex-container2 {
	display: flex;
	flex-basis: 100%;
    flex-direction: row;
	
	
  }
	
.haupt{
	/*width:100%;*/
	height:  43em;/*656px;*/
	background-color: red;
    float:left;
	border-top: 2px solid white;
	overflow:hidden;
	/*	transition:height .2s ease-in-out;
	display: flex; 
	flex-direction: row ;*/
		}
 .grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	grid-gap: 2px;
	grid-auto-rows: min-max(80px, auto);
	grid-auto-flow: dense;
	
}

.c-1{ background: #1a535c; color: #ddd;}
.c-2{ background: #4ecdc4;}
.c-3{ background: #bfd7ea;}
.c-4{ background: #ff6b6b;}
.c-5{ background: #ffe66d;}

.card { min-height: 100px; background-size: cover; background-position: 50% 50%;}
.span-2 { grid-column-end: span 2; grid-row-end: span 2; min-height: 50%; }
.span-3 { grid-column-end: span 3; grid-row-end: span 3; min-height: 100%; }
	
	.header{
  	display: none;
  	}
	.cont1 {
	display: none;
	}
	.cont2{
	display: none;
	}
	
	.flex-item-l2 {
	width: 15%;
		align-items: center;
		justify-content: center;
		padding:2% 2% 2% 2%;
}
	.flex-item-l1 {
	width: 15%;
		align-items: center;
		justify-content: center;
		padding:2% 2% 2% 2%;
}
	.flex-item-l1 img{
	width: 90%;
}
	.flex-item-l2 img{
	width: 100%;
}
	.flex-item2 {
	position:static;
	top: 5%;
	left: 50%;
	flex:auto;
	flex-grow: 9;
	
	text-align: center;
	border: 2px solid white;
	background: linear-gradient(20deg, grey, lightgrey, darkblue);
	opacity: 0.85;
	text-decoration:none;
	font-family:'HelveticaBold';
	font-size: 20px;
    color: darkblue;
	z-index: 101;
}
	.flex-item3 {
	position: relative;
	flex:auto;
	flex-grow: 9;
	
	text-align: center;
	border: 2px solid white;
	background: linear-gradient(20deg, grey, lightgrey, darkblue);
	opacity: 0.85;
	text-decoration:none;
	font-family:'HelveticaBold';
	font-size: 20px;
    color: darkblue;
	z-index: 101;
}
.flex-item4 {
	flex: auto;	
	width: 70%;
	align-self: stretch;
	text-align: center;
	border: 2px solid white;
	border-radius: 4px; 
	background: linear-gradient(20deg, grey, lightgrey, darkblue);
	padding:2% 2% 2% 2%;
	margin: 2% 2% 2% 2%;
	font-family:'HelveticaBold';
	font-size: 1.5em;
    color: darkblue;
}	
	.flex-item5 {
	flex: auto;	
	width: 70%;
	text-align: center;
	justify-content: center;
	padding:0% 2% 0% 2%;
	margin: 0% 2% 0% 2%;
	font-family:'HelveticaBold';
	font-size: 1em;
    color: white;
}
	/* Navigation */
	nav > ul {
		flex-direction: row;
		height: 2.4em;
		vertical-align: text-bottom;
	}
	nav li {
	flex: 1;
		font-size: 1.2vw;
		z-index: 1000;
	}
}