.lektion {
    position: relative;
    color: black;
    z-index: 0;
}


.WF {
    color: white !important;
}

.WF::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* Halbtransparente dunkle Überlagerung */
    z-index: -1;
}

.blue1,
.SP,
.I,
.WFI,
.DEMA {
    background-color: rgb(153, 193, 241);
    color: white;
}

.blue2,
.DaZ {
    background-color: rgb(98, 160, 234);
    color: white;
}

.blue3,
.FR {
    background-color: rgb(53, 132, 228);
    color: white;
}

.blue4,
.EN {
    background-color: rgb(28, 113, 216);
    color: white;
}

.blue5,
.DE {
    background-color: rgb(26, 95, 180);
    color: white;
}

.green1 {
    background-color: rgb(143, 240, 164);
    color: black;
}

.green2 {
    background-color: rgb(87, 227, 137);
    color: black;
}

.green3 {
    background-color: rgb(51, 209, 122);
    color: black;
}

.green4 {
    background-color: rgb(46, 194, 126);
    color: black;
}

.green5,
.BS {
    background-color: rgb(38, 162, 105);
    color: white;
}

.yellow1,
.IF,
.IS {
    background-color: rgb(249, 240, 107);
    color: black;
}

.yellow2,
.LI {
    background-color: rgb(248, 228, 92);
    color: black;
}


.yellow3,
.PU {
    background-color: rgb(246, 211, 45);
    color: black;
}

.yellow4,
.LA,
.FL {
    background-color: rgb(245, 194, 17);
    color: black;
}

.yellow5,
.LK {
    background-color: rgb(229, 165, 10);
    color: black;
}

.orange1 {
    background-color: rgb(255, 190, 111);
    color: black;
}

.orange2,
.WAH {
    background-color: rgb(255, 163, 72);
    color: black;
}

.orange3,
.MU {
    background-color: rgb(255, 120, 0);
    color: black;
}

.orange4,
.TG {
    background-color: rgb(230, 97, 0);
    color: black;
}

.orange5,
.BG {
    background-color: rgb(198, 70, 0);
    color: white;
}

.red1 {
    background-color: rgb(246, 97, 81);
    color: white;
}

.red2,
.TZ {
    background-color: rgb(237, 51, 59);
    color: white;
}

.red3,
.MI {
    background-color: rgb(224, 27, 36);
    color: white;
}

.red4,
.NT {
    background-color: rgb(192, 28, 40);
    color: white;
}

.red5,
.MA {
    background-color: rgb(165, 29, 45);
    color: white;
}

.purple1,
.A {
    background-color: rgb(220, 138, 221);
    color: black;
}

.purple2 {
    background-color: rgb(192, 97, 203);
    color: black;
}

.purple3 {
    background-color: rgb(145, 65, 172);
    color: white;
}

.purple4 {
    background-color: rgb(129, 61, 156);
    color: white;
}

.purple5,
.RE {
    background-color: rgb(97, 53, 131);
    color: white;
}

.brown1 {
    background-color: rgb(205, 171, 143);
    color: black;
}

.brown2 {
    background-color: rgb(181, 131, 90);
    color: black;
}

.brown3 {
    background-color: rgb(152, 106, 68);
    color: white;
}

.brown4 {
    background-color: rgb(134, 94, 60);
    color: white;
}

.brown5,
.RZG,
.NMG {
    background-color: rgb(99, 69, 44);
    color: white;
}

.light1 {
    background-color: rgb(255, 255, 255);
    color: black;
}

.light2 {
    background-color: rgb(246, 245, 244);
    color: black;
}

.light3,
.TT,
.ET {
    background-color: rgb(222, 221, 218);
    color: black;
}

.light4, .HB {
    background-color: rgb(192, 191, 188);
    color: black;
}

.light5,
.LIFT {
    background-color: rgb(154, 153, 150);
    color: black;
}

.dark1, .BZ {
    background-color: rgb(119, 118, 123);
    color: white;
}

.dark2 {
    background-color: rgb(94, 92, 100);
    color: white;
}

.dark3 {
    background-color: rgb(61, 56, 70);
    color: white;
}

.dark4 {
    background-color: rgb(36, 31, 49);
    color: white;
}

.dark5 {
    background-color: rgb(0, 0, 0);
    color: white;
}