diff --git a/application/views/CisRouterView/CisRouterView.php b/application/views/CisRouterView/CisRouterView.php
index 2b2b44ee3..ab22fbb81 100644
--- a/application/views/CisRouterView/CisRouterView.php
+++ b/application/views/CisRouterView/CisRouterView.php
@@ -15,7 +15,7 @@ $includesArray = array(
 		'public/css/components/searchbar/searchbar.css',
 		'public/css/Fhc.css',
 		'public/css/components/dashboard.css',
-		'public/css/components/calendar.css',
+		//'public/css/components/calendar.css', <= imported in dashboard.css
 		'public/css/components/Sprachen.css',
 		'public/css/components/MyLv.css',
 		'public/css/components/FilterComponent.css',
@@ -40,7 +40,7 @@ $includesArray = array(
 
 $this->load->view('templates/CISVUE-Header', $includesArray);
 ?>
-<div id="fhccontent" route=<?php echo $route ?>>
+<div id="fhccontent" class="h-100" route=<?php echo $route ?>>
 	<router-view 
 			:view-data='<?php echo json_encode($viewData) ?>'
 	></router-view>
diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css
index 68181166b..8d349e8c2 100644
--- a/public/css/components/calendar.css
+++ b/public/css/components/calendar.css
@@ -1,136 +1,52 @@
+@import './calendar/frame.css';
+@import './calendar/events.css';
+@import './calendar/backgrounds.css';
+
 /* Themable Variables */
 :root {
-  --fhc-calendar-pane-height: calc(100vh - 220px);
-  
-  --fhc-calendar-primary: var(--fhc-primary, #006095);
-  --fhc-calendar-border: var(--fhc-border, #dee2e6);
-  --fhc-calendar-border-highlight: var(--fhc-border-highlight, #495057);
-  --fhc-calendar-text: var(--fhc-text, #212529);
-  --fhc-calendar-text-light: var(--fhc-text, #212529);
-  --fhc-calendar-background: var(--fhc-background, #fff);
-  --fhc-calendar-dark: var(--fhc-dark, #212529);
-  --fhc-calendar-hour-indicator-bg: var(--fhc-background, #fff);
-  --fhc-calendar-week-page-header-background: var(--fhc-background, #fff);
-  --fhc-calendar-week-page-header-color: var(--fhc-text, #212529);
-  --fhc-calendar-week-page-header-border: var(--fhc-border, #dee2e6);
-  --fhc-calendar-week-page-header-hover-background: var(--fhc-background-highlight, #d5dae0);
-  --fhc-calendar-all-day-event-background: var(--fhc-background, #fff);
-  --fhc-calendar-past: var(--fhc-beige-10, rgba(245, 233, 215, 0.5));
-  --fhc-calendar-box-shadow: var(--fhc-box-shadow, #dee2e6);
-}
+/*	--fhc-calendar-pane-height: calc(100vh - 220px);
+	
+	--fhc-calendar-primary: var(--fhc-primary, #006095);
+	--fhc-calendar-border-highlight: var(--fhc-border-highlight, #495057);
+	--fhc-calendar-text: var(--fhc-text, #212529);
+	--fhc-calendar-text-light: var(--fhc-text, #212529);
+	--fhc-calendar-background: var(--fhc-background, #fff);
+	--fhc-calendar-dark: var(--fhc-dark, #212529);
+	--fhc-calendar-hour-indicator-bg: var(--fhc-background, #fff);
+	--fhc-calendar-week-page-header-background: var(--fhc-background, #fff);
+	--fhc-calendar-week-page-header-color: var(--fhc-text, #212529);
+	--fhc-calendar-week-page-header-border: var(--fhc-border, #dee2e6);
+	--fhc-calendar-week-page-header-hover-background: var(--fhc-background-highlight, #d5dae0);
+	--fhc-calendar-all-day-event-background: var(--fhc-background, #fff);
+	--fhc-calendar-past: var(--fhc-beige-10, rgba(245, 233, 215, 0.5));
+	--fhc-calendar-box-shadow: var(--fhc-box-shadow, #dee2e6);*/
+	
+	--fhc-calendar-gap: var(--fhc-border, #dee2e6);
+	--fhc-calendar-bg: var(--fhc-background, #fff);
+	--fhc-calendar-border: var(--fhc-border, #dee2e6);
 
+	--fhc-calendar-bg-event: var(--fhc-white-80, #ccc);
+	--fhc-calendar-border-event: var(--bs-secondary, #6c757d);
+	--fhc-calendar-radius-event: var(--bs-border-radius, .375rem);
+	--fhc-calendar-fontsize-event: .875em;
 
-/* Labels */
-/* ====== */
-.fhc-calendar-base-label-dow .short,
-.fhc-calendar-base-label-dow .narrow,
-.fhc-calendar-base-label-day .full,
-.fhc-calendar-base-label-day .short,
-.fhc-calendar-base-label-day .narrow,
-.fhc-calendar-mode-month .fhc-calendar-base-label-day .long,
-.collapsed-header .fhc-calendar-base-label-day .long,
-.collapsed-header .fhc-calendar-base-label-dow .long {
-  display: none;
-}
-.fhc-calendar-mode-month .fhc-calendar-base-label-day .narrow,
-.collapsed-header .fhc-calendar-base-label-day .short,
-.collapsed-header .fhc-calendar-base-label-dow .short {
-  display: block;
-}
-.fhc-calendar-mode-day .fhc-calendar-base-label-day,
-.fhc-calendar-mode-week .fhc-calendar-base-label-day {
-  font-size: .875em;
-}
-.fhc-calendar-mode-month .fhc-calendar-base-label-week {
-  text-align: right;
-}
-.fhc-calendar-mode-month .fhc-calendar-base-label-week span {
-  color: var(--bs-secondary-color);
-  cursor: pointer;
-}
-.fhc-calendar-mode-month .fhc-calendar-base-label-week span + span:before {
-  content: "/";
-}
+	--fhc-calendar-bg-markings-past: var(--fhc-beige-10, rgba(245, 233, 215, 0.5));
+	--fhc-calendar-border-markings-past: var(--fhc-calendar-border);
+	--fhc-calendar-bg-markings-past-label: var(--fhc-calendar-bg);
+	--fhc-calendar-border-markings-past-label: var(--fhc-calendar-border);
 
+	--fhc-calendar-gap-header: transparent;
+	--fhc-calendar-gap-allday: transparent;
+	--fhc-calendar-gap-body: transparent;
+	--fhc-calendar-bg-header: var(--fhc-calendar-bg);
+	--fhc-calendar-bg-allday: var(--fhc-calendar-bg);
+	--fhc-calendar-bg-body: var(--fhc-calendar-bg);
 
-/* Base Grid */
-/* ========= */
-/* Grid */
-.fhc-calendar-base-grid {
-  --fhc-calendar-axis-collapsible: .2fr;
-  background-color: var(--bs-border-color);
-  grid-gap: 2px;
+	--fhc-calendar-bg-overlay1: var(--fhc-calendar-bg);
+	--fhc-calendar-bg-overlay2: var(--fhc-dark, #212529);
+	
+	--fhc-calendar-radius-day-event: var(--fhc-calendar-radius-event);
+	--fhc-calendar-radius-week-event: var(--fhc-calendar-radius-event);
+	--fhc-calendar-radius-month-event: 0;
+	--fhc-calendar-radius-list-event: 0;
 }
-.fhc-calendar-base-grid .grid-header {
-  background-color: var(--bs-gray-200);
-}
-.fhc-calendar-base-grid .grid-main {
-  grid-gap: 1px;
-}
-.fhc-calendar-base-grid-line {
-  grid-gap: 1px;
-}
-.fhc-calendar-mode-month .main-header,
-.fhc-calendar-base-grid .part-header,
-.fhc-calendar-base-grid .part-body {
-  background-color: rgba(255,255,255, 1);
-}
-.fhc-calendar-base-label-time {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: end;
-}
-/* Events */
-.fhc-calendar-base-grid-line-event.event-header {
-  font-weight: bold;
-}
-.fhc-calendar-base-grid-line-event.event-header .disabled {
-  opacity: .3;
-}
-.fhc-calendar-mode-month .fhc-calendar-base-grid-line {
-  overflow: hidden;
-  line-height: 1.5;
-  font-size: .8rem;
-  grid-auto-rows: 1.5em;
-}
-.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event {
-  text-indent: .5em;
-  height: 1.5em;
-  overflow: hidden;
-}
-
-
-/* Customize */
-/* ========= */
-/* Header */
-.fhc-calendar-base-header > .row {
-  align-items: center;
-}
-/* Events */
-.event-colored {
-  background: rgba(var(--event-color-rgb), .5);
-  min-height: 100%;
-}
-.event-colored:hover {
-  background: rgba(var(--event-color-rgb), .3);
-}
-/* Backgrounds */
-.background-past {
-  background: var(--fhc-calendar-past);
-  border-bottom: solid 1px var(--fhc-calendar-border);
-}
-.background-past > span {
-  display: none;
-}
-.background-past.bg-end > span {
-  display: block;
-  position: absolute;
-  top: 100%;
-  left: 1rem;
-  padding: 0 .5rem;
-  background-color: var(--fhc-background);
-  border: solid 1px var(--fhc-calendar-border);
-  font-size: .875em;
-}
-
diff --git a/public/css/components/calendar/backgrounds.css b/public/css/components/calendar/backgrounds.css
new file mode 100644
index 000000000..2524be91f
--- /dev/null
+++ b/public/css/components/calendar/backgrounds.css
@@ -0,0 +1,18 @@
+.background-past {
+	background-color: var(--fhc-calendar-bg-markings-past);
+	border-bottom: solid 1px var(--fhc-calendar-border-markings-past);
+}
+.background-past > span {
+	display: none;
+}
+.background-past.bg-end > span {
+	display: block;
+	position: absolute;
+	top: 100%;
+	left: 1rem;
+	padding: 0 .5rem;
+	background-color: var(--fhc-calendar-bg-markings-past-label);
+	border: solid 1px var(--fhc-calendar-border-markings-past-label);
+	font-size: .875em;
+}
+
diff --git a/public/css/components/calendar/events.css b/public/css/components/calendar/events.css
new file mode 100644
index 000000000..5feb7b707
--- /dev/null
+++ b/public/css/components/calendar/events.css
@@ -0,0 +1,67 @@
+.fhc-calendar-base-grid-line-event {
+	cursor: pointer;
+}
+.fhc-calendar-mode-week .all-day-events .fhc-calendar-base-grid-line-event .weekPageContainer {
+	padding: .25rem;
+}
+.fhc-calendar-mode-day .fhc-calendar-base-grid-line-event,
+.fhc-calendar-mode-week .fhc-calendar-base-grid-line-event {
+	margin: 0 .5rem;
+	font-size: var(--fhc-calendar-fontsize-event, .875rem);
+}
+.fhc-calendar-mode-day .all-day-events .fhc-calendar-base-grid-line-event,
+.fhc-calendar-mode-week .all-day-events .fhc-calendar-base-grid-line-event {
+	margin: .25rem;
+}
+/* Border */
+.fhc-calendar-mode-day .grid-main .fhc-calendar-base-grid-line-event > *,
+.fhc-calendar-mode-week .grid-main .fhc-calendar-base-grid-line-event > * {
+	border: solid 1px var(--fhc-calendar-border-event);
+}
+.fhc-calendar-mode-day .fhc-calendar-base-grid-line-event {
+	--event-radius: var(--fhc-calendar-radius-day-event, 0);
+}
+.fhc-calendar-mode-week .fhc-calendar-base-grid-line-event {
+	--event-radius: var(--fhc-calendar-radius-week-event, 0);
+}
+.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event {
+	--event-radius: var(--fhc-calendar-radius-month-event, 0);
+}
+.fhc-calendar-mode-list .fhc-calendar-base-grid-line-event {
+	--event-radius: var(--fhc-calendar-radius-list-event, 0);
+}
+.fhc-calendar-mode-day .all-day-events .fhc-calendar-base-grid-line-event > *,
+.fhc-calendar-mode-week .all-day-events .fhc-calendar-base-grid-line-event > *,
+.fhc-calendar-mode-day .fhc-calendar-base-grid-line-event.event-begin > *,
+.fhc-calendar-mode-week .fhc-calendar-base-grid-line-event.event-begin > * {
+	border-top-left-radius: var(--event-radius);
+	border-top-right-radius: var(--event-radius);
+}
+.fhc-calendar-mode-day .all-day-events .fhc-calendar-base-grid-line-event > *,
+.fhc-calendar-mode-week .all-day-events .fhc-calendar-base-grid-line-event > *,
+.fhc-calendar-mode-day .fhc-calendar-base-grid-line-event.event-end > *,
+.fhc-calendar-mode-week .fhc-calendar-base-grid-line-event.event-end > * {
+	border-bottom-left-radius: var(--event-radius);
+	border-bottom-right-radius: var(--event-radius);
+}
+.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event.event-begin > * {
+	border-top-left-radius: var(--event-radius);
+	border-bottom-left-radius: var(--event-radius);
+}
+.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event.event-end > * {
+	border-top-right-radius: var(--event-radius);
+	border-bottom-right-radius: var(--event-radius);
+}
+/* Colors */
+.fhc-calendar-base-grid-line-event {
+	--event-default-bg: var(--fhc-calendar-bg-event, #ccc);
+}
+.fhc-calendar-base-grid-line-event .event-type-reservierung {
+	--event-default-bg: var(--fhc-calendar-bg-reservierung, #fff);
+}
+.fhc-calendar-base-grid-line-event > * {
+	background-color: var(--event-bg, var(--event-default-bg));
+}
+.fhc-calendar-base-grid-line-event > *:hover {
+	filter: brightness(120%);
+}
diff --git a/public/css/components/calendar/frame.css b/public/css/components/calendar/frame.css
new file mode 100644
index 000000000..3185fbdd6
--- /dev/null
+++ b/public/css/components/calendar/frame.css
@@ -0,0 +1,149 @@
+/* Labels */
+/* ====== */
+.fhc-calendar-base-label-dow .short,
+.fhc-calendar-base-label-dow .narrow,
+.fhc-calendar-base-label-day .full,
+.fhc-calendar-base-label-day .short,
+.fhc-calendar-base-label-day .narrow,
+.fhc-calendar-mode-month .fhc-calendar-base-label-day .long,
+.collapsed-header .fhc-calendar-base-label-day .long,
+.collapsed-header .fhc-calendar-base-label-dow .long {
+	display: none;
+}
+.fhc-calendar-mode-month .fhc-calendar-base-label-day .narrow,
+.collapsed-header .fhc-calendar-base-label-day .short,
+.collapsed-header .fhc-calendar-base-label-dow .short {
+	display: block;
+}
+.fhc-calendar-mode-day .fhc-calendar-base-label-day,
+.fhc-calendar-mode-week .fhc-calendar-base-label-day {
+	font-size: .875em;
+}
+.fhc-calendar-mode-day .main-header,
+.fhc-calendar-mode-week .main-header {
+	text-align: center;
+}
+.fhc-calendar-mode-month .fhc-calendar-base-label-week {
+	text-align: right;
+}
+.fhc-calendar-base-label-week {
+	margin-left: .5rem;
+}
+.fhc-calendar-base-label-time,
+.fhc-calendar-base-label-day,
+.fhc-calendar-base-label-week {
+	color: var(--bs-secondary-color);
+}
+.fhc-calendar-mode-day .fhc-calendar-base-label-dow,
+.fhc-calendar-mode-week .fhc-calendar-base-label-dow,
+.fhc-calendar-base-label-day,
+.fhc-calendar-base-label-week {
+	cursor: pointer;
+}
+.fhc-calendar-base-label-week span + span:before {
+	content: "/";
+}
+.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event.event-header {
+	--event-bg: transparent;
+	font-weight: bold;
+	text-indent: 0;
+	font-size: var(--fhc-calendar-fontsize-month-day, 1rem);
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event.event-header .disabled {
+	opacity: .3;
+}
+
+
+/* Base Grid */
+/* ========= */
+/* Grid */
+.fhc-calendar-base-grid {
+	--fhc-calendar-axis-collapsible: .2fr;
+	background-color: var(--fhc-calendar-gap);
+	grid-gap: 2px;
+}
+.fhc-calendar-base-grid .grid-header {
+	background-color: var(--fhc-calendar-gap-header);
+}
+.fhc-calendar-base-grid .grid-header:before,
+.fhc-calendar-base-grid .grid-allday:before {
+	content: "";
+}
+.fhc-calendar-base-grid .grid-header:before,
+.fhc-calendar-base-grid .grid-header .main-header {
+	background-color: var(--fhc-calendar-bg-header);
+}
+.fhc-calendar-base-grid .grid-allday {
+	background-color: var(--fhc-calendar-gap-allday);
+}
+.fhc-calendar-base-grid .grid-allday:before,
+.fhc-calendar-base-grid .grid-allday .all-day-events {
+	background-color: var(--fhc-calendar-bg-allday);
+}
+.fhc-calendar-base-grid .grid-main {
+	grid-gap: 1px;
+	background-color: var(--fhc-calendar-gap-body);
+}
+.fhc-calendar-base-grid .grid-main .part-header,
+.fhc-calendar-base-grid .grid-main .part-body {
+	background-color: var(--fhc-calendar-bg-body);
+}
+.fhc-calendar-base-grid-line {
+	grid-gap: 1px;
+}
+.fhc-calendar-base-label-time {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: end;
+}
+/* Header */
+.fhc-calendar-base-header > .row {
+	align-items: center;
+}
+
+/* Modes */
+/* ===== */
+/* Day */
+.fhc-calendar-mode-day .event-details {
+	padding: 1.5rem;
+	width: 100%;
+	border-left: solid 1px var(--fhc-calendar-gap);
+}
+/* Month */
+.fhc-calendar-mode-month .fhc-calendar-base-grid-line {
+	overflow: hidden;
+	line-height: 1.5;
+	grid-template-rows: 2em;
+	grid-auto-rows: calc(var(--fhc-calendar-fontsize-event, .875rem) + 2 * var(--fhc-calendar-margin-event-icon, .5rem));
+	font-size: var(--fhc-calendar-fontsize-event, .875rem);
+}
+.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event {
+	text-indent: .5em;
+	height: calc(var(--fhc-calendar-fontsize-event, .875rem) + 2 * var(--fhc-calendar-margin-event-icon, .5rem));
+	overflow: hidden;
+}
+.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event * {
+	max-height: 100%;
+	max-width: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* Overlays */
+/* ======== */
+/* No Events */
+.fhc-calendar-no-events-overlay {
+	background: linear-gradient(120deg, var(--fhc-calendar-bg-overlay1), var(--fhc-calendar-bg-overlay2));
+	opacity: .7;
+	text-align: center;
+	padding-top: 100px;
+	font-size: 2.5rem;
+	font-weight: 500;
+	line-height: 1.2;
+}
diff --git a/public/js/components/Calendar/Mode/Month/View.js b/public/js/components/Calendar/Mode/Month/View.js
index a9f5a5008..b2268e43d 100644
--- a/public/js/components/Calendar/Mode/Month/View.js
+++ b/public/js/components/Calendar/Mode/Month/View.js
@@ -76,7 +76,6 @@ export default {
 				<label-day
 					v-if="slot.event.orig == 'header'"
 					:date="slot.event.start"
-					class="text-center"
 					:class="{ disabled: day.month != slot.event.start.month }"
 				/>
 				<slot v-else v-bind="slot" />
diff --git a/public/js/components/Calendar/Mode/Week/View.js b/public/js/components/Calendar/Mode/Week/View.js
index 4cc2a3ae3..d110c45bc 100644
--- a/public/js/components/Calendar/Mode/Week/View.js
+++ b/public/js/components/Calendar/Mode/Week/View.js
@@ -56,11 +56,9 @@ export default {
 				<label-dow
 					v-bind="{ date }"
 					@cal-click="evt => evt.detail.source = 'day'"
-					class="text-center"
 				/>
 				<label-day
 					v-bind="{ date }"
-					class="text-center"
 				/>
 			</template>
 			<template #part-header="{ part }">