Mobile-Fixes: Spiele scrollbar + FinalFlux-Hub Overlap/Menue

- MindMatch/TechTacular: Boards passten auf dem Handy nicht in 100vh
  (iOS-Adressleiste) und die Seite war auf overflow:hidden gesperrt ->
  untere Felder unerreichbar. Auf <=820px jetzt scrollbar (height:auto,
  overflow-y:auto, 100dvh), Karten via aspect-ratio, Kacheln via min-height.
- FinalFlux-Hub: das generische `main {}` aus der Alt-style.css traf das
  Hub-<main class="finalflux-main"> (display:flex; width:90%; margin:auto)
  und verursachte Overlap + unerreichbares Themen-Menue. In .finalflux-main
  neutralisiert; Shell stapelt auf Mobil als display:block, Sidebar volle Hoehe.

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

src/main/resources/static/css/finalflux.css

@@ -70,6 +70,12 @@ body.finalflux-page {
 }
 
 .finalflux-main {
+  /* display/width/margin explizit, um das generische `main {}` aus style.css
+     (display:flex; width:90%; margin:0 auto) zu neutralisieren -> sonst
+     Überlappung/Fehllayout im Hub. */
+  display: block;
+  width: auto;
+  margin: 0;
   padding: 2rem;
   max-width: 1100px;
 }
@@ -315,11 +321,16 @@ body.finalflux-page {
 }
 
 @media (max-width: 820px) {
+  /* Block statt Grid -> Sidebar (Themen-Menü) und Inhalt stapeln sauber,
+     keine Überlappung, volle Höhe scrollbar. */
   .finalflux-shell {
-    grid-template-columns: 1fr;
+    display: block;
+    min-height: 100dvh;
   }
 
   .finalflux-sidebar {
+    overflow: visible;
+    height: auto;
     border-right: 0;
     border-bottom: 1px solid var(--border-accent);
   }