fix: Update z-indices to avoid layouting issues (#434)

Update the z-indices according to the following order (lowest to
highest):

```
.o-interactive-map__controls (removed z-index, had no effect)
.o-dropdown__menu (removed z-index, should inherit from context)
.overlay--content
.o-aside
.overlay--search
#search (+ .pagefind-ui__form::before)
.o-header
.o-header__skip-link
.o-header__curtain
.o-header__nav--open nav
.a-snackbar
```

I took the line number and multiplied it by 2 to give some flexibility
to add new indices in between in the future.

Resolves #432
Resolves #425
Resolves #406

Author: MoritzWeber0

assets/js/contentNavigation.js

@@ -20,13 +20,13 @@ const initAside = () => {
     asideContent.removeAttribute("role");
     asideContent.setAttribute("aria-hidden", "true");
     handleBtn.setAttribute("aria-expanded", "false");
-    overlay.classList.remove("overlay--show");
+    overlay.classList.remove("overlay--show", "overlay--content");
   };
 
   const openSheet = () => {
     isClosed = false;
     aside.classList.add("o-aside--open");
-    overlay.classList.add("overlay--show");
+    overlay.classList.add("overlay--show", "overlay--content");
     asideContent.setAttribute("role", "dialog");
     asideContent.setAttribute("aria-hidden", "false");
     handleBtn.setAttribute("aria-expanded", "true");

assets/js/search.js

@@ -50,13 +50,13 @@ const initSearch = () => {
 
   const closeSearch = () => {
     search.querySelector(".pagefind-ui__search-clear").click();
-    overlay.classList.remove("overlay--show", "overlay--show-lv5");
+    overlay.classList.remove("overlay--show", "overlay--search");
     search.classList.remove("o-search--show");
     updateSearchButtonLabels(false);
   };
 
   const openSearch = () => {
-    overlay.classList.add("overlay--show", "overlay--show-lv5");
+    overlay.classList.add("overlay--show", "overlay--search");
     search.classList.add("o-search--show");
     searchElement.focus();
     search.scrollIntoView({ behavior: "smooth", block: "start" });

assets/sass/anchorlink.scss

@@ -88,7 +88,7 @@
   align-self: flex-start;
   margin: 1rem;
   text-wrap: balance;
-  z-index: 1000;
+  z-index: 22;
 }
 
 .a-snackbar--show {

assets/sass/contentNavigation.scss

@@ -5,7 +5,7 @@
   font-size: 1.4rem;
   line-height: 1.5;
   margin-right: 0;
-  z-index: 3;
+  z-index: 8;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;

assets/sass/dropdown.scss

@@ -43,7 +43,6 @@
   margin-bottom: 0;
   padding-left: 0;
   box-shadow: var(--box-shadow);
-  z-index: 200;
   border: var(--border);
 
   &--above {

assets/sass/interactiveMap.scss

@@ -22,7 +22,6 @@
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    z-index: 3;
 
     @media print {
       display: none;

assets/sass/navigation.scss

@@ -4,7 +4,7 @@
   top: 0;
   box-shadow: 0 0.4rem 1rem 0 rgba(0, 0, 0, 0.1);
   background-color: var(--bg-default);
-  z-index: 7;
+  z-index: 14;
   height: 6rem;
   padding-left: calc((100vw - 100%) / 2);
   border-bottom: var(--border);
@@ -30,7 +30,7 @@
   background-color: rgba(0, 0, 0, 0.8);
   inset: 0;
   position: fixed;
-  z-index: 2;
+  z-index: 18;
 }
 
 .o-header__nav {
@@ -108,7 +108,7 @@ menu > li > menu {
   background-color: var(--bg-neutral);
   border-radius: var(--border-radius-s);
   color: var(--bg-default);
-  z-index: 100;
+  z-index: 16;
 
   &:focus {
     opacity: 1;
@@ -251,7 +251,7 @@ menu > li > menu {
     right: 0;
     width: 70%;
     height: 100%;
-    z-index: 4;
+    z-index: 20;
     background-color: var(--bg-default);
     padding: 1rem;
     overflow-y: scroll;

assets/sass/search.scss

@@ -1,7 +1,9 @@
+$search-z-index: 12;
+
 #search {
   width: 100%;
   display: flex;
-  z-index: 6;
+  z-index: $search-z-index;
 
   @media print {
     display: none;
@@ -33,7 +35,7 @@
   }
 
   input.pagefind-ui__search-input {
-    z-index: 6;
+    z-index: $search-z-index;
     outline: 0.2rem solid transparent;
     border: var(--border);
     box-shadow: var(--box-shadow);
@@ -65,7 +67,7 @@
   }
 
   .pagefind-ui__form::before {
-    z-index: 7;
+    z-index: $search-z-index + 1;
   }
 
   .pagefind-ui__drawer {
@@ -75,7 +77,7 @@
     overflow: hidden;
     position: absolute;
     width: 100%;
-    z-index: 6;
+    z-index: $search-z-index;
     border: var(--border);
     border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
   }
@@ -156,6 +158,6 @@
     display: block;
     opacity: 1;
     visibility: visible;
-    z-index: 6;
+    z-index: $search-z-index;
   }
 }

assets/sass/styles.scss

@@ -389,15 +389,18 @@ details > summary {
   background-color: rgba(0, 0, 0, 0.6);
   position: fixed;
   inset: 0;
-  z-index: 3;
 
   @media print {
     display: none;
   }
 }
 
-.overlay--show-lv5 {
-  z-index: 5;
+.overlay--content {
+  z-index: 6;
+}
+
+.overlay--search {
+  z-index: 10;
 }
 
 body:has(.overlay--show) {