Mobile: Glocken-Panel und Bewerbungsliste liefen aus dem Bild

Benachrichtigungen: Das Panel haengt per right:0 am Wrapper der Glocke, rechts
von ihr stehen aber noch Konto und Burger - die 20rem Breite wuchsen dadurch
nach links aus dem Viewport (gemessen -51px bei 375px Breite). Unter 768px
spannt es sich jetzt ueber den Header: `position: static` auf dem Anker macht
den Header zum Bezugsrahmen, was auch die vertikale Lage inklusive
Impersonation-Banner richtig haelt.

Bewerbungsliste: Das gestapelte Karten-Layout griff erst unter 640px, die
minmax()-Spalten des Rasters brauchen aber ~764px und die Karte bekommt ihre
min-w-[760px] erst ab md (768px). Im Band dazwischen - Handy quer, grosse
Phones - galt also das Desktop-Raster, und Stelle, Art und Status lagen
ausserhalb (132px Ueberhang bei 667px). Grenze auf 767px gezogen, damit sie an
md anschliesst.

Nachgemessen im Headless-Browser bei 375/390/412/667/740/820px: nichts ragt
mehr heraus, die Liste scrollt nicht mehr horizontal.

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

public/css/styles.css

@@ -183,6 +183,25 @@ button.nav-item, .icon-btn { cursor: pointer; }
 /* Menus that hang off a left-aligned nav item open to the left edge. */
 nav .dd-panel { right: auto; left: 0; }
 
+/* Auf schmalen Schirmen taugt das Ausrichten am Knopf nicht: das Panel hängt an
+   der Glocke, rechts von ihr stehen aber noch Konto und Burger — ein 20rem breites
+   Panel wächst dann nach links aus dem Bild heraus (gemessen: -51px bei 375px).
+   Deshalb spannt es sich hier über die Breite des Headers.
+
+   Der Trick ist `position: static` auf dem Anker: damit wird der Header (sticky =
+   positioniert) zum Bezugsrahmen des absolut gesetzten Panels. Das hält auch die
+   vertikale Lage richtig — top: 100% ist dann die Unterkante des Headers, inklusive
+   des Impersonation-Banners, wenn eines da ist. */
+@media (max-width: 767px) {
+    #siteHeader .dd-anchor { position: static; }
+    #siteHeader .dd-panel {
+        left: 0.75rem;
+        right: 0.75rem;
+        width: auto;      /* schlägt Tailwinds w-80 / w-60 (ID erhöht die Spezifität) */
+        max-width: none;
+    }
+}
+
 @keyframes dd-in {
     from { opacity: 0; transform: translateY(-4px) scale(0.98); }
     to   { opacity: 1; transform: none; }
@@ -447,13 +466,21 @@ button.loading::after {
     .fixed.inset-0 > .min-h-screen {
         align-items: flex-start !important;
     }
+}
 
-    /* Dashboard application list: the desktop layout is a 7-column grid forced to
-       760px and scrolled horizontally — usable on a phone only with two-thumb
-       scrolling. On a smartphone, restyle each row into a stacked card so the
-       primary content fits the viewport. The column header row is hidden; the
-       cells are re-placed via grid-template-areas (their DOM order is unrelated
-       to their visual position). */
+/* Dashboard application list: the desktop layout is a 7-column grid forced to
+   760px and scrolled horizontally — usable on a phone only with two-thumb
+   scrolling. Below md, restyle each row into a stacked card so the primary
+   content fits the viewport. The column header row is hidden; the cells are
+   re-placed via grid-template-areas (their DOM order is unrelated to their
+   visual position).
+
+   Die Grenze ist bewusst 767px und nicht 640px wie beim Rest: das Raster braucht
+   allein durch seine minmax()-Spalten rund 764px, und die Karte bekommt ihre
+   min-w-[760px] erst ab md (768px). Zwischen 641px und 767px — Handy quer, große
+   Phones — galt vorher also das Desktop-Raster ohne Not, und Stelle, Art und
+   Status lagen außerhalb des Sichtbaren (gemessen: 132px Überhang bei 667px). */
+@media (max-width: 767px) {
     .app-head {
         display: none !important;
     }

views/partials/header.ejs

@@ -126,8 +126,9 @@
                  the free space and the cluster just follows it. -->
             <div class="ml-auto flex items-center gap-1.5 lg:ml-3">
 
-                <!-- Notifications -->
-                <div class="relative">
+                <!-- Notifications. `dd-anchor`: auf schmalen Schirmen spannt sich das
+                     Panel über den Header statt am Knopf zu kleben (siehe styles.css). -->
+                <div class="dd-anchor relative">
                     <button id="notifBtn" type="button" data-dd="notifPanel" aria-expanded="false"
                             class="icon-btn" aria-label="Benachrichtigungen" title="Ungelesene E-Mails">
                         <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
@@ -150,7 +151,7 @@
 
                 <% if (angemeldet) { %>
                 <!-- Account -->
-                <div class="relative">
+                <div class="dd-anchor relative">
                     <button type="button" data-dd="ddUser" aria-expanded="false" aria-haspopup="true"
                             class="nav-item !gap-2 !py-1.5 !pl-1.5 !pr-2">
                         <span class="grid h-7 w-7 place-items-center rounded-full bg-blue-600/10 text-[11px] font-semibold text-blue-700 ring-1 ring-blue-600/20 dark:bg-white/10 dark:text-white dark:ring-white/15">