diff --git a/src/es/components/atoms/breadcrumb/Breadcrumb.js b/src/es/components/atoms/breadcrumb/Breadcrumb.js
index 70f381a0..1adb7e0b 100644
--- a/src/es/components/atoms/breadcrumb/Breadcrumb.js
+++ b/src/es/components/atoms/breadcrumb/Breadcrumb.js
@@ -11,7 +11,7 @@ import { Shadow } from '../../prototypes/Shadow.js'
  */
 export default class Breadcrumb extends Shadow() {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex', ...options }, ...args)
   }
 
   connectedCallback () {
diff --git a/src/es/components/atoms/emotionPictures/EmotionPictures.js b/src/es/components/atoms/emotionPictures/EmotionPictures.js
index 1b7401fa..fa704a42 100644
--- a/src/es/components/atoms/emotionPictures/EmotionPictures.js
+++ b/src/es/components/atoms/emotionPictures/EmotionPictures.js
@@ -16,6 +16,7 @@ export default class EmotionPictures extends Intersection() {
     super({
       importMetaUrl: import.meta.url,
       intersectionObserverInit: { rootMargin: '0px', threshold: 0.75 },
+      tabindex: 'no-tabindex',
       ...options
     }, ...args)
 
diff --git a/src/es/components/atoms/logo/Logo.js b/src/es/components/atoms/logo/Logo.js
index 61ad888f..cd2284b1 100644
--- a/src/es/components/atoms/logo/Logo.js
+++ b/src/es/components/atoms/logo/Logo.js
@@ -46,7 +46,7 @@ import { Shadow } from '../../prototypes/Shadow.js'
  */
 export default class Logo extends Shadow() {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex', ...options }, ...args)
 
     this.textSelector = ':not(img):not(a):not(style):not(script)'
     this.setAttribute('lang', document.documentElement.getAttribute('lang') || 'de')
diff --git a/src/es/components/atoms/oneTrust/OneTrust.js b/src/es/components/atoms/oneTrust/OneTrust.js
index 552d4ba0..861600bd 100644
--- a/src/es/components/atoms/oneTrust/OneTrust.js
+++ b/src/es/components/atoms/oneTrust/OneTrust.js
@@ -14,7 +14,7 @@ export default class OneTrust extends Shadow() {
    * @param {any} args
    */
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, mode: 'false', ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, mode: 'false', tabindex: 'no-tabindex', ...options }, ...args)
   }
 
   connectedCallback () {
diff --git a/src/es/components/atoms/translation/Translation.js b/src/es/components/atoms/translation/Translation.js
index 620fa64c..eece626b 100644
--- a/src/es/components/atoms/translation/Translation.js
+++ b/src/es/components/atoms/translation/Translation.js
@@ -9,6 +9,9 @@ import { Shadow } from '../../prototypes/Shadow.js'
 * @type {CustomElementConstructor}
 */
 export default class Translation extends Shadow() {
+  constructor (options = {}, ...args) {
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex-style', ...options }, ...args)
+  }
   static get observedAttributes () {
     return ['data-trans-key', 'key']
   }
diff --git a/src/es/components/atoms/video/Video.js b/src/es/components/atoms/video/Video.js
index de117c05..271977d9 100644
--- a/src/es/components/atoms/video/Video.js
+++ b/src/es/components/atoms/video/Video.js
@@ -41,7 +41,7 @@ import { Shadow } from '../../prototypes/Shadow.js'
  */
 export default class Video extends Shadow() {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex', ...options }, ...args)
     this.sources = (this.getAttribute('sources') && Video.parseAttribute(this.getAttribute('sources'))) || null
   }
 
diff --git a/src/es/components/molecules/bentoGridTeaser/BentoGridTeaser.js b/src/es/components/molecules/bentoGridTeaser/BentoGridTeaser.js
index 7f1101a5..809e0f58 100644
--- a/src/es/components/molecules/bentoGridTeaser/BentoGridTeaser.js
+++ b/src/es/components/molecules/bentoGridTeaser/BentoGridTeaser.js
@@ -1,7 +1,7 @@
 import { Shadow } from '../../prototypes/Shadow.js'
 export default class BentoGridTeaser extends Shadow() {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+      super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex', ...options }, ...args)
   }
 
   connectedCallback () {
diff --git a/src/es/components/molecules/carousel/Carousel.js b/src/es/components/molecules/carousel/Carousel.js
index 98be3391..a52d7ac4 100644
--- a/src/es/components/molecules/carousel/Carousel.js
+++ b/src/es/components/molecules/carousel/Carousel.js
@@ -51,7 +51,7 @@ import { Shadow } from '../../prototypes/Shadow.js'
  */
 export default class MacroCarousel extends Shadow() {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex', ...options }, ...args)
 
     this.macroCarousel = document.createElement('macro-carousel')
     // copy all kids into the macro-carousel
diff --git a/src/es/components/molecules/carouselTwo/CarouselTwo.js b/src/es/components/molecules/carouselTwo/CarouselTwo.js
index b643ef13..49469545 100644
--- a/src/es/components/molecules/carouselTwo/CarouselTwo.js
+++ b/src/es/components/molecules/carouselTwo/CarouselTwo.js
@@ -21,6 +21,7 @@ export default class CarouselTwo extends Mutation() {
     super({
       importMetaUrl: import.meta.url,
       mutationObserverInit: { subtree: true, childList: true },
+      tabindex: 'no-tabindex',
       ...options
     }, ...args)
 
diff --git a/src/es/components/molecules/details/Details.js b/src/es/components/molecules/details/Details.js
index 0dcb9f51..d2107919 100644
--- a/src/es/components/molecules/details/Details.js
+++ b/src/es/components/molecules/details/Details.js
@@ -59,6 +59,7 @@ export const Details = (ChosenHTMLElement = Mutation(Anchor())) => class Details
     super({
       importMetaUrl: import.meta.url,
       mutationObserverInit: { attributes: true, attributeFilter: ['open'] },
+      tabindex: 'no-tabindex',
       ...options
     }, ...args)
 
diff --git a/src/es/components/molecules/dialog/Dialog.js b/src/es/components/molecules/dialog/Dialog.js
index 3f72e037..46a34e3c 100644
--- a/src/es/components/molecules/dialog/Dialog.js
+++ b/src/es/components/molecules/dialog/Dialog.js
@@ -10,7 +10,7 @@ import { Shadow } from '../../prototypes/Shadow.js'
 */
 export default class Dialog extends Shadow() {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex', ...options }, ...args)
 
     /**
      * @param {'show'|'showModal'} [command='show']
@@ -152,8 +152,6 @@ export default class Dialog extends Shadow() {
   renderCSS () {
     this.css = /* css */`
     :host {
-      --outline-style: none;
-      outline: none !important;
       position: relative;
       ${this.hasAttribute('dialog-desktop-height')
         ? `
diff --git a/src/es/components/molecules/emotionCarousel/EmotionCarousel.js b/src/es/components/molecules/emotionCarousel/EmotionCarousel.js
index 4b004932..c05287c5 100644
--- a/src/es/components/molecules/emotionCarousel/EmotionCarousel.js
+++ b/src/es/components/molecules/emotionCarousel/EmotionCarousel.js
@@ -5,7 +5,7 @@ import { Shadow } from '../../prototypes/Shadow.js'
 
 export default class EmotionCarousel extends Shadow() {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex', ...options }, ...args)
     this.emotionPictures
     this.timer
     this.breakPoint = parseInt(self.Environment.mobileBreakpoint().replace('px', ''), 10)
diff --git a/src/es/components/molecules/factsAndFigures/factsAndFigures.js b/src/es/components/molecules/factsAndFigures/factsAndFigures.js
index f7be69e8..80d99bb8 100644
--- a/src/es/components/molecules/factsAndFigures/factsAndFigures.js
+++ b/src/es/components/molecules/factsAndFigures/factsAndFigures.js
@@ -2,7 +2,7 @@ import { Shadow } from '../../prototypes/Shadow.js'
 
 export default class SustainabilityMetrics extends Shadow() {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex', ...options }, ...args)
   }
 
   connectedCallback () {
diff --git a/src/es/components/molecules/historyGallery/HistoryGallery.js b/src/es/components/molecules/historyGallery/HistoryGallery.js
index 1aa2bdf6..75cd8c71 100644
--- a/src/es/components/molecules/historyGallery/HistoryGallery.js
+++ b/src/es/components/molecules/historyGallery/HistoryGallery.js
@@ -1,7 +1,7 @@
 import { Shadow } from '../../prototypes/Shadow.js'
 export default class HistoryGallery extends Shadow() {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex', ...options }, ...args)
   }
 
   connectedCallback () {
diff --git a/src/es/components/molecules/metaHeader/MetaHeader.js b/src/es/components/molecules/metaHeader/MetaHeader.js
index a50b9b5d..8f4827f8 100644
--- a/src/es/components/molecules/metaHeader/MetaHeader.js
+++ b/src/es/components/molecules/metaHeader/MetaHeader.js
@@ -3,7 +3,7 @@ import { Shadow } from '../../prototypes/Shadow.js'
 
 export default class MetaHeader extends Shadow() {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex', ...options }, ...args)
   }
 
   connectedCallback () {
diff --git a/src/es/components/organisms/body/Body.js b/src/es/components/organisms/body/Body.js
index f36d2b6d..8eed530a 100644
--- a/src/es/components/organisms/body/Body.js
+++ b/src/es/components/organisms/body/Body.js
@@ -19,7 +19,7 @@ import { Anchor } from '../../prototypes/Anchor.js'
  */
 export default class Body extends Anchor() {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex-style', ...options }, ...args)
   }
 
   connectedCallback () {
diff --git a/src/es/components/organisms/footer/Footer.js b/src/es/components/organisms/footer/Footer.js
index 40f839f0..3440fa72 100644
--- a/src/es/components/organisms/footer/Footer.js
+++ b/src/es/components/organisms/footer/Footer.js
@@ -28,7 +28,7 @@ import { Shadow } from '../../prototypes/Shadow.js'
  */
 export default class Footer extends Shadow() {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex-style', ...options }, ...args)
 
     this.setAttribute('role', 'navigation')
     this.setAttribute('aria-label', 'Footer')
diff --git a/src/es/components/organisms/grid/Grid.js b/src/es/components/organisms/grid/Grid.js
index e8fa76bb..52609784 100644
--- a/src/es/components/organisms/grid/Grid.js
+++ b/src/es/components/organisms/grid/Grid.js
@@ -13,7 +13,7 @@ import { Shadow } from '../../prototypes/Shadow.js'
  */
 export default class Grid extends Shadow() {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex', ...options }, ...args)
   }
 
   connectedCallback () {
diff --git a/src/es/components/organisms/header/Header.js b/src/es/components/organisms/header/Header.js
index 03b82730..30899ae7 100644
--- a/src/es/components/organisms/header/Header.js
+++ b/src/es/components/organisms/header/Header.js
@@ -41,7 +41,7 @@ import { Shadow } from '../../prototypes/Shadow.js'
  */
 export default class Header extends Shadow() {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex-style', ...options }, ...args)
 
     this.noScroll = () => { window.scroll(0, 0) }
     this.setAttribute('role', 'banner')
diff --git a/src/es/components/organisms/wrapper/Wrapper.js b/src/es/components/organisms/wrapper/Wrapper.js
index f0443d51..cf1ee3e1 100644
--- a/src/es/components/organisms/wrapper/Wrapper.js
+++ b/src/es/components/organisms/wrapper/Wrapper.js
@@ -20,7 +20,7 @@ import Body from '../body/Body.js'
 // extend body for scroll to anchor behavior
 export const Wrapper = (ChosenHTMLElement = Body) => class Wrapper extends ChosenHTMLElement {
   constructor (options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    super({ importMetaUrl: import.meta.url, tabindex: 'no-tabindex-style', ...options }, ...args)
 
     // link behavior made accessible
     if (this.hasAttribute('href')) {