.navigation {
    position: absolute;
    top: 50px;
    left: 30px;
    }
.navigation a {
    width: 20px;                                      /* Link wird auf Quadrat abgebildet, kein Text, nur BG-Color */
    height: 20px;
    background-color: #FFFF00;
    border-bottom: 1px solid rgba(255, 255, 255, .2); /* dünner Rand unten+rechts, leichte Transparenz ==> wirkt dadurch plastischer */
    border-right: 1px solid rgba(255, 255, 255, .2);
    border-radius: 20px;                              /* Radius mit gleichem Wert, wie Höhe/Breite ==> ergibt Kreis */
    display: inline-block;                            /* für horizontale Anordnung Anzeige als inline-block */
    box-shadow: inset 0 0 2px 2px #B6B6B6;            /* innenliegender Boxschatten, kein Versatz, andere Farbe */
    }
.navigation a:hover {
    background-color: #FFC000;
    box-shadow: inset 0 0 2px 2px #B6B6B6;
    }
.navigation strong {
    width: 20px;
    height: 20px;
    background-color: #4F65E0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, .2);
    border-radius: 20px;
    display: inline-block;
    box-shadow: inset 0 0 2px 2px #B6B6B6;
    }
.navigation span {          /* alle Elemente der Navigation, Button und Text */
    padding-left: 10px;
    }
.hidden {                   /* Text der nur beim :hover eingeblendet wird */
    visibility: hidden;
    }
#tl1, #tl2, #tl3, #tl4 {
    position: absolute;
    top: -45px;
    left: 45px;
    color: #FFC000;
}
#active {
    position: absolute;
    left: 150px;
    top: -15px;
    color: #4F65E0;
    font-weight: bold;
    }
.link:hover > p {       /* Text zum Link über ausgeblendetem Text anzeigen -- OK */
    visibility: visible;
    }