/** -------------------------------- Blende und Ladebildschirm ----------------------------- **/

#Blende
{
/* 	visibility:hidden; */
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:black;
	opacity:0;
	z-index: 100;
	pointer-events: none;
/* 	transition: opacity 1s ease-out; */
}

#Ladebildschirm
{
/* 	visibility:hidden; */
	opacity:0;
	position:fixed;
	top:50%;
	left:50%;
	width: 260px;
	height: 260px;
	margin-left: -125px;
	margin-top: -125px;
	background-color: #f8f8f8;
	text-align:center;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
	border-radius: 6px;
	padding:5px;
	z-index: 120;
	pointer-events: none;
/* 	transition: opacity 1s ease-out; */
}

/** -------------------------------- Ein- und Ausblenden ----------------------------- **/

.ausgeblendet
{
	max-height: 0px !important;
	opacity: 0 !important;
	padding: 0px !important;
}

.eingeblendet
{
	max-height: 200px;
	opacity: 1;
}

.ausgeblendetAnimation
{
/* 	max-height: 0px !important; */
/* 	opacity: 0 !important; */
/* 	padding: 0px !important; */
/* 	transition: all 1s ease-out; */
	animation: ausgeblendetAnimation 1s ease-out 0s 1 normal forwards;
}

@keyframes ausgeblendetAnimation
{
	0% { max-height: 280px; opacity: 1; }
	35% { max-height: 280px; opacity: 0; }
  	100% { max-height: 0px; opacity: 0; }
}

.eingeblendetAnimation
{
/* 	max-height: 200px; */
/* 	opacity: 1; */
/* 	transition: max-height 2s ease-in; */
	animation: eingeblendetAnimation 1s ease-out 0s 1 normal forwards;
}

@keyframes eingeblendetAnimation
{
	0% { max-height: 0px; opacity: 0; }
	35% { max-height: 280px; opacity: 0; }
  	100% { max-height: 280px; opacity: 1;  }
}


/** -------------------------------- Sichtabr und Unsichtbar ----------------------------- **/

.unsichtbar
{
	visibility:hidden;
}

.sichtbar
{
	visibility:visible;
}

.unsichtbarAnimation
{
	opacity: 0 !important;
	transition: all 1s ease-out;
}


.sichtbarAnimation
{
	opacity: 1;
	transition: all 1s ease-in;
}