@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* 	{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
		}


body	{
		background-image: linear-gradient(180deg, #0A2A29 0%, #1F1F1F 100%);	
		background-size: cover;
		background-attachment: fixed;	
		}


#gallerietexth2 {
		margin-left:  0;
		margin-top:  0;
		margin-right: 	0;
		margin-top: 	0;
		margin-bottom:  0; 
		padding-top: 		2%;
		padding-bottom: 	0%;
		padding-left: 		2%;
		padding-right: 		2%;
		word-wrap: break-word;
		font-size: 1.5rem;
		color: #fff;
		/*	text-transform: uppercase;	*/
		font-weight: 500;
		text-align: justify;	
		}



#gallerietext01 {
		margin-left:  0;
		margin-top:  0;
		margin-right: 	0;
		margin-top: 	0;
		margin-bottom:  0; 
		padding-top: 		1%;
		padding-bottom: 	0%;
		padding-left: 		2%;
		padding-right: 		2%;
		word-wrap: break-word;
		font-size: 1.0rem;
		color: #fff;
		/*	text-transform: uppercase;	*/
		font-weight: 400;
		text-align: justify;	
		}
		
@media only screen and (max-width: 767px) {
		#gallerietext01 {
				text-align: left;	
		}
		}	



#gallerietext02 {
		margin-left:  0;
		margin-top:  0;
		margin-right: 	0;
		margin-top: 	0;
		margin-bottom:  0; 
		padding-top: 		0%;
		padding-bottom: 	2%;
		padding-left: 		6%;
		padding-right: 		2%;
		word-wrap: break-word;
		font-size: 1.0rem;
		color: #fff;
		/*	text-transform: uppercase;	*/
		font-weight: 400;
		text-align: justify;	
		}

#gallerietext03 {
		margin-left:  0;
		margin-top:  0;
		margin-right: 	0;
		margin-top: 	0;
		margin-bottom:  0; 
		padding-top: 		2%;
		padding-bottom: 	0%;
		padding-left: 		2%;
		padding-right: 		2%;
		/* word-wrap: break-word; */
		font-size: 1.0rem;
		color: #fff;
		/*	text-transform: uppercase;	*/
		font-weight: 400;
		line-height: 1.4; /* Zeilenabstand */
		text-align: justify;
		}

@media only screen and (max-width: 767px) {
			#gallerietext03 {
				text-align: left;
				}
				}


#gallerietext04 {
		margin-left:  0;
		margin-top:  0;
		margin-right: 	0;
		margin-top: 	0;
		margin-bottom:  0; 
		padding-top: 		2%;
		padding-bottom: 	2%;
		padding-left: 		2%;
		padding-right: 		2%;
		word-wrap: break-word;
		font-size: 1.0rem;
		color: #fff;
		/*	text-transform: uppercase;	*/
		font-weight: 400;
		text-align: justify;	
		}





 /* Anfang Body - Gallerie  */


li {
        margin: 0.2em;                       /* definiert die Ränder zwischen den Bildern */
        padding: 0.1em;
}

li {

        display: inline-block;
        list-style-type: none;
        width: auto%;
}

a {
         padding: 0;          /* definiert den Rand des aufklappbaren Fensters */
}

hr 		{
		border: 0;
		border-top: 1px solid #eee;
		margin: 10px 0;
		}


figure {
		margin: 0;				/* figure ist das Bild - hier Rahmen und Ränder um das Bild*/
		padding-left: 0;
		padding-right: 0;
		}	

figcaption {					/* Bildbeschreibung ?*/
		/*display: flex;*/
		margin: 0;
		padding: 0em;
		display: inline-block; 
		text-align: left;
		}

#gallery {
		padding-left: 2%;
		padding-right: 2%;
		padding-bottom: 1%;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(18em, 1fr)); 
		gap: 0.8em;
		align-items: center; /*Ergänzung am 22.04.2023 um Panoramabilder vertikal zu zentrieren */
		}



@media only screen and (max-width: 767px) {
  /* Für kleine Bildschirme */
	#gallery {
			grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); 
			}
	figcaption {					
		font-size: 0.7rem;
		}	

	}

#gallery figure {
		position: relative;
		overflow: hidden;
		}

#gallery figure:hover:before {
		opacity: 0;
		transform: scale(4);
				}

figure img {
		width: 100%;
		display: block;
		cursor: zoom-in /*pointer */;
		}

#gallery > figure > figcaption {
		position: absolute;
		width: 200%;
		
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		
		text-align: left;
		
		color: white;
		background: rgba(0, 0, 0, 0.3);
		opacity: 0;
		bottom: -3em; 
		transition: all 1s ease;
		}

#gallery > figure:hover > figcaption {
		opacity: 1;
		bottom: 0;
		left: 0;
		width: 100%;
		}

#gallery > figcaption {
		grid-column: 1 / -1;
		text-align: center;
		}




 /* Ende Body - Gallerie */
 
 /* Anfang Fullscreen */




.mySlides {display:none;}




		.arrow-right {
		position: fixed;
		top: 45%;
		right: 0em;
		width: 45px;
		height: 65px;
		opacity: 0.1;
		/*  transform: translateY(-50%); */
		/*  right: 20px; */ /* oder left: 20px; für linken Bildrand */
		background-color: #fff;
		/*  border: 2px solid #000;
		border-radius: 4px; */
		cursor: pointer;
		}
		
		.next-imageR {
		display: block;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-60%, -30%) rotate(-45deg);
		width: 20px;
		height: 20px;
		border-bottom: 4px solid black;
		border-right: 4px solid black;
 		}
		
		.arrow-right:hover {
		opacity: 0.4;
		background-color: #fff;
		}

		.arrow-left {
		position: fixed;
		top: 45%;
		left: 0em;
		width: 45px;
		height: 65px;
		opacity: 0.1;
		/*  transform: translateY(-50%); */
		/*  right: 20px; */ /* oder left: 20px; für linken Bildrand */
		background-color: #fff;
		/*  border: 2px solid #000;
		border-radius: 4px; */
		cursor: pointer;
		}
		
		.next-imageL {
		display: block;
		position: absolute;
		top: 45%;
		right: 50%;
		transform: translate(60%, -30%) rotate(45deg);
		width: 20px;
		height: 20px;
		border-bottom: 4px solid black;
		border-left: 4px solid black;
 		}
		
		.arrow-left:hover {
		opacity: 0.4;
		background-color: #fff;
		}

@media only screen and (max-width: 767px) {
  /* Für kleine Bildschirme */

		.arrow-right {
		position: fixed;
		top: 47%;
		right: 0em;
		width: 25px;
		height: 35px;
		opacity: 0.1;
		/*  transform: translateY(-50%); */
		/*  right: 20px; */ /* oder left: 20px; für linken Bildrand */
		background-color: #fff;
		/*  border: 2px solid #000;
		border-radius: 4px; */
		cursor: pointer;
		}




		.arrow-left {
		position: fixed;
		top: 47%;
		left: 0em;
		width: 25px;
		height: 35px;
		opacity: 0.1;
		/*  transform: translateY(-50%); */
		/*  right: 20px; */ /* oder left: 20px; für linken Bildrand */
		background-color: #fff;
		/*  border: 2px solid #000;
		border-radius: 4px; */
		cursor: pointer;
		}

}


	

.fullscreenclass img {
        position: fixed;
        /* top: 50%; */
        /* left: 50%; */
        /* transform: translate(-50%, -50%); */
		width: 100%;
        height: 100%; 
        object-fit: contain;
        overflow: hidden;
        background-color: black;
		/* cursor: pointer; */
		}

.fullscreenclass figure:hover figcaption {
		opacity: 1;
		bottom: 0;
		left: 0;
		width: 100%;
		}


.fullscreenclass figcaption {
		position: fixed;
		margin-bottom: 0rem;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		}

.fullscreenclass figure  figcaption {
		width: 100%;
		padding-top: 0.5em; 			/* 30px   Größe der eingeblendeten Box */
		padding-left: 2em;			/* 30px   Größe der eingeblendeten Box */
		padding-right: 5em;		/* 30px   Größe der eingeblendeten Box */
		padding-bottom: 0.5em;		/* 30px   Größe der eingeblendeten Box */
		font-size: 1.0rem;				/*  30px  Größe der eingeblendeten Textes */
		text-align: left;
		color: white;
		background: rgba(0, 0, 0, 0.3);
		opacity: 0;
		bottom: -3em; 
		transition: all 1s ease;
		}