/* ════════════════════════════════════════════════════════════════
 * formstube · Controlling · fs-pwa.css
 * ════════════════════════════════════════════════════════════════
 * Polish für Standalone-PWA-Mode (Add-to-Home-Screen installiert).
 *
 * Wird via fs-pwa-ios.js getriggert durch:
 *   document.body.classList.add('is-pwa')
 *
 * Behandelt:
 *  - Safe-Area-Insets (iPhone Notch + Home-Indicator)
 *  - Status-Bar-Padding im Standalone-Mode (oberer Rand)
 *  - Bottom-Nav-Lift über Home-Indicator
 *  - Banner-Hint sitzt sauber über der Bottom-Nav
 * ════════════════════════════════════════════════════════════════ */

/* ─── Standalone-Mode · Safe-Area NUR wo wirklich nötig ────────
   Marc-Bug 2026-05-22: Doppelter Padding-Top (body + nav + nav-eigene
   Höhe) erzeugte riesigen schwarzen Block oben im Standalone-Mode.
   Root: viewport-fit=cover schiebt Content bereits korrekt UNTER die
   Notch · zusätzliches body/nav padding addiert sich obendrauf.

   Regel: KEIN Top-Padding setzen · iOS handhabt das selbst. Nur
   Bottom-Elemente (Mobile-Nav, FAB) brauchen explizites Lift damit
   sie nicht unter dem Home-Indicator verschwinden. */

/* Bottom-Nav (Mobile) muss über dem Home-Indicator sitzen */
body.is-pwa .mobile-nav,
body.is-pwa .fs-bottom-nav,
body.is-pwa .mobile-tabbar {
  padding-bottom: max(env(safe-area-inset-bottom), 10px);
}

/* Floating-Buttons (z.B. Companion-FAB) auch lift */
body.is-pwa .fab-hex,
body.is-pwa .floating-cta {
  bottom: calc(20px + env(safe-area-inset-bottom));
}

/* ─── iOS-Add-to-Home-Hint Lift wenn Bottom-Nav vorhanden ─────── */
body.fs-pwa-hint-visible .mobile-nav,
body.fs-pwa-hint-visible .fs-bottom-nav {
  /* Banner ist ~110px hoch · Bottom-Nav lift sodass sie sichtbar bleibt */
  margin-bottom: 130px;
}

/* ─── iOS-Style: Pull-to-Refresh-Effekt deaktivieren in PWA ──── */
body.is-pwa {
  overscroll-behavior-y: contain;
}

/* ─── Tap-Highlight raus im Standalone (sieht wie native App) ── */
body.is-pwa * {
  -webkit-tap-highlight-color: transparent;
}

/* Aber: interaktive Elemente bleiben fokus-sichtbar */
body.is-pwa a:focus-visible,
body.is-pwa button:focus-visible,
body.is-pwa input:focus-visible,
body.is-pwa textarea:focus-visible,
body.is-pwa select:focus-visible {
  outline: 2px solid var(--accent, #D8FF3C);
  outline-offset: 2px;
}