#Box {
	width: 100%;
	height:100%;
	display: grid;
	gap: 0.5em;
	grid-template-columns: 50px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 50px;
	/* 1fr x12 ergibt 12 Spalten */

	grid-template-rows: min-content min-content min-content min-content min-content min-content min-content min-content min-content min-content; 
	/* grid-template-rows: auto 50fr 50fr 50fr 50fr min-content; */
	/* min-content = Höhe auf 0 solange keine Inhalt */
}

.box {
	background-color: #FFFFFF;
}





#Banner {
    width: 100%;
	margin-top: 0px;
	margin-bottom: 10px;
	display: flex;
	grid-column: 1/span 12;
	grid-row: 1
}
.banner{
	background-color: #FFFFFF;
}
	
	
	

#Abstand {
	width: 100%;
	margin-top: 50px;
	margin-bottom: 00px;
	display: flex;              /*  flex bricht im Container um  */
	grid-column: 1/span 1;      /*  in welcher Spalte/über wieviele Spalten  */
	grid-row: 2                 /*  in welcher Spalte  */
}
.abstand{
	background-color: #FFFFFF;
}






#TextBox{
	width: 100%;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 5px;
	text-align: left; /* Verärbung des Textformat */
	display: flex;
	flex-direction: column; /* Anordnung des Inhaltes von oben nach unten */;
	justify-content: flex-end;
}


#TextBoxU{
	width: 100%;
	padding-top: 5px;
	margin-bottom:5px;
	padding-left: 5px;
	padding-right: 5px;
}
.textbox-ueberschrift{
	font-family: Arial;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 2px;
	text-decoration: none;
	margin-bottom: 0px;
	color: #808080;
	background-color: #FFFFFF;
}

#TextBoxT{
	width: 100%;
	padding-top: 0px;
	margin-bottom:0px;
	padding-left: 5px;
	padding-right: 5px;

}
.textbox-text{
	text-decoration: none;
	font-family: Arial;
	font-size: 20px;
	font-weight: normal;
	margin-bottom: 0px;
	color: #000000;
	background-color: #FFFFFF;
}



	
	
#PicBox {
	width: 100%;
		display: flex;

	flex-direction: column; /* Anordnung des Inhaltes von oben nach unten */;
	justify-content: flex-end;

}
.Contentpic{
}
.teaserpic{
	width: 100%;
}
	
	
	
	
.teaser{
	background-color: #FFFFFF;
}
	
	

#Teaser01 {
	width: 100%;
	margin-top: 0px;
	margin-bottom: 10px;
	display: flex; 
	grid-column: 2/span 4;
	grid-row: 3;
	padding-top: 0px;
	-flex-direction: inherit; 
	flex-direction: column; 
	justify-content: flex-end;
}


#Teaser02 {
	width: 100%;
	margin-top: 0px;
	margin-bottom: 10px;
	display: flex;             
	grid-column: 2/span 4;
	grid-row: 4;
	padding-top: 0px;
	flex-direction: column; 	
	justify-content: flex-end;
}


#Teaser03 {
	width: 100%;
	margin-top: 0px;
	margin-bottom: 10px;
	display: flex;             
	grid-column: 8/span 4;
	grid-row: 3;
	padding-top: 0px;
	flex-direction: column; 	
	justify-content: flex-end;
}


#Teaser04 {
	width: 100%;
	margin-top: 0px;
	margin-bottom: 10px;
	display: flex;              
	grid-column: 8/span 4;
	grid-row: 4;
	padding-top: 0px;
	flex-direction: column; 
	justify-content: flex-end;
}

#Teaser05 {
	width: 100%;
	margin-top: 50px;
	margin-bottom: 25px;
	display: flex;              
	grid-column: 2/span 4;
	grid-row: 5;
	padding-top: 0px;
	flex-direction: column; 
	justify-content: flex-end;
}

#Teaser06 {
	width: 100%;
	margin-top: 5px;
	margin-bottom: 10px;
	display: flex;              
	grid-column: 8/span 4;
	grid-row: 5;
	padding-top: 100px;
	flex-direction: column; 
	justify-content: flex-end;
}




 @media	only screen and (max-width: 1100px) {
 
  


 
 
 } 
 
 
 
 
 @media only screen and (max-width: 700px) { 
 
 #Box {
	grid-template-columns: 10px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 10px;
	/* 1fr x12 ergibt 12 Spalten */
}

 #Teaser01 {
	width: 100%;
	margin-top: 0px;
	margin-bottom: 30px;
	display: flex; /*  flex bricht im Container um  */;
	grid-column: 2/span 10;
	grid-row: 1;
	padding-top: 0px;
	flex-direction: column;   /* Anordnung des Inhaltes der erste nach links, der zweite nach rechts */;
	justify-content: flex-end;
}


#Teaser02 {
	width: 100%;
	margin-top: 0px;
	margin-bottom: 30px;
	display: flex;              /*  flex bricht im Container um  */
	grid-column: 2/span 10;
	grid-row: 2;
	padding-top: 0px;
	flex-direction: column; /* Anordnung des Inhaltes der erste nach links, der zweite nach rechts */;
	justify-content: flex-end;
}


#Teaser03 {
	width: 100%;
	margin-top: 0px;
	margin-bottom: 30px;
	display: flex;              /*  flex bricht im Container um  */
	grid-column: 2/span 10;
	grid-row: 3;
	padding-top: 0px;
	flex-direction: column; /* Anordnung des Inhaltes links/rechts tauschen */
	justify-content: flex-end;
}


#Teaser04 {
	width: 100%;
	margin-top: 0px;
	margin-bottom: 30px;
	display: flex;              /*  flex bricht im Container um  */
	grid-column: 2/span 10;
	grid-row: 4;
	padding-top: 0px;
	flex-direction: column; /* Anordnung des Inhaltes der erste nach links, der zweite nach rechts */;
	justify-content: flex-end;
}

#Teaser05 {
	width: 100%;
	margin-top: 0px;
	margin-bottom: 30px;
	display: flex;              /*  flex bricht im Container um  */
	grid-column: 2/span 10;
	grid-row: 5;
	padding-top: 0px;
	flex-direction: column; /* Anordnung des Inhaltes links/rechts tauschen */
	justify-content: flex-end;
}

#Teaser06 {
	width: 100%;
	margin-top: 0px;
	margin-bottom: 30px;
	display: flex;              /*  flex bricht im Container um  */
	grid-column: 2/span 10;
	grid-row: 6;
	padding-top: 0px;
	flex-direction: column; /* Anordnung des Inhaltes von oben nach unten */;
	justify-content: flex-end;
}