From 6fd049860e2403bf193ea1c6bef3cdfea05b3614 Mon Sep 17 00:00:00 2001
From: pbruun <patrickbj95@hotmail.com>
Date: Mon, 13 Jul 2026 13:06:22 +0200
Subject: [PATCH 1/6] Program placement. Background color changes. placement
 for header and breadcrumb

---
 src/components/global/nav/Breadcrumb.vue      |  2 +-
 .../records/BroadcastVideoRecord.vue          |  1 -
 src/components/search/Header.vue              | 12 +-----
 .../viewers/AudioVideo/AudioPlayer.vue        |  3 --
 .../viewers/AudioVideo/VideoPlayer.vue        |  1 -
 src/views/ShowRecord.vue                      | 38 ++-----------------
 6 files changed, 5 insertions(+), 52 deletions(-)

diff --git a/src/components/global/nav/Breadcrumb.vue b/src/components/global/nav/Breadcrumb.vue
index a2619a18..c144d0a6 100644
--- a/src/components/global/nav/Breadcrumb.vue
+++ b/src/components/global/nav/Breadcrumb.vue
@@ -438,7 +438,7 @@ export default defineComponent({
 
 .bg-container {
 	position: relative;
-	top: 50px;
+	margin-top: 50px;
 }
 
 .breadcrumb-title {
diff --git a/src/components/records/BroadcastVideoRecord.vue b/src/components/records/BroadcastVideoRecord.vue
index 2ae6c07c..d4204aaf 100644
--- a/src/components/records/BroadcastVideoRecord.vue
+++ b/src/components/records/BroadcastVideoRecord.vue
@@ -258,7 +258,6 @@ temporary styling until patterns from design system are implemented
 -->
 <style scoped>
 .broadcast-record {
-	background-color: var(--bg-default);
 	color: var(--color-main);
 }
 h3 {
diff --git a/src/components/search/Header.vue b/src/components/search/Header.vue
index d74f594a..488377e4 100644
--- a/src/components/search/Header.vue
+++ b/src/components/search/Header.vue
@@ -66,17 +66,13 @@ export default defineComponent({
 	justify-content: flex-start;
 	transition-delay: 0.25s !important;
 	transition: height 0.25s cubic-bezier(0.85, 0.09, 0.15, 0.91);
-	height: 305px;
+	background-color: var(--bg-default);
 }
 
 .header-container.home {
 	background-color: var(--bg-default);
 }
 
-.headline-container {
-	height: 110px !important;
-}
-
 .header-container.search {
 	background-color: var(--color-default);
 	height: 322px;
@@ -142,10 +138,4 @@ h1 {
 	opacity: 0;
 	transition: opacity 0.25s ease 0s;
 }
-
-@media (min-width: 990px) {
-	.header-container {
-		height: 152px;
-	}
-}
 </style>
diff --git a/src/components/viewers/AudioVideo/AudioPlayer.vue b/src/components/viewers/AudioVideo/AudioPlayer.vue
index cdb1f501..9810d586 100644
--- a/src/components/viewers/AudioVideo/AudioPlayer.vue
+++ b/src/components/viewers/AudioVideo/AudioPlayer.vue
@@ -202,16 +202,13 @@ export default defineComponent({
 }
 
 .audio-player-box {
-	background-color: black;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	width: 100%;
 	margin-left: 0px;
 	overflow-y: hidden;
-	padding-top: 31px;
 	padding-bottom: 31px;
-	background-color: var(--bg-default);
 	position: relative;
 }
 
diff --git a/src/components/viewers/AudioVideo/VideoPlayer.vue b/src/components/viewers/AudioVideo/VideoPlayer.vue
index 158f20c3..6d808c8a 100644
--- a/src/components/viewers/AudioVideo/VideoPlayer.vue
+++ b/src/components/viewers/AudioVideo/VideoPlayer.vue
@@ -204,7 +204,6 @@ export default defineComponent({
 	width: 100%;
 	margin-left: 0px;
 	overflow-y: hidden;
-	padding-top: 31px;
 	padding-bottom: 31px;
 	background-color: white;
 	position: relative;
diff --git a/src/views/ShowRecord.vue b/src/views/ShowRecord.vue
index 5e05f83e..5d2e19c7 100644
--- a/src/views/ShowRecord.vue
+++ b/src/views/ShowRecord.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="record-container">
-		<div class="container top-offset">
+		<div class="container">
 			<div class="record-data">
 				<!-- TODO handle empty response scenario -->
 				<div v-if="!loading && recordData !== null">
@@ -312,11 +312,9 @@ export default defineComponent({
 	box-sizing: border-box;
 	min-height: 100vh;
 	width: 100%;
-	background-color: var(--bg-default);
 }
 
 .record-container {
-	background-color: var(--bg-default);
 	width: 100%;
 	display: flex;
 	flex-direction: column;
@@ -324,16 +322,9 @@ export default defineComponent({
 }
 
 .record-data {
-	padding-top: 25px 25px 25px 25px;
-	background-color: var(--bg-default);
+	padding-top: 0 25px 25px 25px;
 }
 
-.top-offset {
-	position: relative;
-	background-color: var(--bg-default);
-	top: -20px;
-	z-index: 3;
-}
 /* MEDIA QUERY 480 */
 @media (min-width: 480px) {
 	.container {
@@ -343,14 +334,11 @@ export default defineComponent({
 /* MEDIA QUERY 640 */
 @media (min-width: 640px) {
 	.record-data {
-		padding: 25px 25px 25px 25px;
+		padding: 0 25px 25px 25px;
 	}
 	.container {
 		max-width: 990px;
 	}
-	.top-offset {
-		top: -40px;
-	}
 }
 /* MEDIA QUERY 990 */
 @media (min-width: 990px) {
@@ -359,21 +347,12 @@ export default defineComponent({
 		flex-direction: column;
 		max-width: 1150px;
 	}
-	.top-offset {
-		top: -60px;
-		margin-left: 24px;
-		margin-right: 24px;
-		z-index: 4;
-	}
 }
 /* MEDIA QUERY 1150 */
 @media (min-width: 1150px) {
 	.container {
 		max-width: 1280px;
 	}
-	.top-offset {
-		top: calc(-6vw + 10px);
-	}
 	/* MEDIA QUERY 1280 */
 	@media (min-width: 1280px) {
 		.container {
@@ -382,16 +361,5 @@ export default defineComponent({
 			width: 100%;
 		}
 	}
-	@media (min-width: 2000px) {
-		.top-offset {
-			top: calc(-4vw + 10px);
-		}
-	}
-
-	@media (min-width: 4000px) {
-		.top-offset {
-			top: calc(-2vw + 10px);
-		}
-	}
 }
 </style>

From 7f185a45091dd76f74242514862898ad723e4ed1 Mon Sep 17 00:00:00 2001
From: pbruun <patrickbj95@hotmail.com>
Date: Tue, 14 Jul 2026 14:38:21 +0200
Subject: [PATCH 2/6] No hits adjustments. moved around with bars and the
 backdrops.

---
 .../global/content-elements/TextAndImage.vue  |  3 +-
 src/components/search/ContactUs.vue           |  4 +-
 src/components/search/NoHits.vue              | 72 +++++++++----------
 src/views/404.vue                             | 29 +++++++-
 4 files changed, 65 insertions(+), 43 deletions(-)

diff --git a/src/components/global/content-elements/TextAndImage.vue b/src/components/global/content-elements/TextAndImage.vue
index fd4448f3..9ce29ab7 100644
--- a/src/components/global/content-elements/TextAndImage.vue
+++ b/src/components/global/content-elements/TextAndImage.vue
@@ -35,8 +35,7 @@ temporary styling until patterns from design system are implemented
 	display: flex;
 	flex-direction: column;
 	justify-content: space-around;
-	margin-bottom: 30px;
-	color: var(--color-main);
+	color: var(--color-default);
 }
 .imageAndTextContainer .con {
 	width: 100%;
diff --git a/src/components/search/ContactUs.vue b/src/components/search/ContactUs.vue
index f9bac571..2626535e 100644
--- a/src/components/search/ContactUs.vue
+++ b/src/components/search/ContactUs.vue
@@ -13,17 +13,15 @@
 			:data-testid="addTestDataEnrichment('button', 'ContactUs', 'link-to-ask-about-library', 0)"
 		></KBButton>
 	</div>
-	<ContainerSplitBar :is-top="false"></ContainerSplitBar>
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { addTestDataEnrichment } from '@/utils/test-enrichments';
 import KBButton from '@/components/common/KBButton.vue';
-import ContainerSplitBar from '../global/content-elements/ContainerSplitBar.vue';
 export default defineComponent({
 	name: 'ContactUs',
-	components: { KBButton, ContainerSplitBar },
+	components: { KBButton },
 	props: {
 		relativePosition: {
 			type: Boolean as PropType<boolean>,
diff --git a/src/components/search/NoHits.vue b/src/components/search/NoHits.vue
index 964828dd..e2b57134 100644
--- a/src/components/search/NoHits.vue
+++ b/src/components/search/NoHits.vue
@@ -37,15 +37,10 @@
 				</a>
 				<p>{{ $t('search.nohitSubtitle.lastPart') }}</p>
 			</div>
-
-			<TiltedDivider
-				:title="$t('search.searchGuide.title')"
-				:right="true"
-			></TiltedDivider>
 			<TextAndImage :hide-image-on-mobile="true">
 				<template #text>
 					<div>
-						<h2>{{ $t('search.searchGuide.subtitle') }}</h2>
+						<h2>{{ $t('search.searchGuide.title') }}</h2>
 						<ul>
 							<li>
 								<p>{{ $t('search.searchGuide.first') }}</p>
@@ -86,27 +81,14 @@
 				</template>
 				<template #image><div class="material-icons search-icon">search</div></template>
 			</TextAndImage>
-			<EdgedContentArea
-				:lines="true"
-				:title="$t('search.mainCategories')"
-				class="main-categories-header"
-				background-color="var(--bg-default)"
-			>
-				<template #content>
-					<div class="showcase-container">
-						<MainCategories
-							:title="$t('timeSearch.searchCategories')"
-							text="var(--color-main)"
-							:subtitle="$t('timeSearch.searchCategoriesSubtitle')"
-							:show-header="true"
-						></MainCategories>
-					</div>
-				</template>
-			</EdgedContentArea>
-			<ContactUs
-				class="contact-us"
-				:relative-position="false"
-			></ContactUs>
+			<div class="container-backdrop"><ContainerSplitBar :is-top="false"></ContainerSplitBar></div>
+			<div class="end-container">
+				<SpotCategories></SpotCategories>
+				<ContactUs
+					class="contact-us"
+					:relative-position="false"
+				></ContactUs>
+			</div>
 		</div>
 	</Transition>
 </template>
@@ -115,23 +97,24 @@
 import { defineComponent } from 'vue';
 import { useSearchResultStore } from '@/store/searchResultStore';
 import SpellChecker from '@/components/search/SpellChecker.vue';
-import TiltedDivider from '@/components/global/content-elements/TiltedDivider.vue';
 import TextAndImage from '@/components/global/content-elements/TextAndImage.vue';
 import EdgedContentArea from '@/components/global/content-elements/EdgedContentArea.vue';
-import MainCategories from '@/components/common/MainCategories.vue';
+// import MainCategories from '@/components/common/MainCategories.vue';
 import { addTestDataEnrichment } from '@/utils/test-enrichments';
 import ContactUs from '@/components/search/ContactUs.vue';
 import { useI18n } from 'vue-i18n';
+import SpotCategories from '../common/SpotCategories.vue';
+import ContainerSplitBar from '@/components/global/content-elements/ContainerSplitBar.vue';
 
 export default defineComponent({
 	name: 'NoHits',
 	components: {
 		ContactUs,
-		MainCategories,
 		SpellChecker,
-		TiltedDivider,
 		TextAndImage,
 		EdgedContentArea,
+		SpotCategories,
+		ContainerSplitBar,
 	},
 	setup() {
 		const { t, locale } = useI18n();
@@ -153,6 +136,24 @@ export default defineComponent({
 });
 </script>
 <style scoped>
+.container-backdrop {
+	position: absolute;
+	left: 0;
+	height: stretch;
+	height: -webkit-fill-available;
+	width: 100vw;
+	background-color: var(--bg-default);
+	justify-content: space-between;
+	display: flex;
+	flex-direction: column;
+}
+.end-container {
+	display: flex;
+	margin-top: 40px;
+	position: relative;
+	flex-direction: column;
+}
+
 .no-hits * {
 	padding: 0;
 	box-sizing: border-box;
@@ -176,7 +177,7 @@ export default defineComponent({
 	align-items: center;
 	padding: 50px 0px;
 	flex-direction: row;
-	color: var(--color-main);
+	color: var(--color-default);
 	flex-wrap: wrap;
 	align-content: center;
 	box-sizing: border-box;
@@ -207,7 +208,7 @@ export default defineComponent({
 	word-wrap: break-word;
 	hyphens: auto;
 	max-width: 800px;
-	color: var(--color-main);
+	color: var(--color-default);
 }
 h2 {
 	margin: 0;
@@ -215,7 +216,7 @@ h2 {
 .no-hits-heading-subtitle {
 	margin-top: 10px;
 	max-width: 750px;
-	color: var(--color-main);
+	color: var(--color-default);
 }
 .no-hits-heading-subtitle a {
 	font-size: var(--fs-base);
@@ -225,7 +226,7 @@ h2 {
 .search-icon {
 	text-align: center;
 	font-size: 150px;
-	color: var(--color-main);
+	color: var(--color-default);
 }
 ul p {
 	margin: 0;
@@ -237,7 +238,6 @@ ul p {
 
 @media (min-width: 990px) {
 	.contact-us {
-		margin-top: -40px;
 		padding-bottom: 40px;
 	}
 	.search-icon {
diff --git a/src/views/404.vue b/src/views/404.vue
index daa854a4..248f465f 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -57,8 +57,13 @@
 					</div>
 				</div>
 			</div>
+			<ContainerSplitBar :is-top="false"></ContainerSplitBar>
+		</div>
+		<div class="container-backdrop"></div>
+
+		<div class="end-container">
+			<ContactUs></ContactUs>
 		</div>
-		<ContactUs></ContactUs>
 	</div>
 </template>
 
@@ -68,10 +73,11 @@ import { useI18n } from 'vue-i18n';
 import { addTestDataEnrichment } from '@/utils/test-enrichments';
 import ContactUs from '@/components/search/ContactUs.vue';
 import KBButton from '@/components/common/KBButton.vue';
+import ContainerSplitBar from '@/components/global/content-elements/ContainerSplitBar.vue';
 
 export default defineComponent({
 	name: '404',
-	components: { ContactUs, KBButton },
+	components: { ContactUs, KBButton, ContainerSplitBar },
 	setup() {
 		const { t } = useI18n();
 		const getImgServerSrcURL = () => {
@@ -84,6 +90,25 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.container-backdrop {
+	position: absolute;
+	left: 0;
+	height: stretch;
+	height: -webkit-fill-available;
+	width: 100vw;
+	background-color: var(--bg-default);
+	justify-content: space-between;
+	display: flex;
+	flex-direction: column;
+	align-items: end;
+}
+.end-container {
+	display: flex;
+	margin-top: 40px;
+	position: relative;
+	flex-direction: column;
+}
+
 .not-found {
 	display: flex;
 	flex-direction: column;

From e80bfb76b84734591516c852b9485d9335a6a8aa Mon Sep 17 00:00:00 2001
From: pbruun <patrickbj95@hotmail.com>
Date: Tue, 14 Jul 2026 14:53:02 +0200
Subject: [PATCH 3/6] added extra stretch compatability

---
 src/components/search/NoHits.vue | 1 +
 src/views/404.vue                | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/search/NoHits.vue b/src/components/search/NoHits.vue
index e2b57134..4024ea20 100644
--- a/src/components/search/NoHits.vue
+++ b/src/components/search/NoHits.vue
@@ -141,6 +141,7 @@ export default defineComponent({
 	left: 0;
 	height: stretch;
 	height: -webkit-fill-available;
+	height: -moz-available;
 	width: 100vw;
 	background-color: var(--bg-default);
 	justify-content: space-between;
diff --git a/src/views/404.vue b/src/views/404.vue
index 248f465f..ee43c52f 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -95,6 +95,7 @@ export default defineComponent({
 	left: 0;
 	height: stretch;
 	height: -webkit-fill-available;
+	height: -moz-available;
 	width: 100vw;
 	background-color: var(--bg-default);
 	justify-content: space-between;

From 8d02dc13f8fb5bf487dcf5528f7bf4c51efecfe3 Mon Sep 17 00:00:00 2001
From: pbruun <patrickbj95@hotmail.com>
Date: Tue, 14 Jul 2026 15:09:25 +0200
Subject: [PATCH 4/6] Adjustments for no filter. -moz-available made it so
 stretch height did not work.

---
 src/components/search/ContactUs.vue |   2 +-
 src/components/search/NoHits.vue    |   1 -
 src/views/404.vue                   |   1 -
 src/views/Search.vue                | 114 +++++++++++++++-------------
 4 files changed, 63 insertions(+), 55 deletions(-)

diff --git a/src/components/search/ContactUs.vue b/src/components/search/ContactUs.vue
index 2626535e..37d06b7c 100644
--- a/src/components/search/ContactUs.vue
+++ b/src/components/search/ContactUs.vue
@@ -46,7 +46,7 @@ export default defineComponent({
 	position: relative;
 	top: calc(-6vw);
 	left: 1%;
-	color: var(--color-default);
+	color: var(--color-main);
 }
 
 .material-icons {
diff --git a/src/components/search/NoHits.vue b/src/components/search/NoHits.vue
index 4024ea20..e2b57134 100644
--- a/src/components/search/NoHits.vue
+++ b/src/components/search/NoHits.vue
@@ -141,7 +141,6 @@ export default defineComponent({
 	left: 0;
 	height: stretch;
 	height: -webkit-fill-available;
-	height: -moz-available;
 	width: 100vw;
 	background-color: var(--bg-default);
 	justify-content: space-between;
diff --git a/src/views/404.vue b/src/views/404.vue
index ee43c52f..248f465f 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -95,7 +95,6 @@ export default defineComponent({
 	left: 0;
 	height: stretch;
 	height: -webkit-fill-available;
-	height: -moz-available;
 	width: 100vw;
 	background-color: var(--bg-default);
 	justify-content: space-between;
diff --git a/src/views/Search.vue b/src/views/Search.vue
index 29cdc602..747d5bca 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -54,53 +54,40 @@
 					v-if="route.query.q === undefined"
 					class="container find"
 				>
-					<h1>{{ t('find.headline') }}</h1>
-					<p>{{ t('find.subtitle') }}</p>
-					<h2>{{ t('find.maybeYouWantTo') }}</h2>
-					<div class="extra-options">
-						<KBButton
-							button-type="btn-main-medium"
-							button-color="main"
-							button-size="medium"
-							:button-text="t('find.restoreFilters')"
-							left-icon-name="tune"
-							class="btn-medium"
-							:is-router-link="true"
-							:to="searchResultStore.previousRoute"
-						></KBButton>
-						<KBButton
-							button-type="btn-main-medium"
-							button-color="main"
-							button-size="medium"
-							:button-text="t('find.GoToFrontpage')"
-							class="btn-medium"
-							:is-router-link="true"
-							:to="{ name: 'Home' }"
-						></KBButton>
+					<div class="no-filter-container">
+						<h1>{{ t('find.headline') }}</h1>
+						<p>{{ t('find.subtitle') }}</p>
+						<h2>{{ t('find.maybeYouWantTo') }}</h2>
+						<div class="extra-options">
+							<KBButton
+								button-type="btn-main-medium"
+								button-color="main"
+								button-size="medium"
+								:button-text="t('find.restoreFilters')"
+								left-icon-name="tune"
+								class="btn-medium"
+								:is-router-link="true"
+								:to="searchResultStore.previousRoute"
+							></KBButton>
+							<KBButton
+								button-type="btn-main-medium"
+								button-color="main"
+								button-size="medium"
+								:button-text="t('find.GoToFrontpage')"
+								class="btn-medium"
+								:is-router-link="true"
+								:to="{ name: 'Home' }"
+							></KBButton>
+						</div>
+						<div class="container-backdrop"><ContainerSplitBar :is-top="false"></ContainerSplitBar></div>
+						<div class="end-container">
+							<SpotCategories></SpotCategories>
+							<ContactUs
+								class="contact-us"
+								:relative-position="false"
+							></ContactUs>
+						</div>
 					</div>
-					<EdgedContentArea
-						:lines="true"
-						:title="$t('search.mainCategories')"
-						class="main-categories-header"
-						:reverse="true"
-						background-color="var(--bg-default)"
-					>
-						<template #content>
-							<div class="showcase-container">
-								<MainCategories
-									:title="$t('timeSearch.searchCategories')"
-									text="white"
-									:subtitle="$t('timeSearch.searchCategoriesSubtitle')"
-									:show-header="false"
-								></MainCategories>
-							</div>
-						</template>
-					</EdgedContentArea>
-					<ContactUs
-						class="contact-us"
-						:relative-position="false"
-					></ContactUs>
-					<div class="expanded-area"></div>
 				</div>
 				<div
 					v-if="route.fullPath === '/find' && route.query.q !== undefined"
@@ -132,8 +119,8 @@ import { ErrorManagerType } from '@/types/ErrorManagerType';
 import NoHits from '@/components/search/NoHits.vue';
 import { Priority, Severity } from '@/types/NotificationType';
 import { normalizeFq } from '@/utils/filter-utils';
-import EdgedContentArea from '@/components/global/content-elements/EdgedContentArea.vue';
-import MainCategories from '@/components/common/MainCategories.vue';
+import ContainerSplitBar from '@/components/global/content-elements/ContainerSplitBar.vue';
+import SpotCategories from '@/components/common/SpotCategories.vue';
 import ContactUs from '@/components/search/ContactUs.vue';
 import KBButton from '@/components/common/KBButton.vue';
 export default defineComponent({
@@ -143,10 +130,10 @@ export default defineComponent({
 		Pagination,
 		SearchOverhead,
 		NoHits,
-		EdgedContentArea,
-		MainCategories,
 		ContactUs,
 		KBButton,
+		ContainerSplitBar,
+		SpotCategories,
 	},
 
 	setup() {
@@ -394,6 +381,23 @@ export default defineComponent({
 temporary styling until patterns from design system are implemented 
 -->
 <style scoped>
+.container-backdrop {
+	position: absolute;
+	left: 0;
+	height: stretch;
+	height: -webkit-fill-available;
+	width: 100vw;
+	background-color: var(--bg-default);
+	justify-content: space-between;
+	display: flex;
+	flex-direction: column;
+}
+.end-container {
+	display: flex;
+	margin-top: 40px;
+	position: relative;
+	flex-direction: column;
+}
 .page-count {
 	color: var(--color-main);
 }
@@ -501,7 +505,7 @@ h3 {
 }
 
 .find h2 {
-	color: var(--color-main);
+	color: var(--color-default);
 }
 
 .container {
@@ -510,7 +514,13 @@ h3 {
 	margin-left: auto;
 	padding-right: 12px;
 	padding-left: 12px;
-	color: var(--color-main);
+	color: var(--color-default);
+	height: 100%;
+	justify-content: space-between;
+}
+.no-filter-container {
+	height: 100%;
+	width: 100%;
 }
 /* MEDIA QUERY 480 */
 @media (min-width: 480px) {

From 329be12e5f2211a17e4f3895369256acee6ba6f0 Mon Sep 17 00:00:00 2001
From: pbruun <patrickbj95@hotmail.com>
Date: Tue, 14 Jul 2026 15:16:33 +0200
Subject: [PATCH 5/6] Some placement adjustments

---
 src/views/Search.vue | 56 +++++++++++++++++++++++---------------------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/views/Search.vue b/src/views/Search.vue
index 747d5bca..efd40ec4 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -55,29 +55,31 @@
 					class="container find"
 				>
 					<div class="no-filter-container">
-						<h1>{{ t('find.headline') }}</h1>
-						<p>{{ t('find.subtitle') }}</p>
-						<h2>{{ t('find.maybeYouWantTo') }}</h2>
-						<div class="extra-options">
-							<KBButton
-								button-type="btn-main-medium"
-								button-color="main"
-								button-size="medium"
-								:button-text="t('find.restoreFilters')"
-								left-icon-name="tune"
-								class="btn-medium"
-								:is-router-link="true"
-								:to="searchResultStore.previousRoute"
-							></KBButton>
-							<KBButton
-								button-type="btn-main-medium"
-								button-color="main"
-								button-size="medium"
-								:button-text="t('find.GoToFrontpage')"
-								class="btn-medium"
-								:is-router-link="true"
-								:to="{ name: 'Home' }"
-							></KBButton>
+						<div class="content-container">
+							<h1>{{ t('find.headline') }}</h1>
+							<p>{{ t('find.subtitle') }}</p>
+							<h2>{{ t('find.maybeYouWantTo') }}</h2>
+							<div class="extra-options">
+								<KBButton
+									button-type="btn-main-medium"
+									button-color="main"
+									button-size="medium"
+									:button-text="t('find.restoreFilters')"
+									left-icon-name="tune"
+									class="btn-medium"
+									:is-router-link="true"
+									:to="searchResultStore.previousRoute"
+								></KBButton>
+								<KBButton
+									button-type="btn-main-medium"
+									button-color="main"
+									button-size="medium"
+									:button-text="t('find.GoToFrontpage')"
+									class="btn-medium"
+									:is-router-link="true"
+									:to="{ name: 'Home' }"
+								></KBButton>
+							</div>
 						</div>
 						<div class="container-backdrop"><ContainerSplitBar :is-top="false"></ContainerSplitBar></div>
 						<div class="end-container">
@@ -477,7 +479,6 @@ h3 {
 	display: flex;
 	gap: 25px;
 	flex-direction: column;
-	margin-bottom: 45px;
 }
 
 .extra-options a {
@@ -522,6 +523,9 @@ h3 {
 	height: 100%;
 	width: 100%;
 }
+.content-container {
+	padding-bottom: 40px;
+}
 /* MEDIA QUERY 480 */
 @media (min-width: 480px) {
 	.container {
@@ -550,9 +554,7 @@ h3 {
 	.mobile-edge {
 		display: none;
 	}
-	.extra-options {
-		margin-bottom: 0px;
-	}
+
 	.container {
 		display: flex;
 		flex-direction: column;

From 7f02e848646dc67596a9a816e152c2bf85d86b44 Mon Sep 17 00:00:00 2001
From: pbruun <patrickbj95@hotmail.com>
Date: Fri, 17 Jul 2026 10:27:58 +0200
Subject: [PATCH 6/6] Color changes and followed ContactUs design on other
 subsites

---
 .../records/BroadcastAudioRecord.vue          | 32 +++++++++++++++++--
 .../records/BroadcastVideoRecord.vue          | 31 ++++++++++++++++--
 2 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/src/components/records/BroadcastAudioRecord.vue b/src/components/records/BroadcastAudioRecord.vue
index 7136b54a..17b94e13 100644
--- a/src/components/records/BroadcastAudioRecord.vue
+++ b/src/components/records/BroadcastAudioRecord.vue
@@ -146,7 +146,13 @@
 				></GridResultItem>
 			</div>
 		</div>
-		<ContactUs :relative-position="false"></ContactUs>
+		<div class="container-backdrop"><ContainerSplitBar :is-top="false"></ContainerSplitBar></div>
+		<div class="end-container">
+			<ContactUs
+				class="contact-us"
+				:relative-position="false"
+			></ContactUs>
+		</div>
 	</div>
 </template>
 
@@ -166,6 +172,7 @@ import GridResultItem from '@/components/search/GridResultItem.vue';
 import ContactUs from '@/components/search/ContactUs.vue';
 import ProgramGuide from '@/components/common/ProgramGuide.vue';
 import KBButton from '@/components/common/KBButton.vue';
+import ContainerSplitBar from '@/components/global/content-elements/ContainerSplitBar.vue';
 
 export default defineComponent({
 	name: 'BroadcastAudioRecord',
@@ -177,6 +184,7 @@ export default defineComponent({
 		Duration,
 		ProgramGuide,
 		KBButton,
+		ContainerSplitBar,
 	},
 
 	props: {
@@ -263,6 +271,24 @@ export default defineComponent({
 temporary styling until patterns from design system are implemented 
 -->
 <style scoped>
+.container-backdrop {
+	position: absolute;
+	left: 0;
+	height: stretch;
+	height: -webkit-fill-available;
+	width: 100vw;
+	background-color: var(--bg-default);
+	justify-content: space-between;
+	display: flex;
+	flex-direction: column;
+}
+.end-container {
+	display: flex;
+	margin-top: 65px;
+	position: relative;
+	flex-direction: column;
+}
+
 h3 {
 	margin-top: 0;
 }
@@ -337,7 +363,7 @@ h4 {
 }
 
 .boardcast-record-data {
-	color: var(--color-main);
+	color: var(--color-default);
 	display: flex;
 	flex-direction: column;
 	margin: 0px 20px;
@@ -420,7 +446,7 @@ h4 {
 }
 .related-content-title {
 	padding: 0px 20px;
-	color: var(--color-main);
+	color: var(--color-default);
 }
 .related-record {
 	flex: 0 0 90%;
diff --git a/src/components/records/BroadcastVideoRecord.vue b/src/components/records/BroadcastVideoRecord.vue
index d4204aaf..b79ade63 100644
--- a/src/components/records/BroadcastVideoRecord.vue
+++ b/src/components/records/BroadcastVideoRecord.vue
@@ -146,7 +146,13 @@
 				></GridResultItem>
 			</div>
 		</div>
-		<ContactUs :relative-position="false"></ContactUs>
+		<div class="container-backdrop"><ContainerSplitBar :is-top="false"></ContainerSplitBar></div>
+		<div class="end-container">
+			<ContactUs
+				class="contact-us"
+				:relative-position="false"
+			></ContactUs>
+		</div>
 	</div>
 </template>
 
@@ -166,6 +172,7 @@ import { useSearchResultStore } from '@/store/searchResultStore';
 import ContactUs from '@/components/search/ContactUs.vue';
 import ProgramGuide from '@/components/common/ProgramGuide.vue';
 import KBButton from '@/components/common/KBButton.vue';
+import ContainerSplitBar from '@/components/global/content-elements/ContainerSplitBar.vue';
 
 export default defineComponent({
 	name: 'BroadcastRecord',
@@ -177,6 +184,7 @@ export default defineComponent({
 		GridResultItem,
 		ProgramGuide,
 		KBButton,
+		ContainerSplitBar,
 	},
 
 	props: {
@@ -257,8 +265,25 @@ export default defineComponent({
 temporary styling until patterns from design system are implemented 
 -->
 <style scoped>
+.container-backdrop {
+	position: absolute;
+	left: 0;
+	height: stretch;
+	height: -webkit-fill-available;
+	width: 100vw;
+	background-color: var(--bg-default);
+	justify-content: space-between;
+	display: flex;
+	flex-direction: column;
+}
+.end-container {
+	display: flex;
+	margin-top: 65px;
+	position: relative;
+	flex-direction: column;
+}
 .broadcast-record {
-	color: var(--color-main);
+	color: var(--color-default);
 }
 h3 {
 	margin-top: 0;
@@ -418,7 +443,7 @@ h4 {
 	max-width: 100%;
 }
 .related-content-title {
-	color: var(--color-main);
+	color: var(--color-default);
 	padding: 0px 20px;
 }
 .related-record {