/** * Modul: PWA Native Feel * Zweck: Natives Touch- und Scrollverhalten, Safe Areas, Touch-Targets * Abhängigkeiten: tokens.css, layout.css */ /* ── Kein Rubber-Banding / Pull-to-Refresh des Browsers ── */ html, body { overscroll-behavior: none; } /* ── Kein Tap-Highlight auf allen Elementen (Android Chrome) ── * reset.css setzt es nur auf html; hier global für alle Elemente */ * { -webkit-tap-highlight-color: transparent; } /* ── Safe Area Insets (Notch, Dynamic Island, Gesture Bar) ── */ body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* ── Bottom Nav über der Gesture Bar ── * layout.css nutzt --safe-area-inset-bottom Token; * hier als Fallback direkt via env() */ .nav-bottom { padding-bottom: env(safe-area-inset-bottom); } /* ── Touch-Targets: min 44×44px (Apple HIG / WCAG 2.5.5) ── */ button, a, [role="button"], input[type="checkbox"], input[type="radio"] { min-height: 44px; min-width: 44px; } /* ── Smooth Momentum-Scrolling in scrollbaren Containern ── */ .scroll-container, .nav-bottom__scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } /* ── Kein Text-Selection in UI-Elementen (nur in Content-Bereichen) ── */ nav, .nav-bottom, .nav-sidebar, .cal-toolbar, .tasks-toolbar, .notes-toolbar, .contacts-toolbar, .modal-panel__header { -webkit-user-select: none; user-select: none; } /* ── Standalone-Modus: Status-Bar-Bereich berücksichtigen ── */ @media (display-mode: standalone) { body { padding-top: env(safe-area-inset-top); } }