:root {
	--Hintergrund: #ffffff;
	--SignalGelb: #fbdd40;
	--SignalRot: #D1462F;
	--SignalGruen: #03C68C;
	--InaktivGrau: #ccc;
	--Schattengrau: #aaa;
	--Hightlight: #fbdd4080;
	/* Fuer den Lade-Spinner */
	--Hauptfarbe: #fff;
	--Kontrastfarbe: #c81e6c;
}

/* Absolute Center Spinner */
.ladekreis {
	position: fixed;
	z-index: 999;
	height: 2em;
	width: 2em;
	overflow: show;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none;
  }
  
  /* Transparent Overlay */
  .ladekreis:before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(rgba(20, 20, 20,.4), rgba(0, 0, 0, .4));
	background: -webkit-radial-gradient(rgba(20, 20, 20,.4), rgba(0, 0, 0,.4));
  }
  
  /* :not(:required) hides these rules from IE9 and below */
  .ladekreis:not(:required) {
	/* hide "loading..." text */
	font: 0/0 a;
	color: transparent;
	text-shadow: none;
	background-color: transparent;
	border: 0;
  }
  
  .ladekreis:not(:required):after {
	content: '';
	display: block;
	font-size: 10px;
	width: 1em;
	height: 1em;
	margin-top: -0.5em;
	-webkit-animation: spinner 3s infinite linear;
	-moz-animation: spinner 3s infinite linear;
	-ms-animation: spinner 3s infinite linear;
	-o-animation: spinner 3s infinite linear;
	animation: spinner 3s infinite linear;
	border-radius: 0.5em;
	-webkit-box-shadow: var(--Hauptfarbe) 1.5em 0 0 0, var(--Hauptfarbe) 1.1em 1.1em 0 0, var(--Hauptfarbe) 0 1.5em 0 0, var(--Hauptfarbe) -1.1em 1.1em 0 0, var(--Hauptfarbe) -1.5em 0 0 0, var(--Hauptfarbe) -1.1em -1.1em 0 0, var(--Hauptfarbe) 0 -1.5em 0 0, var(--Kontrastfarbe) 1.1em -1.1em 0 0;
  box-shadow: var(--Hauptfarbe) 1.5em 0 0 0, var(--Hauptfarbe) 1.1em 1.1em 0 0, var(--Hauptfarbe) 0 1.5em 0 0, var(--Hauptfarbe) -1.1em 1.1em 0 0, var(--Hauptfarbe) -1.5em 0 0 0, var(--Hauptfarbe) -1.1em -1.1em 0 0, var(--Hauptfarbe) 0 -1.5em 0 0, var(--Kontrastfarbe) 1.1em -1.1em 0 0;
  }
  
  /* Animation */
  
  @-webkit-keyframes spinner {
	0% {
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -ms-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
	  -moz-transform: rotate(360deg);
	  -ms-transform: rotate(360deg);
	  -o-transform: rotate(360deg);
	  transform: rotate(360deg);
	}
  }
  @-moz-keyframes spinner {
	0% {
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -ms-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
	  -moz-transform: rotate(360deg);
	  -ms-transform: rotate(360deg);
	  -o-transform: rotate(360deg);
	  transform: rotate(360deg);
	}
  }
  @-o-keyframes spinner {
	0% {
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -ms-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
	  -moz-transform: rotate(360deg);
	  -ms-transform: rotate(360deg);
	  -o-transform: rotate(360deg);
	  transform: rotate(360deg);
	}
  }
  @keyframes spinner {
	0% {
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -ms-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
	  -moz-transform: rotate(360deg);
	  -ms-transform: rotate(360deg);
	  -o-transform: rotate(360deg);
	  transform: rotate(360deg);
	}
  }

.TextUnsichtbar {
	opacity: 0;
	transition-delay: 0s;
	transition-duration: 0.5s;
}
.TextSichtbar {
	opacity: 1;
	transition-delay: 0s;
	transition-duration: 0.8s;
}

.Hidden {
	display: none;
}

.Markiert {
	background-color: var(--Hightlight);
}

.AbstandUnten {
	margin-bottom: 10px;
}

.FettRot {
	color: var(--SignalRot);
	font-weight: 600;
}