@supports ( display: grid ) {

.slideshow, .slideshowkl{margin: 0;padding: 0;}

body {
  font-family: 'ibm_plex_serifbold_italic';
  background-color: #557a95; 
  background-image: url(./hintergrund/bautzengesamtwinter.jpg);   /*Protschenberg*/
  background-position: 70% 70%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #000;
}

#slideshow_wrapper_inpage {
  position: relative;
  width:55em;
  height:40em;
  max-width: 900px;
  margin: 25px 50px 25px 50px;
  border: 5px solid #eee;
  box-shadow: 1px 1px 5px 2px #777;
  box-sizing: border-box;
  border-radius: 0.5em 0.5em 0.5em;
}

			
			.slideshow
				{list-style:none;
				width:100%;
				height:100%;
				top:0;
				right:0;
				bottom:0;
				left:0;
				overflow:hidden;
				position: absolute;}
			
			.slideshow li
				{width:100%;
				height:100%;
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				color:transparent;
				background-size: 50em 36em;
				background-position:50% 50%;
				background-repeat: no-repeat;
                background-attachment: fixed;
                -webkit-background-size: 50em 36em;
                -moz-background-size: 50em 36em;
                -o-background-size: 50em 36em;    
                background-color: #000;				
				opacity:0;
				animation: slideShowA 140s linear infinite 0s;}

			
			@keyframes slideShowA { 
				0% {
					opacity: 0;
					transform: scale(1.1) ;
				}
				2% {
					opacity: 1;
				}
				10% {
					opacity: 1;
				}
				12% {
					opacity: 0;
					transform: scale(1.2) ;
				}
			}
			
			.slideshow li:nth-child(1) {background-image:  url(./gallerie2/plakatsingmituns.jpg);animation-delay:  0s;}
			.slideshow li:nth-child(2) {background-image:  url(./gallerie2/plakat.png);animation-delay:  15s;}
			.slideshow li:nth-child(3) {background-image:  url(./gallerie2/2022.png);animation-delay: 20s;}
			.slideshow li:nth-child(4) {background-image:  url(./gallerie2/2019.jpg);animation-delay: 30s;}
			.slideshow li:nth-child(5) {background-image:  url(./gallerie2/1955.jpg);animation-delay: 40s;}
			.slideshow li:nth-child(6) {background-image:  url(./gallerie2/1977.jpg);animation-delay: 50s;}
			.slideshow li:nth-child(7) {background-image:  url(./gallerie2/1983.jpg);animation-delay: 60s;}
			.slideshow li:nth-child(8) {background-image:  url(./gallerie2/1995.jpg);animation-delay: 70s;}
			.slideshow li:nth-child(9) {background-image:  url(./gallerie2/2008.jpg);animation-delay: 80s;}
			.slideshow li:nth-child(10) {background-image: url(./gallerie2/2012.jpg);animation-delay: 90s;}
		    .slideshow li:nth-child(11) {background-image: url(./gallerie2/2015w.jpg);animation-delay: 100s;}
			.slideshow li:nth-child(12) {background-image: url(./gallerie2/2016.jpg);animation-delay: 110s;}
			.slideshow li:nth-child(13) {background-image: url(./gallerie2/2017.jpg);animation-delay: 120s;}
			.slideshow li:nth-child(14) {background-image: url(./gallerie2/c2019.jpg);animation-delay: 130s;}

#slideshow_wrapper_inpagekl
				{background:#7B9CC9;
				position:relative;
				width:25em;
				height:15em;
				max-height:100vh;
				margin: 25px 50px 25px 50px;
                border: 5px solid #eee;
                box-shadow: 1px 1px 5px 2px #777;
				box-sizing: border-box;
				border-radius: 0.5em 0.5em 0.5em;
				justify-self: center;}

.slideshowkl
				{list-style:none;width:100%;height:100%;top:0;right:0;bottom:0;left:0;overflow:hidden;position: absolute;}
			.slideshowkl li
				{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;color:transparent;background-size:cover;background-position:50% 50%;opacity:0;animation: slideShowE1 100s linear infinite 0s;}
			@keyframes slideShowE1 { 
				0% {
					opacity: 0;
					transform: scale(1.1) rotate(-1.5deg);
				}
				1% {
					opacity: 1;
				}
				10% {
					opacity: 1;
				}
				11% {
					opacity: 0;
					transform: scale(1.3) rotate(1.5deg);
				}
			}
			.slideshowkl li:nth-child(1) {background-image:  url(./gallerie1/AML_klein1.jpg );animation-delay:  0s;}
			.slideshowkl li:nth-child(2) {background-image:  url(./gallerie1/AML_klein2.jpg);animation-delay: 10s;}
			.slideshowkl li:nth-child(3) {background-image:  url(./gallerie1/probenwe2025-10gal.jpg);animation-delay: 20s;}
			.slideshowkl li:nth-child(4) {background-image:  url(./gallerie1/proben80-1.jpg);animation-delay: 30s;}
			.slideshowkl li:nth-child(5) {background-image:  url(./gallerie1/fasching2025-19.jpg);animation-delay: 40s;}
			.slideshowkl li:nth-child(6) {background-image:  url(./gallerie1/protschenberg2025-11.jpg);animation-delay: 50s;}
			.slideshowkl li:nth-child(7) {background-image:  url(./gallerie1/wandertag2025-3.jpg);animation-delay: 60s;}
			.slideshowkl li:nth-child(8) {background-image:  url(./gallerie1/weihn2025-2.jpeg);animation-delay: 70s;}
			.slideshowkl li:nth-child(9) {background-image:  url(./gallerie1/pfingsten2025-8.jpg);animation-delay: 80s;}
			.slideshowkl li:nth-child(10) {background-image: url(./gallerie1/weihn2025-12.jpeg);animation-delay: 90s;}
			.slidetextkl {color:#333;position:absolute;bottom:-20%;transform:translateY(-50%);padding:0 20px 10px;margin:0 20px;background: rgba(240,240,240,0.75);border-radius:1em;opacity:0;animation: slideShowE2 100s ease-in-out infinite 0s;text-shadow: 0 1px 0 #fff;box-shadow: 0 10px 15px rgba(0,0,0,0.75);}
			@keyframes slideShowE2 { 
				1% {
					opacity: 0;
				}
				2% {
					opacity: 1;
				}
				9% {
					opacity: 1;
				}
				10% {
					opacity: 0;
				}
			}
			.slidetextkl.st1  {animation-delay:  0s;}
			.slidetextkl.st2  {animation-delay: 10s;}
			.slidetextkl.st3  {animation-delay: 20s;}
			.slidetextkl.st4  {animation-delay: 30s;}
			.slidetextkl.st5  {animation-delay: 40s;}
			.slidetextkl.st6  {animation-delay: 50s;}
			.slidetextkl.st7  {animation-delay: 60s;}
			.slidetextkl.st8  {animation-delay: 70s;}
			.slidetextkl.st9  {animation-delay: 80s;}
			.slidetextkl.st10 {animation-delay: 90s;}



.grid-container {
  height:100vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;          /*grid-template-columns: */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;

section.logo {
  z-index: 1003;
  grid-column-start:4; 
  grid-column-end:7; 
  grid-row-start:1; 
  grid-row-end:1;
  justify-self: end;
}

figure.ohne2{
  position: relative;
  background: #000;
  padding-top: 4px;
  padding-right: 4px;
  padding-bottom: 0px;
  padding-left: 4px;
  margin-top: 0.5em ;
  margin-left: 0.5em;
  margin-right: 0.5em;   
  margin-bottom: 0.5em;
  border: 1px solid #eee;
  box-shadow: 1px 1px 5px 2px #777;
  overflow: hidden;
}

img.otgrafikquer2{max-width: 100%;}

}

.header { grid-area: header;
  z-index: 2000;
  grid-column-start:4; 
  grid-column-end:7; 
  grid-row-start:1; 
  grid-row-end:2;
 }

.nav { grid-area: nav;
  grid-column-start:1; 
  grid-column-end:7; 
  grid-row-start:1; 
  grid-row-end:2;
}

.main { grid-area: main;
  grid-column-start:1; 
  grid-column-end:5; 
  grid-row-start:3; 
  grid-row-end:9;
}

.main2 { grid-area: main2;
  grid-column-start:5; 
  grid-column-end:7; 
  grid-row-start:3; 
  grid-row-end:9;
} 

.main3 { grid-area: main3;
  grid-column-start:1; 
  grid-column-end:7; 
  grid-row-start:3; 
  grid-row-end:9;
}


.footer { grid-area: footer;
  grid-column-start:1; 
  grid-column-end:7; 
  grid-row-start:15; 
  grid-row-end:16;
}

/* Innerhalb des Hauptinhalts (main) Flexbox nutzen */
/* erste Flexbox mit Anordnung untereinander */
.flex-container {
  display: flex;
  flex-direction: column;
  
}
.flex-container article.spruch {
  margin: 0.5em;
  font-style: italic;
  text-align: justify;
}
.flex-container4 {
  display: none;
  flex-direction: column;
 
}
/* Zweite Flexbox mit Anordnung nebeneinander, Seitenumbruch und mittige Anordnung */
.flex-container2{
	display: flex;
    flex-wrap: wrap;
    align-items: baseline;
	article.beschreibung { 
	z-index: 1;
	color: #fff;
	padding: 0.5em 0.5em 0.5em 0.5em;
	border-radius: 0.5em 0.5em 0.5em;
	border: 0px solid;
	font-size:100%;
	background-color: #557a95;
	opacity: 0.7;
	align-self: center;
	} 
   
  
}

/* Innerhalb des Hauptinhalts (main) Flexbox nutzen */
/* erste Flexbox mit Anordnung untereinander */
.flex-container3 {
  display: flex;
  flex-direction: column;
  
  
  article.neuigkeiten { 
	z-index: 1;
	color: #fff;
	padding: 0.5em 0.5em 0.5em 0.5em;
	border-radius: 0.5em 0.5em 0.5em;
	border: 0px solid;
	font-size:100%;
	background-color: #557a95;
	opacity: 0.7;
	align-self: center;
	} 

#plakat {
	z-index: 1;
	position: relative;
	background: #000;
	height: 20em;
	width: 13em;
	margin: 1em auto -2em;
	border: 5px solid #eee;
	border-radius: 0.5em 0.5em 0.5em;
    clear: both;
	overflow: hidden;
	}

#plakat img {
    position: absolute;
    top: 0em;
    left: 0em;   
    max-width:100%;    
    max-height: 100%;
    clear: both;
    overflow: hidden;
}
  
}

@media only screen and (max-width: 1400px) {
	#slideshow_wrapper_inpagekl{width:24em;}
	#slideshow_wrapper_inpage{width:54em; height:39em;}
    
}
@media only screen and (max-width: 1350px) {
	#slideshow_wrapper_inpagekl{width:23em;	height:14em;}
	#slideshow_wrapper_inpage{width:53em; height:38em;}
	.slidetextkl {bottom:-25%;}
	}
@media only screen and (max-width: 1300px) {
	#slideshow_wrapper_inpagekl{width:22em;}
	#slideshow_wrapper_inpage{width:52em; height:37em;}
}
@media only screen and (max-width: 1250px) {
	#slideshow_wrapper_inpagekl{width:21em;	height:13em;}
	#slideshow_wrapper_inpage{width:51em; height:36em;}
	.slidetextkl {bottom:-30%;}
}
@media only screen and (max-width: 1200px) {
	#slideshow_wrapper_inpagekl{width:20em;}
	#slideshow_wrapper_inpage{width:50em; height:35em;}
}
@media only screen and (max-width: 1150px) {
	#slideshow_wrapper_inpagekl{width:19em;	height:12em;}
	#slideshow_wrapper_inpage{width:49em; height:34em;}
    .slidetextkl {bottom:-35%;}
}
@media only screen and (max-width: 1100px) {
	#slideshow_wrapper_inpagekl{width:18em;}
	#slideshow_wrapper_inpage{width:48em; height:33em;}
}
@media only screen and (max-width: 1050px) {
	#slideshow_wrapper_inpagekl{width:17em;	height:11em;}
	#slideshow_wrapper_inpage{width:47em; height:32em;}
    .slidetextkl {bottom:-40%;}
}


/* ==================================================
   RESPONSIVE BREAKPOINTS
   ================================================== */

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
 body {
  font-family: 'ibm_plex_serifbold_italic';
  background-color: #557a95; 
  background-image: url(./hintergrund/bautzengesamtwinter.jpg);  
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #000;
}
.flex-container {display: none;}
.flex-container2 {display: none;}
.flex-container3 {display: none;}

section.logo {
  z-index: 1003;
  grid-column-start:4; 
  grid-column-end:6; 
  grid-row-start:1; 
  grid-row-end:1;
  justify-self: end;
}

figure.ohne2{
  position: relative;
  background: #000;
  padding-top: 4px;
  padding-right: 4px;
  padding-bottom: 0px;
  padding-left: 4px;
  margin-top: 0.5em ;
  margin-left: 0.5em;
  margin-right: 0.5em;   
  margin-bottom: 0.5em;
  border: 1px solid #eee;
  box-shadow: 1px 1px 5px 2px #777;
  overflow: hidden;
}

img.otgrafikquer2
{
   max-width: 100%;
}

/* Mobile Flexbox wird sichtbar */
.flex-container4 {
  display: flex;
  flex-direction: column;

article.spruch2 {
		margin: 0.5em;
		font-size:80%;
		font-style: italic;
		text-align: justify;
	}

article.neuigkeiten2 { 
		z-index: 1;
		color: #fff;
		padding: 0.5em 0.5em 0.5em 0.5em;
		border-radius: 0.5em 0.5em 0.5em;
		border: 0px solid;
		font-size:100%;
		background-color: #557a95;
		opacity: 0.7;
		align-self: center;
	} 
  
#plakat2 {
		z-index: 1;
		position: relative;
		background: #000;
		height: 20em;
		width: 13em;
		margin: 1em auto -2em;
		border: 5px solid #eee;
		border-radius: 0.5em 0.5em 0.5em;
		clear: both;
		overflow: hidden;
	}

#plakat2 img {
		position: absolute;
		top: 0em;
		left: 0em;   
		max-width:100%;    
		max-height: 100%;
		clear: both;
		overflow: hidden;
	}  
}
@media only screen and (max-width: 290px) {
	section.logo {display: none;}
}
}