.containerSlideshow{
display:flex;
	justify-content:center;
	align-items:center;

}

	
.slideshow{	
	
	
	
	box-shadow: 0px 0px 10px gray;
	position:relative; /*um den einzelnen Folien absolute positionen zuordnen zu können die sich nur an slideshow element orientieren*/
	width:75%;
	height:700px;
		
		
		
}

.slide{
	
	position:absolute;
	top: 0;  /* das das Element bis an den Rand geht des "Elternelements"*/
	right:0;
	bottom:0;
	left:0;
	overflow:hidden;/* schneidet überstehende Bildelemente ab, wenn sie über das Elternelement hinausschauen (können nur noch vertikal hinausschauen da breite = 100% ist*/
	opacity:0;
	transition:opacity 2s;  /* variiert die geschwindigkeit beim übergang von opacity*/
}

.slide-bild{
	width:100%;
	  
}

.slide-textbereich{
	
	position:absolute; /* da das Bild schon den ganzen Bereich einnimmt muss ich hier auch absolute festlegen um es im elternelement noch unterbringen zu können, sonst rutscht es darunter und wird abgescnitten durch hidden*/
	  /* das das Element bis an den Rand geht des "Elternelements"*/
	right:0;
	bottom:0;
	left:0;
	top:85%;  /* soll erst ab 80% von oben beginnen*/
	background-color:rgba( 255, 0, 0, 0.5);  /*halbtransparent*/
	color:white;  /*wird vererbt an Unterlemeente*/
	text-align:center;
	font-family:sans-serif;
	padding:0 5% 0 5%;
	
}




.pfeil{
	
	position:absolute;   /* damit Pfeile in der Mitte liegen und Ort variable ist -- horizontale Ausrichtung fehlt allerdings noch*/
	top:0;
	bottom:0;
	font-size:50px;
	font-weight:bold;
	display:flex;  /*geht weil wir eigene span tacks gepackt haben um die spans zu positionieren*/
	justify-content:center;
	align-items:center;
	width:15%;
	color:rgba(255,0,0,0.5);
	user-select:none; /* da link ist müssen wir verhindern das cursor falsch aussieht und es wie text behandelt wird beim drüberfahren */
	cursor:pointer;
}
.pfeil:hover{
	color:red;
			
}

.pfeil-links{
	left:0;
	
	
	
}

.pfeil-rechts{
	right:0;
	
	
}

.indikatorenliste{
	
	position:absolute;
	padding:0;
	margin:0;
	color:red;
	top:0;
	left:0;
	right:0;
	list-style-type:none;
	font-size:40px;
	display:flex;
	justify-content:center;
	
	
}

.indikator{
	
	padding:  0 10px; /* extra padding verwendet, damit der anklickbare Bereich für Nutzer größer wird, bei margin wäre das nicht der Fall gewesen*/
	user-select:none; /* da link ist müssen wir verhindern das cursor falsch aussieht und es wie text behandelt wird beim drüberfahren */
	cursor:pointer;
	opacity: 0.5;
	transition:opacity 2s;  /* variiert die geschwindigkeit beim übergang von opacity*/
	
}
.aktiv{        
	opacity:1;		/* muss unter der indikatorklasse stehen, damit der wert später überschrieben der 0.5er Wert aus .indikator überschrieben wird */
	
	
}




@media (min-width:320px){


.slideshow{		
	
	box-shadow: 0px 0px 10px gray;
	position:relative; 
	width:95%;
	height:200px;
	}
	
	
	.slide-ueberschrift{
	font-size:0.63em;
	margin:1px;
	}
	
	.slide-beschreibung{
	font-size:0.42em;
	margin:0;
	}
		
		
		
}




@media (min-width:420px){


.slideshow{		
	
	box-shadow: 0px 0px 10px gray;
	position:relative; 
	width:95%;
	height:240px;
	}
	
	
	.slide-ueberschrift{
	font-size:0.65em;
	margin:2px;
	}
	
	.slide-beschreibung{
	font-size:0.45em;
	margin:0;
	}
		
		
		
}






@media (min-width:520px){


.slideshow{		
	
	box-shadow: 0px 0px 10px gray;
	position:relative; 
	width:95%;
	height:310px;
	}
	
	
	.slide-ueberschrift{
	font-size:0.8em;
	margin:2px;
	}
	
	.slide-beschreibung{
	font-size:0.6em;
	margin:0;
	}
		
		
		
}


@media (min-width:620px){

.slideshow{		
	
	box-shadow: 0px 0px 10px gray;
	position:relative; 
	width:95%;
	height:390px;
	}
	
	
	.slide-ueberschrift{
	font-size:0.9em;
	margin:5px;
	}
	
	.slide-beschreibung{
	font-size:0.7em;
	margin:0;
	}
		
		
		
}
	
@media (min-width:720px){

	.slideshow{		
	
	box-shadow: 0px 0px 10px gray;
	position:relative; /*um den einzelnen Folien absolute positionen zuordnen zu können die sich nur an slideshow element orientieren*/
	width:95%;
	height:450px;
	}
	
	.slide-ueberschrift{
	font-size:1em;
	margin:7px;
	}
	
	.slide-beschreibung{
	font-size:0.8em;
	margin:0;
	}	
	
}

@media (min-width:950px){

	.slideshow{
	box-shadow: 0px 0px 10px gray;
	position:relative; /*um den einzelnen Folien absolute positionen zuordnen zu können die sich nur an slideshow element orientieren*/
	width:85%;
	height:500px;
	}
	
	.slide-ueberschrift{
	font-size:1.1em;
	margin:7px;
	}
	
	.slide-beschreibung{
	font-size:0.9em;
	margin:0;
	}
	
}


@media (min-width:1200px){

	.slideshow{box-shadow: 0px 0px 10px gray;
	position:relative; /*um den einzelnen Folien absolute positionen zuordnen zu können die sich nur an slideshow element orientieren*/
	width:75%;
	height:495px;
	}
	
	.slide-ueberschrift{
	font-size:1.1em;
	margin:7px;
	}
	
	.slide-beschreibung{
	font-size:1.0em;
	margin:0;
	}
	
}


@media (min-width:1450px){

	.slideshow{box-shadow: 0px 0px 10px gray;
	position:relative; /*um den einzelnen Folien absolute positionen zuordnen zu können die sich nur an slideshow element orientieren*/
	width:75%;
	height:590px;
	}
	
	.slide-ueberschrift{
	font-size:1.4em;
	margin:20px;
	}
	
	.slide-beschreibung{
	font-size:1.2em;
	margin:0;
	}
}
 


@media (min-width:1900px){

	.slideshow{box-shadow: 0px 0px 10px gray;
	position:relative; /*um den einzelnen Folien absolute positionen zuordnen zu können die sich nur an slideshow element orientieren*/
	width:75%;
	height:680px;
	}
}

@media (min-width:2200px){

	.slideshow{box-shadow: 0px 0px 10px gray;
	position:relative; /*um den einzelnen Folien absolute positionen zuordnen zu können die sich nur an slideshow element orientieren*/
	width:75%;
	height:770px;
	}
}