CHANGELOG.md

@@ -27,6 +27,8 @@ Konto-Löschung sowie ein app-weiter Farb-Relaunch auf das
 - **Konto-Löschung repariert:** „Profil löschen" warf einen 500er (fehlendes `@Transactional` bei einer abgeleiteten Delete-Query) und löschte nichts. Jetzt werden Konto **plus** Spielstände, Achievements und Profilbild-Datei in einer Transaktion entfernt — erfüllt die in der Datenschutzerklärung zugesicherte Löschung (Art. 17 DSGVO).
 - Impressum-„Zurück"-Link loggte eingeloggte Nutzer scheinbar aus; jetzt login-abhängig (eingeloggt → Dashboard, sonst → Startseite). Gleiche Logik auf den Rechtsseiten.
 - Login-Overlay im **Light-Mode** war weiß-auf-weiß/verwaschen; jetzt kräftiges Orange-Panel mit weißem Text (Dark-Mode unverändert).
+- **Mobile-Bedienbarkeit der Spiele:** MindMatch- und TechTacular-Boards ragten auf dem Handy aus dem Bildschirm, ohne dass man scrollen konnte (`height:100vh; overflow:hidden` + iOS-Adressleiste). Auf Touch-Breiten jetzt scrollbar, Karten/Kacheln mit fester Proportion bzw. Mindesthöhe → alle Felder erreichbar.
+- **FinalFlux-Hub auf Mobil:** Überlappung von Kopfbereich und Inhalt + unerreichbares Themen-Menü. Ursache: das generische `main {}` aus der Alt-`style.css` traf das Hub-`<main>`; jetzt in `.finalflux-main` neutralisiert und die Shell stapelt auf Mobil sauber (`display:block`, Sidebar mit voller Höhe).
 
 ### Sicherheit
 - Neue Rechtsseiten öffentlich erreichbar (`permitAll` für `/impressum`, `/nutzungsbedingungen`, `/datenschutz`, `/richtlinien`).

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);
   }

src/main/resources/static/css/mindmatch.css

@@ -349,3 +349,13 @@ body.mm-body {
   .mm-stat { font-size: 0.65rem; padding: 0.3rem 0.55rem; }
   .mm-stat b { font-size: 0.95rem; }
 }
+
+/* Auf Touch/Handy darf gescrollt werden: das "alles passt ohne Scrollen"-Layout
+   bricht bei 100vh (iOS-Adressleiste) und vielen Karten -> Brett ragt raus.
+   Hier: Seite scrollbar, Karten bekommen feste Proportionen (aspect-ratio). */
+@media (max-width: 820px) {
+  body.mm-body { height: auto; min-height: 100vh; min-height: 100dvh; overflow-y: auto; }
+  .mm-stage { overflow: visible; }
+  .mm-board { height: auto; grid-auto-rows: auto; }
+  .mm-card { aspect-ratio: 3 / 4; }
+}

src/main/resources/static/css/techtacular.css

@@ -264,3 +264,13 @@ body.tt-body {
   .tt-stat { font-size: 0.62rem; padding: 0.3rem 0.5rem; }
   .tt-q-text { font-size: 1.05rem; }
 }
+
+/* Auf Touch/Handy scrollbar: das "alles passt ohne Scrollen"-Layout bricht bei
+   100vh (iOS-Adressleiste) und 5x5-Board -> untere Reihen (500) unerreichbar.
+   Hier: Seite scrollbar, Kacheln mit fester Mindesthöhe statt flex-fill. */
+@media (max-width: 820px) {
+  body.tt-body { height: auto; min-height: 100vh; min-height: 100dvh; overflow-y: auto; }
+  .tt-stage { overflow: visible; }
+  .tt-board { height: auto; }
+  .tt-tile { flex: 0 0 auto; min-height: clamp(58px, 12vw, 86px); }
+}