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
new file mode 100644
index 00000000..fc608bb8
--- /dev/null
+++ b/components/src/Breakout/Breakout.mdx
@@ -0,0 +1,13 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+
+import * as BreakoutStories from './Breakout.stories.svelte';
+
+<Meta of={BreakoutStories} />
+
+# Breakout
+
+Utility component for breaking out of the [SWR.de](https://www.swr.de) grid system.
+
+<Story of={BreakoutStories.Default} />
+
+<Controls />
diff --git a/components/src/Breakout/Breakout.stories.svelte b/components/src/Breakout/Breakout.stories.svelte
new file mode 100644
index 00000000..a305e831
--- /dev/null
+++ b/components/src/Breakout/Breakout.stories.svelte
@@ -0,0 +1,56 @@
+<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: 'Layout/Breakout',
+		component: Breakout,
+		parameters: {
+			layout: 'fullscreen'
+		}
+	});
+</script>
+
+<Story name="Default" asChild>
+	<DevContainer
+		title="Autokauf-Dilemma: Elektroautos teuer, Verbrenner bald auch"
+		showPlayer={false}
+		showGrid
+		showArticleHeader={false}
+	>
+		<DesignTokens>
+			<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: 200px;
+		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;
+		margin-bottom: 2rem;
+		color: hsl(15, 100%, 35%);
+	}
+</style>
diff --git a/components/src/Breakout/Breakout.svelte b/components/src/Breakout/Breakout.svelte
new file mode 100644
index 00000000..3a6c1ca6
--- /dev/null
+++ b/components/src/Breakout/Breakout.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface BreakoutProps {
+		layout: 'medium' | 'large' | 'bleed';
+		children?: Snippet;
+	}
+	let { layout = 'medium', children }: BreakoutProps = $props();
+</script>
+
+<div class={`container ${layout}`}>
+	{@render children?.()}
+</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: 40px;
+		}
+		@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) * 8 + var(--column-gap) * 7);
+			margin-left: calc((var(--column-width) * -1) + (var(--column-gap)) * -1);
+		}
+	}
+	.large {
+		@media (min-width: 640px) {
+			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));
+		}
+	}
+	.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/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/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/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/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/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/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.mdx b/components/src/DevContainer/DevContainer.mdx
new file mode 100644
index 00000000..b24cbdca
--- /dev/null
+++ b/components/src/DevContainer/DevContainer.mdx
@@ -0,0 +1,31 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+
+import * as DevContainerStories from './DevContainer.stories.svelte';
+
+<Meta of={DevContainerStories} />
+
+# DevContainer
+
+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). 
+
+<Story of={DevContainerStories.NoPlayer} />
+
+<Controls />
+
+## Usage
+
+```jsx
+<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}
+```
\ No newline at end of file
diff --git a/components/src/DevContainer/DevContainer.stories.svelte b/components/src/DevContainer/DevContainer.stories.svelte
new file mode 100644
index 00000000..7f84619f
--- /dev/null
+++ b/components/src/DevContainer/DevContainer.stories.svelte
@@ -0,0 +1,42 @@
+<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>
+<Story name="No Player" asChild>
+	<DevContainer showPlayer={false}>
+		<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..3bbae2af
--- /dev/null
+++ b/components/src/DevContainer/DevContainer.svelte
@@ -0,0 +1,388 @@
+<script lang="ts">
+	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;
+		showNav?: boolean;
+		showPlayer?: boolean;
+		showGrid?: boolean;
+		showArticleHeader?: boolean;
+		showBreadcrumbs?: boolean;
+		paragraphsAbove?: number;
+		paragraphsBelow?: number;
+		title?: string;
+		eyebrow?: string;
+		intro?: string;
+		children?: Snippet;
+	}
+	let {
+		showHeader = true,
+		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.',
+		showBreadcrumbs = true,
+		showGrid = false,
+		paragraphsAbove = 0,
+		paragraphsBelow = 0,
+		children
+	}: DevContainerProps = $props();
+
+	const date = new Date();
+	let articleEl: HTMLElement | undefined = $state();
+</script>
+
+<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>
+		{/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 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>
+			{/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>
+		</article>
+	</div>
+</DesignTokens>
+
+<style lang="scss">
+	* {
+		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;
+		align-items: center;
+		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 {
+			display: flex;
+			align-items: center;
+			grid-column: 2 / -1;
+			list-style: none;
+			gap: 2.1em;
+			white-space: nowrap;
+			overflow: hidden;
+			@media (min-width: 1440px) {
+				margin-left: -32px;
+			}
+		}
+	}
+	.nav,
+	.breadcrumbs {
+		height: 48px;
+		display: flex;
+		align-items: center;
+		padding: 0 16px;
+		@media (min-width: 640px) {
+			padding: 0 40px;
+		}
+	}
+	.circle {
+		display: block;
+		border-radius: 1000px;
+		width: 32px;
+		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);
+		z-index: 100;
+		position: fixed;
+	}
+	.player-buttons {
+		column-gap: 8px;
+		display: flex;
+	}
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(12, 1fr);
+		column-gap: 16px;
+		max-width: 1312px;
+		width: auto;
+		position: relative;
+		@media (min-width: 1440px) {
+			column-gap: 32px;
+			margin: 0 auto;
+		}
+	}
+	.article {
+		margin: 0 16px;
+		@media (min-width: 640px) {
+			margin: 0 40px;
+		}
+		@media (min-width: 1024px) {
+			margin: 0 48px;
+		}
+		@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: 1024px) {
+				grid-column: 3 / 11;
+			}
+			@media (min-width: 1440px) {
+				grid-column: 4/10;
+			}
+		}
+	}
+	.article-header {
+		margin-bottom: 24px;
+		grid-column: 1 / 13;
+
+		@media (min-width: 640px) {
+			grid-column: 2 / 12;
+		}
+		@media (min-width: 1024px) {
+			grid-column: 3 / 11;
+		}
+		@media (min-width: 1440px) {
+			grid-column: 4 / 10;
+		}
+	}
+	.article-eyebrow {
+		font-size: 0.875rem;
+		font-weight: 500;
+		@media (min-width: 1024px) {
+			font-size: 1.25rem;
+		}
+	}
+	.article-title {
+		font-size: 2rem;
+		line-height: 1.3;
+		@media (min-width: 1024px) {
+			line-height: 1.25;
+			font-size: 3rem;
+		}
+	}
+	.article-intro {
+		margin-top: 0.5em;
+		hyphens: auto;
+		font-size: 1.25rem;
+		line-height: 1.25;
+		@media (min-width: 1024px) {
+			font-size: 1.5rem;
+		}
+	}
+	.article-meta {
+		display: flex;
+		font-size: 0.875rem;
+		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: 35%;
+		display: flex;
+		flex-flow: column;
+		justify-content: center;
+		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;
+		}
+	}
+	.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 {
+		width: 100%;
+		grid-column: 1/13;
+		@media (min-width: 640px) {
+			grid-column: 2 / 12;
+		}
+		@media (min-width: 1024px) {
+			grid-column: 3 / 11;
+		}
+		@media (min-width: 1440px) {
+			grid-column: 4/10;
+		}
+	}
+</style>
diff --git a/components/src/DevContainer/GridInspector.svelte b/components/src/DevContainer/GridInspector.svelte
new file mode 100644
index 00000000..fc66d8d4
--- /dev/null
+++ b/components/src/DevContainer/GridInspector.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	interface GridInspectorProps {
+		target: HTMLElement | undefined;
+	}
+
+	const { target }: GridInspectorProps = $props();
+	let w = $state(0);
+	let cols = $derived.by(() => {
+		w;
+		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>
+
+<svelte:window bind:innerWidth={w} />
+
+<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: 0;
+	}
+	.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/DevContainer/SwrLogo.svg.svelte b/components/src/DevContainer/SwrLogo.svg.svelte
new file mode 100644
index 00000000..e1c41aac
--- /dev/null
+++ b/components/src/DevContainer/SwrLogo.svg.svelte
@@ -0,0 +1,8 @@
+<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"
+	></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..de50dc16
--- /dev/null
+++ b/components/src/DevContainer/index.ts
@@ -0,0 +1,2 @@
+import DevContainer from './DevContainer.svelte';
+export default DevContainer;
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/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>
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',
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 0796864a..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';
@@ -9,11 +8,14 @@ export { default as Copy } from './Copy/Copy.svelte';
 export { default as Caption } from './Caption/Caption.svelte';
 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';
+// Layout
 export { default as ScrollerSection } from './ScrollerSection/ScrollerSection.svelte';
+export { default as Scroller } from './Scroller/Scroller.svelte';
 export { default as SwrHeader } from './SwrHeader/SwrHeader.svelte';
+export { default as Breakout } from './Breakout/Breakout.svelte';
+
+// Display
+export { default as Card } from './Card/Card.svelte';
 
 // Chart
 export { default as ChartHeader } from './ChartHeader/ChartHeader.svelte';
@@ -49,3 +51,5 @@ 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';