/* ============================================================================ mobile.css — Mobile-/iOS-Feinschliff für Hamm 360° Wird NACH tailwind.css geladen und überlebt Tailwind-Rebuilds (anders als ein an tailwind.css angehängter Block). Bewusst additiv & risikoarm. ============================================================================ */ /* 1) iOS zoomt automatisch in Eingabefelder mit Schrift < 16px hinein. Auf Mobil daher mind. 16px erzwingen (verhindert das nervige Auto-Zoom). */ @media (max-width: 767px) { input, select, textarea { font-size: 16px; } } /* 2) Echte sichtbare Höhe: 100vh schließt auf iOS die Browser-Leiste mit ein, wodurch Inhalt dahinter verschwindet. 100dvh = tatsächlich sichtbarer Bereich. */ @supports (height: 100dvh) { .h-screen { height: 100dvh; } .min-h-screen { min-height: 100dvh; } } /* 3) Kein Gummiband-/Pull-to-Refresh-Effekt, der die App-Shell verzieht. */ html, body { overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* 4) Sanftes, träges Scrollen in scrollbaren Panels (Dropdowns, Sheets, Listen). */ .overflow-y-auto, .overflow-auto, .overflow-y-scroll { -webkit-overflow-scrolling: touch; } /* 5) Safe-Area (Notch / Home-Indicator) — NUR in der installierten PWA (display-mode: standalone). Im normalen Browser-Tab kümmert sich die Browser-Leiste darum, daher dort bewusst KEINE Änderung → kein Regressionsrisiko. env(safe-area-inset-*) wird nur wirksam mit viewport-fit=cover (in den s). */ @media (display-mode: standalone) { /* Kopfzeile (= erstes -Kind auf allen Seiten) unter die Notch schieben. max(): behält einen sinnvollen Mindestabstand auf Geräten ohne Notch. */ body > header:first-of-type { padding-top: max(0.6rem, env(safe-area-inset-top)); } /* Optionale Hilfsklassen für gezielte Elemente. */ .pt-safe { padding-top: max(0.5rem, env(safe-area-inset-top)); } .pb-safe { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); } .mb-safe { margin-bottom: env(safe-area-inset-bottom); } /* Leaflet-Bedienelemente nicht in die Home-Indicator-Zone legen. */ .leaflet-bottom { margin-bottom: env(safe-area-inset-bottom); } } /* 6) Tap-Targets: sehr kleine Icon-Buttons auf Touch-Geräten leicht vergrößern, damit sie zuverlässig treffbar sind (Apple/Google-Empfehlung ~44px). Wirkt nur auf Zeigegeräte ohne Hover (Touch) und nur, wo Buttons sonst < 36px wären. */ @media (hover: none) and (pointer: coarse) { button, [role="button"], a.inline-flex { touch-action: manipulation; } }