diff --git a/themes/tsc_vfl/assets/css/_responsive.scss b/themes/tsc_vfl/assets/css/_responsive.scss
new file mode 100644
index 0000000..162825d
--- /dev/null
+++ b/themes/tsc_vfl/assets/css/_responsive.scss
@@ -0,0 +1,19 @@
+
+@mixin media-large {
+    @media screen and (min-width: 700px) {
+        @content;
+    }
+}
+
+@mixin mouse-available {
+    @media screen and (pointer: fine) {
+        @content;
+    }
+}
+
+@mixin mouse-available {
+    @media screen and (pointer: fine) {
+        @content;
+    }
+}
+
diff --git a/themes/tsc_vfl/assets/css/main.scss b/themes/tsc_vfl/assets/css/main.scss
index 1e7f722..3e00473 100644
--- a/themes/tsc_vfl/assets/css/main.scss
+++ b/themes/tsc_vfl/assets/css/main.scss
@@ -1,3 +1,5 @@
+@use 'responsive.scss' as r;
+
 /* Variables */
 $total-width: 95%;
 $color-red: #cd1013;
@@ -23,17 +25,6 @@ $color-vh-hinten: #0082c9;
     }
 }
 
-@mixin media-large {
-    @media screen and (min-width: 700px) {
-        @content;
-    }
-}
-
-@mixin mouse-available {
-    @media screen and (pointer: fine) {
-        @content;
-    }
-}
 
 /* main styling */
 
@@ -78,7 +69,7 @@ h1 {
             width: $left-menu-width;
             
 
-            @include media-large {
+            @include r.media-large {
                 display: flex;
             }
 
@@ -166,7 +157,7 @@ h1 {
             .calendar-manual {
                 font-size: xx-small;
 
-                @include media-large {
+                @include r.media-large {
                     font-size: small;
                 }
 
@@ -347,7 +338,7 @@ h1 {
         border-left: 20px solid $color-red;
         position: relative;
 
-        @include media-large {
+        @include r.media-large {
             display: flex;
         }
 
@@ -407,7 +398,7 @@ h1 {
         font: 1.5em 'Open Sans Condensed', sans-serif;
         display: none;
 
-        @include media-large {
+        @include r.media-large {
             display: block;
         }
 
@@ -531,7 +522,7 @@ h1 {
     // margin: 10px 25px 10px 0;
     display: flex;
     
-    @include media-large {
+    @include r.media-large {
         width: calc(50% - #{$gap-columns-persons} / 2);
     }
 
@@ -588,7 +579,7 @@ h1 {
             margin-right: 2px;
             flex-direction: column;
 
-            @include media-large{
+            @include r.media-large{
                 flex-direction: row;
             }
 
@@ -597,7 +588,7 @@ h1 {
                 display: block;
                 height: 190px;
 
-                @include media-large{
+                @include r.media-large{
                     flex: 33% 1 0;
                 }
                 
@@ -667,7 +658,7 @@ h1 {
 
     border-top: 1px solid $color-hor-line;
 
-    @include media-large {
+    @include r.media-large {
         display: none;
     }
     
@@ -717,7 +708,7 @@ h1 {
 
     @include menu-style;
 
-    @include media-large {
+    @include r.media-large {
         display: none;
     }
 }
@@ -749,7 +740,7 @@ h1 {
     grid-template-columns: 1fr;
     gap: 15px;
 
-    @include media-large {
+    @include r.media-large {
         &.cols-2 {
             grid-template-columns: 1fr 1fr;
         }
@@ -788,7 +779,7 @@ h1 {
         max-width: 70%;
     }
 
-    @include media-large {
+    @include r.media-large {
         display: flex;
         align-items: start;
 
@@ -852,7 +843,7 @@ h1 {
     margin: 5px 0;
     align-items: baseline;
 
-    @include mouse-available {
+    @include r.mouse-available {
         margin: 0;
     }
 
@@ -870,7 +861,7 @@ h1 {
             display: block;
             padding: 6.5px 0;
 
-            @include mouse-available {
+            @include r.mouse-available {
                 padding: 3px 0;
             }
         }
@@ -921,7 +912,7 @@ table.time {
         }
     }
 
-    @include media-large {
+    @include r.media-large {
         display: table;
         
         tr {