From 87fe363d2897861d5c8738795f9fdecb90c205bb Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Thu, 5 Dec 2024 11:43:32 +0100
Subject: [PATCH 01/16] changes kol-span-ws to kol-span

Refs: #7035
---
 .../src/components/details/style.scss         | 10 ++-
 packages/components/src/components/link.scss  | 12 ++-
 packages/components/src/components/style.scss | 27 +++---
 .../src/components/tree-item/style.scss       |  2 +-
 .../Collapsible/collapsible.scss              |  6 +-
 .../src/functional-components/Span/Span.tsx   |  2 +-
 .../Span/SpanCoreHelper.tsx                   |  2 +-
 .../Span/test/snapshot.test.tsx               |  2 +-
 .../default/src/components/accordion.scss     | 14 +--
 .../default/src/components/details.scss       |  6 +-
 .../default/src/components/link-button.scss   | 86 +++++++++----------
 .../default/src/components/skip-nav.scss      |  2 +-
 .../default/src/components/split-button.scss  |  6 +-
 .../themes/default/src/components/tabs.scss   |  6 +-
 packages/themes/default/src/global.scss       |  4 +-
 packages/themes/default/src/mixins/link.scss  |  4 +-
 .../ecl/src/ecl-ec/components/details.scss    |  4 +-
 .../themes/ecl/src/ecl-ec/components/nav.scss | 16 ++--
 .../ecl/src/ecl-ec/components/skip-nav.scss   |  2 +-
 .../src/ecl-ec/components/split-button.scss   |  4 +-
 .../ecl/src/ecl-ec/components/tabs.scss       |  8 +-
 packages/themes/ecl/src/ecl-ec/global.scss    |  4 +-
 .../ecl/src/ecl-eu/components/details.scss    |  4 +-
 .../src/ecl-eu/components/link-button.scss    | 72 ++++++++--------
 .../themes/ecl/src/ecl-eu/components/nav.scss | 10 +--
 .../ecl/src/ecl-eu/components/skip-nav.scss   |  2 +-
 .../ecl/src/ecl-eu/components/tabs.scss       |  8 +-
 packages/themes/ecl/src/ecl-eu/global.scss    |  4 +-
 .../itzbund/src/components/details.scss       |  2 +-
 .../themes/itzbund/src/components/nav.scss    |  2 +-
 .../itzbund/src/components/skip-nav.scss      |  2 +-
 .../itzbund/src/components/split-button.scss  | 10 +--
 .../themes/itzbund/src/components/tabs.scss   |  2 +-
 packages/themes/itzbund/src/global.scss       |  4 +-
 packages/themes/itzbund/src/mixins/link.scss  |  4 +-
 35 files changed, 185 insertions(+), 170 deletions(-)

diff --git a/packages/components/src/components/details/style.scss b/packages/components/src/components/details/style.scss
index 89e07e8734..66e003b854 100644
--- a/packages/components/src/components/details/style.scss
+++ b/packages/components/src/components/details/style.scss
@@ -14,11 +14,13 @@
 
 			button {
 				min-height: auto;
-			}
 
-			button .kol-span-wc .span-label {
-				border-bottom-color: grey;
-				border-bottom-style: solid;
+				.kol-span {
+					.&__label {
+						border-bottom-color: grey;
+						border-bottom-style: solid;
+					}
+				}
 			}
 		}
 
diff --git a/packages/components/src/components/link.scss b/packages/components/src/components/link.scss
index 7656e3fe54..b6676c4981 100644
--- a/packages/components/src/components/link.scss
+++ b/packages/components/src/components/link.scss
@@ -14,15 +14,19 @@
 		text-align: left;
 		text-decoration-line: none;
 
-		.kol-span-wc .span-label {
-			text-decoration-line: underline;
+		.kol-span {
+			.&__label {
+				text-decoration-line: underline;
+			}
 		}
 	}
 
 	a:is(:focus, :hover):not([aria-disabled]),
 	button:is(:focus, :hover):not([disabled]) {
-		.kol-span-wc .span-label {
-			text-decoration-thickness: 0.2em;
+		.kol-span {
+			.&__label {
+				text-decoration-thickness: 0.2em;
+			}
 		}
 	}
 
diff --git a/packages/components/src/components/style.scss b/packages/components/src/components/style.scss
index 022fd4fc26..6ce76845ab 100644
--- a/packages/components/src/components/style.scss
+++ b/packages/components/src/components/style.scss
@@ -17,16 +17,15 @@
 		box-sizing: border-box;
 	}
 
-	/* KolSpan is a layout component with icons in all directions and a label text in the middle. */
-	.kol-span-wc {
+	.kol-span {
+		/* KolSpan is a layout component with icons in all directions and a label text in the middle. */
 		display: grid;
 		place-items: center;
-	}
-
-	/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
-	.kol-span-wc > span {
-		display: flex;
-		place-items: center;
+		/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
+		&__container {
+			display: flex;
+			place-items: center;
+		}
 	}
 
 	a,
@@ -35,8 +34,12 @@
 	}
 
 	/* This is the text label. */
-	.hide-label > .kol-span-wc > span > span {
-		display: none;
+	.hide-label {
+		.kol-span {
+			&__label {
+				display: none;
+			}
+		}
 	}
 
 	/* Reset browser agent style. */
@@ -55,8 +58,8 @@
 		outline: none;
 	}
 
-	[aria-disabled='true']:focus .kol-span-wc,
-	[disabled]:focus .kol-span-wc {
+	[aria-disabled='true']:focus .kol-span,
+	[disabled]:focus .kol-span {
 		outline: none !important;
 	}
 }
diff --git a/packages/components/src/components/tree-item/style.scss b/packages/components/src/components/tree-item/style.scss
index cd4d7b0076..213527c1b2 100644
--- a/packages/components/src/components/tree-item/style.scss
+++ b/packages/components/src/components/tree-item/style.scss
@@ -25,7 +25,7 @@
 		}
 	}
 
-	a .kol-span-wc {
+	a .kol-span {
 		place-items: unset; // unset 'center' style from global layer
 	}
 }
diff --git a/packages/components/src/functional-components/Collapsible/collapsible.scss b/packages/components/src/functional-components/Collapsible/collapsible.scss
index 0b2e54e0ba..33e7e1547a 100644
--- a/packages/components/src/functional-components/Collapsible/collapsible.scss
+++ b/packages/components/src/functional-components/Collapsible/collapsible.scss
@@ -44,8 +44,10 @@
         * Inside a button, the caption text is always centered.
         * So we have to align the text to the left.
         */
-		&__heading-button button .kol-span-wc {
-			justify-items: start;
+		&__heading-button button {
+			.kol-span {
+				justify-items: start;
+			}
 		}
 	}
 }
diff --git a/packages/components/src/functional-components/Span/Span.tsx b/packages/components/src/functional-components/Span/Span.tsx
index c8a3deaf67..b08d69eb2e 100644
--- a/packages/components/src/functional-components/Span/Span.tsx
+++ b/packages/components/src/functional-components/Span/Span.tsx
@@ -37,7 +37,7 @@ const KolSpanFc: FC<SpanProps> = (props, children) => {
 	}
 
 	return (
-		<span class={clsx('kol-span-wc', { 'hide-label': hideLabel }, classNames)} {...other}>
+		<span class={clsx('kol-span', { 'hide-label': hideLabel }, classNames)} {...other}>
 			{isObject(topIconProps) && <IconHelper class="top" {...topIconProps} />}
 			<span class="kol-span__container">
 				{isObject(leftIconProps) && <IconHelper class="left" {...leftIconProps} />}
diff --git a/packages/components/src/functional-components/Span/SpanCoreHelper.tsx b/packages/components/src/functional-components/Span/SpanCoreHelper.tsx
index d61df0af0d..df703daccd 100644
--- a/packages/components/src/functional-components/Span/SpanCoreHelper.tsx
+++ b/packages/components/src/functional-components/Span/SpanCoreHelper.tsx
@@ -13,7 +13,7 @@ const KolSpanCoreHelperFc: FC<{ label: string; hideLabel?: boolean; badgeText?:
 	return (
 		<>
 			{hideExpertSlot && <LabelHelper label={label} hideLabel={hideLabel} badgeText={badgeText} allowMarkdown={allowMarkdown} />}
-			<span aria-hidden={hideExpertSlot ? 'true' : undefined} class="span-label" hidden={hideExpertSlot}>
+			<span aria-hidden={hideExpertSlot ? 'true' : undefined} class="kol-span__label" hidden={hideExpertSlot}>
 				{children}
 			</span>
 			{isString(badgeText) && (
diff --git a/packages/components/src/functional-components/Span/test/snapshot.test.tsx b/packages/components/src/functional-components/Span/test/snapshot.test.tsx
index 32ffd58ba6..68887a930c 100644
--- a/packages/components/src/functional-components/Span/test/snapshot.test.tsx
+++ b/packages/components/src/functional-components/Span/test/snapshot.test.tsx
@@ -12,7 +12,7 @@ describe('KolSpanFc', () => {
 		expect(page.root).toBeDefined();
 		expect(page.root).toMatchSnapshot();
 		expect(page.root?.tagName.toLowerCase()).toBe('span');
-		expect(page.root?.classList.contains('kol-span-wc')).toBe(true);
+		expect(page.root?.classList.contains('kol-span')).toBe(true);
 		expect(page.root?.textContent).toContain('Default Label');
 	});
 
diff --git a/packages/themes/default/src/components/accordion.scss b/packages/themes/default/src/components/accordion.scss
index 2ec8ae10e3..fa14e619f8 100644
--- a/packages/themes/default/src/components/accordion.scss
+++ b/packages/themes/default/src/components/accordion.scss
@@ -36,12 +36,14 @@
 				}
 			}
 
-			.kol-span-wc > span {
-				display: flex;
-				place-items: baseline center;
-				text-align: left;
-				gap: 0.5em;
-				@include kol-typography-accordion;
+			.kol-span {
+				&__container {
+					display: flex;
+					place-items: baseline center;
+					text-align: left;
+					gap: 0.5em;
+					@include kol-typography-accordion;
+				}
 			}
 
 			border-radius: var(--border-radius);
diff --git a/packages/themes/default/src/components/details.scss b/packages/themes/default/src/components/details.scss
index eeee0ac8bc..816dcbfc52 100644
--- a/packages/themes/default/src/components/details.scss
+++ b/packages/themes/default/src/components/details.scss
@@ -29,14 +29,14 @@
 				font-size: rem(19.2);
 			}
 
-			.kol-span-wc {
-				& > span {
+			.kol-span {
+				&__container {
 					display: flex;
 					text-align: left;
 					gap: 0;
 				}
 
-				.span-label {
+				&__label {
 					border-bottom-color: #000;
 				}
 			}
diff --git a/packages/themes/default/src/components/link-button.scss b/packages/themes/default/src/components/link-button.scss
index 789966ee84..78e6230b9f 100644
--- a/packages/themes/default/src/components/link-button.scss
+++ b/packages/themes/default/src/components/link-button.scss
@@ -17,7 +17,7 @@
 		text-decoration-line: none;
 	}
 
-	:is(a, button):focus .kol-span-wc {
+	:is(a, button):focus .kol-span {
 		outline-color: var(--color-primary-variant);
 		outline-offset: rem(2);
 		outline-style: solid;
@@ -25,7 +25,7 @@
 		transition: outline-offset 0.2s linear;
 	}
 
-	:is(a, button) > .kol-span-wc {
+	:is(a, button) > .kol-span {
 		font-weight: 700;
 		border-radius: var(--a11y-min-size);
 		border-style: solid;
@@ -38,31 +38,31 @@
 		transition-property: background-color, color, border-color;
 	}
 
-	.primary :is(a, button) > .kol-span-wc,
-	.primary :is(a, button):disabled:hover > .kol-span-wc {
+	.primary :is(a, button) > .kol-span,
+	.primary :is(a, button):disabled:hover > .kol-span {
 		background-color: var(--color-primary);
 		border-color: var(--color-primary);
 		color: var(--color-light);
 	}
 
-	.secondary :is(a, button) > .kol-span-wc,
-	.secondary :is(a, button):disabled:hover > .kol-span-wc,
-	.normal :is(a, button) > .kol-span-wc,
-	.normal :is(a, button):disabled:hover > .kol-span-wc {
+	.secondary :is(a, button) > .kol-span,
+	.secondary :is(a, button):disabled:hover > .kol-span,
+	.normal :is(a, button) > .kol-span,
+	.normal :is(a, button):disabled:hover > .kol-span {
 		background-color: var(--color-light);
 		border-color: var(--color-primary);
 		color: var(--color-primary);
 	}
 
-	.danger :is(a, button) > .kol-span-wc,
-	.danger :is(a, button):disabled:hover > .kol-span-wc {
+	.danger :is(a, button) > .kol-span,
+	.danger :is(a, button):disabled:hover > .kol-span {
 		background-color: var(--color-danger);
 		border-color: var(--color-danger);
 		color: var(--color-light);
 	}
 
-	.ghost :is(a, button) > .kol-span-wc,
-	.ghost :is(a, button):disabled:hover > .kol-span-wc {
+	.ghost :is(a, button) > .kol-span,
+	.ghost :is(a, button):disabled:hover > .kol-span {
 		border-color: var(--color-light);
 		background-color: var(--color-light);
 		box-shadow: none;
@@ -70,64 +70,64 @@
 	}
 
 	/*-----------*/
-	.primary :is(a, button):active > .kol-span-wc,
-	.primary :is(a, button):hover > .kol-span-wc,
-	.secondary :is(a, button):active > .kol-span-wc,
-	.secondary :is(a, button):hover > .kol-span-wc,
-	.normal :is(a, button):active > .kol-span-wc,
-	.normal :is(a, button):hover > .kol-span-wc,
-	.danger :is(a, button):active > .kol-span-wc,
-	.danger :is(a, button):hover > .kol-span-wc,
-	.ghost :is(a, button):active > .kol-span-wc,
-	.ghost :is(a, button):hover > .kol-span-wc {
+	.primary :is(a, button):active > .kol-span,
+	.primary :is(a, button):hover > .kol-span,
+	.secondary :is(a, button):active > .kol-span,
+	.secondary :is(a, button):hover > .kol-span,
+	.normal :is(a, button):active > .kol-span,
+	.normal :is(a, button):hover > .kol-span,
+	.danger :is(a, button):active > .kol-span,
+	.danger :is(a, button):hover > .kol-span,
+	.ghost :is(a, button):active > .kol-span,
+	.ghost :is(a, button):hover > .kol-span {
 		background-color: var(--color-primary-variant);
 		border-color: var(--color-primary-variant);
 		box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24);
 		color: var(--color-light);
 	}
 
-	.danger :is(a, button):active > .kol-span-wc,
-	.danger :is(a, button):hover > .kol-span-wc {
+	.danger :is(a, button):active > .kol-span,
+	.danger :is(a, button):hover > .kol-span {
 		background-color: var(--color-danger);
 		border-color: var(--color-danger);
 	}
 
-	:is(a, button):disabled:hover > .kol-span-wc,
-	:is(a, button):focus:hover > .kol-span-wc {
+	:is(a, button):disabled:hover > .kol-span,
+	:is(a, button):focus:hover > .kol-span {
 		box-shadow: none;
 	}
 
-	.primary :is(a, button):active > .kol-span-wc,
-	.secondary :is(a, button):active > .kol-span-wc,
-	.normal :is(a, button):active > .kol-span-wc,
-	.danger :is(a, button):active > .kol-span-wc,
-	.ghost :is(a, button):active > .kol-span-wc {
+	.primary :is(a, button):active > .kol-span,
+	.secondary :is(a, button):active > .kol-span,
+	.normal :is(a, button):active > .kol-span,
+	.danger :is(a, button):active > .kol-span,
+	.ghost :is(a, button):active > .kol-span {
 		border-color: var(--color-light);
 		box-shadow: none;
 		outline: none;
 	}
 
-	:is(a, button).hide-label > .kol-span-wc {
+	:is(a, button).hide-label > .kol-spa {
 		padding: rem(12.8);
 		width: unset;
 	}
 
-	:is(a, button).hide-label > .kol-span-wc > span > span {
+	:is(a, button).hide-label > .kol-span__label {
 		display: none;
 	}
 
-	:is(a, button).loading > .kol-span-wc .kol-icon {
+	:is(a, button).loading > .kol-span .kol-icon {
 		animation: spin 5s infinite linear;
 	}
 
 	/** small ghost button */
-	.ghost :is(a, button).small > .kol-span-wc {
+	.ghost :is(a, button).small > .kol-span {
 		border: none;
 		background-color: transparent;
 		box-shadow: none;
 	}
 
-	.ghost :is(a, button).small > .kol-span-wc > span {
+	.ghost :is(a, button).small > .kol-span__container {
 		border-radius: 1.5em;
 		border-style: solid;
 		border-width: var(--border-width);
@@ -135,10 +135,10 @@
 		background-color: var(--color-light);
 	}
 
-	.ghost :is(a, button).small:active > .kol-span-wc > span,
-	.ghost :is(a, button).small:hover > .kol-span-wc > span,
-	.ghost :is(a, button).small.transparent:active > .kol-span-wc > span,
-	.ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {
+	.ghost :is(a, button).small:active > .kol-span__container,
+	.ghost :is(a, button).small:hover > .kol-span__container,
+	.ghost :is(a, button).small.transparent:active > .kol-span__container,
+	.ghost :is(a, button).small.transparent:hover > .kol-span__container {
 		background-color: var(--color-primary-variant);
 		border-color: var(--color-primary-variant);
 		box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24);
@@ -146,9 +146,9 @@
 	}
 
 	/** :is(a,button) with transparent background */
-	:is(a, button).transparent > .kol-span-wc > span,
-	.ghost :is(a, button).small.transparent > .kol-span-wc > span,
-	:is(a, button).transparent > .kol-span-wc {
+	:is(a, button).transparent > .kol-span__container,
+	.ghost :is(a, button).small.transparent > .kol-span__container,
+	:is(a, button).transparent > .kol-span {
 		background-color: transparent;
 		border-color: transparent;
 	}
diff --git a/packages/themes/default/src/components/skip-nav.scss b/packages/themes/default/src/components/skip-nav.scss
index 61cfc7d623..42dfcd071f 100644
--- a/packages/themes/default/src/components/skip-nav.scss
+++ b/packages/themes/default/src/components/skip-nav.scss
@@ -5,7 +5,7 @@
 		font-family: var(--font-family);
 	}
 
-	.kol-link-wc > a > .kol-span-wc {
+	.kol-link-wc > a > .kol-span {
 		border-radius: var(--a11y-min-size);
 		border-style: solid;
 		border-width: var(--border-width);
diff --git a/packages/themes/default/src/components/split-button.scss b/packages/themes/default/src/components/split-button.scss
index c8b16effb4..28cce09547 100644
--- a/packages/themes/default/src/components/split-button.scss
+++ b/packages/themes/default/src/components/split-button.scss
@@ -26,7 +26,7 @@
 		width: rem(1);
 	}
 
-	:is(a, button) > .kol-span-wc {
+	:is(a, button) > .kol-span {
 		font-weight: 700;
 
 		min-height: var(--a11y-min-size);
@@ -38,12 +38,12 @@
 	}
 
 	// Temp-Fix Hover-effect on Button clipping border
-	.main-button :is(a, button) > .kol-span-wc {
+	.main-button :is(a, button) > .kol-span {
 		border-top-left-radius: var(--border-radius);
 		border-bottom-left-radius: var(--border-radius);
 	}
 
-	.secondary-button :is(a, button) > .kol-span-wc {
+	.secondary-button :is(a, button) > .kol-span {
 		border-top-right-radius: var(--border-radius);
 		border-bottom-right-radius: var(--border-radius);
 	}
diff --git a/packages/themes/default/src/components/tabs.scss b/packages/themes/default/src/components/tabs.scss
index e6236b86dd..a4811640e3 100644
--- a/packages/themes/default/src/components/tabs.scss
+++ b/packages/themes/default/src/components/tabs.scss
@@ -35,15 +35,15 @@
 		color: var(--color-primary);
 	}
 
-	button:not(.selected) .kol-span-wc > span {
+	button:not(.selected) .kol-span__container {
 		padding-bottom: 0.25em;
 	}
 
-	button.selected .kol-span-wc > span {
+	button.selected .kol-span__container {
 		border-bottom: 0.25em solid;
 	}
 
-	button .kol-span-wc > span {
+	button .kol-span__container {
 		gap: rem(8);
 	}
 
diff --git a/packages/themes/default/src/global.scss b/packages/themes/default/src/global.scss
index a80954986c..527803f8f6 100644
--- a/packages/themes/default/src/global.scss
+++ b/packages/themes/default/src/global.scss
@@ -68,8 +68,8 @@
 		padding: rem(8) rem(12);
 	}
 
-	.kol-span-wc,
-	.kol-span-wc > span {
+	.kol-span,
+	.kol-span__container {
 		gap: rem(8);
 	}
 
diff --git a/packages/themes/default/src/mixins/link.scss b/packages/themes/default/src/mixins/link.scss
index 5f7ab2f842..9b4e6a253b 100644
--- a/packages/themes/default/src/mixins/link.scss
+++ b/packages/themes/default/src/mixins/link.scss
@@ -12,14 +12,14 @@
 		outline: none;
 	}
 
-	:is(a, button):focus kol-span-wc {
+	:is(a, button):focus kol-span {
 		border-radius: var(--border-radius);
 		outline: var(--border-width) solid;
 	}
 
 	a:is(:focus, :hover):not([aria-disabled]),
 	button:is(:focus, :hover):not([disabled]) {
-		.kol-span-wc .span-label {
+		.kol-span__label {
 			text-decoration-thickness: 0.25em;
 		}
 	}
diff --git a/packages/themes/ecl/src/ecl-ec/components/details.scss b/packages/themes/ecl/src/ecl-ec/components/details.scss
index 79ffb8f307..e94d98f737 100644
--- a/packages/themes/ecl/src/ecl-ec/components/details.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/details.scss
@@ -13,7 +13,7 @@
 				cursor: pointer;
 			}
 
-			button .kol-span-wc .span-label {
+			button .kol-span__label {
 				border-bottom-color: #000;
 			}
 
@@ -21,7 +21,7 @@
 				font-size: rem(19.2);
 			}
 
-			.kol-span-wc > span {
+			.kol-span__container {
 				display: flex;
 				text-align: left;
 				gap: 0;
diff --git a/packages/themes/ecl/src/ecl-ec/components/nav.scss b/packages/themes/ecl/src/ecl-ec/components/nav.scss
index dcbfce6619..d195eec12d 100644
--- a/packages/themes/ecl/src/ecl-ec/components/nav.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/nav.scss
@@ -20,9 +20,9 @@
 		display: flex;
 	}
 
-	.entry .kol-button-wc:first-child,
+	.entry .kol-button:first-child,
 	.entry .kol-link-wc,
-	.entry .kol-span-wc {
+	.entry .kol-span {
 		flex-grow: 1;
 	}
 
@@ -43,7 +43,7 @@
 		height: 100%;
 	}
 
-	.kol-span-wc {
+	.kol-span {
 		border-color: transparent;
 		border-style: solid;
 		border-width: rem(2);
@@ -66,13 +66,15 @@
 		text-decoration: none;
 	}
 
-	:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {
+	:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span {
 		border-color: var(--color-white);
 	}
 
-	:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,
-	:is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {
-		text-decoration: underline;
+	:is(.kol-button-wc, .kol-link-wc):focus-within,
+	:is(.kol-button-wc, .kol-link-wc):hover {
+		.kol-span {
+			text-decoration: underline;
+		}
 	}
 
 	div > .expand-button kol-icon::part(icon)::before {
diff --git a/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss b/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss
index 83deaea53d..f1df8ab3ee 100644
--- a/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss
@@ -5,7 +5,7 @@
 		font-family: var(--font-family);
 	}
 
-	.kol-link-wc > a > .kol-span-wc {
+	.kol-link-wc > a > .kol-span {
 		border-radius: 0;
 		border-style: solid;
 		border-width: rem(2);
diff --git a/packages/themes/ecl/src/ecl-ec/components/split-button.scss b/packages/themes/ecl/src/ecl-ec/components/split-button.scss
index 569a37f937..fded497b23 100644
--- a/packages/themes/ecl/src/ecl-ec/components/split-button.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/split-button.scss
@@ -19,8 +19,8 @@
 		border-top: rem(1) solid var(--color-blue);
 	}
 
-	a .kol-span-wc,
-	button .kol-span-wc {
+	a .kol-span,
+	button .kol-span {
 		font-weight: var(--font-weight-bold);
 		margin: 0;
 		min-height: rem(44);
diff --git a/packages/themes/ecl/src/ecl-ec/components/tabs.scss b/packages/themes/ecl/src/ecl-ec/components/tabs.scss
index 450549ab67..72cf2bb36b 100644
--- a/packages/themes/ecl/src/ecl-ec/components/tabs.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/tabs.scss
@@ -16,13 +16,13 @@
 		margin-bottom: rem(-1);
 	}
 
-	.tabs-button-group button .kol-span-wc {
+	.tabs-button-group button .kol-span {
 		padding: rem(8);
 		min-height: rem(44);
 		min-width: rem(44);
 	}
 
-	.tabs-button-group button.selected .kol-span-wc {
+	.tabs-button-group button.selected .kol-span {
 		border-color: var(--color-grey-25);
 		border-style: solid;
 		border-width: rem(1);
@@ -33,11 +33,11 @@
 		color: var(--color-blue);
 	}
 
-	.tabs-button-group button:hover:not(:disabled) .kol-span-wc {
+	.tabs-button-group button:hover:not(:disabled) .kol-span {
 		color: var(--color-blue-130);
 	}
 
-	.tabs-button-group button:focus .kol-span-wc {
+	.tabs-button-group button:focus .kol-span {
 		outline-color: var(--color-blue-130);
 		outline-style: solid;
 		outline-width: rem(2);
diff --git a/packages/themes/ecl/src/ecl-ec/global.scss b/packages/themes/ecl/src/ecl-ec/global.scss
index d91c98e69a..419f49f4ed 100644
--- a/packages/themes/ecl/src/ecl-ec/global.scss
+++ b/packages/themes/ecl/src/ecl-ec/global.scss
@@ -90,8 +90,8 @@
 		font-weight: var(--font-weight);
 	}
 
-	.kol-span-wc,
-	.kol-span-wc > span {
+	.kol-span,
+	.kol-span__container {
 		gap: 0.5em;
 	}
 
diff --git a/packages/themes/ecl/src/ecl-eu/components/details.scss b/packages/themes/ecl/src/ecl-eu/components/details.scss
index 79ffb8f307..e94d98f737 100644
--- a/packages/themes/ecl/src/ecl-eu/components/details.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/details.scss
@@ -13,7 +13,7 @@
 				cursor: pointer;
 			}
 
-			button .kol-span-wc .span-label {
+			button .kol-span__label {
 				border-bottom-color: #000;
 			}
 
@@ -21,7 +21,7 @@
 				font-size: rem(19.2);
 			}
 
-			.kol-span-wc > span {
+			.kol-span__container {
 				display: flex;
 				text-align: left;
 				gap: 0;
diff --git a/packages/themes/ecl/src/ecl-eu/components/link-button.scss b/packages/themes/ecl/src/ecl-eu/components/link-button.scss
index 5c4a5414ff..cb6069ed7d 100644
--- a/packages/themes/ecl/src/ecl-eu/components/link-button.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/link-button.scss
@@ -18,8 +18,8 @@
 		outline: none;
 	}
 
-	a > .kol-span-wc,
-	button > .kol-span-wc {
+	a > .kol-span,
+	button > .kol-span {
 		min-height: rem(44);
 		min-width: rem(44);
 		border-radius: rem(4);
@@ -31,17 +31,17 @@
 		padding: rem(12);
 	}
 
-	a:focus-visible > .kol-span-wc,
-	button:focus-visible > .kol-span-wc {
+	a:focus-visible > .kol-span,
+	button:focus-visible > .kol-span {
 		outline-offset: rem(-4);
 		outline-style: solid;
 		outline-width: rem(2);
 	}
 
-	a:active > .kol-span-wc,
-	button:active > .kol-span-wc,
-	a:hover > .kol-span-wc,
-	button:hover > .kol-span-wc {
+	a:active > .kol-span,
+	button:active > .kol-span,
+	a:hover > .kol-span,
+	button:hover > .kol-span {
 		box-shadow:
 			0 rem(2) rem(4) rgb(9 49 142 / 8%),
 			0 0 rem(10) rgb(9 49 142 / 4%),
@@ -49,84 +49,84 @@
 			0 rem(-4) rem(4) rgb(9 49 142 / 4%);
 	}
 
-	.primary a > .kol-span-wc,
-	.primary button > .kol-span-wc {
+	.primary a > .kol-span,
+	.primary button > .kol-span {
 		background-color: #0e47cb;
 		color: #fff;
 	}
 
-	.primary a:focus-visible > .kol-span-wc,
-	.primary button:focus-visible > .kol-span-wc {
+	.primary a:focus-visible > .kol-span,
+	.primary button:focus-visible > .kol-span {
 		outline-color: #fff;
 	}
 
-	.primary a:hover > .kol-span-wc,
-	.primary button:hover > .kol-span-wc {
+	.primary a:hover > .kol-span,
+	.primary button:hover > .kol-span {
 		background-color: #3e6cd5;
 	}
 
-	.secondary a > .kol-span-wc,
-	.secondary button > .kol-span-wc {
+	.secondary a > .kol-span,
+	.secondary button > .kol-span {
 		background-color: #fff;
 		border: rem(2) solid #0e47cb;
 		color: #0e47cb;
 		padding: calc(rem(12) - rem(2)) calc(rem(16) - rem(2));
 	}
 
-	.secondary a:focus-visible > .kol-span-wc,
-	.secondary button:focus-visible > .kol-span-wc {
+	.secondary a:focus-visible > .kol-span,
+	.secondary button:focus-visible > .kol-span {
 		box-shadow: inset 0 0 0 rem(4) #0e47cb;
 		outline-color: #fff;
 	}
 
-	.secondary a:hover > .kol-span-wc,
-	.secondary button:hover > .kol-span-wc {
+	.secondary a:hover > .kol-span,
+	.secondary button:hover > .kol-span {
 		border-color: #0e47cb;
 		color: #0e47cb;
 	}
 
-	.normal a > .kol-span-wc,
-	.normal button > .kol-span-wc {
+	.normal a > .kol-span,
+	.normal button > .kol-span {
 		background-color: #fc0;
 		color: #171a22;
 	}
 
-	.normal a:focus-visible > .kol-span-wc,
-	.normal button:focus-visible > .kol-span-wc {
+	.normal a:focus-visible > .kol-span,
+	.normal button:focus-visible > .kol-span {
 		outline-color: #000;
 	}
 
-	.normal a:hover > .kol-span-wc,
-	.normal button:hover > .kol-span-wc {
+	.normal a:hover > .kol-span,
+	.normal button:hover > .kol-span {
 		background-color: #fc0;
 		border-color: #fc0;
 	}
 
-	.danger a .kol-span-wc,
-	.danger button .kol-span-wc {
+	.danger a .kol-span,
+	.danger button .kol-span {
 		background-color: var(--color-red);
 		border-color: var(--color-red);
 		color: var(--color-white);
 	}
 
-	.danger a:hover .kol-span-wc,
-	.danger button:hover .kol-span-wc {
+	.danger a:hover .kol-span,
+	.danger button:hover .kol-span {
 		background-color: var(--color-red);
 		border-color: var(--color-red);
 	}
 
-	.ghost a > .kol-span-wc,
-	.ghost button > .kol-span-wc {
+	.ghost a > .kol-span,
+	.ghost button > .kol-span {
 		color: #0e47cb;
 	}
 
-	.ghost a:focus-visible > .kol-span-wc,
-	.ghost button:focus-visible > .kol-span-wc {
+	.ghost a:focus-visible > .kol-span,
+	.ghost button:focus-visible > .kol-span {
 		outline-color: #0e47cb;
 	}
 
-	.ghost a:hover > .kol-span-wc,
-	.ghost button:hover > .kol-span-wc {
+	.ghost a:hover > .kol-span,
+	.ghost button:hover > .kol-span {
 		color: #0e47cb;
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/nav.scss b/packages/themes/ecl/src/ecl-eu/components/nav.scss
index dcbfce6619..3ec84b4893 100644
--- a/packages/themes/ecl/src/ecl-eu/components/nav.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/nav.scss
@@ -22,7 +22,7 @@
 
 	.entry .kol-button-wc:first-child,
 	.entry .kol-link-wc,
-	.entry .kol-span-wc {
+	.entry .kol-span {
 		flex-grow: 1;
 	}
 
@@ -43,7 +43,7 @@
 		height: 100%;
 	}
 
-	.kol-span-wc {
+	.kol-span {
 		border-color: transparent;
 		border-style: solid;
 		border-width: rem(2);
@@ -66,12 +66,12 @@
 		text-decoration: none;
 	}
 
-	:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {
+	:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span {
 		border-color: var(--color-white);
 	}
 
-	:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,
-	:is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {
+	:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span,
+	:is(.kol-button-wc, .kol-link-wc):hover .kol-span {
 		text-decoration: underline;
 	}
 
diff --git a/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss b/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss
index d92e5470fd..9969e8283a 100644
--- a/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss
@@ -5,7 +5,7 @@
 		font-family: var(--font-family);
 	}
 
-	.kol-link-wc > a > .kol-span-wc {
+	.kol-link-wc > a > .kol-span {
 		border-radius: rem(4);
 		gap: rem(8);
 		line-height: 1;
diff --git a/packages/themes/ecl/src/ecl-eu/components/tabs.scss b/packages/themes/ecl/src/ecl-eu/components/tabs.scss
index d2f7d4d58c..e78e60f09c 100644
--- a/packages/themes/ecl/src/ecl-eu/components/tabs.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/tabs.scss
@@ -16,13 +16,13 @@
 		margin-bottom: rem(-1);
 	}
 
-	.tabs-button-group button .kol-span-wc {
+	.tabs-button-group button .kol-span {
 		padding: rem(4);
 		min-height: rem(44);
 		min-width: rem(44);
 	}
 
-	.tabs-button-group button.selected .kol-span-wc {
+	.tabs-button-group button.selected .kol-span {
 		border-color: var(--color-grey-25);
 		border-style: solid;
 		border-width: rem(1);
@@ -33,11 +33,11 @@
 		color: var(--color-blue);
 	}
 
-	.tabs-button-group button:hover:not(:disabled) .kol-span-wc {
+	.tabs-button-group button:hover:not(:disabled) .kol-span {
 		color: var(--color-blue-130);
 	}
 
-	.tabs-button-group button:focus .kol-span-wc {
+	.tabs-button-group button:focus .kol-span {
 		outline-color: var(--color-blue-130);
 		outline-style: solid;
 		outline-width: rem(2);
diff --git a/packages/themes/ecl/src/ecl-eu/global.scss b/packages/themes/ecl/src/ecl-eu/global.scss
index 0b998cffad..5c1afbcf09 100644
--- a/packages/themes/ecl/src/ecl-eu/global.scss
+++ b/packages/themes/ecl/src/ecl-eu/global.scss
@@ -147,8 +147,8 @@
 		font-weight: var(--font-weight);
 	}
 
-	.kol-span-wc,
-	.kol-span-wc > span {
+	.kol-span,
+	.kol-span__container {
 		gap: 0.5em;
 	}
 
diff --git a/packages/themes/itzbund/src/components/details.scss b/packages/themes/itzbund/src/components/details.scss
index 4ec0f754b5..3b5c023d8d 100644
--- a/packages/themes/itzbund/src/components/details.scss
+++ b/packages/themes/itzbund/src/components/details.scss
@@ -23,7 +23,7 @@
 				font-size: rem(19.2);
 			}
 
-			.kol-span-wc > span {
+			.kol-span__container {
 				display: flex;
 				text-align: left;
 				gap: 0;
diff --git a/packages/themes/itzbund/src/components/nav.scss b/packages/themes/itzbund/src/components/nav.scss
index ae81dd595f..22bdfad12f 100644
--- a/packages/themes/itzbund/src/components/nav.scss
+++ b/packages/themes/itzbund/src/components/nav.scss
@@ -101,7 +101,7 @@
 		position: absolute;
 	}
 
-	.kol-span-wc {
+	.kol-span {
 		justify-items: baseline;
 	}
 }
diff --git a/packages/themes/itzbund/src/components/skip-nav.scss b/packages/themes/itzbund/src/components/skip-nav.scss
index 2567def78d..2c5e1f9f02 100644
--- a/packages/themes/itzbund/src/components/skip-nav.scss
+++ b/packages/themes/itzbund/src/components/skip-nav.scss
@@ -1,7 +1,7 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	.kol-link-wc > a > .kol-span-wc {
+	.kol-link-wc > a > .kol-span {
 		border-radius: rem(32);
 		border-style: solid;
 		gap: rem(8);
diff --git a/packages/themes/itzbund/src/components/split-button.scss b/packages/themes/itzbund/src/components/split-button.scss
index 9c8a097168..2a5836c71f 100644
--- a/packages/themes/itzbund/src/components/split-button.scss
+++ b/packages/themes/itzbund/src/components/split-button.scss
@@ -22,21 +22,21 @@
 		height: 100%;
 	}
 
-	.secondary-button > button > .kol-span-wc {
+	.secondary-button > button > .kol-span {
 		border-top-right-radius: rem(32);
 		border-bottom-right-radius: rem(32);
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
 	}
 
-	.secondary-button > button > :active > .kol-span-wc {
+	.secondary-button > button > :active > .kol-span {
 		border-top-right-radius: rem(32);
 		border-bottom-right-radius: rem(32);
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
 	}
 
-	.secondary-button > button > :focus > .kol-span-wc {
+	.secondary-button > button > :focus > .kol-span {
 		border-top-right-radius: rem(32);
 		border-bottom-right-radius: rem(32);
 		border-top-left-radius: 0;
@@ -63,8 +63,8 @@
 		/* text-transform: uppercase; */
 	}
 
-	a > .kol-span-wc,
-	button > .kol-span-wc {
+	a > .kol-span,
+	button > .kol-span {
 		border-top-left-radius: rem(32);
 		border-bottom-left-radius: rem(32);
 		font-size: inherit;
diff --git a/packages/themes/itzbund/src/components/tabs.scss b/packages/themes/itzbund/src/components/tabs.scss
index b2e71de617..2832e38a40 100644
--- a/packages/themes/itzbund/src/components/tabs.scss
+++ b/packages/themes/itzbund/src/components/tabs.scss
@@ -52,7 +52,7 @@
 		border-bottom-color: var(--color-citrin);
 	}
 
-	button > .kol-span-wc span {
+	button > .kol-span span {
 		display: flex;
 		gap: 0.25em;
 		align-items: center;
diff --git a/packages/themes/itzbund/src/global.scss b/packages/themes/itzbund/src/global.scss
index 91a5bf8484..beffd992aa 100644
--- a/packages/themes/itzbund/src/global.scss
+++ b/packages/themes/itzbund/src/global.scss
@@ -62,8 +62,8 @@
 		transition: outline-offset 0.2s linear;
 	}
 
-	.kol-span-wc,
-	.kol-span-wc > span {
+	.kol-span,
+	.kol-span__container {
 		gap: 0.25em;
 	}
 
diff --git a/packages/themes/itzbund/src/mixins/link.scss b/packages/themes/itzbund/src/mixins/link.scss
index bd4c9ad97a..cf2e7ac855 100644
--- a/packages/themes/itzbund/src/mixins/link.scss
+++ b/packages/themes/itzbund/src/mixins/link.scss
@@ -31,8 +31,8 @@
 		color: var(--color-achat);
 	}
 
-	a > .kol-span-wc,
-	button > .kol-span-wc {
+	a > .kol-span,
+	button > .kol-span {
 		gap: 0.25em;
 	}
 

From 3f083bd06b1eeb1a467f84ae4e5476d24be1955b Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Thu, 5 Dec 2024 16:07:15 +0100
Subject: [PATCH 02/16] fixed css class

Refs: #7035
---
 packages/components/src/components/details/style.scss | 2 +-
 packages/components/src/components/link.scss          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/details/style.scss b/packages/components/src/components/details/style.scss
index 66e003b854..66911f2d8e 100644
--- a/packages/components/src/components/details/style.scss
+++ b/packages/components/src/components/details/style.scss
@@ -16,7 +16,7 @@
 				min-height: auto;
 
 				.kol-span {
-					.&__label {
+					&__label {
 						border-bottom-color: grey;
 						border-bottom-style: solid;
 					}
diff --git a/packages/components/src/components/link.scss b/packages/components/src/components/link.scss
index b6676c4981..e9b1f318dd 100644
--- a/packages/components/src/components/link.scss
+++ b/packages/components/src/components/link.scss
@@ -15,7 +15,7 @@
 		text-decoration-line: none;
 
 		.kol-span {
-			.&__label {
+			&__label {
 				text-decoration-line: underline;
 			}
 		}
@@ -24,7 +24,7 @@
 	a:is(:focus, :hover):not([aria-disabled]),
 	button:is(:focus, :hover):not([disabled]) {
 		.kol-span {
-			.&__label {
+			&__label {
 				text-decoration-thickness: 0.2em;
 			}
 		}

From 1aa930156ef8371233cdb2e639ccbef8becd805e Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Thu, 5 Dec 2024 17:06:28 +0100
Subject: [PATCH 03/16] changed kol-span-wc to kol-span

Refs: #7035
---
 packages/themes/ecl/src/ecl-ec/components/nav.scss | 12 ++++++------
 packages/themes/ecl/src/ecl-eu/components/nav.scss | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/themes/ecl/src/ecl-ec/components/nav.scss b/packages/themes/ecl/src/ecl-ec/components/nav.scss
index b03f54cc47..c13ac1a039 100644
--- a/packages/themes/ecl/src/ecl-ec/components/nav.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/nav.scss
@@ -20,9 +20,9 @@
 		display: flex;
 	}
 
-	.entry .kol-button-wc:first-child,
+	.entry .kol-button:first-child,
 	.entry .kol-link,
-	.entry .kol-span-wc {
+	.entry .kol-span {
 		flex-grow: 1;
 	}
 
@@ -43,7 +43,7 @@
 		height: 100%;
 	}
 
-	.kol-span-wc {
+	.kol-span {
 		border-color: transparent;
 		border-style: solid;
 		border-width: rem(2);
@@ -66,12 +66,12 @@
 		text-decoration: none;
 	}
 
-	:is(.kol-button-wc, .kol-link):focus-within .kol-span-wc {
+	:is(.kol-button, .kol-link):focus-within .kol-span {
 		border-color: var(--color-white);
 	}
 
-	:is(.kol-button-wc, .kol-link):focus-within .kol-span-wc,
-	:is(.kol-button-wc, .kol-link):hover .kol-span-wc {
+	:is(.kol-button, .kol-link):focus-within .kol-span,
+	:is(.kol-button, .kol-link):hover .kol-span {
 		text-decoration: underline;
 	}
 
diff --git a/packages/themes/ecl/src/ecl-eu/components/nav.scss b/packages/themes/ecl/src/ecl-eu/components/nav.scss
index b03f54cc47..c13ac1a039 100644
--- a/packages/themes/ecl/src/ecl-eu/components/nav.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/nav.scss
@@ -20,9 +20,9 @@
 		display: flex;
 	}
 
-	.entry .kol-button-wc:first-child,
+	.entry .kol-button:first-child,
 	.entry .kol-link,
-	.entry .kol-span-wc {
+	.entry .kol-span {
 		flex-grow: 1;
 	}
 
@@ -43,7 +43,7 @@
 		height: 100%;
 	}
 
-	.kol-span-wc {
+	.kol-span {
 		border-color: transparent;
 		border-style: solid;
 		border-width: rem(2);
@@ -66,12 +66,12 @@
 		text-decoration: none;
 	}
 
-	:is(.kol-button-wc, .kol-link):focus-within .kol-span-wc {
+	:is(.kol-button, .kol-link):focus-within .kol-span {
 		border-color: var(--color-white);
 	}
 
-	:is(.kol-button-wc, .kol-link):focus-within .kol-span-wc,
-	:is(.kol-button-wc, .kol-link):hover .kol-span-wc {
+	:is(.kol-button, .kol-link):focus-within .kol-span,
+	:is(.kol-button, .kol-link):hover .kol-span {
 		text-decoration: underline;
 	}
 

From ce613b3b9fc611b9ddea8b46ccb9dead84f62e1a Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Fri, 6 Dec 2024 08:50:50 +0100
Subject: [PATCH 04/16] fixed missing bem-class

Refs: #7035
---
 .../components/src/functional-components/Span/LabelHelper.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/functional-components/Span/LabelHelper.tsx b/packages/components/src/functional-components/Span/LabelHelper.tsx
index 334eba3de0..8e0f140743 100644
--- a/packages/components/src/functional-components/Span/LabelHelper.tsx
+++ b/packages/components/src/functional-components/Span/LabelHelper.tsx
@@ -15,7 +15,7 @@ const LabelHelper: FC<{ label: string; hideLabel?: boolean; badgeText?: string;
 		return null;
 	}
 
-	const defaultClasses = 'span-label';
+	const defaultClasses = 'kol-span__label';
 
 	if (allowMarkdown) {
 		return <span class={clsx(defaultClasses, 'md')} innerHTML={md(label)} />;

From eb55520b6dda7f9a82fc7179c873788df192b524 Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Fri, 6 Dec 2024 09:23:50 +0100
Subject: [PATCH 05/16] fixed missing bem-class

Refs: #7035
---
 packages/components/src/components/@shared/_kol-link-mixin.scss | 2 +-
 packages/components/src/components/input-checkbox/common.scss   | 2 +-
 packages/components/src/components/input-line.scss              | 2 +-
 packages/themes/default/src/components/button-link.scss         | 2 +-
 packages/themes/default/src/mixins/button.scss                  | 2 +-
 packages/themes/default/src/mixins/link.scss                    | 2 +-
 packages/themes/ecl/src/ecl-ec/mixins/button.scss               | 2 +-
 packages/themes/ecl/src/ecl-eu/mixins/button.scss               | 2 +-
 packages/themes/itzbund/src/components/button-link.scss         | 2 +-
 packages/themes/itzbund/src/components/details.scss             | 2 +-
 packages/themes/itzbund/src/mixins/button.scss                  | 2 +-
 11 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/components/@shared/_kol-link-mixin.scss b/packages/components/src/components/@shared/_kol-link-mixin.scss
index b1961000a8..ed2b8bd2ec 100644
--- a/packages/components/src/components/@shared/_kol-link-mixin.scss
+++ b/packages/components/src/components/@shared/_kol-link-mixin.scss
@@ -19,7 +19,7 @@
 			text-decoration-line: none;
 
 			&__text {
-				.span-label {
+				.kol-span__label {
 					text-decoration-line: underline;
 
 					@at-root #{$root}:is(:focus, :hover):not([aria-disabled], [disabled]) & {
diff --git a/packages/components/src/components/input-checkbox/common.scss b/packages/components/src/components/input-checkbox/common.scss
index 7817815f67..d5dfc31b9c 100644
--- a/packages/components/src/components/input-checkbox/common.scss
+++ b/packages/components/src/components/input-checkbox/common.scss
@@ -80,7 +80,7 @@
 		cursor: not-allowed;
 	}
 
-	.kol-input.required .tooltip-content .span-label::after {
+	.kol-input.required .tooltip-content .kol-span__label::after {
 		content: '*';
 	}
 }
diff --git a/packages/components/src/components/input-line.scss b/packages/components/src/components/input-line.scss
index 77bfcd7d98..83456a0974 100644
--- a/packages/components/src/components/input-line.scss
+++ b/packages/components/src/components/input-line.scss
@@ -32,7 +32,7 @@
 		place-items: center;
 	}
 
-	.kol-input.required .input-tooltip .span-label::after {
+	.kol-input.required .input-tooltip .kol-span__label::after {
 		content: '*';
 	}
 }
diff --git a/packages/themes/default/src/components/button-link.scss b/packages/themes/default/src/components/button-link.scss
index 13d2141e6a..1328d22302 100644
--- a/packages/themes/default/src/components/button-link.scss
+++ b/packages/themes/default/src/components/button-link.scss
@@ -28,7 +28,7 @@
 				border-radius: var(--text-border-radius);
 				outline: var(--text-outline);
 			}
-			.span-label {
+			.kol-span__label {
 				@at-root #{$root}:is(:focus, :hover):not([aria-disabled], [disabled]) & {
 					text-decoration-thickness: 0.25em;
 				}
diff --git a/packages/themes/default/src/mixins/button.scss b/packages/themes/default/src/mixins/button.scss
index eba618f8af..d5479e61a1 100644
--- a/packages/themes/default/src/mixins/button.scss
+++ b/packages/themes/default/src/mixins/button.scss
@@ -77,7 +77,7 @@
 				padding: rem(12.8);
 				width: unset;
 
-				.span-label {
+				.kol-span__label {
 					display: none;
 				}
 			}
diff --git a/packages/themes/default/src/mixins/link.scss b/packages/themes/default/src/mixins/link.scss
index c0de63f1b1..6891a348e7 100644
--- a/packages/themes/default/src/mixins/link.scss
+++ b/packages/themes/default/src/mixins/link.scss
@@ -22,7 +22,7 @@
 				outline: var(--border-width) solid;
 			}
 
-			.span-label {
+			.kol-span__label {
 				@at-root #{$root}:is(:focus, :hover):not([aria-disabled], [disabled]) & {
 					text-decoration-thickness: 0.25em;
 				}
diff --git a/packages/themes/ecl/src/ecl-ec/mixins/button.scss b/packages/themes/ecl/src/ecl-ec/mixins/button.scss
index f04e98a2d5..64a6613f6d 100644
--- a/packages/themes/ecl/src/ecl-ec/mixins/button.scss
+++ b/packages/themes/ecl/src/ecl-ec/mixins/button.scss
@@ -104,7 +104,7 @@
 			line-height: 1.2;
 
 			@at-root #{$root}--hide-label & {
-				.span-label {
+				.kol-span__label {
 					display: none;
 				}
 			}
diff --git a/packages/themes/ecl/src/ecl-eu/mixins/button.scss b/packages/themes/ecl/src/ecl-eu/mixins/button.scss
index 6c63aa3540..90b95f354b 100644
--- a/packages/themes/ecl/src/ecl-eu/mixins/button.scss
+++ b/packages/themes/ecl/src/ecl-eu/mixins/button.scss
@@ -107,7 +107,7 @@
 			}
 
 			@at-root #{$root}--hide-label & {
-				.span-label {
+				.kol-span__label {
 					display: none;
 				}
 			}
diff --git a/packages/themes/itzbund/src/components/button-link.scss b/packages/themes/itzbund/src/components/button-link.scss
index 5ea4cd9bf9..25a3bc837b 100644
--- a/packages/themes/itzbund/src/components/button-link.scss
+++ b/packages/themes/itzbund/src/components/button-link.scss
@@ -95,7 +95,7 @@
 			@at-root #{$root}--hide-label & {
 				padding: 0 rem(8);
 
-				.span-label {
+				.kol-span__label {
 					display: none;
 				}
 			}
diff --git a/packages/themes/itzbund/src/components/details.scss b/packages/themes/itzbund/src/components/details.scss
index 3b5c023d8d..d7cf84b214 100644
--- a/packages/themes/itzbund/src/components/details.scss
+++ b/packages/themes/itzbund/src/components/details.scss
@@ -15,7 +15,7 @@
 				cursor: pointer;
 			}
 
-			button .span-label {
+			button .kol-span__label {
 				border-bottom-color: #000;
 			}
 
diff --git a/packages/themes/itzbund/src/mixins/button.scss b/packages/themes/itzbund/src/mixins/button.scss
index a3d36f11a5..4d523a14f4 100644
--- a/packages/themes/itzbund/src/mixins/button.scss
+++ b/packages/themes/itzbund/src/mixins/button.scss
@@ -77,7 +77,7 @@
 			@at-root #{$root}--hide-label & {
 				padding: 0 rem(8);
 
-				.span-label {
+				.kol-span__label {
 					display: none;
 				}
 			}

From 6f2a67324678bd61be1aa4fecd72ea470516e613 Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Fri, 6 Dec 2024 10:11:21 +0100
Subject: [PATCH 06/16] bem refactor heading

Refs: #7035
---
 .../test/__snapshots__/snapshot.spec.tsx.snap |  22 ++--
 .../test/__snapshots__/snapshot.spec.tsx.snap | 120 +++++++++---------
 .../test/__snapshots__/snapshot.spec.tsx.snap |  30 ++---
 .../test/__snapshots__/snapshot.spec.tsx.snap |  60 ++++-----
 .../test/__snapshots__/snapshot.spec.tsx.snap |  44 +++----
 .../test/__snapshots__/snapshot.spec.tsx.snap |  24 ++--
 .../src/components/heading/shadow.tsx         |  12 +-
 .../src/components/heading/style.scss         |   2 +-
 .../test/__snapshots__/snapshot.spec.tsx.snap |  60 ++++-----
 .../test/__snapshots__/snapshot.spec.tsx.snap |  40 +++---
 .../test/__snapshots__/snapshot.spec.tsx.snap |  30 ++---
 .../functional-components/Heading/Heading.tsx |  12 +-
 .../test/__snapshots__/snapshot.test.tsx.snap |  12 +-
 .../test/__snapshots__/snapshot.test.tsx.snap |  28 ++--
 .../__snapshots__/snapshot.test.tsx.snap      |   2 +-
 .../themes/default/src/components/card.scss   |   2 +-
 .../default/src/components/heading.scss       |  48 +++----
 packages/themes/default/src/global.scss       |   2 +-
 .../ecl/src/ecl-ec/components/card.scss       |   2 +-
 .../ecl/src/ecl-ec/components/heading.scss    |  36 +++---
 .../ecl/src/ecl-eu/components/card.scss       |   2 +-
 .../ecl/src/ecl-eu/components/heading.scss    |  64 +++++-----
 .../itzbund/src/components/heading.scss       |  54 ++++----
 23 files changed, 355 insertions(+), 353 deletions(-)

diff --git a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
index 3b870dabd3..7979aad138 100644
--- a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -23,7 +23,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible disabled kol-accordion" id="nonce">
-      <h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -42,7 +42,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 <kol-accordion _open="">
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion open" id="nonce">
-      <h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -61,7 +61,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 <kol-accordion _open="">
   <template shadowrootmode="open">
     <div class="collapsible disabled kol-accordion open" id="nonce">
-      <h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -80,7 +80,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -99,7 +99,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=2 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h2 class="collapsible__heading headline headline-h2 kol-accordion__heading kol-heading-wc">
+      <h2 class="collapsible__heading kol-accordion__heading kol-heading--h2 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h2>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -118,7 +118,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=3 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h3 class="collapsible__heading headline headline-h3 kol-accordion__heading kol-heading-wc">
+      <h3 class="collapsible__heading kol-accordion__heading kol-heading--h3 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h3>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -137,7 +137,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=4 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h4 class="collapsible__heading headline headline-h4 kol-accordion__heading kol-heading-wc">
+      <h4 class="collapsible__heading kol-accordion__heading kol-heading--h4 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h4>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -156,7 +156,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=5 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h5 class="collapsible__heading headline headline-h5 kol-accordion__heading kol-heading-wc">
+      <h5 class="collapsible__heading kol-accordion__heading kol-heading--h5 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h5>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -175,7 +175,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=6 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h6 class="collapsible__heading headline headline-h6 kol-accordion__heading kol-heading-wc">
+      <h6 class="collapsible__heading kol-accordion__heading kol-heading--h6 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h6>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -194,7 +194,7 @@ exports[`kol-accordion should render with _label="Überschrift" 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
diff --git a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
index 0c3da10942..51b9607be8 100644
--- a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -32,7 +32,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -55,7 +55,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -78,7 +78,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -101,7 +101,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -124,7 +124,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -147,7 +147,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -170,7 +170,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -193,7 +193,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -216,7 +216,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -239,7 +239,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -262,7 +262,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -285,7 +285,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -308,7 +308,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -331,7 +331,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -354,7 +354,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -377,7 +377,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -400,7 +400,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -423,7 +423,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -446,7 +446,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -469,7 +469,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -492,7 +492,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -515,7 +515,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -538,7 +538,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -561,7 +561,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -584,7 +584,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -607,7 +607,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -630,7 +630,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -653,7 +653,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -676,7 +676,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -699,7 +699,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -722,7 +722,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -745,7 +745,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -768,7 +768,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -791,7 +791,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="headline headline-h1 kol-alert__heading kol-heading-wc">
+            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -814,7 +814,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -837,7 +837,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -860,7 +860,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -883,7 +883,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -906,7 +906,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="headline headline-h2 kol-alert__heading kol-heading-wc">
+            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -929,7 +929,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -952,7 +952,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -975,7 +975,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -998,7 +998,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -1021,7 +1021,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="headline headline-h3 kol-alert__heading kol-heading-wc">
+            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -1044,7 +1044,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1067,7 +1067,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1090,7 +1090,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1113,7 +1113,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1136,7 +1136,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="headline headline-h4 kol-alert__heading kol-heading-wc">
+            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1159,7 +1159,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1182,7 +1182,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1205,7 +1205,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1228,7 +1228,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1251,7 +1251,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="headline headline-h5 kol-alert__heading kol-heading-wc">
+            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1274,7 +1274,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1297,7 +1297,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1320,7 +1320,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1343,7 +1343,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1366,7 +1366,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="headline headline-h6 kol-alert__heading kol-heading-wc">
+            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
diff --git a/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap
index 09efac3170..a5a2839311 100644
--- a/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,15 +4,15 @@ exports[`kol-badge should render with _label="**Te**xt" 1`] = `
 <kol-badge>
   <template shadowrootmode="open">
     <span class="kol-badge" style="background-color: #000; color: #959595;">
-      <span class="kol-badge__label kol-span-wc">
+      <span class="kol-badge__label kol-span">
         <span class="kol-span__container">
-          <span class="md span-label">
+          <span class="kol-span__label md">
             <strong>
               Te
             </strong>
             xt
           </span>
-          <span aria-hidden="true" class="span-label" hidden=""></span>
+          <span aria-hidden="true" class="kol-span__label" hidden=""></span>
         </span>
       </span>
     </span>
@@ -24,12 +24,12 @@ exports[`kol-badge should render with _label="Text" _color="#000000" 1`] = `
 <kol-badge>
   <template shadowrootmode="open">
     <span class="kol-badge" style="background-color: #000; color: #959595;">
-      <span class="kol-badge__label kol-span-wc">
+      <span class="kol-badge__label kol-span">
         <span class="kol-span__container">
-          <span class="md span-label">
+          <span class="kol-span__label md">
             Text
           </span>
-          <span aria-hidden="true" class="span-label" hidden=""></span>
+          <span aria-hidden="true" class="kol-span__label" hidden=""></span>
         </span>
       </span>
     </span>
@@ -41,13 +41,13 @@ exports[`kol-badge should render with _label="Text" _icons="codicon codicon-home
 <kol-badge>
   <template shadowrootmode="open">
     <span class="kol-badge" style="background-color: #000; color: #959595;">
-      <span class="kol-badge__label kol-span-wc">
+      <span class="kol-badge__label kol-span">
         <span class="kol-span__container">
           <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-          <span class="md span-label">
+          <span class="kol-span__label md">
             Text
           </span>
-          <span aria-hidden="true" class="span-label" hidden=""></span>
+          <span aria-hidden="true" class="kol-span__label" hidden=""></span>
         </span>
       </span>
     </span>
@@ -59,13 +59,13 @@ exports[`kol-badge should render with _label="Text" _icons="codicon codicon-home
 <kol-badge>
   <template shadowrootmode="open">
     <span class="kol-badge" style="background-color: #000; color: #959595;">
-      <span class="kol-badge__label kol-span-wc">
+      <span class="kol-badge__label kol-span">
         <span class="kol-span__container">
           <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-          <span class="md span-label">
+          <span class="kol-span__label md">
             Text
           </span>
-          <span aria-hidden="true" class="span-label" hidden=""></span>
+          <span aria-hidden="true" class="kol-span__label" hidden=""></span>
         </span>
       </span>
     </span>
@@ -77,12 +77,12 @@ exports[`kol-badge should render with _label="Text" 1`] = `
 <kol-badge>
   <template shadowrootmode="open">
     <span class="kol-badge" style="background-color: #000; color: #959595;">
-      <span class="kol-badge__label kol-span-wc">
+      <span class="kol-badge__label kol-span">
         <span class="kol-span__container">
-          <span class="md span-label">
+          <span class="kol-span__label md">
             Text
           </span>
-          <span aria-hidden="true" class="span-label" hidden=""></span>
+          <span aria-hidden="true" class="kol-span__label" hidden=""></span>
         </span>
       </span>
     </span>
diff --git a/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap
index 3ccefcbf4d..f901a73ef7 100644
--- a/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap
@@ -6,12 +6,12 @@ exports[`kol-button should render with _label="Label" _ariaDescription="Aria Des
     <kol-button-wc>
       <!---->
       <button aria-describedby="nonce" class="kol-button kol-button--normal" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -32,12 +32,12 @@ exports[`kol-button should render with _label="Label" _disabled=false 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--normal" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -55,12 +55,12 @@ exports[`kol-button should render with _label="Label" _disabled=true 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--disabled kol-button--normal" disabled="" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -78,12 +78,12 @@ exports[`kol-button should render with _label="Label" _value="Hello" 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--normal" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -101,12 +101,12 @@ exports[`kol-button should render with _label="Label" _variant="danger" 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--danger" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -124,12 +124,12 @@ exports[`kol-button should render with _label="Label" _variant="ghost" 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--ghost" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -147,12 +147,12 @@ exports[`kol-button should render with _label="Label" _variant="normal" 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--normal" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -170,12 +170,12 @@ exports[`kol-button should render with _label="Label" _variant="primary" 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--primary" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -193,12 +193,12 @@ exports[`kol-button should render with _label="Label" _variant="secondary" 1`] =
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--secondary" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -216,12 +216,12 @@ exports[`kol-button should render with _label="Label" 1`] = `
     <kol-button-wc>
       <!---->
       <button class="kol-button kol-button--normal" type="button">
-        <span class="kol-button__text kol-span-wc">
+        <span class="kol-button__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
diff --git a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
index 17e685844c..c493106fc5 100644
--- a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="headline headline-strong kol-heading-wc">
+        <strong class="kol-heading--strong kol-heading__headline">
           Überschrift
         </strong>
       </div>
@@ -22,7 +22,7 @@ exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="headline headline-strong kol-heading-wc">
+        <strong class="kol-heading--strong kol-heading__headline">
           Überschrift
         </strong>
       </div>
@@ -40,7 +40,7 @@ exports[`kol-card should render with _label="Überschrift" _level=0 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="headline headline-strong kol-heading-wc">
+        <strong class="kol-heading--strong kol-heading__headline">
           Überschrift
         </strong>
       </div>
@@ -57,7 +57,7 @@ exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="headline headline-h1 kol-heading-wc">
+        <h1 class="kol-heading--h1 kol-heading__headline">
           Überschrift
         </h1>
       </div>
@@ -74,7 +74,7 @@ exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="headline headline-h1 kol-heading-wc">
+        <h1 class="kol-heading--h1 kol-heading__headline">
           Überschrift
         </h1>
       </div>
@@ -92,7 +92,7 @@ exports[`kol-card should render with _label="Überschrift" _level=1 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="headline headline-h1 kol-heading-wc">
+        <h1 class="kol-heading--h1 kol-heading__headline">
           Überschrift
         </h1>
       </div>
@@ -109,7 +109,7 @@ exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="headline headline-h2 kol-heading-wc">
+        <h2 class="kol-heading--h2 kol-heading__headline">
           Überschrift
         </h2>
       </div>
@@ -126,7 +126,7 @@ exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="headline headline-h2 kol-heading-wc">
+        <h2 class="kol-heading--h2 kol-heading__headline">
           Überschrift
         </h2>
       </div>
@@ -144,7 +144,7 @@ exports[`kol-card should render with _label="Überschrift" _level=2 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="headline headline-h2 kol-heading-wc">
+        <h2 class="kol-heading--h2 kol-heading__headline">
           Überschrift
         </h2>
       </div>
@@ -161,7 +161,7 @@ exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="headline headline-h3 kol-heading-wc">
+        <h3 class="kol-heading--h3 kol-heading__headline">
           Überschrift
         </h3>
       </div>
@@ -178,7 +178,7 @@ exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="headline headline-h3 kol-heading-wc">
+        <h3 class="kol-heading--h3 kol-heading__headline">
           Überschrift
         </h3>
       </div>
@@ -196,7 +196,7 @@ exports[`kol-card should render with _label="Überschrift" _level=3 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="headline headline-h3 kol-heading-wc">
+        <h3 class="kol-heading--h3 kol-heading__headline">
           Überschrift
         </h3>
       </div>
@@ -213,7 +213,7 @@ exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="headline headline-h4 kol-heading-wc">
+        <h4 class="kol-heading--h4 kol-heading__headline">
           Überschrift
         </h4>
       </div>
@@ -230,7 +230,7 @@ exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="headline headline-h4 kol-heading-wc">
+        <h4 class="kol-heading--h4 kol-heading__headline">
           Überschrift
         </h4>
       </div>
@@ -248,7 +248,7 @@ exports[`kol-card should render with _label="Überschrift" _level=4 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="headline headline-h4 kol-heading-wc">
+        <h4 class="kol-heading--h4 kol-heading__headline">
           Überschrift
         </h4>
       </div>
@@ -265,7 +265,7 @@ exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="headline headline-h5 kol-heading-wc">
+        <h5 class="kol-heading--h5 kol-heading__headline">
           Überschrift
         </h5>
       </div>
@@ -282,7 +282,7 @@ exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="headline headline-h5 kol-heading-wc">
+        <h5 class="kol-heading--h5 kol-heading__headline">
           Überschrift
         </h5>
       </div>
@@ -300,7 +300,7 @@ exports[`kol-card should render with _label="Überschrift" _level=5 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="headline headline-h5 kol-heading-wc">
+        <h5 class="kol-heading--h5 kol-heading__headline">
           Überschrift
         </h5>
       </div>
@@ -317,7 +317,7 @@ exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="headline headline-h6 kol-heading-wc">
+        <h6 class="kol-heading--h6 kol-heading__headline">
           Überschrift
         </h6>
       </div>
@@ -334,7 +334,7 @@ exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="headline headline-h6 kol-heading-wc">
+        <h6 class="kol-heading--h6 kol-heading__headline">
           Überschrift
         </h6>
       </div>
@@ -352,7 +352,7 @@ exports[`kol-card should render with _label="Überschrift" _level=6 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="headline headline-h6 kol-heading-wc">
+        <h6 class="kol-heading--h6 kol-heading__headline">
           Überschrift
         </h6>
       </div>
@@ -369,7 +369,7 @@ exports[`kol-card should render with _label="Überschrift" 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="headline headline-h1 kol-heading-wc">
+        <h1 class="kol-heading--h1 kol-heading__headline">
           Überschrift
         </h1>
       </div>
diff --git a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
index eb5e5a20b7..84f50f70e6 100644
--- a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=false
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
+      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -23,7 +23,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=false
 <kol-details _open="" class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details open" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
+      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -42,7 +42,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=true
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details disabled" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
+      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -61,7 +61,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=true
 <kol-details _open="" class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details disabled open" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
+      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -80,7 +80,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=0 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
+      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -99,7 +99,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=1 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
+      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -118,7 +118,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=2 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
+      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -137,7 +137,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=3 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
+      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -156,7 +156,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=4 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
+      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -175,7 +175,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=5 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
+      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -194,7 +194,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=6 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
+      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -213,7 +213,7 @@ exports[`kol-details should render with _label="Zusammenfassung" 1`] = `
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading headline headline-h1 kol-heading-wc">
+      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
diff --git a/packages/components/src/components/heading/shadow.tsx b/packages/components/src/components/heading/shadow.tsx
index b4816804fe..63d8636965 100644
--- a/packages/components/src/components/heading/shadow.tsx
+++ b/packages/components/src/components/heading/shadow.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, h, Prop, State, Watch } from '@stencil/core';
 import type { JSX } from '@stencil/core';
 import type { HeadingAPI, HeadingLevel, HeadingStates, HeadingVariantPropType, LabelWithExpertSlotPropType } from '../../schema';
 import { validateHeadingVariant, validateLabelWithExpertSlot, watchString } from '../../schema';
@@ -73,12 +73,10 @@ export class KolHeading implements HeadingAPI {
 		const { _secondaryHeadline, _label, _level, _variant } = this.state;
 
 		return (
-			<Host class="kol-heading">
-				<KolHeadingFc secondaryHeadline={_secondaryHeadline} level={_level} variant={_variant}>
-					{_label}
-					<slot name="expert" slot="expert" />
-				</KolHeadingFc>
-			</Host>
+			<KolHeadingFc class="kol-heading" secondaryHeadline={_secondaryHeadline} level={_level} variant={_variant}>
+				{_label}
+				<slot name="expert" slot="expert" />
+			</KolHeadingFc>
 		);
 	}
 }
diff --git a/packages/components/src/components/heading/style.scss b/packages/components/src/components/heading/style.scss
index 728527017d..6136bf8c7b 100644
--- a/packages/components/src/components/heading/style.scss
+++ b/packages/components/src/components/heading/style.scss
@@ -2,7 +2,7 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
+	.kol-heading {
 		font-size: rem(16);
 	}
 }
diff --git a/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
index 2b0dac01e6..70a875a94d 100644
--- a/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-heading should render with _label="Headline" _level=0 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <strong class="headline headline-strong kol-heading-wc">
+    <strong class="kol-heading kol-heading--strong kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </strong>
@@ -12,9 +12,9 @@ exports[`kol-heading should render with _label="Headline" _level=0 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _level=1 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h1 kol-heading-wc">
+    <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -23,9 +23,9 @@ exports[`kol-heading should render with _label="Headline" _level=1 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _level=2 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h2 class="headline headline-h2 kol-heading-wc">
+    <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h2>
@@ -34,9 +34,9 @@ exports[`kol-heading should render with _label="Headline" _level=2 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _level=3 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h3 class="headline headline-h3 kol-heading-wc">
+    <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h3>
@@ -45,9 +45,9 @@ exports[`kol-heading should render with _label="Headline" _level=3 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _level=4 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h4 class="headline headline-h4 kol-heading-wc">
+    <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h4>
@@ -56,9 +56,9 @@ exports[`kol-heading should render with _label="Headline" _level=4 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _level=5 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h5 class="headline headline-h5 kol-heading-wc">
+    <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h5>
@@ -67,9 +67,9 @@ exports[`kol-heading should render with _label="Headline" _level=5 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _level=6 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h6 class="headline headline-h6 kol-heading-wc">
+    <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h6>
@@ -78,9 +78,9 @@ exports[`kol-heading should render with _label="Headline" _level=6 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _variant="h1" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h1 kol-heading-wc">
+    <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -89,9 +89,9 @@ exports[`kol-heading should render with _label="Headline" _variant="h1" 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _variant="h2" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h2 kol-heading-wc">
+    <h1 class="kol-heading kol-heading--h2 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -100,9 +100,9 @@ exports[`kol-heading should render with _label="Headline" _variant="h2" 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _variant="h3" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h3 kol-heading-wc">
+    <h1 class="kol-heading kol-heading--h3 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -111,9 +111,9 @@ exports[`kol-heading should render with _label="Headline" _variant="h3" 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _variant="h4" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h4 kol-heading-wc">
+    <h1 class="kol-heading kol-heading--h4 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -122,9 +122,9 @@ exports[`kol-heading should render with _label="Headline" _variant="h4" 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _variant="h5" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h5 kol-heading-wc">
+    <h1 class="kol-heading kol-heading--h5 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -133,9 +133,9 @@ exports[`kol-heading should render with _label="Headline" _variant="h5" 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _variant="h6" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h6 kol-heading-wc">
+    <h1 class="kol-heading kol-heading--h6 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -144,9 +144,9 @@ exports[`kol-heading should render with _label="Headline" _variant="h6" 1`] = `
 `;
 
 exports[`kol-heading should render with _label="Headline" _variant="strong" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-strong kol-heading-wc">
+    <h1 class="kol-heading kol-heading--strong kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -155,9 +155,9 @@ exports[`kol-heading should render with _label="Headline" _variant="strong" 1`]
 `;
 
 exports[`kol-heading should render with _label="Headline" 1`] = `
-<kol-heading class="kol-heading">
+<kol-heading>
   <template shadowrootmode="open">
-    <h1 class="headline headline-h1 kol-heading-wc">
+    <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
diff --git a/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap
index ececb45849..97fdb52794 100644
--- a/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap
@@ -6,13 +6,13 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
     <kol-link-wc>
       <!---->
       <a class="kol-link kol-link--external-link" href="https://example.com" rel="noopener" target="self">
-        <span class="kol-link__text kol-span-wc">
+        <span class="kol-link__text kol-span">
           <span class="kol-span__container">
             <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -31,13 +31,13 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
     <kol-link-wc>
       <!---->
       <a class="kol-link kol-link--external-link" href="https://example.com" rel="noopener" target="self">
-        <span class="kol-link__text kol-span-wc">
+        <span class="kol-link__text kol-span">
           <span class="kol-span__container">
             <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -56,13 +56,13 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
     <kol-link-wc>
       <!---->
       <a class="kol-link kol-link--external-link" href="https://example.com" rel="noopener" target="self">
-        <span class="kol-link__text kol-span-wc">
+        <span class="kol-link__text kol-span">
           <span class="kol-span__container">
             <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -81,10 +81,10 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
     <kol-link-wc>
       <!---->
       <a aria-label="Label (kol-open-link-in-tab)" class="kol-link kol-link--external-link kol-link--hide-label" href="https://example.com" rel="noopener" target="self">
-        <span class="hide-label kol-link__text kol-span-wc">
+        <span class="hide-label kol-link__text kol-span">
           <span class="kol-span__container">
             <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -103,13 +103,13 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
     <kol-link-wc>
       <!---->
       <a class="kol-link kol-link--external-link" href="https://example.com" rel="noopener" target="self">
-        <span class="kol-link__text kol-span-wc">
+        <span class="kol-link__text kol-span">
           <span class="kol-span__container">
             <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -128,13 +128,13 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
     <kol-link-wc>
       <!---->
       <a class="kol-link kol-link--external-link" href="https://example.com" rel="noopener" target="self">
-        <span class="kol-link__text kol-span-wc">
+        <span class="kol-link__text kol-span">
           <span class="kol-span__container">
             <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
@@ -153,12 +153,12 @@ exports[`kol-link should render with _label="Label" _href="" _download="download
     <kol-link-wc>
       <!---->
       <a class="kol-link kol-link--external-link" download="download-file.zip" href="javascript:void(0);" rel="noopener" target="blank">
-        <span class="kol-link__text kol-span-wc">
+        <span class="kol-link__text kol-span">
           <span class="kol-span__container">
-            <span class="span-label">
+            <span class="kol-span__label">
               Label
             </span>
-            <span aria-hidden="true" class="span-label" hidden="">
+            <span aria-hidden="true" class="kol-span__label" hidden="">
               <slot name="expert" slot="expert"></slot>
             </span>
           </span>
diff --git a/packages/components/src/components/tooltip/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/tooltip/test/__snapshots__/snapshot.spec.tsx.snap
index 0912738424..10dfc5b1d1 100644
--- a/packages/components/src/components/tooltip/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/tooltip/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,12 +4,12 @@ exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="botto
 <kol-tooltip-wc class="kol-tooltip-wc">
   <div class="tooltip-floating">
     <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span-wc tooltip-area tooltip-content" id="id">
+    <span class="kol-span tooltip-area tooltip-content" id="id">
       <span class="kol-span__container">
-        <span class="span-label">
+        <span class="kol-span__label">
           Label
         </span>
-        <span aria-hidden="true" class="span-label" hidden=""></span>
+        <span aria-hidden="true" class="kol-span__label" hidden=""></span>
       </span>
     </span>
   </div>
@@ -20,12 +20,12 @@ exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="left"
 <kol-tooltip-wc class="kol-tooltip-wc">
   <div class="tooltip-floating">
     <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span-wc tooltip-area tooltip-content" id="id">
+    <span class="kol-span tooltip-area tooltip-content" id="id">
       <span class="kol-span__container">
-        <span class="span-label">
+        <span class="kol-span__label">
           Label
         </span>
-        <span aria-hidden="true" class="span-label" hidden=""></span>
+        <span aria-hidden="true" class="kol-span__label" hidden=""></span>
       </span>
     </span>
   </div>
@@ -36,12 +36,12 @@ exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="right
 <kol-tooltip-wc class="kol-tooltip-wc">
   <div class="tooltip-floating">
     <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span-wc tooltip-area tooltip-content" id="id">
+    <span class="kol-span tooltip-area tooltip-content" id="id">
       <span class="kol-span__container">
-        <span class="span-label">
+        <span class="kol-span__label">
           Label
         </span>
-        <span aria-hidden="true" class="span-label" hidden=""></span>
+        <span aria-hidden="true" class="kol-span__label" hidden=""></span>
       </span>
     </span>
   </div>
@@ -52,12 +52,12 @@ exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="top"
 <kol-tooltip-wc class="kol-tooltip-wc">
   <div class="tooltip-floating">
     <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span-wc tooltip-area tooltip-content" id="id">
+    <span class="kol-span tooltip-area tooltip-content" id="id">
       <span class="kol-span__container">
-        <span class="span-label">
+        <span class="kol-span__label">
           Label
         </span>
-        <span aria-hidden="true" class="span-label" hidden=""></span>
+        <span aria-hidden="true" class="kol-span__label" hidden=""></span>
       </span>
     </span>
   </div>
@@ -68,12 +68,12 @@ exports[`kol-tooltip-wc should render with _id="id" _label="Label" 1`] = `
 <kol-tooltip-wc class="kol-tooltip-wc">
   <div class="tooltip-floating">
     <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span-wc tooltip-area tooltip-content" id="id">
+    <span class="kol-span tooltip-area tooltip-content" id="id">
       <span class="kol-span__container">
-        <span class="span-label">
+        <span class="kol-span__label">
           Label
         </span>
-        <span aria-hidden="true" class="span-label" hidden=""></span>
+        <span aria-hidden="true" class="kol-span__label" hidden=""></span>
       </span>
     </span>
   </div>
diff --git a/packages/components/src/functional-components/Heading/Heading.tsx b/packages/components/src/functional-components/Heading/Heading.tsx
index 29c142719a..eedb424d43 100644
--- a/packages/components/src/functional-components/Heading/Heading.tsx
+++ b/packages/components/src/functional-components/Heading/Heading.tsx
@@ -72,7 +72,7 @@ const KolHeadlineFc: FC<HeadlineProps> = ({ class: classNames, level = MIN_HEADI
 	const finalVariant = variant || HeadlineTag;
 
 	return (
-		<HeadlineTag class={clsx('headline', `headline-${finalVariant}`, classNames)} {...other}>
+		<HeadlineTag class={clsx('kol-heading__headline', `kol-heading--${finalVariant}`, classNames)} {...other}>
 			{children}
 		</HeadlineTag>
 	);
@@ -88,7 +88,7 @@ const KolSecondaryHeadlineFc: FC<SecondaryHeadlineProps> = ({ class: classNames,
 	const HeadlineTag = getSubHeadlineTag(level + 1);
 
 	return (
-		<HeadlineTag class={clsx('secondary-headline', classNames)} {...other}>
+		<HeadlineTag class={clsx('kol-heading__secondary-headline', classNames)} {...other}>
 			{children}
 		</HeadlineTag>
 	);
@@ -104,10 +104,6 @@ const KolHeadingFc: FC<HeadingProps> = (
 	{ secondaryHeadline, level = MIN_HEADING_LEVEL, class: classNames, HeadingGroupProps = {}, SecondaryHeadlineProps = {}, ...other },
 	children,
 ) => {
-	// The 'kol-heading-wc' class is retained for backward compatibility.
-	// It must remain here until the SCSS/themes are updated accordingly.
-	const deprecatedClassName = 'kol-heading-wc';
-
 	const headlineProps: HeadlineProps = {
 		level,
 		...other,
@@ -115,7 +111,7 @@ const KolHeadingFc: FC<HeadingProps> = (
 
 	if (!secondaryHeadline) {
 		return (
-			<KolHeadlineFc class={clsx(deprecatedClassName, classNames)} {...headlineProps}>
+			<KolHeadlineFc class={clsx(classNames)} {...headlineProps}>
 				{children}
 			</KolHeadlineFc>
 		);
@@ -123,7 +119,7 @@ const KolHeadingFc: FC<HeadingProps> = (
 
 	const { class: groupClassNames, ...groupOthers } = HeadingGroupProps;
 	const headlineGroupProps: HGroupProps = {
-		class: clsx(deprecatedClassName, groupClassNames),
+		class: clsx(groupClassNames),
 		...groupOthers,
 	};
 
diff --git a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
index a8d70495d9..b51af11a6a 100644
--- a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
@@ -1,30 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KolHeadingFc should apply custom class names 1`] = `
-<h1 class="custom-class headline headline-h1 kol-heading-wc">
+<h1 class="custom-class kol-heading--h1 kol-heading__headline">
   Custom Class Heading
 </h1>
 `;
 
 exports[`KolHeadingFc should render with a secondary headline 1`] = `
-<hgroup class="kol-heading-wc">
-  <h1 class="headline headline-h1">
+<hgroup>
+  <h1 class="kol-heading--h1 kol-heading__headline">
     Main Heading
   </h1>
-  <h2 class="secondary-headline">
+  <h2 class="kol-heading__secondary-headline">
     Secondary Headline
   </h2>
 </hgroup>
 `;
 
 exports[`KolHeadingFc should render with a specific level 1`] = `
-<h3 class="headline headline-h3 kol-heading-wc">
+<h3 class="kol-heading--h3 kol-heading__headline">
   Level 3 Heading
 </h3>
 `;
 
 exports[`KolHeadingFc should render with default props 1`] = `
-<h1 class="headline headline-h1 kol-heading-wc">
+<h1 class="kol-heading--h1 kol-heading__headline">
   Default Heading
 </h1>
 `;
diff --git a/packages/components/src/functional-components/Span/test/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/Span/test/__snapshots__/snapshot.test.tsx.snap
index 491d7e2bd7..d73e3f999e 100644
--- a/packages/components/src/functional-components/Span/test/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/Span/test/__snapshots__/snapshot.test.tsx.snap
@@ -1,36 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KolSpanFc should allow markdown in label 1`] = `
-<span class="kol-span-wc">
+<span class="kol-span">
   <span class="kol-span__container">
-    <span class="md span-label">
+    <span class="kol-span__label md">
       <strong>
         Bold Label
       </strong>
     </span>
-    <span aria-hidden="true" class="span-label" hidden=""></span>
+    <span aria-hidden="true" class="kol-span__label" hidden=""></span>
   </span>
 </span>
 `;
 
 exports[`KolSpanFc should hide label when hideLabel is true 1`] = `
-<span class="hide-label kol-span-wc">
+<span class="hide-label kol-span">
   <span class="kol-span__container">
-    <span aria-hidden="true" class="span-label" hidden=""></span>
+    <span aria-hidden="true" class="kol-span__label" hidden=""></span>
   </span>
 </span>
 `;
 
 exports[`KolSpanFc should render with badge text 1`] = `
-<span class="kol-span-wc">
+<span class="kol-span">
   <span class="kol-span__container">
-    <span class="span-label">
+    <span class="kol-span__label">
       Label with
       <u>
         Badge
       </u>
     </span>
-    <span aria-hidden="true" class="span-label" hidden=""></span>
+    <span aria-hidden="true" class="kol-span__label" hidden=""></span>
     <span aria-hidden="true" class="badge-text-hint">
       Badge
     </span>
@@ -39,25 +39,25 @@ exports[`KolSpanFc should render with badge text 1`] = `
 `;
 
 exports[`KolSpanFc should render with default props 1`] = `
-<span class="kol-span-wc">
+<span class="kol-span">
   <span class="kol-span__container">
-    <span class="span-label">
+    <span class="kol-span__label">
       Default Label
     </span>
-    <span aria-hidden="true" class="span-label" hidden=""></span>
+    <span aria-hidden="true" class="kol-span__label" hidden=""></span>
   </span>
 </span>
 `;
 
 exports[`KolSpanFc should render with icons 1`] = `
-<span class="kol-span-wc">
+<span class="kol-span">
   <kol-icon _icons="top-icon" _label="" class="icon top"></kol-icon>
   <span class="kol-span__container">
     <kol-icon _icons="left-icon" _label="" class="icon left"></kol-icon>
-    <span class="span-label">
+    <span class="kol-span__label">
       Label with Icons
     </span>
-    <span aria-hidden="true" class="span-label" hidden=""></span>
+    <span aria-hidden="true" class="kol-span__label" hidden=""></span>
     <kol-icon _icons="right-icon" _label="" class="icon right"></kol-icon>
   </span>
   <kol-icon _icons="bottom-icon" _label="" class="bottom icon"></kol-icon>
diff --git a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
index 6be6ac6095..229797f537 100644
--- a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`ToastItemFc should render with basic props and status 1`] = `
     <div class="kol-alert__container">
       <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
       <div class="kol-alert__container-content">
-        <strong class="headline headline-strong kol-alert__heading kol-heading-wc">
+        <strong class="kol-alert__heading kol-heading--strong kol-heading__headline">
           Test Toast
         </strong>
       </div>
diff --git a/packages/themes/default/src/components/card.scss b/packages/themes/default/src/components/card.scss
index 0be4a88c86..132bd693d9 100644
--- a/packages/themes/default/src/components/card.scss
+++ b/packages/themes/default/src/components/card.scss
@@ -16,7 +16,7 @@
 		border-radius: var(--border-radius);
 	}
 
-	:host .kol-heading-wc {
+	:host .kol-heading {
 		line-height: 1.75;
 	}
 
diff --git a/packages/themes/default/src/components/heading.scss b/packages/themes/default/src/components/heading.scss
index e723babefe..a6e7647322 100644
--- a/packages/themes/default/src/components/heading.scss
+++ b/packages/themes/default/src/components/heading.scss
@@ -1,32 +1,34 @@
 @import '../mixins/typography';
 
 @layer kol-theme-component {
-	.headline-h1,
-	.headline-h2,
-	.headline-h3,
-	.headline-h4,
-	.headline-h5,
-	.headline-h6 {
-		color: inherit;
-		font-style: normal;
-		font-family: var(--font-family);
-	}
+	.kol-heading {
+		&--h1 {
+			@include kol-typography-h1;
+		}
 
-	.headline-h1,
-	.headline-h2,
-	.headline-h3 {
-		font-weight: 700;
-	}
+		&--h2 {
+			@include kol-typography-h2;
+		}
 
-	.headline-h1 {
-		@include kol-typography-h1;
-	}
+		&--h3 {
+			@include kol-typography-h3;
+		}
 
-	.headline-h2 {
-		@include kol-typography-h2;
-	}
+		&--h1,
+		&--h2,
+		&--h3,
+		&--h4,
+		&--h5,
+		&--h6 {
+			color: inherit;
+			font-style: normal;
+			font-family: var(--font-family);
+		}
 
-	.headline-h3 {
-		@include kol-typography-h3;
+		&--h1,
+		&--h2,
+		&--h3 {
+			font-weight: 700;
+		}
 	}
 }
diff --git a/packages/themes/default/src/global.scss b/packages/themes/default/src/global.scss
index 527803f8f6..862f0b8ba4 100644
--- a/packages/themes/default/src/global.scss
+++ b/packages/themes/default/src/global.scss
@@ -45,7 +45,7 @@
 		transition: outline-offset 0.2s linear;
 	}
 
-	.kol-heading-wc {
+	.kol-heading {
 		font-weight: 700;
 	}
 
diff --git a/packages/themes/ecl/src/ecl-ec/components/card.scss b/packages/themes/ecl/src/ecl-ec/components/card.scss
index 9e5aab2c40..1139bfbe76 100644
--- a/packages/themes/ecl/src/ecl-ec/components/card.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/card.scss
@@ -14,7 +14,7 @@
 		box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
 	}
 
-	:host .kol-heading-wc {
+	:host .kol-heading {
 		display: inline-flex;
 		font-style: normal;
 		font-weight: 700;
diff --git a/packages/themes/ecl/src/ecl-ec/components/heading.scss b/packages/themes/ecl/src/ecl-ec/components/heading.scss
index 8e03819b13..5ff1ced476 100644
--- a/packages/themes/ecl/src/ecl-ec/components/heading.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/heading.scss
@@ -6,27 +6,29 @@
 		font-family: var(--font-family);
 	}
 
-	.headline-h1 {
-		@include kol-typography-h1;
-	}
+	.kol-heading {
+		&--h1 {
+			@include kol-typography-h1;
+		}
 
-	.headline-h2 {
-		@include kol-typography-h2;
-	}
+		&--h2 {
+			@include kol-typography-h2;
+		}
 
-	.headline-h3 {
-		@include kol-typography-h3;
-	}
+		&--h3 {
+			@include kol-typography-h3;
+		}
 
-	.headline-h4 {
-		@include kol-typography-h4;
-	}
+		&--h4 {
+			@include kol-typography-h4;
+		}
 
-	.headline-h5 {
-		@include kol-typography-h5;
-	}
+		&--h5 {
+			@include kol-typography-h5;
+		}
 
-	.headline-h6 {
-		color: rgb(234, 0, 255);
+		&--h6 {
+			color: rgb(234, 0, 255);
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/card.scss b/packages/themes/ecl/src/ecl-eu/components/card.scss
index 60c9b17b5d..0672bd76a4 100644
--- a/packages/themes/ecl/src/ecl-eu/components/card.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/card.scss
@@ -14,7 +14,7 @@
 		box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
 	}
 
-	:host .kol-heading-wc {
+	:host .kol-heading {
 		display: inline-flex;
 		font-style: normal;
 		font-weight: 700;
diff --git a/packages/themes/ecl/src/ecl-eu/components/heading.scss b/packages/themes/ecl/src/ecl-eu/components/heading.scss
index fb136b4e34..53806c7633 100644
--- a/packages/themes/ecl/src/ecl-eu/components/heading.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/heading.scss
@@ -6,36 +6,38 @@
 		font-family: var(--font-family);
 	}
 
-	.headline-h1,
-	.headline-h2,
-	.headline-h3,
-	.headline-h4,
-	.headline-h5,
-	.headline-h6 {
-		font-weight: var(--font-weight-bold);
-	}
-
-	.headline-h1 {
-		@include kol-typography-h1;
-	}
-
-	.headline-h2 {
-		@include kol-typography-h2;
-	}
-
-	.headline-h3 {
-		@include kol-typography-h3;
-	}
-
-	.headline-h4 {
-		@include kol-typography-h4;
-	}
-
-	.headline-h5 {
-		@include kol-typography-h5;
-	}
-
-	.headline-h6 {
-		@include kol-typography-h6;
+	.kol-heading {
+		&--h1 {
+			@include kol-typography-h1;
+		}
+
+		&--h2 {
+			@include kol-typography-h2;
+		}
+
+		&--h3 {
+			@include kol-typography-h3;
+		}
+
+		&--h4 {
+			@include kol-typography-h4;
+		}
+
+		&--h5 {
+			@include kol-typography-h5;
+		}
+
+		&--h6 {
+			@include kol-typography-h6;
+		}
+
+		&--h1,
+		&--h2,
+		&--h3,
+		&--h4,
+		&--h5,
+		&--h6 {
+			font-weight: var(--font-weight-bold);
+		}
 	}
 }
diff --git a/packages/themes/itzbund/src/components/heading.scss b/packages/themes/itzbund/src/components/heading.scss
index 83994cb98f..4231f0b01f 100644
--- a/packages/themes/itzbund/src/components/heading.scss
+++ b/packages/themes/itzbund/src/components/heading.scss
@@ -1,37 +1,39 @@
 @import '../mixins/typography';
 
 @layer kol-theme-component {
-	.headline-h1,
-	.headline-h2,
-	.headline-h3,
-	.headline-h4,
-	.headline-h5,
-	.headline-h6 {
-		margin: 0;
-		padding: 0;
-	}
+	.kol-heading {
+		&--h1 {
+			@include kol-typography-h1;
+		}
 
-	.headline-h1 {
-		@include kol-typography-h1;
-	}
+		&--h2 {
+			@include kol-typography-h2;
+		}
 
-	.headline-h2 {
-		@include kol-typography-h2;
-	}
+		&--h3 {
+			@include kol-typography-h3;
+		}
 
-	.headline-h3 {
-		@include kol-typography-h3;
-	}
+		&--h4 {
+			@include kol-typography-h4;
+		}
 
-	.headline-h4 {
-		@include kol-typography-h4;
-	}
+		&--h5 {
+			@include kol-typography-h5;
+		}
 
-	.headline-h5 {
-		@include kol-typography-h5;
-	}
+		&--h6 {
+			@include kol-typography-h6;
+		}
 
-	.headline-h6 {
-		@include kol-typography-h6;
+		&--h1,
+		&--h2,
+		&--h3,
+		&--h4,
+		&--h5,
+		&--h6 {
+			margin: 0;
+			padding: 0;
+		}
 	}
 }

From fd2aa4f8dc61df283fe79c11de6ad913dac7f36b Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Fri, 6 Dec 2024 10:44:49 +0100
Subject: [PATCH 07/16] fixed missing class

Refs: #7035
---
 .../test/__snapshots__/snapshot.spec.tsx.snap |  22 ++--
 .../test/__snapshots__/snapshot.spec.tsx.snap | 120 +++++++++---------
 .../test/__snapshots__/snapshot.spec.tsx.snap |  44 +++----
 .../test/__snapshots__/snapshot.spec.tsx.snap |  24 ++--
 .../src/components/heading/shadow.tsx         |   2 +-
 .../functional-components/Heading/Heading.tsx |   2 +-
 .../test/__snapshots__/snapshot.test.tsx.snap |   6 +-
 .../Heading/test/snapshot.test.tsx            |  12 +-
 .../__snapshots__/snapshot.test.tsx.snap      |   2 +-
 9 files changed, 117 insertions(+), 117 deletions(-)

diff --git a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
index 7979aad138..7dd047b5d1 100644
--- a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -23,7 +23,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible disabled kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -42,7 +42,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 <kol-accordion _open="">
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion open" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -61,7 +61,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 <kol-accordion _open="">
   <template shadowrootmode="open">
     <div class="collapsible disabled kol-accordion open" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -80,7 +80,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -99,7 +99,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=2 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h2 class="collapsible__heading kol-accordion__heading kol-heading--h2 kol-heading__headline">
+      <h2 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h2 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h2>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -118,7 +118,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=3 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h3 class="collapsible__heading kol-accordion__heading kol-heading--h3 kol-heading__headline">
+      <h3 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h3 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h3>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -137,7 +137,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=4 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h4 class="collapsible__heading kol-accordion__heading kol-heading--h4 kol-heading__headline">
+      <h4 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h4 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h4>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -156,7 +156,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=5 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h5 class="collapsible__heading kol-accordion__heading kol-heading--h5 kol-heading__headline">
+      <h5 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h5 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h5>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -175,7 +175,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=6 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h6 class="collapsible__heading kol-accordion__heading kol-heading--h6 kol-heading__headline">
+      <h6 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h6 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h6>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -194,7 +194,7 @@ exports[`kol-accordion should render with _label="Überschrift" 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
diff --git a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
index 51b9607be8..b62ab0a540 100644
--- a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -32,7 +32,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -55,7 +55,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -78,7 +78,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -101,7 +101,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -124,7 +124,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -147,7 +147,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -170,7 +170,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -193,7 +193,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -216,7 +216,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -239,7 +239,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -262,7 +262,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -285,7 +285,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -308,7 +308,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -331,7 +331,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -354,7 +354,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -377,7 +377,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -400,7 +400,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -423,7 +423,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -446,7 +446,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -469,7 +469,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -492,7 +492,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -515,7 +515,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -538,7 +538,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -561,7 +561,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -584,7 +584,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -607,7 +607,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -630,7 +630,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -653,7 +653,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -676,7 +676,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -699,7 +699,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -722,7 +722,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -745,7 +745,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -768,7 +768,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -791,7 +791,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -814,7 +814,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -837,7 +837,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -860,7 +860,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -883,7 +883,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -906,7 +906,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -929,7 +929,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -952,7 +952,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -975,7 +975,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -998,7 +998,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -1021,7 +1021,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -1044,7 +1044,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1067,7 +1067,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1090,7 +1090,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1113,7 +1113,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1136,7 +1136,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1159,7 +1159,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1182,7 +1182,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1205,7 +1205,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1228,7 +1228,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1251,7 +1251,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1274,7 +1274,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1297,7 +1297,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1320,7 +1320,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1343,7 +1343,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1366,7 +1366,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
diff --git a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
index c493106fc5..f36661c4d0 100644
--- a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="kol-heading--strong kol-heading__headline">
+        <strong class="kol-heading kol-heading--strong kol-heading__headline">
           Überschrift
         </strong>
       </div>
@@ -22,7 +22,7 @@ exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="kol-heading--strong kol-heading__headline">
+        <strong class="kol-heading kol-heading--strong kol-heading__headline">
           Überschrift
         </strong>
       </div>
@@ -40,7 +40,7 @@ exports[`kol-card should render with _label="Überschrift" _level=0 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="kol-heading--strong kol-heading__headline">
+        <strong class="kol-heading kol-heading--strong kol-heading__headline">
           Überschrift
         </strong>
       </div>
@@ -57,7 +57,7 @@ exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading--h1 kol-heading__headline">
+        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
           Überschrift
         </h1>
       </div>
@@ -74,7 +74,7 @@ exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading--h1 kol-heading__headline">
+        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
           Überschrift
         </h1>
       </div>
@@ -92,7 +92,7 @@ exports[`kol-card should render with _label="Überschrift" _level=1 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading--h1 kol-heading__headline">
+        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
           Überschrift
         </h1>
       </div>
@@ -109,7 +109,7 @@ exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="kol-heading--h2 kol-heading__headline">
+        <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
           Überschrift
         </h2>
       </div>
@@ -126,7 +126,7 @@ exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="kol-heading--h2 kol-heading__headline">
+        <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
           Überschrift
         </h2>
       </div>
@@ -144,7 +144,7 @@ exports[`kol-card should render with _label="Überschrift" _level=2 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="kol-heading--h2 kol-heading__headline">
+        <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
           Überschrift
         </h2>
       </div>
@@ -161,7 +161,7 @@ exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="kol-heading--h3 kol-heading__headline">
+        <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
           Überschrift
         </h3>
       </div>
@@ -178,7 +178,7 @@ exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="kol-heading--h3 kol-heading__headline">
+        <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
           Überschrift
         </h3>
       </div>
@@ -196,7 +196,7 @@ exports[`kol-card should render with _label="Überschrift" _level=3 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="kol-heading--h3 kol-heading__headline">
+        <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
           Überschrift
         </h3>
       </div>
@@ -213,7 +213,7 @@ exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="kol-heading--h4 kol-heading__headline">
+        <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
           Überschrift
         </h4>
       </div>
@@ -230,7 +230,7 @@ exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="kol-heading--h4 kol-heading__headline">
+        <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
           Überschrift
         </h4>
       </div>
@@ -248,7 +248,7 @@ exports[`kol-card should render with _label="Überschrift" _level=4 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="kol-heading--h4 kol-heading__headline">
+        <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
           Überschrift
         </h4>
       </div>
@@ -265,7 +265,7 @@ exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="kol-heading--h5 kol-heading__headline">
+        <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
           Überschrift
         </h5>
       </div>
@@ -282,7 +282,7 @@ exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="kol-heading--h5 kol-heading__headline">
+        <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
           Überschrift
         </h5>
       </div>
@@ -300,7 +300,7 @@ exports[`kol-card should render with _label="Überschrift" _level=5 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="kol-heading--h5 kol-heading__headline">
+        <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
           Überschrift
         </h5>
       </div>
@@ -317,7 +317,7 @@ exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="kol-heading--h6 kol-heading__headline">
+        <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
           Überschrift
         </h6>
       </div>
@@ -334,7 +334,7 @@ exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="kol-heading--h6 kol-heading__headline">
+        <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
           Überschrift
         </h6>
       </div>
@@ -352,7 +352,7 @@ exports[`kol-card should render with _label="Überschrift" _level=6 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="kol-heading--h6 kol-heading__headline">
+        <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
           Überschrift
         </h6>
       </div>
@@ -369,7 +369,7 @@ exports[`kol-card should render with _label="Überschrift" 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading--h1 kol-heading__headline">
+        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
           Überschrift
         </h1>
       </div>
diff --git a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
index 84f50f70e6..d9bc48fd14 100644
--- a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=false
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -23,7 +23,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=false
 <kol-details _open="" class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details open" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -42,7 +42,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=true
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details disabled" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -61,7 +61,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=true
 <kol-details _open="" class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details disabled open" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -80,7 +80,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=0 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -99,7 +99,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=1 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -118,7 +118,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=2 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -137,7 +137,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=3 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -156,7 +156,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=4 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -175,7 +175,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=5 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -194,7 +194,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=6 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -213,7 +213,7 @@ exports[`kol-details should render with _label="Zusammenfassung" 1`] = `
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
diff --git a/packages/components/src/components/heading/shadow.tsx b/packages/components/src/components/heading/shadow.tsx
index 63d8636965..4dd1eea3f9 100644
--- a/packages/components/src/components/heading/shadow.tsx
+++ b/packages/components/src/components/heading/shadow.tsx
@@ -73,7 +73,7 @@ export class KolHeading implements HeadingAPI {
 		const { _secondaryHeadline, _label, _level, _variant } = this.state;
 
 		return (
-			<KolHeadingFc class="kol-heading" secondaryHeadline={_secondaryHeadline} level={_level} variant={_variant}>
+			<KolHeadingFc secondaryHeadline={_secondaryHeadline} level={_level} variant={_variant}>
 				{_label}
 				<slot name="expert" slot="expert" />
 			</KolHeadingFc>
diff --git a/packages/components/src/functional-components/Heading/Heading.tsx b/packages/components/src/functional-components/Heading/Heading.tsx
index eedb424d43..498fc671a1 100644
--- a/packages/components/src/functional-components/Heading/Heading.tsx
+++ b/packages/components/src/functional-components/Heading/Heading.tsx
@@ -111,7 +111,7 @@ const KolHeadingFc: FC<HeadingProps> = (
 
 	if (!secondaryHeadline) {
 		return (
-			<KolHeadlineFc class={clsx(classNames)} {...headlineProps}>
+			<KolHeadlineFc class={clsx('kol-heading', classNames)} {...headlineProps}>
 				{children}
 			</KolHeadlineFc>
 		);
diff --git a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
index b51af11a6a..871e66ed1e 100644
--- a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KolHeadingFc should apply custom class names 1`] = `
-<h1 class="custom-class kol-heading--h1 kol-heading__headline">
+<h1 class="custom-class kol-heading kol-heading--h1 kol-heading__headline">
   Custom Class Heading
 </h1>
 `;
@@ -18,13 +18,13 @@ exports[`KolHeadingFc should render with a secondary headline 1`] = `
 `;
 
 exports[`KolHeadingFc should render with a specific level 1`] = `
-<h3 class="kol-heading--h3 kol-heading__headline">
+<h3 class="kol-heading kol-heading--h3 kol-heading__headline">
   Level 3 Heading
 </h3>
 `;
 
 exports[`KolHeadingFc should render with default props 1`] = `
-<h1 class="kol-heading--h1 kol-heading__headline">
+<h1 class="kol-heading kol-heading--h1 kol-heading__headline">
   Default Heading
 </h1>
 `;
diff --git a/packages/components/src/functional-components/Heading/test/snapshot.test.tsx b/packages/components/src/functional-components/Heading/test/snapshot.test.tsx
index dedd3e6348..922cf53430 100644
--- a/packages/components/src/functional-components/Heading/test/snapshot.test.tsx
+++ b/packages/components/src/functional-components/Heading/test/snapshot.test.tsx
@@ -10,7 +10,7 @@ describe('KolHeadingFc', () => {
 		expect(page.root).toMatchSnapshot();
 		expect(page.root?.tagName).toBe('H1');
 		expect(page.root?.textContent).toContain('Default Heading');
-		expect(page.root?.classList.contains('kol-heading-wc')).toBe(true);
+		expect(page.root?.classList.contains('kol-heading')).toBe(true);
 	});
 
 	it('should render with a specific level', async () => {
@@ -20,7 +20,7 @@ describe('KolHeadingFc', () => {
 		expect(page.root).toMatchSnapshot();
 		expect(page.root?.tagName).toBe('H3');
 		expect(page.root?.textContent).toContain('Level 3 Heading');
-		expect(page.root?.classList.contains('kol-heading-wc')).toBe(true);
+		expect(page.root?.classList.contains('kol-heading')).toBe(true);
 	});
 
 	it('should render with a secondary headline', async () => {
@@ -34,9 +34,9 @@ describe('KolHeadingFc', () => {
 		expect(page.root?.querySelector('h2')).not.toBeNull();
 		expect(page.root?.textContent).toContain('Main Heading');
 		expect(page.root?.textContent).toContain('Secondary Headline');
-		expect(page.root?.classList.contains('kol-heading-wc')).toBe(true);
-		expect(page.root?.querySelector('h1')?.classList.contains('kol-heading-wc')).toBe(false);
-		expect(page.root?.querySelector('h2')?.classList.contains('kol-heading-wc')).toBe(false);
+		expect(page.root?.classList.contains('kol-heading')).toBe(true);
+		expect(page.root?.querySelector('h1')?.classList.contains('kol-heading')).toBe(false);
+		expect(page.root?.querySelector('h2')?.classList.contains('kol-heading')).toBe(false);
 	});
 
 	it('should apply custom class names', async () => {
@@ -46,7 +46,7 @@ describe('KolHeadingFc', () => {
 		expect(page.root).toMatchSnapshot();
 		expect(page.root?.tagName).toBe('H1');
 		expect(page.root?.classList.contains('custom-class')).toBe(true);
-		expect(page.root?.classList.contains('kol-heading-wc')).toBe(true);
+		expect(page.root?.classList.contains('kol-heading')).toBe(true);
 		expect(page.root?.textContent).toContain('Custom Class Heading');
 	});
 });
diff --git a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
index 229797f537..5a48aed7d4 100644
--- a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`ToastItemFc should render with basic props and status 1`] = `
     <div class="kol-alert__container">
       <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
       <div class="kol-alert__container-content">
-        <strong class="kol-alert__heading kol-heading--strong kol-heading__headline">
+        <strong class="kol-alert__heading kol-heading kol-heading--strong kol-heading__headline">
           Test Toast
         </strong>
       </div>

From ddce7bc6d6da7677e812e0926f8754baaa81e9f7 Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Fri, 6 Dec 2024 10:54:44 +0100
Subject: [PATCH 08/16] fixed missing class

Refs: #7035
---
 .../test/__snapshots__/snapshot.spec.tsx.snap |  22 ++--
 .../test/__snapshots__/snapshot.spec.tsx.snap | 120 +++++++++---------
 .../test/__snapshots__/snapshot.spec.tsx.snap |  44 +++----
 .../test/__snapshots__/snapshot.spec.tsx.snap |  24 ++--
 .../test/__snapshots__/snapshot.spec.tsx.snap |  30 ++---
 .../functional-components/Heading/Heading.tsx |   4 +-
 .../test/__snapshots__/snapshot.test.tsx.snap |   8 +-
 .../__snapshots__/snapshot.test.tsx.snap      |   2 +-
 8 files changed, 127 insertions(+), 127 deletions(-)

diff --git a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
index 7dd047b5d1..4e4b15ebe3 100644
--- a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -23,7 +23,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible disabled kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -42,7 +42,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 <kol-accordion _open="">
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion open" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -61,7 +61,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 <kol-accordion _open="">
   <template shadowrootmode="open">
     <div class="collapsible disabled kol-accordion open" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -80,7 +80,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -99,7 +99,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=2 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h2 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h2 kol-heading__headline">
+      <h2 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h2">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h2>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -118,7 +118,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=3 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h3 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h3 kol-heading__headline">
+      <h3 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h3">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h3>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -137,7 +137,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=4 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h4 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h4 kol-heading__headline">
+      <h4 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h4">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h4>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -156,7 +156,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=5 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h5 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h5 kol-heading__headline">
+      <h5 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h5">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h5>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -175,7 +175,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=6 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h6 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h6 kol-heading__headline">
+      <h6 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h6">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h6>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -194,7 +194,7 @@ exports[`kol-accordion should render with _label="Überschrift" 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
diff --git a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
index b62ab0a540..63898e9da9 100644
--- a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -32,7 +32,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -55,7 +55,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -78,7 +78,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -101,7 +101,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -124,7 +124,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -147,7 +147,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -170,7 +170,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -193,7 +193,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -216,7 +216,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -239,7 +239,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -262,7 +262,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -285,7 +285,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -308,7 +308,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -331,7 +331,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -354,7 +354,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -377,7 +377,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -400,7 +400,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -423,7 +423,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -446,7 +446,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -469,7 +469,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -492,7 +492,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -515,7 +515,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -538,7 +538,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -561,7 +561,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -584,7 +584,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -607,7 +607,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -630,7 +630,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -653,7 +653,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -676,7 +676,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -699,7 +699,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -722,7 +722,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -745,7 +745,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -768,7 +768,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -791,7 +791,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -814,7 +814,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -837,7 +837,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -860,7 +860,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -883,7 +883,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -906,7 +906,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -929,7 +929,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -952,7 +952,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -975,7 +975,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -998,7 +998,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -1021,7 +1021,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -1044,7 +1044,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1067,7 +1067,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1090,7 +1090,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1113,7 +1113,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1136,7 +1136,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1159,7 +1159,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1182,7 +1182,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1205,7 +1205,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1228,7 +1228,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1251,7 +1251,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1274,7 +1274,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1297,7 +1297,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1320,7 +1320,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1343,7 +1343,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1366,7 +1366,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
               Überschrift
             </h6>
             <div class="kol-alert__content">
diff --git a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
index f36661c4d0..ff173f4e14 100644
--- a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="kol-heading kol-heading--strong kol-heading__headline">
+        <strong class="kol-heading kol-heading--strong">
           Überschrift
         </strong>
       </div>
@@ -22,7 +22,7 @@ exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="kol-heading kol-heading--strong kol-heading__headline">
+        <strong class="kol-heading kol-heading--strong">
           Überschrift
         </strong>
       </div>
@@ -40,7 +40,7 @@ exports[`kol-card should render with _label="Überschrift" _level=0 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="kol-heading kol-heading--strong kol-heading__headline">
+        <strong class="kol-heading kol-heading--strong">
           Überschrift
         </strong>
       </div>
@@ -57,7 +57,7 @@ exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
+        <h1 class="kol-heading kol-heading--h1">
           Überschrift
         </h1>
       </div>
@@ -74,7 +74,7 @@ exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
+        <h1 class="kol-heading kol-heading--h1">
           Überschrift
         </h1>
       </div>
@@ -92,7 +92,7 @@ exports[`kol-card should render with _label="Überschrift" _level=1 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
+        <h1 class="kol-heading kol-heading--h1">
           Überschrift
         </h1>
       </div>
@@ -109,7 +109,7 @@ exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
+        <h2 class="kol-heading kol-heading--h2">
           Überschrift
         </h2>
       </div>
@@ -126,7 +126,7 @@ exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
+        <h2 class="kol-heading kol-heading--h2">
           Überschrift
         </h2>
       </div>
@@ -144,7 +144,7 @@ exports[`kol-card should render with _label="Überschrift" _level=2 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
+        <h2 class="kol-heading kol-heading--h2">
           Überschrift
         </h2>
       </div>
@@ -161,7 +161,7 @@ exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
+        <h3 class="kol-heading kol-heading--h3">
           Überschrift
         </h3>
       </div>
@@ -178,7 +178,7 @@ exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
+        <h3 class="kol-heading kol-heading--h3">
           Überschrift
         </h3>
       </div>
@@ -196,7 +196,7 @@ exports[`kol-card should render with _label="Überschrift" _level=3 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
+        <h3 class="kol-heading kol-heading--h3">
           Überschrift
         </h3>
       </div>
@@ -213,7 +213,7 @@ exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
+        <h4 class="kol-heading kol-heading--h4">
           Überschrift
         </h4>
       </div>
@@ -230,7 +230,7 @@ exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
+        <h4 class="kol-heading kol-heading--h4">
           Überschrift
         </h4>
       </div>
@@ -248,7 +248,7 @@ exports[`kol-card should render with _label="Überschrift" _level=4 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
+        <h4 class="kol-heading kol-heading--h4">
           Überschrift
         </h4>
       </div>
@@ -265,7 +265,7 @@ exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
+        <h5 class="kol-heading kol-heading--h5">
           Überschrift
         </h5>
       </div>
@@ -282,7 +282,7 @@ exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
+        <h5 class="kol-heading kol-heading--h5">
           Überschrift
         </h5>
       </div>
@@ -300,7 +300,7 @@ exports[`kol-card should render with _label="Überschrift" _level=5 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
+        <h5 class="kol-heading kol-heading--h5">
           Überschrift
         </h5>
       </div>
@@ -317,7 +317,7 @@ exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
+        <h6 class="kol-heading kol-heading--h6">
           Überschrift
         </h6>
       </div>
@@ -334,7 +334,7 @@ exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
+        <h6 class="kol-heading kol-heading--h6">
           Überschrift
         </h6>
       </div>
@@ -352,7 +352,7 @@ exports[`kol-card should render with _label="Überschrift" _level=6 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
+        <h6 class="kol-heading kol-heading--h6">
           Überschrift
         </h6>
       </div>
@@ -369,7 +369,7 @@ exports[`kol-card should render with _label="Überschrift" 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
+        <h1 class="kol-heading kol-heading--h1">
           Überschrift
         </h1>
       </div>
diff --git a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
index d9bc48fd14..e5f62c261f 100644
--- a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=false
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -23,7 +23,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=false
 <kol-details _open="" class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details open" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -42,7 +42,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=true
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details disabled" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -61,7 +61,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=true
 <kol-details _open="" class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details disabled open" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -80,7 +80,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=0 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -99,7 +99,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=1 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -118,7 +118,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=2 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -137,7 +137,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=3 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -156,7 +156,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=4 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -175,7 +175,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=5 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -194,7 +194,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=6 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -213,7 +213,7 @@ exports[`kol-details should render with _label="Zusammenfassung" 1`] = `
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
diff --git a/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
index 70a875a94d..bc304cd707 100644
--- a/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`kol-heading should render with _label="Headline" _level=0 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <strong class="kol-heading kol-heading--strong kol-heading__headline">
+    <strong class="kol-heading kol-heading--strong">
       Headline
       <slot name="expert" slot="expert"></slot>
     </strong>
@@ -14,7 +14,7 @@ exports[`kol-heading should render with _label="Headline" _level=0 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=1 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
+    <h1 class="kol-heading kol-heading--h1">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -25,7 +25,7 @@ exports[`kol-heading should render with _label="Headline" _level=1 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=2 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
+    <h2 class="kol-heading kol-heading--h2">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h2>
@@ -36,7 +36,7 @@ exports[`kol-heading should render with _label="Headline" _level=2 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=3 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
+    <h3 class="kol-heading kol-heading--h3">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h3>
@@ -47,7 +47,7 @@ exports[`kol-heading should render with _label="Headline" _level=3 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=4 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
+    <h4 class="kol-heading kol-heading--h4">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h4>
@@ -58,7 +58,7 @@ exports[`kol-heading should render with _label="Headline" _level=4 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=5 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
+    <h5 class="kol-heading kol-heading--h5">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h5>
@@ -69,7 +69,7 @@ exports[`kol-heading should render with _label="Headline" _level=5 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=6 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
+    <h6 class="kol-heading kol-heading--h6">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h6>
@@ -80,7 +80,7 @@ exports[`kol-heading should render with _label="Headline" _level=6 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h1" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
+    <h1 class="kol-heading kol-heading--h1">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -91,7 +91,7 @@ exports[`kol-heading should render with _label="Headline" _variant="h1" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h2" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h2 kol-heading__headline">
+    <h1 class="kol-heading kol-heading--h2">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -102,7 +102,7 @@ exports[`kol-heading should render with _label="Headline" _variant="h2" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h3" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h3 kol-heading__headline">
+    <h1 class="kol-heading kol-heading--h3">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -113,7 +113,7 @@ exports[`kol-heading should render with _label="Headline" _variant="h3" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h4" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h4 kol-heading__headline">
+    <h1 class="kol-heading kol-heading--h4">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -124,7 +124,7 @@ exports[`kol-heading should render with _label="Headline" _variant="h4" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h5" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h5 kol-heading__headline">
+    <h1 class="kol-heading kol-heading--h5">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -135,7 +135,7 @@ exports[`kol-heading should render with _label="Headline" _variant="h5" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h6" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h6 kol-heading__headline">
+    <h1 class="kol-heading kol-heading--h6">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -146,7 +146,7 @@ exports[`kol-heading should render with _label="Headline" _variant="h6" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="strong" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--strong kol-heading__headline">
+    <h1 class="kol-heading kol-heading--strong">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -157,7 +157,7 @@ exports[`kol-heading should render with _label="Headline" _variant="strong" 1`]
 exports[`kol-heading should render with _label="Headline" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
+    <h1 class="kol-heading kol-heading--h1">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
diff --git a/packages/components/src/functional-components/Heading/Heading.tsx b/packages/components/src/functional-components/Heading/Heading.tsx
index 498fc671a1..61c031ef44 100644
--- a/packages/components/src/functional-components/Heading/Heading.tsx
+++ b/packages/components/src/functional-components/Heading/Heading.tsx
@@ -72,7 +72,7 @@ const KolHeadlineFc: FC<HeadlineProps> = ({ class: classNames, level = MIN_HEADI
 	const finalVariant = variant || HeadlineTag;
 
 	return (
-		<HeadlineTag class={clsx('kol-heading__headline', `kol-heading--${finalVariant}`, classNames)} {...other}>
+		<HeadlineTag class={clsx('kol-heading', `kol-heading--${finalVariant}`, classNames)} {...other}>
 			{children}
 		</HeadlineTag>
 	);
@@ -111,7 +111,7 @@ const KolHeadingFc: FC<HeadingProps> = (
 
 	if (!secondaryHeadline) {
 		return (
-			<KolHeadlineFc class={clsx('kol-heading', classNames)} {...headlineProps}>
+			<KolHeadlineFc class={clsx(classNames)} {...headlineProps}>
 				{children}
 			</KolHeadlineFc>
 		);
diff --git a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
index 871e66ed1e..d82d004d09 100644
--- a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KolHeadingFc should apply custom class names 1`] = `
-<h1 class="custom-class kol-heading kol-heading--h1 kol-heading__headline">
+<h1 class="custom-class kol-heading kol-heading--h1">
   Custom Class Heading
 </h1>
 `;
 
 exports[`KolHeadingFc should render with a secondary headline 1`] = `
 <hgroup>
-  <h1 class="kol-heading--h1 kol-heading__headline">
+  <h1 class="kol-heading--h1">
     Main Heading
   </h1>
   <h2 class="kol-heading__secondary-headline">
@@ -18,13 +18,13 @@ exports[`KolHeadingFc should render with a secondary headline 1`] = `
 `;
 
 exports[`KolHeadingFc should render with a specific level 1`] = `
-<h3 class="kol-heading kol-heading--h3 kol-heading__headline">
+<h3 class="kol-heading kol-heading--h3">
   Level 3 Heading
 </h3>
 `;
 
 exports[`KolHeadingFc should render with default props 1`] = `
-<h1 class="kol-heading kol-heading--h1 kol-heading__headline">
+<h1 class="kol-heading kol-heading--h1">
   Default Heading
 </h1>
 `;
diff --git a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
index 5a48aed7d4..96f431afe8 100644
--- a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`ToastItemFc should render with basic props and status 1`] = `
     <div class="kol-alert__container">
       <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
       <div class="kol-alert__container-content">
-        <strong class="kol-alert__heading kol-heading kol-heading--strong kol-heading__headline">
+        <strong class="kol-alert__heading kol-heading kol-heading--strong">
           Test Toast
         </strong>
       </div>

From 3455488f8dbdb62416228fd527e3ab71316302a2 Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Fri, 6 Dec 2024 11:16:46 +0100
Subject: [PATCH 09/16] fixed test snapshot

Refs: #7035
---
 .../Heading/test/__snapshots__/snapshot.test.tsx.snap           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
index d82d004d09..6a5aa121b2 100644
--- a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`KolHeadingFc should apply custom class names 1`] = `
 
 exports[`KolHeadingFc should render with a secondary headline 1`] = `
 <hgroup>
-  <h1 class="kol-heading--h1">
+  <h1 class="kol-heading kol-heading--h1">
     Main Heading
   </h1>
   <h2 class="kol-heading__secondary-headline">

From 16f2be0538646d3ef1d3431171fc88ad3f90b562 Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Fri, 6 Dec 2024 11:37:16 +0100
Subject: [PATCH 10/16] fixed test snapshot

Refs: #7035
---
 .../test/__snapshots__/snapshot.spec.tsx.snap |  22 ++--
 .../test/__snapshots__/snapshot.spec.tsx.snap | 120 +++++++++---------
 .../test/__snapshots__/snapshot.spec.tsx.snap |  44 +++----
 .../test/__snapshots__/snapshot.spec.tsx.snap |  24 ++--
 .../test/__snapshots__/snapshot.spec.tsx.snap |  30 ++---
 .../functional-components/Heading/Heading.tsx |   8 +-
 .../test/__snapshots__/snapshot.test.tsx.snap |  10 +-
 .../__snapshots__/snapshot.test.tsx.snap      |   2 +-
 8 files changed, 130 insertions(+), 130 deletions(-)

diff --git a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
index 4e4b15ebe3..7dd047b5d1 100644
--- a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -23,7 +23,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible disabled kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -42,7 +42,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 <kol-accordion _open="">
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion open" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -61,7 +61,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 <kol-accordion _open="">
   <template shadowrootmode="open">
     <div class="collapsible disabled kol-accordion open" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -80,7 +80,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -99,7 +99,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=2 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h2 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h2">
+      <h2 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h2 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h2>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -118,7 +118,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=3 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h3 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h3">
+      <h3 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h3 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h3>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -137,7 +137,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=4 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h4 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h4">
+      <h4 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h4 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h4>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -156,7 +156,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=5 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h5 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h5">
+      <h5 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h5 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h5>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -175,7 +175,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=6 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h6 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h6">
+      <h6 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h6 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h6>
       <div class="collapsible__wrapper kol-accordion__wrapper">
@@ -194,7 +194,7 @@ exports[`kol-accordion should render with _label="Überschrift" 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
diff --git a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
index 63898e9da9..b62ab0a540 100644
--- a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -32,7 +32,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -55,7 +55,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -78,7 +78,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -101,7 +101,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -124,7 +124,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -147,7 +147,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -170,7 +170,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -193,7 +193,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -216,7 +216,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -239,7 +239,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -262,7 +262,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -285,7 +285,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -308,7 +308,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -331,7 +331,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -354,7 +354,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -377,7 +377,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -400,7 +400,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -423,7 +423,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -446,7 +446,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -469,7 +469,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -492,7 +492,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -515,7 +515,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -538,7 +538,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -561,7 +561,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -584,7 +584,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -607,7 +607,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -630,7 +630,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -653,7 +653,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -676,7 +676,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -699,7 +699,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -722,7 +722,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -745,7 +745,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -768,7 +768,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -791,7 +791,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1">
+            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
               Überschrift
             </h1>
             <div class="kol-alert__content">
@@ -814,7 +814,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -837,7 +837,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -860,7 +860,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -883,7 +883,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -906,7 +906,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2">
+            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
               Überschrift
             </h2>
             <div class="kol-alert__content">
@@ -929,7 +929,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -952,7 +952,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -975,7 +975,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -998,7 +998,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -1021,7 +1021,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3">
+            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
               Überschrift
             </h3>
             <div class="kol-alert__content">
@@ -1044,7 +1044,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1067,7 +1067,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1090,7 +1090,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1113,7 +1113,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1136,7 +1136,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4">
+            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
               Überschrift
             </h4>
             <div class="kol-alert__content">
@@ -1159,7 +1159,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1182,7 +1182,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1205,7 +1205,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1228,7 +1228,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1251,7 +1251,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5">
+            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
               Überschrift
             </h5>
             <div class="kol-alert__content">
@@ -1274,7 +1274,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1297,7 +1297,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1320,7 +1320,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1343,7 +1343,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
@@ -1366,7 +1366,7 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6">
+            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
               Überschrift
             </h6>
             <div class="kol-alert__content">
diff --git a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
index ff173f4e14..f36661c4d0 100644
--- a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="kol-heading kol-heading--strong">
+        <strong class="kol-heading kol-heading--strong kol-heading__headline">
           Überschrift
         </strong>
       </div>
@@ -22,7 +22,7 @@ exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="kol-heading kol-heading--strong">
+        <strong class="kol-heading kol-heading--strong kol-heading__headline">
           Überschrift
         </strong>
       </div>
@@ -40,7 +40,7 @@ exports[`kol-card should render with _label="Überschrift" _level=0 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="kol-heading kol-heading--strong">
+        <strong class="kol-heading kol-heading--strong kol-heading__headline">
           Überschrift
         </strong>
       </div>
@@ -57,7 +57,7 @@ exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading kol-heading--h1">
+        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
           Überschrift
         </h1>
       </div>
@@ -74,7 +74,7 @@ exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading kol-heading--h1">
+        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
           Überschrift
         </h1>
       </div>
@@ -92,7 +92,7 @@ exports[`kol-card should render with _label="Überschrift" _level=1 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading kol-heading--h1">
+        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
           Überschrift
         </h1>
       </div>
@@ -109,7 +109,7 @@ exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="kol-heading kol-heading--h2">
+        <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
           Überschrift
         </h2>
       </div>
@@ -126,7 +126,7 @@ exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="kol-heading kol-heading--h2">
+        <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
           Überschrift
         </h2>
       </div>
@@ -144,7 +144,7 @@ exports[`kol-card should render with _label="Überschrift" _level=2 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="kol-heading kol-heading--h2">
+        <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
           Überschrift
         </h2>
       </div>
@@ -161,7 +161,7 @@ exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="kol-heading kol-heading--h3">
+        <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
           Überschrift
         </h3>
       </div>
@@ -178,7 +178,7 @@ exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="kol-heading kol-heading--h3">
+        <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
           Überschrift
         </h3>
       </div>
@@ -196,7 +196,7 @@ exports[`kol-card should render with _label="Überschrift" _level=3 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="kol-heading kol-heading--h3">
+        <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
           Überschrift
         </h3>
       </div>
@@ -213,7 +213,7 @@ exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="kol-heading kol-heading--h4">
+        <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
           Überschrift
         </h4>
       </div>
@@ -230,7 +230,7 @@ exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="kol-heading kol-heading--h4">
+        <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
           Überschrift
         </h4>
       </div>
@@ -248,7 +248,7 @@ exports[`kol-card should render with _label="Überschrift" _level=4 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="kol-heading kol-heading--h4">
+        <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
           Überschrift
         </h4>
       </div>
@@ -265,7 +265,7 @@ exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="kol-heading kol-heading--h5">
+        <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
           Überschrift
         </h5>
       </div>
@@ -282,7 +282,7 @@ exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="kol-heading kol-heading--h5">
+        <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
           Überschrift
         </h5>
       </div>
@@ -300,7 +300,7 @@ exports[`kol-card should render with _label="Überschrift" _level=5 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="kol-heading kol-heading--h5">
+        <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
           Überschrift
         </h5>
       </div>
@@ -317,7 +317,7 @@ exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="kol-heading kol-heading--h6">
+        <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
           Überschrift
         </h6>
       </div>
@@ -334,7 +334,7 @@ exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="kol-heading kol-heading--h6">
+        <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
           Überschrift
         </h6>
       </div>
@@ -352,7 +352,7 @@ exports[`kol-card should render with _label="Überschrift" _level=6 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="kol-heading kol-heading--h6">
+        <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
           Überschrift
         </h6>
       </div>
@@ -369,7 +369,7 @@ exports[`kol-card should render with _label="Überschrift" 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading kol-heading--h1">
+        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
           Überschrift
         </h1>
       </div>
diff --git a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
index e5f62c261f..d9bc48fd14 100644
--- a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=false
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -23,7 +23,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=false
 <kol-details _open="" class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details open" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -42,7 +42,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=true
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details disabled" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -61,7 +61,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=true
 <kol-details _open="" class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details disabled open" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -80,7 +80,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=0 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -99,7 +99,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=1 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -118,7 +118,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=2 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -137,7 +137,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=3 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -156,7 +156,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=4 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -175,7 +175,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=5 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -194,7 +194,7 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=6 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
@@ -213,7 +213,7 @@ exports[`kol-details should render with _label="Zusammenfassung" 1`] = `
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1">
+      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
         <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
       </h1>
       <div class="collapsible__wrapper details__wrapper">
diff --git a/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
index bc304cd707..70a875a94d 100644
--- a/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`kol-heading should render with _label="Headline" _level=0 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <strong class="kol-heading kol-heading--strong">
+    <strong class="kol-heading kol-heading--strong kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </strong>
@@ -14,7 +14,7 @@ exports[`kol-heading should render with _label="Headline" _level=0 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=1 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h1">
+    <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -25,7 +25,7 @@ exports[`kol-heading should render with _label="Headline" _level=1 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=2 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h2 class="kol-heading kol-heading--h2">
+    <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h2>
@@ -36,7 +36,7 @@ exports[`kol-heading should render with _label="Headline" _level=2 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=3 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h3 class="kol-heading kol-heading--h3">
+    <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h3>
@@ -47,7 +47,7 @@ exports[`kol-heading should render with _label="Headline" _level=3 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=4 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h4 class="kol-heading kol-heading--h4">
+    <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h4>
@@ -58,7 +58,7 @@ exports[`kol-heading should render with _label="Headline" _level=4 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=5 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h5 class="kol-heading kol-heading--h5">
+    <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h5>
@@ -69,7 +69,7 @@ exports[`kol-heading should render with _label="Headline" _level=5 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=6 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h6 class="kol-heading kol-heading--h6">
+    <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h6>
@@ -80,7 +80,7 @@ exports[`kol-heading should render with _label="Headline" _level=6 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h1" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h1">
+    <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -91,7 +91,7 @@ exports[`kol-heading should render with _label="Headline" _variant="h1" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h2" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h2">
+    <h1 class="kol-heading kol-heading--h2 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -102,7 +102,7 @@ exports[`kol-heading should render with _label="Headline" _variant="h2" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h3" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h3">
+    <h1 class="kol-heading kol-heading--h3 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -113,7 +113,7 @@ exports[`kol-heading should render with _label="Headline" _variant="h3" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h4" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h4">
+    <h1 class="kol-heading kol-heading--h4 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -124,7 +124,7 @@ exports[`kol-heading should render with _label="Headline" _variant="h4" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h5" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h5">
+    <h1 class="kol-heading kol-heading--h5 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -135,7 +135,7 @@ exports[`kol-heading should render with _label="Headline" _variant="h5" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h6" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h6">
+    <h1 class="kol-heading kol-heading--h6 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -146,7 +146,7 @@ exports[`kol-heading should render with _label="Headline" _variant="h6" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="strong" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--strong">
+    <h1 class="kol-heading kol-heading--strong kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
@@ -157,7 +157,7 @@ exports[`kol-heading should render with _label="Headline" _variant="strong" 1`]
 exports[`kol-heading should render with _label="Headline" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h1">
+    <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
       Headline
       <slot name="expert" slot="expert"></slot>
     </h1>
diff --git a/packages/components/src/functional-components/Heading/Heading.tsx b/packages/components/src/functional-components/Heading/Heading.tsx
index 61c031ef44..d61263f56e 100644
--- a/packages/components/src/functional-components/Heading/Heading.tsx
+++ b/packages/components/src/functional-components/Heading/Heading.tsx
@@ -72,7 +72,7 @@ const KolHeadlineFc: FC<HeadlineProps> = ({ class: classNames, level = MIN_HEADI
 	const finalVariant = variant || HeadlineTag;
 
 	return (
-		<HeadlineTag class={clsx('kol-heading', `kol-heading--${finalVariant}`, classNames)} {...other}>
+		<HeadlineTag class={clsx('kol-heading__headline', `kol-heading--${finalVariant}`, classNames)} {...other}>
 			{children}
 		</HeadlineTag>
 	);
@@ -111,7 +111,7 @@ const KolHeadingFc: FC<HeadingProps> = (
 
 	if (!secondaryHeadline) {
 		return (
-			<KolHeadlineFc class={clsx(classNames)} {...headlineProps}>
+			<KolHeadlineFc class={clsx('kol-heading', classNames)} {...headlineProps}>
 				{children}
 			</KolHeadlineFc>
 		);
@@ -119,12 +119,12 @@ const KolHeadingFc: FC<HeadingProps> = (
 
 	const { class: groupClassNames, ...groupOthers } = HeadingGroupProps;
 	const headlineGroupProps: HGroupProps = {
-		class: clsx(groupClassNames),
+		class: clsx('kol-heading', groupClassNames),
 		...groupOthers,
 	};
 
 	return (
-		<hgroup {...headlineGroupProps}>
+		<hgroup class="kol-heading" {...headlineGroupProps}>
 			<KolHeadlineFc class={classNames} {...headlineProps}>
 				{children}
 			</KolHeadlineFc>
diff --git a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
index 6a5aa121b2..5a808f2f5a 100644
--- a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KolHeadingFc should apply custom class names 1`] = `
-<h1 class="custom-class kol-heading kol-heading--h1">
+<h1 class="custom-class kol-heading kol-heading--h1 kol-heading__headline">
   Custom Class Heading
 </h1>
 `;
 
 exports[`KolHeadingFc should render with a secondary headline 1`] = `
-<hgroup>
-  <h1 class="kol-heading kol-heading--h1">
+<hgroup class="kol-heading">
+  <h1 class="kol-heading--h1 kol-heading__headline">
     Main Heading
   </h1>
   <h2 class="kol-heading__secondary-headline">
@@ -18,13 +18,13 @@ exports[`KolHeadingFc should render with a secondary headline 1`] = `
 `;
 
 exports[`KolHeadingFc should render with a specific level 1`] = `
-<h3 class="kol-heading kol-heading--h3">
+<h3 class="kol-heading kol-heading--h3 kol-heading__headline">
   Level 3 Heading
 </h3>
 `;
 
 exports[`KolHeadingFc should render with default props 1`] = `
-<h1 class="kol-heading kol-heading--h1">
+<h1 class="kol-heading kol-heading--h1 kol-heading__headline">
   Default Heading
 </h1>
 `;
diff --git a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
index 96f431afe8..5a48aed7d4 100644
--- a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`ToastItemFc should render with basic props and status 1`] = `
     <div class="kol-alert__container">
       <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
       <div class="kol-alert__container-content">
-        <strong class="kol-alert__heading kol-heading kol-heading--strong">
+        <strong class="kol-alert__heading kol-heading kol-heading--strong kol-heading__headline">
           Test Toast
         </strong>
       </div>

From 2ef2720de126a312424417d758988e50faaec8ef Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Fri, 6 Dec 2024 14:29:06 +0100
Subject: [PATCH 11/16] test update

Refs: #7035
---
 .../test/__snapshots__/snapshot.spec.tsx.snap |  88 ++--
 .../test/__snapshots__/snapshot.spec.tsx.snap | 480 +++++++++++-------
 .../test/__snapshots__/snapshot.spec.tsx.snap | 176 ++++---
 .../test/__snapshots__/snapshot.spec.tsx.snap |  96 ++--
 .../test/__snapshots__/snapshot.spec.tsx.snap | 150 +++---
 .../functional-components/Heading/Heading.tsx |  10 +-
 .../test/__snapshots__/snapshot.test.tsx.snap |  24 +-
 .../Heading/test/snapshot.test.tsx            |   8 +-
 .../__snapshots__/snapshot.test.tsx.snap      |   8 +-
 9 files changed, 645 insertions(+), 395 deletions(-)

diff --git a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
index 7dd047b5d1..f62f18e6ac 100644
--- a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,9 +4,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -23,9 +25,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible disabled kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -42,9 +46,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 <kol-accordion _open="">
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion open" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -61,9 +67,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 <kol-accordion _open="">
   <template shadowrootmode="open">
     <div class="collapsible disabled kol-accordion open" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -80,9 +88,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -99,9 +109,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=2 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h2 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h2 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-      </h2>
+      <div class="kol-heading">
+        <h2 class="collapsible__heading kol-accordion__heading kol-heading--h2 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+        </h2>
+      </div>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -118,9 +130,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=3 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h3 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h3 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-      </h3>
+      <div class="kol-heading">
+        <h3 class="collapsible__heading kol-accordion__heading kol-heading--h3 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+        </h3>
+      </div>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -137,9 +151,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=4 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h4 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h4 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-      </h4>
+      <div class="kol-heading">
+        <h4 class="collapsible__heading kol-accordion__heading kol-heading--h4 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+        </h4>
+      </div>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -156,9 +172,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=5 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h5 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h5 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-      </h5>
+      <div class="kol-heading">
+        <h5 class="collapsible__heading kol-accordion__heading kol-heading--h5 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+        </h5>
+      </div>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -175,9 +193,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=6 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h6 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h6 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-      </h6>
+      <div class="kol-heading">
+        <h6 class="collapsible__heading kol-accordion__heading kol-heading--h6 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+        </h6>
+      </div>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -194,9 +214,11 @@ exports[`kol-accordion should render with _label="Überschrift" 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <h1 class="collapsible__heading kol-accordion__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
diff --git a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
index b62ab0a540..8e0bee8370 100644
--- a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
@@ -9,9 +9,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
-              Überschrift
-            </h1>
+            <div class="kol-heading">
+              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+                Überschrift
+              </h1>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -32,9 +34,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
-              Überschrift
-            </h1>
+            <div class="kol-heading">
+              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+                Überschrift
+              </h1>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -55,9 +59,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
-              Überschrift
-            </h1>
+            <div class="kol-heading">
+              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+                Überschrift
+              </h1>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -78,9 +84,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
-              Überschrift
-            </h1>
+            <div class="kol-heading">
+              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+                Überschrift
+              </h1>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -101,9 +109,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
-              Überschrift
-            </h1>
+            <div class="kol-heading">
+              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+                Überschrift
+              </h1>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -124,9 +134,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
-              Überschrift
-            </h2>
+            <div class="kol-heading">
+              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+                Überschrift
+              </h2>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -147,9 +159,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
-              Überschrift
-            </h2>
+            <div class="kol-heading">
+              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+                Überschrift
+              </h2>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -170,9 +184,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
-              Überschrift
-            </h2>
+            <div class="kol-heading">
+              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+                Überschrift
+              </h2>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -193,9 +209,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
-              Überschrift
-            </h2>
+            <div class="kol-heading">
+              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+                Überschrift
+              </h2>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -216,9 +234,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
-              Überschrift
-            </h2>
+            <div class="kol-heading">
+              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+                Überschrift
+              </h2>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -239,9 +259,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
-              Überschrift
-            </h3>
+            <div class="kol-heading">
+              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+                Überschrift
+              </h3>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -262,9 +284,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
-              Überschrift
-            </h3>
+            <div class="kol-heading">
+              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+                Überschrift
+              </h3>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -285,9 +309,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
-              Überschrift
-            </h3>
+            <div class="kol-heading">
+              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+                Überschrift
+              </h3>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -308,9 +334,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
-              Überschrift
-            </h3>
+            <div class="kol-heading">
+              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+                Überschrift
+              </h3>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -331,9 +359,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
-              Überschrift
-            </h3>
+            <div class="kol-heading">
+              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+                Überschrift
+              </h3>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -354,9 +384,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
-              Überschrift
-            </h4>
+            <div class="kol-heading">
+              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+                Überschrift
+              </h4>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -377,9 +409,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
-              Überschrift
-            </h4>
+            <div class="kol-heading">
+              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+                Überschrift
+              </h4>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -400,9 +434,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
-              Überschrift
-            </h4>
+            <div class="kol-heading">
+              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+                Überschrift
+              </h4>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -423,9 +459,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
-              Überschrift
-            </h4>
+            <div class="kol-heading">
+              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+                Überschrift
+              </h4>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -446,9 +484,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
-              Überschrift
-            </h4>
+            <div class="kol-heading">
+              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+                Überschrift
+              </h4>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -469,9 +509,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
-              Überschrift
-            </h5>
+            <div class="kol-heading">
+              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+                Überschrift
+              </h5>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -492,9 +534,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
-              Überschrift
-            </h5>
+            <div class="kol-heading">
+              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+                Überschrift
+              </h5>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -515,9 +559,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
-              Überschrift
-            </h5>
+            <div class="kol-heading">
+              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+                Überschrift
+              </h5>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -538,9 +584,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
-              Überschrift
-            </h5>
+            <div class="kol-heading">
+              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+                Überschrift
+              </h5>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -561,9 +609,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
-              Überschrift
-            </h5>
+            <div class="kol-heading">
+              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+                Überschrift
+              </h5>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -584,9 +634,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
-              Überschrift
-            </h6>
+            <div class="kol-heading">
+              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+                Überschrift
+              </h6>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -607,9 +659,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
-              Überschrift
-            </h6>
+            <div class="kol-heading">
+              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+                Überschrift
+              </h6>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -630,9 +684,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
-              Überschrift
-            </h6>
+            <div class="kol-heading">
+              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+                Überschrift
+              </h6>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -653,9 +709,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
-              Überschrift
-            </h6>
+            <div class="kol-heading">
+              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+                Überschrift
+              </h6>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -676,9 +734,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
-              Überschrift
-            </h6>
+            <div class="kol-heading">
+              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+                Überschrift
+              </h6>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -699,9 +759,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
-              Überschrift
-            </h1>
+            <div class="kol-heading">
+              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+                Überschrift
+              </h1>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -722,9 +784,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
-              Überschrift
-            </h1>
+            <div class="kol-heading">
+              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+                Überschrift
+              </h1>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -745,9 +809,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
-              Überschrift
-            </h1>
+            <div class="kol-heading">
+              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+                Überschrift
+              </h1>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -768,9 +834,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
-              Überschrift
-            </h1>
+            <div class="kol-heading">
+              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+                Überschrift
+              </h1>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -791,9 +859,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h1 class="kol-alert__heading kol-heading kol-heading--h1 kol-heading__headline">
-              Überschrift
-            </h1>
+            <div class="kol-heading">
+              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
+                Überschrift
+              </h1>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -814,9 +884,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
-              Überschrift
-            </h2>
+            <div class="kol-heading">
+              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+                Überschrift
+              </h2>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -837,9 +909,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
-              Überschrift
-            </h2>
+            <div class="kol-heading">
+              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+                Überschrift
+              </h2>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -860,9 +934,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
-              Überschrift
-            </h2>
+            <div class="kol-heading">
+              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+                Überschrift
+              </h2>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -883,9 +959,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
-              Überschrift
-            </h2>
+            <div class="kol-heading">
+              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+                Überschrift
+              </h2>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -906,9 +984,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h2 class="kol-alert__heading kol-heading kol-heading--h2 kol-heading__headline">
-              Überschrift
-            </h2>
+            <div class="kol-heading">
+              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
+                Überschrift
+              </h2>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -929,9 +1009,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
-              Überschrift
-            </h3>
+            <div class="kol-heading">
+              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+                Überschrift
+              </h3>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -952,9 +1034,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
-              Überschrift
-            </h3>
+            <div class="kol-heading">
+              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+                Überschrift
+              </h3>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -975,9 +1059,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
-              Überschrift
-            </h3>
+            <div class="kol-heading">
+              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+                Überschrift
+              </h3>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -998,9 +1084,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
-              Überschrift
-            </h3>
+            <div class="kol-heading">
+              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+                Überschrift
+              </h3>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1021,9 +1109,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h3 class="kol-alert__heading kol-heading kol-heading--h3 kol-heading__headline">
-              Überschrift
-            </h3>
+            <div class="kol-heading">
+              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
+                Überschrift
+              </h3>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1044,9 +1134,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
-              Überschrift
-            </h4>
+            <div class="kol-heading">
+              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+                Überschrift
+              </h4>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1067,9 +1159,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
-              Überschrift
-            </h4>
+            <div class="kol-heading">
+              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+                Überschrift
+              </h4>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1090,9 +1184,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
-              Überschrift
-            </h4>
+            <div class="kol-heading">
+              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+                Überschrift
+              </h4>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1113,9 +1209,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
-              Überschrift
-            </h4>
+            <div class="kol-heading">
+              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+                Überschrift
+              </h4>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1136,9 +1234,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h4 class="kol-alert__heading kol-heading kol-heading--h4 kol-heading__headline">
-              Überschrift
-            </h4>
+            <div class="kol-heading">
+              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
+                Überschrift
+              </h4>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1159,9 +1259,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
-              Überschrift
-            </h5>
+            <div class="kol-heading">
+              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+                Überschrift
+              </h5>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1182,9 +1284,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
-              Überschrift
-            </h5>
+            <div class="kol-heading">
+              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+                Überschrift
+              </h5>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1205,9 +1309,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
-              Überschrift
-            </h5>
+            <div class="kol-heading">
+              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+                Überschrift
+              </h5>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1228,9 +1334,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
-              Überschrift
-            </h5>
+            <div class="kol-heading">
+              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+                Überschrift
+              </h5>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1251,9 +1359,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h5 class="kol-alert__heading kol-heading kol-heading--h5 kol-heading__headline">
-              Überschrift
-            </h5>
+            <div class="kol-heading">
+              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
+                Überschrift
+              </h5>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1274,9 +1384,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
-              Überschrift
-            </h6>
+            <div class="kol-heading">
+              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+                Überschrift
+              </h6>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1297,9 +1409,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
-              Überschrift
-            </h6>
+            <div class="kol-heading">
+              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+                Überschrift
+              </h6>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1320,9 +1434,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
-              Überschrift
-            </h6>
+            <div class="kol-heading">
+              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+                Überschrift
+              </h6>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1343,9 +1459,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
-              Überschrift
-            </h6>
+            <div class="kol-heading">
+              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+                Überschrift
+              </h6>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1366,9 +1484,11 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <h6 class="kol-alert__heading kol-heading kol-heading--h6 kol-heading__headline">
-              Überschrift
-            </h6>
+            <div class="kol-heading">
+              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
+                Überschrift
+              </h6>
+            </div>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
diff --git a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
index f36661c4d0..8d97901e1a 100644
--- a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
@@ -5,9 +5,11 @@ exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="kol-heading kol-heading--strong kol-heading__headline">
-          Überschrift
-        </strong>
+        <div class="kol-heading">
+          <strong class="kol-heading--strong kol-heading__headline">
+            Überschrift
+          </strong>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -22,9 +24,11 @@ exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="kol-heading kol-heading--strong kol-heading__headline">
-          Überschrift
-        </strong>
+        <div class="kol-heading">
+          <strong class="kol-heading--strong kol-heading__headline">
+            Überschrift
+          </strong>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -40,9 +44,11 @@ exports[`kol-card should render with _label="Überschrift" _level=0 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <strong class="kol-heading kol-heading--strong kol-heading__headline">
-          Überschrift
-        </strong>
+        <div class="kol-heading">
+          <strong class="kol-heading--strong kol-heading__headline">
+            Überschrift
+          </strong>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -57,9 +63,11 @@ exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
-          Überschrift
-        </h1>
+        <div class="kol-heading">
+          <h1 class="kol-heading--h1 kol-heading__headline">
+            Überschrift
+          </h1>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -74,9 +82,11 @@ exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
-          Überschrift
-        </h1>
+        <div class="kol-heading">
+          <h1 class="kol-heading--h1 kol-heading__headline">
+            Überschrift
+          </h1>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -92,9 +102,11 @@ exports[`kol-card should render with _label="Überschrift" _level=1 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
-          Überschrift
-        </h1>
+        <div class="kol-heading">
+          <h1 class="kol-heading--h1 kol-heading__headline">
+            Überschrift
+          </h1>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -109,9 +121,11 @@ exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
-          Überschrift
-        </h2>
+        <div class="kol-heading">
+          <h2 class="kol-heading--h2 kol-heading__headline">
+            Überschrift
+          </h2>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -126,9 +140,11 @@ exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
-          Überschrift
-        </h2>
+        <div class="kol-heading">
+          <h2 class="kol-heading--h2 kol-heading__headline">
+            Überschrift
+          </h2>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -144,9 +160,11 @@ exports[`kol-card should render with _label="Überschrift" _level=2 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
-          Überschrift
-        </h2>
+        <div class="kol-heading">
+          <h2 class="kol-heading--h2 kol-heading__headline">
+            Überschrift
+          </h2>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -161,9 +179,11 @@ exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
-          Überschrift
-        </h3>
+        <div class="kol-heading">
+          <h3 class="kol-heading--h3 kol-heading__headline">
+            Überschrift
+          </h3>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -178,9 +198,11 @@ exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
-          Überschrift
-        </h3>
+        <div class="kol-heading">
+          <h3 class="kol-heading--h3 kol-heading__headline">
+            Überschrift
+          </h3>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -196,9 +218,11 @@ exports[`kol-card should render with _label="Überschrift" _level=3 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
-          Überschrift
-        </h3>
+        <div class="kol-heading">
+          <h3 class="kol-heading--h3 kol-heading__headline">
+            Überschrift
+          </h3>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -213,9 +237,11 @@ exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
-          Überschrift
-        </h4>
+        <div class="kol-heading">
+          <h4 class="kol-heading--h4 kol-heading__headline">
+            Überschrift
+          </h4>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -230,9 +256,11 @@ exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
-          Überschrift
-        </h4>
+        <div class="kol-heading">
+          <h4 class="kol-heading--h4 kol-heading__headline">
+            Überschrift
+          </h4>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -248,9 +276,11 @@ exports[`kol-card should render with _label="Überschrift" _level=4 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
-          Überschrift
-        </h4>
+        <div class="kol-heading">
+          <h4 class="kol-heading--h4 kol-heading__headline">
+            Überschrift
+          </h4>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -265,9 +295,11 @@ exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
-          Überschrift
-        </h5>
+        <div class="kol-heading">
+          <h5 class="kol-heading--h5 kol-heading__headline">
+            Überschrift
+          </h5>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -282,9 +314,11 @@ exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
-          Überschrift
-        </h5>
+        <div class="kol-heading">
+          <h5 class="kol-heading--h5 kol-heading__headline">
+            Überschrift
+          </h5>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -300,9 +334,11 @@ exports[`kol-card should render with _label="Überschrift" _level=5 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
-          Überschrift
-        </h5>
+        <div class="kol-heading">
+          <h5 class="kol-heading--h5 kol-heading__headline">
+            Überschrift
+          </h5>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -317,9 +353,11 @@ exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
-          Überschrift
-        </h6>
+        <div class="kol-heading">
+          <h6 class="kol-heading--h6 kol-heading__headline">
+            Überschrift
+          </h6>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -334,9 +372,11 @@ exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
-          Überschrift
-        </h6>
+        <div class="kol-heading">
+          <h6 class="kol-heading--h6 kol-heading__headline">
+            Überschrift
+          </h6>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -352,9 +392,11 @@ exports[`kol-card should render with _label="Überschrift" _level=6 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
-          Überschrift
-        </h6>
+        <div class="kol-heading">
+          <h6 class="kol-heading--h6 kol-heading__headline">
+            Überschrift
+          </h6>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
@@ -369,9 +411,11 @@ exports[`kol-card should render with _label="Überschrift" 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
-          Überschrift
-        </h1>
+        <div class="kol-heading">
+          <h1 class="kol-heading--h1 kol-heading__headline">
+            Überschrift
+          </h1>
+        </div>
       </div>
       <div class="content">
         <slot></slot>
diff --git a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
index d9bc48fd14..64b536be61 100644
--- a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,9 +4,11 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=false
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -23,9 +25,11 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=false
 <kol-details _open="" class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details open" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div class="collapsible__content details__content indented-text" id="nonce-control">
@@ -42,9 +46,11 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=true
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details disabled" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -61,9 +67,11 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=true
 <kol-details _open="" class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details disabled open" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div class="collapsible__content details__content indented-text" id="nonce-control">
@@ -80,9 +88,11 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=0 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -99,9 +109,11 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=1 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -118,9 +130,11 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=2 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -137,9 +151,11 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=3 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -156,9 +172,11 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=4 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -175,9 +193,11 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=5 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -194,9 +214,11 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=6 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -213,9 +235,11 @@ exports[`kol-details should render with _label="Zusammenfassung" 1`] = `
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <h1 class="collapsible__heading details__heading kol-heading kol-heading--h1 kol-heading__headline">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-      </h1>
+      <div class="kol-heading">
+        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
+          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+        </h1>
+      </div>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
diff --git a/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
index 70a875a94d..e7379c2270 100644
--- a/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,10 +3,12 @@
 exports[`kol-heading should render with _label="Headline" _level=0 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <strong class="kol-heading kol-heading--strong kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </strong>
+    <div class="kol-heading">
+      <strong class="kol-heading--strong kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </strong>
+    </div>
   </template>
 </kol-heading>
 `;
@@ -14,10 +16,12 @@ exports[`kol-heading should render with _label="Headline" _level=0 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=1 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </h1>
+    <div class="kol-heading">
+      <h1 class="kol-heading--h1 kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </h1>
+    </div>
   </template>
 </kol-heading>
 `;
@@ -25,10 +29,12 @@ exports[`kol-heading should render with _label="Headline" _level=1 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=2 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h2 class="kol-heading kol-heading--h2 kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </h2>
+    <div class="kol-heading">
+      <h2 class="kol-heading--h2 kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </h2>
+    </div>
   </template>
 </kol-heading>
 `;
@@ -36,10 +42,12 @@ exports[`kol-heading should render with _label="Headline" _level=2 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=3 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h3 class="kol-heading kol-heading--h3 kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </h3>
+    <div class="kol-heading">
+      <h3 class="kol-heading--h3 kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </h3>
+    </div>
   </template>
 </kol-heading>
 `;
@@ -47,10 +55,12 @@ exports[`kol-heading should render with _label="Headline" _level=3 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=4 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h4 class="kol-heading kol-heading--h4 kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </h4>
+    <div class="kol-heading">
+      <h4 class="kol-heading--h4 kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </h4>
+    </div>
   </template>
 </kol-heading>
 `;
@@ -58,10 +68,12 @@ exports[`kol-heading should render with _label="Headline" _level=4 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=5 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h5 class="kol-heading kol-heading--h5 kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </h5>
+    <div class="kol-heading">
+      <h5 class="kol-heading--h5 kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </h5>
+    </div>
   </template>
 </kol-heading>
 `;
@@ -69,10 +81,12 @@ exports[`kol-heading should render with _label="Headline" _level=5 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=6 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h6 class="kol-heading kol-heading--h6 kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </h6>
+    <div class="kol-heading">
+      <h6 class="kol-heading--h6 kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </h6>
+    </div>
   </template>
 </kol-heading>
 `;
@@ -80,10 +94,12 @@ exports[`kol-heading should render with _label="Headline" _level=6 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h1" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </h1>
+    <div class="kol-heading">
+      <h1 class="kol-heading--h1 kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </h1>
+    </div>
   </template>
 </kol-heading>
 `;
@@ -91,10 +107,12 @@ exports[`kol-heading should render with _label="Headline" _variant="h1" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h2" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h2 kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </h1>
+    <div class="kol-heading">
+      <h1 class="kol-heading--h2 kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </h1>
+    </div>
   </template>
 </kol-heading>
 `;
@@ -102,10 +120,12 @@ exports[`kol-heading should render with _label="Headline" _variant="h2" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h3" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h3 kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </h1>
+    <div class="kol-heading">
+      <h1 class="kol-heading--h3 kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </h1>
+    </div>
   </template>
 </kol-heading>
 `;
@@ -113,10 +133,12 @@ exports[`kol-heading should render with _label="Headline" _variant="h3" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h4" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h4 kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </h1>
+    <div class="kol-heading">
+      <h1 class="kol-heading--h4 kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </h1>
+    </div>
   </template>
 </kol-heading>
 `;
@@ -124,10 +146,12 @@ exports[`kol-heading should render with _label="Headline" _variant="h4" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h5" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h5 kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </h1>
+    <div class="kol-heading">
+      <h1 class="kol-heading--h5 kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </h1>
+    </div>
   </template>
 </kol-heading>
 `;
@@ -135,10 +159,12 @@ exports[`kol-heading should render with _label="Headline" _variant="h5" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h6" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h6 kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </h1>
+    <div class="kol-heading">
+      <h1 class="kol-heading--h6 kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </h1>
+    </div>
   </template>
 </kol-heading>
 `;
@@ -146,10 +172,12 @@ exports[`kol-heading should render with _label="Headline" _variant="h6" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="strong" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--strong kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </h1>
+    <div class="kol-heading">
+      <h1 class="kol-heading--strong kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </h1>
+    </div>
   </template>
 </kol-heading>
 `;
@@ -157,10 +185,12 @@ exports[`kol-heading should render with _label="Headline" _variant="strong" 1`]
 exports[`kol-heading should render with _label="Headline" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <h1 class="kol-heading kol-heading--h1 kol-heading__headline">
-      Headline
-      <slot name="expert" slot="expert"></slot>
-    </h1>
+    <div class="kol-heading">
+      <h1 class="kol-heading--h1 kol-heading__headline">
+        Headline
+        <slot name="expert" slot="expert"></slot>
+      </h1>
+    </div>
   </template>
 </kol-heading>
 `;
diff --git a/packages/components/src/functional-components/Heading/Heading.tsx b/packages/components/src/functional-components/Heading/Heading.tsx
index d61263f56e..93b86f50a5 100644
--- a/packages/components/src/functional-components/Heading/Heading.tsx
+++ b/packages/components/src/functional-components/Heading/Heading.tsx
@@ -111,9 +111,11 @@ const KolHeadingFc: FC<HeadingProps> = (
 
 	if (!secondaryHeadline) {
 		return (
-			<KolHeadlineFc class={clsx('kol-heading', classNames)} {...headlineProps}>
-				{children}
-			</KolHeadlineFc>
+			<div class="kol-heading">
+				<KolHeadlineFc class={clsx(classNames)} {...headlineProps}>
+					{children}
+				</KolHeadlineFc>
+			</div>
 		);
 	}
 
@@ -124,7 +126,7 @@ const KolHeadingFc: FC<HeadingProps> = (
 	};
 
 	return (
-		<hgroup class="kol-heading" {...headlineGroupProps}>
+		<hgroup {...headlineGroupProps}>
 			<KolHeadlineFc class={classNames} {...headlineProps}>
 				{children}
 			</KolHeadlineFc>
diff --git a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
index 5a808f2f5a..d0d1894d6a 100644
--- a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KolHeadingFc should apply custom class names 1`] = `
-<h1 class="custom-class kol-heading kol-heading--h1 kol-heading__headline">
-  Custom Class Heading
-</h1>
+<div class="kol-heading">
+  <h1 class="custom-class kol-heading--h1 kol-heading__headline">
+    Custom Class Heading
+  </h1>
+</div>
 `;
 
 exports[`KolHeadingFc should render with a secondary headline 1`] = `
@@ -18,13 +20,17 @@ exports[`KolHeadingFc should render with a secondary headline 1`] = `
 `;
 
 exports[`KolHeadingFc should render with a specific level 1`] = `
-<h3 class="kol-heading kol-heading--h3 kol-heading__headline">
-  Level 3 Heading
-</h3>
+<div class="kol-heading">
+  <h3 class="kol-heading--h3 kol-heading__headline">
+    Level 3 Heading
+  </h3>
+</div>
 `;
 
 exports[`KolHeadingFc should render with default props 1`] = `
-<h1 class="kol-heading kol-heading--h1 kol-heading__headline">
-  Default Heading
-</h1>
+<div class="kol-heading">
+  <h1 class="kol-heading--h1 kol-heading__headline">
+    Default Heading
+  </h1>
+</div>
 `;
diff --git a/packages/components/src/functional-components/Heading/test/snapshot.test.tsx b/packages/components/src/functional-components/Heading/test/snapshot.test.tsx
index 922cf53430..48b2366fee 100644
--- a/packages/components/src/functional-components/Heading/test/snapshot.test.tsx
+++ b/packages/components/src/functional-components/Heading/test/snapshot.test.tsx
@@ -8,7 +8,7 @@ describe('KolHeadingFc', () => {
 
 		expect(page.root).toBeDefined();
 		expect(page.root).toMatchSnapshot();
-		expect(page.root?.tagName).toBe('H1');
+		expect(page.root?.firstElementChild?.tagName).toBe('H1');
 		expect(page.root?.textContent).toContain('Default Heading');
 		expect(page.root?.classList.contains('kol-heading')).toBe(true);
 	});
@@ -18,7 +18,7 @@ describe('KolHeadingFc', () => {
 
 		expect(page.root).toBeDefined();
 		expect(page.root).toMatchSnapshot();
-		expect(page.root?.tagName).toBe('H3');
+		expect(page.root?.firstElementChild?.tagName).toBe('H3');
 		expect(page.root?.textContent).toContain('Level 3 Heading');
 		expect(page.root?.classList.contains('kol-heading')).toBe(true);
 	});
@@ -44,8 +44,8 @@ describe('KolHeadingFc', () => {
 
 		expect(page.root).toBeDefined();
 		expect(page.root).toMatchSnapshot();
-		expect(page.root?.tagName).toBe('H1');
-		expect(page.root?.classList.contains('custom-class')).toBe(true);
+		expect(page.root?.firstElementChild?.tagName).toBe('H1');
+		expect(page.root?.firstElementChild?.classList.contains('custom-class')).toBe(true);
 		expect(page.root?.classList.contains('kol-heading')).toBe(true);
 		expect(page.root?.textContent).toContain('Custom Class Heading');
 	});
diff --git a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
index 5a48aed7d4..ddcdc2944c 100644
--- a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
@@ -6,9 +6,11 @@ exports[`ToastItemFc should render with basic props and status 1`] = `
     <div class="kol-alert__container">
       <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
       <div class="kol-alert__container-content">
-        <strong class="kol-alert__heading kol-heading kol-heading--strong kol-heading__headline">
-          Test Toast
-        </strong>
+        <div class="kol-heading">
+          <strong class="kol-alert__heading kol-heading--strong kol-heading__headline">
+            Test Toast
+          </strong>
+        </div>
       </div>
       <kol-button-wc _ariadescription="Test Toast" _hidelabel="" _label="kol-close-alert" _tooltipalign="left" class="close kol-alert__close-button"></kol-button-wc>
     </div>

From 0007484c9cdfd3e23f8166d67f9de6ae6559e4ef Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Fri, 6 Dec 2024 14:34:18 +0100
Subject: [PATCH 12/16] hide-label as modifier in span

Refs: #7035
---
 packages/components/src/components/style.scss               | 2 ++
 packages/components/src/functional-components/Span/Span.tsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/style.scss b/packages/components/src/components/style.scss
index 6ce76845ab..ef0ef99eaf 100644
--- a/packages/components/src/components/style.scss
+++ b/packages/components/src/components/style.scss
@@ -21,6 +21,7 @@
 		/* KolSpan is a layout component with icons in all directions and a label text in the middle. */
 		display: grid;
 		place-items: center;
+
 		/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
 		&__container {
 			display: flex;
@@ -34,6 +35,7 @@
 	}
 
 	/* This is the text label. */
+	[class*='--hide-label'],
 	.hide-label {
 		.kol-span {
 			&__label {
diff --git a/packages/components/src/functional-components/Span/Span.tsx b/packages/components/src/functional-components/Span/Span.tsx
index b08d69eb2e..dd5f669a21 100644
--- a/packages/components/src/functional-components/Span/Span.tsx
+++ b/packages/components/src/functional-components/Span/Span.tsx
@@ -37,7 +37,7 @@ const KolSpanFc: FC<SpanProps> = (props, children) => {
 	}
 
 	return (
-		<span class={clsx('kol-span', { 'hide-label': hideLabel }, classNames)} {...other}>
+		<span class={clsx('kol-span', { 'kol-span--hide-label': hideLabel }, classNames)} {...other}>
 			{isObject(topIconProps) && <IconHelper class="top" {...topIconProps} />}
 			<span class="kol-span__container">
 				{isObject(leftIconProps) && <IconHelper class="left" {...leftIconProps} />}

From d83978e1d7b9a4bcd29bb301332136800096860e Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Fri, 6 Dec 2024 14:36:21 +0100
Subject: [PATCH 13/16] hide-label test update

Refs: #7035
---
 .../components/link/test/__snapshots__/snapshot.spec.tsx.snap   | 2 +-
 .../Span/test/__snapshots__/snapshot.test.tsx.snap              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap
index 97fdb52794..f17af92f95 100644
--- a/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap
@@ -81,7 +81,7 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
     <kol-link-wc>
       <!---->
       <a aria-label="Label (kol-open-link-in-tab)" class="kol-link kol-link--external-link kol-link--hide-label" href="https://example.com" rel="noopener" target="self">
-        <span class="hide-label kol-link__text kol-span">
+        <span class="kol-link__text kol-span kol-span--hide-label">
           <span class="kol-span__container">
             <kol-icon _icons="codicon codicon-home" _label="" class="icon left"></kol-icon>
             <span aria-hidden="true" class="kol-span__label" hidden="">
diff --git a/packages/components/src/functional-components/Span/test/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/Span/test/__snapshots__/snapshot.test.tsx.snap
index d73e3f999e..38c93ad51e 100644
--- a/packages/components/src/functional-components/Span/test/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/Span/test/__snapshots__/snapshot.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`KolSpanFc should allow markdown in label 1`] = `
 `;
 
 exports[`KolSpanFc should hide label when hideLabel is true 1`] = `
-<span class="hide-label kol-span">
+<span class="kol-span kol-span--hide-label">
   <span class="kol-span__container">
     <span aria-hidden="true" class="kol-span__label" hidden=""></span>
   </span>

From 4a6272451c7d3b88b54cad1faab941dda0481acf Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Fri, 6 Dec 2024 14:38:29 +0100
Subject: [PATCH 14/16] testfix

Refs: #7035
---
 .../src/functional-components/Span/test/snapshot.test.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/functional-components/Span/test/snapshot.test.tsx b/packages/components/src/functional-components/Span/test/snapshot.test.tsx
index 68887a930c..d0d4305232 100644
--- a/packages/components/src/functional-components/Span/test/snapshot.test.tsx
+++ b/packages/components/src/functional-components/Span/test/snapshot.test.tsx
@@ -39,7 +39,7 @@ describe('KolSpanFc', () => {
 
 		expect(page.root).toBeDefined();
 		expect(page.root).toMatchSnapshot();
-		expect(page.root?.classList.contains('hide-label')).toBe(true);
+		expect(page.root?.classList.contains('kol-span--hide-label')).toBe(true);
 		expect(page.root?.textContent).not.toContain('Hidden Label');
 	});
 

From 08cba7b7e3986d149fb8c0f308f59d05cee1f348 Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Mon, 9 Dec 2024 10:50:16 +0100
Subject: [PATCH 15/16] pr review changes

Refs: #7035
---
 .../test/__snapshots__/snapshot.spec.tsx.snap |  88 ++--
 .../test/__snapshots__/snapshot.spec.tsx.snap | 480 +++++++-----------
 .../test/__snapshots__/snapshot.spec.tsx.snap | 176 +++----
 .../test/__snapshots__/snapshot.spec.tsx.snap |  96 ++--
 .../test/__snapshots__/snapshot.spec.tsx.snap | 150 +++---
 packages/components/src/components/style.scss |  10 +-
 .../functional-components/Heading/Heading.tsx |  16 +-
 .../test/__snapshots__/snapshot.test.tsx.snap |  30 +-
 .../Heading/test/snapshot.test.tsx            |  20 +-
 .../__snapshots__/snapshot.test.tsx.snap      |   8 +-
 .../default/src/components/heading.scss       |   2 +-
 .../ecl/src/ecl-ec/components/heading.scss    |   2 +-
 .../ecl/src/ecl-eu/components/heading.scss    |   2 +-
 .../itzbund/src/components/heading.scss       |   2 +-
 14 files changed, 416 insertions(+), 666 deletions(-)

diff --git a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
index f62f18e6ac..05338f75c2 100644
--- a/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,11 +4,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -25,11 +23,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible disabled kol-accordion" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -46,11 +42,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 <kol-accordion _open="">
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion open" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -67,11 +61,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 <kol-accordion _open="">
   <template shadowrootmode="open">
     <div class="collapsible disabled kol-accordion open" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -88,11 +80,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -109,11 +99,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=2 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <div class="kol-heading">
-        <h2 class="collapsible__heading kol-accordion__heading kol-heading--h2 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-        </h2>
-      </div>
+      <h2 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h2 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+      </h2>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -130,11 +118,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=3 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <div class="kol-heading">
-        <h3 class="collapsible__heading kol-accordion__heading kol-heading--h3 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-        </h3>
-      </div>
+      <h3 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h3 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+      </h3>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -151,11 +137,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=4 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <div class="kol-heading">
-        <h4 class="collapsible__heading kol-accordion__heading kol-heading--h4 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-        </h4>
-      </div>
+      <h4 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h4 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+      </h4>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -172,11 +156,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=5 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <div class="kol-heading">
-        <h5 class="collapsible__heading kol-accordion__heading kol-heading--h5 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-        </h5>
-      </div>
+      <h5 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h5 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+      </h5>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -193,11 +175,9 @@ exports[`kol-accordion should render with _label="Überschrift" _level=6 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <div class="kol-heading">
-        <h6 class="collapsible__heading kol-accordion__heading kol-heading--h6 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-        </h6>
-      </div>
+      <h6 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h6 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+      </h6>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
@@ -214,11 +194,9 @@ exports[`kol-accordion should render with _label="Überschrift" 1`] = `
 <kol-accordion>
   <template shadowrootmode="open">
     <div class="collapsible kol-accordion" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper kol-accordion__wrapper">
         <div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
diff --git a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
index 8e0bee8370..8189c4343d 100644
--- a/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap
@@ -9,11 +9,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
-                Überschrift
-              </h1>
-            </div>
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
+              Überschrift
+            </h1>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -34,11 +32,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
-                Überschrift
-              </h1>
-            </div>
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
+              Überschrift
+            </h1>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -59,11 +55,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
-                Überschrift
-              </h1>
-            </div>
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
+              Überschrift
+            </h1>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -84,11 +78,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
-                Überschrift
-              </h1>
-            </div>
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
+              Überschrift
+            </h1>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -109,11 +101,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
-                Überschrift
-              </h1>
-            </div>
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
+              Überschrift
+            </h1>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -134,11 +124,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
-                Überschrift
-              </h2>
-            </div>
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
+              Überschrift
+            </h2>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -159,11 +147,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
-                Überschrift
-              </h2>
-            </div>
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
+              Überschrift
+            </h2>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -184,11 +170,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
-                Überschrift
-              </h2>
-            </div>
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
+              Überschrift
+            </h2>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -209,11 +193,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
-                Überschrift
-              </h2>
-            </div>
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
+              Überschrift
+            </h2>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -234,11 +216,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
-                Überschrift
-              </h2>
-            </div>
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
+              Überschrift
+            </h2>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -259,11 +239,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
-                Überschrift
-              </h3>
-            </div>
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
+              Überschrift
+            </h3>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -284,11 +262,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
-                Überschrift
-              </h3>
-            </div>
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
+              Überschrift
+            </h3>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -309,11 +285,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
-                Überschrift
-              </h3>
-            </div>
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
+              Überschrift
+            </h3>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -334,11 +308,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
-                Überschrift
-              </h3>
-            </div>
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
+              Überschrift
+            </h3>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -359,11 +331,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
-                Überschrift
-              </h3>
-            </div>
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
+              Überschrift
+            </h3>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -384,11 +354,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
-                Überschrift
-              </h4>
-            </div>
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
+              Überschrift
+            </h4>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -409,11 +377,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
-                Überschrift
-              </h4>
-            </div>
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
+              Überschrift
+            </h4>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -434,11 +400,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
-                Überschrift
-              </h4>
-            </div>
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
+              Überschrift
+            </h4>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -459,11 +423,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
-                Überschrift
-              </h4>
-            </div>
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
+              Überschrift
+            </h4>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -484,11 +446,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
-                Überschrift
-              </h4>
-            </div>
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
+              Überschrift
+            </h4>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -509,11 +469,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
-                Überschrift
-              </h5>
-            </div>
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
+              Überschrift
+            </h5>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -534,11 +492,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
-                Überschrift
-              </h5>
-            </div>
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
+              Überschrift
+            </h5>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -559,11 +515,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
-                Überschrift
-              </h5>
-            </div>
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
+              Überschrift
+            </h5>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -584,11 +538,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
-                Überschrift
-              </h5>
-            </div>
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
+              Überschrift
+            </h5>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -609,11 +561,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
-                Überschrift
-              </h5>
-            </div>
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
+              Überschrift
+            </h5>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -634,11 +584,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
-                Überschrift
-              </h6>
-            </div>
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
+              Überschrift
+            </h6>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -659,11 +607,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
-                Überschrift
-              </h6>
-            </div>
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
+              Überschrift
+            </h6>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -684,11 +630,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
-                Überschrift
-              </h6>
-            </div>
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
+              Überschrift
+            </h6>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -709,11 +653,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
-                Überschrift
-              </h6>
-            </div>
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
+              Überschrift
+            </h6>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -734,11 +676,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=false _level=
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
-                Überschrift
-              </h6>
-            </div>
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
+              Überschrift
+            </h6>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -759,11 +699,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
-                Überschrift
-              </h1>
-            </div>
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
+              Überschrift
+            </h1>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -784,11 +722,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
-                Überschrift
-              </h1>
-            </div>
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
+              Überschrift
+            </h1>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -809,11 +745,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
-                Überschrift
-              </h1>
-            </div>
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
+              Überschrift
+            </h1>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -834,11 +768,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
-                Überschrift
-              </h1>
-            </div>
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
+              Überschrift
+            </h1>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -859,11 +791,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=1
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h1 class="kol-alert__heading kol-heading--h1 kol-heading__headline">
-                Überschrift
-              </h1>
-            </div>
+            <h1 class="kol-alert__heading kol-headline kol-headline--h1 kol-headline--single">
+              Überschrift
+            </h1>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -884,11 +814,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
-                Überschrift
-              </h2>
-            </div>
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
+              Überschrift
+            </h2>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -909,11 +837,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
-                Überschrift
-              </h2>
-            </div>
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
+              Überschrift
+            </h2>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -934,11 +860,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
-                Überschrift
-              </h2>
-            </div>
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
+              Überschrift
+            </h2>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -959,11 +883,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
-                Überschrift
-              </h2>
-            </div>
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
+              Überschrift
+            </h2>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -984,11 +906,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=2
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h2 class="kol-alert__heading kol-heading--h2 kol-heading__headline">
-                Überschrift
-              </h2>
-            </div>
+            <h2 class="kol-alert__heading kol-headline kol-headline--h2 kol-headline--single">
+              Überschrift
+            </h2>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1009,11 +929,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
-                Überschrift
-              </h3>
-            </div>
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
+              Überschrift
+            </h3>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1034,11 +952,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
-                Überschrift
-              </h3>
-            </div>
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
+              Überschrift
+            </h3>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1059,11 +975,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
-                Überschrift
-              </h3>
-            </div>
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
+              Überschrift
+            </h3>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1084,11 +998,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
-                Überschrift
-              </h3>
-            </div>
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
+              Überschrift
+            </h3>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1109,11 +1021,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=3
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h3 class="kol-alert__heading kol-heading--h3 kol-heading__headline">
-                Überschrift
-              </h3>
-            </div>
+            <h3 class="kol-alert__heading kol-headline kol-headline--h3 kol-headline--single">
+              Überschrift
+            </h3>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1134,11 +1044,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
-                Überschrift
-              </h4>
-            </div>
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
+              Überschrift
+            </h4>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1159,11 +1067,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
-                Überschrift
-              </h4>
-            </div>
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
+              Überschrift
+            </h4>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1184,11 +1090,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
-                Überschrift
-              </h4>
-            </div>
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
+              Überschrift
+            </h4>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1209,11 +1113,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
-                Überschrift
-              </h4>
-            </div>
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
+              Überschrift
+            </h4>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1234,11 +1136,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=4
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h4 class="kol-alert__heading kol-heading--h4 kol-heading__headline">
-                Überschrift
-              </h4>
-            </div>
+            <h4 class="kol-alert__heading kol-headline kol-headline--h4 kol-headline--single">
+              Überschrift
+            </h4>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1259,11 +1159,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
-                Überschrift
-              </h5>
-            </div>
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
+              Überschrift
+            </h5>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1284,11 +1182,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
-                Überschrift
-              </h5>
-            </div>
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
+              Überschrift
+            </h5>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1309,11 +1205,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
-                Überschrift
-              </h5>
-            </div>
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
+              Überschrift
+            </h5>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1334,11 +1228,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
-                Überschrift
-              </h5>
-            </div>
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
+              Überschrift
+            </h5>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1359,11 +1251,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=5
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h5 class="kol-alert__heading kol-heading--h5 kol-heading__headline">
-                Überschrift
-              </h5>
-            </div>
+            <h5 class="kol-alert__heading kol-headline kol-headline--h5 kol-headline--single">
+              Überschrift
+            </h5>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1384,11 +1274,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-comment" _label="kol-message" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
-                Überschrift
-              </h6>
-            </div>
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
+              Überschrift
+            </h6>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1409,11 +1297,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
-                Überschrift
-              </h6>
-            </div>
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
+              Überschrift
+            </h6>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1434,11 +1320,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
-                Überschrift
-              </h6>
-            </div>
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
+              Überschrift
+            </h6>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1459,11 +1343,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-pass" _label="kol-success" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
-                Überschrift
-              </h6>
-            </div>
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
+              Überschrift
+            </h6>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
@@ -1484,11 +1366,9 @@ exports[`kol-alert should render with _label="Überschrift" _alert=true _level=6
         <div class="kol-alert__container">
           <kol-icon _icons="codicon codicon-warning" _label="kol-warning" class="kol-alert__heading-icon"></kol-icon>
           <div class="kol-alert__container-content">
-            <div class="kol-heading">
-              <h6 class="kol-alert__heading kol-heading--h6 kol-heading__headline">
-                Überschrift
-              </h6>
-            </div>
+            <h6 class="kol-alert__heading kol-headline kol-headline--h6 kol-headline--single">
+              Überschrift
+            </h6>
             <div class="kol-alert__content">
               <slot></slot>
             </div>
diff --git a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
index 8d97901e1a..7e086e3379 100644
--- a/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/card/test/__snapshots__/snapshot.spec.tsx.snap
@@ -5,11 +5,9 @@ exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <strong class="kol-heading--strong kol-heading__headline">
-            Überschrift
-          </strong>
-        </div>
+        <strong class="kol-headline kol-headline--single kol-headline--strong">
+          Überschrift
+        </strong>
       </div>
       <div class="content">
         <slot></slot>
@@ -24,11 +22,9 @@ exports[`kol-card should render with _label="Überschrift" _level=0 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <strong class="kol-heading--strong kol-heading__headline">
-            Überschrift
-          </strong>
-        </div>
+        <strong class="kol-headline kol-headline--single kol-headline--strong">
+          Überschrift
+        </strong>
       </div>
       <div class="content">
         <slot></slot>
@@ -44,11 +40,9 @@ exports[`kol-card should render with _label="Überschrift" _level=0 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <strong class="kol-heading--strong kol-heading__headline">
-            Überschrift
-          </strong>
-        </div>
+        <strong class="kol-headline kol-headline--single kol-headline--strong">
+          Überschrift
+        </strong>
       </div>
       <div class="content">
         <slot></slot>
@@ -63,11 +57,9 @@ exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h1 class="kol-heading--h1 kol-heading__headline">
-            Überschrift
-          </h1>
-        </div>
+        <h1 class="kol-headline kol-headline--h1 kol-headline--single">
+          Überschrift
+        </h1>
       </div>
       <div class="content">
         <slot></slot>
@@ -82,11 +74,9 @@ exports[`kol-card should render with _label="Überschrift" _level=1 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h1 class="kol-heading--h1 kol-heading__headline">
-            Überschrift
-          </h1>
-        </div>
+        <h1 class="kol-headline kol-headline--h1 kol-headline--single">
+          Überschrift
+        </h1>
       </div>
       <div class="content">
         <slot></slot>
@@ -102,11 +92,9 @@ exports[`kol-card should render with _label="Überschrift" _level=1 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h1 class="kol-heading--h1 kol-heading__headline">
-            Überschrift
-          </h1>
-        </div>
+        <h1 class="kol-headline kol-headline--h1 kol-headline--single">
+          Überschrift
+        </h1>
       </div>
       <div class="content">
         <slot></slot>
@@ -121,11 +109,9 @@ exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h2 class="kol-heading--h2 kol-heading__headline">
-            Überschrift
-          </h2>
-        </div>
+        <h2 class="kol-headline kol-headline--h2 kol-headline--single">
+          Überschrift
+        </h2>
       </div>
       <div class="content">
         <slot></slot>
@@ -140,11 +126,9 @@ exports[`kol-card should render with _label="Überschrift" _level=2 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h2 class="kol-heading--h2 kol-heading__headline">
-            Überschrift
-          </h2>
-        </div>
+        <h2 class="kol-headline kol-headline--h2 kol-headline--single">
+          Überschrift
+        </h2>
       </div>
       <div class="content">
         <slot></slot>
@@ -160,11 +144,9 @@ exports[`kol-card should render with _label="Überschrift" _level=2 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h2 class="kol-heading--h2 kol-heading__headline">
-            Überschrift
-          </h2>
-        </div>
+        <h2 class="kol-headline kol-headline--h2 kol-headline--single">
+          Überschrift
+        </h2>
       </div>
       <div class="content">
         <slot></slot>
@@ -179,11 +161,9 @@ exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h3 class="kol-heading--h3 kol-heading__headline">
-            Überschrift
-          </h3>
-        </div>
+        <h3 class="kol-headline kol-headline--h3 kol-headline--single">
+          Überschrift
+        </h3>
       </div>
       <div class="content">
         <slot></slot>
@@ -198,11 +178,9 @@ exports[`kol-card should render with _label="Überschrift" _level=3 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h3 class="kol-heading--h3 kol-heading__headline">
-            Überschrift
-          </h3>
-        </div>
+        <h3 class="kol-headline kol-headline--h3 kol-headline--single">
+          Überschrift
+        </h3>
       </div>
       <div class="content">
         <slot></slot>
@@ -218,11 +196,9 @@ exports[`kol-card should render with _label="Überschrift" _level=3 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h3 class="kol-heading--h3 kol-heading__headline">
-            Überschrift
-          </h3>
-        </div>
+        <h3 class="kol-headline kol-headline--h3 kol-headline--single">
+          Überschrift
+        </h3>
       </div>
       <div class="content">
         <slot></slot>
@@ -237,11 +213,9 @@ exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h4 class="kol-heading--h4 kol-heading__headline">
-            Überschrift
-          </h4>
-        </div>
+        <h4 class="kol-headline kol-headline--h4 kol-headline--single">
+          Überschrift
+        </h4>
       </div>
       <div class="content">
         <slot></slot>
@@ -256,11 +230,9 @@ exports[`kol-card should render with _label="Überschrift" _level=4 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h4 class="kol-heading--h4 kol-heading__headline">
-            Überschrift
-          </h4>
-        </div>
+        <h4 class="kol-headline kol-headline--h4 kol-headline--single">
+          Überschrift
+        </h4>
       </div>
       <div class="content">
         <slot></slot>
@@ -276,11 +248,9 @@ exports[`kol-card should render with _label="Überschrift" _level=4 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h4 class="kol-heading--h4 kol-heading__headline">
-            Überschrift
-          </h4>
-        </div>
+        <h4 class="kol-headline kol-headline--h4 kol-headline--single">
+          Überschrift
+        </h4>
       </div>
       <div class="content">
         <slot></slot>
@@ -295,11 +265,9 @@ exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h5 class="kol-heading--h5 kol-heading__headline">
-            Überschrift
-          </h5>
-        </div>
+        <h5 class="kol-headline kol-headline--h5 kol-headline--single">
+          Überschrift
+        </h5>
       </div>
       <div class="content">
         <slot></slot>
@@ -314,11 +282,9 @@ exports[`kol-card should render with _label="Überschrift" _level=5 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h5 class="kol-heading--h5 kol-heading__headline">
-            Überschrift
-          </h5>
-        </div>
+        <h5 class="kol-headline kol-headline--h5 kol-headline--single">
+          Überschrift
+        </h5>
       </div>
       <div class="content">
         <slot></slot>
@@ -334,11 +300,9 @@ exports[`kol-card should render with _label="Überschrift" _level=5 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h5 class="kol-heading--h5 kol-heading__headline">
-            Überschrift
-          </h5>
-        </div>
+        <h5 class="kol-headline kol-headline--h5 kol-headline--single">
+          Überschrift
+        </h5>
       </div>
       <div class="content">
         <slot></slot>
@@ -353,11 +317,9 @@ exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=f
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h6 class="kol-heading--h6 kol-heading__headline">
-            Überschrift
-          </h6>
-        </div>
+        <h6 class="kol-headline kol-headline--h6 kol-headline--single">
+          Überschrift
+        </h6>
       </div>
       <div class="content">
         <slot></slot>
@@ -372,11 +334,9 @@ exports[`kol-card should render with _label="Überschrift" _level=6 _hasCloser=t
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h6 class="kol-heading--h6 kol-heading__headline">
-            Überschrift
-          </h6>
-        </div>
+        <h6 class="kol-headline kol-headline--h6 kol-headline--single">
+          Überschrift
+        </h6>
       </div>
       <div class="content">
         <slot></slot>
@@ -392,11 +352,9 @@ exports[`kol-card should render with _label="Überschrift" _level=6 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h6 class="kol-heading--h6 kol-heading__headline">
-            Überschrift
-          </h6>
-        </div>
+        <h6 class="kol-headline kol-headline--h6 kol-headline--single">
+          Überschrift
+        </h6>
       </div>
       <div class="content">
         <slot></slot>
@@ -411,11 +369,9 @@ exports[`kol-card should render with _label="Überschrift" 1`] = `
   <template shadowrootmode="open">
     <div class="card">
       <div class="header">
-        <div class="kol-heading">
-          <h1 class="kol-heading--h1 kol-heading__headline">
-            Überschrift
-          </h1>
-        </div>
+        <h1 class="kol-headline kol-headline--h1 kol-headline--single">
+          Überschrift
+        </h1>
       </div>
       <div class="content">
         <slot></slot>
diff --git a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
index 64b536be61..75a3551350 100644
--- a/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
@@ -4,11 +4,9 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=false
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -25,11 +23,9 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=false
 <kol-details _open="" class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details open" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div class="collapsible__content details__content indented-text" id="nonce-control">
@@ -46,11 +42,9 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=true
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details disabled" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -67,11 +61,9 @@ exports[`kol-details should render with _label="Zusammenfassung" _disabled=true
 <kol-details _open="" class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details disabled open" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div class="collapsible__content details__content indented-text" id="nonce-control">
@@ -88,11 +80,9 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=0 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -109,11 +99,9 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=1 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -130,11 +118,9 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=2 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -151,11 +137,9 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=3 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -172,11 +156,9 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=4 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -193,11 +175,9 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=5 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -214,11 +194,9 @@ exports[`kol-details should render with _label="Zusammenfassung" _level=6 1`] =
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
@@ -235,11 +213,9 @@ exports[`kol-details should render with _label="Zusammenfassung" 1`] = `
 <kol-details class="kol-details">
   <template shadowrootmode="open">
     <div class="collapsible details" id="nonce">
-      <div class="kol-heading">
-        <h1 class="collapsible__heading details__heading kol-heading--h1 kol-heading__headline">
-          <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
-        </h1>
-      </div>
+      <h1 class="collapsible__heading details__heading kol-headline kol-headline--h1 kol-headline--single">
+        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-chevron-right" _label="Zusammenfassung" class="collapsible__heading-button details__heading-button" slot="expert"></kol-button-wc>
+      </h1>
       <div class="collapsible__wrapper details__wrapper">
         <div class="collapsible__wrapper-animation details__wrapper-animation">
           <div aria-hidden="true" class="collapsible__content details__content indented-text" id="nonce-control">
diff --git a/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
index e7379c2270..b2717f65a3 100644
--- a/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/heading/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,12 +3,10 @@
 exports[`kol-heading should render with _label="Headline" _level=0 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <strong class="kol-heading--strong kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </strong>
-    </div>
+    <strong class="kol-headline kol-headline--single kol-headline--strong">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </strong>
   </template>
 </kol-heading>
 `;
@@ -16,12 +14,10 @@ exports[`kol-heading should render with _label="Headline" _level=0 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=1 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <h1 class="kol-heading--h1 kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </h1>
-    </div>
+    <h1 class="kol-headline kol-headline--h1 kol-headline--single">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </h1>
   </template>
 </kol-heading>
 `;
@@ -29,12 +25,10 @@ exports[`kol-heading should render with _label="Headline" _level=1 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=2 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <h2 class="kol-heading--h2 kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </h2>
-    </div>
+    <h2 class="kol-headline kol-headline--h2 kol-headline--single">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </h2>
   </template>
 </kol-heading>
 `;
@@ -42,12 +36,10 @@ exports[`kol-heading should render with _label="Headline" _level=2 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=3 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <h3 class="kol-heading--h3 kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </h3>
-    </div>
+    <h3 class="kol-headline kol-headline--h3 kol-headline--single">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </h3>
   </template>
 </kol-heading>
 `;
@@ -55,12 +47,10 @@ exports[`kol-heading should render with _label="Headline" _level=3 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=4 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <h4 class="kol-heading--h4 kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </h4>
-    </div>
+    <h4 class="kol-headline kol-headline--h4 kol-headline--single">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </h4>
   </template>
 </kol-heading>
 `;
@@ -68,12 +58,10 @@ exports[`kol-heading should render with _label="Headline" _level=4 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=5 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <h5 class="kol-heading--h5 kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </h5>
-    </div>
+    <h5 class="kol-headline kol-headline--h5 kol-headline--single">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </h5>
   </template>
 </kol-heading>
 `;
@@ -81,12 +69,10 @@ exports[`kol-heading should render with _label="Headline" _level=5 1`] = `
 exports[`kol-heading should render with _label="Headline" _level=6 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <h6 class="kol-heading--h6 kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </h6>
-    </div>
+    <h6 class="kol-headline kol-headline--h6 kol-headline--single">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </h6>
   </template>
 </kol-heading>
 `;
@@ -94,12 +80,10 @@ exports[`kol-heading should render with _label="Headline" _level=6 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h1" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <h1 class="kol-heading--h1 kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </h1>
-    </div>
+    <h1 class="kol-headline kol-headline--h1 kol-headline--single">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </h1>
   </template>
 </kol-heading>
 `;
@@ -107,12 +91,10 @@ exports[`kol-heading should render with _label="Headline" _variant="h1" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h2" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <h1 class="kol-heading--h2 kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </h1>
-    </div>
+    <h1 class="kol-headline kol-headline--h2 kol-headline--single">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </h1>
   </template>
 </kol-heading>
 `;
@@ -120,12 +102,10 @@ exports[`kol-heading should render with _label="Headline" _variant="h2" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h3" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <h1 class="kol-heading--h3 kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </h1>
-    </div>
+    <h1 class="kol-headline kol-headline--h3 kol-headline--single">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </h1>
   </template>
 </kol-heading>
 `;
@@ -133,12 +113,10 @@ exports[`kol-heading should render with _label="Headline" _variant="h3" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h4" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <h1 class="kol-heading--h4 kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </h1>
-    </div>
+    <h1 class="kol-headline kol-headline--h4 kol-headline--single">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </h1>
   </template>
 </kol-heading>
 `;
@@ -146,12 +124,10 @@ exports[`kol-heading should render with _label="Headline" _variant="h4" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h5" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <h1 class="kol-heading--h5 kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </h1>
-    </div>
+    <h1 class="kol-headline kol-headline--h5 kol-headline--single">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </h1>
   </template>
 </kol-heading>
 `;
@@ -159,12 +135,10 @@ exports[`kol-heading should render with _label="Headline" _variant="h5" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="h6" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <h1 class="kol-heading--h6 kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </h1>
-    </div>
+    <h1 class="kol-headline kol-headline--h6 kol-headline--single">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </h1>
   </template>
 </kol-heading>
 `;
@@ -172,12 +146,10 @@ exports[`kol-heading should render with _label="Headline" _variant="h6" 1`] = `
 exports[`kol-heading should render with _label="Headline" _variant="strong" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <h1 class="kol-heading--strong kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </h1>
-    </div>
+    <h1 class="kol-headline kol-headline--single kol-headline--strong">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </h1>
   </template>
 </kol-heading>
 `;
@@ -185,12 +157,10 @@ exports[`kol-heading should render with _label="Headline" _variant="strong" 1`]
 exports[`kol-heading should render with _label="Headline" 1`] = `
 <kol-heading>
   <template shadowrootmode="open">
-    <div class="kol-heading">
-      <h1 class="kol-heading--h1 kol-heading__headline">
-        Headline
-        <slot name="expert" slot="expert"></slot>
-      </h1>
-    </div>
+    <h1 class="kol-headline kol-headline--h1 kol-headline--single">
+      Headline
+      <slot name="expert" slot="expert"></slot>
+    </h1>
   </template>
 </kol-heading>
 `;
diff --git a/packages/components/src/components/style.scss b/packages/components/src/components/style.scss
index ef0ef99eaf..2ed0f629b1 100644
--- a/packages/components/src/components/style.scss
+++ b/packages/components/src/components/style.scss
@@ -34,11 +34,11 @@
 		cursor: pointer;
 	}
 
-	/* This is the text label. */
-	[class*='--hide-label'],
-	.hide-label {
-		.kol-span {
-			&__label {
+	.kol-span {
+		$spanRoot: &;
+
+		&__label {
+			@at-root #{$spanRoot} &--hide-label & {
 				display: none;
 			}
 		}
diff --git a/packages/components/src/functional-components/Heading/Heading.tsx b/packages/components/src/functional-components/Heading/Heading.tsx
index 93b86f50a5..0983de15e7 100644
--- a/packages/components/src/functional-components/Heading/Heading.tsx
+++ b/packages/components/src/functional-components/Heading/Heading.tsx
@@ -72,7 +72,7 @@ const KolHeadlineFc: FC<HeadlineProps> = ({ class: classNames, level = MIN_HEADI
 	const finalVariant = variant || HeadlineTag;
 
 	return (
-		<HeadlineTag class={clsx('kol-heading__headline', `kol-heading--${finalVariant}`, classNames)} {...other}>
+		<HeadlineTag class={clsx('kol-headline', `kol-headline--${finalVariant}`, classNames)} {...other}>
 			{children}
 		</HeadlineTag>
 	);
@@ -88,7 +88,7 @@ const KolSecondaryHeadlineFc: FC<SecondaryHeadlineProps> = ({ class: classNames,
 	const HeadlineTag = getSubHeadlineTag(level + 1);
 
 	return (
-		<HeadlineTag class={clsx('kol-heading__secondary-headline', classNames)} {...other}>
+		<HeadlineTag class={clsx('kol-headline kol-headline--group kol-headline--secondary', classNames)} {...other}>
 			{children}
 		</HeadlineTag>
 	);
@@ -111,23 +111,21 @@ const KolHeadingFc: FC<HeadingProps> = (
 
 	if (!secondaryHeadline) {
 		return (
-			<div class="kol-heading">
-				<KolHeadlineFc class={clsx(classNames)} {...headlineProps}>
-					{children}
-				</KolHeadlineFc>
-			</div>
+			<KolHeadlineFc class={clsx(classNames, 'kol-headline--single')} {...headlineProps}>
+				{children}
+			</KolHeadlineFc>
 		);
 	}
 
 	const { class: groupClassNames, ...groupOthers } = HeadingGroupProps;
 	const headlineGroupProps: HGroupProps = {
-		class: clsx('kol-heading', groupClassNames),
+		class: clsx('kol-heading-group', groupClassNames),
 		...groupOthers,
 	};
 
 	return (
 		<hgroup {...headlineGroupProps}>
-			<KolHeadlineFc class={classNames} {...headlineProps}>
+			<KolHeadlineFc class={clsx(classNames, 'kol-headline--group', 'kol-headline--primary')} {...headlineProps}>
 				{children}
 			</KolHeadlineFc>
 			<KolSecondaryHeadlineFc level={level} {...SecondaryHeadlineProps}>
diff --git a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
index d0d1894d6a..1ea67c1303 100644
--- a/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/Heading/test/__snapshots__/snapshot.test.tsx.snap
@@ -1,36 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KolHeadingFc should apply custom class names 1`] = `
-<div class="kol-heading">
-  <h1 class="custom-class kol-heading--h1 kol-heading__headline">
-    Custom Class Heading
-  </h1>
-</div>
+<h1 class="custom-class kol-headline kol-headline--h1 kol-headline--single">
+  Custom Class Heading
+</h1>
 `;
 
 exports[`KolHeadingFc should render with a secondary headline 1`] = `
-<hgroup class="kol-heading">
-  <h1 class="kol-heading--h1 kol-heading__headline">
+<hgroup class="kol-heading-group">
+  <h1 class="kol-headline kol-headline--group kol-headline--h1 kol-headline--primary">
     Main Heading
   </h1>
-  <h2 class="kol-heading__secondary-headline">
+  <h2 class="kol-headline kol-headline--group kol-headline--secondary">
     Secondary Headline
   </h2>
 </hgroup>
 `;
 
 exports[`KolHeadingFc should render with a specific level 1`] = `
-<div class="kol-heading">
-  <h3 class="kol-heading--h3 kol-heading__headline">
-    Level 3 Heading
-  </h3>
-</div>
+<h3 class="kol-headline kol-headline--h3 kol-headline--single">
+  Level 3 Heading
+</h3>
 `;
 
 exports[`KolHeadingFc should render with default props 1`] = `
-<div class="kol-heading">
-  <h1 class="kol-heading--h1 kol-heading__headline">
-    Default Heading
-  </h1>
-</div>
+<h1 class="kol-headline kol-headline--h1 kol-headline--single">
+  Default Heading
+</h1>
 `;
diff --git a/packages/components/src/functional-components/Heading/test/snapshot.test.tsx b/packages/components/src/functional-components/Heading/test/snapshot.test.tsx
index 48b2366fee..7960a562f6 100644
--- a/packages/components/src/functional-components/Heading/test/snapshot.test.tsx
+++ b/packages/components/src/functional-components/Heading/test/snapshot.test.tsx
@@ -8,9 +8,9 @@ describe('KolHeadingFc', () => {
 
 		expect(page.root).toBeDefined();
 		expect(page.root).toMatchSnapshot();
-		expect(page.root?.firstElementChild?.tagName).toBe('H1');
+		expect(page.root?.tagName).toBe('H1');
 		expect(page.root?.textContent).toContain('Default Heading');
-		expect(page.root?.classList.contains('kol-heading')).toBe(true);
+		expect(page.root?.classList.contains('kol-headline')).toBe(true);
 	});
 
 	it('should render with a specific level', async () => {
@@ -18,9 +18,9 @@ describe('KolHeadingFc', () => {
 
 		expect(page.root).toBeDefined();
 		expect(page.root).toMatchSnapshot();
-		expect(page.root?.firstElementChild?.tagName).toBe('H3');
+		expect(page.root?.tagName).toBe('H3');
 		expect(page.root?.textContent).toContain('Level 3 Heading');
-		expect(page.root?.classList.contains('kol-heading')).toBe(true);
+		expect(page.root?.classList.contains('kol-headline')).toBe(true);
 	});
 
 	it('should render with a secondary headline', async () => {
@@ -34,9 +34,9 @@ describe('KolHeadingFc', () => {
 		expect(page.root?.querySelector('h2')).not.toBeNull();
 		expect(page.root?.textContent).toContain('Main Heading');
 		expect(page.root?.textContent).toContain('Secondary Headline');
-		expect(page.root?.classList.contains('kol-heading')).toBe(true);
-		expect(page.root?.querySelector('h1')?.classList.contains('kol-heading')).toBe(false);
-		expect(page.root?.querySelector('h2')?.classList.contains('kol-heading')).toBe(false);
+		expect(page.root?.classList.contains('kol-heading-group')).toBe(true);
+		expect(page.root?.querySelector('h1')?.classList.contains('kol-headline--single')).toBe(false);
+		expect(page.root?.querySelector('h2')?.classList.contains('kol-headline--single')).toBe(false);
 	});
 
 	it('should apply custom class names', async () => {
@@ -44,9 +44,9 @@ describe('KolHeadingFc', () => {
 
 		expect(page.root).toBeDefined();
 		expect(page.root).toMatchSnapshot();
-		expect(page.root?.firstElementChild?.tagName).toBe('H1');
-		expect(page.root?.firstElementChild?.classList.contains('custom-class')).toBe(true);
-		expect(page.root?.classList.contains('kol-heading')).toBe(true);
+		expect(page.root?.tagName).toBe('H1');
+		expect(page.root?.classList.contains('custom-class')).toBe(true);
+		expect(page.root?.classList.contains('kol-headline')).toBe(true);
 		expect(page.root?.textContent).toContain('Custom Class Heading');
 	});
 });
diff --git a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
index ddcdc2944c..cf88a49a6b 100644
--- a/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
@@ -6,11 +6,9 @@ exports[`ToastItemFc should render with basic props and status 1`] = `
     <div class="kol-alert__container">
       <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
       <div class="kol-alert__container-content">
-        <div class="kol-heading">
-          <strong class="kol-alert__heading kol-heading--strong kol-heading__headline">
-            Test Toast
-          </strong>
-        </div>
+        <strong class="kol-alert__heading kol-headline kol-headline--single kol-headline--strong">
+          Test Toast
+        </strong>
       </div>
       <kol-button-wc _ariadescription="Test Toast" _hidelabel="" _label="kol-close-alert" _tooltipalign="left" class="close kol-alert__close-button"></kol-button-wc>
     </div>
diff --git a/packages/themes/default/src/components/heading.scss b/packages/themes/default/src/components/heading.scss
index a6e7647322..f13d876ab4 100644
--- a/packages/themes/default/src/components/heading.scss
+++ b/packages/themes/default/src/components/heading.scss
@@ -1,7 +1,7 @@
 @import '../mixins/typography';
 
 @layer kol-theme-component {
-	.kol-heading {
+	.kol-headline {
 		&--h1 {
 			@include kol-typography-h1;
 		}
diff --git a/packages/themes/ecl/src/ecl-ec/components/heading.scss b/packages/themes/ecl/src/ecl-ec/components/heading.scss
index 5ff1ced476..73569352ca 100644
--- a/packages/themes/ecl/src/ecl-ec/components/heading.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/heading.scss
@@ -6,7 +6,7 @@
 		font-family: var(--font-family);
 	}
 
-	.kol-heading {
+	.kol-headline {
 		&--h1 {
 			@include kol-typography-h1;
 		}
diff --git a/packages/themes/ecl/src/ecl-eu/components/heading.scss b/packages/themes/ecl/src/ecl-eu/components/heading.scss
index 53806c7633..102e763174 100644
--- a/packages/themes/ecl/src/ecl-eu/components/heading.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/heading.scss
@@ -6,7 +6,7 @@
 		font-family: var(--font-family);
 	}
 
-	.kol-heading {
+	.kol-headline {
 		&--h1 {
 			@include kol-typography-h1;
 		}
diff --git a/packages/themes/itzbund/src/components/heading.scss b/packages/themes/itzbund/src/components/heading.scss
index 4231f0b01f..e21162daff 100644
--- a/packages/themes/itzbund/src/components/heading.scss
+++ b/packages/themes/itzbund/src/components/heading.scss
@@ -1,7 +1,7 @@
 @import '../mixins/typography';
 
 @layer kol-theme-component {
-	.kol-heading {
+	.kol-headline {
 		&--h1 {
 			@include kol-typography-h1;
 		}

From a9ef529c3f3580330dcad99ec1d555b961eba3b3 Mon Sep 17 00:00:00 2001
From: alex_ <alexander.schmidt@codeagle.de>
Date: Mon, 9 Dec 2024 11:15:54 +0100
Subject: [PATCH 16/16] fixed classname change

Refs: #7035
---
 packages/components/src/components/heading/style.scss | 2 +-
 packages/themes/default/src/components/card.scss      | 2 +-
 packages/themes/default/src/global.scss               | 2 +-
 packages/themes/ecl/src/ecl-ec/components/card.scss   | 2 +-
 packages/themes/ecl/src/ecl-eu/components/card.scss   | 2 +-
 packages/themes/itzbund/src/components/card.scss      | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/heading/style.scss b/packages/components/src/components/heading/style.scss
index 6136bf8c7b..148f579055 100644
--- a/packages/components/src/components/heading/style.scss
+++ b/packages/components/src/components/heading/style.scss
@@ -2,7 +2,7 @@
 @import '../style';
 
 @layer kol-component {
-	.kol-heading {
+	.kol-headline {
 		font-size: rem(16);
 	}
 }
diff --git a/packages/themes/default/src/components/card.scss b/packages/themes/default/src/components/card.scss
index 132bd693d9..be856cdab3 100644
--- a/packages/themes/default/src/components/card.scss
+++ b/packages/themes/default/src/components/card.scss
@@ -16,7 +16,7 @@
 		border-radius: var(--border-radius);
 	}
 
-	:host .kol-heading {
+	:host .kol-headline {
 		line-height: 1.75;
 	}
 
diff --git a/packages/themes/default/src/global.scss b/packages/themes/default/src/global.scss
index 862f0b8ba4..d086dac5d2 100644
--- a/packages/themes/default/src/global.scss
+++ b/packages/themes/default/src/global.scss
@@ -45,7 +45,7 @@
 		transition: outline-offset 0.2s linear;
 	}
 
-	.kol-heading {
+	.kol-headline {
 		font-weight: 700;
 	}
 
diff --git a/packages/themes/ecl/src/ecl-ec/components/card.scss b/packages/themes/ecl/src/ecl-ec/components/card.scss
index 1139bfbe76..e80e3409b7 100644
--- a/packages/themes/ecl/src/ecl-ec/components/card.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/card.scss
@@ -14,7 +14,7 @@
 		box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
 	}
 
-	:host .kol-heading {
+	:host .kol-headline {
 		display: inline-flex;
 		font-style: normal;
 		font-weight: 700;
diff --git a/packages/themes/ecl/src/ecl-eu/components/card.scss b/packages/themes/ecl/src/ecl-eu/components/card.scss
index 0672bd76a4..b8f48fd4b1 100644
--- a/packages/themes/ecl/src/ecl-eu/components/card.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/card.scss
@@ -14,7 +14,7 @@
 		box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
 	}
 
-	:host .kol-heading {
+	:host .kol-headline {
 		display: inline-flex;
 		font-style: normal;
 		font-weight: 700;
diff --git a/packages/themes/itzbund/src/components/card.scss b/packages/themes/itzbund/src/components/card.scss
index 8cc21b4722..524cc91b0c 100644
--- a/packages/themes/itzbund/src/components/card.scss
+++ b/packages/themes/itzbund/src/components/card.scss
@@ -11,7 +11,7 @@
 		height: 100%;
 	}
 
-	.kol-heading {
+	.kol-headline {
 		padding: rem(8);
 		display: block;
 		border-bottom-style: solid;