Keep mobile menu links as pills with a full-width active stroke

Elternbeirat.Web/wwwroot/app.css

@@ -521,19 +521,18 @@ main:focus {
     background: var(--color-accent);
 }
 
-/* Mobile: the stacked links in the open menu become full-width rows with a
+/* Mobile: the open menu stacks the links centred, each as wide as its text -- so
-   rounded highlight instead of pills, and the green stroke shrinks to a short
+   they stay the same pills as on the desktop, with the stroke under the whole word.
-   mark at the start, so a long row does not get a long line. Same global
+   Only taller, for a comfortable tap target; the stroke moves up with the extra
-   placement, same NavLink reason as above. */
+   padding so it still sits right under the text, not at the pill's edge. Same
+   global placement, same NavLink reason as above. */
 @media (max-width: 40rem) {
     .main-nav a {
         padding: 0.6rem var(--space-3);
-        border-radius: var(--radius-sm);
     }
 
     .main-nav a.active::after {
-        right: auto;
+        bottom: 0.55rem;
-        width: 1.5rem;
     }
 }