/* 
 * CSS-Gestaltung der Bildergalerien für Start- und Stipendienseite
 * Version: V20210918a F.Tillmanns
 *
 */

/* ---------------------------------------------------------
 * Gestaltung der Bilder-Galerien in den Artikelseiten
 * bilderbox: die Box, die die Galerie jeweils enhält
 * galeriestart: Startseite, aktuell 4 Images
 *
 * Source: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
 *
`* Gestaltung für große Bildschirme (Defaults)
 -------------------------------------------------------- */

/* ------------------------------------------------------- */
/* Bilder-Gallerie zu Seite "Start":                       */
/* 4 x (273x124)                                           */
/* ------------------------------------------------------- */

#galeriestart {
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	margin: 0;
	padding: 0;
}

#galeriestart li {
	display: inline-block;
	list-style-type: none;
	padding: 0;
	margin: .6em;
	position: relative;
	border-radius: .6em;
	vertical-align: top;
}

#galeriestart1,
#galeriestart2,
#galeriestart3,
#galeriestart4	{
	padding: 0;
	margin: 0;
	background: rgba(255, 221, 85, 1);
	border: .3em solid rgba(255, 221, 85, 1);
	border-radius: .6em;	
	width: 273px;
}

/* ------------------------------------------------------- */
/* Bilder-Gallerie zu Seite "Stipendien":                  */
/* L1(250x300), L2(310x300), M1(467x300),R1(237x300)       */
/* ------------------------------------------------------- */

#galeriestipendien {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
}

#galeriestipendien li {
	display: flex;
	list-style-type: none;
	padding: 0;
	position: relative;
	border-radius: .4em;
	vertical-align: top;
	margin: .4em;	
}

#galeriestipendien1,
#galeriestipendien2,
#galeriestipendien3,
#galeriestipendien4 {
	padding: 0;
	margin: 0;
	background: rgba(255, 221, 85, 1);
	border: .2em solid rgba(255, 221, 85, 1);
	border-radius: .2em;
	height:280px;
}

/* ---------------------------------------------------------
 * Darstellung für mittlere Bildschirme 
 -------------------------------------------------------- */
 
@media screen and (max-width: 1200px) {
	
	#galeriestart {
		display: flex;
		justify-content: center;
	}	
	#galeriestart1,
	#galeriestart2,
	#galeriestart3	{
		width: 273px;
	}
	#galeriestart4 {
		display: none;
	}	

	/* -------------------------------------------------- */
		
	#galeriestipendien1,
	#galeriestipendien4 {
		display: none;
	}	
	#galeriestipendien2,
	#galeriestipendien3 {
		height: 250px;
	}
}
/* ---------------------------------------------------------
 * Darstellung für kleinere Bildschirme 
 -------------------------------------------------------- */
@media screen and (max-width: 1000px) {

	#galeriestart {
		display: flex;
		justify-content: center;
	}	
	#galeriestart2,
	#galeriestart3	{
		width: 250px;
	}
	#galeriestart1,
	#galeriestart4 {
		display: none;
	}
}
	
@media screen and (max-width: 800px) {

	#galeriestart {
		display: flex;
		justify-content: center;
	}	
	#galeriestart2,
	#galeriestart3	{
		width: 250px;;
	}
	#galeriestart1,
	#galeriestart4 {
		display: none;
	}

	/* -------------------------------------------------- */	
	
	#galeriestipendien1,
	#galeriestipendien2,
	#galeriestipendien4 {
		display: none;
	}
	#galeriestipendien3 {
		height: 220px;
	}
}

/* ---------------------------------------------------------
 * Sehr kleine Bildschirme Handy Hoch 
 -------------------------------------------------------- */
 
@media screen and (max-width: 680px) {
 
	#galeriestart {
		display: none;
	}
	#galeriestart1,
	#galeriestart2,
	#galeriestart3,
	#galeriestart4	{
		display: none;
	}	
	
	/* -------------------------------------------------- */
	
	#galeriestipendien1,
	#galeriestipendien2,
	#galeriestipendien4 {
		display: none;
	}
	#galeriestipendien3 {
		height: 200px;
	}
}