2 files changed, 14 insertions, 1 deletions
diff --git a/index.css b/index.css
index fd4eba9..a67d04c 100644
--- a/index.css
+++ b/index.css
@@ -49,6 +49,7 @@ li.ereignis {
   align-items: center;  
   justify-content: center;
   float:right;
+  background-color: #ffffff;
 }
 
 .ereignis-delta.positiv {
diff --git a/index.js b/index.js
index 55ce7b0..4348b7d 100644
--- a/index.js
+++ b/index.js
@@ -180,14 +180,26 @@ function zeichneStreak() {
 // Ereignisse, die angezeigt werden sollen, enthalten.
 function listeEvents() {
   let liste = document.getElementById("ereignisse");
+
+  // Erzeuge ein Mapping von Klassenbezeichner auf die entsprechende Klasse
+  let klassen = {};
+  daten.klassen.forEach(klasse => { klassen[klasse.bezeichner] = klasse });
+
   for (let ereignis of daten.ereignisse) {
     // Erzeuge ein Listenelement, das alle Infos des Ereignisses enthält
     let ereignisNode = document.createElement("li");
     ereignisNode.classList.add("ereignis");
 
+    // Setze den Hintergrund des Ereignisses auf 40% der Klassenfarbe
+    let klassenBezeichner = `${ereignis.Jahrgang}${ereignis.Bezeichner}`
+    let klasse = klassen[klassenBezeichner];
+    if (klasse.farbe) {
+      ereignisNode.style.backgroundColor = `${klasse.farbe}40`;
+    }
+
     // Span, das die Meta-Informationen (Klasse, Datum) eines Ereignisses enthält
     let ereignisUrsache = document.createElement("span");
-    ereignisUrsache.innerHTML = `<b>${ereignis.Jahrgang}${ereignis.Bezeichner}</b>`
+    ereignisUrsache.innerHTML = `<b>${klassenBezeichner}</b>`
     if (ereignis.Datum) {
       ereignisUrsache.innerHTML += ` <small>${ereignis.Datum}</small>`
     }