Add legend to calendar iframe

content/page/info/raumbelegung/index.md

@@ -12,7 +12,7 @@ menu:
 
 {{< tsc/iframe >}}https://cloud.tsc-vfl.de/index.php/apps/calendar/embed/RyoP44ym84oa5NFm-8DBYtgZwmkDsdemr-d5KikZAZJfJxMHyK/timeGridWeek/now{{< /tsc/iframe >}}
 
-Aktuell sind keine Termine vorhanden.
+{{<tsc/calendar-color-table>}}
 
 ## Raumbelegung
 

themes/tsc_vfl/assets/css/main.scss

@@ -435,6 +435,33 @@ h1 {
     }
 }
 
+:root {
+    --color-vhvorne: #ddcb55;
+    --color-vhmitte: #c98879;
+    --color-vhhinten: #0082c9;
+}
+
+.calendar-color-legend {
+    display: flex;
+    flex-direction: row;
+    margin: 10px;
+
+    .vorne {
+        background-color: var(--color-vhvorne);
+    }
+    .mitte {
+        background-color: var(--color-vhmitte);
+    }
+    .hinten {
+        background-color: var(--color-vhhinten);
+        color: white;
+    }
+    .vorne, .mitte, .hinten {
+        margin-right: 20px;
+        padding: 5px 10px;
+    }
+}
+
 @font-face{
     font-family: 'Open Sans Condensed';
     font-style: normal;

themes/tsc_vfl/layouts/shortcodes/tsc/calendar-color-table.html

@@ -0,0 +1,5 @@
+<div class="calendar-color-legend">
+    <div class="vorne">Vereinsheim vorne</div>
+    <div class="mitte">Vereinsheim mitte</div>
+    <div class="hinten">Vereinsheim hinten (neu)</div>
+</div>