fix mobile header shadow appearing over hamburger menu

Separate the drop shadow from the button wrapper into its own fixed
element with a lower z-index. This prevents the shadow from appearing
over the hamburger menu when it's pulled out on mobile.

- Create separate button_wrapper_shadow element
- Move box-shadow styling to shadow element
- Set shadow z-index to 9 to stay below menu but above page content
- Use fixed positioning with pointer-events: none

src/lib/components/Header.svelte

@@ -112,8 +112,17 @@ footer{
 }
 
 @media screen and (max-width: 800px) {
-	.button_wrapper{
+	.button_wrapper_shadow{
 		box-shadow: 0 1em 1rem 0rem rgba(0,0,0,0.4);
+		position: fixed;
+		width: 100%;
+		height: 4rem;
+		top: 0;
+		left: 0;
+		z-index: 9;
+		pointer-events: none;
+	}
+	.button_wrapper{
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
@@ -194,6 +203,7 @@ footer{
 </style>
 <div class=wrapper lang=de>
 <div>
+<span class=button_wrapper_shadow></span>
 <div class=button_wrapper>
 <a href="/"><Symbol></Symbol></a>
 <div class="right-buttons">