fix: Topbar in Safari — overflow-x:hidden raus, flex-wrap raus, safe-area-inset rein

User-Bericht: 'Die obere Menueleiste verschwindet hinter den Tabs in
Safari. Und ich kann nicht mehr auf Anmelden klicken.'

Drei zusammenhaengende Probleme im Mobile-Media-Query:

1. body.v2 { overflow-x: hidden } war als Notbremse fuer Layout-Overflow
   gedacht, aber Safari (WebKit) interpretiert das so, dass position:
   sticky-Kinder nicht ueber den scrollenden Container kommen — die
   Topbar haftet nicht mehr richtig und kann hinter Safaris eigener
   Tab-Bar verschwinden. Raus damit.
   minmax(0, 1fr) auf v2-shell reicht als Overflow-Schutz.

2. flex-wrap: wrap auf der Topbar liess die Auth-/Theme-/Bundesland-
   Items in eine zweite Zeile umbrechen. Sticky-Elements mit
   variabler Hoehe haben in Safari Render-Bugs (clipping, click-
   absorption). Stattdessen jetzt: weniger wichtige Items
   (Methodik/Quellen-Links + Bundesland-Selector) auf Mobile via
   display:none ausgeblendet. Brand, Auth-Control und Theme-Toggle
   bleiben — passen problemlos in eine 32-px-Zeile.

3. padding-top: env(safe-area-inset-top, 0) fuer iOS-Safari, damit
   die Topbar Saafais Chrome-Overlap respektiert (Notch, URL-Bar,
   Tab-Bar im 'Compact'-Mode).

Plus z-index: 200 auf der Topbar — schaerfer als alle Page-Elemente,
sodass Anmelden-Button garantiert klickbar bleibt selbst wenn
darunterliegende Elemente in Edge-Cases ueberlappen.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/static/v2/v2.css

@@ -793,12 +793,11 @@ body.v2 ul.v2-manual ul li::before {
 /* ── Responsive: Mobile Drawer ──────────────────────────────────── */
 @media (max-width: 900px) {
   /* CSS-Grid-Bug: 1fr-Track schrumpft NICHT unter die min-content seiner
-     Kinder. Mit minmax(0, 1fr) erlauben wir track auf 0 zu schrumpfen,
+     Kinder. Mit minmax(0, 1fr) erlauben wir track auf 0 zu schrumpfen.
-     was Overflow durch min-content (lange Wörter, Tables, fixe Breiten)
+
-     verhindert. Plus body.overflow-x:hidden als Notbremse. */
+     KEIN body.overflow-x:hidden hier — das bricht position:sticky in
-  body.v2 {
+     Safari (sticky-Element kommt nicht ueber den scrollenden Container,
-    overflow-x: hidden;
+     Topbar verschwindet hinter Safari-Chrome). minmax(0,1fr) reicht. */
-  }
   body.v2 .v2-shell {
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
@@ -814,22 +813,31 @@ body.v2 ul.v2-manual ul li::before {
   body.v2 .v2-footer {
     min-width: 0;
     max-width: 100%;
-    overflow-wrap: anywhere;  /* lange URLs / unbreakable Wörter umbrechen */
+    overflow-wrap: anywhere;
   }
   body.v2 .v2-main {
     padding: 16px 12px;
   }
-  /* Topbar darf auf Mobile umbrechen, sonst pusht das Auth-Widget +
+  /* Mobile Topbar: nicht wrappen (broke sticky in Safari), stattdessen
-     Bundesland-Selector + Theme-Toggle die rechte Kante ueber 390 px. */
+     weniger wichtige Items via display:none aus dem Flow nehmen. Brand,
+     Auth-Widget und Theme-Toggle bleiben erreichbar. */
   body.v2 .v2-topbar {
-    flex-wrap: wrap;
+    height: 32px;
-    height: auto;
+    padding: 0 12px;
-    min-height: 32px;
+    flex-wrap: nowrap;
-    row-gap: 4px;
+    z-index: 200;
-    padding: 4px 12px;
   }
-  body.v2 .v2-topbar > * {
+  /* Methodik + Quellen + Bundesland-Selector werden auf Mobile aus dem
-    max-height: none;
+     Topbar verbannt (sind im Sidebar-Drawer + Footer ohnehin nochmal). */
+  body.v2 .v2-topbar > a[href="/methodik"],
+  body.v2 .v2-topbar > a[href="/quellen"],
+  body.v2 .v2-topbar > #v2-global-bl {
+    display: none;
+  }
+  /* Safe-Area-Inset fuer iOS-Safari: Topbar respektiert die Browser-
+     Chrome-Hoehe ueber den ersten 0 px der Page. */
+  body.v2 .v2-topbar {
+    padding-top: env(safe-area-inset-top, 0);
   }
 
   .v2-sidebar {