Mobil-Menü: schwebende Eck-Knöpfe blockierten Sprachschalter + Bewerben-Button

Nutzer-Report 20.08.2026: "auf dem Handy... passt nicht immer alles". Per echter
Mobil-Emulation (iPhone 15 Pro + Pixel 8, Playwright) nachgestellt statt geraten:
Die schwebenden Eck-Knöpfe (Musik-Widget unten rechts, Vorschau-Umschalter fuer
Dogi/VanVan unten links) sind absichtlich immer sichtbar (position:fixed, direkte
<body>-Kinder). Beim aufgeklappten Mobil-Hamburger-Menü lagen sie dadurch sichtbar
UEBER den untersten Menuepunkten (Sprachschalter "DE" + "Bewerben"-Knopf) und
verdeckten sie -- auf Screenshots klar zu sehen, betrifft jede der ueber 30 Seiten,
da das Menü ueberall gleich ist. Genau die Art Bug, die im Browser (Adressleiste
noch da, man kann drumrum navigieren) kaum auffaellt, aber in der installierten
Vollbild-App voll durchschlaegt.

Fix: :has()-Selektor blendet beide Widgets aus, solange .nav-links.open ist --
kein gemeinsamer Elternknoten mit dem Menue vorhanden, daher CSS statt weiterer
main.js-Logik. Nach dem Fix per Regressionstest ueber 6 Seiten x 2 Geraete erneut
verifiziert: Widgets erscheinen normal wieder, sobald das Menue schliesst, keine
neuen Konsolenfehler, kein horizontales Scrollen.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-08-20 10:28:22 +02:00
co-authored by Claude Opus 5
parent 44086b0407
commit 0223fcf9cd
+16
View File
@@ -1336,6 +1336,22 @@ header.site-header {
.nav-dropdown::before { display: none; }
.nav-group.open .nav-dropdown { display: flex; }
.nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; }
/* Bugfix 20.08.2026 (Nutzer-Report: "auf dem Handy passt nicht immer alles").
Per echter Mobil-Emulation (iPhone 15 Pro + Pixel 8, Screenshots) nachgestellt:
Die schwebenden Eck-Knöpfe (Musik unten rechts, Vorschau-Umschalter unten links
für Dogi/VanVan — siehe .music-widget/.vorschau-widget weiter unten) sind
absichtlich IMMER sichtbar (position:fixed, direkte <body>-Kinder, eigener
Stacking-Kontext, unabhängig vom Menü). Bei aufgeklapptem Mobil-Menü liegen sie
dadurch ÜBER den untersten Menüpunkten (Sprachschalter + "Bewerben"-Knopf) und
verdecken/blockieren sie sichtbar. :has() statt einer weiteren main.js-Änderung,
weil beide Widgets keinen gemeinsamen Elternknoten mit .nav-links haben (beide
hängen direkt unter <body>, .nav-links steckt im Header) — reiner CSS-Fix bleibt
an der Stelle, an der auch die restliche Menü-Overlay-Logik dieses Blocks steht. */
body:has(.nav-links.open) .music-widget,
body:has(.nav-links.open) .vorschau-widget {
display: none;
}
}
/* ---------- Buttons ----------