diff --git a/application/controllers/api/frontend/v1/LvPlan.php b/application/controllers/api/frontend/v1/LvPlan.php
index 2e8ac52d4..69cbeca54 100644
--- a/application/controllers/api/frontend/v1/LvPlan.php
+++ b/application/controllers/api/frontend/v1/LvPlan.php
@@ -109,7 +109,7 @@ class LvPlan extends FHCAPI_Controller
 		$lvplanEvents = $this->getDataOrTerminateWithError($result);
 
 		// fetching moodle events
-		$moodleEvents = $uid ? [] : $this->fetchMoodleEvents($start_date, $end_date);
+		$moodleEvents = $this->fetchMoodleEvents($start_date, $end_date, $uid);
 
 		// fetching ferien events
 		$ferienEvents = $this->fetchFerienEvents($start_date, $end_date, $uid);
@@ -406,7 +406,7 @@ class LvPlan extends FHCAPI_Controller
 	 */
 	public function compactibleEventTypes()
 	{
-		$this->terminateWithSuccess(["lehreinheit", "reservierung"]);
+		$this->terminateWithSuccess(["lehreinheit", "reservierung", "ferien", "moodle"]);
 	}
 
 	/**
@@ -416,7 +416,7 @@ class LvPlan extends FHCAPI_Controller
 	 * @param string		$end_date
 	 * @return array
 	 */
-	private function fetchMoodleEvents($start_date, $end_date)
+	private function fetchMoodleEvents($start_date, $end_date, $uid = null)
 	{
 		$this->load->config('calendar');
 
@@ -439,7 +439,7 @@ class LvPlan extends FHCAPI_Controller
 			[
 				'start_date' => $start->format('c'),
 				'end_date' => $end->format('c'),
-				'username' => getAuthUID()
+				'username' => $uid ?? getAuthUID()
 			]
 		);
 
diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css
index bb9655cb9..fd417ed22 100644
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -388,12 +388,6 @@ html {
 #nav-search > .input-group > * {
   border-radius: 0 !important;
 }
-#nav-search .searchbar_results {
-  top: 100% !important;
-  left: 0;
-  right: 0 !important;
-  width: 100% !important;
-}
 
 /* frame */
 .in-frame {
@@ -467,7 +461,14 @@ html {
     /* overflow: visible !important; */
   }
   #cis-header {
-    z-index: 10;
+	z-index: 10;
+  }
+  #cis-header-bar {
+	position: fixed;
+	top: 0;
+	height: var(--fhc-cis-header-height);
+	width: 100%;
+    background-color: var(--fhc-primary);
   }
   #cis-header nav {
     position: initial;
@@ -483,12 +484,7 @@ html {
     display: none;
   }
   #nav-logo {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: var(--fhc-cis-header-height);
     width: var(--fhc-cis-menu-width);
-    background-color: var(--fhc-primary);
     padding: var(--fhc-cis-header-py) var(--fhc-cis-header-px);
     z-index: 2;
   }
@@ -503,37 +499,27 @@ html {
   	top: var(--fhc-cis-header-height);
 	display: flex;
 	flex-direction: column;
-  }
-  #nav-main-sticky > :not(#nav-main-toggle) {
-	overflow: auto;
+	height: 100%;
   }
   #nav-main-toggle {
-    width: 0;
     z-index: 1;
   }
-  #nav-main-toggle .btn,
-  #nav-main-toggle .fa-arrow-circle-left {
+  #nav-main-toggle:hover {
+	background-color: var(--fhc-secondary-highlight);
+  }
+  #nav-main-toggle .div,
+  #nav-main-toggle .fa-chevron-left {
     transition: all 0.5s ease-in-out;
   }
   #nav-main-toggle .collapsed.btn {
     background-color: transparent !important;
   }
-  #nav-main-toggle .collapsed .fa-arrow-circle-left {
+  #nav-main-toggle .collapsed .fa-chevron-left {
     transform: scaleX(-1);
     color: var(--fhc-black-40);
   }
   #nav-search {
-    position: fixed;
-    top: 0;
-    left: var(--fhc-cis-menu-width);
-    height: var(--fhc-cis-header-height);
-    right: calc(var(--fhc-cis-header-height) + 2 * var(--fhc-cis-header-px) - 2 * var(--fhc-cis-header-py));
-    width: auto !important;
-  }
-  #nav-user {
-	position: fixed;
-	top: 0;
-	right: 0;
+	position: relative;
   }
   #nav-user-btn {
     border-width: 0;
@@ -568,7 +554,7 @@ html {
 
   #nav-main-menu {
     height: 100%;
-    background-color: var(--fhc-cis-menu-bg);
+    background-color: var(--fhc-primary);
   }
   #nav-main-menu > div {
     width: var(--fhc-cis-menu-width);
@@ -610,9 +596,6 @@ html {
   }
   #nav-user{
 	position: relative;
-  }
-  #nav-user-btn {
-
   }
   #nav-user-btn img {
     object-fit: cover;
diff --git a/public/js/apps/Cis/Cis.js b/public/js/apps/Cis/Cis.js
index 8885eb945..16e1a307b 100644
--- a/public/js/apps/Cis/Cis.js
+++ b/public/js/apps/Cis/Cis.js
@@ -274,25 +274,12 @@ const app = Vue.createApp({
 	name: 'CisApp',
 	data: () => ({
 		appSideMenuEntries: {},
-		uid: '',
-		isStudent: null,
-		isMitarbeiter: null
+		windowWidth: 0,
 	}),
-	components: {},
-	computed: {
-		isMobile() {
-			const smallScreen = window.matchMedia("(max-width: 767px)").matches;
-			const touchCapable = ("ontouchstart" in window) || navigator.maxTouchPoints > 0;
-			return smallScreen;// && touchCapable;
-		},
-	},
 	provide() {
 		return { // provide injectable & watchable language property
 			language: Vue.computed(() => this.$p.user_language),
-			isMobile: this.isMobile,
-			uid: Vue.computed(() => this.uid),
-			isStudent: Vue.computed(() => this.isStudent),
-			isMitarbeiter: Vue.computed(() => this.isMitarbeiter)
+			isMobile: Vue.computed(() => this.windowWidth < 767),
 		}	
 	},
 	methods: {
@@ -328,23 +315,21 @@ const app = Vue.createApp({
 				this.$router.push(route);
 
 			}
-		}
+		},
+		handleWindowResize() {
+			this.windowWidth = window.innerWidth;
+		},
 	},
-	async created(){
-		await this.$api
-			.call(ApiAuthinfo.getAuthInfo())
-			.then(res => {
-				this.uid = res.data.uid;
-				this.isMitarbeiter = res.data.isMitarbeiter;
-				this.isStudent = res.data.isStudent;
-			});
+	created() {
+		this.windowWidth = window.innerWidth;
 	},
-	mounted() {
+	async mounted() {
 		document.addEventListener('click', this.handleClick);
-		
+		window.addEventListener("resize", this.handleWindowResize);
 	},
 	beforeUnmount() {
 		document.removeEventListener('click', this.handleClick);
+		window.removeEventListener("resize", this.handleWindowResize);
 	},
 });
 
diff --git a/public/js/apps/Cis/Menu.js b/public/js/apps/Cis/Menu.js
index 3193b1e3a..3463dda4a 100644
--- a/public/js/apps/Cis/Menu.js
+++ b/public/js/apps/Cis/Menu.js
@@ -134,26 +134,27 @@ const app = Vue.createApp({
 						childactions: []
 					}
                 }
-            }
+            },
+			windowWidth: 0,
         };
     },
-	computed: {
-		isMobile() {
-			const smallScreen = window.matchMedia("(max-width: 767px)").matches;
-			const touchCapable = ("ontouchstart" in window) || navigator.maxTouchPoints > 0;
-			return smallScreen;// && touchCapable;
-		},
-	},
 	provide() {
 		return {
-			isMobile: this.isMobile,
+			isNarrow: Vue.computed(() => this.windowWidth < 992),
+			isMobile: Vue.computed(() => this.windowWidth < 767),
 		}
 	},
     methods: {
         searchfunction: function(searchsettings) {
         	return this.$api.call(ApiSearchbar.searchCis(searchsettings));
-        }
+        },
+		handleWindowResize() {
+			this.windowWidth = window.innerWidth;
+		},
     },
+	created() {
+		this.windowWidth = window.innerWidth;
+	},
 	async mounted() {
 		const openOtherLvPlanAction = {
 			label: Vue.computed(() => this.$p.t("lehre/stundenplan")),
@@ -183,6 +184,10 @@ const app = Vue.createApp({
 				openOtherLvPlanAction,
 			);
 		}
+		window.addEventListener("resize", this.handleWindowResize);
+	},
+	beforeUnmount() {
+		window.removeEventListener("resize", this.handleWindowResize);
 	},
 });
 
diff --git a/public/js/components/Calendar/Base/Grid/Line.js b/public/js/components/Calendar/Base/Grid/Line.js
index 64a71c5f0..1f266d0a1 100644
--- a/public/js/components/Calendar/Base/Grid/Line.js
+++ b/public/js/components/Calendar/Base/Grid/Line.js
@@ -147,12 +147,13 @@ export default {
 				:style="'grid-' + axisRow + ': ' + event.rows.join('/')"
 				class="d-flex flex-row justify-content-center gap-1 align-items-center"
 			>
-				<i
+				<span
 					v-for="(subEvent, subEventIndex) in event.events"
 					:key="subEventIndex"
-					class="fa-solid fa-circle fa-2xs"
-					:style="subEvent.farbe ? {color: '#' + subEvent.farbe} : {}"
-				></i>
+					:style="subEvent.farbe ? {'background-color': '#' + subEvent.farbe} : {}"
+					style="height:10px; width:10px;"
+					class="border border-dark rounded-circle"
+				></span>
 			</div>
 			<div
 				v-else-if="event.display === 'compactedExtra'"
diff --git a/public/js/components/Cis/LvPlan/Lehrveranstaltung.js b/public/js/components/Cis/LvPlan/Lehrveranstaltung.js
index 87f82eb0e..3a215596c 100644
--- a/public/js/components/Cis/LvPlan/Lehrveranstaltung.js
+++ b/public/js/components/Cis/LvPlan/Lehrveranstaltung.js
@@ -54,6 +54,17 @@ export default {
 			return this.lv.bezeichnung;
 		}
 	},
+	watch: {
+		async isMobile() {
+			await this.$nextTick();
+			this.handleChangeMode(
+				this.currentMode,
+				luxon.DateTime.fromISO(this.currentDay, {
+					zone: this.timezone,
+				}),
+			);
+		},
+	},
 	methods: {
 		handleChangeDate(day, newMode) {
 			return this.handleChangeMode(newMode, day);
diff --git a/public/js/components/Cis/LvPlan/MyLvPlan.js b/public/js/components/Cis/LvPlan/MyLvPlan.js
index c59452d90..cb43a06d9 100644
--- a/public/js/components/Cis/LvPlan/MyLvPlan.js
+++ b/public/js/components/Cis/LvPlan/MyLvPlan.js
@@ -82,6 +82,17 @@ export default {
 			];
 		}
 	},
+	watch: {
+		async isMobile() {
+			await this.$nextTick();
+			this.handleChangeMode(
+				this.currentMode,
+				luxon.DateTime.fromISO(this.currentDay, {
+					zone: this.timezone,
+				}),
+			);
+		},
+	},
 	methods: {
 		handleChangeDate(day, newMode) {
 			return this.handleChangeMode(newMode, day);
diff --git a/public/js/components/Cis/LvPlan/OtherLvPlan.js b/public/js/components/Cis/LvPlan/OtherLvPlan.js
index e556e6e99..fb34bc574 100644
--- a/public/js/components/Cis/LvPlan/OtherLvPlan.js
+++ b/public/js/components/Cis/LvPlan/OtherLvPlan.js
@@ -137,6 +137,15 @@ export default {
 				this.$router.go();
 			},
 		},
+		async isMobile() {
+			await this.$nextTick();
+			this.handleChangeMode(
+				this.currentMode,
+				luxon.DateTime.fromISO(this.currentDay, {
+					zone: this.timezone,
+				}),
+			);
+		},
 	},
 	methods: {
 		handleChangeDate(day, newMode) {
diff --git a/public/js/components/Cis/LvPlan/StgOrg.js b/public/js/components/Cis/LvPlan/StgOrg.js
index 8a18e273c..3a42505e9 100644
--- a/public/js/components/Cis/LvPlan/StgOrg.js
+++ b/public/js/components/Cis/LvPlan/StgOrg.js
@@ -130,6 +130,17 @@ export default {
 			];
 		},
 	},
+	watch: {
+		async isMobile() {
+			await this.$nextTick();
+			this.handleChangeMode(
+				this.currentMode,
+				luxon.DateTime.fromISO(this.currentDay, {
+					zone: this.timezone,
+				}),
+			);
+		},
+	},
 	methods: {
 		loadLvPlan() {
 			if (!this.formData.stgkz) {
diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index 573e569ec..e3cd8625a 100644
--- a/public/js/components/Cis/Menu.js
+++ b/public/js/components/Cis/Menu.js
@@ -30,7 +30,7 @@ export default {
 			menuOpen:true,
         };
     },
-	inject: ["isMobile"],
+	inject: ["isNarrow", "isMobile"],
 	provide(){
 		return{
 			setActiveEntry: this.setActiveEntry,
@@ -113,71 +113,101 @@ export default {
 		});
 	},
     template: /*html*/`
-	<div
-		id="header-options-collapsible"
-		class="collapse multi-collapse collapse-horizontal show"
-	>
-		<div class="d-flex flex-row align-items-center gap-2 h-100" style="width: 79px">
-			<button id="nav-main-btn" class="navbar-toggler rounded-0 px-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
-				<span class="navbar-toggler-icon"></span>
-			</button>
-			<span v-if="isMobile" class="d-flex flex-row align-items-center">
-				<theme-switch></theme-switch>
-			</span>
+	<div id="cis-header-bar" class="d-flex flex-row flex-grow-1">
+		<div id="nav-logo" class="d-none d-lg-block">
+			<div class="d-flex h-100 justify-content-between">
+				<a :href="rootUrl">
+					<img :src="logoUrl" alt="Corporate Identity Logo">
+				</a>
+			</div>
 		</div>
-	</div>
-	<fhc-searchbar
-		:searchoptions="searchbaroptions"
-		:searchfunction="searchfunction"
-		ref="searchbar"
-		id="nav-search"
-		class="fhc-searchbar w-100 py-1 py-lg-2"
-	></fhc-searchbar>
-    <div id="nav-logo" class="d-none d-lg-block">
-		<div class="d-flex h-100 justify-content-between">
-			<a :href="rootUrl">
-				<img :src="logoUrl" alt="Corporate Identity Logo">
-			</a>
-			<theme-switch></theme-switch>
-		</div>
-    </div>
 
-	<div
-		id="header-usermenu-collapsible"
-		class="collapse multi-collapse collapse-horizontal show"
-	>
 		<div
-			:style="!isMobile ? '' : 'width: 51px'"
-			id="nav-user"
+			v-if="isNarrow"
+			:class="{'collapse multi-collapse collapse-horizontal show': isMobile}"
+			id="navbar-toggler-collapsible"
 		>
-			<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
-				<img :src="avatarUrl" :alt="$p.t('profilUpdate/profilBild')" class="bg-dark avatar rounded-circle border border-dark"/>
-			</button>
-			<ul ref="navUserDropdown"
-			@[\`shown.bs.collapse\`]="handleShowNavUser"
-			@[\`hide.bs.collapse\`]="handleHideNavUser"
-			id="nav-user-menu" class="top-100 end-0 collapse list-unstyled" aria-labelledby="nav-user-btn">
-				<li><a class="fhc-dark-bg btn rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
-				<li >
-					<cis-sprachen @languageChanged="fetchMenu"></cis-sprachen>
-				</li>
-				<li><hr class="dropdown-divider m-0 "></li>
-				<li ><a class="fhc-dark-bg btn rounded-0 d-block" :href="logoutUrl">Logout</a></li>
-			</ul>
+			<div class="d-flex flex-row align-items-center h-100" style="width: 35px">
+				<button id="nav-main-btn" class="navbar-toggler rounded-0 px-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+			</div>
+		</div>
+
+		<fhc-searchbar
+			:searchoptions="searchbaroptions"
+			:searchfunction="searchfunction"
+			ref="searchbar"
+			id="nav-search"
+			class="fhc-searchbar flex-grow-1 py-1 py-lg-2"
+		>
+			<template #collapseToggler="{ isSearchShownInMobileView }">
+				<span
+					v-if="isMobile"
+					type="button"
+					data-bs-toggle="collapse"
+					data-bs-target=".multi-collapse"
+					aria-controls="searchbar-collapsible navbar-toggler-collapsible options-collapsible"
+					aria-expanded="false"
+			 		class="d-flex flex-row align-items-center pe-1"
+					style="color: white"
+				>
+					<i v-if="isSearchShownInMobileView" class="fa-solid fa-chevron-left ps-3"></i>
+					<i v-else class="fa-solid fa-magnifying-glass ps-2"></i>
+				</span>
+			</template>
+		</fhc-searchbar>
+		
+		<div
+			id="options-collapsible"
+			:class="{'collapse multi-collapse collapse-horizontal show': isMobile}"
+		>
+			<div :style="!isMobile ? '' : 'width: 105px'" class="d-flex flex-row ps-3 justify-content-end">
+				<span class="d-flex flex-row align-items-center">
+					<theme-switch></theme-switch>
+				</span>
+				<div id="nav-user">
+					<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
+						<img :src="avatarUrl" :alt="$p.t('profilUpdate/profilBild')" class="bg-dark avatar rounded-circle border border-dark"/>
+					</button>
+					<ul ref="navUserDropdown"
+					@[\`shown.bs.collapse\`]="handleShowNavUser"
+					@[\`hide.bs.collapse\`]="handleHideNavUser"
+					id="nav-user-menu" class="top-100 end-0 collapse list-unstyled" aria-labelledby="nav-user-btn">
+						<li><a class="fhc-dark-bg btn rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
+						<li >
+							<cis-sprachen @languageChanged="fetchMenu"></cis-sprachen>
+						</li>
+						<li><hr class="dropdown-divider m-0 "></li>
+						<li ><a class="fhc-dark-bg btn rounded-0 d-block" :href="logoutUrl">Logout</a></li>
+					</ul>
+				</div>
+			</div>
 		</div>
 	</div>
 
     <nav id="nav-main" class="offcanvas offcanvas-start" tabindex="-1" aria-labelledby="nav-main-btn" data-bs-backdrop="false">
 		<div id="nav-main-sticky">
-			<div id="nav-main-toggle" class="position-static d-none d-lg-block ">
-				<button :aria-label="menuCollapseAriaLabel"  type="button" @click="menuOpen = !menuOpen"  class="btn text-light rounded-0 p-1 d-flex align-items-center" data-bs-toggle="collapse" data-bs-target=".nav-menu-collapse" aria-expanded="true" aria-controls="nav-sprachen nav-main-menu">
-					<i aria-hidden="true" class="fa fa-arrow-circle-left fhc-text"></i>
-				</button>
-			</div>
-			<div class="offcanvas-body p-0">
-				<div id="nav-main-menu" class="nav-menu-collapse collapse collapse-horizontal show">
-					<div>
-						<cis-menu-entry :highestMatchingUrlCount="highestMatchingUrlCount" :activeContent="activeEntry" v-for="entry in entries" :key="entry.content_id" :entry="entry" />
+			<div class="d-flex flex-row h-100">
+				<div class="offcanvas-body p-0">
+					<div id="nav-main-menu" class="nav-menu-collapse collapse collapse-horizontal show">
+						<div class="flex-grow-1">
+							<cis-menu-entry :highestMatchingUrlCount="highestMatchingUrlCount" :activeContent="activeEntry" v-for="entry in entries" :key="entry.content_id" :entry="entry" />
+						</div>
+					</div>
+				</div>
+				<div id="nav-main-toggle" class="d-none d-lg-block">
+					<div
+						@click="menuOpen = !menuOpen"
+						:aria-label="menuCollapseAriaLabel"
+						type="button"
+						class="h-100 d-flex align-items-center px-2"
+						data-bs-toggle="collapse"
+						data-bs-target=".nav-menu-collapse"
+						aria-expanded="true"
+						aria-controls="nav-sprachen nav-main-menu"
+					>
+						<i aria-hidden="true" class="fa-solid fa-chevron-left fhc-text"></i>
 					</div>
 				</div>
 			</div>
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index e865d525e..6d5c5dd60 100644
--- a/public/js/components/searchbar/searchbar.js
+++ b/public/js/components/searchbar/searchbar.js
@@ -94,22 +94,25 @@ export default {
 			@focusin="searchfocusin"
 			@focusout="searchfocusout"
 		>
-			<span
-				v-if="isMobile"
-				type="button"
-				data-bs-toggle="collapse"
-				data-bs-target=".multi-collapse"
-				aria-controls="header-searchbar-collapsible header-options-collapsible header-usermenu-collapsible"
-				aria-expanded="false"
-			 	class="d-flex flex-row align-items-center ps-3 pe-1"
-			>
-				<i v-if="isSearchShownInMobileView" class="fa-solid fa-chevron-left"></i>
-				<i v-else class="fa-solid fa-magnifying-glass"></i>
-			</span>
+			<slot name="collapseToggler" :isSearchShownInMobileView="isSearchShownInMobileView">
+				<span
+					v-if="isMobile"
+					type="button"
+					data-bs-toggle="collapse"
+					data-bs-target="#searchbar-collapsible"
+					aria-controls="searchbar-collapsible"
+					aria-expanded="false"
+				 	class="d-flex flex-row align-items-center pe-1"
+					style="color: white"
+				>
+					<i v-if="isSearchShownInMobileView" class="fa-solid fa-chevron-left ps-3"></i>
+					<i v-else class="fa-solid fa-magnifying-glass ps-2"></i>
+				</span>
+			</slot>
 
 			<div
 				:class="{'flex-grow-1': !isMobile, 'collapse multi-collapse collapse-horizontal': isMobile}"
-				id="header-searchbar-collapsible"
+				id="searchbar-collapsible"
 				@[\`show.bs.collapse\`]="isSearchShownInMobileView = true"
 				@[\`hidden.bs.collapse\`]="isSearchShownInMobileView = false"
 			>
@@ -117,7 +120,7 @@ export default {
 					:class="{open: showresult, closed: showresult, 'px-3': isMobile}"
 					ref="searchbox"
 					class="h-100 input-group me-2 searchbar_searchbox"
-					:style="isMobile ? 'width: ' + getMaxWidthOfSearchbarInMobileView() : ''"
+					:style="isMobile ? 'width: ' + getMaxWidthOfSearchbarInNarrowView() : ''"
 				>
 					<span class="input-group-text">
 						<i class="fa-solid fa-magnifying-glass color-white"></i>
@@ -242,6 +245,11 @@ export default {
 			}
 			this.search();
 		},
+		isMobile() {
+			if (!this.isMobile) {
+				this.isSearchShownInMobileView = false;
+			}
+		},
 	},
 	mounted() {
 		this.settingsDropdown = new bootstrap.Collapse(this.$refs.settings, {
@@ -503,7 +511,7 @@ export default {
 			}
 			return this.searchoptions.actions[res.type];
 		},
-		getMaxWidthOfSearchbarInMobileView() {
+		getMaxWidthOfSearchbarInNarrowView() {
 			// body width - hardcoded chevron width; necessary for accurate collapse transition transition
 			return (
 				document.querySelector("body").getBoundingClientRect().width -