Activate mobil menu with js since it depends on js.

assets/js/mobilemenu.js

@@ -4,10 +4,21 @@
  */
 
 (function () {
+  const main_menu = document.querySelector('.main-menu');
+  const header_region = document.querySelector('.header__region');
   const nav = document.querySelector('.mobile-nav');
   const sheet = document.querySelector('.mobile-nav__sheet');
   const toggle = document.querySelector('.mobile-nav__toggle');
 
+  // Switch to mobil menu on small screens.
+  // The mobile menu depends on js so we use js to activate it.
+  const small_screen = window.matchMedia('(max-width: 666px)').matches;
+  if (small_screen) {
+    main_menu.hidden = true;
+    header_region.hidden = true;
+    nav.hidden = false;
+  }
+
   function navopen() {
     nav.dataset.navopen = 'true';
     sheet.setAttribute('aria-hidden', 'false');

assets/sass/components/anchor/_anchor.scss

@@ -8,7 +8,8 @@
   --anchor-opacity: .4;
 
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto auto;
+  justify-content: start;
   align-items: baseline;
   gap: var(--anchor-gap);
 

assets/sass/components/button/_button.scss

@@ -88,14 +88,16 @@ button,
     appearance: none;
     padding: .5rem;
     color: currentcolor;
-    background-color: unset;
+    background: unset;
     border: unset;
+    text-shadow: unset;
 
     &:hover,
     &:focus-visible,
     &:active {
       color: currentcolor;
-      background-color: unset;
+      background: unset;
+      text-shadow: unset;
       scale: 1.15;
     }
   }

assets/sass/mobilemenu.scss

@@ -2,15 +2,6 @@
 
 @import 'init';
 
-.main-menu,
-.header__region { // stylelint-disable selector-class-pattern
-  display: none;
-
-  @media (min-width: 666px) {
-    display: block;
-  }
-} // stylelint-enable selector-class-pattern
-
 .mobile-nav {
   position: absolute;
   right: 0;
@@ -22,10 +13,6 @@
   z-index: 20;
   pointer-events: none;
 
-  @media (min-width: 666px) {
-    display: none;
-  }
-
   &[data-navopen] {
     position: fixed;
   }
@@ -60,10 +47,6 @@
     z-index: 22;
     pointer-events: auto;
 
-    @media (min-width: 666px) {
-      display: none;
-    }
-
     &:hover,
     &:focus-visible {
       svg {

layouts/partials/mobilemenu.html

@@ -1,4 +1,4 @@
-<div class="mobile-nav" dir="ltr">
+<div class="mobile-nav" dir="ltr" hidden>
   <div class="mobile-nav__cover"></div>
   <button class="mobile-nav__toggle{{ if $.Param "mobilemenuoutline" }} button--outline{{ end }}" aria-expanded="false" aria-controls="sheet">
     {{ i18n "menu_mobile" }}