.dark-mode .content{
	color:#ffffff!important;
}
light-mode .content{
	color:#000000!important;
}

section{
    /*padding:30px 30px 30px 80px;*/
    padding:30px 0 30px 0;
    -moz-transition:all 200ms ease-in;
    -webkit-transition:all 200ms ease-in;
    -o-transition:all 200ms ease-in;
    transition:all 200ms ease-in;

}

/* =========================== */
#accessibility-menu{
	position:absolute;
	z-index:999999;
}
#accessibility-menu img{
	width:40px;
	height:40px;
	margin:7px auto auto auto;
	filter: brightness(0) saturate(100%) invert(0%) sepia(7%) saturate(7496%) hue-rotate(135deg) brightness(85%) contrast(101%);
}
#accessibility-menu:not(:target) .inhalt,
#accessibility-menu:not(:target) .hide,
#accessibility-menu:target .show {display: none;}
#accessibility-menu:target .inhalt {display: block;}
#accessibility-menu .inhalt {
	/*box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);*/
	padding: 20px 20px 1px;
	margin: 0px 0px 10px;
	max-width:380px;
	background:transparent;
}
#accessibility-menu .show,
#accessibility-menu .hide {
	display:inline-block;
	height:40px;
	width:40px;
	background: rgb(254, 164, 0, 0);
	box-shadow:none!important;
	color:#fff;
	font-weight:bold;
}
#accessibility-menu .show:hover,
#accessibility-menu .hide:hover {
	background: rgb(255, 214, 118,0);
	color:#fff!important;
	transition:0.2s all ease-in-out!important;
}

#accessibility-menu ul{
	position:absolute;
	right:2px;
	display:inline-block;
	min-width:300px;	
	padding:20px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	background:#ffffff;
}
#accessibility-menu li{
	display:inline-block;
	width:100%;
	padding:5px 0;
	border-bottom:1px #000 solid;
} 


/* Hintergrund Schalter
 ========================================*/
.turn a{
	color:#000000;
	text-decoration:none;
} 
.toggles-container {
  position: relative;
  text-align: left;
}

.theme-btns {
  /*  width: 3.25rem;
  height: 3.25rem;
  padding: 0.5em;
  margin:30px 0 0 0;
  border-radius: 50%;*/
  cursor: pointer;
  border: none;
  background-color: transparent;
}
.theme-btns .fau{
	font-size:13px!important;
	margin:6px 0 0 15px;
	float: left;
}
a.theme-btns:hover{
	background:transparent!important;
}

.theme-btns img {
  object-fit: cover;
  border-radius: 10%;
  margin-top: 0px;
  height: 30px;
  width: auto;
  float: left;
  filter: brightness(0) saturate(100%) invert(0%) sepia(7%) saturate(7496%) hue-rotate(135deg) brightness(85%) contrast(101%);
 /* filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(285deg) brightness(105%) contrast(105%);*/
}

.theme-btns.light {
  display: none;
}

.dark .theme-btns.dark {
  display: none;
}

.dark .theme-btns.light {
  display: block;
  float: left;
}
@media (max-width: 767px){
	.toggle-container{
	position:fixed;
	top:0px;
	right:80px;
	}
	div.sticky-menu .theme-btns img{
	margin: 27px 0 0 0;
	}
}
 

/* Textgröße
 ===================================== */
.textcontrols{
	margin:0 0 0 10px;
}
.tx{
	color: #000000;
	font-size: 0.8em !important;
	line-height: 3;
	margin:6px 0 0 20px;
}


.barrierefrei button {
	display:block;
	float:left;
	font-family:inherit;
	background: #EEEEEE;
	color: #222222;
	font-size: 16px;
	margin-top:10px;
	margin-right:6px;
	width:25px;
	height:30px;
}
#Schrift-groesser{
	margin-left:12px;
}
.barrierefrei ul{
	width:100%;
	float:right;
	text-align:right;
	margin:10px 0 10px 0;
}
.barrierefrei li{
	float: left;
	text-align:left;
	list-style:none;
	height:50px;
	width:100%;
	display:inline-block;
}
.barrierefrei li:last-child{
	margin-right:50px;
}
.barrierefrei ul li div{
	float:left;
	font-size: 16px;
	float:left;
	color:#333;
	margin:0 6px 0 6px;
}
@media (max-width: 767px){
	.barrierefrei {
	position:absolute;
	width:100%;
	height:50px;
	top:60px;
	right:0;
	left:0;
	background:#ffffff;
	transition-duration: 0.4s;
	}
	.sticky-menu .barrierefrei{
	display:none;
	}
	.barrierefrei ul {
	width: 100%;
	float: left;
	text-align: left;
	padding: 0px 0 10px 10px;
	}
	.barrierefrei li{
	float:left;
	padding:5px 0 5px 0;
	text-align:left;
	}
}
@media (max-width: 360px){
	.barrierefrei {
	position:absolute;
	width:100%;
	height:90px;
	top:60px;
	right:0;
	left:0;
	background:#ffffff;
	transition-duration: 0.4s;
	}	
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
	.barrierefrei {
	position:absolute;
	width:100%;
	height:50px;
	top:65px;
	right:0;
	left:0;
	background:#ffffff;
	transition-duration: 0.4s;
	}	
}

 button#increasetext {
	 font-size: 1.5em;
}
 button#resettext {
	 font-size: 1.25em;
}
 button#decreasetext {
	 font-size: 1.125em;
}

/* Vorlesen
 ======================================================================== */
 
@import url('https://fonts.googleapis.com/css?family=Crimson+Text');

.buttons{
	display:inline-block;
	margin:10px 0 0 10px;
}

.buttons button {
	background: none;
	border: none;
	cursor: pointer;
	height: 30px;
	outline: none;
	padding: 0;
	width: 30px;
}

#play {
	background-image: url(https://rpsthecoder.github.io/js-speech-synthesis/play.svg);
	filter: brightness(0) saturate(100%) invert(0%) sepia(7%) saturate(7496%) hue-rotate(135deg) brightness(85%) contrast(101%); /*Schwarz*/
	/*filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(217%) hue-rotate(148deg) brightness(106%) contrast(102%);*//* Weiss*/
}

#play.played {
	background-image: url(https://rpsthecoder.github.io/js-speech-synthesis/play1.svg);
	filter: brightness(0) saturate(100%) invert(0%) sepia(7%) saturate(7496%) hue-rotate(135deg) brightness(85%) contrast(101%); /*Schwarz*/
	/*filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(217%) hue-rotate(148deg) brightness(106%) contrast(102%);*//* Weiss*/
}


#pause {
	background-image: url(https://rpsthecoder.github.io/js-speech-synthesis/pause.svg);
	filter: brightness(0) saturate(100%) invert(0%) sepia(7%) saturate(7496%) hue-rotate(135deg) brightness(85%) contrast(101%); /*Schwarz*/
	/*filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(217%) hue-rotate(148deg) brightness(106%) contrast(102%);*//* Weiss*/
}

#pause.paused {
	background-image: url(https://rpsthecoder.github.io/js-speech-synthesis/pause1.svg);
	filter: brightness(0) saturate(100%) invert(0%) sepia(7%) saturate(7496%) hue-rotate(135deg) brightness(85%) contrast(101%); /*Schwarz*/
	/*filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(217%) hue-rotate(148deg) brightness(106%) contrast(102%);*//* Weiss*/
}

#stop {
	background-image: url(https://rpsthecoder.github.io/js-speech-synthesis/stop.svg);
	filter: brightness(0) saturate(100%) invert(0%) sepia(7%) saturate(7496%) hue-rotate(135deg) brightness(85%) contrast(101%); /*Schwarz*/
	/*filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(217%) hue-rotate(148deg) brightness(106%) contrast(102%);*//* Weiss*/
}

#stop.stopped {
	background-image: url(https://rpsthecoder.github.io/js-speech-synthesis/stop1.svg);
	filter: brightness(0) saturate(100%) invert(0%) sepia(7%) saturate(7496%) hue-rotate(135deg) brightness(85%) contrast(101%); /*Schwarz*/
	/*filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(217%) hue-rotate(148deg) brightness(106%) contrast(102%);*//* Weiss*/
}


/*  demo decor */

#-demo-title {
	/*position: fixed;*/
	top: 0;
	width: 100%;
	height: 30px;
	background-color: #D5FFD1;
	color: #0F316C;
	line-height: 30px;
	font-weight: bold;
	font-size: 16pt;
	text-align: center;
}

#-demo-profile {
	float: left;
	height: 100%;
	opacity: .4;
}

#-demo-profile:hover {
	opacity: 1;
}
.speak img{
	width:30px;
	height:auto;
	margin:6px 2px 0 3px;
	filter: brightness(0) saturate(100%) invert(0%) sepia(7%) saturate(7496%) hue-rotate(135deg) brightness(85%) contrast(101%); /*Schwarz*/
	/*filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(217%) hue-rotate(148deg) brightness(106%) contrast(102%);*//* Weiss*/
}
.speak span {
  color: #000000;
  font-size: 0.8em !important;
  line-height: 3.3;
}