* {box-sizing: border-box;}
body {font-family: Arial, Helvetica, sans-serif;margin: 0;}
header {margin:0;}
a {text-decoration: none;}
ul{list-style-type: none;}
/*Ende Allgemeines*/

.Ori{
	width:100;
	overflow: hidden;
	position: fixed;
	bottom:calc(1em + 16px); /*einmal Text und 2*0.5em aus padding zu li*/
}
/*~~~~~~~~~~~~~~~~~~~~~~Bilder~~~~~~~~~~~~~~~~~~~~~~*/
.Bilder { /*Behälter der zwei divs mit Bilddateien*/
	display:none;
	/* display:flex; */
	flex-direction: row;
	padding: 1vh 0;

}
.Bild{ /*Behälter der Klasse mit Bildern*/
	flex:50%;
}
.Bild img{ /*Bilddatei an sich*/
	object-fit: contain; 
	width:50vw;
	height:20vh;
}

.Impression img{
	object-fit: contain; /*cover: Rest umgeschlagen/abgeschnitten*/
}
/*~~~~~~~~~~~~~~~~~~~~~~Bilder~~~~~~~~~~~~~~~~~~~~~~*/


/*~~~~~~~~~~~~~~~~~~~~~~~NAVI~~~~~~~~~~~~~~~~~~~~~~~*/
.NaviElemente ul {
	margin:0;  /*Platz nach unten ist weg, also dockt jetzt am Bildrand*/
	padding:0; /*link rechts  platz frei?*/
	overflow:hidden; /*kein Scrollbalken bei Überfluss*/
	position: fixed;
	bottom:0;
	width: 100%;
}
.NaviElemente li {
	float: left; /*horizontal ausrichten*/
	display:block; /*zeigt sich vollständig*/
}
.NaviElemente li a{
	display:block; /*zeigt sich vollständig*/
	text-align: center;	/*passt auch in nur "li" gut. geht aber nicht für den Text*/
	padding: 0.5em 4px; /*Knopffeld um den Text*//*in "li" wären die knöpfe zu klein. oben/unten sowie rechts/links*//*1em ist Zeilenhöhe*/
}
li a:hover:not(.active) {
  background-color: #555; /*555 alt*/
  color: white;
}
.NaviElemente li a.aktiv{ /*für hell und dunkel gleich*/
	background-color: #325593; /*#32CD32*/
}
/*~~~~~~~~~~~~~~~~~~~~~~~NAVI~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~Sonstiges~~~~~~~~~~~~~~~~~~~~~*/
#jitsi{height:61vh;}
.Ausblick {width: 100%; height: auto; max-height:99.4vh;}
.TextMitAbstand {padding: 1vw;}
.Spiellist ul {
margin: auto;
padding:0;
}
/*~~~~~~~~~~~~~~~~~~~~~Sonstiges~~~~~~~~~~~~~~~~~~~~~*/


/*~~~~~~~~~~~~~~~~~~~~~Schalter~~~~~~~~~~~~~~~~~~~~~*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .3s;
  transition: .3s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .3s;
  transition: .3s;
}
input:checked + .slider {
  background-color: #282828;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
/*~~~~~~~~~~~~~~~~~~~~~Schalter~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~Modalding~~~~~~~~~~~~~~~~~~~~~*/
#myBtn{cursor:pointer;}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 0; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
  position: fixed;
  bottom: 0;
  background-color: #666;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-top:-0.25em;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 0.5em;
  background-color: #32CD32;
  color: white;
  font-weight: bold;
}

.modal-body {padding: 2px 16px;}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}
/*~~~~~~~~~~~~~~~~~~~~~Modalding~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~Videorahmen~~~~~~~~~~~~~~~~~~~~*/
/*.Videohalter {
  position: relative;
  width: 100%;
  height: 10vh;
  overflow: hidden;
  padding-top: 56.25%;
}*/

/*.Videolink {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: auto;
  height: 10vh;
  border: none;
}*/
/*.Videolink iframe{
	width:30vw;
	height:20vw;
}*/