:root {
	--bg0: #111;
	--bg1: #222;
	--bg2: #be1522;
	//--bg3: #57423f;
	--bg3: #777;
	--headheight:2.5em;
	--padleft: 5vw;
	--padright: 6vw;
	--padtop: .5em;
	--padbottom: 10vh;
	--contentwidth:87vw;
	--text1: #fff;
	//--fontsize1: .7em;
	//--fontsize2: .8em;
	//--fontsize3: 0.5em;
	//--fontsizetitle: 12em;
	//--fontsizedate: 0.8em;
	//--fontsizedescr: 0.9em;
	--fontsizenav: 0.8em;
	--fontsize1: 0.8em;
        --fontsize2: 1.0em;
        --fontsize3: 0.6em;
        --fontsizetitle: 1.5em;
        --fontsizetitle2: 1.25em;
        --fontsizetitle3: 1em;
        --fontsizedate: 0.8em;
        --fontsizedescr: 1em;

}


::-webkit-scrollbar {
	  width: 0px;
  }

html,body {
	background: var(--bg0);
	color: var(--text1);
	margin:0;
	overflow-x:hidden;
	font-family:sans-serif;
	font-size: 2.5vh;
}

body {
	touch-action: pan-y, pan-x;
	
}

h1 { font-size: var(--fontsizetitle); }
h2 { font-size: var(--fontsizetitle2); }
h3 { font-size: var(--fontsizetitle3); }
.font1 { font-size: var(--fontsize1); }
.font2 { font-size: var(--fontsize2); }
.font3 { font-size: var(--fontsize3); }


a, a:visited {
	color: var(--text1);
	text-decoration: none;
}

.hidden {
	display:none;
}

.visible {
	display:block;
}

:focus {
	outline: none;
}

.icon {
	height:2vh;
	margin-bottom:-1px;
}

#debugdiv {
	background:#666;
	border: 1px solid red;
	position:fixed;
	bottom:3vh;
	left:var(--padleft);
	font-size:2vh;
	display:none;
}

#headdiv {
	border-bottom: 1px solid var(--bg3);
	background: var(--bg2);
	width: 100vw;
	height:var(--headheight);
	position:fixed;
	top:0;
	left:0;
	z-index:5;
	filter: drop-shadow(0vw 1vh 1vh black);
}

#headleft {
	display:inline-block;
	padding-left: var(--padleft);
	padding-top: var(--padtop);
	position:absolute;
	left:0;
	bottom:0.25em;
}

@media (min-width:769px) {
	#headcenter {
		display:inline-block;
		position:fixed;
		left:30vw;
		top:1em;
		z-index:6;
	}
}

@media (max-width: 768px) {
	#headcenter {
		display:block;
		position:fixed;
		clear: top;
		bottom:0;
		left:0;
		border-top: 1px solid var(--bg3);
		width: 100vw;
		z-index:5;
		height:var(--headheight);
		background: var(--bg1);
		text-align:center;
	}
	#headcenter .navitem {
		border: 1px solid var(--bg2);
		background:  var(--bg2);
		margin-top:0.5em;
		margin-right:0.5em;
	}
}




#headright {
	display:inline-block;
	//border:1px dotted blue;
	position:absolute;
	right:0;
	bottom:0.25em;
	margin-right: var(--padright);
}

.headlogo {
	height: 2em;
	filter: drop-shadow(.1em .1em .05em black);
	//display:inline-block;
	//margin-right:10vh;
}


#navdiv {
	position:fixed;
	border-right:1px solid white;
	left:0vw;
	top:10vh;
	padding-top:5vh;
	width:5vw;
	height:90vh;
	background: var(--bg1);
	text-align:center;
	//z-index:10;
	z-index:0;
	filter: drop-shadow(.5vw 0vw 1vw black);
}


.navlist {
	list-style-type:none;
	margin:0;
	padding:1vw;
	margin-top:3vh;
}

.navitem {
	display:inline-block;
	margin:0vh;
	padding-left:.5vw;
	padding-right:.5vw;
	padding-top:.5vh;
	padding-bottom:.5vh;
	margin-right:.5vw;
	border-radius:.5vw;
	font-size: var(--fontsizenav);
}	

.navitem:focus, .navitem:hover {
	background: var(--bg2);
	transition: background .3s;	
	//border-bottom:2px solid var(--bg2);
}


.button {
        display:inline-block;
        margin:0vh;
        padding-left:.5vw;
        padding-right:.5vw;
        padding-top:.5vh;
        padding-bottom:.5vh;
        margin-right:.5vw;
        margin-bottom:.5vw;
        border:1px solid var(--bg2);
        border-radius:.5em;
}

.redbutton {
	background: var(--bg2);
	color: var(--text1);
	border:1px solid var(--text1);
	margin-top:.25em;
	margin-bottom:.25em;
	font-size: var(--fontsize1);
}

.button:hover, .buttonnavitem:hover {
        background: var(--bg2);
        transition: background .3s;
        border-bottom:1px solid var(--bg1);
}



#contentdiv {
	margin-top:var(--headheight);
	border:0px solid yellow;
	//width:93vw;
	//height:75vh;
	padding-left: var(--padleft);
	padding-bottom: var(--padbottom);
	padding-top: 2em;
	overflow-y:scroll;
	overflow-x:hidden;
//	position:fixed;
	top:var(--headheight);
	left:0vw;
	z-index:0;
	//scroll-snap-stop: always;
	
}




.vlist_v_simple {
        padding-right: var(--padright);
        display:block;
        overflow-x:scroll;
        white-space:nowrap;
        border-top: 1px solid var(--bg3);
        margin-bottom:5vh;
	
}


.vlist_v_simple_title {
	font-size: var(--fontsizetitle2);
	//max-width:70vw;
	filter: drop-shadow(.1vw .1vw .1vw black);
	margin:0;
	line-clamp: 2;
	-webkit-line-clamp: 2;
}

.vlist_v {
	border:0px solid green;
	display:block;
	overflow-x:scroll;
}


#vlist_v_image, #vlist_show_image {
	background-image: url('/images/testbild.png');
	position:fixed;
	top:10vh;
	left:0vw;
	width: 100vw;
	opacity:.4;
	//filter:blur(.2vw);
	aspect-ratio:16/9;
	background-repeat:no-repeat;
	background-size:cover;
	z-index:-1;
	display:none;
}

#vlist_v_details {
	//padding-top:10vh;
	padding-left:0vw;
	//position:fixed;
	//width:40vw;
	//z-index:2;
	display:none;
}

#vlist_v_title, #vlist_show_title {
	font-size: var(--fontsizetitle);
//	max-width:80vw;
	filter: drop-shadow(.1vw .1vw .1vw black);
	margin:0;
	line-clamp: 2;
	-webkit-line-clamp: 2;
}

#vlist_v_date, #vlist_show_date {
	font-size: var(--fontsizedate);
	margin:0;
	margin-top:1vh;
}

#vlist_v_descr, #vlist_show_descr {
	font-size: var(--fontsizedescr);
//	max-width:55vw;
	margin:0;
	margin-top:3vh;
}

.vitem {
	display: inline-block;
	height:10em;
	aspect-ratio:10/9;
	margin-right:.5em;
	margin-top: .5em;
	margin-bottom: .5em;
	padding:.0em;
	border: 1px solid var(--bg3);
	overflow:hidden;
	background: var(--bg1);
	//filter: drop-shadow(.6vw .6vw .4vw #111);
	border-radius:.5em;
}

.vitem:hover   {
	border:1px solid white;
	background: var(--bg2);
	//transition: background .2s linear;
}
/*
@media only screen 
	and (min-width : 1224px) {
	.vitem:hover  {
		border:1px solid cyan;
		background: var(--bg3);
	}
}
*/

.vitem_image {
	width:100%;
	border-bottom:1px solid var(--bg3);
	aspect-ratio: 16/9;
}

.vitem_title {
	//font-weight:bold;
	margin:.25em;
	margin-top:0;
	margin-bottom:.5em;
	font-size: var(--fontsize1);
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	overflow:hidden;
	-webkit-box-orient: vertical;
	white-space: normal;
}

.vitem_descr {
	font-weight:normal;
	width:99%;
	margin:0;
	margin-top:.2em;
	font-size: var(--fontsize2);
	display: -webkit-box;
	white-space: normal;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	overflow:hidden;
	-webkit-box-orient: vertical;
}

.vitem_date {
	font-weight:normal;
	margin:0.25em;
	margin-top:.5em;
	font-size: var(--fontsize3);
	text-align:right;
}






.vlist_show {
        width:90vw;
//        height:85vh;
//        border:1px solid green;
//        padding-left: var(--padleft);
//        padding-right: var(--padright);
//        padding-bottom: var(--padbottom);
        display:block;
//        position:fixed;
//        top:10vh;
//        left:10vw;
//        overflow-x:hidden;
//        overflow-y:scroll;
//        scroll-snap-type: y mandatory;
//        scroll-padding-top: 40vh;
//        scroll-padding-bottom: 45vh;
//        scroll-snap-align: start;
//        scroll-behavior: smooth;
}

#vlist_show_details {
//	padding-top:10vh;
	padding-left:0vw;
	//position:fixed;
	//z-index:2;
}


.vlist_show_taglist {
	margin-top:1em;
}

.vlist_show_taglist_title {
	display:block;
	font-size: var(--fontsize2);
}

.vlist_show_taglist_tags {
	display:block;
	font-size: var(--fontsize1);
}



.vitem_show {
        display: inline-block;
        width:85vw;
//        aspect-ratio:10/2;
//        margin-right:2vw;
        margin-top: 1em;
        padding:.0vw;
        border: 1px solid #666;
        overflow:hidden;
        background: var(--bg1);
        filter: drop-shadow(.4vw .4vw .6vw #111);
	border-radius:0.5em;
}

.vitem_show:hover {
        border:1px solid white;
        background: var(--bg2);
        transition: background .2s linear;
}

.vitem_show_contents {
	display: table-row;
}

.vitem_show_image {
        width:24vw;
	//height:10em;
        border:0px solid #999;
        aspect-ratio: 16/9;
	display:table-cell;
	border: 0px solid green;
}

.vitem_show_image:before {
	position:absolute;
	top: 50%;
	left: 12vw;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	content: "\25b6";
	font-size: 2em;
	color: var(--bg2);
	opacity: 1;
        filter: drop-shadow(.0vh .0vh .2vw white);
	border-radius:.75vh;
}					       


.vitem_show_details {
	display: table-cell;
	border:0px solid yellow;
	vertical-align: middle;
	padding-left: 1vw;
}

.vitem_show_title {
        //font-weight:bold;
        margin:0;
        margin-top:.2em;
        font-size: var(--fontsize2);
        white-space: normal;
}

.vitem_show_descr {
        font-weight:normal;
        width:99%;
        margin:0;
        margin-top:.2em;
        font-size: var(--fontsize1);
}

.vitem_show_date {
	display:none;
        font-weight:normal;
        margin:0;
        margin-top:1em;
        font-size: var(--fontsize3);
}





.p_player {
	width:95%;
	height:80%;
	background:var(--bg1);
}

.vitemplayer {
	aspect-ratio: 16/9;
	width:100%;
	height:100%;
	//z-index:1;
	object-fit:contain;
}

.p_controls_center {
	//width:100vw;
	//height:100vh;
	position:fixed;
	top:50vh;
	left:50vw;
	z-index:2;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
	filter: drop-shadow(0vh 0vh .5vh white);

}

.p_control_large {
	width:20vh;
	height:20vh;
}

.p_control_normal {
	width:15vh;
	height:15vh;
}

.p_progress {
	position:fixed;
	bottom:12vh;
	left:7vw;
	width:86vw;
	z-index:2;
}

.p_progress_bar_bg {
	position:relative;
	top:0;
	left:0;
	height:1vh;
	width:100%;
	background: var(--bg3);
	filter: drop-shadow(0vh 0vh .2vh white);
}

.p_progress_bar_fg {
	height:100%;
	width:1%;
	background: var(--bg2);
}

.p_progress_time_position {
	position:absolute;
	top:1vh;
	left:0;
	font-size: var(--fontsize2);
	filter: drop-shadow(.1vh .2vh black);
}

.p_progress_time_total {
	position:absolute;
	top:1vh;
	right:0;
	font-size: var(--fontsize2);
	filter: drop-shadow(.1vh .2vh black);
}


.live_header {
	font-size:var(--fontsizetitle);
	border-bottom:1px solid var(--bg3);
	width:95%;
	margin-bottom:0.5em;
}

.live_show {
	border: 1px solid var(--bg3);
	border-radius:0.5em;
	background:var(--bg1);
	display:block;
	width:90%;
	margin-bottom:2em;
	overflow:hidden;
	//white-space: nowrap;
}

.live_show:hover {
	background:var(--bg2);
}

@keyframes islivecolor {
	to {
		background: var(--bg1);
	}
}

.live_show_islive {
	background:var(--bg2);
	color:var(--text1);
	width:100%;
	text-align:center;
	animation-name: islivecolor;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: ease;
}

.live_show_contents {
}

.live_show_image {
	height:8em;
	display:inline-block;
	aspect-ratio:16/9;
	//margin-right:1em;
	
}

.live_show_details {
	display:inline-block;
	vertical-align:top;
	padding:.25em;
	white-space: wrap;
}

.live_show_date {
	font-size:var(--fontsize1);
	margin-top:.25em;
	display:block;
}

.live_show_title {
	display:block;
	margin-top:.25em;
	font-size:var(--fontsize2);
}

.live_show_descr {
	display:block;
	margin-top:.25em;
	font-size:var(--fontsize1);
}

.live_player {
	aspect-ratio: 16/9;
	width:100%;
	height:100%;
	//z-index:1
	object-fit:contain;
}

.live_overlay {
	width:20vw;
	height:70vh;
	position: fixed;
	top:15vh;
	right:10vw;
	z-index:2;
	background-color:black;
	border:1px solid white;
	display:none;
}



.banner {
        display: inline-block;
        width:var(--contentwidth);
        //height:20vw;
        //aspect-ratio:10/2.2;
        //padding:.0vw;
        border: 1px solid var(--bg1);
        overflow:hidden;
        background: var(--bg1);
        filter: drop-shadow(.4vw .4vw .6vw #111);
	border-radius:1vw;
	margin-bottom:5vh;
}

.banner:hover {
	border: 1px solid white;
        background: var(--bg2);
}

.bannerimg {
        display: inline-block;
        width:100%;
}


.logincode {
	font-size:15vh;
	border: 1vh solid var(--text1);
	font-family: monospace;
}


.taglist_header {
	border-bottom:1px solid var(--bg3);
	padding-bottom:0.5em;
	margin-bottom:1em;
	width:95%;
}

.taglist_header_contents {
}

.taglist_image {
	height:7em;
	aspect-ratio: 16/9;
	//display:table-cell;
	display:inline-block;
	margin-right:1em;
	border:1px solid var(--bg3);
	border-radius: 0.5em;
}

.taglist_details {
	//display:table-cell;
	display:inline-block;
	vertical-align:bottom;
}

.taglist_title {
	display:block;
	font-size: var(--fontsize2);
}

.taglist_descr {
	display:block;
	font-size: var(--fontsize1);
}

.error {
  display:none;
  position:fixed;
  top: 0vh;
  left:0vw;
  width:100vw;
  height:100vh;
  z-index:20;
  //background-color:rgba(0, 0, 0, .9);
  background:#333;
}

.errorcontent {
  display:block;
  position:fixed;
  top: 50vh;
  left:50vw;
  z-index:21;
  width: auto;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%); 
  text-align:center;
  border:1px solid var(--bg3);
  background: var(--bg1);
  padding:2em;
  border-radius:1em;
}


.busy {
  display:block;
  position:fixed;
  top: 0vh;
  left:0vw;
  width:100vw;
  height:100vh;
  z-index:10;
  background-color:rgba(0, 0, 0, .8);
}
.loading {
  display:block;
  position:fixed;
  top: 45vh;
  left:50vw;
  z-index:11;
  width: 10vh;
  --b: 2vh; 
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%,var(--bg2)) content-box;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation:l4 1s infinite steps(10);
}
@keyframes l4 {to{transform: rotate(1turn)}}