diff --git a/packages/components/src/components/button-link/shadow.tsx b/packages/components/src/components/button-link/shadow.tsx
index ab7e35d598..7a24cb01ca 100644
--- a/packages/components/src/components/button-link/shadow.tsx
+++ b/packages/components/src/components/button-link/shadow.tsx
@@ -17,7 +17,7 @@ import type {
 	TooltipAlignPropType,
 } from '../../schema';
 import type { JSX } from '@stencil/core';
-import { Component, h, Host, Method, Prop } from '@stencil/core';
+import { Component, h, Method, Prop } from '@stencil/core';
 import { KolButtonWcTag } from '../../core/component-names';
 
 @Component({
@@ -57,32 +57,31 @@ export class KolButtonLink implements ButtonLinkProps, FocusableElement {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-button-link">
-				<KolButtonWcTag
-					ref={this.catchRef}
-					_accessKey={this._accessKey}
-					_ariaControls={this._ariaControls}
-					_ariaDescription={this._ariaDescription}
-					_ariaExpanded={this._ariaExpanded}
-					_ariaSelected={this._ariaSelected}
-					_disabled={this._disabled}
-					_icons={this._icons}
-					_hideLabel={this._hideLabel}
-					_id={this._id}
-					_label={this._label}
-					_name={this._name}
-					_on={this._on}
-					_role="link"
-					_shortKey={this._shortKey}
-					_syncValueBySelector={this._syncValueBySelector}
-					_tabIndex={this._tabIndex}
-					_tooltipAlign={this._tooltipAlign}
-					_type={this._type}
-					_value={this._value}
-				>
-					<slot name="expert" slot="expert"></slot>
-				</KolButtonWcTag>
-			</Host>
+			<KolButtonWcTag
+				class="kol-button-link"
+				ref={this.catchRef}
+				_accessKey={this._accessKey}
+				_ariaControls={this._ariaControls}
+				_ariaDescription={this._ariaDescription}
+				_ariaExpanded={this._ariaExpanded}
+				_ariaSelected={this._ariaSelected}
+				_disabled={this._disabled}
+				_icons={this._icons}
+				_hideLabel={this._hideLabel}
+				_id={this._id}
+				_label={this._label}
+				_name={this._name}
+				_on={this._on}
+				_role="link"
+				_shortKey={this._shortKey}
+				_syncValueBySelector={this._syncValueBySelector}
+				_tabIndex={this._tabIndex}
+				_tooltipAlign={this._tooltipAlign}
+				_type={this._type}
+				_value={this._value}
+			>
+				<slot name="expert" slot="expert"></slot>
+			</KolButtonWcTag>
 		);
 	}
 
diff --git a/packages/components/src/components/button-link/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/button-link/test/__snapshots__/snapshot.spec.tsx.snap
index fb439cf493..2e8aec65d9 100644
--- a/packages/components/src/components/button-link/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/button-link/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-button-link should render with _label="Beschreibung" 1`] = `
-<kol-button-link class="kol-button-link">
+<kol-button-link>
   <template shadowrootmode="open">
-    <kol-button-wc _label="Beschreibung" _role="link" _tooltipalign="top" _type="button">
+    <kol-button-wc _label="Beschreibung" _role="link" _tooltipalign="top" _type="button" class="kol-button-link">
       <slot name="expert" slot="expert"></slot>
     </kol-button-wc>
   </template>
diff --git a/packages/themes/bmf/src/components/button-link.scss b/packages/themes/bmf/src/components/button-link.scss
index eeebdf854d..bd49ce0731 100644
--- a/packages/themes/bmf/src/components/button-link.scss
+++ b/packages/themes/bmf/src/components/button-link.scss
@@ -1,42 +1,44 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	:is(a, button) {
-		color: var(--color-midnight);
-		font-style: normal;
-		font-weight: 400;
-		text-decoration-line: underline;
-		font-size: inherit;
-	}
+	.kol-button-link {
+		:is(a, button) {
+			color: var(--color-midnight);
+			font-style: normal;
+			font-weight: 400;
+			text-decoration-line: underline;
+			font-size: inherit;
 
-	:is(a, button):focus {
-		outline: none;
-	}
+			&:focus {
+				outline: none;
 
-	:is(a, button):focus .kol-span-wc {
-		border-radius: var(--border-radius);
-		outline: rem(2) solid;
-	}
+				.kol-span-wc {
+					border-radius: var(--border-radius);
+					outline: rem(2) solid;
+				}
+			}
 
-	a:hover:not([aria-disabled]),
-	button:hover:not([disabled]) {
-		text-decoration-thickness: 0.25em;
-	}
+			&:visited {
+				color: var(--visited);
+			}
+		}
 
-	:is(a, button):visited {
-		color: var(--visited);
-	}
+		a:hover:not([aria-disabled]),
+		button:hover:not([disabled]) {
+			text-decoration-thickness: 0.25em;
+		}
 
-	.skip {
-		left: rem(-99999);
-		overflow: hidden;
-		position: absolute;
-		z-index: 9999999;
-	}
+		.skip {
+			left: rem(-99999);
+			overflow: hidden;
+			position: absolute;
+			z-index: 9999999;
 
-	.skip:focus {
-		background-color: white;
-		left: unset;
-		position: unset;
+			&:focus {
+				background-color: white;
+				left: unset;
+				position: unset;
+			}
+		}
 	}
 }
diff --git a/packages/themes/default/src/components/button-link.scss b/packages/themes/default/src/components/button-link.scss
index 7129e8c1b4..ef4785d024 100644
--- a/packages/themes/default/src/components/button-link.scss
+++ b/packages/themes/default/src/components/button-link.scss
@@ -1,50 +1,54 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	:is(a, button) {
-		color: var(--color-primary);
-		font-style: normal;
-		font-weight: 400;
-		font-size: inherit;
-	}
-
-	:is(a, button):focus {
-		outline: none;
-	}
-
-	:is(a, button):focus .kol-span-wc {
-		border-radius: var(--border-radius);
-		outline: calc(var(--border-width) * 2) solid;
-	}
-
-	a:hover:not([aria-disabled]),
-	button:hover:not([disabled]) {
-		.kol-span-wc .span-label {
-			text-decoration-thickness: 0.25em;
+	.kol-button-link {
+		:is(a, button) {
+			color: var(--color-primary);
+			font-style: normal;
+			font-weight: 400;
+			font-size: inherit;
+
+			&:focus {
+				outline: none;
+
+				.kol-span-wc {
+					border-radius: var(--border-radius);
+					outline: calc(var(--border-width) * 2) solid;
+				}
+			}
+
+			&:visited {
+				color: var(--visited);
+			}
 		}
-	}
 
-	:is(a, button):visited {
-		color: var(--visited);
-	}
-
-	.skip {
-		left: rem(-99999);
-		overflow: hidden;
-		position: absolute;
-		z-index: 9999999;
-	}
+		a:hover:not([aria-disabled]),
+		button:hover:not([disabled]) {
+			.kol-span-wc {
+				.span-label {
+					text-decoration-thickness: 0.25em;
+				}
+			}
+		}
 
-	.skip:focus {
-		background-color: white;
-		left: unset;
-		position: unset;
-	}
+		.skip {
+			left: rem(-99999);
+			overflow: hidden;
+			position: absolute;
+			z-index: 9999999;
+
+			&:focus {
+				background-color: white;
+				left: unset;
+				position: unset;
+			}
+		}
 
-	.access-key-hint {
-		background-color: var(--color-mute-variant);
-		border-radius: rem(3);
-		color: var(--color-text);
-		padding: 0 0.3em;
+		.badge-text-hint {
+			background-color: var(--color-mute-variant);
+			border-radius: rem(3);
+			color: var(--color-text);
+			padding: 0 0.3em;
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/button-link.scss b/packages/themes/ecl/src/ecl-ec/components/button-link.scss
index d3db6889af..8bcdb8050c 100644
--- a/packages/themes/ecl/src/ecl-ec/components/button-link.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/button-link.scss
@@ -1,50 +1,54 @@
 @import '../../mixins/rem';
 
 @layer kol-theme-component {
-	:is(a, button) {
-		color: var(--color-primary);
-		font-style: normal;
-		font-weight: 400;
-		text-decoration-line: underline;
-		font-size: inherit;
-	}
-
-	:is(a, button):focus {
-		outline: none;
-	}
-
-	:is(a, button):focus .kol-span-wc {
-		border-radius: var(--border-radius);
-		outline: calc(var(--border-width) * 2) solid;
-	}
-
-	:is(a, button):hover {
-		.kol-span-wc .span-label {
-			text-decoration-thickness: 0.25em;
+	.kol-button-link {
+		:is(a, button) {
+			color: var(--color-primary);
+			font-style: normal;
+			font-weight: 400;
+			text-decoration-line: underline;
+			font-size: inherit;
+
+			:focus {
+				outline: none;
+
+				.kol-span-wc {
+					border-radius: var(--border-radius);
+					outline: calc(var(--border-width) * 2) solid;
+				}
+			}
+
+			&:hover {
+				.kol-span-wc {
+					.span-label {
+						text-decoration-thickness: 0.25em;
+					}
+				}
+
+				&:visited {
+					color: var(--visited);
+				}
+			}
 		}
-	}
 
-	:is(a, button):visited {
-		color: var(--visited);
-	}
-
-	.skip {
-		left: rem(-99999);
-		overflow: hidden;
-		position: absolute;
-		z-index: 9999999;
-	}
-
-	.skip:focus {
-		background-color: white;
-		left: unset;
-		position: unset;
-	}
+		.skip {
+			left: rem(-99999);
+			overflow: hidden;
+			position: absolute;
+			z-index: 9999999;
+
+			&:focus {
+				background-color: white;
+				left: unset;
+				position: unset;
+			}
+		}
 
-	.access-key-hint {
-		background-color: var(--color-mute-variant);
-		border-radius: rem(3);
-		color: var(--color-text);
-		padding: 0 0.3em;
+		.badge-text-hint {
+			background-color: var(--color-mute-variant);
+			border-radius: rem(3);
+			color: var(--color-text);
+			padding: 0 0.3em;
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/button-link.scss b/packages/themes/ecl/src/ecl-eu/components/button-link.scss
index d64b47fe8c..1129bf0b67 100644
--- a/packages/themes/ecl/src/ecl-eu/components/button-link.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/button-link.scss
@@ -1,12 +1,14 @@
 @layer kol-theme-component {
-	a,
-	button {
-		appearance: none;
-		color: var(--color-blue);
-		text-decoration: underline;
-	}
-	a:hover,
-	button:hover {
-		color: var(--color-blue-130);
+	.kol-button-link {
+		a,
+		button {
+			appearance: none;
+			color: var(--color-blue);
+			text-decoration: underline;
+
+			&:hover {
+				color: var(--color-blue-130);
+			}
+		}
 	}
 }
diff --git a/packages/themes/itzbund/src/components/button-link.scss b/packages/themes/itzbund/src/components/button-link.scss
index 5603d8fa7e..e40eb1ad39 100644
--- a/packages/themes/itzbund/src/components/button-link.scss
+++ b/packages/themes/itzbund/src/components/button-link.scss
@@ -1,126 +1,158 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	a,
-	button {
-		border-radius: rem(32);
-		font-family: var(--font-family-sans);
-		/* text-transform: uppercase; */
-	}
+	.kol-button-link {
+		a,
+		button {
+			border-radius: rem(32);
+			font-family: var(--font-family-sans);
+			/* text-transform: uppercase; */
 
-	a > .kol-span-wc,
-	button > .kol-span-wc {
-		border-radius: rem(32);
-		border-style: solid;
-		min-width: rem(44);
-		min-height: rem(44);
-		border-width: var(--spacing);
-		font-size: inherit;
-		/*line-height: 1.25em;*/
-		/*padding: calc(4 * var(--spacing));*/
-		padding: 0 rem(16);
-	}
+			.kol-span-wc {
+				border-radius: rem(32);
+				border-style: solid;
+				min-width: rem(44);
+				min-height: rem(44);
+				border-width: var(--spacing);
+				font-size: inherit;
+				/*line-height: 1.25em;*/
+				/*padding: calc(4 * var(--spacing));*/
+				padding: 0 rem(16);
 
-	.button a.hide-label > .kol-span-wc,
-	.button button.hide-label > .kol-span-wc {
-		padding: 0 rem(8);
-	}
+				gap: 0.25em;
+				transition-delay: 0;
+				transition-timing-function: ease-in-out;
+				transition-duration: 0.5s;
+				transition-property: background, color, border-color;
+			}
+		}
 
-	a > .kol-span-wc,
-	button > .kol-span-wc {
-		gap: 0.25em;
-		transition-delay: 0;
-		transition-timing-function: ease-in-out;
-		transition-duration: 0.5s;
-		transition-property: background, color, border-color;
-	}
+		button {
+			a,
+			button {
+				.hide-label {
+					> .kol-span-wc {
+						padding: 0 rem(8);
+					}
+				}
+			}
+		}
 
-	.kol-link-wc.primary > a > .kol-span-wc,
-	.kol-link-wc.primary > a:disabled:hover > .kol-span-wc,
-	button.primary > .kol-span-wc,
-	button.primary:disabled:hover > .kol-span-wc {
-		background-color: var(--color-petrol);
-		border-color: var(--color-petrol);
-		color: var(--color-weiss);
-	}
+		.kol-link-wc,
+		button {
+			&.primary > a,
+			&.primary > a:disabled:hover,
+			&.primary,
+			&.primary:disabled:hover {
+				.kol-span-wc {
+					background-color: var(--color-petrol);
+					border-color: var(--color-petrol);
+					color: var(--color-weiss);
+				}
+			}
 
-	.kol-link-wc.primary > a:hover > .kol-span-wc,
-	.kol-link-wc.primary > a:focus > .kol-span-wc,
-	button.primary:hover > .kol-span-wc,
-	button.primary:focus > .kol-span-wc {
-		background-color: var(--color-achat);
-		border-color: var(--color-achat);
-	}
+			&.primary,
+			&.primary > a {
+				&:hover,
+				&:focus {
+					.kol-span-wc {
+						background-color: var(--color-achat);
+						border-color: var(--color-achat);
+					}
+				}
+			}
 
-	.kol-link-wc.secondary > a > .kol-span-wc,
-	.kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,
-	button.secondary > .kol-span-wc,
-	button.secondary:disabled:hover > .kol-span-wc {
-		background-color: var(--color-weiss);
-		border-color: var(--color-petrol);
-		color: var(--color-petrol);
-	}
+			&.secondary > a,
+			&.secondary > a:disabled:hover,
+			&.secondary > .kol-span-wc,
+			&.secondary:disabled:hover {
+				.kol-span-wc {
+					background-color: var(--color-weiss);
+					border-color: var(--color-petrol);
+					color: var(--color-petrol);
+				}
+			}
 
-	.kol-link-wc.secondary > a:hover > .kol-span-wc,
-	.kol-link-wc.secondary > a:focus > .kol-span-wc,
-	button.secondary:hover > .kol-span-wc,
-	button.secondary:focus > .kol-span-wc {
-		background-color: var(--color-petrol);
-		border-color: var(--color-petrol);
-		color: var(--color-weiss);
-	}
+			&.secondary,
+			&.secondary > a {
+				&:hover,
+				&:focus {
+					.kol-span-wc {
+						background-color: var(--color-petrol);
+						border-color: var(--color-petrol);
+						color: var(--color-weiss);
+					}
+				}
+			}
 
-	.kol-link-wc.normal > a > .kol-span-wc,
-	.kol-link-wc.normal > a:disabled:hover > .kol-span-wc,
-	button.normal > .kol-span-wc,
-	button.normal:disabled:hover > .kol-span-wc {
-		background-color: var(--color-weiss);
-		border-color: var(--color-anthrazit);
-		color: var(--color-anthrazit);
-	}
+			&.normal,
+			&.normal > a,
+			&.normal > a:disabled:hover,
+			&.normal:disabled:hover {
+				.kol-span-wc {
+					background-color: var(--color-weiss);
+					border-color: var(--color-anthrazit);
+					color: var(--color-anthrazit);
+				}
+			}
 
-	.kol-link-wc.normal > a:hover > .kol-span-wc,
-	.kol-link-wc.normal > a:focus > .kol-span-wc,
-	button.normal:hover > .kol-span-wc,
-	button.normal:focus > .kol-span-wc {
-		background-color: var(--color-anthrazit);
-		border-color: var(--color-anthrazit);
-		color: var(--color-weiss);
-	}
+			&.normal,
+			&.normal > a {
+				&:hover,
+				&:focus {
+					.kol-span-wc {
+						background-color: var(--color-anthrazit);
+						border-color: var(--color-anthrazit);
+						color: var(--color-weiss);
+					}
+				}
+			}
 
-	.kol-link-wc.danger > a > .kol-span-wc,
-	.kol-link-wc.danger > a:disabled:hover > .kol-span-wc,
-	button.danger > .kol-span-wc,
-	button.danger:disabled:hover > .kol-span-wc {
-		background-color: var(--color-weiss);
-		border-color: var(--color-blut);
-		color: var(--color-blut);
-	}
+			&.danger,
+			&.danger > a,
+			&.danger > a:disabled:hover,
+			&.danger:disabled:hover {
+				.kol-span-wc {
+					background-color: var(--color-weiss);
+					border-color: var(--color-blut);
+					color: var(--color-blut);
+				}
+			}
 
-	.kol-link-wc.danger > a:hover > .kol-span-wc,
-	.kol-link-wc.danger > a:focus > .kol-span-wc,
-	button.danger:hover > .kol-span-wc,
-	button.danger:focus > .kol-span-wc {
-		background-color: var(--color-blut);
-		border-color: var(--color-blut);
-		color: var(--color-weiss);
-	}
+			&.danger,
+			&.danger > a {
+				&:hover,
+				&:focus {
+					.kol-span-wc {
+						background-color: var(--color-blut);
+						border-color: var(--color-blut);
+						color: var(--color-weiss);
+					}
+				}
+			}
 
-	.kol-link-wc.ghost > a > .kol-span-wc,
-	.kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,
-	button.ghost > .kol-span-wc,
-	button.ghost:disabled:hover > .kol-span-wc {
-		background-color: var(--color-ghost);
-		border-color: transparent;
-		color: var(--color-anthrazit);
-	}
+			&.ghost,
+			&.ghost > a,
+			&.ghost > a:disabled:hover,
+			&.ghost:disabled:hover {
+				.kol-span-wc {
+					background-color: var(--color-ghost);
+					border-color: transparent;
+					color: var(--color-anthrazit);
+				}
+			}
 
-	.kol-link-wc.ghost > a:hover > .kol-span-wc,
-	.kol-link-wc.ghost > a:focus > .kol-span-wc,
-	button.ghost:hover > .kol-span-wc,
-	button.ghost:focus > .kol-span-wc {
-		background-color: var(--color-ghost);
-		border-color: var(--color-ghost);
-		color: var(--color-anthrazit);
+			&.ghost,
+			&.ghost > a {
+				&:hover,
+				&:focus {
+					.kol-span-wc {
+						background-color: var(--color-ghost);
+						border-color: var(--color-ghost);
+						color: var(--color-anthrazit);
+					}
+				}
+			}
+		}
 	}
 }