@charset "iso-8859-2";
/* CSS Document */

body {
	background-color: #2A2A2A;
	text-align: center;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: #CCC;
	overflow:scroll;
	font-size: medium;
}

body.ds, body.dss {
	overflow:auto;
}

a, a:link, a:active {
	font-weight: bold;
	color: #FFF;
}

#kreis {
	transform: translate3d(0%, 0px, 0px);
	position: relative;
	top:50px;
	width: 55%;
	height: auto;
	border-radius: 49.7%;
	z-index: 10;
	overflow: hidden;
	padding: 20px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;	
	-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

/*
@-webkit-keyframes schweben {
0% {
-webkit-transform:  skew(0deg) translate(0px,0px);
}

50% {
-webkit-transform:  skew(-1deg) translate(0,20px)
}

100% {
-webkit-transform:  skew(-0deg) translate(0px,0px)
}
}

@-moz-keyframes schweben {
	0% {
-moz-transform:  skew(0deg) translate(0px,0px);
}

50% {
-moz-transform:  skew(-1deg) translate(0px, 20px)
}

100% {
-moz-transform:  skew(-0deg) translate(0px,0px)
}

}
@-o-keyframes schweben {
0% {
-o-transform:  skew(0deg) translate(0px,0px);
}
50% {
-o-transform:  skew(-1deg) translate(0px,20px)
}

100% {
-o-transform:  skew(-0deg) translate(0px, 0px)
}
}

@keyframes schweben {
0% {
transform:  skew(0deg) translate(0px,0px);
}
50% {
transform:  skew(-1deg) translate(0px,20px)
}

100% {
transform:  skew(-0deg) translate(0px, 0px)
}
}


#kreis.bewegdich {
transform: translate3d(0%, 0px, 0px);
	-webkit-animation-name: schweben;
	-webkit-animation-play-state: running;
	-webkit-animation-duration:12s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in;
	-moz-animation-name: schweben;
	-moz-animation-play-state: running;
	-moz-animation-duration:12s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease-in;
		-o-animation-name: schweben;
	-o-animation-play-state: running;
	-o-animation-duration:12s;
	-o-animation-iteration-count: 1;
	-0-animation-timing-function: ease-in;
		animation-name: schweben;
	animation-play-state: running;
	animation-duration:12s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
}
*/

 #kreis-2, #kreis-3 {
	display: none;
}

#lo1, #ro1, #lu1,#ru1 {
	position: absolute;
	opacity: 0;
	cursor:pointer; 
	z-index: 20;
}

#lo2, #ro2, #lu2,#ru2 {
	position: absolute;
	opacity: 0;
	cursor:pointer; 
	z-index: 21;
}


#halt {position: absolute;
top: 45%;
	left: 45%; 
	border-radius:50%;
	background-color: red;
	height: 10%;
	width: 10%;
	z-index: 22;
	opacity:0;
}





#lo1 {
	border-top-left-radius:100%;
	background-color: #FC3;
	height: 50%;
	width: 50%;
}

#lu1 {
	border-bottom-left-radius: 100%;
	background-color: #FCF;
	top: 50%;
	height: 50%;
	width: 50%;
}


#ro1 {
	border-top-right-radius: 100%;
	background-color: #6F3;
	left: 50%;
	height: 50%;
	width: 50%;
}

#ro2 {
	border-top-right-radius: 100%;
	background-color: #93F;
	left: 50%;
	top: 25%;
	height: 25%;
	width: 25%;
}

#ru1 {
	border-bottom-right-radius: 100%;
	background-color: #FFF;
	top: 50%;
	left: 50%;
	height: 50%;
	width: 50%;
}


#lo2 {
	border-top-left-radius: 100%;
	background-color: #09C;
	top: 25%;
	left: 25%;
	height: 25%;
	width: 25%;
}

#lu2 {
	border-bottom-left-radius: 100%;
	background-color: #F93;
	top: 50%;
	left: 25%;
	height: 25%;
	width: 25%;
}


#ru2 {
	border-bottom-right-radius: 100%;
	background-color: white;
	top: 50%;
	left: 50%;
	height: 25%;
	width: 25%;
	z-index: 100000;
}

 #text h1,  h3#dse, h3#pro {
	margin: 0px;
	padding: 10px;
	cursor: pointer;
	display: block;
	background-image: url(grafik/grau-50.png);
}

#text h1::after, h3#dse::after, h3#pro::after {
	content: "+";
	font-weight: bold;
	float:right; 
}

#text h1.open::after, h3#dse.open::after, h3#pro.open::after {
	content: "-";
	font-weight: bold;
}

/*#text:hover + #kreis {
    top: calc(100%- 100px);
    background-color: yellow;
  }*/



p {
	line-height: 1.5em;
}

#text {
	position: absolute;
	width: 260px;
	left: 50%;
	margin: auto;
	margin-left:-130px;
	z-index: 100;
	border-left-left-radius: -12px;
	border-top-right-radius:  -12px;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	border: 1px solid #999;
	z-index: 100;
	height: auto;
	overflow:hidden;
	background-image: url(grafik/grau-50.png);
	background-repeat: repeat;
}

#text2 {
	padding-bottom: 10px;
	
	z-index: 100;
}


#datenschutz, #projekte   {
	font-size: 90%;
	font-family: Arial, Helvetica, sans-serif;
	padding: 6px;
	text-align: justify;
	text-justify: inter-word;
	width: 85%;
	max-width: 1000px;
	height:auto;
	margin-right: auto;
	margin-left: auto;
	/*position: absolute;
	left: -2000px;
	top: 50px;
	/*background-image: url(grafik/magenta-53.png);
	background-repeat: repeat;*/
	z-index: 100000;
	transition: all 800ms ease 0s;
	margin-bottom: 5%;
	display: none;
}

#datenschutz ul {
	margin-left: 35px;
}

#datenschutz ul li {
	list-style-position: outside;
	list-style-type: disc;
	margin-top: 10px;
	margin-bottom: 10px;
}

#datenschutz p {
	
	margin-top: 10px;
	margin-bottom: 10px;
}


/*#projekte {
	font-size: 90%;
	font-family: Arial, Helvetica, sans-serif;
	padding: 6px;
	text-align: justify;
	text-justify: inter-word;
	width: 85%;
	height:auto;
	margin-right: 10%;
	margin-left: 5%;
	position: absolute;
	right: -2000px;
	top: 50px;
	background-image: url(grafik/magenta-53.png);
	background-repeat: repeat;
	z-index: 100000;
	transition: all 800ms ease 0s;
	margin-bottom: 5%;
	display: none;
}*/


#datenschutz.anzeigen, #projekte.anzeigen {
	position: absolute;
	top: 250px;
	max-width: 260px;
	margin-left: 50%;
	margin-right: auto;
	z-index: 100;
	line-height: 2em;
	text-align: left;
	display: block;
}


 .innen {

	position: relative;
	left: -50%;
}
 

#projekte.anzeigen a:hover {
	color: #999;
}



#kreis-1, #kreis-2, #kreis-3{
	border-radius: 49%;
	position: relative;
	z-index: 11;	
}


#kreis-1 img, #kreis-2 img, #kreis-3 img {
	width: 100%;
	height: auto;
	/*-webkit-animation:spin 30s linear infinite;
	-moz-animation:spin 30s linear infinite;
	-o-animation:spin 30s linear  infinite;
	animation:spin 30s linear  infinite;*/
}


#kreis-1 img, #kreis-2 img, #kreis-3 img {

	-webkit-animation:spin 45s cubic-bezier(0, 1.08,.99,-2.71) infinite ;
	-moz-animation:spin 45s cubic-bezier(0, 1.08,.99,-2.71) infinite ;
	-o-animation:spin 45s cubic-bezier(0,1.08,.99,-2.71) infinite ;
	animation:spin 45s cubic-bezier(0,1.08,.99,-2.71) infinite /* alternate*/;
}



#kreis-1.schnell-vorwaerts img, #kreis-2.schnell-vorwaerts img , #kreis-3.schnell-vorwaerts img  {
	-webkit-animation:spin 12s linear infinite;
	-moz-animation:spin 12s linear infinite ;
	-o-animation:spin 12s linear infinite;
	animation:spin 12s linear infinite;
}

#kreis-1.schnell-zurueck img, #kreis-2.schnell-zurueck img, #kreis-3.schnell-zurueck img {
	-webkit-animation:spinner 12s linear infinite;
	-moz-animation:spinner 12s linear infinite ;
	-o-animation:spinner 12s linear infinite;
	animation:spinner 12s linear infinite;
}

#kreis-1.langsam-vorwaerts  img, #kreis-2.langsam-vorwaerts  img, #kreis-3.langsam-vorwaerts  img{
	-webkit-animation:spin 45s linear infinite;
	-moz-animation:spin 45s linear infinite ;
	-o-animation:spin 45s linear infinite;
	animation:spin 45s linear infinite;
}

#kreis-1.langsam-zurueck  img, #kreis-2.langsam-zurueck  img, #kreis-3.langsam-zurueck  img{
	-webkit-animation:spinn45s linear infinite ;
	-o-animation:spinner 45s linear infinite;
	animation:spinner 45s linear infinite;
}

#kreis-1.stopp  img, #kreis-2.stopp  img, #kreis-3.stopp img{
	-webkit-animation:spinner 100000000s cubic-bezier(0, 1.08,.99,-2.71) infinite;
	-moz-animation:spinner 10000000s cubic-bezier(0, 1.08,.99,-2.71) infinite ;
	-o-animation:spinner 10000000s cubic-bezier(0, 1.08,.99,-2.71) infinite;
	animation:spinner 10000000s cubic-bezier(0, 1.08,.99,-2.71) infinite;
}






@-moz-keyframes spin {100% {-moz-transform: rotate(360deg);}}
@-webkit-keyframes spin {100% {-webkit-transform: rotate(360deg);}}
@-o-keyframes spin {100% {-o-transform: rotate(360deg);}}
@keyframes spin {100% {transform:rotate(3600deg);}} 

@-moz-keyframes spinner  {100% {-moz-transform: rotate(-3600deg);}}
@-webkit-keyframes spinner  {100% {-webkit-transform: rotate(-3600deg);}}
@-o-keyframes spinnner {100% {-o-transform: rotate(-3600deg);}}
@keyframes spinner {100% {transform:rotate(-3600deg);}} 


@media screen and (max-width: 1050px) {
	
		#kreis {width: 90%;}
	
	 #kreis-3, #kreis-1 {display: none; }
	 #kreis-2 {display:block; }
	
}	

	@media screen and (max-width: 520px) {
	

		#kreis-3 {display: block; }
			#kreis-2 {display: none; }
	
	}