@charset "utf-8";
/* CSS Document */

body {
	background: rgba(220,220,220,1.00);
	padding: 20px;
}

svg {
	fill: none;
	stroke: rgba(0,0,0,0.2);
	stroke-miterlimit: 10;
    stroke-width: 2px;
	preserveAspectRatio: none;
}

.lamp {
	fill: black;
	stroke: none;
}

#taster,
#button {
	stroke: red;
	cursor: pointer;
	transition: all 250ms linear;
}

#taster:hover,
#button:hover {
	stroke: orange;
}

#taster {
	transform-origin: 87.49px 116px;
	transform: rotate(0deg);
}

#leuchte {
	fill: yellow;
	stroke: none;
	transition: all 250ms linear;
}

.off #taster {
	transform-origin: 87.49px 116px;
	transform: rotate(-25deg);	
}

.off #button {
	transform: translate(-4px, -14px);	
}

.off #leuchte {
	fill: #adadad;
}

.anim {
	stroke: rgba(0,0,255,0.3);
	stroke-width: 1;
	stroke-dashoffset: 0;
	stroke-dasharray: 5 2;	
}

.rotateCircle {
	transform-origin: 110px 63px;
	animation: circledraw 10s linear infinite;
	stroke-linecap: round;
}

@keyframes circledraw {
	to {
		transform: rotate(360deg);
	}
}

.go {
	animation: dashdraw 4s linear infinite;
}

@keyframes dashdraw {
	50% {
		stroke-dashoffset: 2;
		stroke: rgba(0,0,255,0.3);
	}
	100% {
		stroke-dashoffset: 20;
		stroke: rgba(0,0,255,1.0);
	}
}