:root{
	--sbg:#072f1e;/** Slideshow bg */
	--slbg:#3e3f43;/** Links Slideshow */
	--bp:#dfe2e4;
	--fi:opacity 1.5s  ease-in-out;/** fade in */
	--fo:opacity 1.5s ease-in-out;/** fade out */
	--ffi:opacity .3s  ease-in-out;/** fade in */
	--ffo:opacity .3s ease-in-out;/** fade out */
}

.slideshow{
	padding:1em;
}
[data-playing="1"] .ssLinks #playBtn{
	background-position:86% 91%;
}

.slideshow p span,
.ssLinks a{
	box-sizing:border-box;
}
/** Banner */
.slideshow[data-fix],
[data-fix] .si div{
	width: 100%;
	height: 50vw;
	max-height: 700px;
}
.slideshow[data-fix]:before{
	content:'';
	position:absolute;
	background: var(--sbg);
	opacity:.08;
}
[data-fix] .si{
	position: absolute;
	width: 100vw;
	text-align: center;
}
[data-fix] .si img{
	height: 100%;
	width: auto;
}
.slideshow[data-fix]{
	height:150px;
	overflow: hidden;
	position:relative;
	padding:0;
	margin: 1em 0 1em 0;
}
.slideshow.small[data-fix]{
	height:90px;
}
[data-fix] .si{
	width: unset;
}
[data-fix] .si div{
	height:auto;
}
.slideshow[data-fix]:before{
	display:none;
}
[data-fix] .si img,
[data-fix] .si p{
	opacity:1;
}
[data-fix] .si img{
	width:100%;
	height:auto;
}
.slideshow[data-fix] p{
	margin:-2em auto 0 auto;
	width:unset;
	max-width:unset;
}
.slideshow[data-fix] p span{
	background: rgb(0 0 0 / 53%);
	color: #fff;
	padding: 0.1em 1em;
	text-align: left;
}
/** Ende Banner */
/** common */
body[data-fs]:after,
[data-fs] [data-active] p{
	position: fixed;
}
.slideshow p span,
.ssLinks a,
[data-fs] [data-active] p span,
.slideshow #info span,
.slideshow #info em{
	display: inline-block;
}
body[data-fs]:after,
.slideshow p,
[data-fs] [data-active] p{
	display: block;
}
.ssLinks,
.slideshow #info{
	display:none;
}

/** ------------------------------- 400 -------------------------------------------------- */
@media (min-width: 400px){
	.slideshow p{
		margin:-3.5em 0 0 0;
	}
}
/** ------------------------------- 500 -------------------------------------------------- */
@media (min-width: 500px){
	.slideshow{
		padding:0;
	}
	/** NEU */
	.slideshow,
	.slideshow:before,
	.si div{
        width: 100%;
        height: 50vw;
        max-height: 700px;
	}
	.slideshow:before{
		content:'';
		position:absolute;
		background: var(--sbg);
		opacity:.08;
	}
	.si{
		position: absolute;
		width: 100vw;
		text-align: center;
	}
	.si img{
		height: 100%;
		width: auto;
	}
	.si img,
	.si p,
	.ssLinks a{
		-webkit-transition:var(--ffo);
		-ms-transition:var(--ffo);
		transition:var(--ffo);
		opacity:0;
	}
	.ssLinks a{
		opacity:.25;
	}
	.ssLinks #playBtn{
		opacity:1;
	}

	/** off */
	[data-playing="1"] .si img,
	[data-playing="1"] .si p,
	[data-playing="1"] .ssLinks a{
		-webkit-transition:var(--fo);
		-ms-transition:var(--fo);
		transition:var(--fo);
	}

	/** on */
	.si[data-active] img,
	.si[data-active] p,
	.ssLinks a[data-active]{
		-webkit-transition:var(--ffi);
		-ms-transition:var(--ffi);
		transition:var(--ffi);
		opacity: 1;
	}
	.ssLinks a[data-active]{
		/*background:red;*/
	}
	[data-playing="1"] .si[data-active] img,
	[data-playing="1"] .si[data-active] p,
	[data-playing="1"] .ssLinks a[data-active]{
		-webkit-transition:var(--fi);
		-ms-transition:var(--fi);
		transition:var(--fi);
	}
	/** Links */
	ul.ssLinks {
		text-align: center;
		margin:4em auto .5em auto;
	}
	.ssLinks li{
		display: inline-block;
		margin: 0 0.1em;
	}
	.ssLinks a{
		width: 1.3em;
		height:1.3em;
		text-align: center;
		background:var(--bg3);
		margin:.1em;
	}
	.ssLinks li[data-animate] a{
		background-color: var(--slbg);
		-webkit-transition: background-color 3000ms linear;
		-ms-transition: background-color 3000ms linear;
		transition: background-color 3000ms linear;
	}
	.ssLinks span{
		display:none;
	}
	.ssLinks li[data-active] a{
		background:var(--slbg);
	}
	.ssLinks #playBtn{
		background:var(--sprite);
		background-size: 350% auto;
		background-color:var(--slbg);
		background-position: 14% 91%;
		border: 1px solid var(--slbg);
		margin-left:.7em;
	}
	.slideshow p{
		margin:-2em auto 0 auto;
		width:unset;
		max-width:unset;
	}
	.slideshow p span{
		background: rgb(0 0 0 / 53%);
		color: #fff;
		padding: 0.1em 1em;
		text-align: left;
	}
	ul.ssLinks{
		margin:.5em 0 1em 0;
	}
	.ssLinks a{
		margin:0;
	}
	.ssLinks{
		display:block;
	}
	/** Banner */
	.slideshow[data-fix]{
		height:250px;
	}
	.slideshow.small[data-fix]{
		height:150px;
	}

}
/** ------------------------------- 600 -------------------------------------------------- */
@media (min-width: 600px){

}
/** ------------------------------- 800 -------------------------------------------------- */
@media (min-width: 800px){
	/** Hinweis Slideshow */
	.slideshow #info{
		position: absolute;
		z-index: 5;
		display: block;
		width: 100%;
		height: 0;
	}
	.slideshow #info ul{
		background:rgb(52 26 6 / 81%);
		color: #fff;
		width: 18em;
		margin: 4em auto;
		border-radius: 1em;
		padding: 1em;
		font-size: .9em;
		line-height: 1.3em;
	}
	.slideshow #info li{
		padding: 0.1em 0.2em;
		border-radius: 0.3em;
		margin-bottom: 0.5em;
		text-align: left;
	}
	.slideshow #info span{
		width: 5em;
	}
	.slideshow #info em{
		border: 1px solid #fff;
		padding: 0.1em 0.2em;
		border-radius: 0.3em;
		min-width: 1.3em;
		margin-right: 1em;
		font-style: normal;
		text-align: center;
		background:rgb(52 26 6);
		font-weight: bold;
	}
	ul.ssLinks{
		margin-bottom:2em;
	}
}