@media (max-width: 768px) and (hover: none) {
  html:root, html:root body { background: #FEF3E7 !important; }
  .mail-app-shell { background: #FEF3E7 !important; }
  .mobile-topbar { padding-top: env(safe-area-inset-top) !important; height: calc(62px + env(safe-area-inset-top)) !important; background: #FEF3E7 !important; }
  .message-list-scroll, .message-view-scroll {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), transparent 100%);
  }
}
@media (max-width: 768px) and (hover: none) {
  input, select, textarea { font-size: 16px !important; }
}

@media (max-width: 768px) and (hover: none) {
  .marketing-shell { background: #FEF3E7 !important; }
  .mio-mobile-top { background: #FEF3E7 !important; box-shadow: none !important; border-bottom-color: rgba(85,21,40,.08) !important; }
  .mio-bottom-nav {
    background: linear-gradient(to bottom, rgba(254,243,231,0) 0%, rgba(254,243,231,.92) 38%, #FEF3E7 100%) !important;
    border-top: 0 !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    padding-top: 18px !important;
  }
}

@media (max-width: 768px) and (hover: none) {
  /* Menü-Abdeckung: läuft nach unten weich aus, statt über dem Safari-Rand hart abzubrechen */
  .mail-app-shell div[style*="z-index: 49"] {
    background: linear-gradient(to bottom, rgba(36,17,24,.36) 0%, rgba(36,17,24,.32) 50%, rgba(36,17,24,0) 88%) !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  /* Doppeltes ✕ im Menü: die Kopfleiste hat bereits eins */
  .mobile-drawer button[aria-label="Menü schließen"] { display: none !important; }
}
@media (max-width: 768px) and (hover: none) {
  /* Menü: keine senkrechte Linie und kein Schatten, die am Safari-Rand abbrechen.
     Die Trennung übernimmt die auslaufende Abdeckung. Eine Linie, die nach unten ausläuft: */
  .mobile-drawer { border-right: 0 !important; box-shadow: none !important; }
  .mobile-drawer::after {
    content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; pointer-events: none;
    background: linear-gradient(to bottom, rgba(85,21,40,.14) 0%, rgba(85,21,40,.10) 60%, rgba(85,21,40,0) 100%);
  }
}