From 7c2abfe6bbe93fe173f9ff26f3a7b55a5e83dd54 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Sun, 19 Oct 2025 12:54:13 +0200
Subject: [PATCH 01/12] Add files

---
 components/src/Breakout/Breakout.mdx            | 12 ++++++++++++
 components/src/Breakout/Breakout.stories.svelte | 15 +++++++++++++++
 components/src/Breakout/Breakout.svelte         | 17 +++++++++++++++++
 components/src/Breakout/index.ts                |  2 ++
 components/src/index.js                         |  1 +
 5 files changed, 47 insertions(+)
 create mode 100644 components/src/Breakout/Breakout.mdx
 create mode 100644 components/src/Breakout/Breakout.stories.svelte
 create mode 100644 components/src/Breakout/Breakout.svelte
 create mode 100644 components/src/Breakout/index.ts

diff --git a/components/src/Breakout/Breakout.mdx b/components/src/Breakout/Breakout.mdx
new file mode 100644
index 00000000..02c422b3
--- /dev/null
+++ b/components/src/Breakout/Breakout.mdx
@@ -0,0 +1,12 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+
+import * as BreakoutStories from './Breakout.stories.svelte';
+
+<Meta of={BreakoutStories} />
+
+# Breakout
+
+<Controls />
+
+## Usage
+## Notes
diff --git a/components/src/Breakout/Breakout.stories.svelte b/components/src/Breakout/Breakout.stories.svelte
new file mode 100644
index 00000000..b49ff5c9
--- /dev/null
+++ b/components/src/Breakout/Breakout.stories.svelte
@@ -0,0 +1,15 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	import Copy from './Breakout.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Display/Breakout',
+		component: Copy
+	});
+</script>
+
+<Story name="Default" asChild>
+	<DesignTokens></DesignTokens>
+</Story>
diff --git a/components/src/Breakout/Breakout.svelte b/components/src/Breakout/Breakout.svelte
new file mode 100644
index 00000000..b0d86375
--- /dev/null
+++ b/components/src/Breakout/Breakout.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface CopyProps {
+		children?: Snippet;
+	}
+	let { children }: CopyProps = $props();
+</script>
+
+<div class="container">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style lang="scss">
+</style>
diff --git a/components/src/Breakout/index.ts b/components/src/Breakout/index.ts
new file mode 100644
index 00000000..2bf3b6af
--- /dev/null
+++ b/components/src/Breakout/index.ts
@@ -0,0 +1,2 @@
+import Breakout from './Breakout.svelte';
+export default Breakout;
diff --git a/components/src/index.js b/components/src/index.js
index ca214faa..6b0d383c 100644
--- a/components/src/index.js
+++ b/components/src/index.js
@@ -12,6 +12,7 @@ export { default as Note } from './Note/Note.svelte';
 // Display
 export { default as Card } from './Card/Card.svelte';
 export { default as Scroller } from './Scroller/Scroller.svelte';
+export { default as Breakout } from './Breakout/Breakout.svelte';
 
 // Chart
 export { default as ChartHeader } from './ChartHeader/ChartHeader.svelte';

From 08166a285d9f3a74f67d89fbb323e601371850c1 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Thu, 23 Oct 2025 14:12:24 +0200
Subject: [PATCH 02/12] Block out DevContainer

---
 .../src/Breakout/Breakout.stories.svelte      |  2 -
 .../src/ChartList/ChartList.stories.svelte    |  5 +-
 components/src/ChartList/ChartList.svelte     | 16 ++--
 components/src/DevContainer/DevContainer.mdx  | 33 ++++++++
 .../DevContainer/DevContainer.stories.svelte  | 35 ++++++++
 .../src/DevContainer/DevContainer.svelte      | 83 +++++++++++++++++++
 .../src/DevContainer/SwrLogo.svg.svelte       |  8 ++
 components/src/DevContainer/index.ts          |  2 +
 8 files changed, 172 insertions(+), 12 deletions(-)
 create mode 100644 components/src/DevContainer/DevContainer.mdx
 create mode 100644 components/src/DevContainer/DevContainer.stories.svelte
 create mode 100644 components/src/DevContainer/DevContainer.svelte
 create mode 100644 components/src/DevContainer/SwrLogo.svg.svelte
 create mode 100644 components/src/DevContainer/index.ts

diff --git a/components/src/Breakout/Breakout.stories.svelte b/components/src/Breakout/Breakout.stories.svelte
index b49ff5c9..5c3e4e39 100644
--- a/components/src/Breakout/Breakout.stories.svelte
+++ b/components/src/Breakout/Breakout.stories.svelte
@@ -2,8 +2,6 @@
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
-	import Copy from './Breakout.svelte';
-
 	const { Story } = defineMeta({
 		title: 'Display/Breakout',
 		component: Copy
diff --git a/components/src/ChartList/ChartList.stories.svelte b/components/src/ChartList/ChartList.stories.svelte
index 4e9af52c..7dacecf3 100644
--- a/components/src/ChartList/ChartList.stories.svelte
+++ b/components/src/ChartList/ChartList.stories.svelte
@@ -8,7 +8,10 @@
 
 	const { Story } = defineMeta({
 		title: 'Meta/ChartList',
-		component: ChartList
+		component: ChartList,
+		parameters: {
+			layout: 'fullscreen'
+		}
 	});
 
 	const testCharts = [
diff --git a/components/src/ChartList/ChartList.svelte b/components/src/ChartList/ChartList.svelte
index bba653d7..f575ab8a 100644
--- a/components/src/ChartList/ChartList.svelte
+++ b/components/src/ChartList/ChartList.svelte
@@ -44,8 +44,8 @@
 				</tbody>
 			</table>
 		{/if}
+		<p class="notes">Nutze die "Embed URL" um Grafiken in Sophora einzubinden.</p>
 	</div>
-	<p class="notes">Nutze die "Embed URL" um Grafiken in Sophora einzubinden.</p>
 </main>
 
 <style lang="scss">
@@ -56,8 +56,8 @@
 		flex-flow: column;
 		font-family: var(--swr-sans);
 		font-size: var(--fs-small-1);
+		background: var(--color-pageFill);
 		color: var(--color-textPrimary);
-		max-width: 40rem;
 		margin: 0 auto;
 		height: 90vh;
 		* {
@@ -66,15 +66,13 @@
 		}
 	}
 	.inner {
+		margin: 0 auto;
 		width: 100%;
-		background: var(--color-surfaceFill);
-		border: 1px solid var(--color-surfaceBorder);
+		max-width: 40rem;
 	}
 	h1 {
 		font-size: var(--fs-base);
-		border-bottom: 1px solid var(--color-textSecondary);
-		padding-bottom: 0.2em;
-		background-color: rgba(black, 0.2);
+		margin-bottom: 0.2em;
 		em {
 			background: rgba(134, 139, 84, 0.4);
 			font-style: normal;
@@ -86,6 +84,7 @@
 		border-collapse: collapse;
 		border-spacing: 0;
 		width: 100%;
+		border: 1px solid var(--color-surfaceBorder);
 	}
 	a {
 		display: block;
@@ -93,8 +92,7 @@
 		text-decoration: none;
 	}
 	th,
-	td,
-	h1 {
+	td {
 		padding: 0.2em 0.4em;
 		text-align: left;
 	}
diff --git a/components/src/DevContainer/DevContainer.mdx b/components/src/DevContainer/DevContainer.mdx
new file mode 100644
index 00000000..6683c50e
--- /dev/null
+++ b/components/src/DevContainer/DevContainer.mdx
@@ -0,0 +1,33 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+
+import * as DevContainer from './DevContainer.stories.svelte';
+
+<Meta of={DevContainer} />
+
+# DevContainer
+
+Development fixture to replicate the grid system and various UI features on [SWR.de](https://www.swr.de).
+
+Particularly useful in conjunction with `<Breakout/>`. 
+
+<Controls />
+
+## Usage
+
+```svelte
+<script lang='ts'>
+  import { dev } from '$app/environment';
+  import DevContainer from '@swr-data-lab/components';
+  import App from '$lib/App.svelte';
+</script>
+
+{#if dev}
+  <DevContainer>
+    <App />
+  </DevContainer>
+{:else}
+  <p123-your-custom-element></p123-your-custom-element>
+{/if}
+```
+
+## Notes
diff --git a/components/src/DevContainer/DevContainer.stories.svelte b/components/src/DevContainer/DevContainer.stories.svelte
new file mode 100644
index 00000000..030c9b09
--- /dev/null
+++ b/components/src/DevContainer/DevContainer.stories.svelte
@@ -0,0 +1,35 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+	import DevContainer from './DevContainer.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Meta/DevContainer',
+		component: DevContainer,
+		parameters: {
+			layout: 'fullscreen'
+		}
+	});
+</script>
+
+<Story name="Default" asChild>
+	<DevContainer>
+		<DesignTokens>
+			<div class="chart">your chart here</div>
+		</DesignTokens>
+	</DevContainer>
+</Story>
+
+<style>
+	.chart {
+		height: 400px;
+		font-family: var(--swr-sans);
+		background: hsl(15, 100%, 96%);
+		border: 1px solid hsl(15, 100%, 35%);
+		border-radius: 4px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: hsl(15, 100%, 35%);
+	}
+</style>
diff --git a/components/src/DevContainer/DevContainer.svelte b/components/src/DevContainer/DevContainer.svelte
new file mode 100644
index 00000000..9741401d
--- /dev/null
+++ b/components/src/DevContainer/DevContainer.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import SwrLogo from './SwrLogo.svg.svelte';
+
+	interface DevContainerProps {
+		showHeader?: boolean;
+		showNav?: boolean;
+		showBreadcrumbs?: boolean;
+		children?: Snippet;
+	}
+	let {
+		showHeader = true,
+		showNav = true,
+		showBreadcrumbs = true,
+		children
+	}: DevContainerProps = $props();
+</script>
+
+<div class="container">
+	<header>
+		<SwrLogo />
+	</header>
+	<div class="nav">
+		<i class="circle"></i>
+	</div>
+	<div class="breadcrumbs"></div>
+
+	<article>
+		<div class="embed">
+			{@render children?.()}
+		</div>
+	</article>
+</div>
+
+<style lang="scss">
+	.container {
+		--blue: hsl(230, 100%, 50%);
+		--blue-light: hsl(230, 100%, 95%);
+		color: var(--blue);
+	}
+	header {
+		display: flex;
+		align-items: center;
+		height: 64px;
+		padding: 0 32px;
+		background: var(--blue-light);
+		border-bottom: 1px solid var(--blue);
+	}
+	.nav,
+	.breadcrumbs {
+		height: 48px;
+		padding: 0 40px;
+		display: flex;
+		align-items: center;
+		border-bottom: 1px solid var(--blue);
+	}
+	.circle {
+		display: block;
+		border-radius: 1000px;
+		width: 32px;
+		height: 32px;
+		border: 1px solid var(--blue);
+	}
+	article {
+		display: grid;
+		padding-top: 1rem;
+		grid-template-columns: repeat(12, 1fr);
+		column-gap: 16px;
+		width: 100%;
+		position: relative;
+		&:after {
+			content: '';
+		}
+		@media (min-width: 1440px) {
+			column-gap: 32px;
+		}
+	}
+	.embed {
+		grid-column: 4 / 10;
+		// grid-column: 1 / 13;
+		width: 100%;
+	}
+</style>
diff --git a/components/src/DevContainer/SwrLogo.svg.svelte b/components/src/DevContainer/SwrLogo.svg.svelte
new file mode 100644
index 00000000..cc3b4686
--- /dev/null
+++ b/components/src/DevContainer/SwrLogo.svg.svelte
@@ -0,0 +1,8 @@
+<svg height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.8 141.7">
+	<path
+		fill="currentColor"
+		d="M347.5 0v46.1l24.7 24.7-24.7 24.8v46.1l70.2-70.9L347.5 0zm-61.1 46.4c0-10-5.9-16-19.7-16-3 0-6.5.2-8.2.4v32.6c1.5.2 4.6.4 7.4.4 12.5 0 20.5-6.6 20.5-17.4zm39.4 88.1H290l-30.4-49.8h-1.1v49.8H229V7.1c10.8-.8 24.6-.9 39.9-.9C299 6.2 316.6 17 316.6 44c0 17.2-10.6 31.1-27.6 35.3 3.4 4.9 6.6 9.6 9.8 14.3l27 40.9zm-295.6 2c-8.9 0-18.1-.9-26.3-2.8l1.3-27.9c7.2 2.6 18 5.4 27.2 5.4 10.8 0 18.6-4.5 18.6-13.6C51 75.9.9 86.6 0 44.3c-.5-24 18.9-39.8 50.9-39.8 6.8 0 15.3.8 23.2 2.3l-.1 26c-7.2-2.1-16.7-4-24.3-4-12.3 0-18.2 5.3-18.2 12.5 0 19.8 51 12.3 51 52.1.1 24.7-19.8 43.1-52.3 43.1zM192.1 7.1 179.3 86 166.4 7.1h-29.7L123.9 86 111 7.1H81.3l22.6 127.5h33.2l14.5-81.8 14.4 81.8h33.3L221.8 7.1h-29.7z"
+	></path>
+	<path fill="currentColor" d="M347.5 0v46.1l24.7 24.7-24.7 24.8v46.1l70.2-70.9L347.5 0z"></path>
+	<path fill="currentColor" d="M410.6 0v46.1l24.7 24.7-24.7 24.8v46.1l70.2-70.9L410.6 0z"></path>
+</svg>
diff --git a/components/src/DevContainer/index.ts b/components/src/DevContainer/index.ts
new file mode 100644
index 00000000..2bf3b6af
--- /dev/null
+++ b/components/src/DevContainer/index.ts
@@ -0,0 +1,2 @@
+import Breakout from './Breakout.svelte';
+export default Breakout;

From 887330842f4a481dbd90a38d8c1f907ba6b62f56 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Thu, 23 Oct 2025 14:45:31 +0200
Subject: [PATCH 03/12] Iterate

---
 components/.storybook/preview.ts              |  1 +
 components/src/Breakout/Breakout.mdx          |  5 +
 .../src/Breakout/Breakout.stories.svelte      | 29 +++++-
 components/src/Breakout/Breakout.svelte       | 62 +++++++++++-
 components/src/Caption/Caption.stories.svelte |  4 +-
 .../ChartHeader/ChartHeader.stories.svelte    |  6 +-
 components/src/Copy/Copy.stories.svelte       |  2 +-
 components/src/DesignTokens/DesignTokens.mdx  | 94 ++++++++-----------
 .../src/DevContainer/DevContainer.svelte      | 60 ++++++++++--
 .../src/Headline/Headline.stories.svelte      |  2 +-
 components/src/Note/Note.stories.svelte       |  2 +-
 .../src/Scroller/Scroller.stories.svelte      |  2 +-
 12 files changed, 193 insertions(+), 76 deletions(-)

diff --git a/components/.storybook/preview.ts b/components/.storybook/preview.ts
index 46a7ca60..81b35f72 100644
--- a/components/.storybook/preview.ts
+++ b/components/.storybook/preview.ts
@@ -19,6 +19,7 @@ const preview: Preview = {
 					'Design Tokens',
 					'Typography',
 					['Headline', 'Copy', 'Caption'],
+					'Layout',
 					'Display',
 					'Chart',
 					['ChartHeader'],
diff --git a/components/src/Breakout/Breakout.mdx b/components/src/Breakout/Breakout.mdx
index 02c422b3..1d6355ba 100644
--- a/components/src/Breakout/Breakout.mdx
+++ b/components/src/Breakout/Breakout.mdx
@@ -6,6 +6,11 @@ import * as BreakoutStories from './Breakout.stories.svelte';
 
 # Breakout
 
+Utility component for breaking out of the [SWR.de](https://www.swr.de) grid system.
+
+<Story of={BreakoutStories.Default} />
+
+
 <Controls />
 
 ## Usage
diff --git a/components/src/Breakout/Breakout.stories.svelte b/components/src/Breakout/Breakout.stories.svelte
index 5c3e4e39..718e6429 100644
--- a/components/src/Breakout/Breakout.stories.svelte
+++ b/components/src/Breakout/Breakout.stories.svelte
@@ -1,13 +1,36 @@
 <script context="module">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+	import Breakout from './Breakout.svelte';
+	import DevContainer from '../DevContainer/DevContainer.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Display/Breakout',
-		component: Copy
+		title: 'Layout/Breakout',
+		component: Breakout,
+		parameters: {
+			layout: 'fullscreen'
+		}
 	});
 </script>
 
 <Story name="Default" asChild>
-	<DesignTokens></DesignTokens>
+	<DevContainer showPlayer={false}>
+		<DesignTokens>
+			<div class="chart"></div>
+		</DesignTokens>
+	</DevContainer>
 </Story>
+
+<style>
+	.chart {
+		height: 400px;
+		font-family: var(--swr-sans);
+		background: hsl(15, 100%, 96%);
+		border: 1px solid hsl(15, 100%, 35%);
+		border-radius: 4px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: hsl(15, 100%, 35%);
+	}
+</style>
diff --git a/components/src/Breakout/Breakout.svelte b/components/src/Breakout/Breakout.svelte
index b0d86375..d2007d50 100644
--- a/components/src/Breakout/Breakout.svelte
+++ b/components/src/Breakout/Breakout.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
-	interface CopyProps {
+	interface BreakoutProps {
+		layout: 'medium' | 'large' | 'bleed';
 		children?: Snippet;
 	}
-	let { children }: CopyProps = $props();
+	let { layout = 'medium', children }: BreakoutProps = $props();
 </script>
 
 <div class="container">
@@ -14,4 +15,61 @@
 </div>
 
 <style lang="scss">
+	.container {
+		--margin: 16px;
+		--column-gap: 16px;
+		--column-width: calc((var(--grid-width) - var(--column-gap) * 11) / 12);
+		--grid-width: calc(100vw - var(--margin) * 2);
+
+		@media (min-width: 640px) {
+			--margin: 40px;
+		}
+		@media (min-width: 768px) {
+			--margin: 32px;
+		}
+		@media (min-width: 1024px) {
+			--margin: 48px;
+			--column-gap: 32px;
+		}
+		@media (min-width: 1440px) {
+			--grid-width: calc(Min(1312px, 100vw));
+			--margin: calc((100vw - var(--grid-width)) * 0.5);
+		}
+	}
+
+	.medium {
+		@media (min-width: 1024px) {
+			width: calc(var(--column-width) * 10 + var(--column-gap) * 9);
+			margin-left: calc((var(--column-width) * -1) + (var(--column-gap)) * -1);
+		}
+		@media (min-width: 1440px) {
+			width: calc(var(--column-width) * 10 + var(--column-gap) * 11);
+			margin-left: calc((var(--column-width) * -2) + (var(--column-gap)) * -3);
+		}
+	}
+	.large {
+		--w: calc(70vw);
+
+		@media (min-width: 1440px) {
+			width: calc(var(--column-width) * 12 + var(--column-gap) * 11);
+			transform: translateX(calc((var(--column-width) + var(--column-gap)) * -3));
+		}
+	}
+	.bleed {
+		width: 100vw;
+		margin-left: calc(var(--margin) * -1);
+
+		@media (min-width: 640px) {
+			margin-left: calc(var(--column-width) * -1 + (var(--column-gap)) * -1 - var(--margin) * 1);
+		}
+		@media (min-width: 768px) {
+			margin-left: calc(var(--column-width) * -1 + (var(--column-gap)) * -1 - (var(--margin) * 1));
+		}
+		@media (min-width: 1024px) {
+			margin-left: calc(var(--column-width) * -2 + (var(--column-gap)) * -2 - var(--margin) * 1);
+		}
+		@media (min-width: 1440px) {
+			margin-left: calc(var(--column-width) * -3 + (var(--column-gap)) * -3 - var(--margin) * 1);
+		}
+	}
 </style>
diff --git a/components/src/Caption/Caption.stories.svelte b/components/src/Caption/Caption.stories.svelte
index 30047a3a..cff6bb61 100644
--- a/components/src/Caption/Caption.stories.svelte
+++ b/components/src/Caption/Caption.stories.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <Story name="Default" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<div class="container">
 			<Caption>Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)</Caption>
 		</div>
@@ -19,7 +19,7 @@
 </Story>
 
 <Story name="Bold" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<div class="container">
 			<Caption weight="bold">
 				Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)
diff --git a/components/src/ChartHeader/ChartHeader.stories.svelte b/components/src/ChartHeader/ChartHeader.stories.svelte
index 8f133e59..887929f1 100644
--- a/components/src/ChartHeader/ChartHeader.stories.svelte
+++ b/components/src/ChartHeader/ChartHeader.stories.svelte
@@ -20,7 +20,7 @@
 		});
 	}}
 >
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<ChartHeader
 			title="Mehr über-60-Jährige in allen Berufen"
 			subtitle="Veränderung des Anteils der Beschäftigen über 60 Jahren in allen Berufsgruppen seit 2013 (Bundesweit)"
@@ -31,7 +31,7 @@
 </Story>
 
 <Story name="Long title" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<ChartHeader
 			title="Wärmepumpe dominiert bei Neubauten in den meisten Landkreisen in Baden-Württemberg"
 			subtitle="Neue Wohngebäude nach Heizenergieträger, 2024"
@@ -42,7 +42,7 @@
 	</DesignTokens>
 </Story>
 <Story name="Centered" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<ChartHeader
 			title="Mehr über-60-Jährige in allen Berufen"
 			subtitle="Veränderung des Anteils der Beschäftigen über 60 Jahren in allen Berufsgruppen seit 2013 (Bundesweit)"
diff --git a/components/src/Copy/Copy.stories.svelte b/components/src/Copy/Copy.stories.svelte
index ea64bf26..acc66105 100644
--- a/components/src/Copy/Copy.stories.svelte
+++ b/components/src/Copy/Copy.stories.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <Story name="Default" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<div class="container">
 			<Copy>
 				Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit
diff --git a/components/src/DesignTokens/DesignTokens.mdx b/components/src/DesignTokens/DesignTokens.mdx
index 794da0c6..710e4081 100644
--- a/components/src/DesignTokens/DesignTokens.mdx
+++ b/components/src/DesignTokens/DesignTokens.mdx
@@ -18,20 +18,6 @@ import * as NoteStories from '../Note/Note.stories.svelte';
 
 # Design Tokens
 
-## Table of Contents
-
-- [Usage](#usage)
-  - [Web](#web)
-  - [Figma](#figma)
-- [Typography](#typography)
-  - [Sizes](#sizes)
-  - [Styles](#styles)
-- [Colours](#colours)
-  - [Shades](#shades)
-  - [Linear scales](#linear-scales)
-  - [Categorical Scales](#categorical-scales)
-  - [Divergent Scales](#divergent-scales)
-
 ## Usage
 
 ### Web
@@ -40,7 +26,7 @@ The `<DesignTokens>` component makes colours, type sizes and other design tokens
 
 ```html
 <script>
-	import DesignTokens from '@swr-data-lab/components';
+  import DesignTokens from '@swr-data-lab/components';
 </script>
 
 <DesignTokens theme="auto">
@@ -48,9 +34,9 @@ The `<DesignTokens>` component makes colours, type sizes and other design tokens
 </DesignTokens>
 
 <style>
-	p {
-	  color: var(--colours-textPrimary); // this works
-	}
+  p {
+    color: var(--colours-textPrimary); // this works
+  }
 </style>
 ```
 
@@ -66,47 +52,10 @@ const sampleScale = scaleThreshold([0, 10], tokens.scales.red_blue);
 
 The tokens on this page are available as a [Figma library](https://www.figma.com/design/Wrd7uUV3GxpNXXkM5ozuHk/Datalab-Design-Tokens?node-id=0-1&t=iOqDxhuMdvEyY8VK-1). This is enabled by default for any file in the [SWR Data Lab team](https://www.figma.com/files/1125823985461580916/team/1415988138343592768).
 
-## Typography
-
-Type sizes and paragraph styles are designed to match the typography on [swr.de](https://www.swr.de/). **Styles** come with built-in settings for `line-height`, `letter-spacing`, etc. and should be preferred over using **sizes** directly.
-
-### Styles
-
-#### H2
-
-<Canvas of={HeadlineStories.Default} />
-
-#### Copy
-
-<Canvas of={CopyStories.Default} />
-
-#### Caption
-
-<Canvas of={CaptionStories.Default} />
-
-#### Note
-
-<Canvas of={NoteStories.Default} />
-
-### Sizes
-
-<Typeset
-	fontWeight={700}
-	fontFamily="SWR-VAR-Text"
-	sampleText="Pollenflug in BW: Was Heuschnupfengeplagte jetzt wissen sollten"
-	fontSizes={Object.entries(typography.wide.sizes)
-		.map(([_, size]) => {
-			return size;
-		})
-		.reverse()}
-/>
-
 ## Colours
 
 ### Semantics
 
-Light / Dark
-
 <ColorPalette>
 	{[
 		'textPrimary',
@@ -146,3 +95,38 @@ Light / Dark
 		);
 	})}
 </ColorPalette>
+
+## Typography
+
+Type sizes and paragraph styles are designed to match the typography on [swr.de](https://www.swr.de/). **Styles** come with built-in settings for `line-height`, `letter-spacing`, etc. and should be preferred over using **sizes** directly.
+
+### Styles
+
+#### H2
+
+<Canvas of={HeadlineStories.Default} />
+
+#### Copy
+
+<Canvas of={CopyStories.Default} />
+
+#### Caption
+
+<Canvas of={CaptionStories.Default} />
+
+#### Note
+
+<Canvas of={NoteStories.Default} />
+
+### Sizes
+
+<Typeset
+	fontWeight={700}
+	fontFamily="SWR-VAR-Text"
+	sampleText="Pollenflug in BW: Was Heuschnupfengeplagte jetzt wissen sollten"
+	fontSizes={Object.entries(typography.wide.sizes)
+		.map(([_, size]) => {
+			return size;
+		})
+		.reverse()}
+/>
\ No newline at end of file
diff --git a/components/src/DevContainer/DevContainer.svelte b/components/src/DevContainer/DevContainer.svelte
index 9741401d..49af0eee 100644
--- a/components/src/DevContainer/DevContainer.svelte
+++ b/components/src/DevContainer/DevContainer.svelte
@@ -5,25 +5,42 @@
 	interface DevContainerProps {
 		showHeader?: boolean;
 		showNav?: boolean;
+		showPlayer?: boolean;
 		showBreadcrumbs?: boolean;
 		children?: Snippet;
 	}
 	let {
 		showHeader = true,
 		showNav = true,
+		showPlayer = true,
 		showBreadcrumbs = true,
 		children
 	}: DevContainerProps = $props();
 </script>
 
 <div class="container">
-	<header>
-		<SwrLogo />
-	</header>
-	<div class="nav">
-		<i class="circle"></i>
-	</div>
-	<div class="breadcrumbs"></div>
+	{#if showHeader}
+		<header>
+			<SwrLogo />
+		</header>
+	{/if}
+	{#if showNav}
+		<div class="nav">
+			<i class="circle"></i>
+		</div>
+	{/if}
+	{#if showBreadcrumbs}
+		<div class="breadcrumbs"></div>
+	{/if}
+	{#if showPlayer}
+		<div class="player">
+			<i class="circle"></i>
+			<div class="player-buttons">
+				<i class="button"></i>
+				<i class="button"></i>
+			</div>
+		</div>
+	{/if}
 
 	<article>
 		<div class="embed">
@@ -33,6 +50,9 @@
 </div>
 
 <style lang="scss">
+	* {
+		box-sizing: border-box;
+	}
 	.container {
 		--blue: hsl(230, 100%, 50%);
 		--blue-light: hsl(230, 100%, 95%);
@@ -61,6 +81,32 @@
 		height: 32px;
 		border: 1px solid var(--blue);
 	}
+	.button {
+		display: block;
+		border: 1px solid var(--blue);
+		border-radius: 4px;
+		width: 40px;
+		height: 40px;
+	}
+	.player {
+		width: 638px;
+		height: 58px;
+		bottom: 16px;
+		left: 50%;
+		border-radius: 4px;
+		padding: 8px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		transform: translateX(-50%);
+		background: var(--blue-light);
+		border: 1px solid var(--blue);
+		position: fixed;
+	}
+	.player-buttons {
+		column-gap: 8px;
+		display: flex;
+	}
 	article {
 		display: grid;
 		padding-top: 1rem;
diff --git a/components/src/Headline/Headline.stories.svelte b/components/src/Headline/Headline.stories.svelte
index f49b21c8..fb01388d 100644
--- a/components/src/Headline/Headline.stories.svelte
+++ b/components/src/Headline/Headline.stories.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <Story name="Default" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<div class="container">
 			<Headline>Baden-Württemberg heizt überdurchschnittlich viel mit Wärmepumpe</Headline>
 		</div>
diff --git a/components/src/Note/Note.stories.svelte b/components/src/Note/Note.stories.svelte
index 8bd1802b..65657ee8 100644
--- a/components/src/Note/Note.stories.svelte
+++ b/components/src/Note/Note.stories.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <Story name="Default" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<Note>
 			Daten: <a href="#1">Zensus 2022</a>
 			(Durchschnittsmieten und Einwohnerzahlen),
diff --git a/components/src/Scroller/Scroller.stories.svelte b/components/src/Scroller/Scroller.stories.svelte
index 7015ad72..5b274dbe 100644
--- a/components/src/Scroller/Scroller.stories.svelte
+++ b/components/src/Scroller/Scroller.stories.svelte
@@ -5,7 +5,7 @@
 	import Scroller from './Scroller.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Display/Scroller',
+		title: 'Layout/Scroller',
 		component: Scroller,
 		parameters: {
 			viewMode: 'docs',

From c76c4e461cf277623edb3cd898948499773d16fe Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Thu, 23 Oct 2025 18:06:57 +0200
Subject: [PATCH 04/12] Iterate header

---
 components/src/Breakout/Breakout.mdx          |  1 -
 components/src/DevContainer/DevContainer.mdx  | 14 ++--
 .../DevContainer/DevContainer.stories.svelte  |  7 ++
 .../src/DevContainer/DevContainer.svelte      | 79 +++++++++++++++++++
 .../src/DevContainer/GridInspector.svelte     |  3 +
 5 files changed, 95 insertions(+), 9 deletions(-)
 create mode 100644 components/src/DevContainer/GridInspector.svelte

diff --git a/components/src/Breakout/Breakout.mdx b/components/src/Breakout/Breakout.mdx
index 1d6355ba..e9abcc33 100644
--- a/components/src/Breakout/Breakout.mdx
+++ b/components/src/Breakout/Breakout.mdx
@@ -10,7 +10,6 @@ Utility component for breaking out of the [SWR.de](https://www.swr.de) grid syst
 
 <Story of={BreakoutStories.Default} />
 
-
 <Controls />
 
 ## Usage
diff --git a/components/src/DevContainer/DevContainer.mdx b/components/src/DevContainer/DevContainer.mdx
index 6683c50e..b24cbdca 100644
--- a/components/src/DevContainer/DevContainer.mdx
+++ b/components/src/DevContainer/DevContainer.mdx
@@ -1,20 +1,20 @@
 import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
 
-import * as DevContainer from './DevContainer.stories.svelte';
+import * as DevContainerStories from './DevContainer.stories.svelte';
 
-<Meta of={DevContainer} />
+<Meta of={DevContainerStories} />
 
 # DevContainer
 
-Development fixture to replicate the grid system and various UI features on [SWR.de](https://www.swr.de).
+Development fixture for simulating the grid system and various UI features on [SWR.de](https://www.swr.de). Particularly useful for developing charts using the [breakout component](?path=/docs/layout-breakout--docs). 
 
-Particularly useful in conjunction with `<Breakout/>`. 
+<Story of={DevContainerStories.NoPlayer} />
 
 <Controls />
 
 ## Usage
 
-```svelte
+```jsx
 <script lang='ts'>
   import { dev } from '$app/environment';
   import DevContainer from '@swr-data-lab/components';
@@ -28,6 +28,4 @@ Particularly useful in conjunction with `<Breakout/>`.
 {:else}
   <p123-your-custom-element></p123-your-custom-element>
 {/if}
-```
-
-## Notes
+```
\ No newline at end of file
diff --git a/components/src/DevContainer/DevContainer.stories.svelte b/components/src/DevContainer/DevContainer.stories.svelte
index 030c9b09..7f84619f 100644
--- a/components/src/DevContainer/DevContainer.stories.svelte
+++ b/components/src/DevContainer/DevContainer.stories.svelte
@@ -19,6 +19,13 @@
 		</DesignTokens>
 	</DevContainer>
 </Story>
+<Story name="No Player" asChild>
+	<DevContainer showPlayer={false}>
+		<DesignTokens>
+			<div class="chart">your chart here</div>
+		</DesignTokens>
+	</DevContainer>
+</Story>
 
 <style>
 	.chart {
diff --git a/components/src/DevContainer/DevContainer.svelte b/components/src/DevContainer/DevContainer.svelte
index 49af0eee..e2be2050 100644
--- a/components/src/DevContainer/DevContainer.svelte
+++ b/components/src/DevContainer/DevContainer.svelte
@@ -6,16 +6,20 @@
 		showHeader?: boolean;
 		showNav?: boolean;
 		showPlayer?: boolean;
+		showArticleHeader?: boolean;
 		showBreadcrumbs?: boolean;
 		children?: Snippet;
 	}
 	let {
 		showHeader = true,
 		showNav = true,
+		showArticleHeader = true,
 		showPlayer = true,
 		showBreadcrumbs = true,
 		children
 	}: DevContainerProps = $props();
+
+	const date = new Date();
 </script>
 
 <div class="container">
@@ -32,6 +36,7 @@
 	{#if showBreadcrumbs}
 		<div class="breadcrumbs"></div>
 	{/if}
+
 	{#if showPlayer}
 		<div class="player">
 			<i class="circle"></i>
@@ -43,6 +48,30 @@
 	{/if}
 
 	<article>
+		{#if showArticleHeader}
+			<div class="article-header">
+				<p class="article-eyebrow">Eyebrow</p>
+				<h1 class="article-title">Article title goes here</h1>
+				<p class="article-intro">
+					Lorem ipsum dolor sit amet consectetur adipisicing elit. Non amet ipsum quasi similique,
+					praesentium minus voluptas doloremque aspernatur expedita magni.
+				</p>
+				<div class="article-meta">
+					<p class="article-date">
+						<span> Stand </span>
+						{date.toLocaleDateString('de-DE')}
+					</p>
+					<div class="article-byline">
+						<div class="byline-images">
+							<i class="byline-image"></i>
+							<i class="byline-image"></i>
+							<i class="byline-image"></i>
+						</div>
+						<p>Autor 1, Autor 2</p>
+					</div>
+				</div>
+			</div>
+		{/if}
 		<div class="embed">
 			{@render children?.()}
 		</div>
@@ -101,6 +130,7 @@
 		transform: translateX(-50%);
 		background: var(--blue-light);
 		border: 1px solid var(--blue);
+		z-index: 100;
 		position: fixed;
 	}
 	.player-buttons {
@@ -109,6 +139,7 @@
 	}
 	article {
 		display: grid;
+		font-family: 'SWR-VAR-Sans', sans-serif;
 		padding-top: 1rem;
 		grid-template-columns: repeat(12, 1fr);
 		column-gap: 16px;
@@ -121,6 +152,54 @@
 			column-gap: 32px;
 		}
 	}
+	.article-header {
+		grid-column: 2 / 10;
+	}
+	.article-eyebrow {
+		font-size: 0.875rem;
+	}
+	.article-title {
+		font-size: 2rem;
+	}
+	.article-intro {
+		margin-top: 0.35em;
+		font-size: 1.25rem;
+	}
+	.article-meta {
+		display: flex;
+		font-size: 0.875rem;
+		align-items: center;
+		height: 48px;
+		margin-top: 16px;
+		border-bottom: 1px solid var(--blue);
+	}
+	.article-date {
+		flex-basis: 30%;
+		span {
+			display: block;
+		}
+	}
+	.article-byline {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+	}
+	.byline-images {
+		display: flex;
+		flex-flow: row-reverse;
+	}
+	.byline-image {
+		display: block;
+		border: 1px solid var(--blue);
+		border-radius: 100px;
+		width: 47px;
+		background: white;
+		height: 47px;
+		margin-right: -10px;
+		&:first-child {
+			margin-right: 0;
+		}
+	}
 	.embed {
 		grid-column: 4 / 10;
 		// grid-column: 1 / 13;
diff --git a/components/src/DevContainer/GridInspector.svelte b/components/src/DevContainer/GridInspector.svelte
new file mode 100644
index 00000000..19d9e5c9
--- /dev/null
+++ b/components/src/DevContainer/GridInspector.svelte
@@ -0,0 +1,3 @@
+<script></script>
+
+<div></div>

From 33d6455396c6bc8e1085651f9db1337f2c8e415f Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Thu, 23 Oct 2025 21:28:58 +0200
Subject: [PATCH 05/12] Add GridInspector

---
 .../src/DevContainer/DevContainer.svelte      | 46 +++++++++++++------
 .../src/DevContainer/GridInspector.svelte     | 43 ++++++++++++++++-
 components/src/Headline/Headline.svelte       |  4 +-
 3 files changed, 75 insertions(+), 18 deletions(-)

diff --git a/components/src/DevContainer/DevContainer.svelte b/components/src/DevContainer/DevContainer.svelte
index e2be2050..98ef69a0 100644
--- a/components/src/DevContainer/DevContainer.svelte
+++ b/components/src/DevContainer/DevContainer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import SwrLogo from './SwrLogo.svg.svelte';
+	import GridInspector from './GridInspector.svelte';
 
 	interface DevContainerProps {
 		showHeader?: boolean;
@@ -8,6 +9,8 @@
 		showPlayer?: boolean;
 		showArticleHeader?: boolean;
 		showBreadcrumbs?: boolean;
+		title: string;
+		intro: string;
 		children?: Snippet;
 	}
 	let {
@@ -15,11 +18,14 @@
 		showNav = true,
 		showArticleHeader = true,
 		showPlayer = true,
+		title = 'Baden-Württemberg heizt noch größtenteils fossil',
+		intro = 'Fast drei Viertel der privaten Heizungen in Baden-Württemberg liefen 2022 noch mit Öl und Gas. In Neubauten werden inzwischen überwiegend Wärmepumpen eingebaut, doch es gibt regionale Unterschiede. Eine Datenanalyse des SWR zeigt, wie es bei Ihnen vor Ort aussieht.',
 		showBreadcrumbs = true,
 		children
 	}: DevContainerProps = $props();
 
 	const date = new Date();
+	let articleEl: HTMLElement | undefined = $state();
 </script>
 
 <div class="container">
@@ -46,19 +52,16 @@
 			</div>
 		</div>
 	{/if}
-
-	<article>
+	<article bind:this={articleEl}>
+		<GridInspector target={articleEl}></GridInspector>
 		{#if showArticleHeader}
 			<div class="article-header">
 				<p class="article-eyebrow">Eyebrow</p>
-				<h1 class="article-title">Article title goes here</h1>
-				<p class="article-intro">
-					Lorem ipsum dolor sit amet consectetur adipisicing elit. Non amet ipsum quasi similique,
-					praesentium minus voluptas doloremque aspernatur expedita magni.
-				</p>
+				<h1 class="article-title">{title}</h1>
+				<p class="article-intro">{intro}</p>
 				<div class="article-meta">
 					<p class="article-date">
-						<span> Stand </span>
+						<span>Stand </span>
 						{date.toLocaleDateString('de-DE')}
 					</p>
 					<div class="article-byline">
@@ -67,9 +70,12 @@
 							<i class="byline-image"></i>
 							<i class="byline-image"></i>
 						</div>
-						<p>Autor 1, Autor 2</p>
 					</div>
 				</div>
+				<div class="article-actions">
+					<i class="action-button"></i>
+					<i class="action-button"></i>
+				</div>
 			</div>
 		{/if}
 		<div class="embed">
@@ -83,8 +89,8 @@
 		box-sizing: border-box;
 	}
 	.container {
-		--blue: hsl(230, 100%, 50%);
-		--blue-light: hsl(230, 100%, 95%);
+		--blue: hsl(221, 75%, 46%);
+		--blue-light: hsl(221, 100%, 95%);
 		color: var(--blue);
 	}
 	header {
@@ -154,6 +160,7 @@
 	}
 	.article-header {
 		grid-column: 2 / 10;
+		margin-bottom: 24px;
 	}
 	.article-eyebrow {
 		font-size: 0.875rem;
@@ -169,8 +176,7 @@
 		display: flex;
 		font-size: 0.875rem;
 		align-items: center;
-		height: 48px;
-		margin-top: 16px;
+		height: 72px;
 		border-bottom: 1px solid var(--blue);
 	}
 	.article-date {
@@ -200,6 +206,20 @@
 			margin-right: 0;
 		}
 	}
+	.article-actions {
+		border-bottom: 1px solid var(--blue);
+		height: 64px;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+	.action-button {
+		display: block;
+		border: 1px solid var(--blue);
+		border-radius: 4px;
+		width: 60px;
+		height: 32px;
+	}
 	.embed {
 		grid-column: 4 / 10;
 		// grid-column: 1 / 13;
diff --git a/components/src/DevContainer/GridInspector.svelte b/components/src/DevContainer/GridInspector.svelte
index 19d9e5c9..8c926688 100644
--- a/components/src/DevContainer/GridInspector.svelte
+++ b/components/src/DevContainer/GridInspector.svelte
@@ -1,3 +1,42 @@
-<script></script>
+<script lang="ts">
+	interface GridInspectorProps {
+		target: HTMLElement | undefined;
+	}
 
-<div></div>
+	const { target }: GridInspectorProps = $props();
+	let cols = $derived.by(() => {
+		if (!target) return [];
+		return window.getComputedStyle(target).gridTemplateColumns.split(' ');
+	});
+</script>
+
+<div class="container">
+	{#each cols as c}
+		<i class="col" style:width={c}></i>
+	{/each}
+</div>
+
+<style>
+	.container {
+		display: flex;
+		justify-content: space-between;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		opacity: 0.1;
+		pointer-events: none;
+		z-index: -1;
+	}
+	.col {
+		background: rgb(104, 120, 179);
+		flex-grow: 0;
+		&:first-child {
+			border-left: 0;
+		}
+		&:last-child {
+			border-right: 0;
+		}
+	}
+</style>
diff --git a/components/src/Headline/Headline.svelte b/components/src/Headline/Headline.svelte
index 91de28be..b2d00154 100644
--- a/components/src/Headline/Headline.svelte
+++ b/components/src/Headline/Headline.svelte
@@ -8,9 +8,7 @@
 </script>
 
 <h2 class="container">
-	{#if children}
-		{@render children()}
-	{/if}
+	{@render children?.()}
 </h2>
 
 <style>

From b2d38da2bc592056af0f247097616033419e9964 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Thu, 23 Oct 2025 22:34:41 +0200
Subject: [PATCH 06/12] Iterate nav mockup

---
 .../src/Breakout/Breakout.stories.svelte      | 21 ++++-
 components/src/Breakout/Breakout.svelte       |  8 +-
 .../src/DevContainer/DevContainer.svelte      | 83 +++++++++++++++----
 .../src/DevContainer/GridInspector.svelte     |  2 +-
 4 files changed, 88 insertions(+), 26 deletions(-)

diff --git a/components/src/Breakout/Breakout.stories.svelte b/components/src/Breakout/Breakout.stories.svelte
index 718e6429..426ebdba 100644
--- a/components/src/Breakout/Breakout.stories.svelte
+++ b/components/src/Breakout/Breakout.stories.svelte
@@ -14,16 +14,30 @@
 </script>
 
 <Story name="Default" asChild>
-	<DevContainer showPlayer={false}>
+	<DevContainer showPlayer={false} showGrid showArticleHeader={false}>
 		<DesignTokens>
-			<div class="chart"></div>
+			<div class="demo">
+				<Breakout layout="medium">
+					<div class="chart">medium</div>
+				</Breakout>
+				<Breakout layout="large">
+					<div class="chart">large</div>
+				</Breakout>
+				<Breakout layout="bleed">
+					<div class="chart">bleed</div>
+				</Breakout>
+			</div>
 		</DesignTokens>
 	</DevContainer>
 </Story>
 
 <style>
+	.demo {
+		position: relative;
+		mix-blend-mode: multiply;
+	}
 	.chart {
-		height: 400px;
+		height: 200px;
 		font-family: var(--swr-sans);
 		background: hsl(15, 100%, 96%);
 		border: 1px solid hsl(15, 100%, 35%);
@@ -31,6 +45,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		margin-bottom: 2rem;
 		color: hsl(15, 100%, 35%);
 	}
 </style>
diff --git a/components/src/Breakout/Breakout.svelte b/components/src/Breakout/Breakout.svelte
index d2007d50..3aa0f9fa 100644
--- a/components/src/Breakout/Breakout.svelte
+++ b/components/src/Breakout/Breakout.svelte
@@ -8,10 +8,8 @@
 	let { layout = 'medium', children }: BreakoutProps = $props();
 </script>
 
-<div class="container">
-	{#if children}
-		{@render children()}
-	{/if}
+<div class={`container ${layout}`}>
+	{@render children?.()}
 </div>
 
 <style lang="scss">
@@ -48,8 +46,6 @@
 		}
 	}
 	.large {
-		--w: calc(70vw);
-
 		@media (min-width: 1440px) {
 			width: calc(var(--column-width) * 12 + var(--column-gap) * 11);
 			transform: translateX(calc((var(--column-width) + var(--column-gap)) * -3));
diff --git a/components/src/DevContainer/DevContainer.svelte b/components/src/DevContainer/DevContainer.svelte
index 98ef69a0..86321b82 100644
--- a/components/src/DevContainer/DevContainer.svelte
+++ b/components/src/DevContainer/DevContainer.svelte
@@ -7,10 +7,12 @@
 		showHeader?: boolean;
 		showNav?: boolean;
 		showPlayer?: boolean;
+		showGrid?: boolean;
 		showArticleHeader?: boolean;
 		showBreadcrumbs?: boolean;
-		title: string;
-		intro: string;
+		title?: string;
+		eyebrow?: string;
+		intro?: string;
 		children?: Snippet;
 	}
 	let {
@@ -18,9 +20,11 @@
 		showNav = true,
 		showArticleHeader = true,
 		showPlayer = true,
+		eyebrow = 'Wärmewende in Ihrer Gemeinde',
 		title = 'Baden-Württemberg heizt noch größtenteils fossil',
 		intro = 'Fast drei Viertel der privaten Heizungen in Baden-Württemberg liefen 2022 noch mit Öl und Gas. In Neubauten werden inzwischen überwiegend Wärmepumpen eingebaut, doch es gibt regionale Unterschiede. Eine Datenanalyse des SWR zeigt, wie es bei Ihnen vor Ort aussieht.',
 		showBreadcrumbs = true,
+		showGrid = false,
 		children
 	}: DevContainerProps = $props();
 
@@ -31,12 +35,21 @@
 <div class="container">
 	{#if showHeader}
 		<header>
-			<SwrLogo />
+			<div class="header-inner">
+				<SwrLogo />
+			</div>
 		</header>
 	{/if}
 	{#if showNav}
 		<div class="nav">
-			<i class="circle"></i>
+			<div class="nav-inner grid">
+				<i class="circle"></i>
+				<ul>
+					<li>Nachrichten Übersicht</li>
+					<li>Baden-Württemberg</li>
+					<li>Rheinland-Pfalz</li>
+				</ul>
+			</div>
 		</div>
 	{/if}
 	{#if showBreadcrumbs}
@@ -52,11 +65,13 @@
 			</div>
 		</div>
 	{/if}
-	<article bind:this={articleEl}>
-		<GridInspector target={articleEl}></GridInspector>
+	<article bind:this={articleEl} class="grid">
+		{#if showGrid}
+			<GridInspector target={articleEl}></GridInspector>
+		{/if}
 		{#if showArticleHeader}
 			<div class="article-header">
-				<p class="article-eyebrow">Eyebrow</p>
+				<p class="article-eyebrow">{eyebrow}</p>
 				<h1 class="article-title">{title}</h1>
 				<p class="article-intro">{intro}</p>
 				<div class="article-meta">
@@ -88,10 +103,14 @@
 	* {
 		box-sizing: border-box;
 	}
+	:global(svg) {
+		display: block;
+	}
 	.container {
 		--blue: hsl(221, 75%, 46%);
 		--blue-light: hsl(221, 100%, 95%);
 		color: var(--blue);
+		font-family: 'SWR-VAR-Sans', sans-serif;
 	}
 	header {
 		display: flex;
@@ -101,13 +120,31 @@
 		background: var(--blue-light);
 		border-bottom: 1px solid var(--blue);
 	}
+	.header-inner {
+		width: 100%;
+		max-width: 1312px;
+		margin: 0 auto;
+	}
+	.nav {
+		border-bottom: 1px solid var(--blue);
+		.nav-inner {
+			width: 100%;
+		}
+		ul {
+			margin-left: -32px;
+			display: flex;
+			align-items: center;
+			gap: 2.1em;
+			grid-column: span 6;
+			list-style: none;
+		}
+	}
 	.nav,
 	.breadcrumbs {
 		height: 48px;
 		padding: 0 40px;
 		display: flex;
 		align-items: center;
-		border-bottom: 1px solid var(--blue);
 	}
 	.circle {
 		display: block;
@@ -143,34 +180,48 @@
 		column-gap: 8px;
 		display: flex;
 	}
-	article {
+	.grid {
 		display: grid;
-		font-family: 'SWR-VAR-Sans', sans-serif;
-		padding-top: 1rem;
 		grid-template-columns: repeat(12, 1fr);
 		column-gap: 16px;
-		width: 100%;
+		max-width: 1312px;
+		width: auto;
 		position: relative;
-		&:after {
-			content: '';
-		}
 		@media (min-width: 1440px) {
 			column-gap: 32px;
+			margin: 0 auto;
 		}
 	}
 	.article-header {
 		grid-column: 2 / 10;
 		margin-bottom: 24px;
+
+		@media (min-width: 1440px) {
+			grid-column: 4 / 10;
+		}
 	}
 	.article-eyebrow {
 		font-size: 0.875rem;
+		font-weight: 500;
+		@media (min-width: 1440px) {
+			font-size: 1.25rem;
+		}
 	}
 	.article-title {
 		font-size: 2rem;
+		line-height: 1.3;
+		@media (min-width: 1440px) {
+			font-size: 3rem;
+		}
 	}
 	.article-intro {
-		margin-top: 0.35em;
+		margin-top: 0.5em;
+		hyphens: auto;
 		font-size: 1.25rem;
+		line-height: 1.25;
+		@media (min-width: 1440px) {
+			font-size: 1.5rem;
+		}
 	}
 	.article-meta {
 		display: flex;
diff --git a/components/src/DevContainer/GridInspector.svelte b/components/src/DevContainer/GridInspector.svelte
index 8c926688..1e390822 100644
--- a/components/src/DevContainer/GridInspector.svelte
+++ b/components/src/DevContainer/GridInspector.svelte
@@ -27,7 +27,7 @@
 		right: 0;
 		opacity: 0.1;
 		pointer-events: none;
-		z-index: -1;
+		z-index: 0;
 	}
 	.col {
 		background: rgb(104, 120, 179);

From 7591bcd46a430917f562ea37bf570e6bd1f1a617 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 24 Oct 2025 12:27:17 +0200
Subject: [PATCH 07/12] Iterate DevContainer

---
 .../src/DevContainer/DevContainer.svelte      | 35 +++++++++++++++----
 .../src/DevContainer/SwrLogo.svg.svelte       |  2 +-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/components/src/DevContainer/DevContainer.svelte b/components/src/DevContainer/DevContainer.svelte
index 86321b82..db604de1 100644
--- a/components/src/DevContainer/DevContainer.svelte
+++ b/components/src/DevContainer/DevContainer.svelte
@@ -36,7 +36,9 @@
 	{#if showHeader}
 		<header>
 			<div class="header-inner">
-				<SwrLogo />
+				<i class="logo">
+					<SwrLogo />
+				</i>
 			</div>
 		</header>
 	{/if}
@@ -115,36 +117,55 @@
 	header {
 		display: flex;
 		align-items: center;
-		height: 64px;
-		padding: 0 32px;
 		background: var(--blue-light);
 		border-bottom: 1px solid var(--blue);
+		height: 48px;
+		padding: 0 16px;
+		@media (min-width: 640px) {
+			padding: 0 40px;
+			height: 64px;
+		}
 	}
 	.header-inner {
 		width: 100%;
 		max-width: 1312px;
 		margin: 0 auto;
 	}
+	.logo {
+		display: block;
+		height: 24px;
+		@media (min-width: 1440px) {
+			height: 28px;
+		}
+		:global(svg) {
+			height: 100%;
+		}
+	}
 	.nav {
 		border-bottom: 1px solid var(--blue);
 		.nav-inner {
 			width: 100%;
 		}
 		ul {
-			margin-left: -32px;
 			display: flex;
 			align-items: center;
-			gap: 2.1em;
-			grid-column: span 6;
+			grid-column: 2 / -1;
 			list-style: none;
+			gap: 2.1em;
+			@media (min-width: 1440px) {
+				margin-left: -32px;
+			}
 		}
 	}
 	.nav,
 	.breadcrumbs {
 		height: 48px;
-		padding: 0 40px;
 		display: flex;
 		align-items: center;
+		padding: 0 16px;
+		@media (min-width: 640px) {
+			padding: 0 40px;
+		}
 	}
 	.circle {
 		display: block;
diff --git a/components/src/DevContainer/SwrLogo.svg.svelte b/components/src/DevContainer/SwrLogo.svg.svelte
index cc3b4686..e1c41aac 100644
--- a/components/src/DevContainer/SwrLogo.svg.svelte
+++ b/components/src/DevContainer/SwrLogo.svg.svelte
@@ -1,4 +1,4 @@
-<svg height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.8 141.7">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.8 141.7">
 	<path
 		fill="currentColor"
 		d="M347.5 0v46.1l24.7 24.7-24.7 24.8v46.1l70.2-70.9L347.5 0zm-61.1 46.4c0-10-5.9-16-19.7-16-3 0-6.5.2-8.2.4v32.6c1.5.2 4.6.4 7.4.4 12.5 0 20.5-6.6 20.5-17.4zm39.4 88.1H290l-30.4-49.8h-1.1v49.8H229V7.1c10.8-.8 24.6-.9 39.9-.9C299 6.2 316.6 17 316.6 44c0 17.2-10.6 31.1-27.6 35.3 3.4 4.9 6.6 9.6 9.8 14.3l27 40.9zm-295.6 2c-8.9 0-18.1-.9-26.3-2.8l1.3-27.9c7.2 2.6 18 5.4 27.2 5.4 10.8 0 18.6-4.5 18.6-13.6C51 75.9.9 86.6 0 44.3c-.5-24 18.9-39.8 50.9-39.8 6.8 0 15.3.8 23.2 2.3l-.1 26c-7.2-2.1-16.7-4-24.3-4-12.3 0-18.2 5.3-18.2 12.5 0 19.8 51 12.3 51 52.1.1 24.7-19.8 43.1-52.3 43.1zM192.1 7.1 179.3 86 166.4 7.1h-29.7L123.9 86 111 7.1H81.3l22.6 127.5h33.2l14.5-81.8 14.4 81.8h33.3L221.8 7.1h-29.7z"

From 863af5a3518f549a2e360fb58549f64c8abf0b53 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 24 Oct 2025 17:11:32 +0200
Subject: [PATCH 08/12] Iterate Breakout

---
 .../src/Breakout/Breakout.stories.svelte      |   8 +-
 components/src/Breakout/Breakout.svelte       |  14 +-
 components/src/Copy/Copy.svelte               |  11 +-
 .../src/DevContainer/DevContainer.svelte      | 207 ++++++++++++------
 4 files changed, 162 insertions(+), 78 deletions(-)

diff --git a/components/src/Breakout/Breakout.stories.svelte b/components/src/Breakout/Breakout.stories.svelte
index 426ebdba..da6cfb0d 100644
--- a/components/src/Breakout/Breakout.stories.svelte
+++ b/components/src/Breakout/Breakout.stories.svelte
@@ -14,7 +14,13 @@
 </script>
 
 <Story name="Default" asChild>
-	<DevContainer showPlayer={false} showGrid showArticleHeader={false}>
+	<DevContainer
+		title="Autokauf-Dilemma: Elektroautos teuer, Verbrenner bald auch"
+		showPlayer={false}
+		showGrid
+		showArticleHeader={true}
+		paragraphsAbove={1}
+	>
 		<DesignTokens>
 			<div class="demo">
 				<Breakout layout="medium">
diff --git a/components/src/Breakout/Breakout.svelte b/components/src/Breakout/Breakout.svelte
index 3aa0f9fa..f58d8e88 100644
--- a/components/src/Breakout/Breakout.svelte
+++ b/components/src/Breakout/Breakout.svelte
@@ -23,7 +23,7 @@
 			--margin: 40px;
 		}
 		@media (min-width: 768px) {
-			--margin: 32px;
+			--margin: 40px;
 		}
 		@media (min-width: 1024px) {
 			--margin: 48px;
@@ -41,14 +41,18 @@
 			margin-left: calc((var(--column-width) * -1) + (var(--column-gap)) * -1);
 		}
 		@media (min-width: 1440px) {
-			width: calc(var(--column-width) * 10 + var(--column-gap) * 11);
-			margin-left: calc((var(--column-width) * -2) + (var(--column-gap)) * -3);
+			width: calc(var(--column-width) * 8 + var(--column-gap) * 7);
+			margin-left: calc((var(--column-width) * -1) + (var(--column-gap)) * -1);
 		}
 	}
 	.large {
-		@media (min-width: 1440px) {
+		@media (min-width: 640px) {
 			width: calc(var(--column-width) * 12 + var(--column-gap) * 11);
-			transform: translateX(calc((var(--column-width) + var(--column-gap)) * -3));
+			margin-left: calc((var(--column-width) * -1 + var(--column-gap) * -1));
+		}
+		@media (min-width: 1440px) {
+			width: calc(var(--column-width) * 10 + var(--column-gap) * 11);
+			margin-left: calc((var(--column-width) * -2 + var(--column-gap) * -3));
 		}
 	}
 	.bleed {
diff --git a/components/src/Copy/Copy.svelte b/components/src/Copy/Copy.svelte
index db5cab0f..bae63ad1 100644
--- a/components/src/Copy/Copy.svelte
+++ b/components/src/Copy/Copy.svelte
@@ -3,16 +3,15 @@
 
 	interface CopyProps {
 		weight?: 'regular' | 'bold';
+		as?: string;
 		children?: Snippet;
 	}
-	let { weight = 'regular', children }: CopyProps = $props();
+	let { as = 'div', weight = 'regular', children }: CopyProps = $props();
 </script>
 
-<div class={['container', weight]}>
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
+<svelte:element this={as} class={['container', weight]}>
+	{@render children?.()}
+</svelte:element>
 
 <style lang="scss">
 	.container {
diff --git a/components/src/DevContainer/DevContainer.svelte b/components/src/DevContainer/DevContainer.svelte
index db604de1..cc6d9438 100644
--- a/components/src/DevContainer/DevContainer.svelte
+++ b/components/src/DevContainer/DevContainer.svelte
@@ -2,6 +2,8 @@
 	import type { Snippet } from 'svelte';
 	import SwrLogo from './SwrLogo.svg.svelte';
 	import GridInspector from './GridInspector.svelte';
+	import Copy from '../Copy/Copy.svelte';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	interface DevContainerProps {
 		showHeader?: boolean;
@@ -10,6 +12,8 @@
 		showGrid?: boolean;
 		showArticleHeader?: boolean;
 		showBreadcrumbs?: boolean;
+		paragraphsAbove?: number;
+		paragraphsBelow?: number;
 		title?: string;
 		eyebrow?: string;
 		intro?: string;
@@ -22,9 +26,11 @@
 		showPlayer = true,
 		eyebrow = 'Wärmewende in Ihrer Gemeinde',
 		title = 'Baden-Württemberg heizt noch größtenteils fossil',
-		intro = 'Fast drei Viertel der privaten Heizungen in Baden-Württemberg liefen 2022 noch mit Öl und Gas. In Neubauten werden inzwischen überwiegend Wärmepumpen eingebaut, doch es gibt regionale Unterschiede. Eine Datenanalyse des SWR zeigt, wie es bei Ihnen vor Ort aussieht.',
+		intro = 'Fast drei Viertel der privaten Heizungen in Baden-Württemberg liefen 2022 noch mit Öl und Gas. In Neubauten werden inzwischen überwiegend Wärmepumpen eingebaut, doch es gibt regionale Unterschiede.',
 		showBreadcrumbs = true,
 		showGrid = false,
+		paragraphsAbove = 0,
+		paragraphsBelow = 0,
 		children
 	}: DevContainerProps = $props();
 
@@ -32,74 +38,98 @@
 	let articleEl: HTMLElement | undefined = $state();
 </script>
 
-<div class="container">
-	{#if showHeader}
-		<header>
-			<div class="header-inner">
-				<i class="logo">
-					<SwrLogo />
-				</i>
-			</div>
-		</header>
-	{/if}
-	{#if showNav}
-		<div class="nav">
-			<div class="nav-inner grid">
-				<i class="circle"></i>
-				<ul>
-					<li>Nachrichten Übersicht</li>
-					<li>Baden-Württemberg</li>
-					<li>Rheinland-Pfalz</li>
-				</ul>
+<DesignTokens>
+	<div class="container">
+		{#if showHeader}
+			<header>
+				<div class="header-inner">
+					<i class="logo">
+						<SwrLogo />
+					</i>
+				</div>
+			</header>
+		{/if}
+		{#if showNav}
+			<div class="nav">
+				<div class="nav-inner grid">
+					<i class="circle"></i>
+					<ul>
+						<li>Nachrichten Übersicht</li>
+						<li>Baden-Württemberg</li>
+						<li>Rheinland-Pfalz</li>
+					</ul>
+				</div>
 			</div>
-		</div>
-	{/if}
-	{#if showBreadcrumbs}
-		<div class="breadcrumbs"></div>
-	{/if}
+		{/if}
+		{#if showBreadcrumbs}
+			<div class="breadcrumbs"></div>
+		{/if}
 
-	{#if showPlayer}
-		<div class="player">
-			<i class="circle"></i>
-			<div class="player-buttons">
-				<i class="button"></i>
-				<i class="button"></i>
+		{#if showPlayer}
+			<div class="player">
+				<i class="circle"></i>
+				<div class="player-buttons">
+					<i class="button"></i>
+					<i class="button"></i>
+				</div>
 			</div>
-		</div>
-	{/if}
-	<article bind:this={articleEl} class="grid">
-		{#if showGrid}
-			<GridInspector target={articleEl}></GridInspector>
 		{/if}
-		{#if showArticleHeader}
-			<div class="article-header">
-				<p class="article-eyebrow">{eyebrow}</p>
-				<h1 class="article-title">{title}</h1>
-				<p class="article-intro">{intro}</p>
-				<div class="article-meta">
-					<p class="article-date">
-						<span>Stand </span>
-						{date.toLocaleDateString('de-DE')}
-					</p>
-					<div class="article-byline">
-						<div class="byline-images">
-							<i class="byline-image"></i>
-							<i class="byline-image"></i>
-							<i class="byline-image"></i>
+		<article bind:this={articleEl} class="grid article">
+			{#if showGrid}
+				<GridInspector target={articleEl}></GridInspector>
+			{/if}
+			{#if showArticleHeader}
+				<div class="article-header">
+					<span class="article-eyebrow">{eyebrow}</span>
+					<h1 class="article-title">{title}</h1>
+					<p class="article-intro">{intro}</p>
+					<div class="article-meta">
+						<p class="article-date">
+							<span>Stand </span>
+							{date.toLocaleDateString('de-DE')}
+						</p>
+						<div class="article-byline">
+							<div class="byline-images">
+								<i class="byline-image"></i>
+								<i class="byline-image"></i>
+								<i class="byline-image"></i>
+							</div>
 						</div>
 					</div>
+					<div class="article-actions">
+						<i class="action-button"></i>
+						<i class="action-button"></i>
+					</div>
 				</div>
-				<div class="article-actions">
-					<i class="action-button"></i>
-					<i class="action-button"></i>
+			{/if}
+			<div class="article-body">
+				{#if paragraphsAbove > 0}
+					{#each { length: paragraphsAbove }}
+						<Copy as="p">
+							Das SWR Data Lab hat Kaufpreise, Fahrzeugdaten und Betriebskosten von über 5.500
+							Neuwagenmodellen von 2024 bis April 2025 aus dem ADAC-Autokatalog untersucht. Die
+							Analyse zeigt, wie teuer ein Elektroauto, Diesel oder Benziner der unteren
+							Mittelklasse beim Kauf und Betrieb über viele Jahre im Mittel ist.
+						</Copy>
+					{/each}
+				{/if}
+				<div class="embed">
+					{@render children?.()}
 				</div>
+				{#if paragraphsBelow > 0}
+					{#each { length: paragraphsBelow }}
+						<Copy as="p">
+							Das SWR Data Lab hat Kaufpreise, Fahrzeugdaten und Betriebskosten von über 5.500
+							Neuwagenmodellen von 2024 bis April 2025 aus dem ADAC-Autokatalog untersucht. Die
+							Analyse zeigt, wie teuer ein Elektroauto, Diesel oder Benziner der unteren
+							Mittelklasse beim Kauf und Betrieb über viele Jahre im Mittel ist.
+						</Copy>
+					{/each}
+				{/if}
 			</div>
-		{/if}
-		<div class="embed">
-			{@render children?.()}
-		</div>
-	</article>
-</div>
+		</article>
+	</div>
+</DesignTokens>
 
 <style lang="scss">
 	* {
@@ -152,6 +182,8 @@
 			grid-column: 2 / -1;
 			list-style: none;
 			gap: 2.1em;
+			white-space: nowrap;
+			overflow: hidden;
 			@media (min-width: 1440px) {
 				margin-left: -32px;
 			}
@@ -213,10 +245,35 @@
 			margin: 0 auto;
 		}
 	}
+	.article {
+		margin: 0 16px;
+		@media (min-width: 640px) {
+			margin: 0 40px;
+		}
+		@media (min-width: 1440px) {
+			margin: 0 auto;
+		}
+	}
+	.article-body {
+		display: contents;
+		:global(p) {
+			margin-bottom: 1.5em;
+			grid-column: 1/13;
+			@media (min-width: 640px) {
+				grid-column: 2 / 12;
+			}
+			@media (min-width: 1440px) {
+				grid-column: 4/10;
+			}
+		}
+	}
 	.article-header {
-		grid-column: 2 / 10;
 		margin-bottom: 24px;
+		grid-column: 1 / 13;
 
+		@media (min-width: 640px) {
+			grid-column: 2 / 12;
+		}
 		@media (min-width: 1440px) {
 			grid-column: 4 / 10;
 		}
@@ -247,12 +304,25 @@
 	.article-meta {
 		display: flex;
 		font-size: 0.875rem;
-		align-items: center;
-		height: 72px;
 		border-bottom: 1px solid var(--blue);
+		flex-flow: column;
+		gap: 8px;
+		margin-top: 1rem;
+		padding-bottom: 1rem;
+		@media (min-width: 768px) {
+			gap: 0;
+			height: 72px;
+			margin-top: 0;
+			padding-bottom: 0;
+			align-items: center;
+			flex-flow: row;
+		}
 	}
 	.article-date {
-		flex-basis: 30%;
+		flex-basis: 35%;
+		display: flex;
+		flex-flow: column;
+		justify-content: center;
 		span {
 			display: block;
 		}
@@ -293,8 +363,13 @@
 		height: 32px;
 	}
 	.embed {
-		grid-column: 4 / 10;
-		// grid-column: 1 / 13;
 		width: 100%;
+		grid-column: 1/13;
+		@media (min-width: 640px) {
+			grid-column: 2 / 12;
+		}
+		@media (min-width: 1440px) {
+			grid-column: 4/10;
+		}
 	}
 </style>

From f80c9d3d6c73f3718542f91bf2525883887d2ea1 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 24 Oct 2025 17:34:14 +0200
Subject: [PATCH 09/12] Iterare Breakout

---
 components/src/Breakout/Breakout.svelte       |  4 ++++
 .../src/DevContainer/DevContainer.svelte      | 19 ++++++++++++++++---
 .../src/DevContainer/GridInspector.svelte     |  4 ++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/components/src/Breakout/Breakout.svelte b/components/src/Breakout/Breakout.svelte
index f58d8e88..3a6c1ca6 100644
--- a/components/src/Breakout/Breakout.svelte
+++ b/components/src/Breakout/Breakout.svelte
@@ -50,6 +50,10 @@
 			width: calc(var(--column-width) * 12 + var(--column-gap) * 11);
 			margin-left: calc((var(--column-width) * -1 + var(--column-gap) * -1));
 		}
+		@media (min-width: 1024px) {
+			width: calc(var(--column-width) * 12 + var(--column-gap) * 11);
+			margin-left: calc((var(--column-width) * -2 + var(--column-gap) * -2));
+		}
 		@media (min-width: 1440px) {
 			width: calc(var(--column-width) * 10 + var(--column-gap) * 11);
 			margin-left: calc((var(--column-width) * -2 + var(--column-gap) * -3));
diff --git a/components/src/DevContainer/DevContainer.svelte b/components/src/DevContainer/DevContainer.svelte
index cc6d9438..3bbae2af 100644
--- a/components/src/DevContainer/DevContainer.svelte
+++ b/components/src/DevContainer/DevContainer.svelte
@@ -250,6 +250,9 @@
 		@media (min-width: 640px) {
 			margin: 0 40px;
 		}
+		@media (min-width: 1024px) {
+			margin: 0 48px;
+		}
 		@media (min-width: 1440px) {
 			margin: 0 auto;
 		}
@@ -262,6 +265,9 @@
 			@media (min-width: 640px) {
 				grid-column: 2 / 12;
 			}
+			@media (min-width: 1024px) {
+				grid-column: 3 / 11;
+			}
 			@media (min-width: 1440px) {
 				grid-column: 4/10;
 			}
@@ -274,6 +280,9 @@
 		@media (min-width: 640px) {
 			grid-column: 2 / 12;
 		}
+		@media (min-width: 1024px) {
+			grid-column: 3 / 11;
+		}
 		@media (min-width: 1440px) {
 			grid-column: 4 / 10;
 		}
@@ -281,14 +290,15 @@
 	.article-eyebrow {
 		font-size: 0.875rem;
 		font-weight: 500;
-		@media (min-width: 1440px) {
+		@media (min-width: 1024px) {
 			font-size: 1.25rem;
 		}
 	}
 	.article-title {
 		font-size: 2rem;
 		line-height: 1.3;
-		@media (min-width: 1440px) {
+		@media (min-width: 1024px) {
+			line-height: 1.25;
 			font-size: 3rem;
 		}
 	}
@@ -297,7 +307,7 @@
 		hyphens: auto;
 		font-size: 1.25rem;
 		line-height: 1.25;
-		@media (min-width: 1440px) {
+		@media (min-width: 1024px) {
 			font-size: 1.5rem;
 		}
 	}
@@ -368,6 +378,9 @@
 		@media (min-width: 640px) {
 			grid-column: 2 / 12;
 		}
+		@media (min-width: 1024px) {
+			grid-column: 3 / 11;
+		}
 		@media (min-width: 1440px) {
 			grid-column: 4/10;
 		}
diff --git a/components/src/DevContainer/GridInspector.svelte b/components/src/DevContainer/GridInspector.svelte
index 1e390822..fc66d8d4 100644
--- a/components/src/DevContainer/GridInspector.svelte
+++ b/components/src/DevContainer/GridInspector.svelte
@@ -4,7 +4,9 @@
 	}
 
 	const { target }: GridInspectorProps = $props();
+	let w = $state(0);
 	let cols = $derived.by(() => {
+		w;
 		if (!target) return [];
 		return window.getComputedStyle(target).gridTemplateColumns.split(' ');
 	});
@@ -16,6 +18,8 @@
 	{/each}
 </div>
 
+<svelte:window bind:innerWidth={w} />
+
 <style>
 	.container {
 		display: flex;

From 6798ee885c37cf431e128850fc10528a5e671540 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 24 Oct 2025 17:36:47 +0200
Subject: [PATCH 10/12] Clean up docs

---
 components/src/Breakout/Breakout.mdx            | 3 ---
 components/src/Breakout/Breakout.stories.svelte | 3 +--
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/src/Breakout/Breakout.mdx b/components/src/Breakout/Breakout.mdx
index e9abcc33..fc608bb8 100644
--- a/components/src/Breakout/Breakout.mdx
+++ b/components/src/Breakout/Breakout.mdx
@@ -11,6 +11,3 @@ Utility component for breaking out of the [SWR.de](https://www.swr.de) grid syst
 <Story of={BreakoutStories.Default} />
 
 <Controls />
-
-## Usage
-## Notes
diff --git a/components/src/Breakout/Breakout.stories.svelte b/components/src/Breakout/Breakout.stories.svelte
index da6cfb0d..a305e831 100644
--- a/components/src/Breakout/Breakout.stories.svelte
+++ b/components/src/Breakout/Breakout.stories.svelte
@@ -18,8 +18,7 @@
 		title="Autokauf-Dilemma: Elektroautos teuer, Verbrenner bald auch"
 		showPlayer={false}
 		showGrid
-		showArticleHeader={true}
-		paragraphsAbove={1}
+		showArticleHeader={false}
 	>
 		<DesignTokens>
 			<div class="demo">

From f02ea672f7b6e855f5a7b6a913373a6a097441ba Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 24 Oct 2025 17:41:58 +0200
Subject: [PATCH 11/12] Fix export

---
 components/src/DevContainer/index.ts | 4 ++--
 components/src/index.js              | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/src/DevContainer/index.ts b/components/src/DevContainer/index.ts
index 2bf3b6af..de50dc16 100644
--- a/components/src/DevContainer/index.ts
+++ b/components/src/DevContainer/index.ts
@@ -1,2 +1,2 @@
-import Breakout from './Breakout.svelte';
-export default Breakout;
+import DevContainer from './DevContainer.svelte';
+export default DevContainer;
diff --git a/components/src/index.js b/components/src/index.js
index 54f9c386..65be3685 100644
--- a/components/src/index.js
+++ b/components/src/index.js
@@ -52,3 +52,4 @@ export { default as Autocomplete } from './Autocomplete/Autocomplete.svelte';
 
 // Meta
 export { default as ChartList } from './ChartList/ChartList.svelte';
+export { default as DevContainer } from './DevContainer/DevContainer.svelte';

From a48099acbd7a0c753689487e1b9f984d25e85cdb Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 24 Oct 2025 17:46:24 +0200
Subject: [PATCH 12/12] Organise stories

---
 components/src/ScrollerSection/ScrollerSection.stories.svelte | 2 +-
 components/src/SwrHeader/SwrHeader.stories.svelte             | 2 +-
 components/src/index.js                                       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/src/ScrollerSection/ScrollerSection.stories.svelte b/components/src/ScrollerSection/ScrollerSection.stories.svelte
index d194258a..b059cb1a 100644
--- a/components/src/ScrollerSection/ScrollerSection.stories.svelte
+++ b/components/src/ScrollerSection/ScrollerSection.stories.svelte
@@ -6,7 +6,7 @@
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Display/ScrollerSection',
+		title: 'Layout/ScrollerSection',
 		component: ScrollerSection,
 		parameters: {
 			viewMode: 'docs',
diff --git a/components/src/SwrHeader/SwrHeader.stories.svelte b/components/src/SwrHeader/SwrHeader.stories.svelte
index d1ca910c..3757e3c7 100644
--- a/components/src/SwrHeader/SwrHeader.stories.svelte
+++ b/components/src/SwrHeader/SwrHeader.stories.svelte
@@ -5,7 +5,7 @@
 	import SwrHeader from './SwrHeader.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Display/SwrHeader',
+		title: 'Layout/SwrHeader',
 		component: SwrHeader
 	});
 
diff --git a/components/src/index.js b/components/src/index.js
index 65be3685..3b4883f5 100644
--- a/components/src/index.js
+++ b/components/src/index.js
@@ -1,7 +1,6 @@
 // Design Tokens
 export { default as DesignTokens } from './DesignTokens/DesignTokens.svelte';
 export { tokens as tokens } from './DesignTokens/index.js';
-export { default as isDarkMode } from './isDarkMode/isDarkMode.svelte';
 
 // Typography
 export { default as Headline } from './Headline/Headline.svelte';
@@ -53,3 +52,4 @@ export { default as Autocomplete } from './Autocomplete/Autocomplete.svelte';
 // Meta
 export { default as ChartList } from './ChartList/ChartList.svelte';
 export { default as DevContainer } from './DevContainer/DevContainer.svelte';
+export { default as isDarkMode } from './isDarkMode/isDarkMode.svelte';