/* ---------------------------------------------------------------------- */
/* Slide-Show                                             v4 - 27.04.2025 */
/* ---------------------------------------------------------------------- */
/* https://symbl.cc/  Stop=■*/


.slideshow
	{
	background:       no-repeat center center fixed;
	background-size:  cover;
	overflow:         hidden;
	height:           100%;
	min-height:       100%;
 	}

.slideshow .slide
	{
	position:         absolute;  /* fixed / absolute */
	width:            100%;
	height:           100%;
	top:              0;
	left:             0;
	background:       no-repeat center center fixed;
	background-size:  cover;
	transform:        translateX(0);
	transition:       transform 0.5s ease, opacity 0.5s ease-in-out;
	opacity:          0;
	}

/*  *** FUNKTIONIERT NICHT ON MOBILE ***
@media (max-width: 800px)
	{
	.slideshow
		{
		background-attachment: scroll;
		height:                auto;
		min-height:            auto;
		}
	
	.slideshow .slide
		{
		position:              relative;
		height:                auto;
		padding-top:           0px;
		background-size:       contain;
		background-repeat:     no-repeat;
		background-position:   center center;
		background-attachment: scroll;
		}
	}
*/

.slideshow .slide.show
	{
	opacity:          1;
	}

#bildNummer
	{
	position:         absolute;
	top:              20px;
	left:             280px;
	color:            rgba(255,255,255,0.9);
	background:       rgba(0,0,0,0.1);
	padding:          0px 10px;
	border-radius:    5px;
	font-family:      sans-serif;
	font-size:        20px;
	z-index:          31;
	}

.slideshow-controls
	{
	position:         absolute;
	top:              20px;
	left:             140px;
	transform:        translateX(-50%);
	display:          flex;
	gap:              15px;
	z-index:          31;
	}

.control-btn
	{
	background:       rgba(0,0,0,0.1);
	border:           none;
	border-radius:    5px;
	height:           35px;
	padding:          0px 20px 0px 20px;  /*  top right bottom left;  */
	color:            rgba(255,255,255,0.6);
	font-size:        20px;
	cursor:           pointer;
	transition:       background 0.3s;
	}

.control-btn:hover
	{
	color:            rgba(255,255,255,0.8);
	background:       rgba(0,0,0,0.8);
	}