WIP first working solution (untested and not optimized)

themes/tsc_vfl/assets/css/_responsive.scss

@@ -11,9 +11,4 @@
     }
 }
 
-@mixin mouse-available {
-    @media screen and (pointer: fine) {
-        @content;
-    }
-}
 

themes/tsc_vfl/assets/css/_schedule.scss

@@ -1,9 +1,19 @@
 @use './responsive.scss' as r;
 @use './colors.scss' as *;
 
+$calendar-height-row: 60px;
+
 .calendar-schedule {
     display: grid;
 
+    font-size: xx-small;
+
+    @include r.media-large {
+        & {
+            font-size: x-small;
+        }
+    }
+
     .header {
         display: contents;
         font-weight: bold;
@@ -19,13 +29,6 @@
                 text-align: center;
             }
         }
-
-        .first-row {
-            grid-row: 1;
-        }
-        .second-row {
-            grid-row: 2;
-        }
     }
     
     .times {
@@ -35,6 +38,57 @@
         }
     }
 
+    .table-row {
+        height: $calendar-height-row;
+
+        border-top: solid lightgray 1px;
+    }
+
+    .main-entry {
+        position: relative;
+
+        .event {
+            position: absolute;
+            z-index: 1;
+
+            top: calc($calendar-height-row * var(--minutes) / 60.0);
+            height: calc($calendar-height-row * var(--duration) / 60.0);
+
+            width: 30%;
+            box-sizing: border-box;
+            padding: 1px 0;
+            // overflow: hidden;
+
+            --fg-color: black;
+
+            &.room-vorne {
+                --bg-color: var(--color-vhvorne);
+                left: 2.5%;
+            }
+            &.room-mitte {
+                --bg-color: var(--color-vhmitte);
+                left: 35%
+            }
+            &.room-hinten {
+                --bg-color: var(--color-vhhinten);
+                --fg-color: white;
+                left: 67.5%;
+            }
+
+            div {
+                width: 100%;
+                height: 100%;
+                box-sizing: border-box;
+                padding: 3px;
+                border-radius: 4px;
+
+                color: var(--fg-color);
+                background-color: var(--bg-color);
+            }
+
+        }
+    }
+
     .cal-main-content {
         grid-row: 3 / 100;
         position: relative;
@@ -88,14 +142,6 @@
         }
     }
 
-    .background {
-        display: contents;
-
-        > * {
-            grid-column: 1 / -1;
-            min-height: 10px;
-        }
-    }
 }
 
 .calendar-grid-2-days {