From b5d05ef4101e42dc7ec869dfac19efff268b7155 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Thu, 19 Feb 2026 19:16:41 +0100
Subject: [PATCH 1/4] Extract into separate component, mock website container
 during development

---
 .../src/routes/highlight-cards/+page.svelte   | 94 ++++---------------
 .../highlight-cards/HighlightCards.svelte     | 66 +++++++++++++
 2 files changed, 82 insertions(+), 78 deletions(-)
 create mode 100644 sophora-components/src/routes/highlight-cards/HighlightCards.svelte

diff --git a/sophora-components/src/routes/highlight-cards/+page.svelte b/sophora-components/src/routes/highlight-cards/+page.svelte
index 33344d6b..bb81f610 100644
--- a/sophora-components/src/routes/highlight-cards/+page.svelte
+++ b/sophora-components/src/routes/highlight-cards/+page.svelte
@@ -1,81 +1,19 @@
 <script>
-    import { DesignTokens, HighlightCard } from '@swr-data-lab/components';
-    import { onMount } from 'svelte';
-
-	let root;
-	let entries = [];
-
-	const getData = (target) => {
-		let url;
-		if (
-			import.meta.env.DEV ||
-			window.location.origin === 'https://static.datenhub.net' ||
-			window.location.href.includes('apidata.googleusercontent.com') ||
-			window.location.href.includes('storage.googleapis.com')
-		) {
-			// Preview mode – use URL of current page
-			url = new URL(window.location.href);
-		} else {
-			// Embedded mode – use URL used to embed the component
-			const parent = target.parentNode.parentNode;
-			url = new URL(parent?.dataset.url);
-		}
-		const params = Object.fromEntries(url.searchParams);
-		return params.data ? JSON.parse(params.data) : [];
-	};
-
-	onMount(() => {
-		entries = getData(root);
-	});
+	import HighlightCards from './HighlightCards.svelte';
+	import { dev } from '$app/environment';
+	import { DevContainer } from '@swr-data-lab/components';
 </script>
 
-<div class="highlight-cards" bind:this={root}>
-	<DesignTokens>
-		{#each entries as entry}
-			<HighlightCard
-				topline={entry.topline}
-				value={entry.value}
-				unit={entry.unit}
-				subline={entry.subline}
-			/>
-		{/each}
-	</DesignTokens>
-</div>
-
-<style>
-	/* 
-     * Fonts need to be loaded in the component to work in the SWR Aktuell app, as no web fonts are present in the context. 
-     * TODO: Move font loading elsewhere?
-     */
-	@font-face {
-		font-family: 'SWR-VAR-Text';
-		src: url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Text.woff2')
-			format('woff2');
-	}
-	@font-face {
-		font-family: 'SWR-VAR-Sans';
-		src: url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Sans.woff2')
-			format('woff2');
-	}
-
-	.highlight-cards {
-		/* Apply SWR.de default spacing */
-		padding-left: var(--cnt-wdth);
-		padding-right: var(--cnt-wdth);
-		padding-bottom: 1rem;
-
-		@media (min-width: 1200px) {
-			margin: 0 -1rem;
-			display: flex;
-		}
-	}
-
-	:global(.highlight-cards > *) {
-		margin-bottom: 1rem;
-
-		@media (min-width: 1200px) {
-			margin: 0 1rem;
-			flex: 1;
-		}
-	}
-</style>
+{#if dev}
+	<DevContainer
+		theme="auto"
+		showGrid
+		paragraphsAbove={1}
+		paragraphsBelow={1}
+		showArticleHeader={false}
+	>
+		<HighlightCards />
+	</DevContainer>
+{:else}
+	<HighlightCards />
+{/if}
diff --git a/sophora-components/src/routes/highlight-cards/HighlightCards.svelte b/sophora-components/src/routes/highlight-cards/HighlightCards.svelte
new file mode 100644
index 00000000..e3a440ea
--- /dev/null
+++ b/sophora-components/src/routes/highlight-cards/HighlightCards.svelte
@@ -0,0 +1,66 @@
+<script>
+	import { DesignTokens, HighlightCard } from '@swr-data-lab/components';
+	import { onMount } from 'svelte';
+
+	let root;
+	let entries = [];
+
+	const getData = (target) => {
+		let url;
+		if (
+			import.meta.env.DEV ||
+			window.location.origin === 'https://static.datenhub.net' ||
+			window.location.href.includes('apidata.googleusercontent.com') ||
+			window.location.href.includes('storage.googleapis.com')
+		) {
+			// Preview mode – use URL of current page
+			url = new URL(window.location.href);
+		} else {
+			// Embedded mode – use URL used to embed the component
+			const parent = target.parentNode.parentNode;
+			url = new URL(parent?.dataset.url);
+		}
+		const params = Object.fromEntries(url.searchParams);
+		return params.data ? JSON.parse(params.data) : [];
+	};
+
+	onMount(() => {
+		entries = getData(root);
+	});
+</script>
+
+<div class="highlight-cards" bind:this={root}>
+	<DesignTokens>
+		{#each entries as entry}
+			<HighlightCard
+				topline={entry.topline}
+				value={entry.value}
+				unit={entry.unit}
+				subline={entry.subline}
+			/>
+		{/each}
+	</DesignTokens>
+</div>
+
+<style>
+	.highlight-cards {
+		/* Apply SWR.de default spacing */
+		padding-left: var(--cnt-wdth);
+		padding-right: var(--cnt-wdth);
+		padding-bottom: 1rem;
+
+		@media (min-width: 1200px) {
+			margin: 0 -1rem;
+			display: flex;
+		}
+	}
+
+	:global(.highlight-cards > *) {
+		margin-bottom: 1rem;
+
+		@media (min-width: 1200px) {
+			margin: 0 1rem;
+			flex: 1;
+		}
+	}
+</style>

From 71ea8ed1c781005eea9f02ea7ec31c1c85b2a7d6 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Thu, 19 Feb 2026 19:29:55 +0100
Subject: [PATCH 2/4] Simplify layout, fix sizing issues

---
 .../highlight-cards/HighlightCards.svelte     | 28 ++++++-------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/sophora-components/src/routes/highlight-cards/HighlightCards.svelte b/sophora-components/src/routes/highlight-cards/HighlightCards.svelte
index e3a440ea..6274b3fa 100644
--- a/sophora-components/src/routes/highlight-cards/HighlightCards.svelte
+++ b/sophora-components/src/routes/highlight-cards/HighlightCards.svelte
@@ -29,8 +29,8 @@
 	});
 </script>
 
-<div class="highlight-cards" bind:this={root}>
-	<DesignTokens>
+<DesignTokens>
+	<div class="highlight-cards" bind:this={root}>
 		{#each entries as entry}
 			<HighlightCard
 				topline={entry.topline}
@@ -39,28 +39,18 @@
 				subline={entry.subline}
 			/>
 		{/each}
-	</DesignTokens>
-</div>
+	</div>
+</DesignTokens>
 
 <style>
 	.highlight-cards {
-		/* Apply SWR.de default spacing */
-		padding-left: var(--cnt-wdth);
-		padding-right: var(--cnt-wdth);
-		padding-bottom: 1rem;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		gap: 2rem;
+		margin: 0.5rem 0;
 
 		@media (min-width: 1200px) {
-			margin: 0 -1rem;
-			display: flex;
-		}
-	}
-
-	:global(.highlight-cards > *) {
-		margin-bottom: 1rem;
-
-		@media (min-width: 1200px) {
-			margin: 0 1rem;
-			flex: 1;
+			grid-template-columns: repeat(2, minmax(0, 1fr));
 		}
 	}
 </style>

From 5044b7f8985c33ab338d0e4239ee77774025b073 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Thu, 19 Feb 2026 20:13:01 +0100
Subject: [PATCH 3/4] Refactor: Use getDataFromUrl helper

---
 .../highlight-cards/HighlightCards.svelte     | 23 +++----------------
 sophora-components/vite.config.ts             |  1 -
 2 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/sophora-components/src/routes/highlight-cards/HighlightCards.svelte b/sophora-components/src/routes/highlight-cards/HighlightCards.svelte
index 6274b3fa..b4f9dc82 100644
--- a/sophora-components/src/routes/highlight-cards/HighlightCards.svelte
+++ b/sophora-components/src/routes/highlight-cards/HighlightCards.svelte
@@ -1,31 +1,14 @@
 <script>
+	import getDataFromUrl from '$lib/utils/getDataFromUrl';
 	import { DesignTokens, HighlightCard } from '@swr-data-lab/components';
 	import { onMount } from 'svelte';
 
 	let root;
 	let entries = [];
 
-	const getData = (target) => {
-		let url;
-		if (
-			import.meta.env.DEV ||
-			window.location.origin === 'https://static.datenhub.net' ||
-			window.location.href.includes('apidata.googleusercontent.com') ||
-			window.location.href.includes('storage.googleapis.com')
-		) {
-			// Preview mode – use URL of current page
-			url = new URL(window.location.href);
-		} else {
-			// Embedded mode – use URL used to embed the component
-			const parent = target.parentNode.parentNode;
-			url = new URL(parent?.dataset.url);
-		}
-		const params = Object.fromEntries(url.searchParams);
-		return params.data ? JSON.parse(params.data) : [];
-	};
-
 	onMount(() => {
-		entries = getData(root);
+		const { data } = getDataFromUrl(root);
+		entries = data ? JSON.parse(data) : [];
 	});
 </script>
 
diff --git a/sophora-components/vite.config.ts b/sophora-components/vite.config.ts
index fa174486..bbf8c7da 100644
--- a/sophora-components/vite.config.ts
+++ b/sophora-components/vite.config.ts
@@ -1,4 +1,3 @@
-import path from 'path';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 

From f45ceee24a42e1e85a1680bf055b304fc303dbfa Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Thu, 19 Feb 2026 20:27:57 +0100
Subject: [PATCH 4/4] Smaller grid gap, better layout fit

---
 .../src/routes/highlight-cards/HighlightCards.svelte            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sophora-components/src/routes/highlight-cards/HighlightCards.svelte b/sophora-components/src/routes/highlight-cards/HighlightCards.svelte
index b4f9dc82..cd55ba74 100644
--- a/sophora-components/src/routes/highlight-cards/HighlightCards.svelte
+++ b/sophora-components/src/routes/highlight-cards/HighlightCards.svelte
@@ -29,7 +29,7 @@
 	.highlight-cards {
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
-		gap: 2rem;
+		gap: 1rem;
 		margin: 0.5rem 0;
 
 		@media (min-width: 1200px) {