/*Ampel*/
/*äußere Umrandung (Rechteck) der Ampel)*/
.ampel
{
    display: inline-block;
    width: 180px;
    height: 60px;
    background-color: var(--primary-background-color);
    position: relative;
    padding:0;
    margin:0;
}
/*innerer Kreis der Ampel für die Farben rot, gelb, grün)*/
.ampel:before,
.ampel:after,
.ampel span{
    content:"";
    position: absolute;
    top: 8px;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background-color:dimgray;
}
/*Position des ersten Kreises = rot)*/
.ampel:before{
    left: 12px;
}
/*Position des zweiten Kreises = gelb)*/
.ampel:after{
    left: 68px;
}
/*Position des dritten Kreises = grün)*/
.ampel span{
    left:124px;
}
/*Färbung des Kreies in die Ampelfarbe rot)*/
.rot:before{
    background-color: red;
}
/*Färbung des Kreies in die Ampelfarbe rot)*/
.gelb:after{
    background-color: yellow;
}
/*Färbung des Kreies in die Ampelfarbe rot)*/
.grün span{
    background-color: green;
}