body {
  background: -prefix-linear-gradient(top, grey, black); 
  background: linear-gradient(to bottom, grey, black);
}

.Schriftbox {
  background: #000;
  opacity: .5;
  width: 100%;
  height: auto;
  position: fixed;
  left: 0px !important;
  bottom: 5% !important;
  padding-left: 40px;
  padding-right: 40px; 
  padding-top:10px;
  padding-bottom:10px;
  vertical-align: middle;
}

h1 {
    font-size: 80pt;
    vertical-align: middle;
    color:#fff;
    line-height: 0.2;  
    font-weight: normal;
    margin-top: 10px; 
    font-family: Consolas, Monospace;
    text-align: left;
}

.Ampel{    
  background: transparent;
  width: 200px;
  height: 90%;
  position: fixed;
  right: 0px !important;
  bottom: 0px !important;
  margin: 10px;   
}

.protector{
  background: transparent;
  width: 180px;
  height: 0;
  position: absolute;
  top: 20px;
  left: -35px;
  border-right: solid 30px transparent;
  border-left: solid 30px transparent;
  border-top: solid 90px #111;
  border-radius: 10px;
  z-index: -1;
}

.protector:nth-child(2){
  top: 140px;
}

.protector:nth-child(3){
  top: 260px;
}

.trafficlight{
  background: #222;
  background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
  width: 170px;
  height: 400px;
  border-radius: 10px;
  position: relative;
  border: solid 5px #333;
}


.trafficlight:before{
  background: #222;
  background-image: radial-gradient(#444, #000);
  content: "";
  width: 170px;
  height: 150px;
  margin: 0 auto;
  position: absolute;
  top: -30px;
  margin-left: 0px;
  border-radius: 50%;
  z-index: -1;
}

.trafficlight:after{
  background: #222;
  background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
  content: "";
  width: 75px;
  height: 800px;
  margin-left: 50px;
  position: absolute;
  top: 150px;
  z-index: -1;
}

.red{
  background: red;
  background-image: radial-gradient(brown, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 35px;
  animation: 13s red infinite;
  box-shadow:
    0 0 20px #111 inset,
    0 0 10px red;
}

.yellow{
  background: yellow;
  background-image: radial-gradient(orange, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 145px;
  left: 35px;
  animation: 13s yellow infinite;
  box-shadow:
    0 0 20px #111 inset,
    0 0 10px yellow;
}

.green{
  background: green;
  background-image: radial-gradient(lime, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 270px;
  left: 35px;
  box-shadow:
    0 0 20px #111 inset,
    0 0 10px lime;
  animation: 13s green infinite;
}

@keyframes red{
  0%{opacity: .1;}
  20%{opacity: .1;}
  40%{opacity: .1;}
  60%{opacity: .1;}
  80%{opacity: .1;}
  100%{opacity: .1;}
}

@keyframes yellow{
	0%{opacity: .1;}
	10%{opacity: 1;}
	20%{opacity: .1;}
	30%{opacity: 1;}
  40%{opacity: .1;}
  50%{opacity: .1;}
	60%{opacity: .1;}
	70%{opacity: .1;}
  80%{opacity: .1;}
  90%{opacity: .1;}
  100%{opacity: .1;}
}

@keyframes green{
  0%{opacity: .1;}
  20%{opacity: .1;}
  40%{opacity: .1;}
  60%{opacity: 1;}
  80%{opacity: 1;}
  90%{opacity: 1;}
  100%{opacity: 1;}
}