diff --git a/.changeset/quick-eagles-watch.md b/.changeset/quick-eagles-watch.md
new file mode 100644
index 0000000000..3f85069679
--- /dev/null
+++ b/.changeset/quick-eagles-watch.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Removed class `hydrated` in stories because from now on we're using the attribute `data-hydrated` to make components visible after hydration.
diff --git a/.changeset/wise-spies-shave.md b/.changeset/wise-spies-shave.md
new file mode 100644
index 0000000000..66bb2e946f
--- /dev/null
+++ b/.changeset/wise-spies-shave.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/internet-header': major
+'@swisspost/design-system-components': major
+---
+
+Switched stencil hydrated flag from class (`hydrated`) to attribute (`data-hydrated`). This flag indicates when a component finished rendering on the page. If your tests relied on the class being present, please rewrite the selector to use the new attribute selector.
diff --git a/packages/components/cypress/support/commands.ts b/packages/components/cypress/support/commands.ts
index 20f89a741e..64e50b85e3 100644
--- a/packages/components/cypress/support/commands.ts
+++ b/packages/components/cypress/support/commands.ts
@@ -57,7 +57,7 @@ Cypress.Commands.add('getComponents', (id: string, story: string, ...components:
 
   components.forEach(component => {
     const alias = component.replace(/^post-/, '');
-    cy.get(`post-${alias}.hydrated`, { timeout: 30000 }).as(alias);
+    cy.get(`post-${alias}[data-hydrated]`, { timeout: 30000 }).as(alias);
   });
 
   cy.injectAxe();
@@ -67,7 +67,7 @@ Cypress.Commands.add('getSnapshots', (story: string) => {
   cy.visit(`/iframe.html?id=snapshots--${story}`);
 
   const alias = story.replace(/^post-/, '');
-  cy.get(`post-${alias}.hydrated`, { timeout: 30000 }).as(alias);
+  cy.get(`post-${alias}[data-hydrated]`, { timeout: 30000 }).as(alias);
 
   cy.injectAxe();
 });
diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts
index 91308480ed..73a7418ec9 100644
--- a/packages/components/stencil.config.ts
+++ b/packages/components/stencil.config.ts
@@ -10,6 +10,10 @@ export const config: Config = {
   buildDist: true,
   sourceMap: false,
   validatePrimaryPackageOutputTarget: true,
+  hydratedFlag: {
+    name: 'data-hydrated',
+    selector: 'attribute',
+  },
   outputTargets: [
     {
       type: 'dist',
diff --git a/packages/documentation/cypress/e2e/components/header.cy.ts b/packages/documentation/cypress/e2e/components/header.cy.ts
index d45da88164..7e02e63049 100644
--- a/packages/documentation/cypress/e2e/components/header.cy.ts
+++ b/packages/documentation/cypress/e2e/components/header.cy.ts
@@ -2,7 +2,7 @@ describe('Internet-Header', () => {
   describe('Accessibility', () => {
     beforeEach(() => {
       cy.visit('/iframe.html?id=ebb11274-091b-4cb7-9a3f-3e0451c9a865--default');
-      cy.get('swisspost-internet-header.hydrated', { timeout: 30000 }).should('be.visible');
+      cy.get('swisspost-internet-header[data-hydrated]', { timeout: 30000 }).should('be.visible');
       cy.injectAxe();
     });
 
diff --git a/packages/documentation/cypress/snapshots/components/accordion.snapshot.ts b/packages/documentation/cypress/snapshots/components/accordion.snapshot.ts
index 57b70e8e65..dd8157d727 100644
--- a/packages/documentation/cypress/snapshots/components/accordion.snapshot.ts
+++ b/packages/documentation/cypress/snapshots/components/accordion.snapshot.ts
@@ -1,7 +1,7 @@
 describe('Accordion', () => {
   it('default', () => {
     cy.visit('/iframe.html?id=snapshots--accordion');
-    cy.get('post-accordion.hydrated', { timeout: 30000 }).should('be.visible');
+    cy.get('post-accordion[data-hydrated]', { timeout: 30000 }).should('be.visible');
     cy.percySnapshot('Accordions', { widths: [1440] });
   });
 });
diff --git a/packages/documentation/cypress/snapshots/components/card-control.snapshot.ts b/packages/documentation/cypress/snapshots/components/card-control.snapshot.ts
index 1a67a4f51f..17cb0b84f7 100644
--- a/packages/documentation/cypress/snapshots/components/card-control.snapshot.ts
+++ b/packages/documentation/cypress/snapshots/components/card-control.snapshot.ts
@@ -7,7 +7,7 @@ describe('CardControl', () => {
 
   it('post-card-control', () => {
     cy.visit('/iframe.html?id=snapshots--post-card-control');
-    cy.get('post-card-control.hydrated', { timeout: 30000 }).should('be.visible');
+    cy.get('post-card-control[data-hydrated]', { timeout: 30000 }).should('be.visible');
     cy.percySnapshot('Card Controls (Web Component)', { widths: [1440] });
   });
 });
diff --git a/packages/documentation/cypress/snapshots/components/collapsible.snapshot.ts b/packages/documentation/cypress/snapshots/components/collapsible.snapshot.ts
index ba9e465aa2..eda5808e8b 100644
--- a/packages/documentation/cypress/snapshots/components/collapsible.snapshot.ts
+++ b/packages/documentation/cypress/snapshots/components/collapsible.snapshot.ts
@@ -1,7 +1,7 @@
 describe('Collapsible', () => {
   it('default', () => {
     cy.visit('/iframe.html?id=snapshots--collapsible');
-    cy.get('post-collapsible.hydrated', { timeout: 30000 }).should('be.visible');
+    cy.get('post-collapsible[data-hydrated]', { timeout: 30000 }).should('be.visible');
     cy.wait(500); // Wait for collapse animation to run
     cy.percySnapshot('Collapsible');
   });
diff --git a/packages/documentation/cypress/snapshots/components/header.snapshot.ts b/packages/documentation/cypress/snapshots/components/header.snapshot.ts
index 4c2ee02073..210baa0ba5 100644
--- a/packages/documentation/cypress/snapshots/components/header.snapshot.ts
+++ b/packages/documentation/cypress/snapshots/components/header.snapshot.ts
@@ -1,7 +1,7 @@
 describe('Header', () => {
   it('default', () => {
     cy.visit('/iframe.html?id=ebb11274-091b-4cb7-9a3f-3e0451c9a865--default');
-    cy.get('swisspost-internet-header.hydrated.header-loaded', { timeout: 30000 }).should(
+    cy.get('swisspost-internet-header[data-hydrated].header-loaded', { timeout: 30000 }).should(
       'be.visible',
     );
     cy.percySnapshot('Header', { widths: [1440] });
diff --git a/packages/documentation/cypress/snapshots/components/logo.snapshot.ts b/packages/documentation/cypress/snapshots/components/logo.snapshot.ts
index f2e4e309e6..07888b7ce3 100644
--- a/packages/documentation/cypress/snapshots/components/logo.snapshot.ts
+++ b/packages/documentation/cypress/snapshots/components/logo.snapshot.ts
@@ -1,7 +1,7 @@
 describe('Logo', () => {
   it('default', () => {
     cy.visit('/iframe.html?id=snapshots--post-logo');
-    cy.get('post-logo.hydrated', { timeout: 30000 }).should('be.visible');
+    cy.get('post-logo[data-hydrated]', { timeout: 30000 }).should('be.visible');
     cy.percySnapshot('Logos', { widths: [1440] });
   });
 });
diff --git a/packages/documentation/cypress/snapshots/components/tabs.snapshot.ts b/packages/documentation/cypress/snapshots/components/tabs.snapshot.ts
index e81bbe1a4c..a647233c70 100644
--- a/packages/documentation/cypress/snapshots/components/tabs.snapshot.ts
+++ b/packages/documentation/cypress/snapshots/components/tabs.snapshot.ts
@@ -1,7 +1,7 @@
 describe('Tabs', () => {
   it('default', () => {
     cy.visit('/iframe.html?id=snapshots--tabs');
-    cy.get('post-tab-header.hydrated', { timeout: 30000 }).should('be.visible');
+    cy.get('post-tab-header[data-hydrated]', { timeout: 30000 }).should('be.visible');
     cy.percySnapshot('Tabs', { widths: [1440] });
   });
 });
diff --git a/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts b/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts
index 23fd25ff22..50097cfff1 100644
--- a/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts
@@ -4,7 +4,6 @@ import { MetaComponent } from '@root/types';
 import { html, nothing } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { parse } from '@/utils/sass-export';
-import './card-control.styles.scss';
 import scss from '../card-control.module.scss';
 import { coloredBackground } from '@/shared/decorators/dark-background';
 
diff --git a/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.styles.scss b/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.styles.scss
deleted file mode 100644
index e82562cf2b..0000000000
--- a/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.styles.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// This is necessary, because we overrite the css classes by a custom control
-// which removes the hydrated class from the componentn,
-// which then causes the component to be visibly hidden
-
-#story--886fabcf-148b-4054-a2ec-4869668294fb--lined-up {
-  post-card-control {
-    visibility: visible;
-  }
-}
diff --git a/packages/documentation/src/stories/components/popover/popover.stories.ts b/packages/documentation/src/stories/components/popover/popover.stories.ts
index e7e517ba18..4d31a12e59 100644
--- a/packages/documentation/src/stories/components/popover/popover.stories.ts
+++ b/packages/documentation/src/stories/components/popover/popover.stories.ts
@@ -95,7 +95,7 @@ function render(args: Args) {
       </button>
     </div>
     <post-popover
-      class="hydrated bg-${args.backgroundColor}"
+      class="bg-${args.backgroundColor}"
       id="${args.id}"
       placement="${args.placement}"
       ?arrow="${args.arrow}"
diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
index 2bae9646a4..6d9d41e4dc 100644
--- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
+++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
@@ -86,7 +86,7 @@ function render(args: Args) {
     <button class="btn btn-secondary btn-large" data-tooltip-target="${args.id}">Button</button>
     <post-tooltip
       id="${args.id}"
-      class="hydrated bg-${args.backgroundColor}"
+      class="bg-${args.backgroundColor}"
       placement="${ifDefined(args.placement)}"
       arrow="${ifDefined(args.arrow)}"
       delayed="${ifDefined(args.delayed)}"
@@ -108,7 +108,6 @@ export const NonFocusable: StoryObj = {
       <cite data-tooltip-target="${args.id}">This is a cite element with a tooltip on it.</cite>
       <post-tooltip
         id="${args.id}"
-        class="hydrated"
         background-color=" ${ifDefined(args.backgroundColor)}"
         placement="${ifDefined(args.placement)}"
       >
@@ -132,7 +131,7 @@ export const Multiple: StoryObj = {
       </button>
       <post-tooltip
         id="${args.id}"
-        class="hydrated bg-${args.background}"
+        class="bg-${args.background}"
         placement="${ifDefined(args.placement)}"
       >
         I'm the same, no matter what
diff --git a/packages/internet-header/cypress/e2e/header.cy.ts b/packages/internet-header/cypress/e2e/header.cy.ts
index 84aa623c4d..9bfe4a9ade 100644
--- a/packages/internet-header/cypress/e2e/header.cy.ts
+++ b/packages/internet-header/cypress/e2e/header.cy.ts
@@ -9,7 +9,7 @@ describe('header', () => {
 
   context('initial state', () => {
     it('renders', () => {
-      cy.get('swisspost-internet-header', { timeout: 30000 }).should('have.class', 'hydrated');
+      cy.get('swisspost-internet-header', { timeout: 30000 }).should('have.attr', 'data-hydrated');
     });
 
     it(`has nav item 'Briefe versenden' selected`, () => {
diff --git a/packages/internet-header/cypress/e2e/login.cy.ts b/packages/internet-header/cypress/e2e/login.cy.ts
index 6a29a2ef3b..fd3878acad 100644
--- a/packages/internet-header/cypress/e2e/login.cy.ts
+++ b/packages/internet-header/cypress/e2e/login.cy.ts
@@ -36,7 +36,7 @@ describe('login', () => {
         cy.changeArg('language', 'de');
 
         // Assert the header is hydrated
-        cy.get('swisspost-internet-header').should('have.class', 'hydrated');
+        cy.get('swisspost-internet-header').should('have.attr', 'data-hydrated');
 
         // With the modified configuration the login widget should be removed from the DOM
         cy.get('post-klp-login-widget').should('not.exist');
@@ -53,7 +53,7 @@ describe('login', () => {
         prepare(HEADER, 'Default', { config });
         cy.changeArg('language', 'de');
         console.warn(config.de?.header.loginWidgetOptions);
-        cy.get('swisspost-internet-header').should('have.class', 'hydrated');
+        cy.get('swisspost-internet-header').should('have.attr', 'data-hydrated');
         cy.get('a.login-button').should('exist').and('be.visible');
         cy.get('.klp-widget-anonymous').should('not.exist');
       });
@@ -66,7 +66,7 @@ describe('login', () => {
         config.de!.header.isLoginWidgetHidden = false;
         prepare(HEADER, 'Default', { config });
         cy.changeArg('language', 'de');
-        cy.get('swisspost-internet-header').should('have.class', 'hydrated');
+        cy.get('swisspost-internet-header').should('have.attr', 'data-hydrated');
         cy.get('.klp-widget-anonymous').should('exist');
       });
     });
diff --git a/packages/internet-header/cypress/e2e/meta-navigation.cy.ts b/packages/internet-header/cypress/e2e/meta-navigation.cy.ts
index 58318e0df7..6c802bef53 100644
--- a/packages/internet-header/cypress/e2e/meta-navigation.cy.ts
+++ b/packages/internet-header/cypress/e2e/meta-navigation.cy.ts
@@ -102,7 +102,7 @@ describe('meta-navigation', () => {
         cy.changeArg('language', 'de');
 
         // Assert the header is hydrated
-        cy.get('swisspost-internet-header').should('have.class', 'hydrated');
+        cy.get('swisspost-internet-header').should('have.attr', 'data-hydrated');
 
         // With the modified configuration the meta navigation should be removed from the DOM
         cy.get('post-meta-navigation').should('not.exist');
@@ -128,7 +128,7 @@ describe('meta-navigation', () => {
         cy.changeArg('language', 'de');
 
         // Assert the header is hydrated
-        cy.get('swisspost-internet-header').should('have.class', 'hydrated');
+        cy.get('swisspost-internet-header').should('have.attr', 'data-hydrated');
 
         // With the modified configuration the meta navigation should be removed from the DOM
         cy.get('post-meta-navigation').should('not.exist');
diff --git a/packages/internet-header/stencil.config.ts b/packages/internet-header/stencil.config.ts
index ad811cdbb2..a4384998e9 100644
--- a/packages/internet-header/stencil.config.ts
+++ b/packages/internet-header/stencil.config.ts
@@ -7,6 +7,10 @@ export const config: Config = {
   globalStyle: 'src/root.scss',
   buildEs5: 'prod',
   sourceMap: false,
+  hydratedFlag: {
+    name: 'data-hydrated',
+    selector: 'attribute',
+  },
   bundles: [
     {
       components: ['swisspost-internet-header'],