aktuell icon

private/scss/modules/_header.scss

@@ -442,4 +442,5 @@
   color: $white;
   font-weight: 900;
   text-align: center;
+  z-index: 2;
 }

private/scss/modules/_notification.scss

@@ -9,7 +9,7 @@
   box-shadow: 0 0 em(30px) rgba($black, 0.2);
   transform: scale(0);
   opacity: 0;
-  transform-origin: 50% 5%;
+  transform-origin: 70% 5%;
   transition: transform 0.3s $easeOutQuad, opacity 0.3s $easeOutQuad;
   &:before {
     content: '';
@@ -18,7 +18,7 @@
     z-index: -2;
     position: absolute;
     top: em(-10px);
-    right: em(122px);
+    right: em(70px);
     width: em(20px);
     height: em(20px);
     transform: rotate(45deg);
@@ -31,10 +31,33 @@
   .cms-toolbar-expanded & {
     margin-top: 46px;
   }
-  @media screen and (max-width: $small_breakpoint) {
-    transform-origin: 58% 5%;
+  @media screen and (max-width: $medium_breakpoint) {
+    top: 50%;
+    right: 50%;
+    transform: translate(50%, -50%) scale(0);
+    transform-origin: 50% 50%;
+    .notification_open & {
+      transform: translate(50%, -50%) scale(1);
+      &:after {
+        opacity: 0.4;
+        transition: opacity 0.15s $easeOutQuad 0.15s;
+      }
+    }
     &:before {
-      right: em(102px);
+      display: none;
+    }
+    &:after {
+      content: '';
+      display: block;
+      background: $black;
+      position: absolute;
+      z-index: -1;
+      top: -100vh;
+      left: -100vw;
+      right: -100vw;
+      bottom: -100vh;
+      opacity: 0;
+      transition: opacity 0.15s $easeOutQuad;
     }
   }
 }