fix(ui): eine Breite fuer Seitenleiste und Kopfleiste

Kopfleiste blendete den Menue-Knopf ab 720px aus, die Seitenleiste stand
aber erst ab 768px fest im Bild. Dazwischen lag ein Band von 48 Pixeln
ohne Menue und ohne Knopf dorthin -- ein aufgeklapptes Fold landet mit
rund 757px genau darin.

Die Grenze steht jetzt einmal in src/breakpoints.ts.

Dazu zwei Folgefehler derselben Sache:

* Der abdunkelnde Grund lag mit z-index 40 ueber der fest stehenden
  Leiste (die hat dort keinen). Per Randwisch aufgeschoben, war die
  Leiste danach sichtbar, aber taub. Er blendet sich ab 720px aus.
* Der Randwisch loest breit gar nicht mehr aus, und Aufklappen bei
  aufgeschobener Leiste setzt sie zurueck -- sonst schluckte die
  Zurueck-Geste einmal ins Leere.

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

frontend/src/components/Shell.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { filesApi } from '../api/client'
 import type { FolderItem, User } from '../api/client'
 import { useNavHistory, type View } from '../hooks/useNavHistory'
@@ -14,6 +14,7 @@ import ProfilePage from '../pages/ProfilePage'
 import TagsPage from '../pages/TagsPage'
 import CalendarPage from '../pages/CalendarPage'
 import { UserMenuProvider } from './UserMenu'
+import { wideEnough } from '../breakpoints'
 
 export type { View }
 
@@ -44,6 +45,19 @@ export default function Shell({ user, onLogout, onUserChanged }: Props) {
     onClose: useCallback(() => { setSidebarOpen(false) }, []),
   })
 
+  // Wird das Gerät aufgeklappt, während die Leiste aufgeschoben war, steht sie
+  // ab da ohnehin fest im Bild. Bliebe „aufgeschoben" dabei stehen, schluckte
+  // die Zurück-Geste einmal ins Leere – sie zielte auf etwas, das nichts mehr
+  // verdeckt.
+  useEffect(() => {
+    if (typeof matchMedia !== 'function') return
+    const mq = matchMedia(wideEnough)
+    const auf = () => { if (mq.matches) setSidebarOpen(false) }
+    auf()
+    mq.addEventListener('change', auf)
+    return () => mq.removeEventListener('change', auf)
+  }, [])
+
   // Hochgezählt, wenn etwas auf den Papierkorb gezogen wurde – die Dateiliste
   // hängt daran und holt sich daraufhin neu.
   const [trashBump, setTrashBump] = useState(0)
@@ -81,9 +95,13 @@ export default function Shell({ user, onLogout, onUserChanged }: Props) {
       onOpenSidebar: () => setSidebarOpen(true),
     }}>
     <div className="aether-vh" style={{ display: 'flex', overflow: 'hidden' }}>
-      {/* Mobile overlay */}
+      {/* Der abdunkelnde Grund hinter der aufgeschobenen Leiste.
+          Die Klasse blendet ihn aus, sobald die Leiste fest im Bild steht:
+          Dort liegt sie im Fluss und **ohne** z-index, ein Grund darüber
+          machte sie unanklickbar – sichtbar, aber taub. */}
       {sidebarOpen && (
         <div
+          className="aether-scrim"
           style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 40 }}
           onClick={() => setSidebarOpen(false)}
         />