/**
* dieAbnehmstation — Mobile Best Practices
* PAGEFORGE37 Shared Mobile Standard
*
* Load AFTER shared.css in all HTML pages:
*
*
* Covers: iOS/Android quirks, touch targets, safe areas,
* reduced-motion, overscroll, no-js fallbacks
*/
/* ========================================
TAP HIGHLIGHT RESET
Removes the orange/blue flash on tap (Android Chrome, older iOS)
======================================== */
*,
*::before,
*::after {
-webkit-tap-highlight-color: transparent;
}
/* ========================================
SAFE AREA — iPhone Notch / Dynamic Island
Requires:
======================================== */
.site-header {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
.site-footer {
padding-bottom: env(safe-area-inset-bottom);
}
/* ========================================
OVERSCROLL BEHAVIOR
Prevents background scroll bleed when modals/nav are open
======================================== */
body.nav-open {
overflow: hidden;
overscroll-behavior: none;
/* iOS Safari needs these for full lock */
position: fixed;
width: 100%;
}
.mobile-nav.open {
overscroll-behavior: contain;
}
/* ========================================
SCROLL BEHAVIOR
Smooth-scroll only via JS (shared.js handles this).
Global smooth on can interfere with iOS momentum scrolling
and causes janky anchor jumps on low-end Android.
======================================== */
html {
scroll-behavior: auto;
}
/* ========================================
REDUCED MOTION
Respects user preference — content always visible
======================================== */
@media (prefers-reduced-motion: reduce) {
.fade-in {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ========================================
NO-JS FALLBACK
If JavaScript fails to load, content stays visible.
Requires: + JS removes the class
======================================== */
.no-js .fade-in {
opacity: 1;
transform: none;
}
/* ========================================
TOUCH TARGET MINIMUMS
Apple HIG: 44x44pt, Android: 48x48dp
Applied to common interactive elements
======================================== */
.hamburger {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-nav-close {
min-width: 44px;
min-height: 44px;
}
/* ========================================
FORM INPUT iOS ZOOM PREVENTION
iOS Safari auto-zooms on focus when font-size < 16px.
Enforce 1rem (16px) minimum on all form inputs.
======================================== */
@media screen and (max-width: 1024px) {
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
font-size: 1rem;
}
}
/* ========================================
CHECKBOX / RADIO TOUCH TARGETS
Ensure checkboxes and radios are large enough to tap
======================================== */
input[type="checkbox"],
input[type="radio"] {
width: 20px;
height: 20px;
flex-shrink: 0;
}