lint:#13 formatted

2025-08-09 05:07:46 +02:00 · 2024-06-10 10:50:27 +02:00
parent ee0894d048
commit 439850f69b
127 changed files with 15740 additions and 11990 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1,8 @@
+*.ts text eol=lf
+*.go text eol=lf
+*.js text eol=lf
+*.json text eol=lf
+*.vue text eol=lf
+*.md text eol=lf
+*.css text eol=lf
+*.scss text eol=lf
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,13 +4,19 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTWKalender</title>
-      <meta name="description" content="Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.">
-      <meta name="keywords" content="HTWK, calendar, iCal, dates, events, schedule">
+    <meta
+      name="description"
+      content="Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format."
+    />
+    <meta
+      name="keywords"
+      content="HTWK, calendar, iCal, dates, events, schedule"
+    />
    <link rel="icon" href="/favicon.ico" sizes="32x32" />
    <link rel="icon" type="image/svg+xml" href="/htwk.svg" />
    <link rel="mask-icon" href="/htwk-mask.svg" color="#00494c" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-      <meta name="theme-color" content="#1b2022">
+    <meta name="theme-color" content="#1b2022" />
    <link
      id="theme-link"
      rel="stylesheet"
--- a/frontend/public/primevue-sass-theme/theme-base/_colors.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/_colors.scss
@@ -4,8 +4,7 @@
      @for $i from 0 through 5 {
        @if ($i == 0) {
          --#{$name}-50: #{tint($color, (5 - $i) * 19%)};
-                }
-                @else {
+        } @else {
          --#{$name}-#{$i * 100}: #{tint($color, (5 - $i) * 19%)};
        }
      }
--- a/frontend/public/primevue-sass-theme/theme-base/_common.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/_common.scss
@@ -1,5 +1,6 @@
 // core
-.p-component, .p-component * {
+.p-component,
+.p-component * {
  box-sizing: border-box;
 }

@@ -17,7 +18,8 @@
  list-style: none;
 }

-.p-disabled, .p-disabled * {
+.p-disabled,
+.p-disabled * {
  cursor: default;
  pointer-events: none;
  user-select: none;
@@ -66,7 +68,9 @@
 .p-connected-overlay {
  opacity: 0;
  transform: scaleY(0.8);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+  transition:
+    transform 0.12s cubic-bezier(0, 0, 0.2, 1),
+    opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
 }

 .p-connected-overlay-visible {
@@ -77,7 +81,7 @@
 .p-connected-overlay-hidden {
  opacity: 0;
  transform: scaleY(1);
-    transition: opacity .1s linear;
+  transition: opacity 0.1s linear;
 }

 /* Vue based overlay animations */
@@ -91,11 +95,13 @@
 }

 .p-connected-overlay-enter-active {
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+  transition:
+    transform 0.12s cubic-bezier(0, 0, 0.2, 1),
+    opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
 }

 .p-connected-overlay-leave-active {
-    transition: opacity .1s linear;
+  transition: opacity 0.1s linear;
 }

 /* Toggleable Content */
@@ -136,7 +142,8 @@
  transition-duration: $transitionDuration;
 }

-.p-disabled, .p-component:disabled {
+.p-disabled,
+.p-component:disabled {
  opacity: $disabledOpacity;
 }

--- a/frontend/public/primevue-sass-theme/theme-base/_mixins.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/_mixins.scss
@@ -79,7 +79,8 @@
          color: $menuitemTextActiveColor;
        }

-                .p-menuitem-icon, .p-submenu-icon {
+        .p-menuitem-icon,
+        .p-submenu-icon {
          color: $menuitemIconActiveColor;
        }
      }
@@ -103,7 +104,8 @@
            color: $menuitemTextHoverColor;
          }

-                    .p-menuitem-icon, .p-submenu-icon {
+          .p-menuitem-icon,
+          .p-submenu-icon {
            color: $menuitemTextHoverColor;
          }
        }
@@ -117,7 +119,8 @@
              color: $menuitemTextHoverColor;
            }

-                        .p-menuitem-icon, .p-submenu-icon {
+            .p-menuitem-icon,
+            .p-submenu-icon {
              color: $menuitemIconHoverColor;
            }
          }
@@ -135,7 +138,8 @@
            color: $menuitemTextHoverColor;
          }

-                    .p-menuitem-icon, .p-submenu-icon {
+          .p-menuitem-icon,
+          .p-submenu-icon {
            color: $menuitemIconHoverColor;
          }
        }
@@ -181,7 +185,8 @@
            color: $horizontalMenuRootMenuitemTextHoverColor;
          }

-                    .p-menuitem-icon, .p-submenu-icon {
+          .p-menuitem-icon,
+          .p-submenu-icon {
            color: $horizontalMenuRootMenuitemIconHoverColor;
          }
        }
@@ -192,16 +197,16 @@

@mixin placeholder {
  ::-webkit-input-placeholder {
-		@content
+    @content;
  }
  :-moz-placeholder {
-		@content
+    @content;
  }
  ::-moz-placeholder {
-		@content
+    @content;
  }
  :-ms-input-placeholder {
-		@content
+    @content;
  }
 }

@@ -220,7 +225,6 @@
        .p-menuitem-link {
          padding-left: $val * ($index + 1);
        }
-    
      }
      @if $index < $length {
        @include nested-submenu-indents($val, $index + 2, $length);
--- a/frontend/public/primevue-sass-theme/theme-base/components/button/_button.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/button/_button.scss
@@ -44,7 +44,8 @@
  margin: 0;
 }

-.p-button-group .p-button:not(:last-child), .p-button-group .p-button:not(:last-child):hover {
+.p-button-group .p-button:not(:last-child),
+.p-button-group .p-button:not(:last-child):hover {
  border-right: 0 none;
 }

@@ -258,7 +259,9 @@
  }
 }

-.p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
+.p-button.p-button-secondary,
+.p-button-group.p-button-secondary > .p-button,
+.p-splitbutton.p-button-secondary > .p-button {
  color: $secondaryButtonTextColor;
  background: $secondaryButtonBg;
  border: $secondaryButtonBorder;
@@ -316,7 +319,9 @@
  }
 }

-.p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
+.p-button.p-button-info,
+.p-button-group.p-button-info > .p-button,
+.p-splitbutton.p-button-info > .p-button {
  color: $infoButtonTextColor;
  background: $infoButtonBg;
  border: $infoButtonBorder;
@@ -374,7 +379,9 @@
  }
 }

-.p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
+.p-button.p-button-success,
+.p-button-group.p-button-success > .p-button,
+.p-splitbutton.p-button-success > .p-button {
  color: $successButtonTextColor;
  background: $successButtonBg;
  border: $successButtonBorder;
@@ -432,7 +439,9 @@
  }
 }

-.p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button {
+.p-button.p-button-warning,
+.p-button-group.p-button-warning > .p-button,
+.p-splitbutton.p-button-warning > .p-button {
  color: $warningButtonTextColor;
  background: $warningButtonBg;
  border: $warningButtonBorder;
@@ -490,7 +499,9 @@
  }
 }

-.p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button {
+.p-button.p-button-help,
+.p-button-group.p-button-help > .p-button,
+.p-splitbutton.p-button-help > .p-button {
  color: $helpButtonTextColor;
  background: $helpButtonBg;
  border: $helpButtonBorder;
@@ -548,7 +559,9 @@
  }
 }

-.p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
+.p-button.p-button-danger,
+.p-button-group.p-button-danger > .p-button,
+.p-splitbutton.p-button-danger > .p-button {
  color: $dangerButtonTextColor;
  background: $dangerButtonBg;
  border: $dangerButtonBorder;
@@ -607,7 +620,9 @@
 }

@if variable-exists(contrastButtonTextColor) {
-    .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+  .p-button.p-button-contrast,
+  .p-button-group.p-button-contrast > .p-button,
+  .p-splitbutton.p-button-contrast > .p-button {
    color: $contrastButtonTextColor;
    background: $contrastButtonBg;
    border: $contrastButtonBorder;
--- a/frontend/public/primevue-sass-theme/theme-base/components/button/_speeddial.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/button/_speeddial.scss
@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";

 // core
 .p-speeddial {
@@ -25,7 +25,9 @@
 .p-speeddial-item {
  transform: scale(0);
  opacity: 0;
-    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
+  transition:
+    transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    opacity 0.8s;
  will-change: transform;
 }

--- a/frontend/public/primevue-sass-theme/theme-base/components/button/_splitbutton.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/button/_splitbutton.scss
@@ -7,7 +7,8 @@
 .p-splitbutton .p-splitbutton-defaultbutton,
 .p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
 .p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button,
-.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover {
+.p-splitbutton.p-button-outlined
+  > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover {
  flex: 1 1 auto;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
--- a/frontend/public/primevue-sass-theme/theme-base/components/data/_datatable.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/data/_datatable.scss
@@ -84,12 +84,19 @@
  white-space: nowrap;
 }

-.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
+.p-datatable-resizable-table
+  > .p-datatable-thead
+  > tr
+  > th.p-resizable-column:not(.p-frozen-column) {
  background-clip: padding-box;
  position: relative;
 }

-.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
+.p-datatable-resizable-table-fit
+  > .p-datatable-thead
+  > tr
+  > th.p-resizable-column:last-child
+  .p-column-resizer {
  display: none;
 }

@@ -399,7 +406,10 @@
  }

  &.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table,
-    &.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table {
+  &.p-datatable-scrollable
+    > .p-datatable-wrapper
+    > .p-virtualscroller
+    > .p-datatable-table {
    > .p-datatable-thead,
    > .p-datatable-tfoot {
      background-color: $tableHeaderCellBg;
--- a/frontend/public/primevue-sass-theme/theme-base/components/data/_filter.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/data/_filter.scss
@@ -36,7 +36,6 @@
  &:focus-visible {
    @include focused();
  }
-
 }

 .p-column-filter-clear-button {
--- a/frontend/public/primevue-sass-theme/theme-base/components/data/_orderlist.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/data/_orderlist.scss
@@ -80,7 +80,9 @@
      border: $inputListItemBorder;
      color: $inputListItemTextColor;
      background: $inputListItemBg;
-            transition: transform $transitionDuration, $listItemTransition;
+      transition:
+        transform $transitionDuration,
+        $listItemTransition;

      &:first-child {
        margin-top: 0;
--- a/frontend/public/primevue-sass-theme/theme-base/components/data/_picklist.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/data/_picklist.scss
@@ -76,7 +76,9 @@
      border: $inputListItemBorder;
      color: $inputListItemTextColor;
      background: $inputListItemBg;
-            transition: transform $transitionDuration, $listItemTransition;
+      transition:
+        transform $transitionDuration,
+        $listItemTransition;

      &:first-child {
        margin-top: 0;
--- a/frontend/public/primevue-sass-theme/theme-base/components/data/_timeline.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/data/_timeline.scss
@@ -29,19 +29,27 @@
  flex-direction: row-reverse;
 }

-.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
+.p-timeline-vertical.p-timeline-alternate
+  .p-timeline-event:nth-child(odd)
+  .p-timeline-event-opposite {
  text-align: right;
 }

-.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
+.p-timeline-vertical.p-timeline-alternate
+  .p-timeline-event:nth-child(odd)
+  .p-timeline-event-content {
  text-align: left;
 }

-.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
+.p-timeline-vertical.p-timeline-alternate
+  .p-timeline-event:nth-child(even)
+  .p-timeline-event-opposite {
  text-align: left;
 }

-.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
+.p-timeline-vertical.p-timeline-alternate
+  .p-timeline-event:nth-child(even)
+  .p-timeline-event-content {
  text-align: right;
 }

@@ -146,6 +154,3 @@
    }
  }
 }
-
-
-
--- a/frontend/public/primevue-sass-theme/theme-base/components/data/_treetable.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/data/_treetable.scss
@@ -150,7 +150,14 @@
 .p-treetable-scrollable-both .p-treetable-thead > tr > th,
 .p-treetable-scrollable-both .p-treetable-tbody > tr > td,
 .p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
-.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
+.p-treetable-scrollable-horizontal
+  .p-treetable-thead
+  > tr
+  > th
+  .p-treetable-scrollable-horizontal
+  .p-treetable-tbody
+  > tr
+  > td,
 .p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
  flex: 0 0 auto;
 }
@@ -299,7 +306,6 @@
          &:hover {
            color: $highlightTextColor;
          }
-                    
        }
      }
    }
--- a/frontend/public/primevue-sass-theme/theme-base/components/file/_fileupload.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/file/_fileupload.scss
@@ -20,8 +20,8 @@
  flex-wrap: wrap;
 }

-.p-fileupload > input[type='file'],
-.p-fileupload-basic input[type='file'] {
+.p-fileupload > input[type="file"],
+.p-fileupload-basic input[type="file"] {
  display: none;
 }

--- a/frontend/public/primevue-sass-theme/theme-base/components/input/_colorpicker.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/input/_colorpicker.scss
@@ -1,10 +1,20 @@
 // core
 .p-colorpicker-panel .p-colorpicker-color {
-    background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
+  background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%),
+    linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%);
 }

 .p-colorpicker-panel .p-colorpicker-hue {
-    background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
+  background: linear-gradient(
+    0deg,
+    red 0,
+    #ff0 17%,
+    #0f0 33%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    red
+  );
 }

 // theme
--- a/frontend/public/primevue-sass-theme/theme-base/components/input/_floatlabel.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/input/_floatlabel.scss
@@ -8,7 +8,7 @@
  position: absolute;
  pointer-events: none;
  top: 50%;
-    margin-top: -.5rem;
+  margin-top: -0.5rem;
  transition-property: all;
  transition-timing-function: ease;
  line-height: 1;
@@ -25,7 +25,7 @@
 .p-float-label:has(textarea.p-filled) label,
 .p-float-label:has(.p-inputwrapper-focus) label,
 .p-float-label:has(.p-inputwrapper-filled) label {
-    top: -.75rem;
+  top: -0.75rem;
  font-size: 12px;
 }

--- a/frontend/public/primevue-sass-theme/theme-base/components/input/_iconfield.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/input/_iconfield.scss
@@ -6,5 +6,5 @@
 .p-icon-field > .p-input-icon {
  position: absolute;
  top: 50%;
-    margin-top: -.5rem;
+  margin-top: -0.5rem;
 }
--- a/frontend/public/primevue-sass-theme/theme-base/components/input/_inputnumber.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/input/_inputnumber.scss
@@ -11,7 +11,9 @@
 }

 .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,
-.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {
+.p-inputnumber-buttons-horizontal
+  .p-button.p-inputnumber-button
+  .p-button-label {
  display: none;
 }

@@ -39,7 +41,9 @@
  flex-direction: column;
 }

-.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
+.p-inputnumber-buttons-stacked
+  .p-inputnumber-button-group
+  .p-button.p-inputnumber-button {
  flex: 1 1 auto;
 }

--- a/frontend/public/primevue-sass-theme/theme-base/components/input/_inputswitch.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/input/_inputswitch.scss
@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";

 // core
 .p-inputswitch {
@@ -21,7 +21,7 @@

 .p-inputswitch-slider:before {
  position: absolute;
-    content: '';
+  content: "";
  top: 50%;
 }

--- a/frontend/public/primevue-sass-theme/theme-base/components/input/_multiselect.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/input/_multiselect.scss
@@ -175,8 +175,7 @@
  &.p-multiselect {
    &.p-multiselect-chip {
      .p-multiselect-label {
-                padding: math.div(nth($inputPadding, 1), 2)
-                    nth($inputPadding, 2);
+        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
      }
    }
  }
@@ -275,4 +274,3 @@
    }
  }
 }
-
--- a/frontend/public/primevue-sass-theme/theme-base/components/input/_radiobutton.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/input/_radiobutton.scss
@@ -19,13 +19,13 @@
 .p-radiobutton-icon {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
-    transform: translateZ(0) scale(.1);
+  transform: translateZ(0) scale(0.1);
  border-radius: 50%;
  visibility: hidden;
 }

 .p-radiobutton.p-highlight .p-radiobutton-icon {
-    transform: translateZ(0) scale(1.0, 1.0);
+  transform: translateZ(0) scale(1, 1);
  visibility: visible;
 }

--- a/frontend/public/primevue-sass-theme/theme-base/components/input/_rating.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/input/_rating.scss
@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";

 // core
 .p-rating {
--- a/frontend/public/primevue-sass-theme/theme-base/components/input/_slider.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/input/_slider.scss
@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";

 // core
 .p-slider {
--- a/frontend/public/primevue-sass-theme/theme-base/components/input/_treeselect.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/input/_treeselect.scss
@@ -116,8 +116,7 @@
  &.p-treeselect {
    &.p-treeselect-chip {
      .p-treeselect-label {
-                padding: math.div(nth($inputPadding, 1), 2)
-                    nth($inputPadding, 2);
+        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
      }
    }
  }
--- a/frontend/public/primevue-sass-theme/theme-base/components/menu/_megamenu.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/menu/_megamenu.scss
@@ -82,12 +82,20 @@
  flex-direction: column;
 }

-.p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
+.p-megamenu-vertical:not(.p-megamenu-mobile)
+  .p-megamenu-root-list
+  > .p-menuitem-active
+  > .p-megamenu-panel {
  left: 100%;
  top: 0;
 }

-.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+.p-megamenu-vertical
+  .p-megamenu-root-list
+  > .p-menuitem
+  > .p-menuitem-content
+  > .p-menuitem-link
+  > .p-submenu-icon {
  margin-left: auto;
 }

@@ -266,7 +274,6 @@
          }
        }

-
        &.p-menuitem-active {
          > .p-menuitem-content {
            > .p-menuitem-link {
--- a/frontend/public/primevue-sass-theme/theme-base/components/menu/_menubar.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/menu/_menubar.scss
@@ -54,7 +54,12 @@
  top: 0;
 }

-.p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+.p-menubar
+  .p-submenu-list
+  .p-menuitem
+  .p-menuitem-content
+  .p-menuitem-link
+  .p-submenu-icon {
  margin-left: auto;
 }

@@ -187,7 +192,6 @@
          }
        }

-
        &.p-menuitem-active {
          > .p-menuitem-content {
            > .p-menuitem-link {
--- a/frontend/public/primevue-sass-theme/theme-base/components/menu/_steps.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/menu/_steps.scss
@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";

 // core
 .p-steps {
@@ -99,7 +99,7 @@
    }

    &:before {
-            content:' ';
+      content: " ";
      border-top: $divider;
      width: 100%;
      top: 50%;
--- a/frontend/public/primevue-sass-theme/theme-base/components/messages/_message.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/messages/_message.scss
@@ -41,7 +41,10 @@

 .p-message-leave-active {
  overflow: hidden;
-    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
+  transition:
+    max-height 0.3s cubic-bezier(0, 1, 0, 1),
+    opacity 0.3s,
+    margin 0.15s;
 }

 .p-message-leave-active .p-message-close {
--- a/frontend/public/primevue-sass-theme/theme-base/components/messages/_toast.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/messages/_toast.scss
@@ -63,13 +63,23 @@
 }

 .p-toast-message-enter-active {
-    -webkit-transition: transform 0.3s, opacity 0.3s;
-    transition: transform 0.3s, opacity 0.3s;
+  -webkit-transition:
+    transform 0.3s,
+    opacity 0.3s;
+  transition:
+    transform 0.3s,
+    opacity 0.3s;
 }

 .p-toast-message-leave-active {
-    -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
+  -webkit-transition:
+    max-height 0.45s cubic-bezier(0, 1, 0, 1),
+    opacity 0.3s,
+    margin-bottom 0.3s;
+  transition:
+    max-height 0.45s cubic-bezier(0, 1, 0, 1),
+    opacity 0.3s,
+    margin-bottom 0.3s;
 }

 // theme
--- a/frontend/public/primevue-sass-theme/theme-base/components/misc/_badge.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/misc/_badge.scss
@@ -3,7 +3,7 @@
  display: inline-block;
  border-radius: 10px;
  text-align: center;
-    padding: 0 .5rem;
+  padding: 0 0.5rem;
 }

 .p-overlay-badge {
@@ -20,9 +20,9 @@
 }

 .p-badge.p-badge-dot {
-    width: .5rem;
-    min-width: .5rem;
-    height: .5rem;
+  width: 0.5rem;
+  min-width: 0.5rem;
+  height: 0.5rem;
  border-radius: 50%;
  padding: 0;
 }
--- a/frontend/public/primevue-sass-theme/theme-base/components/misc/_chip.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/misc/_chip.scss
@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";

 // core
 .p-chip {
--- a/frontend/public/primevue-sass-theme/theme-base/components/misc/_inplace.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/misc/_inplace.scss
@@ -35,4 +35,3 @@
    }
  }
 }
-
--- a/frontend/public/primevue-sass-theme/theme-base/components/misc/_progressbar.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/misc/_progressbar.scss
@@ -25,27 +25,31 @@
 }

 .p-progressbar-indeterminate .p-progressbar-value::before {
-    content: '';
+  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
-    -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  -webkit-animation: p-progressbar-indeterminate-anim 2.1s
+    cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  animation: p-progressbar-indeterminate-anim 2.1s
+    cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
 }

 .p-progressbar-indeterminate .p-progressbar-value::after {
-    content: '';
+  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
-    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s
+    cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  animation: p-progressbar-indeterminate-anim-short 2.1s
+    cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  -webkit-animation-delay: 1.15s;
  animation-delay: 1.15s;
 }
--- a/frontend/public/primevue-sass-theme/theme-base/components/misc/_progressspinner.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/misc/_progressspinner.scss
@@ -8,7 +8,7 @@
 }

 .p-progress-spinner::before {
-    content: '';
+  content: "";
  display: block;
  padding-top: 100%;
 }
@@ -34,7 +34,9 @@
  stroke-dasharray: 89, 200;
  stroke-dashoffset: 0;
  stroke: $progressSpinnerStrokeColor;
-    animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+  animation:
+    p-progress-spinner-dash 1.5s ease-in-out infinite,
+    p-progress-spinner-color 6s ease-in-out infinite;
  stroke-linecap: round;
 }

--- a/frontend/public/primevue-sass-theme/theme-base/components/misc/_skeleton.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/misc/_skeleton.scss
@@ -4,7 +4,7 @@
 }

 .p-skeleton::after {
-    content: '';
+  content: "";
  animation: p-skeleton-animation 1.2s infinite;
  height: 100%;
  left: 0;
@@ -38,6 +38,11 @@
  border-radius: $borderRadius;

  &:after {
-        background: linear-gradient(90deg, rgba(255, 255, 255, 0), $skeletonAnimationBg, rgba(255, 255, 255, 0));
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0),
+      $skeletonAnimationBg,
+      rgba(255, 255, 255, 0)
+    );
  }
 }
--- a/frontend/public/primevue-sass-theme/theme-base/components/multimedia/_galleria.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/multimedia/_galleria.scss
@@ -52,12 +52,16 @@
  transition: opacity 0.2s ease-in-out;
 }

-.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
+.p-galleria-item-nav-onhover
+  .p-galleria-item-wrapper:hover
+  .p-galleria-item-nav {
  pointer-events: all;
  opacity: 1;
 }

-.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
+.p-galleria-item-nav-onhover
+  .p-galleria-item-wrapper:hover
+  .p-galleria-item-nav.p-disabled {
  pointer-events: none;
 }

@@ -206,14 +210,16 @@
  align-items: flex-start;
 }

-.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
+.p-galleria-indicator-onitem.p-galleria-indicators-right
+  .p-galleria-indicators {
  right: 0;
  top: 0;
  height: 100%;
  align-items: flex-end;
 }

-.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
+.p-galleria-indicator-onitem.p-galleria-indicators-bottom
+  .p-galleria-indicators {
  bottom: 0;
  left: 0;
  width: 100%;
--- a/frontend/public/primevue-sass-theme/theme-base/components/overlay/_confirmpopup.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/overlay/_confirmpopup.scss
@@ -22,7 +22,9 @@
 }

 .p-confirm-popup-enter-active {
-    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
+  transition:
+    transform 0.12s cubic-bezier(0, 0, 0.2, 1),
+    opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
 }

 .p-confirm-popup-leave-active {
@@ -33,7 +35,7 @@
 .p-confirm-popup:before {
  bottom: 100%;
  left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
-    content: ' ';
+  content: " ";
  height: 0;
  width: 0;
  position: absolute;
@@ -104,13 +106,15 @@
  &:before {
    border-style: solid;

-        @if (nth($overlayContentBorder, 2) == 'none') {
+    @if (nth($overlayContentBorder, 2) == "none") {
      border-color: rgba($overlayContentBg, 0);
      border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
-        }
-        @else {
+    } @else {
      border-color: rgba(nth($overlayContentBorder, 3), 0);
-            border-bottom-color: scale-color(nth($overlayContentBorder, 3), $lightness: -5%);
+      border-bottom-color: scale-color(
+        nth($overlayContentBorder, 3),
+        $lightness: -5%
+      );
    }
  }

@@ -120,10 +124,9 @@
    }

    &:before {
-            @if (nth($overlayContentBorder, 2) == 'none') {
+      @if (nth($overlayContentBorder, 2) == "none") {
        border-top-color: $overlayContentBg;
-            }
-            @else {
+      } @else {
        border-top-color: nth($overlayContentBorder, 3);
      }
    }
--- a/frontend/public/primevue-sass-theme/theme-base/components/overlay/_overlaypanel.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/overlay/_overlaypanel.scss
@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";

 // core
 .p-overlaypanel {
@@ -29,7 +29,9 @@
 }

 .p-overlaypanel-enter-active {
-    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
+  transition:
+    transform 0.12s cubic-bezier(0, 0, 0.2, 1),
+    opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
 }

 .p-overlaypanel-leave-active {
@@ -40,7 +42,7 @@
 .p-overlaypanel:before {
  bottom: 100%;
  left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
-    content: ' ';
+  content: " ";
  height: 0;
  width: 0;
  position: absolute;
@@ -109,13 +111,15 @@
  &:before {
    border-style: solid;

-        @if (nth($overlayContentBorder, 2) == 'none') {
+    @if (nth($overlayContentBorder, 2) == "none") {
      border-color: rgba($overlayContentBg, 0);
      border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
-        }
-        @else {
+    } @else {
      border-color: rgba(nth($overlayContentBorder, 3), 0);
-            border-bottom-color: scale-color(nth($overlayContentBorder, 3), $lightness: -5%);
+      border-bottom-color: scale-color(
+        nth($overlayContentBorder, 3),
+        $lightness: -5%
+      );
    }
  }

@@ -125,10 +129,9 @@
    }

    &:before {
-            @if (nth($overlayContentBorder, 2) == 'none') {
+      @if (nth($overlayContentBorder, 2) == "none") {
        border-top-color: $overlayContentBg;
-            }
-            @else {
+      } @else {
        border-top-color: nth($overlayContentBorder, 3);
      }
    }
--- a/frontend/public/primevue-sass-theme/theme-base/components/overlay/_tooltip.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/overlay/_tooltip.scss
@@ -2,18 +2,18 @@
 .p-tooltip {
  position: absolute;
  display: none;
-    padding: .25em .5rem;
+  padding: 0.25em 0.5rem;
  max-width: 12.5rem;
 }

 .p-tooltip.p-tooltip-right,
 .p-tooltip.p-tooltip-left {
-    padding: 0 .25rem;
+  padding: 0 0.25rem;
 }

 .p-tooltip.p-tooltip-top,
 .p-tooltip.p-tooltip-bottom {
-    padding:.25em 0;
+  padding: 0.25em 0;
 }

 .p-tooltip .p-tooltip-text {
@@ -31,27 +31,27 @@
 }

 .p-tooltip-right .p-tooltip-arrow {
-    margin-top: -.25rem;
-    border-width: .25em .25em .25em 0;
+  margin-top: -0.25rem;
+  border-width: 0.25em 0.25em 0.25em 0;
 }

 .p-tooltip-left .p-tooltip-arrow {
-    margin-top: -.25rem;
-    border-width: .25em 0 .25em .25rem;
+  margin-top: -0.25rem;
+  border-width: 0.25em 0 0.25em 0.25rem;
 }

 .p-tooltip.p-tooltip-top {
-    padding: .25em 0;
+  padding: 0.25em 0;
 }

 .p-tooltip-top .p-tooltip-arrow {
-    margin-left: -.25rem;
-    border-width: .25em .25em 0;
+  margin-left: -0.25rem;
+  border-width: 0.25em 0.25em 0;
 }

 .p-tooltip-bottom .p-tooltip-arrow {
-    margin-left: -.25rem;
-    border-width: 0 .25em .25rem;
+  margin-left: -0.25rem;
+  border-width: 0 0.25em 0.25rem;
 }

 // theme
--- a/frontend/public/primevue-sass-theme/theme-base/components/panel/_divider.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/panel/_divider.scss
@@ -12,7 +12,7 @@
  top: 50%;
  left: 0;
  width: 100%;
-    content: '';
+  content: "";
 }

 .p-divider-content {
@@ -33,7 +33,7 @@
  top: 0;
  left: 50%;
  height: 100%;
-    content: '';
+  content: "";
 }

 .p-divider {
--- a/frontend/public/primevue-sass-theme/theme-base/components/panel/_stepper.scss
+++ b/frontend/public/primevue-sass-theme/theme-base/components/panel/_stepper.scss
@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";

 //core
 .p-stepper .p-stepper-nav {
--- a/frontend/public/primevue-sass-theme/themes/lara/lara-dark/_extensions.scss
+++ b/frontend/public/primevue-sass-theme/themes/lara/lara-dark/_extensions.scss
@@ -1,5 +1,8 @@
@mixin focused-ring($ring-color) {
-    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px $ring-color, 0 1px 2px 0 rgba(0, 0, 0, 0.0);
+  box-shadow:
+    0 0 0 2px #1c2127,
+    0 0 0 4px $ring-color,
+    0 1px 2px 0 rgba(0, 0, 0, 0);
 }

@layer primevue {
@@ -9,13 +12,19 @@

  .p-selectbutton > .p-button,
  .p-togglebutton.p-button {
-        transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+    transition:
+      background-color $transitionDuration,
+      border-color $transitionDuration,
+      box-shadow $transitionDuration;
  }

  .p-accordion {
    .p-accordion-header {
      .p-accordion-header-link {
-                transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+        transition:
+          background-color $transitionDuration,
+          border-color $transitionDuration,
+          box-shadow $transitionDuration;
      }
    }
  }
@@ -24,7 +33,10 @@
    .p-tabview-nav {
      li {
        .p-tabview-nav-link {
-                    transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+          transition:
+            background-color $transitionDuration,
+            border-color $transitionDuration,
+            box-shadow $transitionDuration;
        }
      }
    }
@@ -34,7 +46,10 @@
    .p-tabmenu-nav {
      .p-tabmenuitem {
        .p-menuitem-link {
-                    transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+          transition:
+            background-color $transitionDuration,
+            border-color $transitionDuration,
+            box-shadow $transitionDuration;
        }
      }
    }
@@ -54,31 +69,31 @@

  .p-button {
    &:focus {
-            @include focused-ring(rgba($buttonBg, .7));
+      @include focused-ring(rgba($buttonBg, 0.7));
    }

    &.p-button-secondary:enabled:focus {
-            @include focused-ring(rgba($secondaryButtonBg, .7));
+      @include focused-ring(rgba($secondaryButtonBg, 0.7));
    }

    &.p-button-success:enabled:focus {
-            @include focused-ring(rgba($successButtonBg, .7));
+      @include focused-ring(rgba($successButtonBg, 0.7));
    }

    &.p-button-info:enabled:focus {
-            @include focused-ring(rgba($infoButtonBg, .7));
+      @include focused-ring(rgba($infoButtonBg, 0.7));
    }

    &.p-button-warning:enabled:focus {
-            @include focused-ring(rgba($warningButtonBg, .7));
+      @include focused-ring(rgba($warningButtonBg, 0.7));
    }

    &.p-button-help:enabled:focus {
-            @include focused-ring(rgba($helpButtonBg, .7));
+      @include focused-ring(rgba($helpButtonBg, 0.7));
    }

    &.p-button-danger:enabled:focus {
-            @include focused-ring(rgba($dangerButtonBg, .7));
+      @include focused-ring(rgba($dangerButtonBg, 0.7));
    }
  }

@@ -98,7 +113,7 @@

  .p-speeddial-item {
    &.p-focus > .p-speeddial-action {
-            @include focused-ring(rgba($buttonBg, .7));
+      @include focused-ring(rgba($buttonBg, 0.7));
    }
  }

@@ -109,7 +124,7 @@
  .p-message {
    .p-message-close {
      &:hover {
-                background: rgba(255,255,255,.1);
+        background: rgba(255, 255, 255, 0.1);
      }
    }
  }
@@ -118,7 +133,7 @@
    .p-toast-message {
      .p-toast-icon-close {
        &:hover {
-                    background: rgba(255,255,255,.1);
+          background: rgba(255, 255, 255, 0.1);
        }
      }
    }
@@ -130,7 +145,12 @@

  .p-picklist-buttons .p-button,
  .p-orderlist-controls .p-button {
-        transition: opacity $transitionDuration, background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+    transition:
+      opacity $transitionDuration,
+      background-color $transitionDuration,
+      color $transitionDuration,
+      border-color $transitionDuration,
+      box-shadow $transitionDuration;
  }

  .p-steps {
--- a/frontend/public/primevue-sass-theme/themes/lara/lara-dark/_variables.scss
+++ b/frontend/public/primevue-sass-theme/themes/lara/lara-dark/_variables.scss
@@ -41,7 +41,10 @@ $colors: (
 $shade000: rgba(255, 255, 255, 0.87) !default; //text color
 $shade100: rgba(255, 255, 255, 0.6) !default; //text secondary color
 $shade500: #6b7280 !default;
-$shade600: map-get($colors, "htwk-grau-140") !default; //input bg, border, divider
+$shade600: map-get(
+  $colors,
+  "htwk-grau-140"
+) !default; //input bg, border, divider
 $shade700: map-get($colors, "htwk-grau") !default; //menu bg
 $shade800: map-get($colors, "htwk-grau") !default; //elevated surface
 $shade900: rgba(map-get($colors, "htwk-schwarz"), 1) !default; //ground surface
@@ -49,15 +52,33 @@ $shade900: rgba(map-get($colors, "htwk-schwarz"), 1) !default; //ground surface
 $hoverBg: rgba(255, 255, 255, 0.03) !default;

 //global
-$fontFamily: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
+$fontFamily:
+  "Source Sans Pro",
+  -apple-system,
+  BlinkMacSystemFont,
+  Segoe UI,
+  Twemoji Country Flags,
+  Roboto,
+  Arial,
+  sans-serif,
+  Apple Color Emoji,
+  Segoe UI Emoji,
+  Segoe UI Symbol !default;
 $fontSize: 1rem !default;
 $fontWeight: normal !default;
 $textColor: $shade000 !default;
 $textSecondaryColor: $shade100 !default;
 $borderRadius: 6px !default;
 $transitionDuration: 0.2s !default;
-$formElementTransition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
-$actionIconTransition: background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$formElementTransition:
+  background-color $transitionDuration,
+  color $transitionDuration,
+  border-color $transitionDuration,
+  box-shadow $transitionDuration !default;
+$actionIconTransition:
+  background-color $transitionDuration,
+  color $transitionDuration,
+  box-shadow $transitionDuration !default;
 $listItemTransition: box-shadow $transitionDuration !default;
 $primeIconFontSize: 1rem !default;
 $divider: 1px solid $shade600 !default;
@@ -135,8 +156,10 @@ $inputListHeaderBorder: 1px solid $shade600 !default;
 $inputOverlayBg: $inputListBg !default;
 $inputOverlayHeaderBg: $inputListHeaderBg !default;
 $inputOverlayBorder: 1px solid $shade600 !default;
-$inputOverlayShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
-    0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
+$inputOverlayShadow:
+  0 2px 4px -1px rgba(0, 0, 0, 0.2),
+  0 4px 5px 0 rgba(0, 0, 0, 0.14),
+  0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;

 //password
 $passwordMeterBg: $shade600 !default;
@@ -157,8 +180,10 @@ $buttonHoverBorderColor: $primaryLightColor !default;
 $buttonActiveBg: $primaryLighterColor !default;
 $buttonTextActiveColor: $primaryTextColor !default;
 $buttonActiveBorderColor: $primaryLighterColor !default;
-$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
+$raisedButtonShadow:
+  0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+  0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+  0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
 $roundedButtonBorderRadius: 2rem !default;

 $textButtonHoverBgOpacity: 0.04 !default;
@@ -189,7 +214,8 @@ $infoButtonHoverBorderColor: map-get($colors, "htwk-cyan") !default;
 $infoButtonActiveBg: map-get($colors, "htwk-cyan") !default;
 $infoButtonTextActiveColor: $infoButtonTextColor !default;
 $infoButtonActiveBorderColor: map-get($colors, "htwk-cyan") !default;
-$infoButtonFocusShadow: 0 0 0 1px scale-color($infoButtonHoverBg, $lightness: 30%) !default;
+$infoButtonFocusShadow: 0 0 0 1px
+  scale-color($infoButtonHoverBg, $lightness: 30%) !default;

 $successButtonBg: map-get($colors, "htwk-gruen") !default;
 $successButtonTextColor: #052e16 !default;
@@ -208,10 +234,16 @@ $warningButtonTextColor: #493c08 !default;
 $warningButtonBorder: 1px solid map-get($colors, "htwk-yellow") !default;
 $warningButtonHoverBg: scale-color($warningButtonBg, $lightness: 30%) !default;
 $warningButtonTextHoverColor: $warningButtonTextColor !default;
-$warningButtonHoverBorderColor: scale-color($warningButtonBg, $lightness: 10%) !default;
+$warningButtonHoverBorderColor: scale-color(
+  $warningButtonBg,
+  $lightness: 10%
+) !default;
 $warningButtonActiveBg: scale-color($warningButtonBg, $lightness: 30%) !default;
 $warningButtonTextActiveColor: $warningButtonTextColor !default;
-$warningButtonActiveBorderColor: scale-color($warningButtonBg, $lightness: 30%) !default;
+$warningButtonActiveBorderColor: scale-color(
+  $warningButtonBg,
+  $lightness: 30%
+) !default;
 $warningButtonFocusShadow: 0 0 0 1px
  scale-color($warningButtonBg, $lightness: 30%) !default;

@@ -478,7 +510,9 @@ $cardSubTitleFontWeight: 100 !default;
 $cardSubTitleColor: $shade100 !default;
 $cardContentPadding: 1.25rem 0 !default;
 $cardFooterPadding: 1.25rem 0 0 0 !default;
-$cardShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+$cardShadow:
+  0 2px 1px -1px rgba(0, 0, 0, 0.2),
+  0 1px 1px 0 rgba(0, 0, 0, 0.14),
  0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;

 //editor
@@ -644,8 +678,10 @@ $contrastMessageIconColor: $contrastButtonTextColor !default;
 //overlays
 $overlayContentBorder: 1px solid $shade600 !default;
 $overlayContentBg: $panelContentBg !default;
-$overlayContainerShadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
-    0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12) !default;
+$overlayContainerShadow:
+  0px 11px 15px -7px rgba(0, 0, 0, 0.2),
+  0px 24px 38px 3px rgba(0, 0, 0, 0.14),
+  0px 9px 46px 8px rgba(0, 0, 0, 0.12) !default;

 //dialog
 $dialogHeaderBg: $shade800 !default;
@@ -719,8 +755,10 @@ $submenuHeaderBorderRadius: 0 !default;
 $submenuHeaderFontWeight: 0 !default;
 $overlayMenuBg: $menuBg !default;
 $overlayMenuBorder: 1px solid $shade600 !default;
-$overlayMenuShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
-    0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
+$overlayMenuShadow:
+  0 2px 4px -1px rgba(0, 0, 0, 0.2),
+  0 4px 5px 0 rgba(0, 0, 0, 0.14),
+  0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
 $verticalMenuPadding: 0.25rem 0 !default;
 $menuSeparatorMargin: 0.25rem 0 !default;

@@ -887,10 +925,23 @@ $imagePreviewActionIconFontSize: 1.5rem !default;
 $imagePreviewActionIconBorderRadius: 50% !default;

 :root {
-    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-family:
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Twemoji Country Flags,
+    Roboto,
+    Arial,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-variation-settings: normal;
-    --font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI,
+    Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji, Segoe UI Symbol;
  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  --surface-a: #{$shade800};
  --surface-b: #{$shade900};
--- a/frontend/public/primevue-sass-theme/themes/lara/lara-dark/yellow/theme.scss
+++ b/frontend/public/primevue-sass-theme/themes/lara/lara-dark/yellow/theme.scss
@@ -8,13 +8,18 @@ $highlightBg: rgba($primaryColor, 0.16) !default;
 $highlightTextColor: rgba(255, 255, 255, 0.87) !default;
 $highlightFocusBg: rgba($primaryColor, 0.24) !default;

-@import '../_variables';
-@import './_fonts';
-@import '../../../../theme-base/_components';
-@import '../_extensions';
+@import "../_variables";
+@import "./_fonts";
+@import "../../../../theme-base/_components";
+@import "../_extensions";

 :root {
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
    font-weight: 100;
  }

@@ -150,9 +155,15 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
    color: rgba(255, 255, 255, 0.87);
  }

-  .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active,
-  .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active,
-  .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active {
+  .fc.fc-unthemed
+    .fc-toolbar
+    .fc-button.fc-dayGridMonth-button.fc-button-active,
+  .fc.fc-unthemed
+    .fc-toolbar
+    .fc-button.fc-timeGridWeek-button.fc-button-active,
+  .fc.fc-unthemed
+    .fc-toolbar
+    .fc-button.fc-timeGridDay-button.fc-button-active {
    background: map-get($colors, "htwk-yellow"); /*#93c5fd*/
    border-color: map-get($colors, "htwk-yellow"); /*#93c5fd*/
    color: map-get($colors, "htwk-schwarz"); /*#1c2127*/
@@ -460,6 +471,9 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;

  .fc.fc-theme-standard .fc-highlight {
    color: rgba(255, 255, 255, 0.87);
-    background: rgba(map-get($colors, "htwk-yellow"), 0.16); /*rgba(147, 197, 253, 0.16)*/
+    background: rgba(
+      map-get($colors, "htwk-yellow"),
+      0.16
+    ); /*rgba(147, 197, 253, 0.16)*/
  }
 }
--- a/frontend/public/primevue-sass-theme/themes/lara/lara-light/_extensions.scss
+++ b/frontend/public/primevue-sass-theme/themes/lara/lara-light/_extensions.scss
@@ -1,5 +1,8 @@
@mixin focused-ring($ring-color) {
-    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px $ring-color, 0 1px 2px 0 rgba(0, 0, 0, 1.0);
+  box-shadow:
+    0 0 0 2px #ffffff,
+    0 0 0 4px $ring-color,
+    0 1px 2px 0 rgba(0, 0, 0, 1);
 }

@layer primevue {
@@ -9,13 +12,19 @@

  .p-selectbutton > .p-button,
  .p-togglebutton.p-button {
-        transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+    transition:
+      background-color $transitionDuration,
+      border-color $transitionDuration,
+      box-shadow $transitionDuration;
  }

  .p-accordion {
    .p-accordion-header {
      .p-accordion-header-link {
-                transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+        transition:
+          background-color $transitionDuration,
+          border-color $transitionDuration,
+          box-shadow $transitionDuration;
      }
    }
  }
@@ -24,7 +33,10 @@
    .p-tabview-nav {
      li {
        .p-tabview-nav-link {
-                    transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+          transition:
+            background-color $transitionDuration,
+            border-color $transitionDuration,
+            box-shadow $transitionDuration;
        }
      }
    }
@@ -34,7 +46,10 @@
    .p-tabmenu-nav {
      .p-tabmenuitem {
        .p-menuitem-link {
-                    transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+          transition:
+            background-color $transitionDuration,
+            border-color $transitionDuration,
+            box-shadow $transitionDuration;
        }
      }
    }
@@ -112,7 +127,12 @@

  .p-picklist-buttons .p-button,
  .p-orderlist-controls .p-button {
-        transition: opacity $transitionDuration, background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+    transition:
+      opacity $transitionDuration,
+      background-color $transitionDuration,
+      color $transitionDuration,
+      border-color $transitionDuration,
+      box-shadow $transitionDuration;
  }

  .p-steps {
--- a/frontend/public/primevue-sass-theme/themes/lara/lara-light/_variables.scss
+++ b/frontend/public/primevue-sass-theme/themes/lara/lara-light/_variables.scss
@@ -51,20 +51,38 @@ $shade800:#374151 !default;    //unused
 $shade900: #1f2937 !default; //unused

 //global
-$fontFamily:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
+$fontFamily:
+  "Source Sans Pro",
+  -apple-system,
+  BlinkMacSystemFont,
+  Segoe UI,
+  Twemoji Country Flags,
+  Roboto,
+  Arial,
+  sans-serif,
+  Apple Color Emoji,
+  Segoe UI Emoji,
+  Segoe UI Symbol !default;
 $fontSize: 1rem !default;
 $fontWeight: normal !default;
 $textColor: $shade700 !default;
 $textSecondaryColor: $shade600 !default;
 $borderRadius: 6px !default;
-$transitionDuration:.2s !default;
-$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
-$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$transitionDuration: 0.2s !default;
+$formElementTransition:
+  background-color $transitionDuration,
+  color $transitionDuration,
+  border-color $transitionDuration,
+  box-shadow $transitionDuration !default;
+$actionIconTransition:
+  background-color $transitionDuration,
+  color $transitionDuration,
+  box-shadow $transitionDuration !default;
 $listItemTransition: box-shadow $transitionDuration !default;
 $primeIconFontSize: 1rem !default;
 $divider: 1px solid $shade300 !default;
-$inlineSpacing:.5rem !default;
-$disabledOpacity:.6 !default;
+$inlineSpacing: 0.5rem !default;
+$disabledOpacity: 0.6 !default;
 $maskBg: rgba(0, 0, 0, 0.4) !default;
 $loadingIconFontSize: 2rem !default;
 $errorColor: map-get($colors, "htwk-rot") !default;
@@ -92,7 +110,7 @@ $actionIconHoverColor:$shade800 !default;
 $actionIconBorderRadius: 50% !default;

 //input field (e.g. inputtext, spinner, inputmask)
-$inputPadding:.75rem .75rem !default;
+$inputPadding: 0.75rem 0.75rem !default;
 $inputTextFontSize: 1rem !default;

 $inputBg: $shade000 !default;
@@ -116,8 +134,8 @@ $inputGroupAddOnMinWidth: 3rem !default;
 $inputListBg: $shade000 !default;
 $inputListTextColor: $shade700 !default;
 $inputListBorder: $inputBorder !default;
-$inputListPadding:.75rem 0 !default;
-$inputListItemPadding:.75rem 1.25rem !default;
+$inputListPadding: 0.75rem 0 !default;
+$inputListItemPadding: 0.75rem 1.25rem !default;
 $inputListItemBg: transparent !default;
 $inputListItemTextColor: $shade700 !default;
 $inputListItemHoverBg: $shade200 !default;
@@ -128,7 +146,7 @@ $inputListItemBorder:0 none !default;
 $inputListItemBorderRadius: 0 !default;
 $inputListItemMargin: 0 !default;
 $inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor !default;
-$inputListHeaderPadding:.75rem 1.25rem !default;
+$inputListHeaderPadding: 0.75rem 1.25rem !default;
 $inputListHeaderMargin: 0 !default;
 $inputListHeaderBg: $shade100 !default;
 $inputListHeaderTextColor: $shade800 !default;
@@ -138,7 +156,7 @@ $inputListHeaderBorder:1px solid $shade300 !default;
 $inputOverlayBg: $inputListBg !default;
 $inputOverlayHeaderBg: $inputListHeaderBg !default;
 $inputOverlayBorder: 0 none !default;
-$inputOverlayShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
+$inputOverlayShadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;

 //password
 $passwordMeterBg: $shade300 !default;
@@ -147,9 +165,9 @@ $passwordMediumBg:#ff9f42 !default;
 $passwordStrongBg: #29c76f !default;

 //button
-$buttonPadding:.75rem 1.25rem !default;
+$buttonPadding: 0.75rem 1.25rem !default;
 $buttonIconOnlyWidth: 3rem !default;
-$buttonIconOnlyPadding:.75rem 0 !default;
+$buttonIconOnlyPadding: 0.75rem 0 !default;
 $buttonBg: $primaryColor !default;
 $buttonTextColor: $primaryTextColor !default;
 $buttonBorder: 1px solid $primaryColor !default;
@@ -159,26 +177,29 @@ $buttonHoverBorderColor:$primaryDarkColor !default;
 $buttonActiveBg: $primaryDarkerColor !default;
 $buttonTextActiveColor: $primaryTextColor !default;
 $buttonActiveBorderColor: $primaryDarkerColor !default;
-$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$raisedButtonShadow:
+  0 3px 1px -2px rgba(0, 0, 0, 0.2),
+  0 2px 2px 0 rgba(0, 0, 0, 0.14),
+  0 1px 5px 0 rgba(0, 0, 0, 0.12) !default;
 $roundedButtonBorderRadius: 2rem !default;

-$textButtonHoverBgOpacity:.04 !default;
-$textButtonActiveBgOpacity:.16 !default;
+$textButtonHoverBgOpacity: 0.04 !default;
+$textButtonActiveBgOpacity: 0.16 !default;
 $outlinedButtonBorder: 1px solid !default;
 $plainButtonTextColor: $textSecondaryColor !default;
 $plainButtonHoverBgColor: $shade200 !default;
 $plainButtonActiveBgColor: $shade300 !default;

-$secondaryButtonBg:#64748B !default;
+$secondaryButtonBg: #64748b !default;
 $secondaryButtonTextColor: #ffffff !default;
-$secondaryButtonBorder:1px solid #64748B !default;
+$secondaryButtonBorder: 1px solid #64748b !default;
 $secondaryButtonHoverBg: #475569 !default;
 $secondaryButtonTextHoverColor: $secondaryButtonTextColor !default;
 $secondaryButtonHoverBorderColor: #475569 !default;
 $secondaryButtonActiveBg: #334155 !default;
 $secondaryButtonTextActiveColor: $secondaryButtonTextColor !default;
 $secondaryButtonActiveBorderColor: #334155 !default;
-$secondaryButtonFocusShadow:0 0 0 0.2rem #E2E8F0 !default;
+$secondaryButtonFocusShadow: 0 0 0 0.2rem #e2e8f0 !default;

 $infoButtonBg: map-get($colors, "htwk-blau") !default;
 $infoButtonTextColor: #ffffff !default;
@@ -186,10 +207,10 @@ $infoButtonBorder:1px solid map-get($colors, "htwk-blau") !default;
 $infoButtonHoverBg: #0257c7 !default;
 $infoButtonTextHoverColor: $infoButtonTextColor !default;
 $infoButtonHoverBorderColor: map-get($colors, "htwk-blau") !default;
-$infoButtonActiveBg:rgba(map-get($colors, "htwk-blau"), .8) !default;
+$infoButtonActiveBg: rgba(map-get($colors, "htwk-blau"), 0.8) !default;
 $infoButtonTextActiveColor: $infoButtonTextColor !default;
-$infoButtonActiveBorderColor:rgba(map-get($colors, "htwk-blau"), .9) !default;
-$infoButtonFocusShadow:0 0 0 0.2rem rgba(map-get($colors, "htwk-blau"), .7) !default;
+$infoButtonActiveBorderColor: rgba(map-get($colors, "htwk-blau"), 0.9) !default;
+$infoButtonFocusShadow: 0 0 0 0.2rem rgba(map-get($colors, "htwk-blau"), 0.7) !default;

 $successButtonBg: map-get($colors, "htwk-gruen") !default;
 $successButtonTextColor: #ffffff !default;
@@ -197,9 +218,12 @@ $successButtonBorder:1px solid map-get($colors, "htwk-gruen") !default;
 $successButtonHoverBg: map-get($colors, "htwk-gruen") !default;
 $successButtonTextHoverColor: $successButtonTextColor !default;
 $successButtonHoverBorderColor: map-get($colors, "htwk-gruen") !default;
-$successButtonActiveBg:#15803D !default;
+$successButtonActiveBg: #15803d !default;
 $successButtonTextActiveColor: $successButtonTextColor !default;
-$successButtonActiveBorderColor:rgba(map-get($colors, "htwk-gruen"), .9) !default;
+$successButtonActiveBorderColor: rgba(
+  map-get($colors, "htwk-gruen"),
+  0.9
+) !default;
 $successButtonFocusShadow: 0 0 0 0.2rem map-get($colors, "htwk-gruen") !default;

 $warningButtonBg: #f97316 !default;
@@ -211,29 +235,29 @@ $warningButtonHoverBorderColor:#ea580c !default;
 $warningButtonActiveBg: #c2410c !default;
 $warningButtonTextActiveColor: $warningButtonTextColor !default;
 $warningButtonActiveBorderColor: #c2410c !default;
-$warningButtonFocusShadow:0 0 0 0.2rem #FDE68A !default;
+$warningButtonFocusShadow: 0 0 0 0.2rem #fde68a !default;

-$helpButtonBg:#A855F7 !default;
+$helpButtonBg: #a855f7 !default;
 $helpButtonTextColor: #ffffff !default;
-$helpButtonBorder:1px solid #A855F7 !default;
-$helpButtonHoverBg:#9333EA !default;
+$helpButtonBorder: 1px solid #a855f7 !default;
+$helpButtonHoverBg: #9333ea !default;
 $helpButtonTextHoverColor: $helpButtonTextColor !default;
-$helpButtonHoverBorderColor:#9333EA !default;
-$helpButtonActiveBg:#7E22CE !default;
+$helpButtonHoverBorderColor: #9333ea !default;
+$helpButtonActiveBg: #7e22ce !default;
 $helpButtonTextActiveColor: $helpButtonTextColor !default;
-$helpButtonActiveBorderColor:#7E22CE !default;
-$helpButtonFocusShadow:0 0 0 0.2rem #E9D5FF !default;
+$helpButtonActiveBorderColor: #7e22ce !default;
+$helpButtonFocusShadow: 0 0 0 0.2rem #e9d5ff !default;

-$dangerButtonBg:#EF4444 !default;
+$dangerButtonBg: #ef4444 !default;
 $dangerButtonTextColor: #ffffff !default;
 $dangerButtonBorder: 1px solid $dangerButtonBg !default;
-$dangerButtonHoverBg:#DC2626 !default;
+$dangerButtonHoverBg: #dc2626 !default;
 $dangerButtonTextHoverColor: $dangerButtonTextColor !default;
-$dangerButtonHoverBorderColor:#DC2626 !default;
-$dangerButtonActiveBg:#B91C1C !default;
+$dangerButtonHoverBorderColor: #dc2626 !default;
+$dangerButtonActiveBg: #b91c1c !default;
 $dangerButtonTextActiveColor: $dangerButtonTextColor !default;
-$dangerButtonActiveBorderColor:#B91C1C !default;
-$dangerButtonFocusShadow:0 0 0 0.2rem #FECACA !default;
+$dangerButtonActiveBorderColor: #b91c1c !default;
+$dangerButtonFocusShadow: 0 0 0 0.2rem #fecaca !default;

 $contrastButtonBg: $shade900 !default;
 $contrastButtonTextColor: #ffffff !default;
@@ -316,7 +340,7 @@ $ratingStarIconHoverColor:$primaryColor !default;
 //slider
 $sliderBg: $shade300 !default;
 $sliderBorder: 0 none !default;
-$sliderHorizontalHeight:.286rem !default;
+$sliderHorizontalHeight: 0.286rem !default;
 $sliderVerticalWidth: 0.286rem !default;
 $sliderHandleWidth: 1.143rem !default;
 $sliderHandleHeight: 1.143rem !default;
@@ -328,24 +352,24 @@ $sliderHandleHoverBg:$primaryColor !default;
 $sliderRangeBg: $primaryColor !default;

 //calendar
-$calendarTableMargin:.5rem 0 !default;
-$calendarPadding:.5rem !default;
+$calendarTableMargin: 0.5rem 0 !default;
+$calendarPadding: 0.5rem !default;
 $calendarBg: $shade000 !default;
 $calendarInlineBg: $calendarBg !default;
 $calendarTextColor: $shade700 !default;
 $calendarBorder: $inputListBorder !default;
 $calendarOverlayBorder: $inputOverlayBorder !default;

-$calendarHeaderPadding:.5rem !default;
+$calendarHeaderPadding: 0.5rem !default;
 $calendarHeaderBg: $shade000 !default;
 $calendarInlineHeaderBg: $calendarBg !default;
 $calendarHeaderBorder: 1px solid $shade300 !default;
 $calendarHeaderTextColor: $shade700 !default;
 $calendarHeaderFontWeight: 100 !default;
-$calendarHeaderCellPadding:.5rem !default;
+$calendarHeaderCellPadding: 0.5rem !default;
 $calendarMonthYearHeaderHoverTextColor: $primaryColor !default;

-$calendarCellDatePadding:.5rem !default;
+$calendarCellDatePadding: 0.5rem !default;
 $calendarCellDateWidth: 2.5rem !default;
 $calendarCellDateHeight: 2.5rem !default;
 $calendarCellDateBorderRadius: 50% !default;
@@ -356,8 +380,8 @@ $calendarCellDateTodayBorderColor:transparent !default;
 $calendarCellDateTodayTextColor: $shade700 !default;

 $calendarButtonBarPadding: 1rem 0 !default;
-$calendarTimePickerPadding:.5rem !default;
-$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerPadding: 0.5rem !default;
+$calendarTimePickerElementPadding: 0 0.5rem !default;
 $calendarTimePickerTimeFontSize: 1.25rem !default;

 $calendarBreakpoint: 769px !default;
@@ -367,10 +391,10 @@ $calendarCellDatePaddingSM:0 !default;
 $inputSwitchWidth: 3rem !default;
 $inputSwitchHeight: 1.75rem !default;
 $inputSwitchBorderRadius: 30px !default;
-$inputSwitchHandleWidth:1.250rem !default;
-$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleWidth: 1.25rem !default;
+$inputSwitchHandleHeight: 1.25rem !default;
 $inputSwitchHandleBorderRadius: 50% !default;
-$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderPadding: 0.25rem !default;
 $inputSwitchSliderOffBg: $shade400 !default;
 $inputSwitchHandleOffBg: $shade000 !default;
 $inputSwitchSliderOffHoverBg: #b7bcc5 !default;
@@ -385,7 +409,7 @@ $panelHeaderBg:$shade100 !default;
 $panelHeaderTextColor: $shade800 !default;
 $panelHeaderFontWeight: 100 !default;
 $panelHeaderPadding: 1.25rem !default;
-$panelToggleableHeaderPadding:.75rem 1.25rem !default;
+$panelToggleableHeaderPadding: 0.75rem 1.25rem !default;

 $panelHeaderHoverBg: $shade200 !default;
 $panelHeaderHoverBorderColor: $shade300 !default;
@@ -457,7 +481,7 @@ $tabviewContentTextColor:$panelContentTextColor !default;
 $tabviewContentPadding: $panelContentPadding !default;

 //upload
-$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadProgressBarHeight: 0.25rem !default;
 $fileUploadContentPadding: 2rem 1rem !default;
 $fileUploadContentHoverBorder: 1px dashed $primaryColor !default;
 $fileUploadFileBorder: 1px solid $shade300 !default;
@@ -475,7 +499,10 @@ $cardSubTitleFontWeight:100 !default;
 $cardSubTitleColor: $shade600 !default;
 $cardContentPadding: 1.25rem 0 !default;
 $cardFooterPadding: 1.25rem 0 0 0 !default;
-$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+$cardShadow:
+  0 2px 1px -1px rgba(0, 0, 0, 0.2),
+  0 1px 1px 0 rgba(0, 0, 0, 0.14),
+  0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;

 //editor
 $editorToolbarBg: $panelHeaderBg !default;
@@ -492,7 +519,7 @@ $paginatorBg:$shade000 !default;
 $paginatorTextColor: $shade600 !default;
 $paginatorBorder: solid $shade200 !default;
 $paginatorBorderWidth: 0 !default;
-$paginatorPadding:.5rem 1rem !default;
+$paginatorPadding: 0.5rem 1rem !default;
 $paginatorElementWidth: $buttonIconOnlyWidth !default;
 $paginatorElementHeight: $buttonIconOnlyWidth !default;
 $paginatorElementBg: transparent !default;
@@ -502,7 +529,7 @@ $paginatorElementHoverBg:$shade200 !default;
 $paginatorElementHoverBorderColor: transparent !default;
 $paginatorElementIconHoverColor: $shade800 !default;
 $paginatorElementBorderRadius: 50% !default;
-$paginatorElementMargin:.143rem !default;
+$paginatorElementMargin: 0.143rem !default;
 $paginatorElementPadding: 0 !default;

 //table
@@ -567,7 +594,7 @@ $dataViewContentBorder:0 none !default;
 //tree
 $treeContainerPadding: 0.286rem !default;
 $treeNodePadding: 0.143rem !default;
-$treeNodeContentPadding:.5rem !default;
+$treeNodeContentPadding: 0.5rem !default;
 $treeNodeChildrenPadding: 0 0 0 1rem !default;
 $treeNodeIconColor: $shade600 !default;

@@ -606,25 +633,25 @@ $toastMessageTextMargin:0 0 0 1rem !default;
 $toastMargin: 0 0 1rem 0 !default;
 $toastPadding: 1rem !default;
 $toastBorderWidth: 0 0 0 6px !default;
-$toastShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
+$toastShadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
 $toastOpacity: 1 !default;
 $toastTitleFontWeight: 0 !default;
 $toastDetailMargin: $inlineSpacing 0 0 0 !default;

 //severities
-$infoMessageBg:rgba(219, 234, 254, .7) !default;
+$infoMessageBg: rgba(219, 234, 254, 0.7) !default;
 $infoMessageBorder: solid #3b82f6 !default;
 $infoMessageTextColor: #3b82f6 !default;
 $infoMessageIconColor: #3b82f6 !default;
-$successMessageBg:rgba(228, 248, 240, .7) !default;
+$successMessageBg: rgba(228, 248, 240, 0.7) !default;
 $successMessageBorder: solid #1ea97c !default;
 $successMessageTextColor: #1ea97c !default;
 $successMessageIconColor: #1ea97c !default;
-$warningMessageBg:rgba(255, 242, 226, .7) !default;
+$warningMessageBg: rgba(255, 242, 226, 0.7) !default;
 $warningMessageBorder: solid #cc8925 !default;
 $warningMessageTextColor: #cc8925 !default;
 $warningMessageIconColor: #cc8925 !default;
-$errorMessageBg:rgba(255, 231, 230, .7) !default;
+$errorMessageBg: rgba(255, 231, 230, 0.7) !default;
 $errorMessageBorder: solid #ff5757 !default;
 $errorMessageTextColor: #ff5757 !default;
 $errorMessageIconColor: #ff5757 !default;
@@ -640,7 +667,7 @@ $contrastMessageIconColor: $contrastButtonTextColor !default;
 //overlays
 $overlayContentBorder: 0 none !default;
 $overlayContentBg: $panelContentBg !default;
-$overlayContainerShadow:0 1px 3px rgba(0,0,0,.3) !default;
+$overlayContainerShadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;

 //dialog
 $dialogHeaderBg: $shade000 !default;
@@ -691,7 +718,7 @@ $menuWidth:12.5rem !default;
 $menuBg: $shade000 !default;
 $menuBorder: 1px solid $shade300 !default;
 $menuTextColor: $shade700 !default;
-$menuitemPadding:.75rem 1.25rem !default;
+$menuitemPadding: 0.75rem 1.25rem !default;
 $menuitemBorderRadius: 0 !default;
 $menuitemTextColor: $shade700 !default;
 $menuitemIconColor: $shade600 !default;
@@ -705,18 +732,18 @@ $menuitemTextActiveColor:$highlightTextColor !default;
 $menuitemIconActiveColor: $highlightTextColor !default;
 $menuitemActiveBg: $highlightBg !default;
 $menuitemActiveFocusBg: $highlightFocusBg !default;
-$menuitemSubmenuIconFontSize:.875rem !default;
+$menuitemSubmenuIconFontSize: 0.875rem !default;
 $submenuHeaderMargin: 0 !default;
-$submenuHeaderPadding:.75rem 1.25rem !default;
+$submenuHeaderPadding: 0.75rem 1.25rem !default;
 $submenuHeaderBg: $shade000 !default;
 $submenuHeaderTextColor: $shade800 !default;
 $submenuHeaderBorderRadius: 0 !default;
 $submenuHeaderFontWeight: 700 !default;
 $overlayMenuBg: $menuBg !default;
 $overlayMenuBorder: 0 none !default;
-$overlayMenuShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
-$verticalMenuPadding:.5rem 0 !default;
-$menuSeparatorMargin:.25rem 0 !default;
+$overlayMenuShadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
+$verticalMenuPadding: 0.5rem 0 !default;
+$menuSeparatorMargin: 0.25rem 0 !default;

 $breadcrumbPadding: 1rem !default;
 $breadcrumbBg: $menuBg !default;
@@ -727,7 +754,7 @@ $breadcrumbLastItemTextColor:$menuitemTextColor !default;
 $breadcrumbLastItemIconColor: $menuitemIconColor !default;
 $breadcrumbSeparatorColor: $menuitemTextColor !default;

-$horizontalMenuPadding:.5rem !default;
+$horizontalMenuPadding: 0.5rem !default;
 $horizontalMenuBg: $shade100 !default;
 $horizontalMenuBorder: $menuBorder !default;
 $horizontalMenuTextColor: $menuTextColor !default;
@@ -748,9 +775,9 @@ $badgeTextColor:$primaryTextColor !default;
 $badgeMinWidth: 1.5rem !default;
 $badgeHeight: 1.5rem !default;
 $badgeFontWeight: 700 !default;
-$badgeFontSize:.75rem !default;
+$badgeFontSize: 0.75rem !default;

-$tagPadding:.25rem .4rem !default;
+$tagPadding: 0.25rem 0.4rem !default;

 //carousel
 $carouselIndicatorsPadding: 1rem !default;
@@ -758,11 +785,11 @@ $carouselIndicatorBg:$shade400 !default;
 $carouselIndicatorHoverBg: $shade500 !default;
 $carouselIndicatorBorderRadius: 0 !default;
 $carouselIndicatorWidth: 2rem !default;
-$carouselIndicatorHeight:.5rem !default;
+$carouselIndicatorHeight: 0.5rem !default;

 //galleria
 $galleriaMaskBg: rgba(0, 0, 0, 0.9) !default;
-$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconMargin: 0.5rem !default;
 $galleriaCloseIconFontSize: 2rem !default;
 $galleriaCloseIconBg: transparent !default;
 $galleriaCloseIconColor: $shade100 !default;
@@ -774,7 +801,7 @@ $galleriaCloseIconBorderRadius:50% !default;

 $galleriaItemNavigatorBg: transparent !default;
 $galleriaItemNavigatorColor: $shade100 !default;
-$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorMargin: 0 0.5rem !default;
 $galleriaItemNavigatorFontSize: 2rem !default;
 $galleriaItemNavigatorHoverBg: rgba(255, 255, 255, 0.1) !default;
 $galleriaItemNavigatorHoverColor: $shade100 !default;
@@ -782,7 +809,7 @@ $galleriaItemNavigatorWidth:4rem !default;
 $galleriaItemNavigatorHeight: 4rem !default;
 $galleriaItemNavigatorBorderRadius: $borderRadius !default;

-$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionBg: rgba(0, 0, 0, 0.5) !default;
 $galleriaCaptionTextColor: $shade100 !default;
 $galleriaCaptionPadding: 1rem !default;

@@ -792,12 +819,12 @@ $galleriaIndicatorHoverBg:$shade500 !default;
 $galleriaIndicatorBorderRadius: 50% !default;
 $galleriaIndicatorWidth: 1rem !default;
 $galleriaIndicatorHeight: 1rem !default;
-$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
-$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
-$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+$galleriaIndicatorsBgOnItem: rgba(0, 0, 0, 0.5) !default;
+$galleriaIndicatorBgOnItem: rgba(255, 255, 255, 0.4) !default;
+$galleriaIndicatorHoverBgOnItem: rgba(255, 255, 255, 0.6) !default;

-$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
-$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailContainerBg: rgba(0, 0, 0, 0.9) !default;
+$galleriaThumbnailContainerPadding: 1rem 0.25rem !default;
 $galleriaThumbnailNavigatorBg: transparent !default;
 $galleriaThumbnailNavigatorColor: $shade100 !default;
 $galleriaThumbnailNavigatorHoverBg: rgba(255, 255, 255, 0.1) !default;
@@ -856,15 +883,15 @@ $speedDialActionTextHoverColor: #fff !default;
 //dock
 $dockActionWidth: 4rem !default;
 $dockActionHeight: 4rem !default;
-$dockItemPadding: .5rem !default;
+$dockItemPadding: 0.5rem !default;
 $dockItemBorderRadius: $borderRadius !default;
 $dockCurrentItemMargin: 1.5rem !default;
 $dockFirstItemsMargin: 1.3rem !default;
 $dockSecondItemsMargin: 0.9rem !default;
-$dockBg: rgba(255,255,255,.1) !default;
+$dockBg: rgba(255, 255, 255, 0.1) !default;
 $dockBorder: 1px solid rgba(255, 255, 255, 0.2) !default;
-$dockPadding: .5rem .5rem !default;
-$dockBorderRadius: .5rem !default;
+$dockPadding: 0.5rem 0.5rem !default;
+$dockBorderRadius: 0.5rem !default;

 //image
 $imageMaskBg: rgba(0, 0, 0, 0.9) !default;
@@ -881,10 +908,23 @@ $imagePreviewActionIconFontSize:1.5rem !default;
 $imagePreviewActionIconBorderRadius: 50% !default;

 :root {
-    font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-family:
+    "Source Sans Pro",
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Twemoji Country Flags,
+    Roboto,
+    Arial,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-variation-settings: normal;
-    --font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI,
+    Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji, Segoe UI Symbol;
  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  --surface-a: #{$shade000};
  --surface-b: #{$shade100};
--- a/frontend/public/primevue-sass-theme/themes/lara/lara-light/blue/theme.scss
+++ b/frontend/public/primevue-sass-theme/themes/lara/lara-light/blue/theme.scss
@@ -4,17 +4,22 @@ $primaryDarkColor: #002d67 !default;
 $primaryDarkerColor: #022541 !default;
 $primaryTextColor: #ffffff !default;

-$highlightBg: #EFF6FF !default;
+$highlightBg: #eff6ff !default;
 $highlightTextColor: $primaryDarkerColor !default;
-$highlightFocusBg: rgba($primaryColor, .24) !default;
+$highlightFocusBg: rgba($primaryColor, 0.24) !default;

-@import '../_variables';
-@import './_fonts';
-@import '../../../../theme-base/_components';
-@import '../_extensions';
+@import "../_variables";
+@import "./_fonts";
+@import "../../../../theme-base/_components";
+@import "../_extensions";

 :root {
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
    font-weight: 100;
  }

@@ -139,9 +144,15 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
    color: rgba(255, 255, 255, 0.87);
  }

-  .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active,
-  .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active,
-  .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active {
+  .fc.fc-unthemed
+    .fc-toolbar
+    .fc-button.fc-dayGridMonth-button.fc-button-active,
+  .fc.fc-unthemed
+    .fc-toolbar
+    .fc-button.fc-timeGridWeek-button.fc-button-active,
+  .fc.fc-unthemed
+    .fc-toolbar
+    .fc-button.fc-timeGridDay-button.fc-button-active {
    background: map-get($colors, "primary"); /*#93c5fd*/
    border-color: map-get($colors, "primary"); /*#93c5fd*/
    color: $primaryTextColor; /*#1c2127*/
@@ -449,6 +460,9 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;

  .fc.fc-theme-standard .fc-highlight {
    color: rgba(255, 255, 255, 0.87);
-    background: rgba(map-get($colors, "primary"), 0.16); /*rgba(147, 197, 253, 0.16)*/
+    background: rgba(
+      map-get($colors, "primary"),
+      0.16
+    ); /*rgba(147, 197, 253, 0.16)*/
  }
 }
--- a/frontend/public/primevue-sass-theme/themes/lara/lara-light/green/theme.scss
+++ b/frontend/public/primevue-sass-theme/themes/lara/lara-light/green/theme.scss
@@ -1,22 +1,35 @@
-@use 'sass:color';
+@use "sass:color";

 $primaryColor: #00944c !default;
-$primaryLightColor: color.scale($primaryColor, $lightness: 10%, $saturation: -10%) !default;
+$primaryLightColor: color.scale(
+  $primaryColor,
+  $lightness: 10%,
+  $saturation: -10%
+) !default;
 $primaryDarkColor: color.scale($primaryColor, $lightness: -40%) !default;
 $primaryDarkerColor: color.scale($primaryColor, $lightness: -80%) !default;
 $primaryTextColor: #ffffff !default;

-$highlightBg: color.scale($primaryColor, $lightness: 90%, $saturation: -80%) !default;
+$highlightBg: color.scale(
+  $primaryColor,
+  $lightness: 90%,
+  $saturation: -80%
+) !default;
 $highlightTextColor: $primaryDarkerColor !default;
-$highlightFocusBg: rgba($primaryColor, .24) !default;
+$highlightFocusBg: rgba($primaryColor, 0.24) !default;

-@import '../_variables';
-@import './_fonts';
-@import '../../../../theme-base/_components';
-@import '../_extensions';
+@import "../_variables";
+@import "./_fonts";
+@import "../../../../theme-base/_components";
+@import "../_extensions";

 :root {
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
    font-weight: 100;
  }

@@ -152,9 +165,15 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
    color: rgba(255, 255, 255, 0.87);
  }

-  .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active,
-  .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active,
-  .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active {
+  .fc.fc-unthemed
+    .fc-toolbar
+    .fc-button.fc-dayGridMonth-button.fc-button-active,
+  .fc.fc-unthemed
+    .fc-toolbar
+    .fc-button.fc-timeGridWeek-button.fc-button-active,
+  .fc.fc-unthemed
+    .fc-toolbar
+    .fc-button.fc-timeGridDay-button.fc-button-active {
    background: map-get($colors, "primary"); /*#93c5fd*/
    border-color: map-get($colors, "primary"); /*#93c5fd*/
    color: $primaryTextColor; /*#1c2127*/
@@ -462,6 +481,9 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;

  .fc.fc-theme-standard .fc-highlight {
    color: rgba(255, 255, 255, 0.87);
-    background: rgba(map-get($colors, "primary"), 0.16); /*rgba(147, 197, 253, 0.16)*/
+    background: rgba(
+      map-get($colors, "primary"),
+      0.16
+    ); /*rgba(147, 197, 253, 0.16)*/
  }
 }
--- a/frontend/public/themes/lara-dark-blue/theme.css
+++ b/frontend/public/themes/lara-dark-blue/theme.css
--- a/frontend/public/themes/lara-light-blue/theme.css
+++ b/frontend/public/themes/lara-light-blue/theme.css
--- a/frontend/src/api/fetchRoomOccupancy.ts
+++ b/frontend/src/api/fetchRoomOccupancy.ts
@@ -22,12 +22,13 @@ export async function fetchRoomOccupancy(
  to_date: string,
 ): Promise<RoomOccupancyList> {
  var roomOccupancyList: RoomOccupancyList = new RoomOccupancyList(
-    new Date(), 0, 0, []
+    new Date(),
+    0,
+    0,
+    [],
  );

-  await fetch(
-    "/api/schedule/rooms?from=" + from_date + "&to=" + to_date,
-  )
+  await fetch("/api/schedule/rooms?from=" + from_date + "&to=" + to_date)
    .then((response) => {
      return response.arrayBuffer();
    })
--- a/frontend/src/components/CalendarLink.vue
+++ b/frontend/src/components/CalendarLink.vue
@@ -104,7 +104,7 @@ const actions = computed(() => [
    label: t("calendarLink.toHTWKalendar"),
    icon: "pi pi-home",
    command: forwardToHTWKalendar,
-  }
+  },
 ]);
 </script>

--- a/frontend/src/components/CalendarViewer.vue
+++ b/frontend/src/components/CalendarViewer.vue
@@ -17,10 +17,13 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->

 <script setup lang="ts">
-
 import FullCalendar from "@fullcalendar/vue3";
 import { computed, ComputedRef, inject, Ref, ref, watch } from "vue";
-import { CalendarOptions, DatesSetArg, EventClickArg } from "@fullcalendar/core";
+import {
+  CalendarOptions,
+  DatesSetArg,
+  EventClickArg,
+} from "@fullcalendar/core";
 import allLocales from "@fullcalendar/core/locales-all";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import interactionPlugin from "@fullcalendar/interaction";
@@ -55,7 +58,6 @@ const toggle = (info: EventClickArg) => {
    op.value.hide();
    return;
  } else {
-    
    clickedEvent.value = {
      title: info.event._def.title,
      start: start,
@@ -66,11 +68,8 @@ const toggle = (info: EventClickArg) => {
    };
    op.value.show(info.jsEvent);
    op.value.target = info.el;
-
-  }
-
-
  }
+};

 const selectedToken = computed(() => props.token);

@@ -79,8 +78,7 @@ const date: Ref<Date> = ref(new Date());

 const { data: calendar } = useQuery({
  queryKey: ["userCalendar", selectedToken],
-  queryFn: () =>
-    fetchICalendarEvents(selectedToken.value),
+  queryFn: () => fetchICalendarEvents(selectedToken.value),
  select: (data) => {
    return data;
  },
@@ -175,8 +173,11 @@ watch(mobilePage, () => {
 </script>

 <template>
-
-  <FullCalendar id="overlay-mount-point" ref="fullCalendar" :options="calendarOptions" >
+  <FullCalendar
+    id="overlay-mount-point"
+    ref="fullCalendar"
+    :options="calendarOptions"
+  >
  </FullCalendar>

  <OverlayPanel ref="op">
@@ -188,7 +189,6 @@ watch(mobilePage, () => {
      <p>Notes: {{ clickedEvent.notes }}</p>
    </div>
  </OverlayPanel>
-
 </template>

 <style scoped>
--- a/frontend/src/components/DarkModeSwitcher.vue
+++ b/frontend/src/components/DarkModeSwitcher.vue
@@ -63,7 +63,7 @@ onMounted(() => {
    class="p-button-rounded w-full md:w-auto"
    style="margin-right: 1rem"
    :severity="isDark ? 'warning' : 'success'"
-    @click="toggleTheme();"
+    @click="toggleTheme()"
  >
    <i v-if="isDark" class="pi pi-sun"></i>
    <i v-else class="pi pi-moon"></i>
--- a/frontend/src/components/LocaleSwitcher.vue
+++ b/frontend/src/components/LocaleSwitcher.vue
@@ -68,7 +68,14 @@ updateLocale(localeStore().locale);
    <template #value="slotProps">
      <div v-if="slotProps.value" class="flex align-items-center">
        <div class="mr-2 flag">{{ displayIcon(slotProps.value) }}</div>
-        <div style="font-family: 'Twemoji Country Flags', 'Helvetica', 'Comic Sans', serif;">{{ displayCountry(slotProps.value) }}</div>
+        <div
+          style="
+            font-family: &quot;Twemoji Country Flags&quot;,
+              &quot;Helvetica&quot;, &quot;Comic Sans&quot;, serif;
+          "
+        >
+          {{ displayCountry(slotProps.value) }}
+        </div>
      </div>
      <span v-else>
        {{ slotProps.placeholder }}
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -67,7 +67,7 @@ const items = computed(() => [
        label: t("roomFinderPage.roomSchedule") + " (offline)",
        icon: "pi pi-fw pi-ban",
        route: "/rooms/occupancy/offline",
-      }
+      },
    ],
  },
  {
@@ -140,7 +140,9 @@ function handleDarkModeToggled(isDarkVar: boolean) {
    </template>
    <template #end>
      <div class="flex align-items-stretch justify-content-center">
-        <DarkModeSwitcher @dark-mode-toggled="handleDarkModeToggled"></DarkModeSwitcher>
+        <DarkModeSwitcher
+          @dark-mode-toggled="handleDarkModeToggled"
+        ></DarkModeSwitcher>
        <LocaleSwitcher></LocaleSwitcher>
      </div>
    </template>
--- a/frontend/src/components/RoomOccupation.vue
+++ b/frontend/src/components/RoomOccupation.vue
@@ -181,9 +181,7 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
          borderColor: event.showFree
            ? "var(--htwk-gruen-600)"
            : "var(--htwk-grau-60-600)",
-          textColor: event.showFree
-            ? "var(--green-50)"
-            : "white",
+          textColor: event.showFree ? "var(--green-50)" : "white",
          title: event.showFree
            ? t("roomFinderPage.available")
            : t("roomFinderPage.occupied"),
--- a/frontend/src/components/RoomOccupationOffline.vue
+++ b/frontend/src/components/RoomOccupationOffline.vue
@@ -79,7 +79,11 @@ const selectedRoom = computed(() => props.room);
 */
 function transformData(data: RoomOccupancyList) {
  const events = data
-    .decodeOccupancy(selectedRoom.value, new Date(currentDateFrom.value), new Date(currentDateTo.value))
+    .decodeOccupancy(
+      selectedRoom.value,
+      new Date(currentDateFrom.value),
+      new Date(currentDateTo.value),
+    )
    .map((event, index) => ({
      id: index,
      event: event,
@@ -92,7 +96,7 @@ const { data: occupations } = useQuery({
  queryFn: () =>
    fetchRoomOccupancy(
      new Date(currentDateFrom.value).toISOString(),
-      new Date(currentDateTo.value).toISOString()
+      new Date(currentDateTo.value).toISOString(),
    ),
  select: (data) => transformData(data),
  enabled: () => selectedRoom.value !== "" && currentDateFrom.value !== "",
@@ -188,9 +192,7 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
          color: event.event.free
            ? "var(--htwk-gruen-500)"
            : "var(--htwk-grau-60-500)",
-          textColor: event.event.free
-            ? "var(--green-50)"
-            : "white",
+          textColor: event.event.free ? "var(--green-50)" : "white",
          title: event.event.stub
            ? t("roomFinderPage.stub")
            : event.event.free
--- a/frontend/src/helpers/dates.ts
+++ b/frontend/src/helpers/dates.ts
@@ -23,7 +23,6 @@ export function formatYearMonthDay(date: Date): string {
  return date.toISOString().split("T")[0].replace(/-/g, "");
 }

-
 export function removeTZ(date: Date): Date {
-  return new Date(date.getTime() + date.getTimezoneOffset() * 60000)
+  return new Date(date.getTime() + date.getTimezoneOffset() * 60000);
 }
--- a/frontend/src/helpers/ical.test.ts
+++ b/frontend/src/helpers/ical.test.ts
@@ -18,12 +18,9 @@ import { expect, test } from "vitest";
 import { exportedForTesting } from "@/helpers/ical.ts";
 import { CalendarComponent } from "ical";

-
 // colorizeEvents has only the function to colorize the events that are passed to it
 test("colorizeEventsSameSummary", () => {
-
-  const events: CalendarComponent[] =
-    [
+  const events: CalendarComponent[] = [
    {
      type: "VEVENT",
      summary: "Operations Research",
@@ -34,17 +31,14 @@ test("colorizeEventsSameSummary", () => {
    },
  ];

-expect(exportedForTesting.colorizeEvents(
-    events
-       )
-    ).toEqual([{ summary: "Operations Research", color: "var(--htwk-rot-200)" },{ summary: "Operations Research", color: "var(--htwk-rot-200)" }]);
-}
-);
+  expect(exportedForTesting.colorizeEvents(events)).toEqual([
+    { summary: "Operations Research", color: "var(--htwk-rot-200)" },
+    { summary: "Operations Research", color: "var(--htwk-rot-200)" },
+  ]);
+});

 test("colorizeEventsDifferentSummary", () => {
-
-    const events: CalendarComponent[] =
-      [
+  const events: CalendarComponent[] = [
    {
      type: "VEVENT",
      summary: "Algorithmische Mathematik",
@@ -55,17 +49,14 @@ test("colorizeEventsDifferentSummary", () => {
    },
  ];

-    expect(exportedForTesting.colorizeEvents(
-        events
-      )
-    ).toEqual([{ summary: "Algorithmische Mathematik", color: "var(--htwk-rot-200)" },{ summary: "Funktionale Programmierung", color: "var(--htwk-gruen-300)" }]);
-  }
-);
-
+  expect(exportedForTesting.colorizeEvents(events)).toEqual([
+    { summary: "Algorithmische Mathematik", color: "var(--htwk-rot-200)" },
+    { summary: "Funktionale Programmierung", color: "var(--htwk-gruen-300)" },
+  ]);
+});

 test("filterEventsDistinct", () => {
-  const events: CalendarComponent[] =
-    [
+  const events: CalendarComponent[] = [
    {
      type: "VEVENT",
      summary: "Operations Research",
@@ -76,15 +67,13 @@ test("filterEventsDistinct", () => {
    },
  ];

-  expect(exportedForTesting.filterEventsDistinct(
-      events
-    )
-  ).toEqual([{ type: "VEVENT", summary: "Operations Research" }]);
+  expect(exportedForTesting.filterEventsDistinct(events)).toEqual([
+    { type: "VEVENT", summary: "Operations Research" },
+  ]);
 });

 test("filterEventsDistinctDifferentSummary", () => {
-  const events: CalendarComponent[] =
-    [
+  const events: CalendarComponent[] = [
    {
      type: "VEVENT",
      summary: "Algorithmische Mathematik",
@@ -95,16 +84,11 @@ test("filterEventsDistinctDifferentSummary", () => {
    },
  ];

-  expect(exportedForTesting.filterEventsDistinct(
-      events
-    )
-  ).toEqual(events);
+  expect(exportedForTesting.filterEventsDistinct(events)).toEqual(events);
 });

-
 test("extractedColorizedEvents", () => {
-  const events: CalendarComponent[] =
-    [
+  const events: CalendarComponent[] = [
    {
      type: "VEVENT",
      summary: "Operations Research",
@@ -115,15 +99,13 @@ test("extractedColorizedEvents", () => {
    },
  ];

-  expect(exportedForTesting.extractedColorizedEvents(
-      events
-    )
-  ).toEqual([{ summary: "Operations Research", color: "var(--htwk-rot-200)" }]);
+  expect(exportedForTesting.extractedColorizedEvents(events)).toEqual([
+    { summary: "Operations Research", color: "var(--htwk-rot-200)" },
+  ]);
 });

 test("extractedColorizedEventsDifferentSummary", () => {
-  const events: CalendarComponent[] =
-    [
+  const events: CalendarComponent[] = [
    {
      type: "VEVENT",
      summary: "Algorithmische Mathematik",
@@ -134,8 +116,8 @@ test("extractedColorizedEventsDifferentSummary", () => {
    },
  ];

-  expect(exportedForTesting.extractedColorizedEvents(
-      events
-    )
-  ).toEqual([{ summary: "Algorithmische Mathematik", color: "var(--htwk-rot-200)" },{ summary: "Funktionale Programmierung", color: "var(--htwk-gruen-300)" }]);
+  expect(exportedForTesting.extractedColorizedEvents(events)).toEqual([
+    { summary: "Algorithmische Mathematik", color: "var(--htwk-rot-200)" },
+    { summary: "Funktionale Programmierung", color: "var(--htwk-gruen-300)" },
+  ]);
 });
--- a/frontend/src/helpers/ical.ts
+++ b/frontend/src/helpers/ical.ts
@@ -23,7 +23,7 @@ import { CalendarComponent } from "ical";
 * @param color Color code for the event
 */
 export interface ColorDistinctionEvent {
-  summary: string;
+  summary: string | undefined;
  color: string;
 }

@@ -32,13 +32,15 @@ export interface ColorDistinctionEvent {
 * @param icalData iCal data to parse
 * @returns Array of calendar components
 */
-export function parseICalData(icalData: string | undefined): CalendarComponent[] {
+export function parseICalData(
+  icalData: string | undefined,
+): CalendarComponent[] {
  if (icalData === undefined || !icalData) {
    return [];
  } else {
    const jCalData = ICAL.parse(icalData);
    const comp = new ICAL.Component(jCalData);
-    const vEvents = comp.getAllSubcomponents('vevent');
+    const vEvents = comp.getAllSubcomponents("vevent");
    const colorDistinctionEvents = extractedColorizedEvents(vEvents);

    return vEvents.map((vevent: CalendarComponent) => {
@@ -50,7 +52,9 @@ export function parseICalData(icalData: string | undefined): CalendarComponent[]
        end: event.endDate.toJSDate(),
        notes: event.description,
        allDay: event.startDate.isDate,
-        color: colorDistinctionEvents.find((e: ColorDistinctionEvent) => e.summary === event.summary)?.color,
+        color: colorDistinctionEvents.find(
+          (e: ColorDistinctionEvent) => e.summary === event.summary,
+        )?.color,
        id: event.uid,
        location: event.location,
      };
@@ -63,32 +67,37 @@ export function parseICalData(icalData: string | undefined): CalendarComponent[]
 * @param vEvents Array of calendar components
 * @returns Array of objects with event name and color
 */
-function extractedColorizedEvents(vEvents: CalendarComponent[]): ColorDistinctionEvent[] {
+function extractedColorizedEvents(
+  vEvents: CalendarComponent[],
+): ColorDistinctionEvent[] {
  return colorizeEvents(filterEventsDistinct(vEvents));
 }

-
 /**
 * Filters out duplicate events
 * @param vEvents Array of calendar components
 * @returns Array of calendar components without duplicates
 */
-function filterEventsDistinct(vEvents: CalendarComponent[]): CalendarComponent[] {
-  return vEvents.filter((vevent: CalendarComponent, index: number, self: CalendarComponent[]) => {
-    return self.findIndex((v) => {
+function filterEventsDistinct(
+  vEvents: CalendarComponent[],
+): CalendarComponent[] {
+  return vEvents.filter(
+    (vevent: CalendarComponent, index: number, self: CalendarComponent[]) => {
+      return (
+        self.findIndex((v) => {
          return v.summary === vevent.summary;
-    }) === index;
-  });
+        }) === index
+      );
+    },
+  );
 }

-
 /**
 * Assigns a color to each event
 * @param vEvents Array of calendar components
 * @returns Array of objects with event name and color
 */
 function colorizeEvents(vEvents: CalendarComponent[]): ColorDistinctionEvent[] {
-
  return vEvents.map((vevent: CalendarComponent) => {
    const colors: string[] = [
      "var(--htwk-rot-200)",
@@ -101,16 +110,19 @@ function colorizeEvents(vEvents: CalendarComponent[]): ColorDistinctionEvent[] {
      "var(--htwk-dunkelblau-200)",
      "var(--htwk-rot-400)",
      "var(--htwk-gruen-400)",
-      "var(--htwk-blau-200)"
+      "var(--htwk-blau-200)",
    ];

-    const randomColor = colors[vEvents.findIndex((e: CalendarComponent) => {
-      return e.summary === vevent.summary?? "";
-    }) % colors.length];
+    const randomColor =
+      colors[
+        vEvents.findIndex((e: CalendarComponent) => {
+          return e.summary === vevent.summary;
+        }) % colors.length
+      ];

    return {
-      summary: vevent.summary?? "",
-      color: randomColor
+      summary: vevent.summary,
+      color: randomColor,
    };
  });
 }
@@ -118,5 +130,5 @@ function colorizeEvents(vEvents: CalendarComponent[]): ColorDistinctionEvent[] {
 export const exportedForTesting = {
  extractedColorizedEvents,
  filterEventsDistinct,
-  colorizeEvents
+  colorizeEvents,
 };
--- a/frontend/src/i18n/translations/primevue/prime_vue_local_ja.json
+++ b/frontend/src/i18n/translations/primevue/prime_vue_local_ja.json
@@ -26,41 +26,15 @@
    "金曜日",
    "土曜日"
  ],
-  "dayNamesMin": [
-    "日",
-    "月",
-    "火",
-    "水",
-    "木",
-    "金",
-    "土"
-  ],
-  "dayNamesShort": [
-    "日",
-    "月",
-    "火",
-    "水",
-    "木",
-    "金",
-    "土"
-  ],
+  "dayNamesMin": ["日", "月", "火", "水", "木", "金", "土"],
+  "dayNamesShort": ["日", "月", "火", "水", "木", "金", "土"],
  "emptyFilterMessage": "オプションなし",
  "emptyMessage": "結果なし",
  "emptySearchMessage": "該当なし",
  "emptySelectionMessage": "選択なし",
  "endsWith": "終わる",
  "equals": "等しい",
-  "fileSizeTypes": [
-    "B",
-    "KB",
-    "MB",
-    "GB",
-    "TB",
-    "PB",
-    "EB",
-    "ZB",
-    "YB"
-  ],
+  "fileSizeTypes": ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
  "filter": "フィルター",
  "firstDayOfWeek": 0,
  "gt": "超える",
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -31,7 +31,7 @@ import Card from "primevue/card";
 import DataView from "primevue/dataview";
 import Dialog from "primevue/dialog";
 import Slider from "primevue/slider";
-import OverlayPanel from 'primevue/overlaypanel';
+import OverlayPanel from "primevue/overlaypanel";
 import ToggleButton from "primevue/togglebutton";
 import "primeicons/primeicons.css";
 import "primeflex/primeflex.css";
@@ -57,14 +57,14 @@ import Calendar from "primevue/calendar";
 import i18n from "./i18n";
 import { VueQueryPlugin } from "@tanstack/vue-query";
 import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

 polyfillCountryFlagEmojis();

 const app = createApp(App);
 const pinia = createPinia();

-pinia.use(piniaPluginPersistedstate)
+pinia.use(piniaPluginPersistedstate);

 app.use(VueQueryPlugin, {
  queryClientConfig: {
--- a/frontend/src/model/roomOccupancyList.test.ts
+++ b/frontend/src/model/roomOccupancyList.test.ts
@@ -22,8 +22,8 @@ import { toZonedTime } from "date-fns-tz";

 const testListStart = new Date("2022-01-01T00:00:00Z");
 var testList: RoomOccupancyList; //= RoomOccupancyList.fromJSON({});
-var alternating : Uint8Array = new Uint8Array(Array(4).fill(0xF0));
-var booked : Uint8Array = new Uint8Array(Array(4).fill(0xFF));
+var alternating: Uint8Array = new Uint8Array(Array(4).fill(0xf0));
+var booked: Uint8Array = new Uint8Array(Array(4).fill(0xff));
 var empty: Uint8Array = new Uint8Array(Array(4).fill(0x00));
 var counting: Uint8Array = new Uint8Array([0x00, 0x01, 0x02, 0x03]);

@@ -31,8 +31,8 @@ const localTimezone = "Europe/Berlin";

 describe("RoomOccupancyList", () => {
  beforeEach(() => {
-        alternating = new Uint8Array(Array(4).fill(0xF0));
-        booked = new Uint8Array(Array(4).fill(0xFF));
+    alternating = new Uint8Array(Array(4).fill(0xf0));
+    booked = new Uint8Array(Array(4).fill(0xff));
    empty = new Uint8Array(Array(4).fill(0x00));
    counting = new Uint8Array([0x00, 0x01, 0x02, 0x03]);
    testList = RoomOccupancyList.fromJSON({
@@ -55,8 +55,8 @@ describe("RoomOccupancyList", () => {
        {
          name: "COUNTING",
          occupancy: new Binary(counting, 0),
-            }
-            ]
+        },
+      ],
    });
  });

@@ -66,12 +66,7 @@ describe("RoomOccupancyList", () => {
      const rooms = testList["getRooms"]();

      // assert
-            expect(rooms).toEqual([
-                "BOOKED",
-                "EMPTY",
-                "ALTERNATING",
-                "COUNTING"
-            ]);
+      expect(rooms).toEqual(["BOOKED", "EMPTY", "ALTERNATING", "COUNTING"]);
    });

    test("get empty rooms", () => {
@@ -80,7 +75,7 @@ describe("RoomOccupancyList", () => {
        start: testListStart,
        granularity: 60,
        blocks: 32,
-                rooms: []
+        rooms: [],
      });

      // act
@@ -89,7 +84,7 @@ describe("RoomOccupancyList", () => {
      // assert
      expect(rooms).toEqual([]);
    });
-    })
+  });

  describe("decodeOccupancy", () => {
    test("generate stubs for missing room", () => {
@@ -109,8 +104,8 @@ describe("RoomOccupancyList", () => {
          end: "2022-01-01T08:00:00.000Z",
          rooms: "MISSING",
          free: true,
-                    stub: true
-                }
+          stub: true,
+        },
      ]);
    });

@@ -131,8 +126,8 @@ describe("RoomOccupancyList", () => {
          end: "2021-12-31T19:00:00.000Z",
          rooms: "BOOKED",
          free: true,
-                    stub: true
-                }
+          stub: true,
+        },
      ]);
    });

@@ -151,35 +146,31 @@ describe("RoomOccupancyList", () => {
          end: "2022-01-01T08:00:00.000Z",
          rooms: "BOOKED",
          free: false,
-                    stub: false
-                }
+          stub: false,
+        },
      ]);
    });
  });

  describe("sliceOccupancy", () => {
-        test.each([
-            booked,
-            empty,
-            alternating
-        ])("getCompleteOccupancy of %j", (occupancy) => {
+    test.each([booked, empty, alternating])(
+      "getCompleteOccupancy of %j",
+      (occupancy) => {
        // arrange
        const startTime = new Date(testList.start);
        const endTime = new Date(addHours(startTime, 32));
        const sliceInterval = interval(startTime, endTime);

        // act
-            const sliced = testList["sliceOccupancy"](
-                sliceInterval,
-                occupancy
-            )
+        const sliced = testList["sliceOccupancy"](sliceInterval, occupancy);

        // assert
        expect(sliced).toEqual({
          decodeSliceStart: startTime,
          decodeSlice: new Uint8Array(occupancy),
        });
-        });
+      },
+    );

    test("throws start out of bounds", () => {
      // arrange
@@ -189,10 +180,7 @@ describe("RoomOccupancyList", () => {

      // act and assert
      expect(() => {
-                testList["sliceOccupancy"](
-                    sliceInterval,
-                    alternating
-                )
+        testList["sliceOccupancy"](sliceInterval, alternating);
      }).toThrowError();
    });

@@ -204,10 +192,7 @@ describe("RoomOccupancyList", () => {

      // act and assert
      expect(() => {
-                testList["sliceOccupancy"](
-                    sliceInterval,
-                    alternating
-                )
+        testList["sliceOccupancy"](sliceInterval, alternating);
      }).toThrowError();
    });

@@ -218,10 +203,7 @@ describe("RoomOccupancyList", () => {
      const sliceInterval = interval(startTime, endTime);

      // act
-            const sliced = testList["sliceOccupancy"](
-                sliceInterval,
-                counting
-            )
+      const sliced = testList["sliceOccupancy"](sliceInterval, counting);

      // assert
      expect(sliced).toEqual({
@@ -237,10 +219,7 @@ describe("RoomOccupancyList", () => {
      const sliceInterval = interval(startTime, endTime);

      // act
-            const sliced = testList["sliceOccupancy"](
-                sliceInterval,
-                counting
-            )
+      const sliced = testList["sliceOccupancy"](sliceInterval, counting);

      // assert
      expect(sliced).toEqual({
@@ -257,7 +236,7 @@ describe("RoomOccupancyList", () => {
        start: testListStart,
        granularity: 60,
        blocks: 0,
-                rooms: []
+        rooms: [],
      });

      // act
@@ -272,7 +251,9 @@ describe("RoomOccupancyList", () => {
      const testInterval = testList["getOccupancyInterval"]();

      // assert
-            expect(testInterval).toEqual(interval(testListStart, addHours(testListStart, 32)));
+      expect(testInterval).toEqual(
+        interval(testListStart, addHours(testListStart, 32)),
+      );
    });
  });

@@ -284,7 +265,7 @@ describe("RoomOccupancyList", () => {
        new Uint8Array([]),
        testListStart,
        15,
-                "Raum"
+        "Raum",
      );

      // assert
@@ -298,7 +279,7 @@ describe("RoomOccupancyList", () => {
        booked,
        testListStart,
        15,
-                "BOOKED"
+        "BOOKED",
      );

      // assert
@@ -308,8 +289,8 @@ describe("RoomOccupancyList", () => {
          end: addHours(testListStart, 8).toISOString(),
          rooms: "BOOKED",
          free: false,
-                    stub: false
-                }
+          stub: false,
+        },
      ]);
    });

@@ -320,7 +301,7 @@ describe("RoomOccupancyList", () => {
        empty,
        testListStart,
        15,
-                "BOOKED"
+        "BOOKED",
      );

      // assert
@@ -334,7 +315,7 @@ describe("RoomOccupancyList", () => {
        alternating,
        new Date("2024-01-01T00:00:00Z"),
        15,
-                "ALTERNATING"
+        "ALTERNATING",
      );

      // assert
@@ -344,29 +325,29 @@ describe("RoomOccupancyList", () => {
          end: "2024-01-01T01:00:00.000Z",
          rooms: "ALTERNATING",
          free: false,
-                    stub: false
+          stub: false,
        },
        {
          start: "2024-01-01T02:00:00.000Z",
          end: "2024-01-01T03:00:00.000Z",
          rooms: "ALTERNATING",
          free: false,
-                    stub: false
+          stub: false,
        },
        {
          start: "2024-01-01T04:00:00.000Z",
          end: "2024-01-01T05:00:00.000Z",
          rooms: "ALTERNATING",
          free: false,
-                    stub: false
+          stub: false,
        },
        {
          start: "2024-01-01T06:00:00.000Z",
          end: "2024-01-01T07:00:00.000Z",
          rooms: "ALTERNATING",
          free: false,
-                    stub: false
-                }
+          stub: false,
+        },
      ]);
    });
  });
@@ -381,7 +362,7 @@ describe("RoomOccupancyList", () => {
      const stubEvents = RoomOccupancyList["generateStubEvents"](
        "ROOM",
        startTime,
-                endTime
+        endTime,
      );

      // assert
@@ -397,7 +378,7 @@ describe("RoomOccupancyList", () => {
      const stubEvents = RoomOccupancyList["generateStubEvents"](
        "ROOM",
        startTime,
-                endTime
+        endTime,
      );

      // assert
@@ -413,7 +394,7 @@ describe("RoomOccupancyList", () => {
      const stubEvents = RoomOccupancyList["generateStubEvents"](
        "ROOM",
        startTime,
-                endTime
+        endTime,
      );

      // assert
@@ -466,7 +447,7 @@ describe("RoomOccupancyList", () => {
          rooms: "ROOM",
          free: true,
          stub: true,
-                }
+        },
      ]);
    });

@@ -479,7 +460,7 @@ describe("RoomOccupancyList", () => {
      const stubEvents = RoomOccupancyList["generateStubEvents"](
        "ROOM",
        startTime,
-                endTime
+        endTime,
      );

      // assert
@@ -490,7 +471,7 @@ describe("RoomOccupancyList", () => {
          rooms: "ROOM",
          free: true,
          stub: true,
-                }
+        },
      ]);
    });
  });
@@ -501,10 +482,13 @@ describe("RoomOccupancyList", () => {
      const startTime = new Date("2022-01-01T20:00:00Z");

      // act
-            const shiftedTime = RoomOccupancyList["shiftTimeForwardInsideWorkday"](startTime);
+      const shiftedTime =
+        RoomOccupancyList["shiftTimeForwardInsideWorkday"](startTime);

      // assert
-            expect(toZonedTime(shiftedTime, localTimezone)).toEqual(new Date("2022-01-02T00:00:00Z"));
+      expect(toZonedTime(shiftedTime, localTimezone)).toEqual(
+        new Date("2022-01-02T00:00:00Z"),
+      );
    });

    test("don't shift time on the same day", () => {
@@ -512,10 +496,13 @@ describe("RoomOccupancyList", () => {
      const startTime = new Date("2022-01-02T01:00:00Z");

      // act
-            const shiftedTime = RoomOccupancyList["shiftTimeForwardInsideWorkday"](startTime);
+      const shiftedTime =
+        RoomOccupancyList["shiftTimeForwardInsideWorkday"](startTime);

      // assert
-            expect(toZonedTime(shiftedTime, localTimezone)).toEqual(new Date("2022-01-02T02:00:00Z"));
+      expect(toZonedTime(shiftedTime, localTimezone)).toEqual(
+        new Date("2022-01-02T02:00:00Z"),
+      );
    });

    test("don't shift if already inside workday", () => {
@@ -523,10 +510,13 @@ describe("RoomOccupancyList", () => {
      const startTime = new Date("2022-01-02T12:30:00Z");

      // act
-            const shiftedTime = RoomOccupancyList["shiftTimeForwardInsideWorkday"](startTime);
+      const shiftedTime =
+        RoomOccupancyList["shiftTimeForwardInsideWorkday"](startTime);

      // assert
-            expect(toZonedTime(shiftedTime, localTimezone)).toEqual(new Date("2022-01-02T13:30:00Z"));
+      expect(toZonedTime(shiftedTime, localTimezone)).toEqual(
+        new Date("2022-01-02T13:30:00Z"),
+      );
    });
  });

@@ -536,10 +526,13 @@ describe("RoomOccupancyList", () => {
      const startTime = new Date("2022-01-02T05:30:00Z");

      // act
-            const shiftedTime = RoomOccupancyList["shiftTimeBackwardInsideWorkday"](startTime);
+      const shiftedTime =
+        RoomOccupancyList["shiftTimeBackwardInsideWorkday"](startTime);

      // assert
-            expect(toZonedTime(shiftedTime, localTimezone)).toEqual(new Date("2022-01-01T23:59:59.999Z"));
+      expect(toZonedTime(shiftedTime, localTimezone)).toEqual(
+        new Date("2022-01-01T23:59:59.999Z"),
+      );
    });

    test("don't shift time on the same day", () => {
@@ -547,10 +540,13 @@ describe("RoomOccupancyList", () => {
      const startTime = new Date("2022-01-02T22:00:00Z");

      // act
-            const shiftedTime = RoomOccupancyList["shiftTimeBackwardInsideWorkday"](startTime);
+      const shiftedTime =
+        RoomOccupancyList["shiftTimeBackwardInsideWorkday"](startTime);

      // assert
-            expect(toZonedTime(shiftedTime, localTimezone)).toEqual(new Date("2022-01-02T23:00:00Z"));
+      expect(toZonedTime(shiftedTime, localTimezone)).toEqual(
+        new Date("2022-01-02T23:00:00Z"),
+      );
    });

    test("don't shift if already inside workday", () => {
@@ -558,10 +554,13 @@ describe("RoomOccupancyList", () => {
      const startTime = new Date("2022-01-02T12:30:00Z");

      // act
-            const shiftedTime = RoomOccupancyList["shiftTimeBackwardInsideWorkday"](startTime);
+      const shiftedTime =
+        RoomOccupancyList["shiftTimeBackwardInsideWorkday"](startTime);

      // assert
-            expect(toZonedTime(shiftedTime, localTimezone)).toEqual(new Date("2022-01-02T13:30:00Z"));
+      expect(toZonedTime(shiftedTime, localTimezone)).toEqual(
+        new Date("2022-01-02T13:30:00Z"),
+      );
    });
  });

@@ -582,7 +581,11 @@ describe("RoomOccupancyList", () => {
      const startTime = new Date("2022-06-02T12:30:00Z");

      // act
-            const shiftedTime = RoomOccupancyList["setTimeOfDay"](startTime, {hours: 23, minutes: 59, seconds: 59});
+      const shiftedTime = RoomOccupancyList["setTimeOfDay"](startTime, {
+        hours: 23,
+        minutes: 59,
+        seconds: 59,
+      });

      // assert
      expect(shiftedTime).toEqual(new Date("2022-06-02T21:59:59Z"));
@@ -593,7 +596,11 @@ describe("RoomOccupancyList", () => {
      const startTime = new Date("2022-01-02T12:30:00Z");

      // act
-            const shiftedTime = RoomOccupancyList["setTimeOfDay"](startTime, {hours: 13, minutes: 30, seconds: 0});
+      const shiftedTime = RoomOccupancyList["setTimeOfDay"](startTime, {
+        hours: 13,
+        minutes: 30,
+        seconds: 0,
+      });

      // assert
      expect(shiftedTime).toEqual(new Date("2022-01-02T12:30:00Z"));
@@ -647,5 +654,4 @@ describe("RoomOccupancyList", () => {
      expect(shiftedTime).toEqual(new Date("2022-06-01:22:00Z"));
    });
  });
-    
 });
--- a/frontend/src/model/roomOccupancyList.ts
+++ b/frontend/src/model/roomOccupancyList.ts
@@ -16,7 +16,25 @@

 import { Binary } from "bson";
 import { AnonymizedOccupancy } from "./event";
-import { Duration, NormalizedInterval, add, addDays, addMinutes, clamp, differenceInMinutes, eachDayOfInterval, endOfDay, interval, isAfter, isBefore, isEqual, max, min, startOfDay, subDays } from "date-fns";
+import {
+  Duration,
+  NormalizedInterval,
+  add,
+  addDays,
+  addMinutes,
+  clamp,
+  differenceInMinutes,
+  eachDayOfInterval,
+  endOfDay,
+  interval,
+  isAfter,
+  isBefore,
+  isEqual,
+  max,
+  min,
+  startOfDay,
+  subDays,
+} from "date-fns";
 import { fromZonedTime, toZonedTime } from "date-fns-tz";

 /// The start time of the day. 07:00
@@ -67,7 +85,11 @@ export class RoomOccupancyList {
   * @param to the end of the time range.
   * @returns a list of AnonymizedEventDTO objects representing the occupancy of the room.
   */
-  public decodeOccupancy(room : string, from : Date, to : Date) : AnonymizedOccupancy[] {
+  public decodeOccupancy(
+    room: string,
+    from: Date,
+    to: Date,
+  ): AnonymizedOccupancy[] {
    const roomOccupancy = this.rooms.find((r) => r.name === room);

    if (roomOccupancy === undefined) {
@@ -77,23 +99,41 @@ export class RoomOccupancyList {
    const occupancyList = [];

    // Get start and end of decoded time range (within encoded list and requested range)
-    let decodeInterval = interval(clamp(from, this.getOccupancyInterval()), clamp(to, this.getOccupancyInterval()));
+    let decodeInterval = interval(
+      clamp(from, this.getOccupancyInterval()),
+      clamp(to, this.getOccupancyInterval()),
+    );

    let { decodeSliceStart, decodeSlice } = this.sliceOccupancy(
      decodeInterval,
-      roomOccupancy.occupancy.buffer
+      roomOccupancy.occupancy.buffer,
    );

    // Decode the occupancy data
-    occupancyList.push(...RoomOccupancyList.decodeOccupancyData(new Uint8Array(decodeSlice), decodeSliceStart, this.granularity, room));
+    occupancyList.push(
+      ...RoomOccupancyList.decodeOccupancyData(
+        new Uint8Array(decodeSlice),
+        decodeSliceStart,
+        this.granularity,
+        room,
+      ),
+    );

    // add stub events for the time before and after the decoded time range
    if (!isEqual(from, decodeInterval.start)) {
-      occupancyList.push(...RoomOccupancyList.generateStubEvents(room, from, decodeInterval.start));
+      occupancyList.push(
+        ...RoomOccupancyList.generateStubEvents(
+          room,
+          from,
+          decodeInterval.start,
+        ),
+      );
    }

    if (!isEqual(to, decodeInterval.end)) {
-      occupancyList.push(...RoomOccupancyList.generateStubEvents(room, decodeInterval.end, to));
+      occupancyList.push(
+        ...RoomOccupancyList.generateStubEvents(room, decodeInterval.end, to),
+      );
    }

    return occupancyList;
@@ -106,10 +146,16 @@ export class RoomOccupancyList {
   * @returns a new occupancy byte array with the starting time of the first byte
   * @throws an error, if the selected time range is outside of the occupancy list.
   */
-  private sliceOccupancy(decodeInterval : NormalizedInterval, occupancy : Uint8Array) : {decodeSliceStart: Date, decodeSlice: Uint8Array} {
+  private sliceOccupancy(
+    decodeInterval: NormalizedInterval,
+    occupancy: Uint8Array,
+  ): { decodeSliceStart: Date; decodeSlice: Uint8Array } {
    // Calculate the slice of bytes, that are needed to decode the requested time range
    // Note: differenceInMinutes calculates (left - right)
-    let minutesFromStart = differenceInMinutes(decodeInterval.start, this.start);
+    let minutesFromStart = differenceInMinutes(
+      decodeInterval.start,
+      this.start,
+    );
    let minutesToEnd = differenceInMinutes(decodeInterval.end, this.start);

    let firstByte = Math.floor(minutesFromStart / this.granularity / 8);
@@ -117,13 +163,18 @@ export class RoomOccupancyList {

    // check if firstByte and lastByte are within the bounds of the occupancy array and throw an error if not
    if (
-      firstByte < 0 || firstByte >= occupancy.length ||
-      lastByte < 0 || lastByte > occupancy.length
+      firstByte < 0 ||
+      firstByte >= occupancy.length ||
+      lastByte < 0 ||
+      lastByte > occupancy.length
    ) {
      throw new Error("Requested time range is outside of the occupancy list.");
    }

-    let decodeSliceStart = addMinutes(this.start, firstByte * 8 * this.granularity);
+    let decodeSliceStart = addMinutes(
+      this.start,
+      firstByte * 8 * this.granularity,
+    );
    let decodeSlice = occupancy.buffer.slice(firstByte, lastByte);

    return { decodeSliceStart, decodeSlice: new Uint8Array(decodeSlice) };
@@ -134,7 +185,10 @@ export class RoomOccupancyList {
   * @returns the interval of the occupancy list.
   */
  private getOccupancyInterval(): NormalizedInterval<Date> {
-    return interval(this.start, addMinutes(this.start, this.granularity * this.blocks));
+    return interval(
+      this.start,
+      addMinutes(this.start, this.granularity * this.blocks),
+    );
  }

  /**
@@ -145,7 +199,12 @@ export class RoomOccupancyList {
   * @param room the room name.
   * @returns a list of AnonymizedOccupancy objects representing the occupancy of the room.
   */
-  public static decodeOccupancyData(occupancy : Uint8Array, start : Date, granularity : number, room : string) : AnonymizedOccupancy[] {
+  public static decodeOccupancyData(
+    occupancy: Uint8Array,
+    start: Date,
+    granularity: number,
+    room: string,
+  ): AnonymizedOccupancy[] {
    let occupancyList = [];
    let firstOccupancyBit: number | null = null;

@@ -164,13 +223,15 @@ export class RoomOccupancyList {
          let endTime = addMinutes(start, (byte_i * 8 + bit_i) * granularity);

          // add event between start and end of a block of boolean true values
-          occupancyList.push(new AnonymizedOccupancy(
+          occupancyList.push(
+            new AnonymizedOccupancy(
              startTime.toISOString(),
              endTime.toISOString(),
              room,
              false,
              false,
-          ));
+            ),
+          );

          firstOccupancyBit = null;
        }
@@ -182,13 +243,15 @@ export class RoomOccupancyList {
      let startTime = addMinutes(start, firstOccupancyBit * granularity);
      let endTime = addMinutes(start, occupancy.length * 8 * granularity);

-      occupancyList.push(new AnonymizedOccupancy(
+      occupancyList.push(
+        new AnonymizedOccupancy(
          startTime.toISOString(),
          endTime.toISOString(),
          room,
          false,
          false,
-      ));
+        ),
+      );
    }

    return occupancyList;
@@ -202,7 +265,11 @@ export class RoomOccupancyList {
   * @param to The end time within the specified end day.
   * @returns a list of AnonymizedEventDTO objects, from start to end.
   */
-  public static generateStubEvents(rooms : string, from : Date, to : Date) : AnonymizedOccupancy[] {
+  public static generateStubEvents(
+    rooms: string,
+    from: Date,
+    to: Date,
+  ): AnonymizedOccupancy[] {
    from = RoomOccupancyList.shiftTimeForwardInsideWorkday(from);
    to = RoomOccupancyList.shiftTimeBackwardInsideWorkday(to);

@@ -211,8 +278,14 @@ export class RoomOccupancyList {
    }

    return eachDayOfInterval({ start: from, end: to }).map((day) => {
-      let startTime = max([from, RoomOccupancyList.setTimeOfDay(day, START_OF_WORKDAY)]);
-      let endTime = min([to, RoomOccupancyList.setTimeOfDay(day, END_OF_WORKDAY)]);
+      let startTime = max([
+        from,
+        RoomOccupancyList.setTimeOfDay(day, START_OF_WORKDAY),
+      ]);
+      let endTime = min([
+        to,
+        RoomOccupancyList.setTimeOfDay(day, END_OF_WORKDAY),
+      ]);

      return new AnonymizedOccupancy(
        startTime.toISOString(),
@@ -235,8 +308,10 @@ export class RoomOccupancyList {
      json.start,
      json.granularity,
      json.blocks,
-      json.rooms.map((room : any) => new RoomOccupancy(room.name, room.occupancy)
-    ));
+      json.rooms.map(
+        (room: any) => new RoomOccupancy(room.name, room.occupancy),
+      ),
+    );
  }

  /**
@@ -263,7 +338,9 @@ export class RoomOccupancyList {
   */
  private static shiftTimeBackwardInsideWorkday(date: Date): Date {
    // if the time of date is before the start of the workday
-    if (isBefore(date, RoomOccupancyList.setTimeOfDay(date, START_OF_WORKDAY))) {
+    if (
+      isBefore(date, RoomOccupancyList.setTimeOfDay(date, START_OF_WORKDAY))
+    ) {
      // shift the time to the end of the previous day
      return RoomOccupancyList.endOfDay(subDays(date, 1));
    } else {
@@ -300,6 +377,4 @@ export class RoomOccupancyList {
    const dateInLocalTimezone = toZonedTime(date, TIMEZONE);
    return fromZonedTime(endOfDay(dateInLocalTimezone), TIMEZONE);
  }
-
 }
-
--- a/frontend/src/view/FreeRooms.vue
+++ b/frontend/src/view/FreeRooms.vue
@@ -129,8 +129,12 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
            />
          </template>
          <template #body="slotProps">
-            <div class="flex flex-column sm:flex-row justify-content-between flex-1 column-gap-4 mx-2 md:mx-4">
-              <p class="flex-1 align-self-stretch sm:align-self-center my-2">{{ slotProps.data.room }}</p>
+            <div
+              class="flex flex-column sm:flex-row justify-content-between flex-1 column-gap-4 mx-2 md:mx-4"
+            >
+              <p class="flex-1 align-self-stretch sm:align-self-center my-2">
+                {{ slotProps.data.room }}
+              </p>
              <Button
                :label="$t('freeRooms.viewOccupancy')"
                icon="pi pi-hourglass"
--- a/frontend/src/view/UserCalendar.vue
+++ b/frontend/src/view/UserCalendar.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import CalendarViewer from "@/components/CalendarViewer.vue";
 import DynamicPage from "@/view/DynamicPage.vue";
 import { useI18n } from "vue-i18n";
@@ -12,7 +11,7 @@ import tokenStore from "@/store/tokenStore.ts";
 const { t } = useI18n({ useScope: "global" });
 const toast = useToast();

-const token = ref(tokenStore().token || ""  as string );
+const token = ref(tokenStore().token || ("" as string));

 // parse token from query parameter
 const urlParams = new URLSearchParams(window.location.search);
@@ -46,7 +45,6 @@ onMounted(() => {
    loadCalendar();
  }
 });
-
 </script>

 <template>
@@ -69,13 +67,9 @@ onMounted(() => {
      />
    </template>
    <template #content>
-      <CalendarViewer
-        :token="tokenStore().token"
-      />
+      <CalendarViewer :token="tokenStore().token" />
    </template>
  </DynamicPage>
 </template>

-<style scoped>
-
-</style>
+<style scoped></style>
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -16,4 +16,4 @@

 /// <reference types="vite/client" />

-declare module 'ical.js';
+declare module "ical.js";
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -21,7 +21,7 @@
    "allowSyntheticDefaultImports": true,
    "paths": {
      "@/*": ["./src/*"]
-    },
+    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -17,63 +17,64 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import { fileURLToPath } from "node:url";
-import { VitePWA } from 'vite-plugin-pwa';
-import basicSsl from '@vitejs/plugin-basic-ssl'
+import { VitePWA } from "vite-plugin-pwa";
+import basicSsl from "@vitejs/plugin-basic-ssl";

 export default defineConfig({
  plugins: [
    vue(),
    basicSsl(),
    VitePWA({
-      mode: 'development',
-      base: '/',
-      injectRegister: 'auto',
-      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
+      mode: "development",
+      base: "/",
+      injectRegister: "auto",
+      includeAssets: ["favicon.ico", "apple-touch-icon.png", "mask-icon.svg"],
      manifest: {
-        name: 'HTWKalender',
-        short_name: 'HTWKalender',
-        description: 'Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.',
-        theme_color: '#FFFFFF',
-        background_color: '#FFFFFF',
-        display: 'standalone',
-        start_url: '/',
+        name: "HTWKalender",
+        short_name: "HTWKalender",
+        description:
+          "Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.",
+        theme_color: "#FFFFFF",
+        background_color: "#FFFFFF",
+        display: "standalone",
+        start_url: "/",
        icons: [
          {
            src: "/pwa-192x192.png",
            sizes: "192x192",
            type: "image/png",
-            purpose: "any"
+            purpose: "any",
          },
          {
            src: "/pwa-512x512.png",
            sizes: "512x512",
            type: "image/png",
-            purpose: "any"
+            purpose: "any",
          },
          {
            src: "/pwa-maskable-192x192.png",
            sizes: "192x192",
            type: "image/png",
-            purpose: "maskable"
+            purpose: "maskable",
          },
          {
            src: "/pwa-maskable-512x512.png",
            sizes: "512x512",
            type: "image/png",
-            purpose: "maskable"
-          }
+            purpose: "maskable",
+          },
        ],
      },
-      registerType: 'autoUpdate',
+      registerType: "autoUpdate",
      workbox: {
-        globPatterns: ['**/*.{js,css,html,ico,png,svg,json,vue,txt,woff2}'],
+        globPatterns: ["**/*.{js,css,html,ico,png,svg,json,vue,txt,woff2}"],
        cleanupOutdatedCaches: true,
        runtimeCaching: [
          {
            urlPattern: /^https?.*/,
-            handler: 'NetworkFirst',
+            handler: "NetworkFirst",
            options: {
-              cacheName: 'https-calls',
+              cacheName: "https-calls",
              expiration: {
                maxEntries: 150,
                maxAgeSeconds: 30 * 12 * 60 * 60, // 1 month
@@ -86,11 +87,12 @@ export default defineConfig({
      devOptions: {
        enabled: true,
        /* when using generateSW the PWA plugin will switch to classic */
-        type: 'module',
-        navigateFallback: 'index.html',
+        type: "module",
+        navigateFallback: "index.html",
        suppressWarnings: true,
-      }
-    })],
+      },
+    }),
+  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
@@ -112,14 +114,14 @@ export default defineConfig({
  },
  esbuild: {
    supported: {
-      'top-level-await': true
+      "top-level-await": true,
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      supported: {
-        'top-level-await': true
-      }
+        "top-level-await": true,
+      },
    },
  },
 });
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -1,11 +1,14 @@
 // vitest.config.ts
-import {mergeConfig} from 'vite'
-import {defineConfig} from 'vitest/config'
-import viteConfig from './vite.config'
+import { mergeConfig } from "vite";
+import { defineConfig } from "vitest/config";
+import viteConfig from "./vite.config";

-export default mergeConfig(viteConfig, defineConfig({
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
    test: {
      globals: true,
-    globalSetup: './vitest.global-setup.ts',
+      globalSetup: "./vitest.global-setup.ts",
    },
-}))
+  }),
+);
--- a/frontend/vitest.global-setup.ts
+++ b/frontend/vitest.global-setup.ts
@@ -1,3 +1,3 @@
 export const setup = () => {
-  process.env.TZ = 'UTC'
-}
+  process.env.TZ = "UTC";
+};