Show all nav items on mobile instead of collapsing

The menu collapsed to a hamburger below 640px, which was roughly twice
the width the items actually need: measured with Segoe UI Semibold, the
five entries occupy 296px against 343px available at a 375px viewport.

Drops the toggle entirely and scales the column gap and font size with
clamp() instead, so there is no breakpoint at all. flex-wrap handles the
extreme case -- below ~330px the row wraps to two lines, which still
shows every item rather than hiding them.

Also removes the checkbox-and-label toggle hack, which announced itself
as a checkbox and carried no aria-expanded state.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

assets/css/main.css

@@ -109,20 +109,14 @@ h3 { font-size: 1.2rem; margin: var(--space-3) 0 var(--space-1); }
   z-index: 20;
 }
 
-.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
+/* No hamburger: the five menu items need roughly 316px at the smallest gap, so
-
+   they fit on one line on any modern phone. The column gap scales with the
-.nav-toggle-label {
+   viewport, and flex-wrap drops to a second row in the extreme case (very
-  display: none;
+   narrow screen or large text zoom) rather than hiding anything. */
-  padding: var(--space-2) 0;
-  color: #fff;
-  font-weight: 600;
-  cursor: pointer;
-}
-
 .nav-list {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-3);
+  gap: 0 clamp(0.75rem, 0.2rem + 2.2vw, 1.5rem);
   list-style: none;
   margin: 0;
   padding: 0;
@@ -130,30 +124,16 @@ h3 { font-size: 1.2rem; margin: var(--space-3) 0 var(--space-1); }
 
 .nav-list a {
   display: block;
-  padding: 0.85rem 0;
+  padding: 0.85rem 0;          /* keeps a ~44px touch target */
   color: #fff;
   text-decoration: none;
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: clamp(0.875rem, 0.83rem + 0.2vw, 0.95rem);
   border-bottom: 3px solid transparent;
 }
 .nav-list a:hover { color: #fff; border-bottom-color: rgb(255 255 255 / 45%); }
 .nav-list a[aria-current="page"] { border-bottom-color: #fff; }
 
-@media (max-width: 640px) {
-  .nav-toggle-label { display: block; }
-  .nav-list {
-    display: none;
-    flex-direction: column;
-    gap: 0;
-    padding-bottom: var(--space-2);
-  }
-  .nav-toggle:checked ~ .nav-list { display: flex; }
-  .nav-list a { padding: 0.6rem 0; border-bottom: 0; }
-  .nav-list a[aria-current="page"] { text-decoration: underline; }
-  .nav-toggle:focus-visible ~ .nav-toggle-label { outline: 3px solid #fff; }
-}
-
 /* ----------------------------------------------------------------- main */
 
 .site-main { padding-block: var(--space-4) var(--space-5); }

hugo.toml

@@ -48,10 +48,6 @@ buildFuture = false
     name = 'Archiv'
     pageRef = '/archiv'
     weight = 40
-  [[menus.main]]
-    name = 'Impressum'
-    pageRef = '/impressum'
-    weight = 50
 
 [outputs]
   home = ['html', 'rss', 'sitemap']

layouts/_partials/header.html

@@ -22,10 +22,6 @@
 
   <nav class="site-nav" aria-label="Hauptnavigation">
     <div class="container">
-      <input type="checkbox" id="nav-toggle" class="nav-toggle">
-      <label for="nav-toggle" class="nav-toggle-label">
-        <span aria-hidden="true">☰</span> Menü
-      </label>
       <ul class="nav-list">
         <li><a href="{{ "/" | relURL }}"{{ if .IsHome }} aria-current="page"{{ end }}>Start</a></li>
         {{ range site.Menus.main }}