Fix mobile layout: Sprachauswahl überlappt nicht mehr mit Überschrift und korrigiere URL-Parameter für Sprachwechsel

README.md

@@ -472,22 +472,23 @@ Damit ist die App für Menschen mit unterschiedlichen Einschränkungen (z.B. Seh
 
 ### Code Statistik
 
-cloc|github.com/AlDanial/cloc v 2.06  T=0.08 s (269.8 files/s, 57268.4 lines/s)
+cloc|github.com/AlDanial/cloc v 2.06  T=0.08 s (301.6 files/s, 72354.1 lines/s)
 --- | ---
 
 Language|files|blank|comment|code
 :-------|-------:|-------:|-------:|-------:
-HTML|8|36|6|1998
+HTML|8|47|6|2086
-Python|2|53|57|614
+Python|2|59|68|690
 JavaScript|2|95|87|571
-Markdown|2|139|0|360
+Markdown|3|176|0|492
+PO File|2|234|240|492
 JSON|3|0|0|243
 CSS|1|186|3|188
 SVG|2|0|0|14
 Dockerfile|1|5|6|8
 DOS Batch|1|0|0|1
 --------|--------|--------|--------|--------
-SUM:|22|514|159|3997
+SUM:|25|802|410|4785
 
 ## Lizenz
 

app.py

@@ -20,7 +20,7 @@ app.config['BABEL_TRANSLATION_DIRECTORIES'] = 'translations'
 babel = Babel()
 
 # Version der App
-APP_VERSION = "1.4.0"
+APP_VERSION = "1.4.3"
 
 # HTML-Template wird jetzt aus templates/index.html geladen
 

cookies.txt

@@ -1,5 +0,0 @@
-# Netscape HTTP Cookie File
-# https://curl.se/docs/http-cookies.html
-# This file was generated by libcurl! Edit at your own risk.
-
-#HttpOnly_localhost	FALSE	/	FALSE	0	session	eyJsYW5ndWFnZSI6ImVuIn0.aIzL2Q.DZtPH-UmM3muNC8RZypEbL29jCg

templates/index.html

@@ -40,6 +40,11 @@
 * {
     box-sizing: border-box;
 }
+
+html {
+    overflow-x: hidden;
+    width: 100%;
+}
 body {
     background: var(--background);
     color: var(--text);
@@ -47,7 +52,10 @@ body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
+    overflow-y: auto;
     box-sizing: border-box;
+    min-height: 100vh;
+    width: 100%;
 }
 .container {
     max-width: 480px;
@@ -60,6 +68,7 @@ body {
     border: 1px solid var(--border);
     position: relative;
     box-sizing: border-box;
+    overflow: hidden;
 }
 .help-button-container {
     position: absolute;
@@ -145,8 +154,9 @@ body {
     padding: 2em;
     max-width: 90%;
     width: 90%;
-    max-height: 90%;
+    max-height: 90vh;
     overflow-y: auto;
+    overflow-x: hidden;
     position: relative;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     margin: 0 auto;
@@ -345,6 +355,7 @@ button:focus, .accordion-header:focus {
     /* Layout-Shift-Prävention */
     min-height: 200px;
     contain: layout style paint;
+    width: 100%;
 }
 .accordion-item + .accordion-item {
     border-top: 1px solid var(--border);
@@ -374,6 +385,7 @@ button:focus, .accordion-header:focus {
     overflow: hidden;
     transition: max-height 0.3s ease-out, padding 0.3s ease-out;
     opacity: 0;
+    width: 100%;
 }
 .accordion-content.active {
     display: block;
@@ -459,9 +471,11 @@ button:focus, .accordion-header:focus {
         padding: 1.2em 0.7em 1em 0.7em;
         width: calc(100% - 2em);
         max-width: none;
+        overflow: hidden;
     }
     h1 {
         font-size: 1.3em;
+        margin-top: 3.5em; /* Abstand für Sprachauswahl */
     }
     .help-button-container {
         top: 1em;
@@ -494,8 +508,11 @@ button:focus, .accordion-header:focus {
         margin: 1em;
         width: calc(100% - 2em);
         max-width: none;
+        max-height: 85vh;
         left: 0;
         transform: none;
+        overflow-y: auto;
+        overflow-x: hidden;
     }
 }
 
@@ -602,7 +619,11 @@ footer br + a {
         function changeLanguage(language) {
             // Speichere Sprache in localStorage (datenschutzfreundlich)
             localStorage.setItem('preferred_language', language);
-            window.location.href = '/set_language/' + language;
+            
+            // Erstelle neue URL mit korrektem lang-Parameter
+            const currentUrl = new URL(window.location.href);
+            currentUrl.searchParams.set('lang', language);
+            window.location.href = currentUrl.toString();
         }
         function openAccordion(idx) {
             const headers = document.querySelectorAll('.accordion-header');