@charset "utf-8";

body {
	display: flex;
	flex-direction: column;
	max-width: 75em;
	margin: 0 auto;
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 0.9em;
	color: Indigo;
}

h1 {
	font-size: 1.5em;
}

header {
	font-weight: bold;
	font-style: italic;
}

header img {
	margin-right: 1em;
}

header p {
	font-size: 1.2em;
}

header, footer {
	background-color: Lavender;
	padding: 1em;
}

section, article, aside, address {
	border-radius: 8px;
	border: 1px dotted Indigo;
	margin: 0.3em;
	padding: 1em;
}

section {
	background-color: snow;
}

section header {
	background-color: Lavender;
}

section footer {
	background-color: #ffffcc;
}

.pictureframe {
	width: 270px;
	height: 440px;
	border: 1px solid darkgrey;
	background-color: beige;
}

.title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 250px;
	height: 30px;
	border-radius: 10px;
	color: black;
	background-color: lightgrey;
	position: absolute;
	left: 10px;
	top: 110px;
}

.signatur {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 250px;
	height: 30px;
	border-radius: 10px;
	color: black;
	background-color: lightgrey;
	position: absolute;
	left: 10px;
	top: 550px;
	font-size: 0.7em;
}

.region {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 250px;
	border-radius: 1px;
	position: relative;
	left: 10px;
}

.regionF2 {
	top: 10px;
	height: 150px;
	background-color: red;
	color: white;
}

.regionF1 {
	top: 100px;
	height: 70px;
	background-color: red;
	color: white;
}

.regionsE {
	top: 55px;
	height: 5px;
	background-color: red;
}

.regionE {
	top: 100px;
	height: 40px;
	background-color: red;
}

.regionD {
	top: 100px;
	height: 40px;
	background-color: red;
}

@keyframes regionF2-kf {
	0% { background-color: #330033; height: 150px;}
	25% { background-color: #660066; height: 175px;}
	50% { background-color: #990099; height: 200px;}
	75% { background-color: #660066; height: 175px;}
	100% { background-color: #330033; height: 150px;}
}

.regionF2-on {
	animation: regionF2-kf 10s linear infinite;
	animation-fill-mode: forwards;
}

@keyframes regionF1-kf {
	0% { background-color: #330033; top: 100px; height: 70px;}
	25% { background-color: #660066; top: 50px; height: 95px;}
	50% { background-color: #990099; top: 0px; height: 120px;}
	75% { background-color: #660066; top: 50px; height: 95px;}
	100% { background-color: #330033; top: 100px; height: 70px;}
}

.regionF1-on {
	animation: regionF1-kf 10s linear infinite;
	animation-fill-mode: forwards;
}

@keyframes regionsE-kf {
	0% { background-color: #ff0000; top: 100px;}
	25% { background-color: #66cc66; top: 50px;}
	50% { background-color: #eeffee; top: 0px;}
	75% { background-color: #66cc66; top: 50px;}
	100% { background-color: #ff0000; top: 100px;}
}

.regionsE-on {
	animation: regionsE-kf 10s linear infinite;
	animation-fill-mode: forwards;
}

@keyframes regionE-kf {
	0% { background-color: #009900; top: 100px;}
	25% { background-color: #66cc66; top: 50px;}
	50% { background-color: #eeffee; top: 0px;}
	75% { background-color: #66cc66; top: 50px;}
	100% { background-color: #009900; top: 100px;}
}

.regionE-on {
	animation: regionE-kf 10s linear infinite;
	animation-fill-mode: forwards;
}

@keyframes regionD-kf {
	0% { background-color: #ffff00; top: 100px;}
	25% { background-color: #ffff99; top: 50px;}
	50% { background-color; #ffffff; top: 0px;}
	75% { background-color: #ffff99; top: 50px;}
	100% { background-color: #ffff00; top: 100px;}
}

.regionD-on {
	animation: regionD-kf 10s linear infinite;
	animation-fill-mode: forwards;
}

.mimic {
	position: absolute;
	top: 7px;
	left: 7px;
}

.roter {
	color: red;
}

.rotor {
	width: 80px;
	height: 80px;
	background-image: url("rotor.png");
	background-color: green;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 50%;
	opacity: 0.3;
	position: absolute;
	left: 50px;
	top: 50px;
	*/
}

.rotor-on {
	animation: rotor-on 0.3s linear infinite;
	background-color: Green;
}

.rotor-off {
	/* no animation */
	background-color: Red;
}



.belt1 {
	width: 148px;
	height: 29px;
	opacity: 0.3;
	border-radius: 16px;
	position: absolute;
	left: 116px;
	top: 296px;
	background-color: Red;
}

.belt1-on {
	animation: belt-on 3s linear infinite;
	animation-fill-mode: forwards;
}

 
.bandlauf1 {
	width: 148px;
	height: 28px;
	opacity: 0.3;
	border-radius: 16px;
	position: absolute;
	left: 116px;
	top: 296px;
	background-color: Red;
}

.bandlauf1-on {
	animation: bildlaufx 1s linear infinite;
}