From 3f9997456a98df395ca8b6dea3c026604eb8bffe Mon Sep 17 00:00:00 2001 From: Dogfather Date: Sat, 22 Aug 2026 11:27:10 +0200 Subject: [PATCH] Handy: Sprachfenster (DE) klappte halb aus dem Bild auf Nutzer-Report per Foto: beim Tippen auf "DE" im Handy-Menue erschien das Sprachfenster halb links ausserhalb des Bildschirms, man konnte keine Sprache mehr lesen oder treffen. Ursache: Die Handy-Regel, die alle Aufklapp-Fenster auf statische Position und volle Breite umstellt, hat den Sprachschalter nicht erreicht -- seine Desktop-Regel (.sprach-schalter .nav-dropdown, 0-2-0) ist spezifischer, und eine @media-Abfrage erhoeht die Spezifitaet nicht. Dadurch lief die Desktop-Animation "sprach-dropdown-in" weiter, die per fill-mode:both dauerhaft transform: translateX(-50%) setzt. Auf dem Desktop korrekt (schmales Fenster mittig unter dem Knopf), im Handy-Menue aber toedlich: das Fenster ist dort bildschirmbreit und wurde um seine halbe Breite nach links geschoben (gemessen live: x = -148px bei 390px Viewport). Fix: dieselben Handy-Regeln erneut mit ausreichender Spezifitaet fuer den Sprachschalter, samt Kommentar zur Begruendung. Geprueft mit Playwright (echter Browser): 390x844, 360x640, Querformat 844x390 und Tablet 768x1024 -> Fenster jeweils vollstaendig im Bild, alle 5 Sprachen sichtbar; Desktop 1920 unveraendert schmal und zentriert; Sprachwechsel (English) funktioniert weiterhin. Co-Authored-By: Claude Opus 5 --- assets/css/main.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/assets/css/main.css b/assets/css/main.css index 349fa1b2..ab8ab9db 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1555,6 +1555,27 @@ header.site-header { .nav-dropdown { position: static; transform: none; box-shadow: none; width: 100%; margin-top: 0; animation: none; } .nav-dropdown::before { display: none; } .nav-group.open .nav-dropdown { display: flex; } + /* Bugfix 22.08.2026 (Nutzer-Report per Foto: "wenn ich auf DE klicke geht + das Fenster halb schräg auf, man sieht nichts"). Ursache: die Zeile + darüber (.nav-dropdown, Spezifität 0-1-0) hebt für das Handy-Menü + position/transform/animation auf — sie verliert aber gegen die + Desktop-Regel .sprach-schalter .nav-dropdown (0-2-0, Zeile ~427), denn + eine @media-Abfrage erhöht die Spezifität NICHT. Beim Sprachschalter + blieb dadurch die Aufklapp-Animation "sprach-dropdown-in" aktiv, und + die setzt (fill-mode: both) dauerhaft transform: translateX(-50%) — + die im Handy-Menü volle-Breite-Box wurde also um ihre halbe Breite + nach links aus dem Bild geschoben. Deshalb hier dieselben Regeln noch + einmal mit passender Spezifität (Blattname mitgenannt, damit sie in + jedem Fall gewinnt). */ + .nav-links .sprach-schalter .nav-dropdown { + position: static; + transform: none; + animation: none; + width: 100%; + min-width: 0; + margin-top: 0; + box-shadow: none; + } .nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; } /* Bugfix 20.08.2026 (Nutzer-Report: "auf dem Handy passt nicht immer alles").