User-Bericht: 'Die obere Menueleiste verschwindet hinter den Tabs in
Safari. Und ich kann nicht mehr auf Anmelden klicken.'
Drei zusammenhaengende Probleme im Mobile-Media-Query:
1. body.v2 { overflow-x: hidden } war als Notbremse fuer Layout-Overflow
gedacht, aber Safari (WebKit) interpretiert das so, dass position:
sticky-Kinder nicht ueber den scrollenden Container kommen — die
Topbar haftet nicht mehr richtig und kann hinter Safaris eigener
Tab-Bar verschwinden. Raus damit.
minmax(0, 1fr) auf v2-shell reicht als Overflow-Schutz.
2. flex-wrap: wrap auf der Topbar liess die Auth-/Theme-/Bundesland-
Items in eine zweite Zeile umbrechen. Sticky-Elements mit
variabler Hoehe haben in Safari Render-Bugs (clipping, click-
absorption). Stattdessen jetzt: weniger wichtige Items
(Methodik/Quellen-Links + Bundesland-Selector) auf Mobile via
display:none ausgeblendet. Brand, Auth-Control und Theme-Toggle
bleiben — passen problemlos in eine 32-px-Zeile.
3. padding-top: env(safe-area-inset-top, 0) fuer iOS-Safari, damit
die Topbar Saafais Chrome-Overlap respektiert (Notch, URL-Bar,
Tab-Bar im 'Compact'-Mode).
Plus z-index: 200 auf der Topbar — schaerfer als alle Page-Elemente,
sodass Anmelden-Button garantiert klickbar bleibt selbst wenn
darunterliegende Elemente in Edge-Cases ueberlappen.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
a5ca3da842