kb-dk · Pbruun · Jul 13, 2026 · Jul 14, 2026 · Jul 14, 2026 · Jul 14, 2026
diff --git 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/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/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
@@ -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,9 +265,25 @@ export default defineComponent({
 temporary styling until patterns from design system are implemented 
 -->
 <style scoped>
-.broadcast-record {
+.container-backdrop {
+	position: absolute;
+	left: 0;
+	height: stretch;
+	height: -webkit-fill-available;
+	width: 100vw;
 	background-color: var(--bg-default);
-	color: var(--color-main);
+	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-default);
 }
 h3 {
 	margin-top: 0;
@@ -419,7 +443,7 @@ h4 {
 	max-width: 100%;
 }
 .related-content-title {
-	color: var(--color-main);
+	color: var(--color-default);
 	padding: 0px 20px;
 }
 .related-record {

diff --git 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>,
@@ -48,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/Header.vue b/src/components/search/Header.vue
@@ -66,19 +66,14 @@ 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,
-.header-container.notfound {
+.header-container.search {
 	background-color: var(--color-default);
 	height: 322px;
 	transition-delay: 0.25s !important;
@@ -143,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/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,15 +208,15 @@ export default defineComponent({
 	word-wrap: break-word;
 	hyphens: auto;
 	max-width: 800px;
-	color: var(--color-main);
+	color: var(--color-default);
 }
 h2 {
 	margin: 0;
 }
 .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/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
@@ -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;