diff --git a/packages/components/src/components/accordion/shadow.tsx b/packages/components/src/components/accordion/shadow.tsx
index b14820d168..c4c2375372 100644
--- a/packages/components/src/components/accordion/shadow.tsx
+++ b/packages/components/src/components/accordion/shadow.tsx
@@ -1,5 +1,5 @@
 // https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml
-import { Component, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, h, Method, Prop, State, Watch } from '@stencil/core';
 import type { JSX } from '@stencil/core';
 import type {
 	AccordionAPI,
@@ -71,7 +71,7 @@ export class KolAccordion implements AccordionAPI, FocusableElement {
 
 	public render(): JSX.Element {
 		const { _open, _label, _disabled, _level } = this.state;
-		const rootClass = 'accordion';
+		const rootClass = 'kol-accordion';
 
 		const props: CollapsibleProps = {
 			id: this.nonce,
@@ -94,11 +94,9 @@ export class KolAccordion implements AccordionAPI, FocusableElement {
 		};
 
 		return (
-			<Host class="kol-accordion">
-				<KolCollapsibleFc {...props}>
-					<slot />
-				</KolCollapsibleFc>
-			</Host>
+			<KolCollapsibleFc {...props}>
+				<slot />
+			</KolCollapsibleFc>
 		);
 	}
 
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 11f80f1f90..2f4350023e 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
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=false _disabled=false 1`] = `
-<kol-accordion class="kol-accordion">
+<kol-accordion>
   <template shadowrootmode="open">
-    <div class="accordion collapsible" id="nonce">
-      <kol-heading-wc _label="" _level="1" class="accordion__heading collapsible__heading">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-accordion" id="nonce">
+      <kol-heading-wc _label="" _level="1" class="collapsible__heading kol-accordion__heading">
+        <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>
       </kol-heading-wc>
-      <div class="accordion__wrapper collapsible__wrapper">
-        <div class="accordion__wrapper-animation collapsible__wrapper-animation">
-          <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
+      <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">
             <slot></slot>
           </div>
         </div>
@@ -20,15 +20,15 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 `;
 
 exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=false _disabled=true 1`] = `
-<kol-accordion class="kol-accordion">
+<kol-accordion>
   <template shadowrootmode="open">
-    <div class="accordion collapsible disabled" id="nonce">
-      <kol-heading-wc _label="" _level="1" class="accordion__heading collapsible__heading">
-        <kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible disabled kol-accordion" id="nonce">
+      <kol-heading-wc _label="" _level="1" class="collapsible__heading kol-accordion__heading">
+        <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>
       </kol-heading-wc>
-      <div class="accordion__wrapper collapsible__wrapper">
-        <div class="accordion__wrapper-animation collapsible__wrapper-animation">
-          <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
+      <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">
             <slot></slot>
           </div>
         </div>
@@ -39,15 +39,15 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
 `;
 
 exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=true _disabled=false 1`] = `
-<kol-accordion _open="" class="kol-accordion">
+<kol-accordion _open="">
   <template shadowrootmode="open">
-    <div class="accordion collapsible open" id="nonce">
-      <kol-heading-wc _label="" _level="1" class="accordion__heading collapsible__heading">
-        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-remove" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-accordion open" id="nonce">
+      <kol-heading-wc _label="" _level="1" class="collapsible__heading kol-accordion__heading">
+        <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>
       </kol-heading-wc>
-      <div class="accordion__wrapper collapsible__wrapper">
-        <div class="accordion__wrapper-animation collapsible__wrapper-animation">
-          <div class="accordion__content collapsible__content" id="nonce-control">
+      <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">
             <slot></slot>
           </div>
         </div>
@@ -58,15 +58,15 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 `;
 
 exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=true _disabled=true 1`] = `
-<kol-accordion _open="" class="kol-accordion">
+<kol-accordion _open="">
   <template shadowrootmode="open">
-    <div class="accordion collapsible disabled open" id="nonce">
-      <kol-heading-wc _label="" _level="1" class="accordion__heading collapsible__heading">
-        <kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-remove" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible disabled kol-accordion open" id="nonce">
+      <kol-heading-wc _label="" _level="1" class="collapsible__heading kol-accordion__heading">
+        <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>
       </kol-heading-wc>
-      <div class="accordion__wrapper collapsible__wrapper">
-        <div class="accordion__wrapper-animation collapsible__wrapper-animation">
-          <div class="accordion__content collapsible__content" id="nonce-control">
+      <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">
             <slot></slot>
           </div>
         </div>
@@ -77,15 +77,15 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
 `;
 
 exports[`kol-accordion should render with _label="Überschrift" _level=1 1`] = `
-<kol-accordion class="kol-accordion">
+<kol-accordion>
   <template shadowrootmode="open">
-    <div class="accordion collapsible" id="nonce">
-      <kol-heading-wc _label="" _level="1" class="accordion__heading collapsible__heading">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-accordion" id="nonce">
+      <kol-heading-wc _label="" _level="1" class="collapsible__heading kol-accordion__heading">
+        <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>
       </kol-heading-wc>
-      <div class="accordion__wrapper collapsible__wrapper">
-        <div class="accordion__wrapper-animation collapsible__wrapper-animation">
-          <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
+      <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">
             <slot></slot>
           </div>
         </div>
@@ -96,15 +96,15 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 1`] = `
 `;
 
 exports[`kol-accordion should render with _label="Überschrift" _level=2 1`] = `
-<kol-accordion class="kol-accordion">
+<kol-accordion>
   <template shadowrootmode="open">
-    <div class="accordion collapsible" id="nonce">
-      <kol-heading-wc _label="" _level="2" class="accordion__heading collapsible__heading">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-accordion" id="nonce">
+      <kol-heading-wc _label="" _level="2" class="collapsible__heading kol-accordion__heading">
+        <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>
       </kol-heading-wc>
-      <div class="accordion__wrapper collapsible__wrapper">
-        <div class="accordion__wrapper-animation collapsible__wrapper-animation">
-          <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
+      <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">
             <slot></slot>
           </div>
         </div>
@@ -115,15 +115,15 @@ exports[`kol-accordion should render with _label="Überschrift" _level=2 1`] = `
 `;
 
 exports[`kol-accordion should render with _label="Überschrift" _level=3 1`] = `
-<kol-accordion class="kol-accordion">
+<kol-accordion>
   <template shadowrootmode="open">
-    <div class="accordion collapsible" id="nonce">
-      <kol-heading-wc _label="" _level="3" class="accordion__heading collapsible__heading">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-accordion" id="nonce">
+      <kol-heading-wc _label="" _level="3" class="collapsible__heading kol-accordion__heading">
+        <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>
       </kol-heading-wc>
-      <div class="accordion__wrapper collapsible__wrapper">
-        <div class="accordion__wrapper-animation collapsible__wrapper-animation">
-          <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
+      <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">
             <slot></slot>
           </div>
         </div>
@@ -134,15 +134,15 @@ exports[`kol-accordion should render with _label="Überschrift" _level=3 1`] = `
 `;
 
 exports[`kol-accordion should render with _label="Überschrift" _level=4 1`] = `
-<kol-accordion class="kol-accordion">
+<kol-accordion>
   <template shadowrootmode="open">
-    <div class="accordion collapsible" id="nonce">
-      <kol-heading-wc _label="" _level="4" class="accordion__heading collapsible__heading">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-accordion" id="nonce">
+      <kol-heading-wc _label="" _level="4" class="collapsible__heading kol-accordion__heading">
+        <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>
       </kol-heading-wc>
-      <div class="accordion__wrapper collapsible__wrapper">
-        <div class="accordion__wrapper-animation collapsible__wrapper-animation">
-          <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
+      <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">
             <slot></slot>
           </div>
         </div>
@@ -153,15 +153,15 @@ exports[`kol-accordion should render with _label="Überschrift" _level=4 1`] = `
 `;
 
 exports[`kol-accordion should render with _label="Überschrift" _level=5 1`] = `
-<kol-accordion class="kol-accordion">
+<kol-accordion>
   <template shadowrootmode="open">
-    <div class="accordion collapsible" id="nonce">
-      <kol-heading-wc _label="" _level="5" class="accordion__heading collapsible__heading">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-accordion" id="nonce">
+      <kol-heading-wc _label="" _level="5" class="collapsible__heading kol-accordion__heading">
+        <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>
       </kol-heading-wc>
-      <div class="accordion__wrapper collapsible__wrapper">
-        <div class="accordion__wrapper-animation collapsible__wrapper-animation">
-          <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
+      <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">
             <slot></slot>
           </div>
         </div>
@@ -172,15 +172,15 @@ exports[`kol-accordion should render with _label="Überschrift" _level=5 1`] = `
 `;
 
 exports[`kol-accordion should render with _label="Überschrift" _level=6 1`] = `
-<kol-accordion class="kol-accordion">
+<kol-accordion>
   <template shadowrootmode="open">
-    <div class="accordion collapsible" id="nonce">
-      <kol-heading-wc _label="" _level="6" class="accordion__heading collapsible__heading">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-accordion" id="nonce">
+      <kol-heading-wc _label="" _level="6" class="collapsible__heading kol-accordion__heading">
+        <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>
       </kol-heading-wc>
-      <div class="accordion__wrapper collapsible__wrapper">
-        <div class="accordion__wrapper-animation collapsible__wrapper-animation">
-          <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
+      <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">
             <slot></slot>
           </div>
         </div>
@@ -191,15 +191,15 @@ exports[`kol-accordion should render with _label="Überschrift" _level=6 1`] = `
 `;
 
 exports[`kol-accordion should render with _label="Überschrift" 1`] = `
-<kol-accordion class="kol-accordion">
+<kol-accordion>
   <template shadowrootmode="open">
-    <div class="accordion collapsible" id="nonce">
-      <kol-heading-wc _label="" _level="1" class="accordion__heading collapsible__heading">
-        <kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="accordion__heading-button collapsible__heading-button" slot="expert"></kol-button-wc>
+    <div class="collapsible kol-accordion" id="nonce">
+      <kol-heading-wc _label="" _level="1" class="collapsible__heading kol-accordion__heading">
+        <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>
       </kol-heading-wc>
-      <div class="accordion__wrapper collapsible__wrapper">
-        <div class="accordion__wrapper-animation collapsible__wrapper-animation">
-          <div aria-hidden="true" class="accordion__content collapsible__content" id="nonce-control">
+      <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">
             <slot></slot>
           </div>
         </div>
diff --git a/packages/themes/bmf/src/components/accordion.scss b/packages/themes/bmf/src/components/accordion.scss
index 752060a919..6e0c742942 100644
--- a/packages/themes/bmf/src/components/accordion.scss
+++ b/packages/themes/bmf/src/components/accordion.scss
@@ -8,7 +8,7 @@
 		font-size: rem(16);
 	}
 
-	.accordion {
+	.kol-accordion {
 		width: 100%;
 		height: 100%;
 		display: grid;
diff --git a/packages/themes/default/src/components/accordion.scss b/packages/themes/default/src/components/accordion.scss
index 5ea0811765..2ec8ae10e3 100644
--- a/packages/themes/default/src/components/accordion.scss
+++ b/packages/themes/default/src/components/accordion.scss
@@ -8,7 +8,7 @@
 		font-family: var(--font-family);
 	}
 
-	.accordion {
+	.kol-accordion {
 		width: 100%;
 		height: 100%;
 		display: grid;
diff --git a/packages/themes/ecl/src/ecl-ec/components/accordion.scss b/packages/themes/ecl/src/ecl-ec/components/accordion.scss
index 4c4f98fea7..834ed617bb 100644
--- a/packages/themes/ecl/src/ecl-ec/components/accordion.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/accordion.scss
@@ -6,7 +6,7 @@
 		font-size: rem(16);
 	}
 
-	.accordion {
+	.kol-accordion {
 		background-color: var(--color-grey-5);
 		border-color: var(--color-grey-25);
 		border-style: solid;
diff --git a/packages/themes/ecl/src/ecl-eu/components/accordion.scss b/packages/themes/ecl/src/ecl-eu/components/accordion.scss
index 137700e8ba..c68d788ee6 100644
--- a/packages/themes/ecl/src/ecl-eu/components/accordion.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/accordion.scss
@@ -6,7 +6,7 @@
 		font-size: rem(16);
 	}
 
-	.accordion {
+	.kol-accordion {
 		border-radius: rem(8);
 		box-shadow:
 			0 rem(2) rem(4) rgb(9 49 142 / 8%),
diff --git a/packages/themes/itzbund/src/components/accordion.scss b/packages/themes/itzbund/src/components/accordion.scss
index c2b613bedf..93609c7737 100644
--- a/packages/themes/itzbund/src/components/accordion.scss
+++ b/packages/themes/itzbund/src/components/accordion.scss
@@ -7,7 +7,7 @@
 		font-size: rem(16);
 	}
 
-	.accordion {
+	.kol-accordion {
 		box-sizing: border-box;
 		width: 100%;
 		height: 100%;